convert content to md

1498 files changed, 72480 insertions, 91427 deletions

diff --git a/files/fr/web/api/abortsignal/index.md b/files/fr/web/api/abortsignal/index.md
index 11a48ef3d1..e45e67e308 100644
--- a/files/fr/web/api/abortsignal/index.md
+++ b/files/fr/web/api/abortsignal/index.md
@@ -9,39 +9,36 @@ tags:
   - Reference
 translation_of: Web/API/AbortSignal
 ---
-<div>{{APIRef("DOM")}}{{SeeCompatTable}}</div>
+{{APIRef("DOM")}}{{SeeCompatTable}}
 
-<p>L'interface <strong><code>AbortSignal</code></strong> représente un objet signal qui vous permet de communiquer avec une requête DOM (telle que Fetch) et de l'annuler si nécessaire par un objet {{domxref("AbortController")}}.</p>
+L'interface **`AbortSignal`** représente un objet signal qui vous permet de communiquer avec une requête DOM (telle que Fetch) et de l'annuler si nécessaire par un objet {{domxref("AbortController")}}.
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<p><em>L'interface AbortSignal hérite des propriétés de son interface parent {{domxref("EventTarget")}}.</em></p>
+_L'interface AbortSignal hérite des propriétés de son interface parent {{domxref("EventTarget")}}._
 
-<dl>
- <dt>{{domxref("AbortSignal.aborted")}} {{readonlyInline}}</dt>
- <dd>Un {{domxref("Boolean")}} (<em>booléen</em>) qui indique si les requêtes avec lesquelles le signal communique sont annulées (<code>true</code>) ou non (<code>false</code>).</dd>
-</dl>
+- {{domxref("AbortSignal.aborted")}} {{readonlyInline}}
+  - : Un {{domxref("Boolean")}} (_booléen_) qui indique si les requêtes avec lesquelles le signal communique sont annulées (`true`) ou non (`false`).
 
-<h3 id="Gestionnaire_dévènement">Gestionnaire d'évènement</h3>
+### Gestionnaire d'évènement
 
-<dl>
- <dt>{{domxref("AbortSignal.onabort")}}</dt>
- <dd>appelé quand un évènement {{event("abort_(dom_abort_api)", "abort")}} est lancé, c'est-à-dire quand les requêtes DOM avec lesquelles le signal communique sont annulées.</dd>
-</dl>
+- {{domxref("AbortSignal.onabort")}}
+  - : appelé quand un évènement {{event("abort_(dom_abort_api)", "abort")}} est lancé, c'est-à-dire quand les requêtes DOM avec lesquelles le signal communique sont annulées.
 
-<h2 id="Méthodes">Méthodes</h2>
+## Méthodes
 
-<p><em>L'interface AbortSignal hérite des méthodes de son interface parent {{domxref("EventTarget")}}.</em></p>
+_L'interface AbortSignal hérite des méthodes de son interface parent {{domxref("EventTarget")}}._
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans l'extrait suivant, nous visons à télécharger une vidéo en utilisant l'<a href="/fr/docs/Web/API/Fetch_API">API Fetch</a>.</p>
+Dans l'extrait suivant, nous visons à télécharger une vidéo en utilisant l'[API Fetch](/fr/docs/Web/API/Fetch_API).
 
-<p>Tout d'abord, nous créons un contrôleur en utilisant le constructeur {{domxref("AbortController.AbortController","AbortController()")}}, puis nous saisissons une référence associée à son objet {{domxref("AbortSignal")}} au moyen de la propriété {{domxref("AbortController.signal")}}.</p>
+Tout d'abord, nous créons un contrôleur en utilisant le constructeur {{domxref("AbortController.AbortController","AbortController()")}}, puis nous saisissons une référence associée à son objet {{domxref("AbortSignal")}} au moyen de la propriété {{domxref("AbortController.signal")}}.
 
-<p>Lorsque la  <a href="/fr/docs/Web/API/GlobalFetch/fetch">requête fetch</a> (<em>extraction</em>) est lancée, nous transmettons le paramètre <code>AbortSignal</code> en tant qu'option dans l'objet d'options de la requête (voir <code>{signal}</code> ci-dessous). Cela associe le signal et le contrôleur à la requête d'extraction et nous permet de l'annuler en appelant {{domxref("AbortController.abort()")}}, comme indiqué ci-dessous dans le second écouteur d'événements.</p>
+Lorsque la  [requête fetch](/fr/docs/Web/API/GlobalFetch/fetch) (_extraction_) est lancée, nous transmettons le paramètre `AbortSignal` en tant qu'option dans l'objet d'options de la requête (voir `{signal}` ci-dessous). Cela associe le signal et le contrôleur à la requête d'extraction et nous permet de l'annuler en appelant {{domxref("AbortController.abort()")}}, comme indiqué ci-dessous dans le second écouteur d'événements.
 
-<pre class="brush: js">var controller = new AbortController();
+```js
+var controller = new AbortController();
 var signal = controller.signal;
 
 var downloadBtn = document.querySelector('.download');
@@ -61,38 +58,24 @@ function fetchVideo() {
   }).catch(function(e) {
     reports.textContent = 'Download error: ' + e.message;
   })
-}</pre>
+}
+```
 
-<div class="note">
-<p><strong>Note :</strong> Lorsque <code>abort()</code> est appelé, la réponse <code>fetch()</code> rejette avec une erreur <code>AbortError</code>.</p>
-</div>
+> **Note :** Lorsque `abort()` est appelé, la réponse `fetch()` rejette avec une erreur `AbortError`.
 
-<p>vous pouvez trouver un exemple de travail complet sur GitHub — voir <a href="https://github.com/mdn/dom-examples/tree/master/abort-api">abort-api</a> (<a href="https://mdn.github.io/dom-examples/abort-api/">voir cas d'usage concret</a>).</p>
+vous pouvez trouver un exemple de travail complet sur GitHub — voir [abort-api](https://github.com/mdn/dom-examples/tree/master/abort-api) ([voir cas d'usage concret](https://mdn.github.io/dom-examples/abort-api/)).
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#interface-AbortSignal', 'AbortSignal')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                            | Status                           | Comment             |
+| ---------------------------------------------------------------------------------------- | -------------------------------- | ------------------- |
+| {{SpecName('DOM WHATWG', '#interface-AbortSignal', 'AbortSignal')}} | {{Spec2('DOM WHATWG')}} | Définition initiale |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.AbortSignal")}}</p>
+{{Compat("api.AbortSignal")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/API/Fetch_API">API Fetch</a></li>
- <li><a href="https://developers.google.com/web/updates/2017/09/abortable-fetch">Abortable Fetch</a> par Jake Archibald (en)</li>
-</ul>
+- [API Fetch](/fr/docs/Web/API/Fetch_API)
+- [Abortable Fetch](https://developers.google.com/web/updates/2017/09/abortable-fetch) par Jake Archibald (en)
diff --git a/files/fr/web/api/analysernode/analysernode/index.md b/files/fr/web/api/analysernode/analysernode/index.md
index a10fd3ee15..1b030e1dbf 100644
--- a/files/fr/web/api/analysernode/analysernode/index.md
+++ b/files/fr/web/api/analysernode/analysernode/index.md
@@ -3,47 +3,33 @@ title: AnalyserNode()
 slug: Web/API/AnalyserNode/AnalyserNode
 translation_of: Web/API/AnalyserNode/AnalyserNode
 ---
-<p>{{APIRef("'Web Audio API'")}}{{SeeCompatTable}}</p>
-
-<p>Le constructeur <strong><code>AnalyserNode</code></strong> crée un nouvel objet {{domxref("AnalyserNode")}}.</p>
-
-<h2 id="Syntax">Syntax</h2>
-
-<pre class="syntaxbox">var analyserNode = new AnalyserNode(context, options)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><em>context</em></dt>
- <dd>Référence à un {{domxref("AudioContext")}}.</dd>
- <dt><em>options</em> {{optional_inline}}</dt>
- <dd><p>Un objet avec les propriétés suivantes :</p>
- <ul>
-  <li><code>fftSize</code>: taille initiale sde la FFT pour l'analyse du domaine fréquentiel . La valeur par défaut est 2048.</li>
-  <li><code>maxDecibels</code>: valeur maximale de puissance de la plage pour l'analyse FFT, en décibels. La valeur par défaut est -30.</li>
-  <li><code>minDecibels</code>: valeur minimale de puissance de la plage pour l'analyse FFT, en décibels. La valeur par défaut est -100.</li>
-  <li><code>smoothingTimeConstant</code>:  valeur de lissage pour l'analyse FFT. La valeur par défaut est 0.8</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">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Web Audio API','#the-analysernode-interface','AnalyserNode')}}</td>
-   <td>{{Spec2('Web Audio API')}}</td>
-   <td>Première définition.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
-
-<p>{{Compat("api.AnalyserNode.AnalyserNode")}}</p>
+{{APIRef("'Web Audio API'")}}{{SeeCompatTable}}
+
+Le constructeur **`AnalyserNode`** crée un nouvel objet {{domxref("AnalyserNode")}}.
+
+## Syntax
+
+    var analyserNode = new AnalyserNode(context, options)
+
+### Paramètres
+
+- _context_
+  - : Référence à un {{domxref("AudioContext")}}.
+- _options_ {{optional_inline}}
+
+  - : Un objet avec les propriétés suivantes :
+
+    - `fftSize`: taille initiale sde la FFT pour l'analyse du domaine fréquentiel . La valeur par défaut est 2048.
+    - `maxDecibels`: valeur maximale de puissance de la plage pour l'analyse FFT, en décibels. La valeur par défaut est -30.
+    - `minDecibels`: valeur minimale de puissance de la plage pour l'analyse FFT, en décibels. La valeur par défaut est -100.
+    - `smoothingTimeConstant`:  valeur de lissage pour l'analyse FFT. La valeur par défaut est 0.8
+
+## Spécifications
+
+| Spécification                                                                                        | Statut                               | Commentaire          |
+| ---------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName('Web Audio API','#the-analysernode-interface','AnalyserNode')}} | {{Spec2('Web Audio API')}} | Première définition. |
+
+## Compatibilité navigateurs
+
+{{Compat("api.AnalyserNode.AnalyserNode")}}
diff --git a/files/fr/web/api/analysernode/fftsize/index.md b/files/fr/web/api/analysernode/fftsize/index.md
index 966bf915dd..8016e057f1 100644
--- a/files/fr/web/api/analysernode/fftsize/index.md
+++ b/files/fr/web/api/analysernode/fftsize/index.md
@@ -3,32 +3,32 @@ title: AnalyserNode.fftSize
 slug: Web/API/AnalyserNode/fftSize
 translation_of: Web/API/AnalyserNode/fftSize
 ---
-<p>{{ APIRef("Web Audio API") }}</p>
+{{ APIRef("Web Audio API") }}
 
-<p>La propriété <code>fftSize</code> de l'objet {{ domxref("AnalyserNode") }} est un nombre entier non signé qui représente la taille de la FFT (<a href="/en-US/docs/">transfomation de Fourier rapide</a>) à utiliser pour déterminer le domaine fréquentiel.<br>
- <br>
- La valeur de la propriété <code>fftSize</code> property's doit être une puissance de 2 non nulle située dans l'intervalle compris entre <code>32</code> et 32768 ; sa valeur par défaut est <code>2048</code>.</p>
+La propriété `fftSize` de l'objet {{ domxref("AnalyserNode") }} est un nombre entier non signé qui représente la taille de la FFT ([transfomation de Fourier rapide](/en-US/docs/)) à utiliser pour déterminer le domaine fréquentiel.
 
-<div class="note">
-<p><strong>Note :</strong> Si la valeur n'est pas une puissance de 2, ou si elle ne se trouve pas dans l'intervalle spécifiée, l'exception <code>INDEX_SIZE_ERR</code> est levée.</p>
-</div>
+La valeur de la propriété `fftSize` property's doit être une puissance de 2 non nulle située dans l'intervalle compris entre `32` et 32768 ; sa valeur par défaut est `2048`.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+> **Note :** Si la valeur n'est pas une puissance de 2, ou si elle ne se trouve pas dans l'intervalle spécifiée, l'exception `INDEX_SIZE_ERR` est levée.
 
-<pre class="brush: js">var contexteAudio = new AudioContext();
+## Syntaxe
+
+```js
+var contexteAudio = new AudioContext();
 var analyseur = contexteAudio.createAnalyser();
 analyseur.fftSize = 2048;
-</pre>
+```
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>Un nombre entier non signé.</p>
+Un nombre entier non signé.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>L'exemple suivant montre comment créer simplement un  <code>AnalyserNode</code> avec {{domxref("AudioContext")}}, puis utiliser  {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo <a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a>  (et en particulier <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js lines 128–205</a>).</p>
+L'exemple suivant montre comment créer simplement un  `AnalyserNode` avec {{domxref("AudioContext")}}, puis utiliser  {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/)  (et en particulier [app.js lines 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)).
 
-<pre class="brush: js">var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+```js
+var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
 var analyseur = contexteAudio.createAnalyser();
 
   ...
@@ -57,7 +57,7 @@ function dessiner() {
       var largeurTranche = LARGEUR * 1.0 / tailleMemoireTampon;
       var x = 0;
 
-      for(var i = 0; i &lt; tailleMemoireTampon; i++) {
+      for(var i = 0; i < tailleMemoireTampon; i++) {
 
         var v = tableauDonnees[i] / 128.0;
         var y = v * HAUTEUR/2;
@@ -75,31 +75,19 @@ function dessiner() {
       contexteCanvas.stroke();
     };
 
-    dessiner();</pre>
+    dessiner();
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Web Audio API', '#widl-AnalyserNode-fftSize', 'fftSize')}}</td>
-   <td>{{Spec2('Web Audio API')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                | Statut                               | Commentaire |
+| -------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- |
+| {{SpecName('Web Audio API', '#widl-AnalyserNode-fftSize', 'fftSize')}} | {{Spec2('Web Audio API')}} |             |
 
-<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+## Compatibilité navigateurs
 
-<p>{{Compat("api.AnalyserNode.fftSize")}}</p>
+{{Compat("api.AnalyserNode.fftSize")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
-</ul>
+- [Utiliser la Web Audio API](/fr/docs/Web_Audio_API/Using_Web_Audio_API)
diff --git a/files/fr/web/api/analysernode/frequencybincount/index.md b/files/fr/web/api/analysernode/frequencybincount/index.md
index 90a99b7f10..003229afbe 100644
--- a/files/fr/web/api/analysernode/frequencybincount/index.md
+++ b/files/fr/web/api/analysernode/frequencybincount/index.md
@@ -3,26 +3,28 @@ title: AnalyserNode.frequencyBinCount
 slug: Web/API/AnalyserNode/frequencyBinCount
 translation_of: Web/API/AnalyserNode/frequencyBinCount
 ---
-<p>{{ APIRef("Web Audio API") }}<br>
- <br>
- La propriété <strong><code>frequencyBinCount</code></strong> de l'objet <a href="/fr/docs/Web/API/AnalyserNode"><code>AnalyserNode</code></a> est un nombre entier non signé équivalent à la moitié la taille de la FFT. Il correspond en général au nombre de valeurs que vous aurez à manipuler pour la visualisation.</p>
+{{ APIRef("Web Audio API") }}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+La propriété **`frequencyBinCount`** de l'objet [`AnalyserNode`](/fr/docs/Web/API/AnalyserNode) est un nombre entier non signé équivalent à la moitié la taille de la FFT. Il correspond en général au nombre de valeurs que vous aurez à manipuler pour la visualisation.
 
-<pre class="brush: js">var contexteAudio = new AudioContext();
+## Syntaxe
+
+```js
+var contexteAudio = new AudioContext();
 var analyseur = contexteAudio.createAnalyser();
 var tailleMemoireTampon = analyseur.frequencyBinCount;
-</pre>
+```
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>Un nombre entier non signé.</p>
+Un nombre entier non signé.
 
-<h2 id="Example">Example</h2>
+## Example
 
-<p>L'exemple suivant montre comment créer simplement un  <code>AnalyserNode</code> avec <a href="/fr/docs/Web/API/AudioContext"><code>AudioContext</code></a>, puis utiliser  <a href="/fr/docs/Web/API/Window/requestAnimationFrame"><code>requestAnimationFrame</code></a> et <a href="/fr/docs/Web/HTML/Element/canvas"><code>&lt;canvas&gt;</code></a> pour collecter les données temporelles et dessiner un oscilloscopeen sortie. Pour des exemples plus complets, voir notre démo <a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a>  (et en particulier <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js lines 128–205</a>).</p>
+L'exemple suivant montre comment créer simplement un  `AnalyserNode` avec [`AudioContext`](/fr/docs/Web/API/AudioContext), puis utiliser  [`requestAnimationFrame`](/fr/docs/Web/API/Window/requestAnimationFrame) et [`<canvas>`](/fr/docs/Web/HTML/Element/canvas) pour collecter les données temporelles et dessiner un oscilloscopeen sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/)  (et en particulier [app.js lines 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)).
 
-<pre class="brush: js">var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+```js
+var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
 var analyseur = contexteAudio.createAnalyser();
 analyseur.minDecibels = -90;
 analyseur.maxDecibels = -10;
@@ -48,7 +50,7 @@ function dessiner() {
   var hauteurBarre;
   var x = 0;
 
-  for(var i = 0; i &lt; tailleMemoireTampon; i++) {
+  for(var i = 0; i < tailleMemoireTampon; i++) {
     hauteurBarre = tableauDonnees[i];
 
     contexteCanvas.fillStyle = 'rgb(' + (hauteurBarre+100) + ',50,50)';
@@ -58,31 +60,19 @@ function dessiner() {
   }
 };
 
-dessiner();</pre>
+dessiner();
+```
 
-<h2 id="Spécification">Spécification</h2>
+## Spécification
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Web Audio API', '#widl-AnalyserNode-frequencyBinCount', 'frequencyBinCount')}}</td>
-   <td>{{Spec2('Web Audio API')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                            | Statut                               | Commentaire |
+| ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ----------- |
+| {{SpecName('Web Audio API', '#widl-AnalyserNode-frequencyBinCount', 'frequencyBinCount')}} | {{Spec2('Web Audio API')}} |             |
 
-<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+## Compatibilité navigateurs
 
-<p>{{Compat("api.AnalyserNode.frequencyBinCount")}}</p>
+{{Compat("api.AnalyserNode.frequencyBinCount")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
-</ul>
+- [Utiliser la Web Audio API](/fr/docs/Web_Audio_API/Using_Web_Audio_API)
diff --git a/files/fr/web/api/analysernode/getbytefrequencydata/index.md b/files/fr/web/api/analysernode/getbytefrequencydata/index.md
index dde3750690..13b054ee57 100644
--- a/files/fr/web/api/analysernode/getbytefrequencydata/index.md
+++ b/files/fr/web/api/analysernode/getbytefrequencydata/index.md
@@ -3,17 +3,16 @@ title: AnalyserNode.getByteFrequencyData()
 slug: Web/API/AnalyserNode/getByteFrequencyData
 translation_of: Web/API/AnalyserNode/getByteFrequencyData
 ---
-<p>{{ APIRef("Web Audio API") }}<br>
- <br>
- La méthode <strong><code>getByteFrequencyData()</code></strong> de l'objet <a href="/fr/docs/Web/API/AnalyserNode"><code>AnalyserNode</code></a> copie les données de fréquence dans le {{domxref("Uint8Array")}} passé en argument.</p>
+{{ APIRef("Web Audio API") }}
 
-<div>
-<p>Si le tableau a moins d'éléments que {{domxref("AnalyserNode.frequencyBinCount")}}, les excédants sont supprimés; s'il en a davantage, les excédants sont ignorés.</p>
-</div>
+La méthode **`getByteFrequencyData()`** de l'objet [`AnalyserNode`](/fr/docs/Web/API/AnalyserNode) copie les données de fréquence dans le {{domxref("Uint8Array")}} passé en argument.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+Si le tableau a moins d'éléments que {{domxref("AnalyserNode.frequencyBinCount")}}, les excédants sont supprimés; s'il en a davantage, les excédants sont ignorés.
 
-<pre class="brush: js">var contexteAudio = new AudioContext();
+## Syntaxe
+
+```js
+var contexteAudio = new AudioContext();
 var analyseur = contexteAudio.createAnalyser();
 
 // Uint8Array devrait avoir la même taille que frequencyBinCount
@@ -21,17 +20,18 @@ var tableauDonnees = new Uint8Array(analyseur.frequencyBinCount);
 
 // remplit le Uint8Array avec les données retournées par la méthode getByteFrequencyData()
 analyseur.getByteFrequencyData(tableauDonnees);
-</pre>
+```
 
-<h3 id="Retourne">Retourne</h3>
+### Retourne
 
-<p>Un {{domxref("Uint8Array")}}.</p>
+Un {{domxref("Uint8Array")}}.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>L'exemple suivant montre comment créer simplement un  <code>AnalyserNode</code> avec <a href="/fr/docs/Web/API/AudioContext"><code>AudioContext</code></a>, puis utiliser  <a href="/fr/docs/Web/API/Window/requestAnimationFrame"><code>requestAnimationFrame</code></a> et <a href="/fr/docs/Web/HTML/Element/canvas"><code>&lt;canvas&gt;</code></a> pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo <a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a>  (et en particulier <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js lines 128–205</a>).</p>
+L'exemple suivant montre comment créer simplement un  `AnalyserNode` avec [`AudioContext`](/fr/docs/Web/API/AudioContext), puis utiliser  [`requestAnimationFrame`](/fr/docs/Web/API/Window/requestAnimationFrame) et [`<canvas>`](/fr/docs/Web/HTML/Element/canvas) pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/)  (et en particulier [app.js lines 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)).
 
-<pre class="brush: js">var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+```js
+var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
 var analyseur = contexteAudio.createAnalyser();
 
   ...
@@ -55,7 +55,7 @@ function dessiner() {
   var hauteurBarre;
   var x = 0;
 
-  for(var i = 0; i &lt; tailleMemoireTampon; i++) {
+  for(var i = 0; i < tailleMemoireTampon; i++) {
     hauteurBarre = tableauDonnees[i];
 
     contexteCanvas.fillStyle = 'rgb(' + (hauteurBarre+100) + ',50,50)';
@@ -65,39 +65,24 @@ function dessiner() {
   }
 };
 
-dessiner();</pre>
-
-<h2 id="Paramètres">Paramètres</h2>
+dessiner();
+```
 
-<dl>
- <dt>array</dt>
- <dd>Le {{domxref("Uint8Array")}} dans lequel seront copiées les données relatives à la fréquence.</dd>
-</dl>
+## Paramètres
 
-<h2 id="Spécifications">Spécifications</h2>
+- array
+  - : Le {{domxref("Uint8Array")}} dans lequel seront copiées les données relatives à la fréquence.
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Web Audio API', '#widl-AnalyserNode-getByteFrequencyData-void-Uint8Array-array', 'getByteFrequencyData()')}}</td>
-   <td>{{Spec2('Web Audio API')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
 
-<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+| Spécification                                                                                                                                                    | Statut                               | Commentaire |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- |
+| {{SpecName('Web Audio API', '#widl-AnalyserNode-getByteFrequencyData-void-Uint8Array-array', 'getByteFrequencyData()')}} | {{Spec2('Web Audio API')}} |             |
 
-<p>{{Compat("api.AnalyserNode.getByteFrequencyData")}}</p>
+## Compatibilité navigateurs
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+{{Compat("api.AnalyserNode.getByteFrequencyData")}}
 
-<p><a href="/fr/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></p>
+## Voir aussi
 
-<ul>
-</ul>
+[Utiliser la Web Audio API](/fr/docs/Web_Audio_API/Using_Web_Audio_API)
diff --git a/files/fr/web/api/analysernode/getbytetimedomaindata/index.md b/files/fr/web/api/analysernode/getbytetimedomaindata/index.md
index 1610af5c55..7d1f2801af 100644
--- a/files/fr/web/api/analysernode/getbytetimedomaindata/index.md
+++ b/files/fr/web/api/analysernode/getbytetimedomaindata/index.md
@@ -3,34 +3,35 @@ title: AnalyserNode.getByteTimeDomainData()
 slug: Web/API/AnalyserNode/getByteTimeDomainData
 translation_of: Web/API/AnalyserNode/getByteTimeDomainData
 ---
-<p>{{ APIRef("Mountain View APIRef Project") }}</p>
+{{ APIRef("Mountain View APIRef Project") }}
 
-<div>
-<p>La méthode <strong><code>getByteTimeDomainData()</code></strong> de l'interface {{ domxref("AnalyserNode") }} copie les données de forme d'onde, ou du domaine temporel, dans un tableau {{domxref("Uint8Array")}} passé en paramètre.</p>
+La méthode **`getByteTimeDomainData()`** de l'interface {{ domxref("AnalyserNode") }} copie les données de forme d'onde, ou du domaine temporel, dans un tableau {{domxref("Uint8Array")}} passé en paramètre.
 
-<p>Si le tableau a moins d'éléments que la propriété {{domxref("AnalyserNode.fftSize")}}, les données en excès sont supprimées. S'il a davantage d'éléments, les éléments non utilisés sont ignorés.</p>
-</div>
+Si le tableau a moins d'éléments que la propriété {{domxref("AnalyserNode.fftSize")}}, les données en excès sont supprimées. S'il a davantage d'éléments, les éléments non utilisés sont ignorés.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">var contexteAudio = new AudioContext();
+```js
+var contexteAudio = new AudioContext();
 var analyseur = contexteAudio.createAnalyser();
 
 // La taille du tableau Uint8Array doit correspondre à la valeur de la propriété fftSize
 var tableauDonnees = new Uint8Array(analyseur.fftSize);
 
 // remplit le tableau Uint8Array avec les données renvoyées par la méthode getByteTimeDomainData()
-analyseur.getByteTimeDomainData(tableauDonnees); </pre>
+analyseur.getByteTimeDomainData(tableauDonnees);
+```
 
-<h3 id="Renvoie">Renvoie</h3>
+### Renvoie
 
-<p>Un tableau {{domxref("Uint8Array")}}.</p>
+Un tableau {{domxref("Uint8Array")}}.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>L'exemple suivant montre comment créer simplement un  <code>AnalyserNode</code> avec {{domxref("AudioContext")}}, puis utiliser  {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo <a href="https://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a>  (et en particulier <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js lignes 128–205</a>).</p>
+L'exemple suivant montre comment créer simplement un  `AnalyserNode` avec {{domxref("AudioContext")}}, puis utiliser  {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](https://mdn.github.io/voice-change-o-matic/)  (et en particulier [app.js lignes 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)).
 
-<pre class="brush: js">var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+```js
+var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
 var analyseur = contexteAudio.createAnalyser();
 
   ...
@@ -59,7 +60,7 @@ function dessiner() {
       var largeurBarre = WIDTH * 1.0 / tailleMemoireTampon;
       var x = 0;
 
-      for(var i = 0; i &lt; tailleMemoireTampon; i++) {
+      for(var i = 0; i < tailleMemoireTampon; i++) {
 
         var v = tableauDonnees[i] / 128.0;
         var y = v * HAUTEUR/2;
@@ -77,38 +78,24 @@ function dessiner() {
       contexteCanvas.stroke();
     };
 
-    dessiner();</pre>
+    dessiner();
+```
 
-<h2 id="Paramètres">Paramètres</h2>
+## Paramètres
 
-<dl>
- <dt>array</dt>
- <dd>Le tableau {{domxref("Uint8Array")}} dans lequel les données temporelles seront copiées.</dd>
-</dl>
+- array
+  - : Le tableau {{domxref("Uint8Array")}} dans lequel les données temporelles seront copiées.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Web Audio API', '#widl-AnalyserNode-getByteTimeDomainData-void-Uint8Array-array', 'getByteTimeDomainData()')}}</td>
-   <td>{{Spec2('Web Audio API')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                                                        | Statut                               | Commentaire |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- |
+| {{SpecName('Web Audio API', '#widl-AnalyserNode-getByteTimeDomainData-void-Uint8Array-array', 'getByteTimeDomainData()')}} | {{Spec2('Web Audio API')}} |             |
 
-<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+## Compatibilité navigateurs
 
-<p>{{Compat("api.AnalyserNode.getByteTimeDomainData")}}</p>
+{{Compat("api.AnalyserNode.getByteTimeDomainData")}}
 
-<h2 id="See_also">See also</h2>
+## See also
 
-<ul>
- <li><a href="/fr/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
-</ul>
+- [Utiliser la Web Audio API](/fr/docs/Web_Audio_API/Using_Web_Audio_API)
diff --git a/files/fr/web/api/analysernode/getfloatfrequencydata/index.md b/files/fr/web/api/analysernode/getfloatfrequencydata/index.md
index fb4e6e2785..0cc626b2f2 100644
--- a/files/fr/web/api/analysernode/getfloatfrequencydata/index.md
+++ b/files/fr/web/api/analysernode/getfloatfrequencydata/index.md
@@ -3,17 +3,16 @@ title: AnalyserNode.getFloatFrequencyData()
 slug: Web/API/AnalyserNode/getFloatFrequencyData
 translation_of: Web/API/AnalyserNode/getFloatFrequencyData
 ---
-<p>{{ APIRef("Web Audio API") }}</p>
+{{ APIRef("Web Audio API") }}
 
-<div>
-<p>La méthode <strong><code>getFloatFrequencyData()</code></strong> de l'interface {{ domxref("AnalyserNode") }} copie les données de fréquence dans un tableau {{domxref("Float32Array")}} passé en paramètre.</p>
+La méthode **`getFloatFrequencyData()`** de l'interface {{ domxref("AnalyserNode") }} copie les données de fréquence dans un tableau {{domxref("Float32Array")}} passé en paramètre.
 
-<p>Si le tableau a moins d'éléments que la propriété {{domxref("AnalyserNode.frequencyBinCount")}}, les données en excès sont supprimées. S'il a davantage d'éléments, les éléments non utilisés sont ignorés.</p>
-</div>
+Si le tableau a moins d'éléments que la propriété {{domxref("AnalyserNode.frequencyBinCount")}}, les données en excès sont supprimées. S'il a davantage d'éléments, les éléments non utilisés sont ignorés.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">var contexteAudio = new AudioContext();
+```js
+var contexteAudio = new AudioContext();
 var analyseur = contexteAudio.createAnalyser();
 
 // La taille du tableau Float32Array doit correspondre à la valeur de la propriété frequencyBinCount
@@ -21,24 +20,23 @@ var tableauDonnees = new Float32Array(analyseur.frequencyBinCount);
 
 // remplit le tableau Uint8Array avec les données renvoyées par la méthode getByteTimeDomainData()
 analyseur.getByteTimeDomainData(tableauDonnees);
-</pre>
+```
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>array</code></dt>
- <dd>{{domxref("Float32Array")}} dans lequel seront copiées les données de fréquence. Pour tout échantillon silencieux, la valeur est <code>-<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity">Infinity</a></code>.</dd>
-</dl>
+- `array`
+  - : {{domxref("Float32Array")}} dans lequel seront copiées les données de fréquence. Pour tout échantillon silencieux, la valeur est `-Infinity`.
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+### Valeur de retour
 
-<p><code>undefined</code>.</p>
+`undefined`.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>L'exemple suivant montre comment créer simplement un  <code>AnalyserNode</code> avec {{domxref("AudioContext")}}, puis utiliser {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo <a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a>  (et en particulier <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js lignes 128–205</a>).</p>
+L'exemple suivant montre comment créer simplement un  `AnalyserNode` avec {{domxref("AudioContext")}}, puis utiliser {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/)  (et en particulier [app.js lignes 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)).
 
-<pre class="brush: js">var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+```js
+var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
 var analyseur = contexteAudio.createAnalyser();
 
   ...
@@ -60,7 +58,7 @@ function dessiner() {
   var hauteurBarre;
   var x = 0;
 
-  for(var i = 0; i &lt; tailleMemoireTampon; i++) {
+  for(var i = 0; i < tailleMemoireTampon; i++) {
     hauteurBarre = (tableauDonnees[i] + 140)*2;
     contexteCanvas.fillStyle = 'rgb(' + Math.floor(hauteurBarre+100) + ',50,50)';
     contexteCanvas.fillRect(x, HEIGHT-hauteurBarre/2, largeurBarre, hauteurBarre/2);
@@ -68,38 +66,24 @@ function dessiner() {
   }
 };
 
-dessiner();</pre>
+dessiner();
+```
 
-<h2 id="Paramètres_2">Paramètres</h2>
+## Paramètres
 
-<dl>
- <dt>array</dt>
- <dd>Le tableau {{domxref("Float32Array")}} dans lequel seront copiées les données du domaine fréquentiel.</dd>
-</dl>
+- array
+  - : Le tableau {{domxref("Float32Array")}} dans lequel seront copiées les données du domaine fréquentiel.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Web Audio API', '#widl-AnalyserNode-getFloatFrequencyData-void-Float32Array-array', 'getFloatFrequencyData()')}}</td>
-   <td>{{Spec2('Web Audio API')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                                                        | Statut                               | Commentaire |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- |
+| {{SpecName('Web Audio API', '#widl-AnalyserNode-getFloatFrequencyData-void-Float32Array-array', 'getFloatFrequencyData()')}} | {{Spec2('Web Audio API')}} |             |
 
-<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+## Compatibilité navigateurs
 
-<p>{{Compat("api.AnalyserNode.getFloatFrequencyData")}}</p>
+{{Compat("api.AnalyserNode.getFloatFrequencyData")}}
 
-<h2 id="See_also">See also</h2>
+## See also
 
-<ul>
- <li><a href="/fr/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
-</ul>
+- [Utiliser la Web Audio API](/fr/docs/Web_Audio_API/Using_Web_Audio_API)
diff --git a/files/fr/web/api/analysernode/getfloattimedomaindata/index.md b/files/fr/web/api/analysernode/getfloattimedomaindata/index.md
index a69bb7d0b3..1388f536b1 100644
--- a/files/fr/web/api/analysernode/getfloattimedomaindata/index.md
+++ b/files/fr/web/api/analysernode/getfloattimedomaindata/index.md
@@ -3,17 +3,16 @@ title: AnalyserNode.getFloatTimeDomainData()
 slug: Web/API/AnalyserNode/getFloatTimeDomainData
 translation_of: Web/API/AnalyserNode/getFloatTimeDomainData
 ---
-<p>{{ APIRef("Web Audio API") }}</p>
+{{ APIRef("Web Audio API") }}
 
-<div>
-<p>La méthode <strong><code>getFloatTimeDomainData()</code></strong> de l'interface {{ domxref("AnalyserNode") }} copie les données de forme d'onde ou du domaine temporel, dans un tableau {{domxref("Float32Array")}} passé en paramètre.</p>
+La méthode **`getFloatTimeDomainData()`** de l'interface {{ domxref("AnalyserNode") }} copie les données de forme d'onde ou du domaine temporel, dans un tableau {{domxref("Float32Array")}} passé en paramètre.
 
-<p>Si le tableau a moins d'éléments que la propriété {{domxref("AnalyserNode.fftSize")}}, les données en excès sont supprimées. S'il a davantage d'éléments, les éléments non utilisés sont ignorés.</p>
-</div>
+Si le tableau a moins d'éléments que la propriété {{domxref("AnalyserNode.fftSize")}}, les données en excès sont supprimées. S'il a davantage d'éléments, les éléments non utilisés sont ignorés.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">var contexteAudio = new AudioContext();
+```js
+var contexteAudio = new AudioContext();
 var analyseur = contexteAudio.createAnalyser();
 
 // La taille du tableau Float32Array doit correspondre à la valeur de la propriété fftSize
@@ -21,17 +20,18 @@ var tableauDonnees = new Float32Array(analyseur.fftSize);
 
 // remplit le tableau Float32Array avec les données renvoyées par la méthode getFloatTimeDomainData()
 analyseur.getFloatTimeDomainData(tableauDonnees);
-</pre>
+```
 
-<h3 id="Renvoie">Renvoie</h3>
+### Renvoie
 
-<p>Un tableau {{domxref("Float32Array")}}.</p>
+Un tableau {{domxref("Float32Array")}}.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>L'exemple suivant montre comment créer simplement un  <code>AnalyserNode</code> avec {{domxref("AudioContext")}}, puis utiliser {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo <a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a>  (et en particulier <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js lignes 128–205</a>).</p>
+L'exemple suivant montre comment créer simplement un  `AnalyserNode` avec {{domxref("AudioContext")}}, puis utiliser {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/)  (et en particulier [app.js lignes 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)).
 
-<pre class="brush: js">var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+```js
+var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
 var analyseur = contexteAudio.createAnalyser();
 
   ...
@@ -56,7 +56,7 @@ function dessiner() {
   var largeurTranche = LARGEUR * 1.0 / tailleMemoireTampon;
   var x = 0;
 
-  for(var i = 0; i &lt; tailleMemoireTampon; i++) {
+  for(var i = 0; i < tailleMemoireTampon; i++) {
     var v = tableauDonnees[i] * 200.0;
     var y = HAUTEUR/2 + v;
 
@@ -72,40 +72,26 @@ function dessiner() {
   contexteCanvas.stroke();
 };
 
-dessiner();</pre>
+dessiner();
+```
 
-<p> </p>
 
-<h2 id="Paramètres">Paramètres</h2>
 
-<dl>
- <dt>array</dt>
- <dd>Un tableau {{domxref("Float32Array")}} dans lequel seront copiées les données du domaine temporel.</dd>
-</dl>
+## Paramètres
 
-<h2 id="Spécifications">Spécifications</h2>
+- array
+  - : Un tableau {{domxref("Float32Array")}} dans lequel seront copiées les données du domaine temporel.
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Web Audio API', '#widl-AnalyserNode-getFloatTimeDomainData-void-Float32Array-array', 'getFloatTimeDomainData()')}}</td>
-   <td>{{Spec2('Web Audio API')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
 
-<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+| Spécification                                                                                                                                                            | Statut                               | Commentaire |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ----------- |
+| {{SpecName('Web Audio API', '#widl-AnalyserNode-getFloatTimeDomainData-void-Float32Array-array', 'getFloatTimeDomainData()')}} | {{Spec2('Web Audio API')}} |             |
 
-<p>{{Compat("api.AnalyserNode.getFloatTimeDomainData")}}</p>
+## Compatibilité navigateurs
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+{{Compat("api.AnalyserNode.getFloatTimeDomainData")}}
 
-<ul>
- <li><a href="/fr/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
-</ul>
+## Voir aussi
+
+- [Utiliser la Web Audio API](/fr/docs/Web_Audio_API/Using_Web_Audio_API)
diff --git a/files/fr/web/api/analysernode/index.md b/files/fr/web/api/analysernode/index.md
index 217c8b7f64..26a61aa63f 100644
--- a/files/fr/web/api/analysernode/index.md
+++ b/files/fr/web/api/analysernode/index.md
@@ -7,99 +7,92 @@ tags:
   - Reference
 translation_of: Web/API/AnalyserNode
 ---
-<div>{{APIRef("Web Audio API")}}</div>
+{{APIRef("Web Audio API")}}
 
-<p>L' interface <strong><code>AnalyserNode</code></strong><strong> </strong>représente un noeud capable de fournir en temps réel des informations d'analyse de la fréquence et du domaine temporel. C'est un {{domxref("AudioNode")}} qui transmet le flux audio inchangé depuis l'entrée vers la sortie, mais permet de capturer les données générées pour les traiter et/ou les visualiser.</p>
+L' interface **`AnalyserNode`\*\*** \*\*représente un noeud capable de fournir en temps réel des informations d'analyse de la fréquence et du domaine temporel. C'est un {{domxref("AudioNode")}} qui transmet le flux audio inchangé depuis l'entrée vers la sortie, mais permet de capturer les données générées pour les traiter et/ou les visualiser.
 
-<p>Il a exactement une entrée et une sortie. Le noeud fonctionne même si la sortie n'est pas connectée.</p>
+Il a exactement une entrée et une sortie. Le noeud fonctionne même si la sortie n'est pas connectée.
 
-<p><img alt="Sans modifier le flux audio, le nœud permet d'obtenir la fréquence et les données temporelles associées en utilisant une transformée de Fourier rapide." src="fttaudiodata_en.svg"></p>
+![Sans modifier le flux audio, le nœud permet d'obtenir la fréquence et les données temporelles associées en utilisant une transformée de Fourier rapide.](fttaudiodata_en.svg)
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row"><dfn>Nombre d'entrées</dfn></th>
-   <td><code>1</code></td>
-  </tr>
-  <tr>
-   <th scope="row"><dfn>Nombre de sorties</dfn></th>
-   <td><code>1</code> (mais peut ne pas être connectée)</td>
-  </tr>
-  <tr>
-   <th scope="row"><dfn>Mode de comptage des canaux</dfn></th>
-   <td><code>"explicit"</code></td>
-  </tr>
-  <tr>
-   <th scope="row"><dfn>Nombre de canaux</dfn></th>
-   <td><code>1</code></td>
-  </tr>
-  <tr>
-   <th scope="row"><dfn>Interprétation du canal</dfn></th>
-   <td><code>"speakers"</code></td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row"><dfn>Nombre d'entrées</dfn></th>
+      <td><code>1</code></td>
+    </tr>
+    <tr>
+      <th scope="row"><dfn>Nombre de sorties</dfn></th>
+      <td><code>1</code> (mais peut ne pas être connectée)</td>
+    </tr>
+    <tr>
+      <th scope="row"><dfn>Mode de comptage des canaux</dfn></th>
+      <td><code>"explicit"</code></td>
+    </tr>
+    <tr>
+      <th scope="row"><dfn>Nombre de canaux</dfn></th>
+      <td><code>1</code></td>
+    </tr>
+    <tr>
+      <th scope="row"><dfn>Interprétation du canal</dfn></th>
+      <td><code>"speakers"</code></td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Héritage">Héritage</h2>
+## Héritage
 
-<p>L'interface hérite des parents suivants:</p>
+L'interface hérite des parents suivants:
 
-<p>{{InheritanceDiagram}}</p>
+{{InheritanceDiagram}}
 
-<h2 id="Constructeur">Constructeur</h2>
+## Constructeur
 
-<dl>
- <dt>{{domxref("AnalyserNode.AnalyserNode", "AnalyserNode()")}}</dt>
- <dd>Crée une nouvelle instance de l'objet <code>AnalyserNode</code>.</dd>
-</dl>
+- {{domxref("AnalyserNode.AnalyserNode", "AnalyserNode()")}}
+  - : Crée une nouvelle instance de l'objet `AnalyserNode`.
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<p><em>Hérite des propriétés de son parent. </em><em>{{domxref("AudioNode")}}</em>.</p>
+_Hérite des propriétés de son parent._ _{{domxref("AudioNode")}}_.
 
-<dl>
- <dt>{{domxref("AnalyserNode.fftSize")}}</dt>
- <dd>Entier long non signé qui représente la taille de la <a href="/en-US/docs/">FFT</a> (transformation de Fourier rapide) qui sera utilisé pour déterminer le domaine fréquentiel.</dd>
- <dt>{{domxref("AnalyserNode.frequencyBinCount")}} {{readonlyInline}}</dt>
- <dd>Entier long non signé égal à la moitié fftSize. C'est en général le nombre de valeurs qu'on manipule pour la visualisation.</dd>
- <dt>{{domxref("AnalyserNode.minDecibels")}}</dt>
- <dd>Nombre flottant à double précision qui représente la valeur minimale de puissance dans la plage de mise à l'échelle pour l'analyse des données FFT, pour la conversion en octets non signés - cela équivaut à la valeur minimum de la plage de résultats de <code>getByteFrequencyData()</code>.</dd>
- <dt>{{domxref("AnalyserNode.maxDecibels")}}</dt>
- <dd>Nombre flottant à double précision qui représente la valeur maximale de puissance dans la plage de mise à l'échelle pour l'analyse des données FFT, pour la conversion en octets non signés - cela équivaut à la valeur maximum de la plage de résultats de <code>getByteFrequencyData()</code>.</dd>
- <dt>{{domxref("AnalyserNode.smoothingTimeConstant")}}</dt>
- <dd>Nombre flottant à double précision qui représente la moyenne de la trame en cours avec la dernière trame analysée - elle permet de lisser la transition entre les valeurs.</dd>
-</dl>
+- {{domxref("AnalyserNode.fftSize")}}
+  - : Entier long non signé qui représente la taille de la [FFT](/en-US/docs/) (transformation de Fourier rapide) qui sera utilisé pour déterminer le domaine fréquentiel.
+- {{domxref("AnalyserNode.frequencyBinCount")}} {{readonlyInline}}
+  - : Entier long non signé égal à la moitié fftSize. C'est en général le nombre de valeurs qu'on manipule pour la visualisation.
+- {{domxref("AnalyserNode.minDecibels")}}
+  - : Nombre flottant à double précision qui représente la valeur minimale de puissance dans la plage de mise à l'échelle pour l'analyse des données FFT, pour la conversion en octets non signés - cela équivaut à la valeur minimum de la plage de résultats de `getByteFrequencyData()`.
+- {{domxref("AnalyserNode.maxDecibels")}}
+  - : Nombre flottant à double précision qui représente la valeur maximale de puissance dans la plage de mise à l'échelle pour l'analyse des données FFT, pour la conversion en octets non signés - cela équivaut à la valeur maximum de la plage de résultats de `getByteFrequencyData()`.
+- {{domxref("AnalyserNode.smoothingTimeConstant")}}
+  - : Nombre flottant à double précision qui représente la moyenne de la trame en cours avec la dernière trame analysée - elle permet de lisser la transition entre les valeurs.
 
-<h2 id="Méthodes">Méthodes</h2>
+## Méthodes
 
-<p><em>Hérite des propriétés de son parent, </em><em>{{domxref("AudioNode")}}</em>.</p>
+_Hérite des propriétés de son parent,_ _{{domxref("AudioNode")}}_.
 
-<dl>
- <dt>{{domxref("AnalyserNode.getFloatFrequencyData()")}}</dt>
- <dd>Copie les données de fréquence dans un tableau {{domxref("Float32Array")}} passé en paramètre.</dd>
-</dl>
+- {{domxref("AnalyserNode.getFloatFrequencyData()")}}
+  - : Copie les données de fréquence dans un tableau {{domxref("Float32Array")}} passé en paramètre.
 
-<dl>
- <dt>{{domxref("AnalyserNode.getByteFrequencyData()")}}</dt>
- <dd>Copie les données de fréquence dans un tableau {{domxref("Uint8Array")}} passé en paramètre.</dd>
- <dt>{{domxref("AnalyserNode.getFloatTimeDomainData()")}}</dt>
- <dd>Copie les données de forme d'onde ou du domaine temporel dans un tableau {{domxref("Float32Array")}} passé en paramètre.</dd>
-</dl>
+<!---->
 
-<dl>
- <dt>{{domxref("AnalyserNode.getByteTimeDomainData()")}}</dt>
- <dd>Copie les données de forme d'onde ou du domaine temporel dans un tableau {{domxref("Uint8Array")}} passé en paramètre.</dd>
-</dl>
+- {{domxref("AnalyserNode.getByteFrequencyData()")}}
+  - : Copie les données de fréquence dans un tableau {{domxref("Uint8Array")}} passé en paramètre.
+- {{domxref("AnalyserNode.getFloatTimeDomainData()")}}
+  - : Copie les données de forme d'onde ou du domaine temporel dans un tableau {{domxref("Float32Array")}} passé en paramètre.
 
-<h2 id="Exemples">Exemples</h2>
+<!---->
 
-<div class="note">
-<p><strong>Note :</strong>: Voir <a href="/fr/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API">Visualisations avec la Web Audio API</a> pour plus d'informations.</p>
-</div>
+- {{domxref("AnalyserNode.getByteTimeDomainData()")}}
+  - : Copie les données de forme d'onde ou du domaine temporel dans un tableau {{domxref("Uint8Array")}} passé en paramètre.
 
-<p>L'exemple suivant montre comment créer simplement un  <code>AnalyserNode</code> avec {{domxref("AudioContext")}}, puis utiliser  {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo <a href="https://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a>  (et en particulier <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js lines 128–205</a>).</p>
+## Exemples
 
-<pre class="brush: js">var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+> **Note :**: Voir [Visualisations avec la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API) pour plus d'informations.
+
+L'exemple suivant montre comment créer simplement un  `AnalyserNode` avec {{domxref("AudioContext")}}, puis utiliser  {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](https://mdn.github.io/voice-change-o-matic/)  (et en particulier [app.js lines 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)).
+
+```js
+var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
 var analyseur = contexteAudio.createAnalyser();
 
   ...
@@ -130,7 +123,7 @@ function dessiner() {
       var sliceWidth = WIDTH * 1.0 / tailleMemoireTampon;
       var x = 0;
 
-      for(var i = 0; i &lt; tailleMemoireTampon; i++) {
+      for(var i = 0; i < tailleMemoireTampon; i++) {
 
         var v = tableauDonnees[i] / 128.0;
         var y = v * HEIGHT/2;
@@ -148,31 +141,19 @@ function dessiner() {
       contexteCanvas.stroke();
     };
 
-    dessiner();</pre>
-
-<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('Web Audio API', '#the-analysernode-interface', 'AnalyserNode')}}</td>
-   <td>{{Spec2('Web Audio API')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+    dessiner();
+```
+
+## Spécifications
+
+| Spécification                                                                                        | État                                 | Commentaires |
+| ---------------------------------------------------------------------------------------------------- | ------------------------------------ | ------------ |
+| {{SpecName('Web Audio API', '#the-analysernode-interface', 'AnalyserNode')}} | {{Spec2('Web Audio API')}} |              |
 
-<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+## Compatibilité navigateurs
 
-<p>{{Compat("api.AnalyserNode")}}</p>
+{{Compat("api.AnalyserNode")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
-</ul>
+- [Utiliser la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API)
diff --git a/files/fr/web/api/analysernode/maxdecibels/index.md b/files/fr/web/api/analysernode/maxdecibels/index.md
index 046c1bcf64..8273d1f001 100644
--- a/files/fr/web/api/analysernode/maxdecibels/index.md
+++ b/files/fr/web/api/analysernode/maxdecibels/index.md
@@ -3,32 +3,32 @@ title: AnalyserNode.maxDecibels
 slug: Web/API/AnalyserNode/maxDecibels
 translation_of: Web/API/AnalyserNode/maxDecibels
 ---
-<p>{{ APIRef("Web Audio API") }}</p>
+{{ APIRef("Web Audio API") }}
 
-<p>La propriété <strong><code>maxDecibels</code></strong> de l'objet {{ domxref("AnalyserNode") }} est un nombre  flottant à double précision représentant la puissance maximum de l'intervalle pour l'analyse des données FFT, pour une conversion vers des valeurs non signées ou des nombres flottants — en d'autres termes, elle spécifie la valeur maximum pour l'intervalle de résultats des méthodes <code>getFloatFrequencyData()</code> et <code>getByteFrequencyData()</code>.</p>
+La propriété **`maxDecibels`** de l'objet {{ domxref("AnalyserNode") }} est un nombre  flottant à double précision représentant la puissance maximum de l'intervalle pour l'analyse des données FFT, pour une conversion vers des valeurs non signées ou des nombres flottants — en d'autres termes, elle spécifie la valeur maximum pour l'intervalle de résultats des méthodes `getFloatFrequencyData()` et `getByteFrequencyData()`.
 
-<p>Sa valeur par défaut est <code>-30</code>.</p>
+Sa valeur par défaut est `-30`.
 
-<div class="note">
-<p><strong>Note :</strong> Si une valeur supérieure à <code>AnalyserNode.maxDecibels</code> est indiquée, une erreur <code>INDEX_SIZE_ERR</code> est levée.</p>
-</div>
+> **Note :** Si une valeur supérieure à `AnalyserNode.maxDecibels` est indiquée, une erreur `INDEX_SIZE_ERR` est levée.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">var contexteAudio = new AudioContext();
+```js
+var contexteAudio = new AudioContext();
 var analyseur = contexteAudio.createAnalyser();
 analyseur.maxDecibels = -10;
-</pre>
+```
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>Un nombre flottant à double précision.</p>
+Un nombre flottant à double précision.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>L'exemple suivant montre comment créer simplement un  <code>AnalyserNode</code> avec {{domxref("AudioContext")}}, puis utiliser  {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo <a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a>  (et en particulier <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js lignes 128–205</a>).</p>
+L'exemple suivant montre comment créer simplement un  `AnalyserNode` avec {{domxref("AudioContext")}}, puis utiliser  {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/)  (et en particulier [app.js lignes 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)).
 
-<pre class="brush: js">var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+```js
+var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
 var analyseur = contexteAudio.createAnalyser();
 analyseur.minDecibels = -90;
 analyseur.maxDecibels = -10;
@@ -54,7 +54,7 @@ function dessiner() {
   var hauteurBarre;
   var x = 0;
 
-  for(var i = 0; i &lt; tailleMemoireTampon; i++) {
+  for(var i = 0; i < tailleMemoireTampon; i++) {
     hauteurBarre = tableauDonnees[i];
 
     contexteCanvas.fillStyle = 'rgb(' + (hauteurBarre+100) + ',50,50)';
@@ -64,31 +64,19 @@ function dessiner() {
   }
 };
 
-dessiner();</pre>
+dessiner();
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Web Audio API', '#widl-AnalyserNode-maxDecibels', 'maxDecibels')}}</td>
-   <td>{{Spec2('Web Audio API')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                            | Statut                               | Commentaire |
+| -------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- |
+| {{SpecName('Web Audio API', '#widl-AnalyserNode-maxDecibels', 'maxDecibels')}} | {{Spec2('Web Audio API')}} |             |
 
-<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+## Compatibilité navigateurs
 
-<p>{{Compat("api.AnalyserNode.maxDecibels")}}</p>
+{{Compat("api.AnalyserNode.maxDecibels")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
-</ul>
+- [Utiliser la Web Audio API](/fr/docs/Web_Audio_API/Using_Web_Audio_API)
diff --git a/files/fr/web/api/analysernode/mindecibels/index.md b/files/fr/web/api/analysernode/mindecibels/index.md
index af3c639646..c33c9be56f 100644
--- a/files/fr/web/api/analysernode/mindecibels/index.md
+++ b/files/fr/web/api/analysernode/mindecibels/index.md
@@ -3,32 +3,32 @@ title: AnalyserNode.minDecibels
 slug: Web/API/AnalyserNode/minDecibels
 translation_of: Web/API/AnalyserNode/minDecibels
 ---
-<p>{{ APIRef("Web Audio API") }}</p>
+{{ APIRef("Web Audio API") }}
 
-<p>La propriété <strong><code>minDecibels</code></strong> de l'objet {{ domxref("AnalyserNode") }} est un nombre flottant à double précision représentant la puissance maximum de l'intervalle pour l'analyse des données FFT, pour une conversion vers des valeurs non signées ou des nombres flottants — en d'autres termes, elle spécifie la valeur minimum pour l'intervalle de résultats des méthodes <code>getFloatFrequencyData()</code> et <code>getByteFrequencyData()</code>.</p>
+La propriété **`minDecibels`** de l'objet {{ domxref("AnalyserNode") }} est un nombre flottant à double précision représentant la puissance maximum de l'intervalle pour l'analyse des données FFT, pour une conversion vers des valeurs non signées ou des nombres flottants — en d'autres termes, elle spécifie la valeur minimum pour l'intervalle de résultats des méthodes `getFloatFrequencyData()` et `getByteFrequencyData()`.
 
-<p>Sa valeur par défaut est <code>-100</code>.</p>
+Sa valeur par défaut est `-100`.
 
-<div class="note">
-<p><strong>Note :</strong> Si une valeur inférieure à <code>AnalyserNode.minDecibels</code> est indiquée, une erreur <code>INDEX_SIZE_ERR</code> est levée.</p>
-</div>
+> **Note :** Si une valeur inférieure à `AnalyserNode.minDecibels` est indiquée, une erreur `INDEX_SIZE_ERR` est levée.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">var contexteAudio = new AudioContext();
+```js
+var contexteAudio = new AudioContext();
 var analyseur = contexteAudio.createAnalyser();
 analyseur.maxDecibels = -90;
-</pre>
+```
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>Un nombre flottant à double précision.</p>
+Un nombre flottant à double précision.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>L'exemple suivant montre comment créer simplement un  <code>AnalyserNode</code> avec {{domxref("AudioContext")}}, puis utiliser  {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo <a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a>  (et en particulier <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js lines 128–205</a>).</p>
+L'exemple suivant montre comment créer simplement un  `AnalyserNode` avec {{domxref("AudioContext")}}, puis utiliser  {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/)  (et en particulier [app.js lines 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)).
 
-<pre class="brush: js">var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+```js
+var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
 var analyseur = contexteAudio.createAnalyser();
 analyseur.minDecibels = -90;
 analyseur.maxDecibels = -10;
@@ -54,7 +54,7 @@ function dessiner() {
   var hauteurBarre;
   var x = 0;
 
-  for(var i = 0; i &lt; tailleMemoireTampon; i++) {
+  for(var i = 0; i < tailleMemoireTampon; i++) {
     hauteurBarre = tableauDonnees[i];
 
     canvasCtx.fillStyle = 'rgb(' + (hauteurBarre+100) + ',50,50)';
@@ -64,31 +64,19 @@ function dessiner() {
   }
 };
 
-dessiner();</pre>
+dessiner();
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Web Audio API', '#widl-AnalyserNode-maxDecibels', 'maxDecibels')}}</td>
-   <td>{{Spec2('Web Audio API')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                            | Statut                               | Commentaire |
+| -------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- |
+| {{SpecName('Web Audio API', '#widl-AnalyserNode-maxDecibels', 'maxDecibels')}} | {{Spec2('Web Audio API')}} |             |
 
-<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+## Compatibilité navigateurs
 
-<p>{{Compat("api.AnalyserNode.minDecibels")}}</p>
+{{Compat("api.AnalyserNode.minDecibels")}}
 
-<h2 id="See_also">See also</h2>
+## See also
 
-<ul>
- <li><a href="/fr/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
-</ul>
+- [Utiliser la Web Audio API](/fr/docs/Web_Audio_API/Using_Web_Audio_API)
diff --git a/files/fr/web/api/analysernode/smoothingtimeconstant/index.md b/files/fr/web/api/analysernode/smoothingtimeconstant/index.md
index 5e438dd47b..627d35e4b5 100644
--- a/files/fr/web/api/analysernode/smoothingtimeconstant/index.md
+++ b/files/fr/web/api/analysernode/smoothingtimeconstant/index.md
@@ -3,36 +3,36 @@ title: AnalyserNode.smoothingTimeConstant
 slug: Web/API/AnalyserNode/smoothingTimeConstant
 translation_of: Web/API/AnalyserNode/smoothingTimeConstant
 ---
-<p>{{ APIRef("Web Audio API") }}</p>
+{{ APIRef("Web Audio API") }}
 
-<p>La propriété <strong><code>smoothingTimeConstant</code></strong> de l'interface {{ domxref("AnalyserNode") }} est un nombre flottant à double précision qui représente une moyenne entre le buffer courant et le buffer précédent - elle sert à lisser la transition entre les valeurs.</p>
+La propriété **`smoothingTimeConstant`** de l'interface {{ domxref("AnalyserNode") }} est un nombre flottant à double précision qui représente une moyenne entre le buffer courant et le buffer précédent - elle sert à lisser la transition entre les valeurs.
 
-<p>La valeur est <code>0.8</code> par défaut; elle doit être comprise entre <code>0</code> et <code>1</code>. Lorsqu'elle vaut 0, aucune moyenne n'est effectuée, tandis que la valeur 1 signifie que le chevauchement entre le buffer en cours et le buffer précédent est conséquent lors du calcul des valeurs, ce qui a pour effet d'adoucir le changement lors des appels {{domxref("AnalyserNode.getFloatFrequencyData")}}/{{domxref("AnalyserNode.getByteFrequencyData")}}.</p>
+La valeur est `0.8` par défaut; elle doit être comprise entre `0` et `1`. Lorsqu'elle vaut 0, aucune moyenne n'est effectuée, tandis que la valeur 1 signifie que le chevauchement entre le buffer en cours et le buffer précédent est conséquent lors du calcul des valeurs, ce qui a pour effet d'adoucir le changement lors des appels {{domxref("AnalyserNode.getFloatFrequencyData")}}/{{domxref("AnalyserNode.getByteFrequencyData")}}.
 
-<p>En termes techniques, on applique une <a href="http://webaudio.github.io/web-audio-api/#blackman-window">fenêtre de Blackman</a> pour lisser les valeurs dans le temps. La valeur par défaut convient à la plupart des cas.</p>
+En termes techniques, on applique une [fenêtre de Blackman](http://webaudio.github.io/web-audio-api/#blackman-window) pour lisser les valeurs dans le temps. La valeur par défaut convient à la plupart des cas.
 
-<div class="note">
-<p><strong>Note :</strong> Si la valeur n'est pas comprise entre 0 et 1, une exception <code>INDEX_SIZE_ERR</code> est levée.</p>
-</div>
+> **Note :** Si la valeur n'est pas comprise entre 0 et 1, une exception `INDEX_SIZE_ERR` est levée.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">var contexteAudio = new AudioContext();
+```js
+var contexteAudio = new AudioContext();
 var analyseur = contexteAudio.createAnalyser();
 analyseur.smoothingTimeConstant = 1;
-</pre>
+```
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>Un nombre flottant à double précision.</p>
+Un nombre flottant à double précision.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>L'exemple suivant montre comment créer simplement un  <code>AnalyserNode</code> avec {{domxref("AudioContext")}}, puis utiliser  {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo <a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a>  (et en particulier <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205">app.js lines 128–205</a>).</p>
+L'exemple suivant montre comment créer simplement un  `AnalyserNode` avec {{domxref("AudioContext")}}, puis utiliser  {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/)  (et en particulier [app.js lines 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)).
 
-<p><code>Si vou sêtes curieux du fonctionnement de smoothingTimeConstant()</code>, essayez de cloner l'exemple ci-dessous et d'affecter : <code>analyser.smoothingTimeConstant = 0;</code>. Vous verrez que les changements de valeur sont bien plus discordants.</p>
+`Si vou sêtes curieux du fonctionnement de smoothingTimeConstant()`, essayez de cloner l'exemple ci-dessous et d'affecter : `analyser.smoothingTimeConstant = 0;`. Vous verrez que les changements de valeur sont bien plus discordants.
 
-<pre class="brush: js">var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+```js
+var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
 var analyseur = contexteAudio.createAnalyser();
 analyseur.minDecibels = -90;
 analyseur.maxDecibels = -10;
@@ -59,7 +59,7 @@ function dessiner() {
   var hauteurBarre;
   var x = 0;
 
-  for(var i = 0; i &lt; tailleMemoireTampon; i++) {
+  for(var i = 0; i < tailleMemoireTampon; i++) {
     hauteurBarre = tableauDonnees[i];
 
     contexteCanvas.fillStyle = 'rgb(' + (hauteurBarre+100) + ',50,50)';
@@ -69,31 +69,19 @@ function dessiner() {
   }
 };
 
-dessiner();</pre>
+dessiner();
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Web Audio API', '#widl-AnalyserNode-smoothingTimeConstant', 'smoothingTimeConstant')}}</td>
-   <td>{{Spec2('Web Audio API')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                        | Statut                               | Commentaire |
+| ------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ----------- |
+| {{SpecName('Web Audio API', '#widl-AnalyserNode-smoothingTimeConstant', 'smoothingTimeConstant')}} | {{Spec2('Web Audio API')}} |             |
 
-<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+## Compatibilité navigateurs
 
-<p>{{Compat("api.AnalyserNode.smoothingTimeConstant")}}</p>
+{{Compat("api.AnalyserNode.smoothingTimeConstant")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
-</ul>
+- [Utiliser la Web Audio API](/fr/docs/Web_Audio_API/Using_Web_Audio_API)
diff --git a/files/fr/web/api/animation/index.md b/files/fr/web/api/animation/index.md
index d2a3f61044..d8e34a9cdb 100644
--- a/files/fr/web/api/animation/index.md
+++ b/files/fr/web/api/animation/index.md
@@ -12,111 +12,92 @@ tags:
   - web animation api
 translation_of: Web/API/Animation
 ---
-<p>{{ APIRef("Web Animations API") }}{{SeeCompatTable}}</p>
-
-<p>L'interface <strong><code>Animation</code></strong> de <a href="/en-US/docs/Web/API/Web_Animations_API">l'API Web Animations</a> correspond à un lecteur d'animations et offre les commandes nécessaires au contrôle et à la chronologie d'un noeud ou d'une source d'animation.</p>
-
-<h2 id="Constructeur">Constructeur</h2>
-
-<dl>
- <dt>{{domxref("Animation.Animation()", "Animation()")}}</dt>
- <dd>Crée une nouvelle instance de l'objet <code>Animation</code>.</dd>
-</dl>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<dl>
- <dt>{{domxref("Animation.currentTime")}}</dt>
- <dd>La valeur actuelle de temps de l'animation en millisecondes, que l'animation soit en pause ou en cours. Si l'animation ne possède pas de {{domxref("AnimationTimeline", "timeline")}}, est inactive ou n'a toujours pas été lancée, la valeur est <code>null</code>.</dd>
-</dl>
-
-<dl>
- <dt>{{domxref("Animation.effect")}}</dt>
- <dd>Récupère et défini le {{domxref("KeyframeEffect")}} associé à cette animation.</dd>
- <dt>{{domxref("Animation.finished")}} {{readOnlyInline}}</dt>
- <dd>Retourne la <code>Promise </code>terminée en cours pour cette animation.</dd>
-</dl>
-
-<dl>
- <dt>{{domxref("Animation.id")}}</dt>
- <dd>Récupère et défini le <code>String</code> utilisé pour identifier l'animation.</dd>
- <dt>{{domxref("Animation.playState")}} {{readOnlyInline}}</dt>
- <dd>Retourne une valeur énumérée qui décit l'état de lecture de l'animation.</dd>
-</dl>
-
-<dl>
- <dt>{{domxref("Animation.playbackRate")}}</dt>
- <dd>Retourne et défini la fréquence de lecture de l'animation.</dd>
-</dl>
-
-<dl>
- <dt>{{domxref("Animation.ready")}} {{readOnlyInline}}</dt>
- <dd>Retourne la <code>Promise </code>prête en cours pour l'animation.</dd>
-</dl>
-
-<dl>
- <dt>{{domxref("Animation.startTime")}}</dt>
- <dd>Retourne et défini le moment prévu auquel la lecture de l'animation devrait commencer.</dd>
-</dl>
-
-<dl>
- <dt>{{domxref("Animation.timeline")}}</dt>
- <dd>Retourne et défini la {{domxref("AnimationTimeline", "timeline")}} associée à cette animation.</dd>
-</dl>
-
-<h3 id="Gestionnaire_d'événements">Gestionnaire d'événements</h3>
-
-<dl>
- <dt>{{domxref("Animation.oncancel")}}</dt>
- <dd>Retourne et défini le gestionnaire d'événement pour l'événement <code>cancel </code>(annuler).</dd>
- <dt>{{domxref("Animation.onfinish")}}</dt>
- <dd>Retourne et défini le gestionnaire d'événement pour l'événement <code>finish</code> (terminer).</dd>
-</dl>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<dl>
- <dt>{{domxref("Animation.cancel()")}}</dt>
- <dd>Supprime toutes les {{domxref("KeyframeEffect", "keyframeEffects")}} dues à cette animation et interomp la lecture.</dd>
-</dl>
-
-<dl>
- <dt>{{domxref("Animation.finish()")}}</dt>
- <dd>Cherche la fin de l'animation, en fonction que l'animation soit en lecture normale ou inversée.</dd>
-</dl>
-
-<dl>
- <dt>{{domxref("Animation.pause()")}}</dt>
- <dd>Suspend la lecture de l'animation.</dd>
-</dl>
-
-<dl>
- <dt>{{domxref("Animation.play()")}}</dt>
- <dd>Démarre ou reprend la lecture de l'animation, ou redémarre l'animation au début si celle-ci est déjà terminée.</dd>
-</dl>
-
-<dl>
- <dt>{{domxref("Animation.reverse()")}}</dt>
- <dd>Inverse la direction de lecture, en s'arrêtant au début de l'animation. Si l'animation est terminée ou annulée, elle sera jouée de la fin vers le début.</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">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName("Web Animations", "#the-animation-interface", "Animation")}}</td>
-   <td>{{Spec2("Web Animations")}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Animation")}}</p>
\ No newline at end of file
+{{ APIRef("Web Animations API") }}{{SeeCompatTable}}
+
+L'interface **`Animation`** de [l'API Web Animations](/en-US/docs/Web/API/Web_Animations_API) correspond à un lecteur d'animations et offre les commandes nécessaires au contrôle et à la chronologie d'un noeud ou d'une source d'animation.
+
+## Constructeur
+
+- {{domxref("Animation.Animation()", "Animation()")}}
+  - : Crée une nouvelle instance de l'objet `Animation`.
+
+## Propriétés
+
+- {{domxref("Animation.currentTime")}}
+  - : La valeur actuelle de temps de l'animation en millisecondes, que l'animation soit en pause ou en cours. Si l'animation ne possède pas de {{domxref("AnimationTimeline", "timeline")}}, est inactive ou n'a toujours pas été lancée, la valeur est `null`.
+
+<!---->
+
+- {{domxref("Animation.effect")}}
+  - : Récupère et défini le {{domxref("KeyframeEffect")}} associé à cette animation.
+- {{domxref("Animation.finished")}} {{readOnlyInline}}
+  - : Retourne la `Promise `terminée en cours pour cette animation.
+
+<!---->
+
+- {{domxref("Animation.id")}}
+  - : Récupère et défini le `String` utilisé pour identifier l'animation.
+- {{domxref("Animation.playState")}} {{readOnlyInline}}
+  - : Retourne une valeur énumérée qui décit l'état de lecture de l'animation.
+
+<!---->
+
+- {{domxref("Animation.playbackRate")}}
+  - : Retourne et défini la fréquence de lecture de l'animation.
+
+<!---->
+
+- {{domxref("Animation.ready")}} {{readOnlyInline}}
+  - : Retourne la `Promise `prête en cours pour l'animation.
+
+<!---->
+
+- {{domxref("Animation.startTime")}}
+  - : Retourne et défini le moment prévu auquel la lecture de l'animation devrait commencer.
+
+<!---->
+
+- {{domxref("Animation.timeline")}}
+  - : Retourne et défini la {{domxref("AnimationTimeline", "timeline")}} associée à cette animation.
+
+### Gestionnaire d'événements
+
+- {{domxref("Animation.oncancel")}}
+  - : Retourne et défini le gestionnaire d'événement pour l'événement `cancel `(annuler).
+- {{domxref("Animation.onfinish")}}
+  - : Retourne et défini le gestionnaire d'événement pour l'événement `finish` (terminer).
+
+## Méthodes
+
+- {{domxref("Animation.cancel()")}}
+  - : Supprime toutes les {{domxref("KeyframeEffect", "keyframeEffects")}} dues à cette animation et interomp la lecture.
+
+<!---->
+
+- {{domxref("Animation.finish()")}}
+  - : Cherche la fin de l'animation, en fonction que l'animation soit en lecture normale ou inversée.
+
+<!---->
+
+- {{domxref("Animation.pause()")}}
+  - : Suspend la lecture de l'animation.
+
+<!---->
+
+- {{domxref("Animation.play()")}}
+  - : Démarre ou reprend la lecture de l'animation, ou redémarre l'animation au début si celle-ci est déjà terminée.
+
+<!---->
+
+- {{domxref("Animation.reverse()")}}
+  - : Inverse la direction de lecture, en s'arrêtant au début de l'animation. Si l'animation est terminée ou annulée, elle sera jouée de la fin vers le début.
+
+## Spécifications
+
+| Spécification                                                                                    | État                                 | Commentaire         |
+| ------------------------------------------------------------------------------------------------ | ------------------------------------ | ------------------- |
+| {{SpecName("Web Animations", "#the-animation-interface", "Animation")}} | {{Spec2("Web Animations")}} | Définition initiale |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Animation")}}
diff --git a/files/fr/web/api/animation/starttime/index.md b/files/fr/web/api/animation/starttime/index.md
index 48d8361bf8..9ea48fff52 100644
--- a/files/fr/web/api/animation/starttime/index.md
+++ b/files/fr/web/api/animation/starttime/index.md
@@ -11,30 +11,25 @@ tags:
 translation_of: Web/API/Window/mozAnimationStartTime
 original_slug: Web/API/Window/mozAnimationStartTime
 ---
-<p>{{APIRef("Mozilla Extensions")}}{{Non-standard_Header}}{{Obsolete_Header("Gecko42")}}</p>
+{{APIRef("Mozilla Extensions")}}{{Non-standard_Header}}{{Obsolete_Header("Gecko42")}}
 
-<p>Renvoie l'heure, en millisecondes depuis l'époque, à laquelle les animations ont commencé maintenant doivent être considérées comme ayant commencé. Cette valeur doit être utilisée à la place, par exemple, <code><a href="/en/JavaScript/Reference/Global_Objects/Date/now">Date.now()</a></code>, car cette valeur sera la même pour toutes les animations lancées dans cette fenêtre pendant cet intervalle d'actualisation, leur permettant de rester synchronisées les unes avec les autres.</p>
+Renvoie l'heure, en millisecondes depuis l'époque, à laquelle les animations ont commencé maintenant doivent être considérées comme ayant commencé. Cette valeur doit être utilisée à la place, par exemple, [`Date.now()`](/en/JavaScript/Reference/Global_Objects/Date/now), car cette valeur sera la même pour toutes les animations lancées dans cette fenêtre pendant cet intervalle d'actualisation, leur permettant de rester synchronisées les unes avec les autres.
 
-<p>Cela permet également aux animations basées sur JavaScript de rester synchronisées avec les transitions CSS et les animations SMIL déclenchées pendant le même intervalle d'actualisation.</p>
+Cela permet également aux animations basées sur JavaScript de rester synchronisées avec les transitions CSS et les animations SMIL déclenchées pendant le même intervalle d'actualisation.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="eval"><em>time</em> = window.mozAnimationStartTime;
-</pre>
+    time = window.mozAnimationStartTime;
 
-<h3 id="Parameters">Paramètres</h3>
+### Paramètres
 
-<ul>
- <li><em><code>time</code></em> est le temps en millisecondes depuis l'époque à laquelle les animations de la fenêtre actuelle doivent être considérées comme ayant démarré.</li>
-</ul>
+- _`time`_ est le temps en millisecondes depuis l'époque à laquelle les animations de la fenêtre actuelle doivent être considérées comme ayant démarré.
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Window.mozAnimationStartTime")}}</p>
+{{Compat("api.Window.mozAnimationStartTime")}}
 
-<h2 id="Voir_également">Voir également</h2>
+## Voir également
 
-<ul>
- <li>{{domxref("window.mozRequestAnimationFrame()")}}</li>
- <li>{{domxref("window.onmozbeforepaint")}}</li>
-</ul>
+- {{domxref("window.mozRequestAnimationFrame()")}}
+- {{domxref("window.onmozbeforepaint")}}
diff --git a/files/fr/web/api/animationevent/animationevent/index.md b/files/fr/web/api/animationevent/animationevent/index.md
index aa793738cf..e8be077157 100644
--- a/files/fr/web/api/animationevent/animationevent/index.md
+++ b/files/fr/web/api/animationevent/animationevent/index.md
@@ -3,63 +3,45 @@ title: AnimationEvent()
 slug: Web/API/AnimationEvent/AnimationEvent
 translation_of: Web/API/AnimationEvent/AnimationEvent
 ---
-<p>{{APIRef("Web Animations")}}{{SeeCompatTable}}</p>
+{{APIRef("Web Animations")}}{{SeeCompatTable}}
 
-<p>Le constructeur <code><strong>AnimationEvent()</strong></code> retourne un nouvel {{domxref("AnimationEvent")}}, représentant un évènement en relation avec une animation.</p>
+Le constructeur **`AnimationEvent()`** retourne un nouvel {{domxref("AnimationEvent")}}, représentant un évènement en relation avec une animation.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>animationEvent</em> = new AnimationEvent(<em>type</em>, {animationName: <em>aPropertyName</em>,
-                                           elapsedTime  : <em>aFloat</em>,
-                                           pseudoElement: <em>aPseudoElementName</em>});
-</pre>
+    animationEvent = new AnimationEvent(type, {animationName: aPropertyName,
+                                               elapsedTime  : aFloat,
+                                               pseudoElement: aPseudoElementName});
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<p><em>Le constructeur <code>AnimationEvent()</code> </em>constructeur hérite également des arguments de <em> {{domxref("Event.Event", "Event()")}}.</em></p>
+*Le constructeur `AnimationEvent()` *constructeur hérite également des arguments de  _{{domxref("Event.Event", "Event()")}}._
 
-<dl>
- <dt><code>type</code></dt>
- <dd>Un {{domxref("DOMString")}} représentant le nom du type de <code>AnimationEvent</code>. Il est sensible à la casse (majuscule-minuscule) et peut être: <code>'animationstart'</code>, <code>'animationend'</code>, or <code>'animationiteration'</code>.</dd>
- <dt><code>animationName</code> {{optional_inline}}</dt>
- <dd>Un {{domxref("DOMString")}} contenant la valeur de  la propriété associée avec la transition.{{cssxref("animation-name")}} . Prend par défaut <code>""</code>.</dd>
- <dt><code>elapsedTime</code> {{optional_inline}}</dt>
- <dd>Un <code>float</code> donne le montant de temps d'une application qui a fonctionné, en secondes, quand l'évenenement est déclenché, excluant le temps de pause des animations. Pour un évènement <code>"animationstart"</code> , <code>elapsedTime</code> est de <code>0.0</code> jusqu'a ce qu'il y ai une valeur négative pour une valeur {{cssxref("animation-delay")}}, dans le case où l'évenement est déclenché par <code>elapsedTime</code> contenant <code>(-1 *  </code><em>délais</em><code>)</code>. SA valeur par défaut vaut <code>0.0</code>.</dd>
- <dt><code>pseudoElement</code> {{optional_inline}}</dt>
- <dd>Is a {{domxref("DOMString")}}, starting with <code>"::"</code>, containing the name of the <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-element</a> the animation runs on. If the animation doesn't run on a pseudo-element but on the element itself, specify an empty string: <code>""</code>. It defaults to <code>""</code>.</dd>
-</dl>
+- `type`
+  - : Un {{domxref("DOMString")}} représentant le nom du type de `AnimationEvent`. Il est sensible à la casse (majuscule-minuscule) et peut être: `'animationstart'`, `'animationend'`, or `'animationiteration'`.
+- `animationName` {{optional_inline}}
+  - : Un {{domxref("DOMString")}} contenant la valeur de  la propriété associée avec la transition.{{cssxref("animation-name")}} . Prend par défaut `""`.
+- `elapsedTime` {{optional_inline}}
+  - : Un `float` donne le montant de temps d'une application qui a fonctionné, en secondes, quand l'évenenement est déclenché, excluant le temps de pause des animations. Pour un évènement `"animationstart"` , `elapsedTime` est de `0.0` jusqu'a ce qu'il y ai une valeur négative pour une valeur {{cssxref("animation-delay")}}, dans le case où l'évenement est déclenché par `elapsedTime` contenant `(-1 * `_délais_`)`. SA valeur par défaut vaut `0.0`.
+- `pseudoElement` {{optional_inline}}
+  - : Is a {{domxref("DOMString")}}, starting with `"::"`, containing the name of the [pseudo-element](/en-US/docs/Web/CSS/Pseudo-elements) the animation runs on. If the animation doesn't run on a pseudo-element but on the element itself, specify an empty string: `""`. It defaults to `""`.
 
-<h3 id="Return_value">Return value</h3>
+### Return value
 
-<p>A new {{domxref("AnimationEvent")}}, initialized per any provided options.</p>
+A new {{domxref("AnimationEvent")}}, initialized per any provided options.
 
-<h2 id="Specifications">Specifications</h2>
+## Specifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{ SpecName('CSS3 Animations', '#AnimationEvent-interface', 'AnimationEvent()') }}</td>
-   <td>{{ Spec2('CSS3 Animations')}}</td>
-   <td>Initial definition.</td>
-  </tr>
- </tbody>
-</table>
+| Specification                                                                                                | Status                                   | Comment             |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | ------------------- |
+| {{ SpecName('CSS3 Animations', '#AnimationEvent-interface', 'AnimationEvent()') }} | {{ Spec2('CSS3 Animations')}} | Initial definition. |
 
-<h2 id="Browser_compatibility">Browser compatibility</h2>
+## Browser compatibility
 
-<p>{{Compat("api.AnimationEvent.AnimationEvent")}}</p>
+{{Compat("api.AnimationEvent.AnimationEvent")}}
 
-<h2 id="See_also">See also</h2>
+## See also
 
-<ul>
- <li><a href="/en-US/docs/CSS/Using_CSS_animations">Using CSS animations</a></li>
- <li>Animation-related CSS properties and at-rules: {{cssxref("animation")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timing-function")}}, {{cssxref("@keyframes")}}</li>
- <li>The {{domxref("AnimationEvent")}} interface it belongs to.</li>
-</ul>
+- [Using CSS animations](/en-US/docs/CSS/Using_CSS_animations)
+- Animation-related CSS properties and at-rules: {{cssxref("animation")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timing-function")}}, {{cssxref("@keyframes")}}
+- The {{domxref("AnimationEvent")}} interface it belongs to.
diff --git a/files/fr/web/api/animationevent/animationname/index.md b/files/fr/web/api/animationevent/animationname/index.md
index c47cf112be..d3ff5d4520 100644
--- a/files/fr/web/api/animationevent/animationname/index.md
+++ b/files/fr/web/api/animationevent/animationname/index.md
@@ -10,41 +10,26 @@ tags:
   - Reference
 translation_of: Web/API/AnimationEvent/animationName
 ---
-<p>{{SeeCompatTable}}{{ apiref("AnimationEvent") }}</p>
+{{SeeCompatTable}}{{ apiref("AnimationEvent") }}
 
-<p>La propriété en lecture seule <code><strong>AnimationEvent.animationName</strong></code> est une {{domxref("DOMString")}} contenant la valeur de la propriété CSS {{cssxref("animation-name")}} associée à la transition.</p>
+La propriété en lecture seule **`AnimationEvent.animationName`** est une {{domxref("DOMString")}} contenant la valeur de la propriété CSS {{cssxref("animation-name")}} associée à la transition.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>nom</em> = <em>AnimationEvent</em>.animationName</pre>
+    nom = AnimationEvent.animationName
 
-<h2 id="Spécifications">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">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Animations', '#AnimationEvent-animationName', 'AnimationEvent.animationName')}}</td>
-   <td>{{Spec2('CSS3 Animations')}}</td>
-   <td>Première définition.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                    | Statut                               | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName('CSS3 Animations', '#AnimationEvent-animationName', 'AnimationEvent.animationName')}} | {{Spec2('CSS3 Animations')}} | Première définition. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.AnimationEvent.animationName")}}</p>
+{{Compat("api.AnimationEvent.animationName")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/CSS/Animations_CSS">Utiliser les animations CSS</a></li>
- <li>{{cssxref("animation")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timing-function")}}, {{cssxref("@keyframes")}}.</li>
- <li>L'interface {{domxref("AnimationEvent")}} à laquelle elle appartient.</li>
-</ul>
+- [Utiliser les animations CSS](/fr/docs/CSS/Animations_CSS)
+- {{cssxref("animation")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timing-function")}}, {{cssxref("@keyframes")}}.
+- L'interface {{domxref("AnimationEvent")}} à laquelle elle appartient.
diff --git a/files/fr/web/api/animationevent/elapsedtime/index.md b/files/fr/web/api/animationevent/elapsedtime/index.md
index 2b5dcaeece..fa48fdb4e1 100644
--- a/files/fr/web/api/animationevent/elapsedtime/index.md
+++ b/files/fr/web/api/animationevent/elapsedtime/index.md
@@ -10,43 +10,28 @@ tags:
   - Reference
 translation_of: Web/API/AnimationEvent/elapsedTime
 ---
-<p>{{SeeCompatTable}}{{ apiref("AnimationEvent") }}</p>
+{{SeeCompatTable}}{{ apiref("AnimationEvent") }}
 
-<h2 id="Résumé">Résumé</h2>
+## Résumé
 
-<p>La propriété en lecture seule <code><strong>AnimationEvent.elapsedTime</strong></code> est un <code>float</code> indiquant la quantité de temps pendant laquelle l'animation a tournée, en secondes, quand l'évènement a été déclenché, excluant tout temps où l'animation était en pause. Pour un évènement <code>"animationstart", </code><code>elapsedTime</code> est <code>0.0</code> sauf si {{cssxref("animation-delay")}} a une valeur négative, dans ce cas l'évènement est déclenché avec <code>elapsedTime </code>contenant <code>(-1 * </code><em>délai</em><code>)</code>.</p>
+La propriété en lecture seule **`AnimationEvent.elapsedTime`** est un `float` indiquant la quantité de temps pendant laquelle l'animation a tournée, en secondes, quand l'évènement a été déclenché, excluant tout temps où l'animation était en pause. Pour un évènement ` "animationstart", ``elapsedTime` est `0.0` sauf si {{cssxref("animation-delay")}} a une valeur négative, dans ce cas l'évènement est déclenché avec `elapsedTime `contenant `(-1 * `_délai_`)`.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>temps</em> = <em>AnimationEvent</em>.elapsedTime</pre>
+    temps = AnimationEvent.elapsedTime
 
-<h2 id="Spécifications">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 Animations', '#AnimationEvent-elapsedTime', 'AnimationEvent.elapsedTime') }}</td>
-   <td>{{ Spec2('CSS3 Animations')}}</td>
-   <td>Première définition</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                | Statut                                   | Commentaire         |
+| ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ------------------- |
+| {{ SpecName('CSS3 Animations', '#AnimationEvent-elapsedTime', 'AnimationEvent.elapsedTime') }} | {{ Spec2('CSS3 Animations')}} | Première définition |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.AnimationEvent.elapsedTime")}}</p>
+{{Compat("api.AnimationEvent.elapsedTime")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/CSS/Animations_CSS">Utiliser les animations CSS</a></li>
- <li>Propriétés CSS et règles @ en relations avec les animations CSS: {{cssxref("animation")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timing-function")}}, {{cssxref("@keyframes")}}.</li>
- <li>L'interface {{domxref("AnimationEvent")}} à laquelle elle appartient.</li>
-</ul>
+- [Utiliser les animations CSS](/fr/docs/CSS/Animations_CSS)
+- Propriétés CSS et règles @ en relations avec les animations CSS: {{cssxref("animation")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timing-function")}}, {{cssxref("@keyframes")}}.
+- L'interface {{domxref("AnimationEvent")}} à laquelle elle appartient.
diff --git a/files/fr/web/api/animationevent/index.md b/files/fr/web/api/animationevent/index.md
index 9b24b82be1..a576a5d556 100644
--- a/files/fr/web/api/animationevent/index.md
+++ b/files/fr/web/api/animationevent/index.md
@@ -9,70 +9,46 @@ tags:
   - Web Animations
 translation_of: Web/API/AnimationEvent
 ---
-<p>{{SeeCompatTable}}{{APIRef("Web Animations API")}}</p>
+{{SeeCompatTable}}{{APIRef("Web Animations API")}}
 
-<p>L'interface <code><strong>AnimationEvent</strong></code> représentent les évènements apportant des informations sur les <a href="/fr/docs/CSS/Animations_CSS">animations CSS</a>.</p>
+L'interface **`AnimationEvent`** représentent les évènements apportant des informations sur les [animations CSS](/fr/docs/CSS/Animations_CSS).
 
-<p>{{InheritanceDiagram}}</p>
+{{InheritanceDiagram}}
 
-<dl>
-</dl>
+## Constructeur
 
-<h2 id="Constructeur">Constructeur</h2>
+- {{domxref("AnimationEvent.AnimationEvent", "AnimationEvent()")}}
+  - : Créer un évènement AnimationEvent avec les paramètres spécifiés.
 
-<dl>
- <dt>{{domxref("AnimationEvent.AnimationEvent", "AnimationEvent()")}}</dt>
- <dd>Créer un évènement AnimationEvent avec les paramètres spécifiés.</dd>
-</dl>
+## Propriétés
 
-<h2 id="Propriétés">Propriétés</h2>
+_Hérite également des propriétés de son parent {{domxref("Event")}}._
 
-<p><em>Hérite également des propriétés de son parent {{domxref("Event")}}.</em></p>
+- {{domxref("AnimationEvent.animationName")}} {{readonlyInline}}
+  - : Est une {{domxref("DOMString")}} contenant la valeur de la propriété CSS {{cssxref("animation-name")}} associée à la transition.
+- {{domxref("AnimationEvent.elapsedTime")}} {{readonlyInline}}
+  - : Est un nombre à virgule flottante, donnant le temps pendant lequel l'animation s'est déroulée, en secondes, quand l'évènement est déclenché, en excluant tous les temps de pause de l'animation. Pour un évènement `animationstart`, `elapsedTime` est à 0.0 sauf si {{cssxref("animation-delay")}} a une valeur négative. Dans ce cas, l'évènement sera déclenché avec `elapsedTime` contenant (-1 \* la valeur de `animation-delay`).
+- {{domxref("AnimationEvent.pseudoElement")}} {{readonlyInline}}
+  - : est une {{domxref("DOMString")}}, démarrant avec '::', contenant le nom du pseudo-élément où l'animation se déroule. Si l'animation ne se déroule pas sur un pseudo-élément, mais sur un élément, la chaîne de caractères sera vide.
 
-<dl>
- <dt>{{domxref("AnimationEvent.animationName")}} {{readonlyInline}}</dt>
- <dd>Est une {{domxref("DOMString")}} contenant la valeur de la propriété CSS {{cssxref("animation-name")}} associée à la transition.</dd>
- <dt>{{domxref("AnimationEvent.elapsedTime")}} {{readonlyInline}}</dt>
- <dd>Est un nombre à virgule flottante, donnant le temps pendant lequel l'animation s'est déroulée, en secondes, quand l'évènement est déclenché, en excluant tous les temps de pause de l'animation. Pour un évènement <code>animationstart</code>, <code>elapsedTime</code> est à 0.0 sauf si {{cssxref("animation-delay")}} a une valeur négative. Dans ce cas, l'évènement sera déclenché avec <code>elapsedTime</code> contenant (-1 * la valeur de <code>animation-delay</code>).</dd>
- <dt>{{domxref("AnimationEvent.pseudoElement")}} {{readonlyInline}}</dt>
- <dd>est une {{domxref("DOMString")}}, démarrant avec '::', contenant le nom du pseudo-élément où l'animation se déroule. Si l'animation ne se déroule pas sur un pseudo-élément, mais sur un élément, la chaîne de caractères sera vide.</dd>
-</dl>
+## Méthodes
 
-<h2 id="Méthodes">Méthodes</h2>
+_Hérite également des propriétés de son parent {{domxref("Event")}}._
 
-<p><em>Hérite également des propriétés de son parent {{domxref("Event")}}.</em></p>
+- {{domxref("AnimationEvent.initAnimationEvent()")}} {{non-standard_inline}}{{deprecated_inline}}
+  - : Initialise un AnimationEvent créé avec la méthode obsolète {{domxref("Document.createEvent()", "Document.createEvent(\"AnimationEvent\")")}}.
 
-<dl>
- <dt>{{domxref("AnimationEvent.initAnimationEvent()")}} {{non-standard_inline}}{{deprecated_inline}}</dt>
- <dd>Initialise un AnimationEvent créé avec la méthode obsolète {{domxref("Document.createEvent()", "Document.createEvent(\"AnimationEvent\")")}}.</dd>
-</dl>
+## Spécifications
 
-<h2 id="Spécifications">Spécifications</h2>
+| Spécification                                                                                                | Statut                                   | Commentaire          |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------- |
+| {{ SpecName('CSS3 Animations', '#AnimationEvent-interface', 'AnimationEvent') }} | {{ Spec2('CSS3 Animations') }} | Première définition. |
 
-<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 Animations', '#AnimationEvent-interface', 'AnimationEvent') }}</td>
-   <td>{{ Spec2('CSS3 Animations') }}</td>
-   <td>Première définition.</td>
-  </tr>
- </tbody>
-</table>
+## Compatibilité des navigateurs
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+{{Compat("api.AnimationEvent")}}
 
-<p>{{Compat("api.AnimationEvent")}}</p>
+## Voir également
 
-<h2 id="Voir_également">Voir également</h2>
-
-<ul>
- <li><a href="/fr/docs/CSS/Animations_CSS">Utiliser les animations CSS</a></li>
- <li>{{cssxref("animation")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timing-function")}}, {{cssxref("@keyframes")}}.</li>
-</ul>
+- [Utiliser les animations CSS](/fr/docs/CSS/Animations_CSS)
+- {{cssxref("animation")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timing-function")}}, {{cssxref("@keyframes")}}.
diff --git a/files/fr/web/api/animationevent/pseudoelement/index.md b/files/fr/web/api/animationevent/pseudoelement/index.md
index 9bee1cda03..1799a5b9da 100644
--- a/files/fr/web/api/animationevent/pseudoelement/index.md
+++ b/files/fr/web/api/animationevent/pseudoelement/index.md
@@ -9,40 +9,26 @@ tags:
   - Reference
 translation_of: Web/API/AnimationEvent/pseudoElement
 ---
-<p>{{SeeCompatTable}}{{ apiref("AnimationEvent") }}</p>
-
-<p>La propriété en lecture seule <code><strong>AnimationEvent.pseudoElement</strong></code> est une {{domxref("DOMString")}}, commençant par <code>'::'</code>, contenant le nom du <a href="/fr/docs/CSS/Pseudo-éléments">pseudo-élément</a> sur lequel tourne l'animation. Si l'animation ne tourne pas sur un pseudo-élément, mais sur un élément, c'est une chaîne de caractère vide : <code>''</code><code>.</code></p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><em>nom</em> = <em>AnimationEvent</em>.pseudoElement</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('CSS3 Animations', '#AnimationEvent-pseudoElement', 'AnimationEvent.pseudoElement') }}</td>
-   <td>{{ Spec2('CSS3 Animations')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.AnimationEvent.pseudoElement")}}</p>
-
-<h2 id="Voir_également">Voir également</h2>
-
-<ul>
- <li><a href="/fr/docs/CSS/Animations_CSS">Utiliser les animations CSS</a></li>
- <li>Propriétés et règles @ en relation avec les animations CSS : {{cssxref("animation")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timing-function")}}, {{cssxref("@keyframes")}}.</li>
- <li>L'interface {{domxref("AnimationEvent")}} à laquelle elle est rattachée.</li>
-</ul>
+{{SeeCompatTable}}{{ apiref("AnimationEvent") }}
+
+La propriété en lecture seule **`AnimationEvent.pseudoElement`** est une {{domxref("DOMString")}}, commençant par `'::'`, contenant le nom du [pseudo-élément](/fr/docs/CSS/Pseudo-éléments) sur lequel tourne l'animation. Si l'animation ne tourne pas sur un pseudo-élément, mais sur un élément, c'est une chaîne de caractère vide : ` ''``. `
+
+## Syntaxe
+
+    nom = AnimationEvent.pseudoElement
+
+## Spécifications
+
+| Spécification                                                                                                                        | État                                     | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------- |
+| {{ SpecName('CSS3 Animations', '#AnimationEvent-pseudoElement', 'AnimationEvent.pseudoElement') }} | {{ Spec2('CSS3 Animations')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.AnimationEvent.pseudoElement")}}
+
+## Voir également
+
+- [Utiliser les animations CSS](/fr/docs/CSS/Animations_CSS)
+- Propriétés et règles @ en relation avec les animations CSS : {{cssxref("animation")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timing-function")}}, {{cssxref("@keyframes")}}.
+- L'interface {{domxref("AnimationEvent")}} à laquelle elle est rattachée.
diff --git a/files/fr/web/api/atob/index.md b/files/fr/web/api/atob/index.md
index b7b3b16a43..d99df91aed 100644
--- a/files/fr/web/api/atob/index.md
+++ b/files/fr/web/api/atob/index.md
@@ -10,69 +10,40 @@ tags:
 translation_of: Web/API/WindowOrWorkerGlobalScope/atob
 original_slug: Web/API/WindowOrWorkerGlobalScope/atob
 ---
-<p>{{APIRef ("HTML DOM")}}<br>
- La fonction <code>WindowOrWorkerGlobalScope.atob()</code> décode une chaîne de données qui a été codée en utilisant le codage en base 64. Vous pouvez utiliser la méthode {{domxref("WindowOrWorkerGlobalScope.btoa","btoa()")}} pour encoder et transmettre des données qui pourraient causer des problèmes de communication, puis les transmettre et utiliser la méthode atob() pour décoder les données . Par exemple, vous pouvez coder, transmettre et décoder des caractères de contrôle tels que les valeurs ASCII 0 à 31.</p>
+{{APIRef ("HTML DOM")}}
+La fonction `WindowOrWorkerGlobalScope.atob()` décode une chaîne de données qui a été codée en utilisant le codage en base 64. Vous pouvez utiliser la méthode {{domxref("WindowOrWorkerGlobalScope.btoa","btoa()")}} pour encoder et transmettre des données qui pourraient causer des problèmes de communication, puis les transmettre et utiliser la méthode atob() pour décoder les données . Par exemple, vous pouvez coder, transmettre et décoder des caractères de contrôle tels que les valeurs ASCII 0 à 31.
 
-<p>Pour une utilisation avec des chaînes Unicode ou UTF-8, voir <a href="/fr/docs/D%C3%A9coder_encoder_en_base64">cette note sur l'encodage et le décodage Base64</a> et <a href="/fr-FR/docs/Web/API/window.btoa#Unicode_Strings">cette note sur btoa()</a>.</p>
+Pour une utilisation avec des chaînes Unicode ou UTF-8, voir [cette note sur l'encodage et le décodage Base64](/fr/docs/D%C3%A9coder_encoder_en_base64) et [cette note sur btoa()](/fr-FR/docs/Web/API/window.btoa#Unicode_Strings).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="eval">var donneesDecodees = scope.atob(<em>donneesEncodees</em>);
-</pre>
+    var donneesDecodees = scope.atob(donneesEncodees);
 
-<h3 id="Déclenche">Déclenche</h3>
+### Déclenche
 
-<p>Déclenche une {{jsxref("DOMException")}} si la longueur de la chaîne passée en entrée n'est pas un multiple de 4.</p>
+Déclenche une {{jsxref("DOMException")}} si la longueur de la chaîne passée en entrée n'est pas un multiple de 4.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="eval"><em>donneesEncodees</em> = window.btoa('Salut, monde'); // encode une chaîne
-<em>donneesDecodees</em> = window.atob(<em>donneesEncodees</em>); // décode la chaîne
-</pre>
+    donneesEncodees = window.btoa('Salut, monde'); // encode une chaîne
+    donneesDecodees = window.atob(donneesEncodees); // décode la chaîne
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<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', 'webappapis.html#dom-btoa', 'WindowOrWorkerGlobalScope.atob()')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Méthode déplacée dans le mixin <code>WindowOrWorkerGlobalScope</code> dans la spéc la plus récente.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', '#dom-windowbase64-atob', 'WindowBase64.atob()')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Pas de changement depuis l'instantané le plus récent {{SpecName("HTML5.1")}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5.1', '#dom-windowbase64-atob', 'WindowBase64.atob()')}}</td>
-   <td>{{Spec2('HTML5.1')}}</td>
-   <td>Instantané de {{SpecName("HTML WHATWG")}}. Pas de changement.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML5 W3C", "#dom-windowbase64-atob", "WindowBase64.atob()")}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Instantané de {{SpecName("HTML WHATWG")}}. Création de <code>WindowBase64</code> (les propriétés se trouvaient sur la cible avant cela).</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                            | Statut                           | Commentaire                                                                                                                            |
+| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('HTML WHATWG', 'webappapis.html#dom-btoa', 'WindowOrWorkerGlobalScope.atob()')}} | {{Spec2('HTML WHATWG')}} | Méthode déplacée dans le mixin `WindowOrWorkerGlobalScope` dans la spéc la plus récente.                                               |
+| {{SpecName('HTML WHATWG', '#dom-windowbase64-atob', 'WindowBase64.atob()')}}                     | {{Spec2('HTML WHATWG')}} | Pas de changement depuis l'instantané le plus récent {{SpecName("HTML5.1")}}.                                                 |
+| {{SpecName('HTML5.1', '#dom-windowbase64-atob', 'WindowBase64.atob()')}}                         | {{Spec2('HTML5.1')}}     | Instantané de {{SpecName("HTML WHATWG")}}. Pas de changement.                                                                 |
+| {{SpecName("HTML5 W3C", "#dom-windowbase64-atob", "WindowBase64.atob()")}}                     | {{Spec2('HTML5 W3C')}}     | Instantané de {{SpecName("HTML WHATWG")}}. Création de `WindowBase64` (les propriétés se trouvaient sur la cible avant cela). |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.WindowOrWorkerGlobalScope.atob")}}</p>
+{{Compat("api.WindowOrWorkerGlobalScope.atob")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/Web/API/WindowBase64/Base64_encoding_and_decoding">Base64 encoding and decoding</a></li>
- <li><a href="/fr/docs/Web/HTTP/Basics_of_HTTP/Data_URIs">Les  URL de <code>données</code></a></li>
- <li>{{domxref("WindowOrWorkerGlobalScope.btoa","window.btoa()")}}</li>
- <li><a href="/fr-FR/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li>
-</ul>
+- [Base64 encoding and decoding](/Web/API/WindowBase64/Base64_encoding_and_decoding)
+- [Les  URL de `données`](/fr/docs/Web/HTTP/Basics_of_HTTP/Data_URIs)
+- {{domxref("WindowOrWorkerGlobalScope.btoa","window.btoa()")}}
+- [Components.utils.importGlobalProperties](/fr-FR/docs/Components.utils.importGlobalProperties)
diff --git a/files/fr/web/api/attr/index.md b/files/fr/web/api/attr/index.md
index 8a97846bae..930c7df714 100644
--- a/files/fr/web/api/attr/index.md
+++ b/files/fr/web/api/attr/index.md
@@ -7,155 +7,119 @@ tags:
   - DOM
 translation_of: Web/API/Attr
 ---
-<div>{{APIRef("DOM")}}</div>
-
-<p>Ce type représente un attribut d'un élément DOM comme un objet. Dans la plupart des méthodes DOM, vous auriez probablement récupéré l'attribut directement comme une chaîne (par exemple, {{domxref ("element.getAttribute()")}}, mais certaines fonctions (par exemple, {{domxref ("element.getAttributeNode()" )}}) ou des moyens d'itération donnent des types Attr.</p>
-
-<div class="warning">
-<p><strong>Attention :</strong> À partir de Gecko 7.0 {{geckoRelease ("7.0")}}, ceux qui vont être retirés afficheront des messages d'avertissement dans la console. Vous devriez modifier votre code en conséquence. Voir {{anch("Propriétés et méthodes dépréciées")}} pour une liste complète.</p>
-</div>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<dl>
- <dt>{{domxref("Attr.name", "name")}} {{readOnlyInline}}</dt>
- <dd>Le nom de l'attribut.</dd>
- <dt>{{domxref("Attr.namespaceURI", "namespaceURI")}} {{readOnlyInline}}</dt>
- <dd>Une {{domxref("DOMString","Chaîne de caractères")}} représentant l'URI de l'espace nom de l'attribut ou <code>null</code> s'il n'y a pas d'espace nom.</dd>
- <dt>{{domxref("Attr.localName", "localName")}} {{readOnlyInline}}</dt>
- <dd>Une {{domxref("DOMString","Chaîne de caractères")}} représentant la partie locale du nom qualifié de l'attribut.</dd>
- <dt>{{domxref("Attr.prefix", "prefix")}} {{readOnlyInline}}</dt>
- <dd>Une {{domxref("DOMString","Chaîne de caractères")}} représentant  le préfixe de l'espace nom de l'attribut, ou <code>null</code> si aucun préfixe n'est spécifié.</dd>
- <dt>{{domxref("Attr.ownerElement", "ownerElement")}} {{readOnlyInline}}</dt>
- <dd>L'élément contenant l'attribut.</dd>
-</dl>
-
-<div class="note">
-<p><strong>Note :</strong> DOM Niveau 4 a supprimé cette propriété . L'hypothèse était que puisque nous obtenons un objet Attr d'un {{domxref("Element")}}, nous devrions déjà connaître les éléments associés.<br>
- Comme cela n'est pas vrai quand les objets <code>Attr</code>  sont retournés par {{domxref("Document.evaluate")}}, le DOM Living Standard a réintroduit la propriété.</p>
-
-<p>Gecko affiche une note de dépréciation à partir de Gecko 7.0 {{geckoRelease("7.0")}}. Cette note a été supprimée dans Gecko 49.0 {{geckoRelease("49.0")}}.</p>
-</div>
-
-<dl>
- <dt>{{domxref("Attr.specified", "specified")}} {{readOnlyInline}}</dt>
- <dd>Cette propriété renvoie toujours la valeur <code>true</code>. À l'origine, elle renvoyait true si l'attribut était explicitement spécifié dans le code source ou par un script, et <code>false</code> si sa valeur provenait de la valeur par défaut définie dans la DTD du document.</dd>
- <dt>{{domxref("Attr.value", "Value")}}</dt>
- <dd>La valeur de l'attribut.</dd>
-</dl>
-
-<div class="note">
-<p><strong>Note:</strong> DOM Niveau 3 a défini <code>namespaceURI</code>, <code>localName</code> et <code>prefix</code> sur l'interface {{domxref("Node")}}. Dans DOM4 ils ont été déplacés vers <code>Attr</code>.</p>
-
-<p>Cette modification est implémentée dans Chrome depuis la version 46.0 et Firefox à partir de la version 48.0.</p>
-</div>
-
-<h2 id="Propriétés_et_méthodes_dépréciées">Propriétés et méthodes dépréciées</h2>
-
-<p>Les propriétés suivantes ont été dépréciées. Si elle est disponible, la méthode ou propriété de remplacement appropriée est fournie.</p>
-
-<dl>
- <dt><code>attributes</code></dt>
- <dd>Cette propriété retourne désormais toujours <code>NULL</code>.</dd>
- <dt><code>childNodes </code> {{obsolete_inline(14)}}</dt>
- <dd>Cette propriété retourne désormais toujours <code>un</code> {{domxref("NodeList")}}  vide.</dd>
- <dt><code>firstChild </code> {{obsolete_inline(14)}}</dt>
- <dd>Cette propriété retourne désormais toujours <code>NULL</code>.</dd>
- <dt><code>isId</code> {{readOnlyInline}}</dt>
- <dd>Indique si l'attribut est un "attribut ID". Un "attribut ID" étant un attribut dont la valeur devrait être unique dans un document DOM. En HTML DOM, "id" est le seul attribut ID, mais les documents XML peuvent en définir d'autres. Qu'un attribut soit unique ou non est souvent déterminé par  un {{Glossary("DTD")}}  ou une autre description de schéma.</dd>
- <dt><code>lastChild </code> {{obsolete_inline(14)}}</dt>
- <dd>Cette propriété retourne désormais toujours <code>NULL</code>.</dd>
- <dt><code>nextSibling</code></dt>
- <dd>Cette propriété retourne désormais toujours <code>NULL</code>.</dd>
- <dt><code>nodeName</code></dt>
- <dd>Utilisez {{domxref("Attr.name")}} à la place.</dd>
- <dt><code>nodeType</code></dt>
- <dd>Cette propriété retourne toujours 2. (<code>ATTRIBUTE_NODE</code>).</dd>
- <dt><code>nodeValue</code></dt>
- <dd>Utilisez {{domxref("Attr.value")}} à la place.</dd>
- <dt><code>ownerDocument</code></dt>
- <dd>Vous n'auriez pas dû l'utiliser en premier lieu, donc cela ne devrait pas vous ennuyer qu'il soit retiré.</dd>
- <dt><code>parentNode</code></dt>
- <dd>Cette propriété retourne désormais toujours NULL.</dd>
- <dt><code>previousSibling</code></dt>
- <dd>Cette propriété retourne désormais toujours NULL.</dd>
- <dt><code>schemaTypeInfo</code> {{obsolete_inline}} {{readOnlyInline}}</dt>
- <dd>Les informations de type associées à cet attribut. Bien que l'information de type contenue dans cet attribut soit garantie après le chargement du document ou l'appel de {{domxref("Document.normalizeDocument")}}, cette propriété peut ne pas être fiable si le nœud a été déplacé.</dd>
- <dt><code>specified</code></dt>
- <dd>Cette propriété retourne désormais toujours true.</dd>
- <dt><code>textContent</code></dt>
- <dd>Utilisez {{domxref ("Attr.value")}} à la place.</dd>
-</dl>
-
-<p><br>
- Les méthodes suivantes ont été dépréciées:</p>
-
-<dl>
- <dt><code>appendChild() </code> {{obsolete_inline(14)}}</dt>
- <dd>Modifiez à la place la valeur de {{domxref ("Attr.value")}}.</dd>
- <dt><code>cloneNode()</code></dt>
- <dd>Vous n'auriez pas dû l'utiliser en premier lieu, donc cela ne devrait pas vous ennuyer qu'il soit retiré.</dd>
- <dt><code>createAttribute()</code></dt>
- <dd>Utilisez {{domxref("Attr.setAttribute()")}} à la place.</dd>
- <dt><code>createAttributeNS()</code></dt>
- <dd>Utilisez {{domxref("Attr.setAttributeNS()")}} à la place.</dd>
- <dt><code>getAttributeNode()</code></dt>
- <dd>Utilisez {{domxref("Attr.getAttribute()")}} à la place.</dd>
- <dt><code>getAttributeNodeNS()</code></dt>
- <dd>Utilisez {{domxref("Attr.getAttributeNS()")}} à la place.</dd>
- <dt><code>hasAttributes() </code>{{obsolete_inline("21.0")}}</dt>
- <dd>Cette méthode retourne désormais toujours false.</dd>
- <dt><code>hasChildNodes()</code></dt>
- <dd>Cette méthode retourne désormais toujours false.</dd>
- <dt><code>insertBefore()</code></dt>
- <dd>Modifiez à la place la valeur de {{domxref ("Attr.value")}}.</dd>
- <dt><code>isSupported()</code></dt>
- <dd>Vous n'auriez pas dû l'utiliser en premier lieu, donc cela ne devrait pas vous ennuyer qu'il soit retiré.</dd>
- <dt><code>isEqualNode()</code></dt>
- <dd>Vous n'auriez pas dû l'utiliser en premier lieu, donc cela ne devrait pas vous ennuyer qu'il soit retiré.</dd>
- <dt><code>normalize()</code></dt>
- <dd>Vous n'auriez pas dû l'utiliser en premier lieu, donc cela ne devrait pas vous ennuyer qu'il soit retiré.</dd>
- <dt><code>removeAttributeNode()</code></dt>
- <dd>Utilisez {{domxref("Attr.removeAttribute()")}} à la place.</dd>
- <dt><code>removeChild() </code> {{obsolete_inline(14)}}</dt>
- <dd>Modifiez à la place la valeur de {{domxref("Attr.value")}}.</dd>
- <dt><code>replaceChild() </code> {{obsolete_inline(14)}}</dt>
- <dd>Modifiez à la place la valeur de {{domxref("Attr.value")}}.</dd>
- <dt><code>setAttributeNode()</code></dt>
- <dd>Utilisez {{domxref("Attr.setAttribute()")}} à la place.</dd>
- <dt><code>setAttributeNodeNS()</code></dt>
- <dd>Utilisez {{domxref("Attr.setAttributeNS()")}} à la place.</dd>
-</dl>
-
-<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("DOM WHATWG", "#interface-attr", "Attr")}}</td>
-   <td>{{Spec2("DOM WHATWG")}}</td>
-   <td>Ajoute la propriété <code>ownerElement</code> property</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("DOM4", "#interface-attr", "Attr")}}</td>
-   <td>{{Spec2("DOM4")}}</td>
-   <td>A déplacé les <code>namespaceURI</code>, <code>prefix</code> et <code>localName</code> de {{domxref("Node")}} vers cet API et supprimé <code>ownerElement</code>, <code>schemaTypeInfo</code> et <code>isId</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("DOM3 Core", "core.html#ID-637646024", "Attr")}}</td>
-   <td>{{Spec2("DOM3 Core")}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Attr")}}</p>
+{{APIRef("DOM")}}
+
+Ce type représente un attribut d'un élément DOM comme un objet. Dans la plupart des méthodes DOM, vous auriez probablement récupéré l'attribut directement comme une chaîne (par exemple, {{domxref ("element.getAttribute()")}}, mais certaines fonctions (par exemple, {{domxref ("element.getAttributeNode()" )}}) ou des moyens d'itération donnent des types Attr.
+
+> **Attention :** À partir de Gecko 7.0 {{geckoRelease ("7.0")}}, ceux qui vont être retirés afficheront des messages d'avertissement dans la console. Vous devriez modifier votre code en conséquence. Voir {{anch("Propriétés et méthodes dépréciées")}} pour une liste complète.
+
+## Propriétés
+
+- {{domxref("Attr.name", "name")}} {{readOnlyInline}}
+  - : Le nom de l'attribut.
+- {{domxref("Attr.namespaceURI", "namespaceURI")}} {{readOnlyInline}}
+  - : Une {{domxref("DOMString","Chaîne de caractères")}} représentant l'URI de l'espace nom de l'attribut ou `null` s'il n'y a pas d'espace nom.
+- {{domxref("Attr.localName", "localName")}} {{readOnlyInline}}
+  - : Une {{domxref("DOMString","Chaîne de caractères")}} représentant la partie locale du nom qualifié de l'attribut.
+- {{domxref("Attr.prefix", "prefix")}} {{readOnlyInline}}
+  - : Une {{domxref("DOMString","Chaîne de caractères")}} représentant le préfixe de l'espace nom de l'attribut, ou `null` si aucun préfixe n'est spécifié.
+- {{domxref("Attr.ownerElement", "ownerElement")}} {{readOnlyInline}}
+  - : L'élément contenant l'attribut.
+
+> **Note :** DOM Niveau 4 a supprimé cette propriété . L'hypothèse était que puisque nous obtenons un objet Attr d'un {{domxref("Element")}}, nous devrions déjà connaître les éléments associés.
+> Comme cela n'est pas vrai quand les objets `Attr`  sont retournés par {{domxref("Document.evaluate")}}, le DOM Living Standard a réintroduit la propriété.
+>
+> Gecko affiche une note de dépréciation à partir de Gecko 7.0 {{geckoRelease("7.0")}}. Cette note a été supprimée dans Gecko 49.0 {{geckoRelease("49.0")}}.
+
+- {{domxref("Attr.specified", "specified")}} {{readOnlyInline}}
+  - : Cette propriété renvoie toujours la valeur `true`. À l'origine, elle renvoyait true si l'attribut était explicitement spécifié dans le code source ou par un script, et `false` si sa valeur provenait de la valeur par défaut définie dans la DTD du document.
+- {{domxref("Attr.value", "Value")}}
+  - : La valeur de l'attribut.
+
+> **Note :** DOM Niveau 3 a défini `namespaceURI`, `localName` et `prefix` sur l'interface {{domxref("Node")}}. Dans DOM4 ils ont été déplacés vers `Attr`.
+>
+> Cette modification est implémentée dans Chrome depuis la version 46.0 et Firefox à partir de la version 48.0.
+
+## Propriétés et méthodes dépréciées
+
+Les propriétés suivantes ont été dépréciées. Si elle est disponible, la méthode ou propriété de remplacement appropriée est fournie.
+
+- `attributes`
+  - : Cette propriété retourne désormais toujours `NULL`.
+- `childNodes `{{obsolete_inline(14)}}
+  - : Cette propriété retourne désormais toujours `un` {{domxref("NodeList")}}  vide.
+- `firstChild `{{obsolete_inline(14)}}
+  - : Cette propriété retourne désormais toujours `NULL`.
+- `isId` {{readOnlyInline}}
+  - : Indique si l'attribut est un "attribut ID". Un "attribut ID" étant un attribut dont la valeur devrait être unique dans un document DOM. En HTML DOM, "id" est le seul attribut ID, mais les documents XML peuvent en définir d'autres. Qu'un attribut soit unique ou non est souvent déterminé par  un {{Glossary("DTD")}}  ou une autre description de schéma.
+- `lastChild `{{obsolete_inline(14)}}
+  - : Cette propriété retourne désormais toujours `NULL`.
+- `nextSibling`
+  - : Cette propriété retourne désormais toujours `NULL`.
+- `nodeName`
+  - : Utilisez {{domxref("Attr.name")}} à la place.
+- `nodeType`
+  - : Cette propriété retourne toujours 2. (`ATTRIBUTE_NODE`).
+- `nodeValue`
+  - : Utilisez {{domxref("Attr.value")}} à la place.
+- `ownerDocument`
+  - : Vous n'auriez pas dû l'utiliser en premier lieu, donc cela ne devrait pas vous ennuyer qu'il soit retiré.
+- `parentNode`
+  - : Cette propriété retourne désormais toujours NULL.
+- `previousSibling`
+  - : Cette propriété retourne désormais toujours NULL.
+- `schemaTypeInfo` {{obsolete_inline}} {{readOnlyInline}}
+  - : Les informations de type associées à cet attribut. Bien que l'information de type contenue dans cet attribut soit garantie après le chargement du document ou l'appel de {{domxref("Document.normalizeDocument")}}, cette propriété peut ne pas être fiable si le nœud a été déplacé.
+- `specified`
+  - : Cette propriété retourne désormais toujours true.
+- `textContent`
+  - : Utilisez {{domxref ("Attr.value")}} à la place.
+
+Les méthodes suivantes ont été dépréciées:
+
+- `appendChild() `{{obsolete_inline(14)}}
+  - : Modifiez à la place la valeur de {{domxref ("Attr.value")}}.
+- `cloneNode()`
+  - : Vous n'auriez pas dû l'utiliser en premier lieu, donc cela ne devrait pas vous ennuyer qu'il soit retiré.
+- `createAttribute()`
+  - : Utilisez {{domxref("Attr.setAttribute()")}} à la place.
+- `createAttributeNS()`
+  - : Utilisez {{domxref("Attr.setAttributeNS()")}} à la place.
+- `getAttributeNode()`
+  - : Utilisez {{domxref("Attr.getAttribute()")}} à la place.
+- `getAttributeNodeNS()`
+  - : Utilisez {{domxref("Attr.getAttributeNS()")}} à la place.
+- `hasAttributes() `{{obsolete_inline("21.0")}}
+  - : Cette méthode retourne désormais toujours false.
+- `hasChildNodes()`
+  - : Cette méthode retourne désormais toujours false.
+- `insertBefore()`
+  - : Modifiez à la place la valeur de {{domxref ("Attr.value")}}.
+- `isSupported()`
+  - : Vous n'auriez pas dû l'utiliser en premier lieu, donc cela ne devrait pas vous ennuyer qu'il soit retiré.
+- `isEqualNode()`
+  - : Vous n'auriez pas dû l'utiliser en premier lieu, donc cela ne devrait pas vous ennuyer qu'il soit retiré.
+- `normalize()`
+  - : Vous n'auriez pas dû l'utiliser en premier lieu, donc cela ne devrait pas vous ennuyer qu'il soit retiré.
+- `removeAttributeNode()`
+  - : Utilisez {{domxref("Attr.removeAttribute()")}} à la place.
+- `removeChild() `{{obsolete_inline(14)}}
+  - : Modifiez à la place la valeur de {{domxref("Attr.value")}}.
+- `replaceChild() `{{obsolete_inline(14)}}
+  - : Modifiez à la place la valeur de {{domxref("Attr.value")}}.
+- `setAttributeNode()`
+  - : Utilisez {{domxref("Attr.setAttribute()")}} à la place.
+- `setAttributeNodeNS()`
+  - : Utilisez {{domxref("Attr.setAttributeNS()")}} à la place.
+
+## Spécifications
+
+| Spécification                                                                    | Statut                           | Commentaire                                                                                                                                            |
+| -------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| {{SpecName("DOM WHATWG", "#interface-attr", "Attr")}}         | {{Spec2("DOM WHATWG")}} | Ajoute la propriété `ownerElement` property                                                                                                            |
+| {{SpecName("DOM4", "#interface-attr", "Attr")}}                 | {{Spec2("DOM4")}}         | A déplacé les `namespaceURI`, `prefix` et `localName` de {{domxref("Node")}} vers cet API et supprimé `ownerElement`, `schemaTypeInfo` et `isId`. |
+| {{SpecName("DOM3 Core", "core.html#ID-637646024", "Attr")}} | {{Spec2("DOM3 Core")}}     | Définition initiale                                                                                                                                    |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Attr")}}
diff --git a/files/fr/web/api/attr/localname/index.md b/files/fr/web/api/attr/localname/index.md
index c23a595af4..a2f6f2e717 100644
--- a/files/fr/web/api/attr/localname/index.md
+++ b/files/fr/web/api/attr/localname/index.md
@@ -8,78 +8,61 @@ tags:
   - Reference
 translation_of: Web/API/Attr/localName
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p>La propriété <code><strong>Attr.localName</strong></code>, en lecture seule, renvoie la partie locale du nom qualifié d'un élément.</p>
+La propriété **`Attr.localName`**, en lecture seule, renvoie la partie locale du nom qualifié d'un élément.
 
-<div class="note">
-<p><strong>Note :</strong> Avant DOM4, cette API était définie dans l'interface {{domxref("Node")}}.</p>
-</div>
+> **Note :** Avant DOM4, cette API était définie dans l'interface {{domxref("Node")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var>name</var> = <var>attribute</var>.localName
-</pre>
+    name = attribute.localName
 
-<h3 id="Valeur_renvoyée">Valeur renvoyée</h3>
+### Valeur renvoyée
 
-<p>Une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> qui représente la partie locale du nom qualifié de l'élément.</p>
+Une {{domxref("DOMString")}} _(chaîne de caractères)_ qui représente la partie locale du nom qualifié de l'élément.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Cet exemple affiche "id" dans une  fenêtre d'alerte.</p>
+Cet exemple affiche "id" dans une  fenêtre d'alerte.
 
-<h3 id="Contenu_HTML">Contenu HTML</h3>
+### Contenu HTML
 
-<pre class="brush: html">&lt;button id="exemple"&gt;Clique ici&lt;/button&gt;</pre>
+```html
+<button id="exemple">Clique ici</button>
+```
 
-<h3 id="Contenu_JavaScript">Contenu JavaScript</h3>
+### Contenu JavaScript
 
-<pre class="brush: js">const element = document.querySelector("#exemple");
+```js
+const element = document.querySelector("#exemple");
 element.addEventListener("click", function() {
   const attribute = element.attributes[0];
   alert(attribute.localName);
 });
-</pre>
+```
 
-<p>{{ EmbedLiveSample('Exemple','100%',30) }}</p>
+{{ EmbedLiveSample('Exemple','100%',30) }}
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p>Le nom local d'un attribut est la partie du nom qualifié de cet attribut avant les deux points. les noms qualifiés sont utilisés en XML, dans les espaces de nom de certains documents.</p>
+Le nom local d'un attribut est la partie du nom qualifié de cet attribut avant les deux points. les noms qualifiés sont utilisés en XML, dans les espaces de nom de certains documents.
 
-<div class="note">
-<p><strong>Note :</strong> dans {{Gecko("1.9.2")}} et avant, cette propriété renvoie le nom en majuscule pour les attributs HTML du  DOM HTML (contrairement aux atttributs XHTML ). Dans les versions plus récentes, en accord avec HTML5, cette propriété renvoie la casse correspondante au DOM utilisé, c'est-à-dire en minuscule pour les attributs du DOM XHTMl et du DOM HTML.</p>
-</div>
+> **Note :** dans {{Gecko("1.9.2")}} et avant, cette propriété renvoie le nom en majuscule pour les attributs HTML du  DOM HTML (contrairement aux atttributs XHTML ). Dans les versions plus récentes, en accord avec HTML5, cette propriété renvoie la casse correspondante au DOM utilisé, c'est-à-dire en minuscule pour les attributs du DOM XHTMl et du DOM HTML.
 
-<h2 id="Spécifications">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('DOM4', '#interface-attr', 'Attr.localName')}}</td>
-   <td>{{Spec2('DOM4')}}</td>
-   <td>première définition</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                | Statut                   | Commentaire         |
+| ---------------------------------------------------------------------------- | ------------------------ | ------------------- |
+| {{SpecName('DOM4', '#interface-attr', 'Attr.localName')}} | {{Spec2('DOM4')}} | première définition |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Attr.localName")}}</p>
+{{Compat("api.Attr.localName")}}
 
-<h2 id="Voir_également">Voir également</h2>
+## Voir également
 
-<ul>
- <li>{{domxref("Attr.namespaceURI")}}</li>
- <li>{{domxref("Attr.prefix")}}</li>
- <li>{{domxref("Element.localName")}}</li>
- <li>{{domxref("Node.localName")}}</li>
-</ul>
+- {{domxref("Attr.namespaceURI")}}
+- {{domxref("Attr.prefix")}}
+- {{domxref("Element.localName")}}
+- {{domxref("Node.localName")}}
diff --git a/files/fr/web/api/attr/namespaceuri/index.md b/files/fr/web/api/attr/namespaceuri/index.md
index 73f89cbdeb..a8d555f0d8 100644
--- a/files/fr/web/api/attr/namespaceuri/index.md
+++ b/files/fr/web/api/attr/namespaceuri/index.md
@@ -8,67 +8,52 @@ tags:
   - namespaceURI
 translation_of: Web/API/Attr/namespaceURI
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p>La propriété en lecture seule <code><strong>Attr.namespaceURI</strong></code> retourne l'URI d'espace de nom de l'attribut, ou <code>null</code> si l'élément  n'est pas dans un espace de noms.</p>
+La propriété en lecture seule **`Attr.namespaceURI`** retourne l'URI d'espace de nom de l'attribut, ou `null` si l'élément  n'est pas dans un espace de noms.
 
-<div class="note">
-<p><strong>Note :</strong> Avant DOM4 cet API était défini dans l'interface {{domxref("Node")}}.</p>
-</div>
+> **Note :** Avant DOM4 cet API était défini dans l'interface {{domxref("Node")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var>namespace</var> = <var>attribute</var>.namespaceURI</pre>
+    namespace = attribute.namespaceURI
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Dans cet extrait de code, un attribut est examiné pour son {{domxref("localName")}} et son <code>namespaceURI</code>. Si le <code>namespaceURI</code> renvoie l'espace de noms XUL et le <code>localName</code> retourne "browser" (<em>navigateur</em>), alors le noeud est compris comme étant un <code>&lt;browser/&gt;</code> XUL.</p>
+Dans cet extrait de code, un attribut est examiné pour son {{domxref("localName")}} et son `namespaceURI`. Si le `namespaceURI` renvoie l'espace de noms XUL et le `localName` retourne "browser" (_navigateur_), alors le noeud est compris comme étant un `<browser/>` XUL.
 
-<pre class="brush:js">if (attribute.localName == "value" &amp;&amp;
+```js
+if (attribute.localName == "value" &&
     attribute.namespaceURI == "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul") {
   // ceci est une valeur XUL
-}</pre>
+}
+```
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p>Ce n'est pas une valeur calculée, mais le résultat d'une recherche d'espace de noms basée sur un examen des déclarations d'espace de noms dans la portée. L'URI de l'espace de noms d'un attribut est figé à l'heure de création de l'attribut.</p>
+Ce n'est pas une valeur calculée, mais le résultat d'une recherche d'espace de noms basée sur un examen des déclarations d'espace de noms dans la portée. L'URI de l'espace de noms d'un attribut est figé à l'heure de création de l'attribut.
 
-<p>Dans Firefox 3.5 et précédents, l'URI d'espace de nom pour les attributs HTML dans les documents HTML est <code>null</code>. Dans les versions ultérieures, en conformité avec HTML5, il est <code><a href="https://www.w3.org/1999/xhtml">https://www.w3.org/1999/xhtml</a></code> comme dans XHTML. {{gecko_minversion_inline("1.9.2")}}</p>
+Dans Firefox 3.5 et précédents, l'URI d'espace de nom pour les attributs HTML dans les documents HTML est `null`. Dans les versions ultérieures, en conformité avec HTML5, il est [`https://www.w3.org/1999/xhtml`](https://www.w3.org/1999/xhtml) comme dans XHTML. {{gecko_minversion_inline("1.9.2")}}
 
-<p>Vous pouvez créer un attribut avec le <code>namespaceURI</code> spécifié en utilisant la méthode de DOM niveau 2 {{domxref("Element.setAttributeNS")}}.</p>
+Vous pouvez créer un attribut avec le `namespaceURI` spécifié en utilisant la méthode de DOM niveau 2 {{domxref("Element.setAttributeNS")}}.
 
-<p>Selon la spécification <a href="https://www.w3.org/TR/xml-names11/">Namespaces en XML</a>, un attribut n'hérite pas de l'espace de noms de l'élément auquel il est attaché. Si un attribut n'est pas explicitement donné à un espace de noms, il n'a pas d'espace de noms.</p>
+Selon la spécification [Namespaces en XML](https://www.w3.org/TR/xml-names11/), un attribut n'hérite pas de l'espace de noms de l'élément auquel il est attaché. Si un attribut n'est pas explicitement donné à un espace de noms, il n'a pas d'espace de noms.
 
-<p>Le DOM ne gère pas ou n'applique pas la validation de l'espace de noms en soi. Il appartient à l'application DOM de faire toute validation nécessaire. Notez également que le préfixe d'espace de noms, une fois associé à un nœud particulier, ne peut pas être modifié.</p>
+Le DOM ne gère pas ou n'applique pas la validation de l'espace de noms en soi. Il appartient à l'application DOM de faire toute validation nécessaire. Notez également que le préfixe d'espace de noms, une fois associé à un nœud particulier, ne peut pas être modifié.
 
-<h2 id="Spécifications">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("DOM4", "#dom-element-namespaceuri", "Element.namespaceuri")}}</td>
-   <td>{{Spec2("DOM4")}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                    | Statut                   | Commentaire         |
+| ------------------------------------------------------------------------------------------------ | ------------------------ | ------------------- |
+| {{SpecName("DOM4", "#dom-element-namespaceuri", "Element.namespaceuri")}} | {{Spec2("DOM4")}} | Définition initiale |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Attr.namespaceURI")}}</p>
+{{Compat("api.Attr.namespaceURI")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("Attr.localName")}}</li>
- <li>{{domxref("Attr.prefix")}}</li>
- <li>{{domxref("Element.namespaceURI")}}</li>
- <li>{{domxref("Node.namespaceURI")}}</li>
-</ul>
+- {{domxref("Attr.localName")}}
+- {{domxref("Attr.prefix")}}
+- {{domxref("Element.namespaceURI")}}
+- {{domxref("Node.namespaceURI")}}
diff --git a/files/fr/web/api/attr/prefix/index.md b/files/fr/web/api/attr/prefix/index.md
index 92f9bcfe1b..94ebc28721 100644
--- a/files/fr/web/api/attr/prefix/index.md
+++ b/files/fr/web/api/attr/prefix/index.md
@@ -8,58 +8,41 @@ tags:
   - Reference
 translation_of: Web/API/Attr/prefix
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p>La propriété <strong><code>Attr.prefix </code></strong>en lecture seule renvoie le préfixe de l'espace de noms de l'attribut spécifié ou null si aucun préfixe n'est spécifié</p>
+La propriété **`Attr.prefix `**en lecture seule renvoie le préfixe de l'espace de noms de l'attribut spécifié ou null si aucun préfixe n'est spécifié
 
-<div class="note">
-<p><strong>Note :</strong> Avant DOM4, cette API a été définie dans l'interface {{domxref ("Node")}}.</p>
-</div>
+> **Note :** Avant DOM4, cette API a été définie dans l'interface {{domxref ("Node")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var>string</var> = <var>attribute</var>.prefix
-</pre>
+    string = attribute.prefix
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Le code suivant affiche "x" dans la console.</p>
+Le code suivant affiche "x" dans la console.
 
-<pre class="brush:xml">&lt;div x:id="example" onclick="console.log(this.attributes[0].prefix)"/&gt;
-</pre>
+```xml
+<div x:id="example" onclick="console.log(this.attributes[0].prefix)"/>
+```
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p>Cela ne fonctionnera que lorsqu'un analyseur conscient de l'espace de noms est utilisé, c'est-à-dire lorsqu'il s'agit d'un document avec un type MIME XML. Cela ne fonctionnera pas pour les documents HTML.</p>
+Cela ne fonctionnera que lorsqu'un analyseur conscient de l'espace de noms est utilisé, c'est-à-dire lorsqu'il s'agit d'un document avec un type MIME XML. Cela ne fonctionnera pas pour les documents HTML.
 
-<h2 id="Spécifications">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("DOM4", "#dom-attr-prefix", "Attr.prefix")}}</td>
-   <td>{{Spec2("DOM4")}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                            | Statut                   | Commentaire         |
+| ------------------------------------------------------------------------ | ------------------------ | ------------------- |
+| {{SpecName("DOM4", "#dom-attr-prefix", "Attr.prefix")}} | {{Spec2("DOM4")}} | Définition initiale |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Attr.prefix")}}</p>
+{{Compat("api.Attr.prefix")}}
 
-<h2 id="Voir_également">Voir également</h2>
+## Voir également
 
-<ul>
- <li>{{domxref("Attr.namespaceURI")}}</li>
- <li>{{domxref("Attr.localName")}}</li>
- <li>{{domxref("Element.prefix")}}</li>
- <li>{{domxref("Node.prefix")}}</li>
-</ul>
+- {{domxref("Attr.namespaceURI")}}
+- {{domxref("Attr.localName")}}
+- {{domxref("Element.prefix")}}
+- {{domxref("Node.prefix")}}
diff --git a/files/fr/web/api/audiobuffer/audiobuffer/index.md b/files/fr/web/api/audiobuffer/audiobuffer/index.md
index ce67efa5e8..cb565da1f0 100644
--- a/files/fr/web/api/audiobuffer/audiobuffer/index.md
+++ b/files/fr/web/api/audiobuffer/audiobuffer/index.md
@@ -3,47 +3,33 @@ title: AudioBuffer()
 slug: Web/API/AudioBuffer/AudioBuffer
 translation_of: Web/API/AudioBuffer/AudioBuffer
 ---
-<p>{{APIRef("Web Audio API")}}{{SeeCompatTable}}</p>
-
-<p>Le constructeur <strong><code>AudioBuffer</code></strong> créer un nouvel objet {{domxref("AudioBuffer")}}.</p>
-
-<h2 id="Syntax">Syntax</h2>
-
-<pre class="syntaxbox">var audioBuffer = new AudioBuffer([options]);
-var audioBuffer = new AudioBuffer(context[, options]);</pre>
-
-<h3 id="Parameters">Parameters</h3>
-
-<dl>
- <dt><em>context </em>{{obsolete_inline("")}}</dt>
- <dd>Référence à un {{domxref("AudioContext")}}. Ce paramètre a été supprimer de la specification. Consultez la section Compatibilité du navigateur pour plus de détails.</dd>
- <dt><em>options</em> {{optional_inline}}</dt>
- <dd>Les options sont les suivantes:
- <ul>
-  <li><code>length</code>:  Longueur de l'échantillonnage du tampon.</li>
-  <li><code>numberOfChannels</code>: Nombre de cannaux du buffer. La valeur par défaut est 1. </li>
-  <li><code>sampleRate</code>: Taux d'échantillonnage du buffer en Hz. La valeur par défaut est le taux d'échantillonnage du <code>context</code> utilisé dans la construction de cet objet </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">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Web Audio API','#AudioBuffer','AudioBuffer')}}</td>
-   <td>{{Spec2('Web Audio API')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_Navigateurs">Compatibilité des Navigateurs</h2>
-
-<p>{{Compat("api.AudioBuffer.AudioBuffer")}}</p>
+{{APIRef("Web Audio API")}}{{SeeCompatTable}}
+
+Le constructeur **`AudioBuffer`** créer un nouvel objet {{domxref("AudioBuffer")}}.
+
+## Syntax
+
+    var audioBuffer = new AudioBuffer([options]);
+    var audioBuffer = new AudioBuffer(context[, options]);
+
+### Parameters
+
+- *context* {{obsolete_inline("")}}
+  - : Référence à un {{domxref("AudioContext")}}. Ce paramètre a été supprimer de la specification. Consultez la section Compatibilité du navigateur pour plus de détails.
+- _options_ {{optional_inline}}
+
+  - : Les options sont les suivantes:
+
+    - `length`:  Longueur de l'échantillonnage du tampon.
+    - `numberOfChannels`: Nombre de cannaux du buffer. La valeur par défaut est 1.
+    - `sampleRate`: Taux d'échantillonnage du buffer en Hz. La valeur par défaut est le taux d'échantillonnage du `context` utilisé dans la construction de cet objet
+
+## Spécifications
+
+| Spécification                                                                | Statut                               | Commentaire         |
+| ---------------------------------------------------------------------------- | ------------------------------------ | ------------------- |
+| {{SpecName('Web Audio API','#AudioBuffer','AudioBuffer')}} | {{Spec2('Web Audio API')}} | Définition initiale |
+
+## Compatibilité des Navigateurs
+
+{{Compat("api.AudioBuffer.AudioBuffer")}}
diff --git a/files/fr/web/api/audiobuffer/copyfromchannel/index.md b/files/fr/web/api/audiobuffer/copyfromchannel/index.md
index 2ae87ca120..16936ddad9 100644
--- a/files/fr/web/api/audiobuffer/copyfromchannel/index.md
+++ b/files/fr/web/api/audiobuffer/copyfromchannel/index.md
@@ -8,55 +8,41 @@ tags:
   - Web Audio API
 translation_of: Web/API/AudioBuffer/copyFromChannel
 ---
-<p>{{ APIRef("Web Audio API") }}</p>
+{{ APIRef("Web Audio API") }}
 
-<p>La méthode <code>copyFromChannel() </code>de l'interface {{ domxref("AudioBuffer") }} copie les échantillons de l'un des canaux de l'<code>AudioBuffer</code> dans un tableau.</p>
+La méthode `copyFromChannel() `de l'interface {{ domxref("AudioBuffer") }} copie les échantillons de l'un des canaux de l'`AudioBuffer` dans un tableau.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>tableauDonnees</em>.copyFromChannel(<em>destination</em>,numeroCanal,decalageDebut);</pre>
+    tableauDonnees.copyFromChannel(destination,numeroCanal,decalageDebut);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><em>destination</em></dt>
- <dd>Un tableau {{domxref("Float32Array")}} dans lequel copier les données.</dd>
- <dt><em>channelNumber</em></dt>
- <dd>Le numéro du canal de l'AudioBuffer depuis lequel copier les données. Si <em>channelNumber</em> est supérieur ou égal à {{domxref("AudioBuffer.numberOfChannels")}}, une exception <code>INDEX_SIZE_ERR est</code> levée.</dd>
- <dt><em>startInChannel</em> {{optional_inline}}</dt>
- <dd>Un offset optionnel à partir duquel copier les données. Si la valeur de <em>startInChannel</em> est supérieure à {{domxref("AudioBuffer.length")}}, une exception <code>INDEX_SIZE_ERR</code> est levée.</dd>
-</dl>
+- _destination_
+  - : Un tableau {{domxref("Float32Array")}} dans lequel copier les données.
+- _channelNumber_
+  - : Le numéro du canal de l'AudioBuffer depuis lequel copier les données. Si *channelNumber* est supérieur ou égal à {{domxref("AudioBuffer.numberOfChannels")}}, une exception `INDEX_SIZE_ERR est` levée.
+- _startInChannel_ {{optional_inline}}
+  - : Un offset optionnel à partir duquel copier les données. Si la valeur de *startInChannel* est supérieure à {{domxref("AudioBuffer.length")}}, une exception `INDEX_SIZE_ERR` est levée.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">var tableauDonnees = contextAudio.createBuffer(2, frameCount, contextAudio.sampleRate);
+```js
+var tableauDonnees = contextAudio.createBuffer(2, frameCount, contextAudio.sampleRate);
 var autreTableau = new Float32Array(length);
 tableauDonnees.copyFromChannel(autreTableau,1,0);
-</pre>
-
-<h2 id="Spécification">Spécification</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Web Audio API', '#widl-AudioBuffer-copyFromChannel-void-Float32Array-destination-long-channelNumber-unsigned-long-startInChannel', 'copyFromChannel')}}</td>
-   <td>{{Spec2('Web Audio API')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
-
-<p>{{Compat("api.AudioBuffer.copyFromChannel")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
-</ul>
+```
+
+## Spécification
+
+| Spécification                                                                                                                                                                                                            | Statut                               | Commentaire |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ----------- |
+| {{SpecName('Web Audio API', '#widl-AudioBuffer-copyFromChannel-void-Float32Array-destination-long-channelNumber-unsigned-long-startInChannel', 'copyFromChannel')}} | {{Spec2('Web Audio API')}} |             |
+
+## Compatibilité navigateurs
+
+{{Compat("api.AudioBuffer.copyFromChannel")}}
+
+## Voir aussi
+
+- [Utiliser la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API)
diff --git a/files/fr/web/api/audiobuffer/copytochannel/index.md b/files/fr/web/api/audiobuffer/copytochannel/index.md
index 38a6393ebc..2dffa72fa8 100644
--- a/files/fr/web/api/audiobuffer/copytochannel/index.md
+++ b/files/fr/web/api/audiobuffer/copytochannel/index.md
@@ -3,58 +3,44 @@ title: AudioBuffer.copyToChannel()
 slug: Web/API/AudioBuffer/copyToChannel
 translation_of: Web/API/AudioBuffer/copyToChannel
 ---
-<p>{{ APIRef("Web Audio API") }}</p>
+{{ APIRef("Web Audio API") }}
 
-<p>La méthode <code>copyToChannel() </code>de l'interface {{ domxref("AudioBuffer") }} copie les échantillons du tableau source vers le canal de l'<code>AudioBuffer</code> spécifié.</p>
+La méthode `copyToChannel() `de l'interface {{ domxref("AudioBuffer") }} copie les échantillons du tableau source vers le canal de l'`AudioBuffer` spécifié.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>myArrayBuffer</em>.copyToChannel(<em>source</em>, <em>channelNumber</em>, <em>startInChannel</em>);</pre>
+    myArrayBuffer.copyToChannel(source, channelNumber, startInChannel);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><em>source</em></dt>
- <dd>Le tableau {{jsxref("Float32Array")}} depuis lequel copier les données.</dd>
- <dt><em>channelNumber</em></dt>
- <dd>Le numéro du canal de l'{{domxref("AudioBuffer")}} dans lequel copier les données. Si <em>channelNumber</em> est supérieur ou égal à {{domxref("AudioBuffer.numberOfChannels")}}, une exception <code>INDEX_SIZE_ERR est</code> levée.</dd>
- <dt><em>startInChannel {{optional_inline}}</em></dt>
- <dd>Un offset optionnel à partir duquel copier les données. Si la valeur de <em>startInChannel</em> est supérieure à {{domxref("AudioBuffer.length")}}, une exception <code>INDEX_SIZE_ERR</code> est levée.</dd>
-</dl>
+- _source_
+  - : Le tableau {{jsxref("Float32Array")}} depuis lequel copier les données.
+- _channelNumber_
+  - : Le numéro du canal de l'{{domxref("AudioBuffer")}} dans lequel copier les données. Si *channelNumber* est supérieur ou égal à {{domxref("AudioBuffer.numberOfChannels")}}, une exception `INDEX_SIZE_ERR est` levée.
+- _startInChannel {{optional_inline}}_
+  - : Un offset optionnel à partir duquel copier les données. Si la valeur de *startInChannel* est supérieure à {{domxref("AudioBuffer.length")}}, une exception `INDEX_SIZE_ERR` est levée.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">var tableauDonnees = contextAudio.createBuffer(2, frameCount, contextAudio.sampleRate);
+```js
+var tableauDonnees = contextAudio.createBuffer(2, frameCount, contextAudio.sampleRate);
 var autreTableau = new Float32Array;
 // Copy les données depuis le second canal vers le second tableau.
 tableauDonnees.copyFromChannel(autreTableau,1,0);
 // Copie les données depuis le second tableau vers le premier canal du premier tableau. A présent les deux canaux ont des données identiques.
 tableauDonnees.copyToChannel (autreTableau,0,0);
-</pre>
-
-<h2 id="Spécification">Spécification</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Web Audio API', '#widl-AudioBuffer-copyToChannel-void-Float32Array-source-long-channelNumber-unsigned-long-startInChannel', 'copyToChannel')}}</td>
-   <td>{{Spec2('Web Audio API')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
-
-<p>{{Compat("api.AudioBuffer.copyToChannel")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
-</ul>
+```
+
+## Spécification
+
+| Spécification                                                                                                                                                                                                | Statut                               | Commentaire |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ----------- |
+| {{SpecName('Web Audio API', '#widl-AudioBuffer-copyToChannel-void-Float32Array-source-long-channelNumber-unsigned-long-startInChannel', 'copyToChannel')}} | {{Spec2('Web Audio API')}} |             |
+
+## Compatibilité navigateurs
+
+{{Compat("api.AudioBuffer.copyToChannel")}}
+
+## Voir aussi
+
+- [Utiliser la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API)
diff --git a/files/fr/web/api/audiobuffer/duration/index.md b/files/fr/web/api/audiobuffer/duration/index.md
index 447932473d..ffb7fdaeae 100644
--- a/files/fr/web/api/audiobuffer/duration/index.md
+++ b/files/fr/web/api/audiobuffer/duration/index.md
@@ -3,24 +3,25 @@ title: AudioBuffer.duration
 slug: Web/API/AudioBuffer/duration
 translation_of: Web/API/AudioBuffer/duration
 ---
-<p>{{ APIRef("Web Audio API") }}</p>
+{{ APIRef("Web Audio API") }}
 
-<div>
-<p>La propriéré <code>duration</code>  de l'interface {{ domxref("AudioBuffer") }} renvoie un nombre flottant à double précision représentant la durée, en secondes, des données PCM stockées dans le buffer.</p>
-</div>
+La propriéré `duration`  de l'interface {{ domxref("AudioBuffer") }} renvoie un nombre flottant à double précision représentant la durée, en secondes, des données PCM stockées dans le buffer.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">var tableauTampon = audioCtx.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate);
-tableauTampon.duration;</pre>
+```js
+var tableauTampon = audioCtx.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate);
+tableauTampon.duration;
+```
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>Nombre flottant à double précision.</p>
+Nombre flottant à double précision.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">// Stereo
+```js
+// Stereo
 var nombreCanaux = 2;
 
 // Crée une mémoire tampon vide de 2 secondes
@@ -31,10 +32,10 @@ var tableauDonnees = audioCtx.createBuffer(nombreCanaux, nombreFrames, contexteA
 bouton.onclick = function() {
   // remplit la mémoire tampon avec du bruit blanc
   // valeurs aléatoires entre -1.0 et 1.0
-  for (var canal = 0; canal &lt; nombreCanaux; canal++) {
+  for (var canal = 0; canal < nombreCanaux; canal++) {
     // génère le tableau contenant les données
     var tampon = tableauDonnees.getChannelData(canal);
-    for (var i = 0; i &lt; nombreFrames; i++) {
+    for (var i = 0; i < nombreFrames; i++) {
       // Math.random() donne une valeur comprise entre [0; 1.0]
       // l'audio doit être compris entre [-1.0; 1.0]
       tampon[i] = Math.random() * 2 - 1;
@@ -42,31 +43,18 @@ bouton.onclick = function() {
   }
   console.log(tableauDonnees.duration);
 }
-</pre>
+```
 
-<h2 id="Spécification">Spécification</h2>
+## Spécification
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Web Audio API', '#widl-AudioBuffer-duration', 'duration')}}</td>
-   <td>{{Spec2('Web Audio API')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                    | Statut                               | Commentaire |
+| ------------------------------------------------------------------------------------------------ | ------------------------------------ | ----------- |
+| {{SpecName('Web Audio API', '#widl-AudioBuffer-duration', 'duration')}} | {{Spec2('Web Audio API')}} |             |
 
-<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+## Compatibilité navigateurs
 
-<p>{{Compat("api.AudioBuffer.duration")}}</p>
+{{Compat("api.AudioBuffer.duration")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
-</ul>
+- [Utiliser la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API)
diff --git a/files/fr/web/api/audiobuffer/getchanneldata/index.md b/files/fr/web/api/audiobuffer/getchanneldata/index.md
index 7f64f907a0..67b9c0d234 100644
--- a/files/fr/web/api/audiobuffer/getchanneldata/index.md
+++ b/files/fr/web/api/audiobuffer/getchanneldata/index.md
@@ -3,24 +3,27 @@ title: AudioBuffer.getChannelData()
 slug: Web/API/AudioBuffer/getChannelData
 translation_of: Web/API/AudioBuffer/getChannelData
 ---
-<p>{{ APIRef("Web Audio API") }}</p>
+{{ APIRef("Web Audio API") }}
 
-<p>La méthode <code>getChannelData() </code>de l'interface {{ domxref("AudioBuffer") }} renvoie un {{domxref("Float32Array")}} contenant les données PCM associées au canal spécifié (0 correspondant au premier canal).</p>
+La méthode `getChannelData() `de l'interface {{ domxref("AudioBuffer") }} renvoie un {{domxref("Float32Array")}} contenant les données PCM associées au canal spécifié (0 correspondant au premier canal).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">var tableauDonnees = contexteAudio.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate);
-var tampon = tableauDonnees.getChannelData(canal);</pre>
+```js
+var tableauDonnees = contexteAudio.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate);
+var tampon = tableauDonnees.getChannelData(canal);
+```
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>Un {{domxref("Float32Array")}}.</p>
+Un {{domxref("Float32Array")}}.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Dans l'exemple suivant crée un buffer de 2 secondes, le remplit avec du bruit blanc puis le lit via un {{ domxref("AudioBufferSourceNode") }}. Vous pouvez aussi <a href="http://mdn.github.io/audio-buffer/">exécuter le code</a>, or <a href="https://github.com/mdn/audio-buffer">voir le code source</a>.</p>
+Dans l'exemple suivant crée un buffer de 2 secondes, le remplit avec du bruit blanc puis le lit via un {{ domxref("AudioBufferSourceNode") }}. Vous pouvez aussi [exécuter le code](http://mdn.github.io/audio-buffer/), or [voir le code source](https://github.com/mdn/audio-buffer).
 
-<pre class="brush: js">var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+```js
+var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
 var bouton = document.querySelector('button');
 var preformate = document.querySelector('pre');
 var monScript = document.querySelector('script');
@@ -38,10 +41,10 @@ var tableauDonnees = contexteAudio.createBuffer(nombreCanaux, nombreFrames, cont
 bouton.onclick = function() {
   // remplit la mémoire tampon avec du bruit blanc
   // valeurs aléatoires entre -1.0 et 1.0
-  for (var canal = 0; canal &lt; nombreCanaux; canal++) {
+  for (var canal = 0; canal < nombreCanaux; canal++) {
     // génère le tableau contenant les données
     var tampon = tableauDonnees.getChannelData(canal);
-    for (var i = 0; i &lt; nombreFrames; i++) {
+    for (var i = 0; i < nombreFrames; i++) {
       // Math.random() donne une valeur comprise entre [0; 1.0]
       // l'audio doit être compris entre [-1.0; 1.0]
       tampon[i] = Math.random() * 2 - 1;
@@ -61,38 +64,24 @@ bouton.onclick = function() {
 
   // lance la lecture du so
   source.start();
-}</pre>
+}
+```
 
-<h2 id="Paramètres">Paramètres</h2>
+## Paramètres
 
-<dl>
- <dt>channel</dt>
- <dd>The channel property is an index representing the particular channel to get data for. An index value of 0 represents the first channel. If the <code>channel</code> index value is greater than of equal to {{domxref("AudioBuffer.numberOfChannels")}}, an <code>INDEX_SIZE_ERR</code> exception will be thrown.</dd>
-</dl>
+- channel
+  - : The channel property is an index representing the particular channel to get data for. An index value of 0 represents the first channel. If the `channel` index value is greater than of equal to {{domxref("AudioBuffer.numberOfChannels")}}, an `INDEX_SIZE_ERR` exception will be thrown.
 
-<h2 id="Spécification">Spécification</h2>
+## Spécification
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Web Audio API', '#widl-AudioBuffer-getChannelData-Float32Array-unsigned-long-channel', 'getChannelData')}}</td>
-   <td>{{Spec2('Web Audio API')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                                                | Statut                               | Commentaire |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ----------- |
+| {{SpecName('Web Audio API', '#widl-AudioBuffer-getChannelData-Float32Array-unsigned-long-channel', 'getChannelData')}} | {{Spec2('Web Audio API')}} |             |
 
-<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+## Compatibilité navigateurs
 
-<p>{{Compat("api.AudioBuffer.getChannelData")}}</p>
+{{Compat("api.AudioBuffer.getChannelData")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
-</ul>
+- [Utiliser la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API)
diff --git a/files/fr/web/api/audiobuffer/index.md b/files/fr/web/api/audiobuffer/index.md
index faa4f0f309..b914ca7a11 100644
--- a/files/fr/web/api/audiobuffer/index.md
+++ b/files/fr/web/api/audiobuffer/index.md
@@ -8,48 +8,43 @@ tags:
   - Web Audio API
 translation_of: Web/API/AudioBuffer
 ---
-<p>{{APIRef("Web Audio API")}}</p>
+{{APIRef("Web Audio API")}}
 
-<p>L'interface AudioBuffer représente une ressource audio stockée en mémoire, créée à partir d'un fichier audio avec la méthode {{ domxref("AudioContext.decodeAudioData()") }}, ou à partir de données brutes avec {{ domxref("AudioContext.createBuffer()") }}. Une fois mises en mémoire dans un AudioBuffer, les données audio sont transférées dans un {{ domxref("AudioBufferSourceNode") }} afin d'être lues.<br>
- <br>
- Ce type d'objet est conçu pour contenir de petit extraits audio, durant généralement moins de 45s. Pour les sons plus longs, les objets implémentant {{domxref ("MediaAudioElementSourceNode")}} sont plus adaptés. La mémoire tampon contient des données au format non entrelacé IEEE 32-bit PCM linéaire, avec une portée nominale comprise entre -1 et +1. S'il y a plusieurs canaux, ils sont stockés dans des mémoires-tampon distinctes.</p>
+L'interface AudioBuffer représente une ressource audio stockée en mémoire, créée à partir d'un fichier audio avec la méthode {{ domxref("AudioContext.decodeAudioData()") }}, ou à partir de données brutes avec {{ domxref("AudioContext.createBuffer()") }}. Une fois mises en mémoire dans un AudioBuffer, les données audio sont transférées dans un {{ domxref("AudioBufferSourceNode") }} afin d'être lues.
 
-<h2 id="Constructeur">Constructeur</h2>
+Ce type d'objet est conçu pour contenir de petit extraits audio, durant généralement moins de 45s. Pour les sons plus longs, les objets implémentant {{domxref ("MediaAudioElementSourceNode")}} sont plus adaptés. La mémoire tampon contient des données au format non entrelacé IEEE 32-bit PCM linéaire, avec une portée nominale comprise entre -1 et +1. S'il y a plusieurs canaux, ils sont stockés dans des mémoires-tampon distinctes.
 
-<dl>
- <dt>{{domxref("AudioBuffer.AudioBuffer", "AudioBuffer()")}}</dt>
- <dd>Crée et retourne un nouvel objet <code>AudioBuffer</code>.</dd>
-</dl>
+## Constructeur
 
-<h2 id="Propriétés">Propriétés</h2>
+- {{domxref("AudioBuffer.AudioBuffer", "AudioBuffer()")}}
+  - : Crée et retourne un nouvel objet `AudioBuffer`.
 
-<dl>
- <dt>{{domxref("AudioBuffer.sampleRate")}} {{readonlyInline}}</dt>
- <dd>Retourne un nombre flottant qui représente la fréquence d'échantillonnage, en échantillons par seconde, des données PCM stockées dans la mémoire tampon.</dd>
- <dt>{{domxref("AudioBuffer.length")}} {{readonlyInline}}</dt>
- <dd>Retourne un nombre entier qui représente la longueur, en trames d'échantillonnage , des données PCM stockées dans la mémoire tampon.</dd>
- <dt>{{domxref("AudioBuffer.duration")}} {{readonlyInline}}</dt>
- <dd>Retourne un nombre à virgule flottante de double précision qui représente la durée, exprimée en secondes, des données PCM stockées dans la mémoire tampon.</dd>
- <dt>{{domxref("AudioBuffer.numberOfChannels")}} {{readonlyInline}}</dt>
- <dd>Retourne un nombre entier qui représente le nombre de canaux audio discrets décrits par les données PCM stockées dans la mémoire tampon.</dd>
-</dl>
+## Propriétés
 
-<h2 id="Méthodes">Méthodes</h2>
+- {{domxref("AudioBuffer.sampleRate")}} {{readonlyInline}}
+  - : Retourne un nombre flottant qui représente la fréquence d'échantillonnage, en échantillons par seconde, des données PCM stockées dans la mémoire tampon.
+- {{domxref("AudioBuffer.length")}} {{readonlyInline}}
+  - : Retourne un nombre entier qui représente la longueur, en trames d'échantillonnage , des données PCM stockées dans la mémoire tampon.
+- {{domxref("AudioBuffer.duration")}} {{readonlyInline}}
+  - : Retourne un nombre à virgule flottante de double précision qui représente la durée, exprimée en secondes, des données PCM stockées dans la mémoire tampon.
+- {{domxref("AudioBuffer.numberOfChannels")}} {{readonlyInline}}
+  - : Retourne un nombre entier qui représente le nombre de canaux audio discrets décrits par les données PCM stockées dans la mémoire tampon.
 
-<dl>
- <dt>{{domxref("AudioBuffer.getChannelData()")}}</dt>
- <dd>Retourne un {{domxref ("Float32Array")}} contenant les données PCM associés au canal, défini par l'index du canal (0 représentant le premier canal).</dd>
- <dt>{{domxref("AudioBuffer.copyFromChannel()")}}</dt>
- <dd>Copie les échantillons du canal associé à <code>AudioBuffer</code> dans un tableau de destination.</dd>
- <dt>{{domxref("AudioBuffer.copyToChannel()")}}</dt>
- <dd>Copie les échantillons dans le canal associé à <code>AudioBuffer</code>, depuis le tableau <code>source</code>.</dd>
-</dl>
+## Méthodes
 
-<h2 id="Exemple">Exemple</h2>
+- {{domxref("AudioBuffer.getChannelData()")}}
+  - : Retourne un {{domxref ("Float32Array")}} contenant les données PCM associés au canal, défini par l'index du canal (0 représentant le premier canal).
+- {{domxref("AudioBuffer.copyFromChannel()")}}
+  - : Copie les échantillons du canal associé à `AudioBuffer` dans un tableau de destination.
+- {{domxref("AudioBuffer.copyToChannel()")}}
+  - : Copie les échantillons dans le canal associé à `AudioBuffer`, depuis le tableau `source`.
 
-<p>L'exemple suivant montre comment créer un  <code>AudioBuffer</code> et le remplir avec du bruit blanc. Le code source est disponible sur notre repo <a href="https://github.com/mdn/audio-buffer">audio-buffer demo</a>; une <a href="http://mdn.github.io/audio-buffer/">version live</a> est également consultable.</p>
+## Exemple
 
-<pre class="brush: js">// Stéréo
+L'exemple suivant montre comment créer un  `AudioBuffer` et le remplir avec du bruit blanc. Le code source est disponible sur notre repo [audio-buffer demo](https://github.com/mdn/audio-buffer); une [version live](http://mdn.github.io/audio-buffer/) est également consultable.
+
+```js
+// Stéréo
 var nombreCanaux = 2;
 
 // Crée une mémoire tampon vide de 2 secondes
@@ -60,10 +55,10 @@ var tableauDonnees = audioCtx.createBuffer(nombreCanaux, nombreFrames, contexteA
 bouton.onclick = function() {
   // remplit la mémoire tampon avec du bruit blanc
   // valeurs aléatoires entre -1.0 et 1.0
-  for (var canal = 0; canal &lt; nombreCanaux; canal++) {
+  for (var canal = 0; canal < nombreCanaux; canal++) {
     // génère le tableau contenant les données
     var tampon = tableauDonnees.getChannelData(canal);
-    for (var i = 0; i &lt; nombreFrames; i++) {
+    for (var i = 0; i < nombreFrames; i++) {
       // Math.random() donne une valeur comprise entre [0; 1.0]
       // l'audio doit être compris entre [-1.0; 1.0]
       tampon[i] = Math.random() * 2 - 1;
@@ -84,31 +79,19 @@ bouton.onclick = function() {
   // lance la lecture du so
   source.start();
 
-}</pre>
+}
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Web Audio API', '#AudioBuffer-section', 'AudioBuffer')}}</td>
-   <td>{{Spec2('Web Audio API')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                | Statut                               | Commentaire         |
+| -------------------------------------------------------------------------------------------- | ------------------------------------ | ------------------- |
+| {{SpecName('Web Audio API', '#AudioBuffer-section', 'AudioBuffer')}} | {{Spec2('Web Audio API')}} | Définition initiale |
 
-<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+## Compatibilité navigateurs
 
-<p>{{Compat("api.AudioBuffer")}}</p>
+{{Compat("api.AudioBuffer")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
-</ul>
+- [Utiliser la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API)
diff --git a/files/fr/web/api/audiobuffer/length/index.md b/files/fr/web/api/audiobuffer/length/index.md
index f61ff06e0d..eae0885d58 100644
--- a/files/fr/web/api/audiobuffer/length/index.md
+++ b/files/fr/web/api/audiobuffer/length/index.md
@@ -3,25 +3,25 @@ title: AudioBuffer.length
 slug: Web/API/AudioBuffer/length
 translation_of: Web/API/AudioBuffer/length
 ---
-<p>{{ APIRef("Web Audio API") }}</p>
+{{ APIRef("Web Audio API") }}
 
-<div>
-<p>La propriété <code>length</code> de l'interface {{ domxref("AudioBuffer") }} renvoie un entier représentant la longueur, en trames d'échantillonage, des données PCM stockées dans la mémoire-tampon.</p>
-</div>
+La propriété `length` de l'interface {{ domxref("AudioBuffer") }} renvoie un entier représentant la longueur, en trames d'échantillonage, des données PCM stockées dans la mémoire-tampon.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">var tableauMemoireTampon = contexteAudio.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate);
+```js
+var tableauMemoireTampon = contexteAudio.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate);
 tableauMemoireTampon.length;
-</pre>
+```
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>Un nombre entier.</p>
+Un nombre entier.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">// Stereo
+```js
+// Stereo
 var nombreCanaux = 2;
 
 // Crée une mémoire tampon vide de 2 secondes
@@ -33,41 +33,29 @@ var tableauDonnees = audioCtx.createBuffer(nombreCanaux, nombreFrames, contexteA
 bouton.onclick = function() {
   // remplit la mémoire tampon avec du bruit blanc
   // valeurs aléatoires entre -1.0 et 1.0
-  for (var canal = 0; canal &lt; nombreCanaux; canal++) {
+  for (var canal = 0; canal < nombreCanaux; canal++) {
     // génère le tableau contenant les données
     var tampon = tableauDonnees.getChannelData(canal);
-    for (var i = 0; i &lt; nombreFrames; i++) {
+    for (var i = 0; i < nombreFrames; i++) {
       // Math.random() donne une valeur comprise entre [0; 1.0]
       // l'audio doit être compris entre [-1.0; 1.0]
       tampon[i] = Math.random() * 2 - 1;
     }
   }
   console.log(tableauDonnees.length);
-}</pre>
-
-<h2 id="Spécification">Spécification</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Web Audio API', '#widl-AudioBuffer-length', 'length')}}</td>
-   <td>{{Spec2('Web Audio API')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
-
-<p>{{Compat("api.AudioBuffer.length")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
-</ul>
+}
+```
+
+## Spécification
+
+| Spécification                                                                            | Statut                               | Commentaire |
+| ---------------------------------------------------------------------------------------- | ------------------------------------ | ----------- |
+| {{SpecName('Web Audio API', '#widl-AudioBuffer-length', 'length')}} | {{Spec2('Web Audio API')}} |             |
+
+## Compatibilité navigateurs
+
+{{Compat("api.AudioBuffer.length")}}
+
+## Voir aussi
+
+- [Utiliser la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API)
diff --git a/files/fr/web/api/audiobuffer/numberofchannels/index.md b/files/fr/web/api/audiobuffer/numberofchannels/index.md
index 470397e34d..0c7c2c1ced 100644
--- a/files/fr/web/api/audiobuffer/numberofchannels/index.md
+++ b/files/fr/web/api/audiobuffer/numberofchannels/index.md
@@ -3,25 +3,25 @@ title: AudioBuffer.numberOfChannels
 slug: Web/API/AudioBuffer/numberOfChannels
 translation_of: Web/API/AudioBuffer/numberOfChannels
 ---
-<p>{{ APIRef("Web Audio API") }}</p>
+{{ APIRef("Web Audio API") }}
 
-<div>
-<p>La propriété <code>numberOfChannels</code> de l'interface {{ domxref("AudioBuffer") }} renvoie un nombre entier représentant le nombre de canaux audio diiscrets décrits par les données PCM stockées dans la mémoire-tampon.</p>
-</div>
+La propriété `numberOfChannels` de l'interface {{ domxref("AudioBuffer") }} renvoie un nombre entier représentant le nombre de canaux audio diiscrets décrits par les données PCM stockées dans la mémoire-tampon.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">var tableauMemoireTampon = audioCtx.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate);
+```js
+var tableauMemoireTampon = audioCtx.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate);
 tableauMemoireTampon.numberOfChannels;
-</pre>
+```
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>Un nombre entier.</p>
+Un nombre entier.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">// Stereo
+```js
+// Stereo
 var nombreCanaux = 2;
 
 // Crée une mémoire tampon vide de 2 secondes
@@ -33,10 +33,10 @@ var tableauDonnees = audioCtx.createBuffer(nombreCanaux, nombreFrames, contexteA
 bouton.onclick = function() {
   // remplit la mémoire tampon avec du bruit blanc
   // valeurs aléatoires entre -1.0 et 1.0
-  for (var canal = 0; canal &lt; nombreCanaux; canal++) {
+  for (var canal = 0; canal < nombreCanaux; canal++) {
     // génère le tableau contenant les données
     var tampon = tableauDonnees.getChannelData(canal);
-    for (var i = 0; i &lt; nombreFrames; i++) {
+    for (var i = 0; i < nombreFrames; i++) {
       // Math.random() donne une valeur comprise entre [0; 1.0]
       // l'audio doit être compris entre [-1.0; 1.0]
       tampon[i] = Math.random() * 2 - 1;
@@ -44,31 +44,18 @@ bouton.onclick = function() {
   }
   console.log(tableauDonnees.numberOfChannels);
 }
-</pre>
-
-<h2 id="Spécification">Spécification</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Web Audio API', '#widl-AudioBuffer-numberOfChannels', 'numberOfChannels')}}</td>
-   <td>{{Spec2('Web Audio API')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
-
-<p>{{Compat("api.AudioBuffer.numberOfChannels")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
-</ul>
+```
+
+## Spécification
+
+| Spécification                                                                                                        | Statut                               | Commentaire |
+| -------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- |
+| {{SpecName('Web Audio API', '#widl-AudioBuffer-numberOfChannels', 'numberOfChannels')}} | {{Spec2('Web Audio API')}} |             |
+
+## Compatibilité navigateurs
+
+{{Compat("api.AudioBuffer.numberOfChannels")}}
+
+## Voir aussi
+
+- [Utiliser la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API)
diff --git a/files/fr/web/api/audiobuffer/samplerate/index.md b/files/fr/web/api/audiobuffer/samplerate/index.md
index 79e2abb6d2..7992a06828 100644
--- a/files/fr/web/api/audiobuffer/samplerate/index.md
+++ b/files/fr/web/api/audiobuffer/samplerate/index.md
@@ -3,25 +3,25 @@ title: AudioBuffer.sampleRate
 slug: Web/API/AudioBuffer/sampleRate
 translation_of: Web/API/AudioBuffer/sampleRate
 ---
-<p>{{ APIRef("Web Audio API") }}</p>
+{{ APIRef("Web Audio API") }}
 
-<div>
-<p>La propriété <code>sampleRate</code> de l'interface {{ domxref("AudioBuffer") }} renvoie un nombre à virgule flottante  représentant la taux d'échantillonage, en échantillons par seconde, des données PCM stockées dans la mémoire-tampon.</p>
-</div>
+La propriété `sampleRate` de l'interface {{ domxref("AudioBuffer") }} renvoie un nombre à virgule flottante  représentant la taux d'échantillonage, en échantillons par seconde, des données PCM stockées dans la mémoire-tampon.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">var tableauMemoireTampon = audioCtx.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate);
+```js
+var tableauMemoireTampon = audioCtx.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate);
 tableauMemoireTampon.sampleRate;
-</pre>
+```
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>Un nombre à virgule flottante indiquant le taux d'échantillonnage actuelle des données du tampon, en echantillonnage par seconde.</p>
+Un nombre à virgule flottante indiquant le taux d'échantillonnage actuelle des données du tampon, en echantillonnage par seconde.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">// Stereo
+```js
+// Stereo
 var nombreCanaux = 2;
 
 // Crée une mémoire tampon vide de 2 secondes
@@ -33,10 +33,10 @@ var tableauDonnees = audioCtx.createBuffer(nombreCanaux, nombreFrames, contexteA
 bouton.onclick = function() {
   // remplit la mémoire tampon avec du bruit blanc
   // valeurs aléatoires entre -1.0 et 1.0
-  for (var canal = 0; canal &lt; nombreCanaux; canal++) {
+  for (var canal = 0; canal < nombreCanaux; canal++) {
     // génère le tableau contenant les données
     var tampon = tableauDonnees.getChannelData(canal);
-    for (var i = 0; i &lt; nombreFrames; i++) {
+    for (var i = 0; i < nombreFrames; i++) {
       // Math.random() donne une valeur comprise entre [0; 1.0]
       // l'audio doit être compris entre [-1.0; 1.0]
       tampon[i] = Math.random() * 2 - 1;
@@ -44,31 +44,18 @@ bouton.onclick = function() {
   }
   console.log(tableauDonnees.sampleRate);
 }
-</pre>
-
-<h2 id="Spécification">Spécification</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Web Audio API', '#widl-AudioBuffer-sampleRate', 'sampleRate')}}</td>
-   <td>{{Spec2('Web Audio API')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_Navigateurs">Compatibilité des Navigateurs</h2>
-
-<p>{{Compat("api.AudioBuffer.sampleRate")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
-</ul>
+```
+
+## Spécification
+
+| Spécification                                                                                        | Statut                               | Commentaire |
+| ---------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- |
+| {{SpecName('Web Audio API', '#widl-AudioBuffer-sampleRate', 'sampleRate')}} | {{Spec2('Web Audio API')}} |             |
+
+## Compatibilité des Navigateurs
+
+{{Compat("api.AudioBuffer.sampleRate")}}
+
+## Voir aussi
+
+- [Utiliser la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API)
diff --git a/files/fr/web/api/audiobuffersourcenode/buffer/index.md b/files/fr/web/api/audiobuffersourcenode/buffer/index.md
index 377e917158..81421a685b 100644
--- a/files/fr/web/api/audiobuffersourcenode/buffer/index.md
+++ b/files/fr/web/api/audiobuffersourcenode/buffer/index.md
@@ -3,36 +3,34 @@ title: AudioBufferSourceNode.buffer
 slug: Web/API/AudioBufferSourceNode/buffer
 translation_of: Web/API/AudioBufferSourceNode/buffer
 ---
-<p>{{ APIRef("Web Audio API") }}</p>
+{{ APIRef("Web Audio API") }}
 
-<p>La propriété <code><strong>buffer</strong></code> de l'interface {{ domxref("AudioBufferSourceNode") }} donne la possibilité de lire un son en utilisant un {{domxref("AudioBuffer")}} comme ressource audio.</p>
+La propriété **`buffer`** de l'interface {{ domxref("AudioBufferSourceNode") }} donne la possibilité de lire un son en utilisant un {{domxref("AudioBuffer")}} comme ressource audio.
 
-<p>Si la propriété <code>buffer</code> a la valeur NULL, elle définit un canal unique silencieux (chaque échantillon vaut 0).</p>
+Si la propriété `buffer` a la valeur NULL, elle définit un canal unique silencieux (chaque échantillon vaut 0).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>AudioBufferSourceNode</em>.buffer = <em>soundBuffer</em>;
-</pre>
+    AudioBufferSourceNode.buffer = soundBuffer;
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>Un {{domxref("AudioBuffer")}} qui contient les données représentant le son que le noeud va lire.</p>
+Un {{domxref("AudioBuffer")}} qui contient les données représentant le son que le noeud va lire.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<div class="note">
-<p><strong>Note :</strong> Pour un exemple complet, voir <a href="http://mdn.github.io/audio-buffer/">le code interprété</a>, ou <a href="https://github.com/mdn/audio-buffer">le code source</a>.</p>
-</div>
+> **Note :** Pour un exemple complet, voir [le code interprété](http://mdn.github.io/audio-buffer/), ou [le code source](https://github.com/mdn/audio-buffer).
 
-<pre class="brush: js">var myArrayBuffer = audioCtx.createBuffer(2, frameCount, audioCtx.sampleRate);
+```js
+var myArrayBuffer = audioCtx.createBuffer(2, frameCount, audioCtx.sampleRate);
 
 button.onclick = function() {
   // Remplit le buffer avec du bruit blanc;
   // valeurs aléatoires entre -1.0 et 1.0
-  for (var channel = 0; channel &lt; channels; channel++) {
+  for (var channel = 0; channel < channels; channel++) {
    // Crée le ArrayBuffer qui contient effectivement les données
    var nowBuffering = myArrayBuffer.getChannelData(channel);
-   for (var i = 0; i &lt; frameCount; i++) {
+   for (var i = 0; i < frameCount; i++) {
      // Math.random() is in [0; 1.0]
      // audio doit être compris entre [-1.0; 1.0]
      nowBuffering[i] = Math.random() * 2 - 1;
@@ -43,31 +41,19 @@ button.onclick = function() {
   // C'est le AudioNode à utiliser pour jouer un AudioBuffer
   var source = audioCtx.createBufferSource();
   // Définit le buffer dans l'AudioBufferSourceNode
-  source.buffer = myArrayBuffer;</pre>
-
-<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("Web Audio API", "#widl-AudioBufferSourceNode-buffer", "buffer")}}</td>
-   <td>{{Spec2("Web Audio API")}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
-
-<p>{{Compat("api.AudioBufferSourceNode.buffer")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<p>{{page("/en-US/docs/Web/API/AudioBufferSourceNode","See_also")}}</p>
+  source.buffer = myArrayBuffer;
+```
+
+## Spécifications
+
+| Spécification                                                                                            | Statut                               | Commentaire         |
+| -------------------------------------------------------------------------------------------------------- | ------------------------------------ | ------------------- |
+| {{SpecName("Web Audio API", "#widl-AudioBufferSourceNode-buffer", "buffer")}} | {{Spec2("Web Audio API")}} | Définition initiale |
+
+## Compatibilité navigateurs
+
+{{Compat("api.AudioBufferSourceNode.buffer")}}
+
+## Voir aussi
+
+{{page("/en-US/docs/Web/API/AudioBufferSourceNode","See_also")}}
diff --git a/files/fr/web/api/audiobuffersourcenode/detune/index.md b/files/fr/web/api/audiobuffersourcenode/detune/index.md
index bb352ab774..457bab06ba 100644
--- a/files/fr/web/api/audiobuffersourcenode/detune/index.md
+++ b/files/fr/web/api/audiobuffersourcenode/detune/index.md
@@ -8,37 +8,38 @@ tags:
   - Web Audio API
 translation_of: Web/API/AudioBufferSourceNode/detune
 ---
-<p>{{ APIRef("Web Audio API") }}</p>
+{{ APIRef("Web Audio API") }}
 
-<p>La  propriété <code>detune</code> de l'interface {{ domxref("AudioBufferSourceNode") }} est un {{domxref("AudioParam")}} de type <a href="/fr/docs/DOM/AudioParam#k-rate">k-rate</a> représentant le désaccord des oscillations en <a href="http://en.wikipedia.org/wiki/Cent_%28music%29">cents</a>.</p>
+La  propriété `detune` de l'interface {{ domxref("AudioBufferSourceNode") }} est un {{domxref("AudioParam")}} de type [k-rate](/fr/docs/DOM/AudioParam#k-rate) représentant le désaccord des oscillations en [cents](http://en.wikipedia.org/wiki/Cent_%28music%29).
 
-<p>Ses valeur sont comprises entre -1200 et 1200.</p>
+Ses valeur sont comprises entre -1200 et 1200.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">var source = contexteAudio.createBufferSource();
-source.detune.value = 100; // valeur en cents</pre>
+```js
+var source = contexteAudio.createBufferSource();
+source.detune.value = 100; // valeur en cents
+```
 
-<div class="note">
-<p><strong>Note:</strong> bien que l'<code>AudioParam</code> renvoyé soit en lecture seule, la valeur qu'il représente ne l'est pas.</p>
-</div>
+> **Note :** bien que l'`AudioParam` renvoyé soit en lecture seule, la valeur qu'il représente ne l'est pas.
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>Un {{domxref("AudioParam")}} de type <a href="/fr/docs/DOM/AudioParam#k-rate">k-rate</a>.</p>
+Un {{domxref("AudioParam")}} de type [k-rate](/fr/docs/DOM/AudioParam#k-rate).
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">var audioCtx = new AudioContext();
+```js
+var audioCtx = new AudioContext();
 
 var nbChan = 2;
 var nbFrames = audioCtx.sampleRate * 2.0;
 
 var audioBuffer = audioCtx.createBuffer(nbChan, nbFrames, audioCtx.sampleRate);
 
-for (var chan = 0; chan &lt; nbChan; chan++) {
+for (var chan = 0; chan < nbChan; chan++) {
   var chanData = audioBuffer.getChannelData(chan);
-  for (var i = 0; i &lt; nbFrames; i++) {
+  for (var i = 0; i < nbFrames; i++) {
     chanData[i] = Math.random() * 2 - 1;
   }
 }
@@ -48,33 +49,18 @@ source.buffer = audioBuffer;
 source.connect(audioCtx.destination);
 source.detune.value = 100; // valeur en cents
 source.start();
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-detune', 'detune')}}</td>
-   <td>{{Spec2('Web Audio API')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+```
 
-<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+## Spécifications
 
+| Spécification                                                                                            | Statut                               | Commentaire |
+| -------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- |
+| {{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-detune', 'detune')}} | {{Spec2('Web Audio API')}} |             |
 
+## Compatibilité navigateurs
 
-<p>{{Compat("api.AudioBufferSourceNode.detune")}}</p>
+{{Compat("api.AudioBufferSourceNode.detune")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
-</ul>
+- [Utiliser la Web Audio API](/fr/docs/Web_Audio_API/Using_Web_Audio_API)
diff --git a/files/fr/web/api/audiobuffersourcenode/index.md b/files/fr/web/api/audiobuffersourcenode/index.md
index ce90a90902..0942b127dd 100644
--- a/files/fr/web/api/audiobuffersourcenode/index.md
+++ b/files/fr/web/api/audiobuffersourcenode/index.md
@@ -9,81 +9,75 @@ tags:
   - Web Audio API
 translation_of: Web/API/AudioBufferSourceNode
 ---
-<p>{{APIRef("Web Audio API")}}</p>
+{{APIRef("Web Audio API")}}
 
-<p>L'interface <strong>AudioBufferSourceNode</strong> est un {{domxref("AudioScheduledSourceNode")}} qui représente une source audio constituée de données audio en mémoire, stockées dans un {{domxref ("AudioBuffer")}}. Elle est particulièrement utile pour lire des sons qui requierrent des conditions de lecture particulières, comme la synchronisation sur un certain rythme, et peuvent être stockés en mémoire. Si ce type de son doit être lu depuis le disque ou le réseau, il conviendra d'utiliser un {{domxref("AudioWorkletNode")}}.</p>
+L'interface **AudioBufferSourceNode** est un {{domxref("AudioScheduledSourceNode")}} qui représente une source audio constituée de données audio en mémoire, stockées dans un {{domxref ("AudioBuffer")}}. Elle est particulièrement utile pour lire des sons qui requierrent des conditions de lecture particulières, comme la synchronisation sur un certain rythme, et peuvent être stockés en mémoire. Si ce type de son doit être lu depuis le disque ou le réseau, il conviendra d'utiliser un {{domxref("AudioWorkletNode")}}.
 
-<p>{{InheritanceDiagram}}</p>
+{{InheritanceDiagram}}
 
-<p>Un AudioBufferSourceNode n'a pas d'entrée et il comporte une unique sortie, dont le nombre de canaux est spécifié par la propriété {{domxref("AudioBufferSourceNode.buffer", "buffer")}}. Si aucun buffer n'est paramétré, c'est-à-dire si la valeur de l'attribut est NULL, la sortie contient un seul canal silencieux (chaque échantillon vaut 0).</p>
+Un AudioBufferSourceNode n'a pas d'entrée et il comporte une unique sortie, dont le nombre de canaux est spécifié par la propriété {{domxref("AudioBufferSourceNode.buffer", "buffer")}}. Si aucun buffer n'est paramétré, c'est-à-dire si la valeur de l'attribut est NULL, la sortie contient un seul canal silencieux (chaque échantillon vaut 0).
 
-<p><br>
- Un {{domxref("AudioBufferSourceNode")}} ne peut être joué qu'une seule fois; autrement dit un seul appel à la fonction <code>AudioBufferSourceNode.start()</code> est autorisé. Pour rejouer le son, il faut créer un nouvel <code>AudioBufferSourceNode</code>. Heureusement ces noeuds ne demandent pas beaucoup de ressource, et les véritables <code>AudioBuffer</code>s peuvent être réutilisés. On dit que les <code>AudioBufferSourceNode</code>s doivent être utilisés en mode "one shot": une fois que la lecture est lancée, toutes les références peuvent être supprimées, et elles seront collectées par le ramasse-miette automatiquement quand la lecture des sons sera terminée.</p>
+Un {{domxref("AudioBufferSourceNode")}} ne peut être joué qu'une seule fois; autrement dit un seul appel à la fonction `AudioBufferSourceNode.start()` est autorisé. Pour rejouer le son, il faut créer un nouvel `AudioBufferSourceNode`. Heureusement ces noeuds ne demandent pas beaucoup de ressource, et les véritables `AudioBuffer`s peuvent être réutilisés. On dit que les `AudioBufferSourceNode`s doivent être utilisés en mode "one shot": une fois que la lecture est lancée, toutes les références peuvent être supprimées, et elles seront collectées par le ramasse-miette automatiquement quand la lecture des sons sera terminée.
 
-<p>Plusieurs appels à la fonction <code>AudioBufferSourceNode.stop()</code> sont autorisés. Le dernier appel remplace le précédent, à condition que le <code>AudioBufferSourceNode </code>n'ait pas déjà atteint la fin du buffer.</p>
+Plusieurs appels à la fonction `AudioBufferSourceNode.stop()` sont autorisés. Le dernier appel remplace le précédent, à condition que le `AudioBufferSourceNode `n'ait pas déjà atteint la fin du buffer.
 
-<p><img alt="L'objet AudioBufferSourceNode prend le contenu d'un AudioBuffer et le convertit en audio" src="webaudioaudiobuffersourcenode.png"></p>
+![L'objet AudioBufferSourceNode prend le contenu d'un AudioBuffer et le convertit en audio](webaudioaudiobuffersourcenode.png)
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row"><dfn>Nombre d'entrées</dfn></th>
-   <td><code>0</code></td>
-  </tr>
-  <tr>
-   <th scope="row"><dfn>Nombre de sorties</dfn></th>
-   <td><code>1</code></td>
-  </tr>
-  <tr>
-   <th scope="row"><dfn>Nombre de canaux</dfn></th>
-   <td>défini par l'objet {{domxref("AudioBuffer")}} associé</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row"><dfn>Nombre d'entrées</dfn></th>
+      <td><code>0</code></td>
+    </tr>
+    <tr>
+      <th scope="row"><dfn>Nombre de sorties</dfn></th>
+      <td><code>1</code></td>
+    </tr>
+    <tr>
+      <th scope="row"><dfn>Nombre de canaux</dfn></th>
+      <td>défini par l'objet {{domxref("AudioBuffer")}} associé</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Constructeur">Constructeur</h2>
+## Constructeur
 
-<dl>
- <dt>{{domxref("AudioBufferSourceNode.AudioBufferSourceNode", "AudioBufferSourceNode()")}}</dt>
- <dd>Crée et retourne un nouvel objet <code>AudioBufferSourceNode</code>. Un {{domxref("AudioBufferSourceNode")}} peut être instancié à l'aide la méthode {{domxref("AudioContext.createBufferSource()")}}.</dd>
-</dl>
+- {{domxref("AudioBufferSourceNode.AudioBufferSourceNode", "AudioBufferSourceNode()")}}
+  - : Crée et retourne un nouvel objet `AudioBufferSourceNode`. Un {{domxref("AudioBufferSourceNode")}} peut être instancié à l'aide la méthode {{domxref("AudioContext.createBufferSource()")}}.
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<p><em>Hérite des propriétés de son parent, {{domxref("AudioNode")}}.</em></p>
+_Hérite des propriétés de son parent, {{domxref("AudioNode")}}._
 
-<dl>
- <dt>{{domxref("AudioBufferSourceNode.buffer")}}</dt>
- <dd>{{domxref ("AudioBuffer")}} qui définit la ressource à jouer; lorsqu'il a la valeur NULL, définit un canal unique silencieux (dans lequel chaque échantillon vaut 0.0).</dd>
- <dt>{{domxref("AudioBufferSourceNode.detune")}}</dt>
- <dd>{{domxref("AudioParam")}} de type <a href="/fr/docs/DOM/AudioParam#k-rate">k-rate</a> représentant le désaccordage de la fréquence exprimé en <a href="http://en.wikipedia.org/wiki/Cent_%28music%29">cents</a>. Cette valeur est composée à partir du <code>playbackRate</code> pour déterminer la vitesse à laquelle le son sera jouée. Sa valeur par défaut est <code>0</code> (qui correspond à aucun désaccordage), et son rang nominal va de -∞ à ∞.</dd>
- <dt>{{domxref("AudioBufferSourceNode.loop")}}</dt>
- <dd>Attribut booléen indiquant si la ressource doit être lue de nouveau lorsque la fin de l'{{domxref ("AudioBuffer")}} est atteinte. Sa valeur par défaut est <code>false</code>.</dd>
- <dt>{{domxref("AudioBufferSourceNode.loopStart")}} {{optional_inline}}</dt>
- <dd>Nombre flottant à double précision indiquant, en secondes, à quel moment de l'{{domxref ("AudioBuffer")}} la lecture doit reprendre. Sa valeur par défaut est 0.</dd>
- <dt>{{domxref("AudioBufferSourceNode.loopEnd")}} {{optional_inline}}</dt>
- <dd>Nombre flottant à double précision indiquant, en secondes, à quel moment de l'{{domxref ("AudioBuffer")}} la relecture doit s'arrêter (et éventuellement boucler à nouveau). Sa valeur par défaut est 0.</dd>
- <dt>{{domxref("AudioBufferSourceNode.playbackRate")}}</dt>
- <dd>{{domxref ("AudioParam")}} de type <a href="/fr/docs/Web/API/AudioParam#a-rate">a-rate</a> qui définit le facteur de vitesse à laquelle la ressource audio sera jouée. Comme aucune correction de pitch n'est appliquée sur la sortie, il peut être utilisé pour modifier le pitch de l'échantillon.</dd>
-</dl>
+- {{domxref("AudioBufferSourceNode.buffer")}}
+  - : {{domxref ("AudioBuffer")}} qui définit la ressource à jouer; lorsqu'il a la valeur NULL, définit un canal unique silencieux (dans lequel chaque échantillon vaut 0.0).
+- {{domxref("AudioBufferSourceNode.detune")}}
+  - : {{domxref("AudioParam")}} de type [k-rate](/fr/docs/DOM/AudioParam#k-rate) représentant le désaccordage de la fréquence exprimé en [cents](http://en.wikipedia.org/wiki/Cent_%28music%29). Cette valeur est composée à partir du `playbackRate` pour déterminer la vitesse à laquelle le son sera jouée. Sa valeur par défaut est `0` (qui correspond à aucun désaccordage), et son rang nominal va de -∞ à ∞.
+- {{domxref("AudioBufferSourceNode.loop")}}
+  - : Attribut booléen indiquant si la ressource doit être lue de nouveau lorsque la fin de l'{{domxref ("AudioBuffer")}} est atteinte. Sa valeur par défaut est `false`.
+- {{domxref("AudioBufferSourceNode.loopStart")}} {{optional_inline}}
+  - : Nombre flottant à double précision indiquant, en secondes, à quel moment de l'{{domxref ("AudioBuffer")}} la lecture doit reprendre. Sa valeur par défaut est 0.
+- {{domxref("AudioBufferSourceNode.loopEnd")}} {{optional_inline}}
+  - : Nombre flottant à double précision indiquant, en secondes, à quel moment de l'{{domxref ("AudioBuffer")}} la relecture doit s'arrêter (et éventuellement boucler à nouveau). Sa valeur par défaut est 0.
+- {{domxref("AudioBufferSourceNode.playbackRate")}}
+  - : {{domxref ("AudioParam")}} de type [a-rate](/fr/docs/Web/API/AudioParam#a-rate) qui définit le facteur de vitesse à laquelle la ressource audio sera jouée. Comme aucune correction de pitch n'est appliquée sur la sortie, il peut être utilisé pour modifier le pitch de l'échantillon.
 
-<h3 id="Gestionnaires_d'évènement">Gestionnaires d'évènement</h3>
+### Gestionnaires d'évènement
 
-<p><em>Hérite des gestionnaires d'évènement de son parent, {{domxref("AudioScheduledSourceNode")}}</em>.</p>
+_Hérite des gestionnaires d'évènement de son parent, {{domxref("AudioScheduledSourceNode")}}_.
 
-<h2 id="Méthodes">Méthodes</h2>
+## Méthodes
 
-<p><em>Hérite des méthodes de son parent, {{domxref("AudioNode")}}.</em></p>
+_Hérite des méthodes de son parent, {{domxref("AudioNode")}}._
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Cet exemple crée un tampon de deux secondes, le remplit avec du bruit blanc et le joue par l'intermédiaire d'un <code>AudioBufferSourceNode</code>.</p>
+Cet exemple crée un tampon de deux secondes, le remplit avec du bruit blanc et le joue par l'intermédiaire d'un `AudioBufferSourceNode`.
 
-<div class="note">
-<p><strong>Note :</strong> Vous pouvez aussi <a href="http://mdn.github.io/audio-buffer/">exécuter the code</a>, ou <a href="https://github.com/mdn/audio-buffer">regarder le code source</a>.</p>
-</div>
+> **Note :** Vous pouvez aussi [exécuter the code](http://mdn.github.io/audio-buffer/), ou [regarder le code source](https://github.com/mdn/audio-buffer).
 
-<pre class="brush: js">var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+```js
+var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
 var bouton = document.querySelector('button');
 var pre = document.querySelector('pre');
 var monScript = document.querySelector('script');
@@ -102,10 +96,10 @@ var myArrayBuffer = contexteAudio.createBuffer(2, compteurTrames, contexteAudio.
 bouton.onclick = function() {
   // remplit le tampon avec du bruit blanc;
   // valeurs aléatoires entre -1.0 et 1.0
-  for (var canal = 0; canal &lt; canaux; canal++) {
+  for (var canal = 0; canal < canaux; canal++) {
    // crée le ArrayBuffer qui contient les données
    var nowBuffering = myArrayBuffer.getChannelData(canal);
-   for (var i = 0; i &lt; compteurTrames; i++) {
+   for (var i = 0; i < compteurTrames; i++) {
      // Math.random() est compris entre [0; 1.0]
      // audio doit être compris entre [-1.0; 1.0]
      nowBuffering[i] = Math.random() * 2 - 1;
@@ -122,35 +116,21 @@ bouton.onclick = function() {
   source.connect(contexteAudio.destination);
   // lance la lecture de la source
   source.start();
-}</pre>
-
-<div class="note">
-<p><strong>Note :</strong> Pour un exemple de <code>decodeAudioData</code>(), voir la page {{domxref("AudioContext.decodeAudioData")}}.</p>
-</div>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Web Audio API', '#AudioBufferSourceNode-section', 'AudioBufferSourceNode')}}</td>
-   <td>{{Spec2('Web Audio API')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+}
+```
+
+> **Note :** Pour un exemple de `decodeAudioData`(), voir la page {{domxref("AudioContext.decodeAudioData")}}.
+
+## Spécifications
+
+| Spécification                                                                                                        | Statut                               | Commentaire |
+| -------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- |
+| {{SpecName('Web Audio API', '#AudioBufferSourceNode-section', 'AudioBufferSourceNode')}} | {{Spec2('Web Audio API')}} |             |
 
-<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+## Compatibilité navigateurs
 
-<div>{{Compat("api.AudioBufferSourceNode")}}</div>
+{{Compat("api.AudioBufferSourceNode")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
-</ul>
+- [Utiliser la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API)
diff --git a/files/fr/web/api/audiobuffersourcenode/loop/index.md b/files/fr/web/api/audiobuffersourcenode/loop/index.md
index 739e46de9c..7238b300f4 100644
--- a/files/fr/web/api/audiobuffersourcenode/loop/index.md
+++ b/files/fr/web/api/audiobuffersourcenode/loop/index.md
@@ -9,35 +9,33 @@ tags:
   - Web Audio API
 translation_of: Web/API/AudioBufferSourceNode/loop
 ---
-<p>{{ APIRef("Web Audio API") }}</p>
+{{ APIRef("Web Audio API") }}
 
-<div>
-<p>La propriété <code>loop</code> de l'interface {{domxref("AudioBufferSourceNode") }} est un booléen indiquant si la ressource audio doit être rejouée quand à la fin de l'{{domxref("AudioBuffer")}}.</p>
-</div>
+La propriété `loop` de l'interface {{domxref("AudioBufferSourceNode") }} est un booléen indiquant si la ressource audio doit être rejouée quand à la fin de l'{{domxref("AudioBuffer")}}.
 
-<p>La valeur par défaut de la propriété <code>loop </code>est <code>false</code>.</p>
+La valeur par défaut de la propriété `loop `est `false`.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">var source = audioCtx.createBufferSource();
+```js
+var source = audioCtx.createBufferSource();
 source.loop = true;
-</pre>
+```
 
-<h3 id="Value">Value</h3>
+### Value
 
-<p>Un booléen.</p>
+Un booléen.
 
-<p>Lorsque la lecture en boucle est activée, le son commence à jouer au point spécifié lorsque {{domxref("AudioBufferSourceNode.start", "start()")}} est appelée. Quand il atteint le point spécifié par la propriété {{domxref("AudioBufferSourceNode.loopEnd", "loopEnd")}}, il recommence au point spécifié par la propriété {{domxref("AudioBufferSourceNode.loopStart", "loopStart")}}</p>
+Lorsque la lecture en boucle est activée, le son commence à jouer au point spécifié lorsque {{domxref("AudioBufferSourceNode.start", "start()")}} est appelée. Quand il atteint le point spécifié par la propriété {{domxref("AudioBufferSourceNode.loopEnd", "loopEnd")}}, il recommence au point spécifié par la propriété {{domxref("AudioBufferSourceNode.loopStart", "loopStart")}}
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Dans cet exemple, la fonction {{domxref("AudioContext.decodeAudioData")}} est utilisée pour décoder une piste audio et la placer dans un {{domxref("AudioBufferSourceNode")}}. Les boutons mis à disposition permettent de lire et d'arrêter la lecture audio, et un slider est utilisé pour changer la valeur de <code>playbackRate</code> en temps réel. Quand la lecture est terminée, elle boucle.</p>
+Dans cet exemple, la fonction {{domxref("AudioContext.decodeAudioData")}} est utilisée pour décoder une piste audio et la placer dans un {{domxref("AudioBufferSourceNode")}}. Les boutons mis à disposition permettent de lire et d'arrêter la lecture audio, et un slider est utilisé pour changer la valeur de `playbackRate` en temps réel. Quand la lecture est terminée, elle boucle.
 
-<div class="note">
-<p><strong>Note :</strong> Vous pouvez <a href="http://mdn.github.io/decode-audio-data/">essayer un exemple live</a> (or <a href="https://github.com/mdn/decode-audio-data">voir la source</a>.)</p>
-</div>
+> **Note :** Vous pouvez [essayer un exemple live](http://mdn.github.io/decode-audio-data/) (or [voir la source](https://github.com/mdn/decode-audio-data).)
 
-<pre class="brush: js">function getData() {
+```js
+function getData() {
   source = audioCtx.createBufferSource();
   request = new XMLHttpRequest();
 
@@ -70,31 +68,19 @@ play.onclick = function() {
   source.start(0);
   play.setAttribute('disabled', 'disabled');
   playbackControl.removeAttribute('disabled');
-}</pre>
-
-<h2 id="Spécification">Spécification</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-loop', 'loop')}}</td>
-   <td>{{Spec2('Web Audio API')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
-
-<p>{{Compat("api.AudioBufferSourceNode.loop")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
-</ul>
+}
+```
+
+## Spécification
+
+| Spécification                                                                                    | Statut                               | Commentaire |
+| ------------------------------------------------------------------------------------------------ | ------------------------------------ | ----------- |
+| {{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-loop', 'loop')}} | {{Spec2('Web Audio API')}} |             |
+
+## Compatibilité navigateurs
+
+{{Compat("api.AudioBufferSourceNode.loop")}}
+
+## Voir aussi
+
+- [Utiliser la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API)
diff --git a/files/fr/web/api/audiobuffersourcenode/loopend/index.md b/files/fr/web/api/audiobuffersourcenode/loopend/index.md
index c580e48ecb..b9aa87e87a 100644
--- a/files/fr/web/api/audiobuffersourcenode/loopend/index.md
+++ b/files/fr/web/api/audiobuffersourcenode/loopend/index.md
@@ -10,31 +10,31 @@ tags:
   - Web Audio API
 translation_of: Web/API/AudioBufferSourceNode/loopEnd
 ---
-<p>{{ APIRef("Web Audio API") }}</p>
+{{ APIRef("Web Audio API") }}
 
-<p>La propriété <strong><code>loopEnd</code></strong> de l'interface {{ domxref("AudioBufferSourceNode") }} est un nombre flottant à double précision qui indique, en secondes, à quel moment de l'{{domxref("AudioBuffer")}} la relecture doit s'arrêter, et éventuellement boucler de nouveau en reprenant à la position indiquée par la propriété {{domxref("AudioBufferSourceNode.loopStart", "loopStart")}}. Elle n'est prise en compte que si la propriété {{domxref("AudioBufferSourceNode.loop", "loop")}} vaut <code>true.</code></p>
+La propriété **`loopEnd`** de l'interface {{ domxref("AudioBufferSourceNode") }} est un nombre flottant à double précision qui indique, en secondes, à quel moment de l'{{domxref("AudioBuffer")}} la relecture doit s'arrêter, et éventuellement boucler de nouveau en reprenant à la position indiquée par la propriété {{domxref("AudioBufferSourceNode.loopStart", "loopStart")}}. Elle n'est prise en compte que si la propriété {{domxref("AudioBufferSourceNode.loop", "loop")}} vaut `true.`
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">var source = contexteAudio.createBufferSource();
+```js
+var source = contexteAudio.createBufferSource();
 source.loopEnd = 3;
-</pre>
+```
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>Un nombre flottant à double précision. La valeur par défaut est <code>0</code>.</p>
+Un nombre flottant à double précision. La valeur par défaut est `0`.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans cet exemple, la fonction {{domxref("AudioContext.decodeAudioData")}} est utilisée pour décoder une piste audio et la mettre dans un {{domxref("AudioBufferSourceNode")}}. L'interface fournit deux boutons pour démarrer et arrêter la lecture, et des sliders pour modifier les propriétés <code>playbackRate</code>, <code>loopStart</code> et <code>loopEnd</code> à la volée.</p>
+Dans cet exemple, la fonction {{domxref("AudioContext.decodeAudioData")}} est utilisée pour décoder une piste audio et la mettre dans un {{domxref("AudioBufferSourceNode")}}. L'interface fournit deux boutons pour démarrer et arrêter la lecture, et des sliders pour modifier les propriétés `playbackRate`, `loopStart` et `loopEnd` à la volée.
 
-<p>Lorsque la lecture de la source audio est terminée, elle boucle. Il est possible de contrôler la durée de la boucle en modifiant <code>loopStart</code> et <code>loopEnd</code>. Par exemple, si leurs valeurs sont fixées à 20 et 25, respectivement, le son bouclera entre la 20ème et la 25ème secondes du morceau.</p>
+Lorsque la lecture de la source audio est terminée, elle boucle. Il est possible de contrôler la durée de la boucle en modifiant `loopStart` et `loopEnd`. Par exemple, si leurs valeurs sont fixées à 20 et 25, respectivement, le son bouclera entre la 20ème et la 25ème secondes du morceau.
 
-<div class="note">
-<p><strong>Note :</strong> Voir <a href="http://mdn.github.io/decode-audio-data/"> l'exemple complet</a> et <a href="https://github.com/mdn/decode-audio-data">son code source</a>.</p>
-</div>
+> **Note :** Voir [l'exemple complet](http://mdn.github.io/decode-audio-data/) et [son code source](https://github.com/mdn/decode-audio-data).
 
-<pre class="brush: js">function getData() {
+```js
+function getData() {
   source = contexteAudio.createBufferSource();
   requete = new XMLHttpRequest();
 
@@ -75,31 +75,19 @@ loopstartControl.oninput = function() {
 loopendControl.oninput = function() {
   source.loopEnd = loopendControl.value;
   loopendValue.innerHTML = loopendControl.value;
-}</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-loopEnd', 'loopEnd')}}</td>
-   <td>{{Spec2('Web Audio API')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.AudioBufferSourceNode.loopEnd")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
-</ul>
+}
+```
+
+## Spécifications
+
+| Spécification                                                                                            | Statut                               | Commentaires |
+| -------------------------------------------------------------------------------------------------------- | ------------------------------------ | ------------ |
+| {{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-loopEnd', 'loopEnd')}} | {{Spec2('Web Audio API')}} |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.AudioBufferSourceNode.loopEnd")}}
+
+## Voir aussi
+
+- [Utiliser la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API)
diff --git a/files/fr/web/api/audiobuffersourcenode/loopstart/index.md b/files/fr/web/api/audiobuffersourcenode/loopstart/index.md
index 11a5b2165e..c5455f647e 100644
--- a/files/fr/web/api/audiobuffersourcenode/loopstart/index.md
+++ b/files/fr/web/api/audiobuffersourcenode/loopstart/index.md
@@ -3,30 +3,30 @@ title: AudioBufferSourceNode.loopStart
 slug: Web/API/AudioBufferSourceNode/loopStart
 translation_of: Web/API/AudioBufferSourceNode/loopStart
 ---
-<p>{{ APIRef("Web Audio API") }}<br>
- La propriété <code>loopStart</code> de l'interface {{ domxref("AudioBufferSourceNode") }} est un nombre flottant à double précision qui indique, en secondes, à quel moment de l'{{domxref("AudioBuffer")}} la lecture doit reprendre lors d'une boucle. Elle n'est prise en compte que lorque la propriété {{domxref("AudioBufferSourceNode.loop", "loop")}} est <code>true</code>.</p>
+{{ APIRef("Web Audio API") }}
+La propriété `loopStart` de l'interface {{ domxref("AudioBufferSourceNode") }} est un nombre flottant à double précision qui indique, en secondes, à quel moment de l'{{domxref("AudioBuffer")}} la lecture doit reprendre lors d'une boucle. Elle n'est prise en compte que lorque la propriété {{domxref("AudioBufferSourceNode.loop", "loop")}} est `true`.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">var source = contexteAudio.createBufferSource();
+```js
+var source = contexteAudio.createBufferSource();
 source.loopStart = 3;
-</pre>
+```
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>Un nombre flottant à double précision. La valeur par défaut est <code>0</code>.</p>
+Un nombre flottant à double précision. La valeur par défaut est `0`.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Dans cet exemple, la fonction {{domxref("AudioContext.decodeAudioData")}} est utilisée pour décoder une piste audio et la mettre dans un {{domxref("AudioBufferSourceNode")}}. L'interface fournit deux boutons pour démarrer et arrêter la lecture, et des sliders pour modifier les propriétés <code>playbackRate</code>, <code>loopStart</code> et <code>loopEnd</code> à la volée.</p>
+Dans cet exemple, la fonction {{domxref("AudioContext.decodeAudioData")}} est utilisée pour décoder une piste audio et la mettre dans un {{domxref("AudioBufferSourceNode")}}. L'interface fournit deux boutons pour démarrer et arrêter la lecture, et des sliders pour modifier les propriétés `playbackRate`, `loopStart` et `loopEnd` à la volée.
 
-<p>Lorsque la lecture de la source audio est terminée, elle boucle. Il est possible de contrôler la durée de la boucle en modifiant <code>loopStart</code> et <code>loopEnd</code>. Par exemple, si leurs valeurs sont fixées à 20 et 25, respectivement, le son bouclera entre la 20ème et la 25ème secondes du morceau.</p>
+Lorsque la lecture de la source audio est terminée, elle boucle. Il est possible de contrôler la durée de la boucle en modifiant `loopStart` et `loopEnd`. Par exemple, si leurs valeurs sont fixées à 20 et 25, respectivement, le son bouclera entre la 20ème et la 25ème secondes du morceau.
 
-<div class="note">
-<p><strong>Note :</strong> Voir <a href="http://mdn.github.io/decode-audio-data/"> l'exemple complet</a> et <a href="https://github.com/mdn/decode-audio-data">son code source</a>.</p>
-</div>
+> **Note :** Voir [ l'exemple complet](http://mdn.github.io/decode-audio-data/) et [son code source](https://github.com/mdn/decode-audio-data).
 
-<pre class="brush: js">function getData() {
+```js
+function getData() {
   source = contexteAudio.createBufferSource();
   requete = new XMLHttpRequest();
 
@@ -67,31 +67,19 @@ loopstartControl.oninput = function() {
 loopendControl.oninput = function() {
   source.loopEnd = loopendControl.value;
   loopendValue.innerHTML = loopendControl.value;
-}</pre>
-
-<h2 id="Spécification">Spécification</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-loopStart', 'loopStart')}}</td>
-   <td>{{Spec2('Web Audio API')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
-
-<p>{{Compat("api.AudioBufferSourceNode.loopStart")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
-</ul>
+}
+```
+
+## Spécification
+
+| Spécification                                                                                                    | Statut                               | Commentaire |
+| ---------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- |
+| {{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-loopStart', 'loopStart')}} | {{Spec2('Web Audio API')}} |             |
+
+## Compatibilité navigateurs
+
+{{Compat("api.AudioBufferSourceNode.loopStart")}}
+
+## Voir aussi
+
+- [Utiliser la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API)
diff --git a/files/fr/web/api/audiobuffersourcenode/playbackrate/index.md b/files/fr/web/api/audiobuffersourcenode/playbackrate/index.md
index 5f13016165..ff1797b523 100644
--- a/files/fr/web/api/audiobuffersourcenode/playbackrate/index.md
+++ b/files/fr/web/api/audiobuffersourcenode/playbackrate/index.md
@@ -3,49 +3,44 @@ title: AudioBufferSourceNode.playbackRate
 slug: Web/API/AudioBufferSourceNode/playbackRate
 translation_of: Web/API/AudioBufferSourceNode/playbackRate
 ---
-<p>{{ APIRef("Web Audio API") }}</p>
+{{ APIRef("Web Audio API") }}
 
-<div>
-<p>La propriété <code>playbackRate</code> de l'interface {{ domxref("AudioBufferSourceNode") }} est un {{domxref("AudioParam")}} de type <a href="/en-US/docs/DOM/AudioParam#k-rate">k-rate</a> qui définit la vitesse à laquelle le contenu audio sera lu.</p>
-</div>
+La propriété `playbackRate` de l'interface {{ domxref("AudioBufferSourceNode") }} est un {{domxref("AudioParam")}} de type [k-rate](/en-US/docs/DOM/AudioParam#k-rate) qui définit la vitesse à laquelle le contenu audio sera lu.
 
-<p>Une valeur de 1.0 (c'est ) indique que le son doit être lu à la vitesse de son taux d'échantillonnage, une valeur inférieure qu'il doit être lu plus lentement, et une valeur supérieure plus rapidement. la valeur par défaut est <code>1.0</code>. Pour toute autre valeur l'<code>AudioBufferSourceNode</code> rééchantillone le son avant de l'envoyer vers la sortie.</p>
+Une valeur de 1.0 (c'est ) indique que le son doit être lu à la vitesse de son taux d'échantillonnage, une valeur inférieure qu'il doit être lu plus lentement, et une valeur supérieure plus rapidement. la valeur par défaut est `1.0`. Pour toute autre valeur l'`AudioBufferSourceNode` rééchantillone le son avant de l'envoyer vers la sortie.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">var source = contexteAudio.createBufferSource();
+```js
+var source = contexteAudio.createBufferSource();
 source.playbackRate.value = 1.25; // proportion : 25% plus rapide que la vitesse normale
-</pre>
+```
 
-<div class="note">
-<p><strong>Note :</strong> Bien que le <code>AudioParam</code> renvoyé soit en lecture seule, la valeur qu'il représente ne l'est pas.</p>
-</div>
+> **Note :** Bien que le `AudioParam` renvoyé soit en lecture seule, la valeur qu'il représente ne l'est pas.
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>Un {{domxref("AudioParam")}} dont la {{domxref("AudioParam.value", "value")}} est un nombre flottant à double précision, qui représente la vitesse de lecture d'un son en proportion décimale du taux d'échantillonnage original.</p>
+Un {{domxref("AudioParam")}} dont la {{domxref("AudioParam.value", "value")}} est un nombre flottant à double précision, qui représente la vitesse de lecture d'un son en proportion décimale du taux d'échantillonnage original.
 
-<p>Considérons un buffer audio échantillonné à 44.1 kHz (44,100 échantillons par seconde). Observons l'effet de quelques valeurs de la propriété <code>playbackRate</code> :</p>
+Considérons un buffer audio échantillonné à 44.1 kHz (44,100 échantillons par seconde). Observons l'effet de quelques valeurs de la propriété `playbackRate` :
 
-<ul>
- <li>un <code>playbackRate</code> de 1.0 entraîne une lecture à vitesse originale : 44,100 Hz.</li>
- <li>un <code>playbackRate</code> de 0.5 entraîne une lecture à la moitié de la vitesse originale : 22,050 Hz.</li>
- <li>un <code>playbackRate</code> de 2.0 entraîne une lecture au double de la vitesse originale : 88,200 Hz.</li>
-</ul>
+- un `playbackRate` de 1.0 entraîne une lecture à vitesse originale : 44,100 Hz.
+- un `playbackRate` de 0.5 entraîne une lecture à la moitié de la vitesse originale : 22,050 Hz.
+- un `playbackRate` de 2.0 entraîne une lecture au double de la vitesse originale : 88,200 Hz.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Dans cet exemple, la fonction {{domxref("AudioContext.decodeAudioData")}} est utilisée pour décoder une piste audio et la mettre dans un {{domxref("AudioBufferSourceNode")}}. L'interface fournit deux boutons pour démarrer et arrêter la lecture, et des sliders pour modifier les propriétés <code>playbackRate</code>, <code>loopStart</code> et <code>loopEnd</code> à la volée.</p>
+Dans cet exemple, la fonction {{domxref("AudioContext.decodeAudioData")}} est utilisée pour décoder une piste audio et la mettre dans un {{domxref("AudioBufferSourceNode")}}. L'interface fournit deux boutons pour démarrer et arrêter la lecture, et des sliders pour modifier les propriétés `playbackRate`, `loopStart` et `loopEnd` à la volée.
 
-<div class="note">
-<p><strong>Note :</strong> Voir <a href="http://mdn.github.io/decode-audio-data/"> l'exemple complet</a> et <a href="https://github.com/mdn/decode-audio-data">son code source</a>.</p>
-</div>
+> **Note :** Voir [ l'exemple complet](http://mdn.github.io/decode-audio-data/) et [son code source](https://github.com/mdn/decode-audio-data).
 
-<pre class="brush: html">&lt;input class="playback-rate-control" type="range" min="0.25" max="3" step="0.05" value="1"&gt;
-&lt;span class="playback-rate-value"&gt;1.0&lt;/span&gt;
-</pre>
+```html
+<input class="playback-rate-control" type="range" min="0.25" max="3" step="0.05" value="1">
+<span class="playback-rate-value">1.0</span>
+```
 
-<pre class="brush: js">function getData() {
+```js
+function getData() {
   source = contexteAudio.createBufferSource();
   requete = new XMLHttpRequest();
 
@@ -94,31 +89,19 @@ stop.onclick = function() {
 playbackControl.oninput = function() {
   source.playbackRate.value = playbackControl.value;
   playbackValue.innerHTML = playbackControl.value;
-}</pre>
-
-<h2 id="Spécification">Spécification</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-playbackRate', 'playbackRate')}}</td>
-   <td>{{Spec2('Web Audio API')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
-
-<p>{{Compat("api.AudioBufferSourceNode.playbackRate")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
-</ul>
+}
+```
+
+## Spécification
+
+| Spécification                                                                                                            | Statut                               | Commentaire |
+| ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ----------- |
+| {{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-playbackRate', 'playbackRate')}} | {{Spec2('Web Audio API')}} |             |
+
+## Compatibilité navigateurs
+
+{{Compat("api.AudioBufferSourceNode.playbackRate")}}
+
+## Voir aussi
+
+- [Utiliser la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API)
diff --git a/files/fr/web/api/audiobuffersourcenode/start/index.md b/files/fr/web/api/audiobuffersourcenode/start/index.md
index b07993659d..a8d0fbeee7 100644
--- a/files/fr/web/api/audiobuffersourcenode/start/index.md
+++ b/files/fr/web/api/audiobuffersourcenode/start/index.md
@@ -3,83 +3,62 @@ title: AudioBufferSourceNode.start()
 slug: Web/API/AudioBufferSourceNode/start
 translation_of: Web/API/AudioBufferSourceNode/start
 ---
-<p>{{ APIRef("Web Audio API") }}</p>
+{{ APIRef("Web Audio API") }}
 
-<div>
-<p>La méthode <code>start()</code> de l'interface {{ domxref("AudioBufferSourceNode") }} permet de planifier la lecture du buffer audio.</p>
-</div>
+La méthode `start()` de l'interface {{ domxref("AudioBufferSourceNode") }} permet de planifier la lecture du buffer audio.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>AudioBufferSourceNode</em>.start([<em>when</em>][, <em>offset</em>][, <em>duration</em>]);
-</pre>
+    AudioBufferSourceNode.start([when][, offset][, duration]);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt>when {{optional_inline}}</dt>
- <dd>Le paramètre <code>when</code> indique <em>à quel moment</em> la lecture doit commencer. Si <code>when</code> représente une date passée, la lecture commence immédiatement. Si la méthode est invoquée plus d'une fois, ou après un appel à <code>AudioBufferSourceNode.stop()</code>, une exception est levée.<br>
- Le temps, en secondes, auquel la lecture doit commencer, spécifié dans le même systèmes de coordonnées temporalles utilisé par {{domxref("AudioContext")}}. Si <code>when</code> est inférieur à ({{domxref("AudioContext.currentTime")}}, ou égal à 0, la lecture commence immédiatement. <strong>La valeur par défaut est 0.</strong></dd>
- <dt>offset {{optional_inline}}</dt>
- <dd>Décalage, en secondes, indiquant où la lecture doit commencer. Par example, pour lancer la lecture au milieu d'un son durant 10 secondes, l'<code>offset</code> doit être 5. La valeur par défaut, 0, démarre la lecture au début du buffer. Les valeurs supérieures à la fin du son sont silencieusement ajustées à la valeur maximum possible (basée sur les propriétés {{domxref("AudioBuffer.duration", "duration")}} et/ou {{domxref("AudioBufferSourceNode.loopEnd", "loopEnd")}}). Le calcul du décalage se fait en utilisant le taux d'échantillonnage original, donc même lorsqu'un son est lu au double de sa vitesse, le milieu d'un buffer de 10 secondes est toujours 5.</dd>
- <dt>duration {{optional_inline}}</dt>
- <dd>Le paramètre <code>duration</code>, dont la valeur par défaut est la longueur du contenu moins le décalage (offset) du début de lecture, indique la longueur du contenu audio qui doit être lue.<br>
- Durée du son qui doit être lue, en secondes. Si ce paramètre n'est pas spécifié ou a pour valeur 0 (valeur par défaut), le son est lu jusqu'à la fin, s'il n'est pas arrêté par la méthode {{domxref("AudioScheduledSourceNode.stop", "stop()")}}. L'utilisation de ce paramètre est fonctionellement équivalente à l'appel de la méthode <code>start(when, offset)</code> suivi de la méthode <code>stop(when+duration)</code>.</dd>
-</dl>
+- when {{optional_inline}}
+  - : Le paramètre `when` indique _à quel moment_ la lecture doit commencer. Si `when` représente une date passée, la lecture commence immédiatement. Si la méthode est invoquée plus d'une fois, ou après un appel à `AudioBufferSourceNode.stop()`, une exception est levée.
+    Le temps, en secondes, auquel la lecture doit commencer, spécifié dans le même systèmes de coordonnées temporalles utilisé par {{domxref("AudioContext")}}. Si `when` est inférieur à ({{domxref("AudioContext.currentTime")}}, ou égal à 0, la lecture commence immédiatement. **La valeur par défaut est 0.**
+- offset {{optional_inline}}
+  - : Décalage, en secondes, indiquant où la lecture doit commencer. Par example, pour lancer la lecture au milieu d'un son durant 10 secondes, l'`offset` doit être 5. La valeur par défaut, 0, démarre la lecture au début du buffer. Les valeurs supérieures à la fin du son sont silencieusement ajustées à la valeur maximum possible (basée sur les propriétés {{domxref("AudioBuffer.duration", "duration")}} et/ou {{domxref("AudioBufferSourceNode.loopEnd", "loopEnd")}}). Le calcul du décalage se fait en utilisant le taux d'échantillonnage original, donc même lorsqu'un son est lu au double de sa vitesse, le milieu d'un buffer de 10 secondes est toujours 5.
+- duration {{optional_inline}}
+  - : Le paramètre `duration`, dont la valeur par défaut est la longueur du contenu moins le décalage (offset) du début de lecture, indique la longueur du contenu audio qui doit être lue.
+    Durée du son qui doit être lue, en secondes. Si ce paramètre n'est pas spécifié ou a pour valeur 0 (valeur par défaut), le son est lu jusqu'à la fin, s'il n'est pas arrêté par la méthode {{domxref("AudioScheduledSourceNode.stop", "stop()")}}. L'utilisation de ce paramètre est fonctionellement équivalente à l'appel de la méthode `start(when, offset)` suivi de la méthode `stop(when+duration)`.
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+### Valeur de retour
 
-<p>{{jsxref("undefined")}}.</p>
+{{jsxref("undefined")}}.
 
-<h3 id="Exceptions">Exceptions</h3>
+### Exceptions
 
-<dl>
- <dt><code>TypeError</code></dt>
- <dd>Une valeur négative a été spécifiée pour au moins l'un des trois paramètres de temps. N'essayez pas de trafiquer les lois de la physique.</dd>
- <dt><code>InvalidStateError</code></dt>
- <dd><code>start()</code> a déjà été appelé. Cette fonction ne peut être appelée qu'une seule fois pour chaque <code>AudioBufferSourceNode</code>.</dd>
-</dl>
+- `TypeError`
+  - : Une valeur négative a été spécifiée pour au moins l'un des trois paramètres de temps. N'essayez pas de trafiquer les lois de la physique.
+- `InvalidStateError`
+  - : `start()` a déjà été appelé. Cette fonction ne peut être appelée qu'une seule fois pour chaque `AudioBufferSourceNode`.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>L'exemple le plus simple lance la lecture du buffer audio depuis le début - inutile de spécifier des paramètres dans ce cas:</p>
+L'exemple le plus simple lance la lecture du buffer audio depuis le début - inutile de spécifier des paramètres dans ce cas:
 
-<pre class="brush: js">source.start();</pre>
+```js
+source.start();
+```
 
-<p>L'exemple suivant, plus complexe, jouera, après une seconde de pause, un tronçon d'une durée de 10 secondes à partir de la 3ème seconde des données en mémoire.</p>
+L'exemple suivant, plus complexe, jouera, après une seconde de pause, un tronçon d'une durée de 10 secondes à partir de la 3ème seconde des données en mémoire.
 
-<pre class="brush: js">source.start(contexteAudio.currentTime + 1,3,10);</pre>
+```js
+source.start(contexteAudio.currentTime + 1,3,10);
+```
 
-<div class="note">
-<p><strong>Note :</strong> Pour un exemple plus complexe montrant la méthode <code>start()</code> en action, consulter l'exemple {{domxref("AudioContext.decodeAudioData")}}. Voir aussi <a href="http://mdn.github.io/decode-audio-data/"> l'exemple complet</a> et <a href="https://github.com/mdn/decode-audio-data">son code source</a>.</p>
-</div>
+> **Note :** Pour un exemple plus complexe montrant la méthode `start()` en action, consulter l'exemple {{domxref("AudioContext.decodeAudioData")}}. Voir aussi [ l'exemple complet](http://mdn.github.io/decode-audio-data/) et [son code source](https://github.com/mdn/decode-audio-data).
 
-<dl>
-</dl>
+## Spécification
 
-<h2 id="Spécification">Spécification</h2>
+| Spécification                                                                                                                                                        | Statut                               | Commentaire |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- |
+| {{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-start-void-double-when-double-offset-double-duration', 'start()')}} | {{Spec2('Web Audio API')}} |             |
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-start-void-double-when-double-offset-double-duration', 'start()')}}</td>
-   <td>{{Spec2('Web Audio API')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+## Compatibilité navigateurs
 
-<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+{{Compat("api.AudioBufferSourceNode.start")}}
 
-<p>{{Compat("api.AudioBufferSourceNode.start")}}</p>
+## Voir aussi
 
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
-</ul>
+- [Utiliser la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API)
diff --git a/files/fr/web/api/audiocontext/createmediaelementsource/index.md b/files/fr/web/api/audiocontext/createmediaelementsource/index.md
index 3809f56dcd..298453e5e9 100644
--- a/files/fr/web/api/audiocontext/createmediaelementsource/index.md
+++ b/files/fr/web/api/audiocontext/createmediaelementsource/index.md
@@ -3,39 +3,36 @@ title: AudioContext.createMediaElementSource()
 slug: Web/API/AudioContext/createMediaElementSource
 translation_of: Web/API/AudioContext/createMediaElementSource
 ---
-<p>{{ APIRef("Web Audio API") }}</p>
+{{ APIRef("Web Audio API") }}
 
-<div>
-<p>La méthode <code>createMediaElementSource()</code> de l’interface {{ domxref("AudioContext") }} est utilisée pour créer un nouvel objet {{ domxref("MediaElementAudioSourceNode") }} d’après un élément HTML {{ htmlelement("audio") }} ou {{ htmlelement("video") }} existant, permettant ainsi de jouer et de manipuler l’audio de cet élément.</p>
-</div>
+La méthode `createMediaElementSource()` de l’interface {{ domxref("AudioContext") }} est utilisée pour créer un nouvel objet {{ domxref("MediaElementAudioSourceNode") }} d’après un élément HTML {{ htmlelement("audio") }} ou {{ htmlelement("video") }} existant, permettant ainsi de jouer et de manipuler l’audio de cet élément.
 
-<p>Pour plus de détails à propos des nœuds source audio des éléments média, constultez la page de référence de {{ domxref("MediaElementAudioSourceNode") }}.</p>
+Pour plus de détails à propos des nœuds source audio des éléments média, constultez la page de référence de {{ domxref("MediaElementAudioSourceNode") }}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">var audioCtx = new AudioContext();
-var source = audioCtx.createMediaElementSource(myMediaElement);</pre>
+```js
+var audioCtx = new AudioContext();
+var source = audioCtx.createMediaElementSource(myMediaElement);
+```
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>myMediaElement</code></dt>
- <dd>Un objet {{domxref("HTMLMediaElement")}} que vous voulez injecter dans un graphe de traitement audio pour le manipuler.</dd>
-</dl>
+- `myMediaElement`
+  - : Un objet {{domxref("HTMLMediaElement")}} que vous voulez injecter dans un graphe de traitement audio pour le manipuler.
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Un {{domxref("MediaElementAudioSourceNode")}}.</p>
+Un {{domxref("MediaElementAudioSourceNode")}}.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Cet exemple simple crée une source depuis un élément {{ htmlelement("audio") }} grâce à <code>createMediaElementSource()</code>, puis passe le signal audio à travers un {{ domxref("GainNode") }} avant de l’injecter dans le {{ domxref("AudioDestinationNode") }} pour la lecture. Quand le pointeur de la souris est déplacé, la fonction <code>updatePage()</code> est invoquée, et calcule le gain actuel comme rapport de la position Y de la souris divisée par la hauteur totale de la fenêtre. Vous pouvez ainsi augmenter ou diminuer le volume de la musique jouée, en déplaçant le pointeur de la souris vers le haut ou vers le bas.</p>
+Cet exemple simple crée une source depuis un élément {{ htmlelement("audio") }} grâce à `createMediaElementSource()`, puis passe le signal audio à travers un {{ domxref("GainNode") }} avant de l’injecter dans le {{ domxref("AudioDestinationNode") }} pour la lecture. Quand le pointeur de la souris est déplacé, la fonction `updatePage()` est invoquée, et calcule le gain actuel comme rapport de la position Y de la souris divisée par la hauteur totale de la fenêtre. Vous pouvez ainsi augmenter ou diminuer le volume de la musique jouée, en déplaçant le pointeur de la souris vers le haut ou vers le bas.
 
-<div class="note">
-<p><strong>Note :</strong> Vous pouvez également <a href="http://mdn.github.io/webaudio-examples/media-source-buffer/">voir cet exemple en temps réel</a>, ou <a href="https://github.com/mdn/webaudio-examples/tree/master/media-source-buffer">examiner le code source</a>.</p>
-</div>
+> **Note :** Vous pouvez également [voir cet exemple en temps réel](http://mdn.github.io/webaudio-examples/media-source-buffer/), ou [examiner le code source](https://github.com/mdn/webaudio-examples/tree/master/media-source-buffer).
 
-<pre class="brush: js">var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+```js
+var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
 var myAudio = document.querySelector('audio');
 var pre = document.querySelector('pre');
 var myScript = document.querySelector('script');
@@ -70,35 +67,21 @@ function updatePage(e) {
 // et le nœud gain à la destination, de sorte qu’on puisse jouer la
 // musique et ajuster le volume avec le curseur de la souris
 source.connect(gainNode);
-gainNode.connect(audioCtx.destination);</pre>
-
-<div class="note">
-<p><strong>Note :</strong> Du fait de l’appel à <code>createMediaElementSource()</code>, la lecture de l’audio du {{ domxref("HTMLMediaElement") }} est redirigée dans le graphe de traitement de l’AudioContext. Ainsi, jouer / mettre en pause le média est toujours possible via l’API des éléments média ou via les contrôles du lecteur.</p>
-</div>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Web Audio API', '#widl-AudioContext-createMediaElementSource-MediaElementAudioSourceNode-HTMLMediaElement-mediaElement', 'createMediaElementSource()')}}</td>
-   <td>{{Spec2('Web Audio API')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.AudioContext.createMediaElementSource")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
-</ul>
+gainNode.connect(audioCtx.destination);
+```
+
+> **Note :** Du fait de l’appel à `createMediaElementSource()`, la lecture de l’audio du {{ domxref("HTMLMediaElement") }} est redirigée dans le graphe de traitement de l’AudioContext. Ainsi, jouer / mettre en pause le média est toujours possible via l’API des éléments média ou via les contrôles du lecteur.
+
+## Spécifications
+
+| Spécification                                                                                                                                                                                                                | Statut                               | Commentaire |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- |
+| {{SpecName('Web Audio API', '#widl-AudioContext-createMediaElementSource-MediaElementAudioSourceNode-HTMLMediaElement-mediaElement', 'createMediaElementSource()')}} | {{Spec2('Web Audio API')}} |             |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.AudioContext.createMediaElementSource")}}
+
+## Voir aussi
+
+- [Utiliser la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API)
diff --git a/files/fr/web/api/audiocontext/index.md b/files/fr/web/api/audiocontext/index.md
index 6378d52164..e855ad68ed 100644
--- a/files/fr/web/api/audiocontext/index.md
+++ b/files/fr/web/api/audiocontext/index.md
@@ -10,163 +10,140 @@ tags:
   - Web Audio API
 translation_of: Web/API/AudioContext
 ---
-<p>{{APIRef("Web Audio API")}}</p>
-
-<p>L'interface AudioContext représente un graphe de traitement audio fait de modules audio reliés entre eux, chaque module correspondant à un {{domxref ("AudioNode")}}. Un contexte audio contrôle à la fois la création des nœuds qu'il contient et l'exécution du traitement audio, ou du décodage. On commence toujours par créer un contexte audio, et tout ce qui va se passer ensuite se situera dans ce contexte.</p>
-
-<p>Un contexte audio peut être la cible d'événements, par conséquent il implémente l'interface {{domxref ("EventTarget")}}.</p>
-
-<p>{{InheritanceDiagram}}</p>
-
-<h2 id="Constructeur">Constructeur</h2>
-
-<dl>
- <dt>{{domxref("AudioContext.AudioContext", "AudioContext()")}}</dt>
- <dd>Crée et retourne un nouvel objet <code>AudioContext</code>.</dd>
-</dl>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<dl>
- <dt>{{domxref("AudioContext.currentTime")}} {{readonlyInline}}</dt>
- <dd>Renvoie un double flottant, qui représente un temps en secondes en augmentation continue, utilisé pour situer dans le temps. Il commence à <code>0</code>.</dd>
- <dt>{{domxref("AudioContext.destination")}} {{readonlyInline}}</dt>
- <dd>Retourne un {{domxref ("AudioDestinationNode")}} représentant la destination finale de tous les fichiers audio dans un contexte. On peut le considérer comme un dispositif de rendu audio.</dd>
-</dl>
-
-<dl>
- <dt>{{domxref("AudioContext.listener")}} {{readonlyInline}}</dt>
- <dd>Renvoie l'objet {{domxref("AudioListener")}}, utilisé pour la spatialisation 3D.</dd>
-</dl>
-
-<dl>
- <dt>{{domxref("AudioContext.sampleRate")}} {{readonlyInline}}</dt>
- <dd>Renvoie un nombre flottant représentant la fréquence d'échantillonnage (échantillons par seconde) utilisée par tous les nœuds dans ce contexte.La fréquence d'échantillonnage d'un contexte audio ne peut pas être modifiée.</dd>
- <dt>{{domxref("AudioContext.state")}} {{readonlyInline}}</dt>
- <dd>Renvoie l'état actuel du contexte audio.</dd>
- <dt>{{domxref("AudioContext.mozAudioChannelType")}} {{ non-standard_inline() }} {{readonlyInline}}</dt>
- <dd>Sur Firefox OS, utilisé pour renvoyer la piste audio dans laquelle sera jouée le son qui sera lancé dans le contexte audio.</dd>
-</dl>
-
-<h3 id="Event_handlers">Event handlers</h3>
-
-<dl>
- <dt>{{domxref("AudioContext.onstatechange")}}</dt>
- <dd>Un gestionnaire d'évènement déclenché par un évènement du type {{event("statechange")}}. Cela a lieu quand l'état du contexte audio change, en raison de l'appel des méthodes de changement d'état ({{domxref("AudioContext.suspend")}}, {{domxref("AudioContext.resume")}}, ou {{domxref("AudioContext.close")}}.)</dd>
-</dl>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<p><em>Met également en œuvre des méthodes de l'interface {{domxref("EventTarget")}}.</em></p>
-
-<dl>
- <dt>{{domxref("AudioContext.close()")}}</dt>
- <dd>Supprime le contexte audio, et libère toutes les ressources audio système qu'il utilisait.</dd>
- <dt>{{domxref("AudioContext.createBuffer()")}}</dt>
- <dd>Crée un nouvel objet {{domxref ("AudioBuffer")}} vide, auquel on pourra assigner des données et que l'on pourra jouer via un {{ domxref("AudioBufferSourceNode") }}</dd>
- <dt>{{domxref("AudioContext.createBufferSource()")}}</dt>
- <dd>Crée un objet {{domxref ("AudioBufferSourceNode")}}, qui peut être utilisé pour jouer et manipuler des données audio contenues dans un objet {{domxref("AudioBuffer")}}. Les {{domxref("AudioBuffer")}}s sont créés avec la fonction {{domxref("AudioContext.createBuffer")}} ou retournés par la fonction {{domxref("AudioContext.decodeAudioData")}} quand elle décode une piste audio avec succès.</dd>
- <dt>{{domxref("AudioContext.createMediaElementSource()")}}</dt>
- <dd>Crée un objet {{domxref ("MediaElementAudioSourceNode")}} associé à {{domxref ("HTMLMediaElement")}}. Il peut être utilisé pour manipuler le son d'éléments {{HTMLElement("video")}} ou {{HTMLElement("audio")}}.</dd>
- <dt>{{domxref("AudioContext.createMediaStreamSource()")}}</dt>
- <dd>Crée un objet {{domxref ("MediaStreamAudioSourceNode")}} associé à un {{domxref ("MediaStream")}} correspondant à un flux audio, qui peut provenir du microphone de l'ordinateur local ou d'autres sources.</dd>
- <dt>{{domxref("AudioContext.createMediaStreamDestination()")}}</dt>
- <dd>Crée un objet {{domxref ("MediaStreamAudioDestinationNode")}} associé à un {{domxref ("MediaStream")}} correspondant à un flux audio, qui peut être stocké dans un fichier local ou envoyé à un autre ordinateur.</dd>
- <dt>{{domxref("AudioContext.createScriptProcessor()")}}</dt>
- <dd>Crée un objet {{domxref ("ScriptProcessorNode")}} qui sert à faire du traitement audio directement avec JavaScript.</dd>
- <dt>{{domxref("AudioContext.createStereoPanner()")}}</dt>
- <dd>Crée un objet {{domxref ("StereoPannerNode")}} qui permet d'appliquer une panoramique sonore à une source audio.</dd>
- <dt>{{domxref("AudioContext.createAnalyser()")}}</dt>
- <dd>Crée un objet {{domxref ("AnalyserNode")}} qui expose les données de temps et de fréquence, et peut être utilisé pour créer des visualisations de données.</dd>
-</dl>
-
-<dl>
- <dt>{{domxref("AudioContext.createBiquadFilter()")}}</dt>
- <dd>Crée un objet {{domxref ("BiquadFilterNode")}}, qui représente un filtre de deuxième niveau, qui combine différents types de filtres de base : fréquences hautes, fréquences basses, passe-bande, etc.</dd>
-</dl>
-
-<dl>
- <dt>{{domxref("AudioContext.createChannelMerger()")}}</dt>
- <dd>Crée un objet {{domxref ("ChannelMergerNode")}} qui permet de rassembler les canaux de différents flux audio en un seul flux.</dd>
- <dt>{{domxref("AudioContext.createChannelSplitter()")}}</dt>
- <dd>Crée un objet {{domxref ("ChannelSplitterNode")}} utilisé pour accéder aux différents canaux d'un même flux audio et les traiter séparément.</dd>
- <dt>{{domxref("AudioContext.createConvolver()")}}</dt>
- <dd>Crée un objet {{domxref ("ConvolverNode")}}, qui permet d'appliquer des effets de convolution à un graphe audio, par exemple un effet de réverb.</dd>
- <dt>{{domxref("AudioContext.createDelay()")}}</dt>
- <dd>Crée un objet {{domxref ("DelayNode")}}, utilisé pour retarder le signal audio entrant d'un certain temps. Il est également </dd>
- <dt>{{domxref("AudioContext.createDynamicsCompressor()")}}</dt>
- <dd>Crée un objet {{domxref("DynamicsCompressorNode")}} qui permet d'appliquer une compression sur un signal audio.</dd>
- <dt>{{domxref("AudioContext.createGain()")}}</dt>
- <dd>Crée un objet {{domxref ("GainNode")}} qui permet de controller le niveau sonore global d'un graphe audio.</dd>
- <dt>{{domxref("AudioContext.createIIRFilter()")}}</dt>
- <dd>Crée un objet {{domxref("IIRFilterNode")}}, qui représente un filtre de second ordre configurable comme différents types de filtres communs.</dd>
- <dt>{{domxref("AudioContext.createOscillator()")}}</dt>
- <dd>Crée un objet {{domxref("OscillatorNode")}} qui représente une onde périodique. Il génère simplement un son.</dd>
- <dt>{{domxref("AudioContext.createPanner()")}}</dt>
- <dd>Crée un objet {{domxref("PannerNode")}} utilisé pour spatialiser une source audio entrante dans un espace 3D.</dd>
- <dt>{{domxref("AudioContext.createPeriodicWave()")}}</dt>
- <dd>Crée un objet {{domxref("PeriodicWave")}}, utilisé pour définir une onde périodique qui peut être utilisée pour contrôler la sortie d'un {{ domxref("OscillatorNode") }}.</dd>
- <dt>{{domxref("AudioContext.createWaveShaper()")}}</dt>
- <dd>Crée un objet {{domxref ("WaveShaperNode")}}, qui permet d'implémenter des effets de distorsion non linéaires.</dd>
- <dt>{{domxref("AudioContext.createAudioWorker()")}}</dt>
- <dd>Crée un objet {{domxref("AudioWorkerNode")}}, qui permet d'interagir avec un thread web worker afin de générer, traiter, ou analyser le son directement. Ajouté à la spec le 29 août 2014, mais encore implémenté par aucun des navigateurs à ce jour.</dd>
- <dt>{{domxref("AudioContext.decodeAudioData()")}}</dt>
- <dd>Décode de façon asynchrone les données d'un fichier audio contenues dans un objet {{domxref("ArrayBuffer")}}. Dans ce cas, le ArrayBuffer est en général chargé depuis un attribut de réponse {{domxref("XMLHttpRequest")}} quand l'attribut <code>responseType</code> est <code>arraybuffer</code>. Cette méthode ne fonctionne que sur des fichiers complets, pas sur des fragments de fichiers.</dd>
- <dt>{{domxref("AudioContext.resume()")}}</dt>
- <dd>Reprend le défilement du temps dans un contexte audio où il a précédemment été suspendu.</dd>
- <dt>{{domxref("AudioContext.suspend()")}}</dt>
- <dd>Suspend le défilement du temps dans un contexte audio, empêchant de façon temporaire l'accès au hardware audio, et réduisant par là l'utilisation du CPU et de la batterie.</dd>
-</dl>
-
-<h2 id="Méthodes_obsolètes">Méthodes obsolètes</h2>
-
-<dl>
- <dt>{{domxref("AudioContext.createJavaScriptNode()")}}</dt>
- <dd>Crée un objet {{domxref("JavaScriptNode")}}, utilisé pour un traitement audio directement en JavaScript. Cette méthode est obsolète, et a été remplacée par {{domxref("AudioContext.createScriptProcessor()")}}.</dd>
- <dt>{{domxref("AudioContext.createWaveTable()")}}</dt>
- <dd>Crée un objet {{domxref("WaveTableNode")}}, utilisé pour définir une onde audio périodique. Cette méthode est obsolète, et a été remplacée par {{domxref("AudioContext.createPeriodicWave()")}}.</dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Déclaration basique d'un audio context :</p>
-
-<pre><code>var contexteAudio = new AudioContext;</code></pre>
-
-<p>Variante avec gestion de la compatibilité navigateur:</p>
-
-<pre><code>var AudioContext = window.AudioContext || window.webkitAudioContext;
-var contexteAudio = new AudioContext();
-
-var oscillatorNode = contexteAudio.createOscillator();
-var gainNode = contexteAudio.createGain();
-var finish = contexteAudio.destination;
-// etc.</code></pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Web Audio API', '#AudioContext-section', 'AudioNode')}}</td>
-   <td>{{Spec2('Web Audio API')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.AudioContext")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
- <li>{{domxref("OfflineAudioContext")}}</li>
-</ul>
+{{APIRef("Web Audio API")}}
+
+L'interface AudioContext représente un graphe de traitement audio fait de modules audio reliés entre eux, chaque module correspondant à un {{domxref ("AudioNode")}}. Un contexte audio contrôle à la fois la création des nœuds qu'il contient et l'exécution du traitement audio, ou du décodage. On commence toujours par créer un contexte audio, et tout ce qui va se passer ensuite se situera dans ce contexte.
+
+Un contexte audio peut être la cible d'événements, par conséquent il implémente l'interface {{domxref ("EventTarget")}}.
+
+{{InheritanceDiagram}}
+
+## Constructeur
+
+- {{domxref("AudioContext.AudioContext", "AudioContext()")}}
+  - : Crée et retourne un nouvel objet `AudioContext`.
+
+## Propriétés
+
+- {{domxref("AudioContext.currentTime")}} {{readonlyInline}}
+  - : Renvoie un double flottant, qui représente un temps en secondes en augmentation continue, utilisé pour situer dans le temps. Il commence à `0`.
+- {{domxref("AudioContext.destination")}} {{readonlyInline}}
+  - : Retourne un {{domxref ("AudioDestinationNode")}} représentant la destination finale de tous les fichiers audio dans un contexte. On peut le considérer comme un dispositif de rendu audio.
+
+<!---->
+
+- {{domxref("AudioContext.listener")}} {{readonlyInline}}
+  - : Renvoie l'objet {{domxref("AudioListener")}}, utilisé pour la spatialisation 3D.
+
+<!---->
+
+- {{domxref("AudioContext.sampleRate")}} {{readonlyInline}}
+  - : Renvoie un nombre flottant représentant la fréquence d'échantillonnage (échantillons par seconde) utilisée par tous les nœuds dans ce contexte.La fréquence d'échantillonnage d'un contexte audio ne peut pas être modifiée.
+- {{domxref("AudioContext.state")}} {{readonlyInline}}
+  - : Renvoie l'état actuel du contexte audio.
+- {{domxref("AudioContext.mozAudioChannelType")}} {{ non-standard_inline() }} {{readonlyInline}}
+  - : Sur Firefox OS, utilisé pour renvoyer la piste audio dans laquelle sera jouée le son qui sera lancé dans le contexte audio.
+
+### Event handlers
+
+- {{domxref("AudioContext.onstatechange")}}
+  - : Un gestionnaire d'évènement déclenché par un évènement du type {{event("statechange")}}. Cela a lieu quand l'état du contexte audio change, en raison de l'appel des méthodes de changement d'état ({{domxref("AudioContext.suspend")}}, {{domxref("AudioContext.resume")}}, ou {{domxref("AudioContext.close")}}.)
+
+## Méthodes
+
+_Met également en œuvre des méthodes de l'interface {{domxref("EventTarget")}}._
+
+- {{domxref("AudioContext.close()")}}
+  - : Supprime le contexte audio, et libère toutes les ressources audio système qu'il utilisait.
+- {{domxref("AudioContext.createBuffer()")}}
+  - : Crée un nouvel objet {{domxref ("AudioBuffer")}} vide, auquel on pourra assigner des données et que l'on pourra jouer via un {{ domxref("AudioBufferSourceNode") }}
+- {{domxref("AudioContext.createBufferSource()")}}
+  - : Crée un objet {{domxref ("AudioBufferSourceNode")}}, qui peut être utilisé pour jouer et manipuler des données audio contenues dans un objet {{domxref("AudioBuffer")}}. Les {{domxref("AudioBuffer")}}s sont créés avec la fonction {{domxref("AudioContext.createBuffer")}} ou retournés par la fonction {{domxref("AudioContext.decodeAudioData")}} quand elle décode une piste audio avec succès.
+- {{domxref("AudioContext.createMediaElementSource()")}}
+  - : Crée un objet {{domxref ("MediaElementAudioSourceNode")}} associé à {{domxref ("HTMLMediaElement")}}. Il peut être utilisé pour manipuler le son d'éléments {{HTMLElement("video")}} ou {{HTMLElement("audio")}}.
+- {{domxref("AudioContext.createMediaStreamSource()")}}
+  - : Crée un objet {{domxref ("MediaStreamAudioSourceNode")}} associé à un {{domxref ("MediaStream")}} correspondant à un flux audio, qui peut provenir du microphone de l'ordinateur local ou d'autres sources.
+- {{domxref("AudioContext.createMediaStreamDestination()")}}
+  - : Crée un objet {{domxref ("MediaStreamAudioDestinationNode")}} associé à un {{domxref ("MediaStream")}} correspondant à un flux audio, qui peut être stocké dans un fichier local ou envoyé à un autre ordinateur.
+- {{domxref("AudioContext.createScriptProcessor()")}}
+  - : Crée un objet {{domxref ("ScriptProcessorNode")}} qui sert à faire du traitement audio directement avec JavaScript.
+- {{domxref("AudioContext.createStereoPanner()")}}
+  - : Crée un objet {{domxref ("StereoPannerNode")}} qui permet d'appliquer une panoramique sonore à une source audio.
+- {{domxref("AudioContext.createAnalyser()")}}
+  - : Crée un objet {{domxref ("AnalyserNode")}} qui expose les données de temps et de fréquence, et peut être utilisé pour créer des visualisations de données.
+
+<!---->
+
+- {{domxref("AudioContext.createBiquadFilter()")}}
+  - : Crée un objet {{domxref ("BiquadFilterNode")}}, qui représente un filtre de deuxième niveau, qui combine différents types de filtres de base : fréquences hautes, fréquences basses, passe-bande, etc.
+
+<!---->
+
+- {{domxref("AudioContext.createChannelMerger()")}}
+  - : Crée un objet {{domxref ("ChannelMergerNode")}} qui permet de rassembler les canaux de différents flux audio en un seul flux.
+- {{domxref("AudioContext.createChannelSplitter()")}}
+  - : Crée un objet {{domxref ("ChannelSplitterNode")}} utilisé pour accéder aux différents canaux d'un même flux audio et les traiter séparément.
+- {{domxref("AudioContext.createConvolver()")}}
+  - : Crée un objet {{domxref ("ConvolverNode")}}, qui permet d'appliquer des effets de convolution à un graphe audio, par exemple un effet de réverb.
+- {{domxref("AudioContext.createDelay()")}}
+  - : Crée un objet {{domxref ("DelayNode")}}, utilisé pour retarder le signal audio entrant d'un certain temps. Il est également
+- {{domxref("AudioContext.createDynamicsCompressor()")}}
+  - : Crée un objet {{domxref("DynamicsCompressorNode")}} qui permet d'appliquer une compression sur un signal audio.
+- {{domxref("AudioContext.createGain()")}}
+  - : Crée un objet {{domxref ("GainNode")}} qui permet de controller le niveau sonore global d'un graphe audio.
+- {{domxref("AudioContext.createIIRFilter()")}}
+  - : Crée un objet {{domxref("IIRFilterNode")}}, qui représente un filtre de second ordre configurable comme différents types de filtres communs.
+- {{domxref("AudioContext.createOscillator()")}}
+  - : Crée un objet {{domxref("OscillatorNode")}} qui représente une onde périodique. Il génère simplement un son.
+- {{domxref("AudioContext.createPanner()")}}
+  - : Crée un objet {{domxref("PannerNode")}} utilisé pour spatialiser une source audio entrante dans un espace 3D.
+- {{domxref("AudioContext.createPeriodicWave()")}}
+  - : Crée un objet {{domxref("PeriodicWave")}}, utilisé pour définir une onde périodique qui peut être utilisée pour contrôler la sortie d'un {{ domxref("OscillatorNode") }}.
+- {{domxref("AudioContext.createWaveShaper()")}}
+  - : Crée un objet {{domxref ("WaveShaperNode")}}, qui permet d'implémenter des effets de distorsion non linéaires.
+- {{domxref("AudioContext.createAudioWorker()")}}
+  - : Crée un objet {{domxref("AudioWorkerNode")}}, qui permet d'interagir avec un thread web worker afin de générer, traiter, ou analyser le son directement. Ajouté à la spec le 29 août 2014, mais encore implémenté par aucun des navigateurs à ce jour.
+- {{domxref("AudioContext.decodeAudioData()")}}
+  - : Décode de façon asynchrone les données d'un fichier audio contenues dans un objet {{domxref("ArrayBuffer")}}. Dans ce cas, le ArrayBuffer est en général chargé depuis un attribut de réponse {{domxref("XMLHttpRequest")}} quand l'attribut `responseType` est `arraybuffer`. Cette méthode ne fonctionne que sur des fichiers complets, pas sur des fragments de fichiers.
+- {{domxref("AudioContext.resume()")}}
+  - : Reprend le défilement du temps dans un contexte audio où il a précédemment été suspendu.
+- {{domxref("AudioContext.suspend()")}}
+  - : Suspend le défilement du temps dans un contexte audio, empêchant de façon temporaire l'accès au hardware audio, et réduisant par là l'utilisation du CPU et de la batterie.
+
+## Méthodes obsolètes
+
+- {{domxref("AudioContext.createJavaScriptNode()")}}
+  - : Crée un objet {{domxref("JavaScriptNode")}}, utilisé pour un traitement audio directement en JavaScript. Cette méthode est obsolète, et a été remplacée par {{domxref("AudioContext.createScriptProcessor()")}}.
+- {{domxref("AudioContext.createWaveTable()")}}
+  - : Crée un objet {{domxref("WaveTableNode")}}, utilisé pour définir une onde audio périodique. Cette méthode est obsolète, et a été remplacée par {{domxref("AudioContext.createPeriodicWave()")}}.
+
+## Exemples
+
+Déclaration basique d'un audio context :
+
+    var contexteAudio = new AudioContext;
+
+Variante avec gestion de la compatibilité navigateur:
+
+    var AudioContext = window.AudioContext || window.webkitAudioContext;
+    var contexteAudio = new AudioContext();
+
+    var oscillatorNode = contexteAudio.createOscillator();
+    var gainNode = contexteAudio.createGain();
+    var finish = contexteAudio.destination;
+    // etc.
+
+## Spécifications
+
+| Spécification                                                                            | Statut                               | Commentaire |
+| ---------------------------------------------------------------------------------------- | ------------------------------------ | ----------- |
+| {{SpecName('Web Audio API', '#AudioContext-section', 'AudioNode')}} | {{Spec2('Web Audio API')}} |             |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.AudioContext")}}
+
+## Voir aussi
+
+- [Utiliser la Web Audio API](/fr/docs/Web_Audio_API/Using_Web_Audio_API)
+- {{domxref("OfflineAudioContext")}}
diff --git a/files/fr/web/api/audiolistener/index.md b/files/fr/web/api/audiolistener/index.md
index b8343c1642..3b0e48616a 100644
--- a/files/fr/web/api/audiolistener/index.md
+++ b/files/fr/web/api/audiolistener/index.md
@@ -8,100 +8,77 @@ tags:
   - Web Audio API
 translation_of: Web/API/AudioListener
 ---
-<p>{{APIRef("Web Audio API")}}</p>
-
-<p>L'interface <em>AudioListener </em>représente la position et l'orientation de l'unique personne écoutant la scène audio; elle est utilisée dans le cadre d'une <a href="/en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics">spatialisation audio</a>. Tous les {{domxref ("PannerNode")}} sont spatialisés par rapport à l'objet <em>AudioListener </em>stocké dans la propriété {{domxref ("AudioContext.listener")}}.</p>
-
-<p>Il est important de noter qu'il n'y a qu'un seul auditeur par contexte, et qu'il ne s'agit pas d'un {{domxref("AudioNode")}}.</p>
-
-<p><img alt="On voit ici la position, les vecteurs haut et face d'un AudioListener, avec les vecteurs haut et face à 90° l'un de l'autre." src="webaudiolistenerreduced.png"></p>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<p><em>Hérite des propriétés de son parent, </em><code>AudioNode</code>.</p>
-
-<div class="note">
-<p><strong>Note :</strong> Les valeurs de position, d'orientation, et du haut de la tête peuvent être définies et lues à l'aide de différentes syntaxes. Par exemple, l'accès se fait à l'aide de la propriété, <code>AudioListener.positionX</code>, tandis que la même propriété est définir à l'aide de <code>AudioListener.positionX.value</code>. C'est pourquoi ces valeurs ne sont pas marquées  en lecture seule, bien qu'elles apparaissent comme tel dans la spécification IDL.</p>
-</div>
-
-<dl>
- <dt>{{domxref("AudioListener.positionX")}}</dt>
- <dd>Position de l'auditeur avec des coordonnées cartésiennes selon la règle de la main droite. La valeur par défaut est 0.</dd>
- <dt>{{domxref("AudioListener.positionY")}}</dt>
- <dd>Position verticale de l'auditeur avec des coordonnées cartésiennes selon la règle de la main droite. La valeur par défaut est 0.</dd>
- <dt>{{domxref("AudioListener.positionZ")}}</dt>
- <dd>Position longitudinale (avant et arrière) de l'auditeur avec des coordonnées cartésiennes selon la règle de la main droite. La valeur par défaut est 0.</dd>
- <dt>{{domxref("AudioListener.forwardX")}}</dt>
- <dd>Position horizontale de l'orientation vers l'avant de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (<code>positionX</code>, <code>positionY</code>, and <code>positionZ</code>). Les valeurs de direction vers l'avant et vers le haut sont indépendantes  linéairement l'une de l'autre. La valeur par défaut est 0.</dd>
- <dt>{{domxref("AudioListener.forwardY")}}</dt>
- <dd>Position verticale de l'orientation vers l'avant de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (<code>positionX</code>, <code>positionY</code>, and <code>positionZ</code>). Les valeurs de direction vers l'avant et vers le haut sont indépendantes  linéairement l'une de l'autre. La valeur par défaut est 0.</dd>
- <dt>{{domxref("AudioListener.forwardZ")}}</dt>
- <dd>Position longitudinale (avant et arrière) de l'orientation vers l'avant de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (<code>positionX</code>, <code>positionY</code>, and <code>positionZ</code>). Les valeurs de direction vers l'avant et vers le haut sont indépendantes linéairement l'une de l'autre. La valeur par défaut est 0.</dd>
- <dt>{{domxref("AudioListener.upX")}}</dt>
- <dd>Position horizontale du haut de la tête de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (<code>positionX</code>, <code>positionY</code>, and <code>positionZ</code>). Les valeurs de direction vers l'avant et vers le haut sont indépendantes linéairement l'une de l'autre. La valeur par défaut est 0.</dd>
- <dt>{{domxref("AudioListener.upY")}}</dt>
- <dd>Position verticale du haut de la tête de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (<code>positionX</code>, <code>positionY</code>, and <code>positionZ</code>). Les valeurs de direction vers l'avant et vers le haut sont indépendantes linéairement l'une de l'autre. La valeur par défaut est 0.</dd>
- <dt>{{domxref("AudioListener.upZ")}}</dt>
- <dd>Position longitudinale (avant et arrière) du haut de la tête de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (<code>positionX</code>, <code>positionY</code>, and <code>positionZ</code>). Les valeurs de direction vers l'avant et vers le haut sont indépendantes linéairement l'une de l'autre. La valeur par défaut est 0.</dd>
-</dl>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<p><em>Hérite des propriétés de son parent, </em><code>AudioNode</code>.</p>
-
-<dl>
- <dt>{{domxref("AudioListener.setOrientation()")}}</dt>
- <dd>Définit l'orientation de l'auditeur.</dd>
- <dt>{{domxref("AudioListener.setPosition()")}}</dt>
- <dd>Définit la position de l'auditeur. Consulter {{anch("Deprecated features")}}  pour savoir pourquoi cette méthode est désormais obsolète.</dd>
-</dl>
-
-<h2 id="Fonctionnalités_obsolètes">Fonctionnalités obsolètes</h2>
-
-<dl>
- <dt>{{domxref("AudioListener.dopplerFactor")}} {{obsolete_inline}}</dt>
- <dd>Nombre flottant à double précision représentant la quantité de "pitch shift" à utiliser pour le rendu d'un <a href="http://en.wikipedia.org/wiki/Doppler_effect">effet doppler</a>.</dd>
- <dt>{{domxref("AudioListener.speedOfSound")}} {{obsolete_inline}}</dt>
- <dd>Nombre flottant à double précision représentant la vitesse du son, en <em>mètres par seconde</em>.</dd>
-</dl>
-
-<p>Dans une version précédente de la spécification, les propriétés <code>dopplerFactor</code> et <code>speedOfSound</code> et la méthode <code>setPosition()</code> lpouvaient être utilisés pour contrôler un effet doppler appliqué à un {{domxref("AudioBufferSourceNode")}} connecté en aval - ils pouvaient être transposés en fonction de la vitesse relative du {{domxref("PannerNode")}}, et de l'{{domxref("AudioListener")}}. Ces fonctionnalités soulevaient un certain nombre de problèmes :</p>
-
-<ul>
- <li>Seuls les {{domxref("AudioBufferSourceNode")}} étaient transposés, pas les autres noeuds source.</li>
- <li>Le comportement à adopter lorsqu'un {{domxref("AudioBufferSourceNode")}} était connecté à plusieurs {{domxref("PannerNode")}} n'était pas clair.</li>
- <li>Comme la vélocité du panoramique et de l'auditeur n'étaient pas des {{domxref("AudioParam")}}, la modification du pitch ne pouvait pas être appliquée uniformément, ce qui provoquait des irrégularités dans le son.</li>
-</ul>
-
-<p>C'est la raison pour laquelle elles ont été supprimées.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>{{page("/en-US/docs/Web/API/AudioContext.createPanner","Example")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Web Audio API', '#AudioListener-section', 'AudioListener')}}</td>
-   <td>{{Spec2('Web Audio API')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
-
-<p>{{Compat("api.AudioListener")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
-</ul>
+{{APIRef("Web Audio API")}}
+
+L'interface _AudioListener_ représente la position et l'orientation de l'unique personne écoutant la scène audio; elle est utilisée dans le cadre d'une [spatialisation audio](/en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics). Tous les {{domxref ("PannerNode")}} sont spatialisés par rapport à l'objet _AudioListener_ stocké dans la propriété {{domxref ("AudioContext.listener")}}.
+
+Il est important de noter qu'il n'y a qu'un seul auditeur par contexte, et qu'il ne s'agit pas d'un {{domxref("AudioNode")}}.
+
+![On voit ici la position, les vecteurs haut et face d'un AudioListener, avec les vecteurs haut et face à 90° l'un de l'autre.](webaudiolistenerreduced.png)
+
+## Propriétés
+
+_Hérite des propriétés de son parent,_ `AudioNode`.
+
+> **Note :** Les valeurs de position, d'orientation, et du haut de la tête peuvent être définies et lues à l'aide de différentes syntaxes. Par exemple, l'accès se fait à l'aide de la propriété, `AudioListener.positionX`, tandis que la même propriété est définir à l'aide de `AudioListener.positionX.value`. C'est pourquoi ces valeurs ne sont pas marquées  en lecture seule, bien qu'elles apparaissent comme tel dans la spécification IDL.
+
+- {{domxref("AudioListener.positionX")}}
+  - : Position de l'auditeur avec des coordonnées cartésiennes selon la règle de la main droite. La valeur par défaut est 0.
+- {{domxref("AudioListener.positionY")}}
+  - : Position verticale de l'auditeur avec des coordonnées cartésiennes selon la règle de la main droite. La valeur par défaut est 0.
+- {{domxref("AudioListener.positionZ")}}
+  - : Position longitudinale (avant et arrière) de l'auditeur avec des coordonnées cartésiennes selon la règle de la main droite. La valeur par défaut est 0.
+- {{domxref("AudioListener.forwardX")}}
+  - : Position horizontale de l'orientation vers l'avant de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (`positionX`, `positionY`, and `positionZ`). Les valeurs de direction vers l'avant et vers le haut sont indépendantes  linéairement l'une de l'autre. La valeur par défaut est 0.
+- {{domxref("AudioListener.forwardY")}}
+  - : Position verticale de l'orientation vers l'avant de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (`positionX`, `positionY`, and `positionZ`). Les valeurs de direction vers l'avant et vers le haut sont indépendantes  linéairement l'une de l'autre. La valeur par défaut est 0.
+- {{domxref("AudioListener.forwardZ")}}
+  - : Position longitudinale (avant et arrière) de l'orientation vers l'avant de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (`positionX`, `positionY`, and `positionZ`). Les valeurs de direction vers l'avant et vers le haut sont indépendantes linéairement l'une de l'autre. La valeur par défaut est 0.
+- {{domxref("AudioListener.upX")}}
+  - : Position horizontale du haut de la tête de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (`positionX`, `positionY`, and `positionZ`). Les valeurs de direction vers l'avant et vers le haut sont indépendantes linéairement l'une de l'autre. La valeur par défaut est 0.
+- {{domxref("AudioListener.upY")}}
+  - : Position verticale du haut de la tête de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (`positionX`, `positionY`, and `positionZ`). Les valeurs de direction vers l'avant et vers le haut sont indépendantes linéairement l'une de l'autre. La valeur par défaut est 0.
+- {{domxref("AudioListener.upZ")}}
+  - : Position longitudinale (avant et arrière) du haut de la tête de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (`positionX`, `positionY`, and `positionZ`). Les valeurs de direction vers l'avant et vers le haut sont indépendantes linéairement l'une de l'autre. La valeur par défaut est 0.
+
+## Méthodes
+
+_Hérite des propriétés de son parent,_ `AudioNode`.
+
+- {{domxref("AudioListener.setOrientation()")}}
+  - : Définit l'orientation de l'auditeur.
+- {{domxref("AudioListener.setPosition()")}}
+  - : Définit la position de l'auditeur. Consulter {{anch("Deprecated features")}}  pour savoir pourquoi cette méthode est désormais obsolète.
+
+## Fonctionnalités obsolètes
+
+- {{domxref("AudioListener.dopplerFactor")}} {{obsolete_inline}}
+  - : Nombre flottant à double précision représentant la quantité de "pitch shift" à utiliser pour le rendu d'un [effet doppler](http://en.wikipedia.org/wiki/Doppler_effect).
+- {{domxref("AudioListener.speedOfSound")}} {{obsolete_inline}}
+  - : Nombre flottant à double précision représentant la vitesse du son, en _mètres par seconde_.
+
+Dans une version précédente de la spécification, les propriétés `dopplerFactor` et `speedOfSound` et la méthode `setPosition()` lpouvaient être utilisés pour contrôler un effet doppler appliqué à un {{domxref("AudioBufferSourceNode")}} connecté en aval - ils pouvaient être transposés en fonction de la vitesse relative du {{domxref("PannerNode")}}, et de l'{{domxref("AudioListener")}}. Ces fonctionnalités soulevaient un certain nombre de problèmes :
+
+- Seuls les {{domxref("AudioBufferSourceNode")}} étaient transposés, pas les autres noeuds source.
+- Le comportement à adopter lorsqu'un {{domxref("AudioBufferSourceNode")}} était connecté à plusieurs {{domxref("PannerNode")}} n'était pas clair.
+- Comme la vélocité du panoramique et de l'auditeur n'étaient pas des {{domxref("AudioParam")}}, la modification du pitch ne pouvait pas être appliquée uniformément, ce qui provoquait des irrégularités dans le son.
+
+C'est la raison pour laquelle elles ont été supprimées.
+
+## Exemples
+
+{{page("/en-US/docs/Web/API/AudioContext.createPanner","Example")}}
+
+## Spécifications
+
+| Spécification                                                                                    | Statut                               | Commentaire |
+| ------------------------------------------------------------------------------------------------ | ------------------------------------ | ----------- |
+| {{SpecName('Web Audio API', '#AudioListener-section', 'AudioListener')}} | {{Spec2('Web Audio API')}} |             |
+
+## Compatibilité navigateurs
+
+{{Compat("api.AudioListener")}}
+
+## Voir aussi
+
+- [Utiliser la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API)
diff --git a/files/fr/web/api/audionode/index.md b/files/fr/web/api/audionode/index.md
index b3e51998b0..681d72b5c9 100644
--- a/files/fr/web/api/audionode/index.md
+++ b/files/fr/web/api/audionode/index.md
@@ -3,68 +3,62 @@ title: AudioNode
 slug: Web/API/AudioNode
 translation_of: Web/API/AudioNode
 ---
-<p>{{ APIRef("Web Audio API") }}</p>
+{{ APIRef("Web Audio API") }}
 
-<p>L'interface <strong><code>AudioNode</code></strong> est une interface générique pour représenter un module de traitement audio tel qu'une source audio {{HTMLElement("audio")}}, un élément {{HTMLElement("video")}}, un {{domxref("OscillatorNode")}}, une sortie audio, ou un module de traitement intermédiaire  (filtres {{domxref("BiquadFilterNode")}} ou {{domxref("ConvolverNode")}}), un contrôle de volume {{domxref("GainNode")}}.</p>
+L'interface **`AudioNode`** est une interface générique pour représenter un module de traitement audio tel qu'une source audio {{HTMLElement("audio")}}, un élément {{HTMLElement("video")}}, un {{domxref("OscillatorNode")}}, une sortie audio, ou un module de traitement intermédiaire  (filtres {{domxref("BiquadFilterNode")}} ou {{domxref("ConvolverNode")}}), un contrôle de volume {{domxref("GainNode")}}.
 
-<p>{{InheritanceDiagram}}</p>
+{{InheritanceDiagram}}
 
-<p><img alt="Des objets AudioNode participant à un objet AudioContext pour créer un graphe de routage audio." src="webaudiobasics.png"></p>
+![Des objets AudioNode participant à un objet AudioContext pour créer un graphe de routage audio.](webaudiobasics.png)
 
+Un `AudioNode` a des entrées et sorties, chacune avec un certain nombre de _canaux_.\* *Un `AudioNode` avec zero entrée et une ou plusieurs sorties est appelée un *noeud source\*. Le traitement exact varie d'un `AudioNode` à l'autre; en général un noeud lit l'entrée, réalise un traitement, et génère de nouvelles valeurs pour la sortie, ou laisse simplement l'entrée traverser (par exemple dans le cas de l'{{domxref("AnalyserNode")}}, où le résultat du traitment du traitement est accessible à part).
 
-<p>Un <code>AudioNode</code> a des entrées et sorties, chacune avec un certain nombre de <em>canaux</em>.<em> </em>Un <code>AudioNode</code> avec zero entrée et une ou plusieurs sorties est appelée un <em> noeud source</em>. Le traitement exact varie d'un <code>AudioNode</code> à l'autre; en général un noeud lit l'entrée, réalise un traitement, et génère de nouvelles valeurs pour la sortie, ou laisse simplement l'entrée traverser (par exemple dans le cas de l'{{domxref("AnalyserNode")}}, où le résultat du traitment du traitement est accessible à part).</p>
+Plusieurs noeuds peuvent être reliés dans un _graphe de traitement_. Un tel graphe est contenu dans un {{domxref("AudioContext")}}. Chaque `AudioNode` fait partie d'exactement un contexte. Les noeuds de traitement héritent des  propriétés et méthodse d'`AudioNode`, mais définissent aussi leurs propres fonctionnalités par dessus. Pour plus de détails, voir les pages individuelles liées sur la page d'accueil [Web Audio API](/en-US/docs/Web/API/Web_Audio_API).
 
-<p>Plusieurs noeuds peuvent être reliés dans un <em>graphe de traitement</em>. Un tel graphe est contenu dans un {{domxref("AudioContext")}}. Chaque <code>AudioNode</code> fait partie d'exactement un contexte. Les noeuds de traitement héritent des  propriétés et méthodse d'<code>AudioNode</code>, mais définissent aussi leurs propres fonctionnalités par dessus. Pour plus de détails, voir les pages individuelles liées sur la page d'accueil <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a>.</p>
+> **Note :** Un `AudioNode` peut être la cible d'évènements, et implémente donc l'interface {{domxref("EventTarget")}}.
 
-<div class="note">
-<p><strong>Note :</strong> Un <code>AudioNode</code> peut être la cible d'évènements, et implémente donc l'interface {{domxref("EventTarget")}}.</p>
-</div>
+## Propriétés
 
-<h2 id="Propriétés">Propriétés</h2>
+- {{domxref("AudioNode.context")}} {{readonlyInline}}
+  - : Renvoie le {{domxref("AudioContext")}} associé, c'est-à-dire l'objet représentant le graphe de traitement dont le noeud fait partie.
 
-<dl>
- <dt>{{domxref("AudioNode.context")}} {{readonlyInline}}</dt>
- <dd>Renvoie le {{domxref("AudioContext")}} associé, c'est-à-dire l'objet représentant le graphe de traitement dont le noeud fait partie.</dd>
-</dl>
+<!---->
 
-<dl>
- <dt>{{domxref("AudioNode.numberOfInputs")}} {{readonlyInline}}</dt>
- <dd>Renvoie le nombre d'entrées d'un noeud. Les noeuds source sont des noeuds dont la propriété <code>numberOfInputs</code> a la valeur <code>0</code>.</dd>
-</dl>
+- {{domxref("AudioNode.numberOfInputs")}} {{readonlyInline}}
+  - : Renvoie le nombre d'entrées d'un noeud. Les noeuds source sont des noeuds dont la propriété `numberOfInputs` a la valeur `0`.
 
-<dl>
- <dt>{{domxref("AudioNode.numberOfOutputs")}} {{readonlyInline}}</dt>
- <dd>Renvoie le nombre de sorties d'un noeud. Les noeuds de destination — comme {{ domxref("AudioDestinationNode") }} — sont des noeuds dont cette propriété a la valeur <code>0</code>.</dd>
-</dl>
+<!---->
 
-<dl>
- <dt>{{domxref("AudioNode.channelCount")}}</dt>
- <dd>Représente un entier utilisé pour déterminer le nombre de canaux lors d'une <a href="/fr/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API#Conversion_ascendante_et_descendante">conversion ascendante ou descendante</a>. Son usage et sa définition précise dépendent de la valeur de {{domxref("AudioNode.channelCountMode")}}.</dd>
-</dl>
+- {{domxref("AudioNode.numberOfOutputs")}} {{readonlyInline}}
+  - : Renvoie le nombre de sorties d'un noeud. Les noeuds de destination — comme {{ domxref("AudioDestinationNode") }} — sont des noeuds dont cette propriété a la valeur `0`.
 
-<dl>
- <dt>{{domxref("AudioNode.channelCountMode")}}</dt>
- <dd>Représente une liste énumérative qui décrit la façon dont les canaux doivent être connectés entre les entrées et les sorties.</dd>
- <dt>{{domxref("AudioNode.channelInterpretation")}}</dt>
- <dd>Représente une liste énumérative qui décrit la signification des canaux. Cette interprétation définit la façon dont la <a href="/fr/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API#Conversion_ascendante_et_descendante">conversion ascendante ou descendante</a> est réalisée. Les valeurs possibles sont <code>"speakers"</code> ou <code>"discrete"</code>.</dd>
-</dl>
+<!---->
 
-<h2 id="Méthodes">Méthodes</h2>
+- {{domxref("AudioNode.channelCount")}}
+  - : Représente un entier utilisé pour déterminer le nombre de canaux lors d'une [conversion ascendante ou descendante](/fr/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API#Conversion_ascendante_et_descendante). Son usage et sa définition précise dépendent de la valeur de {{domxref("AudioNode.channelCountMode")}}.
 
-<p><em>Implémente aussi les méthodes de l'interface </em>{{domxref("EventTarget")}}.</p>
+<!---->
 
-<dl>
- <dt>{{domxref("AudioNode.connect()")}}</dt>
- <dd>Permet de connecter une sortie du noeud à l'entrée d'un autre noeud, soit comme données audio, soir comme valeur d'un {{domxref("AudioParam")}}.</dd>
- <dt>{{domxref("AudioNode.disconnect()")}}</dt>
- <dd>Permet de déconnecter le noeud d'un autre noeud auquel il est déjà connecté.</dd>
-</dl>
+- {{domxref("AudioNode.channelCountMode")}}
+  - : Représente une liste énumérative qui décrit la façon dont les canaux doivent être connectés entre les entrées et les sorties.
+- {{domxref("AudioNode.channelInterpretation")}}
+  - : Représente une liste énumérative qui décrit la signification des canaux. Cette interprétation définit la façon dont la [conversion ascendante ou descendante](/fr/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API#Conversion_ascendante_et_descendante) est réalisée. Les valeurs possibles sont `"speakers"` ou `"discrete"`.
 
-<h2 id="Exemple">Exemple</h2>
+## Méthodes
 
-<p>Ce simple extrait de code illustre la creation de quelques noeuds audio, et la façon dont les propriétés et méthodes <code>AudioNode</code> peuvent être utilisées. Vous pouvez trouver d'autres exemples sur n'importe lequel des exemples liés sur la page <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a> (par exemple <a href="https://github.com/mdn/violent-theremin">Violent Theremin</a>.) </p>
+_Implémente aussi les méthodes de l'interface_ {{domxref("EventTarget")}}.
 
-<pre class="brush: js">var AudioContext = window.AudioContext || window.webkitAudioContext;
+- {{domxref("AudioNode.connect()")}}
+  - : Permet de connecter une sortie du noeud à l'entrée d'un autre noeud, soit comme données audio, soir comme valeur d'un {{domxref("AudioParam")}}.
+- {{domxref("AudioNode.disconnect()")}}
+  - : Permet de déconnecter le noeud d'un autre noeud auquel il est déjà connecté.
+
+## Exemple
+
+Ce simple extrait de code illustre la creation de quelques noeuds audio, et la façon dont les propriétés et méthodes `AudioNode` peuvent être utilisées. Vous pouvez trouver d'autres exemples sur n'importe lequel des exemples liés sur la page [Web Audio API](/en-US/docs/Web/API/Web_Audio_API) (par exemple [Violent Theremin](https://github.com/mdn/violent-theremin).)
+
+```js
+var AudioContext = window.AudioContext || window.webkitAudioContext;
 
 var audioCtx = new AudioContext();
 
@@ -77,31 +71,19 @@ gainNode.connect(audioCtx.destination);
 oscillator.context;
 oscillator.numberOfInputs;
 oscillator.numberOfOutputs;
-oscillator.channelCount;</pre>
-
-<h2 id="Spécification">Spécification</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Web Audio API', '#the-audionode-interface', 'AudioNode')}}</td>
-   <td>{{Spec2('Web Audio API')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_navigateur">Compatibilité navigateur</h2>
-
-<p>{{Compat("api.AudioNode")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
-</ul>
+oscillator.channelCount;
+```
+
+## Spécification
+
+| Spécification                                                                                | Statut                               | Commentaire |
+| -------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- |
+| {{SpecName('Web Audio API', '#the-audionode-interface', 'AudioNode')}} | {{Spec2('Web Audio API')}} |             |
+
+## Compatibilité navigateur
+
+{{Compat("api.AudioNode")}}
+
+## Voir aussi
+
+- [Utiliser la Web Audio API](/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API)
diff --git a/files/fr/web/api/audioparam/index.md b/files/fr/web/api/audioparam/index.md
index bd0fca5e56..6075c65599 100644
--- a/files/fr/web/api/audioparam/index.md
+++ b/files/fr/web/api/audioparam/index.md
@@ -8,105 +8,90 @@ tags:
   - Web Audio API
 translation_of: Web/API/AudioParam
 ---
-<p>{{APIRef("Web Audio API")}}</p>
+{{APIRef("Web Audio API")}}
 
-<p>L'interface <strong><code>AudioParam</code></strong> représente un paramètre audio, en général un paramètre d'un {{domxref ("AudioNode")}} tel qu'un {{ domxref("GainNode.gain") }}. On peut lui donner une valeur spécifique ou définir une variation de valeur qui intervient à un certain moment et selon un certain fonctionnement.</p>
+L'interface **`AudioParam`** représente un paramètre audio, en général un paramètre d'un {{domxref ("AudioNode")}} tel qu'un {{ domxref("GainNode.gain") }}. On peut lui donner une valeur spécifique ou définir une variation de valeur qui intervient à un certain moment et selon un certain fonctionnement.
 
-<p>Il y a deux sortes de <code>AudioParam</code>, <em>a-rate</em> et <em>k-rate</em> :</p>
+Il y a deux sortes de `AudioParam`, _a-rate_ et _k-rate_ :
 
-<ul>
- <li>Un <code>AudioParam</code> <em>a-rate</em> réévalue la valeur du paramètre audio pour chaque trame d'échantillons du signal audio.</li>
- <li>Un <code>AudioParam</code> <em>k-rate </em>utilise la même valeur de paramètre audio initial pour l'ensemble du bloc traité, c'est-à-dire 128 échantillons.</li>
-</ul>
+- Un `AudioParam` _a-rate_ réévalue la valeur du paramètre audio pour chaque trame d'échantillons du signal audio.
+- Un `AudioParam` _k-rate_ utilise la même valeur de paramètre audio initial pour l'ensemble du bloc traité, c'est-à-dire 128 échantillons.
 
-<p>Chaque {{domxref ("AudioNode")}} définit lequel de ses paramètres sont <em>a-rate</em> ou <em>k-rate</em>.</p>
+Chaque {{domxref ("AudioNode")}} définit lequel de ses paramètres sont _a-rate_ ou _k-rate_.
 
-<p>Chaque <code>AudioParam</code> a une liste d'événements, initialement vide, qui définit quand et comment les valeurs changent. Si cette liste n'est pas vide, les modifications faites directement avec <code>AudioParam.value</code> sont ignorées. Cette liste d'événements permet de planifier les changements qui doivent se produire à des moments très précis à l'aide de courbes d'automatisation chronologiques arbitraires. Les informations de temps utilisées sont celles définies par {{domxref ("AudioContext.currentTime")}}.</p>
+Chaque `AudioParam` a une liste d'événements, initialement vide, qui définit quand et comment les valeurs changent. Si cette liste n'est pas vide, les modifications faites directement avec `AudioParam.value` sont ignorées. Cette liste d'événements permet de planifier les changements qui doivent se produire à des moments très précis à l'aide de courbes d'automatisation chronologiques arbitraires. Les informations de temps utilisées sont celles définies par {{domxref ("AudioContext.currentTime")}}.
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<p><em>Hérite des propriétés de son parent, <code>AudioNode</code>.</em></p>
+_Hérite des propriétés de son parent, `AudioNode`._
 
-<dl>
- <dt>{{domxref("AudioParam.defaultValue")}} {{readonlyInline}}</dt>
- <dd>Volume initial tel que défini par l'{{domxref ("AudioNode")}} qui crée l'<code>AudioParam</code>.</dd>
- <dt>{{domxref("AudioParam.maxValue")}} {{readonlyInline}}</dt>
- <dd>Valeur maximum de la plage nominale (effective). </dd>
- <dt>{{domxref("AudioParam.minValue")}} {{readonlyinline}}</dt>
- <dd>Valeur minimum de la plage nominale (effective). </dd>
-</dl>
+- {{domxref("AudioParam.defaultValue")}} {{readonlyInline}}
+  - : Volume initial tel que défini par l'{{domxref ("AudioNode")}} qui crée l'`AudioParam`.
+- {{domxref("AudioParam.maxValue")}} {{readonlyInline}}
+  - : Valeur maximum de la plage nominale (effective).
+- {{domxref("AudioParam.minValue")}} {{readonlyinline}}
+  - : Valeur minimum de la plage nominale (effective).
 
-<dl>
- <dt>{{domxref("AudioParam.value")}}</dt>
- <dd>Volume, exprimé sous forme de nombre flottant, initialement défini par la valeur de <code>AudioParam.defaultValue</code>. Même s'il peut être modifié, toute modification qui a lieu alors que des événements d'automatisation sont prévus - événements programmés en utilisant les méthodes de la <code>AudioParam</code> - est ignorée, sans lever aucune exception</dd>
-</dl>
+<!---->
 
-<h2 id="Méthodes">Méthodes</h2>
+- {{domxref("AudioParam.value")}}
+  - : Volume, exprimé sous forme de nombre flottant, initialement défini par la valeur de `AudioParam.defaultValue`. Même s'il peut être modifié, toute modification qui a lieu alors que des événements d'automatisation sont prévus - événements programmés en utilisant les méthodes de la `AudioParam` - est ignorée, sans lever aucune exception
 
-<p><em>Hérite des propriétés de son parent, AudioNode.</em></p>
+## Méthodes
 
-<dl>
- <dt>{{domxref("AudioParam.setValueAtTime()")}}</dt>
- <dd>Planifie un changement de la valeur d' <code>AudioParam</code> à un moment précis, <code>startTime</code>, tel que mesuré par rapport à {{domxref ("AudioContext.currentTime")}}. La nouvelle valeur est passée en argument.</dd>
- <dt>{{domxref("AudioParam.linearRampToValueAtTime()")}}</dt>
- <dd>Planifie un changement de la valeur d'<code>AudioParam</code>. Le changement commence à l'heure prévue pour l'événement précédent, évolue selon une rampe linéaire jusqu'à la nouvelle valeur passée dans l'argument <code>value</code>, et atteint la nouvelle valeur à l'heure indiquée par le paramètre <code>endTime</code>.</dd>
- <dt>{{domxref("AudioParam.exponentialRampToValueAtTime()")}}</dt>
- <dd>Planifie un changement de la valeur d'<code>AudioParam</code>. Le changement commence à l'heure prévue pour l'événement précédent, suit une rampe exponentielle jusqu'à la nouvelle valeur passée dans l'argument <code>value</code>, et atteint la nouvelle valeur à l'heure indiquée par le paramètre <code>endTime</code>.<br>
- Les rampes exponentielles sont utiles lors du changement de fréquence ou de taux de lecture en raison de la façon dont l'oreille humaine fonctionne.</dd>
- <dt>{{domxref("AudioParam.setTargetAtTime()")}}</dt>
- <dd>Planifie le début d'un changement de la valeur d'<code>AudioParam</code>. Le changement commence à l'heure spécifiée par l'argument <code>startTime</code> et de façon exponentielle tend vers la valeur donnée par le paramètre <code>target</code>. Le taux de décroissance exponentielle est définie par le paramètre <code>timeConstant</code>. C'est le temps nécessaire à un système continu linéaire du premier ordre invariant dans le temps pour atteindre la valeur de 1 - 1 / e (environ 63,2%) donné une réponse d'entrée de l'étape (passage de 0 à 1 en valeur), Plus il est grand, plus la transition sera facile. Ceci est utile pour la décroissance ou la libération de portions d'enveloppes.</dd>
- <dt>{{domxref("AudioParam.setValueCurveAtTime()")}}</dt>
- <dd>Planifie des valeurs de <code>AudioParam</code> selon un jeu de valeurs, défini par le paramètre  <code>values </code>({{domxref ("Float32Array")}}), mis à l'échelle pour s'adapter à l'intervalle de temps donné, en commençant à <code>startTime</code>.</dd>
- <dt>{{domxref("AudioParam.cancelScheduledValues()")}}</dt>
- <dd>Annule toutes les modifications futures prévues du <code>AudioParam</code>.</dd>
- <dt>{{domxref("AudioParam.cancelAndHoldAtTime()")}}</dt>
- <dd>Annule toutes les modifications futures prévues du <code>AudioParam</code> mais maintient sa valeur à un certain moment, en attendant que d'autres changements soient effectués. La nouvelle valeur est passée en argument.</dd>
-</dl>
+_Hérite des propriétés de son parent, AudioNode._
 
-<h2 id="Exemples">Exemples</h2>
+- {{domxref("AudioParam.setValueAtTime()")}}
+  - : Planifie un changement de la valeur d' `AudioParam` à un moment précis, `startTime`, tel que mesuré par rapport à {{domxref ("AudioContext.currentTime")}}. La nouvelle valeur est passée en argument.
+- {{domxref("AudioParam.linearRampToValueAtTime()")}}
+  - : Planifie un changement de la valeur d'`AudioParam`. Le changement commence à l'heure prévue pour l'événement précédent, évolue selon une rampe linéaire jusqu'à la nouvelle valeur passée dans l'argument `value`, et atteint la nouvelle valeur à l'heure indiquée par le paramètre `endTime`.
+- {{domxref("AudioParam.exponentialRampToValueAtTime()")}}
+  - : Planifie un changement de la valeur d'`AudioParam`. Le changement commence à l'heure prévue pour l'événement précédent, suit une rampe exponentielle jusqu'à la nouvelle valeur passée dans l'argument `value`, et atteint la nouvelle valeur à l'heure indiquée par le paramètre `endTime`.
+    Les rampes exponentielles sont utiles lors du changement de fréquence ou de taux de lecture en raison de la façon dont l'oreille humaine fonctionne.
+- {{domxref("AudioParam.setTargetAtTime()")}}
+  - : Planifie le début d'un changement de la valeur d'`AudioParam`. Le changement commence à l'heure spécifiée par l'argument `startTime` et de façon exponentielle tend vers la valeur donnée par le paramètre `target`. Le taux de décroissance exponentielle est définie par le paramètre `timeConstant`. C'est le temps nécessaire à un système continu linéaire du premier ordre invariant dans le temps pour atteindre la valeur de 1 - 1 / e (environ 63,2%) donné une réponse d'entrée de l'étape (passage de 0 à 1 en valeur), Plus il est grand, plus la transition sera facile. Ceci est utile pour la décroissance ou la libération de portions d'enveloppes.
+- {{domxref("AudioParam.setValueCurveAtTime()")}}
+  - : Planifie des valeurs de `AudioParam` selon un jeu de valeurs, défini par le paramètre  `values `({{domxref ("Float32Array")}}), mis à l'échelle pour s'adapter à l'intervalle de temps donné, en commençant à `startTime`.
+- {{domxref("AudioParam.cancelScheduledValues()")}}
+  - : Annule toutes les modifications futures prévues du `AudioParam`.
+- {{domxref("AudioParam.cancelAndHoldAtTime()")}}
+  - : Annule toutes les modifications futures prévues du `AudioParam` mais maintient sa valeur à un certain moment, en attendant que d'autres changements soient effectués. La nouvelle valeur est passée en argument.
 
-<p>Ce premier exemple simple montre la définition de la valeur de  <code>gain </code>d'un<code> </code>{{domxref("GainNode")}}. <code>gain</code> est un exemple de paramètre audio de type a-rate, car sa valeur peut potentiellement être différente pour chaque trame d'échantillon.</p>
+## Exemples
 
-<pre class="brush: js">var AudioContext = window.AudioContext || window.webkitAudioContext;
+Ce premier exemple simple montre la définition de la valeur de  `gain `d'un` `{{domxref("GainNode")}}. `gain` est un exemple de paramètre audio de type a-rate, car sa valeur peut potentiellement être différente pour chaque trame d'échantillon.
+
+```js
+var AudioContext = window.AudioContext || window.webkitAudioContext;
 var audioCtx = new AudioContext();
 
 var gainNode = audioCtx.createGain();
-gainNode.gain.value = 0;</pre>
+gainNode.gain.value = 0;
+```
 
-<p>Ce deuxième exemple montre la définition de plusieurs paramètres d'un {{ domxref("BiquadFilterNode") }}. Ce sont des exemples de paramètre audio de type k-rate AudioParam's, comme les valeurs sont définies une fois pour l'ensemble des échantillons.</p>
+Ce deuxième exemple montre la définition de plusieurs paramètres d'un {{ domxref("BiquadFilterNode") }}. Ce sont des exemples de paramètre audio de type k-rate AudioParam's, comme les valeurs sont définies une fois pour l'ensemble des échantillons.
 
-<pre class="brush: js">var AudioContext = window.AudioContext || window.webkitAudioContext;
+```js
+var AudioContext = window.AudioContext || window.webkitAudioContext;
 var audioCtx = new AudioContext();
 
 var biquadFilter = audioCtx.createBiquadFilter();
 
 biquadFilter.type = "lowshelf";
 biquadFilter.frequency.value = 1000;
-biquadFilter.gain.value = 25;</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Web Audio API', '#AudioParam-section', 'AudioParam')}}</td>
-   <td>{{Spec2('Web Audio API')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
-
-<p>{{Compat("api.AudioParam")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
-</ul>
+biquadFilter.gain.value = 25;
+```
+
+## Spécifications
+
+| Spécification                                                                            | Statut                               | Commentaire |
+| ---------------------------------------------------------------------------------------- | ------------------------------------ | ----------- |
+| {{SpecName('Web Audio API', '#AudioParam-section', 'AudioParam')}} | {{Spec2('Web Audio API')}} |             |
+
+## Compatibilité navigateurs
+
+{{Compat("api.AudioParam")}}
+
+## Voir aussi
+
+- [Utiliser la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API)
diff --git a/files/fr/web/api/audioprocessingevent/index.md b/files/fr/web/api/audioprocessingevent/index.md
index a43186edb4..430bfcbc74 100644
--- a/files/fr/web/api/audioprocessingevent/index.md
+++ b/files/fr/web/api/audioprocessingevent/index.md
@@ -8,88 +8,36 @@ tags:
   - Web Audio API
 translation_of: Web/API/AudioProcessingEvent
 ---
-<p>{{APIRef("Web Audio API")}}{{deprecated_header}}</p>
+{{APIRef("Web Audio API")}}{{deprecated_header}}
 
-<p>AudioProcessingEvent représente l'évènement qui est passé lorsqu'un tampon {{domxref ("ScriptProcessorNode")}} est prêt à être traité.</p>
+AudioProcessingEvent représente l'évènement qui est passé lorsqu'un tampon {{domxref ("ScriptProcessorNode")}} est prêt à être traité.
 
-<div class="note">
-<p><strong>Note :</strong> Cette fonctionnalité est dépréciée à partir de la version du 29 Août 2014 de la spécification Web Audio API, elle sera remplacée par les <a href="/en-US/docs/Web/API/Web_Audio_API#Audio_Workers">Audio Workers</a>.</p>
-</div>
+> **Note :** Cette fonctionnalité est dépréciée à partir de la version du 29 Août 2014 de la spécification Web Audio API, elle sera remplacée par les [Audio Workers](/en-US/docs/Web/API/Web_Audio_API#Audio_Workers).
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<p><em>La liste ci-dessous inclut les propriétés héritées de son parent, {{domxref("Event")}}.</em></p>
+_La liste ci-dessous inclut les propriétés héritées de son parent, {{domxref("Event")}}._
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Propriété</th>
-   <th scope="col">Type</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>target</code> {{ReadOnlyInline}}</td>
-   <td>{{domxref("EventTarget")}}</td>
-   <td>La cible de l'évènement (la plus haute dans le DOM).</td>
-  </tr>
-  <tr>
-   <td><code>type</code> {{ReadOnlyInline}}</td>
-   <td>{{domxref("DOMString")}}</td>
-   <td>Le type d'évènement.</td>
-  </tr>
-  <tr>
-   <td><code>bubbles</code> {{ReadOnlyInline}}</td>
-   <td><code>boolean</code></td>
-   <td>Indique si l'évènement se propage normalement.</td>
-  </tr>
-  <tr>
-   <td><code>cancelable</code> {{ReadOnlyInline}}</td>
-   <td><code>boolean</code></td>
-   <td>Indique s'il est possible d'annuler l'évènement.</td>
-  </tr>
-  <tr>
-   <td><code>playbackTime</code> {{ReadOnlyInline}}</td>
-   <td><code>double</code></td>
-   <td>Moment auquel le son sera joué, tel que défini par {{domxref("AudioContext.currentTime")}}</td>
-  </tr>
-  <tr>
-   <td><code>inputBuffer</code> {{ReadOnlyInline}}</td>
-   <td>{{domxref("AudioBuffer")}}</td>
-   <td>Tampon contenant les données audio à traiter en entrée. Le nombre de canaux est défini comme paramètre, <code>numberOfInputChannels</code>, de la méthode constructeur {{domxref("AudioContext.createScriptProcessor()")}}. L'<code>AudioBuffer</code> renvoyé est valide uniquement dans la portée de la fonction <code>onaudioprocess</code>.</td>
-  </tr>
-  <tr>
-   <td><code>outputBuffer</code> {{ReadOnlyInline}}</td>
-   <td>{{domxref("AudioBuffer")}}</td>
-   <td>Tampon dans lequel les données doivent être écrites en sortie. Le nombre de canaux est défini comme paramètre, <code>numberOfOutputChannels</code>, de la méthode constructeur {{domxref("AudioContext.createScriptProcessor()")}}. L'<code>AudioBuffer</code> renvoyé est valide uniquement dans la portée de la fonction <code>onaudioprocess</code>.</td>
-  </tr>
- </tbody>
-</table>
+| Propriété                               | Type                                 | Description                                                                                                                                                                                                                                                                                                                             |
+| --------------------------------------- | ------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `target` {{ReadOnlyInline}}       | {{domxref("EventTarget")}} | La cible de l'évènement (la plus haute dans le DOM).                                                                                                                                                                                                                                                                                    |
+| `type` {{ReadOnlyInline}}         | {{domxref("DOMString")}}     | Le type d'évènement.                                                                                                                                                                                                                                                                                                                    |
+| `bubbles` {{ReadOnlyInline}}      | `boolean`                            | Indique si l'évènement se propage normalement.                                                                                                                                                                                                                                                                                          |
+| `cancelable` {{ReadOnlyInline}}   | `boolean`                            | Indique s'il est possible d'annuler l'évènement.                                                                                                                                                                                                                                                                                        |
+| `playbackTime` {{ReadOnlyInline}} | `double`                             | Moment auquel le son sera joué, tel que défini par {{domxref("AudioContext.currentTime")}}                                                                                                                                                                                                                                 |
+| `inputBuffer` {{ReadOnlyInline}}  | {{domxref("AudioBuffer")}} | Tampon contenant les données audio à traiter en entrée. Le nombre de canaux est défini comme paramètre, `numberOfInputChannels`, de la méthode constructeur {{domxref("AudioContext.createScriptProcessor()")}}. L'`AudioBuffer` renvoyé est valide uniquement dans la portée de la fonction `onaudioprocess`.         |
+| `outputBuffer` {{ReadOnlyInline}} | {{domxref("AudioBuffer")}} | Tampon dans lequel les données doivent être écrites en sortie. Le nombre de canaux est défini comme paramètre, `numberOfOutputChannels`, de la méthode constructeur {{domxref("AudioContext.createScriptProcessor()")}}. L'`AudioBuffer` renvoyé est valide uniquement dans la portée de la fonction `onaudioprocess`. |
 
-<h2 id="Spécification">Spécification</h2>
+## Spécification
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Web Audio API', '#AudioProcessingEvent-section', 'AudioProcessingEvent')}}</td>
-   <td>{{Spec2('Web Audio API')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                        | Statut                               | Commentaire |
+| -------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- |
+| {{SpecName('Web Audio API', '#AudioProcessingEvent-section', 'AudioProcessingEvent')}} | {{Spec2('Web Audio API')}} |             |
 
-<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+## Compatibilité navigateurs
 
-<p>{{Compat("api.AudioProcessingEvent")}}</p>
+{{Compat("api.AudioProcessingEvent")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
-</ul>
+- [Utiliser la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API)
diff --git a/files/fr/web/api/audioworklet/index.md b/files/fr/web/api/audioworklet/index.md
index 7e0330b10c..4a8de6b246 100644
--- a/files/fr/web/api/audioworklet/index.md
+++ b/files/fr/web/api/audioworklet/index.md
@@ -17,57 +17,40 @@ tags:
   - sound
 translation_of: Web/API/AudioWorklet
 ---
-<p>{{APIRef("Web Audio API")}}{{securecontext_header}}</p>
+{{APIRef("Web Audio API")}}{{securecontext_header}}
 
-<p>L'interface <strong><code>AudioWorklet</code></strong> dans l'<a href="/fr/docs/Web/API/Web_Audio_API">API Web Audio</a> est utilisée pour fournir des scripts de traitement audio personnalisés qui s'exécutent dans un thread séparé afin de fournir un traitement audio à très faible latence. Le code du worklet est exécuté dans le contexte d'exécution global {{domxref("AudioWorkletGlobalScope")}}, en utilisant un thread audio web séparé qui est partagé par le worklet et les autres nœuds audio.</p>
+L'interface **`AudioWorklet`** dans l'[API Web Audio](/fr/docs/Web/API/Web_Audio_API) est utilisée pour fournir des scripts de traitement audio personnalisés qui s'exécutent dans un thread séparé afin de fournir un traitement audio à très faible latence. Le code du worklet est exécuté dans le contexte d'exécution global {{domxref("AudioWorkletGlobalScope")}}, en utilisant un thread audio web séparé qui est partagé par le worklet et les autres nœuds audio.
 
-<p>L'accès à distance d'<code>AudioWorklet</code> du contexte audio se fait par la propriété {{domxref("BaseAudioContext.audioWorklet")}}.</p>
+L'accès à distance d'`AudioWorklet` du contexte audio se fait par la propriété {{domxref("BaseAudioContext.audioWorklet")}}.
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<p><em>L'interface <code>AudioWorklet</code> </em>ne définit pas de propriétés propres, mais hérite des propriétés de<em> {{domxref("Worklet")}}.</em></p>
+*L'interface `AudioWorklet` *ne définit pas de propriétés propres, mais hérite des propriétés de _{{domxref("Worklet")}}._
 
-<h2 id="Méthodes">Méthodes</h2>
+## Méthodes
 
-<p>Cette interface hérite des méthodes de<em> {{domxref('Worklet')}}. L'interface <code>AudioWorklet</code> </em>ne définit aucune méthode propre<em>.</em></p>
+Cette interface hérite des méthodes de *{{domxref('Worklet')}}. L'interface `AudioWorklet`*ne définit aucune méthode propre*.*
 
-<h2 id="Evénements">Evénements</h2>
+## Evénements
 
-<p>L'<em><code>AudioWorklet</code> </em>n'a pas d'événements auxquels il répond<em>.</em></p>
+L'*`AudioWorklet` *n'a pas d'événements auxquels il répond*.*
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Voir {{domxref("AudioWorkletNode")}} pour des exemples complets de création de nœuds audio personnalisés.</p>
+Voir {{domxref("AudioWorkletNode")}} pour des exemples complets de création de nœuds audio personnalisés.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Web Audio API','#audioworklet','AudioWorklet')}}</td>
-   <td>{{Spec2('Web Audio API')}}</td>
-   <td>Définition intiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                    | Status                               | Commentaire         |
+| -------------------------------------------------------------------------------- | ------------------------------------ | ------------------- |
+| {{SpecName('Web Audio API','#audioworklet','AudioWorklet')}} | {{Spec2('Web Audio API')}} | Définition intiale. |
 
-<h2 id="Compatibilité_du_navigateur">Compatibilité du navigateur</h2>
+## Compatibilité du navigateur
 
-<div>
+{{Compat("api.AudioWorklet")}}
 
+## Voir aussi
 
-<p>{{Compat("api.AudioWorklet")}}</p>
-</div>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("AudioWorkletGlobalScope")}} — le contexte global d'exécution d'un <code>AudioWorklet</code></li>
- <li><a href="/fr/docs/Web/API/Web_Audio_API">API Web Audio</a></li>
- <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
-</ul>
+- {{domxref("AudioWorkletGlobalScope")}} — le contexte global d'exécution d'un `AudioWorklet`
+- [API Web Audio](/fr/docs/Web/API/Web_Audio_API)
+- [Utiliser la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API)
diff --git a/files/fr/web/api/authenticatorassertionresponse/authenticatordata/index.md b/files/fr/web/api/authenticatorassertionresponse/authenticatordata/index.md
index ee891dad3a..61afaee4f6 100644
--- a/files/fr/web/api/authenticatorassertionresponse/authenticatordata/index.md
+++ b/files/fr/web/api/authenticatorassertionresponse/authenticatordata/index.md
@@ -9,74 +9,56 @@ tags:
   - WebAuthn
 translation_of: Web/API/AuthenticatorAssertionResponse/authenticatorData
 ---
-<p>{{draft}}{{securecontext_header}}{{DefaultAPISidebar("Web Authentication API")}}</p>
-
-<p>La propriété <code><strong>authenticatorData</strong></code> (rattachée à  l'interface {{domxref("AuthenticatorAssertionResponse")}}) fournit un {{jsxref("ArrayBuffer")}} qui contient les informations relatives à l'authenticateur tels que :</p>
-
-<ul>
- <li>l'empreinte d'identifiant (rpIdHash pour <em>Relying Party ID Hash</em>)</li>
- <li>un compteur de signature</li>
- <li>un test quant à la présence de l'utilisateur</li>
- <li>des marqueurs (<em>flags</em>) de vérification de l'utilisateur</li>
- <li>les éventuelles extensions traitées par l'authenticateur</li>
-</ul>
-
-<p>Cette propriété est signée par l'authenticateur (c'est l'un des deux champs qui est signé).</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="brush: js">var authnrData = assertion.response.authnrData;
-</pre>
-
-<h3 id="Valeur">Valeur</h3>
-
-<p>Un objet {{jsxref("ArrayBuffer")}} dont la propriété {{jsxref("ArrayBuffer.byteLength")}} indique qu'il mesure au moins 37 octets et qui contient les champs suivants :</p>
-
-<ul>
- <li><code><strong>rpIdHash</strong></code> (32 octets) - Une empreinte SHA256 de l'identifiant de la partie fiable (i.e. - le domaine) tel que vu par le navigateur. Le serveur s'assurera ensuite que cette empreinte correspond à sa propre origine afin d'empêcher les tentatives de hameçonnage (<em>phishing</em>) ou d'autres attaques de l'homme du milieu (<em>man-in-the-middle</em>).</li>
- <li><code><strong>flags</strong></code> (1 octet) - Une série de bits qui indique les différents attributs validés par l'authenticateur. Les bits sont décrits comme suit (où le bit 0 correspond au bit de poids faible) (tous les bits ne sont pas mentionnés car certains sont réservés pour une utilisation future) :
-  <ul>
-   <li>Bit 0 : Présence de l'utilisateur (<em>User Presence</em> - UP) : si ce bit est actif, cela signifie que l'authenticateur a validé la présence de l'utilisateur par un test de présence (<em>Test of User Presence</em> - TUP). Cela peut notamment correspondre à l'appui sur un bouton de l'authenticateur.</li>
-   <li>Bit 2 : Vérification de l'utilisateur (<em>User Verification</em> - UV) : si ce bit est actif, cela signifie que l'authenticateur a vérifié l'utilisateur en question via une méthode d'authentification (biométrique, code PIN, autre).</li>
-   <li>Bit 6 : Présence des données d'authentification vérifiées (<em>Attested Credential Data </em>- AT) : si ce bit est actif, le champ <code>attestedCredentialData</code> suivra immédiatement après les 37 premiers octets de cet objet.</li>
-   <li>Bit 7 : Présence des données d'extension (<em>Extension data</em> - ED) : si ce bit est actif, les données d'extensions suivront le champ <code>attestedCredentialData</code> s'il est présent ou seront situées après les 37 premiers octets de cet objet sinon.</li>
-  </ul>
- </li>
- <li><code><strong>signCount</strong></code> (4 octets) : un compteur de signature provenant de l'authenticateur. Cela permet au serveur de détecter un éventuel clonage de l'authenticateur.</li>
- <li><code><strong>attestedCredentialData</strong></code> (longueur variable) : les informations d'authentification qui ont été créées. Ce champ est uniquement présent lors d'un appel à <code>navigator.credentials.create()</code>. Ces informations sont représentées par une séquence d'octets au format suivant :
-  <ul>
-   <li><code><strong>AAGUID</strong></code> (16 octets) - <em>Authenticator Attestation Globally Unique Identifier</em>, un identifiant universel unique pour l'attestation de l'authenticateur qui identifie le modèle de l'authenticateur (pas cet exemplaire en particulier) afin qu'une autre partie puisse comprendre les caractéristiques de l'authenticateur en consultant ses méta-données.</li>
-   <li><code><strong>credentialIdLength</strong></code> (2 octets) - la longueur, en octets, de l'identifiant d'authentification qui suit ces octets.</li>
-   <li><code><strong>credentialId</strong></code> (longueur variable) - un identifiant unique pour ces informations d'authentification et qui pourra être demandé pour de futures authentifications. Cette information mesure <code>credentialIdLength</code> octets.</li>
-   <li><code><strong>credentialPublicKey</strong></code> (longueur variable) - une clé publique encodée au format <a href="https://tools.ietf.org/html/rfc8152">COSE</a>. Cette clé publique sera stockée sur le serveur et associée au compte de l'utilisateur afin d'être utilisée pour de futures authentifications.</li>
-  </ul>
- </li>
- <li><code><strong>extensions</strong></code> (longueur variable) - Une carte optionnelle, encodée au format <a href="https://tools.ietf.org/html/rfc7049">CBOR</a>, et qui contient les extensions de l'authenticateur.</li>
-</ul>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>TBD</p>
-
-<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('WebAuthn')}}</td>
-   <td>{{Spec2('WebAuthn')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.AuthenticatorAssertionResponse")}}</p>
+{{draft}}{{securecontext_header}}{{DefaultAPISidebar("Web Authentication API")}}
+
+La propriété **`authenticatorData`** (rattachée à  l'interface {{domxref("AuthenticatorAssertionResponse")}}) fournit un {{jsxref("ArrayBuffer")}} qui contient les informations relatives à l'authenticateur tels que :
+
+- l'empreinte d'identifiant (rpIdHash pour _Relying Party ID Hash_)
+- un compteur de signature
+- un test quant à la présence de l'utilisateur
+- des marqueurs (_flags_) de vérification de l'utilisateur
+- les éventuelles extensions traitées par l'authenticateur
+
+Cette propriété est signée par l'authenticateur (c'est l'un des deux champs qui est signé).
+
+## Syntaxe
+
+```js
+var authnrData = assertion.response.authnrData;
+```
+
+### Valeur
+
+Un objet {{jsxref("ArrayBuffer")}} dont la propriété {{jsxref("ArrayBuffer.byteLength")}} indique qu'il mesure au moins 37 octets et qui contient les champs suivants :
+
+- **`rpIdHash`** (32 octets) - Une empreinte SHA256 de l'identifiant de la partie fiable (i.e. - le domaine) tel que vu par le navigateur. Le serveur s'assurera ensuite que cette empreinte correspond à sa propre origine afin d'empêcher les tentatives de hameçonnage (_phishing_) ou d'autres attaques de l'homme du milieu (_man-in-the-middle_).
+- **`flags`** (1 octet) - Une série de bits qui indique les différents attributs validés par l'authenticateur. Les bits sont décrits comme suit (où le bit 0 correspond au bit de poids faible) (tous les bits ne sont pas mentionnés car certains sont réservés pour une utilisation future) :
+
+  - Bit 0 : Présence de l'utilisateur (_User Presence_ - UP) : si ce bit est actif, cela signifie que l'authenticateur a validé la présence de l'utilisateur par un test de présence (_Test of User Presence_ - TUP). Cela peut notamment correspondre à l'appui sur un bouton de l'authenticateur.
+  - Bit 2 : Vérification de l'utilisateur (_User Verification_ - UV) : si ce bit est actif, cela signifie que l'authenticateur a vérifié l'utilisateur en question via une méthode d'authentification (biométrique, code PIN, autre).
+  - Bit 6 : Présence des données d'authentification vérifiées (_Attested Credential Data_ - AT) : si ce bit est actif, le champ `attestedCredentialData` suivra immédiatement après les 37 premiers octets de cet objet.
+  - Bit 7 : Présence des données d'extension (_Extension data_ - ED) : si ce bit est actif, les données d'extensions suivront le champ `attestedCredentialData` s'il est présent ou seront situées après les 37 premiers octets de cet objet sinon.
+
+- **`signCount`** (4 octets) : un compteur de signature provenant de l'authenticateur. Cela permet au serveur de détecter un éventuel clonage de l'authenticateur.
+- **`attestedCredentialData`** (longueur variable) : les informations d'authentification qui ont été créées. Ce champ est uniquement présent lors d'un appel à `navigator.credentials.create()`. Ces informations sont représentées par une séquence d'octets au format suivant :
+
+  - **`AAGUID`** (16 octets) - _Authenticator Attestation Globally Unique Identifier_, un identifiant universel unique pour l'attestation de l'authenticateur qui identifie le modèle de l'authenticateur (pas cet exemplaire en particulier) afin qu'une autre partie puisse comprendre les caractéristiques de l'authenticateur en consultant ses méta-données.
+  - **`credentialIdLength`** (2 octets) - la longueur, en octets, de l'identifiant d'authentification qui suit ces octets.
+  - **`credentialId`** (longueur variable) - un identifiant unique pour ces informations d'authentification et qui pourra être demandé pour de futures authentifications. Cette information mesure `credentialIdLength` octets.
+  - **`credentialPublicKey`** (longueur variable) - une clé publique encodée au format [COSE](https://tools.ietf.org/html/rfc8152). Cette clé publique sera stockée sur le serveur et associée au compte de l'utilisateur afin d'être utilisée pour de futures authentifications.
+
+- **`extensions`** (longueur variable) - Une carte optionnelle, encodée au format [CBOR](https://tools.ietf.org/html/rfc7049), et qui contient les extensions de l'authenticateur.
+
+## Exemples
+
+TBD
+
+## Specifications
+
+| Spécification                    | État                         | Commentaires         |
+| -------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('WebAuthn')}} | {{Spec2('WebAuthn')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.AuthenticatorAssertionResponse")}}
diff --git a/files/fr/web/api/authenticatorassertionresponse/index.md b/files/fr/web/api/authenticatorassertionresponse/index.md
index 5b1ff20f39..2fd0d5ac37 100644
--- a/files/fr/web/api/authenticatorassertionresponse/index.md
+++ b/files/fr/web/api/authenticatorassertionresponse/index.md
@@ -10,58 +10,45 @@ tags:
   - WebAuthn
 translation_of: Web/API/AuthenticatorAssertionResponse
 ---
-<p>{{APIRef("Web Authentication API")}}{{securecontext_header}}</p>
+{{APIRef("Web Authentication API")}}{{securecontext_header}}
 
-<p>L'interface <code><strong>AuthenticatorAssertionResponse</strong></code>, rattachée à l'<a href="/fr/docs/Web/API/Web_Authentication_API">API Web Authentication</a>, est renvoyée par un appel à {{domxref('CredentialsContainer.get()')}} lorsqu'on a passé un objet {{domxref('PublicKeyCredential')}} en argument. Cette interface fournit une preuve à un service que l'objet possède une paire de clé et que la requête d'authentification est valide et approvée.</p>
+L'interface **`AuthenticatorAssertionResponse`**, rattachée à l'[API Web Authentication](/fr/docs/Web/API/Web_Authentication_API), est renvoyée par un appel à {{domxref('CredentialsContainer.get()')}} lorsqu'on a passé un objet {{domxref('PublicKeyCredential')}} en argument. Cette interface fournit une preuve à un service que l'objet possède une paire de clé et que la requête d'authentification est valide et approvée.
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<dl>
- <dt><code>AuthenticatorAssertionResponse.clientDataJSON</code></dt>
- <dd>Les données du client pour l'authentification telles que l'origine et le <em>challenge</em>. La propriété {{domxref("AuthenticatorAttestationResponse.clientDataJSON","clientDataJSON")}} est héritée de {{domxref("AuthenticatorResponse")}}.</dd>
- <dt>{{domxref("AuthenticatorAssertionResponse.authenticatorData")}}</dt>
- <dd>Un objet {{jsxref("ArrayBuffer")}} contenant les informations sur l'authenticateur telles que :
- <ul>
-  <li>l'empreinte d'identifiant (<em>Relying Party ID Hash</em>) <code>rpidHash</code></li>
-  <li>un compteur de signature</li>
-  <li>un test de présence d'utilisateur</li>
-  <li>des marqueurs de vérification de l'utilisateur</li>
-  <li>les éventuelles extensions traitées par l'authentificateur</li>
- </ul>
- Ce champ est l'un des deux champs qui est signé par l'authentificateur.</dd>
- <dt>{{domxref("AuthenticatorAssertionResponse.signature")}}</dt>
- <dd>Une signature d'assertion par rapport à {{domxref("AuthenticatorAssertionResponse.authenticatorData")}} et {{domxref("AuthenticatorResponse.clientDataJSON")}}. La signature d'assertion est créée avec la clé privée de la paire de clés (générée avec l'appel à <code>create()</code>) et est vérifiée avec la clé publique la même paire de clé.</dd>
- <dt>{{domxref("AuthenticatorAssertionResponse.userHandle")}}</dt>
- <dd>Un objet {{jsxref("ArrayBuffer")}} contenant un identifiant opaque pour l'utilisateur.</dd>
-</dl>
+- `AuthenticatorAssertionResponse.clientDataJSON`
+  - : Les données du client pour l'authentification telles que l'origine et le _challenge_. La propriété {{domxref("AuthenticatorAttestationResponse.clientDataJSON","clientDataJSON")}} est héritée de {{domxref("AuthenticatorResponse")}}.
+- {{domxref("AuthenticatorAssertionResponse.authenticatorData")}}
 
-<h2 id="Méthodes">Méthodes</h2>
+  - : Un objet {{jsxref("ArrayBuffer")}} contenant les informations sur l'authenticateur telles que :
 
-<p>Aucune.</p>
+    - l'empreinte d'identifiant (_Relying Party ID Hash_) `rpidHash`
+    - un compteur de signature
+    - un test de présence d'utilisateur
+    - des marqueurs de vérification de l'utilisateur
+    - les éventuelles extensions traitées par l'authentificateur
 
-<h2 id="Exemples">Exemples</h2>
+    Ce champ est l'un des deux champs qui est signé par l'authentificateur.
 
-<p>TBD</p>
+- {{domxref("AuthenticatorAssertionResponse.signature")}}
+  - : Une signature d'assertion par rapport à {{domxref("AuthenticatorAssertionResponse.authenticatorData")}} et {{domxref("AuthenticatorResponse.clientDataJSON")}}. La signature d'assertion est créée avec la clé privée de la paire de clés (générée avec l'appel à `create()`) et est vérifiée avec la clé publique la même paire de clé.
+- {{domxref("AuthenticatorAssertionResponse.userHandle")}}
+  - : Un objet {{jsxref("ArrayBuffer")}} contenant un identifiant opaque pour l'utilisateur.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Méthodes
 
-<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('WebAuthn')}}</td>
-   <td>{{Spec2('WebAuthn')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+Aucune.
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Exemples
 
-<p>{{Compat("api.AuthenticatorAssertionResponse")}}</p>
+TBD
+
+## Spécifications
+
+| Spécification                    | État                         | Commentaires         |
+| -------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('WebAuthn')}} | {{Spec2('WebAuthn')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.AuthenticatorAssertionResponse")}}
diff --git a/files/fr/web/api/authenticatorattestationresponse/index.md b/files/fr/web/api/authenticatorattestationresponse/index.md
index 13a1741a88..b4a6dbbad3 100644
--- a/files/fr/web/api/authenticatorattestationresponse/index.md
+++ b/files/fr/web/api/authenticatorattestationresponse/index.md
@@ -10,46 +10,31 @@ tags:
   - WebAuthn
 translation_of: Web/API/AuthenticatorAttestationResponse
 ---
-<p>{{APIRef("Web Authentication API")}}{{securecontext_header}}</p>
+{{APIRef("Web Authentication API")}}{{securecontext_header}}
 
-<p>L'interface <strong><code>AuthenticatorAttestationResponse</code></strong>, rattachée à l'<a href="/en-US/docs/Web/API/Web_Authentication_API">API Web Authentication</a>, est renvoyée par un appel à {{domxref('CredentialsContainer.create()')}} lorsqu'un objet {{domxref('PublicKeyCredential')}} est passé à la méthode. Elle fournit une racine cryptographique de confiance pour la nouvelle paire de clés qui a été générée.</p>
+L'interface **`AuthenticatorAttestationResponse`**, rattachée à l'[API Web Authentication](/en-US/docs/Web/API/Web_Authentication_API), est renvoyée par un appel à {{domxref('CredentialsContainer.create()')}} lorsqu'un objet {{domxref('PublicKeyCredential')}} est passé à la méthode. Elle fournit une racine cryptographique de confiance pour la nouvelle paire de clés qui a été générée.
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<dl>
- <dt><code>AuthenticatorAttestationResponse.clientDataJSON</code></dt>
- <dd>Les données relatives aux client pour l'authentification telles que l'origine et le <em>challenge</em>. La propriété {{domxref("AuthenticatorAttestationResponse.clientDataJSON","clientDataJSON")}} est héritée de l'interface {{domxref("AuthenticatorResponse")}}.</dd>
- <dt>{{domxref("AuthenticatorAttestationResponse.attestationObject")}}</dt>
- <dd>Un objet {{domxref("ArrayBuffer")}} qui contient les données de l'authenticateur ainsi qu'une instruction d'attestation pour la nouvelle paire de clés.</dd>
-</dl>
+- `AuthenticatorAttestationResponse.clientDataJSON`
+  - : Les données relatives aux client pour l'authentification telles que l'origine et le _challenge_. La propriété {{domxref("AuthenticatorAttestationResponse.clientDataJSON","clientDataJSON")}} est héritée de l'interface {{domxref("AuthenticatorResponse")}}.
+- {{domxref("AuthenticatorAttestationResponse.attestationObject")}}
+  - : Un objet {{domxref("ArrayBuffer")}} qui contient les données de l'authenticateur ainsi qu'une instruction d'attestation pour la nouvelle paire de clés.
 
-<h2 id="Méthodes">Méthodes</h2>
+## Méthodes
 
-<p>Aucune.</p>
+Aucune.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>TBD</p>
+TBD
 
-<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('WebAuthn')}}</td>
-   <td>{{Spec2('WebAuthn')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                    | État                         | Commentaires         |
+| -------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('WebAuthn')}} | {{Spec2('WebAuthn')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.AuthenticatorAttestationResponse")}}</p>
+{{Compat("api.AuthenticatorAttestationResponse")}}
diff --git a/files/fr/web/api/authenticatorresponse/index.md b/files/fr/web/api/authenticatorresponse/index.md
index 097cbfad44..cea562c832 100644
--- a/files/fr/web/api/authenticatorresponse/index.md
+++ b/files/fr/web/api/authenticatorresponse/index.md
@@ -9,49 +9,32 @@ tags:
   - Web Authn
 translation_of: Web/API/AuthenticatorResponse
 ---
-<p>{{APIRef("Web Authentication API")}}{{securecontext_header}}</p>
+{{APIRef("Web Authentication API")}}{{securecontext_header}}
 
-<p>L'interface <code><strong>AuthenticatorResponse</strong></code>, rattachée à l'<a href="/en-US/docs/Web/API/Web_Authentication_API">API Web Authentication</a>, constitue l'interface de base pour les interfaces qui fournissent une racine cryptographique de confiance pour une paire de clés. Les interfaces filles contiennent des informations relatives au navigateur telles que l'origine du <em>challenge</em> et qui peuvent être renvoyée par {{domxref("PublicKeyCredential.response")}}.</p>
+L'interface **`AuthenticatorResponse`**, rattachée à l'[API Web Authentication](/en-US/docs/Web/API/Web_Authentication_API), constitue l'interface de base pour les interfaces qui fournissent une racine cryptographique de confiance pour une paire de clés. Les interfaces filles contiennent des informations relatives au navigateur telles que l'origine du _challenge_ et qui peuvent être renvoyée par {{domxref("PublicKeyCredential.response")}}.
 
-<h2 id="Interfaces_basées_sur_AuthenticatorResponse">Interfaces basées sur <code>AuthenticatorResponse</code></h2>
+## Interfaces basées sur `AuthenticatorResponse`
 
-<p>Voici la liste des interfaces basées sur <code>AuthenticatorResponse</code>.</p>
+Voici la liste des interfaces basées sur `AuthenticatorResponse`.
 
-<ul>
- <li>{{domxref("AuthenticatorAssertionResponse")}}</li>
- <li>{{domxref("AuthenticatorAttestationResponse")}}</li>
-</ul>
+- {{domxref("AuthenticatorAssertionResponse")}}
+- {{domxref("AuthenticatorAttestationResponse")}}
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<dl>
- <dt>{{domxref("AuthenticatorResponse.clientDataJSON")}}</dt>
- <dd>Une chaîne de caractères <a href="/fr/docs/Learn/JavaScript/Objects/JSON">JSON</a> stockée dans un {{domxref("ArrayBuffer")}} et qui représente les données du client passées à {{domxref("CredentialsContainer.create()")}} ou {{domxref("CredentialsContainer.get()")}}.</dd>
-</dl>
+- {{domxref("AuthenticatorResponse.clientDataJSON")}}
+  - : Une chaîne de caractères [JSON](/fr/docs/Learn/JavaScript/Objects/JSON) stockée dans un {{domxref("ArrayBuffer")}} et qui représente les données du client passées à {{domxref("CredentialsContainer.create()")}} ou {{domxref("CredentialsContainer.get()")}}.
 
-<h2 id="Méthodes">Méthodes</h2>
+## Méthodes
 
-<p>Aucune.</p>
+Aucune.
 
-<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('WebAuthn')}}</td>
-   <td>{{Spec2('WebAuthn')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                    | État                         | Commentaires         |
+| -------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('WebAuthn')}} | {{Spec2('WebAuthn')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.AuthenticatorResponse")}}</p>
+{{Compat("api.AuthenticatorResponse")}}
diff --git a/files/fr/web/api/baseaudiocontext/createbiquadfilter/index.md b/files/fr/web/api/baseaudiocontext/createbiquadfilter/index.md
index 3d995409bb..d33fd5eb4e 100644
--- a/files/fr/web/api/baseaudiocontext/createbiquadfilter/index.md
+++ b/files/fr/web/api/baseaudiocontext/createbiquadfilter/index.md
@@ -11,25 +11,24 @@ tags:
   - createBiquadFilter
 translation_of: Web/API/BaseAudioContext/createBiquadFilter
 ---
-<p>{{ APIRef("Web Audio API") }}</p>
+{{ APIRef("Web Audio API") }}
 
-<div>
-<p>La méthode <code>createBiquadFilter()</code> de l'interface {{ domxref("BaseAudioContext") }} crée un {{ domxref("BiquadFilterNode") }}, qui représente un filtre de second ordre configurable comme plusieurs types de filtres communs différents.</p>
-</div>
+La méthode `createBiquadFilter()` de l'interface {{ domxref("BaseAudioContext") }} crée un {{ domxref("BiquadFilterNode") }}, qui représente un filtre de second ordre configurable comme plusieurs types de filtres communs différents.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">baseAudioContext.createBiquadFilter();</pre>
+    baseAudioContext.createBiquadFilter();
 
-<h3 id="Description">Retourne</h3>
+### Retourne
 
-<p>un {{domxref("BiquadFilterNode")}}.</p>
+un {{domxref("BiquadFilterNode")}}.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<p>L'exemple suivant montre une utilisation basique d'un AudioContext pour créer un nœud de filtre Biquad. Pour un exemple fonctionnel complet, visitez notre démonstration <a href="https://mdn.github.io/voice-change-o-matic/">voice-change-o-matic</a> (et lisez de même le <a href="https://github.com/mdn/voice-change-o-matic">code source</a>).</p>
+L'exemple suivant montre une utilisation basique d'un AudioContext pour créer un nœud de filtre Biquad. Pour un exemple fonctionnel complet, visitez notre démonstration [voice-change-o-matic](https://mdn.github.io/voice-change-o-matic/) (et lisez de même le [code source](https://github.com/mdn/voice-change-o-matic)).
 
-<pre class="brush: js">var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+```js
+var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
 
 //set up the different audio nodes we will use for the app
 var analyser = audioCtx.createAnalyser();
@@ -52,35 +51,19 @@ gainNode.connect(audioCtx.destination);
 
 biquadFilter.type = "lowshelf";
 biquadFilter.frequency.setValueAtTime(1000, audioCtx.currentTime);
-biquadFilter.gain.setValueAtTime(25, audioCtx.currentTime);</pre>
+biquadFilter.gain.setValueAtTime(25, audioCtx.currentTime);
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Web Audio API', '#dom-baseaudiocontext-createbiquadfilter', 'createBiquadFilter()')}}</td>
-   <td>{{Spec2('Web Audio API')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+| Specification                                                                                                                    | Status                               | Comment |
+| -------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ------- |
+| {{SpecName('Web Audio API', '#dom-baseaudiocontext-createbiquadfilter', 'createBiquadFilter()')}} | {{Spec2('Web Audio API')}} |         |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<div>
+{{Compat("api.BaseAudioContext.createBiquadFilter")}}
 
+## Voir aussi
 
-<p>{{Compat("api.BaseAudioContext.createBiquadFilter")}}</p>
-</div>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser l'API Web Audio</a></li>
-</ul>
+- [Utiliser l'API Web Audio](/en-US/docs/Web_Audio_API/Using_Web_Audio_API)
diff --git a/files/fr/web/api/baseaudiocontext/createbuffer/index.md b/files/fr/web/api/baseaudiocontext/createbuffer/index.md
index 55ca8f3ea5..e87275b3eb 100644
--- a/files/fr/web/api/baseaudiocontext/createbuffer/index.md
+++ b/files/fr/web/api/baseaudiocontext/createbuffer/index.md
@@ -11,70 +11,67 @@ tags:
   - createBuffer
 translation_of: Web/API/BaseAudioContext/createBuffer
 ---
-<p>{{APIRef("API Web Audio")}}</p>
+{{APIRef("API Web Audio")}}
 
-<p>La méthode <code>createBuffer()</code> de l'interface {{domxref("BaseAudioContext")}} est utilisée pour créer un nouvel objet {{domxref("AudioBuffer")}} vide, qui peut ensuite être rempli.</p>
+La méthode `createBuffer()` de l'interface {{domxref("BaseAudioContext")}} est utilisée pour créer un nouvel objet {{domxref("AudioBuffer")}} vide, qui peut ensuite être rempli.
 
-<p>Pour plus de détails sur les tampons audio, consultez la page de référence {{domxref ("AudioBuffer")}}.</p>
+Pour plus de détails sur les tampons audio, consultez la page de référence {{domxref ("AudioBuffer")}}.
 
-<div class="note">
-<p><strong>Note :</strong> <code>createBuffer()</code> permettait de prendre des données compressées et de restituer des échantillons décodés, mais cette possibilité a été supprimée de la spécification, du fait que tout le décodage était effectué dans le thread principal, donc <code>createBuffer()</code> bloquait l'exécution du reste du code. La méthode asynchrone <code>decodeAudioData()</code> fait la même chose - prend l'audio compressé, par exemple, un fichier MP3, et vous renvoie directement un {{domxref("AudioBuffer")}} que vous pouvez ensuite faire jouer via {{domxref("AudioBufferSourceNode")}}. Pour des utilisations simples comme la lecture d'un fichier MP3, <code>decodeAudioData()</code> est ce que vous devriez utiliser.</p>
-</div>
+> **Note :** `createBuffer()` permettait de prendre des données compressées et de restituer des échantillons décodés, mais cette possibilité a été supprimée de la spécification, du fait que tout le décodage était effectué dans le thread principal, donc `createBuffer()` bloquait l'exécution du reste du code. La méthode asynchrone `decodeAudioData()` fait la même chose - prend l'audio compressé, par exemple, un fichier MP3, et vous renvoie directement un {{domxref("AudioBuffer")}} que vous pouvez ensuite faire jouer via {{domxref("AudioBufferSourceNode")}}. Pour des utilisations simples comme la lecture d'un fichier MP3, `decodeAudioData()` est ce que vous devriez utiliser.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var tampon = baseAudioContext.createBuffer(<em>nbDeCanaux</em>, <em>longueur</em>, <em>frequenceDEchantillonnage</em>);</pre>
+    var tampon = baseAudioContext.createBuffer(nbDeCanaux, longueur, frequenceDEchantillonnage);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<div class="note">
-<p><strong>Note :</strong> pour une explication en profondeur de la façon dont les tampons audio fonctionnent, ainsi que de leur signification, lire <a href="/fr/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API">Les concepts de base de la Web Audio API</a> de notre guide des concepts de base.</p>
-</div>
+> **Note :** pour une explication en profondeur de la façon dont les tampons audio fonctionnent, ainsi que de leur signification, lire [Les concepts de base de la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API) de notre guide des concepts de base.
 
-<dl>
- <dt>nbDeCanaux</dt>
- <dd>Un nombre entier représentant le nombre de canaux que ce tampon doit avoir. Les implémentations doivent prendre en charge un minimum de 1 canal et un maximum de 32 canaux.</dd>
- <dt>longueur</dt>
- <dd>Un entier représentant la taille du tampon dans les trames d'échantillons.</dd>
- <dt>frequenceDEchantillonnage</dt>
- <dd>La fréquence d'échantillonnage des données audio linéaires en trames d'échantillons par seconde. Une implémentation doit supporter des fréquences d'échantillonnage comprises au minimum dans la plage 22050 et 96000.</dd>
-</dl>
+- nbDeCanaux
+  - : Un nombre entier représentant le nombre de canaux que ce tampon doit avoir. Les implémentations doivent prendre en charge un minimum de 1 canal et un maximum de 32 canaux.
+- longueur
+  - : Un entier représentant la taille du tampon dans les trames d'échantillons.
+- frequenceDEchantillonnage
+  - : La fréquence d'échantillonnage des données audio linéaires en trames d'échantillons par seconde. Une implémentation doit supporter des fréquences d'échantillonnage comprises au minimum dans la plage 22050 et 96000.
 
-<h3 id="Retourne">Retourne</h3>
+### Retourne
 
-<p>Un {{domxref("AudioBuffer")}}.</p>
+Un {{domxref("AudioBuffer")}}.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Tout d'abord, deux exemples triviaux simples pour aider à expliquer comment les paramètres sont utilisés :</p>
+Tout d'abord, deux exemples triviaux simples pour aider à expliquer comment les paramètres sont utilisés :
 
-<pre class="brush: js">var ctxAudio = new AudioContext();
-var tampon = ctxAudio.createBuffer(2, 22050, 44100);</pre>
+```js
+var ctxAudio = new AudioContext();
+var tampon = ctxAudio.createBuffer(2, 22050, 44100);
+```
 
-<p>Si vous utilisez cet appel, vous obtiendrez un tampon stéréo (deux canaux), qui, lorsque relu avec un <code>AudioContext</code> fonctionnant à 44100Hz (très courant, la plupart des cartes son normales fonctionnent à cette fréquence), durera 0,5 seconde : 22050 trames / 44100 Hz = 0,5 seconde.</p>
+Si vous utilisez cet appel, vous obtiendrez un tampon stéréo (deux canaux), qui, lorsque relu avec un `AudioContext` fonctionnant à 44100Hz (très courant, la plupart des cartes son normales fonctionnent à cette fréquence), durera 0,5 seconde : 22050 trames / 44100 Hz = 0,5 seconde.
 
-<pre class="brush: js">var ctxAudio = new AudioContext();
-var tampon = ctxAudio.createBuffer(1, 22050, 22050);</pre>
+```js
+var ctxAudio = new AudioContext();
+var tampon = ctxAudio.createBuffer(1, 22050, 22050);
+```
 
-<p>Si vous utilisez cet appel, vous obtiendrez un tampon mono (un canal), qui, lorsqu'il sera relu avec un <code>AudioContext</code> fonctionnant à 44100Hz, sera automatiquement *rééchantillonné* à 44100Hz (et produira donc 44100 trames), et durera 1,0 seconde : 44100 images / 44100Hz = 1 seconde.</p>
+Si vous utilisez cet appel, vous obtiendrez un tampon mono (un canal), qui, lorsqu'il sera relu avec un `AudioContext` fonctionnant à 44100Hz, sera automatiquement \*rééchantillonné\* à 44100Hz (et produira donc 44100 trames), et durera 1,0 seconde : 44100 images / 44100Hz = 1 seconde.
 
-<div class="note">
-<p><strong>Note :</strong> le rééchantillonnage audio est très similaire au redimensionnement d'une image : supposons que vous ayez une image 16 x 16, mais que vous vouliez qu'elle remplisse une zone 32x32: vous la redimensionnez (rééchantillonnez). Le résultat aura une qualité moindre (il pourra être flou ou bizarre, selon l'algorithme de redimensionnement), mais cela fonctionnera, et l'image redimensionnée prendra moins de place. L'audio rééchantillonné est exactement la même chose - vous économisez de l'espace, mais en pratique, vous ne pourrez pas reproduire correctement le contenu haute fréquence (les sons aigus).</p>
-</div>
+> **Note :** le rééchantillonnage audio est très similaire au redimensionnement d'une image : supposons que vous ayez une image 16 x 16, mais que vous vouliez qu'elle remplisse une zone 32x32: vous la redimensionnez (rééchantillonnez). Le résultat aura une qualité moindre (il pourra être flou ou bizarre, selon l'algorithme de redimensionnement), mais cela fonctionnera, et l'image redimensionnée prendra moins de place. L'audio rééchantillonné est exactement la même chose - vous économisez de l'espace, mais en pratique, vous ne pourrez pas reproduire correctement le contenu haute fréquence (les sons aigus).
 
-<p>Examinons maintenant un exemple de <code>createBuffer()</code> plus complexe, dans lequel nous créons un tampon de deux secondes, le remplissons de bruit blanc, puis le reproduisons via {{domxref("AudioBufferSourceNode")}}. Le commentaire devrait clairement faire comprendre ce qui se passe. Vous pouvez également exécuter le code en direct ou regarder le source.</p>
+Examinons maintenant un exemple de `createBuffer()` plus complexe, dans lequel nous créons un tampon de deux secondes, le remplissons de bruit blanc, puis le reproduisons via {{domxref("AudioBufferSourceNode")}}. Le commentaire devrait clairement faire comprendre ce qui se passe. Vous pouvez également exécuter le code en direct ou regarder le source.
 
-<pre class="brush: js">var ctxAudio = new (window.AudioContext || window.webkitAudioContext)();
+```js
+var ctxAudio = new (window.AudioContext || window.webkitAudioContext)();
 
 // Création d'un tampon stéréo vide de trois secondes à la fréquence d'échantillonnage de l'AudioContext
 var monArrayBuffer = ctxAudio.createBuffer(2, ctxAudio.sampleRate * 3, ctxAudio.sampleRate);
 
 // Remplissage du tampon avec du bruit blanc ;
 // simplement des valeurs aléatoires entre -1,0 et 1,0
-for (var canal = 0; canal &lt; monArrayBuffer.numberOfChannels; canal++) {
+for (var canal = 0; canal < monArrayBuffer.numberOfChannels; canal++) {
   // Cela nous donne le ArrayBuffer qui contient effectivement les données
   var donneesCourantes = monArrayBuffer.getChannelData(canal);
-  for (var i = 0; i &lt; monArrayBuffer.length; i++) {
+  for (var i = 0; i < monArrayBuffer.length; i++) {
     // Math.random() est dans [0; 1,0]
     // l'audio doit se trouver dans [-1,0; 1,0]
     donneesCourantes[i] = Math.random() * 2 - 1;
@@ -90,31 +87,19 @@ source.buffer = monArrayBuffer;
 // de sorte que nous puissions entendre le son
 source.connect(ctxAudio.destination);
 // Démarrer la lecture de la source
-source.start();</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Web Audio API', '#dom-baseaudiocontext-createbuffer', 'createBuffer()')}}</td>
-   <td>{{Spec2('Web Audio API')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.BaseAudioContext.createBuffer")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utilisation de l'API Web Audio</a></li>
-</ul>
+source.start();
+```
+
+## Spécifications
+
+| Spécification                                                                                                    | Statut                               | Commentaire |
+| ---------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- |
+| {{SpecName('Web Audio API', '#dom-baseaudiocontext-createbuffer', 'createBuffer()')}} | {{Spec2('Web Audio API')}} |             |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.BaseAudioContext.createBuffer")}}
+
+## Voir aussi
+
+- [Utilisation de l'API Web Audio](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API)
diff --git a/files/fr/web/api/baseaudiocontext/createbuffersource/index.md b/files/fr/web/api/baseaudiocontext/createbuffersource/index.md
index 9a9dfe08cf..b01d7c1884 100644
--- a/files/fr/web/api/baseaudiocontext/createbuffersource/index.md
+++ b/files/fr/web/api/baseaudiocontext/createbuffersource/index.md
@@ -3,29 +3,28 @@ title: BaseAudioContext.createBufferSource()
 slug: Web/API/BaseAudioContext/createBufferSource
 translation_of: Web/API/BaseAudioContext/createBufferSource
 ---
-<p>{{ APIRef("Web Audio API") }}</p>
+{{ APIRef("Web Audio API") }}
 
-<p>La méthode <code>createBufferSource()</code> de l’interface {{ domxref("BaseAudioContext") }} est utilisée pour créer un nouveau {{ domxref("AudioBufferSourceNode") }}, qui peut être employé pour jouer des données audio contenues dans un objet {{ domxref("AudioBuffer") }}.</p>
+La méthode `createBufferSource()` de l’interface {{ domxref("BaseAudioContext") }} est utilisée pour créer un nouveau {{ domxref("AudioBufferSourceNode") }}, qui peut être employé pour jouer des données audio contenues dans un objet {{ domxref("AudioBuffer") }}.
 
-<p>Des {{ domxref("AudioBuffer") }} peuvent être créés en utilisant {{domxref("BaseAudioContext.createBuffer")}}, ou sont retournés par la méthode {{domxref("BaseAudioContext.decodeAudioData")}} quand elle a terminé de décoder une piste audio avec succès.</p>
+Des {{ domxref("AudioBuffer") }} peuvent être créés en utilisant {{domxref("BaseAudioContext.createBuffer")}}, ou sont retournés par la méthode {{domxref("BaseAudioContext.decodeAudioData")}} quand elle a terminé de décoder une piste audio avec succès.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var <var>source</var> = <var>baseAudioContext</var>.createBufferSource();</pre>
+    var source = baseAudioContext.createBufferSource();
 
-<h3 id="Retourne">Retourne</h3>
+### Retourne
 
-<p>Un {{domxref("AudioBufferSourceNode")}}.</p>
+Un {{domxref("AudioBufferSourceNode")}}.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Dans cet exemple, on crée un tampon de deux secondes, on le remplit avec du bruit blanc, puis on le joue via un {{ domxref("AudioBufferSourceNode") }}. Les commentaires devraient expliquer clairement ce qui se passe.</p>
+Dans cet exemple, on crée un tampon de deux secondes, on le remplit avec du bruit blanc, puis on le joue via un {{ domxref("AudioBufferSourceNode") }}. Les commentaires devraient expliquer clairement ce qui se passe.
 
-<div class="note">
-<p><strong>Note :</strong> Vous pouvez également <a href="https://mdn.github.io/webaudio-examples/audio-buffer/">exécuter le code en direct</a>, ou <a href="https://github.com/mdn/webaudio-examples/blob/master/audio-buffer/index.html">voir la source</a>.</p>
-</div>
+> **Note :** Vous pouvez également [exécuter le code en direct](https://mdn.github.io/webaudio-examples/audio-buffer/), ou [voir la source](https://github.com/mdn/webaudio-examples/blob/master/audio-buffer/index.html).
 
-<pre class="brush: js">var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+```js
+var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
 var button = document.querySelector('button');
 var pre = document.querySelector('pre');
 var myScript = document.querySelector('script');
@@ -43,10 +42,10 @@ var myArrayBuffer = audioCtx.createBuffer(2, frameCount, audioCtx.sampleRate);
 button.onclick = function() {
   // Remplit le tampon avec du bruit blanc ;
   // simplement des valeurs aléatoires entre -1.0 et 1.0
-  for (var channel = 0; channel &lt; channels; channel++) {
+  for (var channel = 0; channel < channels; channel++) {
    // Ceci nous donne l’ArrayBuffer qui contient les données
    var nowBuffering = myArrayBuffer.getChannelData(channel);
-   for (var i = 0; i &lt; frameCount; i++) {
+   for (var i = 0; i < frameCount; i++) {
      // Math.random() est parmi [0; 1.0]
      // audio doit être parmi [-1.0; 1.0]
      nowBuffering[i] = Math.random() * 2 - 1;
@@ -63,31 +62,19 @@ button.onclick = function() {
   source.connect(audioCtx.destination);
   // commence la lecture de la source
   source.start();
-}</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Web Audio API', '#dom-baseaudiocontext-createbuffersource', 'createBufferSource()')}}</td>
-   <td>{{Spec2('Web Audio API')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.BaseAudioContext.createBufferSource")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
-</ul>
+}
+```
+
+## Spécifications
+
+| Spécification                                                                                                                    | Statut                               | Commentaire |
+| -------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- |
+| {{SpecName('Web Audio API', '#dom-baseaudiocontext-createbuffersource', 'createBufferSource()')}} | {{Spec2('Web Audio API')}} |             |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.BaseAudioContext.createBufferSource")}}
+
+## Voir aussi
+
+- [Utiliser la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API)
diff --git a/files/fr/web/api/baseaudiocontext/creategain/index.md b/files/fr/web/api/baseaudiocontext/creategain/index.md
index 90039ecc31..0dcba996f1 100644
--- a/files/fr/web/api/baseaudiocontext/creategain/index.md
+++ b/files/fr/web/api/baseaudiocontext/creategain/index.md
@@ -14,32 +14,35 @@ tags:
 translation_of: Web/API/BaseAudioContext/createGain
 original_slug: Web/API/AudioContext/createGain
 ---
-<p>{{ APIRef("Web Audio API") }}</p>
+{{ APIRef("Web Audio API") }}
 
-<div>
-<p>La méthode createGain de l'interface {{ domxref("AudioContext") }} crée un {{ domxref("GainNode") }} qui peut être utilisé pour contrôler le volume global du graphe audio.</p>
-</div>
+La méthode createGain de l'interface {{ domxref("AudioContext") }} crée un {{ domxref("GainNode") }} qui peut être utilisé pour contrôler le volume global du graphe audio.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">var contexteAudio = new AudioContext();
-var gainNode = contexteAudio.createGain();</pre>
+```js
+var contexteAudio = new AudioContext();
+var gainNode = contexteAudio.createGain();
+```
 
-<h3 id="Description">Retourne</h3>
+### Retourne
 
-<p>Un {{domxref("GainNode")}} qui prend en entrée une ou plusieurs sources audio et en sortie un son dont le volume a été ajusté à un niveau indiqué par le paramètre de type <a href="/en-US/docs/Web/API/AudioParam#a-rate">a-rate</a> {{domxref("GainNode.gain")}}.</p>
+Un {{domxref("GainNode")}} qui prend en entrée une ou plusieurs sources audio et en sortie un son dont le volume a été ajusté à un niveau indiqué par le paramètre de type [a-rate](/en-US/docs/Web/API/AudioParam#a-rate) {{domxref("GainNode.gain")}}.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<p>L'exemple suivant montre l'utilisation d'un {{domxref("AudioContext")}} pour créer un {{ domxref("GainNode") }}, qui sert à activer et désactiver le son au clic d'un bouton, en changeant la valeur de la propriété gain.<br>
- <br>
- L'extrait de code ci-dessous ne fonctionne pas tel quel - pour un exemple complet qui fonctionne, consulter la démo <a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a> (<a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js">et son code source</a>.)</p>
+L'exemple suivant montre l'utilisation d'un {{domxref("AudioContext")}} pour créer un {{ domxref("GainNode") }}, qui sert à activer et désactiver le son au clic d'un bouton, en changeant la valeur de la propriété gain.
 
-<pre class="brush: html">&lt;div&gt;
-  &lt;button class="boutonson"&gt;Mute button&lt;/button&gt;
-&lt;/div&gt;</pre>
+L'extrait de code ci-dessous ne fonctionne pas tel quel - pour un exemple complet qui fonctionne, consulter la démo [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/) ([et son code source](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js).)
 
-<pre class="brush: js">var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+```html
+<div>
+  <button class="boutonson">Mute button</button>
+</div>
+```
+
+```js
+var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
 var gainNode = contexteAudio.createGain();
 var boutonSon = document.querySelector('.boutonson'),
     source;
@@ -81,31 +84,19 @@ function couperSon () {
         boutonSon.id = "";
         boutonSon.innerHTML = "Couper le son";
     }
-}</pre>
-
-<h2 id="Spécification">Spécification</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Web Audio API', '#widl-AudioContext-createGain-GainNode', 'createGain()')}}</td>
-   <td>{{Spec2('Web Audio API')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_navigateur">Compatibilité navigateur</h2>
-
-<p>{{Compat("api.BaseAudioContext.createGain")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
-</ul>
+}
+```
+
+## Spécification
+
+| Spécification                                                                                                        | Status                               | Commentaire |
+| -------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- |
+| {{SpecName('Web Audio API', '#widl-AudioContext-createGain-GainNode', 'createGain()')}} | {{Spec2('Web Audio API')}} |             |
+
+## Compatibilité navigateur
+
+{{Compat("api.BaseAudioContext.createGain")}}
+
+## Voir aussi
+
+- [Utiliser la Web Audio API](/fr/docs/Web_Audio_API/Using_Web_Audio_API)
diff --git a/files/fr/web/api/baseaudiocontext/createpanner/index.md b/files/fr/web/api/baseaudiocontext/createpanner/index.md
index 2c11e2a02e..12cb80751f 100644
--- a/files/fr/web/api/baseaudiocontext/createpanner/index.md
+++ b/files/fr/web/api/baseaudiocontext/createpanner/index.md
@@ -12,31 +12,30 @@ tags:
   - createPanner
 translation_of: Web/API/BaseAudioContext/createPanner
 ---
-<p>{{ APIRef("Web Audio API") }}</p>
+{{ APIRef("Web Audio API") }}
 
-<div>
-<p>La méthode <code>createPanner()</code> de l'interface {{ domxref("BaseAudioContext") }} est utilisée pour créer un nouveau {{domxref("PannerNode")}}, qui sert à spatialiser dans un environnement 3D un flux audio entrant.</p>
-</div>
+La méthode `createPanner()` de l'interface {{ domxref("BaseAudioContext") }} est utilisée pour créer un nouveau {{domxref("PannerNode")}}, qui sert à spatialiser dans un environnement 3D un flux audio entrant.
 
-<p>Le <em>panner node</em> est spatialisé en relation avec l'{{domxref("AudioListener") }} de l'AudioContext (défini par l'attribut {{domxref("AudioContext.listener") }}), qui représente la position et l'orientation de la personne écoutant le flux audio.</p>
+Le _panner node_ est spatialisé en relation avec l'{{domxref("AudioListener") }} de l'AudioContext (défini par l'attribut {{domxref("AudioContext.listener") }}), qui représente la position et l'orientation de la personne écoutant le flux audio.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">baseAudioCtx.createPanner();</pre>
+    baseAudioCtx.createPanner();
 
-<h3 id="Retourne">Retourne</h3>
+### Retourne
 
-<p>Un {{domxref("PannerNode")}}.</p>
+Un {{domxref("PannerNode")}}.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Dans l'exemple suivant, vous pouvez voir comment la méthode <code>createPanner()</code>, l'{{domxref("AudioListener")}} et le {{domxref("PannerNode")}} peuvent être utilisés pour contrôler la spatialisation d'un flux audio. Généralement, vous définirez la position dans un espace 3D que votre écouteur et votre <em>panner</em> (source) occupaient initialement, puis ajuster la position de l'un ou des deux au fur et à mesure de l'utilisation. Vous pourriez par exemple vouloir déplacer un personnage dans un monde de jeu vidéo, et vouloir que le rendu audio change de manière réaliste tandis que le personnage s'approche ou s'éloigne d'un diffuseur audio tel qu'une chaîne stéréo. Dans cet exemple, vous pouvez voir ceci contrôlé par les fonctions <code>moveRight()</code>, <code>moveLeft()</code>, etc., qui définissent de nouvelles valeurs pour la position du <em>panner</em> via la fonction <code>PositionPanner()</code>.</p>
+Dans l'exemple suivant, vous pouvez voir comment la méthode `createPanner()`, l'{{domxref("AudioListener")}} et le {{domxref("PannerNode")}} peuvent être utilisés pour contrôler la spatialisation d'un flux audio. Généralement, vous définirez la position dans un espace 3D que votre écouteur et votre _panner_ (source) occupaient initialement, puis ajuster la position de l'un ou des deux au fur et à mesure de l'utilisation. Vous pourriez par exemple vouloir déplacer un personnage dans un monde de jeu vidéo, et vouloir que le rendu audio change de manière réaliste tandis que le personnage s'approche ou s'éloigne d'un diffuseur audio tel qu'une chaîne stéréo. Dans cet exemple, vous pouvez voir ceci contrôlé par les fonctions `moveRight()`, `moveLeft()`, etc., qui définissent de nouvelles valeurs pour la position du _panner_ via la fonction `PositionPanner()`.
 
-<p>Pour voir une implantation complète, visitez notre <a href="https://mdn.github.io/webaudio-examples/panner-node/">exemple de panner-node</a> (<a href="https://github.com/mdn/webaudio-examples/tree/master/panner-node">lisez le code source aussi !</a>) – cette démonstration vous transporte dans un environnement 2.5D appelé "Pièce de métal", où vous pouvez jouer un morceau sur une boom box et vous déplacer autour de celle-ci pour entendre comment le son change !</p>
+Pour voir une implantation complète, visitez notre [exemple de panner-node](https://mdn.github.io/webaudio-examples/panner-node/) ([lisez le code source aussi !](https://github.com/mdn/webaudio-examples/tree/master/panner-node)) – cette démonstration vous transporte dans un environnement 2.5D appelé "Pièce de métal", où vous pouvez jouer un morceau sur une boom box et vous déplacer autour de celle-ci pour entendre comment le son change !
 
-<p>Notez la manière dont nous avons utilisé la détection de fonctionnalité pour soit donner au navigateur les nouvelles valeurs des propriétés (comme {{domxref("AudioListener.forwardX")}}) pour définir la position, etc. s'il le permet, ou d'anciennes méthodes (comme {{domxref("AudioListener.setOrientation()")}}) s'il les permet aussi mais non les nouvelles propriétés.</p>
+Notez la manière dont nous avons utilisé la détection de fonctionnalité pour soit donner au navigateur les nouvelles valeurs des propriétés (comme {{domxref("AudioListener.forwardX")}}) pour définir la position, etc. s'il le permet, ou d'anciennes méthodes (comme {{domxref("AudioListener.setOrientation()")}}) s'il les permet aussi mais non les nouvelles propriétés.
 
-<pre class="brush: js">// set up listener and panner position information
+```js
+// set up listener and panner position information
 var WIDTH = window.innerWidth;
 var HEIGHT = window.innerHeight;
 
@@ -117,41 +116,21 @@ function positionPanner() {
     panner.setPosition(xPos,yPos,zPos);
   }
   pannerData.innerHTML = 'Panner data: X ' + xPos + ' Y ' + yPos + ' Z ' + zPos;
-}</pre>
-
-<div class="note">
-<p><strong>Note :</strong> In terms of working out what position values to apply to the listener and panner, to make the sound appropriate to what the visuals are doing on screen, there is quite a bit of math involved, but you will soon get used to it with a bit of experimentation.</p>
-</div>
-
-<h2 id="Spécifications">Spécifications</h2>
+}
+```
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Web Audio API', '#dom-baseaudiocontext-createpanner', 'createPanner()')}}</td>
-   <td>{{Spec2('Web Audio API')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+> **Note :** In terms of working out what position values to apply to the listener and panner, to make the sound appropriate to what the visuals are doing on screen, there is quite a bit of math involved, but you will soon get used to it with a bit of experimentation.
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Spécifications
 
-<div>
-<div>
+| Specification                                                                                                    | Status                               | Comment |
+| ---------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ------- |
+| {{SpecName('Web Audio API', '#dom-baseaudiocontext-createpanner', 'createPanner()')}} | {{Spec2('Web Audio API')}} |         |
 
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.BaseAudioContext.createPanner")}}</p>
-</div>
-</div>
+{{Compat("api.BaseAudioContext.createPanner")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser l'API Web Audio</a></li>
-</ul>
+- [Utiliser l'API Web Audio](/en-US/docs/Web_Audio_API/Using_Web_Audio_API)
diff --git a/files/fr/web/api/baseaudiocontext/createperiodicwave/index.md b/files/fr/web/api/baseaudiocontext/createperiodicwave/index.md
index 5678fadb26..8df75e0fb7 100644
--- a/files/fr/web/api/baseaudiocontext/createperiodicwave/index.md
+++ b/files/fr/web/api/baseaudiocontext/createperiodicwave/index.md
@@ -12,42 +12,38 @@ tags:
   - createPeriodicWave
 translation_of: Web/API/BaseAudioContext/createPeriodicWave
 ---
-<p>{{ APIRef("Web Audio API") }}</p>
+{{ APIRef("Web Audio API") }}
 
-<p>La méthode <code>createPeriodicWave()</code> de l'interface {{ domxref("BaseAudioContext") }} est utilisée pour créer une {{domxref("PeriodicWave")}} (onde périodique), qui sert à définir une onde sinusoïdale périodique qui peut être utilisée pour modeler la sortie d'un {{ domxref("OscillatorNode") }}.</p>
+La méthode `createPeriodicWave()` de l'interface {{ domxref("BaseAudioContext") }} est utilisée pour créer une {{domxref("PeriodicWave")}} (onde périodique), qui sert à définir une onde sinusoïdale périodique qui peut être utilisée pour modeler la sortie d'un {{ domxref("OscillatorNode") }}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var onde = <em>AudioContext</em>.createPeriodicWave(<em>réel</em>, <em>imag</em>[, <em>constraints</em>]);</pre>
+    var onde = AudioContext.createPeriodicWave(réel, imag[, constraints]);
 
-<h3 id="Retour">Retour</h3>
+### Retour
 
-<p>Un {{domxref("PeriodicWave")}}.</p>
+Un {{domxref("PeriodicWave")}}.
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>réel</code></dt>
- <dd>Un tableau de termes cosinus (traditionnellement les termes A).</dd>
- <dt><code>imag</code></dt>
- <dd>Un tableau de termes sinus (traditionnellement les termes B).</dd>
- <dt><code>contraintes</code> {{optional_inline}}</dt>
- <dd>Un objet dictionnaire spécifiant si la normalisation doit être désactivée (si non spécifié, la normalisation est activée par défaut). Il accepte une propriété :
- <ul>
-  <li><code>disableNormalization</code>: si réglé à <code>true</code>, la normalisation est désactivée pour l'onde périodique. Sa valeur par défaut est <code>false</code>.</li>
- </ul>
- </dd>
-</dl>
+- `réel`
+  - : Un tableau de termes cosinus (traditionnellement les termes A).
+- `imag`
+  - : Un tableau de termes sinus (traditionnellement les termes B).
+- `contraintes` {{optional_inline}}
 
-<div class="note">
-<p><strong>Note :</strong> Si normalisée, l'onde résultante aura une valeur absolue de sommet égale à 1.</p>
-</div>
+  - : Un objet dictionnaire spécifiant si la normalisation doit être désactivée (si non spécifié, la normalisation est activée par défaut). Il accepte une propriété :
 
-<h2 id="Exemple">Exemple</h2>
+    - `disableNormalization`: si réglé à `true`, la normalisation est désactivée pour l'onde périodique. Sa valeur par défaut est `false`.
 
-<p>L'exemple suivant illustre un usage simple de <code>createPeriodicWave()</code>, pour créer un objet {{domxref("PeriodicWave")}} contenant une simple courbe de sinus.</p>
+> **Note :** Si normalisée, l'onde résultante aura une valeur absolue de sommet égale à 1.
 
-<pre class="brush: js">var réel = new Float32Array(2);
+## Exemple
+
+L'exemple suivant illustre un usage simple de `createPeriodicWave()`, pour créer un objet {{domxref("PeriodicWave")}} contenant une simple courbe de sinus.
+
+```js
+var réel = new Float32Array(2);
 var imag = new Float32Array(2);
 var contexteAudio = new AudioContext();
 var oscillateur = contexteAudio.createOscillator();
@@ -64,43 +60,27 @@ oscillateur.setPeriodicWave(wave);
 oscillateur.connect(contexteAudio.destination);
 
 oscillateur.start();
-oscillateur.stop(2);</pre>
-
-<p>Cela fonctionne car un son n'ayant qu'un unique harmonique est par définition une onde sinusoïdale.</p>
-
-<p>Ici, nous créons une <code>PeriodicWave</code> avec deux valeurs. La première est le décalage DC, qui est la valeur à la quelle l'ocillateur démarre. 0 est une bonne valeur de départ ici car nous voulons commencer la courbe au milieu de l'intervalle [-1.0; 1.0].</p>
+oscillateur.stop(2);
+```
 
-<p>La seconde valeur et les suivantes sont les composantes de sinus et de cosinus. Vous pouvez les voir comme le résultat d'une transformation de Fourier, où l'on obtient les valeurs du domaine de fréquence à partir de la valeur du domaine de temps. Ici, avec <code>createPeriodicWave()</code>, vous spécifiez les fréquences, et le navigateur calcule une transformation inverse de Fourier pour obtenir un tampon de domaine de temps pour la fréquence de l'oscillateur. Ici, nous définissons seulement un composant au volume maximal (1.0) sur l'harmonique fondamentale, ainsi on obtient une courbe sinusoïdale.</p>
+Cela fonctionne car un son n'ayant qu'un unique harmonique est par définition une onde sinusoïdale.
 
-<p>Les coefficients de la transformation de Fourier doivent être données dans un ordre <em>croissant</em> (c'est-à-dire <math><semantics><mrow><mrow><mo>(</mo><mrow><mi>a</mi><mo>+</mo><mi>b</mi><mi>i</mi></mrow><mo>)</mo></mrow><msup><mi>e</mi><mi>i</mi></msup><mo>,</mo><mrow><mo>(</mo><mrow><mi>c</mi><mo>+</mo><mi>d</mi><mi>i</mi></mrow><mo>)</mo></mrow><msup><mi>e</mi><mrow><mn>2</mn><mi>i</mi></mrow></msup><mo>,</mo><mrow><mo>(</mo><mrow><mi>f</mi><mo>+</mo><mi>g</mi><mi>i</mi></mrow><mo>)</mo></mrow><msup><mi>e</mi><mrow><mn>3</mn><mi>i</mi></mrow></msup></mrow><annotation encoding="TeX">\left(a+bi\right)e^{i} , \left(c+di\right)e^{2i} , \left(f+gi\right)e^{3i}    </annotation></semantics></math> etc) et peuvent être positifs ou négatifs. Une méthode simple pour obtenir manuellement de tels coefficients (bien qu'elle ne soit la meilleure) est d'utiliser une calculateur graphique.</p>
+Ici, nous créons une `PeriodicWave` avec deux valeurs. La première est le décalage DC, qui est la valeur à la quelle l'ocillateur démarre. 0 est une bonne valeur de départ ici car nous voulons commencer la courbe au milieu de l'intervalle \[-1.0; 1.0].
 
-<h2 id="Spécifications">Spécifications</h2>
+La seconde valeur et les suivantes sont les composantes de sinus et de cosinus. Vous pouvez les voir comme le résultat d'une transformation de Fourier, où l'on obtient les valeurs du domaine de fréquence à partir de la valeur du domaine de temps. Ici, avec `createPeriodicWave()`, vous spécifiez les fréquences, et le navigateur calcule une transformation inverse de Fourier pour obtenir un tampon de domaine de temps pour la fréquence de l'oscillateur. Ici, nous définissons seulement un composant au volume maximal (1.0) sur l'harmonique fondamentale, ainsi on obtient une courbe sinusoïdale.
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Web Audio API', '#dom-baseaudiocontext-createperiodicwave', 'createPeriodicWave')}}</td>
-   <td>{{Spec2('Web Audio API')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+Les coefficients de la transformation de Fourier doivent être données dans un ordre _croissant_ (c'est-à-dire <math><semantics><mrow><mrow><mo>(</mo><mrow><mi>a</mi><mo>+</mo><mi>b</mi><mi>i</mi></mrow><mo>)</mo></mrow><msup><mi>e</mi><mi>i</mi></msup><mo>,</mo><mrow><mo>(</mo><mrow><mi>c</mi><mo>+</mo><mi>d</mi><mi>i</mi></mrow><mo>)</mo></mrow><msup><mi>e</mi><mrow><mn>2</mn><mi>i</mi></mrow></msup><mo>,</mo><mrow><mo>(</mo><mrow><mi>f</mi><mo>+</mo><mi>g</mi><mi>i</mi></mrow><mo>)</mo></mrow><msup><mi>e</mi><mrow><mn>3</mn><mi>i</mi></mrow></msup></mrow><annotation encoding="TeX">\left(a+bi\right)e^{i} , \left(c+di\right)e^{2i} , \left(f+gi\right)e^{3i}    </annotation></semantics></math> etc) et peuvent être positifs ou négatifs. Une méthode simple pour obtenir manuellement de tels coefficients (bien qu'elle ne soit la meilleure) est d'utiliser une calculateur graphique.
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Spécifications
 
-<div>
+| Spécification                                                                                                                    | Statut                               | Commentaire |
+| -------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- |
+| {{SpecName('Web Audio API', '#dom-baseaudiocontext-createperiodicwave', 'createPeriodicWave')}} | {{Spec2('Web Audio API')}} |             |
 
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.BaseAudioContext.createPeriodicWave")}}</p>
-</div>
+{{Compat("api.BaseAudioContext.createPeriodicWave")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser l'API Web Audio</a></li>
-</ul>
+- [Utiliser l'API Web Audio](/en-US/docs/Web_Audio_API/Using_Web_Audio_API)
diff --git a/files/fr/web/api/baseaudiocontext/index.md b/files/fr/web/api/baseaudiocontext/index.md
index af570e1037..46c7e5d6af 100644
--- a/files/fr/web/api/baseaudiocontext/index.md
+++ b/files/fr/web/api/baseaudiocontext/index.md
@@ -11,126 +11,111 @@ tags:
   - Web Audio API
 translation_of: Web/API/BaseAudioContext
 ---
-<div>{{APIRef("Web Audio API")}}</div>
-
-<p>L'interface <code>BaseAudioContext</code> agit comme une définition de base pour les graphiques de traitement audio en ligne et hors ligne, comme représenté par {{domxref("AudioContext")}} et {{domxref("OfflineAudioContext")}} respectivement. Vous n'utiliseriez pas <code>BaseAudioContext</code> directement — vous utiliseriez ses fonctionnalités via l'une de ces deux interfaces héréditaires.</p>
-
-<p>Un <code>BaseAudioContext</code> peut être une cible d'événements, il implémente donc l'interface {{domxref("EventTarget")}}.</p>
-
-<p>{{InheritanceDiagram}}</p>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<dl>
- <dt>{{domxref("BaseAudioContext.audioWorklet")}} {{experimental_inline}} {{readonlyInline}}</dt>
- <dd>Renvoie l'objet {{domxref("AudioWorklet")}}, utilisé pour créer des AudioNodes personnalisés avec traitement JavaScript.</dd>
- <dt>{{domxref("BaseAudioContext.currentTime")}} {{readonlyInline}}</dt>
- <dd>Renvoie un double représentant une durée matérielle toujours croissante en secondes utilisée pour la planification. Il commence à <code>0</code>.</dd>
- <dt>{{domxref("BaseAudioContext.destination")}} {{readonlyInline}}</dt>
- <dd>Renvoie un {{domxref("AudioDestinationNode")}} représentant la destination finale de tout l'audio dans le contexte. Il peut être considéré comme le périphérique de rendu audio.</dd>
- <dt>{{domxref("BaseAudioContext.listener")}} {{readonlyInline}}</dt>
- <dd>Renvoie l'objet {{domxref("AudioListener")}}, utilisé pour la spatialisation 3D.</dd>
- <dt>{{domxref("BaseAudioContext.sampleRate")}} {{readonlyInline}}</dt>
- <dd>Renvoie un float représentant la fréquence d'échantillonnage (en échantillons par seconde) utilisée par tous les nœuds dans ce contexte. La fréquence d'échantillonnage d'un {{domxref("AudioContext")}} ne peut pas être modifiée.</dd>
- <dt>{{domxref("BaseAudioContext.state")}} {{readonlyInline}}</dt>
- <dd>Renvoie l'état actuel de l'<code>AudioContext</code>.</dd>
-</dl>
-
-<h3 id="Gestionnaires_dévénements">Gestionnaires d'événements</h3>
-
-<dl>
- <dt>{{domxref("BaseAudioContext.onstatechange")}}</dt>
- <dd>Un gestionnaire d'événements qui s'exécute lorsqu'un événement de type {{event("statechange")}} s'est déclenché. Cela se produit lorsque l'état de l'<code>AudioContext</code> change, en raison de l'appel de l'une des méthodes de changement d'état ({{domxref("AudioContext.suspend")}}, {{domxref("AudioContext.resume")}}, ou {{domxref("AudioContext.close")}}).</dd>
-</dl>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<p><em>Implémente également les méthodes de l'interface </em>{{domxref("EventTarget")}}.</p>
-
-<dl>
- <dt>{{domxref("BaseAudioContext.createBuffer()")}}</dt>
- <dd>Crée un nouvel objet {{ domxref("AudioBuffer") }} vide, qui peut ensuite être rempli de données et lu via un {{ domxref("AudioBufferSourceNode") }}.</dd>
- <dt>{{domxref("BaseAudioContext.createConstantSource()")}}</dt>
- <dd>Crée un objet {{domxref("ConstantSourceNode")}}, qui est une source audio qui émet en continu un signal sonore monophonique (un canal) dont les échantillons ont tous la même valeur.</dd>
- <dt>{{domxref("BaseAudioContext.createBufferSource()")}}</dt>
- <dd>Crée un {{domxref("AudioBufferSourceNode")}}, qui peut être utilisé pour lire et manipuler des données audio contenues dans un objet {{ domxref("AudioBuffer") }}. Les {{ domxref("AudioBuffer") }} sont créés à l'aide de {{domxref("AudioContext.createBuffer")}} ou renvoyés par {{domxref("AudioContext.decodeAudioData")}} lorsqu'il décode avec succès une piste audio.</dd>
- <dt>{{domxref("BaseAudioContext.createScriptProcessor()")}}</dt>
- <dd>Crée un {{domxref("ScriptProcessorNode")}}, qui peut être utilisé pour le traitement audio direct via JavaScript.</dd>
- <dt>{{domxref("BaseAudioContext.createStereoPanner()")}}</dt>
- <dd>Crée un {{domxref("StereoPannerNode")}}, qui peut être utilisé pour appliquer un panoramique stéréo à une source audio.</dd>
- <dt>{{domxref("BaseAudioContext.createAnalyser()")}}</dt>
- <dd>Crée un {{domxref("AnalyserNode")}}, qui peut être utilisé pour exposer les données de temps et de fréquence audio et par exemple pour créer des visualisations de données.</dd>
- <dt>{{domxref("BaseAudioContext.createBiquadFilter()")}}</dt>
- <dd>Crée un {{domxref("BiquadFilterNode")}}, qui représente un filtre du second ordre configurable en plusieurs types de filtres courants: passe-haut, passe-bas, passe-bande, etc.</dd>
- <dt>{{domxref("BaseAudioContext.createChannelMerger()")}}</dt>
- <dd>Crée un {{domxref("ChannelMergerNode")}}, qui est utilisé pour combiner les canaux de plusieurs flux audio en un seul flux audio.</dd>
- <dt>{{domxref("BaseAudioContext.createChannelSplitter()")}}</dt>
- <dd>Crée un {{domxref("ChannelSplitterNode")}}, qui est utilisé pour accéder aux canaux individuels d'un flux audio et les traiter séparément.</dd>
- <dt>{{domxref("BaseAudioContext.createConvolver()")}}</dt>
- <dd>Crée un {{domxref("ConvolverNode")}}, qui peut être utilisé pour appliquer des effets de convolution à votre graphique audio, par exemple un effet de réverbération.</dd>
- <dt>{{domxref("BaseAudioContext.createDelay()")}}</dt>
- <dd>Crée un {{domxref("DelayNode")}}, qui est utilisé pour retarder le signal audio entrant d'une certaine quantité. Ce nœud est également utile pour créer des boucles de rétroaction dans un graphique d'API Web Audio.</dd>
- <dt>{{domxref("BaseAudioContext.createDynamicsCompressor()")}}</dt>
- <dd>Crée un {{domxref("DynamicsCompressorNode")}}, qui peut être utilisé pour appliquer une compression acoustique à un signal audio.</dd>
- <dt>{{domxref("BaseAudioContext.createGain()")}}</dt>
- <dd>Crée un {{domxref("GainNode")}}, qui peut être utilisé pour contrôler le volume global du graphique audio.</dd>
- <dt>{{domxref("BaseAudioContext.createIIRFilter()")}}</dt>
- <dd>Crée un {{domxref("IIRFilterNode")}}, qui représente un filtre du second ordre configurable en plusieurs types de filtres communs différents.</dd>
- <dt>{{domxref("BaseAudioContext.createOscillator()")}}</dt>
- <dd>Crée un {{domxref("OscillatorNode")}}, une source représentant une forme d'one périodique. Cela génère essentiellement un ton.</dd>
- <dt>{{domxref("BaseAudioContext.createPanner()")}}</dt>
- <dd>Crée un {{domxref("PannerNode")}}, qui est utilisé pour spatialiser un flux audio entrant dans l'espace 3D.</dd>
- <dt>{{domxref("BaseAudioContext.createPeriodicWave()")}}</dt>
- <dd>Crée un {{domxref("PeriodicWave")}}, utilisé pour définir une forme d'one périodique qui peut être utilisée pour déterminer la sortie d'un {{ domxref("OscillatorNode") }}.</dd>
- <dt>{{domxref("BaseAudioContext.createWaveShaper()")}}</dt>
- <dd>Crée un {{domxref("WaveShaperNode")}}, qui est utilisé pour implémenter des effets de distorsion non linéaires.</dd>
- <dt>{{domxref("BaseAudioContext.decodeAudioData()")}}</dt>
- <dd>Décode de manière asynchrone les données de fichiers audio contenues dans un {{domxref("ArrayBuffer")}}. Dans ce cas, le ArrayBuffer est généralement chargé à partir de l'attribut <code>response</code> d'un {{domxref("XMLHttpRequest")}} après avoir défini le <code>responseType</code> sur <code>arraybuffer</code>. Cette méthode ne foncionne que sur des fichiers complets et non sur des fragments de fichiers audio.</dd>
- <dt>{{domxref("BaseAudioContext.resume()")}}</dt>
- <dd>Reprend la progression du temps dans un contexte audio précédemment suspendu / mis en pause.</dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Déclaration de context audio de base:</p>
-
-<pre class="brush: js">var audioCtx = new AudioContext();</pre>
-
-<p>Variante de nagivateur croisé:</p>
-
-<pre class="brush: js">var AudioContext = window.AudioContext || window.webkitAudioContext;
+{{APIRef("Web Audio API")}}
+
+L'interface `BaseAudioContext` agit comme une définition de base pour les graphiques de traitement audio en ligne et hors ligne, comme représenté par {{domxref("AudioContext")}} et {{domxref("OfflineAudioContext")}} respectivement. Vous n'utiliseriez pas `BaseAudioContext` directement — vous utiliseriez ses fonctionnalités via l'une de ces deux interfaces héréditaires.
+
+Un `BaseAudioContext` peut être une cible d'événements, il implémente donc l'interface {{domxref("EventTarget")}}.
+
+{{InheritanceDiagram}}
+
+## Propriétés
+
+- {{domxref("BaseAudioContext.audioWorklet")}} {{experimental_inline}} {{readonlyInline}}
+  - : Renvoie l'objet {{domxref("AudioWorklet")}}, utilisé pour créer des AudioNodes personnalisés avec traitement JavaScript.
+- {{domxref("BaseAudioContext.currentTime")}} {{readonlyInline}}
+  - : Renvoie un double représentant une durée matérielle toujours croissante en secondes utilisée pour la planification. Il commence à `0`.
+- {{domxref("BaseAudioContext.destination")}} {{readonlyInline}}
+  - : Renvoie un {{domxref("AudioDestinationNode")}} représentant la destination finale de tout l'audio dans le contexte. Il peut être considéré comme le périphérique de rendu audio.
+- {{domxref("BaseAudioContext.listener")}} {{readonlyInline}}
+  - : Renvoie l'objet {{domxref("AudioListener")}}, utilisé pour la spatialisation 3D.
+- {{domxref("BaseAudioContext.sampleRate")}} {{readonlyInline}}
+  - : Renvoie un float représentant la fréquence d'échantillonnage (en échantillons par seconde) utilisée par tous les nœuds dans ce contexte. La fréquence d'échantillonnage d'un {{domxref("AudioContext")}} ne peut pas être modifiée.
+- {{domxref("BaseAudioContext.state")}} {{readonlyInline}}
+  - : Renvoie l'état actuel de l'`AudioContext`.
+
+### Gestionnaires d'événements
+
+- {{domxref("BaseAudioContext.onstatechange")}}
+  - : Un gestionnaire d'événements qui s'exécute lorsqu'un événement de type {{event("statechange")}} s'est déclenché. Cela se produit lorsque l'état de l'`AudioContext` change, en raison de l'appel de l'une des méthodes de changement d'état ({{domxref("AudioContext.suspend")}}, {{domxref("AudioContext.resume")}}, ou {{domxref("AudioContext.close")}}).
+
+## Méthodes
+
+_Implémente également les méthodes de l'interface_ {{domxref("EventTarget")}}.
+
+- {{domxref("BaseAudioContext.createBuffer()")}}
+  - : Crée un nouvel objet {{ domxref("AudioBuffer") }} vide, qui peut ensuite être rempli de données et lu via un {{ domxref("AudioBufferSourceNode") }}.
+- {{domxref("BaseAudioContext.createConstantSource()")}}
+  - : Crée un objet {{domxref("ConstantSourceNode")}}, qui est une source audio qui émet en continu un signal sonore monophonique (un canal) dont les échantillons ont tous la même valeur.
+- {{domxref("BaseAudioContext.createBufferSource()")}}
+  - : Crée un {{domxref("AudioBufferSourceNode")}}, qui peut être utilisé pour lire et manipuler des données audio contenues dans un objet {{ domxref("AudioBuffer") }}. Les {{ domxref("AudioBuffer") }} sont créés à l'aide de {{domxref("AudioContext.createBuffer")}} ou renvoyés par {{domxref("AudioContext.decodeAudioData")}} lorsqu'il décode avec succès une piste audio.
+- {{domxref("BaseAudioContext.createScriptProcessor()")}}
+  - : Crée un {{domxref("ScriptProcessorNode")}}, qui peut être utilisé pour le traitement audio direct via JavaScript.
+- {{domxref("BaseAudioContext.createStereoPanner()")}}
+  - : Crée un {{domxref("StereoPannerNode")}}, qui peut être utilisé pour appliquer un panoramique stéréo à une source audio.
+- {{domxref("BaseAudioContext.createAnalyser()")}}
+  - : Crée un {{domxref("AnalyserNode")}}, qui peut être utilisé pour exposer les données de temps et de fréquence audio et par exemple pour créer des visualisations de données.
+- {{domxref("BaseAudioContext.createBiquadFilter()")}}
+  - : Crée un {{domxref("BiquadFilterNode")}}, qui représente un filtre du second ordre configurable en plusieurs types de filtres courants: passe-haut, passe-bas, passe-bande, etc.
+- {{domxref("BaseAudioContext.createChannelMerger()")}}
+  - : Crée un {{domxref("ChannelMergerNode")}}, qui est utilisé pour combiner les canaux de plusieurs flux audio en un seul flux audio.
+- {{domxref("BaseAudioContext.createChannelSplitter()")}}
+  - : Crée un {{domxref("ChannelSplitterNode")}}, qui est utilisé pour accéder aux canaux individuels d'un flux audio et les traiter séparément.
+- {{domxref("BaseAudioContext.createConvolver()")}}
+  - : Crée un {{domxref("ConvolverNode")}}, qui peut être utilisé pour appliquer des effets de convolution à votre graphique audio, par exemple un effet de réverbération.
+- {{domxref("BaseAudioContext.createDelay()")}}
+  - : Crée un {{domxref("DelayNode")}}, qui est utilisé pour retarder le signal audio entrant d'une certaine quantité. Ce nœud est également utile pour créer des boucles de rétroaction dans un graphique d'API Web Audio.
+- {{domxref("BaseAudioContext.createDynamicsCompressor()")}}
+  - : Crée un {{domxref("DynamicsCompressorNode")}}, qui peut être utilisé pour appliquer une compression acoustique à un signal audio.
+- {{domxref("BaseAudioContext.createGain()")}}
+  - : Crée un {{domxref("GainNode")}}, qui peut être utilisé pour contrôler le volume global du graphique audio.
+- {{domxref("BaseAudioContext.createIIRFilter()")}}
+  - : Crée un {{domxref("IIRFilterNode")}}, qui représente un filtre du second ordre configurable en plusieurs types de filtres communs différents.
+- {{domxref("BaseAudioContext.createOscillator()")}}
+  - : Crée un {{domxref("OscillatorNode")}}, une source représentant une forme d'one périodique. Cela génère essentiellement un ton.
+- {{domxref("BaseAudioContext.createPanner()")}}
+  - : Crée un {{domxref("PannerNode")}}, qui est utilisé pour spatialiser un flux audio entrant dans l'espace 3D.
+- {{domxref("BaseAudioContext.createPeriodicWave()")}}
+  - : Crée un {{domxref("PeriodicWave")}}, utilisé pour définir une forme d'one périodique qui peut être utilisée pour déterminer la sortie d'un {{ domxref("OscillatorNode") }}.
+- {{domxref("BaseAudioContext.createWaveShaper()")}}
+  - : Crée un {{domxref("WaveShaperNode")}}, qui est utilisé pour implémenter des effets de distorsion non linéaires.
+- {{domxref("BaseAudioContext.decodeAudioData()")}}
+  - : Décode de manière asynchrone les données de fichiers audio contenues dans un {{domxref("ArrayBuffer")}}. Dans ce cas, le ArrayBuffer est généralement chargé à partir de l'attribut `response` d'un {{domxref("XMLHttpRequest")}} après avoir défini le `responseType` sur `arraybuffer`. Cette méthode ne foncionne que sur des fichiers complets et non sur des fragments de fichiers audio.
+- {{domxref("BaseAudioContext.resume()")}}
+  - : Reprend la progression du temps dans un contexte audio précédemment suspendu / mis en pause.
+
+## Exemples
+
+Déclaration de context audio de base:
+
+```js
+var audioCtx = new AudioContext();
+```
+
+Variante de nagivateur croisé:
+
+```js
+var AudioContext = window.AudioContext || window.webkitAudioContext;
 var audioCtx = new AudioContext();
 
 var oscillatorNode = audioCtx.createOscillator();
 var gainNode = audioCtx.createGain();
 var finish = audioCtx.destination;
-// etc.</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Web Audio API', '#BaseAudioContext', 'BaseAudioContext')}}</td>
-   <td>{{Spec2('Web Audio API')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.BaseAudioContext")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Utilisation de l'API Web Audio</a></li>
- <li>{{domxref("AudioContext")}}</li>
- <li>{{domxref("OfflineAudioContext")}}</li>
-</ul>
+// etc.
+```
+
+## Spécifications
+
+| Spécification                                                                                | Statut                               | Commentaire |
+| -------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- |
+| {{SpecName('Web Audio API', '#BaseAudioContext', 'BaseAudioContext')}} | {{Spec2('Web Audio API')}} |             |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.BaseAudioContext")}}
+
+## Voir aussi
+
+- [Utilisation de l'API Web Audio](/en-US/docs/Web_Audio_API/Using_Web_Audio_API)
+- {{domxref("AudioContext")}}
+- {{domxref("OfflineAudioContext")}}
diff --git a/files/fr/web/api/battery_status_api/index.md b/files/fr/web/api/battery_status_api/index.md
index ee8ceeb9b6..b7b75dd63d 100644
--- a/files/fr/web/api/battery_status_api/index.md
+++ b/files/fr/web/api/battery_status_api/index.md
@@ -8,26 +8,25 @@ tags:
   - Obsolete
 translation_of: Web/API/Battery_Status_API
 ---
-<p>{{DefaultAPISidebar("Battery API")}}{{Obsolete_Header}}</p>
+{{DefaultAPISidebar("Battery API")}}{{Obsolete_Header}}
 
-<p>L'<strong>API <em>Battery Status</em></strong>, souvent mentionnée sous le nom <strong>Battery API</strong>, fournit des informations sur le niveau de charge du système et permet d'envoyer des événements pour prévenir d'un changement du niveau de charge de la batterie. Cela peut être utilisé pour ajuster la consommation d'une application et la réduire pour réduire l'utilisation de la batterie lorsque son niveau de charge est bas ou encore de sauvegarder les données quand la batterie est bientôt vide.</p>
+L'**API _Battery Status_**, souvent mentionnée sous le nom **Battery API**, fournit des informations sur le niveau de charge du système et permet d'envoyer des événements pour prévenir d'un changement du niveau de charge de la batterie. Cela peut être utilisé pour ajuster la consommation d'une application et la réduire pour réduire l'utilisation de la batterie lorsque son niveau de charge est bas ou encore de sauvegarder les données quand la batterie est bientôt vide.
 
-<p>L'API Battery Status API étend l'interface {{domxref("window.navigator")}} avec la propriété {{domxref("window.navigator.battery")}}, méthode qui renvoie une promesse, résolue par l'objet {{domxref("BatteryManager")}}. Cet objet permet d'ajouter des nouveaux événements pour superviser l'état de la batterie.</p>
+L'API Battery Status API étend l'interface {{domxref("window.navigator")}} avec la propriété {{domxref("window.navigator.battery")}}, méthode qui renvoie une promesse, résolue par l'objet {{domxref("BatteryManager")}}. Cet objet permet d'ajouter des nouveaux événements pour superviser l'état de la batterie.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans cet exemple, on cherche à surveiller les changements, à la fois du statut de la charge (est-ce que l'équipement est branché et se recharge ou est ce que l'équipement est alimenté par sa batterie) et des changements du niveau de charge dans le temps.</p>
+Dans cet exemple, on cherche à surveiller les changements, à la fois du statut de la charge (est-ce que l'équipement est branché et se recharge ou est ce que l'équipement est alimenté par sa batterie) et des changements du niveau de charge dans le temps.
 
-<p>Cela se fait en surveillant les événements : </p>
+Cela se fait en surveillant les événements :
 
-<ul>
- <li>{{event("chargingchange")}}: changement de l'êtat de charge</li>
- <li>{{event("levelchange")}}: changement du niveau de batterie</li>
- <li>{{event("chargingtimechange")}}: évolution de l'estimation du temps de recharge</li>
- <li>{{event("dischargingtimechange")}}: évolution de l'estimation d'autonomie sur batterie</li>
-</ul>
+- {{event("chargingchange")}}: changement de l'êtat de charge
+- {{event("levelchange")}}: changement du niveau de batterie
+- {{event("chargingtimechange")}}: évolution de l'estimation du temps de recharge
+- {{event("dischargingtimechange")}}: évolution de l'estimation d'autonomie sur batterie
 
-<pre class="brush: js;">navigator.getBattery().then(function(battery) {
+```js
+navigator.getBattery().then(function(battery) {
   function updateAllBatteryInfo(){
     updateChargeInfo();
     updateLevelInfo();
@@ -69,36 +68,21 @@ translation_of: Web/API/Battery_Status_API
   }
 
 });
-</pre>
-
-<p>Voir aussi <a href="http://www.w3.org/TR/battery-status/#examples">l'exemple de la spécification</a>.</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("Battery API")}}</td>
-   <td>{{Spec2("Battery API")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.BatteryManager")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/en-US/Apps/Build/gather_and_modify_data/retrieving_battery_status_information">Récupérer les informations relatives à la batterie - article et démonstration</a></li>
- <li><a href="http://hacks.mozilla.org/2012/02/using-the-battery-api-part-of-webapi/">Billet de blog sur Hacks - Utiliser l'API Battery (en anglais)</a></li>
-</ul>
+```
+
+Voir aussi [l'exemple de la spécification](http://www.w3.org/TR/battery-status/#examples).
+
+## Spécifications
+
+| Spécification                        | État                             | Commentaires         |
+| ------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName("Battery API")}} | {{Spec2("Battery API")}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.BatteryManager")}}
+
+## Voir aussi
+
+- [Récupérer les informations relatives à la batterie - article et démonstration](/en-US/Apps/Build/gather_and_modify_data/retrieving_battery_status_information)
+- [Billet de blog sur Hacks - Utiliser l'API Battery (en anglais)](http://hacks.mozilla.org/2012/02/using-the-battery-api-part-of-webapi/)
diff --git a/files/fr/web/api/batterymanager/charging/index.md b/files/fr/web/api/batterymanager/charging/index.md
index 7eaad0d9f8..e1521666a4 100644
--- a/files/fr/web/api/batterymanager/charging/index.md
+++ b/files/fr/web/api/batterymanager/charging/index.md
@@ -3,61 +3,48 @@ title: BatteryManager.charging
 slug: Web/API/BatteryManager/charging
 translation_of: Web/API/BatteryManager/charging
 ---
-<div>{{obsolete_header}}</div>
+{{obsolete_header}}{{APIRef("Battery API")}}
 
-<div>{{APIRef("Battery API")}}</div>
+Une valeur booléenne indiquant si la batterie de l'équipement est en train d'être chargée.
 
-<p>Une valeur booléenne indiquant si la batterie de l'équipement est en train d'être chargée.</p>
+## Syntax
 
-<h2 id="Syntax">Syntax</h2>
+    var charging = battery.charging
 
-<pre class="syntaxbox">var <em>charging</em> = battery.charging</pre>
+`charging` indique si `battery`, qui est un objet du type {{domxref("BatteryManager")}}, est en charge; si la batterie est en charge, la variable a la valeur `true`. Sinon, dans le cas de la décharge, la variable a la valeurvaux `false`.
 
-<p><code>charging</code> indique si <code><em>battery</em></code>, qui est un objet du type {{domxref("BatteryManager")}}, est en charge; si la batterie est en charge, la variable a la valeur <code>true</code>. Sinon, dans le cas de la décharge, la variable a la valeurvaux <code>false</code>.</p>
+## Exemple
 
-<h2 id="Example">Exemple</h2>
+### Code HTML
 
-<h3 id="Code_HTML">Code HTML</h3>
+```html
+<div id="charging">(&ecirc;tat de charge inconnu)</div>
+```
 
-<pre class="brush: html">&lt;div id="charging"&gt;(&amp;ecirc;tat de charge inconnu)&lt;/div&gt;</pre>
+### Code JavaScript
 
-<h3 id="Code_JavaScript">Code JavaScript</h3>
-
-<pre class="brush: js">navigator.getBattery().then(function(battery) {
+```js
+navigator.getBattery().then(function(battery) {
 
     var charging = battery.charging;
 
     document.querySelector('#charging').textContent = charging ;
-});</pre>
-
-<p>{{ EmbedLiveSample('Example', '100%', 30) }}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("Battery API")}}</td>
-   <td>{{Spec2("Battery API")}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.BatteryManager.charging")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("BatteryManager")}}</li>
- <li>{{domxref("Navigator.getBattery")}}</li>
-</ul>
+});
+```
+
+{{ EmbedLiveSample('Example', '100%', 30) }}
+
+## Spécifications
+
+| Specification                        | Status                           | Comment             |
+| ------------------------------------ | -------------------------------- | ------------------- |
+| {{SpecName("Battery API")}} | {{Spec2("Battery API")}} | Définition initiale |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.BatteryManager.charging")}}
+
+## Voir aussi
+
+- {{domxref("BatteryManager")}}
+- {{domxref("Navigator.getBattery")}}
diff --git a/files/fr/web/api/batterymanager/chargingtime/index.md b/files/fr/web/api/batterymanager/chargingtime/index.md
index 7456fdb8fd..d469bded62 100644
--- a/files/fr/web/api/batterymanager/chargingtime/index.md
+++ b/files/fr/web/api/batterymanager/chargingtime/index.md
@@ -3,67 +3,52 @@ title: BatteryManager.chargingTime
 slug: Web/API/BatteryManager/chargingTime
 translation_of: Web/API/BatteryManager/chargingTime
 ---
-<div>{{obsolete_header}}</div>
+{{obsolete_header}}
 
-<p>{{APIRef("Battery API")}}</p>
+{{APIRef("Battery API")}}
 
-<p>Indique le temps, en secondes, qu'il reste jusqu'à que la batterie soit rechargée.</p>
+Indique le temps, en secondes, qu'il reste jusqu'à que la batterie soit rechargée.
 
-<div class="note">
-<p><strong>Note :</strong> Même si le temps retourné devrait être précis à la seconde, les navigateurs arrondissent cette valeur (typiquement à 15 minutes près) afin de limiter l'identification et le suivi des utilisateurs.</p>
-</div>
+> **Note :** Même si le temps retourné devrait être précis à la seconde, les navigateurs arrondissent cette valeur (typiquement à 15 minutes près) afin de limiter l'identification et le suivi des utilisateurs.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var <em>time</em> = battery.chargingTime</pre>
+    var time = battery.chargingTime
 
-<p><code>time</code> est le temps restant en secondes jusqu'à que <code><em>battery</em></code>, qui est un objet de type {{domxref("BatteryManager")}}, soit rechargée, ou vaut 0 si la batterie est déjà rechargée. Si la batterie est en décharge, la variable vaut <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity">Infinity</a></code>.</p>
+`time` est le temps restant en secondes jusqu'à que `battery`, qui est un objet de type {{domxref("BatteryManager")}}, soit rechargée, ou vaut 0 si la batterie est déjà rechargée. Si la batterie est en décharge, la variable vaut [`Infinity`](/en-US/docs/JavaScript/Reference/Global_Objects/Infinity).
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<h3 id="Code_HTML">Code HTML</h3>
+### Code HTML
 
-<pre class="brush: html">&lt;div id="chargingTime"&gt;(temps de charge inconnu)&lt;/div&gt;
-</pre>
+```html
+<div id="chargingTime">(temps de charge inconnu)</div>
+```
 
-<h3 id="Code_JavaScript">Code JavaScript</h3>
+### Code JavaScript
 
-<pre class="brush: js">navigator.getBattery().then(function(battery) {
+```js
+navigator.getBattery().then(function(battery) {
 
    var time = battery.chargingTime;
 
    document.querySelector('#chargingTime').textContent = battery.chargingTime;
 });
-</pre>
-
-<p>{{ EmbedLiveSample('Example', '100%', 30) }}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("Battery API")}}</td>
-   <td>{{Spec2("Battery API")}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.BatteryManager.chargingTime")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("BatteryManager")}}</li>
- <li>{{domxref("Navigator.getBattery")}}</li>
-</ul>
+```
+
+{{ EmbedLiveSample('Example', '100%', 30) }}
+
+## Spécifications
+
+| Specification                        | Status                           | Comment             |
+| ------------------------------------ | -------------------------------- | ------------------- |
+| {{SpecName("Battery API")}} | {{Spec2("Battery API")}} | Définition initiale |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.BatteryManager.chargingTime")}}
+
+## Voir aussi
+
+- {{domxref("BatteryManager")}}
+- {{domxref("Navigator.getBattery")}}
diff --git a/files/fr/web/api/batterymanager/dischargingtime/index.md b/files/fr/web/api/batterymanager/dischargingtime/index.md
index 8ad8ea8602..4cfac1fdde 100644
--- a/files/fr/web/api/batterymanager/dischargingtime/index.md
+++ b/files/fr/web/api/batterymanager/dischargingtime/index.md
@@ -3,67 +3,50 @@ title: BatteryManager.dischargingTime
 slug: Web/API/BatteryManager/dischargingTime
 translation_of: Web/API/BatteryManager/dischargingTime
 ---
-<div>{{obsolete_header}}</div>
+{{obsolete_header}}{{APIRef("Battery API")}}
 
-<div>{{APIRef("Battery API")}}</div>
+Indique le temps, en secondes, qu'il reste jusqu'à que la batterie soit déchargée.
 
-<p>Indique le temps, en secondes, qu'il reste jusqu'à que la batterie soit déchargée.</p>
+> **Note :** Même si le temps retourné devrait être précis à la seconde, les navigateurs arrondissent cette valeur (typiquement à 15 minutes près) afin de limiter l'identification et le suivi des utilisateurs.
 
-<div class="note">
-<p><strong>Note :</strong> Même si le temps retourné devrait être précis à la seconde, les navigateurs arrondissent cette valeur (typiquement à 15 minutes près) afin de limiter l'identification et le suivi des utilisateurs.</p>
-</div>
+## Syntax
 
-<h2 id="Syntax">Syntax</h2>
+    var time = battery.dischargingTime
 
-<pre class="syntaxbox">var <em>time</em> = battery.dischargingTime</pre>
+`time` est le temps restant en secondes jusqu'à que `battery`, qui est un objet de type {{domxref("BatteryManager")}}, soit complètement déchargée. La variable vaut [`Infinity`](/en-US/docs/JavaScript/Reference/Global_Objects/Infinity) si la batterie est en train d'être chargée ou si le système ne parvient pas à calculer un temps restant.
 
-<p><code>time</code> est le temps restant en secondes jusqu'à que <code><em>battery</em></code>, qui est un objet de type {{domxref("BatteryManager")}}, soit complètement déchargée. La variable vaut <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity">Infinity</a></code> si la batterie est en train d'être chargée ou si le système ne parvient pas à calculer un temps restant.</p>
+## Exemple
 
-<h2 id="Example">Exemple</h2>
+### Code HTML
 
-<h3 id="Code_HTML">Code HTML</h3>
+```html
+<div id="dischargingTime">(temps de d&eacute;charge inconnu)</div>
+```
 
-<pre class="brush: html">&lt;div id="dischargingTime"&gt;(temps de d&amp;eacute;charge inconnu)&lt;/div&gt;
-</pre>
+### Code JavaScript
 
-<h3 id="Code_JavaScript">Code JavaScript</h3>
-
-<pre class="brush: js;">navigator.getBattery().then(function(battery) {
+```js
+navigator.getBattery().then(function(battery) {
 
     var time = battery.dischargingTime;
 
     document.querySelector('#dischargingTime').textContent = battery.dischargingTime;
 });
-</pre>
-
-<p>{{ EmbedLiveSample('Example', '100%', 30) }}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("Battery API")}}</td>
-   <td>{{Spec2("Battery API")}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.BatteryManager.dischargingTime")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("BatteryManager")}}</li>
- <li>{{domxref("Navigator.getBattery")}}</li>
-</ul>
+```
+
+{{ EmbedLiveSample('Example', '100%', 30) }}
+
+## Spécifications
+
+| Specification                        | Status                           | Comment             |
+| ------------------------------------ | -------------------------------- | ------------------- |
+| {{SpecName("Battery API")}} | {{Spec2("Battery API")}} | Définition initiale |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.BatteryManager.dischargingTime")}}
+
+## Voir aussi
+
+- {{domxref("BatteryManager")}}
+- {{domxref("Navigator.getBattery")}}
diff --git a/files/fr/web/api/batterymanager/index.md b/files/fr/web/api/batterymanager/index.md
index 644c04acab..eec64cfc48 100644
--- a/files/fr/web/api/batterymanager/index.md
+++ b/files/fr/web/api/batterymanager/index.md
@@ -8,72 +8,53 @@ tags:
   - niveau
 translation_of: Web/API/BatteryManager
 ---
-<p>{{ApiRef()}}</p>
-
-<h2 id="Sommaire">Sommaire</h2>
-
-<p>L'interface <code>BatteryManager </code>fournit des moyens pour obtenir des informations sur le niveau de charge de la batterie du système.</p>
-
-<p>La propriété {{domxref ("window.navigator.battery", "navigator.battery")}} retourne une instance de l'interface <code>BatteryManager </code>que vous pouvez utiliser pour interagir avec l'API d'état de la batterie.</p>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<dl>
- <dt>{{domxref("BatteryManager.charging")}} {{ReadOnlyInline}}</dt>
- <dd>Un Boolean indiquant si oui ou non la batterie est actuellement en cours de charge.</dd>
- <dt>{{domxref("BatteryManager.chargingTime")}} {{ReadOnlyInline}}</dt>
- <dd>Un nombre qui représente le temps restant en secondes jusqu'à ce que la batterie soit complètement chargée, ou 0 si la batterie est complètement chargée.</dd>
- <dt>{{domxref("BatteryManager.dischargingTime")}} {{ReadOnlyInline}}</dt>
- <dd>Un nombre qui représente le temps restant en secondes jusqu'à ce que la batterie soit complètement déchargée et le système suspendu.</dd>
- <dt>{{domxref("BatteryManager.level")}} {{ReadOnlyInline}}</dt>
- <dd>Un nombre qui représente le niveau de charge de la batterie du système adapté à une valeur comprise entre 0.0 et 1.0.</dd>
-</dl>
-
-<h3 id="Gestionnaires_d'Evenements">Gestionnaires d'Evenements</h3>
-
-<dl>
- <dt>{{domxref("BatteryManager.onchargingchange")}}</dt>
- <dd>Un gestionnaire pour le changement de la présence ou non du chargeur.</dd>
- <dt>{{domxref("BatteryManager.onchargingtimechange")}}</dt>
- <dd>Un gestionnaire pour la mise à jour du temps de charge</dd>
- <dt>{{domxref("BatteryManager.ondischargingtimechange")}}</dt>
- <dd>Un gestionnaire pour la mise à jour du temps de décharge</dd>
- <dt>{{domxref("BatteryManager.onlevelchange")}}</dt>
- <dd>Un gestionnaire pour la mise à jour pour les changement du niveau de batterie</dd>
-</dl>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<p>Hérite de {{domxref("EventTarget")}}:</p>
-
-<p>{{page("/en-US/docs/Web/API/EventTarget","Methods")}}</p>
-
-<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('Battery API')}}</td>
-   <td>{{Spec2('Battery API')}}</td>
-   <td>Spécification initale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.BatteryManager")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{ domxref("navigator.getBattery","navigator.getBattery") }}</li>
- <li>La <a href="/en-US/docs/WebAPI/Battery_Status">Battery Status API</a></li>
-</ul>
+{{ApiRef()}}
+
+## Sommaire
+
+L'interface `BatteryManager `fournit des moyens pour obtenir des informations sur le niveau de charge de la batterie du système.
+
+La propriété {{domxref ("window.navigator.battery", "navigator.battery")}} retourne une instance de l'interface `BatteryManager `que vous pouvez utiliser pour interagir avec l'API d'état de la batterie.
+
+## Propriétés
+
+- {{domxref("BatteryManager.charging")}} {{ReadOnlyInline}}
+  - : Un Boolean indiquant si oui ou non la batterie est actuellement en cours de charge.
+- {{domxref("BatteryManager.chargingTime")}} {{ReadOnlyInline}}
+  - : Un nombre qui représente le temps restant en secondes jusqu'à ce que la batterie soit complètement chargée, ou 0 si la batterie est complètement chargée.
+- {{domxref("BatteryManager.dischargingTime")}} {{ReadOnlyInline}}
+  - : Un nombre qui représente le temps restant en secondes jusqu'à ce que la batterie soit complètement déchargée et le système suspendu.
+- {{domxref("BatteryManager.level")}} {{ReadOnlyInline}}
+  - : Un nombre qui représente le niveau de charge de la batterie du système adapté à une valeur comprise entre 0.0 et 1.0.
+
+### Gestionnaires d'Evenements
+
+- {{domxref("BatteryManager.onchargingchange")}}
+  - : Un gestionnaire pour le changement de la présence ou non du chargeur.
+- {{domxref("BatteryManager.onchargingtimechange")}}
+  - : Un gestionnaire pour la mise à jour du temps de charge
+- {{domxref("BatteryManager.ondischargingtimechange")}}
+  - : Un gestionnaire pour la mise à jour du temps de décharge
+- {{domxref("BatteryManager.onlevelchange")}}
+  - : Un gestionnaire pour la mise à jour pour les changement du niveau de batterie
+
+## Méthodes
+
+Hérite de {{domxref("EventTarget")}}:
+
+{{page("/en-US/docs/Web/API/EventTarget","Methods")}}
+
+## Spécifications
+
+| Spécification                        | Statut                           | Commentaire            |
+| ------------------------------------ | -------------------------------- | ---------------------- |
+| {{SpecName('Battery API')}} | {{Spec2('Battery API')}} | Spécification initale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.BatteryManager")}}
+
+## Voir aussi
+
+- {{ domxref("navigator.getBattery","navigator.getBattery") }}
+- La [Battery Status API](/en-US/docs/WebAPI/Battery_Status)
diff --git a/files/fr/web/api/batterymanager/level/index.md b/files/fr/web/api/batterymanager/level/index.md
index 30fb39da87..dbaa9d3eca 100644
--- a/files/fr/web/api/batterymanager/level/index.md
+++ b/files/fr/web/api/batterymanager/level/index.md
@@ -3,65 +3,50 @@ title: BatteryManager.level
 slug: Web/API/BatteryManager/level
 translation_of: Web/API/BatteryManager/level
 ---
-<div>{{obsolete_header}}</div>
+{{obsolete_header}}{{APIRef("Battery API")}}
 
-<div>{{APIRef("Battery API")}}</div>
+Indique le niveau de charge de la batterie en tant que valeur comprise entre `0.0` (déchargée) et `1.0` (rechargée).
 
-<p>Indique le niveau de charge de la batterie en tant que valeur comprise entre <code>0.0</code> (déchargée) et <code>1.0</code> (rechargée).</p>
+## Syntaxe
 
-<h2 id="Syntaxe">Syntaxe</h2>
+    var level = battery.level
 
-<pre class="syntaxbox">var level = battery.level</pre>
+`level` est un nombre représentant le niveau de charge de la batterie en tant que valeur comprise entre `0.0` et `1.0`. Une veleur de `0.0` signifie que `battery`, qui est un objet de type {{domxref("BatteryManager")}}, est vide, et que le système est sur le point d'être désactivé. Une valeur de `1.0` signifie que la batterie est pleine.
 
-<p><code>level</code> est un nombre représentant le niveau de charge de la batterie en tant que valeur comprise entre <code>0.0</code> et <code>1.0</code>. Une veleur de <code>0.0</code> signifie que <code><em>battery</em></code>, qui est un objet de type {{domxref("BatteryManager")}}, est vide, et que le système est sur le point d'être désactivé. Une valeur de <code>1.0</code> signifie que la batterie est pleine.</p>
+La valeur `1.0` est aussi retournée si le système n'est pas capable de déterminer son niveau de charge ou si le système n'est pas alimenté par une batterie.
 
-<p>La valeur <code>1.0</code> est aussi retournée si le système n'est pas capable de déterminer son niveau de charge ou si le système n'est pas alimenté par une batterie.</p>
+## Exemple
 
-<h2 id="Example">Exemple</h2>
+### Code HTML
 
-<h3 id="Code_HTML">Code HTML</h3>
+```html
+<div id="level">(niveau de batterie inconnu)</div>
+```
 
-<pre class="brush: html">&lt;div id="level"&gt;(niveau de batterie inconnu)&lt;/div&gt;
-</pre>
+### Code JavaScript
 
-<h3 id="Code_JavaScript">Code JavaScript</h3>
-
-<pre class="brush: js;">navigator.getBattery().then(function(battery) {
+```js
+navigator.getBattery().then(function(battery) {
 
     var level = battery.level;
 
     document.querySelector('#level').textContent = level;
 });
-</pre>
-
-<p>{{ EmbedLiveSample('Example', '100%', 30, '', 'Web/API/BatteryManager/level') }}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("Battery API")}}</td>
-   <td>{{Spec2("Battery API")}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.BatteryManager.level")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("BatteryManager")}}</li>
- <li>{{domxref("Navigator.getBattery")}}</li>
-</ul>
+```
+
+{{ EmbedLiveSample('Example', '100%', 30, '', 'Web/API/BatteryManager/level') }}
+
+## Spécifications
+
+| Specification                        | Status                           | Comment             |
+| ------------------------------------ | -------------------------------- | ------------------- |
+| {{SpecName("Battery API")}} | {{Spec2("Battery API")}} | Définition initiale |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.BatteryManager.level")}}
+
+## Voir aussi
+
+- {{domxref("BatteryManager")}}
+- {{domxref("Navigator.getBattery")}}
diff --git a/files/fr/web/api/beforeunloadevent/index.md b/files/fr/web/api/beforeunloadevent/index.md
index 4a74d1689d..36cdf6e011 100644
--- a/files/fr/web/api/beforeunloadevent/index.md
+++ b/files/fr/web/api/beforeunloadevent/index.md
@@ -6,88 +6,75 @@ tags:
   - Reference
 translation_of: Web/API/BeforeUnloadEvent
 ---
-<p>{{APIRef}}</p>
+{{APIRef}}
 
-<p>L'évènement <strong><code>beforeunload</code></strong> est déclenché quand la fenêtre, le document et ses ressources sont sur le point d'être déchargées.</p>
+L'évènement **`beforeunload`** est déclenché quand la fenêtre, le document et ses ressources sont sur le point d'être déchargées.
 
-<p>Si une chaine non vide est assignée à la propriété <code>returnValue</code> de l'évènement, une boite de confirmation apparait pour demander à l'utilisateur de valider le changement d'adresse (voir les exemples ci-dessous). Si aucune valeur n'est fournise, l'évènement est traité silencieusement. Certaines implantations ne demandent confirmation que si le cadre ou tout cadre embarqué reçoit une action utilisateur. Voir {{anch("Browser compatibility")}} pour plus d'informations.</p>
+Si une chaine non vide est assignée à la propriété `returnValue` de l'évènement, une boite de confirmation apparait pour demander à l'utilisateur de valider le changement d'adresse (voir les exemples ci-dessous). Si aucune valeur n'est fournise, l'évènement est traité silencieusement. Certaines implantations ne demandent confirmation que si le cadre ou tout cadre embarqué reçoit une action utilisateur. Voir {{anch("Browser compatibility")}} pour plus d'informations.
 
-<p>{{InheritanceDiagram(600, 120)}}</p>
+{{InheritanceDiagram(600, 120)}}
 
 <table class="properties">
- <tbody>
-  <tr>
-   <td><strong>Bouillonne</strong></td>
-   <td>No</td>
-  </tr>
-  <tr>
-   <td><strong>Annulable</strong></td>
-   <td>Yes</td>
-  </tr>
-  <tr>
-   <td><strong>Cibles</strong></td>
-   <td>defaultView</td>
-  </tr>
-  <tr>
-   <td><strong>Interface</strong></td>
-   <td>{{domxref("Event")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <td><strong>Bouillonne</strong></td>
+      <td>No</td>
+    </tr>
+    <tr>
+      <td><strong>Annulable</strong></td>
+      <td>Yes</td>
+    </tr>
+    <tr>
+      <td><strong>Cibles</strong></td>
+      <td>defaultView</td>
+    </tr>
+    <tr>
+      <td><strong>Interface</strong></td>
+      <td>{{domxref("Event")}}</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush:js;">window.addEventListener("beforeunload", function(event) {
+```js
+window.addEventListener("beforeunload", function(event) {
   event.returnValue = "\o/";
 });
 
 // est équivalent à
 window.addEventListener("beforeunload", function(event) {
   event.preventDefault();
-});</pre>
+});
+```
 
-<p>Les navigateurs basés sur WebKit ne suivent pas la spécification concernant la demande de confirmation. Un exemple similaire fonctionnant sur presque tous les navigateurs serait plutôt comme :</p>
+Les navigateurs basés sur WebKit ne suivent pas la spécification concernant la demande de confirmation. Un exemple similaire fonctionnant sur presque tous les navigateurs serait plutôt comme :
 
-<pre class="brush: js">window.addEventListener("beforeunload", function (e) {
+```js
+window.addEventListener("beforeunload", function (e) {
   var confirmationMessage = "\o/";
 
   (e || window.event).returnValue = confirmationMessage;     // Gecko + IE
   return confirmationMessage;                                /* Safari, Chrome, and other
                                                               * WebKit-derived browsers */
-});</pre>
-
-<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">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML WHATWG", "browsing-the-web.html#the-beforeunloadevent-interface", "BeforeUnloadEvent")}}</td>
-   <td>{{Spec2("HTML WHATWG")}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+});
+```
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Spécifications
 
-<div>
+| Spécification                                                                                                                                | État                             | Commentaire         |
+| -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- |
+| {{SpecName("HTML WHATWG", "browsing-the-web.html#the-beforeunloadevent-interface", "BeforeUnloadEvent")}} | {{Spec2("HTML WHATWG")}} | Définition initiale |
 
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.BeforeUnloadEvent")}}</p>
-</div>
+{{Compat("api.BeforeUnloadEvent")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{Event("DOMContentLoaded")}}</li>
- <li>{{Event("readystatechange")}}</li>
- <li>{{Event("load")}}</li>
- <li>{{Event("beforeunload")}}</li>
- <li>{{Event("unload")}}</li>
- <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#prompt-to-unload-a-document">Unloading Documents — Prompt to unload a document</a></li>
-</ul>
+- {{Event("DOMContentLoaded")}}
+- {{Event("readystatechange")}}
+- {{Event("load")}}
+- {{Event("beforeunload")}}
+- {{Event("unload")}}
+- [Unloading Documents — Prompt to unload a document](http://www.whatwg.org/specs/web-apps/current-work/#prompt-to-unload-a-document)
diff --git a/files/fr/web/api/biquadfilternode/frequency/index.md b/files/fr/web/api/biquadfilternode/frequency/index.md
index 508cf54cf8..550a287720 100644
--- a/files/fr/web/api/biquadfilternode/frequency/index.md
+++ b/files/fr/web/api/biquadfilternode/frequency/index.md
@@ -3,33 +3,32 @@ title: BiquadFilterNode.frequency
 slug: Web/API/BiquadFilterNode/frequency
 translation_of: Web/API/BiquadFilterNode/frequency
 ---
-<p>{{ APIRef("Web Audio API") }}</p>
+{{ APIRef("Web Audio API") }}
 
-<div>
-<p>La propriété <code>frequency</code> de l'interface {{ domxref("BiquadFilterNode") }} est un  {{domxref("AudioParam")}} de type <a href="/fr/docs/DOM/AudioParam#k-rate">k-rate</a> : un nombre flottant à double précision représentant une fréquence de l'algorithme de filtrage courant, exprimée en hertz (Hz).</p>
+La propriété `frequency` de l'interface {{ domxref("BiquadFilterNode") }} est un  {{domxref("AudioParam")}} de type [k-rate](/fr/docs/DOM/AudioParam#k-rate) : un nombre flottant à double précision représentant une fréquence de l'algorithme de filtrage courant, exprimée en hertz (Hz).
 
-<p>Sa valeur par défaut est de <code>350</code> avec une portée nominale de <code>10</code> à la <a href="http://en.wikipedia.org/wiki/Nyquist_frequency">fréquence de Nyquist</a>, qui est la moitié de la fréquence d'échantillonnage.</p>
-</div>
+Sa valeur par défaut est de `350` avec une portée nominale de `10` à la [fréquence de Nyquist](http://en.wikipedia.org/wiki/Nyquist_frequency), qui est la moitié de la fréquence d'échantillonnage.
 
-<h2 id="Syntax">Syntax</h2>
+## Syntax
 
-<pre class="brush: js">var contexteAudio = new AudioContext();
+```js
+var contexteAudio = new AudioContext();
 var filtreBiquad = contexteAudio.createBiquadFilter();
-filtreBiquad.frequency.value = 3000;</pre>
+filtreBiquad.frequency.value = 3000;
+```
 
-<div class="note">
-<p><strong>Note :</strong> Bien que le <code>AudioParam</code> renvoyé soit en lecture seule, la valeur qu'il représente ne l'est pas.</p>
-</div>
+> **Note :** Bien que le `AudioParam` renvoyé soit en lecture seule, la valeur qu'il représente ne l'est pas.
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>Un {{domxref("AudioParam")}}.</p>
+Un {{domxref("AudioParam")}}.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>L'exemple suivant montre l'utilisation basique d'un AudioContext pour créer un filtre Biquad. Pour un exemple complet, consultez notre démo <a href="http://mdn.github.io/voice-change-o-matic/">voice-change-o-matic</a> (et son <a href="https://github.com/mdn/voice-change-o-matic">code source</a>).</p>
+L'exemple suivant montre l'utilisation basique d'un AudioContext pour créer un filtre Biquad. Pour un exemple complet, consultez notre démo [voice-change-o-matic](http://mdn.github.io/voice-change-o-matic/) (et son [code source](https://github.com/mdn/voice-change-o-matic)).
 
-<pre class="brush: js">var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+```js
+var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
 
 // mise en place des différents noeuds audio que nous utiliserons par la suite
 var analyseur = contexteAudio.createAnalyser();
@@ -53,31 +52,18 @@ noeudGain.connect(contexteAudio.destination);
 filtreBiquad.type = "lowshelf";
 filtreBiquad.frequency.value = 1000;
 filtreBiquad.gain.value = 25;
-</pre>
-
-<h2 id="Spécification">Spécification</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Web Audio API', '#widl-BiquadFilterNode-frequency', 'frequency')}}</td>
-   <td>{{Spec2('Web Audio API')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
-
-<div>{{Compat("api.BiquadFilterNode.frequency")}}</div>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
-</ul>
+```
+
+## Spécification
+
+| Specification                                                                                            | Status                               | Comment |
+| -------------------------------------------------------------------------------------------------------- | ------------------------------------ | ------- |
+| {{SpecName('Web Audio API', '#widl-BiquadFilterNode-frequency', 'frequency')}} | {{Spec2('Web Audio API')}} |         |
+
+## Compatibilité navigateurs
+
+{{Compat("api.BiquadFilterNode.frequency")}}
+
+## Voir aussi
+
+- [Utiliser la Web Audio API](/fr/docs/Web_Audio_API/Using_Web_Audio_API)
diff --git a/files/fr/web/api/biquadfilternode/index.md b/files/fr/web/api/biquadfilternode/index.md
index f5215ba3a6..33a45b9a1f 100644
--- a/files/fr/web/api/biquadfilternode/index.md
+++ b/files/fr/web/api/biquadfilternode/index.md
@@ -8,166 +8,219 @@ tags:
   - Web Audio API
 translation_of: Web/API/BiquadFilterNode
 ---
-<p>{{APIRef("Web Audio API")}}</p>
+{{APIRef("Web Audio API")}}
 
-<p>L'interface <code><strong>BiquadFilterNode</strong></code> représente un simple filtre de bas niveau, créé avec la méthode {{ domxref("AudioContext.createBiquadFilter()") }}. Il s'agit d'un {{domxref("AudioNode")}} qui peut représenter différents types de filtres, dispositifs de réglage de tonalité ou égaliseurs graphiques. Un <code>BiquadFilterNode</code> a toujours exactement une entrée et une sortie.</p>
+L'interface **`BiquadFilterNode`** représente un simple filtre de bas niveau, créé avec la méthode {{ domxref("AudioContext.createBiquadFilter()") }}. Il s'agit d'un {{domxref("AudioNode")}} qui peut représenter différents types de filtres, dispositifs de réglage de tonalité ou égaliseurs graphiques. Un `BiquadFilterNode` a toujours exactement une entrée et une sortie.
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row"><dfn>Nombre d'entrées</dfn></th>
-   <td><code>1</code></td>
-  </tr>
-  <tr>
-   <th scope="row"><dfn>Nombre de sorties</dfn></th>
-   <td><code>1</code></td>
-  </tr>
-  <tr>
-   <th scope="row"><dfn>Mode de comptage des canaux</dfn></th>
-   <td><code>"max"</code></td>
-  </tr>
-  <tr>
-   <th scope="row"><dfn>Nombre de canaux</dfn></th>
-   <td><code>2</code> (pas utilisés dans le mode de comptage par défaut)</td>
-  </tr>
-  <tr>
-   <th scope="row"><dfn>Interprétation du canal</dfn></th>
-   <td><code>"speakers"</code></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Constructeur">Constructeur</h2>
-
-<dl>
- <dt>{{domxref("BiquadFilterNode.BiquadFilterNode", "BiquadFilterNode()")}}</dt>
- <dd>Crée une nouvelle instance d'un objet  <code>BiquadFilterNode</code>.</dd>
-</dl>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<p><em>Hérite des propriétés de son parent, </em><em>{{domxref("AudioNode")}}</em>.</p>
-
-<dl>
- <dt>{{domxref("BiquadFilterNode.frequency")}}</dt>
- <dd>Est un {{domxref ("AudioParam")}} de type <a href="/fr/docs/Web/API/AudioParam#a-rate">a-rate</a> : un nombre flottant à double précision représentant une fréquence de l'algorithme de filtrage, exprimée en Hertz.</dd>
- <dt>{{domxref("BiquadFilterNode.detune")}}</dt>
- <dd>Est un {{domxref ("AudioParam")}} de type <a href="/fr/docs/Web/API/AudioParam#a-rate">a-rate</a> : un nombre flottant à double précision représentant le désaccordage de la fréquence exprimé en <a href="https://fr.wikipedia.org/wiki/Cent_et_savart">cents</a>.</dd>
- <dt>{{domxref("BiquadFilterNode.Q")}}</dt>
- <dd>Est un {{domxref ("AudioParam")}} de type <a href="/fr/docs/Web/API/AudioParam#a-rate">a-rate</a> : un nombre flottant à double précision représentant un <a href="http://en.wikipedia.org/wiki/Q_factor">facteur</a><a href="http://en.wikipedia.org/wiki/Q_factor"> Q</a>, ou facteur de qualité.</dd>
- <dt>{{domxref("BiquadFilterNode.gain")}} {{readonlyInline}}</dt>
- <dd>Est un {{domxref ("AudioParam")}} de type <a href="/fr/docs/Web/API/AudioParam#a-rate">a-rate</a> : un nombre flottant à double précision représentant le <a href="http://en.wikipedia.org/wiki/Gain">gain</a><a href="http://en.wikipedia.org/wiki/Gain"> </a>utilisé dans l'algorithme de filtrage.</dd>
- <dt>{{domxref("BiquadFilterNode.type")}}</dt>
- <dd><p>Une chaîne définissant le type d'algorithme de filtrage que le noeud implémente: La signification des paramètres diffère en fonction du type du filtre (sauf detune qui a la même signification dans tous les cas, et n'est donc pas listé ci-dessous)</p>
- <table class="standard-table">
-  <caption></caption>
-  <thead>
-   <tr>
-    <th scope="row"><code>type</code></th>
-    <th scope="col">Description</th>
-    <th scope="col"><code>frequency</code></th>
-    <th scope="col"><code>Q</code></th>
-    <th scope="col"><code>gain</code></th>
-   </tr>
-  </thead>
   <tbody>
-   <tr>
-    <th scope="row"><code>lowpass</code></th>
-    <td>Filtre standard passe-bas résonnant de second ordre avec atténuation de 12dB/octave. Les fréquences inférieures au seuil sont inchangées; les fréquences supérieures sont atténuées.</td>
-    <td>La fréquence de coupure</td>
-    <td>Indique comment la fréquence a culminé  autour de la coupure. Plus la valeur est élevée, plus le point culminant est haut</td>
-    <td>Non utilisé</td>
-   </tr>
-   <tr>
-    <th scope="row"><code>highpass</code></th>
-    <td>Filtre standard passe-haut résonnant de second ordre avec atténuation de 12dB/octave. Les fréquences inférieures à la fréquence de coupure sont atténuées, les fréquences supérieures sont inchangées.</td>
-    <td>La fréquence de coupure</td>
-    <td>Indique comment la fréquence a culminé  autour de la coupure. Plus la valeur est élevée, plus le point culminant est haut</td>
-    <td>Non utilisé</td>
-   </tr>
-   <tr>
-    <th scope="row"><code>bandpass</code></th>
-    <td>Filtre standard passe-bande de second ordre. Les fréquences en dehors de la plage donnée de fréquences sont atténués, et les fréquences à l'intérieur sont inchangées.</td>
-    <td>Le centre de la gamme de fréquences.</td>
-    <td>Contrôle la largeur de la bande de fréquences. Plus Q est grande, plus la bande de fréquences est grande.</td>
-    <td>Non utilisé</td>
-   </tr>
-   <tr>
-    <th scope="row"><code>lowshelf</code></th>
-    <td>Filtre standard de dégradé de basses fréquences de second ordre. Les fréquences inférieures à la fréquence obtiennent une impulsion ou une atténuation; Les fréquences supérieurs sont inchangées.</td>
-    <td>La limite supérieure des fréquences obtenant une impulsion ou une atténuation</td>
-    <td>Non utilisé</td>
-    <td>L'impulsion, en dB, à appliquer; s'il est négatif, ce sera une atténuation.</td>
-   </tr>
-   <tr>
-    <th scope="row"><code>highshelf</code></th>
-    <td>Filtre standard de dégradé de hautes fréquences de second ordre. Les fréquences supérieures à la fréquence obtiennent une impulsion, ou une atténuation; Les fréquences inférieurs restent inchangées</td>
-    <td>La limite inférieure des fréquences obtenant une impulsion ou une atténuation</td>
-    <td>Non utilisé</td>
-    <td>L'impulsion, en dB, à appliquer; s'il est négatif, ce sera une atténuation.</td>
-   </tr>
-   <tr>
-    <th scope="row"><code>peaking</code></th>
-    <td>Les fréquences à l'intérieur de la gamme obtiennent une impulsion ou une atténuation; les fréquences en dehors de celle-ci sont inchangées.</td>
-    <td>Le milieu de la gamme de fréquences obtiennent une impulsion, ou un attenuation</td>
-    <td>Contrôle la largeur de la bande de fréquences. Plus grande est Q, plus grande est la bande de fréquences.</td>
-    <td>L'impulsion, en dB, à appliquer; s'il est négatif, ce sera une atténuation.</td>
-   </tr>
-   <tr>
-    <th scope="row"><code>notch</code></th>
-    <td>Filtre coupe standard, appelé aussi coupe-bande. C'est l'inverse d'un filtre passe-bande: les fréquences en dehors de la gamme de fréquences donnée sont inchangées; les fréquences à l'intérieur de celle-ci sont atténuées.</td>
-    <td>Le centre de la gamme de fréquences.</td>
-    <td>Contrôle la largeur de la bande de fréquences. Plus grande est Q, plus grande est la bande de fréquences.</td>
-    <td>Non utilisé</td>
-   </tr>
-   <tr>
-    <th scope="row"><code>allpass</code></th>
-    <td>Filtre standard passe-tout du second ordre. Laisse toutes les fréquences inchangées, mais modifie le rapport de phase entre les différentes fréquences.</td>
-    <td>La fréquence du retard de groupe maximal, qui est la fréquence à laquelle le centre de la transition de phase se produit.</td>
-    <td>Contrôle finement la transition à la fréquence moyenne. Plus ce paramètre est grand, plus la transition est fine et large.</td>
-    <td>Non utilisé</td>
-   </tr>
+    <tr>
+      <th scope="row"><dfn>Nombre d'entrées</dfn></th>
+      <td><code>1</code></td>
+    </tr>
+    <tr>
+      <th scope="row"><dfn>Nombre de sorties</dfn></th>
+      <td><code>1</code></td>
+    </tr>
+    <tr>
+      <th scope="row"><dfn>Mode de comptage des canaux</dfn></th>
+      <td><code>"max"</code></td>
+    </tr>
+    <tr>
+      <th scope="row"><dfn>Nombre de canaux</dfn></th>
+      <td><code>2</code> (pas utilisés dans le mode de comptage par défaut)</td>
+    </tr>
+    <tr>
+      <th scope="row"><dfn>Interprétation du canal</dfn></th>
+      <td><code>"speakers"</code></td>
+    </tr>
   </tbody>
- </table>
- </dd>
-</dl>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<p><em>Hérite des propriétés de son parent, </em><em>{{domxref("AudioNode")}}</em>.</p>
-
-<dl>
- <dt>{{domxref("BiquadFilterNode.getFrequencyResponse()")}}</dt>
- <dd>A partir des valeurs courantes des paramètres de filtre, calcule la fréquence de réponse pour des fréquences spécifiées dans le tableau de fréquences <em>frequencyHz</em> passé en paramètre.</dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>{{page("/fr/docs/Web/API/AudioContext.createBiquadFilter","Example")}}</p>
-
-<h2 id="Spécification">Spécification</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Web Audio API', '#BiquadFilterNode-section', 'BiquadFilterNode')}}</td>
-   <td>{{Spec2('Web Audio API')}}</td>
-   <td></td>
-  </tr>
- </tbody>
 </table>
 
-<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
-
-<p>{{Compat("api.BiquadFilterNode")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
-</ul>
+## Constructeur
+
+- {{domxref("BiquadFilterNode.BiquadFilterNode", "BiquadFilterNode()")}}
+  - : Crée une nouvelle instance d'un objet  `BiquadFilterNode`.
+
+## Propriétés
+
+_Hérite des propriétés de son parent,_ _{{domxref("AudioNode")}}_.
+
+- {{domxref("BiquadFilterNode.frequency")}}
+  - : Est un {{domxref ("AudioParam")}} de type [a-rate](/fr/docs/Web/API/AudioParam#a-rate) : un nombre flottant à double précision représentant une fréquence de l'algorithme de filtrage, exprimée en Hertz.
+- {{domxref("BiquadFilterNode.detune")}}
+  - : Est un {{domxref ("AudioParam")}} de type [a-rate](/fr/docs/Web/API/AudioParam#a-rate) : un nombre flottant à double précision représentant le désaccordage de la fréquence exprimé en [cents](https://fr.wikipedia.org/wiki/Cent_et_savart).
+- {{domxref("BiquadFilterNode.Q")}}
+  - : Est un {{domxref ("AudioParam")}} de type [a-rate](/fr/docs/Web/API/AudioParam#a-rate) : un nombre flottant à double précision représentant un [facteur](http://en.wikipedia.org/wiki/Q_factor)[ Q](http://en.wikipedia.org/wiki/Q_factor), ou facteur de qualité.
+- {{domxref("BiquadFilterNode.gain")}} {{readonlyInline}}
+  - : Est un {{domxref ("AudioParam")}} de type [a-rate](/fr/docs/Web/API/AudioParam#a-rate) : un nombre flottant à double précision représentant le [gain](http://en.wikipedia.org/wiki/Gain)[ ](http://en.wikipedia.org/wiki/Gain)utilisé dans l'algorithme de filtrage.
+- {{domxref("BiquadFilterNode.type")}}
+
+  - : Une chaîne définissant le type d'algorithme de filtrage que le noeud implémente: La signification des paramètres diffère en fonction du type du filtre (sauf detune qui a la même signification dans tous les cas, et n'est donc pas listé ci-dessous)
+
+    <table class="standard-table">
+      <caption></caption>
+      <thead>
+        <tr>
+          <th scope="row"><code>type</code></th>
+          <th scope="col">Description</th>
+          <th scope="col"><code>frequency</code></th>
+          <th scope="col"><code>Q</code></th>
+          <th scope="col"><code>gain</code></th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <th scope="row"><code>lowpass</code></th>
+          <td>
+            Filtre standard passe-bas résonnant de second ordre avec atténuation de
+            12dB/octave. Les fréquences inférieures au seuil sont inchangées; les
+            fréquences supérieures sont atténuées.
+          </td>
+          <td>La fréquence de coupure</td>
+          <td>
+            Indique comment la fréquence a culminé autour de la coupure. Plus la
+            valeur est élevée, plus le point culminant est haut
+          </td>
+          <td>Non utilisé</td>
+        </tr>
+        <tr>
+          <th scope="row"><code>highpass</code></th>
+          <td>
+            Filtre standard passe-haut résonnant de second ordre avec atténuation de
+            12dB/octave. Les fréquences inférieures à la fréquence de coupure sont
+            atténuées, les fréquences supérieures sont inchangées.
+          </td>
+          <td>La fréquence de coupure</td>
+          <td>
+            Indique comment la fréquence a culminé autour de la coupure. Plus la
+            valeur est élevée, plus le point culminant est haut
+          </td>
+          <td>Non utilisé</td>
+        </tr>
+        <tr>
+          <th scope="row"><code>bandpass</code></th>
+          <td>
+            Filtre standard passe-bande de second ordre. Les fréquences en dehors de
+            la plage donnée de fréquences sont atténués, et les fréquences à
+            l'intérieur sont inchangées.
+          </td>
+          <td>Le centre de la gamme de fréquences.</td>
+          <td>
+            Contrôle la largeur de la bande de fréquences. Plus Q est grande, plus
+            la bande de fréquences est grande.
+          </td>
+          <td>Non utilisé</td>
+        </tr>
+        <tr>
+          <th scope="row"><code>lowshelf</code></th>
+          <td>
+            Filtre standard de dégradé de basses fréquences de second ordre. Les
+            fréquences inférieures à la fréquence obtiennent une impulsion ou une
+            atténuation; Les fréquences supérieurs sont inchangées.
+          </td>
+          <td>
+            La limite supérieure des fréquences obtenant une impulsion ou une
+            atténuation
+          </td>
+          <td>Non utilisé</td>
+          <td>
+            L'impulsion, en dB, à appliquer; s'il est négatif, ce sera une
+            atténuation.
+          </td>
+        </tr>
+        <tr>
+          <th scope="row"><code>highshelf</code></th>
+          <td>
+            Filtre standard de dégradé de hautes fréquences de second ordre. Les
+            fréquences supérieures à la fréquence obtiennent une impulsion, ou une
+            atténuation; Les fréquences inférieurs restent inchangées
+          </td>
+          <td>
+            La limite inférieure des fréquences obtenant une impulsion ou une
+            atténuation
+          </td>
+          <td>Non utilisé</td>
+          <td>
+            L'impulsion, en dB, à appliquer; s'il est négatif, ce sera une
+            atténuation.
+          </td>
+        </tr>
+        <tr>
+          <th scope="row"><code>peaking</code></th>
+          <td>
+            Les fréquences à l'intérieur de la gamme obtiennent une impulsion ou une
+            atténuation; les fréquences en dehors de celle-ci sont inchangées.
+          </td>
+          <td>
+            Le milieu de la gamme de fréquences obtiennent une impulsion, ou un
+            attenuation
+          </td>
+          <td>
+            Contrôle la largeur de la bande de fréquences. Plus grande est Q, plus
+            grande est la bande de fréquences.
+          </td>
+          <td>
+            L'impulsion, en dB, à appliquer; s'il est négatif, ce sera une
+            atténuation.
+          </td>
+        </tr>
+        <tr>
+          <th scope="row"><code>notch</code></th>
+          <td>
+            Filtre coupe standard, appelé aussi coupe-bande. C'est l'inverse d'un
+            filtre passe-bande: les fréquences en dehors de la gamme de fréquences
+            donnée sont inchangées; les fréquences à l'intérieur de celle-ci sont
+            atténuées.
+          </td>
+          <td>Le centre de la gamme de fréquences.</td>
+          <td>
+            Contrôle la largeur de la bande de fréquences. Plus grande est Q, plus
+            grande est la bande de fréquences.
+          </td>
+          <td>Non utilisé</td>
+        </tr>
+        <tr>
+          <th scope="row"><code>allpass</code></th>
+          <td>
+            Filtre standard passe-tout du second ordre. Laisse toutes les fréquences
+            inchangées, mais modifie le rapport de phase entre les différentes
+            fréquences.
+          </td>
+          <td>
+            La fréquence du retard de groupe maximal, qui est la fréquence à
+            laquelle le centre de la transition de phase se produit.
+          </td>
+          <td>
+            Contrôle finement la transition à la fréquence moyenne. Plus ce
+            paramètre est grand, plus la transition est fine et large.
+          </td>
+          <td>Non utilisé</td>
+        </tr>
+      </tbody>
+    </table>
+
+## Méthodes
+
+_Hérite des propriétés de son parent,_ _{{domxref("AudioNode")}}_.
+
+- {{domxref("BiquadFilterNode.getFrequencyResponse()")}}
+  - : A partir des valeurs courantes des paramètres de filtre, calcule la fréquence de réponse pour des fréquences spécifiées dans le tableau de fréquences _frequencyHz_ passé en paramètre.
+
+## Exemples
+
+{{page("/fr/docs/Web/API/AudioContext.createBiquadFilter","Example")}}
+
+## Spécification
+
+| Spécification                                                                                            | Statut                               | Commentaire |
+| -------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- |
+| {{SpecName('Web Audio API', '#BiquadFilterNode-section', 'BiquadFilterNode')}} | {{Spec2('Web Audio API')}} |             |
+
+## Compatibilité navigateurs
+
+{{Compat("api.BiquadFilterNode")}}
+
+## Voir aussi
+
+- [Utiliser la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API)
diff --git a/files/fr/web/api/blob/blob/index.md b/files/fr/web/api/blob/blob/index.md
index eb08cd3667..94d84cdac1 100644
--- a/files/fr/web/api/blob/blob/index.md
+++ b/files/fr/web/api/blob/blob/index.md
@@ -10,68 +10,51 @@ tags:
   - Reference
 translation_of: Web/API/Blob/Blob
 ---
-<div>{{APIRef("File API")}}</div>
+{{APIRef("File API")}}
 
-<p>Le constructeur <code><strong>Blob()</strong></code> retourne un nouvel objet {{domxref("Blob")}}. Le contenu d'un blob consiste en une concaténation de valeurs données dans le tableau passé en paramètre.</p>
+Le constructeur **`Blob()`** retourne un nouvel objet {{domxref("Blob")}}. Le contenu d'un blob consiste en une concaténation de valeurs données dans le tableau passé en paramètre.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var aBlob = new Blob(<em> array</em>)
-var aBlob = new Blob( <em>array</em>, <em>options</em> );
-</pre>
+    var aBlob = new Blob( array)
+    var aBlob = new Blob( array, options );
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>array</code></dt>
- <dd>Un tableau ({{jsxref("Array")}}) d'objets de type {{jsxref("ArrayBuffer")}}, {{domxref("ArrayBufferView")}}, {{domxref("Blob")}}, {{domxref("DOMString")}}, ou un mélange de tels objets qui seront insérés dans le {{domxref("Blob")}}. Les chaînes <code>DOMString</code> seront encodées en UTF-8.</dd>
- <dt><code>options</code> {{optional_inline}}</dt>
- <dd>Un paramètre optionnel qui est un dictionnaire <code>BlobPropertyBag</code> et qui peut être utilisé pour définir les deux attributs suivants :
- <ul>
-  <li><code>type</code> : cet attribut représente le type MIME du contenu du tableau qui sera inséré dans le blob. La valeur par défaut pour cette propriété est la chaîne vide <code>""</code>.</li>
-  <li><code>endings</code> : cet attribut spécifie la façon dont les chaînes qui contiennent des sauts de lignes (<code>\n</code>) doivent être retranscrites. Il peut prendre l'une de ces valeurs :
-   <ul>
-    <li><code>"native"</code> indiquera que les caractères de fin doivent être adaptés pour correspondre à ceux utilisés par le système d'exploitation</li>
-    <li><code>"transparent"</code> indiquera que les fin de lignes sont stockées telles quelles dans le blob (aucune modification).</li>
-   </ul>
-   La valeur par défaut pour cet attribut est <code>"transparent"</code>. {{non-standard_inline}}</li>
- </ul>
- </dd>
-</dl>
+- `array`
+  - : Un tableau ({{jsxref("Array")}}) d'objets de type {{jsxref("ArrayBuffer")}}, {{domxref("ArrayBufferView")}}, {{domxref("Blob")}}, {{domxref("DOMString")}}, ou un mélange de tels objets qui seront insérés dans le {{domxref("Blob")}}. Les chaînes `DOMString` seront encodées en UTF-8.
+- `options` {{optional_inline}}
 
-<h2 id="Exemples">Exemples</h2>
+  - : Un paramètre optionnel qui est un dictionnaire `BlobPropertyBag` et qui peut être utilisé pour définir les deux attributs suivants :
 
-<pre class="brush: js">// Un tableau qui contient une seule DOMString
-var aFileParts = ['&lt;a id="a"&gt;&lt;b id="b"&gt;Coucou :) !&lt;/b&gt;&lt;/a&gt;'];
+    - `type` : cet attribut représente le type MIME du contenu du tableau qui sera inséré dans le blob. La valeur par défaut pour cette propriété est la chaîne vide `""`.
+    - `endings` : cet attribut spécifie la façon dont les chaînes qui contiennent des sauts de lignes (`\n`) doivent être retranscrites. Il peut prendre l'une de ces valeurs :
 
-// Le blob
-var oMyBlob = new Blob(aFileParts, {type : 'text/html'});</pre>
+      - `"native"` indiquera que les caractères de fin doivent être adaptés pour correspondre à ceux utilisés par le système d'exploitation
+      - `"transparent"` indiquera que les fin de lignes sont stockées telles quelles dans le blob (aucune modification).
+
+      La valeur par défaut pour cet attribut est `"transparent"`. {{non-standard_inline}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Exemples
 
-<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('File API', '#constructorBlob', 'Blob()')}}</td>
-   <td>{{Spec2('File API')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+```js
+// Un tableau qui contient une seule DOMString
+var aFileParts = ['<a id="a"><b id="b">Coucou :) !</b></a>'];
+
+// Le blob
+var oMyBlob = new Blob(aFileParts, {type : 'text/html'});
+```
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Spécifications
 
+| Spécification                                                            | État                         | Commentaires         |
+| ------------------------------------------------------------------------ | ---------------------------- | -------------------- |
+| {{SpecName('File API', '#constructorBlob', 'Blob()')}} | {{Spec2('File API')}} | Définition initiale. |
 
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Blob.Blob")}}</p>
+{{Compat("api.Blob.Blob")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>Le déprécié {{domxref("BlobBuilder")}} qui a été remplacé par ce constructeur.</li>
-</ul>
+- Le déprécié {{domxref("BlobBuilder")}} qui a été remplacé par ce constructeur.
diff --git a/files/fr/web/api/blob/index.md b/files/fr/web/api/blob/index.md
index 6cf6467846..3e79c90f0f 100644
--- a/files/fr/web/api/blob/index.md
+++ b/files/fr/web/api/blob/index.md
@@ -7,61 +7,52 @@ tags:
   - WebAPI
 translation_of: Web/API/Blob
 ---
-<div>{{APIRef("File API")}}</div>
+{{APIRef("File API")}}
 
-<p>Un objet <strong><code>Blob</code></strong> représente un objet, semblable à un fichier, qui est immuable et qui contient des données brutes. Les <em>blobs</em> (pour <em><strong>B</strong>inary <strong>L</strong>arge <strong>Ob</strong>jects</em>) représentent des données qui ne sont pas dans un format JavaScript natif. L'interface {{domxref("File")}} est basée sur l'interface <code>Blob</code> et hérite des fonctionnalités de cette dernière tout en ajoutant des fonctionnalités pour gérer les fichiers sur le système de l'utilisateur.</p>
+Un objet **`Blob`** représente un objet, semblable à un fichier, qui est immuable et qui contient des données brutes. Les _blobs_ (pour **\*B**inary **L**arge **Ob**jects\*) représentent des données qui ne sont pas dans un format JavaScript natif. L'interface {{domxref("File")}} est basée sur l'interface `Blob` et hérite des fonctionnalités de cette dernière tout en ajoutant des fonctionnalités pour gérer les fichiers sur le système de l'utilisateur.
 
-<p>Pour construire un <code>Blob</code> à partir d'objets qui ne sont pas des blobs ou à partir d'autres données, on pourra utiliser le constructeur {{domxref("Blob.Blob", "Blob()")}}. Pour créer un blob qui contient un sous-ensemble d'un autre blob, on pourra employer la méthode {{domxref("Blob.slice()", "slice()")}}. Pour obtenir un <code>Blob</code> à partir d'un fichier du système de l'utilisateur, consulter la documentation {{domxref("File")}}.</p>
+Pour construire un `Blob` à partir d'objets qui ne sont pas des blobs ou à partir d'autres données, on pourra utiliser le constructeur {{domxref("Blob.Blob", "Blob()")}}. Pour créer un blob qui contient un sous-ensemble d'un autre blob, on pourra employer la méthode {{domxref("Blob.slice()", "slice()")}}. Pour obtenir un `Blob` à partir d'un fichier du système de l'utilisateur, consulter la documentation {{domxref("File")}}.
 
-<p>Les API qui acceptent des objets <code>Blob</code> sont également listées sur la documentation de {{domxref("File")}}.</p>
+Les API qui acceptent des objets `Blob` sont également listées sur la documentation de {{domxref("File")}}.
 
-<div class="note">
-<p><strong>Note :</strong> La méthode <code>slice()</code> utilisait auparavant un deuxième argument qui indiquait le nombre d'octets à copier dans le nouveau blob. Si on utilisait un couple de valeur <code>début + longueur</code> qui dépassait la taille du blob source, le blob qui était renvoyé contenait les données à partir de l'indice de début et jusuq'à la fin du blob.</p>
-</div>
+> **Note :** La méthode `slice()` utilisait auparavant un deuxième argument qui indiquait le nombre d'octets à copier dans le nouveau blob. Si on utilisait un couple de valeur `début + longueur` qui dépassait la taille du blob source, le blob qui était renvoyé contenait les données à partir de l'indice de début et jusuq'à la fin du blob.
 
-<div class="note">
-  <p><strong>Note :</strong> La méthode <code>slice()</code> doit être utilisée avec certains préfixes sur certaines versions de navigateurs : <code>blob.mozSlice()</code> pour Firefox 12 et antérieur, <code>blob.webkitSlice()</code> dans Safari. Un ancienne version de <code>slice()</code> sans préfixes avait une sémantique différente et est désormais obsolète. La prise en charge de <code>blob.mozSlice()</code> a été abandonnée avec Firefox 30.</p>
-</div>
+> **Note :** La méthode `slice()` doit être utilisée avec certains préfixes sur certaines versions de navigateurs : `blob.mozSlice()` pour Firefox 12 et antérieur, `blob.webkitSlice()` dans Safari. Un ancienne version de `slice()` sans préfixes avait une sémantique différente et est désormais obsolète. La prise en charge de `blob.mozSlice()` a été abandonnée avec Firefox 30.
 
-<h2 id="Constructeur">Constructeur</h2>
+## Constructeur
 
-<dl>
- <dt>{{domxref("Blob.Blob", "Blob(blobParts[, options])")}}</dt>
- <dd>Ce constructeur renvoie un nouvel objet <code>Blob</code> qui contient la concaténation des valeurs du tableau passé en paramètre.</dd>
-</dl>
+- {{domxref("Blob.Blob", "Blob(blobParts[, options])")}}
+  - : Ce constructeur renvoie un nouvel objet `Blob` qui contient la concaténation des valeurs du tableau passé en paramètre.
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<dl>
- <dt>{{domxref("Blob.isClosed")}} {{readonlyinline}} {{experimental_inline}}</dt>
- <dd>Un booléen qui indique si la méthode {{domxref("Blob.close()")}} a été appelée sur le blob. Les blobs qui ont été fermés ne peuvent pas être lus.</dd>
- <dt>{{domxref("Blob.size")}} {{readonlyinline}}</dt>
- <dd>La taille des données contenues dans l'objet <code>Blob</code>, exprimée en octets.</dd>
- <dt>{{domxref("Blob.type")}} {{readonlyinline}}</dt>
- <dd>Une chaîne de caractères qui indique le type MIME des données contenues dans le <code>Blob</code>. Si le type est inconnu, la chaîne de caractères est vide.</dd>
-</dl>
+- {{domxref("Blob.isClosed")}} {{readonlyinline}} {{experimental_inline}}
+  - : Un booléen qui indique si la méthode {{domxref("Blob.close()")}} a été appelée sur le blob. Les blobs qui ont été fermés ne peuvent pas être lus.
+- {{domxref("Blob.size")}} {{readonlyinline}}
+  - : La taille des données contenues dans l'objet `Blob`, exprimée en octets.
+- {{domxref("Blob.type")}} {{readonlyinline}}
+  - : Une chaîne de caractères qui indique le type MIME des données contenues dans le `Blob`. Si le type est inconnu, la chaîne de caractères est vide.
 
-<h2 id="Méthodes">Méthodes</h2>
+## Méthodes
 
-<dl>
- <dt>{{domxref("Blob.close()")}} {{experimental_inline}}</dt>
- <dd>Cette méthode clotûre le blob et libère éventuellement les ressources sous-jacentes.</dd>
- <dt>{{domxref("Blob.slice()", "Blob.slice([début[, fin[, contentType]]])")}}</dt>
- <dd>Cette méthode renvoie un nouvel objet <code>Blob</code> qui contient les données dans le fragment du <code>Blob</code> source entre <code>début</code> et <code>fin</code>.</dd>
-</dl>
+- {{domxref("Blob.close()")}} {{experimental_inline}}
+  - : Cette méthode clotûre le blob et libère éventuellement les ressources sous-jacentes.
+- {{domxref("Blob.slice()", "Blob.slice([début[, fin[, contentType]]])")}}
+  - : Cette méthode renvoie un nouvel objet `Blob` qui contient les données dans le fragment du `Blob` source entre `début` et `fin`.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Utilisation_du_constructeur_Blob">Utilisation du constructeur <code>Blob</code></h3>
+### Utilisation du constructeur `Blob`
 
-<p>Le constructeur {{domxref("Blob.Blob", "Blob()")}} permet de créer des blobs à partir d'autres objets. Par exemple, on peut construire un blob à partir d'une chaîne de caractères :</p>
+Le constructeur {{domxref("Blob.Blob", "Blob()")}} permet de créer des blobs à partir d'autres objets. Par exemple, on peut construire un blob à partir d'une chaîne de caractères :
 
-<pre>var debug = {coucou: "monde"};
-var blob = new Blob([JSON.stringify(debug, null, 2)], {type : 'application/json'});</pre>
+    var debug = {coucou: "monde"};
+    var blob = new Blob([JSON.stringify(debug, null, 2)], {type : 'application/json'});
 
-<h3 id="Créer_une_URL_de_données_vers_un_tableau_typé">Créer une URL de données vers un tableau typé</h3>
+### Créer une URL de données vers un tableau typé
 
-<pre class="brush: js">var typedArray = GetTheTypedArraySomehow();
+```js
+var typedArray = GetTheTypedArraySomehow();
 
 // On ajoute un type MIME pertinent
 var blob = new Blob([typedArray], {type: 'application/octet-binary'});
@@ -73,47 +64,36 @@ var url = URL.createObjectURL(blob);
 // désormais on peut utiliser l'URL dans tout
 // contexte qui utilise des URL (img.src par
 // exemple)
-</pre>
+```
 
-<h3 id="Extraire_des_données_à_partir_d'un_blob">Extraire des données à partir d'un blob</h3>
+### Extraire des données à partir d'un blob
 
-<p>La seule façon de lire le contenu d'un blob est d'utiliser un objet {{domxref("FileReader")}}. Dans le code qui suit, on lit le contenu d'un blob sous la forme d'un tableau typé.</p>
+La seule façon de lire le contenu d'un blob est d'utiliser un objet {{domxref("FileReader")}}. Dans le code qui suit, on lit le contenu d'un blob sous la forme d'un tableau typé.
 
-<pre class="brush: js">var reader = new FileReader();
+```js
+var reader = new FileReader();
 reader.addEventListener("loadend", function() {
    // reader.result contient le contenu du
    // blob sous la forme d'un tableau typé
 });
-reader.readAsArrayBuffer(blob);</pre>
-
-<p>En utilisant d'autres méthodes de {{domxref("FileReader")}}, on peut lire le contenu du blob si c'est une chaîne ou une URL de données.</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('File API','#blob','Blob')}}</td>
-   <td>{{Spec2('File API')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Blob")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("BlobBuilder")}}</li>
- <li>{{domxref("File")}}</li>
- <li>{{domxref("URL.createObjectURL")}}</li>
- <li><a href="/fr/docs/Mozilla/Tech/XPCOM/Language_Bindings/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li>
-</ul>
+reader.readAsArrayBuffer(blob);
+```
+
+En utilisant d'autres méthodes de {{domxref("FileReader")}}, on peut lire le contenu du blob si c'est une chaîne ou une URL de données.
+
+## Spécifications
+
+| Spécification                                        | État                         | Commentaires         |
+| ---------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('File API','#blob','Blob')}} | {{Spec2('File API')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Blob")}}
+
+## Voir aussi
+
+- {{domxref("BlobBuilder")}}
+- {{domxref("File")}}
+- {{domxref("URL.createObjectURL")}}
+- [Components.utils.importGlobalProperties](/fr/docs/Mozilla/Tech/XPCOM/Language_Bindings/Components.utils.importGlobalProperties)
diff --git a/files/fr/web/api/blob/size/index.md b/files/fr/web/api/blob/size/index.md
index b82751abd0..495747778f 100644
--- a/files/fr/web/api/blob/size/index.md
+++ b/files/fr/web/api/blob/size/index.md
@@ -9,32 +9,28 @@ tags:
 translation_of: Web/API/File/fileSize
 original_slug: Web/API/File/fileSize
 ---
-<p>{{APIRef("File API") }}{{non-standard_header}}</p>
+{{APIRef("File API") }}{{non-standard_header}}
 
-<p>{{obsolete_header(7.0)}}</p>
+{{obsolete_header(7.0)}}
 
-<h2 id="Résumé">Résumé</h2>
+## Résumé
 
-<p>Renvoie la taille du fichier en octets.</p>
+Renvoie la taille du fichier en octets.
 
-<div class="note">
-  <p><strong>Note :</strong> Cette propriété est dépréciée. Utilisez {{domxref("Blob.size")}} à la place.</p>
-</div>
+> **Note :** Cette propriété est dépréciée. Utilisez {{domxref("Blob.size")}} à la place.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre>var size = <em>instanceOfFile</em>.fileSize</pre>
+    var size = instanceOfFile.fileSize
 
-<h2 id="Valeur">Valeur</h2>
+## Valeur
 
-<p>Un nombre.</p>
+Un nombre.
 
-<h2 id="Spécification">Spécification</h2>
+## Spécification
 
-<p>Ne fait partie d'aucune spécification.</p>
+Ne fait partie d'aucune spécification.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("Blob.size")}}</li>
-</ul>
+- {{domxref("Blob.size")}}
diff --git a/files/fr/web/api/blob/type/index.md b/files/fr/web/api/blob/type/index.md
index 8823dd1bb9..166428cb4a 100644
--- a/files/fr/web/api/blob/type/index.md
+++ b/files/fr/web/api/blob/type/index.md
@@ -8,23 +8,24 @@ tags:
   - Propriété
 translation_of: Web/API/Blob/type
 ---
-<div>{{APIRef("File API")}}</div>
+{{APIRef("File API")}}
 
-<p>La propriété <strong><code>type</code></strong> de l'objet <a href="fr/docs/Web/API/Blob"><code>Blob</code></a> fourni le type MIME (Internet media type) d'un fichier. Celle-ci retourne une chaîne de caractère vide si le type n'a pas pu être déterminé.</p>
+La propriété **`type`** de l'objet [`Blob`](fr/docs/Web/API/Blob) fourni le type MIME (Internet media type) d'un fichier. Celle-ci retourne une chaîne de caractère vide si le type n'a pas pu être déterminé.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var mimetype = <var>instanceOfFile</var>.type</pre>
+    var mimetype = instanceOfFile.type
 
-<h2 id="Valeur">Valeur</h2>
+## Valeur
 
-<p>Une chaîne de caractères (par exemple : "image/png").</p>
+Une chaîne de caractères (par exemple : "image/png").
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush:js">var i, fileInput, files, allowedFileTypes;
+```js
+var i, fileInput, files, allowedFileTypes;
 
-// fileInput est un HTMLInputElement: &lt;input type="file" multiple id="myfileinput"&gt;
+// fileInput est un HTMLInputElement: <input type="file" multiple id="myfileinput">
 fileInput = document.getElementById("myfileinput");
 
 // files est un objet FileList (similaire à NodeList)
@@ -33,43 +34,24 @@ files = fileInput.files;
 // notre application accepte seulement les images de type *.png, *.jpeg et *.gif
 allowedFileTypes = ["image/png", "image/jpeg", "image/gif"];
 
-for (i = 0; i &lt; files.length; i++) {
+for (i = 0; i < files.length; i++) {
   // Vérifie si file.type est un type autorisé.
-  if (allowedFileTypes.indexOf(<strong>files[i].type</strong>) &gt; -1) {
+  if (allowedFileTypes.indexOf(files[i].type) > -1) {
     // le type du fichier (file) correspond à l'un des types autorisés. Faites quelque chose ici.
   }
 });
-</pre>
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('File API', '#dfn-type', 'type')}}</td>
-   <td>{{Spec2('File API')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                | Statut                       | Commentaire          |
+| ------------------------------------------------------------ | ---------------------------- | -------------------- |
+| {{SpecName('File API', '#dfn-type', 'type')}} | {{Spec2('File API')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<div>
-<div>
+{{Compat("api.Blob.type")}}
 
+## Voir aussi
 
-<p>{{Compat("api.Blob.type")}}</p>
-</div>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-</div>
-
-<ul>
- <li>{{domxref("Blob")}}</li>
-</ul>
+- {{domxref("Blob")}}
diff --git a/files/fr/web/api/blobbuilder/index.md b/files/fr/web/api/blobbuilder/index.md
index 7098c3d185..bad885b603 100644
--- a/files/fr/web/api/blobbuilder/index.md
+++ b/files/fr/web/api/blobbuilder/index.md
@@ -8,119 +8,131 @@ tags:
   - Obsolete
 translation_of: Web/API/BlobBuilder
 ---
-<p>{{APIRef("File API")}}{{ obsolete_header}}</p>
+{{APIRef("File API")}}{{ obsolete_header}}
 
-<p>L'interface <code>BlobBuilder</code> fournit une manière simple de construire des objets {{domxref("Blob")}}. Il suffit de créer un <code>BlobBuilder</code> et de lui ajouter des données  en appellant la méthode {{manch("append")}}. Une fois finalisé, l'appel à la méthode {{manch("getBlob")}} permet de récupérer un {{domxref("Blob")}} contenant les données envoyées au constructeur dudit Blob.</p>
+L'interface `BlobBuilder` fournit une manière simple de construire des objets {{domxref("Blob")}}. Il suffit de créer un `BlobBuilder` et de lui ajouter des données  en appellant la méthode {{manch("append")}}. Une fois finalisé, l'appel à la méthode {{manch("getBlob")}} permet de récupérer un {{domxref("Blob")}} contenant les données envoyées au constructeur dudit Blob.
 
-<div class="note">
-  <p><strong>Note:</strong> L'interface <code>BlobBuilder</code> est désormais déconseillé (deprecated) au profit du nouveau constructeur {{domxref('Blob')}}.</p>
-</div>
+> **Note :** L'interface `BlobBuilder` est désormais déconseillé (deprecated) au profit du nouveau constructeur {{domxref('Blob')}}.
 
-<h2 id="Aperçu_des_méthodes">Aperçu des méthodes</h2>
+## Aperçu des méthodes
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <td><code>void <a href="/en-US/docs/Web/API/BlobBuilder#append()">append</a>(in ArrayBuffer data);</code></td>
-  </tr>
-  <tr>
-   <td><code>void <a href="/en-US/docs/Web/API/BlobBuilder#append()">append</a>(in Blob data);</code></td>
-  </tr>
-  <tr>
-   <td><code>void <a href="/en-US/docs/Web/API/BlobBuilder#append()">append</a>(in String data, [optional] in String endings);</code></td>
-  </tr>
-  <tr>
-   <td><code>Blob <a href="/en-US/docs/Web/API/BlobBuilder#getBlob()">getBlob</a>([optional] in DOMString contentType);</code></td>
-  </tr>
-  <tr>
-   <td><code>File <a href="/en-US/docs/Web/API/BlobBuilder#getFile()">getFile</a>(in DOMString name, [optional] in DOMString contentType);</code></td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <td>
+        <code
+          >void <a href="/en-US/docs/Web/API/BlobBuilder#append()">append</a>(in
+          ArrayBuffer data);</code
+        >
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <code
+          >void <a href="/en-US/docs/Web/API/BlobBuilder#append()">append</a>(in
+          Blob data);</code
+        >
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <code
+          >void <a href="/en-US/docs/Web/API/BlobBuilder#append()">append</a>(in
+          String data, [optional] in String endings);</code
+        >
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <code
+          >Blob
+          <a href="/en-US/docs/Web/API/BlobBuilder#getBlob()">getBlob</a
+          >([optional] in DOMString contentType);</code
+        >
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <code
+          >File
+          <a href="/en-US/docs/Web/API/BlobBuilder#getFile()">getFile</a>(in
+          DOMString name, [optional] in DOMString contentType);</code
+        >
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Méthodes">Méthodes</h2>
+## Méthodes
 
-<h3 id="append()">append()</h3>
+### append()
 
-<p>Ajoute le contenu de l'objet JavaScript spécifié au {{domxref("Blob")}} en construction. Si la valeur spécifiée n'est pas un {{domxref("Blob")}}, un <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer"><code>ArrayBuffer</code></a>, ou une <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String"><code>String</code></a>, la valeur est forcée (coerced) à string avant d'être ajoutée au blob.</p>
+Ajoute le contenu de l'objet JavaScript spécifié au {{domxref("Blob")}} en construction. Si la valeur spécifiée n'est pas un {{domxref("Blob")}}, un [`ArrayBuffer`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer), ou une [`String`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/String), la valeur est forcée (coerced) à string avant d'être ajoutée au blob.
 
-<pre class="syntaxbox">void append(
-  in ArrayBuffer data
-);
+    void append(
+      in ArrayBuffer data
+    );
 
-void append(
-  in Blob data
-);
+    void append(
+      in Blob data
+    );
 
 
-void append(
-  in String data,
-  [optional] in String endings
-);
-</pre>
+    void append(
+      in String data,
+      [optional] in String endings
+    );
 
-<h4 id="Paramètres">Paramètres</h4>
+#### Paramètres
 
-<dl>
- <dt><code>data</code></dt>
- <dd>Les données à ajouter au {{domxref("Blob")}} en construction.</dd>
- <dt><code>endings</code></dt>
- <dd>Spécifie comment les chaînes (strings) contenant des <code>\n</code> doivent être rendues. Cela peut être <code>"transparent"</code> (endings inchangés) ou <code>"native"</code> (les endings sont changés pour respecter la convention du système de fichier de l'OS de l'hôte). Par défault, la valeur est <code>"transparent"</code>.</dd>
-</dl>
+- `data`
+  - : Les données à ajouter au {{domxref("Blob")}} en construction.
+- `endings`
+  - : Spécifie comment les chaînes (strings) contenant des `\n` doivent être rendues. Cela peut être `"transparent"` (endings inchangés) ou `"native"` (les endings sont changés pour respecter la convention du système de fichier de l'OS de l'hôte). Par défault, la valeur est `"transparent"`.
 
-<h3 id="getBlob()">getBlob()</h3>
+### getBlob()
 
-<p>Retourne l'objet {{domxref("Blob")}} qui a été construit en utilisant les données passées en argument des différents appels à {{manch("append")}}.</p>
+Retourne l'objet {{domxref("Blob")}} qui a été construit en utilisant les données passées en argument des différents appels à {{manch("append")}}.
 
-<pre class="syntaxbox">Blob getBlob(
-  in DOMString contentType {{optional_inline}}
-);
-</pre>
+    Blob getBlob(
+      in DOMString contentType {{optional_inline}}
+    );
 
-<h4 id="Paramètres_2">Paramètres</h4>
+#### Paramètres
 
-<dl>
- <dt>contentType {{optional_inline}}</dt>
- <dd>Le type MIME des données  retournées par le {{domxref("Blob")}}. Ce sera la valeur de la propriété 'type' de l'objet <code>Blob</code>.</dd>
-</dl>
+- contentType {{optional_inline}}
+  - : Le type MIME des données  retournées par le {{domxref("Blob")}}. Ce sera la valeur de la propriété 'type' de l'objet `Blob`.
 
-<h4 id="Valeur_de_retour">Valeur de retour</h4>
+#### Valeur de retour
 
-<p>Un objet {{domxref("Blob")}} contenant toutes les données passées en argument de chaque appel à  {{manch("append")}} depuis la création du <code>BlobBuilder</code>. Cela remet aussi à zéro (reset) le <code>BlobBuilder</code> de tel sorte que le prochain appel à {{manch("append")}} démarrera la création d'un nouveau blob vierge.</p>
+Un objet {{domxref("Blob")}} contenant toutes les données passées en argument de chaque appel à  {{manch("append")}} depuis la création du `BlobBuilder`. Cela remet aussi à zéro (reset) le `BlobBuilder` de tel sorte que le prochain appel à {{manch("append")}} démarrera la création d'un nouveau blob vierge.
 
-<h3 id="getFile()_non-standard_inline">getFile() {{non-standard_inline}}</h3>
+### getFile() {{non-standard_inline}}
 
-<p>Retourne un objet {{domxref("File")}}.</p>
+Retourne un objet {{domxref("File")}}.
 
-<pre class="syntaxbox">File getFile(
-  in DOMString name,
-  [optional] in DOMString contentType
-);
-</pre>
+    File getFile(
+      in DOMString name,
+      [optional] in DOMString contentType
+    );
 
-<h4 id="Paramètres_3">Paramètres</h4>
+#### Paramètres
 
-<dl>
- <dt>name</dt>
- <dd>Le nom du fichier.</dd>
- <dt>contentType {{optional_inline}}</dt>
- <dd>Le type MIME des données  retournées par le {{domxref("File")}}. Ce sera la valeur de la propriété 'type' de l'objet <code>File</code>.</dd>
-</dl>
+- name
+  - : Le nom du fichier.
+- contentType {{optional_inline}}
+  - : Le type MIME des données  retournées par le {{domxref("File")}}. Ce sera la valeur de la propriété 'type' de l'objet `File`.
 
-<h4 id="Valeur_deretour">Valeur deretour</h4>
+#### Valeur deretour
 
-<p>Un objet {{domxref("File")}}.</p>
+Un objet {{domxref("File")}}.
 
-<h2 id="Browser_compatibility">Browser compatibility</h2>
+## Browser compatibility
 
+{{Compat("api.BlobBuilder")}}
 
+## Voir aussi
 
-<p>{{Compat("api.BlobBuilder")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{spec("http://dev.w3.org/2009/dap/file-system/file-writer.html#idl-def-BlobBuilder", "File API Specification: BlobBuilder", "ED")}}</li>
- <li>{{domxref("Blob")}}</li>
- <li>{{domxref("File")}}</li>
-</ul>
+- {{spec("http://dev.w3.org/2009/dap/file-system/file-writer.html#idl-def-BlobBuilder", "File API Specification: BlobBuilder", "ED")}}
+- {{domxref("Blob")}}
+- {{domxref("File")}}
diff --git a/files/fr/web/api/blobevent/blobevent/index.md b/files/fr/web/api/blobevent/blobevent/index.md
index 742af43a44..c976b80341 100644
--- a/files/fr/web/api/blobevent/blobevent/index.md
+++ b/files/fr/web/api/blobevent/blobevent/index.md
@@ -9,53 +9,33 @@ tags:
   - Evènement
 translation_of: Web/API/BlobEvent/BlobEvent
 ---
-<p>{{APIRef("Media Capture and Streams")}}{{seeCompatTable}}</p>
+{{APIRef("Media Capture and Streams")}}{{seeCompatTable}}
 
-<p>Le constructeur <code><strong>BlobEvent()</strong></code> renvoie un nouvel objet {{domxref("BlobEvent")}} créé avec un {{domxref("Blob")}} associé.</p>
+Le constructeur **`BlobEvent()`** renvoie un nouvel objet {{domxref("BlobEvent")}} créé avec un {{domxref("Blob")}} associé.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>blobEvent</em> = new BlobEvent({data: <em>aSpecificBlob</em>}[, timecode]);
-</pre>
+    blobEvent = new BlobEvent({data: aSpecificBlob}[, timecode]);
 
-<h3 id="Arguments">Arguments</h3>
+### Arguments
 
-<p><em>Le constructeur <code>BlobEvent()</code></em><em> hérite des arguments de {{domxref("Event.Event", "Event()")}}.</em></p>
+_Le constructeur `BlobEvent()`_ _hérite des arguments de {{domxref("Event.Event", "Event()")}}._
 
-<dl>
- <dt><code>data</code></dt>
- <dd>est un {{domxref("Blob")}} associé à l'évènement.</dd>
- <dt><code>timecode</code> {{optional_inline}}</dt>
- <dd>un {{domxref("DOMHighResTimeStamp")}} à utiliser pour initialiser l'événement blob.</dd>
-</dl>
+- `data`
+  - : est un {{domxref("Blob")}} associé à l'évènement.
+- `timecode` {{optional_inline}}
+  - : un {{domxref("DOMHighResTimeStamp")}} à utiliser pour initialiser l'événement blob.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('MediaStream Recording', '#blob-event', 'BlobEvent')}}</td>
-   <td>{{Spec2('MediaStream Recording')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                            | Statut                                       | Commentaire          |
+| ---------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------- |
+| {{SpecName('MediaStream Recording', '#blob-event', 'BlobEvent')}} | {{Spec2('MediaStream Recording')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
+{{Compat("api.BlobEvent.BlobEvent")}}
 
+## Voir aussi
 
-<p>{{Compat("api.BlobEvent.BlobEvent")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>L'interface {{domxref("BlobEvent")}} à laquelle il appartient.</li>
-</ul>
-
-<p> </p>
+- L'interface {{domxref("BlobEvent")}} à laquelle il appartient.
diff --git a/files/fr/web/api/blobevent/data/index.md b/files/fr/web/api/blobevent/data/index.md
index ea9939f3bd..b360895880 100644
--- a/files/fr/web/api/blobevent/data/index.md
+++ b/files/fr/web/api/blobevent/data/index.md
@@ -10,41 +10,26 @@ tags:
   - données
 translation_of: Web/API/BlobEvent/data
 ---
-<p>{{ apiref("Media Capture and Streams") }}</p>
+{{ apiref("Media Capture and Streams") }}
 
-<p>{{ SeeCompatTable() }}</p>
+{{ SeeCompatTable() }}
 
-<p>La propriété en lecture seule <code><strong>BlobEvent.data</strong></code> représente un {{domxref("Blob")}} associé à l'évènement.</p>
+La propriété en lecture seule **`BlobEvent.data`** représente un {{domxref("Blob")}} associé à l'évènement.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>associatedBlob</em> = <em>BlobEvent</em>.data</pre>
+    associatedBlob = BlobEvent.data
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('MediaStream Recording', '#widl-BlobEvent-data', 'BlobEvent.data')}}</td>
-   <td>{{Spec2('MediaStream Recording')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                            | Statut                                       | Commentaire          |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------- |
+| {{SpecName('MediaStream Recording', '#widl-BlobEvent-data', 'BlobEvent.data')}} | {{Spec2('MediaStream Recording')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
+{{Compat("api.BlobEvent.data")}}
 
+## Voir aussi
 
-<p>{{Compat("api.BlobEvent.data")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>L'interface {{domxref("BlobEvent")}} à laquelle elle appartient.</li>
-</ul>
+- L'interface {{domxref("BlobEvent")}} à laquelle elle appartient.
diff --git a/files/fr/web/api/blobevent/index.md b/files/fr/web/api/blobevent/index.md
index c0b1079569..415a251788 100644
--- a/files/fr/web/api/blobevent/index.md
+++ b/files/fr/web/api/blobevent/index.md
@@ -14,57 +14,40 @@ tags:
   - events
 translation_of: Web/API/BlobEvent
 ---
-<div>{{APIRef ("Media Capture and Streams")}}</div>
+{{APIRef ("Media Capture and Streams")}}
 
-<p>L'interface <code>BlobEvent</code> représente les événements associés à un {{domxref ("Blob")}}. Ces blobs sont généralement, mais pas nécessairement, associés au contenu multimédia.</p>
+L'interface `BlobEvent` représente les événements associés à un {{domxref ("Blob")}}. Ces blobs sont généralement, mais pas nécessairement, associés au contenu multimédia.
 
-<h2 id="Constructeur">Constructeur</h2>
+## Constructeur
 
-<dl>
- <dt>{{domxref("BlobEvent.BlobEvent", "BlobEvent()")}}</dt>
- <dd>Crée un événement <code>BlobEvent</code> avec les paramètres donnés.</dd>
-</dl>
+- {{domxref("BlobEvent.BlobEvent", "BlobEvent()")}}
+  - : Crée un événement `BlobEvent` avec les paramètres donnés.
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<p><em>Hérite des propriétés de son parent, {{domxref("Event")}}</em>.</p>
+_Hérite des propriétés de son parent, {{domxref("Event")}}_.
 
-<dl>
- <dt>{{domxref("BlobEvent.data")}} {{readonlyInline}}</dt>
- <dd>Un objet {{domxref("Blob")}} qui représente les données associées à l'évènement. L'évènement a été déclenché sur le {{domxref("EventTarget")}} en raison de quelque chose survenu spécifiquement sur ce {{domxref("Blob")}}.</dd>
- <dt>{{domxref("BlobEvent.timecode")}} {{readonlyinline}}</dt>
- <dd>{{domxref("DOMHighResTimeStamp")}} indique la différence entre l'horodatage du premier bloc de données et l'horadatage du premier bloc <code>BlobEvent</code> produit par cet enregistreur. On notera que le <em>timecode</em> du premier <code>BlobEvent</code> produit , n'a pas besoin d'être nul.</dd>
-</dl>
+- {{domxref("BlobEvent.data")}} {{readonlyInline}}
+  - : Un objet {{domxref("Blob")}} qui représente les données associées à l'évènement. L'évènement a été déclenché sur le {{domxref("EventTarget")}} en raison de quelque chose survenu spécifiquement sur ce {{domxref("Blob")}}.
+- {{domxref("BlobEvent.timecode")}} {{readonlyinline}}
+  - : {{domxref("DOMHighResTimeStamp")}} indique la différence entre l'horodatage du premier bloc de données et l'horadatage du premier bloc `BlobEvent` produit par cet enregistreur. On notera que le _timecode_ du premier `BlobEvent` produit , n'a pas besoin d'être nul.
 
-<h2 id="Méthodes">Méthodes</h2>
+## Méthodes
 
-<p><em>Pas de méthode spécifique ; hérite des méthodes de son parent<em> {{domxref("Event")}}.</em></em></p>
+_Pas de méthode spécifique ; hérite des méthodes de son parent _{{domxref("Event")}}.\*\*
 
-<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('MediaStream Recording', '#blob-event', 'BlobEvent')}}</td>
-   <td>{{Spec2('MediaStream Recording')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                            | État                                         | Commentaires        |
+| ---------------------------------------------------------------------------------------- | -------------------------------------------- | ------------------- |
+| {{SpecName('MediaStream Recording', '#blob-event', 'BlobEvent')}} | {{Spec2('MediaStream Recording')}} | Définition initiale |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.BlobEvent")}}</p>
+{{Compat("api.BlobEvent")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>L'interface de base {{domxref("Event")}} .</li>
- <li><a href="/fr/docs/Web/API/MediaStream_Recording_API">L'API MediaStream Recording </a>: envoie des objets <code>BlobEvent</code> chaque fois qu'un fragment de media est prêt.</li>
- <li><a href="/fr/docs/Web/API/MediaStream_Recording_API/Using_the_MediaStream_Recording_API">Utiliser l'API MediaStream Recording</a></li>
-</ul>
+- L'interface de base {{domxref("Event")}} .
+- [L'API MediaStream Recording ](/fr/docs/Web/API/MediaStream_Recording_API): envoie des objets `BlobEvent` chaque fois qu'un fragment de media est prêt.
+- [Utiliser l'API MediaStream Recording](/fr/docs/Web/API/MediaStream_Recording_API/Using_the_MediaStream_Recording_API)
diff --git a/files/fr/web/api/btoa/index.md b/files/fr/web/api/btoa/index.md
index 3d4bad306e..4a808ec8e8 100644
--- a/files/fr/web/api/btoa/index.md
+++ b/files/fr/web/api/btoa/index.md
@@ -14,110 +14,77 @@ tags:
 translation_of: Web/API/WindowOrWorkerGlobalScope/btoa
 original_slug: Web/API/WindowOrWorkerGlobalScope/btoa
 ---
-<div>{{APIRef("HTML DOM")}}</div>
+{{APIRef("HTML DOM")}}
 
-<p>La méthode <code>WindowOrWorkerGlobalScope.btoa()</code> crée une chaîne ASCII codée en base 64 à partir d'un objet {{jsxref ("String")}} dans lequel chaque caractère de la chaîne est traité comme un octet de données binaires.</p>
+La méthode `WindowOrWorkerGlobalScope.btoa()` crée une chaîne ASCII codée en base 64 à partir d'un objet {{jsxref ("String")}} dans lequel chaque caractère de la chaîne est traité comme un octet de données binaires.
 
-<div class="note">
-<p><strong>Note :</strong> étant donné que cette fonction traite chaque caractère comme un octet de données binaires, quel que soit le nombre d'octets composant le caractère, une exception <code>InvalidCharacterError</code> est déclenchée si le {{Glossary("code point")}} d'un caractère quelconque est en dehors de la plage 0x00 à 0xFF. Voir {{anch("Chaînes Unicode")}} pour un exemple montrant comment encoder des chaînes avec des caractères en dehors de la plage 0x00 à 0xFF.</p>
-</div>
+> **Note :** étant donné que cette fonction traite chaque caractère comme un octet de données binaires, quel que soit le nombre d'octets composant le caractère, une exception `InvalidCharacterError` est déclenchée si le {{Glossary("code point")}} d'un caractère quelconque est en dehors de la plage 0x00 à 0xFF. Voir {{anch("Chaînes Unicode")}} pour un exemple montrant comment encoder des chaînes avec des caractères en dehors de la plage 0x00 à 0xFF.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre>var donneesEncodees = scope.btoa(<em>chaineAEncoder</em>);
-</pre>
+    var donneesEncodees = scope.btoa(chaineAEncoder);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>chaineAEncoder</code></dt>
- <dd>Une chaîne dont les caractères représentent chacun un octet unique de données binaires à encoder en ASCII.</dd>
-</dl>
+- `chaineAEncoder`
+  - : Une chaîne dont les caractères représentent chacun un octet unique de données binaires à encoder en ASCII.
 
-<h3 id="Valeur_retournée">Valeur retournée</h3>
+### Valeur retournée
 
-<p>Une chaîne contenant la représentation Base64 de la <code>chaineAEncoder</code>.</p>
+Une chaîne contenant la représentation Base64 de la `chaineAEncoder`.
 
-<h3 id="Exceptions">Exceptions</h3>
+### Exceptions
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="eval">var donneesEncodees = window.btoa('Salut, monde'); // encode une chaîne<em>
-</em>var donneesDecodees = window.atob(donneesEncodees); // décode la chaîne
-</pre>
+    var donneesEncodees = window.btoa('Salut, monde'); // encode une chaîne
+    var donneesDecodees = window.atob(donneesEncodees); // décode la chaîne
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p>Vous pouvez utiliser cette méthode pour encoder des données qui, autrement, pourraient engendrer des problèmes de communication, les transmettre et utiliser alors la méthode {{domxref("WindowOrWorkerGlobalScope.atob","atob()")}} pour décoder les données à nouveau. Par exemple, vous pouvez encoder des caractères de contrôle tels que les valeurs ASCII de 0 à 31.</p>
+Vous pouvez utiliser cette méthode pour encoder des données qui, autrement, pourraient engendrer des problèmes de communication, les transmettre et utiliser alors la méthode {{domxref("WindowOrWorkerGlobalScope.atob","atob()")}} pour décoder les données à nouveau. Par exemple, vous pouvez encoder des caractères de contrôle tels que les valeurs ASCII de 0 à 31.
 
-<p><code>btoa()</code> est également disponible pour les composants XPCOM implémentés en JavaScript, même si {domxref("Window")}} n'est pas l'objet global dans les composants.</p>
+`btoa()` est également disponible pour les composants XPCOM implémentés en JavaScript, même si {domxref("Window")}} n'est pas l'objet global dans les composants.
 
-<h2 id="Chaînes_Unicode">Chaînes Unicode</h2>
+## Chaînes Unicode
 
-<p>Dans la plupart des navigateurs, l'appel de <code>btoa()</code> sur une chaîne Unicode engendrera une exception <code>InvalidCharacterError</code>.</p>
+Dans la plupart des navigateurs, l'appel de `btoa()` sur une chaîne Unicode engendrera une exception `InvalidCharacterError`.
 
-<p>Une option est d'échapper tous les caractères étendus, de telle sorte que la chaîne que vous voulez en fait encoder soit une représentation ASCII de l'original. Voyez cet exemple, noté par <a href="http://ecmanaut.blogspot.com/2006/07/encoding-decoding-utf8-in-javascript.html">Johan Sundström</a> :</p>
+Une option est d'échapper tous les caractères étendus, de telle sorte que la chaîne que vous voulez en fait encoder soit une représentation ASCII de l'original. Voyez cet exemple, noté par [Johan Sundström](http://ecmanaut.blogspot.com/2006/07/encoding-decoding-utf8-in-javascript.html) :
 
-<pre><code>// Chaîne ucs-2 en ascii encodé en base64
-function uena(chn) {
-    return window.btoa(unescape(encodeURIComponent(chn)));
-}
-// Ascii encodé en base64 en chaîne ucs-2
-function aenu(chn) {
-    return decodeURIComponent(escape(window.atob(chn)));
-}
-// Usage :
-uena('✓ à la mode'); // 4pyTIMOgIGxhIG1vZGU=
-aenu('4pyTIMOgIGxhIG1vZGU='); // "✓ à la mode"
+    // Chaîne ucs-2 en ascii encodé en base64
+    function uena(chn) {
+        return window.btoa(unescape(encodeURIComponent(chn)));
+    }
+    // Ascii encodé en base64 en chaîne ucs-2
+    function aenu(chn) {
+        return decodeURIComponent(escape(window.atob(chn)));
+    }
+    // Usage :
+    uena('✓ à la mode'); // 4pyTIMOgIGxhIG1vZGU=
+    aenu('4pyTIMOgIGxhIG1vZGU='); // "✓ à la mode"
 
-uena('I \u2661 Unicode!'); // SSDimaEgVW5pY29kZSE=
-aenu('SSDimaEgVW5pY29kZSE='); // "I ♡ Unicode!"</code></pre>
+    uena('I \u2661 Unicode!'); // SSDimaEgVW5pY29kZSE=
+    aenu('SSDimaEgVW5pY29kZSE='); // "I ♡ Unicode!"
 
-<p>Une solution meilleure, plus fiable et moins coûteuse consiste à <a href="/fr/docs/D%C3%A9coder_encoder_en_base64">utiliser des tableaux typés pour faire la conversion</a>.</p>
+Une solution meilleure, plus fiable et moins coûteuse consiste à [utiliser des tableaux typés pour faire la conversion](/fr/docs/D%C3%A9coder_encoder_en_base64).
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<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', 'webappapis.html#dom-btoa', 'WindowOrWorkerGlobalScope.btoa()')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Méthode déplacée dans le mixin <code>WindowOrWorkerGlobalScope</code> dans la spéc la plus récente.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', '#dom-windowbase64-btoa', 'WindowBase64.btoa()')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Pas de changement depuis le dernier instantané, {{SpecName("HTML5.1")}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5.1', '#dom-windowbase64-btoa', 'WindowBase64.btoa()')}}</td>
-   <td>{{Spec2('HTML5.1')}}</td>
-   <td>Instantané de {{SpecName("HTML WHATWG")}}. Pas de changement.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML5 W3C", "#dom-windowbase64-btoa", "WindowBase64.btoa()")}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Instantané de {{SpecName("HTML WHATWG")}}. Création de <code>WindowBase64</code> (les propriétés se trouvaient sur la cible avant cela).</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                            | Statut                           | Commentaire                                                                                                                            |
+| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('HTML WHATWG', 'webappapis.html#dom-btoa', 'WindowOrWorkerGlobalScope.btoa()')}} | {{Spec2('HTML WHATWG')}} | Méthode déplacée dans le mixin `WindowOrWorkerGlobalScope` dans la spéc la plus récente.                                               |
+| {{SpecName('HTML WHATWG', '#dom-windowbase64-btoa', 'WindowBase64.btoa()')}}                     | {{Spec2('HTML WHATWG')}} | Pas de changement depuis le dernier instantané, {{SpecName("HTML5.1")}}.                                                      |
+| {{SpecName('HTML5.1', '#dom-windowbase64-btoa', 'WindowBase64.btoa()')}}                         | {{Spec2('HTML5.1')}}     | Instantané de {{SpecName("HTML WHATWG")}}. Pas de changement.                                                                 |
+| {{SpecName("HTML5 W3C", "#dom-windowbase64-btoa", "WindowBase64.btoa()")}}                     | {{Spec2('HTML5 W3C')}}     | Instantané de {{SpecName("HTML WHATWG")}}. Création de `WindowBase64` (les propriétés se trouvaient sur la cible avant cela). |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.WindowOrWorkerGlobalScope.btoa")}}</p>
+{{Compat("api.WindowOrWorkerGlobalScope.btoa")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding">Base64 encoding and decoding</a></li>
- <li><a href="/fr/docs/Web/HTTP/Basics_of_HTTP/Data_URIs">Les URL de <code>données</code></a></li>
- <li>{{domxref("WindowOrWorkerGlobalScope.atob","atob()")}}</li>
- <li><a href="/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li>
-</ul>
+- [Base64 encoding and decoding](/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding)
+- [Les URL de `données`](/fr/docs/Web/HTTP/Basics_of_HTTP/Data_URIs)
+- {{domxref("WindowOrWorkerGlobalScope.atob","atob()")}}
+- [Components.utils.importGlobalProperties](/en-US/docs/Components.utils.importGlobalProperties)
diff --git a/files/fr/web/api/cache/add/index.md b/files/fr/web/api/cache/add/index.md
index 83fd3085ba..bb85f96fbb 100644
--- a/files/fr/web/api/cache/add/index.md
+++ b/files/fr/web/api/cache/add/index.md
@@ -13,100 +13,93 @@ tags:
   - ServiceWorker
 translation_of: Web/API/Cache/add
 ---
-<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+{{APIRef("Service Workers API")}}{{SeeCompatTable}}
 
-<p>La méthode <strong><code>add()</code></strong> de l'interface {{domxref("Cache")}} accepte une URL, la récupère, et ajoute l'objet réponse qui en résulte dans le cache. La méthode <code>add()</code> est équivalent au code suivant :</p>
+La méthode **`add()`** de l'interface {{domxref("Cache")}} accepte une URL, la récupère, et ajoute l'objet réponse qui en résulte dans le cache. La méthode `add()` est équivalent au code suivant :
 
-<pre class="brush: js">fetch(url).then(function(response) {
+```js
+fetch(url).then(function(response) {
   if (!response.ok) {
     throw new TypeError('bad response status');
   }
   return cache.put(url, response);
-})</pre>
+})
+```
 
-<p>Pour des opérations plus complexes, il faut utiliser {{domxref("Cache.put","Cache.put()")}} directement.</p>
+Pour des opérations plus complexes, il faut utiliser {{domxref("Cache.put","Cache.put()")}} directement.
 
-<div class="note">
-<p><strong>Note :</strong> <code>add()</code> écrasera toute paire clé/valeur précedemment stockée en cache et qui correspond à la requête.</p>
-</div>
+> **Note :** `add()` écrasera toute paire clé/valeur précedemment stockée en cache et qui correspond à la requête.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">cache.add(request).then(function() {
+```js
+cache.add(request).then(function() {
   //request a été ajoutée au cache
 });
-</pre>
+```
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt>request</dt>
- <dd>La requête à mettre en cache. Ce paramètre peut être un objet {{domxref("Request", "Requête")}} ou une URL.</dd>
-</dl>
+- request
+  - : La requête à mettre en cache. Ce paramètre peut être un objet {{domxref("Request", "Requête")}} ou une URL.
 
-<h3 id="Retour">Retour</h3>
+### Retour
 
-<p>Une {{jsxref("Promise", "Promesse")}} qui est résolue en void.</p>
+Une {{jsxref("Promise", "Promesse")}} qui est résolue en void.
 
-<h3 id="Exceptions">Exceptions</h3>
+### Exceptions
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col"><strong>Exception</strong></th>
-   <th scope="col"><strong>Arrive quand</strong></th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>TypeError</code></td>
-   <td>
-    <p>Le schéma d'URL n'est pas <code>http</code> ou <code>https</code>.</p>
-
-    <p>Le statut de la réponse n'est pas dans les 200 (i.e., une requête qui a échoué.) Cela peut arriver si la requête échoue, mais également si la requête est une <em>cross-origin no-cors</em> (auquel cas le statut retourné est systématiquement 0.)</p>
-   </td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th scope="col"><strong>Exception</strong></th>
+      <th scope="col"><strong>Arrive quand</strong></th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>TypeError</code></td>
+      <td>
+        <p>
+          Le schéma d'URL n'est pas <code>http</code> ou <code>https</code>.
+        </p>
+        <p>
+          Le statut de la réponse n'est pas dans les 200 (i.e., une requête qui
+          a échoué.) Cela peut arriver si la requête échoue, mais également si
+          la requête est une <em>cross-origin no-cors</em> (auquel cas le statut
+          retourné est systématiquement 0.)
+        </p>
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Ce bloc de code attends le déclenchement d'un {{domxref("InstallEvent")}}, puis lance {{domxref("ExtendableEvent.waitUntil","waitUntil")}} qui gère la phase d'installation de l'application. Cela consite à appeler {{domxref("CacheStorage.open")}} afin de créer un nouveau cache, puis à utiliser {{domxref("Cache.add")}} pour y ajouter des ressources.</p>
+Ce bloc de code attends le déclenchement d'un {{domxref("InstallEvent")}}, puis lance {{domxref("ExtendableEvent.waitUntil","waitUntil")}} qui gère la phase d'installation de l'application. Cela consite à appeler {{domxref("CacheStorage.open")}} afin de créer un nouveau cache, puis à utiliser {{domxref("Cache.add")}} pour y ajouter des ressources.
 
-<pre class="brush: js">this.addEventListener('install', function(event) {
+```js
+this.addEventListener('install', function(event) {
   event.waitUntil(
     caches.open('v1').then(function(cache) {
       return cache.add('/sw-test/index.html');
     })
   );
 });
-</pre>
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Service Workers', '#dom-cache-add', 'Cache: add')}}</td>
-   <td>{{Spec2('Service Workers')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                        | Statut                               | Commentaire          |
+| ------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- |
+| {{SpecName('Service Workers', '#dom-cache-add', 'Cache: add')}} | {{Spec2('Service Workers')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Cache.add")}}</p>
+{{Compat("api.Cache.add")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Utiliser les Service Workers</a></li>
- <li>{{domxref("Cache")}}</li>
- <li>{{domxref("WorkerGlobalScope.caches")}}</li>
-</ul>
+- [Utiliser les Service Workers](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers)
+- {{domxref("Cache")}}
+- {{domxref("WorkerGlobalScope.caches")}}
diff --git a/files/fr/web/api/cache/addall/index.md b/files/fr/web/api/cache/addall/index.md
index 98f5111d78..5e78e53925 100644
--- a/files/fr/web/api/cache/addall/index.md
+++ b/files/fr/web/api/cache/addall/index.md
@@ -13,58 +13,62 @@ tags:
   - addAll
 translation_of: Web/API/Cache/addAll
 ---
-<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+{{APIRef("Service Workers API")}}{{SeeCompatTable}}
 
-<p>La méthode <strong><code>addAll()</code></strong> de l'interface {{domxref("Cache")}} accepte un tableau d'URLS, les récupères, et ajoute les objets réponse qui en résultent au cache en question. Les objets requêtes crées pendant la phase de récupération deviennent des clés vers les opérations de réponse stockées. </p>
+La méthode **`addAll()`** de l'interface {{domxref("Cache")}} accepte un tableau d'URLS, les récupères, et ajoute les objets réponse qui en résultent au cache en question. Les objets requêtes crées pendant la phase de récupération deviennent des clés vers les opérations de réponse stockées.
 
-<div class="note">
-<p><strong>Note :</strong> <code>addAll()</code> écrasera toute paire clé/valeur précedemment stockée en cache et qui correspond à une requête, mais échouera si l'opération <code>put() </code>ainsi créée devrait engendrer l'éffacement d'une entrée cache créée par la même méthode <code>addAll()</code>.</p>
-</div>
+> **Note :** `addAll()` écrasera toute paire clé/valeur précedemment stockée en cache et qui correspond à une requête, mais échouera si l'opération `put() `ainsi créée devrait engendrer l'éffacement d'une entrée cache créée par la même méthode `addAll()`.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">cache.addAll(requests[]).then(function() {
+```js
+cache.addAll(requests[]).then(function() {
   //requests have been added to the cache
 });
-</pre>
+```
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt>requests</dt>
- <dd>Un tableau d'objets {{domxref("Request", "Requête")}} à ajouter au cache.</dd>
-</dl>
+- requests
+  - : Un tableau d'objets {{domxref("Request", "Requête")}} à ajouter au cache.
 
-<h3 id="Retour">Retour</h3>
+### Retour
 
-<p>Une {{jsxref("Promise", "Promesse")}} qui est résolue en void.</p>
+Une {{jsxref("Promise", "Promesse")}} qui est résolue en void.
 
-<h3 id="Exceptions">Exceptions</h3>
+### Exceptions
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col"><strong>Exception</strong></th>
-   <th scope="col"><strong>Arrive quand</strong></th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>TypeError</code></td>
-   <td>
-    <p>Le schéma d'URL n'est pas <code>http</code> ou <code>https</code>.</p>
-
-    <p>Le statut de la réponse n'est pas dans les 200 (i.e., une requête qui a échoué.) Cela peut arriver si la requête échoue, mais également si la requête est une <em>cross-origin no-cors</em> (auquel cas le statut retourné est systématiquement 0.)</p>
-   </td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th scope="col"><strong>Exception</strong></th>
+      <th scope="col"><strong>Arrive quand</strong></th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>TypeError</code></td>
+      <td>
+        <p>
+          Le schéma d'URL n'est pas <code>http</code> ou <code>https</code>.
+        </p>
+        <p>
+          Le statut de la réponse n'est pas dans les 200 (i.e., une requête qui
+          a échoué.) Cela peut arriver si la requête échoue, mais également si
+          la requête est une <em>cross-origin no-cors</em> (auquel cas le statut
+          retourné est systématiquement 0.)
+        </p>
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Exemples"><strong>Exemples</strong></h2>
+## **Exemples**
 
-<p>Ce bloc de code attends le déclenchement d'un {{domxref("InstallEvent")}}, puis lance {{domxref("ExtendableEvent.waitUntil","waitUntil")}} qui gère la phase d'installation de l'application. Cela consite à appeler {{domxref("CacheStorage.open")}} afin de créer un nouveau cache, puis à utiliser <code>addAll()</code> pour y ajouter une série de ressources.</p>
+Ce bloc de code attends le déclenchement d'un {{domxref("InstallEvent")}}, puis lance {{domxref("ExtendableEvent.waitUntil","waitUntil")}} qui gère la phase d'installation de l'application. Cela consite à appeler {{domxref("CacheStorage.open")}} afin de créer un nouveau cache, puis à utiliser `addAll()` pour y ajouter une série de ressources.
 
-<pre class="brush: js">this.addEventListener('install', function(event) {
+```js
+this.addEventListener('install', function(event) {
   event.waitUntil(
     caches.open('v1').then(function(cache) {
       return cache.addAll([
@@ -82,33 +86,20 @@ translation_of: Web/API/Cache/addAll
     })
   );
 });
-</pre>
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Service Workers', '#dom-cache-addall', 'Cache: addAll')}}</td>
-   <td>{{Spec2('Service Workers')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                | Statut                               | Commentaire          |
+| -------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName('Service Workers', '#dom-cache-addall', 'Cache: addAll')}} | {{Spec2('Service Workers')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Cache.addAll")}}</p>
+{{Compat("api.Cache.addAll")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Utiliser les Service Workers</a></li>
- <li>{{domxref("Cache")}}</li>
- <li>{{domxref("WorkerGlobalScope.caches")}}</li>
-</ul>
+- [Utiliser les Service Workers](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers)
+- {{domxref("Cache")}}
+- {{domxref("WorkerGlobalScope.caches")}}
diff --git a/files/fr/web/api/cache/delete/index.md b/files/fr/web/api/cache/delete/index.md
index 5100ece8c8..1409dbfa4b 100644
--- a/files/fr/web/api/cache/delete/index.md
+++ b/files/fr/web/api/cache/delete/index.md
@@ -12,70 +12,57 @@ tags:
   - delete
 translation_of: Web/API/Cache/delete
 ---
-<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+{{APIRef("Service Workers API")}}{{SeeCompatTable}}
 
-<p>La méthode <strong><code>delete()</code></strong> de l'interface {{domxref("Cache")}} cherche l'entrée {{domxref("Cache")}} dont la clé est la requête passée en argument, et retourne une {{jsxref("Promise", "Promesse")}}. Si une entrée {{domxref("Cache")}} est trouvée, elle est supprimée, et la promesse est résolue à <code>true</code>. Dans le cas contraire, la promesse est résolue à <code>false</code>.</p>
+La méthode **`delete()`** de l'interface {{domxref("Cache")}} cherche l'entrée {{domxref("Cache")}} dont la clé est la requête passée en argument, et retourne une {{jsxref("Promise", "Promesse")}}. Si une entrée {{domxref("Cache")}} est trouvée, elle est supprimée, et la promesse est résolue à `true`. Dans le cas contraire, la promesse est résolue à `false`.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">cache.delete(request,{options}).then(function(true) {
+```js
+cache.delete(request,{options}).then(function(true) {
   //your cache entry has been deleted
 });
-</pre>
+```
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt>request</dt>
- <dd>La {{domxref("Request", "Requête")}} à supprimer.</dd>
- <dt>options {{optional_inline}}</dt>
- <dd>Un objet dont les paramètres contrôlent comment le matching est effectué lors de l'opération de <code>delete</code>. Les options disponibles sont :
- <ul>
-  <li><code>ignoreSearch</code>: Un {{domxref("Boolean")}} qui spécifie si le matching doit ignorer ou non la query string dans l'url.  Si mis à <code>true</code>, la partie <code>?value=bar</code> de l'url <code>http://foo.com/?value=bar</code> sera ignorée lors du matching. Est à <code>false</code> par défaut.</li>
-  <li><code>ignoreMethod</code>: Un {{domxref("Boolean")}} qui, quand mis à <code>true</code>, empêche les opérations de matching de valider la méthode <code>HTTP</code> de la {{domxref("Request", "Requête")}} (en temps normal, seules <code>GET</code> et <code>HEAD</code> sont autorisées.) Est à  <code>false</code> par défaut.</li>
-  <li><code>ignoreVary</code>: Un {{domxref("Boolean")}} qui, quand mis à <code>true,</code> indique à l'opération de matching de ne pas effectuer le matching <code>VARY</code> des header.  En d'autres termes, si l'URL correspond, un match sera obtenu peu importe que la {{domxref("Response", "Réponse")}} ait un header <code>VARY</code> ou non. Est à <code>false</code> par défaut.</li>
-  <li><code>cacheName</code>: Une {{domxref("DOMString")}} qui représente un cache spécifique où effectuer la recherche. A noter que cette option est ignorée par <code>Cache.delete()</code>.</li>
- </ul>
- </dd>
-</dl>
+- request
+  - : La {{domxref("Request", "Requête")}} à supprimer.
+- options {{optional_inline}}
 
-<h3 id="Retour">Retour</h3>
+  - : Un objet dont les paramètres contrôlent comment le matching est effectué lors de l'opération de `delete`. Les options disponibles sont :
 
-<p>Une {{jsxref("Promise", "Promesse")}} qui est résolue à <code>true</code> si l'entrée de cache est supprimée, ou à <code>false</code> dans le cas contraire.</p>
+    - `ignoreSearch`: Un {{domxref("Boolean")}} qui spécifie si le matching doit ignorer ou non la query string dans l'url.  Si mis à `true`, la partie `?value=bar` de l'url `http://foo.com/?value=bar` sera ignorée lors du matching. Est à `false` par défaut.
+    - `ignoreMethod`: Un {{domxref("Boolean")}} qui, quand mis à `true`, empêche les opérations de matching de valider la méthode `HTTP` de la {{domxref("Request", "Requête")}} (en temps normal, seules `GET` et `HEAD` sont autorisées.) Est à  `false` par défaut.
+    - `ignoreVary`: Un {{domxref("Boolean")}} qui, quand mis à `true,` indique à l'opération de matching de ne pas effectuer le matching `VARY` des header.  En d'autres termes, si l'URL correspond, un match sera obtenu peu importe que la {{domxref("Response", "Réponse")}} ait un header `VARY` ou non. Est à `false` par défaut.
+    - `cacheName`: Une {{domxref("DOMString")}} qui représente un cache spécifique où effectuer la recherche. A noter que cette option est ignorée par `Cache.delete()`.
 
-<h2 id="Exemples">Exemples</h2>
+### Retour
 
-<pre class="brush: js">caches.open('v1').then(function(cache) {
+Une {{jsxref("Promise", "Promesse")}} qui est résolue à `true` si l'entrée de cache est supprimée, ou à `false` dans le cas contraire.
+
+## Exemples
+
+```js
+caches.open('v1').then(function(cache) {
   cache.delete('/images/image.png').then(function(response) {
     someUIUpdateFunction();
   });
-})</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Service Workers', '#dom-cache-delete', 'Cache: delete')}}</td>
-   <td>{{Spec2('Service Workers')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilités_des_navigateurs">Compatibilités des navigateurs</h2>
-
-<p>{{Compat("api.Cache.delete")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Utiliser les Service Workers</a></li>
- <li>{{domxref("Cache")}}</li>
- <li>{{domxref("WorkerGlobalScope.caches")}}</li>
-</ul>
+})
+```
+
+## Spécifications
+
+| Spécification                                                                                | Statut                               | Commentaires         |
+| -------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName('Service Workers', '#dom-cache-delete', 'Cache: delete')}} | {{Spec2('Service Workers')}} | Définition initiale. |
+
+## Compatibilités des navigateurs
+
+{{Compat("api.Cache.delete")}}
+
+## Voir aussi
+
+- [Utiliser les Service Workers](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers)
+- {{domxref("Cache")}}
+- {{domxref("WorkerGlobalScope.caches")}}
diff --git a/files/fr/web/api/cache/index.md b/files/fr/web/api/cache/index.md
index 384689d3fa..b53c794c91 100644
--- a/files/fr/web/api/cache/index.md
+++ b/files/fr/web/api/cache/index.md
@@ -13,60 +13,51 @@ tags:
   - hors ligne
 translation_of: Web/API/Cache
 ---
-<p>{{APIRef("Service Workers API")}} {{SeeCompatTable}}</p>
+{{APIRef("Service Workers API")}} {{SeeCompatTable}}
 
-<p>L'interface <code>Cache</code> fournit un mécanisme de stockage pour les paires d'objets <code><a href="http://fetch.spec.whatwg.org/#request">Request</a></code>/<code><a href="http://fetch.spec.whatwg.org/#response">Response</a></code> qui sont mises en cache, par exemple dans le cadre du cycle de vie {{domxref("ServiceWorker")}}. Il est à noter que l'interface <code>Cache</code> est exposée à des portées fenêtrées ainsi qu'à des service workers. Vous n'êtes pas obligé de l'utiliser avec des services workers, même si elle est définie dans la spécification relative aux services workers.</p>
+L'interface `Cache` fournit un mécanisme de stockage pour les paires d'objets [`Request`](http://fetch.spec.whatwg.org/#request)/[`Response`](http://fetch.spec.whatwg.org/#response) qui sont mises en cache, par exemple dans le cadre du cycle de vie {{domxref("ServiceWorker")}}. Il est à noter que l'interface `Cache` est exposée à des portées fenêtrées ainsi qu'à des service workers. Vous n'êtes pas obligé de l'utiliser avec des services workers, même si elle est définie dans la spécification relative aux services workers.
 
-<p>Une origine peut avoir plusieurs objets nommés <code>Cache</code>. Vous êtes responsable de l'implémentation de la manière dont votre script (par exemple dans un {{domxref("ServiceWorker")}}) gère les mises à jour du cache. Les éléments d'un cache ne sont pas mis à jour, sauf demande explicite ; ils n'expirent pas, sauf s'ils sont supprimés. Utilisez {{domxref("CacheStorage.open", "CacheStorage.open()")}} pour ouvrir un objet <code>Cache</code> spécifique et appelez ensuite l'une des méthodes <code>Cache</code> pour maintenir le <code>Cache</code>.</p>
+Une origine peut avoir plusieurs objets nommés `Cache`. Vous êtes responsable de l'implémentation de la manière dont votre script (par exemple dans un {{domxref("ServiceWorker")}}) gère les mises à jour du cache. Les éléments d'un cache ne sont pas mis à jour, sauf demande explicite ; ils n'expirent pas, sauf s'ils sont supprimés. Utilisez {{domxref("CacheStorage.open", "CacheStorage.open()")}} pour ouvrir un objet `Cache` spécifique et appelez ensuite l'une des méthodes `Cache` pour maintenir le `Cache`.
 
-<p>Vous êtes également responsable de la purge périodique des entrées du cache. Chaque navigateur a une limite stricte sur la quantité de mémoire cache qu'une origine donnée peut utiliser. Les estimations de l'utilisation du quota de cache sont disponibles via le lien {{domxref("StorageEstimate")}} API. Le navigateur fait de son mieux pour gérer l'espace disque, mais il peut supprimer le stockage en cache d'une origine. Le navigateur supprime généralement toutes les données d'une origine ou aucune des données d'une origine. Veillez à nommer les caches et à n'utiliser les caches qu'à partir de la version du script sur laquelle ils peuvent fonctionner en toute sécurité. Pour plus d'informations, voir <a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers#Supprimer_les_anciens_caches">Suppression des anciens caches</a>.</p>
+Vous êtes également responsable de la purge périodique des entrées du cache. Chaque navigateur a une limite stricte sur la quantité de mémoire cache qu'une origine donnée peut utiliser. Les estimations de l'utilisation du quota de cache sont disponibles via le lien {{domxref("StorageEstimate")}} API. Le navigateur fait de son mieux pour gérer l'espace disque, mais il peut supprimer le stockage en cache d'une origine. Le navigateur supprime généralement toutes les données d'une origine ou aucune des données d'une origine. Veillez à nommer les caches et à n'utiliser les caches qu'à partir de la version du script sur laquelle ils peuvent fonctionner en toute sécurité. Pour plus d'informations, voir [Suppression des anciens caches](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers#Supprimer_les_anciens_caches).
 
-<div class="note">
-<p><strong>Note :</strong> Les implémentations initiales du cache (dans Blink et Gecko) résolvent les engagements {{domxref("Cache.add()")}}, {{domxref("Cache.addAll()")}}, et {{domxref("Cache.put()")}} lorsque le corps de la réponse est entièrement écrit sur le stockage. Des versions plus récentes de la spécification précisent que le navigateur peut résoudre la promesse dès que l'entrée est enregistrée dans la base de données, même si le corps de réponse est encore en cours d'écriture.</p>
-</div>
+> **Note :** Les implémentations initiales du cache (dans Blink et Gecko) résolvent les engagements {{domxref("Cache.add()")}}, {{domxref("Cache.addAll()")}}, et {{domxref("Cache.put()")}} lorsque le corps de la réponse est entièrement écrit sur le stockage. Des versions plus récentes de la spécification précisent que le navigateur peut résoudre la promesse dès que l'entrée est enregistrée dans la base de données, même si le corps de réponse est encore en cours d'écriture.
 
-<div class="note">
-<p><strong>Note :</strong> L'algorithme des correspondances de clés est dépendant de la valeur de l'<a href="https://www.fastly.com/blog/best-practices-using-vary-header">en-tête VARY</a>. Ainsi, pour faire correspondre une nouvelle clé, il faut examiner à la fois la clé et la valeur des entrées dans le Cache.</p>
-</div>
+> **Note :** L'algorithme des correspondances de clés est dépendant de la valeur de l'[en-tête VARY](https://www.fastly.com/blog/best-practices-using-vary-header). Ainsi, pour faire correspondre une nouvelle clé, il faut examiner à la fois la clé et la valeur des entrées dans le Cache.
 
-<div class="blockIndicator note">
-<p><strong>Note :</strong> L'API de mise en cache n'honore pas les en-têtes de mise en cache HTTP.</p>
-</div>
+> **Note :** L'API de mise en cache n'honore pas les en-têtes de mise en cache HTTP.
 
-<h2 id="Méthodes">Méthodes</h2>
+## Méthodes
 
-<dl>
- <dt>{{domxref("Cache.match", "Cache.match(request, options)")}} {{experimental_inline}}</dt>
- <dd>Retourne une {{jsxref("Promise" , "Promesse" )}} qui se résout en une réponse associée à la première requête correspondante dans l'objet {{domxref("Cache")}}.</dd>
- <dt>{{domxref("Cache.matchAll", "Cache.matchAll(request, options)")}} {{experimental_inline}}</dt>
- <dd>Retourne une {{jsxref("Promise" , "Promesse" )}} qui se résout en un tableau de toutes les requêtes correspondantes dans l'objet {{domxref("Cache")}}.</dd>
- <dt>{{domxref("Cache.add", "Cache.add(request)")}} {{experimental_inline}}</dt>
- <dd>Prend une URL, la récupère et ajoute l'objet réponse associé au cache donné. C'est une fonctionnalité équivalente à l'appel de fetch(), puis à l'utilisation de Cache.put() pour ajouter les résultats  au cache.</dd>
- <dt>{{domxref("Cache.addAll", "Cache.addAll(requests)")}} {{experimental_inline}}</dt>
- <dd>Prend un tableau d'URLs, les récupère, et ajoute les objets réponses associés au cache donné.</dd>
- <dt>{{domxref("Cache.put", "Cache.put(request, response)")}} {{experimental_inline}}</dt>
- <dd>Prend à la fois une requête et sa réponse et l'ajoute au cache donné.</dd>
- <dt>{{domxref("Cache.delete", "Cache.delete(request, options)")}} {{experimental_inline}}</dt>
- <dd>Trouve l'entrée {{domxref("Cache")}} dont la clé est la requête, et le cas échéant, supprime l'entrée {{domxref("Cache")}} et retourne une {{jsxref("Promise" , "Promesse" )}} qui se résout à <code>true</code>. Si aucune entrée {{domxref("Cache")}} n'est trouvée, elle retourne <code>false</code>.</dd>
- <dt>{{domxref("Cache.keys", "Cache.keys(request, options)")}} {{experimental_inline}}</dt>
- <dd>Retourne une {{jsxref("Promise" , "Promesse" )}} qui se résout en un tableau clés {{domxref("Cache")}}.</dd>
-</dl>
+- {{domxref("Cache.match", "Cache.match(request, options)")}} {{experimental_inline}}
+  - : Retourne une {{jsxref("Promise" , "Promesse" )}} qui se résout en une réponse associée à la première requête correspondante dans l'objet {{domxref("Cache")}}.
+- {{domxref("Cache.matchAll", "Cache.matchAll(request, options)")}} {{experimental_inline}}
+  - : Retourne une {{jsxref("Promise" , "Promesse" )}} qui se résout en un tableau de toutes les requêtes correspondantes dans l'objet {{domxref("Cache")}}.
+- {{domxref("Cache.add", "Cache.add(request)")}} {{experimental_inline}}
+  - : Prend une URL, la récupère et ajoute l'objet réponse associé au cache donné. C'est une fonctionnalité équivalente à l'appel de fetch(), puis à l'utilisation de Cache.put() pour ajouter les résultats  au cache.
+- {{domxref("Cache.addAll", "Cache.addAll(requests)")}} {{experimental_inline}}
+  - : Prend un tableau d'URLs, les récupère, et ajoute les objets réponses associés au cache donné.
+- {{domxref("Cache.put", "Cache.put(request, response)")}} {{experimental_inline}}
+  - : Prend à la fois une requête et sa réponse et l'ajoute au cache donné.
+- {{domxref("Cache.delete", "Cache.delete(request, options)")}} {{experimental_inline}}
+  - : Trouve l'entrée {{domxref("Cache")}} dont la clé est la requête, et le cas échéant, supprime l'entrée {{domxref("Cache")}} et retourne une {{jsxref("Promise" , "Promesse" )}} qui se résout à `true`. Si aucune entrée {{domxref("Cache")}} n'est trouvée, elle retourne `false`.
+- {{domxref("Cache.keys", "Cache.keys(request, options)")}} {{experimental_inline}}
+  - : Retourne une {{jsxref("Promise" , "Promesse" )}} qui se résout en un tableau clés {{domxref("Cache")}}.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Cet extrait de code provient de <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/selective-caching/service-worker.js">l'exemple de mise en cache sélective</a>. (voir <a href="https://googlechrome.github.io/samples/service-worker/selective-caching/">selective caching live</a>) Le code utilise {{domxref("CacheStorage.open", "CacheStorage.open(cacheName)")}} pour ouvrir tous les objets {{domxref("Cache")}} avec un en-tête Content-Type qui débute par <code>font/</code>.</p>
+Cet extrait de code provient de [l'exemple de mise en cache sélective](https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/selective-caching/service-worker.js). (voir [selective caching live](https://googlechrome.github.io/samples/service-worker/selective-caching/)) Le code utilise {{domxref("CacheStorage.open", "CacheStorage.open(cacheName)")}} pour ouvrir tous les objets {{domxref("Cache")}} avec un en-tête Content-Type qui débute par `font/`.
 
-<p>Le code utilise alors {{domxref("Cache.match", "Cache.match(request, options)")}} pour voir s'il y a déjà une fonte correspondante dans le cache, et le cas échéant, la retourne. S'il n'y a pas de correspondance, le code récupère la fonte à partir du réseau et utilise {{domxref("Cache.put","Cache.put(request, response)")}} pour mettre en cache la ressource récupérée.</p>
+Le code utilise alors {{domxref("Cache.match", "Cache.match(request, options)")}} pour voir s'il y a déjà une fonte correspondante dans le cache, et le cas échéant, la retourne. S'il n'y a pas de correspondance, le code récupère la fonte à partir du réseau et utilise {{domxref("Cache.put","Cache.put(request, response)")}} pour mettre en cache la ressource récupérée.
 
-<p>Le code gère les exceptions déclenchées par l'opération de {{domxref("Globalfetch.fetch","fetch()")}}. A noter qu'une réponse HTTP en erreur (e.g., 404) ne déclenchera pas une exception. Elle retournera un objet de réponse normal qui dispose du code d'erreur approprié.</p>
+Le code gère les exceptions déclenchées par l'opération de {{domxref("Globalfetch.fetch","fetch()")}}. A noter qu'une réponse HTTP en erreur (e.g., 404) ne déclenchera pas une exception. Elle retournera un objet de réponse normal qui dispose du code d'erreur approprié.
 
-<p>Cet extrait de code illustre également une bonne pratique pour versionner les caches utilisés par le service worker. Bien qu'il y ait seulement un cache dans cet exemple, la même approche peut être utilisée pour des caches multiples. Il associe un identifiant  court avec un nom de cache versionné et spécifique. Le code supprime aussi tous les caches qui ne sont pas nommés dans <code>CURRENT_CACHES</code>.</p>
+Cet extrait de code illustre également une bonne pratique pour versionner les caches utilisés par le service worker. Bien qu'il y ait seulement un cache dans cet exemple, la même approche peut être utilisée pour des caches multiples. Il associe un identifiant  court avec un nom de cache versionné et spécifique. Le code supprime aussi tous les caches qui ne sont pas nommés dans `CURRENT_CACHES`.
 
-<div class="note">
-  <p><strong>Note:</strong> In Chrome, visit chrome://inspect/#service-workers and click on the "inspect" link below the registered service worker to view logging statements for the various actions the <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/selective-caching/service-worker.js">service-worker.js</a> script is performing.</p>
-</div>
+> **Note :** In Chrome, visit chrome://inspect/#service-workers and click on the "inspect" link below the registered service worker to view logging statements for the various actions the [service-worker.js](https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/selective-caching/service-worker.js) script is performing.
 
-<pre class="brush: js">var CACHE_VERSION = 1;
+```js
+var CACHE_VERSION = 1;
 
 // Shorthand identifier mapped to specific versioned cache.
 var CURRENT_CACHES = {
@@ -116,39 +107,27 @@ self.addEventListener('fetch', function(event) {
       });
     })
   );
-});</pre>
-
-<h3 id="Storing_cookies_in_Caches">Storing cookies in Caches</h3>
-
-<p>L'<a href="/fr/docs/Web/API/Fetch_API">API Fetch</a> exige que les en-têtes {{httpheader("Set-Cookie")}} soient supprimés avant de renvoyer un objet {{domxref("Response")}} à partir de {{domxref("WindowOrWorkerGlobalScope", "fetch()")}}. Ainsi, une réponse stockée dans un cache ne contiendra pas d'en-têtes.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Service Workers', '#cache', 'Cache')}}</td>
-   <td>{{Spec2('Service Workers')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Cache")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Utiliser les Service Workers</a></li>
- <li><a href="https://github.com/mdn/sw-test">Code d'exemple basique de Service workers</a></li>
- <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Le ServiceWorker est prêt ?</a></li>
- <li>{{jsxref("Promise" , "Promesse" )}}</li>
- <li><a href="/fr/docs/Web/API/Web_Workers_API/Utilisation_des_web_workers">Utilisation des Web Workers</a></li>
-</ul>
+});
+```
+
+### Storing cookies in Caches
+
+L'[API Fetch](/fr/docs/Web/API/Fetch_API) exige que les en-têtes {{httpheader("Set-Cookie")}} soient supprimés avant de renvoyer un objet {{domxref("Response")}} à partir de {{domxref("WindowOrWorkerGlobalScope", "fetch()")}}. Ainsi, une réponse stockée dans un cache ne contiendra pas d'en-têtes.
+
+## Spécifications
+
+| Spécification                                                        | Statut                               | Commentaire          |
+| -------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName('Service Workers', '#cache', 'Cache')}} | {{Spec2('Service Workers')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Cache")}}
+
+## Voir aussi
+
+- [Utiliser les Service Workers](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers)
+- [Code d'exemple basique de Service workers](https://github.com/mdn/sw-test)
+- [Le ServiceWorker est prêt ?](https://jakearchibald.github.io/isserviceworkerready/)
+- {{jsxref("Promise" , "Promesse" )}}
+- [Utilisation des Web Workers](/fr/docs/Web/API/Web_Workers_API/Utilisation_des_web_workers)
diff --git a/files/fr/web/api/cache/keys/index.md b/files/fr/web/api/cache/keys/index.md
index faabe1581d..617e1aa4e7 100644
--- a/files/fr/web/api/cache/keys/index.md
+++ b/files/fr/web/api/cache/keys/index.md
@@ -12,78 +12,63 @@ tags:
   - keys
 translation_of: Web/API/Cache/keys
 ---
-<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+{{APIRef("Service Workers API")}}{{SeeCompatTable}}
 
-<p>La méthode <strong><code>keys()</code></strong> de l'interface {{domxref("Cache")}} retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau de clé de {{domxref("Cache")}}.</p>
+La méthode **`keys()`** de l'interface {{domxref("Cache")}} retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau de clé de {{domxref("Cache")}}.
 
-<p>Les requêtes sont retournées dans le même ordre que l'ordre d'insertion.</p>
+Les requêtes sont retournées dans le même ordre que l'ordre d'insertion.
 
-<div class="note">
-<p><strong>Note :</strong> Les requêtes avec des URLs déjà présentes mais des headers différents peuvent être retournées si leurs réponses comportent le header <code>VARY</code>.</p>
-</div>
+> **Note :** Les requêtes avec des URLs déjà présentes mais des headers différents peuvent être retournées si leurs réponses comportent le header `VARY`.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">cache.keys(request,{options}).then(function(response) {
+```js
+cache.keys(request,{options}).then(function(response) {
   // fait quelque chose avec votre tableau de réponses
 });
-</pre>
+```
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt>request {{optional_inline}}</dt>
- <dd>La {{domxref("Request", "Requête")}} à retourner, si une clé en particulier est désirée.</dd>
- <dt>options {{optional_inline}}</dt>
- <dd><p>Un objet dont les paramètres contrôlent comment le matching est effectué lors de l'opération <code>keys</code>. Les options disponibles sont :</p>
- <ul>
-  <li><code>ignoreSearch</code>: Un {{domxref("Boolean")}} qui spécifie si le matching doit ignorer ou non la query string dans l'url.  Si mis à <code>true</code>, la partie <code>?value=bar</code> de l'url <code>http://foo.com/?value=bar</code> sera ignorée lors du matching. Est à <code>false</code> par défaut.</li>
-  <li><code>ignoreMethod</code>: Un {{domxref("Boolean")}} qui, quand mis à <code>true</code>, empêche les opérations de matching de valider la méthode <code>HTTP</code> de la {{domxref("Request", "Requête")}} (en temps normal, seules <code>GET</code> et <code>HEAD</code> sont autorisées). Est à  <code>false</code> par défaut.</li>
-  <li><code>ignoreVary</code>: Un {{domxref("Boolean")}} qui, quand mis à <code>true,</code> indique à l'opération de matching de ne pas effectuer le matching <code>VARY</code> des header.  En d'autres termes, si l'URL correspond, un match sera obtenu peu importe que la {{domxref("Response", "Réponse")}} ait un header <code>VARY</code> ou non. Est à <code>false</code> par défaut.</li>
-  <li><code>cacheName</code>: Une {{domxref("DOMString")}} qui représente un cache spécifique où effectuer la recherche. A noter que cette option est ignorée par <code>Cache.keys()</code>.</li>
- </ul>
- </dd>
-</dl>
+- request {{optional_inline}}
+  - : La {{domxref("Request", "Requête")}} à retourner, si une clé en particulier est désirée.
+- options {{optional_inline}}
 
-<h3 id="Retour">Retour</h3>
+  - : Un objet dont les paramètres contrôlent comment le matching est effectué lors de l'opération `keys`. Les options disponibles sont :
 
-<p>Une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau de clé de {{domxref("Cache")}}.</p>
+    - `ignoreSearch`: Un {{domxref("Boolean")}} qui spécifie si le matching doit ignorer ou non la query string dans l'url.  Si mis à `true`, la partie `?value=bar` de l'url `http://foo.com/?value=bar` sera ignorée lors du matching. Est à `false` par défaut.
+    - `ignoreMethod`: Un {{domxref("Boolean")}} qui, quand mis à `true`, empêche les opérations de matching de valider la méthode `HTTP` de la {{domxref("Request", "Requête")}} (en temps normal, seules `GET` et `HEAD` sont autorisées). Est à  `false` par défaut.
+    - `ignoreVary`: Un {{domxref("Boolean")}} qui, quand mis à `true,` indique à l'opération de matching de ne pas effectuer le matching `VARY` des header.  En d'autres termes, si l'URL correspond, un match sera obtenu peu importe que la {{domxref("Response", "Réponse")}} ait un header `VARY` ou non. Est à `false` par défaut.
+    - `cacheName`: Une {{domxref("DOMString")}} qui représente un cache spécifique où effectuer la recherche. A noter que cette option est ignorée par `Cache.keys()`.
 
-<h2 id="Exemples">Exemples</h2>
+### Retour
 
-<pre class="brush: js">caches.open('v1').then(function(cache) {
+Une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau de clé de {{domxref("Cache")}}.
+
+## Exemples
+
+```js
+caches.open('v1').then(function(cache) {
   cache.keys().then(function(keys) {
     keys.forEach(function(request, index, array) {
       cache.delete(request);
     });
   });
-})</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Service Workers', '#dom-cache-keys', 'Cache: keys')}}</td>
-   <td>{{Spec2('Service Workers')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilités_des_navigateurs">Compatibilités des navigateurs</h2>
-
-<p>{{Compat("api.Cache.keys")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Utiliser les Service Workers</a></li>
- <li>{{domxref("Cache")}}</li>
- <li>{{domxref("WorkerGlobalScope.caches")}}</li>
-</ul>
+})
+```
+
+## Spécifications
+
+| Spécification                                                                            | Statut                               | Commentaire          |
+| ---------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName('Service Workers', '#dom-cache-keys', 'Cache: keys')}} | {{Spec2('Service Workers')}} | Définition initiale. |
+
+## Compatibilités des navigateurs
+
+{{Compat("api.Cache.keys")}}
+
+## Voir aussi
+
+- [Utiliser les Service Workers](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers)
+- {{domxref("Cache")}}
+- {{domxref("WorkerGlobalScope.caches")}}
diff --git a/files/fr/web/api/cache/match/index.md b/files/fr/web/api/cache/match/index.md
index 7867ba79a6..592ec9f804 100644
--- a/files/fr/web/api/cache/match/index.md
+++ b/files/fr/web/api/cache/match/index.md
@@ -13,51 +13,48 @@ tags:
   - match
 translation_of: Web/API/Cache/match
 ---
-<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+{{APIRef("Service Workers API")}}{{SeeCompatTable}}
 
-<p>La méthode <strong><code>match()</code></strong> de l'interface {{domxref("Cache")}} retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en une {{domxref("Response", "Réponse")}} associée à la première requête qui match dans l'objet {{domxref("Cache")}}. Si aucune requête n'est trouvée, la {{jsxref("Promise", "Promesse")}} est résolue en {{jsxref("undefined")}}.</p>
+La méthode **`match()`** de l'interface {{domxref("Cache")}} retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en une {{domxref("Response", "Réponse")}} associée à la première requête qui match dans l'objet {{domxref("Cache")}}. Si aucune requête n'est trouvée, la {{jsxref("Promise", "Promesse")}} est résolue en {{jsxref("undefined")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">cache.match(request,{options}).then(function(response) {
+```js
+cache.match(request,{options}).then(function(response) {
   // faire quelque chose avec la réponse
 });
-</pre>
+```
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt>request</dt>
- <dd>La {{domxref("Request")}} à trouver dans le {{domxref("Cache")}}.</dd>
- <dt>options {{optional_inline}}</dt>
- <dd>Un objet qui définit des options pour l'opération de <code>match</code>. Les options disponibles sont les suivantes :
- <ul>
-  <li><code>ignoreSearch</code>: Un {{domxref("Boolean")}} qui spécifie si le matching doit ignorer ou non la query string dans l'url.  Si mis à <code>true</code>, la partie <code>?value=bar</code> de l'url <code>http://foo.com/?value=bar</code> sera ignorée lors du matching. Est à <code>false</code> par défaut.</li>
-  <li><code>ignoreMethod</code>: Un {{domxref("Boolean")}} qui, quand mis à <code>true</code>, empêche les opérations de matching de valider la méthode <code>HTTP</code> de la {{domxref("Request", "Requête")}} (en temps normal, seules <code>GET</code> et <code>HEAD</code> sont autorisées.) Est à  <code>false</code> par défaut.</li>
-  <li><code>ignoreVary</code>: Un {{domxref("Boolean")}} qui, quand mis à <code>true,</code> indique à l'opération de matching de ne pas effectuer le matching <code>VARY</code> des header.  En d'autres termes, si l'URL correspond, un match sera obtenu peu importe que la {{domxref("Response", "Réponse")}} ait un header <code>VARY</code> ou non. Est à <code>false</code> par défaut.</li>
- </ul>
- </dd>
-</dl>
+- request
+  - : La {{domxref("Request")}} à trouver dans le {{domxref("Cache")}}.
+- options {{optional_inline}}
 
-<h3 id="Retour">Retour</h3>
+  - : Un objet qui définit des options pour l'opération de `match`. Les options disponibles sont les suivantes :
 
-<p>Une {{jsxref("Promise", "Promesse")}} qui est résolue en la première {{domxref("Response", "Réponse")}} qui match la requête, ou en {{jsxref("undefined")}} si aucune requête n'est trouvée.</p>
+    - `ignoreSearch`: Un {{domxref("Boolean")}} qui spécifie si le matching doit ignorer ou non la query string dans l'url.  Si mis à `true`, la partie `?value=bar` de l'url `http://foo.com/?value=bar` sera ignorée lors du matching. Est à `false` par défaut.
+    - `ignoreMethod`: Un {{domxref("Boolean")}} qui, quand mis à `true`, empêche les opérations de matching de valider la méthode `HTTP` de la {{domxref("Request", "Requête")}} (en temps normal, seules `GET` et `HEAD` sont autorisées.) Est à  `false` par défaut.
+    - `ignoreVary`: Un {{domxref("Boolean")}} qui, quand mis à `true,` indique à l'opération de matching de ne pas effectuer le matching `VARY` des header.  En d'autres termes, si l'URL correspond, un match sera obtenu peu importe que la {{domxref("Response", "Réponse")}} ait un header `VARY` ou non. Est à `false` par défaut.
 
-<div class="note">
-<p><strong>Note :</strong> <code>Cache.match()</code> est quasiment identique à {{domxref("Cache.matchAll()")}}, si ce n'est qu'elle est résolue en <code>response[0]</code> (la première réponse qui matche) plutôt que <code>response[]</code> (un tableau de toutes les réponses qui matchent).</p>
-</div>
+### Retour
 
-<h2 id="Exemples">Exemples</h2>
+Une {{jsxref("Promise", "Promesse")}} qui est résolue en la première {{domxref("Response", "Réponse")}} qui match la requête, ou en {{jsxref("undefined")}} si aucune requête n'est trouvée.
 
-<p>Cet exemple est extrait de l'exemple <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/custom-offline-page/service-worker.js">Page hors ligne custom</a> (<a href="https://googlechrome.github.io/samples/service-worker/custom-offline-page/index.html">demo</a>).</p>
+> **Note :** `Cache.match()` est quasiment identique à {{domxref("Cache.matchAll()")}}, si ce n'est qu'elle est résolue en `response[0]` (la première réponse qui matche) plutôt que `response[]` (un tableau de toutes les réponses qui matchent).
 
-<p>L'exemple suivant se sert d'un cache pour fournir les données demandées même quand une requête échoue. Une clause <code>catch()</code> est déclenchée quand l'appel à <code>fetch()</code> lève une exception. A l'intérieur de la clause <code>catch()</code>, <code>match()</code> est utilisée to pour retourner la réponse appropriée.</p>
+## Exemples
 
-<p>Dans cet exemple, nous avons décidé que seul les documents HTML récupérés via le verbe HTTP GET seront mis en cache. Si notre condition <code>if()</code> est false, le gestionnaire fetch n'intercepte pas la requête. Si d'autres gestionnaires fetch sont enregistrés, ils ont une occasion d'appeler <code>event.respondWith()</code>. Si aucun gestionnaire fetch ne décide d'appeler <code>event.respondWith()</code>, la requête sera gérée par le navigateur comme si les service workers n'avaient pas existé. Si <code>fetch()</code> retourne une réponse HTTP valide avec un code réponse dans les 4xx ou 5xx, la clause <code>catch()</code> ne sera PAS appelée. </p>
+Cet exemple est extrait de l'exemple [Page hors ligne custom](https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/custom-offline-page/service-worker.js) ([demo](https://googlechrome.github.io/samples/service-worker/custom-offline-page/index.html)).
 
-<pre class="brush: js">self.addEventListener('fetch', function(event) {
+L'exemple suivant se sert d'un cache pour fournir les données demandées même quand une requête échoue. Une clause `catch()` est déclenchée quand l'appel à `fetch()` lève une exception. A l'intérieur de la clause `catch()`, `match()` est utilisée to pour retourner la réponse appropriée.
+
+Dans cet exemple, nous avons décidé que seul les documents HTML récupérés via le verbe HTTP GET seront mis en cache. Si notre condition `if()` est false, le gestionnaire fetch n'intercepte pas la requête. Si d'autres gestionnaires fetch sont enregistrés, ils ont une occasion d'appeler `event.respondWith()`. Si aucun gestionnaire fetch ne décide d'appeler `event.respondWith()`, la requête sera gérée par le navigateur comme si les service workers n'avaient pas existé. Si `fetch()` retourne une réponse HTTP valide avec un code réponse dans les 4xx ou 5xx, la clause `catch()` ne sera PAS appelée.
+
+```js
+self.addEventListener('fetch', function(event) {
   // We only want to call event.respondWith() if this is a GET request for an HTML document.
-  if (event.request.method === 'GET' &amp;&amp;
+  if (event.request.method === 'GET' &&
       event.request.headers.get('accept').indexOf('text/html') !== -1) {
     console.log('Handling fetch event for', event.request.url);
     event.respondWith(
@@ -69,33 +66,21 @@ translation_of: Web/API/Cache/match
       })
     );
   }
-});</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Service Workers', '#dom-cache-match', 'Cache match')}}</td>
-   <td>{{Spec2('Service Workers')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilités_des_navigateurs">Compatibilités des navigateurs</h2>
-
-<p>{{Compat("api.Cache.match")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Utiliser les Service Workers</a></li>
- <li>{{domxref("Cache")}}</li>
- <li>{{domxref("WorkerGlobalScope.caches")}}</li>
-</ul>
+});
+```
+
+## Spécifications
+
+| Specification                                                                            | Statut                               | Commentaire          |
+| ---------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName('Service Workers', '#dom-cache-match', 'Cache match')}} | {{Spec2('Service Workers')}} | Définition initiale. |
+
+## Compatibilités des navigateurs
+
+{{Compat("api.Cache.match")}}
+
+## Voir aussi
+
+- [Utiliser les Service Workers](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers)
+- {{domxref("Cache")}}
+- {{domxref("WorkerGlobalScope.caches")}}
diff --git a/files/fr/web/api/cache/matchall/index.md b/files/fr/web/api/cache/matchall/index.md
index 86d1dad2bf..94f271b928 100644
--- a/files/fr/web/api/cache/matchall/index.md
+++ b/files/fr/web/api/cache/matchall/index.md
@@ -13,75 +13,60 @@ tags:
   - matchAll
 translation_of: Web/API/Cache/matchAll
 ---
-<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+{{APIRef("Service Workers API")}}{{SeeCompatTable}}
 
-<p>La méthode <strong><code>matchAll()</code></strong> de l'interface {{domxref("Cache")}} retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau de toutes les requêtes qui matchent dans l'objet {{domxref("Cache")}}.</p>
+La méthode **`matchAll()`** de l'interface {{domxref("Cache")}} retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau de toutes les requêtes qui matchent dans l'objet {{domxref("Cache")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">cache.matchAll(request,{options}).then(function(response) {
+```js
+cache.matchAll(request,{options}).then(function(response) {
   // faire quelque chose avec le tableau des réponses
 });
-</pre>
+```
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt>request</dt>
- <dd>La {{domxref("Request", "Requête")}} à trouver dans le {{domxref("Cache")}}.</dd>
- <dt>options {{optional_inline}}</dt>
- <dd><p>Un objet d'options vous permettant de définir des options de contrôle spécifiques pour la correspondance effectuée. Les options disponibles sont les suivantes :</p>
- <ul>
-  <li><code>ignoreSearch</code>: Un {{domxref("Boolean")}} qui spécifie si le matching doit ignorer ou non la query string dans l'url.  Si mis à <code>true</code>, la partie <code>?value=bar</code> de l'url <code>http://foo.com/?value=bar</code> sera ignorée lors du matching. Est à <code>false</code> par défaut.</li>
-  <li><code>ignoreMethod</code>: Un {{domxref("Boolean")}} qui, quand mis à <code>true</code>, empêche les opérations de matching de valider la méthode <code>HTTP</code> de la {{domxref("Request", "Requête")}} (en temps normal, seules <code>GET</code> et <code>HEAD</code> sont autorisées.) Est à  <code>false</code> par défaut.</li>
-  <li><code>ignoreVary</code>: Un {{domxref("Boolean")}} qui, quand mis à <code>true,</code> indique à l'opération de matching de ne pas effectuer le matching <code>VARY</code> des header.  En d'autres termes, si l'URL correspond, un match sera obtenu peu importe que la {{domxref("Response", "Réponse")}} ait un header <code>VARY</code> ou non. Est à <code>false</code> par défaut.</li>
- </ul>
- </dd>
-</dl>
+- request
+  - : La {{domxref("Request", "Requête")}} à trouver dans le {{domxref("Cache")}}.
+- options {{optional_inline}}
 
-<h3 id="Retour">Retour</h3>
+  - : Un objet d'options vous permettant de définir des options de contrôle spécifiques pour la correspondance effectuée. Les options disponibles sont les suivantes :
 
-<p>Une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau de toutes les requêtes qui matchent dans l'objet {{domxref("Cache")}}.</p>
+    - `ignoreSearch`: Un {{domxref("Boolean")}} qui spécifie si le matching doit ignorer ou non la query string dans l'url.  Si mis à `true`, la partie `?value=bar` de l'url `http://foo.com/?value=bar` sera ignorée lors du matching. Est à `false` par défaut.
+    - `ignoreMethod`: Un {{domxref("Boolean")}} qui, quand mis à `true`, empêche les opérations de matching de valider la méthode `HTTP` de la {{domxref("Request", "Requête")}} (en temps normal, seules `GET` et `HEAD` sont autorisées.) Est à  `false` par défaut.
+    - `ignoreVary`: Un {{domxref("Boolean")}} qui, quand mis à `true,` indique à l'opération de matching de ne pas effectuer le matching `VARY` des header.  En d'autres termes, si l'URL correspond, un match sera obtenu peu importe que la {{domxref("Response", "Réponse")}} ait un header `VARY` ou non. Est à `false` par défaut.
 
-<div class="note">
-<p><strong>Note :</strong> {{domxref("Cache.match()")}} est quasiment identique à <a href="/fr/docs/Web/API/Cache/matchAll"><code>Cache.matchAll()</code></a>, si ce n'est qu'elle est résolue en <code>response[0]</code> (la première réponse qui matche) plutôt que <code>response[]</code> (un tableau de toutes les réponses qui matchent).</p>
-</div>
+### Retour
 
-<h2 id="Exemples">Exemples</h2>
+Une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau de toutes les requêtes qui matchent dans l'objet {{domxref("Cache")}}.
 
-<pre class="brush: js">caches.open('v1').then(function(cache) {
+> **Note :** {{domxref("Cache.match()")}} est quasiment identique à [`Cache.matchAll()`](/fr/docs/Web/API/Cache/matchAll), si ce n'est qu'elle est résolue en `response[0]` (la première réponse qui matche) plutôt que `response[]` (un tableau de toutes les réponses qui matchent).
+
+## Exemples
+
+```js
+caches.open('v1').then(function(cache) {
   cache.matchAll('/images/').then(function(response) {
     response.forEach(function(element, index, array) {
       cache.delete(element);
     });
   });
-})</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Service Workers', '#dom-cache-matchall', 'Cache: matchAll')}}</td>
-   <td>{{Spec2('Service Workers')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilités_des_navigateurs">Compatibilités des navigateurs</h2>
-
-<p>{{Compat("api.Cache.matchAll")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Utiliser les Service Workers</a></li>
- <li>{{domxref("Cache")}}</li>
- <li>{{domxref("WindowOrWorkerGlobalScope.caches")}}</li>
-</ul>
+})
+```
+
+## Spécifications
+
+| Spécification                                                                                    | Statut                               | Commentaire          |
+| ------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- |
+| {{SpecName('Service Workers', '#dom-cache-matchall', 'Cache: matchAll')}} | {{Spec2('Service Workers')}} | Définition initiale. |
+
+## Compatibilités des navigateurs
+
+{{Compat("api.Cache.matchAll")}}
+
+## Voir aussi
+
+- [Utiliser les Service Workers](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers)
+- {{domxref("Cache")}}
+- {{domxref("WindowOrWorkerGlobalScope.caches")}}
diff --git a/files/fr/web/api/cache/put/index.md b/files/fr/web/api/cache/put/index.md
index b8a7f9f5cd..d99f8d8bb7 100644
--- a/files/fr/web/api/cache/put/index.md
+++ b/files/fr/web/api/cache/put/index.md
@@ -13,66 +13,58 @@ tags:
   - put
 translation_of: Web/API/Cache/put
 ---
-<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+{{APIRef("Service Workers API")}}{{SeeCompatTable}}
 
-<p>La méthode <strong><code>put()</code></strong> de l'interface {{domxref("Cache")}} permet d'ajouter des paires clé/valeur à l'objet {{domxref("Cache")}} en cours.</p>
+La méthode **`put()`** de l'interface {{domxref("Cache")}} permet d'ajouter des paires clé/valeur à l'objet {{domxref("Cache")}} en cours.
 
-<p>Souvent, le comportement voulu est juste de {{domxref("WindowOrWorkerGlobalScope.fetch","fetch()")}} une ou plusieurs requête, et d'ajouter les résultats directement dans le cache. Dans ce type de cas, il est plus judicieux d'utiliser  {{domxref("Cache.add","Cache.add()")}}/{{domxref("Cache.addAll","Cache.addAll()")}} , étant donné que ces méthodes sont des raccourcis pour une ou plusieurs de ces opérations :</p>
+Souvent, le comportement voulu est juste de {{domxref("WindowOrWorkerGlobalScope.fetch","fetch()")}} une ou plusieurs requête, et d'ajouter les résultats directement dans le cache. Dans ce type de cas, il est plus judicieux d'utiliser  {{domxref("Cache.add","Cache.add()")}}/{{domxref("Cache.addAll","Cache.addAll()")}} , étant donné que ces méthodes sont des raccourcis pour une ou plusieurs de ces opérations :
 
-<pre class="brush: js">fetch(url).then(function(response) {
+```js
+fetch(url).then(function(response) {
   if (!response.ok) {
     throw new TypeError('Bad response status');
   }
   return cache.put(url, response);
-})</pre>
+})
+```
 
-<div class="note">
-<p><strong>Note :</strong> <code>put()</code> écrasera toute paire clé/valeur précedemment stockée en cache et qui correspond à la requête.</p>
-</div>
+> **Note :** `put()` écrasera toute paire clé/valeur précedemment stockée en cache et qui correspond à la requête.
 
-<div class="note">
-<p><strong>Note :</strong> Les implémentations initiales de Cache (à la fois dans Blink et Gecko) résolvent les promesses   {{domxref("Cache.add")}}, {{domxref("Cache.addAll")}}, et {{domxref("Cache.put")}} quand le corps de la réponse est entièrement écrit en stockage.  Les versions plus récentes des spécifications sont plus précises en déclarant que le navigateur peut résoudre ces promesses dès que l'entrée est enregistrée en base de donnée, même si le reste de la requête est encore en train d'arriver.</p>
-</div>
+> **Note :** Les implémentations initiales de Cache (à la fois dans Blink et Gecko) résolvent les promesses   {{domxref("Cache.add")}}, {{domxref("Cache.addAll")}}, et {{domxref("Cache.put")}} quand le corps de la réponse est entièrement écrit en stockage.  Les versions plus récentes des spécifications sont plus précises en déclarant que le navigateur peut résoudre ces promesses dès que l'entrée est enregistrée en base de donnée, même si le reste de la requête est encore en train d'arriver.
 
-<div class="note">
-<p><strong>Note :</strong> Depuis Chrome 46, l'API Cache ne stocke que les requêtes depuis des origines sécurisées, à savoir celles servies en HTTPS.</p>
-</div>
+> **Note :** Depuis Chrome 46, l'API Cache ne stocke que les requêtes depuis des origines sécurisées, à savoir celles servies en HTTPS.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">cache.put(request, response).then(function() {
+```js
+cache.put(request, response).then(function() {
   // la paire requête/réponse a été ajoutée au cache
 });
-</pre>
+```
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt>request</dt>
- <dd>La {{domxref("Request", "Requête")}} à ajouter au cache.</dd>
- <dt>response</dt>
- <dd>La {{domxref("Response", "Réponse")}} à associer à la requête.</dd>
-</dl>
+- request
+  - : La {{domxref("Request", "Requête")}} à ajouter au cache.
+- response
+  - : La {{domxref("Response", "Réponse")}} à associer à la requête.
 
-<h3 id="Retour">Retour</h3>
+### Retour
 
-<p>Une {{jsxref("Promise", "Promesse")}} est retournée avec void.</p>
+Une {{jsxref("Promise", "Promesse")}} est retournée avec void.
 
-<div class="note">
-<p><strong>Note :</strong> La promesse sera rompue avec un <code>TypeError</code> si le schéma d'URL n'est pas <code>http</code> ou <code>https</code>.</p>
-</div>
+> **Note :** La promesse sera rompue avec un `TypeError` si le schéma d'URL n'est pas `http` ou `https`.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Cet extrait de code est tiré du MDN <a href="https://github.com/mdn/sw-test/">sw-test example</a> (lancez <a href="https://mdn.github.io/sw-test/">sw-test dans votre navigateur</a>). On attend le déclenchement d'un {{domxref("FetchEvent")}}, puis l'on va retourner une réponse spéciale d'après la procédure suivante :</p>
+Cet extrait de code est tiré du MDN [sw-test example](https://github.com/mdn/sw-test/) (lancez [sw-test dans votre navigateur](https://mdn.github.io/sw-test/)). On attend le déclenchement d'un {{domxref("FetchEvent")}}, puis l'on va retourner une réponse spéciale d'après la procédure suivante :
 
-<ol>
- <li>Vérifier si un match pour la requête a été trouvé dans le {{domxref("CacheStorage")}} grâce à  {{domxref("CacheStorage.match","CacheStorage.match()")}} . Si oui, servir cette réponse.</li>
- <li>Sinon, ouvrir le cache <code>v1</code> avec <code>open()</code>, insérer la requête réseau par défaut dans le cache via {{domxref("Cache.put","Cache.put()")}} , et retourner un clone de cette requête avec <code>return response.clone()</code> — nécessaire car <code>put()</code> détruit le corps de la réponse.</li>
- <li>En cas d'échec (e.g., car le réseau est inaccessible), retourner une réponse de secours.</li>
-</ol>
+1.  Vérifier si un match pour la requête a été trouvé dans le {{domxref("CacheStorage")}} grâce à  {{domxref("CacheStorage.match","CacheStorage.match()")}} . Si oui, servir cette réponse.
+2.  Sinon, ouvrir le cache `v1` avec `open()`, insérer la requête réseau par défaut dans le cache via {{domxref("Cache.put","Cache.put()")}} , et retourner un clone de cette requête avec `return response.clone()` — nécessaire car `put()` détruit le corps de la réponse.
+3.  En cas d'échec (e.g., car le réseau est inaccessible), retourner une réponse de secours.
 
-<pre class="brush: js">var response;
+```js
+var response;
 var cachedResponse = caches.match(event.request).catch(function() {
   return fetch(event.request);
 }).then(function(r) {
@@ -83,33 +75,21 @@ var cachedResponse = caches.match(event.request).catch(function() {
   return response.clone();
 }).catch(function() {
   return caches.match('/sw-test/gallery/myLittleVader.jpg');
-});</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Service Workers', '#dom-cache-put', 'Cache: put')}}</td>
-   <td>{{Spec2('Service Workers')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Cache.put")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Utiliser les Service Workers</a></li>
- <li>{{domxref("Cache")}}</li>
- <li>{{domxref("WindowOrWorkerGlobalScope.caches")}}</li>
-</ul>
+});
+```
+
+## Spécifications
+
+| Spécification                                                                        | Statut                               | Commentaire          |
+| ------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- |
+| {{SpecName('Service Workers', '#dom-cache-put', 'Cache: put')}} | {{Spec2('Service Workers')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Cache.put")}}
+
+## Voir aussi
+
+- [Utiliser les Service Workers](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers)
+- {{domxref("Cache")}}
+- {{domxref("WindowOrWorkerGlobalScope.caches")}}
diff --git a/files/fr/web/api/caches/index.md b/files/fr/web/api/caches/index.md
index b5b57df7ee..abfb9936b2 100644
--- a/files/fr/web/api/caches/index.md
+++ b/files/fr/web/api/caches/index.md
@@ -4,24 +4,24 @@ slug: Web/API/caches
 translation_of: Web/API/WindowOrWorkerGlobalScope/caches
 original_slug: Web/API/WindowOrWorkerGlobalScope/caches
 ---
-<p>{{APIRef()}}{{SeeCompatTable}}</p>
+{{APIRef()}}{{SeeCompatTable}}
 
-<p>La propriété en lecture seule  <code><strong>caches</strong></code> de l'interface {{domxref("WindowOrWorkerGlobalScope")}} retourne l'objet {{domxref("CacheStorage")}} associé au contexte actuel. Cet objet permet de stocker des ressources pour une utilisation hors-ligne et de générer des réponses personnalisées à des requêtes.</p>
+La propriété en lecture seule  **`caches`** de l'interface {{domxref("WindowOrWorkerGlobalScope")}} retourne l'objet {{domxref("CacheStorage")}} associé au contexte actuel. Cet objet permet de stocker des ressources pour une utilisation hors-ligne et de générer des réponses personnalisées à des requêtes.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var <em>myCacheStorage</em> = self.caches; // ou simplement caches
-</pre>
+    var myCacheStorage = self.caches; // ou simplement caches
 
-<h3 id="Value">Value</h3>
+### Value
 
-<p>Un objet de type {{domxref("CacheStorage")}}.</p>
+Un objet de type {{domxref("CacheStorage")}}.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>L'exemple suivant montre comment mettre en cache un contexte de <a href="/en-US/docs/Web/API/Service_Worker_API">service worker</a> pour stocker des ressources et les utiliser hors-ligne.</p>
+L'exemple suivant montre comment mettre en cache un contexte de [service worker](/en-US/docs/Web/API/Service_Worker_API) pour stocker des ressources et les utiliser hors-ligne.
 
-<pre class="brush: js">this.addEventListener('install', function(event) {
+```js
+this.addEventListener('install', function(event) {
   event.waitUntil(
     caches.open('v1').then(function(cache) {
       return cache.addAll([
@@ -38,43 +38,45 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/caches
       ]);
     })
   );
-});</pre>
+});
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Service Workers', '#self-caches', 'caches')}}</td>
-   <td>{{Spec2('Service Workers')}}</td>
-   <td>
-    <p>Défini dans un <code>WindowOrWorkerGlobalScope</code> partiel dans la nouvelle spec.</p>
-   </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('Service Workers')}}</td>
-   <td>{{Spec2('Service Workers')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="col">Spécification</th>
+      <th scope="col">Status</th>
+      <th scope="col">Comment</th>
+    </tr>
+    <tr>
+      <td>
+        {{SpecName('Service Workers', '#self-caches', 'caches')}}
+      </td>
+      <td>{{Spec2('Service Workers')}}</td>
+      <td>
+        <p>
+          Défini dans un <code>WindowOrWorkerGlobalScope</code> partiel dans la
+          nouvelle spec.
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td>{{SpecName('Service Workers')}}</td>
+      <td>{{Spec2('Service Workers')}}</td>
+      <td>Définition initiale.</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
+{{Compat("api.WindowOrWorkerGlobalScope.caches")}}
 
+## Voir aussi
 
-<p>{{Compat("api.WindowOrWorkerGlobalScope.caches")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/API/ServiceWorker_API">Service Workers</a></li>
- <li><a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a></li>
- <li>{{domxref("CacheStorage")}}</li>
- <li>{{domxref("Cache")}}</li>
-</ul>
+- [Service Workers](/en-US/docs/Web/API/ServiceWorker_API)
+- [Web Workers](/en-US/docs/Web/API/Web_Workers_API)
+- {{domxref("CacheStorage")}}
+- {{domxref("Cache")}}
diff --git a/files/fr/web/api/cachestorage/delete/index.md b/files/fr/web/api/cachestorage/delete/index.md
index 6d088f5d7f..38318b5921 100644
--- a/files/fr/web/api/cachestorage/delete/index.md
+++ b/files/fr/web/api/cachestorage/delete/index.md
@@ -11,35 +11,33 @@ tags:
   - delete
 translation_of: Web/API/CacheStorage/delete
 ---
-<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+{{APIRef("Service Workers API")}}{{SeeCompatTable}}
 
-<p>La fonction <code><strong>delete</strong></code><strong><code>()</code></strong> de l'interface {{domxref("CacheStorage")}} trouve l'objet {{domxref("Cache")}} correspondant à un <code>cacheName</code>, et si trouvé, supprime l'objet {{domxref("Cache")}} et retourne une {{jsxref("Promise", "Promesse")}} qui renvoie <code>true</code>. Si aucun objet {{domxref("Cache")}} n'est trouvé, elle retourne <code>false</code>.</p>
+La fonction **`delete`\*\***`()`\*\* de l'interface {{domxref("CacheStorage")}} trouve l'objet {{domxref("Cache")}} correspondant à un `cacheName`, et si trouvé, supprime l'objet {{domxref("Cache")}} et retourne une {{jsxref("Promise", "Promesse")}} qui renvoie `true`. Si aucun objet {{domxref("Cache")}} n'est trouvé, elle retourne `false`.
 
-<p>Vous pouvez accéder à <code>CacheStorage</code> via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}.</p>
+Vous pouvez accéder à `CacheStorage` via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">caches.delete(<em>cacheName</em>).then(function(true) {
-  // le cache est maintenant supprimé
-});
-</pre>
+    caches.delete(cacheName).then(function(true) {
+      // le cache est maintenant supprimé
+    });
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt>cacheName</dt>
- <dd>Le nom du cache que vous souhaitez supprimer.</dd>
-</dl>
+- cacheName
+  - : Le nom du cache que vous souhaitez supprimer.
 
-<h3 id="Retour">Retour</h3>
+### Retour
 
-<p>Une {{jsxref("Promise", "Promesse")}} qui renvoie <code>true</code> si l'objet {{domxref("Cache")}} est trouvé et supprimé, <code>false</code> sinon.</p>
+Une {{jsxref("Promise", "Promesse")}} qui renvoie `true` si l'objet {{domxref("Cache")}} est trouvé et supprimé, `false` sinon.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans ce fragment de code, nous attendons un évènement, et bloquons avec un {{domxref("ExtendableEvent.waitUntil","waitUntil()")}}, qui nettoie les anciens, inutilisés, caches avant que le nouveau service worker soit activé. Nous avons ici une liste blanche contenant le nom du cache que nous voulons garder. Nous retournons les clés des caches dans l'objet {{domxref("CacheStorage")}} utilisant {{domxref("CacheStorage.keys")}}, pour ensuite vérifier que chaque clé est dans la liste blance. Sinon, nous la supprimons avec <code>delete().</code></p>
+Dans ce fragment de code, nous attendons un évènement, et bloquons avec un {{domxref("ExtendableEvent.waitUntil","waitUntil()")}}, qui nettoie les anciens, inutilisés, caches avant que le nouveau service worker soit activé. Nous avons ici une liste blanche contenant le nom du cache que nous voulons garder. Nous retournons les clés des caches dans l'objet {{domxref("CacheStorage")}} utilisant {{domxref("CacheStorage.keys")}}, pour ensuite vérifier que chaque clé est dans la liste blance. Sinon, nous la supprimons avec `delete().`
 
-<pre class="brush: js">this.addEventListener('activate', function(event) {
+```js
+this.addEventListener('activate', function(event) {
   var cacheWhitelist = ['v2'];
 
   event.waitUntil(
@@ -51,35 +49,21 @@ translation_of: Web/API/CacheStorage/delete
       }));
     })
   );
-});</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Service Workers', '#cache-storage-delete', 'CacheStorage: delete')}}</td>
-   <td>{{Spec2('Service Workers')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+});
+```
 
-<h2 id="Compatibilités_des_navigateurs">Compatibilités des navigateurs</h2>
+## Spécifications
 
+| Spécification                                                                                                | Statut                               | Commentaire          |
+| ------------------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- |
+| {{SpecName('Service Workers', '#cache-storage-delete', 'CacheStorage: delete')}} | {{Spec2('Service Workers')}} | Définition initiale. |
 
+## Compatibilités des navigateurs
 
-<p>{{Compat("api.CacheStorage.delete")}}</p>
+{{Compat("api.CacheStorage.delete")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Utiliser les Service Workers</a></li>
- <li>{{domxref("Cache")}}</li>
- <li>{{domxref("WindowOrWorkerGlobalScope.caches")}}</li>
-</ul>
+- [Utiliser les Service Workers](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers)
+- {{domxref("Cache")}}
+- {{domxref("WindowOrWorkerGlobalScope.caches")}}
diff --git a/files/fr/web/api/cachestorage/has/index.md b/files/fr/web/api/cachestorage/has/index.md
index 5b1b6a6ae0..ae799a0f03 100644
--- a/files/fr/web/api/cachestorage/has/index.md
+++ b/files/fr/web/api/cachestorage/has/index.md
@@ -12,69 +12,53 @@ tags:
   - has
 translation_of: Web/API/CacheStorage/has
 ---
-<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+{{APIRef("Service Workers API")}}{{SeeCompatTable}}
 
-<p>La méthode <strong><code>has()</code></strong> de l'interface {{domxref("CacheStorage")}} retourne une {{jsxref("Promise", "Promesse")}} qui renvoie <code>true</code> si un objet {{domxref("Cache")}} est égal au <code>cacheName</code>.</p>
+La méthode **`has()`** de l'interface {{domxref("CacheStorage")}} retourne une {{jsxref("Promise", "Promesse")}} qui renvoie `true` si un objet {{domxref("Cache")}} est égal au `cacheName`.
 
-<p>Vous pouvez accéder à <code>CacheStorage</code> via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}.</p>
+Vous pouvez accéder à `CacheStorage` via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">caches.has(<em>cacheName</em>).then(function(true) {
-  // le cache existe!
-});
-</pre>
+    caches.has(cacheName).then(function(true) {
+      // le cache existe!
+    });
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt>cacheName</dt>
- <dd>Un  {{domxref("DOMString")}} représentant le nom de l'objet {{domxref("Cache")}} que vous cherchez dans le {{domxref("CacheStorage")}}.</dd>
-</dl>
+- cacheName
+  - : Un  {{domxref("DOMString")}} représentant le nom de l'objet {{domxref("Cache")}} que vous cherchez dans le {{domxref("CacheStorage")}}.
 
-<h3 id="Retour">Retour</h3>
+### Retour
 
-<p>Une {{jsxref("Promise", "Promesse")}} qui renvoie <code>true</code> si le cache existe.</p>
+Une {{jsxref("Promise", "Promesse")}} qui renvoie `true` si le cache existe.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>L'exemple suivant vérifie qu'un cache nommé 'v1' exists. Si c'est le cas, nous lui ajoutons une liste d'assets. Si non (la promesse <code>has()</code> est rejetée) alors nous exécutons une sorte d'initialisation du cache.</p>
+L'exemple suivant vérifie qu'un cache nommé 'v1' exists. Si c'est le cas, nous lui ajoutons une liste d'assets. Si non (la promesse `has()` est rejetée) alors nous exécutons une sorte d'initialisation du cache.
 
-<pre class="brush: js">caches.has('v1').then(function() {
+```js
+caches.has('v1').then(function() {
   caches.open('v1').then(function(cache) {
       return cache.addAll(myAssets);
   });
 }).catch(function() {
   someCacheSetupfunction();
-});;</pre>
+});;
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Service Workers', '#cache-storage-has', 'CacheStorage: has')}}</td>
-   <td>{{Spec2('Service Workers')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                        | Statut                               | Commentaire          |
+| ---------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName('Service Workers', '#cache-storage-has', 'CacheStorage: has')}} | {{Spec2('Service Workers')}} | Définition initiale. |
 
-<h2 id="Compatibilités_des_navigateurs">Compatibilités des navigateurs</h2>
+## Compatibilités des navigateurs
 
+{{Compat("api.CacheStorage.has")}}
 
+## Voir aussi
 
-<p>{{Compat("api.CacheStorage.has")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Utiliser les Service Workers</a></li>
- <li>{{domxref("Cache")}}</li>
- <li>{{domxref("WorkerGlobalScope.caches")}}</li>
-</ul>
+- [Utiliser les Service Workers](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers)
+- {{domxref("Cache")}}
+- {{domxref("WorkerGlobalScope.caches")}}
diff --git a/files/fr/web/api/cachestorage/index.md b/files/fr/web/api/cachestorage/index.md
index 276393aa31..f91758952d 100644
--- a/files/fr/web/api/cachestorage/index.md
+++ b/files/fr/web/api/cachestorage/index.md
@@ -11,64 +11,55 @@ tags:
   - ServiceWorker
 translation_of: Web/API/CacheStorage
 ---
-<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+{{APIRef("Service Workers API")}}{{SeeCompatTable}}
 
-<p>L'interface <code>CacheStorage</code> représente le stockage des objets {{domxref("Cache")}}.</p>
+L'interface `CacheStorage` représente le stockage des objets {{domxref("Cache")}}.
 
-<p>L'interface :</p>
+L'interface :
 
-<ul>
- <li>Fournit un répertoire principal de tous les caches nommés qui peut être accessible par un {{domxref("ServiceWorker")}} ou un autre type de travailleur ou portée de {{domxref("window")}} (vous n'êtes pas limité à l'utiliser uniquement avec des Service Workers, même si la spécification {{SpecName("Service Workers")}} le définit).
-  <div class="note">
-    <p><strong>Note :</strong> <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=1026063">Chrome et Safari n'exposent que "CacheStorage" au contexte fenêtré sur HTTPS</a>. {{domxref("window.caches")}} sera indéfinie, à moins qu'un certificat SSL ne soit configuré.</p></div>
- </li>
- <li>Maintient une correspondance entre les noms des chaînes de caractères et les objets {{domxref("Cache")}} correspondants.</li>
-</ul>
+- Fournit un répertoire principal de tous les caches nommés qui peut être accessible par un {{domxref("ServiceWorker")}} ou un autre type de travailleur ou portée de {{domxref("window")}} (vous n'êtes pas limité à l'utiliser uniquement avec des Service Workers, même si la spécification {{SpecName("Service Workers")}} le définit).
 
-<p>Utilisez {{domxref("CacheStorage.open()")}} pour obtenir une instance {{domxref("Cache")}}.</p>
+  > **Note :** [Chrome et Safari n'exposent que "CacheStorage" au contexte fenêtré sur HTTPS](https://bugs.chromium.org/p/chromium/issues/detail?id=1026063). {{domxref("window.caches")}} sera indéfinie, à moins qu'un certificat SSL ne soit configuré.
 
-<p>Utilisez {{domxref("CacheStorage.match()")}} pour vérifier si une {{domxref("Request", "Requête")}} donnée est une clé dans l'un des objets {{domxref("Cache")}} que l'objet <code>CacheStorage</code> surveille.</p>
+- Maintient une correspondance entre les noms des chaînes de caractères et les objets {{domxref("Cache")}} correspondants.
 
-<p>Vous pouvez accéder à <code>CacheStorage</code> via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}.</p>
+Utilisez {{domxref("CacheStorage.open()")}} pour obtenir une instance {{domxref("Cache")}}.
 
-<div class="note">
-  <p><strong>Note :</strong> CacheStorage échouera systématiquement avec une <code>SecurityError</code> sur les domaines non certifiés (i.e. ceux qui n'utilisent pas HTTPS, bien que cette définition risque de devenir plus complexe dans le future). Pendant vos tests vous pouvez contourner ce comportement en cochant l'option "Enable Service Workers over HTTP (when toolbox is open)" dans les options Firefox Devtools / le menu gear.</p>
-</div>
+Utilisez {{domxref("CacheStorage.match()")}} pour vérifier si une {{domxref("Request", "Requête")}} donnée est une clé dans l'un des objets {{domxref("Cache")}} que l'objet `CacheStorage` surveille.
 
-<div class="note">
-  <p><strong>Note :</strong> {{domxref("CacheStorage.match()")}} est une méthode de convenance. Il est possible d'implémenter une fonctionnalité équivalente pour matcher une entrée de cache en appelant {{domxref("CacheStorage.open()")}}, puis en retournant {{domxref("CacheStorage.keys()")}}, et en matchant les entrées voulues avec {{domxref("CacheStorage.match()")}}.</p>
-</div>
+Vous pouvez accéder à `CacheStorage` via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}.
 
-<h2 id="Méthodes">Méthodes</h2>
+> **Note :** CacheStorage échouera systématiquement avec une `SecurityError` sur les domaines non certifiés (i.e. ceux qui n'utilisent pas HTTPS, bien que cette définition risque de devenir plus complexe dans le future). Pendant vos tests vous pouvez contourner ce comportement en cochant l'option "Enable Service Workers over HTTP (when toolbox is open)" dans les options Firefox Devtools / le menu gear.
 
-<dl>
- <dt>{{domxref("CacheStorage.match()")}} {{experimental_inline}}</dt>
- <dd>Cherche si une {{domxref("Request")}} donnée est la clé de n'importe lequel des objets {{domxref("Cache")}} maintenus par le {{domxref("CacheStorage")}}, et retourne une {{jsxref("Promise", "Promesse")}} résolue en cet objet {{domxref("Cache")}}.</dd>
- <dt>{{domxref("CacheStorage.has()")}} {{experimental_inline}}</dt>
- <dd>Retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en <code>true</code> si un objet {{domxref("Cache")}} qui correspond au <code>cacheName</code> existe.</dd>
- <dt>{{domxref("CacheStorage.open()")}} {{experimental_inline}}</dt>
- <dd>Retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en l'objet {{domxref("Cache")}} qui correspond au <code>cacheName</code> (si il n'existe pas, un nouveau cache est créé).</dd>
- <dt>{{domxref("CacheStorage.delete()")}} {{experimental_inline}}</dt>
- <dd>Trouve l'objet {{domxref("Cache")}} correspondant au <code>cacheName</code>, et si il est trouvé, supprime l'objet {{domxref("Cache")}} et retourne une {{jsxref("Promise", "Promesse")}} résolue à <code>true</code>. Si aucun objet {{domxref("Cache")}} n'est trouvé, la {{jsxref("Promise", "Promesse")}} est résolue à <code>false</code>.</dd>
- <dt>{{domxref("CacheStorage.keys()")}} {{experimental_inline}}</dt>
- <dd>Retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau qui contient toutes les chaînes correspondantes aux objets {{domxref("Cache")}} maintenus par le {{domxref("CacheStorage")}}. Cette méthode peut s'utiliser pour itérer sur une liste de tous les objets {{domxref("Cache")}}.</dd>
-</dl>
+> **Note :** {{domxref("CacheStorage.match()")}} est une méthode de convenance. Il est possible d'implémenter une fonctionnalité équivalente pour matcher une entrée de cache en appelant {{domxref("CacheStorage.open()")}}, puis en retournant {{domxref("CacheStorage.keys()")}}, et en matchant les entrées voulues avec {{domxref("CacheStorage.match()")}}.
 
-<h2 id="Exemples">Exemples</h2>
+## Méthodes
 
-<p>Cet extrait de code est tiré de l'<a href="https://github.com/mdn/sw-test/">exemple MDN sw-test</a> (lancer <a href="https://mdn.github.io/sw-test/">sw-test dans votre navigateur</a>). Ce service worker script attends le déclenchement d'un {{domxref("InstallEvent")}}, puis lance {{domxref("ExtendableEvent.waitUntil","waitUntil")}} pour gérer la phase d'installation de l'app. Cela consiste à appeler {{domxref("CacheStorage.open")}} pour créer un nouveau cache, puis {{domxref("Cache.addAll")}} pour y ajouter une série d'assets.</p>
+- {{domxref("CacheStorage.match()")}} {{experimental_inline}}
+  - : Cherche si une {{domxref("Request")}} donnée est la clé de n'importe lequel des objets {{domxref("Cache")}} maintenus par le {{domxref("CacheStorage")}}, et retourne une {{jsxref("Promise", "Promesse")}} résolue en cet objet {{domxref("Cache")}}.
+- {{domxref("CacheStorage.has()")}} {{experimental_inline}}
+  - : Retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en `true` si un objet {{domxref("Cache")}} qui correspond au `cacheName` existe.
+- {{domxref("CacheStorage.open()")}} {{experimental_inline}}
+  - : Retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en l'objet {{domxref("Cache")}} qui correspond au `cacheName` (si il n'existe pas, un nouveau cache est créé).
+- {{domxref("CacheStorage.delete()")}} {{experimental_inline}}
+  - : Trouve l'objet {{domxref("Cache")}} correspondant au `cacheName`, et si il est trouvé, supprime l'objet {{domxref("Cache")}} et retourne une {{jsxref("Promise", "Promesse")}} résolue à `true`. Si aucun objet {{domxref("Cache")}} n'est trouvé, la {{jsxref("Promise", "Promesse")}} est résolue à `false`.
+- {{domxref("CacheStorage.keys()")}} {{experimental_inline}}
+  - : Retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau qui contient toutes les chaînes correspondantes aux objets {{domxref("Cache")}} maintenus par le {{domxref("CacheStorage")}}. Cette méthode peut s'utiliser pour itérer sur une liste de tous les objets {{domxref("Cache")}}.
 
-<p>Dans le second bloc de code, on attends le déclenchement d'un {{domxref("FetchEvent")}}. On construit ensuite une réponse spéciale comme suit :</p>
+## Exemples
 
-<ol>
- <li>Vérifier si il y a un match pour la requête dans le CacheStorage. Le cas échéant, servir ça.</li>
- <li>Sinon, récupérer la requête sur le réseau, puis ouvrir le cache du premier bloc et y ajouter un clone de la requête grâce à {{domxref("Cache.put")}} (<code>cache.put(event.request, response.clone())</code>.)</li>
- <li>En cas d'échec (e.g. car le réseau est inaccessible), retourner une réponse par défaut.</li>
-</ol>
+Cet extrait de code est tiré de l'[exemple MDN sw-test](https://github.com/mdn/sw-test/) (lancer [sw-test dans votre navigateur](https://mdn.github.io/sw-test/)). Ce service worker script attends le déclenchement d'un {{domxref("InstallEvent")}}, puis lance {{domxref("ExtendableEvent.waitUntil","waitUntil")}} pour gérer la phase d'installation de l'app. Cela consiste à appeler {{domxref("CacheStorage.open")}} pour créer un nouveau cache, puis {{domxref("Cache.addAll")}} pour y ajouter une série d'assets.
 
-<p>Enfin, on retourne cette réponse en utilisant {{domxref("FetchEvent.respondWith")}}.</p>
+Dans le second bloc de code, on attends le déclenchement d'un {{domxref("FetchEvent")}}. On construit ensuite une réponse spéciale comme suit :
 
-<pre class="brush: js">this.addEventListener('install', function(event) {
+1.  Vérifier si il y a un match pour la requête dans le CacheStorage. Le cas échéant, servir ça.
+2.  Sinon, récupérer la requête sur le réseau, puis ouvrir le cache du premier bloc et y ajouter un clone de la requête grâce à {{domxref("Cache.put")}} (`cache.put(event.request, response.clone())`.)
+3.  En cas d'échec (e.g. car le réseau est inaccessible), retourner une réponse par défaut.
+
+Enfin, on retourne cette réponse en utilisant {{domxref("FetchEvent.respondWith")}}.
+
+```js
+this.addEventListener('install', function(event) {
   event.waitUntil(
     caches.open('v1').then(function(cache) {
       return cache.addAll([
@@ -109,11 +100,13 @@ self.addEventListener('fetch', function(event) {
       });
     }
   }));
-});</pre>
+});
+```
 
-<p>Cet extrait montre comment l'API peut être utilisée en dehors du contexte d'un Service Worker, et utilise l'opérateur "await" pour un code beaucoup plus lisible.</p>
+Cet extrait montre comment l'API peut être utilisée en dehors du contexte d'un Service Worker, et utilise l'opérateur "await" pour un code beaucoup plus lisible.
 
-<pre class="brush: js">// Essayer d'obtenir des données du cache, mais se rabattre sur la récupération en direct.
+```js
+// Essayer d'obtenir des données du cache, mais se rabattre sur la récupération en direct.
 async function getData() {
    const cacheVersion = 1;
    const cacheName    = `myapp-${ cacheVersion }`;
@@ -167,35 +160,21 @@ try {
    console.log( { data } );
 } catch ( error ) {
    console.error( { error } );
-}</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Service Workers', '#cache-storage', 'CacheStorage')}}</td>
-   <td>{{Spec2('Service Workers')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+}
+```
 
-<h2 id="Compatibilités_des_navigateurs">Compatibilités des navigateurs</h2>
+## Spécifications
 
+| Spécification                                                                            | Statut                               | Commentaire          |
+| ---------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName('Service Workers', '#cache-storage', 'CacheStorage')}} | {{Spec2('Service Workers')}} | Définition initiale. |
 
+## Compatibilités des navigateurs
 
-<p>{{Compat("api.CacheStorage")}}</p>
+{{Compat("api.CacheStorage")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Utilisation des Service Workers</a></li>
- <li>{{domxref("Cache")}}</li>
- <li>{{domxref("WindowOrWorkerGlobalScope.caches")}}</li>
-</ul>
+- [Utilisation des Service Workers](/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers)
+- {{domxref("Cache")}}
+- {{domxref("WindowOrWorkerGlobalScope.caches")}}
diff --git a/files/fr/web/api/cachestorage/keys/index.md b/files/fr/web/api/cachestorage/keys/index.md
index ed61c3716c..3f08fd71b7 100644
--- a/files/fr/web/api/cachestorage/keys/index.md
+++ b/files/fr/web/api/cachestorage/keys/index.md
@@ -12,32 +12,32 @@ tags:
   - keys
 translation_of: Web/API/CacheStorage/keys
 ---
-<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+{{APIRef("Service Workers API")}}{{SeeCompatTable}}
 
-<p>La méthode <code><strong>keys</strong></code><strong><code>()</code></strong> de l'interface {{domxref("CacheStorage")}} retourne une {{jsxref("Promise", "Promesse")}} qui renvoie une liste content les chaines de caractères correspondant à tous les noms des {{domxref("Cache")}} suivient par l'objet {{domxref("CacheStorage")}}. Utilisez cette méthode pour itérer sur une liste de tous les objets {{domxref("Cache")}}.</p>
+La méthode **`keys`\*\***`()`\*\* de l'interface {{domxref("CacheStorage")}} retourne une {{jsxref("Promise", "Promesse")}} qui renvoie une liste content les chaines de caractères correspondant à tous les noms des {{domxref("Cache")}} suivient par l'objet {{domxref("CacheStorage")}}. Utilisez cette méthode pour itérer sur une liste de tous les objets {{domxref("Cache")}}.
 
-<p>Vous pouvez accéder à <code>CacheStorage</code> via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}.</p>
+Vous pouvez accéder à `CacheStorage` via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">caches.keys().then(function(<em>keyList</em>) {
-  // faire quelque-chose avec votre keylist
-});
-</pre>
+    caches.keys().then(function(keyList) {
+      // faire quelque-chose avec votre keylist
+    });
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<p>Aucun.</p>
+Aucun.
 
-<h3 id="Retour">Retour</h3>
+### Retour
 
-<p>Une {{jsxref("Promise", "Promesse")}} qui retourne une liste de noms de {{domxref("Cache")}} contenus dans un objet {{domxref("CacheStorage")}}.</p>
+Une {{jsxref("Promise", "Promesse")}} qui retourne une liste de noms de {{domxref("Cache")}} contenus dans un objet {{domxref("CacheStorage")}}.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans ce fragment de code, nous attendons un évènement, et bloquons avec un {{domxref("ExtendableEvent.waitUntil","waitUntil()")}}, qui nettoie les anciens caches, inutilisés, avant que le nouveau service worker soit activé. Nous avons ici une liste blanche contenant le nom du cache que nous voulons garder. Nous retournons les clés des caches dans l'objet {{domxref("CacheStorage")}} utilisant {{domxref("CacheStorage.keys")}}, pour ensuite vérifier que chaque clé est dans la liste blance. Sinon, nous la supprimons avec <code>delete().</code></p>
+Dans ce fragment de code, nous attendons un évènement, et bloquons avec un {{domxref("ExtendableEvent.waitUntil","waitUntil()")}}, qui nettoie les anciens caches, inutilisés, avant que le nouveau service worker soit activé. Nous avons ici une liste blanche contenant le nom du cache que nous voulons garder. Nous retournons les clés des caches dans l'objet {{domxref("CacheStorage")}} utilisant {{domxref("CacheStorage.keys")}}, pour ensuite vérifier que chaque clé est dans la liste blance. Sinon, nous la supprimons avec `delete().`
 
-<pre class="brush: js">this.addEventListener('activate', function(event) {
+```js
+this.addEventListener('activate', function(event) {
   var cacheWhitelist = ['v2'];
 
   event.waitUntil(
@@ -49,35 +49,21 @@ translation_of: Web/API/CacheStorage/keys
       });
     })
   );
-});</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Service Workers', '#dom-cachestorage-keys', 'CacheStorage: keys')}}</td>
-   <td>{{Spec2('Service Workers')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+});
+```
 
-<h2 id="Compatibilités_des_navigateurs">Compatibilités des navigateurs</h2>
+## Spécifications
 
+| Spécification                                                                                            | Statut                               | Commentaire          |
+| -------------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName('Service Workers', '#dom-cachestorage-keys', 'CacheStorage: keys')}} | {{Spec2('Service Workers')}} | Définition initiale. |
 
+## Compatibilités des navigateurs
 
-<p>{{Compat("api.CacheStorage.keys")}}</p>
+{{Compat("api.CacheStorage.keys")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Utiliser les Service Workers</a></li>
- <li>{{domxref("Cache")}}</li>
- <li>{{domxref("WorkerGlobalScope.caches")}}</li>
-</ul>
+- [Utiliser les Service Workers](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers)
+- {{domxref("Cache")}}
+- {{domxref("WorkerGlobalScope.caches")}}
diff --git a/files/fr/web/api/cachestorage/match/index.md b/files/fr/web/api/cachestorage/match/index.md
index 704f299794..c548c86759 100644
--- a/files/fr/web/api/cachestorage/match/index.md
+++ b/files/fr/web/api/cachestorage/match/index.md
@@ -12,56 +12,49 @@ tags:
   - match
 translation_of: Web/API/CacheStorage/match
 ---
-<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+{{APIRef("Service Workers API")}}{{SeeCompatTable}}
 
-<p>La fonction <strong><code>match()</code></strong> de l'interface {{domxref("CacheStorage")}} qu'une {{domxref("Request", "Requête")}} est la clé d'un objet {{domxref("Cache")}} object suivie par un objet {{domxref("CacheStorage")}} et retourne une {{jsxref("Promise", "Promesse")}} qui renvoie la {{domxref("Response", "Réponse")}} correspondante.</p>
+La fonction **`match()`** de l'interface {{domxref("CacheStorage")}} qu'une {{domxref("Request", "Requête")}} est la clé d'un objet {{domxref("Cache")}} object suivie par un objet {{domxref("CacheStorage")}} et retourne une {{jsxref("Promise", "Promesse")}} qui renvoie la {{domxref("Response", "Réponse")}} correspondante.
 
-<p>Vous pouvez accéder à <code>CacheStorage</code> via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}.</p>
+Vous pouvez accéder à `CacheStorage` via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}.
 
-<p>Les objets <code>Cache</code> sont cherchés par ordre de création.</p>
+Les objets `Cache` sont cherchés par ordre de création.
 
-<div class="note">
-  <p><strong>Note :</strong> {{domxref("CacheStorage.match()", "caches.match()")}} est une méthode de commodité. Une fonctionnalité équivalente consiste à appeler {{domxref("cache.match()")}} sur chaque cache (dans l'ordre renvoyé par {{domxref("CacheStorage.keys()", "caches.keys()")}}) jusqu'à ce qu'une {{domxref("Response", "Réponse")}} soit renvoyée.</p>
-</div>
+> **Note :** {{domxref("CacheStorage.match()", "caches.match()")}} est une méthode de commodité. Une fonctionnalité équivalente consiste à appeler {{domxref("cache.match()")}} sur chaque cache (dans l'ordre renvoyé par {{domxref("CacheStorage.keys()", "caches.keys()")}}) jusqu'à ce qu'une {{domxref("Response", "Réponse")}} soit renvoyée.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">caches.match(<em>request</em>,{<em>options</em>}).then(function(<em>response</em>) {
-  // faire quelque-chose avec la requête et la réponse
-});
-</pre>
+    caches.match(request,{options}).then(function(response) {
+      // faire quelque-chose avec la requête et la réponse
+    });
+
+### Paramètres
+
+- request
+  - : La {{domxref("Request", "Requête")}} recherchée.
+- options {{optional_inline}}
 
-<h3 id="Paramètres">Paramètres</h3>
+  - : Un objet dont les propriétés contrôlent comment la correspondance est fait avec l'opération `match`. Les options disponible sont:
 
-<dl>
- <dt>request</dt>
- <dd>La {{domxref("Request", "Requête")}} recherchée.</dd>
- <dt>options {{optional_inline}}</dt>
- <dd>Un objet dont les propriétés contrôlent comment la correspondance est fait avec l'opération <code>match</code>. Les options disponible sont:
- <ul>
-  <li><code>ignoreSearch</code>: Un {{domxref("Boolean")}} qui détermine si le preocessus de rapprochement doit ignorer la chaîne de requête dans l'url. Défini à <code>true</code>, la partie <code>?value=bar</code> de <code>http://foo.com/?value=bar</code> sera ignoré lors d'un rapporchement. La valeur par défaut est <code>false</code>.</li>
-  <li><code>ignoreMethod</code>: Un {{domxref("Boolean")}} qui, quand défini à <code>true</code>, empêche l'opération de rapprochement de valider le verbe http de la {{domxref("Request", "Requête")}} <code>http</code> (normalement, seulement <code>GET</code> et <code>HEAD</code> sont authorisés) La valeur par défaut est <code>false</code>.</li>
-  <li><code>ignoreVary</code>: Un {{domxref("Boolean")}} qui, quand défini à <code>true</code>, dit à l'opération de rapprochement de ne pas faire le rapprochement avec le header <code>VARY</code>. En d'autres termes, si une URL est sélectionnée elle sera conservée indépemment de la présence du header <code>VARY</code>. La valeur par défaut est <code>false</code>.</li>
-  <li><code>cacheName</code>: Un {{domxref("DOMString")}} qui représente le cache dans lequel on recherche.</li>
- </ul>
- </dd>
-</dl>
+    - `ignoreSearch`: Un {{domxref("Boolean")}} qui détermine si le preocessus de rapprochement doit ignorer la chaîne de requête dans l'url. Défini à `true`, la partie `?value=bar` de `http://foo.com/?value=bar` sera ignoré lors d'un rapporchement. La valeur par défaut est `false`.
+    - `ignoreMethod`: Un {{domxref("Boolean")}} qui, quand défini à `true`, empêche l'opération de rapprochement de valider le verbe http de la {{domxref("Request", "Requête")}} `http` (normalement, seulement `GET` et `HEAD` sont authorisés) La valeur par défaut est `false`.
+    - `ignoreVary`: Un {{domxref("Boolean")}} qui, quand défini à `true`, dit à l'opération de rapprochement de ne pas faire le rapprochement avec le header `VARY`. En d'autres termes, si une URL est sélectionnée elle sera conservée indépemment de la présence du header `VARY`. La valeur par défaut est `false`.
+    - `cacheName`: Un {{domxref("DOMString")}} qui représente le cache dans lequel on recherche.
 
-<h3 id="Valeur_retournée">Valeur retournée</h3>
+### Valeur retournée
 
-<p>Une {{jsxref("Promise", "Promesse")}} qui renvoie les {{domxref("Response", "Réponses")}} correspondante.</p>
+Une {{jsxref("Promise", "Promesse")}} qui renvoie les {{domxref("Response", "Réponses")}} correspondante.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Cet exemple est tiré du MDN <a href="https://github.com/mdn/sw-test/">sw-test example</a> (voir <a href="https://mdn.github.io/sw-test/">sw-test running live</a>). Nous attendons pour un évènement {{domxref("FetchEvent")}} et nous construisons une réponse comme suit:</p>
+Cet exemple est tiré du MDN [sw-test example](https://github.com/mdn/sw-test/) (voir [sw-test running live](https://mdn.github.io/sw-test/)). Nous attendons pour un évènement {{domxref("FetchEvent")}} et nous construisons une réponse comme suit:
 
-<ol>
- <li>Vérifier si une correspondance pour la requète est trouvée dans le {{domxref("CacheStorage")}} en utilisant {{domxref("CacheStorage.match")}}. Si oui, la servir.</li>
- <li>Si non, ouvrire le cache <code>v1</code> avec <code>open()</code>, mettre le réseau par défaut dans le cache avec {{domxref("Cache.put")}} et retourner un clone du réseau par défaut en utilisant <code>return response.clone()</code> — obligatoire car <code>put()</code> détruit le corps de la réponse.</li>
- <li>Si ceci échoue (e.g., parce que le réseau est inactif), retourner une réponse de secours.</li>
-</ol>
+1.  Vérifier si une correspondance pour la requète est trouvée dans le {{domxref("CacheStorage")}} en utilisant {{domxref("CacheStorage.match")}}. Si oui, la servir.
+2.  Si non, ouvrire le cache `v1` avec `open()`, mettre le réseau par défaut dans le cache avec {{domxref("Cache.put")}} et retourner un clone du réseau par défaut en utilisant `return response.clone()` — obligatoire car `put()` détruit le corps de la réponse.
+3.  Si ceci échoue (e.g., parce que le réseau est inactif), retourner une réponse de secours.
 
-<pre class="brush: js">self.addEventListener('fetch', function(event) {
+```js
+self.addEventListener('fetch', function(event) {
   event.respondWith(caches.match(event.request).then(function(response) {
     // caches.match() always resolves
     // but in case of success response will have value
@@ -83,35 +76,21 @@ translation_of: Web/API/CacheStorage/match
       });
     }
   }));
-});</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Service Workers', '#dom-cachestorage-match', 'CacheStorage: match')}}</td>
-   <td>{{Spec2('Service Workers')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+});
+```
 
-<h2 id="Compatibilités_des_navigateurs">Compatibilités des navigateurs</h2>
+## Spécifications
 
+| Spécification                                                                                                | Statut                               | Commentaire          |
+| ------------------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- |
+| {{SpecName('Service Workers', '#dom-cachestorage-match', 'CacheStorage: match')}} | {{Spec2('Service Workers')}} | Définition initiale. |
 
+## Compatibilités des navigateurs
 
-<p>{{Compat("api.CacheStorage.match")}}</p>
+{{Compat("api.CacheStorage.match")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Utiliser les Service Workers</a></li>
- <li>{{domxref("Cache")}}</li>
- <li>{{domxref("WindowOrWorkerGlobalScope.caches")}}</li>
-</ul>
+- [Utiliser les Service Workers](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers)
+- {{domxref("Cache")}}
+- {{domxref("WindowOrWorkerGlobalScope.caches")}}
diff --git a/files/fr/web/api/cachestorage/open/index.md b/files/fr/web/api/cachestorage/open/index.md
index 87d45d11b3..009c6e1e94 100644
--- a/files/fr/web/api/cachestorage/open/index.md
+++ b/files/fr/web/api/cachestorage/open/index.md
@@ -12,39 +12,35 @@ tags:
   - open
 translation_of: Web/API/CacheStorage/open
 ---
-<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+{{APIRef("Service Workers API")}}{{SeeCompatTable}}
 
-<p>La fonction <strong><code>open()</code></strong>de l'interface {{domxref("CacheStorage")}} retourne une {{jsxref("Promise", "Promesse")}} qui renvoie l'objet {{domxref("Cache")}} correspondant a un <code>cacheName</code>.</p>
+La fonction **`open()`**de l'interface {{domxref("CacheStorage")}} retourne une {{jsxref("Promise", "Promesse")}} qui renvoie l'objet {{domxref("Cache")}} correspondant a un `cacheName`.
 
-<p>Vous pouvez accéder à <code>CacheStorage</code> via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}.</p>
+Vous pouvez accéder à `CacheStorage` via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}.
 
-<div class="note">
-<p><strong>Note :</strong> Si le {{domxref("Cache")}} spécifié n'existe pas, un nouveau cache sera crée avec <code>cacheName</code> et retournera une {{jsxref("Promise", "Promesse")}} renvoyant le nouvel objet {{domxref("Cache")}}.</p>
-</div>
+> **Note :** Si le {{domxref("Cache")}} spécifié n'existe pas, un nouveau cache sera crée avec `cacheName` et retournera une {{jsxref("Promise", "Promesse")}} renvoyant le nouvel objet {{domxref("Cache")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">caches.open(<em>cacheName</em>).then(function(<em>cache</em>) {
-  // faire quelque-chose avec le cache
-});
-</pre>
+    caches.open(cacheName).then(function(cache) {
+      // faire quelque-chose avec le cache
+    });
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt>cacheName</dt>
- <dd>Le nom du cache que vous voulez ouvrir.</dd>
-</dl>
+- cacheName
+  - : Le nom du cache que vous voulez ouvrir.
 
-<h3 id="Retour">Retour</h3>
+### Retour
 
-<p>Une {{jsxref("Promise", "Promesse")}} qui renvoie l'objet {{domxref("Cache")}} demandé.</p>
+Une {{jsxref("Promise", "Promesse")}} qui renvoie l'objet {{domxref("Cache")}} demandé.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Cet exemple est tiré de l'<a href="https://github.com/mdn/sw-test/">exemple MDN sw-test</a> (voir <a href="https://mdn.github.io/sw-test/">sw-test en direct</a>). Ici, nous attendons qu'un {{domxref("InstallEvent")}} se déclenche, puis nous lançons {{domxref("ExtendableEvent.waitUntil", "waitUntil()")}} pour gérer le processus d'installation de l'application. Cela consiste à appeler <code>CacheStorage.open()</code> pour créer un nouveau cache, puis à utiliser {{domxref("Cache.addAll()")}} pour y ajouter une série d'éléments.</p>
+Cet exemple est tiré de l'[exemple MDN sw-test](https://github.com/mdn/sw-test/) (voir [sw-test en direct](https://mdn.github.io/sw-test/)). Ici, nous attendons qu'un {{domxref("InstallEvent")}} se déclenche, puis nous lançons {{domxref("ExtendableEvent.waitUntil", "waitUntil()")}} pour gérer le processus d'installation de l'application. Cela consiste à appeler `CacheStorage.open()` pour créer un nouveau cache, puis à utiliser {{domxref("Cache.addAll()")}} pour y ajouter une série d'éléments.
 
-<pre class="brush: js">self.addEventListener('install', function(event) {
+```js
+self.addEventListener('install', function(event) {
   event.waitUntil(
     caches.open('v1').then(function(cache) {
       return cache.addAll([
@@ -59,35 +55,21 @@ translation_of: Web/API/CacheStorage/open
         '/sw-test/gallery/snowTroopers.jpg'
       ]);
     })
-  );</pre>
+  );
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Service Workers', '#dom-cachestorage-open', 'CacheStorage: open')}}</td>
-   <td>{{Spec2('Service Workers')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                            | Statut                               | Commentaire          |
+| -------------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName('Service Workers', '#dom-cachestorage-open', 'CacheStorage: open')}} | {{Spec2('Service Workers')}} | Définition initiale. |
 
-<h2 id="Compatibilités_des_navigateurs">Compatibilités des navigateurs</h2>
+## Compatibilités des navigateurs
 
+{{Compat("api.CacheStorage.open")}}
 
+## Voir aussi
 
-<p>{{Compat("api.CacheStorage.open")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Utiliser les Service Workers</a></li>
- <li>{{domxref("Cache")}}</li>
- <li>{{domxref("WorkerGlobalScope.caches")}}</li>
-</ul>
+- [Utiliser les Service Workers](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers)
+- {{domxref("Cache")}}
+- {{domxref("WorkerGlobalScope.caches")}}
diff --git a/files/fr/web/api/canvas_api/a_basic_ray-caster/index.md b/files/fr/web/api/canvas_api/a_basic_ray-caster/index.md
index b3520fecbd..acd6af42aa 100644
--- a/files/fr/web/api/canvas_api/a_basic_ray-caster/index.md
+++ b/files/fr/web/api/canvas_api/a_basic_ray-caster/index.md
@@ -10,44 +10,42 @@ tags:
 translation_of: Web/API/Canvas_API/A_basic_ray-caster
 original_slug: Un_raycaster_basique_avec_canvas
 ---
-<p>{{CanvasSidebar}}</p>
+{{CanvasSidebar}}
 
-<p>Cet article fournit un exemple intéressant concret d'utilisation de l'élément {{HTMLElement("canvas")}} pour faire un logiciel rendant un environnement 3D à l'aide de la projection de rayons.</p>
+Cet article fournit un exemple intéressant concret d'utilisation de l'élément {{HTMLElement("canvas")}} pour faire un logiciel rendant un environnement 3D à l'aide de la projection de rayons.
 
-<p>{{EmbedGHLiveSample("canvas-raycaster/index.html", 900, 300)}}</p>
+{{EmbedGHLiveSample("canvas-raycaster/index.html", 900, 300)}}
 
-<p><strong><a href="http://mdn.github.io/canvas-raycaster/">Ouvrir une nouvelle fenêtre</a></strong></p>
+**[Ouvrir une nouvelle fenêtre](http://mdn.github.io/canvas-raycaster/)**
 
-<h2 id="Pourquoi.C2.A0.3F">Pourquoi ?</h2>
+## Pourquoi ?
 
-<p>Après avoir réalisé, à mon plus grand plaisir, que le sympathique élément <code>&lt;canvas&gt;</code> dont j'avais <a href="http://www.whatwg.org/specs/web-apps/current-work/#dynamic">entendu parler (en)</a>, non seulement allait être supporté par Firefox, mais était<em> </em><strong>déjà</strong> supporté dans la version actuelle de Safari, je me devais de tenter une petite expérience.</p>
+Après avoir réalisé, à mon plus grand plaisir, que le sympathique élément `<canvas>` dont j'avais [entendu parler (en)](http://www.whatwg.org/specs/web-apps/current-work/#dynamic), non seulement allait être supporté par Firefox, mais était\* **\*déjà** supporté dans la version actuelle de Safari, je me devais de tenter une petite expérience.
 
-<p>La <a href="/fr/docs/Web/HTML/Canvas">présentation</a> et le <a href="/fr/docs/Tutoriel_canvas">tutoriel </a><a href="/fr/docs/Tutoriel_canvas"> </a>canvas que j'ai trouvé ici sur MDC sont excellents, mais personne n'a encore rien écrit sur l'animation, j'ai donc pensé porter un "raycaster" basique sur lequel j'avais travaillé il y a quelque temps, et voir quelle sorte de performance nous pouvions attendre d'un tampon de pixel écrit en JavaScript.</p>
+La [présentation](/fr/docs/Web/HTML/Canvas) et le [tutoriel ](/fr/docs/Tutoriel_canvas)[](/fr/docs/Tutoriel_canvas)canvas que j'ai trouvé ici sur MDC sont excellents, mais personne n'a encore rien écrit sur l'animation, j'ai donc pensé porter un "raycaster" basique sur lequel j'avais travaillé il y a quelque temps, et voir quelle sorte de performance nous pouvions attendre d'un tampon de pixel écrit en JavaScript.
 
-<h2 id="Comment.C2.A0.3F">Comment ?</h2>
+## Comment ?
 
-<p>L'idée de base est d'employer  {{domxref("window.setInterval","setInterval()")}} à intervalle régulier, correspondant au taux de trame désiré. Après chaque intervalle, une fonction de mise à jour redessine le canvas, affichant la vue actuelle. Je sais que j'aurais pu commencer avec un exemple plus simple, mais je suis sûr que le tutoriel canvas va <a href="/fr/docs/Tutoriel_canvas/Animations_basiques">y conduire</a>, et je voulais voir si je pouvais y arriver.</p>
+L'idée de base est d'employer {{domxref("window.setInterval","setInterval()")}} à intervalle régulier, correspondant au taux de trame désiré. Après chaque intervalle, une fonction de mise à jour redessine le canvas, affichant la vue actuelle. Je sais que j'aurais pu commencer avec un exemple plus simple, mais je suis sûr que le tutoriel canvas va [y conduire](/fr/docs/Tutoriel_canvas/Animations_basiques), et je voulais voir si je pouvais y arriver.
 
-<p>Donc, à chaque mise à jour, le projeteur de rayons vérifie si vous avez pressé une touche récemment, pour s'éviter des calculs si vous êtes immobile. S'il y a eu un mouvement, le canvas est effacé, le ciel et le sol sont dessinés, la position et l'orientation de la caméra corrigées et les rayons projetés. Lorsque les rayons rencontrent un mur, ils créent une bandelette verticale de canvas de la couleur du mur qu'ils ont touché, mélangée à une nuance plus sombre de cette couleur en fonction de la distance au mur. La hauteur de la bandelette est modulée par la distance entre le mur et la caméra, et la bandelette est dessinée centrée sur la ligne d'horizon.</p>
+Donc, à chaque mise à jour, le projeteur de rayons vérifie si vous avez pressé une touche récemment, pour s'éviter des calculs si vous êtes immobile. S'il y a eu un mouvement, le canvas est effacé, le ciel et le sol sont dessinés, la position et l'orientation de la caméra corrigées et les rayons projetés. Lorsque les rayons rencontrent un mur, ils créent une bandelette verticale de canvas de la couleur du mur qu'ils ont touché, mélangée à une nuance plus sombre de cette couleur en fonction de la distance au mur. La hauteur de la bandelette est modulée par la distance entre le mur et la caméra, et la bandelette est dessinée centrée sur la ligne d'horizon.
 
-<p>Le code que j'ai obtenu est l'amalgame des chapitres "raycaster" d'un vieux livre d'André Lamothe<em> Tricks of the Game Programming Gurus</em> (<small>ISBN: 0672305070</small>), et d'un <a href="http://www.shinelife.co.uk/java-maze/">Projeteur de rayons Java</a> que j'ai trouvé en ligne, modifié par mon besoin compulsif de tout renommer pour que cela ait un sens pour moi, et pour tout le bricolage nécessaire pour que l'ensemble fonctionne bien.</p>
+Le code que j'ai obtenu est l'amalgame des chapitres "raycaster" d'un vieux livre d'André Lamothe _Tricks of the Game Programming Gurus_ (ISBN: 0672305070), et d'un [Projeteur de rayons Java](http://www.shinelife.co.uk/java-maze/) que j'ai trouvé en ligne, modifié par mon besoin compulsif de tout renommer pour que cela ait un sens pour moi, et pour tout le bricolage nécessaire pour que l'ensemble fonctionne bien.
 
-<h2 id="R.C3.A9sultats">Résultats</h2>
+## Résultats
 
-<p>Le canvas dans Safari 2.0.1 a étonnement bien marché. Avec le facteur de bloc-itude poussé pour rendre des bandelettes de 8 pixels de largeur, j'arrive à faire tourner une fenêtre en 320 x 240 à 24 images/seconde sur mon Apple mini. Firefox 1.5 Beta 1 est encore plus rapide, j'obtiens 24 images/seconde sur la fenêtre de 320 x 240 avec des bandelettes de 4 pixels. Pas vraiment un nouveau membre de la famille "ID software", mais plutôt décent si l'on considère qu'il s'agit d'un environnement entièrement interprété, et que je n'ai eu à m'inquiéter ni de l'allocation mémoire, ni des modes vidéos, ni de coder les routines centrales en assembleur, ni de quoi que soit d'autre. Le code cherche à être très efficace, consultant un tableau de valeurs précalculées, mais je ne suis pas un dieu de l'optimisation, donc les choses pourraient probablement être écrites plus rapidement.</p>
+Le canvas dans Safari 2.0.1 a étonnement bien marché. Avec le facteur de bloc-itude poussé pour rendre des bandelettes de 8 pixels de largeur, j'arrive à faire tourner une fenêtre en 320 x 240 à 24 images/seconde sur mon Apple mini. Firefox 1.5 Beta 1 est encore plus rapide, j'obtiens 24 images/seconde sur la fenêtre de 320 x 240 avec des bandelettes de 4 pixels. Pas vraiment un nouveau membre de la famille "ID software", mais plutôt décent si l'on considère qu'il s'agit d'un environnement entièrement interprété, et que je n'ai eu à m'inquiéter ni de l'allocation mémoire, ni des modes vidéos, ni de coder les routines centrales en assembleur, ni de quoi que soit d'autre. Le code cherche à être très efficace, consultant un tableau de valeurs précalculées, mais je ne suis pas un dieu de l'optimisation, donc les choses pourraient probablement être écrites plus rapidement.
 
-<p>De plus, il laisse beaucoup à désirer en tant que tentative d'une espèce de moteur de jeu— il n'y a pas de textures sur les murs, pas de sprites, pas de portes, même pas de téléporteurs pour passer à un autre niveau. Je suis cependant presque certain que toutes ces choses peuvent être intégrées pourvu qu'on en prenne le temps. L' API de canvas supporte la copie d'images par pixel, donc les textures semblent possibles. Je laisse ça pour un autre article, probablement d'une autre personne. =)</p>
+De plus, il laisse beaucoup à désirer en tant que tentative d'une espèce de moteur de jeu— il n'y a pas de textures sur les murs, pas de sprites, pas de portes, même pas de téléporteurs pour passer à un autre niveau. Je suis cependant presque certain que toutes ces choses peuvent être intégrées pourvu qu'on en prenne le temps. L' API de canvas supporte la copie d'images par pixel, donc les textures semblent possibles. Je laisse ça pour un autre article, probablement d'une autre personne. =)
 
-<h2 id="Le_RayCaster">Le projeteur de rayons <em>(ray-caster)</em></h2>
+## Le projeteur de rayons _(ray-caster)_
 
-<p>De sympathiques personnes ici ont copié mes fichiers manuellement pour que vous puissiez y jeter un <a href="https://mdn.github.io/canvas-raycaster/">coup d'oeil</a>, et pour votre plaisir, j'ai posté le contenu de chacun des fichiers sous la forme de listings de code (voir plus bas).</p>
+De sympathiques personnes ici ont copié mes fichiers manuellement pour que vous puissiez y jeter un [coup d'oeil](https://mdn.github.io/canvas-raycaster/), et pour votre plaisir, j'ai posté le contenu de chacun des fichiers sous la forme de listings de code (voir plus bas).
 
-<p>Vous y voici donc, lancez Safari 1.3+, Firefox 1.5+ ou un autre navigateur supportant l'élément <code>&lt;canvas&gt;</code> et amusez-vous!<br>
- <br>
- <small><a href="fr/Un_raycaster_basique_avec_canvas/input.js">input.js</a> | <a href="fr/Un_raycaster_basique_avec_canvas/Level.js">Level.js</a> | <a href="fr/Un_raycaster_basique_avec_canvas/Player.js">Player.js</a> | <a href="fr/Un_raycaster_basique_avec_canvas/RayCaster.html">RayCaster.html</a> | <a href="fr/Un_raycaster_basique_avec_canvas/RayCaster.js">RayCaster.js</a> | <a href="fr/Un_raycaster_basique_avec_canvas/trace.css">trace.css</a> | <a href="fr/Un_raycaster_basique_avec_canvas/trace.js">trace.js</a> </small></p>
+Vous y voici donc, lancez Safari 1.3+, Firefox 1.5+ ou un autre navigateur supportant l'élément `<canvas>` et amusez-vous!
 
-<h3 id="Voir_.C3.A9galement">Voir aussi</h3>
+[input.js](fr/Un_raycaster_basique_avec_canvas/input.js) | [Level.js](fr/Un_raycaster_basique_avec_canvas/Level.js) | [Player.js](fr/Un_raycaster_basique_avec_canvas/Player.js) | [RayCaster.html](fr/Un_raycaster_basique_avec_canvas/RayCaster.html) | [RayCaster.js](fr/Un_raycaster_basique_avec_canvas/RayCaster.js) | [trace.css](fr/Un_raycaster_basique_avec_canvas/trace.css) | [trace.js](fr/Un_raycaster_basique_avec_canvas/trace.js)
 
-<ul>
- <li><a href="/fr/docs/Tutoriel_canvas">Canvas tutorial</a></li>
-</ul>
+### Voir aussi
+
+- [Canvas tutorial](/fr/docs/Tutoriel_canvas)
diff --git a/files/fr/web/api/canvas_api/index.md b/files/fr/web/api/canvas_api/index.md
index 9c3ea0f0ef..3b26e6ff1f 100644
--- a/files/fr/web/api/canvas_api/index.md
+++ b/files/fr/web/api/canvas_api/index.md
@@ -7,47 +7,51 @@ tags:
   - Reference
 translation_of: Web/API/Canvas_API
 ---
-<div>{{IncludeSubnav("/fr/docs/Jeux")}} {{CanvasSidebar}}</div>
+{{IncludeSubnav("/fr/docs/Jeux")}} {{CanvasSidebar}}
 
-<p>Ajouté en <a href="/fr/docs/Web/Guide/HTML/HTML5">HTML5</a>, l'élément {{HTMLElement("canvas")}} est un nouvel élément qui peut être utilisé pour dessiner des graphismes via des scripts <a href="/fr/docs/JavaScript">JavaScript</a>. Par exemple, Il peut être utilisé pour dessiner des graphes, faire des compositions de photos, des animations, ou même faire du traitement ou de l'affichage de vidéos en temps réel.</p>
+Ajouté en [HTML5](/fr/docs/Web/Guide/HTML/HTML5), l'élément {{HTMLElement("canvas")}} est un nouvel élément qui peut être utilisé pour dessiner des graphismes via des scripts [JavaScript](/fr/docs/JavaScript). Par exemple, Il peut être utilisé pour dessiner des graphes, faire des compositions de photos, des animations, ou même faire du traitement ou de l'affichage de vidéos en temps réel.
 
-<p>Les applications Mozilla ont commencé à supporter &lt;canvas&gt; à partir de Gecko 1.8 (c'est-à-dire <a href="/fr/docs/Firefox_1.5_pour_les_développeurs">Firefox 1.5</a>). L'élément a été introduit à l'origine par Apple pour le <a href="http://www.apple.com/macosx/features/dashboard/">Dashboard d'OS X</a> et pour Safari. Internet Explorer supporte &lt;canvas&gt; depuis la version 9 et ultérieures, pour les versions précédentes d'IE, une page peut effectuer ce support de &lt;canvas&gt; en incluant un script depuis le projet <a href="http://excanvas.sourceforge.net/">Explorer Canvas  </a>de Google.</p>
+Les applications Mozilla ont commencé à supporter \<canvas> à partir de Gecko 1.8 (c'est-à-dire [Firefox 1.5](/fr/docs/Firefox_1.5_pour_les_développeurs)). L'élément a été introduit à l'origine par Apple pour le [Dashboard d'OS X](http://www.apple.com/macosx/features/dashboard/) et pour Safari. Internet Explorer supporte \<canvas> depuis la version 9 et ultérieures, pour les versions précédentes d'IE, une page peut effectuer ce support de \<canvas> en incluant un script depuis le projet [Explorer Canvas  ](http://excanvas.sourceforge.net/)de Google.
 
-<p>L'élément &lt;canvas&gt; est aussi utilisé par <a href="/fr/docs/Web/API/WebGL_API">WebGL</a> pour afficher des graphismes 3D avec accélération matérielle sur des pages web.</p>
+L'élément \<canvas> est aussi utilisé par [WebGL](/fr/docs/Web/API/WebGL_API) pour afficher des graphismes 3D avec accélération matérielle sur des pages web.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Voilà un simple extrait de code qui utilise la méthode {{domxref("CanvasRenderingContext2D.fillRect()")}}.</p>
+Voilà un simple extrait de code qui utilise la méthode {{domxref("CanvasRenderingContext2D.fillRect()")}}.
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
-</pre>
+```html
+<canvas id="canvas"></canvas>
+```
 
-<h3 id="JavaScript">JavaScript</h3>
+### JavaScript
 
-<pre class="brush: js">var canvas = document.getElementById('canvas');
+```js
+var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
 
 ctx.fillStyle = 'green';
 ctx.fillRect(10, 10, 100, 100);
-</pre>
+```
 
-<p>Éditez le code ci-dessous pour voir les changements avoir lieu directement dans le canvas:</p>
+Éditez le code ci-dessous pour voir les changements avoir lieu directement dans le canvas:
 
-<h4 id="code_jouable">Code jouable</h4>
+#### Code jouable
 
-<pre class="brush: html hidden">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
-&lt;div class="playable-buttons"&gt;
-  &lt;input id="edit" type="button" value="Edit" /&gt;
-  &lt;input id="reset" type="button" value="Reset" /&gt;
-&lt;/div&gt;
-&lt;textarea id="code" class="playable-code"&gt;
+```html hidden
+<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code">
 ctx.fillStyle = 'green';
-ctx.fillRect(10, 10, 100, 100);&lt;/textarea&gt;
-</pre>
+ctx.fillRect(10, 10, 100, 100);</textarea>
+```
 
-<pre class="brush: js hidden">var canvas = document.getElementById('canvas');
+```js hidden
+var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext("2d");
 var textarea = document.getElementById('code');
 var reset = document.getElementById('reset');
@@ -70,95 +74,72 @@ edit.addEventListener('click', function() {
 
 textarea.addEventListener('input', drawCanvas);
 window.addEventListener('load', drawCanvas);
-</pre>
-
-<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p>
-
-<h2 id="Références">Références</h2>
-
-<ul>
- <li>{{domxref("HTMLCanvasElement")}}</li>
- <li>{{domxref("CanvasRenderingContext2D")}}</li>
- <li>{{domxref("CanvasGradient")}}</li>
- <li>{{domxref("CanvasImageSource")}}</li>
- <li>{{domxref("CanvasPattern")}}</li>
- <li>{{domxref("ImageBitmap")}}</li>
- <li>{{domxref("ImageData")}}</li>
- <li>{{domxref("RenderingContext")}}</li>
- <li>{{domxref("TextMetrics")}}</li>
- <li>{{domxref("OffscreenCanvas")}}{{experimental_inline}}</li>
- <li>{{domxref("Path2D")}} {{experimental_inline}}{{domxref("ImageBitmapRenderingContext")}}{{experimental_inline}}</li>
-</ul>
-
-<p>Les interfaces liées au <code>WebGLRenderingContext</code> sont référencées sous <a href="/en-US/docs/Web/WebGL">WebGL</a>.</p>
-
-<p>{{domxref("CanvasCaptureMediaStream")}} est lié.</p>
-
-<h2 id="Guides_et_tutoriels">Guides et tutoriels</h2>
-
-<dl>
- <dt><a href="/fr/docs/Tutoriel_canvas">Tutoriel canvas</a></dt>
- <dd>Un tutoriel complet qui couvre à la fois l'usage élémentaire de <code>&lt;canvas&gt;</code> mais aussi ses fonctionnalités avancées.</dd>
- <dt><a href="/fr/docs/Extraits_de_code/Canvas">Extraits de code : Canvas</a></dt>
- <dd>Quelques extraits de code orientés vers les développeurs d'extension qui utilisent <code>&lt;canvas&gt;</code>.</dd>
- <dt><a href="/fr/docs/Un_raycaster_basique_avec_canvas">Demo: Un raycaster basique avec canvas</a></dt>
- <dd>Une demonstration d'animation utilisant le ray-tracing dans un élément canvas.</dd>
- <dt><a href="/fr/docs/Web/HTML/Canvas/Dessiner_des_objets_DOM_dans_un_element_canvas">Dessiner des objets DOM dans un élément canvas</a></dt>
- <dd>Comment dessiner un contenu DOM, tel que des éléments HTML, dans un canvas.</dd>
- <dt><a href="/fr/docs/HTML/Manipulating_video_using_canvas">Manipulation vidéo avec la balise canvas</a></dt>
- <dd>Combiner {{HTMLElement("video")}} et {{HTMLElement("canvas")}} pour manipuler des données video en temps réel.</dd>
-</dl>
-
-<h2 id="Ressources">Ressources</h2>
-
-<h3 id="Général">Général</h3>
-
-<ul>
- <li><a href="http://joshondesign.com/p/books/canvasdeepdive/title.html">HTML5 Canvas Deep Dive</a> (en)</li>
- <li><a href="http://bucephalus.org/text/CanvasHandbook/CanvasHandbook.html">Canvas Handbook</a> (en)</li>
-</ul>
-
-<h3 id="Bibliothèques">Bibliothèques</h3>
-
-<ul>
- <li><a href="http://fabricjs.com">Fabric.js</a> est une bibliothèque open-source qui peut analyser du code SVG.</li>
- <li><a href="https://github.com/ericdrowell/KineticJS">Kinetic.js</a> est une bibliothèque open-source concentrée sur l'interactivité pour les applications mobiles et de bureau.</li>
- <li><a href="http://paperjs.org/">Paper.js</a> est une bibliothèque open-source qui rajoute un système de dessin vectoriel au canvas HTML5.</li>
- <li><a href="http://origamijs.com/docs/">Origami.js</a> est une bibliothèque légère open-source pour canvas.</li>
- <li><a href="http://libcanvas.github.com/">libCanvas</a> est un framework canvas puissant et léger.</li>
- <li><a href="http://processingjs.org">Processing.js</a> est un portage du langage de visuaisation Processing.</li>
- <li><a href="https://playcanvas.com/">PlayCanvas</a> est un moteur de jeu open-source.</li>
- <li><a href="http://www.pixijs.com/">Pixi.js</a> est un moteur de jeu open-source.</li>
- <li><a href="http://www.liquidx.net/plotkit/">PlotKit</a> est une bibliothèque permettant de réaliser des diagrammes et des graphiques.</li>
- <li><a href="https://github.com/jeremyckahn/rekapi">Rekapi</a> est une API d'animation par key-framing pour Canvas.</li>
- <li><a href="http://senchalabs.github.com/philogl/">PhiloGL</a> est un framework WebGL pour la visualisation de données, pour la programmation créative et pour le developpement de jeux.</li>
- <li><a href="http://thejit.org/">JavaScript InfoVis Toolkit</a> crée des visualisation de données interactives en 2D avec canvas pour le Web.</li>
- <li><a href="http://www.createjs.com/easeljs">EaselJS</a> est une bibliothèque gratuite/open-source qui facilite l'utilisation de canvas pour faire des jeux ou de l'art</li>
- <li><a href="http://scrawl.rikweb.org.uk/">Scrawl-canvas</a> est une autre bibliothèque open-source pour créer et manipuler des éléments 2D dans canvas</li>
- <li><a href="https://www.patrick-wied.at/static/heatmapjs/">heatmap.js</a> est une bibliothèque open-source pour créer des cartes thermiques basées sur canvas</li>
-</ul>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'scripting.html#the-canvas-element', '&lt;canvas&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/WebGL">WebGL</a></li>
-</ul>
+```
+
+{{ EmbedLiveSample('code_jouable', 700, 360) }}
+
+## Références
+
+- {{domxref("HTMLCanvasElement")}}
+- {{domxref("CanvasRenderingContext2D")}}
+- {{domxref("CanvasGradient")}}
+- {{domxref("CanvasImageSource")}}
+- {{domxref("CanvasPattern")}}
+- {{domxref("ImageBitmap")}}
+- {{domxref("ImageData")}}
+- {{domxref("RenderingContext")}}
+- {{domxref("TextMetrics")}}
+- {{domxref("OffscreenCanvas")}}{{experimental_inline}}
+- {{domxref("Path2D")}} {{experimental_inline}}{{domxref("ImageBitmapRenderingContext")}}{{experimental_inline}}
+
+Les interfaces liées au `WebGLRenderingContext` sont référencées sous [WebGL](/en-US/docs/Web/WebGL).
+
+{{domxref("CanvasCaptureMediaStream")}} est lié.
+
+## Guides et tutoriels
+
+- [Tutoriel canvas](/fr/docs/Tutoriel_canvas)
+  - : Un tutoriel complet qui couvre à la fois l'usage élémentaire de `<canvas>` mais aussi ses fonctionnalités avancées.
+- [Extraits de code : Canvas](/fr/docs/Extraits_de_code/Canvas)
+  - : Quelques extraits de code orientés vers les développeurs d'extension qui utilisent `<canvas>`.
+- [Demo: Un raycaster basique avec canvas](/fr/docs/Un_raycaster_basique_avec_canvas)
+  - : Une demonstration d'animation utilisant le ray-tracing dans un élément canvas.
+- [Dessiner des objets DOM dans un élément canvas](/fr/docs/Web/HTML/Canvas/Dessiner_des_objets_DOM_dans_un_element_canvas)
+  - : Comment dessiner un contenu DOM, tel que des éléments HTML, dans un canvas.
+- [Manipulation vidéo avec la balise canvas](/fr/docs/HTML/Manipulating_video_using_canvas)
+  - : Combiner {{HTMLElement("video")}} et {{HTMLElement("canvas")}} pour manipuler des données video en temps réel.
+
+## Ressources
+
+### Général
+
+- [HTML5 Canvas Deep Dive](http://joshondesign.com/p/books/canvasdeepdive/title.html) (en)
+- [Canvas Handbook](http://bucephalus.org/text/CanvasHandbook/CanvasHandbook.html) (en)
+
+### Bibliothèques
+
+- [Fabric.js](http://fabricjs.com) est une bibliothèque open-source qui peut analyser du code SVG.
+- [Kinetic.js](https://github.com/ericdrowell/KineticJS) est une bibliothèque open-source concentrée sur l'interactivité pour les applications mobiles et de bureau.
+- [Paper.js](http://paperjs.org/) est une bibliothèque open-source qui rajoute un système de dessin vectoriel au canvas HTML5.
+- [Origami.js](http://origamijs.com/docs/) est une bibliothèque légère open-source pour canvas.
+- [libCanvas](http://libcanvas.github.com/) est un framework canvas puissant et léger.
+- [Processing.js](http://processingjs.org) est un portage du langage de visuaisation Processing.
+- [PlayCanvas](https://playcanvas.com/) est un moteur de jeu open-source.
+- [Pixi.js](http://www.pixijs.com/) est un moteur de jeu open-source.
+- [PlotKit](http://www.liquidx.net/plotkit/) est une bibliothèque permettant de réaliser des diagrammes et des graphiques.
+- [Rekapi](https://github.com/jeremyckahn/rekapi) est une API d'animation par key-framing pour Canvas.
+- [PhiloGL](http://senchalabs.github.com/philogl/) est un framework WebGL pour la visualisation de données, pour la programmation créative et pour le developpement de jeux.
+- [JavaScript InfoVis Toolkit](http://thejit.org/) crée des visualisation de données interactives en 2D avec canvas pour le Web.
+- [EaselJS](http://www.createjs.com/easeljs) est une bibliothèque gratuite/open-source qui facilite l'utilisation de canvas pour faire des jeux ou de l'art
+- [Scrawl-canvas](http://scrawl.rikweb.org.uk/) est une autre bibliothèque open-source pour créer et manipuler des éléments 2D dans canvas
+- [heatmap.js](https://www.patrick-wied.at/static/heatmapjs/) est une bibliothèque open-source pour créer des cartes thermiques basées sur canvas
+
+## Spécifications
+
+| Specification                                                                                                | Status                           | Comment |
+| ------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------- |
+| {{SpecName('HTML WHATWG', 'scripting.html#the-canvas-element', '&lt;canvas&gt;')}} | {{Spec2('HTML WHATWG')}} |         |
+
+## Voir aussi
+
+- [WebGL](/en-US/docs/Web/WebGL)
diff --git a/files/fr/web/api/canvas_api/manipulating_video_using_canvas/index.md b/files/fr/web/api/canvas_api/manipulating_video_using_canvas/index.md
index 80e8707ba3..1d307ad69e 100644
--- a/files/fr/web/api/canvas_api/manipulating_video_using_canvas/index.md
+++ b/files/fr/web/api/canvas_api/manipulating_video_using_canvas/index.md
@@ -7,20 +7,21 @@ tags:
 translation_of: Web/API/Canvas_API/Manipulating_video_using_canvas
 original_slug: HTML/Manipulating_video_using_canvas
 ---
-<p>{{CanvasSidebar}}</p>
+{{CanvasSidebar}}
 
-<p>En combinant les possibilités de l'élément <a href="/En/HTML/Element/Video"><code>video</code></a> avec celles de l'élément <a href="/en/HTML/Canvas"><code>canvas</code></a>, vous pouvez manipuler les données vidéos en temps réel, et y incorporer une variété d'effets visuels. Ce tutoriel explique comment réaliser un travail d'incrustation "chroma-keying" (<em>fond vert</em>) en utilisant JavaScript.</p>
+En combinant les possibilités de l'élément [`video`](/En/HTML/Element/Video) avec celles de l'élément [`canvas`](/en/HTML/Canvas), vous pouvez manipuler les données vidéos en temps réel, et y incorporer une variété d'effets visuels. Ce tutoriel explique comment réaliser un travail d'incrustation "chroma-keying" (_fond vert_) en utilisant JavaScript.
 
-<p><a href="/samples/video/chroma-key/index.xhtml">Voir l'exemple</a>.</p>
+[Voir l'exemple](/samples/video/chroma-key/index.xhtml).
 
-<h2 id="Le_contenu_du_document">Le contenu du document</h2>
+## Le contenu du document
 
-<p>Le document XHTML utilisé pour rendre ce contenu est montré ci-dessous :</p>
+Le document XHTML utilisé pour rendre ce contenu est montré ci-dessous :
 
-<pre class="brush: html">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-  &lt;head&gt;
-    &lt;style&gt;
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
       body {
         background: black;
         color:#CCCCCC;
@@ -36,38 +37,38 @@ original_slug: HTML/Manipulating_video_using_canvas
         margin: 10px;
         background:#3B3B3B;
       }
-    &lt;/style&gt;
-    &lt;script type="text/javascript" src="main.js"&gt;&lt;/script&gt;
-  &lt;/head&gt;
+    </style>
+    <script type="text/javascript" src="main.js"></script>
+  </head>
 
-  &lt;body onload="processor.doLoad()"&gt;
-    &lt;div&gt;
-      &lt;video id="video" src="video.ogv" controls="true"/&gt;
-    &lt;/div&gt;
-    &lt;div&gt;
-      &lt;canvas id="c1" width="160" height="96"&gt;&lt;/canvas&gt;
-      &lt;canvas id="c2" width="160" height="96"&gt;&lt;/canvas&gt;
-    &lt;/div&gt;
-  &lt;/body&gt;
-&lt;/html&gt;</pre>
+  <body onload="processor.doLoad()">
+    <div>
+      <video id="video" src="video.ogv" controls="true"/>
+    </div>
+    <div>
+      <canvas id="c1" width="160" height="96"></canvas>
+      <canvas id="c2" width="160" height="96"></canvas>
+    </div>
+  </body>
+</html>
+```
 
-<p>Les éléments clés à retenir sont :</p>
+Les éléments clés à retenir sont :
 
-<ol>
- <li>Ce document dispose de deux balises <a href="/fr/docs/Web/HTML/Element/canvas"><code>canvas</code></a>, avec les IDs <code>c1 </code>et <code>c2 :</code> l'élément <code>c1</code> est utilisé pour afficher l'image courante de la vidéo originale, pendant que <code>c2</code> est utilisé pour afficher la vidéo après application de l'effet d'incrustation ; <code>c2</code> est préchargé avec la même image que celle qui sera utilisée pour le remplacement du fond vert.</li>
- <li>Le code JavaScript est importé dans le script nommé <code>main.js</code> ; Ce script utilise les fonctionnalités propres à la version 1.8, aussi cette version est précisée, à la ligne 22, quand le script est importé.</li>
- <li>Quand le document se charge, la méthode <code>processor.doLoad()</code>, dans le script <code>main.js</code>, est exécutée.</li>
-</ol>
+1.  Ce document dispose de deux balises [`canvas`](/fr/docs/Web/HTML/Element/canvas), avec les IDs `c1 `et `c2 :` l'élément `c1` est utilisé pour afficher l'image courante de la vidéo originale, pendant que `c2` est utilisé pour afficher la vidéo après application de l'effet d'incrustation ; `c2` est préchargé avec la même image que celle qui sera utilisée pour le remplacement du fond vert.
+2.  Le code JavaScript est importé dans le script nommé `main.js` ; Ce script utilise les fonctionnalités propres à la version 1.8, aussi cette version est précisée, à la ligne 22, quand le script est importé.
+3.  Quand le document se charge, la méthode `processor.doLoad()`, dans le script `main.js`, est exécutée.
 
-<h2 id="Le_code_JavaScript">Le code JavaScript</h2>
+## Le code JavaScript
 
-<p>Le code JavaScript <code>main.js</code> est composé de trois méthodes.</p>
+Le code JavaScript `main.js` est composé de trois méthodes.
 
-<h3 id="Initialisation_du_lecteur_avec_effet_d'incrustation_(chroma-key)">Initialisation du lecteur avec effet d'incrustation (<em>chroma-key</em>)</h3>
+### Initialisation du lecteur avec effet d'incrustation (_chroma-key_)
 
-<p>La métode <code>doLoad()</code> est appelée quand le document XHTML se charge. Cette méthode sert à initialiser chaque variable nécessaire au code traitant l'incrustation (<em>chroma-key</em>), ainsi qu'à associer un écouteur d'évènement qui détectera le moment où l'utilisateur lancera la vidéo.</p>
+La métode `doLoad()` est appelée quand le document XHTML se charge. Cette méthode sert à initialiser chaque variable nécessaire au code traitant l'incrustation (_chroma-key_), ainsi qu'à associer un écouteur d'évènement qui détectera le moment où l'utilisateur lancera la vidéo.
 
-<pre class="brush: js">var processor;
+```js
+var processor;
 
   processor.doLoad = function doLoad() {
     this.video = document.getElementById('video');
@@ -81,17 +82,19 @@ original_slug: HTML/Manipulating_video_using_canvas
         self.height = self.video.videoHeight / 2;
         self.timerCallback();
       }, false);
-  },</pre>
+  },
+```
 
-<p>Le code récupère les références aux élément XHTML qui nous intéressent, à savoir l'élément <code>video</code> et les deux éléments <code>canvas</code>. Il définit également les contextes graphique de chacun des éléments <code>canvas</code>. Ce sera utile pour la suite, lorsque nous créerons l'effet d'incrustation.</p>
+Le code récupère les références aux élément XHTML qui nous intéressent, à savoir l'élément `video` et les deux éléments `canvas`. Il définit également les contextes graphique de chacun des éléments `canvas`. Ce sera utile pour la suite, lorsque nous créerons l'effet d'incrustation.
 
-<p>Ensuite, l'écouteur d'évènement <code>addEventListener()</code> est appelé sur l'élément <code>video</code> pour détecter le moment où l'utilisateur va cliquer sur le bouton de lecture. Dès lors, le code récupère la hauteur et la largeur de la vidéo, que l'on divise par deux (nécessaire pour plus tard effectuer l'effet d'incrustation), puis on appelle la méthode <code>timerCallback()</code> pour surveiller l'avancement de la vidéo et appliquer l'effet visuel.</p>
+Ensuite, l'écouteur d'évènement `addEventListener()` est appelé sur l'élément `video` pour détecter le moment où l'utilisateur va cliquer sur le bouton de lecture. Dès lors, le code récupère la hauteur et la largeur de la vidéo, que l'on divise par deux (nécessaire pour plus tard effectuer l'effet d'incrustation), puis on appelle la méthode `timerCallback()` pour surveiller l'avancement de la vidéo et appliquer l'effet visuel.
 
-<h3 id="Le_rappel_du_minuteur">Le rappel du minuteur</h3>
+### Le rappel du minuteur
 
-<p>Le rappel du minuteur est initialisé lorsque la vidéo commence à jouer (lorsque l'événement "play" se produit), puis est chargé d'établir le rappel périodique afin de lancer l'effet d'ajustement pour chaque "frame".</p>
+Le rappel du minuteur est initialisé lorsque la vidéo commence à jouer (lorsque l'événement "play" se produit), puis est chargé d'établir le rappel périodique afin de lancer l'effet d'ajustement pour chaque "frame".
 
-<pre class="brush: js">processor.timerCallback = function timerCallback() {
+```js
+processor.timerCallback = function timerCallback() {
     if (this.video.paused || this.video.ended) {
       return;
     }
@@ -100,60 +103,61 @@ original_slug: HTML/Manipulating_video_using_canvas
     setTimeout(function() {
         self.timerCallback();
       }, 0);
-  },</pre>
+  },
+```
 
-<p>La première chose que le rappel fait est de vérifier si la vidéo est en train de jouer. Si ce n'est pas le cas, le rappel revient immédiatement sans rien faire.</p>
+La première chose que le rappel fait est de vérifier si la vidéo est en train de jouer. Si ce n'est pas le cas, le rappel revient immédiatement sans rien faire.
 
-<p>Ensuite, il appelle la méthode <code>computeFrame()</code>, qui effectue l'effet  "chroma-keying"  sur l'image vidéo en cours.</p>
+Ensuite, il appelle la méthode `computeFrame()`, qui effectue l'effet "chroma-keying" sur l'image vidéo en cours.
 
-<p>La dernière chose que fait le rappel est d'appeler <code>setTimeout()</code> pour programmer un nouvel appel. En réalité, vous planifierez probablement cela en fonction de la connaissance de la fréquence d'images de la vidéo.</p>
+La dernière chose que fait le rappel est d'appeler `setTimeout()` pour programmer un nouvel appel. En réalité, vous planifierez probablement cela en fonction de la connaissance de la fréquence d'images de la vidéo.
 
-<h3 id="Manipulation_des_données_des_images_vidéo">Manipulation des données des images vidéo</h3>
+### Manipulation des données des images vidéo
 
-<p>La méthode <code>computeFrame()</code> , présentée ci-dessous, est en charge de récupérer les données de chaque image et d'y appliquer l'effet d'incrustation.</p>
+La méthode `computeFrame()` , présentée ci-dessous, est en charge de récupérer les données de chaque image et d'y appliquer l'effet d'incrustation.
 
-<pre class="brush: js">processor.computeFrame = function computeFrame() {
+```js
+processor.computeFrame = function computeFrame() {
     this.ctx1.drawImage(this.video, 0, 0, this.width, this.height);
     let frame = this.ctx1.getImageData(0, 0, this.width, this.height);
     let l = frame.data.length / 4;
 
-    for (let i = 0; i &lt; l; i++) {
+    for (let i = 0; i < l; i++) {
       let r = frame.data[i * 4 + 0];
       let g = frame.data[i * 4 + 1];
       let b = frame.data[i * 4 + 2];
-      if (g &gt; 100 &amp;&amp; r &gt; 100 &amp;&amp; b &lt; 43)
+      if (g > 100 && r > 100 && b < 43)
         frame.data[i * 4 + 3] = 0;
     }
     this.ctx2.putImageData(frame, 0, 0);
     return;
-  }</pre>
+  }
+```
 
-<p>²</p>
+²
 
-<p>Quand la routine est appelée, l'élément vidéo affiche les données de la plus récente image de la vidéo, ce qui ressemble à :</p>
+Quand la routine est appelée, l'élément vidéo affiche les données de la plus récente image de la vidéo, ce qui ressemble à :
 
-<p><img src="video.png"></p>
+![](video.png)
 
-<p>À la seconde ligne, cette image est copiée dans le contexte graphique <code>ctx1</code> du premier élément <code>canvas</code>, en spécifiant ses hauteur et largeur, définies plus tôt (soit, réduites de moitié). Notez que c'est très simplement que vous passez les données de l'élément vidéo à afficher dans le contexte graphique avec la méthode <code>drawImage()</code>. Voici ce que cela donne :</p>
+À la seconde ligne, cette image est copiée dans le contexte graphique `ctx1` du premier élément `canvas`, en spécifiant ses hauteur et largeur, définies plus tôt (soit, réduites de moitié). Notez que c'est très simplement que vous passez les données de l'élément vidéo à afficher dans le contexte graphique avec la méthode `drawImage()`. Voici ce que cela donne :
 
-<p><img src="sourcectx.png"></p>
+![](sourcectx.png)
 
-<p>La ligne 3 extrait une copie des données graphiques brutes pour l'image courante de la vidéo en appelant la méthode <code>getImageData() </code>sur le premier contexte. Cela fournit des données brutes d'image pixel 32 bits que nous pouvons ensuite manipuler. La ligne 4 calcule le nombre de pixels de l'image en divisant la taille totale des données d'image du cadre par quatre.</p>
+La ligne 3 extrait une copie des données graphiques brutes pour l'image courante de la vidéo en appelant la méthode `getImageData() `sur le premier contexte. Cela fournit des données brutes d'image pixel 32 bits que nous pouvons ensuite manipuler. La ligne 4 calcule le nombre de pixels de l'image en divisant la taille totale des données d'image du cadre par quatre.
 
-<p>La boucle <code>for</code>, qui commence à la ligne 6, parcourt les pixels du cadre  en extrayant les valeurs rouges, vertes et bleues de chaque pixel et compare les valeurs aux nombres prédéterminés utilisés pour détecter l'écran vert qui sera remplacé par l'image de fond importée de <code>foo.png</code>.</p>
+La boucle `for`, qui commence à la ligne 6, parcourt les pixels du cadre  en extrayant les valeurs rouges, vertes et bleues de chaque pixel et compare les valeurs aux nombres prédéterminés utilisés pour détecter l'écran vert qui sera remplacé par l'image de fond importée de `foo.png`.
 
-<p>Chaque pixel dans les données d'image, qui se trouve dans les paramètres considérés comme faisant partie de l'écran vert, a sa valeur alpha remplacée par un zéro, indiquant que le pixel est entièrement transparent. En conséquence, l'image finale a toute la zone d'écran vert 100% transparente, de sorte que lorsqu'elle est dessinée dans le contexte de destination à la ligne 13, le résultat est une superposition sur la toile de fond statique.</p>
+Chaque pixel dans les données d'image, qui se trouve dans les paramètres considérés comme faisant partie de l'écran vert, a sa valeur alpha remplacée par un zéro, indiquant que le pixel est entièrement transparent. En conséquence, l'image finale a toute la zone d'écran vert 100% transparente, de sorte que lorsqu'elle est dessinée dans le contexte de destination à la ligne 13, le résultat est une superposition sur la toile de fond statique.
 
-<p>L'image résultante ressemble à ceci :</p>
+L'image résultante ressemble à ceci :
 
-<p><img src="output.png"></p>
+![](output.png)
 
-<p>Cela se fait de façon répétée au fur et à mesure que la vidéo est lue, de sorte que, image après image, la vidéo est traitée et affichée avec l'effet de chrominance.</p>
+Cela se fait de façon répétée au fur et à mesure que la vidéo est lue, de sorte que, image après image, la vidéo est traitée et affichée avec l'effet de chrominance.
 
-<p><a href="/samples/video/chroma-key/index.xhtml">Voyez cet exemple réel</a>.</p>
+[Voyez cet exemple réel](/samples/video/chroma-key/index.xhtml).
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Using audio and video</a></li>
-</ul>
+- [Using audio and video](/fr/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content)
diff --git a/files/fr/web/api/canvas_api/tutorial/advanced_animations/index.md b/files/fr/web/api/canvas_api/tutorial/advanced_animations/index.md
index d21ac69028..7581b9eb2e 100644
--- a/files/fr/web/api/canvas_api/tutorial/advanced_animations/index.md
+++ b/files/fr/web/api/canvas_api/tutorial/advanced_animations/index.md
@@ -4,20 +4,22 @@ slug: Web/API/Canvas_API/Tutorial/Advanced_animations
 translation_of: Web/API/Canvas_API/Tutorial/Advanced_animations
 original_slug: Web/API/Canvas_API/Tutoriel_canvas/Advanced_animations
 ---
-<div>{{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas/Animations_basiques", "Tutoriel_canvas/Pixel_manipulation_with_canvas")}}</div>
+{{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas/Animations_basiques", "Tutoriel_canvas/Pixel_manipulation_with_canvas")}}
 
-<p>Dans le dernier chapitre, nous avons réalisé des <a href="/fr/docs/Tutoriel_canvas/Animations_basiques">animations basiques</a> et avons appris comment faire en sorte que les éléments se déplacent. Dans cette partie, nous allons regarder de prêt le mouvement lui-même et ajouter un peu de physique afin de réaliser nos animations avancées.</p>
+Dans le dernier chapitre, nous avons réalisé des [animations basiques](/fr/docs/Tutoriel_canvas/Animations_basiques) et avons appris comment faire en sorte que les éléments se déplacent. Dans cette partie, nous allons regarder de prêt le mouvement lui-même et ajouter un peu de physique afin de réaliser nos animations avancées.
 
-<h2 id="Dessinons_une_balle">Dessinons une balle</h2>
+## Dessinons une balle
 
-<p>Nous allons utiliser une balle pour étudier les animations. Ainsi, Commençons par dessiner notre balle au sein du canevas.</p>
+Nous allons utiliser une balle pour étudier les animations. Ainsi, Commençons par dessiner notre balle au sein du canevas.
 
-<pre class="brush: html">&lt;canvas id="canvas" width="600" height="300"&gt;&lt;/canvas&gt;
-</pre>
+```html
+<canvas id="canvas" width="600" height="300"></canvas>
+```
 
-<p>Comme d'habitude, nous avons tout d'abord besoin de dessiner le contexte. Pour dessiner la balle, nous allons créer un objet <code>ball</code> contenant des propriétés et une méthode <code>draw()</code> afin de la placer sur le canevas.</p>
+Comme d'habitude, nous avons tout d'abord besoin de dessiner le contexte. Pour dessiner la balle, nous allons créer un objet `ball` contenant des propriétés et une méthode `draw()` afin de la placer sur le canevas.
 
-<pre class="brush: js">var canvas = document.getElementById('canvas');
+```js
+var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
 
 var ball = {
@@ -34,15 +36,17 @@ var ball = {
   }
 };
 
-ball.draw();</pre>
+ball.draw();
+```
 
-<p>Il n'y a rien de spécial ici, la balle est pour le moment un simple cercle qui est dessiné à l'aide de la méthode {{domxref("CanvasRenderingContext2D.arc()", "arc()")}}.</p>
+Il n'y a rien de spécial ici, la balle est pour le moment un simple cercle qui est dessiné à l'aide de la méthode {{domxref("CanvasRenderingContext2D.arc()", "arc()")}}.
 
-<h2 id="Ajout_de_la_vitesse">Ajout de la vitesse</h2>
+## Ajout de la vitesse
 
-<p>Maintenant que nous avons une balle, nous sommes prêts à ajouter une animation simple comme nous avons pu le voir dans le <a href="/fr/docs/Tutoriel_canvas/Animations_basiques">dernier chapitre</a> de ce tutoriel. Une fois encore, {{domxref("window.requestAnimationFrame()")}} nous aide à contrôler l'animation. Il est possible de déplacer la balle en ajoutant un vecteur de vitesse à la position. Pour chaque "frame", nous avons aussi {{domxref("CanvasRenderingContext2D.clearRect", "clear", "", 1)}} <em>(nettoyé)</em> les canvas pour supprimer les anciens cercles des "frames" précédents.</p>
+Maintenant que nous avons une balle, nous sommes prêts à ajouter une animation simple comme nous avons pu le voir dans le [dernier chapitre](/fr/docs/Tutoriel_canvas/Animations_basiques) de ce tutoriel. Une fois encore, {{domxref("window.requestAnimationFrame()")}} nous aide à contrôler l'animation. Il est possible de déplacer la balle en ajoutant un vecteur de vitesse à la position. Pour chaque "frame", nous avons aussi {{domxref("CanvasRenderingContext2D.clearRect", "clear", "", 1)}} _(nettoyé)_ les canvas pour supprimer les anciens cercles des "frames" précédents.
 
-<pre class="brush: js">var canvas = document.getElementById('canvas');
+```js
+var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
 var raf;
 
@@ -79,26 +83,31 @@ canvas.addEventListener("mouseout",function(e){
 });
 
 ball.draw();
-</pre>
+```
 
-<h2 id="Limites">Limites</h2>
+## Limites
 
-<p>Si aucun test de collision n'est effectué, notre balle sort hors du canevas rapidement. Nous avons ici besoin de vérifier si les positions <code>x</code> et <code>y</code> de la balle sont hors des dimensions du canevas et si c'est le cas, d'inverser la direction des vecteurs de vitesse. Pour faire cela, nous ajoutons les vérifications suivantes à la méthode <code>draw</code> :</p>
+Si aucun test de collision n'est effectué, notre balle sort hors du canevas rapidement. Nous avons ici besoin de vérifier si les positions `x` et `y` de la balle sont hors des dimensions du canevas et si c'est le cas, d'inverser la direction des vecteurs de vitesse. Pour faire cela, nous ajoutons les vérifications suivantes à la méthode `draw` :
 
-<pre class="brush: js">if (ball.y + ball.vy &gt; canvas.height || ball.y + ball.vy &lt; 0) {
+```js
+if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
   ball.vy = -ball.vy;
 }
-if (ball.x + ball.vx &gt; canvas.width || ball.x + ball.vx &lt; 0) {
+if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
   ball.vx = -ball.vx;
-}</pre>
+}
+```
 
-<h3 id="Première_demo">Première demo</h3>
+### Première demo
 
-<p>Voyons voir ce que cela donne. Déplacez votre souris dans le canevas pour commencer l'animation :</p>
+Voyons voir ce que cela donne. Déplacez votre souris dans le canevas pour commencer l'animation :
 
-<pre class="brush: html hidden">&lt;canvas id="canvas" style="border: 1px solid" width="600" height="300"&gt;&lt;/canvas&gt;</pre>
+```html hidden
+<canvas id="canvas" style="border: 1px solid" width="600" height="300"></canvas>
+```
 
-<pre class="brush: js hidden">var canvas = document.getElementById('canvas');
+```js hidden
+var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
 var raf;
 
@@ -124,12 +133,12 @@ function draw() {
   ball.x += ball.vx;
   ball.y += ball.vy;
 
-  if (ball.y + ball.vy &gt; canvas.height ||
-      ball.y + ball.vy &lt; 0) {
+  if (ball.y + ball.vy > canvas.height ||
+      ball.y + ball.vy < 0) {
     ball.vy = -ball.vy;
   }
-  if (ball.x + ball.vx &gt; canvas.width ||
-      ball.x + ball.vx &lt; 0) {
+  if (ball.x + ball.vx > canvas.width ||
+      ball.x + ball.vx < 0) {
     ball.vx = -ball.vx;
   }
 
@@ -144,24 +153,30 @@ canvas.addEventListener("mouseout",function(e){
   window.cancelAnimationFrame(raf);
 });
 
-ball.draw();</pre>
+ball.draw();
+```
 
-<p>{{EmbedLiveSample("Première_demo", "610", "310")}}</p>
+{{EmbedLiveSample("Première_demo", "610", "310")}}
 
-<h2 id="Accélération">Accélération</h2>
+## Accélération
 
-<p>Afin d'obtenir un mouvement plus réel, vous pouvez jouer sur la vitesse, par exemple :</p>
+Afin d'obtenir un mouvement plus réel, vous pouvez jouer sur la vitesse, par exemple :
 
-<pre class="brush: js">ball.vy *= .99;
-ball.vy += .25;</pre>
+```js
+ball.vy *= .99;
+ball.vy += .25;
+```
 
-<p>Ceci ralentit la vitesse verticale à chaque rendu d'image de sorte que la balle va rebondir de moins en moins haut.</p>
+Ceci ralentit la vitesse verticale à chaque rendu d'image de sorte que la balle va rebondir de moins en moins haut.
 
-<h3 id="deuxième_démo">Deuxième démo</h3>
+### Deuxième démo
 
-<pre class="brush: html hidden">&lt;canvas id="canvas" style="border: 1px solid" width="600" height="300"&gt;&lt;/canvas&gt;</pre>
+```html hidden
+<canvas id="canvas" style="border: 1px solid" width="600" height="300"></canvas>
+```
 
-<pre class="brush: js hidden">var canvas = document.getElementById('canvas');
+```js hidden
+var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
 var raf;
 
@@ -189,12 +204,12 @@ function draw() {
   ball.vy *= .99;
   ball.vy += .25;
 
-  if (ball.y + ball.vy &gt; canvas.height ||
-      ball.y + ball.vy &lt; 0) {
+  if (ball.y + ball.vy > canvas.height ||
+      ball.y + ball.vy < 0) {
     ball.vy = -ball.vy;
   }
-  if (ball.x + ball.vx &gt; canvas.width ||
-      ball.x + ball.vx &lt; 0) {
+  if (ball.x + ball.vx > canvas.width ||
+      ball.x + ball.vx < 0) {
     ball.vx = -ball.vx;
   }
 
@@ -209,22 +224,28 @@ canvas.addEventListener("mouseout",function(e){
   window.cancelAnimationFrame(raf);
 });
 
-ball.draw();</pre>
+ball.draw();
+```
 
-<p>{{EmbedLiveSample("deuxième_démo", "610", "310")}}</p>
+{{EmbedLiveSample("deuxième_démo", "610", "310")}}
 
-<h2 id="Effet_de_traînée">Effet de traînée</h2>
+## Effet de traînée
 
-<p>Jusqu'à maintenant, nous avons utilisé la méthode {{domxref("CanvasRenderingContext2D.clearRect", "clearRect")}} pour effacer les images précédentes. En la remplaçant par la méthode {{domxref("CanvasRenderingContext2D.fillRect", "fillRect")}} et en utilisant un remplissage semi-transparent, on obtient un effet de traînée.</p>
+Jusqu'à maintenant, nous avons utilisé la méthode {{domxref("CanvasRenderingContext2D.clearRect", "clearRect")}} pour effacer les images précédentes. En la remplaçant par la méthode {{domxref("CanvasRenderingContext2D.fillRect", "fillRect")}} et en utilisant un remplissage semi-transparent, on obtient un effet de traînée.
 
-<pre class="brush: js">ctx.fillStyle = 'rgba(255,255,255,0.3)';
-ctx.fillRect(0,0,canvas.width,canvas.height);</pre>
+```js
+ctx.fillStyle = 'rgba(255,255,255,0.3)';
+ctx.fillRect(0,0,canvas.width,canvas.height);
+```
 
-<h3 id="troisième_demo">Troisième démo</h3>
+### Troisième démo
 
-<pre class="brush: html hidden">&lt;canvas id="canvas" style="border: 1px solid" width="600" height="300"&gt;&lt;/canvas&gt;</pre>
+```html hidden
+<canvas id="canvas" style="border: 1px solid" width="600" height="300"></canvas>
+```
 
-<pre class="brush: js hidden">var canvas = document.getElementById('canvas');
+```js hidden
+var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
 var raf;
 
@@ -253,12 +274,12 @@ function draw() {
   ball.vy *= .99;
   ball.vy += .25;
 
-  if (ball.y + ball.vy &gt; canvas.height ||
-      ball.y + ball.vy &lt; 0) {
+  if (ball.y + ball.vy > canvas.height ||
+      ball.y + ball.vy < 0) {
     ball.vy = -ball.vy;
   }
-  if (ball.x + ball.vx &gt; canvas.width ||
-      ball.x + ball.vx &lt; 0) {
+  if (ball.x + ball.vx > canvas.width ||
+      ball.x + ball.vx < 0) {
     ball.vx = -ball.vx;
   }
 
@@ -273,17 +294,21 @@ canvas.addEventListener("mouseout",function(e){
   window.cancelAnimationFrame(raf);
 });
 
-ball.draw();</pre>
+ball.draw();
+```
 
-<p>{{EmbedLiveSample("troisième_démo", "610", "310")}}</p>
+{{EmbedLiveSample("troisième_démo", "610", "310")}}
 
-<h2 id="Ajout_dun_contrôle_de_souris">Ajout d'un contrôle de souris</h2>
+## Ajout d'un contrôle de souris
 
-<p>Afin d'obtenir quelques contrôles sur la balle, nous pouvons faire suivre notre souris en utilisant l'événement <code><a href="/en-US/docs/Web/Reference/Events/mousemove">mousemove</a></code>, par exemple. L'événement <code><a href="/en-US/docs/Web/Events/click">click</a></code> relâche la balle et la laisse rebondir à nouveau.</p>
+Afin d'obtenir quelques contrôles sur la balle, nous pouvons faire suivre notre souris en utilisant l'événement [`mousemove`](/en-US/docs/Web/Reference/Events/mousemove), par exemple. L'événement [`click`](/en-US/docs/Web/Events/click) relâche la balle et la laisse rebondir à nouveau.
 
-<pre class="brush: html hidden">&lt;canvas id="canvas" style="border: 1px solid" width="600" height="300"&gt;&lt;/canvas&gt;</pre>
+```html hidden
+<canvas id="canvas" style="border: 1px solid" width="600" height="300"></canvas>
+```
 
-<pre class="brush: js">var canvas = document.getElementById('canvas');
+```js
+var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
 var raf;
 var running = false;
@@ -315,10 +340,10 @@ function draw() {
   ball.x += ball.vx;
   ball.y += ball.vy;
 
-  if (ball.y + ball.vy &gt; canvas.height || ball.y + ball.vy &lt; 0) {
+  if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
     ball.vy = -ball.vy;
   }
-  if (ball.x + ball.vx &gt; canvas.width || ball.x + ball.vx &lt; 0) {
+  if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
     ball.vx = -ball.vx;
   }
 
@@ -347,21 +372,19 @@ canvas.addEventListener("mouseout",function(e){
 });
 
 ball.draw();
-</pre>
+```
 
-<p>Déplacez la balle en utilisant votre souris et relâchez-la avec un click.</p>
+Déplacez la balle en utilisant votre souris et relâchez-la avec un click.
 
-<p>{{EmbedLiveSample("Ajout_d'un_contrôle_de_souris", "610", "310")}}</p>
+{{EmbedLiveSample("Ajout_d'un_contrôle_de_souris", "610", "310")}}
 
-<h2 id="Casse-briques">Casse-briques</h2>
+## Casse-briques
 
-<p>Ce petit chapitre explique seulement quelques techniques pour créer des animations avancées. Il en existe bien davantage ! Que diriez-vous d'ajouter une raquette, des briques et de transformer cette démo en une partie de casse-briques ? Consultez notre zone de développement de jeux pour plus d'articles liés <a href="/fr/docs/Jeux">aux jeux</a>.</p>
+Ce petit chapitre explique seulement quelques techniques pour créer des animations avancées. Il en existe bien davantage ! Que diriez-vous d'ajouter une raquette, des briques et de transformer cette démo en une partie de casse-briques ? Consultez notre zone de développement de jeux pour plus d'articles liés [aux jeux](/fr/docs/Jeux).
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("window.requestAnimationFrame()")}}</li>
- <li><a href="/fr/docs/Games/Techniques/Efficient_animation_for_web_games">Animation efficace pour les jeux vidéo</a></li>
-</ul>
+- {{domxref("window.requestAnimationFrame()")}}
+- [Animation efficace pour les jeux vidéo](/fr/docs/Games/Techniques/Efficient_animation_for_web_games)
 
-<p>{{PreviousNext("Tutoriel_canvas/Animations_basiques", "Tutoriel_canvas/Pixel_manipulation_with_canvas")}}</p>
+{{PreviousNext("Tutoriel_canvas/Animations_basiques", "Tutoriel_canvas/Pixel_manipulation_with_canvas")}}
diff --git a/files/fr/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md b/files/fr/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md
index 12d7d76e45..9449c304d0 100644
--- a/files/fr/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md
+++ b/files/fr/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md
@@ -10,68 +10,72 @@ tags:
 translation_of: Web/API/Canvas_API/Tutorial/Applying_styles_and_colors
 original_slug: Web/API/Canvas_API/Tutoriel_canvas/Ajout_de_styles_et_de_couleurs
 ---
-<div>{{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas/Formes_géométriques", "Dessin_de_texte_avec_canvas")}}</div>
+{{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas/Formes_géométriques", "Dessin_de_texte_avec_canvas")}}
 
-<p>Dans le chapitre sur <a href="/fr/docs/Tutoriel_canvas/Formes_g%C3%A9om%C3%A9triques">les formes géométriques</a>, nous avons utilisé les styles de lignes et de remplissage par défaut. Ici, nous allons explorer les options de canvas à notre disposition pour rendre nos dessins un peu plus attrayants. Vous apprendrez comment ajouter des couleurs différentes, des styles de ligne, des dégradés, des motifs et des ombres à vos dessins.</p>
+Dans le chapitre sur [les formes géométriques](/fr/docs/Tutoriel_canvas/Formes_g%C3%A9om%C3%A9triques), nous avons utilisé les styles de lignes et de remplissage par défaut. Ici, nous allons explorer les options de canvas à notre disposition pour rendre nos dessins un peu plus attrayants. Vous apprendrez comment ajouter des couleurs différentes, des styles de ligne, des dégradés, des motifs et des ombres à vos dessins.
 
-<h2 id="Colors">Les couleurs</h2>
+## Les couleurs
 
-<p>Jusqu'à présent, nous avons seulement vu des méthodes sur le contexte de dessin. Si nous voulons appliquer des couleurs à une forme, il y a deux propriétés importantes que nous pouvons utiliser : <code>fillStyle</code> et <code>strokeStyle</code> .</p>
+Jusqu'à présent, nous avons seulement vu des méthodes sur le contexte de dessin. Si nous voulons appliquer des couleurs à une forme, il y a deux propriétés importantes que nous pouvons utiliser : `fillStyle` et `strokeStyle` .
 
-<dl>
- <dt>{{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle = color")}}</dt>
- <dd>Définit le style utilisé lors du remplissage de formes.</dd>
- <dt>{{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle = color")}}</dt>
- <dd>Définit le style pour les contours des formes.</dd>
-</dl>
+- {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle = color")}}
+  - : Définit le style utilisé lors du remplissage de formes.
+- {{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle = color")}}
+  - : Définit le style pour les contours des formes.
 
-<p><code>color</code> est une chaîne représentant un CSS {{cssxref("&lt;color&gt;")}}, d'un objet gradient ou d'un objet motif. Nous allons examiner le gradient et la structure des objets plus tard. Par défaut, l'encadrement et la couleur de remplissage sont fixés sur noir (valeur <code>#000000</code> de CSS <code>color</code>).</p>
+`color` est une chaîne représentant un CSS {{cssxref("&lt;color&gt;")}}, d'un objet gradient ou d'un objet motif. Nous allons examiner le gradient et la structure des objets plus tard. Par défaut, l'encadrement et la couleur de remplissage sont fixés sur noir (valeur `#000000` de CSS `color`).
 
-<div class="note">
-<p><strong>Note :</strong> Lorsque vous définissez <code>strokeStyle</code> et <code>fillStyle</code>, la nouvelle valeur devient la valeur par défaut pour toutes les formes en cours d'élaboration à partir de là. Pour chaque forme que vous voulez dans une couleur différente, vous aurez besoin de réaffecter <code>fillStyle</code> ou <code>strokeStyle</code>.</p>
-</div>
+> **Note :** Lorsque vous définissez `strokeStyle` et `fillStyle`, la nouvelle valeur devient la valeur par défaut pour toutes les formes en cours d'élaboration à partir de là. Pour chaque forme que vous voulez dans une couleur différente, vous aurez besoin de réaffecter `fillStyle` ou `strokeStyle`.
 
-<p>Les chaînes pour être valides, doivent être conforme à la spécification CSS {{cssxref("&lt;color&gt;")}}. Chacun des exemples suivants décrit la même couleur.</p>
+Les chaînes pour être valides, doivent être conforme à la spécification CSS {{cssxref("&lt;color&gt;")}}. Chacun des exemples suivants décrit la même couleur.
 
-<pre class="brush: js">// Les valeurs possibles de fillStyle pour "orange"
+```js
+// Les valeurs possibles de fillStyle pour "orange"
 
 ctx.fillStyle = 'orange';
 ctx.fillStyle = '#FFA500';
 ctx.fillStyle = 'rgb(255, 165, 0)';
-ctx.fillStyle = 'rgba(255, 165, 0, 1)';</pre>
+ctx.fillStyle = 'rgba(255, 165, 0, 1)';
+```
 
-<h3 id="A_fillStyle_example">Un exemple <code>fillStyle</code></h3>
+### Un exemple `fillStyle`
 
-<p>Dans cet exemple, nous utilisons une nouvelle fois deux boucles <code>for</code> pour dessiner une grille de rectangles, chacun dans une couleur différente. L'image résultante devrait ressembler à la capture d'écran. Il n'y a rien de spectaculaire ici. Nous utilisons les deux variables <code>i</code> et <code>j</code> pour générer une couleur RVB unique pour chaque carré, et seulement modifier les valeurs rouges et vertes. Le canal bleu a une valeur fixe. En modifiant les canaux, vous pouvez générer toutes sortes de palettes. En augmentant les étapes, vous pouvez obtenir quelque chose qui ressemble à des palettes de couleurs que Photoshop utilise.</p>
+Dans cet exemple, nous utilisons une nouvelle fois deux boucles `for` pour dessiner une grille de rectangles, chacun dans une couleur différente. L'image résultante devrait ressembler à la capture d'écran. Il n'y a rien de spectaculaire ici. Nous utilisons les deux variables `i` et `j` pour générer une couleur RVB unique pour chaque carré, et seulement modifier les valeurs rouges et vertes. Le canal bleu a une valeur fixe. En modifiant les canaux, vous pouvez générer toutes sortes de palettes. En augmentant les étapes, vous pouvez obtenir quelque chose qui ressemble à des palettes de couleurs que Photoshop utilise.
 
-<pre class="brush: js">function draw() {
+```js
+function draw() {
   var ctx = document.getElementById('canvas').getContext('2d');
-  for (var i = 0; i &lt; 6; i++) {
-    for (var j = 0; j &lt; 6; j++) {
+  for (var i = 0; i < 6; i++) {
+    for (var j = 0; j < 6; j++) {
       ctx.fillStyle = 'rgb(' + Math.floor(255 - 42.5 * i) + ',' +
                        Math.floor(255 - 42.5 * j) + ',0)';
       ctx.fillRect(j * 25, i * 25, 25, 25);
     }
   }
-}</pre>
-
-<pre class="brush: html hidden">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+}
+```
 
-<pre class="brush: js hidden">draw();</pre>
+```html hidden
+<canvas id="canvas" width="150" height="150"></canvas>
+```
 
+```js hidden
+draw();
+```
 
-<p>Le résultat ressemble à ceci:</p>
+Le résultat ressemble à ceci:
 
-<p>{{EmbedLiveSample("A_fillStyle_example", 160, 160, "canvas_fillstyle.png")}}</p>
+{{EmbedLiveSample("A_fillStyle_example", 160, 160, "canvas_fillstyle.png")}}
 
-<h3 id="A_strokeStyle_example">Un exemple <code>strokeStyle</code></h3>
+### Un exemple `strokeStyle`
 
-<p>Cet exemple est similaire à celui ci-dessus, mais utilise <code>strokeStyle</code> pour changer les couleurs des contours des formes. Nous utilisons la méthode <code>arc()</code> pour dessiner des cercles au lieu de carrés.</p>
+Cet exemple est similaire à celui ci-dessus, mais utilise `strokeStyle` pour changer les couleurs des contours des formes. Nous utilisons la méthode `arc()` pour dessiner des cercles au lieu de carrés.
 
-<pre class="brush: js">function draw() {
+```js
+function draw() {
     var ctx = document.getElementById('canvas').getContext('2d');
-    for (var i = 0; i &lt; 6; i++) {
-      for (var j = 0; j &lt; 6; j++) {
+    for (var i = 0; i < 6; i++) {
+      for (var j = 0; j < 6; j++) {
         ctx.strokeStyle = 'rgb(0, ' + Math.floor(255 - 42.5 * i) + ', ' +
                          Math.floor(255 - 42.5 * j) + ')';
         ctx.beginPath();
@@ -79,44 +83,47 @@ ctx.fillStyle = 'rgba(255, 165, 0, 1)';</pre>
         ctx.stroke();
       }
     }
-  }</pre>
-
-
-<pre class="brush: html hidden">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+  }
+```
 
-<pre class="brush: js hidden">draw();</pre>
+```html hidden
+<canvas id="canvas" width="150" height="150"></canvas>
+```
 
+```js hidden
+draw();
+```
 
-<p>Le résultat ressemble à ceci :</p>
+Le résultat ressemble à ceci :
 
-<p>{{EmbedLiveSample("A_strokeStyle_example", "180", "180", "canvas_strokestyle.png")}}</p>
+{{EmbedLiveSample("A_strokeStyle_example", "180", "180", "canvas_strokestyle.png")}}
 
-<h2 id="Transparency">Transparence</h2>
+## Transparence
 
-<p>En plus de dessiner des formes opaques sur la toile, nous pouvons également dessiner des formes semi-transparentes (ou translucides). Cela se fait soit par le réglage de <code>globalAlpha</code> ou en attribuant une couleur semi-transparente à <code>strokeStyle</code> et/ou <code>fillStyle</code>.</p>
+En plus de dessiner des formes opaques sur la toile, nous pouvons également dessiner des formes semi-transparentes (ou translucides). Cela se fait soit par le réglage de `globalAlpha` ou en attribuant une couleur semi-transparente à `strokeStyle` et/ou `fillStyle`.
 
-<dl>
- <dt>{{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha = transparencyValue")}}</dt>
- <dd>Applique la valeur de transparence spécifiée à toutes les formes futures tracées sur le Canvas. La valeur doit être comprise entre 0.0 (complètement transparent) à 1.0 (complètement opaque). Cette valeur est de 1,0 (complètement opaque) par défaut.</dd>
-</dl>
+- {{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha = transparencyValue")}}
+  - : Applique la valeur de transparence spécifiée à toutes les formes futures tracées sur le Canvas. La valeur doit être comprise entre 0.0 (complètement transparent) à 1.0 (complètement opaque). Cette valeur est de 1,0 (complètement opaque) par défaut.
 
-<p>La propriété<code> globalAlpha</code> peut être utile si vous voulez dessiner un grand nombre de formes sur la toile avec la même transparence, mais sinon, il est généralement plus utile de définir la transparence sur les formes individuelles lors de la définition de leurs couleurs.</p>
+La propriété` globalAlpha` peut être utile si vous voulez dessiner un grand nombre de formes sur la toile avec la même transparence, mais sinon, il est généralement plus utile de définir la transparence sur les formes individuelles lors de la définition de leurs couleurs.
 
-<p>Parce que <code>strokeStyle</code> et <code>fillStyle</code> acceptent les valeurs de couleur rvba CSS, nous pouvons utiliser la notation suivante pour attribuer une couleur transparente.</p>
+Parce que `strokeStyle` et `fillStyle` acceptent les valeurs de couleur rvba CSS, nous pouvons utiliser la notation suivante pour attribuer une couleur transparente.
 
-<pre class="brush: js">//Affecter des couleurs transparentes pour dessiner et remplir le style
+```js
+//Affecter des couleurs transparentes pour dessiner et remplir le style
 
 ctx.strokeStyle = "rgba(255, 0, 0, .5)";
 ctx.fillStyle = "rgba(255, 0, 0, .5)";
-</pre>
+```
 
-<p>La fonction <code>rgba()</code> <em>(rvba)</em> est similaire à la fonction <code>rgb()</code> <em>(rvb)</em> mais il a un paramètre supplémentaire. Le dernier paramètre définit la valeur de la transparence de cette couleur particulière. La plage valide est entre 0,0 (totalement transparent) et 1,0 (totalement opaque).</p>
+La fonction `rgba()` _(rvba)_ est similaire à la fonction `rgb()` _(rvb)_ mais il a un paramètre supplémentaire. Le dernier paramètre définit la valeur de la transparence de cette couleur particulière. La plage valide est entre 0,0 (totalement transparent) et 1,0 (totalement opaque).
 
-<h3 id="A_globalAlpha_example">Un exemple <code>globalAlpha</code></h3>
+### Un exemple `globalAlpha`
 
-<p>Dans cet exemple, nous allons dessiner un fond de quatre carrés de couleurs différentes. En plus de ceux-ci, nous allons dessiner un ensemble de cercles semi-transparents. <code>globalAlpha</code> est réglé à <code>0.2</code> et sera utilisé pour toutes les formes. Chaque étape de boucle <code>for</code> dessine un ensemble de cercles avec un rayon croissant. Le résultat final est un gradient radial. En superposant toujours plus de cercles, les uns au-dessus des autres, nous réduisons efficacement la transparence des cercles qui ont déjà été établis. En augmentant le pas et le nombre de cercles, l'arrière-plan devrait complètement disparaître du centre de l'image.</p>
+Dans cet exemple, nous allons dessiner un fond de quatre carrés de couleurs différentes. En plus de ceux-ci, nous allons dessiner un ensemble de cercles semi-transparents. `globalAlpha` est réglé à `0.2` et sera utilisé pour toutes les formes. Chaque étape de boucle `for` dessine un ensemble de cercles avec un rayon croissant. Le résultat final est un gradient radial. En superposant toujours plus de cercles, les uns au-dessus des autres, nous réduisons efficacement la transparence des cercles qui ont déjà été établis. En augmentant le pas et le nombre de cercles, l'arrière-plan devrait complètement disparaître du centre de l'image.
 
-<pre class="brush: js">function draw() {
+```js
+function draw() {
   var ctx = document.getElementById('canvas').getContext('2d');
   // draw background
   ctx.fillStyle = '#FD0';
@@ -133,25 +140,30 @@ ctx.fillStyle = "rgba(255, 0, 0, .5)";
   ctx.globalAlpha = 0.2;
 
   // Dessine des cercles semi-transparents
-  for (i = 0; i &lt; 7; i++) {
+  for (i = 0; i < 7; i++) {
     ctx.beginPath();
     ctx.arc(75, 75, 10 + 10 * i, 0, Math.PI * 2, true);
     ctx.fill();
   }
-}</pre>
-
+}
+```
 
-<pre class="brush: html hidden">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+```html hidden
+<canvas id="canvas" width="150" height="150"></canvas>
+```
 
-<pre class="brush: js hidden">draw();</pre>
+```js hidden
+draw();
+```
 
-<p>{{EmbedLiveSample("A_globalAlpha_example", "180", "180", "canvas_globalalpha.png")}}</p>
+{{EmbedLiveSample("A_globalAlpha_example", "180", "180", "canvas_globalalpha.png")}}
 
-<h3 id="An_example_using_rgba">Un exemple en utilisant <code>rgba()</code></h3>
+### Un exemple en utilisant `rgba()`
 
-<p>Dans ce deuxième exemple, nous faisons quelque chose de similaire, mais au lieu de dessiner des cercles, nous dessinons de petits rectangles à l'opacité croissante. L'utilisation de <code>rgba()</code> nous donne un peu plus de contrôle et de flexibilité.</p>
+Dans ce deuxième exemple, nous faisons quelque chose de similaire, mais au lieu de dessiner des cercles, nous dessinons de petits rectangles à l'opacité croissante. L'utilisation de `rgba()` nous donne un peu plus de contrôle et de flexibilité.
 
-<pre class="brush: js">function draw() {
+```js
+function draw() {
   var ctx = document.getElementById('canvas').getContext('2d');
 
   // Dessine le fond
@@ -165,104 +177,110 @@ ctx.fillStyle = "rgba(255, 0, 0, .5)";
   ctx.fillRect(0, 112.5, 150, 37.5);
 
   // Dessine des rectangles semi-transparents
-  for (var i = 0; i &lt; 10; i++) {
+  for (var i = 0; i < 10; i++) {
     ctx.fillStyle = 'rgba(255, 255, 255, ' + (i + 1) / 10 + ')';
-    for (var j = 0; j &lt; 4; j++) {
+    for (var j = 0; j < 4; j++) {
       ctx.fillRect(5 + i * 14, 5 + j * 37.5, 14, 27.5);
     }
   }
-}</pre>
+}
+```
 
-<pre class="brush: html hidden">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+```html hidden
+<canvas id="canvas" width="150" height="150"></canvas>
+```
 
-<pre class="brush: js hidden">draw();</pre>
+```js hidden
+draw();
+```
 
-<p>{{EmbedLiveSample("An_example_using_rgba()", "180", "180", "canvas_rgba.png")}}</p>
+{{EmbedLiveSample("An_example_using_rgba()", "180", "180", "canvas_rgba.png")}}
 
-<h2 id="Line_styles">Le style des lignes</h2>
+## Le style des lignes
 
-<p>Il y a plusieurs propriétés qui nous permettent de modifier le style des lignes.</p>
+Il y a plusieurs propriétés qui nous permettent de modifier le style des lignes.
 
-<dl>
- <dt>{{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth = value")}}</dt>
- <dd>Définit la largeur des lignes qui serons tracées.</dd>
- <dt>{{domxref("CanvasRenderingContext2D.lineCap", "lineCap = type")}}</dt>
- <dd>Définit l'apparence des extrémités des lignes.</dd>
- <dt>{{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin = type")}}</dt>
- <dd>Définit l'apparence des «coins» où les lignes se rencontrent.</dd>
- <dt>{{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit = value")}}</dt>
- <dd>Établit une limite lorsque deux lignes se rejoignent en un angle aigu, pour permettre de contrôler l'épaisseur de la jonction.</dd>
- <dt>{{domxref("CanvasRenderingContext2D.getLineDash", "getLineDash()")}}</dt>
- <dd>Retourne le tableau du modele courant de ligne contenant un nombre pair de nombres positifs.</dd>
- <dt>{{domxref("CanvasRenderingContext2D.setLineDash", "setLineDash(segments)")}}</dt>
- <dd>Définit le modele de ligne.</dd>
- <dt>{{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset = value")}}</dt>
- <dd>Indique où commencer un modele sur une ligne.</dd>
-</dl>
+- {{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth = value")}}
+  - : Définit la largeur des lignes qui serons tracées.
+- {{domxref("CanvasRenderingContext2D.lineCap", "lineCap = type")}}
+  - : Définit l'apparence des extrémités des lignes.
+- {{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin = type")}}
+  - : Définit l'apparence des «coins» où les lignes se rencontrent.
+- {{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit = value")}}
+  - : Établit une limite lorsque deux lignes se rejoignent en un angle aigu, pour permettre de contrôler l'épaisseur de la jonction.
+- {{domxref("CanvasRenderingContext2D.getLineDash", "getLineDash()")}}
+  - : Retourne le tableau du modele courant de ligne contenant un nombre pair de nombres positifs.
+- {{domxref("CanvasRenderingContext2D.setLineDash", "setLineDash(segments)")}}
+  - : Définit le modele de ligne.
+- {{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset = value")}}
+  - : Indique où commencer un modele sur une ligne.
 
-<p>Vous aurez une meilleure compréhension de ce qu'ils font en regardant les exemples ci-dessous.</p>
+Vous aurez une meilleure compréhension de ce qu'ils font en regardant les exemples ci-dessous.
 
-<h3 id="A_lineWidth_example">Un exemple <code>lineWidth</code></h3>
+### Un exemple `lineWidth`
 
-<p>Cette propriété définit l'épaisseur de la ligne actuelle. Les valeurs doivent être des nombres positifs. Par défaut, cette valeur est définie à 1,0.</p>
+Cette propriété définit l'épaisseur de la ligne actuelle. Les valeurs doivent être des nombres positifs. Par défaut, cette valeur est définie à 1,0.
 
-<p>La largeur de ligne est l'épaisseur centrée sur le tracé. En d'autres termes, la zone qui est dessinée s'étend de part et d'autre du tracé. Parce que les coordonnées ne font pas référence directement aux pixels, une attention particulière doit être prise pour obtenir des lignes horizontales et verticales nettes.</p>
+La largeur de ligne est l'épaisseur centrée sur le tracé. En d'autres termes, la zone qui est dessinée s'étend de part et d'autre du tracé. Parce que les coordonnées ne font pas référence directement aux pixels, une attention particulière doit être prise pour obtenir des lignes horizontales et verticales nettes.
 
-<p>Dans l'exemple ci-dessous, 10 lignes droites sont dessinées avec des largeurs croissantes. La ligne à l'extrême gauche a 1,0 unités de large. Cependant, celle ci et toutes les lignes d'épaisseur impair ne semblent pas nettes, en raison du positionnement du tracé.</p>
+Dans l'exemple ci-dessous, 10 lignes droites sont dessinées avec des largeurs croissantes. La ligne à l'extrême gauche a 1,0 unités de large. Cependant, celle ci et toutes les lignes d'épaisseur impair ne semblent pas nettes, en raison du positionnement du tracé.
 
-<pre class="brush: js">function draw() {
+```js
+function draw() {
   var ctx = document.getElementById('canvas').getContext('2d');
-  for (var i = 0; i &lt; 10; i++) {
+  for (var i = 0; i < 10; i++) {
     ctx.lineWidth = 1 + i;
     ctx.beginPath();
     ctx.moveTo(5 + i * 14, 5);
     ctx.lineTo(5 + i * 14, 140);
     ctx.stroke();
   }
-}</pre>
-
-<pre class="brush: html hidden">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+}
+```
 
-<pre class="brush: js hidden">draw();</pre>
+```html hidden
+<canvas id="canvas" width="150" height="150"></canvas>
+```
 
-<p>{{EmbedLiveSample("A_lineWidth_example", "180", "180", "canvas_linewidth.png")}}</p>
+```js hidden
+draw();
+```
 
-<p>Pour l'obtention de lignes nettes, il faut comprendre comment les lignes sont tracées. Ci-dessous, la grille représente la grille de coordonnées. Les carrés sont des pixels réels de l'écran. Dans la première grille, un rectangle (2,1) à (5,5) est rempli. La zone entière couverte par les lignes (rouge clair) tombe sur les limites des pixels, de sorte que le rectangle rempli résultant aura des bords nets.</p>
+{{EmbedLiveSample("A_lineWidth_example", "180", "180", "canvas_linewidth.png")}}
 
-<p><img alt="" src="canvas-grid.png"></p>
+Pour l'obtention de lignes nettes, il faut comprendre comment les lignes sont tracées. Ci-dessous, la grille représente la grille de coordonnées. Les carrés sont des pixels réels de l'écran. Dans la première grille, un rectangle (2,1) à (5,5) est rempli. La zone entière couverte par les lignes (rouge clair) tombe sur les limites des pixels, de sorte que le rectangle rempli résultant aura des bords nets.
 
-<p>Si vous considérez un tracé de (3,1) à (3,5) avec une épaisseur de ligne de <code>1.0</code>, vous vous retrouvez dans la situation de la deuxième grille. La surface réelle à remplir (bleu foncé) se prolonge seulement à moitié sur les pixels de part et d'autre du chemin. Une approximation de ceci doit être rendue, ce qui signifie que ces pixels sont partiellement ombrés, et le résultat est que toute la zone (le bleu clair et bleu foncé) est remplie avec une couleur moitié moins sombre que la couleur du tracé attendu. C'est ce qui arrive avec la largeur de <code>1.0</code> dans l'exemple précédent.</p>
+![](canvas-grid.png)
 
-<p>Pour résoudre ce problème, vous devez être très précis dans la création de votre tracé. Sachant qu'une largeur de <code>1.0</code> s'étendra d'une demi-unité de chaque côté du tracé, créer le tracé de (3.5,1) à (3.5,5) aboutit à l'exemple trois pour une largeur de <code>1.0</code> et au remplissage d'un seul pixel de ligne verticale.</p>
+Si vous considérez un tracé de (3,1) à (3,5) avec une épaisseur de ligne de `1.0`, vous vous retrouvez dans la situation de la deuxième grille. La surface réelle à remplir (bleu foncé) se prolonge seulement à moitié sur les pixels de part et d'autre du chemin. Une approximation de ceci doit être rendue, ce qui signifie que ces pixels sont partiellement ombrés, et le résultat est que toute la zone (le bleu clair et bleu foncé) est remplie avec une couleur moitié moins sombre que la couleur du tracé attendu. C'est ce qui arrive avec la largeur de `1.0` dans l'exemple précédent.
 
-<div class="note">
-<p><strong>Note:</strong> Sachez que dans notre exemple de ligne verticale, la position Y fait toujours référence à une position de grille entière — sinon, vous verrez des pixels à moitié colorés à gauche et à droite (mais notez aussi que ce comportement dépend de l'actuel style <code>lineCap</code>, dont la valeur par défaut est <code>butt</code>. Vous pouvez essayer de tracer des traits consistants avec des coordonnées non-entières pour les lignes et avec une largeur particulière, en définissant le style <code>lineCap</code> à <code>square</code>, pour que le bord extérieur du trait autour du point final soit automatiquement étendu pour couvrir le pixel entier).</p>
+Pour résoudre ce problème, vous devez être très précis dans la création de votre tracé. Sachant qu'une largeur de `1.0` s'étendra d'une demi-unité de chaque côté du tracé, créer le tracé de (3.5,1) à (3.5,5) aboutit à l'exemple trois pour une largeur de `1.0` et au remplissage d'un seul pixel de ligne verticale.
 
-<p>Notez également que seuls les points de début et de fin d'un chemin sont affectés : si un chemin est fermé avec <code>closePath ()</code>, il n'y a pas de point de départ ni de point final ; à la place, tous les points d'extrémité du chemin sont connectés à leurs segments joints précédent et suivant, en utilisant le paramètre courant du style <code>lineJoin</code>, dont la valeur par défaut est <code>miter</code>, avec pour effet d'étendre automatiquement les bordures extérieures des segments connectés à leur point d'intersection. Ainsi, le trait de rendu couvrira exactement les pixels pleins centrés à chaque extrémité si ces segments connectés sont horizontaux et / ou verticaux. Voir les deux sections suivantes pour les démonstrations de ces styles de lignes supplémentaires.</p>
-</div>
+> **Note :** Sachez que dans notre exemple de ligne verticale, la position Y fait toujours référence à une position de grille entière — sinon, vous verrez des pixels à moitié colorés à gauche et à droite (mais notez aussi que ce comportement dépend de l'actuel style `lineCap`, dont la valeur par défaut est `butt`. Vous pouvez essayer de tracer des traits consistants avec des coordonnées non-entières pour les lignes et avec une largeur particulière, en définissant le style `lineCap` à `square`, pour que le bord extérieur du trait autour du point final soit automatiquement étendu pour couvrir le pixel entier).
+>
+> Notez également que seuls les points de début et de fin d'un chemin sont affectés : si un chemin est fermé avec `closePath ()`, il n'y a pas de point de départ ni de point final ; à la place, tous les points d'extrémité du chemin sont connectés à leurs segments joints précédent et suivant, en utilisant le paramètre courant du style `lineJoin`, dont la valeur par défaut est `miter`, avec pour effet d'étendre automatiquement les bordures extérieures des segments connectés à leur point d'intersection. Ainsi, le trait de rendu couvrira exactement les pixels pleins centrés à chaque extrémité si ces segments connectés sont horizontaux et / ou verticaux. Voir les deux sections suivantes pour les démonstrations de ces styles de lignes supplémentaires.
 
-<p>Pour les lignes de largeur paire, chaque moitié finit par être un nombre entier de pixels, vous voulez donc un chemin entre les pixels (c'est-à-dire (3,1) à (3,5)), au lieu de descendre au milieu des pixels .</p>
+Pour les lignes de largeur paire, chaque moitié finit par être un nombre entier de pixels, vous voulez donc un chemin entre les pixels (c'est-à-dire (3,1) à (3,5)), au lieu de descendre au milieu des pixels .
 
-<p>Bien que légèrement ennuyeux quand on travaille avec des graphismes 2D évolutifs, en accordant une attention à la grille de pixels et à la position des tracés, vous vous assurez du comportement correct de vos dessins, et ce, indépendamment de la mise à l'échelle ou d'autres transformations. Une ligne verticale de largeur 1,0 à la bonne position deviendra une ligne de 2 pixels nette à l'échelle 2.</p>
+Bien que légèrement ennuyeux quand on travaille avec des graphismes 2D évolutifs, en accordant une attention à la grille de pixels et à la position des tracés, vous vous assurez du comportement correct de vos dessins, et ce, indépendamment de la mise à l'échelle ou d'autres transformations. Une ligne verticale de largeur 1,0 à la bonne position deviendra une ligne de 2 pixels nette à l'échelle 2.
 
-<h3 id="A_lineCap_example">Un exemple de <code>lineCap</code></h3>
+### Un exemple de `lineCap`
 
-<p>La propriété <code>lineCap</code> détermine comment les extrêmités de chaque ligne sont dessinées. Il y a trois valeurs possibles pour la propriété : <code>butt</code>, <code>round</code> et <code>square</code>. Par défaut, la propriété est définie à <code>butt</code>.</p>
+La propriété `lineCap` détermine comment les extrêmités de chaque ligne sont dessinées. Il y a trois valeurs possibles pour la propriété : `butt`, `round` et `square`. Par défaut, la propriété est définie à `butt`.
 
-<dl>
- <dt><code>butt </code><em>(bout)</em></dt>
- <dd>L'extrémité des lignes est en angle droit.</dd>
- <dt><code>round </code><em>(rond)</em></dt>
- <dd>Les extrémités sont arrondies.</dd>
- <dt><code>square </code><em>(carré)</em></dt>
- <dd>Les extrémités sont en angle droit en ajoutant une extension d'une largeur égale à la ligne et une hauteur égale à la moitié de la largeur de la ligne.</dd>
-</dl>
+- `butt `_(bout)_
+  - : L'extrémité des lignes est en angle droit.
+- `round `_(rond)_
+  - : Les extrémités sont arrondies.
+- `square `_(carré)_
+  - : Les extrémités sont en angle droit en ajoutant une extension d'une largeur égale à la ligne et une hauteur égale à la moitié de la largeur de la ligne.
 
-<p>Dans cet exemple, nous avons tracé trois lignes, chacune avec une valeur différente pour la propriété <code>lineCap</code>. Nous avons par ailleurs ajouté deux guides pour voir exactement les différences entre les trois lignes. Chacune de ces trois lignes est identique entre les deux traits bleus.</p>
+Dans cet exemple, nous avons tracé trois lignes, chacune avec une valeur différente pour la propriété `lineCap`. Nous avons par ailleurs ajouté deux guides pour voir exactement les différences entre les trois lignes. Chacune de ces trois lignes est identique entre les deux traits bleus.
 
-<p>La ligne de gauche utilise l'option par défaut <code>butt</code>. Vous pourrez noter qu'elle est entièrement dessinée entre les deux guides. La deuxième utilise l'option <code>round</code>. Elle ajoute un demi-cercle à chaque extrémité d'un rayon valant la moitié de la largeur de la ligne. La ligne de droite utilise l'option <code>square</code>. Elle ajoute une extension avec une largeur égale à la ligne et une hauteur équivalante à la moitié de la largeur de la ligne.</p>
+La ligne de gauche utilise l'option par défaut `butt`. Vous pourrez noter qu'elle est entièrement dessinée entre les deux guides. La deuxième utilise l'option `round`. Elle ajoute un demi-cercle à chaque extrémité d'un rayon valant la moitié de la largeur de la ligne. La ligne de droite utilise l'option `square`. Elle ajoute une extension avec une largeur égale à la ligne et une hauteur équivalante à la moitié de la largeur de la ligne.
 
-<pre class="brush: js">function draw() {
+```js
+function draw() {
   var ctx = document.getElementById('canvas').getContext('2d');
   var lineCap = ['butt', 'round', 'square'];
 
@@ -277,7 +295,7 @@ ctx.fillStyle = "rgba(255, 0, 0, .5)";
 
   // Dessiner des lignes
   ctx.strokeStyle = 'black';
-  for (var i = 0; i &lt; lineCap.length; i++) {
+  for (var i = 0; i < lineCap.length; i++) {
     ctx.lineWidth = 15;
     ctx.lineCap = lineCap[i];
     ctx.beginPath();
@@ -285,36 +303,40 @@ ctx.fillStyle = "rgba(255, 0, 0, .5)";
     ctx.lineTo(25 + i * 50, 140);
     ctx.stroke();
   }
-}</pre>
+}
+```
 
-<pre class="brush: html hidden">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+```html hidden
+<canvas id="canvas" width="150" height="150"></canvas>
+```
 
-<pre class="brush: js hidden">draw();</pre>
+```js hidden
+draw();
+```
 
-<p>{{EmbedLiveSample("A_lineCap_example", "180", "180", "canvas_linecap.png")}}</p>
+{{EmbedLiveSample("A_lineCap_example", "180", "180", "canvas_linecap.png")}}
 
-<h3 id="A_lineJoin_example">Un exemple de <code>lineJoin</code></h3>
+### Un exemple de `lineJoin`
 
-<p>La propriété <code>lineJoin</code> détermine comment deux segments (lignes, arcs ou courbes), de largeur non nulle se connectant dans une forme, sont joints ensemble (les segments de longueur nulle, dont les coordonnées de départ et de fin sont exactement les mêmes, sont ignorés).</p>
+La propriété `lineJoin` détermine comment deux segments (lignes, arcs ou courbes), de largeur non nulle se connectant dans une forme, sont joints ensemble (les segments de longueur nulle, dont les coordonnées de départ et de fin sont exactement les mêmes, sont ignorés).
 
-<p>Il existe trois valeurs possibles pour cette propriété : <code>round</code>, <code>bevel</code> et <code>miter</code>. Par défaut, cette propriété est définie à <code>miter</code>. Notez que le paramètre <code>lineJoin</code> n'a pas d'effet si les deux segments connectés ont la même direction, parce qu'aucune zone de jointure ne sera ajoutée dans ce cas.</p>
+Il existe trois valeurs possibles pour cette propriété : `round`, `bevel` et `miter`. Par défaut, cette propriété est définie à `miter`. Notez que le paramètre `lineJoin` n'a pas d'effet si les deux segments connectés ont la même direction, parce qu'aucune zone de jointure ne sera ajoutée dans ce cas.
 
-<dl>
- <dt><code>round </code><em>(rond)</em></dt>
- <dd>Arrondit les angles des segments en ajoutant un arc de cercle centré à l'extrémité commune des segments connectés. Le rayon de ces angles arrondis est égal à la moitié de la largeur du trait.</dd>
- <dt><code>bevel </code><em>(biseau)</em></dt>
- <dd>Ajoute un triangle à l'extrémité commune des segments connectés.</dd>
- <dt><code>miter </code><em>(onglet)</em></dt>
- <dd>Les segments connectés sont reliés en prolongeant leurs bords extérieurs pour se connecter en un seul point, avec pour effet de remplir une zone supplémentaire en forme de losange. Ce paramètre est effectué par la propriété miterLimit qui est expliquée ci-dessous.</dd>
-</dl>
+- `round `_(rond)_
+  - : Arrondit les angles des segments en ajoutant un arc de cercle centré à l'extrémité commune des segments connectés. Le rayon de ces angles arrondis est égal à la moitié de la largeur du trait.
+- `bevel `_(biseau)_
+  - : Ajoute un triangle à l'extrémité commune des segments connectés.
+- `miter `_(onglet)_
+  - : Les segments connectés sont reliés en prolongeant leurs bords extérieurs pour se connecter en un seul point, avec pour effet de remplir une zone supplémentaire en forme de losange. Ce paramètre est effectué par la propriété miterLimit qui est expliquée ci-dessous.
 
-<p>L'exemple ci-dessous dessine trois chemins différents, démontrant chacun de ces trois paramètres de propriété<code> lineJoin</code> ; la sortie est montrée ci-dessus.</p>
+L'exemple ci-dessous dessine trois chemins différents, démontrant chacun de ces trois paramètres de propriété` lineJoin` ; la sortie est montrée ci-dessus.
 
-<pre class="brush: js">function draw() {
+```js
+function draw() {
   var ctx = document.getElementById('canvas').getContext('2d');
   var lineJoin = ['round', 'bevel', 'miter'];
   ctx.lineWidth = 10;
-  for (var i = 0; i &lt; lineJoin.length; i++) {
+  for (var i = 0; i < lineJoin.length; i++) {
     ctx.lineJoin = lineJoin[i];
     ctx.beginPath();
     ctx.moveTo(-5, 5 + i * 40);
@@ -324,36 +346,39 @@ ctx.fillStyle = "rgba(255, 0, 0, .5)";
     ctx.lineTo(155, 5 + i * 40);
     ctx.stroke();
   }
-}</pre>
+}
+```
 
-<pre class="brush: html hidden">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+```html hidden
+<canvas id="canvas" width="150" height="150"></canvas>
+```
 
-<pre class="brush: js hidden">draw();</pre>
-</div>
+```js hidden
+draw();
+```
 
-<p>{{EmbedLiveSample("A_lineJoin_example", "180", "180", "canvas_linejoin.png")}}</p>
+{{EmbedLiveSample("A_lineJoin_example", "180", "180", "canvas_linejoin.png")}}
 
-<h3 id="A_demo_of_the_miterLimit_property">Une démonstration de la propriété <code>miterLimit</code></h3>
+### Une démonstration de la propriété `miterLimit`
 
-<p>Comme vous l'avez vu dans l'exemple précédent, lorsque vous joignez deux lignes avec l'option d'onglet, les bords extérieurs des deux lignes d'assemblage sont étendus jusqu'au point où ils se rencontrent. Pour les lignes qui sont à grands angles les unes avec les autres, ce point n'est pas loin du point de connexion interne. Cependant, lorsque les angles entre chaque ligne diminuent, la distance entre ces points augmente exponentiellement.</p>
+Comme vous l'avez vu dans l'exemple précédent, lorsque vous joignez deux lignes avec l'option d'onglet, les bords extérieurs des deux lignes d'assemblage sont étendus jusqu'au point où ils se rencontrent. Pour les lignes qui sont à grands angles les unes avec les autres, ce point n'est pas loin du point de connexion interne. Cependant, lorsque les angles entre chaque ligne diminuent, la distance entre ces points augmente exponentiellement.
 
-<p>La propriété <code>miterLimit</code> détermine dans quelle mesure le point de connexion externe peut être placé à partir du point de connexion interne. Si deux lignes dépassent cette valeur, une jointure biseau est dessinée à la place. Notez que la longueur ajoutée maximale est le produit de la largeur de ligne mesurée dans le système de coordonnées actuel, par la valeur de cette propriété <code>miterLimit</code> (dont la valeur par défaut est 10.0 dans le HTML  {{HTMLElement("canvas")}}). <code> </code><code>miterLimit</code> peut être défini indépendamment de l'échelle d'affichage actuelle ou de toutes les transformations affinées de chemins : il n'influence que la forme des bords de lignes effectivement rendues.</p>
+La propriété `miterLimit` détermine dans quelle mesure le point de connexion externe peut être placé à partir du point de connexion interne. Si deux lignes dépassent cette valeur, une jointure biseau est dessinée à la place. Notez que la longueur ajoutée maximale est le produit de la largeur de ligne mesurée dans le système de coordonnées actuel, par la valeur de cette propriété `miterLimit` (dont la valeur par défaut est 10.0 dans le HTML {{HTMLElement("canvas")}}). ```miterLimit` peut être défini indépendamment de l'échelle d'affichage actuelle ou de toutes les transformations affinées de chemins : il n'influence que la forme des bords de lignes effectivement rendues.
 
-<p>Plus précisément, la limite d'onglet est le rapport maximal autorisé de la longueur d'extension (dans le canvas HTML, il est mesuré entre le coin extérieur des bords joints de la ligne et le point d'extrémité commun des segments de connexion spécifiés dans le chemin) à la moitié de la largeur de la ligne. Il peut être défini, de manière équivalente, comme le rapport maximum autorisé de la distance entre les points de jonction intérieur et extérieur des bords et la largeur totale de la ligne. Il est alors égal à la cosécante de la moitié de l'angle interne minimum des segments de connexion, en-dessous de laquelle aucune jointure d'onglet ne sera rendue, mais seulement une jointure en biseau :</p>
+Plus précisément, la limite d'onglet est le rapport maximal autorisé de la longueur d'extension (dans le canvas HTML, il est mesuré entre le coin extérieur des bords joints de la ligne et le point d'extrémité commun des segments de connexion spécifiés dans le chemin) à la moitié de la largeur de la ligne. Il peut être défini, de manière équivalente, comme le rapport maximum autorisé de la distance entre les points de jonction intérieur et extérieur des bords et la largeur totale de la ligne. Il est alors égal à la cosécante de la moitié de l'angle interne minimum des segments de connexion, en-dessous de laquelle aucune jointure d'onglet ne sera rendue, mais seulement une jointure en biseau :
 
-<ul>
- <li><code>miterLimit</code> = <strong>max</strong> <code>miterLength</code> / <code>lineWidth</code> = 1 / <strong>sin</strong> ( <strong>min</strong> <em>θ</em> / 2 )</li>
- <li>La limite d'onglet par défaut de 10.0 supprimera tous les onglets pour les angles vifs inférieurs à environ 11 degrés.</li>
- <li>Une limite d'onglet égale à √2 ≈ 1.4142136 (arrondie au-dessus) enlèvera les onglets pour tous les angles aigus, en conservant les joints d'onglet seulement pour les angles obtus ou droits.</li>
- <li>Une limite d'onglet égale à 1.0 est valide mais désactivera tous les onglets.</li>
- <li>Les valeurs inférieures à 1.0 sont invalides pour la limite d'onglet.</li>
-</ul>
+- `miterLimit` = **max** `miterLength` / `lineWidth` = 1 / **sin** ( **min** _θ_ / 2 )
+- La limite d'onglet par défaut de 10.0 supprimera tous les onglets pour les angles vifs inférieurs à environ 11 degrés.
+- Une limite d'onglet égale à √2 ≈ 1.4142136 (arrondie au-dessus) enlèvera les onglets pour tous les angles aigus, en conservant les joints d'onglet seulement pour les angles obtus ou droits.
+- Une limite d'onglet égale à 1.0 est valide mais désactivera tous les onglets.
+- Les valeurs inférieures à 1.0 sont invalides pour la limite d'onglet.
 
-<p>Voici une petite démo dans laquelle vous pouvez définir dynamiquement <code>miterLimit</code> et voir comment cela affecte les formes sur le canevas. Les lignes bleues indiquent où se trouvent les points de départ et d'arrivée de chacune des lignes du motif en zig-zag.</p>
+Voici une petite démo dans laquelle vous pouvez définir dynamiquement `miterLimit` et voir comment cela affecte les formes sur le canevas. Les lignes bleues indiquent où se trouvent les points de départ et d'arrivée de chacune des lignes du motif en zig-zag.
 
-<p>Si vous spécifiez une valeur <code>miterLimit</code> inférieure à 4.2 dans cette démo, aucun des coins visibles ne se joindra avec une extension onglet, mais seulement avec un petit biseau près des lignes bleues ; avec une limite à onglets au-dessus de 10, la plupart des coins de cette démo devraient se combiner avec un onglet loin des lignes bleues et dont la hauteur diminue entre les coins de gauche à droite, car ils se connectent avec des angles croissants ; avec des valeurs intermédiaires, les coins du côté gauche ne rejoignent qu'un biseau près des lignes bleues et les coins du côté droit avec une extension à onglets (également avec une hauteur décroissante).</p>
+Si vous spécifiez une valeur `miterLimit` inférieure à 4.2 dans cette démo, aucun des coins visibles ne se joindra avec une extension onglet, mais seulement avec un petit biseau près des lignes bleues ; avec une limite à onglets au-dessus de 10, la plupart des coins de cette démo devraient se combiner avec un onglet loin des lignes bleues et dont la hauteur diminue entre les coins de gauche à droite, car ils se connectent avec des angles croissants ; avec des valeurs intermédiaires, les coins du côté gauche ne rejoignent qu'un biseau près des lignes bleues et les coins du côté droit avec une extension à onglets (également avec une hauteur décroissante).
 
-<pre class="brush: js">function draw() {
+```js
+function draw() {
   var ctx = document.getElementById('canvas').getContext('2d');
 
   // Éffacer canvas
@@ -378,41 +403,49 @@ ctx.fillStyle = "rgba(255, 0, 0, .5)";
   // Dessiner des lignes
   ctx.beginPath();
   ctx.moveTo(0, 100);
-  for (i = 0; i &lt; 24 ; i++) {
+  for (i = 0; i < 24 ; i++) {
     var dy = i % 2 == 0 ? 25 : -25;
     ctx.lineTo(Math.pow(i, 1.5) * 2, 75 + dy);
   }
   ctx.stroke();
   return false;
-}</pre>
-
-<pre class="brush: html hidden">&lt;table&gt;
-  &lt;tr&gt;
-    &lt;td&gt;&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;&lt;/td&gt;
-    &lt;td&gt;Change the &lt;code&gt;miterLimit&lt;/code&gt; by entering a new value below and clicking the redraw button.&lt;br&gt;&lt;br&gt;
-      &lt;form onsubmit="return draw();"&gt;
-        &lt;label&gt;Miter limit&lt;/label&gt;
-        &lt;input type="text" size="3" id="miterLimit"/&gt;
-        &lt;input type="submit" value="Redraw"/&gt;
-      &lt;/form&gt;
-    &lt;/td&gt;
-  &lt;/tr&gt;
-&lt;/table&gt;</pre>
-
-<pre class="brush: js hidden">document.getElementById('miterLimit').value = document.getElementById('canvas').getContext('2d').miterLimit;
-draw();</pre>
-
-<p>{{EmbedLiveSample("A_demo_of_the_miterLimit_property", "400", "180", "canvas_miterlimit.png")}}</p>
-
-<h3 id="Using_line_dashes">Utilisation de lignes pointillées</h3>
-
-<p><code>setLineDash</code> et <code>lineDashOffset</code> précisent le modèle de lignes. <code>setLineDash</code> accepte une liste de nombres qui spécifie les distances pour dessiner alternativement une ligne et un espace et <code>lineDashOffset</code> définit un décalage pour commencer le motif.</p>
-
-<p>Dans cet exemple, nous créons un effet de fourmis en marche. C'est une technique d'animation souvent employée dans les  sélections d'outils des programmes graphiques. Cet effet permet à l'utilisateur de distinguer la frontière de l'image de fond de la sélection en animant la frontière. Dans une partie de ce tutoriel, vous pouvez apprendre comment faire cela et d'autres animations de base <a href="/fr/docs/Web/API/Canvas_API/Tutorial/Basic_animations">animation basiques.</a><a href="/fr/docs/Tutoriel_canvas/Animations_basiques">.</a></p>
-
-<pre class="brush: html hidden">&lt;canvas id="canvas" width="110" height="110"&gt;&lt;/canvas&gt;</pre>
-
-<pre class="brush: js">var ctx = document.getElementById('canvas').getContext('2d');
+}
+```
+
+```html hidden
+<table>
+  <tr>
+    <td><canvas id="canvas" width="150" height="150"></canvas></td>
+    <td>Change the <code>miterLimit</code> by entering a new value below and clicking the redraw button.<br><br>
+      <form onsubmit="return draw();">
+        <label>Miter limit</label>
+        <input type="text" size="3" id="miterLimit"/>
+        <input type="submit" value="Redraw"/>
+      </form>
+    </td>
+  </tr>
+</table>
+```
+
+```js hidden
+document.getElementById('miterLimit').value = document.getElementById('canvas').getContext('2d').miterLimit;
+draw();
+```
+
+{{EmbedLiveSample("A_demo_of_the_miterLimit_property", "400", "180", "canvas_miterlimit.png")}}
+
+### Utilisation de lignes pointillées
+
+`setLineDash` et `lineDashOffset` précisent le modèle de lignes. `setLineDash` accepte une liste de nombres qui spécifie les distances pour dessiner alternativement une ligne et un espace et `lineDashOffset` définit un décalage pour commencer le motif.
+
+Dans cet exemple, nous créons un effet de fourmis en marche. C'est une technique d'animation souvent employée dans les sélections d'outils des programmes graphiques. Cet effet permet à l'utilisateur de distinguer la frontière de l'image de fond de la sélection en animant la frontière. Dans une partie de ce tutoriel, vous pouvez apprendre comment faire cela et d'autres animations de base [animation basiques.](/fr/docs/Web/API/Canvas_API/Tutorial/Basic_animations)[.](/fr/docs/Tutoriel_canvas/Animations_basiques)
+
+```html hidden
+<canvas id="canvas" width="110" height="110"></canvas>
+```
+
+```js
+var ctx = document.getElementById('canvas').getContext('2d');
 var offset = 0;
 
 function draw() {
@@ -424,51 +457,53 @@ function draw() {
 
 function march() {
   offset++;
-  if (offset &gt; 16) {
+  if (offset > 16) {
     offset = 0;
   }
   draw();
   setTimeout(march, 20);
 }
 
-march();</pre>
+march();
+```
 
-<p>{{EmbedLiveSample("Using_line_dashes", "120", "120", "marching-ants.png")}}</p>
+{{EmbedLiveSample("Using_line_dashes", "120", "120", "marching-ants.png")}}
 
-<h2 id="Gradients">Dégradés</h2>
+## Dégradés
 
-<p>Comme n'importe quel programme de dessin normal, nous pouvons remplir et découper des formes à l'aide de dégradés linéaires et radiaux. Nous créons un objet {{domxref ("CanvasGradient")}} en utilisant l'une des méthodes suivantes. Nous pouvons ensuite affecter cet objet aux propriétés <code>fillStyle</code> ou <code>strokeStyle</code>.</p>
+Comme n'importe quel programme de dessin normal, nous pouvons remplir et découper des formes à l'aide de dégradés linéaires et radiaux. Nous créons un objet {{domxref ("CanvasGradient")}} en utilisant l'une des méthodes suivantes. Nous pouvons ensuite affecter cet objet aux propriétés `fillStyle` ou `strokeStyle`.
 
-<dl>
- <dt>{{domxref("CanvasRenderingContext2D.createLinearGradient", "createLinearGradient(x1, y1, x2, y2)")}}</dt>
- <dd>Crée un objet dégradé linéaire avec un point de départ (<code>x1</code>, <code>y1</code>) et un point final (<code>x2</code>, <code>y2</code>).</dd>
- <dt>{{domxref("CanvasRenderingContext2D.createRadialGradient", "createRadialGradient(x1, y1, r1, x2, y2, r2)")}}</dt>
- <dd>Crée un dégradé radial. Les paramètres représentent deux cercles, l'un avec son centre à (<code>x1</code>, <code>y1</code>) et un rayon <code>r1</code>, l'autre avec son centre à (<code>x2</code>, <code>y2</code>) avec un rayon <code>r2</code>.</dd>
-</dl>
+- {{domxref("CanvasRenderingContext2D.createLinearGradient", "createLinearGradient(x1, y1, x2, y2)")}}
+  - : Crée un objet dégradé linéaire avec un point de départ (`x1`, `y1`) et un point final (`x2`, `y2`).
+- {{domxref("CanvasRenderingContext2D.createRadialGradient", "createRadialGradient(x1, y1, r1, x2, y2, r2)")}}
+  - : Crée un dégradé radial. Les paramètres représentent deux cercles, l'un avec son centre à (`x1`, `y1`) et un rayon `r1`, l'autre avec son centre à (`x2`, `y2`) avec un rayon `r2`.
 
-<p>Par exemple:</p>
+Par exemple:
 
-<pre class="brush: js">var lineargradient = ctx.createLinearGradient(0, 0, 150, 150);
-var radialgradient = ctx.createRadialGradient(75, 75, 0, 75, 75, 100);</pre>
+```js
+var lineargradient = ctx.createLinearGradient(0, 0, 150, 150);
+var radialgradient = ctx.createRadialGradient(75, 75, 0, 75, 75, 100);
+```
 
-<p>Une fois que nous avons créé un objet <code>CanvasGradient</code>, nous pouvons lui assigner des couleurs en utilisant la méthode <code>addColorStop ()</code>.</p>
+Une fois que nous avons créé un objet `CanvasGradient`, nous pouvons lui assigner des couleurs en utilisant la méthode `addColorStop ()`.
 
-<dl>
- <dt>{{domxref("CanvasGradient.addColorStop", "gradient.addColorStop(position, color)")}}</dt>
- <dd>Crée un nouvel arrêt de couleur sur l'objet <code>gradient</code> <em>(dégradé)</em>. La position est un nombre entre 0.0 et 1.0 et définit la position relative de la couleur dans le dégradé ; et l'argument <code>color</code> doit être une chaîne représentant une CSS {{cssxref ("&lt;color&gt;")}}, indiquant la couleur que le dégradé devrait atteindre.</dd>
-</dl>
+- {{domxref("CanvasGradient.addColorStop", "gradient.addColorStop(position, color)")}}
+  - : Crée un nouvel arrêt de couleur sur l'objet `gradient` _(dégradé)_. La position est un nombre entre 0.0 et 1.0 et définit la position relative de la couleur dans le dégradé ; et l'argument `color` doit être une chaîne représentant une CSS {{cssxref ("&lt;color&gt;")}}, indiquant la couleur que le dégradé devrait atteindre.
 
-<p>Vous pouvez ajouter autant d'arrêts de couleur à un dégradé que vous le souhaitez. Ci-dessous figure un dégradé linéaire très simple du blanc au noir.</p>
+Vous pouvez ajouter autant d'arrêts de couleur à un dégradé que vous le souhaitez. Ci-dessous figure un dégradé linéaire très simple du blanc au noir.
 
-<pre class="brush: js">var lineargradient = ctx.createLinearGradient(0, 0, 150, 150);
+```js
+var lineargradient = ctx.createLinearGradient(0, 0, 150, 150);
 lineargradient.addColorStop(0, 'white');
-lineargradient.addColorStop(1, 'black');</pre>
+lineargradient.addColorStop(1, 'black');
+```
 
-<h3 id="A_createLinearGradient_example">Un exemple de <code>createLinearGradient</code></h3>
+### Un exemple de `createLinearGradient`
 
-<p>Dans cet exemple, nous allons créer deux dégradés différents. Comme vous pouvez le voir ici, les propriétés <code>strokeStyle</code> et <code>fillStyle</code> peuvent accepter un objet <code>canvasGradient</code> comme entrée valide.</p>
+Dans cet exemple, nous allons créer deux dégradés différents. Comme vous pouvez le voir ici, les propriétés `strokeStyle` et `fillStyle` peuvent accepter un objet `canvasGradient` comme entrée valide.
 
-<pre class="brush: js">function draw() {
+```js
+function draw() {
   var ctx = document.getElementById('canvas').getContext('2d');
 
   // Créer un dégradé
@@ -490,24 +525,29 @@ lineargradient.addColorStop(1, 'black');</pre>
   ctx.fillRect(10, 10, 130, 130);
   ctx.strokeRect(50, 50, 50, 50);
 
-}</pre>
+}
+```
 
-<pre class="brush: html hidden">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+```html hidden
+<canvas id="canvas" width="150" height="150"></canvas>
+```
 
-<pre class="brush: js hidden">draw();</pre>
-</div>
+```js hidden
+draw();
+```
 
-<p>Le premier est un dégradé d'arrière-plan. Comme vous pouvez le voir, nous avons assigné deux couleurs à la même position. Vous faites cela pour faire des transitions de couleurs très nettes - dans ce cas du blanc au vert. Normalement, peu importe dans quel ordre vous définissez l'arrêt de la couleur, mais dans ce cas particulier, la différence peut être significative. Si vous conservez les affectations dans l'ordre où vous voulez qu'elles apparaissent, cela ne posera aucun problème.</p>
+Le premier est un dégradé d'arrière-plan. Comme vous pouvez le voir, nous avons assigné deux couleurs à la même position. Vous faites cela pour faire des transitions de couleurs très nettes - dans ce cas du blanc au vert. Normalement, peu importe dans quel ordre vous définissez l'arrêt de la couleur, mais dans ce cas particulier, la différence peut être significative. Si vous conservez les affectations dans l'ordre où vous voulez qu'elles apparaissent, cela ne posera aucun problème.
 
-<p>Dans le second gradient, nous n'avons pas assigné la couleur de départ (à la position 0.0) puisqu'il n'était pas strictement nécessaire car il prendra automatiquement la valeur de la prochaine couleur. Par conséquent, l'attribution de la couleur noire à la position 0,5 fait automatiquement passer le dégradé, du début à l'arrêt, en noir.</p>
+Dans le second gradient, nous n'avons pas assigné la couleur de départ (à la position 0.0) puisqu'il n'était pas strictement nécessaire car il prendra automatiquement la valeur de la prochaine couleur. Par conséquent, l'attribution de la couleur noire à la position 0,5 fait automatiquement passer le dégradé, du début à l'arrêt, en noir.
 
-<p>{{EmbedLiveSample("A_createLinearGradient_example", "180", "180", "canvas_lineargradient.png")}}</p>
+{{EmbedLiveSample("A_createLinearGradient_example", "180", "180", "canvas_lineargradient.png")}}
 
-<h3 id="A_createRadialGradient_example">Un exemple de <code>createRadialGradient</code></h3>
+### Un exemple de `createRadialGradient`
 
-<p>Dans cet exemple, nous définirons quatre dégradés radiaux différents. Parce que nous avons le contrôle sur les points de départ et de fermeture du dégradé, nous pouvons obtenir des effets plus complexes que nous aurions normalement dans les dégradés radiaux "classiques" (c'est-à-dire un dégradé avec un seul point central où le dégradé se développe vers l'extérieur dans une forme circulaire).</p>
+Dans cet exemple, nous définirons quatre dégradés radiaux différents. Parce que nous avons le contrôle sur les points de départ et de fermeture du dégradé, nous pouvons obtenir des effets plus complexes que nous aurions normalement dans les dégradés radiaux "classiques" (c'est-à-dire un dégradé avec un seul point central où le dégradé se développe vers l'extérieur dans une forme circulaire).
 
-<pre class="brush: js">function draw() {
+```js
+function draw() {
   var ctx = document.getElementById('canvas').getContext('2d');
 
   // Créer un dégradé
@@ -540,55 +580,57 @@ lineargradient.addColorStop(1, 'black');</pre>
   ctx.fillRect(0, 0, 150, 150);
   ctx.fillStyle = radgrad;
   ctx.fillRect(0, 0, 150, 150);
-}</pre>
+}
+```
 
-<pre class="brush: html hidden">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+```html hidden
+<canvas id="canvas" width="150" height="150"></canvas>
+```
 
-<pre class="brush: js hidden">draw();</pre>
+```js hidden
+draw();
+```
 
-<p>Dans ce cas, nous avons légèrement décalé le point de départ du point final pour obtenir un effet 3D sphérique. Il est préférable d'éviter de laisser les cercles intérieurs et extérieurs se chevaucher car cela entraîne des effets étranges, difficiles à prédire.</p>
+Dans ce cas, nous avons légèrement décalé le point de départ du point final pour obtenir un effet 3D sphérique. Il est préférable d'éviter de laisser les cercles intérieurs et extérieurs se chevaucher car cela entraîne des effets étranges, difficiles à prédire.
 
-<p>Le dernier arrêt de couleur dans chacun des quatre dégradés utilise une couleur entièrement transparente. Si vous voulez une transition agréable de cette étape à la couleur précédente, les deux couleurs doivent être égales. Ce n'est pas très évident dans le code, car il utilise deux méthodes CSS différentes en démonstration, mais dans le premier dégradé <code># 019F62 = rgba (1,159,98,1)</code>.</p>
+Le dernier arrêt de couleur dans chacun des quatre dégradés utilise une couleur entièrement transparente. Si vous voulez une transition agréable de cette étape à la couleur précédente, les deux couleurs doivent être égales. Ce n'est pas très évident dans le code, car il utilise deux méthodes CSS différentes en démonstration, mais dans le premier dégradé `# 019F62 = rgba (1,159,98,1)`.
 
-<p>{{EmbedLiveSample("A_createRadialGradient_example", "180", "180", "canvas_radialgradient.png")}}</p>
+{{EmbedLiveSample("A_createRadialGradient_example", "180", "180", "canvas_radialgradient.png")}}
 
-<h2 id="Patterns">Modèles</h2>
+## Modèles
 
-<p>Dans l'un des exemples de la page précédente, nous avons utilisé une série de boucles pour créer un motif d'images. Il existe cependant une méthode beaucoup plus simple : la méthode <code>createPattern ()</code>.</p>
+Dans l'un des exemples de la page précédente, nous avons utilisé une série de boucles pour créer un motif d'images. Il existe cependant une méthode beaucoup plus simple : la méthode `createPattern ()`.
 
-<dl>
- <dt>{{domxref("CanvasRenderingContext2D.createPattern", "createPattern(image, type)")}}</dt>
- <dd>Crée et renvoie un nouvel objet de canvas. <code>image</code> est un {{domxref ("CanvasImageSource")}} (c'est-à-dire un {{domxref ("HTMLImageElement")}} ; un autre élément canvas,  <code>type</code>  est une chaîne indiquant comment utiliser l'image.</dd>
-</dl>
+- {{domxref("CanvasRenderingContext2D.createPattern", "createPattern(image, type)")}}
+  - : Crée et renvoie un nouvel objet de canvas. `image` est un {{domxref ("CanvasImageSource")}} (c'est-à-dire un {{domxref ("HTMLImageElement")}} ; un autre élément canvas,  `type` est une chaîne indiquant comment utiliser l'image.
 
-<p>Le type spécifie comment utiliser l'image pour créer le motif et doit avoir l'une des valeurs de chaîne suivantes :</p>
+Le type spécifie comment utiliser l'image pour créer le motif et doit avoir l'une des valeurs de chaîne suivantes :
 
-<dl>
- <dt><code>repeat</code></dt>
- <dd>Tapisse la zone en répètant l'image dans les deux sens vertical et horizontal.</dd>
- <dt><code>repeat-x</code></dt>
- <dd>Tapisse la zone en répètant l'image horizontalement mais pas verticalement.</dd>
- <dt><code>repeat-y</code></dt>
- <dd>Tapisse la zone en répètant l'image verticalement mais pas horizontalement.</dd>
- <dt><code>no-repeat</code></dt>
- <dd>Ne tapisse pas la zone avec l'image, elle est utilisée une seule fois.</dd>
-</dl>
+- `repeat`
+  - : Tapisse la zone en répètant l'image dans les deux sens vertical et horizontal.
+- `repeat-x`
+  - : Tapisse la zone en répètant l'image horizontalement mais pas verticalement.
+- `repeat-y`
+  - : Tapisse la zone en répètant l'image verticalement mais pas horizontalement.
+- `no-repeat`
+  - : Ne tapisse pas la zone avec l'image, elle est utilisée une seule fois.
 
-<p>Nous utilisons cette méthode pour créer un objet {{domxref ("CanvasPattern")}} qui est très similaire aux méthodes de dégradé que nous avons vu ci-dessus. Une fois que nous avons créé un modèle, nous pouvons l'affecter aux propriétés fillStyle ou strokeStyle. Par exemple :</p>
+Nous utilisons cette méthode pour créer un objet {{domxref ("CanvasPattern")}} qui est très similaire aux méthodes de dégradé que nous avons vu ci-dessus. Une fois que nous avons créé un modèle, nous pouvons l'affecter aux propriétés fillStyle ou strokeStyle. Par exemple :
 
-<pre class="brush: js">var img = new Image();
+```js
+var img = new Image();
 img.src = 'someimage.png';
-var ptrn = ctx.createPattern(img, 'repeat');</pre>
+var ptrn = ctx.createPattern(img, 'repeat');
+```
 
-<div class="note">
-<p><strong>Note:</strong> Comme avec la méthode <code>drawImage ()</code>, vous devez vous assurer que l'image que vous utilisez est chargée avant d'appeler cette méthode, ou le motif pourrait être mal dessiné.</p>
-</div>
+> **Note :** Comme avec la méthode `drawImage ()`, vous devez vous assurer que l'image que vous utilisez est chargée avant d'appeler cette méthode, ou le motif pourrait être mal dessiné.
 
-<h3 id="A_createPattern_example">Un exemple de <code>createPattern</code></h3>
+### Un exemple de `createPattern`
 
-<p>Dans ce dernier exemple, nous allons créer un modèle à affecter à la propriété <code>fillStyle</code>. La seule chose à noter, est l'utilisation du gestionnaire <code>onload</code> de l'image. Cela permet de s'assurer que l'image est chargée avant d'être affectée au motif.</p>
+Dans ce dernier exemple, nous allons créer un modèle à affecter à la propriété `fillStyle`. La seule chose à noter, est l'utilisation du gestionnaire `onload` de l'image. Cela permet de s'assurer que l'image est chargée avant d'être affectée au motif.
 
-<pre class="brush: js">function draw() {
+```js
+function draw() {
   var ctx = document.getElementById('canvas').getContext('2d');
 
   // créer un nouvel objet image à utiliser comme modèle
@@ -602,46 +644,48 @@ var ptrn = ctx.createPattern(img, 'repeat');</pre>
     ctx.fillRect(0, 0, 150, 150);
 
   }
-}</pre>
+}
+```
 
-<pre class="brush: html hidden">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+```html hidden
+<canvas id="canvas" width="150" height="150"></canvas>
+```
 
-<pre class="brush: js hidden">draw();</pre>
+```js hidden
+draw();
+```
 
-<p>Le résultat ressemble à ceci :</p>
+Le résultat ressemble à ceci :
 
-<p>{{EmbedLiveSample("A_createPattern_example", "180", "180", "canvas_createpattern.png")}}</p>
+{{EmbedLiveSample("A_createPattern_example", "180", "180", "canvas_createpattern.png")}}
 
-<h2 id="Ombres">Ombres</h2>
+## Ombres
 
-<p>L'utilisation des ombres ne comporte que quatre propriétés :</p>
+L'utilisation des ombres ne comporte que quatre propriétés :
 
-<dl>
- <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX = float")}}</dt>
- <dd>Indique la distance horizontale sur laquelle l'ombre doit s'étendre à partir de l'objet. Cette valeur n'est pas affectée par la matrice de transformation. La valeur par défaut est 0.</dd>
- <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY = float")}}</dt>
- <dd>Indique la distance verticale sur laquelle l'ombre doit s'étendre à partir de l'objet. Cette valeur n'est pas affectée par la matrice de transformation. La valeur par défaut est 0.</dd>
- <dt>{{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur = float")}}</dt>
- <dd>Indique la taille de l'effet de floutage ; cette valeur ne correspond pas à un nombre de pixels et n'est pas affectée par la matrice de transformation actuelle. La valeur par défaut est 0.</dd>
- <dt>{{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor = color")}}</dt>
- <dd>Une valeur de couleur CSS standard indiquant la couleur de l'effet d'ombre ; par défaut, il est entièrement noir transparent.</dd>
-</dl>
+- {{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX = float")}}
+  - : Indique la distance horizontale sur laquelle l'ombre doit s'étendre à partir de l'objet. Cette valeur n'est pas affectée par la matrice de transformation. La valeur par défaut est 0.
+- {{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY = float")}}
+  - : Indique la distance verticale sur laquelle l'ombre doit s'étendre à partir de l'objet. Cette valeur n'est pas affectée par la matrice de transformation. La valeur par défaut est 0.
+- {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur = float")}}
+  - : Indique la taille de l'effet de floutage ; cette valeur ne correspond pas à un nombre de pixels et n'est pas affectée par la matrice de transformation actuelle. La valeur par défaut est 0.
+- {{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor = color")}}
+  - : Une valeur de couleur CSS standard indiquant la couleur de l'effet d'ombre ; par défaut, il est entièrement noir transparent.
 
-<p>Les propriétés <code>shadowOffsetX</code> et <code>shadowOffsetY</code> indiquent sur quelle distance l'ombre doit s'étendre à partir de l'objet dans les directions X et Y; ces valeurs ne sont pas affectées par la matrice de transformation actuelle. Utilisez des valeurs négatives pour faire en sorte que l'ombre s'étende vers le haut ou vers la gauche et des valeurs positives pour que l'ombre s'étende vers le bas ou vers la droite. La valeur par défaut est 0 pour les 2 propriétés.</p>
+Les propriétés `shadowOffsetX` et `shadowOffsetY` indiquent sur quelle distance l'ombre doit s'étendre à partir de l'objet dans les directions X et Y; ces valeurs ne sont pas affectées par la matrice de transformation actuelle. Utilisez des valeurs négatives pour faire en sorte que l'ombre s'étende vers le haut ou vers la gauche et des valeurs positives pour que l'ombre s'étende vers le bas ou vers la droite. La valeur par défaut est 0 pour les 2 propriétés.
 
-<p>La propriété <code>shadowBlur</code> indique la taille de l'effet de flou ; cette valeur ne correspond pas à un nombre de pixels et n'est pas affectée par la matrice de transformation actuelle. La valeur par défaut est 0.</p>
+La propriété `shadowBlur` indique la taille de l'effet de flou ; cette valeur ne correspond pas à un nombre de pixels et n'est pas affectée par la matrice de transformation actuelle. La valeur par défaut est 0.
 
-<p>La propriété <code>shadowColor</code> est une valeur de couleur CSS standard indiquant la couleur de l'effet d'ombre ; par défaut, il est entièrement en noir transparent.</p>
+La propriété `shadowColor` est une valeur de couleur CSS standard indiquant la couleur de l'effet d'ombre ; par défaut, il est entièrement en noir transparent.
 
-<div class="note">
-<p><strong>Note :</strong> Les ombres ne sont dessinées que pour les <a href="/fr/docs/Web/API/Canvas_API/Tutorial/Compositing">opérations de composition</a> <code>source-over</code>.</p>
-</div>
+> **Note :** Les ombres ne sont dessinées que pour les [opérations de composition](/fr/docs/Web/API/Canvas_API/Tutorial/Compositing) `source-over`.
 
-<h3 id="A_shadowed_text_example">Un exemple de texte ombré</h3>
+### Un exemple de texte ombré
 
-<p>Cet exemple dessine une chaîne de texte avec un effet d'ombrage.</p>
+Cet exemple dessine une chaîne de texte avec un effet d'ombrage.
 
-<pre class="brush: js">function draw() {
+```js
+function draw() {
   var ctx = document.getElementById('canvas').getContext('2d');
 
   ctx.shadowOffsetX = 2;
@@ -652,42 +696,50 @@ var ptrn = ctx.createPattern(img, 'repeat');</pre>
   ctx.font = '20px Times New Roman';
   ctx.fillStyle = 'Black';
   ctx.fillText('Sample String', 5, 30);
-}</pre>
+}
+```
+
+```html hidden
+<canvas id="canvas" width="150" height="80"></canvas>
+```
 
-<pre class="brush: html hidden">&lt;canvas id="canvas" width="150" height="80"&gt;&lt;/canvas&gt;</pre>
+```js hidden
+draw();
+```
 
-<pre class="brush: js hidden">draw();</pre>
+{{EmbedLiveSample("A_shadowed_text_example", "180", "100", "shadowed-string.png")}}
 
-<p>{{EmbedLiveSample("A_shadowed_text_example", "180", "100", "shadowed-string.png")}}</p>
+Nous allons regarder la propriété de la `font` _(police de caratères)_ et la méthode `fillText` dans le chapitre suivant sur le [dessin de texte](/fr/docs/Dessin_de_texte_avec_canvas).
 
-<p>Nous allons regarder la propriété de la  <code>font</code> <em>(police de caratères)</em> et la méthode <code>fillText</code> dans le chapitre suivant sur le <a href="/fr/docs/Dessin_de_texte_avec_canvas">dessin de texte</a>.</p>
+## Règles de remplissage Canvas
 
-<h2 id="Canvas_fill_rules">Règles de remplissage Canvas</h2>
+Lors de l'utilisation de `fill` (ou {{domxref ("CanvasRenderingContext2D.clip", "clip")}} et {{domxref("CanvasRenderingContext2D.isPointInPath", "isPointinPath")}}) , déterminez si un point est à l'intérieur ou à l'extérieur d'un chemin et ainsi, s'il est rempli ou non. Ceci est utile lorsqu'un chemin en croise  un autre ou est imbriqué.
 
-<p>Lors de l'utilisation de <code>fill</code> (ou {{domxref ("CanvasRenderingContext2D.clip", "clip")}} et  {{domxref("CanvasRenderingContext2D.isPointInPath", "isPointinPath")}}) ,  déterminez si un point est à l'intérieur ou à l'extérieur d'un chemin et ainsi, s'il est rempli ou non. Ceci est utile lorsqu'un chemin en croise  un autre ou est imbriqué.<br>
- <br>
- Deux valeurs sont possibles :</p>
+Deux valeurs sont possibles :
 
-<ul>
- <li><code><strong>"nonzero</strong></code>": la <a href="http://en.wikipedia.org/wiki/Nonzero-rule">règle non-zero</a>, qui est la règle par défaut.</li>
- <li><code><strong>"evenodd"</strong></code>: La <a href="http://en.wikipedia.org/wiki/Even%E2%80%93odd_rule">règle even-odd</a>.</li>
-</ul>
+- **`"nonzero`**": la [règle non-zero](http://en.wikipedia.org/wiki/Nonzero-rule), qui est la règle par défaut.
+- **`"evenodd"`**: La [règle even-odd](http://en.wikipedia.org/wiki/Even%E2%80%93odd_rule).
 
-<p>Dans cet exemple, nous utilisons la règle <code>evenodd</code> .</p>
+Dans cet exemple, nous utilisons la règle `evenodd` .
 
-<pre class="brush: js">function draw() {
+```js
+function draw() {
   var ctx = document.getElementById('canvas').getContext('2d');
   ctx.beginPath();
   ctx.arc(50, 50, 30, 0, Math.PI * 2, true);
   ctx.arc(50, 50, 15, 0, Math.PI * 2, true);
   ctx.fill('evenodd');
-}</pre>
+}
+```
 
-<pre class="brush: html hidden">&lt;canvas id="canvas" width="100" height="100"&gt;&lt;/canvas&gt;</pre>
+```html hidden
+<canvas id="canvas" width="100" height="100"></canvas>
+```
 
-<pre class="brush: js hidden">draw();</pre>
-</div>
+```js hidden
+draw();
+```
 
-<p>{{EmbedLiveSample("Canvas_fill_rules", "110", "110", "fill-rule.png")}}</p>
+{{EmbedLiveSample("Canvas_fill_rules", "110", "110", "fill-rule.png")}}
 
-<p>{{PreviousNext("Tutoriel_canvas/Formes_géométriques", "Dessin_de_texte_avec_canvas")}}</p>
+{{PreviousNext("Tutoriel_canvas/Formes_géométriques", "Dessin_de_texte_avec_canvas")}}
diff --git a/files/fr/web/api/canvas_api/tutorial/basic_animations/index.md b/files/fr/web/api/canvas_api/tutorial/basic_animations/index.md
index e37d15eba9..fecfd63ca6 100644
--- a/files/fr/web/api/canvas_api/tutorial/basic_animations/index.md
+++ b/files/fr/web/api/canvas_api/tutorial/basic_animations/index.md
@@ -11,61 +11,56 @@ tags:
 translation_of: Web/API/Canvas_API/Tutorial/Basic_animations
 original_slug: Web/API/Canvas_API/Tutoriel_canvas/Animations_basiques
 ---
-<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Compositing", "Tutoriel_canvas/Advanced_animations")}}</div>
+{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Compositing", "Tutoriel_canvas/Advanced_animations")}}
 
-<p>Avec l'utilisation en Javascript du composant {{HTMLElement("canvas")}}, il est très simple de créer des animations (interactives). Ce chapitre décrit comment créer quelques animations basiques.</p>
+Avec l'utilisation en Javascript du composant {{HTMLElement("canvas")}}, il est très simple de créer des animations (interactives). Ce chapitre décrit comment créer quelques animations basiques.
 
-<p>La plus grosse limitation est sans doute qu'une fois qu'une forme est dessinée, elle reste telle quelle. Si on a besoin de la déplacer, il faut la redessiner avec ce qui était dessiné avant. Cela peut prendre beaucoup de temps de redessiner des images complexes et les performances dépendront beaucoup de la vitesse de l'ordinateur qui exécute cet affichage.</p>
+La plus grosse limitation est sans doute qu'une fois qu'une forme est dessinée, elle reste telle quelle. Si on a besoin de la déplacer, il faut la redessiner avec ce qui était dessiné avant. Cela peut prendre beaucoup de temps de redessiner des images complexes et les performances dépendront beaucoup de la vitesse de l'ordinateur qui exécute cet affichage.
 
-<h2 id="Basic_animation_steps">Les étapes d'une animation basique</h2>
+## Les étapes d'une animation basique
 
-<p>Voici les étapes à suivre à chaque image dessinée (frame) :</p>
+Voici les étapes à suivre à chaque image dessinée (frame) :
 
-<ol>
- <li><strong>Effacer le canevas</strong><br>
-  À moins que les formes que vous voulez dessiner remplissent complètement le canevas (par exemple une image en arrière-plan), vous devrez effacer toutes les formes qui ont été dessinées précédemment. La manière la plus simple de le faire est d'utiliser la méthode {{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}}.</li>
- <li><strong>Enregistrer l'état du canevas</strong><br>
-  Si vous changez des configurations qui affectent l'état du canevas (comme le style, les transformations, etc.), et vous voulez vous assurer que c'est l'état original qui est utilisé chaque fois que le canevas est redessiné, alors vous devez enregistrer l'état original.</li>
- <li><strong>Dessiner les formes animées</strong><br>
-  Vous effectuez toutes les opérations pour afficher l'image.</li>
- <li><strong>Restaurer l'état du canevas</strong><br>
-  Si l'état du canevas a été sauvegardé, vous  restaurez cet état avant le prochain rendu.</li>
-</ol>
+1.  **Effacer le canevas**
+    À moins que les formes que vous voulez dessiner remplissent complètement le canevas (par exemple une image en arrière-plan), vous devrez effacer toutes les formes qui ont été dessinées précédemment. La manière la plus simple de le faire est d'utiliser la méthode {{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}}.
+2.  **Enregistrer l'état du canevas**
+    Si vous changez des configurations qui affectent l'état du canevas (comme le style, les transformations, etc.), et vous voulez vous assurer que c'est l'état original qui est utilisé chaque fois que le canevas est redessiné, alors vous devez enregistrer l'état original.
+3.  **Dessiner les formes animées**
+    Vous effectuez toutes les opérations pour afficher l'image.
+4.  **Restaurer l'état du canevas**
+    Si l'état du canevas a été sauvegardé, vous  restaurez cet état avant le prochain rendu.
 
-<h2 id="Controlling_an_animation">Contrôle d'une animation</h2>
+## Contrôle d'une animation
 
-<p>Les formes sont dessinées en utilisant soit les méthodes du canevas directement soit en appelant des fonctions personnalisées. Dans des conditions normales, on ne voit le résultat des opérations sur le canevas que quand le script a terminé son exécution. Cela signifie qu'il n'est pas possible de créer une animation avec une boucle <code>for</code>.</p>
+Les formes sont dessinées en utilisant soit les méthodes du canevas directement soit en appelant des fonctions personnalisées. Dans des conditions normales, on ne voit le résultat des opérations sur le canevas que quand le script a terminé son exécution. Cela signifie qu'il n'est pas possible de créer une animation avec une boucle `for`.
 
-<p>Il nous faut donc un moyen d'exécuter nos fonctions de dessin sur une période de temps. Il existe à ce jour trois manières de le faire.</p>
+Il nous faut donc un moyen d'exécuter nos fonctions de dessin sur une période de temps. Il existe à ce jour trois manières de le faire.
 
-<h3 id="Mises_à_jour_planifiées">Mises à jour planifiées</h3>
+### Mises à jour planifiées
 
-<p>Les fonctions {{domxref("window.setInterval()")}}, {{domxref("window.setTimeout()")}}, et {{domxref("window.requestAnimationFrame()")}} peuvent être utilisées :</p>
+Les fonctions {{domxref("window.setInterval()")}}, {{domxref("window.setTimeout()")}}, et {{domxref("window.requestAnimationFrame()")}} peuvent être utilisées :
 
-<dl>
- <dt>{{domxref("WindowTimers.setInterval", "setInterval(function, delay)")}}</dt>
- <dd>Lance la fonction définie par <code>function</code> chaque <code>delay</code> <em>(délai)</em> millisecondes.</dd>
- <dt>{{domxref("WindowTimers.setTimeout", "setTimeout(function, delay)")}}</dt>
- <dd>Exécute la fonction définie par <code>function</code> dans <code>delay</code> millisecondes.</dd>
- <dt>{{domxref("Window.requestAnimationFrame()", "requestAnimationFrame(callback)")}}</dt>
- <dd>Dit au navigateur qu'on veut afficher une animation et lui demande d'appeler la fonction <code>callback</code> pour mettre à jour cette animation avant de dessiner la prochaine image.</dd>
-</dl>
+- {{domxref("WindowTimers.setInterval", "setInterval(function, delay)")}}
+  - : Lance la fonction définie par `function` chaque `delay` _(délai)_ millisecondes.
+- {{domxref("WindowTimers.setTimeout", "setTimeout(function, delay)")}}
+  - : Exécute la fonction définie par `function` dans `delay` millisecondes.
+- {{domxref("Window.requestAnimationFrame()", "requestAnimationFrame(callback)")}}
+  - : Dit au navigateur qu'on veut afficher une animation et lui demande d'appeler la fonction `callback` pour mettre à jour cette animation avant de dessiner la prochaine image.
 
-<p>Si vous n'avez pas besoin d'interaction utilisateur, vous pouvez utiliser la fonction <code>setInterval()</code>, elle va exécuter périodiquement votre code.</p>
+Si vous n'avez pas besoin d'interaction utilisateur, vous pouvez utiliser la fonction `setInterval()`, elle va exécuter périodiquement votre code.
 
-<p>Si vous voulez faire un jeu, et utiliser les événements du clavier et de la souris pour contrôler l'animation, vous pouvez utiliser <code>setTimeout()</code>. En utilisant des {{domxref("EventListener")}}, on peut récupèrer chaque interaction et d'exécuter nos fonctions d'animation.</p>
+Si vous voulez faire un jeu, et utiliser les événements du clavier et de la souris pour contrôler l'animation, vous pouvez utiliser `setTimeout()`. En utilisant des {{domxref("EventListener")}}, on peut récupèrer chaque interaction et d'exécuter nos fonctions d'animation.
 
-<p>Dans les exemples suivants, nous utiliserons {{domxref("window.requestAnimationFrame()")}} pour contrôler les animations. Cette technique est plus fluide et plus efficace, elle appelle les opérations de rendu quand le système est prêt à dessiner l'image. Dans des conditions idéales, la fonction est alors lancée 60 fois par seconde, mais la fréquence sera réduite si l'animation se passe dans un onglet non visible.</p>
+Dans les exemples suivants, nous utiliserons {{domxref("window.requestAnimationFrame()")}} pour contrôler les animations. Cette technique est plus fluide et plus efficace, elle appelle les opérations de rendu quand le système est prêt à dessiner l'image. Dans des conditions idéales, la fonction est alors lancée 60 fois par seconde, mais la fréquence sera réduite si l'animation se passe dans un onglet non visible.
 
-<div class="note">
-<p><strong>Note :</strong> Pour plus d'informations sur la boucle d'animation, plus spécialement pour les jeux, rendez-vous sur l'article <a href="/fr/docs/Jeux/Anatomie">L'anatomie d'un jeu vidéo</a> dans notre section <a href="/fr/docs/Jeux">Développement de jeux vidéo</a>.</p>
-</div>
+> **Note :** Pour plus d'informations sur la boucle d'animation, plus spécialement pour les jeux, rendez-vous sur l'article [L'anatomie d'un jeu vidéo](/fr/docs/Jeux/Anatomie) dans notre section [Développement de jeux vidéo](/fr/docs/Jeux).
 
-<h2 id="Un_système_terrestre_animé">Un système terrestre animé</h2>
+## Un système terrestre animé
 
-<p>Cette exemple anime un petit modèle de notre système terrestre.</p>
+Cette exemple anime un petit modèle de notre système terrestre.
 
-<pre class="brush: js">var sun = new Image();
+```js
+var sun = new Image();
 var moon = new Image();
 var earth = new Image();
 function init(){
@@ -112,17 +107,20 @@ function draw() {
 }
 
 init();
-</pre>
+```
 
-<pre class="brush: html hidden">&lt;canvas id="canvas" width="300" height="300"&gt;&lt;/canvas&gt;</pre>
+```html hidden
+<canvas id="canvas" width="300" height="300"></canvas>
+```
 
-<p>{{EmbedLiveSample("Un_système_terrestre_animé", "310", "310", "canvas_animation1.png")}}</p>
+{{EmbedLiveSample("Un_système_terrestre_animé", "310", "310", "canvas_animation1.png")}}
 
-<h2 id="Une_horloge_animée">Une horloge animée</h2>
+## Une horloge animée
 
-<p>Cette exemple dessine une horloge animée qui affiche l'heure actuelle.</p>
+Cette exemple dessine une horloge animée qui affiche l'heure actuelle.
 
-<pre class="brush: js">function clock(){
+```js
+function clock(){
   var now = new Date();
   var ctx = document.getElementById('canvas').getContext('2d');
   ctx.save();
@@ -137,7 +135,7 @@ init();
 
   // Marquage des heures
   ctx.save();
-  for (var i=0;i&lt;12;i++){
+  for (var i=0;i<12;i++){
     ctx.beginPath();
     ctx.rotate(Math.PI/6);
     ctx.moveTo(100,0);
@@ -149,7 +147,7 @@ init();
   // Marquage des minutes
   ctx.save();
   ctx.lineWidth = 5;
-  for (i=0;i&lt;60;i++){
+  for (i=0;i<60;i++){
     if (i%5!=0) {
       ctx.beginPath();
       ctx.moveTo(117,0);
@@ -163,7 +161,7 @@ init();
   var sec = now.getSeconds();
   var min = now.getMinutes();
   var hr  = now.getHours();
-  hr = hr&gt;=12 ? hr-12 : hr;
+  hr = hr>=12 ? hr-12 : hr;
 
   ctx.fillStyle = "black";
 
@@ -219,17 +217,21 @@ init();
   window.requestAnimationFrame(clock);
 }
 
-window.requestAnimationFrame(clock);</pre>
+window.requestAnimationFrame(clock);
+```
 
-<pre class="brush: html hidden">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+```html hidden
+<canvas id="canvas" width="150" height="150"></canvas>
+```
 
-<p>{{EmbedLiveSample("Une_horloge_animée", "180", "180", "canvas_animation2.png")}}</p>
+{{EmbedLiveSample("Une_horloge_animée", "180", "180", "canvas_animation2.png")}}
 
-<h2 id="Un_panorama_défilant_en_boucle">Un panorama défilant en boucle</h2>
+## Un panorama défilant en boucle
 
-<p>Dans cet exemple, un panorama défile de la gauche vers la droite et recommence. Nous utilisons une <a href="http://commons.wikimedia.org/wiki/File:Capitan_Meadows,_Yosemite_National_Park.jpg">image du parc Yosemite National</a> récupérée sur Wikimedia, vous pouvez utiliser une autre image de votre choix qui est plus grande que le canevas.</p>
+Dans cet exemple, un panorama défile de la gauche vers la droite et recommence. Nous utilisons une [image du parc Yosemite National](http://commons.wikimedia.org/wiki/File:Capitan_Meadows,_Yosemite_National_Park.jpg) récupérée sur Wikimedia, vous pouvez utiliser une autre image de votre choix qui est plus grande que le canevas.
 
-<pre class="brush: js">var img = new Image();
+```js
+var img = new Image();
 
 // Variables utilisateur - les personnaliser pour changer l'image qui défile, ses
 // directions, et la vitesse.
@@ -255,17 +257,17 @@ img.onload = function() {
     imgW = img.width * scale;
     imgH = img.height * scale;
 
-    if (imgW &gt; CanvasXSize) {
+    if (imgW > CanvasXSize) {
         // image plus grande que le canvas
         x = CanvasXSize - imgW;
     }
-    if (imgW &gt; CanvasXSize) {
+    if (imgW > CanvasXSize) {
         // largeur de l'image plus grande que le canvas
         clearX = imgW;
     } else {
         clearX = CanvasXSize;
     }
-    if (imgH &gt; CanvasYSize) {
+    if (imgH > CanvasYSize) {
         // hauteur de l'image plus grande que le canvas
         clearY = imgH;
     } else {
@@ -282,30 +284,30 @@ img.onload = function() {
 function draw() {
     ctx.clearRect(0, 0, clearX, clearY); // clear the canvas
 
-    // si image est &lt;= taille du canvas
-    if (imgW &lt;= CanvasXSize) {
+    // si image est <= taille du canvas
+    if (imgW <= CanvasXSize) {
         // réinitialise, repart du début
-        if (x &gt; CanvasXSize) {
+        if (x > CanvasXSize) {
             x = -imgW + x;
         }
         // dessine image1 supplémentaire
-        if (x &gt; 0) {
+        if (x > 0) {
             ctx.drawImage(img, -imgW + x, y, imgW, imgH);
         }
         // dessine image2 supplémentaire
-        if (x - imgW &gt; 0) {
+        if (x - imgW > 0) {
             ctx.drawImage(img, -imgW * 2 + x, y, imgW, imgH);
         }
     }
 
-    // image est &gt; taille du canvas
+    // image est > taille du canvas
     else {
         // réinitialise, repeart du début
-        if (x &gt; (CanvasXSize)) {
+        if (x > (CanvasXSize)) {
             x = CanvasXSize - imgW;
         }
         // dessine image supplémentaire
-        if (x &gt; (CanvasXSize-imgW)) {
+        if (x > (CanvasXSize-imgW)) {
             ctx.drawImage(img, x - imgW + 1, y, imgW, imgH);
         }
     }
@@ -314,21 +316,21 @@ function draw() {
     // quantité à déplacer
     x += dx;
 }
-</pre>
+```
 
-<p>En dessous, vous trouvez l'élément {{HTMLElement("canvas")}} avec l'image qui défile. Notez que les dimensions de largeur et de hauteur spécifiées doivent correspondre aux valeurs des variables <code>CanvasXZSize</code> et <code>CanvasYSize</code> dans le code JavaScript.</p>
+En dessous, vous trouvez l'élément {{HTMLElement("canvas")}} avec l'image qui défile. Notez que les dimensions de largeur et de hauteur spécifiées doivent correspondre aux valeurs des variables `CanvasXZSize` et `CanvasYSize` dans le code JavaScript.
 
-<pre class="brush: html">&lt;canvas id="canvas" width="800" height="200"&gt;&lt;/canvas&gt;</pre>
+```html
+<canvas id="canvas" width="800" height="200"></canvas>
+```
 
-<p>{{EmbedLiveSample("Un_panorama_défilant_en_boucle", "830", "230")}}</p>
+{{EmbedLiveSample("Un_panorama_défilant_en_boucle", "830", "230")}}
 
-<h2 id="Other_examples">Autres exemples</h2>
+## Autres exemples
 
-<dl>
- <dt><a href="/fr/docs/Un_raycaster_basique_avec_canvas">Un raycaster basique avec canvas</a></dt>
- <dd>Un bon exemple d'animation contrôlée par le clavier.</dd>
- <dt><a href="/fr/docs/Tutoriel_canvas/Advanced_animations">Animations avancées</a></dt>
- <dd>Nous nous attarderons sur quelques techniques d'animation et de gestion de physique avancées dans le prochain châpitre.</dd>
-</dl>
+- [Un raycaster basique avec canvas](/fr/docs/Un_raycaster_basique_avec_canvas)
+  - : Un bon exemple d'animation contrôlée par le clavier.
+- [Animations avancées](/fr/docs/Tutoriel_canvas/Advanced_animations)
+  - : Nous nous attarderons sur quelques techniques d'animation et de gestion de physique avancées dans le prochain châpitre.
 
-<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Compositing", "Tutoriel_canvas/Advanced_animations")}}</p>
+{{PreviousNext("Web/API/Canvas_API/Tutorial/Compositing", "Tutoriel_canvas/Advanced_animations")}}
diff --git a/files/fr/web/api/canvas_api/tutorial/basic_usage/index.md b/files/fr/web/api/canvas_api/tutorial/basic_usage/index.md
index 0faa7a82ec..ca47946655 100644
--- a/files/fr/web/api/canvas_api/tutorial/basic_usage/index.md
+++ b/files/fr/web/api/canvas_api/tutorial/basic_usage/index.md
@@ -10,117 +10,122 @@ tags:
 translation_of: Web/API/Canvas_API/Tutorial/Basic_usage
 original_slug: Web/API/Canvas_API/Tutoriel_canvas/Utilisation_de_base
 ---
-<p>{{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas", "Tutoriel_canvas/Formes_géométriques")}}</p>
+{{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas", "Tutoriel_canvas/Formes_géométriques")}}
 
-<h2 id="Lélément_&lt;canvas>">L'élément <code>&lt;canvas&gt;</code></h2>
+## L'élément `<canvas>`
 
-<p>Commençons par regarder l'élément {{HTMLElement("canvas")}} lui-même.</p>
+Commençons par regarder l'élément {{HTMLElement("canvas")}} lui-même.
 
-<pre class="brush: html">&lt;canvas id="tutoriel" width="150" height="150"&gt;&lt;/canvas&gt;
-</pre>
+```html
+<canvas id="tutoriel" width="150" height="150"></canvas>
+```
 
-<p>Ceci ressemble beaucoup à l'élément &lt;img&gt;. La seule différence est qu'il n'y a pas les attributs <code>src</code> et <code>alt</code>. L'élément <code>&lt;canvas&gt;</code> a seulement deux attributs : {{htmlattrxref ("width", "canvas")}} et {{htmlattrxref ("height", "canvas")}} (« largeur » et « hauteur »). Ces deux attributs sont optionnels et peuvent aussi être fixés à travers le <a href="/fr/docs/R%C3%A9f%C3%A9rence_du_DOM_Gecko">DOM</a>. Quand les attributs <strong>width</strong> et <strong>height</strong> ne sont pas spécifiés, le canvas sera initialement large de <strong>300 pixels</strong> et haut de <strong>150 pixels</strong>. Les dimensions du canvas peuvent être modifiés par du <a href="/fr/docs/Web/CSS">CSS</a>, mais l'image sera dessinée selon les valeurs <strong>width</strong> et <strong>height</strong> du canvas et ensuite étirée pour afficher dans l'espace donné par le CSS.</p>
+Ceci ressemble beaucoup à l'élément \<img>. La seule différence est qu'il n'y a pas les attributs `src` et `alt`. L'élément `<canvas>` a seulement deux attributs : {{htmlattrxref ("width", "canvas")}} et {{htmlattrxref ("height", "canvas")}} (« largeur » et « hauteur »). Ces deux attributs sont optionnels et peuvent aussi être fixés à travers le [DOM](/fr/docs/R%C3%A9f%C3%A9rence_du_DOM_Gecko). Quand les attributs **width** et **height** ne sont pas spécifiés, le canvas sera initialement large de **300 pixels** et haut de **150 pixels**. Les dimensions du canvas peuvent être modifiés par du [CSS](/fr/docs/Web/CSS), mais l'image sera dessinée selon les valeurs **width** et **height** du canvas et ensuite étirée pour afficher dans l'espace donné par le CSS.
 
-<div class="note">
-<p><strong>Note :</strong> Si l'image semble déformée, essayez de spécifier de manière explicite vos attributs <code>width</code> et <code>height</code> dans l'élément <code>&lt;canvas&gt;</code>, et de ne pas utiliser de CSS.</p>
-</div>
+> **Note :** Si l'image semble déformée, essayez de spécifier de manière explicite vos attributs `width` et `height` dans l'élément `<canvas>`, et de ne pas utiliser de CSS.
 
-<p>L'attribut <code>id</code> n'est pas spécifique à l'élément <code>&lt;canvas&gt;</code>. C'est en fait un des attributs HTML de base qui peut être utilisé par presque tous les éléments HTML. C'est toujours mieux d'assigner une <code>id</code> car ça facilite beaucoup l'identification du <code>canvas</code> dans le code <code>javascript</code>.</p>
+L'attribut `id` n'est pas spécifique à l'élément `<canvas>`. C'est en fait un des attributs HTML de base qui peut être utilisé par presque tous les éléments HTML. C'est toujours mieux d'assigner une `id` car ça facilite beaucoup l'identification du `canvas` dans le code `javascript`.
 
-<p>L'élément <code>&lt;canvas&gt;</code> peut être stylisé comme n'importe quelle image normale (marges, contours, arrière-plan, etc). Si aucun style n'est donné, le canvas sera par défaut complètement transparent. Il faut noter que peu importe quels styles sont utilisés, le style n'affectera pas l'acte de dessiner sur le canvas. Nous verrons en détail la stylisation des canvas plus tard dans ce tutoriel.</p>
+L'élément `<canvas>` peut être stylisé comme n'importe quelle image normale (marges, contours, arrière-plan, etc). Si aucun style n'est donné, le canvas sera par défaut complètement transparent. Il faut noter que peu importe quels styles sont utilisés, le style n'affectera pas l'acte de dessiner sur le canvas. Nous verrons en détail la stylisation des canvas plus tard dans ce tutoriel.
 
-<h3 id="Contenu_de_repli">Contenu de repli</h3>
+### Contenu de repli
 
-<p>Puisque certains plus anciens navigateurs ne supportent pas l'élément {{HTMLElement("canvas")}} (les plus communs étant les versions d'Internet Explorer avant la version 9), il est mieux d'avoir du contenu de repli pour afficher.</p>
+Puisque certains plus anciens navigateurs ne supportent pas l'élément {{HTMLElement("canvas")}} (les plus communs étant les versions d'Internet Explorer avant la version 9), il est mieux d'avoir du contenu de repli pour afficher.
 
-<p>Heureusement, c'est très facile : il faut tout simplement mettre le contenu dans l'élément <code>&lt;canvas&gt;</code> lui-même. Les navigateurs qui ne supportent pas <code>&lt;canvas&gt;</code> vont afficher ce contenu de repli, et ceux qui supportent <code>&lt;canvas&gt;</code> vont l'ignorer et dessiner le canvas.</p>
+Heureusement, c'est très facile : il faut tout simplement mettre le contenu dans l'élément `<canvas>` lui-même. Les navigateurs qui ne supportent pas `<canvas>` vont afficher ce contenu de repli, et ceux qui supportent `<canvas>` vont l'ignorer et dessiner le canvas.
 
-<p>Le contenu de repli pourrait, par exemple, donner une description texte du canvas, ou afficher une image fixe comme aperçu de ce que le canvas dessinerait de façon dynamique.</p>
+Le contenu de repli pourrait, par exemple, donner une description texte du canvas, ou afficher une image fixe comme aperçu de ce que le canvas dessinerait de façon dynamique.
 
-<pre class="brush: html ">&lt;canvas id="stockGraph" width="150" height="150"&gt;
+```html
+<canvas id="stockGraph" width="150" height="150">
   current stock price: $3.15 + 0.15
-&lt;/canvas&gt;
+</canvas>
 
-&lt;canvas id="clock" width="150" height="150"&gt;
-  &lt;img src="images/clock.png" width="150" height="150" alt=""/&gt;
-&lt;/canvas&gt;</pre>
+<canvas id="clock" width="150" height="150">
+  <img src="images/clock.png" width="150" height="150" alt=""/>
+</canvas>
+```
 
-<h2 id="La_nécessité_de_la_balise_&lt;canvas>">La nécessité de la balise <code>&lt;/canvas&gt;</code></h2>
+## La nécessité de la balise `</canvas>`
 
-<p>Au contraire de l'élément {{HTMLElement("img")}}, l'élément {{HTMLElement("canvas")}} <strong>requiert</strong> la balise fermante (<code>&lt;/canvas&gt;</code>).</p>
+Au contraire de l'élément {{HTMLElement("img")}}, l'élément {{HTMLElement("canvas")}} **requiert** la balise fermante (`</canvas>`).
 
-<div class="note">
-<p><strong>Note :</strong> Bien que quelques unes des premières versions du navigateur Safari ne requièrent pas la balise fermante, la spécification HTML indique qu'elle est nécessaire, alors il est mieux de l'inclure pour avoir le plus de compatibilité possible. Ces anciennes versions de Safari (avant la version 2.0) affichent le contenu de repli en plus que le canvas lui-même, sauf si vous utilisez des trucs CSS pour le masquer. Heureusement, il y a très peu d'utilisateurs de ces vieilles versions de Safari de nos jours.</p>
-</div>
+> **Note :** Bien que quelques unes des premières versions du navigateur Safari ne requièrent pas la balise fermante, la spécification HTML indique qu'elle est nécessaire, alors il est mieux de l'inclure pour avoir le plus de compatibilité possible. Ces anciennes versions de Safari (avant la version 2.0) affichent le contenu de repli en plus que le canvas lui-même, sauf si vous utilisez des trucs CSS pour le masquer. Heureusement, il y a très peu d'utilisateurs de ces vieilles versions de Safari de nos jours.
 
-<p>Si vous n'avez pas besoin de contenu de repli, un simple <code>&lt;canvas id="foo" ...&gt;&lt;/canvas&gt;</code> est totalement compatible avec tous les navigateurs qui ont pris en charge la fonctionnalité canvas.</p>
+Si vous n'avez pas besoin de contenu de repli, un simple `<canvas id="foo" ...></canvas>` est totalement compatible avec tous les navigateurs qui ont pris en charge la fonctionnalité canvas.
 
-<h2 id="Le_contexte_de_rendu">Le contexte de rendu</h2>
+## Le contexte de rendu
 
-<p>L'élément {{HTMLElement("canvas")}} crée une surface pour dessiner à grandeur fixe. Cette surface expose un ou plusieurs <strong>contextes de rendu</strong>, qui sont utilisés pour créer et manipuler le contenu affiché. Ce tutoriel se concentrera sur le contexte de rendu 2D. D'autres contextes permettent d'autres types de rendu, tel que le contexte <a href="/fr/docs/Web/WebGL">WebGL</a>, qui utilise un contexte 3D ("experimental-webgl") inspiré de <a href="http://www.khronos.org/opengles/">OpenGL ES</a>.</p>
+L'élément {{HTMLElement("canvas")}} crée une surface pour dessiner à grandeur fixe. Cette surface expose un ou plusieurs **contextes de rendu**, qui sont utilisés pour créer et manipuler le contenu affiché. Ce tutoriel se concentrera sur le contexte de rendu 2D. D'autres contextes permettent d'autres types de rendu, tel que le contexte [WebGL](/fr/docs/Web/WebGL), qui utilise un contexte 3D ("experimental-webgl") inspiré de [OpenGL ES](http://www.khronos.org/opengles/).
 
-<p>Initialement, le canvas est vide. Pour afficher quelque chose,  un script doit commencer par accéder au contexte de rendu pour pouvoir dessiner dessus. L'élément {{HTMLElement("canvas")}} a une <a href="/fr/docs/Web/API/HTMLCanvasElement#M.C3.A9thodes">méthode</a> nommée <code>getContext()</code>, qui peut être utilisée pour obtenir le contexte de rendu et ses fonctions de dessin. <code>getContext()</code> a comme seul paramètre le type de contexte. Pour des graphiques 2D, comme ceux utilisés dans ce tutoriel, il faut spécifier "2d".</p>
+Initialement, le canvas est vide. Pour afficher quelque chose,  un script doit commencer par accéder au contexte de rendu pour pouvoir dessiner dessus. L'élément {{HTMLElement("canvas")}} a une [méthode](/fr/docs/Web/API/HTMLCanvasElement#M.C3.A9thodes) nommée `getContext()`, qui peut être utilisée pour obtenir le contexte de rendu et ses fonctions de dessin. `getContext()` a comme seul paramètre le type de contexte. Pour des graphiques 2D, comme ceux utilisés dans ce tutoriel, il faut spécifier "2d".
 
-<pre class="brush: js">var canvas = document.getElementById('tutorial');
-var ctx = canvas.getContext('2d');</pre>
+```js
+var canvas = document.getElementById('tutorial');
+var ctx = canvas.getContext('2d');
+```
 
-<p>La première ligne obtient le {{HTMLElement("canvas")}} dans le DOM en appelant {{domxref("document.getElementById()")}}. Lorsque nous avons l'élément canvas, nous pouvons accéder au contexte de rendu en utilisant sa méthode <code>getContext()</code>.</p>
+La première ligne obtient le {{HTMLElement("canvas")}} dans le DOM en appelant {{domxref("document.getElementById()")}}. Lorsque nous avons l'élément canvas, nous pouvons accéder au contexte de rendu en utilisant sa méthode `getContext()`.
 
-<h2 id="Vérification_de_la_prise_en_charge">Vérification de la prise en charge</h2>
+## Vérification de la prise en charge
 
-<p>Le contenu de repli est affiché dans les navigateurs qui ne prennent pas en charge l'élément {{HTMLElement("canvas")}}. Les scripts peuvent aussi vérifier la prise en charge de manière programmatique en vérifiant la présence de la méthode <code>getContext()</code>. Notre extrait de code ci-dessus se transforme donc en ceci :</p>
+Le contenu de repli est affiché dans les navigateurs qui ne prennent pas en charge l'élément {{HTMLElement("canvas")}}. Les scripts peuvent aussi vérifier la prise en charge de manière programmatique en vérifiant la présence de la méthode `getContext()`. Notre extrait de code ci-dessus se transforme donc en ceci :
 
-<pre class="brush: js">var canvas = document.getElementById('tutorial');
+```js
+var canvas = document.getElementById('tutorial');
 
 if (canvas.getContext) {
   var ctx = canvas.getContext('2d');
   // code de dessin dans le canvas
 } else {
   // code pour le cas où canvas ne serait pas supporté
-}</pre>
+}
+```
 
+## Un modèle basique
 
-<h2 id="Un_modèle_basique">Un modèle basique</h2>
+Voici un modèle minimaliste, que nous allons utiliser comme point de départ dans des futurs exemples.
 
-<p>Voici un modèle minimaliste, que nous allons utiliser comme point de départ dans des futurs exemples.</p>
-
-<pre class="brush: html ">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-  &lt;head&gt;
-    &lt;meta charset="utf-8"/&gt;
-    &lt;title&gt;Canvas tutorial&lt;/title&gt;
-    &lt;script type="text/javascript"&gt;
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title>Canvas tutorial</title>
+    <script type="text/javascript">
       function draw() {
         var canvas = document.getElementById('tutorial');
         if (canvas.getContext) {
           var ctx = canvas.getContext('2d');
         }
       }
-    &lt;/script&gt;
-    &lt;style type="text/css"&gt;
+    </script>
+    <style type="text/css">
       canvas { border: 1px solid black; }
-    &lt;/style&gt;
-  &lt;/head&gt;
-  &lt;body onload="draw();"&gt;
-    &lt;canvas id="tutorial" width="150" height="150"&gt;&lt;/canvas&gt;
-  &lt;/body&gt;
-&lt;/html&gt;</pre>
+    </style>
+  </head>
+  <body onload="draw();">
+    <canvas id="tutorial" width="150" height="150"></canvas>
+  </body>
+</html>
+```
 
-<p>Ce script contient une fonction <code>draw()</code>, qui est exécutée lorsque la page a fini de charger. Ce résultat est obtenu en utilisant l'événement de chargement du document. Cette fonction, ou une fonction similaire, pourrait aussi être appelé en utilisant {{domxref("window.setTimeout()")}}, {{domxref("window.setInterval()")}}, ou n'importe quel autre gestionnaire d'événement, tant que la page est chargée en premier.</p>
+Ce script contient une fonction `draw()`, qui est exécutée lorsque la page a fini de charger. Ce résultat est obtenu en utilisant l'événement de chargement du document. Cette fonction, ou une fonction similaire, pourrait aussi être appelé en utilisant {{domxref("window.setTimeout()")}}, {{domxref("window.setInterval()")}}, ou n'importe quel autre gestionnaire d'événement, tant que la page est chargée en premier.
 
-<p>Voici à quoi le modèle ressemble :</p>
+Voici à quoi le modèle ressemble :
 
-<p>{{EmbedLiveSample("Un_modèle_basique", 160, 160)}}</p>
+{{EmbedLiveSample("Un_modèle_basique", 160, 160)}}
 
-<h2 id="Un_exemple_simple">Un exemple simple</h2>
+## Un exemple simple
 
-<p>Pour commencer, observons un exemple simple qui dessine deux rectangles qui s'intersectent, un d'entre eux ayant de la transparence alpha. Nous verrons plus en détail comment ça marche dans les exemples suivants.</p>
+Pour commencer, observons un exemple simple qui dessine deux rectangles qui s'intersectent, un d'entre eux ayant de la transparence alpha. Nous verrons plus en détail comment ça marche dans les exemples suivants.
 
-<pre class="brush: html ">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
- &lt;head&gt;
-  &lt;meta charset="utf-8"/&gt;
-  &lt;script type="application/javascript"&gt;
+```html
+<!DOCTYPE html>
+<html>
+ <head>
+  <meta charset="utf-8"/>
+  <script type="application/javascript">
     function draw() {
       var canvas = document.getElementById("canvas");
       if (canvas.getContext) {
@@ -133,15 +138,16 @@ if (canvas.getContext) {
         ctx.fillRect(30, 30, 50, 50);
       }
     }
-  &lt;/script&gt;
- &lt;/head&gt;
- &lt;body onload="draw();"&gt;
-   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
- &lt;/body&gt;
-&lt;/html&gt;</pre>
+  </script>
+ </head>
+ <body onload="draw();">
+   <canvas id="canvas" width="150" height="150"></canvas>
+ </body>
+</html>
+```
 
-<p>Cet exemple ressemble a ceci :</p>
+Cet exemple ressemble a ceci :
 
-<p>{{EmbedLiveSample("Un_exemple_simple", 160, 160, "canvas_ex1.png")}}</p>
+{{EmbedLiveSample("Un_exemple_simple", 160, 160, "canvas_ex1.png")}}
 
-<p>{{PreviousNext("Tutoriel_canvas", "Tutoriel_canvas/Formes_géométriques")}}</p>
+{{PreviousNext("Tutoriel_canvas", "Tutoriel_canvas/Formes_géométriques")}}
diff --git a/files/fr/web/api/canvas_api/tutorial/compositing/example/index.md b/files/fr/web/api/canvas_api/tutorial/compositing/example/index.md
index f2992ea69d..e3343ba8a3 100644
--- a/files/fr/web/api/canvas_api/tutorial/compositing/example/index.md
+++ b/files/fr/web/api/canvas_api/tutorial/compositing/example/index.md
@@ -11,17 +11,18 @@ tags:
 translation_of: Web/API/Canvas_API/Tutorial/Compositing/Example
 original_slug: Web/API/Canvas_API/Tutoriel_canvas/Composition/Example
 ---
-<div>{{CanvasSidebar}}</div>
+{{CanvasSidebar}}
 
-<p>Cet exemple illustre un certain nombre d'<a href="/fr/docs/Web/API/CanvasRenderingContext2D.globalCompositeOperation">opérations de composition</a>. Le résultat donne ceci:</p>
+Cet exemple illustre un certain nombre d'[opérations de composition](/fr/docs/Web/API/CanvasRenderingContext2D.globalCompositeOperation). Le résultat donne ceci:
 
-<p>{{EmbedLiveSample("Exemple_de_composition", "100%", 7250)}}</p>
+{{EmbedLiveSample("Exemple_de_composition", "100%", 7250)}}
 
-<h2 id="Exemple_de_composition">Exemple de composition</h2>
+## Exemple de composition
 
-<p>Ce code configure les valeurs globales utilisées par le reste du programme.</p>
+Ce code configure les valeurs globales utilisées par le reste du programme.
 
-<pre class="brush: js">var canvas1 = document.createElement("canvas");
+```js
+var canvas1 = document.createElement("canvas");
 var canvas2 = document.createElement("canvas");
 var gco = [ 'source-over','source-in','source-out','source-atop',
             'destination-over','destination-in','destination-out','destination-atop',
@@ -59,13 +60,14 @@ var gcoText = [
 ].reverse();
 var width = 320;
 var height = 340;
-</pre>
+```
 
-<h3 id="Programme_principal">Programme principal</h3>
+### Programme principal
 
-<p>Quand la page se charge, le code suivant s'exécute pour configurer et exécuter l'exemple:</p>
+Quand la page se charge, le code suivant s'exécute pour configurer et exécuter l'exemple:
 
-<pre class="brush: js">window.onload = function() {
+```js
+window.onload = function() {
     // lum en sRGB
     var lum = {
         r: 0.33,
@@ -82,11 +84,12 @@ var height = 340;
     runComposite();
     return;
 };
-</pre>
+```
 
-<p>Et dans le code suivant, <code>runComposite()</code> gère la majeure partie du travail, en s'appuyant sur un certain nombre de fonctions utilitaires pour faire les parties difficiles.</p>
+Et dans le code suivant, `runComposite()` gère la majeure partie du travail, en s'appuyant sur un certain nombre de fonctions utilitaires pour faire les parties difficiles.
 
-<pre class="brush: js">function createCanvas() {
+```js
+function createCanvas() {
     var canvas = document.createElement("canvas");
     canvas.style.background = "url("+op_8x8.data+")";
     canvas.style.border = "1px solid #000";
@@ -156,13 +159,14 @@ function runComposite() {
         dl.appendChild(dd);
     }
 };
-</pre>
+```
 
-<h3 id="Fonctions_utilitaires">Fonctions utilitaires</h3>
+### Fonctions utilitaires
 
-<p>Notre programme repose sur un certain nombbre de fonctions utilitaires:</p>
+Notre programme repose sur un certain nombbre de fonctions utilitaires:
 
-<pre class="brush: js">var lightMix = function() {
+```js
+var lightMix = function() {
     var ctx = canvas2.getContext("2d");
     ctx.save();
     ctx.globalCompositeOperation = "lighter";
@@ -184,9 +188,10 @@ function runComposite() {
     ctx.fillRect(0,0,30,30)
     ctx.fill();
 };
-</pre>
+```
 
-<pre class="brush: js">var colorSphere = function(element) {
+```js
+var colorSphere = function(element) {
     var ctx = canvas1.getContext("2d");
     var width = 360;
     var halfWidth = width / 2;
@@ -194,7 +199,7 @@ function runComposite() {
     var offset = 0; // scrollbar offset
     var oleft = -20;
     var otop = -20;
-    for (var n = 0; n &lt;= 359; n ++) {
+    for (var n = 0; n <= 359; n ++) {
         var gradient = ctx.createLinearGradient(oleft + halfWidth, otop, oleft + halfWidth, otop + halfWidth);
         var color = Color.HSV_RGB({ H: (n + 300) % 360, S: 100, V: 100 });
         gradient.addColorStop(0, "rgba(0,0,0,0)");
@@ -216,9 +221,10 @@ function runComposite() {
     ctx.fill();
     return ctx.canvas;
 };
-</pre>
+```
 
-<pre class="brush: js">// HSV (1978) = H: Hue / S: Saturation / V: Value
+```js
+// HSV (1978) = H: Hue / S: Saturation / V: Value
 Color = {};
 Color.HSV_RGB = function (o) {
     var H = o.H / 360,
@@ -229,7 +235,7 @@ Color.HSV_RGB = function (o) {
     if (S == 0) {
         R = G = B = Math.round(V * 255);
     } else {
-        if (H &gt;= 1) H = 0;
+        if (H >= 1) H = 0;
         H = 6 * H;
         D = H - Math.floor(H);
         A = Math.round(255 * V * (1 - S));
@@ -293,4 +299,5 @@ var createInterlace = function (size, color1, color2) {
     return pattern;
 };
 
-var op_8x8 = createInterlace(8, "#FFF", "#eee");</pre>
+var op_8x8 = createInterlace(8, "#FFF", "#eee");
+```
diff --git a/files/fr/web/api/canvas_api/tutorial/compositing/index.md b/files/fr/web/api/canvas_api/tutorial/compositing/index.md
index 0ce19656af..3e0bf39741 100644
--- a/files/fr/web/api/canvas_api/tutorial/compositing/index.md
+++ b/files/fr/web/api/canvas_api/tutorial/compositing/index.md
@@ -8,47 +8,44 @@ tags:
 translation_of: Web/API/Canvas_API/Tutorial/Compositing
 original_slug: Web/API/Canvas_API/Tutoriel_canvas/Composition
 ---
-<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Transformations", "Web/API/Canvas_API/Tutorial/Basic_animations")}}</div>
+{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Transformations", "Web/API/Canvas_API/Tutorial/Basic_animations")}}
 
-<p>Dans tous nos <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations">exemples précédents</a>, les formes étaient toutes dessinées les unes au dessus des autres. C'est plus que suffisant pour la plupart des situations, mais cela limite l'ordre dans lequel les formes composées sont construites. Nous pouvons cependant changer ce comportement en définissant la propriété <code>globalCompositeOperation</code>. En complément, la propriété <code>clip</code> nous permet de cacher les parties des formes que nous ne désirons pas.</p>
+Dans tous nos [exemples précédents](/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations), les formes étaient toutes dessinées les unes au dessus des autres. C'est plus que suffisant pour la plupart des situations, mais cela limite l'ordre dans lequel les formes composées sont construites. Nous pouvons cependant changer ce comportement en définissant la propriété `globalCompositeOperation`. En complément, la propriété `clip` nous permet de cacher les parties des formes que nous ne désirons pas.
 
-<h2 id="globalCompositeOperation"><code>globalCompositeOperation</code></h2>
+## `globalCompositeOperation`
 
-<p>Nous pouvons non seulement dessiner de nouvelles formes derrière des formes existantes mais nous pouvons aussi les utiliser pour masquer certaines zones, supprimer des sections du canvas (ce n'est pas limité aux rectangles comme pour la méthode {{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}}) et davantage.</p>
+Nous pouvons non seulement dessiner de nouvelles formes derrière des formes existantes mais nous pouvons aussi les utiliser pour masquer certaines zones, supprimer des sections du canvas (ce n'est pas limité aux rectangles comme pour la méthode {{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}}) et davantage.
 
-<dl>
- <dt>{{domxref("CanvasRenderingContext2D.globalCompositeOperation", "globalCompositeOperation = type")}}</dt>
- <dd>Cela configure le type d'opération de composition à appliquer lorsqu'on dessine de nouvelles formes, où le type correspond à une string qui fait référence à une des douze opérations de composition possibles.</dd>
-</dl>
+- {{domxref("CanvasRenderingContext2D.globalCompositeOperation", "globalCompositeOperation = type")}}
+  - : Cela configure le type d'opération de composition à appliquer lorsqu'on dessine de nouvelles formes, où le type correspond à une string qui fait référence à une des douze opérations de composition possibles.
 
-<p>Reportez-vous aux <a href="/fr/docs/Tutoriel_canvas/Composition/Example">exemples de compositon</a> pour le code des exemples suivants.</p>
+Reportez-vous aux [exemples de compositon](/fr/docs/Tutoriel_canvas/Composition/Example) pour le code des exemples suivants.
 
-<p>{{EmbedLiveSample("Exemple_de_composition", 750, 6750, "" ,"/Tutoriel_canvas/Composition/Example")}}</p>
+{{EmbedLiveSample("Exemple_de_composition", 750, 6750, "" ,"/Tutoriel_canvas/Composition/Example")}}
 
-<h2 id="Clipping_paths">Détourage</h2>
+## Détourage
 
-<p>Un détourage (<em>clipping path</em> en anglais) est comme une forme de canvas standard, à la différence près qu'elle sert à masquer certaines parties du canvas. Voyez l'image de droite, la forme rouge (en étoile) est un détourage du canvas. Tout ce qui est en dehors du chemin n'est pas dessiné sur le canvas.</p>
+Un détourage (_clipping path_ en anglais) est comme une forme de canvas standard, à la différence près qu'elle sert à masquer certaines parties du canvas. Voyez l'image de droite, la forme rouge (en étoile) est un détourage du canvas. Tout ce qui est en dehors du chemin n'est pas dessiné sur le canvas.
 
-<img alt="" src="canvas_clipping_path.png">
+![](canvas_clipping_path.png)
 
-<p>Si nous comparons le détourage à la propriété <code>globalCompositeOperation</code> vue précédemment, nous voyons deux modes de composition qui ont plus ou moins les mémes effets qu'avec <code>source-in</code> et <code>source-atop</code>. La différence la plus significative entre les deux est que le détourage n'est jamais dessiné sur le canvas à proprement parler et il n'est jamais affecté par l'ajout de nouvelles formes. Ça le rend idéal pour dessiner plusieurs formes dans une zone restreinte.</p>
+Si nous comparons le détourage à la propriété `globalCompositeOperation` vue précédemment, nous voyons deux modes de composition qui ont plus ou moins les mémes effets qu'avec `source-in` et `source-atop`. La différence la plus significative entre les deux est que le détourage n'est jamais dessiné sur le canvas à proprement parler et il n'est jamais affecté par l'ajout de nouvelles formes. Ça le rend idéal pour dessiner plusieurs formes dans une zone restreinte.
 
-<p>Dans le chapitre "<a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes">dessiner des formes avec le canevas</a>", nous n'avions mentionné que les méthodes <code>stroke()</code> et <code>fill()</code>, mais il y en a une troisième: <code>clip()</code> — elle permet de faire des détourages.</p>
+Dans le chapitre "[dessiner des formes avec le canevas](/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)", nous n'avions mentionné que les méthodes `stroke()` et `fill()`, mais il y en a une troisième: `clip()` — elle permet de faire des détourages.
 
-<dl>
- <dt>{{domxref("CanvasRenderingContext2D.clip", "clip()")}}</dt>
- <dd>Transforme le chemin en cours de création en détourage effectif.</dd>
-</dl>
+- {{domxref("CanvasRenderingContext2D.clip", "clip()")}}
+  - : Transforme le chemin en cours de création en détourage effectif.
 
-<p>Il faut utiliser <code>clip()</code> plutot que <code>closePath()</code> pour fermer un chemin et enfaire un détourage.</p>
+Il faut utiliser `clip()` plutot que `closePath()` pour fermer un chemin et enfaire un détourage.
 
-<p>Par défault, l'élément {{HTMLElement("canvas")}} possède un détourage aux mêmes dimensions que le canvas lui-même. Donc, par défaut aucune découpe n'est apparente.</p>
+Par défault, l'élément {{HTMLElement("canvas")}} possède un détourage aux mêmes dimensions que le canvas lui-même. Donc, par défaut aucune découpe n'est apparente.
 
-<h3 id="A_clip_example">Un exemple de <code>clip</code></h3>
+### Un exemple de `clip`
 
-<p>Dans cet exemple, nous allons utiliser un détourage circulaire pour restreindre le dessin d'un essemble d'étoiles aléatoires à une zone particulière (et circulaire...).</p>
+Dans cet exemple, nous allons utiliser un détourage circulaire pour restreindre le dessin d'un essemble d'étoiles aléatoires à une zone particulière (et circulaire...).
 
-<pre class="brush: js">function draw() {
+```js
+function draw() {
   var ctx = document.getElementById('canvas').getContext('2d');
   ctx.fillRect(0, 0, 150, 150);
   ctx.translate(75, 75);
@@ -67,7 +64,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Composition
   ctx.fillRect(-75, -75, 150, 150);
 
   // draw stars
-  for (var j = 1; j &lt; 50; j++) {
+  for (var j = 1; j < 50; j++) {
     ctx.save();
     ctx.fillStyle = '#fff';
     ctx.translate(75 - Math.floor(Math.random() * 150),
@@ -82,7 +79,7 @@ function drawStar(ctx, r) {
   ctx.save();
   ctx.beginPath();
   ctx.moveTo(r, 0);
-  for (var i = 0; i &lt; 9; i++) {
+  for (var i = 0; i < 9; i++) {
     ctx.rotate(Math.PI / 5);
     if (i % 2 === 0) {
       ctx.lineTo((r / 0.525731) * 0.200811, 0);
@@ -94,16 +91,20 @@ function drawStar(ctx, r) {
   ctx.fill();
   ctx.restore();
 }
-</pre>
+```
 
-<pre class="brush: html hidden">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+```html hidden
+<canvas id="canvas" width="150" height="150"></canvas>
+```
 
-<pre class="brush: js hidden">draw();</pre>
+```js hidden
+draw();
+```
 
-<p>Dans les premières lignes de code, nous dessinons un rectangle noir ayant la même taille que le canvas comme toile de fond puis nous déplaçons l'origine au centre de l'image. Ensuite, nous créons le détourage circulaire en dessinant un arc (complet) et en faisant appelle à <code>clip()</code>. Les détourages font aussi partie de l'état de sauvegarde des canvas. Si on voulait garder le détourage d'origine, on pourrait par exemple sauvegarder l'état du canvas au préalable.</p>
+Dans les premières lignes de code, nous dessinons un rectangle noir ayant la même taille que le canvas comme toile de fond puis nous déplaçons l'origine au centre de l'image. Ensuite, nous créons le détourage circulaire en dessinant un arc (complet) et en faisant appelle à `clip()`. Les détourages font aussi partie de l'état de sauvegarde des canvas. Si on voulait garder le détourage d'origine, on pourrait par exemple sauvegarder l'état du canvas au préalable.
 
-<p>Tout ce qui sera dessiné après la création du détourage n'apparaîtra qu'à l'intérieur de ce chemin. Vous pouvez voir ça clairement avec le dégradé linéaire qui est dessiné après. Ensuite, un ensemble de 50 étoiles aléatoires est dessiné, en utilisant la fonction <code>drawStar()</code>. Nous pouvons voir, une fois de plus, que les éléments (ici les étoiles) n'apparaissent qu'à l'intérieur du détourage.</p>
+Tout ce qui sera dessiné après la création du détourage n'apparaîtra qu'à l'intérieur de ce chemin. Vous pouvez voir ça clairement avec le dégradé linéaire qui est dessiné après. Ensuite, un ensemble de 50 étoiles aléatoires est dessiné, en utilisant la fonction `drawStar()`. Nous pouvons voir, une fois de plus, que les éléments (ici les étoiles) n'apparaissent qu'à l'intérieur du détourage.
 
-<p>{{EmbedLiveSample("A_clip_example", "180", "180", "canvas_clip.png")}}</p>
+{{EmbedLiveSample("A_clip_example", "180", "180", "canvas_clip.png")}}
 
-<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Transformations", "Web/API/Canvas_API/Tutorial/Basic_animations")}}</p>
+{{PreviousNext("Web/API/Canvas_API/Tutorial/Transformations", "Web/API/Canvas_API/Tutorial/Basic_animations")}}
diff --git a/files/fr/web/api/canvas_api/tutorial/drawing_shapes/index.md b/files/fr/web/api/canvas_api/tutorial/drawing_shapes/index.md
index b265fb649a..99f0eb42d4 100644
--- a/files/fr/web/api/canvas_api/tutorial/drawing_shapes/index.md
+++ b/files/fr/web/api/canvas_api/tutorial/drawing_shapes/index.md
@@ -12,45 +12,45 @@ tags:
 translation_of: Web/API/Canvas_API/Tutorial/Drawing_shapes
 original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques
 ---
-<p>{{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas/Utilisation_de_base", "Tutoriel_canvas/Ajout_de_styles_et_de_couleurs")}}</p>
+{{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas/Utilisation_de_base", "Tutoriel_canvas/Ajout_de_styles_et_de_couleurs")}}
 
-<p>Maintenant que nous avons défini notre <a href="/fr/docs/Tutoriel_canvas/Utilisation_de_base">environnement de canevas</a>, nous pouvons entrer dans les détails de la façon de dessiner sur le canevas. A la fin de cet article, vous aurez appris à tracer des rectangles, des triangles, des lignes, des arcs et des courbes, vous rendant ainsi familier avec certaines des formes de base. Le travail avec les trajets est essentiel lors du dessin d'objets sur le canevas, et nous verrons comment cela peut être fait.</p>
+Maintenant que nous avons défini notre [environnement de canevas](/fr/docs/Tutoriel_canvas/Utilisation_de_base), nous pouvons entrer dans les détails de la façon de dessiner sur le canevas. A la fin de cet article, vous aurez appris à tracer des rectangles, des triangles, des lignes, des arcs et des courbes, vous rendant ainsi familier avec certaines des formes de base. Le travail avec les trajets est essentiel lors du dessin d'objets sur le canevas, et nous verrons comment cela peut être fait.
 
-<h2 id="La_grille">La grille</h2>
+## La grille
 
-<p>Avant de pouvoir commencer à dessiner, il nous faut parler de la grille ou <strong>système de coordonnées</strong>. Notre schéma HTML de la page précédente avait un élément canevas large de 150 pixels et haut de 150 pixels. À droite, vous voyez ce canevas avec la grille par défaut superposée. Normalement, 1 unité dans la grille correspond à 1 pixel sur le canevas. L'origine de cette grille est positionnée dans le coin <em>supérieur gauche</em> de coordonnées (0, 0). Tous les éléments sont placés relativement à cette origine. Ainsi, le coin supérieur gauche du carré bleu est à <code>x</code> pixels à partir de la gauche et à <code>y</code> pixels à partir du haut, aux coordonnées (x, y). Plus loin dans ce tutoriel, nous verrons comment déplacer l'origine à une position différente, faire pivoter la grille ou même la mettre à l'échelle ; mais pour l'instant, nous nous en tiendrons aux valeurs par défaut.</p>
+Avant de pouvoir commencer à dessiner, il nous faut parler de la grille ou **système de coordonnées**. Notre schéma HTML de la page précédente avait un élément canevas large de 150 pixels et haut de 150 pixels. À droite, vous voyez ce canevas avec la grille par défaut superposée. Normalement, 1 unité dans la grille correspond à 1 pixel sur le canevas. L'origine de cette grille est positionnée dans le coin *supérieur gauche* de coordonnées (0, 0). Tous les éléments sont placés relativement à cette origine. Ainsi, le coin supérieur gauche du carré bleu est à `x` pixels à partir de la gauche et à `y` pixels à partir du haut, aux coordonnées (x, y). Plus loin dans ce tutoriel, nous verrons comment déplacer l'origine à une position différente, faire pivoter la grille ou même la mettre à l'échelle ; mais pour l'instant, nous nous en tiendrons aux valeurs par défaut.
 
-<img alt="" src="canvas_default_grid.png">
+![](canvas_default_grid.png)
 
-<h2 id="Dessin_de_rectangles">Dessin de rectangles</h2>
+## Dessin de rectangles
 
-<p>Au contraire de <a href="/fr/docs/Web/SVG">SVG</a>, le {{HTMLElement("canvas")}} ne supporte qu'une seule forme primitive : le rectangle. Toute autre forme doit être créée en combinant un ou plusieurs trajets, c'est-à-dire des listes de points reliés par des lignes. Heureusement, nous avons un assortiment de fonctions de dessin de trajets, qui rendent possible la composition de formes très complexes.</p>
+Au contraire de [SVG](/fr/docs/Web/SVG), le {{HTMLElement("canvas")}} ne supporte qu'une seule forme primitive : le rectangle. Toute autre forme doit être créée en combinant un ou plusieurs trajets, c'est-à-dire des listes de points reliés par des lignes. Heureusement, nous avons un assortiment de fonctions de dessin de trajets, qui rendent possible la composition de formes très complexes.
 
-<p>Commençons par le rectangle. Il y a trois fonctions qui dessinent des rectangles sur le canvas :</p>
+Commençons par le rectangle. Il y a trois fonctions qui dessinent des rectangles sur le canvas :
 
-<dl>
- <dt>{{domxref("CanvasRenderingContext2D.fillRect", "fillRect(x, y, largeur, hauteur)")}}</dt>
- <dd>Dessine un rectangle rempli.</dd>
- <dt>{{domxref("CanvasRenderingContext2D.strokeRect", "strokeRect(x, y, largeur, hauteur)")}}</dt>
- <dd>Dessine un contour rectangulaire</dd>
- <dt>{{domxref("CanvasRenderingContext2D.clearRect", "clearRect(x, y, largeur, hauteur)")}}</dt>
- <dd>Efface la zone rectangulaire spécifiée, la rendant complètement transparente.</dd>
-</dl>
+- {{domxref("CanvasRenderingContext2D.fillRect", "fillRect(x, y, largeur, hauteur)")}}
+  - : Dessine un rectangle rempli.
+- {{domxref("CanvasRenderingContext2D.strokeRect", "strokeRect(x, y, largeur, hauteur)")}}
+  - : Dessine un contour rectangulaire
+- {{domxref("CanvasRenderingContext2D.clearRect", "clearRect(x, y, largeur, hauteur)")}}
+  - : Efface la zone rectangulaire spécifiée, la rendant complètement transparente.
 
-<p>Chacune de ces trois fonctions a les mêmes paramètres. <code>x</code> et <code>y</code> indiquent la position sur le canevas (par rapport à l'origine) du coin supérieur gauche du rectangle sur le canvas. <code>largeur</code> et <code>hauteur</code> indiquent la taille du rectangle.</p>
+Chacune de ces trois fonctions a les mêmes paramètres. `x` et `y` indiquent la position sur le canevas (par rapport à l'origine) du coin supérieur gauche du rectangle sur le canvas. `largeur` et `hauteur` indiquent la taille du rectangle.
 
-<p>Ci-dessous la fonction <code>draw()</code> de la page précédente, mais utilisant maintenant ces trois fonctions.</p>
+Ci-dessous la fonction `draw()` de la page précédente, mais utilisant maintenant ces trois fonctions.
 
-<h3 id="Exemple_de_forme_rectangulaire">Exemple de forme rectangulaire</h3>
+### Exemple de forme rectangulaire
 
-<pre class="brush: html hidden">&lt;html&gt;
- &lt;body onload="draw();"&gt;
-   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
- &lt;/body&gt;
-&lt;/html&gt;
-</pre>
+```html hidden
+<html>
+ <body onload="draw();">
+   <canvas id="canvas" width="150" height="150"></canvas>
+ </body>
+</html>
+```
 
-<pre class="brush: js">function draw() {
+```js
+function draw() {
   var canvas = document.getElementById('canvas');
   if (canvas.getContext) {
     var ctx = canvas.getContext('2d');
@@ -59,70 +59,65 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques
     ctx.clearRect(45, 45, 60, 60);
     ctx.strokeRect(50, 50, 50, 50);
   }
-}</pre>
+}
+```
 
-<p>Le résultat de cet exemple est montré ci-dessous.</p>
+Le résultat de cet exemple est montré ci-dessous.
 
-<p>{{EmbedLiveSample("Exemple_de_forme_rectangulaire", 160, 160, "canvas_rect.png")}}</p>
+{{EmbedLiveSample("Exemple_de_forme_rectangulaire", 160, 160, "canvas_rect.png")}}
 
-<p>La fonction <code>fillRect()</code> dessine un grand carré noir de 100 pixels de côté. La fonction <code>clearRect()</code> efface ensuite un carré de 60x60 pixels, et finalement, la fonction <code>strokeRect()</code> est appelée pour créer un contour rectangulaire de 50x50 pixels dans l'espace effacé.</p>
+La fonction `fillRect()` dessine un grand carré noir de 100 pixels de côté. La fonction `clearRect()` efface ensuite un carré de 60x60 pixels, et finalement, la fonction `strokeRect()` est appelée pour créer un contour rectangulaire de 50x50 pixels dans l'espace effacé.
 
-<p>Dans les pages qui suivent, nous verrons deux méthodes alternatives pour <code>clearRect()</code>, et nous verrons aussi comment changer la couleur et le style de trait des formes rendues.</p>
+Dans les pages qui suivent, nous verrons deux méthodes alternatives pour `clearRect()`, et nous verrons aussi comment changer la couleur et le style de trait des formes rendues.
 
-<p>A la différence des fonctions de trajet que nous allons voir dans la prochaine section, les trois fonctions de rectangles dessinent immédiatement sur le canvas.</p>
+A la différence des fonctions de trajet que nous allons voir dans la prochaine section, les trois fonctions de rectangles dessinent immédiatement sur le canvas.
 
-<h2 id="Dessin_de_trajets">Dessin de trajets</h2>
+## Dessin de trajets
 
-<p>Les seules autres formes primitives sont les <em>trajets</em>. Un trajet est une liste de points, reliés par des segments de lignes qui peuvent être de différentes formes, incurvées ou non, de largeur différente et de couleur différente. Un trajet, ou même un sous-trajet, peut être fermé. La réalisation de formes utilisant des trajets requiert quelques étapes supplémentaires :</p>
+Les seules autres formes primitives sont les _trajets_. Un trajet est une liste de points, reliés par des segments de lignes qui peuvent être de différentes formes, incurvées ou non, de largeur différente et de couleur différente. Un trajet, ou même un sous-trajet, peut être fermé. La réalisation de formes utilisant des trajets requiert quelques étapes supplémentaires :
 
-<ol>
- <li>Tout d'abord, vous devez créer le trajet.</li>
- <li>Ensuite vous devez utiliser des <a href="/fr-FR/docs/Web/API/CanvasRenderingContext2D#Paths">instructions de dessin</a> pour dessiner sur le trajet.</li>
- <li>Finalement, vous devez fermer le trajet.</li>
- <li>Une fois que le trajet a été créé, vous devez le tracer ou le remplir pour le faire apparaître.</li>
-</ol>
+1.  Tout d'abord, vous devez créer le trajet.
+2.  Ensuite vous devez utiliser des [instructions de dessin](/fr-FR/docs/Web/API/CanvasRenderingContext2D#Paths) pour dessiner sur le trajet.
+3.  Finalement, vous devez fermer le trajet.
+4.  Une fois que le trajet a été créé, vous devez le tracer ou le remplir pour le faire apparaître.
 
-<p>Voici les functions utilisées pour réaliser ces étapes :</p>
+Voici les functions utilisées pour réaliser ces étapes :
 
-<dl>
- <dt>{{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}}</dt>
- <dd>Crée un nouveau trajet. Une fois créé, les fonctions de dessin ultérieures seront dirigées vers le trajet et utilisées pour le construire.</dd>
- <dt><a href="/fr-FR/docs/Web/API/CanvasRenderingContext2D#Paths">Méthodes de trajet</a></dt>
- <dd>Méthodes pour définir différents trajets pour les objets.</dd>
- <dt>{{domxref("CanvasRenderingContext2D.closePath", "closePath()")}}</dt>
- <dd>Ferme le trajet pour que les fonctions de dessin ultérieures soient à nouveau dirigées vers le contexte.</dd>
- <dt>{{domxref("CanvasRenderingContext2D.stroke", "stroke()")}}</dt>
- <dd>Dessine la forme en traçant son contour.</dd>
- <dt>{{domxref("CanvasRenderingContext2D.fill", "fill()")}}</dt>
- <dd>Dessine une forme pleine en remplissant la zone de contenu du trajet.</dd>
-</dl>
+- {{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}}
+  - : Crée un nouveau trajet. Une fois créé, les fonctions de dessin ultérieures seront dirigées vers le trajet et utilisées pour le construire.
+- [Méthodes de trajet](/fr-FR/docs/Web/API/CanvasRenderingContext2D#Paths)
+  - : Méthodes pour définir différents trajets pour les objets.
+- {{domxref("CanvasRenderingContext2D.closePath", "closePath()")}}
+  - : Ferme le trajet pour que les fonctions de dessin ultérieures soient à nouveau dirigées vers le contexte.
+- {{domxref("CanvasRenderingContext2D.stroke", "stroke()")}}
+  - : Dessine la forme en traçant son contour.
+- {{domxref("CanvasRenderingContext2D.fill", "fill()")}}
+  - : Dessine une forme pleine en remplissant la zone de contenu du trajet.
 
-<p>La première étape pour créer un trajet est d'appeler <code>beginPath()</code>. En interne, les trajets sont stockés comme une liste de sous-trajets (lignes, arcs, etc) qui ensemble réalisent une forme. Chaque fois que cette méthode est appelée, la liste est remise à zéro, et nous pouvons commencer à dessiner de nouvelles formes.</p>
+La première étape pour créer un trajet est d'appeler `beginPath()`. En interne, les trajets sont stockés comme une liste de sous-trajets (lignes, arcs, etc) qui ensemble réalisent une forme. Chaque fois que cette méthode est appelée, la liste est remise à zéro, et nous pouvons commencer à dessiner de nouvelles formes.
 
-<div class="note">
-  <p><strong>Note :</strong> Lorsque le trajet en cours est vide, par exemple immédiatement après avoir appelé <code>beginPath()</code>, ou sur un canvas nouvellement créé, la première instruction de construction de trajet est toujours traitée comme un <code>moveTo()</code>, indépendamment de ce qu'elle est en réalité. Pour cette raison, il sera pratiquement toujours souhaitable d'indiquer la position de départ après la réinitialisation d'un trajet.</p>
-</div>
+> **Note :** Lorsque le trajet en cours est vide, par exemple immédiatement après avoir appelé `beginPath()`, ou sur un canvas nouvellement créé, la première instruction de construction de trajet est toujours traitée comme un `moveTo()`, indépendamment de ce qu'elle est en réalité. Pour cette raison, il sera pratiquement toujours souhaitable d'indiquer la position de départ après la réinitialisation d'un trajet.
 
-<p>La deuxième étape est d'appeler les méthodes qui indiquent effectivement les sous-trajets à dessiner. Nous verrons ces méthodes bientôt.</p>
+La deuxième étape est d'appeler les méthodes qui indiquent effectivement les sous-trajets à dessiner. Nous verrons ces méthodes bientôt.
 
-<p>La troisième méthode, optionnelle, est l'appel à <code>closePath()</code>. Cette méthode essaye de fermer la forme géométrique en dessinant une ligne droite depuis le point courant jusqu'au début du trajet. Si la forme a déjà été fermée ou s'il n'y a qu'un seul point dans la liste, cette fonction ne fait rien.</p>
+La troisième méthode, optionnelle, est l'appel à `closePath()`. Cette méthode essaye de fermer la forme géométrique en dessinant une ligne droite depuis le point courant jusqu'au début du trajet. Si la forme a déjà été fermée ou s'il n'y a qu'un seul point dans la liste, cette fonction ne fait rien.
 
-<div class="note">
-  <p><strong>Note :</strong> Quand vous appelez <code>fill()</code>, toutes les formes ouvertes sont automatiquement fermées, ainsi vous n'avez pas à appeler <code>closePath()</code>. Ce n'est <strong>pas</strong> le cas quand vous appelez <code>stroke()</code>.</p>
-</div>
+> **Note :** Quand vous appelez `fill()`, toutes les formes ouvertes sont automatiquement fermées, ainsi vous n'avez pas à appeler `closePath()`. Ce n'est **pas** le cas quand vous appelez `stroke()`.
 
-<h3 id="Dessin_dun_triangle">Dessin d'un triangle</h3>
+### Dessin d'un triangle
 
-<p>Par exemple, le code pour dessiner un triangle peut ressembler à ce qui suit :</p>
+Par exemple, le code pour dessiner un triangle peut ressembler à ce qui suit :
 
-<pre class="brush: html hidden">&lt;html&gt;
- &lt;body onload="dessiner();"&gt;
-   &lt;canvas id="canevas" width="150" height="150"&gt;&lt;/canvas&gt;
- &lt;/body&gt;
-&lt;/html&gt;
-</pre>
+```html hidden
+<html>
+ <body onload="dessiner();">
+   <canvas id="canevas" width="150" height="150"></canvas>
+ </body>
+</html>
+```
 
-<pre class="brush: js">function dessiner() {
+```js
+function dessiner() {
   var canevas = document.getElementById('canevas');
   if (canevas.getContext) {
     var ctx = canevas.getContext('2d');
@@ -134,33 +129,33 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques
     ctx.fill();
   }
 }
-</pre>
+```
 
-<p>Le résultat ressemble à :</p>
+Le résultat ressemble à :
 
-<p>{{EmbedLiveSample("Dessin_d'un_triangle", 110, 110, "triangle.png")}}</p>
+{{EmbedLiveSample("Dessin_d'un_triangle", 110, 110, "triangle.png")}}
 
-<h3 id="Déplacement_du_stylo">Déplacement du stylo</h3>
+### Déplacement du stylo
 
-<p>Une fonction très utile, qui ne dessine rien mais qui fait tout de même partie de la liste de trajets décrite plus haut, est la fonction <code>moveTo()</code>. La meilleure façon de l'imaginer est le fait de lever un stylo ou un crayon depuis une position sur un papier, et de le placer sur une autre.</p>
+Une fonction très utile, qui ne dessine rien mais qui fait tout de même partie de la liste de trajets décrite plus haut, est la fonction `moveTo()`. La meilleure façon de l'imaginer est le fait de lever un stylo ou un crayon depuis une position sur un papier, et de le placer sur une autre.
 
-<dl>
- <dt>{{domxref("CanvasRenderingContext2D.moveTo", "moveTo(x, y)")}}</dt>
- <dd>Déplace le stylo aux coordonnées <code>x</code> et <code>y</code>.</dd>
-</dl>
+- {{domxref("CanvasRenderingContext2D.moveTo", "moveTo(x, y)")}}
+  - : Déplace le stylo aux coordonnées `x` et `y`.
 
-<p>Lorsque le canevas est initialisé ou que <code>beginPath()</code> est appelé, vous souhaiterez typiquement utiliser <code>moveTo()</code> pour positionner le point de départ quelque part ailleurs. On pourrait aussi utiliser <code>moveTo()</code> pour dessiner des trajets non reliés. Jetez un coup d'œil à l'émoticon ci-dessous.</p>
+Lorsque le canevas est initialisé ou que `beginPath()` est appelé, vous souhaiterez typiquement utiliser `moveTo()` pour positionner le point de départ quelque part ailleurs. On pourrait aussi utiliser `moveTo()` pour dessiner des trajets non reliés. Jetez un coup d'œil à l'émoticon ci-dessous.
 
-<p>Pour essayer par vous-même, vous pouvez utiliser le fragment de code ci-dessous. Collez-le simplement dans la fonction <code>draw()</code> que nous avons vue plus tôt.</p>
+Pour essayer par vous-même, vous pouvez utiliser le fragment de code ci-dessous. Collez-le simplement dans la fonction `draw()` que nous avons vue plus tôt.
 
-<pre class="brush: html hidden">&lt;html&gt;
- &lt;body onload="draw();"&gt;
-   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
- &lt;/body&gt;
-&lt;/html&gt;
-</pre>
+```html hidden
+<html>
+ <body onload="draw();">
+   <canvas id="canvas" width="150" height="150"></canvas>
+ </body>
+</html>
+```
 
-<pre class="brush: js">function draw() {
+```js
+function draw() {
   var canvas = document.getElementById('canvas');
   if (canvas.getContext) {
     var ctx = canvas.getContext('2d');
@@ -176,39 +171,37 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques
     ctx.stroke();
   }
 }
-</pre>
+```
 
-<p>Le résultat ressemble à ce qui suit :</p>
+Le résultat ressemble à ce qui suit :
 
-<p>{{EmbedLiveSample("Déplacement_du_stylo", 160, 160, "canvas_smiley.png")}}</p>
+{{EmbedLiveSample("Déplacement_du_stylo", 160, 160, "canvas_smiley.png")}}
 
-<p>Si vous voulez voir les lignes d'interconnexion, vous pouvez enlever les lignes qui appellent <code>moveTo()</code>.</p>
+Si vous voulez voir les lignes d'interconnexion, vous pouvez enlever les lignes qui appellent `moveTo()`.
 
-<div class="note">
-<p><strong>Note :</strong> Pour en savoir plus sur la fonction <code>arc()</code>, voir la section {{anch("Arcs")}} ci-dessous.</p>
-</div>
+> **Note :** Pour en savoir plus sur la fonction `arc()`, voir la section {{anch("Arcs")}} ci-dessous.
 
-<h3 id="Les_lignes">Les lignes</h3>
+### Les lignes
 
-<p>Pour dessiner des lignes droites, utilisez la méthode <code>lineTo()</code>.</p>
+Pour dessiner des lignes droites, utilisez la méthode `lineTo()`.
 
-<dl>
- <dt>{{domxref("CanvasRenderingContext2D.lineTo", "lineTo(x, y)")}}</dt>
- <dd>Dessine une ligne depuis la position de dessin courante jusqu'à la position spécifiée par <code>x</code> et <code>y</code>.</dd>
-</dl>
+- {{domxref("CanvasRenderingContext2D.lineTo", "lineTo(x, y)")}}
+  - : Dessine une ligne depuis la position de dessin courante jusqu'à la position spécifiée par `x` et `y`.
 
-<p>Cette méthode prend deux arguments, <code>x</code> et <code>y</code>, qui sont les coordonnées du point final de la ligne. Le point de départ dépend des trajets précédemment tracés, où le point final du trajet précédent est le point de départ du suivant, etc. Le point de départ peut aussi être changé en utilisant la méthode <code>moveTo()</code>.</p>
+Cette méthode prend deux arguments, `x` et `y`, qui sont les coordonnées du point final de la ligne. Le point de départ dépend des trajets précédemment tracés, où le point final du trajet précédent est le point de départ du suivant, etc. Le point de départ peut aussi être changé en utilisant la méthode `moveTo()`.
 
-<p>L'exemple ci-dessous dessine deux triangles, un rempli et un filaire.</p>
+L'exemple ci-dessous dessine deux triangles, un rempli et un filaire.
 
-<pre class="brush: html hidden">&lt;html&gt;
- &lt;body onload="dessiner();"&gt;
-   &lt;canvas id="canevas" width="150" height="150"&gt;&lt;/canvas&gt;
- &lt;/body&gt;
-&lt;/html&gt;
-</pre>
+```html hidden
+<html>
+ <body onload="dessiner();">
+   <canvas id="canevas" width="150" height="150"></canvas>
+ </body>
+</html>
+```
 
-<pre class="brush: js">function dessiner() {
+```js
+function dessiner() {
   var canevas = document.getElementById('canevas');
   if (canevas.getContext) {
     var ctx = canevas.getContext('2d');
@@ -229,57 +222,53 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques
     ctx.stroke();
   }
 }
-</pre>
+```
 
-<p>Il commence par appeler <code>beginPath()</code> pour démarrer un nouveau trajet de forme. Nous utilisons ensuite la méthode <code>moveTo()</code> pour déplacer le point de départ à la position désirée. En dessous, deux lignes sont dessinées, qui constituent deux côtés du triangle.</p>
+Il commence par appeler `beginPath()` pour démarrer un nouveau trajet de forme. Nous utilisons ensuite la méthode `moveTo()` pour déplacer le point de départ à la position désirée. En dessous, deux lignes sont dessinées, qui constituent deux côtés du triangle.
 
-<p>{{EmbedLiveSample("Les_lignes", 160, 160, "canvas_lineto.png")}}</p>
+{{EmbedLiveSample("Les_lignes", 160, 160, "canvas_lineto.png")}}
 
-<p>Vous remarquerez la différence entre le triangle plein et le filaire. Cela, comme mentionné précédemment, vient du fait que les formes sont automatiquement fermées lorsqu'un trajet est rempli, mais pas lorsqu'elles sont dessinées au trait. Si nous avions omis le <code>closePath()</code> pour le triangle filaire, seules deux lignes auraient été tracées, et non pas un triangle complet.</p>
+Vous remarquerez la différence entre le triangle plein et le filaire. Cela, comme mentionné précédemment, vient du fait que les formes sont automatiquement fermées lorsqu'un trajet est rempli, mais pas lorsqu'elles sont dessinées au trait. Si nous avions omis le `closePath()` pour le triangle filaire, seules deux lignes auraient été tracées, et non pas un triangle complet.
 
-<h3 id="Les_arcs">Les arcs</h3>
+### Les arcs
 
-<p>Pour dessiner des arcs ou des cercles, on utilise les méthodes <code>arc() ou arcTo()</code>.</p>
+Pour dessiner des arcs ou des cercles, on utilise les méthodes `arc() ou arcTo()`.
 
-<dl>
- <dt>{{domxref("CanvasRenderingContext2D.arc", "arc(x, y, rayon, angleInitial, angleFinal, antihoraire)")}}</dt>
- <dd>Dessine un arc de cercle qui est centré à la position <em>(x, y),</em> de rayon <em>r</em>, commençant à <em>angleInitial</em> et finissant à <em>angleFinal</em> en allant dans le sens indiqué par <em>antihoraire</em> (par défaut, horaire).</dd>
- <dt><strong>{{domxref("CanvasRenderingContext2D.arcTo", "arcTo(x1, y1, x2, y2, rayon)")}}</strong></dt>
- <dd>Dessine un arc avec les points de contrôle et l'angle donnés, relié au point précédent par une ligne droite.</dd>
-</dl>
+- {{domxref("CanvasRenderingContext2D.arc", "arc(x, y, rayon, angleInitial, angleFinal, antihoraire)")}}
+  - : Dessine un arc de cercle qui est centré à la position _(x, y),_ de rayon _r_, commençant à _angleInitial_ et finissant à *angleFinal* en allant dans le sens indiqué par _antihoraire_ (par défaut, horaire).
+- **{{domxref("CanvasRenderingContext2D.arcTo", "arcTo(x1, y1, x2, y2, rayon)")}}**
+  - : Dessine un arc avec les points de contrôle et l'angle donnés, relié au point précédent par une ligne droite.
 
-<p>Regardons plus en détail la méthode <code>arc</code>, qui prend six paramètres : <code>x</code> et <code>y</code> sont les coordonnées du centre du cercle sur lequel l'arc doit être tracé. <code>rayon</code> se passe d'explication. Les paramètres <code>angleInitial et</code> <code>angleFinal</code> définissent en radians les points de départ et d'arrivée de l'arc, le long de la courbe du cercle. Ceux-ci sont mesurés à partir de l'axe des x. Le paramètre <code>antihoraire</code> est une valeur booléenne qui, lorsque <code>true</code>, dessine l'arc dans le sens antihoraire, sinon, l'arc est dessiné dans le sens horaire.</p>
+Regardons plus en détail la méthode `arc`, qui prend six paramètres : `x` et `y` sont les coordonnées du centre du cercle sur lequel l'arc doit être tracé. `rayon` se passe d'explication. Les paramètres `angleInitial et` `angleFinal` définissent en radians les points de départ et d'arrivée de l'arc, le long de la courbe du cercle. Ceux-ci sont mesurés à partir de l'axe des x. Le paramètre `antihoraire` est une valeur booléenne qui, lorsque `true`, dessine l'arc dans le sens antihoraire, sinon, l'arc est dessiné dans le sens horaire.
 
-<div class="note">
-<p><strong>Note :</strong> Les angles dans la fonction <code>arc</code> sont mesurés en radians, et non en degrés. Pour convertir des degrés en radians, vous pouvez utiliser l'expression JavaScript suivante : <code>radians = (Math.PI/180)*degres</code>.</p>
-</div>
+> **Note :** Les angles dans la fonction `arc` sont mesurés en radians, et non en degrés. Pour convertir des degrés en radians, vous pouvez utiliser l'expression JavaScript suivante : `radians = (Math.PI/180)*degres`.
 
-<p>L'exemple suivant est un peu plus complexe que ceux que nous avons vus plus haut. Il dessine 12 arcs différents, avec des angles et des remplissages différents.</p>
+L'exemple suivant est un peu plus complexe que ceux que nous avons vus plus haut. Il dessine 12 arcs différents, avec des angles et des remplissages différents.
 
-<p>Les deux <a href="/fr-FR/docs/Web/JavaScript/Reference/Statements/for">boucles <code>for</code></a> bouclent sur les lignes et les colonnes des arcs. Pour chaque arc, on commence un nouveau trajet en appelant <code>beginPath()</code>. Dans le code, chacun des paramètres dans l'arc est une variable pour des raisons de clarté, mais en réalité, vous n'avez pas besoin de le faire.</p>
+Les deux [boucles `for`](/fr-FR/docs/Web/JavaScript/Reference/Statements/for) bouclent sur les lignes et les colonnes des arcs. Pour chaque arc, on commence un nouveau trajet en appelant `beginPath()`. Dans le code, chacun des paramètres dans l'arc est une variable pour des raisons de clarté, mais en réalité, vous n'avez pas besoin de le faire.
 
-<p>Les coordonnées <code>x</code> et <code>y</code> devraient être claires. <code>rayon</code> et <code>angleInitial</code> sont fixés. L'<code>angleFinal</code> commence à 180 degrés (demi-cercle) dans la première colonne et il est augmenté par pas de 90 degrés, pour finir par un cercle complet dans la dernière colonne.</p>
+Les coordonnées `x` et `y` devraient être claires. `rayon` et `angleInitial` sont fixés. L'`angleFinal` commence à 180 degrés (demi-cercle) dans la première colonne et il est augmenté par pas de 90 degrés, pour finir par un cercle complet dans la dernière colonne.
 
-<p>L'instruction pour le paramètre <code>antihoraire</code> a pour résultat que la première et de la troisième ligne sont dessinées comme des arcs de sens horaire, et que la deuxième et quatrième sont dessinées comme des arcs de sens antihoraire. Enfin, l'instruction <code>if</code> fait des arcs filaires dans la moité supérieure, et des arcs remplis dans la moitié inférieure.</p>
+L'instruction pour le paramètre `antihoraire` a pour résultat que la première et de la troisième ligne sont dessinées comme des arcs de sens horaire, et que la deuxième et quatrième sont dessinées comme des arcs de sens antihoraire. Enfin, l'instruction `if` fait des arcs filaires dans la moité supérieure, et des arcs remplis dans la moitié inférieure.
 
-<div class="note">
-<p><strong>Note :</strong> Cet exemple requiert canevas légèrement plus large que les autres sur cette page : 150 x 200 pixels.</p>
-</div>
+> **Note :** Cet exemple requiert canevas légèrement plus large que les autres sur cette page : 150 x 200 pixels.
 
-<pre class="brush: html hidden">&lt;html&gt;
- &lt;body onload="dessiner();"&gt;
-   &lt;canvas id="canevas" width="150" height="200"&gt;&lt;/canvas&gt;
- &lt;/body&gt;
-&lt;/html&gt;
-</pre>
+```html hidden
+<html>
+ <body onload="dessiner();">
+   <canvas id="canevas" width="150" height="200"></canvas>
+ </body>
+</html>
+```
 
-<pre class="brush: js">function dessiner() {
+```js
+function dessiner() {
   var canevas = document.getElementById('canevas');
   if (canevas.getContext) {
     var ctx = canevas.getContext('2d');
 
-    for(var i = 0; i &lt; 4; i++) {
-      for(var j = 0; j &lt; 3; j++) {
+    for(var i = 0; i < 4; i++) {
+      for(var j = 0; j < 3; j++) {
         ctx.beginPath();
         var x = 25 + j * 50; // Coordonnée x
         var y = 25 + i * 50; // Coordonnée y
@@ -290,7 +279,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques
 
         ctx.arc(x, y, rayon, angleInitial, angleFinal, antihoraire);
 
-        if (i&gt;1) {
+        if (i>1) {
           ctx.fill();
         } else {
           ctx.stroke();
@@ -299,43 +288,43 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques
     }
   }
 }
-</pre>
+```
 
-<p>{{EmbedLiveSample("Les_arcs", 160, 210, "canvas_arc.png")}}</p>
+{{EmbedLiveSample("Les_arcs", 160, 210, "canvas_arc.png")}}
 
-<h3 id="Les_courbes_quadratiques_et_de_Bézier">Les courbes quadratiques et de Bézier</h3>
+### Les courbes quadratiques et de Bézier
 
-<p>Le type suivant de trajets disponible est la <a href="https://fr.wikipedia.org/wiki/Courbe_de_B%C3%A9zier">courbe de Bézier</a>, disponible en deux variétés, cubique et quadratique. Elles sont généralement utilisées pour dessiner des formes naturelles complexes.</p>
+Le type suivant de trajets disponible est la [courbe de Bézier](https://fr.wikipedia.org/wiki/Courbe_de_B%C3%A9zier), disponible en deux variétés, cubique et quadratique. Elles sont généralement utilisées pour dessiner des formes naturelles complexes.
 
-<dl>
- <dt>{{domxref("CanvasRenderingContext2D.quadraticCurveTo", "quadraticCurveTo(cp1x, cp1y, x, y)")}}</dt>
- <dd>Dessine une courbe de Bézier quadratique depuis la position courante du stylo jusqu'au point final spécifié par <code>x</code> et <code>y</code>, en utilisant le point de contrôle spécifié par <code>cp1x</code> et <code>cp1y</code>.</dd>
- <dt>{{domxref("CanvasRenderingContext2D.bezierCurveTo", "bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)")}}</dt>
- <dd>Dessine une courbe de Bézier cubique depuis la position courante du stylo jusqu'au point spécifié par <code>x</code> et <code>y</code>, en utilisant les points de contrôle (<code>cp1x</code>, <code>cp1y</code>) et (<code>cp2x</code>, <code>cp2y</code>).</dd>
-</dl>
+- {{domxref("CanvasRenderingContext2D.quadraticCurveTo", "quadraticCurveTo(cp1x, cp1y, x, y)")}}
+  - : Dessine une courbe de Bézier quadratique depuis la position courante du stylo jusqu'au point final spécifié par `x` et `y`, en utilisant le point de contrôle spécifié par `cp1x` et `cp1y`.
+- {{domxref("CanvasRenderingContext2D.bezierCurveTo", "bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)")}}
+  - : Dessine une courbe de Bézier cubique depuis la position courante du stylo jusqu'au point spécifié par `x` et `y`, en utilisant les points de contrôle (`cp1x`, `cp1y`) et (`cp2x`, `cp2y`).
 
-<p>La différence entre ces deux méthodes est mieux décrite par l'image à droite. Une courbe quadratique de Bézier a un point de départ et un point d'arrivée (points bleus), et seulement un <strong>point de contrôle</strong> (indiqué par le point rouge), tandis qu'une courbe de Bézier cubique utilise deux points de contrôle.</p>
+La différence entre ces deux méthodes est mieux décrite par l'image à droite. Une courbe quadratique de Bézier a un point de départ et un point d'arrivée (points bleus), et seulement un **point de contrôle** (indiqué par le point rouge), tandis qu'une courbe de Bézier cubique utilise deux points de contrôle.
 
-<p><img alt="" src="canvas_curves.png"></p>
+![](canvas_curves.png)
 
-<p>Les paramètres <code>x</code> et <code>y</code> de ces deux méthodes sont les coordonnées du point d'arrivée. <code>cp1x</code> et <code>cp1y</code> sont les coordonnées du premier point de contrôle, et  <code>cp2x</code> et <code>cp2y</code> sont les coordonnées du second point de contrôle.</p>
+Les paramètres `x` et `y` de ces deux méthodes sont les coordonnées du point d'arrivée. `cp1x` et `cp1y` sont les coordonnées du premier point de contrôle, et  `cp2x` et `cp2y` sont les coordonnées du second point de contrôle.
 
-<p>Utiliser des courbes quadratiques et cubiques de Bézier peut constituer un certain défi, car à la différence d'un logiciel de tracé des vecteurs comme <em>Adobe Illustrator</em>, nous n'avons pas de retour visuel direct concernant ce que nous faisons. Cela rend passablement difficile le dessin de formes complexes. Dans l'exemple suivant, nous allons dessiner quelques formes naturelles simples, mais si vous avez du temps et - surtout - de la patience, des formes bien plus complexes peuvent être créées.</p>
+Utiliser des courbes quadratiques et cubiques de Bézier peut constituer un certain défi, car à la différence d'un logiciel de tracé des vecteurs comme _Adobe Illustrator_, nous n'avons pas de retour visuel direct concernant ce que nous faisons. Cela rend passablement difficile le dessin de formes complexes. Dans l'exemple suivant, nous allons dessiner quelques formes naturelles simples, mais si vous avez du temps et - surtout - de la patience, des formes bien plus complexes peuvent être créées.
 
-<p>Il n'y a rien de très difficile dans ces exemples. Dans les deux cas, on peut voir une succession de courbes être dessinées qui aboutissent finalement à une forme complète.</p>
+Il n'y a rien de très difficile dans ces exemples. Dans les deux cas, on peut voir une succession de courbes être dessinées qui aboutissent finalement à une forme complète.
 
-<h4 id="Courbes_de_Bézier_quadratiques">Courbes de Bézier quadratiques</h4>
+#### Courbes de Bézier quadratiques
 
-<p>Cet exemple utilise plusieurs courbes quadratiques de Bézier pour rendre une bulle de dialogue.</p>
+Cet exemple utilise plusieurs courbes quadratiques de Bézier pour rendre une bulle de dialogue.
 
-<pre class="brush: html hidden">&lt;html&gt;
- &lt;body onload="dessiner();"&gt;
-   &lt;canvas id="canevas" width="150" height="150"&gt;&lt;/canvas&gt;
- &lt;/body&gt;
-&lt;/html&gt;
-</pre>
+```html hidden
+<html>
+ <body onload="dessiner();">
+   <canvas id="canevas" width="150" height="150"></canvas>
+ </body>
+</html>
+```
 
-<pre class="brush: js">function dessiner() {
+```js
+function dessiner() {
   var canevas = document.getElementById('canevas');
   if (canevas.getContext) {
     var ctx = canevas.getContext('2d');
@@ -352,22 +341,24 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques
     ctx.stroke();
   }
 }
-</pre>
+```
 
-<p>{{EmbedLiveSample("Courbes_de_Bézier_quadratiques", 160, 160, "canvas_quadratic.png")}}</p>
+{{EmbedLiveSample("Courbes_de_Bézier_quadratiques", 160, 160, "canvas_quadratic.png")}}
 
-<h4 id="Les_courbes_de_Bézier_cubiques">Les courbes de Bézier cubiques</h4>
+#### Les courbes de Bézier cubiques
 
-<p>Cet exemple dessine un cœur en utilisant les courbes de Bézier cubiques.</p>
+Cet exemple dessine un cœur en utilisant les courbes de Bézier cubiques.
 
-<pre class="brush: html hidden">&lt;html&gt;
- &lt;body onload="dessiner();"&gt;
-   &lt;canvas id="canevas" width="150" height="150"&gt;&lt;/canvas&gt;
- &lt;/body&gt;
-&lt;/html&gt;
-</pre>
+```html hidden
+<html>
+ <body onload="dessiner();">
+   <canvas id="canevas" width="150" height="150"></canvas>
+ </body>
+</html>
+```
 
-<pre class="brush: js">function dessiner() {
+```js
+function dessiner() {
   var canevas = document.getElementById('canevas');
   if (canevas.getContext) {
     var ctx = canevas.getContext('2d');
@@ -384,33 +375,33 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques
     ctx.fill();
   }
 }
-</pre>
+```
 
-<p>{{EmbedLiveSample("Les_courbes_de_Bézier_cubiques", 160, 160, "canvas_bezier.png")}}</p>
+{{EmbedLiveSample("Les_courbes_de_Bézier_cubiques", 160, 160, "canvas_bezier.png")}}
 
-<h3 id="Rectangles">Rectangles</h3>
+### Rectangles
 
-<p>En plus des trois méthodes que nous avons vues dans {{anch("Dessin de rectangles")}}, qui dessinent des formes rectangulaires directement sur le canevas, il y a la méthode <code>rect()</code>, qui ajoute un trajet rectangulaire à un trajet actuellement ouvert.</p>
+En plus des trois méthodes que nous avons vues dans {{anch("Dessin de rectangles")}}, qui dessinent des formes rectangulaires directement sur le canevas, il y a la méthode `rect()`, qui ajoute un trajet rectangulaire à un trajet actuellement ouvert.
 
-<dl>
- <dt>{{domxref("CanvasRenderingContext2D.rect", "rect(x, y, largeur, hauteur)")}}</dt>
- <dd>Dessine un rectangle dont l'angle supérieur gauche est spécifié par (<code>x</code>, <code>y</code>), avec les <code>largeur</code> et <code>hauteur</code> spécifiées.</dd>
-</dl>
+- {{domxref("CanvasRenderingContext2D.rect", "rect(x, y, largeur, hauteur)")}}
+  - : Dessine un rectangle dont l'angle supérieur gauche est spécifié par (`x`, `y`), avec les `largeur` et `hauteur` spécifiées.
 
-<p>Quand cette méthode est exécutée, la méthode <code>moveTo()</code> est automatiquement appelée avec les paramètres (0,0). En d'autres termes, la position en cours du stylo est automatiquement réinitialisée aux coordonnées par défaut.</p>
+Quand cette méthode est exécutée, la méthode `moveTo()` est automatiquement appelée avec les paramètres (0,0). En d'autres termes, la position en cours du stylo est automatiquement réinitialisée aux coordonnées par défaut.
 
-<h3 id="Combiner_les_possibilités">Combiner les possibilités</h3>
+### Combiner les possibilités
 
-<p>Jusqu'à présent, chaque exemple de cette page a utilisé un seul type de fonction de trajet par forme. Cependant, il n'y a pas de limite au nombre ou aux types de trajets que vous pouvez utiliser pour créer une forme. Ainsi, dans ce dernier exemple, combinons toutes les fonctions de trajet pour faire un ensemble de personnages d'un jeu très célèbre.</p>
+Jusqu'à présent, chaque exemple de cette page a utilisé un seul type de fonction de trajet par forme. Cependant, il n'y a pas de limite au nombre ou aux types de trajets que vous pouvez utiliser pour créer une forme. Ainsi, dans ce dernier exemple, combinons toutes les fonctions de trajet pour faire un ensemble de personnages d'un jeu très célèbre.
 
-<pre class="brush: html hidden">&lt;html&gt;
- &lt;body onload="dessiner();"&gt;
-   &lt;canvas id="canevas" width="150" height="150"&gt;&lt;/canvas&gt;
- &lt;/body&gt;
-&lt;/html&gt;
-</pre>
+```html hidden
+<html>
+ <body onload="dessiner();">
+   <canvas id="canevas" width="150" height="150"></canvas>
+ </body>
+</html>
+```
 
-<pre class="brush: js">function dessiner() {
+```js
+function dessiner() {
   var canevas = document.getElementById('canevas');
   if (canevas.getContext) {
     var ctx = canevas.getContext('2d');
@@ -427,15 +418,15 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques
     ctx.lineTo(31, 37);
     ctx.fill();
 
-    for(var i = 0; i&lt; 8; i++) {
+    for(var i = 0; i< 8; i++) {
       ctx.fillRect(51 + i * 16, 35, 4, 4);
     }
 
-    for(i = 0; i &lt; 6; i++) {
+    for(i = 0; i < 6; i++) {
       ctx.fillRect(115, 51 + i * 16, 4, 4);
     }
 
-    for(i = 0; i &lt; 8; i++) {
+    for(i = 0; i < 8; i++) {
       ctx.fillRect(51 + i * 16, 99, 4, 4);
     }
 
@@ -493,52 +484,51 @@ function rectArrondi(ctx, x, y, largeur, hauteur, rayon) {
   ctx.quadraticCurveTo(x, y, x, y + rayon);
   ctx.stroke();
 }
+```
 
-</pre>
+L'image résultante ressemble à ce qui suit :
 
-<p>L'image résultante ressemble à ce qui suit :</p>
+{{EmbedLiveSample("Combiner_les_possibilités", 160, 160)}}
 
-<p>{{EmbedLiveSample("Combiner_les_possibilités", 160, 160)}}</p>
+Nous ne l'expliquerons pas plus en détails, du fait que c'est étonnament simple. Les choses les plus importantes à noter sont l'utilisation de la propriété `fillStyle` sur le contexte du dessin, et l'utilisation d'une fonction utilitaire dans ce cas, rectArrondi`())`. L'utilisation de fonctions utilitaires pour des éléments de dessin que vous faites souvent peut être très utile, et peut réduire la quantité de code dont vous avez besoin, ainsi que sa complexité.
 
-<p>Nous ne l'expliquerons pas plus en détails, du fait que c'est étonnament simple. Les choses les plus importantes à noter sont l'utilisation de la propriété <code>fillStyle</code> sur le contexte du dessin, et l'utilisation d'une fonction utilitaire dans ce cas, rectArrondi<code>())</code>. L'utilisation de fonctions utilitaires pour des éléments de dessin que vous faites souvent peut être très utile, et peut réduire la quantité de code dont vous avez besoin, ainsi que sa complexité.</p>
+Nous reviendrons sur `fillStyle` plus en détail plus loin dans ce tutoriel. Pour l'instant, tout ce que nous faisons est de l'utiliser pour changer en blanc la couleur pour les trajets depuis la couleur noire par défaut, et inversement ensuite.
 
-<p>Nous reviendrons sur <code>fillStyle</code> plus en détail plus loin dans ce tutoriel. Pour l'instant, tout ce que nous faisons est de l'utiliser pour changer en blanc la couleur pour les trajets depuis la couleur noire par défaut, et inversement ensuite.</p>
+## Objets Path2D
 
-<h2 id="Objets_Path2D">Objets Path2D</h2>
+Comme nous l'avons vu dans le dernier exemple, il peut y avoir une série de trajets et d'instructions de dessin pour dessiner des objets sur votre canevas. Pour simplifier le code et améliorer les performances, l'objet {{domxref("Path2D")}}, disponible dans les versions récentes des navigateurs, vous permet de mettre en cache ou d'enregistrer ces instrucions de dessin. Vous pourrez alors rejouer vos trajets rapidement.
+Voyons comment nous pouvons construire un objet `Path2D `:
 
-<p>Comme nous l'avons vu dans le dernier exemple, il peut y avoir une série de trajets et d'instructions de dessin pour dessiner des objets sur votre canevas. Pour simplifier le code et améliorer les performances, l'objet {{domxref("Path2D")}}, disponible dans les versions récentes des navigateurs, vous permet de mettre en cache ou d'enregistrer ces instrucions de dessin. Vous pourrez alors rejouer vos trajets rapidement.<br>
- Voyons comment nous pouvons construire un objet <code>Path2D </code>:</p>
+- {{domxref("Path2D.Path2D", "Path2D()")}}
+  - : Le constructor **`Path2D()`** retourne un objet `Path2D` nouvellement instancié, optionellement avec un autre trajet comme argument (crée une copie), ou optionellement avec une chaîne constituée de données de [trajet SVG](/fr-FR/docs/Web/SVG/Tutorial/Paths).
 
-<dl>
- <dt>{{domxref("Path2D.Path2D", "Path2D()")}}</dt>
- <dd>Le constructor <code><strong>Path2D()</strong></code> retourne un objet <code>Path2D</code> nouvellement instancié, optionellement avec un autre trajet comme argument (crée une copie), ou optionellement avec une chaîne constituée de données de <a href="/fr-FR/docs/Web/SVG/Tutorial/Paths">trajet SVG</a>.</dd>
-</dl>
+<!---->
 
-<pre class="notranslate"><code>new Path2D();     // objet trajet vide
-new Path2D(trajet); // copie depuis un autre objet Path2D
-new Path2D(d);    // trajet depuis des données de trajet SVG</code></pre>
+    new Path2D();     // objet trajet vide
+    new Path2D(trajet); // copie depuis un autre objet Path2D
+    new Path2D(d);    // trajet depuis des données de trajet SVG
 
-<p>Toutes les <a href="/en-US/docs/Web/API/CanvasRenderingContext2D#Paths">méthodes de trajet</a> telles que <code>moveTo</code>, <code>rect</code>, <code>arc</code> ou <code>quadraticCurveTo</code>, etc., que nous avons appris à connaître ci-dessus, sont disponibles sur les objets <code>Path2D</code>.</p>
+Toutes les [méthodes de trajet](/en-US/docs/Web/API/CanvasRenderingContext2D#Paths) telles que `moveTo`, `rect`, `arc` ou `quadraticCurveTo`, etc., que nous avons appris à connaître ci-dessus, sont disponibles sur les objets `Path2D`.
 
-<p>L'API <code>Path2D</code> ajoute aussi une manière de combiner des trajets en utilisant la méthode <code>addPath</code>. Cela peut être utile quand vous voulez contruire des objets à partir de plusieurs composants, par exemple.</p>
+L'API `Path2D` ajoute aussi une manière de combiner des trajets en utilisant la méthode `addPath`. Cela peut être utile quand vous voulez contruire des objets à partir de plusieurs composants, par exemple.
 
-<dl>
- <dt>{{domxref("Path2D.addPath", "Path2D.addPath(trajet [, transformation])")}}</dt>
- <dd>Ajoute un trajet, au trajet en cours, avec une matrice de transformation.</dd>
-</dl>
+- {{domxref("Path2D.addPath", "Path2D.addPath(trajet [, transformation])")}}
+  - : Ajoute un trajet, au trajet en cours, avec une matrice de transformation.
 
-<h3 id="Exemple_de_Path2D">Exemple de Path2D</h3>
+### Exemple de Path2D
 
-<p>Dans cet exemple, on crée un rectangle et un cercle. Tous deux sont stockés comme des objets <code>Path2D</code>, de sorte qu'ils sont disponibles pour un usage ultérieur. Avec la nouvelle API <code>Path2D</code>, plusieurs méthodes ont été mises à jour pour accepter optionnellement un objet <code>Path2D</code> à utiliser au lieu du trajet en cours. Ici, <code>stroke</code> et <code>fill</code> sont utilisés avec un argument de trajet pour dessiner les deux objets sur le canevas, par exemple.</p>
+Dans cet exemple, on crée un rectangle et un cercle. Tous deux sont stockés comme des objets `Path2D`, de sorte qu'ils sont disponibles pour un usage ultérieur. Avec la nouvelle API `Path2D`, plusieurs méthodes ont été mises à jour pour accepter optionnellement un objet `Path2D` à utiliser au lieu du trajet en cours. Ici, `stroke` et `fill` sont utilisés avec un argument de trajet pour dessiner les deux objets sur le canevas, par exemple.
 
-<pre class="brush: html hidden">&lt;html&gt;
- &lt;body onload="dessiner();"&gt;
-   &lt;canvas id="canvas" width="130" height="100"&gt;&lt;/canvas&gt;
- &lt;/body&gt;
-&lt;/html&gt;
-</pre>
+```html hidden
+<html>
+ <body onload="dessiner();">
+   <canvas id="canvas" width="130" height="100"></canvas>
+ </body>
+</html>
+```
 
-<pre class="brush: js">function dessiner() {
+```js
+function dessiner() {
   var canevas = document.getElementById('canvas');
   if (canevas.getContext){
     var ctx = canevas.getContext('2d');
@@ -553,16 +543,17 @@ new Path2D(d);    // trajet depuis des données de trajet SVG</code></pre>
     ctx.stroke(rectangle);
     ctx.fill(cercle);
   }
-}</pre>
+}
+```
 
-<p>{{EmbedLiveSample("Exemple_de_Path2D", 130, 110, "path2d.png")}}</p>
+{{EmbedLiveSample("Exemple_de_Path2D", 130, 110, "path2d.png")}}
 
-<h3 id="Utilisation_de_trajets_SVG">Utilisation de trajets SVG</h3>
+### Utilisation de trajets SVG
 
-<p>Une autre fonctionnalité puissante de la nouvelle API <code>Path2D</code> de canevas est l'utilisation de <a href="/fr-FR/docs/Web/SVG/Tutorial/Paths">données de trajet SVG</a> pour initialiser des trajets sur votre canevas. Cela peut vous permettre de faire circuler des données de trajet et les réutiliser, à la fois en SVG et dans un canevas.</p>
+Une autre fonctionnalité puissante de la nouvelle API `Path2D` de canevas est l'utilisation de [données de trajet SVG](/fr-FR/docs/Web/SVG/Tutorial/Paths) pour initialiser des trajets sur votre canevas. Cela peut vous permettre de faire circuler des données de trajet et les réutiliser, à la fois en SVG et dans un canevas.
 
-<p>Le trajet se déplacera au point (<code>M10 10</code>) et se déplacera alors de 80 points horizontalement vers la droite (<code>h 80</code>), ensuite de 80 points vers le bas (<code>v 80</code>), puis de 80 points vers la gauche (<code>h -80</code>), et reviendra alors au départ (<code>z</code>). Vous pouvez voir cet exemple sur la page du <a href="/en-US/docs/Web/API/Path2D.Path2D#Using_SVG_paths">constructeur P<code>ath2D</code></a>.</p>
+Le trajet se déplacera au point (`M10 10`) et se déplacera alors de 80 points horizontalement vers la droite (`h 80`), ensuite de 80 points vers le bas (`v 80`), puis de 80 points vers la gauche (`h -80`), et reviendra alors au départ (`z`). Vous pouvez voir cet exemple sur la page du [constructeur P`ath2D`](/en-US/docs/Web/API/Path2D.Path2D#Using_SVG_paths).
 
-<pre class="notranslate"><code>var p = new Path2D("M10 10 h 80 v 80 h -80 Z");</code></pre>
+    var p = new Path2D("M10 10 h 80 v 80 h -80 Z");
 
-<p>{{PreviousNext("Tutoriel_canvas/Utilisation_de_base", "Tutoriel_canvas/Ajout_de_styles_et_de_couleurs")}}</p>
+{{PreviousNext("Tutoriel_canvas/Utilisation_de_base", "Tutoriel_canvas/Ajout_de_styles_et_de_couleurs")}}
diff --git a/files/fr/web/api/canvas_api/tutorial/drawing_text/index.md b/files/fr/web/api/canvas_api/tutorial/drawing_text/index.md
index 4a1dfdcfa8..8cb24960db 100644
--- a/files/fr/web/api/canvas_api/tutorial/drawing_text/index.md
+++ b/files/fr/web/api/canvas_api/tutorial/drawing_text/index.md
@@ -9,73 +9,81 @@ tags:
 translation_of: Web/API/Canvas_API/Tutorial/Drawing_text
 original_slug: Web/API/Canvas_API/Tutoriel_canvas/Dessin_de_texte_avec_canvas
 ---
-<p>{{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas/Ajout_de_styles_et_de_couleurs", "Tutoriel_canvas/Utilisation_d'images")}}</p>
+{{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas/Ajout_de_styles_et_de_couleurs", "Tutoriel_canvas/Utilisation_d'images")}}
 
-<p>Après avoir vu comment <a href="/fr/docs/Tutoriel_canvas/Ajout_de_styles_et_de_couleurs">appliquer les styles et les couleurs</a> dans le chapitre précédent, nous allons maintenant voir comment dessiner du texte sur canvas.</p>
+Après avoir vu comment [appliquer les styles et les couleurs](/fr/docs/Tutoriel_canvas/Ajout_de_styles_et_de_couleurs) dans le chapitre précédent, nous allons maintenant voir comment dessiner du texte sur canvas.
 
-<h2 id="Dessin_de_texte">Dessin de texte</h2>
+## Dessin de texte
 
-<p>  Le contexte de rendu du canevas fournit deux méthodes pour le rendu du texte :</p>
+Le contexte de rendu du canevas fournit deux méthodes pour le rendu du texte :
 
-<dl>
- <dt>{{domxref("CanvasRenderingContext2D.fillText", "fillText(text, x, y [, maxWidth])")}}</dt>
- <dd>Remplit un texte donné à la position (x, y). Facultatif, avec une largeur maximale à dessiner.</dd>
- <dt>{{domxref("CanvasRenderingContext2D.strokeText", "strokeText(text, x, y [, maxWidth])")}}</dt>
- <dd>Trait d'un texte donné à la position (x, y). Facultatif, avec une largeur maximale à dessiner.</dd>
-</dl>
+- {{domxref("CanvasRenderingContext2D.fillText", "fillText(text, x, y [, maxWidth])")}}
+  - : Remplit un texte donné à la position (x, y). Facultatif, avec une largeur maximale à dessiner.
+- {{domxref("CanvasRenderingContext2D.strokeText", "strokeText(text, x, y [, maxWidth])")}}
+  - : Trait d'un texte donné à la position (x, y). Facultatif, avec une largeur maximale à dessiner.
 
-<h3 id="A_fillText_example">Un exemple fillText</h3>
+### Un exemple fillText
 
-<p>Le texte est rempli en utilisant le <code>fillStyle</code> actuel.</p>
+Le texte est rempli en utilisant le `fillStyle` actuel.
 
-<pre class="brush: js">function draw() {
+```js
+function draw() {
   var ctx = document.getElementById('canvas').getContext('2d');
   ctx.font = '48px serif';
   ctx.fillText('Hello world', 10, 50);
-}</pre>
+}
+```
 
-<pre class="brush: html hidden">&lt;canvas id="canvas" width="300" height="100"&gt;&lt;/canvas&gt;</pre>
+```html hidden
+<canvas id="canvas" width="300" height="100"></canvas>
+```
 
-<pre class="brush: js hidden">draw();</pre>
+```js hidden
+draw();
+```
 
-<p>{{EmbedLiveSample("A_fillText_example", 310, 110)}}</p>
+{{EmbedLiveSample("A_fillText_example", 310, 110)}}
 
-<h3 id="A_strokeText_example">Un exemple de strokeText</h3>
+### Un exemple de strokeText
 
-<p>Le texte est rempli en utilisant le  <code>strokeStyle</code> courant.</p>
+Le texte est rempli en utilisant le `strokeStyle` courant.
 
-<pre class="brush: js">function draw() {
+```js
+function draw() {
   var ctx = document.getElementById('canvas').getContext('2d');
   ctx.font = '48px serif';
   ctx.strokeText('Hello world', 10, 50);
-}</pre>
+}
+```
 
-<pre class="brush: html hidden">&lt;canvas id="canvas" width="300" height="100"&gt;&lt;/canvas&gt;</pre>
+```html hidden
+<canvas id="canvas" width="300" height="100"></canvas>
+```
 
-<pre class="brush: js hidden">draw();</pre>
+```js hidden
+draw();
+```
 
-<p>{{EmbedLiveSample("A_strokeText_example", 310, 110)}}</p>
+{{EmbedLiveSample("A_strokeText_example", 310, 110)}}
 
-<h2 id="M.C3.A9thodes">Style de texte</h2>
+## Style de texte
 
-<p>Dans les exemples ci-dessus, nous utilisons déjà la propriété de police pour rendre le texte un peu plus grand que la taille par défaut. Il existe d'autres propriétés qui vous permettent d'ajuster la façon dont le texte est affiché sur le canevas :</p>
+Dans les exemples ci-dessus, nous utilisons déjà la propriété de police pour rendre le texte un peu plus grand que la taille par défaut. Il existe d'autres propriétés qui vous permettent d'ajuster la façon dont le texte est affiché sur le canevas :
 
-<dl>
- <dt>{{domxref("CanvasRenderingContext2D.font", "font = value")}}</dt>
- <dd>Le style de texte actuel utilisé lors du dessin du texte. Cette chaîne utilise la même syntaxe que la propriété CSS {{cssxref ("font")}}. La police par défaut est 10px sans-serif.</dd>
- <dt>{{domxref("CanvasRenderingContext2D.textAlign", "textAlign = value")}}</dt>
- <dd>Paramètre d'alignement du texte. Valeurs possibles :  <code>start</code> <em>(</em><em>début)</em>,  <code>end</code> <em>(</em><em>fin)</em>,  <code>left</code> <em>(</em><em>gauche)</em>,  <code>right</code> <em>(</em><em>droite)</em> ou  <code>center</code> <em>(</em><em>centre)</em>. La valeur par défaut est <code>start</code>.</dd>
- <dt>{{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline = value")}}</dt>
- <dd>Paramètre d'alignement de base. Valeurs possibles :  <code>top</code> <em>(</em><em>haut)</em>,  <code>hanging</code> <em>(</em><em>suspendu)</em>,  <code>middle</code> <em>(</em><em>moyen)</em>,  <code>alphabetic</code> <em>(</em><em>alphabétique)</em>,  <code>ideographic</code> <em>(</em><em>idéographique)</em>,  <code>bottom</code> <em>(</em><em>en bas)</em>. La valeur par défaut est <code>alphabetic</code>.</dd>
- <dt>{{domxref("CanvasRenderingContext2D.direction", "direction = value")}}</dt>
- <dd>Directionnalité. Valeurs possibles:  <code>ltr</code> <em>(de gauche à droite)</em>,  <code>rtl</code> <em>(de droite à gauche)</em>, <code>inherit</code> <em>(hérité)</em>. La valeur par défaut est <code>inherit</code>.</dd>
-</dl>
+- {{domxref("CanvasRenderingContext2D.font", "font = value")}}
+  - : Le style de texte actuel utilisé lors du dessin du texte. Cette chaîne utilise la même syntaxe que la propriété CSS {{cssxref ("font")}}. La police par défaut est 10px sans-serif.
+- {{domxref("CanvasRenderingContext2D.textAlign", "textAlign = value")}}
+  - : Paramètre d'alignement du texte. Valeurs possibles : `start` _(\*\*début)_, `end` _(\*\*fin)_, `left` _(\*\*gauche)_, `right` _(\*\*droite)_ ou `center` _(\*\*centre)_. La valeur par défaut est `start`.
+- {{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline = value")}}
+  - : Paramètre d'alignement de base. Valeurs possibles : `top` _(\*\*haut)_, `hanging` _(\*\*suspendu)_, `middle` _(\*\*moyen)_, `alphabetic` _(\*\*alphabétique)_, `ideographic` _(\*\*idéographique)_, `bottom` _(\*\*en bas)_. La valeur par défaut est `alphabetic`.
+- {{domxref("CanvasRenderingContext2D.direction", "direction = value")}}
+  - : Directionnalité. Valeurs possibles: `ltr` _(de gauche à droite)_, `rtl` _(de droite à gauche)_, `inherit` _(hérité)_. La valeur par défaut est `inherit`.
 
-<p>Ces propriétés peuvent vous être familières si vous avez déjà travaillé avec CSS.</p>
+Ces propriétés peuvent vous être familières si vous avez déjà travaillé avec CSS.
 
-<p>Le diagramme suivant du  <a href="http://www.whatwg.org/">WHATWG</a>  illustre les différentes lignes de base prises en charge par la propriété <code>textBaseline.</code></p>
+Le diagramme suivant du [WHATWG](http://www.whatwg.org/) illustre les différentes lignes de base prises en charge par la propriété `textBaseline.`
 
-<p><img alt="The top of the em square is
+![The top of the em square is
 roughly at the top of the glyphs in a font, the hanging baseline is
 where some glyphs like आ are anchored, the middle is half-way
 between the top of the em square and the bottom of the em square,
@@ -84,29 +92,34 @@ f, and Ω are anchored, the ideographic baseline is
 where glyphs like 私 and 達 are anchored, and the bottom
 of the em square is roughly at the bottom of the glyphs in a
 font. The top and bottom of the bounding box can be far from these
-baselines, due to glyphs extending far outside the em square." src="http://www.whatwg.org/specs/web-apps/current-work/images/baselines.png"></p>
+baselines, due to glyphs extending far outside the em square.](http://www.whatwg.org/specs/web-apps/current-work/images/baselines.png)
 
-<h3 id="Un_exemple_de_textBaseline">Un exemple de textBaseline</h3>
+### Un exemple de textBaseline
 
-<p>Modifiez le code ci-dessous et visualisez vos mises à jour en direct dans le canevas :</p>
+Modifiez le code ci-dessous et visualisez vos mises à jour en direct dans le canevas :
 
-<pre class="brush: js">ctx.font = '48px serif';
+```js
+ctx.font = '48px serif';
 ctx.textBaseline = 'hanging';
-ctx.strokeText('Hello world', 0, 100);</pre>
-
-<h4 id="Playable_code">Playable code</h4>
-
-<pre class="brush: html hidden">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
-&lt;div class="playable-buttons"&gt;
-  &lt;input id="edit" type="button" value="Edit" /&gt;
-  &lt;input id="reset" type="button" value="Reset" /&gt;
-&lt;/div&gt;
-&lt;textarea id="code" class="playable-code"&gt;
+ctx.strokeText('Hello world', 0, 100);
+```
+
+#### Playable code
+
+```html hidden
+<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code">
 ctx.font = "48px serif";
 ctx.textBaseline = "hanging";
-ctx.strokeText("Hello world", 0, 100);&lt;/textarea&gt;</pre>
+ctx.strokeText("Hello world", 0, 100);</textarea>
+```
 
-<pre class="brush: js hidden">var canvas = document.getElementById('canvas');
+```js hidden
+var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
 var textarea = document.getElementById('code');
 var reset = document.getElementById('reset');
@@ -128,29 +141,30 @@ edit.addEventListener('click', function() {
 })
 
 textarea.addEventListener('input', drawCanvas);
-window.addEventListener('load', drawCanvas);</pre>
+window.addEventListener('load', drawCanvas);
+```
 
-<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+{{ EmbedLiveSample('Playable_code', 700, 360) }}
 
-<h2 id="Mesures_de_texte_avancées">Mesures de texte avancées</h2>
+## Mesures de texte avancées
 
-<p>Dans le cas où vous avez besoin d'obtenir plus de détails sur le texte, la méthode suivante vous permet de le mesurer.</p>
+Dans le cas où vous avez besoin d'obtenir plus de détails sur le texte, la méthode suivante vous permet de le mesurer.
 
-<dl>
- <dt>{{domxref("CanvasRenderingContext2D.measureText", "measureText()")}}</dt>
- <dd>Retourne un objet  {{domxref("TextMetrics")}}  contenant la largeur en pixels, sur la base duquel le texte spécifié sera dessiné dans le style de texte actuel.</dd>
-</dl>
+- {{domxref("CanvasRenderingContext2D.measureText", "measureText()")}}
+  - : Retourne un objet {{domxref("TextMetrics")}} contenant la largeur en pixels, sur la base duquel le texte spécifié sera dessiné dans le style de texte actuel.
 
-<p>L'extrait de code suivant montre comment vous pouvez mesurer un texte et obtenir sa largeur.</p>
+L'extrait de code suivant montre comment vous pouvez mesurer un texte et obtenir sa largeur.
 
-<pre class="brush: js">function draw() {
+```js
+function draw() {
   var ctx = document.getElementById('canvas').getContext('2d');
   var text = ctx.measureText('foo'); // objet TextMetrics
   text.width; // 16;
-}</pre>
+}
+```
 
-<h2 id="Notes_spécifiques_à_Gecko">Notes spécifiques à Gecko</h2>
+## Notes spécifiques à Gecko
 
-<p>Dans Gecko (le moteur de rendu de Firefox, Firefox OS et d'autres applications basées sur Mozilla), certaines API préfixées ont été implémentées dans des versions antérieures pour dessiner du texte sur un canevas. Ceux-ci sont maintenant déconseillés et supprimés, et leur fonctionnement n'est pas garanti.</p>
+Dans Gecko (le moteur de rendu de Firefox, Firefox OS et d'autres applications basées sur Mozilla), certaines API préfixées ont été implémentées dans des versions antérieures pour dessiner du texte sur un canevas. Ceux-ci sont maintenant déconseillés et supprimés, et leur fonctionnement n'est pas garanti.
 
-<p>{{PreviousNext("Tutoriel_canvas/Ajout_de_styles_et_de_couleurs", "Tutoriel_canvas/Utilisation_d'images")}}</p>
+{{PreviousNext("Tutoriel_canvas/Ajout_de_styles_et_de_couleurs", "Tutoriel_canvas/Utilisation_d'images")}}
diff --git a/files/fr/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.md b/files/fr/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.md
index 4370d57dec..f6f3ba108f 100644
--- a/files/fr/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.md
+++ b/files/fr/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.md
@@ -4,51 +4,53 @@ slug: Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility
 translation_of: Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility
 original_slug: Web/API/Canvas_API/Tutoriel_canvas/Hit_regions_and_accessibility
 ---
-<div>{{CanvasSidebar}} {{ PreviousNext("Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas", "Web/API/Canvas_API/Tutorial/Optimizing_canvas") }}</div>
+{{CanvasSidebar}} {{ PreviousNext("Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas", "Web/API/Canvas_API/Tutorial/Optimizing_canvas") }}
 
-<p>L'élément {{HTMLElement("canvas")}} lui-même est juste un bitmap et ne fourni aucune information sur les objets dessinés. Le contenu des canvas n'est pas sujet aux outils d'accessibility comme l'est la sémantique HTML. En général vous devriez éviter d'utiliser les canvas sur les sites ou les applications accessibles. Le marche à suivre suivante peut vous aider à les rendre plus accessibles.</p>
+L'élément {{HTMLElement("canvas")}} lui-même est juste un bitmap et ne fourni aucune information sur les objets dessinés. Le contenu des canvas n'est pas sujet aux outils d'accessibility comme l'est la sémantique HTML. En général vous devriez éviter d'utiliser les canvas sur les sites ou les applications accessibles. Le marche à suivre suivante peut vous aider à les rendre plus accessibles.
 
-<h2 id="Moyen_de_repli">Moyen de repli</h2>
+## Moyen de repli
 
-<p>Le contenu à l'intérieur d'un tag <code>&lt;canvas&gt; ... &lt;/canvas&gt;</code> peut être utilisé comme moyen de secours pour les navigteurs qui ne supportent pas le rendu de canvas. C'est aussi très utile pour les utilisateurs qui utilisent des technologies adaptées (comme les lecteurs d'écran) qui peuvent lire et interpréter les éléments du DOM. Un bon exemple sur <a href="http://www.html5accessibility.com/tests/canvas.html">html5accessibility.com</a> demontre comment cela peut être fait.</p>
+Le contenu à l'intérieur d'un tag `<canvas> ... </canvas>` peut être utilisé comme moyen de secours pour les navigteurs qui ne supportent pas le rendu de canvas. C'est aussi très utile pour les utilisateurs qui utilisent des technologies adaptées (comme les lecteurs d'écran) qui peuvent lire et interpréter les éléments du DOM. Un bon exemple sur [html5accessibility.com](http://www.html5accessibility.com/tests/canvas.html) demontre comment cela peut être fait.
 
-<pre class="brush: html">&lt;canvas&gt;
-  &lt;h2&gt;Shapes&lt;/h2&gt;
-  &lt;p&gt;A rectangle with a black border.
+```html
+<canvas>
+  <h2>Shapes</h2>
+  <p>A rectangle with a black border.
    In the background is a pink circle.
-   Partially overlaying the &lt;a href="http://en.wikipedia.org/wiki/Circle" onfocus="drawCircle();" onblur="drawPicture();"&gt;circle&lt;/a&gt;.
+   Partially overlaying the <a href="http://en.wikipedia.org/wiki/Circle" onfocus="drawCircle();" onblur="drawPicture();">circle</a>.
    Partially overlaying the circle is a green
-   &lt;a href="http://en.wikipedia.org/wiki/Square" onfocus="drawSquare();" onblur="drawPicture();"&gt;square&lt;/a&gt;
-   and a purple &lt;a href="http://en.wikipedia.org/wiki/Triangle" onfocus="drawTriangle();" onblur="drawPicture();"&gt;triangle&lt;/a&gt;,
-   both of which are semi-opaque, so the full circle can be seen underneath.&lt;/p&gt;
-&lt;/canvas&gt; </pre>
+   <a href="http://en.wikipedia.org/wiki/Square" onfocus="drawSquare();" onblur="drawPicture();">square</a>
+   and a purple <a href="http://en.wikipedia.org/wiki/Triangle" onfocus="drawTriangle();" onblur="drawPicture();">triangle</a>,
+   both of which are semi-opaque, so the full circle can be seen underneath.</p>
+</canvas>
+```
 
-<p>Jetez un oeil à la <a href="https://www.youtube.com/watch?v=ABeIFlqYiMQ">video comment NVDA lit cet exemple par Steve Faulkner</a> (en anglais).</p>
+Jetez un oeil à la [video comment NVDA lit cet exemple par Steve Faulkner](https://www.youtube.com/watch?v=ABeIFlqYiMQ) (en anglais).
 
-<h2 id="Les_règles_ARIA">Les règles ARIA</h2>
+## Les règles ARIA
 
-<p>Accessible Rich Internet Applications <strong>(<a href="/en-US/docs/Web/Accessibility/ARIA">ARIA</a>)</strong> (≈ <a href="https://fr.wikipedia.org/wiki/Accessible_Rich_Internet_Applications">Les applications Internet Accessibles Riches)</a> défini des pistes pour rendre le contenu Web et les applications Web plus accessibles pour les personnes ayant un handicap. Vous pouvez utiliser les attributs ARIA pour decrire le comportement et le but de vos éléments canvas. Allez voir <a href="/en-US/docs/Web/Accessibility/ARIA">ARIA</a> et <a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques">les techniques ARIA</a> pour plus d'informations.</p>
+Accessible Rich Internet Applications **([ARIA](/en-US/docs/Web/Accessibility/ARIA))** (≈ [Les applications Internet Accessibles Riches)](https://fr.wikipedia.org/wiki/Accessible_Rich_Internet_Applications) défini des pistes pour rendre le contenu Web et les applications Web plus accessibles pour les personnes ayant un handicap. Vous pouvez utiliser les attributs ARIA pour decrire le comportement et le but de vos éléments canvas. Allez voir [ARIA](/en-US/docs/Web/Accessibility/ARIA) et [les techniques ARIA](/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques) pour plus d'informations.
 
-<pre class="brush: html">&lt;canvas id="button" tabindex="0" role="button" aria-pressed="false" aria-label="Start game"&gt;&lt;/canvas&gt;
-</pre>
+```html
+<canvas id="button" tabindex="0" role="button" aria-pressed="false" aria-label="Start game"></canvas>
+```
 
-<h2 id="Zones_cibles_hit_Region">Zones cibles (hit Region)</h2>
+## Zones cibles (hit Region)
 
-<p>Que les coordonnés de la souris soient dans une zone particulière des canvas, est un problème fréquent à résoudre. L'API de la "hit region" vous permet de definir une zone de votre canvas et offre une autre possibilité pour proposer du contenu interactif dans les canvas a destination des outils d'accessibilité. Il permet de rendre la "hit detection" plus simple easier and vous laisser envoyer des événements aux éléments du DOM. L'API a les trois methodes suivantes (qui sont encore expérimentales dans les navigateurs actuel ; reportez-vous au tableau des comptibilités des navigateurs).</p>
+Que les coordonnés de la souris soient dans une zone particulière des canvas, est un problème fréquent à résoudre. L'API de la "hit region" vous permet de definir une zone de votre canvas et offre une autre possibilité pour proposer du contenu interactif dans les canvas a destination des outils d'accessibilité. Il permet de rendre la "hit detection" plus simple easier and vous laisser envoyer des événements aux éléments du DOM. L'API a les trois methodes suivantes (qui sont encore expérimentales dans les navigateurs actuel ; reportez-vous au tableau des comptibilités des navigateurs).
 
-<dl>
- <dt>{{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}}</dt>
- <dd>Ajoute une "hit region" au canvas..</dd>
- <dt>{{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}}</dt>
- <dd>Supprime la "hit region" avec l'<code>id</code> spécifiée venant du canvas.</dd>
- <dt>{{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}}</dt>
- <dd>Retire toutes les "hit regions" du cnavas.</dd>
-</dl>
+- {{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}}
+  - : Ajoute une "hit region" au canvas..
+- {{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}}
+  - : Supprime la "hit region" avec l'`id` spécifiée venant du canvas.
+- {{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}}
+  - : Retire toutes les "hit regions" du cnavas.
 
-<p>Vous pouvez ajouter une "hit region" à votre chemin et vérifier la propriété {{domxref("MouseEvent.region")}} pour tester si votre souris entre dans votre région, par exemple.</p>
+Vous pouvez ajouter une "hit region" à votre chemin et vérifier la propriété {{domxref("MouseEvent.region")}} pour tester si votre souris entre dans votre région, par exemple.
 
-<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
-&lt;script&gt;
+```html
+<canvas id="canvas"></canvas>
+<script>
 var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
 
@@ -62,37 +64,34 @@ canvas.addEventListener('mousemove', function(event) {
     alert('hit region: ' + event.region);
   }
 });
-&lt;/script&gt;</pre>
+</script>
+```
 
-<p>La méthode <code>addHitRegion()</code> accepte aussi une option de <code>control</code> pour envoyer des événement vers un élément (c'est un enfant des canvas):</p>
+La méthode `addHitRegion()` accepte aussi une option de `control` pour envoyer des événement vers un élément (c'est un enfant des canvas):
 
-<pre class="brush: js">ctx.addHitRegion({control: element});</pre>
+```js
+ctx.addHitRegion({control: element});
+```
 
-<p>Cela peut être utile pour le routage d'éléments {{HTMLElement("input")}}, par exemple. Regardez aussi <a href="http://codepen.io/adobe/pen/BhcmK">codepen demo</a>.</p>
+Cela peut être utile pour le routage d'éléments {{HTMLElement("input")}}, par exemple. Regardez aussi [codepen demo](http://codepen.io/adobe/pen/BhcmK).
 
-<h2 id="Focus_rings">Focus rings</h2>
+## Focus rings
 
-<p>Quand on travaille avec le clavier, focus rings (anneaux de mise au point) sont utilies pour aider dans la navigation sur une page. Pour dessiner des "focus ring" dans un dessin de canvas, la propriété <code>drawFocusIfNeeded</code> peut être utilisée.</p>
+Quand on travaille avec le clavier, focus rings (anneaux de mise au point) sont utilies pour aider dans la navigation sur une page. Pour dessiner des "focus ring" dans un dessin de canvas, la propriété `drawFocusIfNeeded` peut être utilisée.
 
-<dl>
- <dt>{{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}} {{experimental_inline}}</dt>
- <dd>Si un élément donné est ciblé, cette méthode dessine un anneaud de mise ne valeur autoure du chemin courant.</dd>
-</dl>
+- {{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}} {{experimental_inline}}
+  - : Si un élément donné est ciblé, cette méthode dessine un anneaud de mise ne valeur autoure du chemin courant.
 
-<p>De plus, la méthode <code>scrollPathIntoView()</code> peut être utilisée pour rendre visible un élément dans une page s'il est ciblé, par exemple.</p>
+De plus, la méthode `scrollPathIntoView()` peut être utilisée pour rendre visible un élément dans une page s'il est ciblé, par exemple.
 
-<dl>
- <dt>{{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}} {{experimental_inline}}</dt>
- <dd>Affiche le chemin courant ou le chemin donné.</dd>
-</dl>
+- {{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}} {{experimental_inline}}
+  - : Affiche le chemin courant ou le chemin donné.
 
-<h2 id="See_also">See also</h2>
+## See also
 
-<ul>
- <li><a href="https://www.w3.org/WAI/PF/HTML/wiki/Canvas_Accessibility_Use_Cases">Canvas accessibility use cases</a></li>
- <li><a href="https://www.w3.org/html/wg/wiki/AddedElementCanvas">Canvas element accessibility issues</a></li>
- <li><a href="http://www.paciellogroup.com/blog/2012/06/html5-canvas-accessibility-in-firefox-13/">HTML5 Canvas Accessibility in Firefox 13 – by Steve Faulkner</a></li>
- <li><a href="https://html.spec.whatwg.org/multipage/scripting.html#best-practices">Best practices for interactive canvas elements</a></li>
-</ul>
+- [Canvas accessibility use cases](https://www.w3.org/WAI/PF/HTML/wiki/Canvas_Accessibility_Use_Cases)
+- [Canvas element accessibility issues](https://www.w3.org/html/wg/wiki/AddedElementCanvas)
+- [HTML5 Canvas Accessibility in Firefox 13 – by Steve Faulkner](http://www.paciellogroup.com/blog/2012/06/html5-canvas-accessibility-in-firefox-13/)
+- [Best practices for interactive canvas elements](https://html.spec.whatwg.org/multipage/scripting.html#best-practices)
 
-<div>{{ PreviousNext("Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas", "Web/API/Canvas_API/Tutorial/Optimizing_canvas") }}</div>
+{{ PreviousNext("Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas", "Web/API/Canvas_API/Tutorial/Optimizing_canvas") }}
diff --git a/files/fr/web/api/canvas_api/tutorial/index.md b/files/fr/web/api/canvas_api/tutorial/index.md
index d10b22ec7a..1954bdc3df 100644
--- a/files/fr/web/api/canvas_api/tutorial/index.md
+++ b/files/fr/web/api/canvas_api/tutorial/index.md
@@ -10,42 +10,38 @@ tags:
 translation_of: Web/API/Canvas_API/Tutorial
 original_slug: Web/API/Canvas_API/Tutoriel_canvas
 ---
-<div>{{CanvasSidebar}}</div>
+{{CanvasSidebar}}
 
-<p><strong><a href="/fr/docs/Web/HTML/Element/canvas"><code>&lt;canvas&gt;</code></a></strong> est un nouvel élément <a href="/fr/docs/Web/HTML">HTML</a> qui peut être utilisé pour dessiner des éléments graphiques à l'aide de scripts (habituellement <a href="/fr/docs/Glossaire/JavaScript">JavaScript</a>). Il permet par exemple de dessiner des graphiques, de réaliser des compositions de photographies ou des animations simples (voire <a href="/fr/docs/Un_raycaster_basique_avec_canvas">pas si simples</a>). Les images à droite montrent quelques exemples d'implémentations utilisant <code>&lt;canvas&gt;</code> que nous verrons plus tard dans ce tutoriel.</p>
+**[`<canvas>`](/fr/docs/Web/HTML/Element/canvas)** est un nouvel élément [HTML](/fr/docs/Web/HTML) qui peut être utilisé pour dessiner des éléments graphiques à l'aide de scripts (habituellement [JavaScript](/fr/docs/Glossaire/JavaScript)). Il permet par exemple de dessiner des graphiques, de réaliser des compositions de photographies ou des animations simples (voire [pas si simples](/fr/docs/Un_raycaster_basique_avec_canvas)). Les images à droite montrent quelques exemples d'implémentations utilisant `<canvas>` que nous verrons plus tard dans ce tutoriel.
 
-<p>Ce tutoriel explique comment utiliser l'élément <code>&lt;canvas&gt;</code> pour dessiner des graphiques 2D, en commençant par les bases. Les exemples fournis devraient vous donner des idées claires sur ce que vous pouvez faire avec la toile et fournir des extraits de code qui peuvent vous aider à créer votre propre contenu.</p>
+Ce tutoriel explique comment utiliser l'élément `<canvas>` pour dessiner des graphiques 2D, en commençant par les bases. Les exemples fournis devraient vous donner des idées claires sur ce que vous pouvez faire avec la toile et fournir des extraits de code qui peuvent vous aider à créer votre propre contenu.
 
-<p>D'abord introduit dans WebKit par Apple pour le tableau de bord OS X, <code>&lt;canvas&gt;</code> a depuis été implémenté dans les navigateurs. Aujourd'hui, tous les principaux navigateurs le prennent en charge.</p>
+D'abord introduit dans WebKit par Apple pour le tableau de bord OS X, `<canvas>` a depuis été implémenté dans les navigateurs. Aujourd'hui, tous les principaux navigateurs le prennent en charge.
 
-<h2 id="Avant_de_commencer">Avant de commencer</h2>
+## Avant de commencer
 
-<p>L'utilisation de l'élément <code>&lt;canvas&gt;</code> n'a rien de très compliqué, mais nécessite tout de même une compréhension de base de <a href="/fr/docs/Web/HTML">HTML</a> et <a href="/fr/docs/Glossaire/JavaScript">JavaScript</a>. L'élément <code>&lt;canvas&gt;</code> n'est pas reconnu par tous les vieux navigateurs, mais il est supporté par les versions les plus récentes des principaux. La taille par défaut de  canvas  est 300 px × 150 px (largeur × hauteur). Mais les tailles personnalisées peuvent être définies à l'aide des propriétés <a href="/fr/docs/Web/HTML">HTML</a> <code>height</code> et <code>width</code>. Afin de dessiner des graphiques sur  canvas , nous utilisons un objet de contexte JavaScript, qui crée des graphiques à la volée.</p>
+L'utilisation de l'élément `<canvas>` n'a rien de très compliqué, mais nécessite tout de même une compréhension de base de [HTML](/fr/docs/Web/HTML) et [JavaScript](/fr/docs/Glossaire/JavaScript). L'élément `<canvas>` n'est pas reconnu par tous les vieux navigateurs, mais il est supporté par les versions les plus récentes des principaux. La taille par défaut de canvas est 300 px × 150 px (largeur × hauteur). Mais les tailles personnalisées peuvent être définies à l'aide des propriétés [HTML](/fr/docs/Web/HTML) `height` et `width`. Afin de dessiner des graphiques sur canvas , nous utilisons un objet de contexte JavaScript, qui crée des graphiques à la volée.
 
-<h2 id="Dans_ce_tutoriel">Dans ce tutoriel</h2>
+## Dans ce tutoriel
 
-<ul>
- <li><a href="/fr/docs/Tutoriel_canvas/Utilisation_de_base">Utilisation de base</a></li>
- <li><a href="/fr/docs/Tutoriel_canvas/Formes_g%C3%A9om%C3%A9triques">Dessin de formes géométriques</a></li>
- <li><a href="/fr/docs/Tutoriel_canvas/Ajout_de_styles_et_de_couleurs">Ajout de styles et de couleurs</a></li>
- <li><a href="/fr/docs/Dessin_de_texte_avec_canvas">Dessin de texte</a></li>
- <li><a href="/fr/docs/Tutoriel_canvas/Utilisation_d'images">Utilisation d'images</a></li>
- <li><a href="/fr/docs/Tutoriel_canvas/Transformations">Transformations</a></li>
- <li><a href="/fr/docs/Web/API/Canvas_API/Tutorial/Compositing">Compositions et découpage</a></li>
- <li><a href="/fr/docs/Tutoriel_canvas/Animations_basiques">Animations basiques</a></li>
- <li><a href="/fr/docs/Tutoriel_canvas/Advanced_animations">Animations avancées</a></li>
- <li><a href="/fr/docs/Tutoriel_canvas/Pixel_manipulation_with_canvas">Manipulation des pixels</a></li>
- <li><a href="/fr/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility">Régions touchées et accessibilité</a></li>
- <li><a href="/fr/docs/Tutoriel_canvas/Optimizing_canvas">Optimisation</a></li>
- <li><a href="/fr/docs/Web/API/Canvas_API/Tutorial/Finale">Final</a></li>
-</ul>
+- [Utilisation de base](/fr/docs/Tutoriel_canvas/Utilisation_de_base)
+- [Dessin de formes géométriques](/fr/docs/Tutoriel_canvas/Formes_g%C3%A9om%C3%A9triques)
+- [Ajout de styles et de couleurs](/fr/docs/Tutoriel_canvas/Ajout_de_styles_et_de_couleurs)
+- [Dessin de texte](/fr/docs/Dessin_de_texte_avec_canvas)
+- [Utilisation d'images](/fr/docs/Tutoriel_canvas/Utilisation_d'images)
+- [Transformations](/fr/docs/Tutoriel_canvas/Transformations)
+- [Compositions et découpage](/fr/docs/Web/API/Canvas_API/Tutorial/Compositing)
+- [Animations basiques](/fr/docs/Tutoriel_canvas/Animations_basiques)
+- [Animations avancées](/fr/docs/Tutoriel_canvas/Advanced_animations)
+- [Manipulation des pixels](/fr/docs/Tutoriel_canvas/Pixel_manipulation_with_canvas)
+- [Régions touchées et accessibilité](/fr/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility)
+- [Optimisation](/fr/docs/Tutoriel_canvas/Optimizing_canvas)
+- [Final](/fr/docs/Web/API/Canvas_API/Tutorial/Finale)
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/HTML/Canvas">Page du sujet canvas</a></li>
- <li><a href="http://www.html5canvastutorials.com/">HTML5CanvasTutorials</a> (en)</li>
- <li><a href="/Special:Tags?tag=Exemples_d'utilisation_de_canvas&amp;language=fr">Exemples d'utilisation de canvas</a> (en)</li>
-</ul>
+- [Page du sujet canvas](/fr/docs/Web/HTML/Canvas)
+- [HTML5CanvasTutorials](http://www.html5canvastutorials.com/) (en)
+- [Exemples d'utilisation de canvas](/Special:Tags?tag=Exemples_d'utilisation_de_canvas&language=fr) (en)
 
-<p>{{ Next("Tutoriel_canvas/Utilisation_de_base") }}</p>
+{{ Next("Tutoriel_canvas/Utilisation_de_base") }}
diff --git a/files/fr/web/api/canvas_api/tutorial/optimizing_canvas/index.md b/files/fr/web/api/canvas_api/tutorial/optimizing_canvas/index.md
index 700966e07c..7b3b723efb 100644
--- a/files/fr/web/api/canvas_api/tutorial/optimizing_canvas/index.md
+++ b/files/fr/web/api/canvas_api/tutorial/optimizing_canvas/index.md
@@ -4,52 +4,55 @@ slug: Web/API/Canvas_API/Tutorial/Optimizing_canvas
 translation_of: Web/API/Canvas_API/Tutorial/Optimizing_canvas
 original_slug: Web/API/Canvas_API/Tutoriel_canvas/Optimizing_canvas
 ---
-<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}</div>
+{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}
 
-<p>L'élément {{HTMLElement("canvas")}} est l'un des standards les plus utilisés pour le rendu graphique 2D sur le web. Il est surtout utilisé dans les jeux et les visualisations complexes. Cependant, les sites et applications web poussent les canvas à leurs limites, et les performances commencent à en pâtir. Cet article propose des suggestions pour optimiser votre utilisation de l'élément canvas, et pour être certain que votre site ou application web fonctionne bien.</p>
+L'élément {{HTMLElement("canvas")}} est l'un des standards les plus utilisés pour le rendu graphique 2D sur le web. Il est surtout utilisé dans les jeux et les visualisations complexes. Cependant, les sites et applications web poussent les canvas à leurs limites, et les performances commencent à en pâtir. Cet article propose des suggestions pour optimiser votre utilisation de l'élément canvas, et pour être certain que votre site ou application web fonctionne bien.
 
-<h2 id="Conseils_sur_les_performances">Conseils sur les performances</h2>
+## Conseils sur les performances
 
-<p>Ceci est une liste de conseils pour améliorer les performances</p>
+Ceci est une liste de conseils pour améliorer les performances
 
-<h3 id="Pré-rendre_les_primitifs_similaires_ou_répéter_les_objects_dans_un_canvas_hors-champ">Pré-rendre les primitifs similaires ou répéter les objects dans un canvas hors-champ</h3>
+### Pré-rendre les primitifs similaires ou répéter les objects dans un canvas hors-champ
 
-<p>Si vous avez besoin d'ajouter un dessin complexe identique à chaque image rendue, préférez l'utilisation d'un canvas hors-champ, le rendre une fois (ou à chaque fois qu'il change) sur ce canvas, puis dessinez-le sur le canvas principal à chaque image rendue.</p>
+Si vous avez besoin d'ajouter un dessin complexe identique à chaque image rendue, préférez l'utilisation d'un canvas hors-champ, le rendre une fois (ou à chaque fois qu'il change) sur ce canvas, puis dessinez-le sur le canvas principal à chaque image rendue.
 
-<pre class="brush: js">myEntity.offscreenCanvas = document.createElement("canvas");
+```js
+myEntity.offscreenCanvas = document.createElement("canvas");
 myEntity.offscreenCanvas.width = myEntity.width;
 myEntity.offscreenCanvas.height = myEntity.height;
 myEntity.offscreenContext = myEntity.offscreenCanvas.getContext("2d");
 
 myEntity.render(myEntity.offscreenContext);
-</pre>
+```
 
-<h3 id="Abandonnez_les_coordonnées_décimales_et_utilisez_des_entiers_à_la_place">Abandonnez les coordonnées décimales et utilisez des entiers à la place</h3>
+### Abandonnez les coordonnées décimales et utilisez des entiers à la place
 
-<p>Un rendu de sous-pixel est opéré quand on dessine des objets sur un canvas sans valeur entière.</p>
+Un rendu de sous-pixel est opéré quand on dessine des objets sur un canvas sans valeur entière.
 
-<pre class="brush: js">ctx.drawImage(myImage, 0.3, 0.5);
-</pre>
+```js
+ctx.drawImage(myImage, 0.3, 0.5);
+```
 
-<p>Cela pousse le navigateur à faire des calculs supplémentaires pour créer un effet d'anti-crénelage. Pour empêcher cela, il faut s'assurer d'arrondir les coordonnées utilisées pour {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}}.</p>
+Cela pousse le navigateur à faire des calculs supplémentaires pour créer un effet d'anti-crénelage. Pour empêcher cela, il faut s'assurer d'arrondir les coordonnées utilisées pour {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}}.
 
-<h3 id="Ne_pas_redimensionner_dimages_avec_drawImage">Ne pas redimensionner d'images avec <code>drawImage</code></h3>
+### Ne pas redimensionner d'images avec `drawImage`
 
-<p>Préférez mettre en cache plusieurs dimensions de votre image dans un canvas hors-champ au lieu de les redimensionner constamment avec {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}}.</p>
+Préférez mettre en cache plusieurs dimensions de votre image dans un canvas hors-champ au lieu de les redimensionner constamment avec {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}}.
 
-<h3 id="Utiliser_des_canvas_empilés_pour_les_scènes_complexes">Utiliser des canvas empilés pour les scènes complexes</h3>
+### Utiliser des canvas empilés pour les scènes complexes
 
-<p>Pour des scènes complexes, on peut souvent remarquer que quelques éléments changent souvent tandis que d'autres ne changent jamais. Une optimisation possible dans ce cas consiste à utiliser plusieurs calques sous forme de canvas empilés.</p>
+Pour des scènes complexes, on peut souvent remarquer que quelques éléments changent souvent tandis que d'autres ne changent jamais. Une optimisation possible dans ce cas consiste à utiliser plusieurs calques sous forme de canvas empilés.
 
-<p>Par exemple, on peut créer un calque UI, dessiné au-dessus de tous les autres uniquement lorsque l'utilisateur accède à un menu. En dessous, un calque <em>jeu</em> où les entités du jeu sont souvent mises à jour. Et, à l'arrière, un calque de fond rarement modifié.</p>
+Par exemple, on peut créer un calque UI, dessiné au-dessus de tous les autres uniquement lorsque l'utilisateur accède à un menu. En dessous, un calque _jeu_ où les entités du jeu sont souvent mises à jour. Et, à l'arrière, un calque de fond rarement modifié.
 
-<pre class="brush: html">&lt;div id="stage"&gt;
-  &lt;canvas id="ui-layer" width="480" height="320"&gt;&lt;/canvas&gt;
-  &lt;canvas id="game-layer" width="480" height="320"&gt;&lt;/canvas&gt;
-  &lt;canvas id="background-layer" width="480" height="320"&gt;&lt;/canvas&gt;
-&lt;/div&gt;
+```html
+<div id="stage">
+  <canvas id="ui-layer" width="480" height="320"></canvas>
+  <canvas id="game-layer" width="480" height="320"></canvas>
+  <canvas id="background-layer" width="480" height="320"></canvas>
+</div>
 
-&lt;style&gt;
+<style>
   #stage {
     width: 480px;
     height: 320px;
@@ -60,18 +63,19 @@ myEntity.render(myEntity.offscreenContext);
   #ui-layer { z-index: 3 }
   #game-layer { z-index: 2 }
   #background-layer { z-index: 1 }
-&lt;/style&gt;
-</pre>
+</style>
+```
 
-<h3 id="Du_CSS_pour_les_grandes_images_de_fond">Du CSS pour les grandes images de fond</h3>
+### Du CSS pour les grandes images de fond
 
-<p>Si comme pour la plupart des jeux, vous utilisez une image de fond statique, préférez utiliser un simple {{HTMLElement("div")}} en dessous du canvas avec les propriétés CSS {{cssxref("background")}} appropriées. Cela vous évitera de redessiner une grande image dans le canvas à chaque tick.</p>
+Si comme pour la plupart des jeux, vous utilisez une image de fond statique, préférez utiliser un simple {{HTMLElement("div")}} en dessous du canvas avec les propriétés CSS {{cssxref("background")}} appropriées. Cela vous évitera de redessiner une grande image dans le canvas à chaque tick.
 
-<h3 id="Redimensionner_les_canvas_avec_CSS_transform">Redimensionner les canvas avec CSS transform</h3>
+### Redimensionner les canvas avec CSS transform
 
-<p><a href="/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS">Les transformations CSS</a> sont plus rapides car elles utilisent le GPU. Le mieux est d'utiliser un canvas plus grand et de réduire sa taille. Pour Firefox OS, les dimensions sont de 480 x 320 px.</p>
+[Les transformations CSS](/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS) sont plus rapides car elles utilisent le GPU. Le mieux est d'utiliser un canvas plus grand et de réduire sa taille. Pour Firefox OS, les dimensions sont de 480 x 320 px.
 
-<pre class="brush: js">var scaleX = window.innerWidth / canvas.width;
+```js
+var scaleX = window.innerWidth / canvas.width;
 var scaleY = window.innerHeight / canvas.height;
 
 var scaleToFit = Math.min(scaleX, scaleY);
@@ -79,33 +83,31 @@ var scaleToCover = Math.max(scaleX, scaleY);
 
 stage.style.transformOrigin = "0 0"; //scale from top left
 stage.style.transform = "scale(" + scaleToFit + ")";
-</pre>
+```
 
-<h3 id="Utiliser_lattribut_moz-opaque_Gecko_only">Utiliser l'attribut <code>moz-opaque</code> (Gecko only)</h3>
+### Utiliser l'attribut `moz-opaque` (Gecko only)
 
-<p>Si le canvas n'a pas besoin de transparence, ajouter l'attribut <code>moz-opaque</code> dans la balise canvas. Cette information peut être utilisée par le navigateur pour optimiser le rendu.</p>
+Si le canvas n'a pas besoin de transparence, ajouter l'attribut `moz-opaque` dans la balise canvas. Cette information peut être utilisée par le navigateur pour optimiser le rendu.
 
-<pre class="brush: html">&lt;canvas id="mycanvas" moz-opaque&gt;&lt;/canvas&gt;</pre>
+```html
+<canvas id="mycanvas" moz-opaque></canvas>
+```
 
-<h3 id="Dautres_conseils">D'autres conseils</h3>
+### D'autres conseils
 
-<ul>
- <li>Regrouper les appels canevas (par exemple, dessiner un chemin de plusieurs lignes plutôt que plusieurs lignes séparées).</li>
- <li>Éviter de refaire un rendu si ce n'est pas nécessaire.</li>
- <li>Rendre uniquement les différences, pas tout le canvas.</li>
- <li>Éviter la propriété {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}} quand c'est possible.</li>
- <li>Empêcher <a href="/fr/docs/Dessin_de_texte_avec_canvas">le rendu de texte</a> quand c'est possible.</li>
- <li>Essayer différents moyens d'effacer le canvas : ({{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}} vs. {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} vs. redimensionner le canevas).</li>
- <li>Avec les animations, utiliser {{domxref("window.requestAnimationFrame()")}} plutôt que {{domxref("window.setInterval()")}}.</li>
- <li>Faire attention aux bibliothèques physiques lourdes.</li>
- <li>Tester les performances avec <a href="http://jsperf.com">JSPerf</a>.</li>
-</ul>
+- Regrouper les appels canevas (par exemple, dessiner un chemin de plusieurs lignes plutôt que plusieurs lignes séparées).
+- Éviter de refaire un rendu si ce n'est pas nécessaire.
+- Rendre uniquement les différences, pas tout le canvas.
+- Éviter la propriété {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}} quand c'est possible.
+- Empêcher [le rendu de texte](/fr/docs/Dessin_de_texte_avec_canvas) quand c'est possible.
+- Essayer différents moyens d'effacer le canvas : ({{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}} vs. {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} vs. redimensionner le canevas).
+- Avec les animations, utiliser {{domxref("window.requestAnimationFrame()")}} plutôt que {{domxref("window.setInterval()")}}.
+- Faire attention aux bibliothèques physiques lourdes.
+- Tester les performances avec [JSPerf](http://jsperf.com).
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="http://www.html5rocks.com/en/tutorials/canvas/performance/#toc-ref">Improving HTML5 Canvas Performance – HTML5 Rocks</a></li>
- <li><a href="https://hacks.mozilla.org/2013/05/optimizing-your-javascript-game-for-firefox-os/">Optimizing your JavaScript game for Firefox OS – Mozilla Hacks</a></li>
-</ul>
+- [Improving HTML5 Canvas Performance – HTML5 Rocks](http://www.html5rocks.com/en/tutorials/canvas/performance/#toc-ref)
+- [Optimizing your JavaScript game for Firefox OS – Mozilla Hacks](https://hacks.mozilla.org/2013/05/optimizing-your-javascript-game-for-firefox-os/)
 
-<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}</p>
+{{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}
diff --git a/files/fr/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.md b/files/fr/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.md
index 053a07aa30..45651bb30a 100644
--- a/files/fr/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.md
+++ b/files/fr/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.md
@@ -4,119 +4,129 @@ slug: Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas
 translation_of: Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas
 original_slug: Web/API/Canvas_API/Tutoriel_canvas/Pixel_manipulation_with_canvas
 ---
-<div>{{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas/Advanced_animations", "Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility")}}</div>
+{{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas/Advanced_animations", "Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility")}}
 
-<p>Jusqu'à présent, nous n'avons pas examiné dans le détail les pixels réels de notre canevas. Avec l'objet ImageData, vous pouvez directement lire et écrire dans le tableau de données de l'image, pour manipuler les pixels un par un. Nous verrons également comment le lissage (anticrénelage) de l'image peut être contrôlé et comment sauvegarder des images depuis votre canevas.</p>
+Jusqu'à présent, nous n'avons pas examiné dans le détail les pixels réels de notre canevas. Avec l'objet ImageData, vous pouvez directement lire et écrire dans le tableau de données de l'image, pour manipuler les pixels un par un. Nous verrons également comment le lissage (anticrénelage) de l'image peut être contrôlé et comment sauvegarder des images depuis votre canevas.
 
-<h2 id="Lobjet_ImageData">L'objet <code>ImageData</code></h2>
+## L'objet `ImageData`
 
-<p>L'objet {{domxref("ImageData")}} représente les données de pixels sous-jacentes à une zone d'un objet canevas. Il contient les attributs (en lecture seule) suivants :</p>
+L'objet {{domxref("ImageData")}} représente les données de pixels sous-jacentes à une zone d'un objet canevas. Il contient les attributs (en lecture seule) suivants :
 
-<dl>
- <dt><code>width</code></dt>
- <dd>La largeur de l'image en pixels.</dd>
- <dt><code>height</code></dt>
- <dd>La hauteur de l'image en pixels.</dd>
- <dt><code>data</code></dt>
- <dd>Un {{jsxref("Uint8ClampedArray")}} représentant un tableau monodimensionnel contenant les données dans l'ordre RVBA, ayant des valeurs entières entre 0 et  255 (inclus).</dd>
-</dl>
+- `width`
+  - : La largeur de l'image en pixels.
+- `height`
+  - : La hauteur de l'image en pixels.
+- `data`
+  - : Un {{jsxref("Uint8ClampedArray")}} représentant un tableau monodimensionnel contenant les données dans l'ordre RVBA, ayant des valeurs entières entre 0 et  255 (inclus).
 
-<p>La propriété <code>data</code> retourne un tableau {{jsxref("Uint8ClampedArray")}} auquel on peut accéder pour voir plus en détail les données brutes des pixels ; chaque pixel est représenté par quatre valeurs sur un octet (rouge, vert, bleu et alpha, dans cet ordre ; c'est-à-dire, le format "RVBA").  Chaque composante de couleur est représentée par un entier entre 0 et 255. Chaque composante reçoit un indice à l'intérieur du tableau, la composante rouge du pixel supérieur gauche étant à l'indice 0 à l'intérieur du tableau. Les pixels continuent ensuite de gauche à droite, puis vers le bas, jusqu'au bout du tableau.</p>
+La propriété `data` retourne un tableau {{jsxref("Uint8ClampedArray")}} auquel on peut accéder pour voir plus en détail les données brutes des pixels ; chaque pixel est représenté par quatre valeurs sur un octet (rouge, vert, bleu et alpha, dans cet ordre ; c'est-à-dire, le format "RVBA").  Chaque composante de couleur est représentée par un entier entre 0 et 255. Chaque composante reçoit un indice à l'intérieur du tableau, la composante rouge du pixel supérieur gauche étant à l'indice 0 à l'intérieur du tableau. Les pixels continuent ensuite de gauche à droite, puis vers le bas, jusqu'au bout du tableau.
 
-<p>Le {{jsxref("Uint8ClampedArray")}} contient <code>height</code><em>(hauteur)</em> × <code>width</code><em>(largeur)</em>  × 4 octets, dont les valeurs d'indices vont de 0 à (<code>height</code>×<code>width</code>×4)-1.</p>
+Le {{jsxref("Uint8ClampedArray")}} contient `height`_(hauteur)_ × `width`*(largeur)*  × 4 octets, dont les valeurs d'indices vont de 0 à (`height`×`width`×4)-1.
 
-<p>Par exemple, pour lire la valeur de la composante bleue d'un pixel situé en colonne 200, ligne 50  de l'image, vous pouvez faire ce qui suit :</p>
+Par exemple, pour lire la valeur de la composante bleue d'un pixel situé en colonne 200, ligne 50  de l'image, vous pouvez faire ce qui suit :
 
-<pre class="brush: js">composanteBleue = imageData.data[((50 * (imageData.width * 4)) + (200 * 4)) + 2];</pre>
+```js
+composanteBleue = imageData.data[((50 * (imageData.width * 4)) + (200 * 4)) + 2];
+```
 
-<p>Vous pouvez accéder à la taille en octets du tableau de pixels en lisant l'attribut <code>Uint8ClampedArray.length</code> :</p>
+Vous pouvez accéder à la taille en octets du tableau de pixels en lisant l'attribut `Uint8ClampedArray.length` :
 
-<pre class="brush: js">var nbOctets = imageData.data.length;
-</pre>
+```js
+var nbOctets = imageData.data.length;
+```
 
-<h2 id="Création_dun_objet_ImageData">Création d'un objet <code>ImageData</code></h2>
+## Création d'un objet `ImageData`
 
-<p>Pour créer un nouvel objet <code>ImageData</code> vierge, vous pouvez utiliser la méthode  {{domxref("CanvasRenderingContext2D.createImageData", "createImageData()")}}. Il existe deux versions de la méthode <code>createImageData() </code>:</p>
+Pour créer un nouvel objet `ImageData` vierge, vous pouvez utiliser la méthode  {{domxref("CanvasRenderingContext2D.createImageData", "createImageData()")}}. Il existe deux versions de la méthode `createImageData() `:
 
-<pre class="brush: js">var monImageData = ctx.createImageData(largeur, hauteur);</pre>
+```js
+var monImageData = ctx.createImageData(largeur, hauteur);
+```
 
-<p>Cela crée un nouvel objet <code>ImageData</code> avec les dimensions spécifiées. Tous les pixels sont prédéfinis comme étant noirs transparents.</p>
+Cela crée un nouvel objet `ImageData` avec les dimensions spécifiées. Tous les pixels sont prédéfinis comme étant noirs transparents.
 
-<p>Vous pouvez aussi créer un nouvel objet <code>ImageData</code> ayant les mêmes dimensions que celles de l'objet indiqué par <code>autreImageData</code>. Les pixels du nouvel objet sont tous prédéfinis comme étant noirs transparents. <strong>Cela ne copie pas les données d'image !</strong></p>
+Vous pouvez aussi créer un nouvel objet `ImageData` ayant les mêmes dimensions que celles de l'objet indiqué par `autreImageData`. Les pixels du nouvel objet sont tous prédéfinis comme étant noirs transparents. **Cela ne copie pas les données d'image !**
 
-<pre class="brush: js">var monImageData = ctx.createImageData(autreImageData);</pre>
+```js
+var monImageData = ctx.createImageData(autreImageData);
+```
 
-<h2 id="Obtention_des_données_pixel_pour_un_contexte">Obtention des données pixel pour un contexte</h2>
+## Obtention des données pixel pour un contexte
 
-<p>Pour obtenir un objet  <code>ImageData</code> contenant une copie des données pixel pour un contexte de canevas, vous pouvez utiliser la méthode <code>getImageData()</code> :</p>
+Pour obtenir un objet  `ImageData` contenant une copie des données pixel pour un contexte de canevas, vous pouvez utiliser la méthode `getImageData()` :
 
-<pre class="brush: js">var monImageData = ctx.getImageData(gauche, haut, largeur, hauteur);</pre>
+```js
+var monImageData = ctx.getImageData(gauche, haut, largeur, hauteur);
+```
 
-<p>Cette méthode retourne un objet <code>ImageData</code> représentant les données pixel pour la zone du canevas dont les coins sont représentés par les points  (<code>left</code>,<code>top</code>) <em><code> (gauche,haut)</code></em>, (<code>left+width</code>, <code>top</code>) <em>(gauche+largeur, haut)</em>, (<code>left</code>, <code>top+height</code>)<em> (gauche, haut+hauteur)</em> et  (<code>left+width</code>, <code>top+height</code>) <em>(gauche+largeur, haut+hauteur)</em>. Les coordonnées sont spécifiées en unités d'espace de coordonnées du canevas.</p>
+Cette méthode retourne un objet `ImageData` représentant les données pixel pour la zone du canevas dont les coins sont représentés par les points  (`left`,`top`) _`(gauche,haut)`_, (`left+width`, `top`) _(gauche+largeur, haut)_, (`left`, `top+height`) _(gauche, haut+hauteur)_ et  (`left+width`, `top+height`) _(gauche+largeur, haut+hauteur)_. Les coordonnées sont spécifiées en unités d'espace de coordonnées du canevas.
 
-<div class="note">
-<p><strong>Note :</strong> Tous les pixels en dehors du canevas seront retournés comme noirs transparents dans l'objet <code>ImageData</code> résultant.</p>
-</div>
+> **Note :** Tous les pixels en dehors du canevas seront retournés comme noirs transparents dans l'objet `ImageData` résultant.
 
-<p>Cette méthode est aussi présentée dans l'article <a href="/fr/docs/HTML/Manipulating_video_using_canvas">Manipulation vidéo utilisant canvas</a>.</p>
+Cette méthode est aussi présentée dans l'article [Manipulation vidéo utilisant canvas](/fr/docs/HTML/Manipulating_video_using_canvas).
 
-<h3 id="Une_pipette_à_couleur">Une pipette à couleur</h3>
+### Une pipette à couleur
 
-<p>Dans cet exemple, nous utilisons la méthode <a href="/fr/docs/Web/API/CanvasRenderingContext2D/getImageData">getImageData() </a>pour afficher la couleur en dessous du curseur de la souris. Pour cela, nous avons besoin de la position en cours de la souris donnée par <code>layerX</code> et <code>layerY</code>, nous recherchons ensuite les données pixel à cette position dans le tableau de pixels que <a href="/fr/docs/Web/API/CanvasRenderingContext2D/getImageData">getImageData()</a> nous fournit. Finalement, nous utilisons les données du tableau pour définir une couleur d'arrière-plan et un texte dans le <code>&lt;div&gt;</code> pour afficher la couleur.</p>
+Dans cet exemple, nous utilisons la méthode [getImageData() ](/fr/docs/Web/API/CanvasRenderingContext2D/getImageData)pour afficher la couleur en dessous du curseur de la souris. Pour cela, nous avons besoin de la position en cours de la souris donnée par `layerX` et `layerY`, nous recherchons ensuite les données pixel à cette position dans le tableau de pixels que [getImageData()](/fr/docs/Web/API/CanvasRenderingContext2D/getImageData) nous fournit. Finalement, nous utilisons les données du tableau pour définir une couleur d'arrière-plan et un texte dans le `<div>` pour afficher la couleur.
 
-<pre class="brush: html hidden">&lt;canvas id="canvas" width="300" height="227" style="float:left"&gt;&lt;/canvas&gt;
-&lt;div id="color" style="width:200px;height:50px;float:left"&gt;&lt;/div&gt;
-</pre>
+```html hidden
+<canvas id="canvas" width="300" height="227" style="float:left"></canvas>
+<div id="color" style="width:200px;height:50px;float:left"></div>
+```
 
-<pre class="notranslate"><code>var img = new Image();
-img.src = './assets/rhino.jpg';
-var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-img.onload = function() {
-  ctx.drawImage(img, 0, 0);
-  img.style.display = 'none';
-};
-var color = document.getElementById('color');
-function pick(event) {
-  var x = event.layerX;
-  var y = event.layerY;
-  var pixel = ctx.getImageData(x, y, 1, 1);
-  var data = pixel.data;
-  var rgba = 'rgba(' + data[0] + ', ' + data[1] +
-             ', ' + data[2] + ', ' + (data[3] / 255) + ')';
-  color.style.background =  rgba;
-  color.textContent = rgba;
-}
-canvas.addEventListener('mousemove', pick);</code></pre>
+    var img = new Image();
+    img.src = './assets/rhino.jpg';
+    var canvas = document.getElementById('canvas');
+    var ctx = canvas.getContext('2d');
+    img.onload = function() {
+      ctx.drawImage(img, 0, 0);
+      img.style.display = 'none';
+    };
+    var color = document.getElementById('color');
+    function pick(event) {
+      var x = event.layerX;
+      var y = event.layerY;
+      var pixel = ctx.getImageData(x, y, 1, 1);
+      var data = pixel.data;
+      var rgba = 'rgba(' + data[0] + ', ' + data[1] +
+                 ', ' + data[2] + ', ' + (data[3] / 255) + ')';
+      color.style.background =  rgba;
+      color.textContent = rgba;
+    }
+    canvas.addEventListener('mousemove', pick);
 
-<p>{{ EmbedLiveSample('A_color_picker', 610, 240) }}</p>
+{{ EmbedLiveSample('A_color_picker', 610, 240) }}
 
-<h2 id="Peinture_des_données_pixel_dans_un_contexte">Peinture des données pixel dans un contexte</h2>
+## Peinture des données pixel dans un contexte
 
-<p>Vous pouvez utiliser la méthode <a href="/fr/docs/Web/API/CanvasRenderingContext2D/putImageData">putImageData() </a>pour peindre les données pixel dans un contexte :</p>
+Vous pouvez utiliser la méthode [putImageData() ](/fr/docs/Web/API/CanvasRenderingContext2D/putImageData)pour peindre les données pixel dans un contexte :
 
-<pre class="brush: js">ctx.putImageData(monImageData, dx, dy);
-</pre>
+```js
+ctx.putImageData(monImageData, dx, dy);
+```
 
-<p>Les paramètres <code>dx</code> et <code>dy</code> indiquent les coordonnées système dans le contexte du coin supérieur gauche des données pixel qui doivent être peintes.</p>
+Les paramètres `dx` et `dy` indiquent les coordonnées système dans le contexte du coin supérieur gauche des données pixel qui doivent être peintes.
 
-<p>Par exemple, pour peindre l'image entière représentée par <code>monImageData</code> dans le coin supérieur gauche du contexte, vous pouvez simplement faire ce qui suit :</p>
+Par exemple, pour peindre l'image entière représentée par `monImageData` dans le coin supérieur gauche du contexte, vous pouvez simplement faire ce qui suit :
 
-<pre class="brush: js">ctx.putImageData(monImageData, 0, 0);
-</pre>
+```js
+ctx.putImageData(monImageData, 0, 0);
+```
 
-<h3 id="Niveaux_de_gris_et_inversion_de_couleurs">Niveaux de gris et inversion de couleurs</h3>
+### Niveaux de gris et inversion de couleurs
 
-<p>Dans cet exemple, nous itérons sur tous les pixels pour changer leurs valeurs, puis nous remettons le tableau de pixels modifié sur le canevas à l'aide de <a href="/fr-FR/docs/Web/API/CanvasRenderingContext2D/putImageData">putImageData()</a>. La fonction inversion soustrait simplement chaque couleur de la valeur maximale 255. La fonction  grayscale <em>(niveaux de gris)</em> fait simplement la moyenne du rouge, du vert et du bleu. Vous pouvez également utiliser une moyenne pondérée, donnée par la formule x = 0.299r + 0.587v + 0.114b, par exemple. Voir <a href="https://fr.wikipedia.org/wiki/Niveau_de_gris">Niveaux de gris</a> sur Wikipedia pour plus d'informations.</p>
+Dans cet exemple, nous itérons sur tous les pixels pour changer leurs valeurs, puis nous remettons le tableau de pixels modifié sur le canevas à l'aide de [putImageData()](/fr-FR/docs/Web/API/CanvasRenderingContext2D/putImageData). La fonction inversion soustrait simplement chaque couleur de la valeur maximale 255. La fonction  grayscale _(niveaux de gris)_ fait simplement la moyenne du rouge, du vert et du bleu. Vous pouvez également utiliser une moyenne pondérée, donnée par la formule x = 0.299r + 0.587v + 0.114b, par exemple. Voir [Niveaux de gris](https://fr.wikipedia.org/wiki/Niveau_de_gris) sur Wikipedia pour plus d'informations.
 
-<pre class="brush: html hidden">&lt;canvas id="canevas" width="300" height="227"&gt;&lt;/canvas&gt;
-&lt;div&gt;
-  &lt;input id="btnniveaudegris" value="Niveau de gris" type="button"&gt;
-  &lt;input id="btninversion" value="Inversion" type="button"&gt;
-&lt;/div&gt;
-</pre>
+```html hidden
+<canvas id="canevas" width="300" height="227"></canvas>
+<div>
+  <input id="btnniveaudegris" value="Niveau de gris" type="button">
+  <input id="btninversion" value="Inversion" type="button">
+</div>
+```
 
-<pre class="brush: js">var img = new Image();
+```js
+var img = new Image();
 img.src = './assets/rhino.jpg';
 img.onload = function() {
   dessiner(this);
@@ -131,7 +141,7 @@ function dessiner(img) {
   var data = imageData.data;
 
   var inversion = function() {
-    for (var i = 0; i &lt; data.length; i += 4) {
+    for (var i = 0; i < data.length; i += 4) {
       data[i]     = 255 - data[i];     // rouge
       data[i + 1] = 255 - data[i + 1]; // vert
       data[i + 2] = 255 - data[i + 2]; // bleu
@@ -140,7 +150,7 @@ function dessiner(img) {
   };
 
   var niveaudegris = function() {
-    for (var i = 0; i &lt; data.length; i += 4) {
+    for (var i = 0; i < data.length; i += 4) {
       var moy = (data[i] + data[i + 1] + data[i + 2]) / 3;
       data[i]     = moy; // rouge
       data[i + 1] = moy; // vert
@@ -154,35 +164,39 @@ function dessiner(img) {
   var btnniveaudegris = document.getElementById('btnniveaudegris');
   btnniveaudegris.addEventListener('click', niveaudegris);
 }
-</pre>
+```
 
-<p>{{ EmbedLiveSample('Grayscaling_and_inverting_colors', 330, 270) }}</p>
+{{ EmbedLiveSample('Grayscaling_and_inverting_colors', 330, 270) }}
 
-<h2 id="Zoom_et_anticrénelage">Zoom et anticrénelage</h2>
+## Zoom et anticrénelage
 
-<p>A l'aide de la méthode {{domxref ("CanvasRenderingContext2D.drawImage", "drawImage ()")}}, un deuxième canevas, et la propriété  {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}} , nous pouvons zoomer sur notre image et voir les détails.</p>
+A l'aide de la méthode {{domxref ("CanvasRenderingContext2D.drawImage", "drawImage ()")}}, un deuxième canevas, et la propriété {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}} , nous pouvons zoomer sur notre image et voir les détails.
 
-<p>Nous obtenons la position de la souris et recadrons une image de 5 pixels à gauche et au-dessus à 5 pixels à droite et en-dessous. Ensuite, nous copions celle-ci sur un autre canevas et redimensionnons l'image à la taille que nous voulons. Dans la zone de zoom, nous redimensionnons une zone de 10 × 10 pixels du canevas d'origine à 200 × 200.</p>
+Nous obtenons la position de la souris et recadrons une image de 5 pixels à gauche et au-dessus à 5 pixels à droite et en-dessous. Ensuite, nous copions celle-ci sur un autre canevas et redimensionnons l'image à la taille que nous voulons. Dans la zone de zoom, nous redimensionnons une zone de 10 × 10 pixels du canevas d'origine à 200 × 200.
 
-<pre class="brush: js">zoomctx.drawImage(canvas,
+```js
+zoomctx.drawImage(canvas,
                   Math.abs(x - 5), Math.abs(y - 5),
-                  10, 10, 0, 0, 200, 200);</pre>
+                  10, 10, 0, 0, 200, 200);
+```
 
-<p>Étant donné que l'anticrénelage est activé par défaut, nous pouvons désactiver le lissage pour voir les pixels clairs. Vous pouvez basculer la case à cocher pour voir l'effet de la propriété <code>imageSmoothingEnabled</code> (qui a besoin de préfixes pour différents navigateurs).</p>
+Étant donné que l'anticrénelage est activé par défaut, nous pouvons désactiver le lissage pour voir les pixels clairs. Vous pouvez basculer la case à cocher pour voir l'effet de la propriété `imageSmoothingEnabled` (qui a besoin de préfixes pour différents navigateurs).
 
-<h3 id="exemple_de_zoom">Exemple de zoom</h3>
+### Exemple de zoom
 
-<pre class="brush: html hidden">&lt;canvas id="canvas" width="300" height="227"&gt;&lt;/canvas&gt;
-&lt;canvas id="zoom" width="300" height="227"&gt;&lt;/canvas&gt;
-&lt;div&gt;
-&lt;label for="smoothbtn"&gt;
-  &lt;input type="checkbox" name="smoothbtn" checked="checked" id="smoothbtn"&gt;
+```html hidden
+<canvas id="canvas" width="300" height="227"></canvas>
+<canvas id="zoom" width="300" height="227"></canvas>
+<div>
+<label for="smoothbtn">
+  <input type="checkbox" name="smoothbtn" checked="checked" id="smoothbtn">
   Enable image smoothing
-&lt;/label&gt;
-&lt;/div&gt;
-</pre>
+</label>
+</div>
+```
 
-<pre class="brush: js hidden">var img = new Image();
+```js hidden
+var img = new Image();
 img.src = './assets/rhino.jpg';
 img.onload = function() {
   draw(this);
@@ -216,36 +230,31 @@ function draw(img) {
   };
 
   canvas.addEventListener('mousemove', zoom);
-}</pre>
+}
+```
 
-<p>{{ EmbedLiveSample('exemple_de_zoom', 620, 490) }}</p>
+{{ EmbedLiveSample('exemple_de_zoom', 620, 490) }}
 
-<h2 id="Sauvegarde_des_images">Sauvegarde des images</h2>
+## Sauvegarde des images
 
-<p>L' {{domxref ("HTMLCanvasElement")}} fournit une méthode <code>toDataURL ()</code>, utile lors de l'enregistrement d'images. Il retourne un <a href="/fr/docs/Web/HTTP/Basics_of_HTTP/Data_URIs">URI de données</a> contenant une représentation de l'image dans le format spécifié par le paramètre de <code>type</code> (par défaut en  <a href="https://en.wikipedia.org/wiki/Portable_Network_Graphics">PNG</a> ). L'image renvoyée est dans une résolution de 96 dpi.</p>
+L' {{domxref ("HTMLCanvasElement")}} fournit une méthode `toDataURL ()`, utile lors de l'enregistrement d'images. Il retourne un [URI de données](/fr/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) contenant une représentation de l'image dans le format spécifié par le paramètre de `type` (par défaut en [PNG](https://en.wikipedia.org/wiki/Portable_Network_Graphics) ). L'image renvoyée est dans une résolution de 96 dpi.
 
-<dl>
- <dt>{{domxref("HTMLCanvasElement.toDataURL", "canvas.toDataURL('image/png')")}}</dt>
- <dd>Par défaut. Crée un image PNG.</dd>
- <dt>{{domxref("HTMLCanvasElement.toDataURL", "canvas.toDataURL('image/jpeg', quality)")}}</dt>
- <dd>Crée une image JPG. En option, vous pouvez fournir une qualité comprise entre 0 et 1, 1 étant de la meilleure qualité et 0 presque non reconnaissable mais de petite taille.</dd>
-</dl>
+- {{domxref("HTMLCanvasElement.toDataURL", "canvas.toDataURL('image/png')")}}
+  - : Par défaut. Crée un image PNG.
+- {{domxref("HTMLCanvasElement.toDataURL", "canvas.toDataURL('image/jpeg', quality)")}}
+  - : Crée une image JPG. En option, vous pouvez fournir une qualité comprise entre 0 et 1, 1 étant de la meilleure qualité et 0 presque non reconnaissable mais de petite taille.
 
-<p>Une fois que vous avez généré un URI de données à partir de votre canevas, vous pouvez l'utiliser comme source de {{HTMLElement ("image")}} ou le mettre dans un lien hypertexte avec un attribut de téléchargement pour l'enregistrer sur le disque par exemple.</p>
+Une fois que vous avez généré un URI de données à partir de votre canevas, vous pouvez l'utiliser comme source de {{HTMLElement ("image")}} ou le mettre dans un lien hypertexte avec un attribut de téléchargement pour l'enregistrer sur le disque par exemple.
 
-<p>Vous pouvez également créer un {{domxref ("Blob")}} à partir du canevas.</p>
+Vous pouvez également créer un {{domxref ("Blob")}} à partir du canevas.
 
-<dl>
- <dt>{{domxref("HTMLCanvasElement.toBlob", "canvas.toBlob(callback, type, encoderOptions)")}}</dt>
- <dd>Crée un objet <code>Blob</code> représentant l'image contenue dans le canevas.</dd>
-</dl>
+- {{domxref("HTMLCanvasElement.toBlob", "canvas.toBlob(callback, type, encoderOptions)")}}
+  - : Crée un objet `Blob` représentant l'image contenue dans le canevas.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("ImageData")}}</li>
- <li><a href="/fr/docs/HTML/Manipulating_video_using_canvas">Manipulating video using canvas</a></li>
- <li><a href="https://codepo8.github.io/canvas-images-and-pixels/">Canevas, images et pixels – par Christian Heilmann (en)</a></li>
-</ul>
+- {{domxref("ImageData")}}
+- [Manipulating video using canvas](/fr/docs/HTML/Manipulating_video_using_canvas)
+- [Canevas, images et pixels – par Christian Heilmann (en)](https://codepo8.github.io/canvas-images-and-pixels/)
 
-<p>{{PreviousNext("Tutoriel_canvas/Advanced_animations", "Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility")}}</p>
+{{PreviousNext("Tutoriel_canvas/Advanced_animations", "Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility")}}
diff --git a/files/fr/web/api/canvas_api/tutorial/transformations/index.md b/files/fr/web/api/canvas_api/tutorial/transformations/index.md
index eec783769b..eb0ae18226 100644
--- a/files/fr/web/api/canvas_api/tutorial/transformations/index.md
+++ b/files/fr/web/api/canvas_api/tutorial/transformations/index.md
@@ -10,36 +10,33 @@ tags:
 translation_of: Web/API/Canvas_API/Tutorial/Transformations
 original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations
 ---
-<div>{{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas/Utilisation_d'images", " Web/API/Canvas_API/Tutorial/Compositing ")}}</div>
+{{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas/Utilisation_d'images", " Web/API/Canvas_API/Tutorial/Compositing ")}}
 
-<p>Précédemment dans ce tutoriel, nous avons étudié la <a href="/fr/docs/Tutoriel_canvas/Formes_g%C3%A9om%C3%A9triques">grille du canevas</a> et le <strong>système de coordonnées</strong>. Jusqu'à maintenant, nous avons uniquement utilisé la grille par défaut et modifié la taille de la globalité du canevas afin de répondre à nos besoins. Les transformations que nous allons aborder dans la suite vont nous permettre, de manière plus puissante, d'effectuer des déplacements et des rotations sur la grille et même d'effectuer des mises à l'échelle.</p>
+Précédemment dans ce tutoriel, nous avons étudié la [grille du canevas](/fr/docs/Tutoriel_canvas/Formes_g%C3%A9om%C3%A9triques) et le **système de coordonnées**. Jusqu'à maintenant, nous avons uniquement utilisé la grille par défaut et modifié la taille de la globalité du canevas afin de répondre à nos besoins. Les transformations que nous allons aborder dans la suite vont nous permettre, de manière plus puissante, d'effectuer des déplacements et des rotations sur la grille et même d'effectuer des mises à l'échelle.
 
-<h2 id="Sauvegarde_et_restauration_détat">Sauvegarde et restauration d'état</h2>
+## Sauvegarde et restauration d'état
 
-<p>Avant d'étudier les méthodes de transformations, examinons deux autres méthodes qui vont être indispensables à partir du moment où l'on commence à créer des dessins complexes.</p>
+Avant d'étudier les méthodes de transformations, examinons deux autres méthodes qui vont être indispensables à partir du moment où l'on commence à créer des dessins complexes.
 
-<dl>
- <dt>{{domxref("CanvasRenderingContext2D.save", "save()")}}</dt>
- <dd>Sauvegarde l'état du canevas dans sa globalité.</dd>
- <dt>{{domxref("CanvasRenderingContext2D.restore", "restore()")}}</dt>
- <dd>Restore le plus récent état sauvegardé du canevas.</dd>
-</dl>
+- {{domxref("CanvasRenderingContext2D.save", "save()")}}
+  - : Sauvegarde l'état du canevas dans sa globalité.
+- {{domxref("CanvasRenderingContext2D.restore", "restore()")}}
+  - : Restore le plus récent état sauvegardé du canevas.
 
-<p>Les états du canevas sont stockés dans une pile. Chaque invocation de la méthode <code>save() </code>ajoute une copie de l'état courant du canevas en haut de la pile. L'état du dessin est constitué de :</p>
+Les états du canevas sont stockés dans une pile. Chaque invocation de la méthode `save() `ajoute une copie de l'état courant du canevas en haut de la pile. L'état du dessin est constitué de :
 
-<ul>
- <li>les transformations qui ont été appliquées (exemples : déplacement, rotation, mise à l'échelle).</li>
- <li>Les valeurs actuelles des attributs suivants : {{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle")}}, {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}}, {{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha")}}, {{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth")}}, {{domxref("CanvasRenderingContext2D.lineCap", "lineCap")}}, {{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin")}}, {{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit")}}, {{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset")}}, {{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX")}}, {{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY")}}, {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}}, {{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor")}}, {{domxref("CanvasRenderingContext2D.globalCompositeOperation", "globalCompositeOperation")}}, {{domxref("CanvasRenderingContext2D.font", "font")}}, {{domxref("CanvasRenderingContext2D.textAlign", "textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline")}}, {{domxref("CanvasRenderingContext2D.direction", "direction")}}, {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}}.</li>
- <li>Le chemin de découpe (<a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing#Clipping_paths">clipping path</a>) actuel, qu'on abordera plus loin.</li>
-</ul>
+- les transformations qui ont été appliquées (exemples : déplacement, rotation, mise à l'échelle).
+- Les valeurs actuelles des attributs suivants : {{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle")}}, {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}}, {{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha")}}, {{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth")}}, {{domxref("CanvasRenderingContext2D.lineCap", "lineCap")}}, {{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin")}}, {{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit")}}, {{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset")}}, {{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX")}}, {{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY")}}, {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}}, {{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor")}}, {{domxref("CanvasRenderingContext2D.globalCompositeOperation", "globalCompositeOperation")}}, {{domxref("CanvasRenderingContext2D.font", "font")}}, {{domxref("CanvasRenderingContext2D.textAlign", "textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline")}}, {{domxref("CanvasRenderingContext2D.direction", "direction")}}, {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}}.
+- Le chemin de découpe ([clipping path](/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing#Clipping_paths)) actuel, qu'on abordera plus loin.
 
-<p>La méthode <code>save()</code> peut être invoquée autant de fois que nécessaire. Chaque appel de <code>restore()</code> enlève le dernier état sauvegardé de la pile et tous les paramètres sauvegardés sont restaurés.</p>
+La méthode `save()` peut être invoquée autant de fois que nécessaire. Chaque appel de `restore()` enlève le dernier état sauvegardé de la pile et tous les paramètres sauvegardés sont restaurés.
 
-<h3 id="Un_exemple_de_sauvegarde_et_de_restauration_de_l_état_du_canevas">Un exemple de sauvegarde et de restauration de l état du canevas</h3>
+### Un exemple de sauvegarde et de restauration de l état du canevas
 
-<p>Cet exemple tente d'illustrer comment fonctionne la pile d'états de dessin en dessinant un ensemble de rectangles consécutifs.</p>
+Cet exemple tente d'illustrer comment fonctionne la pile d'états de dessin en dessinant un ensemble de rectangles consécutifs.
 
-<pre class="brush: js">function draw() {
+```js
+function draw() {
   var ctx = document.getElementById('canvas').getContext('2d');
 
   ctx.fillRect(0, 0, 150, 150);   // Dessine un rectangle avec les réglages par défaut
@@ -58,43 +55,47 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations
 
   ctx.restore();               // Restaure l'état d'origine
   ctx.fillRect(60, 60, 30, 30);   // Dessine un rectangle avec les réglages restaurés
-}</pre>
+}
+```
 
-<pre class="brush: html hidden">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+```html hidden
+<canvas id="canvas" width="150" height="150"></canvas>
+```
 
-<pre class="brush: js hidden">draw();</pre>
+```js hidden
+draw();
+```
 
-<p>La première étape consiste à dessiner un grand rectangle avec les paramètres par défaut. Ensuite, nous sauvegardons cet état et modifions la couleur de remplissage. Nous dessinons ensuite le deuxième rectangle bleu et mettons l'état de côté. Encore une fois, nous modifions certains paramètres de dessin et dessinons le troisième rectangle blanc semi-transparent.</p>
+La première étape consiste à dessiner un grand rectangle avec les paramètres par défaut. Ensuite, nous sauvegardons cet état et modifions la couleur de remplissage. Nous dessinons ensuite le deuxième rectangle bleu et mettons l'état de côté. Encore une fois, nous modifions certains paramètres de dessin et dessinons le troisième rectangle blanc semi-transparent.
 
-<p>Jusqu'à présent, cela ressemble beaucoup à ce que nous avons fait dans les sections précédentes. Cependant, une fois que nous appelons la première instruction <code>restore()</code>, l'état de dessin supérieur est supprimé de la pile et les paramètres sont restaurés. Si nous n'avions pas sauvegardé l'état en utilisant <code>save ()</code>, nous devrions modifier manuellement la couleur de remplissage et la transparence afin de revenir à l'état précédent. Cela serait facile pour deux propriétés, mais si nous avons plus que cela, notre code deviendrait très long très rapidement.</p>
+Jusqu'à présent, cela ressemble beaucoup à ce que nous avons fait dans les sections précédentes. Cependant, une fois que nous appelons la première instruction `restore()`, l'état de dessin supérieur est supprimé de la pile et les paramètres sont restaurés. Si nous n'avions pas sauvegardé l'état en utilisant `save ()`, nous devrions modifier manuellement la couleur de remplissage et la transparence afin de revenir à l'état précédent. Cela serait facile pour deux propriétés, mais si nous avons plus que cela, notre code deviendrait très long très rapidement.
 
-<p>Lorsque la deuxième instruction <code>restore()</code> est appelée, l'état d'origine (celui que nous avons configuré avant le premier appel à enregistrer) est restauré et le dernier rectangle est de nouveau tracé en noir.</p>
+Lorsque la deuxième instruction `restore()` est appelée, l'état d'origine (celui que nous avons configuré avant le premier appel à enregistrer) est restauré et le dernier rectangle est de nouveau tracé en noir.
 
-<p>{{EmbedLiveSample("Un_exemple_de_sauvegarde_et_de_restauration_de_l_état_du_canevas", "180", "180", "canvas_savestate.png")}}</p>
+{{EmbedLiveSample("Un_exemple_de_sauvegarde_et_de_restauration_de_l_état_du_canevas", "180", "180", "canvas_savestate.png")}}
 
-<h2 id="Déplacement">Déplacement</h2>
+## Déplacement
 
-<p>La première des méthodes de transformation que nous examinerons est <code>translate ()</code>. Cette méthode est utilisée pour déplacer la toile et son origine vers un autre point de la grille.</p>
+La première des méthodes de transformation que nous examinerons est `translate ()`. Cette méthode est utilisée pour déplacer la toile et son origine vers un autre point de la grille.
 
-<dl>
- <dt>{{domxref("CanvasRenderingContext2D.translate", "translate(x, y)")}}</dt>
- <dd>Déplace la toile et son origine sur la grille. <code>x</code> indique la distance horizontale du déplacement, et <code>y</code> indique à quelle distance déplacer la grille verticalement.</dd>
-</dl>
+- {{domxref("CanvasRenderingContext2D.translate", "translate(x, y)")}}
+  - : Déplace la toile et son origine sur la grille. `x` indique la distance horizontale du déplacement, et `y` indique à quelle distance déplacer la grille verticalement.
 
-<img alt="" src="canvas_grid_translate.png"> 
+![](canvas_grid_translate.png)
 
-<p>C'est une bonne idée de sauvegarder l'état du canevas avant d'effectuer des transformations. Dans la plupart des cas, il est plus facile d'appeler la méthode <code>restore</code> que d'avoir à effectuer un déplacement inverse pour revenir à l'état d'origine. De même, si vous déplacez à l'intérieur d'une boucle et que vous ne sauvegardez pas et ne restaurez pas l'état du canevas, il se peut qu'une partie de votre dessin soit manquante, car elle a été dessinée en dehors du bord du canevas.</p>
+C'est une bonne idée de sauvegarder l'état du canevas avant d'effectuer des transformations. Dans la plupart des cas, il est plus facile d'appeler la méthode `restore` que d'avoir à effectuer un déplacement inverse pour revenir à l'état d'origine. De même, si vous déplacez à l'intérieur d'une boucle et que vous ne sauvegardez pas et ne restaurez pas l'état du canevas, il se peut qu'une partie de votre dessin soit manquante, car elle a été dessinée en dehors du bord du canevas.
 
-<h3 id="Un_exemple_translate">Un exemple <code>translate</code></h3>
+### Un exemple `translate`
 
-<p>Cet exemple montre certains des avantages du déplacement de l'origine du canevas. Sans la méthode<code> translate ()</code>, tous les rectangles seraient dessinés à la même position (0,0). La méthode <code>translate ()</code> nous donne également la liberté de placer le rectangle n'importe où sur le canevas sans avoir à ajuster manuellement les coordonnées dans la fonction <code>fillRect ()</code>. Cela le rend un peu plus facile à comprendre et à utiliser.</p>
+Cet exemple montre certains des avantages du déplacement de l'origine du canevas. Sans la méthode` translate ()`, tous les rectangles seraient dessinés à la même position (0,0). La méthode `translate ()` nous donne également la liberté de placer le rectangle n'importe où sur le canevas sans avoir à ajuster manuellement les coordonnées dans la fonction `fillRect ()`. Cela le rend un peu plus facile à comprendre et à utiliser.
 
-<p>Dans la fonction <code>draw ()</code>, nous appelons la fonction <code>fillRect ()</code> neuf fois en utilisant deux boucles <code>for</code> . Dans chaque boucle, le canevas est déplacé, le rectangle est dessiné et le canevas est retourné à son état d'origine. Notez comment l'appel à <code>fillRect ()</code> utilise les mêmes coordonnées à chaque fois, en s'appuyant sur <code>translate ()</code> pour ajuster la position du dessin.</p>
+Dans la fonction `draw ()`, nous appelons la fonction `fillRect ()` neuf fois en utilisant deux boucles `for` . Dans chaque boucle, le canevas est déplacé, le rectangle est dessiné et le canevas est retourné à son état d'origine. Notez comment l'appel à `fillRect ()` utilise les mêmes coordonnées à chaque fois, en s'appuyant sur `translate ()` pour ajuster la position du dessin.
 
-<pre class="brush: js">function draw() {
+```js
+function draw() {
   var ctx = document.getElementById('canvas').getContext('2d');
-  for (var i = 0; i &lt; 3; i++) {
-    for (var j = 0; j &lt; 3; j++) {
+  for (var i = 0; i < 3; i++) {
+    for (var j = 0; j < 3; j++) {
       ctx.save();
       ctx.fillStyle = 'rgb(' + (51 * i) + ', ' + (255 - 51 * i) + ', 255)';
       ctx.translate(10 + j * 50, 10 + i * 50);
@@ -102,37 +103,38 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations
       ctx.restore();
     }
   }
-}</pre>
+}
+```
 
-<pre class="brush: html hidden">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+```html hidden
+<canvas id="canvas" width="150" height="150"></canvas>
+```
 
-<pre class="brush: js hidden">draw();</pre>
+```js hidden
+draw();
+```
 
+{{EmbedLiveSample("Un_exemple_translate", "160", "160", "translate.png")}}
 
-<p>{{EmbedLiveSample("Un_exemple_translate", "160", "160", "translate.png")}}</p>
+## Rotation
 
-<h2 id="Rotation">Rotation</h2>
+La seconde méthode de transformation est `rotate()`. Nous l'utilisons pour faire pivoter le canevas autour de l'origine actuelle.
 
-<p>La seconde méthode de transformation est <code>rotate()</code>. Nous l'utilisons pour faire pivoter le canevas autour de l'origine actuelle.</p>
+- {{domxref("CanvasRenderingContext2D.rotate", "rotate(angle)")}}
+  - : Fait pivoter le canevas, dans le sens des aiguilles d'une montre autour de l'origine actuelle, par le nombre de radians de l'angle.
 
-<dl>
- <dt>{{domxref("CanvasRenderingContext2D.rotate", "rotate(angle)")}}</dt>
- <dd>Fait pivoter le canevas, dans le sens des aiguilles d'une montre autour de l'origine actuelle, par le nombre de radians de l'angle.</dd>
-</dl>
+![](canvas_grid_rotate.png)
 
-<img alt="" src="canvas_grid_rotate.png">
+Le point central de rotation est toujours l'origine de la toile. Pour changer le point central, nous devrons déplacer le canevas en utilisant la méthode `translate ()`.
 
-<p>Le point central de rotation est toujours l'origine de la toile. Pour changer le point central, nous devrons déplacer le canevas en utilisant la méthode <code>translate ()</code>.</p>
+### Un exemple `rotate`
 
-<h3 id="Un_exemple_rotate">Un exemple <code>rotate</code></h3>
+Dans cet exemple, nous utiliserons la méthode `rotate ()` pour faire d'abord tourner un rectangle à partir de l'origine du canevas, puis du centre du rectangle lui-même à l'aide de `translate ()`.
 
-<p>Dans cet exemple, nous utiliserons la méthode <code>rotate ()</code> pour faire d'abord tourner un rectangle à partir de l'origine du canevas, puis du centre du rectangle lui-même à l'aide de <code>translate ()</code>.</p>
+> **Note :** Les angles sont en radians, pas en degrés. Pour convertir en degrés, nous utilisons : `radians = (Math.PI/180)*degrees`.
 
-<div class="note">
-<p><strong>Note :</strong> Les angles sont en radians, pas en degrés. Pour convertir en degrés, nous utilisons : <code>radians = (Math.PI/180)*degrees</code>.</p>
-</div>
-
-<pre class="brush: js">function draw() {
+```js
+function draw() {
   var ctx = document.getElementById('canvas').getContext('2d');
 
   // rectangles de gauche, rotation depuis l'origine du canevas
@@ -160,34 +162,38 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations
   // dessine le rectangle gris
   ctx.fillStyle = '#4D4E53';
   ctx.fillRect(150, 30, 100, 100);
-}</pre>
+}
+```
 
-<p>Pour faire pivoter le rectangle autour de son propre centre, nous déplaçons le canevas au centre du rectangle, puis faisons pivoter le canevas, puis le déplaçons à 0,0, puis dessinons le rectangle.</p>
+Pour faire pivoter le rectangle autour de son propre centre, nous déplaçons le canevas au centre du rectangle, puis faisons pivoter le canevas, puis le déplaçons à 0,0, puis dessinons le rectangle.
 
-<pre class="brush: html hidden">&lt;canvas id="canvas" width="300" height="200"&gt;&lt;/canvas&gt;</pre>
+```html hidden
+<canvas id="canvas" width="300" height="200"></canvas>
+```
 
-<pre class="brush: js hidden">draw();</pre>
+```js hidden
+draw();
+```
 
-<p>{{EmbedLiveSample("Un_exemple_rotate", "310", "210", "rotate.png")}}</p>
+{{EmbedLiveSample("Un_exemple_rotate", "310", "210", "rotate.png")}}
 
-<h2 id="Mise_à_léchelle">Mise à l'échelle</h2>
+## Mise à l'échelle
 
-<p>La méthode de transformation suivante est la mise à l'échelle. Nous l'utilisons pour augmenter ou diminuer les unités de notre grille de canevas. Cela peut être utilisé pour dessiner des formes ou des bitmaps réduits ou agrandis.</p>
+La méthode de transformation suivante est la mise à l'échelle. Nous l'utilisons pour augmenter ou diminuer les unités de notre grille de canevas. Cela peut être utilisé pour dessiner des formes ou des bitmaps réduits ou agrandis.
 
-<dl>
- <dt>{{domxref("CanvasRenderingContext2D.scale", "scale(x, y)")}}</dt>
- <dd>Met à l'échelle les unités du canevas avec x horizontalement et y verticalement. Les deux paramètres sont des nombres réels. Les valeurs inférieures à 1,0 réduisent la taille de l'unité et les valeurs supérieures à 1,0 augmentent la taille de l'unité. Les valeurs 1.0 laissent les unités à la même taille.</dd>
-</dl>
+- {{domxref("CanvasRenderingContext2D.scale", "scale(x, y)")}}
+  - : Met à l'échelle les unités du canevas avec x horizontalement et y verticalement. Les deux paramètres sont des nombres réels. Les valeurs inférieures à 1,0 réduisent la taille de l'unité et les valeurs supérieures à 1,0 augmentent la taille de l'unité. Les valeurs 1.0 laissent les unités à la même taille.
 
-<p>En utilisant des nombres négatifs, vous pouvez faire une mise en miroir d'axe (par exemple en utilisant <code>translate (0, canvas.height), scale (1, -1)</code>, vous aurez le système de coordonnées cartésien bien connu, avec l'origine dans le coin inférieur gauche).</p>
+En utilisant des nombres négatifs, vous pouvez faire une mise en miroir d'axe (par exemple en utilisant `translate (0, canvas.height), scale (1, -1)`, vous aurez le système de coordonnées cartésien bien connu, avec l'origine dans le coin inférieur gauche).
 
-<p>Par défaut, une unité sur la toile est exactement un pixel. Si nous appliquons, par exemple, un facteur d'échelle de 0,5, l'unité résultante deviendrait 0,5 pixels et ainsi les formes seraient dessinées à la moitié de la taille. De la même façon, si nous définissons le facteur d'échelle sur 2.0, la taille de l'unité augmentera et une unité deviendra deux pixels. Cela donne des formes dessinées deux fois plus grandes.</p>
+Par défaut, une unité sur la toile est exactement un pixel. Si nous appliquons, par exemple, un facteur d'échelle de 0,5, l'unité résultante deviendrait 0,5 pixels et ainsi les formes seraient dessinées à la moitié de la taille. De la même façon, si nous définissons le facteur d'échelle sur 2.0, la taille de l'unité augmentera et une unité deviendra deux pixels. Cela donne des formes dessinées deux fois plus grandes.
 
-<h3 id="Un_exemple_scale">Un exemple <code>scale</code></h3>
+### Un exemple `scale`
 
-<p>Dans ce dernier exemple, nous allons dessiner des  formes avec différents facteurs d'échelle.</p>
+Dans ce dernier exemple, nous allons dessiner des  formes avec différents facteurs d'échelle.
 
-<pre class="brush: js">function draw() {
+```js
+function draw() {
   var ctx = document.getElementById('canvas').getContext('2d');
 
   // dessine un rectangle simple, mais le met à l'échelle.
@@ -200,55 +206,61 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations
   ctx.scale(-1, 1);
   ctx.font = '48px serif';
   ctx.fillText('MDN', -135, 120);
-}</pre>
+}
+```
+
+```html hidden
+<canvas id="canvas" width="150" height="150"></canvas>
+```
+
+```js hidden
+draw();
+```
+
+{{EmbedLiveSample("Un_exemple_scale", "160", "160", "scale.png")}}
 
-<pre class="brush: html hidden">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+## Transformation
 
-<pre class="brush: js hidden">draw();</pre>
+Enfin, les méthodes de transformation suivantes appliquent des modifications directement à la matrice de transformation.
 
-<p>{{EmbedLiveSample("Un_exemple_scale", "160", "160", "scale.png")}}</p>
+- {{domxref("CanvasRenderingContext2D.transform", "transform(a, b, c, d, e, f)")}}
 
-<h2 id="Transformation">Transformation</h2>
+  - : Multiplie la matrice de transformation actuelle avec la matrice décrite par ses arguments. La matrice de transformation est décrite par :
 
-<p>Enfin, les méthodes de transformation suivantes appliquent des modifications directement à la matrice de transformation.</p>
+    <math><semantics><mrow><mo>[</mo><mtable columnalign="center center center" rowspacing="0.5ex"><mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd><mtd><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd><mtd><mi>f</mi></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>]</mo></mrow><annotation encoding="TeX">\left[ \begin{array}{ccc} a &#x26; c &#x26; e \\ b &#x26; d &#x26; f \\ 0 &#x26; 0 &#x26; 1 \end{array} \right]</annotation></semantics></math>
 
-<dl>
- <dt>{{domxref("CanvasRenderingContext2D.transform", "transform(a, b, c, d, e, f)")}}</dt>
- <dd><p>Multiplie la matrice de transformation actuelle avec la matrice décrite par ses arguments. La matrice de transformation est décrite par : </p><math><semantics><mrow><mo>[</mo><mtable columnalign="center center center" rowspacing="0.5ex"><mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd><mtd><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd><mtd><mi>f</mi></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>]</mo></mrow><annotation encoding="TeX">\left[ \begin{array}{ccc} a &amp; c &amp; e \\ b &amp; d &amp; f \\ 0 &amp; 0 &amp; 1 \end{array} \right]</annotation></semantics></math>
- <p>Si l'un des arguments est <code>infini</code>, la matrice de transformation doit être marquée comme infinie, plutôt que d'utiliser la méthode qui lance une exception.</p></dd>
-</dl>
+    Si l'un des arguments est `infini`, la matrice de transformation doit être marquée comme infinie, plutôt que d'utiliser la méthode qui lance une exception.
 
-<p>Les paramètres de cette fonction sont :</p>
+Les paramètres de cette fonction sont :
 
-<dl>
- <dt><code>a (m11)</code></dt>
- <dd>Mise à l'échelle horizontale.</dd>
- <dt><em><code>b (m12)</code></em></dt>
- <dd>Inclinaison horizontale.</dd>
- <dt><code>c (m21)</code></dt>
- <dd>Inclinaison verticale.</dd>
- <dt><code>d (m22)</code></dt>
- <dd>Mise à l'échelle verticale.</dd>
- <dt><code>e (dx)</code></dt>
- <dd>Déplacement horizontal.</dd>
- <dt><code>f (dy)</code></dt>
- <dd>Déplacement vertical.</dd>
- <dt>{{domxref("CanvasRenderingContext2D.setTransform", "setTransform(a, b, c, d, e, f)")}}</dt>
- <dd>Réinitialise la transformation en cours dans la matrice d'identité, puis appelle la méthode <code>transform ()</code> avec les mêmes arguments. Cela défait la transformation en cours, puis définit la transformation spécifiée, le tout en une seule étape.</dd>
- <dt>{{domxref("CanvasRenderingContext2D.resetTransform", "resetTransform()")}}</dt>
- <dd>Réinitialise la transformation en cours à la matrice d'identité. C'est la même chose que d'appeler : <code>ctx.setTransform (1, 0, 0, 1, 0, 0)</code>;</dd>
-</dl>
+- `a (m11)`
+  - : Mise à l'échelle horizontale.
+- _`b (m12)`_
+  - : Inclinaison horizontale.
+- `c (m21)`
+  - : Inclinaison verticale.
+- `d (m22)`
+  - : Mise à l'échelle verticale.
+- `e (dx)`
+  - : Déplacement horizontal.
+- `f (dy)`
+  - : Déplacement vertical.
+- {{domxref("CanvasRenderingContext2D.setTransform", "setTransform(a, b, c, d, e, f)")}}
+  - : Réinitialise la transformation en cours dans la matrice d'identité, puis appelle la méthode `transform ()` avec les mêmes arguments. Cela défait la transformation en cours, puis définit la transformation spécifiée, le tout en une seule étape.
+- {{domxref("CanvasRenderingContext2D.resetTransform", "resetTransform()")}}
+  - : Réinitialise la transformation en cours à la matrice d'identité. C'est la même chose que d'appeler : `ctx.setTransform (1, 0, 0, 1, 0, 0)`;
 
-<h3 id="Exemple_pour_transform_et_setTransform">Exemple pour <code>transform</code> et <code>setTransform</code></h3>
+### Exemple pour `transform` et `setTransform`
 
-<pre class="brush: js">function draw() {
+```js
+function draw() {
   var ctx = document.getElementById('canvas').getContext('2d');
 
   var sin = Math.sin(Math.PI / 6);
   var cos = Math.cos(Math.PI / 6);
   ctx.translate(100, 100);
   var c = 0;
-  for (var i = 0; i &lt;= 12; i++) {
+  for (var i = 0; i <= 12; i++) {
     c = Math.floor(255 / 12 * i);
     ctx.fillStyle = 'rgb(' + c + ', ' + c + ', ' + c + ')';
     ctx.fillRect(0, 0, 100, 10);
@@ -258,12 +270,17 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations
   ctx.setTransform(-1, 0, 0, 1, 100, 100);
   ctx.fillStyle = 'rgba(255, 128, 255, 0.5)';
   ctx.fillRect(0, 50, 100, 100);
-}</pre>
+}
+```
 
-<pre class="brush: html hidden">&lt;canvas id="canvas" width="200" height="250"&gt;&lt;/canvas&gt;</pre>
+```html hidden
+<canvas id="canvas" width="200" height="250"></canvas>
+```
 
-<pre class="brush: js hidden">draw();</pre>
+```js hidden
+draw();
+```
 
-<p>{{EmbedLiveSample("Exemple_pour_transform_et_setTransform", "230", "280", "canvas_transform.png")}}</p>
+{{EmbedLiveSample("Exemple_pour_transform_et_setTransform", "230", "280", "canvas_transform.png")}}
 
-<p>{{PreviousNext("Tutoriel_canvas/Utilisation_d'images", "Tutoriel_canvas/Composition")}}</p>
+{{PreviousNext("Tutoriel_canvas/Utilisation_d'images", "Tutoriel_canvas/Composition")}}
diff --git a/files/fr/web/api/canvas_api/tutorial/using_images/index.md b/files/fr/web/api/canvas_api/tutorial/using_images/index.md
index cd72e968a9..358204912c 100644
--- a/files/fr/web/api/canvas_api/tutorial/using_images/index.md
+++ b/files/fr/web/api/canvas_api/tutorial/using_images/index.md
@@ -10,99 +10,93 @@ tags:
 translation_of: Web/API/Canvas_API/Tutorial/Using_images
 original_slug: Web/API/Canvas_API/Tutoriel_canvas/Utilisation_d'images
 ---
-<p>{{CanvasSidebar}}{{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_text", "Web/API/Canvas_API/Tutorial/Transformations")}}</p>
+{{CanvasSidebar}}{{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_text", "Web/API/Canvas_API/Tutorial/Transformations")}}
 
-<p>Jusqu'à présent, nous avons créé nos propres <a href="/fr/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes">formes</a> et <a href="/fr/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">styles appliqués</a>. L'une des fonctionnalités les plus intéressantes de <a href="/fr/docs/Web/HTML/Element/canvas"><code>&lt;canvas&gt;</code></a> est la possibilité d'utiliser des images. Celles-ci peuvent être utilisées pour faire de la composition dynamique de photos ou comme décors de graphes, pour des <i>sprites</i> dans des jeux, et ainsi de suite. Les images externes peuvent être utilisées dans n'importe quel format pris en charge par le navigateur, comme PNG, GIF ou JPEG. Vous pouvez même utiliser l'image produite par d'autres éléments du canevas sur la même page comme source !</p>
+Jusqu'à présent, nous avons créé nos propres [formes](/fr/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) et [styles appliqués](/fr/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors). L'une des fonctionnalités les plus intéressantes de [`<canvas>`](/fr/docs/Web/HTML/Element/canvas) est la possibilité d'utiliser des images. Celles-ci peuvent être utilisées pour faire de la composition dynamique de photos ou comme décors de graphes, pour des _sprites_ dans des jeux, et ainsi de suite. Les images externes peuvent être utilisées dans n'importe quel format pris en charge par le navigateur, comme PNG, GIF ou JPEG. Vous pouvez même utiliser l'image produite par d'autres éléments du canevas sur la même page comme source !
 
-<p>L'importation d'images dans un canevas se déroule en deux étapes :</p>
+L'importation d'images dans un canevas se déroule en deux étapes :
 
-<ol>
- <li>L'obtention d'une référence à un objet <a href="/fr/docs/Web/API/HTMLImageElement"><code>HTMLImageElement</code></a> ou à un autre élément canvas en tant que source. Il est également possible d'utiliser des images en fournissant une URL.</li>
- <li>Le dessin de l'image à l'aide de la fonction <code>drawImage()</code> .</li>
-</ol>
+1.  L'obtention d'une référence à un objet [`HTMLImageElement`](/fr/docs/Web/API/HTMLImageElement) ou à un autre élément canvas en tant que source. Il est également possible d'utiliser des images en fournissant une URL.
+2.  Le dessin de l'image à l'aide de la fonction `drawImage()` .
 
-<p>Voyons comment faire.</p>
+Voyons comment faire.
 
-<h2 id="getting_images_to_draw">Obtenir des images à dessiner</h2>
+## Obtenir des images à dessiner
 
-<p>L'API Canvas peut utiliser l'un des types de données suivants comme source d'image :</p>
+L'API Canvas peut utiliser l'un des types de données suivants comme source d'image :
 
-<dl>
- <dt><a href="/fr/docs/Web/API/HTMLImageElement"><code>HTMLImageElement</code></a></dt>
- <dd>Il s'agit d'images créées à l'aide du constructeur  <code>Image()</code>, ainsi que de tout élément HTML <a href="/fr/docs/Web/HTML/Element/Img"><code>&lt;img&gt;</code></a>.</dd>
- <dt><a href="/fr/docs/Web/API/SVGImageElement"><code>SVGImageElement</code></a></dt>
- <dd>Ce sont des images incorporées en utilisant l'élément SVG <a href="/fr/docs/Web/SVG/Element/image"><code>&lt;image&gt;</code></a>.</dd>
- <dt><a href="/fr/docs/Web/API/HTMLVideoElement"><code>HTMLVideoElement</code></a></dt>
- <dd>L'utilisation d'un élément HTML  <a href="/fr/docs/Web/HTML/Element/video"><code>&lt;video&gt;</code></a>  comme source d'image capture l'image actuelle de la vidéo et l'utilise comme une image.</dd>
- <dt><a href="/fr/docs/Web/API/HTMLCanvasElement"><code>HTMLCanvasElement</code></a></dt>
- <dd>Vous pouvez utiliser un autre élément  <a href="/fr/docs/Web/HTML/Element/canvas"><code>&lt;canvas&gt;</code></a>  comme source d'image.</dd>
-</dl>
+- [`HTMLImageElement`](/fr/docs/Web/API/HTMLImageElement)
+  - : Il s'agit d'images créées à l'aide du constructeur `Image()`, ainsi que de tout élément HTML [`<img>`](/fr/docs/Web/HTML/Element/Img).
+- [`SVGImageElement`](/fr/docs/Web/API/SVGImageElement)
+  - : Ce sont des images incorporées en utilisant l'élément SVG [`<image>`](/fr/docs/Web/SVG/Element/image).
+- [`HTMLVideoElement`](/fr/docs/Web/API/HTMLVideoElement)
+  - : L'utilisation d'un élément HTML [`<video>`](/fr/docs/Web/HTML/Element/video) comme source d'image capture l'image actuelle de la vidéo et l'utilise comme une image.
+- [`HTMLCanvasElement`](/fr/docs/Web/API/HTMLCanvasElement)
+  - : Vous pouvez utiliser un autre élément [`<canvas>`](/fr/docs/Web/HTML/Element/canvas) comme source d'image.
 
-<p>Ces sources sont collectivement référencées par le type <a href="/fr/docs/Web/API/CanvasImageSource"><code>CanvasImageSource</code></a>.</p>
+Ces sources sont collectivement référencées par le type [`CanvasImageSource`](/fr/docs/Web/API/CanvasImageSource).
 
-<p>Il existe plusieurs façons d'obtenir des images pour une utilisation sur un canevas.</p>
+Il existe plusieurs façons d'obtenir des images pour une utilisation sur un canevas.
 
-<h3 id="using_images_from_the_same_page">Utilisation d'images présentes sur la même page</h3>
+### Utilisation d'images présentes sur la même page
 
-<p>Nous pouvons obtenir une référence aux images sur la même page que le canevas en utilisant l'un des éléments suivants :</p>
+Nous pouvons obtenir une référence aux images sur la même page que le canevas en utilisant l'un des éléments suivants :
 
-<ul>
- <li>La collection <a href="/fr/docs/Web/API/Document/images"><code>document.images</code></a> ;</li>
- <li>La méthode <a href="/fr/docs/Web/API/Document/getElementsByTagName"><code>document.getElementsByTagName()</code></a> ;</li>
- <li>Si vous connaissez l'identifiant de l'image spécifique que vous souhaitez utiliser, vous pouvez utiliser  <a href="/fr/docs/Web/API/Document/getElementById"><code>document.getElementById()</code></a> pour retrouver cette image.</li>
-</ul>
+- La collection [`document.images`](/fr/docs/Web/API/Document/images) ;
+- La méthode [`document.getElementsByTagName()`](/fr/docs/Web/API/Document/getElementsByTagName) ;
+- Si vous connaissez l'identifiant de l'image spécifique que vous souhaitez utiliser, vous pouvez utiliser [`document.getElementById()`](/fr/docs/Web/API/Document/getElementById) pour retrouver cette image.
 
-<h3 id="using_images_from_other_domains">Utilisation d'images d'un autre domaine</h3>
+### Utilisation d'images d'un autre domaine
 
-<p>En utilisant l'attribut <a href="/fr/docs/Web/HTML/Element/Img#attr-crossorigin"><code>crossorigin</code></a> d'un élément <a href="/fr/docs/Web/HTML/Element/Img"><code>&lt;img&gt;</code></a> (reflété par la propriété  <a href="/fr/docs/Web/API/HTMLImageElement/crossOrigin"><code>HTMLImageElement.crossOrigin</code></a>), vous  pouvez demander la permission de charger une image d'un autre domaine pour l'utiliser dans votre appel à <code>drawImage()</code>. Si le domaine d'hébergement permet un accès interdomaine à l'image, l'image peut être utilisée dans votre canevas sans l'altérer; sinon utiliser l'image va <a href="/fr/docs/Web/HTML/CORS_enabled_image#what_is_a_.22tainted.22_canvas.3f">corrompre le canevas</a>.</p>
+En utilisant l'attribut [`crossorigin`](/fr/docs/Web/HTML/Element/Img#attr-crossorigin) d'un élément [`<img>`](/fr/docs/Web/HTML/Element/Img) (reflété par la propriété [`HTMLImageElement.crossOrigin`](/fr/docs/Web/API/HTMLImageElement/crossOrigin)), vous pouvez demander la permission de charger une image d'un autre domaine pour l'utiliser dans votre appel à `drawImage()`. Si le domaine d'hébergement permet un accès interdomaine à l'image, l'image peut être utilisée dans votre canevas sans l'altérer; sinon utiliser l'image va [corrompre le canevas](/fr/docs/Web/HTML/CORS_enabled_image#what_is_a_.22tainted.22_canvas.3f).
 
-<h3 id="using_other_canvas_elements">Utilisation d'autres éléments canvas</h3>
+### Utilisation d'autres éléments canvas
 
-<p>Comme pour les images normales, nous accédons aux autres éléments <code>&lt;canvas&gt;</code> en utilisant la méthode <a href="/fr/docs/Web/API/Document/getElementsByTagName"><code>document.getElementsByTagName()</code></a> ou <a href="/fr/docs/Web/API/Document/getElementById"><code>document.getElementById()</code></a>. Assurez-vous d'avoir dessiné quelque chose sur le canevas source avant de l'utiliser dans votre canevas cible.</p>
+Comme pour les images normales, nous accédons aux autres éléments `<canvas>` en utilisant la méthode [`document.getElementsByTagName()`](/fr/docs/Web/API/Document/getElementsByTagName) ou [`document.getElementById()`](/fr/docs/Web/API/Document/getElementById). Assurez-vous d'avoir dessiné quelque chose sur le canevas source avant de l'utiliser dans votre canevas cible.
 
-<p>Une des utilisations les plus pratiques de cette fonctionnalité serait d'utiliser un second élément canvas comme aperçu de taille réduite d'un canevas de grande taille.</p>
+Une des utilisations les plus pratiques de cette fonctionnalité serait d'utiliser un second élément canvas comme aperçu de taille réduite d'un canevas de grande taille.
 
-<h3 id="creating_an_image_from_scratch">Création d'une image à partir de rien</h3>
+### Création d'une image à partir de rien
 
-<p>Une autre option est de créer de nouveaux objets <a href="/fr/docs/Web/API/HTMLImageElement"><code>HTMLImageElement</code></a> dans le script même. Pour ce faire, vous pouvez utiliser le constructeur <code>Image()</code>.</p>
+Une autre option est de créer de nouveaux objets [`HTMLImageElement`](/fr/docs/Web/API/HTMLImageElement) dans le script même. Pour ce faire, vous pouvez utiliser le constructeur `Image()`.
 
-<pre class="brush: js">
+```js
 let img = new Image();   // Crée un nouvel élément Image
 img.src = 'myImage.png'; // Définit le chemin vers sa source
-</pre>
+```
 
-<p>Lorsque ce script est exécuté, l'image commence à être chargée.</p>
+Lorsque ce script est exécuté, l'image commence à être chargée.
 
-<p>Si vous essayez d'appeler <code>drawImage()</code> avant le chargement de l'image, il ne fera rien (ou, dans les anciens navigateurs, cela pourra même déclencher une exception). Utilisez donc l'événement <code>load</code> pour ne pas dessiner avant que l'image ne soit chargée :</p>
+Si vous essayez d'appeler `drawImage()` avant le chargement de l'image, il ne fera rien (ou, dans les anciens navigateurs, cela pourra même déclencher une exception). Utilisez donc l'événement `load` pour ne pas dessiner avant que l'image ne soit chargée :
 
-<pre class="brush: js">
+```js
 let img = new Image();   // Crée un nouvel élément img
 img.addEventListener('load', function() {
   //  exécute les instructions drawImage ici
 }, false);
 img.src = 'myImage.png'; // définit le chemin de la source
-</pre>
+```
 
-<p>Si vous n'utilisez qu'une image externe, cela peut être une bonne approche, mais une fois que vous avez besoin de gérer plus d'une image, vous devrez recourir à quelque chose de plus astucieux. Nous ne verrons pas les stratégies de préchargement dans ce tutoriel, toutefois, gardez à l'esprit l'éventuelle nécessité de ces techniques.</p>
+Si vous n'utilisez qu'une image externe, cela peut être une bonne approche, mais une fois que vous avez besoin de gérer plus d'une image, vous devrez recourir à quelque chose de plus astucieux. Nous ne verrons pas les stratégies de préchargement dans ce tutoriel, toutefois, gardez à l'esprit l'éventuelle nécessité de ces techniques.
 
-<h3 id="embedding_an_image_via_data_url">Intégration d'une image via une URL de données</h3>
+### Intégration d'une image via une URL de données
 
-<p>Un autre moyen possible d'inclure des images consiste à utiliser les <a href="/fr/docs/Web/HTTP/Basics_of_HTTP/Data_URIs">URL de données (<code>data: url</code>)</a>. Les URL de données vous permettent de définir complètement une image en tant que chaîne de caractères codée en Base64 directement dans votre code.</p>
+Un autre moyen possible d'inclure des images consiste à utiliser les [URL de données (`data: url`)](/fr/docs/Web/HTTP/Basics_of_HTTP/Data_URIs). Les URL de données vous permettent de définir complètement une image en tant que chaîne de caractères codée en Base64 directement dans votre code.
 
-<pre class="brush: js">
+```js
 let img = new Image();   // Crée un nouvel élément img
 img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';
-</pre>
+```
 
-<p>L'un des avantages des URL de données est que l'image résultante est disponible immédiatement, sans autre aller-retour au serveur. Cela permet également d'encapsuler dans un fichier tous vos  <a href="/fr/docs/Web/CSS">CSS</a>, <a href="/fr/docs/Web/JavaScript">JavaScript</a>, <a href="/fr/docs/Web/HTML">HTML</a>  et images, ce qui les rend plus portables vers d'autres endroits.</p>
+L'un des avantages des URL de données est que l'image résultante est disponible immédiatement, sans autre aller-retour au serveur. Cela permet également d'encapsuler dans un fichier tous vos [CSS](/fr/docs/Web/CSS), [JavaScript](/fr/docs/Web/JavaScript), [HTML](/fr/docs/Web/HTML) et images, ce qui les rend plus portables vers d'autres endroits.
 
-<p>Certains inconvénients de cette méthode sont que votre image n'est pas mise en cache, et que, pour les grandes images, l'URL encodée peut devenir assez longue.</p>
+Certains inconvénients de cette méthode sont que votre image n'est pas mise en cache, et que, pour les grandes images, l'URL encodée peut devenir assez longue.
 
-<h3 id="using_frames_from_a_video">Utilisation des images d'une vidéo</h3>
+### Utilisation des images d'une vidéo
 
-<p>Vous pouvez également utiliser les images d'une vidéo présentée par un élément  <a href="/fr/docs/Web/HTML/Element/video"><code>&lt;video&gt;</code></a>  (même si la vidéo n'est pas visible). Par exemple, si vous avez un élément  <a href="/fr/docs/Web/HTML/Element/video"><code>&lt;video&gt;</code></a>  avec l'identifiant <code>myvideo</code>, vous pouvez faire :</p>
+Vous pouvez également utiliser les images d'une vidéo présentée par un élément [`<video>`](/fr/docs/Web/HTML/Element/video) (même si la vidéo n'est pas visible). Par exemple, si vous avez un élément [`<video>`](/fr/docs/Web/HTML/Element/video) avec l'identifiant `myvideo`, vous pouvez faire :
 
-<pre class="brush: js">
+```js
 function getMyVideo() {
   let canvas = document.getElementById('canvas');
   if (canvas.getContext) {
@@ -111,36 +105,32 @@ function getMyVideo() {
     return document.getElementById('myvideo');
   }
 }
-</pre>
+```
 
-<p>Cela renvoie l'objet <a href="/fr/docs/Web/API/HTMLVideoElement"><code>HTMLVideoElement</code></a> pour la vidéo, qui, comme décrit précédemment, est l'un des objets pouvant être utilisé comme <code>CanvasImageSource</code>.</p>
+Cela renvoie l'objet [`HTMLVideoElement`](/fr/docs/Web/API/HTMLVideoElement) pour la vidéo, qui, comme décrit précédemment, est l'un des objets pouvant être utilisé comme `CanvasImageSource`.
 
-<h2 id="drawImage">Dessin d'images</h2>
+## Dessin d'images
 
-<p>Une fois la référence à l'objet image source obtenue, on peut utiliser la méthode <code>drawImage()</code> pour l'afficher sur le canevas. Comme nous le verrons plus tard, la méthode <code>drawImage()</code> est surchargée et possède trois variantes différentes. Dans sa forme la plus basique, elle ressemble à ceci :</p>
+Une fois la référence à l'objet image source obtenue, on peut utiliser la méthode `drawImage()` pour l'afficher sur le canevas. Comme nous le verrons plus tard, la méthode `drawImage()` est surchargée et possède trois variantes différentes. Dans sa forme la plus basique, elle ressemble à ceci :
 
-<dl>
- <dt><a href="/fr/docs/Web/API/CanvasRenderingContext2D/drawImage"><code>drawImage(image, x, y)</code></a></dt>
- <dd>Dessine le <code>CanvasImageSource</code> spécifié par le paramètre <code>image</code> aux coordonnées (<code>x</code>, <code>y</code>).</dd>
-</dl>
+- [`drawImage(image, x, y)`](/fr/docs/Web/API/CanvasRenderingContext2D/drawImage)
+  - : Dessine le `CanvasImageSource` spécifié par le paramètre `image` aux coordonnées (`x`, `y`).
 
-<div class="note">
-<p><strong>Note :</strong> Les images SVG doivent spécifier une largeur et une hauteur dans l'élément racine <code>&lt;svg&gt;</code>.</p>
-</div>
+> **Note :** Les images SVG doivent spécifier une largeur et une hauteur dans l'élément racine `<svg>`.
 
-<h3 id="example_a_simple_line_graph">Exemple : un graphique linéaire simple</h3>
+### Exemple : un graphique linéaire simple
 
-<p>Dans l'exemple suivant, nous utiliserons une image externe comme fond pour un petit graphique linéaire. L'utilisation d'images de fond peut rendre vos scripts considérablement plus légers puisqu'il n'est alors pas nécessaire de dessiner des arrières-plans élaborés. Une seule image est utilisée ici, on utilise donc le gestionnaire d'évènement <code>load</code> de l'objet image pour lancer les instructions de dessin. La méthode <code>drawImage()</code> place l'image de fond aux coordonnées (0,0), soit le coin supérieur gauche du canevas.</p>
+Dans l'exemple suivant, nous utiliserons une image externe comme fond pour un petit graphique linéaire. L'utilisation d'images de fond peut rendre vos scripts considérablement plus légers puisqu'il n'est alors pas nécessaire de dessiner des arrières-plans élaborés. Une seule image est utilisée ici, on utilise donc le gestionnaire d'évènement `load` de l'objet image pour lancer les instructions de dessin. La méthode `drawImage()` place l'image de fond aux coordonnées (0,0), soit le coin supérieur gauche du canevas.
 
-<pre class="brush: html hidden">
-&lt;html&gt;
-  &lt;body onload="draw();"&gt;
-    &lt;canvas id="canvas" width="180" height="150"&gt;&lt;/canvas&gt;
-  &lt;/body&gt;
-&lt;/html&gt;
-</pre>
+```html hidden
+<html>
+  <body onload="draw();">
+    <canvas id="canvas" width="180" height="150"></canvas>
+  </body>
+</html>
+```
 
-<pre class="brush: js">
+```js
 function draw() {
   console.log("tt");
   let ctx = document.getElementById('canvas').getContext('2d');
@@ -156,88 +146,82 @@ function draw() {
   };
   img.src = 'backdrop.png';
 }
-</pre>
+```
 
-<p>Le graphique résultant ressemble à ceci :</p>
+Le graphique résultant ressemble à ceci :
 
-<p>{{EmbedLiveSample("example_a_simple_line_graph", 220, 160, "canvas_backdrop.png")}}</p>
+{{EmbedLiveSample("example_a_simple_line_graph", 220, 160, "canvas_backdrop.png")}}
 
-<h2 id="scaling">Mise à l'échelle</h2>
+## Mise à l'échelle
 
-<p>La seconde variante de la méthode <code>drawImage()</code> ajoute deux paramètres supplémentaires et permet de placer des images redimensionnées sur le canevas.</p>
+La seconde variante de la méthode `drawImage()` ajoute deux paramètres supplémentaires et permet de placer des images redimensionnées sur le canevas.
 
-<dl>
-  <dt><a href="/fr/docs/Web/API/CanvasRenderingContext2D/drawImage"><code>drawImage(image, x, y, width, height)</code></a></dt>
-  <dd>Cette variante ajoute les paramètres <code>width</code> et <code>height</code> qui indiquent la taille à laquelle mettre à l'échelle l'image lorsqu'elle est dessinée sur le canevas.</dd>
-</dl>
+- [`drawImage(image, x, y, width, height)`](/fr/docs/Web/API/CanvasRenderingContext2D/drawImage)
+  - : Cette variante ajoute les paramètres `width` et `height` qui indiquent la taille à laquelle mettre à l'échelle l'image lorsqu'elle est dessinée sur le canevas.
 
-<h3 id="example_tiling_an_image">Exemple : mosaïque à partir d'une image</h3>
+### Exemple : mosaïque à partir d'une image
 
-<p>Dans cet exemple, nous utiliserons une image comme fond d'écran en la répétant plusieurs fois sur le canevas. Cette opération est réalisée simplement en faisant une boucle qui place l'image redimensionnée à différentes positions. Dans le code ci-dessous, la première boucle <code>for</code> s'occupe des lignes alors que la seconde gère les colonnes. L'image est redimensionnée à un tiers de sa taille originale, ce qui fait 50×38 pixels.</p>
+Dans cet exemple, nous utiliserons une image comme fond d'écran en la répétant plusieurs fois sur le canevas. Cette opération est réalisée simplement en faisant une boucle qui place l'image redimensionnée à différentes positions. Dans le code ci-dessous, la première boucle `for` s'occupe des lignes alors que la seconde gère les colonnes. L'image est redimensionnée à un tiers de sa taille originale, ce qui fait 50×38 pixels.
 
-<div class="note">
-<p><strong>Note :</strong> Les images peuvent devenir floues lorsqu'elles sont agrandies ou granuleuses si elles sont réduites. Il vaut mieux ne pas redimensionner une image contenant du texte devant rester lisible.</p>
-</div>
+> **Note :** Les images peuvent devenir floues lorsqu'elles sont agrandies ou granuleuses si elles sont réduites. Il vaut mieux ne pas redimensionner une image contenant du texte devant rester lisible.
 
-<pre class="brush: html hidden">
-&lt;html&gt;
- &lt;body onload="draw();"&gt;
-   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
- &lt;/body&gt;
-&lt;/html&gt;
-</pre>
+```html hidden
+<html>
+ <body onload="draw();">
+   <canvas id="canvas" width="150" height="150"></canvas>
+ </body>
+</html>
+```
 
-<pre class="brush: js">
+```js
 function draw() {
   let ctx = document.getElementById('canvas').getContext('2d');
   let img = new Image();
   img.onload = function() {
-    for (let i = 0; i &lt; 4; i++) {
-      for (let j = 0; j &lt; 3; j++) {
+    for (let i = 0; i < 4; i++) {
+      for (let j = 0; j < 3; j++) {
         ctx.drawImage(img, j * 50, i * 38, 50, 38);
       }
     }
   };
   img.src = 'rhino.jpg';
 }
-</pre>
+```
 
-<p>Le canevas résultant ressemble à ceci :</p>
+Le canevas résultant ressemble à ceci :
 
-<p>{{EmbedLiveSample("example_tiling_an_image", 160, 160, "canvas_scale_image.png")}}</p>
+{{EmbedLiveSample("example_tiling_an_image", 160, 160, "canvas_scale_image.png")}}
 
-<h2 id="slicing">Découpage</h2>
+## Découpage
 
-<p>La troisième et dernière variante de la méthode <code>drawImage()</code> possède huit nouveaux paramètres. On peut l'utiliser pour découper des parties d'une image source et les afficher sur le canevas.</p>
+La troisième et dernière variante de la méthode `drawImage()` possède huit nouveaux paramètres. On peut l'utiliser pour découper des parties d'une image source et les afficher sur le canevas.
 
-<dl>
- <dt><a href="/fr/docs/Web/API/CanvasRenderingContext2D/drawImage"><code>drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)</code></a></dt>
- <dd>Cette fonction prend la zone de l'<code>image</code> source spécifiée par le rectangle dont le coin en haut à gauche est (<code>sx</code>, <code>sy</code>) et dont la largeur et la hauteur sont <code>sWidth</code> et <code>sHeight</code> puis dessine cette portion de l'image dans le canevas en le plaçant sur le canevas (aux coordonnées <code>dx</code>, <code>dy</code>) et le redimensionne à la taille spécifiée par <code>dWidth</code> et <code>dHeight</code>.</dd>
-</dl>
+- [`drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)`](/fr/docs/Web/API/CanvasRenderingContext2D/drawImage)
+  - : Cette fonction prend la zone de l'`image` source spécifiée par le rectangle dont le coin en haut à gauche est (`sx`, `sy`) et dont la largeur et la hauteur sont `sWidth` et `sHeight` puis dessine cette portion de l'image dans le canevas en le plaçant sur le canevas (aux coordonnées `dx`, `dy`) et le redimensionne à la taille spécifiée par `dWidth` et `dHeight`.
 
-<p>Pour vraiment comprendre ce que cela fait, il peut être utile de regarder l'image qui suit. Les quatre premiers paramètres définissent l'emplacement et la taille du morceau de l'image source. Les quatre derniers paramètres définissent le rectangle dans lequel dessiner l'image sur le canevas de destination.</p>
+Pour vraiment comprendre ce que cela fait, il peut être utile de regarder l'image qui suit. Les quatre premiers paramètres définissent l'emplacement et la taille du morceau de l'image source. Les quatre derniers paramètres définissent le rectangle dans lequel dessiner l'image sur le canevas de destination.
 
-<img alt="Un schéma avec l'image source et le canevas destination qui illustre les rôles de chacun des paramètres." src="canvas_drawimage.jpg">
+![Un schéma avec l'image source et le canevas destination qui illustre les rôles de chacun des paramètres.](canvas_drawimage.jpg)
 
-<p>Le découpage peut être un outil utile pour réaliser des compositions. Vous pouvez disposer tous les éléments dans un seul fichier image et utiliser cette méthode pour composer un dessin complet. Par exemple, si vous voulez réaliser un graphique, vous pouvez utiliser une image PNG contenant tout le texte nécessaire dans un seul fichier et, selon vos données, changer l'échelle de votre graphique sans trop de difficultés. Un autre avantage est qu'il n'est pas nécessaire de charger chaque image individuellement.</p>
+Le découpage peut être un outil utile pour réaliser des compositions. Vous pouvez disposer tous les éléments dans un seul fichier image et utiliser cette méthode pour composer un dessin complet. Par exemple, si vous voulez réaliser un graphique, vous pouvez utiliser une image PNG contenant tout le texte nécessaire dans un seul fichier et, selon vos données, changer l'échelle de votre graphique sans trop de difficultés. Un autre avantage est qu'il n'est pas nécessaire de charger chaque image individuellement.
 
-<h3 id="example_framing_an_image">Exemple : encadrer une image</h3>
+### Exemple : encadrer une image
 
-<p>Dans cet exemple, nous utiliserons le même rhinocéros que plus haut, mais sa tête sera coupée et composée avec un cadre. L'image du cadre fournit une ombre portée qui a été enregistrée dans une image PNG 24 bits. Comme les images PNG 24 bits comportent un canal alpha complet de 8 bits, contrairement aux images GIF et PNG 8 bits, elle peut être placée sur n'importe quel fond sans avoir à se préoccuper de la couleur de transition.</p>
+Dans cet exemple, nous utiliserons le même rhinocéros que plus haut, mais sa tête sera coupée et composée avec un cadre. L'image du cadre fournit une ombre portée qui a été enregistrée dans une image PNG 24 bits. Comme les images PNG 24 bits comportent un canal alpha complet de 8 bits, contrairement aux images GIF et PNG 8 bits, elle peut être placée sur n'importe quel fond sans avoir à se préoccuper de la couleur de transition.
 
-<pre class="brush: html">
-&lt;html&gt;
- &lt;body onload="draw();"&gt;
-   &lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;
-   &lt;div style="display:none;"&gt;
-     &lt;img id="source" src="rhino.jpg" width="300" height="227"&gt;
-     &lt;img id="frame" src="canvas_picture_frame.png" width="132" height="150"&gt;
-   &lt;/div&gt;
- &lt;/body&gt;
-&lt;/html&gt;
-</pre>
+```html
+<html>
+ <body onload="draw();">
+   <canvas id="canvas" width="150" height="150"></canvas>
+   <div style="display:none;">
+     <img id="source" src="rhino.jpg" width="300" height="227">
+     <img id="frame" src="canvas_picture_frame.png" width="132" height="150">
+   </div>
+ </body>
+</html>
+```
 
-<pre class="brush: js">
+```js
 function draw() {
   let canvas = document.getElementById('canvas');
   let ctx = canvas.getContext('2d');
@@ -249,47 +233,47 @@ function draw() {
   // On dessine le cadre
   ctx.drawImage(document.getElementById('frame'), 0, 0);
 }
-</pre>
+```
 
-<p>Nous avons pris une approche différente pour charger les images cette fois. Au lieu de les charger en créant de nouveaux objets <a href="/fr/docs/Web/API/HTMLImageElement"><code>HTMLImageElement</code></a>, nous les avons incluses comme balises  <a href="/fr/docs/Web/HTML/Element/Img"><code>&lt;img&gt;</code></a> directement dans notre source HTML et avons récupéré les images depuis ceux-ci. Les images sont masquées via la propriété CSS <a href="/fr/docs/Web/CSS/display"><code>display</code></a> qui vaut <code>none</code>.</p>
+Nous avons pris une approche différente pour charger les images cette fois. Au lieu de les charger en créant de nouveaux objets [`HTMLImageElement`](/fr/docs/Web/API/HTMLImageElement), nous les avons incluses comme balises [`<img>`](/fr/docs/Web/HTML/Element/Img) directement dans notre source HTML et avons récupéré les images depuis ceux-ci. Les images sont masquées via la propriété CSS [`display`](/fr/docs/Web/CSS/display) qui vaut `none`.
 
-<p>{{EmbedLiveSample("example_framing_an_image", 160, 160, "canvas_drawimage2.jpg")}}</p>
+{{EmbedLiveSample("example_framing_an_image", 160, 160, "canvas_drawimage2.jpg")}}
 
-<p>Chaque <a href="/fr/docs/Web/HTML/Element/Img"><code>&lt;img&gt;</code></a> se voit attribuer un attribut <code>id</code>, ce qui facilite leur sélection en utilisant <a href="/fr/docs/Web/API/Document/getElementById"><code>document.getElementById()</code></a>. Nous utilisons <code>drawImage()</code> pour découper le rhinocéros de la première image et le mettre à l'échelle sur le canevas, puis dessiner le cadre par-dessus en utilisant un deuxième appel <code>drawImage()</code>.</p>
+Chaque [`<img>`](/fr/docs/Web/HTML/Element/Img) se voit attribuer un attribut `id`, ce qui facilite leur sélection en utilisant [`document.getElementById()`](/fr/docs/Web/API/Document/getElementById). Nous utilisons `drawImage()` pour découper le rhinocéros de la première image et le mettre à l'échelle sur le canevas, puis dessiner le cadre par-dessus en utilisant un deuxième appel `drawImage()`.
 
-<h2 id="art_gallery_example">Exemple d'une galerie d'art</h2>
+## Exemple d'une galerie d'art
 
-<p>Dans le dernier exemple de ce chapitre, nous présenterons une petite galerie d'art. Cette galerie est constituée d'un tableau contenant plusieurs images. Lorsque la page est chargée, un élément <a href="/fr/docs/Web/HTML/Element/canvas"><code>&lt;canvas&gt;</code></a> est inséré pour chaque image et un cadre est dessiné autour.</p>
+Dans le dernier exemple de ce chapitre, nous présenterons une petite galerie d'art. Cette galerie est constituée d'un tableau contenant plusieurs images. Lorsque la page est chargée, un élément [`<canvas>`](/fr/docs/Web/HTML/Element/canvas) est inséré pour chaque image et un cadre est dessiné autour.
 
-<p>Dans notre cas, toutes les images ont une largeur et une hauteur fixes, ainsi que le cadre qui sera dessiné autour. Le script pourrait être amélioré afin d'utiliser la largeur et la hauteur de l'image pour que le cadre s'adapte parfaitement à ses dimensions.</p>
+Dans notre cas, toutes les images ont une largeur et une hauteur fixes, ainsi que le cadre qui sera dessiné autour. Le script pourrait être amélioré afin d'utiliser la largeur et la hauteur de l'image pour que le cadre s'adapte parfaitement à ses dimensions.
 
-<p>Dans le code qui suit, nous parcourons le conteneur <a href="/fr/docs/Web/API/Document/images"><code>document.images</code></a> et nous ajoutons de nouveaux éléments canvas. La seule chose notable est probablement l'utilisation de la méthode <a href="/fr/docs/Web/API/Node/insertBefore"><code>Node.insertBefore</code></a>. <code>insertBefore()</code> est une méthode du nœud parent (une cellule de tableau) de l'élément (l'image) avant lequel on désire insérer le nouveau nœud (l'élément <code>canvas</code>).</p>
+Dans le code qui suit, nous parcourons le conteneur [`document.images`](/fr/docs/Web/API/Document/images) et nous ajoutons de nouveaux éléments canvas. La seule chose notable est probablement l'utilisation de la méthode [`Node.insertBefore`](/fr/docs/Web/API/Node/insertBefore). `insertBefore()` est une méthode du nœud parent (une cellule de tableau) de l'élément (l'image) avant lequel on désire insérer le nouveau nœud (l'élément `canvas`).
 
-<pre class="brush: html">
-&lt;html&gt;
-  &lt;body onload="draw();"&gt;
-    &lt;table&gt;
-    &lt;tr&gt;
-      &lt;td&gt;&lt;img src="gallery_1.jpg"&gt;&lt;/td&gt;
-      &lt;td&gt;&lt;img src="gallery_2.jpg"&gt;&lt;/td&gt;
-      &lt;td&gt;&lt;img src="gallery_3.jpg"&gt;&lt;/td&gt;
-      &lt;td&gt;&lt;img src="gallery_4.jpg"&gt;&lt;/td&gt;
-    &lt;/tr&gt;
-    &lt;tr&gt;
-      &lt;td&gt;&lt;img src="gallery_5.jpg"&gt;&lt;/td&gt;
-      &lt;td&gt;&lt;img src="gallery_6.jpg"&gt;&lt;/td&gt;
-      &lt;td&gt;&lt;img src="gallery_7.jpg"&gt;&lt;/td&gt;
-      &lt;td&gt;&lt;img src="gallery_8.jpg"&gt;&lt;/td&gt;
-    &lt;/tr&gt;
-    &lt;/table&gt;
-    &lt;img id="frame" src="canvas_picture_frame.png" width="132" height="150"&gt;
-  &lt;/body&gt;
-&lt;/html&gt;
-</pre>
+```html
+<html>
+  <body onload="draw();">
+    <table>
+    <tr>
+      <td><img src="gallery_1.jpg"></td>
+      <td><img src="gallery_2.jpg"></td>
+      <td><img src="gallery_3.jpg"></td>
+      <td><img src="gallery_4.jpg"></td>
+    </tr>
+    <tr>
+      <td><img src="gallery_5.jpg"></td>
+      <td><img src="gallery_6.jpg"></td>
+      <td><img src="gallery_7.jpg"></td>
+      <td><img src="gallery_8.jpg"></td>
+    </tr>
+    </table>
+    <img id="frame" src="canvas_picture_frame.png" width="132" height="150">
+  </body>
+</html>
+```
 
-<p>Voici la feuille de style CSS pour mettre en forme :</p>
+Voici la feuille de style CSS pour mettre en forme :
 
-<pre class="brush: css">
+```css
 body {
   background: 0 -100px repeat-x url(bg_gallery.png) #4F191A;
   margin: 10px;
@@ -306,15 +290,15 @@ table {
 td {
   padding: 15px;
 }
-</pre>
+```
 
-<p>Relions l'ensemble avec du JavaScript qui permettra de dessiner les images encadrées :</p>
+Relions l'ensemble avec du JavaScript qui permettra de dessiner les images encadrées :
 
-<pre class="brush: js">
+```js
 function draw() {
 
   // Boucle à travers toutes les images
-  for (let i = 0; i &lt; document.images.length; i++) {
+  for (let i = 0; i < document.images.length; i++) {
 
     // N'ajoute pas de canevas pour l'image du cadre
     if (document.images[i].getAttribute('id') != 'frame') {
@@ -337,19 +321,19 @@ function draw() {
     }
   }
 }
-</pre>
+```
 
-<p>{{EmbedLiveSample("art_gallery_example", 725, 400)}}</p>
+{{EmbedLiveSample("art_gallery_example", 725, 400)}}
 
-<h2 id="controlling_image_scaling_behavior">Contrôler la mise à l'échelle de l'image</h2>
+## Contrôler la mise à l'échelle de l'image
 
-<p>Comme mentionné précédemment, la mise à l'échelle des images peut entraîner des objets flous ou granuleux en raison du processus de redimensionnement. Vous pouvez utiliser la propriété  <a href="/fr/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled"><code>imageSmoothingEnabled</code></a>  du contexte de dessin pour contrôler l'utilisation des algorithmes de lissage d'image lors du redimensionnement des images dans votre contexte. Par défaut, cette propriété vaut <code>true</code>, ce qui signifie que les images seront lissées lors du redimensionnement. Cette fonctionnalité peut être désactivée ainsi :</p>
+Comme mentionné précédemment, la mise à l'échelle des images peut entraîner des objets flous ou granuleux en raison du processus de redimensionnement. Vous pouvez utiliser la propriété [`imageSmoothingEnabled`](/fr/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled) du contexte de dessin pour contrôler l'utilisation des algorithmes de lissage d'image lors du redimensionnement des images dans votre contexte. Par défaut, cette propriété vaut `true`, ce qui signifie que les images seront lissées lors du redimensionnement. Cette fonctionnalité peut être désactivée ainsi :
 
-<pre class="brush: js">
+```js
 ctx.mozImageSmoothingEnabled = false;
 ctx.webkitImageSmoothingEnabled = false;
 ctx.msImageSmoothingEnabled = false;
 ctx.imageSmoothingEnabled = false;
-</pre>
+```
 
-<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_text", "Web/API/Canvas_API/Tutorial/Transformations")}}</p>
+{{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_text", "Web/API/Canvas_API/Tutorial/Transformations")}}
diff --git a/files/fr/web/api/canvasgradient/addcolorstop/index.md b/files/fr/web/api/canvasgradient/addcolorstop/index.md
index f88d7413a9..7af56a60ec 100644
--- a/files/fr/web/api/canvasgradient/addcolorstop/index.md
+++ b/files/fr/web/api/canvasgradient/addcolorstop/index.md
@@ -9,38 +9,37 @@ tags:
   - Reference
 translation_of: Web/API/CanvasGradient/addColorStop
 ---
-<div>{{APIRef("Canvas API")}}</div>
+{{APIRef("Canvas API")}}
 
-<p>La méthode CanvasGradient.addColorStop () ajoute un nouvel arrêt, défini par un <code>décalage</code> et une <code>couleur</code>, au dégradé. Si le décalage n'est pas compris entre 0 et 1, une erreur INDEX_SIZE_ERR est générée, si la couleur ne peut pas être analysée en tant que {{cssxref ("&lt;color&gt;")}} CSS, une erreur SYNTAX_ERR est générée.</p>
+La méthode CanvasGradient.addColorStop () ajoute un nouvel arrêt, défini par un `décalage` et une `couleur`, au dégradé. Si le décalage n'est pas compris entre 0 et 1, une erreur INDEX_SIZE_ERR est générée, si la couleur ne peut pas être analysée en tant que {{cssxref ("&lt;color&gt;")}} CSS, une erreur SYNTAX_ERR est générée.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">void <var><em>gradient</em>.addColorStop(décalage, couleur);</var>
-</pre>
+    void gradient.addColorStop(décalage, couleur);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt>décalage</dt>
- <dd>Un nombre entre 0 et 1. Une erreur INDEX_SIZE_ERR est générée, si le nombre n'est pas dans cette plage.</dd>
- <dt>couleur</dt>
- <dd>Une {{cssxref ("&lt;color&gt;")}} CSS. Une erreur SYNTAX_ERR est générée, si la valeur ne peut pas être analysée en tant que valeur &lt;color&gt; CSS.</dd>
-</dl>
+- décalage
+  - : Un nombre entre 0 et 1. Une erreur INDEX_SIZE_ERR est générée, si le nombre n'est pas dans cette plage.
+- couleur
+  - : Une {{cssxref ("&lt;color&gt;")}} CSS. Une erreur SYNTAX_ERR est générée, si la valeur ne peut pas être analysée en tant que valeur \<color> CSS.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Utilisation_de_la_méthode_addColorStop">Utilisation de la méthode <code>addColorStop</code> </h3>
+### Utilisation de la méthode `addColorStop` 
 
-<p>Il s'agit seulement d'un simple fragment de code qui utilise la méthode <code>addColorStop</code> avec un objet {{domxref("CanvasGradient")}}.</p>
+Il s'agit seulement d'un simple fragment de code qui utilise la méthode `addColorStop` avec un objet {{domxref("CanvasGradient")}}.
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;canvas id="canevas"&gt;&lt;/canvas&gt;
-</pre>
+```html
+<canvas id="canevas"></canvas>
+```
 
-<h4 id="JavaScript">JavaScript</h4>
+#### JavaScript
 
-<pre class="brush: js">var canevas = document.getElementById('canevas');
+```js
+var canevas = document.getElementById('canevas');
 var ctx = canevas.getContext('2d');
 
 var degrade = ctx.createLinearGradient(0, 0, 200, 0);
@@ -48,26 +47,28 @@ degrade.addColorStop(0, 'green');
 degrade.addColorStop(1, 'white');
 ctx.fillStyle = degrade;
 ctx.fillRect(10, 10, 200, 100);
-</pre>
+```
 
-<p>Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct dans le canevas :</p>
+Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct dans le canevas :
 
-<h4 id="code_jouable">Code jouable</h4>
+#### Code jouable
 
-<pre class="brush: html hidden">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
-&lt;div class="playable-buttons"&gt;
-  &lt;input id="edit" type="button" value="Edit" /&gt;
-  &lt;input id="reset" type="button" value="Reset" /&gt;
-&lt;/div&gt;
-&lt;textarea id="code" class="playable-code"&gt;
+```html hidden
+<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code">
 var gradient = ctx.createLinearGradient(0,0,200,0);
 gradient.addColorStop(0,"green");
 gradient.addColorStop(1,"white");
 ctx.fillStyle = gradient;
-ctx.fillRect(10,10,200,100);&lt;/textarea&gt;
-</pre>
+ctx.fillRect(10,10,200,100);</textarea>
+```
 
-<pre class="brush: js hidden">var canvas = document.getElementById("canvas");
+```js hidden
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 var textarea = document.getElementById("code");
 var reset = document.getElementById("reset");
@@ -90,35 +91,22 @@ edit.addEventListener("click", function() {
 
 textarea.addEventListener("input", drawCanvas);
 window.addEventListener("load", drawCanvas);
-</pre>
-
-<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-canvasgradient-addcolorstop", "CanvasGradient.addColorStop")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.CanvasGradient.addColorStop")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>L'interface ladéfinissant, {{domxref("CanvasGradient")}}</li>
- <li>{{domxref("CanvasRenderingContext2D.createLinearGradient()")}}</li>
- <li>{{domxref("CanvasRenderingContext2D.createRadialGradient()")}}</li>
-</ul>
+```
+
+{{ EmbedLiveSample('code_jouable', 700, 360) }}
+
+## Spécifications
+
+| Spécification                                                                                                                                    | Statut                           | Commentaire |
+| ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- |
+| {{SpecName('HTML WHATWG', "scripting.html#dom-canvasgradient-addcolorstop", "CanvasGradient.addColorStop")}} | {{Spec2('HTML WHATWG')}} |             |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.CanvasGradient.addColorStop")}}
+
+## Voir aussi
+
+- L'interface ladéfinissant, {{domxref("CanvasGradient")}}
+- {{domxref("CanvasRenderingContext2D.createLinearGradient()")}}
+- {{domxref("CanvasRenderingContext2D.createRadialGradient()")}}
diff --git a/files/fr/web/api/canvasgradient/index.md b/files/fr/web/api/canvasgradient/index.md
index c3422b011a..be3e32d89c 100644
--- a/files/fr/web/api/canvasgradient/index.md
+++ b/files/fr/web/api/canvasgradient/index.md
@@ -10,49 +10,32 @@ tags:
   - Reference
 translation_of: Web/API/CanvasGradient
 ---
-<div>{{APIRef("Canvas API")}}</div>
+{{APIRef("Canvas API")}}
 
-<p>L'interface <code><strong>CanvasGradient</strong></code>  représente un objet opaque décrivant un dégradé. Il est retourné par les méthodes {{domxref("CanvasRenderingContext2D.createLinearGradient()")}} ou {{domxref("CanvasRenderingContext2D.createRadialGradient()")}}.</p>
+L'interface **`CanvasGradient`**  représente un objet opaque décrivant un dégradé. Il est retourné par les méthodes {{domxref("CanvasRenderingContext2D.createLinearGradient()")}} ou {{domxref("CanvasRenderingContext2D.createRadialGradient()")}}.
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<p><em>Représentant un objet opaque, il n'y a aucune propriété exposée.</em></p>
+_Représentant un objet opaque, il n'y a aucune propriété exposée._
 
-<h2 id="Méthodes">Méthodes</h2>
+## Méthodes
 
-<p><em>Il n'y a pas de méthode héritée.</em></p>
+_Il n'y a pas de méthode héritée._
 
-<dl>
- <dt>{{domxref("CanvasGradient.addColorStop()")}}</dt>
- <dd>Ajoute un nouveau point d'arrêt, défini par un <code>décalage</code> et une <code>couleur</code>. Si le décalage n'est pas compris entre 0 et 1, une <code>INDEX_SIZE_ERR</code> est générée ; si la couleur ne peut être analysée comme une {{cssxref("&lt;color&gt;")}} CSS,  une <code>SYNTAX_ERR</code> est générée.</dd>
-</dl>
+- {{domxref("CanvasGradient.addColorStop()")}}
+  - : Ajoute un nouveau point d'arrêt, défini par un `décalage` et une `couleur`. Si le décalage n'est pas compris entre 0 et 1, une `INDEX_SIZE_ERR` est générée ; si la couleur ne peut être analysée comme une {{cssxref("&lt;color&gt;")}} CSS,  une `SYNTAX_ERR` est générée.
 
-<h2 id="Spécifications">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('HTML WHATWG', "the-canvas-element.html#canvasgradient", "CanvasGradient")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                        | Statut                           | Commentaire |
+| -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- |
+| {{SpecName('HTML WHATWG', "the-canvas-element.html#canvasgradient", "CanvasGradient")}} | {{Spec2('HTML WHATWG')}} |             |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.CanvasGradient")}}</p>
+{{Compat("api.CanvasGradient")}}
 
-<h2 id="Voir_également">Voir également</h2>
+## Voir également
 
-<ul>
- <li>Créateur dans  {{domxref("CanvasRenderingContext2D")}}.</li>
- <li>L'élément {{HTMLElement("canvas")}} et son interface associée {{domxref("HTMLCanvasElement")}}.</li>
-</ul>
+- Créateur dans  {{domxref("CanvasRenderingContext2D")}}.
+- L'élément {{HTMLElement("canvas")}} et son interface associée {{domxref("HTMLCanvasElement")}}.
diff --git a/files/fr/web/api/canvasrenderingcontext2d/arc/index.md b/files/fr/web/api/canvasrenderingcontext2d/arc/index.md
index d51cb083df..0656bd50da 100644
--- a/files/fr/web/api/canvasrenderingcontext2d/arc/index.md
+++ b/files/fr/web/api/canvasrenderingcontext2d/arc/index.md
@@ -8,67 +8,70 @@ tags:
   - Reference
 translation_of: Web/API/CanvasRenderingContext2D/arc
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}
 
-<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.arc()</code></strong> de l'API Canvas 2D permet d'ajouter un arc de cercle  au tracé, en le centrant aux positions <em>(x, y)</em> et avec un rayon <em>r</em> qui démarre à <em>angleDépart</em> et qui finit à <em>angleFin</em>, dans la direction de <em>sensAntiHoraire </em>(par défaut en sens horaire).</p>
+La méthode **`CanvasRenderingContext2D`\*\***`.arc()`\*_ de l'API Canvas 2D permet d'ajouter un arc de cercle  au tracé, en le centrant aux positions _(x, y)* et avec un rayon *r* qui démarre à *angleDépart* et qui finit à *angleFin*, dans la direction de *sensAntiHoraire\* (par défaut en sens horaire).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">void <var><em>ctx</em>.arc(x, y, rayon, angleDépart, angleFin, sensAntiHoraire);</var>
-</pre>
+    void ctx.arc(x, y, rayon, angleDépart, angleFin, sensAntiHoraire);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>x</code></dt>
- <dd>La position en x du centre de l'arc.</dd>
- <dt><code>y</code></dt>
- <dd>La position en y du centre de l'arc.</dd>
- <dt><code>radius</code><em> (rayon)</em></dt>
- <dd>Le rayon de l'arc.</dd>
- <dt><code>startAngle</code> <em>(angle départ)</em></dt>
- <dd>La valeur de l'angle avec laquelle démarre l'arc de cercle, mesurée dans le sens horaire à partir de l'axe x positif et exprimé en radians.</dd>
- <dt><code>endAngle</code> <em>(angle fin)</em></dt>
- <dd>La valeur de l'angle avec laquelle se finit l'arc de cercle, mesurée dans le sens horaire à partir de l'axe x positif et exprimé en radians.</dd>
- <dt><code>anticlockwise</code><em> (sens anti-horaire)</em> {{optional_inline}}</dt>
- <dd>Un {{jsxref("Booléen")}} facultatif qui, si à <code>true</code><em>(vrai),</em> indique que l'arc sera dessiné dans le sens inverse des aiguilles d'une montre entre les deux angles. Par défaut, la valeur est le sens des aiguilles d'une montre.</dd>
-</dl>
+- `x`
+  - : La position en x du centre de l'arc.
+- `y`
+  - : La position en y du centre de l'arc.
+- `radius` _(rayon)_
+  - : Le rayon de l'arc.
+- `startAngle` _(angle départ)_
+  - : La valeur de l'angle avec laquelle démarre l'arc de cercle, mesurée dans le sens horaire à partir de l'axe x positif et exprimé en radians.
+- `endAngle` _(angle fin)_
+  - : La valeur de l'angle avec laquelle se finit l'arc de cercle, mesurée dans le sens horaire à partir de l'axe x positif et exprimé en radians.
+- `anticlockwise` _(sens anti-horaire)_ {{optional_inline}}
+  - : Un {{jsxref("Booléen")}} facultatif qui, si à `true`_(vrai),_ indique que l'arc sera dessiné dans le sens inverse des aiguilles d'une montre entre les deux angles. Par défaut, la valeur est le sens des aiguilles d'une montre.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Using_the_arc_method">En utilisant la méthode <code>arc</code> </h3>
+### En utilisant la méthode `arc` 
 
-<p>Voici un code simple permettant de dessiner un cercle .</p>
+Voici un code simple permettant de dessiner un cercle .
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html line-numbers">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;</pre>
+```html
+<canvas id="canvas"></canvas>
+```
 
-<h4 id="JavaScript">JavaScript</h4>
+#### JavaScript
 
-<pre class="brush: js">var canvas = document.getElementById('canvas');
+```js
+var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
 
 ctx.beginPath();
 ctx.arc(75, 75, 50, 0, 2 * Math.PI);
-ctx.stroke();</pre>
+ctx.stroke();
+```
 
-<p>Modifiez le code ci-dessous et voyez les changements en direct sur le canvas :</p>
+Modifiez le code ci-dessous et voyez les changements en direct sur le canvas :
 
-<h4 id="code_jouable">Code jouable</h4>
+#### Code jouable
 
-<pre class="brush: html hidden">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
-&lt;div class="playable-buttons"&gt;
-  &lt;input id="edit" type="button" value="Edit" /&gt;
-  &lt;input id="reset" type="button" value="Reset" /&gt;
-&lt;/div&gt;
-&lt;textarea id="code" class="playable-code"&gt;
+```html hidden
+<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code">
 ctx.beginPath();
 ctx.arc(50, 50, 50, 0, 2 * Math.PI, false);
-ctx.stroke();&lt;/textarea&gt;
-</pre>
+ctx.stroke();</textarea>
+```
 
-<pre class="brush: js">var canvas = document.getElementById("canvas");
+```js
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 var textarea = document.getElementById("code");
 var reset = document.getElementById("reset");
@@ -91,25 +94,25 @@ edit.addEventListener("click", function() {
 
 textarea.addEventListener("input", drawCanvas);
 window.addEventListener("load", drawCanvas);
-</pre>
-</div>
+```
 
-<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p>
+{{ EmbedLiveSample('Playable_code', 700, 360) }}
 
-<h3 id="Different_shapes_demonstrated">Exemple avec différentes formes</h3>
+### Exemple avec différentes formes
 
-<p>Dans cet exemple, plusieurs formes différentes sont dessinées, afin de montrer les possibilités offertes par <code>arc()</code>.</p>
+Dans cet exemple, plusieurs formes différentes sont dessinées, afin de montrer les possibilités offertes par `arc()`.
 
+```html hidden
+<canvas id="canvas" width="150" height="200"></canvas>
+```
 
-<pre class="brush: html hidden">&lt;canvas id="canvas" width="150" height="200"&gt;&lt;/canvas&gt;
-</pre>
-
-<pre class="brush: js">var canvas = document.getElementById('canvas');
+```js
+var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
 
 // Draw shapes
-for (var i = 0; i &lt; 4; i++) {
-  for(var j = 0; j &lt; 3; j++) {
+for (var i = 0; i < 4; i++) {
+  for(var j = 0; j < 3; j++) {
     ctx.beginPath();
     var x              = 25 + j * 50;               // x coordinate
     var y              = 25 + i * 50;               // y coordinate
@@ -120,48 +123,34 @@ for (var i = 0; i &lt; 4; i++) {
 
     ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
 
-    if (i &gt; 1) {
+    if (i > 1) {
       ctx.fill();
     } else {
       ctx.stroke();
     }
   }
-}</pre>
+}
+```
 
-<p>{{ EmbedLiveSample('Different_shapes_demonstrated', 160, 210, "canvas_arc.png") }}</p>
+{{ EmbedLiveSample('Different_shapes_demonstrated', 160, 210, "canvas_arc.png") }}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-arc", "CanvasRenderingContext2D.arc")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                    | Statut                           | Commentaire |
+| -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- |
+| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-arc", "CanvasRenderingContext2D.arc")}} | {{Spec2('HTML WHATWG')}} |             |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.CanvasRenderingContext2D.arc")}}</p>
+{{Compat("api.CanvasRenderingContext2D.arc")}}
 
-<h2 id="Notes_spécifiques_à_Gecko">Notes spécifiques à Gecko</h2>
+## Notes spécifiques à Gecko
 
-<p>Avec Gecko 2.0 {{geckoRelease("2.0")}}:</p>
+Avec Gecko 2.0 {{geckoRelease("2.0")}}:
 
-<ul>
- <li>Le paramètre <code>anticlockwise</code> est optionnel,</li>
- <li>Une valeur négative pour le rayon lance une erreur de type {{domxref("DOMError", "IndexSizeError")}} ( "L'index ou la taille est négatif ou supérieur à la valeur autorisée" ).</li>
-</ul>
+- Le paramètre `anticlockwise` est optionnel,
+- Une valeur négative pour le rayon lance une erreur de type {{domxref("DOMError", "IndexSizeError")}} ( "L'index ou la taille est négatif ou supérieur à la valeur autorisée" ).
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>L'Interface JavaScript à laquelle appartient la méthode : {{domxref("CanvasRenderingContext2D")}}</li>
-</ul>
+- L'Interface JavaScript à laquelle appartient la méthode : {{domxref("CanvasRenderingContext2D")}}
diff --git a/files/fr/web/api/canvasrenderingcontext2d/beginpath/index.md b/files/fr/web/api/canvasrenderingcontext2d/beginpath/index.md
index e59e5be4a4..b663d63dd6 100644
--- a/files/fr/web/api/canvasrenderingcontext2d/beginpath/index.md
+++ b/files/fr/web/api/canvasrenderingcontext2d/beginpath/index.md
@@ -7,29 +7,30 @@ tags:
   - CanvasRenderingContext2D
 translation_of: Web/API/CanvasRenderingContext2D/beginPath
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}
 
-<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.beginPath()</code></strong> de l'API Canvas 2D permet de commencer un nouveau chemin<em> e</em>n vidant la liste des sous-chemins. Appelez cette méthode quand vous voulez créer un nouveau chemin.</p>
+La méthode **`CanvasRenderingContext2D`\*\***`.beginPath()`\** de l'API Canvas 2D permet de commencer un nouveau chemin *e\*n vidant la liste des sous-chemins. Appelez cette méthode quand vous voulez créer un nouveau chemin.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">void <var><em>ctx</em>.beginPath();</var>
-</pre>
+    void ctx.beginPath();
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Utiliser_la_méthode_beginPath">Utiliser la méthode <code>beginPath</code></h3>
+### Utiliser la méthode `beginPath`
 
-<p>Ceci est un simple snippet de code qui utilise la méthode <code>beginPath</code>.</p>
+Ceci est un simple snippet de code qui utilise la méthode `beginPath`.
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
-</pre>
+```html
+<canvas id="canvas"></canvas>
+```
 
-<h4 id="JavaScript">JavaScript</h4>
+#### JavaScript
 
-<pre class="brush: js">var canvas = document.getElementById('canvas');
+```js
+var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
 
 // Premier chemin
@@ -45,18 +46,19 @@ ctx.strokeStyle = 'green';
 ctx.moveTo(20, 20);
 ctx.lineTo(120, 120);
 ctx.stroke();
-</pre>
+```
 
-<p>Éditez le code ci-dessous pour voir vos changements directemment apportés au canvas:</p>
+Éditez le code ci-dessous pour voir vos changements directemment apportés au canvas:
 
-<h4 id="code_jouable">Code jouable</h4>
+#### Code jouable
 
-<pre class="brush: html hidden">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
-&lt;div class="playable-buttons"&gt;
-  &lt;input id="edit" type="button" value="Edit" /&gt;
-  &lt;input id="reset" type="button" value="Reset" /&gt;
-&lt;/div&gt;
-&lt;textarea id="code" class="playable-code" style="height:200px"&gt;
+```html hidden
+<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code" style="height:200px">
 // First path
 ctx.beginPath();
 ctx.strokeStyle = 'blue';
@@ -69,10 +71,11 @@ ctx.beginPath();
 ctx.strokeStyle = 'green';
 ctx.moveTo(20,20);
 ctx.lineTo(120, 120);
-ctx.stroke();&lt;/textarea&gt;
-</pre>
+ctx.stroke();</textarea>
+```
 
-<pre class="brush: js hidden">var canvas = document.getElementById("canvas");
+```js hidden
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 var textarea = document.getElementById("code");
 var reset = document.getElementById("reset");
@@ -95,34 +98,21 @@ edit.addEventListener("click", function() {
 
 textarea.addEventListener("input", drawCanvas);
 window.addEventListener("load", drawCanvas);
-</pre>
+```
 
-<p>{{ EmbedLiveSample('code_jouable', 700, 460) }}</p>
+{{ EmbedLiveSample('code_jouable', 700, 460) }}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-beginpath", "CanvasRenderingContext2D.beginPath")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Specification                                                                                                                                    | Status                           | Comment |
+| ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------- |
+| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-beginpath", "CanvasRenderingContext2D.beginPath")}} | {{Spec2('HTML WHATWG')}} |         |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.CanvasRenderingContext2D.beginPath")}}</p>
+{{Compat("api.CanvasRenderingContext2D.beginPath")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>L'interface qui définit cette méthode, {{domxref("CanvasRenderingContext2D")}}</li>
- <li>{{domxref("CanvasRenderingContext2D.closePath()")}}</li>
-</ul>
+- L'interface qui définit cette méthode, {{domxref("CanvasRenderingContext2D")}}
+- {{domxref("CanvasRenderingContext2D.closePath()")}}
diff --git a/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.md b/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.md
index f5e140589e..eb9c087775 100644
--- a/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.md
+++ b/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.md
@@ -4,47 +4,46 @@ slug: Web/API/CanvasRenderingContext2D/bezierCurveTo
 translation_of: Web/API/CanvasRenderingContext2D/bezierCurveTo
 browser-compat: api.CanvasRenderingContext2D.bezierCurveTo
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}
 
-<p>La méthode <code><strong>CanvasRenderingContext2D.bezierCurveTo()</strong></code> de l'API Canvas 2D ajoute une <a href="https://fr.wikipedia.org/wiki/Courbe_de_B%C3%A9zier">courbe de Bézier</a> cubique au sous-chemin courant. Elle requiert trois points : les deux premiers sont des points de contrôle et le troisième est le point d'arrivée. Le point de départ est le dernier point dans le chemin courant, qui peut être changé au moyen de la méthode <a href="/fr/docs/Web/API/CanvasRenderingContext2D/moveTo"><code>moveTo()</code></a> avant de créer une courbe de Bézier.</p>
+La méthode **`CanvasRenderingContext2D.bezierCurveTo()`** de l'API Canvas 2D ajoute une [courbe de Bézier](https://fr.wikipedia.org/wiki/Courbe_de_B%C3%A9zier) cubique au sous-chemin courant. Elle requiert trois points : les deux premiers sont des points de contrôle et le troisième est le point d'arrivée. Le point de départ est le dernier point dans le chemin courant, qui peut être changé au moyen de la méthode [`moveTo()`](/fr/docs/Web/API/CanvasRenderingContext2D/moveTo) avant de créer une courbe de Bézier.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">void ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
-</pre>
+```js
+void ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
+```
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>cp1x</code></dt>
- <dd>L'abscisse du premier point de contrôle.</dd>
- <dt><code>cp1y</code></dt>
- <dd>L'ordonnée du premier point de contrôle.</dd>
- <dt><code>cp2x</code></dt>
- <dd>L'abscisse du second point de contrôle.</dd>
- <dt><code>cp2y</code></dt>
- <dd>L'ordonnée du second point de contrôle.</dd>
- <dt><code>x</code></dt>
- <dd>L'abscisse du point d'arrivée.</dd>
- <dt><code>y</code></dt>
- <dd>L'ordonnée du point d'arrivée.</dd>
-</dl>
+- `cp1x`
+  - : L'abscisse du premier point de contrôle.
+- `cp1y`
+  - : L'ordonnée du premier point de contrôle.
+- `cp2x`
+  - : L'abscisse du second point de contrôle.
+- `cp2y`
+  - : L'ordonnée du second point de contrôle.
+- `x`
+  - : L'abscisse du point d'arrivée.
+- `y`
+  - : L'ordonnée du point d'arrivée.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="how_beziercurveto_works">Fonctionnement de bezierCurveTo()</h3>
+### Fonctionnement de bezierCurveTo()
 
-<p>Cet exemple montre comment une courbe cubique de Bézier est dessinée.</p>
+Cet exemple montre comment une courbe cubique de Bézier est dessinée.
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">
-&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
-</pre>
+```html
+<canvas id="canvas"></canvas>
+```
 
-<h4 id="JavaScript">JavaScript</h4>
+#### JavaScript
 
-<pre class="brush: js;">
+```js
 // Define canvas and context
 const canvas = document.getElementById('canvas');
 const ctx = canvas.getContext('2d');
@@ -74,52 +73,51 @@ ctx.beginPath();
 ctx.arc(cp1.x, cp1.y, 5, 0, 2 * Math.PI);  // Point de contrôle n°1
 ctx.arc(cp2.x, cp2.y, 5, 0, 2 * Math.PI);  // Point de contrôle n°2
 ctx.fill();
-</pre>
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>Dans cet exemple, les points de contrôle sont rouges et les points de départ et d'arrivée sont bleus.</p>
+Dans cet exemple, les points de contrôle sont rouges et les points de départ et d'arrivée sont bleus.
 
-<p>{{EmbedLiveSample('how_beziercurveto_works', 315, 165)}}</p>
+{{EmbedLiveSample('how_beziercurveto_works', 315, 165)}}
 
-<h3 id="a_simple_bezier_curve">Une courbe cubique de Bézier simple</h3>
+### Une courbe cubique de Bézier simple
 
-<p>Cet exemple dessine une courbe cubique de Bézier simple en utilisant <code>bezierCurveTo()</code>.</p>
+Cet exemple dessine une courbe cubique de Bézier simple en utilisant `bezierCurveTo()`.
 
-<h4 id="HTML_2">HTML</h4>
+#### HTML
 
-<pre class="brush: html">
-&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
-</pre>
+```html
+<canvas id="canvas"></canvas>
+```
 
-<h4 id="JavaScript_2">JavaScript</h4>
+#### JavaScript
 
-<p>La courbe débute au point spécifié par <code>moveTo()</code>&nbsp;: (30, 30). Le premier point de contrôle est placé à (120, 160), le second à (180, 10) et le point d'arrivée à (220, 140).</p>
+La courbe débute au point spécifié par `moveTo()` : (30, 30). Le premier point de contrôle est placé à (120, 160), le second à (180, 10) et le point d'arrivée à (220, 140).
 
-<pre class="brush: js">
+```js
 const canvas = document.getElementById("canvas");
 const contexte2D = canvas.getContext("2d");
 
 contexte2D.beginPath();
 contexte2D.moveTo(30, 30);
 contexte2D.bezierCurveTo(120,160, 180,10, 220,140);
-contexte2D.stroke();</pre>
+contexte2D.stroke();
+```
 
-<h4 id="result_2">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample('a_simple_bezier_curve', 700, 180)}}</p>
+{{EmbedLiveSample('a_simple_bezier_curve', 700, 180)}}
 
-<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'interface définissant cette méthode : <a href="/fr/docs/Web/API/CanvasRenderingContext2D"><code>CanvasRenderingContext2D</code></a></li>
- <li><a href="https://fr.wikipedia.org/wiki/Courbe_de_B%C3%A9zier">L'article Wikipédia sur les courbes de Bézier</a></li>
-</ul>
+- L'interface définissant cette méthode : [`CanvasRenderingContext2D`](/fr/docs/Web/API/CanvasRenderingContext2D)
+- [L'article Wikipédia sur les courbes de Bézier](https://fr.wikipedia.org/wiki/Courbe_de_B%C3%A9zier)
diff --git a/files/fr/web/api/canvasrenderingcontext2d/canvas/index.md b/files/fr/web/api/canvasrenderingcontext2d/canvas/index.md
index c548b4ed9e..c537047361 100644
--- a/files/fr/web/api/canvasrenderingcontext2d/canvas/index.md
+++ b/files/fr/web/api/canvasrenderingcontext2d/canvas/index.md
@@ -9,51 +9,40 @@ tags:
   - Reference
 translation_of: Web/API/CanvasRenderingContext2D/canvas
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}
 
-<p>La propriété <code><strong>CanvasRenderingContext2D.canvas</strong></code> est une référence à l'objet {{domxref("HTMLCanvasElement")}} qui est associé au contexte. Il peut être {{jsxref("null")}} s'il n'est pas associé à un élément {{HTMLElement("canvas")}}.</p>
+La propriété **`CanvasRenderingContext2D.canvas`** est une référence à l'objet {{domxref("HTMLCanvasElement")}} qui est associé au contexte. Il peut être {{jsxref("null")}} s'il n'est pas associé à un élément {{HTMLElement("canvas")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var><em>ctx</em></var>.canvas;</pre>
+    ctx.canvas;
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Soit cet élément {{HTMLElement("canvas")}}:</p>
+Soit cet élément {{HTMLElement("canvas")}}:
 
-<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
-</pre>
+```html
+<canvas id="canvas"></canvas>
+```
 
-<p>Vous pouvez obtenir la référence à l'élément <code>canvas</code> grâce à <code>CanvasRenderingContext2D</code> en utilisant la propriété <code>canvas</code> :</p>
+Vous pouvez obtenir la référence à l'élément `canvas` grâce à `CanvasRenderingContext2D` en utilisant la propriété `canvas` :
 
-<pre class="brush: js">var canvas = document.getElementById("canvas");
+```js
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 ctx.canvas // HTMLCanvasElement
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-canvas", "CanvasRenderingContext2D.canvas")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.CanvasRenderingContext2D.canvas")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("CanvasRenderingContext2D")}}</li>
-</ul>
+```
+
+## Spécifications
+
+| Spécification                                                                                                                            | Statut                           | Commentaire |
+| ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- |
+| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-canvas", "CanvasRenderingContext2D.canvas")}} | {{Spec2('HTML WHATWG')}} |             |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.CanvasRenderingContext2D.canvas")}}
+
+## Voir aussi
+
+- {{domxref("CanvasRenderingContext2D")}}
diff --git a/files/fr/web/api/canvasrenderingcontext2d/clearrect/index.md b/files/fr/web/api/canvasrenderingcontext2d/clearrect/index.md
index 7bf854557e..f11c76ec20 100644
--- a/files/fr/web/api/canvasrenderingcontext2d/clearrect/index.md
+++ b/files/fr/web/api/canvasrenderingcontext2d/clearrect/index.md
@@ -9,46 +9,45 @@ tags:
   - Reference
 translation_of: Web/API/CanvasRenderingContext2D/clearRect
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}
 
-<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.clearRect()</code></strong> de l'API 2D des Canvas met en noir transparent tous les pixels dans le rectangle défini par le point de départ de coordonnées <em>(x, y)</em> et par les tailles <em>(largeur, hauteur)</em>, supprimant tout contenu précédemment dessiné.</p>
+La méthode **`CanvasRenderingContext2D`\*\***`.clearRect()`\*_ de l'API 2D des Canvas met en noir transparent tous les pixels dans le rectangle défini par le point de départ de coordonnées _(x, y)_ et par les tailles _(largeur, hauteur)\*, supprimant tout contenu précédemment dessiné.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">void <var><em>ctx</em>.clearRect(x, y, largeur, hauteur);</var>
-</pre>
+    void ctx.clearRect(x, y, largeur, hauteur);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>x</code></dt>
- <dd>La coordonnée sur l'axe des <em>x</em> du point de départ du rectangle.</dd>
- <dt><code>y</code></dt>
- <dd>La coordonnée sur l'axe des <em>y</em> du point de départ du rectangle.</dd>
- <dt><code>largeur</code></dt>
- <dd>La largeur du rectangle.</dd>
- <dt><code>hauteur</code></dt>
- <dd>La hauteur de rectangle.</dd>
-</dl>
+- `x`
+  - : La coordonnée sur l'axe des *x* du point de départ du rectangle.
+- `y`
+  - : La coordonnée sur l'axe des *y* du point de départ du rectangle.
+- `largeur`
+  - : La largeur du rectangle.
+- `hauteur`
+  - : La hauteur de rectangle.
 
-<h2 id="Notes_d'utilisation">Notes d'utilisation</h2>
+## Notes d'utilisation
 
-<p>Un problème classique avec <code>clearRect</code> est qu'il peut apparaître comme ne fonctionnant pas si l'on n'<a href="/fr/docs/Tutoriel_canvas/Formes_g%C3%A9om%C3%A9triques#Drawing_paths">utilise pas les trajets de façon appropriée</a>. N'oubliez pas d'appeler {{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}} avant de commencer à dessiner une nouvelle image après avoir appelé <code>clearRect</code>.</p>
+Un problème classique avec `clearRect` est qu'il peut apparaître comme ne fonctionnant pas si l'on n'[utilise pas les trajets de façon appropriée](/fr/docs/Tutoriel_canvas/Formes_g%C3%A9om%C3%A9triques#Drawing_paths). N'oubliez pas d'appeler {{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}} avant de commencer à dessiner une nouvelle image après avoir appelé `clearRect`.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Utilisation_de_la_méthode_clearRect">Utilisation de la méthode <code>clearRect</code></h3>
+### Utilisation de la méthode `clearRect`
 
-<p>Ceci est seulement un fragment de code simple qui utilise la méthode <code>clearRect</code>.</p>
+Ceci est seulement un fragment de code simple qui utilise la méthode `clearRect`.
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
-</pre>
+```html
+<canvas id="canvas"></canvas>
+```
 
-<h4 id="JavaScript">JavaScript</h4>
+#### JavaScript
 
-<pre class="brush: js">var canevas = document.getElementById("canvas");
+```js
+var canevas = document.getElementById("canvas");
 var ctx = canevas.getContext("2d");
 
 ctx.beginPath();
@@ -62,18 +61,19 @@ ctx.clearRect(10, 10, 100, 100);
 
 // effacer le canevas entièrement
 // ctx.clearRect(0, 0, canvas.width, canvas.height);
-</pre>
+```
 
-<p>Modifiez le code suivant et voyez vos changements en direct dans le canevas :</p>
+Modifiez le code suivant et voyez vos changements en direct dans le canevas :
 
-<h4 id="code_jouable">Code jouable</h4>
+#### Code jouable
 
-<pre class="brush: html hidden">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
-&lt;div class="playable-buttons"&gt;
-  &lt;input id="edit" type="button" value="Edit" /&gt;
-  &lt;input id="reset" type="button" value="Reset" /&gt;
-&lt;/div&gt;
-&lt;textarea id="code" class="playable-code" style="height:140px;"&gt;
+```html hidden
+<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code" style="height:140px;">
 ctx.beginPath();
 ctx.moveTo(20,20);
 ctx.lineTo(200,20);
@@ -81,10 +81,11 @@ ctx.lineTo(120,120);
 ctx.closePath(); // dessine la dernière ligne du triangle
 ctx.stroke();
 
-ctx.clearRect(10, 10, 100, 100);&lt;/textarea&gt;
-</pre>
+ctx.clearRect(10, 10, 100, 100);</textarea>
+```
 
-<pre class="brush: js hidden">var canvas = document.getElementById("canvas");
+```js hidden
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 var textarea = document.getElementById("code");
 var reset = document.getElementById("reset");
@@ -107,35 +108,22 @@ edit.addEventListener("click", function() {
 
 textarea.addEventListener("input", drawCanvas);
 window.addEventListener("load", drawCanvas);
-</pre>
-
-<p>{{ EmbedLiveSample('code_jouable', 700, 400) }}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-clearrect", "CanvasRenderingContext2D.clearRect")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.CanvasRenderingContext2D.clearRect")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li>
- <li>{{domxref("CanvasRenderingContext2D.fillRect()")}}</li>
- <li>{{domxref("CanvasRenderingContext2D.strokeRect()")}}</li>
-</ul>
+```
+
+{{ EmbedLiveSample('code_jouable', 700, 400) }}
+
+## Spécifications
+
+| Spécification                                                                                                                                    | Statut                           | Commentaire |
+| ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- |
+| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-clearrect", "CanvasRenderingContext2D.clearRect")}} | {{Spec2('HTML WHATWG')}} |             |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.CanvasRenderingContext2D.clearRect")}}
+
+## Voir aussi
+
+- L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}
+- {{domxref("CanvasRenderingContext2D.fillRect()")}}
+- {{domxref("CanvasRenderingContext2D.strokeRect()")}}
diff --git a/files/fr/web/api/canvasrenderingcontext2d/closepath/index.md b/files/fr/web/api/canvasrenderingcontext2d/closepath/index.md
index ee83dd8db5..73798baafa 100644
--- a/files/fr/web/api/canvasrenderingcontext2d/closepath/index.md
+++ b/files/fr/web/api/canvasrenderingcontext2d/closepath/index.md
@@ -5,29 +5,30 @@ tags:
   - Méthode
 translation_of: Web/API/CanvasRenderingContext2D/closePath
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}
 
-<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.closePath()</code></strong> de l'API Canvas 2D provoque le retour du stylo au point de départ du sous-traçé courant. Il le fait en ajoutant une ligne droite entre le point courant et le point rejoint. Si la figure a déjà été fermée ou n'est constituée que d'un seul point, cette méthode ne provoque rien.</p>
+La méthode **`CanvasRenderingContext2D`\*\***`.closePath()`\*\* de l'API Canvas 2D provoque le retour du stylo au point de départ du sous-traçé courant. Il le fait en ajoutant une ligne droite entre le point courant et le point rejoint. Si la figure a déjà été fermée ou n'est constituée que d'un seul point, cette méthode ne provoque rien.
 
-<h2 id="Syntax">Syntax</h2>
+## Syntax
 
-<pre class="syntaxbox">void <var><em>ctx</em>.closePath();</var>
-</pre>
+    void ctx.closePath();
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Utiliser_la_méthode_closePath">Utiliser la méthode <code>closePath</code></h3>
+### Utiliser la méthode `closePath`
 
-<p>Voici un exemple d'utilisation de la méthode closePath.</p>
+Voici un exemple d'utilisation de la méthode closePath.
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
-</pre>
+```html
+<canvas id="canvas"></canvas>
+```
 
-<h4 id="JavaScript">JavaScript</h4>
+#### JavaScript
 
-<pre class="brush: js">var canvas = document.getElementById("canvas");
+```js
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 
 ctx.beginPath();
@@ -36,27 +37,29 @@ ctx.lineTo(200,20);
 ctx.lineTo(120,120);
 ctx.closePath(); // ferme le triangle par une ligne droite
 ctx.stroke();
-</pre>
+```
 
-<p>Editez le code ci-dessous et observez les répercutions dans le canvas:</p>
+Editez le code ci-dessous et observez les répercutions dans le canvas:
 
-<h4 id="code_jouable">Code jouable</h4>
+#### Code jouable
 
-<pre class="brush: html hidden">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
-&lt;div class="playable-buttons"&gt;
-  &lt;input id="edit" type="button" value="Edit" /&gt;
-  &lt;input id="reset" type="button" value="Reset" /&gt;
-&lt;/div&gt;
-&lt;textarea id="code" class="playable-code" style="height:140px;"&gt;
+```html hidden
+<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code" style="height:140px;">
 ctx.beginPath();
 ctx.moveTo(20,20);
 ctx.lineTo(200,20);
 ctx.lineTo(120,120);
 ctx.closePath(); // draws last line of the triangle
-ctx.stroke();&lt;/textarea&gt;
-</pre>
+ctx.stroke();</textarea>
+```
 
-<pre class="brush: js hidden">var canvas = document.getElementById("canvas");
+```js hidden
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 var textarea = document.getElementById("code");
 var reset = document.getElementById("reset");
@@ -79,34 +82,21 @@ edit.addEventListener("click", function() {
 
 textarea.addEventListener("input", drawCanvas);
 window.addEventListener("load", drawCanvas);
-</pre>
+```
 
-<p>{{ EmbedLiveSample('code_jouable', 700, 400) }}</p>
+{{ EmbedLiveSample('code_jouable', 700, 400) }}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-closepath", "CanvasRenderingContext2D.closePath")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                                    | Statut                           | Commentaire |
+| ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- |
+| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-closepath", "CanvasRenderingContext2D.closePath")}} | {{Spec2('HTML WHATWG')}} |             |
 
-<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+## Compatibilité navigateurs
 
-<p>{{Compat("api.CanvasRenderingContext2D.closePath")}}</p>
+{{Compat("api.CanvasRenderingContext2D.closePath")}}
 
-<h2 id="Voir_également">Voir également</h2>
+## Voir également
 
-<ul>
- <li>The interface defining it, {{domxref("CanvasRenderingContext2D")}}</li>
- <li>{{domxref("CanvasRenderingContext2D.beginPath()")}}</li>
-</ul>
+- The interface defining it, {{domxref("CanvasRenderingContext2D")}}
+- {{domxref("CanvasRenderingContext2D.beginPath()")}}
diff --git a/files/fr/web/api/canvasrenderingcontext2d/createlineargradient/index.md b/files/fr/web/api/canvasrenderingcontext2d/createlineargradient/index.md
index d8bab917a3..3fe6679a76 100644
--- a/files/fr/web/api/canvasrenderingcontext2d/createlineargradient/index.md
+++ b/files/fr/web/api/canvasrenderingcontext2d/createlineargradient/index.md
@@ -10,55 +10,52 @@ tags:
   - Reference
 translation_of: Web/API/CanvasRenderingContext2D/createLinearGradient
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}
 
-<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.createLinearGradient()</code></strong> de l'API Canvas 2D crée un gradient le long de la ligne donnée par les coordonnées représentées par les paramètres.</p>
+La méthode **`CanvasRenderingContext2D`\*\***`.createLinearGradient()`\*\* de l'API Canvas 2D crée un gradient le long de la ligne donnée par les coordonnées représentées par les paramètres.
 
-<p><img alt="" src="mdn-canvas-lineargradient.png"></p>
+![](mdn-canvas-lineargradient.png)
 
-<p>Cette méthode retourne un {{domxref("CanvasGradient")}} linéaire.</p>
+Cette méthode retourne un {{domxref("CanvasGradient")}} linéaire.
 
-<p>NOTE : les coordonnées sont globales, aussi soyez conscient du fait que, lors de l'utilisation "fillRect" (et de ses amis), les coordonnées NE sont PAS relatives aux coordonnées spécifiées dans les arguments de "fillRect".</p>
+NOTE : les coordonnées sont globales, aussi soyez conscient du fait que, lors de l'utilisation "fillRect" (et de ses amis), les coordonnées NE sont PAS relatives aux coordonnées spécifiées dans les arguments de "fillRect".
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">CanvasGradient <var><em>ctx</em>.createLinearGradient(x0, y0, x1, y1);</var>
-</pre>
+    CanvasGradient ctx.createLinearGradient(x0, y0, x1, y1);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>x0</code></dt>
- <dd>La coordonnée sur l'axe des x du point de début.</dd>
- <dt><code>y0</code></dt>
- <dd>La coordonnée sur l'axe des y du point de début.</dd>
- <dt><code>x1</code></dt>
- <dd>La coordonnée sur l'axe des x du point de fin.</dd>
- <dt><code>y1</code></dt>
- <dd>La coordonnée sur l'axe des y du point de fin.</dd>
-</dl>
+- `x0`
+  - : La coordonnée sur l'axe des x du point de début.
+- `y0`
+  - : La coordonnée sur l'axe des y du point de début.
+- `x1`
+  - : La coordonnée sur l'axe des x du point de fin.
+- `y1`
+  - : La coordonnée sur l'axe des y du point de fin.
 
-<h3 id="Valeur_retournée">Valeur retournée</h3>
+### Valeur retournée
 
-<dl>
- <dt>{{domxref("CanvasGradient")}}</dt>
- <dd>Un <code>CanvasGradient linéaire</code> initialisé avec la ligne spécifiée.</dd>
-</dl>
+- {{domxref("CanvasGradient")}}
+  - : Un `CanvasGradient linéaire` initialisé avec la ligne spécifiée.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Utilisation_de_la_méthode_createLinearGradient">Utilisation de la méthode <code>createLinearGradient</code></h3>
+### Utilisation de la méthode `createLinearGradient`
 
-<p>Ceci est seulement un simple fragment de code qui utilise la méthode <code>createLinearGradient</code> pour créer un {{domxref("CanvasGradient")}} avec les points de début et de fin spécifiés. Une fois créé, vous pouvez utiliser la méthode {{domxref("CanvasGradient.addColorStop()")}} pour définir de nouveaux arrêts sur le gradient, avec des déplacements et des couleurs spécifiés. Le gradient est appliqué si vous le mettez comme {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} courant, et il est dessiné sur le canevas lors de l'utilisation de la méthode {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}}, par exemple.</p>
+Ceci est seulement un simple fragment de code qui utilise la méthode `createLinearGradient` pour créer un {{domxref("CanvasGradient")}} avec les points de début et de fin spécifiés. Une fois créé, vous pouvez utiliser la méthode {{domxref("CanvasGradient.addColorStop()")}} pour définir de nouveaux arrêts sur le gradient, avec des déplacements et des couleurs spécifiés. Le gradient est appliqué si vous le mettez comme {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} courant, et il est dessiné sur le canevas lors de l'utilisation de la méthode {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}}, par exemple.
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
-</pre>
+```html
+<canvas id="canvas"></canvas>
+```
 
-<h4 id="JavaScript">JavaScript</h4>
+#### JavaScript
 
-<pre class="brush: js">var canvas = document.getElementById('canvas');
+```js
+var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
 
 var gradient = ctx.createLinearGradient(0, 0, 200, 0);
@@ -66,26 +63,28 @@ gradient.addColorStop(0, 'green');
 gradient.addColorStop(1, 'white');
 ctx.fillStyle = gradient;
 ctx.fillRect(10, 10, 200, 100);
-</pre>
+```
 
-<p>Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel sur le canevas :</p>
+Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel sur le canevas :
 
-<h4 id="code_jouable">Code jouable</h4>
+#### Code jouable
 
-<pre class="brush: html hidden">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
-&lt;div class="playable-buttons"&gt;
-  &lt;input id="edit" type="button" value="Edit" /&gt;
-  &lt;input id="reset" type="button" value="Reset" /&gt;
-&lt;/div&gt;
-&lt;textarea id="code" class="playable-code"&gt;
+```html hidden
+<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code">
 var gradient = ctx.createLinearGradient(0,0,200,0);
 gradient.addColorStop(0,"green");
 gradient.addColorStop(1,"white");
 ctx.fillStyle = gradient;
-ctx.fillRect(10,10,200,100);&lt;/textarea&gt;
-</pre>
+ctx.fillRect(10,10,200,100);</textarea>
+```
 
-<pre class="brush: js hidden">var canvas = document.getElementById("canvas");
+```js hidden
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 var textarea = document.getElementById("code");
 var reset = document.getElementById("reset");
@@ -108,40 +107,25 @@ edit.addEventListener("click", function() {
 
 textarea.addEventListener("input", drawCanvas);
 window.addEventListener("load", drawCanvas);
-</pre>
+```
 
-<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p>
+{{ EmbedLiveSample('code_jouable', 700, 360) }}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-createlineargradient", "CanvasRenderingContext2D.createLinearGradient")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                                                                | Statut                           | Commentaire |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- |
+| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-createlineargradient", "CanvasRenderingContext2D.createLinearGradient")}} | {{Spec2('HTML WHATWG')}} |             |
 
-<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+## Compatibilité navigateurs
 
-<p>{{Compat("api.CanvasRenderingContext2D.createLinearGradient")}}</p>
+{{Compat("api.CanvasRenderingContext2D.createLinearGradient")}}
 
-<h2 id="Notes_spécifiques_à_Gecko">Notes spécifiques à Gecko</h2>
+## Notes spécifiques à Gecko
 
-<ul>
- <li>A partir de Gecko 2.0 {{geckoRelease("2.0")}}, le fait de spécifier des valeurs non finies  déclenche maintenant <code>NOT_SUPPORTED_ERR</code> au lieu de <code>SYNTAX_ERR</code>.</li>
-</ul>
+- A partir de Gecko 2.0 {{geckoRelease("2.0")}}, le fait de spécifier des valeurs non finies  déclenche maintenant `NOT_SUPPORTED_ERR` au lieu de `SYNTAX_ERR`.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li>
- <li>{{domxref("CanvasRenderingContext2D.createRadialGradient()")}}</li>
-</ul>
+- L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}
+- {{domxref("CanvasRenderingContext2D.createRadialGradient()")}}
diff --git a/files/fr/web/api/canvasrenderingcontext2d/direction/index.md b/files/fr/web/api/canvasrenderingcontext2d/direction/index.md
index e4dae769e1..b56729678a 100644
--- a/files/fr/web/api/canvasrenderingcontext2d/direction/index.md
+++ b/files/fr/web/api/canvasrenderingcontext2d/direction/index.md
@@ -10,67 +10,68 @@ tags:
   - Reference
 translation_of: Web/API/CanvasRenderingContext2D/direction
 ---
-<div>{{APIRef}} {{SeeCompatTable}}</div>
+{{APIRef}} {{SeeCompatTable}}
 
-<p>La propriété <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.direction</code></strong> de l'API Canvas 2D indique la direction de texte courante utilisé lors du dessin de texte.</p>
+La propriété **`CanvasRenderingContext2D`\*\***`.direction`\*\* de l'API Canvas 2D indique la direction de texte courante utilisé lors du dessin de texte.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var><em>ctx</em>.direction = "ltr" || "rtl" || "inherit";</var>
-</pre>
+    ctx.direction = "ltr" || "rtl" || "inherit";
 
-<h3 id="Options">Options</h3>
+### Options
 
-<p>Valeurs possibles :</p>
+Valeurs possibles :
 
-<dl>
- <dt>ltr</dt>
- <dd>La direction du texte est de gauche à droite.</dd>
- <dt>rtl</dt>
- <dd>La direction du texte est de droite à gauche.</dd>
- <dt>inherit</dt>
- <dd>La direction du texte est héritée de l'élément {{HTMLElement("canvas")}} ou du {{domxref("Document")}} comme approprié.</dd>
-</dl>
+- ltr
+  - : La direction du texte est de gauche à droite.
+- rtl
+  - : La direction du texte est de droite à gauche.
+- inherit
+  - : La direction du texte est héritée de l'élément {{HTMLElement("canvas")}} ou du {{domxref("Document")}} comme approprié.
 
-<p>La valeur par défaut est <code>inherit</code>.</p>
+La valeur par défaut est `inherit`.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Using_the_direction_property">Utilisation de la propriété <code>direction</code></h3>
+### Utilisation de la propriété `direction`
 
-<p>Ceci est seulement un fragment de code simple utilisant la propriété <code>direction</code> pour indiquer un réglage de ligne de base différent.</p>
+Ceci est seulement un fragment de code simple utilisant la propriété `direction` pour indiquer un réglage de ligne de base différent.
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
-</pre>
+```html
+<canvas id="canvas"></canvas>
+```
 
-<h4 id="JavaScript">JavaScript</h4>
+#### JavaScript
 
-<pre class="brush: js">var canvas = document.getElementById('canvas');
+```js
+var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
 
 ctx.font = '48px serif';
 ctx.direction = 'ltr';
 ctx.strokeText('Hello world', 0, 100);
-</pre>
+```
 
-<p>Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :</p>
+Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :
 
-<h4 id="code_jouable">Code jouable</h4>
+#### Code jouable
 
-<pre class="brush: html hidden">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
-&lt;div class="playable-buttons"&gt;
-  &lt;input id="edit" type="button" value="Edit" /&gt;
-  &lt;input id="reset" type="button" value="Reset" /&gt;
-&lt;/div&gt;
-&lt;textarea id="code" class="playable-code"&gt;
+```html hidden
+<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code">
 ctx.font = '48px serif';
 ctx.direction = 'ltr';
-ctx.strokeText('Hello world', 0, 100);&lt;/textarea&gt;
-</pre>
+ctx.strokeText('Hello world', 0, 100);</textarea>
+```
 
-<pre class="brush: js hidden">var canvas = document.getElementById('canvas');
+```js hidden
+var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
 var textarea = document.getElementById('code');
 var reset = document.getElementById('reset');
@@ -93,33 +94,20 @@ edit.addEventListener('click', function() {
 
 textarea.addEventListener('input', drawCanvas);
 window.addEventListener('load', drawCanvas);
-</pre>
+```
 
-<p>{{EmbedLiveSample('code_jouable', 700, 360)}}</p>
+{{EmbedLiveSample('code_jouable', 700, 360)}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-direction", "CanvasRenderingContext2D.direction")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                                    | Statut                           | Commentaire |
+| ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- |
+| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-direction", "CanvasRenderingContext2D.direction")}} | {{Spec2('HTML WHATWG')}} |             |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.CanvasRenderingContext2D.direction")}}</p>
+{{Compat("api.CanvasRenderingContext2D.direction")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}.</li>
-</ul>
+- L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}.
diff --git a/files/fr/web/api/canvasrenderingcontext2d/drawimage/index.md b/files/fr/web/api/canvasrenderingcontext2d/drawimage/index.md
index 92bc5a9b9d..e7bb8508f3 100644
--- a/files/fr/web/api/canvasrenderingcontext2d/drawimage/index.md
+++ b/files/fr/web/api/canvasrenderingcontext2d/drawimage/index.md
@@ -9,92 +9,91 @@ tags:
   - Référence(2)
 translation_of: Web/API/CanvasRenderingContext2D/drawImage
 ---
-<div>{{APIRef}}</div>
-
-<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.drawImage()</code></strong> de l'API 2D des Canvas instaure différentes manières de dessiner des images dans les balises canvas.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">void <var><em>ctx</em>.drawImage(image, dx, dy);</var>
-void <var><em>ctx</em>.drawImage(image, dx, dy, dLargeur, dHauteur);</var>
-void <var><em>ctx</em>.drawImage(image, sx, sy, sLargeur, sHauteur, dx, dy, dLargeur, dHauteur);</var>
-</pre>
-
-<p><img alt="drawImage" src="canvas_drawimage.jpg"></p>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>image</code></dt>
- <dd>Un élément à dessiner dans le contexte. La spécification autorise toute source d'image canvas ({{domxref("CanvasImageSource")}}), ainsi qu'une {{domxref("HTMLImageElement")}}, une {{domxref("HTMLVideoElement")}}, une {{domxref("HTMLCanvasElement")}} ou une {{domxref("ImageBitmap")}}.</dd>
- <dt><code>dx</code></dt>
- <dd>La coordonnée <code>x</code> dans le canvas de destination où placer le coin supérieur gauche de l'<code>image</code> source.</dd>
- <dt><code>dy</code></dt>
- <dd>La coordonnée <code>y</code> dans le canvas de destination où placer le coin supérieur gauche de l'<code>image</code> source.</dd>
- <dt><code>dLargeur</code></dt>
- <dd>La largeur de l'<code>image</code> dessinée dans le contexte de la balise canvas. Cela permet d'ajuster la taille de l'image. Si cet argument n'est pas spécifié, l'image prendra sa largeur normale.</dd>
- <dt>dHauteur</dt>
- <dd>La hauteur de l'<code>image</code> dessinée dans le contexte de la balise canvas. Cela permet d'ajuster la taille de l'image. Si cet argument n'est pas spécifié, l'image prendra sa hauteur normale.</dd>
- <dt><code>sx</code></dt>
- <dd>La coordonnée <code>x</code> du bord en haut à gauche de la partie de l'<code>image</code> source à dessiner dans le contexte du canvas.</dd>
- <dt><code>sy</code></dt>
- <dd>La coordonnée <code>y</code> du bord en haut à gauche de la partie de l'<code>image</code> source à dessiner dans le contexte du canvas.</dd>
- <dt><code>sLargeur</code></dt>
- <dd>La largeur de la partie de l'image source à dessiner dans le contexte. Si ce n'est pas spécifié, cet argument prend la valeur de la largeur de l'image moins <code>sx</code>, autrement dit l'image dessinée dans le contexte sera la partie de l'image d'origine à partir du point s de coordonnées (<code>sx</code> ; <code>sy</code>) et jusqu'au bord en bas à droite.</dd>
- <dt><code>sHauteur</code></dt>
- <dd>La hauteur de la partie de l'image source à dessiner dans le contexte. De la même manière que pour sLargeur, si aucune valeur n'est donnée cet argument prendra la valeur de la hauteur de l'image moins <code>sy</code>.</dd>
-</dl>
-
-<h3 id="Exceptions">Exceptions</h3>
-
-<dl>
- <dt><code>INDEX_SIZE_ERR</code></dt>
- <dd>Si la balise canvas ou la largeur ou hauteur du rectangle source vaut zero ou moins.</dd>
- <dt><code>INVALID_STATE_ERR</code></dt>
- <dd>L'image reçue n'en est pas une.</dd>
- <dt><code>TYPE_MISMATCH_ERR</code></dt>
- <dd>L'image reçue n'est pas supportée.</dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utiliser_la_méthode_drawImage">Utiliser la méthode <code>drawImage</code></h3>
-
-<p>Ceci est un extrait de code utilisant la méthode <code>drawImage</code> :</p>
-
-<h4 id="HTML">HTML</h4>
-
-<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
-  &lt;img id="source" src="rhino.jpg"
-       width="300" height="227"&gt;
-&lt;/div&gt;
-</pre>
-
-<h4 id="JavaScript">JavaScript</h4>
-
-<pre class="brush: js">var canvas = document.getElementById("canvas");
-var ctx = canvas.getContext("2d");
-var image = document.getElementById("source");
+{{APIRef}}
 
-ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);
-</pre>
+La méthode **`CanvasRenderingContext2D`\*\***`.drawImage()`\*\* de l'API 2D des Canvas instaure différentes manières de dessiner des images dans les balises canvas.
+
+## Syntaxe
+
+    void ctx.drawImage(image, dx, dy);
+    void ctx.drawImage(image, dx, dy, dLargeur, dHauteur);
+    void ctx.drawImage(image, sx, sy, sLargeur, sHauteur, dx, dy, dLargeur, dHauteur);
+
+![drawImage](canvas_drawimage.jpg)
+
+### Paramètres
+
+- `image`
+  - : Un élément à dessiner dans le contexte. La spécification autorise toute source d'image canvas ({{domxref("CanvasImageSource")}}), ainsi qu'une {{domxref("HTMLImageElement")}}, une {{domxref("HTMLVideoElement")}}, une {{domxref("HTMLCanvasElement")}} ou une {{domxref("ImageBitmap")}}.
+- `dx`
+  - : La coordonnée `x` dans le canvas de destination où placer le coin supérieur gauche de l'`image` source.
+- `dy`
+  - : La coordonnée `y` dans le canvas de destination où placer le coin supérieur gauche de l'`image` source.
+- `dLargeur`
+  - : La largeur de l'`image` dessinée dans le contexte de la balise canvas. Cela permet d'ajuster la taille de l'image. Si cet argument n'est pas spécifié, l'image prendra sa largeur normale.
+- dHauteur
+  - : La hauteur de l'`image` dessinée dans le contexte de la balise canvas. Cela permet d'ajuster la taille de l'image. Si cet argument n'est pas spécifié, l'image prendra sa hauteur normale.
+- `sx`
+  - : La coordonnée `x` du bord en haut à gauche de la partie de l'`image` source à dessiner dans le contexte du canvas.
+- `sy`
+  - : La coordonnée `y` du bord en haut à gauche de la partie de l'`image` source à dessiner dans le contexte du canvas.
+- `sLargeur`
+  - : La largeur de la partie de l'image source à dessiner dans le contexte. Si ce n'est pas spécifié, cet argument prend la valeur de la largeur de l'image moins `sx`, autrement dit l'image dessinée dans le contexte sera la partie de l'image d'origine à partir du point s de coordonnées (`sx` ; `sy`) et jusqu'au bord en bas à droite.
+- `sHauteur`
+  - : La hauteur de la partie de l'image source à dessiner dans le contexte. De la même manière que pour sLargeur, si aucune valeur n'est donnée cet argument prendra la valeur de la hauteur de l'image moins `sy`.
+
+### Exceptions
 
-<p>Éditez le code suivant pour voir les changements en direct dans la balise canvas:</p>
+- `INDEX_SIZE_ERR`
+  - : Si la balise canvas ou la largeur ou hauteur du rectangle source vaut zero ou moins.
+- `INVALID_STATE_ERR`
+  - : L'image reçue n'en est pas une.
+- `TYPE_MISMATCH_ERR`
+  - : L'image reçue n'est pas supportée.
 
-<h4 id="code_jouable">Code jouable</h4>
+## Exemples
 
-<pre class="brush: html hidden">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
-  &lt;img id="source" src="rhino.jpg" width="300" height="227"&gt;
-&lt;/div&gt;
-&lt;div class="playable-buttons"&gt;
-  &lt;input id="edit" type="button" value="Edit" /&gt;
-  &lt;input id="reset" type="button" value="Reset" /&gt;
-&lt;/div&gt;
-&lt;textarea id="code" class="playable-code"&gt;
-ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);&lt;/textarea&gt;
-</pre>
+### Utiliser la méthode `drawImage`
 
-<pre class="brush: js hidden">var canvas = document.getElementById("canvas");
+Ceci est un extrait de code utilisant la méthode `drawImage` :
+
+#### HTML
+
+```html
+<canvas id="canvas"></canvas>
+  <img id="source" src="rhino.jpg"
+       width="300" height="227">
+</div>
+```
+
+#### JavaScript
+
+```js
+var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var image = document.getElementById("source");
+
+ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);
+```
+
+Éditez le code suivant pour voir les changements en direct dans la balise canvas:
+
+#### Code jouable
+
+```html hidden
+<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+  <img id="source" src="rhino.jpg" width="300" height="227">
+</div>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code">
+ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);</textarea>
+```
+
+```js hidden
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 var image = document.getElementById('source');
 var textarea = document.getElementById("code");
@@ -118,50 +117,33 @@ edit.addEventListener("click", function() {
 
 textarea.addEventListener("input", drawCanvas);
 window.addEventListener("load", drawCanvas);
-</pre>
+```
 
-<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p>
+{{ EmbedLiveSample('code_jouable', 700, 360) }}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-drawimage", "CanvasRenderingContext2D.drawImage")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                                    | Statut                           | Commentaire |
+| ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- |
+| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-drawimage", "CanvasRenderingContext2D.drawImage")}} | {{Spec2('HTML WHATWG')}} |             |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.CanvasRenderingContext2D.drawImage")}}</p>
+{{Compat("api.CanvasRenderingContext2D.drawImage")}}
 
-<h2 id="Notes_concernant_la_compatibilité">Notes concernant la compatibilité</h2>
+## Notes concernant la compatibilité
 
-<ul>
- <li>Un support pour l'inversion de l'image pour les valeurs négatives pour <code>sLargeur</code> et <code>sHauteur</code> a été ajouté à Gecko 5.0 {{geckoRelease("5.0")}}.</li>
- <li>A partir de {{geckoRelease("5.0")}} <code>drawImage()</code> gère les arguments négatifs, conformément à la spécification, en inversant ces valeurs par rapport aux axes.</li>
- <li>Spécifier une image <code>null</code> ou <code>undefined</code> en appellant <code>drawImage()</code> correctement retournera une exception <code>TYPE_MISMATCH_ERR</code> à partir de {{geckoRelease("5.0")}}.</li>
- <li>Prior to Gecko 7.0 {{ geckoRelease("7.0") }}, Firefox ajoute une exception si une des coordonnées est nulle ou négative. Selon la spécification, cela ne durera pas.</li>
- <li>Gecko 9.0 {{ geckoRelease("9.0") }} supporte désormais correctement le CORS pour dessiner des images de domaines étrangers sans <a href="/fr/docs/Web/HTML/Images_avec_le_contr%C3%B4le_d_acc%C3%A8s_HTTP">corrompre le canvas</a>.</li>
- <li>Gecko 11.0 {{ geckoRelease("11.0") }} permet désormais de dessiner les images SVG dans le canvas sans <a href="/fr/docs/Web/HTML/Images_avec_le_contr%C3%B4le_d_acc%C3%A8s_HTTP">corrompre le canevas</a>.</li>
-</ul>
+- Un support pour l'inversion de l'image pour les valeurs négatives pour `sLargeur` et `sHauteur` a été ajouté à Gecko 5.0 {{geckoRelease("5.0")}}.
+- A partir de {{geckoRelease("5.0")}} `drawImage()` gère les arguments négatifs, conformément à la spécification, en inversant ces valeurs par rapport aux axes.
+- Spécifier une image `null` ou `undefined` en appellant `drawImage()` correctement retournera une exception `TYPE_MISMATCH_ERR` à partir de {{geckoRelease("5.0")}}.
+- Prior to Gecko 7.0 {{ geckoRelease("7.0") }}, Firefox ajoute une exception si une des coordonnées est nulle ou négative. Selon la spécification, cela ne durera pas.
+- Gecko 9.0 {{ geckoRelease("9.0") }} supporte désormais correctement le CORS pour dessiner des images de domaines étrangers sans [corrompre le canvas](/fr/docs/Web/HTML/Images_avec_le_contr%C3%B4le_d_acc%C3%A8s_HTTP).
+- Gecko 11.0 {{ geckoRelease("11.0") }} permet désormais de dessiner les images SVG dans le canvas sans [corrompre le canevas](/fr/docs/Web/HTML/Images_avec_le_contr%C3%B4le_d_acc%C3%A8s_HTTP).
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<ul>
- <li>drawImage() ne fonctionne correctement avec {{domxref("HTMLVideoElement")}} que si {{domxref("HTMLMediaElement.readyState")}}<strong> est supérieur à 1.</strong> (i.e, Chercher l'événement renvoyé après avoir mis la propriété currentTime)</li>
-</ul>
+- drawImage() ne fonctionne correctement avec {{domxref("HTMLVideoElement")}} que si {{domxref("HTMLMediaElement.readyState")}} **est supérieur à 1.** (i.e, Chercher l'événement renvoyé après avoir mis la propriété currentTime)
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>L'interface qui la définit, {{domxref("CanvasRenderingContext2D")}}.</li>
-</ul>
+- L'interface qui la définit, {{domxref("CanvasRenderingContext2D")}}.
diff --git a/files/fr/web/api/canvasrenderingcontext2d/ellipse/index.md b/files/fr/web/api/canvasrenderingcontext2d/ellipse/index.md
index 49a19c218c..197d6aad25 100644
--- a/files/fr/web/api/canvasrenderingcontext2d/ellipse/index.md
+++ b/files/fr/web/api/canvasrenderingcontext2d/ellipse/index.md
@@ -9,73 +9,74 @@ tags:
   - Méthode
 translation_of: Web/API/CanvasRenderingContext2D/ellipse
 ---
-<div>{{APIRef}} {{SeeCompatTable}}</div>
+{{APIRef}} {{SeeCompatTable}}
 
-<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.ellipse()</code></strong> de l'API Canvas 2D ajoute une ellipse au trajet, centrée en <em>(x, y),</em> les rayons <em>rayonX</em> et <em>rayonY</em> commençant à <em>angleDeDébut</em> et se terminant à <em>angleDeFin,</em> en allant dans le sens indiqué par <em>antiHoraire</em> (par défaut, horaire).</p>
+La méthode **`CanvasRenderingContext2D`\*\***`.ellipse()`\*_ de l'API Canvas 2D ajoute une ellipse au trajet, centrée en _(x, y),* les rayons *rayonX* et *rayonY* commençant à *angleDeDébut* et se terminant à *angleDeFin,* en allant dans le sens indiqué par *antiHoraire\* (par défaut, horaire).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">void <var><em>ctx</em>.ellipse(x, y, rayonX, rayonY, rotation, angleDébut, angleFin, antihoraire);</var>
-</pre>
+    void ctx.ellipse(x, y, rayonX, rayonY, rotation, angleDébut, angleFin, antihoraire);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>x</code></dt>
- <dd>La coordonnée sur l'axe des x du centre de l'ellipse.</dd>
- <dt><code>y</code></dt>
- <dd>La coordonnée sur l'axe des y du centre de l'ellipse.</dd>
- <dt><code>rayon</code>X</dt>
- <dd>Le rayon du grand axe de l'ellipse.</dd>
- <dt><code>rayon</code>Y</dt>
- <dd>Le rayon du petit axe de l'ellipse.</dd>
- <dt><code>rotation</code></dt>
- <dd>La rotation pour cette ellipse, exprimée en radians.</dd>
- <dt><code>angleDébut</code></dt>
- <dd>L'angle de début, mesuré à partir de l'axe des x, à partir duquel elle sera dessinée, exprimé en radians.</dd>
- <dt><code>angleFin</code></dt>
- <dd>L'angle de fin de l'ellipse, jusqu'auquel elle sera dessinée, exprimé in radians.</dd>
- <dt><code>antihoraire</code> {{optional_inline}}</dt>
- <dd>Un {{jsxref("Boolean")}} optionnel qui, si <code>true</code>, dessine l'ellipse dans le sens antihoraire, sinon dans le sens horaire.</dd>
-</dl>
+- `x`
+  - : La coordonnée sur l'axe des x du centre de l'ellipse.
+- `y`
+  - : La coordonnée sur l'axe des y du centre de l'ellipse.
+- `rayon`X
+  - : Le rayon du grand axe de l'ellipse.
+- `rayon`Y
+  - : Le rayon du petit axe de l'ellipse.
+- `rotation`
+  - : La rotation pour cette ellipse, exprimée en radians.
+- `angleDébut`
+  - : L'angle de début, mesuré à partir de l'axe des x, à partir duquel elle sera dessinée, exprimé en radians.
+- `angleFin`
+  - : L'angle de fin de l'ellipse, jusqu'auquel elle sera dessinée, exprimé in radians.
+- `antihoraire` {{optional_inline}}
+  - : Un {{jsxref("Boolean")}} optionnel qui, si `true`, dessine l'ellipse dans le sens antihoraire, sinon dans le sens horaire.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Using_the_ellipse_method">Utilisation de la méthode <code>ellipse</code></h3>
+### Utilisation de la méthode `ellipse`
 
-<p>Ceci est seulement un fragment de code simple dessinant une ellipse.</p>
+Ceci est seulement un fragment de code simple dessinant une ellipse.
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;canvas id="canevas"&gt;&lt;/canvas&gt;
-</pre>
+```html
+<canvas id="canevas"></canvas>
+```
 
-<h4 id="JavaScript">JavaScript</h4>
+#### JavaScript
 
-<pre class="brush: js">var canevas = document.getElementById('canevas');
+```js
+var canevas = document.getElementById('canevas');
 var ctx = canevas.getContext('2d');
 
 ctx.beginPath();
 ctx.ellipse(100, 100, 50, 75, 45 * Math.PI/180, 0, 2 * Math.PI);
 ctx.stroke();
-</pre>
+```
 
-<p>Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas (vérifiez le support de votre navigateur dans la table de compatibilité si aucune ellipse n'est tracée) :</p>
+Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas (vérifiez le support de votre navigateur dans la table de compatibilité si aucune ellipse n'est tracée) :
 
-<h4 id="code_jouable">Code jouable</h4>
+#### Code jouable
 
-<pre class="brush: html hidden">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
-&lt;div class="playable-buttons"&gt;
-  &lt;input id="edit" type="button" value="Edit" /&gt;
-  &lt;input id="reset" type="button" value="Reset" /&gt;
-&lt;/div&gt;
-&lt;textarea id="code" class="playable-code"&gt;
+```html hidden
+<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code">
 ctx.beginPath();
 ctx.ellipse(100, 100, 50, 75, 45 * Math.PI/180, 0, 2 * Math.PI);
-ctx.stroke();&lt;/textarea&gt;
-</pre>
+ctx.stroke();</textarea>
+```
 
-<pre class="brush: js hidden">var canvas = document.getElementById("canvas");
+```js hidden
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 var textarea = document.getElementById("code");
 var reset = document.getElementById("reset");
@@ -98,33 +99,20 @@ edit.addEventListener("click", function() {
 
 textarea.addEventListener("input", drawCanvas);
 window.addEventListener("load", drawCanvas);
-</pre>
+```
 
-<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p>
+{{ EmbedLiveSample('code_jouable', 700, 360) }}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-ellipse", "CanvasRenderingContext2D.ellipse")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                                | Statut                           | Commentaire |
+| -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- |
+| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-ellipse", "CanvasRenderingContext2D.ellipse")}} | {{Spec2('HTML WHATWG')}} |             |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.CanvasRenderingContext2D.ellipse")}}</p>
+{{Compat("api.CanvasRenderingContext2D.ellipse")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li>
-</ul>
+- L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}
diff --git a/files/fr/web/api/canvasrenderingcontext2d/fill/index.md b/files/fr/web/api/canvasrenderingcontext2d/fill/index.md
index f71a817ce6..d7197dc21c 100644
--- a/files/fr/web/api/canvasrenderingcontext2d/fill/index.md
+++ b/files/fr/web/api/canvasrenderingcontext2d/fill/index.md
@@ -7,65 +7,66 @@ tags:
   - CanvasRenderingContext2D
 translation_of: Web/API/CanvasRenderingContext2D/fill
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}
 
-<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.fill()</code></strong> de l'API Canvas 2D remplit le chemin courant ou donné avec la couleur de fond en cours, en utilisant la règle de remplissage extérieur/intérieur non nul ou la règle de remplissage pair/impair.</p>
+La méthode **`CanvasRenderingContext2D`\*\***`.fill()`\*\* de l'API Canvas 2D remplit le chemin courant ou donné avec la couleur de fond en cours, en utilisant la règle de remplissage extérieur/intérieur non nul ou la règle de remplissage pair/impair.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">void <var><em>ctx</em>.fill([fillRule]);</var>
-void <var><em>ctx</em>.fill(path[, fillRule]);</var>
-</pre>
+    void ctx.fill([fillRule]);
+    void ctx.fill(path[, fillRule]);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>fillRule</code></dt>
- <dd>L'algorithme utilisé pour déterminer si un point est à l'intérieur ou à l'extérieur du chemin.<br>
- Valeurs possible:
- <ul>
-  <li><code><strong>"nonzero</strong></code>": La <a href="http://en.wikipedia.org/wiki/Nonzero-rule">règle de remplissage extérieur/intérieur non nul</a>, qui est la règle par défaut.</li>
-  <li><code><strong>"evenodd"</strong></code>: La <a href="http://en.wikipedia.org/wiki/Even%E2%80%93odd_rule">règle de remplissage pair/impair</a>.</li>
- </ul>
- </dd>
- <dt><code>path</code></dt>
- <dd>Un chemin {{domxref("Path2D")}} à remplir.</dd>
-</dl>
+- `fillRule`
 
-<h2 id="Exemples">Exemples</h2>
+  - : L'algorithme utilisé pour déterminer si un point est à l'intérieur ou à l'extérieur du chemin.
+    Valeurs possible:
 
-<h3 id="Utiliser_la_méthode_fill">Utiliser la méthode <code>fill</code></h3>
+    - **`"nonzero`**": La [règle de remplissage extérieur/intérieur non nul](http://en.wikipedia.org/wiki/Nonzero-rule), qui est la règle par défaut.
+    - **`"evenodd"`**: La [règle de remplissage pair/impair](http://en.wikipedia.org/wiki/Even%E2%80%93odd_rule).
 
-<p>Ceci est un simple snippet de code qui utilise la méthode <code>fill</code> pour remplir un chemin.</p>
+- `path`
+  - : Un chemin {{domxref("Path2D")}} à remplir.
 
-<h4 id="HTML">HTML</h4>
+## Exemples
 
-<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
-</pre>
+### Utiliser la méthode `fill`
 
-<h4 id="JavaScript">JavaScript</h4>
+Ceci est un simple snippet de code qui utilise la méthode `fill` pour remplir un chemin.
 
-<pre class="brush: js">var canvas = document.getElementById('canvas');
+#### HTML
+
+```html
+<canvas id="canvas"></canvas>
+```
+
+#### JavaScript
+
+```js
+var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
 ctx.rect(10, 10, 100, 100);
 ctx.fill();
-</pre>
+```
 
-<p>Éditez le code ci-dessous pour voir vos changements apportés au canvas en direct:</p>
+Éditez le code ci-dessous pour voir vos changements apportés au canvas en direct:
 
-<h4 id="code_jouable">Code jouable</h4>
+#### Code jouable
 
-<pre class="brush: html hidden">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
-&lt;div class="playable-buttons"&gt;
-  &lt;input id="edit" type="button" value="Edit" /&gt;
-  &lt;input id="reset" type="button" value="Reset" /&gt;
-&lt;/div&gt;
-&lt;textarea id="code" class="playable-code"&gt;
+```html hidden
+<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code">
 ctx.rect(10, 10, 100, 100);
-ctx.fill();&lt;/textarea&gt;
-</pre>
+ctx.fill();</textarea>
+```
 
-<pre class="brush: js hidden">var canvas = document.getElementById("canvas");
+```js hidden
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 var textarea = document.getElementById("code");
 var reset = document.getElementById("reset");
@@ -88,19 +89,22 @@ edit.addEventListener("click", function() {
 
 textarea.addEventListener("input", drawCanvas);
 window.addEventListener("load", drawCanvas);
-</pre>
+```
 
-<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p>
+{{ EmbedLiveSample('code_jouable', 700, 360) }}
 
-<h3 id="Utiliser_l'option_fillRule">Utiliser l'option <code>fillRule</code></h3>
+### Utiliser l'option `fillRule`
 
-<h4 id="HTML_2">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt; </pre>
+```html
+<canvas id="canvas"></canvas>
+```
 
-<h4 id="JavaScript_2">JavaScript</h4>
+#### JavaScript
 
-<pre class="brush: js">var canvas = document.getElementById('canvas');
+```js
+var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
 
 ctx.beginPath();
@@ -115,18 +119,20 @@ ctx.closePath();
 ctx.fillStyle = "lightblue";
 ctx.lineWidth = 2;
 ctx.fill("nonzero");
-ctx.stroke();</pre>
+ctx.stroke();
+```
 
-<p>Éditez le code ci-dessous pour voir vos changements apportés au canvas en direct:</p>
+Éditez le code ci-dessous pour voir vos changements apportés au canvas en direct:
 
-<h4 id="code_jouable_2">Code jouable 2</h4>
+#### Code jouable 2
 
-<pre class="brush: html hidden">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
-&lt;div class="playable-buttons"&gt;
-  &lt;input id="edit" type="button" value="Edit" /&gt;
-  &lt;input id="reset" type="button" value="Reset" /&gt;
-&lt;/div&gt;
-&lt;textarea id="code" class="playable-code"&gt;
+```html hidden
+<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code">
 ctx.beginPath();
 ctx.moveTo(96.50,50.00);
 ctx.bezierCurveTo(96.50,62.84,0.22,99.82,50.74,47.17);
@@ -139,10 +145,11 @@ ctx.closePath();
 ctx.fillStyle = "lightblue";
 ctx.lineWidth = 2;
 ctx.fill("nonzero");
-ctx.stroke();&lt;/textarea&gt;
-</pre>
+ctx.stroke();</textarea>
+```
 
-<pre class="brush: js hidden">var canvas = document.getElementById("canvas");
+```js hidden
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 var textarea = document.getElementById("code");
 var reset = document.getElementById("reset");
@@ -165,33 +172,20 @@ edit.addEventListener("click", function() {
 
 textarea.addEventListener("input", drawCanvas);
 window.addEventListener("load", drawCanvas);
-</pre>
+```
 
-<p>{{EmbedLiveSample('code_jouable_2', 700, 360)}}</p>
+{{EmbedLiveSample('code_jouable_2', 700, 360)}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fill", "CanvasRenderingContext2D.fill")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Specification                                                                                                                        | Status                           | Comment |
+| ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------- |
+| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fill", "CanvasRenderingContext2D.fill")}} | {{Spec2('HTML WHATWG')}} |         |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.CanvasRenderingContext2D.fill")}}</p>
+{{Compat("api.CanvasRenderingContext2D.fill")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>L'interface qui définit cette méthode, {{domxref("CanvasRenderingContext2D")}}.</li>
-</ul>
+- L'interface qui définit cette méthode, {{domxref("CanvasRenderingContext2D")}}.
diff --git a/files/fr/web/api/canvasrenderingcontext2d/fillrect/index.md b/files/fr/web/api/canvasrenderingcontext2d/fillrect/index.md
index cd98d786b5..d8fc1404f8 100644
--- a/files/fr/web/api/canvasrenderingcontext2d/fillrect/index.md
+++ b/files/fr/web/api/canvasrenderingcontext2d/fillrect/index.md
@@ -8,65 +8,66 @@ tags:
   - Méthode
 translation_of: Web/API/CanvasRenderingContext2D/fillRect
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}
 
-<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.fillRect()</code></strong> de l'API 2D des Canvas dessine un rectangle plein aux coordonnées <em>(x, y)</em>, aux dimensions déterminées par <em>largeur</em> et <em>hauteur</em> et au style déterminé par l'attribut <code>fillStyle</code>.</p>
+La méthode **`CanvasRenderingContext2D`\*\***`.fillRect()`\*_ de l'API 2D des Canvas dessine un rectangle plein aux coordonnées _(x, y)*, aux dimensions déterminées par *largeur* et *hauteur\* et au style déterminé par l'attribut `fillStyle`.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">void <var><em>ctx</em>.fillRect(x, y, largeur, hauteur);</var>
-</pre>
+    void ctx.fillRect(x, y, largeur, hauteur);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>x</code></dt>
- <dd>L'ordonnée <em>x</em> des coordonnées du point de départ du rectangle.</dd>
- <dt><code>y</code></dt>
- <dd>L'abscisse <em>y</em> des coordonnées du point de départ du rectangle.</dd>
- <dt><code>largeur</code></dt>
- <dd>La largeur du rectangle.</dd>
- <dt><code>hauteur</code></dt>
- <dd>La hauteur de rectangle.</dd>
-</dl>
+- `x`
+  - : L'ordonnée *x* des coordonnées du point de départ du rectangle.
+- `y`
+  - : L'abscisse *y* des coordonnées du point de départ du rectangle.
+- `largeur`
+  - : La largeur du rectangle.
+- `hauteur`
+  - : La hauteur de rectangle.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Utilisation_de_la_méthode_fillRect">Utilisation de la méthode <code>fillRect</code></h3>
+### Utilisation de la méthode `fillRect`
 
-<p>Ceci est juste un extrait de code qui utilise la méthode <code>fillRect</code>.</p>
+Ceci est juste un extrait de code qui utilise la méthode `fillRect`.
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
-</pre>
+```html
+<canvas id="canvas"></canvas>
+```
 
-<h4 id="JavaScript">JavaScript</h4>
+#### JavaScript
 
-<pre class="brush: js">var canvas = document.getElementById("canvas");
+```js
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 ctx.fillStyle = "green";
 ctx.fillRect(10, 10, 100, 100);
 
 // remplir la balise entièrement
 // ctx.fillRect(0, 0, canvas.width, canvas.height);
-</pre>
+```
 
-<p>Éditez le code suivant pour voir les changements en direct dans la balise canvas:</p>
+Éditez le code suivant pour voir les changements en direct dans la balise canvas:
 
-<h4 id="code_jouable">Code jouable</h4>
+#### Code jouable
 
-<pre class="brush: html hidden">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
-&lt;div class="playable-buttons"&gt;
-  &lt;input id="edit" type="button" value="Edit" /&gt;
-  &lt;input id="reset" type="button" value="Reset" /&gt;
-&lt;/div&gt;
-&lt;textarea id="code" class="playable-code"&gt;
+```html hidden
+<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code">
 ctx.fillStyle = "green";
-ctx.fillRect(10, 10, 100, 100);&lt;/textarea&gt;
-</pre>
+ctx.fillRect(10, 10, 100, 100);</textarea>
+```
 
-<pre class="brush: js hidden">var canvas = document.getElementById("canvas");
+```js hidden
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 var textarea = document.getElementById("code");
 var reset = document.getElementById("reset");
@@ -89,36 +90,23 @@ edit.addEventListener("click", function() {
 
 textarea.addEventListener("input", drawCanvas);
 window.addEventListener("load", drawCanvas);
-</pre>
-
-<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fillrect", "CanvasRenderingContext2D.fillRect")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.CanvasRenderingContext2D.fillRect")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>L'interface qui le définit, {{domxref("CanvasRenderingContext2D")}}</li>
- <li>{{domxref("CanvasRenderingContext2D.fillStyle")}}</li>
- <li>{{domxref("CanvasRenderingContext2D.clearRect()")}}</li>
- <li>{{domxref("CanvasRenderingContext2D.strokeRect()")}}</li>
-</ul>
+```
+
+{{ EmbedLiveSample('code_jouable', 700, 360) }}
+
+## Spécifications
+
+| Spécification                                                                                                                                | Statut                           | Commentaire |
+| -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- |
+| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fillrect", "CanvasRenderingContext2D.fillRect")}} | {{Spec2('HTML WHATWG')}} |             |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.CanvasRenderingContext2D.fillRect")}}
+
+## Voir aussi
+
+- L'interface qui le définit, {{domxref("CanvasRenderingContext2D")}}
+- {{domxref("CanvasRenderingContext2D.fillStyle")}}
+- {{domxref("CanvasRenderingContext2D.clearRect()")}}
+- {{domxref("CanvasRenderingContext2D.strokeRect()")}}
diff --git a/files/fr/web/api/canvasrenderingcontext2d/fillstyle/index.md b/files/fr/web/api/canvasrenderingcontext2d/fillstyle/index.md
index 598ec204af..539ce49e67 100644
--- a/files/fr/web/api/canvasrenderingcontext2d/fillstyle/index.md
+++ b/files/fr/web/api/canvasrenderingcontext2d/fillstyle/index.md
@@ -9,65 +9,66 @@ tags:
   - Reference
 translation_of: Web/API/CanvasRenderingContext2D/fillStyle
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}
 
-<p>La propriété <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.fillStyle</code></strong> de l'API Canvas 2D spécifie la couleur ou style à utiliser à l'intérieur des formes. La valeur par défaut est <code>#000</code> (black).</p>
+La propriété **`CanvasRenderingContext2D`\*\***`.fillStyle`\*\* de l'API Canvas 2D spécifie la couleur ou style à utiliser à l'intérieur des formes. La valeur par défaut est `#000` (black).
 
-<p>Voir également le chapitre <a href="/fr/docs/Tutoriel_canvas/Ajout_de_styles_et_de_couleurs">Ajout de styles et de couleurs</a> dans le <a href="/fr/docs/Tutoriel_canvas">Tutoriel canvas</a>.</p>
+Voir également le chapitre [Ajout de styles et de couleurs](/fr/docs/Tutoriel_canvas/Ajout_de_styles_et_de_couleurs) dans le [Tutoriel canvas](/fr/docs/Tutoriel_canvas).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var><em>ctx</em>.fillStyle = color;
-</var><var><em>ctx</em>.fillStyle = gradient;
-</var><var><em>ctx</em>.fillStyle = pattern;</var>
-</pre>
+    ctx.fillStyle = color;
+    ctx.fillStyle = gradient;
+    ctx.fillStyle = pattern;
 
-<h3 id="Options">Options</h3>
+### Options
 
-<dl>
- <dt><code>color</code></dt>
- <dd>Une {{domxref("DOMString")}} analysée comme valeur CSS {{cssxref("&lt;color&gt;")}}.</dd>
- <dt><code>gradient</code></dt>
- <dd>Un objet {{domxref("CanvasGradient")}} (un gradient linéaire ou radial).</dd>
- <dt><code>pattern</code></dt>
- <dd>Un objet {{domxref("CanvasPattern")}} (une image répétée).</dd>
-</dl>
+- `color`
+  - : Une {{domxref("DOMString")}} analysée comme valeur CSS {{cssxref("&lt;color&gt;")}}.
+- `gradient`
+  - : Un objet {{domxref("CanvasGradient")}} (un gradient linéaire ou radial).
+- `pattern`
+  - : Un objet {{domxref("CanvasPattern")}} (une image répétée).
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Using_the_fillStyle_property">Utiliser la propriété <code>fillStyle</code> pour définir une couleur différente</h3>
+### Utiliser la propriété `fillStyle` pour définir une couleur différente
 
-<p>Ceci est un simple snippet de code utilisant la propriété <code>fillStyle</code> pour définir une couleur différente.</p>
+Ceci est un simple snippet de code utilisant la propriété `fillStyle` pour définir une couleur différente.
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
-</pre>
+```html
+<canvas id="canvas"></canvas>
+```
 
-<h4 id="JavaScript">JavaScript</h4>
+#### JavaScript
 
-<pre class="brush: js">var canvas = document.getElementById('canvas');
+```js
+var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
 
 ctx.fillStyle = 'blue';
 ctx.fillRect(10, 10, 100, 100);
-</pre>
+```
 
-<p>Éditez le code ci-dessous pour voir vos changements mettre à jour le canvas directement:</p>
+Éditez le code ci-dessous pour voir vos changements mettre à jour le canvas directement:
 
-<h4 id="code_jouable">Code jouable</h4>
+#### Code jouable
 
-<pre class="brush: html hidden">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
-&lt;div class="playable-buttons"&gt;
-  &lt;input id="edit" type="button" value="Edit" /&gt;
-  &lt;input id="reset" type="button" value="Reset" /&gt;
-&lt;/div&gt;
-&lt;textarea id="code" class="playable-code"&gt;
+```html hidden
+<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code">
 ctx.fillStyle = 'blue';
-ctx.fillRect(10, 10, 100, 100);&lt;/textarea&gt;
-</pre>
+ctx.fillRect(10, 10, 100, 100);</textarea>
+```
 
-<pre class="brush: js hidden">var canvas = document.getElementById('canvas');
+```js hidden
+var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
 var textarea = document.getElementById('code');
 var reset = document.getElementById('reset');
@@ -90,69 +91,56 @@ edit.addEventListener('click', function() {
 
 textarea.addEventListener('input', drawCanvas);
 window.addEventListener('load', drawCanvas);
-</pre>
+```
 
-<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p>
+{{ EmbedLiveSample('code_jouable', 700, 360) }}
 
-<h3 id="Un_exemple_fillStyle_avec_les_boucles_for">Un exemple <code>fillStyle</code> avec les boucles <code>for</code></h3>
+### Un exemple `fillStyle` avec les boucles `for`
 
-<p>Dans cet exemple, nous allons utiliser deux boucles <code>for</code> pour dessiner une grille de rectangles, chacun avec une couleur différente. L'image qui en résulte devrait ressembler à la capture d'écran. Il n'y a rien de très extraordinaire ici, nous utilisons deux variables <code>i</code> et <code>j</code> pour générer une couleur RGB unique pour chaque carré, en modifiant uniquement les valeurs de rouge et vert; le canal bleu a une valeur fixe. En modifiant les canaux, vous pouvez générer toutes sorte de palettes. En augmentant le nombre, vous pouvez générer quelque chose de ressemblant aux palettes de couleurs utilisées par Photoshop.</p>
+Dans cet exemple, nous allons utiliser deux boucles `for` pour dessiner une grille de rectangles, chacun avec une couleur différente. L'image qui en résulte devrait ressembler à la capture d'écran. Il n'y a rien de très extraordinaire ici, nous utilisons deux variables `i` et `j` pour générer une couleur RGB unique pour chaque carré, en modifiant uniquement les valeurs de rouge et vert; le canal bleu a une valeur fixe. En modifiant les canaux, vous pouvez générer toutes sorte de palettes. En augmentant le nombre, vous pouvez générer quelque chose de ressemblant aux palettes de couleurs utilisées par Photoshop.
 
-<pre class="brush: html hidden">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
-</div>
+```html hidden
+<canvas id="canvas" width="150" height="150"></canvas>
+```
 
-<pre class="brush: js hidden">var ctx = document.getElementById('canvas').getContext('2d');
-for (var i = 0; i &lt; 6; i++){
-  for (var j = 0; j &lt; 6; j++){
+```js hidden
+var ctx = document.getElementById('canvas').getContext('2d');
+for (var i = 0; i < 6; i++){
+  for (var j = 0; j < 6; j++){
     ctx.fillStyle = 'rgb(' + Math.floor(255 - 42.5 * i) + ',' +
                      Math.floor(255 - 42.5 * j) + ',0)';
     ctx.fillRect(j * 25, i * 25, 25, 25);
   }
 }
-</pre>
+```
 
-<p>Le résultat devrait ressembler à ça:</p>
+Le résultat devrait ressembler à ça:
 
-<p>{{EmbedLiveSample("A_fillStyle_example_with_for_loops", 160, 160, "canvas_fillstyle.png")}}</p>
+{{EmbedLiveSample("A_fillStyle_example_with_for_loops", 160, 160, "canvas_fillstyle.png")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fillstyle", "CanvasRenderingContext2D.fillStyle")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Specification                                                                                                                                    | Status                           | Comment |
+| ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------- |
+| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fillstyle", "CanvasRenderingContext2D.fillStyle")}} | {{Spec2('HTML WHATWG')}} |         |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.CanvasRenderingContext2D.fillStyle")}}</p>
+{{Compat("api.CanvasRenderingContext2D.fillStyle")}}
 
-<h2 id="Notes_spécifiques_à_WebKitBlink">Notes spécifiques à WebKit/Blink</h2>
+## Notes spécifiques à WebKit/Blink
 
-<ul>
- <li>Outre <code>ctx.fillStyle</code>, il existe dans les navigateurs basés sur WebKit et Blink une méthode non-standard et dépréciée, <code>ctx.setFillColor()</code>.
+- Outre `ctx.fillStyle`, il existe dans les navigateurs basés sur WebKit et Blink une méthode non-standard et dépréciée, `ctx.setFillColor()`.
 
-  <pre class="brush: js">setFillColor(color, optional alpha);
-setFillColor(grayLevel, optional alpha);
-setFillColor(r, g, b, a);
-setFillColor(c, m, y, k, a);
-</pre>
- </li>
-</ul>
+  ```js
+  setFillColor(color, optional alpha);
+  setFillColor(grayLevel, optional alpha);
+  setFillColor(r, g, b, a);
+  setFillColor(c, m, y, k, a);
+  ```
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>L'interface définissant cette méthode, {{domxref("CanvasRenderingContext2D")}}</li>
- <li>{{domxref("CanvasGradient")}}</li>
- <li>{{domxref("CanvasPattern")}}</li>
-</ul>
+- L'interface définissant cette méthode, {{domxref("CanvasRenderingContext2D")}}
+- {{domxref("CanvasGradient")}}
+- {{domxref("CanvasPattern")}}
diff --git a/files/fr/web/api/canvasrenderingcontext2d/filltext/index.md b/files/fr/web/api/canvasrenderingcontext2d/filltext/index.md
index fefd1c875a..73d1a75588 100644
--- a/files/fr/web/api/canvasrenderingcontext2d/filltext/index.md
+++ b/files/fr/web/api/canvasrenderingcontext2d/filltext/index.md
@@ -9,68 +9,69 @@ tags:
   - Reference
 translation_of: Web/API/CanvasRenderingContext2D/fillText
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}
 
-<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.fillText()</code></strong> de l'API Canvas 2D écrit un texte donné à la position <em>(x, y)</em> donnée. Si le quatrième paramètre optionnel donnant une largeur maximum est fourni, le texte sera mis à l'échelle pour s'adapter à cette largeur.</p>
+La méthode **`CanvasRenderingContext2D`\*\***`.fillText()`\*_ de l'API Canvas 2D écrit un texte donné à la position _(x, y)\* donnée. Si le quatrième paramètre optionnel donnant une largeur maximum est fourni, le texte sera mis à l'échelle pour s'adapter à cette largeur.
 
-<p>Voir aussi la méthode {{domxref("CanvasRenderingContext2D.strokeText()")}} pour dessiner un texte mis en forme.</p>
+Voir aussi la méthode {{domxref("CanvasRenderingContext2D.strokeText()")}} pour dessiner un texte mis en forme.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">void <var><em>ctx</em>.fillText(texte, x, y [, largeurMax]);</var>
-</pre>
+    void ctx.fillText(texte, x, y [, largeurMax]);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>texte</code></dt>
- <dd>Le texte à représenter en utilisant les valeurs en cours de {{domxref("CanvasRenderingContext2D.font","font")}}, {{domxref("CanvasRenderingContext2D.textAlign","textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline","textBaseline")}}, et de {{domxref("CanvasRenderingContext2D.direction","direction")}}.</dd>
-</dl>
+- `texte`
+  - : Le texte à représenter en utilisant les valeurs en cours de {{domxref("CanvasRenderingContext2D.font","font")}}, {{domxref("CanvasRenderingContext2D.textAlign","textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline","textBaseline")}}, et de {{domxref("CanvasRenderingContext2D.direction","direction")}}.
 
-<dl>
- <dt><code>x</code></dt>
- <dd>La valeur de la coordonnée sur l'axe des x du point de début du texte.</dd>
- <dt><code>y</code></dt>
- <dd>La valeur de la coordonnée sur l'axe des y du point de fin du texte.</dd>
- <dt><code>largeurMax</code> {{optional_inline}}</dt>
- <dd>La largeur maximum à dessiner. Si spécifiée, et si la longueur calculée de la chaîne est supérieure à cette largeur, la police est ajustée pour utiliser une police plus condensée horizontalement (s'il en existe une ou s'il peut en être synthétisée une raisonnablement lisible en mettant à l'échelle horizontalement la police en cours) ou une plus petite police.</dd>
-</dl>
+<!---->
 
-<h2 id="Exemples">Exemples</h2>
+- `x`
+  - : La valeur de la coordonnée sur l'axe des x du point de début du texte.
+- `y`
+  - : La valeur de la coordonnée sur l'axe des y du point de fin du texte.
+- `largeurMax` {{optional_inline}}
+  - : La largeur maximum à dessiner. Si spécifiée, et si la longueur calculée de la chaîne est supérieure à cette largeur, la police est ajustée pour utiliser une police plus condensée horizontalement (s'il en existe une ou s'il peut en être synthétisée une raisonnablement lisible en mettant à l'échelle horizontalement la police en cours) ou une plus petite police.
 
-<h3 id="Utilisation_de_la_méthode_fillText">Utilisation de la méthode <code>fillText</code></h3>
+## Exemples
 
-<p>Ceci est seulement un fragment de code simple utilisant la méthode <code>fillText</code>.</p>
+### Utilisation de la méthode `fillText`
 
-<h4 id="HTML">HTML</h4>
+Ceci est seulement un fragment de code simple utilisant la méthode `fillText`.
 
-<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
-</pre>
+#### HTML
 
-<h4 id="JavaScript">JavaScript</h4>
+```html
+<canvas id="canvas"></canvas>
+```
 
-<pre class="brush: js">var canvas = document.getElementById('canvas');
+#### JavaScript
+
+```js
+var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
 
 ctx.font = '48px serif';
 ctx.fillText('Hello world', 50, 100);
-</pre>
+```
 
-<p>Modifiez le code ci-dessous et voyez vos changements être mis à jour en temps réel dans le canevas :</p>
+Modifiez le code ci-dessous et voyez vos changements être mis à jour en temps réel dans le canevas :
 
-<h4 id="code_jouable">Code jouable</h4>
+#### Code jouable
 
-<pre class="brush: html hidden">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
-&lt;div class="playable-buttons"&gt;
-  &lt;input id="edit" type="button" value="Edit" /&gt;
-  &lt;input id="reset" type="button" value="Reset" /&gt;
-&lt;/div&gt;
-&lt;textarea id="code" class="playable-code"&gt;
+```html hidden
+<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code">
 ctx.font = "48px serif";
-ctx.fillText("Hello world", 50, 100);&lt;/textarea&gt;
-</pre>
+ctx.fillText("Hello world", 50, 100);</textarea>
+```
 
-<pre class="brush: js hidden">var canvas = document.getElementById("canvas");
+```js hidden
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 var textarea = document.getElementById("code");
 var reset = document.getElementById("reset");
@@ -93,34 +94,21 @@ edit.addEventListener("click", function() {
 
 textarea.addEventListener("input", drawCanvas);
 window.addEventListener("load", drawCanvas);
-</pre>
+```
 
-<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p>
+{{ EmbedLiveSample('code_jouable', 700, 360) }}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-filltext", "CanvasRenderingContext2D.fillText")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                                | Statut                           | Commentaire |
+| -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- |
+| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-filltext", "CanvasRenderingContext2D.fillText")}} | {{Spec2('HTML WHATWG')}} |             |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.CanvasRenderingContext2D.fillText")}}</p>
+{{Compat("api.CanvasRenderingContext2D.fillText")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li>
- <li>{{domxref("CanvasRenderingContext2D.strokeText()")}}</li>
-</ul>
+- L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}
+- {{domxref("CanvasRenderingContext2D.strokeText()")}}
diff --git a/files/fr/web/api/canvasrenderingcontext2d/font/index.md b/files/fr/web/api/canvasrenderingcontext2d/font/index.md
index 34b90f9580..37ebc8f81b 100644
--- a/files/fr/web/api/canvasrenderingcontext2d/font/index.md
+++ b/files/fr/web/api/canvasrenderingcontext2d/font/index.md
@@ -9,57 +9,58 @@ tags:
   - Reference
 translation_of: Web/API/CanvasRenderingContext2D/font
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}
 
-<p>La propriété <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.font</code></strong><code> de l'API</code> Canvas 2D API spécifie le style de texte à utiliser pour dessiner du texte. Cette chaîne utilise la même syntaxe que le spécificateur de <a href="/fr-FR/docs/Web/CSS/font">police CSS</a>. La police par défaut est 10px sans-serif.</p>
+La propriété **`CanvasRenderingContext2D`\*\***`.font`\*\*` de l'API` Canvas 2D API spécifie le style de texte à utiliser pour dessiner du texte. Cette chaîne utilise la même syntaxe que le spécificateur de [police CSS](/fr-FR/docs/Web/CSS/font). La police par défaut est 10px sans-serif.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var><em>ctx</em>.font = value;</var>
-</pre>
+    ctx.font = value;
 
-<h3 id="Options">Options</h3>
+### Options
 
-<dl>
- <dt><code>valeur</code></dt>
- <dd>Une valeur {{domxref("DOMString")}} analysée comme une valeur de {{cssxref("font")}} CSS. La police par défaut est 10px sans-serif.</dd>
-</dl>
+- `valeur`
+  - : Une valeur {{domxref("DOMString")}} analysée comme une valeur de {{cssxref("font")}} CSS. La police par défaut est 10px sans-serif.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Utilisation_de_la_propriété_font">Utilisation de la propriété <code>font</code></h3>
+### Utilisation de la propriété `font`
 
-<p>Ceci est seulement un fragment de code simple utilisant la propriéte font pour indiquer une taille de police et une famille de police différentes.</p>
+Ceci est seulement un fragment de code simple utilisant la propriéte font pour indiquer une taille de police et une famille de police différentes.
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
-</pre>
+```html
+<canvas id="canvas"></canvas>
+```
 
-<h4 id="JavaScript">JavaScript</h4>
+#### JavaScript
 
-<pre class="brush: js">var canvas = document.getElementById('canvas');
+```js
+var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
 
 ctx.font = '48px serif';
 ctx.strokeText('Hello world', 50, 100);
-</pre>
+```
 
-<p>Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :</p>
+Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :
 
-<h4 id="code_jouable">Code jouable</h4>
+#### Code jouable
 
-<pre class="brush: html hidden">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
-&lt;div class="playable-buttons"&gt;
-  &lt;input id="edit" type="button" value="Edit" /&gt;
-  &lt;input id="reset" type="button" value="Reset" /&gt;
-&lt;/div&gt;
-&lt;textarea id="code" class="playable-code"&gt;
+```html hidden
+<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code">
 ctx.font = '48px serif';
-ctx.strokeText('Hello world', 50, 100);&lt;/textarea&gt;
-</pre>
+ctx.strokeText('Hello world', 50, 100);</textarea>
+```
 
-<pre class="brush: js hidden">var canvas = document.getElementById('canvas');
+```js hidden
+var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
 var textarea = document.getElementById('code');
 var reset = document.getElementById('reset');
@@ -82,55 +83,40 @@ edit.addEventListener('click', function() {
 
 textarea.addEventListener('input', drawCanvas);
 window.addEventListener('load', drawCanvas);
-</pre>
+```
 
-<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p>
+{{ EmbedLiveSample('code_jouable', 700, 360) }}
 
-<h3 id="Chargement_de_polices_avec_l'API_CSS_Font_Loading">Chargement de polices avec l'API CSS Font Loading</h3>
+### Chargement de polices avec l'API CSS Font Loading
 
-<p>A l'aide de l'API {{domxref("FontFace")}}, vous pouvez explicitement charger des polices avant de les utiliser dans un canevas.</p>
+A l'aide de l'API {{domxref("FontFace")}}, vous pouvez explicitement charger des polices avant de les utiliser dans un canevas.
 
-<pre class="brush: js">var f = new FontFace('test', 'url(x)');
+```js
+var f = new FontFace('test', 'url(x)');
 
 f.load().then(function() {
   // Prêt à utiliser la police dans un contexte de canevas
-});</pre>
+});
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-font", "CanvasRenderingContext2D.font")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                        | Statut                           | Commentaire |
+| ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- |
+| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-font", "CanvasRenderingContext2D.font")}} | {{Spec2('HTML WHATWG')}} |             |
 
-<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+## Compatibilité navigateurs
 
-<p>{{Compat("api.CanvasRenderingContext2D.font")}}</p>
+{{Compat("api.CanvasRenderingContext2D.font")}}
 
-<h2 id="Notes_spécifiques_à_Gecko">Notes spécifiques à Gecko</h2>
+## Notes spécifiques à Gecko
 
-<ul>
- <li>Dans les navigateurs basés sur Gecko, tels que Firefox, une propriété non standard et désapprouvée <code>ctx.mozTextStyle</code> est implémentée en plus de cette propriété. Ne l'utilisez pas.</li>
-</ul>
+- Dans les navigateurs basés sur Gecko, tels que Firefox, une propriété non standard et désapprouvée `ctx.mozTextStyle` est implémentée en plus de cette propriété. Ne l'utilisez pas.
 
-<h3 id="Notes_relatives_à_Quantum">Notes relatives à Quantum</h3>
+### Notes relatives à Quantum
 
-<ul>
- <li>Un bug ({{bug(1374885)}}) a été corrigé avec Quantum et qui empêchait de récupérer la police d'un contexte lorsqu'une police système était utilisée. Cela a été corrigée avec <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a> qui a été publié avec Firefox 57.</li>
-</ul>
+- Un bug ({{bug(1374885)}}) a été corrigé avec Quantum et qui empêchait de récupérer la police d'un contexte lorsqu'une police système était utilisée. Cela a été corrigée avec [Stylo](https://wiki.mozilla.org/Quantum/Stylo) qui a été publié avec Firefox 57.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li>
-</ul>
+- L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}
diff --git a/files/fr/web/api/canvasrenderingcontext2d/getimagedata/index.md b/files/fr/web/api/canvasrenderingcontext2d/getimagedata/index.md
index 94059efba8..e49af96a35 100644
--- a/files/fr/web/api/canvasrenderingcontext2d/getimagedata/index.md
+++ b/files/fr/web/api/canvasrenderingcontext2d/getimagedata/index.md
@@ -14,88 +14,72 @@ tags:
   - getImageDate
 translation_of: Web/API/CanvasRenderingContext2D/getImageData
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}
 
-<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.getImageData()</code></strong> de l'API Canvas 2D retourne un  objet {{domxref("ImageData")}} représentant les données de pixels sous-jacentes pour la zone du canevas désigné par le rectangle qui commence aux positions <em>(sx, sy)</em> et qui possède des attributs : <em>largeur (sw</em>) et <em>hauteur</em> (<em>sh)</em>. Cette méthode n'est pas affectée par la matrice de transformation du canevas.</p>
+La méthode **`CanvasRenderingContext2D`\*\***`.getImageData()`\*_ de l'API Canvas 2D retourne un  objet {{domxref("ImageData")}} représentant les données de pixels sous-jacentes pour la zone du canevas désigné par le rectangle qui commence aux positions _(sx, sy)* et qui possède des attributs : *largeur (sw*) et *hauteur* (*sh)\*. Cette méthode n'est pas affectée par la matrice de transformation du canevas.
 
-<p>Les pixels en dehors de la zone de canevas sont présents sous forme de valeurs noires transparentes dans les données d'image renvoyées.</p>
+Les pixels en dehors de la zone de canevas sont présents sous forme de valeurs noires transparentes dans les données d'image renvoyées.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">ImageData <var><em>ctx</em>.getImageData(sx, sy, sw, sh);</var>
-</pre>
+    ImageData ctx.getImageData(sx, sy, sw, sh);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>sx</code></dt>
- <dd>La coordonnée x du coin supérieur gauche du rectangle à partir duquel <em>ImageData</em> sera extrait.</dd>
- <dt><code>sy</code></dt>
- <dd>La coordonnée y du coin supérieur gauche du rectangle à partir duquel <em>ImageData</em><strong><em> </em></strong> sera extrait.</dd>
- <dt><code>sw</code></dt>
- <dd>La largeur du rectangle à partir duquel <em>ImageData<strong> </strong></em>sera extrait.</dd>
- <dt><code>sh</code></dt>
- <dd>La hauteur du rectangle à partir duquel <em>ImageData<strong> </strong></em>sera extrait.</dd>
-</dl>
+- `sx`
+  - : La coordonnée x du coin supérieur gauche du rectangle à partir duquel _ImageData_ sera extrait.
+- `sy`
+  - : La coordonnée y du coin supérieur gauche du rectangle à partir duquel \*ImageData\***\* \*** sera extrait.
+- `sw`
+  - : La largeur du rectangle à partir duquel \*ImageData** \***sera extrait.
+- `sh`
+  - : La hauteur du rectangle à partir duquel \*ImageData** \***sera extrait.
 
-<h3 id="Valeur_retournée">Valeur retournée</h3>
+### Valeur retournée
 
-<p>Un objet {{domxref("ImageData")}}  contenant les données de l'image pour le rectangle donné du canevas.</p>
+Un objet {{domxref("ImageData")}}  contenant les données de l'image pour le rectangle donné du canevas.
 
-<h3 id="Erreurs_renvoyées">Erreurs renvoyées</h3>
+### Erreurs renvoyées
 
-<dl>
- <dt><code>IndexSizeError</code></dt>
- <dd>Renvoyé si l'un des arguments de  largeur ou de hauteur est égal à zéro.</dd>
-</dl>
+- `IndexSizeError`
+  - : Renvoyé si l'un des arguments de  largeur ou de hauteur est égal à zéro.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Utilisation_de_la_méthode_getImageData">Utilisation de la méthode  <code>getImageData</code></h3>
+### Utilisation de la méthode  `getImageData`
 
-<p>Ceci est juste un petit exemple qui utilise la méthode getImageData. Pour plus d'informations, visitez  <a href="/fr/docs/Tutoriel_canvas/Pixel_manipulation_with_canvas">Manipulation de pixels avec canvas</a> et l'objet {{domxref("ImageData")}}.</p>
+Ceci est juste un petit exemple qui utilise la méthode getImageData. Pour plus d'informations, visitez  [Manipulation de pixels avec canvas](/fr/docs/Tutoriel_canvas/Pixel_manipulation_with_canvas) et l'objet {{domxref("ImageData")}}.
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
-</pre>
+```html
+<canvas id="canvas"></canvas>
+```
 
-<h4 id="JavaScript">JavaScript</h4>
+#### JavaScript
 
-<pre class="brush: js">var canvas = document.getElementById('canvas');
+```js
+var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
 ctx.rect(10, 10, 100, 100);
 ctx.fill();
 
 console.log(ctx.getImageData(50, 50, 100, 100));
 // ImageData { largeur: 100, hauteur: 100, données: Uint8ClampedArray[40000] }
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-getimagedata", "CanvasRenderingContext2D.getImageData")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.CanvasRenderingContext2D.getImageData")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>L'interface le définissant : {{domxref("CanvasRenderingContext2D")}}.</li>
- <li>{{domxref("ImageData")}}</li>
- <li><a href="/fr/docs/Tutoriel_canvas/Pixel_manipulation_with_canvas">Manipulation de pixels avec canvas</a></li>
-</ul>
+```
+
+## Spécifications
+
+| Spécification                                                                                                                                            | Statut                           | Commentaire |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- |
+| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-getimagedata", "CanvasRenderingContext2D.getImageData")}} | {{Spec2('HTML WHATWG')}} |             |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.CanvasRenderingContext2D.getImageData")}}
+
+## Voir aussi
+
+- L'interface le définissant : {{domxref("CanvasRenderingContext2D")}}.
+- {{domxref("ImageData")}}
+- [Manipulation de pixels avec canvas](/fr/docs/Tutoriel_canvas/Pixel_manipulation_with_canvas)
diff --git a/files/fr/web/api/canvasrenderingcontext2d/globalalpha/index.md b/files/fr/web/api/canvasrenderingcontext2d/globalalpha/index.md
index 5b404da724..3ffbf48e4e 100644
--- a/files/fr/web/api/canvasrenderingcontext2d/globalalpha/index.md
+++ b/files/fr/web/api/canvasrenderingcontext2d/globalalpha/index.md
@@ -9,40 +9,35 @@ tags:
   - Reference
 translation_of: Web/API/CanvasRenderingContext2D/globalAlpha
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}La propriété **CanvasRenderingContext2D.globalAlpha** de l'API Canvas 2D spécifie la valeur alpha qui sera appliquée aux formes et aux images avant qu'elles ne soient dessinées sur le canevas. La valeur est comprise entre 0,0 (entièrement transparente) et 1,0 (entièrement opaque).
 
-<div>La propriété <strong>CanvasRenderingContext2D.globalAlpha</strong> de l'API Canvas 2D spécifie la valeur alpha qui sera appliquée aux formes et aux images avant qu'elles ne soient dessinées sur le canevas. La valeur est comprise entre 0,0 (entièrement transparente) et 1,0 (entièrement opaque).</div>
+Voir aussi le chapitre [Ajout de styles et de couleurs](/fr-FR/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors) dans le [Tutoriel canvas](/fr-FR/docs/Web/API/Canvas_API/Tutorial).
 
-<div> </div>
+## Syntaxe
 
-<p>Voir aussi le chapitre <a href="/fr-FR/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">Ajout de styles et de couleurs</a> dans le <a href="/fr-FR/docs/Web/API/Canvas_API/Tutorial">Tutoriel canvas</a>.</p>
+    ctx.globalAlpha = valeur;
 
-<h2 id="Syntaxe">Syntaxe</h2>
+### Options
 
-<pre class="syntaxbox"><var>ctx.globalAlpha = valeur;</var>
-</pre>
+- `valeur`
+  - : Un nombre entre 0,0 (entièrement transparente) et 1,0 (entièrement opaque). La valeur par défaut est 1,0. Les valeurs hors de la plage, y compris {{jsxref ("Infinity")}} et {{jsxref ("NaN")}} ne seront pas définies et `globalAlpha` conservera sa valeur précédente.
 
-<h3 id="Options">Options</h3>
+## Exemples
 
-<dl>
- <dt><code>valeur</code></dt>
- <dd>Un nombre entre 0,0 (entièrement transparente) et 1,0 (entièrement opaque). La valeur par défaut est 1,0. Les valeurs hors de la plage, y compris {{jsxref ("Infinity")}} et {{jsxref ("NaN")}} ne seront pas définies et <code>globalAlpha</code> conservera sa valeur précédente.</dd>
-</dl>
+### Utilisation de la propriété `globalAlpha`
 
-<h2 id="Exemples">Exemples</h2>
+Il s'agit seulement d'un simple fragment de code utilisant la propriété `globalAlpha` pour dessiner deux rectangles semi-transparents.
 
-<h3 id="Using_the_globalAlpha_property">Utilisation de la propriété <code>globalAlpha</code></h3>
+#### HTML
 
-<p>Il s'agit seulement d'un simple fragment de code utilisant la propriété <code>globalAlpha</code> pour dessiner deux rectangles semi-transparents.</p>
+```html
+<canvas id="canevas"></canvas>
+```
 
-<h4 id="HTML">HTML</h4>
+#### JavaScript
 
-<pre class="brush: html">&lt;canvas id="canevas"&gt;&lt;/canvas&gt;
-</pre>
-
-<h4 id="JavaScript">JavaScript</h4>
-
-<pre class="brush: js">var canevas = document.getElementById('canevas');
+```js
+var canevas = document.getElementById('canevas');
 var ctx = canevas.getContext('2d');
 
 ctx.globalAlpha = 0.5;
@@ -52,28 +47,30 @@ ctx.fillRect(10, 10, 100, 100);
 
 ctx.fillStyle = "red";
 ctx.fillRect(50, 50, 100, 100);
-</pre>
+```
 
-<p>Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct dans le canevas :</p>
+Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct dans le canevas :
 
-<h4 id="code_jouable">Code jouable</h4>
+#### Code jouable
 
-<pre class="brush: html hidden">&lt;canvas id="canevas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
-&lt;div class="playable-buttons"&gt;
-  &lt;input id="modifier" type="button" value="Modifier" /&gt;
-  &lt;input id="effacement" type="button" value="Effacement" /&gt;
-&lt;/div&gt;
-&lt;textarea id="code" class="playable-code" style="height:120px;"&gt;
+```html hidden
+<canvas id="canevas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="modifier" type="button" value="Modifier" />
+  <input id="effacement" type="button" value="Effacement" />
+</div>
+<textarea id="code" class="playable-code" style="height:120px;">
 ctx.globalAlpha = 0.5;
 
 ctx.fillStyle = 'blue';
 ctx.fillRect(10, 10, 100, 100);
 
 ctx.fillStyle = 'red';
-ctx.fillRect(50, 50, 100, 100);&lt;/textarea&gt;
-</pre>
+ctx.fillRect(50, 50, 100, 100);</textarea>
+```
 
-<pre class="brush: js hidden">var canevas = document.getElementById('canevas');
+```js hidden
+var canevas = document.getElementById('canevas');
 var ctx = canevas.getContext('2d');
 var zoneTexte = document.getElementById('code');
 var effacement = document.getElementById('effacement');
@@ -96,15 +93,16 @@ modifier.addEventListener('click', function() {
 
 zoneTexte.addEventListener('input', dessinerCanevas);
 window.addEventListener('load', dessinerCanevas);
-</pre>
+```
 
-<p>{{ EmbedLiveSample('code_jouable', 700, 380) }}</p>
+{{ EmbedLiveSample('code_jouable', 700, 380) }}
 
-<h3 id="A_globalAlpha_example">Un exemple de <code>globalAlpha</code></h3>
+### Un exemple de `globalAlpha`
 
-<p>Dans cet exemple, un arrière-plan de quatre carrés de différentes couleurs est dessiné. Au dessus, se trouve un ensemble de cercles semi-transparents. La propriété globalAlpha est définie à 0,2, valeur qui sera utilisée pour toutes les formes à partir de ce point. Chaque étape de la boucle <code>for</code> dessine un ensemble de cercles de rayons croissants. Le résultat final est un dégradé radial. En superposant toujours plus de cercles les uns sur les autres, la transparence des cercles déjà dessinés est réduite. En augmentant le nombre d'étapes et, concrètement, en dessinant davantage de cercles, l'arrière-plan disparaitra complètement du centre de l'image.</p>
+Dans cet exemple, un arrière-plan de quatre carrés de différentes couleurs est dessiné. Au dessus, se trouve un ensemble de cercles semi-transparents. La propriété globalAlpha est définie à 0,2, valeur qui sera utilisée pour toutes les formes à partir de ce point. Chaque étape de la boucle `for` dessine un ensemble de cercles de rayons croissants. Le résultat final est un dégradé radial. En superposant toujours plus de cercles les uns sur les autres, la transparence des cercles déjà dessinés est réduite. En augmentant le nombre d'étapes et, concrètement, en dessinant davantage de cercles, l'arrière-plan disparaitra complètement du centre de l'image.
 
-<pre class="brush: js">var ctx = document.getElementById('canevas').getContext('2d');
+```js
+var ctx = document.getElementById('canevas').getContext('2d');
 
 // Dessiner l'arrière-plan
 ctx.fillStyle = '#FD0';
@@ -121,53 +119,38 @@ ctx.fillStyle = '#FFF';
 ctx.globalAlpha = 0.2;
 
 // Dessiner les cercles semi-transparents
-for (i = 0; i &lt; 7; i++){
+for (i = 0; i < 7; i++){
   ctx.beginPath();
   ctx.arc(75, 75, 10 + 10 * i, 0, Math.PI * 2, true);
   ctx.fill();
 }
-</pre>
+```
 
-<pre class="brush: html hidden">&lt;canvas id="canevas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+```html hidden
+<canvas id="canevas" width="150" height="150"></canvas>
+```
 
-<p>{{EmbedLiveSample("A_globalAlpha_example", "180", "180", "canvas_globalalpha.png")}}</p>
+{{EmbedLiveSample("A_globalAlpha_example", "180", "180", "canvas_globalalpha.png")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-globalalpha", "CanvasRenderingContext2D.globalAlpha")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                                        | Statut                           | Commentaire |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- |
+| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-globalalpha", "CanvasRenderingContext2D.globalAlpha")}} | {{Spec2('HTML WHATWG')}} |             |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.CanvasRenderingContext2D.globalAlpha")}}</p>
+{{Compat("api.CanvasRenderingContext2D.globalAlpha")}}
 
-<h2 id="Notes_spécifiques_à_Gecko">Notes spécifiques à Gecko</h2>
+## Notes spécifiques à Gecko
 
-<ul>
- <li>À partir de Gecko 5.0, la spécification de valeurs invalides pour globalAlpha ne génère plus une exception SYNTAX_ERR ; celles-ci sont silencieusement et correctement ignorées.</li>
-</ul>
+- À partir de Gecko 5.0, la spécification de valeurs invalides pour globalAlpha ne génère plus une exception SYNTAX_ERR ; celles-ci sont silencieusement et correctement ignorées.
 
-<h2 id="Notes_spécifiques_à_WebKitBlink">Notes spécifiques à WebKit/Blink</h2>
+## Notes spécifiques à WebKit/Blink
 
-<ul>
- <li>Dans les navigateurs WebKit et Blink, une méthode non standard et désapprouvée <code>ctx.setAlpha() </code>est implémentée en plus de cette propriété.</li>
-</ul>
+- Dans les navigateurs WebKit et Blink, une méthode non standard et désapprouvée `ctx.setAlpha() `est implémentée en plus de cette propriété.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li>
- <li>{{domxref("CanvasRenderingContext2D.globalCompositeOperation")}}</li>
-</ul>
+- L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}
+- {{domxref("CanvasRenderingContext2D.globalCompositeOperation")}}
diff --git a/files/fr/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.md b/files/fr/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.md
index 7291e23e2b..c82c88770b 100644
--- a/files/fr/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.md
+++ b/files/fr/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.md
@@ -3,36 +3,38 @@ title: CanvasRenderingContext2D.globalCompositeOperation
 slug: Web/API/CanvasRenderingContext2D/globalCompositeOperation
 translation_of: Web/API/CanvasRenderingContext2D/globalCompositeOperation
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}
 
-<p>La propriété <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.globalCompositeOperation</code></strong> de l'API Canvas 2D définit le type d'opération de composition à appliquer lors du tracé de nouvelles formes.</p>
+La propriété **`CanvasRenderingContext2D`\*\***`.globalCompositeOperation`\*\* de l'API Canvas 2D définit le type d'opération de composition à appliquer lors du tracé de nouvelles formes.
 
-<p>Voir aussi <a href="/fr/docs/Tutoriel_canvas/Composition">Composition et découpe</a> dans le <a href="/fr/docs/Tutoriel_canvas">Tutoriel canvas</a>.</p>
+Voir aussi [Composition et découpe](/fr/docs/Tutoriel_canvas/Composition) dans le [Tutoriel canvas](/fr/docs/Tutoriel_canvas).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>ctx</em>.globalCompositeOperation = <em>type</em>;</pre>
+    ctx.globalCompositeOperation = type;
 
-<p><code>type</code> est de type {{jsxref("String")}} et permet de choisir quelle opération de composition ou de mode fondu utiliser.</p>
+`type` est de type {{jsxref("String")}} et permet de choisir quelle opération de composition ou de mode fondu utiliser.
 
-<h3 id="Types">Types</h3>
+### Types
 
-<p>{{EmbedLiveSample("Compositing_example", 750, 6900, "" ,"Web/API/Canvas_API/Tutorial/Compositing/Example")}}</p>
+{{EmbedLiveSample("Compositing_example", 750, 6900, "" ,"Web/API/Canvas_API/Tutorial/Compositing/Example")}}
 
-<h2 id="Examples">Examples</h2>
+## Examples
 
-<h3 id="Changer_lopération_de_composition">Changer l'opération de composition</h3>
+### Changer l'opération de composition
 
-<p>Cet exemple utilise la propriété <code>globalCompositeOperation</code> pour dessiner deux rectangles qui s'excluent l'un l'autre quand ils se superposent.</p>
+Cet exemple utilise la propriété `globalCompositeOperation` pour dessiner deux rectangles qui s'excluent l'un l'autre quand ils se superposent.
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
-</pre>
+```html
+<canvas id="canvas"></canvas>
+```
 
-<h4 id="JavaScript">JavaScript</h4>
+#### JavaScript
 
-<pre class="brush: js">const canvas = document.getElementById('canvas');
+```js
+const canvas = document.getElementById('canvas');
 const ctx = canvas.getContext('2d');
 
 ctx.globalCompositeOperation = 'xor';
@@ -42,54 +44,33 @@ ctx.fillRect(10, 10, 100, 100);
 
 ctx.fillStyle = 'red';
 ctx.fillRect(50, 50, 100, 100);
-</pre>
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{ EmbedLiveSample('Changing_the_composite_operation', 700, 180) }}</p>
+{{ EmbedLiveSample('Changing_the_composite_operation', 700, 180) }}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Etat</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-globalcompositeoperation", "CanvasRenderingContext2D.globalCompositeOperation")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('Compositing')}}</td>
-   <td>{{Spec2('Compositing')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                                                                            | Etat                             | Commentaires |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ |
+| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-globalcompositeoperation", "CanvasRenderingContext2D.globalCompositeOperation")}} | {{Spec2('HTML WHATWG')}} |              |
+| {{SpecName('Compositing')}}                                                                                                                                                     | {{Spec2('Compositing')}} |              |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.CanvasRenderingContext2D.globalCompositeOperation")}}</p>
+{{Compat("api.CanvasRenderingContext2D.globalCompositeOperation")}}
 
-<h3 id="Remarques_concernant_WebKitBlink">Remarques concernant WebKit/Blink</h3>
+### Remarques concernant WebKit/Blink
 
-<ul>
- <li>Dans les navigateurs de type WebKit et Blink, la méthode non-standard et obsolète <code>ctx.setCompositeOperation()</code> est implémentée à la place de cette propriété.</li>
- <li>Le support de <code>"plus-darker"</code> et<code>"darker"</code> a été abandonné à partir de Chrome 48. Veuillez utiliser <code>"darken"</code> à la place.</li>
-</ul>
+- Dans les navigateurs de type WebKit et Blink, la méthode non-standard et obsolète `ctx.setCompositeOperation()` est implémentée à la place de cette propriété.
+- Le support de `"plus-darker"` et`"darker"` a été abandonné à partir de Chrome 48. Veuillez utiliser `"darken"` à la place.
 
-<h3 id="Remarques_concernant_Gecko">Remarques concernant Gecko</h3>
+### Remarques concernant Gecko
 
-<ul>
- <li>Une version préliminaire de la spécification de Canvas définissait une valeur <code>"darker"</code>. Cependant, Firefox a abandonné le support de <code>"darker"</code> dans sa version 4 ({{bug(571532)}}). Voir aussi <a href="http://dropshado.ws/post/77229081704/firefox-doesnt-support-canvas-composite-darker">cet article de blog</a> qui suggère l'utilisation de <code>"difference"</code> pour parvenir à un effet similaire à <code>"darker"</code>.</li>
-</ul>
+- Une version préliminaire de la spécification de Canvas définissait une valeur `"darker"`. Cependant, Firefox a abandonné le support de `"darker"` dans sa version 4 ({{bug(571532)}}). Voir aussi [cet article de blog](http://dropshado.ws/post/77229081704/firefox-doesnt-support-canvas-composite-darker) qui suggère l'utilisation de `"difference"` pour parvenir à un effet similaire à `"darker"`.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>L'interface qui définit cette propriété : {{domxref("CanvasRenderingContext2D")}}</li>
- <li>{{domxref("CanvasRenderingContext2D.globalAlpha")}}</li>
-</ul>
+- L'interface qui définit cette propriété : {{domxref("CanvasRenderingContext2D")}}
+- {{domxref("CanvasRenderingContext2D.globalAlpha")}}
diff --git a/files/fr/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.md b/files/fr/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.md
index d9064377d8..27fa24574b 100644
--- a/files/fr/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.md
+++ b/files/fr/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.md
@@ -11,37 +11,37 @@ tags:
   - Reference
 translation_of: Web/API/CanvasRenderingContext2D/imageSmoothingEnabled
 ---
-<div>{{APIRef}} {{SeeCompatTable}}</div>
+{{APIRef}} {{SeeCompatTable}}
 
-<p>La propriété <code>CanvasRenderingContext2D.imageSmoothingEnabled</code> de l'API Canvas 2D peut être affectée pour changer le fait que les images soient lissées (<code>true</code>, par défaut) ou non (<code>false</code>). Lors de la récupération de la propriété <code>imageSmoothingEnabled</code>, la dernière valeur à laquelle elle a été définie est renvoyée.</p>
+La propriété `CanvasRenderingContext2D.imageSmoothingEnabled` de l'API Canvas 2D peut être affectée pour changer le fait que les images soient lissées (`true`, par défaut) ou non (`false`). Lors de la récupération de la propriété `imageSmoothingEnabled`, la dernière valeur à laquelle elle a été définie est renvoyée.
 
-<p>Cette propriété est utile pour les jeux à thème pixel-art, lors d'une mise à l'échelle du canvas par exemple. L'algorithme de redimensionnement par défaut peut créer des effets de flou et ruiner les jolis pixels. Mettez cette propriété à <code>false</code> dans ce cas. Voir aussi la propriété CSS {{cssxref("image-rendering")}}.</p>
+Cette propriété est utile pour les jeux à thème pixel-art, lors d'une mise à l'échelle du canvas par exemple. L'algorithme de redimensionnement par défaut peut créer des effets de flou et ruiner les jolis pixels. Mettez cette propriété à `false` dans ce cas. Voir aussi la propriété CSS {{cssxref("image-rendering")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var><em>ctx</em>.imageSmoothingEnabled = valeur;</var></pre>
+    ctx.imageSmoothingEnabled = valeur;
 
-<h3 id="Options">Options</h3>
+### Options
 
-<dl>
- <dt><code>valeur</code></dt>
- <dd>Un {{jsxref("Boolean")}} indiquant de lisser les images ou non.</dd>
-</dl>
+- `valeur`
+  - : Un {{jsxref("Boolean")}} indiquant de lisser les images ou non.
 
-<h2 id="exemples">exemples</h2>
+## exemples
 
-<h3 id="désactiver_le_lissage_d_image">Désactiver le lissage d'image</h3>
+### Désactiver le lissage d'image
 
-<p>Dans cet exemple, on compare trois images. La première image est dessinée avec sa taille naturelle, la deuxième est élargie pour obtenir 3 fois la taille originale et le lissage est activée, la troisième est élargie pour obtenir 3 fois la taille originale et le lissage est désactivé.</p>
+Dans cet exemple, on compare trois images. La première image est dessinée avec sa taille naturelle, la deuxième est élargie pour obtenir 3 fois la taille originale et le lissage est activée, la troisième est élargie pour obtenir 3 fois la taille originale et le lissage est désactivé.
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;canvas id="canvas" width="460" height="210"&gt;&lt;/canvas&gt;
-</pre>
+```html
+<canvas id="canvas" width="460" height="210"></canvas>
+```
 
-<h4 id="JavaScript">JavaScript</h4>
+#### JavaScript
 
-<pre class="brush: js;">const canvas = document.getElementById('canvas');
+```js
+const canvas = document.getElementById('canvas');
 
 const ctx = canvas.getContext('2d');
 ctx.font = '16px sans-serif';
@@ -64,36 +64,23 @@ img.onload = function() {
   ctx.imageSmoothingEnabled = false;
   ctx.drawImage(img, w * 4, 24, w * 3, h * 3);
 };
-</pre>
+```
 
-<h4 id="résultat">Résultat</h4>
+#### Résultat
 
-<p>{{ EmbedLiveSample('désactiver_le_lissage_d_image', 700, 240) }}</p>
+{{ EmbedLiveSample('désactiver_le_lissage_d_image', 700, 240) }}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-imagesmoothingenabled", "CanvasRenderingContext2D.imageSmoothingEnabled")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                                                                    | Statut                           | Commentaire |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- |
+| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-imagesmoothingenabled", "CanvasRenderingContext2D.imageSmoothingEnabled")}} | {{Spec2('HTML WHATWG')}} |             |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.CanvasRenderingContext2D.imageSmoothingEnabled")}}</p>
+{{Compat("api.CanvasRenderingContext2D.imageSmoothingEnabled")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li>
- <li>{{cssxref("image-rendering")}}</li>
-</ul>
+- L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}
+- {{cssxref("image-rendering")}}
diff --git a/files/fr/web/api/canvasrenderingcontext2d/index.md b/files/fr/web/api/canvasrenderingcontext2d/index.md
index 73758824a3..68b20a683f 100644
--- a/files/fr/web/api/canvasrenderingcontext2d/index.md
+++ b/files/fr/web/api/canvasrenderingcontext2d/index.md
@@ -8,373 +8,311 @@ tags:
   - graphique
 translation_of: Web/API/CanvasRenderingContext2D
 ---
-<p>{{APIRef}}</p>
-
-<p>L'interface <strong>CanvasRenderingContext2D</strong> est utilisée pour dessiner des rectangles, du texte, des images et d'autres objets sur l'élément canvas. Il fournit le contexte de rendu 2D pour la surface de dessin d'un élément {{HTMLElement("canvas")}}.</p>
-
-<p>Pour obtenir un objet de cette interface, appelez {{domxref("HTMLCanvasElement.getContext()", "getContext()")}} sur un élément <code>&lt;canvas&gt;</code>, en fournissant "2d" comme argument :</p>
-
-<pre>var canevas = document.getElementById('tutorial'); // dans votre HTML, cet élément apparaît comme &lt;canvas id="monCanevas"&gt;&lt;/canvas&gt;
-var ctx = canevas.getContext('2d');
-</pre>
-
-<p>Une fois que vous avez le contexte de rendu 2D pour un canevas, vous pouvez dessiner à l'intérieur. Par exemple :</p>
-
-<pre>ctx.fillStyle = "rgb(200,0,0)"; // définit la couleur de remplissage du rectangle
-ctx.fillRect(10, 10, 55, 50);   // dessine le rectangle à la position 10, 10 d'une largeur de 55 et d'une hauteur de 50
-</pre>
-
-<p>Voir les propriétés et les méthodes dans la barre latérale et plus bas. Le <a href="/fr-FR/docs/Web/API/Canvas_API/Tutorial">tutoriel canvas</a> a davantage d'informations, d'exemples et de ressources également.</p>
-
-<h2 id="Dessin_de_rectangles">Dessin de rectangles</h2>
-
-<p>Il existe trois méthodes qui dessinent immédiatement des rectangles sur la bitmap.</p>
-
-<dl>
- <dt>{{domxref("CanvasRenderingContext2D.clearRect()")}}</dt>
- <dd>Initialise tous les pixels dans le rectangle défini par le point de départ <em>(x, y)</em> et la taille <em>(largeur, hauteur)</em> à noir transparent, en effaçant tout contenu précédemment dessiné.</dd>
- <dt>{{domxref("CanvasRenderingContext2D.fillRect()")}}</dt>
- <dd>Dessine un rectangle rempli à la position <em>(x, y)</em> dont la taille est déterminée par <em>largeur</em> et <em>hauteur</em>.</dd>
- <dt>{{domxref("CanvasRenderingContext2D.strokeRect()")}}</dt>
- <dd>Peint un rectangle ayant un point de départ en <em>(x, y)</em>, une largeur <em>l</em> et une hauteur <em>h</em> sur le canevas, en utilisant le style de trait en cours.</dd>
-</dl>
-
-<h2 id="Dessiner_du_texte">Dessiner du texte</h2>
-
-<p>Les méthodes suivantes permettent de dessiner du texte. Voir aussi l'objet {{domxref("TextMetrics")}} pour les propriétés du texte.</p>
-
-<dl>
- <dt>{{domxref("CanvasRenderingContext2D.fillText()")}}</dt>
- <dd>Dessine (rempli) un texte donné à la position (x,y) donnée.</dd>
- <dt>{{domxref("CanvasRenderingContext2D.strokeText()")}}</dt>
- <dd>Dessine (contour) un texte donné à la position (x, y) donnée.</dd>
- <dt>{{domxref("CanvasRenderingContext2D.measureText()")}}</dt>
- <dd>Renvoie un objet {{domxref("TextMetrics")}}.</dd>
-</dl>
-
-<h2 id="Styles_de_ligne">Styles de ligne</h2>
-
-<p>Les méthodes et propriétés suivantes controllent comment les lignes sont dessinées.</p>
-
-<dl>
- <dt>{{domxref("CanvasRenderingContext2D.lineWidth")}}</dt>
- <dd>Largeur des lignes. Défaut <code>1.0</code></dd>
- <dt>{{domxref("CanvasRenderingContext2D.lineCap")}}</dt>
- <dd>Type de finission pour la fin de la ligne. Valeurs possible: <code>butt</code> (défaut), <code>round</code>, <code>square</code>.</dd>
- <dt>{{domxref("CanvasRenderingContext2D.lineJoin")}}</dt>
- <dd>Définit le type de coin quand deux lignes se rejoignent. Valeurs possible: <code>round</code>, <code>bevel</code>, <code>miter</code> (défaut).</dd>
- <dt>{{domxref("CanvasRenderingContext2D.miterLimit")}}</dt>
- <dd>Le taux limite du miter. Sa valeur par défaut est <code>10</code>.</dd>
- <dt>{{domxref("CanvasRenderingContext2D.getLineDash()")}}</dt>
- <dd>Retourne le tableau de modèle du trait courant contenant un nombre pair de nombre positifs.</dd>
- <dt>{{domxref("CanvasRenderingContext2D.setLineDash()")}}</dt>
- <dd>Définit le modèle du trait courant.</dd>
- <dt>{{domxref("CanvasRenderingContext2D.lineDashOffset")}}</dt>
- <dd>Specifies where to start a dash array on a line.</dd>
-</dl>
-
-<h2 id="Styles_de_texte">Styles de texte</h2>
-
-<p>Les propriétés suivantes contrôlent la manière dont le texte est rendu à l’affichage.</p>
-
-<dl>
- <dt>{{domxref("CanvasRenderingContext2D.font")}}</dt>
- <dd>Paramètre de fonte dont la valeur par défaut est <code>10px sans-serif</code>.</dd>
- <dt>{{domxref("CanvasRenderingContext2D.textAlign")}}</dt>
- <dd>Paramètre d’alignement horizontal. Ses valeurs possibles sont : <code>start</code> (par défaut), <code>end</code>, <code>left</code>, <code>right</code> et <code>center</code>.</dd>
- <dt>{{domxref("CanvasRenderingContext2D.textBaseline")}}</dt>
- <dd>Paramètre d’alignement vertical par rapport à la ligne de base du texte. Ses valeurs possibles sont : <code>top</code>, <code>hanging</code>, <code>middle</code>, <code>alphabetic</code> (par défaut), <code>ideographic</code>, <code>bottom</code>.</dd>
- <dt>{{domxref("CanvasRenderingContext2D.direction")}}</dt>
- <dd>Direction d’affichage. Ses valeurs possibles sont : <code>ltr, rtl</code>, <code>inherit</code> (par défaut).</dd>
-</dl>
-
-<h2 id="Fill_and_stroke_styles">Fill and stroke styles</h2>
-
-<p>Fill styling is used for colors and styles inside shapes and stroke styling is used for the lines around shapes.</p>
-
-<dl>
- <dt>{{domxref("CanvasRenderingContext2D.fillStyle")}}</dt>
- <dd>Color or style to use inside shapes. Default <code>#000</code> (black).</dd>
- <dt>{{domxref("CanvasRenderingContext2D.strokeStyle")}}</dt>
- <dd>Color or style to use for the lines around shapes. Default <code>#000</code> (black).</dd>
-</dl>
-
-<h2 id="Gradients_and_patterns">Gradients and patterns</h2>
-
-<dl>
- <dt>{{domxref("CanvasRenderingContext2D.createLinearGradient()")}}</dt>
- <dd>Creates a linear gradient along the line given by the coordinates represented by the parameters.</dd>
- <dt>{{domxref("CanvasRenderingContext2D.createRadialGradient()")}}</dt>
- <dd>Creates a radial gradient given by the coordinates of the two circles represented by the parameters.</dd>
- <dt>{{domxref("CanvasRenderingContext2D.createPattern()")}}</dt>
- <dd>Creates a pattern using the specified image (a {{domxref("CanvasImageSource")}}). It repeats the source in the directions specified by the repetition argument. This method returns a {{domxref("CanvasPattern")}}.</dd>
-</dl>
-
-<h2 id="Shadows">Shadows</h2>
-
-<dl>
- <dt>{{domxref("CanvasRenderingContext2D.shadowBlur")}}</dt>
- <dd>Specifies the blurring effect. Default <code>0</code></dd>
- <dt>{{domxref("CanvasRenderingContext2D.shadowColor")}}</dt>
- <dd>Color of the shadow. Default fully-transparent black.</dd>
- <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetX")}}</dt>
- <dd>Horizontal distance the shadow will be offset. Default 0.</dd>
- <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetY")}}</dt>
- <dd>Vertical distance the shadow will be offset. Default 0.</dd>
-</dl>
-
-<h2 id="Paths">Paths</h2>
-
-<p>The following methods can be used to manipulate paths of objects.</p>
-
-<dl>
- <dt>{{domxref("CanvasRenderingContext2D.beginPath()")}}</dt>
- <dd>Starts a new path by emptying the list of sub-paths. Call this method when you want to create a new path.</dd>
- <dt>{{domxref("CanvasRenderingContext2D.closePath()")}}</dt>
- <dd>Causes the point of the pen to move back to the start of the current sub-path. It tries to draw a straight line from the current point to the start. If the shape has already been closed or has only one point, this function does nothing.</dd>
- <dt>{{domxref("CanvasRenderingContext2D.moveTo()")}}</dt>
- <dd>Moves the starting point of a new sub-path to the <strong>(x, y)</strong> coordinates.</dd>
- <dt>{{domxref("CanvasRenderingContext2D.lineTo()")}}</dt>
- <dd>Connects the last point in the subpath to the <code>x, y</code> coordinates with a straight line.</dd>
- <dt>{{domxref("CanvasRenderingContext2D.bezierCurveTo()")}}</dt>
- <dd>Adds a cubic Bézier curve to the path. It requires three points. The first two points are control points and the third one is the end point. The starting point is the last point in the current path, which can be changed using <code>moveTo()</code>before creating the Bézier curve.</dd>
- <dt>{{domxref("CanvasRenderingContext2D.quadraticCurveTo()")}}</dt>
- <dd>Adds a quadratic Bézier curve to the current path.</dd>
- <dt>{{domxref("CanvasRenderingContext2D.arc()")}}</dt>
- <dd>Adds an arc to the path which is centered at <em>(x, y)</em> position with radius<em> r</em> starting at <em>startAngle</em> and ending at <em>endAngle</em> going in the given direction by <em>anticlockwise</em> (defaulting to clockwise).</dd>
- <dt>{{domxref("CanvasRenderingContext2D.arcTo()")}}</dt>
- <dd>Adds an arc to the path with the given control points and radius, connected to the previous point by a straight line.</dd>
- <dt>{{domxref("CanvasRenderingContext2D.ellipse()")}} {{experimental_inline}}</dt>
- <dd>Adds an ellipse to the path which is centered at <em>(x, y)</em> position with the radii <em>radiusX</em> and <em>radiusY</em> starting at <em>startAngle</em> and ending at <em>endAngle</em> going in the given direction by <em>anticlockwise</em> (defaulting to clockwise).</dd>
- <dt>{{domxref("CanvasRenderingContext2D.rect()")}}</dt>
- <dd>Creates a path for a rectangle at<em> </em>position <em>(x, y)</em> with a size that is determined by <em>width</em> and <em>height</em>.</dd>
-</dl>
-
-<h2 id="Drawing_paths">Drawing paths</h2>
-
-<dl>
- <dt>{{domxref("CanvasRenderingContext2D.fill()")}}</dt>
- <dd>Fills the subpaths with the current fill style.</dd>
- <dt>{{domxref("CanvasRenderingContext2D.stroke()")}}</dt>
- <dd>Strokes the subpaths with the current stroke style.</dd>
- <dt>{{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}}</dt>
- <dd>If a given element is focused, this method draws a focus ring around the current path.</dd>
- <dt>{{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}}</dt>
- <dd>Scrolls the current path or a given path into the view.</dd>
- <dt>{{domxref("CanvasRenderingContext2D.clip()")}}</dt>
- <dd>Creates a clipping path from the current sub-paths. Everything drawn after <code>clip()</code> is called appears inside the clipping path only. For an example, see <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing">Clipping paths</a> in the Canvas tutorial.</dd>
- <dt>{{domxref("CanvasRenderingContext2D.isPointInPath()")}}</dt>
- <dd>Reports whether or not the specified point is contained in the current path.</dd>
- <dt>{{domxref("CanvasRenderingContext2D.isPointInStroke()")}}</dt>
- <dd>Reports whether or not the specified point is inside the area contained by the stroking of a path.</dd>
-</dl>
-
-<h2 id="Transformations">Transformations</h2>
-
-<p>Objects in the <code>CanvasRenderingContext2D</code> rendering context have a current transformation matrix and methods to manipulate it. The transformation matrix is applied when creating the current default path, painting text, shapes and {{domxref("Path2D")}} objects. The methods listed below remain for historical and compatibility reasons as {{domxref("SVGMatrix")}} objects are used in most parts of the API nowadays and will be used in the future instead.</p>
-
-<dl>
- <dt>{{domxref("CanvasRenderingContext2D.currentTransform")}}</dt>
- <dd>Current transformation matrix ({{domxref("SVGMatrix")}} object).</dd>
- <dt>{{domxref("CanvasRenderingContext2D.rotate()")}}</dt>
- <dd>Adds a rotation to the transformation matrix. The angle argument represents a clockwise rotation angle and is expressed in radians.</dd>
- <dt>{{domxref("CanvasRenderingContext2D.scale()")}}</dt>
- <dd>Adds a scaling transformation to the canvas units by x horizontally and by y vertically.</dd>
- <dt>{{domxref("CanvasRenderingContext2D.translate()")}}</dt>
- <dd>Adds a translation transformation by moving the canvas and its origin x horzontally and y vertically on the grid.</dd>
- <dt>{{domxref("CanvasRenderingContext2D.transform()")}}</dt>
- <dd>Multiplies the current transformation matrix with the matrix described by its arguments.</dd>
- <dt>{{domxref("CanvasRenderingContext2D.setTransform()")}}</dt>
- <dd>Resets the current transform to the identity matrix, and then invokes the <code>transform()</code> method with the same arguments.</dd>
- <dt>{{domxref("CanvasRenderingContext2D.resetTransform()")}} {{experimental_inline}}</dt>
- <dd>Resets the current transform by the identity matrix.</dd>
-</dl>
-
-<h2 id="Compositing">Compositing</h2>
-
-<dl>
- <dt>{{domxref("CanvasRenderingContext2D.globalAlpha")}}</dt>
- <dd>Alpha value that is applied to shapes and images before they are composited onto the canvas. Default <code>1.0</code>(opaque).</dd>
- <dt>{{domxref("CanvasRenderingContext2D.globalCompositeOperation")}}</dt>
- <dd>With <code>globalAlpha</code> applied this sets how shapes and images are drawn onto the existing bitmap.</dd>
-</dl>
-
-<h2 id="Drawing_images">Drawing images</h2>
-
-<dl>
- <dt>{{domxref("CanvasRenderingContext2D.drawImage()")}}</dt>
- <dd>Draws the specified image. This method is available in multiple formats, providing a great deal of flexibility in its use.</dd>
-</dl>
-
-<h2 id="Pixel_manipulation">Pixel manipulation</h2>
-
-<p>See also the {{domxref("ImageData")}} object.</p>
-
-<dl>
- <dt>{{domxref("CanvasRenderingContext2D.createImageData()")}}</dt>
- <dd>Creates a new, blank {{domxref("ImageData")}} object with the specified dimensions. All of the pixels in the new object are transparent black.</dd>
- <dt>{{domxref("CanvasRenderingContext2D.getImageData()")}}</dt>
- <dd>Returns an {{domxref("ImageData")}} object representing the underlying pixel data for the area of the canvas denoted by the rectangle which starts at <em>(sx, sy)</em> and has an <em>sw</em> width and <em>sh</em> height.</dd>
- <dt>{{domxref("CanvasRenderingContext2D.putImageData()")}}</dt>
- <dd>Paints data from the given {{domxref("ImageData")}} object onto the bitmap. If a dirty rectangle is provided, only the pixels from that rectangle are painted.</dd>
-</dl>
-
-<h2 id="Image_smoothing">Image smoothing</h2>
-
-<dl>
- <dt>{{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} {{experimental_inline}}</dt>
- <dd>Image smoothing mode; if disabled, images will not be smoothed if scaled.</dd>
-</dl>
-
-<h2 id="The_canvas_state">The canvas state</h2>
-
-<p>The <code>CanvasRenderingContext2D</code> rendering context contains a variety of drawing style states (attributes for line styles, fill styles, shadow styles, text styles). The following methods help you to work with that state:</p>
-
-<dl>
- <dt>{{domxref("CanvasRenderingContext2D.save()")}}</dt>
- <dd>Saves the current drawing style state using a stack so you can revert any change you make to it using <code>restore()</code>.</dd>
- <dt>{{domxref("CanvasRenderingContext2D.restore()")}}</dt>
- <dd>Restores the drawing style state to the last element on the 'state stack' saved by <code>save()</code>.</dd>
- <dt>{{domxref("CanvasRenderingContext2D.canvas")}}</dt>
- <dd>A read-only back-reference to the {{domxref("HTMLCanvasElement")}}. Might be {{jsxref("null")}} if it is not associated with a {{HTMLElement("canvas")}} element.</dd>
-</dl>
-
-<h2 id="Hit_regions">Hit regions</h2>
-
-<dl>
- <dt>{{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}}</dt>
- <dd>Adds a hit region to the canvas.</dd>
- <dt>{{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}}</dt>
- <dd>Removes the hit region with the specified <code>id</code> from the canvas.</dd>
- <dt>{{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}}</dt>
- <dd>Removes all hit regions from the canvas.</dd>
-</dl>
-
-<h2 id="Non-standard_APIs">Non-standard APIs</h2>
-
-<h3 id="Blink_and_WebKit">Blink and WebKit</h3>
-
-<p>Most of these APIs are <a href="https://code.google.com/p/chromium/issues/detail?id=363198">deprecated and will be removed in the future</a>.</p>
-
-<dl>
- <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.clearShadow()</code></dt>
- <dd>Removes all shadow settings like {{domxref("CanvasRenderingContext2D.shadowColor")}} and {{domxref("CanvasRenderingContext2D.shadowBlur")}}.</dd>
- <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.drawImageFromRect()</code></dt>
- <dd>This is redundant with an equivalent overload of <code>drawImage</code>.</dd>
- <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setAlpha()</code></dt>
- <dd>Use {{domxref("CanvasRenderingContext2D.globalAlpha")}} instead.</dd>
- <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setCompositeOperation()</code></dt>
- <dd>Use {{domxref("CanvasRenderingContext2D.globalCompositeOperation")}} instead.</dd>
- <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setLineWidth()</code></dt>
- <dd>Use {{domxref("CanvasRenderingContext2D.lineWidth")}} instead.</dd>
- <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setLineJoin()</code></dt>
- <dd>Use {{domxref("CanvasRenderingContext2D.lineJoin")}} instead.</dd>
- <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setLineCap()</code></dt>
- <dd>Use {{domxref("CanvasRenderingContext2D.lineCap")}} instead.</dd>
- <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setMiterLimit()</code></dt>
- <dd>Use {{domxref("CanvasRenderingContext2D.miterLimit")}} instead.</dd>
- <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setStrokeColor()</code></dt>
- <dd>Use {{domxref("CanvasRenderingContext2D.strokeStyle")}} instead.</dd>
- <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setFillColor()</code></dt>
- <dd>Use {{domxref("CanvasRenderingContext2D.fillStyle")}} instead.</dd>
- <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setShadow()</code></dt>
- <dd>Use {{domxref("CanvasRenderingContext2D.shadowColor")}} and {{domxref("CanvasRenderingContext2D.shadowBlur")}} instead.</dd>
- <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitLineDash</code></dt>
- <dd>Use {{domxref("CanvasRenderingContext2D.getLineDash()")}} and {{domxref("CanvasRenderingContext2D.setLineDash()")}} instead.</dd>
- <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitLineDashOffset</code></dt>
- <dd>Use {{domxref("CanvasRenderingContext2D.lineDashOffset")}} instead.</dd>
- <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitImageSmoothingEnabled</code></dt>
- <dd>Use {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} instead.</dd>
-</dl>
-
-<h3 id="Blink_only">Blink only</h3>
-
-<dl>
- <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.isContextLost()</code></dt>
- <dd>Inspired by the same <code>WebGLRenderingContext</code> method it returns <code>true</code> if the Canvas context has been lost, or <code>false</code> if not.</dd>
-</dl>
-
-<h3 id="WebKit_only">WebKit only</h3>
-
-<dl>
- <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitBackingStorePixelRatio</code></dt>
- <dd>The backing store size in relation to the canvas element. See <a href="http://www.html5rocks.com/en/tutorials/canvas/hidpi/">High DPI Canvas</a>.</dd>
- <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitGetImageDataHD</code></dt>
- <dd>Intended for HD backing stores, but removed from canvas specifications.</dd>
- <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitPutImageDataHD</code></dt>
- <dd>Intended for HD backing stores, but removed from canvas specifications.</dd>
-</dl>
-
-<dl>
-</dl>
-
-<h3 id="Gecko_only">Gecko only</h3>
-
-<dl>
- <dt>{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.filter")}}</dt>
- <dd>CSS and SVG filters as Canvas APIs. Likely to be standardized in a new version of the specification.</dd>
-</dl>
-
-<h4 id="Prefixed_APIs">Prefixed APIs</h4>
-
-<dl>
- <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.mozCurrentTransform</code></dt>
- <dd>Sets or gets the current transformation matrix, see {{domxref("CanvasRenderingContext2D.currentTransform")}}.  {{ gecko_minversion_inline("7.0") }}</dd>
- <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.mozCurrentTransformInverse</code></dt>
- <dd>Sets or gets the current inversed transformation matrix.  {{ gecko_minversion_inline("7.0") }}</dd>
- <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.mozImageSmoothingEnabled</code></dt>
- <dd>See {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}}.</dd>
- <dt>{{non-standard_inline}} {{deprecated_inline}} <code>CanvasRenderingContext2D.mozTextStyle</code></dt>
- <dd>Introduced in in Gecko 1.9, deprecated in favor of the {{domxref("CanvasRenderingContext2D.font")}} property.</dd>
- <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozDrawText()</code></dt>
- <dd>This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0. Use {{domxref("CanvasRenderingContext2D.strokeText()")}} or {{domxref("CanvasRenderingContext2D.fillText()")}} instead.</dd>
- <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozMeasureText()</code></dt>
- <dd>This method was introduced in Gecko 1.9 and is unimplemented starting with Gecko 7.0. Use {{domxref("CanvasRenderingContext2D.measureText()")}} instead.</dd>
- <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozPathText()</code></dt>
- <dd>This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.</dd>
- <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozTextAlongPath()</code></dt>
- <dd>This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.</dd>
-</dl>
-
-<h4 id="Internal_APIs_(chrome-context_only)">Internal APIs (chrome-context only)</h4>
-
-<dl>
- <dt>{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.drawWindow()")}}</dt>
- <dd>Renders a region of a window into the <code>canvas</code>. The contents of the window's viewport are rendered, ignoring viewport clipping and scrolling.</dd>
- <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.demote()</code></dt>
- <dd>This causes a context that is currently using a hardware-accelerated backend to fallback to a software one. All state should be preserved.</dd>
-</dl>
-
-<h3 id="Internet_Explorer">Internet Explorer</h3>
-
-<dl>
- <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.msFillRule</code></dt>
- <dd>The <a href="http://cairographics.org/manual/cairo-cairo-t.html#cairo-fill-rule-t">fill rule</a> to use. This must be one of <code>evenodd</code> or <code>nonzero</code> (default).</dd>
-</dl>
-
-<h2 id="Specifications">Specifications</h2>
-
-<table>
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "scripting.html#2dcontext:canvasrenderingcontext2d", "CanvasRenderingContext2D")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Browser compatibility</h2>
-
-<p>{{Compat("api.CanvasRenderingContext2D")}}</p>
-
-<h2 id="See_also">See also</h2>
-
-<ul>
- <li>{{domxref("HTMLCanvasElement")}}</li>
-</ul>
+{{APIRef}}
+
+L'interface **CanvasRenderingContext2D** est utilisée pour dessiner des rectangles, du texte, des images et d'autres objets sur l'élément canvas. Il fournit le contexte de rendu 2D pour la surface de dessin d'un élément {{HTMLElement("canvas")}}.
+
+Pour obtenir un objet de cette interface, appelez {{domxref("HTMLCanvasElement.getContext()", "getContext()")}} sur un élément `<canvas>`, en fournissant "2d" comme argument :
+
+    var canevas = document.getElementById('tutorial'); // dans votre HTML, cet élément apparaît comme <canvas id="monCanevas"></canvas>
+    var ctx = canevas.getContext('2d');
+
+Une fois que vous avez le contexte de rendu 2D pour un canevas, vous pouvez dessiner à l'intérieur. Par exemple :
+
+    ctx.fillStyle = "rgb(200,0,0)"; // définit la couleur de remplissage du rectangle
+    ctx.fillRect(10, 10, 55, 50);   // dessine le rectangle à la position 10, 10 d'une largeur de 55 et d'une hauteur de 50
+
+Voir les propriétés et les méthodes dans la barre latérale et plus bas. Le [tutoriel canvas](/fr-FR/docs/Web/API/Canvas_API/Tutorial) a davantage d'informations, d'exemples et de ressources également.
+
+## Dessin de rectangles
+
+Il existe trois méthodes qui dessinent immédiatement des rectangles sur la bitmap.
+
+- {{domxref("CanvasRenderingContext2D.clearRect()")}}
+  - : Initialise tous les pixels dans le rectangle défini par le point de départ _(x, y)_ et la taille _(largeur, hauteur)_ à noir transparent, en effaçant tout contenu précédemment dessiné.
+- {{domxref("CanvasRenderingContext2D.fillRect()")}}
+  - : Dessine un rectangle rempli à la position _(x, y)_ dont la taille est déterminée par _largeur_ et _hauteur_.
+- {{domxref("CanvasRenderingContext2D.strokeRect()")}}
+  - : Peint un rectangle ayant un point de départ en *(x, y)*, une largeur *l* et une hauteur _h_ sur le canevas, en utilisant le style de trait en cours.
+
+## Dessiner du texte
+
+Les méthodes suivantes permettent de dessiner du texte. Voir aussi l'objet {{domxref("TextMetrics")}} pour les propriétés du texte.
+
+- {{domxref("CanvasRenderingContext2D.fillText()")}}
+  - : Dessine (rempli) un texte donné à la position (x,y) donnée.
+- {{domxref("CanvasRenderingContext2D.strokeText()")}}
+  - : Dessine (contour) un texte donné à la position (x, y) donnée.
+- {{domxref("CanvasRenderingContext2D.measureText()")}}
+  - : Renvoie un objet {{domxref("TextMetrics")}}.
+
+## Styles de ligne
+
+Les méthodes et propriétés suivantes controllent comment les lignes sont dessinées.
+
+- {{domxref("CanvasRenderingContext2D.lineWidth")}}
+  - : Largeur des lignes. Défaut `1.0`
+- {{domxref("CanvasRenderingContext2D.lineCap")}}
+  - : Type de finission pour la fin de la ligne. Valeurs possible: `butt` (défaut), `round`, `square`.
+- {{domxref("CanvasRenderingContext2D.lineJoin")}}
+  - : Définit le type de coin quand deux lignes se rejoignent. Valeurs possible: `round`, `bevel`, `miter` (défaut).
+- {{domxref("CanvasRenderingContext2D.miterLimit")}}
+  - : Le taux limite du miter. Sa valeur par défaut est `10`.
+- {{domxref("CanvasRenderingContext2D.getLineDash()")}}
+  - : Retourne le tableau de modèle du trait courant contenant un nombre pair de nombre positifs.
+- {{domxref("CanvasRenderingContext2D.setLineDash()")}}
+  - : Définit le modèle du trait courant.
+- {{domxref("CanvasRenderingContext2D.lineDashOffset")}}
+  - : Specifies where to start a dash array on a line.
+
+## Styles de texte
+
+Les propriétés suivantes contrôlent la manière dont le texte est rendu à l’affichage.
+
+- {{domxref("CanvasRenderingContext2D.font")}}
+  - : Paramètre de fonte dont la valeur par défaut est `10px sans-serif`.
+- {{domxref("CanvasRenderingContext2D.textAlign")}}
+  - : Paramètre d’alignement horizontal. Ses valeurs possibles sont : `start` (par défaut), `end`, `left`, `right` et `center`.
+- {{domxref("CanvasRenderingContext2D.textBaseline")}}
+  - : Paramètre d’alignement vertical par rapport à la ligne de base du texte. Ses valeurs possibles sont : `top`, `hanging`, `middle`, `alphabetic` (par défaut), `ideographic`, `bottom`.
+- {{domxref("CanvasRenderingContext2D.direction")}}
+  - : Direction d’affichage. Ses valeurs possibles sont : `ltr, rtl`, `inherit` (par défaut).
+
+## Fill and stroke styles
+
+Fill styling is used for colors and styles inside shapes and stroke styling is used for the lines around shapes.
+
+- {{domxref("CanvasRenderingContext2D.fillStyle")}}
+  - : Color or style to use inside shapes. Default `#000` (black).
+- {{domxref("CanvasRenderingContext2D.strokeStyle")}}
+  - : Color or style to use for the lines around shapes. Default `#000` (black).
+
+## Gradients and patterns
+
+- {{domxref("CanvasRenderingContext2D.createLinearGradient()")}}
+  - : Creates a linear gradient along the line given by the coordinates represented by the parameters.
+- {{domxref("CanvasRenderingContext2D.createRadialGradient()")}}
+  - : Creates a radial gradient given by the coordinates of the two circles represented by the parameters.
+- {{domxref("CanvasRenderingContext2D.createPattern()")}}
+  - : Creates a pattern using the specified image (a {{domxref("CanvasImageSource")}}). It repeats the source in the directions specified by the repetition argument. This method returns a {{domxref("CanvasPattern")}}.
+
+## Shadows
+
+- {{domxref("CanvasRenderingContext2D.shadowBlur")}}
+  - : Specifies the blurring effect. Default `0`
+- {{domxref("CanvasRenderingContext2D.shadowColor")}}
+  - : Color of the shadow. Default fully-transparent black.
+- {{domxref("CanvasRenderingContext2D.shadowOffsetX")}}
+  - : Horizontal distance the shadow will be offset. Default 0.
+- {{domxref("CanvasRenderingContext2D.shadowOffsetY")}}
+  - : Vertical distance the shadow will be offset. Default 0.
+
+## Paths
+
+The following methods can be used to manipulate paths of objects.
+
+- {{domxref("CanvasRenderingContext2D.beginPath()")}}
+  - : Starts a new path by emptying the list of sub-paths. Call this method when you want to create a new path.
+- {{domxref("CanvasRenderingContext2D.closePath()")}}
+  - : Causes the point of the pen to move back to the start of the current sub-path. It tries to draw a straight line from the current point to the start. If the shape has already been closed or has only one point, this function does nothing.
+- {{domxref("CanvasRenderingContext2D.moveTo()")}}
+  - : Moves the starting point of a new sub-path to the **(x, y)** coordinates.
+- {{domxref("CanvasRenderingContext2D.lineTo()")}}
+  - : Connects the last point in the subpath to the `x, y` coordinates with a straight line.
+- {{domxref("CanvasRenderingContext2D.bezierCurveTo()")}}
+  - : Adds a cubic Bézier curve to the path. It requires three points. The first two points are control points and the third one is the end point. The starting point is the last point in the current path, which can be changed using `moveTo()`before creating the Bézier curve.
+- {{domxref("CanvasRenderingContext2D.quadraticCurveTo()")}}
+  - : Adds a quadratic Bézier curve to the current path.
+- {{domxref("CanvasRenderingContext2D.arc()")}}
+  - : Adds an arc to the path which is centered at *(x, y)* position with radius *r* starting at *startAngle* and ending at *endAngle* going in the given direction by *anticlockwise* (defaulting to clockwise).
+- {{domxref("CanvasRenderingContext2D.arcTo()")}}
+  - : Adds an arc to the path with the given control points and radius, connected to the previous point by a straight line.
+- {{domxref("CanvasRenderingContext2D.ellipse()")}} {{experimental_inline}}
+  - : Adds an ellipse to the path which is centered at *(x, y)* position with the radii *radiusX* and *radiusY* starting at *startAngle* and ending at *endAngle* going in the given direction by *anticlockwise* (defaulting to clockwise).
+- {{domxref("CanvasRenderingContext2D.rect()")}}
+  - : Creates a path for a rectangle at\* *position *(x, y)* with a size that is determined by *width* and *height\*.
+
+## Drawing paths
+
+- {{domxref("CanvasRenderingContext2D.fill()")}}
+  - : Fills the subpaths with the current fill style.
+- {{domxref("CanvasRenderingContext2D.stroke()")}}
+  - : Strokes the subpaths with the current stroke style.
+- {{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}}
+  - : If a given element is focused, this method draws a focus ring around the current path.
+- {{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}}
+  - : Scrolls the current path or a given path into the view.
+- {{domxref("CanvasRenderingContext2D.clip()")}}
+  - : Creates a clipping path from the current sub-paths. Everything drawn after `clip()` is called appears inside the clipping path only. For an example, see [Clipping paths](/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing) in the Canvas tutorial.
+- {{domxref("CanvasRenderingContext2D.isPointInPath()")}}
+  - : Reports whether or not the specified point is contained in the current path.
+- {{domxref("CanvasRenderingContext2D.isPointInStroke()")}}
+  - : Reports whether or not the specified point is inside the area contained by the stroking of a path.
+
+## Transformations
+
+Objects in the `CanvasRenderingContext2D` rendering context have a current transformation matrix and methods to manipulate it. The transformation matrix is applied when creating the current default path, painting text, shapes and {{domxref("Path2D")}} objects. The methods listed below remain for historical and compatibility reasons as {{domxref("SVGMatrix")}} objects are used in most parts of the API nowadays and will be used in the future instead.
+
+- {{domxref("CanvasRenderingContext2D.currentTransform")}}
+  - : Current transformation matrix ({{domxref("SVGMatrix")}} object).
+- {{domxref("CanvasRenderingContext2D.rotate()")}}
+  - : Adds a rotation to the transformation matrix. The angle argument represents a clockwise rotation angle and is expressed in radians.
+- {{domxref("CanvasRenderingContext2D.scale()")}}
+  - : Adds a scaling transformation to the canvas units by x horizontally and by y vertically.
+- {{domxref("CanvasRenderingContext2D.translate()")}}
+  - : Adds a translation transformation by moving the canvas and its origin x horzontally and y vertically on the grid.
+- {{domxref("CanvasRenderingContext2D.transform()")}}
+  - : Multiplies the current transformation matrix with the matrix described by its arguments.
+- {{domxref("CanvasRenderingContext2D.setTransform()")}}
+  - : Resets the current transform to the identity matrix, and then invokes the `transform()` method with the same arguments.
+- {{domxref("CanvasRenderingContext2D.resetTransform()")}} {{experimental_inline}}
+  - : Resets the current transform by the identity matrix.
+
+## Compositing
+
+- {{domxref("CanvasRenderingContext2D.globalAlpha")}}
+  - : Alpha value that is applied to shapes and images before they are composited onto the canvas. Default `1.0`(opaque).
+- {{domxref("CanvasRenderingContext2D.globalCompositeOperation")}}
+  - : With `globalAlpha` applied this sets how shapes and images are drawn onto the existing bitmap.
+
+## Drawing images
+
+- {{domxref("CanvasRenderingContext2D.drawImage()")}}
+  - : Draws the specified image. This method is available in multiple formats, providing a great deal of flexibility in its use.
+
+## Pixel manipulation
+
+See also the {{domxref("ImageData")}} object.
+
+- {{domxref("CanvasRenderingContext2D.createImageData()")}}
+  - : Creates a new, blank {{domxref("ImageData")}} object with the specified dimensions. All of the pixels in the new object are transparent black.
+- {{domxref("CanvasRenderingContext2D.getImageData()")}}
+  - : Returns an {{domxref("ImageData")}} object representing the underlying pixel data for the area of the canvas denoted by the rectangle which starts at *(sx, sy)* and has an *sw* width and *sh* height.
+- {{domxref("CanvasRenderingContext2D.putImageData()")}}
+  - : Paints data from the given {{domxref("ImageData")}} object onto the bitmap. If a dirty rectangle is provided, only the pixels from that rectangle are painted.
+
+## Image smoothing
+
+- {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} {{experimental_inline}}
+  - : Image smoothing mode; if disabled, images will not be smoothed if scaled.
+
+## The canvas state
+
+The `CanvasRenderingContext2D` rendering context contains a variety of drawing style states (attributes for line styles, fill styles, shadow styles, text styles). The following methods help you to work with that state:
+
+- {{domxref("CanvasRenderingContext2D.save()")}}
+  - : Saves the current drawing style state using a stack so you can revert any change you make to it using `restore()`.
+- {{domxref("CanvasRenderingContext2D.restore()")}}
+  - : Restores the drawing style state to the last element on the 'state stack' saved by `save()`.
+- {{domxref("CanvasRenderingContext2D.canvas")}}
+  - : A read-only back-reference to the {{domxref("HTMLCanvasElement")}}. Might be {{jsxref("null")}} if it is not associated with a {{HTMLElement("canvas")}} element.
+
+## Hit regions
+
+- {{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}}
+  - : Adds a hit region to the canvas.
+- {{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}}
+  - : Removes the hit region with the specified `id` from the canvas.
+- {{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}}
+  - : Removes all hit regions from the canvas.
+
+## Non-standard APIs
+
+### Blink and WebKit
+
+Most of these APIs are [deprecated and will be removed in the future](https://code.google.com/p/chromium/issues/detail?id=363198).
+
+- {{non-standard_inline}} `CanvasRenderingContext2D.clearShadow()`
+  - : Removes all shadow settings like {{domxref("CanvasRenderingContext2D.shadowColor")}} and {{domxref("CanvasRenderingContext2D.shadowBlur")}}.
+- {{non-standard_inline}} `CanvasRenderingContext2D.drawImageFromRect()`
+  - : This is redundant with an equivalent overload of `drawImage`.
+- {{non-standard_inline}} `CanvasRenderingContext2D.setAlpha()`
+  - : Use {{domxref("CanvasRenderingContext2D.globalAlpha")}} instead.
+- {{non-standard_inline}} `CanvasRenderingContext2D.setCompositeOperation()`
+  - : Use {{domxref("CanvasRenderingContext2D.globalCompositeOperation")}} instead.
+- {{non-standard_inline}} `CanvasRenderingContext2D.setLineWidth()`
+  - : Use {{domxref("CanvasRenderingContext2D.lineWidth")}} instead.
+- {{non-standard_inline}} `CanvasRenderingContext2D.setLineJoin()`
+  - : Use {{domxref("CanvasRenderingContext2D.lineJoin")}} instead.
+- {{non-standard_inline}} `CanvasRenderingContext2D.setLineCap()`
+  - : Use {{domxref("CanvasRenderingContext2D.lineCap")}} instead.
+- {{non-standard_inline}} `CanvasRenderingContext2D.setMiterLimit()`
+  - : Use {{domxref("CanvasRenderingContext2D.miterLimit")}} instead.
+- {{non-standard_inline}} `CanvasRenderingContext2D.setStrokeColor()`
+  - : Use {{domxref("CanvasRenderingContext2D.strokeStyle")}} instead.
+- {{non-standard_inline}} `CanvasRenderingContext2D.setFillColor()`
+  - : Use {{domxref("CanvasRenderingContext2D.fillStyle")}} instead.
+- {{non-standard_inline}} `CanvasRenderingContext2D.setShadow()`
+  - : Use {{domxref("CanvasRenderingContext2D.shadowColor")}} and {{domxref("CanvasRenderingContext2D.shadowBlur")}} instead.
+- {{non-standard_inline}} `CanvasRenderingContext2D.webkitLineDash`
+  - : Use {{domxref("CanvasRenderingContext2D.getLineDash()")}} and {{domxref("CanvasRenderingContext2D.setLineDash()")}} instead.
+- {{non-standard_inline}} `CanvasRenderingContext2D.webkitLineDashOffset`
+  - : Use {{domxref("CanvasRenderingContext2D.lineDashOffset")}} instead.
+- {{non-standard_inline}} `CanvasRenderingContext2D.webkitImageSmoothingEnabled`
+  - : Use {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} instead.
+
+### Blink only
+
+- {{non-standard_inline}} `CanvasRenderingContext2D.isContextLost()`
+  - : Inspired by the same `WebGLRenderingContext` method it returns `true` if the Canvas context has been lost, or `false` if not.
+
+### WebKit only
+
+- {{non-standard_inline}} `CanvasRenderingContext2D.webkitBackingStorePixelRatio`
+  - : The backing store size in relation to the canvas element. See [High DPI Canvas](http://www.html5rocks.com/en/tutorials/canvas/hidpi/).
+- {{non-standard_inline}} `CanvasRenderingContext2D.webkitGetImageDataHD`
+  - : Intended for HD backing stores, but removed from canvas specifications.
+- {{non-standard_inline}} `CanvasRenderingContext2D.webkitPutImageDataHD`
+  - : Intended for HD backing stores, but removed from canvas specifications.
+
+<!---->
+
+### Gecko only
+
+- {{non-standard_inline}} {{domxref("CanvasRenderingContext2D.filter")}}
+  - : CSS and SVG filters as Canvas APIs. Likely to be standardized in a new version of the specification.
+
+#### Prefixed APIs
+
+- {{non-standard_inline}} `CanvasRenderingContext2D.mozCurrentTransform`
+  - : Sets or gets the current transformation matrix, see {{domxref("CanvasRenderingContext2D.currentTransform")}}.  {{ gecko_minversion_inline("7.0") }}
+- {{non-standard_inline}} `CanvasRenderingContext2D.mozCurrentTransformInverse`
+  - : Sets or gets the current inversed transformation matrix.  {{ gecko_minversion_inline("7.0") }}
+- {{non-standard_inline}} `CanvasRenderingContext2D.mozImageSmoothingEnabled`
+  - : See {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}}.
+- {{non-standard_inline}} {{deprecated_inline}} `CanvasRenderingContext2D.mozTextStyle`
+  - : Introduced in in Gecko 1.9, deprecated in favor of the {{domxref("CanvasRenderingContext2D.font")}} property.
+- {{non-standard_inline}} {{obsolete_inline}} `CanvasRenderingContext2D.mozDrawText()`
+  - : This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0. Use {{domxref("CanvasRenderingContext2D.strokeText()")}} or {{domxref("CanvasRenderingContext2D.fillText()")}} instead.
+- {{non-standard_inline}} {{obsolete_inline}} `CanvasRenderingContext2D.mozMeasureText()`
+  - : This method was introduced in Gecko 1.9 and is unimplemented starting with Gecko 7.0. Use {{domxref("CanvasRenderingContext2D.measureText()")}} instead.
+- {{non-standard_inline}} {{obsolete_inline}} `CanvasRenderingContext2D.mozPathText()`
+  - : This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.
+- {{non-standard_inline}} {{obsolete_inline}} `CanvasRenderingContext2D.mozTextAlongPath()`
+  - : This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.
+
+#### Internal APIs (chrome-context only)
+
+- {{non-standard_inline}} {{domxref("CanvasRenderingContext2D.drawWindow()")}}
+  - : Renders a region of a window into the `canvas`. The contents of the window's viewport are rendered, ignoring viewport clipping and scrolling.
+- {{non-standard_inline}} `CanvasRenderingContext2D.demote()`
+  - : This causes a context that is currently using a hardware-accelerated backend to fallback to a software one. All state should be preserved.
+
+### Internet Explorer
+
+- {{non-standard_inline}} `CanvasRenderingContext2D.msFillRule`
+  - : The [fill rule](http://cairographics.org/manual/cairo-cairo-t.html#cairo-fill-rule-t) to use. This must be one of `evenodd` or `nonzero` (default).
+
+## Specifications
+
+| Specification                                                                                                                                    | Status                           | Comment |
+| ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------- |
+| {{SpecName('HTML WHATWG', "scripting.html#2dcontext:canvasrenderingcontext2d", "CanvasRenderingContext2D")}} | {{Spec2('HTML WHATWG')}} |         |
+
+## Browser compatibility
+
+{{Compat("api.CanvasRenderingContext2D")}}
+
+## See also
+
+- {{domxref("HTMLCanvasElement")}}
diff --git a/files/fr/web/api/canvasrenderingcontext2d/linecap/index.md b/files/fr/web/api/canvasrenderingcontext2d/linecap/index.md
index ee87a2aafe..033a50cd4c 100644
--- a/files/fr/web/api/canvasrenderingcontext2d/linecap/index.md
+++ b/files/fr/web/api/canvasrenderingcontext2d/linecap/index.md
@@ -9,43 +9,43 @@ tags:
   - Reference
 translation_of: Web/API/CanvasRenderingContext2D/lineCap
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}
 
-<p>La propriété <strong>CanvasRenderingContext2D.lineCap</strong> de l'API Canvas 2D détermine la façon dont les extrémités de chaque ligne sont dessinées. Il y a trois valeurs possibles pour cette propriété, qui sont : <code>butt</code>, <code>round</code> et <code>square</code>. Par défaut, cette propriété est définie comme <code>butt</code>.</p>
+La propriété **CanvasRenderingContext2D.lineCap** de l'API Canvas 2D détermine la façon dont les extrémités de chaque ligne sont dessinées. Il y a trois valeurs possibles pour cette propriété, qui sont : `butt`, `round` et `square`. Par défaut, cette propriété est définie comme `butt`.
 
-<p>Voir aussi le chapitre <a href="/fr-FR/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">Ajout de styles et de couleurs</a> dans le <a href="/fr-FR/docs/Web/API/Canvas_API/Tutorial">Tutoriel canvas</a>.</p>
+Voir aussi le chapitre [Ajout de styles et de couleurs](/fr-FR/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors) dans le [Tutoriel canvas](/fr-FR/docs/Web/API/Canvas_API/Tutorial).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var><em>ctx</em>.lineCap = "butt";
-<var><em>ctx</em>.lineCap = "round";
-<var><em>ctx</em>.lineCap = "square";</var></var></var></pre>
+    ctx.lineCap = "butt";
+    ctx.lineCap = "round";
+    ctx.lineCap = "square";
 
-<h3 id="Options">Options</h3>
+### Options
 
-<dl>
- <dt><code>butt</code></dt>
- <dd>Les extrémités de ligne sont coupées à angle droit.</dd>
- <dt><code>round</code></dt>
- <dd>Les extrémités de ligne sont arrondies.</dd>
- <dt><code>square</code></dt>
- <dd>Les extrémités de ligne sont coupées à angle droit en ajoutant un rectangle d'une longueur égale à celle de l'épaisseur de la ligne et de largeur moitié.</dd>
-</dl>
+- `butt`
+  - : Les extrémités de ligne sont coupées à angle droit.
+- `round`
+  - : Les extrémités de ligne sont arrondies.
+- `square`
+  - : Les extrémités de ligne sont coupées à angle droit en ajoutant un rectangle d'une longueur égale à celle de l'épaisseur de la ligne et de largeur moitié.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Using_the_lineCap_property">Utilisation de la propriété <code>lineCap</code></h3>
+### Utilisation de la propriété `lineCap`
 
-<p>Il ne s'agit que d'un fragment de code simple utilisant la propriété lineCap pour dessiner des lignes avec des extrémités arrondies.</p>
+Il ne s'agit que d'un fragment de code simple utilisant la propriété lineCap pour dessiner des lignes avec des extrémités arrondies.
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;canvas id="canevas"&gt;&lt;/canvas&gt;
-</pre>
+```html
+<canvas id="canevas"></canvas>
+```
 
-<h4 id="JavaScript">JavaScript</h4>
+#### JavaScript
 
-<pre class="brush: js">var canevas = document.getElementById('canevas');
+```js
+var canevas = document.getElementById('canevas');
 var ctx = canevas.getContext('2d');
 
 ctx.beginPath();
@@ -54,27 +54,29 @@ ctx.lineWidth = 15;
 ctx.lineCap = 'round';
 ctx.lineTo(100, 100);
 ctx.stroke();
-</pre>
+```
 
-<p>Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct dans le canvas :</p>
+Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct dans le canvas :
 
-<h4 id="code_jouable">Code jouable</h4>
+#### Code jouable
 
-<pre class="brush: html hidden">&lt;canvas id="canevas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
-&lt;div class="playable-buttons"&gt;
-  &lt;input id="modifier" type="button" value="Modifier" /&gt;
-  &lt;input id="effacer" type="button" value="Effacer" /&gt;
-&lt;/div&gt;
-&lt;textarea id="code" class="playable-code"&gt;
+```html hidden
+<canvas id="canevas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="modifier" type="button" value="Modifier" />
+  <input id="effacer" type="button" value="Effacer" />
+</div>
+<textarea id="code" class="playable-code">
 ctx.beginPath();
 ctx.moveTo(0, 0);
 ctx.lineWidth = 15;
 ctx.lineCap = 'round';
 ctx.lineTo(100, 100);
-ctx.stroke();&lt;/textarea&gt;
-</pre>
+ctx.stroke();</textarea>
+```
 
-<pre class="brush: js hidden">var canevas = document.getElementById('canevas');
+```js hidden
+var canevas = document.getElementById('canevas');
 var ctx = canevas.getContext('2d');
 var zoneTexte = document.getElementById('code');
 var effacer = document.getElementById('effacer');
@@ -97,17 +99,18 @@ modifier.addEventListener('click', function() {
 
 zoneTexte.addEventListener('input', dessinerCanevas);
 window.addEventListener('load', dessinerCanevas);
-</pre>
+```
 
-<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p>
+{{ EmbedLiveSample('code_jouable', 700, 360) }}
 
-<h3 id="A_lineCap_example">Un exemple de <code>lineCap</code></h3>
+### Un exemple de `lineCap`
 
-<p>Dans cet exemple, trois lignes sont dessinées, chacune avec une valeur différente pour la propriété <code>lineCap</code>. Deux guides pour voir les différences exactes entre les trois ont été ajoutés. Chacune de ces lignes commence et se termine exactement sur ces guides.</p>
+Dans cet exemple, trois lignes sont dessinées, chacune avec une valeur différente pour la propriété `lineCap`. Deux guides pour voir les différences exactes entre les trois ont été ajoutés. Chacune de ces lignes commence et se termine exactement sur ces guides.
 
-<p>La ligne à gauche utilise l'option par défaut <code>butt</code>. Elle est dessinée complètement au raz des guides. La seconde est paramétrée pour utiliser l'option <code>round</code>. Cela ajoute à l'extrémité un demi-cercle d'un rayon égal à la moitié de la largeur de la ligne. La ligne de droite utilise l'option <code>square</code>. Cela ajoute un rectangle de longueur égale à l'épaisseur de la ligne et de largeur moitié.</p>
+La ligne à gauche utilise l'option par défaut `butt`. Elle est dessinée complètement au raz des guides. La seconde est paramétrée pour utiliser l'option `round`. Cela ajoute à l'extrémité un demi-cercle d'un rayon égal à la moitié de la largeur de la ligne. La ligne de droite utilise l'option `square`. Cela ajoute un rectangle de longueur égale à l'épaisseur de la ligne et de largeur moitié.
 
-<pre class="brush: js">var ctx = document.getElementById('canevas').getContext('2d');
+```js
+var ctx = document.getElementById('canevas').getContext('2d');
 var lineCap = ['butt','round','square'];
 
 // Dessiner les guides
@@ -121,7 +124,7 @@ ctx.stroke();
 
 // Dessiner les lignes
 ctx.strokeStyle = 'black';
-for (var i = 0; i &lt; lineCap.length; i++) {
+for (var i = 0; i < lineCap.length; i++) {
   ctx.lineWidth = 15;
   ctx.lineCap = lineCap[i];
   ctx.beginPath();
@@ -129,43 +132,30 @@ for (var i = 0; i &lt; lineCap.length; i++) {
   ctx.lineTo(25 + i * 50, 140);
   ctx.stroke();
 }
-</pre>
+```
 
-<pre class="brush: html hidden">&lt;canvas id="canevas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+```html hidden
+<canvas id="canevas" width="150" height="150"></canvas>
+```
 
-<p>{{EmbedLiveSample("A_lineCap_example", "180", "180", "canvas_linecap.png")}}</p>
+{{EmbedLiveSample("A_lineCap_example", "180", "180", "canvas_linecap.png")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-linecap", "CanvasRenderingContext2D.lineCap")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                                | Statut                           | Commentaire |
+| -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- |
+| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-linecap", "CanvasRenderingContext2D.lineCap")}} | {{Spec2('HTML WHATWG')}} |             |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.CanvasRenderingContext2D.lineCap")}}</p>
+{{Compat("api.CanvasRenderingContext2D.lineCap")}}
 
-<h2 id="Notes_spécifiques_à_WebKitBlink">Notes spécifiques à WebKit/Blink</h2>
+## Notes spécifiques à WebKit/Blink
 
-<ul>
- <li>Dans les navigateurs basés sur WebKit et Blink, une méthode non-standard et désapprouvée <code>ctx.setLineCap()</code> est implémentée en plus de cette propriété.</li>
-</ul>
+- Dans les navigateurs basés sur WebKit et Blink, une méthode non-standard et désapprouvée `ctx.setLineCap()` est implémentée en plus de cette propriété.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li>
- <li>{{domxref("CanvasRenderingContext2D.lineWidth")}}</li>
- <li>{{domxref("CanvasRenderingContext2D.lineJoin")}}</li>
-</ul>
+- L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}
+- {{domxref("CanvasRenderingContext2D.lineWidth")}}
+- {{domxref("CanvasRenderingContext2D.lineJoin")}}
diff --git a/files/fr/web/api/canvasrenderingcontext2d/linejoin/index.md b/files/fr/web/api/canvasrenderingcontext2d/linejoin/index.md
index 93b38bb13d..c438190f71 100644
--- a/files/fr/web/api/canvasrenderingcontext2d/linejoin/index.md
+++ b/files/fr/web/api/canvasrenderingcontext2d/linejoin/index.md
@@ -10,50 +10,47 @@ tags:
   - stroke
 translation_of: Web/API/CanvasRenderingContext2D/lineJoin
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}
 
-<p>La propriété <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.lineJoin</code></strong> de l'API Canvas 2D détermine la forme à utiliser pour joindre deux segments de ligne à leur intersection.</p>
+La propriété **`CanvasRenderingContext2D`\*\***`.lineJoin`\*\* de l'API Canvas 2D détermine la forme à utiliser pour joindre deux segments de ligne à leur intersection.
 
-<p>Cette propriété n'a aucun effet quand deux segments connectés ont la même direction, car aucune zone de jonction ne sera ajoutée dans ce cas. Les segments dégénérés d'une longueur de zéro (c'est à dire avec les extrémités à la même position) seront ignorés.</p>
+Cette propriété n'a aucun effet quand deux segments connectés ont la même direction, car aucune zone de jonction ne sera ajoutée dans ce cas. Les segments dégénérés d'une longueur de zéro (c'est à dire avec les extrémités à la même position) seront ignorés.
 
-<div class="blockIndicator note">
-<p><strong>Note:</strong> Les lignes peuvent être dessinées aves les méthodes  {{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}}, {{domxref("CanvasRenderingContext2D.strokeRect()", "strokeRect()")}} et {{domxref("CanvasRenderingContext2D.strokeText()", "strokeText()")}}.</p>
-</div>
+> **Note :** Les lignes peuvent être dessinées aves les méthodes  {{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}}, {{domxref("CanvasRenderingContext2D.strokeRect()", "strokeRect()")}} et {{domxref("CanvasRenderingContext2D.strokeText()", "strokeText()")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>ctx</em>.lineJoin = "bevel" || "round" || "miter";
-</pre>
+    ctx.lineJoin = "bevel" || "round" || "miter";
 
-<h3 id="Options">Options</h3>
+### Options
 
-<p>Il y a trois valeurs possibles pour cette propriété: <code>"round"</code>, <code>"bevel"</code> et <code>"miter"</code>. Celle par défaut est <code>"miter"</code>.</p>
+Il y a trois valeurs possibles pour cette propriété: `"round"`, `"bevel"` et `"miter"`. Celle par défaut est `"miter"`.
 
-<p><img alt="" src="canvas_linejoin.png"></p>
+![](canvas_linejoin.png)
 
-<dl>
- <dt><code>"round"</code> (rond)</dt>
- <dd>Arrondit les coins d'une forme en remplissant un zone supplémentaire centré sur le point final commun des segments connectés. Le rayon de ces coins arrondis est égal à la largeur de la ligne .</dd>
- <dt><code>"bevel"</code> (biseau)</dt>
- <dd>Remplit une zone triangulaire supplémentaire entre les extrémités des segments connectés.</dd>
- <dt><code>"miter"</code> (onglet)</dt>
- <dd>Les segments raccordés  sont reliés entre eux en prolongeant leurs bors extérieurs en un seul point, ce qui a pour effet de remplir uen zone supplémentaire en forme de losange. Ce paramètre est affecté par la proriété {{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit")}}. Valeur par dafaut.</dd>
-</dl>
+- `"round"` (rond)
+  - : Arrondit les coins d'une forme en remplissant un zone supplémentaire centré sur le point final commun des segments connectés. Le rayon de ces coins arrondis est égal à la largeur de la ligne .
+- `"bevel"` (biseau)
+  - : Remplit une zone triangulaire supplémentaire entre les extrémités des segments connectés.
+- `"miter"` (onglet)
+  - : Les segments raccordés  sont reliés entre eux en prolongeant leurs bors extérieurs en un seul point, ce qui a pour effet de remplir uen zone supplémentaire en forme de losange. Ce paramètre est affecté par la proriété {{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit")}}. Valeur par dafaut.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Modifier_les_jointures_d'un_tracé">Modifier les jointures d'un tracé</h3>
+### Modifier les jointures d'un tracé
 
-<p>Cet exemple applique des jointures arrondies au tracé.</p>
+Cet exemple applique des jointures arrondies au tracé.
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
-</pre>
+```html
+<canvas id="canvas"></canvas>
+```
 
-<h4 id="JavaScript">JavaScript</h4>
+#### JavaScript
 
-<pre class="brush: js">const canvas = document.getElementById('canvas');
+```js
+const canvas = document.getElementById('canvas');
 const ctx = canvas.getContext('2d');
 
 ctx.lineWidth = 20;
@@ -64,23 +61,26 @@ ctx.lineTo(190, 100);
 ctx.lineTo(280, 20);
 ctx.lineTo(280, 150);
 ctx.stroke();
-</pre>
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{ EmbedLiveSample('Changing_the_joins_in_a_path', 700, 180) }}</p>
+{{ EmbedLiveSample('Changing_the_joins_in_a_path', 700, 180) }}
 
-<h3 id="Comparaison_des_jointures_de_lignes">Comparaison des jointures de lignes</h3>
+### Comparaison des jointures de lignes
 
-<p>L'exemple dessine 3 tracés différents, illustrant chacune des trois valeurs de <code>lineJoin</code>.</p>
+L'exemple dessine 3 tracés différents, illustrant chacune des trois valeurs de `lineJoin`.
 
-<pre class="brush: html hidden">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+```html hidden
+<canvas id="canvas" width="150" height="150"></canvas>
+```
 
-<pre class="brush: js">var ctx = document.getElementById('canvas').getContext('2d');
+```js
+var ctx = document.getElementById('canvas').getContext('2d');
 var lineJoin = ['round', 'bevel', 'miter'];
 ctx.lineWidth = 10;
 
-for (let i = 0; i &lt; lineJoin.length; i++) {
+for (let i = 0; i < lineJoin.length; i++) {
   ctx.lineJoin = lineJoin[i];
   ctx.beginPath();
   ctx.moveTo(-5, 5 + i * 40);
@@ -90,44 +90,27 @@ for (let i = 0; i &lt; lineJoin.length; i++) {
   ctx.lineTo(155, 5 + i * 40);
   ctx.stroke();
 }
-</pre>
+```
 
-<p>{{EmbedLiveSample("Comparison_of_line_joins", "180", "180", "canvas_linejoin.png")}}</p>
+{{EmbedLiveSample("Comparison_of_line_joins", "180", "180", "canvas_linejoin.png")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-linejoin", "CanvasRenderingContext2D.lineJoin")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                                | Statut                           | Commentaire |
+| -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- |
+| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-linejoin", "CanvasRenderingContext2D.lineJoin")}} | {{Spec2('HTML WHATWG')}} |             |
 
-<h2 id="Compatibilité_des_naviagateurs">Compatibilité des naviagateurs</h2>
+## Compatibilité des naviagateurs
 
+{{Compat("api.CanvasRenderingContext2D.lineJoin")}}
 
+### WebKit/Blink-notes particulières
 
-<p>{{Compat("api.CanvasRenderingContext2D.lineJoin")}}</p>
+- Dans les navigateurs basés sur WebKit et Blink, une méthode `ctx.setLineJoin()` non-standard et obsolète est implémentée en plus de cette propriété.
 
-<h3 id="WebKitBlink-notes_particulières">WebKit/Blink-notes particulières</h3>
+## Voir aussi
 
-<ul>
- <li>Dans les navigateurs basés sur WebKit et Blink, une méthode <code>ctx.setLineJoin()</code> non-standard et obsolète est implémentée en plus de cette propriété.</li>
-</ul>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>L'interface définissant cette propriété: {{domxref("CanvasRenderingContext2D")}}</li>
- <li>{{domxref("CanvasRenderingContext2D.lineCap")}}</li>
- <li>{{domxref("CanvasRenderingContext2D.lineWidth")}}</li>
- <li><a href="/fr-FR/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">Ajout de styles et de couleurs</a></li>
-</ul>
+- L'interface définissant cette propriété: {{domxref("CanvasRenderingContext2D")}}
+- {{domxref("CanvasRenderingContext2D.lineCap")}}
+- {{domxref("CanvasRenderingContext2D.lineWidth")}}
+- [Ajout de styles et de couleurs](/fr-FR/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors)
diff --git a/files/fr/web/api/canvasrenderingcontext2d/lineto/index.md b/files/fr/web/api/canvasrenderingcontext2d/lineto/index.md
index 6ed54f222e..776fe0223d 100644
--- a/files/fr/web/api/canvasrenderingcontext2d/lineto/index.md
+++ b/files/fr/web/api/canvasrenderingcontext2d/lineto/index.md
@@ -9,63 +9,64 @@ tags:
   - Reference
 translation_of: Web/API/CanvasRenderingContext2D/lineTo
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}
 
-<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.lineTo()</code></strong> de l'API Canvas 2D connecte le dernier point du sous-chemin en cours aux coordonnées <code>x, y</code> spécifiées avec une ligne droite (sans tracer réellement le chemin).</p>
+La méthode **`CanvasRenderingContext2D`\*\***`.lineTo()`\*\* de l'API Canvas 2D connecte le dernier point du sous-chemin en cours aux coordonnées `x, y` spécifiées avec une ligne droite (sans tracer réellement le chemin).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">void <var><em>ctx</em>.lineTo(x, y);</var>
-</pre>
+    void ctx.lineTo(x, y);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>x</code></dt>
- <dd>L'abscisse <em>x</em> du point d'arrivée.</dd>
- <dt><code>y</code></dt>
- <dd>L'ordonnée <em>y</em> du point d'arrivée.</dd>
-</dl>
+- `x`
+  - : L'abscisse _x_ du point d'arrivée.
+- `y`
+  - : L'ordonnée _y_ du point d'arrivée.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Utilisation_de_la_méthode_lineTo">Utilisation de la méthode <code>lineTo</code></h3>
+### Utilisation de la méthode `lineTo`
 
-<p>Ceci est un extrait de code utilisant la méthode <code>lineTo</code>. Il faut utiliser la méthode {{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}} pour débuter un dessin, pour ensuite pouvoir dessiner une ligne dessus. On peut déplacer le crayon avec la méthode {{domxref("CanvasRenderingContext2D.moveTo", "moveTo()")}} et utiliser la méthode {{domxref("CanvasRenderingContext2D.stroke", "stroke()")}} pour rendre la ligne visible.</p>
+Ceci est un extrait de code utilisant la méthode `lineTo`. Il faut utiliser la méthode {{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}} pour débuter un dessin, pour ensuite pouvoir dessiner une ligne dessus. On peut déplacer le crayon avec la méthode {{domxref("CanvasRenderingContext2D.moveTo", "moveTo()")}} et utiliser la méthode {{domxref("CanvasRenderingContext2D.stroke", "stroke()")}} pour rendre la ligne visible.
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
-</pre>
+```html
+<canvas id="canvas"></canvas>
+```
 
-<h4 id="JavaScript">JavaScript</h4>
+#### JavaScript
 
-<pre class="brush: js">var canvas = document.getElementById("canvas");
+```js
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 
 ctx.beginPath();
 ctx.moveTo(50,50);
 ctx.lineTo(100, 100);
 ctx.stroke();
-</pre>
+```
 
-<p>Éditez le code suivant pour voir les changements en direct:</p>
+Éditez le code suivant pour voir les changements en direct:
 
-<h4 id="code_jouable">Code jouable</h4>
+#### Code jouable
 
-<pre class="brush: html hidden">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
-&lt;div class="playable-buttons"&gt;
-  &lt;input id="edit" type="button" value="Edit" /&gt;
-  &lt;input id="reset" type="button" value="Reset" /&gt;
-&lt;/div&gt;
-&lt;textarea id="code" class="playable-code"&gt;
+```html hidden
+<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code">
 ctx.beginPath();
 ctx.moveTo(50,50);
 ctx.lineTo(100, 100);
-ctx.stroke();&lt;/textarea&gt;
-</pre>
+ctx.stroke();</textarea>
+```
 
-<pre class="brush: js hidden">var canvas = document.getElementById("canvas");
+```js hidden
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 var textarea = document.getElementById("code");
 var reset = document.getElementById("reset");
@@ -88,35 +89,22 @@ edit.addEventListener("click", function() {
 
 textarea.addEventListener("input", drawCanvas);
 window.addEventListener("load", drawCanvas);
-</pre>
-
-<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-lineto", "CanvasRenderingContext2D.lineTo")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.CanvasRenderingContext2D.lineTo")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>l'interface qui la définit, {{domxref("CanvasRenderingContext2D")}}</li>
- <li>{{domxref("CanvasRenderingContext2D.moveTo()")}}</li>
- <li>{{domxref("CanvasRenderingContext2D.stroke()")}}</li>
-</ul>
+```
+
+{{ EmbedLiveSample('code_jouable', 700, 360) }}
+
+## Spécifications
+
+| Spécification                                                                                                                            | Statut                           | Commentaire |
+| ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- |
+| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-lineto", "CanvasRenderingContext2D.lineTo")}} | {{Spec2('HTML WHATWG')}} |             |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.CanvasRenderingContext2D.lineTo")}}
+
+## Voir aussi
+
+- l'interface qui la définit, {{domxref("CanvasRenderingContext2D")}}
+- {{domxref("CanvasRenderingContext2D.moveTo()")}}
+- {{domxref("CanvasRenderingContext2D.stroke()")}}
diff --git a/files/fr/web/api/canvasrenderingcontext2d/measuretext/index.md b/files/fr/web/api/canvasrenderingcontext2d/measuretext/index.md
index ef2a1af3a9..48521a7e8d 100644
--- a/files/fr/web/api/canvasrenderingcontext2d/measuretext/index.md
+++ b/files/fr/web/api/canvasrenderingcontext2d/measuretext/index.md
@@ -9,65 +9,52 @@ tags:
   - Reference
 translation_of: Web/API/CanvasRenderingContext2D/measureText
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}
 
-<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.measureText()</code></strong> renvoie un objet {{domxref ("TextMetrics")}} qui contient des informations sur le texte mesuré (telle que sa largeur, par exemple).</p>
+La méthode **`CanvasRenderingContext2D`\*\***`.measureText()`\*\* renvoie un objet {{domxref ("TextMetrics")}} qui contient des informations sur le texte mesuré (telle que sa largeur, par exemple).
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var><em>ctx</em></var>.measureText(texte);</pre>
+    ctx.measureText(texte);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt>texte</dt>
- <dd>Le texte à mesurer.</dd>
-</dl>
+- texte
+  - : Le texte à mesurer.
 
-<h3 id="Valeur_retournée">Valeur retournée</h3>
+### Valeur retournée
 
-<p>Un objet {{domxref("TextMetrics")}}.</p>
+Un objet {{domxref("TextMetrics")}}.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Étant donné cet élément {{HTMLElement("canvas")}} :</p>
+Étant donné cet élément {{HTMLElement("canvas")}} :
 
-<pre class="brush: html">&lt;canvas id="canevas"&gt;&lt;/canvas&gt;
-</pre>
+```html
+<canvas id="canevas"></canvas>
+```
 
-<p>vous pouvez obtenir un objet {{domxref("TextMetrics")}} en utilisant le code suivant :</p>
+vous pouvez obtenir un objet {{domxref("TextMetrics")}} en utilisant le code suivant :
 
-<pre class="brush: js">var canevas = document.getElementById('canevas');
+```js
+var canevas = document.getElementById('canevas');
 var ctx = canevas.getContext('2d');
 
 var texte = ctx.measureText('foo'); // objet TextMetrics
 texte.width; // 16;
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-measuretext", "CanvasRenderingContext2D.measureText")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.CanvasRenderingContext2D.measureText")}}</p>
-
-<h2 id="See_also">Voir aussi</h2>
-
-<ul>
- <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}.</li>
- <li>{{domxref("TextMetrics")}}</li>
-</ul>
+```
+
+## Spécifications
+
+| Spécification                                                                                                                                        | Statut                           | Commentaire |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- |
+| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-measuretext", "CanvasRenderingContext2D.measureText")}} | {{Spec2('HTML WHATWG')}} |             |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.CanvasRenderingContext2D.measureText")}}
+
+## Voir aussi
+
+- L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}.
+- {{domxref("TextMetrics")}}
diff --git a/files/fr/web/api/canvasrenderingcontext2d/moveto/index.md b/files/fr/web/api/canvasrenderingcontext2d/moveto/index.md
index 958b41c5aa..e2bd2fb269 100644
--- a/files/fr/web/api/canvasrenderingcontext2d/moveto/index.md
+++ b/files/fr/web/api/canvasrenderingcontext2d/moveto/index.md
@@ -7,63 +7,64 @@ tags:
   - CanvasRenderingContext2D
 translation_of: Web/API/CanvasRenderingContext2D/moveTo
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}
 
-<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.moveTo()</code></strong> de l'API Canvas 2D déplace le point de départ d'un nouveau sous-chemin vers les coordonnées <code>(x, y)</code>.</p>
+La méthode **`CanvasRenderingContext2D`\*\***`.moveTo()`\*\* de l'API Canvas 2D déplace le point de départ d'un nouveau sous-chemin vers les coordonnées `(x, y)`.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">void <var><em>ctx</em>.moveTo(x, y);</var>
-</pre>
+    void ctx.moveTo(x, y);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>x</code></dt>
- <dd>L'axe des x du point.</dd>
- <dt><code>y</code></dt>
- <dd>L'axe des y du point.</dd>
-</dl>
+- `x`
+  - : L'axe des x du point.
+- `y`
+  - : L'axe des y du point.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Utiliser_la_méthode_moveTo">Utiliser la méthode <code>moveTo</code></h3>
+### Utiliser la méthode `moveTo`
 
-<p>Ceci est un simple snippet de code qui utilise la méthode <code>moveTo</code> pour déplacer le stylo à une position de départ pour dessiner une ligne.</p>
+Ceci est un simple snippet de code qui utilise la méthode `moveTo` pour déplacer le stylo à une position de départ pour dessiner une ligne.
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
-</pre>
+```html
+<canvas id="canvas"></canvas>
+```
 
-<h4 id="JavaScript">JavaScript</h4>
+#### JavaScript
 
-<pre class="brush: js">var canvas = document.getElementById('canvas');
+```js
+var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
 
 ctx.beginPath();
 ctx.moveTo(50, 50);
 ctx.lineTo(200, 50);
 ctx.stroke();
-</pre>
+```
 
-<p>Éditez le code ci-dessous pour voir vos changements mettre à jour le canvas en direct:</p>
+Éditez le code ci-dessous pour voir vos changements mettre à jour le canvas en direct:
 
-<h4 id="code_jouable">Code jouable</h4>
+#### Code jouable
 
-<pre class="brush: html hidden">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
-&lt;div class="playable-buttons"&gt;
-  &lt;input id="edit" type="button" value="Edit" /&gt;
-  &lt;input id="reset" type="button" value="Reset" /&gt;
-&lt;/div&gt;
-&lt;textarea id="code" class="playable-code"&gt;
+```html hidden
+<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code">
 ctx.beginPath();
 ctx.moveTo(50,50);
 ctx.lineTo(200, 50);
-ctx.stroke()&lt;/textarea&gt;
-</pre>
+ctx.stroke()</textarea>
+```
 
-<pre class="brush: js hidden">var canvas = document.getElementById("canvas");
+```js hidden
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 var textarea = document.getElementById("code");
 var reset = document.getElementById("reset");
@@ -86,35 +87,22 @@ edit.addEventListener("click", function() {
 
 textarea.addEventListener("input", drawCanvas);
 window.addEventListener("load", drawCanvas);
-</pre>
-
-<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-moveto", "CanvasRenderingContext2D.moveTo")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.CanvasRenderingContext2D.moveTo")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>L'interface qui définit cette méthode, {{domxref("CanvasRenderingContext2D")}}</li>
- <li>{{domxref("CanvasRenderingContext2D.lineTo()")}}</li>
- <li>{{domxref("CanvasRenderingContext2D.stroke()")}}</li>
-</ul>
+```
+
+{{ EmbedLiveSample('code_jouable', 700, 360) }}
+
+## Spécifications
+
+| Specification                                                                                                                            | Status                           | Comment |
+| ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------- |
+| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-moveto", "CanvasRenderingContext2D.moveTo")}} | {{Spec2('HTML WHATWG')}} |         |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.CanvasRenderingContext2D.moveTo")}}
+
+## Voir aussi
+
+- L'interface qui définit cette méthode, {{domxref("CanvasRenderingContext2D")}}
+- {{domxref("CanvasRenderingContext2D.lineTo()")}}
+- {{domxref("CanvasRenderingContext2D.stroke()")}}
diff --git a/files/fr/web/api/canvasrenderingcontext2d/quadraticcurveto/index.md b/files/fr/web/api/canvasrenderingcontext2d/quadraticcurveto/index.md
index 7587faa897..7b95e52523 100644
--- a/files/fr/web/api/canvasrenderingcontext2d/quadraticcurveto/index.md
+++ b/files/fr/web/api/canvasrenderingcontext2d/quadraticcurveto/index.md
@@ -16,42 +16,41 @@ tags:
   - Reference
 translation_of: Web/API/CanvasRenderingContext2D/quadraticCurveTo
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}
 
-<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.quadraticCurveTo()</code></strong> de l'API Canvas 2D ajoute une <a href="https://en.wikipedia.org/wiki/B%C3%A9zier_curve">courbe de Bézier</a> quadratique au sous-chemin courant. Elle requiert deux points: le premier est le point de contrôle et le second est le point d'arrivée. Le point de départ est le dernier point du chemin courant, qui peut être changé au moyen de la méthode {{domxref("CanvasRenderingContext2D.moveTo", "moveTo()")}} avant de créer la courbe quadratique de Bézier.</p>
+La méthode **`CanvasRenderingContext2D`\*\***`.quadraticCurveTo()`\*\* de l'API Canvas 2D ajoute une [courbe de Bézier](https://en.wikipedia.org/wiki/B%C3%A9zier_curve) quadratique au sous-chemin courant. Elle requiert deux points: le premier est le point de contrôle et le second est le point d'arrivée. Le point de départ est le dernier point du chemin courant, qui peut être changé au moyen de la méthode {{domxref("CanvasRenderingContext2D.moveTo", "moveTo()")}} avant de créer la courbe quadratique de Bézier.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">void contexte2D.quadraticCurveTo(<em>pointContrôleX</em>, <em>pointContrôleY</em>, <em>pointArrivéeX</em>, <em>pointArrivéeY</em>);
-</pre>
+    void contexte2D.quadraticCurveTo(pointContrôleX, pointContrôleY, pointArrivéeX, pointArrivéeY);
 
-<h3 id="Paramètress">Paramètress</h3>
+### Paramètress
 
-<dl>
- <dt><code>pointContrôleX</code></dt>
- <dd>La coordonnée en x du point de contrôle.</dd>
- <dt><code>pointContrôleY</code></dt>
- <dd>La coordonnée en y du point de contrôle.</dd>
- <dt><code>pointArrivéeX</code></dt>
- <dd>La coordonnée en x du point d'arrivée.</dd>
- <dt><code>pointArrivéeY</code></dt>
- <dd>La coordonnée en y du point d'arrivée.</dd>
-</dl>
+- `pointContrôleX`
+  - : La coordonnée en x du point de contrôle.
+- `pointContrôleY`
+  - : La coordonnée en y du point de contrôle.
+- `pointArrivéeX`
+  - : La coordonnée en x du point d'arrivée.
+- `pointArrivéeY`
+  - : La coordonnée en y du point d'arrivée.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Comment_quadraticCurveTo_fonctionne">Comment quadraticCurveTo fonctionne</h3>
+### Comment quadraticCurveTo fonctionne
 
-<p>Cet exemple montre comment un courbe quadratique de Bézier est dessinée.</p>
+Cet exemple montre comment un courbe quadratique de Bézier est dessinée.
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
-</pre>
+```html
+<canvas id="canvas"></canvas>
+```
 
-<h4 id="JavaScript">JavaScript</h4>
+#### JavaScript
 
-<pre class="brush: js">const canevas = document.getElementById("canvas");
+```js
+const canevas = document.getElementById("canvas");
 const contexte2D= canevas.getContext("2d");
 
 // courbe quadratique de Bézier
@@ -72,66 +71,53 @@ contexte2D.fillStyle = 'red';
 contexte2D.beginPath();
 contexte2D.arc(230, 30, 5, 0, 2 * Math.PI);
 contexte2D.fill();
-</pre>
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>Dans cet exemple, le point de contrôle est rouge et les points de départ et d'arrivée sont en bleu.</p>
+Dans cet exemple, le point de contrôle est rouge et les points de départ et d'arrivée sont en bleu.
 
-<p>{{EmbedLiveSample('How_quadraticCurveTo_works', 315, 165)}}</p>
+{{EmbedLiveSample('How_quadraticCurveTo_works', 315, 165)}}
 
-<h3 id="Une_courbe_quadratique_simple">Une courbe quadratique simple</h3>
+### Une courbe quadratique simple
 
-<p>Cet exemple dessine une simple courbe quadratique de Bézier au moyen de la méthode <code>quadraticCurveTo()</code>.</p>
+Cet exemple dessine une simple courbe quadratique de Bézier au moyen de la méthode `quadraticCurveTo()`.
 
-<h4 id="HTML_2">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
-</pre>
+```html
+<canvas id="canvas"></canvas>
+```
 
-<h4 id="JavaScript_2">JavaScript</h4>
+#### JavaScript
 
-<p>La courbe commence au point spécifié par <code>moveTo()</code>: (20, 110). Le point de contrôle est placé à (230, 150). La courbe s'achève en (250, 20).</p>
+La courbe commence au point spécifié par `moveTo()`: (20, 110). Le point de contrôle est placé à (230, 150). La courbe s'achève en (250, 20).
 
-<pre class="brush: js">const canevas = document.getElementById("canvas");
+```js
+const canevas = document.getElementById("canvas");
 const contexte2D = canevas.getContext("2d");
 
 contexte2D.beginPath();
 contexte2D.moveTo(20, 110);
 contexte2D.quadraticCurveTo(230, 150, 250, 20);
 contexte2D.stroke();
-</pre>
+```
 
-<h4 id="Résultat_2">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample('A_simple_quadratic_curve', 700, 180)}}</p>
+{{EmbedLiveSample('A_simple_quadratic_curve', 700, 180)}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-quadraticcurveto", "CanvasRenderingContext2D.quadraticCurveTo")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                                                        | Statut                           | Commentaire |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- |
+| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-quadraticcurveto", "CanvasRenderingContext2D.quadraticCurveTo")}} | {{Spec2('HTML WHATWG')}} |             |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
+{{Compat("api.CanvasRenderingContext2D.quadraticCurveTo")}}
 
+## Voir aussi
 
-<p>{{Compat("api.CanvasRenderingContext2D.quadraticCurveTo")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>L'interface définissant cette méthode : {{domxref("CanvasRenderingContext2D")}}</li>
- <li><a href="http://fr.wikipedia.org/wiki/Courbe_de_Bézier">L'article Wikipédia sur les courbes quadratiques de Bézier</a></li>
-</ul>
+- L'interface définissant cette méthode : {{domxref("CanvasRenderingContext2D")}}
+- [L'article Wikipédia sur les courbes quadratiques de Bézier](http://fr.wikipedia.org/wiki/Courbe_de_Bézier)
diff --git a/files/fr/web/api/canvasrenderingcontext2d/rect/index.md b/files/fr/web/api/canvasrenderingcontext2d/rect/index.md
index 8a822dd115..982b8594f8 100644
--- a/files/fr/web/api/canvasrenderingcontext2d/rect/index.md
+++ b/files/fr/web/api/canvasrenderingcontext2d/rect/index.md
@@ -8,62 +8,63 @@ tags:
   - Méthode
 translation_of: Web/API/CanvasRenderingContext2D/rect
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}
 
-<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.rect()</code></strong> de l'API Canvas 2D crée un chemin de rectangle à la position <em>(x, y)</em> et de dimensions <em>width</em> et <em>height</em>. Ces quatre points sont connectés par des lignes droites et le sous-chemin est directement fermé, vous pouvez donc utiliser <code>fill</code> ou <code>stroke</code> pour dessiner ce rectangle.</p>
+La méthode **`CanvasRenderingContext2D`\*\***`.rect()`\*_ de l'API Canvas 2D crée un chemin de rectangle à la position _(x, y)* et de dimensions *width* et *height\*. Ces quatre points sont connectés par des lignes droites et le sous-chemin est directement fermé, vous pouvez donc utiliser `fill` ou `stroke` pour dessiner ce rectangle.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">void <var><em>ctx</em>.rect(x, y, width, height);</var>
-</pre>
+    void ctx.rect(x, y, width, height);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>x</code></dt>
- <dd>La coordonnée x pour le côté gauche du rectangle.</dd>
- <dt><code>y</code></dt>
- <dd>La coordonnée y pour le haut du rectangle.</dd>
- <dt><code>width</code></dt>
- <dd>La largeur du rectangle.</dd>
- <dt><code>height</code></dt>
- <dd>La hauteur du rectangle.</dd>
-</dl>
+- `x`
+  - : La coordonnée x pour le côté gauche du rectangle.
+- `y`
+  - : La coordonnée y pour le haut du rectangle.
+- `width`
+  - : La largeur du rectangle.
+- `height`
+  - : La hauteur du rectangle.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Utiliser_la_méthode_rect">Utiliser la méthode <code>rect</code></h3>
+### Utiliser la méthode `rect`
 
-<p>Ceci est un simple bout de code qui utilise la méthode <code>rect</code> pour dessiner un chemin. Pour réellement dessiner ce chemin sur le canvas, vous devez utiliser la méthode {{domxref("CanvasRenderingContext2D.fill", "fill()")}} ou {{domxref("CanvasRenderingContext2D.stroke", "stroke()")}}. Voir également les méthodes {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} et {{domxref("CanvasRenderingContext2D.strokeRect", "strokeRect()")}}, qui peuvent le faire en une seule étape.</p>
+Ceci est un simple bout de code qui utilise la méthode `rect` pour dessiner un chemin. Pour réellement dessiner ce chemin sur le canvas, vous devez utiliser la méthode {{domxref("CanvasRenderingContext2D.fill", "fill()")}} ou {{domxref("CanvasRenderingContext2D.stroke", "stroke()")}}. Voir également les méthodes {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} et {{domxref("CanvasRenderingContext2D.strokeRect", "strokeRect()")}}, qui peuvent le faire en une seule étape.
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
-</pre>
+```html
+<canvas id="canvas"></canvas>
+```
 
-<h4 id="JavaScript">JavaScript</h4>
+#### JavaScript
 
-<pre class="brush: js">var canvas = document.getElementById('canvas');
+```js
+var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
 ctx.rect(10, 10, 100, 100);
 ctx.fill();
-</pre>
+```
 
-<p>Éditez le code ci-dessous pour voir vos mises à jour apportées au canvas directement:</p>
+Éditez le code ci-dessous pour voir vos mises à jour apportées au canvas directement:
 
-<h4 id="code_jouable">Code jouable</h4>
+#### Code jouable
 
-<pre class="brush: html hidden">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
-&lt;div class="playable-buttons"&gt;
-  &lt;input id="edit" type="button" value="Edit" /&gt;
-  &lt;input id="reset" type="button" value="Reset" /&gt;
-&lt;/div&gt;
-&lt;textarea id="code" class="playable-code"&gt;
+```html hidden
+<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code">
 ctx.rect(10, 10, 100, 100);
-ctx.fill();&lt;/textarea&gt;
-</pre>
+ctx.fill();</textarea>
+```
 
-<pre class="brush: js hidden">var canvas = document.getElementById("canvas");
+```js hidden
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 var textarea = document.getElementById("code");
 var reset = document.getElementById("reset");
@@ -86,37 +87,24 @@ edit.addEventListener("click", function() {
 
 textarea.addEventListener("input", drawCanvas);
 window.addEventListener("load", drawCanvas);
-</pre>
-
-<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-rect", "CanvasRenderingContext2D.rect")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.CanvasRenderingContext2D.rect")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>L'interface qui définit cette méthode, {{domxref("CanvasRenderingContext2D")}}</li>
- <li>{{domxref("CanvasRenderingContext2D.fillRect")}}</li>
- <li>{{domxref("CanvasRenderingContext2D.strokeRect()")}}</li>
- <li>{{domxref("CanvasRenderingContext2D.fill()")}}</li>
- <li>{{domxref("CanvasRenderingContext2D.stroke()")}}</li>
-</ul>
+```
+
+{{ EmbedLiveSample('code_jouable', 700, 360) }}
+
+## Spécifications
+
+| Specification                                                                                                                        | Status                           | Comment |
+| ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------- |
+| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-rect", "CanvasRenderingContext2D.rect")}} | {{Spec2('HTML WHATWG')}} |         |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.CanvasRenderingContext2D.rect")}}
+
+## Voir aussi
+
+- L'interface qui définit cette méthode, {{domxref("CanvasRenderingContext2D")}}
+- {{domxref("CanvasRenderingContext2D.fillRect")}}
+- {{domxref("CanvasRenderingContext2D.strokeRect()")}}
+- {{domxref("CanvasRenderingContext2D.fill()")}}
+- {{domxref("CanvasRenderingContext2D.stroke()")}}
diff --git a/files/fr/web/api/canvasrenderingcontext2d/rotate/index.md b/files/fr/web/api/canvasrenderingcontext2d/rotate/index.md
index 5cde5f8af5..3aec5226fa 100644
--- a/files/fr/web/api/canvasrenderingcontext2d/rotate/index.md
+++ b/files/fr/web/api/canvasrenderingcontext2d/rotate/index.md
@@ -9,40 +9,39 @@ tags:
   - Reference
 translation_of: Web/API/CanvasRenderingContext2D/rotate
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}
 
-<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.rotate()</code></strong><code> de l'API</code> Canvas 2D ajoute une rotation à la matrice de transformation. L'argument angle représente un angle de rotation horaire et il est exprimé en radians.</p>
+La méthode **`CanvasRenderingContext2D`\*\***`.rotate()`\*\*` de l'API` Canvas 2D ajoute une rotation à la matrice de transformation. L'argument angle représente un angle de rotation horaire et il est exprimé en radians.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">void <var><em>ctx</em>.rotate(angle);</var>
-</pre>
+    void ctx.rotate(angle);
 
-<p><img alt="" src="canvas_grid_rotate.png"></p>
+![](canvas_grid_rotate.png)
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>angle</code></dt>
- <dd>L'angle de rotation horaire en radians. Vous pouvez utiliser <code><em>degrés</em> * Math.PI / 180</code> si vous voulez faire la conversion à partir d'une valeur en degrés.</dd>
-</dl>
+- `angle`
+  - : L'angle de rotation horaire en radians. Vous pouvez utiliser `degrés * Math.PI / 180` si vous voulez faire la conversion à partir d'une valeur en degrés.
 
-<p>Le centre de la rotation est toujours l'origine du canevas. Pour changer le centre, il faudra déplacer le canevas en utilisant la méthode {{domxref("CanvasRenderingContext2D.translate", "translate()")}}.</p>
+Le centre de la rotation est toujours l'origine du canevas. Pour changer le centre, il faudra déplacer le canevas en utilisant la méthode {{domxref("CanvasRenderingContext2D.translate", "translate()")}}.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Utilisation_de_la_méthode_rotate">Utilisation de la méthode <code>rotate</code></h3>
+### Utilisation de la méthode `rotate`
 
-<p>Ceci est seulement un fragment de code simple qui utilise la méthode <code>rotate</code>.</p>
+Ceci est seulement un fragment de code simple qui utilise la méthode `rotate`.
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
-</pre>
+```html
+<canvas id="canvas"></canvas>
+```
 
-<h4 id="JavaScript">JavaScript</h4>
+#### JavaScript
 
-<pre class="brush: js">var canvas = document.getElementById('canvas');
+```js
+var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
 
 ctx.rotate(45 * Math.PI / 180);
@@ -50,24 +49,26 @@ ctx.fillRect(70, 0, 100, 30);
 
 // réinitialise la matrice de transformation courante à la matrice identité
 ctx.setTransform(1, 0, 0, 1, 0, 0);
-</pre>
+```
 
-<p>Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas:</p>
+Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas:
 
-<h4 id="code_jouable">Code jouable</h4>
+#### Code jouable
 
-<pre class="brush: html hidden">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
-&lt;div class="playable-buttons"&gt;
-  &lt;input id="edit" type="button" value="Edit" /&gt;
-  &lt;input id="reset" type="button" value="Reset" /&gt;
-&lt;/div&gt;
-&lt;textarea id="code" class="playable-code"&gt;
+```html hidden
+<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code">
 ctx.rotate(45 * Math.PI / 180);
 ctx.fillRect(70,0,100,30);
-ctx.setTransform(1, 0, 0, 1, 0, 0);&lt;/textarea&gt;
-</pre>
+ctx.setTransform(1, 0, 0, 1, 0, 0);</textarea>
+```
 
-<pre class="brush: js hidden">var canvas = document.getElementById("canvas");
+```js hidden
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 var textarea = document.getElementById("code");
 var reset = document.getElementById("reset");
@@ -90,33 +91,20 @@ edit.addEventListener("click", function() {
 
 textarea.addEventListener("input", drawCanvas);
 window.addEventListener("load", drawCanvas);
-</pre>
+```
 
-<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p>
+{{ EmbedLiveSample('code_jouable', 700, 360) }}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-rotate", "CanvasRenderingContext2D.rotate")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                            | Statut                           | Commentaire |
+| ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- |
+| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-rotate", "CanvasRenderingContext2D.rotate")}} | {{Spec2('HTML WHATWG')}} |             |
 
-<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+## Compatibilité navigateurs
 
-<p>{{Compat("api.CanvasRenderingContext2D.rotate")}}</p>
+{{Compat("api.CanvasRenderingContext2D.rotate")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li>
-</ul>
+- L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}
diff --git a/files/fr/web/api/canvasrenderingcontext2d/save/index.md b/files/fr/web/api/canvasrenderingcontext2d/save/index.md
index d91e31ffbe..cc49bad21e 100644
--- a/files/fr/web/api/canvasrenderingcontext2d/save/index.md
+++ b/files/fr/web/api/canvasrenderingcontext2d/save/index.md
@@ -9,39 +9,39 @@ tags:
   - Save
 translation_of: Web/API/CanvasRenderingContext2D/save
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}
 
-<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.save()</code></strong> de l'API Canvas 2D API enregistre l'état complet du canvas en plaçant l'état courant dans une stack.</p>
+La méthode **`CanvasRenderingContext2D`\*\***`.save()`\*\* de l'API Canvas 2D API enregistre l'état complet du canvas en plaçant l'état courant dans une stack.
 
-<h3 id="Létat_du_dessin">L'état du dessin</h3>
+### L'état du dessin
 
-<p>L'état du dessin qui est sauvegardé dans une stack se compose de:</p>
+L'état du dessin qui est sauvegardé dans une stack se compose de:
 
-<ul>
- <li>La matrice de transformation actuelle.</li>
- <li>La région de détourage actuelle.</li>
- <li>Le tableau pour les tracés en pointillés.</li>
- <li>Les valeurs des attributs suivant: {{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle")}}, {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}}, {{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha")}}, {{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth")}}, {{domxref("CanvasRenderingContext2D.lineCap", "lineCap")}}, {{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin")}}, {{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit")}}, {{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset")}}, {{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX")}}, {{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY")}}, {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}}, {{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor")}}, {{domxref("CanvasRenderingContext2D.globalCompositeOperation", "globalCompositeOperation")}}, {{domxref("CanvasRenderingContext2D.font", "font")}}, {{domxref("CanvasRenderingContext2D.textAlign", "textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline")}}, {{domxref("CanvasRenderingContext2D.direction", "direction")}}, {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}}.</li>
-</ul>
+- La matrice de transformation actuelle.
+- La région de détourage actuelle.
+- Le tableau pour les tracés en pointillés.
+- Les valeurs des attributs suivant: {{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle")}}, {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}}, {{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha")}}, {{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth")}}, {{domxref("CanvasRenderingContext2D.lineCap", "lineCap")}}, {{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin")}}, {{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit")}}, {{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset")}}, {{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX")}}, {{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY")}}, {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}}, {{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor")}}, {{domxref("CanvasRenderingContext2D.globalCompositeOperation", "globalCompositeOperation")}}, {{domxref("CanvasRenderingContext2D.font", "font")}}, {{domxref("CanvasRenderingContext2D.textAlign", "textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline")}}, {{domxref("CanvasRenderingContext2D.direction", "direction")}}, {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">void <em>ctx</em>.save();</pre>
+    void ctx.save();
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<h3 id="Enregistrer_létat_du_dessin">Enregistrer l'état du dessin</h3>
+### Enregistrer l'état du dessin
 
-<p>Cet exemple utilise la méthode <code>save()</code> pour enregistrer l'état par défaut et <code>restore()</code>  pour le rétablir plus tard, on pourra ainsi dessiner un rectangle avec l'état de base après.</p>
+Cet exemple utilise la méthode `save()` pour enregistrer l'état par défaut et `restore()`  pour le rétablir plus tard, on pourra ainsi dessiner un rectangle avec l'état de base après.
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
-</pre>
+```html
+<canvas id="canvas"></canvas>
+```
 
-<h4 id="JavaScript">JavaScript</h4>
+#### JavaScript
 
-<pre class="brush: js">const canvas = document.getElementById('canvas');
+```js
+const canvas = document.getElementById('canvas');
 const ctx = canvas.getContext('2d');
 
 // On sauvegarde l'état par défaut
@@ -54,38 +54,23 @@ ctx.fillRect(10, 10, 100, 100);
 ctx.restore();
 
 ctx.fillRect(150, 40, 100, 100);
-</pre>
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{ EmbedLiveSample('Saving_the_drawing_state', 700, 180) }}</p>
+{{ EmbedLiveSample('Saving_the_drawing_state', 700, 180) }}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-save", "CanvasRenderingContext2D.save")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                        | Statut                           | Commentaire |
+| ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- |
+| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-save", "CanvasRenderingContext2D.save")}} | {{Spec2('HTML WHATWG')}} |             |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
+{{Compat("api.CanvasRenderingContext2D.save")}}
 
+## Voir aussi
 
-<p>{{Compat("api.CanvasRenderingContext2D.save")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>L'interface définissant cette méthode: {{domxref("CanvasRenderingContext2D")}}</li>
- <li>{{domxref("CanvasRenderingContext2D.restore()")}}</li>
-</ul>
+- L'interface définissant cette méthode: {{domxref("CanvasRenderingContext2D")}}
+- {{domxref("CanvasRenderingContext2D.restore()")}}
diff --git a/files/fr/web/api/canvasrenderingcontext2d/scale/index.md b/files/fr/web/api/canvasrenderingcontext2d/scale/index.md
index cb24a37aa0..f8ca5735cb 100644
--- a/files/fr/web/api/canvasrenderingcontext2d/scale/index.md
+++ b/files/fr/web/api/canvasrenderingcontext2d/scale/index.md
@@ -9,40 +9,39 @@ tags:
   - Référence(2)
 translation_of: Web/API/CanvasRenderingContext2D/scale
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}
 
-<p>La méhode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.scale()</code></strong> de l'API Canvas 2D ajoute une transformation de mise à l'échelle des unités du canevas, de x horizontalement et de y verticalement.</p>
+La méhode **`CanvasRenderingContext2D`\*\***`.scale()`\*\* de l'API Canvas 2D ajoute une transformation de mise à l'échelle des unités du canevas, de x horizontalement et de y verticalement.
 
-<p>Par défaut, une unité sur le canevas est exactement un pixel. Si on applique, par exemple, un facteur d'échelle de 0,5, l'unité résultante deviendra 0,5 pixel et ainsi, les formes seront dessinées en taille moitié. De façon similaire, mettre le facteur d'échelle à 2,0 augmentera la taille de l'unité et une unité deviendra alors deux pixels. Cela aura pour résultat que les formes seront dessinées deux fois plus grandes.</p>
+Par défaut, une unité sur le canevas est exactement un pixel. Si on applique, par exemple, un facteur d'échelle de 0,5, l'unité résultante deviendra 0,5 pixel et ainsi, les formes seront dessinées en taille moitié. De façon similaire, mettre le facteur d'échelle à 2,0 augmentera la taille de l'unité et une unité deviendra alors deux pixels. Cela aura pour résultat que les formes seront dessinées deux fois plus grandes.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">void <var><em>ctx</em>.scale(x, y);</var>
-</pre>
+    void ctx.scale(x, y);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>x</code></dt>
- <dd>Facteur d'échelle dans la direction horizontale.</dd>
- <dt>y</dt>
- <dd>Facteur d'échelle dans la direction verticale.</dd>
-</dl>
+- `x`
+  - : Facteur d'échelle dans la direction horizontale.
+- y
+  - : Facteur d'échelle dans la direction verticale.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Utilisation_de_la_méthode_scale">Utilisation de la méthode <code>scale</code></h3>
+### Utilisation de la méthode `scale`
 
-<p>Ceci est seulement un fragment de code simple qui utilise la méthode <code>scale</code>.</p>
+Ceci est seulement un fragment de code simple qui utilise la méthode `scale`.
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
-</pre>
+```html
+<canvas id="canvas"></canvas>
+```
 
-<h4 id="JavaScript">JavaScript</h4>
+#### JavaScript
 
-<pre class="brush: js">var canvas = document.getElementById('canvas');
+```js
+var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
 
 ctx.scale(10, 3);
@@ -50,24 +49,26 @@ ctx.fillRect(10, 10, 10, 10);
 
 // remet la matrice de transformation courante à la matrice identité
 ctx.setTransform(1, 0, 0, 1, 0, 0);
-</pre>
+```
 
-<p>Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :</p>
+Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :
 
-<h4 id="code_jouable">Code jouable</h4>
+#### Code jouable
 
-<pre class="brush: html hidden">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
-&lt;div class="playable-buttons"&gt;
-  &lt;input id="edit" type="button" value="Edit" /&gt;
-  &lt;input id="reset" type="button" value="Reset" /&gt;
-&lt;/div&gt;
-&lt;textarea id="code" class="playable-code"&gt;
+```html hidden
+<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code">
 ctx.scale(10, 3);
 ctx.fillRect(10,10,10,10);
-ctx.setTransform(1, 0, 0, 1, 0, 0);&lt;/textarea&gt;
-</pre>
+ctx.setTransform(1, 0, 0, 1, 0, 0);</textarea>
+```
 
-<pre class="brush: js hidden">var canvas = document.getElementById("canvas");
+```js hidden
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 var textarea = document.getElementById("code");
 var reset = document.getElementById("reset");
@@ -90,29 +91,31 @@ edit.addEventListener("click", function() {
 
 textarea.addEventListener("input", drawCanvas);
 window.addEventListener("load", drawCanvas);
-</pre>
+```
 
-<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p>
+{{ EmbedLiveSample('code_jouable', 700, 360) }}
 
-<h3 id="Utilisation_de_scale_pour_un_retournement_horizontal_ou_vertical">Utilisation de <code>scale</code> pour un retournement horizontal ou vertical</h3>
+### Utilisation de `scale` pour un retournement horizontal ou vertical
 
-<p>Vous pouvez utiliser <code>ctx.scale(-1, 1)</code> pour retourner le contexte horizontalement et <code>ctx.scale(1, -1) </code>pour le retourner verticalement.</p>
+Vous pouvez utiliser `ctx.scale(-1, 1)` pour retourner le contexte horizontalement et `ctx.scale(1, -1) `pour le retourner verticalement.
 
-<h4 id="code_jouable_2">Code jouable 2</h4>
+#### Code jouable 2
 
-<pre class="brush: html hidden">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
-&lt;div class="playable-buttons"&gt;
-  &lt;input id="edit" type="button" value="Edit" /&gt;
-  &lt;input id="reset" type="button" value="Reset" /&gt;
-&lt;/div&gt;
-&lt;textarea id="code" class="playable-code"&gt;
+```html hidden
+<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code">
 ctx.scale(-1, 1);
 ctx.font = "48px serif";
 ctx.fillText("Hello world!", -320, 120);
-ctx.setTransform(1, 0, 0, 1, 0, 0);&lt;/textarea&gt;
-</pre>
+ctx.setTransform(1, 0, 0, 1, 0, 0);</textarea>
+```
 
-<pre class="brush: js hidden">var canvas = document.getElementById("canvas");
+```js hidden
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 var textarea = document.getElementById("code");
 var reset = document.getElementById("reset");
@@ -135,33 +138,20 @@ edit.addEventListener("click", function() {
 
 textarea.addEventListener("input", drawCanvas);
 window.addEventListener("load", drawCanvas);
-</pre>
+```
 
-<p>{{ EmbedLiveSample('code_jouable_2', 700, 360) }}</p>
+{{ EmbedLiveSample('code_jouable_2', 700, 360) }}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-scale", "CanvasRenderingContext2D.scale")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                        | Statut                           | Commentaire |
+| ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- |
+| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-scale", "CanvasRenderingContext2D.scale")}} | {{Spec2('HTML WHATWG')}} |             |
 
-<h2 id="Compatibilité_navigateur">Compatibilité navigateur</h2>
+## Compatibilité navigateur
 
-<p>{{Compat("api.CanvasRenderingContext2D.scale")}}</p>
+{{Compat("api.CanvasRenderingContext2D.scale")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li>
-</ul>
+- L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}
diff --git a/files/fr/web/api/canvasrenderingcontext2d/setlinedash/index.md b/files/fr/web/api/canvasrenderingcontext2d/setlinedash/index.md
index e8cdb0416e..520e2c8bb5 100644
--- a/files/fr/web/api/canvasrenderingcontext2d/setlinedash/index.md
+++ b/files/fr/web/api/canvasrenderingcontext2d/setlinedash/index.md
@@ -14,42 +14,39 @@ tags:
   - setLineDash
 translation_of: Web/API/CanvasRenderingContext2D/setLineDash
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}
 
-<p>La méthode <strong><code>setLineDash()</code></strong> de l'interface Canvas 2D API's {{domxref("CanvasRenderingContext2D")}} définit le modèle à utiliser pour les pointillés lors du dessin de la ligne, en utilisant un tableau de valeurs qui spécifie les longueurs des alternances entre pleins et creux.</p>
+La méthode **`setLineDash()`** de l'interface Canvas 2D API's {{domxref("CanvasRenderingContext2D")}} définit le modèle à utiliser pour les pointillés lors du dessin de la ligne, en utilisant un tableau de valeurs qui spécifie les longueurs des alternances entre pleins et creux.
 
-<div class="note">
-<p><strong>Note :</strong> Pour renvoyer une ligne pleine, configurez la liste pour les pointillés avec un tableau vide.</p>
-</div>
+> **Note :** Pour renvoyer une ligne pleine, configurez la liste pour les pointillés avec un tableau vide.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var><em>ctx</em>.setLineDash(segments);</var>
-</pre>
+    ctx.setLineDash(segments);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>segments</code></dt>
- <dd>Un tableau {{jsxref("Array")}} de nombres qui spécifie les distances qui vont alternativement dessiner pleins et creux (dans l'unité du système de coordonnées). Si le nombre d'éléments du tableau est impair, les éléments du tableau sont recopiés et concaténés. Par exemple, <code>[5, 15, 25]</code> est transformé en <code>[5, 15, 25, 5, 15, 25]</code>. Si le tableau est vide, le pointillé est supprimé, et la ligne devient pleine.</dd>
-</dl>
+- `segments`
+  - : Un tableau {{jsxref("Array")}} de nombres qui spécifie les distances qui vont alternativement dessiner pleins et creux (dans l'unité du système de coordonnées). Si le nombre d'éléments du tableau est impair, les éléments du tableau sont recopiés et concaténés. Par exemple, `[5, 15, 25]` est transformé en `[5, 15, 25, 5, 15, 25]`. Si le tableau est vide, le pointillé est supprimé, et la ligne devient pleine.
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+### Valeur de retour
 
-<p><code>undefined</code>.</p>
+`undefined`.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>C'est simplement un fragment de code qui utilise la méthode <code>setLineDash()</code> pour dessiner une ligne pointillée au dessus d'une ligne pleine.</p>
+C'est simplement un fragment de code qui utilise la méthode `setLineDash()` pour dessiner une ligne pointillée au dessus d'une ligne pleine.
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
-</pre>
+```html
+<canvas id="canvas"></canvas>
+```
 
-<h3 id="JavaScript">JavaScript</h3>
+### JavaScript
 
-<pre class="brush: js">var canvas = document.getElementById('canvas');
+```js
+var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
 
 ctx.beginPath();
@@ -63,20 +60,21 @@ ctx.setLineDash([]);
 ctx.moveTo(0, 150);
 ctx.lineTo(400, 150);
 ctx.stroke();
-</pre>
+```
 
-<h3 id="Essayez_le">Essayez le</h3>
+### Essayez le
 
-<p>Editez le code ci-dessous et observez les changements se produire dans le canvas:</p>
+Editez le code ci-dessous et observez les changements se produire dans le canvas:
 
-<h4 id="code_jouable">Code jouable</h4>
+#### Code jouable
 
-<pre class="brush: html hidden">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
-&lt;div class="playable-buttons"&gt;
-  &lt;input id="edit" type="button" value="Edit" /&gt;
-  &lt;input id="reset" type="button" value="Reset" /&gt;
-&lt;/div&gt;
-&lt;textarea id="code" class="playable-code" style="height:150px"&gt;
+```html hidden
+<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code" style="height:150px">
 ctx.beginPath();
 ctx.setLineDash([5, 15]);
 ctx.moveTo(0, 50);
@@ -87,10 +85,11 @@ ctx.beginPath();
 ctx.setLineDash([]);
 ctx.moveTo(0, 150);
 ctx.lineTo(400, 150);
-ctx.stroke();&lt;/textarea&gt;
-</pre>
+ctx.stroke();</textarea>
+```
 
-<pre class="brush: js hidden">var canvas = document.getElementById("canvas");
+```js hidden
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 var textarea = document.getElementById("code");
 var reset = document.getElementById("reset");
@@ -113,47 +112,30 @@ edit.addEventListener("click", function() {
 
 textarea.addEventListener("input", drawCanvas);
 window.addEventListener("load", drawCanvas);
-</pre>
+```
 
-<p>{{ EmbedLiveSample('code_jouable', 10, 410) }}</p>
+{{ EmbedLiveSample('code_jouable', 10, 410) }}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-setlinedash", "CanvasRenderingContext2D.setLineDash")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Specification                                                                                                                                        | Status                           | Comment |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------- |
+| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-setlinedash", "CanvasRenderingContext2D.setLineDash")}} | {{Spec2('HTML WHATWG')}} |         |
 
-<h2 id="Compatibilité_des_navivgateurs">Compatibilité des navivgateurs</h2>
+## Compatibilité des navivgateurs
 
-<p>{{Compat("api.CanvasRenderingContext2D.setLineDash")}}</p>
+{{Compat("api.CanvasRenderingContext2D.setLineDash")}}
 
-<h2 id="Notes_spécifiques_pour_Gecko">Notes spécifiques pour Gecko</h2>
+## Notes spécifiques pour Gecko
 
-<ul>
- <li>Depuis  Gecko 7.0 {{geckoRelease("7.0")}}, la propriété non standard et dépréciée <code>mozDash</code> a été implémentée  comme liste de définition pour les pointillés. Cette propriété sera dépréciée et supprimée dans le futur, voir {{bug(931643)}}. Utilisez <code>setLineDash()</code> à la place.</li>
-</ul>
+- Depuis  Gecko 7.0 {{geckoRelease("7.0")}}, la propriété non standard et dépréciée `mozDash` a été implémentée  comme liste de définition pour les pointillés. Cette propriété sera dépréciée et supprimée dans le futur, voir {{bug(931643)}}. Utilisez `setLineDash()` à la place.
 
-<h2 id="Notes_spécifiques_pour_WebKit">Notes spécifiques pour WebKit</h2>
+## Notes spécifiques pour WebKit
 
-<ul>
- <li>Dans les navigateurs à base de WebKit (e.g. Safari), la propriété non standard et dépréciée <code>webkitLineDash</code> est implémentée en plus de cette méthode. Utilisez <code>setLineDash()</code> à la place.</li>
-</ul>
+- Dans les navigateurs à base de WebKit (e.g. Safari), la propriété non standard et dépréciée `webkitLineDash` est implémentée en plus de cette méthode. Utilisez `setLineDash()` à la place.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>L'interface qui la définit, {{domxref("CanvasRenderingContext2D")}}</li>
- <li>{{domxref("CanvasRenderingContext2D.getLineDash()")}}</li>
- <li>{{domxref("CanvasRenderingContext2D.lineDashOffset")}}</li>
-</ul>
+- L'interface qui la définit, {{domxref("CanvasRenderingContext2D")}}
+- {{domxref("CanvasRenderingContext2D.getLineDash()")}}
+- {{domxref("CanvasRenderingContext2D.lineDashOffset")}}
diff --git a/files/fr/web/api/canvasrenderingcontext2d/settransform/index.md b/files/fr/web/api/canvasrenderingcontext2d/settransform/index.md
index e66241605d..a1dcc5a0f9 100644
--- a/files/fr/web/api/canvasrenderingcontext2d/settransform/index.md
+++ b/files/fr/web/api/canvasrenderingcontext2d/settransform/index.md
@@ -9,71 +9,72 @@ tags:
   - Reference
 translation_of: Web/API/CanvasRenderingContext2D/setTransform
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}
 
-<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.setTransform()</code></strong> de l'API Canvas 2D réinitialise (remplace) la transformation en cours à la matrice identité et appelle ensuite la transformation décrite par les arguments de cette méthode.</p>
+La méthode **`CanvasRenderingContext2D`\*\***`.setTransform()`\*\* de l'API Canvas 2D réinitialise (remplace) la transformation en cours à la matrice identité et appelle ensuite la transformation décrite par les arguments de cette méthode.
 
-<p>Voir aussi la méthode {{domxref("CanvasRenderingContext2D.transform()", "transform()")}}, qui ne replace pas la matrice de transformation en cours et la multiplie par celle donnée..</p>
+Voir aussi la méthode {{domxref("CanvasRenderingContext2D.transform()", "transform()")}}, qui ne replace pas la matrice de transformation en cours et la multiplie par celle donnée..
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">void <var><em>ctx</em>.setTransform(a, b, c, d, e, f);</var>
-</pre>
+    void ctx.setTransform(a, b, c, d, e, f);
 
-<p>La matrice de transformation est décrite par : <math><semantics><mrow><mo>[</mo><mtable columnalign="center center center" rowspacing="0.5ex"><mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd><mtd><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd><mtd><mi>f</mi></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>]</mo></mrow><annotation encoding="TeX">\left[ \begin{array}{ccc} a &amp; c &amp; e \\ b &amp; d &amp; f \\ 0 &amp; 0 &amp; 1 \end{array} \right]</annotation></semantics></math></p>
+La matrice de transformation est décrite par : <math><semantics><mrow><mo>[</mo><mtable columnalign="center center center" rowspacing="0.5ex"><mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd><mtd><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd><mtd><mi>f</mi></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>]</mo></mrow><annotation encoding="TeX">\left[ \begin{array}{ccc} a &#x26; c &#x26; e \\ b &#x26; d &#x26; f \\ 0 &#x26; 0 &#x26; 1 \end{array} \right]</annotation></semantics></math>
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>a (m11)</code></dt>
- <dd>Échelle horizontale.</dd>
- <dt><em><code>b (m12)</code></em></dt>
- <dd>Inclinaison horizontale.</dd>
- <dt><code>c (m21)</code></dt>
- <dd>Inclinaison verticale.</dd>
- <dt><code>d (m22)</code></dt>
- <dd>Échelle verticale.</dd>
- <dt><code>e (dx)</code></dt>
- <dd>Déplacement horizontal.</dd>
- <dt><code>f (dy)</code></dt>
- <dd>Déplacement vertical.</dd>
-</dl>
+- `a (m11)`
+  - : Échelle horizontale.
+- _`b (m12)`_
+  - : Inclinaison horizontale.
+- `c (m21)`
+  - : Inclinaison verticale.
+- `d (m22)`
+  - : Échelle verticale.
+- `e (dx)`
+  - : Déplacement horizontal.
+- `f (dy)`
+  - : Déplacement vertical.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Utilisation_de_la_méthode_setTransform">Utilisation de la méthode <code>setTransform</code></h3>
+### Utilisation de la méthode `setTransform`
 
-<p>Ceci est seulement un fragment de code simple qui utilise la méthode <code>setTransform</code>.</p>
+Ceci est seulement un fragment de code simple qui utilise la méthode `setTransform`.
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
-</pre>
+```html
+<canvas id="canvas"></canvas>
+```
 
-<h4 id="JavaScript">JavaScript</h4>
+#### JavaScript
 
-<pre class="brush: js">var canvas = document.getElementById('canvas');
+```js
+var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
 
 ctx.setTransform(1, 1, 0, 1, 0, 0);
 ctx.fillRect(0, 0, 100, 100);
-</pre>
+```
 
-<p>Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :</p>
+Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :
 
-<h4 id="code_jouable">Code jouable</h4>
+#### Code jouable
 
-<pre class="brush: html hidden">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
-&lt;div class="playable-buttons"&gt;
-  &lt;input id="edit" type="button" value="Edit" /&gt;
-  &lt;input id="reset" type="button" value="Reset" /&gt;
-&lt;/div&gt;
-&lt;textarea id="code" class="playable-code"&gt;
+```html hidden
+<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code">
 ctx.setTransform(1,1,0,1,0,0);
-ctx.fillRect(0,0,100,100);&lt;/textarea&gt;
-</pre>
+ctx.fillRect(0,0,100,100);</textarea>
+```
 
-<pre class="brush: js hidden">var canvas = document.getElementById("canvas");
+```js hidden
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 var textarea = document.getElementById("code");
 var reset = document.getElementById("reset");
@@ -96,34 +97,21 @@ edit.addEventListener("click", function() {
 
 textarea.addEventListener("input", drawCanvas);
 window.addEventListener("load", drawCanvas);
-</pre>
+```
 
-<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p>
+{{ EmbedLiveSample('code_jouable', 700, 360) }}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-settransform", "CanvasRenderingContext2D.setTransform")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                                            | Statut                           | Commentaire |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- |
+| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-settransform", "CanvasRenderingContext2D.setTransform")}} | {{Spec2('HTML WHATWG')}} |             |
 
-<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+## Compatibilité navigateurs
 
-<p>{{Compat("api.CanvasRenderingContext2D.setTransform")}}</p>
+{{Compat("api.CanvasRenderingContext2D.setTransform")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li>
- <li>{{domxref("CanvasRenderingContext2D.transform()")}}</li>
-</ul>
+- L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}
+- {{domxref("CanvasRenderingContext2D.transform()")}}
diff --git a/files/fr/web/api/canvasrenderingcontext2d/stroke/index.md b/files/fr/web/api/canvasrenderingcontext2d/stroke/index.md
index fd836674ad..8d06004dc7 100644
--- a/files/fr/web/api/canvasrenderingcontext2d/stroke/index.md
+++ b/files/fr/web/api/canvasrenderingcontext2d/stroke/index.md
@@ -3,57 +3,58 @@ title: CanvasRenderingContext2D.stroke()
 slug: Web/API/CanvasRenderingContext2D/stroke
 translation_of: Web/API/CanvasRenderingContext2D/stroke
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}
 
-<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.stroke()</code></strong> de l'API Canvas 2D dessine le chemin actuel ou donné avec le style de trait actuel utilisant la règle d'enroulement non nulle.</p>
+La méthode **`CanvasRenderingContext2D`\*\***`.stroke()`\*\* de l'API Canvas 2D dessine le chemin actuel ou donné avec le style de trait actuel utilisant la règle d'enroulement non nulle.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">void <var><em>ctx</em>.stroke();</var>
-void <var><em>ctx</em>.stroke(path);</var>
-</pre>
+    void ctx.stroke();
+    void ctx.stroke(path);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>path</code></dt>
- <dd>Un chemin {{domxref("Path2D")}} à dessiner.</dd>
-</dl>
+- `path`
+  - : Un chemin {{domxref("Path2D")}} à dessiner.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Utilisation_de_la_méthode_stroke">Utilisation de la méthode <code>stroke</code></h3>
+### Utilisation de la méthode `stroke`
 
-<p>Il s'agit d'un extrait de code simple utilisant la méthode <code>stroke</code> pour tracer un chemin.</p>
+Il s'agit d'un extrait de code simple utilisant la méthode `stroke` pour tracer un chemin.
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
-</pre>
+```html
+<canvas id="canvas"></canvas>
+```
 
-<h4 id="JavaScript">JavaScript</h4>
+#### JavaScript
 
-<pre class="brush: js">var canvas = document.getElementById('canvas');
+```js
+var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
 ctx.rect(10, 10, 100, 100);
 ctx.stroke();
-</pre>
+```
 
-<p>Editer le code en dessous et voir vos modifications mises à jour en direct dans le canevas :</p>
+Editer le code en dessous et voir vos modifications mises à jour en direct dans le canevas :
 
-<h4 id="code_jouable">Code jouable</h4>
+#### Code jouable
 
-<pre class="brush: html hidden">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
-&lt;div class="playable-buttons"&gt;
-  &lt;input id="edit" type="button" value="Edit" /&gt;
-  &lt;input id="reset" type="button" value="Reset" /&gt;
-&lt;/div&gt;
-&lt;textarea id="code" class="playable-code"&gt;
+```html hidden
+<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code">
 ctx.rect(10, 10, 100, 100);
-ctx.stroke();&lt;/textarea&gt;
-</pre>
+ctx.stroke();</textarea>
+```
 
-<pre class="brush: js hidden">var canvas = document.getElementById("canvas");
+```js hidden
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 var textarea = document.getElementById("code");
 var reset = document.getElementById("reset");
@@ -76,33 +77,20 @@ edit.addEventListener("click", function() {
 
 textarea.addEventListener("input", drawCanvas);
 window.addEventListener("load", drawCanvas);
-</pre>
+```
 
-<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p>
+{{ EmbedLiveSample('code_jouable', 700, 360) }}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-stroke", "CanvasRenderingContext2D.stroke")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                            | Statut                           | Commentaire |
+| ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- |
+| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-stroke", "CanvasRenderingContext2D.stroke")}} | {{Spec2('HTML WHATWG')}} |             |
 
-<h2 id="Compatibilité_avec_les_navigateurs">Compatibilité avec les navigateurs</h2>
+## Compatibilité avec les navigateurs
 
-<p>{{Compat("api.CanvasRenderingContext2D.stroke")}}</p>
+{{Compat("api.CanvasRenderingContext2D.stroke")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>L'interface qui le définit, {{domxref("CanvasRenderingContext2D")}}.</li>
-</ul>
+- L'interface qui le définit, {{domxref("CanvasRenderingContext2D")}}.
diff --git a/files/fr/web/api/canvasrenderingcontext2d/strokerect/index.md b/files/fr/web/api/canvasrenderingcontext2d/strokerect/index.md
index 14620b3c66..0c696da8c0 100644
--- a/files/fr/web/api/canvasrenderingcontext2d/strokerect/index.md
+++ b/files/fr/web/api/canvasrenderingcontext2d/strokerect/index.md
@@ -9,63 +9,64 @@ tags:
   - Référence(2)
 translation_of: Web/API/CanvasRenderingContext2D/strokeRect
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}
 
-<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.strokeRect()</code></strong> de l'API 2D des Canvas dessine le contour d'un rectangle aux coordonnées de l'angle haut gauche <em>(x, y)</em> et aux dimensions déterminées par <em>largeur</em> et <em>hauteur</em> dans la balise canvas, et en utilisant l'actuel <code>strokeStyle</code>.</p>
+La méthode **`CanvasRenderingContext2D`\*\***`.strokeRect()`\*_ de l'API 2D des Canvas dessine le contour d'un rectangle aux coordonnées de l'angle haut gauche _(x, y)* et aux dimensions déterminées par *largeur* et *hauteur\* dans la balise canvas, et en utilisant l'actuel `strokeStyle`.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">void <var><em>ctx</em>.strokeRect(x, y, largeur, hauteur);</var>
-</pre>
+    void ctx.strokeRect(x, y, largeur, hauteur);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>x</code></dt>
- <dd>L'abcisse <em>x</em> des coordonnées du point de départ du rectangle.</dd>
- <dt><code>y</code></dt>
- <dd>L'ordonnée <em>y</em> des coordonnées du point de départ du rectangle.</dd>
- <dt>largeur</dt>
- <dd>La largeur du rectangle.</dd>
- <dt><code>hauteur</code></dt>
- <dd>La hauteur de rectangle.</dd>
-</dl>
+- `x`
+  - : L'abcisse *x* des coordonnées du point de départ du rectangle.
+- `y`
+  - : L'ordonnée _y_ des coordonnées du point de départ du rectangle.
+- largeur
+  - : La largeur du rectangle.
+- `hauteur`
+  - : La hauteur de rectangle.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Utilisation_de_la_méthode_strokeRect">Utilisation de la méthode <code>strokeRect</code></h3>
+### Utilisation de la méthode `strokeRect`
 
-<p>Ceci est juste un extrait de code qui utilise la méthode <code>strokeRect</code>.</p>
+Ceci est juste un extrait de code qui utilise la méthode `strokeRect`.
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
-</pre>
+```html
+<canvas id="canvas"></canvas>
+```
 
-<h4 id="JavaScript">JavaScript</h4>
+#### JavaScript
 
-<pre class="brush: js">var canvas = document.getElementById("canvas");
+```js
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 
 ctx.strokeStyle = "green";
 ctx.strokeRect(10, 10, 100, 100);
-</pre>
+```
 
-<p>Éditez le code suivant pour voir les changements en direct dans la balise canvas:</p>
+Éditez le code suivant pour voir les changements en direct dans la balise canvas:
 
-<h4 id="code_jouable">Code jouable</h4>
+#### Code jouable
 
-<pre class="brush: html hidden">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
-&lt;div class="playable-buttons"&gt;
-  &lt;input id="edit" type="button" value="Edit" /&gt;
-  &lt;input id="reset" type="button" value="Reset" /&gt;
-&lt;/div&gt;
-&lt;textarea id="code" class="playable-code"&gt;
+```html hidden
+<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code">
 ctx.strokeStyle = "green";
-ctx.strokeRect(10, 10, 100, 100);&lt;/textarea&gt;
-</pre>
+ctx.strokeRect(10, 10, 100, 100);</textarea>
+```
 
-<pre class="brush: js hidden">var canvas = document.getElementById("canvas");
+```js hidden
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 var textarea = document.getElementById("code");
 var reset = document.getElementById("reset");
@@ -88,36 +89,23 @@ edit.addEventListener("click", function() {
 
 textarea.addEventListener("input", drawCanvas);
 window.addEventListener("load", drawCanvas);
-</pre>
-
-<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-strokerect", "CanvasRenderingContext2D.strokeRect")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.CanvasRenderingContext2D.strokeRect")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>l'interface qui la définit, {{domxref("CanvasRenderingContext2D")}}</li>
- <li>{{domxref("CanvasRenderingContext2D.strokeStyle")}}</li>
- <li>{{domxref("CanvasRenderingContext2D.clearRect()")}}</li>
- <li>{{domxref("CanvasRenderingContext2D.fillRect()")}}</li>
-</ul>
+```
+
+{{ EmbedLiveSample('code_jouable', 700, 360) }}
+
+## Spécifications
+
+| Spécification                                                                                                                                        | Statut                           | Commentaire |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- |
+| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-strokerect", "CanvasRenderingContext2D.strokeRect")}} | {{Spec2('HTML WHATWG')}} |             |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.CanvasRenderingContext2D.strokeRect")}}
+
+## Voir aussi
+
+- l'interface qui la définit, {{domxref("CanvasRenderingContext2D")}}
+- {{domxref("CanvasRenderingContext2D.strokeStyle")}}
+- {{domxref("CanvasRenderingContext2D.clearRect()")}}
+- {{domxref("CanvasRenderingContext2D.fillRect()")}}
diff --git a/files/fr/web/api/canvasrenderingcontext2d/strokestyle/index.md b/files/fr/web/api/canvasrenderingcontext2d/strokestyle/index.md
index fa703e43d0..1bde6b2ed5 100644
--- a/files/fr/web/api/canvasrenderingcontext2d/strokestyle/index.md
+++ b/files/fr/web/api/canvasrenderingcontext2d/strokestyle/index.md
@@ -3,65 +3,66 @@ title: CanvasRenderingContext2D.strokeStyle
 slug: Web/API/CanvasRenderingContext2D/strokeStyle
 translation_of: Web/API/CanvasRenderingContext2D/strokeStyle
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}
 
-<p>La propriété <code><strong>CanvasRenderingContext2D.strokeStyle</strong></code> de l'API Canvas 2D spécifie la couleur ou le style à utiliser pour dessiner les lignes autour des formes. La valeur par défaut est <code>#000</code> (black).</p>
+La propriété **`CanvasRenderingContext2D.strokeStyle`** de l'API Canvas 2D spécifie la couleur ou le style à utiliser pour dessiner les lignes autour des formes. La valeur par défaut est `#000` (black).
 
-<p>Voir également le chapitre <a href="/fr/docs/Tutoriel_canvas/Ajout_de_styles_et_de_couleurs">Ajout de styles et de couleurs</a> dans le <a href="/fr/docs/Tutoriel_canvas">Tutoriel canvas</a>.</p>
+Voir également le chapitre [Ajout de styles et de couleurs](/fr/docs/Tutoriel_canvas/Ajout_de_styles_et_de_couleurs) dans le [Tutoriel canvas](/fr/docs/Tutoriel_canvas).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var><em>ctx</em>.strokeStyle = color;
-</var><var><em>ctx</em>.strokeStyle = gradient;
-</var><var><em>ctx</em>.strokeStyle = pattern;</var>
-</pre>
+    ctx.strokeStyle = color;
+    ctx.strokeStyle = gradient;
+    ctx.strokeStyle = pattern;
 
-<h3 id="Options">Options</h3>
+### Options
 
-<dl>
- <dt><code>color</code></dt>
- <dd>Une {{domxref("DOMString")}} analysée comme valeur CSS {{cssxref("&lt;color&gt;")}}.</dd>
- <dt><code>gradient</code></dt>
- <dd>Un objet {{domxref("CanvasGradient")}} (un gradient linéaire ou radial).</dd>
- <dt><code>pattern</code></dt>
- <dd>Un objet {{domxref("CanvasPattern")}} (une image répétée).</dd>
-</dl>
+- `color`
+  - : Une {{domxref("DOMString")}} analysée comme valeur CSS {{cssxref("&lt;color&gt;")}}.
+- `gradient`
+  - : Un objet {{domxref("CanvasGradient")}} (un gradient linéaire ou radial).
+- `pattern`
+  - : Un objet {{domxref("CanvasPattern")}} (une image répétée).
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Using_the_strokeStyle_property">Utiliser la propriété <code>strokeStyle</code> pour définir une couleur différente</h3>
+### Utiliser la propriété `strokeStyle` pour définir une couleur différente
 
-<p>Ceci est un simple snippet de code utilisant la propriété <code>strokeStyle</code> pour définir une couleur différente.</p>
+Ceci est un simple snippet de code utilisant la propriété `strokeStyle` pour définir une couleur différente.
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
-</pre>
+```html
+<canvas id="canvas"></canvas>
+```
 
-<h4 id="JavaScript">JavaScript</h4>
+#### JavaScript
 
-<pre class="brush: js">var canvas = document.getElementById('canvas');
+```js
+var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
 
 ctx.strokeStyle = 'blue';
 ctx.strokeRect(10, 10, 100, 100);
-</pre>
+```
 
-<p>Éditez le code ci-dessous pour voir vos changements mettre à jour le canvas en direct:</p>
+Éditez le code ci-dessous pour voir vos changements mettre à jour le canvas en direct:
 
-<h4 id="code_jouable">Code jouable</h4>
+#### Code jouable
 
-<pre class="brush: html hidden">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
-&lt;div class="playable-buttons"&gt;
-  &lt;input id="edit" type="button" value="Edit" /&gt;
-  &lt;input id="reset" type="button" value="Reset" /&gt;
-&lt;/div&gt;
-&lt;textarea id="code" class="playable-code"&gt;
+```html hidden
+<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code">
 ctx.strokeStyle = 'blue';
-ctx.strokeRect(10, 10, 100, 100);&lt;/textarea&gt;
-</pre>
+ctx.strokeRect(10, 10, 100, 100);</textarea>
+```
 
-<pre class="brush: js hidden">var canvas = document.getElementById('canvas');
+```js hidden
+var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
 var textarea = document.getElementById('code');
 var reset = document.getElementById('reset');
@@ -84,18 +85,19 @@ edit.addEventListener('click', function() {
 
 textarea.addEventListener('input', drawCanvas);
 window.addEventListener('load', drawCanvas);
-</pre>
+```
 
-<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p>
+{{ EmbedLiveSample('code_jouable', 700, 360) }}
 
-<h3 id="A_strokeStyle_example">Un exemple <code>strokeStyle</code></h3>
+### Un exemple `strokeStyle`
 
-<p>Cet exemple utilise la propriété <code>strokeStyle</code> pour changer les couleurs des contours des formes. Nous utilisons la méthode {{domxref("CanvasRenderingContext2D.arc", "arc()")}} pour dessiner des cercles au lieu de carrés.</p>
+Cet exemple utilise la propriété `strokeStyle` pour changer les couleurs des contours des formes. Nous utilisons la méthode {{domxref("CanvasRenderingContext2D.arc", "arc()")}} pour dessiner des cercles au lieu de carrés.
 
-<pre class="brush: js">var ctx = document.getElementById('canvas').getContext('2d');
+```js
+var ctx = document.getElementById('canvas').getContext('2d');
 
-for (var i = 0; i &lt; 6; i++) {
-  for (var j = 0; j &lt; 6; j++) {
+for (var i = 0; i < 6; i++) {
+  for (var j = 0; j < 6; j++) {
     ctx.strokeStyle = 'rgb(0,' + Math.floor(255 - 42.5 * i) + ',' +
                       Math.floor(255 - 42.5 * j) + ')';
     ctx.beginPath();
@@ -103,52 +105,39 @@ for (var i = 0; i &lt; 6; i++) {
     ctx.stroke();
   }
 }
-</pre>
+```
 
-<pre class="brush: html hidden">&lt;canvas id="canvas" width="150" height="150"&gt;&lt;/canvas&gt;</pre>
+```html hidden
+<canvas id="canvas" width="150" height="150"></canvas>
+```
 
-<p>Le résultat devrait ressembler à ça:</p>
+Le résultat devrait ressembler à ça:
 
-<p>{{EmbedLiveSample("A_strokeStyle_example", "180", "180", "canvas_strokestyle.png")}}</p>
+{{EmbedLiveSample("A_strokeStyle_example", "180", "180", "canvas_strokestyle.png")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-strokestyle", "CanvasRenderingContext2D.strokeStyle")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Specification                                                                                                                                        | Status                           | Comment |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------- |
+| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-strokestyle", "CanvasRenderingContext2D.strokeStyle")}} | {{Spec2('HTML WHATWG')}} |         |
 
-<h2 id="Browser_compatibility">Browser compatibility</h2>
+## Browser compatibility
 
-<p>{{Compat("api.CanvasRenderingContext2D.strokeStyle")}}</p>
+{{Compat("api.CanvasRenderingContext2D.strokeStyle")}}
 
-<h2 id="Notes_spécifiques_à_WebKitBlink">Notes spécifiques à WebKit/Blink</h2>
+## Notes spécifiques à WebKit/Blink
 
-<ul>
- <li>Dans les navigateurs basés sur WebKit et Blink, une méthode non standard et dépréciée, <code>ctx.setStrokeColor()</code>, est implémentée en plus de cette propriété.
+- Dans les navigateurs basés sur WebKit et Blink, une méthode non standard et dépréciée, `ctx.setStrokeColor()`, est implémentée en plus de cette propriété.
 
-  <pre class="brush: js">setStrokeColor(color, optional alpha);
-setStrokeColor(grayLevel, optional alpha);
-setStrokeColor(r, g, b, a);
-setStrokeColor(c, m, y, k, a);
-</pre>
- </li>
-</ul>
+  ```js
+  setStrokeColor(color, optional alpha);
+  setStrokeColor(grayLevel, optional alpha);
+  setStrokeColor(r, g, b, a);
+  setStrokeColor(c, m, y, k, a);
+  ```
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>L'interface qui définit cette propriété, {{domxref("CanvasRenderingContext2D")}}</li>
- <li>{{domxref("CanvasGradient")}}</li>
- <li>{{domxref("CanvasPattern")}}</li>
-</ul>
+- L'interface qui définit cette propriété, {{domxref("CanvasRenderingContext2D")}}
+- {{domxref("CanvasGradient")}}
+- {{domxref("CanvasPattern")}}
diff --git a/files/fr/web/api/canvasrenderingcontext2d/stroketext/index.md b/files/fr/web/api/canvasrenderingcontext2d/stroketext/index.md
index c1b20a2580..3778eedf4f 100644
--- a/files/fr/web/api/canvasrenderingcontext2d/stroketext/index.md
+++ b/files/fr/web/api/canvasrenderingcontext2d/stroketext/index.md
@@ -9,68 +9,69 @@ tags:
   - Reference
 translation_of: Web/API/CanvasRenderingContext2D/strokeText
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}
 
-<p>La méthode <code><strong>CanvasRenderingContext2D.strokeText()</strong></code> de l'API Canvas 2D trace le texte fourni à la position donnée <em>(x, y)</em>. Si le quatrième paramètre optionnel indiquant une largeur maximale est fourni, le texte sera mis à l'échelle pour tenir dans cette cette largeur.</p>
+La méthode **`CanvasRenderingContext2D.strokeText()`** de l'API Canvas 2D trace le texte fourni à la position donnée _(x, y)_. Si le quatrième paramètre optionnel indiquant une largeur maximale est fourni, le texte sera mis à l'échelle pour tenir dans cette cette largeur.
 
-<p>Voir aussi la méthode {{domxref("CanvasRenderingContext2D.fillText()")}} pour dessiner un texte rempli.</p>
+Voir aussi la méthode {{domxref("CanvasRenderingContext2D.fillText()")}} pour dessiner un texte rempli.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">void <var><em>ctx</em>.strokeText(texte, x, y [, largeurMax]);</var>
-</pre>
+    void ctx.strokeText(texte, x, y [, largeurMax]);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>texte</code></dt>
- <dd>Le texte à tracer en utilisant les valeurs en cours de {{domxref("CanvasRenderingContext2D.font","font")}}, {{domxref("CanvasRenderingContext2D.textAlign","textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline","textBaseline")}}, et {{domxref("CanvasRenderingContext2D.direction","direction")}}.</dd>
-</dl>
+- `texte`
+  - : Le texte à tracer en utilisant les valeurs en cours de {{domxref("CanvasRenderingContext2D.font","font")}}, {{domxref("CanvasRenderingContext2D.textAlign","textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline","textBaseline")}}, et {{domxref("CanvasRenderingContext2D.direction","direction")}}.
 
-<dl>
- <dt><code>x</code></dt>
- <dd>La coordonnée sur l'axe des x du point de départ du texte.</dd>
- <dt><code>y</code></dt>
- <dd>La coordonnée sur l'axe des y du point de départ du texte.</dd>
- <dt><code>largeurMax</code> {{optional_inline}}</dt>
- <dd>La largeur maximum à dessiner.  Si spécifiée et si la chaîne est calculée comme étant plus large que cette largeur, la police est ajustée pour utiliser une police plus condensée horizontalement (si une est disponible ou si une raisonnablement lisible lisible peut être synthétisée en mettant à l'échelle horizontalement la police courante), ou une police plus petite.</dd>
-</dl>
+<!---->
 
-<h2 id="Exemples">Exemples</h2>
+- `x`
+  - : La coordonnée sur l'axe des x du point de départ du texte.
+- `y`
+  - : La coordonnée sur l'axe des y du point de départ du texte.
+- `largeurMax` {{optional_inline}}
+  - : La largeur maximum à dessiner.  Si spécifiée et si la chaîne est calculée comme étant plus large que cette largeur, la police est ajustée pour utiliser une police plus condensée horizontalement (si une est disponible ou si une raisonnablement lisible lisible peut être synthétisée en mettant à l'échelle horizontalement la police courante), ou une police plus petite.
 
-<h3 id="Utilisation_de_la_méthode_strokeText">Utilisation de la méthode <code>strokeText</code></h3>
+## Exemples
 
-<p>Il ne s'agit que d'un extrait de code simple qui utilise la méthode <code>strokeText</code>.</p>
+### Utilisation de la méthode `strokeText`
 
-<h4 id="HTML">HTML</h4>
+Il ne s'agit que d'un extrait de code simple qui utilise la méthode `strokeText`.
 
-<pre class="brush: html">&lt;canvas id="canevas"&gt;&lt;/canvas&gt;
-</pre>
+#### HTML
 
-<h4 id="JavaScript">JavaScript</h4>
+```html
+<canvas id="canevas"></canvas>
+```
 
-<pre class="brush: js">var canevas = document.getElementById('canevas');
+#### JavaScript
+
+```js
+var canevas = document.getElementById('canevas');
 var ctx = canevas.getContext('2d');
 
 ctx.font = '48px serif';
 ctx.strokeText('Hello world', 50, 100);
-</pre>
+```
 
-<p>Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct dans le canevas:</p>
+Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct dans le canevas:
 
-<h4 id="code_jouable">Code jouable</h4>
+#### Code jouable
 
-<pre class="brush: html hidden">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
-&lt;div class="playable-buttons"&gt;
-  &lt;input id="edit" type="button" value="Edit" /&gt;
-  &lt;input id="reset" type="button" value="Reset" /&gt;
-&lt;/div&gt;
-&lt;textarea id="code" class="playable-code"&gt;
+```html hidden
+<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code">
 ctx.font = "48px serif";
-ctx.strokeText("Hello world", 50, 100);&lt;/textarea&gt;
-</pre>
+ctx.strokeText("Hello world", 50, 100);</textarea>
+```
 
-<pre class="brush: js hidden">var canvas = document.getElementById("canvas");
+```js hidden
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 var textarea = document.getElementById("code");
 var reset = document.getElementById("reset");
@@ -93,34 +94,21 @@ edit.addEventListener("click", function() {
 
 textarea.addEventListener("input", drawCanvas);
 window.addEventListener("load", drawCanvas);
-</pre>
+```
 
-<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p>
+{{ EmbedLiveSample('code_jouable', 700, 360) }}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-stroketext", "CanvasRenderingContext2D.strokeText")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                                        | Statut                           | Commentaire |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- |
+| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-stroketext", "CanvasRenderingContext2D.strokeText")}} | {{Spec2('HTML WHATWG')}} |             |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.CanvasRenderingContext2D.strokeText")}}</p>
+{{Compat("api.CanvasRenderingContext2D.strokeText")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li>
- <li>{{domxref("CanvasRenderingContext2D.fillText()")}}</li>
-</ul>
+- L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}
+- {{domxref("CanvasRenderingContext2D.fillText()")}}
diff --git a/files/fr/web/api/canvasrenderingcontext2d/textalign/index.md b/files/fr/web/api/canvasrenderingcontext2d/textalign/index.md
index ba3b152f70..a6da0bb4f9 100644
--- a/files/fr/web/api/canvasrenderingcontext2d/textalign/index.md
+++ b/files/fr/web/api/canvasrenderingcontext2d/textalign/index.md
@@ -9,71 +9,72 @@ tags:
   - Reference
 translation_of: Web/API/CanvasRenderingContext2D/textAlign
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}
 
-<p>La propriété <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.textAlign</code></strong> de l'API Canvas 2D indique l'alignement de texte courant à utiliser lors du dessin de texte. Faites attention au fait que l'alignement a pour base la valeur x de la méthode CanvasRenderingContext2D.<strong>fillText</strong>. Ainsi, si textAlign="center", le texte sera alors dessiné en x-50%*width.</p>
+La propriété **`CanvasRenderingContext2D`\*\***`.textAlign`** de l'API Canvas 2D indique l'alignement de texte courant à utiliser lors du dessin de texte. Faites attention au fait que l'alignement a pour base la valeur x de la méthode CanvasRenderingContext2D.**fillText\*\*. Ainsi, si textAlign="center", le texte sera alors dessiné en x-50%\*width.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var><em>ctx</em>.textAlign = "left" || "right" || "center" || "start" || "end";</var>
-</pre>
+    ctx.textAlign = "left" || "right" || "center" || "start" || "end";
 
-<h3 id="Options">Options</h3>
+### Options
 
-<p>Valeurs possibles :</p>
+Valeurs possibles :
 
-<dl>
- <dt>left</dt>
- <dd>Le texte est aligné à gauche.</dd>
- <dt>right</dt>
- <dd>Le texte est aligné à droite.</dd>
- <dt>center</dt>
- <dd>Le texte est centré.</dd>
- <dt>start</dt>
- <dd>Le texte est aligné au début normal de la ligne (aligné à gauche pour les systèmes d'écriture de gauche à droite, aligné à droite pour les systèmes d'écriture de droite à gauche).</dd>
- <dt>end</dt>
- <dd>Le texte est aligné à la fin normale de la ligne (aligné à droite pour les systèmes d'écriture de gauche à droite, aligné à gauche pour les systèmes d'écriture de droite à gauche).</dd>
-</dl>
+- left
+  - : Le texte est aligné à gauche.
+- right
+  - : Le texte est aligné à droite.
+- center
+  - : Le texte est centré.
+- start
+  - : Le texte est aligné au début normal de la ligne (aligné à gauche pour les systèmes d'écriture de gauche à droite, aligné à droite pour les systèmes d'écriture de droite à gauche).
+- end
+  - : Le texte est aligné à la fin normale de la ligne (aligné à droite pour les systèmes d'écriture de gauche à droite, aligné à gauche pour les systèmes d'écriture de droite à gauche).
 
-<p>La valeur pa défaut est <code>start</code>.</p>
+La valeur pa défaut est `start`.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Using_the_textAlign_property">Utilisation de la propriété <code>textAlign</code></h3>
+### Utilisation de la propriété `textAlign`
 
-<p>Ceci est seulement un fragment de code simple utilisant la propriété <code>textAlign pour indiquer un alignement de texte</code>.</p>
+Ceci est seulement un fragment de code simple utilisant la propriété `textAlign pour indiquer un alignement de texte`.
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
-</pre>
+```html
+<canvas id="canvas"></canvas>
+```
 
-<h4 id="JavaScript">JavaScript</h4>
+#### JavaScript
 
-<pre class="brush: js">var canvas = document.getElementById('canvas');
+```js
+var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
 
 ctx.font = '48px serif';
 ctx.textAlign = 'left';
 ctx.strokeText('Hello world', 0, 100);
-</pre>
+```
 
-<p>Modifier le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :</p>
+Modifier le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :
 
-<h4 id="code_jouable">Playable code</h4>
+#### Playable code
 
-<pre class="brush: html hidden">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
-&lt;div class="playable-buttons"&gt;
-  &lt;input id="edit" type="button" value="Edit" /&gt;
-  &lt;input id="reset" type="button" value="Reset" /&gt;
-&lt;/div&gt;
-&lt;textarea id="code" class="playable-code"&gt;
+```html hidden
+<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code">
 ctx.font = '48px serif';
 ctx.textAlign = 'left';
-ctx.strokeText('Hello world', 0, 100);&lt;/textarea&gt;
-</pre>
+ctx.strokeText('Hello world', 0, 100);</textarea>
+```
 
-<pre class="brush: js hidden">var canvas = document.getElementById('canvas');
+```js hidden
+var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
 var textarea = document.getElementById('code');
 var reset = document.getElementById('reset');
@@ -96,33 +97,20 @@ edit.addEventListener('click', function() {
 
 textarea.addEventListener('input', drawCanvas);
 window.addEventListener('load', drawCanvas);
-</pre>
+```
 
-<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p>
+{{ EmbedLiveSample('code_jouable', 700, 360) }}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-textalign", "CanvasRenderingContext2D.textAlign")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                                    | Statut                           | Commentaire |
+| ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- |
+| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-textalign", "CanvasRenderingContext2D.textAlign")}} | {{Spec2('HTML WHATWG')}} |             |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.CanvasRenderingContext2D.textAlign")}}</p>
+{{Compat("api.CanvasRenderingContext2D.textAlign")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}.</li>
-</ul>
+- L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}.
diff --git a/files/fr/web/api/canvasrenderingcontext2d/textbaseline/index.md b/files/fr/web/api/canvasrenderingcontext2d/textbaseline/index.md
index c2dadee8db..24253e2225 100644
--- a/files/fr/web/api/canvasrenderingcontext2d/textbaseline/index.md
+++ b/files/fr/web/api/canvasrenderingcontext2d/textbaseline/index.md
@@ -9,73 +9,74 @@ tags:
   - Reference
 translation_of: Web/API/CanvasRenderingContext2D/textBaseline
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}
 
-<p>La propriété <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.textBaseline</code></strong> de l'API Canvas 2D spécifie la ligne de base de texte à utiliser lors du dessin d'un texte.</p>
+La propriété **`CanvasRenderingContext2D`\*\***`.textBaseline`\*\* de l'API Canvas 2D spécifie la ligne de base de texte à utiliser lors du dessin d'un texte.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var><em>ctx</em>.textBaseline = "top" || "hanging" || "middle" || "alphabetic" || "ideographic" || "bottom";</var>
-</pre>
+    ctx.textBaseline = "top" || "hanging" || "middle" || "alphabetic" || "ideographic" || "bottom";
 
-<h3 id="Options">Options</h3>
+### Options
 
-<p>Valeurs possibles :</p>
+Valeurs possibles :
 
-<dl>
- <dt>top</dt>
- <dd>La ligne de base du texte est le haut du cadratin.</dd>
- <dt>hanging</dt>
- <dd>La ligne de base du texte est la ligne de base supérieure.</dd>
- <dt>middle</dt>
- <dd>La ligne de base du texte est le milieu du cadratin.</dd>
- <dt>alphabetic</dt>
- <dd>La ligne de base du texte est la ligne de base normale alphabétique.</dd>
- <dt>ideographic</dt>
- <dd>La ligne de base du texte est la ligne de base idéographique ; c'est le bas du corps des caractères, si le corps principal des caractères fait saillie en dessous de la ligne de base alphabétique.</dd>
- <dt>bottom</dt>
- <dd>La ligne de base du texte est le bas du cadre. Cela diffère de ligne de base idéographique en ce que la ligne de base idéographique ne prend pas en considération les jambages.</dd>
-</dl>
+- top
+  - : La ligne de base du texte est le haut du cadratin.
+- hanging
+  - : La ligne de base du texte est la ligne de base supérieure.
+- middle
+  - : La ligne de base du texte est le milieu du cadratin.
+- alphabetic
+  - : La ligne de base du texte est la ligne de base normale alphabétique.
+- ideographic
+  - : La ligne de base du texte est la ligne de base idéographique ; c'est le bas du corps des caractères, si le corps principal des caractères fait saillie en dessous de la ligne de base alphabétique.
+- bottom
+  - : La ligne de base du texte est le bas du cadre. Cela diffère de ligne de base idéographique en ce que la ligne de base idéographique ne prend pas en considération les jambages.
 
-<p>La valeur par défaut est <code>alphabetic</code>.</p>
+La valeur par défaut est `alphabetic`.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Using_the_textBaseline_property">Utilisation de la propritété <code>textBaseline</code></h3>
+### Utilisation de la propritété `textBaseline`
 
-<p>Ceci est seulement un fragment de code simple utilisant la propriété <code>textBaseline</code> pour définir un réglage différent de ligne de base de texte.</p>
+Ceci est seulement un fragment de code simple utilisant la propriété `textBaseline` pour définir un réglage différent de ligne de base de texte.
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
-</pre>
+```html
+<canvas id="canvas"></canvas>
+```
 
-<h4 id="JavaScript">JavaScript</h4>
+#### JavaScript
 
-<pre class="brush: js">var canvas = document.getElementById('canvas');
+```js
+var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
 
 ctx.font = '48px serif';
 ctx.textBaseline = 'hanging';
 ctx.strokeText('Hello world', 0, 100);
-</pre>
+```
 
-<p>Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :</p>
+Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :
 
-<h4 id="code_jouable">Code jouable</h4>
+#### Code jouable
 
-<pre class="brush: html hidden">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
-&lt;div class="playable-buttons"&gt;
-  &lt;input id="edit" type="button" value="Edit" /&gt;
-  &lt;input id="reset" type="button" value="Reset" /&gt;
-&lt;/div&gt;
-&lt;textarea id="code" class="playable-code"&gt;
+```html hidden
+<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code">
 ctx.font = '48px serif';
 ctx.textBaseline = 'hanging';
-ctx.strokeText('Hello world', 0, 100);&lt;/textarea&gt;
-</pre>
+ctx.strokeText('Hello world', 0, 100);</textarea>
+```
 
-<pre class="brush: js hidden">var canvas = document.getElementById('canvas');
+```js hidden
+var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
 var textarea = document.getElementById('code');
 var reset = document.getElementById('reset');
@@ -98,33 +99,20 @@ edit.addEventListener('click', function() {
 
 textarea.addEventListener('input', drawCanvas);
 window.addEventListener('load', drawCanvas);
-</pre>
+```
 
-<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p>
+{{ EmbedLiveSample('code_jouable', 700, 360) }}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-textbaseline", "CanvasRenderingContext2D.textBaseline")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                                            | Statut                           | Commentaire |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- |
+| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-textbaseline", "CanvasRenderingContext2D.textBaseline")}} | {{Spec2('HTML WHATWG')}} |             |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.CanvasRenderingContext2D.textBaseline")}}</p>
+{{Compat("api.CanvasRenderingContext2D.textBaseline")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}.</li>
-</ul>
+- L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}.
diff --git a/files/fr/web/api/canvasrenderingcontext2d/transform/index.md b/files/fr/web/api/canvasrenderingcontext2d/transform/index.md
index c80bc02507..204a89deb2 100644
--- a/files/fr/web/api/canvasrenderingcontext2d/transform/index.md
+++ b/files/fr/web/api/canvasrenderingcontext2d/transform/index.md
@@ -9,71 +9,72 @@ tags:
   - Reference
 translation_of: Web/API/CanvasRenderingContext2D/transform
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}
 
-<p>La méthode <strong>CanvasRenderingContext2D.transform ()</strong> de l'API Canvas 2D multiplie la matrice de transformation courante par la matrice décrite par les arguments de cette méthode. Vous pouvez mettre à l'échelle, faire pivoter, déplacer et incliner le contexte.</p>
+La méthode **CanvasRenderingContext2D.transform ()** de l'API Canvas 2D multiplie la matrice de transformation courante par la matrice décrite par les arguments de cette méthode. Vous pouvez mettre à l'échelle, faire pivoter, déplacer et incliner le contexte.
 
-<p>Voir aussi la méthode {{domxref ("CanvasRenderingContext2D.setTransform()", "setTransform()")}} qui réinitialise la transformation courante à la matrice identité puis invoque <code>transform()</code>.</p>
+Voir aussi la méthode {{domxref ("CanvasRenderingContext2D.setTransform()", "setTransform()")}} qui réinitialise la transformation courante à la matrice identité puis invoque `transform()`.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">void <var><em>ctx</em>.transform(a, b, c, d, e, f);</var>
-</pre>
+    void ctx.transform(a, b, c, d, e, f);
 
-<p>La matrice de transformation est décrite par : <math><semantics><mrow><mo>[</mo><mtable columnalign="center center center" rowspacing="0.5ex"><mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd><mtd><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd><mtd><mi>f</mi></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>]</mo></mrow><annotation encoding="TeX">\left[ \begin{array}{ccc} a &amp; c &amp; e \\ b &amp; d &amp; f \\ 0 &amp; 0 &amp; 1 \end{array} \right]</annotation></semantics></math></p>
+La matrice de transformation est décrite par : <math><semantics><mrow><mo>[</mo><mtable columnalign="center center center" rowspacing="0.5ex"><mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd><mtd><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd><mtd><mi>f</mi></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>]</mo></mrow><annotation encoding="TeX">\left[ \begin{array}{ccc} a &#x26; c &#x26; e \\ b &#x26; d &#x26; f \\ 0 &#x26; 0 &#x26; 1 \end{array} \right]</annotation></semantics></math>
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>a (m11)</code></dt>
- <dd>Échelle horizontale.</dd>
- <dt><em><code>b (m12)</code></em></dt>
- <dd>Inclinaison horizontale.</dd>
- <dt><code>c (m21)</code></dt>
- <dd>Inclinaison verticale.</dd>
- <dt><code>d (m22)</code></dt>
- <dd>Échelle verticale.</dd>
- <dt><code>e (dx)</code></dt>
- <dd>Déplacement horizontal.</dd>
- <dt><code>f (dy)</code></dt>
- <dd>Déplacement vertical.</dd>
-</dl>
+- `a (m11)`
+  - : Échelle horizontale.
+- _`b (m12)`_
+  - : Inclinaison horizontale.
+- `c (m21)`
+  - : Inclinaison verticale.
+- `d (m22)`
+  - : Échelle verticale.
+- `e (dx)`
+  - : Déplacement horizontal.
+- `f (dy)`
+  - : Déplacement vertical.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Utilisation_de_la_méthode_transform">Utilisation de la méthode <code>transform</code></h3>
+### Utilisation de la méthode `transform`
 
-<p>Ceci est seulement un fragment de code simple utilisant la méthode <code>transform</code>.</p>
+Ceci est seulement un fragment de code simple utilisant la méthode `transform`.
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;canvas id="canevas"&gt;&lt;/canvas&gt;
-</pre>
+```html
+<canvas id="canevas"></canvas>
+```
 
-<h4 id="JavaScript">JavaScript</h4>
+#### JavaScript
 
-<pre class="brush: js">var canevas = document.getElementById('canevas');
+```js
+var canevas = document.getElementById('canevas');
 var ctx = canevas.getContext('2d');
 
 ctx.transform(1, 1, 0, 1, 0, 0);
 ctx.fillRect(0, 0, 100, 100);
-</pre>
+```
 
-<p>Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct dans le canevas :</p>
+Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct dans le canevas :
 
-<h4 id="code_jouable">Code jouable</h4>
+#### Code jouable
 
-<pre class="brush: html hidden">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
-&lt;div class="playable-buttons"&gt;
-  &lt;input id="edit" type="button" value="Edit" /&gt;
-  &lt;input id="reset" type="button" value="Reset" /&gt;
-&lt;/div&gt;
-&lt;textarea id="code" class="playable-code"&gt;
+```html hidden
+<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code">
 ctx.transform(1,1,0,1,0,0);
-ctx.fillRect(0,0,100,100);&lt;/textarea&gt;
-</pre>
+ctx.fillRect(0,0,100,100);</textarea>
+```
 
-<pre class="brush: js hidden">var canvas = document.getElementById("canvas");
+```js hidden
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 var textarea = document.getElementById("code");
 var reset = document.getElementById("reset");
@@ -99,34 +100,21 @@ edit.addEventListener("click", function() {
 
 textarea.addEventListener("input", drawCanvas);
 window.addEventListener("load", drawCanvas);
-</pre>
+```
 
-<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p>
+{{ EmbedLiveSample('code_jouable', 700, 360) }}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-transform", "CanvasRenderingContext2D.transform")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                                    | Statut                           | Commentaire |
+| ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- |
+| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-transform", "CanvasRenderingContext2D.transform")}} | {{Spec2('HTML WHATWG')}} |             |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.CanvasRenderingContext2D.transform")}}</p>
+{{Compat("api.CanvasRenderingContext2D.transform")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li>
- <li>{{domxref("CanvasRenderingContext2D.setTransform()")}}</li>
-</ul>
+- L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}
+- {{domxref("CanvasRenderingContext2D.setTransform()")}}
diff --git a/files/fr/web/api/canvasrenderingcontext2d/translate/index.md b/files/fr/web/api/canvasrenderingcontext2d/translate/index.md
index 9b82274d6d..561d1897b1 100644
--- a/files/fr/web/api/canvasrenderingcontext2d/translate/index.md
+++ b/files/fr/web/api/canvasrenderingcontext2d/translate/index.md
@@ -9,40 +9,39 @@ tags:
   - Reference
 translation_of: Web/API/CanvasRenderingContext2D/translate
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}
 
-<p>La méthode <strong>CanvasRenderingContext2D.translate()</strong> de l'API Canvas 2D ajoute une transformation de translation en déplaçant le canevas et son origine x horizontalement et y verticalement sur la grille.</p>
+La méthode **CanvasRenderingContext2D.translate()** de l'API Canvas 2D ajoute une transformation de translation en déplaçant le canevas et son origine x horizontalement et y verticalement sur la grille.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">void <var><em>ctx</em>.translate(x, y);</var>
-</pre>
+    void ctx.translate(x, y);
 
-<p><img alt="" src="canvas_grid_translate.png"></p>
+![](canvas_grid_translate.png)
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>x</code></dt>
- <dd>Distance de déplacement dans le sens horizontal.</dd>
- <dt>y</dt>
- <dd>Distance de déplacement dans le sens vertical.</dd>
-</dl>
+- `x`
+  - : Distance de déplacement dans le sens horizontal.
+- y
+  - : Distance de déplacement dans le sens vertical.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Utilisation_de_la_méthode_translate">Utilisation de la méthode <code>translate</code></h3>
+### Utilisation de la méthode `translate`
 
-<p>Il s'agit seulement d'un extrait de code simple qui utilise la méthode translate.</p>
+Il s'agit seulement d'un extrait de code simple qui utilise la méthode translate.
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;canvas id="canevas"&gt;&lt;/canvas&gt;
-</pre>
+```html
+<canvas id="canevas"></canvas>
+```
 
-<h4 id="JavaScript">JavaScript</h4>
+#### JavaScript
 
-<pre class="brush: js">var canevas = document.getElementById('canevas');
+```js
+var canevas = document.getElementById('canevas');
 var ctx = canevas.getContext('2d');
 
 ctx.translate(50, 50);
@@ -50,24 +49,26 @@ ctx.fillRect(0, 0, 100, 100);
 
 // Réinitialise la matrice de transformation en cours à la matrice identité
 ctx.setTransform(1, 0, 0, 1, 0, 0);
-</pre>
+```
 
-<p>Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct sur le canevas :</p>
+Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct sur le canevas :
 
-<h4 id="code_jouable">Code jouable</h4>
+#### Code jouable
 
-<pre class="brush: html hidden">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
-&lt;div class="playable-buttons"&gt;
-  &lt;input id="edit" type="button" value="Edit" /&gt;
-  &lt;input id="reset" type="button" value="Reset" /&gt;
-&lt;/div&gt;
-&lt;textarea id="code" class="playable-code"&gt;
+```html hidden
+<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code">
 ctx.translate(50, 50);
 ctx.fillRect(0,0,100,100);
-ctx.setTransform(1, 0, 0, 1, 0, 0);&lt;/textarea&gt;
-</pre>
+ctx.setTransform(1, 0, 0, 1, 0, 0);</textarea>
+```
 
-<pre class="brush: js hidden">var canvas = document.getElementById("canvas");
+```js hidden
+var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 var textarea = document.getElementById("code");
 var reset = document.getElementById("reset");
@@ -90,33 +91,20 @@ edit.addEventListener("click", function() {
 
 textarea.addEventListener("input", drawCanvas);
 window.addEventListener("load", drawCanvas);
-</pre>
+```
 
-<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p>
+{{ EmbedLiveSample('code_jouable', 700, 360) }}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-translate", "CanvasRenderingContext2D.translate")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                                    | Statut                           | Commentaire |
+| ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- |
+| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-translate", "CanvasRenderingContext2D.translate")}} | {{Spec2('HTML WHATWG')}} |             |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.CanvasRenderingContext2D.translate")}}</p>
+{{Compat("api.CanvasRenderingContext2D.translate")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li>
-</ul>
+- L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}
diff --git a/files/fr/web/api/cdatasection/index.md b/files/fr/web/api/cdatasection/index.md
index 2f1d631cef..f4689ac7e3 100644
--- a/files/fr/web/api/cdatasection/index.md
+++ b/files/fr/web/api/cdatasection/index.md
@@ -9,77 +9,51 @@ tags:
   - Section
 translation_of: Web/API/CDATASection
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p>L'interface <code><strong>CDATASection</strong></code> représente une section CDATA qui peut être utilisée dans un document XML afin d'inclure des portions de texte qui ne sont pas échappées (les symboles &lt; et &amp; présents dans ces portions n'ont pas besoin d'être échappés comme ils doivent l'être normalement dans un document XML).</p>
+L'interface **`CDATASection`** représente une section CDATA qui peut être utilisée dans un document XML afin d'inclure des portions de texte qui ne sont pas échappées (les symboles < et & présents dans ces portions n'ont pas besoin d'être échappés comme ils doivent l'être normalement dans un document XML).
 
-<p>En termes de balisage, une section CDATA a la forme suivante :</p>
+En termes de balisage, une section CDATA a la forme suivante :
 
-<pre class="syntaxbox">&lt;![CDATA[  ... ]]&gt;
-</pre>
+    <![CDATA[  ... ]]>
 
-<p>Par exemple :</p>
+Par exemple :
 
-<pre class="brush:xml">&lt;toto&gt;
+```xml
+<toto>
   Voici une section CDATA :
-  &lt;![CDATA[  &lt; &gt; &amp; ]]&gt; dans laquelle
+  <![CDATA[  < > & ]]> dans laquelle
   le texte n'est pas échappé.
-&lt;/toto&gt;
-</pre>
+</toto>
+```
 
-<p>La seule séquence qui n'est pas autorisée dans une section CDATA est le délimiteur de fin d'une séquence CDATA lui-même :</p>
+La seule séquence qui n'est pas autorisée dans une section CDATA est le délimiteur de fin d'une séquence CDATA lui-même :
 
-<pre class="brush:xml">&lt;![CDATA[  ]]&gt; causera une erreur   ]]&gt;
-</pre>
+```xml
+<![CDATA[  ]]> causera une erreur   ]]>
+```
 
-<p>On notera que les sections ne doivent pas être utilisées dans des documents HTML.</p>
+On notera que les sections ne doivent pas être utilisées dans des documents HTML.
 
-<p>{{InheritanceDiagram(600,120)}}</p>
+{{InheritanceDiagram(600,120)}}
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<p><em>Cette interface ne dispose pas de propriétés spécifiques et implémente celles de son parent : {{domxref("Text")}}.</em></p>
+_Cette interface ne dispose pas de propriétés spécifiques et implémente celles de son parent : {{domxref("Text")}}._
 
-<h2 id="Méthodes">Méthodes</h2>
+## Méthodes
 
-<p><em>Cette interface ne dispose pas de méthodes spécifiques et implémente celles de son parent : {{domxref("Text")}}.</em></p>
+_Cette interface ne dispose pas de méthodes spécifiques et implémente celles de son parent : {{domxref("Text")}}._
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th>Spécification</th>
-   <th>État</th>
-   <th>Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#interface-cdatasection', 'CDATASection')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Rajouté dans le bogue <a href="https://github.com/whatwg/dom/pull/295">#295</a></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM3 Core', 'core.html#ID-667469212', 'CDATASection')}}</td>
-   <td>{{Spec2('DOM3 Core')}}</td>
-   <td>Aucune modification depuis {{SpecName('DOM2 Core')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Core', 'core.html#ID-667469212', 'CDATASection')}}</td>
-   <td>{{Spec2('DOM2 Core')}}</td>
-   <td>Aucune modification depuis {{SpecName('DOM1')}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM1', 'level-one-core.html#ID-667469212', 'CDATASection')}}</td>
-   <td>{{Spec2('DOM1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                    | État                             | Commentaires                                                         |
+| ------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------------------------------------------------------- |
+| {{SpecName('DOM WHATWG', '#interface-cdatasection', 'CDATASection')}}     | {{Spec2('DOM WHATWG')}} | Rajouté dans le bogue [#295](https://github.com/whatwg/dom/pull/295) |
+| {{SpecName('DOM3 Core', 'core.html#ID-667469212', 'CDATASection')}}         | {{Spec2('DOM3 Core')}}     | Aucune modification depuis {{SpecName('DOM2 Core')}}          |
+| {{SpecName('DOM2 Core', 'core.html#ID-667469212', 'CDATASection')}}         | {{Spec2('DOM2 Core')}}     | Aucune modification depuis {{SpecName('DOM1')}}.             |
+| {{SpecName('DOM1', 'level-one-core.html#ID-667469212', 'CDATASection')}} | {{Spec2('DOM1')}}         | Définition initiale.                                                 |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-
-
-<p>{{Compat("api.CDATASection")}}</p>
+{{Compat("api.CDATASection")}}
diff --git a/files/fr/web/api/characterdata/index.md b/files/fr/web/api/characterdata/index.md
index 4ae6c1bbad..ef27efe0dd 100644
--- a/files/fr/web/api/characterdata/index.md
+++ b/files/fr/web/api/characterdata/index.md
@@ -6,84 +6,55 @@ tags:
   - DOM
 translation_of: Web/API/CharacterData
 ---
-<p>{{APIRef("DOM")}}</p>
+{{APIRef("DOM")}}
 
-<p>L'interface abstraite <code><strong>CharacterData</strong></code> représente un objet {{domxref("Node")}} (<em>noeud</em>) qui contient des caractères. C'est une interface abstraite, ce qui signifie qu'il n'existe aucun objet de type <code>CharacterData</code> : elle est implémentée par d'autres interfaces comme {{domxref("Text")}}, {{domxref("Comment")}} ou {{domxref("ProcessingInstruction")}} qui ne sont pas abstraites.</p>
+L'interface abstraite **`CharacterData`** représente un objet {{domxref("Node")}} (_noeud_) qui contient des caractères. C'est une interface abstraite, ce qui signifie qu'il n'existe aucun objet de type `CharacterData` : elle est implémentée par d'autres interfaces comme {{domxref("Text")}}, {{domxref("Comment")}} ou {{domxref("ProcessingInstruction")}} qui ne sont pas abstraites.
 
-<p>{{InheritanceDiagram}}</p>
+{{InheritanceDiagram}}
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<p><em>Hérite des propriétés de son parent {{domxref("Node")}} et implémente les interfaces {{domxref("ChildNode")}} et {{domxref("NonDocumentTypeChildNode")}}.</em></p>
+_Hérite des propriétés de son parent {{domxref("Node")}} et implémente les interfaces {{domxref("ChildNode")}} et {{domxref("NonDocumentTypeChildNode")}}._
 
-<dl>
- <dt>{{domxref("CharacterData.data")}}</dt>
- <dd>est une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) representant les données textuelles contenues dans cet objet.</dd>
- <dt>{{domxref("CharacterData.length")}} {{readonlyInline}}</dt>
- <dd>Retourne un <code>unsigned long</code> représentant la taille de la chaîne de caractères contenue dans <code>CharacterData.data</code>.</dd>
- <dt>{{domxref("NonDocumentTypeChildNode.nextElementSibling")}} {{readonlyInline}}</dt>
- <dd>Retourne l'{{domxref("Element")}} immédiatement après celui spécifié dans la liste des enfants de son parent, ou <code>null</code> si l'élément spécifié est le dernier de la liste.</dd>
- <dt>{{domxref("NonDocumentTypeChildNode.previousElementSibling")}} {{readonlyInline}}</dt>
- <dd>Retourne l'{{domxref("Element")}} immédiatement avant celui spécifié dans la liste des enfants de son parent, ou <code>null</code> si l'élément spécifié est le premier de la liste.</dd>
-</dl>
+- {{domxref("CharacterData.data")}}
+  - : est une {{domxref("DOMString")}} (_chaîne de caractères_) representant les données textuelles contenues dans cet objet.
+- {{domxref("CharacterData.length")}} {{readonlyInline}}
+  - : Retourne un `unsigned long` représentant la taille de la chaîne de caractères contenue dans `CharacterData.data`.
+- {{domxref("NonDocumentTypeChildNode.nextElementSibling")}} {{readonlyInline}}
+  - : Retourne l'{{domxref("Element")}} immédiatement après celui spécifié dans la liste des enfants de son parent, ou `null` si l'élément spécifié est le dernier de la liste.
+- {{domxref("NonDocumentTypeChildNode.previousElementSibling")}} {{readonlyInline}}
+  - : Retourne l'{{domxref("Element")}} immédiatement avant celui spécifié dans la liste des enfants de son parent, ou `null` si l'élément spécifié est le premier de la liste.
 
-<h2 id="Methods">Méthodes</h2>
+## Méthodes
 
-<p><em>Hérite des méthodes de son parent {{domxref("Node")}}, et implémente les interfaces {{domxref("ChildNode")}} <em>et {{domxref("NonDocumentTypeChildNode")}}</em>.</em></p>
+*Hérite des méthodes de son parent {{domxref("Node")}}, et implémente les interfaces {{domxref("ChildNode")}} *et {{domxref("NonDocumentTypeChildNode")}}_._
 
-<dl>
- <dt>{{domxref("CharacterData.appendData()")}}</dt>
- <dd>Ajoute la {{domxref("DOMString")}} (<em>chaîne de caractères</em>) donnée à la chaîne <code>CharacterData.data</code> ; dans le retour de la méthode, <code>data</code> contient la {{domxref("DOMString")}} concaténée .</dd>
- <dt>{{domxref("CharacterData.deleteData()")}}</dt>
- <dd>Supprime la quantité spécifiée de caractères, en commençant au point désigné, à partir de la chaîne <code>CharacterData.data</code> ; dans le retour de la méthode, <code>data</code> contient le raccourci {{domxref ("DOMString")}}.</dd>
- <dt>{{domxref("CharacterData.insertData()")}}</dt>
- <dd>Insère les caractères spécifiés, au point désigné, dans la chaîne <code>CharacterData.data</code> ; dans le retour de cette méthode, <code>data</code> contient la {{domxref ("DOMString")}} (<em>chaîne de caractères</em>) modifiée.</dd>
- <dt>{{domxref("ChildNode.remove()")}} {{experimental_inline}}</dt>
- <dd>Supprime l'objet de la liste d'enfants de son parent.</dd>
- <dt>{{domxref("CharacterData.replaceData()")}}</dt>
- <dd>Remplace la quantité spécifiée de caractères, en commençant au point désigné, avec la {{domxref ("DOMString")}} (<em>chaîne de caractères</em>) spécifiée ; dans le retour de cette méthode, <code>data</code> contient la {{domxref ("DOMString")}} modifiée.</dd>
- <dt>{{domxref("CharacterData.substringData()")}}</dt>
- <dd>Renvoie une {{domxref ("DOMString")}} (<em>chaîne de caractères</em>) contenant la partie de <code>CharacterData.data</code> de la longueur spécifiée et commençant au point désigné.</dd>
-</dl>
+- {{domxref("CharacterData.appendData()")}}
+  - : Ajoute la {{domxref("DOMString")}} (_chaîne de caractères_) donnée à la chaîne `CharacterData.data` ; dans le retour de la méthode, `data` contient la {{domxref("DOMString")}} concaténée .
+- {{domxref("CharacterData.deleteData()")}}
+  - : Supprime la quantité spécifiée de caractères, en commençant au point désigné, à partir de la chaîne `CharacterData.data` ; dans le retour de la méthode, `data` contient le raccourci {{domxref ("DOMString")}}.
+- {{domxref("CharacterData.insertData()")}}
+  - : Insère les caractères spécifiés, au point désigné, dans la chaîne `CharacterData.data` ; dans le retour de cette méthode, `data` contient la {{domxref ("DOMString")}} (_chaîne de caractères_) modifiée.
+- {{domxref("ChildNode.remove()")}} {{experimental_inline}}
+  - : Supprime l'objet de la liste d'enfants de son parent.
+- {{domxref("CharacterData.replaceData()")}}
+  - : Remplace la quantité spécifiée de caractères, en commençant au point désigné, avec la {{domxref ("DOMString")}} (_chaîne de caractères_) spécifiée ; dans le retour de cette méthode, `data` contient la {{domxref ("DOMString")}} modifiée.
+- {{domxref("CharacterData.substringData()")}}
+  - : Renvoie une {{domxref ("DOMString")}} (_chaîne de caractères_) contenant la partie de `CharacterData.data` de la longueur spécifiée et commençant au point désigné.
 
-<h2 id="Specification">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#characterdata', 'CharacterData')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Ajoute une implémention des interfaces {{domxref("ChildNode")}} et{{domxref("NonDocumentTypeChildNode")}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM3 Core', 'core.html#ID-FF21A306', 'CharacterData')}}</td>
-   <td>{{Spec2('DOM3 Core')}}</td>
-   <td>Pas de changement depuis {{SpecName('DOM2 Core')}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Core', 'core.html#ID-FF21A306', 'CharacterData')}}</td>
-   <td>{{Spec2('DOM2 Core')}}</td>
-   <td>Pas de changement depuis {{SpecName('DOM1')}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM1', 'level-one-core.html#ID-FF21A306', 'CharacterData')}}</td>
-   <td>{{Spec2('DOM1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                    | Statut                           | Commentaire                                                                                                                     |
+| ------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('DOM WHATWG', '#characterdata', 'CharacterData')}}                 | {{Spec2('DOM WHATWG')}} | Ajoute une implémention des interfaces {{domxref("ChildNode")}} et{{domxref("NonDocumentTypeChildNode")}}. |
+| {{SpecName('DOM3 Core', 'core.html#ID-FF21A306', 'CharacterData')}}         | {{Spec2('DOM3 Core')}}     | Pas de changement depuis {{SpecName('DOM2 Core')}}.                                                                      |
+| {{SpecName('DOM2 Core', 'core.html#ID-FF21A306', 'CharacterData')}}         | {{Spec2('DOM2 Core')}}     | Pas de changement depuis {{SpecName('DOM1')}}.                                                                          |
+| {{SpecName('DOM1', 'level-one-core.html#ID-FF21A306', 'CharacterData')}} | {{Spec2('DOM1')}}         | Définition initiale.                                                                                                            |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.CharacterData")}}</p>
+{{Compat("api.CharacterData")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/API/Document_Object_Model">Référence du DOM</a>.</li>
-</ul>
+- [Référence du DOM](/fr/docs/Web/API/Document_Object_Model).
diff --git a/files/fr/web/api/clearinterval/index.md b/files/fr/web/api/clearinterval/index.md
index a6dbfe8cb4..08aeb26bbd 100644
--- a/files/fr/web/api/clearinterval/index.md
+++ b/files/fr/web/api/clearinterval/index.md
@@ -10,63 +10,43 @@ tags:
 translation_of: Web/API/WindowOrWorkerGlobalScope/clearInterval
 original_slug: Web/API/WindowOrWorkerGlobalScope/clearInterval
 ---
-<div>{{APIRef("HTML DOM")}}</div>
+{{APIRef("HTML DOM")}}
 
-<p>La méthode <strong><code>clearInterval()</code></strong>, rattachée au <em>mixin </em>{{domxref("WindowOrWorkerGlobalScope")}}, permet d'annuler une action répétée minutée initiée via un appel à {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}}.</p>
+La méthode **`clearInterval()`**, rattachée au _mixin_ {{domxref("WindowOrWorkerGlobalScope")}}, permet d'annuler une action répétée minutée initiée via un appel à {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}}.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>scope</em>.clearInterval(<var>intervalID</var>)
-</pre>
+    scope.clearInterval(intervalID)
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>intervalID</code></dt>
- <dd>L'identifiant de l'intervalle de répétition qu'on souhaite annuler. Cet identifiant est renvoyé lorsqu'on appelle <code>setInterval()</code> pour définir l'intervalle de répétition.</dd>
-</dl>
+- `intervalID`
+  - : L'identifiant de l'intervalle de répétition qu'on souhaite annuler. Cet identifiant est renvoyé lorsqu'on appelle `setInterval()` pour définir l'intervalle de répétition.
 
-<p>On notera que l'ensemble des identifiants utilisés est commun entre ceux fournis par {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}} et ceux fournis par {{domxref("WindowOrWorkerGlobalScope.setTimeout", "setTimeout()")}}. Cela signifie qu'on peut, techniquement, utiliser <code>clearInterval()</code> et {{domxref("WindowOrWorkerGlobalScope.clearTimeout", "clearTimeout()")}} de façon interchangeable. C'est toutefois une mauvaise pratique, qui nuit à la lisibilité du code et à sa maintenabilité.</p>
+On notera que l'ensemble des identifiants utilisés est commun entre ceux fournis par {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}} et ceux fournis par {{domxref("WindowOrWorkerGlobalScope.setTimeout", "setTimeout()")}}. Cela signifie qu'on peut, techniquement, utiliser `clearInterval()` et {{domxref("WindowOrWorkerGlobalScope.clearTimeout", "clearTimeout()")}} de façon interchangeable. C'est toutefois une mauvaise pratique, qui nuit à la lisibilité du code et à sa maintenabilité.
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+### Valeur de retour
 
-<p>{{jsxref("undefined")}}</p>
+{{jsxref("undefined")}}
 
-<h2 id="Example">Exemples</h2>
+## Exemples
 
-<p>Voir <a href="/fr/docs/Web/API/WindowTimers/setInterval#Exemples">l'exemple <code>setInterval()</code></a>.</p>
+Voir [l'exemple `setInterval()`](/fr/docs/Web/API/WindowTimers/setInterval#Exemples).
 
-<h2 id="Specification">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', 'webappapis.html#dom-clearinterval', 'WindowOrWorkerGlobalScope.clearInterval()')}}</td>
-   <td>{{Spec2("HTML WHATWG")}}</td>
-   <td>Cette méthode a été déplacée sur le <em>mixin</em> <code>WindowOrWorkerGlobalScope</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-clearinterval', 'clearInterval()')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                                    | État                             | Commentaires                                                             |
+| ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------------------------------------------------------------ |
+| {{SpecName('HTML WHATWG', 'webappapis.html#dom-clearinterval', 'WindowOrWorkerGlobalScope.clearInterval()')}} | {{Spec2("HTML WHATWG")}} | Cette méthode a été déplacée sur le _mixin_ `WindowOrWorkerGlobalScope`. |
+| {{SpecName('HTML WHATWG', 'webappapis.html#dom-clearinterval', 'clearInterval()')}}                                 | {{Spec2('HTML WHATWG')}} |                                                                          |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.WindowOrWorkerGlobalScope.clearInterval")}}</p>
+{{Compat("api.WindowOrWorkerGlobalScope.clearInterval")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("WindowOrWorkerGlobalScope.setTimeout")}}</li>
- <li>{{domxref("WindowOrWorkerGlobalScope.setInterval")}}</li>
- <li>{{domxref("WindowOrWorkerGlobalScope.clearTimeout")}}</li>
- <li>{{domxref("Window.requestAnimationFrame")}}</li>
-</ul>
+- {{domxref("WindowOrWorkerGlobalScope.setTimeout")}}
+- {{domxref("WindowOrWorkerGlobalScope.setInterval")}}
+- {{domxref("WindowOrWorkerGlobalScope.clearTimeout")}}
+- {{domxref("Window.requestAnimationFrame")}}
diff --git a/files/fr/web/api/client/frametype/index.md b/files/fr/web/api/client/frametype/index.md
index 4d3ed3cae9..acba1e7eac 100644
--- a/files/fr/web/api/client/frametype/index.md
+++ b/files/fr/web/api/client/frametype/index.md
@@ -11,36 +11,28 @@ tags:
   - frameType
 translation_of: Web/API/Client/frameType
 ---
-<p>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</p>
+{{SeeCompatTable}}{{APIRef("Service Workers API")}}
 
-<p>La propriété <code><strong>frameType</strong></code> (accessible en lecture seule) de l'interface {{domxref("Client")}} indique le type de contexte de navigation du {{domxref("Client")}} courant. Cette valeur peut être <code>auxiliary</code>, <code>top-level</code>, <code>nested</code>, ou <code>none</code>.</p>
+La propriété **`frameType`** (accessible en lecture seule) de l'interface {{domxref("Client")}} indique le type de contexte de navigation du {{domxref("Client")}} courant. Cette valeur peut être `auxiliary`, `top-level`, `nested`, ou `none`.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">var myFrameType = Client.frameType;</pre>
+```js
+var myFrameType = Client.frameType;
+```
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">TBD
-</pre>
+```js
+TBD
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Service Workers', '#client-frametype', 'frameType')}}</td>
-   <td>{{Spec2('Service Workers')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                            | Statut                               | Commentaire          |
+| ---------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName('Service Workers', '#client-frametype', 'frameType')}} | {{Spec2('Service Workers')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Client.frameType")}}</p>
+{{Compat("api.Client.frameType")}}
diff --git a/files/fr/web/api/client/id/index.md b/files/fr/web/api/client/id/index.md
index 5860d16888..e38a2fb262 100644
--- a/files/fr/web/api/client/id/index.md
+++ b/files/fr/web/api/client/id/index.md
@@ -12,36 +12,28 @@ tags:
   - id
 translation_of: Web/API/Client/id
 ---
-<p>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</p>
+{{SeeCompatTable}}{{APIRef("Service Workers API")}}
 
-<p>La propriété <code><strong>id</strong></code> (lecture seule) de l'interface {{domxref("Client")}} retourne l'identifiant universellement unique de l'objet {{domxref("Client")}}.</p>
+La propriété **`id`** (lecture seule) de l'interface {{domxref("Client")}} retourne l'identifiant universellement unique de l'objet {{domxref("Client")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">var clientId = Client.id;</pre>
+```js
+var clientId = Client.id;
+```
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">TBD
-</pre>
+```js
+TBD
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Service Workers', '#client-id', 'id')}}</td>
-   <td>{{Spec2('Service Workers')}}</td>
-   <td>Initial definition.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                        | Statut                               | Commentaire         |
+| -------------------------------------------------------------------- | ------------------------------------ | ------------------- |
+| {{SpecName('Service Workers', '#client-id', 'id')}} | {{Spec2('Service Workers')}} | Initial definition. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Client.id")}}</p>
+{{Compat("api.Client.id")}}
diff --git a/files/fr/web/api/client/index.md b/files/fr/web/api/client/index.md
index 1852bcbdb3..1727a3bf41 100644
--- a/files/fr/web/api/client/index.md
+++ b/files/fr/web/api/client/index.md
@@ -13,35 +13,32 @@ tags:
   - ServiceWorkers
 translation_of: Web/API/Client
 ---
-<p>{{APIRef("Service Workers API")}}</p>
+{{APIRef("Service Workers API")}}
 
-<p>L'interface <code>Client</code> de l'<a href="/en-US/docs/Web/API/ServiceWorker_API">API ServiceWorker</a> représente la portée d'exécution d'un {{domxref("Worker")}} ou {{domxref("SharedWorker")}}. Les clients {{domxref("Window")}} sont représentés par le plus spécifique {{domxref("WindowClient")}}. Vous pouvez obtenir les objets <code>Client</code>/<code>WindowClient</code> via les méthodes {{domxref("Clients.matchAll","Clients.matchAll()")}} et {{domxref("Clients.get","Clients.get()")}}.</p>
+L'interface `Client` de l'[API ServiceWorker](/en-US/docs/Web/API/ServiceWorker_API) représente la portée d'exécution d'un {{domxref("Worker")}} ou {{domxref("SharedWorker")}}. Les clients {{domxref("Window")}} sont représentés par le plus spécifique {{domxref("WindowClient")}}. Vous pouvez obtenir les objets `Client`/`WindowClient` via les méthodes {{domxref("Clients.matchAll","Clients.matchAll()")}} et {{domxref("Clients.get","Clients.get()")}}.
 
-<h2 id="Méthodes">Méthodes</h2>
+## Méthodes
 
-<dl>
- <dt>{{domxref("Client.postMessage()")}}</dt>
- <dd>Permet à un service worker d'envoyer un message au <code><a href="/en-US/docs/Web/API/ServiceWorkerClient">ServiceWorkerClient</a></code>.</dd>
-</dl>
+- {{domxref("Client.postMessage()")}}
+  - : Permet à un service worker d'envoyer un message au [`ServiceWorkerClient`](/en-US/docs/Web/API/ServiceWorkerClient).
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<dl>
- <dt>{{domxref("Client.id")}} {{readonlyInline}}</dt>
- <dd>Retourne l'identifiant universellement unique de l'objet <code>Client</code>.</dd>
- <dt>{{domxref("Client.type")}} {{readonlyInline}}</dt>
- <dd>Indique le type de contexte de navigation du client courant. Cette valeur peut être <code>auxiliary</code>, <code>top-level</code>, <code>nested</code>, or <code>none</code>.</dd>
- <dt>{{domxref("Client.url")}} {{readonlyInline}}</dt>
- <dd>Retourne l'URL du client service worker courant.</dd>
-</dl>
+- {{domxref("Client.id")}} {{readonlyInline}}
+  - : Retourne l'identifiant universellement unique de l'objet `Client`.
+- {{domxref("Client.type")}} {{readonlyInline}}
+  - : Indique le type de contexte de navigation du client courant. Cette valeur peut être `auxiliary`, `top-level`, `nested`, or `none`.
+- {{domxref("Client.url")}} {{readonlyInline}}
+  - : Retourne l'URL du client service worker courant.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Ce code est basé sur un fragment pris d'un <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/post-message/index.html">exemple d'envoi de message</a> (voir <a href="https://googlechrome.github.io/samples/service-worker/post-message/">l'exemple en ligne</a>.) Ce code envoie une référence de message à laquelle le service worker peut répondre via {{domxref("Client.postMessage()")}}.</p>
+Ce code est basé sur un fragment pris d'un [exemple d'envoi de message](https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/post-message/index.html) (voir [l'exemple en ligne](https://googlechrome.github.io/samples/service-worker/post-message/).) Ce code envoie une référence de message à laquelle le service worker peut répondre via {{domxref("Client.postMessage()")}}.
 
-<p>Ce message est contenu dans une promesse qui est résolue si la réponse ne contient pas d'erreur et est rejetée avec une erreur.</p>
+Ce message est contenu dans une promesse qui est résolue si la réponse ne contient pas d'erreur et est rejetée avec une erreur.
 
-<pre class="brush: js">// client service worker (par exemple un document)
+```js
+// client service worker (par exemple un document)
 function sendMessage(message) {
   return new Promise(function(resolve, reject) {
     // Notez que c'est la version du ServiceWorker.postMessage
@@ -57,36 +54,23 @@ self.addEventListener("message", function(e) {
   // e.source est un object client
   e.source.postMessage("Hello! Your message was: " + e.data);
 });
-</pre>
-
-<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">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Service Workers', '#client', 'Client')}}</td>
-   <td>{{Spec2('Service Workers')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<div>{{Compat("api.Client")}}</div>
-
-<h2 id="Voir_également">Voir également</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Utiliser les Service Workers</a></li>
- <li><a href="https://github.com/mdn/sw-test">Exemple simple de service workers</a></li>
- <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Est ce que le ServiceWorker est prêt ?</a></li>
- <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promesses</a></li>
- <li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Utilisation performante des web workers</a></li>
- <li><a href="/en-US/docs/Web/API/Channel_Messaging_API">Channel Messaging API</a></li>
-</ul>
+```
+
+## Spécifications
+
+| Spécification                                                        | État                                 | Commentaire         |
+| -------------------------------------------------------------------- | ------------------------------------ | ------------------- |
+| {{SpecName('Service Workers', '#client', 'Client')}} | {{Spec2('Service Workers')}} | Définition initiale |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Client")}}
+
+## Voir également
+
+- [Utiliser les Service Workers](/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers)
+- [Exemple simple de service workers](https://github.com/mdn/sw-test)
+- [Est ce que le ServiceWorker est prêt ?](https://jakearchibald.github.io/isserviceworkerready/)
+- [Promesses](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)
+- [Utilisation performante des web workers](/en-US/docs/Web/Guide/Performance/Using_web_workers)
+- [Channel Messaging API](/en-US/docs/Web/API/Channel_Messaging_API)
diff --git a/files/fr/web/api/client/postmessage/index.md b/files/fr/web/api/client/postmessage/index.md
index 3ea26daa58..45e64508aa 100644
--- a/files/fr/web/api/client/postmessage/index.md
+++ b/files/fr/web/api/client/postmessage/index.md
@@ -11,34 +11,35 @@ tags:
   - postMessage
 translation_of: Web/API/Client/postMessage
 ---
-<p>{{SeeCompatTable}}{{APIRef("Client")}}</p>
+{{SeeCompatTable}}{{APIRef("Client")}}
 
-<p>La méthode <code><strong>postMessage() </strong></code>de l'interface {{domxref("Client")}} permet à un service worker client d'envoyer un message à un {{domxref("ServiceWorker")}}.</p>
+La méthode **`postMessage() `**de l'interface {{domxref("Client")}} permet à un service worker client d'envoyer un message à un {{domxref("ServiceWorker")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">Client.postMessage(message[, transfer]);</pre>
+```js
+Client.postMessage(message[, transfer]);
+```
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Void.</p>
+Void.
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>message</code></dt>
- <dd>Le message à envoyer au service worker.</dd>
- <dt><code>transfer {{optional_inline}}</code></dt>
- <dd>Un objet transferable, comme par exemple une référence à un port.</dd>
-</dl>
+- `message`
+  - : Le message à envoyer au service worker.
+- `transfer {{optional_inline}}`
+  - : Un objet transferable, comme par exemple une référence à un port.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Ce fragment de code est tiré de l'<a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/post-message/index.html">exemple d'envoi de message du service worker</a> exemple d'envoi de message du service worker (voir <a href="https://googlechrome.github.io/samples/service-worker/post-message/">exemple en ligne</a>). Le code envoi un message et transfert le port vers le service worker qui pourra répondre via {{domxref("Client.postMessage()")}}.</p>
+Ce fragment de code est tiré de l'[exemple d'envoi de message du service worker](https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/post-message/index.html) exemple d'envoi de message du service worker (voir [exemple en ligne](https://googlechrome.github.io/samples/service-worker/post-message/)). Le code envoi un message et transfert le port vers le service worker qui pourra répondre via {{domxref("Client.postMessage()")}}.
 
-<p>Ce message est contenu dans une promesse qui se résolvera si la réponse ne contient pas d'erreur et qui échouera avec l'erreur.</p>
+Ce message est contenu dans une promesse qui se résolvera si la réponse ne contient pas d'erreur et qui échouera avec l'erreur.
 
-<pre class="brush: js">function sendMessage(message) {
+```js
+function sendMessage(message) {
   return new Promise(function(resolve, reject) {
      var messageChannel = new MessageChannel();
      messageChannel.port1.onmessage = function(event) {
@@ -50,25 +51,15 @@ translation_of: Web/API/Client/postMessage
      };
     navigator.serviceWorker.controller.postMessage(message, [messageChannel.port2]);
   });
-}</pre>
+}
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Service Workers', '#client-postmessage-method', 'postMessage()')}}</td>
-   <td>{{Spec2('Service Workers')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                            | Statut                               | Commentaire         |
+| -------------------------------------------------------------------------------------------------------- | ------------------------------------ | ------------------- |
+| {{SpecName('Service Workers', '#client-postmessage-method', 'postMessage()')}} | {{Spec2('Service Workers')}} | Définition initiale |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Client.postMessage")}}</p>
+{{Compat("api.Client.postMessage")}}
diff --git a/files/fr/web/api/client/url/index.md b/files/fr/web/api/client/url/index.md
index e024102c50..7b40c93b14 100644
--- a/files/fr/web/api/client/url/index.md
+++ b/files/fr/web/api/client/url/index.md
@@ -11,23 +11,22 @@ tags:
   - URL
 translation_of: Web/API/Client/url
 ---
-<div>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</div>
+{{SeeCompatTable}}{{APIRef("Service Workers API")}}La propriété **`url`** (lecture seule) de l'interface {{domxref("Client")}} retourne l'url du service worker client courant.
 
-<div>La propriété <code><strong>url</strong></code> (lecture seule) de l'interface {{domxref("Client")}} retourne l'url du service worker client courant.</div>
+## Syntaxe
 
-<div> </div>
+```js
+var clientUrl = Client.url;
+```
 
-<h2 id="Syntaxe">Syntaxe</h2>
+### Valeur de retour
 
-<pre class="brush: js">var clientUrl = Client.url;</pre>
+Valeur de type {{domxref("USVString")}}.
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+## Exemple
 
-<p>Valeur de type {{domxref("USVString")}}.</p>
-
-<h2 id="Exemple">Exemple</h2>
-
-<pre class="brush: js">self.addEventListener('notificationclick', function(event) {
+```js
+self.addEventListener('notificationclick', function(event) {
   console.log('Au click de notification : ', event.notification.tag);
   event.notification.close();
 
@@ -36,33 +35,23 @@ translation_of: Web/API/Client/url
   event.waitUntil(clients.matchAll({
     type: "window"
   }).then(function(clientList) {
-    for (var i = 0; i &lt; clientList.length; i++) {
+    for (var i = 0; i < clientList.length; i++) {
       var client = clientList[i];
-      if (client.url == '/' &amp;&amp; 'focus' in client)
+      if (client.url == '/' && 'focus' in client)
         return client.focus();
     }
     if (clients.openWindow)
       return clients.openWindow('/');
   }));
-});</pre>
+});
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Service Workers', '#client-url', 'url')}}</td>
-   <td>{{Spec2('Service Workers')}}</td>
-   <td>Défintion initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                            | Statut                               | Commentaire         |
+| ------------------------------------------------------------------------ | ------------------------------------ | ------------------- |
+| {{SpecName('Service Workers', '#client-url', 'url')}} | {{Spec2('Service Workers')}} | Défintion initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Client.url")}}</p>
+{{Compat("api.Client.url")}}
diff --git a/files/fr/web/api/clients/claim/index.md b/files/fr/web/api/clients/claim/index.md
index bd76981af1..e392a459aa 100644
--- a/files/fr/web/api/clients/claim/index.md
+++ b/files/fr/web/api/clients/claim/index.md
@@ -10,66 +10,56 @@ tags:
   - claim
 translation_of: Web/API/Clients/claim
 ---
-<p>{{SeeCompatTable}}{{APIRef("Service Worker Clients")}}</p>
+{{SeeCompatTable}}{{APIRef("Service Worker Clients")}}
 
-<p>La méthode <code><strong>claim()</strong></code> de l'interface {{domxref("Clients")}} permet à un service worker actif de se définir comme service worker actif de la page client quand le worker et la page sont dans le même scope. Ceci déclenche un évènement {{domxref("ServiceWorkerContainer.oncontrollerchange","oncontrollerchange")}} dans toutes les pages dans la portée du service worker.</p>
+La méthode **`claim()`** de l'interface {{domxref("Clients")}} permet à un service worker actif de se définir comme service worker actif de la page client quand le worker et la page sont dans le même scope. Ceci déclenche un évènement {{domxref("ServiceWorkerContainer.oncontrollerchange","oncontrollerchange")}} dans toutes les pages dans la portée du service worker.
 
-<p>Cette méthode peut être utilisée avec {{domxref("ServiceWorkerGlobalScope.skipWaiting()")}} pour s'assurer que la mise à jour du service worker sous jacent prend effet immédiatement pour et le client courant et tous les autres clients actifs.</p>
+Cette méthode peut être utilisée avec {{domxref("ServiceWorkerGlobalScope.skipWaiting()")}} pour s'assurer que la mise à jour du service worker sous jacent prend effet immédiatement pour et le client courant et tous les autres clients actifs.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">ServiceWorkerClients.claim().then(function() {
+```js
+ServiceWorkerClients.claim().then(function() {
   // Faire quelque chose
 });
-</pre>
+```
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<p>None.</p>
+None.
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Une <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a>.</code></p>
+Une `Promise.`
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>L'exemple suivant utilise <code>claim()</code> dans le gestionnaire d'évènement <code>onActivate</code> d'un service worker. Donc la page client chargée dans la même portée n'a pas besoin d'être rechargée avant de pouvoir utiliser le service worker.</p>
+L'exemple suivant utilise `claim()` dans le gestionnaire d'évènement `onActivate` d'un service worker. Donc la page client chargée dans la même portée n'a pas besoin d'être rechargée avant de pouvoir utiliser le service worker.
 
-<pre class="brush: js">self.addEventListener('install', function(event) {
+```js
+self.addEventListener('install', function(event) {
   event.waitUntil(self.skipWaiting());
 });
 self.addEventListener('activate', function(event) {
   event.waitUntil(self.clients.claim());
-});</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Service Workers', '#clients', 'Clients')}}</td>
-   <td>{{Spec2('Service Workers')}}</td>
-   <td>Définition initiale. Toujours en cours de développement (voir <a href="https://github.com/slightlyoff/ServiceWorker/issues/414">ticket 414</a> et <a href="https://github.com/slightlyoff/ServiceWorker/issues/423">ticket 423</a>).</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_de_navigateurs">Compatibilité de navigateurs</h2>
-
-<p>{{Compat("api.Clients.claim")}}</p>
-
-<h2 id="À_voir_aussi">À voir aussi</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Utiliser les Service Workers</a></li>
- <li><a href="https://github.com/mdn/sw-test">Example simple de service workers</a></li>
- <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Est-ce que les ServiceWorker sont prêt?</a></li>
- <li>{{jsxref("Promise")}}</li>
- <li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Utilisation optimisée des web workers</a></li>
- <li>{{domxref("ServiceWorkerGlobalScope.skipWaiting()")}}</li>
-</ul>
+});
+```
+
+## Spécifications
+
+| Spécification                                                            | Statut                               | Commentaire                                                                                                                                                                                                    |
+| ------------------------------------------------------------------------ | ------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('Service Workers', '#clients', 'Clients')}} | {{Spec2('Service Workers')}} | Définition initiale. Toujours en cours de développement (voir [ticket 414](https://github.com/slightlyoff/ServiceWorker/issues/414) et [ticket 423](https://github.com/slightlyoff/ServiceWorker/issues/423)). |
+
+## Compatibilité de navigateurs
+
+{{Compat("api.Clients.claim")}}
+
+## À voir aussi
+
+- [Utiliser les Service Workers](/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers)
+- [Example simple de service workers](https://github.com/mdn/sw-test)
+- [Est-ce que les ServiceWorker sont prêt?](https://jakearchibald.github.io/isserviceworkerready/)
+- {{jsxref("Promise")}}
+- [Utilisation optimisée des web workers](/en-US/docs/Web/Guide/Performance/Using_web_workers)
+- {{domxref("ServiceWorkerGlobalScope.skipWaiting()")}}
diff --git a/files/fr/web/api/clients/get/index.md b/files/fr/web/api/clients/get/index.md
index dd2d46c018..24de95f0eb 100644
--- a/files/fr/web/api/clients/get/index.md
+++ b/files/fr/web/api/clients/get/index.md
@@ -10,50 +10,39 @@ tags:
   - get
 translation_of: Web/API/Clients/get
 ---
-<div>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</div>
+{{SeeCompatTable}}{{APIRef("Service Workers API")}}La méthode **`get()`** de l'interface {{domxref("Clients")}} récupère un service worker client correspondant à un id donné et le retourne dans une {{jsxref("Promise")}}.
 
-<div>La méthode <code><strong>get()</strong></code> de l'interface {{domxref("Clients")}} récupère un service worker client correspondant à un id donné et le retourne dans une {{jsxref("Promise")}}.</div>
+## Syntaxe
 
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="brush: js">self.clients.get(id).then(function(client) {
+```js
+self.clients.get(id).then(function(client) {
   // Faire quelque chose avec le client
-});</pre>
+});
+```
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>id</code></dt>
- <dd>Une {{domxref("DOMString")}} représentant l'id du client que vous souhaitez récuperer.</dd>
-</dl>
+- `id`
+  - : Une {{domxref("DOMString")}} représentant l'id du client que vous souhaitez récuperer.
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Une <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> qui se résoud avec un objet {{domxref("Client")}}.</p>
+Une [`Promise`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) qui se résoud avec un objet {{domxref("Client")}}.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: js">self.clients.get(options).then(function(client) {
+```js
+self.clients.get(options).then(function(client) {
   self.clients.openWindow(client.url);
-});</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Service Workers', '#clients-get-method', 'get()')}}</td>
-   <td>{{Spec2('Service Workers')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Clients.get")}}</p>
+});
+```
+
+## Spécifications
+
+| Spécification                                                                        | Statut                               | Commentaires        |
+| ------------------------------------------------------------------------------------ | ------------------------------------ | ------------------- |
+| {{SpecName('Service Workers', '#clients-get-method', 'get()')}} | {{Spec2('Service Workers')}} | Définition initiale |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Clients.get")}}
diff --git a/files/fr/web/api/clients/index.md b/files/fr/web/api/clients/index.md
index aab1e6c132..54909751dc 100644
--- a/files/fr/web/api/clients/index.md
+++ b/files/fr/web/api/clients/index.md
@@ -13,28 +13,27 @@ tags:
   - Workers
 translation_of: Web/API/Clients
 ---
-<div>{{APIRef("Service Workers API")}}</div>
+{{APIRef("Service Workers API")}}
 
-<p>L'interface <code>Clients</code> permet d'accéder aux objets <a href="/fr/docs/Web/API/Client"><code>Client</code></a>. On y accède via <code><a href="/fr/docs/Web/API/ServiceWorkerGlobalScope"><code>self</code></a>.clients</code> au sein d'un <a href="/fr/docs/Web/API/Service_Worker_API">service worker</a>.</p>
+L'interface `Clients` permet d'accéder aux objets [`Client`](/fr/docs/Web/API/Client). On y accède via `self.clients` au sein d'un [service worker](/fr/docs/Web/API/Service_Worker_API).
 
-<h2 id="methods">Méthodes</h2>
+## Méthodes
 
-<dl>
-  <dt><a href="/fr/docs/Web/API/Clients/get"><code>Clients.get()</code></a></dt>
-  <dd>Retourne une <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise"><code>Promise</code></a> (« <i>Promesse</i> ») pour un <a href="/fr/docs/Web/API/Client"><code>Client</code></a> correspondant à un <a href="/fr/docs/Web/API/Client/id"><code>id</code></a> donné.</dd>
-  <dt><a href="/fr/docs/Web/API/Clients/matchAll"><code>Clients.matchAll()</code></a></dt>
-  <dd>Retourne une <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise"><code>Promise</code></a> (« <i>Promesse</i> ») pour un tableau d'objets <a href="/fr/docs/Web/API/Client"><code>Client</code></a>. L'argument options vous permet de contrôler les types de clients renvoyés.</dd>
-  <dt><a href="/fr/docs/Web/API/Clients/openWindow"><code>Clients.openWindow()</code></a></dt>
-  <dd>Ouvre une nouvelle fenêtre de navigateur pour une url donnée et renvoie une <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise"><code>Promise</code></a> (« <i>Promesse</i> ») pour le nouveau <a href="/fr/docs/Web/API/WindowClient"><code>WindowClient</code></a>.</dd>
-  <dt><a href="/fr/docs/Web/API/Clients/claim"><code>Clients.claim()</code></a></dt>
-  <dd>Permet à un service worker actif de se définir comme le <a href="/fr/docs/Web/API/ServiceWorkerContainer/controller"><code>controller</code></a> (« <i>Controlleur</i> ») pour tous les clients dans son <a href="/fr/docs/Web/API/ServiceWorkerRegistration/scope"><code>scope</code></a> (« <i>sa portée</i> »).</dd>
-</dl>
+- [`Clients.get()`](/fr/docs/Web/API/Clients/get)
+  - : Retourne une [`Promise`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise) (« _Promesse_ ») pour un [`Client`](/fr/docs/Web/API/Client) correspondant à un [`id`](/fr/docs/Web/API/Client/id) donné.
+- [`Clients.matchAll()`](/fr/docs/Web/API/Clients/matchAll)
+  - : Retourne une [`Promise`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise) (« _Promesse_ ») pour un tableau d'objets [`Client`](/fr/docs/Web/API/Client). L'argument options vous permet de contrôler les types de clients renvoyés.
+- [`Clients.openWindow()`](/fr/docs/Web/API/Clients/openWindow)
+  - : Ouvre une nouvelle fenêtre de navigateur pour une url donnée et renvoie une [`Promise`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise) (« _Promesse_ ») pour le nouveau [`WindowClient`](/fr/docs/Web/API/WindowClient).
+- [`Clients.claim()`](/fr/docs/Web/API/Clients/claim)
+  - : Permet à un service worker actif de se définir comme le [`controller`](/fr/docs/Web/API/ServiceWorkerContainer/controller) (« _Controlleur_ ») pour tous les clients dans son [`scope`](/fr/docs/Web/API/ServiceWorkerRegistration/scope) (« _sa portée_ »).
 
-<h2 id="exemple">Exemple</h2>
+## Exemple
 
-<p>L'exemple suivant montre une fenêtre de chat existante ou en crée une nouvelle lorsque l'utilisateur clique sur une notification.</p>
+L'exemple suivant montre une fenêtre de chat existante ou en crée une nouvelle lorsque l'utilisateur clique sur une notification.
 
-<pre class="brush: js">addEventListener('notificationclick', event =&gt; {
+```js
+addEventListener('notificationclick', event => {
   event.waitUntil(async function() {
     const allClients = await clients.matchAll({
       includeUncontrolled: true
@@ -63,35 +62,21 @@ translation_of: Web/API/Clients
     // Envoyez un message au client :
     chatClient.postMessage("Nouveaux messages !");
   }());
-});</pre>
-
-<h2 id="specifications">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('Service Workers', '#clients', 'Clients')}}</td>
-      <td>{{Spec2('Service Workers')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
-
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Clients")}}</p>
-
-<h2 id="see_also">Voir aussi</h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Utiliser les Service Workers</a></li>
-  <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Le ServiceWorker est-il prêt ?</a> <small>(en anglais)</small></li>
-  <li>L'objet <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise"><code>Promise</code></a></li>
-</ul>
+});
+```
+
+## Spécifications
+
+| Spécification                                                            | Statut                               | Commentaire          |
+| ------------------------------------------------------------------------ | ------------------------------------ | -------------------- |
+| {{SpecName('Service Workers', '#clients', 'Clients')}} | {{Spec2('Service Workers')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Clients")}}
+
+## Voir aussi
+
+- [Utiliser les Service Workers](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers)
+- [Le ServiceWorker est-il prêt ?](https://jakearchibald.github.io/isserviceworkerready/) (en anglais)
+- L'objet [`Promise`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise)
diff --git a/files/fr/web/api/clients/matchall/index.md b/files/fr/web/api/clients/matchall/index.md
index 2636074f8d..992754486c 100644
--- a/files/fr/web/api/clients/matchall/index.md
+++ b/files/fr/web/api/clients/matchall/index.md
@@ -10,62 +10,48 @@ tags:
   - Service Workers
 translation_of: Web/API/Clients/matchAll
 ---
-<div>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</div>
+{{SeeCompatTable}}{{APIRef("Service Workers API")}}La méthode **`matchAll()`** de l'interface {{domxref("Clients")}} retourne une [`Promesse`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) pour une liste de service worker clients. Inclure le paramètre `options` permet de retourner tous les services worker clients dont l'origine est la même que l'origine du service worker associé. Si `options` n'est pas inclus, la méthode retourne que le service worker client controllé par le service worker.
 
-<div>La méthode <strong><code>matchAll()</code></strong> de l'interface {{domxref("Clients")}} retourne une <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promesse</a></code> pour une liste de service worker clients. Inclure le paramètre <code>options</code> permet de retourner tous les services worker clients dont l'origine est la même que l'origine du service worker associé. Si <code>options</code> n'est pas inclus, la méthode retourne que le service worker client controllé par le service worker.</div>
+## Syntaxe
 
-<div> </div>
+```js
+ServiceWorkerClients.matchAll(options).then(function(clients) {
+  // faire quelque chose avec la list de clients
+});
+```
 
-<h2 id="Syntaxe">Syntaxe</h2>
+### Paramètres
 
-<pre class="brush: js">ServiceWorkerClients.matchAll(options).then(function(clients) {
-  // faire quelque chose avec la list de clients
-});</pre>
+- `options`
 
-<h3 id="Paramètres">Paramètres</h3>
+  - : L'objet `option` vous permet de définir les options pour l'opération. Les options disponibles sont :
 
-<dl>
- <dt><code>options</code></dt>
- <dd><p>L'objet <code>option</code> vous permet de définir les options pour l'opération. Les options disponibles sont :</p>
- <ul>
-  <li><code>includeUncontrolled</code>: Un {{domxref("Boolean")}} — défini à <code>true</code>, l'opération retournera tous les services worker clients qui sont de la même origine que le service worker courant. Sinon, elle ne retournera que le service worker client controllé par le service worker courant. La valeur par défaut est <code>false</code>.</li>
-  <li><code>type</code>: Défini le type de client que vous voulez observer. Les types disponibles sont <code>window</code>, <code>worker</code>, <code>sharedworker</code>, et <code>all</code>. La valeur par défaut est <code>all</code>.</li>
- </ul>
- </dd>
-</dl>
+    - `includeUncontrolled`: Un {{domxref("Boolean")}} — défini à `true`, l'opération retournera tous les services worker clients qui sont de la même origine que le service worker courant. Sinon, elle ne retournera que le service worker client controllé par le service worker courant. La valeur par défaut est `false`.
+    - `type`: Défini le type de client que vous voulez observer. Les types disponibles sont `window`, `worker`, `sharedworker`, et `all`. La valeur par défaut est `all`.
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Une  <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promesse</a></code> qui se résout avec un tableau d'objets {{domxref("Client")}}.</p>
+Une  [`Promesse`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) qui se résout avec un tableau d'objets {{domxref("Client")}}.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: js">clients.matchAll(options).then(function(clientList) {
-  for(var i = 0 ; i &lt; clients.length ; i++) {
+```js
+clients.matchAll(options).then(function(clientList) {
+  for(var i = 0 ; i < clients.length ; i++) {
     if(clientList[i].url === 'index.html') {
       clients.openWindow(clientList[i]);
       // ou faire quelque chose avec le client
     }
   }
-});</pre>
+});
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Service Workers', '#clients', 'Clients')}}</td>
-   <td>{{Spec2('Service Workers')}}</td>
-   <td>Définition initial.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                            | Statut                               | Commentaire         |
+| ------------------------------------------------------------------------ | ------------------------------------ | ------------------- |
+| {{SpecName('Service Workers', '#clients', 'Clients')}} | {{Spec2('Service Workers')}} | Définition initial. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Clients.matchAll")}}</p>
+{{Compat("api.Clients.matchAll")}}
diff --git a/files/fr/web/api/clients/openwindow/index.md b/files/fr/web/api/clients/openwindow/index.md
index 1116da97f5..c991c6653c 100644
--- a/files/fr/web/api/clients/openwindow/index.md
+++ b/files/fr/web/api/clients/openwindow/index.md
@@ -3,37 +3,38 @@ title: Clients.openWindow()
 slug: Web/API/Clients/openWindow
 translation_of: Web/API/Clients/openWindow
 ---
-<p>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</p>
+{{SeeCompatTable}}{{APIRef("Service Workers API")}}
 
-<p>La méthode <strong><code>openWindow()</code></strong> de l'interface {{domxref("Clients")}} crée un nouveau niveau de contexte de navigation et charge une URL donnée. Si le script d'origine n'a pas la permission d'ouvrir une popup,   <strong><code>openWindow()</code></strong> lèvera une InvalidAccessError.</p>
+La méthode **`openWindow()`** de l'interface {{domxref("Clients")}} crée un nouveau niveau de contexte de navigation et charge une URL donnée. Si le script d'origine n'a pas la permission d'ouvrir une popup,   **`openWindow()`** lèvera une InvalidAccessError.
 
-<p>Dans Firefox, une méthode est authorisée d'ouvrir une popup seulement lorsqu'elle est appelée à la suite d'un click sur une notification.</p>
+Dans Firefox, une méthode est authorisée d'ouvrir une popup seulement lorsqu'elle est appelée à la suite d'un click sur une notification.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">ServiceWorkerClients.openWindow(url).then(function(WindowClient) {
+```js
+ServiceWorkerClients.openWindow(url).then(function(WindowClient) {
   // Faire quelque chose avec le WindowClient
-});</pre>
+});
+```
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>url</code></dt>
- <dd>Une {{domxref("USVString")}} représentant l'URL que le client veut ouvrir dans une nouvelle fenêtre. Généralement, cette valeur doit être une URL de la même  origine que le script d'origine.</dd>
-</dl>
+- `url`
+  - : Une {{domxref("USVString")}} représentant l'URL que le client veut ouvrir dans une nouvelle fenêtre. Généralement, cette valeur doit être une URL de la même  origine que le script d'origine.
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Une {{jsxref("Promise")}} qui résoud un objet {{domxref("WindowClient")}} si l'URL est de la même origine que le service worker, et {{Glossary("null", "null value")}} sinon.</p>
+Une {{jsxref("Promise")}} qui résoud un objet {{domxref("WindowClient")}} si l'URL est de la même origine que le service worker, et {{Glossary("null", "null value")}} sinon.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: js">// Quand l'utilisateur click sur une notification, focus sur la fenêtre si elle existe,
+```js
+// Quand l'utilisateur click sur une notification, focus sur la fenêtre si elle existe,
 // ou ouvre en une autre.
 onotificationclick = function(event) {
   var found = false;
   clients.matchAll().then(function(clients) {
-    for (i = 0; i &lt; clients.length; i++) {
+    for (i = 0; i < clients.length; i++) {
       if (clients[i].url === event.data.url) {
         // La fenêtre existe, focus dessus.
         found = true;
@@ -49,25 +50,14 @@ onotificationclick = function(event) {
     }
   });
 };
-</pre>
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Service Workers', '#clients', 'Clients')}}</td>
-   <td>{{Spec2('Service Workers')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                            | Statut                               | Commentaire         |
+| ------------------------------------------------------------------------ | ------------------------------------ | ------------------- |
+| {{SpecName('Service Workers', '#clients', 'Clients')}} | {{Spec2('Service Workers')}} | Définition initiale |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Clients.openWindow")}}</p>
+{{Compat("api.Clients.openWindow")}}
diff --git a/files/fr/web/api/clipboard/index.md b/files/fr/web/api/clipboard/index.md
index 2dbef5414b..b9ca3fca06 100644
--- a/files/fr/web/api/clipboard/index.md
+++ b/files/fr/web/api/clipboard/index.md
@@ -13,68 +13,51 @@ tags:
   - Reference
 translation_of: Web/API/Clipboard
 ---
-<p>{{APIRef("Clipboard API")}}</p>
+{{APIRef("Clipboard API")}}
 
-<div class="note">
-<p><strong>Note :</strong> Le <strong>presse-papiers</strong> est un tampon de données utilisé pour le stockage ou le transfert à court terme de données, éventuellement entre documents ou applications. Il est généralement mis en œuvre sous la forme d’une {{interwiki("wikipedia", "Mémoire_tampon", "mémoire tampon")}} temporaire, parfois appelée « tampon de collage », qui peut être accédé par la plupart ou tous les programmes de l’environnement via des {{interwiki("wikipedia", "Interface_de_programmation", "interfaces de programmation")}} définies.</p>
+> **Note :** Le **presse-papiers** est un tampon de données utilisé pour le stockage ou le transfert à court terme de données, éventuellement entre documents ou applications. Il est généralement mis en œuvre sous la forme d’une {{interwiki("wikipedia", "Mémoire_tampon", "mémoire tampon")}} temporaire, parfois appelée « tampon de collage », qui peut être accédé par la plupart ou tous les programmes de l’environnement via des {{interwiki("wikipedia", "Interface_de_programmation", "interfaces de programmation")}} définies.
+>
+> Une application typique accède aux fonctionnalités du presse-papiers en associant des {{interwiki("wikipedia", "Entr%C3%A9es-sorties", "entrées utilisateur")}} telles que des {{interwiki("wikipedia", "Raccourci_clavier", "raccourcis clavier")}}, des éléments de {{interwiki("wikipedia", "Menu_(informatique)", "menus")}}, etc. à ces interfaces.
 
-<p>Une application typique accède aux fonctionnalités du presse-papiers en associant des {{interwiki("wikipedia", "Entr%C3%A9es-sorties", "entrées utilisateur")}} telles que des {{interwiki("wikipedia", "Raccourci_clavier", "raccourcis clavier")}}, des éléments de {{interwiki("wikipedia", "Menu_(informatique)", "menus")}}, etc. à ces interfaces.</p>
-</div>
+L’interface **`Clipboard`** implémente l’[API clipboard](/en-US/docs/Web/API/Clipboard_API), qui fournit — si l’utilisateur ou l’utilisatrice accorde sa permission — un accès en lecture et en écriture au contenu du presse-papiers du système. L’API clipboard peut être utilisée pour implémenter les fonctionnalités couper, copier et coller dans une application web.
 
-<p>L’interface <strong><code>Clipboard</code></strong> implémente l’<a href="/en-US/docs/Web/API/Clipboard_API">API clipboard</a>, qui fournit — si l’utilisateur ou l’utilisatrice accorde sa permission — un accès en lecture et en écriture au contenu du presse-papiers du système. L’API clipboard peut être utilisée pour implémenter les fonctionnalités couper, copier et coller dans une application web.</p>
+Le presse-papiers du système est exposé via la propriété globale {{domxref("Navigator.clipboard")}}.
 
-<p>Le presse-papiers du système est exposé via la propriété globale {{domxref("Navigator.clipboard")}}.</p>
+Les appels aux méthodes de l’objet `Clipboard` échoueront si l’utilisateur ou l’utilisatrice n’a pas accordé les permissions requises en utilisant l’[API permissions](/docs/Web/API/Permissions_API), et la permission `"clipboard-read"` ou `"clipboard-write"` selon le besoin.
 
-<p>Les appels aux méthodes de l’objet <code>Clipboard</code> échoueront si l’utilisateur ou l’utilisatrice n’a pas accordé les permissions requises en utilisant l’<a href="/docs/Web/API/Permissions_API">API permissions</a>, et la permission <code>"clipboard-read"</code> ou <code>"clipboard-write"</code> selon le besoin.</p>
+> **Note :** En réalité, actuellement, les prérequis des navigateurs pour accéder au presse-papiers varient significativement. Veuillez consulter la section {{anch("Clipboard availability")}} pour plus de détails.
 
-<div class="note">
-<p><strong>Note :</strong> En réalité, actuellement, les prérequis des navigateurs pour accéder au presse-papiers varient significativement. Veuillez consulter la section {{anch("Clipboard availability")}} pour plus de détails.</p>
-</div>
+Toutes les méthodes de l’API clipboard fonctionnent de manière asynchrone ; elles renvoient une {{jsxref("Promise")}} qui est résolue une fois que l’accès au presse-papiers a réussi. La promesse est rejetée si l’accès au presse-papiers est refusé.
 
-<p>Toutes les méthodes de l’API clipboard fonctionnent de manière asynchrone ; elles renvoient une {{jsxref("Promise")}} qui est résolue une fois que l’accès au presse-papiers a réussi. La promesse est rejetée si l’accès au presse-papiers est refusé.</p>
+## Méthodes
 
-<h2 id="Méthodes">Méthodes</h2>
+_`Clipboard` est basé sur l’interface {{domxref("EventTarget")}}, et inclut les méthodes de celle-ci._
 
-<p><em><code>Clipboard</code> est basé sur l’interface {{domxref("EventTarget")}}, et inclut les méthodes de celle-ci.</em></p>
+- {{domxref("Clipboard.read()","read()")}}
+  - : Demande des données arbitraires (telles que des images) depuis le presse-papiers, et renvoie une {{jsxref("Promise")}}. Quand les données ont été obtenues, la promesse est résolue avec un objet {{domxref("DataTransfer")}} qui fournit les données.
+- {{domxref("Clipboard.readText()","readText()")}}
+  - : Demande du texte depuis le presse-papiers du système ; renvoie une `Promise` qui est résolue avec une {{domxref("DOMString")}} contenant le texte du presse-papiers une fois disponible.
+- {{domxref("Clipboard.write()","write()")}}
+  - : Écrit des données arbitraires dans le presse-papiers du système. Cette opération asynchrone signale quand elle a terminé en résolvant la `Promise` renvoyée.
+- {{domxref("Clipboard.writeText()","writeText()")}}
+  - : Écrit du texte dans le presse-papiers du système, renvoyant une `Promise` qui est résolue une fois que le texte est entièrement copié dans le presse-papiers.
 
-<dl>
- <dt>{{domxref("Clipboard.read()","read()")}}</dt>
- <dd>Demande des données arbitraires (telles que des images) depuis le presse-papiers, et renvoie une {{jsxref("Promise")}}. Quand les données ont été obtenues, la promesse est résolue avec un objet {{domxref("DataTransfer")}} qui fournit les données.</dd>
- <dt>{{domxref("Clipboard.readText()","readText()")}}</dt>
- <dd>Demande du texte depuis le presse-papiers du système ; renvoie une <code>Promise</code> qui est résolue avec une {{domxref("DOMString")}} contenant le texte du presse-papiers une fois disponible.</dd>
- <dt>{{domxref("Clipboard.write()","write()")}}</dt>
- <dd>Écrit des données arbitraires dans le presse-papiers du système. Cette opération asynchrone signale quand elle a terminé en résolvant la <code>Promise</code> renvoyée.</dd>
- <dt>{{domxref("Clipboard.writeText()","writeText()")}}</dt>
- <dd>Écrit du texte dans le presse-papiers du système, renvoyant une <code>Promise</code> qui est résolue une fois que le texte est entièrement copié dans le presse-papiers.</dd>
-</dl>
+## Disponibilité du presse-papiers
 
-<h2 id="Disponibilité_du_presse-papiers">Disponibilité du presse-papiers</h2>
+L’API clipboard asynchrone est une addition relativement récente, et son processus de mise en œuvre dans les navigateurs n’est pas encore terminé. En raison de questions de sécurité et de complexités techniques, l’intégration de cette API se fait progressivement dans la plupart des navigateurs.
 
-<p>L’API clipboard asynchrone est une addition relativement récente, et son processus de mise en œuvre dans les navigateurs n’est pas encore terminé. En raison de questions de sécurité et de complexités techniques, l’intégration de cette API se fait progressivement dans la plupart des navigateurs.</p>
+Par exemple, Firefox ne supporte pas encore les permissions `"clipboard-read"` et `"clipboard-write"`, et l’accès aux méthodes pour lire et modifier le contenu du presse-papiers sont restreintes d’autres façons.
 
-<p>Par exemple, Firefox ne supporte pas encore les permissions <code>"clipboard-read"</code> et <code>"clipboard-write"</code>, et l’accès aux méthodes pour lire et modifier le contenu du presse-papiers sont restreintes d’autres façons.</p>
+Pour les WebExtensions, vous pouvez demander les permissions `"clipboardRead"` et `"clipboardWrite"` afin de pouvoir utiliser `clipboard.readText()` et `clipboard.writeText()`. Les {{Glossary("Content Script", "scripts de contenu")}} appliqués à des sites HTTP n’ont pas accès à l’objet `Clipboard`. Voir [extensions in Firefox 63](https://blog.mozilla.org/addons/2018/08/31/extensions-in-firefox-63/).
 
-<p>Pour les WebExtensions, vous pouvez demander les permissions <code>"clipboardRead"</code> et <code>"clipboardWrite"</code> afin de pouvoir utiliser <code>clipboard.readText()</code> et <code>clipboard.writeText()</code>. Les {{Glossary("Content Script", "scripts de contenu")}} appliqués à des sites HTTP n’ont pas accès à l’objet <code>Clipboard</code>. Voir <a href="https://blog.mozilla.org/addons/2018/08/31/extensions-in-firefox-63/">extensions in Firefox 63</a>.</p>
+De plus, {{domxref("Clipboard.read", "read()")}} et {{domxref("Clipboard.write", "write()")}} sont désactivées par défaut et requièrent de changer une préférence pour les activer. Consultez les tables de compatibilité de chaque méthode avant de les utiliser.
 
-<p>De plus, {{domxref("Clipboard.read", "read()")}} et {{domxref("Clipboard.write", "write()")}} sont désactivées par défaut et requièrent de changer une préférence pour les activer. Consultez les tables de compatibilité de chaque méthode avant de les utiliser.</p>
+## Spécifications
 
-<h2 id="Spécifications">Spécifications</h2>
+| Spécification                                                                        | Statut                               | Commentaire          |
+| ------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- |
+| {{SpecName('Clipboard API','#clipboard-interface','Clipboard')}} | {{Spec2('Clipboard API')}} | Définition initiale. |
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Clipboard API','#clipboard-interface','Clipboard')}}</td>
-   <td>{{Spec2('Clipboard API')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+## Compatibilité des navigateurs
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Clipboard")}}</p>
+{{Compat("api.Clipboard")}}
diff --git a/files/fr/web/api/clipboard/write/index.md b/files/fr/web/api/clipboard/write/index.md
index 214a32eac6..955bf1f320 100644
--- a/files/fr/web/api/clipboard/write/index.md
+++ b/files/fr/web/api/clipboard/write/index.md
@@ -3,36 +3,33 @@ title: Clipboard.write()
 slug: Web/API/Clipboard/write
 translation_of: Web/API/Clipboard/write
 ---
-<div>{{APIRef("Clipboard API")}}</div>
+{{APIRef("Clipboard API")}}
 
-<p>La methode <strong><code>write()</code></strong> de {{domxref("Clipboard")}} écrie des données arbitraire, comme des images, vers le presse-papier. Elle peut être utilisé pour implémenter une fonctionalité de copier coller.</p>
+La methode **`write()`** de {{domxref("Clipboard")}} écrie des données arbitraire, comme des images, vers le presse-papier. Elle peut être utilisé pour implémenter une fonctionalité de copier coller.
 
-<p>Avant de pouvoir écrire dans le presse-papier, vous devez utiliser <a href="/en-US/docs/Web/API/Permissions_API">Permissions API</a> pour avoir l'autorisation <code>"clipboard-write"</code>.</p>
+Avant de pouvoir écrire dans le presse-papier, vous devez utiliser [Permissions API](/en-US/docs/Web/API/Permissions_API) pour avoir l'autorisation `"clipboard-write"`.
 
-<div class="note">
-<p><strong>Note:</strong> Browser support for the asynchronous clipboard APIs is still in the process of being implemented. Be sure to check the {{anch("Browser compatibility", "compatibility table")}} as well as {{SectionOnPage("/en-US/docs/Web/API/Clipboard", "Clipboard availability")}} for more information.</p>
-</div>
+> **Note :** Browser support for the asynchronous clipboard APIs is still in the process of being implemented. Be sure to check the {{anch("Browser compatibility", "compatibility table")}} as well as {{SectionOnPage("/en-US/docs/Web/API/Clipboard", "Clipboard availability")}} for more information.
 
-<h2 id="Syntax">Syntax</h2>
+## Syntax
 
-<pre class="syntaxbox">var <em>promise</em> = navigator.clipboard.write(<em>dataTransfer</em>)</pre>
+    var promise = navigator.clipboard.write(dataTransfer)
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>dataTransfer</code></dt>
- <dd>Un objet {{domxref("DataTransfer")}} contenant les données à écrire dans le presse-papier.</dd>
-</dl>
+- `dataTransfer`
+  - : Un objet {{domxref("DataTransfer")}} contenant les données à écrire dans le presse-papier.
 
-<h3 id="Return_value">Return value</h3>
+### Return value
 
-<p>Une {{jsxref("Promise")}} qui sera résolut quand les données seront écrite dans le presse papier. Cette promesse est rejetée si l'accés au presse-papier échoue.</p>
+Une {{jsxref("Promise")}} qui sera résolut quand les données seront écrite dans le presse papier. Cette promesse est rejetée si l'accés au presse-papier échoue.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Cette fonction d'exemple remplace l'actuel contenut du presse-papier par le texte spécifié en paramètre.</p>
+Cette fonction d'exemple remplace l'actuel contenut du presse-papier par le texte spécifié en paramètre.
 
-<pre class="brush: js">function setClipboard(text) {
+```js
+function setClipboard(text) {
   let data = new DataTransfer();
 
   data.items.add(text, "text/plain");
@@ -42,29 +39,16 @@ translation_of: Web/API/Clipboard/write
     /* failure */
   });
 }
-</pre>
+```
 
-<p>Le code commence par la creation d'un nouveau objet {{domxref("DataTransfer")}} dans lequel le texte est placé pour être envoyé au presse-papier. {{domxref("DataTransferItemList.add()")}} est appelé pour ajouté le texte à<code>DataTransfer</code>, ensuite <code>write()</code> est appelé, en spécifiant une function d'accomplissement et une fonction d'erreur.</p>
+Le code commence par la creation d'un nouveau objet {{domxref("DataTransfer")}} dans lequel le texte est placé pour être envoyé au presse-papier. {{domxref("DataTransferItemList.add()")}} est appelé pour ajouté le texte à`DataTransfer`, ensuite `write()` est appelé, en spécifiant une function d'accomplissement et une fonction d'erreur.
 
-<h2 id="Specifications">Specifications</h2>
+## Specifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Clipboard API','#h-clipboard-write-data','write()')}}</td>
-   <td>{{Spec2('Clipboard API')}}</td>
-   <td>Initial definition.</td>
-  </tr>
- </tbody>
-</table>
+| Specification                                                                            | Status                               | Comment             |
+| ---------------------------------------------------------------------------------------- | ------------------------------------ | ------------------- |
+| {{SpecName('Clipboard API','#h-clipboard-write-data','write()')}} | {{Spec2('Clipboard API')}} | Initial definition. |
 
-<h2 id="Browser_compatibility">Browser compatibility</h2>
+## Browser compatibility
 
-
-
-<p>{{Compat("api.Clipboard.write")}}</p>
+{{Compat("api.Clipboard.write")}}
diff --git a/files/fr/web/api/clipboard/writetext/index.md b/files/fr/web/api/clipboard/writetext/index.md
index 93b7310625..226177f104 100644
--- a/files/fr/web/api/clipboard/writetext/index.md
+++ b/files/fr/web/api/clipboard/writetext/index.md
@@ -3,57 +3,43 @@ title: Clipboard.writeText()
 slug: Web/API/Clipboard/writeText
 translation_of: Web/API/Clipboard/writeText
 ---
-<div>{{APIRef("Clipboard API")}}</div>
+{{APIRef("Clipboard API")}}
 
-<p>La méthode <strong><code>writeText()</code></strong> de l’interface {{domxref("Clipboard")}} écrit le texte spécifié dans le presse-papiers du système.</p>
+La méthode **`writeText()`** de l’interface {{domxref("Clipboard")}} écrit le texte spécifié dans le presse-papiers du système.
 
-<div class="note">
-<p><strong>Note :</strong> La spécification requiert que l’<a href="/en-US/docs/Web/API/Permissions_API">API Permissions</a> soit utilisée pour obtenir la permission <code>"clipboardWrite"</code> avant d’écrire dans le presse-papiers. Cependant, les prérequis exacts varient de navigateur en navigateur, car c’est une API récente. Consultez la {{anch("Browser compatibility", "table de compatibilité")}} et {{SectionOnPage("/docs/Web/API/Clipboard", "Clipboard availability")}} pour plus de détails.</p>
-</div>
+> **Note :** La spécification requiert que l’[API Permissions](/en-US/docs/Web/API/Permissions_API) soit utilisée pour obtenir la permission `"clipboardWrite"` avant d’écrire dans le presse-papiers. Cependant, les prérequis exacts varient de navigateur en navigateur, car c’est une API récente. Consultez la {{anch("Browser compatibility", "table de compatibilité")}} et {{SectionOnPage("/docs/Web/API/Clipboard", "Clipboard availability")}} pour plus de détails.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var <em>promesse</em> = navigator.clipboard.writeText(<em>nouveauTexte</em>)</pre>
+    var promesse = navigator.clipboard.writeText(nouveauTexte)
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>nouveauTexte</code></dt>
- <dd>La {{domxref("DOMString")}} devant être écrite dans le presse-papiers.</dd>
-</dl>
+- `nouveauTexte`
+  - : La {{domxref("DOMString")}} devant être écrite dans le presse-papiers.
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Une {{jsxref("Promise")}} qui sera résolue une fois que le contenu du presse-papiers aura été mis à jour. La promesse est rejetée si le code appelant n’a pas la permission d’écrire dans le presse-papiers.</p>
+Une {{jsxref("Promise")}} qui sera résolue une fois que le contenu du presse-papiers aura été mis à jour. La promesse est rejetée si le code appelant n’a pas la permission d’écrire dans le presse-papiers.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Cet exemple définit le contenu du presse-papiers comme la chaîne "&lt;presse-papiers vide&gt;".</p>
+Cet exemple définit le contenu du presse-papiers comme la chaîne "\<presse-papiers vide>".
 
-<pre class="brush: js">navigator.clipboard.writeText("&lt;presse-papiers vide&gt;").then(function() {
+```js
+navigator.clipboard.writeText("<presse-papiers vide>").then(function() {
   /* presse-papiers modifié avec succès */
 }, function() {
   /* échec de l’écriture dans le presse-papiers */
 });
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Clipboard API','#h-clipboard-writetext-data','writeText()')}}</td>
-   <td>{{Spec2('Clipboard API')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Clipboard.writeText")}}</p>
+```
+
+## Spécifications
+
+| Spécification                                                                                    | Statut                               | Commentaire          |
+| ------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- |
+| {{SpecName('Clipboard API','#h-clipboard-writetext-data','writeText()')}} | {{Spec2('Clipboard API')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Clipboard.writeText")}}
diff --git a/files/fr/web/api/clipboard_api/index.md b/files/fr/web/api/clipboard_api/index.md
index bef8e4bafd..bdd7d9543c 100644
--- a/files/fr/web/api/clipboard_api/index.md
+++ b/files/fr/web/api/clipboard_api/index.md
@@ -1,61 +1,60 @@
 ---
 title: API Clipboard
 slug: Web/API/Clipboard_API
-translation_of: 'Web/API/Clipboard_API'
+translation_of: Web/API/Clipboard_API
 ---
-<div>{{DefaultAPISidebar("Clipboard API")}}</div>
+{{DefaultAPISidebar("Clipboard API")}}
 
-<p>L'<strong>API Clipboard</strong> (en français : API Presse-papiers) fournit la possibilité de répondre aux commandes du presse-papiers (couper, copier et coller) ainsi que de lire et écrire sur le presse-papiers système de façon asynchrone. L'accès aux contenus du presse-papiers est protégé par l'<a href="/fr/docs/Web/API/Permissions_API">API Permissions</a> : la permission <code>clipboard-write</code> est donnée automatiquement aux pages lorsqu'elles sont dans l'onglet actif. La permission <code>clipboard-read</code> doit quant à elle être demandée, ce que vous pouvez faire en tentant de lire les données du presse-papiers.</p>
+L'**API Clipboard** (en français : API Presse-papiers) fournit la possibilité de répondre aux commandes du presse-papiers (couper, copier et coller) ainsi que de lire et écrire sur le presse-papiers système de façon asynchrone. L'accès aux contenus du presse-papiers est protégé par l'[API Permissions](/fr/docs/Web/API/Permissions_API) : la permission `clipboard-write` est donnée automatiquement aux pages lorsqu'elles sont dans l'onglet actif. La permission `clipboard-read` doit quant à elle être demandée, ce que vous pouvez faire en tentant de lire les données du presse-papiers.
 
-<div class="note">
-<p><strong>Note :</strong> Cette API <em>n'est pas disponible</em> dans les <a href="/fr/docs/Web/API/Web_Workers_API">Web Workers</a> (elle n'est pas exposée via {{domxref("WorkerNavigator")}}).</p>
-</div>
+> **Note :** Cette API _n'est pas disponible_ dans les [Web Workers](/fr/docs/Web/API/Web_Workers_API) (elle n'est pas exposée via {{domxref("WorkerNavigator")}}).
 
-<p>Cette API est conçue pour remplacer l'accès au presse-papiers précédemment proposé via {{domxref("document.execCommand()")}}.</p>
+Cette API est conçue pour remplacer l'accès au presse-papiers précédemment proposé via {{domxref("document.execCommand()")}}.
 
-<h2 id="accessing_the_clipboard">Accéder au presse-papier</h2>
+## Accéder au presse-papier
 
-<p>Au lieu de créer un objet <code>Clipboard</code> lors de l'instanciation, vous pouvez accéder au presse-papier du système avec la globale {{domxref("Navigator.clipboard")}} :</p>
+Au lieu de créer un objet `Clipboard` lors de l'instanciation, vous pouvez accéder au presse-papier du système avec la globale {{domxref("Navigator.clipboard")}} :
 
-<pre class="brush: js">navigator.clipboard.readText().then(
-  clipText =&gt; document.querySelector(".editor").innerText += clipText);</pre>
+```js
+navigator.clipboard.readText().then(
+  clipText => document.querySelector(".editor").innerText += clipText);
+```
 
-<p>Ce bout de code analyse le texte à partir du presse-papiers et l'insère après le premier élément trouvé comportant la classe <code>editor</code>. Puisque {{domxref("Clipboard.readText", "readText()")}} (sans oublier {{domxref("Clipboard.read", "read()")}}) retournent une chaîne vide si le contenu du presse-papier n'est pas textuel, ce code est sécurisé.</p>
+Ce bout de code analyse le texte à partir du presse-papiers et l'insère après le premier élément trouvé comportant la classe `editor`. Puisque {{domxref("Clipboard.readText", "readText()")}} (sans oublier {{domxref("Clipboard.read", "read()")}}) retournent une chaîne vide si le contenu du presse-papier n'est pas textuel, ce code est sécurisé.
 
-<h2 id="interfaces">Interfaces</h2>
+## Interfaces
 
-<dl>
-  <dt>{{domxref("Clipboard")}} {{securecontext_inline}}</dt>
-  <dd>Fournit une interface pour la lecture et l'écriture de texte et de données sur le presse-papiers du système. La spécification s'y réfère avec le terme "Async Clipboard API".</dd>
-  <dt>{{domxref("ClipboardEvent")}} {{securecontext_inline}}</dt>
-  <dd>Représente les évènements fournissant l'information relative à la modification du presse-papiers, qui peut être l'évènement {{domxref("Element/cut_event", "cut")}}, {{domxref("Element/copy_event", "copy")}} ou {{domxref("Element/paste_event", "paste")}}. La spécification s'y réfère avec le terme "Clipboard Event API".</dd>
-  <dt>{{domxref("ClipboardItem")}} {{securecontext_inline}}</dt>
-  <dd>Représente un format de terme unique utilisé pour lire ou écrire des données.</dd>
-</dl>
+- {{domxref("Clipboard")}} {{securecontext_inline}}
+  - : Fournit une interface pour la lecture et l'écriture de texte et de données sur le presse-papiers du système. La spécification s'y réfère avec le terme "Async Clipboard API".
+- {{domxref("ClipboardEvent")}} {{securecontext_inline}}
+  - : Représente les évènements fournissant l'information relative à la modification du presse-papiers, qui peut être l'évènement {{domxref("Element/cut_event", "cut")}}, {{domxref("Element/copy_event", "copy")}} ou {{domxref("Element/paste_event", "paste")}}. La spécification s'y réfère avec le terme "Clipboard Event API".
+- {{domxref("ClipboardItem")}} {{securecontext_inline}}
+  - : Représente un format de terme unique utilisé pour lire ou écrire des données.
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<p>{{Specifications("api.Clipboard")}}</p>
+{{Specifications("api.Clipboard")}}
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<h3 id="clipboard">Clipboard</h3>
+### Clipboard
 
-<p>{{Compat("api.Clipboard")}}</p>
+{{Compat("api.Clipboard")}}
 
-<h3 id="clipboardevent">ClipboardEvent</h3>
+### ClipboardEvent
 
-<p>{{Compat("api.ClipboardEvent")}}</p>
+{{Compat("api.ClipboardEvent")}}
 
-<h3 id="clipboarditem">ClipboardItem</h3>
+### ClipboardItem
 
-<p>{{Compat("api.ClipboardItem")}}</p>
+{{Compat("api.ClipboardItem")}}
 
-<h2 id="see_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li><a href="https://async-clipboard-api.glitch.me/">Démonstration de l'API Async Clipboard sur Glitch (en anglais)</a></li>
-  <li><a href="https://web.dev/image-support-for-async-clipboard/"><i lang="en">Image support for Async Clipboard article</i> (en anglais)</a></li>
-  <li><a href="/fr/docs/Web/API/Permissions_API">API Permissions</a></li>
-  <li><a href="/fr/docs/Web/API/Permissions_API/Using_the_Permissions_API">Utiliser l'API Permissions</a></li>
-</ul>
+- [Démonstration de l'API Async Clipboard sur Glitch (en anglais)](https://async-clipboard-api.glitch.me/)
+- <i lang="en">Image support for Async Clipboard article</i>
+
+  [<i lang="en">Image support for Async Clipboard article</i> (en anglais)](https://web.dev/image-support-for-async-clipboard/)
+
+- [API Permissions](/fr/docs/Web/API/Permissions_API)
+- [Utiliser l'API Permissions](/fr/docs/Web/API/Permissions_API/Using_the_Permissions_API)
diff --git a/files/fr/web/api/closeevent/index.md b/files/fr/web/api/closeevent/index.md
index 3873ad5d76..f891301908 100644
--- a/files/fr/web/api/closeevent/index.md
+++ b/files/fr/web/api/closeevent/index.md
@@ -9,171 +9,212 @@ tags:
   - WebSocket
 translation_of: Web/API/CloseEvent
 ---
-<p>{{APIRef("Websockets API")}}</p>
-
-<p>Un événement CloseEvent est envoyé au client utilisant une <a href="/en-US/docs/Glossary/WebSockets">WebSocket </a>lorsque la connexion est fermée. Cet événement est envoyé au listener indiqué par l'attribut <code>onclose </code>de la WebSocket.</p>
-
-<h2 id="Attributes">Constructeur</h2>
-
-<dl>
- <dt>{{domxref("CloseEvent.CloseEvent", "CloseEvent()")}}</dt>
- <dd>Construit un nouvel événement <code>CloseEvent</code>.</dd>
-</dl>
-
-<h2 id="Attributes">Propriétés</h2>
-
-<p><em>Cette interface hérite également des propriétés de sa mère, {{domxref("Event")}}.</em></p>
-
-<dl>
- <dt>{{domxref("CloseEvent.code")}} {{readOnlyInline}}</dt>
- <dd>Retourne un <code>unsigned short</code> contenant le code de fermeture envoyé par le serveur. Les valeurs possibles sont données ci-dessous.
- <table class="standard-table">
-  <tbody>
-   <tr>
-    <td class="header">Status code</td>
-    <td class="header">Nom</td>
-    <td class="header">Description</td>
-   </tr>
-   <tr>
-    <td><code>0</code>–<code>999</code></td>
-    <td> </td>
-    <td><strong>Reservé et inutilisé.</strong></td>
-   </tr>
-   <tr>
-    <td><code>1000</code></td>
-    <td><code>CLOSE_NORMAL</code></td>
-    <td>Fermeture normale ; la connexion s'est terminée normalement.</td>
-   </tr>
-   <tr>
-    <td><code>1001</code></td>
-    <td><code>CLOSE_GOING_AWAY</code></td>
-    <td>
-     <p>Reçu lorsque une erreur est apparue sur le serveur ou le navigateur quitte la page ayant ouvert la connexion.</p>
-    </td>
-   </tr>
-   <tr>
-    <td><code>1002</code></td>
-    <td><code>CLOSE_PROTOCOL_ERROR</code></td>
-    <td>L'autre partie de la connexion termine la connexion à cause d'une erreur de protocole.</td>
-   </tr>
-   <tr>
-    <td><code>1003</code></td>
-    <td><code>CLOSE_UNSUPPORTED</code></td>
-    <td>La connexion est terminée car le serveur à reçu des données d'un type qu'il ne peut pas accepter (par exemple des données binaire plutôt que du texte).</td>
-   </tr>
-   <tr>
-    <td><code>1004</code></td>
-    <td> </td>
-    <td><strong>Réservé.</strong> Une utilisation pourrait être définie dans le futur.</td>
-   </tr>
-   <tr>
-    <td><code>1005</code></td>
-    <td><code>CLOSE_NO_STATUS</code></td>
-    <td><strong>Réservé.</strong> Indique qu'aucun code n'est donné bien qu'un code était attendu.</td>
-   </tr>
-   <tr>
-    <td><code>1006</code></td>
-    <td><code>CLOSE_ABNORMAL</code></td>
-    <td><strong>Réservé.</strong> Utilisé pour indiquer que la connexion a été terminée anormalement (sans paquet indiquant la fermeture).</td>
-   </tr>
-   <tr>
-    <td><code>1007</code></td>
-    <td> </td>
-    <td>Le serveur termine la connexion car un message contenant des données incohérentes a été reçu (e.g., des données qui ne sont pas au format UTF-8 dans un message texte).</td>
-   </tr>
-   <tr>
-    <td><code>1008</code></td>
-    <td> </td>
-    <td>Le serveur termine la connexion car un message ne respectant pas la politique du serveur est reçu. C'est un code d'état générique qui est utilisé lorsque les codes 1003 et 1009 ne correspondent pas à la situation.</td>
-   </tr>
-   <tr>
-    <td><code>1009</code></td>
-    <td><code>CLOSE_TOO_LARGE</code></td>
-    <td>Le serveur termine la connexion car les données reçues sont trop grosses.</td>
-   </tr>
-   <tr>
-    <td><code>1010</code></td>
-    <td> </td>
-    <td>Le client termine la connexion car il souhaitait négocier une ou plusieurs extensions mais le serveur ne l'a pas fait.</td>
-   </tr>
-   <tr>
-    <td><code>1011</code></td>
-    <td> </td>
-    <td>Le serveur termine la connexion car il a rencontré un problème qui l'empêche de traiter la requête.</td>
-   </tr>
-   <tr>
-    <td>–<code>1014</code></td>
-    <td> </td>
-    <td><strong>Réservé pour une utilisation future par le standard WebSocket.</strong></td>
-   </tr>
-   <tr>
-    <td><code>1015</code></td>
-    <td> </td>
-    <td><strong>Réservé.</strong> Indique que la connexion a été fermée à cause d'une erreur durant le handshake TLS (e.g., le certificat du serveur ne peut pas être vérifié).</td>
-   </tr>
-   <tr>
-    <td><code>1016</code>–<code>1999</code></td>
-    <td> </td>
-    <td><strong>Réservé pour une utilisation future par le standard WebSocket.</strong></td>
-   </tr>
-   <tr>
-    <td><code>2000</code>–<code>2999</code></td>
-    <td> </td>
-    <td><strong>Réservé pour une utilisation future par le standard WebSocket.</strong></td>
-   </tr>
-   <tr>
-    <td><code>3000</code>–<code>3999</code></td>
-    <td> </td>
-    <td>Disponible pour être utilisé par des bibliothèques ou des frameworks. Ces codes <strong>ne doivent pas</strong> être utilisés par des applications.</td>
-   </tr>
-   <tr>
-    <td><code>4000</code>–<code>4999</code></td>
-    <td> </td>
-    <td>Disponible pour être utilisés par des applications.</td>
-   </tr>
-  </tbody>
- </table>
- </dd>
- <dt>{{domxref("CloseEvent.reason")}} {{readOnlyInline}}</dt>
- <dd>Retourne un {{ domxref("DOMString") }} qui indique la raison pour laquelle le serveur a fermé la connexion. Ce message est spécifique au serveur et au sous-protocole utilisé.</dd>
- <dt>{{domxref("CloseEvent.wasClean")}} {{readOnlyInline}}</dt>
- <dd>Retourne un {{jsxref("Boolean")}} qui indique si la connexion a été correctement fermée ou non.</dd>
-</dl>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<p><em>Cette interface hérite également des propriétés de sa mère, {{domxref("Event")}}.</em></p>
-
-<dl>
- <dt>{{domxref("CloseEvent.initCloseEvent()")}} {{Non-standard_inline}} {{Obsolete_inline}}</dt>
- <dd>Initialise la valeur d'un <code>CloseEvent</code>. Si l'événement a déjà été envoyé, cette méthode ne fait rien.</dd>
-</dl>
-
-<h2 id="Specifications">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', 'web-sockets.html#the-closeevent-interface', 'CloseEvent') }}</td>
-      <td>{{ Spec2('HTML WHATWG') }}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.CloseEvent")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
-  <li>{{domxref("WebSocket")}}</li>
-</ul>
+{{APIRef("Websockets API")}}
+
+Un événement CloseEvent est envoyé au client utilisant une [WebSocket ](/en-US/docs/Glossary/WebSockets)lorsque la connexion est fermée. Cet événement est envoyé au listener indiqué par l'attribut `onclose `de la WebSocket.
+
+## Constructeur
+
+- {{domxref("CloseEvent.CloseEvent", "CloseEvent()")}}
+  - : Construit un nouvel événement `CloseEvent`.
+
+## Propriétés
+
+_Cette interface hérite également des propriétés de sa mère, {{domxref("Event")}}._
+
+- {{domxref("CloseEvent.code")}} {{readOnlyInline}}
+
+  - : Retourne un `unsigned short` contenant le code de fermeture envoyé par le serveur. Les valeurs possibles sont données ci-dessous.
+
+    <table class="standard-table">
+      <tbody>
+        <tr>
+          <td class="header">Status code</td>
+          <td class="header">Nom</td>
+          <td class="header">Description</td>
+        </tr>
+        <tr>
+          <td><code>0</code>–<code>999</code></td>
+          <td> </td>
+          <td><strong>Reservé et inutilisé.</strong></td>
+        </tr>
+        <tr>
+          <td><code>1000</code></td>
+          <td><code>CLOSE_NORMAL</code></td>
+          <td>Fermeture normale ; la connexion s'est terminée normalement.</td>
+        </tr>
+        <tr>
+          <td><code>1001</code></td>
+          <td><code>CLOSE_GOING_AWAY</code></td>
+          <td>
+            <p>
+              Reçu lorsque une erreur est apparue sur le serveur ou le navigateur
+              quitte la page ayant ouvert la connexion.
+            </p>
+          </td>
+        </tr>
+        <tr>
+          <td><code>1002</code></td>
+          <td><code>CLOSE_PROTOCOL_ERROR</code></td>
+          <td>
+            L'autre partie de la connexion termine la connexion à cause d'une erreur
+            de protocole.
+          </td>
+        </tr>
+        <tr>
+          <td><code>1003</code></td>
+          <td><code>CLOSE_UNSUPPORTED</code></td>
+          <td>
+            La connexion est terminée car le serveur à reçu des données d'un type
+            qu'il ne peut pas accepter (par exemple des données binaire plutôt que
+            du texte).
+          </td>
+        </tr>
+        <tr>
+          <td><code>1004</code></td>
+          <td> </td>
+          <td>
+            <strong>Réservé.</strong> Une utilisation pourrait être définie dans le
+            futur.
+          </td>
+        </tr>
+        <tr>
+          <td><code>1005</code></td>
+          <td><code>CLOSE_NO_STATUS</code></td>
+          <td>
+            <strong>Réservé.</strong> Indique qu'aucun code n'est donné bien qu'un
+            code était attendu.
+          </td>
+        </tr>
+        <tr>
+          <td><code>1006</code></td>
+          <td><code>CLOSE_ABNORMAL</code></td>
+          <td>
+            <strong>Réservé.</strong> Utilisé pour indiquer que la connexion a été
+            terminée anormalement (sans paquet indiquant la fermeture).
+          </td>
+        </tr>
+        <tr>
+          <td><code>1007</code></td>
+          <td> </td>
+          <td>
+            Le serveur termine la connexion car un message contenant des données
+            incohérentes a été reçu (e.g., des données qui ne sont pas au format
+            UTF-8 dans un message texte).
+          </td>
+        </tr>
+        <tr>
+          <td><code>1008</code></td>
+          <td> </td>
+          <td>
+            Le serveur termine la connexion car un message ne respectant pas la
+            politique du serveur est reçu. C'est un code d'état générique qui est
+            utilisé lorsque les codes 1003 et 1009 ne correspondent pas à la
+            situation.
+          </td>
+        </tr>
+        <tr>
+          <td><code>1009</code></td>
+          <td><code>CLOSE_TOO_LARGE</code></td>
+          <td>
+            Le serveur termine la connexion car les données reçues sont trop
+            grosses.
+          </td>
+        </tr>
+        <tr>
+          <td><code>1010</code></td>
+          <td> </td>
+          <td>
+            Le client termine la connexion car il souhaitait négocier une ou
+            plusieurs extensions mais le serveur ne l'a pas fait.
+          </td>
+        </tr>
+        <tr>
+          <td><code>1011</code></td>
+          <td> </td>
+          <td>
+            Le serveur termine la connexion car il a rencontré un problème qui
+            l'empêche de traiter la requête.
+          </td>
+        </tr>
+        <tr>
+          <td>–<code>1014</code></td>
+          <td> </td>
+          <td>
+            <strong
+              >Réservé pour une utilisation future par le standard
+              WebSocket.</strong
+            >
+          </td>
+        </tr>
+        <tr>
+          <td><code>1015</code></td>
+          <td> </td>
+          <td>
+            <strong>Réservé.</strong> Indique que la connexion a été fermée à cause
+            d'une erreur durant le handshake TLS (e.g., le certificat du serveur ne
+            peut pas être vérifié).
+          </td>
+        </tr>
+        <tr>
+          <td><code>1016</code>–<code>1999</code></td>
+          <td> </td>
+          <td>
+            <strong
+              >Réservé pour une utilisation future par le standard
+              WebSocket.</strong
+            >
+          </td>
+        </tr>
+        <tr>
+          <td><code>2000</code>–<code>2999</code></td>
+          <td> </td>
+          <td>
+            <strong
+              >Réservé pour une utilisation future par le standard
+              WebSocket.</strong
+            >
+          </td>
+        </tr>
+        <tr>
+          <td><code>3000</code>–<code>3999</code></td>
+          <td> </td>
+          <td>
+            Disponible pour être utilisé par des bibliothèques ou des frameworks.
+            Ces codes <strong>ne doivent pas</strong> être utilisés par des
+            applications.
+          </td>
+        </tr>
+        <tr>
+          <td><code>4000</code>–<code>4999</code></td>
+          <td> </td>
+          <td>Disponible pour être utilisés par des applications.</td>
+        </tr>
+      </tbody>
+    </table>
+
+- {{domxref("CloseEvent.reason")}} {{readOnlyInline}}
+  - : Retourne un {{ domxref("DOMString") }} qui indique la raison pour laquelle le serveur a fermé la connexion. Ce message est spécifique au serveur et au sous-protocole utilisé.
+- {{domxref("CloseEvent.wasClean")}} {{readOnlyInline}}
+  - : Retourne un {{jsxref("Boolean")}} qui indique si la connexion a été correctement fermée ou non.
+
+## Méthodes
+
+_Cette interface hérite également des propriétés de sa mère, {{domxref("Event")}}._
+
+- {{domxref("CloseEvent.initCloseEvent()")}} {{Non-standard_inline}} {{Obsolete_inline}}
+  - : Initialise la valeur d'un `CloseEvent`. Si l'événement a déjà été envoyé, cette méthode ne fait rien.
+
+## Spécifications
+
+| Spécification                                                                                                        | Statut                               | Commentaire          |
+| -------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{ SpecName('HTML WHATWG', 'web-sockets.html#the-closeevent-interface', 'CloseEvent') }} | {{ Spec2('HTML WHATWG') }} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.CloseEvent")}}
+
+## Voir aussi
+
+- {{domxref("WebSocket")}}
diff --git a/files/fr/web/api/comment/comment/index.md b/files/fr/web/api/comment/comment/index.md
index 8e4017c0d3..c487b14422 100644
--- a/files/fr/web/api/comment/comment/index.md
+++ b/files/fr/web/api/comment/comment/index.md
@@ -7,47 +7,31 @@ tags:
   - DOM
 translation_of: Web/API/Comment/Comment
 ---
-<p>{{ApiRef("DOM")}}{{seeCompatTable}}</p>
+{{ApiRef("DOM")}}{{seeCompatTable}}
 
-<p>Le constructeur <code><strong>Comment()</strong></code> renvoie un objet {{domxref("Comment")}} <em>(Commentaire)</em> nouvellement créé avec le {{domxref ("DOMString")}} donné en paramètre comme contenu textuel.</p>
+Le constructeur **`Comment()`** renvoie un objet {{domxref("Comment")}} _(Commentaire)_ nouvellement créé avec le {{domxref ("DOMString")}} donné en paramètre comme contenu textuel.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>comment</em>1 = new Comment(); // Create an empty comment
-<code><em>comment2</em></code> = new Comment("This is a comment");
-</pre>
+    comment1 = new Comment(); // Create an empty comment
+    comment2 = new Comment("This is a comment");
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">var comment = new Comment("Test");</pre>
+```js
+var comment = new Comment("Test");
+```
 
-<h2 id="Specification">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#comment', 'Comment.Comment()')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                    | Statut                           | Commentaire          |
+| -------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName('DOM WHATWG', '#comment', 'Comment.Comment()')}} | {{Spec2('DOM WHATWG')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
+{{Compat("api.Comment.Comment")}}
 
+## Voir aussi
 
-<p>{{Compat("api.Comment.Comment")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/Document_Object_Model">The DOM interfaces index</a></li>
-</ul>
-
-<p> </p>
+- [The DOM interfaces index](/fr/docs/Web/API/Document_Object_Model)
diff --git a/files/fr/web/api/comment/index.md b/files/fr/web/api/comment/index.md
index 804bd44d58..40f4ebe0de 100644
--- a/files/fr/web/api/comment/index.md
+++ b/files/fr/web/api/comment/index.md
@@ -6,65 +6,38 @@ tags:
   - DOM
 translation_of: Web/API/Comment
 ---
-<p>{{ ApiRef("DOM") }}</p>
+{{ ApiRef("DOM") }}
 
-<p>L'interface <code><strong>Comment</strong></code> représente des annotations textuelles au sein du balisage; même si elles ne sont généralement pas montrées, elles sont disponibles à la lecture dans le code source. Les commentaires sont représentés en HTML et XML avec du contenu entre cette balise '<code>&lt;!--</code>' et celle ci '<code>--&gt;</code>'. Pour XML, la séquence de caractère suivante '<code>--</code>' ne peut être utilisée dans un commentaire.</p>
+L'interface **`Comment`** représente des annotations textuelles au sein du balisage; même si elles ne sont généralement pas montrées, elles sont disponibles à la lecture dans le code source. Les commentaires sont représentés en HTML et XML avec du contenu entre cette balise '`<!--`' et celle ci '`-->`'. Pour XML, la séquence de caractère suivante '`--`' ne peut être utilisée dans un commentaire.
 
-<p>{{InheritanceDiagram}}</p>
+{{InheritanceDiagram}}
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<p><em>Cette interface ne possède pas de propriétés spécifiques, mais en hérite de ses parents, {{domxref("CharacterData")}} et indirectement de {{domxref("Node")}}.</em></p>
+_Cette interface ne possède pas de propriétés spécifiques, mais en hérite de ses parents, {{domxref("CharacterData")}} et indirectement de {{domxref("Node")}}._
 
-<h2 id="Constructeur">Constructeur</h2>
+## Constructeur
 
-<dl>
- <dt>{{ domxref("Comment.Comment()", "Comment()") }} {{experimental_inline}}</dt>
- <dd>Retourne un objet <code>Comment</code> avec son contenu textuel en paramètre.</dd>
-</dl>
+- {{ domxref("Comment.Comment()", "Comment()") }} {{experimental_inline}}
+  - : Retourne un objet `Comment` avec son contenu textuel en paramètre.
 
-<h2 id="Méthodes">Méthodes</h2>
+## Méthodes
 
-<p><em>Cette interface ne possède pas de méthode spécifique, mais en hérite de ses parents, {{domxref("CharacterData")}} et indirectement de {{domxref("Node")}}.</em></p>
+_Cette interface ne possède pas de méthode spécifique, mais en hérite de ses parents, {{domxref("CharacterData")}} et indirectement de {{domxref("Node")}}._
 
-<h2 id="Specification">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#comment', 'Comment')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Ajoute le constructeur.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM3 Core', 'core.html#ID-1728279322', 'Comment')}}</td>
-   <td>{{Spec2('DOM3 Core')}}</td>
-   <td>Pas de changement à partir de {{SpecName('DOM2 Core')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Core', 'core.html#ID-1728279322', 'Comment')}}</td>
-   <td>{{Spec2('DOM2 Core')}}</td>
-   <td>Pas de changement à partir de {{SpecName('DOM1')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM1', 'level-one-core.html#ID-1728279322', 'Comment')}}</td>
-   <td>{{Spec2('DOM1')}}</td>
-   <td>Définition initale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                | Statut                           | Commentaire                                                    |
+| -------------------------------------------------------------------------------------------- | -------------------------------- | -------------------------------------------------------------- |
+| {{SpecName('DOM WHATWG', '#comment', 'Comment')}}                             | {{Spec2('DOM WHATWG')}} | Ajoute le constructeur.                                        |
+| {{SpecName('DOM3 Core', 'core.html#ID-1728279322', 'Comment')}}         | {{Spec2('DOM3 Core')}}     | Pas de changement à partir de {{SpecName('DOM2 Core')}} |
+| {{SpecName('DOM2 Core', 'core.html#ID-1728279322', 'Comment')}}         | {{Spec2('DOM2 Core')}}     | Pas de changement à partir de {{SpecName('DOM1')}}     |
+| {{SpecName('DOM1', 'level-one-core.html#ID-1728279322', 'Comment')}} | {{Spec2('DOM1')}}         | Définition initale                                             |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Comment")}}</p>
+{{Compat("api.Comment")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a></li>
-</ul>
+- [The DOM interfaces index](/en-US/docs/DOM/DOM_Reference)
diff --git a/files/fr/web/api/compositionevent/index.md b/files/fr/web/api/compositionevent/index.md
index cf94e5b643..f91b5a3815 100644
--- a/files/fr/web/api/compositionevent/index.md
+++ b/files/fr/web/api/compositionevent/index.md
@@ -7,73 +7,46 @@ tags:
   - Evènement
 translation_of: Web/API/CompositionEvent
 ---
-<p>{{APIRef("DOM Events")}}</p>
+{{APIRef("DOM Events")}}
 
-<p>Le <code>CompositionEvent DOM</code> représente les évènements qui se produisent en raison de l'utilisateur entrant indirectement le texte.</p>
+Le `CompositionEvent DOM` représente les évènements qui se produisent en raison de l'utilisateur entrant indirectement le texte.
 
-<h2 id="Constructeur">Constructeur</h2>
+## Constructeur
 
-<dl>
- <dt>{{domxref("CompositionEvent.CompositionEvent()", "CompositionEvent()")}}</dt>
- <dd>Crée une nouvelle instance d'objet <code>CompositionEvent</code> .</dd>
-</dl>
+- {{domxref("CompositionEvent.CompositionEvent()", "CompositionEvent()")}}
+  - : Crée une nouvelle instance d'objet `CompositionEvent` .
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<p><em>Cette interface hérite également des propriétés de son parent, {{domxref("UIEvent")}} et son ancêtre — {{domxref("Event")}}.</em></p>
+_Cette interface hérite également des propriétés de son parent, {{domxref("UIEvent")}} et son ancêtre — {{domxref("Event")}}._
 
-<dl>
- <dt>{{domxref("CompositionEvent.data")}} {{readonlyinline}}</dt>
- <dd>Renvoie les caractères générés par la méthode d'entrée qui a relevé l'événement ; cela varie en fonction du type d'événement ayant généré l'objet <code>CompositionEvent</code>.</dd>
- <dt>{{domxref("CompositionEvent.locale")}} {{readonlyinline}} {{deprecated_inline}}</dt>
- <dd>Renvoie les paramètres régionaux de la méthode de saisie actuelle (par exemple, les paramètres régionaux de disposition du clavier si la composition est associée à IME).</dd>
-</dl>
+- {{domxref("CompositionEvent.data")}} {{readonlyinline}}
+  - : Renvoie les caractères générés par la méthode d'entrée qui a relevé l'événement ; cela varie en fonction du type d'événement ayant généré l'objet `CompositionEvent`.
+- {{domxref("CompositionEvent.locale")}} {{readonlyinline}} {{deprecated_inline}}
+  - : Renvoie les paramètres régionaux de la méthode de saisie actuelle (par exemple, les paramètres régionaux de disposition du clavier si la composition est associée à IME).
 
-<h2 id="Méthodes">Méthodes</h2>
+## Méthodes
 
-<p><em>Cette interface hérite également des méthodes de son parent, {{domxref("UIEvent")}} et son ancêtre — {{domxref("Event")}}.</em></p>
+_Cette interface hérite également des méthodes de son parent, {{domxref("UIEvent")}} et son ancêtre — {{domxref("Event")}}._
 
-<dl>
- <dt>{{domxref("CompositionEvent.initCompositionEvent()")}} {{deprecated_inline}}</dt>
- <dd>Initialise les attributs d'un objet <code>CompositionEvent.</code></dd>
-</dl>
+- {{domxref("CompositionEvent.initCompositionEvent()")}} {{deprecated_inline}}
+  - : Initialise les attributs d'un objet `CompositionEvent.`
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('UI Events', '#interface-compositionevent', 'CompositionEvent')}}</td>
-   <td>{{Spec2('UI Events')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM3 Events', '#idl-compositionevent', 'CompositionEvent')}}</td>
-   <td>{{Spec2('DOM3 Events')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                        | Statut                           | Commentaire |
+| ---------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- |
+| {{SpecName('UI Events', '#interface-compositionevent', 'CompositionEvent')}} | {{Spec2('UI Events')}}     |             |
+| {{SpecName('DOM3 Events', '#idl-compositionevent', 'CompositionEvent')}}     | {{Spec2('DOM3 Events')}} |             |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<div>
+{{Compat("api.CompositionEvent")}}
 
+## Voir aussi
 
-<p>{{Compat("api.CompositionEvent")}}</p>
-</div>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><code>compositionstart</code></li>
- <li><code>compositionend</code></li>
- <li><code>compositionupdate</code></li>
- <li><a href="/fr/docs/Web/API/UIEvent">UIEvent</a></li>
- <li><a href="/fr/docs/Web/API/Event">Event</a></li>
-</ul>
+- `compositionstart`
+- `compositionend`
+- `compositionupdate`
+- [UIEvent](/fr/docs/Web/API/UIEvent)
+- [Event](/fr/docs/Web/API/Event)
diff --git a/files/fr/web/api/console/assert/index.md b/files/fr/web/api/console/assert/index.md
index db81d236b2..0b3aaddfaf 100644
--- a/files/fr/web/api/console/assert/index.md
+++ b/files/fr/web/api/console/assert/index.md
@@ -8,69 +8,49 @@ tags:
   - débogage
 translation_of: Web/API/console/assert
 ---
-<p>{{APIRef("Console API")}}</p>
+{{APIRef("Console API")}}
 
-<p>Affiche un message d'erreur dans la console si l'assertion est fausse. Si l'assertion est vraie, rien ne se produit.</p>
+Affiche un message d'erreur dans la console si l'assertion est fausse. Si l'assertion est vraie, rien ne se produit.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<div class="note">
-<p><strong>Note:</strong> <em>La méthode <code>console.assert()</code> est implémentée différement dans les vieilles version de Node.js que dans celle disponible dans les navigateurs.</em></p>
+> **Note :** _La méthode `console.assert()` est implémentée différement dans les vieilles version de Node.js que dans celle disponible dans les navigateurs._
+>
+> Plus précisément, dans les navigateurs, appeler `console.assert()` avec une condition fausse affichera le `message` dans la console sans interrompre l'éxecution du code suivant. Dans les versions inférieure à la v10 de Node.js, cependant, une assertion fausse lèvera une exception `AssertionError`. Cette différence de comportement a été corrigée par la v10 de Node et `console.assert()` se comporte maintenant de la même façon dans Node et dans les navigateurs.
 
-<p>Plus précisément, dans les navigateurs, appeler <code>console.assert()</code> avec une condition fausse affichera le <code>message</code> dans la console sans interrompre l'éxecution du code suivant. Dans les versions inférieure à la v10 de Node.js, cependant, une assertion fausse lèvera une exception <code>AssertionError</code>. Cette différence de comportement a été corrigée par la v10 de Node et <code>console.assert()</code> se comporte maintenant de la même façon dans Node et dans les navigateurs.</p>
-</div>
+## Syntaxe
 
-<h2 id="Syntax">Syntaxe</h2>
+    console.assert(assertion, obj1 [, obj2, ..., objN]);
+    console.assert(assertion, msg [, subst1, ..., substN]);
 
-<pre class="syntaxbox">console.assert(<em>assertion</em>, <em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]);
-console.assert(<em>assertion</em>, <em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]);
-</pre>
+### Paramètres
 
-<h3 id="Parameters">Paramètres</h3>
+- `assertion`
+  - : N'importe quelle expression booléenne. Si l'assertion est fausse, le message s'affichera dans la console.
+- `obj1` ... `objN`
+  - : Une liste d'objets javascript à afficher. La représentation textuelle de chacun de ces objets est ajoutée à la suite de la précédente dans l'ordre donné et est ensuite affichée.
+- `msg`
+  - : Une chaîne de caractères javascript contenant zéro ou plus chaîne(s) de caractères de substitution.
+- `subst1` ... `substN`
+  - : L'objet javascript avec lequel remplacer les chaînes de substitution dans `msg`. Ceci vous offre plus de contrôle sur ce qui est affiché.
 
-<dl>
- <dt><code>assertion</code></dt>
- <dd>N'importe quelle expression booléenne. Si l'assertion est fausse, le message s'affichera dans la console.</dd>
- <dt><code>obj1</code> ... <code>objN</code></dt>
- <dd>Une liste d'objets javascript à afficher. La représentation textuelle de chacun de ces objets est ajoutée à la suite de la précédente dans l'ordre donné et est ensuite affichée.</dd>
- <dt><code>msg</code></dt>
- <dd>Une chaîne de caractères javascript contenant zéro ou plus chaîne(s) de caractères de substitution.</dd>
- <dt><code>subst1</code> ... <code>substN</code></dt>
- <dd>L'objet javascript avec lequel remplacer les chaînes de substitution dans <code>msg</code>. Ceci vous offre plus de contrôle sur ce qui est affiché.</dd>
-</dl>
+Allez voir [Afficher du texte dans la console](/fr/docs/Web/API/console#Outputting_text_to_the_console) dans la documentation de {{domxref("console")}} pour plus de détails.
 
-<p>Allez voir <a href="/fr/docs/Web/API/console#Outputting_text_to_the_console">Afficher du texte dans la console</a> dans la documentation de {{domxref("console")}} pour plus de détails.</p>
+## Spécification
 
-<h2 id="Specification">Spécification</h2>
+| Specification                                                                | Status                           | Comment             |
+| ---------------------------------------------------------------------------- | -------------------------------- | ------------------- |
+| {{SpecName("Console API", "#assert", "console.assert()")}} | {{Spec2("Console API")}} | Définition initiale |
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("Console API", "#assert", "console.assert()")}}</td>
-   <td>{{Spec2("Console API")}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
 
-<p> </p>
 
-<h2 id="Browser_compatibility">Compatibilité entre les navigateurs</h2>
+## Compatibilité entre les navigateurs
 
-<p>{{Compat("api.Console.assert")}}</p>
+{{Compat("api.Console.assert")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="https://console.spec.whatwg.org/#assert-condition-data">WHATWG Console Standard: console.assert</a></li>
- <li><a href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
- <li><a href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li>
- <li><a href="https://developer.chrome.com/devtools/docs/console#assertions">Chrome Developer Tools: Using the Console</a></li>
-</ul>
+- [WHATWG Console Standard: console.assert](https://console.spec.whatwg.org/#assert-condition-data)
+- [Opera Dragonfly documentation: Console](http://www.opera.com/dragonfly/documentation/console/)
+- [MSDN: Using the F12 Tools Console to View Errors and Status](http://msdn.microsoft.com/library/gg589530)
+- [Chrome Developer Tools: Using the Console](https://developer.chrome.com/devtools/docs/console#assertions)
diff --git a/files/fr/web/api/console/clear/index.md b/files/fr/web/api/console/clear/index.md
index 0df1cf3edf..e0914af264 100644
--- a/files/fr/web/api/console/clear/index.md
+++ b/files/fr/web/api/console/clear/index.md
@@ -3,46 +3,30 @@ title: clear()
 slug: Web/API/Console/clear
 translation_of: Web/API/Console/clear
 ---
-<div>{{APIRef("Console API")}}</div>
+{{APIRef("Console API")}}
 
-<p>Vide la console.</p>
+Vide la console.
 
-<p>Tous les messages de la console seront supprimés et remplacés par un message de confirmation ("Console was cleared").</p>
+Tous les messages de la console seront supprimés et remplacés par un message de confirmation ("Console was cleared").
 
-<p>À noter: sur Google Chrome, <code>console.clear()</code> n'a aucun effet si l'utilisateur a coché "Preserve log upon navigation" dans les <a href="https://developer.chrome.com/devtools/docs/settings#preserve-log%20upon%20navigation">paramètres de l'inspecteur</a>.</p>
+À noter: sur Google Chrome, `console.clear()` n'a aucun effet si l'utilisateur a coché "Preserve log upon navigation" dans les [paramètres de l'inspecteur](https://developer.chrome.com/devtools/docs/settings#preserve-log%20upon%20navigation).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">console.clear();
-</pre>
+    console.clear();
 
-<h2 id="Paramètres">Paramètres</h2>
+## Paramètres
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Paramètres</th>
-   <th scope="col">Status</th>
-   <th scope="col">Commentaire</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("Console API", "#clear", "console.clear()")}}</td>
-   <td>{{Spec2("Console API")}}</td>
-   <td>Définition Initial</td>
-  </tr>
- </tbody>
-</table>
+| Paramètres                                                                   | Status                           | Commentaire        |
+| ---------------------------------------------------------------------------- | -------------------------------- | ------------------ |
+| {{SpecName("Console API", "#clear", "console.clear()")}} | {{Spec2("Console API")}} | Définition Initial |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Console.clear")}}</p>
+{{Compat("api.Console.clear")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
- <li><a href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li>
- <li><a href="https://developer.chrome.com/devtools/docs/console#assertions">Chrome Developer Tools: Using the Console</a></li>
-</ul>
+- [Opera Dragonfly documentation: Console](http://www.opera.com/dragonfly/documentation/console/)
+- [MSDN: Using the F12 Tools Console to View Errors and Status](http://msdn.microsoft.com/library/gg589530)
+- [Chrome Developer Tools: Using the Console](https://developer.chrome.com/devtools/docs/console#assertions)
diff --git a/files/fr/web/api/console/count/index.md b/files/fr/web/api/console/count/index.md
index 6c10e8458f..7cb5fa0d25 100644
--- a/files/fr/web/api/console/count/index.md
+++ b/files/fr/web/api/console/count/index.md
@@ -11,19 +11,20 @@ tags:
   - débogage
 translation_of: Web/API/Console/count
 ---
-<div>{{APIRef("Console API")}}</div>
+{{APIRef("Console API")}}
 
-<p>Affiche dans la console le nombre de fois où la fonction <code>count()</code> a été appelée. Cette fonction accepte l'argument optionnel <code>label</code>.</p>
+Affiche dans la console le nombre de fois où la fonction `count()` a été appelée. Cette fonction accepte l'argument optionnel `label`.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<p>Si un <code>label</code> est passé en paramètre, la fonction affiche le nombre de fois où la fonction <code>count()</code> a été appelée pour ce <code>label</code> spécifiquempent.</p>
+Si un `label` est passé en paramètre, la fonction affiche le nombre de fois où la fonction `count()` a été appelée pour ce `label` spécifiquempent.
 
-<p>Si aucun <code>label</code> est passé en paramètre, la fonction affiche le nombre de fois où la fonction <code>count()</code> a été appelée jusqu'à présent.</p>
+Si aucun `label` est passé en paramètre, la fonction affiche le nombre de fois où la fonction `count()` a été appelée jusqu'à présent.
 
-<p>Ci-dessous, un exemple d'utilisation :</p>
+Ci-dessous, un exemple d'utilisation :
 
-<pre class="brush: js">function greet() {
+```js
+function greet() {
   console.count();
   return "hi " + user;
 }
@@ -33,21 +34,22 @@ greet();
 user = "alice";
 greet();
 greet();
-console.count();</pre>
+console.count();
+```
 
-<p>La console affichera les lignes suivantes :</p>
+La console affichera les lignes suivantes :
 
-<pre class="eval">"&lt;no label&gt;: 1"
-"&lt;no label&gt;: 2"
-"&lt;no label&gt;: 3"
-"&lt;no label&gt;: 1"
-</pre>
+    "<no label>: 1"
+    "<no label>: 2"
+    "<no label>: 3"
+    "<no label>: 1"
 
-<p>A noter, la dernière ligne inscrite dans la console fait référence à l'appel de la fonction <code>count()</code> de la ligne 11 qui est traité comme un événement indépendant.</p>
+A noter, la dernière ligne inscrite dans la console fait référence à l'appel de la fonction `count()` de la ligne 11 qui est traité comme un événement indépendant.
 
-<p>Si la variable <code>user</code> est passée à la fonction comme paramètre <code>label</code>, le code ci-dessous génèrera un nouveau compteur lorsque la variable <code>user</code> sera modifiée :</p>
+Si la variable `user` est passée à la fonction comme paramètre `label`, le code ci-dessous génèrera un nouveau compteur lorsque la variable `user` sera modifiée :
 
-<pre class="brush: js">function greet() {
+```js
+function greet() {
   console.count(user);
   return "hi " + user;
 }
@@ -57,48 +59,33 @@ greet();
 user = "alice";
 greet();
 greet();
-console.count("alice");</pre>
+console.count("alice");
+```
 
-<p>La console affichera les lignes suivantes :</p>
+La console affichera les lignes suivantes :
 
-<pre class="eval">"bob: 1"
-"alice: 1"
-"alice: 2"
-"alice: 3"</pre>
+    "bob: 1"
+    "alice: 1"
+    "alice: 2"
+    "alice: 3"
 
-<p>Nous obtenons maintenant deux compteurs distinct basés sur un libellé différent. L'appel de la fonction <code>count()</code> avec "alice" à la ligne 11 n'est pas considéré comme un événement indépendant car le compteur existe déjà.</p>
+Nous obtenons maintenant deux compteurs distinct basés sur un libellé différent. L'appel de la fonction `count()` avec "alice" à la ligne 11 n'est pas considéré comme un événement indépendant car le compteur existe déjà.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">console.count([label]);
-</pre>
+    console.count([label]);
 
-<h2 id="Paramètres">Paramètres</h2>
+## Paramètres
 
-<dl>
- <dt><code>label</code></dt>
- <dd><p>Une chaîne de caractères. Si ce paramètre est renseigné, <code>count()</code> affiche le nombre de fois que la fonction a été appelée jusqu'à présent avec ce libellé. S'il est omis, <code>count()</code> affiche le nombre de fois que la fonction a été appelée sur cette ligne.</p></dd>
-</dl>
+- `label`
+  - : Une chaîne de caractères. Si ce paramètre est renseigné, `count()` affiche le nombre de fois que la fonction a été appelée jusqu'à présent avec ce libellé. S'il est omis, `count()` affiche le nombre de fois que la fonction a été appelée sur cette ligne.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<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("Console API", "#count", "console.count()")}}</td>
-   <td>{{Spec2("Console API")}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                | Status                           | Commentaire         |
+| ---------------------------------------------------------------------------- | -------------------------------- | ------------------- |
+| {{SpecName("Console API", "#count", "console.count()")}} | {{Spec2("Console API")}} | Définition initiale |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Console.count")}}</p>
\ No newline at end of file
+{{Compat("api.Console.count")}}
diff --git a/files/fr/web/api/console/countreset/index.md b/files/fr/web/api/console/countreset/index.md
index 7cf74195e7..3fb703d448 100644
--- a/files/fr/web/api/console/countreset/index.md
+++ b/files/fr/web/api/console/countreset/index.md
@@ -3,49 +3,47 @@ title: Console.countReset()
 slug: Web/API/Console/countReset
 translation_of: Web/API/Console/countReset
 ---
-<div>{{APIRef("Console API")}}</div>
+{{APIRef("Console API")}}
 
-<p>Remet le compteur à zero. Cette fonction prend un argument optionnel <code>label</code></p>
+Remet le compteur à zero. Cette fonction prend un argument optionnel `label`
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntax">Syntax</h2>
+## Syntax
 
-<pre class="syntaxbox">console.countReset(<var>[label]</var>);
-</pre>
+    console.countReset([label]);
 
-<h3 id="Parameters">Parameters</h3>
+### Parameters
 
-<dl>
- <dt><code>label</code></dt>
- <dd>Si specifié, <code>countReset()</code> remet à zero le compteur associé à ce label. S'il n'est pas specifié, <code>countReset()</code> remet à zéro le compteur par defaut.</dd>
-</dl>
+- `label`
+  - : Si specifié, `countReset()` remet à zero le compteur associé à ce label. S'il n'est pas specifié, `countReset()` remet à zéro le compteur par defaut.
 
-<h3 id="Return_value">Return value</h3>
+### Return value
 
-<p>Si le paramètre label à été spécifié :</p>
+Si le paramètre label à été spécifié :
 
-<pre> counter-name: 0</pre>
+     counter-name: 0
 
-<p>Si aucun label n'as été specifié</p>
+Si aucun label n'as été specifié
 
-<pre>default: 0</pre>
+    default: 0
 
-<h3 id="Warnings">Warnings</h3>
+### Warnings
 
-<p>Si <code>label</code> est specifié mais n'existe pas <code>countReset()</code> renvoie cet avertissement :</p>
+Si `label` est specifié mais n'existe pas `countReset()` renvoie cet avertissement :
 
-<pre><code>Counter "counter-name" doesn’t exist.</code></pre>
+    Counter "counter-name" doesn’t exist.
 
-<p>Si <code>label</code> n'est pas specifé et que <code>count()</code> n'as pas encore été appellé <code>countReset()</code> renvoie cette avertissement :</p>
+Si `label` n'est pas specifé et que `count()` n'as pas encore été appellé `countReset()` renvoie cette avertissement :
 
-<pre><code>Counter "default" doesn’t exist.</code></pre>
+    Counter "default" doesn’t exist.
 
-<h2 id="Examples">Examples</h2>
+## Examples
 
-<p>Par exemple avec un code comme celui ci :</p>
+Par exemple avec un code comme celui ci :
 
-<pre class="brush: js">var user = "";
+```js
+var user = "";
 
 function greet() {
   console.count();
@@ -58,22 +56,23 @@ user = "alice";
 greet();
 greet();
 console.count();
-console.countReset();</pre>
+console.countReset();
+```
 
-<p>Le retour de la console ressemblera à ceci :</p>
+Le retour de la console ressemblera à ceci :
 
-<pre class="eval">"default: 1"
-"default: 2"
-"default: 3"
-"default: 1"
-"default: 0"
-</pre>
+    "default: 1"
+    "default: 2"
+    "default: 3"
+    "default: 1"
+    "default: 0"
 
-<p>Pour information l'appel à <code>console.counterReset()</code> remet à zero la valeur du compteur par défaut.</p>
+Pour information l'appel à `console.counterReset()` remet à zero la valeur du compteur par défaut.
 
-<p>S'il on passe la variable <code>user</code> comme argument pour <code>label</code> et que l'on effectue un premier appel de la fonction <code>count()</code>, avec la chaine "bob" puis un second appel avec la chaine "alice" :</p>
+S'il on passe la variable `user` comme argument pour `label` et que l'on effectue un premier appel de la fonction `count()`, avec la chaine "bob" puis un second appel avec la chaine "alice" :
 
-<pre class="brush: js">var user = "";
+```js
+var user = "";
 
 function greet() {
   console.count(user);
@@ -86,39 +85,25 @@ user = "alice";
 greet();
 greet();
 console.countReset("bob");
-console.count("alice");</pre>
+console.count("alice");
+```
 
-<p>On obtiendra ce retour dans la console</p>
+On obtiendra ce retour dans la console
 
-<pre class="eval">"bob: 1"
-"alice: 1"
-"alice: 2"
-"bob: 0"
-"alice: 3"</pre>
+    "bob: 1"
+    "alice: 1"
+    "alice: 2"
+    "bob: 0"
+    "alice: 3"
 
-<p>Remettre à zero le compteur "bob" change uniquement la valeur de celui-ci. La valeur du compteur "alice" reste inchangée.</p>
+Remettre à zero le compteur "bob" change uniquement la valeur de celui-ci. La valeur du compteur "alice" reste inchangée.
 
-<h2 id="Specifications">Specifications</h2>
+## Specifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("Console API", "#count", "console.countReset()")}}</td>
-   <td>{{Spec2("Console API")}}</td>
-   <td>Initial definition</td>
-  </tr>
- </tbody>
-</table>
+| Specification                                                                    | Status                           | Comment            |
+| -------------------------------------------------------------------------------- | -------------------------------- | ------------------ |
+| {{SpecName("Console API", "#count", "console.countReset()")}} | {{Spec2("Console API")}} | Initial definition |
 
-<h2 id="Browser_compatibility">Browser compatibility</h2>
+## Browser compatibility
 
-
-
-<p>{{Compat("api.Console.countReset")}}</p>
+{{Compat("api.Console.countReset")}}
diff --git a/files/fr/web/api/console/debug/index.md b/files/fr/web/api/console/debug/index.md
index 03082131d9..5a3471c1db 100644
--- a/files/fr/web/api/console/debug/index.md
+++ b/files/fr/web/api/console/debug/index.md
@@ -11,58 +11,40 @@ tags:
   - outils de développement
 translation_of: Web/API/Console/debug
 ---
-<div>{{APIRef("Console API")}}</div>
+{{APIRef("Console API")}}
 
-<p>Affiche un message dans la console web, avec le niveau de log "debug". Le message est affiché uniquement si la console est configurée pour afficher les messages de type debug.</p>
+Affiche un message dans la console web, avec le niveau de log "debug". Le message est affiché uniquement si la console est configurée pour afficher les messages de type debug.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">console.debug(<em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]);
-console.debug(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]);
-</pre>
+    console.debug(obj1 [, obj2, ..., objN]);
+    console.debug(msg [, subst1, ..., substN]);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>obj1</code> ... <code>objN</code></dt>
- <dd>Une liste d'objets JavaScript à afficher. La représentation, en chaîne de caractères, de chacun de ces objets est affichée dans l'ordre de la liste.</dd>
- <dt><code>msg</code></dt>
- <dd>Une chaîne de caractères JavaScript contenant zéro ou plusieurs subdivisions de chaîne de caractères.</dd>
- <dt><code>subst1</code> ... <code>substN</code></dt>
- <dd>Une liste d'objets JavaScript qui remplace les chaînes de caractéres de <code>msg</code>. Cela vous donne plus de contrôle sur le format de sortie. Voir {{SectionOnPage("fr/docs/Web/API/Console", "Utiliser les caractères de substitution")}} pour une description du fonctionnement des substitutions.</dd>
-</dl>
+- `obj1` ... `objN`
+  - : Une liste d'objets JavaScript à afficher. La représentation, en chaîne de caractères, de chacun de ces objets est affichée dans l'ordre de la liste.
+- `msg`
+  - : Une chaîne de caractères JavaScript contenant zéro ou plusieurs subdivisions de chaîne de caractères.
+- `subst1` ... `substN`
+  - : Une liste d'objets JavaScript qui remplace les chaînes de caractéres de `msg`. Cela vous donne plus de contrôle sur le format de sortie. Voir {{SectionOnPage("fr/docs/Web/API/Console", "Utiliser les caractères de substitution")}} pour une description du fonctionnement des substitutions.
 
-<p>Voir <a href="/fr/docs/Web/API/console#Outputting_text_to_the_console">Afficher du texte dans la console</a> dans la documentation de {{domxref("console")}} pour plus de détails.</p>
+Voir [Afficher du texte dans la console](/fr/docs/Web/API/console#Outputting_text_to_the_console) dans la documentation de {{domxref("console")}} pour plus de détails.
 
-<h2 id="Spécification">Spécification</h2>
+## Spécification
 
-<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("Console API", "#debug", "console.debug()")}}</td>
-   <td>{{Spec2("Console API")}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                | Statut                           | Commentaire         |
+| ---------------------------------------------------------------------------- | -------------------------------- | ------------------- |
+| {{SpecName("Console API", "#debug", "console.debug()")}} | {{Spec2("Console API")}} | Définition initiale |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Console.debug")}}</p>
+{{Compat("api.Console.debug")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
- <li><a href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li>
- <li><a href="https://developers.google.com/chrome-developer-tools/docs/console#errors_and_warnings">Chrome Developer Tools: Using the Console</a></li>
-</ul>
+- [Opera Dragonfly documentation: Console](http://www.opera.com/dragonfly/documentation/console/)
+- [MSDN: Using the F12 Tools Console to View Errors and Status](http://msdn.microsoft.com/library/gg589530)
+- [Chrome Developer Tools: Using the Console](https://developers.google.com/chrome-developer-tools/docs/console#errors_and_warnings)
diff --git a/files/fr/web/api/console/dir/index.md b/files/fr/web/api/console/dir/index.md
index 82b45f36cf..c63a997ea5 100644
--- a/files/fr/web/api/console/dir/index.md
+++ b/files/fr/web/api/console/dir/index.md
@@ -11,57 +11,37 @@ tags:
   - débogage
 translation_of: Web/API/Console/dir
 ---
-<div>{{APIRef("Console API")}}</div>
+{{APIRef("Console API")}}
 
-<p>Affiche une liste interactive des propriétés de l'objet Javascript spécifié. La sortie est présenté comme un listing hiérarchique avec des triangles qui permettent l'affichage du contenu des objets-enfants.</p>
+Affiche une liste interactive des propriétés de l'objet Javascript spécifié. La sortie est présenté comme un listing hiérarchique avec des triangles qui permettent l'affichage du contenu des objets-enfants.
 
-<p>En d'autres termes, console.dir est le moyen de voir toutes les propriétés de l'objet JavaScript spécifié dans la console, par lequel le développeur peut facilement obtenir les propriétés de l'objet.</p>
+En d'autres termes, console.dir est le moyen de voir toutes les propriétés de l'objet JavaScript spécifié dans la console, par lequel le développeur peut facilement obtenir les propriétés de l'objet.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<p><img src="console-dir.png"></p>
+![](console-dir.png)
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">console.dir(<em>object</em>);
-</pre>
+    console.dir(object);
 
-<h2 id="Paramètres">Paramètres</h2>
+## Paramètres
 
-<dl>
- <dt><code>object</code></dt>
- <dd>Un objet Javascript qui contient les propriétés qui doivent être affichées.</dd>
-</dl>
+- `object`
+  - : Un objet Javascript qui contient les propriétés qui doivent être affichées.
 
-<h2 id="Spécification">Spécification</h2>
+## Spécification
 
-<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("Console API", "#dir", "console.dir()")}}</td>
-   <td>{{Spec2("Console API")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                        | Statut                           | Commentaire          |
+| -------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName("Console API", "#dir", "console.dir()")}} | {{Spec2("Console API")}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
+{{Compat("api.Console.dir")}}
 
+## Voir aussi
 
-<p>{{Compat("api.Console.dir")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
- <li><a href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li>
- <li><a href="https://developers.google.com/chrome-developer-tools/docs/console-api#consoledirobject">Chrome Console API reference</a></li>
-</ul>
+- [Opera Dragonfly documentation: Console](http://www.opera.com/dragonfly/documentation/console/)
+- [MSDN: Using the F12 Tools Console to View Errors and Status](http://msdn.microsoft.com/library/gg589530)
+- [Chrome Console API reference](https://developers.google.com/chrome-developer-tools/docs/console-api#consoledirobject)
diff --git a/files/fr/web/api/console/dirxml/index.md b/files/fr/web/api/console/dirxml/index.md
index 8571cc33a4..5540aa7b7b 100644
--- a/files/fr/web/api/console/dirxml/index.md
+++ b/files/fr/web/api/console/dirxml/index.md
@@ -10,49 +10,27 @@ tags:
   - débogage
 translation_of: Web/API/Console/dirxml
 ---
-<div>{{APIRef ("Console API")}}</div>
+{{APIRef ("Console API")}}Affiche un arbre interactif des éléments descendants de l'élément XML / HTML spécifié. S'il n'est pas possible d'afficher en tant qu'élément, la vue Objet JavaScript est affichée à la place. La sortie est présentée sous la forme d'une liste hiérarchique des noeuds extensibles qui vous permettent de voir le contenu des nœuds enfants.
 
-<div>Affiche un arbre interactif des éléments descendants de l'élément XML / HTML spécifié. S'il n'est pas possible d'afficher en tant qu'élément, la vue Objet JavaScript est affichée à la place. La sortie est présentée sous la forme d'une liste hiérarchique des noeuds extensibles qui vous permettent de voir le contenu des nœuds enfants.</div>
+## Syntaxe
 
-<h2 id="Syntaxe">Syntaxe</h2>
+    console.dirxml(object);
 
-<pre class="syntaxbox">console.dirxml(<em>object</em>);
-</pre>
+## Paramètres
 
-<h2 id="Paramètres">Paramètres</h2>
+- `object`
+  - : Un objet JavaScript dont les propriétés doivent être sorties.
 
-<dl>
- <dt><code>object</code></dt>
- <dd>Un objet JavaScript dont les propriétés doivent être sorties.</dd>
-</dl>
+## Spécification
 
-<h2 id="Spécification">Spécification</h2>
+| Spécification                                                                | Statut                           | Commentaire         |
+| ---------------------------------------------------------------------------- | -------------------------------- | ------------------- |
+| {{SpecName("Console API", "#dirxml", "console.dirxml()")}} | {{Spec2("Console API")}} | Définition initiale |
 
-<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("Console API", "#dirxml", "console.dirxml()")}}</td>
-   <td>{{Spec2("Console API")}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+## Compatibilité des navigateurs
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+{{Compat("api.Console.dirxml")}}
 
+## Voir aussi
 
-
-<p>{{Compat("api.Console.dirxml")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
-</ul>
+- [Opera Dragonfly documentation: Console](http://www.opera.com/dragonfly/documentation/console/)
diff --git a/files/fr/web/api/console/error/index.md b/files/fr/web/api/console/error/index.md
index 21bfa8b40a..58ccae6929 100644
--- a/files/fr/web/api/console/error/index.md
+++ b/files/fr/web/api/console/error/index.md
@@ -11,64 +11,44 @@ tags:
   - débogage
 translation_of: Web/API/Console/error
 ---
-<div>{{APIRef("Console API")}}</div>
+{{APIRef("Console API")}}
 
-<p>Affiche un message d'erreur dans la console du navigateur.</p>
+Affiche un message d'erreur dans la console du navigateur.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">console.error(<em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]);
-console.error(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]);
-console.exception(<em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]);
-console.exception(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]);
-</pre>
+    console.error(obj1 [, obj2, ..., objN]);
+    console.error(msg [, subst1, ..., substN]);
+    console.exception(obj1 [, obj2, ..., objN]);
+    console.exception(msg [, subst1, ..., substN]);
 
-<div class="note">
-<p><strong>Note:</strong> <code>console.exception()</code> est un alias de <code>console.error()</code>; ils sont fonctionnellement identiques.</p>
-</div>
+> **Note :** `console.exception()` est un alias de `console.error()`; ils sont fonctionnellement identiques.
 
-<h3 id="Parameters">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>obj1</code> ... <code>objN</code></dt>
- <dd>Une liste d'objets JavaScript à afficher. La représentation, en chaîne de caractéres, de chacun de ces objets est affichée dans l'ordre de la liste.</dd>
- <dt><code>msg</code></dt>
- <dd>Une chaîne de caractères JavaScript contenant zéro ou plusieurs subdivisions de chaîne de caractères.</dd>
- <dt><code>subst1</code> ... <code>substN</code></dt>
- <dd>Une liste d'objets JavaScript qui remplace les chaînes de caractéres de <code>msg</code>. Cela vous donne plus de contrôle sur le format de sortie.</dd>
-</dl>
+- `obj1` ... `objN`
+  - : Une liste d'objets JavaScript à afficher. La représentation, en chaîne de caractéres, de chacun de ces objets est affichée dans l'ordre de la liste.
+- `msg`
+  - : Une chaîne de caractères JavaScript contenant zéro ou plusieurs subdivisions de chaîne de caractères.
+- `subst1` ... `substN`
+  - : Une liste d'objets JavaScript qui remplace les chaînes de caractéres de `msg`. Cela vous donne plus de contrôle sur le format de sortie.
 
-<p>Voir <a href="/fr/docs/Web/API/console#Outputting_text_to_the_console">Afficher du texte dans la console</a> dans la documentation de  {{domxref("console")}} pour plus de détails.</p>
+Voir [Afficher du texte dans la console](/fr/docs/Web/API/console#Outputting_text_to_the_console) dans la documentation de  {{domxref("console")}} pour plus de détails.
 
-<h2 id="Specification">Spécification</h2>
+## Spécification
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("Console API", "#error", "console.error()")}}</td>
-   <td>{{Spec2("Console API")}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Specification                                                                | Status                           | Comment             |
+| ---------------------------------------------------------------------------- | -------------------------------- | ------------------- |
+| {{SpecName("Console API", "#error", "console.error()")}} | {{Spec2("Console API")}} | Définition initiale |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<div>{{Compat("api.Console.error")}}</div>
+{{Compat("api.Console.error")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
- <li><a href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li>
- <li><a href="https://developers.google.com/chrome-developer-tools/docs/console#errors_and_warnings">Chrome Developer Tools: Using the Console</a></li>
-</ul>
+- [Opera Dragonfly documentation: Console](http://www.opera.com/dragonfly/documentation/console/)
+- [MSDN: Using the F12 Tools Console to View Errors and Status](http://msdn.microsoft.com/library/gg589530)
+- [Chrome Developer Tools: Using the Console](https://developers.google.com/chrome-developer-tools/docs/console#errors_and_warnings)
diff --git a/files/fr/web/api/console/group/index.md b/files/fr/web/api/console/group/index.md
index 0a3e6f8265..11edef282a 100644
--- a/files/fr/web/api/console/group/index.md
+++ b/files/fr/web/api/console/group/index.md
@@ -11,35 +11,31 @@ tags:
   - débogage
 translation_of: Web/API/Console/group
 ---
-<div>{{APIRef("Console API")}}</div>
+{{APIRef("Console API")}}
 
-<p>Création d'un nouveau groupe en ligne dans la <a href="/en-US/docs/Tools/Web_Console">console Web</a>. Cela indente les messages de console suivants par un niveau supplémentaire, jusqu'à ce que {{domxref("console.groupEnd()")}} soit appelé.</p>
+Création d'un nouveau groupe en ligne dans la [console Web](/en-US/docs/Tools/Web_Console). Cela indente les messages de console suivants par un niveau supplémentaire, jusqu'à ce que {{domxref("console.groupEnd()")}} soit appelé.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntax">Syntax</h2>
+## Syntax
 
-<pre class="syntaxbox">console.group();
-</pre>
+    console.group();
 
-<h2 id="Paramètres">Paramètres</h2>
+## Paramètres
 
-<dl>
- <dt><code>label</code></dt>
- <dd>donne une étiquette au groupe. Facultatif. (Chrome 59 testé). Ne fonctionne pas avec<code> </code> <code>console.groupEnd()</code>.</dd>
-</dl>
+- `label`
+  - : donne une étiquette au groupe. Facultatif. (Chrome 59 testé). Ne fonctionne pas avec` ``console.groupEnd()`.
 
-<p>{{h3_gecko_minversion("Using groups in the console", "9.0")}}</p>
+{{h3_gecko_minversion("Using groups in the console", "9.0")}}
 
-<p>Vous pouvez utiliser des groupes imbriqués pour organiser votre sortie en associant visuellement les messages correspondants. Pour créer un nouveau bloc imbriqué, appelez <code>console.group ()</code>. La méthode <code>console.groupCollapsed ()</code> est similaire, mais le nouveau bloc est réduit et nécessite de cliquer sur un bouton de divulgation pour le lire.</p>
+Vous pouvez utiliser des groupes imbriqués pour organiser votre sortie en associant visuellement les messages correspondants. Pour créer un nouveau bloc imbriqué, appelez `console.group ()`. La méthode `console.groupCollapsed ()` est similaire, mais le nouveau bloc est réduit et nécessite de cliquer sur un bouton de divulgation pour le lire.
 
-<div class="note">
-<p><strong>Note :</strong> De Gecko 9 jusqu'à Gecko 51, la méthode <code>groupCollapsed()</code> n'était pas identique à <code>group()</code>. Les groupes réduits sont entièrement pris en charge depuis Gecko 52. Voir {{bug("1088360")}}.</p>
-</div>
+> **Note :** De Gecko 9 jusqu'à Gecko 51, la méthode `groupCollapsed()` n'était pas identique à `group()`. Les groupes réduits sont entièrement pris en charge depuis Gecko 52. Voir {{bug("1088360")}}.
 
-<p>Pour sortir du groupe courant, appeler <code>console.groupEnd()</code>. Par exemple, étant donné ce code :</p>
+Pour sortir du groupe courant, appeler `console.groupEnd()`. Par exemple, étant donné ce code :
 
-<pre class="brush: js">console.log("This is the outer level");
+```js
+console.log("This is the outer level");
 console.group();
 console.log("Level 2");
 console.group();
@@ -48,39 +44,25 @@ console.warn("More of level 3");
 console.groupEnd();
 console.log("Back to level 2");
 console.groupEnd();
-console.log("Back to the outer level");</pre>
+console.log("Back to the outer level");
+```
 
-<p>La sortie ressemble à ceci :</p>
+La sortie ressemble à ceci :
 
-<p><img alt="Une capture d'écran de messages imbriqués dans la sortie de la console." src="nesting.png"></p>
+![Une capture d'écran de messages imbriqués dans la sortie de la console.](nesting.png)
 
-<p>Pour plus de détail, se reporter à l'article <a href="/fr/docs/Web/API/console#Using_groups_in_the_console">Using groups in the console</a> dans la documentation sur la {{domxref("console")}}.</p>
+Pour plus de détail, se reporter à l'article [Using groups in the console](/fr/docs/Web/API/console#Using_groups_in_the_console) dans la documentation sur la {{domxref("console")}}.
 
-<h2 id="Spécifications">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("Console API", "#consolegroupobject-object-", "console.group()")}}</td>
-   <td>{{Spec2("Console API")}}</td>
-   <td>Initial definition</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                            | Statut                           | Commentaire        |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------ |
+| {{SpecName("Console API", "#consolegroupobject-object-", "console.group()")}} | {{Spec2("Console API")}} | Initial definition |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Console.group")}}</p>
+{{Compat("api.Console.group")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
-</ul>
+- [Opera Dragonfly documentation: Console](http://www.opera.com/dragonfly/documentation/console/)
diff --git a/files/fr/web/api/console/groupcollapsed/index.md b/files/fr/web/api/console/groupcollapsed/index.md
index 5956aca479..aa84ded541 100644
--- a/files/fr/web/api/console/groupcollapsed/index.md
+++ b/files/fr/web/api/console/groupcollapsed/index.md
@@ -12,53 +12,35 @@ tags:
   - débogage
 translation_of: Web/API/Console/groupCollapsed
 ---
-<div>{{APIRef("Console API")}}</div>
+{{APIRef("Console API")}}
 
-<p>Crée un nouveau groupe intégré dans la console Web. Contrairement à {{domxref ("console.group ()")}}, le nouveau groupe est créé réduit. L'utilisateur devra utiliser le bouton de divulgation à côté pour le développer, en révélant les entrées créées dans le groupe.</p>
+Crée un nouveau groupe intégré dans la console Web. Contrairement à {{domxref ("console.group ()")}}, le nouveau groupe est créé réduit. L'utilisateur devra utiliser le bouton de divulgation à côté pour le développer, en révélant les entrées créées dans le groupe.
 
-<p>Appellez  {{domxref("console.groupEnd()")}} pour revenir au groupe parent.</p>
+Appellez {{domxref("console.groupEnd()")}} pour revenir au groupe parent.
 
-<p>Voir <a href="/fr/docs/Web/API/console#Using_groups_in_the_console">Using groups in the console</a> dans la documentation  de {{domxref("console")}}  pour plus de détails et des exemples.</p>
+Voir [Using groups in the console](/fr/docs/Web/API/console#Using_groups_in_the_console) dans la documentation  de {{domxref("console")}}  pour plus de détails et des exemples.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">console.groupCollapsed([label]);
-</pre>
+    console.groupCollapsed([label]);
 
-<h2 id="Paramètres">Paramètres</h2>
+## Paramètres
 
-<dl>
- <dt><code>label</code></dt>
- <dd>Étiquette pour le groupe. Facultatif.</dd>
-</dl>
+- `label`
+  - : Étiquette pour le groupe. Facultatif.
 
-<h2 id="Spécifications">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("Console API", "#groupcollapsed", "console.groupCollapsed()")}}</td>
-   <td>{{Spec2("Console API")}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                        | Statut                           | Commentaire         |
+| ---------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- |
+| {{SpecName("Console API", "#groupcollapsed", "console.groupCollapsed()")}} | {{Spec2("Console API")}} | Définition initiale |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Console.groupCollapsed")}}</p>
+{{Compat("api.Console.groupCollapsed")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
-</ul>
+- [Opera Dragonfly documentation: Console](http://www.opera.com/dragonfly/documentation/console/)
diff --git a/files/fr/web/api/console/groupend/index.md b/files/fr/web/api/console/groupend/index.md
index bb64ea32cb..8729a7f1cb 100644
--- a/files/fr/web/api/console/groupend/index.md
+++ b/files/fr/web/api/console/groupend/index.md
@@ -10,46 +10,30 @@ tags:
   - débogage
 translation_of: Web/API/Console/groupEnd
 ---
-<p>{{APIRef("Console API")}}</p>
+{{APIRef("Console API")}}
 
-<p>Quitte le groupe en ligne actuel dans la <a href="/fr/docs/Outils/Console_Web">console Web</a>. Voir  <a href="/fr/docs/Web/API/console#Using_groups_in_the_console">Using groups in the console</a>  dans la documentation {{domxref("console.group()")}} pour plus de détails et des exemples.</p>
+Quitte le groupe en ligne actuel dans la [console Web](/fr/docs/Outils/Console_Web). Voir  [Using groups in the console](/fr/docs/Web/API/console#Using_groups_in_the_console)  dans la documentation {{domxref("console.group()")}} pour plus de détails et des exemples.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">console.groupEnd();
-</pre>
+    console.groupEnd();
 
-<h2 id="Paramètres">Paramètres</h2>
+## Paramètres
 
-<p>Aucun.</p>
+Aucun.
 
-<h2 id="Spécifications">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("Console API", "#groupend", "console.groupEnd()")}}</td>
-   <td>{{Spec2("Console API")}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                        | Statut                           | Commentaire         |
+| ------------------------------------------------------------------------------------ | -------------------------------- | ------------------- |
+| {{SpecName("Console API", "#groupend", "console.groupEnd()")}} | {{Spec2("Console API")}} | Définition initiale |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Console.groupEnd")}}</p>
+{{Compat("api.Console.groupEnd")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
-</ul>
+- [Opera Dragonfly documentation: Console](http://www.opera.com/dragonfly/documentation/console/)
diff --git a/files/fr/web/api/console/index.md b/files/fr/web/api/console/index.md
index 3fea02614b..c761ed3f78 100644
--- a/files/fr/web/api/console/index.md
+++ b/files/fr/web/api/console/index.md
@@ -9,176 +9,179 @@ tags:
   - débogage
 translation_of: Web/API/Console
 ---
-<div>{{APIRef("Console API")}}</div>
-
-<p>L'objet <strong><code>console</code></strong> donne accès à la console de débogage du navigateur (par exemple., la<a href="/fr/docs/Outils/Console_Web"> Console Web</a> dans Firefox). Les spécificités de fonctionnement varient d'un navigateur à l'autre, mais il y a tout de même un ensemble de fonctionnalités qui sont fournies de base.</p>
-
-<p>La <code>console</code> est accessible de n'importe quel objet global, {{domxref("Window")}} du cadre de navigation, {{domxref("WorkerGlobalScope")}} et ses variantes spécifiques pour les workers. Elle est exposée comme {{domxref ("Window.console")}} et peut être référencée simplement comme console. Par exemple :</p>
-
-<pre class="brush: js">console.log("Failed to open the specified link")</pre>
-
-<p>Cette page documente les {{anch("Methods", "méthodes")}} disponibles pour l'objet <code>console</code> et donne quelques {{anch("Usage", "exemples d'utilisation")}}.</p>
-
-<p>{{AvailableInWorkers}}</p>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<dl>
- <dt>{{domxref("Console.assert()")}}</dt>
- <dd>Affiche un message et une trace d'appels dans la console si l'assertion en argument est à <code>false</code>.</dd>
- <dt>{{domxref("Console.clear()")}}</dt>
- <dd>Vide la console.</dd>
- <dt>{{domxref("Console.count()")}}</dt>
- <dd>Affiche le nombre de fois que la ligne a été appelée avec un label donné.</dd>
- <dt>{{domxref("Console.debug()")}}</dt>
- <dd>Un alias de <code>log().</code></dd>
-</dl>
-
-<div class="note">
-<p><strong>Note :</strong> À partir de Chromium 58, cette méthode n'apparaît que dans les consoles de navigateur Chromium lorsque le niveau "Verbose" est sélectionné.</p>
-</div>
-
-<dl>
- <dt>{{domxref("Console.dir()")}} {{Non-standard_inline}}</dt>
- <dd>Affiche une liste interactive des propriétés d'un objet JavaScript donné. Cette liste vous permet d'examiner le contenu des enfants de l'objet en ouvrant les détails (petits triangles).</dd>
- <dt>{{domxref("Console.dirxml()")}} {{Non-standard_inline}}</dt>
- <dd>
- <p>Affiche si possible une représentation d'éléments XML/HTML d'un objet spécifié. Sinon, c'est une vue de l'objet JavaScript.</p>
- </dd>
- <dt>{{domxref("Console.error()")}}</dt>
- <dd>Affiche un message d'erreur. Vous pouvez utiliser les <a href="/fr/docs/Web/API/console#Utiliser_les_caractères_de_substitution">caractères de substitution</a> et des arguments supplémentaires avec cette méthode.</dd>
- <dt>{{domxref("Console._exception()")}} {{Non-standard_inline}} {{deprecated_inline}}</dt>
- <dd>Un alias d'<code>error();</code></dd>
- <dt>{{domxref("Console.group()")}}</dt>
- <dd>Crée un nouveau <a href="/fr/docs/Web/API/console#Using_groups_in_the_console">groupe</a> en ligne, correspondant à un nouveau niveau d'indentation. Contrairement à <code>group()</code>. Pour revenir au niveau précédent, appeler <code>groupEnd()</code>.</dd>
- <dt>{{domxref("Console.groupCollapsed()")}}</dt>
- <dd>Crée un nouveau <a href="/fr/docs/Web/API/console#Using_groups_in_the_console">groupe</a> en ligne, correspondant à un nouveau niveau d'indentation. Contrairement à <code>group()</code> , cela commence avec le groupe en ligne effondré, nécessitant l'utilisation d'un bouton de divulgation pour l'agrandir. Pour revenir au niveau précédent, appeler <code>groupEnd()</code>.</dd>
- <dt>{{domxref("Console.groupEnd()")}}</dt>
- <dd>Quitte le <a href="/fr/docs/Web/API/console#Using_groups_in_the_console">groupe</a> d'indentation courant.</dd>
- <dt>{{domxref("Console.info()")}}</dt>
- <dd>Affiche un message d'information. Vous pouvez utiliser les <a href="/fr/docs/Web/API/console#Utiliser_les_caractères_de_substitution">caractères de substitution</a> et des arguments supplémentaires avec cette méthode.</dd>
- <dt>{{domxref("Console.log()")}}</dt>
- <dd>Permet d'afficher des messages dans la console. Vous pouvez utiliser les <a href="/fr/docs/Web/API/console#Utiliser_les_caractères_de_substitution">caractères de substitution</a> et des arguments supplémentaires avec cette méthode.</dd>
- <dt>{{domxref("Console.profile()")}} {{Non-standard_inline}}</dt>
- <dd>démarre le profilage du navigateur (par exemple, l'<a href="/fr/docs/Outils/Performance">outil performances de Firefox</a>). Vous pouvez spécifier un nom en option pour ce profil.</dd>
- <dt>{{domxref("Console.profileEnd()")}} {{Non-standard_inline}}</dt>
- <dd>Arrête le profilage. Vous pouvez voir le résultat de ce dernier dans l'outil « performance » du navigateur (par exemple, l'<a href="/fr/docs/Outils/Performance">outil performance Firefox</a>).</dd>
- <dt>{{domxref("Console.table()")}}</dt>
- <dd>Affiche des données tabulaires comme un tableau.</dd>
- <dt>{{domxref("Console.time()")}}</dt>
- <dd>Démarre un <a href="/fr/docs/Web/API/console#Timers">chronomètre</a> que l'on peut nommer en le spécifiant en tant que paramètre. Jusqu'à 10 000 chronomètres simultanés peuvent tourner sur une page.</dd>
- <dt>{{domxref("Console.timeEnd()")}}</dt>
- <dd>Arrête le <a href="/fr/docs/Web/API/console#Timers">chronomètre</a> spécifié et affiche le temps écoulé en millisecondes depuis son démarrage.</dd>
- <dt>{{domxref("Console.timeStamp()")}} {{Non-standard_inline}}</dt>
- <dd>Ajoute un marqueur dans la <a href="https://developer.chrome.com/devtools/docs/timeline">Timeline</a> du navigateur ou l'outil <a href="/fr/docs/Outils/Performance/Waterfall">Waterfall</a>.</dd>
- <dt>{{domxref("Console.trace()")}}</dt>
- <dd>Affiche une <a href="/fr/docs/Web/API/console#Traces_d%27appel">trace d'appels</a>.</dd>
- <dt>{{domxref("Console.warn()")}}</dt>
- <dd>Affiche un message d'avertissement. Vous pouvez utiliser les <a href="/fr/docs/Web/API/console#Utiliser_les_caractères_de_substitution">caractères de substitution</a> et des arguments supplémentaires avec cette méthode.</dd>
-</dl>
-
-
-<h2 id="Usage">Exemples d'utilisation</h2>
-
-<h3 id="Outputting_text_to_the_console">Afficher du texte dans la console</h3>
-
-<p>La fonction la plus utilisée de la console est d'afficher du texte ou autres données. Il y a quatre sortes d'affichages que vous pouvez générer, en utilisant les méthodes {{domxref("console.log()")}}, {{domxref("console.info()")}}, {{domxref("console.warn()")}}, et {{domxref("console.error()")}}. Chacune de ces méthodes génére un affichage différent dans la console, et vous pouvez utiliser les fonctions de filtrage du navigateur pour voir uniquement les types de sortie qui vous intéressent.</p>
-
-<p>Il y a deux manières d'utiliser chacune de ces méthodes de sortie ; Vous pouvez passer une liste d'objets dont leur représentation sera concaténée dans une seule chaine et s'affichera dans la console, ou vous pouvez passer une chaîne de caractères contenant zéro et plus de caractères de substitution suivis d'une liste d'objets avec lesquels les remplacer.</p>
-
-<h4 id="Afficher_un_seul_objet">Afficher un seul objet</h4>
-
-<p>La manière la plus simple d'utiliser les méthodes de « log » est d'afficher un seul objet :</p>
-
-<pre class="brush: js">var someObject = { str: "Some text", id: 5 };
+{{APIRef("Console API")}}
+
+L'objet **`console`** donne accès à la console de débogage du navigateur (par exemple., la[ Console Web](/fr/docs/Outils/Console_Web) dans Firefox). Les spécificités de fonctionnement varient d'un navigateur à l'autre, mais il y a tout de même un ensemble de fonctionnalités qui sont fournies de base.
+
+La `console` est accessible de n'importe quel objet global, {{domxref("Window")}} du cadre de navigation, {{domxref("WorkerGlobalScope")}} et ses variantes spécifiques pour les workers. Elle est exposée comme {{domxref ("Window.console")}} et peut être référencée simplement comme console. Par exemple :
+
+```js
+console.log("Failed to open the specified link")
+```
+
+Cette page documente les {{anch("Methods", "méthodes")}} disponibles pour l'objet `console` et donne quelques {{anch("Usage", "exemples d'utilisation")}}.
+
+{{AvailableInWorkers}}
+
+## Méthodes
+
+- {{domxref("Console.assert()")}}
+  - : Affiche un message et une trace d'appels dans la console si l'assertion en argument est à `false`.
+- {{domxref("Console.clear()")}}
+  - : Vide la console.
+- {{domxref("Console.count()")}}
+  - : Affiche le nombre de fois que la ligne a été appelée avec un label donné.
+- {{domxref("Console.debug()")}}
+  - : Un alias de `log().`
+
+> **Note :** À partir de Chromium 58, cette méthode n'apparaît que dans les consoles de navigateur Chromium lorsque le niveau "Verbose" est sélectionné.
+
+- {{domxref("Console.dir()")}} {{Non-standard_inline}}
+  - : Affiche une liste interactive des propriétés d'un objet JavaScript donné. Cette liste vous permet d'examiner le contenu des enfants de l'objet en ouvrant les détails (petits triangles).
+- {{domxref("Console.dirxml()")}} {{Non-standard_inline}}
+  - : Affiche si possible une représentation d'éléments XML/HTML d'un objet spécifié. Sinon, c'est une vue de l'objet JavaScript.
+- {{domxref("Console.error()")}}
+  - : Affiche un message d'erreur. Vous pouvez utiliser les [caractères de substitution](/fr/docs/Web/API/console#Utiliser_les_caractères_de_substitution) et des arguments supplémentaires avec cette méthode.
+- {{domxref("Console._exception()")}} {{Non-standard_inline}} {{deprecated_inline}}
+  - : Un alias d'`error();`
+- {{domxref("Console.group()")}}
+  - : Crée un nouveau [groupe](/fr/docs/Web/API/console#Using_groups_in_the_console) en ligne, correspondant à un nouveau niveau d'indentation. Contrairement à `group()`. Pour revenir au niveau précédent, appeler `groupEnd()`.
+- {{domxref("Console.groupCollapsed()")}}
+  - : Crée un nouveau [groupe](/fr/docs/Web/API/console#Using_groups_in_the_console) en ligne, correspondant à un nouveau niveau d'indentation. Contrairement à `group()` , cela commence avec le groupe en ligne effondré, nécessitant l'utilisation d'un bouton de divulgation pour l'agrandir. Pour revenir au niveau précédent, appeler `groupEnd()`.
+- {{domxref("Console.groupEnd()")}}
+  - : Quitte le [groupe](/fr/docs/Web/API/console#Using_groups_in_the_console) d'indentation courant.
+- {{domxref("Console.info()")}}
+  - : Affiche un message d'information. Vous pouvez utiliser les [caractères de substitution](/fr/docs/Web/API/console#Utiliser_les_caractères_de_substitution) et des arguments supplémentaires avec cette méthode.
+- {{domxref("Console.log()")}}
+  - : Permet d'afficher des messages dans la console. Vous pouvez utiliser les [caractères de substitution](/fr/docs/Web/API/console#Utiliser_les_caractères_de_substitution) et des arguments supplémentaires avec cette méthode.
+- {{domxref("Console.profile()")}} {{Non-standard_inline}}
+  - : démarre le profilage du navigateur (par exemple, l'[outil performances de Firefox](/fr/docs/Outils/Performance)). Vous pouvez spécifier un nom en option pour ce profil.
+- {{domxref("Console.profileEnd()")}} {{Non-standard_inline}}
+  - : Arrête le profilage. Vous pouvez voir le résultat de ce dernier dans l'outil « performance » du navigateur (par exemple, l'[outil performance Firefox](/fr/docs/Outils/Performance)).
+- {{domxref("Console.table()")}}
+  - : Affiche des données tabulaires comme un tableau.
+- {{domxref("Console.time()")}}
+  - : Démarre un [chronomètre](/fr/docs/Web/API/console#Timers) que l'on peut nommer en le spécifiant en tant que paramètre. Jusqu'à 10 000 chronomètres simultanés peuvent tourner sur une page.
+- {{domxref("Console.timeEnd()")}}
+  - : Arrête le [chronomètre](/fr/docs/Web/API/console#Timers) spécifié et affiche le temps écoulé en millisecondes depuis son démarrage.
+- {{domxref("Console.timeStamp()")}} {{Non-standard_inline}}
+  - : Ajoute un marqueur dans la [Timeline](https://developer.chrome.com/devtools/docs/timeline) du navigateur ou l'outil [Waterfall](/fr/docs/Outils/Performance/Waterfall).
+- {{domxref("Console.trace()")}}
+  - : Affiche une [trace d'appels](/fr/docs/Web/API/console#Traces_d%27appel).
+- {{domxref("Console.warn()")}}
+  - : Affiche un message d'avertissement. Vous pouvez utiliser les [caractères de substitution](/fr/docs/Web/API/console#Utiliser_les_caractères_de_substitution) et des arguments supplémentaires avec cette méthode.
+
+## Exemples d'utilisation
+
+### Afficher du texte dans la console
+
+La fonction la plus utilisée de la console est d'afficher du texte ou autres données. Il y a quatre sortes d'affichages que vous pouvez générer, en utilisant les méthodes {{domxref("console.log()")}}, {{domxref("console.info()")}}, {{domxref("console.warn()")}}, et {{domxref("console.error()")}}. Chacune de ces méthodes génére un affichage différent dans la console, et vous pouvez utiliser les fonctions de filtrage du navigateur pour voir uniquement les types de sortie qui vous intéressent.
+
+Il y a deux manières d'utiliser chacune de ces méthodes de sortie ; Vous pouvez passer une liste d'objets dont leur représentation sera concaténée dans une seule chaine et s'affichera dans la console, ou vous pouvez passer une chaîne de caractères contenant zéro et plus de caractères de substitution suivis d'une liste d'objets avec lesquels les remplacer.
+
+#### Afficher un seul objet
+
+La manière la plus simple d'utiliser les méthodes de « log » est d'afficher un seul objet :
+
+```js
+var someObject = { str: "Some text", id: 5 };
 console.log(someObject);
-</pre>
+```
 
-<p>L'affichage ressemblera à ceci :</p>
+L'affichage ressemblera à ceci :
 
-<pre>[09:27:13.475] ({str:"Some text", id:5})</pre>
+    [09:27:13.475] ({str:"Some text", id:5})
 
-<h4 id="Afficher_plusieurs_objets">Afficher plusieurs objets</h4>
+#### Afficher plusieurs objets
 
-<p>Vous pouvez aussi afficher plusieurs objets, en les séparant par une virgule, comme ceci :</p>
+Vous pouvez aussi afficher plusieurs objets, en les séparant par une virgule, comme ceci :
 
-<pre class="brush: js">var car = "Dodge Charger";
+```js
+var car = "Dodge Charger";
 var someObject = {str:"Some text", id:5};
-console.info("My first car was a", car, ". The object is: ", someObject);</pre>
+console.info("My first car was a", car, ". The object is: ", someObject);
+```
 
-<p>L'affichage ressemblera à ceci :</p>
+L'affichage ressemblera à ceci :
 
-<pre>[09:28:22.711] My first car was a Dodge Charger . The object is:  ({str:"Some text", id:5})
-</pre>
+    [09:28:22.711] My first car was a Dodge Charger . The object is:  ({str:"Some text", id:5})
 
-<h4 id="Utiliser_les_caractères_de_substitution">Utiliser les caractères de substitution</h4>
+#### Utiliser les caractères de substitution
 
-<p>Gecko 9.0 {{geckoRelease("9.0")}} a amené le support des caractères de substitution. Lorsque l'on passe en argument une chaîne à l'une des méthodes qui acceptent des chaînes de caractère, on peut utiliser ces caractères de substitution :</p>
+Gecko 9.0 {{geckoRelease("9.0")}} a amené le support des caractères de substitution. Lorsque l'on passe en argument une chaîne à l'une des méthodes qui acceptent des chaînes de caractère, on peut utiliser ces caractères de substitution :
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <td class="header">caractère de substitution</td>
-   <td class="header">description</td>
-  </tr>
-  <tr>
-   <td>%o or %O</td>
-   <td>Affiche un lien hypertexte sur un objet JavaScript. Cliquer le lien ouvre l'inspecteur.</td>
-  </tr>
-  <tr>
-   <td>%d or %i</td>
-   <td>Affiche un entier. Le formatage des nombres est supporté, par exemple console.log ("Foo% .2d", 1.1) affichera le nombre sous forme de deux chiffres significatifs avec un 0 : Foo 01</td>
-  </tr>
-  <tr>
-   <td>%s</td>
-   <td>Affiche une chaîne de caractères.</td>
-  </tr>
-  <tr>
-   <td>%f</td>
-   <td>Affiche un nombre réél. Le formatage est supporté, par exemple, <code>console.log("Foo %.2f", 1.1)</code> affichera un nombre avec 2 décimales : <code>Foo 1.10</code> .</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <td class="header">caractère de substitution</td>
+      <td class="header">description</td>
+    </tr>
+    <tr>
+      <td>%o or %O</td>
+      <td>
+        Affiche un lien hypertexte sur un objet JavaScript. Cliquer le lien
+        ouvre l'inspecteur.
+      </td>
+    </tr>
+    <tr>
+      <td>%d or %i</td>
+      <td>
+        Affiche un entier. Le formatage des nombres est supporté, par exemple
+        console.log ("Foo% .2d", 1.1) affichera le nombre sous forme de deux
+        chiffres significatifs avec un 0 : Foo 01
+      </td>
+    </tr>
+    <tr>
+      <td>%s</td>
+      <td>Affiche une chaîne de caractères.</td>
+    </tr>
+    <tr>
+      <td>%f</td>
+      <td>
+        Affiche un nombre réél. Le formatage est supporté, par exemple,
+        <code>console.log("Foo %.2f", 1.1)</code> affichera un nombre avec 2
+        décimales : <code>Foo 1.10</code> .
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<p>Chacun de ceux-ci ira chercher l'argument qui suit la chaîne à formater. Par exemple :</p>
+Chacun de ceux-ci ira chercher l'argument qui suit la chaîne à formater. Par exemple :
 
-<pre>for (var i=0; i&lt;5; i++) {
-  console.log("Hello, %s. You've called me %d times.", "Bob", i+1);
-}
-</pre>
+    for (var i=0; i<5; i++) {
+      console.log("Hello, %s. You've called me %d times.", "Bob", i+1);
+    }
 
-<p>L'affichage ressemblera à ceci :</p>
+L'affichage ressemblera à ceci :
 
-<pre>[13:14:13.481] Hello, Bob. You've called me 1 times.
-[13:14:13.483] Hello, Bob. You've called me 2 times.
-[13:14:13.485] Hello, Bob. You've called me 3 times.
-[13:14:13.487] Hello, Bob. You've called me 4 times.
-[13:14:13.488] Hello, Bob. You've called me 5 times.
-</pre>
+    [13:14:13.481] Hello, Bob. You've called me 1 times.
+    [13:14:13.483] Hello, Bob. You've called me 2 times.
+    [13:14:13.485] Hello, Bob. You've called me 3 times.
+    [13:14:13.487] Hello, Bob. You've called me 4 times.
+    [13:14:13.488] Hello, Bob. You've called me 5 times.
 
-<h4 id="Donner_un_style_à_l'affichage_de_la_console">Donner un style à l'affichage de la console</h4>
+#### Donner un style à l'affichage de la console
 
-<p>Vous pouvez utiliser l'instruction <code>"%c"</code> pour appliquer du style CSS à l'affichage de la console :</p>
+Vous pouvez utiliser l'instruction `"%c"` pour appliquer du style CSS à l'affichage de la console :
 
-<pre class="brush: js">console.log("This is %cMy stylish message", "color: yellow; font-style: italic; background-color: blue;padding: 2px");</pre>
+```js
+console.log("This is %cMy stylish message", "color: yellow; font-style: italic; background-color: blue;padding: 2px");
+```
 
-<p><img alt="" src="css-styling.png"></p>
+![](css-styling.png)
 
-<div class="note">
-<p><strong>Note :</strong> Un certain nombre de propriétés CSS sont supportées par ce style; vous devriez expérimenter et voir lesquels s'avèrent utiles.</p>
-</div>
+> **Note :** Un certain nombre de propriétés CSS sont supportées par ce style; vous devriez expérimenter et voir lesquels s'avèrent utiles.
 
-<p>{{h3_gecko_minversion("Using groups in the console", "9.0")}}</p>
+{{h3_gecko_minversion("Using groups in the console", "9.0")}}
 
-<p>Vous pouvez utiliser des groupes imbriqués pour vous aider à vous repérer dans l'affichage. Pour créer un nouveau bloc, appelez <code>console.group()</code>. La méthode <code>console.groupCollapsed()</code> est similaire, mais elle crée un bloc qui sera réduit.</p>
+Vous pouvez utiliser des groupes imbriqués pour vous aider à vous repérer dans l'affichage. Pour créer un nouveau bloc, appelez `console.group()`. La méthode `console.groupCollapsed()` est similaire, mais elle crée un bloc qui sera réduit.
 
-<div class="note">
-  <p><strong>Note :</strong> "Collapsed groups" ne sont pas supportés pour l'instant dans Gecko; La méthode <code>groupCollapsed()</code> est la même que <code>group()</code> en ce moment.</p>
-</div>
+> **Note :** "Collapsed groups" ne sont pas supportés pour l'instant dans Gecko; La méthode `groupCollapsed()` est la même que `group()` en ce moment.
 
-<p>Pour quitter le groupe dans lequel on est, appeler <code>console.groupEnd()</code>. Par exemple, examinez ce code :</p>
+Pour quitter le groupe dans lequel on est, appeler `console.groupEnd()`. Par exemple, examinez ce code :
 
-<pre class="brush: js">console.log("This is the outer level");
+```js
+console.log("This is the outer level");
 console.group();
 console.log("Level 2");
 console.group();
@@ -188,90 +191,71 @@ console.groupEnd();
 console.log("Back to level 2");
 console.groupEnd();
 console.debug("Back to the outer level");
-</pre>
+```
 
-<p>L'affichage ressemblera à ceci :</p>
+L'affichage ressemblera à ceci :
 
-<p><img alt="Démonstration de groupes imbriqués dans la console Firefox" src="console_groups_demo.png"></p>
+![Démonstration de groupes imbriqués dans la console Firefox](console_groups_demo.png)
 
-<div>{{h3_gecko_minversion("Timers", "10.0")}}</div>
+{{h3_gecko_minversion("Timers", "10.0")}}
 
-<p>Pour calculer la durée d'une opération spécifique, Gecko 10 a amené le supports des chronomètres dans l'objet <code>console</code>.  pour démarrer un chronomètre, appelez la méthode <code>console.time</code><code>()</code> en lui donnant un seul paramètre, son nom. Pour arrêter le chronomètre et obtenir le temps écoulé en millisecondes, utilisez la méthode <code>console.timeEnd()</code>, en passant à nouveau le nom du chronomètre comme paramètre. Une seule page peut faire tourner un maximum de 10.000 chronomètres.</p>
+Pour calculer la durée d'une opération spécifique, Gecko 10 a amené le supports des chronomètres dans l'objet `console`.  pour démarrer un chronomètre, appelez la méthode ` console.time``() ` en lui donnant un seul paramètre, son nom. Pour arrêter le chronomètre et obtenir le temps écoulé en millisecondes, utilisez la méthode `console.timeEnd()`, en passant à nouveau le nom du chronomètre comme paramètre. Une seule page peut faire tourner un maximum de 10.000 chronomètres.
 
-<p>Par exemple, voici ce code :</p>
+Par exemple, voici ce code :
 
-<pre class="brush: js">console.time("answer time");
+```js
+console.time("answer time");
 alert("Click to continue");
 console.timeEnd("answer time");
-</pre>
+```
 
-<p>affichera le temps pour l'utilisateur dont il a eu besoin pour faire disparaitre la fenêtre d'alerte :</p>
+affichera le temps pour l'utilisateur dont il a eu besoin pour faire disparaitre la fenêtre d'alerte :
 
-<p><img src="console-timelog.png"></p>
+![](console-timelog.png)
 
-<p>Notez que le nom du chronomètre est affiché deux fois, à son départ et quand il se termine.</p>
+Notez que le nom du chronomètre est affiché deux fois, à son départ et quand il se termine.
 
-<div class="note">
-  <p><strong>Note:</strong> Il est important de noter que si vous vous servez de ceci pour enregistrer les durées du traffic réseau, le chronomètre renverra le temps total d'échanges, alors que les durées affichées dans l'onglet network représente seulement la durée à la réception du header. Si vous avez activer l'enregistrement de réponse du body, le temps listé pour la réponse du header et du body devrait correspondre à ce qu'affiche la sortie de la console.</p>
-</div>
+> **Note :** Il est important de noter que si vous vous servez de ceci pour enregistrer les durées du traffic réseau, le chronomètre renverra le temps total d'échanges, alors que les durées affichées dans l'onglet network représente seulement la durée à la réception du header. Si vous avez activer l'enregistrement de réponse du body, le temps listé pour la réponse du header et du body devrait correspondre à ce qu'affiche la sortie de la console.
 
-<h3 id="Traces_d'appel">Traces d'appel</h3>
+### Traces d'appel
 
-<p>L'objet console supporte aussi l'affichage d'une trace d'appels ; cela montre le chemin pris pour atteindre l'endroit auquel vous avez fait appel à la fonction {{domxref("console.trace()")}}. Ce qui donne avec ce code :</p>
+L'objet console supporte aussi l'affichage d'une trace d'appels ; cela montre le chemin pris pour atteindre l'endroit auquel vous avez fait appel à la fonction {{domxref("console.trace()")}}. Ce qui donne avec ce code :
 
-<pre>foo();
+    foo();
 
-function foo() {
-  function bar() {
-    console.trace();
-  }
-  bar();
-}
-</pre>
+    function foo() {
+      function bar() {
+        console.trace();
+      }
+      bar();
+    }
 
-<p>L'affichage dans la console ressemblera à ceci :</p>
+L'affichage dans la console ressemblera à ceci :
 
-<p><img alt="" src="api-trace2.png"></p>
+![](api-trace2.png)
 
-<h2 id="Specification">Spécification</h2>
+## Spécification
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Console API')}}</td>
-   <td>{{Spec2('Console API')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Specification                        | Status                           | Comment              |
+| ------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName('Console API')}} | {{Spec2('Console API')}} | Définition initiale. |
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<ul>
- <li>Au moins dans Firefox, si une page définit un objet console, cet objet remplace celui créé dans Firefox.</li>
- <li>Antérieur à {{Gecko ("12.0")}}, les méthodes de l'objet console ne fonctionnent que lorsque la console Web est ouverte. À partir de {{Gecko ("12.0")}}, la sortie est mise en cache jusqu'à ce que la console Web soit ouverte, puis affichée à ce moment-là.</li>
- <li>Il est à noter que l'objet de console intégré de Firefox est compatible avec celui fourni par <a href="http://getfirebug.com/">Firebug</a>.</li>
-</ul>
+- Au moins dans Firefox, si une page définit un objet console, cet objet remplace celui créé dans Firefox.
+- Antérieur à {{Gecko ("12.0")}}, les méthodes de l'objet console ne fonctionnent que lorsque la console Web est ouverte. À partir de {{Gecko ("12.0")}}, la sortie est mise en cache jusqu'à ce que la console Web soit ouverte, puis affichée à ce moment-là.
+- Il est à noter que l'objet de console intégré de Firefox est compatible avec celui fourni par [Firebug](http://getfirebug.com/).
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Outils">Outils de développement</a></li>
- <li><a href="/fr/docs/Outils/Console_Web">Console web</a> - comment la console Web de Firefox gère les appels d'API de console</li>
- <li><a href="/fr/docs/Outils/D%C3%A9bogage_distant">Débogage distant</a> - comment afficher la sortie de la console lorsque la cible de débogage est un périphérique mobile</li>
- <li><a href="/fr/docs/Archive/B2G_OS/Debugging/Journalisation_console">Journalisation console sur l'appareil</a> - comment se connecter sur les appareils Firefox OS</li>
-</ul>
+- [Outils de développement](/fr/docs/Outils)
+- [Console web](/fr/docs/Outils/Console_Web) - comment la console Web de Firefox gère les appels d'API de console
+- [Débogage distant](/fr/docs/Outils/D%C3%A9bogage_distant) - comment afficher la sortie de la console lorsque la cible de débogage est un périphérique mobile
+- [Journalisation console sur l'appareil](/fr/docs/Archive/B2G_OS/Debugging/Journalisation_console) - comment se connecter sur les appareils Firefox OS
 
-<h3 id="Autres_implémentations">Autres implémentations</h3>
+### Autres implémentations
 
-<ul>
- <li><a href="https://developers.google.com/chrome-developer-tools/docs/console-api">Google Chrome DevTools</a></li>
- <li><a href="http://getfirebug.com/wiki/index.php/Console_API">Firebug</a></li>
- <li><a href="http://msdn.microsoft.com/en-us/library/hh772173(v=vs.85).aspx">Internet Explorer</a></li>
- <li><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html">Safari</a></li>
-</ul>
+- [Google Chrome DevTools](https://developers.google.com/chrome-developer-tools/docs/console-api)
+- [Firebug](http://getfirebug.com/wiki/index.php/Console_API)
+- [Internet Explorer](<http://msdn.microsoft.com/en-us/library/hh772173(v=vs.85).aspx>)
+- [Safari](https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html)
diff --git a/files/fr/web/api/console/info/index.md b/files/fr/web/api/console/info/index.md
index a9263f8f27..576900b263 100644
--- a/files/fr/web/api/console/info/index.md
+++ b/files/fr/web/api/console/info/index.md
@@ -9,57 +9,39 @@ tags:
   - web console
 translation_of: Web/API/Console/info
 ---
-<p>{{ APIRef("Console API") }}{{Non-standard_header}}</p>
+{{ APIRef("Console API") }}{{Non-standard_header}}
 
-<p>Affiche un message informatif dans la console du navigateur. Dans Firefox et Chrome, une petit icône de <em>i </em>s'affiche devant le message.</p>
+Affiche un message informatif dans la console du navigateur. Dans Firefox et Chrome, une petit icône de _i_ s'affiche devant le message.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">console.info(<em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]);
-console.info(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]);
-</pre>
+    console.info(obj1 [, obj2, ..., objN]);
+    console.info(msg [, subst1, ..., substN]);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>obj1</code> ... <code>objN</code></dt>
- <dd>Une liste d'objets JavaScript à afficher. La représentation, en chaîne de caractéres, de chacun de ces objets est affichée dans l'ordre de la liste.</dd>
- <dt><code>msg</code></dt>
- <dd>Une chaîne de caractères JavaScript contenant zéro ou plusieurs subdivisions de chaîne de caractères.</dd>
- <dt><code>subst1</code> ... <code>substN</code></dt>
- <dd>Une liste d'objets JavaScript qui remplace les chaînes de caractéres de <code>msg</code>. Cela vous donne plus de contrôle sur le format de sortie.</dd>
-</dl>
+- `obj1` ... `objN`
+  - : Une liste d'objets JavaScript à afficher. La représentation, en chaîne de caractéres, de chacun de ces objets est affichée dans l'ordre de la liste.
+- `msg`
+  - : Une chaîne de caractères JavaScript contenant zéro ou plusieurs subdivisions de chaîne de caractères.
+- `subst1` ... `substN`
+  - : Une liste d'objets JavaScript qui remplace les chaînes de caractéres de `msg`. Cela vous donne plus de contrôle sur le format de sortie.
 
-<p>Voir <a href="/fr/docs/Web/API/Console#Outputting_text_to_the_console">Afficher du texte sur la console</a> dans la documentation de {{ domxref("console") }} pour plus de détails.</p>
+Voir [Afficher du texte sur la console](/fr/docs/Web/API/Console#Outputting_text_to_the_console) dans la documentation de {{ domxref("console") }} pour plus de détails.
 
-<h2 id="Specification">Spécification</h2>
+## Spécification
 
-<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("Console API", "#info", "console.info()")}}</td>
-      <td>{{Spec2("Console API")}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                            | Statut                           | Commentaire          |
+| ------------------------------------------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName("Console API", "#info", "console.info()")}} | {{Spec2("Console API")}} | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Console.info")}}</p>
+{{Compat("api.Console.info")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li><a href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
-  <li><a href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li>
-</ul>
+- [Opera Dragonfly documentation: Console](http://www.opera.com/dragonfly/documentation/console/)
+- [MSDN: Using the F12 Tools Console to View Errors and Status](http://msdn.microsoft.com/library/gg589530)
diff --git a/files/fr/web/api/console/log/index.md b/files/fr/web/api/console/log/index.md
index c1f9577c6a..904e2809b6 100644
--- a/files/fr/web/api/console/log/index.md
+++ b/files/fr/web/api/console/log/index.md
@@ -4,61 +4,55 @@ slug: Web/API/Console/log
 translation_of: Web/API/Console/log
 browser-compat: api.Console.log
 ---
-<div>{{APIRef("Console API")}}</div>
+{{APIRef("Console API")}}
 
-<p>La méthode <strong><code>console.log()</code></strong> affiche un message dans la console Web. Le message peut être une simple chaine de caractères (avec des valeurs optionnelles de substitution) ou peut être composé d'un ou plusieurs objets JavaScript.</p>
+La méthode **`console.log()`** affiche un message dans la console Web. Le message peut être une simple chaine de caractères (avec des valeurs optionnelles de substitution) ou peut être composé d'un ou plusieurs objets JavaScript.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">
-console.log(<var>obj1</var> [, <var>obj2</var>, ..., <var>objN</var>]);
-console.log(<var>msg</var> [, <var>subst1</var>, ..., <var>substN</var>]);
-</pre>
+```js
+console.log(obj1 [, obj2, ..., objN]);
+console.log(msg [, subst1, ..., substN]);
+```
 
-<h3 id="parameters">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>obj1</code> ... <code>objN</code></dt>
- <dd>Une liste d'objets Javascript à afficher. Les représentations textuelles de chacun de ces objets seront affichées dans la console du navigateur selon l'ordre indiqué. Attention, pour les versions récentes de Chrome et Firefox, ce qui apparaît dans la console est une <strong>référence à l'objet</strong> et pas nécessairement la valeur de l'objet au moment de l'appel à <code>console.log()</code> mais sa valeur au moment où on ouvre la console.</dd>
- <dt><code>msg</code></dt>
- <dd>Une chaîne de caractères JavaScript contenant zéro ou plusieurs chaînes de substitution.</dd>
- <dt><code>subst1</code> ... <code>substN</code></dt>
- <dd>Des objets JavaScript dont les valeurs textuelles remplaceront les emplacements à substituer indiqués dans <code>msg</code>. Cela offre plus de contrôle sur le format d'affichage.</dd>
-</dl>
+- `obj1` ... `objN`
+  - : Une liste d'objets Javascript à afficher. Les représentations textuelles de chacun de ces objets seront affichées dans la console du navigateur selon l'ordre indiqué. Attention, pour les versions récentes de Chrome et Firefox, ce qui apparaît dans la console est une **référence à l'objet** et pas nécessairement la valeur de l'objet au moment de l'appel à `console.log()` mais sa valeur au moment où on ouvre la console.
+- `msg`
+  - : Une chaîne de caractères JavaScript contenant zéro ou plusieurs chaînes de substitution.
+- `subst1` ... `substN`
+  - : Des objets JavaScript dont les valeurs textuelles remplaceront les emplacements à substituer indiqués dans `msg`. Cela offre plus de contrôle sur le format d'affichage.
 
-<p>Voir <a href="/fr/docs/Web/API/Console#outputting_text_to_the_console">Afficher du texte sur la console</a> dans la documentation de <a href="/fr/docs/Web/API/Console"><code>console</code></a> pour plus de détails.</p>
+Voir [Afficher du texte sur la console](/fr/docs/Web/API/Console#outputting_text_to_the_console) dans la documentation de [`console`](/fr/docs/Web/API/Console) pour plus de détails.
 
-<h2 id="difference_between_log_and_dir">Différence entre console.log() et console.dir()</h2>
+## Différence entre console.log() et console.dir()
 
-<p>Vous pourriez vous demander quelles sont les différences entre <a href="/fr/docs/Web/API/Console/dir"><code>console.dir()</code></a> et <code>console.log()</code>.</p>
+Vous pourriez vous demander quelles sont les différences entre [`console.dir()`](/fr/docs/Web/API/Console/dir) et `console.log()`.
 
-<p>Celles-ci concernent principalement la gestion particulière des objets du DOM :</p>
-<ul>
- <li><code>console.log()</code> affiche les éléments dans un arbre de type HTML,</li>
- <li><code>console.dir()</code> affiche les propriétés de l'objet JavaScript.</li>
-</ul>
+Celles-ci concernent principalement la gestion particulière des objets du DOM :
 
-<p><img alt="" src="dozdcyr.png"></p>
+- `console.log()` affiche les éléments dans un arbre de type HTML,
+- `console.dir()` affiche les propriétés de l'objet JavaScript.
 
+![](dozdcyr.png)
 
-<h2 id="logging_objects">Affichage d'objets dans la console</h2>
+## Affichage d'objets dans la console
 
-<p>Évitez d'utiliser <code>console.log(obj)</code> mais préférez <code>console.log(JSON.parse(JSON.stringify(obj)))</code> si vous souhaîtez être sûr·e d'observer la valeur de l'objet au moment de l'exécution de <code>console.log()</code>. Autrement, de nombreux navigateurs produisent un affichage interactif de l'objet qui se maintient à jour quand les propriétés de l'objet changent. Cela ne pourrait pas être ce que vous voulez et peut porter à confusion.</p>
+Évitez d'utiliser `console.log(obj)` mais préférez `console.log(JSON.parse(JSON.stringify(obj)))` si vous souhaîtez être sûr·e d'observer la valeur de l'objet au moment de l'exécution de `console.log()`. Autrement, de nombreux navigateurs produisent un affichage interactif de l'objet qui se maintient à jour quand les propriétés de l'objet changent. Cela ne pourrait pas être ce que vous voulez et peut porter à confusion.
 
-<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://docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/console/console-log">Docs Microsoft : Edge - Afficher des messages dans la console</a></li>
- <li><a href="https://developers.google.com/chrome-developer-tools/docs/console-api#consoledirobject">La référence de l'API Console pour Chrome</a></li>
- <li><a href="https://nodejs.org/docs/latest/api/console.html#console_console_log_data">NodeJS : API Console</a></li>
-</ul>
+- [Docs Microsoft : Edge - Afficher des messages dans la console](https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/console/console-log)
+- [La référence de l'API Console pour Chrome](https://developers.google.com/chrome-developer-tools/docs/console-api#consoledirobject)
+- [NodeJS : API Console](https://nodejs.org/docs/latest/api/console.html#console_console_log_data)
diff --git a/files/fr/web/api/console/profile/index.md b/files/fr/web/api/console/profile/index.md
index d26727f201..f8a54b5e02 100644
--- a/files/fr/web/api/console/profile/index.md
+++ b/files/fr/web/api/console/profile/index.md
@@ -9,34 +9,29 @@ tags:
   - débogage
 translation_of: Web/API/Console/profile
 ---
-<p>{{APIRef("Console API")}}{{Non-standard_header}}</p>
+{{APIRef("Console API")}}{{Non-standard_header}}
 
-<p>Commence l'enregistrement d'un profil de performance (par exemple, l'outil <a href="/fr/docs/Outils/Performance">performance de Firefox</a>).</p>
+Commence l'enregistrement d'un profil de performance (par exemple, l'outil [performance de Firefox](/fr/docs/Outils/Performance)).
 
-<p>Vous pouvez éventuellement fournir un argument pour nommer le profil, ce qui vous permet d'arrêter uniquement ce profil si plusieurs profils sont enregistrés. Voir {{domxref("Console.profileEnd()")}} pour voir comment cet argument est interprété.</p>
+Vous pouvez éventuellement fournir un argument pour nommer le profil, ce qui vous permet d'arrêter uniquement ce profil si plusieurs profils sont enregistrés. Voir {{domxref("Console.profileEnd()")}} pour voir comment cet argument est interprété.
 
-<p>Pour arrêter l'enregistrement, appeler {{domxref("Console.profileEnd()")}}.</p>
+Pour arrêter l'enregistrement, appeler {{domxref("Console.profileEnd()")}}.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">console.profile(<em>profileName</em>);
-</pre>
+    console.profile(profileName);
 
-<h2 id="Paramètres">Paramètres</h2>
+## Paramètres
 
-<dl>
- <dt><code>profileName</code></dt>
- <dd>Le nom à donner au profil. Facultatif.</dd>
-</dl>
+- `profileName`
+  - : Le nom à donner au profil. Facultatif.
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Console.profile")}}</p>
+{{Compat("api.Console.profile")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("Console.profileEnd()")}}</li>
-</ul>
+- {{domxref("Console.profileEnd()")}}
diff --git a/files/fr/web/api/console/profileend/index.md b/files/fr/web/api/console/profileend/index.md
index 9b267eb029..03466b8172 100644
--- a/files/fr/web/api/console/profileend/index.md
+++ b/files/fr/web/api/console/profileend/index.md
@@ -8,42 +8,33 @@ tags:
   - Profils
 translation_of: Web/API/Console/profileEnd
 ---
-<p>{{APIRef("Console API")}}{{Non-standard_header}}</p>
+{{APIRef("Console API")}}{{Non-standard_header}}
 
-<div class="warning">
-<p><strong>Attention :</strong> L'appel de cet API immédiatement après <code>console.profile()</code> peut l'empêcher de fonctionner. Pour contourner ce problème, appelez-le par un  <code>setTimeout</code> avec un délai d'au-moins 5 ms. Voir <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1173588">bug #1173588</a>.</p>
-</div>
+> **Attention :** L'appel de cet API immédiatement après `console.profile()` peut l'empêcher de fonctionner. Pour contourner ce problème, appelez-le par un  `setTimeout` avec un délai d'au-moins 5 ms. Voir [bug #1173588](https://bugzilla.mozilla.org/show_bug.cgi?id=1173588).
 
-<p>La méthode <code>profileEnd</code>  arrête l'enregistrement d'un profil lancé précédemment avec {{domxref("Console.profile()")}}.</p>
+La méthode `profileEnd`  arrête l'enregistrement d'un profil lancé précédemment avec {{domxref("Console.profile()")}}.
 
-<p>Vous pouvez éventuellement insérer un argument pour nommer le profil. Cela vous permet d'arrêter uniquement ce profil si vous avez enregistré plusieurs profils.</p>
+Vous pouvez éventuellement insérer un argument pour nommer le profil. Cela vous permet d'arrêter uniquement ce profil si vous avez enregistré plusieurs profils.
 
-<ul>
- <li>Si <code>Console.profileEnd()</code> reçoit un nom de profil qui correspond au nom d'un profil en cours d'enregistrement, ce profil est arrêté.</li>
- <li>Si <code>Console.profileEnd()</code> reçoit un nom de profil qui ne correspond pas au nom d'un profil en cours d'enregistrement, aucune modification n'est apportée.</li>
- <li>Si <code>Console.profileEnd()</code> ne reçoit pas un nom de profil, le dernier profil démarré est arrêté.</li>
-</ul>
+- Si `Console.profileEnd()` reçoit un nom de profil qui correspond au nom d'un profil en cours d'enregistrement, ce profil est arrêté.
+- Si `Console.profileEnd()` reçoit un nom de profil qui ne correspond pas au nom d'un profil en cours d'enregistrement, aucune modification n'est apportée.
+- Si `Console.profileEnd()` ne reçoit pas un nom de profil, le dernier profil démarré est arrêté.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">console.profileEnd(<em>profileName</em>);
-</pre>
+    console.profileEnd(profileName);
 
-<h2 id="Paramètres">Paramètres</h2>
+## Paramètres
 
-<dl>
- <dt><code>profileName</code></dt>
- <dd>Le nom à donner au profil. Ce paramètre est facultatif.</dd>
-</dl>
+- `profileName`
+  - : Le nom à donner au profil. Ce paramètre est facultatif.
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Console.profileEnd")}}</p>
+{{Compat("api.Console.profileEnd")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("Console.profile()")}}</li>
-</ul>
+- {{domxref("Console.profile()")}}
diff --git a/files/fr/web/api/console/table/index.md b/files/fr/web/api/console/table/index.md
index 1f5beabcd2..d10348512f 100644
--- a/files/fr/web/api/console/table/index.md
+++ b/files/fr/web/api/console/table/index.md
@@ -10,29 +10,32 @@ tags:
   - débogage
 translation_of: Web/API/Console/table
 ---
-<div>{{APIRef("Console API")}}</div>
+{{APIRef("Console API")}}
 
-<p>Affiche des données tabulaires sous la forme d'un tableau.</p>
+Affiche des données tabulaires sous la forme d'un tableau.
 
-<p>Cette fonction prend un argument obligatoire <code>data</code>, qui doit être un tableau (Array) ou un objet, et un argument facultatif <code>columns</code>.</p>
+Cette fonction prend un argument obligatoire `data`, qui doit être un tableau (Array) ou un objet, et un argument facultatif `columns`.
 
-<p>Il affiche <code>data</code> sous la forme d'un tableau. Chaque élément dans le tableau fourni (Array) sera affiché comme une ligne dans le tableau. (ou les propriétés énumérables s'il s'agit d'un objet)</p>
+Il affiche `data` sous la forme d'un tableau. Chaque élément dans le tableau fourni (Array) sera affiché comme une ligne dans le tableau. (ou les propriétés énumérables s'il s'agit d'un objet)
 
-<p>La première colonne dans le tableau sera intitulé <code>(index)</code>. Si <code>data</code> est un tableau (Array), alors les valeurs de cette colonne seront les index du tableau (Array). Si <code>data</code> est un objet, alors ses valeurs seront les noms des propriétés.À noter (dans Firefox) :  <code>console.table</code> est limité à l'affichage de 1000 lignes (la première ligne est l'index étiqueté)</p>
+La première colonne dans le tableau sera intitulé `(index)`. Si `data` est un tableau (Array), alors les valeurs de cette colonne seront les index du tableau (Array). Si `data` est un objet, alors ses valeurs seront les noms des propriétés.À noter (dans Firefox) :  `console.table` est limité à l'affichage de 1000 lignes (la première ligne est l'index étiqueté)
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h3 id="Collections_de_données_primitives">Collections de données primitives</h3>
+### Collections de données primitives
 
-<p><code>data</code> peut contenir un tableau ou un objet.</p>
+`data` peut contenir un tableau ou un objet.
 
-<pre class="brush: js">// un tableau de chaînes de caractères
+```js
+// un tableau de chaînes de caractères
 
-console.table(["apples", "oranges", "bananas"]);</pre>
+console.table(["apples", "oranges", "bananas"]);
+```
 
-<p><img alt="" src="console-table-array.png"></p>
+![](console-table-array.png)
 
-<pre class="brush: js">// un objet dont les propriétés sont des chaînes de caractères
+```js
+// un objet dont les propriétés sont des chaînes de caractères
 
 function Person(firstName, lastName) {
   this.firstName = firstName;
@@ -41,22 +44,26 @@ function Person(firstName, lastName) {
 
 var me = new Person("John", "Smith");
 
-console.table(me);</pre>
+console.table(me);
+```
 
-<p><img alt="" src="console-table-simple-object.png"></p>
+![](console-table-simple-object.png)
 
-<h3 id="Collections_de_données_composées">Collections de données composées</h3>
+### Collections de données composées
 
-<p>Si les éléments d'un tableau, ou les propriétés d'un objet, sont eux-mêmes des tableaux ou des objets, alors ces éléments ou propriétés sont énumérés dans chaque ligne, un élément par colonne :</p>
+Si les éléments d'un tableau, ou les propriétés d'un objet, sont eux-mêmes des tableaux ou des objets, alors ces éléments ou propriétés sont énumérés dans chaque ligne, un élément par colonne :
 
-<pre class="brush: js">// un tableau de tableaux
+```js
+// un tableau de tableaux
 
 var people = [["John", "Smith"], ["Jane", "Doe"], ["Emily", "Jones"]]
-console.table(people);</pre>
+console.table(people);
+```
 
-<p><img alt="Un tableau qui affiche un tableau de tableaux" src="console-table-array-of-array.png"></p>
+![Un tableau qui affiche un tableau de tableaux](console-table-array-of-array.png)
 
-<pre class="brush: js">// un tableau d'objets
+```js
+// un tableau d'objets
 
 function Person(firstName, lastName) {
   this.firstName = firstName;
@@ -67,13 +74,15 @@ var john = new Person("John", "Smith");
 var jane = new Person("Jane", "Doe");
 var emily = new Person("Emily", "Jones");
 
-console.table([john, jane, emily]);</pre>
+console.table([john, jane, emily]);
+```
 
-<p>Notez que si le tableau contient des objets, alors les colonnes seront nommées avec les noms des propriétés.</p>
+Notez que si le tableau contient des objets, alors les colonnes seront nommées avec les noms des propriétés.
 
-<p><img alt="Un tableau qui affiche un tableau d'objets" src="console-table-array-of-objects.png"></p>
+![Un tableau qui affiche un tableau d'objets](console-table-array-of-objects.png)
 
-<pre class="brush: js">// un objet contenant des propriétés qui sont des objets
+```js
+// un objet contenant des propriétés qui sont des objets
 
 var family = {};
 
@@ -81,15 +90,17 @@ family.mother = new Person("Jane", "Smith");
 family.father = new Person("John", "Smith");
 family.daughter = new Person("Emily", "Smith");
 
-console.table(family);</pre>
+console.table(family);
+```
 
-<p><img alt="Un tableau affichant des objets composés d'objets" src="console-table-object-of-objects.png"></p>
+![Un tableau affichant des objets composés d'objets](console-table-object-of-objects.png)
 
-<h3 id="Restreindre_les_colonnes_affichées">Restreindre les colonnes affichées</h3>
+### Restreindre les colonnes affichées
 
-<p>Par défaut, <code>console.table()</code> liste tous les éléments pour chaque ligne. Vous pouvez utiliser le paramètre facultatif <code>columns</code> pour sélectionner un sous-ensemble de colonnes à afficher :</p>
+Par défaut, `console.table()` liste tous les éléments pour chaque ligne. Vous pouvez utiliser le paramètre facultatif `columns` pour sélectionner un sous-ensemble de colonnes à afficher :
 
-<pre class="brush: js">// un tableau d'objets, affichant seulement firstName
+```js
+// un tableau d'objets, affichant seulement firstName
 
 function Person(firstName, lastName) {
   this.firstName = firstName;
@@ -100,47 +111,32 @@ var john = new Person("John", "Smith");
 var jane = new Person("Jane", "Doe");
 var emily = new Person("Emily", "Jones");
 
-console.table([john, jane, emily], ["firstName"]);</pre>
+console.table([john, jane, emily], ["firstName"]);
+```
 
-<p><img alt="Un tableau affichant un tableau d'objets dont la sortie est filtrée" src="console-table-array-of-objects-firstname-only.png"></p>
+![Un tableau affichant un tableau d'objets dont la sortie est filtrée](console-table-array-of-objects-firstname-only.png)
 
-<h3 id="Ordonner_les_colonnes">Ordonner les colonnes</h3>
+### Ordonner les colonnes
 
-<p>Vous pouvez ordonner les colonnes en cliquant sur l'intitulé de la colonne.</p>
+Vous pouvez ordonner les colonnes en cliquant sur l'intitulé de la colonne.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">console.table(data [, <em>columns]</em>);
-</pre>
+    console.table(data [, columns]);
 
-<h3 id="Parameters">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>data</code></dt>
- <dd>La donnée à afficher. Doit être un tableau ou un objet.</dd>
- <dt><code>columns</code></dt>
- <dd>Un tableau contenant les noms des colonnes à inclure dans la sortie.</dd>
-</dl>
+- `data`
+  - : La donnée à afficher. Doit être un tableau ou un objet.
+- `columns`
+  - : Un tableau contenant les noms des colonnes à inclure dans la sortie.
 
-<h2 id="Specification">Spécification</h2>
+## Spécification
 
-<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("Console API", "#table", "console.table()")}}</td>
-   <td>{{Spec2("Console API")}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                | Statut                           | Commentaire         |
+| ---------------------------------------------------------------------------- | -------------------------------- | ------------------- |
+| {{SpecName("Console API", "#table", "console.table()")}} | {{Spec2("Console API")}} | Définition initiale |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<div>{{Compat("api.Console.table")}}</div>
+{{Compat("api.Console.table")}}
diff --git a/files/fr/web/api/console/time/index.md b/files/fr/web/api/console/time/index.md
index 271b2e5497..af170f9326 100644
--- a/files/fr/web/api/console/time/index.md
+++ b/files/fr/web/api/console/time/index.md
@@ -11,50 +11,32 @@ tags:
   - débogage
 translation_of: Web/API/Console/time
 ---
-<p>{{APIRef("Console API")}}</p>
+{{APIRef("Console API")}}
 
-<p>Chronomètre une opération. Chaque "timer" doit avoir un nom unique. Il peut y avoir jusqu'à 10000 "timers" sur une même page. En appelant {{ domxref("console.timeEnd()") }} avec le même nom, le navigateur affichera le temps d'execution en millisecondes dans la console.</p>
+Chronomètre une opération. Chaque "timer" doit avoir un nom unique. Il peut y avoir jusqu'à 10000 "timers" sur une même page. En appelant {{ domxref("console.timeEnd()") }} avec le même nom, le navigateur affichera le temps d'execution en millisecondes dans la console.
 
-<p>Voir <a href="/fr/docs/Web/API/console#Timers">Timers</a> dans la documentation de {{ domxref("console") }} pour plus de details et d'exemples.</p>
+Voir [Timers](/fr/docs/Web/API/console#Timers) dans la documentation de {{ domxref("console") }} pour plus de details et d'exemples.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">console.time(<em>label</em>);
-</pre>
+    console.time(label);
 
-<h2 id="Paramètres">Paramètres</h2>
+## Paramètres
 
-<dl>
- <dt><code>label</code></dt>
- <dd>Nom qui identifiera le nouveau "timer". Il faut utiliser le même nom pour {{ domxref("console.timeEnd()") }} pour arrêter le "timer" et afficher le temps dans la console.</dd>
-</dl>
+- `label`
+  - : Nom qui identifiera le nouveau "timer". Il faut utiliser le même nom pour {{ domxref("console.timeEnd()") }} pour arrêter le "timer" et afficher le temps dans la console.
 
-<h2 id="Specification">Spécification</h2>
+## Spécification
 
-<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("Console API", "#time", "console.time()")}}</td>
-   <td>{{Spec2("Console API")}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                            | Statut                           | Commentaire         |
+| ------------------------------------------------------------------------ | -------------------------------- | ------------------- |
+| {{SpecName("Console API", "#time", "console.time()")}} | {{Spec2("Console API")}} | Définition initiale |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité  des navigateurs</h2>
+## Compatibilité  des navigateurs
 
-<p>{{Compat("api.Console.time")}}</p>
+{{Compat("api.Console.time")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{ domxref("console.timeEnd()") }}</li>
- <li><a href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
-</ul>
+- {{ domxref("console.timeEnd()") }}
+- [Opera Dragonfly documentation: Console](http://www.opera.com/dragonfly/documentation/console/)
diff --git a/files/fr/web/api/console/timeend/index.md b/files/fr/web/api/console/timeend/index.md
index dc45ee8468..8e92a7eaf5 100644
--- a/files/fr/web/api/console/timeend/index.md
+++ b/files/fr/web/api/console/timeend/index.md
@@ -10,49 +10,31 @@ tags:
   - Méthode
 translation_of: Web/API/Console/timeEnd
 ---
-<div>{{APIRef("Console API")}}</div>
+{{APIRef("Console API")}}
 
-<p>Arrête un chronomètre (<em>timer</em>) précédemment démarré par {{domxref("console.time()")}}.</p>
+Arrête un chronomètre (_timer_) précédemment démarré par {{domxref("console.time()")}}.
 
-<p>Voir <a href="/fr/docs/Web/API/console#Timers">Timers</a> dans la documentation de {{domxref("console")}} pour des détails et des exemples.</p>
+Voir [Timers](/fr/docs/Web/API/console#Timers) dans la documentation de {{domxref("console")}} pour des détails et des exemples.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">console.timeEnd(<em>label</em>);
-</pre>
+    console.timeEnd(label);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>label</code></dt>
- <dd>Le nom du <em>timer</em> à stopper. Une fois arrêté, le temps écoulé est automatiquement affiché dans la <a href="/fr/docs/Outils/Console_Web">Console Web</a>.</dd>
-</dl>
+- `label`
+  - : Le nom du _timer_ à stopper. Une fois arrêté, le temps écoulé est automatiquement affiché dans la [Console Web](/fr/docs/Outils/Console_Web).
 
-<h2 id="Spécification">Spécification</h2>
+## Spécification
 
-<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("Console API", "#timeend", "console.timeEnd()")}}</td>
-   <td>{{Spec2("Console API")}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                    | Statut                           | Commentaire         |
+| -------------------------------------------------------------------------------- | -------------------------------- | ------------------- |
+| {{SpecName("Console API", "#timeend", "console.timeEnd()")}} | {{Spec2("Console API")}} | Définition initiale |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<div>{{Compat("api.Console.timeEnd")}}</div>
+{{Compat("api.Console.timeEnd")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a>.</li>
-</ul>
+- [Opera Dragonfly documentation: Console](http://www.opera.com/dragonfly/documentation/console/).
diff --git a/files/fr/web/api/console/timelog/index.md b/files/fr/web/api/console/timelog/index.md
index cd1f33d3be..b8fb84bc0c 100644
--- a/files/fr/web/api/console/timelog/index.md
+++ b/files/fr/web/api/console/timelog/index.md
@@ -11,89 +11,67 @@ tags:
   - débogage
 translation_of: Web/API/Console/timeLog
 ---
-<div>{{APIRef("Console API")}}</div>
+{{APIRef("Console API")}}
 
-<p>Affiche dans la console la valeur actuelle d'un timer précédemment appelé par {{domxref("console.time()")}}</p>
+Affiche dans la console la valeur actuelle d'un timer précédemment appelé par {{domxref("console.time()")}}
 
-<p>Voir <a href="/en-US/docs/Web/API/console#Timers">Timers</a> dans la documentation pour des exemples et plus de détails</p>
+Voir [Timers](/en-US/docs/Web/API/console#Timers) dans la documentation pour des exemples et plus de détails
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">console.timeLog(<em>label</em>);
-</pre>
+    console.timeLog(label);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>label</code></dt>
- <dd>Le nom du timer à afficher sur la console</dd>
-</dl>
+- `label`
+  - : Le nom du timer à afficher sur la console
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Si aucun label n'est inclus</p>
+Si aucun label n'est inclus
 
-<pre>default: 1042ms</pre>
+    default: 1042ms
 
-<p>Si un <code>label</code> est inclus:</p>
+Si un `label` est inclus:
 
-<pre>timer name: 1242ms</pre>
+    timer name: 1242ms
 
-<h3 id="Exceptions">Exceptions</h3>
+### Exceptions
 
-<p>Si aucun timer n'est en cours d'éxecution, <code>timeLog()</code> retourne l'avertissement suivant :</p>
+Si aucun timer n'est en cours d'éxecution, `timeLog()` retourne l'avertissement suivant :
 
-<pre>Timer “default” doesn’t exist.</pre>
+    Timer “default” doesn’t exist.
 
-<p>Si le paramètre label est spécifé mais aucun timer n'y correspond :</p>
+Si le paramètre label est spécifé mais aucun timer n'y correspond :
 
-<pre> Timer “timer name” doesn’t exist. </pre>
+     Timer “timer name” doesn’t exist.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre>console.time("answer time");
-alert("Click to continue");
-console.timeLog("answer time");
-alert("Do a bunch of other stuff...");
-console.timeEnd("answer time");</pre>
+    console.time("answer time");
+    alert("Click to continue");
+    console.timeLog("answer time");
+    alert("Do a bunch of other stuff...");
+    console.timeEnd("answer time");
 
-<p>Le résultat de l'exemple ci-dessus montre le temps qu'a mis l'utilisateur à fermer la première pop-up d'alerte, puis le temps que l'utilisateur a pris pour fermer la seconde :</p>
+Le résultat de l'exemple ci-dessus montre le temps qu'a mis l'utilisateur à fermer la première pop-up d'alerte, puis le temps que l'utilisateur a pris pour fermer la seconde :
 
-<p><img src="timer_output.png"></p>
+![](timer_output.png)
 
-<p>Notez que le nom du timer est à la fois affiché lorsque la valeur est affichée par <code>timeLog()</code> et lorsque le timer est arrêté</p>
+Notez que le nom du timer est à la fois affiché lorsque la valeur est affichée par `timeLog()` et lorsque le timer est arrêté
 
-<h2 id="Spécifications">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("Console API", "#timelog", "console.timeLog()")}}</td>
-   <td>{{Spec2("Console API")}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                    | Statut                           | Commentaire         |
+| -------------------------------------------------------------------------------- | -------------------------------- | ------------------- |
+| {{SpecName("Console API", "#timelog", "console.timeLog()")}} | {{Spec2("Console API")}} | Définition initiale |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<div>
+{{Compat("api.Console.timeLog")}}
 
+## Voir aussi
 
-<p>{{Compat("api.Console.timeLog")}}</p>
-</div>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="http://www.opera.com/dragonfly/documentation/console/">Documentation d'Opera Dragonfly: Console</a></li>
-</ul>
+- [Documentation d'Opera Dragonfly: Console](http://www.opera.com/dragonfly/documentation/console/)
diff --git a/files/fr/web/api/console/timestamp/index.md b/files/fr/web/api/console/timestamp/index.md
index ebf2f9bd83..fe8862399c 100644
--- a/files/fr/web/api/console/timestamp/index.md
+++ b/files/fr/web/api/console/timestamp/index.md
@@ -9,34 +9,29 @@ tags:
   - console
 translation_of: Web/API/Console/timeStamp
 ---
-<div>{{APIRef("Console API")}}{{Non-standard_header}}</div>
+{{APIRef("Console API")}}{{Non-standard_header}}
 
-<p>Ajoute un seul marqueur à l'outil <a href="https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/reference">Performance</a> ou <a href="/fr/docs/Outils/Performance/Waterfall">Waterfall</a> du navigateur. Cela vous permet de corréler un point de votre code avec les autres événements enregistrés dans la chronologie, tels que les événements de mise en page et de peinture.</p>
+Ajoute un seul marqueur à l'outil [Performance](https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/reference) ou [Waterfall](/fr/docs/Outils/Performance/Waterfall) du navigateur. Cela vous permet de corréler un point de votre code avec les autres événements enregistrés dans la chronologie, tels que les événements de mise en page et de peinture.
 
-<p>Vous pouvez éventuellement fournir un argument pour étiqueter l'horodatage, et cette étiquette sera ensuite affichée à côté du marqueur.</p>
+Vous pouvez éventuellement fournir un argument pour étiqueter l'horodatage, et cette étiquette sera ensuite affichée à côté du marqueur.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">console.timeStamp(label);
-</pre>
+    console.timeStamp(label);
 
-<h2 id="Paramètres">Paramètres</h2>
+## Paramètres
 
-<dl>
- <dt><code>label</code></dt>
- <dd>Étiquette pour l'horodatage. Facultatif.</dd>
-</dl>
+- `label`
+  - : Étiquette pour l'horodatage. Facultatif.
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Console.timestamp")}}</p>
+{{Compat("api.Console.timestamp")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("Console.time()")}}</li>
- <li>{{domxref("Console.timeEnd()")}}</li>
- <li><a href="/fr/docs/Outils/Performance/Waterfall#Marqueurs_de_temps">Ajout d'un marqueur de temps pour le Waterfall</a></li>
-</ul>
+- {{domxref("Console.time()")}}
+- {{domxref("Console.timeEnd()")}}
+- [Ajout d'un marqueur de temps pour le Waterfall](/fr/docs/Outils/Performance/Waterfall#Marqueurs_de_temps)
diff --git a/files/fr/web/api/console/trace/index.md b/files/fr/web/api/console/trace/index.md
index 481fb9f954..e94e5c7528 100644
--- a/files/fr/web/api/console/trace/index.md
+++ b/files/fr/web/api/console/trace/index.md
@@ -11,59 +11,49 @@ tags:
   - trace
 translation_of: Web/API/Console/trace
 ---
-<p>{{ APIRef("Console API") }}</p>
+{{ APIRef("Console API") }}
 
-<p>Affiche la <em>stack trace</em> dans la <a href="/fr/docs/Outils/Console_Web">Web Console</a>.</p>
+Affiche la _stack trace_ dans la [Web Console](/fr/docs/Outils/Console_Web).
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<p>Voir <a href="/fr/docs/Web/API/console#Stack_traces">Stack traces</a> dans la documentation de {{ domxref("console") }} pour plus de détails et d'exemples.</p>
+Voir [Stack traces](/fr/docs/Web/API/console#Stack_traces) dans la documentation de {{ domxref("console") }} pour plus de détails et d'exemples.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">console.trace();
-</pre>
+    console.trace();
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">function foo() {
+```js
+function foo() {
   function bar() {
     console.trace();
   }
   bar();
 }
 
-foo();</pre>
+foo();
+```
 
-<p>Dans la console, la trace suivante sera affichée :</p>
+Dans la console, la trace suivante sera affichée :
 
-<pre class="brush: html">bar
+```html
+bar
 foo
-&lt;anonymous&gt;</pre>
-
-<h2 id="Specification">Spécification</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("Console API", "#trace", "console.trace()")}}</td>
-   <td>{{Spec2("Console API")}}</td>
-   <td>Définition Initiale</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Console.trace")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<p><a href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></p>
+<anonymous>
+```
+
+## Spécification
+
+| Spécification                                                                | Statut                           | Commentaire         |
+| ---------------------------------------------------------------------------- | -------------------------------- | ------------------- |
+| {{SpecName("Console API", "#trace", "console.trace()")}} | {{Spec2("Console API")}} | Définition Initiale |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Console.trace")}}
+
+## Voir aussi
+
+[Opera Dragonfly documentation: Console](http://www.opera.com/dragonfly/documentation/console/)
diff --git a/files/fr/web/api/console/warn/index.md b/files/fr/web/api/console/warn/index.md
index f67adb3582..b1d9132dc6 100644
--- a/files/fr/web/api/console/warn/index.md
+++ b/files/fr/web/api/console/warn/index.md
@@ -10,61 +10,41 @@ tags:
   - débogage
 translation_of: Web/API/Console/warn
 ---
-<p>{{ APIRef("Console API") }}</p>
+{{ APIRef("Console API") }}
 
-<p>Affiche un message d'avertissement dans la console web.</p>
+Affiche un message d'avertissement dans la console web.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<div class="note">
-  <p><strong>Note :</strong> Dans Firefox, une icône de point d'exclamation est affichée à côté des messages d'avertissement</p>
-</div>
+> **Note :** Dans Firefox, une icône de point d'exclamation est affichée à côté des messages d'avertissement
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">console.warn(<em>obj1</em> [, <em>obj2</em>, ..., <em>objN</em>]);
-console.warn(<em>msg</em> [, <em>subst1</em>, ..., <em>substN</em>]);
-</pre>
+    console.warn(obj1 [, obj2, ..., objN]);
+    console.warn(msg [, subst1, ..., substN]);
 
-<h2 id="Paramétres">Paramétres</h2>
+## Paramétres
 
-<dl>
- <dt><code>obj1</code> ... <code>objN</code></dt>
- <dd>Une liste d'objets JavaScript à afficher. La représentation, en chaîne de caractéres, de chacun de ces objets est affichée dans l'ordre de la liste.</dd>
- <dt><code>msg</code></dt>
- <dd>Une chaîne de caractères JavaScript contenant zéro ou plusieurs subdivisions de chaîne de caractères.</dd>
- <dt><code>subst1</code> ... <code>substN</code></dt>
- <dd>Une liste d'objets JavaScript qui remplace les chaînes de caractéres de <code>msg</code>. Cela vous donne plus de contrôle sur le format de sortie.</dd>
-</dl>
+- `obj1` ... `objN`
+  - : Une liste d'objets JavaScript à afficher. La représentation, en chaîne de caractéres, de chacun de ces objets est affichée dans l'ordre de la liste.
+- `msg`
+  - : Une chaîne de caractères JavaScript contenant zéro ou plusieurs subdivisions de chaîne de caractères.
+- `subst1` ... `substN`
+  - : Une liste d'objets JavaScript qui remplace les chaînes de caractéres de `msg`. Cela vous donne plus de contrôle sur le format de sortie.
 
-<p>Voir <a href="/fr/docs/Web/API/console#Outputting_text_to_the_console">Outputting text to the console</a> dans la documentation de {{ domxref("console") }} pour plus de détails.</p>
+Voir [Outputting text to the console](/fr/docs/Web/API/console#Outputting_text_to_the_console) dans la documentation de {{ domxref("console") }} pour plus de détails.
 
-<h2 id="Specification">Spécification</h2>
+## Spécification
 
-<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("Console API", "#warn", "console.warn()")}}</td>
-   <td>{{Spec2("Console API")}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                            | Statut                           | Commentaire         |
+| ------------------------------------------------------------------------ | -------------------------------- | ------------------- |
+| {{SpecName("Console API", "#warn", "console.warn()")}} | {{Spec2("Console API")}} | Définition initiale |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Console.warn")}}</p>
+{{Compat("api.Console.warn")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="http://www.opera.com/dragonfly/documentation/console/">Opera Dragonfly documentation: Console</a></li>
- <li><a href="http://msdn.microsoft.com/library/gg589530">MSDN: Using the F12 Tools Console to View Errors and Status</a></li>
-</ul>
+- [Opera Dragonfly documentation: Console](http://www.opera.com/dragonfly/documentation/console/)
+- [MSDN: Using the F12 Tools Console to View Errors and Status](http://msdn.microsoft.com/library/gg589530)
diff --git a/files/fr/web/api/console_api/index.md b/files/fr/web/api/console_api/index.md
index 95de8bab21..2c7920c7a1 100644
--- a/files/fr/web/api/console_api/index.md
+++ b/files/fr/web/api/console_api/index.md
@@ -11,64 +11,49 @@ tags:
   - test
 translation_of: Web/API/Console_API
 ---
-<div>{{DefaultAPISidebar("Console API")}}</div>
+{{DefaultAPISidebar("Console API")}}
 
-<p>L'<strong><code>API Console</code></strong> fournit des fonctionnalités permettant aux développeurs d'effectuer des tâches de débogage, telles que la journalisation des messages ou les valeurs des variables à des points définis dans votre code, ou calculer la durée d'une opération.</p>
+L'**`API Console`** fournit des fonctionnalités permettant aux développeurs d'effectuer des tâches de débogage, telles que la journalisation des messages ou les valeurs des variables à des points définis dans votre code, ou calculer la durée d'une opération.
 
-<h2 id="Concepts_et_utilisation">Concepts et utilisation</h2>
+## Concepts et utilisation
 
-<p>L'<code>API Console</code> a commencé comme une API largement propriétaire, avec différents navigateurs l'implémentant, bien que cela ne soit pas cohérent. <a href="https://console.spec.whatwg.org/">La spécification de l'API Console</a> a été créée pour définir un comportement cohérent, et tous les navigateurs modernes ont finalement décidé d'implémenter ce comportement - bien que certaines implémentations aient toujours leurs propres fonctions propriétaires supplémentaires. Découvrez-les sur:</p>
+L'`API Console` a commencé comme une API largement propriétaire, avec différents navigateurs l'implémentant, bien que cela ne soit pas cohérent. [La spécification de l'API Console](https://console.spec.whatwg.org/) a été créée pour définir un comportement cohérent, et tous les navigateurs modernes ont finalement décidé d'implémenter ce comportement - bien que certaines implémentations aient toujours leurs propres fonctions propriétaires supplémentaires. Découvrez-les sur:
 
-<ul>
- <li><a href="https://developers.google.com/chrome-developer-tools/docs/console-api">Implémentation de Google Chrome DevTools</a></li>
- <li><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html">Implémentation de Safari DevTools</a></li>
-</ul>
+- [Implémentation de Google Chrome DevTools](https://developers.google.com/chrome-developer-tools/docs/console-api)
+- [Implémentation de Safari DevTools](https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html)
 
-<p>L'utilisation est très simple - l'objet {{domxref ("console")}} - disponible via {{domxref ("window.console")}}, ou {{domxref ("WorkerGlobalScope.console")}} dans les workers; accessible en utilisant uniquement la <code>console</code> - contient de nombreuses méthodes que vous pouvez appeler pour effectuer des tâches de débogage rudimentaires, généralement axées sur la journalisation de diverses valeurs dans la <a href="/fr/docs/Tools/Web_Console">console Web</a> du navigateur.</p>
+L'utilisation est très simple - l'objet {{domxref ("console")}} - disponible via {{domxref ("window.console")}}, ou {{domxref ("WorkerGlobalScope.console")}} dans les workers; accessible en utilisant uniquement la `console` - contient de nombreuses méthodes que vous pouvez appeler pour effectuer des tâches de débogage rudimentaires, généralement axées sur la journalisation de diverses valeurs dans la [console Web](/fr/docs/Tools/Web_Console) du navigateur.
 
-<p>La méthode de loin la plus couramment utilisée est {{domxref ("console.log")}}, qui est utilisée pour consigner la valeur en cours contenue dans une variable spécifique.</p>
+La méthode de loin la plus couramment utilisée est {{domxref ("console.log")}}, qui est utilisée pour consigner la valeur en cours contenue dans une variable spécifique.
 
-<h2 id="Interfaces">Interfaces</h2>
+## Interfaces
 
-<dl>
- <dt>{{domxref("console")}}</dt>
- <dd>Fournit des fonctionnalités de débogage rudimentaires, y compris la journalisation, les traces de pile, les minuteries et les compteurs.</dd>
-</dl>
+- {{domxref("console")}}
+  - : Fournit des fonctionnalités de débogage rudimentaires, y compris la journalisation, les traces de pile, les minuteries et les compteurs.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: js">let myString = 'Hello world'
+```js
+let myString = 'Hello world'
 
 // Output "Hello world" to the console
-console.log(myString)</pre>
-
-<p>Consultez <a href="/fr/docs/Web/API/Console#Usage">la page de référence de la console</a> pour plus d'exemples.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Console API')}}</td>
-   <td>{{Spec2('Console API')}}</td>
-   <td>Définition initial.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Console")}}</p>
-
-<h2 id="Voir_également">Voir également</h2>
-
-<ul>
- <li><a href="/en-US/docs/Tools">Outils</a></li>
- <li><a href="/fr/docs/Tools/Web_Console">Console Web</a> - comment la console Web de Firefox traite les appels de l'<code>API Console</code>.</li>
- <li><a href="/fr/docs/Tools/Remote_Debugging">Débogage à distance</a> - comment voir la sortie de la console lorsque la cible de débogage est un appareil mobile.</li>
-</ul>
+console.log(myString)
+```
+
+Consultez [la page de référence de la console](/fr/docs/Web/API/Console#Usage) pour plus d'exemples.
+
+## Spécifications
+
+| Spécification                        | Status                           | Comment             |
+| ------------------------------------ | -------------------------------- | ------------------- |
+| {{SpecName('Console API')}} | {{Spec2('Console API')}} | Définition initial. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Console")}}
+
+## Voir également
+
+- [Outils](/en-US/docs/Tools)
+- [Console Web](/fr/docs/Tools/Web_Console) - comment la console Web de Firefox traite les appels de l'`API Console`.
+- [Débogage à distance](/fr/docs/Tools/Remote_Debugging) - comment voir la sortie de la console lorsque la cible de débogage est un appareil mobile.
diff --git a/files/fr/web/api/credential/index.md b/files/fr/web/api/credential/index.md
index f5dd37c020..26433b17b0 100644
--- a/files/fr/web/api/credential/index.md
+++ b/files/fr/web/api/credential/index.md
@@ -9,56 +9,42 @@ tags:
   - Reference
 translation_of: Web/API/Credential
 ---
-<p>{{SeeCompatTable}}{{APIRef("Credential Management API")}}{{securecontext_header}}</p>
+{{SeeCompatTable}}{{APIRef("Credential Management API")}}{{securecontext_header}}
 
-<p>L'interface <strong><code>Credential</code></strong>, rattachée à l'<a href="/fr/docs/Web/API/Credential_Management_API">API Credential Management</a>, fournit des informations relatives à une entité qui seront utilisées comme prérequis à l'établissement d'une relation de confiance.</p>
+L'interface **`Credential`**, rattachée à l'[API Credential Management](/fr/docs/Web/API/Credential_Management_API), fournit des informations relatives à une entité qui seront utilisées comme prérequis à l'établissement d'une relation de confiance.
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<dl>
- <dt>{{domxref("Credential.id")}} {{readonlyInline}}</dt>
- <dd>Une chaîne de caractères qui est l'identifiant des informations d'authentification. Cela peut être un GUID, un nom d'utilisateur ou une adresse électronique.</dd>
- <dt>{{domxref("Credential.type")}} {{readonlyInline}}</dt>
- <dd>Une chaîne de caractères qui décrit le type d'information d'authentification utilisée. Les valeurs valides sont
- <ul>
-  <li><code>password</code> (pour {{domxref("PasswordCredential")}})</li>
-  <li><code>federated</code> (pour {{domxref("FederatedCredential")}})</li>
-  <li><code>public-key</code> (pour {{domxref("PublicKeyCredential")}})</li>
- </ul>
- </dd>
-</dl>
+- {{domxref("Credential.id")}} {{readonlyInline}}
+  - : Une chaîne de caractères qui est l'identifiant des informations d'authentification. Cela peut être un GUID, un nom d'utilisateur ou une adresse électronique.
+- {{domxref("Credential.type")}} {{readonlyInline}}
 
-<h3 id="Gestionnaires_d'évènements">Gestionnaires d'évènements</h3>
+  - : Une chaîne de caractères qui décrit le type d'information d'authentification utilisée. Les valeurs valides sont
 
-<p>Aucun.</p>
+    - `password` (pour {{domxref("PasswordCredential")}})
+    - `federated` (pour {{domxref("FederatedCredential")}})
+    - `public-key` (pour {{domxref("PublicKeyCredential")}})
 
-<h2 id="Méthodes">Méthodes</h2>
+### Gestionnaires d'évènements
 
-<p>Aucune.</p>
+Aucun.
 
-<h2 id="Exemples">Exemples</h2>
+## Méthodes
 
-<pre class="brush: js">// TBD</pre>
+Aucune.
 
-<h2 id="Specifications">Specifications</h2>
+## Exemples
 
-<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('Credential Management')}}</td>
-   <td>{{Spec2('Credential Management')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+```js
+// TBD
+```
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Specifications
 
-<p>{{Compat("api.Credential")}}</p>
+| Spécification                                    | État                                         | Commentaires         |
+| ------------------------------------------------ | -------------------------------------------- | -------------------- |
+| {{SpecName('Credential Management')}} | {{Spec2('Credential Management')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Credential")}}
diff --git a/files/fr/web/api/credential_management_api/index.md b/files/fr/web/api/credential_management_api/index.md
index 643d918367..bbb87724b3 100644
--- a/files/fr/web/api/credential_management_api/index.md
+++ b/files/fr/web/api/credential_management_api/index.md
@@ -10,60 +10,38 @@ tags:
   - WebAuthn
 translation_of: Web/API/Credential_Management_API
 ---
-<div>
-<p>{{APIRef("Credential Management API")}}{{ SeeCompatTable() }}</p>
+{{APIRef("Credential Management API")}}{{ SeeCompatTable() }}
 
-<p>L'API <strong>Credential Management</strong> (en français : gestion des informations d'authentification) permet à un site web d'enregistrer et de récupérer des informations d'authentifications pour un utilisateur (qu'elles soient fédérées, utilisent un mot de passe ou une paire de clés asymétrique). Un utilisateur peut ainsi se connecter à un service sans avoir à saisir de mot de passe, de voir le compte fédéré utilisé pour se connecter à un site, de rouvrir une session sans avoir à se reconnecter après une session expirée.</p>
+L'API **Credential Management** (en français : gestion des informations d'authentification) permet à un site web d'enregistrer et de récupérer des informations d'authentifications pour un utilisateur (qu'elles soient fédérées, utilisent un mot de passe ou une paire de clés asymétrique). Un utilisateur peut ainsi se connecter à un service sans avoir à saisir de mot de passe, de voir le compte fédéré utilisé pour se connecter à un site, de rouvrir une session sans avoir à se reconnecter après une session expirée.
 
-<h2 id="Concepts_et_utilisation_de_l'API_Credential_Management">Concepts et utilisation de l'API <em>Credential Management</em></h2>
+## Concepts et utilisation de l'API _Credential Management_
 
-<p>Cette API permet aux sites web d'interagir avec le système de mots de passe de l'agent utilisateur afin que les sites web puissent gérer de façon uniforme les informations d'authentification. Ainsi, les sites et agents utilisateur peuvent mieux communiquer sur ces aspects.</p>
+Cette API permet aux sites web d'interagir avec le système de mots de passe de l'agent utilisateur afin que les sites web puissent gérer de façon uniforme les informations d'authentification. Ainsi, les sites et agents utilisateur peuvent mieux communiquer sur ces aspects.
 
-<p>Ainsi, sans cette API, un agent utilisateur pourra rencontrer certaines difficultés à gérer des fournisseurs d'identité fédérée ou d'autres mécanismes de connexion.</p>
+Ainsi, sans cette API, un agent utilisateur pourra rencontrer certaines difficultés à gérer des fournisseurs d'identité fédérée ou d'autres mécanismes de connexion.
 
-<div class="note">
-<p><strong>Note :</strong> Cette API est restreinte aux contextes de plus haut niveau. Les appels à <code>get()</code> et <code>store()</code> depuis une {{HTMLElement("iframe")}} seront résolus sans aucun effet.</p>
-</div>
+> **Note :** Cette API est restreinte aux contextes de plus haut niveau. Les appels à `get()` et `store()` depuis une {{HTMLElement("iframe")}} seront résolus sans aucun effet.
 
-<h3 id="Informations_d'authentification_partagées_entre_les_sous-domaines">Informations d'authentification partagées entre les sous-domaines</h3>
+### Informations d'authentification partagées entre les sous-domaines
 
-<p>Les versions les plus récentes de la spécification permettent de récupérer les informations relatives à un sous-domaine différent. Ainsi, un mot de passe enregistré pour <code>login.example.com</code> pourrait être utilisé pour se connecter à <code>www.example.com</code>. Pour permettre cela, le mot de passe doit explicitement être stocké en appelant {{domxref("CredentialsContainer.store()")}}. Ce comportement est parfois intitulé <em>Public suffix list (PSL) matching</em> (correspondance des listes de suffixes publics). Toutefois, la spécification ne fait que recommander l'utilisation du PSL pour déterminer la portée des informations d'authentification. Formellement, le PSL n'est pas obligatoire. Les navigateurs peuvent donc varier dans leurs implémentations.</p>
+Les versions les plus récentes de la spécification permettent de récupérer les informations relatives à un sous-domaine différent. Ainsi, un mot de passe enregistré pour `login.example.com` pourrait être utilisé pour se connecter à `www.example.com`. Pour permettre cela, le mot de passe doit explicitement être stocké en appelant {{domxref("CredentialsContainer.store()")}}. Ce comportement est parfois intitulé _Public suffix list (PSL) matching_ (correspondance des listes de suffixes publics). Toutefois, la spécification ne fait que recommander l'utilisation du PSL pour déterminer la portée des informations d'authentification. Formellement, le PSL n'est pas obligatoire. Les navigateurs peuvent donc varier dans leurs implémentations.
 
-<h2 id="Interfaces">Interfaces</h2>
+## Interfaces
 
-<dl>
- <dt>{{domxref("Credential")}}</dt>
- <dd>Cette interface fournit des informations relatives à une entité qui seront utilisées comme prérequis à l'établissement d'une relation de confiance.</dd>
- <dt>{{domxref("CredentialsContainer")}}</dt>
- <dd>Cette interface expose des méthodes pour récupérer des informations d'authentification et notifier l'agent utilisateur lorsque des évènements pertinents se produisent (connexion ou déconnexion réussies par exemple). Cette interface est accessible via <code>navigator.credentials</code>.</dd>
- <dt>{{domxref("FederatedCredential")}}</dt>
- <dd>Cette interface fournit des informations relatives à des informations d'authentifcation provenant d'un fournisseur d'identité fédéré (c'est une entité à laquelle un site web fait confiance pour authentifier un utilisateur et qui fournit une API à cet effet). Le <em>framework</em> <a href="http://openid.net/developers/specs/">OpenID Connect</a> est un exemple d'un tel cas de figure.</dd>
- <dt>{{domxref("PasswordCredential")}}</dt>
- <dd>Cette interface fournit des informations à propos d'un couple nom d'utilisateur / mot de passe.</dd>
- <dt>{{domxref("PublicKeyCredential")}}</dt>
- <dd>Cette interface fournit des informations d'authentification pour se connecter à l'aide d'une paire de clés asymétrique (permettant d'éviter le hameçonnage et la fuite de données) plutôt qu'avec un mot de passe.</dd>
-</dl>
+- {{domxref("Credential")}}
+  - : Cette interface fournit des informations relatives à une entité qui seront utilisées comme prérequis à l'établissement d'une relation de confiance.
+- {{domxref("CredentialsContainer")}}
+  - : Cette interface expose des méthodes pour récupérer des informations d'authentification et notifier l'agent utilisateur lorsque des évènements pertinents se produisent (connexion ou déconnexion réussies par exemple). Cette interface est accessible via `navigator.credentials`.
+- {{domxref("FederatedCredential")}}
+  - : Cette interface fournit des informations relatives à des informations d'authentifcation provenant d'un fournisseur d'identité fédéré (c'est une entité à laquelle un site web fait confiance pour authentifier un utilisateur et qui fournit une API à cet effet). Le _framework_ [OpenID Connect](http://openid.net/developers/specs/) est un exemple d'un tel cas de figure.
+- {{domxref("PasswordCredential")}}
+  - : Cette interface fournit des informations à propos d'un couple nom d'utilisateur / mot de passe.
+- {{domxref("PublicKeyCredential")}}
+  - : Cette interface fournit des informations d'authentification pour se connecter à l'aide d'une paire de clés asymétrique (permettant d'éviter le hameçonnage et la fuite de données) plutôt qu'avec un mot de passe.
 
-<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('Credential Management')}}</td>
-   <td>{{Spec2('Credential Management')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('WebAuthn')}}</td>
-   <td>{{Spec2('WebAuthn')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                    | État                                         | Commentaires         |
+| ------------------------------------------------ | -------------------------------------------- | -------------------- |
+| {{SpecName('Credential Management')}} | {{Spec2('Credential Management')}} | Définition initiale. |
+| {{SpecName('WebAuthn')}}                 | {{Spec2('WebAuthn')}}                 | Définition initiale. |
diff --git a/files/fr/web/api/credentialscontainer/create/index.md b/files/fr/web/api/credentialscontainer/create/index.md
index 88f609ad56..a322b56e71 100644
--- a/files/fr/web/api/credentialscontainer/create/index.md
+++ b/files/fr/web/api/credentialscontainer/create/index.md
@@ -10,79 +10,53 @@ tags:
   - WebAuthn
 translation_of: Web/API/CredentialsContainer/create
 ---
-<p>{{APIRef("Credential Management")}}{{SeeCompatTable}}</p>
-
-<p>La méthode <strong><code>create()</code></strong>, rattachée à l'interface {{domxref("CredentialsContainer")}}, renvoie une promesse ({{jsxref("Promise")}}) qui est résolue en</p>
-
-<ul>
- <li>une nouvelle instance {{domxref("Credential")}} construite avec les options fournies</li>
- <li>{{jsxref("null")}} si aucun objet <code>Credential</code> ne peut être créé.</li>
-</ul>
-
-<div class="note">
-<p><strong>Note :</strong> Cette méthode ne peut être utilisé que pour les contextes de navigation les plus hauts. Les appels lancés depuis une {{HTMLElement("iframe")}} résoudront la promesse sans aucun effet.</p>
-</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">var promise = CredentialsContainer.create([options])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>options</code></dt>
- <dd>Un objet de type {{domxref("CredentialCreationOptions")}} qui contient des options pour le nouvel objet <code>Credentials</code> demandé. Cet objet doit posséder au moins une des propriétés parmi <code>"password"</code>, <code>"federated"</code> ou <code>"publicKey"</code>. Les options sont :
- <ul>
-  <li>password: {{optional_inline}} un objet {{domxref("HTMLFormElement")}} ou un objet {{domxref("PasswordCredentialData")}}
-   <ul>
-    <li><code>id</code>: (obligatoire) {{domxref("USVString")}} hérité de {{domxref("CredentialData")}}.</li>
-    <li><code>name</code>: {{optional_inline}} {{domxref("USVString")}}</li>
-    <li><code>iconURL</code>: {{optional_inline}} {{domxref("USVString")}}</li>
-    <li><code>password</code>: (required) {{domxref("USVString")}}</li>
-   </ul>
-  </li>
-  <li>federated : {{optional_inline}} un objet {{domxref("FederatedCredentialInit")}}. Cet objet contient le nécessaire pour créer/obtenir des informations d'authentification fédérées. Les propriétés disponibles sont :
-   <ul>
-    <li><code>id</code>: (required) {{domxref("USVString")}} hérité de {{domxref("CredentialData")}}.</li>
-    <li><code>name</code>: {{optional_inline}} {{domxref("USVString")}}</li>
-    <li><code>iconURL</code>: {{optional_inline}} {{domxref("USVString")}}</li>
-    <li><code>provider</code>: (required) {{domxref("USVString")}}</li>
-    <li><code>protocol</code>: {{optional_inline}} {{domxref("USVString")}}</li>
-   </ul>
-  </li>
-  <li><code>publicKey</code> : {{optional_inline}} un objet {{domxref("PublicKeyCredentialCreationOptions")}} qui décrit les options pour créer une information d'authentification <a href="/fr/docs/Web/API/Web_Authentication_API">WebAuthn</a>.</li>
- </ul>
- </dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une promesse ({{jsxref("Promise")}}) dont la valeur de résolution est une instance {{domxref("Credential")}} telle que {{domxref("PasswordCredential")}}, {{domxref("FederatedCredential")}} ou {{domxref("PublicKeyCredential")}}.</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('Credential Management','#dom-credentialscontainer-get','get()')}}</td>
-   <td>{{Spec2('Credential Management')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('WebAuthn')}}</td>
-   <td>{{Spec2('WebAuthn')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.CredentialsContainer.create")}}</p>
+{{APIRef("Credential Management")}}{{SeeCompatTable}}
+
+La méthode **`create()`**, rattachée à l'interface {{domxref("CredentialsContainer")}}, renvoie une promesse ({{jsxref("Promise")}}) qui est résolue en
+
+- une nouvelle instance {{domxref("Credential")}} construite avec les options fournies
+- {{jsxref("null")}} si aucun objet `Credential` ne peut être créé.
+
+> **Note :** Cette méthode ne peut être utilisé que pour les contextes de navigation les plus hauts. Les appels lancés depuis une {{HTMLElement("iframe")}} résoudront la promesse sans aucun effet.
+
+## Syntaxe
+
+    var promise = CredentialsContainer.create([options])
+
+### Paramètres
+
+- `options`
+
+  - : Un objet de type {{domxref("CredentialCreationOptions")}} qui contient des options pour le nouvel objet `Credentials` demandé. Cet objet doit posséder au moins une des propriétés parmi `"password"`, `"federated"` ou `"publicKey"`. Les options sont :
+
+    - password: {{optional_inline}} un objet {{domxref("HTMLFormElement")}} ou un objet {{domxref("PasswordCredentialData")}}
+
+      - `id`: (obligatoire) {{domxref("USVString")}} hérité de {{domxref("CredentialData")}}.
+      - `name`: {{optional_inline}} {{domxref("USVString")}}
+      - `iconURL`: {{optional_inline}} {{domxref("USVString")}}
+      - `password`: (required) {{domxref("USVString")}}
+
+    - federated : {{optional_inline}} un objet {{domxref("FederatedCredentialInit")}}. Cet objet contient le nécessaire pour créer/obtenir des informations d'authentification fédérées. Les propriétés disponibles sont :
+
+      - `id`: (required) {{domxref("USVString")}} hérité de {{domxref("CredentialData")}}.
+      - `name`: {{optional_inline}} {{domxref("USVString")}}
+      - `iconURL`: {{optional_inline}} {{domxref("USVString")}}
+      - `provider`: (required) {{domxref("USVString")}}
+      - `protocol`: {{optional_inline}} {{domxref("USVString")}}
+
+    - `publicKey` : {{optional_inline}} un objet {{domxref("PublicKeyCredentialCreationOptions")}} qui décrit les options pour créer une information d'authentification [WebAuthn](/fr/docs/Web/API/Web_Authentication_API).
+
+### Valeur de retour
+
+Une promesse ({{jsxref("Promise")}}) dont la valeur de résolution est une instance {{domxref("Credential")}} telle que {{domxref("PasswordCredential")}}, {{domxref("FederatedCredential")}} ou {{domxref("PublicKeyCredential")}}.
+
+## Spécifications
+
+| Spécification                                                                                            | État                                         | Commentaires         |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------- |
+| {{SpecName('Credential Management','#dom-credentialscontainer-get','get()')}} | {{Spec2('Credential Management')}} | Définition initiale. |
+| {{SpecName('WebAuthn')}}                                                                         | {{Spec2('WebAuthn')}}                 | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.CredentialsContainer.create")}}
diff --git a/files/fr/web/api/credentialscontainer/get/index.md b/files/fr/web/api/credentialscontainer/get/index.md
index a58d9405bf..cee2fcb61c 100644
--- a/files/fr/web/api/credentialscontainer/get/index.md
+++ b/files/fr/web/api/credentialscontainer/get/index.md
@@ -11,70 +11,47 @@ tags:
   - WebAuthn
 translation_of: Web/API/CredentialsContainer/get
 ---
-<p>{{APIRef("Credential Management")}}{{SeeCompatTable}}</p>
-
-<p>La méthode <strong><code>get()</code></strong>, rattachée à l'interface {{domxref("CredentialsContainer")}}, renvoie une promesse ({{jsxref("Promise")}}) qui est résolue en une instance de {{domxref("Credential")}} correspondant aux paramètres fournis. Si aucune correspondance n'est trouvée, la promesse sera résolue avec la valeur {{jsxref("null")}}.</p>
-
-<p>Cette méthode collecte l'ensemble des informations d'authentification stockées dans l'objet {{domxref("CredentialsContainer")}} et qui respectent les critères indiqués (définis grâce à l'argument <code><strong>options</strong></code>). À partir de cet ensemble, l'agent utilisateur sélectionne la meilleure information d'authentification. Selon les options fournies, l'agent utilisateur pourra afficher une boîte de dialogue et demander à l'utilisateur de sélectionner la bonne information.</p>
-
-<p>Cette méthode récupère les informations d'authentification en appelant la méthode <code>CollectFromCredentialStore</code> pour chaque type d'authentification permis par l'argument <code><strong>options</strong></code>. Ainsi, si la propriété <code>options.password</code> existe dans l'argument passé,   {{domxref("PasswordCredential")}}<code>.[[CollectFromCredentialStore]]</code> sera appelée.</p>
-
-<div class="note">
-<p><strong>Note :</strong> Cette méthode ne peut être utilisé que pour les contextes de navigation les plus hauts. Les appels lancés depuis une {{HTMLElement("iframe")}} résoudront la promesse sans aucun effet.</p>
-</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">var promise = CredentialsContainer.get([options])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>options</code> {{optional_inline}}</dt>
- <dd>Un objet de type {{domxref("CredentialRequestOptions")}} qui contient les critères de la requête. et les options d'interaction avec l'utilisateur. Cet objet peut contenir les propriétés suivantes :
- <ul>
-  <li><code>password</code> : un booléen ({{jsxref("Boolean")}}) qui indique que l'instance {{domxref("Credential")}} renvoyée devrait contenir les informations sur l'utilisateur (contrairement aux informations d'authentification fédérées).</li>
-  <li><code>federated</code> : un objet {{domxref("FederatedCredentialRequestOptions")}} qui contient les critères que doivent respecter les informations d'authentification fédérées. Les options disponibles sont :
-   <ul>
-    <li><code>providers</code> : un tableau de chaînes de caractères {{domxref("DOMString")}} listant les fournisseurs d'identité potentiels</li>
-    <li><code>protocols</code> : un tableau de chaînes de caractères {{domxref("DOMString")}} listant les protocoles de fédération à rechercher.</li>
-   </ul>
-  </li>
-  <li><code>publicKey</code> : un objet {{domxref("PublicKeyCredentialRequestOptions")}} contenant les conditions que doivent respecter les informations d'authentification <a href="/fr/docs/Web/API/Web_Authentication_API">WebAuthn</a> qui seront renvoyées.</li>
-  <li><code>mediation</code> : une chaîne de caractères {{jsxref("String")}} qui indique si l'utilisateur devra se reconnecter à chaque visite sur le site. Les valeurs valides sont <code>"silent"</code>, <code>"optional"</code> ou <code>"required"</code>.</li>
-  <li><code>unmediated</code> : {{deprecated_inline()}} un booléen ({{jsxref("Boolean")}}) qui indique que l'instance {{domxref("Credential")}} renvoyée ne devrait pas nécessiter de médiation avec l'utilisateur.</li>
- </ul>
- </dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Une promesse ({{jsxref("Promise")}}) qui est résolue avec une instance {{domxref("Credential")}} correspondant aux paramètres fournis. S'il n'est pas possible d'obtenir une seule instance sans ambiguïté, la promesse sera résolue avec la valeur {{jsxref("null")}}.</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('Credential Management','#dom-credentialscontainer-get','get()')}}</td>
-   <td>{{Spec2('Credential Management')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('WebAuthn')}}</td>
-   <td>{{Spec2('WebAuthn')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.CredentialsContainer.get")}}</p>
+{{APIRef("Credential Management")}}{{SeeCompatTable}}
+
+La méthode **`get()`**, rattachée à l'interface {{domxref("CredentialsContainer")}}, renvoie une promesse ({{jsxref("Promise")}}) qui est résolue en une instance de {{domxref("Credential")}} correspondant aux paramètres fournis. Si aucune correspondance n'est trouvée, la promesse sera résolue avec la valeur {{jsxref("null")}}.
+
+Cette méthode collecte l'ensemble des informations d'authentification stockées dans l'objet {{domxref("CredentialsContainer")}} et qui respectent les critères indiqués (définis grâce à l'argument **`options`**). À partir de cet ensemble, l'agent utilisateur sélectionne la meilleure information d'authentification. Selon les options fournies, l'agent utilisateur pourra afficher une boîte de dialogue et demander à l'utilisateur de sélectionner la bonne information.
+
+Cette méthode récupère les informations d'authentification en appelant la méthode `CollectFromCredentialStore` pour chaque type d'authentification permis par l'argument **`options`**. Ainsi, si la propriété `options.password` existe dans l'argument passé,   {{domxref("PasswordCredential")}}`.[[CollectFromCredentialStore]]` sera appelée.
+
+> **Note :** Cette méthode ne peut être utilisé que pour les contextes de navigation les plus hauts. Les appels lancés depuis une {{HTMLElement("iframe")}} résoudront la promesse sans aucun effet.
+
+## Syntaxe
+
+    var promise = CredentialsContainer.get([options])
+
+### Paramètres
+
+- `options` {{optional_inline}}
+
+  - : Un objet de type {{domxref("CredentialRequestOptions")}} qui contient les critères de la requête. et les options d'interaction avec l'utilisateur. Cet objet peut contenir les propriétés suivantes :
+
+    - `password` : un booléen ({{jsxref("Boolean")}}) qui indique que l'instance {{domxref("Credential")}} renvoyée devrait contenir les informations sur l'utilisateur (contrairement aux informations d'authentification fédérées).
+    - `federated` : un objet {{domxref("FederatedCredentialRequestOptions")}} qui contient les critères que doivent respecter les informations d'authentification fédérées. Les options disponibles sont :
+
+      - `providers` : un tableau de chaînes de caractères {{domxref("DOMString")}} listant les fournisseurs d'identité potentiels
+      - `protocols` : un tableau de chaînes de caractères {{domxref("DOMString")}} listant les protocoles de fédération à rechercher.
+
+    - `publicKey` : un objet {{domxref("PublicKeyCredentialRequestOptions")}} contenant les conditions que doivent respecter les informations d'authentification [WebAuthn](/fr/docs/Web/API/Web_Authentication_API) qui seront renvoyées.
+    - `mediation` : une chaîne de caractères {{jsxref("String")}} qui indique si l'utilisateur devra se reconnecter à chaque visite sur le site. Les valeurs valides sont `"silent"`, `"optional"` ou `"required"`.
+    - `unmediated` : {{deprecated_inline()}} un booléen ({{jsxref("Boolean")}}) qui indique que l'instance {{domxref("Credential")}} renvoyée ne devrait pas nécessiter de médiation avec l'utilisateur.
+
+### Valeur de retour
+
+Une promesse ({{jsxref("Promise")}}) qui est résolue avec une instance {{domxref("Credential")}} correspondant aux paramètres fournis. S'il n'est pas possible d'obtenir une seule instance sans ambiguïté, la promesse sera résolue avec la valeur {{jsxref("null")}}.
+
+## Spécifications
+
+| Spécification                                                                                            | État                                         | Commentaires         |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------- |
+| {{SpecName('Credential Management','#dom-credentialscontainer-get','get()')}} | {{Spec2('Credential Management')}} | Définition initiale. |
+| {{SpecName('WebAuthn')}}                                                                         | {{Spec2('WebAuthn')}}                 | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.CredentialsContainer.get")}}
diff --git a/files/fr/web/api/credentialscontainer/index.md b/files/fr/web/api/credentialscontainer/index.md
index 31e6195ae8..8632edc66f 100644
--- a/files/fr/web/api/credentialscontainer/index.md
+++ b/files/fr/web/api/credentialscontainer/index.md
@@ -10,61 +10,46 @@ tags:
   - WebAuthn
 translation_of: Web/API/CredentialsContainer
 ---
-<p>{{SeeCompatTable}}{{APIRef("Credential Management API")}}{{securecontext_header}}</p>
-
-<p>L'interface <strong><code>CredentialsContainer</code></strong>, rattachée à l'<a href="/en-US/docs/Web/API/Credential_Management_API">API Credential Management</a>, expose des méthodes pour demander l'accès aux informations d'authentification et informer l'agent utilisateur lorsque des évènements pertinents se produisent (connexion et déconnexion réussies par exemple). On peut accéder à cette interface via {{domxref('Navigator.credentials')}}.</p>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<p>Aucune.</p>
-
-<h3 id="Gestionnaires_d'évènements">Gestionnaires d'évènements</h3>
-
-<p>Aucun.</p>
-
-<h2 id="Methods">Methods</h2>
-
-<dl>
- <dt>{{domxref("CredentialsContainer.create()")}}{{securecontext_inline}}</dt>
- <dd>Cette méthode renvoie une promesse ({{jsxref("Promise")}}) qui est résolue avec une nouvelle instance {{domxref("Credential")}} construite selon les options fournies ou <code>null</code> si aucun objet <code>Credential</code> ne peut être créé.</dd>
- <dt>{{domxref("CredentialsContainer.get()")}}{{securecontext_inline}}</dt>
- <dd>Cette méthode renvoie une promesse ({{jsxref("Promise")}}) qui est résolue avec l'instance de {{domxref("Credential")}} qui correspond aux paramètres fournis.</dd>
- <dt>{{domxref("CredentialsContainer.preventSilentAccess()")}}{{securecontext_inline}}</dt>
- <dd>Cette méthode active un marqueur qui indique si une connexion automatique est autorisée pour les futures visites sur cette origine et renvoie une promesse ({{jsxref("Promise")}}) vide. <br>
- <br>
- On pourra par exemple appeler cette méthode après qu'un utilisateur se soit déconnecté d'un site web pour s'assurer qu'il n'est pas reconnecté à la prochaine visite. Dans des versions antérieures de la spécification, cette méthode était intitulée <code>requireUserMediation()</code>. Voir le tableau de compatibilité ci-après pour plus de détails.</dd>
- <dt>{{domxref("CredentialsContainer.store()")}}{{securecontext_inline}}</dt>
- <dd>Cette méthode enregistre des informations d'authentification pour un utilisateur à partir d'une instance {{domxref("Credential")}} fournie et renvoie cette instance dans une promesse ({{jsxref("Promise")}}).</dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">// TBD</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('Credential Management')}}</td>
-   <td>{{Spec2('Credential Management')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('WebAuthn')}}</td>
-   <td>{{Spec2('WebAuthn')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.CredentialsContainer")}}</p>
+{{SeeCompatTable}}{{APIRef("Credential Management API")}}{{securecontext_header}}
+
+L'interface **`CredentialsContainer`**, rattachée à l'[API Credential Management](/en-US/docs/Web/API/Credential_Management_API), expose des méthodes pour demander l'accès aux informations d'authentification et informer l'agent utilisateur lorsque des évènements pertinents se produisent (connexion et déconnexion réussies par exemple). On peut accéder à cette interface via {{domxref('Navigator.credentials')}}.
+
+## Propriétés
+
+Aucune.
+
+### Gestionnaires d'évènements
+
+Aucun.
+
+## Methods
+
+- {{domxref("CredentialsContainer.create()")}}{{securecontext_inline}}
+  - : Cette méthode renvoie une promesse ({{jsxref("Promise")}}) qui est résolue avec une nouvelle instance {{domxref("Credential")}} construite selon les options fournies ou `null` si aucun objet `Credential` ne peut être créé.
+- {{domxref("CredentialsContainer.get()")}}{{securecontext_inline}}
+  - : Cette méthode renvoie une promesse ({{jsxref("Promise")}}) qui est résolue avec l'instance de {{domxref("Credential")}} qui correspond aux paramètres fournis.
+- {{domxref("CredentialsContainer.preventSilentAccess()")}}{{securecontext_inline}}
+
+  - : Cette méthode active un marqueur qui indique si une connexion automatique est autorisée pour les futures visites sur cette origine et renvoie une promesse ({{jsxref("Promise")}}) vide.
+
+    On pourra par exemple appeler cette méthode après qu'un utilisateur se soit déconnecté d'un site web pour s'assurer qu'il n'est pas reconnecté à la prochaine visite. Dans des versions antérieures de la spécification, cette méthode était intitulée `requireUserMediation()`. Voir le tableau de compatibilité ci-après pour plus de détails.
+
+- {{domxref("CredentialsContainer.store()")}}{{securecontext_inline}}
+  - : Cette méthode enregistre des informations d'authentification pour un utilisateur à partir d'une instance {{domxref("Credential")}} fournie et renvoie cette instance dans une promesse ({{jsxref("Promise")}}).
+
+## Exemples
+
+```js
+// TBD
+```
+
+## Spécifications
+
+| Spécification                                    | État                                         | Commentaires         |
+| ------------------------------------------------ | -------------------------------------------- | -------------------- |
+| {{SpecName('Credential Management')}} | {{Spec2('Credential Management')}} | Définition initiale. |
+| {{SpecName('WebAuthn')}}                 | {{Spec2('WebAuthn')}}                 | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.CredentialsContainer")}}
diff --git a/files/fr/web/api/credentialscontainer/preventsilentaccess/index.md b/files/fr/web/api/credentialscontainer/preventsilentaccess/index.md
index 3742b9fd86..6ca704fc70 100644
--- a/files/fr/web/api/credentialscontainer/preventsilentaccess/index.md
+++ b/files/fr/web/api/credentialscontainer/preventsilentaccess/index.md
@@ -9,45 +9,32 @@ tags:
   - Reference
 translation_of: Web/API/CredentialsContainer/preventSilentAccess
 ---
-<p>{{APIRef("")}}{{SeeCompatTable}}</p>
+{{APIRef("")}}{{SeeCompatTable}}
 
-<p>La méthode <strong><code>preventSilentAccess()</code></strong>, rattachée à l'interface  {{domxref("CredentialsContainer")}}, permet de paramétrer une option pour indiquer si les connexions automatiques sont autorisées pour les futures visites à l'origine. Elle renvoie ensuite une promesse ({{jsxref("Promise")}}) vide.</p>
+La méthode **`preventSilentAccess()`**, rattachée à l'interface  {{domxref("CredentialsContainer")}}, permet de paramétrer une option pour indiquer si les connexions automatiques sont autorisées pour les futures visites à l'origine. Elle renvoie ensuite une promesse ({{jsxref("Promise")}}) vide.
 
-<p>Cette méthode peut, par exemple, être appelée lorsqu'un utilisateur se déconnecte d'un site web afin de s'assurer qu'il n'est pas reconnecté à la prochaine visite. Cette gestion doit être gérée pour chaque origine.</p>
+Cette méthode peut, par exemple, être appelée lorsqu'un utilisateur se déconnecte d'un site web afin de s'assurer qu'il n'est pas reconnecté à la prochaine visite. Cette gestion doit être gérée pour chaque origine.
 
-<p>Dans des versions antérieures de la spécification, cette méthode était intitulée <code>requireUserMediation()</code>. Voir le tableau ci-après sur la compatibilité des navigateurs pour plus de détails.</p>
+Dans des versions antérieures de la spécification, cette méthode était intitulée `requireUserMediation()`. Voir le tableau ci-après sur la compatibilité des navigateurs pour plus de détails.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var Promise = CredentialsContainer.preventSilentAccess()</pre>
+    var Promise = CredentialsContainer.preventSilentAccess()
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<p>Aucun.</p>
+Aucun.
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Une promesse ({{jsxref("Promise")}}) vide.</p>
+Une promesse ({{jsxref("Promise")}}) vide.
 
-<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('Credential Management','#dom-credentialscontainer-preventsilentaccess','preventSilentAccess()')}}</td>
-   <td>{{Spec2('Credential Management')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                                    | État                                         | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------- | -------------------- |
+| {{SpecName('Credential Management','#dom-credentialscontainer-preventsilentaccess','preventSilentAccess()')}} | {{Spec2('Credential Management')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.CredentialsContainer.preventSilentAccess")}}</p>
+{{Compat("api.CredentialsContainer.preventSilentAccess")}}
diff --git a/files/fr/web/api/credentialscontainer/store/index.md b/files/fr/web/api/credentialscontainer/store/index.md
index a6f3af8023..c9180ba86d 100644
--- a/files/fr/web/api/credentialscontainer/store/index.md
+++ b/files/fr/web/api/credentialscontainer/store/index.md
@@ -9,52 +9,37 @@ tags:
   - Reference
 translation_of: Web/API/CredentialsContainer/store
 ---
-<p>{{APIRef("")}}{{SeeCompatTable}}</p>
+{{APIRef("")}}{{SeeCompatTable}}
 
-<p>La méthode <strong><code>store()</code></strong>, rattachée à l'interface {{domxref("CredentialsContainer")}}, enregistre un ensemble d'informations d'authentification pour l'utilisateur dans une instance {{domxref("Credential")}} et renvoie cette instance au travers d'une promesse ({{domxref("Promise")}}).</p>
+La méthode **`store()`**, rattachée à l'interface {{domxref("CredentialsContainer")}}, enregistre un ensemble d'informations d'authentification pour l'utilisateur dans une instance {{domxref("Credential")}} et renvoie cette instance au travers d'une promesse ({{domxref("Promise")}}).
 
-<div class="note">
-<p><strong>Note :</strong> Cette méthode ne peut être utilisé que pour les contextes de navigation les plus hauts. Les appels lancés depuis une {{HTMLElement("iframe")}} résoudront la promesse sans aucun effet.</p>
-</div>
+> **Note :** Cette méthode ne peut être utilisé que pour les contextes de navigation les plus hauts. Les appels lancés depuis une {{HTMLElement("iframe")}} résoudront la promesse sans aucun effet.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">CredentialsContainer.store(cred).then(function(credRes) { ... } )</pre>
+    CredentialsContainer.store(cred).then(function(credRes) { ... } )
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>cred</code></dt>
- <dd>Une instance valide de {{domxref("Credential")}}.</dd>
-</dl>
+- `cred`
+  - : Une instance valide de {{domxref("Credential")}}.
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Une promesse ({{domxref("Promise")}}) qui sera résolue avec l'instance de {{domxref("Credential")}} passée en argument.</p>
+Une promesse ({{domxref("Promise")}}) qui sera résolue avec l'instance de {{domxref("Credential")}} passée en argument.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: js">// TBD</pre>
+```js
+// TBD
+```
 
-<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('Credential Management')}}</td>
-   <td>{{Spec2('Credential Management')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                    | État                                         | Commentaires         |
+| ------------------------------------------------ | -------------------------------------------- | -------------------- |
+| {{SpecName('Credential Management')}} | {{Spec2('Credential Management')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.CredentialsContainer.store")}}</p>
+{{Compat("api.CredentialsContainer.store")}}
diff --git a/files/fr/web/api/crossoriginisolated/index.md b/files/fr/web/api/crossoriginisolated/index.md
index 0fd49fde85..073f4faa25 100644
--- a/files/fr/web/api/crossoriginisolated/index.md
+++ b/files/fr/web/api/crossoriginisolated/index.md
@@ -4,56 +4,41 @@ slug: Web/API/crossOriginIsolated
 translation_of: Web/API/WindowOrWorkerGlobalScope/crossOriginIsolated
 original_slug: Web/API/WindowOrWorkerGlobalScope/crossOriginIsolated
 ---
-<div>{{APIRef()}}{{SeeCompatTable}}</div>
+{{APIRef()}}{{SeeCompatTable}}
 
-<p>La propriéte en lecture seule <code><strong>crossOriginIsolated</strong></code> de l'interface {{domxref("WindowOrWorkerGlobalScope")}} retourne une valeur booléenne qui indique si un {{jsxref("SharedArrayBuffer")}} peut être envoyé via un appel à {{domxref("Window.postMessage()")}}.</p>
+La propriéte en lecture seule **`crossOriginIsolated`** de l'interface {{domxref("WindowOrWorkerGlobalScope")}} retourne une valeur booléenne qui indique si un {{jsxref("SharedArrayBuffer")}} peut être envoyé via un appel à {{domxref("Window.postMessage()")}}.
 
-<p>Cette valeur est dépendante de toute entête {{httpheader("Cross-Origin-Opener-Policy")}} et {{httpheader("Cross-Origin-Embedder-Policy")}} présente dans la réponse.</p>
+Cette valeur est dépendante de toute entête {{httpheader("Cross-Origin-Opener-Policy")}} et {{httpheader("Cross-Origin-Embedder-Policy")}} présente dans la réponse.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var <em>myCrossOriginIsolated</em> = self.crossOriginIsolated; // or just crossOriginIsolated
-</pre>
+    var myCrossOriginIsolated = self.crossOriginIsolated; // or just crossOriginIsolated
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>Une valeur booléenne</p>
+Une valeur booléenne
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: js">if(crossOriginIsolated) {
+```js
+if(crossOriginIsolated) {
   // Post SharedArrayBuffer
 } else {
   // Do something else
 }
-</pre>
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML WHATWG")}}</td>
-   <td></td>
-   <td>Pas encore ajouté à la spécification</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                        | Statut | Commentaire                          |
+| ------------------------------------ | ------ | ------------------------------------ |
+| {{SpecName("HTML WHATWG")}} |        | Pas encore ajouté à la spécification |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
+{{Compat("api.WindowOrWorkerGlobalScope.crossOriginIsolated")}}
 
+## Voir aussi
 
-<p>{{Compat("api.WindowOrWorkerGlobalScope.crossOriginIsolated")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/API/ServiceWorker_API">Service Workers</a></li>
- <li><a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a></li>
-</ul>
+- [Service Workers](/en-US/docs/Web/API/ServiceWorker_API)
+- [Web Workers](/en-US/docs/Web/API/Web_Workers_API)
diff --git a/files/fr/web/api/crypto/getrandomvalues/index.md b/files/fr/web/api/crypto/getrandomvalues/index.md
index 7c0b91e5d7..57e9c02508 100644
--- a/files/fr/web/api/crypto/getrandomvalues/index.md
+++ b/files/fr/web/api/crypto/getrandomvalues/index.md
@@ -11,66 +11,50 @@ tags:
 translation_of: Web/API/Crypto/getRandomValues
 original_slug: Web/API/RandomSource/getRandomValues
 ---
-<p>{{APIRef("Web Crypto API")}}</p>
+{{APIRef("Web Crypto API")}}
 
-<p>La méthode <code><strong>RandomSource.getRandomValues()</strong></code> permet d’obtenir des valeurs pseudo-aléatoires cryptographiquement satisfaisantes. Le tableau donné en paramètre est rempli avec des nombres pseudo-aléatoires.</p>
+La méthode **`RandomSource.getRandomValues()`** permet d’obtenir des valeurs pseudo-aléatoires cryptographiquement satisfaisantes. Le tableau donné en paramètre est rempli avec des nombres pseudo-aléatoires.
 
-<p>Pour garantir une performance suffisante, les implémentations n’utilisent pas un vrai générateur de nombres aléatoires, mais un générateur de nombres pseudo-aléatoires <em>semé </em>avec une valeur ayant suffisamment d'{{Glossary("entropie")}}. Les générateurs utilisés d’une implémentation à une autre seront différents mais toujours satisfaisants pour une utilisation en cryptographie. Les implémentations doivent également utiliser une graine ayant suffisamment d’entropie, comme une source d’entropie au niveau du système.</p>
+Pour garantir une performance suffisante, les implémentations n’utilisent pas un vrai générateur de nombres aléatoires, mais un générateur de nombres pseudo-aléatoires _semé_ avec une valeur ayant suffisamment d'{{Glossary("entropie")}}. Les générateurs utilisés d’une implémentation à une autre seront différents mais toujours satisfaisants pour une utilisation en cryptographie. Les implémentations doivent également utiliser une graine ayant suffisamment d’entropie, comme une source d’entropie au niveau du système.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>cryptoObj</em>.getRandomValues(<em>typedArray</em>);</pre>
+    cryptoObj.getRandomValues(typedArray);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><em>typedArray</em></dt>
- <dd>Un {{jsxref("TypedArray")}} de nombres entiers, qui est un {{jsxref("Int8Array")}}, un {{jsxref("Uint8Array")}}, un {{jsxref("Uint16Array")}}, un {{jsxref("Int32Array")}}, ou encore un {{jsxref("Uint32Array")}}. Tous les éléments du tableau seront subsitués avec des nombres aléatoires.</dd>
-</dl>
+- _typedArray_
+  - : Un {{jsxref("TypedArray")}} de nombres entiers, qui est un {{jsxref("Int8Array")}}, un {{jsxref("Uint8Array")}}, un {{jsxref("Uint16Array")}}, un {{jsxref("Int32Array")}}, ou encore un {{jsxref("Uint32Array")}}. Tous les éléments du tableau seront subsitués avec des nombres aléatoires.
 
-<h3 id="Exceptions">Exceptions</h3>
+### Exceptions
 
-<ul>
- <li>Une {{exception("QuotaExceededError")}} {{domxref("DOMException")}} est levée si la taille de la requête est plus grand que 65 536 octets.</li>
-</ul>
+- Une {{exception("QuotaExceededError")}} {{domxref("DOMException")}} est levée si la taille de la requête est plus grand que 65 536 octets.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">/* on part du principe ici que window.crypto.getRandomValues est disponible */
+```js
+/* on part du principe ici que window.crypto.getRandomValues est disponible */
 
 var array = new Uint32Array(10);
 window.crypto.getRandomValues(array);
 
 console.log("Your lucky numbers:");
-for (var i = 0; i &lt; array.length; i++) {
+for (var i = 0; i < array.length; i++) {
     console.log(array[i]);
 }
-</pre>
-
-<h2 id="Specification">Spécification</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Web Crypto API', '#RandomSource-method-getRandomValues')}}</td>
-   <td>{{Spec2('Web Crypto API')}}</td>
-   <td>Initial definition</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<div>{{Compat("api.Crypto.getRandomValues")}}</div>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{ domxref("Window.crypto") }} pour obtenir un objet {{domxref("Crypto")}}.</li>
- <li>{{jsxref("Math.random")}}, une source non cryptographique de nombres aléatoires.</li>
-</ul>
+```
+
+## Spécification
+
+| Specification                                                                                | Status                               | Comment            |
+| -------------------------------------------------------------------------------------------- | ------------------------------------ | ------------------ |
+| {{SpecName('Web Crypto API', '#RandomSource-method-getRandomValues')}} | {{Spec2('Web Crypto API')}} | Initial definition |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Crypto.getRandomValues")}}
+
+## Voir aussi
+
+- {{ domxref("Window.crypto") }} pour obtenir un objet {{domxref("Crypto")}}.
+- {{jsxref("Math.random")}}, une source non cryptographique de nombres aléatoires.
diff --git a/files/fr/web/api/crypto/index.md b/files/fr/web/api/crypto/index.md
index f31a2ebaf6..bc9773c7ba 100644
--- a/files/fr/web/api/crypto/index.md
+++ b/files/fr/web/api/crypto/index.md
@@ -3,52 +3,32 @@ title: Crypto
 slug: Web/API/Crypto
 translation_of: Web/API/Crypto
 ---
-<p>{{APIRef("Web Crypto API")}}</p>
-
-<p>L'interface <code><strong>Crypto</strong></code> représente les fonctions cryptographiques de base dans notre contexte actuel. Elle permet d'accéder à de solides générateur de nombres aléatoires dédiés à la cryptographie ainsi qu'aux principales primitives cryptographiques.</p>
-
-<p>Un objet avec cette interface est disponible dans le contexte web de la page via la propriété {{domxref("Window.crypto")}}.</p>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<p><em>Cette interface implémente les propriétés définies dans {{domxref("RandomSource")}}.</em></p>
-
-<dl>
- <dt>{{domxref("Crypto.subtle")}} {{experimental_inline}}{{readOnlyInline}}</dt>
- <dd>Retourne un objet {{domxref("SubtleCrypto")}} procurant un accès aux principales primitives cryptographiques, comme le hashage, les signatures, le chiffrement ou le déchiffrement.</dd>
-</dl>
-
-<h2 id="Methodes">Methodes</h2>
-
-<p><em>Cette interface implémente les méthodes définies dans {{domxref("RandomSource")}}.</em></p>
-
-<dl>
- <dt>{{domxref("RandomSource.getRandomValues()") }}</dt>
- <dd>Rempli le {{ jsxref("TypedArray") }} passé avec des valeurs aléatoires utilisables pour la cryptographie.</dd>
-</dl>
-
-<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("Web Crypto API", "#crypto-interface", "Crypto")}}</td>
-  <td>{{Spec2("Web Crypto API")}}</td>
-  <td>Definition<br>
-    initiale</td>
-  </tr>
-</tbody>
-</table>
- 
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
-  <li><a href="/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li>
-</ul>
\ No newline at end of file
+{{APIRef("Web Crypto API")}}
+
+L'interface **`Crypto`** représente les fonctions cryptographiques de base dans notre contexte actuel. Elle permet d'accéder à de solides générateur de nombres aléatoires dédiés à la cryptographie ainsi qu'aux principales primitives cryptographiques.
+
+Un objet avec cette interface est disponible dans le contexte web de la page via la propriété {{domxref("Window.crypto")}}.
+
+## Propriétés
+
+_Cette interface implémente les propriétés définies dans {{domxref("RandomSource")}}._
+
+- {{domxref("Crypto.subtle")}} {{experimental_inline}}{{readOnlyInline}}
+  - : Retourne un objet {{domxref("SubtleCrypto")}} procurant un accès aux principales primitives cryptographiques, comme le hashage, les signatures, le chiffrement ou le déchiffrement.
+
+## Methodes
+
+_Cette interface implémente les méthodes définies dans {{domxref("RandomSource")}}._
+
+- {{domxref("RandomSource.getRandomValues()") }}
+  - : Rempli le {{ jsxref("TypedArray") }} passé avec des valeurs aléatoires utilisables pour la cryptographie.
+
+## Spécifications
+
+| Spécification                                                                    | Statut                               | Commentaire         |
+| -------------------------------------------------------------------------------- | ------------------------------------ | ------------------- |
+| {{SpecName("Web Crypto API", "#crypto-interface", "Crypto")}} | {{Spec2("Web Crypto API")}} | Definition initiale |
+
+## Voir aussi
+
+- [Components.utils.importGlobalProperties](/en-US/docs/Components.utils.importGlobalProperties)
diff --git a/files/fr/web/api/crypto/subtle/index.md b/files/fr/web/api/crypto/subtle/index.md
index 5b0b24a70b..85b9fa4a84 100644
--- a/files/fr/web/api/crypto/subtle/index.md
+++ b/files/fr/web/api/crypto/subtle/index.md
@@ -3,40 +3,27 @@ title: Crypto.subtle
 slug: Web/API/Crypto/subtle
 translation_of: Web/API/Crypto/subtle
 ---
-<p>{{APIRef("Web Crypto API")}}{{SecureContext_header}} </p>
+{{APIRef("Web Crypto API")}}{{SecureContext_header}}
 
-<p>{{APIRef("Web Crypto API")}}</p>
+{{APIRef("Web Crypto API")}}
 
-<p>La propriété <strong><code>Crypto.subtle</code></strong> en mode lecture seule retourne un objet {{domxref("SubtleCrypto")}} permettant de réaliser des opérations cryptographiques.</p>
+La propriété **`Crypto.subtle`** en mode lecture seule retourne un objet {{domxref("SubtleCrypto")}} permettant de réaliser des opérations cryptographiques.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="notranslate">var <em>crypto</em> = crypto.subtle;</pre>
+    var crypto = crypto.subtle;
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{ SpecName('Web Crypto API', '#dfn-Crypto', 'Crypto.subtle') }}</td>
-   <td>{{ Spec2('Web Crypto API') }}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                        | Statut                                   | Commentaire          |
+| ------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------- |
+| {{ SpecName('Web Crypto API', '#dfn-Crypto', 'Crypto.subtle') }} | {{ Spec2('Web Crypto API') }} | Définition initiale. |
 
-<h2 id="Compatibilité_navigateur">Compatibilité navigateur</h2>
+## Compatibilité navigateur
 
-<p>{{Compat("api.Crypto.subtle")}}</p>
+{{Compat("api.Crypto.subtle")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("Crypto")}}.</li>
- <li>{{domxref("SubtleCrypto")}}.</li>
-</ul>
+- {{domxref("Crypto")}}.
+- {{domxref("SubtleCrypto")}}.
diff --git a/files/fr/web/api/crypto_property/index.md b/files/fr/web/api/crypto_property/index.md
index 80365515c5..2f968ce1ff 100644
--- a/files/fr/web/api/crypto_property/index.md
+++ b/files/fr/web/api/crypto_property/index.md
@@ -4,41 +4,25 @@ slug: Web/API/crypto_property
 translation_of: Web/API/Window/crypto
 original_slug: Web/API/Window/crypto
 ---
-<p>{{APIRef}}</p>
+{{APIRef}}
 
-<p>La propriété, en lecture seule, {{domxref("Window.crypto")}} retourne l'objet {{domxref("Crypto")}}  associé à l'objet global. Cet objet permet aux pages web d'avoir un accès à certains services liés à cryptographie.</p>
+La propriété, en lecture seule, {{domxref("Window.crypto")}} retourne l'objet {{domxref("Crypto")}}  associé à l'objet global. Cet objet permet aux pages web d'avoir un accès à certains services liés à cryptographie.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var <em>cryptoObj</em> = window.crypto || window.msCrypto; // pour IE 11
-</pre>
+    var cryptoObj = window.crypto || window.msCrypto; // pour IE 11
 
-<h2 id="Specification">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("Web Crypto API", "#dfn-GlobalCrypto", "Window.crypto")}}</td>
-      <td>{{Spec2("Web Crypto API")}}</td>
-      <td>Définition initiale</td>
-    </tr>
- </tbody>
-</table>
+| Spécification                                                                                | Statut                               | Commentaire         |
+| -------------------------------------------------------------------------------------------- | ------------------------------------ | ------------------- |
+| {{SpecName("Web Crypto API", "#dfn-GlobalCrypto", "Window.crypto")}} | {{Spec2("Web Crypto API")}} | Définition initiale |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Window.crypto")}}</p>
+{{Compat("api.Window.crypto")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>L'objet global {{domxref("Window")}}</li>
-  <li>L'interface {{domxref("Crypto")}}</li>
-</ul>
+- L'objet global {{domxref("Window")}}
+- L'interface {{domxref("Crypto")}}
diff --git a/files/fr/web/api/cryptokey/index.md b/files/fr/web/api/cryptokey/index.md
index e02b9889d6..fa771b7c25 100644
--- a/files/fr/web/api/cryptokey/index.md
+++ b/files/fr/web/api/cryptokey/index.md
@@ -8,57 +8,42 @@ tags:
   - Web Crypto API
 translation_of: Web/API/CryptoKey
 ---
-<p>{{APIRef("Web Crypto API")}}</p>
+{{APIRef("Web Crypto API")}}
 
-<p>L'interface <strong><code>CryptoKey</code></strong> représente une {{glossary("clef")}} cryptographique dérivé d'un algorithme de clef spécifique.</p>
+L'interface **`CryptoKey`** représente une {{glossary("clef")}} cryptographique dérivé d'un algorithme de clef spécifique.
 
-<p>Un objet <code>CryptoKey</code> peut être obtenu en utilisant : {{domxref("SubtleCrypto.generateKey()")}}, {{domxref("SubtleCrypto.deriveKey()")}} ou {{domxref("SubtleCrypto.importKey()")}}</p>
+Un objet `CryptoKey` peut être obtenu en utilisant : {{domxref("SubtleCrypto.generateKey()")}}, {{domxref("SubtleCrypto.deriveKey()")}} ou {{domxref("SubtleCrypto.importKey()")}}
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<p><em>Cette interface n'hérite d'aucune propriété.</em></p>
+_Cette interface n'hérite d'aucune propriété._
 
-<dl>
- <dt>{{domxref("CryptoKey.type")}}</dt>
- <dd>Retourne  une énumération de valeurs représentant un type de clef, une clef secrète (pour un algorithme symétriques), une clef publique ou privée (pour un algorithme asymétrique)</dd>
- <dt>{{domxref("CryptoKey.extractable")}}</dt>
- <dd>Retourne un {{jsxref("booléen")}} indiquant si l'information peut être extraite de l'application ou non.</dd>
- <dt>{{domxref("CryptoKey.algorithm")}}</dt>
- <dd>Retourne un objet opaque représentant  un chiffre particulier avec lequel la clé doit être utilisée avec.</dd>
- <dt>{{domxref("CryptoKey.usages")}}</dt>
- <dd>Retourne un tableau contenant une énumération de valeurs indiquant quel est la clé qui peut être utilisée.</dd>
-</dl>
+- {{domxref("CryptoKey.type")}}
+  - : Retourne  une énumération de valeurs représentant un type de clef, une clef secrète (pour un algorithme symétriques), une clef publique ou privée (pour un algorithme asymétrique)
+- {{domxref("CryptoKey.extractable")}}
+  - : Retourne un {{jsxref("booléen")}} indiquant si l'information peut être extraite de l'application ou non.
+- {{domxref("CryptoKey.algorithm")}}
+  - : Retourne un objet opaque représentant  un chiffre particulier avec lequel la clé doit être utilisée avec.
+- {{domxref("CryptoKey.usages")}}
+  - : Retourne un tableau contenant une énumération de valeurs indiquant quel est la clé qui peut être utilisée.
 
-<h2 id="Méthodes">Méthodes</h2>
+## Méthodes
 
-<p><em>Cette interface n'hérite et n'implémente aucune méthode.</em></p>
+_Cette interface n'hérite et n'implémente aucune méthode._
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{ SpecName('Web Crypto API', '#dfn-CryptoKey', 'CryptoKey') }}</td>
-   <td>{{ Spec2('Web Crypto API') }}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                        | Statut                                   | Commentaire          |
+| ------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------- |
+| {{ SpecName('Web Crypto API', '#dfn-CryptoKey', 'CryptoKey') }} | {{ Spec2('Web Crypto API') }} | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.CryptoKey")}}</p>
+{{Compat("api.CryptoKey")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li><a href="/fr/docs/Web/API/Web_Crypto_API">Web Crypto API</a></li>
-  <li><a href="/fr/docs/Web/Security">Sécurité du Web</a></li>
-  <li><a href="/fr/docs/Web/Privacy">Vie privée, autorisations et sécurité de l'information</a></li>
-  <li>{{domxref("Crypto")}} et {{domxref("Crypto.subtle")}}.</li>
- </ul>
+- [Web Crypto API](/fr/docs/Web/API/Web_Crypto_API)
+- [Sécurité du Web](/fr/docs/Web/Security)
+- [Vie privée, autorisations et sécurité de l'information](/fr/docs/Web/Privacy)
+- {{domxref("Crypto")}} et {{domxref("Crypto.subtle")}}.
diff --git a/files/fr/web/api/css/index.md b/files/fr/web/api/css/index.md
index 93f55c6ad4..1f8bb44d20 100644
--- a/files/fr/web/api/css/index.md
+++ b/files/fr/web/api/css/index.md
@@ -3,62 +3,41 @@ title: CSS
 slug: Web/API/CSS
 translation_of: Web/API/CSS
 ---
-<div>{{APIRef("CSSOM")}}</div>
+{{APIRef("CSSOM")}}
 
-<p>L'interface CSS possède les méthodes utiles au CSS. Aucun objet de cette interface ne sont implémentés : il ne contient que des méthodes statiques et est donc une interface abstraite.</p>
+L'interface CSS possède les méthodes utiles au CSS. Aucun objet de cette interface ne sont implémentés : il ne contient que des méthodes statiques et est donc une interface abstraite.
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<p>L'interface CSS est une interface et aucun objet de ce type ne peut être créé: seules les méthodes statiques sont définies.</p>
+L'interface CSS est une interface et aucun objet de ce type ne peut être créé: seules les méthodes statiques sont définies.
 
-<h2 id="Méthodes">Méthodes</h2>
+## Méthodes
 
-<p>L'interface CSS est une interface et aucun objet de ce type ne peut être créé: seules les méthodes statiques sont définies.</p>
+L'interface CSS est une interface et aucun objet de ce type ne peut être créé: seules les méthodes statiques sont définies.
 
-<h2 id="Static_methods">Static methods</h2>
+## Static methods
 
-<p><em>Aucun héritage de méthode statique</em>.</p>
+_Aucun héritage de méthode statique_.
 
-<dl>
- <dt>{{domxref("CSS.supports()")}}</dt>
- <dd>Retourne un {{domxref("Boolean")}} qui indique si la paire <em>propriété/valeur</em>, ou si la condition, passée en paramètre est supportée.</dd>
-</dl>
+- {{domxref("CSS.supports()")}}
+  - : Retourne un {{domxref("Boolean")}} qui indique si la paire _propriété/valeur_, ou si la condition, passée en paramètre est supportée.
 
-<dl>
- <dt>{{domxref("CSS.escape()")}} {{experimental_inline}}</dt>
- <dd>Utilisée pour protéger une chaine de caractère qui sera utiliser comme sélecteur CSS.</dd>
-</dl>
+<!---->
 
-<h2 id="Spécifications">Spécifications</h2>
+- {{domxref("CSS.escape()")}} {{experimental_inline}}
+  - : Utilisée pour protéger une chaine de caractère qui sera utiliser comme sélecteur CSS.
 
-<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('CSSOM', '#the-css.escape%28%29-method', 'CSS')}}</td>
-   <td>{{Spec2('CSSOM')}}</td>
-   <td>Ajoute la méthode statique escape()</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Conditional', '#the-css-interface', 'CSS')}}</td>
-   <td>{{Spec2('CSS3 Conditional')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+| Spécification                                                                    | Status                                   | Commentaire                         |
+| -------------------------------------------------------------------------------- | ---------------------------------------- | ----------------------------------- |
+| {{SpecName('CSSOM', '#the-css.escape%28%29-method', 'CSS')}} | {{Spec2('CSSOM')}}                 | Ajoute la méthode statique escape() |
+| {{SpecName('CSS3 Conditional', '#the-css-interface', 'CSS')}} | {{Spec2('CSS3 Conditional')}} | Définition initiale                 |
 
-<p>{{Compat("api.CSS")}}</p>
+## Compatibilité des navigateurs
 
-<h2 id="Voir_également">Voir également</h2>
+{{Compat("api.CSS")}}
 
-<ul>
- <li><a href="/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li>
-</ul>
+## Voir également
+
+- [Components.utils.importGlobalProperties](/en-US/docs/Components.utils.importGlobalProperties)
diff --git a/files/fr/web/api/css_counter_styles/index.md b/files/fr/web/api/css_counter_styles/index.md
index 09454dc3ac..193af4cae8 100644
--- a/files/fr/web/api/css_counter_styles/index.md
+++ b/files/fr/web/api/css_counter_styles/index.md
@@ -1,31 +1,27 @@
 ---
 title: Module CSS Styles de compteurs (Counter Styles)
 slug: Web/API/CSS_Counter_Styles
-translation_of: 'Web/API/CSS_Counter_Styles'
+translation_of: Web/API/CSS_Counter_Styles
 ---
-<div>{{DefaultAPISidebar("CSS Counter Styles")}}{{SeeCompatTable}}</div>
+{{DefaultAPISidebar("CSS Counter Styles")}}{{SeeCompatTable}}
 
-<p>Le module CSS Styles de compteurs (<i lang="en">Counter Styles</i>) permet de définir des styles de compteurs personnalisés qui peuvent être utilisés pour les marqueurs de listes CSS et les compteurs des contenus générés.</p>
+Le module CSS Styles de compteurs (<i lang="en">Counter Styles</i>) permet de définir des styles de compteurs personnalisés qui peuvent être utilisés pour les marqueurs de listes CSS et les compteurs des contenus générés.
 
-<h2 id="interfaces">Interfaces</h2>
+## Interfaces
 
-<dl>
-  <dt>{{domxref("CSSCounterStyleRule")}}</dt>
-  <dd>Représente une règle {{cssxref("@counter-style")}}.</dd>
-</dl>
+- {{domxref("CSSCounterStyleRule")}}
+  - : Représente une règle {{cssxref("@counter-style")}}.
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<p>{{Specifications("api.CSSCounterStyleRule")}}</p>
+{{Specifications("api.CSSCounterStyleRule")}}
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<h3 id="csscounterstylerule_interface">Interface <code>CSSCounterStyleRule</code></h3>
+### Interface `CSSCounterStyleRule`
 
-<p>{{Compat("api.CSSCounterStyleRule")}}</p>
+{{Compat("api.CSSCounterStyleRule")}}
 
-<h2 id="see_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li><a href="/fr/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">Utiliser les compteurs CSS</a></li>
-</ul>
+- [Utiliser les compteurs CSS](/fr/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters)
diff --git a/files/fr/web/api/css_font_loading_api/index.md b/files/fr/web/api/css_font_loading_api/index.md
index 664e4de90a..035c477efa 100644
--- a/files/fr/web/api/css_font_loading_api/index.md
+++ b/files/fr/web/api/css_font_loading_api/index.md
@@ -3,31 +3,27 @@ title: CSS Font Loading API
 slug: Web/API/CSS_Font_Loading_API
 translation_of: Web/API/CSS_Font_Loading_API
 ---
-<div>{{DefaultAPISidebar("CSS Font Loading API")}}{{SeeCompatTable}}</div>
+{{DefaultAPISidebar("CSS Font Loading API")}}{{SeeCompatTable}}
 
-<p>L'API CSS Font Loading API fournit des évènements et interfaces pour le chargement dynamique des ressources associées aux polices.</p>
+L'API CSS Font Loading API fournit des évènements et interfaces pour le chargement dynamique des ressources associées aux polices.
 
-<div class="note">
-<p><strong>Note :</strong> cette fonctionnalité est disponible dans <a href="/fr/docs/Web/API/Web_Workers_API">l'API Web Workers</a> (<code>self.fonts</code> donne accès à {{domxref('FontFaceSet')}}).</p>
-</div>
+> **Note :** cette fonctionnalité est disponible dans [l'API Web Workers](/fr/docs/Web/API/Web_Workers_API) (`self.fonts` donne accès à {{domxref('FontFaceSet')}}).
 
-<h2 id="Interfaces">Interfaces</h2>
+## Interfaces
 
-<dl>
- <dt>{{domxref('FontFace')}}</dt>
- <dd>Représente une police unique mise à disposition.</dd>
- <dt>{{domxref('FontFaceSet')}}</dt>
- <dd>Une interface chargeant les polices et vérifiant le statut de leur téléchargement.</dd>
- <dt>{{domxref('FontFaceSource')}}</dt>
- <dd>Un {{Glossary("mixin")}} fournissant toutes les polices utilisées dans les opérations liées aux polices, à moins qu'elles ne soient définies autrement. Cela définit la propriété {{domxref("FontFaceSources.fonts")}} disponible pour le {{domxref("Document")}} et le {{domxref("WorkerGlobalScope")}}.</dd>
- <dt>{{domxref('FontFaceSetLoadEvent')}}</dt>
- <dd>Déclenché lorsqu'un {{domxref("FontFaceSet")}} est chargé.</dd>
-</dl>
+- {{domxref('FontFace')}}
+  - : Représente une police unique mise à disposition.
+- {{domxref('FontFaceSet')}}
+  - : Une interface chargeant les polices et vérifiant le statut de leur téléchargement.
+- {{domxref('FontFaceSource')}}
+  - : Un {{Glossary("mixin")}} fournissant toutes les polices utilisées dans les opérations liées aux polices, à moins qu'elles ne soient définies autrement. Cela définit la propriété {{domxref("FontFaceSources.fonts")}} disponible pour le {{domxref("Document")}} et le {{domxref("WorkerGlobalScope")}}.
+- {{domxref('FontFaceSetLoadEvent')}}
+  - : Déclenché lorsqu'un {{domxref("FontFaceSet")}} est chargé.
 
-<h2 id="Specifications">Spécifications</h2>
+## Spécifications
 
-<p>{{Specifications("api.FontFace")}}</p>
+{{Specifications("api.FontFace")}}
 
-<h2 id="Browser_compatibility">Compatibilité navigateur</h2>
+## Compatibilité navigateur
 
-<p>{{Compat("api.FontFace")}}</p>
\ No newline at end of file
+{{Compat("api.FontFace")}}
diff --git a/files/fr/web/api/css_object_model/determining_the_dimensions_of_elements/index.md b/files/fr/web/api/css_object_model/determining_the_dimensions_of_elements/index.md
index 4b0fc4ff56..a462fb28d2 100644
--- a/files/fr/web/api/css_object_model/determining_the_dimensions_of_elements/index.md
+++ b/files/fr/web/api/css_object_model/determining_the_dimensions_of_elements/index.md
@@ -3,41 +3,39 @@ title: Déterminer les dimensions des éléments
 slug: Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements
 translation_of: Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements
 ---
-<p>{{APIRef("CSSOM View")}}</p>
+{{APIRef("CSSOM View")}}
 
-<p>Il y a plusieurs propriétés que vous pouvez regarder dans le but de déterminer la largeur et la hauteur des éléments, et il peut être difficile de déterminer quelle est la bonne pour vos besoins.</p>
+Il y a plusieurs propriétés que vous pouvez regarder dans le but de déterminer la largeur et la hauteur des éléments, et il peut être difficile de déterminer quelle est la bonne pour vos besoins.
 
-<p>Cet article est conçu pour vous aider à prendre cette décision. Notez que toutes ces propriétés sont en lecture seule .</p>
+Cet article est conçu pour vous aider à prendre cette décision. Notez que toutes ces propriétés sont en lecture seule .
 
-<p>Si vous voulez définir la largeur et la hauteur d'un élément, utilisez <code><a href="/fr/docs/Web/CSS/width">width</a></code> et <code><a href="/fr/docs/Web/CSS/height">height</a></code>; ou les propriétés <a href="/fr/docs/Web/CSS/min-width"> <code>min-width</code></a>, <a href="/fr/docs/Web/CSS/max-width"> <code>max-width</code></a>, <a href="/fr/docs/Web/CSS/min-height"> <code>min-height</code></a> et <a href="/fr/docs/Web/CSS/max-height"> <code>max-height</code></a>.</p>
+Si vous voulez définir la largeur et la hauteur d'un élément, utilisez [`width`](/fr/docs/Web/CSS/width) et [`height`](/fr/docs/Web/CSS/height); ou les propriétés [`min-width`](/fr/docs/Web/CSS/min-width), [`max-width`](/fr/docs/Web/CSS/max-width), [`min-height`](/fr/docs/Web/CSS/min-height) et [`max-height`](/fr/docs/Web/CSS/max-height).
 
-<h2 id="How_much_room_does_it_use_up.3F">Que faut-il utiliser ?</h2>
+## Que faut-il utiliser ?
 
-<p>Si vous avez besoin de connaître les dimensions totales de l'espace occupé par un élément, y compris la largeur du contenu visible, les barres de défilement (le cas échéant), le rembourrage, et les frontières, vous pouvez utiliser les propriétés <code><a href="/fr/DOM/element.offsetWidth">offsetWidth</a></code> et <code><a href="/fr/DOM/element.offsetHeight">offsetHeight</a></code>.</p>
+Si vous avez besoin de connaître les dimensions totales de l'espace occupé par un élément, y compris la largeur du contenu visible, les barres de défilement (le cas échéant), le rembourrage, et les frontières, vous pouvez utiliser les propriétés [`offsetWidth`](/fr/DOM/element.offsetWidth) et [`offsetHeight`](/fr/DOM/element.offsetHeight).
 
-<p>La plupart du temps ce sont les mêmes que la largeur et la hauteur de <code><a href="/fr/DOM/element.getBoundingClientRect">getBoundingClientRect()</a></code>, quand il n'y a pas de transformations appliquées à l'élément. En cas de transformations, <code>offsetWidth</code> et <code>offsetHeight</code> renvoie la disposition de la largeur et la hauteur de l'élément, tandis que <code>getBoundingClientRect()</code> retourne le rendu de la largeur et de la hauteur.</p>
+La plupart du temps ce sont les mêmes que la largeur et la hauteur de [`getBoundingClientRect()`](/fr/DOM/element.getBoundingClientRect), quand il n'y a pas de transformations appliquées à l'élément. En cas de transformations, `offsetWidth` et `offsetHeight` renvoie la disposition de la largeur et la hauteur de l'élément, tandis que `getBoundingClientRect()` retourne le rendu de la largeur et de la hauteur.
 
-<p>A titre d'exemple, si l'élément a <code>width: 100px;</code> et <code>transform: scale(0.5);</code> <code>getBoundingClientRect()</code> retournera 50 comme largeur, tandis que <code>offsetWidth</code> retournera 100.</p>
+A titre d'exemple, si l'élément a `width: 100px;` et `transform: scale(0.5);` `getBoundingClientRect()` retournera 50 comme largeur, tandis que `offsetWidth` retournera 100.
 
-<p><img src="dimensions-offset.png"></p>
+![](dimensions-offset.png)
 
-<h2 id="What.27s_the_size_of_the_displayed_content.3F">Quelle est la taille du contenu affiché ?</h2>
+## Quelle est la taille du contenu affiché ?
 
-<p>Si vous avez besoin de savoir combien prend d'espace le contenu réel affiché, y compris le rembourrage mais sans les frontières, les marges, ou les barres de défilement, vous pouvez utiliser les propriétés <code><a href="/fr/DOM/element.clientWidth">clientWidth</a></code> et  <a href="/fr/DOM/element.clientHeight"><code> clientHeight</code></a> :</p>
+Si vous avez besoin de savoir combien prend d'espace le contenu réel affiché, y compris le rembourrage mais sans les frontières, les marges, ou les barres de défilement, vous pouvez utiliser les propriétés [`clientWidth`](/fr/DOM/element.clientWidth) et  [`clientHeight`](/fr/DOM/element.clientHeight) :
 
-<p><img src="dimensions-client.png"></p>
+![](dimensions-client.png)
 
-<h2 id="How_big_is_the_content.3F">Grandeur totale</h2>
+## Grandeur totale
 
-<p>Si vous avez besoin de connaître la taille réelle d'un élement, peu importe sa visibilité, vous devez utiliser les propriétés <code><a href="/fr/DOM/element.scrollWidth">scrollWidth</a></code> et <code><a href="/fr/docs/Web/API/Element.scrollHeight">scrollHeight</a></code>.</p>
+Si vous avez besoin de connaître la taille réelle d'un élement, peu importe sa visibilité, vous devez utiliser les propriétés [`scrollWidth`](/fr/DOM/element.scrollWidth) et [`scrollHeight`](/fr/docs/Web/API/Element.scrollHeight).
 
-<p>Elles retournent la largeur et la hauteur de l'ensemble du contenu d'un élément, même si seulement une partie de celui-ci est actuellement visible en raison de l'utilisation des barres de défilement.</p>
+Elles retournent la largeur et la hauteur de l'ensemble du contenu d'un élément, même si seulement une partie de celui-ci est actuellement visible en raison de l'utilisation des barres de défilement.
 
-<p>Par exemple, si un élément de 600x400 pixels est affiché dans une boîte de défilement de 300x300 pixels, <code>scrollWidth</code> retourne 600 tandis que <code>scrollHeight</code> retourne 400.</p>
+Par exemple, si un élément de 600x400 pixels est affiché dans une boîte de défilement de 300x300 pixels, `scrollWidth` retourne 600 tandis que `scrollHeight` retourne 400.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="http://www.w3.org/TR/cssom-view/">http://www.w3.org/TR/cssom-view/</a></li>
- <li><a href="https://docs.microsoft.com/en-us/previous-versions//hh781509(v=vs.85)">MSDN: Measuring Element Dimension and Location</a></li>
-</ul>
+- <http://www.w3.org/TR/cssom-view/>
+- [MSDN: Measuring Element Dimension and Location](<https://docs.microsoft.com/en-us/previous-versions//hh781509(v=vs.85)>)
diff --git a/files/fr/web/api/css_object_model/index.md b/files/fr/web/api/css_object_model/index.md
index ae59f591a9..e4d30ca91e 100644
--- a/files/fr/web/api/css_object_model/index.md
+++ b/files/fr/web/api/css_object_model/index.md
@@ -7,121 +7,70 @@ tags:
   - Reference
 translation_of: Web/API/CSS_Object_Model
 ---
-<p>{{DefaultAPISidebar('CSSOM')}}</p>
+{{DefaultAPISidebar('CSSOM')}}
 
-<p>Le <strong>CSS Object Model</strong> est un ensemble d’API permettant de manipuler le CSS depuis JavaScript. C’est l’équivalent des API DOM et HTML, mais pour CSS. Il permet de lire et modifier des styles CSS dynamiquement.</p>
+Le **CSS Object Model** est un ensemble d’API permettant de manipuler le CSS depuis JavaScript. C’est l’équivalent des API DOM et HTML, mais pour CSS. Il permet de lire et modifier des styles CSS dynamiquement.
 
-<h2 id="Référence">Référence</h2>
+## Référence
 
-<ul>
- <li>{{domxref("AnimationEvent")}}</li>
- <li>{{domxref("CaretPosition")}}</li>
- <li>{{domxref("CSS")}}</li>
- <li>{{domxref("CSSCharsetRule")}}</li>
- <li>{{domxref("CSSConditionRule")}}</li>
- <li>{{domxref("CSSCounterStyleRule")}}</li>
- <li>{{domxref("CSSFontFaceRule")}}</li>
- <li>{{domxref("CSSFontFeatureValuesMap")}}</li>
- <li>{{domxref("CSSFontFeatureValuesRule")}}</li>
- <li>{{domxref("CSSGroupingRule")}}</li>
- <li>{{domxref("CSSImportRule")}}</li>
- <li>{{domxref("CSSKeyframeRule")}}</li>
- <li>{{domxref("CSSKeyframesRule")}}</li>
- <li>{{domxref("CSSMarginRule")}}</li>
- <li>{{domxref("CSSMediaRule")}}</li>
- <li>{{domxref("CSSNamespaceRule")}}</li>
- <li>{{domxref("CSSPageRule")}}</li>
- <li>{{domxref("CSSRule")}}</li>
- <li>{{domxref("CSSRuleList")}}</li>
- <li>{{domxref("CSSStylesheet")}}</li>
- <li>{{domxref("CSSStyleDeclaration")}}</li>
- <li>{{domxref("CSSSupportsRule")}}</li>
- <li>{{domxref("CSSVariablesMap")}}</li>
- <li>{{domxref("CSSViewportRule")}}</li>
- <li>{{domxref("ElementCSSInlineStyle")}}</li>
- <li>{{domxref("GeometryUtils")}}</li>
- <li>{{domxref("GetStyleUtils")}}</li>
- <li>{{domxref("LinkStyle")}}</li>
- <li>{{domxref("MediaList")}}</li>
- <li>{{domxref("MediaQueryList")}}</li>
- <li>{{domxref("PseudoElement")}}</li>
- <li>{{domxref("Screen")}}</li>
- <li>{{domxref("Stylesheet")}}</li>
- <li>{{domxref("StylesheetList")}}</li>
- <li>{{domxref("TransitionEvent")}}</li>
-</ul>
+- {{domxref("AnimationEvent")}}
+- {{domxref("CaretPosition")}}
+- {{domxref("CSS")}}
+- {{domxref("CSSCharsetRule")}}
+- {{domxref("CSSConditionRule")}}
+- {{domxref("CSSCounterStyleRule")}}
+- {{domxref("CSSFontFaceRule")}}
+- {{domxref("CSSFontFeatureValuesMap")}}
+- {{domxref("CSSFontFeatureValuesRule")}}
+- {{domxref("CSSGroupingRule")}}
+- {{domxref("CSSImportRule")}}
+- {{domxref("CSSKeyframeRule")}}
+- {{domxref("CSSKeyframesRule")}}
+- {{domxref("CSSMarginRule")}}
+- {{domxref("CSSMediaRule")}}
+- {{domxref("CSSNamespaceRule")}}
+- {{domxref("CSSPageRule")}}
+- {{domxref("CSSRule")}}
+- {{domxref("CSSRuleList")}}
+- {{domxref("CSSStylesheet")}}
+- {{domxref("CSSStyleDeclaration")}}
+- {{domxref("CSSSupportsRule")}}
+- {{domxref("CSSVariablesMap")}}
+- {{domxref("CSSViewportRule")}}
+- {{domxref("ElementCSSInlineStyle")}}
+- {{domxref("GeometryUtils")}}
+- {{domxref("GetStyleUtils")}}
+- {{domxref("LinkStyle")}}
+- {{domxref("MediaList")}}
+- {{domxref("MediaQueryList")}}
+- {{domxref("PseudoElement")}}
+- {{domxref("Screen")}}
+- {{domxref("Stylesheet")}}
+- {{domxref("StylesheetList")}}
+- {{domxref("TransitionEvent")}}
 
-<p>Quelques autres interfaces sont également étentues par les spécifications relatives au CSSOM : {{domxref("Document")}}, {{domxref("Window")}}, {{domxref("Element")}}, {{domxref("HTMLElement")}}, {{domxref("HTMLImageElement")}}, {{domxref("Range")}}, {{domxref("MouseEvent")}}, et {{domxref("SVGElement")}}.</p>
+Quelques autres interfaces sont également étentues par les spécifications relatives au CSSOM : {{domxref("Document")}}, {{domxref("Window")}}, {{domxref("Element")}}, {{domxref("HTMLElement")}}, {{domxref("HTMLImageElement")}}, {{domxref("Range")}}, {{domxref("MouseEvent")}}, et {{domxref("SVGElement")}}.
 
-<h2 id="Tutoriels">Tutoriels</h2>
+## Tutoriels
 
-<ul>
- <li><a href="/fr/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements">Déterminer les dimensions l’un élément</a> (nécéssite une mise à jour, car datant de l’époque DHTML/Ajax).</li>
- <li><a href="/fr/docs/Web/API/CSS_Object_Model/Managing_screen_orientation">Gérer l’orientation de l’écran</a></li>
-</ul>
+- [Déterminer les dimensions l’un élément](/fr/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements) (nécéssite une mise à jour, car datant de l’époque DHTML/Ajax).
+- [Gérer l’orientation de l’écran](/fr/docs/Web/API/CSS_Object_Model/Managing_screen_orientation)
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSSOM")}}</td>
-   <td>{{Spec2("CSSOM")}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSSOM View")}}</td>
-   <td>{{Spec2("CSSOM View")}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName("Screen Orientation")}}</td>
-   <td>{{Spec2("Screen Orientation")}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS3 Fonts")}}</td>
-   <td>{{Spec2("CSS3 Fonts")}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS3 Animations")}}</td>
-   <td>{{Spec2("CSS3 Animations")}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS3 Transitions")}}</td>
-   <td>{{Spec2("CSS3 Transitions")}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS3 Variables")}}</td>
-   <td>{{Spec2("CSS3 Variables")}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS3 Conditional")}}</td>
-   <td>{{Spec2("CSS3 Conditional")}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS3 Device")}}</td>
-   <td>{{Spec2("CSS3 Device")}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS3 Counter Styles")}}</td>
-   <td>{{Spec2("CSS3 Counter Styles")}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                    | Statut                                       | Commentaire |
+| ------------------------------------------------ | -------------------------------------------- | ----------- |
+| {{SpecName("CSSOM")}}                     | {{Spec2("CSSOM")}}                     |             |
+| {{SpecName("CSSOM View")}}             | {{Spec2("CSSOM View")}}             |             |
+| {{SpecName("Screen Orientation")}}     | {{Spec2("Screen Orientation")}}     |             |
+| {{SpecName("CSS3 Fonts")}}             | {{Spec2("CSS3 Fonts")}}             |             |
+| {{SpecName("CSS3 Animations")}}         | {{Spec2("CSS3 Animations")}}         |             |
+| {{SpecName("CSS3 Transitions")}}     | {{Spec2("CSS3 Transitions")}}     |             |
+| {{SpecName("CSS3 Variables")}}         | {{Spec2("CSS3 Variables")}}         |             |
+| {{SpecName("CSS3 Conditional")}}     | {{Spec2("CSS3 Conditional")}}     |             |
+| {{SpecName("CSS3 Device")}}             | {{Spec2("CSS3 Device")}}             |             |
+| {{SpecName("CSS3 Counter Styles")}} | {{Spec2("CSS3 Counter Styles")}} |             |
 
-<h2 id="Notes_sur_la_compatibilité_des_navigateurs">Notes sur la compatibilité des navigateurs</h2>
+## Notes sur la compatibilité des navigateurs
 
-<p>Toutes ces fonctionnalités ont été ajoutées petit à petit au fil des années dans les différents navigateurs : ce fut un processus assez complexe, impossible à résumer en un simple tableau. Veuillez vous référer aux interfaces spécifiques pour connaître leurs disponibilités.</p>
+Toutes ces fonctionnalités ont été ajoutées petit à petit au fil des années dans les différents navigateurs : ce fut un processus assez complexe, impossible à résumer en un simple tableau. Veuillez vous référer aux interfaces spécifiques pour connaître leurs disponibilités.
diff --git a/files/fr/web/api/css_object_model/managing_screen_orientation/index.md b/files/fr/web/api/css_object_model/managing_screen_orientation/index.md
index 73406a99b5..3af0577eb9 100644
--- a/files/fr/web/api/css_object_model/managing_screen_orientation/index.md
+++ b/files/fr/web/api/css_object_model/managing_screen_orientation/index.md
@@ -8,37 +8,37 @@ tags:
   - Screen Orientation
 translation_of: Web/API/CSS_Object_Model/Managing_screen_orientation
 ---
-<p>{{SeeCompatTable}}{{APIRef}}</p>
+{{SeeCompatTable}}{{APIRef}}
 
-<h2 id="Sommaire">Sommaire</h2>
+## Sommaire
 
-<p>L'orientation de l'écran est quelque chose de légèrement différent de <a href="/fr/docs/WebAPI/Detecting_device_orientation">l'orientation de l'appareil</a>. Même si un appareil n'a pas la capacité de détecter sa propre orientation, un écran en possède toujours une. Et si on est capable de connaître son orientation, il est bon d'avoir la possibilité de contrôler l'orientation de l'écran afin de préserver ou d'adapter l'interface d'une application web.</p>
+L'orientation de l'écran est quelque chose de légèrement différent de [l'orientation de l'appareil](/fr/docs/WebAPI/Detecting_device_orientation). Même si un appareil n'a pas la capacité de détecter sa propre orientation, un écran en possède toujours une. Et si on est capable de connaître son orientation, il est bon d'avoir la possibilité de contrôler l'orientation de l'écran afin de préserver ou d'adapter l'interface d'une application web.
 
-<p>Il y a plusieurs manières de gérer l'orientation de l'écran, à la fois avec CSS et JavaScript:</p>
+Il y a plusieurs manières de gérer l'orientation de l'écran, à la fois avec CSS et JavaScript:
 
-<ul>
- <li>La première est la <a href="/fr/docs/Web/CSS/Requ%C3%AAtes_m%C3%A9dia/Utiliser_les_Media_queries#orientation">media query orientation</a>. Cela permet au contenu d'ajuster sa mise en forme à l'aide de CSS, selon que la fenêtre soit en mode paysage (c'est à dire que la largeur est plus grande que la hauteur) ou en mode portrait (que sa hauteur est plus grande que sa largeur).</li>
- <li>La deuxième est l'API JavaScript d'orientation d'écran, qui peut être utilisée pour récupérer l'orientation en cours de l'écran et éventuellement de la verrouiller.</li>
-</ul>
+- La première est la [media query orientation](/fr/docs/Web/CSS/Requ%C3%AAtes_m%C3%A9dia/Utiliser_les_Media_queries#orientation). Cela permet au contenu d'ajuster sa mise en forme à l'aide de CSS, selon que la fenêtre soit en mode paysage (c'est à dire que la largeur est plus grande que la hauteur) ou en mode portrait (que sa hauteur est plus grande que sa largeur).
+- La deuxième est l'API JavaScript d'orientation d'écran, qui peut être utilisée pour récupérer l'orientation en cours de l'écran et éventuellement de la verrouiller.
 
-<h2 id="Ajuster_la_mise_en_page_selon_l'orientation">Ajuster la mise en page selon l'orientation</h2>
+## Ajuster la mise en page selon l'orientation
 
-<p>Un des cas d'utilisation les plus courants pour les changements d'orientation est quand vous souhaitez modifier la mise en page de votre contenu selon l'orientation de l'appareil. Par exemple, peut-être que vous voudriez qu'une barre d'outils s'étende le long de la dimension la plus longue de l'appareil. En utilisant une media query, vous pouvez le faire facilement et automatiquement.</p>
+Un des cas d'utilisation les plus courants pour les changements d'orientation est quand vous souhaitez modifier la mise en page de votre contenu selon l'orientation de l'appareil. Par exemple, peut-être que vous voudriez qu'une barre d'outils s'étende le long de la dimension la plus longue de l'appareil. En utilisant une media query, vous pouvez le faire facilement et automatiquement.
 
-<p>Prenons pour exemple le code HTML suivant:</p>
+Prenons pour exemple le code HTML suivant:
 
-<pre class="brush: html">&lt;ul id="toolbar"&gt;
-  &lt;li&gt;A&lt;/li&gt;
-  &lt;li&gt;B&lt;/li&gt;
-  &lt;li&gt;C&lt;/li&gt;
-&lt;/ul&gt;
+```html
+<ul id="toolbar">
+  <li>A</li>
+  <li>B</li>
+  <li>C</li>
+</ul>
 
-&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacinia nisi nec sem viverra vitae fringilla nulla ultricies. In ac est dolor, quis tincidunt leo. Cras commodo quam non tortor consectetur eget rutrum dolor ultricies. Ut interdum tristique dapibus. Nullam quis malesuada est.&lt;/p&gt;
-</pre>
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacinia nisi nec sem viverra vitae fringilla nulla ultricies. In ac est dolor, quis tincidunt leo. Cras commodo quam non tortor consectetur eget rutrum dolor ultricies. Ut interdum tristique dapibus. Nullam quis malesuada est.</p>
+```
 
-<p>Le CSS s'appuie sur une media query <code>orientation</code> pour gérer les styles spécifiques liés à l'orientation de l'écran.</p>
+Le CSS s'appuie sur une media query `orientation` pour gérer les styles spécifiques liés à l'orientation de l'écran.
 
-<pre class="brush: css">/* D'abord, on définit les styles communs */
+```css
+/* D'abord, on définit les styles communs */
 
 html, body {
   width : 100%;
@@ -77,11 +77,12 @@ li {
   padding: 0.5em;
   background: white;
 }
-</pre>
+```
 
-<p>Une fois qu'on a définit les styles communs, on peut définir des cas spéciaux selon l'orientation.</p>
+Une fois qu'on a définit les styles communs, on peut définir des cas spéciaux selon l'orientation.
 
-<pre class="brush: css">/* En mode portrait, on veut la barre d'outils en haut */
+```css
+/* En mode portrait, on veut la barre d'outils en haut */
 
 @media screen and (orientation: portrait) {
   #toolbar {
@@ -106,75 +107,61 @@ li {
     margin-top: .5em;
   }
 }
-</pre>
+```
 
-<p>Et voici le résultat:</p>
+Et voici le résultat:
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Portrait</th>
-   <th scope="col">Landscape</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{ EmbedLiveSample("Ajuster_la_mise_en_page_selon_l'orientation", 180, 350) }}</td>
-   <td>{{ EmbedLiveSample("Ajuster_la_mise_en_page_selon_l'orientation", 350, 180) }}</td>
-  </tr>
- </tbody>
-</table>
+| Portrait                                                                                                 | Landscape                                                                                                |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
+| {{ EmbedLiveSample("Ajuster_la_mise_en_page_selon_l'orientation", 180, 350) }} | {{ EmbedLiveSample("Ajuster_la_mise_en_page_selon_l'orientation", 350, 180) }} |
 
-<div class="note">
-<p><strong>Note:</strong> La media query orientation s'applique en vérité selon l'orientation de la fenêtre du navigateur (ou iframe) et non l'orientation de l'appareil.</p>
-</div>
+> **Note :** La media query orientation s'applique en vérité selon l'orientation de la fenêtre du navigateur (ou iframe) et non l'orientation de l'appareil.
 
-<h2 id="Verrouiller_l'orientation_de_l'écran">Verrouiller l'orientation de l'écran</h2>
+## Verrouiller l'orientation de l'écran
 
-<div class="warning">
-<p><strong>Attention :</strong> Cette API est expérimentale et est actuellement disponible sur <a href="/en-US/docs/Mozilla/Firefox_OS">Firefox OS</a> et <a href="/en-US/docs/Mozilla/Firefox_for_Android">Firefox pour Android</a> avec le préfixe <code>moz</code>, et sur Internet Explorer pour Windows 8.1 et plus avec le préfixe <code>ms</code>.</p>
-</div>
+> **Attention :** Cette API est expérimentale et est actuellement disponible sur [Firefox OS](/en-US/docs/Mozilla/Firefox_OS) et [Firefox pour Android](/en-US/docs/Mozilla/Firefox_for_Android) avec le préfixe `moz`, et sur Internet Explorer pour Windows 8.1 et plus avec le préfixe `ms`.
 
-<p>Certains appareils (principalement les appareils mobiles) peuvent changer dynamiquement d'orientation d'écran selon leur propre orientation, garantissant que l'utilisateur sera toujours capable de lire ce qu'il y a sur l'écran. Bien que ce comportement soit parfaitement adapté au contenu texte, certains contenus peuvent être affectés négativement par ce changement. Par exemple, les jeux basés sur l'orientation de l'appareil être gachés par un tel changement.</p>
+Certains appareils (principalement les appareils mobiles) peuvent changer dynamiquement d'orientation d'écran selon leur propre orientation, garantissant que l'utilisateur sera toujours capable de lire ce qu'il y a sur l'écran. Bien que ce comportement soit parfaitement adapté au contenu texte, certains contenus peuvent être affectés négativement par ce changement. Par exemple, les jeux basés sur l'orientation de l'appareil être gachés par un tel changement.
 
-<p>L'API Screen Orientation (orientation de l'écran) est faite pour empêcher ou gérer un tel changement.</p>
+L'API Screen Orientation (orientation de l'écran) est faite pour empêcher ou gérer un tel changement.
 
-<h3 id="Écouter_les_changements_d'orientation">Écouter les changements d'orientation</h3>
+### Écouter les changements d'orientation
 
-<p>L'événement {{event("orientationchange")}} est déclenché chaque fois que l'appareil change l'orientation de l'écran et l'orientation peut elle-même être lue avec la propriété {{domxref("Screen.orientation")}}.</p>
+L'événement {{event("orientationchange")}} est déclenché chaque fois que l'appareil change l'orientation de l'écran et l'orientation peut elle-même être lue avec la propriété {{domxref("Screen.orientation")}}.
 
-<pre class="brush: js">screen.addEventListener("orientationchange", function () {
+```js
+screen.addEventListener("orientationchange", function () {
   console.log("The orientation of the screen is: " + screen.orientation);
 });
-</pre>
+```
 
-<h3 id="Empêcher_le_changement_d'orientation">Empêcher le changement d'orientation</h3>
+### Empêcher le changement d'orientation
 
-<p>Toute application web peut verrouiller l'écran dans une orientation pour répondre à ses besoins. L'écran est verrouillé en utilisant la méthode {{domxref("Screen.lockOrientation()")}} et dévérouillé en utilisant {{domxref("Screen.unlockOrientation()")}}.</p>
+Toute application web peut verrouiller l'écran dans une orientation pour répondre à ses besoins. L'écran est verrouillé en utilisant la méthode {{domxref("Screen.lockOrientation()")}} et dévérouillé en utilisant {{domxref("Screen.unlockOrientation()")}}.
 
-<p>{{domxref("Screen.lockOrientation()")}} accepte une chaîne de caractères (ou une série de chaînes de caractères) pour définir le type de verrouillage à appliquer. Les valeurs acceptées sont: <code>portrait-primary</code>, <code>portrait-secondary</code>, <code>landscape-primary</code>, <code>landscape-secondary</code>, <code>portrait</code>, <code>landscape</code> (Voir {{domxref("Screen.lockOrientation")}}  pour en savoir plus sur ces valeurs).</p>
+{{domxref("Screen.lockOrientation()")}} accepte une chaîne de caractères (ou une série de chaînes de caractères) pour définir le type de verrouillage à appliquer. Les valeurs acceptées sont: `portrait-primary`, `portrait-secondary`, `landscape-primary`, `landscape-secondary`, `portrait`, `landscape` (Voir {{domxref("Screen.lockOrientation")}}  pour en savoir plus sur ces valeurs).
 
-<pre class="brush: js">screen.lockOrientation('landscape');</pre>
+```js
+screen.lockOrientation('landscape');
+```
 
-<div class="note">
-<p><strong>Note:</strong> Un verrouillage d'écran est dépendant de l'application web. Si une a application A est verrouillée à <code>landscape</code> et l'application B est verrouillée à <code>portrait</code>, passer de l'application A à B ou à A ne va pas déclencher un événement {{event("orientationchange")}} parce que les deux applications gardent l'orientation qu'elles avaient.</p>
+> **Note :** Un verrouillage d'écran est dépendant de l'application web. Si une a application A est verrouillée à `landscape` et l'application B est verrouillée à `portrait`, passer de l'application A à B ou à A ne va pas déclencher un événement {{event("orientationchange")}} parce que les deux applications gardent l'orientation qu'elles avaient.
+>
+> En revanche, verrouiller l'orientation peut décléncher l'événement {{event("orientationchange")}} si l'orientation a dû être changée pour satisfaire aux critères du verrouillage.
 
-<p>En revanche, verrouiller l'orientation peut décléncher l'événement {{event("orientationchange")}} si l'orientation a dû être changée pour satisfaire aux critères du verrouillage.</p>
-</div>
+## Firefox OS et Android: Verrouiller l'orientation avec le manifeste
 
-<h2 id="Firefox_OS_et_Android_Verrouiller_l'orientation_avec_le_manifeste">Firefox OS et Android: Verrouiller l'orientation avec le manifeste</h2>
+Pour Firefox OS et Firefox Android (bientôt pour la version bureau de Firefox également), vous pouvez le champ [orientation](/en-US/Apps/Build/Manifest#orientation) dans le fichier manifeste de votre application, par exemple:
 
-<p>Pour Firefox OS et Firefox Android (bientôt pour la version bureau de Firefox également), vous pouvez le champ <a href="/en-US/Apps/Build/Manifest#orientation">orientation</a> dans le fichier manifeste de votre application, par exemple:</p>
+```json
+"orientation": "portrait"
+```
 
-<pre class="brush: json">"orientation": "portrait"</pre>
+## Voir aussi
 
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("Screen.orientation")}}</li>
- <li>{{domxref("Screen.lockOrientation()")}}</li>
- <li>{{domxref("Screen.unlockOrientation()")}}</li>
- <li>{{domxref("Screen.onorientationchange")}}</li>
- <li><a href="/fr/docs/Web/CSS/Requ%C3%AAtes_m%C3%A9dia/Utiliser_les_Media_queries#orientation">Media query orientation</a></li>
- <li><a href="http://hacks.mozilla.org/2009/06/media-queries/">A short introduction to media queries in Firefox 3.5</a></li>
-</ul>
+- {{domxref("Screen.orientation")}}
+- {{domxref("Screen.lockOrientation()")}}
+- {{domxref("Screen.unlockOrientation()")}}
+- {{domxref("Screen.onorientationchange")}}
+- [Media query orientation](/fr/docs/Web/CSS/Requ%C3%AAtes_m%C3%A9dia/Utiliser_les_Media_queries#orientation)
+- [A short introduction to media queries in Firefox 3.5](http://hacks.mozilla.org/2009/06/media-queries/)
diff --git a/files/fr/web/api/css_properties_and_values_api/index.md b/files/fr/web/api/css_properties_and_values_api/index.md
index 639f947c8c..eab131b831 100644
--- a/files/fr/web/api/css_properties_and_values_api/index.md
+++ b/files/fr/web/api/css_properties_and_values_api/index.md
@@ -1,52 +1,50 @@
 ---
 title: CSS Properties and Values API (Propriétés et valeurs)
 slug: Web/API/CSS_Properties_and_Values_API
-translation_of: 'Web/API/CSS_Properties_and_Values_API'
+translation_of: Web/API/CSS_Properties_and_Values_API
 ---
-<p>{{SeeCompatTable}} L'<strong>API Propriétés et valeurs CSS</strong> — qui fait partie de l'ensemble d'API <a href="/fr/docs/Web/Houdini">CSS Houdini</a> — sert à définir explicitement des <a href="/fr/docs/Web/CSS/--*">propriétés CSS personnalisées</a>, ce qui permet la vérification des types de propriétés, de leur donner des valeurs par défaut et de déterminer si une propriété peut hériter ses valeurs ou non.</p>
+{{SeeCompatTable}} L'**API Propriétés et valeurs CSS** — qui fait partie de l'ensemble d'API [CSS Houdini](/fr/docs/Web/Houdini) — sert à définir explicitement des [propriétés CSS personnalisées](/fr/docs/Web/CSS/--*), ce qui permet la vérification des types de propriétés, de leur donner des valeurs par défaut et de déterminer si une propriété peut hériter ses valeurs ou non.
 
-<h2 id="interfaces">Interfaces</h2>
+## Interfaces
 
-<dl>
-  <dt>{{domxref('CSS.registerProperty')}}</dt>
-  <dd>Définit la manière dont un navigateur devrait analyser une {{cssxref('--*', 'propriété CSS personnalisée')}}. L'accès à cette interface se fait en <a href="/fr/docs/Web/JavaScript">JavaScript</a> via {{domxref('CSS.registerProperty')}}.</dd>
-  <dt>{{cssxref('@property')}}</dt>
-  <dd>Définit la manière dont un navigateur devrait analyser une {{cssxref('--*', 'propriété CSS personnalisée')}}. L'accès à cette interface se fait à l'aide d'une règle <a href="/fr/docs/Web/CSS/At-rule">at-rule</a> {{cssxref('@property')}} en <a href="/fr/docs/Web/CSS">CSS</a>.</dd>
-</dl>
+- {{domxref('CSS.registerProperty')}}
+  - : Définit la manière dont un navigateur devrait analyser une {{cssxref('--*', 'propriété CSS personnalisée')}}. L'accès à cette interface se fait en [JavaScript](/fr/docs/Web/JavaScript) via {{domxref('CSS.registerProperty')}}.
+- {{cssxref('@property')}}
+  - : Définit la manière dont un navigateur devrait analyser une {{cssxref('--*', 'propriété CSS personnalisée')}}. L'accès à cette interface se fait à l'aide d'une règle [at-rule](/fr/docs/Web/CSS/At-rule) {{cssxref('@property')}} en [CSS](/fr/docs/Web/CSS).
 
-<h2 id="examples">Exemples</h2>
+## Exemples
 
-<p>L'exemple suivant utilise {{domxref('CSS.registerProperty')}} en <a href="/fr/docs/Web/JavaScript">JavaScript</a> pour typer une <a href="/fr/docs/Web/CSS/--*">propriété CSS personnalisée</a>, <code>--ma-couleur</code> en tant que couleur et que valeur par défaut, sans lui permettre d'hériter de sa valeur :</p>
+L'exemple suivant utilise {{domxref('CSS.registerProperty')}} en [JavaScript](/fr/docs/Web/JavaScript) pour typer une [propriété CSS personnalisée](/fr/docs/Web/CSS/--*), `--ma-couleur` en tant que couleur et que valeur par défaut, sans lui permettre d'hériter de sa valeur :
 
-<pre class="brush: js">window.CSS.registerProperty({
+```js
+window.CSS.registerProperty({
   name: '--ma-couleur',
-  syntax: '&lt;color&gt;',
+  syntax: '<color>',
   inherits: false,
   initialValue: '#c0ffee',
 });
-</pre>
+```
 
-<p>Le même enregistrement peut se faire en <a href="/fr/docs/Web/CSS">CSS</a> en utilisant la règle <a href="/fr/docs/Web/CSS/At-rule">at-rule</a> {{cssxref('@property')}} :</p>
+Le même enregistrement peut se faire en [CSS](/fr/docs/Web/CSS) en utilisant la règle [at-rule](/fr/docs/Web/CSS/At-rule) {{cssxref('@property')}} :
 
-<pre class="brush: css">@property --ma-couleur {
-  syntax: '&lt;color&gt;';
+```css
+@property --ma-couleur {
+  syntax: '<color>';
   inherits: false;
   initial-value: #c0ffee;
 }
-</pre>
+```
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<p>{{Specifications("api.CSS.registerProperty")}}</p>
+{{Specifications("api.CSS.registerProperty")}}
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>Voir les interfaces individuelles</p>
+Voir les interfaces individuelles
 
-<h2 id="see_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li><a href="/fr/docs/Web/API/CSS_Painting_API">API Peinture CSS</a></li>
-  <li><a href="/fr/docs/Web/API/CSS_Typed_OM_API">API Typage de modèle d'objet CSS</a></li>
-  <li><a href="/fr/docs/Web/Houdini">CSS Houdini</a></li>
-</ul>
+- [API Peinture CSS](/fr/docs/Web/API/CSS_Painting_API)
+- [API Typage de modèle d'objet CSS](/fr/docs/Web/API/CSS_Typed_OM_API)
+- [CSS Houdini](/fr/docs/Web/Houdini)
diff --git a/files/fr/web/api/cssmediarule/index.md b/files/fr/web/api/cssmediarule/index.md
index dfcbb83536..b16fdeb972 100644
--- a/files/fr/web/api/cssmediarule/index.md
+++ b/files/fr/web/api/cssmediarule/index.md
@@ -8,61 +8,37 @@ tags:
   - Reference
 translation_of: Web/API/CSSMediaRule
 ---
-<div>{{APIRef("CSSOM")}}</div>
+{{APIRef("CSSOM")}}
 
-<p>L'interface <strong><code>CSSMediaRule</code></strong> représente une seule règle CSS {{cssxref("@media")}}. Elle met en œuvre l'interface {{domxref("CSSConditionRule")}}, et donc l'interface {{domxref("CSSGroupingRule")}} et l'interface {{domxref("CSSRule")}} avec une valeur de type <code>4</code> (<code>CSSRule.MEDIA_RULE</code>).</p>
+L'interface **`CSSMediaRule`** représente une seule règle CSS {{cssxref("@media")}}. Elle met en œuvre l'interface {{domxref("CSSConditionRule")}}, et donc l'interface {{domxref("CSSGroupingRule")}} et l'interface {{domxref("CSSRule")}} avec une valeur de type `4` (`CSSRule.MEDIA_RULE`).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>La syntaxe est décrite en utilisant le format <a href="http://dev.w3.org/2006/webapi/WebIDL/">WebIDL</a>.</p>
+La syntaxe est décrite en utilisant le format [WebIDL](http://dev.w3.org/2006/webapi/WebIDL/).
 
-<pre class="syntaxbox">interface CSSMediaRule : CSSConditionRule {
-    readonly attribute MediaList media;
-}
-</pre>
+    interface CSSMediaRule : CSSConditionRule {
+        readonly attribute MediaList media;
+    }
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<p>En tant que {{domxref("CSSConditionRule")}}, et donc à la fois {{domxref("CSSGroupingRule")}} et {{domxref("CSSRule")}}, <code>CSSMediaRule</code> implémente également les propriétés de ces interfaces. Elle a la propriété spécifique suivante :</p>
+En tant que {{domxref("CSSConditionRule")}}, et donc à la fois {{domxref("CSSGroupingRule")}} et {{domxref("CSSRule")}}, `CSSMediaRule` implémente également les propriétés de ces interfaces. Elle a la propriété spécifique suivante :
 
-<dl>
- <dt>{{domxref("CSSMediaRule.media")}} {{readonlyinline}}</dt>
- <dd>Spécifie un {{domxref("MediaList")}} représentant le support de destination prévu pour les informations de style.</dd>
-</dl>
+- {{domxref("CSSMediaRule.media")}} {{readonlyinline}}
+  - : Spécifie un {{domxref("MediaList")}} représentant le support de destination prévu pour les informations de style.
 
-<h2 id="Méthodes">Méthodes</h2>
+## Méthodes
 
-<p>En tant que {{domxref("CSSConditionRule") }}, et donc à la fois {{domxref("CSSGroupingRule")}} et {{domxref("CSSRule")}}, <code>CSSMediaRule</code> met également en œuvre les méthodes de cette interface. Elle n'a pas de méthodes spécifiques.</p>
+En tant que {{domxref("CSSConditionRule") }}, et donc à la fois {{domxref("CSSGroupingRule")}} et {{domxref("CSSRule")}}, `CSSMediaRule` met également en œuvre les méthodes de cette interface. Elle n'a pas de méthodes spécifiques.
 
-<h2 id="Specifications">Specifications</h2>
+## Specifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{ SpecName('CSS3 Conditional', '#the-cssmediarule-interface', 'CSSMediaRule') }}</td>
-   <td>{{ Spec2('CSS3 Conditional')}}</td>
-   <td>Dérivé de la règle  {{domxref("CSSConditionRule")}}.</td>
-  </tr>
-  <tr>
-   <td>{{ SpecName('CSSOM', '#the-cssmediarule-interface', 'CSSMediaRule') }}</td>
-   <td>{{ Spec2('CSSOM') }}</td>
-   <td>Aucun changement par rapport à {{SpecName('DOM2 Style')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Style', 'css.html#CSS-CSSMediaRule', 'CSSMediaRule') }}</td>
-   <td>{{ Spec2('DOM2 Style') }}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+| Specification                                                                                                | Status                                   | Comment                                                             |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | ------------------------------------------------------------------- |
+| {{ SpecName('CSS3 Conditional', '#the-cssmediarule-interface', 'CSSMediaRule') }} | {{ Spec2('CSS3 Conditional')}} | Dérivé de la règle  {{domxref("CSSConditionRule")}}.       |
+| {{ SpecName('CSSOM', '#the-cssmediarule-interface', 'CSSMediaRule') }}                 | {{ Spec2('CSSOM') }}             | Aucun changement par rapport à {{SpecName('DOM2 Style')}} |
+| {{SpecName('DOM2 Style', 'css.html#CSS-CSSMediaRule', 'CSSMediaRule') }}             | {{ Spec2('DOM2 Style') }}         |                                                                     |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.CSSMediaRule")}}</p>
+{{Compat("api.CSSMediaRule")}}
diff --git a/files/fr/web/api/cssrulelist/index.md b/files/fr/web/api/cssrulelist/index.md
index 86f5f4cc8a..43a15df497 100644
--- a/files/fr/web/api/cssrulelist/index.md
+++ b/files/fr/web/api/cssrulelist/index.md
@@ -6,42 +6,37 @@ tags:
   - DOM
 translation_of: Web/API/CSSRuleList
 ---
-<p>{{ APIRef("CSSOM") }}</p>
+{{ APIRef("CSSOM") }}
 
-<p>A <code>CSSRuleList</code> est un objet de type tableau contenant une collection ordonnée d'objects <code><a href="/en/DOM/cssRule">CSSRule</a></code>.</p>
+A `CSSRuleList` est un objet de type tableau contenant une collection ordonnée d'objects [`CSSRule`](/en/DOM/cssRule).
 
-<h2 id="Syntax">Description</h2>
+## Description
 
-<p>Chaque règle <code>CSSRule</code> peut être atteinte via <code><var>rules</var>.item(<var>index</var>),</code> ou simplement <code><var>rules</var>[<var>index</var>]</code>, où <code><var>rules</var></code> est un objet implementant l'interface  <code>CSSRuleList</code>, et <code><var>index</var></code> est l'index de la règle (commence à zéro comme les tableaux), dans l'ordre dans lequel elle apparait dans la feuille de style CSS. Le nombre d'objets est <code><var>rules</var>.length</code>.</p>
+Chaque règle `CSSRule` peut être atteinte via `rules.item(index),` ou simplement `rules[index]`, où `rules` est un objet implementant l'interface  `CSSRuleList`, et `index` est l'index de la règle (commence à zéro comme les tableaux), dans l'ordre dans lequel elle apparait dans la feuille de style CSS. Le nombre d'objets est `rules.length`.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">// récuperer la première règle de la première feuille de style
+```js
+// récuperer la première règle de la première feuille de style
 var firstRule = document.styleSheets[0].cssRules[0];
-</pre>
+```
 
-<h2 id="Notes">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><code><a href="/en/DOM/cssRule">CSSRule</a></code></li>
-</ul>
+- [`CSSRule`](/en/DOM/cssRule)
 
-<h3 id="Implémentations_de_CSSRuleList">Implémentations de CSSRuleList</h3>
+### Implémentations de CSSRuleList
 
-<p>Il existe plusieurs propriétés dans le CSSOM qui retourne une <code>CSSRuleList</code> :</p>
+Il existe plusieurs propriétés dans le CSSOM qui retourne une `CSSRuleList` :
 
-<ul>
- <li>{{ domxref("CSSStyleSheet") }} property {{ domxref("CSSStyleSheet/cssRules", "cssRules") }}</li>
- <li>{{ domxref("CSSMediaRule") }} property {{ domxref("CSSMediaRule/cssRules", "cssRules") }}</li>
- <li>{{ domxref("CSSKeyframesRule") }} property {{ domxref("CSSKeyframesRule/cssRules", "cssRules") }}</li>
- <li>{{ domxref("CSSMozDocumentRule") }} property {{ domxref("CSSMozDocumentRule/cssRules", "cssRules") }}</li>
-</ul>
+- {{ domxref("CSSStyleSheet") }} property {{ domxref("CSSStyleSheet/cssRules", "cssRules") }}
+- {{ domxref("CSSMediaRule") }} property {{ domxref("CSSMediaRule/cssRules", "cssRules") }}
+- {{ domxref("CSSKeyframesRule") }} property {{ domxref("CSSKeyframesRule/cssRules", "cssRules") }}
+- {{ domxref("CSSMozDocumentRule") }} property {{ domxref("CSSMozDocumentRule/cssRules", "cssRules") }}
 
-<h2 id="Specification">Spécification</h2>
+## Spécification
 
-<ul>
- <li><a href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSRuleList">DOM Level 2 Style: <code>CSSRuleList</code> interface</a></li>
- <li><a href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleSheet-cssRules">DOM Level 2 Style: <code>CSSStyleSheet</code> attribute <code>cssRules</code></a></li>
- <li><a href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSMediaRule-cssRules">DOM Level 2 Style: <code>CSSMediaRule</code> attribute </a><code><a href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSMediaRule-cssRules">cssRules</a></code></li>
- <li><a href="http://dev.w3.org/csswg/css3-animations/#DOM-CSSKeyframesRule">CSS Animations: <code>CSSKeyframesRule</code> interface</a></li>
-</ul>
+- [DOM Level 2 Style: `CSSRuleList` interface](http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSRuleList)
+- [DOM Level 2 Style: `CSSStyleSheet` attribute `cssRules`](http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleSheet-cssRules)
+- [DOM Level 2 Style: `CSSMediaRule` attribute ](http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSMediaRule-cssRules)[`cssRules`](http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSMediaRule-cssRules)
+- [CSS Animations: `CSSKeyframesRule` interface](http://dev.w3.org/csswg/css3-animations/#DOM-CSSKeyframesRule)
diff --git a/files/fr/web/api/cssstyledeclaration/csstext/index.md b/files/fr/web/api/cssstyledeclaration/csstext/index.md
index e8b9d228ae..da6bbcc30d 100644
--- a/files/fr/web/api/cssstyledeclaration/csstext/index.md
+++ b/files/fr/web/api/cssstyledeclaration/csstext/index.md
@@ -3,31 +3,31 @@ title: CSSStyleDeclaration.cssText
 slug: Web/API/CSSStyleDeclaration/cssText
 translation_of: Web/API/CSSStyleDeclaration/cssText
 ---
-<p>A ne pas confondre avec la règle de style de feuille de style {{domxref("CSSRule.cssText")}}.</p>
+A ne pas confondre avec la règle de style de feuille de style {{domxref("CSSRule.cssText")}}.
 
-<div>{{APIRef("CSSOM") }}</div>
+{{APIRef("CSSOM") }}
 
-<p><strong>cssText</strong> retourne ou définit seulement le texte de la déclaration de style <strong>inline</strong> de l'élément. Pour pouvoir définir dynamiquement une règle d'une <strong>stylesheet</strong>, voir <a href="/fr-FR/docs/DOM/Using_dynamic_styling_information">Utilisation d'informations de mise en forme dynamiques.</a></p>
+**cssText** retourne ou définit seulement le texte de la déclaration de style **inline** de l'élément. Pour pouvoir définir dynamiquement une règle d'une **stylesheet**, voir [Utilisation d'informations de mise en forme dynamiques.](/fr-FR/docs/DOM/Using_dynamic_styling_information)
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js"><em>chaine</em> = elem.style.cssText
-</pre>
+```js
+chaine = elem.style.cssText
+```
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush: html"><code>&lt;span id="s1" style="</code>color: red;"<code>&gt;
+```html
+<span id="s1" style="color: red;">
 Du texte
-&lt;/span&gt;</code>
+</span>
 
-&lt;script&gt;
+<script>
   var elem = document.getElementById("s1");
   alert(elem.style.cssText); // "color: red;"
-&lt;/script&gt;
-</pre>
+</script>
+```
 
-<h2 id="Specification">Spécification</h2>
+## Spécification
 
-<ul>
- <li><a href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration">DOM Level 2 Style CSS - Interface CSSStyleDeclaration (introduced in DOM Level 2)</a></li>
-</ul>
+- [DOM Level 2 Style CSS - Interface CSSStyleDeclaration (introduced in DOM Level 2)](http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration)
diff --git a/files/fr/web/api/cssstyledeclaration/index.md b/files/fr/web/api/cssstyledeclaration/index.md
index e9169825d9..56ddcfcab1 100644
--- a/files/fr/web/api/cssstyledeclaration/index.md
+++ b/files/fr/web/api/cssstyledeclaration/index.md
@@ -10,47 +10,42 @@ tags:
   - Reference
 translation_of: Web/API/CSSStyleDeclaration
 ---
-<p>{{ APIRef("CSSOM") }}</p>
-
-<p><code>CSSStyleDeclaration</code> représente une collection de paires propriété/valeur CSS. Elle est utilisée dans quelques API :</p>
-
-<ul>
- <li>{{domxref("HTMLElement.style")}} - pour manipuler le style d'un seul élément (&lt;elem style="..."&gt;) ;</li>
- <li>(AFAIRE : à reformuler) est une interface avec le <a href="http://www.w3.org/TR/1998/REC-CSS2-19980512/syndata.html#block">declaration block</a> renvoyé par la propriété <code><a href="/en/DOM/cssRule.style">style</a></code> d'une <code>cssRule</code> dans une <a href="/fr/docs/Web/API/StyleSheet">feuille de style</a>, lorsque la règle est une <a href="/en/DOM/cssRule#CSSStyleRule">CSSStyleRule</a> ;</li>
- <li><code>CSSStyleDeclaration</code> est également une interface en <strong>lecture seule</strong> pour le résultat de <a href="/fr/docs/Web/API/Window/getComputedStyle">window.getComputedStyle()</a>.</li>
-</ul>
-
-<h2 id="Syntax">Attributs</h2>
-
-<dl>
- <dt>{{domxref("CSSStyleDeclaration.cssText")}}</dt>
- <dd>Représentation textuelle du bloc de déclaration. La définition de cet attribut modifie le style.</dd>
- <dt>{{domxref("CSSStyleDeclaration.length")}} {{readonlyInline}}</dt>
- <dd>Le nombre de propriétés. Voir la méthode {{domxref("CSSStyleDeclaration.item",'item()')}} ci-dessous.</dd>
- <dt>{{domxref("CSSStyleDeclaration.parentRule")}} {{readonlyInline}}</dt>
- <dd>Le contenant {{domxref("CSSRule")}}.</dd>
-</dl>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<dl>
- <dt>{{domxref("CSSStyleDeclaration.getPropertyPriority()")}}</dt>
- <dd>Retourne la priorité facultative "important".</dd>
- <dt>{{domxref("CSSStyleDeclaration.getPropertyValue()")}}</dt>
- <dd>Retourne la valeur de la propriété avec un nom de propriété.</dd>
- <dt>{{domxref("CSSStyleDeclaration.item()")}}</dt>
- <dd>Retourne un nom de propriété.</dd>
- <dt>{{domxref("CSSStyleDeclaration.removeProperty()")}}</dt>
- <dd>Supprime une propriété du bloc de déclaration CSS.</dd>
- <dt>{{domxref("CSSStyleDeclaration.setProperty()")}}</dt>
- <dd>Modifie une propriété CSS existante ou crée une nouvelle propriété CSS dans le bloc de déclaration.</dd>
- <dt>{{domxref("CSSStyleDeclaration.getPropertyCSSValue()")}} {{obsolete_inline}}</dt>
- <dd>Uniquement supporté via getComputedStyle dans Firefox. Retourne la valeur de la propriété en tant que {{domxref("CSSPrimitiveValue")}} ou <code>null</code> pour les <a href="/fr/docs/Web/CSS/Propriétés_raccourcies">propriétés raccourcies</a>.</dd>
-</dl>
-
-<h2 id="Example">Exemple</h2>
-
-<pre class="brush: js">var objStyle = document.styleSheets[0].cssRules[0].style;
+{{ APIRef("CSSOM") }}
+
+`CSSStyleDeclaration` représente une collection de paires propriété/valeur CSS. Elle est utilisée dans quelques API :
+
+- {{domxref("HTMLElement.style")}} - pour manipuler le style d'un seul élément (\<elem style="...">) ;
+- (AFAIRE : à reformuler) est une interface avec le [declaration block](http://www.w3.org/TR/1998/REC-CSS2-19980512/syndata.html#block) renvoyé par la propriété [`style`](/en/DOM/cssRule.style) d'une `cssRule` dans une [feuille de style](/fr/docs/Web/API/StyleSheet), lorsque la règle est une [CSSStyleRule](/en/DOM/cssRule#CSSStyleRule) ;
+- `CSSStyleDeclaration` est également une interface en **lecture seule** pour le résultat de [window.getComputedStyle()](/fr/docs/Web/API/Window/getComputedStyle).
+
+## Attributs
+
+- {{domxref("CSSStyleDeclaration.cssText")}}
+  - : Représentation textuelle du bloc de déclaration. La définition de cet attribut modifie le style.
+- {{domxref("CSSStyleDeclaration.length")}} {{readonlyInline}}
+  - : Le nombre de propriétés. Voir la méthode {{domxref("CSSStyleDeclaration.item",'item()')}} ci-dessous.
+- {{domxref("CSSStyleDeclaration.parentRule")}} {{readonlyInline}}
+  - : Le contenant {{domxref("CSSRule")}}.
+
+## Méthodes
+
+- {{domxref("CSSStyleDeclaration.getPropertyPriority()")}}
+  - : Retourne la priorité facultative "important".
+- {{domxref("CSSStyleDeclaration.getPropertyValue()")}}
+  - : Retourne la valeur de la propriété avec un nom de propriété.
+- {{domxref("CSSStyleDeclaration.item()")}}
+  - : Retourne un nom de propriété.
+- {{domxref("CSSStyleDeclaration.removeProperty()")}}
+  - : Supprime une propriété du bloc de déclaration CSS.
+- {{domxref("CSSStyleDeclaration.setProperty()")}}
+  - : Modifie une propriété CSS existante ou crée une nouvelle propriété CSS dans le bloc de déclaration.
+- {{domxref("CSSStyleDeclaration.getPropertyCSSValue()")}} {{obsolete_inline}}
+  - : Uniquement supporté via getComputedStyle dans Firefox. Retourne la valeur de la propriété en tant que {{domxref("CSSPrimitiveValue")}} ou `null` pour les [propriétés raccourcies](/fr/docs/Web/CSS/Propriétés_raccourcies).
+
+## Exemple
+
+```js
+var objStyle = document.styleSheets[0].cssRules[0].style;
 console.log(objStyle.cssText);
 
 for (var i = objStyle.length; i--;) {
@@ -58,38 +53,20 @@ for (var i = objStyle.length; i--;) {
   objStyle.removeProperty(chaineNom);
 }
 
-console.log(objStyle.cssText);</pre>
-
-<h2 id="Notes">Notes</h2>
-
-<p>Le bloc de déclaration est la partie de la règle de mise en forme qui apparaît dans les accolades et qui fournit les définitions de mise en forme (pour le sélecteur, la partie qui précède les accolades).</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Properties_Reference">Référence des propriétés CSS</a></li>
-</ul>
-
-<h2 id="Specification">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('CSSOM', '#the-cssstyledeclaration-interface', 'CSSStyleDeclaration')}}</td>
-   <td>{{Spec2('CSSOM')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Style', 'css.html#CSS-CSSStyleDeclaration', 'CSSPrimitiveValue')}}</td>
-   <td>{{Spec2('DOM2 Style')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+console.log(objStyle.cssText);
+```
+
+## Notes
+
+Le bloc de déclaration est la partie de la règle de mise en forme qui apparaît dans les accolades et qui fournit les définitions de mise en forme (pour le sélecteur, la partie qui précède les accolades).
+
+## Voir aussi
+
+- [Référence des propriétés CSS](/fr/docs/Web/CSS/CSS_Properties_Reference)
+
+## Spécifications
+
+| Spécification                                                                                                    | Statut                           | Commentaire          |
+| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName('CSSOM', '#the-cssstyledeclaration-interface', 'CSSStyleDeclaration')}}     | {{Spec2('CSSOM')}}         |                      |
+| {{SpecName('DOM2 Style', 'css.html#CSS-CSSStyleDeclaration', 'CSSPrimitiveValue')}} | {{Spec2('DOM2 Style')}} | Définition initiale. |
diff --git a/files/fr/web/api/cssstylerule/index.md b/files/fr/web/api/cssstylerule/index.md
index 01f85ea178..4e7b4c9cd0 100644
--- a/files/fr/web/api/cssstylerule/index.md
+++ b/files/fr/web/api/cssstylerule/index.md
@@ -3,52 +3,33 @@ title: CSSStyleRule
 slug: Web/API/CSSStyleRule
 translation_of: Web/API/CSSStyleRule
 ---
-<p>{{ APIRef("CSSOM") }}</p>
-
-<p>CSSStyleRule représente une règle de style CSS unique. Il implémente l'interface {{domxref ("CSSRule")}} avec une valeur de type 1 (CSSRule STYLE_RULE).</p>
-
-<h2 id="Syntax">Syntax</h2>
-
-<p>La syntaxe est décrite à l'aide du format WebIDL.</p>
-
-<pre>interface CSSStyleRule : CSSRule {
-    attribute DOMString selectorText;
-    readonly attribute CSSStyleDeclaration style;
-};</pre>
-
-<h2 id="Properties">Properties</h2>
-
-<dl>
- <dt>{{domxref("CSSStyleRule.selectorText")}}</dt>
- <dd>Obtient la représentation textuelle du sélecteur pour cette règle, par exemple "H1, H2".</dd>
- <dt>{{domxref("CSSStyleRule.style")}}</dt>
- <dd>Retourne l'objet {{domxref("CSSStyleDeclaration")}} pour cette règle.</dd>
-</dl>
-
-<h2 id="Specifications">Specifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{ SpecName('CSSOM', '#the-cssstylerule-interface', 'CSSStyleRule') }}</td>
-   <td>{{ Spec2('CSSOM') }}</td>
-   <td>pas de changement</td>
-  </tr>
-  <tr>
-   <td>{{ SpecName('DOM2 Style', 'css.html#CSS-CSSStyleRule', 'CSSRule') }}</td>
-   <td>{{ Spec2('DOM2 Style') }}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.CSSStyleRule")}}</p>
+{{ APIRef("CSSOM") }}
+
+CSSStyleRule représente une règle de style CSS unique. Il implémente l'interface {{domxref ("CSSRule")}} avec une valeur de type 1 (CSSRule STYLE_RULE).
+
+## Syntax
+
+La syntaxe est décrite à l'aide du format WebIDL.
+
+    interface CSSStyleRule : CSSRule {
+        attribute DOMString selectorText;
+        readonly attribute CSSStyleDeclaration style;
+    };
+
+## Properties
+
+- {{domxref("CSSStyleRule.selectorText")}}
+  - : Obtient la représentation textuelle du sélecteur pour cette règle, par exemple "H1, H2".
+- {{domxref("CSSStyleRule.style")}}
+  - : Retourne l'objet {{domxref("CSSStyleDeclaration")}} pour cette règle.
+
+## Specifications
+
+| Specification                                                                                | Status                           | Comment           |
+| -------------------------------------------------------------------------------------------- | -------------------------------- | ----------------- |
+| {{ SpecName('CSSOM', '#the-cssstylerule-interface', 'CSSStyleRule') }} | {{ Spec2('CSSOM') }}     | pas de changement |
+| {{ SpecName('DOM2 Style', 'css.html#CSS-CSSStyleRule', 'CSSRule') }} | {{ Spec2('DOM2 Style') }} |                   |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.CSSStyleRule")}}
diff --git a/files/fr/web/api/cssvalue/index.md b/files/fr/web/api/cssvalue/index.md
index 871a2b70ce..fce1a579a6 100644
--- a/files/fr/web/api/cssvalue/index.md
+++ b/files/fr/web/api/cssvalue/index.md
@@ -8,78 +8,62 @@ tags:
   - Reference
 translation_of: Web/API/CSSValue
 ---
-<div>{{APIRef ("DOM")}}</div>
+{{APIRef ("DOM")}}L'interface **CSSValue** représente la valeur calculée actuelle d'une propriété CSS.
 
-<div>L'interface <strong>CSSValue</strong> représente la valeur calculée actuelle d'une propriété CSS.</div>
+## Propriétés
 
-<h2 id="Propriétés">Propriétés</h2>
+- {{domxref("CSSValue.cssText")}}
+  - : Une {{domxref ("DOMString")}} représentant la valeur actuelle.
+- {{domxref("CSSValue.cssValueType")}} {{readonlyInline}}
 
-<dl>
- <dt>{{domxref("CSSValue.cssText")}}</dt>
- <dd>
- <p>Une {{domxref ("DOMString")}} représentant la valeur actuelle.</p>
- </dd>
- <dt>{{domxref("CSSValue.cssValueType")}} {{readonlyInline}}</dt>
- <dd>Un raccourci non signé ( <code>unsigned short</code> ) représentant un code définissant le type de valeur. Les valeurs possibles sont:
- <table class="standard-table">
-  <tbody>
-   <tr>
-    <td class="header">Constant</td>
-    <td class="header">Description</td>
-   </tr>
-   <tr>
-    <td><code>CSS_CUSTOM</code></td>
-    <td>
-     <p>La valeur est une valeur personnalisée.</p>
-    </td>
-   </tr>
-   <tr>
-    <td><code>CSS_INHERIT</code></td>
-    <td>La valeur est héritée et cssText contient "inherit".</td>
-   </tr>
-   <tr>
-    <td><code>CSS_PRIMITIVE_VALUE</code></td>
-    <td>La valeur est une valeur primitive et une instance de l'interface {{domxref ("CSSPrimitiveValue")}} peut être obtenue en utilisant des méthodes de casting spécifiques à la liaison sur cette instance de l'interface CSSValue.</td>
-   </tr>
-   <tr>
-    <td><code>CSS_VALUE_LIST</code></td>
-    <td>La valeur est une liste CSSValue et une instance de l'interface {{domxref ("CSSValueList")}} peut être obtenue en utilisant des méthodes de casting spécifiques à la liaison sur cette instance de l'interface CSSValue.</td>
-   </tr>
-  </tbody>
- </table>
- </dd>
-</dl>
+  - : Un raccourci non signé ( `unsigned short` ) représentant un code définissant le type de valeur. Les valeurs possibles sont:
 
-<h2 id="Spécifications">Spécifications</h2>
+    <table class="standard-table">
+      <tbody>
+        <tr>
+          <td class="header">Constant</td>
+          <td class="header">Description</td>
+        </tr>
+        <tr>
+          <td><code>CSS_CUSTOM</code></td>
+          <td><p>La valeur est une valeur personnalisée.</p></td>
+        </tr>
+        <tr>
+          <td><code>CSS_INHERIT</code></td>
+          <td>La valeur est héritée et cssText contient "inherit".</td>
+        </tr>
+        <tr>
+          <td><code>CSS_PRIMITIVE_VALUE</code></td>
+          <td>
+            La valeur est une valeur primitive et une instance de l'interface
+            {{domxref ("CSSPrimitiveValue")}} peut être obtenue en
+            utilisant des méthodes de casting spécifiques à la liaison sur cette
+            instance de l'interface CSSValue.
+          </td>
+        </tr>
+        <tr>
+          <td><code>CSS_VALUE_LIST</code></td>
+          <td>
+            La valeur est une liste CSSValue et une instance de l'interface
+            {{domxref ("CSSValueList")}} peut être obtenue en utilisant des
+            méthodes de casting spécifiques à la liaison sur cette instance de
+            l'interface CSSValue.
+          </td>
+        </tr>
+      </tbody>
+    </table>
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Style', 'css.html#CSS-CSSValue', 'CSSValue')}}</td>
-   <td>{{Spec2('DOM2 Style')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+| Spécification                                                                        | Statut                           | Commentaire         |
+| ------------------------------------------------------------------------------------ | -------------------------------- | ------------------- |
+| {{SpecName('DOM2 Style', 'css.html#CSS-CSSValue', 'CSSValue')}} | {{Spec2('DOM2 Style')}} | Définition initiale |
 
-<div>
-<div>
+## Compatibilité des navigateurs
 
+{{Compat("api.CSSValue")}}
 
-<p>{{Compat("api.CSSValue")}}</p>
-</div>
+## Voir aussi
 
-<h2 id="Voir_aussi">Voir aussi</h2>
-</div>
-
-<ul>
- <li>{{domxref("CSSPrimitiveValue")}}</li>
- <li>{{domxref("CSSValueList")}}</li>
-</ul>
+- {{domxref("CSSPrimitiveValue")}}
+- {{domxref("CSSValueList")}}
diff --git a/files/fr/web/api/cssvaluelist/index.md b/files/fr/web/api/cssvaluelist/index.md
index cb78129d96..678068ac0d 100644
--- a/files/fr/web/api/cssvaluelist/index.md
+++ b/files/fr/web/api/cssvaluelist/index.md
@@ -9,62 +9,39 @@ tags:
   - Reference
 translation_of: Web/API/CSSValueList
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p>L'interface <code><strong>CSSValueList</strong></code> dérive de l'interface {{domxref("CSSValue")}} et fournit l'abstraction d'une collection ordonnée de valeurs CSS.</p>
+L'interface **`CSSValueList`** dérive de l'interface {{domxref("CSSValue")}} et fournit l'abstraction d'une collection ordonnée de valeurs CSS.
 
-<p>Certaines propriétés autorisent une liste vide dans leur syntaxe. Dans ce cas, ces propriétés prennent l'identifiant <code>none</code>. Ainsi, une liste vide signifie que la propriété a une valeur <code>none</code> (<em>aucune valeur</em>).</p>
+Certaines propriétés autorisent une liste vide dans leur syntaxe. Dans ce cas, ces propriétés prennent l'identifiant `none`. Ainsi, une liste vide signifie que la propriété a une valeur `none` (_aucune valeur_).
 
-<p>Les éléments dans <code>CSSValueList</code> sont accessibles par un index integral commençant à 0.</p>
+Les éléments dans `CSSValueList` sont accessibles par un index integral commençant à 0.
 
-<p>{{InheritanceDiagram}}</p>
+{{InheritanceDiagram}}
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<p><em>Hérite des propriétés de son parent {{domxref("CSSValue")}}</em>.</p>
+_Hérite des propriétés de son parent {{domxref("CSSValue")}}_.
 
-<dl>
- <dt>{{domxref("CSSValueList.length")}} {{readonlyInline}}</dt>
- <dd>Un <code>unsigned long</code> représentant le nombre de <code>CSSValues</code> (<em>valeurs CSS</em>) dans la liste.</dd>
-</dl>
+- {{domxref("CSSValueList.length")}} {{readonlyInline}}
+  - : Un `unsigned long` représentant le nombre de `CSSValues` (_valeurs CSS_) dans la liste.
 
-<h2 id="Méthodes">Méthodes</h2>
+## Méthodes
 
-<dl>
- <dt>{{domxref("CSSValueList.item()")}}</dt>
- <dd>Cette méthode est utilisée pour  récupérer une {{domxref("CSSValue")}} <em>(valeur CSS</em>) par index ordinal. L'ordre dans cette collection représente l'ordre des valeurs dans la propriété de style CSS. Si index est supérieur ou égal au nombre de valeurs de la liste, elle renvoie <code>null</code>.</dd>
-</dl>
+- {{domxref("CSSValueList.item()")}}
+  - : Cette méthode est utilisée pour  récupérer une {{domxref("CSSValue")}} _(valeur CSS_) par index ordinal. L'ordre dans cette collection représente l'ordre des valeurs dans la propriété de style CSS. Si index est supérieur ou égal au nombre de valeurs de la liste, elle renvoie `null`.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Style', 'css.html#CSS-CSSValuesList', 'CSSValuesList')}}</td>
-   <td>{{Spec2('DOM2 Style')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                    | Statut                           | Commentaire         |
+| ------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------- |
+| {{SpecName('DOM2 Style', 'css.html#CSS-CSSValuesList', 'CSSValuesList')}} | {{Spec2('DOM2 Style')}} | Définition initiale |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<div>
-<div>
+{{Compat("api.CSSValueList")}}
 
+## Voir aussi
 
-<p>{{Compat("api.CSSValueList")}}</p>
-</div>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-</div>
-
-<ul>
- <li>{{domxref("CSSPrimitiveValue")}}</li>
- <li>{{domxref("CSSValue")}}</li>
-</ul>
+- {{domxref("CSSPrimitiveValue")}}
+- {{domxref("CSSValue")}}
diff --git a/files/fr/web/api/customevent/detail/index.md b/files/fr/web/api/customevent/detail/index.md
index 17b2453a60..60969648ea 100644
--- a/files/fr/web/api/customevent/detail/index.md
+++ b/files/fr/web/api/customevent/detail/index.md
@@ -8,23 +8,24 @@ tags:
   - Évènement personnalisé
 translation_of: Web/API/CustomEvent/detail
 ---
-<p>{{APIRef("DOM")}}</p>
+{{APIRef("DOM")}}
 
-<p>Le <code><strong>detail</strong></code> de la propriété en lecture seule de l'interface {{domxref("CustomEvent")}} renvoie toutes les données transmises lors de l'initialisation de l'évènement.</p>
+Le **`detail`** de la propriété en lecture seule de l'interface {{domxref("CustomEvent")}} renvoie toutes les données transmises lors de l'initialisation de l'évènement.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"> let myDetail = <em>customEventInstance.detail</em>;</pre>
+     let myDetail = customEventInstance.detail;
 
-<h3 id="Valeur_retournée">Valeur retournée</h3>
+### Valeur retournée
 
-<p>Toute donnée initialisée avec l'évènement.</p>
+Toute donnée initialisée avec l'évènement.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">// ajoute un écouteur d'évènement approprié
+```js
+// ajoute un écouteur d'évènement approprié
 obj.addEventListener("cat", function(e) { process(e.detail) });
 
 // crée et distribue l'évènement
@@ -36,38 +37,19 @@ let event = new CustomEvent("cat", {
 obj.dispatchEvent(event);
 
 // Retournera un objet contenant la propriété hazcheeseburger
-let myDetail = <em>event.detail</em>;
-</pre>
+let myDetail = event.detail;
+```
 
-<h2 id="Spécifications">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('DOM WHATWG','#dom-customeventinit-detail','detail')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                            | Statut                           | Commentaire          |
+| ---------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName('DOM WHATWG','#dom-customeventinit-detail','detail')}} | {{Spec2('DOM WHATWG')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
+{{Compat("api.CustomEvent.detail")}}
 
+## Voir aussi
 
-<p>{{Compat("api.CustomEvent.detail")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("CustomEvent")}}</li>
-</ul>
-
-<p> </p>
+- {{domxref("CustomEvent")}}
diff --git a/files/fr/web/api/customevent/index.md b/files/fr/web/api/customevent/index.md
index 5fcc5dc9a1..e99ca8a535 100644
--- a/files/fr/web/api/customevent/index.md
+++ b/files/fr/web/api/customevent/index.md
@@ -9,83 +9,64 @@ tags:
   - évènements
 translation_of: Web/API/CustomEvent
 ---
-<p>{{APIRef("DOM")}}</p>
+{{APIRef("DOM")}}
 
-<p>Les interfaces <code>CustomEvent</code> DOM sont des évènements initialisés par une application pour n'importe quel usage.</p>
+Les interfaces `CustomEvent` DOM sont des évènements initialisés par une application pour n'importe quel usage.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Method_overview">Constructeur</h2>
+## Constructeur
 
-<dl>
- <dt>{{domxref("CustomEvent.CustomEvent", "CustomEvent()")}}</dt>
- <dd>Crée un <code>CustomEvent.</code></dd>
-</dl>
+- {{domxref("CustomEvent.CustomEvent", "CustomEvent()")}}
+  - : Crée un `CustomEvent.`
 
-<h2 id="Attributes">Propriétés</h2>
+## Propriétés
 
-<dl>
- <dt>{{domxref("CustomEvent.detail")}} {{readonlyinline}}</dt>
- <dd>Toute donnée transmise lors de l'initialisation de l'événement.</dd>
-</dl>
+- {{domxref("CustomEvent.detail")}} {{readonlyinline}}
+  - : Toute donnée transmise lors de l'initialisation de l'événement.
 
-<p>Cette interface hérite des propriétés de son parent {{domxref("Event")}}:</p>
+Cette interface hérite des propriétés de son parent {{domxref("Event")}}:
 
-<p>{{Page("/fr/docs/Web/API/Event", "Propriétés")}}</p>
+{{Page("/fr/docs/Web/API/Event", "Propriétés")}}
 
-<h2 id="Méthodes">Méthodes</h2>
+## Méthodes
 
-<dl>
- <dt>{{domxref("CustomEvent.initCustomEvent()")}} {{deprecated_inline}}</dt>
- <dd>Initialise un objet CustomEvent. Si l'événement a déjà été distribué, cette méthode ne fait rien.</dd>
-</dl>
+- {{domxref("CustomEvent.initCustomEvent()")}} {{deprecated_inline}}
+  - : Initialise un objet CustomEvent. Si l'événement a déjà été distribué, cette méthode ne fait rien.
 
-<p>Cette interface hérite les méthodes de son parent {{domxref("Event")}}:</p>
+Cette interface hérite les méthodes de son parent {{domxref("Event")}}:
 
-<p>{{Page("/fr/docs/Web/API/Event", "Méthodes")}}</p>
+{{Page("/fr/docs/Web/API/Event", "Méthodes")}}
 
-<h2 id="Spécifications">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('DOM WHATWG','#interface-customevent','CustomEvent')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Définition initial</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                            | Statut                           | Commentaire        |
+| ---------------------------------------------------------------------------------------- | -------------------------------- | ------------------ |
+| {{SpecName('DOM WHATWG','#interface-customevent','CustomEvent')}} | {{Spec2('DOM WHATWG')}} | Définition initial |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.CustomEvent")}}</p>
+{{Compat("api.CustomEvent")}}
 
-<h2 id="Déclenchement_à_partir_de_code_privilégié_vers_du_code_non-privilégié">Déclenchement à partir de code privilégié vers du code non-privilégié</h2>
+## Déclenchement à partir de code privilégié vers du code non-privilégié
 
-<p>Lors du déclenchement d'un CustomEvent depuis du code privilégié (une extension, par exemple) vers du code non-privilégié (une page web par exemple), vous devez prendre en considération la sécurité. Firefox et les autres applications Gecko empêchent qu'un objet créé dans un contexte soit utilisé dans un autre, ce qui empêchera généralement les failles de sécurité, mais ces restrictions peuvent aussi empêcher votre code de s'executer comme prévu.</p>
+Lors du déclenchement d'un CustomEvent depuis du code privilégié (une extension, par exemple) vers du code non-privilégié (une page web par exemple), vous devez prendre en considération la sécurité. Firefox et les autres applications Gecko empêchent qu'un objet créé dans un contexte soit utilisé dans un autre, ce qui empêchera généralement les failles de sécurité, mais ces restrictions peuvent aussi empêcher votre code de s'executer comme prévu.
 
-<p>Lors de la création d'un objet CustomEvent, vous devez créer l'objet à partir de la même <a href="/fr/docs/Mozilla/Tech/XUL/window">fenêtre</a> que celle où vous déclencherez l'évenement.</p>
+Lors de la création d'un objet CustomEvent, vous devez créer l'objet à partir de la même [fenêtre](/fr/docs/Mozilla/Tech/XUL/window) que celle où vous déclencherez l'évenement.
 
-<pre class="brush: js">// doc est une référence au contenu du document
+```js
+// doc est une référence au contenu du document
 function dispatchCustomEvent(doc) {
   var eventDetail = Components.utils.cloneInto({foo: 'bar'}, doc.defaultView);
   var myEvent = doc.defaultView.CustomEvent("mytype", eventDetail);
   doc.dispatchEvent(myEvent);
-}</pre>
+}
+```
 
-<p>Notez qu'exposer une fonction permettra au script de l'exécuter avec les privilèges qu'accorde Chrome ce qui peut ouvrir une faille de sécurité.</p>
+Notez qu'exposer une fonction permettra au script de l'exécuter avec les privilèges qu'accorde Chrome ce qui peut ouvrir une faille de sécurité.
 
-<h2 id="Specification">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Extraits_de_code/Interaction_entre_des_pages_%C3%A0_privil%C3%A8ges_et_sans_privil%C3%A8ges">Interaction entre pages privilégiées et non-privilégiées</a></li>
- <li><a href="/fr/docs/Web/API/Window/postMessage">Window.postMessage</a></li>
- <li><a href="/fr/docs/Web/Guide/DOM/Events/Creating_and_triggering_events">Création et déclenchement d'événements</a></li>
-</ul>
+- [Interaction entre pages privilégiées et non-privilégiées](/fr/docs/Extraits_de_code/Interaction_entre_des_pages_%C3%A0_privil%C3%A8ges_et_sans_privil%C3%A8ges)
+- [Window.postMessage](/fr/docs/Web/API/Window/postMessage)
+- [Création et déclenchement d'événements](/fr/docs/Web/Guide/DOM/Events/Creating_and_triggering_events)
diff --git a/files/fr/web/api/customevent/initcustomevent/index.md b/files/fr/web/api/customevent/initcustomevent/index.md
index 29dfb281d8..c95afa7d3d 100644
--- a/files/fr/web/api/customevent/initcustomevent/index.md
+++ b/files/fr/web/api/customevent/initcustomevent/index.md
@@ -7,64 +7,42 @@ tags:
   - Méthodes
 translation_of: Web/API/CustomEvent/initCustomEvent
 ---
-<p>{{APIRef("DOM")}}{{deprecated_header}}</p>
+{{APIRef("DOM")}}{{deprecated_header}}
 
-<p>La méthode <code><strong>CustomEvent.initCustomEvent()</strong></code> initialise un objet <code>CustomEvent</code>. Si l'évènement a déjà été distribué, cette méthode ne change rien.</p>
+La méthode **`CustomEvent.initCustomEvent()`** initialise un objet `CustomEvent`. Si l'évènement a déjà été distribué, cette méthode ne change rien.
 
-<p>Les évènements initialisés par ce moyen doivent être créés avec la méthode {{domxref("Document.createEvent()")}}. Cette méthode doit être appelée pour définir l'évènement avant son envoi en utilisant {{domxref("EventTarget.dispatchEvent()") }}. Une fois l'évènement envoyé, la méthode ne fait rien.</p>
+Les évènements initialisés par ce moyen doivent être créés avec la méthode {{domxref("Document.createEvent()")}}. Cette méthode doit être appelée pour définir l'évènement avant son envoi en utilisant {{domxref("EventTarget.dispatchEvent()") }}. Une fois l'évènement envoyé, la méthode ne fait rien.
 
-<div class="warning">
-<p><strong>Attention :</strong> N'utilisez plus cette méthode car elle est dépréciée.</p>
+> **Attention :** N'utilisez plus cette méthode car elle est dépréciée.
+>
+> À la place, utilisez les constructeurs d'évènements spécifiques comme {{domxref("CustomEvent.CustomEvent", "CustomEvent()")}}. La page [Création et déclenchement d'évènements](/fr/docs/Web/Guide/DOM/Events/Creating_and_triggering_events) donne plus d'informations sur la façon de les utiliser.
 
-<p>À la place, utilisez les constructeurs d'évènements spécifiques comme {{domxref("CustomEvent.CustomEvent", "CustomEvent()")}}. La page <a href="/fr/docs/Web/Guide/DOM/Events/Creating_and_triggering_events">Création et déclenchement d'évènements</a> donne plus d'informations sur la façon de les utiliser.</p>
-</div>
+## Syntaxe
 
-<h2 id="Syntaxe">Syntaxe</h2>
+    event.initCustomEvent(type, canBubble, cancelable, detail);
 
-<pre class="syntaxbox"><em>event</em>.initCustomEvent(<em>type</em>, <em>canBubble</em>, <em>cancelable</em>, <em>detail</em>);
-</pre>
+### Paramètres
 
-<h3 id="Paramètres">Paramètres</h3>
+- `type`
+  - : est une {{domxref("DOMString")}} (_chaîne de caractères_) contenant le nom de l'évènement.
+- _`canBubble`_
+  - : est un {{jsxref("Boolean")}} (_booléen_) indiquant si l'événement passe à travers le DOM ou non.
+- `cancelable`
+  - : est un {{jsxref("Boolean")}} indiquant si l'événement est annulable.
+- _`deta`\*\*`il`_
+  - : Les données transmises lors de l'initialisation de l'évènement.
 
-<dl>
- <dt><code><em>type</em></code></dt>
- <dd>est une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) contenant le nom de l'évènement.</dd>
- <dt><em><code>canBubble</code></em></dt>
- <dd>est un {{jsxref("Boolean")}} (<em>booléen</em>) indiquant si l'événement passe à travers le DOM ou non.</dd>
- <dt><code><em>cancelable</em></code></dt>
- <dd>est un {{jsxref("Boolean")}} indiquant si l'événement est annulable.</dd>
- <dt><em><code>deta</code></em><em><code>il</code></em></dt>
- <dd>Les données transmises lors de l'initialisation de l'évènement.</dd>
-</dl>
+## Spécifications
 
-<h2 id="Spécifications">Spécifications</h2>
+| Spécification                                                                                        | Statut                           | Commentaire                                                                                                                                                    |
+| ---------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('DOM WHATWG','#dom-customevent-initcustomevent','CustomEvent')}} | {{Spec2('DOM WHATWG')}} | Définition initiale, mais déjà dépréciée au profit de l'utilisation d'un constructeur,{{domxref("CustomEvent.CustomEvent", "CustomEvent()")}} |
 
-<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('DOM WHATWG','#dom-customevent-initcustomevent','CustomEvent')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Définition initiale, mais déjà dépréciée au profit de l'utilisation d'un constructeur,{{domxref("CustomEvent.CustomEvent", "CustomEvent()")}}</td>
-  </tr>
- </tbody>
-</table>
+## Compatibilité des navigateurs
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+{{Compat("api.CustomEvent.initCustomEvent")}}
 
+## Voir aussi
 
-
-<p>{{Compat("api.CustomEvent.initCustomEvent")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("CustomEvent")}}</li>
- <li>Le constructeur à utiliser à la place de cette méthode obsolète : {{domxref("CustomEvent.CustomEvent", "CustomEvent()")}}.</li>
-</ul>
+- {{domxref("CustomEvent")}}
+- Le constructeur à utiliser à la place de cette méthode obsolète : {{domxref("CustomEvent.CustomEvent", "CustomEvent()")}}.
diff --git a/files/fr/web/api/datatransfer/cleardata/index.md b/files/fr/web/api/datatransfer/cleardata/index.md
index c594fa95e7..4c2246a9f8 100644
--- a/files/fr/web/api/datatransfer/cleardata/index.md
+++ b/files/fr/web/api/datatransfer/cleardata/index.md
@@ -9,47 +9,44 @@ tags:
   - drag and drop
 translation_of: Web/API/DataTransfer/clearData
 ---
-<div>{{APIRef("HTML Drag and Drop API")}}</div>
+{{APIRef("HTML Drag and Drop API")}}
 
-<p>La méthode DataTransfer.clearData() retire l'opération de {{domxref("DataTransfer","glisser-déposer")}} pour le format donné. Si la donnée pour le format ciblé n'existe pas, cette méthode n'aura aucun effet.</p>
+La méthode DataTransfer.clearData() retire l'opération de {{domxref("DataTransfer","glisser-déposer")}} pour le format donné. Si la donnée pour le format ciblé n'existe pas, cette méthode n'aura aucun effet.
 
-<div class="note">
-  <p><strong>Note :</strong> Si cette méthode est appelée sans argument, ou que le format donné est une  {{domxref("DOMString","chaîne de caractères")}}  vide, les données de tous les formats seront retirées.</p>
-</div>
+> **Note :** Si cette méthode est appelée sans argument, ou que le format donné est une  {{domxref("DOMString","chaîne de caractères")}}  vide, les données de tous les formats seront retirées.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">void <var>dataTransfer</var>.clearData([format]);
-</pre>
+    void dataTransfer.clearData([format]);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt>format{{optional_inline}}</dt>
- <dd>Une {{domxref("DOMString","chaîne de caractères")}} représentant le format de donnée à retirer.</dd>
-</dl>
+- format{{optional_inline}}
+  - : Une {{domxref("DOMString","chaîne de caractères")}} représentant le format de donnée à retirer.
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Void.</p>
+Void.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Cette exemple illustre l'utilisation des méthodes {{domxref("DataTransfer.getData()","getData()")}}, {{domxref("DataTransfer.setData()","setData()")}} et {{domxref("DataTransfer.clearData()","clearData()")}} de l'objet {{domxref("DataTransfer")}}.</p>
+Cette exemple illustre l'utilisation des méthodes {{domxref("DataTransfer.getData()","getData()")}}, {{domxref("DataTransfer.setData()","setData()")}} et {{domxref("DataTransfer.clearData()","clearData()")}} de l'objet {{domxref("DataTransfer")}}.
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;span class="tweaked" id="source" draggable="true"&gt;
+```html
+<span class="tweaked" id="source" draggable="true">
   Sélectionnez cet élément, glissez-le et déposez-le dans la Zone de Dépose pour le déplacer.
-&lt;/span&gt;
-&lt;span class="tweaked" id="target"&gt;Zone de Dépose&lt;/span&gt;
-&lt;div&gt;Status: &lt;span id="status"&gt;Glissez pour démarrer&lt;/span&gt;&lt;/div&gt;
-&lt;div&gt;Data is: &lt;span id="data"&gt;non initialisé&lt;/span&gt;&lt;/div&gt;
-</pre>
+</span>
+<span class="tweaked" id="target">Zone de Dépose</span>
+<div>Status: <span id="status">Glissez pour démarrer</span></div>
+<div>Data is: <span id="data">non initialisé</span></div>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">span.tweaked {
+```css
+span.tweaked {
   display: inline-block;
   margin: 1em 0;
   padding: 1em 2em;
@@ -63,11 +60,12 @@ translation_of: Web/API/DataTransfer/clearData
 #target {
   border: 1px solid black;
 }
-</pre>
+```
 
-<h3 id="JavaScript">JavaScript</h3>
+### JavaScript
 
-<pre class="brush: js">window.addEventListener('DOMContentLoaded', function () {
+```js
+window.addEventListener('DOMContentLoaded', function () {
   // Séléctionner les éléments HTML
   var draggable = document.getElementById('source')
   var dropable = document.getElementById('target')
@@ -148,36 +146,21 @@ translation_of: Web/API/DataTransfer/clearData
     event.dataTransfer.clearData()
   }
 })
-</pre>
-
-<p>{{EmbedLiveSample('Exemple', 300, 250)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'interaction.html#dom-datatransfer-cleardata','DataTransfer.clearData()')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5.1', 'editing.html#dom-datatransfer-cleardata','DataTransfer.clearData()')}}</td>
-   <td>{{Spec2('HTML5.1')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité">Compatibilité</h2>
-
-<p>{{Compat("api.DataTransfer.clearData")}}</p>
-
-<h2 id="À_voir_également">À voir également</h2>
-
-<p>{{page("/fr/docs/Web/API/DataTransfer", "See also")}}</p>
+```
+
+{{EmbedLiveSample('Exemple', 300, 250)}}
+
+## Spécifications
+
+| Spécification                                                                                                                            | Statut                           | Commentaire         |
+| ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- |
+| {{SpecName('HTML WHATWG', 'interaction.html#dom-datatransfer-cleardata','DataTransfer.clearData()')}} | {{Spec2('HTML WHATWG')}} |                     |
+| {{SpecName('HTML5.1', 'editing.html#dom-datatransfer-cleardata','DataTransfer.clearData()')}}             | {{Spec2('HTML5.1')}}     | Définition initiale |
+
+## Compatibilité
+
+{{Compat("api.DataTransfer.clearData")}}
+
+## À voir également
+
+{{page("/fr/docs/Web/API/DataTransfer", "See also")}}
diff --git a/files/fr/web/api/datatransfer/files/index.md b/files/fr/web/api/datatransfer/files/index.md
index 122add4eae..3be3abd508 100644
--- a/files/fr/web/api/datatransfer/files/index.md
+++ b/files/fr/web/api/datatransfer/files/index.md
@@ -9,52 +9,34 @@ tags:
   - References
 translation_of: Web/API/DataTransfer/files
 ---
-<div>{{APIRef("HTML Drag and Drop API")}}</div>
+{{APIRef("HTML Drag and Drop API")}}
 
-<p>La propriété <strong><code>DataTransfer.files</code></strong> est une  {{domxref("FileList","liste de fichier")}} issue d'une manipulation de glisser-déposer. Si l'opération n'inclut pas de fichier, alors la liste est vide.</p>
+La propriété **`DataTransfer.files`** est une  {{domxref("FileList","liste de fichier")}} issue d'une manipulation de glisser-déposer. Si l'opération n'inclut pas de fichier, alors la liste est vide.
 
-<p>Cette fonctionnalité peut être utilisée pour glisser des fichiers du bureau utilisateur au navigateur.</p>
+Cette fonctionnalité peut être utilisée pour glisser des fichiers du bureau utilisateur au navigateur.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var>dataTransfer</var>.files;
-</pre>
+    dataTransfer.files;
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Une {{domxref("FileList","liste")}} de fichiers associés au "glisser", un élément de liste pour chaque fichier dans l'opération. Si l'opération de "glisser" ne contient aucun fichier alors la liste est vide.</p>
+Une {{domxref("FileList","liste")}} de fichiers associés au "glisser", un élément de liste pour chaque fichier dans l'opération. Si l'opération de "glisser" ne contient aucun fichier alors la liste est vide.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Voici deux exemples :</p>
+Voici deux exemples :
 
-<ul>
- <li>Seulement Firefox : <a href="http://jsfiddle.net/9C2EF/">http://jsfiddle.net/9C2EF/</a></li>
- <li>Tous les navigateurs : <a href="https://jsbin.com/hiqasek/edit?html,js,output">https://jsbin.com/hiqasek/</a></li>
-</ul>
+- Seulement Firefox : <http://jsfiddle.net/9C2EF/>
+- Tous les navigateurs : [https://jsbin.com/hiqasek/](https://jsbin.com/hiqasek/edit?html,js,output)
 
-<h2 id="Specifications">Specifications</h2>
+## Specifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML WHATWG", "interaction.html#dom-datatransfer-files", "files")}}</td>
-   <td>{{Spec2("HTML WHATWG")}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML5.1", "editing.html#dom-datatransfer-files", "files")}}</td>
-   <td>{{Spec2("HTML5.1")}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Specification                                                                                            | Statut                           | Commentaire         |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- |
+| {{SpecName("HTML WHATWG", "interaction.html#dom-datatransfer-files", "files")}} | {{Spec2("HTML WHATWG")}} |                     |
+| {{SpecName("HTML5.1", "editing.html#dom-datatransfer-files", "files")}}         | {{Spec2("HTML5.1")}}     | Définition initiale |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.DataTransfer.files")}}</p>
+{{Compat("api.DataTransfer.files")}}
diff --git a/files/fr/web/api/datatransfer/index.md b/files/fr/web/api/datatransfer/index.md
index 45608285ef..f47042706f 100644
--- a/files/fr/web/api/datatransfer/index.md
+++ b/files/fr/web/api/datatransfer/index.md
@@ -6,383 +6,433 @@ tags:
   - Glisser-deposer
 translation_of: Web/API/DataTransfer
 ---
-<p>L'objet <code>DataTransfer</code> contient les données glissées au cours d'une opération de glisser-déposer. Il peut contenir un ou plusieurs éléments, du même type ou de types différents. Pour plus d'informations sur le glisser-déposer, voir <a href="/fr/docs/Glisser_et_d%C3%A9poser">Glisser et déposer</a>.</p>
+L'objet `DataTransfer` contient les données glissées au cours d'une opération de glisser-déposer. Il peut contenir un ou plusieurs éléments, du même type ou de types différents. Pour plus d'informations sur le glisser-déposer, voir [Glisser et déposer](/fr/docs/Glisser_et_d%C3%A9poser).
 
-<p>Cet objet est disponible depuis la propriété <code>dataTransfer</code> de tous les événements de glisser. Il ne peut pas être créé séparément.</p>
+Cet objet est disponible depuis la propriété `dataTransfer` de tous les événements de glisser. Il ne peut pas être créé séparément.
 
-<h2 id="Properties">Aperçu des proprietés</h2>
+## Aperçu des proprietés
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <td class="header">Propriété</td>
-   <td class="header">Type</td>
-  </tr>
-  <tr>
-   <td><code><a href="/En/DragDrop/DataTransfer#dropEffect">dropEffect</a></code></td>
-   <td><code><a href="/en/String">String</a></code></td>
-  </tr>
-  <tr>
-   <td><code><a href="/En/DragDrop/DataTransfer#effectAllowed">effectAllowed</a></code></td>
-   <td><code><a href="/en/String">String</a></code></td>
-  </tr>
-  <tr>
-   <td><a href="/En/DragDrop/DataTransfer#files"><code>files</code></a></td>
-   <td>{{ domxref("FileList") }}</td>
-  </tr>
-  <tr>
-   <td><code><a href="/En/DragDrop/DataTransfer#mozCursor">mozCursor</a></code> {{ non-standard_inline() }}</td>
-   <td><code><a href="/en/String">String</a></code></td>
-  </tr>
-  <tr>
-   <td><code><a href="/En/DragDrop/DataTransfer#mozItemCount">mozItemCount</a></code> {{ non-standard_inline() }}</td>
-   <td><code>unsigned long</code></td>
-  </tr>
-  <tr>
-   <td><a href="/En/DragDrop/DataTransfer#mozSourceNode"><code>mozSourceNode</code></a> {{ non-standard_inline() }}</td>
-   <td>{{ domxref("Node") }}</td>
-  </tr>
-  <tr>
-   <td><a href="/En/DragDrop/DataTransfer#mozUserCancelled"><code>mozUserCancelled</code></a></td>
-   <td><a href="/en/JavaScript/Reference/Global_Objects/Boolean"><code>Boolean</code></a></td>
-  </tr>
-  <tr>
-   <td><code><a href="/En/DragDrop/DataTransfer#types">types</a></code></td>
-   <td><code><a href="/en/DOMStringList">StringList</a></code></td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <td class="header">Propriété</td>
+      <td class="header">Type</td>
+    </tr>
+    <tr>
+      <td>
+        <code
+          ><a href="/En/DragDrop/DataTransfer#dropEffect">dropEffect</a></code
+        >
+      </td>
+      <td>
+        <code><a href="/en/String">String</a></code>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <code
+          ><a href="/En/DragDrop/DataTransfer#effectAllowed"
+            >effectAllowed</a
+          ></code
+        >
+      </td>
+      <td>
+        <code><a href="/en/String">String</a></code>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <a href="/En/DragDrop/DataTransfer#files"><code>files</code></a>
+      </td>
+      <td>{{ domxref("FileList") }}</td>
+    </tr>
+    <tr>
+      <td>
+        <code><a href="/En/DragDrop/DataTransfer#mozCursor">mozCursor</a></code>
+        {{ non-standard_inline() }}
+      </td>
+      <td>
+        <code><a href="/en/String">String</a></code>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <code
+          ><a href="/En/DragDrop/DataTransfer#mozItemCount"
+            >mozItemCount</a
+          ></code
+        >
+        {{ non-standard_inline() }}
+      </td>
+      <td><code>unsigned long</code></td>
+    </tr>
+    <tr>
+      <td>
+        <a href="/En/DragDrop/DataTransfer#mozSourceNode"
+          ><code>mozSourceNode</code></a
+        >
+        {{ non-standard_inline() }}
+      </td>
+      <td>{{ domxref("Node") }}</td>
+    </tr>
+    <tr>
+      <td>
+        <a href="/En/DragDrop/DataTransfer#mozUserCancelled"
+          ><code>mozUserCancelled</code></a
+        >
+      </td>
+      <td>
+        <a href="/en/JavaScript/Reference/Global_Objects/Boolean"
+          ><code>Boolean</code></a
+        >
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <code><a href="/En/DragDrop/DataTransfer#types">types</a></code>
+      </td>
+      <td>
+        <code><a href="/en/DOMStringList">StringList</a></code>
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Method_overview">Aperçu des méthodes</h2>
+## Aperçu des méthodes
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <td><code>void <a href="#addElement.28.29">addElement</a>(in <a href="/en/XPCOM_Interface_Reference/nsIDOMElement">Element</a> image)</code></td>
-  </tr>
-  <tr>
-   <td><code>void <a href="#clearData.28.29">clearData</a>([in <a href="/en/String">String</a> type])</code></td>
-  </tr>
-  <tr>
-   <td><code><a href="/en/String">String</a> <a href="#getData.28.29">getData</a>(in <a href="/en/String">String</a> type)</code></td>
-  </tr>
-  <tr>
-   <td><code>void <a href="#setData.28.29">setData</a>(in <a href="/en/String">String</a> type, in <a href="/en/String">String</a> data)</code></td>
-  </tr>
-  <tr>
-   <td><code>void <a href="#setDragImage.28.29">setDragImage</a>(in <a href="/en/XPCOM_Interface_Reference/nsIDOMElement">nsIDOMElement</a> image, in long x, in long y)</code></td>
-  </tr>
-  <tr>
-   <td><code>void <a href="#mozClearDataAt.28.29">mozClearDataAt</a>([in <a href="/en/String">String</a> type, in unsigned long index])</code></td>
-  </tr>
-  <tr>
-   <td><code><a href="/en/XPCOM_Interface_Reference/NsIVariant">nsIVariant</a> <a href="#mozGetDataAt.28.29">mozGetDataAt</a>(in <a href="/en/String">String</a> type, in unsigned long index)</code></td>
-  </tr>
-  <tr>
-   <td><code>void <a href="#mozSetDataAt.28.29">mozSetDataAt</a>(in <a href="/en/String">String</a> type, in <a href="/en/XPCOM_Interface_Reference/NsIVariant">nsIVariant</a> data, in unsigned long index)</code></td>
-  </tr>
-  <tr>
-   <td><code><a href="/en/StringList">StringList</a> <a href="#mozTypesAt.28.29">mozTypesAt</a>([in unsigned long index])</code></td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <td>
+        <code
+          >void <a href="#addElement.28.29">addElement</a>(in
+          <a href="/en/XPCOM_Interface_Reference/nsIDOMElement">Element</a>
+          image)</code
+        >
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <code
+          >void <a href="#clearData.28.29">clearData</a>([in
+          <a href="/en/String">String</a> type])</code
+        >
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <code
+          ><a href="/en/String">String</a>
+          <a href="#getData.28.29">getData</a>(in
+          <a href="/en/String">String</a> type)</code
+        >
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <code
+          >void <a href="#setData.28.29">setData</a>(in
+          <a href="/en/String">String</a> type, in
+          <a href="/en/String">String</a> data)</code
+        >
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <code
+          >void <a href="#setDragImage.28.29">setDragImage</a>(in
+          <a href="/en/XPCOM_Interface_Reference/nsIDOMElement"
+            >nsIDOMElement</a
+          >
+          image, in long x, in long y)</code
+        >
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <code
+          >void <a href="#mozClearDataAt.28.29">mozClearDataAt</a>([in
+          <a href="/en/String">String</a> type, in unsigned long index])</code
+        >
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <code
+          ><a href="/en/XPCOM_Interface_Reference/NsIVariant">nsIVariant</a>
+          <a href="#mozGetDataAt.28.29">mozGetDataAt</a>(in
+          <a href="/en/String">String</a> type, in unsigned long index)</code
+        >
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <code
+          >void <a href="#mozSetDataAt.28.29">mozSetDataAt</a>(in
+          <a href="/en/String">String</a> type, in
+          <a href="/en/XPCOM_Interface_Reference/NsIVariant">nsIVariant</a>
+          data, in unsigned long index)</code
+        >
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <code
+          ><a href="/en/StringList">StringList</a>
+          <a href="#mozTypesAt.28.29">mozTypesAt</a>([in unsigned long
+          index])</code
+        >
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Properties">Propriétés</h2>
+## Propriétés
 
-<h3 id="dropEffect.28.29">dropEffect</h3>
+### dropEffect
 
-<p>L'effet utilisé, qui doit toujours être l'une des valeurs possibles de <code>effectAllowed</code>.</p>
+L'effet utilisé, qui doit toujours être l'une des valeurs possibles de `effectAllowed`.
 
-<p>Pour les événements <code>d</code><code>ragenter</code> et <code>dragover</code>, la propriété <code>dropEffect</code> est initialisée en fonction des actions initiées par l'utilisateur. Ceci est spécifique à la plateforme, mais en général, l'utilisateur peut appuyer sur les touches de modification pour ajuster l'action souhaitée. Dans un gestionnaire d'événement <code>d</code><code>ragenter</code> et <code>dragover</code>, la propriété <code>dropEffect</code> peut être modifiée si l'action de l'utilisateur demandée n'est pas celle souhaitée.</p>
+Pour les événements ` d``ragenter ` et `dragover`, la propriété `dropEffect` est initialisée en fonction des actions initiées par l'utilisateur. Ceci est spécifique à la plateforme, mais en général, l'utilisateur peut appuyer sur les touches de modification pour ajuster l'action souhaitée. Dans un gestionnaire d'événement ` d``ragenter ` et `dragover`, la propriété `dropEffect` peut être modifiée si l'action de l'utilisateur demandée n'est pas celle souhaitée.
 
-<p>Pour les évènements <code>dragstart</code>, <code>drag</code>, and <code>dragleave</code> events, <code>dropEffect</code> est initialisé à "none". Toute valeur peut être assignée à <code>dropEffect</code>, mais elle sera ignorée.</p>
+Pour les évènements `dragstart`, `drag`, and `dragleave` events, `dropEffect` est initialisé à "none". Toute valeur peut être assignée à `dropEffect`, mais elle sera ignorée.
 
-<p>Pour les évènements <code>drop</code> et <code>dragend</code> , <code>dropEffect</code> est initialisé en fonction de l'action initiée, et correspond à la dernière valeur de <code>dropEffect</code> après le dernier événement <code>dragenter</code> ou <code>dragover</code>.</p>
+Pour les évènements `drop` et `dragend` , `dropEffect` est initialisé en fonction de l'action initiée, et correspond à la dernière valeur de `dropEffect` après le dernier événement `dragenter` ou `dragover`.
 
-<p>Valeurs possibles:</p>
+Valeurs possibles:
 
-<ul>
- <li><strong>copy</strong>: Une copie de l'élément source est faite au nouvel emplacement.</li>
- <li><strong>move</strong>: Un élément est déplacé vers un nouvel emplacement.</li>
- <li><strong>link</strong>: Un lien est établi depuis la source vers le nouvel emplacement.</li>
- <li><strong>none</strong>: L'élément ne peut pas être déposé.</li>
-</ul>
+- **copy**: Une copie de l'élément source est faite au nouvel emplacement.
+- **move**: Un élément est déplacé vers un nouvel emplacement.
+- **link**: Un lien est établi depuis la source vers le nouvel emplacement.
+- **none**: L'élément ne peut pas être déposé.
 
-<p>Attribuer une autre valeur n'a aucun effet et conserve l'ancienne valeur.</p>
+Attribuer une autre valeur n'a aucun effet et conserve l'ancienne valeur.
 
-<h3 id="effectAllowed.28.29">effectAllowed</h3>
+### effectAllowed
 
-<p>Indique les effets qui sont autorisés pour ce déplacer. Il peut être spécifié dans l'évènement <code>dragstart</code> pour définir les effets souhaités pour la source, et dans les événements <code>dragenter</code> et <code>dragover</code> pour définir les effets souhaités pour la cible. La valeur n'est pas utilisée pour d'autres événements.</p>
+Indique les effets qui sont autorisés pour ce déplacer. Il peut être spécifié dans l'évènement `dragstart` pour définir les effets souhaités pour la source, et dans les événements `dragenter` et `dragover` pour définir les effets souhaités pour la cible. La valeur n'est pas utilisée pour d'autres événements.
 
-<p>Valeurs possibles:</p>
+Valeurs possibles:
 
-<ul>
- <li><strong>copy</strong>: Une copie de l'élément source peut être faite à son nouvel emplacement.</li>
- <li><strong>move</strong>: Un élément peut être déplacé vers un nouvel emplacement.</li>
- <li><strong>link</strong>: Un lien peut être établi vers la source depuis le nouvel emplacement.</li>
- <li><strong>copyLink</strong>: Une opération copy ou link est autorisée.</li>
- <li><strong>copyMove</strong>: Une opération copy ou move est autorisée.</li>
- <li><strong>linkMove</strong>: Une opération link ou move est autorisée.</li>
- <li><strong>all</strong>: Toutes les opérations sont autorisées.</li>
- <li><strong>none</strong>: l'élément ne peut être déposé.</li>
- <li><strong>uninitialized</strong>: la valeur par défaut lorsque l'effet n'a pas été spécifié, ce qui équivaut à all.</li>
-</ul>
+- **copy**: Une copie de l'élément source peut être faite à son nouvel emplacement.
+- **move**: Un élément peut être déplacé vers un nouvel emplacement.
+- **link**: Un lien peut être établi vers la source depuis le nouvel emplacement.
+- **copyLink**: Une opération copy ou link est autorisée.
+- **copyMove**: Une opération copy ou move est autorisée.
+- **linkMove**: Une opération link ou move est autorisée.
+- **all**: Toutes les opérations sont autorisées.
+- **none**: l'élément ne peut être déposé.
+- **uninitialized**: la valeur par défaut lorsque l'effet n'a pas été spécifié, ce qui équivaut à all.
 
-<p>Attribuer une autre valeur n'a aucun effet et conserve l'ancienne valeur.</p>
+Attribuer une autre valeur n'a aucun effet et conserve l'ancienne valeur.
 
-<h3 id="files.28.29">files</h3>
+### files
 
-<p>Contient une liste de tous les fichiers locaux disponibles sur le transfert de données. Si le glisser n'implique pas de fichiers, cette propriété est une liste vide. Un accès à un index invalide sur le {{ domxref("FileList") }} spécifié par cette propriété renvoie <code>null</code>.</p>
+Contient une liste de tous les fichiers locaux disponibles sur le transfert de données. Si le glisser n'implique pas de fichiers, cette propriété est une liste vide. Un accès à un index invalide sur le {{ domxref("FileList") }} spécifié par cette propriété renvoie `null`.
 
-<h4 id="Exemple">Exemple</h4>
+#### Exemple
 
-<p>Cet exemple retourne la liste des fichiers traînée dans la fenêtre du navigateur:  <a href="http://jsfiddle.net/9C2EF/">http://jsfiddle.net/9C2EF/</a></p>
+Cet exemple retourne la liste des fichiers traînée dans la fenêtre du navigateur:  <http://jsfiddle.net/9C2EF/>
 
-<h3 id="types.28.29">types</h3>
+### types
 
-<p>Contient une liste des types de format des données stockées pour le premier élément, dans le même ordre oú les données ont été ajoutées. Une liste vide sera retournée si aucune donnée n'a été ajoutée.</p>
+Contient une liste des types de format des données stockées pour le premier élément, dans le même ordre oú les données ont été ajoutées. Une liste vide sera retournée si aucune donnée n'a été ajoutée.
 
-<p>L'état du curseur au cours d'un glisser. Cette propriété est surtout utilisée pour contrôler le curseur au cours d'un glisser d'onglet.</p>
+L'état du curseur au cours d'un glisser. Cette propriété est surtout utilisée pour contrôler le curseur au cours d'un glisser d'onglet.
 
-<div class="note">
-  <p><strong>Note :</strong> Cette méthode n'est actuellement implémentée que sur Windows.</p>
-</div>
+> **Note :** Cette méthode n'est actuellement implémentée que sur Windows.
 
-<h4 id="Valeurs_possibles">Valeurs possibles</h4>
+#### Valeurs possibles
 
-<dl>
- <dt><code>auto</code></dt>
- <dd>Utilise le comportement par défaut du système.</dd>
- <dt><code>default</code></dt>
- <dd>Utilise le comportement par défaut de Gecko, qui consiste à utiliser une flèche pour curseur au cours d'un glisser.</dd>
-</dl>
+- `auto`
+  - : Utilise le comportement par défaut du système.
+- `default`
+  - : Utilise le comportement par défaut de Gecko, qui consiste à utiliser une flèche pour curseur au cours d'un glisser.
 
-<div class="note">
-  <p><strong>Note :</strong> Si vous spécifiez une valeur autre que "default", "auto" est supposé.</p>
-</div>
+> **Note :** Si vous spécifiez une valeur autre que "default", "auto" est supposé.
 
-<h3 id="mozItemCount.28.29">mozItemCount</h3>
+### mozItemCount
 
-<p>Le nombre d'éléments glissés.</p>
+Le nombre d'éléments glissés.
 
-<div class="note">
-  <p><strong>Note :</strong> Cette propriété est  spécifique a Gecko.</p>
-</div>
+> **Note :** Cette propriété est  spécifique a Gecko.
 
-<h3 id="mozSourceNode">mozSourceNode</h3>
+### mozSourceNode
 
-<p>le {{ domxref("Node") }} au dessus duquel le curseur de la souris se trouvait lorsque le bouton a été pressé pour initialiser le glisser. Cette valeur est nulle pour un glisser externe, ou si l'appelant ne peut pas accéder au nœud.</p>
+le {{ domxref("Node") }} au dessus duquel le curseur de la souris se trouvait lorsque le bouton a été pressé pour initialiser le glisser. Cette valeur est nulle pour un glisser externe, ou si l'appelant ne peut pas accéder au nœud.
 
-<div class="note">
-  <p><strong>Note :</strong> Cette propriété est  spécifique a Gecko.</p>
-</div>
+> **Note :** Cette propriété est  spécifique a Gecko.
 
-<h3 id="mozItemCount.28.29">mozUserCancelled</h3>
+### mozUserCancelled
 
-<p>Cette propriété s'applique uniquement à l'événement <code>dragend</code>, et est positionnée à <code>true</code> si l'utilisateur a annulé le glisser en appuyant sur la touche échappe. Elle est positionnée à <code>false</code> dans les autres cas, y compris si le glisser a échoué pour toute autre raison, par exemple en raison d'un déposer sur un emplacement non valide. Cette propriété n'est pas encore implémenté sous Linux.</p>
+Cette propriété s'applique uniquement à l'événement `dragend`, et est positionnée à `true` si l'utilisateur a annulé le glisser en appuyant sur la touche échappe. Elle est positionnée à `false` dans les autres cas, y compris si le glisser a échoué pour toute autre raison, par exemple en raison d'un déposer sur un emplacement non valide. Cette propriété n'est pas encore implémenté sous Linux.
 
-<div class="note">
-  <p><strong>Note :</strong> Cette propriété est  spécifique a Gecko.</p>
-</div>
+> **Note :** Cette propriété est  spécifique a Gecko.
 
-<h2 id="Methods">Methods</h2>
+## Methods
 
-<h3 id="addElement.28.29">addElement()</h3>
+### addElement()
 
-<p>Spécifie la source du glisser. Ceci est rarement utilisé, mais a pour effet de modifier la cible des événements <code>drag</code> et <code>dragend</code>. La cible par défaut est le nœud qui est glissé.</p>
+Spécifie la source du glisser. Ceci est rarement utilisé, mais a pour effet de modifier la cible des événements `drag` et `dragend`. La cible par défaut est le nœud qui est glissé.
 
-<pre class="eval"> void addElement(
-   in Element element
- );
-</pre>
+     void addElement(
+       in Element element
+     );
 
-<h4 id="Parameters_addElement">Parametres</h4>
+#### Parametres
 
-<dl>
- <dt><code>element </code></dt>
- <dd>L'élément à ajouter.</dd>
-</dl>
+- `element`
+  - : L'élément à ajouter.
 
-<h3 id="clearData.28.29">clearData()</h3>
+### clearData()
 
-<p>Supprime les données associées au type spécifié. L'argument type est facultatif. Si le type est vide ou non spécifié, les données associées à tous les types sont supprimées. Si les données pour le type spécifié n'existent pas, ou le transfert de données ne contient pas de données, cette méthode n'aura aucun effet.</p>
+Supprime les données associées au type spécifié. L'argument type est facultatif. Si le type est vide ou non spécifié, les données associées à tous les types sont supprimées. Si les données pour le type spécifié n'existent pas, ou le transfert de données ne contient pas de données, cette méthode n'aura aucun effet.
 
-<pre class="eval"> void clearData(
-   [optional] in String type
- );
-</pre>
+     void clearData(
+       [optional] in String type
+     );
 
-<h4 id="Parameters_clearData">Parametres</h4>
+#### Parametres
 
-<dl>
- <dt><code>type </code></dt>
- <dd>The type of data to remove.</dd>
-</dl>
+- `type`
+  - : The type of data to remove.
 
-<h3 id="getData.28.29">getData()</h3>
+### getData()
 
-<p>Récupère les données du type spécifié, ou une chaîne vide si les données de ce type n'existe pas ou le transfert de données ne contient aucune donnée.</p>
+Récupère les données du type spécifié, ou une chaîne vide si les données de ce type n'existe pas ou le transfert de données ne contient aucune donnée.
 
-<p>Une erreur de sécurité se produira si vous tentez de récupérer des données lors d'un glisser qui a été spécifié à partir d'un domaine différent ou auquel l'appelant n'a pas accès. Ces données ne seront disponibles qu'à l'issue du déposer au cours d'un événement drop.</p>
+Une erreur de sécurité se produira si vous tentez de récupérer des données lors d'un glisser qui a été spécifié à partir d'un domaine différent ou auquel l'appelant n'a pas accès. Ces données ne seront disponibles qu'à l'issue du déposer au cours d'un événement drop.
 
-<pre class="eval"> void getData(
-   in String type
- );
-</pre>
+     void getData(
+       in String type
+     );
 
-<h4 id="Parameters_getData">Parametres</h4>
+#### Parametres
 
-<dl>
- <dt><code>type </code></dt>
- <dd>Le type de donnée à récupérer.</dd>
-</dl>
+- `type`
+  - : Le type de donnée à récupérer.
 
-<h3 id="setData.28.29">setData()</h3>
+### setData()
 
-<p>Définit une donnée pour le type spécifié. Si des données pour le type n'existe pas, elle est ajoutée à la fin, de telle sorte que le dernier élément dans la liste des types sera le nouveau format. Si une donnée pour le type existe déjà, la donnée existante est remplacée à la même position. C'est-à-dire que l'ordre de la liste des types ne change pas lors du remplacement de la donnée d'un même type.</p>
+Définit une donnée pour le type spécifié. Si des données pour le type n'existe pas, elle est ajoutée à la fin, de telle sorte que le dernier élément dans la liste des types sera le nouveau format. Si une donnée pour le type existe déjà, la donnée existante est remplacée à la même position. C'est-à-dire que l'ordre de la liste des types ne change pas lors du remplacement de la donnée d'un même type.
 
-<pre class="eval"> void setData(
-   in String type,
-   in String data
- );
-</pre>
+     void setData(
+       in String type,
+       in String data
+     );
 
-<h4 id="Parameters_setData">Parametres</h4>
+#### Parametres
 
-<dl>
- <dt><code>type </code></dt>
- <dd>Le type de la donnée à ajouter.</dd>
- <dt><code>data </code></dt>
- <dd>La donnée à ajouter.</dd>
-</dl>
+- `type`
+  - : Le type de la donnée à ajouter.
+- `data`
+  - : La donnée à ajouter.
 
-<h3 id="setDragImage.28.29">setDragImage()</h3>
+### setDragImage()
 
-<p>Définit l'image à utiliser pour un glisser, si une image personnalisée est souhaitée. Cette méthode est rarement utilisée, dans la mesure oú une image par défaut est créée à partir du nœud glissé.<br>
- <br>
- Si le nœud est un élément HTML img, un élément canvas HTML ou un élément d'image XUL, la donnée image est utilisée. Sinon, l'image doit être un nœud visible et l'image utilisée pendant le glisser est créée à partir de ce noeud. Si l'image est null, toute image personnalisé est effacée et la valeur par défaut est utilisée à la place.<br>
- <br>
- Les coordonnées spécifient le décalage à l'intérieur de l'image spécifiant la position du curseur de la souris. Pour centrer l'image, par exemple, utiliser des valeurs qui sont la moitié de la largeur et de la hauteur de l'image.</p>
+Définit l'image à utiliser pour un glisser, si une image personnalisée est souhaitée. Cette méthode est rarement utilisée, dans la mesure oú une image par défaut est créée à partir du nœud glissé.
 
-<pre class="eval"> void setDragImage(
-   in Element image,
-   in long x,
-   in long y
- );
-</pre>
+Si le nœud est un élément HTML img, un élément canvas HTML ou un élément d'image XUL, la donnée image est utilisée. Sinon, l'image doit être un nœud visible et l'image utilisée pendant le glisser est créée à partir de ce noeud. Si l'image est null, toute image personnalisé est effacée et la valeur par défaut est utilisée à la place.
 
-<h4 id="Parameters_setDragImage">Parametres</h4>
+Les coordonnées spécifient le décalage à l'intérieur de l'image spécifiant la position du curseur de la souris. Pour centrer l'image, par exemple, utiliser des valeurs qui sont la moitié de la largeur et de la hauteur de l'image.
 
-<dl>
- <dt><code>image </code></dt>
- <dd>Un élément à utiliser comme image pendant le glisser</dd>
- <dt><code>x </code></dt>
- <dd>Décalage horizontal à l'intérieur de l'image.</dd>
- <dt><code>y </code></dt>
- <dd>Décalage vertical à l'intérieur de l'image.</dd>
-</dl>
+     void setDragImage(
+       in Element image,
+       in long x,
+       in long y
+     );
 
-<h3 id="mozClearDataAt.28.29">mozClearDataAt()</h3>
+#### Parametres
 
-<p>Supprime les données associées au format pour un élément à l'index spécifié. L'index est compris entre zéro et le nombre d'éléments moins un.<br>
- <br>
- Si le dernier format de l'élément est supprimé, l'élément entier est retiré, réduisant <code>mozItemCount</code> par un.<br>
- <br>
- Si la liste <code>format</code> est vide, alors les données associées à tous les formats sont supprimées. Si le format n'est pas trouvé, alors cette méthode n'a aucun effet.<br>
-  </p>
+- `image`
+  - : Un élément à utiliser comme image pendant le glisser
+- `x`
+  - : Décalage horizontal à l'intérieur de l'image.
+- `y`
+  - : Décalage vertical à l'intérieur de l'image.
 
-<div class="note">
-  <p><strong>Note :</strong> Cette méthode est spécifique à Gecko.</p>
-</div>
+### mozClearDataAt()
 
-<pre class="eval"> void mozClearDataAt(
-   [optional] in String type,
-   in unsigned long index
- );
-</pre>
+Supprime les données associées au format pour un élément à l'index spécifié. L'index est compris entre zéro et le nombre d'éléments moins un.
 
-<h4 id="Parameters_mozClearDataAt">Parametres</h4>
+Si le dernier format de l'élément est supprimé, l'élément entier est retiré, réduisant `mozItemCount` par un.
 
-<dl>
- <dt><code>type </code></dt>
- <dd>Le type de la donnée à supprimer.</dd>
- <dt><code>index </code></dt>
- <dd>L'index de la donnée à supprimer.</dd>
-</dl>
+Si la liste `format` est vide, alors les données associées à tous les formats sont supprimées. Si le format n'est pas trouvé, alors cette méthode n'a aucun effet.
 
-<h3 id="mozGetDataAt.28.29">mozGetDataAt()</h3>
 
-<p>Récupère les données associées au format donné pour un élément à l'index spécifié, ou null si elle n'existe pas. L'indice devrait être compris entre zéro et le nombre d'éléments moins un.</p>
 
-<div class="note">
-  <p><strong>Note :</strong> Cette méthode est spécifique à Gecko.</p>
-</div>
+> **Note :** Cette méthode est spécifique à Gecko.
 
-<pre class="eval"> nsIVariant mozGetDataAt(
-   [optional] in String type,
-   in unsigned long index
- );
-</pre>
-
-<h4 id="Parameters_mozClearDataAt">Parametres</h4>
-
-<dl>
- <dt><code>type </code></dt>
- <dd>Le type de donnée à récupérer.</dd>
- <dt><code>index </code></dt>
- <dd>L'indice de la donnée à récupérer.</dd>
-</dl>
-
-<h3 id="mozSetDataAt.28.29">mozSetDataAt()</h3>
-
-<p>Un transfert de données peut stocker plusieurs éléments, chacun à un index commençant à zéro. <code>mozSetDataAt(</code><code>)</code> ne peut être appelé qu'avec un index inférieur à <code>mozItemCount,</code> auquel cas un élément existant est modifié, ou égal à <code>mozItemCount,</code> auquel cas un nouvel élément est ajouté, et <code>mozItemCount</code> est incrémenté de un.<br>
- <br>
- Les données doivent être ajoutées par ordre de préférence, avec le format le plus spécifique ajouté en premier et le format moins spécifique ajouté en dernier. Si la donnée du format spécifié existe déjà, elle est remplacée dans la même position que la donnée précédente.<br>
- <br>
- La donnée doit être une chaîne, ou un type primitif booléen, ou un type numérique (qui sera converti en une chaîne), ou une <a href="/fr/docs/XPCOM_Interface_Reference/nsISupports">nsISupports</a>.</p>
-
-<div class="note">
-  <p><strong>Note :</strong> Cette méthode est spécifique à Gecko.</p>
-</div>
-
-<pre class="eval"> void mozSetDataAt(
-   [optional] in String type,
-   in nsIVariant data,
-   in unsigned long index
- );
-</pre>
-
-<h4 id="Parameters_mozSetDataAt">Parametres</h4>
-
-<dl>
- <dt><code>type </code></dt>
- <dd>Le type de donnée à ajouter.</dd>
- <dt><code>data </code></dt>
- <dd>La donnée à ajouter.</dd>
- <dt><code>index </code></dt>
- <dd>L'index de la donnée à ajouter.</dd>
-</dl>
-
-<h3 id="mozTypesAt.28.29">mozTypesAt()</h3>
-
-<p>Contient une liste des types de format des données qui sont stockées pour un élément à l'index spécifié. Si l'index n'est pas dans compris entre 0 et le nombre d'éléments moins un, une liste de chaîne vide est retournée.</p>
-
-<div class="note">
-  <p><strong>Note :</strong> Cette méthode est spécifique à Gecko.</p>
-</div>
-
-<pre class="eval"> nsIVariant mozTypesAt(
-   in unsigned long index
- );
-</pre>
-
-<h4 id="Parameters_mozTypesAt">Parameters</h4>
-
-<dl>
- <dt><code>index </code></dt>
- <dd>L'index de la donnée pour laquelle récupérer les types.</dd>
-</dl>
-
-<h2 id="See_also">Voir Aussi</h2>
-
-<p><a href="/En/DragDrop/Drag_and_Drop">Drag and Drop</a></p>
+     void mozClearDataAt(
+       [optional] in String type,
+       in unsigned long index
+     );
+
+#### Parametres
+
+- `type`
+  - : Le type de la donnée à supprimer.
+- `index`
+  - : L'index de la donnée à supprimer.
+
+### mozGetDataAt()
+
+Récupère les données associées au format donné pour un élément à l'index spécifié, ou null si elle n'existe pas. L'indice devrait être compris entre zéro et le nombre d'éléments moins un.
+
+> **Note :** Cette méthode est spécifique à Gecko.
+
+     nsIVariant mozGetDataAt(
+       [optional] in String type,
+       in unsigned long index
+     );
+
+#### Parametres
+
+- `type`
+  - : Le type de donnée à récupérer.
+- `index`
+  - : L'indice de la donnée à récupérer.
+
+### mozSetDataAt()
+
+Un transfert de données peut stocker plusieurs éléments, chacun à un index commençant à zéro. ` mozSetDataAt(``) ` ne peut être appelé qu'avec un index inférieur à `mozItemCount,` auquel cas un élément existant est modifié, ou égal à `mozItemCount,` auquel cas un nouvel élément est ajouté, et `mozItemCount` est incrémenté de un.
+
+Les données doivent être ajoutées par ordre de préférence, avec le format le plus spécifique ajouté en premier et le format moins spécifique ajouté en dernier. Si la donnée du format spécifié existe déjà, elle est remplacée dans la même position que la donnée précédente.
+
+La donnée doit être une chaîne, ou un type primitif booléen, ou un type numérique (qui sera converti en une chaîne), ou une [nsISupports](/fr/docs/XPCOM_Interface_Reference/nsISupports).
+
+> **Note :** Cette méthode est spécifique à Gecko.
+
+     void mozSetDataAt(
+       [optional] in String type,
+       in nsIVariant data,
+       in unsigned long index
+     );
+
+#### Parametres
+
+- `type`
+  - : Le type de donnée à ajouter.
+- `data`
+  - : La donnée à ajouter.
+- `index`
+  - : L'index de la donnée à ajouter.
+
+### mozTypesAt()
+
+Contient une liste des types de format des données qui sont stockées pour un élément à l'index spécifié. Si l'index n'est pas dans compris entre 0 et le nombre d'éléments moins un, une liste de chaîne vide est retournée.
+
+> **Note :** Cette méthode est spécifique à Gecko.
+
+     nsIVariant mozTypesAt(
+       in unsigned long index
+     );
+
+#### Parameters
+
+- `index`
+  - : L'index de la donnée pour laquelle récupérer les types.
+
+## Voir Aussi
+
+[Drag and Drop](/En/DragDrop/Drag_and_Drop)
diff --git a/files/fr/web/api/dedicatedworkerglobalscope/close/index.md b/files/fr/web/api/dedicatedworkerglobalscope/close/index.md
index 919907cd8f..784451dfea 100644
--- a/files/fr/web/api/dedicatedworkerglobalscope/close/index.md
+++ b/files/fr/web/api/dedicatedworkerglobalscope/close/index.md
@@ -9,47 +9,38 @@ tags:
   - Worker
 translation_of: Web/API/DedicatedWorkerGlobalScope/close
 ---
-<p>{{APIRef("Web Workers API")}}</p>
+{{APIRef("Web Workers API")}}
 
-<p>La méthode <code><strong>close()</strong></code> de l'interface {{domxref("DedicatedWorkerGlobalScope")}} ferme toutes les tâches placées dans la boucle de l'évènement <code>DedicatedWorkerGlobalScope</code>, fermant effectivement cette portée particulière.</p>
+La méthode **`close()`** de l'interface {{domxref("DedicatedWorkerGlobalScope")}} ferme toutes les tâches placées dans la boucle de l'évènement `DedicatedWorkerGlobalScope`, fermant effectivement cette portée particulière.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">self.close();</pre>
+```js
+self.close();
+```
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Si vous souhaitez fermer votre instance de travail depuis l'intérieur du worker, vous pouvez appeler ce qui suit :</p>
+Si vous souhaitez fermer votre instance de travail depuis l'intérieur du worker, vous pouvez appeler ce qui suit :
 
-<pre class="brush: js">close();</pre>
+```js
+close();
+```
 
-<p><code>close()</code> et <code>self.close()</code> sont effectivement équivalents — les deux représentent une instruction <code>close()</code> qui est appelée de l'intérieur de la portée interne du worker.</p>
+`close()` et `self.close()` sont effectivement équivalents — les deux représentent une instruction `close()` qui est appelée de l'intérieur de la portée interne du worker.
 
-<div class="note">
-<p><strong>Note :</strong> Il y a une autre façon d'arrêter le worker depuis le fil principal : la méthode {{domxref("Worker.terminate")}}.</p>
-</div>
+> **Note :** Il y a une autre façon d'arrêter le worker depuis le fil principal : la méthode {{domxref("Worker.terminate")}}.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', '#dom-dedicatedworkerglobalscope-close', 'close()')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                            | Statut                           | Commentaire |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- |
+| {{SpecName('HTML WHATWG', '#dom-dedicatedworkerglobalscope-close', 'close()')}} | {{Spec2('HTML WHATWG')}} |             |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.DedicatedWorkerGlobalScope.close")}}</p>
+{{Compat("api.DedicatedWorkerGlobalScope.close")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<p>{{domxref("DedicatedWorkerGlobalScope")}}</p>
+{{domxref("DedicatedWorkerGlobalScope")}}
diff --git a/files/fr/web/api/dedicatedworkerglobalscope/index.md b/files/fr/web/api/dedicatedworkerglobalscope/index.md
index 20417cc38e..6f8edf15bd 100644
--- a/files/fr/web/api/dedicatedworkerglobalscope/index.md
+++ b/files/fr/web/api/dedicatedworkerglobalscope/index.md
@@ -3,112 +3,83 @@ title: DedicatedWorkerGlobalScope
 slug: Web/API/DedicatedWorkerGlobalScope
 translation_of: Web/API/DedicatedWorkerGlobalScope
 ---
-<p>{{APIRef("Web Workers API")}}</p>
-
-<p>L'objet <strong><code>DedicatedWorkerGlobalScope</code></strong> (le contexte global du {{domxref("Worker")}}) est accessible au moyen du mot clé {{domxref("window.self","self")}}. Certaines fonctions globales additionnelles, des espaces de nom d'objets, et des constructeurs, non associés typiquement au contexte global d'un worker, et néanmoins disponibles, sont listés dans la  <a href="/fr/docs/Web/JavaScript/Reference">Référence JavaScript</a>. Consultez aussi : <a href="/fr/docs/Web/Guide/Needs_categorization/Functions_available_to_workers">Fonctions et classes disponibles dans les Web Workers</a>.</p>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<p><em>Cette interface hérite des propriétés de l'interface {{domxref("WorkerGlobalScope")}}, et de son parent {{domxref("EventTarget")}}, et implémente ainsi les propriétés de {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, et {{domxref("WindowEventHandlers")}}.</em></p>
-
-<dl>
- <dt>{{domxref("DedicatedWorkerGlobalScope.name")}} {{readOnlyinline}}</dt>
- <dd>Le nom du {{domxref("Worker")}} optionnellement donné lors de la création du worker avec le constructeur {{domxref("Worker.Worker", "Worker()")}}. Il est souvent utilisé pour du débogage.</dd>
-</dl>
-
-<h3 id="Propriétés_héritées_de_WorkerGlobalScope">Propriétés héritées de WorkerGlobalScope</h3>
-
-<dl>
- <dt>{{domxref("WorkerGlobalScope.self")}}</dt>
- <dd>Retourne une référence d'objet à l'objet <code>DedicatedWorkerGlobalScope</code> lui-même.</dd>
- <dt>{{domxref("WorkerGlobalScope.console")}} {{readOnlyinline}}</dt>
- <dd>Retourne la {{domxref("Console")}} associée au worker.</dd>
- <dt>{{domxref("WorkerGlobalScope.location")}} {{readOnlyinline}}</dt>
- <dd>Retourne la {{domxref("WorkerLocation")}} associée au worker. <code>WorkerLocation</code> est un objet location spécifique, essentiellement un sous-ensemble de {{domxref("Location")}} utilisé dans le contexte d'un navigateur, mais adapté aux workers.</dd>
- <dt>{{domxref("WorkerGlobalScope.navigator")}} {{readOnlyinline}}</dt>
- <dd>Retourne le {{domxref("WorkerNavigator")}} associé au worker. <code>WorkerNavigator</code> est un objet navigator spécifique, essentiellement un sous-ensemble de {{domxref("Navigator")}} utilisé dans le contexte d'un navigateur, mais adapté aux workers.</dd>
- <dt>{{domxref("WorkerGlobalScope.performance")}} {{readOnlyinline}} {{Non-standard_inline}}</dt>
- <dd>Retourne l'objet {{domxref("Performance")}} associé au worker, qui correspond à l'objet performance normal, avec seulement à disposition un sous-ensemble de ses propriétés et méthodes.</dd>
-</dl>
-
-<h3 id="Gestionnaires_dévénement">Gestionnaires d'événement</h3>
-
-<p><em>Cette interface hérite des gestionnaires d'événement de l'interface {{domxref("WorkerGlobalScope")}}, et de son parent {{domxref("EventTarget")}}, et implémente ainsi les gestionnaires d'événement de {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, et {{domxref("WindowEventHandlers")}}.</em></p>
-
-<dl>
- <dt>{{domxref("DedicatedWorkerGlobalScope.onmessage")}}</dt>
- <dd>C'est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsqu'un événement {{event("message")}} est déclenché. Ces événements sont du type {{domxref("MessageEvent")}} et sont appelés quand le worker reçoit un message du document qui l'a initialisé (i.e. à partir de la méthode {{domxref("Worker.postMessage")}}.)</dd>
- <dt>{{domxref("DedicatedWorkerGlobalScope.onmessageerror")}}</dt>
- <dd>C'est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsqu'un événement {{event("messageerror")}} est déclenché.</dd>
-</dl>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<p><em>Cette interface hérite des méthodes de l'interface {{domxref("WorkerGlobalScope")}}, et de son parent {{domxref("EventTarget")}}, et implémente ainsi les méthodes de {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, et {{domxref("WindowEventHandlers")}}.</em></p>
-
-<dl>
- <dt>{{domxref("WorkerGlobalScope.close()")}}</dt>
- <dd>Annule toute tâche en attente dans la boucle d'événement du <code>WorkerGlobalScope</code>, mettant alors fin à ce contexte précis.</dd>
- <dt>{{domxref("DedicatedWorkerGlobalScope.postMessage")}}</dt>
- <dd>Envoie un message — qui peut comprendre  <code>n'importe quel</code> objet JavaScript — au document parent qui a préalablement engendré le worker.</dd>
-</dl>
-
-<h3 id="Héritées_de_WorkerGlobalScope">Héritées de WorkerGlobalScope</h3>
-
-<dl>
- <dt>{{domxref("WorkerGlobalScope.dump()")}} {{non-standard_inline}}</dt>
- <dd>Écrit un message dans la console.</dd>
- <dt>{{domxref("WorkerGlobalScope.importScripts()")}}</dt>
- <dd>Importe un ou plusieurs scripts dans le contexte du worker. Vous pouvez spécifier autant de fichiers que souhaité, en les séparant par des virgules. Par exemple: <code>importScripts('foo.js', 'bar.js');</code></dd>
-</dl>
-
-<h3 id="Implémentées_à_partir_dautres_endroits">Implémentées à partir d'autres endroits</h3>
-
-<dl>
- <dt>{{domxref("WindowBase64.atob()")}}</dt>
- <dd>Décode une chaîne de données qui a été encodée en base-64.</dd>
- <dt>{{domxref("WindowBase64.btoa()")}}</dt>
- <dd>Crée une chaîne ASCII en base-64 à partir d'une chaîne de données binaires.</dd>
- <dt>{{domxref("WindowTimers.clearInterval()")}}</dt>
- <dd>Annule l'exécution répétée initiée par {{domxref("WindowTimers.setInterval()")}}.</dd>
- <dt>{{domxref("WindowTimers.clearTimeout()")}}</dt>
- <dd>Annule l'exécution répété initiée par {{domxref("WindowTimers.setTimeout()")}}.</dd>
- <dt>{{domxref("WindowTimers.setInterval()")}}</dt>
- <dd>Planifie l'exécution d'une fonction toutes les X millisecondes.</dd>
- <dt>{{domxref("WindowTimers.setTimeout()")}}</dt>
- <dd>Fixe un délai pour l'exécution d'une fonction.</dd>
-</dl>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', '#dedicatedworkerglobalscope', 'DedicatedWorkerGlobalScope')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<div>
-
-
-<p>{{Compat("api.DedicatedWorkerGlobalScope")}}</p>
-</div>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("Worker")}}</li>
- <li>{{domxref("WorkerGlobalScope")}}</li>
- <li><a href="/fr/docs/Web/Guide/Performance/Using_web_workers">Utilisation des web workers</a></li>
- <li><a href="/fr/docs/Web/Guide/Needs_categorization/Functions_available_to_workers">Fonctions et classes disponibles dans les Web Workers</a></li>
-</ul>
+{{APIRef("Web Workers API")}}
+
+L'objet **`DedicatedWorkerGlobalScope`** (le contexte global du {{domxref("Worker")}}) est accessible au moyen du mot clé {{domxref("window.self","self")}}. Certaines fonctions globales additionnelles, des espaces de nom d'objets, et des constructeurs, non associés typiquement au contexte global d'un worker, et néanmoins disponibles, sont listés dans la  [Référence JavaScript](/fr/docs/Web/JavaScript/Reference). Consultez aussi : [Fonctions et classes disponibles dans les Web Workers](/fr/docs/Web/Guide/Needs_categorization/Functions_available_to_workers).
+
+## Propriétés
+
+_Cette interface hérite des propriétés de l'interface {{domxref("WorkerGlobalScope")}}, et de son parent {{domxref("EventTarget")}}, et implémente ainsi les propriétés de {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, et {{domxref("WindowEventHandlers")}}._
+
+- {{domxref("DedicatedWorkerGlobalScope.name")}} {{readOnlyinline}}
+  - : Le nom du {{domxref("Worker")}} optionnellement donné lors de la création du worker avec le constructeur {{domxref("Worker.Worker", "Worker()")}}. Il est souvent utilisé pour du débogage.
+
+### Propriétés héritées de WorkerGlobalScope
+
+- {{domxref("WorkerGlobalScope.self")}}
+  - : Retourne une référence d'objet à l'objet `DedicatedWorkerGlobalScope` lui-même.
+- {{domxref("WorkerGlobalScope.console")}} {{readOnlyinline}}
+  - : Retourne la {{domxref("Console")}} associée au worker.
+- {{domxref("WorkerGlobalScope.location")}} {{readOnlyinline}}
+  - : Retourne la {{domxref("WorkerLocation")}} associée au worker. `WorkerLocation` est un objet location spécifique, essentiellement un sous-ensemble de {{domxref("Location")}} utilisé dans le contexte d'un navigateur, mais adapté aux workers.
+- {{domxref("WorkerGlobalScope.navigator")}} {{readOnlyinline}}
+  - : Retourne le {{domxref("WorkerNavigator")}} associé au worker. `WorkerNavigator` est un objet navigator spécifique, essentiellement un sous-ensemble de {{domxref("Navigator")}} utilisé dans le contexte d'un navigateur, mais adapté aux workers.
+- {{domxref("WorkerGlobalScope.performance")}} {{readOnlyinline}} {{Non-standard_inline}}
+  - : Retourne l'objet {{domxref("Performance")}} associé au worker, qui correspond à l'objet performance normal, avec seulement à disposition un sous-ensemble de ses propriétés et méthodes.
+
+### Gestionnaires d'événement
+
+_Cette interface hérite des gestionnaires d'événement de l'interface {{domxref("WorkerGlobalScope")}}, et de son parent {{domxref("EventTarget")}}, et implémente ainsi les gestionnaires d'événement de {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, et {{domxref("WindowEventHandlers")}}._
+
+- {{domxref("DedicatedWorkerGlobalScope.onmessage")}}
+  - : C'est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsqu'un événement {{event("message")}} est déclenché. Ces événements sont du type {{domxref("MessageEvent")}} et sont appelés quand le worker reçoit un message du document qui l'a initialisé (i.e. à partir de la méthode {{domxref("Worker.postMessage")}}.)
+- {{domxref("DedicatedWorkerGlobalScope.onmessageerror")}}
+  - : C'est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsqu'un événement {{event("messageerror")}} est déclenché.
+
+## Méthodes
+
+_Cette interface hérite des méthodes de l'interface {{domxref("WorkerGlobalScope")}}, et de son parent {{domxref("EventTarget")}}, et implémente ainsi les méthodes de {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, et {{domxref("WindowEventHandlers")}}._
+
+- {{domxref("WorkerGlobalScope.close()")}}
+  - : Annule toute tâche en attente dans la boucle d'événement du `WorkerGlobalScope`, mettant alors fin à ce contexte précis.
+- {{domxref("DedicatedWorkerGlobalScope.postMessage")}}
+  - : Envoie un message — qui peut comprendre  `n'importe quel` objet JavaScript — au document parent qui a préalablement engendré le worker.
+
+### Héritées de WorkerGlobalScope
+
+- {{domxref("WorkerGlobalScope.dump()")}} {{non-standard_inline}}
+  - : Écrit un message dans la console.
+- {{domxref("WorkerGlobalScope.importScripts()")}}
+  - : Importe un ou plusieurs scripts dans le contexte du worker. Vous pouvez spécifier autant de fichiers que souhaité, en les séparant par des virgules. Par exemple: `importScripts('foo.js', 'bar.js');`
+
+### Implémentées à partir d'autres endroits
+
+- {{domxref("WindowBase64.atob()")}}
+  - : Décode une chaîne de données qui a été encodée en base-64.
+- {{domxref("WindowBase64.btoa()")}}
+  - : Crée une chaîne ASCII en base-64 à partir d'une chaîne de données binaires.
+- {{domxref("WindowTimers.clearInterval()")}}
+  - : Annule l'exécution répétée initiée par {{domxref("WindowTimers.setInterval()")}}.
+- {{domxref("WindowTimers.clearTimeout()")}}
+  - : Annule l'exécution répété initiée par {{domxref("WindowTimers.setTimeout()")}}.
+- {{domxref("WindowTimers.setInterval()")}}
+  - : Planifie l'exécution d'une fonction toutes les X millisecondes.
+- {{domxref("WindowTimers.setTimeout()")}}
+  - : Fixe un délai pour l'exécution d'une fonction.
+
+## Spécifications
+
+| Spécification                                                                                                        | Statut                           | Commentaire |
+| -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- |
+| {{SpecName('HTML WHATWG', '#dedicatedworkerglobalscope', 'DedicatedWorkerGlobalScope')}} | {{Spec2('HTML WHATWG')}} |             |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.DedicatedWorkerGlobalScope")}}
+
+## Voir aussi
+
+- {{domxref("Worker")}}
+- {{domxref("WorkerGlobalScope")}}
+- [Utilisation des web workers](/fr/docs/Web/Guide/Performance/Using_web_workers)
+- [Fonctions et classes disponibles dans les Web Workers](/fr/docs/Web/Guide/Needs_categorization/Functions_available_to_workers)
diff --git a/files/fr/web/api/dedicatedworkerglobalscope/name/index.md b/files/fr/web/api/dedicatedworkerglobalscope/name/index.md
index fb63f1cc74..1082fed843 100644
--- a/files/fr/web/api/dedicatedworkerglobalscope/name/index.md
+++ b/files/fr/web/api/dedicatedworkerglobalscope/name/index.md
@@ -9,53 +9,44 @@ tags:
   - Worker
 translation_of: Web/API/DedicatedWorkerGlobalScope/name
 ---
-<div>{{APIRef("Web Workers API")}}</div>
+{{APIRef("Web Workers API")}}
 
-<p>La propriété en lecture seule <code><strong>name</strong></code> de l'interface {{domxref("DedicatedWorkerGlobalScope")}} renvoie le nom qui a été (facultativement) donné au  {{domxref("Worker")}} lors de sa création. C'est le nom que le constructeur {{domxref("Worker.Worker", "Worker()")}} peut transmettre pour obtenir une référence à {{domxref("DedicatedWorkerGlobalScope")}}.</p>
+La propriété en lecture seule **`name`** de l'interface {{domxref("DedicatedWorkerGlobalScope")}} renvoie le nom qui a été (facultativement) donné au  {{domxref("Worker")}} lors de sa création. C'est le nom que le constructeur {{domxref("Worker.Worker", "Worker()")}} peut transmettre pour obtenir une référence à {{domxref("DedicatedWorkerGlobalScope")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var nameObj = self.name;</pre>
+    var nameObj = self.name;
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>Une {{domxref("DOMString")}} (<em>chaîne de caractères</em>).</p>
+Une {{domxref("DOMString")}} (_chaîne de caractères_).
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Un worker est créé en utilisant un constructeur avec une option de <code>name</code> :</p>
+Un worker est créé en utilisant un constructeur avec une option de `name` :
 
-<pre class="brush: js">var myWorker = new Worker("worker.js", { name : "myWorker" });</pre>
+```js
+var myWorker = new Worker("worker.js", { name : "myWorker" });
+```
 
-<p>le {{domxref("DedicatedWorkerGlobalScope")}} aura désormais le nom de "myWorker", qui peut être renvoyé pendant l'exécution</p>
+le {{domxref("DedicatedWorkerGlobalScope")}} aura désormais le nom de "myWorker", qui peut être renvoyé pendant l'exécution
 
-<pre class="brush: js">self.name</pre>
+```js
+self.name
+```
 
-<p>à l'intérieur du worker.</p>
+à l'intérieur du worker.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', '#dom-dedicatedworkerglobalscope-name', 'name')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                        | Statut                           | Commentaire |
+| ---------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- |
+| {{SpecName('HTML WHATWG', '#dom-dedicatedworkerglobalscope-name', 'name')}} | {{Spec2('HTML WHATWG')}} |             |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.DedicatedWorkerGlobalScope.name")}}</p>
+{{Compat("api.DedicatedWorkerGlobalScope.name")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("DedicatedWorkerGlobalScope")}}</li>
-</ul>
+- {{domxref("DedicatedWorkerGlobalScope")}}
diff --git a/files/fr/web/api/devicemotionevent/accelerationincludinggravity/index.md b/files/fr/web/api/devicemotionevent/accelerationincludinggravity/index.md
index 64ab8dff1d..b2ac98e787 100644
--- a/files/fr/web/api/devicemotionevent/accelerationincludinggravity/index.md
+++ b/files/fr/web/api/devicemotionevent/accelerationincludinggravity/index.md
@@ -11,61 +11,43 @@ tags:
   - axes
 translation_of: Web/API/DeviceMotionEvent/accelerationIncludingGravity
 ---
-<p>{{ ApiRef("Device Orientation Events") }}</p>
+{{ ApiRef("Device Orientation Events") }}
 
-<p>La propriété <strong><code>accelerationIncludingGravity</code></strong> renvoie la valeur d'accélération enregistrée par l'appareil, en <a href="https://fr.wikipedia.org/wiki/M%C3%A8tre_par_seconde_carr%C3%A9e">mètres par seconde au carré (m/s<sup>2</sup>)</a>. Contrairement à  {{domxref("DeviceMotionEvent.acceleration")}} qui compense pour tenir compte de l'influence de la gravité, sa valeur est la somme de l'accélération de l'appareil induite par l'utilisateur et de celle provoquée par la gravité.</p>
+La propriété **`accelerationIncludingGravity`** renvoie la valeur d'accélération enregistrée par l'appareil, en [mètres par seconde au carré (m/s<sup>2</sup>)](https://fr.wikipedia.org/wiki/M%C3%A8tre_par_seconde_carr%C3%A9e). Contrairement à  {{domxref("DeviceMotionEvent.acceleration")}} qui compense pour tenir compte de l'influence de la gravité, sa valeur est la somme de l'accélération de l'appareil induite par l'utilisateur et de celle provoquée par la gravité.
 
-<p>Cette valeur n'est pas  aussi utile que {{domxref("DeviceMotionEvent.acceleration")}}, mais elle peut être la seule disponible, par exemple pour un appareil qui ne peut supprimer la gravité des données d'accélération puisqu'il ne l'utilise pas, comme les périphériques sans gyroscope.</p>
+Cette valeur n'est pas  aussi utile que {{domxref("DeviceMotionEvent.acceleration")}}, mais elle peut être la seule disponible, par exemple pour un appareil qui ne peut supprimer la gravité des données d'accélération puisqu'il ne l'utilise pas, comme les périphériques sans gyroscope.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="eval">var acceleration = <em>instanceOfDeviceMotionEvent</em>.accelerationIncludingGravity;
-</pre>
+    var acceleration = instanceOfDeviceMotionEvent.accelerationIncludingGravity;
 
-<h2 id="Example">Valeur</h2>
+## Valeur
 
-<p>La propriété <code>accelerationIncludingGravity</code> est un objet fournissant une information sur l'accélération des 3 axes. Pour chacun d'eux, elle est représentée par leur propre propriété :</p>
+La propriété `accelerationIncludingGravity` est un objet fournissant une information sur l'accélération des 3 axes. Pour chacun d'eux, elle est représentée par leur propre propriété :
 
-<dl>
- <dt><code>x</code></dt>
- <dd>Représente l'accélération sur l'axe x qui est l'axe est-ouest.</dd>
- <dt><code>y</code></dt>
- <dd>Représente l'accélération sur l'axe  y qui est l'axe nord-sud</dd>
- <dt><code>z</code></dt>
- <dd>Représente l'accélération sur l'axe z qui est l'axe haut-bas</dd>
-</dl>
+- `x`
+  - : Représente l'accélération sur l'axe x qui est l'axe est-ouest.
+- `y`
+  - : Représente l'accélération sur l'axe y qui est l'axe nord-sud
+- `z`
+  - : Représente l'accélération sur l'axe z qui est l'axe haut-bas
 
-<h2 id="Spécifications">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('Device Orientation')}}</td>
-   <td>{{Spec2('Device Orientation')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                | Statut                                   | Commentaire          |
+| -------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('Device Orientation')}} | {{Spec2('Device Orientation')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.DeviceMotionEvent.accelerationIncludingGravity")}}</p>
+{{Compat("api.DeviceMotionEvent.accelerationIncludingGravity")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{ domxref("DeviceMotionEvent.acceleration") }}</li>
- <li>{{ event("devicemotion") }}</li>
- <li>{{ domxref("window.ondevicemotion") }}</li>
- <li>{{ event("deviceorientation") }}</li>
- <li>{{ domxref("DeviceOrientationEvent") }}</li>
- <li><a href="/fr/docs/WebAPI/Detecting_device_orientation#Accelerometer_values_explained">Détecter l'orientation de l'appareil</a></li>
- <li><a href="/fr/docs/Web/Guide/DOM/Events/Les_donn%C3%A9es_d_orientation_et_de_mouvement_expliqu%C3%A9es">Les données d'orientation et de mouvement expliquées</a></li>
-</ul>
+- {{ domxref("DeviceMotionEvent.acceleration") }}
+- {{ event("devicemotion") }}
+- {{ domxref("window.ondevicemotion") }}
+- {{ event("deviceorientation") }}
+- {{ domxref("DeviceOrientationEvent") }}
+- [Détecter l'orientation de l'appareil](/fr/docs/WebAPI/Detecting_device_orientation#Accelerometer_values_explained)
+- [Les données d'orientation et de mouvement expliquées](/fr/docs/Web/Guide/DOM/Events/Les_donn%C3%A9es_d_orientation_et_de_mouvement_expliqu%C3%A9es)
diff --git a/files/fr/web/api/devicemotionevent/devicemotionevent/index.md b/files/fr/web/api/devicemotionevent/devicemotionevent/index.md
index c8fa453f7e..b72ca21c2d 100644
--- a/files/fr/web/api/devicemotionevent/devicemotionevent/index.md
+++ b/files/fr/web/api/devicemotionevent/devicemotionevent/index.md
@@ -10,47 +10,43 @@ tags:
   - axes
 translation_of: Web/API/DeviceMotionEvent/DeviceMotionEvent
 ---
-<p>{{APIRef("Device Orientation Events")}}{{Non-standard_header}}</p>
-
-<p>Le constructeur <strong><code>DeviceMotionEvent</code></strong> crée un nouveau {{domxref("DeviceMotionEvent")}}.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">var deviceMotionEvent = new DeviceMotionEvent(type[, options])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><em>type</em></dt>
- <dd>Doit être <code>"devicemotion"</code>.</dd>
- <dt><em>options</em> {{optional_inline}}</dt>
- <dd><p>Les options sont les suivantes :</p>
- <ul>
-  <li><code>acceleration</code> : un  objet donnant l'accélération de l'appareil sur les 3 axes X, Y et Z. L'accélération est exprimée en <a href="https://en.wikipedia.org/wiki/Meter_per_second_squared">m/s<sup>2</sup></a>.</li>
-  <li><code>accelerationIncludingGravity</code> : un objet donnant l'accélération de l'appareil sur les 3 axes X, Y et Z avec l'effet de la gravité. L'accélération est exprimée en <a href="https://en.wikipedia.org/wiki/Meter_per_second_squared">m/s<sup>2</sup></a>.</li>
-  <li><code>rotationRate</code> : un objet donnant la vitesse de rotation du changement d'orientation de l'appareil sur les axes alpha, beta et gamma. La vitesse de rotation est exprimée en degrés par seconde.</li>
-  <li><code>interval</code> : Un nombre représentant l'intervalle de temps, en millisecondes, avant d'obtenir des données à partir de l'appareil.</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">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Device Orientation')}}</td>
-   <td>{{Spec2('Device Orientation')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.DeviceMotionEvent.DeviceMotionEvent")}}</p>
+{{APIRef("Device Orientation Events")}}{{Non-standard_header}}
+
+Le constructeur **`DeviceMotionEvent`** crée un nouveau {{domxref("DeviceMotionEvent")}}.
+
+## Syntaxe
+
+    var deviceMotionEvent = new DeviceMotionEvent(type[, options])
+
+### Paramètres
+
+- _type_
+  - : Doit être `"devicemotion"`.
+- _options_ {{optional_inline}}
+
+  - : Les options sont les suivantes :
+
+    - `acceleration` : un  objet donnant l'accélération de l'appareil sur les 3 axes X, Y et Z. L'accélération est exprimée en [m/s<sup>2</sup>](https://en.wikipedia.org/wiki/Meter_per_second_squared)
+
+      <sup>2</sup>
+
+      .
+
+    - `accelerationIncludingGravity` : un objet donnant l'accélération de l'appareil sur les 3 axes X, Y et Z avec l'effet de la gravité. L'accélération est exprimée en [m/s<sup>2</sup>](https://en.wikipedia.org/wiki/Meter_per_second_squared)
+
+      <sup>2</sup>
+
+      .
+
+    - `rotationRate` : un objet donnant la vitesse de rotation du changement d'orientation de l'appareil sur les axes alpha, beta et gamma. La vitesse de rotation est exprimée en degrés par seconde.
+    - `interval` : Un nombre représentant l'intervalle de temps, en millisecondes, avant d'obtenir des données à partir de l'appareil.
+
+## Spécifications
+
+| Spécification                                | Statut                                   | Commentaire          |
+| -------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('Device Orientation')}} | {{Spec2('Device Orientation')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.DeviceMotionEvent.DeviceMotionEvent")}}
diff --git a/files/fr/web/api/devicemotionevent/index.md b/files/fr/web/api/devicemotionevent/index.md
index 259f1c68b0..f23131a75f 100644
--- a/files/fr/web/api/devicemotionevent/index.md
+++ b/files/fr/web/api/devicemotionevent/index.md
@@ -12,71 +12,52 @@ tags:
   - TopicStub
 translation_of: Web/API/DeviceMotionEvent
 ---
-<p>{{apiref("Device Orientation Events")}}{{SeeCompatTable}}</p>
+{{apiref("Device Orientation Events")}}{{SeeCompatTable}}
 
-<h2 id="Résumé">Résumé</h2>
+## Résumé
 
-<p><code>DeviceMotionEvent</code> fournit aux développeurs Web des informations sur la vitesse des changements de position et d'orientation de l'appareil.</p>
+`DeviceMotionEvent` fournit aux développeurs Web des informations sur la vitesse des changements de position et d'orientation de l'appareil.
 
-<div class="warning">
-<p><strong>Attention :</strong> Actuellement, Firefox et Chrome ne gèrent pas les coordonnées de la même manière. Faites attention à cela lorsque vous les utilisez.</p>
-</div>
+> **Attention :** Actuellement, Firefox et Chrome ne gèrent pas les coordonnées de la même manière. Faites attention à cela lorsque vous les utilisez.
 
-<h2 id="Constructeur">Constructeur</h2>
+## Constructeur
 
-<dl>
- <dt>{{domxref("DeviceMotionEvent.DeviceMotionEvent","DeviceMotionEvent.DeviceMotionEvent()")}}</dt>
- <dd><p>Crée un nouvel <code>DeviceMotionEvent</code>.</p></dd>
-</dl>
+- {{domxref("DeviceMotionEvent.DeviceMotionEvent","DeviceMotionEvent.DeviceMotionEvent()")}}
+  - : Crée un nouvel `DeviceMotionEvent`.
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<dl>
- <dt>{{domxref("DeviceMotionEvent.acceleration")}} {{readonlyinline}}</dt>
- <dd>Un objet donnant l'accélération du dispositif sur les trois axes X, Y et Z. L'accélération est exprimée en <a href="https://en.wikipedia.org/wiki/Meter_per_second_squared">m/s<sup>2</sup></a>.</dd>
- <dt>{{domxref("DeviceMotionEvent.accelerationIncludingGravity")}} {{readonlyinline}}</dt>
- <dd>Un objet donnant l'accélération de l'appareil sur les trois axes X, Y et Z avec l'effet de la gravité. L'accélération est exprimée en <a href="https://en.wikipedia.org/wiki/Meter_per_second_squared">m/s<sup>2</sup></a>.</dd>
- <dt>{{domxref("DeviceMotionEvent.rotationRate")}} {{readonlyinline}}</dt>
- <dd>Un objet donnant le taux de changement d'orientation de l'appareil sur les trois axes d'orientation alpha, bêta et gamma. Le taux de rotation est exprimé en degrés par seconde.</dd>
- <dt>{{domxref("DeviceMotionEvent.interval")}} {{readonlyinline}}</dt>
- <dd>Nombre représentant l'intervalle de temps, en millisecondes, auquel les données sont obtenues à partir de l'appareil.</dd>
-</dl>
+- {{domxref("DeviceMotionEvent.acceleration")}} {{readonlyinline}}
+  - : Un objet donnant l'accélération du dispositif sur les trois axes X, Y et Z. L'accélération est exprimée en [m/s<sup>2</sup>](https://en.wikipedia.org/wiki/Meter_per_second_squared).
+- {{domxref("DeviceMotionEvent.accelerationIncludingGravity")}} {{readonlyinline}}
+  - : Un objet donnant l'accélération de l'appareil sur les trois axes X, Y et Z avec l'effet de la gravité. L'accélération est exprimée en [m/s<sup>2</sup>](https://en.wikipedia.org/wiki/Meter_per_second_squared).
+- {{domxref("DeviceMotionEvent.rotationRate")}} {{readonlyinline}}
+  - : Un objet donnant le taux de changement d'orientation de l'appareil sur les trois axes d'orientation alpha, bêta et gamma. Le taux de rotation est exprimé en degrés par seconde.
+- {{domxref("DeviceMotionEvent.interval")}} {{readonlyinline}}
+  - : Nombre représentant l'intervalle de temps, en millisecondes, auquel les données sont obtenues à partir de l'appareil.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">window.addEventListener('devicemotion', function(event) {
+```js
+window.addEventListener('devicemotion', function(event) {
   console.log(event.acceleration.x + ' m/s2');
-});</pre>
+});
+```
 
-<h2 id="Spécifications">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('Device Orientation')}}</td>
-   <td>{{Spec2('Device Orientation')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                | Statut                                   | Commentaire          |
+| -------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('Device Orientation')}} | {{Spec2('Device Orientation')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.DeviceMotionEvent")}}</p>
+{{Compat("api.DeviceMotionEvent")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{ event("deviceorientation") }}</li>
- <li>{{ domxref("DeviceMotionEvent") }}</li>
- <li>{{ event("devicemotion") }}</li>
- <li><a href="/fr/docs/WebAPI/Detecting_device_orientation">Détection de l'orientation de l'appareil</a></li>
- <li><a href="/fr/docs/Web/Guide/Events/Orientation_and_motion_data_explained">Explication des données d'orientation et de mouvement</a></li>
-</ul>
+- {{ event("deviceorientation") }}
+- {{ domxref("DeviceMotionEvent") }}
+- {{ event("devicemotion") }}
+- [Détection de l'orientation de l'appareil](/fr/docs/WebAPI/Detecting_device_orientation)
+- [Explication des données d'orientation et de mouvement](/fr/docs/Web/Guide/Events/Orientation_and_motion_data_explained)
diff --git a/files/fr/web/api/devicemotionevent/interval/index.md b/files/fr/web/api/devicemotionevent/interval/index.md
index 65ff85c399..80f4374fac 100644
--- a/files/fr/web/api/devicemotionevent/interval/index.md
+++ b/files/fr/web/api/devicemotionevent/interval/index.md
@@ -7,45 +7,29 @@ tags:
   - Reference
 translation_of: Web/API/DeviceMotionEvent/interval
 ---
-<p>{{apiref("Device Orientation Events")}}</p>
-
-<p>La propriété <strong><code>interval</code></strong> renvoie la granularité temporelle, exprimée en millisecondes, avec laquelle les données relatives aux mouvements sont obtenues du matériel.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">var interval = <em>instanceOfDeviceMotionEvent</em>.interval;
-</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('Device Orientation')}}</td>
-   <td>{{Spec2('Device Orientation')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.DeviceMotionEvent.interval")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{ domxref("DeviceMotionEvent") }}</li>
- <li>{{ event("devicemotion") }}</li>
- <li>{{ domxref("window.ondevicemotion") }}</li>
- <li>{{ event("deviceorientation") }}</li>
- <li>{{ domxref("DeviceOrientationEvent") }}</li>
- <li><a href="/fr/docs/WebAPI/Detecting_device_orientation">Detecting device orientation</a></li>
-</ul>
+{{apiref("Device Orientation Events")}}
+
+La propriété **`interval`** renvoie la granularité temporelle, exprimée en millisecondes, avec laquelle les données relatives aux mouvements sont obtenues du matériel.
+
+## Syntaxe
+
+    var interval = instanceOfDeviceMotionEvent.interval;
+
+## Spécifications
+
+| Spécification                                | État                                     | Commentaires |
+| -------------------------------------------- | ---------------------------------------- | ------------ |
+| {{SpecName('Device Orientation')}} | {{Spec2('Device Orientation')}} |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.DeviceMotionEvent.interval")}}
+
+## Voir aussi
+
+- {{ domxref("DeviceMotionEvent") }}
+- {{ event("devicemotion") }}
+- {{ domxref("window.ondevicemotion") }}
+- {{ event("deviceorientation") }}
+- {{ domxref("DeviceOrientationEvent") }}
+- [Detecting device orientation](/fr/docs/WebAPI/Detecting_device_orientation)
diff --git a/files/fr/web/api/devicemotionevent/rotationrate/index.md b/files/fr/web/api/devicemotionevent/rotationrate/index.md
index d12e2c76d7..8b29800840 100644
--- a/files/fr/web/api/devicemotionevent/rotationrate/index.md
+++ b/files/fr/web/api/devicemotionevent/rotationrate/index.md
@@ -10,63 +10,43 @@ tags:
   - Vitesse
 translation_of: Web/API/DeviceMotionEvent/rotationRate
 ---
-<p>{{ ApiRef("Device Orientation Events") }}</p>
+{{ ApiRef("Device Orientation Events") }}
 
-<p>La propriété <code><strong>rotationRate</strong></code> renvoie la vitesse de rotation de l'appareil autour de chacun de ses axes en degrés par seconde.</p>
+La propriété **`rotationRate`** renvoie la vitesse de rotation de l'appareil autour de chacun de ses axes en degrés par seconde.
 
-<div class="note">
-  <p><strong>Note :</strong> Si le matériel n'est pas capable de fournir cette information, la propriété renvoie <code>null</code>.</p>
-</div>
+> **Note :** Si le matériel n'est pas capable de fournir cette information, la propriété renvoie `null`.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var rates = <em>instanceOfDeviceMotionEvent</em>.rotationRate;
-</pre>
+    var rates = instanceOfDeviceMotionEvent.rotationRate;
 
-<h2 id="Valeurs">Valeurs</h2>
+## Valeurs
 
-<p>La propriété <code>rotationRates</code> est un objet en lecture seule décrivant la vitesse de rotation d'un appareil autour de chacun de ses axes :</p>
+La propriété `rotationRates` est un objet en lecture seule décrivant la vitesse de rotation d'un appareil autour de chacun de ses axes :
 
-<dl>
- <dt><code>alpha</code></dt>
- <dd>La vitesse de rotation de l'appareil sur son axe Z ; c'est-à-dire déplacé autour d'une ligne perpendiculaire à l'écran.</dd>
- <dt><code>beta</code></dt>
- <dd>La vitesse de rotation de l'appareil sur son axe X ; c'est-à-dire de l'avant vers l'arrière.</dd>
- <dt><code>gamma</code></dt>
- <dd>La vitesse de rotation de l'appareil sur son axe Y ; c'est-à-dire d'un côté à l'autre.</dd>
-</dl>
+- `alpha`
+  - : La vitesse de rotation de l'appareil sur son axe Z ; c'est-à-dire déplacé autour d'une ligne perpendiculaire à l'écran.
+- `beta`
+  - : La vitesse de rotation de l'appareil sur son axe X ; c'est-à-dire de l'avant vers l'arrière.
+- `gamma`
+  - : La vitesse de rotation de l'appareil sur son axe Y ; c'est-à-dire d'un côté à l'autre.
 
-<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('Device Orientation')}}</td>
-   <td>{{Spec2('Device Orientation')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                | État                                     | Commentaires         |
+| -------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('Device Orientation')}} | {{Spec2('Device Orientation')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.DeviceMotionEvent.rotationRate")}}</p>
+{{Compat("api.DeviceMotionEvent.rotationRate")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{ domxref("DeviceMotionEvent") }}</li>
- <li>{{ event("devicemotion") }}</li>
- <li>{{ domxref("window.ondevicemotion") }}</li>
- <li>{{ event("deviceorientation") }}</li>
- <li>{{ domxref("DeviceOrientationEvent") }}</li>
- <li><a href="/fr/docs/WebAPI/Detecting_device_orientation">Détecter l'orientation de l'appareil</a></li>
- <li><a href="/fr/docs/Web/Guide/DOM/Events/Les_donn%C3%A9es_d_orientation_et_de_mouvement_expliqu%C3%A9es">Les données d'orientation et de mouvement expliquées</a></li>
-</ul>
+- {{ domxref("DeviceMotionEvent") }}
+- {{ event("devicemotion") }}
+- {{ domxref("window.ondevicemotion") }}
+- {{ event("deviceorientation") }}
+- {{ domxref("DeviceOrientationEvent") }}
+- [Détecter l'orientation de l'appareil](/fr/docs/WebAPI/Detecting_device_orientation)
+- [Les données d'orientation et de mouvement expliquées](/fr/docs/Web/Guide/DOM/Events/Les_donn%C3%A9es_d_orientation_et_de_mouvement_expliqu%C3%A9es)
diff --git a/files/fr/web/api/devicemotioneventrotationrate/alpha/index.md b/files/fr/web/api/devicemotioneventrotationrate/alpha/index.md
index 219e4cc1e9..f6028bb6fc 100644
--- a/files/fr/web/api/devicemotioneventrotationrate/alpha/index.md
+++ b/files/fr/web/api/devicemotioneventrotationrate/alpha/index.md
@@ -14,43 +14,27 @@ translation_of: Web/API/DeviceMotionEventRotationRate/alpha
 translation_of_original: Web/API/DeviceRotationRate/alpha
 original_slug: Web/API/DeviceRotationRate/alpha
 ---
-<p>{{ ApiRef("Device Orientation Events") }}</p>
+{{ ApiRef("Device Orientation Events") }}
 
-<p>Cette propriété indique la vitesse de rotation autour de l'axe Z -- en degrés par seconde -- dans un objet {{ domxref("DeviceRotationRate") }}.</p>
+Cette propriété indique la vitesse de rotation autour de l'axe Z -- en degrés par seconde -- dans un objet {{ domxref("DeviceRotationRate") }}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var <em>alpha</em> = <em>deviceRotationRate</em>.alpha;
-</pre>
+    var alpha = deviceRotationRate.alpha;
 
-<p>Cette propriété est en lecture seule.</p>
+Cette propriété est en lecture seule.
 
-<h3 id="Return_Value">Valeur retournée</h3>
+### Valeur retournée
 
-<dl>
- <dt><code>alpha</code></dt>
- <dd>Un <code>double</code> indiquant la vitesse de rotation autour de l'axe Z, en degrés par seconde. Voir <a href="/fr/docs/WebAPI/Detecting_device_orientation#Accelerometer_values_explained">Détecter l'orientation de l'appareil</a> pour plus de détails.</dd>
-</dl>
+- `alpha`
+  - : Un `double` indiquant la vitesse de rotation autour de l'axe Z, en degrés par seconde. Voir [Détecter l'orientation de l'appareil](/fr/docs/WebAPI/Detecting_device_orientation#Accelerometer_values_explained) pour plus de détails.
 
-<h2 id="Spécifications">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('Device Orientation')}}</td>
-   <td>{{Spec2('Device Orientation')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                | Statut                                   | Commentaire          |
+| -------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('Device Orientation')}} | {{Spec2('Device Orientation')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.DeviceMotionEventRotationRate.alpha")}}</p>
+{{Compat("api.DeviceMotionEventRotationRate.alpha")}}
diff --git a/files/fr/web/api/devicemotioneventrotationrate/beta/index.md b/files/fr/web/api/devicemotioneventrotationrate/beta/index.md
index a5868c5ca1..ba8e241fa6 100644
--- a/files/fr/web/api/devicemotioneventrotationrate/beta/index.md
+++ b/files/fr/web/api/devicemotioneventrotationrate/beta/index.md
@@ -14,43 +14,27 @@ translation_of: Web/API/DeviceMotionEventRotationRate/beta
 translation_of_original: Web/API/DeviceRotationRate/beta
 original_slug: Web/API/DeviceRotationRate/beta
 ---
-<p>{{ ApiRef("Device Orientation Events") }}</p>
+{{ ApiRef("Device Orientation Events") }}
 
-<p>Cette propriété indique la vitesse de rotation autour de l'axe X -- en degrés par seconde -- dans un objet {{ domxref("DeviceRotationRate") }}.</p>
+Cette propriété indique la vitesse de rotation autour de l'axe X -- en degrés par seconde -- dans un objet {{ domxref("DeviceRotationRate") }}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var <em>beta</em> = <em>deviceRotationRate</em>.beta;
-</pre>
+    var beta = deviceRotationRate.beta;
 
-<p>Cette propriété est en lecture seule.</p>
+Cette propriété est en lecture seule.
 
-<h3 id="Valeur_retournée">Valeur retournée</h3>
+### Valeur retournée
 
-<dl>
- <dt><code>beta</code></dt>
- <dd>Un <code>double</code> indiquant la vitesse de rotation autour de l'axe X, en degrés par seconde. Voir <a href="/fr/docs/WebAPI/Detecting_device_orientation#Accelerometer_values_explained">Détecter l'orientation de l'appareil</a> pour plus de détails.</dd>
-</dl>
+- `beta`
+  - : Un `double` indiquant la vitesse de rotation autour de l'axe X, en degrés par seconde. Voir [Détecter l'orientation de l'appareil](/fr/docs/WebAPI/Detecting_device_orientation#Accelerometer_values_explained) pour plus de détails.
 
-<h2 id="Spécifications">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('Device Orientation')}}</td>
-   <td>{{Spec2('Device Orientation')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                | Statut                                   | Commentaire          |
+| -------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('Device Orientation')}} | {{Spec2('Device Orientation')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.DeviceMotionEventRotationRate.beta")}}</p>
+{{Compat("api.DeviceMotionEventRotationRate.beta")}}
diff --git a/files/fr/web/api/devicemotioneventrotationrate/gamma/index.md b/files/fr/web/api/devicemotioneventrotationrate/gamma/index.md
index 09b40183ba..53c7922124 100644
--- a/files/fr/web/api/devicemotioneventrotationrate/gamma/index.md
+++ b/files/fr/web/api/devicemotioneventrotationrate/gamma/index.md
@@ -14,43 +14,27 @@ translation_of: Web/API/DeviceMotionEventRotationRate/gamma
 translation_of_original: Web/API/DeviceRotationRate/gamma
 original_slug: Web/API/DeviceRotationRate/gamma
 ---
-<p>{{ ApiRef("Device Orientation Events") }}</p>
+{{ ApiRef("Device Orientation Events") }}
 
-<p>Cette propriété indique la vitesse de rotation autour de l'axe Y -- en degrés par seconde -- dans un objet {{ domxref("DeviceRotationRate") }}.</p>
+Cette propriété indique la vitesse de rotation autour de l'axe Y -- en degrés par seconde -- dans un objet {{ domxref("DeviceRotationRate") }}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var <em>gamma</em> = <em>deviceRotationRate</em>.gamma;
-</pre>
+    var gamma = deviceRotationRate.gamma;
 
-<p>Cette propriété est en lecture seule.</p>
+Cette propriété est en lecture seule.
 
-<h3 id="Return_Value">Valeur retournée</h3>
+### Valeur retournée
 
-<dl>
- <dt><code>gamma</code></dt>
- <dd>Un <code>double</code> indiquant la vitesse de rotation autour de l'axe Y, en degrés par seconde. Voir <a href="/fr/docs/WebAPI/Detecting_device_orientation#Accelerometer_values_explained">Détecter l'orientation d'un appareil</a> pour plus de détails.</dd>
-</dl>
+- `gamma`
+  - : Un `double` indiquant la vitesse de rotation autour de l'axe Y, en degrés par seconde. Voir [Détecter l'orientation d'un appareil](/fr/docs/WebAPI/Detecting_device_orientation#Accelerometer_values_explained) pour plus de détails.
 
-<h2 id="Spécifications">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('Device Orientation')}}</td>
-   <td>{{Spec2('Device Orientation')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                | Statut                                   | Commentaire          |
+| -------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('Device Orientation')}} | {{Spec2('Device Orientation')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.DeviceMotionEventRotationRate.gamma")}}</p>
+{{Compat("api.DeviceMotionEventRotationRate.gamma")}}
diff --git a/files/fr/web/api/devicemotioneventrotationrate/index.md b/files/fr/web/api/devicemotioneventrotationrate/index.md
index fb363b6c54..a1a2ea317f 100644
--- a/files/fr/web/api/devicemotioneventrotationrate/index.md
+++ b/files/fr/web/api/devicemotioneventrotationrate/index.md
@@ -12,40 +12,25 @@ translation_of: Web/API/DeviceMotionEventRotationRate
 translation_of_original: Web/API/DeviceRotationRate
 original_slug: Web/API/DeviceRotationRate
 ---
-<p>{{ ApiRef("Device Orientation Events") }} {{SeeCompatTable}}</p>
+{{ ApiRef("Device Orientation Events") }} {{SeeCompatTable}}
 
-<p>Un objet <code>DeviceRotationRate</code> fournit une information sur la vitesse avec laquelle un appareil est en rotation autour des 3 axes.</p>
+Un objet `DeviceRotationRate` fournit une information sur la vitesse avec laquelle un appareil est en rotation autour des 3 axes.
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<dl>
- <dt>{{ domxref("DeviceRotationRate.alpha") }} {{readonlyInline}}</dt>
- <dd>La vitesse de rotation autour de l'axe Z, en degrés par seconde.</dd>
- <dt>{{ domxref("DeviceRotationRate.beta") }} {{readonlyInline}}</dt>
- <dd>La vitesse de rotation autour de l'axe X, en degrés par seconde.</dd>
- <dt>{{ domxref("DeviceRotationRate.gamma") }} {{readonlyInline}}</dt>
- <dd>La vitesse de rotation autour de l'axe Y, en degrés par seconde.</dd>
-</dl>
+- {{ domxref("DeviceRotationRate.alpha") }} {{readonlyInline}}
+  - : La vitesse de rotation autour de l'axe Z, en degrés par seconde.
+- {{ domxref("DeviceRotationRate.beta") }} {{readonlyInline}}
+  - : La vitesse de rotation autour de l'axe X, en degrés par seconde.
+- {{ domxref("DeviceRotationRate.gamma") }} {{readonlyInline}}
+  - : La vitesse de rotation autour de l'axe Y, en degrés par seconde.
 
-<h2 id="Spécifications">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('Device Orientation')}}</td>
-   <td>{{Spec2('Device Orientation')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                | Statut                                   | Commentaire          |
+| -------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('Device Orientation')}} | {{Spec2('Device Orientation')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.DeviceMotionEventRotationRate")}}</p>
+{{Compat("api.DeviceMotionEventRotationRate")}}
diff --git a/files/fr/web/api/deviceorientationevent/absolute/index.md b/files/fr/web/api/deviceorientationevent/absolute/index.md
index 9feaac1fdd..6fead5a4c6 100644
--- a/files/fr/web/api/deviceorientationevent/absolute/index.md
+++ b/files/fr/web/api/deviceorientationevent/absolute/index.md
@@ -4,52 +4,34 @@ slug: Web/API/DeviceOrientationEvent/absolute
 translation_of: Web/API/DeviceOrientationEvent/absolute
 original_slug: Web/API/DeviceOrientationEvent.absolute
 ---
-<p>{{ ApiRef() }}</p>
+{{ ApiRef() }}
 
-<p>Indique si l'appareil partage des données en référentiel absolut c'est à dire sur avec des cordonnées issu du référentiel terrestre, ou si il partage des données utilisant un référentiel arbitraire déterminé par l'appareil. Voir <a href="/en/DOM/Orientation_and_motion_data_explained">Orientation et mouvement expliqué</a> pour plus de détails.</p>
+Indique si l'appareil partage des données en référentiel absolut c'est à dire sur avec des cordonnées issu du référentiel terrestre, ou si il partage des données utilisant un référentiel arbitraire déterminé par l'appareil. Voir [Orientation et mouvement expliqué](/en/DOM/Orientation_and_motion_data_explained) pour plus de détails.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="eval">var absolute = <em>instanceOfDeviceOrientationEvent</em>.absolute;
-</pre>
+    var absolute = instanceOfDeviceOrientationEvent.absolute;
 
-<p><code>DeviceOrientationEvent.absolute</code> retourne un booléen :</p>
+`DeviceOrientationEvent.absolute` retourne un booléen :
 
-<ul>
- <li><code>true</code> : si les données d'orientation dans <code>instanceOfDeviceOrientationEvent</code> est proposer dans un référentiel terrestre.</li>
- <li><code>false</code> : si les données d'orientation utilisent un référentiel arbitraire.</li>
-</ul>
+- `true` : si les données d'orientation dans `instanceOfDeviceOrientationEvent` est proposer dans un référentiel terrestre.
+- `false` : si les données d'orientation utilisent un référentiel arbitraire.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statuts</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('Device Orientation')}}</td>
-   <td>{{Spec2('Device Orientation')}}</td>
-   <td>Initial specification.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                | Statuts                                  | Commentaires           |
+| -------------------------------------------- | ---------------------------------------- | ---------------------- |
+| {{SpecName('Device Orientation')}} | {{Spec2('Device Orientation')}} | Initial specification. |
 
-<h2 id="Compatibilité_entre_les_navigateurs">Compatibilité entre les navigateurs</h2>
+## Compatibilité entre les navigateurs
 
-<p>{{ page("/en-US/docs/Web/API/DeviceOrientationEvent","Browser_compatibility") }}</p>
+{{ page("/en-US/docs/Web/API/DeviceOrientationEvent","Browser_compatibility") }}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{ domxref("DeviceOrientationEvent") }}</li>
- <li><a href="/en/Detecting_device_orientation">Detecting device orientation</a></li>
- <li><a href="/en/DOM/Orientation_and_motion_data_explained">Orientation and motion data explained</a></li>
- <li>{{ domxref("window.ondeviceorientation") }}</li>
-</ul>
+- {{ domxref("DeviceOrientationEvent") }}
+- [Detecting device orientation](/en/Detecting_device_orientation)
+- [Orientation and motion data explained](/en/DOM/Orientation_and_motion_data_explained)
+- {{ domxref("window.ondeviceorientation") }}
 
-<p>{{ event("deviceorientation") }}</p>
+{{ event("deviceorientation") }}
diff --git a/files/fr/web/api/deviceorientationevent/index.md b/files/fr/web/api/deviceorientationevent/index.md
index fed84dfd6d..4c0b77dcab 100644
--- a/files/fr/web/api/deviceorientationevent/index.md
+++ b/files/fr/web/api/deviceorientationevent/index.md
@@ -13,65 +13,47 @@ tags:
   - évènements
 translation_of: Web/API/DeviceOrientationEvent
 ---
-<p>{{ApiRef}}{{SeeCompatTable}}</p>
-<h2 id="Sommaire">Sommaire</h2>
-<p>L'évènement <code>DeviceOrientationEvent</code> met à la disposition du développeur des informations sur l'orientation de l'appareil visitant une page Web</p>
-<div class="warning">
- <p><strong>Attention :</strong> à l'heure actuelle, Firefox et Chrome ne gèrent pas les cordonnées de la même façon. Tenez-en compte lors de l'utilisation de cette API.</p>
-</div>
-<h2 id="Propriétés">Propriétés</h2>
-<dl>
- <dt>
-  {{domxref("DeviceOrientationEvent.absolute")}} {{readonlyinline}}</dt>
- <dd>
-  Un booléen, indiquant si l'appareil partage les informations sur son orientation absolue.</dd>
- <dt>
-  {{domxref("DeviceOrientationEvent.alpha")}} {{readonlyinline}}</dt>
- <dd>
-  Un nombre, représentant le mouvement de l'appareil sur l'axe « z » exprimé en degrés sur une échelle de 0° à 360°.</dd>
- <dt>
-  {{domxref("DeviceOrientationEvent.beta")}} {{readonlyinline}}</dt>
- <dd>
-  Un Nombre représentant le déplacement de l'appareil sur l'axe « x », exprimé en degrés sur une échelle de -180° à 180°.</dd>
- <dt>
-  {{domxref("DeviceOrientationEvent.gamma")}} {{readonlyinline}}</dt>
- <dd>
-  Un nombre représentant le déplacement de l'appareil sur l'axe « y », exprimé en degrés sur une échelle de -90° à 90°.</dd>
-</dl>
-<h2 id="Exemple">Exemple</h2>
-<pre class="brush: js">window.addEventListener('deviceorientation', function(event) {
+{{ApiRef}}{{SeeCompatTable}}
+
+## Sommaire
+
+L'évènement `DeviceOrientationEvent` met à la disposition du développeur des informations sur l'orientation de l'appareil visitant une page Web
+
+> **Attention :** à l'heure actuelle, Firefox et Chrome ne gèrent pas les cordonnées de la même façon. Tenez-en compte lors de l'utilisation de cette API.
+
+## Propriétés
+
+- {{domxref("DeviceOrientationEvent.absolute")}} {{readonlyinline}}
+  - : Un booléen, indiquant si l'appareil partage les informations sur son orientation absolue.
+- {{domxref("DeviceOrientationEvent.alpha")}} {{readonlyinline}}
+  - : Un nombre, représentant le mouvement de l'appareil sur l'axe « z » exprimé en degrés sur une échelle de 0° à 360°.
+- {{domxref("DeviceOrientationEvent.beta")}} {{readonlyinline}}
+  - : Un Nombre représentant le déplacement de l'appareil sur l'axe « x », exprimé en degrés sur une échelle de -180° à 180°.
+- {{domxref("DeviceOrientationEvent.gamma")}} {{readonlyinline}}
+  - : Un nombre représentant le déplacement de l'appareil sur l'axe « y », exprimé en degrés sur une échelle de -90° à 90°.
+
+## Exemple
+
+```js
+window.addEventListener('deviceorientation', function(event) {
   console.log("z : " + event.alpha + "\n x : " + event.beta + "\n y : " + event.gamma);
-});</pre>
+});
+```
 
-<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">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('Device Orientation')}}</td>
-   <td>{{Spec2('Device Orientation')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                | Statut                                   | Commentaires         |
+| -------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('Device Orientation')}} | {{Spec2('Device Orientation')}} | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.DeviceMotionEvent")}}</p>
+{{Compat("api.DeviceMotionEvent")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{ event("deviceorientation") }}</li>
- <li>{{ domxref("DeviceMotionEvent") }}</li>
- <li>{{ event("devicemotion") }}</li>
- <li><a href="/en-US/docs/WebAPI/Detecting_device_orientation">Detecting device orientation</a></li>
- <li><a href="/en/DOM/Orientation_and_motion_data_explained">Orientation and motion data explained</a></li>
-</ul>
+- {{ event("deviceorientation") }}
+- {{ domxref("DeviceMotionEvent") }}
+- {{ event("devicemotion") }}
+- [Detecting device orientation](/en-US/docs/WebAPI/Detecting_device_orientation)
+- [Orientation and motion data explained](/en/DOM/Orientation_and_motion_data_explained)
diff --git a/files/fr/web/api/document/activeelement/index.md b/files/fr/web/api/document/activeelement/index.md
index 2b09fac218..89a9f037c9 100644
--- a/files/fr/web/api/document/activeelement/index.md
+++ b/files/fr/web/api/document/activeelement/index.md
@@ -7,15 +7,20 @@ translation_of: Web/API/DocumentOrShadowRoot/activeElement
 translation_of_original: Web/API/Document/activeElement
 original_slug: Web/API/DocumentOrShadowRoot/activeElement
 ---
-<p>{{ ApiRef() }}</p>
-<h3 id="R.C3.A9sum.C3.A9">Résumé</h3>
-<p>Renvoie l'élément qui dispose actuellement du focus.</p>
-<p>{{ Note("Cet attribut fait partie de la spécification HTML 5 encore en développement.") }}</p>
-<h3 id="Syntaxe">Syntaxe</h3>
-<pre class="eval">var elemCourant = document.activeElement;
-</pre>
-<h3 id="Exemple">Exemple</h3>
-<h3 id="Sp.C3.A9cification">Spécification</h3>
-<ul>
- <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#focus-management">Focus management</a> (brouillon de travail HTML 5)</li>
-</ul>
\ No newline at end of file
+{{ ApiRef() }}
+
+### Résumé
+
+Renvoie l'élément qui dispose actuellement du focus.
+
+{{ Note("Cet attribut fait partie de la spécification HTML 5 encore en développement.") }}
+
+### Syntaxe
+
+    var elemCourant = document.activeElement;
+
+### Exemple
+
+### Spécification
+
+- [Focus management](http://www.whatwg.org/specs/web-apps/current-work/#focus-management) (brouillon de travail HTML 5)
diff --git a/files/fr/web/api/document/adoptnode/index.md b/files/fr/web/api/document/adoptnode/index.md
index 3c5270aa80..e4070ea67c 100644
--- a/files/fr/web/api/document/adoptnode/index.md
+++ b/files/fr/web/api/document/adoptnode/index.md
@@ -10,59 +10,50 @@ tags:
   - Propriétaire
 translation_of: Web/API/Document/adoptNode
 ---
-<div>{{ ApiRef("DOM") }}</div>
+{{ ApiRef("DOM") }}
 
-<div> </div>
+Adopte un noeud. Le noeud (et son sous-arbre) est supprimé du document dans lequel il se trouve (le cas échéant) et son [`ownerDocument`](/fr/docs/Web/API/Node/ownerDocument) (_document propriétaire_) est remplacé par le document en cours. Le noeud peut ensuite être inséré dans le document en cours.
 
-<p>Adopte un noeud. Le noeud (et son sous-arbre) est supprimé du document dans lequel il se trouve (le cas échéant) et son  <code><a href="/fr/docs/Web/API/Node/ownerDocument">ownerDocument</a></code>  (<em>document propriétaire</em>) est remplacé par le document en cours. Le noeud peut ensuite être inséré dans le document en cours.</p>
+**Pris en charge depuis Gecko 1.9 (Firefox 3)**
 
-<p><strong>Pris en charge depuis Gecko 1.9 (Firefox 3)</strong></p>
+## Syntaxe
 
-<h2 id="Syntax">Syntaxe</h2>
+    node = document.adoptNode(externalNode);
 
-<pre><var>node</var> = <em>document</em>.adoptNode(<var>externalNode</var>);
-</pre>
+- ` node`
+  - : est le noeud adopté  qui a maintenant ce document en tant que son [`ownerDocument`](/en-US/docs/DOM/Node.ownerDocument) (_document propriétaire_). Le [`parentNode`](/en-US/docs/DOM/Node.parentNode) du noeud est `null`, car il n'a pas encore été inséré dans l'arborescence du document.  Notez que `node` et `externalNode` sont le même objet après cet appel.
+- `externalNode`
+  - : est le noeud à adopter existant dans un autre document.
 
-<dl>
- <dt><code>   node</code></dt>
- <dd>est le noeud adopté  qui a maintenant ce document en tant que son <code><a href="/en-US/docs/DOM/Node.ownerDocument">ownerDocument</a></code> (<em>document propriétaire</em>). Le <a href="/en-US/docs/DOM/Node.parentNode"><code>parentNode</code></a> du noeud est <code>null</code>, car il n'a pas encore été inséré dans l'arborescence du document.  Notez que <code>node</code> et <code>externalNode</code> sont le même objet après cet appel.   </dd>
- <dt><code>externalNode</code></dt>
- <dd>est le noeud à adopter existant dans un autre document.</dd>
-</dl>
+## Exemple
 
-<h2 id="Example">Exemple</h2>
-
-<pre class="brush: js">var iframe = document.getElementById('my-iframe');
+```js
+var iframe = document.getElementById('my-iframe');
 var iframeImages = iframe.contentDocument.getElementsByTagName('img');
 
 var newParent = document.getElementByTagName('images');
 
-for (var i = 0; i &lt; iframeImages.length; i++) {
+for (var i = 0; i < iframeImages.length; i++) {
     newParent.appendChild(document.adoptNode(iframeImages[i]));
 }
-</pre>
-
-<h2 id="Notes">Notes</h2>
+```
 
-<p>En général l'appel de <code>adoptNode</code> peut échouer en raison du nœud source provenant d'une implémentation différente, mais cela ne devrait pas poser de problème avec les implémentations du navigateur.</p>
+## Notes
 
-<p></p><p>Les nœuds provenant de documents externes doivent être clonés à l'aide de <a href="/fr/docs/Web/API/Document/importNode"><code>document.importNode()</code></a> (ou adoptés avec
-    <a href="/fr/docs/Web/API/Document/adoptNode"><code>document.adoptNode()</code></a>) avant de pouvoir être insérés dans le document courant. Pour en savoir plus sur les problèmes
-    de <a href="/fr/docs/Web/API/Node/ownerDocument"><code>Node.ownerDocument</code></a>, consultez la <a href="http://www.w3.org/DOM/faq.html#ownerdoc" rel="noopener">FAQ DOM du W3C</a> (en anglais).</p>
+En général l'appel de `adoptNode` peut échouer en raison du nœud source provenant d'une implémentation différente, mais cela ne devrait pas poser de problème avec les implémentations du navigateur.
 
-    <p>Gecko n'obligeait pas à utiliser <a href="/fr/docs/Web/API/Document/importNode"><code>document.importNode()</code></a> et <a href="/fr/docs/Web/API/Document/adoptNode"><code>document.adoptNode()</code></a> avant sa version 1.9. Depuis les versions 1.9
-    alphas, si un nœud n'est pas adopté ou importé avant d'être utilisé dans un autre document, l'exception
-    <code>WRONG_DOCUMENT_ERR</code> est déclenchée (<code>NS_ERROR_DOM_WRONG_DOCUMENT_ERR</code>). implémentation dans le <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=47903" rel="noopener">bug 47903</a>.</p><p></p>
+Les nœuds provenant de documents externes doivent être clonés à l'aide de [`document.importNode()`](/fr/docs/Web/API/Document/importNode) (ou adoptés avec
+[`document.adoptNode()`](/fr/docs/Web/API/Document/adoptNode)) avant de pouvoir être insérés dans le document courant. Pour en savoir plus sur les problèmes
+de [`Node.ownerDocument`](/fr/docs/Web/API/Node/ownerDocument), consultez la [FAQ DOM du W3C](http://www.w3.org/DOM/faq.html#ownerdoc) (en anglais).
 
+Gecko n'obligeait pas à utiliser [`document.importNode()`](/fr/docs/Web/API/Document/importNode) et [`document.adoptNode()`](/fr/docs/Web/API/Document/adoptNode) avant sa version 1.9. Depuis les versions 1.9
+alphas, si un nœud n'est pas adopté ou importé avant d'être utilisé dans un autre document, l'exception
+`WRONG_DOCUMENT_ERR` est déclenchée (`NS_ERROR_DOM_WRONG_DOCUMENT_ERR`). implémentation dans le [bug 47903](https://bugzilla.mozilla.org/show_bug.cgi?id=47903).
 
-<h2 id="Specification">Spécification</h2>
+## Spécification
 
-<ul>
- <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#Document3-adoptNode">DOM Level 3 Core: Document.adoptNode</a></li>
-</ul>
+- [DOM Level 3 Core: Document.adoptNode](http://www.w3.org/TR/DOM-Level-3-Core/core.html#Document3-adoptNode)
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/en-US/docs/DOM/document.importNode">document.importNode</a></li>
-</ul>
+- [document.importNode](/en-US/docs/DOM/document.importNode)
diff --git a/files/fr/web/api/document/alinkcolor/index.md b/files/fr/web/api/document/alinkcolor/index.md
index 5f8b845548..fcec44ba01 100644
--- a/files/fr/web/api/document/alinkcolor/index.md
+++ b/files/fr/web/api/document/alinkcolor/index.md
@@ -9,28 +9,27 @@ tags:
   - Reference
 translation_of: Web/API/Document/alinkColor
 ---
-<div>{{APIRef("DOM")}}{{Deprecated_header}}</div>
+{{APIRef("DOM")}}{{Deprecated_header}}
 
-<p>Retourne ou définit la couleur d'un lien actif dans le corps du document. Un lien hypertexte est actif durant le temps entre les événements <code>mousedown</code> et <code>mouseup</code>.</p>
+Retourne ou définit la couleur d'un lien actif dans le corps du document. Un lien hypertexte est actif durant le temps entre les événements `mousedown` et `mouseup`.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var <var>color</var> = <var>document</var>.alinkColor;
-<var>document</var>.alinkColor = <var>color</var>;
-</pre>
+    var color = document.alinkColor;
+    document.alinkColor = color;
 
-<p><var>color</var> est un echaîne de caractère contenant le nom de la couleur en anglais(exemple., <code>blue</code> pour bleu, <code>darkblue</code> pour bleu foncé, etc.) ou la valeur hexadécimal de la couleur (exemple, <code>#0000FF</code>)</p>
+*color* est un echaîne de caractère contenant le nom de la couleur en anglais(exemple., `blue` pour bleu, `darkblue` pour bleu foncé, etc.) ou la valeur hexadécimal de la couleur (exemple, `#0000FF`)
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p>La valeur par défaut pour cette propriété est rouge (<code>#ee000</code> en hexadécimal) sur Mozilla Firefox.</p>
+La valeur par défaut pour cette propriété est rouge (`#ee000` en hexadécimal) sur Mozilla Firefox.
 
-<p><code>document.alinkColor</code> est obsolète dans <a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268">DOM Level 2 HTML</a> (lien en anglais). Une alternative est le sélecteur CSS {{Cssxref(":active")}}.</p>
+`document.alinkColor` est obsolète dans [DOM Level 2 HTML](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268) (lien en anglais). Une alternative est le sélecteur CSS {{Cssxref(":active")}}.
 
-<p>Une autre alternative est <code>document.body.aLink</code>, même si elle est <a href="http://www.w3.org/TR/html401/struct/global.html#adef-alink">obsolète dans HTML 4.01</a> (lien en anglais) en faveur de l'alternative CSS ci-dessus.</p>
+Une autre alternative est `document.body.aLink`, même si elle est [obsolète dans HTML 4.01](http://www.w3.org/TR/html401/struct/global.html#adef-alink) (lien en anglais) en faveur de l'alternative CSS ci-dessus.
 
-<p><a href="/fr/docs/Mozilla/Gecko">Gecko </a>supporte <code>alinkColor</code>/<code>:active</code> et {{Cssxref(":focus")}}. Internet Explorer 6 et 7 supportent <code>alinkColor</code>/<code>:active</code> seulement pour la <a href="/fr/docs/Web/HTML/Element/a">balise HTML des liens (&lt;a&gt;)</a> et le comportement est le même que <code>:focus</code> sur Gecko. Il n'y a pas de support pour <code>:focus</code> sur IE.</p>
+[Gecko ](/fr/docs/Mozilla/Gecko)supporte `alinkColor`/`:active` et {{Cssxref(":focus")}}. Internet Explorer 6 et 7 supportent `alinkColor`/`:active` seulement pour la [balise HTML des liens (\<a>)](/fr/docs/Web/HTML/Element/a) et le comportement est le même que `:focus` sur Gecko. Il n'y a pas de support pour `:focus` sur IE.
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Document.alinkColor")}}</p>
+{{Compat("api.Document.alinkColor")}}
diff --git a/files/fr/web/api/document/anchors/index.md b/files/fr/web/api/document/anchors/index.md
index ea16e0f96f..dca923de8e 100644
--- a/files/fr/web/api/document/anchors/index.md
+++ b/files/fr/web/api/document/anchors/index.md
@@ -4,35 +4,36 @@ slug: Web/API/Document/anchors
 translation_of: Web/API/Document/anchors
 original_slug: Web/API/Document/Document.anchors
 ---
-<div>{{APIRef("DOM")}} {{deprecated_header()}}</div>
+{{APIRef("DOM")}} {{deprecated_header()}}
 
-<p><code>anchors</code> retourne une liste de toutes les ancres du document.</p>
+`anchors` retourne une liste de toutes les ancres du document.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var>nodeList</var> = document.anchors;
-</pre>
+    nodeList = document.anchors;
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush:js">if ( document.anchors.length &gt;= 5 ) {
+```js
+if ( document.anchors.length >= 5 ) {
   dump("Trop d'ancres trouvées !");
   window.location = "http://www.google.com";
 }
-</pre>
+```
 
-<p>L'exemple suivant remplit un tableau avec chaque ancre présente sur la page :</p>
+L'exemple suivant remplit un tableau avec chaque ancre présente sur la page :
 
-<pre class="brush:html">&lt;!DOCTYPE html&gt;
-&lt;html lang="en"&gt;
-&lt;head&gt;
-&lt;meta charset="UTF-8" /&gt;
-&lt;title&gt;Test&lt;/title&gt;
-&lt;script&gt;
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8" />
+<title>Test</title>
+<script>
 function init() {
   var toc = document.getElementById("toc");
   var i, li, newAnchor;
-  for (i = 0; i &lt; document.anchors.length; i++) {
+  for (i = 0; i < document.anchors.length; i++) {
     li = document.createElement("li");
     newAnchor = document.createElement('a');
     newAnchor.href = "#" + document.anchors[i].name;
@@ -41,41 +42,39 @@ function init() {
     toc.appendChild(li);
   }
 }
-&lt;/script&gt;
+</script>
 
-&lt;/head&gt;
-&lt;body onload="init()"&gt;
+</head>
+<body onload="init()">
 
-&lt;h1&gt;Title&lt;/h1&gt;
-&lt;h2&gt;&lt;a name="contents"&gt;Contents&lt;/a&gt;&lt;/h2&gt;
-&lt;ul id="toc"&gt;&lt;/ul&gt;
+<h1>Title</h1>
+<h2><a name="contents">Contents</a></h2>
+<ul id="toc"></ul>
 
-&lt;h2&gt;&lt;a name="plants"&gt;Plants&lt;/a&gt;&lt;/h2&gt;
-&lt;ol&gt;
-    &lt;li&gt;Apples&lt;/li&gt;
-    &lt;li&gt;Oranges&lt;/li&gt;
-    &lt;li&gt;Pears&lt;/li&gt;
-&lt;/ol&gt;
+<h2><a name="plants">Plants</a></h2>
+<ol>
+    <li>Apples</li>
+    <li>Oranges</li>
+    <li>Pears</li>
+</ol>
 
-&lt;h2&gt;&lt;a name="veggies"&gt;Veggies&lt;/a&gt;&lt;/h2&gt;
-&lt;ol&gt;
-    &lt;li&gt;Carrots&lt;/li&gt;
-    &lt;li&gt;Celery&lt;/li&gt;
-    &lt;li&gt;Beats&lt;/li&gt;
-&lt;/ol&gt;
+<h2><a name="veggies">Veggies</a></h2>
+<ol>
+    <li>Carrots</li>
+    <li>Celery</li>
+    <li>Beats</li>
+</ol>
 
-&lt;/body&gt;
-&lt;/html&gt;
-</pre>
+</body>
+</html>
+```
 
-<p><a href="https://jsfiddle.net/S4yNp">Voir dans JSFiddle</a></p>
+[Voir dans JSFiddle](https://jsfiddle.net/S4yNp)
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p>Pour des raisons de rétrocompatibilité, la liste d'ancres retournée contient seulement les ancres créées avec l'attribut <code>name</code>, pas celles créées avec l'attribut <code>id</code>.</p>
+Pour des raisons de rétrocompatibilité, la liste d'ancres retournée contient seulement les ancres créées avec l'attribut `name`, pas celles créées avec l'attribut `id`.
 
-<h2 id="Specification">Spécification</h2>
+## Spécification
 
-<ul>
- <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-7577272">DOM Level 2 HTML: anchors</a></li>
-</ul>
+- [DOM Level 2 HTML: anchors](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-7577272)
diff --git a/files/fr/web/api/document/applets/index.md b/files/fr/web/api/document/applets/index.md
index ea763af9a4..5fbbb3d003 100644
--- a/files/fr/web/api/document/applets/index.md
+++ b/files/fr/web/api/document/applets/index.md
@@ -3,15 +3,19 @@ title: Document.applets
 slug: Web/API/Document/applets
 translation_of: Web/API/Document/applets
 ---
-<p>{{ ApiRef() }}</p>
+{{ ApiRef() }}
 
-<p><code>applets</code> retourne une liste ordonnée des applets contenus dans un document.</p>
-<h3 id="Syntax">Syntaxe</h3>
-<pre class="eval"><em>nodeList</em> = document.applets
-</pre>
-<h3 id="Example">Exemple</h3>
-<pre class="eval">// ( Si vous savez que le second applet est celui que vous voulez )
-my_java_app = document.applets[1];
-</pre>
-<h3 id="Specification">Spécification</h3>
-<p><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-85113862">DOM Level 2 HTML: applets</a></p>
+`applets` retourne une liste ordonnée des applets contenus dans un document.
+
+### Syntaxe
+
+    nodeList = document.applets
+
+### Exemple
+
+    // ( Si vous savez que le second applet est celui que vous voulez )
+    my_java_app = document.applets[1];
+
+### Spécification
+
+[DOM Level 2 HTML: applets](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-85113862)
diff --git a/files/fr/web/api/document/bgcolor/index.md b/files/fr/web/api/document/bgcolor/index.md
index b379774259..2969fbf7ed 100644
--- a/files/fr/web/api/document/bgcolor/index.md
+++ b/files/fr/web/api/document/bgcolor/index.md
@@ -3,33 +3,29 @@ title: Document.bgColor
 slug: Web/API/Document/bgColor
 translation_of: Web/API/Document/bgColor
 ---
-<p>{{APIRef("DOM")}} {{ Deprecated_header() }}</p>
+{{APIRef("DOM")}} {{ Deprecated_header() }}
 
-<p>La propriété obsolète <code>bgColor</code> renvoie ou déinit la couleur de fond (background-color) du document courant.</p>
+La propriété obsolète `bgColor` renvoie ou déinit la couleur de fond (background-color) du document courant.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>color</em> = document.bgColor
-document.bgColor =<em>color</em>
-</pre>
+    color = document.bgColor
+    document.bgColor =color
 
-<h3 id="Parametres">Parametres</h3>
+### Parametres
 
-<ul>
- <li><code>color</code> est une chaîne de caractères représentant la couleur comme un mot (e.g., "red") ou une valeur hexadécimale (e.g., "<code>#ff0000</code>").</li>
-</ul>
+- `color` est une chaîne de caractères représentant la couleur comme un mot (e.g., "red") ou une valeur hexadécimale (e.g., "`#ff0000`").
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="eval">document.bgColor = "darkblue";
-</pre>
+    document.bgColor = "darkblue";
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p>La valeur par défaut pour cette propriété sur Firefox est le blanc (<code>#ffffff</code> en hexadécimal).</p>
+La valeur par défaut pour cette propriété sur Firefox est le blanc (`#ffffff` en hexadécimal).
 
-<p><code>document.bgColor</code> est obsolète dans le <a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268">DOM Niveau 2 HTML</a>. L'alternative recommandée est l'utilisation du style CSS {{Cssxref("background-color")}} qui peut être accessible via le DOM avec <code>document.body.style.backgroundColor</code>. Une autre alternative est <code>document.body.bgColor</code>, mais c'est aussi obsolète dans HTML 4.01 en faveur de l'alternative CSS.</p>
+`document.bgColor` est obsolète dans le [DOM Niveau 2 HTML](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268). L'alternative recommandée est l'utilisation du style CSS {{Cssxref("background-color")}} qui peut être accessible via le DOM avec `document.body.style.backgroundColor`. Une autre alternative est `document.body.bgColor`, mais c'est aussi obsolète dans HTML 4.01 en faveur de l'alternative CSS.
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Document.bgColor")}}</p>
+{{Compat("api.Document.bgColor")}}
diff --git a/files/fr/web/api/document/body/index.md b/files/fr/web/api/document/body/index.md
index 57a6cdfe79..572e90d1ea 100644
--- a/files/fr/web/api/document/body/index.md
+++ b/files/fr/web/api/document/body/index.md
@@ -6,14 +6,19 @@ tags:
   - Référence_du_DOM_Gecko
 translation_of: Web/API/Document/body
 ---
-<div>
- {{ApiRef}}</div>
-<p>Retourne l'élément <code>&lt;body&gt;</code> ou <code>&lt;frameset&gt;</code> du document courant.</p>
-<h2 id="Syntax">Syntaxe</h2>
-<pre class="syntaxbox"><em>var objRef</em> = document.body;
-document.body = <em>objRef;</em></pre>
-<h2 id="Example">Exemple</h2>
-<pre class="brush:js">// dans le HTML: &lt;body id="ancienElementBody"&gt;&lt;/body&gt;
+{{ApiRef}}
+
+Retourne l'élément `<body>` ou `<frameset>` du document courant.
+
+## Syntaxe
+
+    var objRef = document.body;
+    document.body = objRef;
+
+## Exemple
+
+```js
+// dans le HTML: <body id="ancienElementBody"></body>
 alert(document.body.id); // "ancienElementBody"
 
 var unNouvelElementBody = document.createElement("body");
@@ -21,11 +26,14 @@ var unNouvelElementBody = document.createElement("body");
 unNouvelElementBody .id = "nouvelElementBody";
 document.body = unNouvelElementBody ;
 alert(document.body.id); // "nouvelElementBody"
-</pre>
-<h2 id="Notes">Notes</h2>
-<p><code>document.body</code> est l'élément dans lequel le contenu du document est situé. Dans les documents avec un élément <code>&lt;body&gt;</code> celui-ci est retourné, et dans les documents de type frameset l'élément <code>&lt;frameset&gt;</code> le plus extérieur est retourné.</p>
-<p>Même si body est modifiable, lui affecter une nouvelle valeur retire tous les éléments enfants du <code>&lt;body&gt;</code> existant.</p>
-<h2 id="Specification">Spécification</h2>
-<ul>
- <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-56360201">DOM Level 2 HTML: HTMLDocument.body</a></li>
-</ul>
+```
+
+## Notes
+
+`document.body` est l'élément dans lequel le contenu du document est situé. Dans les documents avec un élément `<body>` celui-ci est retourné, et dans les documents de type frameset l'élément `<frameset>` le plus extérieur est retourné.
+
+Même si body est modifiable, lui affecter une nouvelle valeur retire tous les éléments enfants du `<body>` existant.
+
+## Spécification
+
+- [DOM Level 2 HTML: HTMLDocument.body](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-56360201)
diff --git a/files/fr/web/api/document/caretrangefrompoint/index.md b/files/fr/web/api/document/caretrangefrompoint/index.md
index ed72fe6bd7..a0e0d2282c 100644
--- a/files/fr/web/api/document/caretrangefrompoint/index.md
+++ b/files/fr/web/api/document/caretrangefrompoint/index.md
@@ -9,47 +9,47 @@ tags:
   - Méthode
 translation_of: Web/API/Document/caretRangeFromPoint
 ---
-<p>{{APIRef("DOM")}}{{Non-standard_header}} </p>
+{{APIRef("DOM")}}{{Non-standard_header}}
 
-<p>La méthode <code><strong>caretRangeFromPoint()</strong></code> de l'interface {{domxref("Document")}} renvoie un objet "Range" (<em>chaîne</em>) pour le fragment de document aux coordonnées spécifiées.</p>
+La méthode **`caretRangeFromPoint()`** de l'interface {{domxref("Document")}} renvoie un objet "Range" (_chaîne_) pour le fragment de document aux coordonnées spécifiées.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">var <em>range</em> = <em>document</em>.caretRangeFromPoint(float <em>x</em>, float <em>y</em>);
-</pre>
+```js
+var range = document.caretRangeFromPoint(float x, float y);
+```
 
-<h3 id="Retourne">Retourne</h3>
+### Retourne
 
-<p>Une des réponses suivantes :</p>
+Une des réponses suivantes :
 
-<ul>
- <li>Un {{domxref("Range")}}.</li>
- <li><code>Null</code> si <strong>x</strong> ou <strong>y</strong> sont négatifs, hors de la fenêtre, ou s'il n'y a pas de noeud d'entrée de texte.</li>
-</ul>
+- Un {{domxref("Range")}}.
+- `Null` si **x** ou **y** sont négatifs, hors de la fenêtre, ou s'il n'y a pas de noeud d'entrée de texte.
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt>x</dt>
- <dd>Une position horizontale dans la fenêtre courante.</dd>
- <dt>y</dt>
- <dd>Une position verticale dans la fenêtre courante.</dd>
-</dl>
+- x
+  - : Une position horizontale dans la fenêtre courante.
+- y
+  - : Une position verticale dans la fenêtre courante.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<p>Démonstration de base : lorsque vous cliquez dans un paragraphe, insérez un saut de ligne à la position du curseur :</p>
+Démonstration de base : lorsque vous cliquez dans un paragraphe, insérez un saut de ligne à la position du curseur :
 
-<h3 id="Contenu_HTML">Contenu HTML</h3>
+### Contenu HTML
 
-<pre class="brush: html">&lt;p&gt;Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
+```html
+<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
 sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
 sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
-Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.&lt;/p&gt;</pre>
+Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
+```
 
-<h3 id="Contenu_JavaScript">Contenu JavaScript</h3>
+### Contenu JavaScript
 
-<pre class="brush: js">function insertBreakAtPoint(e) {
+```js
+function insertBreakAtPoint(e) {
 
     var range;
     var textNode;
@@ -66,8 +66,8 @@ Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit ame
         offset = range.startOffset;
     }
 
-    // divise seulement les TEXT_NODE (<em>noeuds texte</em>)
-    if (textNode &amp;&amp; textNode.nodeType == 3) {
+    // divise seulement les TEXT_NODE (noeuds texte)
+    if (textNode && textNode.nodeType == 3) {
         var replacement = textNode.splitText(offset);
         var br = document.createElement('br');
         textNode.parentNode.insertBefore(br, replacement);
@@ -75,12 +75,13 @@ Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit ame
 }
 
 var paragraphs = document.getElementsByTagName("p");
-for (i=0 ; i &lt; paragraphs.length; i++) {
+for (i=0 ; i < paragraphs.length; i++) {
     paragraphs[i].addEventListener("click", insertBreakAtPoint, false);
-}</pre>
+}
+```
 
-<p>{{ EmbedLiveSample('Example', '', '', '', 'Web/API/Document/caretRangeFromPoint') }}</p>
+{{ EmbedLiveSample('Example', '', '', '', 'Web/API/Document/caretRangeFromPoint') }}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Document.caretRangeFromPoint")}}</p>
+{{Compat("api.Document.caretRangeFromPoint")}}
diff --git a/files/fr/web/api/document/characterset/index.md b/files/fr/web/api/document/characterset/index.md
index d43772b7fb..c5d756cac1 100644
--- a/files/fr/web/api/document/characterset/index.md
+++ b/files/fr/web/api/document/characterset/index.md
@@ -10,45 +10,33 @@ tags:
   - Reference
 translation_of: Web/API/Document/characterSet
 ---
-<p>{{ApiRef("DOM")}}</p>
+{{ApiRef("DOM")}}
 
-<p><code><strong>Document.characterSet</strong></code> propriété en lecture seule, renvoie l'encodage du document en cours. Un encodage décrit l'ensemble des caractères possibles et la façon de décoder les octets en ces caractères.</p>
+**`Document.characterSet`** propriété en lecture seule, renvoie l'encodage du document en cours. Un encodage décrit l'ensemble des caractères possibles et la façon de décoder les octets en ces caractères.
 
-<div class="note">
-<p><strong>Note :</strong> La propriété <code>document.charset</code> et <code>document.inputEncoding</code> sont les alias de <code>document.characterSet</code>. Ne plus les utiliser.</p>
-</div>
+> **Note :** La propriété `document.charset` et `document.inputEncoding` sont les alias de `document.characterSet`. Ne plus les utiliser.
 
-<p>Les utilisateurs peuvent surcharger l'encodage indiqué pour le document (transmis par l'en-tête {{HTTPHeader("Content-Type")}} ou via le {{HTMLElement("meta")}} : <code>&lt;meta charset="utf-8"&gt;</code>) grâce au menu <kbd>Affichage → Encodage du texte</kbd>. Cela peut notamment permettre de corriger le comportement d'un document dont l'encodage indiqué est incorrect.</p>
+Les utilisateurs peuvent surcharger l'encodage indiqué pour le document (transmis par l'en-tête {{HTTPHeader("Content-Type")}} ou via le {{HTMLElement("meta")}} : `<meta charset="utf-8">`) grâce au menu <kbd>Affichage → Encodage du texte</kbd>. Cela peut notamment permettre de corriger le comportement d'un document dont l'encodage indiqué est incorrect.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var <em>string</em> = document.characterSet</pre>
+    var string = document.characterSet
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: html">&lt;button onclick="console.log(document.characterSet);"&gt;
+```html
+<button onclick="console.log(document.characterSet);">
   Affiche le jeu de caractère
-&lt;/button&gt;
-&lt;!-- logs document's character set, such as "ISO-8859-1" or "UTF-8" --&gt;
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th>Specification</th>
-   <th>Etat</th>
-   <th>Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#dom-document-characterset', 'characterSet')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Document.characterSet")}}</p>
+</button>
+<!-- logs document's character set, such as "ISO-8859-1" or "UTF-8" -->
+```
+
+## Spécifications
+
+| Specification                                                                                    | Etat                             | Commentaires         |
+| ------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName('DOM WHATWG', '#dom-document-characterset', 'characterSet')}} | {{Spec2('DOM WHATWG')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Document.characterSet")}}
diff --git a/files/fr/web/api/document/clear/index.md b/files/fr/web/api/document/clear/index.md
index 24fab67361..e2ccc567e9 100644
--- a/files/fr/web/api/document/clear/index.md
+++ b/files/fr/web/api/document/clear/index.md
@@ -13,25 +13,20 @@ tags:
   - Reference
 translation_of: Web/API/Document/clear
 ---
-<p>{{APIRef("DOM")}}{{ Deprecated_header() }}</p>
+{{APIRef("DOM")}}{{ Deprecated_header() }}
 
-<p>Cette méthode est utilisée pour effacer entièrement le document visé dans les anciennes versions (pre-1.0) de Mozilla.</p>
+Cette méthode est utilisée pour effacer entièrement le document visé dans les anciennes versions (pre-1.0) de Mozilla.
 
-<p>Dans les versions récentes des applications basées sur Mozilla ainsi que sur Internet Explorer et Netscape 4, cette méthode ne fait rien.</p>
+Dans les versions récentes des applications basées sur Mozilla ainsi que sur Internet Explorer et Netscape 4, cette méthode ne fait rien.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="eval">document.clear()
-</pre>
+    document.clear()
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<ul>
- <li><a href="http://www.whatwg.org/html/#dom-document-clear">HTML5</a></li>
-</ul>
+- [HTML5](http://www.whatwg.org/html/#dom-document-clear)
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-
-
-<p>{{Compat("api.Document.clear")}}</p>
+{{Compat("api.Document.clear")}}
diff --git a/files/fr/web/api/document/compatmode/index.md b/files/fr/web/api/document/compatmode/index.md
index fd984565fe..e0a238c8fd 100644
--- a/files/fr/web/api/document/compatmode/index.md
+++ b/files/fr/web/api/document/compatmode/index.md
@@ -8,46 +8,37 @@ tags:
   - Reference
 translation_of: Web/API/Document/compatMode
 ---
-<p>{{ ApiRef("DOM") }}</p>
+{{ ApiRef("DOM") }}
 
-<p>Indique si le document est affiché en mode dégradé (<a href="/fr/docs/Mode_quirks_de_Mozilla">Quirks mode</a>) ou dans le respect des standards.</p>
+Indique si le document est affiché en mode dégradé ([Quirks mode](/fr/docs/Mode_quirks_de_Mozilla)) ou dans le respect des standards.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="eval"><em>mode</em> = document.compatMode
-</pre>
+    mode = document.compatMode
 
-<h2 id="Valeurs">Valeurs</h2>
+## Valeurs
 
-<ul>
- <li><code>"BackCompat"</code> si le document est a ffiché en mode   "quirks" ; </li>
-</ul>
+- `"BackCompat"` si le document est a ffiché en mode   "quirks" ;
 
-<dl>
- <dt>mode</dt>
- <dd>est une  valeur énumérée qui peut être :</dd>
-</dl>
+<!---->
 
-<ul>
- <li><code>"CSS1Compat"</code> si le document est affiché en mode "no-quirks" (aussi connu sous le nom de mode "standard") ou "limited-quirks" (mo de "proche du standard").</li>
-</ul>
+- mode
+  - : est une  valeur énumérée qui peut être :
 
-<dl>
-</dl>
+<!---->
 
-<div class="note">
-<p><strong>Note :</strong> tous ces modes sont maintenant définis dans les normes, de sorte que les anciens «standards» et «presque standards» sont absurdes et ne sont plus utilisés dans les normes.</p>
-</div>
+- `"CSS1Compat"` si le document est affiché en mode "no-quirks" (aussi connu sous le nom de mode "standard") ou "limited-quirks" (mo de "proche du standard").
 
-<h2 id="Example">Exemple</h2>
+<!---->
 
-<pre class="eval">if (document.compatMode == "BackCompat") {
-  // en mode Quirks
-}
-</pre>
+> **Note :** tous ces modes sont maintenant définis dans les normes, de sorte que les anciens «standards» et «presque standards» sont absurdes et ne sont plus utilisés dans les normes.
 
-<h2 id="Specification">Spécifications</h2>
+## Exemple
 
-<ul>
- <li><a href="http://dom.spec.whatwg.org/#dom-document-compatmode">DOM: Document.compatMode</a></li>
-</ul>
+    if (document.compatMode == "BackCompat") {
+      // en mode Quirks
+    }
+
+## Spécifications
+
+- [DOM: Document.compatMode](http://dom.spec.whatwg.org/#dom-document-compatmode)
diff --git a/files/fr/web/api/document/contenttype/index.md b/files/fr/web/api/document/contenttype/index.md
index 32d072bbae..21309bbf71 100644
--- a/files/fr/web/api/document/contenttype/index.md
+++ b/files/fr/web/api/document/contenttype/index.md
@@ -10,21 +10,20 @@ tags:
   - Rendu
 translation_of: Web/API/Document/contentType
 ---
-<p>{{ ApiRef("DOM") }}{{Non-standard_header}}</p>
+{{ ApiRef("DOM") }}{{Non-standard_header}}
 
-<p>Renvoie le type MIME dans lequel le document est rendu. Il peut provenir d'en-têtes HTTP ou d'autres sources d'informations MIME et peut être affecté par les conversions automatiques de type effectuées par le navigateur ou les extensions.</p>
+Renvoie le type MIME dans lequel le document est rendu. Il peut provenir d'en-têtes HTTP ou d'autres sources d'informations MIME et peut être affecté par les conversions automatiques de type effectuées par le navigateur ou les extensions.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="eval"><var>contentType</var> = <var>document</var>.contentType;
-</pre>
+    contentType = document.contentType;
 
-<p><code>contentType</code> est une propriété en lecture seule.</p>
+`contentType` est une propriété en lecture seule.
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p>La  propriété n'est pas affectée par les balises META.</p>
+La  propriété n'est pas affectée par les balises META.
 
-<h2 id="Specification">Spécifications</h2>
+## Spécifications
 
-<p>{{SpecName('DOM WHATWG','#dom-document-contenttype','Document.contenttype')}}</p>
+{{SpecName('DOM WHATWG','#dom-document-contenttype','Document.contenttype')}}
diff --git a/files/fr/web/api/document/createattribute/index.md b/files/fr/web/api/document/createattribute/index.md
index bfec33bfa2..42bd4f5991 100644
--- a/files/fr/web/api/document/createattribute/index.md
+++ b/files/fr/web/api/document/createattribute/index.md
@@ -8,84 +8,51 @@ tags:
   - Reference
 translation_of: Web/API/Document/createAttribute
 ---
-<p>{{ApiRef("DOM")}}</p>
+{{ApiRef("DOM")}}
 
-<p>La méthode <code><strong>Document.createAttribute()</strong></code> crée un nouveau nœud d'attribut et le renvoie. L'objet a créé un noeud implémentant l'interface {{domxref("Attr")}}. Le DOM   n'impose pas le type d'attribut à ajouter à un élément particulier de cette manière.  </p>
+La méthode **`Document.createAttribute()`** crée un nouveau nœud d'attribut et le renvoie. L'objet a créé un noeud implémentant l'interface {{domxref("Attr")}}. Le DOM n'impose pas le type d'attribut à ajouter à un élément particulier de cette manière.
 
-<div class="note">
-<p><strong>Note :</strong> La chaîne de caractères donnée dans le paramètre est convertie en minuscules.</p>
-</div>
+> **Note :** La chaîne de caractères donnée dans le paramètre est convertie en minuscules.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="eval"><em>attribut</em> = document.createAttribute(nom)
-</pre>
+    attribut = document.createAttribute(nom)
 
-<h3 id="Param.C3.A8tres">Paramètres</h3>
+### Paramètres
 
-<ul>
- <li><code>nom</code> est une chaîne de caractères contenant le nom de l'attribut.</li>
-</ul>
+- `nom` est une chaîne de caractères contenant le nom de l'attribut.
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Un nœud {{domxref("Attr")}}.</p>
+Un nœud {{domxref("Attr")}}.
 
-<h3 id="Exceptions_levées">Exceptions levées</h3>
+### Exceptions levées
 
-<ul>
- <li><code>INVALID_CHARACTER_ERR</code>  si le paramètre contient un caractère invalide pour un attribut XML.</li>
-</ul>
+- `INVALID_CHARACTER_ERR`  si le paramètre contient un caractère invalide pour un attribut XML.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-
-<pre class="brush:js">var node = document.getElementById("div1");
+```js
+var node = document.getElementById("div1");
 var a = document.createAttribute("my_attrib");
 a.value = "newVal";
 node.setAttributeNode(a);
 console.log(node.getAttribute("my_attrib")); // "newVal"
-</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('DOM WHATWG','#dom-document-createattribute','Document.createAttribute()')}}</td>
-   <td>{{Spec2("DOM WHATWG")}}</td>
-   <td>  Comportement précis avec des caractères majuscules.  </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM3 Core','core.html#ID-1084891198','Document.createAttribute()')}}</td>
-   <td>{{Spec2('DOM3 Core')}}</td>
-   <td>Pas de modification.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Core','core.html#ID-1084891198','Document.createAttribute()')}}</td>
-   <td>{{Spec2('DOM2 Core')}}</td>
-   <td>Pas de modification.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM1','level-one-core.html#ID-1084891198','Document.createAttribute()')}}</td>
-   <td>{{Spec2('DOM1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Document.createAttribute")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("Document.createElement()")}}</li>
-</ul>
+```
+
+## Spécifications
+
+| Spécification                                                                                                        | État                             | Commentaires                                        |
+| -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | --------------------------------------------------- |
+| {{SpecName('DOM WHATWG','#dom-document-createattribute','Document.createAttribute()')}} | {{Spec2("DOM WHATWG")}} | Comportement précis avec des caractères majuscules. |
+| {{SpecName('DOM3 Core','core.html#ID-1084891198','Document.createAttribute()')}}         | {{Spec2('DOM3 Core')}}     | Pas de modification.                                |
+| {{SpecName('DOM2 Core','core.html#ID-1084891198','Document.createAttribute()')}}         | {{Spec2('DOM2 Core')}}     | Pas de modification.                                |
+| {{SpecName('DOM1','level-one-core.html#ID-1084891198','Document.createAttribute()')}}     | {{Spec2('DOM1')}}         | Définition initiale.                                |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Document.createAttribute")}}
+
+## Voir aussi
+
+- {{domxref("Document.createElement()")}}
diff --git a/files/fr/web/api/document/createcdatasection/index.md b/files/fr/web/api/document/createcdatasection/index.md
index f1a44c9a07..3ee0e113a7 100644
--- a/files/fr/web/api/document/createcdatasection/index.md
+++ b/files/fr/web/api/document/createcdatasection/index.md
@@ -12,41 +12,35 @@ tags:
   - données
 translation_of: Web/API/Document/createCDATASection
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p><code>createCDATASection()</code> crée un nouveau noeud de section CDATA et le renvoie.</p>
+`createCDATASection()` crée un nouveau noeud de section CDATA et le renvoie.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var>CDATASectionNode</var> = document.createCDATASection(data)
-</pre>
+    CDATASectionNode = document.createCDATASection(data)
 
-<ul>
- <li><code>CDATASectionNode</code> est un noeud de <a href="/fr/docs/Web/API/CDATASection">Section CDATA</a>.</li>
- <li><code>data</code> est une string (<em>chaîne de caractères</em>) contenant les données à ajouter à la section CDATA.</li>
-</ul>
+- `CDATASectionNode` est un noeud de [Section CDATA](/fr/docs/Web/API/CDATASection).
+- `data` est une string (_chaîne de caractères_) contenant les données à ajouter à la section CDATA.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush:js">var docu = new DOMParser().parseFromString('&lt;xml&gt;&lt;/xml&gt;',  "application/xml")
+```js
+var docu = new DOMParser().parseFromString('<xml></xml>',  "application/xml")
 
-var cdata = docu.createCDATASection('Some &lt;CDATA&gt; data &amp; then some');
+var cdata = docu.createCDATASection('Some <CDATA> data & then some');
 
 docu.getElementsByTagName('xml')[0].appendChild(cdata);
 
 alert(new XMLSerializer().serializeToString(docu));
-// Affiche : &lt;xml&gt;&lt;![CDATA[Some &lt;CDATA&gt; data &amp; then some]]&gt;&lt;/xml&gt;
-</pre>
+// Affiche : <xml><![CDATA[Some <CDATA> data & then some]]></xml>
+```
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<ul>
- <li>Cela fonctionnera uniquement avec XML, pas avec les documents HTML (car les documents HTML ne supportent pas les sections CDATA) ; le tenter sur un document HTML va lancer une exception <code>NOT_SUPPORTED_ERR</code>.</li>
- <li>Va lancer une exception <code>NS_ERROR_DOM_INVALID_CHARACTER_ERR</code> si on essaye de soumettre la séquence CDATA de fermeture ("]]&gt;") en tant que partie des données ; les données fournies par l'utilisateur non échappées, ne peuvent pas être utilisées en toute sécurité sans qu'avec cette méthode on obtienne cette exception (<code><a href="/en-US/docs/DOM/document.createTextNode">createTextNode()</a></code> peut souvent être utilisé à sa place).</li>
-</ul>
+- Cela fonctionnera uniquement avec XML, pas avec les documents HTML (car les documents HTML ne supportent pas les sections CDATA) ; le tenter sur un document HTML va lancer une exception `NOT_SUPPORTED_ERR`.
+- Va lancer une exception `NS_ERROR_DOM_INVALID_CHARACTER_ERR` si on essaye de soumettre la séquence CDATA de fermeture ("]]>") en tant que partie des données ; les données fournies par l'utilisateur non échappées, ne peuvent pas être utilisées en toute sécurité sans qu'avec cette méthode on obtienne cette exception ([`createTextNode()`](/en-US/docs/DOM/document.createTextNode) peut souvent être utilisé à sa place).
 
-<h2 id="Specification">Spécification</h2>
+## Spécification
 
-<ul>
- <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-createCDATASection">createCDATASection</a></li>
-</ul>
+- [createCDATASection](http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-createCDATASection)
diff --git a/files/fr/web/api/document/createcomment/index.md b/files/fr/web/api/document/createcomment/index.md
index 5e16be2ecb..d2553c1327 100644
--- a/files/fr/web/api/document/createcomment/index.md
+++ b/files/fr/web/api/document/createcomment/index.md
@@ -8,34 +8,31 @@ tags:
   - Reference
 translation_of: Web/API/Document/createComment
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p><code>createComment()</code> crée et retourne un nouveau noeud de type commentaire.</p>
+`createComment()` crée et retourne un nouveau noeud de type commentaire.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>CommentNode</em> = document.createComment(data)
-</pre>
+    CommentNode = document.createComment(data)
 
-<h3 id="Parameters">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>data</code></dt>
- <dd>Une chaîne de caractères représentant le contenu du commentaire.</dd>
-</dl>
+- `data`
+  - : Une chaîne de caractères représentant le contenu du commentaire.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush:js">var docu = new DOMParser().parseFromString('&lt;xml&gt;&lt;/xml&gt;',  "application/xml");
+```js
+var docu = new DOMParser().parseFromString('<xml></xml>',  "application/xml");
 var comment = docu.createComment('Voici un commentaire pas très bien caché');
 
 docu.getElementsByTagName('xml')[0].appendChild(comment);
 
 alert(new XMLSerializer().serializeToString(docu));
-// Affiche: &lt;xml&gt;&lt;!--Voici un commentaire pas très bien caché--&gt;&lt;/xml&gt;</pre>
+// Affiche: <xml><!--Voici un commentaire pas très bien caché--></xml>
+```
 
-<h2 id="Spécification">Spécification</h2>
+## Spécification
 
-<ul>
- <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-createComment">createComment</a></li>
-</ul>
+- [createComment](http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-createComment)
diff --git a/files/fr/web/api/document/createdocumentfragment/index.md b/files/fr/web/api/document/createdocumentfragment/index.md
index 629d26ed27..d4bf794671 100644
--- a/files/fr/web/api/document/createdocumentfragment/index.md
+++ b/files/fr/web/api/document/createdocumentfragment/index.md
@@ -10,35 +10,37 @@ tags:
   - Reference
 translation_of: Web/API/Document/createDocumentFragment
 ---
-<div>{{ApiRef("DOM")}}</div>
+{{ApiRef("DOM")}}
 
-<p>Crée un nouvel objet vide de type  {{domxref("DocumentFragment")}}.</p>
+Crée un nouvel objet vide de type {{domxref("DocumentFragment")}}.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var <var>fragment</var> = document.createDocumentFragment();
-</pre>
+    var fragment = document.createDocumentFragment();
 
-<p><code>fragment</code> est une référence vers un objet vide de type  {{domxref("DocumentFragment")}} .</p>
+`fragment` est une référence vers un objet vide de type {{domxref("DocumentFragment")}} .
 
-<h2 id="Description">Description</h2>
+## Description
 
-<p>Les objets <code>DocumentFragments</code> sont analogues à des nœuds du DOM, mais ne font jamais partie de l'arbre DOM. Le cas d'usage le plus courant consiste à créer un fragment pour y stocker des éléments, puis à ajouter en une seule opération le fragment à l'arbre DOM, ce qui a pour effet de le remplacer par tous ses éléments enfants.</p>
+Les objets `DocumentFragments` sont analogues à des nœuds du DOM, mais ne font jamais partie de l'arbre DOM. Le cas d'usage le plus courant consiste à créer un fragment pour y stocker des éléments, puis à ajouter en une seule opération le fragment à l'arbre DOM, ce qui a pour effet de le remplacer par tous ses éléments enfants.
 
-<p>Le principal avantage de cette méthode de mise à jour du DOM vient du fait que le fragment est stocké en mémoire, et pas dans l'arbre DOM lui-même, de sorte que le modifier ne déclenche pas de <a href="http://code.google.com/speed/articles/reflow.html">reflow</a> (le calcul des positions et de la géométrie de chacun des éléments de la page affichée). Par conséquent, l´utilisation de fragments pour effectuer des mises à jour du DOM donne souvent lieu à une <a href="http://ejohn.org/blog/dom-documentfragments/">amélioration des performance</a>s.</p>
+Le principal avantage de cette méthode de mise à jour du DOM vient du fait que le fragment est stocké en mémoire, et pas dans l'arbre DOM lui-même, de sorte que le modifier ne déclenche pas de [reflow](http://code.google.com/speed/articles/reflow.html) (le calcul des positions et de la géométrie de chacun des éléments de la page affichée). Par conséquent, l´utilisation de fragments pour effectuer des mises à jour du DOM donne souvent lieu à une [amélioration des performance](http://ejohn.org/blog/dom-documentfragments/)s.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<p>Cet exemple crée une liste des principaux navigateurs du web.</p>
+Cet exemple crée une liste des principaux navigateurs du web.
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;ul id="ul"&gt;
-&lt;/ul&gt;</pre>
+```html
+<ul id="ul">
+</ul>
+```
 
-<h3 id="JavaScript">JavaScript</h3>
+### JavaScript
 
-<pre class="brush: js">var element  = document.getElementById('ul'); // en supposant qu'ul existe
+```js
+var element  = document.getElementById('ul'); // en supposant qu'ul existe
 var fragment = document.createDocumentFragment();
 var browsers = ['Firefox', 'Chrome', 'Opera',
     'Safari', 'Internet Explorer'];
@@ -49,39 +51,24 @@ browsers.forEach(function(browser) {
     fragment.appendChild(li);
 });
 
-element.appendChild(fragment);</pre>
+element.appendChild(fragment);
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Example", 600, 140)}}</p>
+{{EmbedLiveSample("Example", 600, 140)}}
 
-<h2 id="Spécification">Spécification</h2>
+## Spécification
 
-<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('DOM WHATWG', '#dom-document-createdocumentfragment', 'Document.createDocumentFragment()')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Définition initiale dans la spécification DOM 1.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                            | Statut                           | Commentaire                                      |
+| ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------ |
+| {{SpecName('DOM WHATWG', '#dom-document-createdocumentfragment', 'Document.createDocumentFragment()')}} | {{Spec2('DOM WHATWG')}} | Définition initiale dans la spécification DOM 1. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Document.createDocumentFragment")}}</p>
+{{Compat("api.Document.createDocumentFragment")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
-</div>
+## Voir aussi
 
-<ul>
- <li>{{domxref("DOMImplementation.createDocument", "document.implementation.createDocument()")}}</li>
- <li>{{domxref("documentFragment")}}</li>
-</ul>
+- {{domxref("DOMImplementation.createDocument", "document.implementation.createDocument()")}}
+- {{domxref("documentFragment")}}
diff --git a/files/fr/web/api/document/createelement/index.md b/files/fr/web/api/document/createelement/index.md
index aaf9bf831b..e68fb79530 100644
--- a/files/fr/web/api/document/createelement/index.md
+++ b/files/fr/web/api/document/createelement/index.md
@@ -10,50 +10,49 @@ tags:
   - Méthodes
 translation_of: Web/API/Document/createElement
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p>Dans un document <a href="/fr/docs/Web/HTML">HTML</a>, la méthode <strong><code>document.createElement()</code></strong> crée un élément HTML du type spécifié par <code>tagName</code> ou un {{domxref("HTMLUnknownElement")}} si <code>tagName</code> n’est pas reconnu.</p>
+Dans un document [HTML](/fr/docs/Web/HTML), la méthode **`document.createElement()`** crée un élément HTML du type spécifié par `tagName` ou un {{domxref("HTMLUnknownElement")}} si `tagName` n’est pas reconnu.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var element = document.createElement(tagName[, options]);</pre>
+    var element = document.createElement(tagName[, options]);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt>tagName</dt>
- <dd>Une chaîne de caractères ({{domxref("DOMString")}}) spécifiant le type d’élément à créer. Le {{domxref("Node.nodeName", "nodeName")}} (<em>nom du noeud</em>) de l’élément créé est initialisé avec la valeur de <code>tagName</code>. N’utilisez pas le nom qualifié (comme <code>"html:a"</code>) avec cette méthode. Quand elle est appelée sur un document HTML, <code>createElement()</code> convertit <code>tagName</code> en minuscules avant de créer l’élément. Dans Firefox, Opera et Chrome, <code>createElement(null)</code> fonctionne comme <code>createElement("null")</code>.</dd>
- <dt>options{{optional_inline}}</dt>
- <dd>
- <p>Un objet <code>ElementCreationOptions</code> facultatif contenant une seule propriété nommée <code>is</code> dont la valeur est le nom de balise d’un élément personnalisé précédemment défini avec <code>customElements.define()</code>. Voir {{anch("Web component example")}} pour plus de détails.</p>
- </dd>
-</dl>
+- tagName
+  - : Une chaîne de caractères ({{domxref("DOMString")}}) spécifiant le type d’élément à créer. Le {{domxref("Node.nodeName", "nodeName")}} (_nom du noeud_) de l’élément créé est initialisé avec la valeur de `tagName`. N’utilisez pas le nom qualifié (comme `"html:a"`) avec cette méthode. Quand elle est appelée sur un document HTML, `createElement()` convertit `tagName` en minuscules avant de créer l’élément. Dans Firefox, Opera et Chrome, `createElement(null)` fonctionne comme `createElement("null")`.
+- options{{optional_inline}}
+  - : Un objet `ElementCreationOptions` facultatif contenant une seule propriété nommée `is` dont la valeur est le nom de balise d’un élément personnalisé précédemment défini avec `customElements.define()`. Voir {{anch("Web component example")}} pour plus de détails.
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+### Valeur de retour
 
-<p>L’objet {{domxref("Element")}} créé.</p>
+L’objet {{domxref("Element")}} créé.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Exemple_de_base">Exemple de base</h3>
+### Exemple de base
 
-<p>Ici est créé un nouveau <code>&lt;div&gt;</code> qui est inséré avant l’élément avec l’identifiant <code>"div1"</code>.</p>
+Ici est créé un nouveau `<div>` qui est inséré avant l’élément avec l’identifiant `"div1"`.
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-&lt;head&gt;
-  &lt;title&gt;||Working with elements||&lt;/title&gt;
-&lt;/head&gt;
-&lt;body&gt;
-  &lt;div id="div1"&gt;The text above has been created dynamically.&lt;/div&gt;
-&lt;/body&gt;
-&lt;/html&gt;</pre>
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <title>||Working with elements||</title>
+</head>
+<body>
+  <div id="div1">The text above has been created dynamically.</div>
+</body>
+</html>
+```
 
-<h4 id="JavaScript">JavaScript</h4>
+#### JavaScript
 
-<pre class="brush: js">document.body.onload = addElement;
+```js
+document.body.onload = addElement;
 
 function addElement () {
   // crée un nouvel élément div
@@ -66,15 +65,17 @@ function addElement () {
   // ajoute le nouvel élément créé et son contenu dans le DOM
   var currentDiv = document.getElementById('div1');
   document.body.insertBefore(newDiv, currentDiv);
-}</pre>
+}
+```
 
-<p>{{EmbedLiveSample("Basic_example", 500, 50)}}</p>
+{{EmbedLiveSample("Basic_example", 500, 50)}}
 
-<h3 id="Exemple_de_composant_web">Exemple de composant web</h3>
+### Exemple de composant web
 
-<p>L’exemple de fragment suivant est extrait de notre exemple expanding-list-web-component (voir aussi en direct). Dans ce cas, notre élément personnalisé étend la {{domxref("HTMLUListElement")}} qui représente l’élément {{htmlelement("ul")}}.</p>
+L’exemple de fragment suivant est extrait de notre exemple expanding-list-web-component (voir aussi en direct). Dans ce cas, notre élément personnalisé étend la {{domxref("HTMLUListElement")}} qui représente l’élément {{htmlelement("ul")}}.
 
-<pre class="brush: js">// Crée une classe pour l’élément
+```js
+// Crée une classe pour l’élément
 class ExpandingList extends HTMLUListElement {
   constructor() {
     // Toujours appeler « super » en premier dans le constructeur
@@ -86,52 +87,38 @@ class ExpandingList extends HTMLUListElement {
 }
 
 // Définit le nouvel élément
-customElements.define('expanding-list', ExpandingList, { extends: 'ul' });</pre>
+customElements.define('expanding-list', ExpandingList, { extends: 'ul' });
+```
 
-<p>Si nous cherchons à créer une instance de cet élément par programmation, nous devons utiliser un appel tel que montré dans la ligne suivante :</p>
+Si nous cherchons à créer une instance de cet élément par programmation, nous devons utiliser un appel tel que montré dans la ligne suivante :
 
-<pre class="brush: js">let expandingList = document.createElement('ul', { is : 'expanding-list' })</pre>
+```js
+let expandingList = document.createElement('ul', { is : 'expanding-list' })
+```
 
-<p>Le nouvel élément donnera un attribut <code><a href="/docs/Web/HTML/Global_attributes/is">is</a></code> dont la valeur est la balise de nom de l’élément personnalisé.</p>
+Le nouvel élément donnera un attribut [`is`](/docs/Web/HTML/Global_attributes/is) dont la valeur est la balise de nom de l’élément personnalisé.
 
-<div class="note">
-<p><strong>Note :</strong> Pour la rétrocompatibilité avec les versions précédentes de la <a href="https://www.w3.org/TR/custom-elements/">spécification des éléments personnalisés</a>, quelques navigateurs permettent de passer une chaîne de caractères ici, à la place d’un objet, dont la valeur est la balise de nom de l’élément personnalisé.</p>
-</div>
+> **Note :** Pour la rétrocompatibilité avec les versions précédentes de la [spécification des éléments personnalisés](https://www.w3.org/TR/custom-elements/), quelques navigateurs permettent de passer une chaîne de caractères ici, à la place d’un objet, dont la valeur est la balise de nom de l’élément personnalisé.
 
-<h2 id="Spécification">Spécification</h2>
+## Spécification
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', "#dom-document-createelement", "Document.createElement")}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                    | Statut                           | Commentaire |
+| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- |
+| {{SpecName('DOM WHATWG', "#dom-document-createelement", "Document.createElement")}} | {{Spec2('DOM WHATWG')}} |             |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Document.createElement")}}</p>
+{{Compat("api.Document.createElement")}}
 
-<h3 id="Notes_CSS_Quantum">Notes CSS Quantum</h3>
+### Notes CSS Quantum
 
-<ul>
- <li>Dans Gecko, quand vous voulez créer un sous-arbre détaché (par exemple, un {{htmlelement("div")}} créé avec <code>createElement()</code> qui n’est pas encore inséré dans le DOM), l’élément racine du sous-arbre est défini comme un élément de niveau bloc. Dans le nouveau moteur CSS parallèle de Firefox (aussi connu comme <a href="https://wiki.mozilla.org/Quantum">Quantum CSS</a> ou <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a>, prévu pour être publié dans Firefox 57), il est défini comme "inline", ({{bug(1374994)}}) selon la spécification.</li>
-</ul>
+- Dans Gecko, quand vous voulez créer un sous-arbre détaché (par exemple, un {{htmlelement("div")}} créé avec `createElement()` qui n’est pas encore inséré dans le DOM), l’élément racine du sous-arbre est défini comme un élément de niveau bloc. Dans le nouveau moteur CSS parallèle de Firefox (aussi connu comme [Quantum CSS](https://wiki.mozilla.org/Quantum) ou [Stylo](https://wiki.mozilla.org/Quantum/Stylo), prévu pour être publié dans Firefox 57), il est défini comme "inline", ({{bug(1374994)}}) selon la spécification.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("Node.removeChild()")}}</li>
- <li>{{domxref("Node.replaceChild()")}}</li>
- <li>{{domxref("Node.appendChild()")}}</li>
- <li>{{domxref("Node.insertBefore()")}}</li>
- <li>{{domxref("Node.hasChildNodes()")}}</li>
- <li>{{domxref("document.createElementNS()")}} — pour spécifier explicitement l’URI de l’espace de noms de l’élément.</li>
-</ul>
+- {{domxref("Node.removeChild()")}}
+- {{domxref("Node.replaceChild()")}}
+- {{domxref("Node.appendChild()")}}
+- {{domxref("Node.insertBefore()")}}
+- {{domxref("Node.hasChildNodes()")}}
+- {{domxref("document.createElementNS()")}} — pour spécifier explicitement l’URI de l’espace de noms de l’élément.
diff --git a/files/fr/web/api/document/createelementns/index.md b/files/fr/web/api/document/createelementns/index.md
index 4949f5203e..7957b59245 100644
--- a/files/fr/web/api/document/createelementns/index.md
+++ b/files/fr/web/api/document/createelementns/index.md
@@ -11,51 +11,50 @@ tags:
   - URI
 translation_of: Web/API/Document/createElementNS
 ---
-<div>{{ApiRef("DOM")}}</div>
+{{ApiRef("DOM")}}
 
-<p>Crée un élément avec l'URI de l'espace de noms spécifié et un nom qualifié.</p>
+Crée un élément avec l'URI de l'espace de noms spécifié et un nom qualifié.
 
-<p>Pour créer un élément sans spécifier d'URI d'espace de noms, utilisez la méthode <a href="/fr/docs/Web/API/Document/createElement">createElement </a><a href="/fr/docs/Web/API/Document/createElement"> </a>.</p>
+Pour créer un élément sans spécifier d'URI d'espace de noms, utilisez la méthode [createElement ](/fr/docs/Web/API/Document/createElement)[](/fr/docs/Web/API/Document/createElement).
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">var element = document.createElementNS(namespaceURI, qualifiedName[, options]);</pre>
+```js
+var element = document.createElementNS(namespaceURI, qualifiedName[, options]);
+```
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>namespaceURI</code></dt>
- <dd>est une chaîne de caractères qui spécifie <a href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/glossary.html#dt-namespaceURI">l'URI de l'espace de noms</a> à associer à l'élément. La propriété <a href="/fr/docs/Web/API/Node/namespaceURI">namespaceURI</a> de l'élément créé est initialisée avec la valeur de <code>namespaceURI</code>. voir <a href="#URI_d'espaces_de_nom_valides">URI d'espaces de nom valides</a></dd>
- <dt><code>qualifiedName</code></dt>
- <dd>est une chaîne de caractères qui spécifie le type de l'élément à créer. La propriété <a href="/fr/docs/Web/API/Node/nodeName">nodeName</a> de l'élément créé est initialisée avec la valeur de <code>qualifiedName</code></dd>
- <dt><code>Options </code>Facultatif</dt>
- <dd><p>Un objet facultatif <code>ElementCreationOptions</code> contient une propriété unique nommée <code>is</code>, dont la valeur est le nom de la balise pour un élément personnalisé défini précédemment à l'aide de  <code>customElements.define()</code> . Pour la rétro-compatibilité avec les versions précédentes de la <a href="https://www.w3.org/TR/custom-elements/">spécification des éléments personnalisés</a>, quelques navigateurs vous permettront de passer ici une chaîne de caractères à la place d'un objet, pour laquelle la valeur est un nom d'élément personnalisé. Voir  <a href="https://developers.google.com/web/fundamentals/primers/customelements/#extendhtml">Extending native HTML elements</a>  pour plus d'informations sur la façon d'utiliser ce paramètre. Le nouvel élément recevra un attribut <code>is</code> dont la valeur est le nom de la balise de l'élément personnalisé. Les éléments personnalisés sont une fonctionnalité expérimentale disponible uniquement dans certains navigateurs.</p></dd>
-</dl>
+- `namespaceURI`
+  - : est une chaîne de caractères qui spécifie [l'URI de l'espace de noms](http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/glossary.html#dt-namespaceURI) à associer à l'élément. La propriété [namespaceURI](/fr/docs/Web/API/Node/namespaceURI) de l'élément créé est initialisée avec la valeur de `namespaceURI`. voir [URI d'espaces de nom valides](#URI_d'espaces_de_nom_valides)
+- `qualifiedName`
+  - : est une chaîne de caractères qui spécifie le type de l'élément à créer. La propriété [nodeName](/fr/docs/Web/API/Node/nodeName) de l'élément créé est initialisée avec la valeur de `qualifiedName`
+- `Options `Facultatif
+  - : Un objet facultatif `ElementCreationOptions` contient une propriété unique nommée `is`, dont la valeur est le nom de la balise pour un élément personnalisé défini précédemment à l'aide de  `customElements.define()` . Pour la rétro-compatibilité avec les versions précédentes de la [spécification des éléments personnalisés](https://www.w3.org/TR/custom-elements/), quelques navigateurs vous permettront de passer ici une chaîne de caractères à la place d'un objet, pour laquelle la valeur est un nom d'élément personnalisé. Voir  [Extending native HTML elements](https://developers.google.com/web/fundamentals/primers/customelements/#extendhtml)  pour plus d'informations sur la façon d'utiliser ce paramètre. Le nouvel élément recevra un attribut `is` dont la valeur est le nom de la balise de l'élément personnalisé. Les éléments personnalisés sont une fonctionnalité expérimentale disponible uniquement dans certains navigateurs.
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Le nouvel <code><a href="/fr/docs/Web/API/Element">element</a></code>.</p>
+Le nouvel [`element`](/fr/docs/Web/API/Element).
 
-<h2 id="Example">URI d'espaces de nom valides</h2>
+## URI d'espaces de nom valides
 
-<ul>
- <li>HTML - Utiliser <code>http://www.w3.org/1999/xhtml</code></li>
- <li>SVG - Utiliser <code>http://www.w3.org/2000/svg</code></li>
- <li>XBL - Utiliser <code>http://www.mozilla.org/xbl</code></li>
- <li>XUL - Utiliser <code>http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</code></li>
-</ul>
+- HTML - Utiliser `http://www.w3.org/1999/xhtml`
+- SVG - Utiliser `http://www.w3.org/2000/svg`
+- XBL - Utiliser `http://www.mozilla.org/xbl`
+- XUL - Utiliser `http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul`
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<p>Cet exemple crée un nouvel élément &lt;div&gt; dans l'espace de noms <a href="/fr/docs/XHTML">XHTML</a> et l'ajoute à l'élément vbox. Bien que ce ne soit pas un document <a href="/fr/docs/Mozilla/Tech/XUL">XUL</a> très utile, cela montre l'utilisation d'éléments de deux espaces de noms différents au sein d'un même document :</p>
+Cet exemple crée un nouvel élément \<div> dans l'espace de noms [XHTML](/fr/docs/XHTML) et l'ajoute à l'élément vbox. Bien que ce ne soit pas un document [XUL](/fr/docs/Mozilla/Tech/XUL) très utile, cela montre l'utilisation d'éléments de deux espaces de noms différents au sein d'un même document :
 
-<pre class="brush:xml">&lt;?xml version="1.0"?&gt;
-&lt;page xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+```xml
+<?xml version="1.0"?>
+<page xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
       xmlns:html="http://www.w3.org/1999/xhtml"
       title="||Working with elements||"
-      onload="init()"&gt;
+      onload="init()">
 
-&lt;script type="text/javascript"&gt;&lt;![CDATA[
+<script type="text/javascript"><![CDATA[
  var container;
  var newdiv;
  var txtnode;
@@ -68,46 +67,32 @@ translation_of: Web/API/Document/createElementNS
    container.appendChild(newdiv);
  }
 
-]]&gt;&lt;/script&gt;
+]]></script>
 
- &lt;vbox id='ContainerBox' flex='1'&gt;
-  &lt;html:div&gt;
+ <vbox id='ContainerBox' flex='1'>
+  <html:div>
    Le script sur cette page ajoutera du contenu dynamique ci-dessous :
-  &lt;/html:div&gt;
- &lt;/vbox&gt;
-
-&lt;/page&gt;</pre>
-
-<div class="note">
-<p><strong>Note :</strong> Cet exemple utilise un script interne, ce qui n'est pas recommandé dans les documents XHTML. Cet exemple particulier est en fait un document XUL intégrant du XHTML. Cependant, la recommandation s'applique quand même.</p>
-</div>
-
-<h2 id="Specification">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', "#dom-document-createelementns", "Document.createElement")}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Document.createElementNS")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="document.createElement">document.createElement</a></li>
- <li><a href="document.createTextNode">document.createTextNode</a></li>
- <li><a href="/fr/docs/Web/API/Node/namespaceURI">Node.namespaceURI</a></li>
- <li><a href="http://www.w3.org/TR/1999/REC-xml-names-19990114">Namespaces in XML</a></li>
-</ul>
+  </html:div>
+ </vbox>
+
+</page>
+```
+
+> **Note :** Cet exemple utilise un script interne, ce qui n'est pas recommandé dans les documents XHTML. Cet exemple particulier est en fait un document XUL intégrant du XHTML. Cependant, la recommandation s'applique quand même.
+
+## Spécifications
+
+| Spécification                                                                                                    | Statut                           | Commentaire |
+| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- |
+| {{SpecName('DOM WHATWG', "#dom-document-createelementns", "Document.createElement")}} | {{Spec2('DOM WHATWG')}} |             |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Document.createElementNS")}}
+
+## Voir aussi
+
+- [document.createElement](document.createElement)
+- [document.createTextNode](document.createTextNode)
+- [Node.namespaceURI](/fr/docs/Web/API/Node/namespaceURI)
+- [Namespaces in XML](http://www.w3.org/TR/1999/REC-xml-names-19990114)
diff --git a/files/fr/web/api/document/createentityreference/index.md b/files/fr/web/api/document/createentityreference/index.md
index 46269f94bc..3dfdecf2dc 100644
--- a/files/fr/web/api/document/createentityreference/index.md
+++ b/files/fr/web/api/document/createentityreference/index.md
@@ -3,12 +3,12 @@ title: Document.createEntityReference()
 slug: Web/API/Document/createEntityReference
 translation_of: Web/API/Document/createEntityReference
 ---
-<p>{{ ApiRef("DOM") }}</p>
+{{ ApiRef("DOM") }}
 
-<p>{{ obsolete_header("7.0") }}</p>
+{{ obsolete_header("7.0") }}
 
-<p>Avant {{ gecko("7.0") }} cette méthode apparaissait présente mais en raison du bogue {{bug("9850")}}, elle renvoyait toujours uniquement "null". La seule solution consiste à créer un noeud de texte, une section CDATA, une valeur de noeud d'attribut, etc., qui ont la valeur référencée par l'entité, en utilisant <a href="/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Les_caract%C3%A8res_d%27%C3%A9chappement">Les caractères d'échappement</a> ou <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/fromCharCode">fromCharCode()</a> si nécessaire.</p>
+Avant {{ gecko("7.0") }} cette méthode apparaissait présente mais en raison du bogue {{bug("9850")}}, elle renvoyait toujours uniquement "null". La seule solution consiste à créer un noeud de texte, une section CDATA, une valeur de noeud d'attribut, etc., qui ont la valeur référencée par l'entité, en utilisant [Les caractères d'échappement](/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Les_caract%C3%A8res_d%27%C3%A9chappement) ou [fromCharCode()](/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/fromCharCode) si nécessaire.
 
-<h2 id="Specification">Spécifications</h2>
+## Spécifications
 
-<p><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-392B75AE">createEntityReference</a></p>
+[createEntityReference](http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-392B75AE)
diff --git a/files/fr/web/api/document/createevent/index.md b/files/fr/web/api/document/createevent/index.md
index 3cccde91e3..8696602672 100644
--- a/files/fr/web/api/document/createevent/index.md
+++ b/files/fr/web/api/document/createevent/index.md
@@ -8,81 +8,71 @@ tags:
   - Reference
 translation_of: Web/API/Document/createEvent
 ---
-<div class="warning">
-<p><strong>Attention :</strong> De nombreuses méthodes utilisées avec <code>createEvent</code>, tels que <code>initCustomEvent</code>, sont obsolètes. Utilisez le <a href="/fr/docs/Web/API/CustomEvent">constructeur d'événement </a><a href="/fr/docs/Web/API/CustomEvent"> </a>à la place.</p>
-</div>
+> **Attention :** De nombreuses méthodes utilisées avec `createEvent`, tels que `initCustomEvent`, sont obsolètes. Utilisez le [constructeur d'événement ](/fr/docs/Web/API/CustomEvent)[](/fr/docs/Web/API/CustomEvent)à la place.
 
-<div>{{ ApiRef("DOM") }}</div>
+{{ ApiRef("DOM") }}
 
-<p>Crée un <a href="/en-US/docs/DOM/event">event</a> du type spécifié. L'objet retourné doit être intialisé et peut être passé ensuite à <a href="/en-US/docs/DOM/element.dispatchEvent">element.dispatchEvent</a>.</p>
+Crée un [event](/en-US/docs/DOM/event) du type spécifié. L'objet retourné doit être intialisé et peut être passé ensuite à [element.dispatchEvent](/en-US/docs/DOM/element.dispatchEvent).
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var <em>event</em> = <em>document</em>.createEvent(<em>type</em>);
-</pre>
+    var event = document.createEvent(type);
 
-<ul>
- <li><code>event</code> est l'objet <a href="/en-US/docs/DOM/event">Event</a> créé.</li>
- <li><code>type</code> est une chaîne de caractères qui représente le type d'événement à créer. Les types possibles d'événement incluent <code>"UIEvents"</code>, <code>"MouseEvents"</code>, <code>"MutationEvents"</code> et <code>"HTMLEvents"</code>. Voir la section {{Anch("Notes")}} pour plus de détails.</li>
-</ul>
+- `event` est l'objet [Event](/en-US/docs/DOM/event) créé.
+- `type` est une chaîne de caractères qui représente le type d'événement à créer. Les types possibles d'événement incluent `"UIEvents"`, `"MouseEvents"`, `"MutationEvents"` et `"HTMLEvents"`. Voir la section {{Anch("Notes")}} pour plus de détails.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre>// Crée l'événement.
-var event = document.createEvent('Event');
+    // Crée l'événement.
+    var event = document.createEvent('Event');
 
-// Nomme l'événement 'build'.
-event.initEvent('build', true, true);
+    // Nomme l'événement 'build'.
+    event.initEvent('build', true, true);
 
-//  Écoute l'événement.
-elem.addEventListener('build', function (e) {
-  // e.target correspond à elem
-}, false);
+    //  Écoute l'événement.
+    elem.addEventListener('build', function (e) {
+      // e.target correspond à elem
+    }, false);
 
-// target peut être tout Element ou autre EventTarget.
-elem.dispatchEvent(event);
-</pre>
+    // target peut être tout Element ou autre EventTarget.
+    elem.dispatchEvent(event);
 
-<h3 id="Notes">Notes</h3>
+### Notes
 
-<p>Les chaînes de type d'événement appropriées pour passer à <code>createEvent ()</code> sont répertoriées dans la norme DOM - voir le tableau à l'étape 2. Gardez à l'esprit que la plupart des objets événement ont maintenant des constructeurs, qui sont la méthode recommandée pour créer des occurrences d'objet événement.</p>
+Les chaînes de type d'événement appropriées pour passer à `createEvent ()` sont répertoriées dans la norme DOM - voir le tableau à l'étape 2. Gardez à l'esprit que la plupart des objets événement ont maintenant des constructeurs, qui sont la méthode recommandée pour créer des occurrences d'objet événement.
 
-<p>Gecko prend en charge certains alias d'objet événement non standard, répertoriés ci-dessous :</p>
+Gecko prend en charge certains alias d'objet événement non standard, répertoriés ci-dessous :
 
 <table class="fullwidth-table">
- <tbody>
-  <tr>
-   <th>Event Module</th>
-   <th>Standard event object</th>
-   <th>Gecko also supports</th>
-  </tr>
-  <tr>
-   <td>Text event module</td>
-   <td><code>TextEvent</code></td>
-   <td><code>TextEvents</code></td>
-  </tr>
-  <tr>
-   <td>Keyboard event module</td>
-   <td><code>KeyboardEvent</code></td>
-   <td><code>KeyEvents</code></td>
-  </tr>
-  <tr>
-   <td>Basic events module</td>
-   <td><code>Event</code></td>
-   <td><code>Events</code></td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th>Event Module</th>
+      <th>Standard event object</th>
+      <th>Gecko also supports</th>
+    </tr>
+    <tr>
+      <td>Text event module</td>
+      <td><code>TextEvent</code></td>
+      <td><code>TextEvents</code></td>
+    </tr>
+    <tr>
+      <td>Keyboard event module</td>
+      <td><code>KeyboardEvent</code></td>
+      <td><code>KeyEvents</code></td>
+    </tr>
+    <tr>
+      <td>Basic events module</td>
+      <td><code>Event</code></td>
+      <td><code>Events</code></td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécification">Spécification</h2>
+## Spécification
 
-<ul>
- <li><a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-DocumentEvent-createEvent">DOM Level 2 Events: createEvent</a></li>
- <li><a href="http://www.w3.org/TR/DOM-Level-3-Events/#events-Events-DocumentEvent-createEvent">DOM Level 3 Events: createEvent</a></li>
-</ul>
+- [DOM Level 2 Events: createEvent](http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-DocumentEvent-createEvent)
+- [DOM Level 3 Events: createEvent](http://www.w3.org/TR/DOM-Level-3-Events/#events-Events-DocumentEvent-createEvent)
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/Guide/DOM/Events/Creating_and_triggering_events">Création et déclenchement d'événements</a></li>
-</ul>
+- [Création et déclenchement d'événements](/fr/docs/Web/Guide/DOM/Events/Creating_and_triggering_events)
diff --git a/files/fr/web/api/document/createexpression/index.md b/files/fr/web/api/document/createexpression/index.md
index 778ef4bdd4..ecef9fd21d 100644
--- a/files/fr/web/api/document/createexpression/index.md
+++ b/files/fr/web/api/document/createexpression/index.md
@@ -8,24 +8,21 @@ tags:
   - XPath
 translation_of: Web/API/Document/createExpression
 ---
-<p>{{ ApiRef("DOM") }}</p>
+{{ ApiRef("DOM") }}
 
-<p>Cette méthode compile une <code><a href="/fr/docs/Web/API/XPathExpression">XPathExpression</a></code> qui peut ensuite être utilisée pour des évaluations (répétées).</p>
+Cette méthode compile une [`XPathExpression`](/fr/docs/Web/API/XPathExpression) qui peut ensuite être utilisée pour des évaluations (répétées).
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="eval"><em>xpathExpr</em> = <em>document</em>.createExpression(<em>xpathText</em>, <em>namespaceURLMapper</em>);
-</pre>
+    xpathExpr = document.createExpression(xpathText, namespaceURLMapper);
 
-<h3 id="Arguments">Paramètres</h3>
+### Paramètres
 
-<ul>
- <li>String (<em>chaîne de caractères</em>) <code>xpathText</code> (l'expression XPath à compiler)</li>
- <li>Fonction <code>namespaceURLMapper</code> (mappe un préfixe d'espace de noms à une URL d'espace de noms (ou null si aucun n'est nécessaire)).</li>
-</ul>
+- String (_chaîne de caractères_) `xpathText` (l'expression XPath à compiler)
+- Fonction `namespaceURLMapper` (mappe un préfixe d'espace de noms à une URL d'espace de noms (ou null si aucun n'est nécessaire)).
 
-<p>{{ Fx_minversion_note(3, "Avant Firefox 3, vous pouviez appeler cette méthode sur des documents autres que celui que vous aviez prévu d'exécuter avec XPath. Sous Firefox 3, vous devez l'appeler sur le même document.") }}</p>
+{{ Fx_minversion_note(3, "Avant Firefox 3, vous pouviez appeler cette méthode sur des documents autres que celui que vous aviez prévu d'exécuter avec XPath. Sous Firefox 3, vous devez l'appeler sur le même document.") }}
 
-<h3 id="Return">Valeur retournée</h3>
+### Valeur retournée
 
-<p><a href="/fr/docs/Web/API/XPathExpression">XPathExpression</a></p>
+[XPathExpression](/fr/docs/Web/API/XPathExpression)
diff --git a/files/fr/web/api/document/createnodeiterator/index.md b/files/fr/web/api/document/createnodeiterator/index.md
index 7183969144..c89db358cf 100644
--- a/files/fr/web/api/document/createnodeiterator/index.md
+++ b/files/fr/web/api/document/createnodeiterator/index.md
@@ -7,108 +7,146 @@ tags:
   - Méthodes
 translation_of: Web/API/Document/createNodeIterator
 ---
-<p>{{APIRef("DOM")}}</p>
-
-<p>Renvoie un  nouvel objet <a href="/fr/docs/Web/API/NodeIterator"><code>NodeIterator</code></a>.</p>
-
-<h2 id="Syntax">Syntaxe</h2>
-
-<pre class="brush: js">var nodeIterator = document.createNodeIterator(root, whatToShow, filter);
-</pre>
-
-<h3 id="Valeurs">Valeurs</h3>
-
-<dl>
- <dt><code>root</code></dt>
- <dd>Le noeud racine à partir duquel commencer la traversée de {{domxref("NodeIterator")}}.</dd>
- <dt><code>whatToShow</code> {{ optional_inline() }}</dt>
- <dd>Est un <code>unsigned long</code> (<em>long non signé</em>) facultatif représentant un masque de bits créé par la combinaison des constantes de la propriété <code><a href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html#Traversal-NodeFilter">NodeFilter</a></code>. C'est un moyen pratique de filtrage pour certains types de noeuds. Il est par défaut <code>0xFFFFFFFF</code> représentant la constante <code>SHOW_ALL</code>.
- <table class="standard-table">
-  <tbody>
-   <tr>
-    <td class="header">Constante</td>
-    <td class="header">Valeur numérique</td>
-    <td class="header">Description</td>
-   </tr>
-   <tr>
-    <td><code>NodeFilter.SHOW_ALL</code></td>
-    <td><code>-1</code> (c'est la valeur numérique maximale du <code>unsigned long</code> (<em>non signé long</em>))</td>
-    <td>Affiche tous les noeuds.</td>
-   </tr>
-   <tr>
-    <td><code>NodeFilter.SHOW_ATTRIBUTE</code> {{deprecated_inline}}</td>
-    <td><code>2</code></td>
-    <td>Affiche l'attribut {{domxref("Attr")}} des noeuds. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{domxref("Attr")}} comme racine ; dans ce cas, cela signifie que le nœud d'attribut apparaîtra dans la première position de l'itération ou de la traversée. Comme les attributs ne sont jamais des enfants d'autres nœuds, ils n'apparaissent pas lors de la traversée de l'arbre du document.</td>
-   </tr>
-   <tr>
-    <td><code>NodeFilter.SHOW_CDATA_SECTION</code> {{deprecated_inline}}</td>
-    <td><code>8</code></td>
-    <td>Affiche les noeuds {{domxref("CDATASection")}}.</td>
-   </tr>
-   <tr>
-    <td><code>NodeFilter.SHOW_COMMENT</code></td>
-    <td><code>128</code></td>
-    <td>Affiche les noeuds {{domxref("Comment")}}.</td>
-   </tr>
-   <tr>
-    <td><code>NodeFilter.SHOW_DOCUMENT</code></td>
-    <td><code>256</code></td>
-    <td>Affiche les noeuds {{domxref("Document")}}.</td>
-   </tr>
-   <tr>
-    <td><code>NodeFilter.SHOW_DOCUMENT_FRAGMENT</code></td>
-    <td><code>1024</code></td>
-    <td>Affiche les noeuds {{domxref("DocumentFragment")}}.</td>
-   </tr>
-   <tr>
-    <td><code>NodeFilter.SHOW_DOCUMENT_TYPE</code></td>
-    <td><code>512</code></td>
-    <td>Affiche les noeuds {{domxref("DocumentType")}}.</td>
-   </tr>
-   <tr>
-    <td><code>NodeFilter.SHOW_ELEMENT</code></td>
-    <td><code>1</code></td>
-    <td>Affiche les noeuds {{domxref("Element")}}.</td>
-   </tr>
-   <tr>
-    <td><code>NodeFilter.SHOW_ENTITY</code> {{deprecated_inline}}</td>
-    <td><code>32</code></td>
-    <td>Affiche les noeuds {{domxref("Entity")}}. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{ domxref("Entity") }} comme racine ; dans ce cas, il signifie que le noeud d'entité {{domxref("Entity") }} apparaîtra à la première position de la traversée. Étant donné que les entités ne font pas partie de l'arborescence du document, elles n'apparaissent pas lors de la traversée de l'arborescence du document.</td>
-   </tr>
-   <tr>
-    <td><code>NodeFilter.SHOW_ENTITY_REFERENCE</code> {{deprecated_inline}}</td>
-    <td><code>16</code></td>
-    <td>Affiche les noeuds {{domxref("EntityReference")}}.</td>
-   </tr>
-   <tr>
-    <td><code>NodeFilter.SHOW_NOTATION</code> {{deprecated_inline}}</td>
-    <td><code>2048</code></td>
-    <td>Affiche les noeuds {{domxref("Notation")}}. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{domxref("Notation")}} comme racine ; dans ce cas, il signifie que le noeud {{domxref("Notation")}} apparaîtra à la première position de la traversée. Étant donné que les entités ne font pas partie de l'arborescence du document, elles n'apparaissent pas lors de la traversée de l'arborescence du document.</td>
-   </tr>
-   <tr>
-    <td><code>NodeFilter.SHOW_PROCESSING_INSTRUCTION</code></td>
-    <td><code>64</code></td>
-    <td>Affiche les noeuds {{domxref("ProcessingInstruction")}}.</td>
-   </tr>
-   <tr>
-    <td><code>NodeFilter.SHOW_TEXT</code></td>
-    <td><code>4</code></td>
-    <td>Affiche les noeuds {{domxref("Text")}}.</td>
-   </tr>
-  </tbody>
- </table>
- </dd>
- <dt><code>filter</code> {{ optional_inline() }}</dt>
- <dd>Un objet implémentant l'interface {{ domxref("NodeFilter") }} ; sa méthode <code>acceptNode()</code> sera appelée pour chaque nœud du sous-arbre basé à la racine qui est accepté comme inclus par l'indicateur whatToShow pour déterminer s'il faut ou non l'inclure dans la liste des nœuds iterables (une simple fonction de rappel peut également être utilisée à la place). La méthode devrait retourner l'un des <code>NodeFilter.FILTER_ACCEPT</code>, <code>NodeFilter.FILTER_REJECT</code> ou <code>NodeFilter.FILTER_SKIP</code>. Voir l'{{anch("Exemple")}}.</dd>
-</dl>
-
-<div class="note">
-  <p><strong>Note :</strong> Avant Gecko 12.0 {{geckoRelease("12.0")}}, cette méthode acceptait un quatrième paramètre facultatif (<code>entityReferenceExpansion</code>). Cela ne faisait pas partie de la spécification DOM4 et a donc été supprimé. Ce paramètre indiquait si les enfants des nœuds de référence d'entité étaient visibles ou non par l'itérateur. Puisque de tels noeuds n'ont jamais été créés dans les navigateurs, ce paramètre n'a eu aucun effet.</p>
-</div>
-
-<h2>Exemple</h2>
-
-<pre class="brush: js">var nodeIterator = document.createNodeIterator(
+{{APIRef("DOM")}}
+
+Renvoie un  nouvel objet [`NodeIterator`](/fr/docs/Web/API/NodeIterator).
+
+## Syntaxe
+
+```js
+var nodeIterator = document.createNodeIterator(root, whatToShow, filter);
+```
+
+### Valeurs
+
+- `root`
+  - : Le noeud racine à partir duquel commencer la traversée de {{domxref("NodeIterator")}}.
+- `whatToShow` {{ optional_inline() }}
+
+  - : Est un `unsigned long` (_long non signé_) facultatif représentant un masque de bits créé par la combinaison des constantes de la propriété [`NodeFilter`](http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html#Traversal-NodeFilter). C'est un moyen pratique de filtrage pour certains types de noeuds. Il est par défaut `0xFFFFFFFF` représentant la constante `SHOW_ALL`.
+
+    <table class="standard-table">
+      <tbody>
+        <tr>
+          <td class="header">Constante</td>
+          <td class="header">Valeur numérique</td>
+          <td class="header">Description</td>
+        </tr>
+        <tr>
+          <td><code>NodeFilter.SHOW_ALL</code></td>
+          <td>
+            <code>-1</code> (c'est la valeur numérique maximale du
+            <code>unsigned long</code> (<em>non signé long</em>))
+          </td>
+          <td>Affiche tous les noeuds.</td>
+        </tr>
+        <tr>
+          <td>
+            <code>NodeFilter.SHOW_ATTRIBUTE</code> {{deprecated_inline}}
+          </td>
+          <td><code>2</code></td>
+          <td>
+            Affiche l'attribut {{domxref("Attr")}} des noeuds. Cela n'a de sens
+            que lors de la création d'un {{domxref("TreeWalker")}} avec un
+            noeud {{domxref("Attr")}} comme racine ; dans ce cas, cela signifie
+            que le nœud d'attribut apparaîtra dans la première position de
+            l'itération ou de la traversée. Comme les attributs ne sont jamais des
+            enfants d'autres nœuds, ils n'apparaissent pas lors de la traversée de
+            l'arbre du document.
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <code>NodeFilter.SHOW_CDATA_SECTION</code> {{deprecated_inline}}
+          </td>
+          <td><code>8</code></td>
+          <td>Affiche les noeuds {{domxref("CDATASection")}}.</td>
+        </tr>
+        <tr>
+          <td><code>NodeFilter.SHOW_COMMENT</code></td>
+          <td><code>128</code></td>
+          <td>Affiche les noeuds {{domxref("Comment")}}.</td>
+        </tr>
+        <tr>
+          <td><code>NodeFilter.SHOW_DOCUMENT</code></td>
+          <td><code>256</code></td>
+          <td>Affiche les noeuds {{domxref("Document")}}.</td>
+        </tr>
+        <tr>
+          <td><code>NodeFilter.SHOW_DOCUMENT_FRAGMENT</code></td>
+          <td><code>1024</code></td>
+          <td>Affiche les noeuds {{domxref("DocumentFragment")}}.</td>
+        </tr>
+        <tr>
+          <td><code>NodeFilter.SHOW_DOCUMENT_TYPE</code></td>
+          <td><code>512</code></td>
+          <td>Affiche les noeuds {{domxref("DocumentType")}}.</td>
+        </tr>
+        <tr>
+          <td><code>NodeFilter.SHOW_ELEMENT</code></td>
+          <td><code>1</code></td>
+          <td>Affiche les noeuds {{domxref("Element")}}.</td>
+        </tr>
+        <tr>
+          <td><code>NodeFilter.SHOW_ENTITY</code> {{deprecated_inline}}</td>
+          <td><code>32</code></td>
+          <td>
+            Affiche les noeuds {{domxref("Entity")}}. Cela n'a de sens que
+            lors de la création d'un {{domxref("TreeWalker")}} avec un noeud
+            {{ domxref("Entity") }} comme racine ; dans ce cas, il signifie
+            que le noeud d'entité {{domxref("Entity") }} apparaîtra à la
+            première position de la traversée. Étant donné que les entités ne font
+            pas partie de l'arborescence du document, elles n'apparaissent pas lors
+            de la traversée de l'arborescence du document.
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <code>NodeFilter.SHOW_ENTITY_REFERENCE</code>
+            {{deprecated_inline}}
+          </td>
+          <td><code>16</code></td>
+          <td>Affiche les noeuds {{domxref("EntityReference")}}.</td>
+        </tr>
+        <tr>
+          <td>
+            <code>NodeFilter.SHOW_NOTATION</code> {{deprecated_inline}}
+          </td>
+          <td><code>2048</code></td>
+          <td>
+            Affiche les noeuds {{domxref("Notation")}}. Cela n'a de sens
+            que lors de la création d'un {{domxref("TreeWalker")}} avec un
+            noeud {{domxref("Notation")}} comme racine ; dans ce cas, il
+            signifie que le noeud {{domxref("Notation")}} apparaîtra à la
+            première position de la traversée. Étant donné que les entités ne font
+            pas partie de l'arborescence du document, elles n'apparaissent pas lors
+            de la traversée de l'arborescence du document.
+          </td>
+        </tr>
+        <tr>
+          <td><code>NodeFilter.SHOW_PROCESSING_INSTRUCTION</code></td>
+          <td><code>64</code></td>
+          <td>
+            Affiche les noeuds {{domxref("ProcessingInstruction")}}.
+          </td>
+        </tr>
+        <tr>
+          <td><code>NodeFilter.SHOW_TEXT</code></td>
+          <td><code>4</code></td>
+          <td>Affiche les noeuds {{domxref("Text")}}.</td>
+        </tr>
+      </tbody>
+    </table>
+
+- `filter` {{ optional_inline() }}
+  - : Un objet implémentant l'interface {{ domxref("NodeFilter") }} ; sa méthode `acceptNode()` sera appelée pour chaque nœud du sous-arbre basé à la racine qui est accepté comme inclus par l'indicateur whatToShow pour déterminer s'il faut ou non l'inclure dans la liste des nœuds iterables (une simple fonction de rappel peut également être utilisée à la place). La méthode devrait retourner l'un des `NodeFilter.FILTER_ACCEPT`, `NodeFilter.FILTER_REJECT` ou `NodeFilter.FILTER_SKIP`. Voir l'{{anch("Exemple")}}.
+
+> **Note :** Avant Gecko 12.0 {{geckoRelease("12.0")}}, cette méthode acceptait un quatrième paramètre facultatif (`entityReferenceExpansion`). Cela ne faisait pas partie de la spécification DOM4 et a donc été supprimé. Ce paramètre indiquait si les enfants des nœuds de référence d'entité étaient visibles ou non par l'itérateur. Puisque de tels noeuds n'ont jamais été créés dans les navigateurs, ce paramètre n'a eu aucun effet.
+
+## Exemple
+
+```js
+var nodeIterator = document.createNodeIterator(
     document.body,
     NodeFilter.SHOW_ELEMENT,
     function(node) {
@@ -121,19 +159,16 @@ var currentNode;
 while (currentNode = nodeIterator.nextNode()) {
   pars.push(currentNode);
 }
+```
 
-</pre>
+### Compatibilité des navigateurs
 
-<h3 id="Specification">Compatibilité des navigateurs</h3>
+Pris en charge dans FF 3.5+, Chrome 1+, Opera 9+, Safari 3+, IE9+, Edge
 
-<p>Pris en charge dans FF 3.5+, Chrome 1+, Opera 9+, Safari 3+, IE9+, Edge</p>
+## Voir aussi
 
-<h2 id="Specification">Voir aussi</h2>
+- [createNodeIterator sur MDN](/fr/docs/Web/API/Document/createNodeIterator)
 
-<ul>
- <li><a href="/fr/docs/Web/API/Document/createNodeIterator">createNodeIterator sur MDN</a></li>
-</ul>
+## Spécifications
 
-<h2 id="Specification">Spécifications</h2>
-
-<p><a href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html#Traversal-NodeIterator">DOM Level 2 Traversal : NodeIterator</a></p>
+[DOM Level 2 Traversal : NodeIterator](http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html#Traversal-NodeIterator)
diff --git a/files/fr/web/api/document/creatensresolver/index.md b/files/fr/web/api/document/creatensresolver/index.md
index 1311c87a86..b4284bf5c7 100644
--- a/files/fr/web/api/document/creatensresolver/index.md
+++ b/files/fr/web/api/document/creatensresolver/index.md
@@ -8,42 +8,35 @@ tags:
   - XPath
 translation_of: Web/API/Document/createNSResolver
 ---
-<p>{{ ApiRef("DOM") }}</p>
+{{ ApiRef("DOM") }}
 
-<p>Crée un <code>XPathNSResolver</code> qui résout les espaces de noms en respectant les définitions dans la portée pour un noeud spécifié.</p>
+Crée un `XPathNSResolver` qui résout les espaces de noms en respectant les définitions dans la portée pour un noeud spécifié.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="eval"><em>nsResolver</em> = document.createNSResolver(<em>node</em>);
-</pre>
+    nsResolver = document.createNSResolver(node);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<ul>
- <li><code>node</code> est un noeud à utiliser comme contexte pour la résolution de l'espace de noms.</li>
-</ul>
+- `node` est un noeud à utiliser comme contexte pour la résolution de l'espace de noms.
 
-<h3 id="Valeur_retournée">Valeur retournée</h3>
+### Valeur retournée
 
-<ul>
- <li><code>nsResolver</code> est un objet XPathNSResolver.</li>
-</ul>
+- `nsResolver` est un objet XPathNSResolver.
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p>Adapte n'importe quel noeud DOM pour résoudre les espaces de noms afin qu'une expression <a href="/fr/docs/XPath">XPath</a> puisse être facilement évaluée par rapport au contexte du nœud et son emplacement dans le document. Cet adaptateur fonctionne comme la méthode  <code>lookupNamespaceURI</code>  du DOM de niveau 3 sur les noeuds lors de la résolution de <code>namespaceURI</code> à partir d'un préfixe donné en utilisant l'information disponible dans la hiérarchie des noeuds au moment de l'appel de <code>lookupNamespaceURI</code>. Résout aussi correctement le préfixe implicite <code>xml</code>.</p>
+Adapte n'importe quel noeud DOM pour résoudre les espaces de noms afin qu'une expression [XPath](/fr/docs/XPath) puisse être facilement évaluée par rapport au contexte du nœud et son emplacement dans le document. Cet adaptateur fonctionne comme la méthode  `lookupNamespaceURI`  du DOM de niveau 3 sur les noeuds lors de la résolution de `namespaceURI` à partir d'un préfixe donné en utilisant l'information disponible dans la hiérarchie des noeuds au moment de l'appel de `lookupNamespaceURI`. Résout aussi correctement le préfixe implicite `xml`.
 
-<p>Notez que XPath définit QNames sans préfixe pour correspondre uniquement aux éléments d'un espace de noms null. XPath n'a aucun moyen de récupérer l'espace de noms par défaut tel qu'il est appliqué à une référence d'élément régulier (par exemple, <code>p[@id='_myid'</code>] pour <code>xmlns='http://www.w3.org/1999/xhtml'</code>). Pour faire correspondre les éléments par défaut dans un espace de noms non nul, vous devez soit faire référence à un élément particulier en utilisant un format tel que <code>*namespace-uri()=http://www.w3.org/1999/xhtml and name()=p[@id='_myid']</code> (<a href="/fr/docs/Web/JavaScript/Introduction_%C3%A0_l_utilisation_de_XPath_avec_JavaScript#Using_XPath_functions_to_reference_elements_with_its_default_namespace">cette approche</a> fonctionne bien pour les expressions XPath dynamiques dans lesquelles les espaces de noms pourraient ne pas être connus), soit utiliser des tests de noms préfixés et créer un résolveur d'espace de nom mappant le préfixe à l'espace de nom. Pour en savoir plus sur <a href="/fr/docs/Web/JavaScript/Introduction_%C3%A0_l_utilisation_de_XPath_avec_JavaScript#Impl%C3%A9mentation_d%27un_r%C3%A9solveur">comment créer un résolveur d'espace de nom défini par l'utilisateur</a> si vous souhaitez adopter cette dernière approche.</p>
+Notez que XPath définit QNames sans préfixe pour correspondre uniquement aux éléments d'un espace de noms null. XPath n'a aucun moyen de récupérer l'espace de noms par défaut tel qu'il est appliqué à une référence d'élément régulier (par exemple, `p[@id='_myid'`] pour `xmlns='http://www.w3.org/1999/xhtml'`). Pour faire correspondre les éléments par défaut dans un espace de noms non nul, vous devez soit faire référence à un élément particulier en utilisant un format tel que `*namespace-uri()=http://www.w3.org/1999/xhtml and name()=p[@id='_myid']` ([cette approche](/fr/docs/Web/JavaScript/Introduction_%C3%A0_l_utilisation_de_XPath_avec_JavaScript#Using_XPath_functions_to_reference_elements_with_its_default_namespace) fonctionne bien pour les expressions XPath dynamiques dans lesquelles les espaces de noms pourraient ne pas être connus), soit utiliser des tests de noms préfixés et créer un résolveur d'espace de nom mappant le préfixe à l'espace de nom. Pour en savoir plus sur [comment créer un résolveur d'espace de nom défini par l'utilisateur](/fr/docs/Web/JavaScript/Introduction_%C3%A0_l_utilisation_de_XPath_avec_JavaScript#Impl%C3%A9mentation_d%27un_r%C3%A9solveur) si vous souhaitez adopter cette dernière approche.
 
-<p><code>createNSResolver</code> a été introduit dans DOM Niveau 3.</p>
+`createNSResolver` a été introduit dans DOM Niveau 3.
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/en/DOM/document.evaluate">document.evaluate</a></li>
- <li><a href="/fr/docs/Web/JavaScript/Introduction_%C3%A0_l_utilisation_de_XPath_avec_JavaScript">Introduction à l'utilisation de XPath avec JavaScript</a></li>
-</ul>
+- [document.evaluate](/en/DOM/document.evaluate)
+- [Introduction à l'utilisation de XPath avec JavaScript](/fr/docs/Web/JavaScript/Introduction_%C3%A0_l_utilisation_de_XPath_avec_JavaScript)
 
-<h2 id="Specification">Spécifications</h2>
+## Spécifications
 
-<p><a href="http://www.w3.org/TR/DOM-Level-3-XPath/xpath.html#XPathEvaluator-createNSResolver">DOM Level 3 XPath Specification : createNSResolver</a></p>
+[DOM Level 3 XPath Specification : createNSResolver](http://www.w3.org/TR/DOM-Level-3-XPath/xpath.html#XPathEvaluator-createNSResolver)
diff --git a/files/fr/web/api/document/createprocessinginstruction/index.md b/files/fr/web/api/document/createprocessinginstruction/index.md
index 0bdd5ee83f..48fd8b5010 100644
--- a/files/fr/web/api/document/createprocessinginstruction/index.md
+++ b/files/fr/web/api/document/createprocessinginstruction/index.md
@@ -12,44 +12,38 @@ tags:
   - instructions
 translation_of: Web/API/Document/createProcessingInstruction
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p><code>createProcessingInstruction()</code> crée un nouveau noeud d'instruction de traitement et le renvoie.</p>
+`createProcessingInstruction()` crée un nouveau noeud d'instruction de traitement et le renvoie.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="eval"><em>Processing instruction node</em> = document.createProcessingInstruction(target, data)
-</pre>
+    Processing instruction node = document.createProcessingInstruction(target, data)
 
-<h3 id="Parameters">Paramètres</h3>
+### Paramètres
 
-<ul>
- <li><code>Processing Instruction node</code> est un noeud {{domxref("ProcessingInstruction")}}.</li>
- <li><code>target</code> fait référence à la partie cible du noeud d'instructions de traitement (par exemple, &lt;?<em>target</em> ... ?&gt;).</li>
- <li><code>data</code> est une string (<em>chaîne de caractères</em>) contenant les données à ajouter aux données du noeud.</li>
-</ul>
+- `Processing Instruction node` est un noeud {{domxref("ProcessingInstruction")}}.
+- `target` fait référence à la partie cible du noeud d'instructions de traitement (par exemple, \<?_target_ ... ?>).
+- `data` est une string (_chaîne de caractères_) contenant les données à ajouter aux données du noeud.
 
-<h3 id="Notes">Exceptions</h3>
+### Exceptions
 
-<dl>
- <dt><code>NOT_SUPPORTED_ERR</code></dt>
- <dd>Lancée si vous tentez de créer un noeud d'instructions de traitement sur un document HTML dans Gecko 9 {{ geckoRelease("9.0") }} ou antérieurs. Dans Gecko 10.0 {{ geckoRelease("10.0") }} et ultérieurs, vous pouvez utiliser cette méthode sur des documents HTML.</dd>
- <dt><code>DOM_INVALID_CHARACTER</code></dt>
- <dd>Lancée si vous essayez d'ajouter une cible d'instruction de traitement invalide (ce devrait être le cas avec le nom XML et toutes les combinaisons des lettres "xml"), ou si la séquence d'instructions de traitement de fermeture ("?&gt;") est ajoutée aux données. Les données fournies par l'utilisateur ne peuvent donc pas être utilisées en toute sécurité sans échappement ou autres moyens de faire face à de telles situations.</dd>
-</dl>
+- `NOT_SUPPORTED_ERR`
+  - : Lancée si vous tentez de créer un noeud d'instructions de traitement sur un document HTML dans Gecko 9 {{ geckoRelease("9.0") }} ou antérieurs. Dans Gecko 10.0 {{ geckoRelease("10.0") }} et ultérieurs, vous pouvez utiliser cette méthode sur des documents HTML.
+- `DOM_INVALID_CHARACTER`
+  - : Lancée si vous essayez d'ajouter une cible d'instruction de traitement invalide (ce devrait être le cas avec le nom XML et toutes les combinaisons des lettres "xml"), ou si la séquence d'instructions de traitement de fermeture ("?>") est ajoutée aux données. Les données fournies par l'utilisateur ne peuvent donc pas être utilisées en toute sécurité sans échappement ou autres moyens de faire face à de telles situations.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre>var docu = new DOMParser().parseFromString('&lt;xml&gt;&lt;/xml&gt;',  "application/xml")
+    var docu = new DOMParser().parseFromString('<xml></xml>',  "application/xml")
 
-var pi = docu.createProcessingInstruction('xml-stylesheet', 'href="mycss.css" type="text/css"');
+    var pi = docu.createProcessingInstruction('xml-stylesheet', 'href="mycss.css" type="text/css"');
 
-docu.insertBefore(pi, docu.firstChild);
+    docu.insertBefore(pi, docu.firstChild);
 
-alert(new XMLSerializer().serializeToString(docu));
-// Affiche: &lt;?xml-stylesheet href="mycss.css" type="text/css"?&gt;&lt;xml/&gt;
-</pre>
+    alert(new XMLSerializer().serializeToString(docu));
+    // Affiche: <?xml-stylesheet href="mycss.css" type="text/css"?><xml/>
 
-<h2 id="Specification">Spécifications</h2>
+## Spécifications
 
-<p><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-document-createprocessinginstruction">DOM 4: createProcessingInstruction</a></p>
+[DOM 4: createProcessingInstruction](http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-document-createprocessinginstruction)
diff --git a/files/fr/web/api/document/createrange/index.md b/files/fr/web/api/document/createrange/index.md
index 9ef3bffc27..c40f105f7f 100644
--- a/files/fr/web/api/document/createrange/index.md
+++ b/files/fr/web/api/document/createrange/index.md
@@ -8,31 +8,29 @@ tags:
   - Méthodes
 translation_of: Web/API/Document/createRange
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p>Retourne un objet {{domxref("Range")}}.</p>
+Retourne un objet {{domxref("Range")}}.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">range = document.createRange();
-</pre>
+    range = document.createRange();
 
-<p><code>range</code> devient un objet {{domxref("Range")}}.</p>
+`range` devient un objet {{domxref("Range")}}.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush:js">var range = document.createRange();
+```js
+var range = document.createRange();
 
 range.setStart(startNode, startOffset);
 range.setEnd(endNode, endOffset);
-</pre>
+```
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p>Une fois un objet <code>Range</code> créé, il est nécessaire de spécifier les limites de départ et de fin avant de pouvoir utiliser la plupart des méthodes.</p>
+Une fois un objet `Range` créé, il est nécessaire de spécifier les limites de départ et de fin avant de pouvoir utiliser la plupart des méthodes.
 
-<h2 id="Specification">Spécification</h2>
+## Spécification
 
-<ul>
- <li><a href="https://www.w3.org/TR/2000/REC-DOM-Level-2-Traversal-Range-20001113/ranges.html#Level-2-DocumentRange-idl">DOM Level 2 Range: DocumentRange.createRange</a></li>
-</ul>
+- [DOM Level 2 Range: DocumentRange.createRange](https://www.w3.org/TR/2000/REC-DOM-Level-2-Traversal-Range-20001113/ranges.html#Level-2-DocumentRange-idl)
diff --git a/files/fr/web/api/document/createtextnode/index.md b/files/fr/web/api/document/createtextnode/index.md
index 7fc4bfe701..805d83081f 100644
--- a/files/fr/web/api/document/createtextnode/index.md
+++ b/files/fr/web/api/document/createtextnode/index.md
@@ -8,71 +8,53 @@ tags:
   - Reference
 translation_of: Web/API/Document/createTextNode
 ---
-<p>{{APIRef("DOM")}}</p>
+{{APIRef("DOM")}}
 
-<p>Crée un nouveau nœud de texte.</p>
+Crée un nouveau nœud de texte.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var>var text</var> = document.createTextNode(<var>données</var>);
-</pre>
+    var text = document.createTextNode(données);
 
-<ul>
- <li><code>texte</code> est un nœud de texte.</li>
- <li><code>donnees</code> est une chaîne contenant les données à placer dans le nœud de texte.</li>
-</ul>
+- `texte` est un nœud de texte.
+- `donnees` est une chaîne contenant les données à placer dans le nœud de texte.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush: html">&lt;!DOCTYPE html&gt;
-&lt;html lang="en"&gt;
-&lt;head&gt;
-&lt;title&gt;createTextNode example&lt;/title&gt;
-&lt;script&gt;
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>createTextNode example</title>
+<script>
 function addTextNode(text) {
   var newtext = document.createTextNode(text),
       p1 = document.getElementById("p1");
 
   p1.appendChild(newtext);
 }
-&lt;/script&gt;
-&lt;/head&gt;
+</script>
+</head>
 
-&lt;body&gt;
-  &lt;button onclick="addTextNode('YES! ');"&gt;YES!&lt;/button&gt;
-  &lt;button onclick="addTextNode('NO! ');"&gt;NO!&lt;/button&gt;
-  &lt;button onclick="addTextNode('WE CAN! ');"&gt;WE CAN!&lt;/button&gt;
+<body>
+  <button onclick="addTextNode('YES! ');">YES!</button>
+  <button onclick="addTextNode('NO! ');">NO!</button>
+  <button onclick="addTextNode('WE CAN! ');">WE CAN!</button>
 
-  &lt;hr /&gt;
+  <hr />
 
-  &lt;p id="p1"&gt;First line of paragraph.&lt;/p&gt;
-&lt;/body&gt;
-&lt;/html&gt;</pre>
+  <p id="p1">First line of paragraph.</p>
+</body>
+</html>
+```
 
-<h2 id="Sp.C3.A9cification">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("DOM3 Core", "core.html#ID-1975348127", "Document.createTextNode()")}}</td>
-   <td>{{Spec2("DOM3 Core")}}</td>
-   <td>Pas de changement</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("DOM2 Core", "core.html#ID-1975348127", "Document.createTextNode()")}}</td>
-   <td>{{Spec2("DOM2 Core")}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                | Statut                       | Commentaire         |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------------- |
+| {{SpecName("DOM3 Core", "core.html#ID-1975348127", "Document.createTextNode()")}} | {{Spec2("DOM3 Core")}} | Pas de changement   |
+| {{SpecName("DOM2 Core", "core.html#ID-1975348127", "Document.createTextNode()")}} | {{Spec2("DOM2 Core")}} | Définition initiale |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Document.createTextNode")}}</p>
+{{Compat("api.Document.createTextNode")}}
diff --git a/files/fr/web/api/document/createtreewalker/index.md b/files/fr/web/api/document/createtreewalker/index.md
index 66c736285f..d3380d78bb 100644
--- a/files/fr/web/api/document/createtreewalker/index.md
+++ b/files/fr/web/api/document/createtreewalker/index.md
@@ -11,108 +11,146 @@ tags:
   - Noeuds
 translation_of: Web/API/Document/createTreeWalker
 ---
-<div>{{ApiRef("Document")}}</div>
-
-<p>La méthode de création <strong><code>Document.createTreeWalker()</code></strong> renvoie un nouvel objet {{domxref("TreeWalker")}}.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><em>treeWalker</em> = <em>document</em>.createTreeWalker(<em>root</em>, <em>whatToShow</em>, <em>filter</em>, <em>entityReferenceExpansion</em>);
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><em>root </em></dt>
- <dd>est le {{domxref("Node")}} (<em>noeud</em>) racine du {{domxref("TreeWalker")}} à traverser. Généralement, ce sera un élément appartenant au document.</dd>
- <dt><em>whatToShow {{optional_inline}}</em></dt>
- <dd>est un <code>unsigned long</code> (<em>long non signé</em>) facultatif représentant un masque de bits créé par combinaison des propriétés de constante de <code><a href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html#Traversal-NodeFilter">NodeFilter</a></code>. C'est un moyen pratique de filtrage pour certains types de nœuds. Par défaut <code>0xFFFFFFFF</code> représentant la constante <code>SHOW_ALL</code>.
- <table class="standard-table">
-  <tbody>
-   <tr>
-    <td class="header">Constante</td>
-    <td class="header">Valeur numérique</td>
-    <td class="header">Description</td>
-   </tr>
-   <tr>
-    <td><code>NodeFilter.SHOW_ALL</code></td>
-    <td><code>-1</code> (c'est la valeur numérique maximale du <code>unsigned long</code> (<em>non signé long</em>))</td>
-    <td>Affiche tous les noeuds.</td>
-   </tr>
-   <tr>
-    <td><code>NodeFilter.SHOW_ATTRIBUTE</code> {{deprecated_inline}}</td>
-    <td><code>2</code></td>
-    <td>Affiche l'attribut {{domxref("Attr")}} des noeuds. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{domxref("Attr")}} comme racine ; dans ce cas, cela signifie que le nœud d'attribut apparaîtra dans la première position de l'itération ou de la traversée. Comme les attributs ne sont jamais des enfants d'autres nœuds, ils n'apparaissent pas lors de la traversée de l'arbre du document.</td>
-   </tr>
-   <tr>
-    <td><code>NodeFilter.SHOW_CDATA_SECTION</code> {{deprecated_inline}}</td>
-    <td><code>8</code></td>
-    <td>Affiche les noeuds {{domxref("CDATASection")}}.</td>
-   </tr>
-   <tr>
-    <td><code>NodeFilter.SHOW_COMMENT</code></td>
-    <td><code>128</code></td>
-    <td>Affiche les noeuds {{domxref("Comment")}}.</td>
-   </tr>
-   <tr>
-    <td><code>NodeFilter.SHOW_DOCUMENT</code></td>
-    <td><code>256</code></td>
-    <td>Affiche les noeuds {{domxref("Document")}}.</td>
-   </tr>
-   <tr>
-    <td><code>NodeFilter.SHOW_DOCUMENT_FRAGMENT</code></td>
-    <td><code>1024</code></td>
-    <td>Affiche les noeuds {{domxref("DocumentFragment")}}.</td>
-   </tr>
-   <tr>
-    <td><code>NodeFilter.SHOW_DOCUMENT_TYPE</code></td>
-    <td><code>512</code></td>
-    <td>Affiche les noeuds {{domxref("DocumentType")}}.</td>
-   </tr>
-   <tr>
-    <td><code>NodeFilter.SHOW_ELEMENT</code></td>
-    <td><code>1</code></td>
-    <td>Affiche les noeuds {{domxref("Element")}}.</td>
-   </tr>
-   <tr>
-    <td><code>NodeFilter.SHOW_ENTITY</code> {{deprecated_inline}}</td>
-    <td><code>32</code></td>
-    <td>Affiche les noeuds {{domxref("Entity")}}. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{ domxref("Entity") }} comme racine ; dans ce cas, il signifie que le noeud d'entité {{domxref("Entity") }} apparaîtra à la première position de la traversée. Étant donné que les entités ne font pas partie de l'arborescence du document, elles n'apparaissent pas lors de la traversée de l'arborescence du document.</td>
-   </tr>
-   <tr>
-    <td><code>NodeFilter.SHOW_ENTITY_REFERENCE</code> {{deprecated_inline}}</td>
-    <td><code>16</code></td>
-    <td>Affiche les noeuds {{domxref("EntityReference")}}.</td>
-   </tr>
-   <tr>
-    <td><code>NodeFilter.SHOW_NOTATION</code> {{deprecated_inline}}</td>
-    <td><code>2048</code></td>
-    <td>Affiche les noeuds {{domxref("Notation")}}. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{domxref("Notation")}} comme racine ; dans ce cas, il signifie que le noeud {{domxref("Notation")}} apparaîtra à la première position de la traversée. Étant donné que les entités ne font pas partie de l'arborescence du document, elles n'apparaissent pas lors de la traversée de l'arborescence du document.</td>
-   </tr>
-   <tr>
-    <td><code>NodeFilter.SHOW_PROCESSING_INSTRUCTION</code></td>
-    <td><code>64</code></td>
-    <td>Affiche les noeuds {{domxref("ProcessingInstruction")}}.</td>
-   </tr>
-   <tr>
-    <td><code>NodeFilter.SHOW_TEXT</code></td>
-    <td><code>4</code></td>
-    <td>Affiche les noeuds {{domxref("Text")}}.</td>
-   </tr>
-  </tbody>
- </table>
- </dd>
- <dt><em>filter <em>{{optional_inline}}</em></em></dt>
- <dd>est un {{domxref("NodeFilter")}} (<em>filtre de noeud</em>) facultatif, c'est à dire un objet avec une méthode <code>acceptNode</code> appelé par {{domxref("TreeWalker")}} pour déterminer s'il doit accepter ou non un nœud qui a passé le test <code>whatToShow</code>.</dd>
- <dt><em>entityReferenceExpansion<em> {{optional_inline}}</em></em> <em>{{obsolete_inline}}</em></dt>
- <dd>est un {{domxref("Boolean")}} (<em>booléen</em>) indiquant si, lors de la suppression d'une {{domxref("EntityReference")}}, son sous-arbre doit être supprimé en même temps.</dd>
-</dl>
-
-<h2 id="Exemple">Exemple</h2>
-
-<p>L'exemple suivant passe à travers tous les noeuds du "body" (<em>corps du document</em>), réduit l'ensemble des noeuds aux éléments, passe simplement à travers chaque noeud acceptable (à la place, il pourrait réduire l'ensemble dans la méthode <code>acceptNode()</code>), puis utilise l'itérateur de traversée de l'arbre créé pour avancer à travers les nœuds (maintenant tous les éléments) et les écrire dans un tableau.</p>
-
-<pre class="brush: js">var treeWalker = document.createTreeWalker(
+{{ApiRef("Document")}}
+
+La méthode de création **`Document.createTreeWalker()`** renvoie un nouvel objet {{domxref("TreeWalker")}}.
+
+## Syntaxe
+
+    treeWalker = document.createTreeWalker(root, whatToShow, filter, entityReferenceExpansion);
+
+### Paramètres
+
+- _root_
+  - : est le {{domxref("Node")}} (_noeud_) racine du {{domxref("TreeWalker")}} à traverser. Généralement, ce sera un élément appartenant au document.
+- _whatToShow {{optional_inline}}_
+
+  - : est un `unsigned long` (_long non signé_) facultatif représentant un masque de bits créé par combinaison des propriétés de constante de [`NodeFilter`](http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html#Traversal-NodeFilter). C'est un moyen pratique de filtrage pour certains types de nœuds. Par défaut `0xFFFFFFFF` représentant la constante `SHOW_ALL`.
+
+    <table class="standard-table">
+      <tbody>
+        <tr>
+          <td class="header">Constante</td>
+          <td class="header">Valeur numérique</td>
+          <td class="header">Description</td>
+        </tr>
+        <tr>
+          <td><code>NodeFilter.SHOW_ALL</code></td>
+          <td>
+            <code>-1</code> (c'est la valeur numérique maximale du
+            <code>unsigned long</code> (<em>non signé long</em>))
+          </td>
+          <td>Affiche tous les noeuds.</td>
+        </tr>
+        <tr>
+          <td>
+            <code>NodeFilter.SHOW_ATTRIBUTE</code> {{deprecated_inline}}
+          </td>
+          <td><code>2</code></td>
+          <td>
+            Affiche l'attribut {{domxref("Attr")}} des noeuds. Cela n'a de sens
+            que lors de la création d'un {{domxref("TreeWalker")}} avec un
+            noeud {{domxref("Attr")}} comme racine ; dans ce cas, cela signifie
+            que le nœud d'attribut apparaîtra dans la première position de
+            l'itération ou de la traversée. Comme les attributs ne sont jamais des
+            enfants d'autres nœuds, ils n'apparaissent pas lors de la traversée de
+            l'arbre du document.
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <code>NodeFilter.SHOW_CDATA_SECTION</code> {{deprecated_inline}}
+          </td>
+          <td><code>8</code></td>
+          <td>Affiche les noeuds {{domxref("CDATASection")}}.</td>
+        </tr>
+        <tr>
+          <td><code>NodeFilter.SHOW_COMMENT</code></td>
+          <td><code>128</code></td>
+          <td>Affiche les noeuds {{domxref("Comment")}}.</td>
+        </tr>
+        <tr>
+          <td><code>NodeFilter.SHOW_DOCUMENT</code></td>
+          <td><code>256</code></td>
+          <td>Affiche les noeuds {{domxref("Document")}}.</td>
+        </tr>
+        <tr>
+          <td><code>NodeFilter.SHOW_DOCUMENT_FRAGMENT</code></td>
+          <td><code>1024</code></td>
+          <td>Affiche les noeuds {{domxref("DocumentFragment")}}.</td>
+        </tr>
+        <tr>
+          <td><code>NodeFilter.SHOW_DOCUMENT_TYPE</code></td>
+          <td><code>512</code></td>
+          <td>Affiche les noeuds {{domxref("DocumentType")}}.</td>
+        </tr>
+        <tr>
+          <td><code>NodeFilter.SHOW_ELEMENT</code></td>
+          <td><code>1</code></td>
+          <td>Affiche les noeuds {{domxref("Element")}}.</td>
+        </tr>
+        <tr>
+          <td><code>NodeFilter.SHOW_ENTITY</code> {{deprecated_inline}}</td>
+          <td><code>32</code></td>
+          <td>
+            Affiche les noeuds {{domxref("Entity")}}. Cela n'a de sens que
+            lors de la création d'un {{domxref("TreeWalker")}} avec un noeud
+            {{ domxref("Entity") }} comme racine ; dans ce cas, il signifie
+            que le noeud d'entité {{domxref("Entity") }} apparaîtra à la
+            première position de la traversée. Étant donné que les entités ne font
+            pas partie de l'arborescence du document, elles n'apparaissent pas lors
+            de la traversée de l'arborescence du document.
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <code>NodeFilter.SHOW_ENTITY_REFERENCE</code>
+            {{deprecated_inline}}
+          </td>
+          <td><code>16</code></td>
+          <td>Affiche les noeuds {{domxref("EntityReference")}}.</td>
+        </tr>
+        <tr>
+          <td>
+            <code>NodeFilter.SHOW_NOTATION</code> {{deprecated_inline}}
+          </td>
+          <td><code>2048</code></td>
+          <td>
+            Affiche les noeuds {{domxref("Notation")}}. Cela n'a de sens
+            que lors de la création d'un {{domxref("TreeWalker")}} avec un
+            noeud {{domxref("Notation")}} comme racine ; dans ce cas, il
+            signifie que le noeud {{domxref("Notation")}} apparaîtra à la
+            première position de la traversée. Étant donné que les entités ne font
+            pas partie de l'arborescence du document, elles n'apparaissent pas lors
+            de la traversée de l'arborescence du document.
+          </td>
+        </tr>
+        <tr>
+          <td><code>NodeFilter.SHOW_PROCESSING_INSTRUCTION</code></td>
+          <td><code>64</code></td>
+          <td>
+            Affiche les noeuds {{domxref("ProcessingInstruction")}}.
+          </td>
+        </tr>
+        <tr>
+          <td><code>NodeFilter.SHOW_TEXT</code></td>
+          <td><code>4</code></td>
+          <td>Affiche les noeuds {{domxref("Text")}}.</td>
+        </tr>
+      </tbody>
+    </table>
+
+- _filter _{{optional_inline}}\*\*
+  - : est un {{domxref("NodeFilter")}} (_filtre de noeud_) facultatif, c'est à dire un objet avec une méthode `acceptNode` appelé par {{domxref("TreeWalker")}} pour déterminer s'il doit accepter ou non un nœud qui a passé le test `whatToShow`.
+- _entityReferenceExpansion _{{optional_inline}}\*\* _{{obsolete_inline}}_
+  - : est un {{domxref("Boolean")}} (_booléen_) indiquant si, lors de la suppression d'une {{domxref("EntityReference")}}, son sous-arbre doit être supprimé en même temps.
+
+## Exemple
+
+L'exemple suivant passe à travers tous les noeuds du "body" (_corps du document_), réduit l'ensemble des noeuds aux éléments, passe simplement à travers chaque noeud acceptable (à la place, il pourrait réduire l'ensemble dans la méthode `acceptNode()`), puis utilise l'itérateur de traversée de l'arbre créé pour avancer à travers les nœuds (maintenant tous les éléments) et les écrire dans un tableau.
+
+```js
+var treeWalker = document.createTreeWalker(
   document.body,
   NodeFilter.SHOW_ELEMENT,
   { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
@@ -122,36 +160,19 @@ translation_of: Web/API/Document/createTreeWalker
 var nodeList = [];
 
 while(treeWalker.nextNode()) nodeList.push(treeWalker.currentNode);
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#dom-document-createtreewalker', 'Document.createTreeWalker')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Suppression du paramètre <code>expandEntityReferences</code>. Les paramètres facultatifs  <code>whatToShow</code> et <code>filter</code> .</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#NodeIteratorFactory-createTreeWalker', 'Document.createTreeWalker')}}</td>
-   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Document.createTreeWalker")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>L'interface de l'objet qu'il crée : {{domxref("TreeWalker")}}.</li>
-</ul>
+```
+
+## Spécifications
+
+| Spécification                                                                                                                                                    | Statut                                       | Commentaire                                                                                               |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | --------------------------------------------------------------------------------------------------------- |
+| {{SpecName('DOM WHATWG', '#dom-document-createtreewalker', 'Document.createTreeWalker')}}                                         | {{Spec2('DOM WHATWG')}}             | Suppression du paramètre `expandEntityReferences`. Les paramètres facultatifs  `whatToShow` et `filter` . |
+| {{SpecName('DOM2 Traversal_Range', 'traversal.html#NodeIteratorFactory-createTreeWalker', 'Document.createTreeWalker')}} | {{Spec2('DOM2 Traversal_Range')}} | Définition initiale.                                                                                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Document.createTreeWalker")}}
+
+## Voir aussi
+
+- L'interface de l'objet qu'il crée : {{domxref("TreeWalker")}}.
diff --git a/files/fr/web/api/document/currentscript/index.md b/files/fr/web/api/document/currentscript/index.md
index d0758e6c1e..175c277f60 100644
--- a/files/fr/web/api/document/currentscript/index.md
+++ b/files/fr/web/api/document/currentscript/index.md
@@ -9,58 +9,44 @@ tags:
   - Script
 translation_of: Web/API/Document/currentScript
 ---
-<div>{{ApiRef("DOM")}}</div>
+{{ApiRef("DOM")}}
 
-<p>Retourne l'élément {{HTMLElement("script")}} dont le script est en cours de traitement.</p>
+Retourne l'élément {{HTMLElement("script")}} dont le script est en cours de traitement.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var <var>curScriptElement</var> = document.currentScript;
-</pre>
+    var curScriptElement = document.currentScript;
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Cet exemple vérifie si le script s'exécute de manière asynchrone :</p>
+Cet exemple vérifie si le script s'exécute de manière asynchrone :
 
-<pre class="brush:js">if (document.currentScript.async) {
+```js
+if (document.currentScript.async) {
   console.log("Exécution asynchrone");
 } else {
   console.log("Exécution synchrone");
-}</pre>
+}
+```
 
-<p><a href="/samples/html/currentScript.html">Voir l'exemple sur une page</a></p>
+[Voir l'exemple sur une page](/samples/html/currentScript.html)
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p>Il est important de noter que l'élément {{HTMLElement("script")}} ne sera pas référencé si le code dans le script est appelé par une fonction de rappel ou par un gestionnaire d'événements ; seul sera référencé l'élément alors qu'il est initialement en cours d'exécution.</p>
+Il est important de noter que l'élément {{HTMLElement("script")}} ne sera pas référencé si le code dans le script est appelé par une fonction de rappel ou par un gestionnaire d'événements ; seul sera référencé l'élément alors qu'il est initialement en cours d'exécution.
 
-<h2 id="Spécifications">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("HTML WHATWG", "dom.html#dom-document-currentscript", "Document.currentScript")}}</td>
-   <td>{{Spec2("HTML WHATWG")}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                | Statut                           | Commentaire         |
+| ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- |
+| {{SpecName("HTML WHATWG", "dom.html#dom-document-currentscript", "Document.currentScript")}} | {{Spec2("HTML WHATWG")}} | Définition initiale |
 
-<h2 id="Compatibilité_navigateur">Compatibilité navigateur</h2>
+## Compatibilité navigateur
 
-<div>{{Compat("api.Document.currentScript")}}</div>
+{{Compat("api.Document.currentScript")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{HTMLElement("script")}}</li>
- <li>{{domxref("document.onafterscriptexecute")}}</li>
- <li>{{domxref("document.onbeforescriptexecute")}}</li>
-</ul>
+- {{HTMLElement("script")}}
+- {{domxref("document.onafterscriptexecute")}}
+- {{domxref("document.onbeforescriptexecute")}}
diff --git a/files/fr/web/api/document/defaultview/index.md b/files/fr/web/api/document/defaultview/index.md
index fce4d88134..6816203fef 100644
--- a/files/fr/web/api/document/defaultview/index.md
+++ b/files/fr/web/api/document/defaultview/index.md
@@ -3,15 +3,20 @@ title: document.defaultView
 slug: Web/API/Document/defaultView
 translation_of: Web/API/Document/defaultView
 ---
-<p>Dans les navigateurs, cette propriété renvoie l'objet <a href="/en-US/docs/DOM/window">window</a> associé au document ou <code>null</code> si non disponible.</p>
-<h2 id="Syntax">Syntaxe</h2>
-<pre class="syntaxbox">var win = document.defaultView;</pre>
-<p>Cette propriété est en lecture seule.</p>
-<h2 id="Notes">Notes</h2>
-<p>D'après <a href="http://www.quirksmode.org/dom/w3c_html.html">quirksmode</a>, <code>defaultView</code> n'est pas supporté dans les versions d'IE inférieures à 9.</p>
-<h2 id="Specification">Spécification</h2>
-<ul>
-  <li><a href="/en-US/docs/HTML/HTML5">HTML5: defaultView</a></li>
-  <li><a href="http://www.w3.org/TR/DOM-Level-2-Views/views.html#Views-DocumentView-defaultView">DOM Level 2 Views: defaultView</a></li>
-  <li><a href="http://www.w3.org/TR/DOM-Level-3-Views/">DOM Level 3 Views</a> (Seulement développé en Working Group Note mais pas implémenté)</li>
-</ul>
+Dans les navigateurs, cette propriété renvoie l'objet [window](/en-US/docs/DOM/window) associé au document ou `null` si non disponible.
+
+## Syntaxe
+
+    var win = document.defaultView;
+
+Cette propriété est en lecture seule.
+
+## Notes
+
+D'après [quirksmode](http://www.quirksmode.org/dom/w3c_html.html), `defaultView` n'est pas supporté dans les versions d'IE inférieures à 9.
+
+## Spécification
+
+- [HTML5: defaultView](/en-US/docs/HTML/HTML5)
+- [DOM Level 2 Views: defaultView](http://www.w3.org/TR/DOM-Level-2-Views/views.html#Views-DocumentView-defaultView)
+- [DOM Level 3 Views](http://www.w3.org/TR/DOM-Level-3-Views/) (Seulement développé en Working Group Note mais pas implémenté)
diff --git a/files/fr/web/api/document/designmode/index.md b/files/fr/web/api/document/designmode/index.md
index 0a4edb5920..78cc51a2e2 100644
--- a/files/fr/web/api/document/designmode/index.md
+++ b/files/fr/web/api/document/designmode/index.md
@@ -3,49 +3,35 @@ title: Document.designMode
 slug: Web/API/Document/designMode
 translation_of: Web/API/Document/designMode
 ---
-<div>{{ ApiRef() }}</div>
+{{ ApiRef() }}
 
-<p>document.designMode contrôle si l'ensemble du document est modifiable. Les valeurs valides sont "on" et "off". Conformément à la spécification, cette propriété est par défaut sur "off". Firefox suit cette norme. Les versions antérieures de Chrome et IE ont par défaut la valeur "<code>inherit</code>". Pour les versions entre IE6-10, la valeur est en majuscule.</p>
+document.designMode contrôle si l'ensemble du document est modifiable. Les valeurs valides sont "on" et "off". Conformément à la spécification, cette propriété est par défaut sur "off". Firefox suit cette norme. Les versions antérieures de Chrome et IE ont par défaut la valeur "`inherit`". Pour les versions entre IE6-10, la valeur est en majuscule.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">var mode = document.designMode;
+```js
+var mode = document.designMode;
 document.designMode = "on";
-document.designMode = "off";</pre>
+document.designMode = "off";
+```
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<p>Rendre un document {{HTMLElement("iframe")}} éditable</p>
+Rendre un document {{HTMLElement("iframe")}} éditable
 
-<pre>iframe_node.contentDocument.designMode = "on";
-</pre>
+    iframe_node.contentDocument.designMode = "on";
 
-<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('HTML WHATWG', '#making-entire-documents-editable:-the-designmode-idl-attribute', 'designMode')}}</td>
-      <td>{{Spec2('HTML WHATWG')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                                                                    | Statut                           | Commentaire          |
+| ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName('HTML WHATWG', '#making-entire-documents-editable:-the-designmode-idl-attribute', 'designMode')}} | {{Spec2('HTML WHATWG')}} | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Document.designMode")}}</p>
+{{Compat("api.Document.designMode")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li><a href="/fr/docs/Web/Guide/HTML/Editable_content/Rich-Text_Editing_in_Mozilla">Rich-Text Editing in Mozilla</a></li>
-  <li>{{domxref("HTMLElement.contentEditable")}}</li>
-</ul>
+- [Rich-Text Editing in Mozilla](/fr/docs/Web/Guide/HTML/Editable_content/Rich-Text_Editing_in_Mozilla)
+- {{domxref("HTMLElement.contentEditable")}}
diff --git a/files/fr/web/api/document/dir/index.md b/files/fr/web/api/document/dir/index.md
index 03e94f3230..d7f32ff364 100644
--- a/files/fr/web/api/document/dir/index.md
+++ b/files/fr/web/api/document/dir/index.md
@@ -8,35 +8,21 @@ tags:
   - Reference
 translation_of: Web/API/Document/dir
 ---
-<p>{{ApiRef("")}}</p>
+{{ApiRef("")}}
 
-<p>La propriété <code><strong>Document.dir</strong></code> est une chaîne de caractères {{domxref("DOMString")}} représentant la direction du texte du document : de gauche à droite (par défaut) ou de droite à gauche. Les valeurs possibles sont <code>'rtl'</code>, droite vers gauche, et <code>'ltr'</code>, gauche vers droite.</p>
+La propriété **`Document.dir`** est une chaîne de caractères {{domxref("DOMString")}} représentant la direction du texte du document : de gauche à droite (par défaut) ou de droite à gauche. Les valeurs possibles sont `'rtl'`, droite vers gauche, et `'ltr'`, gauche vers droite.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>dirStr</em> = <em>document.</em>dir;
-<em>document.dir</em> = <em>dirStr;</em>
-</pre>
+    dirStr = document.dir;
+    document.dir = dirStr;
 
-<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("HTML WHATWG", "#dom-document-dir", "Document.dir")}}</td>
-   <td>{{Spec2("HTML WHATWG")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                        | Statut                           | Commentaire          |
+| ------------------------------------------------------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName("HTML WHATWG", "#dom-document-dir", "Document.dir")}} | {{Spec2("HTML WHATWG")}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Document.dir")}}</p>
+{{Compat("api.Document.dir")}}
diff --git a/files/fr/web/api/document/doctype/index.md b/files/fr/web/api/document/doctype/index.md
index 980447cc3c..15f950a836 100644
--- a/files/fr/web/api/document/doctype/index.md
+++ b/files/fr/web/api/document/doctype/index.md
@@ -10,56 +10,38 @@ tags:
   - Type
 translation_of: Web/API/Document/doctype
 ---
-<div>{{ApiRef("DOM")}}</div>
+{{ApiRef("DOM")}}
 
-<p>Renvoie la "Document Type Declaration (DTD)" (<em>déclaration de type de document</em>) associée avec le document actuel. L'objet renvoyé implémente l'interface {{domxref("DocumentType")}}. Utilisez {{domxref("DOMImplementation.createDocumentType()")}} pour créer un <code>DocumentType</code>.</p>
+Renvoie la "Document Type Declaration (DTD)" (_déclaration de type de document_) associée avec le document actuel. L'objet renvoyé implémente l'interface {{domxref("DocumentType")}}. Utilisez {{domxref("DOMImplementation.createDocumentType()")}} pour créer un `DocumentType`.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var>doctype</var> = <var>document</var>.doctype;
-</pre>
+    doctype = document.doctype;
 
-<ul>
- <li><code>doctype</code> est une propriété en lecture seule.</li>
-</ul>
+- `doctype` est une propriété en lecture seule.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush:js">var doctypeObj = document.doctype;
+```js
+var doctypeObj = document.doctype;
 
 console.log(
   "doctypeObj.name: "           + doctypeObj.name            + "\n" +
   "doctypeObj.internalSubset: " + doctypeObj.internalSubset  + "\n" +
   "doctypeObj.publicId: "       + doctypeObj.publicId        + "\n" +
   "doctypeObj.systemId: "       + doctypeObj.systemId
-);</pre>
+);
+```
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p>La propriété renvoie <code>null</code> si aucune DTD n'est associée au document en cours.</p>
+La propriété renvoie `null` si aucune DTD n'est associée au document en cours.
 
-<p>DOM level 2 ne prend pas en charge l'édition de la déclaration de type de document (DTD).</p>
+DOM level 2 ne prend pas en charge l'édition de la déclaration de type de document (DTD).
 
-<h2 id="Spécifications">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("DOM3 Core", "core.html#ID-B63ED1A31", "Document.doctype")}}</td>
-   <td>{{Spec2("DOM3 Core")}}</td>
-   <td>Valeur de retour modifiée pour les documents HTML avec absence d'élément {{HTMLElement("html")}}. Définit que le type de document peut être modifié.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("DOM2 Core", "core.html#ID-B63ED1A31", "Document.doctype")}}</td>
-   <td>{{Spec2("DOM2 Core")}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                    | Statut                       | Commentaire                                                                                                                                                   |
+| ------------------------------------------------------------------------------------------------ | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName("DOM3 Core", "core.html#ID-B63ED1A31", "Document.doctype")}} | {{Spec2("DOM3 Core")}} | Valeur de retour modifiée pour les documents HTML avec absence d'élément {{HTMLElement("html")}}. Définit que le type de document peut être modifié. |
+| {{SpecName("DOM2 Core", "core.html#ID-B63ED1A31", "Document.doctype")}} | {{Spec2("DOM2 Core")}} | Définition initiale                                                                                                                                           |
diff --git a/files/fr/web/api/document/document/index.md b/files/fr/web/api/document/document/index.md
index 7b0e3c2501..05f3e52b50 100644
--- a/files/fr/web/api/document/document/index.md
+++ b/files/fr/web/api/document/document/index.md
@@ -9,35 +9,24 @@ tags:
   - Reference
 translation_of: Web/API/Document/Document
 ---
-<p>{{APIRef}}</p>
+{{APIRef}}
 
-<p>Le constructeur <code><strong>Document</strong></code> crée un nouvel objet de {{domxref("Document")}}, lequel c'est la référence de la page courante dans le navigateur et servant comme point d'entrer aux contenus de la page.</p>
+Le constructeur **`Document`** crée un nouvel objet de {{domxref("Document")}}, lequel c'est la référence de la page courante dans le navigateur et servant comme point d'entrer aux contenus de la page.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var <em>document</em> = new Document()</pre>
+    var document = new Document()
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<p>None.</p>
+None.
 
-<p>Spécifications</p>
+Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG','#interface-document','Document')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Initial definition.</td>
-  </tr>
- </tbody>
-</table>
+| Specification                                                                    | Status                           | Comment             |
+| -------------------------------------------------------------------------------- | -------------------------------- | ------------------- |
+| {{SpecName('DOM WHATWG','#interface-document','Document')}} | {{Spec2('DOM WHATWG')}} | Initial definition. |
 
-<h2 id="Compatibilité_Navigateurs">Compatibilité Navigateurs</h2>
+## Compatibilité Navigateurs
 
-<div>{{Compat("api.Document.Document")}}</div>
+{{Compat("api.Document.Document")}}
diff --git a/files/fr/web/api/document/documentelement/index.md b/files/fr/web/api/document/documentelement/index.md
index 84e62d8bea..cd9cfbe64a 100644
--- a/files/fr/web/api/document/documentelement/index.md
+++ b/files/fr/web/api/document/documentelement/index.md
@@ -10,63 +10,37 @@ tags:
   - Reference
 translation_of: Web/API/Document/documentElement
 ---
-<p>{{ ApiRef("DOM") }}</p>
+{{ ApiRef("DOM") }}
 
-<p><code><strong>Document.documentElement</strong></code>renvoie l'<code><a href="/fr/docs/Web/API/element">Element</a></code> qui est l'élément racine du <a href="/fr/docs/Web/API/document">document</a> (par exemple, l'élément <code>&lt;html&gt;</code> pour les documents HTML).</p>
+**`Document.documentElement`**renvoie l'[`Element`](/fr/docs/Web/API/element) qui est l'élément racine du [document](/fr/docs/Web/API/document) (par exemple, l'élément `<html>` pour les documents HTML).
 
-<h3 id="Syntaxe">Syntaxe</h3>
+### Syntaxe
 
-<pre class="eval">var<em> element</em> = document.documentElement;
-</pre>
+    var element = document.documentElement;
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="eval">var racine = document.documentElement;
-var premierNiveau = racine.childNodes;
-// premierNiveau est une NodeList des enfants directs de l'élément racine
-for (var i = 0; i &lt; premierNiveau.length; i++) {
-   // fait quelque chose avec chaque enfant direct de l'élément racine
-   // en tant que premierNiveau[i]
-}
-</pre>
+    var racine = document.documentElement;
+    var premierNiveau = racine.childNodes;
+    // premierNiveau est une NodeList des enfants directs de l'élément racine
+    for (var i = 0; i < premierNiveau.length; i++) {
+       // fait quelque chose avec chaque enfant direct de l'élément racine
+       // en tant que premierNiveau[i]
+    }
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p>Pour tout document HTML non vide, <code>document.documentElement</code> sera toujours un élément {{HTMLElement ("html")}}. Pour tout document XML non vide, <code>document.documentElement</code> sera toujours l'élément racine du document.</p>
+Pour tout document HTML non vide, `document.documentElement` sera toujours un élément {{HTMLElement ("html")}}. Pour tout document XML non vide, `document.documentElement` sera toujours l'élément racine du document.
 
-<h2 id="Sp.C3.A9cification">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Core','core.html#ID-87CD092','Document.documentElement')}}</td>
-   <td>{{Spec2('DOM2 Core')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM3 Core','core.html#ID-87CD092','Document.documentElement')}}</td>
-   <td>{{Spec2('DOM3 Core')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM4','#dom-document-documentelement','Document.documentElement')}}</td>
-   <td>{{Spec2('DOM4')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG','#dom-document-documentelement','Document.documentElement')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                    | Statut                           | Commentaire |
+| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- |
+| {{SpecName('DOM2 Core','core.html#ID-87CD092','Document.documentElement')}}             | {{Spec2('DOM2 Core')}}     |             |
+| {{SpecName('DOM3 Core','core.html#ID-87CD092','Document.documentElement')}}             | {{Spec2('DOM3 Core')}}     |             |
+| {{SpecName('DOM4','#dom-document-documentelement','Document.documentElement')}}         | {{Spec2('DOM4')}}         |             |
+| {{SpecName('DOM WHATWG','#dom-document-documentelement','Document.documentElement')}} | {{Spec2('DOM WHATWG')}} |             |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-
-
-<p>{{Compat("api.Document.documentElement")}}</p>
+{{Compat("api.Document.documentElement")}}
diff --git a/files/fr/web/api/document/documenturi/index.md b/files/fr/web/api/document/documenturi/index.md
index 31e15a16be..b3ee14255f 100644
--- a/files/fr/web/api/document/documenturi/index.md
+++ b/files/fr/web/api/document/documenturi/index.md
@@ -9,46 +9,27 @@ tags:
   - URI
 translation_of: Web/API/Document/documentURI
 ---
-<div>{{ApiRef("DOM")}}</div>
+{{ApiRef("DOM")}}
 
-<p>La propriété <code><strong>documentURI</strong></code> de l'interface {{domxref("Document")}} renvoie l'emplacement du document sous forme "string" (<em>chaîne de caractères</em>).</p>
+La propriété **`documentURI`** de l'interface {{domxref("Document")}} renvoie l'emplacement du document sous forme "string" (_chaîne de caractères_).
 
-<p>Initialement, la spécification DOM3 définissait cet attribut en lecture/écriture. Dans la norme actuelle DOM, il est en lecture seule.</p>
+Initialement, la spécification DOM3 définissait cet attribut en lecture/écriture. Dans la norme actuelle DOM, il est en lecture seule.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var <var>string</var> = document.documentURI;
-</pre>
+    var string = document.documentURI;
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p>Les documents HTML ont une propriété {{domxref("document.URL")}} qui renvoie la même valeur. Contrairement à l'<code>URL</code>, <code>documentURI</code> est disponible pour tous les types de documents.</p>
+Les documents HTML ont une propriété {{domxref("document.URL")}} qui renvoie la même valeur. Contrairement à l'`URL`, `documentURI` est disponible pour tous les types de documents.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#dom-document-documenturi','documentURI')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM3 Core', '#Document3-documentURI', 'documentURI')}}</td>
-   <td>{{Spec2('DOM3 Core')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                | Statut                           | Commentaire         |
+| -------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- |
+| {{SpecName('DOM WHATWG', '#dom-document-documenturi','documentURI')}} | {{Spec2('DOM WHATWG')}} |                     |
+| {{SpecName('DOM3 Core', '#Document3-documentURI', 'documentURI')}}     | {{Spec2('DOM3 Core')}}     | Définition initiale |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-
-
-
-<p>{{Compat("api.Document.documentURI")}}</p>
+{{Compat("api.Document.documentURI")}}
diff --git a/files/fr/web/api/document/documenturiobject/index.md b/files/fr/web/api/document/documenturiobject/index.md
index cc5030a977..88c81d247b 100644
--- a/files/fr/web/api/document/documenturiobject/index.md
+++ b/files/fr/web/api/document/documenturiobject/index.md
@@ -8,31 +8,32 @@ tags:
   - Reference
 translation_of: Web/API/Document/documentURIObject
 ---
-<p>{{ ApiRef("DOM") }}</p>
+{{ ApiRef("DOM") }}
 
-<p>La propriété en lecture seule <code><strong>Document.documentURIObject</strong></code> renvoie un objet {{ Interface("nsIURI") }} représentant l'URI du <a href="/fr/docs/Web/API/document">document</a>.</p>
+La propriété en lecture seule **`Document.documentURIObject`** renvoie un objet {{ Interface("nsIURI") }} représentant l'URI du [document](/fr/docs/Web/API/document).
 
-<p>Cette propriété fonctionne uniquement pour les scripts privilégiés (UniversalXPConnect), comme le code des extensions. Pour le contenu Web, elle n'a aucune signification particulière et peut être utilisée comme n'importe quelle propriété personnalisée.</p>
+Cette propriété fonctionne uniquement pour les scripts privilégiés (UniversalXPConnect), comme le code des extensions. Pour le contenu Web, elle n'a aucune signification particulière et peut être utilisée comme n'importe quelle propriété personnalisée.
 
-<p>Dans le cas d'un code privilégié, il convient de faire attention à ne pas essayer d'obtenir ou modifier cette propriété sur un objet de contenu non enveloppé (par exemple sur l'objet <code>wrappedJSObject</code> d'un <code><a href="/fr/docs/Mozilla/Tech/Xray_vision">XPCNativeWrapper</a></code>). Consultez les commentaires du {{ Bug(324464) }} pour plus de détails.</p>
+Dans le cas d'un code privilégié, il convient de faire attention à ne pas essayer d'obtenir ou modifier cette propriété sur un objet de contenu non enveloppé (par exemple sur l'objet `wrappedJSObject` d'un [`XPCNativeWrapper`](/fr/docs/Mozilla/Tech/Xray_vision)). Consultez les commentaires du {{ Bug(324464) }} pour plus de détails.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">var uri = doc.documentURIObject;</pre>
+```js
+var uri = doc.documentURIObject;
+```
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="eval">// Vérifie que le schéma d'URI pour l'onglet courant dans Firefox est « http »,
-// en supposant que ce code s'exécute dans le contexte de browser.xul
+    // Vérifie que le schéma d'URI pour l'onglet courant dans Firefox est « http »,
+    // en supposant que ce code s'exécute dans le contexte de browser.xul
 
-var uriObj = content.document.documentURIObject;
-var uriPort = uriObj.port;
+    var uriObj = content.document.documentURIObject;
+    var uriPort = uriObj.port;
 
-if (uriObj.schemeIs('http')) {
-  ...
-}
-</pre>
+    if (uriObj.schemeIs('http')) {
+      ...
+    }
 
-<h2 id="Sp.C3.A9cification">Spécifications</h2>
+## Spécifications
 
-<p>Ne fait partie d'aucune spécification.</p>
+Ne fait partie d'aucune spécification.
diff --git a/files/fr/web/api/document/domain/index.md b/files/fr/web/api/document/domain/index.md
index 94575c1b4b..0f050e51e7 100644
--- a/files/fr/web/api/document/domain/index.md
+++ b/files/fr/web/api/document/domain/index.md
@@ -12,48 +12,46 @@ tags:
   - Reference
 translation_of: Web/API/Document/domain
 ---
-<div>{{ApiRef}}</div>
+{{ApiRef}}
 
-<p>Retourne/définit la partie domaine de l'origine du document courant, telle qu'utilisée par la <a href="/fr/docs/Web/JavaScript/Same_origin_policy_for_JavaScript">politique d'origine identique</a>.</p>
+Retourne/définit la partie domaine de l'origine du document courant, telle qu'utilisée par la [politique d'origine identique](/fr/docs/Web/JavaScript/Same_origin_policy_for_JavaScript).
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var <var>chaineDomaine</var> = document.domain; document.domain = <em>chaine</em>;
-</pre>
+    var chaineDomaine = document.domain; document.domain = chaine;
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush:js">// Pour le document www.example.xxx/good.html,
+```js
+// Pour le document www.example.xxx/good.html,
 // ce script ferme la fenêtre
 var mauvaisDomaine = "www.example.xxx";
 
 if (document.domain == mauvaisDomaine )
-   window.close(); // juste un exemple - window.close() n'a parfois aucun effet.</pre>
+   window.close(); // juste un exemple - window.close() n'a parfois aucun effet.
+```
 
-<pre class="brush:js">// Pour l'URI https://developer.mozilla.org/en-US/docs/Web, ce qui
+```js
+// Pour l'URI https://developer.mozilla.org/en-US/docs/Web, ce qui
 // suit définit le domaine comme étant la chaîne "developer.mozilla.org"
 var domaine = document.domain;
-</pre>
+```
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p>Cette propriété retourne <code>null</code> si le domaine du document ne peut pas être identifié.</p>
+Cette propriété retourne `null` si le domaine du document ne peut pas être identifié.
 
-<p>Mozilla vous laissera la définir à un superdomaine de la valeur courante, contraint par son <a href="/en-US/docs/XPCOM_Interface_Reference/nsIEffectiveTLDService#getBaseDomain.28.29">domaine de base</a>. Par exemple, sur developer.mozilla.org, il est possible de la définir à "mozilla.org" mais pas à "mozilla.com" ou "org".</p>
+Mozilla vous laissera la définir à un superdomaine de la valeur courante, contraint par son [domaine de base](/en-US/docs/XPCOM_Interface_Reference/nsIEffectiveTLDService#getBaseDomain.28.29). Par exemple, sur developer.mozilla.org, il est possible de la définir à "mozilla.org" mais pas à "mozilla.com" ou "org".
 
-<p>Si cette propriété est définie avec succès, la partie "port" de l'origine est également définie à null.</p>
+Si cette propriété est définie avec succès, la partie "port" de l'origine est également définie à null.
 
-<p>Mozilla fait la distinction entre la propriété d'un <code>document.domain</code> qui n'a jamais été modifiée d'une explicitement définie avec le même domaine que l'URL du document, même si la propriété renvoie la même valeur dans les deux cas. Un document est autorisé à accéder à un autre si il ont tous deux défini <code>document.domain</code> à la même valeur, indiquant leur intention de coopérer, ou si aucun des deux n'a défini <code>document.domain</code> et que les domaines dans les URLs sont les mêmes (<a href="https://mxr.mozilla.org/mozilla-central/source/caps/nsPrincipal.cpp?rev=ecb7068b07a1&amp;mark=199-215#199">implementation</a>). Sans cette politique spéciale, chaque site serait sujet au Cross-Site-Scripting (XSS)  depuis ses sous-domaines (par exemple, <a href="https://bugzilla.mozilla.org">https://bugzilla.mozilla.org</a> pourrait être attaqué par des pièces jointes de bugs sur <a href="https://bug*.bugzilla.mozilla.org">https://bug*.bugzilla.mozilla.org</a>).</p>
+Mozilla fait la distinction entre la propriété d'un `document.domain` qui n'a jamais été modifiée d'une explicitement définie avec le même domaine que l'URL du document, même si la propriété renvoie la même valeur dans les deux cas. Un document est autorisé à accéder à un autre si il ont tous deux défini `document.domain` à la même valeur, indiquant leur intention de coopérer, ou si aucun des deux n'a défini `document.domain` et que les domaines dans les URLs sont les mêmes ([implementation](https://mxr.mozilla.org/mozilla-central/source/caps/nsPrincipal.cpp?rev=ecb7068b07a1&mark=199-215#199)). Sans cette politique spéciale, chaque site serait sujet au Cross-Site-Scripting (XSS)  depuis ses sous-domaines (par exemple, <https://bugzilla.mozilla.org> pourrait être attaqué par des pièces jointes de bugs sur <https://bug*.bugzilla.mozilla.org>).
 
-<h2 id="Specification">Spécification</h2>
+## Spécification
 
-<ul>
- <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-2250147">DOM Level 2 HTML: document.domain</a> (le décrit comme étant en lecture-seule)</li>
- <li><a href="https://html.spec.whatwg.org/multipage/browsers.html#relaxing-the-same-origin-restriction">HTML5: document.domain</a> (décrit un comportement similaire à celui de Mozilla)</li>
-</ul>
+- [DOM Level 2 HTML: document.domain](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-2250147) (le décrit comme étant en lecture-seule)
+- [HTML5: document.domain](https://html.spec.whatwg.org/multipage/browsers.html#relaxing-the-same-origin-restriction) (décrit un comportement similaire à celui de Mozilla)
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Same_origin_policy_for_JavaScript">Politique de même origine pour JavaScriptHTML</a></li>
-</ul>
+- [Politique de même origine pour JavaScriptHTML](/fr/docs/Web/JavaScript/Same_origin_policy_for_JavaScript)
diff --git a/files/fr/web/api/document/domcontentloaded_event/index.md b/files/fr/web/api/document/domcontentloaded_event/index.md
index 516c713b20..5fa9889813 100644
--- a/files/fr/web/api/document/domcontentloaded_event/index.md
+++ b/files/fr/web/api/document/domcontentloaded_event/index.md
@@ -3,62 +3,65 @@ title: 'Document: DOMContentLoaded event'
 slug: Web/API/Document/DOMContentLoaded_event
 translation_of: Web/API/Document/DOMContentLoaded_event
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}
 
-<p>L'évènement <strong><code>DOMContentLoaded</code></strong> est déclenché quand le document HTML initiale est complètement chargé et analysé, sans attendre la fin du chargement des feuilles de styles, images et sous-document.</p>
+L'évènement **`DOMContentLoaded`** est déclenché quand le document HTML initiale est complètement chargé et analysé, sans attendre la fin du chargement des feuilles de styles, images et sous-document.
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row">Bouillonne</th>
-   <td>Oui</td>
-  </tr>
-  <tr>
-   <th scope="row">Annulable</th>
-   <td>Oui (bien que spécifié comme évènement simple non annulable)</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface</th>
-   <td>{{domxref("Event")}}</td>
-  </tr>
-  <tr>
-   <th scope="row">Propriété de gestion de l’évènement</th>
-   <td>Aucune</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Bouillonne</th>
+      <td>Oui</td>
+    </tr>
+    <tr>
+      <th scope="row">Annulable</th>
+      <td>Oui (bien que spécifié comme évènement simple non annulable)</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface</th>
+      <td>{{domxref("Event")}}</td>
+    </tr>
+    <tr>
+      <th scope="row">Propriété de gestion de l’évènement</th>
+      <td>Aucune</td>
+    </tr>
+  </tbody>
 </table>
 
-<p>Un évènement différent, {{domxref("Window/load_event", "load")}} doit être utilisé pour détecter que la page entière est chargée. On utilise couramment à tord <code>load</code> là où <code>DOMContentLoaded</code> serait plus approprié.</p>
+Un évènement différent, {{domxref("Window/load_event", "load")}} doit être utilisé pour détecter que la page entière est chargée. On utilise couramment à tord `load` là où `DOMContentLoaded` serait plus approprié.
 
-<p>Du code JavaScript synchrone va mettre en pause la création du DOM. Si vous voulez charger le DOM le plus rapidement possible, vous pouvez faire votre code <a href="/en-US/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests">(en) JavaScript asynchrone</a> et <a href="https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery">(en) optimiser le chargement des feuilles de styles</a>. Si vous chargez comme d'habitude, les feuilles de styles vont ralentir la création du DOM comme si elles étaient chargées en parallèle, en «volant» le trafique du document principale HTML.</p>
+Du code JavaScript synchrone va mettre en pause la création du DOM. Si vous voulez charger le DOM le plus rapidement possible, vous pouvez faire votre code [(en) JavaScript asynchrone](/en-US/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests) et [(en) optimiser le chargement des feuilles de styles](https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery). Si vous chargez comme d'habitude, les feuilles de styles vont ralentir la création du DOM comme si elles étaient chargées en parallèle, en «volant» le trafique du document principale HTML.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Usage_simple">Usage simple</h3>
+### Usage simple
 
-<pre class="brush: js">document.addEventListener('DOMContentLoaded', (event) =&gt; {
+```js
+document.addEventListener('DOMContentLoaded', (event) => {
     console.log('DOM fully loaded and parsed');
 });
-</pre>
+```
 
-<h3 id="Retarde_DOMContentLoaded">Retarde DOMContentLoaded</h3>
+### Retarde DOMContentLoaded
 
-<pre class="brush: html">&lt;script&gt;
-  document.addEventListener('DOMContentLoaded', (event) =&gt; {
+```html
+<script>
+  document.addEventListener('DOMContentLoaded', (event) => {
     console.log('DOM fully loaded and parsed');
   });
 
-for( let i = 0; i &lt; 1000000000; i++)
+for( let i = 0; i < 1000000000; i++)
 {} // This synchronous script is going to delay parsing of the DOM,
    // so the DOMContentLoaded event is going to launch later.
-&lt;/script&gt;
-</pre>
+</script>
+```
 
-<h3 id="Vérifie_que_le_contenu_si_le_chargement_est_déjà_fini">Vérifie que le contenu si le chargement est déjà fini</h3>
+### Vérifie que le contenu si le chargement est déjà fini
 
-<p>L'évènement <code>DOMContentLoaded</code> peut-être déclenché avant que le script soit exécuté, donc il vaut mieux vérifier avant d'ajouter un écouteur d'évènement.</p>
+L'évènement `DOMContentLoaded` peut-être déclenché avant que le script soit exécuté, donc il vaut mieux vérifier avant d'ajouter un écouteur d'évènement.
 
-<pre class="brush: js">function doSomething() {
+```js
+function doSomething() {
   console.info('DOM loaded');
 }
 
@@ -67,22 +70,25 @@ if (document.readyState === 'loading') {  // Loading hasn't finished yet
 } else {  // `DOMContentLoaded` has already fired
   doSomething();
 }
-</pre>
+```
 
-<h3 id="Démonstration">Démonstration</h3>
+### Démonstration
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;div class="controls"&gt;
-  &lt;button id="reload" type="button"&gt;Reload&lt;/button&gt;
-&lt;/div&gt;
+```html
+<div class="controls">
+  <button id="reload" type="button">Reload</button>
+</div>
 
-&lt;div class="event-log"&gt;
-  &lt;label&gt;Event log:&lt;/label&gt;
-  &lt;textarea readonly class="event-log-contents" rows="8" cols="30"&gt;&lt;/textarea&gt;
-&lt;/div&gt;</pre>
+<div class="event-log">
+  <label>Event log:</label>
+  <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea>
+</div>
+```
 
-<pre class="brush: css hidden">body {
+```css hidden
+body {
   display: grid;
   grid-template-areas: "control  log";
 }
@@ -109,72 +115,50 @@ label, button {
 #reload {
   height: 2rem;
 }
+```
 
-</pre>
+#### JS
 
-<h4 id="JS">JS</h4>
-
-<pre class="brush: js">const log = document.querySelector('.event-log-contents');
+```js
+const log = document.querySelector('.event-log-contents');
 const reload = document.querySelector('#reload');
 
-reload.addEventListener('click', () =&gt; {
+reload.addEventListener('click', () => {
   log.textContent ='';
-  window.setTimeout(() =&gt; {
+  window.setTimeout(() => {
       window.location.reload(true);
   }, 200);
 });
 
-window.addEventListener('load', (event) =&gt; {
+window.addEventListener('load', (event) => {
     log.textContent = log.textContent + 'load\n';
 });
 
-document.addEventListener('readystatechange', (event) =&gt; {
+document.addEventListener('readystatechange', (event) => {
     log.textContent = log.textContent + `readystate: ${document.readyState}\n`;
 });
 
-document.addEventListener('DOMContentLoaded', (event) =&gt; {
+document.addEventListener('DOMContentLoaded', (event) => {
     log.textContent = log.textContent + `DOMContentLoaded\n`;
 });
+```
 
-</pre>
-
-<h4 id="Résultat">Résultat</h4>
-
-<p>{{ EmbedLiveSample('Live_example', '100%', '160px') }}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'parsing.html#the-end:event-domcontentloaded', 'DOMContentLoaded')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'syntax.html#the-end', 'DOMContentLoaded')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+#### Résultat
+
+{{ EmbedLiveSample('Live_example', '100%', '160px') }}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Spécifications
 
+| Spécification                                                                                                                | Status                           | Commentaire |
+| ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- |
+| {{SpecName('HTML WHATWG', 'parsing.html#the-end:event-domcontentloaded', 'DOMContentLoaded')}} | {{Spec2('HTML WHATWG')}} |             |
+| {{SpecName('HTML5 W3C', 'syntax.html#the-end', 'DOMContentLoaded')}}                                 | {{Spec2('HTML5 W3C')}}     |             |
 
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Document.DOMContentLoaded_event")}}</p>
+{{Compat("api.Document.DOMContentLoaded_event")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>Évènements similaires: {{domxref("Window/load_event", "load")}}, {{domxref("Document/readystatechange_event", "readystatechange")}}, {{domxref("Window/beforeunload_event", "beforeunload")}} et {{domxref("Window/unload_event", "unload")}}</li>
- <li>Cet évènement sur la cible {{domxref("Window")}}: {{domxref("Window/DOMContentLoaded_event", "DOMContentLoaded")}}</li>
-</ul>
+- Évènements similaires: {{domxref("Window/load_event", "load")}}, {{domxref("Document/readystatechange_event", "readystatechange")}}, {{domxref("Window/beforeunload_event", "beforeunload")}} et {{domxref("Window/unload_event", "unload")}}
+- Cet évènement sur la cible {{domxref("Window")}}: {{domxref("Window/DOMContentLoaded_event", "DOMContentLoaded")}}
diff --git a/files/fr/web/api/document/drag_event/index.md b/files/fr/web/api/document/drag_event/index.md
index 18ffca7385..f285e0a7b1 100644
--- a/files/fr/web/api/document/drag_event/index.md
+++ b/files/fr/web/api/document/drag_event/index.md
@@ -3,151 +3,61 @@ title: drag
 slug: Web/API/Document/drag_event
 translation_of: Web/API/Document/drag_event
 ---
-<div>{{APIRef}}</div>
-
-<p>L'événement drag est déclenché lorsqu'un élément ou une section de texte est glissé (toutes les quelques centaines de milisecondes)</p>
-
-<h2 id="Informations_générales">Informations générales</h2>
-
-<dl>
- <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
- <dd style="margin: 0 0 0 120px;">{{domxref("DragEvent")}}</dd>
- <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
- <dd style="margin: 0 0 0 120px;">Oui</dd>
- <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
- <dd style="margin: 0 0 0 120px;">Oui</dd>
- <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
- <dd style="margin: 0 0 0 120px;">{{domxref("Document")}}, {{domxref("Element")}}</dd>
- <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
- <dd style="margin: 0 0 0 120px;">Continuer l'opération drag &amp; drop.</dd>
-</dl>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Property</th>
-   <th scope="col">Type</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>target</code> {{readonlyInline}}</td>
-   <td><a href="/en-US/docs/Web/API/EventTarget"><code>EventTarget</code></a></td>
-   <td>The element that was underneath the element being dragged.</td>
-  </tr>
-  <tr>
-   <td><code>type</code> {{readonlyInline}}</td>
-   <td><a href="/en-US/docs/Web/API/DOMString"><code>DOMString</code></a></td>
-   <td>The type of event.</td>
-  </tr>
-  <tr>
-   <td><code>bubbles</code> {{readonlyInline}}</td>
-   <td><a href="/en-US/docs/Web/API/Boolean"><code>Boolean</code></a></td>
-   <td>Whether the event normally bubbles or not</td>
-  </tr>
-  <tr>
-   <td><code>cancelable</code> {{readonlyInline}}</td>
-   <td><a href="/en-US/docs/Web/API/Boolean"><code>Boolean</code></a></td>
-   <td>Whether the event is cancellable or not?</td>
-  </tr>
-  <tr>
-   <td><code>view</code> {{readonlyInline}}</td>
-   <td><a href="/en-US/docs/Web/API/WindowProxy" rel="nofollow"><code>WindowProxy</code></a></td>
-   <td><a href="/en-US/docs/Web/API/Document/defaultView"><code>document.defaultView</code></a> (<code>window</code> of the document)</td>
-  </tr>
-  <tr>
-   <td><code>detail</code> {{readonlyInline}}</td>
-   <td><code>long</code> (<code>float</code>)</td>
-   <td>0.</td>
-  </tr>
-  <tr>
-   <td><code>dataTransfer</code></td>
-   <td>DataTransfer</td>
-   <td>The data that underlies a drag-and-drop operation, known as the <a href="/en-US/docs/Web/API/DataTransfer">drag data store</a>. Protected mode.</td>
-  </tr>
-  <tr>
-   <td><code>currentTarget</code> {{readonlyInline}}</td>
-   <td>EventTarget</td>
-   <td>The node that had the event listener attached.</td>
-  </tr>
-  <tr>
-   <td><code>relatedTarget</code> {{readonlyInline}}</td>
-   <td>EventTarget</td>
-   <td>For <code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code> and <code>mouseleave</code> events: the target of the complementary event (the <code>mouseleave</code> target in the case of a <code>mouseenter</code> event). <code>null</code> otherwise.</td>
-  </tr>
-  <tr>
-   <td><code>screenX</code> {{readonlyInline}}</td>
-   <td>long</td>
-   <td>The X coordinate of the mouse pointer in global (screen) coordinates.</td>
-  </tr>
-  <tr>
-   <td><code>screenY</code> {{readonlyInline}}</td>
-   <td>long</td>
-   <td>The Y coordinate of the mouse pointer in global (screen) coordinates.</td>
-  </tr>
-  <tr>
-   <td><code>clientX</code> {{readonlyInline}}</td>
-   <td>long</td>
-   <td>The X coordinate of the mouse pointer in local (DOM content) coordinates.</td>
-  </tr>
-  <tr>
-   <td><code>clientY</code> {{readonlyInline}}</td>
-   <td>long</td>
-   <td>The Y coordinate of the mouse pointer in local (DOM content) coordinates.</td>
-  </tr>
-  <tr>
-   <td><code>button</code> {{readonlyInline}}</td>
-   <td>unsigned short</td>
-   <td>The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.</td>
-  </tr>
-  <tr>
-   <td><code>buttons</code> {{readonlyInline}}</td>
-   <td>unsigned short</td>
-   <td>The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). <a href="/en-US/docs/Web/API/MouseEvent">More info</a>.</td>
-  </tr>
-  <tr>
-   <td><code>mozPressure</code> {{readonlyInline}}</td>
-   <td>float</td>
-   <td>The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).</td>
-  </tr>
-  <tr>
-   <td><code>ctrlKey</code> {{readonlyInline}}</td>
-   <td>boolean</td>
-   <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td>
-  </tr>
-  <tr>
-   <td><code>shiftKey</code> {{readonlyInline}}</td>
-   <td>boolean</td>
-   <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td>
-  </tr>
-  <tr>
-   <td><code>altKey</code> {{readonlyInline}}</td>
-   <td>boolean</td>
-   <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td>
-  </tr>
-  <tr>
-   <td><code>metaKey</code> {{readonlyInline}}</td>
-   <td>boolean</td>
-   <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Exemple">Exemple</h2>
-
-<pre class="brush: html">&lt;div class="dropzone"&gt;
-  &lt;div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)"&gt;
+{{APIRef}}
+
+L'événement drag est déclenché lorsqu'un élément ou une section de texte est glissé (toutes les quelques centaines de milisecondes)
+
+## Informations générales
+
+- Interface
+  - : {{domxref("DragEvent")}}
+- Propagation
+  - : Oui
+- Annulable
+  - : Oui
+- Cible
+  - : {{domxref("Document")}}, {{domxref("Element")}}
+- Action par défaut
+  - : Continuer l'opération drag & drop.
+
+## Propriétés
+
+| Property                                 | Type                                             | Description                                                                                                                                                                                                                                                                                                                                                                                                             |
+| ---------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `target` {{readonlyInline}}        | [`EventTarget`](/en-US/docs/Web/API/EventTarget) | The element that was underneath the element being dragged.                                                                                                                                                                                                                                                                                                                                                              |
+| `type` {{readonlyInline}}          | [`DOMString`](/en-US/docs/Web/API/DOMString)     | The type of event.                                                                                                                                                                                                                                                                                                                                                                                                      |
+| `bubbles` {{readonlyInline}}       | [`Boolean`](/en-US/docs/Web/API/Boolean)         | Whether the event normally bubbles or not                                                                                                                                                                                                                                                                                                                                                                               |
+| `cancelable` {{readonlyInline}}    | [`Boolean`](/en-US/docs/Web/API/Boolean)         | Whether the event is cancellable or not?                                                                                                                                                                                                                                                                                                                                                                                |
+| `view` {{readonlyInline}}          | [`WindowProxy`](/en-US/docs/Web/API/WindowProxy) | [`document.defaultView`](/en-US/docs/Web/API/Document/defaultView) (`window` of the document)                                                                                                                                                                                                                                                                                                                           |
+| `detail` {{readonlyInline}}        | `long` (`float`)                                 | 0.                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| `dataTransfer`                           | DataTransfer                                     | The data that underlies a drag-and-drop operation, known as the [drag data store](/en-US/docs/Web/API/DataTransfer). Protected mode.                                                                                                                                                                                                                                                                                    |
+| `currentTarget` {{readonlyInline}} | EventTarget                                      | The node that had the event listener attached.                                                                                                                                                                                                                                                                                                                                                                          |
+| `relatedTarget` {{readonlyInline}} | EventTarget                                      | For `mouseover`, `mouseout`, `mouseenter` and `mouseleave` events: the target of the complementary event (the `mouseleave` target in the case of a `mouseenter` event). `null` otherwise.                                                                                                                                                                                                                               |
+| `screenX` {{readonlyInline}}       | long                                             | The X coordinate of the mouse pointer in global (screen) coordinates.                                                                                                                                                                                                                                                                                                                                                   |
+| `screenY` {{readonlyInline}}       | long                                             | The Y coordinate of the mouse pointer in global (screen) coordinates.                                                                                                                                                                                                                                                                                                                                                   |
+| `clientX` {{readonlyInline}}       | long                                             | The X coordinate of the mouse pointer in local (DOM content) coordinates.                                                                                                                                                                                                                                                                                                                                               |
+| `clientY` {{readonlyInline}}       | long                                             | The Y coordinate of the mouse pointer in local (DOM content) coordinates.                                                                                                                                                                                                                                                                                                                                               |
+| `button` {{readonlyInline}}        | unsigned short                                   | The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.                                                                                                                                                        |
+| `buttons` {{readonlyInline}}       | unsigned short                                   | The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 \| 2). [More info](/en-US/docs/Web/API/MouseEvent). |
+| `mozPressure` {{readonlyInline}}   | float                                            | The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).                                                                                                                                                                                                                                                          |
+| `ctrlKey` {{readonlyInline}}       | boolean                                          | `true` if the control key was down when the event was fired. `false` otherwise.                                                                                                                                                                                                                                                                                                                                         |
+| `shiftKey` {{readonlyInline}}      | boolean                                          | `true` if the shift key was down when the event was fired. `false` otherwise.                                                                                                                                                                                                                                                                                                                                           |
+| `altKey` {{readonlyInline}}        | boolean                                          | `true` if the alt key was down when the event was fired. `false` otherwise.                                                                                                                                                                                                                                                                                                                                             |
+| `metaKey` {{readonlyInline}}       | boolean                                          | `true` if the meta key was down when the event was fired. `false` otherwise.                                                                                                                                                                                                                                                                                                                                            |
+
+## Exemple
+
+```html
+<div class="dropzone">
+  <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
     This div is draggable
-  &lt;/div&gt;
-&lt;/div&gt;
-&lt;div class="dropzone"&gt;&lt;/div&gt;
-&lt;div class="dropzone"&gt;&lt;/div&gt;
-&lt;div class="dropzone"&gt;&lt;/div&gt;
+  </div>
+</div>
+<div class="dropzone"></div>
+<div class="dropzone"></div>
+<div class="dropzone"></div>
 
-&lt;style&gt;
+<style>
   #draggable {
     width: 200px;
     height: 20px;
@@ -162,9 +72,9 @@ translation_of: Web/API/Document/drag_event
     margin-bottom: 10px;
     padding: 10px;
   }
-&lt;/style&gt;
+</style>
 
-&lt;script&gt;
+<script>
   var dragged;
 
   /* Les événements sont déclenchés sur les objets glissables */
@@ -217,45 +127,28 @@ translation_of: Web/API/Document/drag_event
       }
 
   }, false);
-&lt;/script&gt;
-</pre>
+</script>
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML WHATWG", "interaction.html#dndevents", "drag event")}}</td>
-   <td>{{Spec2("HTML WHATWG")}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML5.1", "editing.html#dndevents", "drag event")}}</td>
-   <td>{{Spec2("HTML5.1")}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Specification                                                                                    | Status                           | Comment             |
+| ------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------- |
+| {{SpecName("HTML WHATWG", "interaction.html#dndevents", "drag event")}} | {{Spec2("HTML WHATWG")}} |                     |
+| {{SpecName("HTML5.1", "editing.html#dndevents", "drag event")}}             | {{Spec2("HTML5.1")}}     | Définition initiale |
 
-<h2 id="Compatibilités_navigateur">Compatibilités navigateur</h2>
+## Compatibilités navigateur
 
-<p>{{Compat("api.Document.drag_event")}}</p>
+{{Compat("api.Document.drag_event")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{event("drag")}}</li>
- <li>{{event("dragstart")}}</li>
- <li>{{event("dragend")}}</li>
- <li>{{event("dragover")}}</li>
- <li>{{event("dragenter")}}</li>
- <li>{{event("dragleave")}}</li>
- <li>{{event("dragexit")}}</li>
- <li>{{event("drop")}}</li>
- <li><a href="http://jsfiddle.net/zfnj5rv4/">Demo</a></li>
-</ul>
+- {{event("drag")}}
+- {{event("dragstart")}}
+- {{event("dragend")}}
+- {{event("dragover")}}
+- {{event("dragenter")}}
+- {{event("dragleave")}}
+- {{event("dragexit")}}
+- {{event("drop")}}
+- [Demo](http://jsfiddle.net/zfnj5rv4/)
diff --git a/files/fr/web/api/document/dragend_event/index.md b/files/fr/web/api/document/dragend_event/index.md
index 8435a6c7e4..9c76951378 100644
--- a/files/fr/web/api/document/dragend_event/index.md
+++ b/files/fr/web/api/document/dragend_event/index.md
@@ -3,149 +3,59 @@ title: dragend
 slug: Web/API/Document/dragend_event
 translation_of: Web/API/Document/dragend_event
 ---
-<p>L'événement <strong>dragend</strong> est déclenché lorsque une opération de glissement est terminée (en relâchant le bouton de la souris ou en appuyant sur la touche Echap).</p>
-
-<h2>Informations générales</h2>
-
-<dl>
- <dt>Interface</dt>
- <dd>{{domxref("DragEvent")}}</dd>
- <dt>Propagation</dt>
- <dd>Oui</dd>
- <dt>Annulable</dt>
- <dd>Non</dd>
- <dt>Cible</dt>
- <dd>{{domxref("Document")}}, {{domxref("Element")}}</dd>
- <dt>Action par défaut</dt>
- <dd>Varie</dd>
-</dl>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Property</th>
-   <th scope="col">Type</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>target</code> {{readonlyInline}}</td>
-   <td><a href="/en-US/docs/Web/API/EventTarget"><code>EventTarget</code></a></td>
-   <td>The element that was underneath the element being dragged.</td>
-  </tr>
-  <tr>
-   <td><code>type</code> {{readonlyInline}}</td>
-   <td><a href="/en-US/docs/Web/API/DOMString"><code>DOMString</code></a></td>
-   <td>The type of event.</td>
-  </tr>
-  <tr>
-   <td><code>bubbles</code> {{readonlyInline}}</td>
-   <td><a href="/en-US/docs/Web/API/Boolean"><code>Boolean</code></a></td>
-   <td>Whether the event normally bubbles or not</td>
-  </tr>
-  <tr>
-   <td><code>cancelable</code> {{readonlyInline}}</td>
-   <td><a href="/en-US/docs/Web/API/Boolean"><code>Boolean</code></a></td>
-   <td>Whether the event is cancellable or not?</td>
-  </tr>
-  <tr>
-   <td><code>view</code> {{readonlyInline}}</td>
-   <td><a href="/en-US/docs/Web/API/WindowProxy" rel="nofollow"><code>WindowProxy</code></a></td>
-   <td><a href="/en-US/docs/Web/API/Document/defaultView"><code>document.defaultView</code></a> (<code>window</code> of the document)</td>
-  </tr>
-  <tr>
-   <td><code>detail</code> {{readonlyInline}}</td>
-   <td><code>long</code> (<code>float</code>)</td>
-   <td>0.</td>
-  </tr>
-  <tr>
-   <td><code>dataTransfer</code></td>
-   <td>DataTransfer</td>
-   <td>The data that underlies a drag-and-drop operation, known as the <a href="/en-US/docs/Web/API/DataTransfer">drag data store</a>. Protected mode.</td>
-  </tr>
-  <tr>
-   <td><code>currentTarget</code> {{readonlyInline}}</td>
-   <td>EventTarget</td>
-   <td>The node that had the event listener attached.</td>
-  </tr>
-  <tr>
-   <td><code>relatedTarget</code> {{readonlyInline}}</td>
-   <td>EventTarget</td>
-   <td>For <code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code> and <code>mouseleave</code> events: the target of the complementary event (the <code>mouseleave</code> target in the case of a <code>mouseenter</code> event). <code>null</code> otherwise.</td>
-  </tr>
-  <tr>
-   <td><code>screenX</code> {{readonlyInline}}</td>
-   <td>long</td>
-   <td>The X coordinate of the mouse pointer in global (screen) coordinates.</td>
-  </tr>
-  <tr>
-   <td><code>screenY</code> {{readonlyInline}}</td>
-   <td>long</td>
-   <td>The Y coordinate of the mouse pointer in global (screen) coordinates.</td>
-  </tr>
-  <tr>
-   <td><code>clientX</code> {{readonlyInline}}</td>
-   <td>long</td>
-   <td>The X coordinate of the mouse pointer in local (DOM content) coordinates.</td>
-  </tr>
-  <tr>
-   <td><code>clientY</code> {{readonlyInline}}</td>
-   <td>long</td>
-   <td>The Y coordinate of the mouse pointer in local (DOM content) coordinates.</td>
-  </tr>
-  <tr>
-   <td><code>button</code> {{readonlyInline}}</td>
-   <td>unsigned short</td>
-   <td>The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.</td>
-  </tr>
-  <tr>
-   <td><code>buttons</code> {{readonlyInline}}</td>
-   <td>unsigned short</td>
-   <td>The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). <a href="/en-US/docs/Web/API/MouseEvent">More info</a>.</td>
-  </tr>
-  <tr>
-   <td><code>mozPressure</code> {{readonlyInline}}</td>
-   <td>float</td>
-   <td>The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).</td>
-  </tr>
-  <tr>
-   <td><code>ctrlKey</code> {{readonlyInline}}</td>
-   <td>boolean</td>
-   <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td>
-  </tr>
-  <tr>
-   <td><code>shiftKey</code> {{readonlyInline}}</td>
-   <td>boolean</td>
-   <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td>
-  </tr>
-  <tr>
-   <td><code>altKey</code> {{readonlyInline}}</td>
-   <td>boolean</td>
-   <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td>
-  </tr>
-  <tr>
-   <td><code>metaKey</code> {{readonlyInline}}</td>
-   <td>boolean</td>
-   <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Exemple">Exemple</h2>
-
-<pre class="brush: html">&lt;div class="dropzone"&gt;
-  &lt;div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)"&gt;
+L'événement **dragend** est déclenché lorsque une opération de glissement est terminée (en relâchant le bouton de la souris ou en appuyant sur la touche Echap).
+
+## Informations générales
+
+- Interface
+  - : {{domxref("DragEvent")}}
+- Propagation
+  - : Oui
+- Annulable
+  - : Non
+- Cible
+  - : {{domxref("Document")}}, {{domxref("Element")}}
+- Action par défaut
+  - : Varie
+
+## Propriétés
+
+| Property                                 | Type                                             | Description                                                                                                                                                                                                                                                                                                                                                                                                             |
+| ---------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `target` {{readonlyInline}}        | [`EventTarget`](/en-US/docs/Web/API/EventTarget) | The element that was underneath the element being dragged.                                                                                                                                                                                                                                                                                                                                                              |
+| `type` {{readonlyInline}}          | [`DOMString`](/en-US/docs/Web/API/DOMString)     | The type of event.                                                                                                                                                                                                                                                                                                                                                                                                      |
+| `bubbles` {{readonlyInline}}       | [`Boolean`](/en-US/docs/Web/API/Boolean)         | Whether the event normally bubbles or not                                                                                                                                                                                                                                                                                                                                                                               |
+| `cancelable` {{readonlyInline}}    | [`Boolean`](/en-US/docs/Web/API/Boolean)         | Whether the event is cancellable or not?                                                                                                                                                                                                                                                                                                                                                                                |
+| `view` {{readonlyInline}}          | [`WindowProxy`](/en-US/docs/Web/API/WindowProxy) | [`document.defaultView`](/en-US/docs/Web/API/Document/defaultView) (`window` of the document)                                                                                                                                                                                                                                                                                                                           |
+| `detail` {{readonlyInline}}        | `long` (`float`)                                 | 0.                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| `dataTransfer`                           | DataTransfer                                     | The data that underlies a drag-and-drop operation, known as the [drag data store](/en-US/docs/Web/API/DataTransfer). Protected mode.                                                                                                                                                                                                                                                                                    |
+| `currentTarget` {{readonlyInline}} | EventTarget                                      | The node that had the event listener attached.                                                                                                                                                                                                                                                                                                                                                                          |
+| `relatedTarget` {{readonlyInline}} | EventTarget                                      | For `mouseover`, `mouseout`, `mouseenter` and `mouseleave` events: the target of the complementary event (the `mouseleave` target in the case of a `mouseenter` event). `null` otherwise.                                                                                                                                                                                                                               |
+| `screenX` {{readonlyInline}}       | long                                             | The X coordinate of the mouse pointer in global (screen) coordinates.                                                                                                                                                                                                                                                                                                                                                   |
+| `screenY` {{readonlyInline}}       | long                                             | The Y coordinate of the mouse pointer in global (screen) coordinates.                                                                                                                                                                                                                                                                                                                                                   |
+| `clientX` {{readonlyInline}}       | long                                             | The X coordinate of the mouse pointer in local (DOM content) coordinates.                                                                                                                                                                                                                                                                                                                                               |
+| `clientY` {{readonlyInline}}       | long                                             | The Y coordinate of the mouse pointer in local (DOM content) coordinates.                                                                                                                                                                                                                                                                                                                                               |
+| `button` {{readonlyInline}}        | unsigned short                                   | The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.                                                                                                                                                        |
+| `buttons` {{readonlyInline}}       | unsigned short                                   | The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 \| 2). [More info](/en-US/docs/Web/API/MouseEvent). |
+| `mozPressure` {{readonlyInline}}   | float                                            | The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).                                                                                                                                                                                                                                                          |
+| `ctrlKey` {{readonlyInline}}       | boolean                                          | `true` if the control key was down when the event was fired. `false` otherwise.                                                                                                                                                                                                                                                                                                                                         |
+| `shiftKey` {{readonlyInline}}      | boolean                                          | `true` if the shift key was down when the event was fired. `false` otherwise.                                                                                                                                                                                                                                                                                                                                           |
+| `altKey` {{readonlyInline}}        | boolean                                          | `true` if the alt key was down when the event was fired. `false` otherwise.                                                                                                                                                                                                                                                                                                                                             |
+| `metaKey` {{readonlyInline}}       | boolean                                          | `true` if the meta key was down when the event was fired. `false` otherwise.                                                                                                                                                                                                                                                                                                                                            |
+
+## Exemple
+
+```html
+<div class="dropzone">
+  <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
     This div is draggable
-  &lt;/div&gt;
-&lt;/div&gt;
-&lt;div class="dropzone"&gt;&lt;/div&gt;
-&lt;div class="dropzone"&gt;&lt;/div&gt;
-&lt;div class="dropzone"&gt;&lt;/div&gt;
+  </div>
+</div>
+<div class="dropzone"></div>
+<div class="dropzone"></div>
+<div class="dropzone"></div>
 
-&lt;style&gt;
+<style>
   #draggable {
     width: 200px;
     height: 20px;
@@ -160,9 +70,9 @@ translation_of: Web/API/Document/dragend_event
     margin-bottom: 10px;
     padding: 10px;
   }
-&lt;/style&gt;
+</style>
 
-&lt;script&gt;
+<script>
   var dragged;
 
   /* Les événements sont déclenchés sur les objets glissables */
@@ -215,44 +125,27 @@ translation_of: Web/API/Document/dragend_event
       }
 
   }, false);
-&lt;/script&gt;
-</pre>
+</script>
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragend")}}</td>
-   <td>{{Spec2("HTML WHATWG")}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML5.1", "editing.html#dndevents", "dragend")}}</td>
-   <td>{{Spec2("HTML5.1")}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                | Statut                           | Commentaire         |
+| -------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- |
+| {{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragend")}} | {{Spec2("HTML WHATWG")}} |                     |
+| {{SpecName("HTML5.1", "editing.html#dndevents", "dragend")}}             | {{Spec2("HTML5.1")}}     | Définition initiale |
 
-<h2 id="Compatibilités_navigateurs">Compatibilités navigateurs</h2>
+## Compatibilités navigateurs
 
-<p>{{Compat("api.Document.dragend_event")}}</p>
+{{Compat("api.Document.dragend_event")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{event("drag")}}</li>
- <li>{{event("dragstart")}}</li>
- <li>{{event("dragend")}}</li>
- <li>{{event("dragover")}}</li>
- <li>{{event("dragenter")}}</li>
- <li>{{event("dragleave")}}</li>
- <li>{{event("dragexit")}}</li>
- <li>{{event("drop")}}</li>
-</ul>
+- {{event("drag")}}
+- {{event("dragstart")}}
+- {{event("dragend")}}
+- {{event("dragover")}}
+- {{event("dragenter")}}
+- {{event("dragleave")}}
+- {{event("dragexit")}}
+- {{event("drop")}}
diff --git a/files/fr/web/api/document/dragenter_event/index.md b/files/fr/web/api/document/dragenter_event/index.md
index 370d84b4d3..4aff1b3c8d 100644
--- a/files/fr/web/api/document/dragenter_event/index.md
+++ b/files/fr/web/api/document/dragenter_event/index.md
@@ -3,151 +3,61 @@ title: dragenter
 slug: Web/API/Document/dragenter_event
 translation_of: Web/API/Document/dragenter_event
 ---
-<div>{{APIRef}}</div>
-
-<p>L'événement <strong>dragenter</strong> est déclenché lorsqu'un élément glissé ou une sélection de texte entre dans une cible de drop valide.</p>
-
-<h2>Informations générales</h2>
-
-<dl>
- <dt>Interface</dt>
- <dd>{{domxref("DragEvent")}}</dd>
- <dt>Propagation</dt>
- <dd>Oui</dd>
- <dt>Annulable</dt>
- <dd>Oui</dd>
- <dt>Cible</dt>
- <dd>La sélection immédiate de l'utilisateur (l'élément présentement indiqué par l'utilisateur comme cible pour le drop), ou l'élément {{HTMLElement("body")}}.</dd>
- <dt>Action par défaut</dt>
- <dd>Rejette la sélection immédiate de l'utilisateur comme élément cible potentiel</dd>
-</dl>
-
-<h2 id="Properties">Properties</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Property</th>
-   <th scope="col">Type</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>target</code> {{readonlyInline}}</td>
-   <td><a href="/en-US/docs/Web/API/EventTarget"><code>EventTarget</code></a></td>
-   <td>The element that was underneath the element being dragged.</td>
-  </tr>
-  <tr>
-   <td><code>type</code> {{readonlyInline}}</td>
-   <td><a href="/en-US/docs/Web/API/DOMString"><code>DOMString</code></a></td>
-   <td>The type of event.</td>
-  </tr>
-  <tr>
-   <td><code>bubbles</code> {{readonlyInline}}</td>
-   <td><a href="/en-US/docs/Web/API/Boolean"><code>Boolean</code></a></td>
-   <td>Whether the event normally bubbles or not</td>
-  </tr>
-  <tr>
-   <td><code>cancelable</code> {{readonlyInline}}</td>
-   <td><a href="/en-US/docs/Web/API/Boolean"><code>Boolean</code></a></td>
-   <td>Whether the event is cancellable or not?</td>
-  </tr>
-  <tr>
-   <td><code>view</code> {{readonlyInline}}</td>
-   <td><a href="/en-US/docs/Web/API/WindowProxy" rel="nofollow"><code>WindowProxy</code></a></td>
-   <td><a href="/en-US/docs/Web/API/Document/defaultView"><code>document.defaultView</code></a> (<code>window</code> of the document)</td>
-  </tr>
-  <tr>
-   <td><code>detail</code> {{readonlyInline}}</td>
-   <td><code>long</code> (<code>float</code>)</td>
-   <td>0.</td>
-  </tr>
-  <tr>
-   <td><code>dataTransfer</code></td>
-   <td>DataTransfer</td>
-   <td>The data that underlies a drag-and-drop operation, known as the <a href="/en-US/docs/Web/API/DataTransfer">drag data store</a>. Protected mode.</td>
-  </tr>
-  <tr>
-   <td><code>currentTarget</code> {{readonlyInline}}</td>
-   <td>EventTarget</td>
-   <td>The node that had the event listener attached.</td>
-  </tr>
-  <tr>
-   <td><code>relatedTarget</code> {{readonlyInline}}</td>
-   <td>EventTarget</td>
-   <td>For <code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code> and <code>mouseleave</code> events: the target of the complementary event (the <code>mouseleave</code> target in the case of a <code>mouseenter</code> event). <code>null</code> otherwise.</td>
-  </tr>
-  <tr>
-   <td><code>screenX</code> {{readonlyInline}}</td>
-   <td>long</td>
-   <td>The X coordinate of the mouse pointer in global (screen) coordinates.</td>
-  </tr>
-  <tr>
-   <td><code>screenY</code> {{readonlyInline}}</td>
-   <td>long</td>
-   <td>The Y coordinate of the mouse pointer in global (screen) coordinates.</td>
-  </tr>
-  <tr>
-   <td><code>clientX</code> {{readonlyInline}}</td>
-   <td>long</td>
-   <td>The X coordinate of the mouse pointer in local (DOM content) coordinates.</td>
-  </tr>
-  <tr>
-   <td><code>clientY</code> {{readonlyInline}}</td>
-   <td>long</td>
-   <td>The Y coordinate of the mouse pointer in local (DOM content) coordinates.</td>
-  </tr>
-  <tr>
-   <td><code>button</code> {{readonlyInline}}</td>
-   <td>unsigned short</td>
-   <td>The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.</td>
-  </tr>
-  <tr>
-   <td><code>buttons</code> {{readonlyInline}}</td>
-   <td>unsigned short</td>
-   <td>The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). <a href="/en-US/docs/Web/API/MouseEvent">More info</a>.</td>
-  </tr>
-  <tr>
-   <td><code>mozPressure</code> {{readonlyInline}}</td>
-   <td>float</td>
-   <td>The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).</td>
-  </tr>
-  <tr>
-   <td><code>ctrlKey</code> {{readonlyInline}}</td>
-   <td>boolean</td>
-   <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td>
-  </tr>
-  <tr>
-   <td><code>shiftKey</code> {{readonlyInline}}</td>
-   <td>boolean</td>
-   <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td>
-  </tr>
-  <tr>
-   <td><code>altKey</code> {{readonlyInline}}</td>
-   <td>boolean</td>
-   <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td>
-  </tr>
-  <tr>
-   <td><code>metaKey</code> {{readonlyInline}}</td>
-   <td>boolean</td>
-   <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Exemple">Exemple</h2>
-
-<pre class="brush: html">&lt;div class="dropzone"&gt;
-  &lt;div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)"&gt;
+{{APIRef}}
+
+L'événement **dragenter** est déclenché lorsqu'un élément glissé ou une sélection de texte entre dans une cible de drop valide.
+
+## Informations générales
+
+- Interface
+  - : {{domxref("DragEvent")}}
+- Propagation
+  - : Oui
+- Annulable
+  - : Oui
+- Cible
+  - : La sélection immédiate de l'utilisateur (l'élément présentement indiqué par l'utilisateur comme cible pour le drop), ou l'élément {{HTMLElement("body")}}.
+- Action par défaut
+  - : Rejette la sélection immédiate de l'utilisateur comme élément cible potentiel
+
+## Properties
+
+| Property                                 | Type                                             | Description                                                                                                                                                                                                                                                                                                                                                                                                             |
+| ---------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `target` {{readonlyInline}}        | [`EventTarget`](/en-US/docs/Web/API/EventTarget) | The element that was underneath the element being dragged.                                                                                                                                                                                                                                                                                                                                                              |
+| `type` {{readonlyInline}}          | [`DOMString`](/en-US/docs/Web/API/DOMString)     | The type of event.                                                                                                                                                                                                                                                                                                                                                                                                      |
+| `bubbles` {{readonlyInline}}       | [`Boolean`](/en-US/docs/Web/API/Boolean)         | Whether the event normally bubbles or not                                                                                                                                                                                                                                                                                                                                                                               |
+| `cancelable` {{readonlyInline}}    | [`Boolean`](/en-US/docs/Web/API/Boolean)         | Whether the event is cancellable or not?                                                                                                                                                                                                                                                                                                                                                                                |
+| `view` {{readonlyInline}}          | [`WindowProxy`](/en-US/docs/Web/API/WindowProxy) | [`document.defaultView`](/en-US/docs/Web/API/Document/defaultView) (`window` of the document)                                                                                                                                                                                                                                                                                                                           |
+| `detail` {{readonlyInline}}        | `long` (`float`)                                 | 0.                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| `dataTransfer`                           | DataTransfer                                     | The data that underlies a drag-and-drop operation, known as the [drag data store](/en-US/docs/Web/API/DataTransfer). Protected mode.                                                                                                                                                                                                                                                                                    |
+| `currentTarget` {{readonlyInline}} | EventTarget                                      | The node that had the event listener attached.                                                                                                                                                                                                                                                                                                                                                                          |
+| `relatedTarget` {{readonlyInline}} | EventTarget                                      | For `mouseover`, `mouseout`, `mouseenter` and `mouseleave` events: the target of the complementary event (the `mouseleave` target in the case of a `mouseenter` event). `null` otherwise.                                                                                                                                                                                                                               |
+| `screenX` {{readonlyInline}}       | long                                             | The X coordinate of the mouse pointer in global (screen) coordinates.                                                                                                                                                                                                                                                                                                                                                   |
+| `screenY` {{readonlyInline}}       | long                                             | The Y coordinate of the mouse pointer in global (screen) coordinates.                                                                                                                                                                                                                                                                                                                                                   |
+| `clientX` {{readonlyInline}}       | long                                             | The X coordinate of the mouse pointer in local (DOM content) coordinates.                                                                                                                                                                                                                                                                                                                                               |
+| `clientY` {{readonlyInline}}       | long                                             | The Y coordinate of the mouse pointer in local (DOM content) coordinates.                                                                                                                                                                                                                                                                                                                                               |
+| `button` {{readonlyInline}}        | unsigned short                                   | The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.                                                                                                                                                        |
+| `buttons` {{readonlyInline}}       | unsigned short                                   | The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 \| 2). [More info](/en-US/docs/Web/API/MouseEvent). |
+| `mozPressure` {{readonlyInline}}   | float                                            | The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).                                                                                                                                                                                                                                                          |
+| `ctrlKey` {{readonlyInline}}       | boolean                                          | `true` if the control key was down when the event was fired. `false` otherwise.                                                                                                                                                                                                                                                                                                                                         |
+| `shiftKey` {{readonlyInline}}      | boolean                                          | `true` if the shift key was down when the event was fired. `false` otherwise.                                                                                                                                                                                                                                                                                                                                           |
+| `altKey` {{readonlyInline}}        | boolean                                          | `true` if the alt key was down when the event was fired. `false` otherwise.                                                                                                                                                                                                                                                                                                                                             |
+| `metaKey` {{readonlyInline}}       | boolean                                          | `true` if the meta key was down when the event was fired. `false` otherwise.                                                                                                                                                                                                                                                                                                                                            |
+
+## Exemple
+
+```html
+<div class="dropzone">
+  <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
     This div is draggable
-  &lt;/div&gt;
-&lt;/div&gt;
-&lt;div class="dropzone"&gt;&lt;/div&gt;
-&lt;div class="dropzone"&gt;&lt;/div&gt;
-&lt;div class="dropzone"&gt;&lt;/div&gt;
+  </div>
+</div>
+<div class="dropzone"></div>
+<div class="dropzone"></div>
+<div class="dropzone"></div>
 
-&lt;style&gt;
+<style>
   #draggable {
     width: 200px;
     height: 20px;
@@ -162,9 +72,9 @@ translation_of: Web/API/Document/dragenter_event
     margin-bottom: 10px;
     padding: 10px;
   }
-&lt;/style&gt;
+</style>
 
-&lt;script&gt;
+<script>
   var dragged;
 
   /* Les événements sont déclenchés sur les objets glissables */
@@ -199,7 +109,7 @@ translation_of: Web/API/Document/dragenter_event
   }, false);
 
   document.addEventListener("dragleave", function( event ) {
-      // reset de l'arrière-plan des potentielles cible du drop lorsque les éléments glissables les quittent 
+      // reset de l'arrière-plan des potentielles cible du drop lorsque les éléments glissables les quittent
       if ( event.target.className == "dropzone" ) {
           event.target.style.background = "";
       }
@@ -217,44 +127,27 @@ translation_of: Web/API/Document/dragenter_event
       }
 
   }, false);
-&lt;/script&gt;
-</pre>
+</script>
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragenter")}}</td>
-   <td>{{Spec2("HTML WHATWG")}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML5.1", "editing.html#dndevents", "dragenter")}}</td>
-   <td>{{Spec2("HTML5.1")}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                | Statut                           | Commentaire         |
+| -------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- |
+| {{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragenter")}} | {{Spec2("HTML WHATWG")}} |                     |
+| {{SpecName("HTML5.1", "editing.html#dndevents", "dragenter")}}         | {{Spec2("HTML5.1")}}     | Définition initiale |
 
-<h2 id="Compatiblités_navigateurs">Compatiblités navigateurs</h2>
+## Compatiblités navigateurs
 
-<p>{{Compat("api.Document.dragenter_event")}}</p>
+{{Compat("api.Document.dragenter_event")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{event("drag")}}</li>
- <li>{{event("dragstart")}}</li>
- <li>{{event("dragend")}}</li>
- <li>{{event("dragover")}}</li>
- <li>{{event("dragenter")}}</li>
- <li>{{event("dragleave")}}</li>
- <li>{{event("dragexit")}}</li>
- <li>{{event("drop")}}</li>
-</ul>
+- {{event("drag")}}
+- {{event("dragstart")}}
+- {{event("dragend")}}
+- {{event("dragover")}}
+- {{event("dragenter")}}
+- {{event("dragleave")}}
+- {{event("dragexit")}}
+- {{event("drop")}}
diff --git a/files/fr/web/api/document/dragleave_event/index.md b/files/fr/web/api/document/dragleave_event/index.md
index b8624adb26..6c5b8849bd 100644
--- a/files/fr/web/api/document/dragleave_event/index.md
+++ b/files/fr/web/api/document/dragleave_event/index.md
@@ -3,149 +3,59 @@ title: dragleave
 slug: Web/API/Document/dragleave_event
 translation_of: Web/API/Document/dragleave_event
 ---
-<p>L'événement <strong>dragleave </strong>est déclenché lorsqu'un élément glissé ou une sélection de texte quitte une cible de dépôt valide.</p>
-
-<h2 id="Informations_générales">Informations générales</h2>
-
-<dl>
- <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
- <dd style="margin: 0 0 0 120px;"><a href="/fr/docs/Web/API/DragEvent"><code>DragEvent</code></a></dd>
- <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
- <dd style="margin: 0 0 0 120px;">Oui</dd>
- <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
- <dd style="margin: 0 0 0 120px;">Non</dd>
- <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
- <dd style="margin: 0 0 0 120px;">{{domxref("Document")}}, {{domxref("Element")}}</dd>
- <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
- <dd style="margin: 0 0 0 120px;">Aucune</dd>
-</dl>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Property</th>
-   <th scope="col">Type</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>target</code> {{readonlyInline}}</td>
-   <td><a href="/en-US/docs/Web/API/EventTarget"><code>EventTarget</code></a></td>
-   <td>The element that was underneath the element being dragged.</td>
-  </tr>
-  <tr>
-   <td><code>type</code> {{readonlyInline}}</td>
-   <td><a href="/en-US/docs/Web/API/DOMString"><code>DOMString</code></a></td>
-   <td>The type of event.</td>
-  </tr>
-  <tr>
-   <td><code>bubbles</code> {{readonlyInline}}</td>
-   <td><a href="/en-US/docs/Web/API/Boolean"><code>Boolean</code></a></td>
-   <td>Whether the event normally bubbles or not</td>
-  </tr>
-  <tr>
-   <td><code>cancelable</code> {{readonlyInline}}</td>
-   <td><a href="/en-US/docs/Web/API/Boolean"><code>Boolean</code></a></td>
-   <td>Whether the event is cancellable or not?</td>
-  </tr>
-  <tr>
-   <td><code>view</code> {{readonlyInline}}</td>
-   <td><a href="/en-US/docs/Web/API/WindowProxy" rel="nofollow"><code>WindowProxy</code></a></td>
-   <td><a href="/en-US/docs/Web/API/Document/defaultView"><code>document.defaultView</code></a> (<code>window</code> of the document)</td>
-  </tr>
-  <tr>
-   <td><code>detail</code> {{readonlyInline}}</td>
-   <td><code>long</code> (<code>float</code>)</td>
-   <td>0.</td>
-  </tr>
-  <tr>
-   <td><code>dataTransfer</code></td>
-   <td>DataTransfer</td>
-   <td>The data that underlies a drag-and-drop operation, known as the <a href="/en-US/docs/Web/API/DataTransfer">drag data store</a>. Protected mode.</td>
-  </tr>
-  <tr>
-   <td><code>currentTarget</code> {{readonlyInline}}</td>
-   <td>EventTarget</td>
-   <td>The node that had the event listener attached.</td>
-  </tr>
-  <tr>
-   <td><code>relatedTarget</code> {{readonlyInline}}</td>
-   <td>EventTarget</td>
-   <td>For <code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code> and <code>mouseleave</code> events: the target of the complementary event (the <code>mouseleave</code> target in the case of a <code>mouseenter</code> event). <code>null</code> otherwise.</td>
-  </tr>
-  <tr>
-   <td><code>screenX</code> {{readonlyInline}}</td>
-   <td>long</td>
-   <td>The X coordinate of the mouse pointer in global (screen) coordinates.</td>
-  </tr>
-  <tr>
-   <td><code>screenY</code> {{readonlyInline}}</td>
-   <td>long</td>
-   <td>The Y coordinate of the mouse pointer in global (screen) coordinates.</td>
-  </tr>
-  <tr>
-   <td><code>clientX</code> {{readonlyInline}}</td>
-   <td>long</td>
-   <td>The X coordinate of the mouse pointer in local (DOM content) coordinates.</td>
-  </tr>
-  <tr>
-   <td><code>clientY</code> {{readonlyInline}}</td>
-   <td>long</td>
-   <td>The Y coordinate of the mouse pointer in local (DOM content) coordinates.</td>
-  </tr>
-  <tr>
-   <td><code>button</code> {{readonlyInline}}</td>
-   <td>unsigned short</td>
-   <td>The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.</td>
-  </tr>
-  <tr>
-   <td><code>buttons</code> {{readonlyInline}}</td>
-   <td>unsigned short</td>
-   <td>The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). <a href="/en-US/docs/Web/API/MouseEvent">More info</a>.</td>
-  </tr>
-  <tr>
-   <td><code>mozPressure</code> {{readonlyInline}}</td>
-   <td>float</td>
-   <td>The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).</td>
-  </tr>
-  <tr>
-   <td><code>ctrlKey</code> {{readonlyInline}}</td>
-   <td>boolean</td>
-   <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td>
-  </tr>
-  <tr>
-   <td><code>shiftKey</code> {{readonlyInline}}</td>
-   <td>boolean</td>
-   <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td>
-  </tr>
-  <tr>
-   <td><code>altKey</code> {{readonlyInline}}</td>
-   <td>boolean</td>
-   <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td>
-  </tr>
-  <tr>
-   <td><code>metaKey</code> {{readonlyInline}}</td>
-   <td>boolean</td>
-   <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Exemple">Exemple</h2>
-
-<pre class="brush: html">&lt;div class="dropzone"&gt;
-  &lt;div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)"&gt;
+L'événement **dragleave** est déclenché lorsqu'un élément glissé ou une sélection de texte quitte une cible de dépôt valide.
+
+## Informations générales
+
+- Interface
+  - : [`DragEvent`](/fr/docs/Web/API/DragEvent)
+- Propagation
+  - : Oui
+- Annulable
+  - : Non
+- Cible
+  - : {{domxref("Document")}}, {{domxref("Element")}}
+- Action par défaut
+  - : Aucune
+
+## Propriétés
+
+| Property                                 | Type                                             | Description                                                                                                                                                                                                                                                                                                                                                                                                             |
+| ---------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `target` {{readonlyInline}}        | [`EventTarget`](/en-US/docs/Web/API/EventTarget) | The element that was underneath the element being dragged.                                                                                                                                                                                                                                                                                                                                                              |
+| `type` {{readonlyInline}}          | [`DOMString`](/en-US/docs/Web/API/DOMString)     | The type of event.                                                                                                                                                                                                                                                                                                                                                                                                      |
+| `bubbles` {{readonlyInline}}       | [`Boolean`](/en-US/docs/Web/API/Boolean)         | Whether the event normally bubbles or not                                                                                                                                                                                                                                                                                                                                                                               |
+| `cancelable` {{readonlyInline}}    | [`Boolean`](/en-US/docs/Web/API/Boolean)         | Whether the event is cancellable or not?                                                                                                                                                                                                                                                                                                                                                                                |
+| `view` {{readonlyInline}}          | [`WindowProxy`](/en-US/docs/Web/API/WindowProxy) | [`document.defaultView`](/en-US/docs/Web/API/Document/defaultView) (`window` of the document)                                                                                                                                                                                                                                                                                                                           |
+| `detail` {{readonlyInline}}        | `long` (`float`)                                 | 0.                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| `dataTransfer`                           | DataTransfer                                     | The data that underlies a drag-and-drop operation, known as the [drag data store](/en-US/docs/Web/API/DataTransfer). Protected mode.                                                                                                                                                                                                                                                                                    |
+| `currentTarget` {{readonlyInline}} | EventTarget                                      | The node that had the event listener attached.                                                                                                                                                                                                                                                                                                                                                                          |
+| `relatedTarget` {{readonlyInline}} | EventTarget                                      | For `mouseover`, `mouseout`, `mouseenter` and `mouseleave` events: the target of the complementary event (the `mouseleave` target in the case of a `mouseenter` event). `null` otherwise.                                                                                                                                                                                                                               |
+| `screenX` {{readonlyInline}}       | long                                             | The X coordinate of the mouse pointer in global (screen) coordinates.                                                                                                                                                                                                                                                                                                                                                   |
+| `screenY` {{readonlyInline}}       | long                                             | The Y coordinate of the mouse pointer in global (screen) coordinates.                                                                                                                                                                                                                                                                                                                                                   |
+| `clientX` {{readonlyInline}}       | long                                             | The X coordinate of the mouse pointer in local (DOM content) coordinates.                                                                                                                                                                                                                                                                                                                                               |
+| `clientY` {{readonlyInline}}       | long                                             | The Y coordinate of the mouse pointer in local (DOM content) coordinates.                                                                                                                                                                                                                                                                                                                                               |
+| `button` {{readonlyInline}}        | unsigned short                                   | The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.                                                                                                                                                        |
+| `buttons` {{readonlyInline}}       | unsigned short                                   | The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 \| 2). [More info](/en-US/docs/Web/API/MouseEvent). |
+| `mozPressure` {{readonlyInline}}   | float                                            | The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).                                                                                                                                                                                                                                                          |
+| `ctrlKey` {{readonlyInline}}       | boolean                                          | `true` if the control key was down when the event was fired. `false` otherwise.                                                                                                                                                                                                                                                                                                                                         |
+| `shiftKey` {{readonlyInline}}      | boolean                                          | `true` if the shift key was down when the event was fired. `false` otherwise.                                                                                                                                                                                                                                                                                                                                           |
+| `altKey` {{readonlyInline}}        | boolean                                          | `true` if the alt key was down when the event was fired. `false` otherwise.                                                                                                                                                                                                                                                                                                                                             |
+| `metaKey` {{readonlyInline}}       | boolean                                          | `true` if the meta key was down when the event was fired. `false` otherwise.                                                                                                                                                                                                                                                                                                                                            |
+
+## Exemple
+
+```html
+<div class="dropzone">
+  <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
     This div is draggable
-  &lt;/div&gt;
-&lt;/div&gt;
-&lt;div class="dropzone"&gt;&lt;/div&gt;
-&lt;div class="dropzone"&gt;&lt;/div&gt;
-&lt;div class="dropzone"&gt;&lt;/div&gt;
+  </div>
+</div>
+<div class="dropzone"></div>
+<div class="dropzone"></div>
+<div class="dropzone"></div>
 
-&lt;style&gt;
+<style>
   #draggable {
     width: 200px;
     height: 20px;
@@ -160,9 +70,9 @@ translation_of: Web/API/Document/dragleave_event
     margin-bottom: 10px;
     padding: 10px;
   }
-&lt;/style&gt;
+</style>
 
-&lt;script&gt;
+<script>
   var dragged;
 
   /* Les événements sont déclenchés sur les objets glissables */
@@ -197,7 +107,7 @@ translation_of: Web/API/Document/dragleave_event
   }, false);
 
   document.addEventListener("dragleave", function( event ) {
-      // reset de l'arrière-plan des potentielles cible du drop lorsque les éléments glissables les quittent 
+      // reset de l'arrière-plan des potentielles cible du drop lorsque les éléments glissables les quittent
       if ( event.target.className == "dropzone" ) {
           event.target.style.background = "";
       }
@@ -215,44 +125,27 @@ translation_of: Web/API/Document/dragleave_event
       }
 
   }, false);
-&lt;/script&gt;
-</pre>
+</script>
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragleave")}}</td>
-   <td>{{Spec2("HTML WHATWG")}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML5.1", "editing.html#dndevents", "dragleave")}}</td>
-   <td>{{Spec2("HTML5.1")}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                | Statut                           | Commentaire         |
+| -------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- |
+| {{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragleave")}} | {{Spec2("HTML WHATWG")}} |                     |
+| {{SpecName("HTML5.1", "editing.html#dndevents", "dragleave")}}         | {{Spec2("HTML5.1")}}     | Définition initiale |
 
-<h2 id="Compatibilités_navigateur">Compatibilités navigateur</h2>
+## Compatibilités navigateur
 
-<p>{{Compat("api.Document.dragleave_event")}}</p>
+{{Compat("api.Document.dragleave_event")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{event("drag")}}</li>
- <li>{{event("dragstart")}}</li>
- <li>{{event("dragend")}}</li>
- <li>{{event("dragover")}}</li>
- <li>{{event("dragenter")}}</li>
- <li>{{event("dragleave")}}</li>
- <li>{{event("dragexit")}}</li>
- <li>{{event("drop")}}</li>
-</ul>
+- {{event("drag")}}
+- {{event("dragstart")}}
+- {{event("dragend")}}
+- {{event("dragover")}}
+- {{event("dragenter")}}
+- {{event("dragleave")}}
+- {{event("dragexit")}}
+- {{event("drop")}}
diff --git a/files/fr/web/api/document/dragover_event/index.md b/files/fr/web/api/document/dragover_event/index.md
index eb7ab548fd..c189df61a0 100644
--- a/files/fr/web/api/document/dragover_event/index.md
+++ b/files/fr/web/api/document/dragover_event/index.md
@@ -3,151 +3,61 @@ title: dragover
 slug: Web/API/Document/dragover_event
 translation_of: Web/API/Document/dragover_event
 ---
-<div>{{APIRef}}</div>
-
-<p>L'événement <strong>dragover </strong>est déclenché lorsqu'un élément ou une sélection de texte est glissé jusqu'à une cible de dépôt valide (toutes les 100ms)</p>
-
-<h2 id="Informations_générales">Informations générales</h2>
-
-<dl>
- <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
- <dd style="margin: 0 0 0 120px;"><a href="/fr/docs/Web/API/DragEvent"><code>DragEvent</code></a></dd>
- <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
- <dd style="margin: 0 0 0 120px;">Oui</dd>
- <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
- <dd style="margin: 0 0 0 120px;">Oui</dd>
- <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
- <dd style="margin: 0 0 0 120px;">{{domxref("Document")}}, {{domxref("Element")}}</dd>
- <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
- <dd style="margin: 0 0 0 120px;">Reset l'opération de glissement courante à "none"</dd>
-</dl>
-
-<h2 id="Properties">Properties</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Property</th>
-   <th scope="col">Type</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>target</code> {{readonlyInline}}</td>
-   <td><a href="/en-US/docs/Web/API/EventTarget"><code>EventTarget</code></a></td>
-   <td>The element that was underneath the element being dragged.</td>
-  </tr>
-  <tr>
-   <td><code>type</code> {{readonlyInline}}</td>
-   <td><a href="/en-US/docs/Web/API/DOMString"><code>DOMString</code></a></td>
-   <td>The type of event.</td>
-  </tr>
-  <tr>
-   <td><code>bubbles</code> {{readonlyInline}}</td>
-   <td><a href="/en-US/docs/Web/API/Boolean"><code>Boolean</code></a></td>
-   <td>Whether the event normally bubbles or not</td>
-  </tr>
-  <tr>
-   <td><code>cancelable</code> {{readonlyInline}}</td>
-   <td><a href="/en-US/docs/Web/API/Boolean"><code>Boolean</code></a></td>
-   <td>Whether the event is cancellable or not?</td>
-  </tr>
-  <tr>
-   <td><code>view</code> {{readonlyInline}}</td>
-   <td><a href="/en-US/docs/Web/API/WindowProxy" rel="nofollow"><code>WindowProxy</code></a></td>
-   <td><a href="/en-US/docs/Web/API/Document/defaultView"><code>document.defaultView</code></a> (<code>window</code> of the document)</td>
-  </tr>
-  <tr>
-   <td><code>detail</code> {{readonlyInline}}</td>
-   <td><code>long</code> (<code>float</code>)</td>
-   <td>0.</td>
-  </tr>
-  <tr>
-   <td><code>dataTransfer</code></td>
-   <td>DataTransfer</td>
-   <td>The data that underlies a drag-and-drop operation, known as the <a href="/en-US/docs/Web/API/DataTransfer">drag data store</a>. Protected mode.</td>
-  </tr>
-  <tr>
-   <td><code>currentTarget</code> {{readonlyInline}}</td>
-   <td>EventTarget</td>
-   <td>The node that had the event listener attached.</td>
-  </tr>
-  <tr>
-   <td><code>relatedTarget</code> {{readonlyInline}}</td>
-   <td>EventTarget</td>
-   <td>For <code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code> and <code>mouseleave</code> events: the target of the complementary event (the <code>mouseleave</code> target in the case of a <code>mouseenter</code> event). <code>null</code> otherwise.</td>
-  </tr>
-  <tr>
-   <td><code>screenX</code> {{readonlyInline}}</td>
-   <td>long</td>
-   <td>The X coordinate of the mouse pointer in global (screen) coordinates.</td>
-  </tr>
-  <tr>
-   <td><code>screenY</code> {{readonlyInline}}</td>
-   <td>long</td>
-   <td>The Y coordinate of the mouse pointer in global (screen) coordinates.</td>
-  </tr>
-  <tr>
-   <td><code>clientX</code> {{readonlyInline}}</td>
-   <td>long</td>
-   <td>The X coordinate of the mouse pointer in local (DOM content) coordinates.</td>
-  </tr>
-  <tr>
-   <td><code>clientY</code> {{readonlyInline}}</td>
-   <td>long</td>
-   <td>The Y coordinate of the mouse pointer in local (DOM content) coordinates.</td>
-  </tr>
-  <tr>
-   <td><code>button</code> {{readonlyInline}}</td>
-   <td>unsigned short</td>
-   <td>The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.</td>
-  </tr>
-  <tr>
-   <td><code>buttons</code> {{readonlyInline}}</td>
-   <td>unsigned short</td>
-   <td>The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). <a href="/en-US/docs/Web/API/MouseEvent">More info</a>.</td>
-  </tr>
-  <tr>
-   <td><code>mozPressure</code> {{readonlyInline}}</td>
-   <td>float</td>
-   <td>The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).</td>
-  </tr>
-  <tr>
-   <td><code>ctrlKey</code> {{readonlyInline}}</td>
-   <td>boolean</td>
-   <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td>
-  </tr>
-  <tr>
-   <td><code>shiftKey</code> {{readonlyInline}}</td>
-   <td>boolean</td>
-   <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td>
-  </tr>
-  <tr>
-   <td><code>altKey</code> {{readonlyInline}}</td>
-   <td>boolean</td>
-   <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td>
-  </tr>
-  <tr>
-   <td><code>metaKey</code> {{readonlyInline}}</td>
-   <td>boolean</td>
-   <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Exemple">Exemple</h2>
-
-<pre class="brush: html">&lt;div class="dropzone"&gt;
-  &lt;div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)"&gt;
+{{APIRef}}
+
+L'événement **dragover** est déclenché lorsqu'un élément ou une sélection de texte est glissé jusqu'à une cible de dépôt valide (toutes les 100ms)
+
+## Informations générales
+
+- Interface
+  - : [`DragEvent`](/fr/docs/Web/API/DragEvent)
+- Propagation
+  - : Oui
+- Annulable
+  - : Oui
+- Cible
+  - : {{domxref("Document")}}, {{domxref("Element")}}
+- Action par défaut
+  - : Reset l'opération de glissement courante à "none"
+
+## Properties
+
+| Property                                 | Type                                             | Description                                                                                                                                                                                                                                                                                                                                                                                                             |
+| ---------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `target` {{readonlyInline}}        | [`EventTarget`](/en-US/docs/Web/API/EventTarget) | The element that was underneath the element being dragged.                                                                                                                                                                                                                                                                                                                                                              |
+| `type` {{readonlyInline}}          | [`DOMString`](/en-US/docs/Web/API/DOMString)     | The type of event.                                                                                                                                                                                                                                                                                                                                                                                                      |
+| `bubbles` {{readonlyInline}}       | [`Boolean`](/en-US/docs/Web/API/Boolean)         | Whether the event normally bubbles or not                                                                                                                                                                                                                                                                                                                                                                               |
+| `cancelable` {{readonlyInline}}    | [`Boolean`](/en-US/docs/Web/API/Boolean)         | Whether the event is cancellable or not?                                                                                                                                                                                                                                                                                                                                                                                |
+| `view` {{readonlyInline}}          | [`WindowProxy`](/en-US/docs/Web/API/WindowProxy) | [`document.defaultView`](/en-US/docs/Web/API/Document/defaultView) (`window` of the document)                                                                                                                                                                                                                                                                                                                           |
+| `detail` {{readonlyInline}}        | `long` (`float`)                                 | 0.                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| `dataTransfer`                           | DataTransfer                                     | The data that underlies a drag-and-drop operation, known as the [drag data store](/en-US/docs/Web/API/DataTransfer). Protected mode.                                                                                                                                                                                                                                                                                    |
+| `currentTarget` {{readonlyInline}} | EventTarget                                      | The node that had the event listener attached.                                                                                                                                                                                                                                                                                                                                                                          |
+| `relatedTarget` {{readonlyInline}} | EventTarget                                      | For `mouseover`, `mouseout`, `mouseenter` and `mouseleave` events: the target of the complementary event (the `mouseleave` target in the case of a `mouseenter` event). `null` otherwise.                                                                                                                                                                                                                               |
+| `screenX` {{readonlyInline}}       | long                                             | The X coordinate of the mouse pointer in global (screen) coordinates.                                                                                                                                                                                                                                                                                                                                                   |
+| `screenY` {{readonlyInline}}       | long                                             | The Y coordinate of the mouse pointer in global (screen) coordinates.                                                                                                                                                                                                                                                                                                                                                   |
+| `clientX` {{readonlyInline}}       | long                                             | The X coordinate of the mouse pointer in local (DOM content) coordinates.                                                                                                                                                                                                                                                                                                                                               |
+| `clientY` {{readonlyInline}}       | long                                             | The Y coordinate of the mouse pointer in local (DOM content) coordinates.                                                                                                                                                                                                                                                                                                                                               |
+| `button` {{readonlyInline}}        | unsigned short                                   | The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.                                                                                                                                                        |
+| `buttons` {{readonlyInline}}       | unsigned short                                   | The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 \| 2). [More info](/en-US/docs/Web/API/MouseEvent). |
+| `mozPressure` {{readonlyInline}}   | float                                            | The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).                                                                                                                                                                                                                                                          |
+| `ctrlKey` {{readonlyInline}}       | boolean                                          | `true` if the control key was down when the event was fired. `false` otherwise.                                                                                                                                                                                                                                                                                                                                         |
+| `shiftKey` {{readonlyInline}}      | boolean                                          | `true` if the shift key was down when the event was fired. `false` otherwise.                                                                                                                                                                                                                                                                                                                                           |
+| `altKey` {{readonlyInline}}        | boolean                                          | `true` if the alt key was down when the event was fired. `false` otherwise.                                                                                                                                                                                                                                                                                                                                             |
+| `metaKey` {{readonlyInline}}       | boolean                                          | `true` if the meta key was down when the event was fired. `false` otherwise.                                                                                                                                                                                                                                                                                                                                            |
+
+## Exemple
+
+```html
+<div class="dropzone">
+  <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
     This div is draggable
-  &lt;/div&gt;
-&lt;/div&gt;
-&lt;div class="dropzone"&gt;&lt;/div&gt;
-&lt;div class="dropzone"&gt;&lt;/div&gt;
-&lt;div class="dropzone"&gt;&lt;/div&gt;
+  </div>
+</div>
+<div class="dropzone"></div>
+<div class="dropzone"></div>
+<div class="dropzone"></div>
 
-&lt;style&gt;
+<style>
   #draggable {
     width: 200px;
     height: 20px;
@@ -162,9 +72,9 @@ translation_of: Web/API/Document/dragover_event
     margin-bottom: 10px;
     padding: 10px;
   }
-&lt;/style&gt;
+</style>
 
-&lt;script&gt;
+<script>
   var dragged;
 
   /* Les événements sont déclenchés sur les objets glissables */
@@ -199,7 +109,7 @@ translation_of: Web/API/Document/dragover_event
   }, false);
 
   document.addEventListener("dragleave", function( event ) {
-      // reset de l'arrière-plan des potentielles cible du drop lorsque les éléments glissables les quittent 
+      // reset de l'arrière-plan des potentielles cible du drop lorsque les éléments glissables les quittent
       if ( event.target.className == "dropzone" ) {
           event.target.style.background = "";
       }
@@ -217,43 +127,27 @@ translation_of: Web/API/Document/dragover_event
       }
 
   }, false);
-&lt;/script&gt;</pre>
+</script>
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragover")}}</td>
-   <td>{{Spec2("HTML WHATWG")}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML5.1", "editing.html#dndevents", "dragover")}}</td>
-   <td>{{Spec2("HTML5.1")}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                | Statut                           | Commentaire         |
+| -------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- |
+| {{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragover")}} | {{Spec2("HTML WHATWG")}} |                     |
+| {{SpecName("HTML5.1", "editing.html#dndevents", "dragover")}}             | {{Spec2("HTML5.1")}}     | Définition initiale |
 
-<h2 id="Compatibilités_navigateur">Compatibilités navigateur</h2>
+## Compatibilités navigateur
 
-<p>{{Compat("api.Document.dragover_event")}}</p>
+{{Compat("api.Document.dragover_event")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{event("drag")}}</li>
- <li>{{event("dragstart")}}</li>
- <li>{{event("dragend")}}</li>
- <li>{{event("dragover")}}</li>
- <li>{{event("dragenter")}}</li>
- <li>{{event("dragleave")}}</li>
- <li>{{event("dragexit")}}</li>
- <li>{{event("drop")}}</li>
-</ul>
+- {{event("drag")}}
+- {{event("dragstart")}}
+- {{event("dragend")}}
+- {{event("dragover")}}
+- {{event("dragenter")}}
+- {{event("dragleave")}}
+- {{event("dragexit")}}
+- {{event("drop")}}
diff --git a/files/fr/web/api/document/dragstart_event/index.md b/files/fr/web/api/document/dragstart_event/index.md
index f45827df5c..2e0cc56f99 100644
--- a/files/fr/web/api/document/dragstart_event/index.md
+++ b/files/fr/web/api/document/dragstart_event/index.md
@@ -3,154 +3,65 @@ title: dragstart
 slug: Web/API/Document/dragstart_event
 translation_of: Web/API/Document/dragstart_event
 ---
-<p>L'événement <strong>dragstart </strong>est déclenché lorsque l'utilisateur glisse un élément ou une sélection de texte.</p>
-
-<h2 id="Informations_générales">Informations générales</h2>
-
-<dl>
- <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
- <dd style="margin: 0 0 0 120px;"><a href="/fr/docs/Web/API/DragEvent"><code>DragEvent</code></a></dd>
- <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
- <dd style="margin: 0 0 0 120px;">Oui</dd>
- <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
- <dd style="margin: 0 0 0 120px;">Oui</dd>
- <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
- <dd style="margin: 0 0 0 120px;">{{domxref("Document")}}, {{domxref("Element")}}</dd>
- <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
- <dd style="margin: 0 0 0 120px;">Initie l'opération de glisser-déposer</dd>
-</dl>
-
-<h2 id="Properties">Properties</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Property</th>
-   <th scope="col">Type</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>target</code> {{readonlyInline}}</td>
-   <td><a href="/en-US/docs/Web/API/EventTarget"><code>EventTarget</code></a></td>
-   <td>The element that was underneath the element being dragged.</td>
-  </tr>
-  <tr>
-   <td><code>type</code> {{readonlyInline}}</td>
-   <td><a href="/en-US/docs/Web/API/DOMString"><code>DOMString</code></a></td>
-   <td>The type of event.</td>
-  </tr>
-  <tr>
-   <td><code>bubbles</code> {{readonlyInline}}</td>
-   <td><a href="/en-US/docs/Web/API/Boolean"><code>Boolean</code></a></td>
-   <td>Whether the event normally bubbles or not</td>
-  </tr>
-  <tr>
-   <td><code>cancelable</code> {{readonlyInline}}</td>
-   <td><a href="/en-US/docs/Web/API/Boolean"><code>Boolean</code></a></td>
-   <td>Whether the event is cancellable or not?</td>
-  </tr>
-  <tr>
-   <td><code>view</code> {{readonlyInline}}</td>
-   <td><a href="/en-US/docs/Web/API/WindowProxy" rel="nofollow"><code>WindowProxy</code></a></td>
-   <td><a href="/en-US/docs/Web/API/Document/defaultView"><code>document.defaultView</code></a> (<code>window</code> of the document)</td>
-  </tr>
-  <tr>
-   <td><code>detail</code> {{readonlyInline}}</td>
-   <td><code>long</code> (<code>float</code>)</td>
-   <td>0.</td>
-  </tr>
-  <tr>
-   <td><code>dataTransfer</code></td>
-   <td>DataTransfer</td>
-   <td>The data that underlies a drag-and-drop operation, known as the <a href="/en-US/docs/Web/API/DataTransfer">drag data store</a>. Protected mode.</td>
-  </tr>
-  <tr>
-   <td><code>currentTarget</code> {{readonlyInline}}</td>
-   <td>EventTarget</td>
-   <td>The node that had the event listener attached.</td>
-  </tr>
-  <tr>
-   <td><code>relatedTarget</code> {{readonlyInline}}</td>
-   <td>EventTarget</td>
-   <td>For <code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code> and <code>mouseleave</code> events: the target of the complementary event (the <code>mouseleave</code> target in the case of a <code>mouseenter</code> event). <code>null</code> otherwise.</td>
-  </tr>
-  <tr>
-   <td><code>screenX</code> {{readonlyInline}}</td>
-   <td>long</td>
-   <td>The X coordinate of the mouse pointer in global (screen) coordinates.</td>
-  </tr>
-  <tr>
-   <td><code>screenY</code> {{readonlyInline}}</td>
-   <td>long</td>
-   <td>The Y coordinate of the mouse pointer in global (screen) coordinates.</td>
-  </tr>
-  <tr>
-   <td><code>clientX</code> {{readonlyInline}}</td>
-   <td>long</td>
-   <td>The X coordinate of the mouse pointer in local (DOM content) coordinates.</td>
-  </tr>
-  <tr>
-   <td><code>clientY</code> {{readonlyInline}}</td>
-   <td>long</td>
-   <td>The Y coordinate of the mouse pointer in local (DOM content) coordinates.</td>
-  </tr>
-  <tr>
-   <td><code>button</code> {{readonlyInline}}</td>
-   <td>unsigned short</td>
-   <td>The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.</td>
-  </tr>
-  <tr>
-   <td><code>buttons</code> {{readonlyInline}}</td>
-   <td>unsigned short</td>
-   <td>The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). <a href="/en-US/docs/Web/API/MouseEvent">More info</a>.</td>
-  </tr>
-  <tr>
-   <td><code>mozPressure</code> {{readonlyInline}}</td>
-   <td>float</td>
-   <td>The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).</td>
-  </tr>
-  <tr>
-   <td><code>ctrlKey</code> {{readonlyInline}}</td>
-   <td>boolean</td>
-   <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td>
-  </tr>
-  <tr>
-   <td><code>shiftKey</code> {{readonlyInline}}</td>
-   <td>boolean</td>
-   <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td>
-  </tr>
-  <tr>
-   <td><code>altKey</code> {{readonlyInline}}</td>
-   <td>boolean</td>
-   <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td>
-  </tr>
-  <tr>
-   <td><code>metaKey</code> {{readonlyInline}}</td>
-   <td>boolean</td>
-   <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Exemple：dropzone">Exemple：dropzone</h2>
-
-<h3 id="HTML_Content">HTML Content</h3>
-
-<pre class="brush: html">&lt;div class="dropzone"&gt;
-  &lt;div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)"&gt;
+L'événement **dragstart** est déclenché lorsque l'utilisateur glisse un élément ou une sélection de texte.
+
+## Informations générales
+
+- Interface
+  - : [`DragEvent`](/fr/docs/Web/API/DragEvent)
+- Propagation
+  - : Oui
+- Annulable
+  - : Oui
+- Cible
+  - : {{domxref("Document")}}, {{domxref("Element")}}
+- Action par défaut
+  - : Initie l'opération de glisser-déposer
+
+## Properties
+
+| Property                                 | Type                                             | Description                                                                                                                                                                                                                                                                                                                                                                                                             |
+| ---------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `target` {{readonlyInline}}        | [`EventTarget`](/en-US/docs/Web/API/EventTarget) | The element that was underneath the element being dragged.                                                                                                                                                                                                                                                                                                                                                              |
+| `type` {{readonlyInline}}          | [`DOMString`](/en-US/docs/Web/API/DOMString)     | The type of event.                                                                                                                                                                                                                                                                                                                                                                                                      |
+| `bubbles` {{readonlyInline}}       | [`Boolean`](/en-US/docs/Web/API/Boolean)         | Whether the event normally bubbles or not                                                                                                                                                                                                                                                                                                                                                                               |
+| `cancelable` {{readonlyInline}}    | [`Boolean`](/en-US/docs/Web/API/Boolean)         | Whether the event is cancellable or not?                                                                                                                                                                                                                                                                                                                                                                                |
+| `view` {{readonlyInline}}          | [`WindowProxy`](/en-US/docs/Web/API/WindowProxy) | [`document.defaultView`](/en-US/docs/Web/API/Document/defaultView) (`window` of the document)                                                                                                                                                                                                                                                                                                                           |
+| `detail` {{readonlyInline}}        | `long` (`float`)                                 | 0.                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| `dataTransfer`                           | DataTransfer                                     | The data that underlies a drag-and-drop operation, known as the [drag data store](/en-US/docs/Web/API/DataTransfer). Protected mode.                                                                                                                                                                                                                                                                                    |
+| `currentTarget` {{readonlyInline}} | EventTarget                                      | The node that had the event listener attached.                                                                                                                                                                                                                                                                                                                                                                          |
+| `relatedTarget` {{readonlyInline}} | EventTarget                                      | For `mouseover`, `mouseout`, `mouseenter` and `mouseleave` events: the target of the complementary event (the `mouseleave` target in the case of a `mouseenter` event). `null` otherwise.                                                                                                                                                                                                                               |
+| `screenX` {{readonlyInline}}       | long                                             | The X coordinate of the mouse pointer in global (screen) coordinates.                                                                                                                                                                                                                                                                                                                                                   |
+| `screenY` {{readonlyInline}}       | long                                             | The Y coordinate of the mouse pointer in global (screen) coordinates.                                                                                                                                                                                                                                                                                                                                                   |
+| `clientX` {{readonlyInline}}       | long                                             | The X coordinate of the mouse pointer in local (DOM content) coordinates.                                                                                                                                                                                                                                                                                                                                               |
+| `clientY` {{readonlyInline}}       | long                                             | The Y coordinate of the mouse pointer in local (DOM content) coordinates.                                                                                                                                                                                                                                                                                                                                               |
+| `button` {{readonlyInline}}        | unsigned short                                   | The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.                                                                                                                                                        |
+| `buttons` {{readonlyInline}}       | unsigned short                                   | The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 \| 2). [More info](/en-US/docs/Web/API/MouseEvent). |
+| `mozPressure` {{readonlyInline}}   | float                                            | The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).                                                                                                                                                                                                                                                          |
+| `ctrlKey` {{readonlyInline}}       | boolean                                          | `true` if the control key was down when the event was fired. `false` otherwise.                                                                                                                                                                                                                                                                                                                                         |
+| `shiftKey` {{readonlyInline}}      | boolean                                          | `true` if the shift key was down when the event was fired. `false` otherwise.                                                                                                                                                                                                                                                                                                                                           |
+| `altKey` {{readonlyInline}}        | boolean                                          | `true` if the alt key was down when the event was fired. `false` otherwise.                                                                                                                                                                                                                                                                                                                                             |
+| `metaKey` {{readonlyInline}}       | boolean                                          | `true` if the meta key was down when the event was fired. `false` otherwise.                                                                                                                                                                                                                                                                                                                                            |
+
+## Exemple：dropzone
+
+### HTML Content
+
+```html
+<div class="dropzone">
+  <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
     This div is draggable
-  &lt;/div&gt;
-&lt;/div&gt;
-&lt;div class="dropzone"&gt;&lt;/div&gt;
-&lt;div class="dropzone"&gt;&lt;/div&gt;
-&lt;div class="dropzone"&gt;&lt;/div&gt;
-</pre>
+  </div>
+</div>
+<div class="dropzone"></div>
+<div class="dropzone"></div>
+<div class="dropzone"></div>
+```
 
-<h3 id="CSS_Content">CSS Content</h3>
+### CSS Content
 
-<pre class="brush: css">  #draggable {
+```css
+  #draggable {
     width: 200px;
     height: 20px;
     text-align: center;
@@ -164,11 +75,12 @@ translation_of: Web/API/Document/dragstart_event
     margin-bottom: 10px;
     padding: 10px;
   }
-</pre>
+```
 
-<h3 id="JavaScript_Content">JavaScript Content</h3>
+### JavaScript Content
 
-<pre class="brush: js">  var dragged;
+```js
+  var dragged;
 
   /* Les événements sont déclenchés sur les objets glissables */
   document.addEventListener("drag", function( event ) {
@@ -219,45 +131,29 @@ translation_of: Web/API/Document/dragstart_event
           event.target.appendChild( dragged );
       }
 
-  }, false);</pre>
+  }, false);
+```
 
-<p>{{ EmbedLiveSample('Example：dropzone') }}</p>
+{{ EmbedLiveSample('Example：dropzone') }}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragstart")}}</td>
-   <td>{{Spec2("HTML WHATWG")}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML5.1", "editing.html#dndevents", "dragstart")}}</td>
-   <td>{{Spec2("HTML5.1")}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                | Statut                           | Commentaire         |
+| -------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- |
+| {{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragstart")}} | {{Spec2("HTML WHATWG")}} |                     |
+| {{SpecName("HTML5.1", "editing.html#dndevents", "dragstart")}}         | {{Spec2("HTML5.1")}}     | Définition initiale |
 
-<h2 id="Compatibilités_navigateur">Compatibilités navigateur</h2>
+## Compatibilités navigateur
 
-<p>{{Compat("api.Document.dragstart_event")}}</p>
+{{Compat("api.Document.dragstart_event")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{event("drag")}}</li>
- <li>{{event("dragstart")}}</li>
- <li>{{event("dragend")}}</li>
- <li>{{event("dragover")}}</li>
- <li>{{event("dragenter")}}</li>
- <li>{{event("dragleave")}}</li>
- <li>{{event("dragexit")}}</li>
- <li>{{event("drop")}}</li>
-</ul>
+- {{event("drag")}}
+- {{event("dragstart")}}
+- {{event("dragend")}}
+- {{event("dragover")}}
+- {{event("dragenter")}}
+- {{event("dragleave")}}
+- {{event("dragexit")}}
+- {{event("drop")}}
diff --git a/files/fr/web/api/document/drop_event/index.md b/files/fr/web/api/document/drop_event/index.md
index 64453e9860..539c0d9ce2 100644
--- a/files/fr/web/api/document/drop_event/index.md
+++ b/files/fr/web/api/document/drop_event/index.md
@@ -3,151 +3,61 @@ title: drop
 slug: Web/API/Document/drop_event
 translation_of: Web/API/Document/drop_event
 ---
-<div>{{APIRef}}</div>
-
-<p>L'événement <strong>drop </strong>est déclenché lorsqu'un élément ou une sélection de texte est déposé sur une cible de dépôt valide.</p>
-
-<h2 id="Informations_générales">Informations générales</h2>
-
-<dl>
- <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
- <dd style="margin: 0 0 0 120px;"><a href="/fr/docs/Web/API/DragEvent"><code>DragEvent</code></a></dd>
- <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
- <dd style="margin: 0 0 0 120px;">Oui</dd>
- <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
- <dd style="margin: 0 0 0 120px;">Oui</dd>
- <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
- <dd style="margin: 0 0 0 120px;"><a href="/fr/docs/Web/API/Document"><code>Document</code></a>, <a href="/fr/docs/Web/API/Element"><code>Element</code></a></dd>
- <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
- <dd style="margin: 0 0 0 120px;">Varie</dd>
-</dl>
-
-<h2 id="Properties">Properties</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Property</th>
-   <th scope="col">Type</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>target</code> {{readonlyInline}}</td>
-   <td><a href="/en-US/docs/Web/API/EventTarget"><code>EventTarget</code></a></td>
-   <td>The element that was underneath the element being dragged.</td>
-  </tr>
-  <tr>
-   <td><code>type</code> {{readonlyInline}}</td>
-   <td><a href="/en-US/docs/Web/API/DOMString"><code>DOMString</code></a></td>
-   <td>The type of event.</td>
-  </tr>
-  <tr>
-   <td><code>bubbles</code> {{readonlyInline}}</td>
-   <td><a href="/en-US/docs/Web/API/Boolean"><code>Boolean</code></a></td>
-   <td>Whether the event normally bubbles or not</td>
-  </tr>
-  <tr>
-   <td><code>cancelable</code> {{readonlyInline}}</td>
-   <td><a href="/en-US/docs/Web/API/Boolean"><code>Boolean</code></a></td>
-   <td>Whether the event is cancellable or not?</td>
-  </tr>
-  <tr>
-   <td><code>view</code> {{readonlyInline}}</td>
-   <td><a href="/en-US/docs/Web/API/WindowProxy" rel="nofollow"><code>WindowProxy</code></a></td>
-   <td><a href="/en-US/docs/Web/API/Document/defaultView"><code>document.defaultView</code></a> (<code>window</code> of the document)</td>
-  </tr>
-  <tr>
-   <td><code>detail</code> {{readonlyInline}}</td>
-   <td><code>long</code> (<code>float</code>)</td>
-   <td>0.</td>
-  </tr>
-  <tr>
-   <td><code>dataTransfer</code></td>
-   <td>DataTransfer</td>
-   <td>The data that underlies a drag-and-drop operation, known as the <a href="/en-US/docs/Web/API/DataTransfer">drag data store</a>. Protected mode.</td>
-  </tr>
-  <tr>
-   <td><code>currentTarget</code> {{readonlyInline}}</td>
-   <td>EventTarget</td>
-   <td>The node that had the event listener attached.</td>
-  </tr>
-  <tr>
-   <td><code>relatedTarget</code> {{readonlyInline}}</td>
-   <td>EventTarget</td>
-   <td>For <code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code> and <code>mouseleave</code> events: the target of the complementary event (the <code>mouseleave</code> target in the case of a <code>mouseenter</code> event). <code>null</code> otherwise.</td>
-  </tr>
-  <tr>
-   <td><code>screenX</code> {{readonlyInline}}</td>
-   <td>long</td>
-   <td>The X coordinate of the mouse pointer in global (screen) coordinates.</td>
-  </tr>
-  <tr>
-   <td><code>screenY</code> {{readonlyInline}}</td>
-   <td>long</td>
-   <td>The Y coordinate of the mouse pointer in global (screen) coordinates.</td>
-  </tr>
-  <tr>
-   <td><code>clientX</code> {{readonlyInline}}</td>
-   <td>long</td>
-   <td>The X coordinate of the mouse pointer in local (DOM content) coordinates.</td>
-  </tr>
-  <tr>
-   <td><code>clientY</code> {{readonlyInline}}</td>
-   <td>long</td>
-   <td>The Y coordinate of the mouse pointer in local (DOM content) coordinates.</td>
-  </tr>
-  <tr>
-   <td><code>button</code> {{readonlyInline}}</td>
-   <td>unsigned short</td>
-   <td>The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.</td>
-  </tr>
-  <tr>
-   <td><code>buttons</code> {{readonlyInline}}</td>
-   <td>unsigned short</td>
-   <td>The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). <a href="/en-US/docs/Web/API/MouseEvent">More info</a>.</td>
-  </tr>
-  <tr>
-   <td><code>mozPressure</code> {{readonlyInline}}</td>
-   <td>float</td>
-   <td>The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).</td>
-  </tr>
-  <tr>
-   <td><code>ctrlKey</code> {{readonlyInline}}</td>
-   <td>boolean</td>
-   <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td>
-  </tr>
-  <tr>
-   <td><code>shiftKey</code> {{readonlyInline}}</td>
-   <td>boolean</td>
-   <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td>
-  </tr>
-  <tr>
-   <td><code>altKey</code> {{readonlyInline}}</td>
-   <td>boolean</td>
-   <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td>
-  </tr>
-  <tr>
-   <td><code>metaKey</code> {{readonlyInline}}</td>
-   <td>boolean</td>
-   <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Exemple">Exemple</h2>
-
-<pre class="brush: html">&lt;div class="dropzone"&gt;
-  &lt;div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)"&gt;
+{{APIRef}}
+
+L'événement **drop** est déclenché lorsqu'un élément ou une sélection de texte est déposé sur une cible de dépôt valide.
+
+## Informations générales
+
+- Interface
+  - : [`DragEvent`](/fr/docs/Web/API/DragEvent)
+- Propagation
+  - : Oui
+- Annulable
+  - : Oui
+- Cible
+  - : [`Document`](/fr/docs/Web/API/Document), [`Element`](/fr/docs/Web/API/Element)
+- Action par défaut
+  - : Varie
+
+## Properties
+
+| Property                                 | Type                                             | Description                                                                                                                                                                                                                                                                                                                                                                                                             |
+| ---------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `target` {{readonlyInline}}        | [`EventTarget`](/en-US/docs/Web/API/EventTarget) | The element that was underneath the element being dragged.                                                                                                                                                                                                                                                                                                                                                              |
+| `type` {{readonlyInline}}          | [`DOMString`](/en-US/docs/Web/API/DOMString)     | The type of event.                                                                                                                                                                                                                                                                                                                                                                                                      |
+| `bubbles` {{readonlyInline}}       | [`Boolean`](/en-US/docs/Web/API/Boolean)         | Whether the event normally bubbles or not                                                                                                                                                                                                                                                                                                                                                                               |
+| `cancelable` {{readonlyInline}}    | [`Boolean`](/en-US/docs/Web/API/Boolean)         | Whether the event is cancellable or not?                                                                                                                                                                                                                                                                                                                                                                                |
+| `view` {{readonlyInline}}          | [`WindowProxy`](/en-US/docs/Web/API/WindowProxy) | [`document.defaultView`](/en-US/docs/Web/API/Document/defaultView) (`window` of the document)                                                                                                                                                                                                                                                                                                                           |
+| `detail` {{readonlyInline}}        | `long` (`float`)                                 | 0.                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| `dataTransfer`                           | DataTransfer                                     | The data that underlies a drag-and-drop operation, known as the [drag data store](/en-US/docs/Web/API/DataTransfer). Protected mode.                                                                                                                                                                                                                                                                                    |
+| `currentTarget` {{readonlyInline}} | EventTarget                                      | The node that had the event listener attached.                                                                                                                                                                                                                                                                                                                                                                          |
+| `relatedTarget` {{readonlyInline}} | EventTarget                                      | For `mouseover`, `mouseout`, `mouseenter` and `mouseleave` events: the target of the complementary event (the `mouseleave` target in the case of a `mouseenter` event). `null` otherwise.                                                                                                                                                                                                                               |
+| `screenX` {{readonlyInline}}       | long                                             | The X coordinate of the mouse pointer in global (screen) coordinates.                                                                                                                                                                                                                                                                                                                                                   |
+| `screenY` {{readonlyInline}}       | long                                             | The Y coordinate of the mouse pointer in global (screen) coordinates.                                                                                                                                                                                                                                                                                                                                                   |
+| `clientX` {{readonlyInline}}       | long                                             | The X coordinate of the mouse pointer in local (DOM content) coordinates.                                                                                                                                                                                                                                                                                                                                               |
+| `clientY` {{readonlyInline}}       | long                                             | The Y coordinate of the mouse pointer in local (DOM content) coordinates.                                                                                                                                                                                                                                                                                                                                               |
+| `button` {{readonlyInline}}        | unsigned short                                   | The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.                                                                                                                                                        |
+| `buttons` {{readonlyInline}}       | unsigned short                                   | The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 \| 2). [More info](/en-US/docs/Web/API/MouseEvent). |
+| `mozPressure` {{readonlyInline}}   | float                                            | The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).                                                                                                                                                                                                                                                          |
+| `ctrlKey` {{readonlyInline}}       | boolean                                          | `true` if the control key was down when the event was fired. `false` otherwise.                                                                                                                                                                                                                                                                                                                                         |
+| `shiftKey` {{readonlyInline}}      | boolean                                          | `true` if the shift key was down when the event was fired. `false` otherwise.                                                                                                                                                                                                                                                                                                                                           |
+| `altKey` {{readonlyInline}}        | boolean                                          | `true` if the alt key was down when the event was fired. `false` otherwise.                                                                                                                                                                                                                                                                                                                                             |
+| `metaKey` {{readonlyInline}}       | boolean                                          | `true` if the meta key was down when the event was fired. `false` otherwise.                                                                                                                                                                                                                                                                                                                                            |
+
+## Exemple
+
+```html
+<div class="dropzone">
+  <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
     Cette div peut être glissée
-  &lt;/div&gt;
-&lt;/div&gt;
-&lt;div class="dropzone"&gt;&lt;/div&gt;
-&lt;div class="dropzone"&gt;&lt;/div&gt;
-&lt;div class="dropzone"&gt;&lt;/div&gt;
+  </div>
+</div>
+<div class="dropzone"></div>
+<div class="dropzone"></div>
+<div class="dropzone"></div>
 
-&lt;style&gt;
+<style>
   #draggable {
     width: 200px;
     height: 20px;
@@ -162,9 +72,9 @@ translation_of: Web/API/Document/drop_event
     margin-bottom: 10px;
     padding: 10px;
   }
-&lt;/style&gt;
+</style>
 
-&lt;script&gt;
+<script>
   var dragged;
 
   /* Les événements sont déclenchés sur les objets glissables */
@@ -199,7 +109,7 @@ translation_of: Web/API/Document/drop_event
   }, false);
 
   document.addEventListener("dragleave", function( event ) {
-      // réinitialisation de l'arrière-plan des potentielles cible du drop lorsque les éléments glissables les quittent 
+      // réinitialisation de l'arrière-plan des potentielles cible du drop lorsque les éléments glissables les quittent
       if ( event.target.className == "dropzone" ) {
           event.target.style.background = "";
       }
@@ -217,43 +127,27 @@ translation_of: Web/API/Document/drop_event
       }
 
   }, false);
-&lt;/script&gt;</pre>
+</script>
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML WHATWG", "interaction.html#dndevents", "drop event")}}</td>
-   <td>{{Spec2("HTML WHATWG")}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML5.1", "editing.html#dndevents", "drop event")}}</td>
-   <td>{{Spec2("HTML5.1")}}</td>
-   <td>Première définition</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                    | Statut                           | Commentaire         |
+| ------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------- |
+| {{SpecName("HTML WHATWG", "interaction.html#dndevents", "drop event")}} | {{Spec2("HTML WHATWG")}} |                     |
+| {{SpecName("HTML5.1", "editing.html#dndevents", "drop event")}}             | {{Spec2("HTML5.1")}}     | Première définition |
 
-<h2 id="Compatibilités_navigateur">Compatibilités navigateur</h2>
+## Compatibilités navigateur
 
-<p>{{Compat("api.Document.drop_event")}}</p>
+{{Compat("api.Document.drop_event")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{event("drag")}}</li>
- <li>{{event("dragstart")}}</li>
- <li>{{event("dragend")}}</li>
- <li>{{event("dragover")}}</li>
- <li>{{event("dragenter")}}</li>
- <li>{{event("dragleave")}}</li>
- <li>{{event("dragexit")}}</li>
- <li>{{event("drop")}}</li>
-</ul>
+- {{event("drag")}}
+- {{event("dragstart")}}
+- {{event("dragend")}}
+- {{event("dragover")}}
+- {{event("dragenter")}}
+- {{event("dragleave")}}
+- {{event("dragexit")}}
+- {{event("drop")}}
diff --git a/files/fr/web/api/document/elementfrompoint/index.md b/files/fr/web/api/document/elementfrompoint/index.md
index 8028725d21..cbd5891099 100644
--- a/files/fr/web/api/document/elementfrompoint/index.md
+++ b/files/fr/web/api/document/elementfrompoint/index.md
@@ -7,44 +7,54 @@ translation_of: Web/API/DocumentOrShadowRoot/elementFromPoint
 translation_of_original: Web/API/Document/elementFromPoint
 original_slug: Web/API/DocumentOrShadowRoot/elementFromPoint
 ---
-<p>{{ ApiRef() }}</p>
-<h3 id="R.C3.A9sum.C3.A9">Résumé</h3>
-<p>Renvoie l'élément visible au point donné, spécifié relativement au point supérieur gauche visible dans le document.</p>
-<h3 id="Syntaxe">Syntaxe</h3>
-<pre class="eval"><i>element</i> = document.elementFromPoint(<i>x</i>,<i>y</i>);
-</pre>
-<p>where</p>
-<ul>
- <li><code>element</code> est un objet <a href="fr/DOM/element">element</a>.</li>
- <li><code>x</code> et <code>y</code> spécifient les coordonnées à vérifier.</li>
-</ul>
-<h3 id="Exemple">Exemple</h3>
-<pre class="brush: html">&lt;html&gt;
-&lt;head&gt;
-&lt;title&gt;Exemple d'utilisation d'elementFromPoint&lt;/title&gt;
-
-&lt;script type="text/javascript"&gt;
+{{ ApiRef() }}
+
+### Résumé
+
+Renvoie l'élément visible au point donné, spécifié relativement au point supérieur gauche visible dans le document.
+
+### Syntaxe
+
+    element = document.elementFromPoint(x,y);
+
+where
+
+- `element` est un objet [element](fr/DOM/element).
+- `x` et `y` spécifient les coordonnées à vérifier.
+
+### Exemple
+
+```html
+<html>
+<head>
+<title>Exemple d'utilisation d'elementFromPoint</title>
+
+<script type="text/javascript">
 
 function changeColor(newColor)
 {
  elem = document.elementFromPoint(2, 2);
  elem.style.color = newColor;
 }
-&lt;/script&gt;
-&lt;/head&gt;
-
-&lt;body&gt;
-&lt;p id="para1"&gt;Un peu de texte ici&lt;/p&gt;
-&lt;button onclick="changeColor('blue');"&gt;bleu&lt;/button&gt;
-&lt;button onclick="changeColor('red');"&gt;rouge&lt;/button&gt;
-&lt;/body&gt;
-&lt;/html&gt;
-</pre>
-<h3 id="Notes">Notes</h3>
-<p>Si l'élément au point spécifié appartient à un autre document (par exemple, les sous-document d'un iframe), l'élément dans le DOM du document appelant (l'iframe lui-même) est renvoyé. Si l'élément au point donné est anonyme ou du contenu généré par XBL, comme la barre de défilement d'une boîte de texte, le premier élément parent non anonyme (par exemple, la boîte de texte) est renvoyé.</p>
-<p>Si le point spécifié est en dehors de la portion visible du document ou que l'une ou l'autre des coordonnées est négative, le résultat est <code>NULL</code>.</p>
-<p>{{ Note("Les appelants qui sont des documents XUL devraient attendre que l\'évènement <code>onload</code> se soit déclenché avant d\'appeler cette méthode.") }}</p>
-<h3 id="Sp.C3.A9cification">Spécification</h3>
-<ul>
- <li>Spécification préliminaire : <code><a href="http://dev.w3.org/csswg/cssom/#documentlayout-elementfrompoint">elementFromPoint</a></code></li>
-</ul>
\ No newline at end of file
+</script>
+</head>
+
+<body>
+<p id="para1">Un peu de texte ici</p>
+<button onclick="changeColor('blue');">bleu</button>
+<button onclick="changeColor('red');">rouge</button>
+</body>
+</html>
+```
+
+### Notes
+
+Si l'élément au point spécifié appartient à un autre document (par exemple, les sous-document d'un iframe), l'élément dans le DOM du document appelant (l'iframe lui-même) est renvoyé. Si l'élément au point donné est anonyme ou du contenu généré par XBL, comme la barre de défilement d'une boîte de texte, le premier élément parent non anonyme (par exemple, la boîte de texte) est renvoyé.
+
+Si le point spécifié est en dehors de la portion visible du document ou que l'une ou l'autre des coordonnées est négative, le résultat est `NULL`.
+
+{{ Note("Les appelants qui sont des documents XUL devraient attendre que l\'évènement <code>onload</code> se soit déclenché avant d\'appeler cette méthode.") }}
+
+### Spécification
+
+- Spécification préliminaire : [`elementFromPoint`](http://dev.w3.org/csswg/cssom/#documentlayout-elementfrompoint)
diff --git a/files/fr/web/api/document/elementsfrompoint/index.md b/files/fr/web/api/document/elementsfrompoint/index.md
index 259d9da6fc..e275e5780d 100644
--- a/files/fr/web/api/document/elementsfrompoint/index.md
+++ b/files/fr/web/api/document/elementsfrompoint/index.md
@@ -14,90 +14,72 @@ tags:
 translation_of: Web/API/DocumentOrShadowRoot/elementsFromPoint
 original_slug: Web/API/DocumentOrShadowRoot/elementsFromPoint
 ---
-<div>{{APIRef("DOM")}}{{SeeCompatTable}}</div>
+{{APIRef("DOM")}}{{SeeCompatTable}}
 
-<p>La propriété <strong><code>elementsFromPoint()</code></strong> de l'interface {{domxref("DocumentOrShadowRoot")}}  renvoie un tableau (<em>array</em>) de tous les éléments présents sous le point fourni en paramètre (relatif au <em>viewport</em>).</p>
+La propriété **`elementsFromPoint()`** de l'interface {{domxref("DocumentOrShadowRoot")}}  renvoie un tableau (_array_) de tous les éléments présents sous le point fourni en paramètre (relatif au _viewport_).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var elements = document.elementsFromPoint(x, y);</pre>
+    var elements = document.elementsFromPoint(x, y);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt>x</dt>
- <dd>L'abscisse du point (coordonnée horizontale).</dd>
- <dt>y</dt>
- <dd>L'ordonnée du point (coordonnée verticale).</dd>
-</dl>
+- x
+  - : L'abscisse du point (coordonnée horizontale).
+- y
+  - : L'ordonnée du point (coordonnée verticale).
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Un tableau (<em>array</em>) d'objets {{domxref('element')}} représentants les éléments du DOM concernés.</p>
+Un tableau (_array_) d'objets {{domxref('element')}} représentants les éléments du DOM concernés.
 
-<h2 id="Example">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div&gt;
-  &lt;p&gt;Du texte&lt;/p&gt;
-&lt;/div&gt;
-&lt;p&gt;Éléments au point 30, 20:&lt;/p&gt;
-&lt;div id="output"&gt;&lt;/div&gt;
-</pre>
+```html
+<div>
+  <p>Du texte</p>
+</div>
+<p>Éléments au point 30, 20:</p>
+<div id="output"></div>
+```
 
-<h3 id="JavaScript">JavaScript</h3>
+### JavaScript
 
-<pre class="brush: js">var output = document.getElementById("output");
+```js
+var output = document.getElementById("output");
 if (document.elementsFromPoint) {
   var elements = document.elementsFromPoint(30, 20);
-  for(var i = 0; i &lt; elements.length; i++) {
+  for(var i = 0; i < elements.length; i++) {
     output.textContent += elements[i].localName;
-    if (i &lt; elements.length - 1) {
-      output.textContent += " &lt; ";
+    if (i < elements.length - 1) {
+      output.textContent += " < ";
     }
   }
 } else {
-  output.innerHTML = "&lt;span style=\"color: red;\"&gt;" +
-     "Votre navigateur ne prend pas en charge &lt;code&gt;document.elementsFromPoint()&lt;/code&gt;" +
-     "&lt;/span&gt;";
-}</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample('Example', '420', '120')}}</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('Shadow DOM','#extensions-to-the-documentorshadowroot-mixin','DocumentOrShadowRoot')}}</td>
-   <td>{{Spec2('Shadow DOM')}}</td>
-   <td>Définition initiale</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSSOM View', '#dom-document-elementsfrompoint', 'Document')}}</td>
-   <td>{{Spec2('CSSOM View')}}</td>
-   <td>Précise l'ordre selon lequel les éléments sont peints.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.DocumentOrShadowRoot.elementsFromPoint")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{DOMxRef("DocumentOrShadowRoot.elementFromPoint()")}}</li>
- <li>{{DOMxRef("DocumentOrShadowRoot.msElementsFromRect()")}} {{Non-standard_Inline}}</li>
-</ul>
+  output.innerHTML = "<span style=\"color: red;\">" +
+     "Votre navigateur ne prend pas en charge <code>document.elementsFromPoint()</code>" +
+     "</span>";
+}
+```
+
+### Résultat
+
+{{EmbedLiveSample('Example', '420', '120')}}
+
+## Spécifications
+
+| Spécification                                                                                                                    | État                             | Commentaires                                           |
+| -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------ |
+| {{SpecName('Shadow DOM','#extensions-to-the-documentorshadowroot-mixin','DocumentOrShadowRoot')}} | {{Spec2('Shadow DOM')}} | Définition initiale                                    |
+| {{SpecName('CSSOM View', '#dom-document-elementsfrompoint', 'Document')}}                                 | {{Spec2('CSSOM View')}} | Précise l'ordre selon lequel les éléments sont peints. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.DocumentOrShadowRoot.elementsFromPoint")}}
+
+## Voir aussi
+
+- {{DOMxRef("DocumentOrShadowRoot.elementFromPoint()")}}
+- {{DOMxRef("DocumentOrShadowRoot.msElementsFromRect()")}} {{Non-standard_Inline}}
diff --git a/files/fr/web/api/document/enablestylesheetsforset/index.md b/files/fr/web/api/document/enablestylesheetsforset/index.md
index f0aca39903..ac899fc8c4 100644
--- a/files/fr/web/api/document/enablestylesheetsforset/index.md
+++ b/files/fr/web/api/document/enablestylesheetsforset/index.md
@@ -10,50 +10,40 @@ tags:
   - Méthode
 translation_of: Web/API/Document/enableStyleSheetsForSet
 ---
-<p>{{ APIRef("DOM") }}{{ gecko_minversion_header("1.9") }}</p>
+{{ APIRef("DOM") }}{{ gecko_minversion_header("1.9") }}
 
-<p>Active les feuilles de styles correspondant au nom spécifié dans l'ensemble de feuilles de styles en cours et désactive toutes les autres (à l'exception de celles sans titre qui sont toujours activées).</p>
+Active les feuilles de styles correspondant au nom spécifié dans l'ensemble de feuilles de styles en cours et désactive toutes les autres (à l'exception de celles sans titre qui sont toujours activées).
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="eval">document.enableStyleSheetsForSet(<em>name</em>)
-</pre>
+    document.enableStyleSheetsForSet(name)
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>name</code></dt>
- <dd>Le nom des feuilles de styles à activer. Toutes les feuilles de styles dont le titre correspond à ce nom seront activées, tandis que toutes celles possédant un autre titre seront désactivées. Spécifiez une chaîne vide dans le paramètre <code>name</code> pour supprimer toutes les feuilles de styles alternatives et préférées (mais pas les feuilles de styles persistantes, c'est-à-dire, celles sans attribut <code>title</code> (<em>titre</em>)).</dd>
-</dl>
+- `name`
+  - : Le nom des feuilles de styles à activer. Toutes les feuilles de styles dont le titre correspond à ce nom seront activées, tandis que toutes celles possédant un autre titre seront désactivées. Spécifiez une chaîne vide dans le paramètre `name` pour supprimer toutes les feuilles de styles alternatives et préférées (mais pas les feuilles de styles persistantes, c'est-à-dire, celles sans attribut `title` (_titre_)).
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<ul>
- <li>Les correspondances de titre sont sensibles à la casse.</li>
- <li>L'appel de cette méthode avec un <code>name</code>  <code>null</code> n'a pas d'effet ; si vous voulez désactiver toutes les feuilles de styles alternatives et préférées, vous <strong>devez</strong> utiliser "",  la chaîne vide.</li>
- <li>Les feuilles de styles qui n'ont pas de titre ne sont jamais affectées par cette méthode.</li>
- <li>Cette méthode n'affecte jamais les valeurs de {{ domxref("document.lastStyleSheetSet") }} ou {{ domxref("document.preferredStyleSheetSet") }}.</li>
-</ul>
+- Les correspondances de titre sont sensibles à la casse.
+- L'appel de cette méthode avec un `name`  `null` n'a pas d'effet ; si vous voulez désactiver toutes les feuilles de styles alternatives et préférées, vous **devez** utiliser "",  la chaîne vide.
+- Les feuilles de styles qui n'ont pas de titre ne sont jamais affectées par cette méthode.
+- Cette méthode n'affecte jamais les valeurs de {{ domxref("document.lastStyleSheetSet") }} ou {{ domxref("document.preferredStyleSheetSet") }}.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre>document.enableStyleSheetsForSet("Some style sheet set name");
-</pre>
+    document.enableStyleSheetsForSet("Some style sheet set name");
 
-<h2 id="Specification">Spécifications</h2>
+## Spécifications
 
-<ul>
- <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets">HTML5 : Alternate Style Sheets</a></li>
-</ul>
+- [HTML5 : Alternate Style Sheets](http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets)
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{ domxref("Stylesheet") }}</li>
- <li>{{ domxref("document.styleSheets") }}</li>
- <li>{{ domxref("document.lastStyleSheetSet") }}</li>
- <li>{{ domxref("document.preferredStyleSheetSet") }}</li>
- <li>{{ domxref("document.selectedStyleSheetSet") }}</li>
- <li>{{ domxref("document.enableStyleSheetsForSet()") }}</li>
- <li><a href="/fr/docs/Archive/Standards_du_Web/Utiliser_des_titres_corrects_avec_des_feuilles_de_styles_externes">Utiliser des titres corrects avec des feuilles de styles externes</a></li>
-</ul>
+- {{ domxref("Stylesheet") }}
+- {{ domxref("document.styleSheets") }}
+- {{ domxref("document.lastStyleSheetSet") }}
+- {{ domxref("document.preferredStyleSheetSet") }}
+- {{ domxref("document.selectedStyleSheetSet") }}
+- {{ domxref("document.enableStyleSheetsForSet()") }}
+- [Utiliser des titres corrects avec des feuilles de styles externes](/fr/docs/Archive/Standards_du_Web/Utiliser_des_titres_corrects_avec_des_feuilles_de_styles_externes)
diff --git a/files/fr/web/api/document/evaluate/index.md b/files/fr/web/api/document/evaluate/index.md
index 03cc732e3e..44ea0ed1da 100644
--- a/files/fr/web/api/document/evaluate/index.md
+++ b/files/fr/web/api/document/evaluate/index.md
@@ -9,31 +9,30 @@ tags:
   - XPath
 translation_of: Web/API/Document/evaluate
 ---
-<p>{{ ApiRef("DOM") }}</p>
+{{ ApiRef("DOM") }}
 
-<p>La méthode <code><strong>evaluate()</strong></code> renvoie un {{domxref("XPathResult")}} basé sur une expression <a href="/fr/docs/XPath">XPath</a> et d'autres paramètres donnés.</p>
+La méthode **`evaluate()`** renvoie un {{domxref("XPathResult")}} basé sur une expression [XPath](/fr/docs/XPath) et d'autres paramètres donnés.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var xpathResult = document.evaluate(
- xpathExpression,
- contextNode,
- namespaceResolver,
- resultType,
- result
-);</pre>
+    var xpathResult = document.evaluate(
+     xpathExpression,
+     contextNode,
+     namespaceResolver,
+     resultType,
+     result
+    );
 
-<ul>
- <li><code>xpathExpression</code> est une chaîne de caractères représentant le XPath à évaluer.</li>
- <li><code>contextNode</code> spécifie le noeud de contexte pour la requête (voir <a href="http://www.w3.org/TR/xpath">XPath specification</a>) . Il est courant de transmettre un document en tant que nœud de contexte.</li>
- <li><code>namespaceResolver</code> est une fonction qui recevra tous les préfixes d'espace de noms et devrait renvoyer une chaîne représentant l'URI de l'espace de noms associé à ce préfixe. Il sera utilisé pour résoudre les préfixes dans le XPath lui-même, afin qu'ils puissent être mis en correspondance avec le document. <code>null</code> est commun pour les documents HTML ou lorsque aucun préfixe d'espace de noms n'est utilisé.</li>
- <li><code>resultType</code> est un nombre entier qui correspond au type de résultat <code>XPathResult</code> à retourner. Utilisez des <a href="#Types_de_resultats">propriétés de constantes nommées</a>, comme <code>XPathResult.ANY_TYPE</code>  du constructeur de XPathResult , lequel correspond à un nombre entier compris entre 0 et 9.</li>
- <li><code>result</code> est un <code>XPathResult</code> existant à utiliser pour les résultats.  <code>null</code> est le plus commun et va créer un nouveau XPathResult</li>
-</ul>
+- `xpathExpression` est une chaîne de caractères représentant le XPath à évaluer.
+- `contextNode` spécifie le noeud de contexte pour la requête (voir [XPath specification](http://www.w3.org/TR/xpath)) . Il est courant de transmettre un document en tant que nœud de contexte.
+- `namespaceResolver` est une fonction qui recevra tous les préfixes d'espace de noms et devrait renvoyer une chaîne représentant l'URI de l'espace de noms associé à ce préfixe. Il sera utilisé pour résoudre les préfixes dans le XPath lui-même, afin qu'ils puissent être mis en correspondance avec le document. `null` est commun pour les documents HTML ou lorsque aucun préfixe d'espace de noms n'est utilisé.
+- `resultType` est un nombre entier qui correspond au type de résultat `XPathResult` à retourner. Utilisez des [propriétés de constantes nommées](#Types_de_resultats), comme `XPathResult.ANY_TYPE`  du constructeur de XPathResult , lequel correspond à un nombre entier compris entre 0 et 9.
+- `result` est un `XPathResult` existant à utiliser pour les résultats.  `null` est le plus commun et va créer un nouveau XPathResult
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: js "> var  headings  =  document .  evaluate  ( " / html / body //h2", document, null, XPathResult.ANY_TYPE, null);
+```js
+ var  headings  =  document .  evaluate  ( " / html / body //h2", document, null, XPathResult.ANY_TYPE, null);
  /* Cherche le document pour tout élément h2.
  * Le résultat sera probablement un itérateur de noeuds non ordonné. */
  var  thisHeading  =  headings .  iterateNext  (  )  ;
@@ -42,120 +41,140 @@ translation_of: Web/API/Document/evaluate
   alertText  +  =  thisHeading . textContent  +   "\n"  ;
   thisHeading  =  headings .  iterateNext  (  )  ;
  }
- alert  ( alertText )  ;   // Alerte le texte de tout élément h2 </pre>
+ alert  ( alertText )  ;   // Alerte le texte de tout élément h2
+```
 
-<p>Note : dans l'exemple ci-dessus, un XPath plus verbeux est préféré aux raccourcis communs tels que <code>//h2</code>. Généralement, des sélecteurs XPath plus spécifiques, comme dans l'exemple ci-dessus, améliorent de façon significative les performances, en particulier pour les documents très volumineux. C'est parce que l'évaluation de la requête ne perd pas de temps à visiter des noeuds inutiles. L'utilisation de // est généralement lente car elle visite tous les nœuds de la racine et tous les sous-nœuds à la recherche de correspondances possibles.</p>
+Note : dans l'exemple ci-dessus, un XPath plus verbeux est préféré aux raccourcis communs tels que `//h2`. Généralement, des sélecteurs XPath plus spécifiques, comme dans l'exemple ci-dessus, améliorent de façon significative les performances, en particulier pour les documents très volumineux. C'est parce que l'évaluation de la requête ne perd pas de temps à visiter des noeuds inutiles. L'utilisation de // est généralement lente car elle visite tous les nœuds de la racine et tous les sous-nœuds à la recherche de correspondances possibles.
 
-<p>Une optimisation supplémentaire peut être obtenue en utilisant soigneusement le paramètre de contexte. Par exemple, si vous savez que le contenu que vous recherchez se trouve quelque part dans la balise body, vous pouvez utiliser ceci :</p>
+Une optimisation supplémentaire peut être obtenue en utilisant soigneusement le paramètre de contexte. Par exemple, si vous savez que le contenu que vous recherchez se trouve quelque part dans la balise body, vous pouvez utiliser ceci :
 
-<pre class="brush: js">document .  evaluate  ( " .  //h2", document.body, null, XPathResult.ANY_TYPE, null); </pre>
+```js
+document .  evaluate  ( " .  //h2", document.body, null, XPathResult.ANY_TYPE, null);
+```
 
-<p>Remarquez ci-dessus,  <code>document.body</code> a été utilisé comme contexte plutôt que comme document, de sorte que le XPath commence à partir de l'élément body. (Dans cet exemple, le <code>"."</code> est important pour indiquer que l'interrogation doit commencer à partir du noeud contextuel, document.body . Si le "." est omis (en quittant <code>//h2</code>), la requête démarrera à partir du noeud racine ( <code>html</code>) ce qui serait plus inutile.)</p>
+Remarquez ci-dessus,  `document.body` a été utilisé comme contexte plutôt que comme document, de sorte que le XPath commence à partir de l'élément body. (Dans cet exemple, le `"."` est important pour indiquer que l'interrogation doit commencer à partir du noeud contextuel, document.body . Si le "." est omis (en quittant `//h2`), la requête démarrera à partir du noeud racine ( `html`) ce qui serait plus inutile.)
 
-<p>Voir <a href="/fr/docs/Introduction_%C3%A0_l'utilisation_de_XPath_avec_JavaScript">Introduction à l'utilisation de XPath avec JavaScript</a>  pour plus d'informations.</p>
+Voir [Introduction à l'utilisation de XPath avec JavaScript](/fr/docs/Introduction_%C3%A0_l'utilisation_de_XPath_avec_JavaScript)  pour plus d'informations.
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<ul>
- <li>Les expressions XPath peuvent être évaluées sur les documents HTML et XML.</li>
- <li>Lors de l'utilisation de document.evaluate() dans FF2 ; dans FF3, il faut utiliser someXMLDoc.evaluate() si l'on évalue quelque chose d'autre que le document actuel.</li>
-</ul>
+- Les expressions XPath peuvent être évaluées sur les documents HTML et XML.
+- Lors de l'utilisation de document.evaluate() dans FF2 ; dans FF3, il faut utiliser someXMLDoc.evaluate() si l'on évalue quelque chose d'autre que le document actuel.
 
-<h2 id="Types_de_résultats">Types de résultats</h2>
+## Types de résultats
 
-<p>Ce sont des valeurs prises en charge pour le paramètre <code>resultType</code> de la méthode <code>evaluate</code> :</p>
+Ce sont des valeurs prises en charge pour le paramètre `resultType` de la méthode `evaluate` :
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <td class="header">Type de résultat</td>
-   <td class="header">Valeur</td>
-   <td class="header">Description</td>
-  </tr>
-  <tr>
-   <td><code>ANY_TYPE</code></td>
-   <td>0</td>
-   <td>Quel que soit le type, résulte naturellement de l'expression donnée.</td>
-  </tr>
-  <tr>
-   <td><code>NUMBER_TYPE</code></td>
-   <td>1</td>
-   <td>Un ensemble de résultats contenant un seul nombre. Utile, par exemple, dans une expression XPath utilisant la fonction count().</td>
-  </tr>
-  <tr>
-   <td><code>STRING_TYPE</code></td>
-   <td>2</td>
-   <td>Un ensemble de résultats contenant une seule chaîne de caractères.</td>
-  </tr>
-  <tr>
-   <td><code>BOOLEAN_TYPE</code></td>
-   <td>3</td>
-   <td>Un ensemble de résultats contenant une seule valeur booléenne. Utile pour, par exemple, une expression XPath utilisant la fonction not().</td>
-  </tr>
-  <tr>
-   <td><code>UNORDERED_NODE_ITERATOR_TYPE</code></td>
-   <td>4</td>
-   <td>Un ensemble de résultats contenant tous les nœuds correspondant à l'expression. Les nœuds de cet ensemble ne sont pas nécessairement dans le même ordre que celui de leur apparition dans le document.</td>
-  </tr>
-  <tr>
-   <td><code>ORDERED_NODE_ITERATOR_TYPE</code></td>
-   <td>5</td>
-   <td>Un ensemble de résultats contenant tous les noeuds correspondant à l'expression. Les nœuds de cet ensemble sont dans le même ordre que celui de leur apparition dans le document .</td>
-  </tr>
-  <tr>
-   <td><code>UNORDERED_NODE_SNAPSHOT_TYPE</code></td>
-   <td>6</td>
-   <td>Un ensemble de résultats contenant des instantanés de tous les nœuds correspondant à l'expression. Les nœuds de cet ensemble ne sont pas nécessairement dans le même ordre que celui de leur apparition dans le document .</td>
-  </tr>
-  <tr>
-   <td><code>ORDERED_NODE_SNAPSHOT_TYPE</code></td>
-   <td>7</td>
-   <td>Un ensemble de résultats contenant des instantanés de tous les nœuds correspondant à l'expression. Les nœuds de cet ensemble sont dans le même ordre que celui de leur apparition dans le document .</td>
-  </tr>
-  <tr>
-   <td><code>ANY_UNORDERED_NODE_TYPE</code></td>
-   <td>8</td>
-   <td>Un ensemble de résultats contenant un seul nœud correspondant à l'expression. Le noeud n'est pas nécessairement le premier noeud du document qui correspond à l'expression.</td>
-  </tr>
-  <tr>
-   <td><code>FIRST_ORDERED_NODE_TYPE</code></td>
-   <td>9</td>
-   <td>Un ensemble de résultats contenant le premier nœud du document qui correspond à l'expression.</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <td class="header">Type de résultat</td>
+      <td class="header">Valeur</td>
+      <td class="header">Description</td>
+    </tr>
+    <tr>
+      <td><code>ANY_TYPE</code></td>
+      <td>0</td>
+      <td>
+        Quel que soit le type, résulte naturellement de l'expression donnée.
+      </td>
+    </tr>
+    <tr>
+      <td><code>NUMBER_TYPE</code></td>
+      <td>1</td>
+      <td>
+        Un ensemble de résultats contenant un seul nombre. Utile, par exemple,
+        dans une expression XPath utilisant la fonction count().
+      </td>
+    </tr>
+    <tr>
+      <td><code>STRING_TYPE</code></td>
+      <td>2</td>
+      <td>
+        Un ensemble de résultats contenant une seule chaîne de caractères.
+      </td>
+    </tr>
+    <tr>
+      <td><code>BOOLEAN_TYPE</code></td>
+      <td>3</td>
+      <td>
+        Un ensemble de résultats contenant une seule valeur booléenne. Utile
+        pour, par exemple, une expression XPath utilisant la fonction not().
+      </td>
+    </tr>
+    <tr>
+      <td><code>UNORDERED_NODE_ITERATOR_TYPE</code></td>
+      <td>4</td>
+      <td>
+        Un ensemble de résultats contenant tous les nœuds correspondant à
+        l'expression. Les nœuds de cet ensemble ne sont pas nécessairement dans
+        le même ordre que celui de leur apparition dans le document.
+      </td>
+    </tr>
+    <tr>
+      <td><code>ORDERED_NODE_ITERATOR_TYPE</code></td>
+      <td>5</td>
+      <td>
+        Un ensemble de résultats contenant tous les noeuds correspondant à
+        l'expression. Les nœuds de cet ensemble sont dans le même ordre que
+        celui de leur apparition dans le document .
+      </td>
+    </tr>
+    <tr>
+      <td><code>UNORDERED_NODE_SNAPSHOT_TYPE</code></td>
+      <td>6</td>
+      <td>
+        Un ensemble de résultats contenant des instantanés de tous les nœuds
+        correspondant à l'expression. Les nœuds de cet ensemble ne sont pas
+        nécessairement dans le même ordre que celui de leur apparition dans le
+        document .
+      </td>
+    </tr>
+    <tr>
+      <td><code>ORDERED_NODE_SNAPSHOT_TYPE</code></td>
+      <td>7</td>
+      <td>
+        Un ensemble de résultats contenant des instantanés de tous les nœuds
+        correspondant à l'expression. Les nœuds de cet ensemble sont dans le
+        même ordre que celui de leur apparition dans le document .
+      </td>
+    </tr>
+    <tr>
+      <td><code>ANY_UNORDERED_NODE_TYPE</code></td>
+      <td>8</td>
+      <td>
+        Un ensemble de résultats contenant un seul nœud correspondant à
+        l'expression. Le noeud n'est pas nécessairement le premier noeud du
+        document qui correspond à l'expression.
+      </td>
+    </tr>
+    <tr>
+      <td><code>FIRST_ORDERED_NODE_TYPE</code></td>
+      <td>9</td>
+      <td>
+        Un ensemble de résultats contenant le premier nœud du document qui
+        correspond à l'expression.
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<p>Les résultats des types <code>NODE_ITERATOR</code> contiennent des références aux noeuds du document. La modification d'un nœud invalidera l'itérateur. Après avoir modifié un nœud, tenter de parcourir les résultats entraînera une erreur.</p>
+Les résultats des types `NODE_ITERATOR` contiennent des références aux noeuds du document. La modification d'un nœud invalidera l'itérateur. Après avoir modifié un nœud, tenter de parcourir les résultats entraînera une erreur.
 
-<p>Les résultats des types <code>NODE_SNAPSHOT</code> sont des instantanés, qui sont essentiellement des listes de nœuds correspondants. Vous pouvez apporter des modifications au document en modifiant les nœuds de capture instantanée. La modification du document n'invalide pas l'instantané. Toutefois, si le document est modifié, l'instantané peut ne pas correspondre à l'état actuel du document, car les nœuds peuvent avoir été déplacés, modifiés, ajoutés ou supprimés.</p>
+Les résultats des types `NODE_SNAPSHOT` sont des instantanés, qui sont essentiellement des listes de nœuds correspondants. Vous pouvez apporter des modifications au document en modifiant les nœuds de capture instantanée. La modification du document n'invalide pas l'instantané. Toutefois, si le document est modifié, l'instantané peut ne pas correspondre à l'état actuel du document, car les nœuds peuvent avoir été déplacés, modifiés, ajoutés ou supprimés.
 
-<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("DOM3 XPath", "xpath.html#XPathEvaluator-evaluate", "Document.evaluate")}}</td>
-   <td>{{Spec2("DOM3 XPath")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                    | État                             | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName("DOM3 XPath", "xpath.html#XPathEvaluator-evaluate", "Document.evaluate")}} | {{Spec2("DOM3 XPath")}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Document.evaluate")}}</p>
+{{Compat("api.Document.evaluate")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/API/Document/createExpression">DOM : document.createExpression</a></li>
- <li><a href="/fr/Add-ons/Code_snippets/XPath">XPath Code Snippets</a></li>
- <li><a href="http://codepen.io/johan/full/ckFgn">Vérifier le support du navigateur</a></li>
-</ul>
+- [DOM : document.createExpression](/fr/docs/Web/API/Document/createExpression)
+- [XPath Code Snippets](/fr/Add-ons/Code_snippets/XPath)
+- [Vérifier le support du navigateur](http://codepen.io/johan/full/ckFgn)
diff --git a/files/fr/web/api/document/execcommand/index.md b/files/fr/web/api/document/execcommand/index.md
index c581db094d..dfd9812dcd 100644
--- a/files/fr/web/api/document/execcommand/index.md
+++ b/files/fr/web/api/document/execcommand/index.md
@@ -9,185 +9,163 @@ tags:
   - Reference
 translation_of: Web/API/Document/execCommand
 ---
-<div>{{ApiRef("DOM")}}{{deprecated_header}}</div>
-
-<p>Lorsqu'un document HTML passe en <code><a href="/fr/docs/Web/API/Document/designMode">designMode</a></code>, l'objet <code>document</code> correspondant expose une méthode <strong><code>execCommand()</code></strong> permettant d'exécuter des commandes manipulant la région éditable courante tels que <a href="/fr/docs/Web/HTML/Element/input">les champs de formulaire</a> ou les éléments <code><a href="/fr/docs/Web/HTML/Global_attributes/contenteditable">contentEditable</a></code>.</p>
-
-<p>La plupart des commandes affectent la <a
-    href="/fr/docs/Web/API/Selection">sélection</a> du document (mise en gras, italique, etc.), tandis que
-  d'autres insèrent de nouveaux éléments (un lien) ou modifient toute une ligne (indentation). Lorsqu'on
-  utilise <code>contentEditable</code>, <code>execCommand()</code> affecte l'élément éditable
-  courant.</p>
-
-<h2 id="Syntax">Syntaxe</h2>
-
-<pre class="brush: js"><var>document</var>.execCommand(<var>aCommandName</var>, <var>aShowDefaultUI</var>, <var>aValueArgument</var>)
-</pre>
-
-<h3 id="Return_value">Valeur de retour</h3>
-
-<p>Un booléen ({{jsxref('Boolean')}}) qui vaut <code>false</code> si la commande n'est pas 
-  prise en charge ou si elle est désactivée.</p>
-
-<div class="note">
-  <p><strong>Note :</strong> <code><var>document</var>.execCommand()</code> ne renvoie
-    <code>true</code> que s'il est appelé à partir d'une interaction utilisateur. On ne
-    peut pas l'invoquer dans un script afin de vérifier la prise en charge navigateur avant
-    d'appeler une commande. À partir de Firefox 82, les appels imbriqués à 
-    <code>document.execCommand()</code> renverront toujours <code>false</code>.</p>
-</div>
-
-<h3 id="Parameters">Paramètres</h3>
-
-<dl>
-  <dt><code><var>aCommandName</var></code></dt>
-  <dd>Une chaîne de caractères {{domxref("DOMString")}} indiquant le nom de la commande à
-    exécuter. Voir {{anch("Commands")}} pour une liste de commandes possibles.</dd>
-  <dt><code><var>aShowDefaultUI</var></code></dt>
-  <dd>Un booléen ({{jsxref("Boolean")}}) indiquant si l'interface utilisateur par défaut
-    devrait être affichée. Ce n'est pas implémenté par Mozilla.</dd>
-  <dt><code><var>aValueArgument</var></code></dt>
-  <dd>Pour les commandes utilisant un argument en entrée, il s'agit d'une chaîne {{domxref("DOMString")}}
-    qui fournit cette information. On pourra, par exemple, <code>insertImage</code> utilise
-    l'URL de l'image à insérer. On utilisera <code>null</code> si aucun argument n'est utilisé.</dd>
-</dl>
-
-<h3 id="Commands">Commandes</h3>
-
-<dl>
-  <dt><code>backColor</code></dt>
-  <dd><p>Modifie la couleur d'arrière-plan du document. Avec le mode <code>styleWithCss</code> cela affecte la couleur d'arrière-plan du bloc englobant. Une chaîne de caractères décrivant une valeur {{cssxref("&lt;color&gt;")}} doit être passée en argument. On notera qu'Internet Explorer utilise ceci pour la couleur d'arrière-plan du texte.</p></dd>
-  <dt><code>bold</code></dt>
-  <dd><p>Active ou désactive la mise en gras pour la sélection ou à partir du point d'insertion Internet Explorer utilise la balise {{HTMLElement("strong")}} plutôt que {{HTMLElement("b")}}.</p></dd>
-  <dt><code>ClearAuthenticationCache</code></dt>
-  <dd><p>Supprime toutes les informations d'authentification <i>credentials</i>) du cache.</p></dd>
-  <dt><code>contentReadOnly</code></dt>
-  <dd><p>Rend le contenu du document en lecture seule ou éditable en fonction du booléen passé en argument (n'est pas pris en charge par Internet Explorer)</p></dd>
-  <dt><code>copy</code></dt>
-  <dd><p>Copie la sélection courante vers le presse-papier. Les conditions pour obtenir ce comportement peuvent varier d'un navigateur à l'autre. Veuillez voir le tableau de compatibilité ci-après.</p></dd>
-  <dt><code>createLink</code></dt>
-  <dd><p>Crée un hyperlien à partir de la sélection (sous réserve qu'il y en ait une). Une chaîne de caractères formant un URI est nécessaire comme argument afin de fournir la valeur de l'attribut <code>href</code>. L'URI doit contenir au moins un caractère (qui peut être un blanc). (Internet Explorer créera un lien avec une valeur <code>null</code>.)</p></dd>
-  <dt><code>cut</code></dt>
-  <dd><p>Coupe le contenu de la sélection courante et le copie dans le presse-papier. Les conditions pour obtenir ce comportement peuvent varier d'un navigateur à l'autre. Veuillez voir le tableau de compatibilité ci-après.</p></dd>
-  <dt><code>decreaseFontSize</code></dt>
-  <dd><p>Ajoute une balise {{HTMLElement("small")}} autour de la sélection ou au point  d'insertion. (Non pris en charge par Internet Explorer.)</p></dd>
-  <dt><code>defaultParagraphSeparator</code></dt>
-  <dd><p>Modifie le séparateur de paragraphe utilisé lorsque de nouveaux paragraphes sont créés dans les zones de texte éditables. Voir <a href="/fr/docs/Web/Guide/HTML/Editable_content#differences_in_markup_generation"> Différences dans la génération du balisage</a> pour plus de détails.</p></dd>
-  <dt><code>delete</code></dt>
-  <dd><p>Supprimer la sélection courante.</p></dd>
-  <dt><code>enableAbsolutePositionEditor</code></dt>
-  <dd><p>Active ou désactive la poignée qui permet de déplacer les éléments positionnés de façon absolue. Celle-ci est désactivée par défaut depuis Firefox 64 ({{bug(1490641)}}).</p></dd>
-  <dt><code>enableInlineTableEditing</code></dt>
-  <dd><p>Active ou désactive les contrôles pour l'insertion ou la suppression des lignes ou colonnes de tableau. Les contrôles sont désactivés par défaut depuis Firefox 64 ({{bug(1490641)}}).</p></dd>
-  <dt><code>enableObjectResizing</code></dt>
-  <dd><p>Active ou désactive les contrôles permettant de redimensionner les images, tableaux ou les éléments positionnés de façon absolue. Les poignées sont désactivées par défaut depuis Firefox 64 ({{bug(1490641)}}).</p></dd>
-  <dt><code>fontName</code></dt>
-  <dd><p>Modifie le nom de la police pour la sélection ou à partir du point d'insertion. La valeur fournie en argument doit être un nom de police (ex. <code>"Arial"</code>).</p></dd>
-  <dt><code>fontSize</code></dt>
-  <dd><p>Modifie la taille de la police pour la sélection ou à partir du point d'insertion. La valeur fournie en argument doit être un entier compris entre 1 et 7.</p></dd>
-  <dt><code>foreColor</code></dt>
-  <dd><p>Modifie la couleur de la police pour la sélection ou à partir du point d'insertion. La valeur passée en argument doit être une chaîne de caractères décrivant une couleur exprimée en notation hexadécimale.</p></dd>
-  <dt><code>formatBlock</code></dt>
-  <dd><p>Ajoute un élément HTML de bloc autour de la ligne contenant la sélection courante et remplace l'éventuel élément de bloc englobant s'il en existe un (pour Firefox, {{HTMLElement("blockquote")}} fera exception et englobera n'importe quel bloc). L'argument passé doit être un nom de balise. Tous les éléments de bloc peuvent en théorie être utilisés. (Internet Explorer et Edge ne prennent en charge que les balises <code>H1</code><code>H6</code>, <code>ADDRESS</code>, et <code>PRE</code> qui doivent être passées entre chevrons : <code>"&lt;H1&gt;"</code>.)</p></dd>
-  <dt><code>forwardDelete</code></dt>
-  <dd><p>Supprime un caractère à la position du curseur. Le comportement obtenu est le même que lorsqu'on appuie sur la touche <kbd>Suppr</kbd> d'un clavier Windows.</p></dd>
-  <dt><code>heading</code></dt>
-  <dd><p>Ajoute un élément de titre autour de la sélection ou au niveau du point d'insertion. L'argument doit être le nom d'une balise de titre (<code>"H1"</code> à <code>"H6"</code>). (Non pris en charge par Internet Explorer et Safari.)</p></dd>
-  <dt><code>hiliteColor</code></dt>
-  <dd><p>Modifie la couleur d'arrière-plan pour la sélection ou à partir du point d'insertion. La valeur passée en argument doit être une chaîne de caractères définissant une couleur  et <code>useCSS</code> doit valoir <code>true</code>. (Non pris en charge par Internet Explorer.)</p></dd>
-  <dt><code>increaseFontSize</code></dt>
-  <dd><p>Ajoute une balise {{HTMLElement("big")}} autour de la sélection ou à partir du point d'insertion. (Non pris en charge par Internet Explorer).</p></dd>
-  <dt><code>indent</code></dt>
-  <dd><p>Augmente l'indentation de la ligne contenant la sélection ou le point d'insertion. Pour Firefox, si la sélection s'étend sur plusieurs lignes ayant différents niveaux d'indentation, seules les lignes les moins indentées seront décalées.</p></dd>
-  <dt><code>insertBrOnReturn</code></dt>
-  <dd><p>Contrôle si la touche <kbd>Entrée</kbd> insère un élément {{HTMLElement("br")}} ou si le bloc courant est scindé en deux. (Non pris en charge par Internet Explorer.)</p></dd>
-  <dt><code>insertHorizontalRule</code></dt>
-  <dd><p>Insère un élément {{HTMLElement("hr")}} au point d'insertion ou remplace la  sélection courante par cet élément.</p></dd>
-  <dt><code>insertHTML</code></dt>
-  <dd><p>Insère un élément au point d'insertion en supprimant la sélection. Une chaîne de caractères HTML valide doit être fournie en argument. (Non pris en charge par Internet Explorer.)</p></dd>
-  <dt><code>insertImage</code></dt>
-  <dd><p>Insère une image au point d'insertion en supprimant la sélection. L'argument doit être une chaîne de caractères indiquant l'URL à utiliser pour l'attribut <code>src</code> de l'image. Les prérequis de cette valeur sont les mêmes que pour <code>createLink</code>.</p></dd>
-  <dt><code>insertOrderedList</code></dt>
-  <dd><p>Crée une <a href="/fr/docs/Web/HTML/Element/ol">liste numérotée ordonnée</a> pour la sélection ou à partir du point d'insertion.</p></dd>
-  <dt><code>insertUnorderedList</code></dt>
-  <dd><p>Crée une <a href="/fr/docs/Web/HTML/Element/ul">liste non-ordonnée</a> pour la sélection ou à partir du point d'insertion.</p></dd>
-  <dt><code>insertParagraph</code></dt>
-  <dd><p>Insère un <a href="/fr/docs/Web/HTML/Element/p">paragraphe</a> autour de la sélection pour la ligne courante. (Internet Explorer insère un paragraphe au point d'insertion et supprime la sélection.)</p></dd>
-  <dt><code>insertText</code></dt>
-  <dd><p>Insère le texte indiqué au point d'insertion (quitte à supprimer l'éventuelle sélection courante).</p></dd>
-  <dt><code>italic</code></dt>
-  <dd><p>Active ou désactive la mise en italique pour la sélection ou à partir du point d'insertion. (Internet Explorer utilisera l'élément {{HTMLElement("em")}} plutôt que {{HTMLElement("i")}}.)</p></dd>
-  <dt><code>justifyCenter</code></dt>
-  <dd><p>Centre la sélection ou le point d'insertion.</p></dd>
-  <dt><code>justifyFull</code></dt>
-  <dd><p>Justifie la sélection ou le point d'insertion.</p></dd>
-  <dt><code>justifyLeft</code></dt>
-  <dd><p>Justifie à gauche la sélection ou le point d'insertion.</p></dd>
-  <dt><code>justifyRight</code></dt>
-  <dd><p>Justifie à droite la sélection ou le point d'insertion.</p></dd>
-  <dt><code>outdent</code></dt>
-  <dd><p>Effectue un retrait d'indentation pour la ligne courante.</p></dd>
-  <dt><code>paste</code></dt>
-  <dd><p>Colle le contenu du presse-papier au point d'insertion (et remplace éventuellement la sélection actuelle). Fonctionnalité désactivée pour le contenu web.</p></dd>
-  <dt><code>redo</code></dt>
-  <dd><p>Rejoue l'action annulée par la précédente commande <code>undo</code>.</p></dd>
-  <dt><code>removeFormat</code></dt>
-  <dd><p>Supprime toute mise en forme pour la sélection courante.</p></dd>
-  <dt><code>selectAll</code></dt>
-  <dd><p>Sélectionne l'ensemble du contenu de la région éditable.</p></dd>
-  <dt><code>strikeThrough</code></dt>
-  <dd><p>Active ou désactive la rayure de la sélection ou à partir d'un point d'insertion.</p></dd>
-  <dt><code>subscript</code></dt>
-  <dd><p>Active ou désactive <a href="/fr/docs/Web/HTML/Element/sub">la mise en indice</a> pour la sélection ou au point d'insertion</p></dd>
-  <dt><code>superscript</code></dt>
-  <dd><p>Active ou désactive <a href="/fr/docs/Web/HTML/Element/sup">la mise en exposant</a> pour la sélection ou au point d'insertion</p></dd>
-  <dt><code>underline</code></dt>
-  <dd><p>Active ou désactive <a href="/fr/docs/Web/HTML/Element/u">le soulignement</a> pour la sélection ou au point d'insertion.</p></dd>
-  <dt><code>undo</code></dt>
-  <dd><p>Annule la dernière commande exécutée.</p></dd>
-  <dt><code>unlink</code></dt>
-  <dd><p>Retire l'<a href="/fr/docs/Web/HTML/Element/a">ancre</a> de l'hyperlien sélectionné.</p></dd>
-  <dt><code>useCSS</code> {{Deprecated_inline}}</dt>
-  <dd><p>Active/désactive l'utilisation de balises HTML ou de CSS pour le balisage généré. La valeur de l'argument doit être un booléen. Note : cet argument possède une logique inversée (<code>false</code> permet d'utiliser CSS et <code>true</code> permet d'utiliser HTML). Cette valeur n'est pas prise en charge par Internet Explorer et a été dépréciée en faveur de <code>styleWithCSS</code>.</p></dd>  <dt><code>styleWithCSS</code></dt>
-  <dd><p>Remplace la commande <code>useCSS</code>. <code>true</code> modifie/génère des attributs <code>style</code> dans le balisage tandis que <code>false</code> génère des éléments HTML de présentation.</p></dd>
-</dl>
-
-<h2 id="Example">Exemple</h2>
-
-<p>Un exemple d'utilisation est disponible
-  <a href="https://codepen.io/chrisdavidmills/full/gzYjag/">sur CodePen</a>.</p>
-
-<h2 id="Specifications">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><a href="https://w3c.github.io/editing/docs/execCommand/">execCommand</a></td>
-      <td>Brouillon non officiel</td>
-      <td></td>
-    </tr>
-  </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Document.execCommand")}}</p>
-
-<h2 id="See_also">Voir aussi</h2>
-
-<ul>
-  <li>{{domxref("HTMLElement.contentEditable")}}</li>
-  <li>{{domxref("document.designMode")}}</li>
-  <li><a href="/fr/docs/Web/Guide/HTML/Editable_content/Rich-Text_Editing_in_Mozilla">L'édition HTML dans Firefox</a>
-  </li>
-  <li><a
-      href="https://github.com/guardian/scribe/blob/master/BROWSERINCONSISTENCIES.md">Documentation des incohérences
-      navigateur dans Scribe</a> qui indique les bugs liés à <code>document.execCommand</code>.</li>
-</ul>
+{{ApiRef("DOM")}}{{deprecated_header}}
+
+Lorsqu'un document HTML passe en [`designMode`](/fr/docs/Web/API/Document/designMode), l'objet `document` correspondant expose une méthode **`execCommand()`** permettant d'exécuter des commandes manipulant la région éditable courante tels que [les champs de formulaire](/fr/docs/Web/HTML/Element/input) ou les éléments [`contentEditable`](/fr/docs/Web/HTML/Global_attributes/contenteditable).
+
+La plupart des commandes affectent la [sélection](/fr/docs/Web/API/Selection) du document (mise en gras, italique, etc.), tandis que
+d'autres insèrent de nouveaux éléments (un lien) ou modifient toute une ligne (indentation). Lorsqu'on
+utilise `contentEditable`, `execCommand()` affecte l'élément éditable
+courant.
+
+## Syntaxe
+
+```js
+document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)
+```
+
+### Valeur de retour
+
+Un booléen ({{jsxref('Boolean')}}) qui vaut `false` si la commande n'est pas
+prise en charge ou si elle est désactivée.
+
+> **Note :** `document.execCommand()` ne renvoie
+> `true` que s'il est appelé à partir d'une interaction utilisateur. On ne
+> peut pas l'invoquer dans un script afin de vérifier la prise en charge navigateur avant
+> d'appeler une commande. À partir de Firefox 82, les appels imbriqués à
+> `document.execCommand()` renverront toujours `false`.
+
+### Paramètres
+
+- `aCommandName`
+  - : Une chaîne de caractères {{domxref("DOMString")}} indiquant le nom de la commande à
+    exécuter. Voir {{anch("Commands")}} pour une liste de commandes possibles.
+- `aShowDefaultUI`
+  - : Un booléen ({{jsxref("Boolean")}}) indiquant si l'interface utilisateur par défaut
+    devrait être affichée. Ce n'est pas implémenté par Mozilla.
+- `aValueArgument`
+  - : Pour les commandes utilisant un argument en entrée, il s'agit d'une chaîne {{domxref("DOMString")}}
+    qui fournit cette information. On pourra, par exemple, `insertImage` utilise
+    l'URL de l'image à insérer. On utilisera `null` si aucun argument n'est utilisé.
+
+### Commandes
+
+- `backColor`
+  - : Modifie la couleur d'arrière-plan du document. Avec le mode `styleWithCss` cela affecte la couleur d'arrière-plan du bloc englobant. Une chaîne de caractères décrivant une valeur {{cssxref("&lt;color&gt;")}} doit être passée en argument. On notera qu'Internet Explorer utilise ceci pour la couleur d'arrière-plan du texte.
+- `bold`
+  - : Active ou désactive la mise en gras pour la sélection ou à partir du point d'insertion Internet Explorer utilise la balise {{HTMLElement("strong")}} plutôt que {{HTMLElement("b")}}.
+- `ClearAuthenticationCache`
+  - : Supprime toutes les informations d'authentification _credentials_) du cache.
+- `contentReadOnly`
+  - : Rend le contenu du document en lecture seule ou éditable en fonction du booléen passé en argument (n'est pas pris en charge par Internet Explorer)
+- `copy`
+  - : Copie la sélection courante vers le presse-papier. Les conditions pour obtenir ce comportement peuvent varier d'un navigateur à l'autre. Veuillez voir le tableau de compatibilité ci-après.
+- `createLink`
+  - : Crée un hyperlien à partir de la sélection (sous réserve qu'il y en ait une). Une chaîne de caractères formant un URI est nécessaire comme argument afin de fournir la valeur de l'attribut `href`. L'URI doit contenir au moins un caractère (qui peut être un blanc). (Internet Explorer créera un lien avec une valeur `null`.)
+- `cut`
+  - : Coupe le contenu de la sélection courante et le copie dans le presse-papier. Les conditions pour obtenir ce comportement peuvent varier d'un navigateur à l'autre. Veuillez voir le tableau de compatibilité ci-après.
+- `decreaseFontSize`
+  - : Ajoute une balise {{HTMLElement("small")}} autour de la sélection ou au point d'insertion. (Non pris en charge par Internet Explorer.)
+- `defaultParagraphSeparator`
+  - : Modifie le séparateur de paragraphe utilisé lorsque de nouveaux paragraphes sont créés dans les zones de texte éditables. Voir [Différences dans la génération du balisage](/fr/docs/Web/Guide/HTML/Editable_content#differences_in_markup_generation) pour plus de détails.
+- `delete`
+  - : Supprimer la sélection courante.
+- `enableAbsolutePositionEditor`
+  - : Active ou désactive la poignée qui permet de déplacer les éléments positionnés de façon absolue. Celle-ci est désactivée par défaut depuis Firefox 64 ({{bug(1490641)}}).
+- `enableInlineTableEditing`
+  - : Active ou désactive les contrôles pour l'insertion ou la suppression des lignes ou colonnes de tableau. Les contrôles sont désactivés par défaut depuis Firefox 64 ({{bug(1490641)}}).
+- `enableObjectResizing`
+  - : Active ou désactive les contrôles permettant de redimensionner les images, tableaux ou les éléments positionnés de façon absolue. Les poignées sont désactivées par défaut depuis Firefox 64 ({{bug(1490641)}}).
+- `fontName`
+  - : Modifie le nom de la police pour la sélection ou à partir du point d'insertion. La valeur fournie en argument doit être un nom de police (ex. `"Arial"`).
+- `fontSize`
+  - : Modifie la taille de la police pour la sélection ou à partir du point d'insertion. La valeur fournie en argument doit être un entier compris entre 1 et 7.
+- `foreColor`
+  - : Modifie la couleur de la police pour la sélection ou à partir du point d'insertion. La valeur passée en argument doit être une chaîne de caractères décrivant une couleur exprimée en notation hexadécimale.
+- `formatBlock`
+  - : Ajoute un élément HTML de bloc autour de la ligne contenant la sélection courante et remplace l'éventuel élément de bloc englobant s'il en existe un (pour Firefox, {{HTMLElement("blockquote")}} fera exception et englobera n'importe quel bloc). L'argument passé doit être un nom de balise. Tous les éléments de bloc peuvent en théorie être utilisés. (Internet Explorer et Edge ne prennent en charge que les balises ` H1``H6 `, `ADDRESS`, et `PRE` qui doivent être passées entre chevrons : `"<H1>"`.)
+- `forwardDelete`
+  - : Supprime un caractère à la position du curseur. Le comportement obtenu est le même que lorsqu'on appuie sur la touche <kbd>Suppr</kbd> d'un clavier Windows.
+- `heading`
+  - : Ajoute un élément de titre autour de la sélection ou au niveau du point d'insertion. L'argument doit être le nom d'une balise de titre (`"H1"` à `"H6"`). (Non pris en charge par Internet Explorer et Safari.)
+- `hiliteColor`
+  - : Modifie la couleur d'arrière-plan pour la sélection ou à partir du point d'insertion. La valeur passée en argument doit être une chaîne de caractères définissant une couleur et `useCSS` doit valoir `true`. (Non pris en charge par Internet Explorer.)
+- `increaseFontSize`
+  - : Ajoute une balise {{HTMLElement("big")}} autour de la sélection ou à partir du point d'insertion. (Non pris en charge par Internet Explorer).
+- `indent`
+  - : Augmente l'indentation de la ligne contenant la sélection ou le point d'insertion. Pour Firefox, si la sélection s'étend sur plusieurs lignes ayant différents niveaux d'indentation, seules les lignes les moins indentées seront décalées.
+- `insertBrOnReturn`
+  - : Contrôle si la touche <kbd>Entrée</kbd> insère un élément {{HTMLElement("br")}} ou si le bloc courant est scindé en deux. (Non pris en charge par Internet Explorer.)
+- `insertHorizontalRule`
+  - : Insère un élément {{HTMLElement("hr")}} au point d'insertion ou remplace la sélection courante par cet élément.
+- `insertHTML`
+  - : Insère un élément au point d'insertion en supprimant la sélection. Une chaîne de caractères HTML valide doit être fournie en argument. (Non pris en charge par Internet Explorer.)
+- `insertImage`
+  - : Insère une image au point d'insertion en supprimant la sélection. L'argument doit être une chaîne de caractères indiquant l'URL à utiliser pour l'attribut `src` de l'image. Les prérequis de cette valeur sont les mêmes que pour `createLink`.
+- `insertOrderedList`
+  - : Crée une [liste numérotée ordonnée](/fr/docs/Web/HTML/Element/ol) pour la sélection ou à partir du point d'insertion.
+- `insertUnorderedList`
+  - : Crée une [liste non-ordonnée](/fr/docs/Web/HTML/Element/ul) pour la sélection ou à partir du point d'insertion.
+- `insertParagraph`
+  - : Insère un [paragraphe](/fr/docs/Web/HTML/Element/p) autour de la sélection pour la ligne courante. (Internet Explorer insère un paragraphe au point d'insertion et supprime la sélection.)
+- `insertText`
+  - : Insère le texte indiqué au point d'insertion (quitte à supprimer l'éventuelle sélection courante).
+- `italic`
+  - : Active ou désactive la mise en italique pour la sélection ou à partir du point d'insertion. (Internet Explorer utilisera l'élément {{HTMLElement("em")}} plutôt que {{HTMLElement("i")}}.)
+- `justifyCenter`
+  - : Centre la sélection ou le point d'insertion.
+- `justifyFull`
+  - : Justifie la sélection ou le point d'insertion.
+- `justifyLeft`
+  - : Justifie à gauche la sélection ou le point d'insertion.
+- `justifyRight`
+  - : Justifie à droite la sélection ou le point d'insertion.
+- `outdent`
+  - : Effectue un retrait d'indentation pour la ligne courante.
+- `paste`
+  - : Colle le contenu du presse-papier au point d'insertion (et remplace éventuellement la sélection actuelle). Fonctionnalité désactivée pour le contenu web.
+- `redo`
+  - : Rejoue l'action annulée par la précédente commande `undo`.
+- `removeFormat`
+  - : Supprime toute mise en forme pour la sélection courante.
+- `selectAll`
+  - : Sélectionne l'ensemble du contenu de la région éditable.
+- `strikeThrough`
+  - : Active ou désactive la rayure de la sélection ou à partir d'un point d'insertion.
+- `subscript`
+  - : Active ou désactive [la mise en indice](/fr/docs/Web/HTML/Element/sub) pour la sélection ou au point d'insertion
+- `superscript`
+  - : Active ou désactive [la mise en exposant](/fr/docs/Web/HTML/Element/sup) pour la sélection ou au point d'insertion
+- `underline`
+  - : Active ou désactive [le soulignement](/fr/docs/Web/HTML/Element/u) pour la sélection ou au point d'insertion.
+- `undo`
+  - : Annule la dernière commande exécutée.
+- `unlink`
+  - : Retire l'[ancre](/fr/docs/Web/HTML/Element/a) de l'hyperlien sélectionné.
+- `useCSS` {{Deprecated_inline}}
+  - : Active/désactive l'utilisation de balises HTML ou de CSS pour le balisage généré. La valeur de l'argument doit être un booléen. Note : cet argument possède une logique inversée (`false` permet d'utiliser CSS et `true` permet d'utiliser HTML). Cette valeur n'est pas prise en charge par Internet Explorer et a été dépréciée en faveur de `styleWithCSS`.
+- `styleWithCSS`
+  - : Remplace la commande `useCSS`. `true` modifie/génère des attributs `style` dans le balisage tandis que `false` génère des éléments HTML de présentation.
+
+## Exemple
+
+Un exemple d'utilisation est disponible
+[sur CodePen](https://codepen.io/chrisdavidmills/full/gzYjag/).
+
+## Spécifications
+
+| Spécification                                                  | État                   | Commentaires |
+| -------------------------------------------------------------- | ---------------------- | ------------ |
+| [execCommand](https://w3c.github.io/editing/docs/execCommand/) | Brouillon non officiel |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Document.execCommand")}}
+
+## Voir aussi
+
+- {{domxref("HTMLElement.contentEditable")}}
+- {{domxref("document.designMode")}}
+- [L'édition HTML dans Firefox](/fr/docs/Web/Guide/HTML/Editable_content/Rich-Text_Editing_in_Mozilla)
+- [Documentation des incohérences
+  navigateur dans Scribe](https://github.com/guardian/scribe/blob/master/BROWSERINCONSISTENCIES.md) qui indique les bugs liés à `document.execCommand`.
diff --git a/files/fr/web/api/document/exitfullscreen/index.md b/files/fr/web/api/document/exitfullscreen/index.md
index 5bff1f4f8c..6ba66c8671 100644
--- a/files/fr/web/api/document/exitfullscreen/index.md
+++ b/files/fr/web/api/document/exitfullscreen/index.md
@@ -9,59 +9,45 @@ tags:
   - Plein écran
 translation_of: Web/API/Document/exitFullscreen
 ---
-<div>{{ApiRef("Fullscreen API")}}</div>
+{{ApiRef("Fullscreen API")}}
 
-<p>La méthode <code><strong>Document.exitFullscreen()</strong></code> extrait le document du mode plein écran ; elle est utilisée pour inverser les effets d'un appel au mode plein écran réalisé avec la méthode {{domxref("Element.requestFullscreen()")}}.</p>
+La méthode **`Document.exitFullscreen()`** extrait le document du mode plein écran ; elle est utilisée pour inverser les effets d'un appel au mode plein écran réalisé avec la méthode {{domxref("Element.requestFullscreen()")}}.
 
-<div class="note">
-  <p><strong>Note :</strong> Si un autre élément était précédemment en mode plein écran lorsque l'élément en cours a été placé en mode plein écran, cet élément précédent reprend le mode plein écran. Une "pile" d'éléments en plein écran est maintenue par le navigateur à cette fin.</p>
-</div>
+> **Note :** Si un autre élément était précédemment en mode plein écran lorsque l'élément en cours a été placé en mode plein écran, cet élément précédent reprend le mode plein écran. Une "pile" d'éléments en plein écran est maintenue par le navigateur à cette fin.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">document.exitFullscreen();
-</pre>
+    document.exitFullscreen();
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">// Click bascule en mode plein écran
+```js
+// Click bascule en mode plein écran
 document.onclick = function (event) {
   if (document.fullscreenElement) {
     document.exitFullscreen()
   } else {
     document.documentElement.requestFullscreen()
   }
-};</pre>
+};
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName("Fullscreen", "#dom-document-exitfullscreen", "Document.exitFullscreen()")}}</td>
-   <td>{{Spec2("Fullscreen")}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                        | Statut                           | Commentaire         |
+| -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- |
+| {{SpecName("Fullscreen", "#dom-document-exitfullscreen", "Document.exitFullscreen()")}} | {{Spec2("Fullscreen")}} | Définition initiale |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Document.exitFullscreen")}}</p>
+{{Compat("api.Document.exitFullscreen")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/Guide/DOM/Using_full_screen_mode">Utiliser le mode plein écran</a></li>
- <li>{{ domxref("Element.requestFullscreen()") }}</li>
- <li>{{ domxref("Document.exitFullscreen()") }}</li>
- <li>{{ domxref("Document.fullscreen") }}</li>
- <li>{{ domxref("Document.fullscreenElement") }}</li>
- <li>{{ cssxref(":fullscreen") }}</li>
- <li>{{ HTMLAttrXRef("allowfullscreen", "iframe") }}</li>
-</ul>
+- [Utiliser le mode plein écran](/fr/docs/Web/Guide/DOM/Using_full_screen_mode)
+- {{ domxref("Element.requestFullscreen()") }}
+- {{ domxref("Document.exitFullscreen()") }}
+- {{ domxref("Document.fullscreen") }}
+- {{ domxref("Document.fullscreenElement") }}
+- {{ cssxref(":fullscreen") }}
+- {{ HTMLAttrXRef("allowfullscreen", "iframe") }}
diff --git a/files/fr/web/api/document/exitpointerlock/index.md b/files/fr/web/api/document/exitpointerlock/index.md
index 72a24c5f2f..d7290e0749 100644
--- a/files/fr/web/api/document/exitpointerlock/index.md
+++ b/files/fr/web/api/document/exitpointerlock/index.md
@@ -9,42 +9,28 @@ tags:
   - Reference
 translation_of: Web/API/Document/exitPointerLock
 ---
-<div>{{APIRef("DOM")}}{{SeeCompatTable}}</div>
+{{APIRef("DOM")}}{{SeeCompatTable}}
 
-<p>La méthode <strong><code>exitPointerLock()</code></strong> permet de relâcher un pointeur de façon asynchrone lorsque le pointeur était auparavant mobilisé par la méthode {{domxref("Element.requestPointerLock()")}}.</p>
+La méthode **`exitPointerLock()`** permet de relâcher un pointeur de façon asynchrone lorsque le pointeur était auparavant mobilisé par la méthode {{domxref("Element.requestPointerLock()")}}.
 
-<p>Pour connaître le succès ou l'échec de cette requête, il faut surveiller les évènements {{event("pointerlockchange")}} et {{event("pointerlockerror")}}.</p>
+Pour connaître le succès ou l'échec de cette requête, il faut surveiller les évènements {{event("pointerlockchange")}} et {{event("pointerlockerror")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">document.exitPointerLock();
-</pre>
+    document.exitPointerLock();
 
-<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('Pointer Lock','l#extensions-to-the-document-interface','Document')}}</td>
-   <td>{{Spec2('Pointer Lock')}}</td>
-   <td>Extension de l'interface <code>Document</code></td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                | État                             | Commentaires                        |
+| ------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------------------------------- |
+| {{SpecName('Pointer Lock','l#extensions-to-the-document-interface','Document')}} | {{Spec2('Pointer Lock')}} | Extension de l'interface `Document` |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Document.exitPointerLock")}}</p>
+{{Compat("api.Document.exitPointerLock")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("Document.pointerLockElement")}}</li>
- <li>{{domxref("Element.requestPointerLock()")}}</li>
- <li><a href="/fr/docs/WebAPI/Pointer_Lock">L'API <em>Pointer Lock</em></a></li>
-</ul>
+- {{domxref("Document.pointerLockElement")}}
+- {{domxref("Element.requestPointerLock()")}}
+- [L'API _Pointer Lock_](/fr/docs/WebAPI/Pointer_Lock)
diff --git a/files/fr/web/api/document/featurepolicy/index.md b/files/fr/web/api/document/featurepolicy/index.md
index 4c2dbbe9ba..7c926f4c7e 100644
--- a/files/fr/web/api/document/featurepolicy/index.md
+++ b/files/fr/web/api/document/featurepolicy/index.md
@@ -9,39 +9,24 @@ tags:
   - Reference
 translation_of: Web/API/Document/featurePolicy
 ---
-<p>{{APIRef("Feature Policy")}}</p>
+{{APIRef("Feature Policy")}}
 
-<p>La propriété en lecture seule <strong><code>featurePolicy</code></strong> de l'interface {{domxref("Document")}} retourne l'interface {{domxref("FeaturePolicy")}}, qui fournit une API permettant de consulter facilement les règles de fonctionnalités appliquées sur un document spécifique.</p>
+La propriété en lecture seule **`featurePolicy`** de l'interface {{domxref("Document")}} retourne l'interface {{domxref("FeaturePolicy")}}, qui fournit une API permettant de consulter facilement les règles de fonctionnalités appliquées sur un document spécifique.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="notranslate">var <var>policy</var> = <var>iframeElement</var>.featurePolicy</pre>
+    var policy = iframeElement.featurePolicy
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>Un objet {{domxref("FeaturePolicy")}} pouvant être utilisé pour consulter les paramètres de Feature Policy appliqués au document.</p>
+Un objet {{domxref("FeaturePolicy")}} pouvant être utilisé pour consulter les paramètres de Feature Policy appliqués au document.
 
-<h2 id="Spécification">Spécification</h2>
+## Spécification
 
-<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("Feature Policy")}}</td>
-   <td>{{Spec2("Feature Policy")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                            | Statut                               | Commentaire          |
+| ---------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName("Feature Policy")}} | {{Spec2("Feature Policy")}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-
-
-<p>{{Compat("api.Document.featurePolicy")}}</p>
+{{Compat("api.Document.featurePolicy")}}
diff --git a/files/fr/web/api/document/forms/index.md b/files/fr/web/api/document/forms/index.md
index 69a310feb2..9331ece590 100644
--- a/files/fr/web/api/document/forms/index.md
+++ b/files/fr/web/api/document/forms/index.md
@@ -9,108 +9,91 @@ tags:
   - Propriétés
 translation_of: Web/API/Document/forms
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p>La propriété <code>forms</code> de {{domxref("Document")}} retourne une collection ({{domxref("HTMLCollection")}}) des éléments {{HTMLElement("form")}} présents dans le document actuel.</p>
+La propriété `forms` de {{domxref("Document")}} retourne une collection ({{domxref("HTMLCollection")}}) des éléments {{HTMLElement("form")}} présents dans le document actuel.
 
-<div class="note">
-<p><strong>Note :</strong> De même, vous pouvez accéder à une liste des éléments d'entrée utilisateur d'un formulaire à l'aide de la propriété {{domxref ("HTMLFormElement.elements")}}.</p>
-</div>
+> **Note :** De même, vous pouvez accéder à une liste des éléments d'entrée utilisateur d'un formulaire à l'aide de la propriété {{domxref ("HTMLFormElement.elements")}}.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var>collection</var> = document.forms;</pre>
+    collection = document.forms;
 
-<h3 id="Example">Valeur</h3>
+### Valeur
 
-<p>Un objet {{domxref("HTMLCollection")}} listant tous les formulaires du document. Chaque élément de la collection est un {{domxref("HTMLFormElement")}} représentant un seul élément <code>&lt;form&gt;</code>.</p>
+Un objet {{domxref("HTMLCollection")}} listant tous les formulaires du document. Chaque élément de la collection est un {{domxref("HTMLFormElement")}} représentant un seul élément `<form>`.
 
-<h2 id="Example">Exemples</h2>
+## Exemples
 
-<h3 id="Example">Récupérer les informations d'un formulaire</h3>
+### Récupérer les informations d'un formulaire
 
-<pre class="brush:html">&lt;!DOCTYPE html&gt;
-&lt;html lang="en"&gt;
+```html
+<!DOCTYPE html>
+<html lang="en">
 
-&lt;head&gt;
-&lt;title&gt;document.forms example&lt;/title&gt;
-&lt;/head&gt;
+<head>
+<title>document.forms example</title>
+</head>
 
-&lt;body&gt;
+<body>
 
-&lt;form id="robby"&gt;
-  &lt;input type="button" onclick="alert(document.forms[0].id);" value="robby's form" /&gt;
-&lt;/form&gt;
+<form id="robby">
+  <input type="button" onclick="alert(document.forms[0].id);" value="robby's form" />
+</form>
 
-&lt;form id="dave"&gt;
-  &lt;input type="button" onclick="alert(document.forms[1].id);" value="dave's form" /&gt;
-&lt;/form&gt;
+<form id="dave">
+  <input type="button" onclick="alert(document.forms[1].id);" value="dave's form" />
+</form>
 
-&lt;form id="paul"&gt;
-  &lt;input type="button" onclick="alert(document.forms[2].id);" value="paul's form" /&gt;
-&lt;/form&gt;
+<form id="paul">
+  <input type="button" onclick="alert(document.forms[2].id);" value="paul's form" />
+</form>
 
-&lt;/body&gt;
-&lt;/html&gt;
-</pre>
+</body>
+</html>
+```
 
-<h3 id="Accéder_à_un_élément_contenu_dans_un_formulaire">Accéder à un élément contenu dans un formulaire</h3>
+### Accéder à un élément contenu dans un formulaire
 
-<pre class="brush: js">var selectForm = document.forms[index];
+```js
+var selectForm = document.forms[index];
 var selectFormElement = document.forms[index].elements[index];
-</pre>
+```
 
-<h3 id="Specification">Accéder aux formulaires nommés</h3>
+### Accéder aux formulaires nommés
 
-<pre class="brush: html">&lt;!DOCTYPE html&gt;
-&lt;html lang="en"&gt;
-&lt;head&gt;
-  &lt;title&gt;document.forms example&lt;/title&gt;
-&lt;/head&gt;
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title>document.forms example</title>
+</head>
 
-&lt;body&gt;
+<body>
 
-&lt;form name="login"&gt;
-  &lt;input name="email" type="email"&gt;
-  &lt;input name="password" type="password"&gt;
-  &lt;button type="submit"&gt;Log in&lt;/button&gt;
-&lt;/form&gt;
+<form name="login">
+  <input name="email" type="email">
+  <input name="password" type="password">
+  <button type="submit">Log in</button>
+</form>
 
-&lt;script&gt;
+<script>
   var loginForm = document.forms.login; // Ou document.forms['login']
   loginForm.elements.email.placeholder = 'test@example.com';
   loginForm.elements.password.placeholder = 'password';
-&lt;/script&gt;
-&lt;/body&gt;
-&lt;/html&gt;</pre>
-
-<h2 id="Specification">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', '#dom-document-forms', 'Document.forms')}}</td>
-   <td>{{ Spec2('HTML WHATWG') }}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 HTML', 'html.html#ID-1689064', 'Document.forms')}}</td>
-   <td>{{ Spec2('DOM2 Events') }}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="See_Also">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/Guide/HTML/Formulaires">Formulaires HTML</a></li>
- <li>{{HTMLElement("form")}} et l'interface {{domxref("HTMLFormElement")}}</li>
-</ul>
+</script>
+</body>
+</html>
+```
+
+## Spécifications
+
+| Spécification                                                                                | Statut                               | Commentaire          |
+| -------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName('HTML WHATWG', '#dom-document-forms', 'Document.forms')}} | {{ Spec2('HTML WHATWG') }} |                      |
+| {{SpecName('DOM2 HTML', 'html.html#ID-1689064', 'Document.forms')}}     | {{ Spec2('DOM2 Events') }} | Définition initiale. |
+
+## Voir aussi
+
+- [Formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires)
+- {{HTMLElement("form")}} et l'interface {{domxref("HTMLFormElement")}}
diff --git a/files/fr/web/api/document/fullscreenchange_event/index.md b/files/fr/web/api/document/fullscreenchange_event/index.md
index a2606c65b2..adcd354eb9 100644
--- a/files/fr/web/api/document/fullscreenchange_event/index.md
+++ b/files/fr/web/api/document/fullscreenchange_event/index.md
@@ -3,62 +3,36 @@ title: fullscreenchange
 slug: Web/API/Document/fullscreenchange_event
 translation_of: Web/API/Document/fullscreenchange_event
 ---
-<p>L'événement <strong><code>onfullscreenchange</code></strong> est déclenché lorsque le navigateur alterne entre le mode fenêtré et plein écran.</p>
-
-<h2 id="Informations_générales">Informations générales</h2>
-
-<dl>
- <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
- <dd style="margin: 0 0 0 120px;"><a href="https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html#api">Fullscreen</a></dd>
- <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
- <dd style="margin: 0 0 0 120px;">{{domxref("Event")}}</dd>
- <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
- <dd style="margin: 0 0 0 120px;">Oui</dd>
- <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
- <dd style="margin: 0 0 0 120px;">Non</dd>
- <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
- <dd style="margin: 0 0 0 120px;">{{domxref("Document")}}</dd>
- <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
- <dd style="margin: 0 0 0 120px;">Aucune</dd>
-</dl>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Property</th>
-   <th scope="col">Type</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>target</code> {{readonlyInline}}</td>
-   <td>{{domxref("EventTarget")}}</td>
-   <td>L'élément recevant l'événement.</td>
-  </tr>
-  <tr>
-   <td><code>type</code> {{readonlyInline}}</td>
-   <td>{{domxref("DOMString")}}</td>
-   <td>Le type de l'événement.</td>
-  </tr>
-  <tr>
-   <td><code>bubbles</code> {{readonlyInline}}</td>
-   <td>{{jsxref("Boolean")}}</td>
-   <td>Indique si l'événement bubble habituellement ou non.</td>
-  </tr>
-  <tr>
-   <td><code>cancelable</code> {{readonlyInline}}</td>
-   <td>{{jsxref("Boolean")}}</td>
-   <td>Indique si l'événement est annulable ou non.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Exemple">Exemple</h2>
-
-<pre class="brush:js;">// Noter que l'API est toujours vendor-prefixed dans les navigateurs l'implémentant
+L'événement **`onfullscreenchange`** est déclenché lorsque le navigateur alterne entre le mode fenêtré et plein écran.
+
+## Informations générales
+
+- Spécification
+  - : [Fullscreen](https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html#api)
+- Interface
+  - : {{domxref("Event")}}
+- Propagation
+  - : Oui
+- Annulable
+  - : Non
+- Cible
+  - : {{domxref("Document")}}
+- Action par défaut
+  - : Aucune
+
+## Propriétés
+
+| Property                              | Type                                 | Description                                          |
+| ------------------------------------- | ------------------------------------ | ---------------------------------------------------- |
+| `target` {{readonlyInline}}     | {{domxref("EventTarget")}} | L'élément recevant l'événement.                      |
+| `type` {{readonlyInline}}       | {{domxref("DOMString")}}     | Le type de l'événement.                              |
+| `bubbles` {{readonlyInline}}    | {{jsxref("Boolean")}}         | Indique si l'événement bubble habituellement ou non. |
+| `cancelable` {{readonlyInline}} | {{jsxref("Boolean")}}         | Indique si l'événement est annulable ou non.         |
+
+## Exemple
+
+```js
+// Noter que l'API est toujours vendor-prefixed dans les navigateurs l'implémentant
 document.addEventListener("fullscreenchange", function( event ) {
 
     // L'objet event ne porte pas l'information à propos du mode plein écran
@@ -70,16 +44,13 @@ document.addEventListener("fullscreenchange", function( event ) {
         document.fullscreenElement;
     }
 
-});</pre>
+});
+```
 
-<h2 id="Evénements_liés">Evénements liés</h2>
+## Evénements liés
 
-<ul>
- <li><a href="/fr/docs/Mozilla_event_reference/fullscreenerror"><code>fullscreenerror</code></a></li>
-</ul>
+- [`fullscreenerror`](/fr/docs/Mozilla_event_reference/fullscreenerror)
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/DOM/Using_full-screen_mode">Utilisation du mode plein écran</a></li>
-</ul>
+- [Utilisation du mode plein écran](/fr/docs/DOM/Using_full-screen_mode)
diff --git a/files/fr/web/api/document/fullscreenerror_event/index.md b/files/fr/web/api/document/fullscreenerror_event/index.md
index dafb34cf85..93500c4c70 100644
--- a/files/fr/web/api/document/fullscreenerror_event/index.md
+++ b/files/fr/web/api/document/fullscreenerror_event/index.md
@@ -3,67 +3,36 @@ title: fullscreenerror
 slug: Web/API/Document/fullscreenerror_event
 translation_of: Web/API/Document/fullscreenerror_event
 ---
-<p>L'événement <strong><code>fullscreenerror</code></strong><code> est déclenché lorsque le navigateur ne peut pas entrer en mode plein écran.</code></p>
+L'événement **`fullscreenerror`**` est déclenché lorsque le navigateur ne peut pas entrer en mode plein écran.`
 
-<h2 id="Informations_générales">Informations générales</h2>
+## Informations générales
 
-<dl>
- <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
- <dd style="margin: 0 0 0 120px;"><a href="https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html#api">Fullscreen</a></dd>
- <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
- <dd style="margin: 0 0 0 120px;">{{domxref("Event")}}</dd>
- <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
- <dd style="margin: 0 0 0 120px;">Oui</dd>
- <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
- <dd style="margin: 0 0 0 120px;">Non</dd>
- <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
- <dd style="margin: 0 0 0 120px;">{{domxref("Document")}}</dd>
- <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
- <dd style="margin: 0 0 0 120px;">Aucune</dd>
-</dl>
+- Spécification
+  - : [Fullscreen](https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html#api)
+- Interface
+  - : {{domxref("Event")}}
+- Propagation
+  - : Oui
+- Annulable
+  - : Non
+- Cible
+  - : {{domxref("Document")}}
+- Action par défaut
+  - : Aucune
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Property</th>
-   <th scope="col">Type</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>target</code> {{readonlyInline}}</td>
-   <td>{{domxref("EventTarget")}}</td>
-   <td>The event target (the topmost target in the DOM tree).</td>
-  </tr>
-  <tr>
-   <td><code>type</code> {{readonlyInline}}</td>
-   <td>{{domxref("DOMString")}}</td>
-   <td>The type of event.</td>
-  </tr>
-  <tr>
-   <td><code>bubbles</code> {{readonlyInline}}</td>
-   <td>{{jsxref("Boolean")}}</td>
-   <td>Whether the event normally bubbles or not.</td>
-  </tr>
-  <tr>
-   <td><code>cancelable</code> {{readonlyInline}}</td>
-   <td>{{jsxref("Boolean")}}</td>
-   <td>Whether the event is cancellable or not.</td>
-  </tr>
- </tbody>
-</table>
+| Property                              | Type                                 | Description                                            |
+| ------------------------------------- | ------------------------------------ | ------------------------------------------------------ |
+| `target` {{readonlyInline}}     | {{domxref("EventTarget")}} | The event target (the topmost target in the DOM tree). |
+| `type` {{readonlyInline}}       | {{domxref("DOMString")}}     | The type of event.                                     |
+| `bubbles` {{readonlyInline}}    | {{jsxref("Boolean")}}         | Whether the event normally bubbles or not.             |
+| `cancelable` {{readonlyInline}} | {{jsxref("Boolean")}}         | Whether the event is cancellable or not.               |
 
-<h2 id="Evénements_liés">Evénements liés</h2>
+## Evénements liés
 
-<ul>
- <li><a href="/fr/docs/Mozilla_event_reference/fullscreenchange"><code>fullscreenchange</code></a></li>
-</ul>
+- [`fullscreenchange`](/fr/docs/Mozilla_event_reference/fullscreenchange)
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/DOM/Using_full-screen_mode">Utilisation du mode plein écran</a></li>
-</ul>
+- [Utilisation du mode plein écran](/fr/docs/DOM/Using_full-screen_mode)
diff --git a/files/fr/web/api/document/getboxobjectfor/index.md b/files/fr/web/api/document/getboxobjectfor/index.md
index 5160c98e2a..716afb6997 100644
--- a/files/fr/web/api/document/getboxobjectfor/index.md
+++ b/files/fr/web/api/document/getboxobjectfor/index.md
@@ -9,27 +9,23 @@ tags:
   - Objets
 translation_of: Web/API/Document/getBoxObjectFor
 ---
-<p>{{ ApiRef("DOM") }} {{obsolete_header}}</p>
+{{ ApiRef("DOM") }} {{obsolete_header}}
 
-<p>Renvoie un <code>boxObject</code> (x, y, largeur, hauteur) pour un élément spécifié.</p>
+Renvoie un `boxObject` (x, y, largeur, hauteur) pour un élément spécifié.
 
-<div class="note">
-  <p><strong>Note :</strong> Cette méthode est obsolète. Vous devez utiliser la méthode {{domxref("element.getBoundingClientRect()")}} à la place.</p>
-</div>
+> **Note :** Cette méthode est obsolète. Vous devez utiliser la méthode {{domxref("element.getBoundingClientRect()")}} à la place.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var>boxObject</var> = <var>document</var>.getBoxObjectFor(<var>element</var>);
-</pre>
+    boxObject = document.getBoxObjectFor(element);
 
-<ul>
- <li><code>boxObject</code> est un {{interface("nsIBoxObject")}}.</li>
- <li><code>element</code> est un {{domxref("element","DOMElement")}}</li>
-</ul>
+- `boxObject` est un {{interface("nsIBoxObject")}}.
+- `element` est un {{domxref("element","DOMElement")}}
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush:js">var myDiv = document.getElementById("myDiv"),
+```js
+var myDiv = document.getElementById("myDiv"),
     boxObj = document.getBoxObjectFor (myDiv);
 
 alert (
@@ -37,8 +33,9 @@ alert (
   ", y:" + boxObj.y +
   ", Width:" + boxObj.width +
   ", Height:" + boxObj.height
-);</pre>
+);
+```
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p>Spécifié dans <a href="http://mxr.mozilla.org/mozilla-central/source/dom/interfaces/xul/nsIDOMXULDocument.idl">nsIXULDocument.idl</a></p>
+Spécifié dans [nsIXULDocument.idl](http://mxr.mozilla.org/mozilla-central/source/dom/interfaces/xul/nsIDOMXULDocument.idl)
diff --git a/files/fr/web/api/document/getelementbyid/index.md b/files/fr/web/api/document/getelementbyid/index.md
index eacf9ef0a2..cc1a21f505 100644
--- a/files/fr/web/api/document/getelementbyid/index.md
+++ b/files/fr/web/api/document/getelementbyid/index.md
@@ -10,136 +10,118 @@ tags:
   - Méthodes
 translation_of: Web/API/Document/getElementById
 ---
-<p>{{ ApiRef("DOM") }}</p>
+{{ ApiRef("DOM") }}
 
-<p>La méthode <code><strong>getElementById()</strong></code> de {{domxref("Document")}} renvoie un objet  {{domxref("Element")}} représentant l'élément dont la propriété  {{domxref("Element.id", "id")}} correspond à la chaîne de caractères spécifiée. Étant donné que les ID d'élément doivent être uniques, s'ils sont spécifiés, ils constituent un moyen utile d'accéder rapidement à un élément spécifique.</p>
+La méthode **`getElementById()`** de {{domxref("Document")}} renvoie un objet  {{domxref("Element")}} représentant l'élément dont la propriété  {{domxref("Element.id", "id")}} correspond à la chaîne de caractères spécifiée. Étant donné que les ID d'élément doivent être uniques, s'ils sont spécifiés, ils constituent un moyen utile d'accéder rapidement à un élément spécifique.
 
-<p>Si vous avez besoin d'accéder à un élément qui n'a pas d'ID, vous pouvez utiliser {{domxref("Document.querySelector","querySelector()")}} pour trouver l'élément en utilisant un {{Glossary("CSS selector","sélecteur")}}.</p>
+Si vous avez besoin d'accéder à un élément qui n'a pas d'ID, vous pouvez utiliser {{domxref("Document.querySelector","querySelector()")}} pour trouver l'élément en utilisant un {{Glossary("CSS selector","sélecteur")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js"><em>var element</em> = document.getElementById(<em>id</em>);
-</pre>
+```js
+var element = document.getElementById(id);
+```
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>id</code></dt>
- <dd><p>L'ID (<em>identifiant)</em> de l'élément à localiser. Il est une chaîne de caractères sensible à la casse qui est unique ; un seul élément peut avoir un ID donné.</p></dd>
-</dl>
+- `id`
+  - : L'ID (_identifiant)_ de l'élément à localiser. Il est une chaîne de caractères sensible à la casse qui est unique ; un seul élément peut avoir un ID donné.
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Un objet {{domxref("Element")}} décrivant l'objet élément du DOM correspondant à l'ID spécifié ou <code>null</code> si aucun n'a été trouvé dans le document.</p>
+Un objet {{domxref("Element")}} décrivant l'objet élément du DOM correspondant à l'ID spécifié ou `null` si aucun n'a été trouvé dans le document.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<h3 id="Contenu_HTML">Contenu HTML</h3>
+### Contenu HTML
 
-<pre class="brush: html">&lt;html&gt;
-&lt;head&gt;
-  &lt;title&gt;getElementById example&lt;/title&gt;
-&lt;/head&gt;
-&lt;body&gt;
-  &lt;p id="para"&gt;Some text here&lt;/p&gt;
-  &lt;button onclick="changeColor('blue');"&gt;blue&lt;/button&gt;
-  &lt;button onclick="changeColor('red');"&gt;red&lt;/button&gt;
-&lt;/body&gt;
-&lt;/html&gt;</pre>
+```html
+<html>
+<head>
+  <title>getElementById example</title>
+</head>
+<body>
+  <p id="para">Some text here</p>
+  <button onclick="changeColor('blue');">blue</button>
+  <button onclick="changeColor('red');">red</button>
+</body>
+</html>
+```
 
-<h3 id="Contenu_JavaScript">Contenu JavaScript</h3>
+### Contenu JavaScript
 
-<pre class="brush: js">function changeColor(newColor) {
+```js
+function changeColor(newColor) {
   var elem = document.getElementById('para');
   elem.style.color = newColor;
-}</pre>
+}
+```
 
-<h3 id="Notes">Résultat</h3>
+### Résultat
 
-<p>{{ EmbedLiveSample('Example1', 250, 100) }}</p>
+{{ EmbedLiveSample('Example1', 250, 100) }}
 
-<h2 id="Notes">Notes d'utilisation</h2>
+## Notes d'utilisation
 
-<p>L'écriture de la lettre capitale de « Id » dans le nom de cette méthode <em>doit</em> être respectée pour que le code fonctionne ; <code>getElementByID()</code> n'est pas valide et ne fonctionnera <em>pas</em>, même si elle semble naturelle.</p>
+L'écriture de la lettre capitale de « Id » dans le nom de cette méthode _doit_ être respectée pour que le code fonctionne ; `getElementByID()` n'est pas valide et ne fonctionnera _pas_, même si elle semble naturelle.
 
-<p>Contrairement à d'autres méthodes de recherche d'éléments, comme  {{domxref("Document.querySelector()")}} et {{domxref("Document.querySelectorAll()")}}, <code>getElementById</code> est uniquement disponible comme méthode de l'objet global <code>document</code> et <em>n'est pas</em> disponible sur tous les objets du DOM. Parce que les valeurs d'ID doivent être uniques dans l'ensemble du document, il n'y pas besoin d'avoir une version "locale" de la fonction.</p>
+Contrairement à d'autres méthodes de recherche d'éléments, comme  {{domxref("Document.querySelector()")}} et {{domxref("Document.querySelectorAll()")}}, `getElementById` est uniquement disponible comme méthode de l'objet global `document` et _n'est pas_ disponible sur tous les objets du DOM. Parce que les valeurs d'ID doivent être uniques dans l'ensemble du document, il n'y pas besoin d'avoir une version "locale" de la fonction.
 
-<h2 id="Exemple_2">Exemple</h2>
+## Exemple
 
-<pre class="brush: html">&lt;!doctype html&gt;
-&lt;html&gt;
-&lt;head&gt;
-    &lt;meta charset="UTF-8"&gt;
-    &lt;title&gt;Document&lt;/title&gt;
-&lt;/head&gt;
-&lt;body&gt;
-    &lt;div id="parent-id"&gt;
-        &lt;p&gt;hello word1&lt;/p&gt;
-        &lt;p id="test1"&gt;hello word2&lt;/p&gt;
-        &lt;p&gt;hello word3&lt;/p&gt;
-        &lt;p&gt;hello word4&lt;/p&gt;
-    &lt;/div&gt;
-    &lt;script&gt;
+```html
+<!doctype html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Document</title>
+</head>
+<body>
+    <div id="parent-id">
+        <p>hello word1</p>
+        <p id="test1">hello word2</p>
+        <p>hello word3</p>
+        <p>hello word4</p>
+    </div>
+    <script>
         var parentDOM = document.getElementById('parent-id');
         var test1=parentDOM.getElementById('test1');
-        //erreur de lancement 
-        //TypeError inattendu : parentDOM.getElementById n'est pas une fonction 
-    &lt;/script&gt;
-&lt;/body&gt;
-&lt;/html&gt;</pre>
+        //erreur de lancement
+        //TypeError inattendu : parentDOM.getElementById n'est pas une fonction
+    </script>
+</body>
+</html>
+```
 
-<p>S'il n'y a pas d'élément avec l'<code>id</code> fourni, cette fonction retourne <code>null</code>. A noter que le paramètre <code>id</code> est sensible à la casse, ainsi<code> document.getElementById("Main")</code> retournera <code>null</code> au lieu de l'élément <code>&lt;div id="main"&gt;</code> étant donné que "M" et "m" sont différents pour cette méthode.</p>
+S'il n'y a pas d'élément avec l'`id` fourni, cette fonction retourne `null`. A noter que le paramètre `id` est sensible à la casse, ainsi` document.getElementById("Main")` retournera `null` au lieu de l'élément `<div id="main">` étant donné que "M" et "m" sont différents pour cette méthode.
 
-<p><strong>Les éléments absents du document</strong> ne sont pas cherchés par <code>getElementById()</code>. Quand vous créez un élément et y assignez un ID, vous devez insérer l'élément dans l'arbre du document avec {{domxref("Node.insertBefore()")}} ou une méthode similaire avant de pouvoir y accéder avec <code>getElementById()</code> :</p>
+**Les éléments absents du document** ne sont pas cherchés par `getElementById()`. Quand vous créez un élément et y assignez un ID, vous devez insérer l'élément dans l'arbre du document avec {{domxref("Node.insertBefore()")}} ou une méthode similaire avant de pouvoir y accéder avec `getElementById()` :
 
-<pre class="brush: js">var element = document.createElement('div');
+```js
+var element = document.createElement('div');
 element.id = 'testqq';
-var el = document.getElementById('testqq'); // el vaudra null !</pre>
-
-<p><strong>Les documents non-HTML.</strong> Les implémentations du DOM doivent avoir une information qui précise quels attributs sont de type ID. Un attribut portant le nom « id » n'est pas de type ID tant qu'il n'a pas été explicitement défini ainsi (dans la DTD du document). L'attribut <code>id</code> est défini comme étant de type ID dans les langages courants comme <a href="/fr/XHTML">XHTML</a> ou <a href="/fr/XUL">XUL</a>. Les implémentations ne sachant pas déterminer si les attributs sont de type ID ou non sont supposées renvoyer <code>null</code>.</p>
-
-<h2 id="Sp.C3.A9cification">Spécification</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM1','level-one-html.html#method-getElementById','getElementById')}}</td>
-   <td>{{Spec2('DOM1')}}</td>
-   <td>Définition initiale de l'interface</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Core','core.html#ID-getElBId','getElementById')}}</td>
-   <td>{{Spec2('DOM2 Core')}}</td>
-   <td>Remplace DOM 1</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM3 Core','core.html#ID-getElBId','getElementById')}}</td>
-   <td>{{Spec2('DOM3 Core')}}</td>
-   <td>Remplace DOM 2</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG','#interface-nonelementparentnode','getElementById')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Remplacera DOM 3</td>
-  </tr>
- </tbody>
-</table>
-
-<p>Traduction en français (non normative) : <a href="http://www.yoyodesign.org/doc/w3c/dom2/core/core.html#ID-getElBId">getElementById</a></p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Document.getElementById")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("Document")}} référence pour d'autres méthodes et propriétés que vous pouvez utiliser pour obtenir la référence vers des éléments du document.</li>
- <li>{{domxref("Document.querySelector()")}} pour utiliser des sélecteurs avec des requêtes comme <code>'div.myclass'</code></li>
- <li><a href="/fr/xml/xml:id">xml:id</a> dispose d'une méthode utilitaire permettant à getElementById d'obtenir les valeur 'xml:id' dans les documents XML (comme ceux qui pourraient être renvoyés par des appels Ajax).</li>
-</ul>
+var el = document.getElementById('testqq'); // el vaudra null !
+```
+
+**Les documents non-HTML.** Les implémentations du DOM doivent avoir une information qui précise quels attributs sont de type ID. Un attribut portant le nom « id » n'est pas de type ID tant qu'il n'a pas été explicitement défini ainsi (dans la DTD du document). L'attribut `id` est défini comme étant de type ID dans les langages courants comme [XHTML](/fr/XHTML) ou [XUL](/fr/XUL). Les implémentations ne sachant pas déterminer si les attributs sont de type ID ou non sont supposées renvoyer `null`.
+
+## Spécification
+
+| Spécification                                                                                                | Statut                           | Commentaire                        |
+| ------------------------------------------------------------------------------------------------------------ | -------------------------------- | ---------------------------------- |
+| {{SpecName('DOM1','level-one-html.html#method-getElementById','getElementById')}} | {{Spec2('DOM1')}}         | Définition initiale de l'interface |
+| {{SpecName('DOM2 Core','core.html#ID-getElBId','getElementById')}}                     | {{Spec2('DOM2 Core')}}     | Remplace DOM 1                     |
+| {{SpecName('DOM3 Core','core.html#ID-getElBId','getElementById')}}                     | {{Spec2('DOM3 Core')}}     | Remplace DOM 2                     |
+| {{SpecName('DOM WHATWG','#interface-nonelementparentnode','getElementById')}}     | {{Spec2('DOM WHATWG')}} | Remplacera DOM 3                   |
+
+Traduction en français (non normative) : [getElementById](http://www.yoyodesign.org/doc/w3c/dom2/core/core.html#ID-getElBId)
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Document.getElementById")}}
+
+## Voir aussi
+
+- {{domxref("Document")}} référence pour d'autres méthodes et propriétés que vous pouvez utiliser pour obtenir la référence vers des éléments du document.
+- {{domxref("Document.querySelector()")}} pour utiliser des sélecteurs avec des requêtes comme `'div.myclass'`
+- [xml:id](/fr/xml/xml:id) dispose d'une méthode utilitaire permettant à getElementById d'obtenir les valeur 'xml:id' dans les documents XML (comme ceux qui pourraient être renvoyés par des appels Ajax).
diff --git a/files/fr/web/api/document/getelementsbyclassname/index.md b/files/fr/web/api/document/getelementsbyclassname/index.md
index 43ff0fb18a..02659c2a50 100644
--- a/files/fr/web/api/document/getelementsbyclassname/index.md
+++ b/files/fr/web/api/document/getelementsbyclassname/index.md
@@ -8,85 +8,79 @@ tags:
   - Reference
 translation_of: Web/API/Document/getElementsByClassName
 ---
-<p>{{APIRef("DOM")}}</p>
+{{APIRef("DOM")}}
 
-<p>Renvoie un objet de type tableau de tous les éléments enfants qui ont tous les noms de classe donnés. Lorsqu'il est appelé sur l'objet document, le document complet est recherché, y compris le nœud racine. Vous pouvez également appeler {{domxref ("Element.getElementsByClassName", "getElementsByClassName ()")}} sur n'importe quel élément; il retournera uniquement les éléments qui sont les descendants de l'élément racine spécifié avec les noms de classes donnés.</p>
+Renvoie un objet de type tableau de tous les éléments enfants qui ont tous les noms de classe donnés. Lorsqu'il est appelé sur l'objet document, le document complet est recherché, y compris le nœud racine. Vous pouvez également appeler {{domxref ("Element.getElementsByClassName", "getElementsByClassName ()")}} sur n'importe quel élément; il retournera uniquement les éléments qui sont les descendants de l'élément racine spécifié avec les noms de classes donnés.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var>var elements</var> = document.getElementsByClassName(<em>names</em>); // or:
-<var>var elements</var> = rootElement.getElementsByClassName(<em>names</em>);</pre>
+    var elements = document.getElementsByClassName(names); // or:
+    var elements = rootElement.getElementsByClassName(names);
 
-<ul>
- <li><var>elements</var> est une {{domxref ("HTMLCollection")}} des éléments trouvés.</li>
- <li><var>names</var> est une chaîne représentant le nom de la classe des éléments à trouver.</li>
- <li>getElementsByClassName peut être appelé sur n'importe quel élément, pas seulement sur le document. L'élément sur lequel il est appelé sera utilisé comme racine de la recherche.</li>
-</ul>
+- _elements_ est une {{domxref ("HTMLCollection")}} des éléments trouvés.
+- _names_ est une chaîne représentant le nom de la classe des éléments à trouver.
+- getElementsByClassName peut être appelé sur n'importe quel élément, pas seulement sur le document. L'élément sur lequel il est appelé sera utilisé comme racine de la recherche.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Trouve tous les éléments ayant la classe « test » :</p>
+Trouve tous les éléments ayant la classe « test » :
 
-<pre class="eval"> document.getElementsByClassName('test')
-</pre>
+     document.getElementsByClassName('test')
 
-<p>Trouve tous les éléments ayant les classes « rouge » et « test » :</p>
+Trouve tous les éléments ayant les classes « rouge » et « test » :
 
-<pre class="eval"> document.getElementsByClassName('rouge test')
-</pre>
+     document.getElementsByClassName('rouge test')
 
-<p>Trouve tous les éléments qui ont la classe « test » à l'intérieur d'un élément ayant l'ID « main » :</p>
+Trouve tous les éléments qui ont la classe « test » à l'intérieur d'un élément ayant l'ID « main » :
 
-<pre class="eval"> document.getElementById('main').getElementsByClassName('test')
-</pre>
+     document.getElementById('main').getElementsByClassName('test')
 
-<p>Nous pouvons également utiliser les méthodes de Array.prototype sur toute {{domxref ("HTMLCollection")}} en passant HTMLCollection comme valeur de la méthode. Ici, nous allons trouver tous les éléments div qui ont une classe de 'test':</p>
+Nous pouvons également utiliser les méthodes de Array.prototype sur toute {{domxref ("HTMLCollection")}} en passant HTMLCollection comme valeur de la méthode. Ici, nous allons trouver tous les éléments div qui ont une classe de 'test':
 
-<pre class="brush: js">var testElements = document.getElementsByClassName('test');
+```js
+var testElements = document.getElementsByClassName('test');
 var testDivs = Array.prototype.filter.call(testElements, function(testElement){
     return testElement.nodeName === 'DIV';
-});</pre>
-
-<p>XXX writeme == Notes == Une méthode semblable existe pour &lt;code&gt;Element&lt;/code&gt;</p>
-
-<h2 id="Sp.C3.A9cification">Obtenir la classe  des éléments test</h2>
-
-<p>C'est la méthode d'opération la plus couramment utilisée.</p>
-
-<pre class="brush: html">&lt;!doctype html&gt;
-&lt;html&gt;
-&lt;head&gt;
-    &lt;meta charset="UTF-8"&gt;
-    &lt;title&gt;Document&lt;/title&gt;
-&lt;/head&gt;
-&lt;body&gt;
-    &lt;div id="parent-id"&gt;
-        &lt;p&gt;hello word1&lt;/p&gt;
-        &lt;p class="test"&gt;hello word2&lt;/p&gt;
-        &lt;p &gt;hello word3&lt;/p&gt;
-        &lt;p&gt;hello word4&lt;/p&gt;
-    &lt;/div&gt;
-    &lt;script&gt;
+});
+```
+
+XXX writeme == Notes == Une méthode semblable existe pour \<code>Element\</code>
+
+## Obtenir la classe  des éléments test
+
+C'est la méthode d'opération la plus couramment utilisée.
+
+```html
+<!doctype html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Document</title>
+</head>
+<body>
+    <div id="parent-id">
+        <p>hello word1</p>
+        <p class="test">hello word2</p>
+        <p >hello word3</p>
+        <p>hello word4</p>
+    </div>
+    <script>
         var parentDOM = document.getElementById("parent-id");
 
         var test=parentDOM.getElementsByClassName("test");//test is not target element
         console.log(test);//HTMLCollection[1]
 
         var testTarget=parentDOM.getElementsByClassName("test")[0];//here , this element is target
-        console.log(testTarget);//&lt;p class="test"&gt;hello word2&lt;/p&gt;
-    &lt;/script&gt;
-&lt;/body&gt;
-&lt;/html&gt;</pre>
+        console.log(testTarget);//<p class="test">hello word2</p>
+    </script>
+</body>
+</html>
+```
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
+{{Compat("api.Document.getElementsByClassName")}}
 
-<p>{{Compat("api.Document.getElementsByClassName")}}</p>
+## Spécification
 
-
-
-<h2 id="Specification">Spécification</h2>
-
-<ul>
- <li><a href="https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-document-getelementsbyclassname">W3C: getElementsByClassName</a></li>
-</ul>
+- [W3C: getElementsByClassName](https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-document-getelementsbyclassname)
diff --git a/files/fr/web/api/document/getelementsbyname/index.md b/files/fr/web/api/document/getelementsbyname/index.md
index d2087a0d22..dd734d067d 100644
--- a/files/fr/web/api/document/getelementsbyname/index.md
+++ b/files/fr/web/api/document/getelementsbyname/index.md
@@ -9,78 +9,56 @@ tags:
   - Méthodes
 translation_of: Web/API/Document/getElementsByName
 ---
-<p>{{ ApiRef("DOM") }}</p>
+{{ ApiRef("DOM") }}
 
-<p>Renvoie une liste des éléments portant un {{domxref("element.name","name")}} donné dans le document (X)HTML.</p>
+Renvoie une liste des éléments portant un {{domxref("element.name","name")}} donné dans le document (X)HTML.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="eval"><em>elements</em> = document.getElementsByName(<em>name</em>)
-</pre>
+    elements = document.getElementsByName(name)
 
-<ul>
- <li><code>elements</code> est une collection de {{domxref("NodeList")}}</li>
- <li><code>name</code> est la valeur de l'attribut <code>name</code> des éléments.</li>
-</ul>
+- `elements` est une collection de {{domxref("NodeList")}}
+- `name` est la valeur de l'attribut `name` des éléments.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush:html">&lt;!DOCTYPE html&gt;
-&lt;html lang="en"&gt;
-&lt;head&gt;
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
  ...
-&lt;/head&gt;
+</head>
 
-&lt;body&gt;
-&lt;form name="up"&gt;&lt;input type="text"&gt;&lt;/form&gt;
-&lt;div name="down"&gt;&lt;input type="text"&gt;&lt;/div&gt;
+<body>
+<form name="up"><input type="text"></form>
+<div name="down"><input type="text"></div>
 
-&lt;script&gt;
+<script>
 var up_forms = document.getElementsByName("up");
 console.log(up_forms[0].tagName); // retourne "FORM"
-&lt;/script&gt;
-&lt;/body&gt;
-&lt;/html&gt;</pre>
-
-<h2 id="Notes">Notes</h2>
-
-<p>L'attribut <code><a href="/fr/docs/Web/API/Element/name">name</a></code> est uniquement applicable aux documents (X) HTML. La méthode renvoie une collection  {{domxref("NodeList")}}  en cours qui contient tous les éléments avec une valeur donnée pour l'attribut name, tels que  {{htmlelement("meta")}}  ou  {{htmlelement("object")}}  ou même si le nom est placé sur des éléments qui ne supportent pas du tout un attribut <code>name</code>.</p>
-
-<p>La méthode <strong>getElementsByName</strong> fonctionne différemment dans différents navigateurs. Dans IE &lt;10, la méthode getElementsByName () renvoie également les éléments qui ont un attribut id avec la valeur spécifiée. Vous devriez donc faire attention à ne pas utiliser la même chaîne pour le nom et l'identifiant.</p>
-
-<h2 id="Sp.C3.A9cification">Spécifications</h2>
-
-<ul>
- <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-71555259">DOM Level 2 HTML : getElementsByName</a> — <a href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-71555259">traduction en français</a> (non normative)</li>
- <li><a href="http://www.whatwg.org/html/#dom-document-getelementsbyname">HTML5 : getElementsByName</a></li>
-</ul>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', '#dom-document-getelementsbyname', "Document.getElementsByName()")}}</td>
-   <td>{{ Spec2('HTML WHATWG') }}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName("DOM2 HTML", "html.html#ID-71555259", "Document.getElementsByName()")}}</td>
-   <td>{{Spec2("DOM2 HTML")}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="See_also">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("document.getElementById()")}} pour retourner une référence à un élément par son ID</li>
- <li>{{domxref("document.getElementsByTagName()")}} pour renvoyer les références sur les éléments avec la balise de nom donnée</li>
- <li>{{domxref("document.querySelector()")}} pour des sélecteurs par des requêtes comme <code>'div.myclass'</code></li>
-</ul>
-
-<p> </p>
+</script>
+</body>
+</html>
+```
+
+## Notes
+
+L'attribut [`name`](/fr/docs/Web/API/Element/name) est uniquement applicable aux documents (X) HTML. La méthode renvoie une collection {{domxref("NodeList")}} en cours qui contient tous les éléments avec une valeur donnée pour l'attribut name, tels que {{htmlelement("meta")}} ou {{htmlelement("object")}} ou même si le nom est placé sur des éléments qui ne supportent pas du tout un attribut `name`.
+
+La méthode **getElementsByName** fonctionne différemment dans différents navigateurs. Dans IE <10, la méthode getElementsByName () renvoie également les éléments qui ont un attribut id avec la valeur spécifiée. Vous devriez donc faire attention à ne pas utiliser la même chaîne pour le nom et l'identifiant.
+
+## Spécifications
+
+- [DOM Level 2 HTML : getElementsByName](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-71555259) — [traduction en français](http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-71555259) (non normative)
+- [HTML5 : getElementsByName](http://www.whatwg.org/html/#dom-document-getelementsbyname)
+
+| Spécification                                                                                                                | Statut                               | Commentaire         |
+| ---------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ------------------- |
+| {{SpecName('HTML WHATWG', '#dom-document-getelementsbyname', "Document.getElementsByName()")}} | {{ Spec2('HTML WHATWG') }} |                     |
+| {{SpecName("DOM2 HTML", "html.html#ID-71555259", "Document.getElementsByName()")}}                 | {{Spec2("DOM2 HTML")}}         | Définition initiale |
+
+## Voir aussi
+
+- {{domxref("document.getElementById()")}} pour retourner une référence à un élément par son ID
+- {{domxref("document.getElementsByTagName()")}} pour renvoyer les références sur les éléments avec la balise de nom donnée
+- {{domxref("document.querySelector()")}} pour des sélecteurs par des requêtes comme `'div.myclass'`
diff --git a/files/fr/web/api/document/getelementsbytagname/index.md b/files/fr/web/api/document/getelementsbytagname/index.md
index b90d19fbe0..5ba9a313ba 100644
--- a/files/fr/web/api/document/getelementsbytagname/index.md
+++ b/files/fr/web/api/document/getelementsbytagname/index.md
@@ -8,37 +8,32 @@ tags:
   - Méthodes
 translation_of: Web/API/Document/getElementsByTagName
 ---
-<div>{{ ApiRef("DOM") }}</div>
+{{ ApiRef("DOM") }}
 
-<div> </div>
+Renvoie une {{domxref ("HTMLCollection")}} des éléments avec le nom de balise donné. Le document complet est recherché, y compris le nœud racine. Le `HTMLCollection` renvoyée est en direct, ce qui signifie qu'elle se met à jour automatiquement pour rester synchronisée avec l'arborescence DOM sans avoir à rappeler document.getElementsByTagName ().
 
-<p>Renvoie une {{domxref ("HTMLCollection")}} des éléments avec le nom de balise donné. Le document complet est recherché, y compris le nœud racine. Le <code>HTMLCollection</code> renvoyée est en direct, ce qui signifie qu'elle se met à jour automatiquement pour rester synchronisée avec l'arborescence DOM sans avoir à rappeler document.getElementsByTagName ().</p>
+## Syntaxe
 
-<h2 id="Syntaxe">Syntaxe</h2>
+    var elements = document.getElementsByTagName(name);
 
-<pre class="syntaxbox">var <var>elements</var> = document.getElementsByTagName(<em>name</em>);</pre>
+- `elements` est une liste de nœuds (`NodeList`) des éléments trouvés dans l'ordre dans lequel ils apparaissent dans l'arbre.
+- `nom` est une chaîne représentant le nom des éléments. La chaîne spéciale `"*"` représente « tous les éléments ».
 
-<ul>
- <li><code>elements</code> est une liste de nœuds (<code>NodeList</code>) des éléments trouvés dans l'ordre dans lequel ils apparaissent dans l'arbre.</li>
- <li><code>nom</code> est une chaîne représentant le nom des éléments. La chaîne spéciale <code>"*"</code> représente « tous les éléments ».</li>
-</ul>
+> **Note :** [La dernière spécification W3C](https://dom.spec.whatwg.org/) dit que  `elements` est une   `HTMLCollection` ; cependant cette méthode renvoie une  {{domxref("NodeList")}} dans les navigateurs WebKit. Voir  {{bug(14869)}} pour plus de détails.
 
-<div class="note">
-<p><strong>Note :</strong> <a href="https://dom.spec.whatwg.org/">La dernière spécification W3C</a> dit que  <code>elements</code> est une   <code>HTMLCollection</code> ; cependant cette méthode renvoie une  {{domxref("NodeList")}} dans les navigateurs WebKit. Voir  {{bug(14869)}} pour plus de détails.</p>
-</div>
+## Exemple
 
-<h2 id="Exemple">Exemple</h2>
+Dans l'exemple suivant, `getElementsByTagName()` commence à partir d'un élément parent particulier et effectue une recherche descendante récursive dans le DOM à partir de cet élément parent, en créant une collection de tous les éléments descendants qui correspondent au paramètre de `name`. Cela démontre à la fois `document.getElementsByTagName()` et son homologue {{domxref ("Element.getElementsByTagName ()")}}, qui lance la recherche sur un élément spécifique dans l'arbre DOM.
 
-<p>Dans l'exemple suivant, <code>getElementsByTagName()</code> commence à partir d'un élément parent particulier et effectue une recherche descendante récursive dans le DOM à partir de cet élément parent, en créant une collection de tous les éléments descendants qui correspondent au paramètre de <code>name</code>. Cela démontre à la fois <code>document.getElementsByTagName()</code> et son homologue {{domxref ("Element.getElementsByTagName ()")}}, qui lance la recherche sur un élément spécifique dans l'arbre DOM.</p>
+Cliquer sur les boutons utilise `getElementsByTagName()` pour compter les éléments de paragraphe descendant d'un parent particulier (le document lui-même ou l'un des éléments {{HTMLElement ("div")}} imbriqués).
 
-<p>Cliquer sur les boutons utilise <code>getElementsByTagName()</code> pour compter les éléments de paragraphe descendant d'un parent particulier (le document lui-même ou l'un des éléments {{HTMLElement ("div")}} imbriqués).</p>
-
-<pre class="brush:html">&lt;!DOCTYPE html&gt;
-&lt;html lang="en"&gt;
-&lt;head&gt;
-  &lt;meta charset="UTF-8" /&gt;
-  &lt;title&gt;getElementsByTagName example&lt;/title&gt;
-  &lt;script&gt;
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>getElementsByTagName example</title>
+  <script>
     function getAllParaElems() {
       var allParas = document.getElementsByTagName('p');
       var num = allParas.length;
@@ -58,56 +53,53 @@ translation_of: Web/API/Document/getElementsByTagName
       var num = div2Paras.length;
       alert('There are ' + num + ' paragraph in #div2');
     }
-  &lt;/script&gt;
-&lt;/head&gt;
-&lt;body style="border: solid green 3px"&gt;
-  &lt;p&gt;Some outer text&lt;/p&gt;
-  &lt;p&gt;Some outer text&lt;/p&gt;
+  </script>
+</head>
+<body style="border: solid green 3px">
+  <p>Some outer text</p>
+  <p>Some outer text</p>
+
+  <div id="div1" style="border: solid blue 3px">
+    <p>Some div1 text</p>
+    <p>Some div1 text</p>
+    <p>Some div1 text</p>
 
-  &lt;div id="div1" style="border: solid blue 3px"&gt;
-    &lt;p&gt;Some div1 text&lt;/p&gt;
-    &lt;p&gt;Some div1 text&lt;/p&gt;
-    &lt;p&gt;Some div1 text&lt;/p&gt;
+    <div id="div2" style="border: solid red 3px">
+      <p>Some div2 text</p>
+      <p>Some div2 text</p>
+    </div>
+  </div>
 
-    &lt;div id="div2" style="border: solid red 3px"&gt;
-      &lt;p&gt;Some div2 text&lt;/p&gt;
-      &lt;p&gt;Some div2 text&lt;/p&gt;
-    &lt;/div&gt;
-  &lt;/div&gt;
+  <p>Some outer text</p>
+  <p>Some outer text</p>
 
-  &lt;p&gt;Some outer text&lt;/p&gt;
-  &lt;p&gt;Some outer text&lt;/p&gt;
+  <button onclick="getAllParaElems();">
+    show all p elements in document</button><br />
 
-  &lt;button onclick="getAllParaElems();"&gt;
-    show all p elements in document&lt;/button&gt;&lt;br /&gt;
+  <button onclick="div1ParaElems();">
+    show all p elements in div1 element</button><br />
 
-  &lt;button onclick="div1ParaElems();"&gt;
-    show all p elements in div1 element&lt;/button&gt;&lt;br /&gt;
+  <button onclick="div2ParaElems();">
+    show all p elements in div2 element</button>
 
-  &lt;button onclick="div2ParaElems();"&gt;
-    show all p elements in div2 element&lt;/button&gt;
+</body>
+</html>
+```
 
-&lt;/body&gt;
-&lt;/html&gt;</pre>
+## Notes
 
-<h2 id="Sp.C3.A9cification">Notes</h2>
+Lorsqu'elle est appelée sur un document HTML, `getElementsByTagName()` classe son argument avant de continuer. Cela n'est pas souhaitable lorsque vous essayez de faire correspondre des éléments camelCase SVG dans un sous-arbre dans un document HTML. {{Domxref ("document.getElementsByTagNameNS ()")}} est utile dans ce cas. Voir aussi {{Bug (499656)}}.
 
-<p>Lorsqu'elle est appelée sur un document HTML, <code>getElementsByTagName()</code> classe son argument avant de continuer. Cela n'est pas souhaitable lorsque vous essayez de faire correspondre des éléments camelCase SVG dans un sous-arbre dans un document HTML. {{Domxref ("document.getElementsByTagNameNS ()")}} est utile dans ce cas. Voir aussi {{Bug (499656)}}.<br>
- <br>
- <code>document.getElementsByTagName()</code> est similaire à {{domxref ("element.getElementsByTagName ()")}}, sauf que sa recherche englobe tout le document.</p>
+`document.getElementsByTagName()` est similaire à {{domxref ("element.getElementsByTagName ()")}}, sauf que sa recherche englobe tout le document.
 
-<h2 id="Sp.C3.A9cification">Spécifications</h2>
+## Spécifications
 
-<ul>
- <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-A6C9094">DOM Level 2 Core : getElementsByTagName</a> <small>— <a href="http://www.yoyodesign.org/doc/w3c/dom2/core/core.html#ID-A6C9094">traduction</a> (non normative)</small></li>
- <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#apis-in-html-documents">HTML 5: APIs in HTML documents</a></li>
-</ul>
+- [DOM Level 2 Core : getElementsByTagName](http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-A6C9094) — [traduction](http://www.yoyodesign.org/doc/w3c/dom2/core/core.html#ID-A6C9094) (non normative)
+- [HTML 5: APIs in HTML documents](http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#apis-in-html-documents)
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("Element.getElementsByTagName()")}}</li>
- <li>{{domxref("document.getElementById()")}} pour renvoyer une référence à un élément par son <code>id</code> (<em>identifiant</em>)</li>
- <li>{{domxref("document.getElementsByName()")}} pour renvoyer une référence à un élément par son <code>name</code> (<em>nom</em>)</li>
- <li>{{domxref("document.querySelector()")}} pour les sélecteurs puissants via des requêtes comme <code>'div.myclass'</code></li>
-</ul>
+- {{domxref("Element.getElementsByTagName()")}}
+- {{domxref("document.getElementById()")}} pour renvoyer une référence à un élément par son `id` (_identifiant_)
+- {{domxref("document.getElementsByName()")}} pour renvoyer une référence à un élément par son `name` (_nom_)
+- {{domxref("document.querySelector()")}} pour les sélecteurs puissants via des requêtes comme `'div.myclass'`
diff --git a/files/fr/web/api/document/getelementsbytagnamens/index.md b/files/fr/web/api/document/getelementsbytagnamens/index.md
index a91fcc93bb..c508a93d8f 100644
--- a/files/fr/web/api/document/getelementsbytagnamens/index.md
+++ b/files/fr/web/api/document/getelementsbytagnamens/index.md
@@ -10,41 +10,37 @@ tags:
   - XPath
 translation_of: Web/API/Document/getElementsByTagNameNS
 ---
-<p>{{ ApiRef("DOM") }}</p>
+{{ ApiRef("DOM") }}
 
-<p>{{ fx_minversion_note("3.6","Voir la <a href='\"/en/DOM/element.getElementsByTagNameNS#Notes\"'>section Notes de element.getElementsByTagNameNS</a> pour les changements qui s'appliquent aussi à cet API dans Firefox 3.6.") }}</p>
+{{ fx_minversion_note("3.6","Voir la <a href='\"/en/DOM/element.getElementsByTagNameNS#Notes\"'>section Notes de element.getElementsByTagNameNS</a> pour les changements qui s'appliquent aussi à cet API dans Firefox 3.6.") }}
 
-<p>Renvoie une liste d'éléments avec la balise de nom donnée appartenant à l'espace de noms donné. Le document complet est recherché, y compris le noeud racine.</p>
+Renvoie une liste d'éléments avec la balise de nom donnée appartenant à l'espace de noms donné. Le document complet est recherché, y compris le noeud racine.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="eval"><em>elements</em> = document.getElementsByTagNameNS(<em>namespace</em>,<em>name</em>)
-</pre>
+    elements = document.getElementsByTagNameNS(namespace,name)
 
-<ul>
- <li><code>elements</code> est une {{domxref("NodeList")}} (<em>liste de noeud</em>) directe (mais voir le note ci-dessous) d'éléments trouvés dans l'ordre de leur apparition dans l'arbre.</li>
- <li><code>namespace</code> l'URI d'espace de noms des éléments à rechercher (voir <code><a href="/en/DOM/Node.namespaceURI">element.namespaceURI</a></code>).</li>
- <li><code>name</code> est, soit le nom local des éléments à rechercher, soit la valeur spéciale <code>"*"</code> pour tous les éléments (voir <code><a href="/en/DOM/Node.localName">element.localName</a></code>).</li>
-</ul>
+- `elements` est une {{domxref("NodeList")}} (_liste de noeud_) directe (mais voir le note ci-dessous) d'éléments trouvés dans l'ordre de leur apparition dans l'arbre.
+- `namespace` l'URI d'espace de noms des éléments à rechercher (voir [`element.namespaceURI`](/en/DOM/Node.namespaceURI)).
+- `name` est, soit le nom local des éléments à rechercher, soit la valeur spéciale `"*"` pour tous les éléments (voir [`element.localName`](/en/DOM/Node.localName)).
 
-<div class="note">
-  <p><strong>Note :</strong> Tandis que la spécification W3C indique que les <code>elements</code> sont des <code>NodeList</code>, cette méthode renvoie une {{domxref("HTMLCollection")}} dans Gecko et Internet Explorer. Opera retourne une <code>NodeList</code>, mais avec une méthode implémentée <code>namedItem</code>, ce qui la rend similaire à une <code>HTMLCollection</code>. À partir de Janvier 2012, dans les navigateurs WebKit seulement, la valeur retournée est une pure <code>NodeList</code>. Voir <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=14869">bug 14869</a> pour plus de détails.</p>
-</div>
+> **Note :** Tandis que la spécification W3C indique que les `elements` sont des `NodeList`, cette méthode renvoie une {{domxref("HTMLCollection")}} dans Gecko et Internet Explorer. Opera retourne une `NodeList`, mais avec une méthode implémentée `namedItem`, ce qui la rend similaire à une `HTMLCollection`. À partir de Janvier 2012, dans les navigateurs WebKit seulement, la valeur retournée est une pure `NodeList`. Voir [bug 14869](https://bugzilla.mozilla.org/show_bug.cgi?id=14869) pour plus de détails.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<p>Dans l'exemple suivant, <code>getElementsByTagNameNS</code> commence à partir d'un élément parent particulier et cherche dans le DOM récursivement de haut en bas à partir de cet élément parent, les éléments enfants correspondant au paramètre <code>name</code> de la balise.</p>
+Dans l'exemple suivant, `getElementsByTagNameNS` commence à partir d'un élément parent particulier et cherche dans le DOM récursivement de haut en bas à partir de cet élément parent, les éléments enfants correspondant au paramètre `name` de la balise.
 
-<p>Notez que lorsque le noeud sur lequel <code>getElementsByTagName</code> est invoqué n'est pas un noeud <code>document</code>, la méthode <a href="/fr/docs/Web/API/Element/getElementsByTagNameNS">element.getElementsByTagNameNS</a> est en fait utilisée.</p>
+Notez que lorsque le noeud sur lequel `getElementsByTagName` est invoqué n'est pas un noeud `document`, la méthode [element.getElementsByTagNameNS](/fr/docs/Web/API/Element/getElementsByTagNameNS) est en fait utilisée.
 
-<p>Pour utiliser l'exemple suivant, il suffit de le copier/coller dans un nouveau fichier enregistré avec l'extension .xhtml.</p>
+Pour utiliser l'exemple suivant, il suffit de le copier/coller dans un nouveau fichier enregistré avec l'extension .xhtml.
 
-<pre class="brush: html">http://www.w3.org/1999/xhtml"&gt;
+```html
+http://www.w3.org/1999/xhtml">
 
-&lt;head&gt;
-&lt;title&gt;getElementsByTagNameNS example&lt;/title&gt;
+<head>
+<title>getElementsByTagNameNS example</title>
 
-&lt;script type="text/javascript"&gt;
+<script type="text/javascript">
 
 function getAllParaElems()
 {
@@ -52,7 +48,7 @@ function getAllParaElems()
 
   var num = allParas.length;
 
-  alert("There are " + num + " &amp;lt;p&amp;gt; elements in this document");
+  alert("There are " + num + " &lt;p&gt; elements in this document");
 }
 
 
@@ -63,7 +59,7 @@ function div1ParaElems()
 
   var num = div1Paras.length;
 
-  alert("There are " + num + " &amp;lt;p&amp;gt; elements in div1 element");
+  alert("There are " + num + " &lt;p&gt; elements in div1 element");
 }
 
 
@@ -74,48 +70,49 @@ function div2ParaElems()
 
   var num = div2Paras.length;
 
-  alert("There are " + num + " &amp;lt;p&amp;gt; elements in div2 element");
+  alert("There are " + num + " &lt;p&gt; elements in div2 element");
 }
 
-&lt;/script&gt;
-&lt;/head&gt;
+</script>
+</head>
 
-&lt;body style="border: solid green 3px"&gt;
-&lt;p&gt;Some outer text&lt;/p&gt;
-&lt;p&gt;Some outer text&lt;/p&gt;
+<body style="border: solid green 3px">
+<p>Some outer text</p>
+<p>Some outer text</p>
 
-  &lt;div id="div1" style="border: solid blue 3px"&gt;
-    &lt;p&gt;Some div1 text&lt;/p&gt;
-    &lt;p&gt;Some div1 text&lt;/p&gt;
-    &lt;p&gt;Some div1 text&lt;/p&gt;
+  <div id="div1" style="border: solid blue 3px">
+    <p>Some div1 text</p>
+    <p>Some div1 text</p>
+    <p>Some div1 text</p>
 
-    &lt;div id="div2" style="border: solid red 3px"&gt;
-    &lt;p&gt;Some div2 text&lt;/p&gt;
-    &lt;p&gt;Some div2 text&lt;/p&gt;
-    &lt;/div&gt;
-  &lt;/div&gt;
+    <div id="div2" style="border: solid red 3px">
+    <p>Some div2 text</p>
+    <p>Some div2 text</p>
+    </div>
+  </div>
 
-&lt;p&gt;Some outer text&lt;/p&gt;
-&lt;p&gt;Some outer text&lt;/p&gt;
+<p>Some outer text</p>
+<p>Some outer text</p>
 
-&lt;button onclick="getAllParaElems();"&gt;
- show all p elements in document&lt;/button&gt;&lt;br /&gt;
+<button onclick="getAllParaElems();">
+ show all p elements in document</button><br />
 
-&lt;button onclick="div1ParaElems();"&gt;
- show all p elements in div1 element&lt;/button&gt;&lt;br /&gt;
+<button onclick="div1ParaElems();">
+ show all p elements in div1 element</button><br />
 
-&lt;button onclick="div2ParaElems();"&gt;
- show all p elements in div2 element&lt;/button&gt;
+<button onclick="div2ParaElems();">
+ show all p elements in div2 element</button>
 
-&lt;/body&gt;
-&lt;/html&gt;
-</pre>
+</body>
+</html>
+```
 
-<h2 id="Potential_Workaround_for_other_browsers_which_do_not_support">Solution de contournement potentielle pour les navigateurs qui ne prennent pas en charge XPath</h2>
+## Solution de contournement potentielle pour les navigateurs qui ne prennent pas en charge XPath
 
-<p>Si le navigateur souhaité ne supporte pas XPath, une autre approche (comme traverser le DOM à travers tous ses enfants, identifier toutes les instances de @xmlns, etc.) serait nécessaire pour trouver toutes les balises avec le nom local et l'espace de noms, mais XPath est beaucoup plus rapide. (Pour adapter à Explorer, on pourrait appeler un wrapper XPath au lieu du XPath dans la fonction ci-dessous (comme Explorer supporte XPath avec une API différente), comme <a href="http://www.davidflanagan.com/javascript5/display.php?n=21-10&amp;f=21/10.js">cette classe wrapper</a>.)</p>
+Si le navigateur souhaité ne supporte pas XPath, une autre approche (comme traverser le DOM à travers tous ses enfants, identifier toutes les instances de @xmlns, etc.) serait nécessaire pour trouver toutes les balises avec le nom local et l'espace de noms, mais XPath est beaucoup plus rapide. (Pour adapter à Explorer, on pourrait appeler un wrapper XPath au lieu du XPath dans la fonction ci-dessous (comme Explorer supporte XPath avec une API différente), comme [cette classe wrapper](http://www.davidflanagan.com/javascript5/display.php?n=21-10&f=21/10.js).)
 
-<pre class="brush: js">function getElementsByTagNameNSWrapper (ns, elName, doc, context) {
+```js
+function getElementsByTagNameNSWrapper (ns, elName, doc, context) {
 	if (!doc) {
 		doc = document;
 	}
@@ -126,13 +123,13 @@ function div2ParaElems()
 	var result = doc.evaluate('//*[local-name()="'+elName+'" and namespace-uri() = "'+ns+'"]', context, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
 
         var a = [];
-        for(var i = 0; i &lt; result.snapshotLength; i++) {
+        for(var i = 0; i < result.snapshotLength; i++) {
             a[i] = result.snapshotItem(i);
         }
         return a;
 }
-</pre>
+```
 
-<h2 id="Specification">Spécifications</h2>
+## Spécifications
 
-<p><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-getElBTNNS">DOM Level 2 Core: Document.getElementsByTagNameNS</a></p>
+[DOM Level 2 Core: Document.getElementsByTagNameNS](http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-getElBTNNS)
diff --git a/files/fr/web/api/document/getselection/index.md b/files/fr/web/api/document/getselection/index.md
index e485df22ae..270449529f 100644
--- a/files/fr/web/api/document/getselection/index.md
+++ b/files/fr/web/api/document/getselection/index.md
@@ -11,6 +11,6 @@ translation_of: Web/API/DocumentOrShadowRoot/getSelection
 translation_of_original: Web/API/Document/getSelection
 original_slug: Web/API/DocumentOrShadowRoot/getSelection
 ---
-<p>{{APIRef("DOM")}}</p>
+{{APIRef("DOM")}}
 
-<p>Cette méthode fonctionne de manière identique à la méthode {{domxref ("Window.getSelection()")}} ; elle renvoie un objet {{domxref ("Selection")}} représentant le texte actuellement sélectionné dans le document.</p>
+Cette méthode fonctionne de manière identique à la méthode {{domxref ("Window.getSelection()")}} ; elle renvoie un objet {{domxref ("Selection")}} représentant le texte actuellement sélectionné dans le document.
diff --git a/files/fr/web/api/document/hasfocus/index.md b/files/fr/web/api/document/hasfocus/index.md
index fb6088c0a9..e57571e2f3 100644
--- a/files/fr/web/api/document/hasfocus/index.md
+++ b/files/fr/web/api/document/hasfocus/index.md
@@ -9,34 +9,32 @@ tags:
   - Reference
 translation_of: Web/API/Document/hasFocus
 ---
-<p>{{ ApiRef() }}</p>
+{{ ApiRef() }}
 
-<p>La méthode <code><strong>Document.hasFocus()</strong></code> retourne une valeur  {{jsxref("Boolean")}} <code>true</code> <em>(vrai)</em> indiquant si le document ou tout élément à l'intérieur du document a le focus. Cette méthode peut être utilisée pour déterminer si l'élément actif d'un document a le focus.</p>
+La méthode **`Document.hasFocus()`** retourne une valeur  {{jsxref("Boolean")}} `true` _(vrai)_ indiquant si le document ou tout élément à l'intérieur du document a le focus. Cette méthode peut être utilisée pour déterminer si l'élément actif d'un document a le focus.
 
-<div class="note">
-<p><strong>Note :</strong> Lors de la visualisation d'un document, un élément avec focus est toujours l'élément actif dans le document, mais un élément actif n'a pas nécessairement le focus. Par exemple, un élément actif dans une fenêtre contextuelle qui n'est pas le premier plan n'a pas de focus.</p>
-</div>
+> **Note :** Lors de la visualisation d'un document, un élément avec focus est toujours l'élément actif dans le document, mais un élément actif n'a pas nécessairement le focus. Par exemple, un élément actif dans une fenêtre contextuelle qui n'est pas le premier plan n'a pas de focus.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="eval">focused = document.hasFocus();
-</pre>
+    focused = document.hasFocus();
 
-<h3 id="Exemple">Valeur retournée</h3>
+### Valeur retournée
 
-<p><code>false</code> <em>(faux)</em> si l'élément actif dans le document n'a pas de focus ; <code>true</code><em> (vrai)</em> si l'élément actif dans le document a le focus.</p>
+`false` _(faux)_ si l'élément actif dans le document n'a pas de focus ; `true` _(vrai)_ si l'élément actif dans le document a le focus.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush:html">&lt;!DOCTYPE html&gt;
-&lt;html lang="en"&gt;
-&lt;head&gt;
-&lt;meta charset="UTF-8" /&gt;
-&lt;title&gt;TEST&lt;/title&gt;
-&lt;style&gt;
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8" />
+<title>TEST</title>
+<style>
 #message { font-weight: bold; }
-&lt;/style&gt;
-&lt;script&gt;
+</style>
+<script>
 setInterval( checkPageFocus, 200 );
 
 function checkPageFocus() {
@@ -56,40 +54,26 @@ function openWindow() {
     "width=640,height=300,left=150,top=260"
   );
 }
-&lt;/script&gt;
-&lt;/head&gt;
-&lt;body&gt;
-  &lt;h1&gt;JavaScript hasFocus example&lt;/h1&gt;
-  &lt;div id="message"&gt;Waiting for user action&lt;/div&gt;
-  &lt;div&gt;&lt;button onclick="openWindow()"&gt;Open a new window&lt;/button&gt;&lt;/div&gt;
-&lt;/body&gt;
-&lt;/html&gt;</pre>
-
-<h2 id="Specifications">Spécification</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', 'interaction.html#dom-document-hasfocus', 'Document.hasFocus()')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Document.hasFocus")}}</p>
-
-<h2 id="See_also">Voir aussi</h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/API/Page_Visibility_API">Utilisation de l'API de visibilité des pages</a></li>
-</ul>
+</script>
+</head>
+<body>
+  <h1>JavaScript hasFocus example</h1>
+  <div id="message">Waiting for user action</div>
+  <div><button onclick="openWindow()">Open a new window</button></div>
+</body>
+</html>
+```
+
+## Spécification
+
+| Spécification                                                                                                                | Statut                           | Commentaire         |
+| ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- |
+| {{SpecName('HTML WHATWG', 'interaction.html#dom-document-hasfocus', 'Document.hasFocus()')}} | {{Spec2('HTML WHATWG')}} | Définition initiale |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Document.hasFocus")}}
+
+## Voir aussi
+
+- [Utilisation de l'API de visibilité des pages](/fr/docs/Web/API/Page_Visibility_API)
diff --git a/files/fr/web/api/document/head/index.md b/files/fr/web/api/document/head/index.md
index ef80950d76..b0ecd73b49 100644
--- a/files/fr/web/api/document/head/index.md
+++ b/files/fr/web/api/document/head/index.md
@@ -7,63 +7,39 @@ tags:
   - HTML5
 translation_of: Web/API/Document/head
 ---
+Retourne l'élément {{HTMLElement("head")}} du document courant. S'il y a plus d'un élément \<head>, le premier est retourné.
 
-<p>Retourne l'élément {{HTMLElement("head")}} du document courant. S'il y a plus d'un élément &lt;head&gt;, le premier est retourné.</p>
+## Syntaxe
 
-<h2 id="Syntax">Syntaxe</h2>
+    var objRef = document.head;
 
-<pre class="syntaxbox"><em>var objRef</em> = document.head;
-</pre>
+## Exemple
 
-<h2 id="Example">Exemple</h2>
-
-<pre class="brush: js">// en HTML: &lt;head id="my-document-head"&gt;
+```js
+// en HTML: <head id="my-document-head">
 var aHead = document.head;
 
 alert(aHead.id); // "my-document-head";
 
 alert( document.head === document.querySelector("head") ); // true
-</pre>
+```
 
-<h2 id="Example">Notes</h2>
+## Notes
 
-<p><code>document.head</code> est en lecture seule. Essayer d'assigner une valeur à cettre propriété échouera en silence ou lancera une <code>TypeError</code> si le mode strict d'ECMAScript est activé dans un navigateur Gecko.</p>
+`document.head` est en lecture seule. Essayer d'assigner une valeur à cettre propriété échouera en silence ou lancera une `TypeError` si le mode strict d'ECMAScript est activé dans un navigateur Gecko.
 
-<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('HTML5.1','dom.html#dom-document-head','Document.head')}}</td>
-      <td>{{Spec2('HTML5.1')}}</td>
-      <td></td>
-    </tr>
-    <tr>
-      <td>{{SpecName('HTML5 W3C','dom.html#dom-document-head','Document.head')}}</td>
-      <td>{{Spec2('HTML5 W3C')}}</td>
-      <td></td>
-    </tr>
-    <tr>
-      <td>{{SpecName('HTML WHATWG','dom.html#dom-document-head','Document.head')}}</td>
-      <td>{{Spec2('HTML WHATWG')}}</td>
-      <td>Initial definition.</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                    | Statut                           | Commentaire         |
+| ------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------- |
+| {{SpecName('HTML5.1','dom.html#dom-document-head','Document.head')}}     | {{Spec2('HTML5.1')}}     |                     |
+| {{SpecName('HTML5 W3C','dom.html#dom-document-head','Document.head')}}     | {{Spec2('HTML5 W3C')}}     |                     |
+| {{SpecName('HTML WHATWG','dom.html#dom-document-head','Document.head')}} | {{Spec2('HTML WHATWG')}} | Initial definition. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Document.head")}}</p>
+{{Compat("api.Document.head")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>{{domxref("document.body")}}</li>
-</ul>
+- {{domxref("document.body")}}
diff --git a/files/fr/web/api/document/height/index.md b/files/fr/web/api/document/height/index.md
index 6dbe1f47e8..f05e75b127 100644
--- a/files/fr/web/api/document/height/index.md
+++ b/files/fr/web/api/document/height/index.md
@@ -3,42 +3,37 @@ title: Document.height
 slug: Web/API/Document/height
 translation_of: Web/API/Document/height
 ---
-<div>{{APIRef("DOM")}} {{Obsolete_header}}</div>
+{{APIRef("DOM")}} {{Obsolete_header}}
 
-<div class="note">
-<p><strong>Note:</strong> Apparu avec {{Gecko("6.0")}},<code> document.height n'est plus supporté</code>. Utilisez à la place <code>document.body.clientHeight</code>. Voir {{domxref("element.clientHeight")}}.</p>
-</div>
+> **Note :** Apparu avec {{Gecko("6.0")}},` document.height n'est plus supporté`. Utilisez à la place `document.body.clientHeight`. Voir {{domxref("element.clientHeight")}}.
 
-<h2 id="Résumé">Résumé</h2>
+## Résumé
 
-<p>Retourne la hauteur de l'objet {{domxref("document")}}. Dans la plupart des cas, ceci est égal à l'élément {{HTMLElement("body")}} du document courant.</p>
+Retourne la hauteur de l'objet {{domxref("document")}}. Dans la plupart des cas, ceci est égal à l'élément {{HTMLElement("body")}} du document courant.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>height_value</em> = document.height
-</pre>
+    height_value = document.height
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">// alert document height
+```js
+// alert document height
 alert(document.height);
-</pre>
+```
 
-<h2 id="Alternatives">Alternatives</h2>
+## Alternatives
 
-<pre class="syntaxbox">document.body.clientHeight
-document.documentElement.clientHeight
-document.documentElement.scrollHeight
-</pre>
+    document.body.clientHeight
+    document.documentElement.clientHeight
+    document.documentElement.scrollHeight
 
-<h2 id="Spécification">Spécification</h2>
+## Spécification
 
-<p>HTML5</p>
+HTML5
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("document.width")}}</li>
- <li>{{domxref("Element.clientHeight")}}</li>
- <li>{{domxref("Element.scrollHeight")}}</li>
-</ul>
+- {{domxref("document.width")}}
+- {{domxref("Element.clientHeight")}}
+- {{domxref("Element.scrollHeight")}}
diff --git a/files/fr/web/api/document/hidden/index.md b/files/fr/web/api/document/hidden/index.md
index 66da5b2e9d..23432385c6 100644
--- a/files/fr/web/api/document/hidden/index.md
+++ b/files/fr/web/api/document/hidden/index.md
@@ -3,39 +3,29 @@ title: Document.hidden
 slug: Web/API/Document/hidden
 translation_of: Web/API/Document/hidden
 ---
-<p>{{ ApiRef("DOM") }}</p>
+{{ ApiRef("DOM") }}
 
-<p>La propriété <code><strong>Document.hidden</strong></code> retourne un Booléen qui indique si la page est considérée cachée ou pas.</p>
+La propriété **`Document.hidden`** retourne un Booléen qui indique si la page est considérée cachée ou pas.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var <em>boolean</em> = document.hidden</pre>
+    var boolean = document.hidden
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush:js;">document.addEventListener("visibilitychange", function() {
+```js
+document.addEventListener("visibilitychange", function() {
   console.log( document.hidden );
   // Modifier le comportement...
 });
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th>Specification</th>
-   <th>Status</th>
-   <th>Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Page Visibility API','#dom-document-hidden', 'Document.hidden')}}</td>
-   <td>{{Spec2('Page Visibility API')}}</td>
-   <td>Initial definition</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Browser compatibility</h2>
-
-<p>{{Compat("api.Document.hidden")}}</p>
+```
+
+## Spécifications
+
+| Specification                                                                                            | Status                                       | Comment            |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------------------- | ------------------ |
+| {{SpecName('Page Visibility API','#dom-document-hidden', 'Document.hidden')}} | {{Spec2('Page Visibility API')}} | Initial definition |
+
+## Browser compatibility
+
+{{Compat("api.Document.hidden")}}
diff --git a/files/fr/web/api/document/images/index.md b/files/fr/web/api/document/images/index.md
index 1b127eb980..2aaeb008e4 100644
--- a/files/fr/web/api/document/images/index.md
+++ b/files/fr/web/api/document/images/index.md
@@ -5,29 +5,32 @@ tags:
   - Référence_du_DOM_Gecko
 translation_of: Web/API/Document/images
 ---
-<p>{{ ApiRef() }}</p>
+{{ ApiRef() }}
 
-<p><code>document.images</code> renvoie une collection des images du document HTML courant.</p>
+`document.images` renvoie une collection des images du document HTML courant.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">HTMLCollection =document.images</pre>
+```js
+HTMLCollection =document.images
+```
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush:js">var listeimg = document.images;
-for(var i = 0; i &lt; listeimg.length; i++) {
+```js
+var listeimg = document.images;
+for(var i = 0; i < listeimg.length; i++) {
     if(listeimg[i] == "banner.gif") {
          // l'image banner a été trouvée
     }
 }
-</pre>
+```
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p><a href="/fr/DOM/document.images"><code>document.images</code></a> fait partie du DOM HTML, et fonctionne uniquement pour les document HTML.</p>
-<h2 id="Sp.C3.A9cification">Spécification</h2>
-<ul>
- <li>Spécification DOM Level 2 HTML : <a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-90379117">HTMLDocument.images</a></li>
- <li>Traduction en français (non normative) : <a href="http://www.yoyodesign.org/doc/w3c/dom2/html/html.html#ID-90379117">HTMLDocument.images</a></li>
-</ul>
+[`document.images`](/fr/DOM/document.images) fait partie du DOM HTML, et fonctionne uniquement pour les document HTML.
+
+## Spécification
+
+- Spécification DOM Level 2 HTML : [HTMLDocument.images](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-90379117)
+- Traduction en français (non normative) : [HTMLDocument.images](http://www.yoyodesign.org/doc/w3c/dom2/html/html.html#ID-90379117)
diff --git a/files/fr/web/api/document/implementation/index.md b/files/fr/web/api/document/implementation/index.md
index f7684fa56f..ec2cccdd51 100644
--- a/files/fr/web/api/document/implementation/index.md
+++ b/files/fr/web/api/document/implementation/index.md
@@ -8,40 +8,37 @@ tags:
   - Reference
 translation_of: Web/API/Document/implementation
 ---
-<h2 id="Résumé">Résumé</h2>
+## Résumé
 
-<p>Retourne un objet {{domxref("DOMImplementation")}} associé avec le document courant.</p>
+Retourne un objet {{domxref("DOMImplementation")}} associé avec le document courant.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var>DOMImpObj</var> = document.implementation;
-</pre>
+    DOMImpObj = document.implementation;
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">var modName = "HTML";
+```js
+var modName = "HTML";
 var modVer = "2.0";
 var conformTest = document.implementation.hasFeature( modName, modVer );
 
 alert( "DOM " + modName + " " + modVer + " supported?: " + conformTest );
 
-// alerte avec : "DOM HTML 2.0 pris en charge ?: true" si le module DOM niveau 2 HTML est pris en charge.</pre>
+// alerte avec : "DOM HTML 2.0 pris en charge ?: true" si le module DOM niveau 2 HTML est pris en charge.
+```
 
-<p>Une liste de noms de modules (par exemple, Core, HTML, XML, etc.) est disponible dans la  <a href="http://www.w3.org/TR/DOM-Level-2-Core/introduction.html#ID-Conformance-h2">Conformance Section</a>  DOM niveau 2.</p>
+Une liste de noms de modules (par exemple, Core, HTML, XML, etc.) est disponible dans la [Conformance Section](http://www.w3.org/TR/DOM-Level-2-Core/introduction.html#ID-Conformance-h2) DOM niveau 2.
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p>La recommandation DOM niveau 1 du W3C ne spécifiait que la méthode <code>hasFeature</code>, qui est un moyen de déterminer si un module DOM est supporté par un navigateur (voir l'exemple ci-dessus et ce que votre agent utilisateur prétend prendre en charge ?). Si disponibles, d'autres méthodes <code>DOMImplementation</code> fournissent des services pour contrôler des choses en dehors d'un document unique. Par exemple, l'interface <code>DOMImplementation</code> inclut une méthode <code>createDocumentType</code> avec laquelle des DTD peuvent être créées pour un ou plusieurs documents gérés par l'implémentation.</p>
+La recommandation DOM niveau 1 du W3C ne spécifiait que la méthode `hasFeature`, qui est un moyen de déterminer si un module DOM est supporté par un navigateur (voir l'exemple ci-dessus et ce que votre agent utilisateur prétend prendre en charge ?). Si disponibles, d'autres méthodes `DOMImplementation` fournissent des services pour contrôler des choses en dehors d'un document unique. Par exemple, l'interface `DOMImplementation` inclut une méthode `createDocumentType` avec laquelle des DTD peuvent être créées pour un ou plusieurs documents gérés par l'implémentation.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<ul>
- <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-102161490">DOM Level 2 Core: implementation</a></li>
- <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-102161490">DOM Level 3 Core: implementation</a></li>
-</ul>
+- [DOM Level 2 Core: implementation](http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-102161490)
+- [DOM Level 3 Core: implementation](http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-102161490)
 
-<h2 id="Notes_propres_à_Gecko">Notes propres à Gecko</h2>
+## Notes propres à Gecko
 
-<ul>
- <li>À partir de Gecko 19.0 {{geckoRelease ("19.0")}} la méthode {{domxref ("DOMImplementation.hasFeature", "hasFeature")}} retournera toujours true.</li>
-</ul>
+- À partir de Gecko 19.0 {{geckoRelease ("19.0")}} la méthode {{domxref ("DOMImplementation.hasFeature", "hasFeature")}} retournera toujours true.
diff --git a/files/fr/web/api/document/importnode/index.md b/files/fr/web/api/document/importnode/index.md
index afda055041..65c30cb570 100644
--- a/files/fr/web/api/document/importnode/index.md
+++ b/files/fr/web/api/document/importnode/index.md
@@ -10,83 +10,57 @@ tags:
   - Reference
 translation_of: Web/API/Document/importNode
 ---
-<p>{{APIRef("DOM")}}</p>
+{{APIRef("DOM")}}
 
-<p>La méthode {{domxref ("Document")}} <code>importNode()</code> crée une nouvelle copie du {{domxref ("Node")}} ou {{domxref ("DocumentFragment")}} spécifié à partir d'un autre document, afin qu'il puisse être inséré dans le document actuel. Il n'est pas encore inclus dans l'arbre des documents; Pour ce faire, vous devez appeler une méthode telle que {{domxref ("Node.appendChild", "appendChild ()")}} ou {{domxref ("Node.insertBefore", "insertBefore ()")}}.</p>
+La méthode {{domxref ("Document")}} `importNode()` crée une nouvelle copie du {{domxref ("Node")}} ou {{domxref ("DocumentFragment")}} spécifié à partir d'un autre document, afin qu'il puisse être inséré dans le document actuel. Il n'est pas encore inclus dans l'arbre des documents; Pour ce faire, vous devez appeler une méthode telle que {{domxref ("Node.appendChild", "appendChild ()")}} ou {{domxref ("Node.insertBefore", "insertBefore ()")}}.
 
-<h3 id="Syntaxe">Syntaxe</h3>
+### Syntaxe
 
-<pre class="syntaxbox">var <em>node</em> = <em>document</em>.importNode(<em>externalNode</em>, <em>deep</em>);
-</pre>
+    var node = document.importNode(externalNode, deep);
 
-<dl>
- <dt><code>externalNode</code></dt>
- <dd>Le nouveau <code>Node</code> ou <code>DocumentFragment</code> à importer dans le document courant. Après l'importation, le nouveau <code><a href="/fr/docs/Web/API/Node/parentNode">parentNode</a></code> du noeud est <code>null</code>, car il n'a pas encore été inséré dans l'arborescence du document.</dd>
- <dt><code>deep</code></dt>
- <dd>Une valeur booléenne qui indique s'il faut ou non importer la totalité de la sous-arborescence DOM provenant de <code>externalNode</code>. Si ce paramètre est <code>true</code> (<em>vrai</em>), alors <code>externalNode</code> et tous ses descendants sont copiés; si <code>false</code> <em>(faux)</em>, seul le nœud unique, <code>externalNode</code>, est importé.</dd>
-</dl>
+- `externalNode`
+  - : Le nouveau `Node` ou `DocumentFragment` à importer dans le document courant. Après l'importation, le nouveau [`parentNode`](/fr/docs/Web/API/Node/parentNode) du noeud est `null`, car il n'a pas encore été inséré dans l'arborescence du document.
+- `deep`
+  - : Une valeur booléenne qui indique s'il faut ou non importer la totalité de la sous-arborescence DOM provenant de `externalNode`. Si ce paramètre est `true` (_vrai_), alors `externalNode` et tous ses descendants sont copiés; si `false` _(faux)_, seul le nœud unique, `externalNode`, est importé.
 
-<div class="note">
-<p><strong>Note :</strong> Dans la spécification DOM4, <code>deep</code> est répertorié en tant qu'argument facultatif. S'il est omis, la méthode agit comme si la valeur de <code>deep</code> était <code>true</code>, par défaut, elle utilisait le clonage profond comme comportement par défaut. Pour créer un clone superficiel, la profondeur doit être définie sur <code>false</code>.<br>
- <br>
- Ce comportement a été modifié dans la dernière spécification, et s'il est omis, la méthode agira comme si la valeur de <code>deep</code> était <code>false</code>. Bien que ce soit toujours facultatif, vous devriez toujours fournir l'argument <code>deep</code> à la fois pour la compatibilité en amont et en aval. Avec Gecko 28.0 {{geckoRelease (28)}}, la console a averti les développeurs de ne pas omettre l'argument. À partir de Gecko 29.0 {{geckoRelease (29)}}), un clone superficiel est défini par défaut au lieu d'un clone profond.</p>
-</div>
+> **Note :** Dans la spécification DOM4, `deep` est répertorié en tant qu'argument facultatif. S'il est omis, la méthode agit comme si la valeur de `deep` était `true`, par défaut, elle utilisait le clonage profond comme comportement par défaut. Pour créer un clone superficiel, la profondeur doit être définie sur `false`.
+>
+> Ce comportement a été modifié dans la dernière spécification, et s'il est omis, la méthode agira comme si la valeur de `deep` était `false`. Bien que ce soit toujours facultatif, vous devriez toujours fournir l'argument `deep` à la fois pour la compatibilité en amont et en aval. Avec Gecko 28.0 {{geckoRelease (28)}}, la console a averti les développeurs de ne pas omettre l'argument. À partir de Gecko 29.0 {{geckoRelease (29)}}), un clone superficiel est défini par défaut au lieu d'un clone profond.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">var iframe = document.getElementsByTagName("iframe")[0];
+```js
+var iframe = document.getElementsByTagName("iframe")[0];
 var oldNode = iframe.contentWindow.document.getElementById("myNode");
 var newNode = document.importNode(oldNode, true);
-document.getElementById("container").appendChild(newNode);</pre>
+document.getElementById("container").appendChild(newNode);
+```
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p>Le noeud d'origine n'est pas supprimé du document d'origine. Le noeud importé est un clone de l'original.</p>
+Le noeud d'origine n'est pas supprimé du document d'origine. Le noeud importé est un clone de l'original.
 
-<p> </p>
 
-<p>Les nœuds provenant de documents externes doivent être clonés à l'aide de <a href="/fr/docs/Web/API/Document/importNode"><code>document.importNode()</code></a> (ou adoptés avec <a href="/fr/docs/Web/API/Document/adoptNode"><code>document.adoptNode()</code></a>) avant de pouvoir être insérés dans le document courant. Pour en savoir plus sur les problèmes de <a href="/fr/docs/Web/API/Node/ownerDocument"><code>Node.ownerDocument</code></a>, consultez la <a href="http://www.w3.org/DOM/faq.html#ownerdoc" rel="noopener">FAQ DOM du W3C</a> (en anglais).</p>
 
-<p>Gecko n'obligeait pas à utiliser <a href="/fr/docs/Web/API/Document/importNode"><code>document.importNode()</code></a> et <a href="/fr/docs/Web/API/Document/adoptNode"><code>document.adoptNode()</code></a> avant sa version 1.9. Depuis les versions 1.9 alphas, si un nœud n'est pas adopté ou importé avant d'être utilisé dans un autre document, l'exception <code>WRONG_DOCUMENT_ERR</code> est déclenchée (<code>NS_ERROR_DOM_WRONG_DOCUMENT_ERR</code>). implémentation dans le <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=47903" rel="noopener">bug 47903</a>.</p>
+Les nœuds provenant de documents externes doivent être clonés à l'aide de [`document.importNode()`](/fr/docs/Web/API/Document/importNode) (ou adoptés avec [`document.adoptNode()`](/fr/docs/Web/API/Document/adoptNode)) avant de pouvoir être insérés dans le document courant. Pour en savoir plus sur les problèmes de [`Node.ownerDocument`](/fr/docs/Web/API/Node/ownerDocument), consultez la [FAQ DOM du W3C](http://www.w3.org/DOM/faq.html#ownerdoc) (en anglais).
 
-<p> </p>
+Gecko n'obligeait pas à utiliser [`document.importNode()`](/fr/docs/Web/API/Document/importNode) et [`document.adoptNode()`](/fr/docs/Web/API/Document/adoptNode) avant sa version 1.9. Depuis les versions 1.9 alphas, si un nœud n'est pas adopté ou importé avant d'être utilisé dans un autre document, l'exception `WRONG_DOCUMENT_ERR` est déclenchée (`NS_ERROR_DOM_WRONG_DOCUMENT_ERR`). implémentation dans le [bug 47903](https://bugzilla.mozilla.org/show_bug.cgi?id=47903).
 
-<h2 id="Sp.C3.A9cification">Spécifications</h2>
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName("DOM WHATWG", "#dom-document-importnode", "document.importNode()")}}</td>
-   <td>{{Spec2("DOM WHATWG")}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName("DOM2 Core", "core.html#Core-Document-importNode", "document.importNode()")}}</td>
-   <td>{{Spec2("DOM2 Core")}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Spécifications
 
-<div>
+| Spécification                                                                                                        | Statut                           | Commentaire         |
+| -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- |
+| {{SpecName("DOM WHATWG", "#dom-document-importnode", "document.importNode()")}}             | {{Spec2("DOM WHATWG")}} |                     |
+| {{SpecName("DOM2 Core", "core.html#Core-Document-importNode", "document.importNode()")}} | {{Spec2("DOM2 Core")}}     | Définition initiale |
 
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Document.importNode")}}  </p>
-</div>
+{{Compat("api.Document.importNode")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("document.adoptNode()")}}</li>
- <li>{{domxref("Node.appendChild()")}}</li>
- <li>{{domxref("Node.insertBefore()")}}</li>
-</ul>
-
-<p> </p>
+- {{domxref("document.adoptNode()")}}
+- {{domxref("Node.appendChild()")}}
+- {{domxref("Node.insertBefore()")}}
diff --git a/files/fr/web/api/document/index.md b/files/fr/web/api/document/index.md
index 186904db9e..b510b17ae1 100644
--- a/files/fr/web/api/document/index.md
+++ b/files/fr/web/api/document/index.md
@@ -9,482 +9,402 @@ tags:
   - Reference
 translation_of: Web/API/Document
 ---
-<p>{{ApiRef}}</p>
-
-<p>L'interface <strong><code>Document</code></strong> représente n'importe quelle page Web chargée dans le navigateur et sert de point d'entrée dans le contenu de la page Web, qui est l'arborescence DOM. L'arborescence DOM inclut des éléments tels que {{HTMLElement ("body")}} <em>(corps)</em> et {{HTMLElement ("table")}} <em>(tableau)</em>, parmi beaucoup d'autres. Il fournit des fonctionnalités globales au document, comme le moyen d'obtenir l'URL de la page et de créer de nouveaux éléments dans le document.</p>
-
-<p>{{inheritanceDiagram}}</p>
-
-<p>L'interface Document décrit les propriétés et méthodes communes à tout type de document. En fonction du type de document (HTML, XML, SVG, ...), une API plus grande est disponible : les documents HTML, servis avec le type <code>text/html</code>, implémentent également l'interface {{domxref ("HTMLDocument")}}, alors que les documents XML et SVG implémentent l'interface {{domxref ("XMLDocument")}}.</p>
-
-<h2 id="Constructeur">Constructeur</h2>
-
-<dl>
- <dt>{{domxref("Document.Document","Document()")}}{{non-standard_inline}}</dt>
- <dd>crée un nouvel objet <code>Document</code> .</dd>
-</dl>
-
-<h2 id="Propri.C3.A9t.C3.A9s">Propriétés</h2>
-
-<p><em>Cette interface hérite aussi des interfaces {{domxref("Node")}} et {{domxref("EventTarget")}} .</em></p>
-
-<dl>
- <dt>{{domxref("Document.all")}} {{Deprecated_inline}} {{non-standard_inline}}</dt>
- <dd>fournit un accès à tous les éléments du document. C'est une interface héritée non standard qui ne doit pas être utilisée.</dd>
-</dl>
-
-<dl>
- <dt>{{domxref("Document.async")}} {{Deprecated_inline}}</dt>
- <dd>utilisé avec {{domxref("document.load")}} pour indiquer une requête asynchrone.</dd>
-</dl>
-
-<dl>
- <dt>{{domxref("Document.characterSet")}} {{readonlyinline}} {{Deprecated_inline}}</dt>
- <dd>renvoie le jeu de caractères utilisé par le document.</dd>
-</dl>
-
-<dl>
- <dt>{{domxref("Document.compatMode")}} {{readonlyinline}} {{experimental_inline}}</dt>
- <dd>indique si le document est rendu en mode <em>Quirks</em> ou <em>Strict</em>.</dd>
-</dl>
-
-<dl>
- <dt>{{domxref("Document.contentType")}} {{readonlyinline}} {{experimental_inline}}</dt>
- <dd>Renvoie le type de contenu de l'en-tête MIME du document courant.</dd>
-</dl>
-
-<dl>
- <dt>{{domxref("Document.doctype")}} {{readonlyinline}}</dt>
- <dd>Renvoie le DTD (Document Type Definition) du document courant.</dd>
-</dl>
-
-<dl>
- <dt>{{domxref("Document.documentElement")}} {{readonlyinline}}</dt>
- <dd>Renvoie l'{{domxref("Element")}} qui est l'enfant direct du document. Pour les documents HTML, il s'agit normalement de l'élément {{HTMLElement("HTML")}}.</dd>
- <dt>{{domxref("Document.documentURI")}} {{readonlyinline}}</dt>
- <dd>retroune l'emplacement du document sous la forme d'une chaîne de caractères.</dd>
- <dt>{{domxref("Document.domConfig")}} {{Deprecated_inline}}</dt>
- <dd>devrait retourner un objet {{domxref("DOMConfiguration")}} .</dd>
- <dt>{{domxref("Document.fullscreen")}} {{obsolete_inline}}</dt>
- <dd><code>true</code> <em>(vrai)</em> quand le document est en {{domxref("Using_full-screen_mode","mode plein écran")}}.</dd>
- <dt>{{domxref("Document.hidden")}} {{readonlyinline}}</dt>
- <dd>...</dd>
- <dt>{{domxref("Document.implementation")}} {{readonlyinline}}</dt>
- <dd>Renvoie l'implémentation DOM associée au document courant.</dd>
- <dt>{{domxref("Document.inputEncoding")}} {{readonlyinline}} {{Deprecated_inline}}</dt>
- <dd>alias de {{domxref("Document.characterSet")}}. Utilisez cette propriété à la place.</dd>
- <dt>{{domxref("Document.lastStyleSheetSet")}} {{readonlyinline}}</dt>
- <dd>retourne le nom de l'ensemble de feuilles de style qui a été activé en dernier. A la valeur <code>null</code> jusqu'à ce que la feuille de style soit modifiée en définissant la valeur de  {{domxref("document.selectedStyleSheetSet","selectedStyleSheetSet")}}.</dd>
- <dt>{{domxref("Document.mozSyntheticDocument")}} {{non-standard_inline}} {{gecko_minversion_inline("8.0")}}</dt>
- <dd>retourne un {{jsxref("Boolean")}} qui est <code>true</code> <em>(vrai)</em> seulement si le document est synthétique, tel qu'une image autonome, une vidéo, un fichier audio ou similaire.</dd>
- <dt>{{domxref("Document.mozFullScreenElement")}} {{readonlyinline}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}</dt>
- <dd>L'élément qui est actuellement affiché en mode plein écran pour ce document.</dd>
- <dt>{{domxref("Document.mozFullScreenEnabled")}} {{readonlyinline}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}</dt>
- <dd><code>true</code> <em>(vrai)</em> si l'appel  {{domxref("Element.mozRequestFullscreen()")}}  est réussi dans le document courant.</dd>
- <dt>{{domxref("Document.pointerLockElement")}} {{readonlyinline}} {{experimental_inline}}</dt>
- <dd>renvoie l'ensemble d'éléments en tant que cible pour les événements de la souris lorsque le pointeur est verrouillé. <code>null</code> si le verrouillage est en attente, le pointeur est déverrouillé ou la cible se trouve dans un autre document.</dd>
- <dt>{{domxref("Document.preferredStyleSheetSet")}} {{readonlyinline}}</dt>
- <dd>renvoie la page de style préférée spécifiée par l'auteur de la page.</dd>
- <dt>{{domxref("Document.scrollingElement")}} {{experimental_inline}} {{readonlyinline}}</dt>
- <dd>retourne une référence à l'{{domxref("Element")}} qui fait défiler le document.</dd>
- <dt>{{domxref("Document.selectedStyleSheetSet")}}</dt>
- <dd>renvoie la feuille de style actuellement utilisée.</dd>
- <dt>{{domxref("Document.styleSheets")}} {{readonlyinline}}</dt>
- <dd>Renvoie une liste de tous les objets {{domxref("stylesheet")}}<em> (feuilles de styles)</em> du document courant.</dd>
- <dt>{{domxref("Document.timeline")}} {{readonlyinline}}</dt>
- <dd>...</dd>
- <dt>{{domxref("Document.undoManager")}} {{readonlyinline}} {{experimental_inline}}</dt>
- <dd>...</dd>
- <dt>{{domxref("Document.visibilityState")}} {{readonlyinline}}</dt>
- <dd>renvoie une <code>string</code> <em>(chaîne de caractères)</em> indiquant l'état de visibilité du document. Les valeurs possibles sont  <code>visible</code> ,  <code>hidden <em>(masqué)</em></code> , prerender <em>(pré-rendu)</em> et  <code>unloaded</code> <em>(</em><em>déchargées</em>).</dd>
- <dt>{{domxref("Document.xmlEncoding")}} {{Deprecated_inline}}</dt>
- <dd>retourne le codage déterminé par une déclaration XML.</dd>
- <dt>{{domxref("Document.xmlStandalone")}} {{obsolete_inline("10.0")}}</dt>
- <dd>renvoie <code>true</code> si la déclaration XML précise que le document doit être autonome (par exemple, une partie externe de la DTD du contenu du document), sinon <code>false</code> <em>(faux)</em>.</dd>
- <dt>{{domxref("Document.xmlVersion")}} {{obsolete_inline("10.0")}}</dt>
- <dd>retourne le numéro de la version spécifié dans la déclaration XML ou <code>"1.0"</code> si la déclaration est absente.</dd>
-</dl>
-
-<p>L'interface Document est étendue avec l'interface {{domxref("ParentNode")}} :</p>
-
-<p>{{page("/fr/docs/Web/API/ParentNode","Propriétés")}}</p>
-
-<h3 id="Extensions_du_document_HTML">Extensions du document HTML</h3>
-
-<p>L'interface Document, pour les documents HTML, hérite de l'interface <em>{{domxref("HTMLDocument")}}</em>  ou depuis HTML5, est étendue pour eux.</p>
-
-<dl>
- <dt>{{domxref("Document.activeElement")}} {{readonlyinline}}</dt>
- <dd>Renvoie l'élément courant qui a la focus.</dd>
- <dt>{{domxref("Document.alinkColor")}} {{Deprecated_inline}}</dt>
- <dd>Renvoie ou définit la couleur des liens actifs du corps du document.</dd>
- <dt>{{domxref("Document.anchors")}}</dt>
- <dd>Renvoie une liste de toutes les ancres du document.</dd>
- <dt>{{domxref("Document.applets")}} {{Deprecated_inline}}</dt>
- <dd>Renvoie une liste ordonnée des "applets" du document.</dd>
- <dt>{{domxref("Document.bgColor")}} {{Deprecated_inline}}</dt>
- <dd><strong>bgColor</strong> renvoie ou définit la couleur d'arrière-plan du document courant.</dd>
-</dl>
-
-<dl>
- <dt>{{domxref("Document.body")}}</dt>
- <dd><strong>body</strong> renvoie l'élément  {{HTMLElement("body")}} du document en cours.</dd>
- <dt>{{domxref("Document.cookie")}}</dt>
- <dd>Renvoie une liste des cookies du document, séparés par des points virgules, ou définit un cookie.</dd>
-</dl>
-
-<dl>
- <dt>{{domxref("Document.defaultView")}} {{readonlyinline}}</dt>
- <dd>Renvoie une référence à l'objet window.</dd>
- <dt>{{domxref("Document.designMode")}}</dt>
- <dd>renvoie ou définit les capacités d'édition du document entier.</dd>
- <dt>{{domxref("Document.dir")}} {{readonlyinline}}</dt>
- <dd>Assigne / renvoie le sens du texte (rtl/ltr) <em>(de gauche à droite / de droite à gauche)</em> du document.</dd>
- <dt>{{domxref("Document.domain")}}</dt>
- <dd>renvoie ou affecte le domaine de l'élément courant.</dd>
- <dt>{{domxref("Document.embeds")}} {{readonlyinline}}</dt>
- <dd>renvoie une liste des objets {{HTMLElement('embed')}} inclus dans le document courant.</dd>
-</dl>
-
-<dl>
- <dt>{{domxref("Document.fgColor")}} {{Deprecated_inline}}</dt>
- <dd>renvoie ou définit la couleur du texte du document courant.</dd>
- <dt>{{domxref("Document.forms")}} {{readonlyinline}}</dt>
- <dd><strong>forms</strong> renvoie une liste des éléments {{HTMLElement("form")}} du document courant</dd>
- <dt>{{domxref("Document.head")}} {{readonlyinline}}</dt>
- <dd>Renvoie l'élément {{HTMLElement("head")}} du document.</dd>
- <dt>{{domxref("Document.height")}} {{non-standard_inline}} {{obsolete_inline}}</dt>
- <dd>renvoie ou définit la hauteur du document courant.</dd>
- <dt>{{domxref("Document.images")}} {{readonlyinline}}</dt>
- <dd>renvoie une liste des images du document courant.</dd>
- <dt>{{domxref("Document.lastModified")}} {{readonlyinline}}</dt>
- <dd>Renvoie la date de dernière modification du document.</dd>
- <dt>{{domxref("Document.linkColor")}} {{Deprecated_inline}}</dt>
- <dd>Renvoie ou définit la couleur des liens du document.</dd>
- <dt>{{domxref("Document.links")}} {{readonlyinline}}</dt>
- <dd>Renvoie un tableau de tous les liens du document.</dd>
- <dt>{{domxref("Document.location")}} {{readonlyinline}}</dt>
- <dd>Renvoie l'URI (Uniform Ressource Identifier : <em>identifiant uniforme de ressource</em>) du document courant.</dd>
- <dt>{{domxref("Document.plugins")}} {{readonlyinline}}</dt>
- <dd>Renvoie une liste des plugins disponibles.</dd>
- <dt>{{domxref("Document.readyState")}} {{readonlyinline}}  {{gecko_minversion_inline("1.9.2")}}</dt>
- <dd>retourne l'état du chargement du document.</dd>
- <dt>{{domxref("Document.referrer")}} {{readonlyinline}}</dt>
- <dd>Renvoie l'URI de la page qui a amené à cette page.</dd>
- <dt>{{domxref("Document.scripts")}} {{readonlyinline}}</dt>
- <dd>renvoie tous les éléments {{HTMLElement("script")}}  sur le document.</dd>
- <dt>{{domxref("Document.title")}}</dt>
- <dd>Renvoie le titre du document courant.</dd>
- <dt>{{domxref("Document.URL")}}  {{readonlyInline}}</dt>
- <dd>Renvoie une chaîne de caractères contenant l'URL ("Uniform Resource Locator", <em>repère uniforme de ressource</em>) du document courant.</dd>
-</dl>
-
-<dl>
- <dt>{{domxref("Document.vlinkColor")}} {{Deprecated_inline}}</dt>
- <dd>Renvoie ou définit la couleur des liens visités du document.</dd>
- <dt>{{domxref("Document.width")}} {{non-standard_inline}} {{obsolete_inline}}</dt>
- <dd>Renvoie la largeur du document courant.</dd>
-</dl>
-
-<h3 id="Gestionnaire_d'évènements">Gestionnaire d'évènements</h3>
-
-<dl>
- <dt>{{domxref("Document.onafterscriptexecute")}} {{non-standard_inline}}</dt>
- <dd>représente le code de gestion d'évènements pour l'évènement {{event("afterscriptexecute")}}</dd>
- <dt>{{domxref("Document.onbeforescriptexecute")}} {{non-standard_inline}}</dt>
- <dd>retourne le code de gestion d'évènements pour l'évènement {{event("beforescriptexecute")}} .</dd>
- <dt>{{domxref("Document.oncopy")}} {{non-standard_inline}}</dt>
- <dd>représente le code de gestion d'évènements pour l'évènement {{event("copy")}} .</dd>
- <dt>{{domxref("Document.oncut")}} {{non-standard_inline}}</dt>
- <dd>représente le code de gestion d'évènements pour l'évènement {{event("cut")}} .</dd>
- <dt>{{domxref("Document.onfullscreenchange")}}</dt>
- <dd>est un  {{event("Event_handlers", "event handler")}} <em>( gestionnaire d'évènements)</em> représentant le code à appeler quand l'élément {{event("fullscreenchange")}} est relevé.</dd>
- <dt>{{domxref("Document.onfullscreenerror")}}</dt>
- <dt>{{domxref("Document.onfullscreenchange")}}</dt>
- <dd>est un  {{event("Event_handlers", "event handler")}} <em>( gestionnaire d'évènements)</em> représentant le code à appeler quand l'élément {{event("fullscreenerror")}} est relevé.</dd>
- <dt>{{domxref("Document.onpaste")}} {{non-standard_inline}}</dt>
- <dd>représente le code de gestion d'évènements pour l'évènement {{event("paste")}} .</dd>
- <dt>{{domxref("Document.onpointerlockchange")}} {{experimental_inline}}</dt>
- <dd>représente le code de gestion d'évènements pour l'évènement {{event("pointerlockchange")}} .</dd>
- <dt>{{domxref("Document.onpointerlockerror")}} {{experimental_inline}}</dt>
- <dd>représente le code de gestion d'évènements pour l'évènement {{event("pointerlockerror")}} .</dd>
- <dt>{{domxref("Document.onreadystatechange")}} {{gecko_minversion_inline("1.9.2")}}</dt>
- <dd>représente le code de gestion d'évènements pour l'évènement {{event("readystatechange")}} .</dd>
- <dt>{{domxref("Document.onselectionchange")}} {{experimental_inline}}</dt>
- <dd>est un  {{event("Event_handlers", "event handler")}} <em>( gestionnaire d'évènements)</em> représentant le code à appeler quand l'élément {{event("selectionchange")}} est relevé.</dd>
- <dt>{{domxref("Document.onvisibilitychange")}}</dt>
- <dd>est un  {{event("Event_handlers", "event handler")}} <em>( gestionnaire d'évènements)</em> représentant le code à appeler quand l'élément {{event("visibilitychange")}} est relevé.</dd>
- <dt>{{domxref("Document.onwheel")}} {{non-standard_inline}}</dt>
- <dd>représente le code de gestion d'évènements pour l'évènement {{event("wheel")}} .</dd>
-</dl>
-
-<p>L'interface <code>Document</code> est étendue avec l'interface {{domxref("GlobalEventHandlers")}} :</p>
-
-<p>{{Page("/fr/docs/Web/API/GlobalEventHandlers", "Propriétés")}}</p>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<p><em>Cette interface hérite également des interfaces {{domxref ("Node")}} et {{domxref ("EventTarget")}}.</em></p>
-
-<dl>
- <dt>{{domxref("Document.adoptNode()")}}</dt>
- <dd>adopte le noeud d'un document externe.</dd>
- <dt>{{domxref("Document.captureEvents()")}} {{Deprecated_inline}}</dt>
- <dd>voir {{domxref("Window.captureEvents")}}.</dd>
- <dt>{{domxref("Document.caretPositionFromPoint()")}}{{experimental_inline}}</dt>
- <dd>obtient le {{domxref ("CaretPosition")}} aux ou près des coordonnées spécifiées.</dd>
- <dt>{{domxref("Document.caretRangeFromPoint()")}}{{non-standard_inline}}</dt>
- <dd>Obtient un objet {{Domxref ("Range")}} pour le fragment de document sous les coordonnées spécifiées.</dd>
- <dt>{{domxref("Document.createAttribute()")}}</dt>
- <dd>Crée un nouvel objet {{domxref("Attr")}} et le renvoie.</dd>
- <dt>{{domxref("Document.createAttributeNS()")}}</dt>
- <dd>Crée un nouveau noeud dans l'espace nom donné et le renvoie.</dd>
- <dt>{{domxref("Document.createCDATASection()")}}</dt>
- <dd>Crée un nouveau nœud CDATA et le renvoie.</dd>
- <dt>{{domxref("Document.createComment()")}}</dt>
- <dd>Crée un nouveau nœud de commentaire et le renvoie.</dd>
- <dt>{{domxref("Document.createDocumentFragment()")}}</dt>
- <dd>Crée un nouveau fragment de document.</dd>
- <dt>{{domxref("Document.createElement()")}}</dt>
- <dd>Crée un nouvel élément avec l'étiquette spécifiée.</dd>
- <dt>{{domxref("Document.createElementNS()")}}</dt>
- <dd>Crée un nouvel élément du type et avec l'URI d'espace de nom spécifiés.</dd>
- <dt>{{domxref("Document.createEntityReference()")}} {{obsolete_inline}}</dt>
- <dd>Crée un nouvel objet de référence à une entité et le renvoie.</dd>
- <dt>{{domxref("Document.createEvent()")}}</dt>
- <dd>Crée un nouvel évènement.</dd>
- <dt>{{domxref("Document.createNodeIterator()")}}</dt>
- <dd>crée un objet {{domxref("NodeIterator")}} .</dd>
- <dt>{{domxref("Document.createProcessingInstruction()")}}</dt>
- <dd>crée un nouvel objet {{domxref("ProcessingInstruction")}} .</dd>
- <dt>{{domxref("Document.createRange()")}}</dt>
- <dd>Crée un objet {{domxref("Range")}} .</dd>
- <dt>{{domxref("Document.createTextNode()")}}</dt>
- <dd>Crée un nœud de texte.</dd>
- <dt>{{domxref("Document.createTouch()")}} {{Deprecated_inline}}</dt>
- <dd>crée un objet {{domxref("Touch")}}</dd>
- <dt>{{domxref("Document.createTouchList()")}}</dt>
- <dd>crée un objet {{domxref("TouchList")}}</dd>
- <dt>{{domxref("Document.createTreeWalker()")}}</dt>
- <dd>Crée un objet {{domxref("TreeWalker")}} .</dd>
- <dt>{{domxref("Document.elementFromPoint()")}}{{experimental_inline}}</dt>
- <dd>Renvoie l'élément visible aux coordonnées spécifiées.</dd>
- <dt>{{domxref("Document.elementsFromPoint()")}}{{experimental_inline}}</dt>
- <dd>Renvoie un tableau de tous les éléments aux coordonnées spécifiées.</dd>
- <dt>{{domxref("Document.enableStyleSheetsForSet()")}}</dt>
- <dd>active les feuilles de style pour l'ensemble de feuilles de style spécifié.</dd>
- <dt>{{domxref("Document.exitPointerLock()")}} {{experimental_inline}}</dt>
- <dd>Supprime le verrou du pointeur.</dd>
- <dt>{{domxref("Document.getAnimations()")}} {{experimental_inline}}</dt>
- <dd>retourne un tableau de tous les objets {{domxref("Animation")}} actuels, dont les éléments cibles sont les descendants de ce <code>document</code>.</dd>
-</dl>
-
-<dl>
- <dt>{{domxref("Document.getElementsByClassName()")}}</dt>
- <dd>Renvoie une liste des éléments ayant le nom de classe donné.</dd>
-</dl>
-
-<dl>
- <dt>{{domxref("Document.getElementsByTagName()")}}</dt>
- <dd>Renvoie une liste des éléments ayant le nom de balise donné.</dd>
-</dl>
-
-<dl>
- <dt>{{domxref("Document.getElementsByTagNameNS()")}}</dt>
- <dd>Renvoie une liste des éléments du nom de balise et de l'espace de noms spécifiés.</dd>
-</dl>
-
-<dl>
- <dt>{{domxref("Document.importNode()")}}</dt>
- <dd>Renvoie une copie (un clone) d'un élément provenant d'un document externe.</dd>
- <dt>{{domxref("Document.normalizeDocument()")}} {{obsolete_inline}}</dt>
- <dd>remplace les entités, normalise les noeuds de texte, etc.</dd>
- <dt>{{domxref("Document.registerElement()")}} {{experimental_inline}}</dt>
- <dd>Enregistre un composant Web.</dd>
- <dt>{{domxref("Document.releaseCapture()")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}</dt>
- <dd>Libère la capture de la souris en cours s'il s'agit d'un élément de ce document.</dd>
- <dt>{{domxref("Document.releaseEvents()")}} {{non-standard_inline}} {{Deprecated_inline}}</dt>
- <dd>voir {{domxref("Window.releaseEvents()")}}.</dd>
- <dt>{{domxref("Document.routeEvent()")}} {{non-standard_inline}} {{obsolete_inline(24)}}</dt>
- <dd>Voir {{domxref("Window.routeEvent()")}}.</dd>
- <dt>{{domxref("Document.mozSetImageElement()")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}</dt>
- <dd>Vous permet de modifier l'élément utilisé comme image d'arrière-plan pour un ID d'élément spécifié.</dd>
-</dl>
-
-<p>L'interface <code>Document</code> est étendue avec l'interface {{domxref("ParentNode")}} :</p>
-
-<dl>
- <dt>{{domxref("document.getElementById","document.getElementById(String id)")}}</dt>
- <dd>retourne une référence d'objet à l'élément identifié.</dd>
- <dt>{{domxref("document.querySelector","document.querySelector(String selector)")}} {{gecko_minversion_inline("1.9.1")}}</dt>
- <dd>Renvoie le premier noeud <code>Element</code> dans le document, dans l'ordre du document, qui correspond aux sélecteurs spécifiés.</dd>
- <dt>{{domxref("document.querySelectorAll","document.querySelectorAll(String selector)")}} {{gecko_minversion_inline("1.9.1")}}</dt>
- <dd>retourne une liste de tous les noeuds éléments inclus dans le document qui correspondent aux sélecteurs spécifiés.</dd>
-</dl>
-
-<p>L'interface Document est étendue avec l'interface  {{domxref("XPathEvaluator")}} :</p>
-
-<dl>
- <dt>{{domxref("document.createExpression","document.createExpression(String expression, XPathNSResolver resolver)")}}</dt>
- <dd>compile une <code><a href="/fr/docs/Web/API/XPathExpression">XPathExpression</a></code> qui peut ensuite être utilisée pour des évaluations (répétées).</dd>
- <dt>{{domxref("document.createNSResolver","document.createNSResolver(Node resolver)")}}</dt>
- <dd>crée un objet {{domxref("XPathNSResolver")}} .</dd>
- <dt>{{domxref("document.evaluate","document.evaluate(String expression, Node contextNode, XPathNSResolver resolver, Number type, Object result)")}}</dt>
- <dd>évalue l'expression XPath .</dd>
-</dl>
-
-<h3 id="Extensions_pour_les_documents_HTML">Extensions pour les documents HTML</h3>
-
-<dl>
- <dt>{{domxref("document.clear()")}} {{non-standard_inline}} {{Deprecated_inline}}</dt>
- <dd>dans la majorité des navigateurs modernes, y compris les versions récentes de Firefox et Internet Explorer, cette méthode ne fait rien.</dd>
- <dt>{{domxref("document.close()")}}</dt>
- <dd>ferme un flux de document pour l'écriture.</dd>
- <dt>{{domxref("document.execCommand","document.execCommand(String command[, Boolean showUI[, String value]])")}}</dt>
- <dd>Sur un document modifiable, exécute une commande de formatage.</dd>
- <dt>{{domxref("document.getElementsByName","document.getElementsByName(String name)")}}</dt>
- <dd>retourne une liste d'éléments ayant le nom donné.</dd>
- <dt>{{domxref("document.getSelection()")}}</dt>
- <dd>retourne un objet {{domxref("Selection")}} relatif au texte sélectionné dans le document.</dd>
- <dt>{{domxref("document.hasFocus()")}}</dt>
- <dd>retourne <code>true</code> (vrai) si le focus est actuellement localisé n'importe où sur le document spécifié.</dd>
- <dt>{{domxref("document.open()")}}</dt>
- <dd>Ouvre un flux pour l'écriture dans le document.</dd>
- <dt>{{domxref("document.queryCommandEnabled","document.queryCommandEnabled(String command)")}}</dt>
- <dd>Renvoie <code>true</code> si la commande de formatage peut être exécutée sur la plage courante.</dd>
- <dt>{{domxref("document.queryCommandIndeterm","document.queryCommandIndeterm(String command)")}}</dt>
- <dd>Renvoie <code>true</code> si la commande de formatage est dans un état indéterminé sur la plage courante.</dd>
- <dt>{{domxref("document.queryCommandState","document.queryCommandState(String command)")}}</dt>
- <dd>Renvoie <code>true</code> si la commande de formatage a été exécutée sur la plage courante.</dd>
- <dt>{{domxref("document.queryCommandSupported","document.queryCommandSupported(String command)")}}</dt>
- <dd>retourne <code>true</code> <em>(vrai)</em> si la commande de formatage est supportée sur la plage courante.</dd>
- <dt>{{domxref("document.queryCommandValue","document.queryCommandValue(String command)")}}</dt>
- <dd>renvoie la valeur courante de la plage en cours pour une commande de formatage.</dd>
- <dt>{{domxref("document.write","document.write(String text)")}}</dt>
- <dd>Écrit du texte dans le document.</dd>
- <dt>{{domxref("document.writeln","document.writeln(String text)")}}</dt>
- <dd>Écrit une ligne de texte dans le document.</dd>
-</dl>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Page Visibility API', '#onvisiblitychange-event-handler', 'onvisibilitychange')}}</td>
-   <td>{{Spec2('Page Visibility API')}}</td>
-   <td>Ajoute <code>onvisibilitychange.</code></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('Selection API', '', 'Extend Document and GlobalEventHandlers')}}</td>
-   <td>{{Spec2('Selection API')}}</td>
-   <td>Ajoute <code>onselectstart</code>et <code>onselectionchange</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM1','#i-Document','Document')}}</td>
-   <td>{{Spec2('DOM1')}}</td>
-   <td>Définition initiale pour l'interface</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Core','#i-Document','Document')}}</td>
-   <td>{{Spec2('DOM2 Core')}}</td>
-   <td>Remplace DOM 1</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM3 Core','#i-Document','Document')}}</td>
-   <td>{{Spec2('DOM3 Core')}}</td>
-   <td>remplace DOM 2</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG','#interface-document','Document')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>en vue de remplacer DOM 3</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG','dom.html#the-document-object','Document')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Transforme l'interface {{domxref("HTMLDocument")}} en une extension de <code>Document</code></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM3 XPath','xpath.html#XPathEvaluator','XPathEvaluator')}}</td>
-   <td>{{Spec2('DOM3 XPath')}}</td>
-   <td>Definit l'interface {{domxref("XPathEvaluator")}} qui étend le document.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('Page Visibility API', '#sec-document-interface', 'Document')}}</td>
-   <td>{{Spec2('Page Visibility API')}}</td>
-   <td>Étend l'interface <code>Document</code>  avec les attributs <code>visibilityState</code> et <code>hidden</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML Editing','#dom-document-getselection','Document')}}</td>
-   <td>{{Spec2('HTML Editing')}}</td>
-   <td>Étend l'interface <code>Document</code></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSSOM View','#extensions-to-the-document-interface','Document')}}</td>
-   <td>{{Spec2('CSSOM View')}}</td>
-   <td>Étend l'interface <code>Document</code></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSSOM','#extensions-to-the-document-interface','Document')}}</td>
-   <td>{{Spec2('CSSOM')}}</td>
-   <td>Étend l'interface <code>Document</code></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('Pointer Lock','#extensions-to-the-document-interface','Document')}}</td>
-   <td>{{Spec2('Pointer Lock')}}</td>
-   <td>Étend l'interface <code>Document</code></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs_notes">Compatibilité des navigateurs notes</h2>
-
-<h3 id="Notes_concernant_Firefox">Notes concernant Firefox :</h3>
-
-<p>Mozilla définit un ensemble de propriétés non-standard créées seulement pour le contenu XUL :</p>
-
-<dl>
- <dt>{{domxref("document.currentScript")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}</dt>
- <dd>retourne l'élément {{HTMLElement("script")}} qui est en cours d'exécution.</dd>
- <dt>{{domxref("document.documentURIObject")}} {{gecko_minversion_inline("1.9")}}</dt>
- <dd>(extensions Mozilla seulement) retourne l'objet  {{Interface("nsIURI")}} représentant l'URI du document. Cette propriété a seulement une signification spéciale dans le code JavaScript privilégié (avec les privilèges UniversalXPConnect).</dd>
- <dt>{{domxref("document.popupNode")}}</dt>
- <dd>retourne le noeud ouvert lors de l'appel d'une fenêtre contextuelle.</dd>
- <dt>{{domxref("document.tooltipNode")}}</dt>
- <dd>retourne le noeud qui est la cible de l'info-bulle actuelle.</dd>
-</dl>
-
-<p>Mozilla a également défini quelques méthodes non standard :</p>
-
-<dl>
- <dt>{{domxref("document.execCommandShowHelp")}} {{obsolete_inline("14.0")}}</dt>
- <dd>Cette méthode n'a jamais rien fait et a toujours lancé une exception, elle a donc été supprimée dans Gecko 14.0 {{geckoRelease ("14.0")}}.</dd>
- <dt>{{domxref("document.getBoxObjectFor")}} {{obsolete_inline}}</dt>
- <dd>Utiliser la méthode {{domxref("Element.getBoundingClientRect()")}} à la place.</dd>
- <dt>{{domxref("document.loadOverlay")}}</dt>
- <dd>charge dynamiquement un <a href="/fr/docs/Overlays_XUL">XUL overlay</a> . Celui-ci fonctionne seulement dans les documents XUL.</dd>
- <dt>{{domxref("document.queryCommandText")}} {{obsolete_inline("14.0")}}</dt>
- <dd>Cette méthode n'a jamais rien fait d'autre que de lancer une exception, elle a donc été supprimée dans Gecko 14.0 {{geckoRelease ("14.0")}}.</dd>
-</dl>
-
-<h3 id="Notes_concernant_Internet_Explorer">Notes concernant Internet Explorer</h3>
-
-<p>Microsoft a défini quelques propriétés non standard :</p>
-
-<dl>
- <dt>{{domxref("document.fileSize")}}* {{non-standard_inline}} {{obsolete_inline}}</dt>
- <dd>Retourne la taille en octets du document. À partir d'Internet Explorer 11, cette propriété n'est plus prise en charge. Voir  <a href="http://msdn.microsoft.com/en-us/library/ms533752%28v=VS.85%29.aspx">MSDN</a>.</dd>
-</dl>
-
-<p>Internet Explorer ne prend pas en charge toutes les méthodes de l'interface Node dans l'interface Document :</p>
-
-<dl>
- <dt>{{domxref("document.contains")}}</dt>
- <dd>Pour contourner le problème, <code>document.body.contains ()</code> peut être utilisé.</dd>
-</dl>
+{{ApiRef}}
+
+L'interface **`Document`** représente n'importe quelle page Web chargée dans le navigateur et sert de point d'entrée dans le contenu de la page Web, qui est l'arborescence DOM. L'arborescence DOM inclut des éléments tels que {{HTMLElement ("body")}} _(corps)_ et {{HTMLElement ("table")}} _(tableau)_, parmi beaucoup d'autres. Il fournit des fonctionnalités globales au document, comme le moyen d'obtenir l'URL de la page et de créer de nouveaux éléments dans le document.
+
+{{inheritanceDiagram}}
+
+L'interface Document décrit les propriétés et méthodes communes à tout type de document. En fonction du type de document (HTML, XML, SVG, ...), une API plus grande est disponible : les documents HTML, servis avec le type `text/html`, implémentent également l'interface {{domxref ("HTMLDocument")}}, alors que les documents XML et SVG implémentent l'interface {{domxref ("XMLDocument")}}.
+
+## Constructeur
+
+- {{domxref("Document.Document","Document()")}}{{non-standard_inline}}
+  - : crée un nouvel objet `Document` .
+
+## Propriétés
+
+_Cette interface hérite aussi des interfaces {{domxref("Node")}} et {{domxref("EventTarget")}} ._
+
+- {{domxref("Document.all")}} {{Deprecated_inline}} {{non-standard_inline}}
+  - : fournit un accès à tous les éléments du document. C'est une interface héritée non standard qui ne doit pas être utilisée.
+
+<!---->
+
+- {{domxref("Document.async")}} {{Deprecated_inline}}
+  - : utilisé avec {{domxref("document.load")}} pour indiquer une requête asynchrone.
+
+<!---->
+
+- {{domxref("Document.characterSet")}} {{readonlyinline}} {{Deprecated_inline}}
+  - : renvoie le jeu de caractères utilisé par le document.
+
+<!---->
+
+- {{domxref("Document.compatMode")}} {{readonlyinline}} {{experimental_inline}}
+  - : indique si le document est rendu en mode _Quirks_ ou _Strict_.
+
+<!---->
+
+- {{domxref("Document.contentType")}} {{readonlyinline}} {{experimental_inline}}
+  - : Renvoie le type de contenu de l'en-tête MIME du document courant.
+
+<!---->
+
+- {{domxref("Document.doctype")}} {{readonlyinline}}
+  - : Renvoie le DTD (Document Type Definition) du document courant.
+
+<!---->
+
+- {{domxref("Document.documentElement")}} {{readonlyinline}}
+  - : Renvoie l'{{domxref("Element")}} qui est l'enfant direct du document. Pour les documents HTML, il s'agit normalement de l'élément {{HTMLElement("HTML")}}.
+- {{domxref("Document.documentURI")}} {{readonlyinline}}
+  - : retroune l'emplacement du document sous la forme d'une chaîne de caractères.
+- {{domxref("Document.domConfig")}} {{Deprecated_inline}}
+  - : devrait retourner un objet {{domxref("DOMConfiguration")}} .
+- {{domxref("Document.fullscreen")}} {{obsolete_inline}}
+  - : `true` _(vrai)_ quand le document est en {{domxref("Using_full-screen_mode","mode plein écran")}}.
+- {{domxref("Document.hidden")}} {{readonlyinline}}
+  - : ...
+- {{domxref("Document.implementation")}} {{readonlyinline}}
+  - : Renvoie l'implémentation DOM associée au document courant.
+- {{domxref("Document.inputEncoding")}} {{readonlyinline}} {{Deprecated_inline}}
+  - : alias de {{domxref("Document.characterSet")}}. Utilisez cette propriété à la place.
+- {{domxref("Document.lastStyleSheetSet")}} {{readonlyinline}}
+  - : retourne le nom de l'ensemble de feuilles de style qui a été activé en dernier. A la valeur `null` jusqu'à ce que la feuille de style soit modifiée en définissant la valeur de  {{domxref("document.selectedStyleSheetSet","selectedStyleSheetSet")}}.
+- {{domxref("Document.mozSyntheticDocument")}} {{non-standard_inline}} {{gecko_minversion_inline("8.0")}}
+  - : retourne un {{jsxref("Boolean")}} qui est `true` _(vrai)_ seulement si le document est synthétique, tel qu'une image autonome, une vidéo, un fichier audio ou similaire.
+- {{domxref("Document.mozFullScreenElement")}} {{readonlyinline}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}
+  - : L'élément qui est actuellement affiché en mode plein écran pour ce document.
+- {{domxref("Document.mozFullScreenEnabled")}} {{readonlyinline}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}
+  - : `true` _(vrai)_ si l'appel  {{domxref("Element.mozRequestFullscreen()")}}  est réussi dans le document courant.
+- {{domxref("Document.pointerLockElement")}} {{readonlyinline}} {{experimental_inline}}
+  - : renvoie l'ensemble d'éléments en tant que cible pour les événements de la souris lorsque le pointeur est verrouillé. `null` si le verrouillage est en attente, le pointeur est déverrouillé ou la cible se trouve dans un autre document.
+- {{domxref("Document.preferredStyleSheetSet")}} {{readonlyinline}}
+  - : renvoie la page de style préférée spécifiée par l'auteur de la page.
+- {{domxref("Document.scrollingElement")}} {{experimental_inline}} {{readonlyinline}}
+  - : retourne une référence à l'{{domxref("Element")}} qui fait défiler le document.
+- {{domxref("Document.selectedStyleSheetSet")}}
+  - : renvoie la feuille de style actuellement utilisée.
+- {{domxref("Document.styleSheets")}} {{readonlyinline}}
+  - : Renvoie une liste de tous les objets {{domxref("stylesheet")}} _(feuilles de styles)_ du document courant.
+- {{domxref("Document.timeline")}} {{readonlyinline}}
+  - : ...
+- {{domxref("Document.undoManager")}} {{readonlyinline}} {{experimental_inline}}
+  - : ...
+- {{domxref("Document.visibilityState")}} {{readonlyinline}}
+  - : renvoie une `string` _(chaîne de caractères)_ indiquant l'état de visibilité du document. Les valeurs possibles sont `visible` , `hidden (masqué)` , prerender _(pré-rendu)_ et `unloaded` _(\*\*déchargées_).
+- {{domxref("Document.xmlEncoding")}} {{Deprecated_inline}}
+  - : retourne le codage déterminé par une déclaration XML.
+- {{domxref("Document.xmlStandalone")}} {{obsolete_inline("10.0")}}
+  - : renvoie `true` si la déclaration XML précise que le document doit être autonome (par exemple, une partie externe de la DTD du contenu du document), sinon `false` _(faux)_.
+- {{domxref("Document.xmlVersion")}} {{obsolete_inline("10.0")}}
+  - : retourne le numéro de la version spécifié dans la déclaration XML ou `"1.0"` si la déclaration est absente.
+
+L'interface Document est étendue avec l'interface {{domxref("ParentNode")}} :
+
+{{page("/fr/docs/Web/API/ParentNode","Propriétés")}}
+
+### Extensions du document HTML
+
+L'interface Document, pour les documents HTML, hérite de l'interface *{{domxref("HTMLDocument")}}*  ou depuis HTML5, est étendue pour eux.
+
+- {{domxref("Document.activeElement")}} {{readonlyinline}}
+  - : Renvoie l'élément courant qui a la focus.
+- {{domxref("Document.alinkColor")}} {{Deprecated_inline}}
+  - : Renvoie ou définit la couleur des liens actifs du corps du document.
+- {{domxref("Document.anchors")}}
+  - : Renvoie une liste de toutes les ancres du document.
+- {{domxref("Document.applets")}} {{Deprecated_inline}}
+  - : Renvoie une liste ordonnée des "applets" du document.
+- {{domxref("Document.bgColor")}} {{Deprecated_inline}}
+  - : **bgColor** renvoie ou définit la couleur d'arrière-plan du document courant.
+
+<!---->
+
+- {{domxref("Document.body")}}
+  - : **body** renvoie l'élément  {{HTMLElement("body")}} du document en cours.
+- {{domxref("Document.cookie")}}
+  - : Renvoie une liste des cookies du document, séparés par des points virgules, ou définit un cookie.
+
+<!---->
+
+- {{domxref("Document.defaultView")}} {{readonlyinline}}
+  - : Renvoie une référence à l'objet window.
+- {{domxref("Document.designMode")}}
+  - : renvoie ou définit les capacités d'édition du document entier.
+- {{domxref("Document.dir")}} {{readonlyinline}}
+  - : Assigne / renvoie le sens du texte (rtl/ltr) _(de gauche à droite / de droite à gauche)_ du document.
+- {{domxref("Document.domain")}}
+  - : renvoie ou affecte le domaine de l'élément courant.
+- {{domxref("Document.embeds")}} {{readonlyinline}}
+  - : renvoie une liste des objets {{HTMLElement('embed')}} inclus dans le document courant.
+
+<!---->
+
+- {{domxref("Document.fgColor")}} {{Deprecated_inline}}
+  - : renvoie ou définit la couleur du texte du document courant.
+- {{domxref("Document.forms")}} {{readonlyinline}}
+  - : **forms** renvoie une liste des éléments {{HTMLElement("form")}} du document courant
+- {{domxref("Document.head")}} {{readonlyinline}}
+  - : Renvoie l'élément {{HTMLElement("head")}} du document.
+- {{domxref("Document.height")}} {{non-standard_inline}} {{obsolete_inline}}
+  - : renvoie ou définit la hauteur du document courant.
+- {{domxref("Document.images")}} {{readonlyinline}}
+  - : renvoie une liste des images du document courant.
+- {{domxref("Document.lastModified")}} {{readonlyinline}}
+  - : Renvoie la date de dernière modification du document.
+- {{domxref("Document.linkColor")}} {{Deprecated_inline}}
+  - : Renvoie ou définit la couleur des liens du document.
+- {{domxref("Document.links")}} {{readonlyinline}}
+  - : Renvoie un tableau de tous les liens du document.
+- {{domxref("Document.location")}} {{readonlyinline}}
+  - : Renvoie l'URI (Uniform Ressource Identifier : _identifiant uniforme de ressource_) du document courant.
+- {{domxref("Document.plugins")}} {{readonlyinline}}
+  - : Renvoie une liste des plugins disponibles.
+- {{domxref("Document.readyState")}} {{readonlyinline}}  {{gecko_minversion_inline("1.9.2")}}
+  - : retourne l'état du chargement du document.
+- {{domxref("Document.referrer")}} {{readonlyinline}}
+  - : Renvoie l'URI de la page qui a amené à cette page.
+- {{domxref("Document.scripts")}} {{readonlyinline}}
+  - : renvoie tous les éléments {{HTMLElement("script")}}  sur le document.
+- {{domxref("Document.title")}}
+  - : Renvoie le titre du document courant.
+- {{domxref("Document.URL")}}  {{readonlyInline}}
+  - : Renvoie une chaîne de caractères contenant l'URL ("Uniform Resource Locator", _repère uniforme de ressource_) du document courant.
+
+<!---->
+
+- {{domxref("Document.vlinkColor")}} {{Deprecated_inline}}
+  - : Renvoie ou définit la couleur des liens visités du document.
+- {{domxref("Document.width")}} {{non-standard_inline}} {{obsolete_inline}}
+  - : Renvoie la largeur du document courant.
+
+### Gestionnaire d'évènements
+
+- {{domxref("Document.onafterscriptexecute")}} {{non-standard_inline}}
+  - : représente le code de gestion d'évènements pour l'évènement {{event("afterscriptexecute")}}
+- {{domxref("Document.onbeforescriptexecute")}} {{non-standard_inline}}
+  - : retourne le code de gestion d'évènements pour l'évènement {{event("beforescriptexecute")}} .
+- {{domxref("Document.oncopy")}} {{non-standard_inline}}
+  - : représente le code de gestion d'évènements pour l'évènement {{event("copy")}} .
+- {{domxref("Document.oncut")}} {{non-standard_inline}}
+  - : représente le code de gestion d'évènements pour l'évènement {{event("cut")}} .
+- {{domxref("Document.onfullscreenchange")}}
+  - : est un  {{event("Event_handlers", "event handler")}} _( gestionnaire d'évènements)_ représentant le code à appeler quand l'élément {{event("fullscreenchange")}} est relevé.
+- {{domxref("Document.onfullscreenerror")}}
+
+  {{domxref("Document.onfullscreenchange")}}
+
+  - : est un  {{event("Event_handlers", "event handler")}} _( gestionnaire d'évènements)_ représentant le code à appeler quand l'élément {{event("fullscreenerror")}} est relevé.
+
+- {{domxref("Document.onpaste")}} {{non-standard_inline}}
+  - : représente le code de gestion d'évènements pour l'évènement {{event("paste")}} .
+- {{domxref("Document.onpointerlockchange")}} {{experimental_inline}}
+  - : représente le code de gestion d'évènements pour l'évènement {{event("pointerlockchange")}} .
+- {{domxref("Document.onpointerlockerror")}} {{experimental_inline}}
+  - : représente le code de gestion d'évènements pour l'évènement {{event("pointerlockerror")}} .
+- {{domxref("Document.onreadystatechange")}} {{gecko_minversion_inline("1.9.2")}}
+  - : représente le code de gestion d'évènements pour l'évènement {{event("readystatechange")}} .
+- {{domxref("Document.onselectionchange")}} {{experimental_inline}}
+  - : est un  {{event("Event_handlers", "event handler")}} _( gestionnaire d'évènements)_ représentant le code à appeler quand l'élément {{event("selectionchange")}} est relevé.
+- {{domxref("Document.onvisibilitychange")}}
+  - : est un  {{event("Event_handlers", "event handler")}} _( gestionnaire d'évènements)_ représentant le code à appeler quand l'élément {{event("visibilitychange")}} est relevé.
+- {{domxref("Document.onwheel")}} {{non-standard_inline}}
+  - : représente le code de gestion d'évènements pour l'évènement {{event("wheel")}} .
+
+L'interface `Document` est étendue avec l'interface {{domxref("GlobalEventHandlers")}} :
+
+{{Page("/fr/docs/Web/API/GlobalEventHandlers", "Propriétés")}}
+
+## Méthodes
+
+_Cette interface hérite également des interfaces {{domxref ("Node")}} et {{domxref ("EventTarget")}}._
+
+- {{domxref("Document.adoptNode()")}}
+  - : adopte le noeud d'un document externe.
+- {{domxref("Document.captureEvents()")}} {{Deprecated_inline}}
+  - : voir {{domxref("Window.captureEvents")}}.
+- {{domxref("Document.caretPositionFromPoint()")}}{{experimental_inline}}
+  - : obtient le {{domxref ("CaretPosition")}} aux ou près des coordonnées spécifiées.
+- {{domxref("Document.caretRangeFromPoint()")}}{{non-standard_inline}}
+  - : Obtient un objet {{Domxref ("Range")}} pour le fragment de document sous les coordonnées spécifiées.
+- {{domxref("Document.createAttribute()")}}
+  - : Crée un nouvel objet {{domxref("Attr")}} et le renvoie.
+- {{domxref("Document.createAttributeNS()")}}
+  - : Crée un nouveau noeud dans l'espace nom donné et le renvoie.
+- {{domxref("Document.createCDATASection()")}}
+  - : Crée un nouveau nœud CDATA et le renvoie.
+- {{domxref("Document.createComment()")}}
+  - : Crée un nouveau nœud de commentaire et le renvoie.
+- {{domxref("Document.createDocumentFragment()")}}
+  - : Crée un nouveau fragment de document.
+- {{domxref("Document.createElement()")}}
+  - : Crée un nouvel élément avec l'étiquette spécifiée.
+- {{domxref("Document.createElementNS()")}}
+  - : Crée un nouvel élément du type et avec l'URI d'espace de nom spécifiés.
+- {{domxref("Document.createEntityReference()")}} {{obsolete_inline}}
+  - : Crée un nouvel objet de référence à une entité et le renvoie.
+- {{domxref("Document.createEvent()")}}
+  - : Crée un nouvel évènement.
+- {{domxref("Document.createNodeIterator()")}}
+  - : crée un objet {{domxref("NodeIterator")}} .
+- {{domxref("Document.createProcessingInstruction()")}}
+  - : crée un nouvel objet {{domxref("ProcessingInstruction")}} .
+- {{domxref("Document.createRange()")}}
+  - : Crée un objet {{domxref("Range")}} .
+- {{domxref("Document.createTextNode()")}}
+  - : Crée un nœud de texte.
+- {{domxref("Document.createTouch()")}} {{Deprecated_inline}}
+  - : crée un objet {{domxref("Touch")}}
+- {{domxref("Document.createTouchList()")}}
+  - : crée un objet {{domxref("TouchList")}}
+- {{domxref("Document.createTreeWalker()")}}
+  - : Crée un objet {{domxref("TreeWalker")}} .
+- {{domxref("Document.elementFromPoint()")}}{{experimental_inline}}
+  - : Renvoie l'élément visible aux coordonnées spécifiées.
+- {{domxref("Document.elementsFromPoint()")}}{{experimental_inline}}
+  - : Renvoie un tableau de tous les éléments aux coordonnées spécifiées.
+- {{domxref("Document.enableStyleSheetsForSet()")}}
+  - : active les feuilles de style pour l'ensemble de feuilles de style spécifié.
+- {{domxref("Document.exitPointerLock()")}} {{experimental_inline}}
+  - : Supprime le verrou du pointeur.
+- {{domxref("Document.getAnimations()")}} {{experimental_inline}}
+  - : retourne un tableau de tous les objets {{domxref("Animation")}} actuels, dont les éléments cibles sont les descendants de ce `document`.
+
+<!---->
+
+- {{domxref("Document.getElementsByClassName()")}}
+  - : Renvoie une liste des éléments ayant le nom de classe donné.
+
+<!---->
+
+- {{domxref("Document.getElementsByTagName()")}}
+  - : Renvoie une liste des éléments ayant le nom de balise donné.
+
+<!---->
+
+- {{domxref("Document.getElementsByTagNameNS()")}}
+  - : Renvoie une liste des éléments du nom de balise et de l'espace de noms spécifiés.
+
+<!---->
+
+- {{domxref("Document.importNode()")}}
+  - : Renvoie une copie (un clone) d'un élément provenant d'un document externe.
+- {{domxref("Document.normalizeDocument()")}} {{obsolete_inline}}
+  - : remplace les entités, normalise les noeuds de texte, etc.
+- {{domxref("Document.registerElement()")}} {{experimental_inline}}
+  - : Enregistre un composant Web.
+- {{domxref("Document.releaseCapture()")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}
+  - : Libère la capture de la souris en cours s'il s'agit d'un élément de ce document.
+- {{domxref("Document.releaseEvents()")}} {{non-standard_inline}} {{Deprecated_inline}}
+  - : voir {{domxref("Window.releaseEvents()")}}.
+- {{domxref("Document.routeEvent()")}} {{non-standard_inline}} {{obsolete_inline(24)}}
+  - : Voir {{domxref("Window.routeEvent()")}}.
+- {{domxref("Document.mozSetImageElement()")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}
+  - : Vous permet de modifier l'élément utilisé comme image d'arrière-plan pour un ID d'élément spécifié.
+
+L'interface `Document` est étendue avec l'interface {{domxref("ParentNode")}} :
+
+- {{domxref("document.getElementById","document.getElementById(String id)")}}
+  - : retourne une référence d'objet à l'élément identifié.
+- {{domxref("document.querySelector","document.querySelector(String selector)")}} {{gecko_minversion_inline("1.9.1")}}
+  - : Renvoie le premier noeud `Element` dans le document, dans l'ordre du document, qui correspond aux sélecteurs spécifiés.
+- {{domxref("document.querySelectorAll","document.querySelectorAll(String selector)")}} {{gecko_minversion_inline("1.9.1")}}
+  - : retourne une liste de tous les noeuds éléments inclus dans le document qui correspondent aux sélecteurs spécifiés.
+
+L'interface Document est étendue avec l'interface  {{domxref("XPathEvaluator")}} :
+
+- {{domxref("document.createExpression","document.createExpression(String expression, XPathNSResolver resolver)")}}
+  - : compile une [`XPathExpression`](/fr/docs/Web/API/XPathExpression) qui peut ensuite être utilisée pour des évaluations (répétées).
+- {{domxref("document.createNSResolver","document.createNSResolver(Node resolver)")}}
+  - : crée un objet {{domxref("XPathNSResolver")}} .
+- {{domxref("document.evaluate","document.evaluate(String expression, Node contextNode, XPathNSResolver resolver, Number type, Object result)")}}
+  - : évalue l'expression XPath .
+
+### Extensions pour les documents HTML
+
+- {{domxref("document.clear()")}} {{non-standard_inline}} {{Deprecated_inline}}
+  - : dans la majorité des navigateurs modernes, y compris les versions récentes de Firefox et Internet Explorer, cette méthode ne fait rien.
+- {{domxref("document.close()")}}
+  - : ferme un flux de document pour l'écriture.
+- {{domxref("document.execCommand","document.execCommand(String command[, Boolean showUI[, String value]])")}}
+  - : Sur un document modifiable, exécute une commande de formatage.
+- {{domxref("document.getElementsByName","document.getElementsByName(String name)")}}
+  - : retourne une liste d'éléments ayant le nom donné.
+- {{domxref("document.getSelection()")}}
+  - : retourne un objet {{domxref("Selection")}} relatif au texte sélectionné dans le document.
+- {{domxref("document.hasFocus()")}}
+  - : retourne `true` (vrai) si le focus est actuellement localisé n'importe où sur le document spécifié.
+- {{domxref("document.open()")}}
+  - : Ouvre un flux pour l'écriture dans le document.
+- {{domxref("document.queryCommandEnabled","document.queryCommandEnabled(String command)")}}
+  - : Renvoie `true` si la commande de formatage peut être exécutée sur la plage courante.
+- {{domxref("document.queryCommandIndeterm","document.queryCommandIndeterm(String command)")}}
+  - : Renvoie `true` si la commande de formatage est dans un état indéterminé sur la plage courante.
+- {{domxref("document.queryCommandState","document.queryCommandState(String command)")}}
+  - : Renvoie `true` si la commande de formatage a été exécutée sur la plage courante.
+- {{domxref("document.queryCommandSupported","document.queryCommandSupported(String command)")}}
+  - : retourne `true` _(vrai)_ si la commande de formatage est supportée sur la plage courante.
+- {{domxref("document.queryCommandValue","document.queryCommandValue(String command)")}}
+  - : renvoie la valeur courante de la plage en cours pour une commande de formatage.
+- {{domxref("document.write","document.write(String text)")}}
+  - : Écrit du texte dans le document.
+- {{domxref("document.writeln","document.writeln(String text)")}}
+  - : Écrit une ligne de texte dans le document.
+
+## Spécifications
+
+| Spécification                                                                                                                | Statut                                       | Commentaire                                                                                |
+| ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | ------------------------------------------------------------------------------------------ |
+| {{SpecName('Page Visibility API', '#onvisiblitychange-event-handler', 'onvisibilitychange')}} | {{Spec2('Page Visibility API')}} | Ajoute `onvisibilitychange.`                                                               |
+| {{SpecName('Selection API', '', 'Extend Document and GlobalEventHandlers')}}                         | {{Spec2('Selection API')}}         | Ajoute `onselectstart`et `onselectionchange`.                                              |
+| {{SpecName('DOM1','#i-Document','Document')}}                                                                 | {{Spec2('DOM1')}}                     | Définition initiale pour l'interface                                                       |
+| {{SpecName('DOM2 Core','#i-Document','Document')}}                                                         | {{Spec2('DOM2 Core')}}                 | Remplace DOM 1                                                                             |
+| {{SpecName('DOM3 Core','#i-Document','Document')}}                                                         | {{Spec2('DOM3 Core')}}                 | remplace DOM 2                                                                             |
+| {{SpecName('DOM WHATWG','#interface-document','Document')}}                                             | {{Spec2('DOM WHATWG')}}             | en vue de remplacer DOM 3                                                                  |
+| {{SpecName('HTML WHATWG','dom.html#the-document-object','Document')}}                                 | {{Spec2('HTML WHATWG')}}             | Transforme l'interface {{domxref("HTMLDocument")}} en une extension de `Document` |
+| {{SpecName('DOM3 XPath','xpath.html#XPathEvaluator','XPathEvaluator')}}                             | {{Spec2('DOM3 XPath')}}             | Definit l'interface {{domxref("XPathEvaluator")}} qui étend le document.        |
+| {{SpecName('Page Visibility API', '#sec-document-interface', 'Document')}}                         | {{Spec2('Page Visibility API')}} | Étend l'interface `Document`  avec les attributs `visibilityState` et `hidden`.            |
+| {{SpecName('HTML Editing','#dom-document-getselection','Document')}}                                 | {{Spec2('HTML Editing')}}             | Étend l'interface `Document`                                                               |
+| {{SpecName('CSSOM View','#extensions-to-the-document-interface','Document')}}                     | {{Spec2('CSSOM View')}}             | Étend l'interface `Document`                                                               |
+| {{SpecName('CSSOM','#extensions-to-the-document-interface','Document')}}                             | {{Spec2('CSSOM')}}                     | Étend l'interface `Document`                                                               |
+| {{SpecName('Pointer Lock','#extensions-to-the-document-interface','Document')}}                     | {{Spec2('Pointer Lock')}}             | Étend l'interface `Document`                                                               |
+
+## Compatibilité des navigateurs notes
+
+### Notes concernant Firefox :
+
+Mozilla définit un ensemble de propriétés non-standard créées seulement pour le contenu XUL :
+
+- {{domxref("document.currentScript")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}
+  - : retourne l'élément {{HTMLElement("script")}} qui est en cours d'exécution.
+- {{domxref("document.documentURIObject")}} {{gecko_minversion_inline("1.9")}}
+  - : (extensions Mozilla seulement) retourne l'objet  {{Interface("nsIURI")}} représentant l'URI du document. Cette propriété a seulement une signification spéciale dans le code JavaScript privilégié (avec les privilèges UniversalXPConnect).
+- {{domxref("document.popupNode")}}
+  - : retourne le noeud ouvert lors de l'appel d'une fenêtre contextuelle.
+- {{domxref("document.tooltipNode")}}
+  - : retourne le noeud qui est la cible de l'info-bulle actuelle.
+
+Mozilla a également défini quelques méthodes non standard :
+
+- {{domxref("document.execCommandShowHelp")}} {{obsolete_inline("14.0")}}
+  - : Cette méthode n'a jamais rien fait et a toujours lancé une exception, elle a donc été supprimée dans Gecko 14.0 {{geckoRelease ("14.0")}}.
+- {{domxref("document.getBoxObjectFor")}} {{obsolete_inline}}
+  - : Utiliser la méthode {{domxref("Element.getBoundingClientRect()")}} à la place.
+- {{domxref("document.loadOverlay")}}
+  - : charge dynamiquement un [XUL overlay](/fr/docs/Overlays_XUL) . Celui-ci fonctionne seulement dans les documents XUL.
+- {{domxref("document.queryCommandText")}} {{obsolete_inline("14.0")}}
+  - : Cette méthode n'a jamais rien fait d'autre que de lancer une exception, elle a donc été supprimée dans Gecko 14.0 {{geckoRelease ("14.0")}}.
+
+### Notes concernant Internet Explorer
+
+Microsoft a défini quelques propriétés non standard :
+
+- {{domxref("document.fileSize")}}\* {{non-standard_inline}} {{obsolete_inline}}
+  - : Retourne la taille en octets du document. À partir d'Internet Explorer 11, cette propriété n'est plus prise en charge. Voir  [MSDN](http://msdn.microsoft.com/en-us/library/ms533752%28v=VS.85%29.aspx).
+
+Internet Explorer ne prend pas en charge toutes les méthodes de l'interface Node dans l'interface Document :
+
+- {{domxref("document.contains")}}
+  - : Pour contourner le problème, `document.body.contains ()` peut être utilisé.
diff --git a/files/fr/web/api/document/keypress_event/index.md b/files/fr/web/api/document/keypress_event/index.md
index 76807b1f92..f079811072 100644
--- a/files/fr/web/api/document/keypress_event/index.md
+++ b/files/fr/web/api/document/keypress_event/index.md
@@ -9,94 +9,91 @@ tags:
   - Reference
 translation_of: Web/API/Document/keypress_event
 ---
-<div>{{APIRef}} {{deprecated_header}}</div>
+{{APIRef}} {{deprecated_header}}
 
-<p>L'évènement <strong><code>keypress</code></strong> est déclenché lorsqu'une touche produisant un caractère est pressée. Cela concerne les touches qui produisent des caractères alphabétiques, des caractères numériques et des signes de ponctuations. Les touches <kbd>Alt</kbd>, <kbd>Shift</kbd>, <kbd>Ctrl</kbd> ou <kbd>Meta</kbd> ne sont pas concernées.</p>
+L'évènement **`keypress`** est déclenché lorsqu'une touche produisant un caractère est pressée. Cela concerne les touches qui produisent des caractères alphabétiques, des caractères numériques et des signes de ponctuations. Les touches <kbd>Alt</kbd>, <kbd>Shift</kbd>, <kbd>Ctrl</kbd> ou <kbd>Meta</kbd> ne sont pas concernées.
 
-<div class="warning">
-<p><strong>Attention :</strong> Cet évènement est déprécié et il faudrait plutôt utiliser <code><a href="/fr/docs/Web/API/HTMLElement/beforeinput_event">beforeinput</a></code> ou <code><a href="/fr/docs/Web/API/Document/keydown_event">keydown</a></code>.</p>
-</div>
+> **Attention :** Cet évènement est déprécié et il faudrait plutôt utiliser [`beforeinput`](/fr/docs/Web/API/HTMLElement/beforeinput_event) ou [`keydown`](/fr/docs/Web/API/Document/keydown_event).
 
 <table class="properties">
- <thead>
- </thead>
- <tbody>
-  <tr>
-   <th>Interface</th>
-   <td>{{domxref("KeyboardEvent")}}</td>
-  </tr>
-  <tr>
-   <th>Remonte sur les parents (<em>bubbles</em>)</th>
-   <td>Oui</td>
-  </tr>
-  <tr>
-   <th>Annulable</th>
-   <td>Oui</td>
-  </tr>
-  <tr>
-   <th>Action par défaut</th>
-   <td>Cela peut varier : évènement <code>keypress</code> ; ouverture du système de composition du texte ; évènements <code><a href="/fr/docs/Web/API/Element/blur_event">blur</a></code> et <code><a href="/fr/docs/Web/API/Element/focus_event">focus</a></code> ; évènement <a href="/fr/docs/Web/API/Element/DOMActivate_event"><code>DOMActivate</code> </a>{{deprecated_inline}}; autre évènement.</td>
-  </tr>
- </tbody>
+  <thead></thead>
+  <tbody>
+    <tr>
+      <th>Interface</th>
+      <td>{{domxref("KeyboardEvent")}}</td>
+    </tr>
+    <tr>
+      <th>Remonte sur les parents (<em>bubbles</em>)</th>
+      <td>Oui</td>
+    </tr>
+    <tr>
+      <th>Annulable</th>
+      <td>Oui</td>
+    </tr>
+    <tr>
+      <th>Action par défaut</th>
+      <td>
+        Cela peut varier : évènement <code>keypress</code> ; ouverture du
+        système de composition du texte ; évènements
+        <code><a href="/fr/docs/Web/API/Element/blur_event">blur</a></code> et
+        <code><a href="/fr/docs/Web/API/Element/focus_event">focus</a></code> ;
+        évènement
+        <a href="/fr/docs/Web/API/Element/DOMActivate_event"
+          ><code>DOMActivate</code> </a
+        >{{deprecated_inline}}; autre évènement.
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Ajout_d'un_addEventListener">Ajout d'un <code>addEventListener</code></h3>
+### Ajout d'un `addEventListener`
 
-<p>Dans cet exemple, on affiche la valeur de {{domxref("KeyboardEvent.code")}} lorsqu'on appuie sur une touche :</p>
+Dans cet exemple, on affiche la valeur de {{domxref("KeyboardEvent.code")}} lorsqu'on appuie sur une touche :
 
-<pre class="brush: html">&lt;p&gt;
+```html
+<p>
    Cliquez dans l'iframe pour lui passer le focus
    puis appuyez sur des touches du clavier.
-&lt;/p&gt;
-&lt;p id="log"&gt;&lt;/p&gt;</pre>
+</p>
+<p id="log"></p>
+```
 
-<pre class="brush: js">const log = document.getElementById('log');
+```js
+const log = document.getElementById('log');
 
 document.addEventListener('keypress', logKey);
 
 function logKey(e) {
   log.textContent += ` ${e.code}`;
-}</pre>
+}
+```
 
-<p>{{EmbedLiveSample("addEventListener_keypress_example")}}</p>
+{{EmbedLiveSample("addEventListener_keypress_example")}}
 
-<h3 id="Équivalent_onkeypress">Équivalent <code>onkeypress</code></h3>
+### Équivalent `onkeypress`
 
-<pre class="brush: js">document.onkeypress = logKey;</pre>
+```js
+document.onkeypress = logKey;
+```
 
-<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>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('UI Events', '#event-type-keypress')}}</td>
-   <td>{{Spec2('UI Events')}}</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                    | État                         |
+| ---------------------------------------------------------------- | ---------------------------- |
+| {{SpecName('UI Events', '#event-type-keypress')}} | {{Spec2('UI Events')}} |
+
+## Compatibilité des navigateurs
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+{{Compat("api.Document.keypress_event")}}
 
-<p>{{Compat("api.Document.keypress_event")}}</p>
+## Voir aussi
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+- {{domxref("GlobalEventHandlers.onkeypress")}}
+- L'interface {{domxref("Element")}} que cet évènement cible
+- Les évènements associés :
 
-<ul>
- <li>{{domxref("GlobalEventHandlers.onkeypress")}}</li>
- <li>L'interface {{domxref("Element")}} que cet évènement cible</li>
- <li>Les évènements associés :
-  <ul>
-   <li><code><a href="/fr/docs/Web/API/Document/keydown_event">keydown</a></code></li>
-   <li><code><a href="/fr/docs/Web/API/Document/keyup_event">keyup</a></code></li>
-   <li><code><a href="/fr/docs/Web/API/HTMLElement/beforeinput_event">beforeinput</a></code></li>
-  </ul>
- </li>
-</ul>
+  - [`keydown`](/fr/docs/Web/API/Document/keydown_event)
+  - [`keyup`](/fr/docs/Web/API/Document/keyup_event)
+  - [`beforeinput`](/fr/docs/Web/API/HTMLElement/beforeinput_event)
diff --git a/files/fr/web/api/document/lastmodified/index.md b/files/fr/web/api/document/lastmodified/index.md
index 90a7738bb3..bde5ee06e8 100644
--- a/files/fr/web/api/document/lastmodified/index.md
+++ b/files/fr/web/api/document/lastmodified/index.md
@@ -3,66 +3,70 @@ title: Document.lastModified
 slug: Web/API/Document/lastModified
 translation_of: Web/API/Document/lastModified
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p>Retourne une chaîne de caractère contenant la date et l'heure à laquelle le présent document a été modifié pour la dernière fois.</p>
+Retourne une chaîne de caractère contenant la date et l'heure à laquelle le présent document a été modifié pour la dernière fois.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var>string</var> = document.lastModified;
-</pre>
+    string = document.lastModified;
 
-<h2 id="Example">Exemples</h2>
+## Exemples
 
-<h3 id="Exemple_1_Utilisation_simple">Exemple #1: Utilisation simple</h3>
+### Exemple #1: Utilisation simple
 
-<pre class="brush:js">alert(document.lastModified);
+```js
+alert(document.lastModified);
 // renvoie: 11/28/2015 16:11:15
-</pre>
+```
 
-<h3 id="Exemple_2_Transformer_lastModified_en_un_objet_de_type_Date">Exemple #2: Transformer <code>lastModified</code> en un objet de type <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Date"><code>Date</code></a></h3>
+### Exemple #2: Transformer `lastModified` en un objet de type [`Date`](/en-US/docs/JavaScript/Reference/Global_Objects/Date)
 
-<pre class="brush:js">var oLastModif = new Date(document.lastModified);
-</pre>
+```js
+var oLastModif = new Date(document.lastModified);
+```
 
-<h3 id="Exemple_3_Transformer_lastModified_en_un_nombre_de_millisecondes_passées_depuis_le_1_Janvier_1970_à_000000_heure_locale.">Exemple #3: Transformer <code>lastModified</code> en un nombre de millisecondes passées depuis le 1 Janvier 1970 à 00:00:00, heure locale.</h3>
+### Exemple #3: Transformer `lastModified` en un nombre de millisecondes passées depuis le 1 Janvier 1970 à 00:00:00, heure locale.
 
-<pre class="brush:js">var nLastModif = Date.parse(document.lastModified);
-</pre>
+```js
+var nLastModif = Date.parse(document.lastModified);
+```
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p>Veuillez noter qu'en tant que chaîne de caractères, <code>lastModified </code>ne peut être <em>facilement </em>utilisé pour des comparaisons entre les dates modifées des documents. Voici un exemple possible qui montre comment afficher une alerte quand la page change (voir aussi: <a href="/en-US/docs/DOM/document.cookie">API des cookies en JavaScript</a>):</p>
+Veuillez noter qu'en tant que chaîne de caractères, `lastModified `ne peut être *facilement* utilisé pour des comparaisons entre les dates modifées des documents. Voici un exemple possible qui montre comment afficher une alerte quand la page change (voir aussi: [API des cookies en JavaScript](/en-US/docs/DOM/document.cookie)):
 
-<pre class="brush: js">if (Date.parse(document.lastModified) &gt; parseFloat(document.cookie.replace(/(?:(?:^|.*;)\s*last_modif\s*\=\s*([^;]*).*$)|^.*$/, "$1") || "0")) {
+```js
+if (Date.parse(document.lastModified) > parseFloat(document.cookie.replace(/(?:(?:^|.*;)\s*last_modif\s*\=\s*([^;]*).*$)|^.*$/, "$1") || "0")) {
     document.cookie = "last_modif=" + Date.now() + "; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=" + location.pathname;
     alert("Cette page a changé !");
-}</pre>
+}
+```
 
-<p>… le même exemple, mais en ignorant la première visite:</p>
+… le même exemple, mais en ignorant la première visite:
 
-<pre class="brush: js">var
+```js
+var
 
     nLastVisit = parseFloat(document.cookie.replace(/(?:(?:^|.*;)\s*last_modif\s*\=\s*([^;]*).*$)|^.*$/, "$1")),
     nLastModif = Date.parse(document.lastModified);
 
-if (isNaN(nLastVisit) || nLastModif &gt; nLastVisit) {
+if (isNaN(nLastVisit) || nLastModif > nLastVisit) {
     document.cookie = "last_modif=" + Date.now() + "; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=" + location.pathname;
     if (isFinite(nLastVisit)) {
         alert("Cette page a changé !");
     }
-}</pre>
+}
+```
 
-<div class="note">
-  <p><strong>Note:</strong> WebKit renvoie le temps sous forme de chaîne de caractère en UTC; Gecko et Internet Explorer renvoient le temps selon le fuseau horaire local. (Voir: <a href="https://bugs.webkit.org/show_bug.cgi?id=4363">Bogue 4363 – document.lastModified renoive la date en UTC, mais devrait la renvoyer selon le fuseau horaire local</a>)</p>
-</div>
+> **Note :** WebKit renvoie le temps sous forme de chaîne de caractère en UTC; Gecko et Internet Explorer renvoient le temps selon le fuseau horaire local. (Voir: [Bogue 4363 – document.lastModified renoive la date en UTC, mais devrait la renvoyer selon le fuseau horaire local](https://bugs.webkit.org/show_bug.cgi?id=4363))
 
-<p>Si vous voulez savoir <strong>si <em>une page externe</em> a changé, </strong>veuillez lire <a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Get_last_modified_date">ce paragraphe à propos de l'API <code>XMLHttpRequest()</code></a>.</p>
+Si vous voulez savoir **si *une page externe* a changé,** veuillez lire [ce paragraphe à propos de l'API `XMLHttpRequest()`](/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Get_last_modified_date).
 
-<h2 id="Specification">Spécification</h2>
+## Spécification
 
-<p>HTML5</p>
+HTML5
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Document.lastModified")}}</p>
+{{Compat("api.Document.lastModified")}}
diff --git a/files/fr/web/api/document/laststylesheetset/index.md b/files/fr/web/api/document/laststylesheetset/index.md
index dce73ac17e..c0fb8e8080 100644
--- a/files/fr/web/api/document/laststylesheetset/index.md
+++ b/files/fr/web/api/document/laststylesheetset/index.md
@@ -8,41 +8,35 @@ tags:
   - Propriétés
 translation_of: Web/API/Document/lastStyleSheetSet
 ---
-<p>{{ APIRef("DOM") }}{{ gecko_minversion_header("1.9") }}</p>
+{{ APIRef("DOM") }}{{ gecko_minversion_header("1.9") }}
 
-<p>Renvoie le dernier jeu de feuilles de styles activé ; cette valeur de la propriété change chaque fois que la propriété {{ domxref("document.selectedStyleSheetSet") }} est modifiée.</p>
+Renvoie le dernier jeu de feuilles de styles activé ; cette valeur de la propriété change chaque fois que la propriété {{ domxref("document.selectedStyleSheetSet") }} est modifiée.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="eval"><em>lastStyleSheetSet</em> = document.lastStyleSheetSet
-</pre>
+    lastStyleSheetSet = document.lastStyleSheetSet
 
-<p>En retour, <code>lastStyleSheetSet</code> indique le jeu de feuilles de styles qui a été défini le plus récemment. Si le jeu de feuilles de style en cours n'a pas été modifié en définissant {{ domxref("document.selectedStyleSheetSet") }}, la valeur retournée est <code>null</code>.</p>
+En retour, `lastStyleSheetSet` indique le jeu de feuilles de styles qui a été défini le plus récemment. Si le jeu de feuilles de style en cours n'a pas été modifié en définissant {{ domxref("document.selectedStyleSheetSet") }}, la valeur retournée est `null`.
 
-<div class="note">
-  <p><strong>Note :</strong> Cette valeur ne doit pas changer lorsque {{ domxref("document.enableStyleSheetsForSet()") }} est appelé.</p>
-</div>
+> **Note :** Cette valeur ne doit pas changer lorsque {{ domxref("document.enableStyleSheetsForSet()") }} est appelé.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">var lastSheetSet = document.lastStyleSheetSet;
+```js
+var lastSheetSet = document.lastStyleSheetSet;
 if (!lastSheetSet) {
   lastSheetSet = "Sheet not yet changed";
 }
 console.log("The last sheet set is: " + lastSheetSet);
-</pre>
+```
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{ domxref("document.preferredStyleSheetSet") }}</li>
- <li>{{ domxref("document.selectedStyleSheetSet") }}</li>
- <li>{{ domxref("document.styleSheetSets") }}</li>
- <li>{{ domxref("document.enableStyleSheetsForSet()") }}</li>
-</ul>
+- {{ domxref("document.preferredStyleSheetSet") }}
+- {{ domxref("document.selectedStyleSheetSet") }}
+- {{ domxref("document.styleSheetSets") }}
+- {{ domxref("document.enableStyleSheetsForSet()") }}
 
-<h2 id="Specification">Spécifications</h2>
+## Spécifications
 
-<ul>
- <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets">HTML5: Alternate Style Sheets</a></li>
-</ul>
+- [HTML5: Alternate Style Sheets](http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets)
diff --git a/files/fr/web/api/document/location/index.md b/files/fr/web/api/document/location/index.md
index 2a6f3e51c3..a3fb30e1ae 100644
--- a/files/fr/web/api/document/location/index.md
+++ b/files/fr/web/api/document/location/index.md
@@ -10,56 +10,39 @@ tags:
   - lecture seule
 translation_of: Web/API/Document/location
 ---
-<p>La propriété en lecture seule <strong><code>Document.location</code></strong><code> renvoie un objet</code> {{domxref("Location")}}, contenant les informations sur l'URL du document et fournit des moyens pour modifier cette URL ou charger une autre URL.</p>
+La propriété en lecture seule **`Document.location`**` renvoie un objet` {{domxref("Location")}}, contenant les informations sur l'URL du document et fournit des moyens pour modifier cette URL ou charger une autre URL.
 
-<p>Bien que <code>Document.location</code> soit un objet  <code>Location</code> en <em>lecture seule</em>, vous pouvez lui assigner un {{domxref("DOMString")}}. Cela signifie que vous pouvez dans la plupart des cas utiliser document.location comme s'il s'agissait d'une chaîne de caractères: <code>document.location = 'http://www.example.com'</code> est un synonyme de <code>document.location.href = 'http://www.example.com'</code>.</p>
+Bien que `Document.location` soit un objet  `Location` en _lecture seule_, vous pouvez lui assigner un {{domxref("DOMString")}}. Cela signifie que vous pouvez dans la plupart des cas utiliser document.location comme s'il s'agissait d'une chaîne de caractères: `document.location = 'http://www.example.com'` est un synonyme de `document.location.href = 'http://www.example.com'`.
 
-<p>Pour récupérer uniquement l'URL en tant que chaîne de caractères, la propriété {{domxref("document.URL")}} peut également être utilisée.</p>
+Pour récupérer uniquement l'URL en tant que chaîne de caractères, la propriété {{domxref("document.URL")}} peut également être utilisée.
 
-<p>Si le document courant n'est pas un contexte de navigation, la valeur renvoyée est <em>null</em>.</p>
+Si le document courant n'est pas un contexte de navigation, la valeur renvoyée est _null_.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>locationObj</em> = document.location
-document.location = 'http://www.mozilla.org' // équivalent à document.location.href = 'http://www.mozilla.org'
-</pre>
+    locationObj = document.location
+    document.location = 'http://www.mozilla.org' // équivalent à document.location.href = 'http://www.mozilla.org'
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">console.log(document.location);
+```js
+console.log(document.location);
 // Affiche un string-like
 // "http://www.example.com/juicybits.html" dans la console
-</pre>
+```
 
-<h2 id="Spécification">Spécification</h2>
+## Spécification
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "history.html#the-location-interface", "Document.location")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Pas de changement avec {{SpecName("HTML5 W3C")}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', "browsers.html#the-location-interface", "Document.location")}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Specification                                                                                                        | Status                           | Comment                                                  |
+| -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------------------------------------------- |
+| {{SpecName('HTML WHATWG', "history.html#the-location-interface", "Document.location")}} | {{Spec2('HTML WHATWG')}} | Pas de changement avec {{SpecName("HTML5 W3C")}}. |
+| {{SpecName('HTML5 W3C', "browsers.html#the-location-interface", "Document.location")}} | {{Spec2('HTML5 W3C')}}     | Définition initiale.                                     |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Document.location")}}</p>
+{{Compat("api.Document.location")}}
 
-<h2 id="Voir_également">Voir également</h2>
+## Voir également
 
-<ul>
- <li>L'interface de la valeur renvoyée, {{domxref("Location")}}.</li>
- <li>Une information similaire mais attachée au contexte de navigation, {{domxref("Window.location")}}</li>
-</ul>
+- L'interface de la valeur renvoyée, {{domxref("Location")}}.
+- Une information similaire mais attachée au contexte de navigation, {{domxref("Window.location")}}
diff --git a/files/fr/web/api/document/mozsetimageelement/index.md b/files/fr/web/api/document/mozsetimageelement/index.md
index aa70b99736..c91cbf97fd 100644
--- a/files/fr/web/api/document/mozsetimageelement/index.md
+++ b/files/fr/web/api/document/mozsetimageelement/index.md
@@ -10,31 +10,29 @@ tags:
   - Méthodes
 translation_of: Web/API/Document/mozSetImageElement
 ---
-<p>{{ ApiRef("DOM") }}</p>
+{{ ApiRef("DOM") }}
 
-<p>{{ gecko_minversion_header("2.0") }}{{ non-standard_header() }}</p>
+{{ gecko_minversion_header("2.0") }}{{ non-standard_header() }}
 
-<p>Change l'élément utilisé comme arrière-plan CSS par un arrière-plan avec un ID d'élément d'arrière-plan donné.</p>
+Change l'élément utilisé comme arrière-plan CSS par un arrière-plan avec un ID d'élément d'arrière-plan donné.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="eval">document.mozSetImageElement(<em>imageElementId</em>, imageElement);
-</pre>
+    document.mozSetImageElement(imageElementId, imageElement);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<ul>
- <li><code>imageElementId</code> est une chaîne de caractères indiquant le nom d'un élément qui a été spécifié comme une image d'arrière-plan en utilisant la fonction CSS {{ cssxref("-moz-element") }}.</li>
- <li><code>imageElement</code> est le nouvel élément à utiliser comme arrière-plan correspondant à cette chaîne d'élément image. Spécifiez <code>null</code> pour supprimer l'élément d'arrière-plan.</li>
-</ul>
+- `imageElementId` est une chaîne de caractères indiquant le nom d'un élément qui a été spécifié comme une image d'arrière-plan en utilisant la fonction CSS {{ cssxref("-moz-element") }}.
+- `imageElement` est le nouvel élément à utiliser comme arrière-plan correspondant à cette chaîne d'élément image. Spécifiez `null` pour supprimer l'élément d'arrière-plan.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<p>Cet exemple change l'arrière-plan d'un bloc {{ HTMLElement("div") }} chaque fois que l'utilisateur clique sur le bloc.</p>
+Cet exemple change l'arrière-plan d'un bloc {{ HTMLElement("div") }} chaque fois que l'utilisateur clique sur le bloc.
 
-<p><a href="/samples/domref/mozSetImageElement.html">Vue de cet exemple en direct</a>.</p>
+[Vue de cet exemple en direct](/samples/domref/mozSetImageElement.html).
 
-<pre class="brush: html">&lt;style type="text/css"&gt;
+```html
+<style type="text/css">
   #mybox {
     background-image: -moz-element(#canvasbg);
     text-align: center;
@@ -42,12 +40,13 @@ translation_of: Web/API/Document/mozSetImageElement
     height: 400px;
     cursor: pointer;
   }
-&lt;/style&gt;
-</pre>
+</style>
+```
 
-<p>Le CSS défini par le bloc {{ HTMLElement("style") }} ci-dessus est utilisé par notre {{ HTMLElement("div") }} pour afficher un élément, ayant l'id "canvasbg", en arrière-plan.</p>
+Le CSS défini par le bloc {{ HTMLElement("style") }} ci-dessus est utilisé par notre {{ HTMLElement("div") }} pour afficher un élément, ayant l'id "canvasbg", en arrière-plan.
 
-<pre class="brush: js">var c = 0x00;
+```js
+var c = 0x00;
 function clicked() {
   var canvas = document.createElement("canvas");
   canvas.setAttribute("width", 100);
@@ -58,24 +57,22 @@ function clicked() {
   ctx.fillRect(25, 25, 75, 75);
 
   c += 0x11;
-  if (c &gt; 0xff) {
+  if (c > 0xff) {
     c = 0x00;
   }
 
   document.mozSetImageElement("canvasbg", canvas);
 }
-</pre>
+```
 
-<p>Le code ici est appelé chaque fois que l'utilisateur clique sur l'élément {{ HTMLElement("div") }}. Il crée un nouveau {{ HTMLElement("canvas") }} avec la largeur et la hauteur définies à 100 pixels et le dessine dans un carré de 50 par 50 pixels. Chaque fois que la fonction est appelée, le carré est d'une couleur différente (sa composante rouge est augmentée à chaque fois), donc chaque fois que l'utilisateur clique sur l'élément, le fond est plus lumineux et rempli d'un motif plus lumineux de carreaux rouges.</p>
+Le code ici est appelé chaque fois que l'utilisateur clique sur l'élément {{ HTMLElement("div") }}. Il crée un nouveau {{ HTMLElement("canvas") }} avec la largeur et la hauteur définies à 100 pixels et le dessine dans un carré de 50 par 50 pixels. Chaque fois que la fonction est appelée, le carré est d'une couleur différente (sa composante rouge est augmentée à chaque fois), donc chaque fois que l'utilisateur clique sur l'élément, le fond est plus lumineux et rempli d'un motif plus lumineux de carreaux rouges.
 
-<p>Une fois le canvas dessiné, <code>document.mozSetImageElement()</code> est appelée pour définir l'arrière-plan de tout CSS en utilisant l'ID "canvasbg" comme ID d'élément d'arrière-plan pour être notre nouveau canvas.</p>
+Une fois le canvas dessiné, `document.mozSetImageElement()` est appelée pour définir l'arrière-plan de tout CSS en utilisant l'ID "canvasbg" comme ID d'élément d'arrière-plan pour être notre nouveau canvas.
 
-<h2 id="Specification">Spécifications</h2>
+## Spécifications
 
-<p>Ne fait partie d'aucune spécification.</p>
+Ne fait partie d'aucune spécification.
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{ cssxref("-moz-element") }}</li>
-</ul>
+- {{ cssxref("-moz-element") }}
diff --git a/files/fr/web/api/document/mozsyntheticdocument/index.md b/files/fr/web/api/document/mozsyntheticdocument/index.md
index c8847269ca..8a9529ff35 100644
--- a/files/fr/web/api/document/mozsyntheticdocument/index.md
+++ b/files/fr/web/api/document/mozsyntheticdocument/index.md
@@ -8,28 +8,26 @@ tags:
   - Propriétés
 translation_of: Web/API/Document/mozSyntheticDocument
 ---
-<p>{{ ApiRef("DOM") }}</p>
+{{ ApiRef("DOM") }}
 
-<p>Indique si le document est synthétique ou non ; c'est-à-dire un document représentant une image autonome, une vidéo, un son ou analogue.</p>
+Indique si le document est synthétique ou non ; c'est-à-dire un document représentant une image autonome, une vidéo, un son ou analogue.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="eval"><em>var isSynthetic</em> = <em>document</em>.mozSyntheticDocument;
-</pre>
+    var isSynthetic = document.mozSyntheticDocument;
 
-<p>En retour, <code>isSynthetic</code> est <code>true</code> (<em>vrai</em>) si le document est synthétique ; sinon, <code>false</code> (<em>faux</em>).</p>
+En retour, `isSynthetic` est `true` (_vrai_) si le document est synthétique ; sinon, `false` (_faux_).
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<p>Il peut être utile, si vous avez un élément de menu contextuel que vous souhaitez uniquement afficher pour les documents synthétiques (ou, inversement, pour les documents qui ne sont pas synthétiques).</p>
+Il peut être utile, si vous avez un élément de menu contextuel que vous souhaitez uniquement afficher pour les documents synthétiques (ou, inversement, pour les documents qui ne sont pas synthétiques).
 
-<pre class="eval">var isSynthetic = document.mozSyntheticDocument;
+    var isSynthetic = document.mozSyntheticDocument;
 
-if (isSynthetic) {
-  /* insert your menu item here */
-}
-</pre>
+    if (isSynthetic) {
+      /* insert your menu item here */
+    }
 
-<h2 id="Specification">Spécifications</h2>
+## Spécifications
 
-<p>Ne fait partie d'aucune spécification.</p>
+Ne fait partie d'aucune spécification.
diff --git a/files/fr/web/api/document/onafterscriptexecute/index.md b/files/fr/web/api/document/onafterscriptexecute/index.md
index 9c3d8d138a..a53d74a24d 100644
--- a/files/fr/web/api/document/onafterscriptexecute/index.md
+++ b/files/fr/web/api/document/onafterscriptexecute/index.md
@@ -8,41 +8,35 @@ tags:
   - scripts
 translation_of: Web/API/Document/onafterscriptexecute
 ---
-<div>{{ ApiRef("DOM") }} {{non-standard_header}}</div>
+{{ ApiRef("DOM") }} {{non-standard_header}}
 
-<div> </div>
+## Résumé
 
-<h2 id="Résumé">Résumé</h2>
+Lancé lorsqu'un élément {{HTMLElement("script")}} statique achève l'exécution de son script. N'est pas lancé si l'élément est ajouté dynamiquement, par exemple avec appendChild().
 
-<p>Lancé lorsqu'un élément {{HTMLElement("script")}} statique achève l'exécution de son script. N'est pas lancé si l'élément est ajouté dynamiquement, par exemple avec appendChild().</p>
+## Syntaxe
 
-<h2 id="Syntaxe">Syntaxe</h2>
+    document.onafterscriptexecute = funcRef;
 
-<pre class="syntaxbox"><em>document.onafterscriptexecute = funcRef;</em>
-</pre>
+_funcRef_ est une référence de fonction appelée lorsqu'un évènement est lancé. L'attribut de la `target` (cible) d'évènement est défini sur l'{{domxref("Element")}} script dont l'exécution vient de s'achever.
 
-<p><em>funcRef</em> est une référence de fonction appelée lorsqu'un évènement est lancé. L'attribut de la <code>target</code> (cible) d'évènement est défini sur l'{{domxref("Element")}} script dont l'exécution vient de s'achever.</p>
+## Exemple
 
-<h2 id="Exemple">Exemple</h2>
-
-<pre class="brush:js">function finished(e) {
+```js
+function finished(e) {
   logMessage("Finished script with ID: " + e.target.id);
 }
 
 document.addEventListener("afterscriptexecute", finished, true);
-</pre>
+```
 
-<p><a href="/samples/html/currentScript.html">Voir l'exemple sur une page</a></p>
+[Voir l'exemple sur une page](/samples/html/currentScript.html)
 
-<h2 id="Spécification">Spécification</h2>
+## Spécification
 
-<ul>
- <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#the-script-element">HTML5</a></li>
-</ul>
+- [HTML5](http://www.whatwg.org/specs/web-apps/current-work/#the-script-element)
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("Document.onbeforescriptexecute")}}</li>
- <li>{{domxref("Document.currentScript")}}</li>
-</ul>
+- {{domxref("Document.onbeforescriptexecute")}}
+- {{domxref("Document.currentScript")}}
diff --git a/files/fr/web/api/document/onbeforescriptexecute/index.md b/files/fr/web/api/document/onbeforescriptexecute/index.md
index 8527a38555..638590127d 100644
--- a/files/fr/web/api/document/onbeforescriptexecute/index.md
+++ b/files/fr/web/api/document/onbeforescriptexecute/index.md
@@ -8,39 +8,35 @@ tags:
   - scripts
 translation_of: Web/API/Document/onbeforescriptexecute
 ---
-<div>{{ApiRef("DOM")}} {{non-standard_header }}</div>
+{{ApiRef("DOM")}} {{non-standard_header }}
 
-<h2 id="Résumé">Résumé</h2>
+## Résumé
 
-<p>Lancé lorsque le code dans un élément {{HTMLElement("script")}} déclaré dans un document HTML est sur le point de s'exécuter. N'est pas déclenché si l'élément est ajouté dynamiquement, par exemple avec appendChild().</p>
+Lancé lorsque le code dans un élément {{HTMLElement("script")}} déclaré dans un document HTML est sur le point de s'exécuter. N'est pas déclenché si l'élément est ajouté dynamiquement, par exemple avec appendChild().
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>document.onbeforescriptexecute = funcRef;</em>
-</pre>
+    document.onbeforescriptexecute = funcRef;
 
-<p><em>funcRef</em> est une référence de fonction appelée lorsque l'évènement est lancé. L'attribut de la <code>target</code> (<em>cible</em>) d'évènement est défini dans l'{{domxref("Element")}} script qui est sur le point d'être exécuté.</p>
+_funcRef_ est une référence de fonction appelée lorsque l'évènement est lancé. L'attribut de la `target` (_cible_) d'évènement est défini dans l'{{domxref("Element")}} script qui est sur le point d'être exécuté.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">function starting(e) {
+```js
+function starting(e) {
   logMessage("Starting script with ID: " + e.target.id);
 }
 
 document.addEventListener("beforescriptexecute", starting, true);
-</pre>
+```
 
-<p><a href="/samples/html/currentScript.html">Voir l'exemple sur une page</a></p>
+[Voir l'exemple sur une page](/samples/html/currentScript.html)
 
-<h2 id="Spécification">Spécification</h2>
+## Spécification
 
-<ul>
- <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#the-script-element">HTML5</a></li>
-</ul>
+- [HTML5](http://www.whatwg.org/specs/web-apps/current-work/#the-script-element)
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("Document.onafterscriptexecute")}}</li>
- <li>{{domxref("Document.currentScript")}}</li>
-</ul>
+- {{domxref("Document.onafterscriptexecute")}}
+- {{domxref("Document.currentScript")}}
diff --git a/files/fr/web/api/document/onfullscreenchange/index.md b/files/fr/web/api/document/onfullscreenchange/index.md
index a3251b0188..c5d6336ada 100644
--- a/files/fr/web/api/document/onfullscreenchange/index.md
+++ b/files/fr/web/api/document/onfullscreenchange/index.md
@@ -3,50 +3,37 @@ title: Document.onfullscreenchange
 slug: Web/API/Document/onfullscreenchange
 translation_of: Web/API/Document/onfullscreenchange
 ---
-<div>{{ApiRef("Fullscreen API")}}</div>
+{{ApiRef("Fullscreen API")}}
 
-<p>La propriété <code><strong>Document</strong></code><strong><code>.onfullscreenchange</code> </strong>est un gestionnaire d'événement pour l'événement {{event("fullscreenchange")}} qui est lancé lorsque le document entre ou sort du mode plein écran.</p>
+La propriété **`Document`\*\***`.onfullscreenchange` \*\*est un gestionnaire d'événement pour l'événement {{event("fullscreenchange")}} qui est lancé lorsque le document entre ou sort du mode plein écran.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var>targetDocument</var>.onfullscreenchange = <var>fullscreenChangeHandler</var>;
-</pre>
+    targetDocument.onfullscreenchange = fullscreenChangeHandler;
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">document.onfullscreenchange = function ( event ) {
+```js
+document.onfullscreenchange = function ( event ) {
   console.log("FULL SCREEN CHANGE")
 };
 document.documentElement.onclick = function () {
   // requestFullscreen() doit être un gestionnaire d'événement, sinon ça échouera
   document.documentElement.requestFullscreen();
 }
-</pre>
-
-<h2 id="Specifications">Specifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName("Fullscreen", "#handler-document-onfullscreenchange", "onfullscreenchange")}}</td>
-   <td>{{Spec2("HTML WHATWG")}}</td>
-   <td>Initial definition.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Document.onfullscreenchange")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{event("fullscreenchange")}}</li>
- <li>{{domxref("Document.onfullscreenerror")}}</li>
-</ul>
+```
+
+## Specifications
+
+| Specification                                                                                                        | Status                           | Comment             |
+| -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- |
+| {{SpecName("Fullscreen", "#handler-document-onfullscreenchange", "onfullscreenchange")}} | {{Spec2("HTML WHATWG")}} | Initial definition. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Document.onfullscreenchange")}}
+
+## Voir aussi
+
+- {{event("fullscreenchange")}}
+- {{domxref("Document.onfullscreenerror")}}
diff --git a/files/fr/web/api/document/onoffline/index.md b/files/fr/web/api/document/onoffline/index.md
index 4e9ac673aa..b373eaaa77 100644
--- a/files/fr/web/api/document/onoffline/index.md
+++ b/files/fr/web/api/document/onoffline/index.md
@@ -8,6 +8,6 @@ tags:
   - Propriétés
 translation_of: Web/API/Document/onoffline
 ---
-<p>{{APIRef("DOM")}}</p>
+{{APIRef("DOM")}}
 
-<p>Le gestionnaire d'évènements est appelé lorsqu'un évènement {{event("offline")}} est lancé sur le corps (<em>body</em>) et propagé, quand la propriété <a href="/fr/docs/Web/API/NavigatorOnLine/onLine">navigator.onLine</a> change et devient <code>false</code> (<em>fausse</em>).</p>
+Le gestionnaire d'évènements est appelé lorsqu'un évènement {{event("offline")}} est lancé sur le corps (_body_) et propagé, quand la propriété [navigator.onLine](/fr/docs/Web/API/NavigatorOnLine/onLine) change et devient `false` (_fausse_).
diff --git a/files/fr/web/api/document/ononline/index.md b/files/fr/web/api/document/ononline/index.md
index 0665ed87be..c2bdbdf88f 100644
--- a/files/fr/web/api/document/ononline/index.md
+++ b/files/fr/web/api/document/ononline/index.md
@@ -9,31 +9,25 @@ tags:
   - Propriétés
 translation_of: Web/API/Document/ononline
 ---
-<p>{{APIRef("DOM")}}</p>
+{{APIRef("DOM")}}
 
-<p>Un évènement "<code>online</code>" est lancé sur le <code>&lt;body&gt;</code> (<em>corps</em>) de chaque page quand le navigateur bascule entre les modes online (<em>en ligne</em>) et offline (<em>hors ligne</em>). De plus les évènements se propagent de <code>document.body</code> vers <code>document</code> et finalement sur <code>window</code>. Les deux évènements ne sont pas annulables (vous ne pouvez pas empêcher l'utilisateur de se connecter ou de vous déconnecter).</p>
+Un évènement "`online`" est lancé sur le `<body>` (_corps_) de chaque page quand le navigateur bascule entre les modes online (_en ligne_) et offline (_hors ligne_). De plus les évènements se propagent de `document.body` vers `document` et finalement sur `window`. Les deux évènements ne sont pas annulables (vous ne pouvez pas empêcher l'utilisateur de se connecter ou de vous déconnecter).
 
-<p><code>window.navigator.onLine</code> renvoie un booléen <em>true</em> (<em>vrai</em>) si le navigateur est online et false s'il est définitivement offline (déconnecté du réseau). Les évènements online et offline sont lancés si la valeur de cet attribut change.</p>
+`window.navigator.onLine` renvoie un booléen _true_ (_vrai_) si le navigateur est online et false s'il est définitivement offline (déconnecté du réseau). Les évènements online et offline sont lancés si la valeur de cet attribut change.
 
-<div class="note">
-<p><strong>Note :</strong> Il est important de noter que cet événement et cet attribut sont intrinsèquement peu fiables. Un ordinateur peut être connecté à un réseau sans avoir accès à Internet.</p>
-</div>
+> **Note :** Il est important de noter que cet événement et cet attribut sont intrinsèquement peu fiables. Un ordinateur peut être connecté à un réseau sans avoir accès à Internet.
 
-<p>Vous pouvez enregistrer les écouteurs de ces événements de plusieurs manières habituelles :</p>
+Vous pouvez enregistrer les écouteurs de ces événements de plusieurs manières habituelles :
 
-<ul>
- <li>en utilisant <code><a href="/en/DOM/element.addEventListener">addEventListener</a></code> sur <code>window</code>, <code>document</code> ou <code>document.body</code></li>
- <li>en définissant les propriétés <code>.ononline</code> ou <code>.onoffline</code> sur <code>document</code> ou <code>document.body</code> sur un objet  <code>Function</code> JavaScript. (<strong>Note :</strong> l'utilisation de <code>window.ononline</code> ou <code>window.onoffline</code> ne fonctionnera pas pour des raisons de compatibilité).</li>
- <li>en spécifiant les attributs <code>ononline="..."</code> ou <code>onoffline="..."</code> sur la balise <code>&lt;body&gt;</code>  dans le balisage HTML.</li>
-</ul>
+- en utilisant [`addEventListener`](/en/DOM/element.addEventListener) sur `window`, `document` ou `document.body`
+- en définissant les propriétés `.ononline` ou `.onoffline` sur `document` ou `document.body` sur un objet  `Function` JavaScript. (**Note :** l'utilisation de `window.ononline` ou `window.onoffline` ne fonctionnera pas pour des raisons de compatibilité).
+- en spécifiant les attributs `ononline="..."` ou `onoffline="..."` sur la balise `<body>`  dans le balisage HTML.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<p>Il existe  <a href="https://bugzilla.mozilla.org/attachment.cgi?id=220609">un cas de test simple</a> que vous pouvez exécuter pour vérifier le fonctionnement des évènements.</p>
+Il existe  [un cas de test simple](https://bugzilla.mozilla.org/attachment.cgi?id=220609) que vous pouvez exécuter pour vérifier le fonctionnement des évènements.
 
-<h2 id="Example">Références</h2>
+## Références
 
-<ul>
- <li><a href="/fr/docs/Web/API/NavigatorOnLine/%C3%89v%C3%A8nements_online_et_offline">Évènements online et offline</a></li>
- <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#event-online">Spécification</a> <a href="http://www.whatwg.org/specs/web-apps/current-work/#event-online">WHATWG Web App</a> (en)</li>
-</ul>
+- [Évènements online et offline](/fr/docs/Web/API/NavigatorOnLine/%C3%89v%C3%A8nements_online_et_offline)
+- [Spécification](http://www.whatwg.org/specs/web-apps/current-work/#event-online) [WHATWG Web App](http://www.whatwg.org/specs/web-apps/current-work/#event-online) (en)
diff --git a/files/fr/web/api/document/open/index.md b/files/fr/web/api/document/open/index.md
index c8da92836a..c427d5df05 100644
--- a/files/fr/web/api/document/open/index.md
+++ b/files/fr/web/api/document/open/index.md
@@ -8,69 +8,46 @@ tags:
   - Reference
 translation_of: Web/API/Document/open
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<div> </div>
+La méthode **`document.open()`** ouvre un document pour [l'écriture](/fr/docs/Web/API/Document/write).
 
-<p>La méthode <strong><code>document.open()</code></strong> ouvre un document pour <a href="/fr/docs/Web/API/Document/write">l'écriture</a>.</p>
+## Syntaxe
 
-<h2 id="Syntaxe">Syntaxe</h2>
+    document.open();
 
-<pre class="eval">document.open();
-</pre>
+## Exemple
 
-<h2 id="Exemple">Exemple</h2>
+    // Dans cet exemple, le contenu du document est
+    // écrasé au cours de la réinitialisation avec open()
+    document.write("<html><p>supprimez-moi</p></html>");
+    document.open();
+    // Le document est vide.
 
-<pre>// Dans cet exemple, le contenu du document est
-// écrasé au cours de la réinitialisation avec open()
-document.write("&lt;html&gt;&lt;p&gt;supprimez-moi&lt;/p&gt;&lt;/html&gt;");
-document.open();
-// Le document est vide.
-</pre>
+## Notes
 
-<h2 id="Notes">Notes</h2>
+Si un document existe dans la cible, cette méthode le supprime (voir l'exemple ci-dessus).
 
-<p>Si un document existe dans la cible, cette méthode le supprime (voir l'exemple ci-dessus).</p>
+Par ailleurs, un appel automatique à `document.open()` est réalisé lorsque [document.write()](/fr/docs/Web/API/Document/write) est appelé après que la page ait été chargée, bien que ce ne soit pas défini dans la spécification du W3C. documenter les paramètres à document.open ne figurant pas dans la spécification
 
-<p>Par ailleurs, un appel automatique à <code>document.open()</code> est réalisé lorsque <a href="/fr/docs/Web/API/Document/write">document.write()</a> est appelé après que la page ait été chargée, bien que ce ne soit pas défini dans la spécification du W3C. documenter les paramètres à document.open ne figurant pas dans la spécification</p>
+Cette méthode ne doit pas être confondue avec [window.open()](/fr/docs/Web/API/Window/open). `document.open` permet d'écrire par dessus le document courant ou d'y ajouter du contenu, alors que `window.open` fournit une manière d'ouvrir une nouvelle fenêtre laissant le document courant intact. Comme `window` est l'objet, si on appelle juste `open(...)`, il sera traité comme un appel à `window.open(...)`. Le document ouvert peut être fermé à l'aide de [document.close()](/fr/docs/Web/API/Document/close).
 
-<p>Cette méthode ne doit pas être confondue avec <a href="/fr/docs/Web/API/Window/open">window.open()</a>. <code>document.open</code> permet d'écrire par dessus le document courant ou d'y ajouter du contenu, alors que <code>window.open</code> fournit une manière d'ouvrir une nouvelle fenêtre laissant le document courant intact. Comme <code>window</code> est l'objet, si on appelle juste <code>open(...)</code>, il sera traité comme un appel à <code>window.open(...)</code>. Le document ouvert peut être fermé à l'aide de <a href="/fr/docs/Web/API/Document/close">document.close()</a>.</p>
+Voir [Security check basics](/fr/docs/Mozilla/Gecko/Script_security#Security_checks)  pour plus d'informations sur les principaux.
 
-<p>Voir <a href="/fr/docs/Mozilla/Gecko/Script_security#Security_checks">Security check basics</a>  pour plus d'informations sur les principaux.</p>
+Si vous ne voulez pas créer une entrée d'historique, remplacez `open()` par `open("text/html", "replace")`.
 
-<p>Si vous ne voulez pas créer une entrée d'historique, remplacez <code>open()</code> par <code>open("text/html", "replace")</code>.</p>
+## Spécifications
 
-<h2 id="Specifications">Spécifications</h2>
+| Spécification                                                                                | Status                           | Comment              |
+| -------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName("HTML WHATWG", "#dom-document-open", "document.open()")}} | {{Spec2("HTML WHATWG")}} |                      |
+| {{SpecName("DOM2 HTML", "html.html#ID-72161170", "document.open()")}} | {{Spec2("DOM2 HTML")}}     | Définition initiale. |
 
-<table class="standard-table">
-  <thead>
-    <tr>
-      <th scope="col">Spécification</th>
-      <th scope="col">Status</th>
-      <th scope="col">Comment</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>{{SpecName("HTML WHATWG", "#dom-document-open", "document.open()")}}</td>
-      <td>{{Spec2("HTML WHATWG")}}</td>
-      <td></td>
-    </tr>
-    <tr>
-      <td>{{SpecName("DOM2 HTML", "html.html#ID-72161170", "document.open()")}}</td>
-      <td>{{Spec2("DOM2 HTML")}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
+## Compatibilité des navigateurs
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+{{Compat("api.Document.open")}}
 
-<p>{{Compat("api.Document.open")}}</p>
+## Voir aussi
 
-<h2 id="See_also">Voir aussi</h2>
-
-<ul>
-  <li>{{domxref("Document")}}</li>
-  <li>{{domxref("Window.open()")}}</li>
-</ul>
+- {{domxref("Document")}}
+- {{domxref("Window.open()")}}
diff --git a/files/fr/web/api/document/origin/index.md b/files/fr/web/api/document/origin/index.md
index 646f4e1242..326c3eef82 100644
--- a/files/fr/web/api/document/origin/index.md
+++ b/files/fr/web/api/document/origin/index.md
@@ -9,50 +9,34 @@ tags:
   - origine
 translation_of: Web/API/Document/origin
 ---
-<div>{{APIRef("DOM")}}{{SeeCompatTable}}</div>
+{{APIRef("DOM")}}{{SeeCompatTable}}
 
-<p>La propriété en lecture seule <strong><code>Document.origin</code></strong> renvoie l'origine du document. Dans la plupart des cas, cette propriété est équivalente à  <code>document.defaultView.location.origin</code>.</p>
+La propriété en lecture seule **`Document.origin`** renvoie l'origine du document. Dans la plupart des cas, cette propriété est équivalente à  `document.defaultView.location.origin`.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: js">var origin = document.origin;
+```js
+var origin = document.origin;
 // Sur cette page, renvoie:'https://developer.mozilla.org'
 
 var origin = document.origin;
 // Sur "about:blank", renvoie :'null'
 
 var origin = document.origin;
-// Sur "data:text/html,&lt;b&gt;foo&lt;/b&gt;", renvoie :'null'
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#dom-document-origin', 'Document.origin')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', '#origin:document', 'origin for Document objects')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<div>{{Compat("api.Document.origin")}}</div>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>La propriété {{domxref("URLUtils.origin")}}.</li>
-</ul>
+// Sur "data:text/html,<b>foo</b>", renvoie :'null'
+```
+
+## Spécifications
+
+| Spécification                                                                                            | Statut                           | Commentaire          |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName('DOM WHATWG', '#dom-document-origin', 'Document.origin')}}             | {{Spec2('DOM WHATWG')}} | Définition initiale. |
+| {{SpecName('HTML WHATWG', '#origin:document', 'origin for Document objects')}} | {{Spec2('HTML WHATWG')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Document.origin")}}
+
+## Voir aussi
+
+- La propriété {{domxref("URLUtils.origin")}}.
diff --git a/files/fr/web/api/document/popupnode/index.md b/files/fr/web/api/document/popupnode/index.md
index be0b64250e..0874d7dca0 100644
--- a/files/fr/web/api/document/popupnode/index.md
+++ b/files/fr/web/api/document/popupnode/index.md
@@ -10,36 +10,32 @@ tags:
   - XUL
 translation_of: Web/API/Document/popupNode
 ---
-<div>{{ApiRef("DOM")}}{{deprecated_header}}</div>
+{{ApiRef("DOM")}}{{deprecated_header}}
 
-<div class="note">
-  <p><strong>Note :</strong> À partir de {{Gecko("2.0")}}, les auteurs sont encouragés à utiliser la propriété <a href="/fr/docs/Mozilla/Tech/XUL/menupopup">menupopup </a>triggerNode à la place.</p>
-</div>
+> **Note :** À partir de {{Gecko("2.0")}}, les auteurs sont encouragés à utiliser la propriété [menupopup ](/fr/docs/Mozilla/Tech/XUL/menupopup)triggerNode à la place.
 
-<p>Quand une fenêtre contextuelle attachée via les attributs <code>popup</code> ou <code>context</code> est ouverte, la propriété <code>popupNode</code> du document XUL est définie sur le noeud sur lequel vous avez cliqué. Il sera la cible de l'événement de souris qui a activé la fenêtre contextuelle. Si elle a été ouverte avec le clavier, le nœud contextuel peut être défini sur null. En règle générale, cette propriété sera vérifiée au cours de la gestion des événements par popupshowing, un menu contextuel pour initialiser le menu basé sur le contexte.</p>
+Quand une fenêtre contextuelle attachée via les attributs `popup` ou `context` est ouverte, la propriété `popupNode` du document XUL est définie sur le noeud sur lequel vous avez cliqué. Il sera la cible de l'événement de souris qui a activé la fenêtre contextuelle. Si elle a été ouverte avec le clavier, le nœud contextuel peut être défini sur null. En règle générale, cette propriété sera vérifiée au cours de la gestion des événements par popupshowing, un menu contextuel pour initialiser le menu basé sur le contexte.
 
-<p>Cette propriété est uniquement définie pour les fenêtres contextuelles attachées via les attributs <code>popup</code> ou <code>context</code>. Pour les autres types, la valeur n'est pas modifiée. Dans ces autres cas, par exemple lors de l'appel de la méthode <a href="/fr/docs/Mozilla/Tech/XUL/M%C3%A9thodes/showPopup">showPopup</a> de la fenêtre contextuelle, vous pouvez définir la propriété <code>popupNode</code> directement au préalable.</p>
+Cette propriété est uniquement définie pour les fenêtres contextuelles attachées via les attributs `popup` ou `context`. Pour les autres types, la valeur n'est pas modifiée. Dans ces autres cas, par exemple lors de l'appel de la méthode [showPopup](/fr/docs/Mozilla/Tech/XUL/M%C3%A9thodes/showPopup) de la fenêtre contextuelle, vous pouvez définir la propriété `popupNode` directement au préalable.
 
-<p>Cette propriété s'applique seulement aux documents XUL.</p>
+Cette propriété s'applique seulement aux documents XUL.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var <var>node</var> = <var>document</var>.popupNode;
-</pre>
+    var node = document.popupNode;
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush: xml">&lt;menupopup id="toolbarContextMenu"&gt;
+```xml
+<menupopup id="toolbarContextMenu">
   ...
-  &lt;menuitem oncommand="mailNewsCore.deleteButton(document.popupNode)"&gt;
+  <menuitem oncommand="mailNewsCore.deleteButton(document.popupNode)">
   ...
-&lt;/menupopup&gt;
-</pre>
+</menupopup>
+```
 
-<p>Voir <a href="http://www.mozilla.org/xpfe/xptoolkit/popups.html">http://www.mozilla.org/xpfe/xptoolkit/popups.html</a></p>
+Voir <http://www.mozilla.org/xpfe/xptoolkit/popups.html>
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>Défini dans {{Source("dom/public/idl/xul/nsIDOMXULDocument.idl#48", "nsIDOMXULDocument.idl")}}. méthode spécifique XUL. Ne fait partie d'aucune spécification.</li>
-</ul>
+- Défini dans {{Source("dom/public/idl/xul/nsIDOMXULDocument.idl#48", "nsIDOMXULDocument.idl")}}. méthode spécifique XUL. Ne fait partie d'aucune spécification.
diff --git a/files/fr/web/api/document/preferredstylesheetset/index.md b/files/fr/web/api/document/preferredstylesheetset/index.md
index ab47840dd3..9dabb35946 100644
--- a/files/fr/web/api/document/preferredstylesheetset/index.md
+++ b/files/fr/web/api/document/preferredstylesheetset/index.md
@@ -10,39 +10,35 @@ tags:
   - Reference
 translation_of: Web/API/Document/preferredStyleSheetSet
 ---
-<div>{{APIRef("DOM")}}{{gecko_minversion_header("1.9")}}</div>
+{{APIRef("DOM")}}{{gecko_minversion_header("1.9")}}
 
-<p>Retourne la feuille de style préférée, telle que définie par l'auteur de la page.</p>
+Retourne la feuille de style préférée, telle que définie par l'auteur de la page.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var>preferredStyleSheetSet</var> = document.preferredStyleSheetSet
-</pre>
+    preferredStyleSheetSet = document.preferredStyleSheetSet
 
-<p>Au retour, <code>preferredStyleSheetSet</code> indique la feuille de style préférée par l'auteur. Ceci est déterminé par l'ordre des déclarations des feuilles de style et par l'entête HTTP intitulé <code>Default-Style</code>.</p>
+Au retour, `preferredStyleSheetSet` indique la feuille de style préférée par l'auteur. Ceci est déterminé par l'ordre des déclarations des feuilles de style et par l'entête HTTP intitulé `Default-Style`.
 
-<p>En l'absence de feuille de style préférée, une chaine vide ("") est retournée.</p>
+En l'absence de feuille de style préférée, une chaine vide ("") est retournée.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">if (document.preferredStyleSheetSet) {
+```js
+if (document.preferredStyleSheetSet) {
   console.log("La feuille de style préférée est : " + document.preferredStyleSheetSet);
 } else {
   console.log("Il n'y a pas de feuille de style préférée.");
 }
-</pre>
+```
 
-<h2 id="Specification">Spécifications</h2>
+## Spécifications
 
-<ul>
- <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets">HTML5: Alternate Style Sheets</a></li>
-</ul>
+- [HTML5: Alternate Style Sheets](http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets)
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("document.lastStyleSheetSet")}}</li>
- <li>{{domxref("document.selectedStyleSheetSet")}}</li>
- <li>{{domxref("document.styleSheetSets")}}</li>
- <li>{{domxref("document.enableStyleSheetsForSet()")}}</li>
-</ul>
+- {{domxref("document.lastStyleSheetSet")}}
+- {{domxref("document.selectedStyleSheetSet")}}
+- {{domxref("document.styleSheetSets")}}
+- {{domxref("document.enableStyleSheetsForSet()")}}
diff --git a/files/fr/web/api/document/querycommandstate/index.md b/files/fr/web/api/document/querycommandstate/index.md
index ca874815cb..aae32ace2b 100644
--- a/files/fr/web/api/document/querycommandstate/index.md
+++ b/files/fr/web/api/document/querycommandstate/index.md
@@ -7,43 +7,31 @@ tags:
   - Document
 translation_of: Web/API/Document/queryCommandState
 ---
-<div>{{ApiRef("DOM")}}</div>
+{{ApiRef("DOM")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">queryCommandState(String command)
-</pre>
+```js
+queryCommandState(String command)
+```
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>TBD</p>
+TBD
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML Editing','#execcommand()','execCommand')}}</td>
-   <td>{{Spec2('HTML Editing')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                    | Statut                           | Commentaire          |
+| -------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName('HTML Editing','#execcommand()','execCommand')}} | {{Spec2('HTML Editing')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Document.queryCommandState")}}</p>
+{{Compat("api.Document.queryCommandState")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("HTMLElement.contentEditable")}}</li>
- <li>{{domxref("document.designMode")}}</li>
- <li><a href="/fr/docs/Web/Guide/HTML/Editable_content/Rich-Text_Editing_in_Mozilla">Rich-Text Editing in Mozilla</a></li>
- <li>Les bogues du navigateur liés à <code>queryCommandState()</code>: <a href="https://github.com/guardian/scribe/blob/master/BROWSERINCONSISTENCIES.md#documentquerycommandstate">Scribe's "Browser Inconsistencies" documentation</a></li>
-</ul>
+- {{domxref("HTMLElement.contentEditable")}}
+- {{domxref("document.designMode")}}
+- [Rich-Text Editing in Mozilla](/fr/docs/Web/Guide/HTML/Editable_content/Rich-Text_Editing_in_Mozilla)
+- Les bogues du navigateur liés à `queryCommandState()`: [Scribe's "Browser Inconsistencies" documentation](https://github.com/guardian/scribe/blob/master/BROWSERINCONSISTENCIES.md#documentquerycommandstate)
diff --git a/files/fr/web/api/document/querycommandsupported/index.md b/files/fr/web/api/document/querycommandsupported/index.md
index ddd356a31b..9e31a74d0f 100644
--- a/files/fr/web/api/document/querycommandsupported/index.md
+++ b/files/fr/web/api/document/querycommandsupported/index.md
@@ -10,63 +10,48 @@ tags:
   - editeur
 translation_of: Web/API/Document/queryCommandSupported
 ---
-<div>{{ApiRef("DOM")}}</div>
+{{ApiRef("DOM")}}
 
-<p>La méthode <code><strong>Document.queryCommandSupported()</strong></code> indique si la commande d'éditeur spécifiée est prise en charge par le navigateur.</p>
+La méthode **`Document.queryCommandSupported()`** indique si la commande d'éditeur spécifiée est prise en charge par le navigateur.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var>isSupported</var> = document.queryCommandSupported(<var>command</var>);
-</pre>
+    isSupported = document.queryCommandSupported(command);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>command</code></dt>
- <dd>La commande pour laquelle on veut déterminer si elle est prise en charge.</dd>
-</dl>
+- `command`
+  - : La commande pour laquelle on veut déterminer si elle est prise en charge.
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Renvoie un {{jsxref("Boolean")}} qui est <code>true</code> (<em>vrai</em>) si la commande est prise en charge et <code>false</code> (<em>faux</em>) sinon.</p>
+Renvoie un {{jsxref("Boolean")}} qui est `true` (_vrai_) si la commande est prise en charge et `false` (_faux_) sinon.
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p>La commande <code>'paste'</code> (<em>coller</em>) renvoie <code>false</code> (<em>faux</em>), pas seulement si la fonctionnalité n'est pas disponible, mais également si le script l'appelant a des privilèges insuffisants pour réaliser l'action <a href="#note1">[1]</a>.</p>
+La commande `'paste'` (_coller_) renvoie `false` (_faux_), pas seulement si la fonctionnalité n'est pas disponible, mais également si le script l'appelant a des privilèges insuffisants pour réaliser l'action [\[1\]](#note1).
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush:js">var flg = document.queryCommandSupported("SelectAll");
+```js
+var flg = document.queryCommandSupported("SelectAll");
 
 if(flg) {
   // ...Faire quelque chose
 }
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML Editing','#querycommandsupported()','querycommandsupported')}}</td>
-   <td>{{Spec2('HTML Editing')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Document.queryCommandSupported")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("Document.execCommand()")}}</li>
- <li>{{domxref("Document.queryCommandEnabled()")}}</li>
-</ul>
+```
+
+## Spécifications
+
+| Spécification                                                                                            | Statut                           | Commentaire          |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName('HTML Editing','#querycommandsupported()','querycommandsupported')}} | {{Spec2('HTML Editing')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Document.queryCommandSupported")}}
+
+## Voir aussi
+
+- {{domxref("Document.execCommand()")}}
+- {{domxref("Document.queryCommandEnabled()")}}
diff --git a/files/fr/web/api/document/queryselector/index.md b/files/fr/web/api/document/queryselector/index.md
index bb81eb32c0..5b3e19ea84 100644
--- a/files/fr/web/api/document/queryselector/index.md
+++ b/files/fr/web/api/document/queryselector/index.md
@@ -12,58 +12,52 @@ tags:
   - Échappement
 translation_of: Web/API/Document/querySelector
 ---
-<div>{{ ApiRef("DOM") }}</div>
+{{ ApiRef("DOM") }}
 
-<p>La méthode <code><strong>querySelector()</strong></code> de l'interface {{domxref("Document")}} retourne le premier {{domxref("Element")}} dans le document correspondant au sélecteur - ou groupe de sélecteurs - spécifié(s), ou <code>null</code> si aucune correspondance n'est trouvée.</p>
+La méthode **`querySelector()`** de l'interface {{domxref("Document")}} retourne le premier {{domxref("Element")}} dans le document correspondant au sélecteur - ou groupe de sélecteurs - spécifié(s), ou `null` si aucune correspondance n'est trouvée.
 
-<div class="note">
-<p><strong>Note :</strong> La correspondance est effectuée en utilisant le parcours pré-ordonné profondeur-d'abord des nœuds du document, en partant du premier élément dans le balisage du document et en itérant à travers les nœuds en séquence, par ordre du compte de nœuds enfants.</p>
-</div>
+> **Note :** La correspondance est effectuée en utilisant le parcours pré-ordonné profondeur-d'abord des nœuds du document, en partant du premier élément dans le balisage du document et en itérant à travers les nœuds en séquence, par ordre du compte de nœuds enfants.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">element = document.querySelector(sélecteurs);
-</pre>
+```js
+element = document.querySelector(sélecteurs);
+```
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>selectors</code> (sélecteurs)</dt>
- <dd>une  {{domxref("DOMString")}} (<em>chaîne de caractères</em>) qui contient un ou plusieurs sélecteurs à comparer. La chaîne doit être composée de sélecteurs CSS valides ; sinon une exception <code>SYNTAX_ERR</code> est lancée. Voir <a href="/fr/docs/Web/API/Document_Object_Model/Localisation_des_%C3%A9l%C3%A9ments_DOM_avec_les_s%C3%A9lecteurs">Localisation des éléments DOM avec les sélecteurs</a> pour plus d'informations sur les sélecteurs et leur gestion.</dd>
-</dl>
+- `selectors` (sélecteurs)
+  - : une  {{domxref("DOMString")}} (_chaîne de caractères_) qui contient un ou plusieurs sélecteurs à comparer. La chaîne doit être composée de sélecteurs CSS valides ; sinon une exception `SYNTAX_ERR` est lancée. Voir [Localisation des éléments DOM avec les sélecteurs](/fr/docs/Web/API/Document_Object_Model/Localisation_des_%C3%A9l%C3%A9ments_DOM_avec_les_s%C3%A9lecteurs) pour plus d'informations sur les sélecteurs et leur gestion.
 
-<div class="note">
-<p><strong>Note :</strong> les caractères qui n'appartiennent pas à la syntaxe standard CSS doivent être échappés par un antislash ("\"). Puisque JavaScript utilise aussi cette barre pour l'échappement, une attention particulière est nécessaire quand des chaînes comprennent ces caractères. Voir {{anch("Caractère spécial d'échappement")}} pour plus d'informations.</p>
-</div>
+> **Note :** les caractères qui n'appartiennent pas à la syntaxe standard CSS doivent être échappés par un antislash ("\\"). Puisque JavaScript utilise aussi cette barre pour l'échappement, une attention particulière est nécessaire quand des chaînes comprennent ces caractères. Voir {{anch("Caractère spécial d'échappement")}} pour plus d'informations.
 
-<h3 id="Valeur_retournée">Valeur retournée</h3>
+### Valeur retournée
 
-<p>Un objet {{domxref("Element")}} représentant le premier élément dans le document qui corresponde au jeu de <a href="/fr/docs/Web/CSS/S%C3%A9lecteurs_CSS">sélecteurs CSS</a> spécifié, ou <code>null</code> s'il n'y a pas de correspondances.</p>
+Un objet {{domxref("Element")}} représentant le premier élément dans le document qui corresponde au jeu de [sélecteurs CSS](/fr/docs/Web/CSS/S%C3%A9lecteurs_CSS) spécifié, ou `null` s'il n'y a pas de correspondances.
 
-<p>Si vous avez besoin d'une liste de tous les éléments correspondant aux sélecteurs spécifiés, vous devez utiliser {{domxref("Document.querySelectorAll", "querySelectorAll()")}} à la place.</p>
+Si vous avez besoin d'une liste de tous les éléments correspondant aux sélecteurs spécifiés, vous devez utiliser {{domxref("Document.querySelectorAll", "querySelectorAll()")}} à la place.
 
-<h3 id="Exception">Exception</h3>
+### Exception
 
-<dl>
- <dt><code>SYNTAX_ERR</code></dt>
- <dd>La syntaxe des sélecteurs spécifiés est invalide.</dd>
-</dl>
+- `SYNTAX_ERR`
+  - : La syntaxe des sélecteurs spécifiés est invalide.
 
-<h2 id="Notes">Notes d'utilisation</h2>
+## Notes d'utilisation
 
-<p>Si le sélecteur correspond à un ID et que cet ID est utilisé de façon erronée plusieurs fois dans le document, le premier élément en correspondance est retourné.</p>
+Si le sélecteur correspond à un ID et que cet ID est utilisé de façon erronée plusieurs fois dans le document, le premier élément en correspondance est retourné.
 
-<p>Les <a href="/fr/docs/Web/CSS/Pseudo-elements">pseudo-éléments</a> CSS ne retourneront jamais aucun élément, comme spécifié dans l'<a href="http://www.w3.org/TR/selectors-api/#grammar">API des sélecteurs</a> (en).</p>
+Les [pseudo-éléments](/fr/docs/Web/CSS/Pseudo-elements) CSS ne retourneront jamais aucun élément, comme spécifié dans l'[API des sélecteurs](http://www.w3.org/TR/selectors-api/#grammar) (en).
 
-<h3 id="Caractère_spécial_d'échappement">Caractère spécial d'échappement</h3>
+### Caractère spécial d'échappement
 
-<p>Pour faire correspondre un ID (<em>identifiant</em>) ou un sélecteur qui ne respecte pas la syntaxe CSS (en utilisant un point virgule ou un espace par exemple), vous devez échapper le caractère avec un antislash (\). Comme l'antislash est un caractère d'échappement en JavaScript, si vous entrez une chaîne de caractères littérale, vous devez donc l'échapper <em>deux fois</em> (une pour la chaîne de caractères JavaScript et une autre fois pour <code>querySelector</code>) :</p>
+Pour faire correspondre un ID (_identifiant_) ou un sélecteur qui ne respecte pas la syntaxe CSS (en utilisant un point virgule ou un espace par exemple), vous devez échapper le caractère avec un antislash (\\). Comme l'antislash est un caractère d'échappement en JavaScript, si vous entrez une chaîne de caractères littérale, vous devez donc l'échapper _deux fois_ (une pour la chaîne de caractères JavaScript et une autre fois pour `querySelector`) :
 
-<pre class="brush: html">&lt;div id="machin\bidule"&gt;&lt;/div&gt;
-&lt;div id="machin:bidule"&gt;&lt;/div&gt;
+```html
+<div id="machin\bidule"></div>
+<div id="machin:bidule"></div>
 
-&lt;script&gt;
-  console.log('#machin\bidule')               // "#machinidule" <code>(\b est le caractère de contrôle retour arrière)</code>
+<script>
+  console.log('#machin\bidule')               // "#machinidule" (\b est le caractère de contrôle retour arrière)
   document.querySelector('#machin\bidule')    // ne correspond à rien
 
   console.log('#machin\\bidule')              // "#machin\bidule"
@@ -72,55 +66,42 @@ translation_of: Web/API/Document/querySelector
 
   document.querySelector('#machin:bidule')    // ne correspond à rien
   document.querySelector('#machin\\:bidule')  // correspond au second div
-&lt;/script&gt;
-</pre>
+</script>
+```
 
-<h2 id="Exemple">Exemples</h2>
+## Exemples
 
-<h3 id="Trouver_le_premier_élément_correspondant_à_une_classe">Trouver le premier élément correspondant à une classe</h3>
+### Trouver le premier élément correspondant à une classe
 
-<p>Dans cet exemple, le premier élément dans le document qui contient la classe "<code>maclasse</code>" est retourné :</p>
+Dans cet exemple, le premier élément dans le document qui contient la classe "`maclasse`" est retourné :
 
-<pre class="brush: js">var el = document.querySelector(".maclasse");</pre>
+```js
+var el = document.querySelector(".maclasse");
+```
 
-<h3 id="Notes">Un sélecteur plus complexe</h3>
+### Un sélecteur plus complexe
 
-<p>Les <em>sélecteurs</em> peuvent également être réellement puissants comme le montre l'exemple suivant. Ici, le premier élément <code>&lt;input name="identifiant"/&gt;</code> dans un <code>&lt;div class="panneau-utilisateur principal"&gt;</code> dans le document est retourné :</p>
+Les _sélecteurs_ peuvent également être réellement puissants comme le montre l'exemple suivant. Ici, le premier élément `<input name="identifiant"/>` dans un `<div class="panneau-utilisateur principal">` dans le document est retourné :
 
-<pre class="brush: js">var el = document.querySelector("div.panneau-utilisateur.principal input[name='<code>identifiant</code>']");</pre>
+```js
+var el = document.querySelector("div.panneau-utilisateur.principal input[name='identifiant']");
+```
 
-<h2 id="Browser_Compatibility">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName("Selectors API Level 2", "#interface-definitions", "document.querySelector()")}}</td>
-   <td>{{Spec2("Selectors API Level 2")}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}</td>
-   <td>{{Spec2("Selectors API Level 1")}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                            | Statut                                       | Commentaire         |
+| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------- | ------------------- |
+| {{SpecName("Selectors API Level 2", "#interface-definitions", "document.querySelector()")}} | {{Spec2("Selectors API Level 2")}} |                     |
+| {{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}} | {{Spec2("Selectors API Level 1")}} | Définition initiale |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<div>{{Compat("api.Document.querySelector")}}</div>
+{{Compat("api.Document.querySelector")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/API/Document_Object_Model/Localisation_des_%C3%A9l%C3%A9ments_DOM_avec_les_s%C3%A9lecteurs">Localisation des éléments DOM avec les sélecteurs</a></li>
- <li>{{domxref("document.querySelectorAll()")}} ;</li>
- <li>{{domxref("element.querySelector()")}} ;</li>
- <li>{{domxref("element.querySelectorAll()")}} ;</li>
- <li><a href="/fr/docs/Archive/Add-ons/Code_snippets/QuerySelector">Extraits de code pour <code>querySelector</code></a></li>
-</ul>
+- [Localisation des éléments DOM avec les sélecteurs](/fr/docs/Web/API/Document_Object_Model/Localisation_des_%C3%A9l%C3%A9ments_DOM_avec_les_s%C3%A9lecteurs)
+- {{domxref("document.querySelectorAll()")}} ;
+- {{domxref("element.querySelector()")}} ;
+- {{domxref("element.querySelectorAll()")}} ;
+- [Extraits de code pour `querySelector`](/fr/docs/Archive/Add-ons/Code_snippets/QuerySelector)
diff --git a/files/fr/web/api/document/queryselectorall/index.md b/files/fr/web/api/document/queryselectorall/index.md
index 7b73477245..07088e2c73 100644
--- a/files/fr/web/api/document/queryselectorall/index.md
+++ b/files/fr/web/api/document/queryselectorall/index.md
@@ -9,156 +9,139 @@ tags:
   - Sélecteurs
 translation_of: Web/API/Document/querySelectorAll
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p>La méthode <code><strong>querySelectorAll()</strong></code>  de {{domxref("Element")}} renvoie une {{domxref("NodeList")}} statique représentant une liste des éléments du document qui correspondent au groupe de sélecteurs spécifiés.</p>
+La méthode **`querySelectorAll()`**  de {{domxref("Element")}} renvoie une {{domxref("NodeList")}} statique représentant une liste des éléments du document qui correspondent au groupe de sélecteurs spécifiés.
 
-<div class="note">
-<p><strong>Note :</strong> Cette méthode est implémentée à partir de {{domxref("ParentNode")}}, méthode  du mixin {{domxref("ParentNode.querySelectorAll", "querySelectorAll()")}} .</p>
-</div>
+> **Note :** Cette méthode est implémentée à partir de {{domxref("ParentNode")}}, méthode  du mixin {{domxref("ParentNode.querySelectorAll", "querySelectorAll()")}} .
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js"><var>elementList</var> = <em>parentNode</em>.querySelectorAll(<var>selectors</var>);
-</pre>
+```js
+elementList = parentNode.querySelectorAll(selectors);
+```
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>selecteurs</code></dt>
- <dd>une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) qui contient un ou plusieurs <a href="/fr/docs/Web/CSS/CSS_Selectors">sélecteurs CSS</a> ; s'il n'y en a pas, une exception  <code>SyntaxError</code> est lancée. Voir <a href="/fr/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">localisation des éléments DOM avec les sélecteurs</a> pour plus d'informations sur l'utilisation des sélecteurs en vue d'identifier les éléments. Plusieurs sélecteurs peuvent être spécifiés, séparés par une virgule.</dd>
-</dl>
+- `selecteurs`
+  - : une {{domxref("DOMString")}} (_chaîne de caractères_) qui contient un ou plusieurs [sélecteurs CSS](/fr/docs/Web/CSS/CSS_Selectors) ; s'il n'y en a pas, une exception  `SyntaxError` est lancée. Voir [localisation des éléments DOM avec les sélecteurs](/fr/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors) pour plus d'informations sur l'utilisation des sélecteurs en vue d'identifier les éléments. Plusieurs sélecteurs peuvent être spécifiés, séparés par une virgule.
 
-<div class="note">
-<p><strong>Note :</strong> Les caractères qui ne font pas partie de la syntaxe CSS standard doivent être échappés à l'aide d'une barre oblique inverse. Puisque JavaScript utilise également l'échappement en retour arrière, un soin particulier doit être pris lors de l'écriture de littéraux de chaîne utilisant ces caractères. Voir {{anch ("Echapper des caractères spéciaux")}} pour plus d'informations.</p>
-</div>
+> **Note :** Les caractères qui ne font pas partie de la syntaxe CSS standard doivent être échappés à l'aide d'une barre oblique inverse. Puisque JavaScript utilise également l'échappement en retour arrière, un soin particulier doit être pris lors de l'écriture de littéraux de chaîne utilisant ces caractères. Voir {{anch ("Echapper des caractères spéciaux")}} pour plus d'informations.
 
-<h3 id="Valeur_renvoyée">Valeur renvoyée</h3>
+### Valeur renvoyée
 
-<p>Une {{domxref("NodeList")}} statique contenant un objet {{domxref("Element")}} pour chaque élément qui correspond à au-moins un des sélecteurs spécifiés ou une {{domxref("NodeList")}} vide si aucune correspondance n'est trouvée .</p>
+Une {{domxref("NodeList")}} statique contenant un objet {{domxref("Element")}} pour chaque élément qui correspond à au-moins un des sélecteurs spécifiés ou une {{domxref("NodeList")}} vide si aucune correspondance n'est trouvée .
 
-<div class="note">
-<p><strong>Note :</strong> Si les <code><em>selectors</em></code> spécifiés contiennent un <a href="/fr/docs/Web/CSS/Pseudo-elements">pseudo-element CSS</a>, la liste retournée sera toujours vide.</p>
-</div>
+> **Note :** Si les `selectors` spécifiés contiennent un [pseudo-element CSS](/fr/docs/Web/CSS/Pseudo-elements), la liste retournée sera toujours vide.
 
-<h3 id="Exceptions">Exceptions</h3>
+### Exceptions
 
-<dl>
- <dt><code>SyntaxError</code></dt>
- <dd>la syntaxe des chaînes <code>selectors</code> spécifiés n'est pas valide.</dd>
-</dl>
+- `SyntaxError`
+  - : la syntaxe des chaînes `selectors` spécifiés n'est pas valide.
 
-<h2 id="Example">Exemples</h2>
+## Exemples
 
-<p>Pour obtenir une {{domxref("NodeList")}} (<em>liste de noeuds</em>) de tous les éléments {{HTMLElement("p")}}  dans le document :</p>
+Pour obtenir une {{domxref("NodeList")}} (_liste de noeuds_) de tous les éléments {{HTMLElement("p")}}  dans le document :
 
-<pre class="brush: js">const matches = document.querySelectorAll("p");</pre>
+```js
+const matches = document.querySelectorAll("p");
+```
 
-<p>Cet exemple renvoie la liste de tous les éléments <code>div</code> du <code>document</code> dont l'attribut de classe a pour valeur "<code>note</code>" ou "<code>alert</code>" :</p>
+Cet exemple renvoie la liste de tous les éléments `div` du `document` dont l'attribut de classe a pour valeur "`note`" ou "`alert`" :
 
-<pre class="brush: js">const matches = document.querySelectorAll("div.note, div.alert");
-</pre>
+```js
+const matches = document.querySelectorAll("div.note, div.alert");
+```
 
-<p>Ici, nous obtenons une liste des éléments <code>&lt;p&gt;</code> dont l'élément parent immédiat est un {{domxref("div")}} avec la classe <code>"highlighted"</code> et qui sont situés dans un conteneur dont l'identifiant est <code>"test"</code>.</p>
+Ici, nous obtenons une liste des éléments `<p>` dont l'élément parent immédiat est un {{domxref("div")}} avec la classe `"highlighted"` et qui sont situés dans un conteneur dont l'identifiant est `"test"`.
 
-<pre class="brush: js">const container = document.querySelector("#test");
-const matches = container.querySelectorAll("div.highlighted &gt; p");</pre>
+```js
+const container = document.querySelector("#test");
+const matches = container.querySelectorAll("div.highlighted > p");
+```
 
-<p>Cet exemple utilise un <a href="/fr/docs/Web/CSS/S%C3%A9lecteurs_d_attribut">sélecteur d'attribut</a> pour renvoyer une liste d'éléments {{domxref("iframe")}} dans le document qui contient un attribut nommé <code>"data-src"</code> :</p>
+Cet exemple utilise un [sélecteur d'attribut](/fr/docs/Web/CSS/S%C3%A9lecteurs_d_attribut) pour renvoyer une liste d'éléments {{domxref("iframe")}} dans le document qui contient un attribut nommé `"data-src"` :
 
-<pre class="brush: js">const matches = document.querySelectorAll("iframe[data-src]");</pre>
+```js
+const matches = document.querySelectorAll("iframe[data-src]");
+```
 
-<p>Ici, un sélecteur d'attribut est utilisé pour renvoyer une liste d'éléments de liste contenus dans une liste dont l'identifiant est <code>"userlist"</code> lequel a un attribut <code>"data-active"</code> dont la valeur est <code>"1"</code>:</p>
+Ici, un sélecteur d'attribut est utilisé pour renvoyer une liste d'éléments de liste contenus dans une liste dont l'identifiant est `"userlist"` lequel a un attribut `"data-active"` dont la valeur est `"1"`:
 
-<pre class="brush: js">const container = document.querySelector("#userlist");
-const matches = container.querySelectorAll("li[data-active='1']");</pre>
+```js
+const container = document.querySelector("#userlist");
+const matches = container.querySelectorAll("li[data-active='1']");
+```
 
-<h3 id="Accès_aux_correspondances">Accès aux correspondances</h3>
+### Accès aux correspondances
 
-<p>Une fois que la {{domxref("NodeList")}} des éléments correspondants est renvoyée, vous pouvez l'examiner comme un tableau (<em>array</em>). Si le tableau est vide (c'est quand sa propriété <code>length</code> est 0), alors aucune correspondance n'a été trouvée.</p>
+Une fois que la {{domxref("NodeList")}} des éléments correspondants est renvoyée, vous pouvez l'examiner comme un tableau (_array_). Si le tableau est vide (c'est quand sa propriété `length` est 0), alors aucune correspondance n'a été trouvée.
 
-<p>Sinon, vous pouvez simplement utiliser la notation de tableau standard pour accéder au contenu de la liste. Vous pouvez utiliser n'importe quelle instruction de boucle commune, telle que :</p>
+Sinon, vous pouvez simplement utiliser la notation de tableau standard pour accéder au contenu de la liste. Vous pouvez utiliser n'importe quelle instruction de boucle commune, telle que :
 
-<pre class="brush: js">const highlightedItems = userList.querySelectorAll(".highlighted");
+```js
+const highlightedItems = userList.querySelectorAll(".highlighted");
 
 highlightedItems.forEach(function(userItem) {
   deleteUser(userItem);
-});</pre>
+});
+```
 
-<h2 id="Notes">Notes d'utilisation</h2>
+## Notes d'utilisation
 
-<p><code>querySelectorAll()</code> se comporte différemment des bibliothèques DOM JavaScript les plus courantes, ce qui peut entraîner des résultats inattendus.</p>
+`querySelectorAll()` se comporte différemment des bibliothèques DOM JavaScript les plus courantes, ce qui peut entraîner des résultats inattendus.
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<p>Considérez ce HTML, avec ses trois blocs {{HTMLElement("div")}} imbriqués.</p>
+Considérez ce HTML, avec ses trois blocs {{HTMLElement("div")}} imbriqués.
 
-<pre class="brush: html">&lt;div class="outer"&gt;
-  &lt;div class="select"&gt;
-    &lt;div class="inner"&gt;
-    &lt;/div&gt;
-  &lt;/div&gt;
-&lt;/div&gt;</pre>
+```html
+<div class="outer">
+  <div class="select">
+    <div class="inner">
+    </div>
+  </div>
+</div>
+```
 
-<h3 id="JavaScript">JavaScript</h3>
+### JavaScript
 
-<pre class="brush: js">const select = document.querySelector('.select');
+```js
+const select = document.querySelector('.select');
 const inner = select.querySelectorAll('.outer .inner');
-inner.length; // 1, not 0!</pre>
+inner.length; // 1, not 0!
+```
 
-<p>Dans cet exemple, lors de la sélection de <code>".outer .inner"</code> dans le contexte, le <code>&lt;div&gt;</code> avec la classe <code>"select"</code>, l'élément avec la classe <code>".inner"</code> est toujours trouvé, même si <code>.outer</code> n'est pas un descendant de l'élément de base sur lequel la recherche <code>(".select")</code> est effectuée. Par défaut, <code>querySelectorAll()</code> vérifie uniquement que le dernier élément du sélecteur se trouve dans la portée de la recherche.</p>
+Dans cet exemple, lors de la sélection de `".outer .inner"` dans le contexte, le `<div>` avec la classe `"select"`, l'élément avec la classe `".inner"` est toujours trouvé, même si `.outer` n'est pas un descendant de l'élément de base sur lequel la recherche `(".select")` est effectuée. Par défaut, `querySelectorAll()` vérifie uniquement que le dernier élément du sélecteur se trouve dans la portée de la recherche.
 
-<p>La pseudo-classe {{cssxref (":scope")}} restaure le comportement attendu, ne faisant correspondre les sélecteurs que sur les descendants de l'élément de base :</p>
+La pseudo-classe {{cssxref (":scope")}} restaure le comportement attendu, ne faisant correspondre les sélecteurs que sur les descendants de l'élément de base :
 
-<pre class="brush: js">const select = document.querySelector('.select');
+```js
+const select = document.querySelector('.select');
 const inner = select.querySelectorAll(':scope .outer .inner');
-inner.length; // 0</pre>
-
-<h2 id="Spécification">Spécification</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName("DOM WHATWG", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td>
-   <td>{{Spec2("DOM WHATWG")}}</td>
-   <td>Norme actuelle</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td>
-   <td>{{Spec2("Selectors API Level 2")}}</td>
-   <td>Pas de changement</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td>
-   <td>{{Spec2("DOM4")}}</td>
-   <td>Définition initiale</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}</td>
-   <td>{{Spec2("Selectors API Level 1")}}</td>
-   <td>Définition originale</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Document.querySelectorAll")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">Localisation des éléments DOM avec les sélecteurs</a></li>
- <li><a href="/fr/docs/Web/CSS/Attribute_selectors">Sélecteurs d'attribut</a> dans le guide CSS</li>
- <li><a href="/fr/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors">Sélecteurs d'attribut</a> dans la zone d'apprentissage de MDN</li>
- <li>{{domxref("Element.querySelectorAll")}} et {{domxref("Element.querySelectorAll()")}}</li>
- <li>{{domxref("document.querySelector")}}</li>
- <li>{{domxref("DocumentFragment.querySelector()")}} et {{domxref("DocumentFragment.querySelectorAll()")}}</li>
- <li>{{domxref("ParentNode.querySelector()")}} et {{domxref("ParentNode.querySelectorAll()")}}</li>
- <li><a href="/fr/docs/Code_snippets/QuerySelector">Extraits de code pour <code>querySelector</code></a></li>
-</ul>
+inner.length; // 0
+```
+
+## Spécification
+
+| Spécification                                                                                                                                | Statut                                       | Commentaire          |
+| -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------- |
+| {{SpecName("DOM WHATWG", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}             | {{Spec2("DOM WHATWG")}}             | Norme actuelle       |
+| {{SpecName("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}} | {{Spec2("Selectors API Level 2")}} | Pas de changement    |
+| {{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}                     | {{Spec2("DOM4")}}                     | Définition initiale  |
+| {{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}                     | {{Spec2("Selectors API Level 1")}} | Définition originale |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Document.querySelectorAll")}}
+
+## Voir aussi
+
+- [Localisation des éléments DOM avec les sélecteurs](/fr/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors)
+- [Sélecteurs d'attribut](/fr/docs/Web/CSS/Attribute_selectors) dans le guide CSS
+- [Sélecteurs d'attribut](/fr/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors) dans la zone d'apprentissage de MDN
+- {{domxref("Element.querySelectorAll")}} et {{domxref("Element.querySelectorAll()")}}
+- {{domxref("document.querySelector")}}
+- {{domxref("DocumentFragment.querySelector()")}} et {{domxref("DocumentFragment.querySelectorAll()")}}
+- {{domxref("ParentNode.querySelector()")}} et {{domxref("ParentNode.querySelectorAll()")}}
+- [Extraits de code pour `querySelector`](/fr/docs/Code_snippets/QuerySelector)
diff --git a/files/fr/web/api/document/readystate/index.md b/files/fr/web/api/document/readystate/index.md
index 36d01f7c11..e90f271bc5 100644
--- a/files/fr/web/api/document/readystate/index.md
+++ b/files/fr/web/api/document/readystate/index.md
@@ -8,42 +8,40 @@ tags:
   - Référence(2)
 translation_of: Web/API/Document/readyState
 ---
-<div>{{APIRef("DOM")}} {{ gecko_minversion_header("1.9.2") }}</div>
+{{APIRef("DOM")}} {{ gecko_minversion_header("1.9.2") }}
 
-<p>La valeur <strong>Document.readyState</strong> est une propriété de {{ domxref("document") }} qui décrit l'état de chargement du document.</p>
+La valeur **Document.readyState** est une propriété de {{ domxref("document") }} qui décrit l'état de chargement du document.
 
-<p>À chaque évolution de la valeur, un évenement {{event("readystatechange")}} est émis dans l'objet {{ domxref("document") }}.</p>
+À chaque évolution de la valeur, un évenement {{event("readystatechange")}} est émis dans l'objet {{ domxref("document") }}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var <var>string</var> = <var>document</var>.readyState;
-</pre>
+    var string = document.readyState;
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<p>La variable <code>readyState</code><strong> </strong>peut valoir :</p>
+La variable `readyState`\*\* \*\*peut valoir :
 
-<dl>
- <dt><code><strong>loading</strong></code></dt>
- <dd>Le {{ domxref("document") }} est encore en chargement.</dd>
- <dt><code><strong>interactive</strong></code></dt>
- <dd>Le document a été chargé, mais les ressources (images, scripts, css..) sont encore en cours d'acquisition. En revanche la structure DOM est générée, et {{event("DOMContentLoaded")}} a été émis.</dd>
- <dt><code><strong>complete</strong></code></dt>
- <dd>Le document et toutes les sous-ressources ont été chargés, et {{event("load")}} a été émis.</dd>
-</dl>
+- **`loading`**
+  - : Le {{ domxref("document") }} est encore en chargement.
+- **`interactive`**
+  - : Le document a été chargé, mais les ressources (images, scripts, css..) sont encore en cours d'acquisition. En revanche la structure DOM est générée, et {{event("DOMContentLoaded")}} a été émis.
+- **`complete`**
+  - : Le document et toutes les sous-ressources ont été chargés, et {{event("load")}} a été émis.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Différents_états_de_chargement">Différents états de chargement</h3>
+### Différents états de chargement
 
-<pre class="brush: js">switch (document.readyState) {
+```js
+switch (document.readyState) {
   case "loading":
     // Encore en chargement.
     break;
   case "interactive":
     // Le DOM est construit, on peut y accéder.
     var span = document.createElement("span");
-    span.textContent = "A &lt;span&gt; element.";
+    span.textContent = "A <span> element.";
     document.body.appendChild(span);
     break;
   case "complete":
@@ -51,77 +49,61 @@ translation_of: Web/API/Document/readyState
     console.log("The first CSS rule is: " + document.styleSheets[0].cssRules[0].cssText);
     break;
 }
-</pre>
+```
 
-<h3 id="readystatechange_comme_alternative_à_DOMContentLoaded">readystatechange comme alternative à  DOMContentLoaded</h3>
+### readystatechange comme alternative à  DOMContentLoaded
 
-<pre class="brush:js">// alternative à DOMContentLoaded
+```js
+// alternative à DOMContentLoaded
 document.onreadystatechange = function () {
   if (document.readyState == "interactive") {
     initApplication();
   }
-}</pre>
+}
+```
 
-<h3 id="readystatechange_comme_alternative_à_load">readystatechange comme alternative à load</h3>
+### readystatechange comme alternative à load
 
-<pre class="brush: js">// alternative à load
+```js
+// alternative à load
 document.onreadystatechange = function () {
   if (document.readyState == "complete") {
     initApplication();
   }
-}</pre>
+}
+```
 
-<h3 id="readystatechange_comme_event_listener_pour_insérer_ou_modifier_le_DOM_avant_DOMContentLoaded">readystatechange comme event listener pour insérer ou modifier le DOM avant DOMContentLoaded</h3>
+### readystatechange comme event listener pour insérer ou modifier le DOM avant DOMContentLoaded
 
-<pre class="brush: js">// Modification du document &lt;body&gt; dès que possible en utilisant un script externe
+```js
+// Modification du document <body> dès que possible en utilisant un script externe
 var bootstrap = function(evt){
   if (evt.target.readyState === "interactive") { initLoader(); }
   else if (evt.target.readyState === "complete") { initApp(); }
 }
 document.addEventListener('readystatechange', bootstrap, false);
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécifications</th>
-   <th scope="col">Status</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML WHATWG", "#current-document-readiness", "Document readiness")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML5.1", "#current-document-readiness", "Document readiness")}}</td>
-   <td>{{Spec2('HTML5.1')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML5 W3C", "#current-document-readiness", "Document readiness")}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Spécification initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<div>{{Compat("api.Document.readyState")}}</div>
-
-<p>[1] Ne supporte que 'complete'. Opera Presto notifie 'complete' seulement après l'événement 'load' (dans un ordre incorrect par rapport à la spécification du standard HTML5).</p>
-
-<p>[2] Internet Explorer 9 et 10 ont des bogues quand l'état 'interactive' <a href="https://bugs.jquery.com/ticket/12282">peut être notifié trop tôt</a> avant que le document soit entièrement analysé.</p>
-
-<p>[3] À l'introduction dans IE 4, la propriété était seulement disponible pour les objets document, embed, img, link, object, script, et style. IE 5 a étendu le support à tous les objets élément HTML.</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>L'événement {{event("readystatechange")}}</li>
- <li>L'événement {{event("DOMContentLoaded")}}</li>
- <li>L'événement {{event("load")}}</li>
-</ul>
+```
+
+## Spécifications
+
+| Spécifications                                                                                               | Status                           | Commentaires            |
+| ------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------------------- |
+| {{SpecName("HTML WHATWG", "#current-document-readiness", "Document readiness")}} | {{Spec2('HTML WHATWG')}} |                         |
+| {{SpecName("HTML5.1", "#current-document-readiness", "Document readiness")}}         | {{Spec2('HTML5.1')}}     |                         |
+| {{SpecName("HTML5 W3C", "#current-document-readiness", "Document readiness")}}     | {{Spec2('HTML5 W3C')}}     | Spécification initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Document.readyState")}}
+
+\[1] Ne supporte que 'complete'. Opera Presto notifie 'complete' seulement après l'événement 'load' (dans un ordre incorrect par rapport à la spécification du standard HTML5).
+
+\[2] Internet Explorer 9 et 10 ont des bogues quand l'état 'interactive' [peut être notifié trop tôt](https://bugs.jquery.com/ticket/12282) avant que le document soit entièrement analysé.
+
+\[3] À l'introduction dans IE 4, la propriété était seulement disponible pour les objets document, embed, img, link, object, script, et style. IE 5 a étendu le support à tous les objets élément HTML.
+
+## Voir aussi
+
+- L'événement {{event("readystatechange")}}
+- L'événement {{event("DOMContentLoaded")}}
+- L'événement {{event("load")}}
diff --git a/files/fr/web/api/document/readystatechange_event/index.md b/files/fr/web/api/document/readystatechange_event/index.md
index 95c60dae30..c6f5652efe 100644
--- a/files/fr/web/api/document/readystatechange_event/index.md
+++ b/files/fr/web/api/document/readystatechange_event/index.md
@@ -4,64 +4,38 @@ slug: Web/API/Document/readystatechange_event
 translation_of: Web/API/Document/readystatechange_event
 original_slug: Web/Events/readystatechange
 ---
-<p>{{ApiRef}}</p>
-
-<p>L'événement <code>readystatechange</code> est déclenché lorsque l'attribut <a href="/fr/docs/DOM/document.readyState"> <code>readyState</code> </a> d'un document a changé.</p>
-
-<h2 id="Information_générale">Information générale</h2>
-
-<dl>
- <dt style="float: left; text-align: right; width: 120px;">Specification</dt>
- <dd style="margin: 0 0 0 120px;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#current-document-readiness">HTML5</a></dd>
- <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
- <dd style="margin: 0 0 0 120px;">Event</dd>
- <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt>
- <dd style="margin: 0 0 0 120px;">No</dd>
- <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt>
- <dd style="margin: 0 0 0 120px;">No</dd>
- <dt style="float: left; text-align: right; width: 120px;">Target</dt>
- <dd style="margin: 0 0 0 120px;">Document</dd>
- <dt style="float: left; text-align: right; width: 120px;">Default Action</dt>
- <dd style="margin: 0 0 0 120px;">None.</dd>
-</dl>
-
-<h2 id="propriétés">propriétés</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Property</th>
-   <th scope="col">Type</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>target</code> {{readonlyInline}}</td>
-   <td>{{domxref("EventTarget")}}</td>
-   <td>The event target (the topmost target in the DOM tree).</td>
-  </tr>
-  <tr>
-   <td><code>type</code> {{readonlyInline}}</td>
-   <td>{{domxref("DOMString")}}</td>
-   <td>The type of event.</td>
-  </tr>
-  <tr>
-   <td><code>bubbles</code> {{readonlyInline}}</td>
-   <td>{{jsxref("Boolean")}}</td>
-   <td>Whether the event normally bubbles or not.</td>
-  </tr>
-  <tr>
-   <td><code>cancelable</code> {{readonlyInline}}</td>
-   <td>{{jsxref("Boolean")}}</td>
-   <td>Whether the event is cancellable or not.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="exemple">exemple</h2>
-
-<pre class="brush: js">document.readyState === "complete";
+{{ApiRef}}
+
+L'événement `readystatechange` est déclenché lorsque l'attribut [`readyState` ](/fr/docs/DOM/document.readyState)d'un document a changé.
+
+## Information générale
+
+- Specification
+  - : [HTML5](http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#current-document-readiness)
+- Interface
+  - : Event
+- Bubbles
+  - : No
+- Cancelable
+  - : No
+- Target
+  - : Document
+- Default Action
+  - : None.
+
+## propriétés
+
+| Property                              | Type                                 | Description                                            |
+| ------------------------------------- | ------------------------------------ | ------------------------------------------------------ |
+| `target` {{readonlyInline}}     | {{domxref("EventTarget")}} | The event target (the topmost target in the DOM tree). |
+| `type` {{readonlyInline}}       | {{domxref("DOMString")}}     | The type of event.                                     |
+| `bubbles` {{readonlyInline}}    | {{jsxref("Boolean")}}         | Whether the event normally bubbles or not.             |
+| `cancelable` {{readonlyInline}} | {{jsxref("Boolean")}}         | Whether the event is cancellable or not.               |
+
+## exemple
+
+```js
+document.readyState === "complete";
 // true
 
 
@@ -71,18 +45,16 @@ document.onreadystatechange = function () {
         initApplication();
     }
 }
-</pre>
+```
 
-<h2 id="Navigateur_compatible">Navigateur compatible</h2>
+## Navigateur compatible
 
-<p>Cet événement a longtemps été soutenue par Internet Explorer et peut être utilisé comme une alternative à l'evenement <code><a href="/fr/docs/">DOMContentLoaded</a></code> (voir la note [2] de la section <a href="/fr/docs/Web/Events/DOMContentLoaded#Navigateurs_compatibles">Navigateurs compatibles</a>).</p>
+Cet événement a longtemps été soutenue par Internet Explorer et peut être utilisé comme une alternative à l'evenement [`DOMContentLoaded`](/fr/docs/) (voir la note \[2] de la section [Navigateurs compatibles](/fr/docs/Web/Events/DOMContentLoaded#Navigateurs_compatibles)).
 
-<h2 id="Les_événements_liés">Les événements liés</h2>
+## Les événements liés
 
-<ul>
- <li>{{event("DOMContentLoaded")}}</li>
- <li>{{event("readystatechange")}}</li>
- <li>{{event("load")}}</li>
- <li>{{event("beforeunload")}}</li>
- <li>{{event("unload")}}</li>
-</ul>
+- {{event("DOMContentLoaded")}}
+- {{event("readystatechange")}}
+- {{event("load")}}
+- {{event("beforeunload")}}
+- {{event("unload")}}
diff --git a/files/fr/web/api/document/referrer/index.md b/files/fr/web/api/document/referrer/index.md
index 075f837b2a..4c87c8e53d 100644
--- a/files/fr/web/api/document/referrer/index.md
+++ b/files/fr/web/api/document/referrer/index.md
@@ -8,16 +8,20 @@ tags:
   - Reference
 translation_of: Web/API/Document/referrer
 ---
-<div>
- {{APIRef}}</div>
-<h2 id="Syntax">Résumé</h2>
-<p>Renvoie l'<a href="http://www.w3.org/Addressing/#background">URI</a> de la page de provenance.</p>
-<h2 id="Syntax">Syntaxe</h2>
-<pre class="syntaxbox"><var>string</var> = document.referrer;
-</pre>
-<h2 id="Notes">Notes</h2>
-<p>La valeur est une chaîne de caractères vide si l'utilisateur est arrivé directement sur la page (pas grâce à un lien, mais, par exemple, via un marque-page). Étant donné que cette propriété ne retourne qu'une chaîne, elle ne vous donne pas un accès DOM à la page de provenance.</p>
-<h2 id="Specification">Spécification</h2>
-<ul>
- <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-95229140">DOM Level 2: referrer</a></li>
-</ul>
+{{APIRef}}
+
+## Résumé
+
+Renvoie l'[URI](http://www.w3.org/Addressing/#background) de la page de provenance.
+
+## Syntaxe
+
+    string = document.referrer;
+
+## Notes
+
+La valeur est une chaîne de caractères vide si l'utilisateur est arrivé directement sur la page (pas grâce à un lien, mais, par exemple, via un marque-page). Étant donné que cette propriété ne retourne qu'une chaîne, elle ne vous donne pas un accès DOM à la page de provenance.
+
+## Spécification
+
+- [DOM Level 2: referrer](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-95229140)
diff --git a/files/fr/web/api/document/registerelement/index.md b/files/fr/web/api/document/registerelement/index.md
index 8512a48f5f..37a87f3cfe 100644
--- a/files/fr/web/api/document/registerelement/index.md
+++ b/files/fr/web/api/document/registerelement/index.md
@@ -10,56 +10,52 @@ tags:
   - Référence(2)
 translation_of: Web/API/Document/registerElement
 ---
-<p>{{APIRef("DOM")}} {{Deprecated_header}}</p>
+{{APIRef("DOM")}} {{Deprecated_header}}
 
-<div class="warning">
-<p><strong>Attention :</strong> document.registerElement() est déprécié en faveur de <a href="/fr/docs/Web/API/CustomElementRegistry/define">customElements.define()</a>.</p>
-</div>
+> **Attention :** document.registerElement() est déprécié en faveur de [customElements.define()](/fr/docs/Web/API/CustomElementRegistry/define).
 
-<p>{{draft}}</p>
+{{draft}}
 
-<p>La méthode <code><strong>Document.registerElement()</strong></code> permet d'enregistrer un nouvel <a href="/fr/docs/Web/Web_Components/Custom_Elements">élément personnalisé</a> dans le navigateur, et retourne un constructeur pour ce nouvel élément.</p>
+La méthode **`Document.registerElement()`** permet d'enregistrer un nouvel [élément personnalisé](/fr/docs/Web/Web_Components/Custom_Elements) dans le navigateur, et retourne un constructeur pour ce nouvel élément.
 
-<div class="note">
-<p><strong>Note :</strong> Il s'agit d'une technologie expérimentale. Le navigateur dans lequel vous l'utilisez doit être compatible avec les Composants Web. Voir <a href="/fr/docs/Web/Web_Components#Activer_les_Web_Components_dans_Firefox">Activer les Composants Web dans Firefox</a>.</p>
-</div>
+> **Note :** Il s'agit d'une technologie expérimentale. Le navigateur dans lequel vous l'utilisez doit être compatible avec les Composants Web. Voir [Activer les Composants Web dans Firefox](/fr/docs/Web/Web_Components#Activer_les_Web_Components_dans_Firefox).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var <em>constructeur</em> = document.registerElement(<em>nom-tag</em>, <em>options</em>);</pre>
+    var constructeur = document.registerElement(nom-tag, options);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><em>nom-tag</em></dt>
- <dd>Le nom de l'élément personnalisé. Le nom doit contenir un tiret (-), par exemple <code>mon-tag</code>.</dd>
- <dt><em>options {{optional_inline}}</em></dt>
- <dd>Un objet définissant le prototype sur lequel se base l'élément personnalisé, ainsi qu'un tag existant à étendre.</dd>
-</dl>
+- _nom-tag_
+  - : Le nom de l'élément personnalisé. Le nom doit contenir un tiret (-), par exemple `mon-tag`.
+- _options {{optional_inline}}_
+  - : Un objet définissant le prototype sur lequel se base l'élément personnalisé, ainsi qu'un tag existant à étendre.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Voici un exemple très simple :</p>
+Voici un exemple très simple :
 
-<pre class="brush: js">var Montag = document.registerElement('mon-tag');
-</pre>
+```js
+var Montag = document.registerElement('mon-tag');
+```
 
-<p>Le nouveau tag est désormais enregistré dans le navigateur. La variable <code>Montag</code> contient un constructeur que vous pouvez utiliser pour créer des éléments <code>mon-tag</code> dans le document de la façon suivante :</p>
+Le nouveau tag est désormais enregistré dans le navigateur. La variable `Montag` contient un constructeur que vous pouvez utiliser pour créer des éléments `mon-tag` dans le document de la façon suivante :
 
-<pre class="brush: js">document.body.appendChild(new Montag());</pre>
+```js
+document.body.appendChild(new Montag());
+```
 
-<p>Ceci insert un élément <code>mon-tag</code> vide qui sera visible si vous utilisez les outils de développement du navigateur. Il ne sera pas visible si vous utilisez la fonction de visualisation de la source du navigateur. Et il ne sera pas visible dans le navigateur tant que vous n'aurez pas ajouter du contenu au tag. Ce qui suit est un exemple d'ajout de contenu au nouveau tag :</p>
+Ceci insert un élément `mon-tag` vide qui sera visible si vous utilisez les outils de développement du navigateur. Il ne sera pas visible si vous utilisez la fonction de visualisation de la source du navigateur. Et il ne sera pas visible dans le navigateur tant que vous n'aurez pas ajouter du contenu au tag. Ce qui suit est un exemple d'ajout de contenu au nouveau tag :
 
-<pre class="brush: js">var montag = document.getElementsByTagName("mon-tag")[0];
+```js
+var montag = document.getElementsByTagName("mon-tag")[0];
 montag.textContent = "Je suis un élément mon-tag.";
-</pre>
+```
 
-<h2 id="Compatibilité_avec_les_navigateurs">Compatibilité avec les navigateurs</h2>
+## Compatibilité avec les navigateurs
 
-<p>{{Compat("api.Document.registerElement")}}</p>
+{{Compat("api.Document.registerElement")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/Web_Components/Custom_Elements">Éléments personnalisés</a></li>
-</ul>
+- [Éléments personnalisés](/fr/docs/Web/Web_Components/Custom_Elements)
diff --git a/files/fr/web/api/document/releasecapture/index.md b/files/fr/web/api/document/releasecapture/index.md
index bb7cafb599..4e07757b26 100644
--- a/files/fr/web/api/document/releasecapture/index.md
+++ b/files/fr/web/api/document/releasecapture/index.md
@@ -10,29 +10,24 @@ tags:
   - Souris
 translation_of: Web/API/Document/releaseCapture
 ---
-<div>{{ ApiRef("DOM") }} {{gecko_minversion_header("2.0")}}</div>
+{{ ApiRef("DOM") }} {{gecko_minversion_header("2.0")}}
 
-<div> </div>
+Libère la capture de la souris si elle est actuellement activée (_bouton gauche enfoncé_) sur un élément de ce document. L'activation de la capture de la souris sur un élément se fait en appelant {{domxref("element.setCapture()")}}.
 
-<p>Libère la capture de la souris si elle est actuellement activée (<em>bouton gauche enfoncé</em>) sur un élément de ce document. L'activation de la capture de la souris sur un élément se fait en appelant {{domxref("element.setCapture()")}}.</p>
+## Syntaxe
 
-<h2 id="Syntax">Syntaxe</h2>
+    document.releaseCapture()
 
-<pre class="syntaxbox">document.releaseCapture()
-</pre>
+Une fois la capture de la souris relâchée, les événements de souris ne seront plus dirigés vers l'élément sur lequel la capture est activée.
 
-<p>Une fois la capture de la souris relâchée, les événements de souris ne seront plus dirigés vers l'élément sur lequel la capture est activée.</p>
+## Exemple
 
-<h2 id="Example">Exemple</h2>
+Voir l'[exemple](/en-US/docs/Web/API/element.setCapture#Example) pour {{domxref("element.setCapture()")}}.
 
-<p>Voir l'<a href="/en-US/docs/Web/API/element.setCapture#Example">exemple</a> pour {{domxref("element.setCapture()")}}.</p>
+## Spécifications
 
-<h2 id="Specification">Spécifications</h2>
+Basé sur l'implémentation Internet Explorer.
 
-<p>Basé sur l'implémentation Internet Explorer.</p>
+## Voir aussi
 
-<h2 id="See_also">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("element.setCapture()")}}</li>
-</ul>
+- {{domxref("element.setCapture()")}}
diff --git a/files/fr/web/api/document/scripts/index.md b/files/fr/web/api/document/scripts/index.md
index cf019c81d2..3f974461c6 100644
--- a/files/fr/web/api/document/scripts/index.md
+++ b/files/fr/web/api/document/scripts/index.md
@@ -9,47 +9,36 @@ tags:
   - Reference
 translation_of: Web/API/Document/scripts
 ---
-<div>{{ApiRef}}</div>
+{{ApiRef}}
 
-<p>Retourne une liste des scripts (éléments {{HTMLElement("script")}}) présents dans le document. L'objet retourné est une liste du type {{domxref("HTMLCollection")}}.</p>
+Retourne une liste des scripts (éléments {{HTMLElement("script")}}) présents dans le document. L'objet retourné est une liste du type {{domxref("HTMLCollection")}}.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">var <var>scriptList</var> = document.scripts;
-</pre>
+```js
+var scriptList = document.scripts;
+```
 
-<p>La liste <code>scriptList</code> est un objet {{domxref("HTMLCollection")}} qu'on peut utiliser comme un tableau pour accéder aux éléments qu'elle contient.</p>
+La liste `scriptList` est un objet {{domxref("HTMLCollection")}} qu'on peut utiliser comme un tableau pour accéder aux éléments qu'elle contient.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<p>Cet exemple détecte la présence d'éléments {{HTMLElement("script")}} dans le document.</p>
+Cet exemple détecte la présence d'éléments {{HTMLElement("script")}} dans le document.
 
-<pre class="brush:js">var scripts = document.scripts;
+```js
+var scripts = document.scripts;
 
 if (scripts.length) {
   alert("This page has scripts!");
 }
-</pre>
-
-<h2 id="Specifications">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', '#dom-document-scripts', 'Document.scripts')}}</td>
-      <td>{{ Spec2('HTML WHATWG') }}</td>
-      <td></td>
-    </tr>
-  </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<div>{{Compat("api.Document.scripts")}}</div>
+```
+
+## Spécifications
+
+| Spécification                                                                                    | Statut                               | Commentaire |
+| ------------------------------------------------------------------------------------------------ | ------------------------------------ | ----------- |
+| {{SpecName('HTML WHATWG', '#dom-document-scripts', 'Document.scripts')}} | {{ Spec2('HTML WHATWG') }} |             |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Document.scripts")}}
diff --git a/files/fr/web/api/document/scroll_event/index.md b/files/fr/web/api/document/scroll_event/index.md
index 21c5ba592e..47a92ef23c 100644
--- a/files/fr/web/api/document/scroll_event/index.md
+++ b/files/fr/web/api/document/scroll_event/index.md
@@ -9,94 +9,66 @@ tags:
   - requestAnimationFrame
 translation_of: Web/API/Document/scroll_event
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}
 
-<p>L’évènement <strong><code>scroll</code></strong> (défilement) est émis lorsque l’on fait défiler le document ou un élément.</p>
+L’évènement **`scroll`** (défilement) est émis lorsque l’on fait défiler le document ou un élément.
 
-<h2 id="Informations_générales">Informations générales</h2>
+## Informations générales
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th>Bouillonne</th>
-   <td>Pas sur les éléments, mais bouillonne vers la defaultView si émis sur le document</td>
-  </tr>
-  <tr>
-   <th>Annulable</th>
-   <td>Non</td>
-  </tr>
-  <tr>
-   <th>Interface</th>
-   <td>{{domxref("UIEvent")}}</td>
-  </tr>
-  <tr>
-   <th>Cible</th>
-   <td>DefaultView, {{domxref("Document")}}, {{domxref("Element")}}</td>
-  </tr>
-  <tr>
-   <th>Action par défaut</th>
-   <td>Aucune</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th>Bouillonne</th>
+      <td>
+        Pas sur les éléments, mais bouillonne vers la defaultView si émis sur le
+        document
+      </td>
+    </tr>
+    <tr>
+      <th>Annulable</th>
+      <td>Non</td>
+    </tr>
+    <tr>
+      <th>Interface</th>
+      <td>{{domxref("UIEvent")}}</td>
+    </tr>
+    <tr>
+      <th>Cible</th>
+      <td>
+        DefaultView, {{domxref("Document")}},
+        {{domxref("Element")}}
+      </td>
+    </tr>
+    <tr>
+      <th>Action par défaut</th>
+      <td>Aucune</td>
+    </tr>
+  </tbody>
 </table>
 
-<div class="note">
-<p><strong>Note :</strong> Sur iOS UIWebViews, les évènements <code>scroll</code> ne sont pas émis pendant le défilement, mais une fois que celui-ci est terminé. Voir <a href="https://github.com/twbs/bootstrap/issues/16202">Bootstrap issue #16202</a>. Safari et WKWebViews ne sont pas affectés par ce bogue.</p>
-</div>
+> **Note :** Sur iOS UIWebViews, les évènements `scroll` ne sont pas émis pendant le défilement, mais une fois que celui-ci est terminé. Voir [Bootstrap issue #16202](https://github.com/twbs/bootstrap/issues/16202). Safari et WKWebViews ne sont pas affectés par ce bogue.
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Propriété</th>
-   <th scope="col">Type</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>target</code> {{readonlyInline}}</td>
-   <td>{{domxref("EventTarget")}}</td>
-   <td>La cible de l’évènement (la plus haute dans l’arbre DOM).</td>
-  </tr>
-  <tr>
-   <td><code>type</code> {{readonlyInline}}</td>
-   <td>{{domxref("DOMString")}}</td>
-   <td>Le type d’évènement.</td>
-  </tr>
-  <tr>
-   <td><code>bubbles</code> {{readonlyInline}}</td>
-   <td>{{domxref("Boolean")}}</td>
-   <td>Si l’évènement bouillonne ou non.</td>
-  </tr>
-  <tr>
-   <td><code>cancelable</code> {{readonlyInline}}</td>
-   <td>{{domxref("Boolean")}}</td>
-   <td>Si l’évènement est annulable ou non.</td>
-  </tr>
-  <tr>
-   <td><code>view</code> {{readonlyInline}}</td>
-   <td>{{domxref("WindowProxy")}}</td>
-   <td>{{domxref("Document.defaultView")}} (objet <code>window</code> du document)</td>
-  </tr>
-  <tr>
-   <td><code>detail</code> {{readonlyInline}}</td>
-   <td><code>long</code> (<code>float</code>)</td>
-   <td>0.</td>
-  </tr>
- </tbody>
-</table>
+| Propriété                             | Type                                 | Description                                                                   |
+| ------------------------------------- | ------------------------------------ | ----------------------------------------------------------------------------- |
+| `target` {{readonlyInline}}     | {{domxref("EventTarget")}} | La cible de l’évènement (la plus haute dans l’arbre DOM).                     |
+| `type` {{readonlyInline}}       | {{domxref("DOMString")}}     | Le type d’évènement.                                                          |
+| `bubbles` {{readonlyInline}}    | {{domxref("Boolean")}}         | Si l’évènement bouillonne ou non.                                             |
+| `cancelable` {{readonlyInline}} | {{domxref("Boolean")}}         | Si l’évènement est annulable ou non.                                          |
+| `view` {{readonlyInline}}       | {{domxref("WindowProxy")}} | {{domxref("Document.defaultView")}} (objet `window` du document) |
+| `detail` {{readonlyInline}}     | `long` (`float`)                     | 0.                                                                            |
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<h3 id="Temporisation_des_évènements_scroll">Temporisation des évènements scroll</h3>
+### Temporisation des évènements scroll
 
-<p>Comme les évènements <code>scroll</code> peuvent être émis à une fréquence élevée, le gestionnaire d’évènements ne devrait pas effectuer des opérations coûteuses en termes de puissance de calcul, telles que des modification du DOM. À la place, il est recommandé de temporiser l’évènement en utilisant {{domxref("window.requestAnimationFrame()", "requestAnimationFrame()")}}, {{domxref("window.setTimeout()", "setTimeout()")}} ou un {{domxref("CustomEvent")}}, comme suit.</p>
+Comme les évènements `scroll` peuvent être émis à une fréquence élevée, le gestionnaire d’évènements ne devrait pas effectuer des opérations coûteuses en termes de puissance de calcul, telles que des modification du DOM. À la place, il est recommandé de temporiser l’évènement en utilisant {{domxref("window.requestAnimationFrame()", "requestAnimationFrame()")}}, {{domxref("window.setTimeout()", "setTimeout()")}} ou un {{domxref("CustomEvent")}}, comme suit.
 
-<p>Notez, cependant, que les évènements d’interface utilisateur et les frames d’animation sont émises à peu près à la même fréquence, et ainsi l’optimisation qui suit est souvent superflue. Cet exemple optimise l’évènement <code>scroll</code> avec <code>requestAnimationFrame</code>.</p>
+Notez, cependant, que les évènements d’interface utilisateur et les frames d’animation sont émises à peu près à la même fréquence, et ainsi l’optimisation qui suit est souvent superflue. Cet exemple optimise l’évènement `scroll` avec `requestAnimationFrame`.
 
-<pre class="brush: js">// Référence: http://www.html5rocks.com/en/tutorials/speed/animations/
+```js
+// Référence: http://www.html5rocks.com/en/tutorials/speed/animations/
 
 var derniere_position_de_scroll_connue = 0;
 var ticking = false;
@@ -116,33 +88,32 @@ window.addEventListener('scroll', function(e) {
   }
 
   ticking = true;
-});</pre>
+});
+```
 
-<h3 id="Autres_exemples">Autres exemples</h3>
+### Autres exemples
 
-<p>Pour plus d’exemples similaires, voir l’évènement <a href="/en-US/docs/Web/Events/resize#Example">resize</a>.</p>
+Pour plus d’exemples similaires, voir l’évènement [resize](/en-US/docs/Web/Events/resize#Example).
 
-<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('CSSOM View', '#scrolling-events')}}</td>
-   <td>{{Spec2('CSSOM View')}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <td>Spécification</td>
+      <td>État</td>
+    </tr>
+    <tr>
+      <td>{{SpecName('CSSOM View', '#scrolling-events')}}</td>
+      <td>{{Spec2('CSSOM View')}}</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Document.scroll_event")}}</p>
+{{Compat("api.Document.scroll_event")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("GlobalEventHandlers.onscroll")}}</li>
-</ul>
+- {{domxref("GlobalEventHandlers.onscroll")}}
diff --git a/files/fr/web/api/document/selectedstylesheetset/index.md b/files/fr/web/api/document/selectedstylesheetset/index.md
index 270c7d8821..8ec18bf3a4 100644
--- a/files/fr/web/api/document/selectedstylesheetset/index.md
+++ b/files/fr/web/api/document/selectedstylesheetset/index.md
@@ -9,47 +9,39 @@ tags:
   - Propriétés
 translation_of: Web/API/Document/selectedStyleSheetSet
 ---
-<p>{{ APIRef("DOM") }}{{ gecko_minversion_header("1.9") }}</p>
+{{ APIRef("DOM") }}{{ gecko_minversion_header("1.9") }}
 
-<p>Indique le nom du jeu de feuilles de styles actuellement utilisé.</p>
+Indique le nom du jeu de feuilles de styles actuellement utilisé.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="eval"><em>currentStyleSheetSet</em> = document.selectedStyleSheetSet
+    currentStyleSheetSet = document.selectedStyleSheetSet
 
-document.selectedStyleSheet = <em>newStyleSheetSet</em>
-</pre>
+    document.selectedStyleSheet = newStyleSheetSet
 
-<p>En retour, <code>currentStyleSheetSet</code> indique le nom du jeu de feuilles de styles en cours d'utilisation. Vous pouvez aussi définir celui-ci en utilisant cette propriété.</p>
+En retour, `currentStyleSheetSet` indique le nom du jeu de feuilles de styles en cours d'utilisation. Vous pouvez aussi définir celui-ci en utilisant cette propriété.
 
-<p>La définition de la valeur de cette propriété équivaut à appeler {{ domxref("document.enableStyleSheetsForSet()") }} avec la valeur de <code>currentStyleSheetSet</code>, puis de définir la valeur de <code>lastStyleSheetSet</code> sur cette valeur.</p>
+La définition de la valeur de cette propriété équivaut à appeler {{ domxref("document.enableStyleSheetsForSet()") }} avec la valeur de `currentStyleSheetSet`, puis de définir la valeur de `lastStyleSheetSet` sur cette valeur.
 
-<div class="note">
-  <p><strong>Note :</strong> Cette valeur d'attribut est directe : sa modification affectera la valeur de l'attribut.</p>
-</div>
+> **Note :** Cette valeur d'attribut est directe : sa modification affectera la valeur de l'attribut.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">console.log("Current style sheet set: " + document.selectedStyleSheetSet);
+```js
+console.log("Current style sheet set: " + document.selectedStyleSheetSet);
 
 document.selectedStyleSheetSet = "Some other style sheet";
-</pre>
+```
 
-<div class="note">
-  <p><strong>Note :</strong> Cet exemple vous aidera à comprendre la différence de comportement entre la définition de la valeur de <code>selectedStyleSheetSet</code> et l'appel de {{ domxref("document.enableStyleSheetsForSet()") }}.</p>
-</div>
+> **Note :** Cet exemple vous aidera à comprendre la différence de comportement entre la définition de la valeur de `selectedStyleSheetSet` et l'appel de {{ domxref("document.enableStyleSheetsForSet()") }}.
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{ domxref("document.lastStyleSheetSet") }}</li>
- <li>{{ domxref("document.preferredStyleSheetSet") }}</li>
- <li>{{ domxref("document.styleSheetSets") }}</li>
- <li>{{ domxref("document.enableStyleSheetsForSet()") }}</li>
-</ul>
+- {{ domxref("document.lastStyleSheetSet") }}
+- {{ domxref("document.preferredStyleSheetSet") }}
+- {{ domxref("document.styleSheetSets") }}
+- {{ domxref("document.enableStyleSheetsForSet()") }}
 
-<h2 id="Specification">Spécifications</h2>
+## Spécifications
 
-<ul>
- <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets">HTML5: Alternate Style Sheets</a></li>
-</ul>
+- [HTML5: Alternate Style Sheets](http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets)
diff --git a/files/fr/web/api/document/stylesheets/index.md b/files/fr/web/api/document/stylesheets/index.md
index 44b8d92e15..ab07cc650e 100644
--- a/files/fr/web/api/document/stylesheets/index.md
+++ b/files/fr/web/api/document/stylesheets/index.md
@@ -5,53 +5,27 @@ translation_of: Web/API/DocumentOrShadowRoot/styleSheets
 translation_of_original: Web/API/Document/styleSheets
 original_slug: Web/API/DocumentOrShadowRoot/styleSheets
 ---
-<div>{{APIRef}}</div>
-
-<div>La propriété <strong><code>Document.styleSheets </code></strong>est en lecture seule et retourne une liste {{domxref("StyleSheetList")}} d'objets {{domxref("StyleSheet")}}, qui font référence à l'ensemble des feuilles de style contenues ou embarquées dans le document.</div>
-
-<div> </div>
-
-<h2 id="Syntax">Syntaxe</h2>
-
-<pre class="syntaxbox">var <var>styleSheetList</var> = <em>document</em>.styleSheets;
-</pre>
-
-<p>L'objet retourné est une liste {{domxref("StyleSheetList")}}.</p>
-
-<p>Il s'agit d'une collection ordonnée d'objets {{domxref("StyleSheet")}}. <code><em>styleSheetList</em>.item(<em>index</em>)</code> ou  <code><em>styleSheetList</em>{{ mediawiki.External('<em>index</em>') }}</code> retourne un seul objet stylesheet par son <code>index </code>(<code>index</code> débute par 0).</p>
-
-<h2 id="Specification">Spécification</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>
- </tbody>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSSOM', '#dom-document-stylesheets', 'styleSheets')}}</td>
-   <td>{{Spec2('CSSOM')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Style', 'stylesheets.html#StyleSheets-DocumentStyle-styleSheets', 'styleSheets')}}</td>
-   <td>{{Spec2('DOM2 Style')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="See_also">Voir aussi</h2>
-
-<ul>
- <li>{{Link("/en-US/docs/Web/API/CSS_Object_Model/Using_dynamic_styling_information")}}</li>
-</ul>
-
-<ul>
- <li><a href="http://www.w3.org/TR/DOM-Level-2-Style/stylesheets.html#StyleSheets-DocumentStyle-styleSheets">DOM Level 2 Style: styleSheets</a></li>
-</ul>
+{{APIRef}}La propriété **`Document.styleSheets `**est en lecture seule et retourne une liste {{domxref("StyleSheetList")}} d'objets {{domxref("StyleSheet")}}, qui font référence à l'ensemble des feuilles de style contenues ou embarquées dans le document.
+
+## Syntaxe
+
+    var styleSheetList = document.styleSheets;
+
+L'objet retourné est une liste {{domxref("StyleSheetList")}}.
+
+Il s'agit d'une collection ordonnée d'objets {{domxref("StyleSheet")}}. `styleSheetList.item(index)` ou  `styleSheetList{{ mediawiki.External('<em>index</em>') }}` retourne un seul objet stylesheet par son `index `(`index` débute par 0).
+
+## Spécification
+
+| Spécification                                                                                                                        | Statut                           | Commentaire |
+| ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- |
+| {{SpecName('CSSOM', '#dom-document-stylesheets', 'styleSheets')}}                                             | {{Spec2('CSSOM')}}         |             |
+| {{SpecName('DOM2 Style', 'stylesheets.html#StyleSheets-DocumentStyle-styleSheets', 'styleSheets')}} | {{Spec2('DOM2 Style')}} |             |
+
+## Voir aussi
+
+- {{Link("/en-US/docs/Web/API/CSS_Object_Model/Using_dynamic_styling_information")}}
+
+<!---->
+
+- [DOM Level 2 Style: styleSheets](http://www.w3.org/TR/DOM-Level-2-Style/stylesheets.html#StyleSheets-DocumentStyle-styleSheets)
diff --git a/files/fr/web/api/document/stylesheetsets/index.md b/files/fr/web/api/document/stylesheetsets/index.md
index f584192df8..5f8f8eb146 100644
--- a/files/fr/web/api/document/stylesheetsets/index.md
+++ b/files/fr/web/api/document/stylesheetsets/index.md
@@ -9,50 +9,47 @@ tags:
   - Propriétés
 translation_of: Web/API/Document/styleSheetSets
 ---
-<div>{{APIRef("DOM")}}{{gecko_minversion_header("1.9")}}</div>
+{{APIRef("DOM")}}{{gecko_minversion_header("1.9")}}
 
-<p>Renvoie une liste active de tous les jeux de feuilles de styles actuellement disponibles.</p>
+Renvoie une liste active de tous les jeux de feuilles de styles actuellement disponibles.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>sets</em> = document.styleSheetSets
-</pre>
+    sets = document.styleSheetSets
 
-<p>En retour, <code>sets</code> est une liste de jeux de feuilles de styles disponibles.</p>
+En retour, `sets` est une liste de jeux de feuilles de styles disponibles.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<p>Étant donné un élément {{HTMLElement("ul")}} (liste) avec l'ID "sheetList", vous pouvez le remplir avec tous les noms de tous les jeux de feuilles de styles disponibles avec un code comme celui-ci :</p>
+Étant donné un élément {{HTMLElement("ul")}} (liste) avec l'ID "sheetList", vous pouvez le remplir avec tous les noms de tous les jeux de feuilles de styles disponibles avec un code comme celui-ci :
 
-<pre class="brush:js">var list = document.getElementById("sheetList");
+```js
+var list = document.getElementById("sheetList");
 var sheets = document.styleSheetSets;
 
 list.innerHTML = "";
 
-for (var i = 0; i &lt; sheets.length; i++) {
+for (var i = 0; i < sheets.length; i++) {
   var item = document.createElement("li");
 
   item.innerHTML = sheets[i];
   list.appendChild(item);
-}</pre>
+}
+```
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p>La liste des jeux de feuilles de styles disponibles est construite par énumération de toutes les feuilles de styles disponibles pour le document, dans l'ordre dans lequel elles sont répertoriées dans l'attribut {{domxref("document.styleSheets")}}, en ajoutant le <code>title</code> (<em>titre</em>) de chacune de celles en ayant un. Les doublons sont supprimés de la liste (en utilisant une comparaison sensible à la casse).</p>
+La liste des jeux de feuilles de styles disponibles est construite par énumération de toutes les feuilles de styles disponibles pour le document, dans l'ordre dans lequel elles sont répertoriées dans l'attribut {{domxref("document.styleSheets")}}, en ajoutant le `title` (_titre_) de chacune de celles en ayant un. Les doublons sont supprimés de la liste (en utilisant une comparaison sensible à la casse).
 
-<h2 id="Specification">Spécifications</h2>
+## Spécifications
 
-<ul>
- <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets">HTML5 : Alternate Style Sheets</a></li>
-</ul>
+- [HTML5 : Alternate Style Sheets](http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets)
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("Stylesheet")}}</li>
- <li>{{domxref("document.styleSheets")}}</li>
- <li>{{domxref("document.lastStyleSheetSet")}}</li>
- <li>{{domxref("document.preferredStyleSheetSet")}}</li>
- <li>{{domxref("document.selectedStyleSheetSet")}}</li>
- <li>{{domxref("document.enableStyleSheetsForSet()")}}</li>
-</ul>
+- {{domxref("Stylesheet")}}
+- {{domxref("document.styleSheets")}}
+- {{domxref("document.lastStyleSheetSet")}}
+- {{domxref("document.preferredStyleSheetSet")}}
+- {{domxref("document.selectedStyleSheetSet")}}
+- {{domxref("document.enableStyleSheetsForSet()")}}
diff --git a/files/fr/web/api/document/title/index.md b/files/fr/web/api/document/title/index.md
index 8744193915..abcabe2e9a 100644
--- a/files/fr/web/api/document/title/index.md
+++ b/files/fr/web/api/document/title/index.md
@@ -3,52 +3,49 @@ title: Document.title
 slug: Web/API/Document/title
 translation_of: Web/API/Document/title
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p>Obtient ou défini le titre de la page.</p>
+Obtient ou défini le titre de la page.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>var docTitle</em> = <em>document</em>.title;
-</pre>
+    var docTitle = document.title;
 
-<p><code>title</code> est la chaîne contenant le titre de la page. Si le titre a déjà été modifié par <code>document.title</code>, cela retournera cette valeur. Sinon cela retournera le titre par défaut de la page (voir les {{Anch("Notes")}} ci-dessous).</p>
+`title` est la chaîne contenant le titre de la page. Si le titre a déjà été modifié par `document.title`, cela retournera cette valeur. Sinon cela retournera le titre par défaut de la page (voir les {{Anch("Notes")}} ci-dessous).
 
-<pre class="syntaxbox"><em>document</em>.title = <em>newTitle</em>;
-</pre>
+    document.title = newTitle;
 
-<p><code>newTitle</code> sera le nouveau titre de la page. Le changement de titre affectera également la valeur de retour de <code>document.title</code>, le titre de la page dans le navigateur (généralement le nom de l'onglet dans votre navigateur), et affectera également le DOM de la page (le contenu de la balise HTML <code>&lt;title&gt;</code>).</p>
+`newTitle` sera le nouveau titre de la page. Le changement de titre affectera également la valeur de retour de `document.title`, le titre de la page dans le navigateur (généralement le nom de l'onglet dans votre navigateur), et affectera également le DOM de la page (le contenu de la balise HTML `<title>`).
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush:html">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-&lt;head&gt;
-&lt;title&gt;Hello World!&lt;/title&gt;
-&lt;/head&gt;
-&lt;body&gt;
+```html
+<!DOCTYPE html>
+<html>
+<head>
+<title>Hello World!</title>
+</head>
+<body>
 
-&lt;script&gt;
+<script>
 alert(document.title); // Affiche "Hello World!"
 document.title = "Goodbye World!";
 alert(document.title); // Affiche "Goodbye World!"
-&lt;/script&gt;
+</script>
 
-&lt;/body&gt;
-&lt;/html&gt;
-</pre>
+</body>
+</html>
+```
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p>Cette propriété s'applique à HTML, SVG, XUL, et aux autres documents Gecko.</p>
+Cette propriété s'applique à HTML, SVG, XUL, et aux autres documents Gecko.
 
-<p>Pour les documents HTML, la valeur initiale de <code>document.title</code> est le texte de la balise <code>&lt;title&gt;</code>. Pour les documents XUL, c'est la valeur de l'attribut {{XULAttr("title")}} de {{XULElem("window")}} ou d'autres éléments parents de l'élément XUL.</p>
+Pour les documents HTML, la valeur initiale de `document.title` est le texte de la balise `<title>`. Pour les documents XUL, c'est la valeur de l'attribut {{XULAttr("title")}} de {{XULElem("window")}} ou d'autres éléments parents de l'élément XUL.
 
-<p>En XUL, accéder à <code>document.title</code> avant que le document soit complètement chargé a des conséquences variables (<code>document.title</code> peut retourner une chaîne vide et définir <code>document.title</code> peut n'avoir aucun effet).</p>
+En XUL, accéder à `document.title` avant que le document soit complètement chargé a des conséquences variables (`document.title` peut retourner une chaîne vide et définir `document.title` peut n'avoir aucun effet).
 
-<h2 id="Specification">Spécification</h2>
+## Spécification
 
-<ul>
- <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-18446827">DOM Level 2 HTML: document.title</a></li>
- <li><a href="http://www.whatwg.org/html/#document.title">HTML5</a></li>
-</ul>
+- [DOM Level 2 HTML: document.title](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-18446827)
+- [HTML5](http://www.whatwg.org/html/#document.title)
diff --git a/files/fr/web/api/document/tooltipnode/index.md b/files/fr/web/api/document/tooltipnode/index.md
index 13c0927cff..b5f14bb18a 100644
--- a/files/fr/web/api/document/tooltipnode/index.md
+++ b/files/fr/web/api/document/tooltipnode/index.md
@@ -9,17 +9,16 @@ tags:
   - XUL
 translation_of: Web/API/Document/tooltipNode
 ---
-<p>{{ ApiRef("DOM") }}</p>
+{{ ApiRef("DOM") }}
 
-<p>{{draft}}</p>
+{{draft}}
 
-<p>Renvoie le noeud qui est la cible de l'actuel {{ XULElem("tooltip") }}.</p>
+Renvoie le noeud qui est la cible de l'actuel {{ XULElem("tooltip") }}.
 
-<h2 id="Usage">Syntaxe</h2>
+## Syntaxe
 
-<pre class="eval">document.tooltipNode;
-</pre>
+    document.tooltipNode;
 
-<h2 id="Specification">Spécification</h2>
+## Spécification
 
-<p>XUL-specific method. Not part of any specification. Defined in {{ Source("dom/public/idl/xul/nsIDOMXULDocument.idl#59", "nsIDOMXULDocument.idl") }}.</p>
+XUL-specific method. Not part of any specification. Defined in {{ Source("dom/public/idl/xul/nsIDOMXULDocument.idl#59", "nsIDOMXULDocument.idl") }}.
diff --git a/files/fr/web/api/document/touchend_event/index.md b/files/fr/web/api/document/touchend_event/index.md
index a12b93005e..071d7824f2 100644
--- a/files/fr/web/api/document/touchend_event/index.md
+++ b/files/fr/web/api/document/touchend_event/index.md
@@ -7,119 +7,53 @@ tags:
   - events
 translation_of: Web/API/Document/touchend_event
 ---
-<div>{{APIRef}}</div>
-
-<p>L'événement <code>touchend</code> est déclenché quand un point de contact est retiré de la surface.</p>
-
-<h2 id="Informations_générales">Informations générales</h2>
-
-<dl>
- <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
- <dd style="margin: 0 0 0 120px;"><a href="http://w3c.github.io/touch-events/#event-touchend">Touch Events</a></dd>
- <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
- <dd style="margin: 0 0 0 120px;">{{domxref("TouchEvent")}}</dd>
- <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt>
- <dd style="margin: 0 0 0 120px;">Oui</dd>
- <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt>
- <dd style="margin: 0 0 0 120px;">Oui</dd>
- <dt style="float: left; text-align: right; width: 120px;">Target</dt>
- <dd style="margin: 0 0 0 120px;">Document, Element</dd>
- <dt style="float: left; text-align: right; width: 120px;">Default Action</dt>
- <dd style="margin: 0 0 0 120px;">indéfinie</dd>
-</dl>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Property</th>
-   <th scope="col">Type</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>target</code> {{readonlyInline}}</td>
-   <td>EventTarget</td>
-   <td>The event target (the topmost target in the DOM tree).</td>
-  </tr>
-  <tr>
-   <td><code>type</code> {{readonlyInline}}</td>
-   <td>DOMString</td>
-   <td>The type of event.</td>
-  </tr>
-  <tr>
-   <td><code>bubbles</code> {{readonlyInline}}</td>
-   <td>Boolean</td>
-   <td>Whether the event normally bubbles or not.</td>
-  </tr>
-  <tr>
-   <td><code>cancelable</code> {{readonlyInline}}</td>
-   <td>Boolean</td>
-   <td>Whether the event is cancellable or not.</td>
-  </tr>
-  <tr>
-   <td><code>view</code> {{readonlyInline}}</td>
-   <td>WindowProxy</td>
-   <td><a href="/en-US/docs/Web/API/Document/defaultView"><code>document.defaultView</code></a> (<code>window</code> of the document)</td>
-  </tr>
-  <tr>
-   <td><code>detail</code> {{readonlyInline}}</td>
-   <td>long (float)</td>
-   <td>0.</td>
-  </tr>
-  <tr>
-   <td><code>touches</code> {{readonlyInline}}</td>
-   <td>TouchList</td>
-   <td>A list of <a href="/en/DOM/Touch"><code>Touch</code></a>es for every point of contact currently touching the surface.</td>
-  </tr>
-  <tr>
-   <td><code>targetTouches</code> {{readonlyInline}}</td>
-   <td>TouchList</td>
-   <td>A list of <a href="/en/DOM/Touch"><code>Touch</code></a>es for every point of contact that is touching the surface and started on the element that is the target of the current event.</td>
-  </tr>
-  <tr>
-   <td><code>changedTouches</code> {{readonlyInline}}</td>
-   <td>TouchList</td>
-   <td>A list of <a href="/en-US/docs/DOM/Touch"><code>Touch</code></a>es for every point of contact which contributed to the event.<br>
-    For the touchstart event this must be a list of the touch points that just became active with the current event. For the touchmove event this must be a list of the touch points that have moved since the last event. For the touchend and touchcancel events this must be a list of the touch points that have just been removed from the surface.</td>
-  </tr>
-  <tr>
-   <td><code>ctrlKey</code> {{readonlyInline}}</td>
-   <td>boolean</td>
-   <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td>
-  </tr>
-  <tr>
-   <td><code>shiftKey</code> {{readonlyInline}}</td>
-   <td>boolean</td>
-   <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td>
-  </tr>
-  <tr>
-   <td><code>altKey</code> {{readonlyInline}}</td>
-   <td>boolean</td>
-   <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td>
-  </tr>
-  <tr>
-   <td><code>metaKey</code> {{readonlyInline}}</td>
-   <td>boolean</td>
-   <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Des exemples d'implémentation de cet événement sont disponibles : <a href="/en-US/docs/DOM/Touch_events">Touch events</a>.</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Document.touchend_event")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{ domxref("GlobalEventHandlers.ontouchleave","ontouchleave")}}</li>
- <li>{{ domxref("GlobalEventHandlers.ontouchstart","ontouchstart")}}</li>
- <li>{{ domxref("GlobalEventHandlers.ontouchmove","ontouchmove")}}</li>
-</ul>
+{{APIRef}}
+
+L'événement `touchend` est déclenché quand un point de contact est retiré de la surface.
+
+## Informations générales
+
+- Spécification
+  - : [Touch Events](http://w3c.github.io/touch-events/#event-touchend)
+- Interface
+  - : {{domxref("TouchEvent")}}
+- Bubbles
+  - : Oui
+- Cancelable
+  - : Oui
+- Target
+  - : Document, Element
+- Default Action
+  - : indéfinie
+
+## Propriétés
+
+| Property                                  | Type         | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| ----------------------------------------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `target` {{readonlyInline}}         | EventTarget  | The event target (the topmost target in the DOM tree).                                                                                                                                                                                                                                                                                                                                                                                                       |
+| `type` {{readonlyInline}}           | DOMString    | The type of event.                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| `bubbles` {{readonlyInline}}        | Boolean      | Whether the event normally bubbles or not.                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| `cancelable` {{readonlyInline}}     | Boolean      | Whether the event is cancellable or not.                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| `view` {{readonlyInline}}           | WindowProxy  | [`document.defaultView`](/en-US/docs/Web/API/Document/defaultView) (`window` of the document)                                                                                                                                                                                                                                                                                                                                                                |
+| `detail` {{readonlyInline}}         | long (float) | 0.                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| `touches` {{readonlyInline}}        | TouchList    | A list of [`Touch`](/en/DOM/Touch)es for every point of contact currently touching the surface.                                                                                                                                                                                                                                                                                                                                                              |
+| `targetTouches` {{readonlyInline}}  | TouchList    | A list of [`Touch`](/en/DOM/Touch)es for every point of contact that is touching the surface and started on the element that is the target of the current event.                                                                                                                                                                                                                                                                                             |
+| `changedTouches` {{readonlyInline}} | TouchList    | A list of [`Touch`](/en-US/docs/DOM/Touch)es for every point of contact which contributed to the event. For the touchstart event this must be a list of the touch points that just became active with the current event. For the touchmove event this must be a list of the touch points that have moved since the last event. For the touchend and touchcancel events this must be a list of the touch points that have just been removed from the surface. |
+| `ctrlKey` {{readonlyInline}}        | boolean      | `true` if the control key was down when the event was fired. `false` otherwise.                                                                                                                                                                                                                                                                                                                                                                              |
+| `shiftKey` {{readonlyInline}}       | boolean      | `true` if the shift key was down when the event was fired. `false` otherwise.                                                                                                                                                                                                                                                                                                                                                                                |
+| `altKey` {{readonlyInline}}         | boolean      | `true` if the alt key was down when the event was fired. `false` otherwise.                                                                                                                                                                                                                                                                                                                                                                                  |
+| `metaKey` {{readonlyInline}}        | boolean      | `true` if the meta key was down when the event was fired. `false` otherwise.                                                                                                                                                                                                                                                                                                                                                                                 |
+
+## Exemples
+
+Des exemples d'implémentation de cet événement sont disponibles : [Touch events](/en-US/docs/DOM/Touch_events).
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Document.touchend_event")}}
+
+## Voir aussi
+
+- {{ domxref("GlobalEventHandlers.ontouchleave","ontouchleave")}}
+- {{ domxref("GlobalEventHandlers.ontouchstart","ontouchstart")}}
+- {{ domxref("GlobalEventHandlers.ontouchmove","ontouchmove")}}
diff --git a/files/fr/web/api/document/transitionend_event/index.md b/files/fr/web/api/document/transitionend_event/index.md
index 55916580ec..c962feeb7d 100644
--- a/files/fr/web/api/document/transitionend_event/index.md
+++ b/files/fr/web/api/document/transitionend_event/index.md
@@ -3,81 +3,76 @@ title: 'Document: évènement transitionend'
 slug: Web/API/Document/transitionend_event
 translation_of: Web/API/Document/transitionend_event
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}
 
-<p>L’évènement <strong><code>transitionend</code></strong> est émis quand une <a href="/fr/docs/Web/CSS/CSS_Transitions/Utiliser_transitions_CSS">transition CSS</a> a terminé. Dans le cas où une transition est supprimée avant d’avoir terminé, comme lorsqu’une {{cssxref("transition-property")}} est supprimée ou lorsque {{cssxref("display")}} reçoit la valeur <code>none</code>, l’évènement n’est pas généré.</p>
+L’évènement **`transitionend`** est émis quand une [transition CSS](/fr/docs/Web/CSS/CSS_Transitions/Utiliser_transitions_CSS) a terminé. Dans le cas où une transition est supprimée avant d’avoir terminé, comme lorsqu’une {{cssxref("transition-property")}} est supprimée ou lorsque {{cssxref("display")}} reçoit la valeur `none`, l’évènement n’est pas généré.
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th>Bouillonne</th>
-   <td>Oui</td>
-  </tr>
-  <tr>
-   <th>Est annulable</th>
-   <td>Oui</td>
-  </tr>
-  <tr>
-   <th>Interface</th>
-   <td>{{domxref("TransitionEvent")}}</td>
-  </tr>
-  <tr>
-   <th>Propriété gestionnaire d’évènement</th>
-   <td><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/ontransitionend">ontransitionend</a></code></td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th>Bouillonne</th>
+      <td>Oui</td>
+    </tr>
+    <tr>
+      <th>Est annulable</th>
+      <td>Oui</td>
+    </tr>
+    <tr>
+      <th>Interface</th>
+      <td>{{domxref("TransitionEvent")}}</td>
+    </tr>
+    <tr>
+      <th>Propriété gestionnaire d’évènement</th>
+      <td>
+        <code
+          ><a href="/en-US/docs/Web/API/GlobalEventHandlers/ontransitionend"
+            >ontransitionend</a
+          ></code
+        >
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<p>L’évènement <code>transitionend</code> est émis dans les deux directions : quand la transition se termine vers l’état modifié, et quand elle est complètement retournée à l’état par défaut ou non modifié. S’il n’y a pas de délai ou de durée de transition, si les deux sont 0 s ou ne sont pas déclarés, il n’y a pas de transition, et aucun évènement de transition n’est émis. Si l’évènement <code>transitioncancel</code> est émis, l’évènement <code>transitionend</code> ne se produira pas.</p>
+L’évènement `transitionend` est émis dans les deux directions : quand la transition se termine vers l’état modifié, et quand elle est complètement retournée à l’état par défaut ou non modifié. S’il n’y a pas de délai ou de durée de transition, si les deux sont 0 s ou ne sont pas déclarés, il n’y a pas de transition, et aucun évènement de transition n’est émis. Si l’évènement `transitioncancel` est émis, l’évènement `transitionend` ne se produira pas.
 
-<p>La cible originale pour cet évènement est l’<code><a href="/en-US/docs/Web/API/Element">Element</a></code> sur lequel la transition est appliquée. Vous pouvez écouter cet évènement sur l’interface <code>Window</code> pour le gérer durant les phases de capture ou de bouillonnement. Pour plus de détails sur cet évènement, veuillez consulter la page <a href="/fr/docs/Web/Events/transitionend">HTMLElement: transitionend</a>.</p>
+La cible originale pour cet évènement est l’[`Element`](/en-US/docs/Web/API/Element) sur lequel la transition est appliquée. Vous pouvez écouter cet évènement sur l’interface `Window` pour le gérer durant les phases de capture ou de bouillonnement. Pour plus de détails sur cet évènement, veuillez consulter la page [HTMLElement: transitionend](/fr/docs/Web/Events/transitionend).
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Le code suivant ajoute un gestionnaire sur l’évènement <code>transitionend</code> :</p>
+Le code suivant ajoute un gestionnaire sur l’évènement `transitionend` :
 
-<pre class="brush: js">document.addEventListener('transitionend', () =&gt; {
+```js
+document.addEventListener('transitionend', () => {
   console.log('Transition terminée');
-});</pre>
+});
+```
 
-<p>La même chose, mais en utilisant la propriété <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/ontransitionend">ontransitionend</a></code> au lieu de <code>addEventListener()</code> :</p>
+La même chose, mais en utilisant la propriété [`ontransitionend`](/en-US/docs/Web/API/GlobalEventHandlers/ontransitionend) au lieu de `addEventListener()` :
 
-<pre class="brush: js">document.ontransitionend = () =&gt; {
+```js
+document.ontransitionend = () => {
   console.log('Transition terminée');
-};</pre>
-
-<p><a href="/en-US/docs/Web/API/HTMLElement/transitionend_event#Live_example">Voir un exemple en direct sur cet évènement.</a></p>
-
-<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("CSS3 Transitions", "#transitionend", "transitionend")}}</td>
-   <td>{{Spec2('CSS3 Transitions')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+};
+```
+
+[Voir un exemple en direct sur cet évènement.](/en-US/docs/Web/API/HTMLElement/transitionend_event#Live_example)
+
+## Spécifications
+
+| Spécification                                                                            | Statut                                   | Commentaire          |
+| ---------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName("CSS3 Transitions", "#transitionend", "transitionend")}} | {{Spec2('CSS3 Transitions')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Document.transitionend_event")}}</p>
+{{Compat("api.Document.transitionend_event")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>Le gestionnaire d’évènement {{domxref("GlobalEventHandlers.ontransitionend")}}</li>
- <li>L’interface {{domxref("TransitionEvent")}}</li>
- <li>Les propriétés CSS : {{cssxref("transition")}}, {{cssxref("transition-delay")}}, {{cssxref("transition-duration")}}, {{cssxref("transition-property")}}, {{cssxref("transition-timing-function")}}</li>
- <li>Des évènements associés : <code><a href="/en-US/docs/Web/API/Document/transitionrun_event">transitionrun</a></code>, <code><a href="/en-US/docs/Web/API/Document/transitionstart_event">transitionstart</a></code>, <code><a href="/en-US/docs/Web/API/Document/transitioncancel_event">transitioncancel</a></code></li>
- <li>Cet évènement sur les cibles <code><a href="/en-US/docs/Web/API/HTMLElement">HTMLElement</a></code> : <code><a href="/en-US/docs/Web/API/HTMLElement/transitionend_event">transitionend</a></code></li>
- <li>Cet évènement sur les cibles <code><a href="/en-US/docs/Web/API/Window">Window</a></code> : <code><a href="/en-US/docs/Web/API/Window/transitionend_event">transitionend</a></code></li>
-</ul>
+- Le gestionnaire d’évènement {{domxref("GlobalEventHandlers.ontransitionend")}}
+- L’interface {{domxref("TransitionEvent")}}
+- Les propriétés CSS : {{cssxref("transition")}}, {{cssxref("transition-delay")}}, {{cssxref("transition-duration")}}, {{cssxref("transition-property")}}, {{cssxref("transition-timing-function")}}
+- Des évènements associés : [`transitionrun`](/en-US/docs/Web/API/Document/transitionrun_event), [`transitionstart`](/en-US/docs/Web/API/Document/transitionstart_event), [`transitioncancel`](/en-US/docs/Web/API/Document/transitioncancel_event)
+- Cet évènement sur les cibles [`HTMLElement`](/en-US/docs/Web/API/HTMLElement) : [`transitionend`](/en-US/docs/Web/API/HTMLElement/transitionend_event)
+- Cet évènement sur les cibles [`Window`](/en-US/docs/Web/API/Window) : [`transitionend`](/en-US/docs/Web/API/Window/transitionend_event)
diff --git a/files/fr/web/api/document/url/index.md b/files/fr/web/api/document/url/index.md
index 1b599ff794..454dde3afb 100644
--- a/files/fr/web/api/document/url/index.md
+++ b/files/fr/web/api/document/url/index.md
@@ -3,22 +3,21 @@ title: Document.URL
 slug: Web/API/Document/URL
 translation_of: Web/API/Document/URL
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p>Retourne l'<code><strong>URL</strong></code> du {{domxref("Document")}} sous forme de string (lecture seule).</p>
+Retourne l'**`URL`** du {{domxref("Document")}} sous forme de string (lecture seule).
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">var <em>string</em> = document.URL
-</pre>
+```js
+var string = document.URL
+```
 
-<h2 id="Specification">Exemple</h2>
+## Exemple
 
-<pre><code>var currentURL = document.URL;
-alert(currentURL);</code></pre>
+    var currentURL = document.URL;
+    alert(currentURL);
 
-<h2 id="Specification">Specification</h2>
+## Specification
 
-<ul>
- <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-46183437">DOM Level 2 HTML: URL</a></li>
-</ul>
+- [DOM Level 2 HTML: URL](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-46183437)
diff --git a/files/fr/web/api/document/visibilitystate/index.md b/files/fr/web/api/document/visibilitystate/index.md
index d8ea3d1139..51d43852c7 100644
--- a/files/fr/web/api/document/visibilitystate/index.md
+++ b/files/fr/web/api/document/visibilitystate/index.md
@@ -9,49 +9,38 @@ tags:
   - Visibilité
 translation_of: Web/API/Document/visibilityState
 ---
-<p>{{ ApiRef("DOM") }}</p>
+{{ ApiRef("DOM") }}
 
-<p>La propriété en lecture seule <code><strong>Document.visibilityState</strong></code> renvoie la visibilité du {{domxref('document')}}, c'est-à-dire informe si l'élément est visible dans son contexte. Il est utile de savoir si le document est en arrière-plan ou sur un onglet invisible ou seulement chargé pour le pré-rendu. Les valeurs possibles sont :</p>
+La propriété en lecture seule **`Document.visibilityState`** renvoie la visibilité du {{domxref('document')}}, c'est-à-dire informe si l'élément est visible dans son contexte. Il est utile de savoir si le document est en arrière-plan ou sur un onglet invisible ou seulement chargé pour le pré-rendu. Les valeurs possibles sont :
 
-<ul>
- <li><strong><code>'visible'</code></strong> : le contenu de la page peut être au-moins partiellement visible. Dans la pratique, cela signifie que la page est l'onglet de premier plan d'une fenêtre non réduite.</li>
- <li><strong><code>'hidden</code>'</strong> (<em>caché</em>) : le contenu de la page n'est pas visible pour l'utilisateur. Dans la  pratique , cela signifie que le document est soit dans un onglet d'arrière-plan ou une  partie d'une fenêtre réduite, soit que le verrouillage de l'écran du système d'exploitation est actif.</li>
- <li><strong><code>'prerender'</code></strong> (<em>prérendu</em>) : le contenu de la page est prérendu et n'est pas visible par l'utilisateur (considéré caché aux fins de <code><a href="/en-US/docs/Web/API/Document/hidden">document.hidden</a></code>). Le document peut démarrer dans cet état mais ne changera jamais à partir d'une autre valeur. Note : le support du navigateur est facultatif.</li>
- <li><strong><code>'unloaded</code>'</strong> (<em>déchargé</em>) : la page est en train d'être déchargée de la mémoire. Remarque : le support du navigateur est facultatif.</li>
-</ul>
+- **`'visible'`** : le contenu de la page peut être au-moins partiellement visible. Dans la pratique, cela signifie que la page est l'onglet de premier plan d'une fenêtre non réduite.
+- **`'hidden`'** (_caché_) : le contenu de la page n'est pas visible pour l'utilisateur. Dans la  pratique , cela signifie que le document est soit dans un onglet d'arrière-plan ou une  partie d'une fenêtre réduite, soit que le verrouillage de l'écran du système d'exploitation est actif.
+- **`'prerender'`** (_prérendu_) : le contenu de la page est prérendu et n'est pas visible par l'utilisateur (considéré caché aux fins de [`document.hidden`](/en-US/docs/Web/API/Document/hidden)). Le document peut démarrer dans cet état mais ne changera jamais à partir d'une autre valeur. Note : le support du navigateur est facultatif.
+- **`'unloaded`'** (_déchargé_) : la page est en train d'être déchargée de la mémoire. Remarque : le support du navigateur est facultatif.
 
-<p>Lorsque la valeur de cette propriété change, l'évènement {{event('visibilitychange')}} est envoyé au {{domxref("Document")}}.</p>
+Lorsque la valeur de cette propriété change, l'évènement {{event('visibilitychange')}} est envoyé au {{domxref("Document")}}.
 
-<p>L'utilisation typique de ceci peut être d'empêcher le téléchargement de certains éléments actifs lorsque le document est uniquement prérendu, ou d'arrêter certaines activités lorsque le document est en arrière-plan ou réduit au minimum.</p>
+L'utilisation typique de ceci peut être d'empêcher le téléchargement de certains éléments actifs lorsque le document est uniquement prérendu, ou d'arrêter certaines activités lorsque le document est en arrière-plan ou réduit au minimum.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var <em>string</em> = document.visibilityState</pre>
+    var string = document.visibilityState
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush:js">document.addEventListener("visibilitychange", function() {
+```js
+document.addEventListener("visibilitychange", function() {
   console.log( document.visibilityState );
   // Modifier le comportement...
-});</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th>Spécification</th>
-   <th>Statut</th>
-   <th>Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Page Visibility API','#dom-document-visibilitystate', 'Document.visibilityState')}}</td>
-   <td>{{Spec2('Page Visibility API')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Document.visibilityState")}}</p>
+});
+```
+
+## Spécifications
+
+| Spécification                                                                                                                    | Statut                                       | Commentaire          |
+| -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------- |
+| {{SpecName('Page Visibility API','#dom-document-visibilitystate', 'Document.visibilityState')}} | {{Spec2('Page Visibility API')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Document.visibilityState")}}
diff --git a/files/fr/web/api/document/width/index.md b/files/fr/web/api/document/width/index.md
index 8be64c2109..bd02da9607 100644
--- a/files/fr/web/api/document/width/index.md
+++ b/files/fr/web/api/document/width/index.md
@@ -3,43 +3,38 @@ title: Document.width
 slug: Web/API/Document/width
 translation_of: Web/API/Document/width
 ---
-<div>{{APIRef("DOM")}} {{Obsolete_header}}</div>
+{{APIRef("DOM")}} {{Obsolete_header}}
 
-<div class="note">
-<p><strong>Note :</strong> À partir de {{Gecko("6.0")}},<code> document.width </code>n'est plus pris en charge. Au lieu de cela, utilisez document.body.clientWidth. Voir {{domxref("element.clientWidth")}}.</p>
-</div>
+> **Note :** À partir de {{Gecko("6.0")}},` document.width `n'est plus pris en charge. Au lieu de cela, utilisez document.body.clientWidth. Voir {{domxref("element.clientWidth")}}.
 
-<p>Renvoie la largeur de l'élément {{HTMLElement("body")}} du document courrent en pixels.</p>
+Renvoie la largeur de l'élément {{HTMLElement("body")}} du document courrent en pixels.
 
-<p>Non pris en charge par Internet Explorer.</p>
+Non pris en charge par Internet Explorer.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>pixels</em> = document.width;
-</pre>
+    pixels = document.width;
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush:js">function init() {
+```js
+function init() {
     alert("La largeur du document est " + document.width + " pixels.");
 }
-</pre>
+```
 
-<h2 id="Alternatives">Alternatives</h2>
+## Alternatives
 
-<pre class="syntaxbox">document.body.clientWidth              /* largeur de &lt;body&gt; */
-document.documentElement.clientWidth   /* largeur de &lt;html&gt; */
-window.innerWidth                      /* largeur de la fenêtre */
-</pre>
+    document.body.clientWidth              /* largeur de <body> */
+    document.documentElement.clientWidth   /* largeur de <html> */
+    window.innerWidth                      /* largeur de la fenêtre */
 
-<h2 id="Specification">Spécification</h2>
+## Spécification
 
-<p>HTML5</p>
+HTML5
 
-<h2 id="See_also">Voir également</h2>
+## Voir également
 
-<ul>
- <li>{{domxref("document.height")}}</li>
- <li>{{domxref("Element.clientWidth")}}</li>
- <li>{{domxref("Element.scrollWidth")}}</li>
-</ul>
+- {{domxref("document.height")}}
+- {{domxref("Element.clientWidth")}}
+- {{domxref("Element.scrollWidth")}}
diff --git a/files/fr/web/api/document/write/index.md b/files/fr/web/api/document/write/index.md
index deac04e6b3..fd54354baf 100644
--- a/files/fr/web/api/document/write/index.md
+++ b/files/fr/web/api/document/write/index.md
@@ -9,88 +9,74 @@ tags:
   - Rérérence
 translation_of: Web/API/Document/write
 ---
-<p>{{ ApiRef("DOM") }}</p>
+{{ ApiRef("DOM") }}
 
-<p>Écrit une chaîne de texte dans un document ouvert par <a href="/fr/docs/Web/API/Document/open">document.open()</a>.</p>
+Écrit une chaîne de texte dans un document ouvert par [document.open()](/fr/docs/Web/API/Document/open).
 
-<div class="note">
-<p><strong>Note :</strong> comme <code>document.write</code> écrit dans le flux de documents, appeler <code>document.write</code> sur un document fermé (chargé) appelle automatiquement <code>document.open</code>, ce qui efface le document.</p>
-</div>
+> **Note :** comme `document.write` écrit dans le flux de documents, appeler `document.write` sur un document fermé (chargé) appelle automatiquement `document.open`, ce qui efface le document.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="eval">document.write(<em>balisage</em>);
-</pre>
+    document.write(balisage);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>markup</code></dt>
- <dd>est une chaîne de caractères contenant le texte à écrire dans le document.</dd>
-</dl>
+- `markup`
+  - : est une chaîne de caractères contenant le texte à écrire dans le document.
 
-<h3 id="Exemple">Exemple</h3>
+### Exemple
 
-<pre class="brush: html">&lt;html&gt;
+```html
+<html>
 
-&lt;head&gt;
-&lt;title&gt;Exemple de document.write&lt;/title&gt;
+<head>
+<title>Exemple de document.write</title>
 
-&lt;script type="text/javascript"&gt;
+<script type="text/javascript">
 
 function nouveauContenu()
 {
 alert("chargement du nouveau contenu");
 document.open();
-document.write("&lt;h1&gt;Assez de l'ancien contenu, passons au nouveau !&lt;/h1&gt;");
+document.write("<h1>Assez de l'ancien contenu, passons au nouveau !</h1>");
 document.close();
 }
 
-&lt;/script&gt;
-&lt;/head&gt;
+</script>
+</head>
 
-&lt;body onload="nouveauContenu();"&gt;
-&lt;p&gt;Ceci est le contenu original du document.&lt;/p&gt;
-&lt;/body&gt;
-&lt;/html&gt;
-</pre>
+<body onload="nouveauContenu();">
+<p>Ceci est le contenu original du document.</p>
+</body>
+</html>
+```
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p>Écrire dans un document qui a déjà été chargé sans appeler <a href="/fr/docs/Web/API/Document/open">document.open()</a> provoquera un appel automatique à <code>document.open</code>. Une fois l'écriture terminée, il est recommandé d'appeler <a href="/fr/docs/Web/API/Document/close">document.close()</a> pour indiquer au navigateur qu'il peut terminer de charger la page. Le texte fourni est analysé et intégré à la structure du modèle de document. Dans l'exemple ci-dessus, l'élément <code>h1</code> devient un nœud dans le document.</p>
+Écrire dans un document qui a déjà été chargé sans appeler [document.open()](/fr/docs/Web/API/Document/open) provoquera un appel automatique à `document.open`. Une fois l'écriture terminée, il est recommandé d'appeler [document.close()](/fr/docs/Web/API/Document/close) pour indiquer au navigateur qu'il peut terminer de charger la page. Le texte fourni est analysé et intégré à la structure du modèle de document. Dans l'exemple ci-dessus, l'élément `h1` devient un nœud dans le document.
 
-<p>Si l'appel à <code>document.write()</code> est intégré directement dans le code HTML, il n'appellera pas <code>document.open()</code>. Par exemple :</p>
+Si l'appel à `document.write()` est intégré directement dans le code HTML, il n'appellera pas `document.open()`. Par exemple :
 
-<pre class="brush: html">&lt;script&gt;
-  document.write("&lt;h1&gt;Main title&lt;/h1&gt;")
-&lt;/script&gt;</pre>
+```html
+<script>
+  document.write("<h1>Main title</h1>")
+</script>
+```
 
-<div class="note">
-<p><strong>Note :</strong> <code>document.write</code> et <code>document.writeln <a href="/fr/docs/Archive/Web/Writing_JavaScript_for_HTML">ne fonctionnent pas dans les documents XHTML</a> (vous obtiendrez une erreur </code> "Operation is not supported" [<code>NS_ERROR_DOM_NOT_SUPPORTED_ERR</code>] dans la console d'erreurs). Cela arrive lors de l'ouverture d'un fichier local avec l'extension de fichier  .xhtm ou pour tout document servi avec une  <code>application/xhtml+xml</code> de <a href="/fr/docs/Glossaire/Type_MIME">type MIME</a>. Plus d'informations disponibles dans la   <a href="http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite">foire aux questions W3C XHTML (en)</a>.</p>
-</div>
+> **Note :** `document.write` et `document.writeln ne fonctionnent pas dans les documents XHTML (vous obtiendrez une erreur ` "Operation is not supported" \[`NS_ERROR_DOM_NOT_SUPPORTED_ERR`] dans la console d'erreurs). Cela arrive lors de l'ouverture d'un fichier local avec l'extension de fichier  .xhtm ou pour tout document servi avec une  `application/xhtml+xml` de [type MIME](/fr/docs/Glossaire/Type_MIME). Plus d'informations disponibles dans la   [foire aux questions W3C XHTML (en)](http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite).
 
-<div class="note">
-<p><strong>Note :</strong> <code>document.write</code> dans les scripts <a href="/en-US/docs/Web/HTML/Element/script#attr-defer">deferred (<em>différé</em>)</a> ou <a href="/en-US/docs/Web/HTML/Element/script#attr-async">asynchronous (<em>asynchrone</em>)</a> sera ignoré et vous recevrez un message comme  "A call to <code>document.write()</code> from an asynchronously-loaded external script was ignored" dans la console d'erreurs.</p>
-</div>
+> **Note :** `document.write` dans les scripts [deferred (_différé_)](/en-US/docs/Web/HTML/Element/script#attr-defer) ou [asynchronous (_asynchrone_)](/en-US/docs/Web/HTML/Element/script#attr-async) sera ignoré et vous recevrez un message comme  "A call to `document.write()` from an asynchronously-loaded external script was ignored" dans la console d'erreurs.
 
-<div class="note">
-<p><strong>Note :</strong> Dans Edge seulement, appeler plusieurs fois <code>document.write</code> dans un "iframe" déclenche une erreur "SCRIPT70: Permission denied." <em>(autorisation refusée)</em>.</p>
-</div>
+> **Note :** Dans Edge seulement, appeler plusieurs fois `document.write` dans un "iframe" déclenche une erreur "SCRIPT70: Permission denied." _(autorisation refusée)_.
 
-<div class="note">
-<p><strong>Note :</strong> À partir de la version 55, Chrome n'exécute pas les éléments <code>&lt;script&gt;</code> injectés via <code>document.write()</code> en cas d'échec de cache HTTP pour les utilisateurs sur une connexion 2G.</p>
-</div>
+> **Note :** À partir de la version 55, Chrome n'exécute pas les éléments `<script>` injectés via `document.write()` en cas d'échec de cache HTTP pour les utilisateurs sur une connexion 2G.
 
-<h2 id="Sp.C3.A9cification">Spécification</h2>
+## Spécification
 
-<ul>
- <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-75233634">DOM Level 2 HTML: <code>write()</code> Method</a></li>
- <li><a href="http://www.w3.org/TR/2011/WD-html5-author-20110705/apis-in-html-documents.html#dynamic-markup-insertion">Dynamic markup insertion in HTML</a></li>
-</ul>
+- [DOM Level 2 HTML: `write()` Method](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-75233634)
+- [Dynamic markup insertion in HTML](http://www.w3.org/TR/2011/WD-html5-author-20110705/apis-in-html-documents.html#dynamic-markup-insertion)
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{ domxref("element.innerHTML") }}</li>
- <li>{{ domxref("document.createElement()") }}</li>
-</ul>
+- {{ domxref("element.innerHTML") }}
+- {{ domxref("document.createElement()") }}
diff --git a/files/fr/web/api/document/writeln/index.md b/files/fr/web/api/document/writeln/index.md
index eb06d11321..8c69f2caa7 100644
--- a/files/fr/web/api/document/writeln/index.md
+++ b/files/fr/web/api/document/writeln/index.md
@@ -8,49 +8,49 @@ tags:
   - Reference
 translation_of: Web/API/Document/writeln
 ---
-<p>{{ ApiRef("DOM") }}</p>
+{{ ApiRef("DOM") }}
 
-<p>Écrit une chaine de caractères suivie d'un retour de ligne.</p>
+Écrit une chaine de caractères suivie d'un retour de ligne.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="eval">document.writeln(<em>ligne</em>);
-</pre>
+    document.writeln(ligne);
 
-<h3 id="Parameters">Paramètres</h3>
+### Paramètres
 
-<ul>
- <li><code>ligne</code> est la chaine de caractère contenant le texte.</li>
-</ul>
+- `ligne` est la chaine de caractère contenant le texte.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="notranslate">document.writeln("&lt;p&gt;Entrez votre mot de passe :&lt;/p&gt;");
-</pre>
+    document.writeln("<p>Entrez votre mot de passe :</p>");
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p><strong>document.writeln </strong>est identique à <a href="/en-US/docs/Web/API/Document/write">{{domxref("document.write")}}</a>, mais ajoute une nouvelle ligne.</p>
+**document.writeln** est identique à [{{domxref("document.write")}}](/en-US/docs/Web/API/Document/write), mais ajoute une nouvelle ligne.
 
-<h2 id="Specification">Spécifications</h2>
+## Spécifications
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <td><strong>Spécification</strong></td>
-   <td><strong>État</strong></td>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML WHATWG", "#dom-document-writeln", "document.writeln()")}}</td>
-   <td>{{Spec2("HTML WHATWG")}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("DOM2 HTML", "html.html#ID-35318390", "document.writeln()")}}</td>
-   <td>{{Spec2("DOM2 HTML")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <td><strong>Spécification</strong></td>
+      <td><strong>État</strong></td>
+    </tr>
+    <tr>
+      <td>
+        {{SpecName("HTML WHATWG", "#dom-document-writeln", "document.writeln()")}}
+      </td>
+      <td>{{Spec2("HTML WHATWG")}}</td>
+    </tr>
+    <tr>
+      <td>
+        {{SpecName("DOM2 HTML", "html.html#ID-35318390", "document.writeln()")}}
+      </td>
+      <td>{{Spec2("DOM2 HTML")}}</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Document.writeln")}}</p>
+{{Compat("api.Document.writeln")}}
diff --git a/files/fr/web/api/document/xmlencoding/index.md b/files/fr/web/api/document/xmlencoding/index.md
index a7236fc2f6..78f8172253 100644
--- a/files/fr/web/api/document/xmlencoding/index.md
+++ b/files/fr/web/api/document/xmlencoding/index.md
@@ -10,26 +10,21 @@ tags:
   - XML
 translation_of: Web/API/Document/xmlEncoding
 ---
-<p>{{APIRef("DOM")}}{{ obsolete_header("10.0") }}</p>
+{{APIRef("DOM")}}{{ obsolete_header("10.0") }}
 
-<p>Renvoie le codage déterminé par la déclaration XML. Devrait être <code>null</code> si non précisé ou inconnu.</p>
+Renvoie le codage déterminé par la déclaration XML. Devrait être `null` si non précisé ou inconnu.
 
-<div class="warning">
-  <p><strong>Attention :</strong> N'utilisez pas cet attribut ; il a été supprimé de la spécification DOM Niveau 4 et n'est plus pris en charge dans Gecko 10.0 {{ geckoRelease("10.0") }}.</p>
-</div>
+> **Attention :** N'utilisez pas cet attribut ; il a été supprimé de la spécification DOM Niveau 4 et n'est plus pris en charge dans Gecko 10.0 {{ geckoRelease("10.0") }}.
 
-<p>Si la déclaration XML indique :</p>
+Si la déclaration XML indique :
 
-<pre>&lt;?xml version="1.0" encoding="UTF-16"?&gt;
-</pre>
+    <?xml version="1.0" encoding="UTF-16"?>
 
-<p>... le résultat doit être "UTF-16".</p>
+... le résultat doit être "UTF-16".
 
-<p>Cependant, Firefox 3.0 inclut des informations sur l'"endianness" (par exemple, UTF-16BE pour le codage "big endian") et, tandis que cette information supplémentaire est supprimée à partir de Firefox 3.1b3, Firefox 3.1b3 consulte toujours l'encodage du fichier plutôt que la déclaration XML, comme la spécification le prévoit ("Un attribut spécifiant, <em>dans le cadre de la déclaration XML</em>, l'encodage de ce document.").</p>
+Cependant, Firefox 3.0 inclut des informations sur l'"endianness" (par exemple, UTF-16BE pour le codage "big endian") et, tandis que cette information supplémentaire est supprimée à partir de Firefox 3.1b3, Firefox 3.1b3 consulte toujours l'encodage du fichier plutôt que la déclaration XML, comme la spécification le prévoit ("Un attribut spécifiant, _dans le cadre de la déclaration XML_, l'encodage de ce document.").
 
-<h3 id="Spécification">Spécification</h3>
+### Spécification
 
-<ul>
- <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#Document3-encoding">http://www.w3.org/TR/DOM-Level-3-Cor...ment3-encoding</a></li>
- <li>A été supprimé de {{ spec("http://www.w3.org/TR/domcore/","DOM Core Level 4","WD") }}</li>
-</ul>
+- [http://www.w3.org/TR/DOM-Level-3-Cor...ment3-encoding](http://www.w3.org/TR/DOM-Level-3-Core/core.html#Document3-encoding)
+- A été supprimé de {{ spec("http://www.w3.org/TR/domcore/","DOM Core Level 4","WD") }}
diff --git a/files/fr/web/api/document/xmlversion/index.md b/files/fr/web/api/document/xmlversion/index.md
index 4145a61548..73b9895781 100644
--- a/files/fr/web/api/document/xmlversion/index.md
+++ b/files/fr/web/api/document/xmlversion/index.md
@@ -10,20 +10,17 @@ tags:
   - version
 translation_of: Web/API/Document/xmlVersion
 ---
-<p>{{APIRef("DOM")}}{{ obsolete_header("10.0") }}</p>
+{{APIRef("DOM")}}{{ obsolete_header("10.0") }}
 
-<p>Renvoie le numéro de version comme spécifié dans la déclaration XML (par exemple, <code>&lt;?xml version="1.0"?&gt;</code>) ou "1.0" si la déclaration est absente.</p>
+Renvoie le numéro de version comme spécifié dans la déclaration XML (par exemple, `<?xml version="1.0"?>`) ou "1.0" si la déclaration est absente.
 
-<p>Cet attribut n'a jamais été réellement utile, parce qu'il a toujours renvoyé 1.0, et a été supprimé dans la spécification DOM Niveau 4. En conséquence, Firefox 10 ne l'implémente plus. Son utilisation principale dans le passé consistait à détecter si le document était rendu en XML plutôt qu'en HTML. Pour ce faire, vous pouvez créer un élément avec son nom en minuscule, puis vérifier s'il est converti en majuscules (auquel cas le document est en mode HTML non XML) :</p>
+Cet attribut n'a jamais été réellement utile, parce qu'il a toujours renvoyé 1.0, et a été supprimé dans la spécification DOM Niveau 4. En conséquence, Firefox 10 ne l'implémente plus. Son utilisation principale dans le passé consistait à détecter si le document était rendu en XML plutôt qu'en HTML. Pour ce faire, vous pouvez créer un élément avec son nom en minuscule, puis vérifier s'il est converti en majuscules (auquel cas le document est en mode HTML non XML) :
 
-<pre>if (document.createElement("foo").tagName == "FOO") {
-  /* le document n'est pas XML */
-}
-</pre>
+    if (document.createElement("foo").tagName == "FOO") {
+      /* le document n'est pas XML */
+    }
 
-<h2 id="Specification">Spécifications</h2>
+## Spécifications
 
-<ul>
- <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#Document3-version">http://www.w3.org/TR/DOM-Level-3-Cor...ument3-version</a></li>
- <li>A été supprimée de {{ spec("http://www.w3.org/TR/domcore/","DOM Core Level 4","WD") }}</li>
-</ul>
+- [http://www.w3.org/TR/DOM-Level-3-Cor...ument3-version](http://www.w3.org/TR/DOM-Level-3-Core/core.html#Document3-version)
+- A été supprimée de {{ spec("http://www.w3.org/TR/domcore/","DOM Core Level 4","WD") }}
diff --git a/files/fr/web/api/document_object_model/examples/index.md b/files/fr/web/api/document_object_model/examples/index.md
index 9754cae903..b9a9de6176 100644
--- a/files/fr/web/api/document_object_model/examples/index.md
+++ b/files/fr/web/api/document_object_model/examples/index.md
@@ -7,17 +7,18 @@ tags:
 translation_of: Web/API/Document_Object_Model/Examples
 original_slug: Web/API/Document_Object_Model/Exemples
 ---
-<p>Cette page présente quelques exemples plus détaillés de développement Web et XML utilisant le DOM. Partout où c'est possible, les exemples utilisent des API courantes, des astuces et des modèles en JavaScript pour manipuler l'objet de document.</p>
+Cette page présente quelques exemples plus détaillés de développement Web et XML utilisant le DOM. Partout où c'est possible, les exemples utilisent des API courantes, des astuces et des modèles en JavaScript pour manipuler l'objet de document.
 
-<h2 id="Exemple_1_:_height_et_width">Exemple 1 : <em>height</em> (hauteur) et width <em>(largeur)</em></h2>
+## Exemple 1 : _height_ (hauteur) et width _(largeur)_
 
-<p>L'exemple qui suit montre l'utilisation des propriétés <code>height</code> et <code>width</code> pour dimensionner des images de diverses tailles :</p>
+L'exemple qui suit montre l'utilisation des propriétés `height` et `width` pour dimensionner des images de diverses tailles :
 
-<pre class="brush:html">&lt;!DOCTYPE html&gt;
-&lt;html lang="en"&gt;
-&lt;head&gt;
-&lt;title&gt;width/height example&lt;/title&gt;
-&lt;script&gt;
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>width/height example</title>
+<script>
 function init() {
   var arrImages = new Array(3);
 
@@ -26,147 +27,153 @@ function init() {
   arrImages[2] = document.getElementById("image3");
 
   var objOutput = document.getElementById("output");
-  var strHtml = "&lt;ul&gt;";
+  var strHtml = "<ul>";
 
-  for (var i = 0; i &lt; arrImages.length; i++) {
-    strHtml += "&lt;li&gt;image" + (i+1) +
+  for (var i = 0; i < arrImages.length; i++) {
+    strHtml += "<li>image" + (i+1) +
             ": height=" + arrImages[i].height +
             ", width=" + arrImages[i].width +
             ", style.height=" + arrImages[i].style.height +
             ", style.width=" + arrImages[i].style.width +
-            "&lt;\/li&gt;";
+            "<\/li>";
   }
 
-  strHtml += "&lt;\/ul&gt;";
+  strHtml += "<\/ul>";
 
   objOutput.innerHTML = strHtml;
 }
-&lt;/script&gt;
-&lt;/head&gt;
-&lt;body onload="init();"&gt;
+</script>
+</head>
+<body onload="init();">
 
-&lt;p&gt;Image 1: no height, width, or style
-  &lt;img id="image1" src="http://www.mozilla.org/images/mozilla-banner.gif"&gt;
-&lt;/p&gt;
+<p>Image 1: no height, width, or style
+  <img id="image1" src="http://www.mozilla.org/images/mozilla-banner.gif">
+</p>
 
-&lt;p&gt;Image 2: height="50", width="500", but no style
-  &lt;img id="image2"
+<p>Image 2: height="50", width="500", but no style
+  <img id="image2"
        src="http://www.mozilla.org/images/mozilla-banner.gif"
-       height="50" width="500"&gt;
-&lt;/p&gt;
+       height="50" width="500">
+</p>
 
-&lt;p&gt;Image 3: no height, width, but style="height: 50px; width: 500px;"
-  &lt;img id="image3"
+<p>Image 3: no height, width, but style="height: 50px; width: 500px;"
+  <img id="image3"
        src="http://www.mozilla.org/images/mozilla-banner.gif"
-       style="height: 50px; width: 500px;"&gt;
-&lt;/p&gt;
+       style="height: 50px; width: 500px;">
+</p>
 
-&lt;div id="output"&gt; &lt;/div&gt;
-&lt;/body&gt;
-&lt;/html&gt;</pre>
+<div id="output"> </div>
+</body>
+</html>
+```
 
-<h2 id="Exemple_2_:_attributs_d.27image">Exemple 2 : attributs d'image</h2>
+## Exemple 2 : attributs d'image
 
-<pre class="brush:html">&lt;!DOCTYPE html&gt;
-&lt;html lang="en"&gt;
-&lt;head&gt;
-&lt;title&gt;Modifying an image border&lt;/title&gt;
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Modifying an image border</title>
 
-&lt;script&gt;
+<script>
 function setBorderWidth(width) {
   document.getElementById("img1").style.borderWidth = width + "px";
 }
-&lt;/script&gt;
-&lt;/head&gt;
+</script>
+</head>
 
-&lt;body&gt;
-&lt;p&gt;
-  &lt;img id="img1"
+<body>
+<p>
+  <img id="img1"
        src="image1.gif"
        style="border: 5px solid green;"
-       width="100" height="100" alt="border test"&gt;
-&lt;/p&gt;
+       width="100" height="100" alt="border test">
+</p>
 
-&lt;form name="FormName"&gt;
-  &lt;input type="button" value="Make border 20px-wide" onclick="setBorderWidth(20);" /&gt;
-  &lt;input type="button" value="Make border 5px-wide"  onclick="setBorderWidth(5);" /&gt;
-&lt;/form&gt;
+<form name="FormName">
+  <input type="button" value="Make border 20px-wide" onclick="setBorderWidth(20);" />
+  <input type="button" value="Make border 5px-wide"  onclick="setBorderWidth(5);" />
+</form>
 
-&lt;/body&gt;
-&lt;/html&gt;</pre>
+</body>
+</html>
+```
 
-<h2 id="Exemple_3_:_manipulation_de_styles">Exemple 3 : manipulation de styles</h2>
+## Exemple 3 : manipulation de styles
 
-<p>Dans cet exemple simple, on accède à certaines propriétés basiques de style d'un élément de paragraphe HTML à l'aide de son objet style. L'objet style de l'élément et ses propriétés de style CSS peuvent être récupérés et définis depuis le DOM. Dans ce cas-ci, les styles individuels sont manipulés directement. Dans l'exemple suivant (l'exemple 4), on utilisera les feuilles de style et leurs règles pour changer les styles de documents entiers.</p>
+Dans cet exemple simple, on accède à certaines propriétés basiques de style d'un élément de paragraphe HTML à l'aide de son objet style. L'objet style de l'élément et ses propriétés de style CSS peuvent être récupérés et définis depuis le DOM. Dans ce cas-ci, les styles individuels sont manipulés directement. Dans l'exemple suivant (l'exemple 4), on utilisera les feuilles de style et leurs règles pour changer les styles de documents entiers.
 
-<pre class="brush:html">&lt;!DOCTYPE html&gt;
-&lt;html lang="en"&gt;
-&lt;head&gt;
-&lt;title&gt;Changing color and font-size example&lt;/title&gt;
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Changing color and font-size example</title>
 
-&lt;script&gt;
+<script>
 function changeText() {
   var p = document.getElementById("pid");
 
   p.style.color = "blue"
   p.style.fontSize = "18pt"
 }
-&lt;/script&gt;
-&lt;/head&gt;
-&lt;body&gt;
+</script>
+</head>
+<body>
 
-&lt;p id="pid" onclick="window.location.href = 'http://www.cnn.com/';"&gt;linker&lt;/p&gt;
+<p id="pid" onclick="window.location.href = 'http://www.cnn.com/';">linker</p>
 
-&lt;form&gt;
-  &lt;p&gt;&lt;input value="rec" type="button" onclick="changeText();" /&gt;&lt;/p&gt;
-&lt;/form&gt;
+<form>
+  <p><input value="rec" type="button" onclick="changeText();" /></p>
+</form>
 
-&lt;/body&gt;
-&lt;/html&gt;</pre>
+</body>
+</html>
+```
 
-<h2 id="Exemple_4_:_utilisation_de_feuilles_de_style">Exemple 4 : utilisation de feuilles de style</h2>
+## Exemple 4 : utilisation de feuilles de style
 
-<p>La propriété <code>styleSheets</code> de l'objet <code>document</code> renvoie une liste des feuilles de style qui ont été chargées pour ce document. On peut accéder à ces feuilles de style et leurs règles individuelles à l'aide des objets <code>stylesheet</code>, <code>style</code> et <code>CSSRule</code>, comme montré dans cet exemple qui affiche tous les sélecteurs de règles de style dans la console.</p>
+La propriété `styleSheets` de l'objet `document` renvoie une liste des feuilles de style qui ont été chargées pour ce document. On peut accéder à ces feuilles de style et leurs règles individuelles à l'aide des objets `stylesheet`, `style` et `CSSRule`, comme montré dans cet exemple qui affiche tous les sélecteurs de règles de style dans la console.
 
-<pre class="brush:js">var ss = document.styleSheets;
+```js
+var ss = document.styleSheets;
 
-for(var i = 0; i &lt; ss.length; i++) {
-  for(var j = 0; j &lt; ss[i].cssRules.length; j++) {
+for(var i = 0; i < ss.length; i++) {
+  for(var j = 0; j < ss[i].cssRules.length; j++) {
     dump( ss[i].cssRules[j].selectorText + "\n" );
   }
-}</pre>
+}
+```
 
-<p>Pour un document avec une seule feuille de style dans laquelle les trois règles suivantes sont définies :</p>
+Pour un document avec une seule feuille de style dans laquelle les trois règles suivantes sont définies :
 
-<pre class="eval">BODY { background-color: darkblue; }
-P { font-face: Arial; font-size: 10pt; margin-left: .125in; }
-#lumpy { display: none; }
-</pre>
+    BODY { background-color: darkblue; }
+    P { font-face: Arial; font-size: 10pt; margin-left: .125in; }
+    #lumpy { display: none; }
 
-<p>Ce script affiche les lignes suivantes :</p>
+Ce script affiche les lignes suivantes :
 
-<pre class="eval">BODY
-P
-#LUMPY
-</pre>
+    BODY
+    P
+    #LUMPY
 
-<h2 id="Exemple_5_:_propagation_d.27.C3.A9v.C3.A8nements">Exemple 5 : propagation d'évènements</h2>
+## Exemple 5 : propagation d'évènements
 
-<p>Cet exemple montre comment les évènements se déclenchent et sont gérés dans le DOM d'une manière très simple. Lorsque l'élément BODY de ce document HTML est chargé, un écouteur d'évènement est enregistré sur la ligne supérieure de l'élément TABLE. Celui-ci gère l'évènement en exécutant la fonction <code>stopEvent</code>, qui modifie la valeur de la cellule inférieure du tableau.</p>
+Cet exemple montre comment les évènements se déclenchent et sont gérés dans le DOM d'une manière très simple. Lorsque l'élément BODY de ce document HTML est chargé, un écouteur d'évènement est enregistré sur la ligne supérieure de l'élément TABLE. Celui-ci gère l'évènement en exécutant la fonction `stopEvent`, qui modifie la valeur de la cellule inférieure du tableau.
 
-<p>Cependant, <code>stopEvent</code> appelle également une méthode d'objet <code>event</code>, {{domxref("event.stopPropagation")}} , qui empêche l'évènement de se propager (bubbling) plus haut dans le DOM. Notez que le tableau lui-même dispose d'un gestionnaire d'évènement {{domxref("element.onclick","onclick")}} qui devrait afficher un message lorsqu'on clique sur le tableau. Mais comme la méthode <code>stopEvent</code> a interrompu la propagation, après que les données du tableau aient été mises à jour, la phase évènementielle est effectivement arrêtée et un message d'alerte est affiché pour le confirmer.</p>
+Cependant, `stopEvent` appelle également une méthode d'objet `event`, {{domxref("event.stopPropagation")}} , qui empêche l'évènement de se propager (bubbling) plus haut dans le DOM. Notez que le tableau lui-même dispose d'un gestionnaire d'évènement {{domxref("element.onclick","onclick")}} qui devrait afficher un message lorsqu'on clique sur le tableau. Mais comme la méthode `stopEvent` a interrompu la propagation, après que les données du tableau aient été mises à jour, la phase évènementielle est effectivement arrêtée et un message d'alerte est affiché pour le confirmer.
 
-<pre class="brush:html">&lt;!DOCTYPE html&gt;
-&lt;html lang="en"&gt;
-&lt;head&gt;
-&lt;title&gt;Event Propagation&lt;/title&gt;
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Event Propagation</title>
 
-&lt;style&gt;
+<style>
 #t-daddy { border: 1px solid red }
 #c1 { background-color: pink; }
-&lt;/style&gt;
+</style>
 
-&lt;script&gt;
+<script>
 function stopEvent(ev) {
   c2 = document.getElementById("c2");
   c2.innerHTML = "hello";
@@ -180,36 +187,38 @@ function load() {
   elem = document.getElementById("tbl1");
   elem.addEventListener("click", stopEvent, false);
 }
-&lt;/script&gt;
-&lt;/head&gt;
+</script>
+</head>
 
-&lt;body onload="load();"&gt;
+<body onload="load();">
 
-&lt;table id="t-daddy" onclick="alert('hi');"&gt;
-  &lt;tr id="tbl1"&gt;
-    &lt;td id="c1"&gt;one&lt;/td&gt;
-  &lt;/tr&gt;
-  &lt;tr&gt;
-    &lt;td id="c2"&gt;two&lt;/td&gt;
-  &lt;/tr&gt;
-&lt;/table&gt;
+<table id="t-daddy" onclick="alert('hi');">
+  <tr id="tbl1">
+    <td id="c1">one</td>
+  </tr>
+  <tr>
+    <td id="c2">two</td>
+  </tr>
+</table>
 
-&lt;/body&gt;
-&lt;/html&gt;</pre>
+</body>
+</html>
+```
 
-<h2 id="Exemple_6_:_getComputedStyle">Exemple 6 : getComputedStyle</h2>
+## Exemple 6 : getComputedStyle
 
-<p>Cet exemple montre comment la méthode {{domxref("window.getComputedStyle")}} peut être utilisée pour obtenir les styles d'un élément qui ne sont pas définis dans l'attribut <code>style</code> ou à l'aide de JavaScript (c'est-à-dire, <code>elem.style.backgroundColor="rgb(173, 216, 230)"</code>). Ces derniers types de styles peuvent être récupérés avec la propriété plus directe {{domxref("element.style", "elt.style")}} , dont les propriétés sont listées dans la <a href="/fr/docs/Web/CSS/Reference">liste des propriétés DOM CSS</a>.</p>
+Cet exemple montre comment la méthode {{domxref("window.getComputedStyle")}} peut être utilisée pour obtenir les styles d'un élément qui ne sont pas définis dans l'attribut `style` ou à l'aide de JavaScript (c'est-à-dire, `elem.style.backgroundColor="rgb(173, 216, 230)"`). Ces derniers types de styles peuvent être récupérés avec la propriété plus directe {{domxref("element.style", "elt.style")}} , dont les propriétés sont listées dans la [liste des propriétés DOM CSS](/fr/docs/Web/CSS/Reference).
 
-<p><code>getComputedStyle()</code> renvoie un objet <code>ComputedCSSStyleDeclaration</code>, dont les propriétés de style individuelles peuvent être référencées à l'aide de sa méthode <code>getPropertyValue()</code> comme montré dans l'exemple suivant.</p>
+`getComputedStyle()` renvoie un objet `ComputedCSSStyleDeclaration`, dont les propriétés de style individuelles peuvent être référencées à l'aide de sa méthode `getPropertyValue()` comme montré dans l'exemple suivant.
 
-<pre class="brush:html">&lt;!DOCTYPE html&gt;
-&lt;html lang="en"&gt;
-&lt;head&gt;
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
 
-&lt;title&gt;getComputedStyle example&lt;/title&gt;
+<title>getComputedStyle example</title>
 
-&lt;script&gt;
+<script>
 function cStyles() {
   var RefDiv = document.getElementById("d1");
   var txtHeight = document.getElementById("t1");
@@ -227,59 +236,61 @@ function cStyles() {
 
   txtBackgroundColor.value = b_style;
 }
-&lt;/script&gt;
+</script>
 
-&lt;style&gt;
+<style>
 #d1 {
   margin-left: 10px;
   background-color: rgb(173, 216, 230);
   height: 20px;
   max-width: 20px;
 }
-&lt;/style&gt;
+</style>
 
-&lt;/head&gt;
+</head>
 
-&lt;body&gt;
+<body>
 
-&lt;div id="d1"&gt;&amp;nbsp;&lt;/div&gt;
+<div id="d1">&nbsp;</div>
 
-&lt;form action=""&gt;
-  &lt;p&gt;
-    &lt;button type="button" onclick="cStyles();"&gt;getComputedStyle&lt;/button&gt;
-    height&lt;input id="t1" type="text" value="1" /&gt;
-    max-width&lt;input id="t2" type="text" value="2" /&gt;
-    bg-color&lt;input id="t3" type="text" value="3" /&gt;
-  &lt;/p&gt;
-&lt;/form&gt;
+<form action="">
+  <p>
+    <button type="button" onclick="cStyles();">getComputedStyle</button>
+    height<input id="t1" type="text" value="1" />
+    max-width<input id="t2" type="text" value="2" />
+    bg-color<input id="t3" type="text" value="3" />
+  </p>
+</form>
 
-&lt;/body&gt;
-&lt;/html&gt;</pre>
+</body>
+</html>
+```
 
-<h2 id="Exemple_7_:_affichage_des_propri.C3.A9t.C3.A9s_d.27un_objet_event">Exemple 7 : affichage des propriétés d'un objet <code>event</code></h2>
+## Exemple 7 : affichage des propriétés d'un objet `event`
 
-<p>Cet exemple utilise des méthodes DOM pour afficher les propriétés d'un objet {{domxref("window.onload")}} {{domxref("event")}}   et leurs valeurs dans un tableau. Il montre également une technique utile utilisant une boucle <code>for..in</code> pour parcourir les propriétés d'un objet et obtenir leurs valeurs.</p>
+Cet exemple utilise des méthodes DOM pour afficher les propriétés d'un objet {{domxref("window.onload")}} {{domxref("event")}}   et leurs valeurs dans un tableau. Il montre également une technique utile utilisant une boucle `for..in` pour parcourir les propriétés d'un objet et obtenir leurs valeurs.
 
-<p>Les propriétés des objets <code>event</code> diffèrent sensiblement entre les différents navigateurs, la <a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">spécification norme DOM</a> liste les propriétés standard, mais beaucoup de navigateurs ont ajouté un bon nombre de propriétés supplémentaires.</p>
+Les propriétés des objets `event` diffèrent sensiblement entre les différents navigateurs, la [spécification norme DOM](http://www.w3.org/TR/DOM-Level-2-Events/events.html) liste les propriétés standard, mais beaucoup de navigateurs ont ajouté un bon nombre de propriétés supplémentaires.
 
-<p>Placez le code qui suit dans une fichier texte vide et chargez-le dans différents navigateurs, vous serez surpris des différences entre le nombre et le nom des propriétés. Vous pouvez également ajouter quelques éléments à la page et appeler cette fonction depuis d'autres gestionnaires d'évènements.</p>
+Placez le code qui suit dans une fichier texte vide et chargez-le dans différents navigateurs, vous serez surpris des différences entre le nombre et le nom des propriétés. Vous pouvez également ajouter quelques éléments à la page et appeler cette fonction depuis d'autres gestionnaires d'évènements.
 
-<pre class="brush:html">&lt;!DOCTYPE html&gt;
-&lt;html lang="en"&gt;
-&lt;head&gt;
-&lt;meta charset="utf-8"/&gt;
-&lt;title&gt;Show Event properties&lt;/title&gt;
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>Show Event properties</title>
 
-&lt;style&gt;
+<style>
 table { border-collapse: collapse; }
 thead { font-weight: bold; }
 td { padding: 2px 10px 2px 10px; }
 
 .odd { background-color: #efdfef; }
 .even { background-color: #ffffff; }
-&lt;/style&gt;
+</style>
 
-&lt;script&gt;
+<script>
 
 function showEventProperties(e) {
   function addCell(row, text) {
@@ -296,7 +307,7 @@ function showEventProperties(e) {
   var lableList = ['#', 'Property', 'Value'];
   var len = lableList.length;
 
-  for (var i=0; i&lt;len; i++) {
+  for (var i=0; i<len; i++) {
     addCell(row, lableList[i]);
   }
 
@@ -317,54 +328,53 @@ function showEventProperties(e) {
 window.onload = function(event){
   showEventProperties(event);
 }
-&lt;/script&gt;
-&lt;/head&gt;
+</script>
+</head>
 
-&lt;body&gt;
-&lt;h1&gt;Properties of the DOM &lt;span id="eventType"&gt;&lt;/span&gt; Event Object&lt;/h1&gt;
-&lt;/body&gt;
+<body>
+<h1>Properties of the DOM <span id="eventType"></span> Event Object</h1>
+</body>
 
-&lt;/html&gt;</pre>
+</html>
+```
 
-<h2 id="Exemple_8_:_utilisation_de_l.27interface_DOM_Table">Exemple 8 : utilisation de l'interface DOM Table</h2>
+## Exemple 8 : utilisation de l'interface DOM Table
 
-<p>L'interface DOM HTMLTableElement fournit certaines méthodes utilitaires permettant de créer et de manipuler des tableaux. Deux méthodes utilisées fréquemment sont {{domxref("HTMLTableElement.insertRow")}} et {{domxref("tableRow.insertCell")}}</p>
+L'interface DOM HTMLTableElement fournit certaines méthodes utilitaires permettant de créer et de manipuler des tableaux. Deux méthodes utilisées fréquemment sont {{domxref("HTMLTableElement.insertRow")}} et {{domxref("tableRow.insertCell")}}
 
-<p>Pour ajouter une ligne et quelques cellules à un tableau existant :</p>
+Pour ajouter une ligne et quelques cellules à un tableau existant :
 
-<pre class="brush:html">&lt;table id="table0"&gt;
- &lt;tr&gt;
-  &lt;td&gt;Row 0 Cell 0&lt;/td&gt;
-  &lt;td&gt;Row 0 Cell 1&lt;/td&gt;
- &lt;/tr&gt;
-&lt;/table&gt;
+```html
+<table id="table0">
+ <tr>
+  <td>Row 0 Cell 0</td>
+  <td>Row 0 Cell 1</td>
+ </tr>
+</table>
 
-&lt;script&gt;
+<script>
 var table = document.getElementById('table0');
 var row = table.insertRow(-1);
 var cell,
     text;
 
-for (var i = 0; i &lt; 2; i++) {
+for (var i = 0; i < 2; i++) {
   cell = row.insertCell(-1);
   text = 'Row ' + row.rowIndex + ' Cell ' + i;
   cell.appendChild(document.createTextNode(text));
 }
-&lt;/script&gt;</pre>
+</script>
+```
 
-<h4 id="Notes">Notes</h4>
+#### Notes
 
-<ul>
- <li>N'utilisez jamais la propriété {{domxref("element.innerHTML","innerHTML")}} d'un tableau pour le modifier, même si vous pouvez l'utiliser pour créer un tableau entier ou le contenu d'une cellule.</li>
- <li>Si vous utilisez les méthodes DOM Core {{domxref("document.createElement")}} et {{domxref("Node.appendChild")}} pour créer des lignes et cellules de tableau, il est nécessaire de les ajouter à un élément <code>tbody</code> dans Internet Explorer, tandis que les autres navigateurs vous permettront de les ajouter à un élément <code>table</code> (les lignes seront ajoutées au dernier élément <code>tbody</code>).</li>
- <li>Un certain nombre d'autres méthodes utilitaires faisant partie de l'<a href="/fr/docs/Web/API/HTMLTableElement#M%C3%A9thodes">interface table</a> peuvent être utilisées pour créer et modifier des tableaux.</li>
-</ul>
+- N'utilisez jamais la propriété {{domxref("element.innerHTML","innerHTML")}} d'un tableau pour le modifier, même si vous pouvez l'utiliser pour créer un tableau entier ou le contenu d'une cellule.
+- Si vous utilisez les méthodes DOM Core {{domxref("document.createElement")}} et {{domxref("Node.appendChild")}} pour créer des lignes et cellules de tableau, il est nécessaire de les ajouter à un élément `tbody` dans Internet Explorer, tandis que les autres navigateurs vous permettront de les ajouter à un élément `table` (les lignes seront ajoutées au dernier élément `tbody`).
+- Un certain nombre d'autres méthodes utilitaires faisant partie de l'[interface table](/fr/docs/Web/API/HTMLTableElement#M%C3%A9thodes) peuvent être utilisées pour créer et modifier des tableaux.
 
-<h2 id="Subnav">Subnav</h2>
+## Subnav
 
-<ul>
- <li><a href="/fr/docs/Web/API/Document_Object_Model">Référence DOM</a></li>
- <li><a href="/fr/docs/Web/API/Document_Object_Model/Introduction">Introduction à DOM</a></li>
- <li><a href="/fr/docs/Web/API/Document_Object_Model/Events">Les événements et DOM</a></li>
- <li><a href="/fr/docs/Web/API/Document_Object_Model/Exemples">Exemples</a></li>
-</ul>
+- [Référence DOM](/fr/docs/Web/API/Document_Object_Model)
+- [Introduction à DOM](/fr/docs/Web/API/Document_Object_Model/Introduction)
+- [Les événements et DOM](/fr/docs/Web/API/Document_Object_Model/Events)
+- [Exemples](/fr/docs/Web/API/Document_Object_Model/Exemples)
diff --git a/files/fr/web/api/document_object_model/how_to_create_a_dom_tree/index.md b/files/fr/web/api/document_object_model/how_to_create_a_dom_tree/index.md
index ed1a422071..ff8be434b7 100644
--- a/files/fr/web/api/document_object_model/how_to_create_a_dom_tree/index.md
+++ b/files/fr/web/api/document_object_model/how_to_create_a_dom_tree/index.md
@@ -8,88 +8,85 @@ tags:
 translation_of: Web/API/Document_object_model/How_to_create_a_DOM_tree
 original_slug: Comment_créer_un_arbre_DOM
 ---
-<p> </p>
-
-<p>Cet article décrit comment utiliser l'API <a href="https://www.w3.org/TR/DOM-Level-3-Core/">DOM Core (en)</a> en JavaScript pour créer et modifier des objets DOM. Il concerne toutes les applications basées sur Gecko (telles que Firefox) sur du code avec privilèges (par exemple les extensions) ou sans privilège (des pages Web).</p>
-
-<h3 id="Cr.C3.A9er_dynamiquement_un_arbre_DOM">Créer dynamiquement un arbre DOM</h3>
-
-<p>Considérons le document XML suivant :</p>
-
-<pre class="eval">&lt;?xml version="1.0"?&gt;
-&lt;people&gt;
-  &lt;person first-name="eric" middle-initial="H" last-name="jung"&gt;
-    &lt;address street="321 south st" city="denver" state="co" country="usa"/&gt;
-    &lt;address street="123 main st" city="arlington" state="ma" country="usa"/&gt;
-  &lt;/person&gt;
-
-  &lt;person first-name="jed" last-name="brown"&gt;
-    &lt;address street="321 north st" city="atlanta" state="ga" country="usa"/&gt;
-    &lt;address street="123 west st" city="seattle" state="wa" country="usa"/&gt;
-    &lt;address street="321 south avenue" city="denver" state="co" country="usa"/&gt;
-  &lt;/person&gt;
-&lt;/people&gt;
-</pre>
-
-<p>L'API DOM du W3C, supportée par Mozilla, peut être utilisée pour créer une représentation en mémoire de ce document comme cela :</p>
-
-<pre class="eval">var doc = document.implementation.createDocument("", "", null);
-var peopleElem = doc.createElement("people");
-
-var personElem1 = doc.createElement("person");
-personElem1.setAttribute("first-name", "eric");
-personElem1.setAttribute("middle-initial", "h");
-personElem1.setAttribute("last-name", "jung");
-
-var addressElem1 = doc.createElement("address");
-addressElem1.setAttribute("street", "321 south st");
-addressElem1.setAttribute("city", "denver");
-addressElem1.setAttribute("state", "co");
-addressElem1.setAttribute("country", "usa");
-personElem1.appendChild(addressElem1);
-
-var addressElem2 = doc.createElement("address");
-addressElem2.setAttribute("street", "123 main st");
-addressElem2.setAttribute("city", "arlington");
-addressElem2.setAttribute("state", "ma");
-addressElem2.setAttribute("country", "usa");
-personElem1.appendChild(addressElem2);
-
-var personElem2 = doc.createElement("person");
-personElem2.setAttribute("first-name", "jed");
-personElem2.setAttribute("last-name", "brown");
-
-var addressElem3 = doc.createElement("address");
-addressElem3.setAttribute("street", "321 north st");
-addressElem3.setAttribute("city", "atlanta");
-addressElem3.setAttribute("state", "ga");
-addressElem3.setAttribute("country", "usa");
-personElem2.appendChild(addressElem3);
-
-var addressElem4 = doc.createElement("address");
-addressElem4.setAttribute("street", "123 west st");
-addressElem4.setAttribute("city", "seattle");
-addressElem4.setAttribute("state", "wa");
-addressElem4.setAttribute("country", "usa");
-personElem2.appendChild(addressElem4);
-
-var addressElem5 = doc.createElement("address");
-addressElem5.setAttribute("street", "321 south avenue");
-addressElem5.setAttribute("city", "denver");
-addressElem5.setAttribute("state", "co");
-addressElem5.setAttribute("country", "usa");
-personElem2.appendChild(addressElem5);
-
-peopleElem.appendChild(personElem1);
-peopleElem.appendChild(personElem2);
-doc.appendChild(peopleElem);
-</pre>
-
-<p>Voir également le chapitre <a href="/fr/docs/Mozilla/Tech/XUL/Tutoriel_XUL/Document_Object_Model"> DOM du tutoriel XUL</a></p>
-
-<p>Vous pouvez automatiser la création de l'arbre DOM en utilisant un algorithme inversé JSON associé avec la représentation JSON suivante :</p>
-
-<pre class="brush: js">{
+Cet article décrit comment utiliser l'API [DOM Core (en)](https://www.w3.org/TR/DOM-Level-3-Core/) en JavaScript pour créer et modifier des objets DOM. Il concerne toutes les applications basées sur Gecko (telles que Firefox) sur du code avec privilèges (par exemple les extensions) ou sans privilège (des pages Web).
+
+### Créer dynamiquement un arbre DOM
+
+Considérons le document XML suivant :
+
+    <?xml version="1.0"?>
+    <people>
+      <person first-name="eric" middle-initial="H" last-name="jung">
+        <address street="321 south st" city="denver" state="co" country="usa"/>
+        <address street="123 main st" city="arlington" state="ma" country="usa"/>
+      </person>
+
+      <person first-name="jed" last-name="brown">
+        <address street="321 north st" city="atlanta" state="ga" country="usa"/>
+        <address street="123 west st" city="seattle" state="wa" country="usa"/>
+        <address street="321 south avenue" city="denver" state="co" country="usa"/>
+      </person>
+    </people>
+
+L'API DOM du W3C, supportée par Mozilla, peut être utilisée pour créer une représentation en mémoire de ce document comme cela :
+
+    var doc = document.implementation.createDocument("", "", null);
+    var peopleElem = doc.createElement("people");
+
+    var personElem1 = doc.createElement("person");
+    personElem1.setAttribute("first-name", "eric");
+    personElem1.setAttribute("middle-initial", "h");
+    personElem1.setAttribute("last-name", "jung");
+
+    var addressElem1 = doc.createElement("address");
+    addressElem1.setAttribute("street", "321 south st");
+    addressElem1.setAttribute("city", "denver");
+    addressElem1.setAttribute("state", "co");
+    addressElem1.setAttribute("country", "usa");
+    personElem1.appendChild(addressElem1);
+
+    var addressElem2 = doc.createElement("address");
+    addressElem2.setAttribute("street", "123 main st");
+    addressElem2.setAttribute("city", "arlington");
+    addressElem2.setAttribute("state", "ma");
+    addressElem2.setAttribute("country", "usa");
+    personElem1.appendChild(addressElem2);
+
+    var personElem2 = doc.createElement("person");
+    personElem2.setAttribute("first-name", "jed");
+    personElem2.setAttribute("last-name", "brown");
+
+    var addressElem3 = doc.createElement("address");
+    addressElem3.setAttribute("street", "321 north st");
+    addressElem3.setAttribute("city", "atlanta");
+    addressElem3.setAttribute("state", "ga");
+    addressElem3.setAttribute("country", "usa");
+    personElem2.appendChild(addressElem3);
+
+    var addressElem4 = doc.createElement("address");
+    addressElem4.setAttribute("street", "123 west st");
+    addressElem4.setAttribute("city", "seattle");
+    addressElem4.setAttribute("state", "wa");
+    addressElem4.setAttribute("country", "usa");
+    personElem2.appendChild(addressElem4);
+
+    var addressElem5 = doc.createElement("address");
+    addressElem5.setAttribute("street", "321 south avenue");
+    addressElem5.setAttribute("city", "denver");
+    addressElem5.setAttribute("state", "co");
+    addressElem5.setAttribute("country", "usa");
+    personElem2.appendChild(addressElem5);
+
+    peopleElem.appendChild(personElem1);
+    peopleElem.appendChild(personElem2);
+    doc.appendChild(peopleElem);
+
+Voir également le chapitre [DOM du tutoriel XUL](/fr/docs/Mozilla/Tech/XUL/Tutoriel_XUL/Document_Object_Model)
+
+Vous pouvez automatiser la création de l'arbre DOM en utilisant un algorithme inversé JSON associé avec la représentation JSON suivante :
+
+```js
+{
   "people": {
     "person": [{
       "address": [{
@@ -127,21 +124,20 @@ doc.appendChild(peopleElem);
       "@last-name": "brown"
     }]
   }
-}</pre>
+}
+```
 
-<h3 id="Alors_quoi_.3F">Et après ?</h3>
+### Et après ?
 
-<p>Les arbres DOM peuvent être interrogés en utilisant des <a href="/fr/docs/Introduction_%C3%A0_l'utilisation_de_XPath_avec_JavaScript">expressions XPath</a>, convertis en chaîne de caractères ou écris dans un fichier local ou distant en utilisant <a href="/fr/docs/Web/Guide/Parsing_and_serializing_XML">XMLSerializer</a> (sans avoir à le convertir en chaîne de caractères auparavant), <a href="/fr/docs/Web/API/XMLHttpRequest">envoyés à un serveur Web</a> (via XMLHttpRequest), transformés en utilisant <a href="/fr/docs/XSLT">XSLT</a>, <a href="/fr/docs/Glossaire/XLink">XLink</a>,  convertis en un objet JavaScript à travers un <a href="/fr/docs/Archive/JXON">algorithme JXON</a>, etc.</p>
+Les arbres DOM peuvent être interrogés en utilisant des [expressions XPath](/fr/docs/Introduction_%C3%A0_l'utilisation_de_XPath_avec_JavaScript), convertis en chaîne de caractères ou écris dans un fichier local ou distant en utilisant [XMLSerializer](/fr/docs/Web/Guide/Parsing_and_serializing_XML) (sans avoir à le convertir en chaîne de caractères auparavant), [envoyés à un serveur Web](/fr/docs/Web/API/XMLHttpRequest) (via XMLHttpRequest), transformés en utilisant [XSLT](/fr/docs/XSLT), [XLink](/fr/docs/Glossaire/XLink),  convertis en un objet JavaScript à travers un [algorithme JXON](/fr/docs/Archive/JXON), etc.
 
-<p>Vous pouvez utiliser des arbres DOM pour modéliser des données qui ne peuvent pas être traitées avec RDF (ou si vous n'aimez pas RDF). Un autre champ d'action est que, comme XUL est du XML, l'UI de votre application peut être manipulée dynamiquement, téléchargée, enregistrée, chargée, convertie ou transformée relativement facilement.</p>
+Vous pouvez utiliser des arbres DOM pour modéliser des données qui ne peuvent pas être traitées avec RDF (ou si vous n'aimez pas RDF). Un autre champ d'action est que, comme XUL est du XML, l'UI de votre application peut être manipulée dynamiquement, téléchargée, enregistrée, chargée, convertie ou transformée relativement facilement.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Glossaire/XML">XML</a></li>
- <li><a href="/fr/docs/Archive/JXON">JXON</a></li>
- <li><a href="/fr/docs/XPath">XPath</a></li>
- <li><a href="/fr/docs/E4X">E4X (ECMAScript for XML)</a></li>
- <li><a href="/fr/docs/Web/Guide/Parsing_and_serializing_XML">Parsing and serializing XML</a></li>
- <li><a href="/fr/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></li>
-</ul>
+- [XML](/fr/docs/Glossaire/XML)
+- [JXON](/fr/docs/Archive/JXON)
+- [XPath](/fr/docs/XPath)
+- [E4X (ECMAScript for XML)](/fr/docs/E4X)
+- [Parsing and serializing XML](/fr/docs/Web/Guide/Parsing_and_serializing_XML)
+- [XMLHttpRequest](/fr/docs/Web/API/XMLHttpRequest)
diff --git a/files/fr/web/api/document_object_model/index.md b/files/fr/web/api/document_object_model/index.md
index dad3cd1a68..fffb6dd481 100644
--- a/files/fr/web/api/document_object_model/index.md
+++ b/files/fr/web/api/document_object_model/index.md
@@ -8,401 +8,377 @@ tags:
   - Référence(2)
 translation_of: Web/API/Document_Object_Model
 ---
-<div>{{DefaultAPISidebar("DOM")}}</div>
-
-<p>Le <em><strong>Document Object Model</strong></em> ou <strong>DOM</strong> (pour modèle objet de document) est une interface de programmation pour les documents HTML, XML et SVG. Il fournit une représentation structurée du document sous forme d'un arbre et définit la façon dont la structure peut être manipulée par les programmes, en termes de style et de contenu. Le DOM représente le document comme un ensemble de nœuds et d'objets possédant des propriétés et des méthodes. Les nœuds peuvent également avoir des gestionnaires d'événements qui se déclenchent lorsqu'un événement se produit. Cela permet de manipuler des pages web grâce à des scripts et/ou des langages de programmation. Les nœuds peuvent être associés à des gestionnaires d'événements. Une fois qu'un événement est déclenché, les gestionnaires d'événements sont exécutés.</p>
-
-<p>Pour mieux comprendre le fonctionnement du DOM, <a href="/fr/docs/Web/API/Document_Object_Model/Introduction">une introduction est disponible</a>.</p>
-
-<h2 id="Interfaces_du_DOM">Interfaces du DOM</h2>
-
-<ul>
- <li>{{domxref("Attr")}}</li>
- <li>{{domxref("CharacterData")}}</li>
- <li>{{domxref("ChildNode")}} {{experimental_inline}}</li>
- <li>{{domxref("Comment")}}</li>
- <li>{{domxref("CustomEvent")}}</li>
- <li>{{domxref("Document")}}</li>
- <li>{{domxref("DocumentFragment")}}</li>
- <li>{{domxref("DocumentType")}}</li>
- <li>{{domxref("DOMError")}}  {{deprecated_inline}}</li>
- <li>{{domxref("DOMException")}}</li>
- <li>{{domxref("DOMImplementation")}}</li>
- <li>{{domxref("DOMString")}}</li>
- <li>{{domxref("DOMTimeStamp")}}</li>
- <li>{{domxref("DOMSettableTokenList")}}</li>
- <li>{{domxref("DOMStringList")}}</li>
- <li>{{domxref("DOMTokenList")}}</li>
- <li>{{domxref("Element")}}</li>
- <li>{{domxref("EventTarget")}}</li>
- <li>{{domxref("HTMLCollection")}}</li>
- <li>{{domxref("MutationObserver")}}</li>
- <li>{{domxref("Event")}}</li>
- <li>{{domxref("MutationRecord")}}</li>
- <li>{{domxref("NamedNodeMap")}}</li>
- <li>{{domxref("Node")}}</li>
- <li>{{domxref("NodeFilter")}}</li>
- <li>{{domxref("NodeIterator")}}</li>
- <li>{{domxref("NodeList")}}</li>
- <li>{{domxref("NonDocumentTypeChildNode")}}</li>
- <li>{{domxref("ParentNode")}}</li>
- <li>{{domxref("ProcessingInstruction")}}</li>
- <li>{{domxref("Selection")}}{{experimental_inline}}</li>
- <li>{{domxref("Range")}}</li>
- <li>{{domxref("Text")}}</li>
- <li>{{domxref("TextDecoder")}} {{experimental_inline}}</li>
- <li>{{domxref("TextEncoder")}} {{experimental_inline}}</li>
- <li>{{domxref("TimeRanges")}}</li>
- <li>{{domxref("TreeWalker")}}</li>
- <li>{{domxref("URL")}}</li>
- <li>{{domxref("Window")}}</li>
- <li>{{domxref("Worker")}}</li>
- <li>{{domxref("XMLDocument")}} {{experimental_inline}}</li>
-</ul>
-
-<h2 id="Interfaces_obsolètes_du_DOM_obsolete_inline">Interfaces obsolètes du DOM {{obsolete_inline}}</h2>
-
-<p>Le DOM a été simplifié au cours du temps. Pour cette raison, les interfaces qui suivent, présentes dans la spécification du DOM de niveau 3 ou des niveaux antérieurs, ont été supprimées. Bien qu'il ne soit pas certain qu'elles ne soient pas réintroduites, elles doivent être considérées comme obsolètes et il faut éviter de les utiliser :</p>
-
-<ul>
- <li>{{domxref("CDATASection")}}</li>
- <li>{{domxref("DocumentTouch")}}</li>
- <li>{{domxref("DOMConfiguration")}}</li>
- <li>{{domxref("DOMErrorHandler")}}</li>
- <li>{{domxref("DOMImplementationList")}}</li>
- <li>{{domxref("DOMImplementationRegistry")}}</li>
- <li>{{domxref("DOMImplementationSource")}}</li>
- <li>{{domxref("DOMLocator")}}</li>
- <li>{{domxref("DOMObject")}}</li>
- <li>{{domxref("DOMUserData")}}</li>
- <li>{{domxref("ElementTraversal")}}</li>
- <li>{{domxref("Entity")}}</li>
- <li>{{domxref("EntityReference")}}</li>
- <li>{{domxref("NamedNodeMap")}}</li>
- <li>{{domxref("NameList")}}</li>
- <li>{{domxref("Notation")}}</li>
- <li>{{domxref("TypeInfo")}}</li>
- <li>{{domxref("UserDataHandler")}}</li>
-</ul>
-
-<h2 id="Interfaces_HTML">Interfaces HTML</h2>
-
-<p>Un document contenant du HTML est décrit grâce à l'interface {{domxref("HTMLDocument")}}. On notera que la spécification HTML étend également l'interface {{domxref("Document")}}.</p>
-
-<p>Un objet <code>HTMLDocument</code> donne également accès à différentes fonctionnalités liées au navigateur comme l'onglet ou la fenêtre dans laquelle la page est dessinée, notamment grâce à l'interface {{domxref("Window")}}. On peut accéder à la mise en forme de la page via {{domxref("window.style")}} (généralement le CSS associé au document), à l'historique de navigation relatif au contexte via {{domxref("window.history")}} et enfin à la sélection faite dans le document via {{domxref("Selection")}}.</p>
-
-<h3 id="Interfaces_des_éléments_HTML">Interfaces des éléments HTML</h3>
-
-<ul>
- <li>{{domxref("HTMLAnchorElement")}}</li>
- <li>{{domxref("HTMLAppletElement")}}</li>
- <li>{{domxref("HTMLAreaElement")}}</li>
- <li>{{domxref("HTMLAudioElement")}}</li>
- <li>{{domxref("HTMLBaseElement")}}</li>
- <li>{{domxref("HTMLBodyElement")}}</li>
- <li>{{domxref("HTMLBRElement")}}</li>
- <li>{{domxref("HTMLButtonElement")}}</li>
- <li>{{domxref("HTMLCanvasElement")}}</li>
- <li>{{domxref("HTMLDataElement")}}</li>
- <li>{{domxref("HTMLDataListElement")}}</li>
- <li>{{domxref("HTMLDialogElement")}}</li>
- <li>{{domxref("HTMLDirectoryElement")}}</li>
- <li>{{domxref("HTMLDivElement")}}</li>
- <li>{{domxref("HTMLDListElement")}}</li>
- <li>{{domxref("HTMLElement")}}</li>
- <li>{{domxref("HTMLEmbedElement")}}</li>
- <li>{{domxref("HTMLFieldSetElement")}}</li>
- <li>{{domxref("HTMLFontElement")}}</li>
- <li>{{domxref("HTMLFormElement")}}</li>
- <li>{{domxref("HTMLFrameElement")}}</li>
- <li>{{domxref("HTMLFrameSetElement")}}</li>
- <li>{{domxref("HTMLHeadElement")}}</li>
- <li>{{domxref("HTMLHeadingElement")}}</li>
- <li>{{domxref("HTMLHtmlElement")}}</li>
- <li>{{domxref("HTMLHRElement")}}</li>
- <li>{{domxref("HTMLIFrameElement")}}</li>
- <li>{{domxref("HTMLImageElement")}}</li>
- <li>{{domxref("HTMLInputElement")}}</li>
- <li>{{domxref("HTMLKeygenElement")}}</li>
- <li>{{domxref("HTMLLabelElement")}}</li>
- <li>{{domxref("HTMLLegendElement")}}</li>
- <li>{{domxref("HTMLLIElement")}}</li>
- <li>{{domxref("HTMLLinkElement")}}</li>
- <li>{{domxref("HTMLMapElement")}}</li>
- <li>{{domxref("HTMLMediaElement")}}</li>
- <li>{{domxref("HTMLMenuElement")}}</li>
- <li>{{domxref("HTMLMetaElement")}}</li>
- <li>{{domxref("HTMLMeterElement")}}</li>
- <li>{{domxref("HTMLModElement")}}</li>
- <li>{{domxref("HTMLObjectElement")}}</li>
- <li>{{domxref("HTMLOListElement")}}</li>
- <li>{{domxref("HTMLOptGroupElement")}}</li>
- <li>{{domxref("HTMLOptionElement")}}</li>
- <li>{{domxref("HTMLOutputElement")}}</li>
- <li>{{domxref("HTMLParagraphElement")}}</li>
- <li>{{domxref("HTMLParamElement")}}</li>
- <li>{{domxref("HTMLPreElement")}}</li>
- <li>{{domxref("HTMLProgressElement")}}</li>
- <li>{{domxref("HTMLQuoteElement")}}</li>
- <li>{{domxref("HTMLScriptElement")}}</li>
- <li>{{domxref("HTMLSelectElement")}}</li>
- <li>{{domxref("HTMLSourceElement")}}</li>
- <li>{{domxref("HTMLSpanElement")}}</li>
- <li>{{domxref("HTMLStyleElement")}}</li>
- <li>{{domxref("HTMLTableElement")}}</li>
- <li>{{domxref("HTMLTableCaptionElement")}}</li>
- <li>{{domxref("HTMLTableCellElement")}}</li>
- <li>{{domxref("HTMLTableDataCellElement")}}</li>
- <li>{{domxref("HTMLTableHeaderCellElement")}}</li>
- <li>{{domxref("HTMLTableColElement")}}</li>
- <li>{{domxref("HTMLTableRowElement")}}</li>
- <li>{{domxref("HTMLTableSectionElement")}}</li>
- <li>{{domxref("HTMLTextAreaElement")}}</li>
- <li>{{domxref("HTMLTimeElement")}}</li>
- <li>{{domxref("HTMLTitleElement")}}</li>
- <li>{{domxref("HTMLTrackElement")}}</li>
- <li>{{domxref("HTMLUListElement")}}</li>
- <li>{{domxref("HTMLUnknownElement")}}</li>
- <li>{{domxref("HTMLVideoElement")}}</li>
-</ul>
-
-<h3 id="Autres_interfaces">Autres interfaces</h3>
-
-<ul>
- <li>{{domxref("CanvasRenderingContext2D")}}</li>
- <li>{{domxref("CanvasGradient")}}</li>
- <li>{{domxref("CanvasPattern")}}</li>
- <li>{{domxref("TextMetrics")}}</li>
- <li>{{domxref("ImageData")}}</li>
- <li>{{domxref("CanvasPixelArray")}}</li>
- <li>{{domxref("NotifyAudioAvailableEvent")}}</li>
- <li>{{domxref("HTMLAllCollection")}}</li>
- <li>{{domxref("HTMLFormControlsCollection")}}</li>
- <li>{{domxref("HTMLOptionsCollection")}}</li>
- <li>{{domxref("HTMLPropertiesCollection")}}</li>
- <li>{{domxref("DOMStringMap")}}</li>
- <li>{{domxref("RadioNodeList")}}</li>
- <li>{{domxref("MediaError")}}</li>
-</ul>
-
-<h3 id="Interfaces_HTML_obsolètes_obsolete_inline">Interfaces HTML obsolètes {{obsolete_inline}}</h3>
-
-<ul>
- <li>{{domxref("HTMLBaseFontElement")}}</li>
- <li>{{domxref("HTMLIsIndexElement")}}</li>
-</ul>
-
-<h2 id="Interfaces_SVG">Interfaces SVG</a></h2>
-
-<h3 id="Interfaces_des_éléments_SVG">Interfaces des éléments SVG</h3>
-
-<ul>
- <li>{{domxref("SVGAElement")}}</li>
- <li>{{domxref("SVGAltGlyphElement")}} {{deprecated_inline}}</li>
- <li>{{domxref("SVGAltGlyphDefElement")}} {{deprecated_inline}}</li>
- <li>{{domxref("SVGAltGlyphItemElement")}} {{deprecated_inline}}</li>
- <li>{{domxref("SVGAnimationElement")}}</li>
- <li>{{domxref("SVGAnimateElement")}}</li>
- <li>{{domxref("SVGAnimateColorElement")}} {{deprecated_inline}}</li>
- <li>{{domxref("SVGAnimateMotionElement")}}</li>
- <li>{{domxref("SVGAnimateTransformElement")}}</li>
- <li>{{domxref("SVGCircleElement")}}</li>
- <li>{{domxref("SVGClipPathElement")}}</li>
- <li>{{domxref("SVGColorProfileElement")}} {{deprecated_inline}}</li>
- <li>{{domxref("SVGComponentTransferFunctionElement")}}</li>
- <li>{{domxref("SVGCursorElement")}}</li>
- <li>{{domxref("SVGDefsElement")}}</li>
- <li>{{domxref("SVGDescElement")}}</li>
- <li>{{domxref("SVGElement")}}</li>
- <li>{{domxref("SVGEllipseElement")}}</li>
- <li>{{domxref("SVGFEBlendElement")}}</li>
- <li>{{domxref("SVGFEColorMatrixElement")}}</li>
- <li>{{domxref("SVGFEComponentTransferElement")}}</li>
- <li>{{domxref("SVGFECompositeElement")}}</li>
- <li>{{domxref("SVGFEConvolveMatrixElement")}}</li>
- <li>{{domxref("SVGFEDiffuseLightingElement")}}</li>
- <li>{{domxref("SVGFEDisplacementMapElement")}}</li>
- <li>{{domxref("SVGFEDistantLightElement")}}</li>
- <li>{{domxref("SVGFEDropShadowElement")}}</li>
- <li>{{domxref("SVGFEFloodElement")}}</li>
- <li>{{domxref("SVGFEFuncAElement")}}</li>
- <li>{{domxref("SVGFEFuncBElement")}}</li>
- <li>{{domxref("SVGFEFuncGElement")}}</li>
- <li>{{domxref("SVGFEFuncRElement")}}</li>
- <li>{{domxref("SVGFEGaussianBlurElement")}}</li>
- <li>{{domxref("SVGFEImageElement")}}</li>
- <li>{{domxref("SVGFEMergeElement")}}</li>
- <li>{{domxref("SVGFEMergeNodeElement")}}</li>
- <li>{{domxref("SVGFEMorphologyElement")}}</li>
- <li>{{domxref("SVGFEOffsetElement")}}</li>
- <li>{{domxref("SVGFEPointLightElement")}}</li>
- <li>{{domxref("SVGFESpecularLightingElement")}}</li>
- <li>{{domxref("SVGFESpotLightElement")}}</li>
- <li>{{domxref("SVGFETileElement")}}</li>
- <li>{{domxref("SVGFETurbulenceElement")}}</li>
- <li>{{domxref("SVGFilterElement")}}</li>
- <li>{{domxref("SVGFilterPrimitiveStandardAttributes")}}</li>
- <li>{{domxref("SVGFontElement")}} {{deprecated_inline}}</li>
- <li>{{domxref("SVGFontFaceElement")}} {{deprecated_inline}}</li>
- <li>{{domxref("SVGFontFaceFormatElement")}} {{deprecated_inline}}</li>
- <li>{{domxref("SVGFontFaceNameElement")}} {{deprecated_inline}}</li>
- <li>{{domxref("SVGFontFaceSrcElement")}} {{deprecated_inline}}</li>
- <li>{{domxref("SVGFontFaceUriElement")}} {{deprecated_inline}}</li>
- <li>{{domxref("SVGForeignObjectElement")}}</li>
- <li>{{domxref("SVGGElement")}}</li>
- <li>{{domxref("SVGGeometryElement")}}</li>
- <li>{{domxref("SVGGlyphElement")}} {{deprecated_inline}}</li>
- <li>{{domxref("SVGGlyphRefElement")}} {{deprecated_inline}}</li>
- <li>{{domxref("SVGGradientElement")}}</li>
- <li>{{domxref("SVGGraphicsElement")}}</li>
- <li>{{domxref("SVGHatchElement")}} {{experimental_inline}}</li>
- <li>{{domxref("SVGHatchpathElement")}} {{experimental_inline}}</li>
- <li>{{domxref("SVGHKernElement")}} {{deprecated_inline}}</li>
- <li>{{domxref("SVGImageElement")}}</li>
- <li>{{domxref("SVGLinearGradientElement")}}</li>
- <li>{{domxref("SVGLineElement")}}</li>
- <li>{{domxref("SVGMarkerElement")}} {{experimental_inline}}</li>
- <li>{{domxref("SVGMaskElement")}}</li>
- <li>{{domxref("SVGMeshElement")}} {{experimental_inline}}</li>
- <li>{{domxref("SVGMeshGradientElement")}} {{experimental_inline}}</li>
- <li>{{domxref("SVGMeshpatchElement")}} {{experimental_inline}}</li>
- <li>{{domxref("SVGMeshrowElement")}} {{experimental_inline}}</li>
- <li>{{domxref("SVGMetadataElement")}}</li>
- <li>{{domxref("SVGMissingGlyphElement")}} {{deprecated_inline}}</li>
- <li>{{domxref("SVGMPathElement")}}</li>
- <li>{{domxref("SVGPathElement")}}</li>
- <li>{{domxref("SVGPatternElement")}}</li>
- <li>{{domxref("SVGPolylineElement")}}</li>
- <li>{{domxref("SVGPolygonElement")}}</li>
- <li>{{domxref("SVGRadialGradientElement")}}</li>
- <li>{{domxref("SVGRectElement")}}</li>
- <li>{{domxref("SVGScriptElement")}}</li>
- <li>{{domxref("SVGSetElement")}}</li>
- <li>{{domxref("SVGSolidcolorElement")}} {{experimental_inline}}</li>
- <li>{{domxref("SVGStopElement")}}</li>
- <li>{{domxref("SVGStyleElement")}}</li>
- <li>{{domxref("SVGSVGElement")}}</li>
- <li>{{domxref("SVGSwitchElement")}}</li>
- <li>{{domxref("SVGSymbolElement")}}</li>
- <li>{{domxref("SVGTextContentElement")}}</li>
- <li>{{domxref("SVGTextElement")}}</li>
- <li>{{domxref("SVGTextPathElement")}}</li>
- <li>{{domxref("SVGTextPositioningElement")}}</li>
- <li>{{domxref("SVGTitleElement")}}</li>
- <li>{{domxref("SVGTRefElement")}} {{deprecated_inline}}</li>
- <li>{{domxref("SVGTSpanElement")}}</li>
- <li>{{domxref("SVGUseElement")}}</li>
- <li>{{domxref("SVGUnknownElement")}} {{experimental_inline}}</li>
- <li>{{domxref("SVGViewElement")}}</li>
- <li>{{domxref("SVGVKernElement")}} {{deprecated_inline}}</li>
-</ul>
-
-<h3 id="Interfaces_pour_les_types_de_donnée_SVG">Interfaces pour les types de donnée SVG</h3>
-
-<p>Voici l'API du DOM pour les types de donnée utilisés pour les propriétés et attributs SVG.</p>
-
-<div class="note">
-<p><strong>Note :</strong> À partir de {{Gecko("5.0")}}, les interfaces suivantes relatives à SVG et qui représentent des listes d'objets sont indexées et permettent d'y accéder. Elles possèdent en plus une propriété de longueur qui indique le nombre d'éléments dans la liste : {{domxref("SVGLengthList")}}, {{domxref("SVGNumberList")}}, {{domxref("SVGPathSegList")}} et {{domxref("SVGPointList")}}.</p>
-</div>
-
-<h4 id="Interfaces_statiques">Interfaces statiques</h4>
-
-<ul>
- <li>{{domxref("SVGAngle")}}</li>
- <li>{{domxref("SVGColor")}} {{deprecated_inline}}</li>
- <li>{{domxref("SVGICCColor")}} {{deprecated_inline}}</li>
- <li>{{domxref("SVGElementInstance")}}</li>
- <li>{{domxref("SVGElementInstanceList")}}</li>
- <li>{{domxref("SVGLength")}}</li>
- <li>{{domxref("SVGLengthList")}}</li>
- <li>{{domxref("SVGMatrix")}} {{deprecated_inline}}</li>
- <li>{{domxref("SVGNameList")}}</li>
- <li>{{domxref("SVGNumber")}}</li>
- <li>{{domxref("SVGNumberList")}}</li>
- <li>{{domxref("SVGPaint")}}</li>
- <li>{{domxref("SVGPathSeg")}} {{deprecated_inline}}</li>
- <li>{{domxref("SVGPathSegClosePath")}} {{deprecated_inline}}</li>
- <li>{{domxref("SVGPathSegMovetoAbs")}} {{deprecated_inline}}</li>
- <li>{{domxref("SVGPathSegMovetoRel")}} {{deprecated_inline}}</li>
- <li>{{domxref("SVGPathSegLinetoAbs")}} {{deprecated_inline}}</li>
- <li>{{domxref("SVGPathSegLinetoRel")}} {{deprecated_inline}}</li>
- <li>{{domxref("SVGPathSegCurvetoCubicAbs")}} {{deprecated_inline}}</li>
- <li>{{domxref("SVGPathSegCurvetoCubicRel")}} {{deprecated_inline}}</li>
- <li>{{domxref("SVGPathSegCurvetoQuadraticAbs")}} {{deprecated_inline}}</li>
- <li>{{domxref("SVGPathSegCurvetoQuadraticRel")}} {{deprecated_inline}}</li>
- <li>{{domxref("SVGPathSegArcAbs")}} {{deprecated_inline}}</li>
- <li>{{domxref("SVGPathSegArcRel")}} {{deprecated_inline}}</li>
- <li>{{domxref("SVGPathSegLinetoHorizontalAbs")}} {{deprecated_inline}}</li>
- <li>{{domxref("SVGPathSegLinetoHorizontalRel")}} {{deprecated_inline}}</li>
- <li>{{domxref("SVGPathSegLinetoVerticalAbs")}} {{deprecated_inline}}</li>
- <li>{{domxref("SVGPathSegLinetoVerticalRel")}} {{deprecated_inline}}</li>
- <li>{{domxref("SVGPathSegCurvetoCubicSmoothAbs")}} {{deprecated_inline}}</li>
- <li>{{domxref("SVGPathSegCurvetoCubicSmoothRel")}} {{deprecated_inline}}</li>
- <li>{{domxref("SVGPathSegCurvetoQuadraticSmoothAbs")}} {{deprecated_inline}}</li>
- <li>{{domxref("SVGPathSegCurvetoQuadraticSmoothRel")}} {{deprecated_inline}}</li>
- <li>{{domxref("SVGPathSegList")}} {{deprecated_inline}}</li>
- <li>{{domxref("SVGPoint")}} {{deprecated_inline}}</li>
- <li>{{domxref("SVGPointList")}} {{deprecated_inline}}</li>
- <li>{{domxref("SVGPreserveAspectRatio")}}</li>
- <li>{{domxref("SVGRect")}} {{deprecated_inline}}</li>
- <li>{{domxref("SVGStringList")}}</li>
- <li>{{domxref("SVGTransform")}}</li>
- <li>{{domxref("SVGTransformList")}}</li>
-</ul>
-
-<h4 id="Interfaces_animées">Interfaces animées</h4>
-
-<ul>
- <li>{{domxref("SVGAnimatedAngle")}}</li>
- <li>{{domxref("SVGAnimatedBoolean")}}</li>
- <li>{{domxref("SVGAnimatedEnumeration")}}</li>
- <li>{{domxref("SVGAnimatedInteger")}}</li>
- <li>{{domxref("SVGAnimatedLength")}}</li>
- <li>{{domxref("SVGAnimatedLengthList")}}</li>
- <li>{{domxref("SVGAnimatedNumber")}}</li>
- <li>{{domxref("SVGAnimatedNumberList")}}</li>
- <li>{{domxref("SVGAnimatedPathData")}} {{deprecated_inline}}</li>
- <li>{{domxref("SVGAnimatedPoints")}}</li>
- <li>{{domxref("SVGAnimatedPreserveAspectRatio")}}</li>
- <li>{{domxref("SVGAnimatedRect")}}</li>
- <li>{{domxref("SVGAnimatedString")}}</li>
- <li>{{domxref("SVGAnimatedTransformList")}}</li>
-</ul>
-
-<h3 id="Interfaces_relatives_à_SMIL">Interfaces relatives à SMIL</h3>
-
-<ul>
- <li>{{domxref("ElementTimeControl")}}</li>
- <li>{{domxref("TimeEvent")}}</li>
-</ul>
-
-<h3 id="Autres_interfaces_SVG">Autres interfaces SVG</h3>
-
-<ul>
- <li>{{domxref("GetSVGDocument")}}</li>
- <li>{{domxref("ShadowAnimation")}}</li>
- <li>{{domxref("SVGColorProfileRule")}} {{deprecated_inline}}</li>
- <li>{{domxref("SVGCSSRule")}} {{deprecated_inline}}</li>
- <li>{{domxref("SVGDocument")}}</li>
- <li>{{domxref("SVGException")}} {{deprecated_inline}}</li>
- <li>{{domxref("SVGExternalResourcesRequired")}} {{deprecated_inline}}</li>
- <li>{{domxref("SVGFitToViewBox")}}</li>
- <li>{{domxref("SVGLangSpace")}} {{deprecated_inline}}</li>
- <li>{{domxref("SVGLocatable")}} {{deprecated_inline}}</li>
- <li>{{domxref("SVGRenderingIntent")}} {{deprecated_inline}}</li>
- <li>{{domxref("SVGStylable")}} {{deprecated_inline}}</li>
- <li>{{domxref("SVGTests")}}</li>
- <li>{{domxref("SVGTransformable")}} {{deprecated_inline}}</li>
- <li>{{domxref("SVGUnitTypes")}}</li>
- <li>{{domxref("SVGUseElementShadowRoot")}}</li>
- <li>{{domxref("SVGURIReference")}}</li>
- <li>{{domxref("SVGViewSpec")}} {{deprecated_inline}}</li>
- <li>{{domxref("SVGZoomAndPan")}}</li>
- <li>{{domxref("SVGZoomEvent")}} {{deprecated_inline}}</li>
-</ul>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/Référence_du_DOM_Gecko/Exemples">Exemples appliqués pour le DOM</a></li>
-</ul>
+{{DefaultAPISidebar("DOM")}}
+
+Le **_Document Object Model_** ou **DOM** (pour modèle objet de document) est une interface de programmation pour les documents HTML, XML et SVG. Il fournit une représentation structurée du document sous forme d'un arbre et définit la façon dont la structure peut être manipulée par les programmes, en termes de style et de contenu. Le DOM représente le document comme un ensemble de nœuds et d'objets possédant des propriétés et des méthodes. Les nœuds peuvent également avoir des gestionnaires d'événements qui se déclenchent lorsqu'un événement se produit. Cela permet de manipuler des pages web grâce à des scripts et/ou des langages de programmation. Les nœuds peuvent être associés à des gestionnaires d'événements. Une fois qu'un événement est déclenché, les gestionnaires d'événements sont exécutés.
+
+Pour mieux comprendre le fonctionnement du DOM, [une introduction est disponible](/fr/docs/Web/API/Document_Object_Model/Introduction).
+
+## Interfaces du DOM
+
+- {{domxref("Attr")}}
+- {{domxref("CharacterData")}}
+- {{domxref("ChildNode")}} {{experimental_inline}}
+- {{domxref("Comment")}}
+- {{domxref("CustomEvent")}}
+- {{domxref("Document")}}
+- {{domxref("DocumentFragment")}}
+- {{domxref("DocumentType")}}
+- {{domxref("DOMError")}}  {{deprecated_inline}}
+- {{domxref("DOMException")}}
+- {{domxref("DOMImplementation")}}
+- {{domxref("DOMString")}}
+- {{domxref("DOMTimeStamp")}}
+- {{domxref("DOMSettableTokenList")}}
+- {{domxref("DOMStringList")}}
+- {{domxref("DOMTokenList")}}
+- {{domxref("Element")}}
+- {{domxref("EventTarget")}}
+- {{domxref("HTMLCollection")}}
+- {{domxref("MutationObserver")}}
+- {{domxref("Event")}}
+- {{domxref("MutationRecord")}}
+- {{domxref("NamedNodeMap")}}
+- {{domxref("Node")}}
+- {{domxref("NodeFilter")}}
+- {{domxref("NodeIterator")}}
+- {{domxref("NodeList")}}
+- {{domxref("NonDocumentTypeChildNode")}}
+- {{domxref("ParentNode")}}
+- {{domxref("ProcessingInstruction")}}
+- {{domxref("Selection")}}{{experimental_inline}}
+- {{domxref("Range")}}
+- {{domxref("Text")}}
+- {{domxref("TextDecoder")}} {{experimental_inline}}
+- {{domxref("TextEncoder")}} {{experimental_inline}}
+- {{domxref("TimeRanges")}}
+- {{domxref("TreeWalker")}}
+- {{domxref("URL")}}
+- {{domxref("Window")}}
+- {{domxref("Worker")}}
+- {{domxref("XMLDocument")}} {{experimental_inline}}
+
+## Interfaces obsolètes du DOM {{obsolete_inline}}
+
+Le DOM a été simplifié au cours du temps. Pour cette raison, les interfaces qui suivent, présentes dans la spécification du DOM de niveau 3 ou des niveaux antérieurs, ont été supprimées. Bien qu'il ne soit pas certain qu'elles ne soient pas réintroduites, elles doivent être considérées comme obsolètes et il faut éviter de les utiliser :
+
+- {{domxref("CDATASection")}}
+- {{domxref("DocumentTouch")}}
+- {{domxref("DOMConfiguration")}}
+- {{domxref("DOMErrorHandler")}}
+- {{domxref("DOMImplementationList")}}
+- {{domxref("DOMImplementationRegistry")}}
+- {{domxref("DOMImplementationSource")}}
+- {{domxref("DOMLocator")}}
+- {{domxref("DOMObject")}}
+- {{domxref("DOMUserData")}}
+- {{domxref("ElementTraversal")}}
+- {{domxref("Entity")}}
+- {{domxref("EntityReference")}}
+- {{domxref("NamedNodeMap")}}
+- {{domxref("NameList")}}
+- {{domxref("Notation")}}
+- {{domxref("TypeInfo")}}
+- {{domxref("UserDataHandler")}}
+
+## Interfaces HTML
+
+Un document contenant du HTML est décrit grâce à l'interface {{domxref("HTMLDocument")}}. On notera que la spécification HTML étend également l'interface {{domxref("Document")}}.
+
+Un objet `HTMLDocument` donne également accès à différentes fonctionnalités liées au navigateur comme l'onglet ou la fenêtre dans laquelle la page est dessinée, notamment grâce à l'interface {{domxref("Window")}}. On peut accéder à la mise en forme de la page via {{domxref("window.style")}} (généralement le CSS associé au document), à l'historique de navigation relatif au contexte via {{domxref("window.history")}} et enfin à la sélection faite dans le document via {{domxref("Selection")}}.
+
+### Interfaces des éléments HTML
+
+- {{domxref("HTMLAnchorElement")}}
+- {{domxref("HTMLAppletElement")}}
+- {{domxref("HTMLAreaElement")}}
+- {{domxref("HTMLAudioElement")}}
+- {{domxref("HTMLBaseElement")}}
+- {{domxref("HTMLBodyElement")}}
+- {{domxref("HTMLBRElement")}}
+- {{domxref("HTMLButtonElement")}}
+- {{domxref("HTMLCanvasElement")}}
+- {{domxref("HTMLDataElement")}}
+- {{domxref("HTMLDataListElement")}}
+- {{domxref("HTMLDialogElement")}}
+- {{domxref("HTMLDirectoryElement")}}
+- {{domxref("HTMLDivElement")}}
+- {{domxref("HTMLDListElement")}}
+- {{domxref("HTMLElement")}}
+- {{domxref("HTMLEmbedElement")}}
+- {{domxref("HTMLFieldSetElement")}}
+- {{domxref("HTMLFontElement")}}
+- {{domxref("HTMLFormElement")}}
+- {{domxref("HTMLFrameElement")}}
+- {{domxref("HTMLFrameSetElement")}}
+- {{domxref("HTMLHeadElement")}}
+- {{domxref("HTMLHeadingElement")}}
+- {{domxref("HTMLHtmlElement")}}
+- {{domxref("HTMLHRElement")}}
+- {{domxref("HTMLIFrameElement")}}
+- {{domxref("HTMLImageElement")}}
+- {{domxref("HTMLInputElement")}}
+- {{domxref("HTMLKeygenElement")}}
+- {{domxref("HTMLLabelElement")}}
+- {{domxref("HTMLLegendElement")}}
+- {{domxref("HTMLLIElement")}}
+- {{domxref("HTMLLinkElement")}}
+- {{domxref("HTMLMapElement")}}
+- {{domxref("HTMLMediaElement")}}
+- {{domxref("HTMLMenuElement")}}
+- {{domxref("HTMLMetaElement")}}
+- {{domxref("HTMLMeterElement")}}
+- {{domxref("HTMLModElement")}}
+- {{domxref("HTMLObjectElement")}}
+- {{domxref("HTMLOListElement")}}
+- {{domxref("HTMLOptGroupElement")}}
+- {{domxref("HTMLOptionElement")}}
+- {{domxref("HTMLOutputElement")}}
+- {{domxref("HTMLParagraphElement")}}
+- {{domxref("HTMLParamElement")}}
+- {{domxref("HTMLPreElement")}}
+- {{domxref("HTMLProgressElement")}}
+- {{domxref("HTMLQuoteElement")}}
+- {{domxref("HTMLScriptElement")}}
+- {{domxref("HTMLSelectElement")}}
+- {{domxref("HTMLSourceElement")}}
+- {{domxref("HTMLSpanElement")}}
+- {{domxref("HTMLStyleElement")}}
+- {{domxref("HTMLTableElement")}}
+- {{domxref("HTMLTableCaptionElement")}}
+- {{domxref("HTMLTableCellElement")}}
+- {{domxref("HTMLTableDataCellElement")}}
+- {{domxref("HTMLTableHeaderCellElement")}}
+- {{domxref("HTMLTableColElement")}}
+- {{domxref("HTMLTableRowElement")}}
+- {{domxref("HTMLTableSectionElement")}}
+- {{domxref("HTMLTextAreaElement")}}
+- {{domxref("HTMLTimeElement")}}
+- {{domxref("HTMLTitleElement")}}
+- {{domxref("HTMLTrackElement")}}
+- {{domxref("HTMLUListElement")}}
+- {{domxref("HTMLUnknownElement")}}
+- {{domxref("HTMLVideoElement")}}
+
+### Autres interfaces
+
+- {{domxref("CanvasRenderingContext2D")}}
+- {{domxref("CanvasGradient")}}
+- {{domxref("CanvasPattern")}}
+- {{domxref("TextMetrics")}}
+- {{domxref("ImageData")}}
+- {{domxref("CanvasPixelArray")}}
+- {{domxref("NotifyAudioAvailableEvent")}}
+- {{domxref("HTMLAllCollection")}}
+- {{domxref("HTMLFormControlsCollection")}}
+- {{domxref("HTMLOptionsCollection")}}
+- {{domxref("HTMLPropertiesCollection")}}
+- {{domxref("DOMStringMap")}}
+- {{domxref("RadioNodeList")}}
+- {{domxref("MediaError")}}
+
+### Interfaces HTML obsolètes {{obsolete_inline}}
+
+- {{domxref("HTMLBaseFontElement")}}
+- {{domxref("HTMLIsIndexElement")}}
+
+## Interfaces SVG
+
+### Interfaces des éléments SVG
+
+- {{domxref("SVGAElement")}}
+- {{domxref("SVGAltGlyphElement")}} {{deprecated_inline}}
+- {{domxref("SVGAltGlyphDefElement")}} {{deprecated_inline}}
+- {{domxref("SVGAltGlyphItemElement")}} {{deprecated_inline}}
+- {{domxref("SVGAnimationElement")}}
+- {{domxref("SVGAnimateElement")}}
+- {{domxref("SVGAnimateColorElement")}} {{deprecated_inline}}
+- {{domxref("SVGAnimateMotionElement")}}
+- {{domxref("SVGAnimateTransformElement")}}
+- {{domxref("SVGCircleElement")}}
+- {{domxref("SVGClipPathElement")}}
+- {{domxref("SVGColorProfileElement")}} {{deprecated_inline}}
+- {{domxref("SVGComponentTransferFunctionElement")}}
+- {{domxref("SVGCursorElement")}}
+- {{domxref("SVGDefsElement")}}
+- {{domxref("SVGDescElement")}}
+- {{domxref("SVGElement")}}
+- {{domxref("SVGEllipseElement")}}
+- {{domxref("SVGFEBlendElement")}}
+- {{domxref("SVGFEColorMatrixElement")}}
+- {{domxref("SVGFEComponentTransferElement")}}
+- {{domxref("SVGFECompositeElement")}}
+- {{domxref("SVGFEConvolveMatrixElement")}}
+- {{domxref("SVGFEDiffuseLightingElement")}}
+- {{domxref("SVGFEDisplacementMapElement")}}
+- {{domxref("SVGFEDistantLightElement")}}
+- {{domxref("SVGFEDropShadowElement")}}
+- {{domxref("SVGFEFloodElement")}}
+- {{domxref("SVGFEFuncAElement")}}
+- {{domxref("SVGFEFuncBElement")}}
+- {{domxref("SVGFEFuncGElement")}}
+- {{domxref("SVGFEFuncRElement")}}
+- {{domxref("SVGFEGaussianBlurElement")}}
+- {{domxref("SVGFEImageElement")}}
+- {{domxref("SVGFEMergeElement")}}
+- {{domxref("SVGFEMergeNodeElement")}}
+- {{domxref("SVGFEMorphologyElement")}}
+- {{domxref("SVGFEOffsetElement")}}
+- {{domxref("SVGFEPointLightElement")}}
+- {{domxref("SVGFESpecularLightingElement")}}
+- {{domxref("SVGFESpotLightElement")}}
+- {{domxref("SVGFETileElement")}}
+- {{domxref("SVGFETurbulenceElement")}}
+- {{domxref("SVGFilterElement")}}
+- {{domxref("SVGFilterPrimitiveStandardAttributes")}}
+- {{domxref("SVGFontElement")}} {{deprecated_inline}}
+- {{domxref("SVGFontFaceElement")}} {{deprecated_inline}}
+- {{domxref("SVGFontFaceFormatElement")}} {{deprecated_inline}}
+- {{domxref("SVGFontFaceNameElement")}} {{deprecated_inline}}
+- {{domxref("SVGFontFaceSrcElement")}} {{deprecated_inline}}
+- {{domxref("SVGFontFaceUriElement")}} {{deprecated_inline}}
+- {{domxref("SVGForeignObjectElement")}}
+- {{domxref("SVGGElement")}}
+- {{domxref("SVGGeometryElement")}}
+- {{domxref("SVGGlyphElement")}} {{deprecated_inline}}
+- {{domxref("SVGGlyphRefElement")}} {{deprecated_inline}}
+- {{domxref("SVGGradientElement")}}
+- {{domxref("SVGGraphicsElement")}}
+- {{domxref("SVGHatchElement")}} {{experimental_inline}}
+- {{domxref("SVGHatchpathElement")}} {{experimental_inline}}
+- {{domxref("SVGHKernElement")}} {{deprecated_inline}}
+- {{domxref("SVGImageElement")}}
+- {{domxref("SVGLinearGradientElement")}}
+- {{domxref("SVGLineElement")}}
+- {{domxref("SVGMarkerElement")}} {{experimental_inline}}
+- {{domxref("SVGMaskElement")}}
+- {{domxref("SVGMeshElement")}} {{experimental_inline}}
+- {{domxref("SVGMeshGradientElement")}} {{experimental_inline}}
+- {{domxref("SVGMeshpatchElement")}} {{experimental_inline}}
+- {{domxref("SVGMeshrowElement")}} {{experimental_inline}}
+- {{domxref("SVGMetadataElement")}}
+- {{domxref("SVGMissingGlyphElement")}} {{deprecated_inline}}
+- {{domxref("SVGMPathElement")}}
+- {{domxref("SVGPathElement")}}
+- {{domxref("SVGPatternElement")}}
+- {{domxref("SVGPolylineElement")}}
+- {{domxref("SVGPolygonElement")}}
+- {{domxref("SVGRadialGradientElement")}}
+- {{domxref("SVGRectElement")}}
+- {{domxref("SVGScriptElement")}}
+- {{domxref("SVGSetElement")}}
+- {{domxref("SVGSolidcolorElement")}} {{experimental_inline}}
+- {{domxref("SVGStopElement")}}
+- {{domxref("SVGStyleElement")}}
+- {{domxref("SVGSVGElement")}}
+- {{domxref("SVGSwitchElement")}}
+- {{domxref("SVGSymbolElement")}}
+- {{domxref("SVGTextContentElement")}}
+- {{domxref("SVGTextElement")}}
+- {{domxref("SVGTextPathElement")}}
+- {{domxref("SVGTextPositioningElement")}}
+- {{domxref("SVGTitleElement")}}
+- {{domxref("SVGTRefElement")}} {{deprecated_inline}}
+- {{domxref("SVGTSpanElement")}}
+- {{domxref("SVGUseElement")}}
+- {{domxref("SVGUnknownElement")}} {{experimental_inline}}
+- {{domxref("SVGViewElement")}}
+- {{domxref("SVGVKernElement")}} {{deprecated_inline}}
+
+### Interfaces pour les types de donnée SVG
+
+Voici l'API du DOM pour les types de donnée utilisés pour les propriétés et attributs SVG.
+
+> **Note :** À partir de {{Gecko("5.0")}}, les interfaces suivantes relatives à SVG et qui représentent des listes d'objets sont indexées et permettent d'y accéder. Elles possèdent en plus une propriété de longueur qui indique le nombre d'éléments dans la liste : {{domxref("SVGLengthList")}}, {{domxref("SVGNumberList")}}, {{domxref("SVGPathSegList")}} et {{domxref("SVGPointList")}}.
+
+#### Interfaces statiques
+
+- {{domxref("SVGAngle")}}
+- {{domxref("SVGColor")}} {{deprecated_inline}}
+- {{domxref("SVGICCColor")}} {{deprecated_inline}}
+- {{domxref("SVGElementInstance")}}
+- {{domxref("SVGElementInstanceList")}}
+- {{domxref("SVGLength")}}
+- {{domxref("SVGLengthList")}}
+- {{domxref("SVGMatrix")}} {{deprecated_inline}}
+- {{domxref("SVGNameList")}}
+- {{domxref("SVGNumber")}}
+- {{domxref("SVGNumberList")}}
+- {{domxref("SVGPaint")}}
+- {{domxref("SVGPathSeg")}} {{deprecated_inline}}
+- {{domxref("SVGPathSegClosePath")}} {{deprecated_inline}}
+- {{domxref("SVGPathSegMovetoAbs")}} {{deprecated_inline}}
+- {{domxref("SVGPathSegMovetoRel")}} {{deprecated_inline}}
+- {{domxref("SVGPathSegLinetoAbs")}} {{deprecated_inline}}
+- {{domxref("SVGPathSegLinetoRel")}} {{deprecated_inline}}
+- {{domxref("SVGPathSegCurvetoCubicAbs")}} {{deprecated_inline}}
+- {{domxref("SVGPathSegCurvetoCubicRel")}} {{deprecated_inline}}
+- {{domxref("SVGPathSegCurvetoQuadraticAbs")}} {{deprecated_inline}}
+- {{domxref("SVGPathSegCurvetoQuadraticRel")}} {{deprecated_inline}}
+- {{domxref("SVGPathSegArcAbs")}} {{deprecated_inline}}
+- {{domxref("SVGPathSegArcRel")}} {{deprecated_inline}}
+- {{domxref("SVGPathSegLinetoHorizontalAbs")}} {{deprecated_inline}}
+- {{domxref("SVGPathSegLinetoHorizontalRel")}} {{deprecated_inline}}
+- {{domxref("SVGPathSegLinetoVerticalAbs")}} {{deprecated_inline}}
+- {{domxref("SVGPathSegLinetoVerticalRel")}} {{deprecated_inline}}
+- {{domxref("SVGPathSegCurvetoCubicSmoothAbs")}} {{deprecated_inline}}
+- {{domxref("SVGPathSegCurvetoCubicSmoothRel")}} {{deprecated_inline}}
+- {{domxref("SVGPathSegCurvetoQuadraticSmoothAbs")}} {{deprecated_inline}}
+- {{domxref("SVGPathSegCurvetoQuadraticSmoothRel")}} {{deprecated_inline}}
+- {{domxref("SVGPathSegList")}} {{deprecated_inline}}
+- {{domxref("SVGPoint")}} {{deprecated_inline}}
+- {{domxref("SVGPointList")}} {{deprecated_inline}}
+- {{domxref("SVGPreserveAspectRatio")}}
+- {{domxref("SVGRect")}} {{deprecated_inline}}
+- {{domxref("SVGStringList")}}
+- {{domxref("SVGTransform")}}
+- {{domxref("SVGTransformList")}}
+
+#### Interfaces animées
+
+- {{domxref("SVGAnimatedAngle")}}
+- {{domxref("SVGAnimatedBoolean")}}
+- {{domxref("SVGAnimatedEnumeration")}}
+- {{domxref("SVGAnimatedInteger")}}
+- {{domxref("SVGAnimatedLength")}}
+- {{domxref("SVGAnimatedLengthList")}}
+- {{domxref("SVGAnimatedNumber")}}
+- {{domxref("SVGAnimatedNumberList")}}
+- {{domxref("SVGAnimatedPathData")}} {{deprecated_inline}}
+- {{domxref("SVGAnimatedPoints")}}
+- {{domxref("SVGAnimatedPreserveAspectRatio")}}
+- {{domxref("SVGAnimatedRect")}}
+- {{domxref("SVGAnimatedString")}}
+- {{domxref("SVGAnimatedTransformList")}}
+
+### Interfaces relatives à SMIL
+
+- {{domxref("ElementTimeControl")}}
+- {{domxref("TimeEvent")}}
+
+### Autres interfaces SVG
+
+- {{domxref("GetSVGDocument")}}
+- {{domxref("ShadowAnimation")}}
+- {{domxref("SVGColorProfileRule")}} {{deprecated_inline}}
+- {{domxref("SVGCSSRule")}} {{deprecated_inline}}
+- {{domxref("SVGDocument")}}
+- {{domxref("SVGException")}} {{deprecated_inline}}
+- {{domxref("SVGExternalResourcesRequired")}} {{deprecated_inline}}
+- {{domxref("SVGFitToViewBox")}}
+- {{domxref("SVGLangSpace")}} {{deprecated_inline}}
+- {{domxref("SVGLocatable")}} {{deprecated_inline}}
+- {{domxref("SVGRenderingIntent")}} {{deprecated_inline}}
+- {{domxref("SVGStylable")}} {{deprecated_inline}}
+- {{domxref("SVGTests")}}
+- {{domxref("SVGTransformable")}} {{deprecated_inline}}
+- {{domxref("SVGUnitTypes")}}
+- {{domxref("SVGUseElementShadowRoot")}}
+- {{domxref("SVGURIReference")}}
+- {{domxref("SVGViewSpec")}} {{deprecated_inline}}
+- {{domxref("SVGZoomAndPan")}}
+- {{domxref("SVGZoomEvent")}} {{deprecated_inline}}
+
+## Voir aussi
+
+- [Exemples appliqués pour le DOM](/fr/docs/Web/API/Référence_du_DOM_Gecko/Exemples)
diff --git a/files/fr/web/api/document_object_model/introduction/index.md b/files/fr/web/api/document_object_model/introduction/index.md
index fa1af30b15..81279982bf 100644
--- a/files/fr/web/api/document_object_model/introduction/index.md
+++ b/files/fr/web/api/document_object_model/introduction/index.md
@@ -11,62 +11,67 @@ tags:
   - Tutorial
 translation_of: Web/API/Document_Object_Model/Introduction
 ---
-<div>{{DefaultAPISidebar("DOM")}}</div>
+{{DefaultAPISidebar("DOM")}}
 
-<p>Le Modèle Objet de Document (<strong>DOM: Document object Model</strong>) est la representation objet des données qui composent la structure et le contenu d'un document sur le web. Dans ce guide, nous présenterons brièvement le DOM. Nous verrons comment le DOM représente un document {{Glossary("HTML")}} ou {{Glossary("XML")}} en mémoire et comment vous utilisez les API pour créer du contenu web et des applications.</p>
+Le Modèle Objet de Document (**DOM: Document object Model**) est la representation objet des données qui composent la structure et le contenu d'un document sur le web. Dans ce guide, nous présenterons brièvement le DOM. Nous verrons comment le DOM représente un document {{Glossary("HTML")}} ou {{Glossary("XML")}} en mémoire et comment vous utilisez les API pour créer du contenu web et des applications.
 
-<h2 id="what_is_the_dom">Qu'est-ce que le DOM?</h2>
+## Qu'est-ce que le DOM?
 
-<p>Le Document Object Model (DOM) est une interface de programmation pour les documents HTML et XML. Il fournit une page dont des programmes peuvent modifier la structure, son style et son contenu. Cette représentation du document permet de le voir comme un groupe structuré de nœuds et d'objets possédant différentes propriétés et méthodes. Fondamentalement, il relie les pages Web aux scripts ou langages de programmation.</p>
+Le Document Object Model (DOM) est une interface de programmation pour les documents HTML et XML. Il fournit une page dont des programmes peuvent modifier la structure, son style et son contenu. Cette représentation du document permet de le voir comme un groupe structuré de nœuds et d'objets possédant différentes propriétés et méthodes. Fondamentalement, il relie les pages Web aux scripts ou langages de programmation.
 
-<p>Une page Web est un document. Celui-ci peut être affiché soit dans la fenêtre du navigateur, soit sous la forme de son code source HTML. Mais il s'agit du même document dans les deux cas. Le modèle objet de document proposé par le DOM fournit une autre manière de représenter, stocker et manipuler ce même document. Le DOM est une représentation entièrement orientée objet de la page Web, et peut être manipulé à l'aide d'un langage de script comme JavaScript.</p>
+Une page Web est un document. Celui-ci peut être affiché soit dans la fenêtre du navigateur, soit sous la forme de son code source HTML. Mais il s'agit du même document dans les deux cas. Le modèle objet de document proposé par le DOM fournit une autre manière de représenter, stocker et manipuler ce même document. Le DOM est une représentation entièrement orientée objet de la page Web, et peut être manipulé à l'aide d'un langage de script comme JavaScript.
 
-<p>Les normes <a href="https://www.w3.org/DOM/">DOM du W3C</a> et <a href="https://dom.spec.whatwg.org">WHATWG DOM</a> forment la base du DOM implémenté dans la plupart des navigateurs modernes. Beaucoup d'entre-eux fournissent des extensions allant plus loin que le standard, faites donc attention lorsque vous les utilisez sur le Web, où les documents peuvent être consultés par de nombreux navigateurs avec chacun un DOM différent.</p>
+Les normes [DOM du W3C](https://www.w3.org/DOM/) et [WHATWG DOM](https://dom.spec.whatwg.org) forment la base du DOM implémenté dans la plupart des navigateurs modernes. Beaucoup d'entre-eux fournissent des extensions allant plus loin que le standard, faites donc attention lorsque vous les utilisez sur le Web, où les documents peuvent être consultés par de nombreux navigateurs avec chacun un DOM différent.
 
-<p>Par exemple, DOM du W3C spécifie que la méthode <code>getElementsByTagName</code> dans le code ci-dessous doit renvoyer une liste de tous les éléments <code>&lt;P&gt;</code> présents dans le document :</p>
+Par exemple, DOM du W3C spécifie que la méthode `getElementsByTagName` dans le code ci-dessous doit renvoyer une liste de tous les éléments `<P>` présents dans le document :
 
-<pre class="brush: js">const paragraphs = document.querySelectorAll("p");
-// paragraphes[0] est le premier élément &lt;p&gt;
-// paragraphes[1] est le second élément &lt;p&gt;, etc.
+```js
+const paragraphs = document.querySelectorAll("p");
+// paragraphes[0] est le premier élément <p>
+// paragraphes[1] est le second élément <p>, etc.
 alert(paragraphes[0].nodeName);
-</pre>
+```
 
-<p>Chacune des propriétés et des méthodes et chacun des évènements disponibles permettant la manipulation et la création de pages Web sont organisés dans des objets (par exemple, l'objet <code>document</code> qui représente le document lui-même, l'objet <code>table</code> qui implémente l'interface DOM particulière <code>HTMLTableElement</code> permettant d'accéder aux tables HTML, etc.). Cette documentation fournit une référence, objet par objet, du DOM implémenté dans les navigateurs basés sur Gecko.</p>
+Chacune des propriétés et des méthodes et chacun des évènements disponibles permettant la manipulation et la création de pages Web sont organisés dans des objets (par exemple, l'objet `document` qui représente le document lui-même, l'objet `table` qui implémente l'interface DOM particulière `HTMLTableElement` permettant d'accéder aux tables HTML, etc.). Cette documentation fournit une référence, objet par objet, du DOM implémenté dans les navigateurs basés sur Gecko.
 
-<h2 id="dom_and_javascript">DOM et JavaScript</h2>
+## DOM et JavaScript
 
-<p>Le court exemple ci-dessus, comme presque tous les exemples de cette référence, est en <a href="/fr/docs/Web/JavaScript">JavaScript</a>. C'est-à-dire qu'il est<em> écrit</em> en JavaScript, mais qu'il<em> utilise</em> le DOM pour accéder au document et à ses éléments. Le DOM n'est pas un langage de programmation, mais sans lui le langage JavaScript n'aurait aucun modèle ni aucune notion des pages Web, des documents XML, et des éléments pour lesquels il est généralement utilisé. Chaque élément d'un document, que ce soit le document lui-même, ses en-têtes, les tableaux internes au document, les en-têtes de colonnes et le texte contenu dans les cellules de ces tableaux, fait partie du modèle objet de document (DOM) de ce document. Tous ces éléments sont donc accessibles et peuvent être manipulés à l'aide du DOM et d'un langage de script comme JavaScript.</p>
+Le court exemple ci-dessus, comme presque tous les exemples de cette référence, est en [JavaScript](/fr/docs/Web/JavaScript). C'est-à-dire qu'il est _écrit_ en JavaScript, mais qu'il _utilise_ le DOM pour accéder au document et à ses éléments. Le DOM n'est pas un langage de programmation, mais sans lui le langage JavaScript n'aurait aucun modèle ni aucune notion des pages Web, des documents XML, et des éléments pour lesquels il est généralement utilisé. Chaque élément d'un document, que ce soit le document lui-même, ses en-têtes, les tableaux internes au document, les en-têtes de colonnes et le texte contenu dans les cellules de ces tableaux, fait partie du modèle objet de document (DOM) de ce document. Tous ces éléments sont donc accessibles et peuvent être manipulés à l'aide du DOM et d'un langage de script comme JavaScript.
 
-<p>À l'origine, JavaScript et le DOM étaient fortement liés, mais ils ont fini par évoluer en deux entités distinctes. Le contenu de la page est stocké dans le DOM et on peut y accéder et le manipuler via JavaScript, de la sorte qu'on pourrait écrire cette équation approximative :</p>
+À l'origine, JavaScript et le DOM étaient fortement liés, mais ils ont fini par évoluer en deux entités distinctes. Le contenu de la page est stocké dans le DOM et on peut y accéder et le manipuler via JavaScript, de la sorte qu'on pourrait écrire cette équation approximative :
 
-<p>API(page Web ou XML) = DOM + JS(langage de script)</p>
+API(page Web ou XML) = DOM + JS(langage de script)
 
-<p>Le DOM a été conçu pour être indépendant de tout langage de programmation, ce qui rend la représentation structurelle du document disponible à l'aide d'une API simple et cohérente. Bien que cette documentation de référence se concentre uniquement sur JavaScript, des implémentations du DOM peuvent être construites pour n'importe quel langage, comme le démontre cet exemple en Python :</p>
+Le DOM a été conçu pour être indépendant de tout langage de programmation, ce qui rend la représentation structurelle du document disponible à l'aide d'une API simple et cohérente. Bien que cette documentation de référence se concentre uniquement sur JavaScript, des implémentations du DOM peuvent être construites pour n'importe quel langage, comme le démontre cet exemple en Python :
 
-<pre class="brush: python"># Exemple d'utilisation du DOM en Python
+```python
+# Exemple d'utilisation du DOM en Python
 import xml.dom.minidom as m
 doc = m.parse("C:\\Projects\\Py\\chap1.xml");
 doc.nodeName # Propriété DOM de l'objet document;
 p_list = doc.getElementsByTagName("para");
-</pre>
+```
 
-<p>Pour plus d'informations sur ce que ces techniques impliquent dans l'écriture de JavaScript sur le web, voir <a href="/fr/docs/Web/JavaScript/JavaScript_technologies_overview">Survol des technologies JavaScript</a>.</p>
+Pour plus d'informations sur ce que ces techniques impliquent dans l'écriture de JavaScript sur le web, voir [Survol des technologies JavaScript](/fr/docs/Web/JavaScript/JavaScript_technologies_overview).
 
-<h2 id="how_do_i_access_the_dom">Méthodes d'accès au DOM</h2>
+## Méthodes d'accès au DOM
 
-<p>Il n'y a rien de particulier à faire pour commencer à utiliser le DOM. Les différents navigateurs ont différentes implémentations du DOM, et celles-ci présentent des degrés divers de conformité au standard DOM de référence (un sujet que l'on tente d'éviter dans cette documentation), mais chacun d'entre eux utilise un modèle objet de document pour rendre les pages Web accessibles aux scripts.</p>
+Il n'y a rien de particulier à faire pour commencer à utiliser le DOM. Les différents navigateurs ont différentes implémentations du DOM, et celles-ci présentent des degrés divers de conformité au standard DOM de référence (un sujet que l'on tente d'éviter dans cette documentation), mais chacun d'entre eux utilise un modèle objet de document pour rendre les pages Web accessibles aux scripts.
 
-<p>Lorsque vous créez un script, qu'il figure au sein de la page dans un élément <code>&lt;SCRIPT&gt;</code> ou soit inclus au moyen d'une instruction de chargement de script, vous pouvez immédiatement commencer à utiliser l'API. En accédant aux éléments <code><a href="/fr/docs/Web/API/Document">document</a></code> ou <code><a href="/fr/docs/Web/API/Window">window</a></code>, vous pouvez manipuler le document lui-même ou parcourir les enfants de ces éléments, qui sont les divers éléments de la page Web. Votre programmation DOM peut être très simple, comme l'exemple suivant qui affiche un message d'avertissement à l'aide de la fonction <code><a href="/fr/docs/Web/API/Window/alert">alert()</a></code> de l'objet <code><a href="/fr/docs/Web/API/Window">window</a></code>, ou peut utiliser des méthodes DOM plus sophistiquées pour créer du nouveau contenu comme dans l'exemple plus bas.</p>
+Lorsque vous créez un script, qu'il figure au sein de la page dans un élément `<SCRIPT>` ou soit inclus au moyen d'une instruction de chargement de script, vous pouvez immédiatement commencer à utiliser l'API. En accédant aux éléments [`document`](/fr/docs/Web/API/Document) ou [`window`](/fr/docs/Web/API/Window), vous pouvez manipuler le document lui-même ou parcourir les enfants de ces éléments, qui sont les divers éléments de la page Web. Votre programmation DOM peut être très simple, comme l'exemple suivant qui affiche un message d'avertissement à l'aide de la fonction [`alert()`](/fr/docs/Web/API/Window/alert) de l'objet [`window`](/fr/docs/Web/API/Window), ou peut utiliser des méthodes DOM plus sophistiquées pour créer du nouveau contenu comme dans l'exemple plus bas.
 
-<p>Le code JavaScript suivant affichera une alerte quand le document est chargé (et quand le DOM entier est disponible à l'utilisation).</p>
+Le code JavaScript suivant affichera une alerte quand le document est chargé (et quand le DOM entier est disponible à l'utilisation).
 
-<pre class="brush: html">&lt;body onload="window.alert('Bienvenue sur ma page Web !');"&gt;</pre>
+```html
+<body onload="window.alert('Bienvenue sur ma page Web !');">
+```
 
-<p>Un autre exemple. Cette fonction crée un nouvel élément H1, y ajoute du texte, et ajoute ensuite cet élément à l'arbre du document :</p>
+Un autre exemple. Cette fonction crée un nouvel élément H1, y ajoute du texte, et ajoute ensuite cet élément à l'arbre du document :
 
-<pre class="brush: html">&lt;html&gt;
-  &lt;head&gt;
-    &lt;script&gt;
+```html
+<html>
+  <head>
+    <script>
        // run this function when the document is loaded
        window.onload = function() {
 
@@ -76,167 +81,219 @@ p_list = doc.getElementsByTagName("para");
          heading.appendChild(heading_text);
          document.body.appendChild(heading);
       }
-    &lt;/script&gt;
-  &lt;/head&gt;
-  &lt;body&gt;
-  &lt;/body&gt;
-&lt;/html&gt;
-</pre>
+    </script>
+  </head>
+  <body>
+  </body>
+</html>
+```
 
-<h2 id="important_data_types">Types de données fondamentaux</h2>
+## Types de données fondamentaux
 
-<p>Cette référence tente de décrire les différents objets et types de la manière la plus simple possible. Mais il y a un certain nombre de types de données utilisées par l'API que vous devez connaître.</p>
+Cette référence tente de décrire les différents objets et types de la manière la plus simple possible. Mais il y a un certain nombre de types de données utilisées par l'API que vous devez connaître.
 
-<div class="note">
-<p><strong>Note :</strong> Parce que la vaste majorité de codes qui utilisent le DOM gravitent autour de la manipulation de documents HTML, il est courant de toujours se référer aux nœuds du DOM comme éléments, étant donné que dans le document HTML, chaque nœud est un élément. Bien que n'étant pas strictement exact, la documentation que vous trouverez dans MDN fera souvent la même chose, à cause de la fréquence de cette hypothèse.</p>
-</div>
+> **Note :** Parce que la vaste majorité de codes qui utilisent le DOM gravitent autour de la manipulation de documents HTML, il est courant de toujours se référer aux nœuds du DOM comme éléments, étant donné que dans le document HTML, chaque nœud est un élément. Bien que n'étant pas strictement exact, la documentation que vous trouverez dans MDN fera souvent la même chose, à cause de la fréquence de cette hypothèse.
 
-<p><strong>NDTR: </strong>(Pour simplifier, les exemples de syntaxe présentés dans cette référence se réfèreront aux nœuds en les appelant <code>elements</code>, aux tableaux de nœuds en tant que <code>nodeLists</code> (ou même simplement éléments), et aux nœuds d'attributs en tant qu'<code>attributes)</code>.</p>
+**NDTR:** (Pour simplifier, les exemples de syntaxe présentés dans cette référence se réfèreront aux nœuds en les appelant `elements`, aux tableaux de nœuds en tant que `nodeLists` (ou même simplement éléments), et aux nœuds d'attributs en tant qu'`attributes)`.
 
-<p>Le tableau suivant décrit brièvement ces types de données.</p>
+Le tableau suivant décrit brièvement ces types de données.
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Type de donnée (Interface)</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{domxref("Document")}}</td>
-   <td>Lorsqu'un membre renvoie un objet de type <code>document</code> (par exemple la propriété <strong>ownerDocument</strong> d'un élément, qui retourne le <code>document</code> auquel il appartient), cet objet est l'objet <code>document</code> racine lui-même. Le chapitre <a href="/fr/docs/Web/API/Document">référence de DOM <code>document</code></a> décrit l'objet <code>document</code> en détail.</td>
-  </tr>
-  <tr>
-   <td>{{domxref("Node")}}</td>
-   <td>Chaque objet du document est sous une forme ou une autre un noeud. Dans un document HTML, un objet peût être un élément nœud, mais aussi un nœud text ou nœud attribut.</td>
-  </tr>
-  <tr>
-   <td>{{domxref("Element")}}</td>
-   <td>Le type élément est basé sur le nœud. Il se réfère à un élément ou nœud de type élément renvoyé par un membre de l'API DOM. Plutôt que de dire, par exemple que la méthode <a href="/fr/docs/Web/API/Document/createElement">document.createElement()</a> renvoie une réference à un objet de type nœud, nous dirons simplement que cette méthode renvoie l'élément qui vient juste d'être créer dans le DOM. Les objets element implémentent l'interface DOM element, mais aussi l'interface plus basique node, qui sont toutes les deux incluses dans cette réference. dans un document HTML, les éléments sont mis en valeur par l'interface API HTML DOM {{domxref("HTMLElement")}} aussi bien que par d'autres interfaces décrivant les capacités d'éléments spécifiques ( par exemple , {{domxref("HTMLTableElement")}} for {{HTMLElement("table")}} elements).</td>
-  </tr>
-  <tr>
-   <td>{{domxref("NodeList")}}</td>
-   <td>Une <code>nodeList</code> est un tableau d'éléments, comme celui qui est renvoyé par la méthode <a href="/fr/docs/Web/API/Document/getElementsByTagName">document.getElementsByTagName()</a>. Les éléments d'une <code>nodeList</code> sont accessibles par un index de deux manières différentes :
-    <ul>
-     <li>list.item(1)</li>
-     <li>list[1]</li>
-    </ul>
-
-    <p>Ces deux lignes sont équivalentes. Dans la première, <strong>item()</strong> est la méthode de l'objet <code>nodeList</code>. La seconde utilise la syntaxe habituelle d'un tableau pour accéder au second élément de la liste.</p>
-   </td>
-  </tr>
-  <tr>
-   <td>{{domxref("Attribute")}}</td>
-   <td>Lorsqu'un <code>attribute</code> est renvoyé par un membre (par exemple par la méthode <strong>createAttribute()</strong>), il s'agit d'une référence à un objet qui expose une interface particulière (et limitée) aux attributs. Les attributs sont des nœuds dans le DOM tout comme les éléments, mais ils seront rarement utilisés de cette manière.</td>
-  </tr>
-  <tr>
-   <td>{{domxref("NamedNodeMap")}}</td>
-   <td>Une <code>namedNodeMap</code> est comme un tableau, mais où l'on peut accéder aux éléments à la fois par nom ou par index. Cette dernière possibilité est cependant juste là pour faciliter l'énumération, car la liste n'est pas dans un ordre particulier. Une <code>namedNodeMap</code> a une méthode item() pour la même raison, et il est également possible d'ajouter et de retirer des élements d'une <code>namedNodeMap</code>.</td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th scope="col">Type de donnée (Interface)</th>
+      <th scope="col">Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>{{domxref("Document")}}</td>
+      <td>
+        Lorsqu'un membre renvoie un objet de type <code>document</code> (par
+        exemple la propriété <strong>ownerDocument</strong> d'un élément, qui
+        retourne le <code>document</code> auquel il appartient), cet objet est
+        l'objet <code>document</code> racine lui-même. Le chapitre
+        <a href="/fr/docs/Web/API/Document"
+          >référence de DOM <code>document</code></a
+        >
+        décrit l'objet <code>document</code> en détail.
+      </td>
+    </tr>
+    <tr>
+      <td>{{domxref("Node")}}</td>
+      <td>
+        Chaque objet du document est sous une forme ou une autre un noeud. Dans
+        un document HTML, un objet peût être un élément nœud, mais aussi un nœud
+        text ou nœud attribut.
+      </td>
+    </tr>
+    <tr>
+      <td>{{domxref("Element")}}</td>
+      <td>
+        Le type élément est basé sur le nœud. Il se réfère à un élément ou nœud
+        de type élément renvoyé par un membre de l'API DOM. Plutôt que de dire,
+        par exemple que la méthode
+        <a href="/fr/docs/Web/API/Document/createElement"
+          >document.createElement()</a
+        >
+        renvoie une réference à un objet de type nœud, nous dirons simplement
+        que cette méthode renvoie l'élément qui vient juste d'être créer dans le
+        DOM. Les objets element implémentent l'interface DOM element, mais aussi
+        l'interface plus basique node, qui sont toutes les deux incluses dans
+        cette réference. dans un document HTML, les éléments sont mis en valeur
+        par l'interface API HTML DOM {{domxref("HTMLElement")}} aussi
+        bien que par d'autres interfaces décrivant les capacités d'éléments
+        spécifiques ( par exemple , {{domxref("HTMLTableElement")}} for
+        {{HTMLElement("table")}} elements).
+      </td>
+    </tr>
+    <tr>
+      <td>{{domxref("NodeList")}}</td>
+      <td>
+        Une <code>nodeList</code> est un tableau d'éléments, comme celui qui est
+        renvoyé par la méthode
+        <a href="/fr/docs/Web/API/Document/getElementsByTagName"
+          >document.getElementsByTagName()</a
+        >. Les éléments d'une <code>nodeList</code> sont accessibles par un
+        index de deux manières différentes :
+        <ul>
+          <li>list.item(1)</li>
+          <li>list[1]</li>
+        </ul>
+        <p>
+          Ces deux lignes sont équivalentes. Dans la première,
+          <strong>item()</strong> est la méthode de l'objet
+          <code>nodeList</code>. La seconde utilise la syntaxe habituelle d'un
+          tableau pour accéder au second élément de la liste.
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td>{{domxref("Attribute")}}</td>
+      <td>
+        Lorsqu'un <code>attribute</code> est renvoyé par un membre (par exemple
+        par la méthode <strong>createAttribute()</strong>), il s'agit d'une
+        référence à un objet qui expose une interface particulière (et limitée)
+        aux attributs. Les attributs sont des nœuds dans le DOM tout comme les
+        éléments, mais ils seront rarement utilisés de cette manière.
+      </td>
+    </tr>
+    <tr>
+      <td>{{domxref("NamedNodeMap")}}</td>
+      <td>
+        Une <code>namedNodeMap</code> est comme un tableau, mais où l'on peut
+        accéder aux éléments à la fois par nom ou par index. Cette dernière
+        possibilité est cependant juste là pour faciliter l'énumération, car la
+        liste n'est pas dans un ordre particulier. Une
+        <code>namedNodeMap</code> a une méthode item() pour la même raison, et
+        il est également possible d'ajouter et de retirer des élements d'une
+        <code>namedNodeMap</code>.
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="dom_interfaces">Les interfaces DOM</h2>
+## Les interfaces DOM
 
-<p>Un des objectifs de ce guide est de ne pas trop parler de l'héritage abstrait d'interfaces, et d'autres détails d'implémentation, et de se concentrer plutôt sur les objets dans le DOM qui sont les<em>choses</em> réelles utilisables pour manipuler la hiérarchie du DOM. Du point de vue du programmeur Web, il est rarement utile de savoir que l'objet représentant l'élément <code>HTML FORM</code> reçoit sa propriété <strong>name</strong> de l'interface <code>HTMLElement</code>. Dans les deux cas, la propriété désirée est simplement l'objet de formulaire.</p>
+Un des objectifs de ce guide est de ne pas trop parler de l'héritage abstrait d'interfaces, et d'autres détails d'implémentation, et de se concentrer plutôt sur les objets dans le DOM qui sont les*choses* réelles utilisables pour manipuler la hiérarchie du DOM. Du point de vue du programmeur Web, il est rarement utile de savoir que l'objet représentant l'élément `HTML FORM` reçoit sa propriété **name** de l'interface `HTMLElement`. Dans les deux cas, la propriété désirée est simplement l'objet de formulaire.
 
-<p>Cependant, la relation entre les objets et les interfaces qu'ils implémentent dans le DOM peut entrainer une certaine confusion, c'est pourquoi cette section tente de présenter un tant soit peu les interfaces figurant dans la spécification du DOM et la manière dont elles sont rendues disponibles.</p>
+Cependant, la relation entre les objets et les interfaces qu'ils implémentent dans le DOM peut entrainer une certaine confusion, c'est pourquoi cette section tente de présenter un tant soit peu les interfaces figurant dans la spécification du DOM et la manière dont elles sont rendues disponibles.
 
-<h3 id="interfaces_and_objects">Les interfaces et les objets</h3>
+### Les interfaces et les objets
 
-<p>De nombreux objets empruntent à plusieurs interfaces différentes. L'objet table par exemple implémente une <a href="/fr/docs/Web/API/HTMLTableElement">interface spécialisée de l'élément HTML Table</a>, qui comprend des méthodes telles que <code>createCaption</code> et <code>insertRow</code>. Mais comme il s'agit également d'un élément HTML, <code>table</code> implémente aussi l'interface <code>Element</code> décrite dans le chapitre <a href="/fr/docs/Web/API/Element">Référence de DOM <code>element</code></a>. Enfin, comme un élément HTML est, du point de vue du DOM, un nœud au sein de l'arbre de nœuds qui forment le modèle objet pour une page HTML ou XML, l'objet table implémente aussi l'interface plus basique <code>Node</code>, dont dérive <code>Element</code>.</p>
+De nombreux objets empruntent à plusieurs interfaces différentes. L'objet table par exemple implémente une [interface spécialisée de l'élément HTML Table](/fr/docs/Web/API/HTMLTableElement), qui comprend des méthodes telles que `createCaption` et `insertRow`. Mais comme il s'agit également d'un élément HTML, `table` implémente aussi l'interface `Element` décrite dans le chapitre [Référence de DOM `element`](/fr/docs/Web/API/Element). Enfin, comme un élément HTML est, du point de vue du DOM, un nœud au sein de l'arbre de nœuds qui forment le modèle objet pour une page HTML ou XML, l'objet table implémente aussi l'interface plus basique `Node`, dont dérive `Element`.
 
-<p>Lorsque vous obtiendrez une référence à un objet <code>table</code>, comme dans l'exemple suivant, vous utiliserez régulièrement ces trois interfaces de manière interchangeable sur l'objet, peut-être même sans le savoir.</p>
+Lorsque vous obtiendrez une référence à un objet `table`, comme dans l'exemple suivant, vous utiliserez régulièrement ces trois interfaces de manière interchangeable sur l'objet, peut-être même sans le savoir.
 
-<pre class="brush: js">var table = document.getElementById("table");
+```js
+var table = document.getElementById("table");
 var tableAttrs = table.attributes; // Interface Node/Element
-for(var i = 0; i &lt; tableAttrs.length; i++){
+for(var i = 0; i < tableAttrs.length; i++){
   // Interface HTMLTableElement : attribut border
   if(tableAttrs[i].nodeName.toLowerCase() == "border")
     table.border = "1";
 }
 // Interface HTMLTableElement : attribut summary
 table.summary = "note : bordure plus large";
-</pre>
+```
 
-<h3 id="core_interfaces_in_the_dom">Interfaces essentielles du DOM</h3>
+### Interfaces essentielles du DOM
 
-<p>Cette section liste certaines des interfaces les plus couramment utilisées dans le DOM. L'idée n'est pas ici de décrire ce que font ces API, mais de vous donner une idée des sortes de méthodes et propriétés que vous verrez très souvent en utilisant le DOM. Ces API communes sont utilisées dans les exemples plus longs du chapitre <a href="/fr/docs/Web/API/Document_Object_Model/Examples">Exemples d'utilisation du DOM</a> à la fin de livre.</p>
+Cette section liste certaines des interfaces les plus couramment utilisées dans le DOM. L'idée n'est pas ici de décrire ce que font ces API, mais de vous donner une idée des sortes de méthodes et propriétés que vous verrez très souvent en utilisant le DOM. Ces API communes sont utilisées dans les exemples plus longs du chapitre [Exemples d'utilisation du DOM](/fr/docs/Web/API/Document_Object_Model/Examples) à la fin de livre.
 
-<p>Les objets <code>document</code> et <code>window</code> sont ceux dont les interfaces sont les plus souvent utilisées dans la programmation DOM. En termes simples, l'objet <code>window</code> représente quelque chose comme le navigateur, et l'objet <code>document</code> est la racine du document lui-même. <code>Element</code> hérite de l'interface générique <code>Node</code>, et ensemble ces deux interfaces fournissent un grand nombre des méthodes et propriétés utilisables sur des éléments individuels. Ces éléments peuvent également avoir des interfaces spécifiques pour traiter le type de données que ces éléments contiennent, comme dans l'objet <code>table</code> donné en exemple dans la section précédente.</p>
+Les objets `document` et `window` sont ceux dont les interfaces sont les plus souvent utilisées dans la programmation DOM. En termes simples, l'objet `window` représente quelque chose comme le navigateur, et l'objet `document` est la racine du document lui-même. `Element` hérite de l'interface générique `Node`, et ensemble ces deux interfaces fournissent un grand nombre des méthodes et propriétés utilisables sur des éléments individuels. Ces éléments peuvent également avoir des interfaces spécifiques pour traiter le type de données que ces éléments contiennent, comme dans l'objet `table` donné en exemple dans la section précédente.
 
-<p>Ce qui suit est une brève liste des API communes au script de page dans le Web et XML utilisant le DOM.</p>
+Ce qui suit est une brève liste des API communes au script de page dans le Web et XML utilisant le DOM.
 
-<ul>
- <li><code>{{domxref("document.getElementById", "", "", "1")}}(id)</code></li>
- <li><code>document.{{domxref("Element.getElementsByTagName", "getElementsByTagName", "", "1")}}(name)</code></li>
- <li><code>{{domxref("document.createElement", "", "", "1")}}(name)</code></li>
- <li><code>parentNode.{{domxref("Node.appendChild", "appendChild", "", "1")}}(node)</code></li>
- <li><code>element.{{domxref("element.innerHTML", "innerHTML", "", "1")}}</code></li>
- <li><code>element.{{domxref("HTMLElement.style", "style", "", "1")}}.left</code></li>
- <li><code>element.{{domxref("element.setAttribute", "setAttribute", "", "1")}}()</code></li>
- <li><code>element.{{domxref("element.getAttribute", "getAttribute", "", "1")}}()</code></li>
- <li><code>element.{{domxref("EventTarget.addEventListener", "addEventListener", "", "1")}}()</code></li>
- <li><code>{{domxref("window.content", "", "", "1")}}</code></li>
- <li><code>{{domxref("window.onload", "", "", "1")}}</code></li>
- <li><code>{{domxref("console.log", "", "", "1")}}()</code></li>
- <li><code>{{domxref("window.scrollTo", "", "", "1")}}()</code></li>
-</ul>
+- `{{domxref("document.getElementById", "", "", "1")}}(id)`
+- `document.{{domxref("Element.getElementsByTagName", "getElementsByTagName", "", "1")}}(name)`
+- `{{domxref("document.createElement", "", "", "1")}}(name)`
+- `parentNode.{{domxref("Node.appendChild", "appendChild", "", "1")}}(node)`
+- `element.{{domxref("element.innerHTML", "innerHTML", "", "1")}}`
+- `element.{{domxref("HTMLElement.style", "style", "", "1")}}.left`
+- `element.{{domxref("element.setAttribute", "setAttribute", "", "1")}}()`
+- `element.{{domxref("element.getAttribute", "getAttribute", "", "1")}}()`
+- `element.{{domxref("EventTarget.addEventListener", "addEventListener", "", "1")}}()`
+- `{{domxref("window.content", "", "", "1")}}`
+- `{{domxref("window.onload", "", "", "1")}}`
+- `{{domxref("console.log", "", "", "1")}}()`
+- `{{domxref("window.scrollTo", "", "", "1")}}()`
 
-<h2 id="testing_the_dom_api">Test de l'API DOM</h2>
+## Test de l'API DOM
 
-<p>Ce document fournit des exemples pour chaque interface utilisable dans le cadre de votre propre développement Web. Dans certains cas, les exemples sont des pages HTML complètes, avec l'accès au DOM dans un élément &lt;script&gt;, l'interface (comme les boutons) nécessaire pour lancer le script dans un formulaire, et les éléments HTML sur lesquels le DOM opère sont listés également. Lorsque c'est le cas, vous pouvez copier et coller l'exemple dans un nouveau document HTML, l'enregistrer et l'exécuter depuis un navigateur.</p>
+Ce document fournit des exemples pour chaque interface utilisable dans le cadre de votre propre développement Web. Dans certains cas, les exemples sont des pages HTML complètes, avec l'accès au DOM dans un élément \<script>, l'interface (comme les boutons) nécessaire pour lancer le script dans un formulaire, et les éléments HTML sur lesquels le DOM opère sont listés également. Lorsque c'est le cas, vous pouvez copier et coller l'exemple dans un nouveau document HTML, l'enregistrer et l'exécuter depuis un navigateur.
 
-<p>Il y a cependant certains cas où les exemples sont plus concis. Pour exécuter les exemples qui démontrent seulement la relation basique entre l'interface et les éléments HTML, il peut être utile de mettre en place une page de test dans laquelle les interfaces peuvent être accédées facilement par des scriptes. La page suivante, très simple, fournit un élément &lt;script&gt; dans l'entête dans lequel vous pouvez placer les fonctions qui testent l'interface voulue, quelques éléments HTML avec des attributs que vous pouvez lire, modifier ou manipuler de quelque manière que ce soit, et l'interface utilisateur Web nécessaire pour appeler toutes ces fonctions depuis le navigateur.</p>
+Il y a cependant certains cas où les exemples sont plus concis. Pour exécuter les exemples qui démontrent seulement la relation basique entre l'interface et les éléments HTML, il peut être utile de mettre en place une page de test dans laquelle les interfaces peuvent être accédées facilement par des scriptes. La page suivante, très simple, fournit un élément \<script> dans l'entête dans lequel vous pouvez placer les fonctions qui testent l'interface voulue, quelques éléments HTML avec des attributs que vous pouvez lire, modifier ou manipuler de quelque manière que ce soit, et l'interface utilisateur Web nécessaire pour appeler toutes ces fonctions depuis le navigateur.
 
-<p>Vous pouvez utiliser cette page de test ou en créer une semblable pour tester les interfaces DOM qui vous intéressent et voir comment elles fonctionnent sur la plateforme du navigateur. Vous pouvez mettre à jour le contenu de la fonction <code>test()</code>, créer plus de boutons, ou ajouter d'autres éléments si nécessaire.</p>
+Vous pouvez utiliser cette page de test ou en créer une semblable pour tester les interfaces DOM qui vous intéressent et voir comment elles fonctionnent sur la plateforme du navigateur. Vous pouvez mettre à jour le contenu de la fonction `test()`, créer plus de boutons, ou ajouter d'autres éléments si nécessaire.
 
-<pre class="brush: html">&lt;html&gt;
-&lt;head&gt;
-  &lt;title&gt;Tests du DOM&lt;/title&gt;
-  &lt;script type="application/x-javascript"&gt;
+```html
+<html>
+<head>
+  <title>Tests du DOM</title>
+  <script type="application/x-javascript">
   function setBodyAttr(attr,value){
     if(document.body) eval('document.body.'+attr+'="'+value+'"');
     else notSupported();
   }
-  &lt;/script&gt;
-&lt;/head&gt;
-&lt;body&gt;
-  &lt;div style="margin: .5in; height="400""&gt;
-    &lt;p&gt;&lt;b&gt;&lt;tt&gt;text&lt;/tt&gt; color&lt;/p&gt;
-    &lt;form&gt;
-      &lt;select onChange="setBodyAttr('text',
-          this.options[this.selectedIndex].value);"&gt;
-        &lt;option value="black"&gt;black
-        &lt;option value="darkblue"&gt;darkblue
-      &lt;/select&gt;
-      &lt;p&gt;&lt;b&gt;&lt;tt&gt;bgColor&lt;/tt&gt;&lt;/p&gt;
-      &lt;select onChange="setBodyAttr('bgColor',
-          this.options[this.selectedIndex].value);"&gt;
-        &lt;option value="white"&gt;white
-        &lt;option value="lightgrey"&gt;gray
-      &lt;/select&gt;
-      &lt;p&gt;&lt;b&gt;&lt;tt&gt;link&lt;/tt&gt;&lt;/p&gt;
-      &lt;select onChange="setBodyAttr('link',
-          this.options[this.selectedIndex].value);"&gt;
-        &lt;option value="blue"&gt;blue
-        &lt;option value="green"&gt;green
-      &lt;/select&gt;  &lt;small&gt;
-          &lt;a href="http://www.brownhen.com/dom_api_top.html" id="sample"&gt;
-      (exemple de lien)&lt;/a&gt;&lt;/small&gt;&lt;br&gt;
-    &lt;/form&gt;
-    &lt;form&gt;
-      &lt;input type="button" value="version" onclick="ver()" /&gt;
-    &lt;/form&gt;
-  &lt;/div&gt;
-&lt;/body&gt;
-&lt;/html&gt;</pre>
-
-<p>Pour tester un grand nombre d'interfaces dans une seule page, par exemple une « suite » de propriétés affectant les couleurs d'une page Web, vous pouvez créer une page de test semblable avec une console complète de boutons, de champs de texte et d'autres élements HTML. La capture d'écran suivante vous donnera une idée de comment les interfaces peuvent être regroupées à des fins de test.</p>
-
-<p>Figure 0.1 Exemple de page de test du DOM</p>
-
-<p><img alt="" src="dom_ref_introduction_to_the_dom.gif"></p>
-
-<p>Dans cet exemple, les menus déroulants mettent à jour dynamiquement les aspects de la page web accessibles au DOM comme sa couleur de fond (<code>bgColor</code>), la couleur des hyperliens (<code>aLink</code>) et la couleur du texte (<code>text</code>). Cependant, lorsque vous concevez vos pages de test, tester les interfaces au fur et à mesure que vous les lisez est une partie importante de l'apprentissage de l'utilisation efficace du DOM.</p>
+  </script>
+</head>
+<body>
+  <div style="margin: .5in; height="400"">
+    <p><b><tt>text</tt> color</p>
+    <form>
+      <select onChange="setBodyAttr('text',
+          this.options[this.selectedIndex].value);">
+        <option value="black">black
+        <option value="darkblue">darkblue
+      </select>
+      <p><b><tt>bgColor</tt></p>
+      <select onChange="setBodyAttr('bgColor',
+          this.options[this.selectedIndex].value);">
+        <option value="white">white
+        <option value="lightgrey">gray
+      </select>
+      <p><b><tt>link</tt></p>
+      <select onChange="setBodyAttr('link',
+          this.options[this.selectedIndex].value);">
+        <option value="blue">blue
+        <option value="green">green
+      </select>  <small>
+          <a href="http://www.brownhen.com/dom_api_top.html" id="sample">
+      (exemple de lien)</a></small><br>
+    </form>
+    <form>
+      <input type="button" value="version" onclick="ver()" />
+    </form>
+  </div>
+</body>
+</html>
+```
+
+Pour tester un grand nombre d'interfaces dans une seule page, par exemple une « suite » de propriétés affectant les couleurs d'une page Web, vous pouvez créer une page de test semblable avec une console complète de boutons, de champs de texte et d'autres élements HTML. La capture d'écran suivante vous donnera une idée de comment les interfaces peuvent être regroupées à des fins de test.
+
+Figure 0.1 Exemple de page de test du DOM
+
+![](dom_ref_introduction_to_the_dom.gif)
+
+Dans cet exemple, les menus déroulants mettent à jour dynamiquement les aspects de la page web accessibles au DOM comme sa couleur de fond (`bgColor`), la couleur des hyperliens (`aLink`) et la couleur du texte (`text`). Cependant, lorsque vous concevez vos pages de test, tester les interfaces au fur et à mesure que vous les lisez est une partie importante de l'apprentissage de l'utilisation efficace du DOM.
diff --git a/files/fr/web/api/document_object_model/locating_dom_elements_using_selectors/index.md b/files/fr/web/api/document_object_model/locating_dom_elements_using_selectors/index.md
index 72893cd5ab..b23bc2e16d 100644
--- a/files/fr/web/api/document_object_model/locating_dom_elements_using_selectors/index.md
+++ b/files/fr/web/api/document_object_model/locating_dom_elements_using_selectors/index.md
@@ -11,48 +11,42 @@ translation_of: Web/API/Document_object_model/Locating_DOM_elements_using_select
 original_slug: >-
   Web/API/Document_Object_Model/Localisation_des_éléments_DOM_avec_les_sélecteurs
 ---
-<div>{{ gecko_minversion_header("1.9.1") }}</div>
+{{ gecko_minversion_header("1.9.1") }}
 
-<p>L'API Selectors fournit des méthodes simples et rapides pour retrouver les noeuds <a href="/fr/docs/Web/API/element" ><code>Element</code></a> du DOM par correspondance avec un jeu de sélecteurs. C'est beaucoup plus rapide que les techniques passées, pour lesquelles il était nécessaire, par exemple, d'utiliser une boucle en code JavaScript pour localiser l'élément spécifique que l'on devait trouver.</p>
+L'API Selectors fournit des méthodes simples et rapides pour retrouver les noeuds [`Element`](/fr/docs/Web/API/element) du DOM par correspondance avec un jeu de sélecteurs. C'est beaucoup plus rapide que les techniques passées, pour lesquelles il était nécessaire, par exemple, d'utiliser une boucle en code JavaScript pour localiser l'élément spécifique que l'on devait trouver.
 
-<h2 id="L'interface_NodeSelector">L'interface NodeSelector</h2>
+## L'interface NodeSelector
 
-<p>Cette spécification ajoute deux nouvelles méthodes à tous les objets mettant en oeuvre les interfaces <a href="/fr/docs/Web/API/document" ><code>Document</code></a>, <a href="/fr/docs/Web/API/DocumentFragment" ><code>DocumentFragment</code></a> ou <a href="/fr/docs/Web/API/element" ><code>Element</code></a> :</p>
+Cette spécification ajoute deux nouvelles méthodes à tous les objets mettant en oeuvre les interfaces [`Document`](/fr/docs/Web/API/document), [`DocumentFragment`](/fr/docs/Web/API/DocumentFragment) ou [`Element`](/fr/docs/Web/API/element) :
 
-<dl>
- <dt><code>querySelector</code></dt>
- <dd>Renvoie le premier noeud <a href="/fr/docs/Web/API/element" ><code>Element</code></a> correspondant dans la sous-arborescence du noeud. Si aucun noeud correspondant n'est trouvé, <code>null</code> est renvoyé.</dd>
- <dt><code>querySelectorAll</code></dt>
- <dd>Renvoie une <a href="/fr/docs/Web/API/NodeList" ><code>NodeList</code></a> (<em>liste de noeuds</em>) contenant tous les noeuds <code>Element</code> correspondants dans la sous-arborescence du noeud, ou une <code>NodeList</code> vide si aucune correspondance n'a été trouvée.</dd>
-</dl>
+- `querySelector`
+  - : Renvoie le premier noeud [`Element`](/fr/docs/Web/API/element) correspondant dans la sous-arborescence du noeud. Si aucun noeud correspondant n'est trouvé, `null` est renvoyé.
+- `querySelectorAll`
+  - : Renvoie une [`NodeList`](/fr/docs/Web/API/NodeList) (_liste de noeuds_) contenant tous les noeuds `Element` correspondants dans la sous-arborescence du noeud, ou une `NodeList` vide si aucune correspondance n'a été trouvée.
 
-<div class="note">
-  <p><strong>Note :</strong> La <code><a href="/fr/docs/Web/API/NodeList" >NodeList</a></code> retournée par <code><a href="/fr/docs/Web/API/Element/querySelectorAll" >querySelectorAll()</a></code> n'est pas directe. À la différence des autres méthodes de requêtes DOM qui retournent une liste de noeuds directe.</p>
-</div>
+> **Note :** La [`NodeList`](/fr/docs/Web/API/NodeList) retournée par [`querySelectorAll()`](/fr/docs/Web/API/Element/querySelectorAll) n'est pas directe. À la différence des autres méthodes de requêtes DOM qui retournent une liste de noeuds directe.
 
-<p>Vous pouvez trouver des exemples et des détails en lisant la documentation sur les méthodes <a href="/fr/docs/Web/API/Element/querySelector" ><code>querySelector()</code></a> et <a href="/fr/docs/Web/API/Element/querySelectorAll" ><code>querySelectorAll()</code></a>, ainsi que dans l'article <a href="/fr/docs/Archive/Add-ons/Code_snippets/QuerySelector" >Extraits de code pour querySelector</a>.</p>
+Vous pouvez trouver des exemples et des détails en lisant la documentation sur les méthodes [`querySelector()`](/fr/docs/Web/API/Element/querySelector) et [`querySelectorAll()`](/fr/docs/Web/API/Element/querySelectorAll), ainsi que dans l'article [Extraits de code pour querySelector](/fr/docs/Archive/Add-ons/Code_snippets/QuerySelector).
 
-<h2 id="Sélecteurs">Sélecteurs</h2>
+## Sélecteurs
 
-<p>Les méthodes de Selector acceptent un ou plusieurs sélecteurs séparés par des virgules pour déterminer les éléments à renvoyer. Par exemple, pour sélectionner tous les éléments paragraphe (<code>p</code>) dans le document dont la classe CSS est soit <code>warning</code> soit <code>note</code>, vous pouvez utiliser ce qui suit :</p>
+Les méthodes de Selector acceptent un ou plusieurs sélecteurs séparés par des virgules pour déterminer les éléments à renvoyer. Par exemple, pour sélectionner tous les éléments paragraphe (`p`) dans le document dont la classe CSS est soit `warning` soit `note`, vous pouvez utiliser ce qui suit :
 
-<pre><code>var special = document.querySelectorAll( "p.warning, p.note" );</code></pre>
+    var special = document.querySelectorAll( "p.warning, p.note" );
 
-<p>Vous pouvez aussi interroger par l'ID (<em>identifiant</em>). Par exemple :</p>
+Vous pouvez aussi interroger par l'ID (_identifiant_). Par exemple :
 
-<pre><code>var el = document.querySelector( "#main, #basic, #exclamation" );</code></pre>
+    var el = document.querySelector( "#main, #basic, #exclamation" );
 
-<p>Après l'exécution du code ci-dessus, <code>el</code> contient le premier élément dans le document dont l'ID est <code>main</code>, <code>basic</code> ou <code>exclamation</code>.</p>
+Après l'exécution du code ci-dessus, `el` contient le premier élément dans le document dont l'ID est `main`, `basic` ou `exclamation`.
 
-<p>Vous pouvez utiliser tous les sélecteurs CSS avec les méthodes <code>querySelector()</code> et <code>querySelectorAll()</code>.</p>
+Vous pouvez utiliser tous les sélecteurs CSS avec les méthodes `querySelector()` et `querySelectorAll()`.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="http://www.w3.org/TR/selectors-api/">API Selectors</a> (en)</li>
- <li><a href="/fr/docs/Web/API/Element/querySelector" ><code>element.querySelector</code></a></li>
- <li><a href="/fr/docs/Web/API/Element/querySelectorAll" ><code>element.querySelectorAll</code></a></li>
- <li><a href="/fr/docs/Web/API/Document/querySelector" ><code>document.querySelector</code></a></li>
- <li><a href="/fr/docs/Web/API/Document/querySelectorAll" ><code>document.querySelectorAll</code></a></li>
- <li><a href="/en-US/docs/Code_snippets/QuerySelector" >Extraits de code pour querySelector</a></li>
-</ul>
+- [API Selectors](http://www.w3.org/TR/selectors-api/) (en)
+- [`element.querySelector`](/fr/docs/Web/API/Element/querySelector)
+- [`element.querySelectorAll`](/fr/docs/Web/API/Element/querySelectorAll)
+- [`document.querySelector`](/fr/docs/Web/API/Document/querySelector)
+- [`document.querySelectorAll`](/fr/docs/Web/API/Document/querySelectorAll)
+- [Extraits de code pour querySelector](/en-US/docs/Code_snippets/QuerySelector)
diff --git a/files/fr/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.md b/files/fr/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.md
index cc245fd99b..78199ae55a 100644
--- a/files/fr/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.md
+++ b/files/fr/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.md
@@ -11,40 +11,39 @@ translation_of: >-
   Web/API/Document_Object_Model/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces
 original_slug: Explorer_un_tableau_HTML_avec_des_interfaces_DOM_et_JavaScript
 ---
-<p> </p>
+## Introduction
 
-<h2 id="Introduction">Introduction</h2>
+Cet article propose une vue d'ensemble de certaines méthodes DOM Level 1 fondamentales et la façon de les utiliser depuis JavaScript. Vous y apprendrez à créer, accéder, contrôler et supprimer dynamiquement des éléments HTML. Les méthodes DOM décrites ne sont pas spécifiques au HTML et s'appliquent également au XML. Les exemples fonctionneront dans tous les navigateurs offrant le support complet du DOM niveau 1, ce qui est le cas de tous les navigateurs basés sur Mozilla comme Firefox ou Netscape. Les morceaux de code de ce document fonctionneront également dans Internet Explorer 5.
 
-<p>Cet article propose une vue d'ensemble de certaines méthodes DOM Level 1 fondamentales et la façon de les utiliser depuis JavaScript. Vous y apprendrez à créer, accéder, contrôler et supprimer dynamiquement des éléments HTML. Les méthodes DOM décrites ne sont pas spécifiques au HTML et s'appliquent également au XML. Les exemples fonctionneront dans tous les navigateurs offrant le support complet du DOM niveau 1, ce qui est le cas de tous les navigateurs basés sur Mozilla comme Firefox ou Netscape. Les morceaux de code de ce document fonctionneront également dans Internet Explorer 5.</p>
+> **Note :**Les méthodes décrites ici font partie de la spécification Document Object Model level 1 (Core). DOM level 1 comprend des méthodes destinées à l'accès et à la manipulation des documents (DOM 1 core) ainsi que des méthodes spécifiques aux documents HTML (DOM 1 HTML).
 
-<div class="note">
-  <p><strong>Note :</strong>Les méthodes décrites ici font partie de la spécification Document Object Model level 1 (Core). DOM level 1 comprend des méthodes destinées à l'accès et à la manipulation des documents (DOM 1 core) ainsi que des méthodes spécifiques aux documents HTML (DOM 1 HTML).</p>
-</div>
+## Exemple: Création d'un tableau HTML dynamiquement (`Sample1.html`)
 
-<h2 id="Overview_of_Sample1.html">Exemple: Création d'un tableau HTML dynamiquement (<code>Sample1.html</code>)</h2>
+### Contenu HTML
 
-<h3 id="Contenu_HTML">Contenu HTML</h3>
+```html
+<input type="button" value="Generate a table." onclick="generate_table()">
+```
 
-<pre class="brush: html">&lt;input type="button" value="Generate a table." onclick="generate_table()"&gt;</pre>
+### Contenu JavaScript
 
-<h3 id="Contenu_JavaScript">Contenu JavaScript</h3>
-
-<pre class="brush: js">function generate_table() {
+```js
+function generate_table() {
   // get the reference for the body
   var body = document.getElementsByTagName("body")[0];
 
-  // creates a &lt;table&gt; element and a &lt;tbody&gt; element
+  // creates a <table> element and a <tbody> element
   var tbl = document.createElement("table");
   var tblBody = document.createElement("tbody");
 
   // creating all cells
-  for (var i = 0; i &lt; 2; i++) {
+  for (var i = 0; i < 2; i++) {
     // creates a table row
     var row = document.createElement("tr");
 
-    for (var j = 0; j &lt; 2; j++) {
-      // Create a &lt;td&gt; element and a text node, make the text
-      // node the contents of the &lt;td&gt;, and put the &lt;td&gt; at
+    for (var j = 0; j < 2; j++) {
+      // Create a <td> element and a text node, make the text
+      // node the contents of the <td>, and put the <td> at
       // the end of the table row
       var cell = document.createElement("td");
       var cellText = document.createTextNode("cell in row "+i+", column "+j);
@@ -56,79 +55,82 @@ original_slug: Explorer_un_tableau_HTML_avec_des_interfaces_DOM_et_JavaScript
     tblBody.appendChild(row);
   }
 
-  // put the &lt;tbody&gt; in the &lt;table&gt;
+  // put the <tbody> in the <table>
   tbl.appendChild(tblBody);
-  // appends &lt;table&gt; into &lt;body&gt;
+  // appends <table> into <body>
   body.appendChild(tbl);
   // sets the border attribute of tbl to 2;
   tbl.setAttribute("border", "2");
-}</pre>
+}
+```
+
+{{ EmbedLiveSample('Overview_of_Sample1.html') }}
+
+Remarquez l'ordre dans lequel les éléments et le nœud texte sont créés :
+
+1.  On crée d'abord l'élément \<table>.
+2.  Ensuite, l'élément \<tbody> qui est un enfant de l'élément \<table>.
+3.  Puis, grâce à une boucle, on crée les éléments \<tr>, qui sont des enfants de l'élément \<tbody>.
+4.  Pour chaque élément \<tr>, on emploie une boucle pour créer les éléments enfants \<td>.
+5.  Enfin pour chaque élément \<td>, on crée le nœud texte contenant le texte de la cellule du tableau.
+
+Après avoir créé les éléments \<table>, \<tbody>, \<tr>, \<td> et le nœud texte, on ajoute chaque objet à son parent dans l'ordre inverse :
+
+1.  On attache d'abord chaque nœud texte à son élément parent \<td> en utilisant
+
+        cell.appendChild(texte);
 
-<p>{{ EmbedLiveSample('Overview_of_Sample1.html') }}</p>
+2.  Ensuite, on lie chaque élément \<td> à son élément \<tr> parent avec
 
-<p>Remarquez l'ordre dans lequel les éléments et le nœud texte sont créés :</p>
+        row.appendChild(cell);
 
-<ol>
- <li>On crée d'abord l'élément &lt;table&gt;.</li>
- <li>Ensuite, l'élément &lt;tbody&gt; qui est un enfant de l'élément &lt;table&gt;.</li>
- <li>Puis, grâce à une boucle, on crée les éléments &lt;tr&gt;, qui sont des enfants de l'élément &lt;tbody&gt;.</li>
- <li>Pour chaque élément &lt;tr&gt;, on emploie une boucle pour créer les éléments enfants &lt;td&gt;.</li>
- <li>Enfin pour chaque élément &lt;td&gt;, on crée le nœud texte contenant le texte de la cellule du tableau.</li>
-</ol>
+3.  Puis chaque \<tr> à son parent \<tbody> avec
 
-<p>Après avoir créé les éléments &lt;table&gt;, &lt;tbody&gt;, &lt;tr&gt;, &lt;td&gt; et le nœud texte, on ajoute chaque objet à son parent dans l'ordre inverse :</p>
+        tablebody.appendChild(row);
 
-<ol>
- <li>On attache d'abord chaque nœud texte à son élément parent &lt;td&gt; en utilisant
-  <pre>cell.appendChild(texte);</pre>
- </li>
- <li>Ensuite, on lie chaque élément &lt;td&gt; à son élément &lt;tr&gt; parent avec
-  <pre>row.appendChild(cell);</pre>
- </li>
- <li>Puis chaque &lt;tr&gt; à son parent &lt;tbody&gt; avec
-  <pre>tablebody.appendChild(row);</pre>
- </li>
- <li>Puis l'élément &lt;tbody&gt; est attaché à son élément parent &lt;table&gt; grace à
-  <pre>table.appendChild(tablebody);</pre>
- </li>
- <li>Enfin, &lt;table&gt; est rattaché à &lt;body&gt; avec
-  <pre>body.appendChild(table);</pre>
- </li>
-</ol>
+4.  Puis l'élément \<tbody> est attaché à son élément parent \<table> grace à
 
-<p>Souvenez-vous de cette technique, vous l'utiliserez souvent en programmant pour le DOM W3C. On crée d'abord les éléments du haut vers le bas, puis on attache les enfants aux parents dans l'ordre inverse.</p>
+        table.appendChild(tablebody);
+
+5.  Enfin, \<table> est rattaché à \<body> avec
+
+        body.appendChild(table);
 
-<p>Voici l'HTML généré par ce code JavaScript :</p>
+Souvenez-vous de cette technique, vous l'utiliserez souvent en programmant pour le DOM W3C. On crée d'abord les éléments du haut vers le bas, puis on attache les enfants aux parents dans l'ordre inverse.
 
-<pre>...
-&lt;table border="2"&gt;
-&lt;tr&gt;&lt;td&gt;la cellule est ligne 0 colonne 0&lt;/td&gt;&lt;td&gt;la cellule est ligne 0 colonne 1&lt;/td&gt;&lt;/tr&gt;
-&lt;tr&gt;&lt;td&gt;la cellule est ligne 1 colonne 0&lt;/td&gt;&lt;td&gt;la cellule est ligne 1 colonne 1&lt;/td&gt;&lt;/tr&gt;
-&lt;/table&gt;
-...
-</pre>
+Voici l'HTML généré par ce code JavaScript :
 
-<p>Voici l'arborescence objet DOM créée par le code, pour l'élément TABLE et ses enfants :</p>
+    ...
+    <table border="2">
+    <tr><td>la cellule est ligne 0 colonne 0</td><td>la cellule est ligne 0 colonne 1</td></tr>
+    <tr><td>la cellule est ligne 1 colonne 0</td><td>la cellule est ligne 1 colonne 1</td></tr>
+    </table>
+    ...
 
-<p><img src="sample1-tabledom.jpg"></p>
+Voici l'arborescence objet DOM créée par le code, pour l'élément TABLE et ses enfants :
 
-<p>Vous pouvez construire ce tableau ainsi que ses éléments enfants internes en utilisant juste quelques méthodes DOM. Conservez à l'esprit le modèle en arbre des structures que vous comptez créer, cela rendra plus facile l'écriture du code nécessaire. Dans l'arbre &lt;table&gt; de la figure 1, l'élément &lt;table&gt; a un enfant, l'élément &lt;tbody&gt;, qui lui-même a deux enfants &lt;tr&gt;, qui à leur tour ont chacun un enfant &lt;td&gt;. Enfin, chacun de ces éléments &lt;td&gt; a un enfant, un nœud texte.</p>
+![](sample1-tabledom.jpg)
 
-<h2 id="M.C3.A9thodes_DOM_fondamentales_-_Exemple2.html">Exemple : Définition de la couleur d'arrière-plan d'un paragraphe</h2>
+Vous pouvez construire ce tableau ainsi que ses éléments enfants internes en utilisant juste quelques méthodes DOM. Conservez à l'esprit le modèle en arbre des structures que vous comptez créer, cela rendra plus facile l'écriture du code nécessaire. Dans l'arbre \<table> de la figure 1, l'élément \<table> a un enfant, l'élément \<tbody>, qui lui-même a deux enfants \<tr>, qui à leur tour ont chacun un enfant \<td>. Enfin, chacun de ces éléments \<td> a un enfant, un nœud texte.
 
-<p><code>getElementsByTagName</code> est à la fois une méthode de l'interface Document et de l'interface Element. Lorsqu'il est appelé, il renvoie un tableau avec tous les descendants de l'élément correspondant au nom de l'étiquette. Le premier élément de la liste se trouve à la position [0] dans le tableau.</p>
+## Exemple : Définition de la couleur d'arrière-plan d'un paragraphe
 
-<h3 id="Contenu_HTML_2">Contenu HTML</h3>
+`getElementsByTagName` est à la fois une méthode de l'interface Document et de l'interface Element. Lorsqu'il est appelé, il renvoie un tableau avec tous les descendants de l'élément correspondant au nom de l'étiquette. Le premier élément de la liste se trouve à la position \[0] dans le tableau.
 
-<pre class="brush: html">&lt;body&gt;
-  &lt;input type="button" value="Set paragraph background color" onclick="set_background()"&gt;
-  &lt;p&gt;hi&lt;/p&gt;
-  &lt;p&gt;hello&lt;/p&gt;
-&lt;/body&gt;</pre>
+### Contenu HTML
 
-<h3 id="Contenu_JavaScript_2">Contenu JavaScript</h3>
+```html
+<body>
+  <input type="button" value="Set paragraph background color" onclick="set_background()">
+  <p>hi</p>
+  <p>hello</p>
+</body>
+```
 
-<pre class="brush: js">function set_background() {
+### Contenu JavaScript
+
+```js
+function set_background() {
   // récupère une liste de tous les éléments body (il n'y en aura qu'un),
   // et sélectionne le premier (indice 0) de ces éléments
   myBody = document.getElementsByTagName("body")[0];
@@ -139,160 +141,160 @@ original_slug: Explorer_un_tableau_HTML_avec_des_interfaces_DOM_et_JavaScript
   // récupère le second élément de cette liste d'éléments p
   myP = myBodyElements[1];
   myP.style.background = "rgb(255,0,0)";
-}</pre>
+}
+```
+
+{{ EmbedLiveSample('Setting_background_of_a_paragraph') }}
+
+Dans cet exemple, on assigne à la variable `myP` l'objet DOM du second élément `p` du corps (body).
 
-<p>{{ EmbedLiveSample('Setting_background_of_a_paragraph') }}</p>
+1.  On récupère d'abord une liste de tous les éléments body avec
 
-<p>Dans cet exemple, on assigne à la variable <code>myP</code> l'objet DOM du second élément <code>p</code> du corps (body).</p>
+    ```html
+    myBody = document.getElementsByTagName("body")[0]
+    ```
 
-<ol>
- <li>On récupère d'abord une liste de tous les éléments body avec
-  <pre class="brush:html">myBody = document.getElementsByTagName("body")[0]</pre>
-  Puisqu'il n'existe qu'un seul élément body dans un document HTML valide, cette liste ne comporte qu'un élément, que l'on récupère en sélectionnant le premier élément de la liste grace à <code>{{mediawiki.external(0)}}</code>.</li>
- <li>Ensuite, on récupère tous les éléments p qui sont des enfants de body en utilisant
-  <pre class="brush:html">myBodyElements = myBody.getElementsByTagName("p");</pre>
- </li>
- <li>Pour finir on prend le deuxième élément de la liste des éléments p avec
-  <pre class="brush:html">myP = myBodyElements[1];</pre>
- </li>
-</ol>
+    Puisqu'il n'existe qu'un seul élément body dans un document HTML valide, cette liste ne comporte qu'un élément, que l'on récupère en sélectionnant le premier élément de la liste grace à `{{mediawiki.external(0)}}`.
 
-<p><img src="sample2a2.jpg"></p>
+2.  Ensuite, on récupère tous les éléments p qui sont des enfants de body en utilisant
 
-<p>Une fois que vous avez l'objet DOM pour un élément HTML, vous pouvez modifier ses propriétés. Si par exemple vous voulez définir la propriété couleur d'arrière-plan du style, ajoutez simplement :</p>
+    ```html
+    myBodyElements = myBody.getElementsByTagName("p");
+    ```
 
-<pre class="eval">myP.style.background = "rgb(255,0,0)";
-// ajoute une propriété de style inline
-</pre>
+3.  Pour finir on prend le deuxième élément de la liste des éléments p avec
 
-<h3 id="Cr.C3.A9ation_de_n.C5.93uds_texte_avec_document.createTextNode.28.22...22.29">Création de nœuds texte avec <code>document.createTextNode("..")</code></h3>
+    ```html
+    myP = myBodyElements[1];
+    ```
 
-<p>Employez l'objet <code>document</code> pour appeler la méthode <code>createTextNode</code> et créer un nœud texte. Il suffit de lui communiquer le contenu texte, et la valeur renvoyée est un objet représentant le nœud texte.</p>
+![](sample2a2.jpg)
 
-<pre class="brush:html">myTextNode = document.createTextNode("world");</pre>
+Une fois que vous avez l'objet DOM pour un élément HTML, vous pouvez modifier ses propriétés. Si par exemple vous voulez définir la propriété couleur d'arrière-plan du style, ajoutez simplement :
 
-<p>Ce morceau de code crée un nœud de type TEXT_NODE qui contient la donnée texte <code>"world"</code>, et <code>monNoeudTexte</code> est la référence de l'objet nœud créé. Pour afficher ce texte sur votre page HTML, vous devez ensuite définir ce nœud texte comme l'enfant d'un autre élément nœud.</p>
+    myP.style.background = "rgb(255,0,0)";
+    // ajoute une propriété de style inline
 
-<h3 id="Insertion_d.27.C3.A9l.C3.A9ments_avec_appendChild.28....29">Insertion d'éléments avec appendChild(...)</h3>
+### Création de nœuds texte avec `document.createTextNode("..")`
 
-<p>En invoquant <code>myP.appendChild</code> ({{mediawiki.external('node_element')}}) , vous définissez <code>element_nœud</code> comme un nouvel enfant du second élément <code>p</code> (<code>myP</code> a été défini plus haut comme étant le second élément p).</p>
+Employez l'objet `document` pour appeler la méthode `createTextNode` et créer un nœud texte. Il suffit de lui communiquer le contenu texte, et la valeur renvoyée est un objet représentant le nœud texte.
 
-<pre class="eval">myP.appendChild(noeudTexte);
-</pre>
+```html
+myTextNode = document.createTextNode("world");
+```
 
-<p>En exécutant cet exemple, vous pouvez remarquer que les mots « hello » et « world » ne sont pas séparés : <code>helloworld</code>. Quand vous parcourez la page HTML les deux nœuds semblent donc n'en former qu'un seul, rappelez-vous cependant qu'ils sont bien distincts dans le modèle de document. Le second nœud est de type TEXT_NODE, et est le second enfant de la seconde balise &lt;p&gt;. Le schéma suivant situe ce nouvel objet dans l'arborescence du document :</p>
+Ce morceau de code crée un nœud de type TEXT_NODE qui contient la donnée texte `"world"`, et `monNoeudTexte` est la référence de l'objet nœud créé. Pour afficher ce texte sur votre page HTML, vous devez ensuite définir ce nœud texte comme l'enfant d'un autre élément nœud.
 
-<p><img src="sample2b2.jpg"></p>
+### Insertion d'éléments avec appendChild(...)
 
-<div class="note">
-  <p><strong>Note :</strong>L'utilisation de <code>createTextNode</code> et de <code>appendChild</code> permet aisément d'ajouter un espace entre ces deux mots. Notez cependant que la méthode <code>appendChild</code> ajoute le nouvel enfant à la suite de ceux déjà présents, à la manière de « world » placé après « hello ». Pour ajouter un nœud texte entre « hello » et « world » (par exemple un espace), utilisez <code>insertBefore</code> à la place de <code>appendChild</code>.</p>
-</div>
+En invoquant `myP.appendChild` ({{mediawiki.external('node_element')}}) , vous définissez `element_nœud` comme un nouvel enfant du second élément `p` (`myP` a été défini plus haut comme étant le second élément p).
 
-<h3 id="Cr.C3.A9ation_de_nouveaux_.C3.A9l.C3.A9ments_avec_l.27objet_document_et_la_m.C3.A9thode_createElement.28....29">Création de nouveaux éléments avec l'objet document et la méthode <code>createElement(...)</code></h3>
+    myP.appendChild(noeudTexte);
 
-<p>Vous pouvez créer de nouveaux éléments, dont des éléments HTML, avec <code>createElement</code>. Pour créer un élément &lt;p&gt; enfant de l'élément &lt;body&gt;, vous pouvez vous servir de <code>body</code> défini dans l'exemple précédent et lui greffer un nouvel élément nœud. Pour ce faire, invoquez <code>document.createElement("nombalise")</code>. Voici un exemple :</p>
+En exécutant cet exemple, vous pouvez remarquer que les mots « hello » et « world » ne sont pas séparés : `helloworld`. Quand vous parcourez la page HTML les deux nœuds semblent donc n'en former qu'un seul, rappelez-vous cependant qu'ils sont bien distincts dans le modèle de document. Le second nœud est de type TEXT_NODE, et est le second enfant de la seconde balise \<p>. Le schéma suivant situe ce nouvel objet dans l'arborescence du document :
 
-<pre class="eval">nouveauNoeudBALISEP = document.createElement("p");
-body.appendChild(nouveauNoeudBALISEP);
-</pre>
+![](sample2b2.jpg)
 
-<p><img src="sample2c.jpg"></p>
+> **Note :**L'utilisation de `createTextNode` et de `appendChild` permet aisément d'ajouter un espace entre ces deux mots. Notez cependant que la méthode `appendChild` ajoute le nouvel enfant à la suite de ceux déjà présents, à la manière de « world » placé après « hello ». Pour ajouter un nœud texte entre « hello » et « world » (par exemple un espace), utilisez `insertBefore` à la place de `appendChild`.
 
-<h3 id="Suppression_de_n.C5.93uds_avec_la_m.C3.A9thode_removeChild.28....29">Suppression de nœuds avec la méthode <code>removeChild(...)</code></h3>
+### Création de nouveaux éléments avec l'objet document et la méthode `createElement(...)`
 
-<p>Tous les nœuds peuvent être supprimés. La ligne ci-dessous supprime de <code>myP</code> (deuxième élément &lt;p&gt;) le nœud texte contenant le mot « world » :</p>
+Vous pouvez créer de nouveaux éléments, dont des éléments HTML, avec `createElement`. Pour créer un élément \<p> enfant de l'élément \<body>, vous pouvez vous servir de `body` défini dans l'exemple précédent et lui greffer un nouvel élément nœud. Pour ce faire, invoquez `document.createElement("nombalise")`. Voici un exemple :
 
-<pre class="eval">myP.removeChild(noeudTexte);
-</pre>
+    nouveauNoeudBALISEP = document.createElement("p");
+    body.appendChild(nouveauNoeudBALISEP);
 
-<p>Vous pouvez ensuite ajouter <code>monNoeudTexte</code> (contenant <code>"world"</code>) dans l'élément &lt;p&gt; récemment créé :</p>
+![](sample2c.jpg)
 
-<pre class="eval">nouveauNoeudBALISEP.appendChild(noeudTexte);
-</pre>
+### Suppression de nœuds avec la méthode `removeChild(...)`
 
-<p>L'arborescence des objets se présente désormais comme ceci :</p>
+Tous les nœuds peuvent être supprimés. La ligne ci-dessous supprime de `myP` (deuxième élément \<p>) le nœud texte contenant le mot « world » :
 
-<p><img src="sample2d.jpg"></p>
+    myP.removeChild(noeudTexte);
 
-<h2 id="Cr.C3.A9ation_dynamique_d.27un_tableau_.28Exemple1.html.29">Création dynamique d'un tableau (retour à Sample1.html)</h2>
+Vous pouvez ensuite ajouter `monNoeudTexte` (contenant `"world"`) dans l'élément \<p> récemment créé :
 
-<p>Jusqu'à la fin de cet article, nous travaillons de nouveau sur Exemple1.html. Le schéma qui suit vous rappelle la structure de l'arbre des objets pour le tableau créé dans l'exemple.</p>
+    nouveauNoeudBALISEP.appendChild(noeudTexte);
 
-<h3 id="Rappel_de_la_structure_arborescente_d.27un_tableau_HTML">Rappel de la structure arborescente d'un tableau HTML</h3>
+L'arborescence des objets se présente désormais comme ceci :
 
-<p><img src="sample1-tabledom.jpg"></p>
+![](sample2d.jpg)
 
-<h3 id="Cr.C3.A9ation_et_insertion_des_.C3.A9l.C3.A9ments_dans_l.27arborescence">Création et insertion des éléments dans l'arborescence</h3>
+## Création dynamique d'un tableau (retour à Sample1.html)
 
-<p>On peut décomposer la création du tableau de Exemple1.html en trois étapes :</p>
+Jusqu'à la fin de cet article, nous travaillons de nouveau sur Exemple1.html. Le schéma qui suit vous rappelle la structure de l'arbre des objets pour le tableau créé dans l'exemple.
 
-<ul>
- <li>Récupérer l'objet body (c'est le premier élément de l'objet document).</li>
- <li>Créer tous les éléments.</li>
- <li>Greffer chaque enfant sur son parent en respectant la structure du tableau (cf. le schéma ci-dessus).</li>
-</ul>
+### Rappel de la structure arborescente d'un tableau HTML
 
-<p>Le code source qui suit est un exemple commenté qui crée le tableau de Exemple1.</p>
+![](sample1-tabledom.jpg)
 
-<div class="note">
-  <p><strong>Note :</strong> Il y a une ligne de code supplémentaire à la fin de la fonction <code>start()</code>, qui définit la propriété bordure du tableau en employant la méthode <code>setAttribute</code>. <code>setAttribute</code> utilise deux arguments : le nom de l'attribut et sa valeur, et permet de définir n'importe quelle propriété de n'importe quel élément.</p>
-</div>
+### Création et insertion des éléments dans l'arborescence
 
-<pre class="brush: html">&lt;head&gt;
-&lt;title&gt;Code de démonstration - Explorer un tableau HTML avec des interfaces DOM et JavaScript&lt;/title&gt;
-&lt;script&gt;
+On peut décomposer la création du tableau de Exemple1.html en trois étapes :
+
+- Récupérer l'objet body (c'est le premier élément de l'objet document).
+- Créer tous les éléments.
+- Greffer chaque enfant sur son parent en respectant la structure du tableau (cf. le schéma ci-dessus).
+
+Le code source qui suit est un exemple commenté qui crée le tableau de Exemple1.
+
+> **Note :** Il y a une ligne de code supplémentaire à la fin de la fonction `start()`, qui définit la propriété bordure du tableau en employant la méthode `setAttribute`. `setAttribute` utilise deux arguments : le nom de l'attribut et sa valeur, et permet de définir n'importe quelle propriété de n'importe quel élément.
+
+```html
+<head>
+<title>Code de démonstration - Explorer un tableau HTML avec des interfaces DOM et JavaScript</title>
+<script>
     function start() {
         // récupère une référence vers l'élément body
         var body = document.getElementsByTagName("body")[0];
 
-        // création des éléments &lt;table&gt; et &lt;tbody&gt;
+        // création des éléments <table> et <tbody>
         table     = document.createElement("table");
         tablebody = document.createElement("tbody");
 
         // création des cellules
-        for(var j = 0; j &lt; 2; j++) {
-            // création d'un élément &lt;tr&gt;
+        for(var j = 0; j < 2; j++) {
+            // création d'un élément <tr>
             row = document.createElement("tr");
 
-            for(var i = 0; i &lt; 2; i++) {
-                // création d'un élément &lt;td&gt;
+            for(var i = 0; i < 2; i++) {
+                // création d'un élément <td>
                 cell = document.createElement("td");
                 // création d'un nœud texte
                 texte = document.createTextNode("la cellule est ligne " + j + ", colonne " + i);
-                // ajoute le nœud texte créé à la cellule &lt;td&gt;
+                // ajoute le nœud texte créé à la cellule <td>
                 cell.appendChild(texte);
-                // ajoute la cellule &lt;td&gt; à la ligne &lt;tr&gt;
+                // ajoute la cellule <td> à la ligne <tr>
                 row.appendChild(cell);
             }
-            // ajoute la ligne &lt;tr&gt; à l'élément &lt;tbody&gt;
+            // ajoute la ligne <tr> à l'élément <tbody>
             tablebody.appendChild(row);
         }
 
-        // ajoute &lt;tbody&gt; à l'élément &lt;table&gt;
+        // ajoute <tbody> à l'élément <table>
         table.appendChild(tablebody);
-        // ajoute &lt;table&gt; à l'élément &lt;body&gt;
+        // ajoute <table> à l'élément <body>
         body.appendChild(table);
         // définit l'attribut border de table à 2;
         table.setAttribute("border", "2");
     }
-&lt;/script&gt;
-&lt;/head&gt;
-&lt;body onload="start()"&gt;
-&lt;/body&gt;
-&lt;/html&gt;
-</pre>
+</script>
+</head>
+<body onload="start()">
+</body>
+</html>
+```
 
-<h2 id="Manipulation_du_tableau_avec_DOM_et_CSS">Manipulation du tableau avec DOM et CSS</h2>
+## Manipulation du tableau avec DOM et CSS
 
-<h3 id="R.C3.A9cup.C3.A9rer_un_n.C5.93ud_texte_dans_le_tableau">Récupérer un nœud texte dans le tableau</h3>
+### Récupérer un nœud texte dans le tableau
 
-<p>Cet exemple présente deux nouveaux attributs DOM. D'abord, l'attribut <code>childNodes</code> qui est utilisé pour récupérer la liste des nœuds enfants de <code>cel</code>. A la différence de <code>getElementsByTagName</code>, la liste renvoyée par <code>childNodes</code> comporte tous les enfants sans considération de type. Une fois la liste obtenue, la méthode <code>{{ mediawiki.external('x') }}</code> est employée pour sélectionner l'élément enfant désiré. Dans cet exemple, le nœud texte de la seconde cellule de la seconde ligne du tableau est enregistré dans <code>celtext</code>. Ensuite, un nouveau nœud texte contenant les données de <code>celtext</code> est greffé en tant qu'enfant sur l'élément &lt;body&gt;.</p>
+Cet exemple présente deux nouveaux attributs DOM. D'abord, l'attribut `childNodes` qui est utilisé pour récupérer la liste des nœuds enfants de `cel`. A la différence de `getElementsByTagName`, la liste renvoyée par `childNodes` comporte tous les enfants sans considération de type. Une fois la liste obtenue, la méthode `{{ mediawiki.external('x') }}` est employée pour sélectionner l'élément enfant désiré. Dans cet exemple, le nœud texte de la seconde cellule de la seconde ligne du tableau est enregistré dans `celtext`. Ensuite, un nouveau nœud texte contenant les données de `celtext` est greffé en tant qu'enfant sur l'élément \<body>.
 
-<div class="note">
-  <p><strong>Note :</strong> Si l'objet est un nœud texte, vous pouvez récupérer le texte qu'il contient en employant l'attribut <code>data</code>.</p>
-</div>
+> **Note :** Si l'objet est un nœud texte, vous pouvez récupérer le texte qu'il contient en employant l'attribut `data`.
 
-<pre class="brush:js">mybody = document.getElementsByTagName("body")[0];
+```js
+mybody = document.getElementsByTagName("body")[0];
 mytable = mybody.getElementsByTagName("table")[0];
 mytablebody = mytable.getElementsByTagName("tbody")[0];
 myrow = mytablebody.getElementsByTagName("tr")[1];
@@ -303,59 +305,58 @@ myceltext=mycel.childNodes[0];
 
 //  contenu de currenttext est le contenu des données de myceltext
 currenttext=document.createTextNode(myceltext.data);
-mybody.appendChild(currenttext);</pre>
-
-<h3 id="R.C3.A9cup.C3.A9rer_la_valeur_d.27un_attribut">Récupérer la valeur d'un attribut</h3>
-
-<p>A la fin d'Exemple1, l'appel à <code>setAttribute</code> sur l'objet <code>table</code> définit la propriété <code>border</code> du tableau. Si vous désirez simplement récupérez la valeur de cet attribut, vous pouvez employer la méthode <code>getAttribute</code> :</p>
-
-<pre class="brush:html">mytable.getAttribute("border");</pre>
-
-<h3 id="Cacher_une_colonne_en_changeant_les_propri.C3.A9t.C3.A9s_de_style">Cacher une colonne en changeant les propriétés de style</h3>
-
-<p>Une fois que vous avez l'objet dans une variable JavaScript, vous pouvez définir les propriétés directement. Le code qui suit est une version modifiée de Exemple1.html où les cellules de la seconde colonne sont cachées, et le fond de celles de la première colonne est rouge. Remarquez que la propriété de style y est définie directement.</p>
-
-<pre>&lt;html&gt;
-&lt;body onload="start()"&gt;
-&lt;/body&gt;
-&lt;script&gt;
-    function start() {
-       var body  = document.getElementsByTagName("body")[0];
-       table     = document.createElement("table");
-       tablebody = document.createElement("tbody");
-
-       for(var j = 0; j &lt; 2; j++) {
-           row = document.createElement("tr");
-           for(var i = 0; i &lt; 2; i++) {
-               cell = document.createElement("td");
-               text = document.createTextNode("la cellule est :" + i + j);
-               cell.appendChild(text);
-               row.appendChild(cell);
-               // change la couleur de fond de la cellule
-               // si la colonne est 0. Si la colonne est 1, cache la cellule
-               if (i == 0) {
-                   cell.style.background = "rgb(255,0,0)";
-               } else {
-                   cell.style.display = "none";
+mybody.appendChild(currenttext);
+```
+
+### Récupérer la valeur d'un attribut
+
+A la fin d'Exemple1, l'appel à `setAttribute` sur l'objet `table` définit la propriété `border` du tableau. Si vous désirez simplement récupérez la valeur de cet attribut, vous pouvez employer la méthode `getAttribute` :
+
+```html
+mytable.getAttribute("border");
+```
+
+### Cacher une colonne en changeant les propriétés de style
+
+Une fois que vous avez l'objet dans une variable JavaScript, vous pouvez définir les propriétés directement. Le code qui suit est une version modifiée de Exemple1.html où les cellules de la seconde colonne sont cachées, et le fond de celles de la première colonne est rouge. Remarquez que la propriété de style y est définie directement.
+
+    <html>
+    <body onload="start()">
+    </body>
+    <script>
+        function start() {
+           var body  = document.getElementsByTagName("body")[0];
+           table     = document.createElement("table");
+           tablebody = document.createElement("tbody");
+
+           for(var j = 0; j < 2; j++) {
+               row = document.createElement("tr");
+               for(var i = 0; i < 2; i++) {
+                   cell = document.createElement("td");
+                   text = document.createTextNode("la cellule est :" + i + j);
+                   cell.appendChild(text);
+                   row.appendChild(cell);
+                   // change la couleur de fond de la cellule
+                   // si la colonne est 0. Si la colonne est 1, cache la cellule
+                   if (i == 0) {
+                       cell.style.background = "rgb(255,0,0)";
+                   } else {
+                       cell.style.display = "none";
+                   }
                }
+               tablebody.appendChild(row);
            }
-           tablebody.appendChild(row);
-       }
-       table.appendChild(tablebody);
-       body.appendChild(table);
-    }
-&lt;/script&gt;
-&lt;/html&gt;
-</pre>
+           table.appendChild(tablebody);
+           body.appendChild(table);
+        }
+    </script>
+    </html>
 
-<h4 id="Original_Document_Information">Original Document Information</h4>
+#### Original Document Information
 
-<dl>
- <dt>Author(s)</dt>
- <dd>Marcio Galli</dd>
- <dt>Migrated from</dt>
- <dd>http://web.archive.org/web/20000815054125/http://mozilla.org/docs/dom/technote/tn-dom-table/</dd>
-</dl>
+- Author(s)
+  - : Marcio Galli
+- Migrated from
+  - : http\://web.archive.org/web/20000815054125/http\://mozilla.org/docs/dom/technote/tn-dom-table/
 
-<p><br>
- Interwik</p>
+Interwik
diff --git a/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/example/index.md b/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/example/index.md
index e4298a2055..c2d92e9281 100644
--- a/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/example/index.md
+++ b/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/example/index.md
@@ -9,16 +9,16 @@ tags:
 translation_of: Web/API/Document_object_model/Using_the_W3C_DOM_Level_1_Core/Example
 original_slug: Web/API/Document_object_model/Utilisation_du_DOM_Level_1_Core_du_W3C/Exemple
 ---
-
-<pre class="brush: html"> &lt;html&gt;
- &lt;head&gt;
-   &lt;title&gt;Mon Document&lt;/title&gt;
-   &lt;script type="text/javascript"&gt;
+```html
+ <html>
+ <head>
+   <title>Mon Document</title>
+   <script type="text/javascript">
    function change() {
-     // document.getElementsByTagName("H1") renvoie une NodeList (<em>liste de noeuds</em>) de h1
+     // document.getElementsByTagName("H1") renvoie une NodeList (liste de noeuds) de h1
      // les éléments dans le document dont le premier a le numéro 0 :
      var header = document.getElementsByTagName("H1").item(0);
-     // le firstChild (<em>premier enfant</em>) de l'en-tête est un noeud Texte :
+     // le firstChild (premier enfant) de l'en-tête est un noeud Texte :
      header.firstChild.data = "Un document dynamique";
      // maintenant l'en-tête est "Un document dynamique".
      var para = document.getElementsByTagName("P").item(0);
@@ -30,15 +30,15 @@ original_slug: Web/API/Document_object_model/Utilisation_du_DOM_Level_1_Core_du_
      // placer le texte dans le paragraphe
      newElement.appendChild(newText);
      // et placer le paragraphe à la fin du document par son ajout
-     // le BODY (<em>corps</em>) (qui est le parent de para)
+     // le BODY (corps) (qui est le parent de para)
      para.parentNode.appendChild(newElement);
    }
-   &lt;/script&gt;
- &lt;/head&gt;
- &lt;body&gt;
-   &lt;input type="button" value="Modifier ce document." onclick="change()"&gt;
-   &lt;h1&gt;Header&lt;/h1&gt;
-   &lt;p&gt;Paragraph&lt;/p&gt;
- &lt;/body&gt;
- &lt;/head&gt;
-</pre>
+   </script>
+ </head>
+ <body>
+   <input type="button" value="Modifier ce document." onclick="change()">
+   <h1>Header</h1>
+   <p>Paragraph</p>
+ </body>
+ </head>
+```
diff --git a/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.md b/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.md
index c59fe45427..0348ed4df2 100644
--- a/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.md
+++ b/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.md
@@ -9,49 +9,51 @@ tags:
 translation_of: Web/API/Document_object_model/Using_the_W3C_DOM_Level_1_Core
 original_slug: Web/API/Document_object_model/Utilisation_du_DOM_Level_1_Core_du_W3C
 ---
-<p>Le DOM Level 1 Core du W3C est un modèle objet puissant permettant de modifier l'arbre de contenu de documents. Il est géré dans Mozilla (sur lequel Firefox et Netscape sont basés) et (pour la plus grande partie) dans Internet Explorer 5 pour Windows. Il s'agit d'une base essentielle du scripting sur le Web dans l'avenir.</p>
+Le DOM Level 1 Core du W3C est un modèle objet puissant permettant de modifier l'arbre de contenu de documents. Il est géré dans Mozilla (sur lequel Firefox et Netscape sont basés) et (pour la plus grande partie) dans Internet Explorer 5 pour Windows. Il s'agit d'une base essentielle du scripting sur le Web dans l'avenir.
 
-<h2 id="D.C3.A9finition_d.27un_arbre_de_contenu">Définition d'un arbre de contenu</h2>
+## Définition d'un arbre de contenu
 
-<p>Beaucoup d'auteurs HTML peuvent penser qu'HTML est quelque chose de plat — un gros amas de texte avec quelques balises au milieu. Cependant, c'est aussi beaucoup plus que ça. Tout document HTML (ou, par ailleurs, tout document SGML ou XML) forme une structure arborescente. Par exemple, le document et la structure arborescente qui suivent sont similaires (bien que non identiques — consultez les notes sur <a href="/fr/docs/Gestion_des_espaces_dans_le_DOM">les espaces dans le DOM</a>) :</p>
+Beaucoup d'auteurs HTML peuvent penser qu'HTML est quelque chose de plat — un gros amas de texte avec quelques balises au milieu. Cependant, c'est aussi beaucoup plus que ça. Tout document HTML (ou, par ailleurs, tout document SGML ou XML) forme une structure arborescente. Par exemple, le document et la structure arborescente qui suivent sont similaires (bien que non identiques — consultez les notes sur [les espaces dans le DOM](/fr/docs/Gestion_des_espaces_dans_le_DOM)) :
 
-<pre class="eval">&lt;html&gt;
-&lt;head&gt;
-  &lt;title&gt;Mon document&lt;/title&gt;
-&lt;/head&gt;
-&lt;body&gt;
-  &lt;h1&gt;Titre&lt;/h1&gt;
-  &lt;p&gt;Paragraphe&lt;/p&gt;
-&lt;/body&gt;
-&lt;/html&gt;
-</pre>
+    <html>
+    <head>
+      <title>Mon document</title>
+    </head>
+    <body>
+      <h1>Titre</h1>
+      <p>Paragraphe</p>
+    </body>
+    </html>
 
-<p><img src="using_the_w3c_dom_level_1_core-doctree.jpg"></p>
+![](using_the_w3c_dom_level_1_core-doctree.jpg)
 
-<p>Lorsque Mozilla examine un document, un arbre de contenu est construit et ensuite utilisé pour l'affichage.</p>
+Lorsque Mozilla examine un document, un arbre de contenu est construit et ensuite utilisé pour l'affichage.
 
-<p>Les termes utilisés pour décrire des arbres apparaissent souvent dans le DOM Level 1 Core. Chacune des boîtes dessinées dans l'arbre ci-dessus est un nœud dans l'arbre. La ligne au dessus d'un nœud représente une relation parent-enfant : le nœud supérieur est le parent, et le nœud inférieur est l'enfant. Deux enfants du même parent sont par conséquent des frères du même niveau. De même, on peut se référer à des ancêtres et des descendants. (Parler de cousins devient un peu compliqué par contre.)</p>
+Les termes utilisés pour décrire des arbres apparaissent souvent dans le DOM Level 1 Core. Chacune des boîtes dessinées dans l'arbre ci-dessus est un nœud dans l'arbre. La ligne au dessus d'un nœud représente une relation parent-enfant : le nœud supérieur est le parent, et le nœud inférieur est l'enfant. Deux enfants du même parent sont par conséquent des frères du même niveau. De même, on peut se référer à des ancêtres et des descendants. (Parler de cousins devient un peu compliqué par contre.)
 
-<h2 id="Ce_que_permet_le_DOM_Level_1_Core">Ce que permet le DOM Level 1 Core</h2>
+## Ce que permet le DOM Level 1 Core
 
-<p>Le DOM Level 1 permet de modifier l'arbre du contenu<em>selon vos désirs</em>. Il est suffisamment puissant pour construire n'importe quel document HTML depuis rien. Il permet aux auteurs de modifier quoi que ce soit dans le document, depuis un script, à n'importe quel moment. La manière la plus simple pour les auteurs de pages Web de modifier le DOM dynamiquement est d'utiliser JavaScript. En JavaScript, le document est accessible de la même manière qu'il l'était dans les navigateurs plus anciens : depuis la propriété <code>document</code> de l'objet global. Cet objet <code>document</code> implémente l'<a href="http://xmlfr.org/w3c/TR/REC-DOM-Level-1/level-one-core.html#i-Document">interface Document</a> de la spécification DOM Level 1 du W3C.</p>
+Le DOM Level 1 permet de modifier l'arbre du contenu*selon vos désirs*. Il est suffisamment puissant pour construire n'importe quel document HTML depuis rien. Il permet aux auteurs de modifier quoi que ce soit dans le document, depuis un script, à n'importe quel moment. La manière la plus simple pour les auteurs de pages Web de modifier le DOM dynamiquement est d'utiliser JavaScript. En JavaScript, le document est accessible de la même manière qu'il l'était dans les navigateurs plus anciens : depuis la propriété `document` de l'objet global. Cet objet `document` implémente l'[interface Document](http://xmlfr.org/w3c/TR/REC-DOM-Level-1/level-one-core.html#i-Document) de la spécification DOM Level 1 du W3C.
 
-<h2 id="Un_exemple_simple">Un exemple simple</h2>
+## Un exemple simple
 
-<p>Supposons que l'auteur désire prendre le document présenté plus haut et changer le contenu du titre, ainsi qu'écrire deux paragraphes plutôt qu'un seul. Le script suivant le permettrait :</p>
+Supposons que l'auteur désire prendre le document présenté plus haut et changer le contenu du titre, ainsi qu'écrire deux paragraphes plutôt qu'un seul. Le script suivant le permettrait :
 
-<h3 id="Contenu_HTML">Contenu HTML</h3>
+### Contenu HTML
 
-<pre class="brush: html">&lt;body&gt;
-&lt;input type="button" value="Change this document." onclick="change()"&gt;
-&lt;h2&gt;Header&lt;/h2&gt;
-&lt;p&gt;Paragraph&lt;/p&gt;
-&lt;/body&gt;</pre>
+```html
+<body>
+<input type="button" value="Change this document." onclick="change()">
+<h2>Header</h2>
+<p>Paragraph</p>
+</body>
+```
 
-<h3 id="Contenu_JavaScript">Contenu JavaScript</h3>
+### Contenu JavaScript
 
-<pre class="brush: js">  function change() {
-    // document.getElementsByTagName ("H2") renvoie un NodeList du &lt;h2&gt;
+```js
+  function change() {
+    // document.getElementsByTagName ("H2") renvoie un NodeList du <h2>
     // éléments dans le document, et le premier est le nombre 0:
 
     var header = document.getElementsByTagName("H2").item(0);
@@ -71,14 +73,15 @@ original_slug: Web/API/Document_object_model/Utilisation_du_DOM_Level_1_Core_du_
     // et pose le paragraphe à la fin du document en l'ajoutant
     // au BODY (qui est le parent de para)
     para.parentNode.appendChild(newElement);
-  }</pre>
+  }
+```
 
-<p>{{ EmbedLiveSample('A_simple_example', 800, 300) }}</p>
+{{ EmbedLiveSample('A_simple_example', 800, 300) }}
 
-<p>Vous pouvez voir ce script dans <a href="http://www.mozilla.org/docs/dom/technote/intro/example.html">un exemple complet</a>.</p>
+Vous pouvez voir ce script dans [un exemple complet](http://www.mozilla.org/docs/dom/technote/intro/example.html).
 
-<h3 id="Pour_en_savoir_plus">Pour en apprendre plus</h3>
+### Pour en apprendre plus
 
-<p>Maintenant que vous êtes familiarisé avec les concepts basiques du DOM, il existe un document expliquant <a href="/fr/docs/Explorer_un_tableau_HTML_avec_des_interfaces_DOM_et_JavaScript">les méthodes fondamentales de DOM Level 1</a>. C'est la suite de ce document.</p>
+Maintenant que vous êtes familiarisé avec les concepts basiques du DOM, il existe un document expliquant [les méthodes fondamentales de DOM Level 1](/fr/docs/Explorer_un_tableau_HTML_avec_des_interfaces_DOM_et_JavaScript). C'est la suite de ce document.
 
-<p>Consultez également la <a href="http://xmlfr.org/w3c/TR/REC-DOM-Level-1/level-one-core.html">spécification DOM Level 1 Core</a> du W3C (traduction en français non normative). C'est une spécification relativement claire, même si elle est un peu formelle. Ce qui est surtout intéressant pour les auteurs, c'est la description des différents objets DOM et de toutes leurs propriétés et méthodes. Voyez encore notre <a href="/fr/docs/Web/API/Document_Object_Model">documentation complète sur le DOM</a>.</p>
\ No newline at end of file
+Consultez également la [spécification DOM Level 1 Core](http://xmlfr.org/w3c/TR/REC-DOM-Level-1/level-one-core.html) du W3C (traduction en français non normative). C'est une spécification relativement claire, même si elle est un peu formelle. Ce qui est surtout intéressant pour les auteurs, c'est la description des différents objets DOM et de toutes leurs propriétés et méthodes. Voyez encore notre [documentation complète sur le DOM](/fr/docs/Web/API/Document_Object_Model).
diff --git a/files/fr/web/api/document_object_model/whitespace/index.md b/files/fr/web/api/document_object_model/whitespace/index.md
index 9529722049..e20754093f 100644
--- a/files/fr/web/api/document_object_model/whitespace/index.md
+++ b/files/fr/web/api/document_object_model/whitespace/index.md
@@ -5,63 +5,63 @@ tags:
   - DOM
 translation_of: Web/API/Document_Object_Model/Whitespace
 ---
-<h2 id="Le_probl.C3.A8me">Le problème</h2>
+## Le problème
 
-<p>La présence d'espaces et de blancs dans le <a href="fr/DOM">DOM</a> peut rendre la manipulation de l'arbre de contenu difficile dans des aspects qu'on ne prévoit pas forcément. Dans Mozilla, tous les espaces et blancs dans le contenu texte du document original sont représentés dans le DOM (cela ne concerne pas les blancs à l'intérieur des balises). (C'est nécessaire en interne afin que l'éditeur puisse conserver le formatage des documents et que l'instruction <code>white-space: pre</code> en <a href="fr/CSS">CSS</a> fonctionne.) Cela signifie que :</p>
+La présence d'espaces et de blancs dans le [DOM](fr/DOM) peut rendre la manipulation de l'arbre de contenu difficile dans des aspects qu'on ne prévoit pas forcément. Dans Mozilla, tous les espaces et blancs dans le contenu texte du document original sont représentés dans le DOM (cela ne concerne pas les blancs à l'intérieur des balises). (C'est nécessaire en interne afin que l'éditeur puisse conserver le formatage des documents et que l'instruction `white-space: pre` en [CSS](fr/CSS) fonctionne.) Cela signifie que :
 
-<ul>
- <li>il y aura certains nœuds texte qui ne contiendront que du vide, et</li>
- <li>certains nœuds texte commenceront ou se termineront par des blancs.</li>
-</ul>
+- il y aura certains nœuds texte qui ne contiendront que du vide, et
+- certains nœuds texte commenceront ou se termineront par des blancs.
 
-<p>En d'autres termes, l'arbre DOM pour le document qui suit ressemblera à l'image ci-dessous (où « \n » représente un retour à la ligne) :</p>
+En d'autres termes, l'arbre DOM pour le document qui suit ressemblera à l'image ci-dessous (où « \n » représente un retour à la ligne) :
 
-<pre class="eval">&lt;!-- My document --&gt;
-&lt;html&gt;
-&lt;head&gt;
-  &lt;title&gt;My Document&lt;/title&gt;
-&lt;/head&gt;
-&lt;body&gt;
-  &lt;h1&gt;Header&lt;/h1&gt;
-  &lt;p&gt;
-    Paragraph
-  &lt;/p&gt;
-&lt;/body&gt;
-&lt;/html&gt;
-</pre>
+    <!-- My document -->
+    <html>
+    <head>
+      <title>My Document</title>
+    </head>
+    <body>
+      <h1>Header</h1>
+      <p>
+        Paragraph
+      </p>
+    </body>
+    </html>
 
-<p><img alt="Arbre du DOM équivalent à l'exemple HTML ci-avant" src="dom-string.png"></p>
+![Arbre du DOM équivalent à l'exemple HTML ci-avant](dom-string.png)
 
-<p>Ceci peut rendre les choses un peu plus difficiles pour les utilisateurs du DOM qui aimeraient parcourir le contenu, sans se préoccuper des blancs.</p>
+Ceci peut rendre les choses un peu plus difficiles pour les utilisateurs du DOM qui aimeraient parcourir le contenu, sans se préoccuper des blancs.
 
-<h2 id="Rendre_les_choses_plus_faciles">Rendre les choses plus faciles</h2>
+## Rendre les choses plus faciles
 
-<p>On peut formater leur code comme indiqué ci-dessous pour contourner le problème:</p>
+On peut formater leur code comme indiqué ci-dessous pour contourner le problème:
 
-<pre class="brush: html">&lt;!-- jolie impression conventionnelle
+```html
+<!-- jolie impression conventionnelle
      avec des espaces entre les balises:
- --&gt;
-&lt;div&gt;
- &lt;ul&gt;
-  &lt;li&gt;Position 1&lt;/li&gt;
-  &lt;li&gt;Position 2&lt;/li&gt;
-  &lt;li&gt;Position 3&lt;/li&gt;
- &lt;/ul&gt;
-&lt;/div&gt;
-
-&lt;!-- jolie impression adaptée au problème :
- --&gt;
-&lt;div
- &gt;&lt;ul
-  &gt;&lt;li&gt;Position 1&lt;/li
-  &gt;&lt;li&gt;Position 2&lt;/li
-  &gt;&lt;li&gt;Position 3&lt;/li
- &gt;&lt;/ul
-&gt;&lt;/div&gt;</pre>
-
-<p>Le code JavaScript ci-dessous définit plusieurs fonctions facilitant la manipulation d'espaces dans le DOM :</p>
-
-<pre class="brush: js">/**
+ -->
+<div>
+ <ul>
+  <li>Position 1</li>
+  <li>Position 2</li>
+  <li>Position 3</li>
+ </ul>
+</div>
+
+<!-- jolie impression adaptée au problème :
+ -->
+<div
+ ><ul
+  ><li>Position 1</li
+  ><li>Position 2</li
+  ><li>Position 3</li
+ ></ul
+></div>
+```
+
+Le code JavaScript ci-dessous définit plusieurs fonctions facilitant la manipulation d'espaces dans le DOM :
+
+```js
+/**
  * Tout au long, les espaces sont définis comme l'un des caractères
  *  "\t" TAB \u0009
  *  "\n" LF  \u000A
@@ -78,8 +78,8 @@ translation_of: Web/API/Document_Object_Model/Whitespace
  *
  * @param nod  Un nœud implémentant l'interface |CharacterData| (c'est-à-dire,
  *             un nœud |Text|, |Comment| ou |CDATASection|
- * @return     True <em>(vrai)</em> Si tout le contenu du texte du |nod| est un espace,
- *             sinon false <em>(faux)</em>.
+ * @return     True (vrai) Si tout le contenu du texte du |nod| est un espace,
+ *             sinon false (faux).
  */
 function is_all_ws( nod )
 {
@@ -92,16 +92,16 @@ function is_all_ws( nod )
  * Détermine si le nœud doit être ignoré par les fonctions d'itération.
  *
  * @param nod  Un objet implémentant l'interface DOM1 |Node|.
- * @return     true <em>(vrai)</em> si le nœud est :
+ * @return     true (vrai) si le nœud est :
  *                1) un nœud |Text| qui est tout en espace
  *                2) un nœud |Comment|
- *             et autrement false <em>(faux)</em>.
+ *             et autrement false (faux).
  */
 
 function is_ignorable( nod )
 {
   return ( nod.nodeType == 8) || // un nœud commentaire
-         ( (nod.nodeType == 3) &amp;&amp; is_all_ws(nod) ); // un nœud texte, tout espace
+         ( (nod.nodeType == 3) && is_all_ws(nod) ); // un nœud texte, tout espace
 }
 
 /**
@@ -204,13 +204,15 @@ function data_of( txt )
   if (data.charAt(data.length - 1) == " ")
     data = data.substring(0, data.length - 1);
   return data;
-}</pre>
+}
+```
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Le code qui suit montre l'utilisation des fonctions présentées plus haut. Il parcourt les enfants d'un élément (dont les enfants sont tous des éléments) pour trouver celui dont le texte est <code>"Ceci est le troisième paragraphe"</code>, et change ensuite l'attribut <code>class</code> et le contenu de ce paragraphe.</p>
+Le code qui suit montre l'utilisation des fonctions présentées plus haut. Il parcourt les enfants d'un élément (dont les enfants sont tous des éléments) pour trouver celui dont le texte est `"Ceci est le troisième paragraphe"`, et change ensuite l'attribut `class` et le contenu de ce paragraphe.
 
-<pre class="brush: js">var cur = first_child(document.getElementById("test"));
+```js
+var cur = first_child(document.getElementById("test"));
 while (cur)
 {
   if (data_of(cur.firstChild) == "This is the third paragraph.")
@@ -219,4 +221,5 @@ while (cur)
       cur.firstChild.textContent = "This is the magic paragraph.";
   }
   cur = node_after(cur);
-}</pre>
\ No newline at end of file
+}
+```
diff --git a/files/fr/web/api/documentfragment/documentfragment/index.md b/files/fr/web/api/documentfragment/documentfragment/index.md
index f9c636ecef..753d6f303c 100644
--- a/files/fr/web/api/documentfragment/documentfragment/index.md
+++ b/files/fr/web/api/documentfragment/documentfragment/index.md
@@ -10,41 +10,30 @@ tags:
   - Fragments
 translation_of: Web/API/DocumentFragment/DocumentFragment
 ---
-<p>{{ApiRef("DOM")}}{{seeCompatTable}}</p>
+{{ApiRef("DOM")}}{{seeCompatTable}}
 
-<p>Le constructeur <code><strong>DocumentFragment()</strong></code> renvoie un nouvel objet  {{domxref("DocumentFragment")}} créé vide.</p>
+Le constructeur **`DocumentFragment()`** renvoie un nouvel objet  {{domxref("DocumentFragment")}} créé vide.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>fragment</em> = new DocumentFragment()</pre>
+    fragment = new DocumentFragment()
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">fragment = new DocumentFragment();</pre>
+```js
+fragment = new DocumentFragment();
+```
 
-<h2 id="Specification">Spécification</h2>
+## Spécification
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#dom-documentfragment', 'DocumentFragment.DocumentFragment()')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                            | Statut                           | Commentaire          |
+| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName('DOM WHATWG', '#dom-documentfragment', 'DocumentFragment.DocumentFragment()')}} | {{Spec2('DOM WHATWG')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.DocumentFragment.DocumentFragment")}}</p>
+{{Compat("api.DocumentFragment.DocumentFragment")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/API/Document_Object_Model">L'index des interfaces du DOM.</a></li>
-</ul>
+- [L'index des interfaces du DOM.](/fr/docs/Web/API/Document_Object_Model)
diff --git a/files/fr/web/api/documentfragment/index.md b/files/fr/web/api/documentfragment/index.md
index 23025411fa..10737564e4 100644
--- a/files/fr/web/api/documentfragment/index.md
+++ b/files/fr/web/api/documentfragment/index.md
@@ -10,96 +10,61 @@ tags:
   - Noeuds
 translation_of: Web/API/DocumentFragment
 ---
-<p>{{ ApiRef("DOM") }}</p>
-
-<p>L’interface <strong><code>DocumentFragment</code></strong> représente un objet document minimal qui n’a pas de parent. Il est utilisé comme une version légère de {{domxref("Document")}} pour stocker un segment de structure de document composé de nœuds, tout comme un document standard. La différence fondamentale est que, comme le fragment de document ne fait pas réellement partie de la structure du DOM, les changements faits au fragment n’affectent pas le document, ne causent pas de {{Glossary("Reflow")}} , et ne provoquent pas les éventuels impacts de performance qui peuvent avoir lieu quand des changements sont faits.</p>
-
-<p>Un usage courant de <code>DocumentFragment</code> est de créer un fragment, assembler un sous-arbre DOM au sein de celui-ci, puis ajouter ou insérer le fragment dans le DOM en utilisant les méthodes de l’interface {{domxref("Node")}} (telles que {{domxref("Node.appendChild", "appendChild()")}} ou {{domxref("Node.insertBefore", "insertBefore()")}}). En faisant ainsi, on place les nœuds du fragment dans le DOM, en laissant derrière un <code>DocumentFragment</code> vide. Comme tous les nœuds sont insérés dans le document en une seule fois, un seul <em>reflow</em> et un seul rendu sont déclenchés, au lieu de potentiellement un pour chaque nœud inséré s’ils avaient été insérés séparément.</p>
-
-<p>Cette interface est également beaucoup utilisée avec les Web components : les éléments {{HTMLElement("template")}} contiennent un <code>DocumentFragment</code> dans leur propriété {{domxref("HTMLTemplateElement.content")}}.</p>
-
-<p>Un <code>DocumentFragment</code> vide peut être créé en utilisant la méthode {{domxref("document.createDocumentFragment()")}} ou le constructeur.</p>
-
-<p>{{InheritanceDiagram}}</p>
-
-<h2 id="Specification">Propriétés</h2>
-
-<p><em>Cette interface n’a pas de propriétés spécifiques, mais hérite de celles de son parent, </em><em>{{domxref("Node")}}, et implémente celles de l’interface {{domxref("ParentNode")}}.</em></p>
-
-<dl>
- <dt>{{ domxref("ParentNode.children") }} {{readonlyInline}}{{experimental_inline}}</dt>
- <dd>Retourne une {{domxref("HTMLCollection")}} dynamique contenant tous les objets de type {{domxref("Element")}} enfants de l’objet <code>DocumentFragment</code>.</dd>
- <dt>{{ domxref("ParentNode.firstElementChild") }} {{readonlyInline}}{{experimental_inline}}</dt>
- <dd>Retourne un {{domxref("Element")}} qui est le premier enfant de l’objet <code>DocumentFragment</code>, ou <code>null</code> s’il n’y en a aucun.</dd>
- <dt>{{ domxref("ParentNode.lastElementChild") }} {{readonlyInline}}{{experimental_inline}}</dt>
- <dd>Retourne un {{domxref("Element")}} qui est le dernier enfant de l’objet <code>DocumentFragment</code>, ou <code>null</code> s’il n’y en a aucun.</dd>
- <dt>{{ domxref("ParentNode.childElementCount") }} {{readonlyInline}}{{experimental_inline}}</dt>
- <dd>Retourne un <code>unsigned long</code> indiquant le nomble d’enfants que le <code>DocumentFragment</code> possède.</dd>
-</dl>
-
-<h2 id="Constructeur">Constructeur</h2>
-
-<dl>
- <dt>{{ domxref("DocumentFragment.DocumentFragment()", "DocumentFragment()") }} {{experimental_inline}}</dt>
- <dd>Retourne un objet <code>DocumentFragment</code> vide.</dd>
-</dl>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<p><em>Cette interface hérite des méthodes de son parent, {{domxref("Node")}}<em>, et implémente celles de l’interface {{domxref("ParentNode")}}</em></em><em>.</em></p>
-
-<dl>
- <dt>{{domxref("DocumentFragment.querySelector()")}}</dt>
- <dd>Retourne le premier nœud {{domxref("Element")}} du <code>DocumentFragment</code>, dans l’ordre du document, correspondant aux sélécteurs spécifiés.</dd>
- <dt>{{domxref("DocumentFragment.querySelectorAll()")}}</dt>
- <dd>Retourne une {{domxref("NodeList")}} de tous les nœuds {{domxref("Element")}} du <code>DocumentFragment</code> qui correspondent aux sélecteurs spécifiés.</dd>
- <dt>{{domxref("DocumentFragment.getElementById()")}}</dt>
- <dd>Retourne le premier nœud {{domxref("Element")}} du <code>DocumentFragment</code>, dans l’ordre du document, qui correspond à l’ID spécifié.</dd>
-</dl>
-
-<h2 id="Specifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#interface-documentfragment', 'DocumentFragment')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Ajouté le constructeur et l’implémentation de {{domxref("ParentNode")}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('Selectors API Level 1', '#the-apis', 'DocumentFragment')}}</td>
-   <td>{{Spec2('Selectors API Level 1')}}</td>
-   <td>Ajouté les méthodes <code>querySelector()</code> et <code>querySelectorAll()</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM3 Core', 'core.html#ID-B63ED1A3', 'DocumentFragment')}}</td>
-   <td>{{Spec2('DOM3 Core')}}</td>
-   <td>Pas de changement depuis {{SpecName('DOM2 Core')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Core', 'core.html#ID-B63ED1A3', 'DocumentFragment')}}</td>
-   <td>{{Spec2('DOM2 Core')}}</td>
-   <td>Pas de changement depuis {{SpecName('DOM1')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM1', 'level-one-core.html#ID-B63ED1A3', 'DocumentFragment')}}</td>
-   <td>{{Spec2('DOM1')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.DocumentFragment")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/en-US/docs/DOM/DOM_Reference">Index des interfaces DOM</a></li>
-</ul>
+{{ ApiRef("DOM") }}
+
+L’interface **`DocumentFragment`** représente un objet document minimal qui n’a pas de parent. Il est utilisé comme une version légère de {{domxref("Document")}} pour stocker un segment de structure de document composé de nœuds, tout comme un document standard. La différence fondamentale est que, comme le fragment de document ne fait pas réellement partie de la structure du DOM, les changements faits au fragment n’affectent pas le document, ne causent pas de {{Glossary("Reflow")}} , et ne provoquent pas les éventuels impacts de performance qui peuvent avoir lieu quand des changements sont faits.
+
+Un usage courant de `DocumentFragment` est de créer un fragment, assembler un sous-arbre DOM au sein de celui-ci, puis ajouter ou insérer le fragment dans le DOM en utilisant les méthodes de l’interface {{domxref("Node")}} (telles que {{domxref("Node.appendChild", "appendChild()")}} ou {{domxref("Node.insertBefore", "insertBefore()")}}). En faisant ainsi, on place les nœuds du fragment dans le DOM, en laissant derrière un `DocumentFragment` vide. Comme tous les nœuds sont insérés dans le document en une seule fois, un seul _reflow_ et un seul rendu sont déclenchés, au lieu de potentiellement un pour chaque nœud inséré s’ils avaient été insérés séparément.
+
+Cette interface est également beaucoup utilisée avec les Web components : les éléments {{HTMLElement("template")}} contiennent un `DocumentFragment` dans leur propriété {{domxref("HTMLTemplateElement.content")}}.
+
+Un `DocumentFragment` vide peut être créé en utilisant la méthode {{domxref("document.createDocumentFragment()")}} ou le constructeur.
+
+{{InheritanceDiagram}}
+
+## Propriétés
+
+_Cette interface n’a pas de propriétés spécifiques, mais hérite de celles de son parent,_ _{{domxref("Node")}}, et implémente celles de l’interface {{domxref("ParentNode")}}._
+
+- {{ domxref("ParentNode.children") }} {{readonlyInline}}{{experimental_inline}}
+  - : Retourne une {{domxref("HTMLCollection")}} dynamique contenant tous les objets de type {{domxref("Element")}} enfants de l’objet `DocumentFragment`.
+- {{ domxref("ParentNode.firstElementChild") }} {{readonlyInline}}{{experimental_inline}}
+  - : Retourne un {{domxref("Element")}} qui est le premier enfant de l’objet `DocumentFragment`, ou `null` s’il n’y en a aucun.
+- {{ domxref("ParentNode.lastElementChild") }} {{readonlyInline}}{{experimental_inline}}
+  - : Retourne un {{domxref("Element")}} qui est le dernier enfant de l’objet `DocumentFragment`, ou `null` s’il n’y en a aucun.
+- {{ domxref("ParentNode.childElementCount") }} {{readonlyInline}}{{experimental_inline}}
+  - : Retourne un `unsigned long` indiquant le nomble d’enfants que le `DocumentFragment` possède.
+
+## Constructeur
+
+- {{ domxref("DocumentFragment.DocumentFragment()", "DocumentFragment()") }} {{experimental_inline}}
+  - : Retourne un objet `DocumentFragment` vide.
+
+## Méthodes
+
+_Cette interface hérite des méthodes de son parent, {{domxref("Node")}}_, et implémente celles de l’interface {{domxref("ParentNode")}}_\*\*._
+
+- {{domxref("DocumentFragment.querySelector()")}}
+  - : Retourne le premier nœud {{domxref("Element")}} du `DocumentFragment`, dans l’ordre du document, correspondant aux sélécteurs spécifiés.
+- {{domxref("DocumentFragment.querySelectorAll()")}}
+  - : Retourne une {{domxref("NodeList")}} de tous les nœuds {{domxref("Element")}} du `DocumentFragment` qui correspondent aux sélecteurs spécifiés.
+- {{domxref("DocumentFragment.getElementById()")}}
+  - : Retourne le premier nœud {{domxref("Element")}} du `DocumentFragment`, dans l’ordre du document, qui correspond à l’ID spécifié.
+
+## Spécifications
+
+| Spécification                                                                                            | Statut                                       | Commentaire                                                                     |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------------------- | ------------------------------------------------------------------------------- |
+| {{SpecName('DOM WHATWG', '#interface-documentfragment', 'DocumentFragment')}} | {{Spec2('DOM WHATWG')}}             | Ajouté le constructeur et l’implémentation de {{domxref("ParentNode")}}. |
+| {{SpecName('Selectors API Level 1', '#the-apis', 'DocumentFragment')}}             | {{Spec2('Selectors API Level 1')}} | Ajouté les méthodes `querySelector()` et `querySelectorAll()`.                  |
+| {{SpecName('DOM3 Core', 'core.html#ID-B63ED1A3', 'DocumentFragment')}}             | {{Spec2('DOM3 Core')}}                 | Pas de changement depuis {{SpecName('DOM2 Core')}}                       |
+| {{SpecName('DOM2 Core', 'core.html#ID-B63ED1A3', 'DocumentFragment')}}             | {{Spec2('DOM2 Core')}}                 | Pas de changement depuis {{SpecName('DOM1')}}                           |
+| {{SpecName('DOM1', 'level-one-core.html#ID-B63ED1A3', 'DocumentFragment')}}     | {{Spec2('DOM1')}}                     | Définition initiale                                                             |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.DocumentFragment")}}
+
+## Voir aussi
+
+- [Index des interfaces DOM](/en-US/docs/DOM/DOM_Reference)
diff --git a/files/fr/web/api/documentfragment/queryselector/index.md b/files/fr/web/api/documentfragment/queryselector/index.md
index 86aac6075b..b30928e051 100644
--- a/files/fr/web/api/documentfragment/queryselector/index.md
+++ b/files/fr/web/api/documentfragment/queryselector/index.md
@@ -9,77 +9,60 @@ tags:
   - fragment
 translation_of: Web/API/DocumentFragment/querySelector
 ---
-<div>{{ApiRef("DOM")}}</div>
+{{ApiRef("DOM")}}
 
-<p>La méthode <strong><code>DocumentFragment.querySelector()</code></strong> renvoie le premier élément ou <code>null</code> si aucune correspondance n'est trouvée, dans le {{domxref("DocumentFragment")}} (en utilisant la traversée en profondeur des noeuds du document), avec le groupe spécifié de sélecteurs.</p>
+La méthode **`DocumentFragment.querySelector()`** renvoie le premier élément ou `null` si aucune correspondance n'est trouvée, dans le {{domxref("DocumentFragment")}} (en utilisant la traversée en profondeur des noeuds du document), avec le groupe spécifié de sélecteurs.
 
-<p>Si le sélecteur correspond à un ID (<em>identifiant</em>) et que cet ID est utilisé plusieurs fois par erreur dans le document, il renvoie le premier élément correspondant.</p>
+Si le sélecteur correspond à un ID (_identifiant_) et que cet ID est utilisé plusieurs fois par erreur dans le document, il renvoie le premier élément correspondant.
 
-<p>Si les sélecteurs spécifiés dans paramètre sont invalides une {{domxref("DOMException")}} avec une valeur <code>SYNTAX_ERR</code> est lancée.</p>
+Si les sélecteurs spécifiés dans paramètre sont invalides une {{domxref("DOMException")}} avec une valeur `SYNTAX_ERR` est lancée.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>element</em> = <em>documentfragment</em>.querySelector(<em>selectors</em>);</pre>
+    element = documentfragment.querySelector(selectors);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><em>selectors </em></dt>
- <dd>est une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) contenant un ou plusieurs sélecteurs CSS séparés par des virgules.</dd>
-</dl>
+- _selectors_
+  - : est une {{domxref("DOMString")}} (_chaîne de caractères_) contenant un ou plusieurs sélecteurs CSS séparés par des virgules.
 
-<h2 id="Example">Exemples</h2>
+## Exemples
 
-<h3 id="Exemple_de_base">Exemple de base</h3>
+### Exemple de base
 
-<p>Dans cet exemple de base, le premier élément dans le {{domxref("DocumentFragment")}} avec la classe "<code>myclass</code>" est renvoyé :</p>
+Dans cet exemple de base, le premier élément dans le {{domxref("DocumentFragment")}} avec la classe "`myclass`" est renvoyé :
 
-<pre class="brush: js">var el = documentfragment.querySelector(".myclass");
-</pre>
+```js
+var el = documentfragment.querySelector(".myclass");
+```
 
-<h3 id="Syntaxe_CSS_et_argument_de_la_méthode">Syntaxe CSS et argument de la méthode</h3>
+### Syntaxe CSS et argument de la méthode
 
-<p>L'argument chaîne transmis à <code>querySelector</code> doit suivre la syntaxe CSS. Pour faire correspondre un identifiant ou des sélecteurs qui ne suivent pas la syntaxe CSS (utilisant un point-virgule ou un espace inappropriés par exemple), il est obligatoire d'échapper les mauvais caractères avec une double barre oblique inverse :</p>
+L'argument chaîne transmis à `querySelector` doit suivre la syntaxe CSS. Pour faire correspondre un identifiant ou des sélecteurs qui ne suivent pas la syntaxe CSS (utilisant un point-virgule ou un espace inappropriés par exemple), il est obligatoire d'échapper les mauvais caractères avec une double barre oblique inverse :
 
-<pre class="brush: html">&lt;div id="foo\bar"&gt;&lt;/div&gt;
-&lt;div id="foo:bar"&gt;&lt;/div&gt;
+```html
+<div id="foo\bar"></div>
+<div id="foo:bar"></div>
 
-&lt;script&gt;
+<script>
 document.querySelector('#foo\bar')    // Ne correspond à rien
 document.querySelector('#foo\\\\bar') // Correspond au premier div
 document.querySelector('#foo:bar')     //  Ne correspond à rien
 document.querySelector('#foo\\:bar')   // Correspond au second div
-&lt;/script&gt;
-</pre>
-
-<h2 id="Specification">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Selectors API Level 2', '#queryselector', 'DocumentFragment.querySelector')}}</td>
-   <td>{{Spec2('Selectors API Level 2')}}</td>
-   <td>Pas de changement de {{SpecName('Selectors API Level 1')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('Selectors API Level 1', '#queryselector', 'DocumentFragment.querySelector')}}</td>
-   <td>{{Spec2('Selectors API Level 1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_Compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.DocumentFragment.querySelector")}}</p>
-
-<h2 id="See_also">Voir aussi</h2>
-
-<ul>
- <li>L'interface {{domxref("DocumentFragment")}} à laquelle elle appartient.</li>
-</ul>
+</script>
+```
+
+## Spécifications
+
+| Spécification                                                                                                            | Statut                                       | Commentaire                                                           |
+| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------- | --------------------------------------------------------------------- |
+| {{SpecName('Selectors API Level 2', '#queryselector', 'DocumentFragment.querySelector')}} | {{Spec2('Selectors API Level 2')}} | Pas de changement de {{SpecName('Selectors API Level 1')}} |
+| {{SpecName('Selectors API Level 1', '#queryselector', 'DocumentFragment.querySelector')}} | {{Spec2('Selectors API Level 1')}} | Définition initiale.                                                  |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.DocumentFragment.querySelector")}}
+
+## Voir aussi
+
+- L'interface {{domxref("DocumentFragment")}} à laquelle elle appartient.
diff --git a/files/fr/web/api/documentfragment/queryselectorall/index.md b/files/fr/web/api/documentfragment/queryselectorall/index.md
index c5468e6e6a..f54a09c554 100644
--- a/files/fr/web/api/documentfragment/queryselectorall/index.md
+++ b/files/fr/web/api/documentfragment/queryselectorall/index.md
@@ -9,57 +9,41 @@ tags:
   - fragment
 translation_of: Web/API/DocumentFragment/querySelectorAll
 ---
-<div>{{ApiRef("DOM")}}</div>
+{{ApiRef("DOM")}}
 
-<p>La méthode <strong><code>DocumentFragment.querySelectorAll()</code></strong> renvoie une {{domxref("NodeList")}} (<em>liste de noeuds</em>) des éléments du {{domxref("DocumentFragment")}} (en utilisant la traversée en profondeur des noeuds du document), qui correspondent avec le groupe spécifié de sélecteurs.</p>
+La méthode **`DocumentFragment.querySelectorAll()`** renvoie une {{domxref("NodeList")}} (_liste de noeuds_) des éléments du {{domxref("DocumentFragment")}} (en utilisant la traversée en profondeur des noeuds du document), qui correspondent avec le groupe spécifié de sélecteurs.
 
-<p>Si les sélecteurs spécifiés dans paramètre sont invalides une {{domxref("DOMException")}} avec une valeur <code>SYNTAX_ERR</code> est lancée.</p>
+Si les sélecteurs spécifiés dans paramètre sont invalides une {{domxref("DOMException")}} avec une valeur `SYNTAX_ERR` est lancée.
 
-<div class="note">
-<p><strong>Note :</strong> La définition de cet API a été déplacé vers l'interface {{domxref("ParentNode")}}.</p>
-</div>
+> **Note :** La définition de cet API a été déplacé vers l'interface {{domxref("ParentNode")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>elementList</em> = <em>documentframgment</em>.querySelectorAll(<em>selectors</em>);</pre>
+    elementList = documentframgment.querySelectorAll(selectors);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><em>selectors</em></dt>
- <dd>est une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) contenant un ou plusieurs sélecteurs CSS séparés par des virgules.</dd>
-</dl>
+- _selectors_
+  - : est une {{domxref("DOMString")}} (_chaîne de caractères_) contenant un ou plusieurs sélecteurs CSS séparés par des virgules.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Cet exemple renvoie une liste de tous les éléments <code>div</code> du <code>DocumentFragment</code> avec une classe soit "<code>note</code>" soit "<code>alert</code>" :</p>
+Cet exemple renvoie une liste de tous les éléments `div` du `DocumentFragment` avec une classe soit "`note`" soit "`alert`" :
 
-<pre class="brush: js">var matches = documentfrag.querySelectorAll("div.note, div.alert");
-</pre>
+```js
+var matches = documentfrag.querySelectorAll("div.note, div.alert");
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Selectors API Level 1', '#queryselector', 'DocumentFragment.querySelectorAll')}}</td>
-   <td>{{Spec2('Selectors API Level 1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                | Statut                                       | Commentaire          |
+| ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------- |
+| {{SpecName('Selectors API Level 1', '#queryselector', 'DocumentFragment.querySelectorAll')}} | {{Spec2('Selectors API Level 1')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.DocumentFragment.querySelectorAll")}}</p>
+{{Compat("api.DocumentFragment.querySelectorAll")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>L'interface {{domxref("DocumentFragment")}} à laquelle elle appartient.</li>
-</ul>
+- L'interface {{domxref("DocumentFragment")}} à laquelle elle appartient.
diff --git a/files/fr/web/api/documenttype/index.md b/files/fr/web/api/documenttype/index.md
index c3f4a28204..c9b72f6c7b 100644
--- a/files/fr/web/api/documenttype/index.md
+++ b/files/fr/web/api/documenttype/index.md
@@ -8,82 +8,55 @@ tags:
   - Interface
 translation_of: Web/API/DocumentType
 ---
-<div>{{APIRef("DOM")}}</div>
-
-<p>L'interface <strong><code>DocumentType</code></strong> représente un nœud ({{domxref("Node")}}) contenant un <em>doctype</em>.</p>
-
-<p>{{InheritanceDiagram}}</p>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<p><em>Cette interface hérite de propriétés de la part de son parent, {{domxref("Node")}}, et implémente l'interface {{domxref("ChildNode")}}.</em></p>
-
-<dl>
- <dt>...</dt>
- <dt>{{domxref("DocumentType.entities")}} {{readonlyInline}} {{obsolete_Inline}}</dt>
- <dd>Une {{domxref ("NamedNodeMap")}} des entités déclarées dans la DTD. Chaque noeud de cette carte implémente l'interface {{domxref ("Entity")}}.</dd>
- <dt>{{domxref("DocumentType.internalSubset")}} {{readonlyInline}} {{obsolete_Inline}}</dt>
- <dd>Un {{domxref ("DOMString")}} du sous-ensemble interne, ou null s'il n'y en a pas. Par exemple "&lt;! ELEMENT foo (bar)"&gt;</dd>
- <dt>{{domxref("DocumentType.name")}} {{readonlyInline}}</dt>
- <dd>une {{domxref("DOMString")}}, par exemple, <code>"html"</code> pour <code>&lt;!DOCTYPE HTML&gt;</code>.</dd>
- <dt>{{domxref("DocumentType.notations")}} {{readonlyInline}} {{obsolete_Inline}}</dt>
- <dd>une {{domxref ("NamedNodeMap")}} avec les notations déclarées dans la DTD. Chaque nœud de cette carte implémente l'interface {{domxref ("Notation")}}.</dd>
- <dt>{{domxref("DocumentType.publicId")}} {{readonlyInline}}</dt>
- <dd>une {{domxref("DOMString")}}, par exemple <code>"-//W3C//DTD HTML 4.01//EN"</code>, chaîne vide pour HTML5.</dd>
- <dt>{{domxref("DocumentType.systemId")}} {{readonlyInline}}</dt>
- <dd>une {{domxref("DOMString")}}, par exemple, <code>"http://www.w3.org/TR/html4/strict.dtd"</code>, chaîne vide pour HTML5.</dd>
-</dl>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<p><em>Cette interface hérite de méthodes de la part de son parent, {{domxref("Node")}}, et implémente l'interface {{domxref("ChildNode")}}.</em></p>
-
-<dl>
- <dt>{{domxref("ChildNode.remove()")}} {{experimental_inline}}</dt>
- <dd>Cette méthode retire l'objet de la liste des enfants de son élément parent.</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('DOM WHATWG', '#documenttype', 'DocumentType')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Implémente désormais l'interface {{domxref("ChildNode")}}.<br>
-    Retrait des propriétés <code>internalSubset</code>, <code>entities</code> et <code>notation</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM3 Core', 'core.html#ID-412266927', 'DocumentType')}}</td>
-   <td>{{Spec2('DOM3 Core')}}</td>
-   <td>Aucune modification depuis {{SpecName('DOM2 Core')}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Core', 'core.html#ID-412266927', 'CharacterData')}}</td>
-   <td>{{Spec2('DOM2 Core')}}</td>
-   <td>Ajout des propriétés <code>publicID</code>, <code>systemID</code>  et <code>internalSubset</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM1', 'level-one-core.html#ID-412266927', 'CharacterData')}}</td>
-   <td>{{Spec2('DOM1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.DocumentType")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/Document_Object_Model">L'index des interfaces du DOM</a></li>
- <li>{{domxref("Entity")}}</li>
- <li>{{domxref("Notation")}}</li>
-</ul>
+{{APIRef("DOM")}}
+
+L'interface **`DocumentType`** représente un nœud ({{domxref("Node")}}) contenant un _doctype_.
+
+{{InheritanceDiagram}}
+
+## Propriétés
+
+_Cette interface hérite de propriétés de la part de son parent, {{domxref("Node")}}, et implémente l'interface {{domxref("ChildNode")}}._
+
+- ...
+
+  {{domxref("DocumentType.entities")}} {{readonlyInline}} {{obsolete_Inline}}
+
+  - : Une {{domxref ("NamedNodeMap")}} des entités déclarées dans la DTD. Chaque noeud de cette carte implémente l'interface {{domxref ("Entity")}}.
+
+- {{domxref("DocumentType.internalSubset")}} {{readonlyInline}} {{obsolete_Inline}}
+  - : Un {{domxref ("DOMString")}} du sous-ensemble interne, ou null s'il n'y en a pas. Par exemple "\<! ELEMENT foo (bar)">
+- {{domxref("DocumentType.name")}} {{readonlyInline}}
+  - : une {{domxref("DOMString")}}, par exemple, `"html"` pour `<!DOCTYPE HTML>`.
+- {{domxref("DocumentType.notations")}} {{readonlyInline}} {{obsolete_Inline}}
+  - : une {{domxref ("NamedNodeMap")}} avec les notations déclarées dans la DTD. Chaque nœud de cette carte implémente l'interface {{domxref ("Notation")}}.
+- {{domxref("DocumentType.publicId")}} {{readonlyInline}}
+  - : une {{domxref("DOMString")}}, par exemple `"-//W3C//DTD HTML 4.01//EN"`, chaîne vide pour HTML5.
+- {{domxref("DocumentType.systemId")}} {{readonlyInline}}
+  - : une {{domxref("DOMString")}}, par exemple, `"http://www.w3.org/TR/html4/strict.dtd"`, chaîne vide pour HTML5.
+
+## Méthodes
+
+_Cette interface hérite de méthodes de la part de son parent, {{domxref("Node")}}, et implémente l'interface {{domxref("ChildNode")}}._
+
+- {{domxref("ChildNode.remove()")}} {{experimental_inline}}
+  - : Cette méthode retire l'objet de la liste des enfants de son élément parent.
+
+## Spécifications
+
+| Spécification                                                                                    | État                             | Commentaires                                                                                                                          |
+| ------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('DOM WHATWG', '#documenttype', 'DocumentType')}}                 | {{Spec2('DOM WHATWG')}} | Implémente désormais l'interface {{domxref("ChildNode")}}. Retrait des propriétés `internalSubset`, `entities` et `notation`. |
+| {{SpecName('DOM3 Core', 'core.html#ID-412266927', 'DocumentType')}}         | {{Spec2('DOM3 Core')}}     | Aucune modification depuis {{SpecName('DOM2 Core')}}.                                                                          |
+| {{SpecName('DOM2 Core', 'core.html#ID-412266927', 'CharacterData')}}     | {{Spec2('DOM2 Core')}}     | Ajout des propriétés `publicID`, `systemID`  et `internalSubset`.                                                                     |
+| {{SpecName('DOM1', 'level-one-core.html#ID-412266927', 'CharacterData')}} | {{Spec2('DOM1')}}         | Définition initiale.                                                                                                                  |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.DocumentType")}}
+
+## Voir aussi
+
+- [L'index des interfaces du DOM](/fr/docs/Web/API/Document_Object_Model)
+- {{domxref("Entity")}}
+- {{domxref("Notation")}}
diff --git a/files/fr/web/api/domerror/index.md b/files/fr/web/api/domerror/index.md
index 8e481bab48..c0aa91a55b 100644
--- a/files/fr/web/api/domerror/index.md
+++ b/files/fr/web/api/domerror/index.md
@@ -9,139 +9,53 @@ tags:
   - Reference
 translation_of: Web/API/DOMError
 ---
-<p>{{ APIRef("DOM") }}{{deprecated_header}}</p>
-
-<p>L'interface <strong><code>DOMError</code></strong>  décrit un objet d'erreur contenant le nom de l'erreur.</p>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<dl>
- <dt>{{domxref("DOMError.name")}} {{readOnlyInline}}</dt>
- <dd>Retourne une {{ domxref("DOMString") }} <em>(chaîne de caractères)</em> représentant l'un des noms de type d'erreur (voir ci-dessous).</dd>
- <dt>{{domxref("DOMError.message")}} {{readOnlyInline}}</dt>
- <dd>Retourne une {{ domxref("DOMString") }} <em>(chaîne de caractères)</em> représentant un message ou une description associée avec le nom de type d'erreur.</dd>
-</dl>
-
-<h2 id="Type_d'erreurs">Type d'erreurs</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th>Type</th>
-   <th>Description</th>
-  </tr>
-  <tr>
-   <td><code>IndexSizeError</code></td>
-   <td>L'index n'est pas dans l'étendue autorisée (par exemple, déclenché dans un objet {{ domxref("range") }}).</td>
-  </tr>
-  <tr>
-   <td><code>HierarchyRequestError</code></td>
-   <td>La hiérarchie de l'arbre de noeud est incorrecte.</td>
-  </tr>
-  <tr>
-   <td><code>WrongDocumentError</code></td>
-   <td>L'objet est dans le mauvais {{ domxref("document") }}.</td>
-  </tr>
-  <tr>
-   <td><code>InvalidCharacterError</code></td>
-   <td>La chaîne de caractères contient des caractères non valides.</td>
-  </tr>
-  <tr>
-   <td><code>NoModificationAllowedError</code></td>
-   <td>L'objet ne peut pas être modifié.</td>
-  </tr>
-  <tr>
-   <td><code>NotFoundError</code></td>
-   <td>L'objet ne peut pas être trouvé.</td>
-  </tr>
-  <tr>
-   <td><code>NotSupportedError</code></td>
-   <td>Cette opération n'est pas supportée.</td>
-  </tr>
-  <tr>
-   <td><code>InvalidStateError</code></td>
-   <td>L'objet est dans un état non valide.</td>
-  </tr>
-  <tr>
-   <td><code>SyntaxError</code></td>
-   <td>La chaîne de caractère ne correspond pas au motif attendu.</td>
-  </tr>
-  <tr>
-   <td><code>InvalidModificationError</code></td>
-   <td>L'objet ne peut pas être modifié de cette façon.</td>
-  </tr>
-  <tr>
-   <td><code>NamespaceError</code></td>
-   <td>Cette opération n'est pas autorisée par les Namespaces en XML.</td>
-  </tr>
-  <tr>
-   <td><code>InvalidAccessError</code></td>
-   <td>L'objet ne supporte pas cette opération ou cet argument.</td>
-  </tr>
-  <tr>
-   <td><code>TypeMismatchError</code></td>
-   <td>Le type de l'objet ne correspond pas au type attendu.</td>
-  </tr>
-  <tr>
-   <td><code>SecurityError</code></td>
-   <td>L'opération n'est pas sécurisée.</td>
-  </tr>
-  <tr>
-   <td><code>NetworkError</code></td>
-   <td>Une erreur réseau est survenue.</td>
-  </tr>
-  <tr>
-   <td><code>AbortError</code></td>
-   <td>L'opération a été annulée.</td>
-  </tr>
-  <tr>
-   <td><code>URLMismatchError</code></td>
-   <td>L'URL fournie ne correspond pas à une autre URL.</td>
-  </tr>
-  <tr>
-   <td><code>QuotaExceededError</code></td>
-   <td>Le quota a été dépassé.</td>
-  </tr>
-  <tr>
-   <td><code>TimeoutError</code></td>
-   <td>L'opération a dépassé le temps autorisé. (Time Out)</td>
-  </tr>
-  <tr>
-   <td><code>InvalidNodeTypeError</code></td>
-   <td>Le noeud est incorrect ou a un ancêtre incorrect pour cette opération.</td>
-  </tr>
-  <tr>
-   <td><code>DataCloneError</code></td>
-   <td>L'objet n'a pas pu être cloné.</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">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM4', '#interface-domerror', 'DOMError')}}</td>
-   <td>{{Spec2('DOM4')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-
-
-<p>{{Compat("api.DOMError")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{ domxref("DOMException") }}</li>
-</ul>
+{{ APIRef("DOM") }}{{deprecated_header}}
+
+L'interface **`DOMError`**  décrit un objet d'erreur contenant le nom de l'erreur.
+
+## Propriétés
+
+- {{domxref("DOMError.name")}} {{readOnlyInline}}
+  - : Retourne une {{ domxref("DOMString") }} _(chaîne de caractères)_ représentant l'un des noms de type d'erreur (voir ci-dessous).
+- {{domxref("DOMError.message")}} {{readOnlyInline}}
+  - : Retourne une {{ domxref("DOMString") }} _(chaîne de caractères)_ représentant un message ou une description associée avec le nom de type d'erreur.
+
+## Type d'erreurs
+
+| Type                         | Description                                                                                                     |
+| ---------------------------- | --------------------------------------------------------------------------------------------------------------- |
+| `IndexSizeError`             | L'index n'est pas dans l'étendue autorisée (par exemple, déclenché dans un objet {{ domxref("range") }}). |
+| `HierarchyRequestError`      | La hiérarchie de l'arbre de noeud est incorrecte.                                                               |
+| `WrongDocumentError`         | L'objet est dans le mauvais {{ domxref("document") }}.                                                   |
+| `InvalidCharacterError`      | La chaîne de caractères contient des caractères non valides.                                                    |
+| `NoModificationAllowedError` | L'objet ne peut pas être modifié.                                                                               |
+| `NotFoundError`              | L'objet ne peut pas être trouvé.                                                                                |
+| `NotSupportedError`          | Cette opération n'est pas supportée.                                                                            |
+| `InvalidStateError`          | L'objet est dans un état non valide.                                                                            |
+| `SyntaxError`                | La chaîne de caractère ne correspond pas au motif attendu.                                                      |
+| `InvalidModificationError`   | L'objet ne peut pas être modifié de cette façon.                                                                |
+| `NamespaceError`             | Cette opération n'est pas autorisée par les Namespaces en XML.                                                  |
+| `InvalidAccessError`         | L'objet ne supporte pas cette opération ou cet argument.                                                        |
+| `TypeMismatchError`          | Le type de l'objet ne correspond pas au type attendu.                                                           |
+| `SecurityError`              | L'opération n'est pas sécurisée.                                                                                |
+| `NetworkError`               | Une erreur réseau est survenue.                                                                                 |
+| `AbortError`                 | L'opération a été annulée.                                                                                      |
+| `URLMismatchError`           | L'URL fournie ne correspond pas à une autre URL.                                                                |
+| `QuotaExceededError`         | Le quota a été dépassé.                                                                                         |
+| `TimeoutError`               | L'opération a dépassé le temps autorisé. (Time Out)                                                             |
+| `InvalidNodeTypeError`       | Le noeud est incorrect ou a un ancêtre incorrect pour cette opération.                                          |
+| `DataCloneError`             | L'objet n'a pas pu être cloné.                                                                                  |
+
+## Spécifications
+
+| Spécification                                                            | Statut                   | Commentaire          |
+| ------------------------------------------------------------------------ | ------------------------ | -------------------- |
+| {{SpecName('DOM4', '#interface-domerror', 'DOMError')}} | {{Spec2('DOM4')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.DOMError")}}
+
+## Voir aussi
+
+- {{ domxref("DOMException") }}
diff --git a/files/fr/web/api/domexception/index.md b/files/fr/web/api/domexception/index.md
index a2b859da99..0c3e390c86 100644
--- a/files/fr/web/api/domexception/index.md
+++ b/files/fr/web/api/domexception/index.md
@@ -8,146 +8,109 @@ tags:
   - exceptions
 translation_of: Web/API/DOMException
 ---
-<p>{{ APIRef("DOM") }}</p>
-
-<p>L'interface <code><strong>DOMException</strong></code> représente un évènement anormal (appelé <strong>exception</strong>) qui appraît suite à l'appel d'une méthode ou à l'accès à une propriété d'une API web. C'est essentiellement lié à la façon dont les conditions d'erreur sont décrites dans les API web.</p>
-
-<p>Chaque exception a un <strong>nom</strong>, qui est une courte chaîne identifiant l'erreur ou la condition anormale.</p>
-
-<h2 id="Constructeur">Constructeur</h2>
-
-<dl>
- <dt>{{domxref("DOMException.DOMException()", "DOMException()")}} {{experimental_inline}}</dt>
- <dd>Retourne un objet <code>DOMException</code> avec un message et un nom spécifiés.</dd>
-</dl>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<dl>
- <dt>{{domxref("DOMException.code")}} {{deprecated_inline}} {{readOnlyInline}}</dt>
- <dd>Renvoie un court message qui contient l'un des {{anch ("Noms d'erreur", "constantes de code d'erreur")}} ou 0 si aucun ne correspond. Ce champ est utilisé pour des raisons historiques. Les nouvelles exceptions DOM ne l'utilisent plus : elles mettent cette information dans l'attribut {{domxref("DOMException.name")}}.</dd>
- <dt>{{domxref("DOMException.message")}} {{readOnlyInline}}</dt>
- <dd>Returne une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) représentant un message ou une description associé avec le <a href="/en-US/docs/Web/API/DOMException#Error_names">nom d'erreur</a> donné.</dd>
- <dt>{{domxref("DOMException.name")}} {{readOnlyInline}}</dt>
- <dd>Retourne une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) qui contient l'une des chaînes associées à un <a href="#Error_names">nom d'erreur</a>.</dd>
-</dl>
-
-<h2 id="Noms_d'erreur">Noms d'erreur</h2>
-
-<p>Les noms d'erreurs courants sont répertoriés ici. Certaines API définissent leurs propres ensembles de noms, il ne s'agit donc pas ici nécessairement d'une liste complète.</p>
-
-<div class="note">
-<p><strong>Note :</strong> Parce qu'historiquement les erreurs ont été identifiées par une valeur numérique qui correspondait à une variable nommée définie pour avoir cette valeur, certaines des entrées ci-dessous indiquent la valeur de code héritée et le nom de constante qui ont été utilisés dans le passé.</p>
-</div>
-
-<dl>
- <dt><code>IndexSizeError</code></dt>
- <dd>L'index n'est pas dans la plage autorisée. Par exemple, cela peut être lancé par un objet {{ domxref("Range") }}. (Valeur de code héritée : <code>1</code> et nom de la constante héritée : <code>INDEX_SIZE_ERR</code>)</dd>
- <dt><code>HierarchyRequestError</code></dt>
- <dd>La hiérarchie de l'arborescence des nœuds est incorrecte. ( Valeur de code héritée : <code>3</code> et nom de la constante héritée : <code>HIERARCHY_REQUEST_ERR</code>)</dd>
- <dt><code>WrongDocumentError</code></dt>
- <dd>L'objet est dans le mauvais {{ domxref("Document") }}. ( Valeur de code héritée : <code>4</code> et nom de la constante héritée : <code>WRONG_DOCUMENT_ERR</code>)</dd>
- <dt><code>InvalidCharacterError</code></dt>
- <dd>La chaîne contient des caractères non valides. (Valeur de code héritée : <code>5</code> et nom de la constante héritée : <code>INVALID_CHARACTER_ERR</code>)</dd>
- <dt><code>NoModificationAllowedError</code></dt>
- <dd>L'objet ne peut être modifié. (Valeur de code héritée : <code>7</code> et nom de la constante héritée : <code>NO_MODIFICATION_ALLOWED_ERR</code>)</dd>
- <dt><code>NotFoundError</code></dt>
- <dd>L'objet ne peut être trouvé ici. (Valeur de code héritée : <code>8</code> et nom de la constante héritée : <code>NOT_FOUND_ERR</code>)</dd>
- <dt><code>NotSupportedError</code></dt>
- <dd>L'opération n'est pas supportée. (Valeur de code héritée : <code>9</code> et nom de la constante héritée : <code>NOT_SUPPORTED_ERR</code>)</dd>
- <dt><code>InvalidStateError</code></dt>
- <dd>L'objet est dans un état non valide. (Valeur de code héritée : <code>11</code> et nom de la constante héritée : <code>INVALID_STATE_ERR</code>)</dd>
- <dt><code>SyntaxError</code></dt>
- <dd>La chaîne ne correspond pas au modèle attendu. (Valeur de code héritée : <code>12</code> et nom de la constante héritée : <code>SYNTAX_ERR</code>)</dd>
- <dt><code>InvalidModificationError</code></dt>
- <dd>L'objet ne peut pas être modifié de cette manière. (Valeur de code héritée : <code>13</code> et nom de la constante héritée : <code>INVALID_MODIFICATION_ERR</code>)</dd>
- <dt><code>NamespaceError</code></dt>
- <dd>L'opération n'est pas autorisée par Namespaces en XML. (Valeur de code héritée : <code>14</code> et nom de la constante héritée : <code>NAMESPACE_ERR</code>)</dd>
- <dt><code>InvalidAccessError</code></dt>
- <dd>L'objet ne prend pas en charge l'opération ou l'argument. (Valeur de code héritée : <code>15</code> et nom de la constante héritée : <code>INVALID_ACCESS_ERR</code>)</dd>
- <dt><code>TypeMismatchError</code> {{deprecated_inline}}</dt>
- <dd>Le type de l'objet ne correspond pas au type attendu. (Valeur de code héritée : <code>17</code> et nom de la constante héritée : <code>TYPE_MISMATCH_ERR</code>). Cette valeur est dépéciée, l'exception {{jsxref("TypeError")}} JavaScript est maintenant utilisée à la place d'une <code>DOMException</code> avec cette valeur.</dd>
- <dt><code>SecurityError</code> {{experimental_inline}}</dt>
- <dd>L'opération n'est pas sécurisée. (Valeur de code héritée : <code>18</code> et nom de la constante héritée : <code>SECURITY_ERR</code>)</dd>
- <dt><code>NetworkError</code> {{experimental_inline}}</dt>
- <dd>Une erreur réseau s'est produite. (Valeur de code héritée : <code>19</code> et nom de la constante héritée : <code>NETWORK_ERR</code>)</dd>
- <dt><code>AbortError</code> {{experimental_inline}}</dt>
- <dd>L'opération a été annulée (Valeur de code héritée : <code>20</code> et nom de la constante héritée : <code>ABORT_ERR</code>)</dd>
- <dt><code>URLMismatchError</code> {{experimental_inline}}</dt>
- <dd>L'URL donnée ne correspond pas à une autre URL. (Valeur de code héritée : <code>21</code> et nom de la constante héritée : <code>URL_MISMATCH_ERR</code>)</dd>
- <dt><code>QuotaExceededError</code> {{experimental_inline}}</dt>
- <dd>Le quota a été dépassé. (Valeur de code héritée : <code>22</code> et nom de la constante héritée : <code>QUOTA_EXCEEDED_ERR</code>)</dd>
- <dt><code>TimeoutError</code> {{experimental_inline}}</dt>
- <dd>Le temps est dépassé. (Valeur de code héritée : <code>23</code> et nom de la constante héritée : <code>TIMEOUT_ERR</code>)</dd>
- <dt><code>InvalidNodeTypeError</code> {{experimental_inline}}</dt>
- <dd>Le noeud est incorrect ou a un ancêtre incorrect pour cette opération. (Valeur de code héritée : <code>24</code> et nom de la constante héritée : <code>INVALID_NODE_TYPE_ERR</code>)</dd>
- <dt><code>DataCloneError</code> {{experimental_inline}}</dt>
- <dd>L'objet ne peut pas être cloné. ( Valeur de code héritée : <code>25</code> et nom de la constante héritée : <code>DATA_CLONE_ERR</code>)</dd>
- <dt><code>EncodingError</code> {{experimental_inline}}</dt>
- <dd>L'opération de codage ou de décodage a échoué (Pas de valeur de code ni de nom de constante hérités).</dd>
- <dt><code>NotReadableError</code> {{experimental_inline}}</dt>
- <dd>L'opération de lecture entrée / sortie a échoué (Pas de valeur de code ni de nom de constante hérités).</dd>
- <dt><code>UnknownError</code> {{experimental_inline}}</dt>
- <dd>L'opération a échoué pour une raison transitoire inconnue (par exemple dépassement de mémoire) (Pas de valeur de code ni de nom de constante hérités) .</dd>
- <dt><code>ConstraintError</code> {{experimental_inline}}</dt>
- <dd>Une opération de mutation dans une transaction a échoué car une contrainte n'a pas été satisfaite (Pas de valeur de code ni de nom de constante hérités) .</dd>
- <dt><code>DataError</code> {{experimental_inline}}</dt>
- <dd>Provided data is inadequate (No legacy code value and constant name).</dd>
- <dt><code>TransactionInactiveError</code> {{experimental_inline}}</dt>
- <dd>Une demande a été placée contre une transaction qui n'est actuellement pas active ou qui est terminée (Pas de valeur de code ni de nom de constante hérités).</dd>
- <dt><code>ReadOnlyError</code> {{experimental_inline}}</dt>
- <dd>L'opération de mutation a été tentée dans une transaction "en lecture seule" (Pas de valeur de code ni de nom de constante hérités).</dd>
- <dt><code>VersionError</code> {{experimental_inline}}</dt>
- <dd>Une tentative a été faite pour ouvrir une base de données en utilisant une version inférieure à la version existante (Pas de valeur de code ni de nom de constante hérités).</dd>
- <dt><code>OperationError</code> {{experimental_inline}}</dt>
- <dd>L'opération a échoué pour une raison spécifique à l'opération (Pas de valeur de code ni de nom de constante hérités).</dd>
- <dt><code>NotAllowedError</code> {{experimental_inline}}</dt>
- <dd>La demande n'est pas autorisée par l'agent utilisateur ou la plateforme dans le contexte actuel, peut-être parce que l'utilisateur a refusé la permission  (Pas de valeur de code ni de nom de constante hérités).</dd>
-</dl>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('WebIDL', '#es-DOMException-call', 'constructor')}}</td>
-   <td>{{Spec2('WebIDL')}}</td>
-   <td>Ajout du constructeur pour la classe <code>DOMException</code>. Ajout des valeurs <code>NotReadableError</code>, <code>UnknownError</code>, <code>ConstraintError</code>, <code>DataError</code>, <code>TransactionInactiveError</code>, <code>ReadOnlyError</code>, <code>VersionError</code>, <code>OperationError</code> et <code>NotAllowedError</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM4', '#exception-domexception', 'DOMException')}}</td>
-   <td>{{Spec2('DOM4')}}</td>
-   <td>Ajout des <code>SECURITY_ERR</code>, <code>NETWORK_ERR</code>, <code>ABORT_ERR</code>, <code>URL_MISMATCH_ERR</code>, <code>QUOTA_EXCEEDED_ERR</code>, <code>TIMEOUT_ERR</code>, <code>INVALID_NODE_TYPE_ERR</code>, et <code>DATA_CLONE_ERR</code>. La propriété <code>code</code> a été dépréciée pour les valeurs d'exception. La valeur <code>EncodingError</code> ajoutée.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM3 Core', 'core.html#ID-17189187', 'DOMException')}}</td>
-   <td>{{Spec2('DOM3 Core')}}</td>
-   <td>Ajout de <code>VALIDATION_ERR</code> et <code>TYPE_MISMATCH_ERR</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Core', 'core.html#ID-17189187', 'DOMException')}}</td>
-   <td>{{Spec2('DOM2 Core')}}</td>
-   <td>Ajout de <code>INVALID_STATE_ERR</code>, <code>SYNTAX_ERR</code>, <code>INVALID_MODIFICATION_ERR</code>, <code>NAMESPACE_ERR</code>, and <code>INVALID_ACCESS_ERR</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM1', 'level-one-core.html#ID-17189187', 'DOMException')}}</td>
-   <td>{{Spec2('DOM1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.DOMException")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{ domxref("DOMError") }}</li>
-</ul>
+{{ APIRef("DOM") }}
+
+L'interface **`DOMException`** représente un évènement anormal (appelé **exception**) qui appraît suite à l'appel d'une méthode ou à l'accès à une propriété d'une API web. C'est essentiellement lié à la façon dont les conditions d'erreur sont décrites dans les API web.
+
+Chaque exception a un **nom**, qui est une courte chaîne identifiant l'erreur ou la condition anormale.
+
+## Constructeur
+
+- {{domxref("DOMException.DOMException()", "DOMException()")}} {{experimental_inline}}
+  - : Retourne un objet `DOMException` avec un message et un nom spécifiés.
+
+## Propriétés
+
+- {{domxref("DOMException.code")}} {{deprecated_inline}} {{readOnlyInline}}
+  - : Renvoie un court message qui contient l'un des {{anch ("Noms d'erreur", "constantes de code d'erreur")}} ou 0 si aucun ne correspond. Ce champ est utilisé pour des raisons historiques. Les nouvelles exceptions DOM ne l'utilisent plus : elles mettent cette information dans l'attribut {{domxref("DOMException.name")}}.
+- {{domxref("DOMException.message")}} {{readOnlyInline}}
+  - : Returne une {{domxref("DOMString")}} (_chaîne de caractères_) représentant un message ou une description associé avec le [nom d'erreur](/en-US/docs/Web/API/DOMException#Error_names) donné.
+- {{domxref("DOMException.name")}} {{readOnlyInline}}
+  - : Retourne une {{domxref("DOMString")}} (_chaîne de caractères_) qui contient l'une des chaînes associées à un [nom d'erreur](#Error_names).
+
+## Noms d'erreur
+
+Les noms d'erreurs courants sont répertoriés ici. Certaines API définissent leurs propres ensembles de noms, il ne s'agit donc pas ici nécessairement d'une liste complète.
+
+> **Note :** Parce qu'historiquement les erreurs ont été identifiées par une valeur numérique qui correspondait à une variable nommée définie pour avoir cette valeur, certaines des entrées ci-dessous indiquent la valeur de code héritée et le nom de constante qui ont été utilisés dans le passé.
+
+- `IndexSizeError`
+  - : L'index n'est pas dans la plage autorisée. Par exemple, cela peut être lancé par un objet {{ domxref("Range") }}. (Valeur de code héritée : `1` et nom de la constante héritée : `INDEX_SIZE_ERR`)
+- `HierarchyRequestError`
+  - : La hiérarchie de l'arborescence des nœuds est incorrecte. ( Valeur de code héritée : `3` et nom de la constante héritée : `HIERARCHY_REQUEST_ERR`)
+- `WrongDocumentError`
+  - : L'objet est dans le mauvais {{ domxref("Document") }}. ( Valeur de code héritée : `4` et nom de la constante héritée : `WRONG_DOCUMENT_ERR`)
+- `InvalidCharacterError`
+  - : La chaîne contient des caractères non valides. (Valeur de code héritée : `5` et nom de la constante héritée : `INVALID_CHARACTER_ERR`)
+- `NoModificationAllowedError`
+  - : L'objet ne peut être modifié. (Valeur de code héritée : `7` et nom de la constante héritée : `NO_MODIFICATION_ALLOWED_ERR`)
+- `NotFoundError`
+  - : L'objet ne peut être trouvé ici. (Valeur de code héritée : `8` et nom de la constante héritée : `NOT_FOUND_ERR`)
+- `NotSupportedError`
+  - : L'opération n'est pas supportée. (Valeur de code héritée : `9` et nom de la constante héritée : `NOT_SUPPORTED_ERR`)
+- `InvalidStateError`
+  - : L'objet est dans un état non valide. (Valeur de code héritée : `11` et nom de la constante héritée : `INVALID_STATE_ERR`)
+- `SyntaxError`
+  - : La chaîne ne correspond pas au modèle attendu. (Valeur de code héritée : `12` et nom de la constante héritée : `SYNTAX_ERR`)
+- `InvalidModificationError`
+  - : L'objet ne peut pas être modifié de cette manière. (Valeur de code héritée : `13` et nom de la constante héritée : `INVALID_MODIFICATION_ERR`)
+- `NamespaceError`
+  - : L'opération n'est pas autorisée par Namespaces en XML. (Valeur de code héritée : `14` et nom de la constante héritée : `NAMESPACE_ERR`)
+- `InvalidAccessError`
+  - : L'objet ne prend pas en charge l'opération ou l'argument. (Valeur de code héritée : `15` et nom de la constante héritée : `INVALID_ACCESS_ERR`)
+- `TypeMismatchError` {{deprecated_inline}}
+  - : Le type de l'objet ne correspond pas au type attendu. (Valeur de code héritée : `17` et nom de la constante héritée : `TYPE_MISMATCH_ERR`). Cette valeur est dépéciée, l'exception {{jsxref("TypeError")}} JavaScript est maintenant utilisée à la place d'une `DOMException` avec cette valeur.
+- `SecurityError` {{experimental_inline}}
+  - : L'opération n'est pas sécurisée. (Valeur de code héritée : `18` et nom de la constante héritée : `SECURITY_ERR`)
+- `NetworkError` {{experimental_inline}}
+  - : Une erreur réseau s'est produite. (Valeur de code héritée : `19` et nom de la constante héritée : `NETWORK_ERR`)
+- `AbortError` {{experimental_inline}}
+  - : L'opération a été annulée (Valeur de code héritée : `20` et nom de la constante héritée : `ABORT_ERR`)
+- `URLMismatchError` {{experimental_inline}}
+  - : L'URL donnée ne correspond pas à une autre URL. (Valeur de code héritée : `21` et nom de la constante héritée : `URL_MISMATCH_ERR`)
+- `QuotaExceededError` {{experimental_inline}}
+  - : Le quota a été dépassé. (Valeur de code héritée : `22` et nom de la constante héritée : `QUOTA_EXCEEDED_ERR`)
+- `TimeoutError` {{experimental_inline}}
+  - : Le temps est dépassé. (Valeur de code héritée : `23` et nom de la constante héritée : `TIMEOUT_ERR`)
+- `InvalidNodeTypeError` {{experimental_inline}}
+  - : Le noeud est incorrect ou a un ancêtre incorrect pour cette opération. (Valeur de code héritée : `24` et nom de la constante héritée : `INVALID_NODE_TYPE_ERR`)
+- `DataCloneError` {{experimental_inline}}
+  - : L'objet ne peut pas être cloné. ( Valeur de code héritée : `25` et nom de la constante héritée : `DATA_CLONE_ERR`)
+- `EncodingError` {{experimental_inline}}
+  - : L'opération de codage ou de décodage a échoué (Pas de valeur de code ni de nom de constante hérités).
+- `NotReadableError` {{experimental_inline}}
+  - : L'opération de lecture entrée / sortie a échoué (Pas de valeur de code ni de nom de constante hérités).
+- `UnknownError` {{experimental_inline}}
+  - : L'opération a échoué pour une raison transitoire inconnue (par exemple dépassement de mémoire) (Pas de valeur de code ni de nom de constante hérités) .
+- `ConstraintError` {{experimental_inline}}
+  - : Une opération de mutation dans une transaction a échoué car une contrainte n'a pas été satisfaite (Pas de valeur de code ni de nom de constante hérités) .
+- `DataError` {{experimental_inline}}
+  - : Provided data is inadequate (No legacy code value and constant name).
+- `TransactionInactiveError` {{experimental_inline}}
+  - : Une demande a été placée contre une transaction qui n'est actuellement pas active ou qui est terminée (Pas de valeur de code ni de nom de constante hérités).
+- `ReadOnlyError` {{experimental_inline}}
+  - : L'opération de mutation a été tentée dans une transaction "en lecture seule" (Pas de valeur de code ni de nom de constante hérités).
+- `VersionError` {{experimental_inline}}
+  - : Une tentative a été faite pour ouvrir une base de données en utilisant une version inférieure à la version existante (Pas de valeur de code ni de nom de constante hérités).
+- `OperationError` {{experimental_inline}}
+  - : L'opération a échoué pour une raison spécifique à l'opération (Pas de valeur de code ni de nom de constante hérités).
+- `NotAllowedError` {{experimental_inline}}
+  - : La demande n'est pas autorisée par l'agent utilisateur ou la plateforme dans le contexte actuel, peut-être parce que l'utilisateur a refusé la permission  (Pas de valeur de code ni de nom de constante hérités).
+
+## Spécifications
+
+| Spécification                                                                                    | Status                       | Comment                                                                                                                                                                                                                                                           |
+| ------------------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('WebIDL', '#es-DOMException-call', 'constructor')}}             | {{Spec2('WebIDL')}}     | Ajout du constructeur pour la classe `DOMException`. Ajout des valeurs `NotReadableError`, `UnknownError`, `ConstraintError`, `DataError`, `TransactionInactiveError`, `ReadOnlyError`, `VersionError`, `OperationError` et `NotAllowedError`.                    |
+| {{SpecName('DOM4', '#exception-domexception', 'DOMException')}}             | {{Spec2('DOM4')}}     | Ajout des `SECURITY_ERR`, `NETWORK_ERR`, `ABORT_ERR`, `URL_MISMATCH_ERR`, `QUOTA_EXCEEDED_ERR`, `TIMEOUT_ERR`, `INVALID_NODE_TYPE_ERR`, et `DATA_CLONE_ERR`. La propriété `code` a été dépréciée pour les valeurs d'exception. La valeur `EncodingError` ajoutée. |
+| {{SpecName('DOM3 Core', 'core.html#ID-17189187', 'DOMException')}}         | {{Spec2('DOM3 Core')}} | Ajout de `VALIDATION_ERR` et `TYPE_MISMATCH_ERR`.                                                                                                                                                                                                                 |
+| {{SpecName('DOM2 Core', 'core.html#ID-17189187', 'DOMException')}}         | {{Spec2('DOM2 Core')}} | Ajout de `INVALID_STATE_ERR`, `SYNTAX_ERR`, `INVALID_MODIFICATION_ERR`, `NAMESPACE_ERR`, and `INVALID_ACCESS_ERR`.                                                                                                                                                |
+| {{SpecName('DOM1', 'level-one-core.html#ID-17189187', 'DOMException')}} | {{Spec2('DOM1')}}     | Définition initiale.                                                                                                                                                                                                                                              |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.DOMException")}}
+
+## Voir aussi
+
+- {{ domxref("DOMError") }}
diff --git a/files/fr/web/api/domhighrestimestamp/index.md b/files/fr/web/api/domhighrestimestamp/index.md
index b089be1d46..29993ca8bb 100644
--- a/files/fr/web/api/domhighrestimestamp/index.md
+++ b/files/fr/web/api/domhighrestimestamp/index.md
@@ -3,20 +3,21 @@ title: DOMHighResTimeStamp
 slug: Web/API/DOMHighResTimeStamp
 translation_of: Web/API/DOMHighResTimeStamp
 ---
-<p>{{APIRef("High Resolution Time")}}</p>
+{{APIRef("High Resolution Time")}}
 
-<p>Le type <code><strong>DOMHighResTimeStamp</strong></code> est un <code>double</code> et est utilisé pour stocker une valeur temporelle. La valeur peut représenter un point dans le temps ou la différence entre deux points dans le temps.</p>
+Le type **`DOMHighResTimeStamp`** est un `double` et est utilisé pour stocker une valeur temporelle. La valeur peut représenter un point dans le temps ou la différence entre deux points dans le temps.
 
-<p>L'unité est la milliseconde et sa précision est en principe de 5 µs (microsecondes). Cependant, si le navigateur n'est pas capable de fournir une valeur temporelle avec une précision de 5 microsecondes (en raison par exemple de contraintes hardware ou software), le navigateur peut représenter la valeur comme un temps en millisecondes avec une précision d'une milliseconde. Référez-vous également à la section ci-dessous concernant la réduction de précision temporelle contrôlée par les préférences du navigateur pour éviter les attaques de synchronisation et le fingerprinting.</p>
+L'unité est la milliseconde et sa précision est en principe de 5 µs (microsecondes). Cependant, si le navigateur n'est pas capable de fournir une valeur temporelle avec une précision de 5 microsecondes (en raison par exemple de contraintes hardware ou software), le navigateur peut représenter la valeur comme un temps en millisecondes avec une précision d'une milliseconde. Référez-vous également à la section ci-dessous concernant la réduction de précision temporelle contrôlée par les préférences du navigateur pour éviter les attaques de synchronisation et le fingerprinting.
 
-<p>De plus, si l'appareil ou le système d'exploitation sur lequel tourne le navigateur n'est pas doté d'une horloge avec une précision de l'ordre de la microseconde, la précision peut également être de l'ordre de la milliseconde.</p>
+De plus, si l'appareil ou le système d'exploitation sur lequel tourne le navigateur n'est pas doté d'une horloge avec une précision de l'ordre de la microseconde, la précision peut également être de l'ordre de la milliseconde.
 
-<h2 id="Précision_temporelle_réduite">Précision temporelle réduite</h2>
+## Précision temporelle réduite
 
-<p>Pour offrir une protection contre les attaques de synchronisation et le fingerprinting, la précision des timestamps peut être arrondie en fonction des préférences du navigateur.<br>
- Dans Firefox, l'option <code>privacy.reduceTimerPrecision</code> est activée par défaut et vaut 20µs par défaut dans Firefox 59; dans la version 60 cette valeur est portée à 2ms par défaut.</p>
+Pour offrir une protection contre les attaques de synchronisation et le fingerprinting, la précision des timestamps peut être arrondie en fonction des préférences du navigateur.
+Dans Firefox, l'option `privacy.reduceTimerPrecision` est activée par défaut et vaut 20µs par défaut dans Firefox 59; dans la version 60 cette valeur est portée à 2ms par défaut.
 
-<pre class="brush: js">// précision temporelle réduite (2ms) dans Firefox 60
+```js
+// précision temporelle réduite (2ms) dans Firefox 60
 event.timeStamp
 // 1519211809934
 // 1519211810362
@@ -30,69 +31,47 @@ event.timeStamp;
 // 1519129858900
 // 1519129864400
 // ...
-</pre>
+```
 
-<p>Dans Firefox, vous pouvez aussi activer <code>privacy.resistFingerprinting</code>, la précision sera alors de 100ms ou la valeur de <code>privacy.resistFingerprinting.reduceTimerPrecision.microseconds</code>, la valeur la plus large étant retenue.</p>
+Dans Firefox, vous pouvez aussi activer `privacy.resistFingerprinting`, la précision sera alors de 100ms ou la valeur de `privacy.resistFingerprinting.reduceTimerPrecision.microseconds`, la valeur la plus large étant retenue.
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<p><em>Ce <em>type</em> n'a pas de propriétés. C'est une valeur à virgule flottante double précision.</em></p>
+*Ce *type* n'a pas de propriétés. C'est une valeur à virgule flottante double précision.*
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>La valeur d'un <code>DOMHighResTimeStamp</code> est un nombre flottant double précision qui décrit le nombre de millisecondes (avec une précision de 5 microsecondes si l'appareil le supporte) écoulé entre deux points dans le temps. Le temps de départ peut être soit un point spécifique dans le temps déterminé par le script d'un site web ou d'une application, ou l'<strong>origine temporelle</strong>.</p>
+La valeur d'un `DOMHighResTimeStamp` est un nombre flottant double précision qui décrit le nombre de millisecondes (avec une précision de 5 microsecondes si l'appareil le supporte) écoulé entre deux points dans le temps. Le temps de départ peut être soit un point spécifique dans le temps déterminé par le script d'un site web ou d'une application, ou l'**origine temporelle**.
 
-<h4 id="L'origine_temporelle">L'origine temporelle</h4>
+#### L'origine temporelle
 
-<p>L'<strong>origine temporelle</strong> est une heure qui est considéré comme l'heure de commencement de la vie du document. Elle est calculée comme suit :</p>
+L'**origine temporelle** est une heure qui est considéré comme l'heure de commencement de la vie du document. Elle est calculée comme suit :
 
-<ul>
- <li>Si l'{{Glossary("objet global")}} du script est {{domxref("Window")}}, l'origine temporelle est déterminée comme suit :
-  <ul>
-   <li>Si le {{domxref("Document")}} courant est le premier à être chargé dans la fenêtre, l'origine temporelle est l'heure à laquelle le contexte du navigateur a été créé.</li>
-   <li>Si pendant le processus de déchargement du document précédemment chargé dans la fenêtre, un dialogue de confirmation a été affiché pour demander à l'utilisateur de confirmer s'il souhaite quitter la page précédente, l'origine temporelle est l'heure à laquelle l'utilisateur a confirmé que naviguer vers la nouvelle page était acceptable.</li>
-   <li>Si aucun des points ci-dessus ne détermine l'origine temporelle, celle-ci est l'heure à laquelle la navigation responsable de la création du <code>Document</code> courant de la fenêtre a eu lieu.</li>
-  </ul>
- </li>
- <li>Si l'objet global du script est un {{domxref("WorkerGlobalScope")}} (si le script tourne comme un <em>web worker</em>), l'origine temporelle est le moment auquel le worker a été créé.</li>
- <li>Dans tous les autres cas, l'origine temporelle est <code>undefined</code>.</li>
-</ul>
+- Si l'{{Glossary("objet global")}} du script est {{domxref("Window")}}, l'origine temporelle est déterminée comme suit :
 
-<h2 id="Méthodes">Méthodes</h2>
+  - Si le {{domxref("Document")}} courant est le premier à être chargé dans la fenêtre, l'origine temporelle est l'heure à laquelle le contexte du navigateur a été créé.
+  - Si pendant le processus de déchargement du document précédemment chargé dans la fenêtre, un dialogue de confirmation a été affiché pour demander à l'utilisateur de confirmer s'il souhaite quitter la page précédente, l'origine temporelle est l'heure à laquelle l'utilisateur a confirmé que naviguer vers la nouvelle page était acceptable.
+  - Si aucun des points ci-dessus ne détermine l'origine temporelle, celle-ci est l'heure à laquelle la navigation responsable de la création du `Document` courant de la fenêtre a eu lieu.
 
-<p><em>Ce type n'a pas de méthodes.</em></p>
+- Si l'objet global du script est un {{domxref("WorkerGlobalScope")}} (si le script tourne comme un _web worker_), l'origine temporelle est le moment auquel le worker a été créé.
+- Dans tous les autres cas, l'origine temporelle est `undefined`.
 
-<h2 id="Specifications">Spécifications</h2>
+## Méthodes
 
-<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('Highres Time Level 2', '#dom-domhighrestimestamp', 'DOMHighResTimeStamp')}}</td>
-   <td>{{Spec2('Highres Time Level 2')}}</td>
-   <td>Définitions plus strictes des interfaces et des types.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('Highres Time', '#sec-DOMHighResTimeStamp', 'DOMHighResTimeStamp')}}</td>
-   <td>{{Spec2('Highres Time')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+_Ce type n'a pas de méthodes._
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Spécifications
 
-<p>{{Compat("api.DOMHighResTimestamp")}}</p>
+| Spécification                                                                                                        | Statut                                       | Commentaire                                            |
+| -------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | ------------------------------------------------------ |
+| {{SpecName('Highres Time Level 2', '#dom-domhighrestimestamp', 'DOMHighResTimeStamp')}} | {{Spec2('Highres Time Level 2')}} | Définitions plus strictes des interfaces et des types. |
+| {{SpecName('Highres Time', '#sec-DOMHighResTimeStamp', 'DOMHighResTimeStamp')}}             | {{Spec2('Highres Time')}}             | Définition initiale.                                   |
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Compatibilité des navigateurs
 
-<ul>
- <li><a href="/en-US/docs/Navigation_timing">Navigation Timing API</a></li>
- <li><a href="/en-US/docs/Web/API/Performance/now">performance.now()</a></li>
-</ul>
+{{Compat("api.DOMHighResTimestamp")}}
+
+## Voir aussi
+
+- [Navigation Timing API](/en-US/docs/Navigation_timing)
+- [performance.now()](/en-US/docs/Web/API/Performance/now)
diff --git a/files/fr/web/api/domimplementation/createdocument/index.md b/files/fr/web/api/domimplementation/createdocument/index.md
index 63bccf3cb1..ff61bff4b8 100644
--- a/files/fr/web/api/domimplementation/createdocument/index.md
+++ b/files/fr/web/api/domimplementation/createdocument/index.md
@@ -9,77 +9,53 @@ tags:
   - implementation
 translation_of: Web/API/DOMImplementation/createDocument
 ---
-<p>{{ApiRef("DOM")}}</p>
+{{ApiRef("DOM")}}
 
-<p>La méthode <strong><code>DOMImplementation.createDocument()</code></strong> crée et retourne un {{domxref("XMLDocument")}}.</p>
+La méthode **`DOMImplementation.createDocument()`** crée et retourne un {{domxref("XMLDocument")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>doc</em> = document.implementation.createDocument(<em>namespaceURI</em>, <em>qualifiedNameStr</em>, <em>documentType</em>);</pre>
+    doc = document.implementation.createDocument(namespaceURI, qualifiedNameStr, documentType);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><em>namespaceURI</em></dt>
- <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> contenant l'URI de l'espace de noms du document à créer, <code>ou null</code> si le document n'appartient à aucun espace de noms.</dd>
-</dl>
+- _namespaceURI_
+  - : Est une {{domxref("DOMString")}} _(chaîne de caractères)_ contenant l'URI de l'espace de noms du document à créer, `ou null` si le document n'appartient à aucun espace de noms.
 
-<dl>
- <dt><em>qualifiedNameStr </em></dt>
- <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères) </em>contenant le nom qualifié, c'est-à-dire optionnellement un préfixe et deux points, plus le nom local de l'élément racine, du document à créer.</dd>
-</dl>
+<!---->
 
-<dl>
- <dt><em>documentType </em>{{optional_inline}}</dt>
- <dd>Est le <a href="/fr/docs/Web/API/DocumentType"><code>DocumentType</code></a> du document à créer. Vaut <code>null </code>par défaut.</dd>
-</dl>
+- _qualifiedNameStr_
+  - : Est une {{domxref("DOMString")}} _(chaîne de caractères)_ contenant le nom qualifié, c'est-à-dire optionnellement un préfixe et deux points, plus le nom local de l'élément racine, du document à créer.
 
-<ul>
-</ul>
+<!---->
 
-<h2 id="Exemple">Exemple</h2>
+- _documentType_ {{optional_inline}}
+  - : Est le [`DocumentType`](/fr/docs/Web/API/DocumentType) du document à créer. Vaut `null `par défaut.
 
-<pre class="brush: js">var doc = document.implementation.createDocument ('http://www.w3.org/1999/xhtml', 'html', null);
+<!---->
+
+## Exemple
+
+```js
+var doc = document.implementation.createDocument ('http://www.w3.org/1999/xhtml', 'html', null);
 var body = document.createElementNS('http://www.w3.org/1999/xhtml', 'body');
 body.setAttribute('id', 'abc');
 doc.documentElement.appendChild(body);
 alert(doc.getElementById('abc')); // [objet HTMLBodyElement]
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#dom-domimplementation-createdocument', 'DOMImplementation.createDocument')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Modification du type retourné par <code>createDocument()</code> de {{domxref("Document")}} à{{domxref("XMLDocument")}}.<br>
-    Le troisième argument de <code>createDocument()</code>, <em>doctype</em>, est maintenant optionnel et vaut <code>null</code> par defaut.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM3 Core', 'core.html#Level-2-Core-DOM-createDocument', 'DOMImplementation.createDocument')}}</td>
-   <td>{{Spec2('DOM3 Core')}}</td>
-   <td>Pas de changement depuis {{SpecName("DOM2 Core")}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Core', 'core.html#Level-2-Core-DOM-createDocument', 'DOMImplementation.createDocument')}}</td>
-   <td>{{Spec2('DOM2 Core')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.DOMImplementation.createDocument")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>L'interface {{domxref("DOMImplementation")}} à laquelle la méthode appartient.</li>
-</ul>
+```
+
+## Spécifications
+
+| Spécification                                                                                                                                | Statut                           | Commentaire                                                                                                                                                                                                                                 |
+| -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('DOM WHATWG', '#dom-domimplementation-createdocument', 'DOMImplementation.createDocument')}}     | {{Spec2('DOM WHATWG')}} | Modification du type retourné par `createDocument()` de {{domxref("Document")}} à{{domxref("XMLDocument")}}. Le troisième argument de `createDocument()`, _doctype_, est maintenant optionnel et vaut `null` par defaut. |
+| {{SpecName('DOM3 Core', 'core.html#Level-2-Core-DOM-createDocument', 'DOMImplementation.createDocument')}} | {{Spec2('DOM3 Core')}}     | Pas de changement depuis {{SpecName("DOM2 Core")}}.                                                                                                                                                                                  |
+| {{SpecName('DOM2 Core', 'core.html#Level-2-Core-DOM-createDocument', 'DOMImplementation.createDocument')}} | {{Spec2('DOM2 Core')}}     | Définition initiale.                                                                                                                                                                                                                        |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.DOMImplementation.createDocument")}}
+
+## Voir aussi
+
+- L'interface {{domxref("DOMImplementation")}} à laquelle la méthode appartient.
diff --git a/files/fr/web/api/domimplementation/createdocumenttype/index.md b/files/fr/web/api/domimplementation/createdocumenttype/index.md
index b626e674ac..9c5aaa7d57 100644
--- a/files/fr/web/api/domimplementation/createdocumenttype/index.md
+++ b/files/fr/web/api/domimplementation/createdocumenttype/index.md
@@ -9,71 +9,49 @@ tags:
   - Reference
 translation_of: Web/API/DOMImplementation/createDocumentType
 ---
-<p>{{ ApiRef("DOM")}}</p>
+{{ ApiRef("DOM")}}
 
-<p>La méthode <strong><code>DOMImplementation.createDocumentType()</code></strong> renvoie un objet {{domxref("DocumentType")}}  qui peut être utilisé avec {{domxref("DOMImplementation.createDocument")}} lors de la création du document ou peut être intégré au document existant avec des méthodes comme {{domxref("Node.insertBefore()")}} ou {{domxref("Node.replaceChild()")}}.</p>
+La méthode **`DOMImplementation.createDocumentType()`** renvoie un objet {{domxref("DocumentType")}}  qui peut être utilisé avec {{domxref("DOMImplementation.createDocument")}} lors de la création du document ou peut être intégré au document existant avec des méthodes comme {{domxref("Node.insertBefore()")}} ou {{domxref("Node.replaceChild()")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>doctype</em> = document.implementation.createDocumentType(<em>qualifiedNameStr</em>, <em>publicId</em>, <em>systemId</em>)</pre>
+    doctype = document.implementation.createDocumentType(qualifiedNameStr, publicId, systemId)
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><em>qualifiedNameStr</em></dt>
- <dd>est une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) contenant le nom qualifié comme <code>svg:svg</code>.</dd>
-</dl>
+- _qualifiedNameStr_
+  - : est une {{domxref("DOMString")}} (_chaîne de caractères_) contenant le nom qualifié comme `svg:svg`.
 
-<dl>
- <dt><em>publicId</em></dt>
- <dd>est une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) contenant l'identifiant <code>PUBLIC</code>.</dd>
-</dl>
+<!---->
 
-<dl>
- <dt><em>systemId</em></dt>
- <dd>est une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) contenant les identifiants <code>SYSTEM</code>.</dd>
-</dl>
+- _publicId_
+  - : est une {{domxref("DOMString")}} (_chaîne de caractères_) contenant l'identifiant `PUBLIC`.
 
-<h2 id="Exemple">Exemple</h2>
+<!---->
 
-<pre class="brush: js">var dt = document.implementation.createDocumentType('svg:svg', '-//W3C//DTD SVG 1.1//EN', 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd');
+- _systemId_
+  - : est une {{domxref("DOMString")}} (_chaîne de caractères_) contenant les identifiants `SYSTEM`.
+
+## Exemple
+
+```js
+var dt = document.implementation.createDocumentType('svg:svg', '-//W3C//DTD SVG 1.1//EN', 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd');
 var d = document.implementation.createDocument('http://www.w3.org/2000/svg', 'svg:svg', dt);
 alert(d.doctype.publicId); // -//W3C//DTD SVG 1.1//EN
-</pre>
-
-<h2 id="Spécifications"> Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#dom-domimplementation-createdocumenttype', 'DOMImplementation.createDocumentType')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Pas de modification de {{SpecName("DOM3 Core")}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM3 Core', 'core.html#Level-2-Core-DOM-createDocType', 'DOMImplementation.createDocumentType')}}</td>
-   <td>{{Spec2('DOM3 Core')}}</td>
-   <td>Pas de modification de {{SpecName("DOM2 Core")}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Core', 'core.html##Level-2-Core-DOM-createDocType', 'DOMImplementation.createDocumentType')}}</td>
-   <td>{{Spec2('DOM2 Core')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.DOMImplementation.createDocumentType")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>L'interface {{domxref("DOMImplementation")}} à laquelle elle appartient.</li>
-</ul>
+```
+
+##  Spécifications
+
+| Spécification                                                                                                                                        | Statut                           | Commentaire                                             |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------- |
+| {{SpecName('DOM WHATWG', '#dom-domimplementation-createdocumenttype', 'DOMImplementation.createDocumentType')}} | {{Spec2('DOM WHATWG')}} | Pas de modification de {{SpecName("DOM3 Core")}} |
+| {{SpecName('DOM3 Core', 'core.html#Level-2-Core-DOM-createDocType', 'DOMImplementation.createDocumentType')}}     | {{Spec2('DOM3 Core')}}     | Pas de modification de {{SpecName("DOM2 Core")}} |
+| {{SpecName('DOM2 Core', 'core.html##Level-2-Core-DOM-createDocType', 'DOMImplementation.createDocumentType')}} | {{Spec2('DOM2 Core')}}     | Définition initiale.                                    |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.DOMImplementation.createDocumentType")}}
+
+## Voir aussi
+
+- L'interface {{domxref("DOMImplementation")}} à laquelle elle appartient.
diff --git a/files/fr/web/api/domimplementation/createhtmldocument/index.md b/files/fr/web/api/domimplementation/createhtmldocument/index.md
index 7bdda41853..05b850a02f 100644
--- a/files/fr/web/api/domimplementation/createhtmldocument/index.md
+++ b/files/fr/web/api/domimplementation/createhtmldocument/index.md
@@ -11,36 +11,36 @@ tags:
   - Référence(2)
 translation_of: Web/API/DOMImplementation/createHTMLDocument
 ---
-<p>{{ApiRef("DOM")}}{{SeeCompatTable}}</p>
+{{ApiRef("DOM")}}{{SeeCompatTable}}
 
-<p>La méthode <strong><code>DOMImplementation.createHTMLDocument()</code></strong>  crée un nouveau {{domxref("Document")}} HTML.</p>
+La méthode **`DOMImplementation.createHTMLDocument()`**  crée un nouveau {{domxref("Document")}} HTML.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>newDoc</em> = document.implementation.createHTMLDocument(<em>titre</em>);</pre>
+    newDoc = document.implementation.createHTMLDocument(titre);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><em>title</em>  {{optional_inline}}  (excepté dans IE)</dt>
- <dd>C'est une {{domxref("DOMString")}} qui contient le titre à donner au nouveau document HTML.</dd>
-</dl>
+- *title*  {{optional_inline}}  (excepté dans IE)
+  - : C'est une {{domxref("DOMString")}} qui contient le titre à donner au nouveau document HTML.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Dans cet exemple, on crée un nouveau document HTML que l'on insère dans un {{HTMLElement("iframe")}} dans le document courant.</p>
+Dans cet exemple, on crée un nouveau document HTML que l'on insère dans un {{HTMLElement("iframe")}} dans le document courant.
 
-<p>Ci-dessous, le code HTML pour cet exemple:</p>
+Ci-dessous, le code HTML pour cet exemple:
 
-<pre class="brush: html">&lt;body&gt;
-  &lt;p&gt;Cliquez &lt;a href="javascript:makeDocument()"&gt;ici&lt;/a&gt; pour créer un nouveau document et l'insérer au dessous.&lt;/p&gt;
-  &lt;iframe id="laFrame" src="about:blank" /&gt;
-&lt;/body&gt;
-</pre>
+```html
+<body>
+  <p>Cliquez <a href="javascript:makeDocument()">ici</a> pour créer un nouveau document et l'insérer au dessous.</p>
+  <iframe id="laFrame" src="about:blank" />
+</body>
+```
 
-<p>L'implémentation en JavaScript de la méthode <code>makeDocument()</code>:</p>
+L'implémentation en JavaScript de la méthode `makeDocument()`:
 
-<pre class="brush: js">function makeDocument() {
+```js
+function makeDocument() {
   var frame = document.getElementById("laFrame");
 
   var doc = document.implementation.createHTMLDocument("Nouveau Document");
@@ -61,49 +61,37 @@ translation_of: Web/API/DOMImplementation/createHTMLDocument
 
   destDocument.replaceChild(newNode, destDocument.documentElement);
 }
-</pre>
+```
 
-<p>Le code des lignes 4 à 12 permet la création du nouveau document HTML et l'insertion de contenu dans ce dernier. La ligne 4 utilise la méthode <code>createHTMLDocument()</code> pour construire le nouveau document HTML et définir son {{ HTMLElement("title") }} comme "Nouveau Document". Dans les lignes 5 et 6, est créé un nouvel élément paragraphe avec un simple contenu, enfin, les lignes 8 à 12 permettent l'insertion de ce nouveau paragraphe dans le nouveau document.</p>
+Le code des lignes 4 à 12 permet la création du nouveau document HTML et l'insertion de contenu dans ce dernier. La ligne 4 utilise la méthode `createHTMLDocument()` pour construire le nouveau document HTML et définir son {{ HTMLElement("title") }} comme "Nouveau Document". Dans les lignes 5 et 6, est créé un nouvel élément paragraphe avec un simple contenu, enfin, les lignes 8 à 12 permettent l'insertion de ce nouveau paragraphe dans le nouveau document.
 
-<p>La ligne 16 récupère le <code>contentDocument</code> <em>(contenu du document)</em> du cadre ; c'est le document dans lequel nous allons injecter le nouveau contenu. Les deux lignes suivantes permettent d'importer le contenu du nouveau document dans le nouveau contexte du document. Pour finir, la ligne 20 remplace le contenu du cadre par le contenu du nouveau document.</p>
+La ligne 16 récupère le `contentDocument` _(contenu du document)_ du cadre ; c'est le document dans lequel nous allons injecter le nouveau contenu. Les deux lignes suivantes permettent d'importer le contenu du nouveau document dans le nouveau contexte du document. Pour finir, la ligne 20 remplace le contenu du cadre par le contenu du nouveau document.
 
-<p><a href="/samples/domref/createHTMLDocument.html">Voir l'exemple sur une page</a></p>
+[Voir l'exemple sur une page](/samples/domref/createHTMLDocument.html)
 
-<p>Le document retourné est préconstruit avec le code HTML suivant :</p>
+Le document retourné est préconstruit avec le code HTML suivant :
 
-<pre class="brush: html">&lt;!doctype html&gt;
-&lt;html&gt;
-&lt;head&gt;
-&lt;title&gt;titre&lt;/title&gt;
-&lt;/head&gt;
-&lt;body&gt;
-&lt;/body&gt;
-&lt;/html&gt;
-</pre>
+```html
+<!doctype html>
+<html>
+<head>
+<title>titre</title>
+</head>
+<body>
+</body>
+</html>
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#dom-domimplementation-createhtmldocument', 'DOMImplementation.createHTMLDocument')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Première définition.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                                        | Statut                           | Commentaire          |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName('DOM WHATWG', '#dom-domimplementation-createhtmldocument', 'DOMImplementation.createHTMLDocument')}} | {{Spec2('DOM WHATWG')}} | Première définition. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.DOMImplementation.createHTMLDocument")}}</p>
+{{Compat("api.DOMImplementation.createHTMLDocument")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>L'interface {{domxref("DOMImplementation")}}.</li>
-</ul>
+- L'interface {{domxref("DOMImplementation")}}.
diff --git a/files/fr/web/api/domimplementation/hasfeature/index.md b/files/fr/web/api/domimplementation/hasfeature/index.md
index 45adfcedba..0d89dd38e1 100644
--- a/files/fr/web/api/domimplementation/hasfeature/index.md
+++ b/files/fr/web/api/domimplementation/hasfeature/index.md
@@ -7,65 +7,38 @@ tags:
   - Méthodes
 translation_of: Web/API/DOMImplementation/hasFeature
 ---
-<p>{{ApiRef("DOM")}}</p>
+{{ApiRef("DOM")}}
 
-<p>{{deprecated_header()}}</p>
+{{deprecated_header()}}
 
-<p>La méthode <strong><code>DOMImplementation.hasFeature()</code></strong> renvoie un {{domxref("Boolean")}} (<em>booléen</em>) indiquant si une fonctionnalité donnée est prise en charge. Cette méthode est dépréciée et les navigateurs modernes renvoient <code>true</code> (<em>vrai</em>) dans tous les cas.</p>
+La méthode **`DOMImplementation.hasFeature()`** renvoie un {{domxref("Boolean")}} (_booléen_) indiquant si une fonctionnalité donnée est prise en charge. Cette méthode est dépréciée et les navigateurs modernes renvoient `true` (_vrai_) dans tous les cas.
 
-<p>Les différentes implémentations ont été assez divergentes quant au type de caractéristiques signalées. La dernière version de la spécification a décidé de forcer cette méthode à toujours renvoyer <code>true</code>, là où la fonctionnalité était précisée et utilisée.</p>
+Les différentes implémentations ont été assez divergentes quant au type de caractéristiques signalées. La dernière version de la spécification a décidé de forcer cette méthode à toujours renvoyer `true`, là où la fonctionnalité était précisée et utilisée.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>flag</em> = document.implementation.hasFeature(<em>feature</em>, <em>version</em>);</pre>
+    flag = document.implementation.hasFeature(feature, version);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><em>feature</em></dt>
- <dd>est une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) représentant le nom de la fonctionnalité.</dd>
- <dt><em>version</em></dt>
- <dd>est une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) représentant la version de la spécification définissant la fonctionnalité.</dd>
-</dl>
+- _feature_
+  - : est une {{domxref("DOMString")}} (_chaîne de caractères_) représentant le nom de la fonctionnalité.
+- _version_
+  - : est une {{domxref("DOMString")}} (_chaîne de caractères_) représentant la version de la spécification définissant la fonctionnalité.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#dom-domimplementation-hasfeature', 'DOMImplementation.hasFeature')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Modifié pour toujours renvoyer <code>true</code> sauf pour les fonctionnalités SVG.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM3 Core', 'core.html#ID-5CED94D7', 'DOMImplementation.hasFeature')}}</td>
-   <td>{{Spec2('DOM3 Core')}}</td>
-   <td>Pas de modification de {{SpecName("DOM2 Core")}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Core', 'core.html#ID-5CED94D7', 'DOMImplementation.hasFeature')}}</td>
-   <td>{{Spec2('DOM2 Core')}}</td>
-   <td>Pas de modification de {{SpecName("DOM1")}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM1', 'level-one-core.html#ID-5CED94D7', 'DOMImplementation.hasFeature')}}</td>
-   <td>{{Spec2('DOM1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                    | Statut                           | Commentaire                                                              |
+| -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------------------------ |
+| {{SpecName('DOM WHATWG', '#dom-domimplementation-hasfeature', 'DOMImplementation.hasFeature')}} | {{Spec2('DOM WHATWG')}} | Modifié pour toujours renvoyer `true` sauf pour les fonctionnalités SVG. |
+| {{SpecName('DOM3 Core', 'core.html#ID-5CED94D7', 'DOMImplementation.hasFeature')}}                     | {{Spec2('DOM3 Core')}}     | Pas de modification de {{SpecName("DOM2 Core")}}                  |
+| {{SpecName('DOM2 Core', 'core.html#ID-5CED94D7', 'DOMImplementation.hasFeature')}}                     | {{Spec2('DOM2 Core')}}     | Pas de modification de {{SpecName("DOM1")}}                      |
+| {{SpecName('DOM1', 'level-one-core.html#ID-5CED94D7', 'DOMImplementation.hasFeature')}}             | {{Spec2('DOM1')}}         | Définition initiale.                                                     |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.DOMImplementation.hasFeature")}}</p>
+{{Compat("api.DOMImplementation.hasFeature")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>L'interface {{domxref("DOMImplementation")}} à laquelle elle est appartient.</li>
-</ul>
+- L'interface {{domxref("DOMImplementation")}} à laquelle elle est appartient.
diff --git a/files/fr/web/api/domimplementation/index.md b/files/fr/web/api/domimplementation/index.md
index 71e10fab87..e2e2c0f980 100644
--- a/files/fr/web/api/domimplementation/index.md
+++ b/files/fr/web/api/domimplementation/index.md
@@ -8,69 +8,40 @@ tags:
   - Reference
 translation_of: Web/API/DOMImplementation
 ---
-<p>{{ ApiRef("DOM") }}</p>
+{{ ApiRef("DOM") }}
 
-<p>L'interface <code><strong>DOMImplementation</strong></code> représente un objet fournissant des méthodes qui ne dépendent pas d'un document particulier. Un tel objet est renvoyé par la propriété {{domxref("Document.implementation")}}.</p>
+L'interface **`DOMImplementation`** représente un objet fournissant des méthodes qui ne dépendent pas d'un document particulier. Un tel objet est renvoyé par la propriété {{domxref("Document.implementation")}}.
 
-<h2 id="Propriété">Propriété</h2>
+## Propriété
 
-<p><em>Cette interface n'a pas de propriété spécifique et n'en hérite aucune.</em></p>
+_Cette interface n'a pas de propriété spécifique et n'en hérite aucune._
 
-<h2 id="Méthodes">Méthodes</h2>
+## Méthodes
 
-<p><em>Pas de méthode héritée.</em></p>
+_Pas de méthode héritée._
 
-<dl>
- <dt>{{domxref("DOMImplementation.createDocument()")}}</dt>
- <dd>Crée et retourne un {{domxref("XMLDocument")}}.</dd>
- <dt>{{domxref("DOMImplementation.createDocumentType()")}}</dt>
- <dd>Crée et retourne un {{domxref("DocumentType")}}.</dd>
- <dt>{{domxref("DOMImplementation.createHTMLDocument()")}}</dt>
- <dd>Crée et retourne un {{domxref("Document")}} HTML.</dd>
- <dt>{{domxref("DOMImplementation.hasFeature()")}}</dt>
- <dd>Retourne un {{domxref("Boolean")}} indiquant si une caractéristique donnée est supportée ou non. Cette fonction n'est pas fiable et est conservée uniquement à des fins de compatibilité : à l'exception des requêtes liées au SVG, elle renvoie toujours la valeur <code>true</code> <em>(vrai).</em> Les anciens navigateurs sont très incohérents dans leur comportement.</dd>
-</dl>
+- {{domxref("DOMImplementation.createDocument()")}}
+  - : Crée et retourne un {{domxref("XMLDocument")}}.
+- {{domxref("DOMImplementation.createDocumentType()")}}
+  - : Crée et retourne un {{domxref("DocumentType")}}.
+- {{domxref("DOMImplementation.createHTMLDocument()")}}
+  - : Crée et retourne un {{domxref("Document")}} HTML.
+- {{domxref("DOMImplementation.hasFeature()")}}
+  - : Retourne un {{domxref("Boolean")}} indiquant si une caractéristique donnée est supportée ou non. Cette fonction n'est pas fiable et est conservée uniquement à des fins de compatibilité : à l'exception des requêtes liées au SVG, elle renvoie toujours la valeur `true` _(vrai)._ Les anciens navigateurs sont très incohérents dans leur comportement.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#domimplementation', 'DOMImplementation')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Supprime la méthode <code>getFeature()</code>.<br>
-    Ajoute la méthode <code>createHTMLDocument()</code>.<br>
-    Modifie le type de retour de <code>createDocument()</code> de {{domxref("Document")}} à {{domxref("XMLDocument")}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM3 Core', 'core.html#ID-102161490', 'DOMImplementation')}}</td>
-   <td>{{Spec2('DOM3 Core')}}</td>
-   <td>Ajoute la méthode <code>getFeature()</code> (jamais implémentée par un agent utilisateur).</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Core', 'core.html#ID-102161490', 'DOMImplementation')}}</td>
-   <td>{{Spec2('DOM2 Core')}}</td>
-   <td>Ajoute les méthodes <code>createDocument()</code> et <code>createDocumentType()</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM1', 'level-one-core.html#ID-102161490', 'DOMImplementation')}}</td>
-   <td>{{Spec2('DOM1')}}</td>
-   <td>Définition initial.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                            | Statut                           | Commentaire                                                                                                                                                                                               |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('DOM WHATWG', '#domimplementation', 'DOMImplementation')}}             | {{Spec2('DOM WHATWG')}} | Supprime la méthode `getFeature()`. Ajoute la méthode `createHTMLDocument()`. Modifie le type de retour de `createDocument()` de {{domxref("Document")}} à {{domxref("XMLDocument")}}. |
+| {{SpecName('DOM3 Core', 'core.html#ID-102161490', 'DOMImplementation')}}         | {{Spec2('DOM3 Core')}}     | Ajoute la méthode `getFeature()` (jamais implémentée par un agent utilisateur).                                                                                                                           |
+| {{SpecName('DOM2 Core', 'core.html#ID-102161490', 'DOMImplementation')}}         | {{Spec2('DOM2 Core')}}     | Ajoute les méthodes `createDocument()` et `createDocumentType()`.                                                                                                                                         |
+| {{SpecName('DOM1', 'level-one-core.html#ID-102161490', 'DOMImplementation')}} | {{Spec2('DOM1')}}         | Définition initial.                                                                                                                                                                                       |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.DOMImplementation")}}</p>
+{{Compat("api.DOMImplementation")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/API/Document_Object_Model">Référence du DOM.</a></li>
-</ul>
+- [Référence du DOM.](/fr/docs/Web/API/Document_Object_Model)
diff --git a/files/fr/web/api/dommatrix/index.md b/files/fr/web/api/dommatrix/index.md
index b12c8ab849..58d5e2eada 100644
--- a/files/fr/web/api/dommatrix/index.md
+++ b/files/fr/web/api/dommatrix/index.md
@@ -8,22 +8,18 @@ translation_of: Web/API/DOMMatrix
 translation_of_original: Web/API/CSSMatrix
 original_slug: Web/API/CSSMatrix
 ---
-<div>
-<div>{{APIRef("CSSOM")}}{{Non-standard_header}}</div>
+{{APIRef("CSSOM")}}{{Non-standard_header}}
 
-<p>Une <code><strong>CSSMatrix</strong></code> représente une matrice homogène 4x4 dans laquelle il est possible d'appliquer des transformations 2D ou 3D. Cette classe faisait à un moment partie du module de transitions CSS (Level 3) mais elle n'a pas été propagée dans le brouillon de travail (<em>Working Draft</em>) actuel. Utilisez plutôt <code><a href="/en-US/docs/Web/API/DOMMatrix">DOMMatrix</a>.</code></p>
+Une **`CSSMatrix`** représente une matrice homogène 4x4 dans laquelle il est possible d'appliquer des transformations 2D ou 3D. Cette classe faisait à un moment partie du module de transitions CSS (Level 3) mais elle n'a pas été propagée dans le brouillon de travail (_Working Draft_) actuel. Utilisez plutôt `DOMMatrix.`
 
-<h2 id="Compatibilé_des_navigateurs">Compatibilé des navigateurs</h2>
+## Compatibilé des navigateurs
 
-<p>{{Compat("api.DOMMatrix")}}</p>
+{{Compat("api.DOMMatrix")}}
 
-<p>{{Compat("api.WebKitCSSMatrix")}}</p>
+{{Compat("api.WebKitCSSMatrix")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="https://msdn.microsoft.com/en-us/library/ie/hh772390(v=vs.85).aspx">MSDN : <code>Documentation sur MSCSSMatrix</code></a></li>
- <li><a href="https://developer.apple.com/library/safari/documentation/AudioVideo/Reference/WebKitCSSMatrixClassReference/index.html">Safari Developer Library : Documentation sur WebKitCSSMatrix</a></li>
- <li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=717722">Mozilla : Bug 717722 : Exécution de <code>(WebKit)CSSMatrix()</code></a></li>
-</ul>
-</div>
+- [MSDN : `Documentation sur MSCSSMatrix`](<https://msdn.microsoft.com/en-us/library/ie/hh772390(v=vs.85).aspx>)
+- [Safari Developer Library : Documentation sur WebKitCSSMatrix](https://developer.apple.com/library/safari/documentation/AudioVideo/Reference/WebKitCSSMatrixClassReference/index.html)
+- [Mozilla : Bug 717722 : Exécution de `(WebKit)CSSMatrix()`](https://bugzilla.mozilla.org/show_bug.cgi?id=717722)
diff --git a/files/fr/web/api/domobject/index.md b/files/fr/web/api/domobject/index.md
index e179526e13..b1952e52f3 100644
--- a/files/fr/web/api/domobject/index.md
+++ b/files/fr/web/api/domobject/index.md
@@ -7,25 +7,12 @@ tags:
   - Objets
 translation_of: Web/API/DOMObject
 ---
-<div>{{APIRef("DOM")}}{{Obsolete_header}}</div>
+{{APIRef("DOM")}}{{Obsolete_header}}
 
-<p>L'interface obsolète <code><strong>DOMObject</strong></code> était utilisée dans les versions antérieures de la spécification DOM comme classe de base  pour tout type de données. Les spécifications maintenant utilisent simplement le type {{jsxref("Object")}} JavaScript .</p>
+L'interface obsolète **`DOMObject`** était utilisée dans les versions antérieures de la spécification DOM comme classe de base  pour tout type de données. Les spécifications maintenant utilisent simplement le type {{jsxref("Object")}} JavaScript .
 
-<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("DOM3 Core", "core.html#DOMObject", "DOMObject")}}</td>
-   <td>{{Spec2("DOM3 Core")}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                    | Statut                       | Commentaire         |
+| -------------------------------------------------------------------------------- | ---------------------------- | ------------------- |
+| {{SpecName("DOM3 Core", "core.html#DOMObject", "DOMObject")}} | {{Spec2("DOM3 Core")}} | Définition initiale |
diff --git a/files/fr/web/api/domparser/index.md b/files/fr/web/api/domparser/index.md
index 28daa45409..75c3058daf 100644
--- a/files/fr/web/api/domparser/index.md
+++ b/files/fr/web/api/domparser/index.md
@@ -9,47 +9,44 @@ tags:
   - XML
 translation_of: Web/API/DOMParser
 ---
-<p>{{APIRef("DOM")}}</p>
+{{APIRef("DOM")}}
 
-<p>L'interface <strong><code>DOMParser</code></strong> permet d'analyser le code source {{Glossary("XML")}} ou {{Glossary("HTML")}} d'une chaîne de caractères dans le DOM {{domxref("Document")}}.</p>
+L'interface **`DOMParser`** permet d'analyser le code source {{Glossary("XML")}} ou {{Glossary("HTML")}} d'une chaîne de caractères dans le DOM {{domxref("Document")}}.
 
-<p>Vous pouvez effectuer l'opération inverse - convertir un arbre DOM en source XML ou HTML - en utilisant l'interface {{domxref("XMLSerializer")}}.</p>
+Vous pouvez effectuer l'opération inverse - convertir un arbre DOM en source XML ou HTML - en utilisant l'interface {{domxref("XMLSerializer")}}.
 
-<p>Dans le cas d'un document HTML, vous pouvez également remplacer des parties du DOM par de nouveaux arbres DOM construits à partir de HTML en définissant la valeur des propriétés {{domxref("Element.innerHTML", "innerHTML")}} et {{domxref("Element.outerHTML", "outerHTML")}}. Ces propriétés peuvent également être lues pour récupérer les fragments HTML correspondant au sous-arbre DOM correspondant.</p>
+Dans le cas d'un document HTML, vous pouvez également remplacer des parties du DOM par de nouveaux arbres DOM construits à partir de HTML en définissant la valeur des propriétés {{domxref("Element.innerHTML", "innerHTML")}} et {{domxref("Element.outerHTML", "outerHTML")}}. Ces propriétés peuvent également être lues pour récupérer les fragments HTML correspondant au sous-arbre DOM correspondant.
 
-<p>Notez que {{domxref("XMLHttpRequest")}} peut analyser le XML et le HTML directement à partir d'une ressource adressable par URL, en renvoyant un <code>Document</code> dans sa propriété {{domxref("XMLHttpRequest.response", "response")}}.</p>
+Notez que {{domxref("XMLHttpRequest")}} peut analyser le XML et le HTML directement à partir d'une ressource adressable par URL, en renvoyant un `Document` dans sa propriété {{domxref("XMLHttpRequest.response", "response")}}.
 
-<h2 id="Constructor">Constructeur</h2>
+## Constructeur
 
-<dl>
-  <dt>{{domxref("DOMParser.DOMParser","DOMParser()")}}</dt>
-  <dd>Crée un nouvel objet <code>DOMParser</code>.</dd>
-</dl>
+- {{domxref("DOMParser.DOMParser","DOMParser()")}}
+  - : Crée un nouvel objet `DOMParser`.
 
-<h2 id="Methods">Méthodes</h2>
+## Méthodes
 
-<dl>
-  <dt>{{domxref("DOMParser.parseFromString()")}}</dt>
-  <dd>Analyse une chaîne de caractères à l'aide de l'analyseur HTML ou de l'analyseur XML, et retourne un {{domxref("HTMLDocument")}} ou {{domxref("XMLDocument")}}.</dd>
-</dl>
+- {{domxref("DOMParser.parseFromString()")}}
+  - : Analyse une chaîne de caractères à l'aide de l'analyseur HTML ou de l'analyseur XML, et retourne un {{domxref("HTMLDocument")}} ou {{domxref("XMLDocument")}}.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<h3>Analyse syntaxique de XML, SVG et HTML</h3>
+### Analyse syntaxique de XML, SVG et HTML
 
-<p>Cet exemple montre comment analyser le XML, le SVG et le HTML. Notez qu'un type MIME de <code>text/html</code> invoquera l'analyseur HTML, et que tout autre type MIME accepté par cette méthode invoquera l'analyseur XML.</p>
+Cet exemple montre comment analyser le XML, le SVG et le HTML. Notez qu'un type MIME de `text/html` invoquera l'analyseur HTML, et que tout autre type MIME accepté par cette méthode invoquera l'analyseur XML.
 
-<pre class="brush: js">const parser = new DOMParser();
+```js
+const parser = new DOMParser();
 
-const xmlString = "&lt;warning&gt;Attention au tigre&lt;/warning&gt;";
+const xmlString = "<warning>Attention au tigre</warning>";
 const doc1 = parser.parseFromString(xmlString, "application/xml");
 // XMLDocument
 
-const svgString = "&lt;circle cx=\"50\" cy=\"50\" r=\"50\"/&gt;";
+const svgString = "<circle cx=\"50\" cy=\"50\" r=\"50\"/>";
 const doc2 = parser.parseFromString(svgString, "image/svg+xml");
 // XMLDocument
 
-const htmlString = "&lt;strong&gt;Attention au léopard&lt;/strong&gt;";
+const htmlString = "<strong>Attention au léopard</strong>";
 const doc3 = parser.parseFromString(htmlString, "text/html");
 // HTMLDocument
 
@@ -61,38 +58,21 @@ console.log(doc2.firstChild.tagName);
 
 console.log(doc3.body.firstChild.textContent);
 // "Attention au léopard"
-</pre>
-
-<h2 id="Specifications">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', '#dom-parsing-and-serialization', 'DOM parsing')}}
-      </td>
-      <td>{{Spec2('HTML WHATWG')}}</td>
-      <td></td>
-    </tr>
-  </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.DOMParser", 3)}}</p>
-
-<h2 id="See_also">Voir aussi</h2>
-
-<ul>
-  <li><a href="/efr/docs/Web/Guide/Parsing_and_serializing_XML">Analyse syntaxique et sérialisation du XML</a>
-  </li>
-  <li>{{domxref("XMLHttpRequest")}}</li>
-  <li>{{domxref("XMLSerializer")}}</li>
-  <li>{{jsxref("JSON.parse()")}} - contrepartie pour les documents {{jsxref("JSON")}}.</li>
-</ul>
+```
+
+## Spécifications
+
+| Spécification                                                                                        | Statut                           | Commentaire |
+| ---------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- |
+| {{SpecName('HTML WHATWG', '#dom-parsing-and-serialization', 'DOM parsing')}} | {{Spec2('HTML WHATWG')}} |             |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.DOMParser", 3)}}
+
+## Voir aussi
+
+- [Analyse syntaxique et sérialisation du XML](/efr/docs/Web/Guide/Parsing_and_serializing_XML)
+- {{domxref("XMLHttpRequest")}}
+- {{domxref("XMLSerializer")}}
+- {{jsxref("JSON.parse()")}} - contrepartie pour les documents {{jsxref("JSON")}}.
diff --git a/files/fr/web/api/dompoint/dompoint/index.md b/files/fr/web/api/dompoint/dompoint/index.md
index 952a148a55..6a04abf8ba 100644
--- a/files/fr/web/api/dompoint/dompoint/index.md
+++ b/files/fr/web/api/dompoint/dompoint/index.md
@@ -9,60 +9,48 @@ tags:
   - Quadrilatère
 translation_of: Web/API/DOMPoint/DOMPoint
 ---
-<p>{{APIRef("DOM")}}{{ SeeCompatTable() }}</p>
+{{APIRef("DOM")}}{{ SeeCompatTable() }}
 
-<p>Le constructeur <strong><code>DOMPoint()</code></strong> crée un nouvel objet {{domxref("DOMPoint")}}.</p>
+Le constructeur **`DOMPoint()`** crée un nouvel objet {{domxref("DOMPoint")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">var myDOMPoint = new DOMPoint(x, y, z, w);</pre>
+```js
+var myDOMPoint = new DOMPoint(x, y, z, w);
+```
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt>x</dt>
- <dd>La coordonnée <code>x</code> pour le nouveau <code>DOMPoint</code>.</dd>
- <dt>y</dt>
- <dd>La coordonnée <code>y</code> pour le nouveau <code>DOMPoint</code>.</dd>
- <dt>z</dt>
- <dd>La coordonnée <code>z</code> pour le nouveau <code>DOMPoint</code>.</dd>
- <dt>w</dt>
- <dd>La valeur de perspective du nouveau <code>DOMPoint</code>.</dd>
-</dl>
+- x
+  - : La coordonnée `x` pour le nouveau `DOMPoint`.
+- y
+  - : La coordonnée `y` pour le nouveau `DOMPoint`.
+- z
+  - : La coordonnée `z` pour le nouveau `DOMPoint`.
+- w
+  - : La valeur de perspective du nouveau `DOMPoint`.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Pour créer un nouveau <code>DOMPoint</code>, vous pourriez exécuter une ligne de code comme celle-ci :</p>
+Pour créer un nouveau `DOMPoint`, vous pourriez exécuter une ligne de code comme celle-ci :
 
-<pre class="brush: js">var myDOMPoint = new DOMPoint(0.4, 0.5, -0.5, 1);
+```js
+var myDOMPoint = new DOMPoint(0.4, 0.5, -0.5, 1);
 // le lancement de 'myDOMPoint' dans la console devrait renvoyer
 // DOMPoint { x: 0.4, y: 0.5, z: -0.5, w: 1 }
-</pre>
+```
 
-<h2 id="Specification">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Geometry Interfaces', '#dom-dompoint-dompointx-y-z-w', 'DOMPoint()')}}</td>
-   <td>{{Spec2('Geometry Interfaces')}}</td>
-   <td>La dernière version de la spécification est un ED.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                | Statut                                       | Commentaire                                        |
+| ------------------------------------------------------------------------------------------------------------ | -------------------------------------------- | -------------------------------------------------- |
+| {{SpecName('Geometry Interfaces', '#dom-dompoint-dompointx-y-z-w', 'DOMPoint()')}} | {{Spec2('Geometry Interfaces')}} | La dernière version de la spécification est un ED. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.DOMPoint.DOMPoint")}}</p>
+{{Compat("api.DOMPoint.DOMPoint")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("DOMPoint")}}</li>
- <li>{{domxref("DOMRect")}}</li>
-</ul>
+- {{domxref("DOMPoint")}}
+- {{domxref("DOMRect")}}
diff --git a/files/fr/web/api/dompoint/index.md b/files/fr/web/api/dompoint/index.md
index 13f1adc696..95225b3515 100644
--- a/files/fr/web/api/dompoint/index.md
+++ b/files/fr/web/api/dompoint/index.md
@@ -9,50 +9,45 @@ tags:
   - Quadrilatère
 translation_of: Web/API/DOMPoint
 ---
-<p>{{APIRef("Geometry Interfaces")}}{{ SeeCompatTable() }}</p>
+{{APIRef("Geometry Interfaces")}}{{ SeeCompatTable() }}
 
-<p>Un <strong><code>DOMPoint</code></strong> représente un point 2D ou 3D dans le système de coordonnées.</p>
+Un **`DOMPoint`** représente un point 2D ou 3D dans le système de coordonnées.
 
-<p>En général, un x positif représente une position à droite de l'origine ; un y positif est une position au-dessus de l'origine ; et un z positif est une position vers l'extérieur de l'écran (autrement dit, opposée à la direction de l'utilisateur).</p>
+En général, un x positif représente une position à droite de l'origine ; un y positif est une position au-dessus de l'origine ; et un z positif est une position vers l'extérieur de l'écran (autrement dit, opposée à la direction de l'utilisateur).
 
-<p>Il hérite de son parent {{domxref("DOMPointReadOnly")}}.</p>
+Il hérite de son parent {{domxref("DOMPointReadOnly")}}.
 
-<h2 id="Constructeur">Constructeur</h2>
+## Constructeur
 
-<dl>
- <dt>{{domxref("DOMPoint.DOMPoint","DOMPoint()")}}</dt>
- <dd>Crée un nouvel objet <code>DOMPoint</code>.</dd>
-</dl>
+- {{domxref("DOMPoint.DOMPoint","DOMPoint()")}}
+  - : Crée un nouvel objet `DOMPoint`.
 
-<h2 id="Méthodes">Méthodes</h2>
+## Méthodes
 
-<p><em><code>DOMPoint</code> hérite des méthodes de son parent {{domxref("DOMPointReadOnly")}}.</em></p>
+_`DOMPoint` hérite des méthodes de son parent {{domxref("DOMPointReadOnly")}}._
 
-<dl>
- <dt>{{domxref("DOMPointReadOnly.fromPoint")}}</dt>
- <dd>Traduit la position/perspective d'un <code>DOMPoint</code> à une nouvelle position (ne semble pas encore être pris en charge).</dd>
-</dl>
+- {{domxref("DOMPointReadOnly.fromPoint")}}
+  - : Traduit la position/perspective d'un `DOMPoint` à une nouvelle position (ne semble pas encore être pris en charge).
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<p><em><code>DOMPoint</code> hérite des propriétés de son parent {{domxref("DOMPointReadOnly")}}.</em></p>
+_`DOMPoint` hérite des propriétés de son parent {{domxref("DOMPointReadOnly")}}._
 
-<dl>
- <dt>{{domxref("DOMPointReadOnly.x")}}</dt>
- <dd>La coordonnée x du <code>DOMPoint</code>.</dd>
- <dt>{{domxref("DOMPointReadOnly.y")}}</dt>
- <dd>La coordonnée y du <code>DOMPoint</code>.</dd>
- <dt>{{domxref("DOMPointReadOnly.z")}}</dt>
- <dd>La coordonnée z du <code>DOMPoint</code>.</dd>
- <dt>{{domxref("DOMPointReadOnly.w")}}</dt>
- <dd>La valeur de perspective du <code>DOMPoint</code>.</dd>
-</dl>
+- {{domxref("DOMPointReadOnly.x")}}
+  - : La coordonnée x du `DOMPoint`.
+- {{domxref("DOMPointReadOnly.y")}}
+  - : La coordonnée y du `DOMPoint`.
+- {{domxref("DOMPointReadOnly.z")}}
+  - : La coordonnée z du `DOMPoint`.
+- {{domxref("DOMPointReadOnly.w")}}
+  - : La valeur de perspective du `DOMPoint`.
 
-<h2 id="Specification">Exemples</h2>
+## Exemples
 
-<p>Dans l' <a href="/fr/docs/Web/API/WebVR_API">API WebVR</a> (<em>VR = réalité virtuelle</em>), les valeurs <code>DOMPoint</code> sont utilisées pour représenter les points dans l'espace de coordonnées dans lequel l'affichage monté sur la tête de l'utilisateur existe. Dans l'extrait suivant, la position du VR HMD peut être récupérée en saisissant d'abord une référence à l'état actuel du capteur de position avec {{domxref("PositionSensorVRDevice.getState")}}, puis en accédant au résultat de la  {{domxref("VRPositionState.position","position")}} de la propriété {{domxref("VRPositionState")}}, qui renvoie un <code>DOMPoint</code>. Notez ci-dessous l'utilisation de <code>position.x</code>, <code>position.y</code> et <code>position.z</code>.</p>
+Dans l' [API WebVR](/fr/docs/Web/API/WebVR_API) (_VR = réalité virtuelle_), les valeurs `DOMPoint` sont utilisées pour représenter les points dans l'espace de coordonnées dans lequel l'affichage monté sur la tête de l'utilisateur existe. Dans l'extrait suivant, la position du VR HMD peut être récupérée en saisissant d'abord une référence à l'état actuel du capteur de position avec {{domxref("PositionSensorVRDevice.getState")}}, puis en accédant au résultat de la  {{domxref("VRPositionState.position","position")}} de la propriété {{domxref("VRPositionState")}}, qui renvoie un `DOMPoint`. Notez ci-dessous l'utilisation de `position.x`, `position.y` et `position.z`.
 
-<pre class="brush: js">function setView() {
+```js
+function setView() {
       var posState = gPositionSensor.getState();
       if(posState.hasPosition) {
         posPara.textContent = 'Position: x' + roundToTwo(posState.position.x) + " y"
@@ -60,7 +55,7 @@ translation_of: Web/API/DOMPoint
                                     + roundToTwo(posState.position.z);
         xPos = -posState.position.x * WIDTH * 2;
         yPos = posState.position.y * HEIGHT * 2;
-        if(-posState.position.z &gt; 0.01) {
+        if(-posState.position.z > 0.01) {
           zPos = -posState.position.z;
         } else {
           zPos = 0.01;
@@ -69,35 +64,21 @@ translation_of: Web/API/DOMPoint
 
   ...
 
-}</pre>
+}
+```
 
-<div class="note">
-<p><strong>Note :</strong> Voir notre <a href="https://github.com/mdn/webvr-tests/blob/gh-pages/positionsensorvrdevice/index.html">positionsensorvrdevice demo</a> pour le code complet.</p>
-</div>
+> **Note :** Voir notre [positionsensorvrdevice demo](https://github.com/mdn/webvr-tests/blob/gh-pages/positionsensorvrdevice/index.html) pour le code complet.
 
-<h2 id="Specification">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Geometry Interfaces', '#DOMPoint', 'DOMPoint')}}</td>
-   <td>{{Spec2('Geometry Interfaces')}}</td>
-   <td>Dernière version de la spécification est un ED.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                    | Statut                                       | Commentaire                                     |
+| -------------------------------------------------------------------------------- | -------------------------------------------- | ----------------------------------------------- |
+| {{SpecName('Geometry Interfaces', '#DOMPoint', 'DOMPoint')}} | {{Spec2('Geometry Interfaces')}} | Dernière version de la spécification est un ED. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.DOMPoint")}}</p>
+{{Compat("api.DOMPoint")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("DOMRect")}}</li>
-</ul>
+- {{domxref("DOMRect")}}
diff --git a/files/fr/web/api/dompointreadonly/index.md b/files/fr/web/api/dompointreadonly/index.md
index f200ed1509..8685e88378 100644
--- a/files/fr/web/api/dompointreadonly/index.md
+++ b/files/fr/web/api/dompointreadonly/index.md
@@ -9,66 +9,47 @@ tags:
   - Quadrilatère
 translation_of: Web/API/DOMPointReadOnly
 ---
-<p>{{APIRef("Geometry Interfaces")}}{{ SeeCompatTable() }}</p>
+{{APIRef("Geometry Interfaces")}}{{ SeeCompatTable() }}
 
-<p>L'interface <strong><code>DOMPointReadOnly</code></strong> spécifie les propriétés standard utilisées par {{domxref("DOMPoint")}} pour définir un point 2D ou 3D dans un système de coordonnées.</p>
+L'interface **`DOMPointReadOnly`** spécifie les propriétés standard utilisées par {{domxref("DOMPoint")}} pour définir un point 2D ou 3D dans un système de coordonnées.
 
-<h2 id="Constructeur">Constructeur</h2>
+## Constructeur
 
-<dl>
- <dt>{{domxref("DOMPointReadOnly.DOMPointReadOnly","DOMPointReadOnly()")}}</dt>
- <dd>Défini pour créer un nouvel objet <code>DOMPointReadOnly</code>, mais notez que ce constructeur ne peut pas être appelé par un JavaScript tiers : ce faisant, il retourne un  typeError "constructeur illégal" .</dd>
-</dl>
+- {{domxref("DOMPointReadOnly.DOMPointReadOnly","DOMPointReadOnly()")}}
+  - : Défini pour créer un nouvel objet `DOMPointReadOnly`, mais notez que ce constructeur ne peut pas être appelé par un JavaScript tiers : ce faisant, il retourne un  typeError "constructeur illégal" .
 
-<h2 id="Méthodes">Méthodes</h2>
+## Méthodes
 
-<dl>
- <dt>{{domxref("DOMPointReadOnly.fromPoint")}}</dt>
- <dd>Traduit la position / perspective d'un <code>DOMPoint</code> à une nouvelle position (ne semble pas encore être pris en charge).</dd>
- <dt>{{domxref("DOMPointReadOnly.matrixTransform")}}</dt>
- <dd>Applique une transformation matricielle à un objet <code>DOMPointReadOnly</code>  (ne semble pas encore être pris en charge).</dd>
- <dt>{{domxref("DOMPointReadOnly.toJSON()")}}</dt>
- <dd>Renvoie une représentation JSON de l'objet <code>DOMPointReadOnly</code>.</dd>
-</dl>
+- {{domxref("DOMPointReadOnly.fromPoint")}}
+  - : Traduit la position / perspective d'un `DOMPoint` à une nouvelle position (ne semble pas encore être pris en charge).
+- {{domxref("DOMPointReadOnly.matrixTransform")}}
+  - : Applique une transformation matricielle à un objet `DOMPointReadOnly`  (ne semble pas encore être pris en charge).
+- {{domxref("DOMPointReadOnly.toJSON()")}}
+  - : Renvoie une représentation JSON de l'objet `DOMPointReadOnly`.
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<dl>
- <dt>{{domxref("DOMPointReadOnly.x")}} {{readonlyInline}}</dt>
- <dd>La coordonnée x du <code>DOMPoint</code>.</dd>
- <dt>{{domxref("DOMPointReadOnly.y")}} {{readonlyInline}}</dt>
- <dd>La coordonnée y du <code>DOMPoint</code>.</dd>
- <dt>{{domxref("DOMPointReadOnly.z")}} {{readonlyInline}}</dt>
- <dd>La coordonnée z du <code>DOMPoint</code>.</dd>
- <dt>{{domxref("DOMPointReadOnly.w")}} {{readonlyInline}}</dt>
- <dd>La valeur de perspective du <code>DOMPoint</code>.</dd>
-</dl>
+- {{domxref("DOMPointReadOnly.x")}} {{readonlyInline}}
+  - : La coordonnée x du `DOMPoint`.
+- {{domxref("DOMPointReadOnly.y")}} {{readonlyInline}}
+  - : La coordonnée y du `DOMPoint`.
+- {{domxref("DOMPointReadOnly.z")}} {{readonlyInline}}
+  - : La coordonnée z du `DOMPoint`.
+- {{domxref("DOMPointReadOnly.w")}} {{readonlyInline}}
+  - : La valeur de perspective du `DOMPoint`.
 
-<h2 id="Specification">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Geometry Interfaces', '#DOMPoint', 'DOMPoint')}}</td>
-   <td>{{Spec2('Geometry Interfaces')}}</td>
-   <td>La dernière version de la spécification est un ED.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                    | Statut                                       | Commentaire                                        |
+| -------------------------------------------------------------------------------- | -------------------------------------------- | -------------------------------------------------- |
+| {{SpecName('Geometry Interfaces', '#DOMPoint', 'DOMPoint')}} | {{Spec2('Geometry Interfaces')}} | La dernière version de la spécification est un ED. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.DOMPointReadOnly")}}</p>
+{{Compat("api.DOMPointReadOnly")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>{{domxref("DOMPoint")}}</li>
-  <li>{{domxref("DOMRect")}}</li>
-  <li>{{domxref("DOMMatrix")}}</li>
-</ul>
+- {{domxref("DOMPoint")}}
+- {{domxref("DOMRect")}}
+- {{domxref("DOMMatrix")}}
diff --git a/files/fr/web/api/dompointreadonly/w/index.md b/files/fr/web/api/dompointreadonly/w/index.md
index 6eab04af2c..e9ca6e45b0 100644
--- a/files/fr/web/api/dompointreadonly/w/index.md
+++ b/files/fr/web/api/dompointreadonly/w/index.md
@@ -11,41 +11,30 @@ tags:
   - W
 translation_of: Web/API/DOMPointReadOnly/w
 ---
-<p>{{APIRef("DOM")}}{{ SeeCompatTable() }}</p>
+{{APIRef("DOM")}}{{ SeeCompatTable() }}
 
-<p>La propriété en lecture seule <code><strong>w</strong></code> de l'interface <strong><code>DOMPointReadOnly</code></strong> représente la perspective d'un point.</p>
+La propriété en lecture seule **`w`** de l'interface **`DOMPointReadOnly`** représente la perspective d'un point.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">var perspective = DOMPoint.w;</pre>
+```js
+var perspective = DOMPoint.w;
+```
 
-<h3 id="Specification">Valeur</h3>
+### Valeur
 
-<p>Un double.</p>
+Un double.
 
-<h2 id="Specification">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Geometry Interfaces', '#dom-dompointreadonly-w', 'w')}}</td>
-   <td>{{Spec2('Geometry Interfaces')}}</td>
-   <td>La dernière version de la spécification est un ED.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                            | Statut                                       | Commentaire                                        |
+| ---------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------------------------------------- |
+| {{SpecName('Geometry Interfaces', '#dom-dompointreadonly-w', 'w')}} | {{Spec2('Geometry Interfaces')}} | La dernière version de la spécification est un ED. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.DOMPointReadOnly.w")}}</p>
+{{Compat("api.DOMPointReadOnly.w")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("DOMPoint")}}</li>
-</ul>
+- {{domxref("DOMPoint")}}
diff --git a/files/fr/web/api/dompointreadonly/x/index.md b/files/fr/web/api/dompointreadonly/x/index.md
index 77c78c54d4..b7f01029d6 100644
--- a/files/fr/web/api/dompointreadonly/x/index.md
+++ b/files/fr/web/api/dompointreadonly/x/index.md
@@ -11,43 +11,32 @@ tags:
   - x
 translation_of: Web/API/DOMPointReadOnly/x
 ---
-<p>{{APIRef("DOM")}}{{ SeeCompatTable() }}</p>
+{{APIRef("DOM")}}{{ SeeCompatTable() }}
 
-<p>La propriété en lecture seule <code><strong>x</strong></code> de l'interface <strong><code>DOMPointReadOnly</code></strong> représente la coordonnée x d'un point.</p>
+La propriété en lecture seule **`x`** de l'interface **`DOMPointReadOnly`** représente la coordonnée x d'un point.
 
-<p>En général, x positif signifie à droite et négatif à gauche (par rapport à l'origine).</p>
+En général, x positif signifie à droite et négatif à gauche (par rapport à l'origine).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">var xPos = DOMPoint.x;</pre>
+```js
+var xPos = DOMPoint.x;
+```
 
-<h3 id="Specification">Valeur</h3>
+### Valeur
 
-<p>Un double.</p>
+Un double.
 
-<h2 id="Specification">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Geometry Interfaces', '#dom-dompointreadonly-x', 'x')}}</td>
-   <td>{{Spec2('Geometry Interfaces')}}</td>
-   <td>La dernière version de la spécification est un ED.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                            | Statut                                       | Commentaire                                        |
+| ---------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------------------------------------- |
+| {{SpecName('Geometry Interfaces', '#dom-dompointreadonly-x', 'x')}} | {{Spec2('Geometry Interfaces')}} | La dernière version de la spécification est un ED. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.DOMPointReadOnly.x")}}</p>
+{{Compat("api.DOMPointReadOnly.x")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("DOMPoint")}}</li>
-</ul>
+- {{domxref("DOMPoint")}}
diff --git a/files/fr/web/api/dompointreadonly/y/index.md b/files/fr/web/api/dompointreadonly/y/index.md
index 74e42ccf0f..60559d3d04 100644
--- a/files/fr/web/api/dompointreadonly/y/index.md
+++ b/files/fr/web/api/dompointreadonly/y/index.md
@@ -11,43 +11,32 @@ tags:
   - 'y'
 translation_of: Web/API/DOMPointReadOnly/y
 ---
-<p>{{APIRef("DOM")}}{{ SeeCompatTable() }}</p>
+{{APIRef("DOM")}}{{ SeeCompatTable() }}
 
-<p>La propriété en lecture seule <code><strong>y</strong></code> de l'interface <strong><code>DOMPointReadOnly</code></strong> représente la coordonnée y d'un point.</p>
+La propriété en lecture seule **`y`** de l'interface **`DOMPointReadOnly`** représente la coordonnée y d'un point.
 
-<p>En général, y positif signifie en haut et négatif en bas (par rapport à l'origine).</p>
+En général, y positif signifie en haut et négatif en bas (par rapport à l'origine).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">var yPos = DOMPoint.y;</pre>
+```js
+var yPos = DOMPoint.y;
+```
 
-<h3 id="Specification">Valeur</h3>
+### Valeur
 
-<p>Un double.</p>
+Un double.
 
-<h2 id="Specification">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Geometry Interfaces', '#dom-dompointreadonly-y', 'y')}}</td>
-   <td>{{Spec2('Geometry Interfaces')}}</td>
-   <td>La dernière version de la spécification est un ED.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                            | Statut                                       | Commentaire                                        |
+| ---------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------------------------------------- |
+| {{SpecName('Geometry Interfaces', '#dom-dompointreadonly-y', 'y')}} | {{Spec2('Geometry Interfaces')}} | La dernière version de la spécification est un ED. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.DOMPointReadOnly.y")}}</p>
+{{Compat("api.DOMPointReadOnly.y")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("DOMPoint")}}</li>
-</ul>
+- {{domxref("DOMPoint")}}
diff --git a/files/fr/web/api/dompointreadonly/z/index.md b/files/fr/web/api/dompointreadonly/z/index.md
index 3befe72ac8..eeeee1c153 100644
--- a/files/fr/web/api/dompointreadonly/z/index.md
+++ b/files/fr/web/api/dompointreadonly/z/index.md
@@ -12,43 +12,32 @@ tags:
   - z
 translation_of: Web/API/DOMPointReadOnly/z
 ---
-<p>{{APIRef("DOM")}}{{ SeeCompatTable() }}</p>
+{{APIRef("DOM")}}{{ SeeCompatTable() }}
 
-<p>La propriété en lecture seule <code><strong>z</strong></code> de l'interface <strong><code>DOMPointReadOnly</code></strong> représente la coordonnée z d'un point.</p>
+La propriété en lecture seule **`z`** de l'interface **`DOMPointReadOnly`** représente la coordonnée z d'un point.
 
-<p>En général, z positif signifie vers l'extérieur de l'écran (autrement dit, opposée à la direction de l'utilisateur) et négatif vers l'intérieur de l'écran (dans la même direction que l'utilisateur).</p>
+En général, z positif signifie vers l'extérieur de l'écran (autrement dit, opposée à la direction de l'utilisateur) et négatif vers l'intérieur de l'écran (dans la même direction que l'utilisateur).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">var zPos = DOMPoint.z;</pre>
+```js
+var zPos = DOMPoint.z;
+```
 
-<h3 id="Specification">Valeur</h3>
+### Valeur
 
-<p>Un double.</p>
+Un double.
 
-<h2 id="Specification">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Geometry Interfaces', '#dom-dompointreadonly-z', 'z')}}</td>
-   <td>{{Spec2('Geometry Interfaces')}}</td>
-   <td>La dernière version de la spécification est un ED.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                            | Statut                                       | Commentaire                                        |
+| ---------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------------------------------------- |
+| {{SpecName('Geometry Interfaces', '#dom-dompointreadonly-z', 'z')}} | {{Spec2('Geometry Interfaces')}} | La dernière version de la spécification est un ED. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.DOMPointReadOnly.z")}}</p>
+{{Compat("api.DOMPointReadOnly.z")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("DOMPoint")}}</li>
-</ul>
+- {{domxref("DOMPoint")}}
diff --git a/files/fr/web/api/domquad/index.md b/files/fr/web/api/domquad/index.md
index 2838177964..d891ef9db7 100644
--- a/files/fr/web/api/domquad/index.md
+++ b/files/fr/web/api/domquad/index.md
@@ -11,54 +11,37 @@ tags:
   - dimensions
 translation_of: Web/API/DOMQuad
 ---
-<p>{{SeeCompatTable}}{{APIRef("Geometry Interfaces")}}</p>
+{{SeeCompatTable}}{{APIRef("Geometry Interfaces")}}
 
-<p>Un <code>DOMQuad</code> est une collection de 4 <code>DOMPoint</code> définissant les coins d'un quadrilatère arbitraire. Renvoyer des <code>DOMQuad</code> permet à <code>getBoxQuads()</code> de retourner des informations précises, même lorsque des transformations 2D ou 3D arbitraires sont présentes. Il possède un attribut <code>bounds</code> pratique qui retourne un <code>DOMRectReadOnly</code> pour les cas où vous voulez juste un rectangle de délimitation aligné sur l'axe.</p>
+Un `DOMQuad` est une collection de 4 `DOMPoint` définissant les coins d'un quadrilatère arbitraire. Renvoyer des `DOMQuad` permet à `getBoxQuads()` de retourner des informations précises, même lorsque des transformations 2D ou 3D arbitraires sont présentes. Il possède un attribut `bounds` pratique qui retourne un `DOMRectReadOnly` pour les cas où vous voulez juste un rectangle de délimitation aligné sur l'axe.
 
-<h2 id="Constructeur">Constructeur</h2>
+## Constructeur
 
-<dl>
- <dt>{{domxref("DOMQuad.DOMQuad()")}}</dt>
- <dd>Crée un nouvel objet <code>DOMQuad</code>.</dd>
-</dl>
+- {{domxref("DOMQuad.DOMQuad()")}}
+  - : Crée un nouvel objet `DOMQuad`.
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<dl>
- <dt>p1,p2,p3,p4 {{readonlyinline}}</dt>
- <dd>sont des objets {{domxref("DOMPoint")}} pour chacun des 4 coins de l'objet<code> DOMQuad</code>.</dd>
-</dl>
+- p1,p2,p3,p4 {{readonlyinline}}
+  - : sont des objets {{domxref("DOMPoint")}} pour chacun des 4 coins de l'objet` DOMQuad`.
 
-<h2 id="Méthode">Méthode</h2>
+## Méthode
 
-<dl>
- <dt>{{domxref("DOMQuad.fromRect()")}}</dt>
- <dd>Renvoie un nouvel objet <code>DOMQuad</code> basé sur l'ensemble de coordonnées fournit.</dd>
- <dt>{{domxref("DOMQuad.fromQuad()")}}</dt>
- <dd>Renvoie un nouvel objet <code>DOMQuad</code> basé sur l'ensemble de coordonnées fournit.</dd>
- <dt>{{domxref("DOMQuad.getBounds()")}}</dt>
- <dd>Renvoie un objet {{domxref("DOMRect")}} avec les coordonnées et les dimensions de l'objet <code>DOMQuad</code>.</dd>
- <dt>{{domxref("DOMQuad.toJSON()")}}</dt>
- <dd>Renvoie une représentation JSON de l'objet <code>DOMQuad</code>.</dd>
-</dl>
+- {{domxref("DOMQuad.fromRect()")}}
+  - : Renvoie un nouvel objet `DOMQuad` basé sur l'ensemble de coordonnées fournit.
+- {{domxref("DOMQuad.fromQuad()")}}
+  - : Renvoie un nouvel objet `DOMQuad` basé sur l'ensemble de coordonnées fournit.
+- {{domxref("DOMQuad.getBounds()")}}
+  - : Renvoie un objet {{domxref("DOMRect")}} avec les coordonnées et les dimensions de l'objet `DOMQuad`.
+- {{domxref("DOMQuad.toJSON()")}}
+  - : Renvoie une représentation JSON de l'objet `DOMQuad`.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Geometry Interfaces','#DOMQuad','DOMQuad')}}</td>
-   <td>{{Spec2('Geometry Interfaces')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                | Statut                                       | Commentaire          |
+| ---------------------------------------------------------------------------- | -------------------------------------------- | -------------------- |
+| {{SpecName('Geometry Interfaces','#DOMQuad','DOMQuad')}} | {{Spec2('Geometry Interfaces')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.DOMQuad")}}</p>
+{{Compat("api.DOMQuad")}}
diff --git a/files/fr/web/api/domrect/domrect/index.md b/files/fr/web/api/domrect/domrect/index.md
index a138a60cd0..97b1733b6b 100644
--- a/files/fr/web/api/domrect/domrect/index.md
+++ b/files/fr/web/api/domrect/domrect/index.md
@@ -9,60 +9,48 @@ tags:
   - Rectangle
 translation_of: Web/API/DOMRect/DOMRect
 ---
-<p>{{APIRef("DOM")}}{{ SeeCompatTable() }}</p>
+{{APIRef("DOM")}}{{ SeeCompatTable() }}
 
-<p>Le constructeur <strong><code>DOMRect()</code></strong> crée un nouvel objet {{domxref("DOMRect")}}.</p>
+Le constructeur **`DOMRect()`** crée un nouvel objet {{domxref("DOMRect")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">var myDOMRect = new DOMRect(x, y, width, height);</pre>
+```js
+var myDOMRect = new DOMRect(x, y, width, height);
+```
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt>x</dt>
- <dd>La coordonnée <code>x</code> de l'orginie du <code>DOMRect</code>.</dd>
- <dt>y</dt>
- <dd>La coordonnée <code>y</code> de l'origine du <code>DOMRect</code>.</dd>
- <dt>width</dt>
- <dd>La largeur du <code>DOMRect</code>.</dd>
- <dt>height</dt>
- <dd>La hauteur du <code>DOMRect</code>.</dd>
-</dl>
+- x
+  - : La coordonnée `x` de l'orginie du `DOMRect`.
+- y
+  - : La coordonnée `y` de l'origine du `DOMRect`.
+- width
+  - : La largeur du `DOMRect`.
+- height
+  - : La hauteur du `DOMRect`.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Pour créer un nouveau <code>DOMPoint</code>, vous pouvez exécuter une ligne de code telle que celle-ci :</p>
+Pour créer un nouveau `DOMPoint`, vous pouvez exécuter une ligne de code telle que celle-ci :
 
-<pre class="brush: js">myDOMRect = new DOMRect(0,0,100,100);
+```js
+myDOMRect = new DOMRect(0,0,100,100);
 // l'exécution de 'myDOMRect' dans la console devrait alors renvoyer
 // DOMRect { x: 0, y: 0, width: 100, height: 100, top: 0, right: 100, bottom: 100, left: 0 }
-</pre>
+```
 
-<h2 id="Specification">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Geometry Interfaces', '#dom-domrectreadonly-domrectreadonlyx-y-width-height', 'DOMRect()')}}</td>
-   <td>{{Spec2('Geometry Interfaces')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                                | Statut                                       | Commentaire          |
+| -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------- |
+| {{SpecName('Geometry Interfaces', '#dom-domrectreadonly-domrectreadonlyx-y-width-height', 'DOMRect()')}} | {{Spec2('Geometry Interfaces')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.DOMRect.DOMRect")}}</p>
+{{Compat("api.DOMRect.DOMRect")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("DOMPoint")}}</li>
- <li>{{domxref("DOMRect")}}</li>
-</ul>
+- {{domxref("DOMPoint")}}
+- {{domxref("DOMRect")}}
diff --git a/files/fr/web/api/domrect/index.md b/files/fr/web/api/domrect/index.md
index a97d1c8d4e..103be19e93 100644
--- a/files/fr/web/api/domrect/index.md
+++ b/files/fr/web/api/domrect/index.md
@@ -9,81 +9,59 @@ tags:
   - Rectangle
 translation_of: Web/API/DOMRect
 ---
-<p>{{draft}}{{APIRef("Geometry Interfaces")}}{{ SeeCompatTable() }}</p>
+{{draft}}{{APIRef("Geometry Interfaces")}}{{ SeeCompatTable() }}
 
-<p>Un <strong><code>DOMRect</code></strong> représente un rectangle.</p>
+Un **`DOMRect`** représente un rectangle.
 
-<p>Le type de boîte représenté par le <code>DOMRect</code> est spécifié par la méthode ou la propriété qui l'a retourné. Par exemple, {{domxref("VREyeParameters.renderRect")}} de l'API WebVR spécifie la fenêtre d'un élément <a href="/fr/docs/Web/API/HTMLCanvasElement">canvas</a> dans laquelle le visuel pour un oeil doit être rendu.</p>
+Le type de boîte représenté par le `DOMRect` est spécifié par la méthode ou la propriété qui l'a retourné. Par exemple, {{domxref("VREyeParameters.renderRect")}} de l'API WebVR spécifie la fenêtre d'un élément [canvas](/fr/docs/Web/API/HTMLCanvasElement) dans laquelle le visuel pour un oeil doit être rendu.
 
-<p>Il hérite de son parent {{domxref("DOMRectReadOnly")}}.</p>
+Il hérite de son parent {{domxref("DOMRectReadOnly")}}.
 
-<p>{{InheritanceDiagram}}</p>
+{{InheritanceDiagram}}
 
-<h2 id="Constructeur">Constructeur</h2>
+## Constructeur
 
-<dl>
- <dt>{{domxref("DOMRect.DOMRect","DOMRect()")}}</dt>
- <dd>Crée un nouvel objet <code>DOMRect</code>.</dd>
-</dl>
+- {{domxref("DOMRect.DOMRect","DOMRect()")}}
+  - : Crée un nouvel objet `DOMRect`.
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<dl>
-</dl>
+_`DOMRect` hérite des propriétés de son parent {{domxref("DOMRectReadOnly")}}. À une différence près, elles ne sont plus en lecture seule._
 
-<p><em><code>DOMRect</code> hérite des propriétés de son parent {{domxref("DOMRectReadOnly")}}. À une différence près, elles ne sont plus en lecture seule.</em></p>
+- {{domxref("DOMRectReadOnly.x")}}
+  - : La coordonnée x de l'origine du `DOMRect`.
+- {{domxref("DOMRectReadOnly.y")}}
+  - : La coordonnée y de l'origine du `DOMRect`.
+- {{domxref("DOMRectReadOnly.width")}}
+  - : La largeur du `DOMRect`.
+- {{domxref("DOMRectReadOnly.height")}}
+  - : La hauteur du `DOMRect`.
+- {{domxref("DOMRectReadOnly.top")}}
+  - : Renvoie la valeur de la coordonnée supérieure de `DOMRect` (a la même valeur que `y`, ou `y + height` _(y + hauteur)_ si `height` est négative).
+- {{domxref("DOMRectReadOnly.right")}}
+  - : Renvoie la valeur de la coordonnée droite du `DOMRect` (a la même valeur que  `x + width` _(x + largeur)_, ou `x` si `width` est négative).
+- {{domxref("DOMRectReadOnly.bottom")}}
+  - : Renvoie la valeur de la coordonnée du bas du `DOMRect` (a la même valeur que  `y + height` _(y + hauteur)_, ou `y` si `height` est négative).
+- {{domxref("DOMRectReadOnly.left")}}
+  - : Renvoie la valeur de la coordonnée de gauche du `DOMRect` (a la même valeur que `x`, ou `x + width` _(x + largeur)_ si `width` est négative).
 
-<dl>
- <dt>{{domxref("DOMRectReadOnly.x")}}</dt>
- <dd>La coordonnée x de l'origine du <code>DOMRect</code>.</dd>
- <dt>{{domxref("DOMRectReadOnly.y")}}</dt>
- <dd>La coordonnée y de l'origine du <code>DOMRect</code>.</dd>
- <dt>{{domxref("DOMRectReadOnly.width")}}</dt>
- <dd>La largeur du <code>DOMRect</code>.</dd>
- <dt>{{domxref("DOMRectReadOnly.height")}}</dt>
- <dd>La hauteur du <code>DOMRect</code>.</dd>
- <dt>{{domxref("DOMRectReadOnly.top")}}</dt>
- <dd>Renvoie la valeur de la coordonnée supérieure de <code>DOMRect</code> (a la même valeur que <code>y</code>, ou <code>y + height</code> <em>(y + hauteur)</em> si <code>height</code> est négative).</dd>
- <dt>{{domxref("DOMRectReadOnly.right")}}</dt>
- <dd>Renvoie la valeur de la coordonnée droite du <code>DOMRect</code> (a la même valeur que  <code>x + width</code> <em>(x + largeur)</em>, ou <code>x</code> si <code>width</code> est négative).</dd>
- <dt>{{domxref("DOMRectReadOnly.bottom")}}</dt>
- <dd>Renvoie la valeur de la coordonnée du bas du <code>DOMRect</code> (a la même valeur que  <code>y + height</code> <em>(y + hauteur)</em>, ou <code>y</code> si <code>height</code> est négative).</dd>
- <dt>{{domxref("DOMRectReadOnly.left")}}</dt>
- <dd>Renvoie la valeur de la coordonnée de gauche du <code>DOMRect</code> (a la même valeur que <code>x</code>, ou <code>x + width</code> <em>(x + largeur)</em> si <code>width</code> est négative).</dd>
-</dl>
+## Méthodes
 
-<h2 id="Méthodes">Méthodes</h2>
+_`DOMRect` hérite des méthodes de son parent {{domxref("DOMRectReadOnly")}}._
 
-<p><em><code>DOMRect</code> hérite des méthodes de son parent {{domxref("DOMRectReadOnly")}}.</em></p>
+- {{domxref("DOMRectReadOnly.fromRect()")}}
+  - : Crée un nouvel objet `DOMRect` avec l'emplacement et les dimensions données.
 
-<dl>
- <dt>{{domxref("DOMRectReadOnly.fromRect()")}}</dt>
- <dd>Crée un nouvel objet <code>DOMRect</code> avec l'emplacement et les dimensions données.</dd>
-</dl>
+## Spécifications
 
-<h2 id="Specification">Spécifications</h2>
+| Spécification                                                                | Statut                                       | Commentaire          |
+| ---------------------------------------------------------------------------- | -------------------------------------------- | -------------------- |
+| {{SpecName('Geometry Interfaces', '#DOMRect', 'DOMRect')}} | {{Spec2('Geometry Interfaces')}} | Définition initiale. |
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Geometry Interfaces', '#DOMRect', 'DOMRect')}}</td>
-   <td>{{Spec2('Geometry Interfaces')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+## Compatibilité des navigateurs
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+{{Compat("api.DOMRect")}}
 
-<p>{{Compat("api.DOMRect")}}</p>
+## Voir aussi
 
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("DOMPoint")}}</li>
-</ul>
+- {{domxref("DOMPoint")}}
diff --git a/files/fr/web/api/domrectreadonly/bottom/index.md b/files/fr/web/api/domrectreadonly/bottom/index.md
index 16fb24cd52..5552416e2d 100644
--- a/files/fr/web/api/domrectreadonly/bottom/index.md
+++ b/files/fr/web/api/domrectreadonly/bottom/index.md
@@ -10,41 +10,30 @@ tags:
   - Rectangle
 translation_of: Web/API/DOMRectReadOnly/bottom
 ---
-<p>{{APIRef("DOM")}}{{ SeeCompatTable() }}</p>
+{{APIRef("DOM")}}{{ SeeCompatTable() }}
 
-<p>La propriété en lecture seule <code><strong>bottom</strong></code> d'une interface <strong><code>DOMRectReadOnly</code></strong> renvoie la valeur des coordonnées du pied du <code>DOMRect</code> (a la même valeur que <code>y + height</code> <em>(y + hauteur)</em>, ou <code>y</code> si <code>height</code> est négative).</p>
+La propriété en lecture seule **`bottom`** d'une interface **`DOMRectReadOnly`** renvoie la valeur des coordonnées du pied du `DOMRect` (a la même valeur que `y + height` _(y + hauteur)_, ou `y` si `height` est négative).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">var recBottom = DOMRect.bottom;</pre>
+```js
+var recBottom = DOMRect.bottom;
+```
 
-<h3 id="Specification">Valeur</h3>
+### Valeur
 
-<p>Un double.</p>
+Un double.
 
-<h2 id="Specification">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Geometry Interfaces', '#dom-domrectreadonly-bottom', 'bottom')}}</td>
-   <td>{{Spec2('Geometry Interfaces')}}</td>
-   <td>La dernière version de la spécification est un ED.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                        | Statut                                       | Commentaire                                        |
+| ---------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------------------------------------- |
+| {{SpecName('Geometry Interfaces', '#dom-domrectreadonly-bottom', 'bottom')}} | {{Spec2('Geometry Interfaces')}} | La dernière version de la spécification est un ED. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.DOMRectReadOnly.bottom")}}</p>
+{{Compat("api.DOMRectReadOnly.bottom")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("DOMRect")}}</li>
-</ul>
+- {{domxref("DOMRect")}}
diff --git a/files/fr/web/api/domrectreadonly/domrectreadonly/index.md b/files/fr/web/api/domrectreadonly/domrectreadonly/index.md
index bb7039230b..eaeb627af0 100644
--- a/files/fr/web/api/domrectreadonly/domrectreadonly/index.md
+++ b/files/fr/web/api/domrectreadonly/domrectreadonly/index.md
@@ -9,60 +9,46 @@ tags:
   - Rectangle
 translation_of: Web/API/DOMRectReadOnly/DOMRectReadOnly
 ---
-<p>{{APIRef("DOM")}}{{ SeeCompatTable }}</p>
+{{APIRef("DOM")}}{{ SeeCompatTable }}
 
-<p>Le constructeur <strong><code>DOMRectReadOnly()</code></strong> crée un nouvel objet {{domxref("DOMRectReadOnly")}}.</p>
+Le constructeur **`DOMRectReadOnly()`** crée un nouvel objet {{domxref("DOMRectReadOnly")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var myDOMRectReadOnly = new DOMRectReadOnly(x, y, width, height);</pre>
+    var myDOMRectReadOnly = new DOMRectReadOnly(x, y, width, height);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt>x</dt>
- <dd>La coordonnée <code>x</code> de l'origine d'un <code>DOMRectReadOnly</code>.</dd>
- <dt>y</dt>
- <dd>La coordonnée <code>y</code> de l'origine d'un <code>DOMRectReadOnly</code>.</dd>
- <dt>width</dt>
- <dd>La largeur d'un <code>DOMRectReadOnly</code>.</dd>
- <dt>height</dt>
- <dd>La hauteur d'un <code>DOMRectReadOnly</code>.</dd>
-</dl>
+- x
+  - : La coordonnée `x` de l'origine d'un `DOMRectReadOnly`.
+- y
+  - : La coordonnée `y` de l'origine d'un `DOMRectReadOnly`.
+- width
+  - : La largeur d'un `DOMRectReadOnly`.
+- height
+  - : La hauteur d'un `DOMRectReadOnly`.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Pour créer un nouveau <code>DOMPoint</code>, vous pouvez exécuter une ligne de code comme celle-ci :</p>
+Pour créer un nouveau `DOMPoint`, vous pouvez exécuter une ligne de code comme celle-ci :
 
-<pre class="brush: js">myDOMRect = new DOMRectReadOnly(0,0,100,100);
+```js
+myDOMRect = new DOMRectReadOnly(0,0,100,100);
 // l'exécution de 'myDOMRect' dans la console devrait alors renvoyer
 // DOMRect { x: 0, y: 0, width: 100, height: 100, top: 0, right: 100, bottom: 100, left: 0 }
-</pre>
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Geometry Interfaces', '#DOMRect', 'DOMRect()')}}</td>
-   <td>{{Spec2('Geometry Interfaces')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                    | Statut                                       | Commentaire          |
+| -------------------------------------------------------------------------------- | -------------------------------------------- | -------------------- |
+| {{SpecName('Geometry Interfaces', '#DOMRect', 'DOMRect()')}} | {{Spec2('Geometry Interfaces')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.DOMRectReadOnly.DOMRectReadOnly")}}</p>
+{{Compat("api.DOMRectReadOnly.DOMRectReadOnly")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("DOMPoint")}}</li>
- <li>{{domxref("DOMRect")}}</li>
-</ul>
+- {{domxref("DOMPoint")}}
+- {{domxref("DOMRect")}}
diff --git a/files/fr/web/api/domrectreadonly/height/index.md b/files/fr/web/api/domrectreadonly/height/index.md
index e617faaa94..68896eb357 100644
--- a/files/fr/web/api/domrectreadonly/height/index.md
+++ b/files/fr/web/api/domrectreadonly/height/index.md
@@ -10,41 +10,30 @@ tags:
   - Rectangle
 translation_of: Web/API/DOMRectReadOnly/height
 ---
-<p>{{APIRef("DOM")}}{{ SeeCompatTable() }}</p>
+{{APIRef("DOM")}}{{ SeeCompatTable() }}
 
-<p>La propriété en lecture seule <strong><code>height</code></strong> de l'interface of the <strong><code>DOMRectReadOnly</code></strong> représente la hauteur du <code>DOMRect</code>.</p>
+La propriété en lecture seule **`height`** de l'interface of the **`DOMRectReadOnly`** représente la hauteur du `DOMRect`.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">var recHeight = DOMRect.height;</pre>
+```js
+var recHeight = DOMRect.height;
+```
 
-<h3 id="Specification">Valeur</h3>
+### Valeur
 
-<p>Un double.</p>
+Un double.
 
-<h2 id="Specification">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Geometry Interfaces', '#dom-domrectreadonly-height', 'height')}}</td>
-   <td>{{Spec2('Geometry Interfaces')}}</td>
-   <td>La dernière version de la spécification est un ED.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                        | Statut                                       | Commentaire                                        |
+| ---------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------------------------------------- |
+| {{SpecName('Geometry Interfaces', '#dom-domrectreadonly-height', 'height')}} | {{Spec2('Geometry Interfaces')}} | La dernière version de la spécification est un ED. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.DOMRectReadOnly.height")}}</p>
+{{Compat("api.DOMRectReadOnly.height")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("DOMRect")}}</li>
-</ul>
+- {{domxref("DOMRect")}}
diff --git a/files/fr/web/api/domrectreadonly/index.md b/files/fr/web/api/domrectreadonly/index.md
index 6a80fa9ce0..ee82ba51bc 100644
--- a/files/fr/web/api/domrectreadonly/index.md
+++ b/files/fr/web/api/domrectreadonly/index.md
@@ -12,71 +12,51 @@ tags:
   - TopicStub
 translation_of: Web/API/DOMRectReadOnly
 ---
-<p>{{draft}}{{APIRef("Geometry Interfaces")}}{{ SeeCompatTable() }}</p>
+{{draft}}{{APIRef("Geometry Interfaces")}}{{ SeeCompatTable() }}
 
-<p>L'interface <strong><code>DOMRectReadOnly</code></strong> spécifie les propriétés standard utilisées par {{domxref("DOMRect")}} pour définir un rectangle.</p>
+L'interface **`DOMRectReadOnly`** spécifie les propriétés standard utilisées par {{domxref("DOMRect")}} pour définir un rectangle.
 
-<h2 id="Constructeur">Constructeur</h2>
+## Constructeur
 
-<dl>
- <dt>{{domxref("DOMRectReadOnly.DOMRectReadOnly","DOMRectReadOnly()")}}</dt>
- <dd>Défini pour créer un nouvel objet <code>DOMRectReadOnly</code>, mais notez que ce constructeur ne peut pas être appelé par JavaScript tiers: cela renvoie une erreur de type "Constructeur illégal".</dd>
-</dl>
+- {{domxref("DOMRectReadOnly.DOMRectReadOnly","DOMRectReadOnly()")}}
+  - : Défini pour créer un nouvel objet `DOMRectReadOnly`, mais notez que ce constructeur ne peut pas être appelé par JavaScript tiers: cela renvoie une erreur de type "Constructeur illégal".
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<dl>
-</dl>
+<!---->
 
-<dl>
- <dt>{{domxref("DOMRectReadOnly.x")}} {{readonlyInline}}</dt>
- <dd>La coordonnée x de l'origine du <code>DOMRect</code>.</dd>
- <dt>{{domxref("DOMRectReadOnly.y")}} {{readonlyInline}}</dt>
- <dd>La coordonnée y de l'origine du <code>DOMRect</code>.</dd>
- <dt>{{domxref("DOMRectReadOnly.width")}} {{readonlyInline}}</dt>
- <dd>La largeur du <code>DOMRect</code>.</dd>
- <dt>{{domxref("DOMRectReadOnly.height")}} {{readonlyInline}}</dt>
- <dd>La hauteur du <code>DOMRect</code>.</dd>
- <dt>{{domxref("DOMRectReadOnly.top")}} {{readonlyInline}}</dt>
- <dd>Renvoie la valeur de coordonnée supérieur du <code>DOMRect</code> (généralement la même que <code>y</code>).</dd>
- <dt>{{domxref("DOMRectReadOnly.right")}} {{readonlyInline}}</dt>
- <dd>Renvoie la valeur de coordonnée droite du <code>DOMRect</code> (généralement identique à <code>x + largeur</code>).</dd>
- <dt>{{domxref("DOMRectReadOnly.bottom")}} {{readonlyInline}}</dt>
- <dd>Renvoie la valeur de coordonnée inférieur du <code>DOMRect</code> (généralement la même que <code>y + hauteur</code>).</dd>
- <dt>{{domxref("DOMRectReadOnly.left")}} {{readonlyInline}}</dt>
- <dd>Renvoie la valeur de coordonnée gauche du <code>DOMRect</code> (généralement la même que <code>x</code>).</dd>
-</dl>
+- {{domxref("DOMRectReadOnly.x")}} {{readonlyInline}}
+  - : La coordonnée x de l'origine du `DOMRect`.
+- {{domxref("DOMRectReadOnly.y")}} {{readonlyInline}}
+  - : La coordonnée y de l'origine du `DOMRect`.
+- {{domxref("DOMRectReadOnly.width")}} {{readonlyInline}}
+  - : La largeur du `DOMRect`.
+- {{domxref("DOMRectReadOnly.height")}} {{readonlyInline}}
+  - : La hauteur du `DOMRect`.
+- {{domxref("DOMRectReadOnly.top")}} {{readonlyInline}}
+  - : Renvoie la valeur de coordonnée supérieur du `DOMRect` (généralement la même que `y`).
+- {{domxref("DOMRectReadOnly.right")}} {{readonlyInline}}
+  - : Renvoie la valeur de coordonnée droite du `DOMRect` (généralement identique à `x + largeur`).
+- {{domxref("DOMRectReadOnly.bottom")}} {{readonlyInline}}
+  - : Renvoie la valeur de coordonnée inférieur du `DOMRect` (généralement la même que `y + hauteur`).
+- {{domxref("DOMRectReadOnly.left")}} {{readonlyInline}}
+  - : Renvoie la valeur de coordonnée gauche du `DOMRect` (généralement la même que `x`).
 
-<h2 id="Méthodes">Méthodes</h2>
+## Méthodes
 
-<dl>
- <dt>{{domxref("DOMRectReadOnly.fromRect()")}}</dt>
- <dd>Crée un nouvel objet <code>DOMRect</code> avec un emplacement et des dimensions donnés.</dd>
-</dl>
+- {{domxref("DOMRectReadOnly.fromRect()")}}
+  - : Crée un nouvel objet `DOMRect` avec un emplacement et des dimensions donnés.
 
-<h2 id="Specification">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Geometry Interfaces', '#DOMRect', 'DOMRectReadOnly')}}</td>
-   <td>{{Spec2('Geometry Interfaces')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                            | Statut                                       | Commentaire          |
+| ---------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------- |
+| {{SpecName('Geometry Interfaces', '#DOMRect', 'DOMRectReadOnly')}} | {{Spec2('Geometry Interfaces')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.DOMRectReadOnly")}}</p>
+{{Compat("api.DOMRectReadOnly")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("DOMPoint")}}</li>
-</ul>
+- {{domxref("DOMPoint")}}
diff --git a/files/fr/web/api/domrectreadonly/left/index.md b/files/fr/web/api/domrectreadonly/left/index.md
index 63ef22ecf6..a81ce823ec 100644
--- a/files/fr/web/api/domrectreadonly/left/index.md
+++ b/files/fr/web/api/domrectreadonly/left/index.md
@@ -10,41 +10,30 @@ tags:
   - Rectangle
 translation_of: Web/API/DOMRectReadOnly/left
 ---
-<p>{{APIRef("DOM")}}{{ SeeCompatTable() }}</p>
+{{APIRef("DOM")}}{{ SeeCompatTable() }}
 
-<p>La propriété en lecture seule <code><strong>left</strong></code> de l'interface <strong><code>DOMRectReadOnly</code></strong> renvoie la valeur de la coordonnée gauche du <code>DOMRect</code> (a la même valeur que <code>x</code>, ou <code>x + width</code><em> (x + largeur)</em> si <code>width</code> est négative).</p>
+La propriété en lecture seule **`left`** de l'interface **`DOMRectReadOnly`** renvoie la valeur de la coordonnée gauche du `DOMRect` (a la même valeur que `x`, ou `x + width` _(x + largeur)_ si `width` est négative).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">var recLeft = DOMRect.left;</pre>
+```js
+var recLeft = DOMRect.left;
+```
 
-<h3 id="Specification">Valeur</h3>
+### Valeur
 
-<p>Un double.</p>
+Un double.
 
-<h2 id="Specification">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Geometry Interfaces', '#dom-domrectreadonly-left', 'left')}}</td>
-   <td>{{Spec2('Geometry Interfaces')}}</td>
-   <td>La dernière version de la spécification est un ED.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                    | Statut                                       | Commentaire                                        |
+| ------------------------------------------------------------------------------------------------ | -------------------------------------------- | -------------------------------------------------- |
+| {{SpecName('Geometry Interfaces', '#dom-domrectreadonly-left', 'left')}} | {{Spec2('Geometry Interfaces')}} | La dernière version de la spécification est un ED. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.DOMRectReadOnly.left")}}</p>
+{{Compat("api.DOMRectReadOnly.left")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("DOMRect")}}</li>
-</ul>
+- {{domxref("DOMRect")}}
diff --git a/files/fr/web/api/domrectreadonly/right/index.md b/files/fr/web/api/domrectreadonly/right/index.md
index 011e820cf3..eedc3305c4 100644
--- a/files/fr/web/api/domrectreadonly/right/index.md
+++ b/files/fr/web/api/domrectreadonly/right/index.md
@@ -10,41 +10,30 @@ tags:
   - Rectangle
 translation_of: Web/API/DOMRectReadOnly/right
 ---
-<p>{{APIRef("DOM")}}{{ SeeCompatTable() }}</p>
+{{APIRef("DOM")}}{{ SeeCompatTable() }}
 
-<p>La propriété en lecture seule <code><strong>right</strong></code> de l'interface <strong><code>DOMRectReadOnly</code></strong> renvoie la valeur de la coordonnée droite du <code>DOMRect.</code> (a la même valeur que <code>x + width</code> <em>(x + largeur)</em>, ou <code>x</code> si <code>width</code> est négative).</p>
+La propriété en lecture seule **`right`** de l'interface **`DOMRectReadOnly`** renvoie la valeur de la coordonnée droite du `DOMRect.` (a la même valeur que `x + width` _(x + largeur)_, ou `x` si `width` est négative).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">var recRight = DOMRect.right;</pre>
+```js
+var recRight = DOMRect.right;
+```
 
-<h3 id="Specification">Valeur</h3>
+### Valeur
 
-<p>Un double.</p>
+Un double.
 
-<h2 id="Specification">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Geometry Interfaces', '#dom-domrectreadonly-right', 'right')}}</td>
-   <td>{{Spec2('Geometry Interfaces')}}</td>
-   <td>La dernière version de la spécification est un ED.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                        | Statut                                       | Commentaire                                        |
+| ---------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------------------------------------- |
+| {{SpecName('Geometry Interfaces', '#dom-domrectreadonly-right', 'right')}} | {{Spec2('Geometry Interfaces')}} | La dernière version de la spécification est un ED. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.DOMRectReadOnly.right")}}</p>
+{{Compat("api.DOMRectReadOnly.right")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("DOMRect")}}</li>
-</ul>
+- {{domxref("DOMRect")}}
diff --git a/files/fr/web/api/domrectreadonly/top/index.md b/files/fr/web/api/domrectreadonly/top/index.md
index fa6b1644ef..92d220130d 100644
--- a/files/fr/web/api/domrectreadonly/top/index.md
+++ b/files/fr/web/api/domrectreadonly/top/index.md
@@ -10,41 +10,30 @@ tags:
   - Rectangle
 translation_of: Web/API/DOMRectReadOnly/top
 ---
-<p>{{APIRef("DOM")}}{{ SeeCompatTable() }}</p>
+{{APIRef("DOM")}}{{ SeeCompatTable() }}
 
-<p>La propriété en lecture seule <code><strong>top</strong></code> de l'interface <strong><code>DOMRectReadOnly</code></strong> renvoie la valeur de la coordonnée haute du <code>DOMRect.</code> (A la même valeur que <code>y</code>, ou <code>y + height</code> <em>(y + hauteur)</em> si <code>height</code> est négative.)</p>
+La propriété en lecture seule **`top`** de l'interface **`DOMRectReadOnly`** renvoie la valeur de la coordonnée haute du `DOMRect.` (A la même valeur que `y`, ou `y + height` _(y + hauteur)_ si `height` est négative.)
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">var recTop = DOMRect.top;</pre>
+```js
+var recTop = DOMRect.top;
+```
 
-<h3 id="Specification">Valeur</h3>
+### Valeur
 
-<p>Un double.</p>
+Un double.
 
-<h2 id="Specification">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Geometry Interfaces', '#dom-domrectreadonly-top', 'top')}}</td>
-   <td>{{Spec2('Geometry Interfaces')}}</td>
-   <td>La dernière version de la spécification est un ED.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                | Statut                                       | Commentaire                                        |
+| -------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------------------------------------- |
+| {{SpecName('Geometry Interfaces', '#dom-domrectreadonly-top', 'top')}} | {{Spec2('Geometry Interfaces')}} | La dernière version de la spécification est un ED. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.DOMRectReadOnly.top")}}</p>
+{{Compat("api.DOMRectReadOnly.top")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("DOMRect")}}</li>
-</ul>
+- {{domxref("DOMRect")}}
diff --git a/files/fr/web/api/domrectreadonly/width/index.md b/files/fr/web/api/domrectreadonly/width/index.md
index 60b7427e0f..e79389e3bb 100644
--- a/files/fr/web/api/domrectreadonly/width/index.md
+++ b/files/fr/web/api/domrectreadonly/width/index.md
@@ -10,41 +10,30 @@ tags:
   - Rectangle
 translation_of: Web/API/DOMRectReadOnly/width
 ---
-<p>{{APIRef("DOM")}}{{ SeeCompatTable() }}</p>
+{{APIRef("DOM")}}{{ SeeCompatTable() }}
 
-<p>La propriété en lecture seule <code><strong>width</strong></code> de l'interface <strong><code>DOMRectReadOnly</code></strong> représente la largeur du <code>DOMRect</code>.</p>
+La propriété en lecture seule **`width`** de l'interface **`DOMRectReadOnly`** représente la largeur du `DOMRect`.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">var recWidth = DOMRect.width;</pre>
+```js
+var recWidth = DOMRect.width;
+```
 
-<h3 id="Specification">Valeur</h3>
+### Valeur
 
-<p>Un double.</p>
+Un double.
 
-<h2 id="Specification">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Geometry Interfaces', '#dom-domrectreadonly-width', 'width')}}</td>
-   <td>{{Spec2('Geometry Interfaces')}}</td>
-   <td>La dernière version de la spécification est un ED.</td>
-  </tr>
- </tbody>
-</table>
+| Specification                                                                                        | Status                                       | Comment                                            |
+| ---------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------------------------------------- |
+| {{SpecName('Geometry Interfaces', '#dom-domrectreadonly-width', 'width')}} | {{Spec2('Geometry Interfaces')}} | La dernière version de la spécification est un ED. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.DOMRectReadOnly.width")}}</p>
+{{Compat("api.DOMRectReadOnly.width")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("DOMRect")}}</li>
-</ul>
+- {{domxref("DOMRect")}}
diff --git a/files/fr/web/api/domrectreadonly/x/index.md b/files/fr/web/api/domrectreadonly/x/index.md
index 89aee41f8b..98fab76738 100644
--- a/files/fr/web/api/domrectreadonly/x/index.md
+++ b/files/fr/web/api/domrectreadonly/x/index.md
@@ -11,41 +11,30 @@ tags:
   - x
 translation_of: Web/API/DOMRectReadOnly/x
 ---
-<p>{{APIRef("DOM")}}{{ SeeCompatTable() }}</p>
+{{APIRef("DOM")}}{{ SeeCompatTable() }}
 
-<p>La propriété en lecture seule <code><strong>x</strong></code> de l'interface <strong><code>DOMRectReadOnly</code></strong> représente la coordonnée x d' l'origine du <code>DOMRect</code>.</p>
+La propriété en lecture seule **`x`** de l'interface **`DOMRectReadOnly`** représente la coordonnée x d' l'origine du `DOMRect`.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">var recX = DOMRect.x;</pre>
+```js
+var recX = DOMRect.x;
+```
 
-<h3 id="Specification">Valeur</h3>
+### Valeur
 
-<p>Un double.</p>
+Un double.
 
-<h2 id="Specification">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Geometry Interfaces', '#dom-domrectreadonly-x', 'x')}}</td>
-   <td>{{Spec2('Geometry Interfaces')}}</td>
-   <td>La dernière version de la spécification est un ED.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                            | Statut                                       | Commentaire                                        |
+| ---------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------------------------------------- |
+| {{SpecName('Geometry Interfaces', '#dom-domrectreadonly-x', 'x')}} | {{Spec2('Geometry Interfaces')}} | La dernière version de la spécification est un ED. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.DOMRectReadOnly.x")}}</p>
+{{Compat("api.DOMRectReadOnly.x")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("DOMRect")}}</li>
-</ul>
+- {{domxref("DOMRect")}}
diff --git a/files/fr/web/api/domrectreadonly/y/index.md b/files/fr/web/api/domrectreadonly/y/index.md
index 4daf265c51..2ff37bc054 100644
--- a/files/fr/web/api/domrectreadonly/y/index.md
+++ b/files/fr/web/api/domrectreadonly/y/index.md
@@ -11,41 +11,30 @@ tags:
   - 'y'
 translation_of: Web/API/DOMRectReadOnly/y
 ---
-<p>{{APIRef("DOM")}}{{ SeeCompatTable() }}</p>
+{{APIRef("DOM")}}{{ SeeCompatTable() }}
 
-<p>La propriété en lecture seule <code><strong>y</strong></code> de l'interface <strong><code>DOMRectReadOnly</code></strong> représente la coordonnée y de l'origine du <code>DOMRect</code>.</p>
+La propriété en lecture seule **`y`** de l'interface **`DOMRectReadOnly`** représente la coordonnée y de l'origine du `DOMRect`.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">var recY = DOMRect.y;</pre>
+```js
+var recY = DOMRect.y;
+```
 
-<h3 id="Specification">Valeur</h3>
+### Valeur
 
-<p>Un double.</p>
+Un double.
 
-<h2 id="Specification">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Geometry Interfaces', '#dom-domrectreadonly-y', 'y')}}</td>
-   <td>{{Spec2('Geometry Interfaces')}}</td>
-   <td>La dernière version de la spécification est un ED.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                            | Statut                                       | Commentaire                                        |
+| ---------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------------------------------------- |
+| {{SpecName('Geometry Interfaces', '#dom-domrectreadonly-y', 'y')}} | {{Spec2('Geometry Interfaces')}} | La dernière version de la spécification est un ED. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.DOMRectReadOnly.y")}}</p>
+{{Compat("api.DOMRectReadOnly.y")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("DOMRect")}}</li>
-</ul>
+- {{domxref("DOMRect")}}
diff --git a/files/fr/web/api/domstring/binary/index.md b/files/fr/web/api/domstring/binary/index.md
index c58db9b8c9..f6e9825bdf 100644
--- a/files/fr/web/api/domstring/binary/index.md
+++ b/files/fr/web/api/domstring/binary/index.md
@@ -8,20 +8,18 @@ tags:
   - données
 translation_of: Web/API/DOMString/Binary
 ---
-<p>En termes simples, une chaîne de caractères binaire est une séquence de 1 et de 0. JavaScript est chargé de riches fonctionnalités pour manipuler des données binaires brutes au niveau inférieur.</p>
+En termes simples, une chaîne de caractères binaire est une séquence de 1 et de 0. JavaScript est chargé de riches fonctionnalités pour manipuler des données binaires brutes au niveau inférieur.
 
-<p>Au fur et à mesure que les applications Web deviennent de plus en plus puissantes, ajoutant des fonctionnalités telles que la manipulation d'audio et de vidéo, l'accès aux données brutes à l'aide de WebSockets, etc., il apparaît clairement parfois que le code JavaScript peut être utile pour manipuler rapidement et facilement des données binaires brutes. Dans le passé, cela devait être simulé en traitant les données brutes <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String">string</a> (<em>chaîne de caractères</em>) et en utilisant la méthode <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/charCodeAt"><code>charCodeAt()</code></a> pour lire les octets à partir des tampons de données.</p>
+Au fur et à mesure que les applications Web deviennent de plus en plus puissantes, ajoutant des fonctionnalités telles que la manipulation d'audio et de vidéo, l'accès aux données brutes à l'aide de WebSockets, etc., il apparaît clairement parfois que le code JavaScript peut être utile pour manipuler rapidement et facilement des données binaires brutes. Dans le passé, cela devait être simulé en traitant les données brutes [string](/fr/docs/Web/JavaScript/Reference/Objets_globaux/String) (_chaîne de caractères_) et en utilisant la méthode [`charCodeAt()`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/charCodeAt) pour lire les octets à partir des tampons de données.
 
-<p>Cependant, ceci est lent et sujet aux erreurs, en raison du besoin de conversions multiples (en particulier si les données binaires ne sont pas réellement des données au format octet, mais, par exemple, des entiers ou des flottants de 32 bits).</p>
+Cependant, ceci est lent et sujet aux erreurs, en raison du besoin de conversions multiples (en particulier si les données binaires ne sont pas réellement des données au format octet, mais, par exemple, des entiers ou des flottants de 32 bits).
 
-<p><a href="/fr/docs/Web/JavaScript/Tableaux_typ%C3%A9s">Un tableau typé en JavaScript</a> fournit un mécanisme pour accèder aux données brutes binaires beaucoup plus efficacement. Le constructeur <a href="/fr/docs/Web/JavaScript/Tableaux_typ%C3%A9s"><code>StringView</code></a> Non native est un niveau au-dessus des tableaux typés et fournit une interface de type <a href="https://fr.wikipedia.org/wiki/C_(langage)">C</a> pour les chaînes de caractères.</p>
+[Un tableau typé en JavaScript](/fr/docs/Web/JavaScript/Tableaux_typ%C3%A9s) fournit un mécanisme pour accèder aux données brutes binaires beaucoup plus efficacement. Le constructeur [`StringView`](/fr/docs/Web/JavaScript/Tableaux_typ%C3%A9s) Non native est un niveau au-dessus des tableaux typés et fournit une interface de type [C](<https://fr.wikipedia.org/wiki/C_(langage)>) pour les chaînes de caractères.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Tableaux_typ%C3%A9s">Les tableaux typés en JavaScript</a></li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_binaires">Opérateurs binaires </a></li>
- <li><a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a></li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String">String</a></li>
- <li><a href="/fr/docs/Archive/Add-ons/Code_snippets/StringView"><code>StringView</code></a></li>
-</ul>
+- [Les tableaux typés en JavaScript](/fr/docs/Web/JavaScript/Tableaux_typ%C3%A9s)
+- [Opérateurs binaires](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_binaires)
+- [`DOMString`](/fr/docs/Web/API/DOMString)
+- [String](/fr/docs/Web/JavaScript/Reference/Objets_globaux/String)
+- [`StringView`](/fr/docs/Archive/Add-ons/Code_snippets/StringView)
diff --git a/files/fr/web/api/domstring/index.md b/files/fr/web/api/domstring/index.md
index 7357eaec7a..6ebd847530 100644
--- a/files/fr/web/api/domstring/index.md
+++ b/files/fr/web/api/domstring/index.md
@@ -8,46 +8,21 @@ tags:
   - Reference
 translation_of: Web/API/DOMString
 ---
-<p>Une chaîne de caractères UTF-16. Comme JavaScript utilise déjà ce type de chaîne de caractères, <code>DOMString</code> est directement associé à <code><a href="/en/JavaScript/Reference/Global_Objects/String">String</a></code>.</p>
+Une chaîne de caractères UTF-16. Comme JavaScript utilise déjà ce type de chaîne de caractères, `DOMString` est directement associé à [`String`](/en/JavaScript/Reference/Global_Objects/String).
 
-<h2 id="Specification">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('WebIDL', '#idl-DOMString', 'DOMString')}}</td>
-   <td>{{Spec2('WebIDL')}}</td>
-   <td>Reformulation de la définition pour éviter quelques cas particuliers bizarres.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM3 Core', 'core.html#DOMString', 'DOMString')}}</td>
-   <td>{{Spec2('DOM3 Core')}}</td>
-   <td>Aucun changement par rapport à {{SpecName('DOM2 Core')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Core', 'core.html#ID-C74D1578', 'DOMString')}}</td>
-   <td>{{Spec2('DOM2 Core')}}</td>
-   <td>Aucun changement par rapport à {{SpecName('DOM1')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM1', 'level-one-core.html#ID-C74D1578', 'DOMString')}}</td>
-   <td>{{Spec2('DOM1')}}</td>
-   <td>Première définition</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                | Statut                       | Commentaires                                                                   |
+| -------------------------------------------------------------------------------------------- | ---------------------------- | ------------------------------------------------------------------------------ |
+| {{SpecName('WebIDL', '#idl-DOMString', 'DOMString')}}                     | {{Spec2('WebIDL')}}     | Reformulation de la définition pour éviter quelques cas particuliers bizarres. |
+| {{SpecName('DOM3 Core', 'core.html#DOMString', 'DOMString')}}             | {{Spec2('DOM3 Core')}} | Aucun changement par rapport à {{SpecName('DOM2 Core')}}                |
+| {{SpecName('DOM2 Core', 'core.html#ID-C74D1578', 'DOMString')}}         | {{Spec2('DOM2 Core')}} | Aucun changement par rapport à {{SpecName('DOM1')}}                    |
+| {{SpecName('DOM1', 'level-one-core.html#ID-C74D1578', 'DOMString')}} | {{Spec2('DOM1')}}     | Première définition                                                            |
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String">String</a></li>
- <li>{{domxref("USVString")}}</li>
- <li>{{domxref("CSSOMString")}}</li>
- <li><a href="/fr/Add-ons/Code_snippets/StringView"><code>StringView</code> – a C-like representation of strings based on typed arrays</a></li>
- <li><a href="/fr/docs/Web/API/DOMString/Binary">Binary strings</a></li>
-</ul>
+- [String](/fr/docs/Web/JavaScript/Reference/Objets_globaux/String)
+- {{domxref("USVString")}}
+- {{domxref("CSSOMString")}}
+- [`StringView` – a C-like representation of strings based on typed arrays](/fr/Add-ons/Code_snippets/StringView)
+- [Binary strings](/fr/docs/Web/API/DOMString/Binary)
diff --git a/files/fr/web/api/domstringlist/index.md b/files/fr/web/api/domstringlist/index.md
index dd5850119c..2ea3072d6e 100644
--- a/files/fr/web/api/domstringlist/index.md
+++ b/files/fr/web/api/domstringlist/index.md
@@ -8,41 +8,24 @@ tags:
   - Types
 translation_of: Web/API/DOMStringList
 ---
-<p>{{ APIRef("DOM") }}</p>
+{{ APIRef("DOM") }}
 
-<p>Un type renvoyé par certaines API contenant une liste de <a href="/fr/docs/Web/API/DOMString">DOMString</a> (<em>chaînes de caractères</em>).</p>
+Un type renvoyé par certaines API contenant une liste de [DOMString](/fr/docs/Web/API/DOMString) (_chaînes de caractères_).
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<dl>
- <dt>{{domxref("DOMStringList.length")}} {{ReadOnlyInline}}</dt>
- <dd>Renvoie la longueur de la liste.</dd>
-</dl>
+- {{domxref("DOMStringList.length")}} {{ReadOnlyInline}}
+  - : Renvoie la longueur de la liste.
 
-<h2 id="Méthodes">Méthodes</h2>
+## Méthodes
 
-<dl>
- <dt>{{domxref("DOMStringList.item()")}}</dt>
- <dd>Renvoie une {{domxref("DOMString")}} (<em>chaîne de caractères</em>).</dd>
- <dt>{{domxref("DOMStringList.contains()")}}</dt>
- <dd>Renvoie un {{jsxref("Boolean")}} (<em>booléen</em>) indiquant si la chaîne de caractères donnée est dans la liste.</dd>
-</dl>
+- {{domxref("DOMStringList.item()")}}
+  - : Renvoie une {{domxref("DOMString")}} (_chaîne de caractères_).
+- {{domxref("DOMStringList.contains()")}}
+  - : Renvoie un {{jsxref("Boolean")}} (_booléen_) indiquant si la chaîne de caractères donnée est dans la liste.
 
-<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("HTML WHATWG", "common-dom-interfaces.html#the-domstringlist-interface", "DOMStringList")}}</td>
-   <td>{{Spec2("HTML WHATWG")}}</td>
-   <td>Définition  initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                            | Statut                           | Commentaire           |
+| ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | --------------------- |
+| {{SpecName("HTML WHATWG", "common-dom-interfaces.html#the-domstringlist-interface", "DOMStringList")}} | {{Spec2("HTML WHATWG")}} | Définition  initiale. |
diff --git a/files/fr/web/api/domtimestamp/index.md b/files/fr/web/api/domtimestamp/index.md
index 6f9e563048..d058045d5a 100644
--- a/files/fr/web/api/domtimestamp/index.md
+++ b/files/fr/web/api/domtimestamp/index.md
@@ -7,25 +7,12 @@ tags:
   - Référence DOM
 translation_of: Web/API/DOMTimeStamp
 ---
-<p>{{APIRef("DOM")}}</p>
+{{APIRef("DOM")}}
 
-<p>Le type <code>DOMTimeStamp</code> représente une quantité de millisecondes, exprimées de manière absolue ou relative, en fonction de la spécification dans laquelle il apparaît.</p>
+Le type `DOMTimeStamp` représente une quantité de millisecondes, exprimées de manière absolue ou relative, en fonction de la spécification dans laquelle il apparaît.
 
-<h2 id="Specification">Spécification</h2>
+## Spécification
 
-<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("WebIDL", "#common-DOMTimeStamp", "DOMTimeStamp")}}</td>
-   <td>{{Spec2("WebIDL")}}</td>
-   <td>Initial specification</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                        | Statut                   | Commentaire           |
+| ------------------------------------------------------------------------------------ | ------------------------ | --------------------- |
+| {{SpecName("WebIDL", "#common-DOMTimeStamp", "DOMTimeStamp")}} | {{Spec2("WebIDL")}} | Initial specification |
diff --git a/files/fr/web/api/domtokenlist/add/index.md b/files/fr/web/api/domtokenlist/add/index.md
index b274f15ac0..9052727e6e 100644
--- a/files/fr/web/api/domtokenlist/add/index.md
+++ b/files/fr/web/api/domtokenlist/add/index.md
@@ -10,66 +10,58 @@ tags:
   - Méthodes
 translation_of: Web/API/DOMTokenList/add
 ---
-<p>{{APIRef("DOM")}}</p>
+{{APIRef("DOM")}}
 
-<p>La méthode <code><strong>add()</strong></code> de l'interface {{domxref("DOMTokenList")}} ajoute  le <em>token</em> (<em>marque</em>) à la liste.</p>
+La méthode **`add()`** de l'interface {{domxref("DOMTokenList")}} ajoute  le _token_ (_marque_) à la liste.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">tokenList.add(token1[, token2[, ...]]);</pre>
+    tokenList.add(token1[, token2[, ...]]);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt>token</dt>
- <dd>Une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) représentant la marque (<em>token</em>) que vous souhaitez ajouter à la liste.</dd>
-</dl>
+- token
+  - : Une {{domxref("DOMString")}} (_chaîne de caractères_) représentant la marque (_token_) que vous souhaitez ajouter à la liste.
 
-<h3 id="Valeur_renvoyée">Valeur renvoyée</h3>
+### Valeur renvoyée
 
-<p>Vide.</p>
+Vide.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans l'exemple suivant, nous récupérons une liste des classes définies sur un élément {{htmlelement("span")}} en tant que <code>DOMTokenList</code>, en utilisant {{domxref("Element.classList")}}. Nous ajoutons alors une nouvelle marque à la  liste et écrivons la liste dans un  {{domxref("Node.textContent")}} du <code>&lt;span&gt;</code>.</p>
+Dans l'exemple suivant, nous récupérons une liste des classes définies sur un élément {{htmlelement("span")}} en tant que `DOMTokenList`, en utilisant {{domxref("Element.classList")}}. Nous ajoutons alors une nouvelle marque à la  liste et écrivons la liste dans un  {{domxref("Node.textContent")}} du `<span>`.
 
-<p>Tout d'abord, le code HTML :</p>
+Tout d'abord, le code HTML :
 
-<pre class="brush: html">&lt;span class="a b c"&gt;&lt;/span&gt;</pre>
+```html
+<span class="a b c"></span>
+```
 
-<p>Maintenant, le JavaScript :</p>
+Maintenant, le JavaScript :
 
-<pre class="brush: js">var span = document.querySelector("span");
+```js
+var span = document.querySelector("span");
 var classes = span.classList;
 classes.add("d");
 span.textContent = classes;
-</pre>
+```
 
-<p>La sortie ressemble à ceci :</p>
+La sortie ressemble à ceci :
 
-<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</p>
+{{ EmbedLiveSample('Examples', '100%', 60) }}
 
-<p>Vous pouvez ajouter plusieurs <em>token</em> :</p>
+Vous pouvez ajouter plusieurs _token_ :
 
-<pre class="brush: js">span.classList.add("d", "e", "f");</pre>
+```js
+span.classList.add("d", "e", "f");
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG','#dom-domtokenlist-add','add()')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                | Statut                           | Commentaire         |
+| ---------------------------------------------------------------------------- | -------------------------------- | ------------------- |
+| {{SpecName('DOM WHATWG','#dom-domtokenlist-add','add()')}} | {{Spec2('DOM WHATWG')}} | Définition initiale |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<div>{{Compat("api.DOMTokenList.add")}}</div>
\ No newline at end of file
+{{Compat("api.DOMTokenList.add")}}
diff --git a/files/fr/web/api/domtokenlist/contains/index.md b/files/fr/web/api/domtokenlist/contains/index.md
index 9954b4108f..ca3978e077 100644
--- a/files/fr/web/api/domtokenlist/contains/index.md
+++ b/files/fr/web/api/domtokenlist/contains/index.md
@@ -10,65 +10,56 @@ tags:
   - Recherche contenu
 translation_of: Web/API/DOMTokenList/contains
 ---
-<p>{{APIRef("DOM")}}</p>
+{{APIRef("DOM")}}
 
-<p>La méthode <code><strong>contains()</strong></code> de l'interface {{domxref("DOMTokenList")}} renvoie un {{domxref("Boolean")}} (<em>booléen</em>) — <code>true</code> (<em>vrai</em>) si la liste sous-jacente contient le symbole donné, sinon <code>false</code> (<em>faux</em>).</p>
+La méthode **`contains()`** de l'interface {{domxref("DOMTokenList")}} renvoie un {{domxref("Boolean")}} (_booléen_) — `true` (_vrai_) si la liste sous-jacente contient le symbole donné, sinon `false` (_faux_).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">tokenList.contains(token);</pre>
+    tokenList.contains(token);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt>token</dt>
- <dd>Une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) représentant la "token" (<em>marque</em>) dont vous voulez vérifier l'existence dans la liste.</dd>
-</dl>
+- token
+  - : Une {{domxref("DOMString")}} (_chaîne de caractères_) représentant la "token" (_marque_) dont vous voulez vérifier l'existence dans la liste.
 
-<h3 id="Valeur_renvoyée">Valeur renvoyée</h3>
+### Valeur renvoyée
 
-<p>Un {{domxref("Boolean")}} (<em>booléen</em>)— <code>true</code> (<em>vrai</em>) si la liste sous-jacente contient la marque donnée, sinon <code>false</code> (<em>faux</em>).</p>
+Un {{domxref("Boolean")}} (_booléen_)— `true` (_vrai_) si la liste sous-jacente contient la marque donnée, sinon `false` (_faux_).
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans l'exemple suivant, nous récupérons la liste des classes définies sur un élément {{htmlelement("span")}} en tant que <code>DOMTokenList</code> en utilisant {{domxref("Element.classList")}}. Nous testons ensuite l'existence de "c" dans la liste, et écrivons le résultat dans le {{domxref("Node.textContent")}} du <code>&lt;span&gt;</code>.</p>
+Dans l'exemple suivant, nous récupérons la liste des classes définies sur un élément {{htmlelement("span")}} en tant que `DOMTokenList` en utilisant {{domxref("Element.classList")}}. Nous testons ensuite l'existence de "c" dans la liste, et écrivons le résultat dans le {{domxref("Node.textContent")}} du `<span>`.
 
-<p>Tout d'abord, le code HTML :</p>
+Tout d'abord, le code HTML :
 
-<pre class="brush: html">&lt;span class="a b c"&gt;&lt;/span&gt;</pre>
+```html
+<span class="a b c"></span>
+```
 
-<p>Maintenant, le JavaScript :</p>
+Maintenant, le JavaScript :
 
-<pre class="brush: js">var span = document.querySelector("span");
+```js
+var span = document.querySelector("span");
 var classes = span.classList;
 var result = classes.contains("c");
 if(result) {
   span.textContent = "The classList contains 'c'";
 } else {
    span.textContent = "The classList does not contain 'c'";
-}</pre>
+}
+```
 
-<p>La sortie ressemble à ceci :</p>
+La sortie ressemble à ceci :
 
-<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</p>
+{{ EmbedLiveSample('Examples', '100%', 60) }}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG','#dom-domtokenlist-contains','contains()')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                | Statut                           | Commentaire         |
+| -------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- |
+| {{SpecName('DOM WHATWG','#dom-domtokenlist-contains','contains()')}} | {{Spec2('DOM WHATWG')}} | Définition initiale |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<div>{{Compat("api.DOMTokenList.contains")}}</div>
\ No newline at end of file
+{{Compat("api.DOMTokenList.contains")}}
diff --git a/files/fr/web/api/domtokenlist/entries/index.md b/files/fr/web/api/domtokenlist/entries/index.md
index 8642f149aa..113f23c1b0 100644
--- a/files/fr/web/api/domtokenlist/entries/index.md
+++ b/files/fr/web/api/domtokenlist/entries/index.md
@@ -10,63 +10,54 @@ tags:
   - Méthodes
 translation_of: Web/API/DOMTokenList/entries
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p>La méthode <code><strong>DOMTokenList.entries()</strong></code> renvoie un {{jsxref("Les_protocoles_iteration",'itérateur')}} permettant de parcourir toutes les paires clé / valeur contenues dans cet objet. Les valeurs sont des objets {{domxref("DOMString")}} (<em>chaînes de caractères</em>), chacun représentant une seule marque.</p>
+La méthode **`DOMTokenList.entries()`** renvoie un {{jsxref("Les_protocoles_iteration",'itérateur')}} permettant de parcourir toutes les paires clé / valeur contenues dans cet objet. Les valeurs sont des objets {{domxref("DOMString")}} (_chaînes de caractères_), chacun représentant une seule marque.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">tokenList.entries();</pre>
+    tokenList.entries();
 
-<h3 id="Valeur_retournée">Valeur retournée</h3>
+### Valeur retournée
 
-<p>Renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}}.</p>
+Renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}}.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans l'exemple suivant, nous récupérons la liste des classes définies sur un élément {{htmlelement("span")}} en tant que <code>DOMTokenList</code> en utilisant {{domxref("Element.classList")}}. Nous récupérons un itérateur contenant les paires clé / valeur en utilisant <code>entries()</code>, puis parcourons chacune d'entre elles en utilisant une boucle <a href="/fr/docs/Web/JavaScript/Reference/Instructions/for...of">for ... of</a> , et les écrivons dans un  {{domxref("Node.textContent")}}  du <code>&lt;span&gt;</code>.</p>
+Dans l'exemple suivant, nous récupérons la liste des classes définies sur un élément {{htmlelement("span")}} en tant que `DOMTokenList` en utilisant {{domxref("Element.classList")}}. Nous récupérons un itérateur contenant les paires clé / valeur en utilisant `entries()`, puis parcourons chacune d'entre elles en utilisant une boucle [for ... of](/fr/docs/Web/JavaScript/Reference/Instructions/for...of) , et les écrivons dans un  {{domxref("Node.textContent")}}  du `<span>`.
 
-<p>D'abord le HTML :</p>
+D'abord le HTML :
 
-<pre class="brush: html">&lt;span class="a b c"&gt;&lt;/span&gt;</pre>
+```html
+<span class="a b c"></span>
+```
 
-<p>Maintenant le JavaScript :</p>
+Maintenant le JavaScript :
 
-<pre class="brush: js">var span = document.querySelector("span");
+```js
+var span = document.querySelector("span");
 var classes = span.classList;
 var iterator = classes.entries();
 
 for(var value of iterator) {
   span.textContent += value + ' ++ ';
-}</pre>
+}
+```
 
-<p>La sortie ressemble à ceci :</p>
+La sortie ressemble à ceci :
 
-<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</p>
+{{ EmbedLiveSample('Examples', '100%', 60) }}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG','#interface-domtokenlist','entries() (as iterable&lt;Node&gt;)')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                            | Statut                           | Commentaire          |
+| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName('DOM WHATWG','#interface-domtokenlist','entries() (as iterable&lt;Node&gt;)')}} | {{Spec2('DOM WHATWG')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<div>{{Compat("api.DOMTokenList.entries")}}</div>
+{{Compat("api.DOMTokenList.entries")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("DOMSettableTokenList")}} (objet qui étend DOMTokenList avec la propriété définissable<em> .value</em>)</li>
-</ul>
+- {{domxref("DOMSettableTokenList")}} (objet qui étend DOMTokenList avec la propriété définissable _.value_)
diff --git a/files/fr/web/api/domtokenlist/foreach/index.md b/files/fr/web/api/domtokenlist/foreach/index.md
index 738ad80d7c..917b80e9c2 100644
--- a/files/fr/web/api/domtokenlist/foreach/index.md
+++ b/files/fr/web/api/domtokenlist/foreach/index.md
@@ -11,49 +11,49 @@ tags:
   - Pour chaque
 translation_of: Web/API/DOMTokenList/forEach
 ---
-<p>{{APIRef("DOM")}}</p>
+{{APIRef("DOM")}}
 
-<p>La méthode <strong><code>forEach()</code></strong> de l'interface {{domxref("DOMTokenList")}} appelle le retour donné en paramètre, un pour chaque paire de valeurs dans la liste, dans l'ordre d'insertion.</p>
+La méthode **`forEach()`** de l'interface {{domxref("DOMTokenList")}} appelle le retour donné en paramètre, un pour chaque paire de valeurs dans la liste, dans l'ordre d'insertion.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var>tokenList</var><em>.</em>forEach(<var>callback</var>);
-<em>tokenList.</em>forEach<em>(callback, argument);</em>
-</pre>
+    tokenList.forEach(callback);
+    tokenList.forEach(callback, argument);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>callback</code></dt>
- <dd>Fonction à exécuter pour chaque élément, prenant éventuellement 3 arguments :
- <dl>
-  <dt><em><code>currentValue</code></em></dt>
-  <dd>L'élément en cours de traitement dans le tableau.</dd>
-  <dt><code><em>currentIndex</em></code></dt>
-  <dd>L'index de l'élément en cours de traitement dans le tableau.</dd>
-  <dt><em><code>listObj</code></em></dt>
-  <dd>Le tableau que <code>forEach()</code> est en train d'appliquer.</dd>
- </dl>
- </dd>
- <dt><em><code>argument</code></em><code> {{Optional_inline}}</code></dt>
- <dd>Valeur à utiliser comme {{jsxref("this")}} lors de l'exécution du <code>callback</code> (<em>rappel</em>).</dd>
-</dl>
+- `callback`
 
-<h3 id="Valeur_renvoyée">Valeur renvoyée</h3>
+  - : Fonction à exécuter pour chaque élément, prenant éventuellement 3 arguments :
 
-<p>{{jsxref('undefined')}} (<em>indéfinie</em>).</p>
+    - _`currentValue`_
+      - : L'élément en cours de traitement dans le tableau.
+    - `currentIndex`
+      - : L'index de l'élément en cours de traitement dans le tableau.
+    - _`listObj`_
+      - : Le tableau que `forEach()` est en train d'appliquer.
 
-<h2 id="Exemple">Exemple</h2>
+- _`argument`_` {{Optional_inline}}`
+  - : Valeur à utiliser comme {{jsxref("this")}} lors de l'exécution du `callback` (_rappel_).
 
-<p>Dans l'exemple suivant, nous récupérons la liste des classes définies dans un élément {{htmlelement("span")}} en tant que <code>DOMTokenList</code> en utilisant {{domxref("Element.classList")}}. Nous récupérons un itérateur contenant les valeurs avec <code>forEach()</code> et écrivons chacune d'elles dans le  {{domxref("Node.textContent")}} du <code>&lt;span&gt;</code> pendant l'exécution de la fonction interne <code>forEach()</code>.</p>
+### Valeur renvoyée
 
-<h3 id="HTML">HTML</h3>
+{{jsxref('undefined')}} (_indéfinie_).
 
-<pre class="brush: html">&lt;span class="a b c"&gt;&lt;/span&gt;</pre>
+## Exemple
 
-<h3 id="JavaScript">JavaScript</h3>
+Dans l'exemple suivant, nous récupérons la liste des classes définies dans un élément {{htmlelement("span")}} en tant que `DOMTokenList` en utilisant {{domxref("Element.classList")}}. Nous récupérons un itérateur contenant les valeurs avec `forEach()` et écrivons chacune d'elles dans le  {{domxref("Node.textContent")}} du `<span>` pendant l'exécution de la fonction interne `forEach()`.
 
-<pre class="brush: js">var span = document.querySelector("span");
+### HTML
+
+```html
+<span class="a b c"></span>
+```
+
+### JavaScript
+
+```js
+var span = document.querySelector("span");
 var classes = span.classList;
 var iterator = classes.values();
 
@@ -62,35 +62,23 @@ classes.forEach(
     span.textContent += value + ' ' + key + "/" + this + '  ++  ';
   },
   "arg"
-);</pre>
+);
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{ EmbedLiveSample('Example', '100%', 60) }}</p>
+{{ EmbedLiveSample('Example', '100%', 60) }}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG','#interface-domtokenlist','forEach() (as iterable&lt;Node&gt;)')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                            | Statut                           | Commentaire          |
+| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName('DOM WHATWG','#interface-domtokenlist','forEach() (as iterable&lt;Node&gt;)')}} | {{Spec2('DOM WHATWG')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<div>{{Compat("api.DOMTokenList.forEach")}}</div>
+{{Compat("api.DOMTokenList.forEach")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("DOMSettableTokenList")}} (objet qui étend DOMTokenList avec la propriété définissable <em>.value</em>)</li>
-</ul>
+- {{domxref("DOMSettableTokenList")}} (objet qui étend DOMTokenList avec la propriété définissable _.value_)
diff --git a/files/fr/web/api/domtokenlist/index.md b/files/fr/web/api/domtokenlist/index.md
index 8f454506dd..8cbf548fc2 100644
--- a/files/fr/web/api/domtokenlist/index.md
+++ b/files/fr/web/api/domtokenlist/index.md
@@ -10,105 +10,94 @@ tags:
   - Marques
 translation_of: Web/API/DOMTokenList
 ---
-<div>{{APIRef("DOM")}}</div>
-
-<p>L'interface <code><strong>DOMTokenList</strong></code> représente un ensemble de "token" (<em>marques</em>) séparées par un espace. On obtient un tel ensemble grâce aux propriétés {{domxref("Element.classList")}}, {{domxref("HTMLLinkElement.relList")}}, {{domxref("HTMLAnchorElement.relList")}} ou {{domxref("HTMLAreaElement.relList")}}. Les positions de cette liste sont numérotées à partir de 0.<code> DOMTokenList</code> est toujours sensible à la casse.</p>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<dl>
- <dt>{{domxref("DOMTokenList.length")}} {{ReadOnlyInline}}</dt>
- <dd>Un entier qui représente le nombre d'objets qui sont stockés dans l'objet.</dd>
- <dt>{{domxref("DOMTokenList.value")}} {{ReadOnlyInline}}</dt>
- <dd>retourne la valeur de la liste comme une {{domxref("DOMString")}}  <em>(chaîne de caractères).</em></dd>
-</dl>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<dl>
- <dt>{{domxref("DOMTokenList.item()")}}</dt>
- <dd>renvoie un élément de la liste à partir de son index (ou {{jsxref("undefined")}} lorsque le nombre passé est supérieur ou égal à la longueur de la liste).</dd>
- <dt>{{domxref("DOMTokenList.contains()")}}</dt>
- <dd>renvoie <code>true</code> <em>(vrai)</em> si la chaîne de caractères contient la marque <em>(token)</em> passée en argument, <code>false</code> <em>(faux)</em> sinon.</dd>
- <dt>{{domxref("DOMTokenList.add()")}}</dt>
- <dd>ajoute une marque à la chaîne sous-jacente.</dd>
- <dt>{{domxref("DOMTokenList.remove()")}}</dt>
- <dd>retire une marque de la chaîne sous-jacente.</dd>
- <dt>{{domxref("DOMTokenList.replace()")}}</dt>
- <dd>remplace une marque existant par une nouvelle.</dd>
- <dt>{{domxref("DOMTokenList.supports()")}}</dt>
- <dd>renvoie <code>true</code> <em>(vrai)</em> si une marque passée en argument appartient bien aux marques prises en charge pour l'attribut correspondant.</dd>
- <dt>{{domxref("DOMTokenList.toggle()")}}</dt>
- <dd>retire une marque de la chaîne de caractères sous-jacente et renvoie <code>false</code>. Si la marque n'existe pas, elle est ajoutée et la méthode renvoie <code>true</code>.</dd>
- <dt>{{domxref("DOMTokenList.entries()")}}</dt>
- <dd>renvoie un {{jsxref("Iteration_protocols","itérateur","",1)}} qui permet de parcourir l'ensemble des clés/valeurs contenues dans cet objet.</dd>
- <dt>{{domxref("DOMTokenList.forEach()")}}</dt>
- <dd>exécute une fonction pour chaque élément de la <code>DOMTokenList</code>.</dd>
- <dt>{{domxref("DOMTokenList.keys()")}}</dt>
- <dd>renvoie un {{jsxref("Iteration_protocols", "itérateur","",1)}} qui permet de parcourir l'ensemble des clés contenues dans cet objet.</dd>
- <dt>{{domxref("DOMTokenList.values()")}}</dt>
- <dd>renvoie un {{jsxref("Iteration_protocols", "itérateur","",1)}} qui permet de parcourir l'ensemble des valeurs contenues dans cet objet.</dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Dans l'exemple suivant, nous récupérons la liste d'un ensemble de classes définies sur un élément {{htmlelement("p")}} en tant que <code>DOMTokenList</code> en<code> </code>utilisant  {{domxref("Element.classList")}}, ajoutons une classe en utilisant  {{domxref("DOMTokenList.add()")}}, puis mettons à jour le {{domxref("Node.textContent")}} du <code>&lt;p&gt;</code> pour qu'il soit égal à la  <code>DOMTokenList</code>.</p>
-
-<p>D'abord HTML :</p>
-
-<pre class="brush: html">&lt;p class="a b c"&gt;&lt;/p&gt;</pre>
-
-<p>Puis Javascript :</p>
-
-<pre class="brush: js">var para = document.querySelector("p");
+{{APIRef("DOM")}}
+
+L'interface **`DOMTokenList`** représente un ensemble de "token" (_marques_) séparées par un espace. On obtient un tel ensemble grâce aux propriétés {{domxref("Element.classList")}}, {{domxref("HTMLLinkElement.relList")}}, {{domxref("HTMLAnchorElement.relList")}} ou {{domxref("HTMLAreaElement.relList")}}. Les positions de cette liste sont numérotées à partir de 0.` DOMTokenList` est toujours sensible à la casse.
+
+## Propriétés
+
+- {{domxref("DOMTokenList.length")}} {{ReadOnlyInline}}
+  - : Un entier qui représente le nombre d'objets qui sont stockés dans l'objet.
+- {{domxref("DOMTokenList.value")}} {{ReadOnlyInline}}
+  - : retourne la valeur de la liste comme une {{domxref("DOMString")}}  _(chaîne de caractères)._
+
+## Méthodes
+
+- {{domxref("DOMTokenList.item()")}}
+  - : renvoie un élément de la liste à partir de son index (ou {{jsxref("undefined")}} lorsque le nombre passé est supérieur ou égal à la longueur de la liste).
+- {{domxref("DOMTokenList.contains()")}}
+  - : renvoie `true` _(vrai)_ si la chaîne de caractères contient la marque _(token)_ passée en argument, `false` _(faux)_ sinon.
+- {{domxref("DOMTokenList.add()")}}
+  - : ajoute une marque à la chaîne sous-jacente.
+- {{domxref("DOMTokenList.remove()")}}
+  - : retire une marque de la chaîne sous-jacente.
+- {{domxref("DOMTokenList.replace()")}}
+  - : remplace une marque existant par une nouvelle.
+- {{domxref("DOMTokenList.supports()")}}
+  - : renvoie `true` _(vrai)_ si une marque passée en argument appartient bien aux marques prises en charge pour l'attribut correspondant.
+- {{domxref("DOMTokenList.toggle()")}}
+  - : retire une marque de la chaîne de caractères sous-jacente et renvoie `false`. Si la marque n'existe pas, elle est ajoutée et la méthode renvoie `true`.
+- {{domxref("DOMTokenList.entries()")}}
+  - : renvoie un {{jsxref("Iteration_protocols","itérateur","",1)}} qui permet de parcourir l'ensemble des clés/valeurs contenues dans cet objet.
+- {{domxref("DOMTokenList.forEach()")}}
+  - : exécute une fonction pour chaque élément de la `DOMTokenList`.
+- {{domxref("DOMTokenList.keys()")}}
+  - : renvoie un {{jsxref("Iteration_protocols", "itérateur","",1)}} qui permet de parcourir l'ensemble des clés contenues dans cet objet.
+- {{domxref("DOMTokenList.values()")}}
+  - : renvoie un {{jsxref("Iteration_protocols", "itérateur","",1)}} qui permet de parcourir l'ensemble des valeurs contenues dans cet objet.
+
+## Exemples
+
+Dans l'exemple suivant, nous récupérons la liste d'un ensemble de classes définies sur un élément {{htmlelement("p")}} en tant que `DOMTokenList` en` `utilisant  {{domxref("Element.classList")}}, ajoutons une classe en utilisant  {{domxref("DOMTokenList.add()")}}, puis mettons à jour le {{domxref("Node.textContent")}} du `<p>` pour qu'il soit égal à la  `DOMTokenList`.
+
+D'abord HTML :
+
+```html
+<p class="a b c"></p>
+```
+
+Puis Javascript :
+
+```js
+var para = document.querySelector("p");
 var classes = para.classList;
 para.classList.add("d");
-para.textContent = 'paragraph classList is "' + classes + '"';</pre>
+para.textContent = 'paragraph classList is "' + classes + '"';
+```
 
-<p>La sortie ressemble à ceci :</p>
+La sortie ressemble à ceci :
 
-<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</p>
+{{ EmbedLiveSample('Examples', '100%', 60) }}
 
-<h2 id="Découpage_des_espaces_et_suppression_des_doublons">Découpage des espaces et suppression des doublons</h2>
+## Découpage des espaces et suppression des doublons
 
-<p>Les méthodes qui modifient la <code>DOMTokenList</code> (comme {{domxref("DOMTokenList.add()")}}) suppriment automatiquement les espaces en excès et les valeurs en double de la liste. Par exemple :</p>
+Les méthodes qui modifient la `DOMTokenList` (comme {{domxref("DOMTokenList.add()")}}) suppriment automatiquement les espaces en excès et les valeurs en double de la liste. Par exemple :
 
-<pre class="brush: html">&lt;span class="    d   d e f"&gt;&lt;/span&gt;</pre>
+```html
+<span class="    d   d e f"></span>
+```
 
-<pre class="brush: js">var span = document.querySelector("span");
+```js
+var span = document.querySelector("span");
 var classes = span.classList;
 span.classList.add("x");
-span.textContent = 'span classList is "' + classes + '"';</pre>
+span.textContent = 'span classList is "' + classes + '"';
+```
 
-<p>La sortie ressemble à ceci :</p>
+La sortie ressemble à ceci :
 
-<p>{{ EmbedLiveSample('Trimming_of_whitespace_and_removal_of_duplicates', '100%', 60) }}</p>
+{{ EmbedLiveSample('Trimming_of_whitespace_and_removal_of_duplicates', '100%', 60) }}
 
-<h2 id="Spécifications">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("DOM WHATWG", "#interface-domtokenlist", "DOMTokenList")}}</td>
-   <td>{{Spec2("DOM WHATWG")}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                | Statut                           | Commentaire         |
+| -------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- |
+| {{SpecName("DOM WHATWG", "#interface-domtokenlist", "DOMTokenList")}} | {{Spec2("DOM WHATWG")}} | Définition initiale |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<div>{{Compat("api.DOMTokenList")}}</div>
+{{Compat("api.DOMTokenList")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("DOMSettableTokenList")}} : un objet qui étend <code>DOMTokenList</code> avec une propriété <em>.value</em> modifiable</li>
-</ul>
+- {{domxref("DOMSettableTokenList")}} : un objet qui étend `DOMTokenList` avec une propriété _.value_ modifiable
diff --git a/files/fr/web/api/domtokenlist/item/index.md b/files/fr/web/api/domtokenlist/item/index.md
index c3f6c7dc17..c1d22f88c5 100644
--- a/files/fr/web/api/domtokenlist/item/index.md
+++ b/files/fr/web/api/domtokenlist/item/index.md
@@ -9,61 +9,52 @@ tags:
   - Méthodes
 translation_of: Web/API/DOMTokenList/item
 ---
-<p>{{APIRef("DOM")}}</p>
+{{APIRef("DOM")}}
 
-<p>La méthode <code><strong>item()</strong></code> de l'interface {{domxref("DOMTokenList")}} renvoie un élément de la liste par son index.</p>
+La méthode **`item()`** de l'interface {{domxref("DOMTokenList")}} renvoie un élément de la liste par son index.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">tokenList.item(index);</pre>
+    tokenList.item(index);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt>index</dt>
- <dd>Une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) représentant l'index de l'élément dont on veut le retour.</dd>
-</dl>
+- index
+  - : Une {{domxref("DOMString")}} (_chaîne de caractères_) représentant l'index de l'élément dont on veut le retour.
 
-<h3 id="Valeur_retournée">Valeur retournée</h3>
+### Valeur retournée
 
-<p>Une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) représentant l'élément renvoyé. Le retour est <code>undefined</code> (<em>indéfini</em>) si le nombre est plus grand que ou égal à la longueur de la liste.</p>
+Une {{domxref("DOMString")}} (_chaîne de caractères_) représentant l'élément renvoyé. Le retour est `undefined` (_indéfini_) si le nombre est plus grand que ou égal à la longueur de la liste.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans l'exemple suivant, nous récupérons la liste des classes définies dans un élément {{htmlelement("span")}} en tant que <code>DOMTokenList</code> en utilisant {{domxref("Element.classList")}}. Nous récupérons le dernier élément dans la liste en utilisant <em>item(length-1)</em> et l'écrivons dans le {{domxref("Node.textContent")}} du <code>&lt;span&gt;</code>.</p>
+Dans l'exemple suivant, nous récupérons la liste des classes définies dans un élément {{htmlelement("span")}} en tant que `DOMTokenList` en utilisant {{domxref("Element.classList")}}. Nous récupérons le dernier élément dans la liste en utilisant _item(length-1)_ et l'écrivons dans le {{domxref("Node.textContent")}} du `<span>`.
 
-<p>D'abord le code HTML :</p>
+D'abord le code HTML :
 
-<pre class="brush: html">&lt;span class="a b c"&gt;&lt;/span&gt;</pre>
+```html
+<span class="a b c"></span>
+```
 
-<p>Maintenant le JavaScript :</p>
+Maintenant le JavaScript :
 
-<pre class="brush: js">var span = document.querySelector("span");
+```js
+var span = document.querySelector("span");
 var classes = span.classList;
 var item = classes.item(classes.length-1);
-span.textContent = item;</pre>
+span.textContent = item;
+```
 
-<p>La sortie ressemble à ceci :</p>
+La sortie ressemble à ceci :
 
-<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</p>
+{{ EmbedLiveSample('Examples', '100%', 60) }}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG','#dom-domtokenlist-item','item()')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                    | Statut                           | Commentaire         |
+| -------------------------------------------------------------------------------- | -------------------------------- | ------------------- |
+| {{SpecName('DOM WHATWG','#dom-domtokenlist-item','item()')}} | {{Spec2('DOM WHATWG')}} | Définition initiale |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<div>{{Compat("api.DOMTokenList.item")}}</div>
\ No newline at end of file
+{{Compat("api.DOMTokenList.item")}}
diff --git a/files/fr/web/api/domtokenlist/keys/index.md b/files/fr/web/api/domtokenlist/keys/index.md
index b707fae355..f5408bd2c6 100644
--- a/files/fr/web/api/domtokenlist/keys/index.md
+++ b/files/fr/web/api/domtokenlist/keys/index.md
@@ -12,61 +12,54 @@ tags:
   - for of
 translation_of: Web/API/DOMTokenList/keys
 ---
-<p>{{APIRef("DOM")}}</p>
+{{APIRef("DOM")}}
 
-<p>La méthode <code><strong>keys()</strong></code> de l'interface {{domxref("DOMTokenList")}} renvoie un {{jsxref("Les_protocoles_iteration",'itérateur')}} permettant de parcourir toutes les clés contenues dans cet objet. Les clés sont de type <code>unsigned integer</code> <em>(entier non signé)</em>.</p>
+La méthode **`keys()`** de l'interface {{domxref("DOMTokenList")}} renvoie un {{jsxref("Les_protocoles_iteration",'itérateur')}} permettant de parcourir toutes les clés contenues dans cet objet. Les clés sont de type `unsigned integer` _(entier non signé)_.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">tokenList.keys();</pre>
+    tokenList.keys();
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<p>Aucun.</p>
+Aucun.
 
-<h3 id="Valeur_retournée">Valeur retournée</h3>
+### Valeur retournée
 
-<p>Renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}}.</p>
+Renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}}.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans l'exemple suivant, nous récupérons la liste des classes définies dans un élément {{htmlelement("span")}} en tant que <code>DOMTokenList</code> en utilisant {{domxref("Element.classList")}}. Ensuite nous récupérons un itérateur contenant les clés en utilisant <code>values()</code>, alors, nous itérons ces clés avec une boucle <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for ... of</a> et écrivons chacune dans le {{domxref("Node.textContent")}} du <code>&lt;span&gt;</code>.</p>
+Dans l'exemple suivant, nous récupérons la liste des classes définies dans un élément {{htmlelement("span")}} en tant que `DOMTokenList` en utilisant {{domxref("Element.classList")}}. Ensuite nous récupérons un itérateur contenant les clés en utilisant `values()`, alors, nous itérons ces clés avec une boucle [for ... of](/en-US/docs/Web/JavaScript/Reference/Statements/for...of) et écrivons chacune dans le {{domxref("Node.textContent")}} du `<span>`.
 
-<p>D'abord, le HTML :</p>
+D'abord, le HTML :
 
-<pre class="brush: html">&lt;span class="a b c"&gt;&lt;/span&gt;</pre>
+```html
+<span class="a b c"></span>
+```
 
-<p>Maintenant le JavaScript:</p>
+Maintenant le JavaScript:
 
-<pre class="brush: js">var span = document.querySelector("span");
+```js
+var span = document.querySelector("span");
 var classes = span.classList;
 var iterator = classes.keys();
 
 for(var value of iterator) {
   span.textContent += value + ' ++ ';
-}</pre>
+}
+```
 
-<p>La sortie ressemble à ceci :</p>
+La sortie ressemble à ceci :
 
-<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</p>
+{{ EmbedLiveSample('Examples', '100%', 60) }}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG','#interface-domtokenList','keys() (as iterable&lt;Node&gt;)')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                        | Statut                           | Commentaire         |
+| -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- |
+| {{SpecName('DOM WHATWG','#interface-domtokenList','keys() (as iterable&lt;Node&gt;)')}} | {{Spec2('DOM WHATWG')}} | Définition initiale |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<div>{{Compat("api.DOMTokenList.keys")}}</div>
\ No newline at end of file
+{{Compat("api.DOMTokenList.keys")}}
diff --git a/files/fr/web/api/domtokenlist/length/index.md b/files/fr/web/api/domtokenlist/length/index.md
index 1e21b1727f..877b240632 100644
--- a/files/fr/web/api/domtokenlist/length/index.md
+++ b/files/fr/web/api/domtokenlist/length/index.md
@@ -9,56 +9,48 @@ tags:
   - Propriétés
 translation_of: Web/API/DOMTokenList/length
 ---
-<p>{{APIRef("DOM")}}</p>
+{{APIRef("DOM")}}
 
-<p>La propriété en lecture seule <code><strong>length</strong></code> (<em>longueur</em>) de l'interface {{domxref("DOMTokenList")}} est un <code>integer</code> (<em>entier</em>) représentant le nombre d'objets stockés dans la liste.</p>
+La propriété en lecture seule **`length`** (_longueur_) de l'interface {{domxref("DOMTokenList")}} est un `integer` (_entier_) représentant le nombre d'objets stockés dans la liste.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">tokenList.length;</pre>
+    tokenList.length;
 
-<h3 id="Value">Value</h3>
+### Value
 
-<p>Un <code>integer</code> (<em>entier</em>).</p>
+Un `integer` (_entier_).
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans l'exemple suivant, nous récupérons la liste des classes définies dans un élément {{htmlelement("span")}} en tant que <code>DOMTokenList</code> en utilisant {{domxref("Element.classList")}}, puis écrivons la longueur (<em>length</em>) de la liste dans le {{domxref("Node.textContent")}} du <code>&lt;span&gt;</code>.</p>
+Dans l'exemple suivant, nous récupérons la liste des classes définies dans un élément {{htmlelement("span")}} en tant que `DOMTokenList` en utilisant {{domxref("Element.classList")}}, puis écrivons la longueur (_length_) de la liste dans le {{domxref("Node.textContent")}} du `<span>`.
 
-<p>D'abord le HTML:</p>
+D'abord le HTML:
 
-<pre class="brush: html">&lt;span class="a b c"&gt;&lt;/span&gt;</pre>
+```html
+<span class="a b c"></span>
+```
 
-<p>Maintenant le JavaScript:</p>
+Maintenant le JavaScript:
 
-<pre class="brush: js">var span = document.querySelector("span");
+```js
+var span = document.querySelector("span");
 var classes = span.classList;
 var length = classes.length;
 
 span.textContent = 'classList length = ' + length;
-</pre>
+```
 
-<p>La sortie ressemble à ceci :</p>
+La sortie ressemble à ceci :
 
-<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</p>
+{{ EmbedLiveSample('Examples', '100%', 60) }}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG','#dom-domtokenlist-length','length')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                        | Statut                           | Commentaire         |
+| ------------------------------------------------------------------------------------ | -------------------------------- | ------------------- |
+| {{SpecName('DOM WHATWG','#dom-domtokenlist-length','length')}} | {{Spec2('DOM WHATWG')}} | Définition initiale |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<div>{{Compat("api.DOMTokenList.length")}}</div>
\ No newline at end of file
+{{Compat("api.DOMTokenList.length")}}
diff --git a/files/fr/web/api/domtokenlist/remove/index.md b/files/fr/web/api/domtokenlist/remove/index.md
index b68c42de55..98f8ccbe34 100644
--- a/files/fr/web/api/domtokenlist/remove/index.md
+++ b/files/fr/web/api/domtokenlist/remove/index.md
@@ -9,71 +9,62 @@ tags:
   - Suppression
 translation_of: Web/API/DOMTokenList/remove
 ---
-<p>{{APIRef("DOM")}}</p>
+{{APIRef("DOM")}}
 
-<p>La méthode <code><strong>remove()</strong></code> de l'interface {{domxref("DOMTokenList")}} supprime sur la liste la marque (<em>token)</em> spécifiée.</p>
+La méthode **`remove()`** de l'interface {{domxref("DOMTokenList")}} supprime sur la liste la marque (_token)_ spécifiée.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">tokenList.remove(token1[, token2[, ...]]);</pre>
+    tokenList.remove(token1[, token2[, ...]]);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt>tokenN...</dt>
- <dd>Une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) représentant la marque que vous voulez supprimer sur la liste. Si la chaîne de caractères n'existe pas sur la liste, aucune erreur n'est levée et rien ne se passe.</dd>
-</dl>
+- tokenN...
+  - : Une {{domxref("DOMString")}} (_chaîne de caractères_) représentant la marque que vous voulez supprimer sur la liste. Si la chaîne de caractères n'existe pas sur la liste, aucune erreur n'est levée et rien ne se passe.
 
-<h3 id="Valeur_retournée">Valeur retournée</h3>
+### Valeur retournée
 
-<p>Vide.</p>
+Vide.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans l'exemple suivant, nous récupérons la liste des classes définies dans l'élément {{htmlelement("span")}} en tant que <code>DOMTokenList</code> en utilisant {{domxref("Element.classList")}}. Nous retirons ensuite une marque sur la liste et écrivons la liste dans le {{domxref("Node.textContent")}} du <code>&lt;span&gt;</code>.</p>
+Dans l'exemple suivant, nous récupérons la liste des classes définies dans l'élément {{htmlelement("span")}} en tant que `DOMTokenList` en utilisant {{domxref("Element.classList")}}. Nous retirons ensuite une marque sur la liste et écrivons la liste dans le {{domxref("Node.textContent")}} du `<span>`.
 
-<p>D'abord, le HTML :</p>
+D'abord, le HTML :
 
-<pre class="brush: html">&lt;span class="a b c"&gt;&lt;/span&gt;</pre>
+```html
+<span class="a b c"></span>
+```
 
-<p>Maintenant le JavaScript :</p>
+Maintenant le JavaScript :
 
-<pre class="brush: js">var span = document.querySelector("span");
+```js
+var span = document.querySelector("span");
 var classes = span.classList;
 classes.remove("c");
 span.textContent = classes;
-</pre>
+```
 
-<p>La sortie ressemble à ceci :</p>
+La sortie ressemble à ceci :
 
-<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</p>
+{{ EmbedLiveSample('Examples', '100%', 60) }}
 
-<p>Pour supprimer plusieurs classes à la fois, vous pouvez utiliser un tableau (<em>array</em>) avec la <a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateur_de_d%C3%A9composition">syntaxe de décomposition</a>. L'ordre des classes n'a pas d'importance :</p>
+Pour supprimer plusieurs classes à la fois, vous pouvez utiliser un tableau (_array_) avec la [syntaxe de décomposition](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateur_de_d%C3%A9composition). L'ordre des classes n'a pas d'importance :
 
-<pre class="brush: js">let span = document.getElementsByTagName("span")[0],
+```js
+let span = document.getElementsByTagName("span")[0],
   classes = span.classList;
 
 classes.remove(...['c', 'b']);
 span.textContent = classes;
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG','#dom-domtokenlist-remove','remove()')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<div>{{Compat("api.DOMTokenList.remove")}}</div>
\ No newline at end of file
+```
+
+## Spécifications
+
+| Spécification                                                                        | Statut                           | Commentaire         |
+| ------------------------------------------------------------------------------------ | -------------------------------- | ------------------- |
+| {{SpecName('DOM WHATWG','#dom-domtokenlist-remove','remove()')}} | {{Spec2('DOM WHATWG')}} | Définition initiale |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.DOMTokenList.remove")}}
diff --git a/files/fr/web/api/domtokenlist/replace/index.md b/files/fr/web/api/domtokenlist/replace/index.md
index e3c1d8d799..a352208494 100644
--- a/files/fr/web/api/domtokenlist/replace/index.md
+++ b/files/fr/web/api/domtokenlist/replace/index.md
@@ -9,38 +9,39 @@ tags:
   - Remplacement
 translation_of: Web/API/DOMTokenList/replace
 ---
-<p>{{APIRef("DOM")}}</p>
+{{APIRef("DOM")}}
 
-<p>La méthode <code><strong>replace()</strong></code> de l'interface {{domxref("DOMTokenList")}} remplace une marque <em>(token)</em> existante par une nouvelle marque.</p>
+La méthode **`replace()`** de l'interface {{domxref("DOMTokenList")}} remplace une marque _(token)_ existante par une nouvelle marque.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">tokenList.replace(oldToken,newToken);</pre>
+    tokenList.replace(oldToken,newToken);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt>oldToken</dt>
- <dd>Une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) représentant la marque que vous voulez remplacer.</dd>
- <dt>newToken</dt>
- <dd>Une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) représentant la marque avec laquelle vous voulez remplacer l'ancienne.</dd>
-</dl>
+- oldToken
+  - : Une {{domxref("DOMString")}} (_chaîne de caractères_) représentant la marque que vous voulez remplacer.
+- newToken
+  - : Une {{domxref("DOMString")}} (_chaîne de caractères_) représentant la marque avec laquelle vous voulez remplacer l'ancienne.
 
-<h3 id="Valeur_retournée">Valeur retournée</h3>
+### Valeur retournée
 
-<p>Vide.</p>
+Vide.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans l'exemple suivant, nous récupérons la liste des classes définies dans un élément {{htmlelement("span")}} en tant que <code>DOMTokenList</code> en utilisant {{domxref("Element.classList")}}. Nous remplaçons alors la marque dans la liste et écrivons la liste dans le {{domxref("Node.textContent")}} du <code>&lt;span&gt;</code>.</p>
+Dans l'exemple suivant, nous récupérons la liste des classes définies dans un élément {{htmlelement("span")}} en tant que `DOMTokenList` en utilisant {{domxref("Element.classList")}}. Nous remplaçons alors la marque dans la liste et écrivons la liste dans le {{domxref("Node.textContent")}} du `<span>`.
 
-<p>D'abord, le HTML :</p>
+D'abord, le HTML :
 
-<pre class="brush: html">&lt;span class="a b c"&gt;&lt;/span&gt;</pre>
+```html
+<span class="a b c"></span>
+```
 
-<p>Maintenant le JavaScript :</p>
+Maintenant le JavaScript :
 
-<pre class="brush: js">var span = document.querySelector("span");
+```js
+var span = document.querySelector("span");
 var classes = span.classList;
 try {
   classes.replace("c", "z");
@@ -48,29 +49,18 @@ try {
 } catch(e) {
   span.textContent = e;
 }
-</pre>
+```
 
-<p>La sortie ressemble à ceci :</p>
+La sortie ressemble à ceci :
 
-<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</p>
+{{ EmbedLiveSample('Examples', '100%', 60) }}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG','#dom-domtokenlist-replace','replace()')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                            | Statut                           | Commentaire         |
+| ---------------------------------------------------------------------------------------- | -------------------------------- | ------------------- |
+| {{SpecName('DOM WHATWG','#dom-domtokenlist-replace','replace()')}} | {{Spec2('DOM WHATWG')}} | Définition initiale |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<div>{{Compat("api.DOMTokenList.replace")}}</div>
\ No newline at end of file
+{{Compat("api.DOMTokenList.replace")}}
diff --git a/files/fr/web/api/domtokenlist/supports/index.md b/files/fr/web/api/domtokenlist/supports/index.md
index b9fb5ea4cf..8fdc4d6e12 100644
--- a/files/fr/web/api/domtokenlist/supports/index.md
+++ b/files/fr/web/api/domtokenlist/supports/index.md
@@ -7,28 +7,27 @@ tags:
   - Méthodes
 translation_of: Web/API/DOMTokenList/supports
 ---
-<p>{{APIRef("DOM")}}{{SeeCompatTable}}</p>
+{{APIRef("DOM")}}{{SeeCompatTable}}
 
-<p>La méthode <strong><code>supports()</code></strong> de l'interface {{domxref("DOMTokenList")}} renvoie <code>true</code> (<em>vrai</em>) si une marque (<em>token)</em> donnée se trouve parmi les marques prises en charge dans l'attribut associé. Cette méthode est destinée à la détection des fonctionnalités.</p>
+La méthode **`supports()`** de l'interface {{domxref("DOMTokenList")}} renvoie `true` (_vrai_) si une marque (_token)_ donnée se trouve parmi les marques prises en charge dans l'attribut associé. Cette méthode est destinée à la détection des fonctionnalités.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var <em>boolean</em> = element.supports(<em>token</em>)</pre>
+    var boolean = element.supports(token)
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><em><code>token</code></em></dt>
- <dd>Une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) contenant la marque à interroger.</dd>
-</dl>
+- _`token`_
+  - : Une {{domxref("DOMString")}} (_chaîne de caractères_) contenant la marque à interroger.
 
-<h3 id="Renvoie">Renvoie</h3>
+### Renvoie
 
-<p>un {{jsxref("Boolean")}} (<em>booléen</em>) indiquant si la marque a été trouvée.</p>
+un {{jsxref("Boolean")}} (_booléen_) indiquant si la marque a été trouvée.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush: js"><code>var iframe = document.getElementById('display');
+```js
+var iframe = document.getElementById('display');
 if (iframe.sandbox.supports('an-upcoming-feature')) {
   // code de support pour la future et mystérieuse fonctionnalité
 } else {
@@ -38,25 +37,15 @@ if (iframe.sandbox.supports('an-upcoming-feature')) {
 if (iframe.sandbox.supports('allow-scripts')) {
   // instruction cadre de l'exécution de JavaScript
    // NOTE: ceci fonctionne bien mais est juste un exemple!
-}</code></pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Credential Management')}}</td>
-   <td>{{Spec2('Credential Management')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<div>{{Compat("api.DOMTokenList.supports")}}</div>
\ No newline at end of file
+}
+```
+
+## Spécifications
+
+| Spécification                                    | Statut                                       | Commentaire          |
+| ------------------------------------------------ | -------------------------------------------- | -------------------- |
+| {{SpecName('Credential Management')}} | {{Spec2('Credential Management')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.DOMTokenList.supports")}}
diff --git a/files/fr/web/api/domtokenlist/toggle/index.md b/files/fr/web/api/domtokenlist/toggle/index.md
index ef036a01e7..ffc75cd1b8 100644
--- a/files/fr/web/api/domtokenlist/toggle/index.md
+++ b/files/fr/web/api/domtokenlist/toggle/index.md
@@ -9,38 +9,39 @@ tags:
   - Méthodes
 translation_of: Web/API/DOMTokenList/toggle
 ---
-<p>{{APIRef("DOM")}}</p>
+{{APIRef("DOM")}}
 
-<p>La méthode <code><strong>toggle()</strong></code> (<em>bascule</em>) de l'interface {{domxref("DOMTokenList")}} supprime une marque (<em>token)</em> donnée de la liste et renvoie <code>false</code> (<em>faux</em>). Si <em>token</em> n'existe pas, il est ajouté et la fonction renvoie <code>true</code>.</p>
+La méthode **`toggle()`** (_bascule_) de l'interface {{domxref("DOMTokenList")}} supprime une marque (_token)_ donnée de la liste et renvoie `false` (_faux_). Si _token_ n'existe pas, il est ajouté et la fonction renvoie `true`.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">tokenList.toggle(token, force);</pre>
+    tokenList.toggle(token, force);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt>token</dt>
- <dd>Une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) représentant la marque que l'on veut activer.</dd>
- <dt>force {{optional_inline}}</dt>
- <dd>Un {{domxref("Boolean")}} (<em>booléen</em>) qui, si inclus, transforme la bascule (toggle) en opération unique. Si elle est définie <code>false</code> (<em>faux</em>), la marque sera seulement supprimée et aucun ajout ne suivra. Si elle est définie <code>true</code> (<em>vrai</em>), la marque sera seulement ajoutée et pas supprimée après.</dd>
-</dl>
+- token
+  - : Une {{domxref("DOMString")}} (_chaîne de caractères_) représentant la marque que l'on veut activer.
+- force {{optional_inline}}
+  - : Un {{domxref("Boolean")}} (_booléen_) qui, si inclus, transforme la bascule (toggle) en opération unique. Si elle est définie `false` (_faux_), la marque sera seulement supprimée et aucun ajout ne suivra. Si elle est définie `true` (_vrai_), la marque sera seulement ajoutée et pas supprimée après.
 
-<h3 id="Valeur_retournée">Valeur retournée</h3>
+### Valeur retournée
 
-<p>Un {{domxref("Boolean")}} (<em>booléen</em>) — <code>false</code> (<em>faux</em>) si la marque n'est pas dans la liste après l'appel ou <code>true</code> (<em>vrai</em>) si elle y est.</p>
+Un {{domxref("Boolean")}} (_booléen_) — `false` (_faux_) si la marque n'est pas dans la liste après l'appel ou `true` (_vrai_) si elle y est.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans l'exemple suivant, nous récupérons la liste des classes définies dans un élément {{htmlelement("span")}} en tant que <code>DOMTokenList</code> en utilisant {{domxref("Element.classList")}}. Nous remplaçons alors une marque dans la liste et écrivons la liste dans le {{domxref("Node.textContent")}} du <code>&lt;span&gt;</code>.</p>
+Dans l'exemple suivant, nous récupérons la liste des classes définies dans un élément {{htmlelement("span")}} en tant que `DOMTokenList` en utilisant {{domxref("Element.classList")}}. Nous remplaçons alors une marque dans la liste et écrivons la liste dans le {{domxref("Node.textContent")}} du `<span>`.
 
-<p>D'abord, le HTML :</p>
+D'abord, le HTML :
 
-<pre class="brush: html">&lt;span class="a b"&gt;classList is 'a b'&lt;/span&gt;</pre>
+```html
+<span class="a b">classList is 'a b'</span>
+```
 
-<p>Maintenant le JavaScript :</p>
+Maintenant le JavaScript :
 
-<pre class="brush: js">var span = document.querySelector("span");
+```js
+var span = document.querySelector("span");
 var classes = span.classList;
 span.onclick = function() {
   var result = classes.toggle("c");
@@ -50,29 +51,18 @@ span.onclick = function() {
     span.textContent = "'c' removed; classList is now '" + classes + "'.";
   }
 }
-</pre>
+```
 
-<p>La sortie ressemble à ceci :</p>
+La sortie ressemble à ceci :
 
-<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</p>
+{{ EmbedLiveSample('Examples', '100%', 60) }}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG','#dom-domtokenlist-toggle','toggle()')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                        | Statut                           | Commentaire          |
+| ------------------------------------------------------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName('DOM WHATWG','#dom-domtokenlist-toggle','toggle()')}} | {{Spec2('DOM WHATWG')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<div>{{Compat("api.DOMTokenList.toggle")}}</div>
\ No newline at end of file
+{{Compat("api.DOMTokenList.toggle")}}
diff --git a/files/fr/web/api/domtokenlist/value/index.md b/files/fr/web/api/domtokenlist/value/index.md
index da23f74aaf..675415f3fc 100644
--- a/files/fr/web/api/domtokenlist/value/index.md
+++ b/files/fr/web/api/domtokenlist/value/index.md
@@ -8,54 +8,46 @@ tags:
   - Valeur
 translation_of: Web/API/DOMTokenList/value
 ---
-<p>{{APIRef("DOM")}}</p>
+{{APIRef("DOM")}}
 
-<p>La propriété <code><strong>value</strong></code> (<em>valeur</em>) de l'interface {{domxref("DOMTokenList")}} renvoie la valeur de la liste en tant que {{domxref("DOMString")}} (chaîne de caractères), ou efface et définit la liste à la valeur donnée.</p>
+La propriété **`value`** (_valeur_) de l'interface {{domxref("DOMTokenList")}} renvoie la valeur de la liste en tant que {{domxref("DOMString")}} (chaîne de caractères), ou efface et définit la liste à la valeur donnée.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">tokenList.value;</pre>
+    tokenList.value;
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>Une {{domxref("DOMString")}} (<em>chaîne de caractères</em>).</p>
+Une {{domxref("DOMString")}} (_chaîne de caractères_).
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans l'exemple suivant, nous récupérons la liste des classes définies sur un élément {{htmlelement("span")}} en tant que <code>DOMTokenList</code> en utilisant {{domxref("Element.classList")}}, puis écrivons alors la valeur de la liste dans le {{domxref("Node.textContent")}} du <code>&lt;span&gt;</code>.</p>
+Dans l'exemple suivant, nous récupérons la liste des classes définies sur un élément {{htmlelement("span")}} en tant que `DOMTokenList` en utilisant {{domxref("Element.classList")}}, puis écrivons alors la valeur de la liste dans le {{domxref("Node.textContent")}} du `<span>`.
 
-<p>D'abord le HTML :</p>
+D'abord le HTML :
 
-<pre class="brush: html">&lt;span class="a b c"&gt;&lt;/span&gt;</pre>
+```html
+<span class="a b c"></span>
+```
 
-<p>Maintenant le JavaScript :</p>
+Maintenant le JavaScript :
 
-<pre class="brush: js">var span = document.querySelector("span");
+```js
+var span = document.querySelector("span");
 var classes = span.classList;
 span.textContent = classes.value;
-</pre>
+```
 
-<p>La sortie ressemble à ceci :</p>
+La sortie ressemble à ceci :
 
-<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</p>
+{{ EmbedLiveSample('Examples', '100%', 60) }}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG','#dom-domtokenlist-value','value')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                    | Statut                           | Commentaire         |
+| -------------------------------------------------------------------------------- | -------------------------------- | ------------------- |
+| {{SpecName('DOM WHATWG','#dom-domtokenlist-value','value')}} | {{Spec2('DOM WHATWG')}} | Définition initiale |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<div>{{Compat("api.DOMTokenList.value")}}</div>
\ No newline at end of file
+{{Compat("api.DOMTokenList.value")}}
diff --git a/files/fr/web/api/domtokenlist/values/index.md b/files/fr/web/api/domtokenlist/values/index.md
index 294f75dd1c..43db920fe6 100644
--- a/files/fr/web/api/domtokenlist/values/index.md
+++ b/files/fr/web/api/domtokenlist/values/index.md
@@ -10,61 +10,54 @@ tags:
   - Valeurs
 translation_of: Web/API/DOMTokenList/values
 ---
-<p>{{APIRef("DOM")}}</p>
+{{APIRef("DOM")}}
 
-<p>La méthode <code><strong>values()</strong></code> (<em>valeurs</em>) de l'interface {{domxref("DOMTokenList")}} renvoie un {{jsxref("Les_protocoles_iteration",'itérateur')}} permettant aux développeurs de passer en revue toutes les valeurs contenues dans la <code>DOMTokenList</code>. Individuellement, les valeurs sont des objets {{domxref("DOMString")}} (<em>chaînes de caractères</em>).</p>
+La méthode **`values()`** (_valeurs_) de l'interface {{domxref("DOMTokenList")}} renvoie un {{jsxref("Les_protocoles_iteration",'itérateur')}} permettant aux développeurs de passer en revue toutes les valeurs contenues dans la `DOMTokenList`. Individuellement, les valeurs sont des objets {{domxref("DOMString")}} (_chaînes de caractères_).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">tokenList.values();</pre>
+    tokenList.values();
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<p>Aucun.</p>
+Aucun.
 
-<h3 id="Valeur_retournée">Valeur retournée</h3>
+### Valeur retournée
 
-<p>Renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}}.</p>
+Renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}}.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans l'exemple suivant, nous récupérons la liste des classes définies dans un élément {{htmlelement("span")}} en tant que <code>DOMTokenList</code> en utilisant {{domxref("Element.classList")}}. Si nous récupérons un itérateur contenant les valeurs en utilisant <code>values()</code>, nous les itérons alors en utilisant une boucle <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for ... of</a> et écrivons chacune dans le {{domxref("Node.textContent")}} du <code>&lt;span&gt;</code>.</p>
+Dans l'exemple suivant, nous récupérons la liste des classes définies dans un élément {{htmlelement("span")}} en tant que `DOMTokenList` en utilisant {{domxref("Element.classList")}}. Si nous récupérons un itérateur contenant les valeurs en utilisant `values()`, nous les itérons alors en utilisant une boucle [for ... of](/en-US/docs/Web/JavaScript/Reference/Statements/for...of) et écrivons chacune dans le {{domxref("Node.textContent")}} du `<span>`.
 
-<p>D'abord, le HTML :</p>
+D'abord, le HTML :
 
-<pre class="brush: html">&lt;span class="a b c"&gt;&lt;/span&gt;</pre>
+```html
+<span class="a b c"></span>
+```
 
-<p>Maintenant le JavaScript :</p>
+Maintenant le JavaScript :
 
-<pre class="brush: js">var span = document.querySelector("span");
+```js
+var span = document.querySelector("span");
 var classes = span.classList;
 var iterator = classes.values();
 
 for(var value of iterator) {
   span.textContent += value + ' ++ ';
-}</pre>
+}
+```
 
-<p>La sortie ressemble à ceci :</p>
+La sortie ressemble à ceci :
 
-<p>{{ EmbedLiveSample('Examples', '100%', 60) }}</p>
+{{ EmbedLiveSample('Examples', '100%', 60) }}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG','#interface-domtokenList','values() (as iterable&lt;Node&gt;)')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                            | Statut                           | Commentaire         |
+| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------- |
+| {{SpecName('DOM WHATWG','#interface-domtokenList','values() (as iterable&lt;Node&gt;)')}} | {{Spec2('DOM WHATWG')}} | Définition initiale |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<div>{{Compat("api.DOMTokenList.values")}}</div>
\ No newline at end of file
+{{Compat("api.DOMTokenList.values")}}
diff --git a/files/fr/web/api/effecttiming/delay/index.md b/files/fr/web/api/effecttiming/delay/index.md
index 82ec0c5c0c..c8480f04d4 100644
--- a/files/fr/web/api/effecttiming/delay/index.md
+++ b/files/fr/web/api/effecttiming/delay/index.md
@@ -11,32 +11,30 @@ tags:
 translation_of: Web/API/EffectTiming/delay
 original_slug: Web/API/AnimationEffectTimingProperties/delay
 ---
-<div>{{SeeCompatTable}}{{APIRef("Web Animations")}}</div>
+{{SeeCompatTable}}{{APIRef("Web Animations")}}
 
-<p>La propriété <strong><code>delay</code></strong> est un dictionnaire pour {{domxref("AnimationEffectTimingProperties")}} qui représente le nombre de millisecondes à attendre avant de démarrer une animation.</p>
+La propriété **`delay`** est un dictionnaire pour {{domxref("AnimationEffectTimingProperties")}} qui représente le nombre de millisecondes à attendre avant de démarrer une animation.
 
-<div class="note">
-<p><strong>Note :</strong> {{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}} et {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} acceptent toutes un objet avec des propriétés de minutage, y compris <code>delay</code>. La valeur de <code>delay</code> correspond directement à {{domxref("AnimationEffectTimingReadOnly.delay")}} dans les objets  {{domxref("AnimationEffectReadOnly.timing")}} renvoyés par {{domxref("AnimationEffectReadOnly")}}, {{domxref("KeyframeEffectReadOnly")}} et {{domxref("KeyframeEffect")}}.</p>
-</div>
+> **Note :** {{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}} et {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} acceptent toutes un objet avec des propriétés de minutage, y compris `delay`. La valeur de `delay` correspond directement à {{domxref("AnimationEffectTimingReadOnly.delay")}} dans les objets  {{domxref("AnimationEffectReadOnly.timing")}} renvoyés par {{domxref("AnimationEffectReadOnly")}}, {{domxref("KeyframeEffectReadOnly")}} et {{domxref("KeyframeEffect")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var <em>timingProperties</em> = {
-  delay: <em>delayInMilliseconds</em>
-};
+    var timingProperties = {
+      delay: delayInMilliseconds
+    };
 
-<em>timingProperties</em>.delay = <em>delayInMilliseconds</em>;
-</pre>
+    timingProperties.delay = delayInMilliseconds;
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>Un nombre qui indique la durée qui doit s'écouler entre le début du cycle de l'animation et le début de l'intervalle d'activité (c'est-à-dire le moment où l'animation commence réellement). La valeur par défaut est 0.</p>
+Un nombre qui indique la durée qui doit s'écouler entre le début du cycle de l'animation et le début de l'intervalle d'activité (c'est-à-dire le moment où l'animation commence réellement). La valeur par défaut est 0.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans l'exemple <em><a href="https://codepen.io/rachelnabors/pen/EPJdJx?editors=0010">Pool of Tears</a></em>, chaque larme commence à un instant aléatoire grâce à l'objet de minutage :</p>
+Dans l'exemple _[Pool of Tears](https://codepen.io/rachelnabors/pen/EPJdJx?editors=0010)_, chaque larme commence à un instant aléatoire grâce à l'objet de minutage :
 
-<pre class="brush: js">// Générateur de valeurs plus
+```js
+// Générateur de valeurs plus
 // ou moins aléatoires
 var getRandomMsRange = function(min, max) {
   return Math.random() * (max - min) + min;
@@ -54,34 +52,22 @@ tears.forEach(function(el) {
       iterations: Infinity,
       easing: "cubic-bezier(0.6, 0.04, 0.98, 0.335)"
     });
-});</pre>
-
-<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('Web Animations', '#start-delay', 'delay')}}</td>
-   <td>{{Spec2('Web Animations')}}</td>
-   <td>Brouillon d'édiiton.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.EffectTiming.delay")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/Web_Animations_API">L'API Web Animations</a></li>
- <li>{{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}}, et {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} qui acceptent toutes un objet de minutage, y compris celui-ci (<code>delay</code>)</li>
- <li>La valeur de cette propriété correspond à celle de {{domxref("AnimationEffectTimingReadOnly")}} (qui est l'objet de minutage {{domxref("AnimationEffectReadOnly.timing", "timing")}} pour {{domxref("AnimationEffectReadOnly")}}, {{domxref("KeyframeEffectReadOnly")}} et {{domxref("KeyframeEffect")}}).</li>
- <li>Les propriétés CSS {{cssxref("transition-delay")}} et {{cssxref("animation-delay")}}</li>
-</ul>
+});
+```
+
+## Spécifications
+
+| Spécification                                                            | État                                 | Commentaires         |
+| ------------------------------------------------------------------------ | ------------------------------------ | -------------------- |
+| {{SpecName('Web Animations', '#start-delay', 'delay')}} | {{Spec2('Web Animations')}} | Brouillon d'édiiton. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.EffectTiming.delay")}}
+
+## Voir aussi
+
+- [L'API Web Animations](/fr/docs/Web/API/Web_Animations_API)
+- {{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}}, et {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} qui acceptent toutes un objet de minutage, y compris celui-ci (`delay`)
+- La valeur de cette propriété correspond à celle de {{domxref("AnimationEffectTimingReadOnly")}} (qui est l'objet de minutage {{domxref("AnimationEffectReadOnly.timing", "timing")}} pour {{domxref("AnimationEffectReadOnly")}}, {{domxref("KeyframeEffectReadOnly")}} et {{domxref("KeyframeEffect")}}).
+- Les propriétés CSS {{cssxref("transition-delay")}} et {{cssxref("animation-delay")}}
diff --git a/files/fr/web/api/effecttiming/index.md b/files/fr/web/api/effecttiming/index.md
index 3cbcad981f..a92f204fb7 100644
--- a/files/fr/web/api/effecttiming/index.md
+++ b/files/fr/web/api/effecttiming/index.md
@@ -12,60 +12,45 @@ tags:
 translation_of: Web/API/EffectTiming
 original_slug: Web/API/AnimationEffectTimingProperties
 ---
-<div>{{SeeCompatTable}}{{APIRef("Web Animations")}}</div>
+{{SeeCompatTable}}{{APIRef("Web Animations")}}
 
-<p>Le dictionnaire <strong><code>AnimationEffectTimingProperties</code></strong> est utilisé par les méthodes {{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}} et {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} afin de décrire les propriétés temporelles pour les effets d'animation. L'ensemble de ces propriétés sont optionnelles mais si <code>duration</code> n'est pas paramétrée, l'animation ne sera pas lancée.</p>
+Le dictionnaire **`AnimationEffectTimingProperties`** est utilisé par les méthodes {{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}} et {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} afin de décrire les propriétés temporelles pour les effets d'animation. L'ensemble de ces propriétés sont optionnelles mais si `duration` n'est pas paramétrée, l'animation ne sera pas lancée.
 
-<p>Ces propriétés décrivent la façon dont l'agent utilisateur applique l'animation entre chaque étape (<em>keyframe</em>) et comment elle se comporte au début et à la fin.</p>
+Ces propriétés décrivent la façon dont l'agent utilisateur applique l'animation entre chaque étape (_keyframe_) et comment elle se comporte au début et à la fin.
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<dl>
- <dt>{{domxref("AnimationEffectTimingProperties.delay", "delay")}} {{optional_inline}}</dt>
- <dd>Le nombre de millisecondes à attendre avant de démarrer l'animation. La valeur par défaut est 0.</dd>
- <dt>{{domxref("AnimationEffectTimingProperties.direction", "direction")}} {{optional_inline}}</dt>
- <dd>Indique si l'animation se déroule dans le sens the animation runs forwards (<code>normal</code>), backwards (<code>reverse</code>), switches direction after each iteration (<code>alternate</code>), or runs backwards and switches direction after each iteration (<code>alternate-reverse</code>). Defaults to <code>"normal"</code>.</dd>
- <dt>{{domxref("AnimationEffectTimingProperties.duration", "duration")}} {{optional_inline}}</dt>
- <dd>La durée d'une itération, exprimée en millisecondes. La valeur par défaut est 0. Bien que cette propriété soit optionnelle, il faut garder à l'esprit que l'animation ne sera pas lancée si la valeur est 0.</dd>
- <dt>{{domxref("AnimationEffectTimingProperties.easing", "easing")}} {{optional_inline}}</dt>
- <dd>La courbe de progression de l'animation au cours du temps. Cette propriété accepte des valeurs pré-paramétrées comme <code>"linear"</code>, <code>"ease"</code>, <code>"ease-in"</code>, <code>"ease-out"</code> et <code>"ease-in-out"</code> ou une fonction <code>"cubic-bezier"</code> de la forme <code>"cubic-bezier(0.42, 0, 0.58, 1)"</code>. La valeur par défaut est <code>"linear"</code>.</dd>
- <dt>{{domxref("AnimationEffectTimingProperties.endDelay", "endDelay")}} {{optional_inline}}</dt>
- <dd>Le nombre de millisecondes à attendre après la fin de l'animation. Cette propriété est principalement utilisée lorsqu'on enchaîne une animation à la suite d'une autre. La valeur par défaut est 0.</dd>
- <dt>{{domxref("AnimationEffectTimingProperties.fill", "fill")}} {{optional_inline}}</dt>
- <dd>Indique si les effets de l'animation doivent s'appliqués sur l'élément avant d'être lancée (<code>"backwards"</code>), être conservés après la fin de l'animation (<code>"forwards"</code>) ou les deux <code>both</code>. La valeur par défaut est <code>"none"</code>.</dd>
- <dt>{{domxref("AnimationEffectTimingProperties.iterationStart", "iterationStart")}} {{optional_inline}}</dt>
- <dd>Décrit le point de départ de l'animation par rapport à une itération. Une valeur de 0.5 indique que l'animation démarre au milieu de la première animation (dans ce cas, après deux itérations, l'animation sera arrivée à la moitié de la troisième itération). La valeur par défaut est 0.0.</dd>
- <dt>{{domxref("AnimationEffectTimingProperties.iterations", "iterations")}} {{optional_inline}}</dt>
- <dd>Le nombre de fois que l'animation doit être répétée. La valeur par défaut est 1. Il est possible d'utiliser la valeur {{jsxref("Infinity")}} pour répéter l'animation aussi longtemps que l'élément existe.</dd>
-</dl>
+- {{domxref("AnimationEffectTimingProperties.delay", "delay")}} {{optional_inline}}
+  - : Le nombre de millisecondes à attendre avant de démarrer l'animation. La valeur par défaut est 0.
+- {{domxref("AnimationEffectTimingProperties.direction", "direction")}} {{optional_inline}}
+  - : Indique si l'animation se déroule dans le sens the animation runs forwards (`normal`), backwards (`reverse`), switches direction after each iteration (`alternate`), or runs backwards and switches direction after each iteration (`alternate-reverse`). Defaults to `"normal"`.
+- {{domxref("AnimationEffectTimingProperties.duration", "duration")}} {{optional_inline}}
+  - : La durée d'une itération, exprimée en millisecondes. La valeur par défaut est 0. Bien que cette propriété soit optionnelle, il faut garder à l'esprit que l'animation ne sera pas lancée si la valeur est 0.
+- {{domxref("AnimationEffectTimingProperties.easing", "easing")}} {{optional_inline}}
+  - : La courbe de progression de l'animation au cours du temps. Cette propriété accepte des valeurs pré-paramétrées comme `"linear"`, `"ease"`, `"ease-in"`, `"ease-out"` et `"ease-in-out"` ou une fonction `"cubic-bezier"` de la forme `"cubic-bezier(0.42, 0, 0.58, 1)"`. La valeur par défaut est `"linear"`.
+- {{domxref("AnimationEffectTimingProperties.endDelay", "endDelay")}} {{optional_inline}}
+  - : Le nombre de millisecondes à attendre après la fin de l'animation. Cette propriété est principalement utilisée lorsqu'on enchaîne une animation à la suite d'une autre. La valeur par défaut est 0.
+- {{domxref("AnimationEffectTimingProperties.fill", "fill")}} {{optional_inline}}
+  - : Indique si les effets de l'animation doivent s'appliqués sur l'élément avant d'être lancée (`"backwards"`), être conservés après la fin de l'animation (`"forwards"`) ou les deux `both`. La valeur par défaut est `"none"`.
+- {{domxref("AnimationEffectTimingProperties.iterationStart", "iterationStart")}} {{optional_inline}}
+  - : Décrit le point de départ de l'animation par rapport à une itération. Une valeur de 0.5 indique que l'animation démarre au milieu de la première animation (dans ce cas, après deux itérations, l'animation sera arrivée à la moitié de la troisième itération). La valeur par défaut est 0.0.
+- {{domxref("AnimationEffectTimingProperties.iterations", "iterations")}} {{optional_inline}}
+  - : Le nombre de fois que l'animation doit être répétée. La valeur par défaut est 1. Il est possible d'utiliser la valeur {{jsxref("Infinity")}} pour répéter l'animation aussi longtemps que l'élément existe.
 
-<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('Web Animations', '#the-animationeffecttimingproperties-dictionary', 'AnimationEffectTimingProperties' )}}</td>
-   <td>{{Spec2('Web Animations')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                                                | État                                 | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- |
+| {{SpecName('Web Animations', '#the-animationeffecttimingproperties-dictionary', 'AnimationEffectTimingProperties' )}} | {{Spec2('Web Animations')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.EffectTiming")}}</p>
+{{Compat("api.EffectTiming")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/API/Web_Animations_API">L'API Web Animations</a></li>
- <li><a href="/fr/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API">Utiliser l'API Web Animations</a></li>
- <li>{{domxref("Element.animate()")}}</li>
- <li>{{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}}</li>
- <li>{{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}}</li>
-</ul>
+- [L'API Web Animations](/fr/docs/Web/API/Web_Animations_API)
+- [Utiliser l'API Web Animations](/fr/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API)
+- {{domxref("Element.animate()")}}
+- {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}}
+- {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}}
diff --git a/files/fr/web/api/element/animate/index.md b/files/fr/web/api/element/animate/index.md
index acdf64b4b6..3dd6bd44b9 100644
--- a/files/fr/web/api/element/animate/index.md
+++ b/files/fr/web/api/element/animate/index.md
@@ -5,67 +5,62 @@ tags:
   - API
 translation_of: Web/API/Element/animate
 ---
-<p>{{APIRef('Web Animations')}} {{SeeCompatTable}}</p>
+{{APIRef('Web Animations')}} {{SeeCompatTable}}
 
-<p>La méthode <strong><code>Element.animate()</code></strong> est un raccourci permettant de créer et jouer une animation sur un élément. Elle retourne l'instance de type {{domxref("Animation")}} alors créée.</p>
+La méthode **`Element.animate()`** est un raccourci permettant de créer et jouer une animation sur un élément. Elle retourne l'instance de type {{domxref("Animation")}} alors créée.
 
-<div class="note">
-<p><strong>Note :</strong> Les éléments peuvent avoir plusieurs animations. Vous pouvez obtenir une liste des animations qui affectent un élément en appelant {{domxref("Element.getAnimations()")}}.</p>
-</div>
+> **Note :** Les éléments peuvent avoir plusieurs animations. Vous pouvez obtenir une liste des animations qui affectent un élément en appelant {{domxref("Element.getAnimations()")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js"><var>element</var>.animate(<var>keyframes</var>, <var>options</var>); </pre>
+```js
+element.animate(keyframes, options); 
+```
 
-<h3 id="Paramèters">Paramèters</h3>
+### Paramèters
 
-<dl>
- <dt><code>keyframes</code></dt>
- <dd><p>Un <a href="/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats">objet formatté représentant un ensemble de keyframes</a>.</p></dd>
- <dt><code>options</code></dt>
- <dd><p>Un nombre entier (<em>Integer</em>) <strong>représentant la durée de l'animation</strong> (en millisecondes), ou un objet (<em>Object</em>) <strong>contenant une ou plusieurs propriétés de timing</strong>:</p>
- <dl>
-  <dt><code>id {{optional_inline}}</code></dt>
-  <dd>Une propriété unique pour <code>animate()</code>: une <a href="/en-US/docs/Web/API/DOMString"><code>DOMString</code></a> qui permet de référencer l'animation.</dd>
- </dl>
- </dd>
-</dl>
+- `keyframes`
+  - : Un [objet formatté représentant un ensemble de keyframes](/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats).
+- `options`
 
-<div>{{Page("/en-US/docs/Web/API/Web_Animations_API/Animation_timing_properties", "Properties")}}</div>
+  - : Un nombre entier (_Integer_) **représentant la durée de l'animation** (en millisecondes), ou un objet (_Object_) **contenant une ou plusieurs propriétés de timing**:
 
-<h4 id="Options_à_venir">Options à venir</h4>
+    - `id {{optional_inline}}`
+      - : Une propriété unique pour `animate()`: une [`DOMString`](/en-US/docs/Web/API/DOMString) qui permet de référencer l'animation.
 
-<p>Les options suivantes n'ont pas encore été implémentées, mais seront ajoutées dans un futur proche.</p>
+{{Page("/en-US/docs/Web/API/Web_Animations_API/Animation_timing_properties", "Properties")}}
 
-<dl>
- <dt><code>composite {{optional_inline}}</code></dt>
- <dd>Détermine comment sont combinées les valeurs de cette animation avec d'autres animations qui ne spécifient pas leur propre opération composite. La valeur par défaut est <code>replace</code>.
- <ul>
-  <li><code>add</code> induit un effet d'ajout, dans lequel chaque itération successive se construit sur la précédente. Par exemple pour <code>transform</code>, une valeur <code>translateX(-200px)</code> n'annulerait pas une précédente valeur <code>rotate(20deg)</code> mais s'y ajouterait, pour donner <code>translateX(-200px) rotate(20deg)</code>.</li>
-  <li><code>accumulate</code> est similaire mais un peu plus intéressant: <code>blur(2)</code> et <code>blur(5)</code> deviennent <code>blur(7) et non</code> <code>blur(2) blur(5)</code>.</li>
-  <li><code>replace</code>, quand à elle, remplace la précédente valeur par la nouvelle. </li>
- </ul>
- </dd>
- <dt><code>iterationComposite {{optional_inline}}</code></dt>
- <dd>Détermine comment les valeurs se construisent, d'itération en itération, <strong>dans une même animation</strong>. Peut être définie par <code>accumulate</code> ou <code>replace</code> (voir ci-dessus). La valeur par défaut est <code>replace</code>.</dd>
- <dt><code>spacing {{optional_inline}}</code></dt>
- <dd><p>Détermine comment les keyframes sans offset temporel devraient être réparties sur la durée de l'animation. La valeur par défaut est <code>distribute</code>.</p>
- <ul>
-  <li><code>distribute</code> positionne les keyframes de façon à ce que les différences entre deux offsets de keyframes successifs soient égaux, c'est-à-dire que, sans aucun offset, les keyframes seront distribuées régulièrement / également sur toute la durée de l'animation.</li>
-  <li><code>paced</code> positionne les keyframes de façon à ce que les distances entre deux valeurs successives d'une propriété spécifiée par "paced" soient égales, c'est-à-dire que plus la différence entre les valeurs de ces propriétés successives est grande, plus les keyframes seront éloignées les unes des autres.</li>
- </ul>
- </dd>
-</dl>
+#### Options à venir
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+Les options suivantes n'ont pas encore été implémentées, mais seront ajoutées dans un futur proche.
 
-<p>Retourne un objet de type {{domxref("Animation")}}.</p>
+- `composite {{optional_inline}}`
 
-<h2 id="Exemple">Exemple</h2>
+  - : Détermine comment sont combinées les valeurs de cette animation avec d'autres animations qui ne spécifient pas leur propre opération composite. La valeur par défaut est `replace`.
 
-<p>Dans la démo <a href="https://codepen.io/rachelnabors/pen/rxpmJL/?editors=0010">Down the Rabbit Hole (with the Web Animation API)</a>, la méthode <code>animate()</code> est utilisée pour immédiatement créer et jouer une animation sur l'élément <code>#tunnel,</code> pour le faire défiler vers le haut, indéfiniment. Remarquez le tableau d'objets définissant les keyframes et le bloc contenant les options de timing de l'animation.</p>
+    - `add` induit un effet d'ajout, dans lequel chaque itération successive se construit sur la précédente. Par exemple pour `transform`, une valeur `translateX(-200px)` n'annulerait pas une précédente valeur `rotate(20deg)` mais s'y ajouterait, pour donner `translateX(-200px) rotate(20deg)`.
+    - `accumulate` est similaire mais un peu plus intéressant: `blur(2)` et `blur(5)` deviennent `blur(7) et non` `blur(2) blur(5)`.
+    - `replace`, quand à elle, remplace la précédente valeur par la nouvelle.
 
-<pre class="brush: js">document.getElementById("tunnel").animate([
+- `iterationComposite {{optional_inline}}`
+  - : Détermine comment les valeurs se construisent, d'itération en itération, **dans une même animation**. Peut être définie par `accumulate` ou `replace` (voir ci-dessus). La valeur par défaut est `replace`.
+- `spacing {{optional_inline}}`
+
+  - : Détermine comment les keyframes sans offset temporel devraient être réparties sur la durée de l'animation. La valeur par défaut est `distribute`.
+
+    - `distribute` positionne les keyframes de façon à ce que les différences entre deux offsets de keyframes successifs soient égaux, c'est-à-dire que, sans aucun offset, les keyframes seront distribuées régulièrement / également sur toute la durée de l'animation.
+    - `paced` positionne les keyframes de façon à ce que les distances entre deux valeurs successives d'une propriété spécifiée par "paced" soient égales, c'est-à-dire que plus la différence entre les valeurs de ces propriétés successives est grande, plus les keyframes seront éloignées les unes des autres.
+
+### Valeur de retour
+
+Retourne un objet de type {{domxref("Animation")}}.
+
+## Exemple
+
+Dans la démo [Down the Rabbit Hole (with the Web Animation API)](https://codepen.io/rachelnabors/pen/rxpmJL/?editors=0010), la méthode `animate()` est utilisée pour immédiatement créer et jouer une animation sur l'élément `#tunnel,` pour le faire défiler vers le haut, indéfiniment. Remarquez le tableau d'objets définissant les keyframes et le bloc contenant les options de timing de l'animation.
+
+```js
+document.getElementById("tunnel").animate([
   // keyframes
   { transform: 'translateY(0px)' },
   { transform: 'translateY(-300px)' }
@@ -74,33 +69,20 @@ translation_of: Web/API/Element/animate
   duration: 1000,
   iterations: Infinity
 });
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Web Animations', '#the-animatable-interface', 'animate()' )}}</td>
-   <td>{{Spec2('Web Animations')}}</td>
-   <td>Initial definition</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Element.animate")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
- <li>{{domxref("Element.getAnimations()")}}</li>
- <li>{{domxref("Animation")}}</li>
-</ul>
+```
+
+## Spécifications
+
+| Spécification                                                                                    | Statut                               | Commentaire        |
+| ------------------------------------------------------------------------------------------------ | ------------------------------------ | ------------------ |
+| {{SpecName('Web Animations', '#the-animatable-interface', 'animate()' )}} | {{Spec2('Web Animations')}} | Initial definition |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Element.animate")}}
+
+## Voir aussi
+
+- [Web Animations API](/en-US/docs/Web/API/Web_Animations_API)
+- {{domxref("Element.getAnimations()")}}
+- {{domxref("Animation")}}
diff --git a/files/fr/web/api/element/attachshadow/index.md b/files/fr/web/api/element/attachshadow/index.md
index cde6764b54..8d99934703 100644
--- a/files/fr/web/api/element/attachshadow/index.md
+++ b/files/fr/web/api/element/attachshadow/index.md
@@ -3,52 +3,35 @@ title: Element.attachShadow()
 slug: Web/API/Element/attachShadow
 translation_of: Web/API/Element/attachShadow
 ---
-<p>{{APIRef('Shadow DOM')}} {{SeeCompatTable}}</p>
-
-<p>La méthode <strong><code>Element.attachShadow()</code></strong> attache un arbre Shadow DOM à un élément spécifié et retourne une référence à son <a href="/en-US/docs/Web/API/ShadowRoot"><code>ShadowRoot</code></a>.</p>
-
-<h2 id="Syntax">Syntaxe</h2>
-
-<pre class="syntaxbox">var <em>shadowroot =</em><em> element</em>.attachShadow(<em>shadowRootInit</em>);
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>shadowRootInit</code></dt>
- <dd>Un dictionnaire <code>ShadowRootInit</code>, avec les propriétés suivantes :
- <ul>
-  <li><code>mode </code>: une chaîne de caractères spécifiant le <em>mode d'encapsulation</em> de l'arbre du Shadow DOM, parmi les options suivantes :
-   <ul>
-    <li><code>open : </code>spécifie une encapsulation ouverte.</li>
-    <li><code>closed</code> : spécifie une encapsulation fermée.</li>
-   </ul>
-  </li>
- </ul>
- </dd>
-</dl>
-
-<h3 id="Retour">Retour</h3>
-
-<p>Retourne un {{domxref("ShadowRoot")}}.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Shadow DOM', '#widl-Element-attachShadow-ShadowRoot-ShadowRootInit-shadowRootInitDict', 'attachShadow()')}}</td>
-   <td>{{Spec2('Shadow DOM')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Browser compatibility</h2>
-
-<p>{{Compat("api.Element.attachShadow")}}</p>
+{{APIRef('Shadow DOM')}} {{SeeCompatTable}}
+
+La méthode **`Element.attachShadow()`** attache un arbre Shadow DOM à un élément spécifié et retourne une référence à son [`ShadowRoot`](/en-US/docs/Web/API/ShadowRoot).
+
+## Syntaxe
+
+    var shadowroot = element.attachShadow(shadowRootInit);
+
+### Paramètres
+
+- `shadowRootInit`
+
+  - : Un dictionnaire `ShadowRootInit`, avec les propriétés suivantes :
+
+    - `mode `: une chaîne de caractères spécifiant le *mode d'encapsulation* de l'arbre du Shadow DOM, parmi les options suivantes :
+
+      - `open : `spécifie une encapsulation ouverte.
+      - `closed` : spécifie une encapsulation fermée.
+
+### Retour
+
+Retourne un {{domxref("ShadowRoot")}}.
+
+## Spécifications
+
+| Specification                                                                                                                                                    | Status                           | Comment              |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName('Shadow DOM', '#widl-Element-attachShadow-ShadowRoot-ShadowRootInit-shadowRootInitDict', 'attachShadow()')}} | {{Spec2('Shadow DOM')}} | Définition initiale. |
+
+## Browser compatibility
+
+{{Compat("api.Element.attachShadow")}}
diff --git a/files/fr/web/api/element/attributes/index.md b/files/fr/web/api/element/attributes/index.md
index 14c104bcfa..bca756ce34 100644
--- a/files/fr/web/api/element/attributes/index.md
+++ b/files/fr/web/api/element/attributes/index.md
@@ -9,108 +9,83 @@ tags:
   - Reference
 translation_of: Web/API/Element/attributes
 ---
-<p>{{ APIRef("DOM") }}</p>
+{{ APIRef("DOM") }}
 
-<p>La propriété <strong><code>Element.attributes</code></strong> renvoie une collection des noeuds d'attribut enregistrés dans le noeud spécifié. Il est une {{domxref("NamedNodeMap")}}, pas un tableau (<em>Array</em>), aussi il n'a pas de méthodes  {{jsxref("Array")}} et l'index de noeud {{domxref("Attr")}} peuvent différer entre les navigateurs. Pour être plus précis, les <code>attributs</code> sont une paire clé / valeur de chaînes représentant toutes les informations concernant cet attribut.</p>
+La propriété **`Element.attributes`** renvoie une collection des noeuds d'attribut enregistrés dans le noeud spécifié. Il est une {{domxref("NamedNodeMap")}}, pas un tableau (_Array_), aussi il n'a pas de méthodes  {{jsxref("Array")}} et l'index de noeud {{domxref("Attr")}} peuvent différer entre les navigateurs. Pour être plus précis, les `attributs` sont une paire clé / valeur de chaînes représentant toutes les informations concernant cet attribut.
 
-<h2 id="Syntaxe_et_valeurs">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var <em>attr</em> =<em> element</em>.attributes;
-</pre>
+    var attr = element.attributes;
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<h3 id="Exemples_basiques">Exemples basiques</h3>
+### Exemples basiques
 
-<pre>// récupère le premier élément &lt;p&gt; du document
-var para = document.getElementsByTagName("p")[0];
-var attr = para.attributes;
-</pre>
+    // récupère le premier élément <p> du document
+    var para = document.getElementsByTagName("p")[0];
+    var attr = para.attributes;
 
-<h3 id="Énumération_des_attributs_d'éléments">Énumération des attributs d'éléments</h3>
+### Énumération des attributs d'éléments
 
-<p>L'indexation numérique est utile pour parcourir tous les attributs d'un élément.<br>
- L'exemple suivant parcourt les nœuds d'attribut de l'élément du document avec l'ID "paragraph" et imprime la valeur de chaque attribut.</p>
+L'indexation numérique est utile pour parcourir tous les attributs d'un élément.
+L'exemple suivant parcourt les nœuds d'attribut de l'élément du document avec l'ID "paragraph" et imprime la valeur de chaque attribut.
 
-<pre class="brush: html">&lt;!DOCTYPE html&gt;
+```html
+<!DOCTYPE html>
 
-&lt;html&gt;
+<html>
 
- &lt;head&gt;
-  &lt;title&gt;Exemple d'attributs&lt;/title&gt;
-  &lt;script type="text/javascript"&gt;
+ <head>
+  <title>Exemple d'attributs</title>
+  <script type="text/javascript">
    function listAttributes() {
      var paragraph = document.getElementById("paragraph");
      var result = document.getElementById("result");
 
-     // D'abord, vérifier que le "paragraph" a quelques attributs    
+     // D'abord, vérifier que le "paragraph" a quelques attributs
      if (paragraph.hasAttributes()) {
        var attrs = paragraph.attributes;
        var output = "";
-       for(var i = attrs.length - 1; i &gt;= 0; i--) {
-         output += attrs[i].name + "-&gt;" + attrs[i].value;
+       for(var i = attrs.length - 1; i >= 0; i--) {
+         output += attrs[i].name + "->" + attrs[i].value;
        }
        result.value = output;
      } else {
        result.value = "No attributes to show";
      }
    }
-  &lt;/script&gt;
- &lt;/head&gt;
-
-&lt;body&gt;
- &lt;p id="paragraph" &gt;Sample Paragraph&lt;/p&gt;
- &lt;form action=""&gt;
-  &lt;p&gt;
-    &lt;input type="button" value="Show first attribute name and value"
-      onclick="listAttributes();"&gt;
-    &lt;input id="result" type="text" value=""&gt;
-  &lt;/p&gt;
- &lt;/form&gt;
-&lt;/body&gt;
-&lt;/html&gt;</pre>
-
-<p> </p>
-
-<h2 id="Sp.C3.A9cification">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#dom-element-attributes', 'Element.attributes')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>De {{SpecName('DOM3 Core')}}, déplacé de {{domxref("Node")}} à {{domxref("Element")}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM3 Core', 'core.html#ID-84CF096', 'Element.attributes')}}</td>
-   <td>{{Spec2('DOM3 Core')}}</td>
-   <td>Pas de changement de {{SpecName('DOM2 Core')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Core', 'core.html#ID-84CF096', 'Element.attributes')}}</td>
-   <td>{{Spec2('DOM2 Core')}}</td>
-   <td>Pas de changement de {{SpecName('DOM1')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM1', 'level-one-core.html#ID-84CF096', 'Element.attributes')}}</td>
-   <td>{{Spec2('DOM1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Element.attributes")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("NamedNodeMap")}}, l'interface de l'objet retourné</li>
- <li>Considérations de compatibilité entre navigateurs : sur <a href="http://www.quirksmode.org/dom/w3c_core.html#attributes">quirksmode</a> (en)</li>
-</ul>
+  </script>
+ </head>
+
+<body>
+ <p id="paragraph" >Sample Paragraph</p>
+ <form action="">
+  <p>
+    <input type="button" value="Show first attribute name and value"
+      onclick="listAttributes();">
+    <input id="result" type="text" value="">
+  </p>
+ </form>
+</body>
+</html>
+```
+
+
+
+## Spécifications
+
+| Spécification                                                                                        | Status                           | Comment                                                                                                 |
+| ---------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------- |
+| {{SpecName('DOM WHATWG', '#dom-element-attributes', 'Element.attributes')}} | {{Spec2('DOM WHATWG')}} | De {{SpecName('DOM3 Core')}}, déplacé de {{domxref("Node")}} à {{domxref("Element")}} |
+| {{SpecName('DOM3 Core', 'core.html#ID-84CF096', 'Element.attributes')}}     | {{Spec2('DOM3 Core')}}     | Pas de changement de {{SpecName('DOM2 Core')}}                                                   |
+| {{SpecName('DOM2 Core', 'core.html#ID-84CF096', 'Element.attributes')}}     | {{Spec2('DOM2 Core')}}     | Pas de changement de {{SpecName('DOM1')}}                                                       |
+| {{SpecName('DOM1', 'level-one-core.html#ID-84CF096', 'Element.attributes')}} | {{Spec2('DOM1')}}         | Définition initiale.                                                                                    |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Element.attributes")}}
+
+## Voir aussi
+
+- {{domxref("NamedNodeMap")}}, l'interface de l'objet retourné
+- Considérations de compatibilité entre navigateurs : sur [quirksmode](http://www.quirksmode.org/dom/w3c_core.html#attributes) (en)
diff --git a/files/fr/web/api/element/childelementcount/index.md b/files/fr/web/api/element/childelementcount/index.md
index a23de9fbaa..93395d4adc 100644
--- a/files/fr/web/api/element/childelementcount/index.md
+++ b/files/fr/web/api/element/childelementcount/index.md
@@ -11,43 +11,39 @@ tags:
 translation_of: Web/API/ParentNode/childElementCount
 original_slug: Web/API/ParentNode/childElementCount
 ---
-<div>
-<p>{{APIRef("DOM") }}</p>
-</div>
+{{APIRef("DOM") }}
 
-<p>La propriété <code><strong>ParentNode.childElementCount</strong></code> en lecture seule renvoie un <code>unsigned long</code> (<em>long non signé</em>) représentant le nombre d'élèments fils de l'élément donné.</p>
+La propriété **`ParentNode.childElementCount`** en lecture seule renvoie un `unsigned long` (_long non signé_) représentant le nombre d'élèments fils de l'élément donné.
 
-<div class="note">
-<p><strong>Note :</strong> Cette propriété a été définie dans la pure interface {{domxref("ElementTraversal")}}.<br>
- Comme cette interface contenait deux différents jeux de propriétés, l'un visant les  {{domxref("Node")}} (<em>noeuds</em>) qui ont des enfants, l'autre les enfants, ils ont été déplacés dans deux interfaces pures, {{domxref("ParentNode")}} et {{domxref("ChildNode")}}. Dans ce cas, <code>childElementCount</code> a été rattaché à {{domxref("ParentNode")}}. C'est un changement assez technique qui ne devrait pas affecter la compatibilité.</p>
-</div>
+> **Note :** Cette propriété a été définie dans la pure interface {{domxref("ElementTraversal")}}.
+> Comme cette interface contenait deux différents jeux de propriétés, l'un visant les  {{domxref("Node")}} (_noeuds_) qui ont des enfants, l'autre les enfants, ils ont été déplacés dans deux interfaces pures, {{domxref("ParentNode")}} et {{domxref("ChildNode")}}. Dans ce cas, `childElementCount` a été rattaché à {{domxref("ParentNode")}}. C'est un changement assez technique qui ne devrait pas affecter la compatibilité.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var <var>count</var> = <em>node</em>.childElementCount;
-</pre>
+    var count = node.childElementCount;
 
-<dl>
- <dt>count</dt>
- <dd>détient la valeur de retour, un type <code>unsigned long</code> (<em>long non signé</em>) (simplement un nombre entier)</dd>
- <dt>node</dt>
- <dd>est un objet représentant un <code>Document</code>, un <code>DocumentFragment</code> ou un <code>Element</code>.</dd>
-</dl>
+- count
+  - : détient la valeur de retour, un type `unsigned long` (_long non signé_) (simplement un nombre entier)
+- node
+  - : est un objet représentant un `Document`, un `DocumentFragment` ou un `Element`.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush:js">var foo = document.getElementById("foo");
-if (foo.childElementCount &gt; 0) {
+```js
+var foo = document.getElementById("foo");
+if (foo.childElementCount > 0) {
     // faire quelque chose
-}</pre>
+}
+```
 
-<h2 id="Polyfill_pour_IE8_IE9_Safari">Polyfill pour IE8 &amp; IE9 &amp; Safari</h2>
+## Polyfill pour IE8 & IE9 & Safari
 
-<p>Cette propriété n'est pas supportée par les versions antérieures à IE9 ni par IE9 ni par Safari. Ainsi, les objets Document, DocumentFragment dans ces navigateurs ne l'ont pas.</p>
+Cette propriété n'est pas supportée par les versions antérieures à IE9 ni par IE9 ni par Safari. Ainsi, les objets Document, DocumentFragment dans ces navigateurs ne l'ont pas.
 
-<pre class="brush:js">;(function(constructor) {
-    if (constructor &amp;&amp;
-        constructor.prototype &amp;&amp;
+```js
+;(function(constructor) {
+    if (constructor &&
+        constructor.prototype &&
         constructor.prototype.childElementCount == null) {
         Object.defineProperty(constructor.prototype, 'childElementCount', {
             get: function() {
@@ -59,39 +55,21 @@ if (foo.childElementCount &gt; 0) {
             }
         });
     }
-})(window.Node || window.Element);</pre>
-
-<h2 id="Spécification">Spécification</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#dom-parentnode-childElementCount', 'ParentNode.childElementCount')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Divise l'interface <code>ElementTraversal</code> en {{domxref("ChildNode")}} et <code>ParentNode</code>. La propriété est maintenant définie sur cette dernière.<br>
-    Les {{domxref("Document")}} et {{domxref("DocumentFragment")}} implémentent la nouvelle interface.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('Element Traversal', '#attribute-childElementCount', 'ElementTraversal.childElementCount')}}</td>
-   <td>{{Spec2('Element Traversal')}}</td>
-   <td>Ajout de sa définition initiale à la pure interface <code>ElementTraversal</code> et de son utilisation sur {{domxref("Element")}}.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-
-<p>{{Compat("api.ParentNode.childElementCount")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Les interfaces pures {{domxref("ParentNode")}} et {{domxref("ChildNode")}}.</li>
- <li>Types d'objets implémentant cette interface pure : {{domxref("Document")}}, {{domxref("Element")}} et {{domxref("DocumentFragment")}}.</li>
-</ul>
+})(window.Node || window.Element);
+```
+
+## Spécification
+
+| Spécification                                                                                                                            | Statut                                   | Commentaire                                                                                                                                                                                                                                                             |
+| ---------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('DOM WHATWG', '#dom-parentnode-childElementCount', 'ParentNode.childElementCount')}}         | {{Spec2('DOM WHATWG')}}         | Divise l'interface `ElementTraversal` en {{domxref("ChildNode")}} et `ParentNode`. La propriété est maintenant définie sur cette dernière. Les {{domxref("Document")}} et {{domxref("DocumentFragment")}} implémentent la nouvelle interface. |
+| {{SpecName('Element Traversal', '#attribute-childElementCount', 'ElementTraversal.childElementCount')}} | {{Spec2('Element Traversal')}} | Ajout de sa définition initiale à la pure interface `ElementTraversal` et de son utilisation sur {{domxref("Element")}}.                                                                                                                                          |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.ParentNode.childElementCount")}}
+
+## Voir aussi
+
+- Les interfaces pures {{domxref("ParentNode")}} et {{domxref("ChildNode")}}.
+- Types d'objets implémentant cette interface pure : {{domxref("Document")}}, {{domxref("Element")}} et {{domxref("DocumentFragment")}}.
diff --git a/files/fr/web/api/element/classlist/index.md b/files/fr/web/api/element/classlist/index.md
index 62a8048b85..0ee519f720 100644
--- a/files/fr/web/api/element/classlist/index.md
+++ b/files/fr/web/api/element/classlist/index.md
@@ -10,58 +10,56 @@ tags:
   - Propriétés
 translation_of: Web/API/Element/classList
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p>La propriété en lecture seule<strong> </strong> <code><strong>Element.classList</strong></code> retourne une collection directe  {{domxref("DOMTokenList")}} des attributs de classe de l'élément.</p>
+La propriété en lecture seule** \*\***`Element.classList`\*\* retourne une collection directe  {{domxref("DOMTokenList")}} des attributs de classe de l'élément.
 
-<p>L'utilisation de <code>classList</code> est une alternative à la propriété {{domxref("element.className")}} qui renvoie une chaine composée de la liste des classes, séparées par des espaces.</p>
+L'utilisation de `classList` est une alternative à la propriété {{domxref("element.className")}} qui renvoie une chaine composée de la liste des classes, séparées par des espaces.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">const <var>elementClasses</var> = elementNodeReference.classList;
-</pre>
+    const elementClasses = elementNodeReference.classList;
 
-<p><em>elementClasses</em> est une <a href="/en-US/docs/DOM/DOMTokenList">DOMTokenList</a> représentant l'attribut class de <em>elementNodeReference</em>. Si l'attribut class n'a pas été défini ou est vide <em>elementClasses.length</em> retourne 0. <code>element.classList</code> est en lecture seule. Pour la modifier il convient d'utiliser les méthodes <code>add()</code> et <code>remove()</code>.</p>
+_elementClasses_ est une [DOMTokenList](/en-US/docs/DOM/DOMTokenList) représentant l'attribut class de _elementNodeReference_. Si l'attribut class n'a pas été défini ou est vide _elementClasses.length_ retourne 0. `element.classList` est en lecture seule. Pour la modifier il convient d'utiliser les méthodes `add()` et `remove()`.
 
-<h2 id="Méthodes">Méthodes</h2>
+## Méthodes
 
-<dl>
- <dt>add( String [, String] )</dt>
- <dd>Ajoute les classes spécifiées. Si une classe est déjà assignée en attribut de cet élément, elle est ignorée.</dd>
- <dt>remove( String [, String] )</dt>
- <dd>Supprime les classes spécifiées.<br>
- <strong>Note:</strong> Supprimer une classe qui n'existe pas NE génère PAS d'erreurs.</dd>
- <dt><strong>item</strong>( Number )</dt>
- <dd>Renvoie la position d'une classe dans une collection.</dd>
- <dt><strong>toggle</strong>( String [, force] )</dt>
- <dd>Si un seul argument est présent : change la présence d'une classe dans la liste. Si la classe existe, alors la supprime et renvoie <code>false</code>, dans le cas inverse, ajoute cette classe et retourne <code>true</code>.<br>
- Si le second argument est présent : Si l'argument <code>force</code> est à <code>true</code>, ajoute cette classe, si l'argument est à <code>false</code>, la supprime.</dd>
- <dt>contains( String )</dt>
- <dd>Vérifie si la classe spécifiée est présente dans la liste des classes attribuées à cet élément.</dd>
- <dt>replace( oldClass, newClass )</dt>
- <dd>Remplace une classe par une autre.</dd>
-</dl>
+- add( String \[, String] )
+  - : Ajoute les classes spécifiées. Si une classe est déjà assignée en attribut de cet élément, elle est ignorée.
+- remove( String \[, String] )
+  - : Supprime les classes spécifiées.
+    **Note:** Supprimer une classe qui n'existe pas NE génère PAS d'erreurs.
+- **item**( Number )
+  - : Renvoie la position d'une classe dans une collection.
+- **toggle**( String \[, force] )
+  - : Si un seul argument est présent : change la présence d'une classe dans la liste. Si la classe existe, alors la supprime et renvoie `false`, dans le cas inverse, ajoute cette classe et retourne `true`.
+    Si le second argument est présent : Si l'argument `force` est à `true`, ajoute cette classe, si l'argument est à `false`, la supprime.
+- contains( String )
+  - : Vérifie si la classe spécifiée est présente dans la liste des classes attribuées à cet élément.
+- replace( oldClass, newClass )
+  - : Remplace une classe par une autre.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: js">const div = document.createElement('div');
+```js
+const div = document.createElement('div');
 div.className = 'foo';
 
-// notre point de départ: &lt;div class="foo"&gt;&lt;/div&gt;
+// notre point de départ: <div class="foo"></div>
 console.log(div.outerHTML);
 
 // utiliser l'API classList pour supprimer et ajouter des classes
 div.classList.remove("foo");
 div.classList.add("anotherclass");
 
-// &lt;div class="anotherclass"&gt;&lt;/div&gt;
+// <div class="anotherclass"></div>
 console.log(div.outerHTML);
 
 // si "visible" est défini, le supprimer, sinon, l'ajouter
 div.classList.toggle("visible");
 
 // ajouter/supprimer "visible", en fonction d'un test conditionnel, pour i inférieur à 10
-div.classList.toggle("visible", i &lt; 10 );
+div.classList.toggle("visible", i < 10 );
 
 console.log(div.classList.contains("foo"));
 
@@ -75,19 +73,19 @@ div.classList.add(...cls);
 div.classList.remove(...cls);
 
 // remplacer la classe "foo" par la classe "bar"
-div.classList.replace("foo", "bar");</pre>
+div.classList.replace("foo", "bar");
+```
 
-<div class="note">
-<p><strong>Note :</strong> Les versions de Firefox antérieures à la 26 n'implémentent pas l'utilisation de plusieurs arguments dans les méthodes add/remove/toggle. Voir <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=814014">https://bugzilla.mozilla.org/show_bug.cgi?id=814014</a></p>
-</div>
+> **Note :** Les versions de Firefox antérieures à la 26 n'implémentent pas l'utilisation de plusieurs arguments dans les méthodes add/remove/toggle. Voir <https://bugzilla.mozilla.org/show_bug.cgi?id=814014>
 
-<h2 id="Prothèse_démulation">Prothèse d'émulation</h2>
+## Prothèse d'émulation
 
-<p>L'ancien événement <code><a href="https://msdn.microsoft.com/en-us/windows/ms536956(v=vs.71)">onpropertychange</a></code> peut être utilisé pour créer une maquette <code>classList</code> vivante grâce à une propriété <code>Element.prototype.className</code> qui déclenche l'événement spécifié une fois qu'il est modifié.</p>
+L'ancien événement [`onpropertychange`](<https://msdn.microsoft.com/en-us/windows/ms536956(v=vs.71)>) peut être utilisé pour créer une maquette `classList` vivante grâce à une propriété `Element.prototype.className` qui déclenche l'événement spécifié une fois qu'il est modifié.
 
-<p>La polyfill suivante pour <code>classList</code> et <code>DOMTokenList</code> garantit une conformité <strong>totale</strong> (couverture) pour toutes les méthodes et propriétés standard de <code>Element.prototype.classList</code> pour les navigateurs <strong>IE10-IE11</strong> ainsi qu'un comportement quasi conforme pour <strong>IE 6-9</strong>. Consultez ce qui suit :</p>
+La polyfill suivante pour `classList` et `DOMTokenList` garantit une conformité **totale** (couverture) pour toutes les méthodes et propriétés standard de `Element.prototype.classList` pour les navigateurs **IE10-IE11** ainsi qu'un comportement quasi conforme pour **IE 6-9**. Consultez ce qui suit :
 
-<pre class="brush: js">// 1. String.prototype.trim polyfill
+```js
+// 1. String.prototype.trim polyfill
 if (!"".trim) String.prototype.trim = function(){ return this.replace(/^[\s]+|[\s]+$/g, ''); };
 (function(window){"use strict"; // prevent global namespace pollution
 if(!window.DOMException) (DOMException = function(reason){this.message = reason}).prototype = new Error;
@@ -127,7 +125,7 @@ if (typeof DOMTokenList !== "function") (function(window){
     window.DOMTokenList = DOMTokenList;
     function whenPropChanges(){
         var evt = window.event, prop = evt.propertyName;
-        if ( !skipPropChange &amp;&amp; (prop==="className" || (prop==="classList" &amp;&amp; !defineProperty)) ) {
+        if ( !skipPropChange && (prop==="className" || (prop==="classList" && !defineProperty)) ) {
             var target = evt.srcElement, protoObjProto = target[" uCLp"], strval = "" + target[prop];
             var tokens=strval.trim().split(wsRE), resTokenList=target[prop==="classList"?" uCL":"classList"];
             var oldLen = protoObjProto.length;
@@ -135,7 +133,7 @@ if (typeof DOMTokenList !== "function") (function(window){
                 for(var innerI=0; innerI!==cI; ++innerI) if(tokens[innerI]===tokens[cI]) {sub++; continue a;}
                 resTokenList[cI-sub] = tokens[cI];
             }
-            for (var i=cLen-sub; i &lt; oldLen; ++i) delete resTokenList[i]; //remove trailing indexs
+            for (var i=cLen-sub; i < oldLen; ++i) delete resTokenList[i]; //remove trailing indexs
             if(prop !== "classList") return;
             skipPropChange = 1, target.classList = resTokenList, target.className = strval;
             skipPropChange = 0, resTokenList.length = tokens.length - sub;
@@ -153,7 +151,7 @@ if (typeof DOMTokenList !== "function") (function(window){
             this[cI-sub] = toks[cI];
         }
         protoObjProto.length = cLen-sub, protoObjProto.value = ele.className, protoObjProto[" uCL"] = ele;
-        if (defineProperty) { defineProperty(ele, "classList", { // IE8 &amp; IE9 allow defineProperty on the DOM
+        if (defineProperty) { defineProperty(ele, "classList", { // IE8 & IE9 allow defineProperty on the DOM
             enumerable:   1, get: function(){return resTokenList},
             configurable: 0, set: function(newVal){
                 skipPropChange = 1, ele.className = protoObjProto.value = (newVal += ""), skipPropChange = 0;
@@ -162,7 +160,7 @@ if (typeof DOMTokenList !== "function") (function(window){
                     for(var innerI=0; innerI!==cI; ++innerI) if(toks[innerI]===toks[cI]) {sub++; continue a;}
                     resTokenList[cI-sub] = toks[cI];
                 }
-                for (var i=cLen-sub; i &lt; oldLen; ++i) delete resTokenList[i]; //remove trailing indexs
+                for (var i=cLen-sub; i < oldLen; ++i) delete resTokenList[i]; //remove trailing indexs
             }
         }); defineProperty(ele, " uCLp", { // for accessing the hidden prototype
             enumerable: 0, configurable: 0, writeable: 0, value: protoObj.prototype
@@ -171,7 +169,7 @@ if (typeof DOMTokenList !== "function") (function(window){
         }); } else { ele.classList=resTokenList, ele[" uCL"]=resTokenList, ele[" uCLp"]=protoObj.prototype; }
         ele.attachEvent( "onpropertychange", whenPropChanges );
     }
-    try { // Much faster &amp; cleaner version for IE8 &amp; IE9:
+    try { // Much faster & cleaner version for IE8 & IE9:
         // Should work in IE8 because Element.prototype instanceof Node is true according to the specs
         window.Object.defineProperty(window.Element.prototype, "classList", {
             enumerable: 1,   get: function(val){
@@ -184,8 +182,8 @@ if (typeof DOMTokenList !== "function") (function(window){
         window[" uCL"] = polyfillClassList;
         // the below code ensures polyfillClassList is applied to all current and future elements in the doc.
         document.documentElement.firstChild.appendChild(document.createElement('style')).styleSheet.cssText=(
-            '_*{x-uCLp:expression(!this.hasOwnProperty("classList")&amp;&amp;window[" uCL"](this))}' + //  IE6
-            '[class]{x-uCLp/**/:expression(!this.hasOwnProperty("classList")&amp;&amp;window[" uCL"](this))}' //IE7-8
+            '_*{x-uCLp:expression(!this.hasOwnProperty("classList")&&window[" uCL"](this))}' + //  IE6
+            '[class]{x-uCLp/**/:expression(!this.hasOwnProperty("classList")&&window[" uCL"](this))}' //IE7-8
         );
     }
 })(window);
@@ -195,15 +193,15 @@ if (typeof DOMTokenList !== "function") (function(window){
         function NullCheck(n) {return n===void 0 ? null : n} return NullCheck(this[i]);
     };
     if (!DOMTokenListProto.toggle || testClass.toggle("a",0)!==false) DOMTokenListProto.toggle=function(val){
-        if (arguments.length &gt; 1) return (this[arguments[1] ? "add" : "remove"](val), !!arguments[1]);
+        if (arguments.length > 1) return (this[arguments[1] ? "add" : "remove"](val), !!arguments[1]);
         var oldValue = this.value;
-        return (this.remove(oldValue), oldValue === this.value &amp;&amp; (this.add(val), true) /*|| false*/);
+        return (this.remove(oldValue), oldValue === this.value && (this.add(val), true) /*|| false*/);
     };
     if (!DOMTokenListProto.replace || typeof testClass.replace("a", "b") !== "boolean")
         DOMTokenListProto.replace = function(oldToken, newToken){
             checkIfValidClassListEntry("replace", oldToken), checkIfValidClassListEntry("replace", newToken);
             var oldValue = this.value;
-            return (this.remove(oldToken), this.value !== oldValue &amp;&amp; (this.add(newToken), true));
+            return (this.remove(oldToken), this.value !== oldValue && (this.add(newToken), true));
         };
     if (!DOMTokenListProto.contains) DOMTokenListProto.contains = function(value){
         for (var i=0,Len=this.length; i !== Len; ++i) if (this[i] === value) return true;
@@ -216,69 +214,46 @@ if (typeof DOMTokenList !== "function") (function(window){
     if (!DOMTokenListProto.entries) DOMTokenListProto.entries = function(){
         var nextIndex = 0, that = this;
         return {next: function() {
-            return nextIndex&lt;that.length ? {value: [nextIndex, that[nextIndex++]], done: false} : {done: true};
+            return nextIndex<that.length ? {value: [nextIndex, that[nextIndex++]], done: false} : {done: true};
         }};
     };
     if (!DOMTokenListProto.values) DOMTokenListProto.values = function(){
         var nextIndex = 0, that = this;
         return {next: function() {
-            return nextIndex&lt;that.length ? {value: that[nextIndex++], done: false} : {done: true};
+            return nextIndex<that.length ? {value: that[nextIndex++], done: false} : {done: true};
         }};
     };
     if (!DOMTokenListProto.keys) DOMTokenListProto.keys = function(){
         var nextIndex = 0, that = this;
         return {next: function() {
-            return nextIndex&lt;that.length ? {value: nextIndex++, done: false} : {done: true};
+            return nextIndex<that.length ? {value: nextIndex++, done: false} : {done: true};
         }};
     };
 })(window.DOMTokenList.prototype, window.document.createElement("div").classList);
 })(window);
-</pre>
-
-<h3 id="Mise_en_garde">Mise en garde</h3>
-
-<p>La prothèse d'émulation est limitée dans sa fonctionnalité. Elle est actuellement incapable de traiter les éléments hors document (par exemple, les éléments créés par <code>document.createElement</code> avant d'être ajoutés à un nœud parent) dans IE6-7.</p>
-
-<p>Cependant, elle devrait très bien fonctionner dans IE9. Une différence majeure entre la version prothésée de <code>classList</code> et les spécifications du W3 est que pour IE6-8, il n'y a pas moyen de créer un objet immuable (un objet dont les propriétés ne peuvent pas être directement modifiées). Dans IE9, en revanche, c'est possible en étendant le prototype, en gelant l'objet visible et en écrasant les méthodes de propriétés natives. Cependant, de telles actions ne fonctionneraient pas dans IE6-IE8 et, dans IE9, elles ralentiraient la performance de la page web entière au point de la faire ramper, rendant ces modifications complètement impraticables pour cette prothèse d'émulation.</p>
-
-<p>Une note mineure est que dans IE6-7, cette prothèse utilise la propriété <code>window[" uCL"]</code> de l'objet window pour communiquer avec les expressions CSS, la propriété css <code>x-uCLp</code> sur tous les éléments, et la propriété <code>element[" uCL"]</code> sur tous les éléments pour permettre la collecte des déchets et augmenter les performances. Dans tous les navigateurs prothésés (IE6-9), une propriété <code>element[" uCLp"]</code> supplémentaire est ajoutée à l'élément pour garantir un prototypage conforme aux normes, et une propriété <code>DOMTokenList[" uCL"]</code> est ajoutée à chaque objet <code>element["classList"]</code> pour garantir que la <code>DOMTokenList</code> est liée à son propre élément.</p>
-
-<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", "dom.html#dom-classlist", "Element.classList")}}</td>
-   <td>{{Spec2("HTML WHATWG")}}</td>
-   <td>Note dans la spécification HTML relative à l'attribut {{htmlattrxref("class")}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("DOM WHATWG", "#dom-element-classlist", "Element.classList")}}</td>
-   <td>{{Spec2("DOM WHATWG")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("DOM4", "#dom-element-classlist", "Element.classList")}}</td>
-   <td>{{Spec2("DOM4")}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Element.classList")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("element.className")}}</li>
- <li>{{domxref("DOMTokenList")}}</li>
-</ul>
+```
+
+### Mise en garde
+
+La prothèse d'émulation est limitée dans sa fonctionnalité. Elle est actuellement incapable de traiter les éléments hors document (par exemple, les éléments créés par `document.createElement` avant d'être ajoutés à un nœud parent) dans IE6-7.
+
+Cependant, elle devrait très bien fonctionner dans IE9. Une différence majeure entre la version prothésée de `classList` et les spécifications du W3 est que pour IE6-8, il n'y a pas moyen de créer un objet immuable (un objet dont les propriétés ne peuvent pas être directement modifiées). Dans IE9, en revanche, c'est possible en étendant le prototype, en gelant l'objet visible et en écrasant les méthodes de propriétés natives. Cependant, de telles actions ne fonctionneraient pas dans IE6-IE8 et, dans IE9, elles ralentiraient la performance de la page web entière au point de la faire ramper, rendant ces modifications complètement impraticables pour cette prothèse d'émulation.
+
+Une note mineure est que dans IE6-7, cette prothèse utilise la propriété `window[" uCL"]` de l'objet window pour communiquer avec les expressions CSS, la propriété css `x-uCLp` sur tous les éléments, et la propriété `element[" uCL"]` sur tous les éléments pour permettre la collecte des déchets et augmenter les performances. Dans tous les navigateurs prothésés (IE6-9), une propriété `element[" uCLp"]` supplémentaire est ajoutée à l'élément pour garantir un prototypage conforme aux normes, et une propriété `DOMTokenList[" uCL"]` est ajoutée à chaque objet `element["classList"]` pour garantir que la `DOMTokenList` est liée à son propre élément.
+
+## Spécifications
+
+| Spécification                                                                                        | Statut                           | Commentaire                                                                             |
+| ---------------------------------------------------------------------------------------------------- | -------------------------------- | --------------------------------------------------------------------------------------- |
+| {{SpecName("HTML WHATWG", "dom.html#dom-classlist", "Element.classList")}} | {{Spec2("HTML WHATWG")}} | Note dans la spécification HTML relative à l'attribut {{htmlattrxref("class")}}. |
+| {{SpecName("DOM WHATWG", "#dom-element-classlist", "Element.classList")}}     | {{Spec2("DOM WHATWG")}} | Définition initiale.                                                                    |
+| {{SpecName("DOM4", "#dom-element-classlist", "Element.classList")}}             | {{Spec2("DOM4")}}         |                                                                                         |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Element.classList")}}
+
+## Voir aussi
+
+- {{domxref("element.className")}}
+- {{domxref("DOMTokenList")}}
diff --git a/files/fr/web/api/element/classname/index.md b/files/fr/web/api/element/classname/index.md
index 125374a9db..c2c36c38ea 100644
--- a/files/fr/web/api/element/classname/index.md
+++ b/files/fr/web/api/element/classname/index.md
@@ -9,71 +9,51 @@ tags:
   - Propriétés
 translation_of: Web/API/Element/className
 ---
-<p>{{APIRef("DOM")}}</p>
+{{APIRef("DOM")}}
 
-<p>La propriété <strong>className</strong> de l'interface {{domxref("Element")}} récupère et définit la valeur de l'<a href="/fr/docs/Web/HTML/Attributs_universels/class">attribut <code>class</code></a> de l'élément spécifié.</p>
+La propriété **className** de l'interface {{domxref("Element")}} récupère et définit la valeur de l'[attribut `class`](/fr/docs/Web/HTML/Attributs_universels/class) de l'élément spécifié.
 
-<h2 id="Syntaxe_et_valeurs">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var>var cName</var> = <var>elementNodeReference</var>.className;
-<var>elementNodeReference</var>.className = <var>cName</var>;</pre>
+    var cName = elementNodeReference.className;
+    elementNodeReference.className = cName;
 
-<ul>
- <li><em><var>cName</var> est une String (chaîne de caractères) représentant la classe (ou les classes séparées par des espaces) de l'élément courant.</em></li>
-</ul>
+- \*_cName_ est une String (chaîne de caractères) représentant la classe (ou les classes séparées par des espaces) de l'élément courant.\*
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">let elm = document.getElementById('item');
+```js
+let elm = document.getElementById('item');
 
 if(elm.className === 'active'){
     elm.className = 'inactive';
 } else {
     elm.className = 'active';
-}</pre>
-
-<h2 id="Notes">Notes</h2>
-
-<p>Le nom <code>className</code> est utilisé pour cette propriété au lieu de <code>class</code> à cause de conflits éventuels avec le mot-clé « class » dans beaucoup de langages utilisés pour manipuler le DOM.</p>
-
-<p><code>className</code> peut être une instance de {{domxref("SVGAnimatedString")}} si l'<code>element</code> est un {{domxref("SVGElement")}}. Dans ce cas là, l'usage de <code>className</code> ne fonctionnera pas, il sera donc préférable d'utiliser {{domxref("Element.getAttribute")}} et {{domxref("Element.setAttribute")}} si vous utilisez des élements SVG. </p>
-
-<pre class="brush: js"><code>elm.setAttribute('class', elm.getAttribute('class'))</code>
-</pre>
-
-<h2 id="Sp.C3.A9cification">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName("DOM WHATWG", "#dom-element-classname", "element.className")}}</td>
-   <td>{{Spec2("DOM WHATWG")}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName("DOM4", "#dom-element-classname", "element.className")}}</td>
-   <td>{{Spec2("DOM4")}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName("DOM2 HTML", "html.html#ID-95362176", "element.className")}}</td>
-   <td>{{Spec2("DOM2 HTML")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Element.className")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("element.classList")}}</li>
-</ul>
+}
+```
+
+## Notes
+
+Le nom `className` est utilisé pour cette propriété au lieu de `class` à cause de conflits éventuels avec le mot-clé « class » dans beaucoup de langages utilisés pour manipuler le DOM.
+
+`className` peut être une instance de {{domxref("SVGAnimatedString")}} si l'`element` est un {{domxref("SVGElement")}}. Dans ce cas là, l'usage de `className` ne fonctionnera pas, il sera donc préférable d'utiliser {{domxref("Element.getAttribute")}} et {{domxref("Element.setAttribute")}} si vous utilisez des élements SVG.
+
+```js
+elm.setAttribute('class', elm.getAttribute('class'))
+```
+
+## Spécifications
+
+| Spécification                                                                                    | Statut                           | Commentaire          |
+| ------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName("DOM WHATWG", "#dom-element-classname", "element.className")}} | {{Spec2("DOM WHATWG")}} |                      |
+| {{SpecName("DOM4", "#dom-element-classname", "element.className")}}         | {{Spec2("DOM4")}}         |                      |
+| {{SpecName("DOM2 HTML", "html.html#ID-95362176", "element.className")}} | {{Spec2("DOM2 HTML")}}     | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Element.className")}}
+
+## Voir aussi
+
+- {{domxref("element.classList")}}
diff --git a/files/fr/web/api/element/click_event/index.md b/files/fr/web/api/element/click_event/index.md
index 8e18c242d9..3e56af91cd 100644
--- a/files/fr/web/api/element/click_event/index.md
+++ b/files/fr/web/api/element/click_event/index.md
@@ -9,145 +9,125 @@ tags:
   - click
 translation_of: Web/API/Element/click_event
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}
 
-<p>L'évènement <code><strong>click</strong></code> est déclenché à partir d'un élément lorsqu'un bouton d'un dispositif de pointage (comme celui d'une souris par exemple) est pressé puis relaché lorsque le pointeur est sur l'élément.</p>
+L'évènement **`click`** est déclenché à partir d'un élément lorsqu'un bouton d'un dispositif de pointage (comme celui d'une souris par exemple) est pressé puis relaché lorsque le pointeur est sur l'élément.
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th>Se propage/remonte dans le DOM</th>
-   <td>Oui</td>
-  </tr>
-  <tr>
-   <th>Annulable</th>
-   <td>Oui</td>
-  </tr>
-  <tr>
-   <th>Interface</th>
-   <td>{{domxref("MouseEvent")}}</td>
-  </tr>
-  <tr>
-   <th>Propriété pour la gestion d'évènement</th>
-   <td>{{domxref("GlobalEventHandlers.onclick", "onclick")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th>Se propage/remonte dans le DOM</th>
+      <td>Oui</td>
+    </tr>
+    <tr>
+      <th>Annulable</th>
+      <td>Oui</td>
+    </tr>
+    <tr>
+      <th>Interface</th>
+      <td>{{domxref("MouseEvent")}}</td>
+    </tr>
+    <tr>
+      <th>Propriété pour la gestion d'évènement</th>
+      <td>
+        {{domxref("GlobalEventHandlers.onclick", "onclick")}}
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<p>Si le bouton est pressé sur un élément et que le pointeur est déplacé sur un autre élément, l'évènement sera déclenché sur l'ancêtre le plus près qui contient les deux éléments.</p>
+Si le bouton est pressé sur un élément et que le pointeur est déplacé sur un autre élément, l'évènement sera déclenché sur l'ancêtre le plus près qui contient les deux éléments.
 
-<p><code>click</code> est déclenché après que les évènements {{event("mousedown")}} et {{event("mouseup")}} aient été déclenchés.</p>
+`click` est déclenché après que les évènements {{event("mousedown")}} et {{event("mouseup")}} aient été déclenchés.
 
-<h2 id="Notes_dutilisation">Notes d'utilisation</h2>
+## Notes d'utilisation
 
-<p>L'objet {{domxref("MouseEvent")}}, passé au gestionnaire d'évènement (lorsque l'évènement est <code>click</code>) possède une propriété {{domxref("Event.detail", "detail")}} qui indique le nombre de fois où la cible ({{domxref("Event.target", "target")}}) a été cliquée. Autrement dit, <code>detail</code> vaudra 2 pour un double-clic, 3 pour un triple-clic et ainsi de suite. Le compteur est remis à zéro après un court intervalle (dont la durée spécifique peut varier entre les navigateurs, les plateformes et les préférences de l'utilisateur dont notamment les options d'accessibilité).</p>
+L'objet {{domxref("MouseEvent")}}, passé au gestionnaire d'évènement (lorsque l'évènement est `click`) possède une propriété {{domxref("Event.detail", "detail")}} qui indique le nombre de fois où la cible ({{domxref("Event.target", "target")}}) a été cliquée. Autrement dit, `detail` vaudra 2 pour un double-clic, 3 pour un triple-clic et ainsi de suite. Le compteur est remis à zéro après un court intervalle (dont la durée spécifique peut varier entre les navigateurs, les plateformes et les préférences de l'utilisateur dont notamment les options d'accessibilité).
 
-<h3 id="Internet_Explorer">Internet Explorer</h3>
+### Internet Explorer
 
-<p>Internet Explorer 8 &amp; 9 souffrent d'un bug où les élméents avec une {{cssxref("background-color")}} calculée qui vaut <a href="/fr/docs/Web/CSS/color_value#transparent_keyword"><code>transparent</code></a> qui recouvrent d'autres éléments ne recevront pas d'évènements <code>click</code>. Les évènements <code>click</code> toucheront les éléments en dessous à la place.</p>
+Internet Explorer 8 & 9 souffrent d'un bug où les élméents avec une {{cssxref("background-color")}} calculée qui vaut [`transparent`](/fr/docs/Web/CSS/color_value#transparent_keyword) qui recouvrent d'autres éléments ne recevront pas d'évènements `click`. Les évènements `click` toucheront les éléments en dessous à la place.
 
-<p>Quelques méthodes de contournement pour ce bug :</p>
+Quelques méthodes de contournement pour ce bug :
 
-<ul>
- <li>Pour IE9 :
-  <ul>
-   <li>Utiliser {{cssxref("background-color")}}<code>: <a href="/en-US/docs/Web/CSS/color_value#rgba()">rgba</a>(0,0,0,0)</code></li>
-   <li>Appliquer {{cssxref("opacity")}}<code>: 0</code> et une valeur explicite pour {{cssxref("background-color")}} qui ne soit pas <a href="/fr/docs/Web/CSS/color_value#transparent_keyword"><code>transparent</code></a></li>
-  </ul>
- </li>
- <li>Pour IE8 et IE9 : appliquer <code><a href="http://msdn.microsoft.com/en-us/library/ms532847(v=vs.85).aspx">filter</a>: alpha(opacity=0);</code> et une valeur explicite pour {{cssxref("background-color")}} qui ne soit pas <a href="/fr/docs/Web/CSS/color_value#transparent_keyword"><code>transparent</code></a></li>
-</ul>
+- Pour IE9 :
 
-<h3 id="Safari_Mobile">Safari Mobile</h3>
+  - Utiliser {{cssxref("background-color")}}`: rgba(0,0,0,0)`
+  - Appliquer {{cssxref("opacity")}}`: 0` et une valeur explicite pour {{cssxref("background-color")}} qui ne soit pas [`transparent`](/fr/docs/Web/CSS/color_value#transparent_keyword)
 
-<p>Safari Mobile 7.0+ (et antérieures) <a href="https://bugs.webkit.org/show_bug.cgi?id=153887">souffre d'un bug</a> indiquant que les évènements <code>click</code> ne sont pas déclenchés sur les éléments qui ne sont généralement pas interactifs (ex. {{HTMLElement("div")}}) et qui n'ont pas de gestionnaire d'évènement directement attaché (on utilise la délégation d'évènement). Voir <a href="https://developer.apple.com/library/safari/documentation/appleapplications/reference/safariwebcontent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW6">la documentation de Safari sur le fait de rendre les éléments cliquables</a> et <a href="https://developer.apple.com/library/safari/documentation/appleapplications/reference/safariwebcontent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW7">la définition d'un élément cliquable</a>.</p>
+- Pour IE8 et IE9 : appliquer `filter: alpha(opacity=0);` et une valeur explicite pour {{cssxref("background-color")}} qui ne soit pas [`transparent`](/fr/docs/Web/CSS/color_value#transparent_keyword)
 
-<p>Méthodes de contournement connues :</p>
+### Safari Mobile
 
-<ul>
- <li>Ajouter {{cssxref("cursor")}}<code>: pointer;</code> sur l'élément ou l'un des ancêtres.</li>
- <li>Ajouter un attribut <code>onclick="void(0)"</code> à l'élément ou à l'un des ancêtres (tant que ce n'est pas {{HTMLElement("body")}}).</li>
- <li>Utiliser un élément interactif (ex. {{HTMLElement("a")}}) plutôt qu'un élément généralement non-interactif (ex. {{HTMLElement("div")}}).</li>
- <li>Ne pas utiliser la délégation d'évènement pour <code>click</code>.</li>
-</ul>
+Safari Mobile 7.0+ (et antérieures) [souffre d'un bug](https://bugs.webkit.org/show_bug.cgi?id=153887) indiquant que les évènements `click` ne sont pas déclenchés sur les éléments qui ne sont généralement pas interactifs (ex. {{HTMLElement("div")}}) et qui n'ont pas de gestionnaire d'évènement directement attaché (on utilise la délégation d'évènement). Voir [la documentation de Safari sur le fait de rendre les éléments cliquables](https://developer.apple.com/library/safari/documentation/appleapplications/reference/safariwebcontent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW6) et [la définition d'un élément cliquable](https://developer.apple.com/library/safari/documentation/appleapplications/reference/safariwebcontent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW7).
 
-<p>Safari Mobile considère que les éléments suivants sont interactifs (et ne souffrent donc pas de ce bug) :</p>
+Méthodes de contournement connues :
 
-<ul>
- <li>{{HTMLElement("a")}} (tant qu'il a un attribut <code>href</code>)</li>
- <li>{{HTMLElement("area")}} (tant qu'il a un attribut <code>href</code>)</li>
- <li>{{HTMLElement("button")}}</li>
- <li>{{HTMLElement("img")}}</li>
- <li>{{HTMLElement("input")}}</li>
- <li>{{HTMLElement("label")}} (tant qu'il est associé à un formulaire)</li>
- <li>{{HTMLElement("textarea")}}</li>
- <li><em>Liste à compléter.</em></li>
-</ul>
+- Ajouter {{cssxref("cursor")}}`: pointer;` sur l'élément ou l'un des ancêtres.
+- Ajouter un attribut `onclick="void(0)"` à l'élément ou à l'un des ancêtres (tant que ce n'est pas {{HTMLElement("body")}}).
+- Utiliser un élément interactif (ex. {{HTMLElement("a")}}) plutôt qu'un élément généralement non-interactif (ex. {{HTMLElement("div")}}).
+- Ne pas utiliser la délégation d'évènement pour `click`.
 
-<h2 id="Exemples">Exemples</h2>
+Safari Mobile considère que les éléments suivants sont interactifs (et ne souffrent donc pas de ce bug) :
 
-<p>Dans cet exemple, on affiche le nombre de clics consécutifs sur un bouton HTML ({{HTMLElement("button")}}).</p>
+- {{HTMLElement("a")}} (tant qu'il a un attribut `href`)
+- {{HTMLElement("area")}} (tant qu'il a un attribut `href`)
+- {{HTMLElement("button")}}
+- {{HTMLElement("img")}}
+- {{HTMLElement("input")}}
+- {{HTMLElement("label")}} (tant qu'il est associé à un formulaire)
+- {{HTMLElement("textarea")}}
+- _Liste à compléter._
 
-<h3 id="HTML">HTML</h3>
+## Exemples
 
-<pre class="brush: html">&lt;button&gt;Cliquer ici&lt;/button&gt;</pre>
+Dans cet exemple, on affiche le nombre de clics consécutifs sur un bouton HTML ({{HTMLElement("button")}}).
 
-<h3 id="JavaScript">JavaScript</h3>
+### HTML
 
-<pre class="brush: js">const button = document.querySelector('button');
+```html
+<button>Cliquer ici</button>
+```
 
-button.addEventListener('click', event =&gt; {
+### JavaScript
+
+```js
+const button = document.querySelector('button');
+
+button.addEventListener('click', event => {
   button.innerHTML = `Nombre de clics : ${event.detail}`;
-});</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>Essayez de cliquer rapidement sur le bouton pour augmenter le nombre de clic. Après une pause, le compteur sera remis à zéro.</p>
-
-<p>{{EmbedLiveSample("Exemples")}}</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>
-  </tr>
-  <tr>
-   <td>{{SpecName('UI Events', '#event-type-click')}}</td>
-   <td>{{Spec2('UI Events')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM3 Events', '#event-type-click', 'click')}}</td>
-   <td>{{Spec2('DOM3 Events')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Events', '#Events-eventgroupings-mouseevents-h3', 'click')}}</td>
-   <td>{{Spec2('DOM2 Events')}}</td>
-  </tr>
- </tbody>
-</table>
+});
+```
+
+### Résultat
+
+Essayez de cliquer rapidement sur le bouton pour augmenter le nombre de clic. Après une pause, le compteur sera remis à zéro.
+
+{{EmbedLiveSample("Exemples")}}
+
+## Spécifications
+
+| Spécification                                                                                            | État                             |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------- |
+| {{SpecName('UI Events', '#event-type-click')}}                                             | {{Spec2('UI Events')}}     |
+| {{SpecName('DOM3 Events', '#event-type-click', 'click')}}                             | {{Spec2('DOM3 Events')}} |
+| {{SpecName('DOM2 Events', '#Events-eventgroupings-mouseevents-h3', 'click')}} | {{Spec2('DOM2 Events')}} |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Element.click_event")}}
+
+## Voir aussi
+
+- [Une introduction aux évènements](/fr/docs/Apprendre/JavaScript/Building_blocks/Evènements)
+- D'autres évènements connexes
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Element.click_event")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Apprendre/JavaScript/Building_blocks/Evènements">Une introduction aux évènements</a></li>
- <li>D'autres évènements connexes
-  <ul>
-   <li><a href="/fr/docs/Web/API/Element/mouseup_event"><code>mouseup</code></a></li>
-   <li><code><a href="/fr/docs/Web/API/Element/mousedown_event">mousedown</a></code></li>
-   <li><a href="/fr/docs/Web/API/Element/mousemove_event"><code>mousemove</code></a></li>
-   <li><a href="/fr/docs/Web/API/Element/dblclick_event"><code>dblclick</code></a></li>
-   <li><a href="/fr/docs/Web/API/Element/mouseout_event"><code>mouseout</code></a></li>
-   <li><a href="/fr/docs/Web/API/Element/mouseover_event"><code>mouseover</code></a></li>
-   <li><a href="/fr/docs/Web/API/Element/mouseenter_event"><code>mouseenter</code></a></li>
-   <li><a href="/fr/docs/Web/API/Element/mouseleave_event"><code>mouseleave</code></a></li>
-   <li><a href="/fr/docs/Web/API/Element/contextmenu_event"><code>contextmenu</code></a></li>
-  </ul>
- </li>
-</ul>
+  - [`mouseup`](/fr/docs/Web/API/Element/mouseup_event)
+  - [`mousedown`](/fr/docs/Web/API/Element/mousedown_event)
+  - [`mousemove`](/fr/docs/Web/API/Element/mousemove_event)
+  - [`dblclick`](/fr/docs/Web/API/Element/dblclick_event)
+  - [`mouseout`](/fr/docs/Web/API/Element/mouseout_event)
+  - [`mouseover`](/fr/docs/Web/API/Element/mouseover_event)
+  - [`mouseenter`](/fr/docs/Web/API/Element/mouseenter_event)
+  - [`mouseleave`](/fr/docs/Web/API/Element/mouseleave_event)
+  - [`contextmenu`](/fr/docs/Web/API/Element/contextmenu_event)
diff --git a/files/fr/web/api/element/clientheight/index.md b/files/fr/web/api/element/clientheight/index.md
index 3e88e1a801..ff97dd6ae1 100644
--- a/files/fr/web/api/element/clientheight/index.md
+++ b/files/fr/web/api/element/clientheight/index.md
@@ -4,46 +4,42 @@ slug: Web/API/Element/clientHeight
 translation_of: Web/API/Element/clientHeight
 browser-compat: api.Element.clientHeight
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p>La propriété en lecture seule <strong><code>Element.clientHeight</code></strong> vaut zéro pour les éléments sans CSS ou sans boîte de disposition en ligne/incise ; sinon elle vaut la hauteur interne d'un élément, exprimée en pixels. Cette hauteur inclut le remplissage (<i lang="en">padding</i>) mais exclut les bordures, les marges et les éventuelles barres de défilement horizontales.</p>
+La propriété en lecture seule **`Element.clientHeight`** vaut zéro pour les éléments sans CSS ou sans boîte de disposition en ligne/incise ; sinon elle vaut la hauteur interne d'un élément, exprimée en pixels. Cette hauteur inclut le remplissage (<i lang="en">padding</i>) mais exclut les bordures, les marges et les éventuelles barres de défilement horizontales.
 
-<p><code>clientHeight</code> peut être calculée comme : <em>hauteur CSS</em> + <em>remplissage CSS</em> - <em>hauteur des barres de défilement horizontales</em> s'il y en a.</p>
+`clientHeight` peut être calculée comme : _hauteur CSS_ + _remplissage CSS_ - _hauteur des barres de défilement horizontales_ s'il y en a.
 
-<p>Lorsque <code>clientHeight</code> est utilisée sur l'élément racine (l'élément <code>&lt;html&gt;</code>), (ou sur <code>&lt;body&gt;</code> si le document est en mode de compatibilité (<i lang="en">quirks mode</i>)), c'est la hauteur de la zone d'affichage (<i lang="en">viewport</i>) (sans tenir compte des barres de défilement) qui est renvoyée. <a href="https://www.w3.org/TR/2016/WD-cssom-view-1-20160317/#dom-element-clientheight">Il s'agit ici d'un cas aux limites pour <code>clientHeight</code></a>.</p>
+Lorsque `clientHeight` est utilisée sur l'élément racine (l'élément `<html>`), (ou sur `<body>` si le document est en mode de compatibilité (<i lang="en">quirks mode</i>)), c'est la hauteur de la zone d'affichage (<i lang="en">viewport</i>) (sans tenir compte des barres de défilement) qui est renvoyée. [Il s'agit ici d'un cas aux limites pour `clientHeight`](https://www.w3.org/TR/2016/WD-cssom-view-1-20160317/#dom-element-clientheight).
 
-<div class="note">
-  <p><strong>Note :</strong> Cette propriété sera arrondie en un entier. Si vous souhaitez utiliser une valeur décimale, vous pouvez utiliser <a href="/fr/docs/Web/API/Element/getBoundingClientRect"><code>element.getBoundingClientRect()</code></a>.</p>
-</div>
+> **Note :** Cette propriété sera arrondie en un entier. Si vous souhaitez utiliser une valeur décimale, vous pouvez utiliser [`element.getBoundingClientRect()`](/fr/docs/Web/API/Element/getBoundingClientRect).
 
-<h2 id="syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">
+```js
 var intElemClientHeight = element.clientHeight;
-</pre>
+```
 
-<p><code>intElemClientHeight</code> est un entier correspondant à la valeur de <code>clientHeight</code> pour l'élément représenté par  <code>element</code>, exprimée en pixels. La propriété <code>clientHeight</code> est uniquement accessible en lecture-seule.</p>
+`intElemClientHeight` est un entier correspondant à la valeur de `clientHeight` pour l'élément représenté par `element`, exprimée en pixels. La propriété `clientHeight` est uniquement accessible en lecture-seule.
 
-<h2 id="example">Exemples</h2>
+## Exemples
 
-<p><img src="dimensions-client.png"></p>
+![](dimensions-client.png)
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<p>{{Specifications}}</p>
+{{Specifications}}
 
-<h3 id="Notes">Notes</h3>
+### Notes
 
-<p><code>clientHeight</code> est une propriété introduite par le modèle objet d'Internet Explorer.</p>
+`clientHeight` est une propriété introduite par le modèle objet d'Internet Explorer.
 
-<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/HTMLElement/offsetHeight"><code>HTMLElement.offsetHeight</code></a></li>
-  <li><a href="/fr/docs/Web/API/Element/scrollHeight"><code>Element.scrollHeight</code></a></li>
-  <li><a href="/en-US/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements">Déterminer les dimensions des éléments</a></li>
-</ul>
+- [`HTMLElement.offsetHeight`](/fr/docs/Web/API/HTMLElement/offsetHeight)
+- [`Element.scrollHeight`](/fr/docs/Web/API/Element/scrollHeight)
+- [Déterminer les dimensions des éléments](/en-US/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements)
diff --git a/files/fr/web/api/element/clientleft/index.md b/files/fr/web/api/element/clientleft/index.md
index 72f3d71689..2183d340f9 100644
--- a/files/fr/web/api/element/clientleft/index.md
+++ b/files/fr/web/api/element/clientleft/index.md
@@ -4,45 +4,41 @@ slug: Web/API/Element/clientLeft
 translation_of: Web/API/Element/clientLeft
 browser-compat: api.Element.clientLeft
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p>La propriété en lecture seule <strong><code>Element.clientLeft</code></strong> représente la largeur de la bordure gauche d'un élément, exprimée en pixels. Cette largeur inclut l'éventuelle largeur de la barre de défilement verticale si le texte se lit de droite à gauche et s'il y a un dépassement entraînant l'apparition d'une barre de défilement à gauche. <code>clientLeft</code> n'inclut pas la marge gauche ou le remplissage (<i lang="en">padding</i>) à gauche.</p>
+La propriété en lecture seule **`Element.clientLeft`** représente la largeur de la bordure gauche d'un élément, exprimée en pixels. Cette largeur inclut l'éventuelle largeur de la barre de défilement verticale si le texte se lit de droite à gauche et s'il y a un dépassement entraînant l'apparition d'une barre de défilement à gauche. `clientLeft` n'inclut pas la marge gauche ou le remplissage (<i lang="en">padding</i>) à gauche.
 
-<p>Lorsque la préférence <a href="http://kb.mozillazine.org/Layout.scrollbar.side"><code>layout.scrollbar.side</code></a> est paramétrée à 1 ou à 3 et que la direction du texte est de droite à gauche, <strong>alors la barre de défilement verticale est placée à gauche</strong> et ce placement aura donc un impact sur la valeur de <code>clientLeft</code>.</p>
+Lorsque la préférence [`layout.scrollbar.side`](http://kb.mozillazine.org/Layout.scrollbar.side) est paramétrée à 1 ou à 3 et que la direction du texte est de droite à gauche, **alors la barre de défilement verticale est placée à gauche** et ce placement aura donc un impact sur la valeur de `clientLeft`.
 
-<div class="note">
-  <p><strong>Note :</strong> Cette propriété sera arrondie en une valeur entière. Si vous souhaitez utiliser une valeur décimale, vous pouvez utiliser <a href="/fr/docs/Web/API/Element/getBoundingClientRect"><code>element.getBoundingClientRect()</code></a>. </p>
-</div>
+> **Note :** Cette propriété sera arrondie en une valeur entière. Si vous souhaitez utiliser une valeur décimale, vous pouvez utiliser [`element.getBoundingClientRect()`](/fr/docs/Web/API/Element/getBoundingClientRect).
 
-<div class="note">
-  <p><strong>Note :</strong> Lorsqu'un élément se voit appliquer <code>display: inline</code>, <code>clientLeft</code> renvoie <code>0</code>, quelle que soit la bordure de l'élément.</p>
-</div>
+> **Note :** Lorsqu'un élément se voit appliquer `display: inline`, `clientLeft` renvoie `0`, quelle que soit la bordure de l'élément.
 
-<h2 id="syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">
+```js
 var left = element.clientLeft;
-</pre>
+```
 
-<h2 id="exemple">Exemple</h2>
+## Exemple
 
-<p>Dans l'exemple qui suit, la zone du client possède un arrière-plan blanc avec une bordure <code>border-left</code> noire de 24px. La valeur de <code>clientLeft</code> correspond à la distance entre la fin de la zone de la marge et le début des zones de contenu et de remplissage : 24px.</p>
+Dans l'exemple qui suit, la zone du client possède un arrière-plan blanc avec une bordure `border-left` noire de 24px. La valeur de `clientLeft` correspond à la distance entre la fin de la zone de la marge et le début des zones de contenu et de remplissage : 24px.
 
-<h3>HTML</h3>
+### HTML
 
-<pre class="brush: html">
-&lt;div id="container"&gt;
-  &lt;div id="contained"&gt;
-    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+```html
+<div id="container">
+  <div id="contained">
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
 	  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
-	  nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.&lt;/p&gt;
-  &lt;/div&gt;
-&lt;/div&gt;
-</pre>
+	  nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+  </div>
+</div>
+```
 
-<h3>CSS</h3>
+### CSS
 
-<pre class="brush: css">
+```css
 
 #container {
 	margin: 3rem;
@@ -57,24 +53,24 @@ var left = element.clientLeft;
 	overflow: auto;
 	background-color: white;
 }
-</pre>
+```
 
-<h3>Résultat</h3>
+### Résultat
 
 {{EmbedLiveSample("Exemple", 400, 350)}}
 
-<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
 
-<p><code>clientLeft</code> fut introduit avec le modèle d'objet DHTML d'Internet Explorer.</p>
+`clientLeft` fut introduit avec le modèle d'objet DHTML d'Internet Explorer.
 
-<p>La position de la barre de défilement verticale pour les textes écrits de droite à gauche dépend de la préférence <a href="http://kb.mozillazine.org/Layout.scrollbar.side"><code>layout.scrollbar.side</code></a>.</p>
+La position de la barre de défilement verticale pour les textes écrits de droite à gauche dépend de la préférence [`layout.scrollbar.side`](http://kb.mozillazine.org/Layout.scrollbar.side).
 
-<p>Les applications utilisant le moteur Gecko prennent en charge <code>clientLeft</code> depuis Gecko 1.9 (Firefox 3 l'implémente avec <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=111207">le bug 111207</a>). Cette propriété n'est pas prise en charge pour Firefox 2 et les versions antérieures.</p>
+Les applications utilisant le moteur Gecko prennent en charge `clientLeft` depuis Gecko 1.9 (Firefox 3 l'implémente avec [le bug 111207](https://bugzilla.mozilla.org/show_bug.cgi?id=111207)). Cette propriété n'est pas prise en charge pour Firefox 2 et les versions antérieures.
diff --git a/files/fr/web/api/element/clientwidth/index.md b/files/fr/web/api/element/clientwidth/index.md
index 9a3bd1012c..229934df6d 100644
--- a/files/fr/web/api/element/clientwidth/index.md
+++ b/files/fr/web/api/element/clientwidth/index.md
@@ -8,59 +8,40 @@ tags:
   - Reference
 translation_of: Web/API/Element/clientWidth
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p>La propriété <code><strong>Element.clientWidth</strong></code> vaut zéro pour les éléments en ligne (<em>inline</em>) et pour les éléments sans CSS. Dans les autres cas, sa valeur correspond à la largeur intérieure d'un élément, exprimée en pixel. Cette largeur inclue le rembourrage (<em>padding</em>) mais exclut les bordures, les marges et les éventuelles barres de défilement verticales.</p>
+La propriété **`Element.clientWidth`** vaut zéro pour les éléments en ligne (_inline_) et pour les éléments sans CSS. Dans les autres cas, sa valeur correspond à la largeur intérieure d'un élément, exprimée en pixel. Cette largeur inclue le rembourrage (_padding_) mais exclut les bordures, les marges et les éventuelles barres de défilement verticales.
 
-<p>Lorsque <code>clientWidth</code> est utilisée sur l'élément racine (l'élément <code>&lt;html&gt;</code> par défaut ou <code>&lt;body&gt;</code> si le document utilise le mode <em>quirks</em>), c'est la largeur de la zone d'affichage (<em>viewport</em>) à l'exception des barres de défilement qui est renvoyée. <a href="https://www.w3.org/TR/2016/WD-cssom-view-1-20160317/#dom-element-clientwidth">Il s'agit d'un cas au limite pour <code>clientWidth</code></a>.</p>
+Lorsque `clientWidth` est utilisée sur l'élément racine (l'élément `<html>` par défaut ou `<body>` si le document utilise le mode _quirks_), c'est la largeur de la zone d'affichage (_viewport_) à l'exception des barres de défilement qui est renvoyée. [Il s'agit d'un cas au limite pour `clientWidth`](https://www.w3.org/TR/2016/WD-cssom-view-1-20160317/#dom-element-clientwidth).
 
-<div class="note">
-<p><strong>Note :</strong> La valeur de cette propriété sera arondie en un entier. Si vous devez utiliser une valeur décimale, privilégiez {{domxref("element.getBoundingClientRect()")}}.</p>
-</div>
+> **Note :** La valeur de cette propriété sera arondie en un entier. Si vous devez utiliser une valeur décimale, privilégiez {{domxref("element.getBoundingClientRect()")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var <var>intElemClientWidth</var> = <var>element</var>.clientWidth;</pre>
+    var intElemClientWidth = element.clientWidth;
 
-<p><code><var>intElemClientWidth</var></code> est un entier correspondant à la largeur d'<code><var>element</var></code>, en pixels. La propriété <code>clientWidth</code> est uniquement accessible en lecture-seule.</p>
+`intElemClientWidth` est un entier correspondant à la largeur d'`element`, en pixels. La propriété `clientWidth` est uniquement accessible en lecture-seule.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p><img src="dimensions-client.png"></p>
+![](dimensions-client.png)
 
-<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('CSSOM View', '#dom-element-clientwidth', 'clientWidth')}}</td>
-   <td>{{Spec2("CSSOM View")}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                | État                             | Commentaires |
+| -------------------------------------------------------------------------------------------- | -------------------------------- | ------------ |
+| {{SpecName('CSSOM View', '#dom-element-clientwidth', 'clientWidth')}} | {{Spec2("CSSOM View")}} |              |
 
-<h3 id="Notes">Notes</h3>
+### Notes
 
-<p><code>clientWidth</code> fut d'abord introduit avec le modèle objet DHTML de Microsoft Internet Explorer.</p>
+`clientWidth` fut d'abord introduit avec le modèle objet DHTML de Microsoft Internet Explorer.
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
+{{Compat("api.Element.clientWidth")}}
 
+## Voir aussi
 
-<p>{{Compat("api.Element.clientWidth")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("HTMLElement.offsetWidth")}}</li>
- <li>{{domxref("Element.scrollWidth")}}</li>
- <li><a href="/fr/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements">Déterminer les dimensions des éléments</a></li>
-</ul>
+- {{domxref("HTMLElement.offsetWidth")}}
+- {{domxref("Element.scrollWidth")}}
+- [Déterminer les dimensions des éléments](/fr/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements)
diff --git a/files/fr/web/api/element/closest/index.md b/files/fr/web/api/element/closest/index.md
index 61a0e9f93f..a805089953 100644
--- a/files/fr/web/api/element/closest/index.md
+++ b/files/fr/web/api/element/closest/index.md
@@ -8,47 +8,45 @@ tags:
   - Méthodes
 translation_of: Web/API/Element/closest
 ---
-<p>{{APIRef('Shadow DOM')}}</p>
+{{APIRef('Shadow DOM')}}
 
-<p>La méthode <code><strong>Element.closest()</strong></code> renvoie l'ancêtre le plus proche de l'élément courant (ou l'élément courant) qui correspond aux sélecteurs passés comme paramètres. S'il n'existe pas de tel ancêtre, la méthode renvoie <code>null</code>.</p>
+La méthode **`Element.closest()`** renvoie l'ancêtre le plus proche de l'élément courant (ou l'élément courant) qui correspond aux sélecteurs passés comme paramètres. S'il n'existe pas de tel ancêtre, la méthode renvoie `null`.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var <em>elt =</em><em> element</em>.closest(<em>selecteurs</em>);
-</pre>
+    var elt = element.closest(selecteurs);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>selecteurs</code></dt>
- <dd>Une chaîne {{domxref("DOMString")}} qui contient une liste de sélecteurs tels que <code>"p:hover, .toto + q"</code></dd>
-</dl>
+- `selecteurs`
+  - : Une chaîne {{domxref("DOMString")}} qui contient une liste de sélecteurs tels que `"p:hover, .toto + q"`
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+### Valeur de retour
 
-<p>L'élément ({{domxref("Element")}}) qui est le plus proche ancêtre de l'élément courant et qui correspond aux sélecteurs décrits dans le paramètres ou {{jsxref("null")}} s'il n'y en a aucun.</p>
+L'élément ({{domxref("Element")}}) qui est le plus proche ancêtre de l'élément courant et qui correspond aux sélecteurs décrits dans le paramètres ou {{jsxref("null")}} s'il n'y en a aucun.
 
-<h3 id="Exceptions">Exceptions</h3>
+### Exceptions
 
-<ul>
- <li>{{exception("SyntaxError")}} sera levée si <code>selecteurs</code> n'est pas une liste de sélecteurs valide.</li>
-</ul>
+- {{exception("SyntaxError")}} sera levée si `selecteurs` n'est pas une liste de sélecteurs valide.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;article&gt;
-  &lt;div id="div-01"&gt;Here is div-01
-    &lt;div id="div-02"&gt;Here is div-02
-      &lt;div id="div-03"&gt;Here is div-03&lt;/div&gt;
-    &lt;/div&gt;
-  &lt;/div&gt;
-&lt;/article&gt;</pre>
+```html
+<article>
+  <div id="div-01">Here is div-01
+    <div id="div-02">Here is div-02
+      <div id="div-03">Here is div-03</div>
+    </div>
+  </div>
+</article>
+```
 
-<h3 id="JavaScript">JavaScript</h3>
+### JavaScript
 
-<pre class="brush: js">var el = document.getElementById('div-03');
+```js
+var el = document.getElementById('div-03');
 
 var r1 = el.closest("#div-02");
 // Renvoie l'élément avec l'identifiant id=div-02
@@ -57,20 +55,22 @@ var r2 = el.closest("div div");
 // Renvoie le plus proche ancêtre qui est un div
 // dans un div. Ici, c'est div-03 lui-même.
 
-var r3 = el.closest("article &gt; div");
+var r3 = el.closest("article > div");
 // Renvoie le plus proche ancêtre qui est un div
 // et dont l'élément parent est article. Ici c'est
 // div-01.
 
 var r4 = el.closest(":not(div)");
 // Renvoie le plus proche ancêtre qui n'est pas un
-// div. Dans ce cas, c'est l'élément article.</pre>
+// div. Dans ce cas, c'est l'élément article.
+```
 
-<h2 id="Polyfill">Polyfill</h2>
+## Polyfill
 
-<p>Pour les navigateurs qui ne prennent pas en charge <code>Element.closest()</code> mais qui permettent d'utiliser <code>element.matches()</code> (ou un équivalent préfixé, à partir d'IE9+), on peut utiliser le polyfill suivant :</p>
+Pour les navigateurs qui ne prennent pas en charge `Element.closest()` mais qui permettent d'utiliser `element.matches()` (ou un équivalent préfixé, à partir d'IE9+), on peut utiliser le polyfill suivant :
 
-<pre class="brush: js">if (!Element.prototype.matches)
+```js
+if (!Element.prototype.matches)
     Element.prototype.matches = Element.prototype.msMatchesSelector ||
                                 Element.prototype.webkitMatchesSelector;
 
@@ -81,13 +81,15 @@ if (!Element.prototype.closest)
         do {
             if (el.matches(s)) return el;
             el = el.parentElement || el.parentNode;
-        } while (el !== null &amp;&amp; el.nodeType == 1);
+        } while (el !== null && el.nodeType == 1);
         return null;
-    };</pre>
+    };
+```
 
-<p>Cependant, si vous avez besoin de supporter IE 8, vous pouvez utiliser la prothèse suivante qui marchera, mais beaucoup plus lentement. Elle ne supporte que les sélecteurs CSS 2.1 dans IE 8, et peut causer de gros pics de latence dans les sites web :</p>
+Cependant, si vous avez besoin de supporter IE 8, vous pouvez utiliser la prothèse suivante qui marchera, mais beaucoup plus lentement. Elle ne supporte que les sélecteurs CSS 2.1 dans IE 8, et peut causer de gros pics de latence dans les sites web :
 
-<pre class="brush: js">if (window.Element &amp;&amp; !Element.prototype.closest) {
+```js
+if (window.Element && !Element.prototype.closest) {
   Element.prototype.closest =
   function(s) {
     var matches = (this.document || this.ownerDocument).querySelectorAll(s),
@@ -95,44 +97,29 @@ if (!Element.prototype.closest)
         el = this;
     do {
       i = matches.length;
-      while (--i &gt;= 0 &amp;&amp; matches.item(i) !== el) {};
-    } while ((i &lt; 0) &amp;&amp; (el = el.parentElement));
+      while (--i >= 0 && matches.item(i) !== el) {};
+    } while ((i < 0) && (el = el.parentElement));
     return el;
   };
 }
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#dom-element-closest', 'Element.closest()')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Element.closest")}}</p>
-
-<h3 id="Notes_de_compatibilité">Notes de compatibilité</h3>
-
-<ul>
- <li>Dans Edge <code>document.createElement(tagName).closest(tagName)</code> retournera <code>null</code> si l'élément n'est pas attaché au DOM au préalable.</li>
-</ul>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>L'interface {{domxref("Element")}}</li>
- <li><a href="/fr/Apprendre/CSS/Les_bases/Les_sélecteurs">La syntaxe pour les sélecteurs</a></li>
- <li>Autres méthodes utilisant des sélecteurs: {{domxref("element.querySelector()")}} et {{domxref("element.matches()")}}.</li>
-</ul>
+```
+
+## Spécifications
+
+| Spécification                                                                                    | Statut                           | Commentaire          |
+| ------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName('DOM WHATWG', '#dom-element-closest', 'Element.closest()')}} | {{Spec2('DOM WHATWG')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Element.closest")}}
+
+### Notes de compatibilité
+
+- Dans Edge `document.createElement(tagName).closest(tagName)` retournera `null` si l'élément n'est pas attaché au DOM au préalable.
+
+## Voir aussi
+
+- L'interface {{domxref("Element")}}
+- [La syntaxe pour les sélecteurs](/fr/Apprendre/CSS/Les_bases/Les_sélecteurs)
+- Autres méthodes utilisant des sélecteurs: {{domxref("element.querySelector()")}} et {{domxref("element.matches()")}}.
diff --git a/files/fr/web/api/element/compositionend_event/index.md b/files/fr/web/api/element/compositionend_event/index.md
index 546f6b3c5f..3032e6c928 100644
--- a/files/fr/web/api/element/compositionend_event/index.md
+++ b/files/fr/web/api/element/compositionend_event/index.md
@@ -4,47 +4,50 @@ slug: Web/API/Element/compositionend_event
 translation_of: Web/API/Element/compositionend_event
 original_slug: Web/Events/compositionend
 ---
-<p>L'événement <strong><code>compositionend</code></strong> est déclenché lorsque la composition d'un texte via {{glossary("input method editor", "méthode de saisie")}} est terminée ou annulée (démarre avec des caractères spéciaux qui requièrent une séquence de touches et d'autres entrées telles que la reconnaissance vocale ou la suggestion de mot sur mobile).</p>
+L'événement **`compositionend`** est déclenché lorsque la composition d'un texte via {{glossary("input method editor", "méthode de saisie")}} est terminée ou annulée (démarre avec des caractères spéciaux qui requièrent une séquence de touches et d'autres entrées telles que la reconnaissance vocale ou la suggestion de mot sur mobile).
 
-<p>Par exemple, cette événement pourrait être déclanché quand un utilisateur saisie un caractère chinois en utilisant la méthode de saisie <a href="https://en.wikipedia.org/wiki/Pinyin">Pinyin</a>.</p>
+Par exemple, cette événement pourrait être déclanché quand un utilisateur saisie un caractère chinois en utilisant la méthode de saisie [Pinyin](https://en.wikipedia.org/wiki/Pinyin).
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row">Se propage/remonte dans le DOM</th>
-   <td>Oui</td>
-  </tr>
-  <tr>
-   <th scope="row">Annulable</th>
-   <td>Oui</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface</th>
-   <td>{{domxref("CompositionEvent")}}</td>
-  </tr>
-  <tr>
-   <th scope="row">Propriété pour la gestion d'évènement</th>
-   <td>Aucune</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Se propage/remonte dans le DOM</th>
+      <td>Oui</td>
+    </tr>
+    <tr>
+      <th scope="row">Annulable</th>
+      <td>Oui</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface</th>
+      <td>{{domxref("CompositionEvent")}}</td>
+    </tr>
+    <tr>
+      <th scope="row">Propriété pour la gestion d'évènement</th>
+      <td>Aucune</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<h3 id="Html">Html</h3>
+### Html
 
-<pre class="brush: html">&lt;div class="control"&gt;
-  &lt;label for="name"&gt;Sur macOS, cliquez sur la boîte de texte,&lt;br&gt; puis appuyez sur &lt;kbd&gt;option&lt;/kbd&gt; + &lt;kbd&gt;`&lt;/kbd&gt;, puis &lt;kbd&gt;a&lt;/kbd&gt;:&lt;/label&gt;
-  &lt;input type="text" id="example" name="example"&gt;
-&lt;/div&gt;
+```html
+<div class="control">
+  <label for="name">Sur macOS, cliquez sur la boîte de texte,<br> puis appuyez sur <kbd>option</kbd> + <kbd>`</kbd>, puis <kbd>a</kbd>:</label>
+  <input type="text" id="example" name="example">
+</div>
 
-&lt;div class="event-log"&gt;
-  &lt;label&gt;Log d'événement:&lt;/label&gt;
-  &lt;textarea readonly class="event-log-contents" rows="8" cols="25"&gt;&lt;/textarea&gt;
-  &lt;button class="clear-log"&gt;Effacer&lt;/button&gt;
-&lt;/div&gt;</pre>
+<div class="event-log">
+  <label>Log d'événement:</label>
+  <textarea readonly class="event-log-contents" rows="8" cols="25"></textarea>
+  <button class="clear-log">Effacer</button>
+</div>
+```
 
-<pre class="brush: css hidden">body {
+```css hidden
+body {
   padding: .2rem;
   display: grid;
   grid-template-areas: "control  log";
@@ -75,15 +78,16 @@ kbd {
   padding: 1px 2px 0;
   border: 1px solid black;
 }
-</pre>
+```
 
-<h3 id="JS">JS</h3>
+### JS
 
-<pre class="brush: js">const inputElement = document.querySelector('input[type="text"]');
+```js
+const inputElement = document.querySelector('input[type="text"]');
 const log = document.querySelector('.event-log-contents');
 const clearLog = document.querySelector('.clear-log');
 
-clearLog.addEventListener('click', () =&gt; {
+clearLog.addEventListener('click', () => {
     log.textContent = '';
 });
 
@@ -93,36 +97,24 @@ function handleEvent(event) {
 
 inputElement.addEventListener('compositionstart', handleEvent);
 inputElement.addEventListener('compositionupdate', handleEvent);
-inputElement.addEventListener('compositionend', handleEvent);</pre>
-
-<h3 id="Resultat">Resultat</h3>
-
-<p>{{ EmbedLiveSample('Exemple', '100%', '180px') }}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Status</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('UI Events', '#event-type-compositionend')}}</td>
-   <td>{{Spec2('UI Events')}}</td>
-  </tr>
- </tbody>
-</table>
+inputElement.addEventListener('compositionend', handleEvent);
+```
+
+### Resultat
+
+{{ EmbedLiveSample('Exemple', '100%', '180px') }}
+
+## Spécifications
+
+| Spécification                                                            | Status                       |
+| ------------------------------------------------------------------------ | ---------------------------- |
+| {{SpecName('UI Events', '#event-type-compositionend')}} | {{Spec2('UI Events')}} |
 
-<h2 id="Compatibilités_navigateurs">Compatibilités navigateurs</h2>
+## Compatibilités navigateurs
 
-<p>{{Compat("api.Element.compositionend_event")}}</p>
+{{Compat("api.Element.compositionend_event")}}
 
-<h2 id="Evénements_liés">Evénements liés</h2>
+## Evénements liés
 
-<ul>
- <li>{{Event("compositionstart")}}</li>
- <li>{{Event("compositionupdate")}}</li>
-</ul>
+- {{Event("compositionstart")}}
+- {{Event("compositionupdate")}}
diff --git a/files/fr/web/api/element/compositionstart_event/index.md b/files/fr/web/api/element/compositionstart_event/index.md
index 4de27018bc..b1370d4893 100644
--- a/files/fr/web/api/element/compositionstart_event/index.md
+++ b/files/fr/web/api/element/compositionstart_event/index.md
@@ -10,11 +10,11 @@ tags:
 translation_of: Web/API/Element/compositionstart_event
 original_slug: Web/Events/compositionstart
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}
 
-<p>L'événement <strong><code>compositionstart</code></strong> est déclenché lorsqu'un système de composition de texte tel qu'une {{glossary("input method editor","méthode de saisie")}} démarre une nouvelle session de composition.</p>
+L'événement **`compositionstart`** est déclenché lorsqu'un système de composition de texte tel qu'une {{glossary("input method editor","méthode de saisie")}} démarre une nouvelle session de composition.
 
-<p>Par exemple, cet événement pourrait être déclenché après qu'un utilisateur a commencé à saisir un caractère chinois en utilisant un <a href="https://en.wikipedia.org/wiki/Pinyin">Pinyin</a> IME.</p>
+Par exemple, cet événement pourrait être déclenché après qu'un utilisateur a commencé à saisir un caractère chinois en utilisant un [Pinyin](https://en.wikipedia.org/wiki/Pinyin) IME.
 
 <table class="properties">
   <tbody>
@@ -37,30 +37,35 @@ original_slug: Web/Events/compositionstart
   </tbody>
 </table>
 
-<h2 id="Examples">Exemples</h2>
+## Exemples
 
-<pre class="brush: js">const inputElement = document.querySelector('input[type="text"]');
+```js
+const inputElement = document.querySelector('input[type="text"]');
 
-inputElement.addEventListener('compositionstart', (event) =&gt; {
+inputElement.addEventListener('compositionstart', (event) => {
   console.log(`generated characters were: ${event.data}`);
-});</pre>
+});
+```
 
-<h3 id="Live_example">Exemple concret</h3>
+### Exemple concret
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;div class="control"&gt;
-  &lt;label for="name"&gt;Sur macOS, cliquez dans la zone de texte ci-dessous,&lt;br&gt; puis tapez &lt;kbd&gt;option&lt;/kbd&gt; + &lt;kbd&gt;`&lt;/kbd&gt;, puis &lt;kbd&gt;a&lt;/kbd&gt; :&lt;/label&gt;
-  &lt;input type="text" id="example" name="example"&gt;
-&lt;/div&gt;
+```html
+<div class="control">
+  <label for="name">Sur macOS, cliquez dans la zone de texte ci-dessous,<br> puis tapez <kbd>option</kbd> + <kbd>`</kbd>, puis <kbd>a</kbd> :</label>
+  <input type="text" id="example" name="example">
+</div>
 
-&lt;div class="event-log"&gt;
-  &lt;label&gt;Event log:&lt;/label&gt;
-  &lt;textarea readonly class="event-log-contents" rows="8" cols="25"&gt;&lt;/textarea&gt;
-  &lt;button class="clear-log"&gt;Clear&lt;/button&gt;
-&lt;/div&gt;</pre>
+<div class="event-log">
+  <label>Event log:</label>
+  <textarea readonly class="event-log-contents" rows="8" cols="25"></textarea>
+  <button class="clear-log">Clear</button>
+</div>
+```
 
-<pre class="brush: css hidden">body {
+```css hidden
+body {
   padding: .2rem;
   display: grid;
   grid-template-areas: "control  log";
@@ -91,15 +96,16 @@ kbd {
   padding: 1px 2px 0;
   border: 1px solid black;
 }
-</pre>
+```
 
-<h4 id="JS">JS</h4>
+#### JS
 
-<pre class="brush: js">const inputElement = document.querySelector('input[type="text"]');
+```js
+const inputElement = document.querySelector('input[type="text"]');
 const log = document.querySelector('.event-log-contents');
 const clearLog = document.querySelector('.clear-log');
 
-clearLog.addEventListener('click', () =&gt; {
+clearLog.addEventListener('click', () => {
   log.textContent = '';
 });
 
@@ -110,35 +116,22 @@ function handleEvent(event) {
 inputElement.addEventListener('compositionstart', handleEvent);
 inputElement.addEventListener('compositionupdate', handleEvent);
 inputElement.addEventListener('compositionend', handleEvent);
-</pre>
+```
 
-<h4 id="Result">Résultat</h4>
+#### Résultat
 
-<p>{{ EmbedLiveSample('Live_example', '100%', '180px') }}</p>
+{{ EmbedLiveSample('Live_example', '100%', '180px') }}
 
-<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('UI Events', '#event-type-compositionstart')}}</td>
-      <td>{{Spec2('UI Events')}}</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                | Statut                       |
+| ---------------------------------------------------------------------------- | ---------------------------- |
+| {{SpecName('UI Events', '#event-type-compositionstart')}} | {{Spec2('UI Events')}} |
 
-<h2 id="Compatibilités_navigateur">Compatibilités navigateur</h2>
+## Compatibilités navigateur
 
-<p>{{Compat("api.Element.compositionstart_event")}}</p>
+{{Compat("api.Element.compositionstart_event")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>Événements liés : {{domxref("Element/compositionend_event", "compositionend")}}, {{domxref("Element/compositionupdate_event", "compositionupdate")}}.</li>
-</ul>
+- Événements liés : {{domxref("Element/compositionend_event", "compositionend")}}, {{domxref("Element/compositionupdate_event", "compositionupdate")}}.
diff --git a/files/fr/web/api/element/compositionupdate_event/index.md b/files/fr/web/api/element/compositionupdate_event/index.md
index f0ae9bc134..06c5973e57 100644
--- a/files/fr/web/api/element/compositionupdate_event/index.md
+++ b/files/fr/web/api/element/compositionupdate_event/index.md
@@ -4,83 +4,38 @@ slug: Web/API/Element/compositionupdate_event
 translation_of: Web/API/Element/compositionupdate_event
 original_slug: Web/Events/compositionupdate
 ---
-<p>L'événement <strong>compositionupdate</strong> est déclenché lorsqu'un caractère est ajouté à un passage de texte en train d'être composé (<code>démarre avec des caractères spéciaux qui nécessitent une sequence de touches et d'autres entrées telles que la reconnaissance vocale ou la suggestion de mots du mobile).</code></p>
+L'événement **compositionupdate** est déclenché lorsqu'un caractère est ajouté à un passage de texte en train d'être composé (`démarre avec des caractères spéciaux qui nécessitent une sequence de touches et d'autres entrées telles que la reconnaissance vocale ou la suggestion de mots du mobile).`
 
-<h2 id="Informations_générales">Informations générales</h2>
+## Informations générales
 
-<dl>
- <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
- <dd style="margin: 0 0 0 120px;">{{domxref("TouchEvent")}}</dd>
- <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
- <dd style="margin: 0 0 0 120px;">Oui</dd>
- <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
- <dd style="margin: 0 0 0 120px;">Non</dd>
- <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
- <dd style="margin: 0 0 0 120px;">{{domxref("Element")}}</dd>
-</dl>
+- Interface
+  - : {{domxref("TouchEvent")}}
+- Propagation
+  - : Oui
+- Annulable
+  - : Non
+- Cible
+  - : {{domxref("Element")}}
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Property</th>
-   <th scope="col">Type</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>target</code> {{ReadOnlyInline}}</td>
-   <td>{{domxref("EventTarget")}}</td>
-   <td>Elément ayant le focus qui traite la composition. Nul si non-accessible.</td>
-  </tr>
-  <tr>
-   <td><code>type</code> {{ReadOnlyInline}}</td>
-   <td>{{domxref("DOMString")}}</td>
-   <td>Le type de l'événement.</td>
-  </tr>
-  <tr>
-   <td><code>bubbles</code> {{ReadOnlyInline}}</td>
-   <td><code>boolean</code></td>
-   <td>Est-ce qu'il se propage?</td>
-  </tr>
-  <tr>
-   <td><code>cancelable</code> {{ReadOnlyInline}}</td>
-   <td><code>boolean</code></td>
-   <td>Peut-il être annulé?</td>
-  </tr>
-  <tr>
-   <td><code>view</code> {{ReadOnlyInline}}</td>
-   <td>{{domxref("WindowProxy")}}</td>
-   <td>{{domxref("Document.defaultView")}} (fenêtre du document).</td>
-  </tr>
-  <tr>
-   <td><code>detail</code> {{ReadOnlyInline}}</td>
-   <td><code>long</code> (<code>float</code>)</td>
-   <td>0.</td>
-  </tr>
-  <tr>
-   <td><code>data </code>{{ReadOnlyInline}}</td>
-   <td>{{domxref("DOMString")}} (string)</td>
-   <td>La chaîne de caractères originale éditée ou une chaîne vide.</td>
-  </tr>
-  <tr>
-   <td><code>locale </code>{{ReadOnlyInline}}</td>
-   <td>{{domxref("DOMString")}} (string)</td>
-   <td>Le code de la langue pour l'événement de composition si disponible; Sinon une chaîne vide.</td>
-  </tr>
- </tbody>
-</table>
+| Property                              | Type                                      | Description                                                                                |
+| ------------------------------------- | ----------------------------------------- | ------------------------------------------------------------------------------------------ |
+| `target` {{ReadOnlyInline}}     | {{domxref("EventTarget")}}      | Elément ayant le focus qui traite la composition. Nul si non-accessible.                   |
+| `type` {{ReadOnlyInline}}       | {{domxref("DOMString")}}          | Le type de l'événement.                                                                    |
+| `bubbles` {{ReadOnlyInline}}    | `boolean`                                 | Est-ce qu'il se propage?                                                                   |
+| `cancelable` {{ReadOnlyInline}} | `boolean`                                 | Peut-il être annulé?                                                                       |
+| `view` {{ReadOnlyInline}}       | {{domxref("WindowProxy")}}      | {{domxref("Document.defaultView")}} (fenêtre du document).                    |
+| `detail` {{ReadOnlyInline}}     | `long` (`float`)                          | 0.                                                                                         |
+| `data `{{ReadOnlyInline}}       | {{domxref("DOMString")}} (string) | La chaîne de caractères originale éditée ou une chaîne vide.                               |
+| `locale `{{ReadOnlyInline}}     | {{domxref("DOMString")}} (string) | Le code de la langue pour l'événement de composition si disponible; Sinon une chaîne vide. |
 
-<h2 id="Compatibilités_navigateur">Compatibilités navigateur</h2>
+## Compatibilités navigateur
 
-<p>{{Compat("api.Element.compositionupdate_event")}}</p>
+{{Compat("api.Element.compositionupdate_event")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{Event("compositionstart")}}</li>
- <li>{{Event("compositionupdate")}}</li>
- <li>{{Event("compositionend")}}</li>
-</ul>
+- {{Event("compositionstart")}}
+- {{Event("compositionupdate")}}
+- {{Event("compositionend")}}
diff --git a/files/fr/web/api/element/contextmenu_event/index.md b/files/fr/web/api/element/contextmenu_event/index.md
index 28b416e62e..96d593fcfb 100644
--- a/files/fr/web/api/element/contextmenu_event/index.md
+++ b/files/fr/web/api/element/contextmenu_event/index.md
@@ -10,95 +10,83 @@ tags:
   - contextemenu
 translation_of: Web/API/Element/contextmenu_event
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}
 
-<p>L'évènement <strong><code>contextmenu</code></strong> est déclenché à partir d'un élément lorsque l'utilisateur tente d'ouvrir un menu contextuel. Cet évènement est généralement déclenché par un clic-droit ou en utilisant la touche du menu contextuel.</p>
+L'évènement **`contextmenu`** est déclenché à partir d'un élément lorsque l'utilisateur tente d'ouvrir un menu contextuel. Cet évènement est généralement déclenché par un clic-droit ou en utilisant la touche du menu contextuel.
 
-<p>Dans ce cas, le menu contextuel est affiché dans le coin inférieur gauche de l'élément qui a le focus sauf si l'élément est un arbre, auquel cas le menu est affiché en bas à gauche de la ligne courante.</p>
+Dans ce cas, le menu contextuel est affiché dans le coin inférieur gauche de l'élément qui a le focus sauf si l'élément est un arbre, auquel cas le menu est affiché en bas à gauche de la ligne courante.
 
-<p>Tout évènement de clic-droit qui n'est pas désactivé (via {{domxref("Event.preventDefault", "preventDefault()")}}) entraînera le déclenchement d'un évènement <code>contextmenu</code> sur l'élément cible.</p>
+Tout évènement de clic-droit qui n'est pas désactivé (via {{domxref("Event.preventDefault", "preventDefault()")}}) entraînera le déclenchement d'un évènement `contextmenu` sur l'élément cible.
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th>Se propage/remonte dans le DOM</th>
-   <td>Oui</td>
-  </tr>
-  <tr>
-   <th>Annulable</th>
-   <td>Oui</td>
-  </tr>
-  <tr>
-   <th>Interface</th>
-   <td>{{DOMxRef("MouseEvent")}}</td>
-  </tr>
-  <tr>
-   <th>Propriété pour la gestion d'évènement</th>
-   <td>{{domxref("GlobalEventHandlers.oncontextmenu", "oncontextmenu")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th>Se propage/remonte dans le DOM</th>
+      <td>Oui</td>
+    </tr>
+    <tr>
+      <th>Annulable</th>
+      <td>Oui</td>
+    </tr>
+    <tr>
+      <th>Interface</th>
+      <td>{{DOMxRef("MouseEvent")}}</td>
+    </tr>
+    <tr>
+      <th>Propriété pour la gestion d'évènement</th>
+      <td>
+        {{domxref("GlobalEventHandlers.oncontextmenu", "oncontextmenu")}}
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans cet exemple, on annule l'action par défaut de l'évènement <code>contextmenu</code> avec <code>preventDefault()</code> lorsque l'évènement est déclenché depuis le premier paragraphe. Ainsi, rien ne se produira lorsqu'on utilisera un clic-droit sur le premier paragraphe tandis que le menu contextuel habituel s'affichera bien pour le second paragraphe.</p>
+Dans cet exemple, on annule l'action par défaut de l'évènement `contextmenu` avec `preventDefault()` lorsque l'évènement est déclenché depuis le premier paragraphe. Ainsi, rien ne se produira lorsqu'on utilisera un clic-droit sur le premier paragraphe tandis que le menu contextuel habituel s'affichera bien pour le second paragraphe.
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p id="noContextMenu"&gt;Le menu contextuel a été désactivé sur ce paragraphe.&lt;/p&gt;
-&lt;p&gt;Mais pas sur celui-ci.&lt;/p&gt;</pre>
+```html
+<p id="noContextMenu">Le menu contextuel a été désactivé sur ce paragraphe.</p>
+<p>Mais pas sur celui-ci.</p>
+```
 
-<h3 id="JavaScript">JavaScript</h3>
+### JavaScript
 
-<pre class="brush: js">noContext = document.getElementById('noContextMenu');
+```js
+noContext = document.getElementById('noContextMenu');
 
-noContext.addEventListener('contextmenu', e =&gt; {
+noContext.addEventListener('contextmenu', e => {
   e.preventDefault();
 });
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples")}}</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', 'indices.html#event-contextmenu', 'contextmenu')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples")}}
+
+## Spécifications
+
+| Spécification                                                                                            | État                             | Commentaires |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ |
+| {{ SpecName('HTML WHATWG', 'indices.html#event-contextmenu', 'contextmenu')}} | {{Spec2('HTML WHATWG')}} |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Element.contextmenu_event")}}
+
+## Voir aussi
+
+- [Une introduction aux évènements](/fr/docs/Apprendre/JavaScript/Building_blocks/Evènements)
+- D'autres évènements connexes
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Element.contextmenu_event")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Apprendre/JavaScript/Building_blocks/Evènements">Une introduction aux évènements</a></li>
- <li>D'autres évènements connexes
-  <ul>
-   <li><a href="/fr/docs/Web/API/Element/mousedown_event"><code>mousedown</code></a></li>
-   <li><a href="/fr/docs/Web/API/Element/mouseup_event"><code>mouseup</code></a></li>
-   <li><a href="/fr/docs/Web/API/Element/mousemove_event"><code>mousemove</code></a></li>
-   <li><a href="/fr/docs/Web/API/Element/mouseover_event"><code>mouseover</code></a></li>
-   <li><a href="/fr/docs/Web/API/Element/click_event"><code>click</code></a></li>
-   <li><a href="/fr/docs/Web/API/Element/dblclick_event"><code>dblclick</code></a></li>
-   <li><a href="/fr/docs/Web/API/Element/mouseout_event"><code>mouseout</code></a></li>
-   <li><a href="/fr/docs/Web/API/Element/mouseenter_event"><code>mouseenter</code></a></li>
-   <li><a href="/fr/docs/Web/API/Element/mouseleave_event"><code>mouseleave</code></a></li>
-  </ul>
- </li>
-</ul>
+  - [`mousedown`](/fr/docs/Web/API/Element/mousedown_event)
+  - [`mouseup`](/fr/docs/Web/API/Element/mouseup_event)
+  - [`mousemove`](/fr/docs/Web/API/Element/mousemove_event)
+  - [`mouseover`](/fr/docs/Web/API/Element/mouseover_event)
+  - [`click`](/fr/docs/Web/API/Element/click_event)
+  - [`dblclick`](/fr/docs/Web/API/Element/dblclick_event)
+  - [`mouseout`](/fr/docs/Web/API/Element/mouseout_event)
+  - [`mouseenter`](/fr/docs/Web/API/Element/mouseenter_event)
+  - [`mouseleave`](/fr/docs/Web/API/Element/mouseleave_event)
diff --git a/files/fr/web/api/element/copy_event/index.md b/files/fr/web/api/element/copy_event/index.md
index d4b370823a..042a046235 100644
--- a/files/fr/web/api/element/copy_event/index.md
+++ b/files/fr/web/api/element/copy_event/index.md
@@ -4,104 +4,63 @@ slug: Web/API/Element/copy_event
 translation_of: Web/API/Element/copy_event
 original_slug: Web/Events/copy
 ---
-<p>L'événement <strong>copy</strong> est déclenché lorsque l'utilisateur initie une copie par le biais de l'interface du navigateur (par exemple, Ctrl/Cmd+C ou "copier" du menu contextuel) et en réponse d'un appel de {{domxref("Document.execCommand", "document.execCommand('copy')")}} autorisé.</p>
+L'événement **copy** est déclenché lorsque l'utilisateur initie une copie par le biais de l'interface du navigateur (par exemple, Ctrl/Cmd+C ou "copier" du menu contextuel) et en réponse d'un appel de {{domxref("Document.execCommand", "document.execCommand('copy')")}} autorisé.
 
-<h2 id="Informations_générales">Informations générales</h2>
+## Informations générales
 
-<dl>
- <dt>Spécification</dt>
- <dd><a href="https://www.w3.org/TR/clipboard-apis/#the-copy-action">Clipboard</a></dd>
- <dt>Interface</dt>
- <dd>{{domxref("ClipboardEvent")}}</dd>
- <dt>Propagation</dt>
- <dd>Oui</dd>
- <dt>Annulable</dt>
- <dd>Oui</dd>
- <dt>Cible</dt>
- <dd>{{domxref("Element")}}: L'élément ayant le focus (pour les éléments {{domxref("HTMLElement.contentEditable", "contentEditable")}} - l'élément contenant le début de la sélection), ou l'élément {{HTMLElement("body")}}</dd>
- <dt>Action par défaut</dt>
- <dd>Voir ce-dessous</dd>
-</dl>
+- Spécification
+  - : [Clipboard](https://www.w3.org/TR/clipboard-apis/#the-copy-action)
+- Interface
+  - : {{domxref("ClipboardEvent")}}
+- Propagation
+  - : Oui
+- Annulable
+  - : Oui
+- Cible
+  - : {{domxref("Element")}}: L'élément ayant le focus (pour les éléments {{domxref("HTMLElement.contentEditable", "contentEditable")}} - l'élément contenant le début de la sélection), ou l'élément {{HTMLElement("body")}}
+- Action par défaut
+  - : Voir ce-dessous
 
-<p>Un gestionnaire de cet événement peut modifier l'objet {{domxref("ClipboardEvent.clipboardData")}} en appellant {{domxref("DataTransfer.setData", "setData(format, data)")}}:</p>
+Un gestionnaire de cet événement peut modifier l'objet {{domxref("ClipboardEvent.clipboardData")}} en appellant {{domxref("DataTransfer.setData", "setData(format, data)")}}:
 
-<pre class="brush: js">document.addEventListener('copy', function(e){
+```js
+document.addEventListener('copy', function(e){
     e.clipboardData.setData('text/plain', 'Hello, world!');
-    e.clipboardData.setData('text/html', '&lt;b&gt;Hello, world!&lt;/b&gt;');
+    e.clipboardData.setData('text/html', '<b>Hello, world!</b>');
     e.preventDefault(); // We want our data, not data from any selection, to be written to the clipboard
-});</pre>
+});
+```
 
-<p>Un gestionnaire de cet événement ne peut pas lire les données du presse-papiers en utilisant {{domxref("DataTransfer.getData", "clipboardData.getData()")}}.</p>
+Un gestionnaire de cet événement ne peut pas lire les données du presse-papiers en utilisant {{domxref("DataTransfer.getData", "clipboardData.getData()")}}.
 
-<p>L'action par défaut de l'événement dépend de la source de celui-ci et du comportement du gestionnaire:</p>
+L'action par défaut de l'événement dépend de la source de celui-ci et du comportement du gestionnaire:
 
-<ul>
- <li>Un événement de copie <a href="/fr/docs/Web/Guide/Events/Creating_and_triggering_events">synthétique</a> n'a pas d'action par défaut;</li>
- <li>Si l'événement n'a pas été annulé: Copie de la sélection (s'il y a) dans le presse-papiers;</li>
- <li>Si le gestionnaire a annulé l'événement et appelé setData(): Copie le contenu de <em>clipboardData</em> de {{domxref("ClipboardEvent")}};</li>
- <li>Si le gestionnaire a annulé l'événement sans appelé setData(): Aucune action.</li>
-</ul>
+- Un événement de copie [synthétique](/fr/docs/Web/Guide/Events/Creating_and_triggering_events) n'a pas d'action par défaut;
+- Si l'événement n'a pas été annulé: Copie de la sélection (s'il y a) dans le presse-papiers;
+- Si le gestionnaire a annulé l'événement et appelé setData(): Copie le contenu de _clipboardData_ de {{domxref("ClipboardEvent")}};
+- Si le gestionnaire a annulé l'événement sans appelé setData(): Aucune action.
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Property</th>
-   <th scope="col">Type</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>target</code> {{readonlyInline}}</td>
-   <td>{{domxref("EventTarget")}}</td>
-   <td>The event target (the topmost target in the DOM tree).</td>
-  </tr>
-  <tr>
-   <td><code>type</code> {{readonlyInline}}</td>
-   <td>{{domxref("DOMString")}}</td>
-   <td>The type of event.</td>
-  </tr>
-  <tr>
-   <td><code>bubbles</code> {{readonlyInline}}</td>
-   <td>{{jsxref("Boolean")}}</td>
-   <td>Whether the event normally bubbles or not.</td>
-  </tr>
-  <tr>
-   <td><code>cancelable</code> {{readonlyInline}}</td>
-   <td>{{jsxref("Boolean")}}</td>
-   <td>Whether the event is cancellable or not.</td>
-  </tr>
- </tbody>
-</table>
+| Property                              | Type                                 | Description                                            |
+| ------------------------------------- | ------------------------------------ | ------------------------------------------------------ |
+| `target` {{readonlyInline}}     | {{domxref("EventTarget")}} | The event target (the topmost target in the DOM tree). |
+| `type` {{readonlyInline}}       | {{domxref("DOMString")}}     | The type of event.                                     |
+| `bubbles` {{readonlyInline}}    | {{jsxref("Boolean")}}         | Whether the event normally bubbles or not.             |
+| `cancelable` {{readonlyInline}} | {{jsxref("Boolean")}}         | Whether the event is cancellable or not.               |
 
-<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('Clipboard API', '#clipboard-event-copy')}}</td>
-      <td>{{Spec2('Clipboard API')}}</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                            | Statut                               |
+| ------------------------------------------------------------------------ | ------------------------------------ |
+| {{SpecName('Clipboard API', '#clipboard-event-copy')}} | {{Spec2('Clipboard API')}} |
 
-<h2 id="Browser_compatibility">Compatibilités navigateur</h2>
+## Compatibilités navigateur
 
-<p>{{Compat("api.Element.copy_event")}}</p>
+{{Compat("api.Element.copy_event")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>Événements relatifs : {{domxref("Element/cut_event", "cut")}}, {{domxref("Element/paste_event", "paste")}}</li>
-  <li>Cet événement sur {{domxref("Document")}} cible : {{domxref("Document/copy_event", "copy")}}</li>
-  <li>Cet événement sur {{domxref("Window")}} cible : {{domxref("Window/copy_event", "copy")}}</li>
-</ul>
-   
\ No newline at end of file
+- Événements relatifs : {{domxref("Element/cut_event", "cut")}}, {{domxref("Element/paste_event", "paste")}}
+- Cet événement sur {{domxref("Document")}} cible : {{domxref("Document/copy_event", "copy")}}
+- Cet événement sur {{domxref("Window")}} cible : {{domxref("Window/copy_event", "copy")}}
diff --git a/files/fr/web/api/element/dblclick_event/index.md b/files/fr/web/api/element/dblclick_event/index.md
index 9f82b49bd9..7c17db5238 100644
--- a/files/fr/web/api/element/dblclick_event/index.md
+++ b/files/fr/web/api/element/dblclick_event/index.md
@@ -10,55 +10,62 @@ tags:
   - dblclick
 translation_of: Web/API/Element/dblclick_event
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}
 
-<p>L'évènement <strong><code>dblclick</code></strong> se déclenche à partir d'un élément lorsqu'un bouton d'un dispositif de pointage est double-cliqué (c'est-à-dire qu'on clique deux fois sur le méme élément dans un temps très court).</p>
+L'évènement **`dblclick`** se déclenche à partir d'un élément lorsqu'un bouton d'un dispositif de pointage est double-cliqué (c'est-à-dire qu'on clique deux fois sur le méme élément dans un temps très court).
 
-<p><code>dblclick</code> se déclenche après deux évènements {{domxref("Element/click_event", "click")}} (et, par extension, après deux paires d'évènements {{domxref("Element.mousedown_event", "mousedown")}} et {{domxref("Element.mouseup_event", "mouseup")}}).</p>
+`dblclick` se déclenche après deux évènements {{domxref("Element/click_event", "click")}} (et, par extension, après deux paires d'évènements {{domxref("Element.mousedown_event", "mousedown")}} et {{domxref("Element.mouseup_event", "mouseup")}}).
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row">Se propage/remonte dans le DOM</th>
-   <td>Oui</td>
-  </tr>
-  <tr>
-   <th scope="row">Annulable</th>
-   <td>Oui</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface</th>
-   <td>{{domxref("MouseEvent")}}</td>
-  </tr>
-  <tr>
-   <th scope="row">Propriété pour la gestion d'évènements</th>
-   <td>{{domxref("GlobalEventHandlers.ondblclick", "ondblclick")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Se propage/remonte dans le DOM</th>
+      <td>Oui</td>
+    </tr>
+    <tr>
+      <th scope="row">Annulable</th>
+      <td>Oui</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface</th>
+      <td>{{domxref("MouseEvent")}}</td>
+    </tr>
+    <tr>
+      <th scope="row">Propriété pour la gestion d'évènements</th>
+      <td>
+        {{domxref("GlobalEventHandlers.ondblclick", "ondblclick")}}
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans cet exemple, on modifie la taille d'une tuile lorsqu'on double-clique dessus.</p>
+Dans cet exemple, on modifie la taille d'une tuile lorsqu'on double-clique dessus.
 
-<h3 id="JavaScript">JavaScript</h3>
+### JavaScript
 
-<pre class="brush: js">const card = document.querySelector('aside');
+```js
+const card = document.querySelector('aside');
 
 card.addEventListener('dblclick', function (e) {
   card.classList.toggle('large');
-});</pre>
+});
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;aside&gt;
-  &lt;h3&gt;Une tuile&lt;/h3&gt;
-  &lt;p&gt;Double-cliquer pour redimensionner cet objet.&lt;/p&gt;
-&lt;/aside&gt;</pre>
+```html
+<aside>
+  <h3>Une tuile</h3>
+  <p>Double-cliquer pour redimensionner cet objet.</p>
+</aside>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">aside {
+```css
+aside {
   background: #fe9;
   border-radius: 1em;
   display: inline-block;
@@ -70,50 +77,35 @@ card.addEventListener('dblclick', function (e) {
 
 .large {
   transform: scale(1.3);
-}</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples", 700, 200)}}</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>
-  </tr>
-  <tr>
-   <td>{{SpecName('UI Events', '#event-type-dblclick', 'dblclick')}}</td>
-   <td>{{Spec2('UI Events')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM3 Events', '#event-type-dblclick', 'dblclick')}}</td>
-   <td>{{Spec2('DOM3 Events')}}</td>
-  </tr>
- </tbody>
-</table>
+}
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples", 700, 200)}}
+
+## Spécifications
+
+| Spécification                                                                        | État                             |
+| ------------------------------------------------------------------------------------ | -------------------------------- |
+| {{SpecName('UI Events', '#event-type-dblclick', 'dblclick')}}     | {{Spec2('UI Events')}}     |
+| {{SpecName('DOM3 Events', '#event-type-dblclick', 'dblclick')}} | {{Spec2('DOM3 Events')}} |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Element.dblclick_event")}}
+
+## Voir aussi
+
+- [Une introduction aux évènements](/fr/docs/Apprendre/JavaScript/Building_blocks/Evènements)
+- D'autres évènements connexes
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Element.dblclick_event")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Apprendre/JavaScript/Building_blocks/Evènements">Une introduction aux évènements</a></li>
- <li>D'autres évènements connexes
-  <ul>
-   <li><a href="/fr/docs/Web/API/Element/mousedown_event"><code>mousedown</code></a></li>
-   <li><a href="/fr/docs/Web/API/Element/mouseup_event"><code>mouseup</code></a></li>
-   <li><a href="/fr/docs/Web/API/Element/mousemove_event"><code>mousemove</code></a></li>
-   <li><a href="/fr/docs/Web/API/Element/mouseover_event">mouseover</a></li>
-   <li><a href="/fr/docs/Web/API/Element/click_event"><code>click</code></a></li>
-   <li><a href="/fr/docs/Web/API/Element/mouseout_event"><code>mouseout</code></a></li>
-   <li><a href="/fr/docs/Web/API/Element/mouseenter_event"><code>mouseenter</code></a></li>
-   <li><a href="/fr/docs/Web/API/Element/mouseleave_event"><code>mouseleave</code></a></li>
-   <li><a href="/fr/docs/Web/API/Element/contextmenu_event"><code>contextmenu</code></a></li>
-  </ul>
- </li>
-</ul>
+  - [`mousedown`](/fr/docs/Web/API/Element/mousedown_event)
+  - [`mouseup`](/fr/docs/Web/API/Element/mouseup_event)
+  - [`mousemove`](/fr/docs/Web/API/Element/mousemove_event)
+  - [mouseover](/fr/docs/Web/API/Element/mouseover_event)
+  - [`click`](/fr/docs/Web/API/Element/click_event)
+  - [`mouseout`](/fr/docs/Web/API/Element/mouseout_event)
+  - [`mouseenter`](/fr/docs/Web/API/Element/mouseenter_event)
+  - [`mouseleave`](/fr/docs/Web/API/Element/mouseleave_event)
+  - [`contextmenu`](/fr/docs/Web/API/Element/contextmenu_event)
diff --git a/files/fr/web/api/element/error_event/index.md b/files/fr/web/api/element/error_event/index.md
index 8c17b86401..1f0a577102 100644
--- a/files/fr/web/api/element/error_event/index.md
+++ b/files/fr/web/api/element/error_event/index.md
@@ -10,82 +10,45 @@ tags:
 translation_of: Web/API/Element/error_event
 original_slug: Web/Events/error
 ---
-<p>L'événement <strong>error</strong> <em>(erreur)</em> est déclenché lorsqu'une ressource n'a pas pu être chargée ; les circonstances exactes varient, ce nom étant utilisé par une grande variété d'API.</p>
-
-<h2 id="Informations_générales">Informations générales</h2>
-
-<dl>
- <dt>Spécification</dt>
- <dd><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-error">DOM L3</a></dd>
- <dt>Interface</dt>
- <dd>{{domxref("UIEvent")}} si généré depuis l'interface utilisateur, {{domxref("MediaRecorderErrorEvent")}} si généré par <a href="/en-US/docs/Web/API/MediaStream_Recording_API">MediaStream Recording API</a>  et sinon {{domxref("Event")}}.</dd>
- <dt>Propagation</dt>
- <dd>Non</dd>
- <dt>Annulable</dt>
- <dd>Non</dd>
- <dt>Cible</dt>
- <dd>{{domxref("Element")}}</dd>
- <dt>Action par défaut</dt>
- <dd>Aucune</dd>
-</dl>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Property</th>
-   <th scope="col">Type</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>target</code> {{readonlyInline}}</td>
-   <td><a href="/en-US/docs/Web/API/EventTarget"><code>EventTarget</code></a></td>
-   <td>The event target (the topmost target in the DOM tree).</td>
-  </tr>
-  <tr>
-   <td><code>type</code> {{readonlyInline}}</td>
-   <td><a href="/en-US/docs/Web/API/DOMString"><code>DOMString</code></a></td>
-   <td>The type of event.</td>
-  </tr>
-  <tr>
-   <td><code>bubbles</code> {{readonlyInline}}</td>
-   <td><a href="/en-US/docs/Web/API/Boolean"><code>Boolean</code></a></td>
-   <td>Whether the event normally bubbles or not.</td>
-  </tr>
-  <tr>
-   <td><code>cancelable</code> {{readonlyInline}}</td>
-   <td><a href="/en-US/docs/Web/API/Boolean"><code>Boolean</code></a></td>
-   <td>Whether the event is cancellable or not.</td>
-  </tr>
-  <tr>
-   <td><code>view</code> {{readonlyInline}}</td>
-   <td><a href="/en-US/docs/Web/API/WindowProxy" rel="nofollow"><code>WindowProxy</code></a></td>
-   <td><a href="/en-US/docs/Web/API/Document/defaultView"><code>document.defaultView</code></a> (<code>window</code> of the document)</td>
-  </tr>
-  <tr>
-   <td><code>detail</code> {{readonlyInline}}</td>
-   <td><code>long</code> (<code>float</code>)</td>
-   <td>0.</td>
-  </tr>
- </tbody>
-</table>
-
-<h3 id="Pour_des_évènements_MediaStream_Recording">Pour des évènements MediaStream Recording</h3>
-
-<p>Ces évènements sont d'un type {{domxref("MediaRecorderErrorEvent")}}.</p>
-
-<p>{{page("/en-US/docs/Web/API/MediaRecorderErrorEvent", "Properties")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<dl>
- <dt>{{domxref("GlobalEventHandlers.onerror")}}</dt>
- <dd>Évènements envoyés à {{domxref("Window.onerror")}} et à {{domxref("Element.onerror")}}</dd>
- <dt>{{domxref("HTMLMediaElement.onerror")}}</dt>
- <dd>Évènements envoyés à {{domxref("HTMLMediaElement")}} incluant {{HTMLElement("audio")}}   et {{HTMLElement("video")}} .</dd>
- <dt>{{domxref("MediaRecorder.onerror")}}</dt>
- <dd>Évènements envoyés à {{domxref("MediaRecorder.onerror")}} , d'un type {{domxref("MediaRecorderErrorEvent")}}</dd>
-</dl>
+L'événement **error** _(erreur)_ est déclenché lorsqu'une ressource n'a pas pu être chargée ; les circonstances exactes varient, ce nom étant utilisé par une grande variété d'API.
+
+## Informations générales
+
+- Spécification
+  - : [DOM L3](http://www.w3.org/TR/DOM-Level-3-Events/#event-type-error)
+- Interface
+  - : {{domxref("UIEvent")}} si généré depuis l'interface utilisateur, {{domxref("MediaRecorderErrorEvent")}} si généré par [MediaStream Recording API](/en-US/docs/Web/API/MediaStream_Recording_API)  et sinon {{domxref("Event")}}.
+- Propagation
+  - : Non
+- Annulable
+  - : Non
+- Cible
+  - : {{domxref("Element")}}
+- Action par défaut
+  - : Aucune
+
+## Propriétés
+
+| Property                              | Type                                             | Description                                                                                   |
+| ------------------------------------- | ------------------------------------------------ | --------------------------------------------------------------------------------------------- |
+| `target` {{readonlyInline}}     | [`EventTarget`](/en-US/docs/Web/API/EventTarget) | The event target (the topmost target in the DOM tree).                                        |
+| `type` {{readonlyInline}}       | [`DOMString`](/en-US/docs/Web/API/DOMString)     | The type of event.                                                                            |
+| `bubbles` {{readonlyInline}}    | [`Boolean`](/en-US/docs/Web/API/Boolean)         | Whether the event normally bubbles or not.                                                    |
+| `cancelable` {{readonlyInline}} | [`Boolean`](/en-US/docs/Web/API/Boolean)         | Whether the event is cancellable or not.                                                      |
+| `view` {{readonlyInline}}       | [`WindowProxy`](/en-US/docs/Web/API/WindowProxy) | [`document.defaultView`](/en-US/docs/Web/API/Document/defaultView) (`window` of the document) |
+| `detail` {{readonlyInline}}     | `long` (`float`)                                 | 0.                                                                                            |
+
+### Pour des évènements MediaStream Recording
+
+Ces évènements sont d'un type {{domxref("MediaRecorderErrorEvent")}}.
+
+{{page("/en-US/docs/Web/API/MediaRecorderErrorEvent", "Properties")}}
+
+## Voir aussi
+
+- {{domxref("GlobalEventHandlers.onerror")}}
+  - : Évènements envoyés à {{domxref("Window.onerror")}} et à {{domxref("Element.onerror")}}
+- {{domxref("HTMLMediaElement.onerror")}}
+  - : Évènements envoyés à {{domxref("HTMLMediaElement")}} incluant {{HTMLElement("audio")}}   et {{HTMLElement("video")}} .
+- {{domxref("MediaRecorder.onerror")}}
+  - : Évènements envoyés à {{domxref("MediaRecorder.onerror")}} , d'un type {{domxref("MediaRecorderErrorEvent")}}
diff --git a/files/fr/web/api/element/focusin_event/index.md b/files/fr/web/api/element/focusin_event/index.md
index 4930d87a2e..6a6a6f66de 100644
--- a/files/fr/web/api/element/focusin_event/index.md
+++ b/files/fr/web/api/element/focusin_event/index.md
@@ -4,73 +4,40 @@ slug: Web/API/Element/focusin_event
 translation_of: Web/API/Element/focusin_event
 original_slug: Web/Events/focusin
 ---
-<p>L'événement <strong>focusin</strong> est déclenché lorsqu'un élément est sur le point de recevoir le focus. La principale différence avec <a href="/fr/docs/Mozilla_event_reference/focus_%28event%29"><code>focus</code></a> est que <strong>focusin</strong> se propage.</p>
-
-<h2 id="Informations_générales">Informations générales</h2>
-
-<dl>
- <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
- <dd style="margin: 0 0 0 120px;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-focusIn">DOM L3</a></dd>
- <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
- <dd style="margin: 0 0 0 120px;">{{domxref("FocusEvent")}}</dd>
- <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
- <dd style="margin: 0 0 0 120px;">Oui</dd>
- <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
- <dd style="margin: 0 0 0 120px;">Non</dd>
- <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
- <dd style="margin: 0 0 0 120px;">{{domxref("Element")}}</dd>
- <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
- <dd style="margin: 0 0 0 120px;">Aucune</dd>
-</dl>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Property</th>
-   <th scope="col">Type</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>target</code> {{readonlyInline}}</td>
-   <td>{{domxref("EventTarget")}}</td>
-   <td>Event target losing focus.</td>
-  </tr>
-  <tr>
-   <td><code>type</code> {{readonlyInline}}</td>
-   <td>{{domxref("DOMString")}}</td>
-   <td>The type of event.</td>
-  </tr>
-  <tr>
-   <td><code>bubbles</code> {{readonlyInline}}</td>
-   <td>{{jsxref("Boolean")}}</td>
-   <td>Whether the event normally bubbles or not.</td>
-  </tr>
-  <tr>
-   <td><code>cancelable</code> {{readonlyInline}}</td>
-   <td>{{jsxref("Boolean")}}</td>
-   <td>Whether the event is cancellable or not.</td>
-  </tr>
-  <tr>
-   <td><code>relatedTarget</code> {{readonlyInline}}</td>
-   <td>{{domxref("EventTarget")}} (DOM element)</td>
-   <td>Event target receiving focus.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_navigateur">Compatibilité navigateur</h2>
-
-<p>{{Compat("api.Element.focusin_event")}}</p>
-
-<h2 id="Evénements_liés">Evénements liés</h2>
-
-<ul>
- <li>{{event("focus")}}</li>
- <li>{{event("blur")}}</li>
- <li>{{event("focusin")}}</li>
- <li>{{event("focusout")}}</li>
-</ul>
+L'événement **focusin** est déclenché lorsqu'un élément est sur le point de recevoir le focus. La principale différence avec [`focus`](/fr/docs/Mozilla_event_reference/focus_%28event%29) est que **focusin** se propage.
+
+## Informations générales
+
+- Spécification
+  - : [DOM L3](http://www.w3.org/TR/DOM-Level-3-Events/#event-type-focusIn)
+- Interface
+  - : {{domxref("FocusEvent")}}
+- Propagation
+  - : Oui
+- Annulable
+  - : Non
+- Cible
+  - : {{domxref("Element")}}
+- Action par défaut
+  - : Aucune
+
+## Propriétés
+
+| Property                                 | Type                                               | Description                                |
+| ---------------------------------------- | -------------------------------------------------- | ------------------------------------------ |
+| `target` {{readonlyInline}}        | {{domxref("EventTarget")}}               | Event target losing focus.                 |
+| `type` {{readonlyInline}}          | {{domxref("DOMString")}}                   | The type of event.                         |
+| `bubbles` {{readonlyInline}}       | {{jsxref("Boolean")}}                       | Whether the event normally bubbles or not. |
+| `cancelable` {{readonlyInline}}    | {{jsxref("Boolean")}}                       | Whether the event is cancellable or not.   |
+| `relatedTarget` {{readonlyInline}} | {{domxref("EventTarget")}} (DOM element) | Event target receiving focus.              |
+
+## Compatibilité navigateur
+
+{{Compat("api.Element.focusin_event")}}
+
+## Evénements liés
+
+- {{event("focus")}}
+- {{event("blur")}}
+- {{event("focusin")}}
+- {{event("focusout")}}
diff --git a/files/fr/web/api/element/focusout_event/index.md b/files/fr/web/api/element/focusout_event/index.md
index 382060c404..366b9dbfbf 100644
--- a/files/fr/web/api/element/focusout_event/index.md
+++ b/files/fr/web/api/element/focusout_event/index.md
@@ -4,73 +4,40 @@ slug: Web/API/Element/focusout_event
 translation_of: Web/API/Element/focusout_event
 original_slug: Web/Events/focusout
 ---
-<p>L'évènement <code><strong>focusout</strong> </code>est déclenché lorsqu'un élément du DOM est sur le point de perdre le focus. La différence principale entre cet événement et <a href="/en-US/docs/Mozilla_event_reference/blur_(event)">blur</a> est que ce dernier ne se propage pas.</p>
-
-<h2 id="Informations_générales">Informations générales</h2>
-
-<dl>
- <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
- <dd style="margin: 0 0 0 120px;"><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-focusout">DOM L3</a></dd>
- <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
- <dd style="margin: 0 0 0 120px;">{{domxref("FocusEvent")}}</dd>
- <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
- <dd style="margin: 0 0 0 120px;">Oui</dd>
- <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
- <dd style="margin: 0 0 0 120px;">Non</dd>
- <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
- <dd style="margin: 0 0 0 120px;">{{domxref("Element")}}</dd>
- <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
- <dd style="margin: 0 0 0 120px;">Aucune</dd>
-</dl>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Property</th>
-   <th scope="col">Type</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>target</code> {{readonlyInline}}</td>
-   <td>{{domxref("EventTarget")}}</td>
-   <td>Event target losing focus.</td>
-  </tr>
-  <tr>
-   <td><code>type</code> {{readonlyInline}}</td>
-   <td>{{domxref("DOMString")}}</td>
-   <td>The type of event.</td>
-  </tr>
-  <tr>
-   <td><code>bubbles</code> {{readonlyInline}}</td>
-   <td>{{jsxref("Boolean")}}</td>
-   <td>Whether the event normally bubbles or not.</td>
-  </tr>
-  <tr>
-   <td><code>cancelable</code> {{readonlyInline}}</td>
-   <td>{{jsxref("Boolean")}}</td>
-   <td>Whether the event is cancellable or not.</td>
-  </tr>
-  <tr>
-   <td><code>relatedTarget</code> {{readonlyInline}}</td>
-   <td>{{domxref("EventTarget")}} (DOM element)</td>
-   <td>Event target receiving focus.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Element.focusout_event")}}</p>
-
-<h2 id="Evénements_liés">Evénements liés</h2>
-
-<ul>
- <li>{{event("focus")}}</li>
- <li>{{event("blur")}}</li>
- <li>{{event("focusin")}}</li>
- <li>{{event("focusout")}}</li>
-</ul>
+L'évènement `focusout `est déclenché lorsqu'un élément du DOM est sur le point de perdre le focus. La différence principale entre cet événement et [blur](</en-US/docs/Mozilla_event_reference/blur_(event)>) est que ce dernier ne se propage pas.
+
+## Informations générales
+
+- Spécification
+  - : [DOM L3](http://www.w3.org/TR/DOM-Level-3-Events/#event-type-focusout)
+- Interface
+  - : {{domxref("FocusEvent")}}
+- Propagation
+  - : Oui
+- Annulable
+  - : Non
+- Cible
+  - : {{domxref("Element")}}
+- Action par défaut
+  - : Aucune
+
+## Propriétés
+
+| Property                                 | Type                                               | Description                                |
+| ---------------------------------------- | -------------------------------------------------- | ------------------------------------------ |
+| `target` {{readonlyInline}}        | {{domxref("EventTarget")}}               | Event target losing focus.                 |
+| `type` {{readonlyInline}}          | {{domxref("DOMString")}}                   | The type of event.                         |
+| `bubbles` {{readonlyInline}}       | {{jsxref("Boolean")}}                       | Whether the event normally bubbles or not. |
+| `cancelable` {{readonlyInline}}    | {{jsxref("Boolean")}}                       | Whether the event is cancellable or not.   |
+| `relatedTarget` {{readonlyInline}} | {{domxref("EventTarget")}} (DOM element) | Event target receiving focus.              |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Element.focusout_event")}}
+
+## Evénements liés
+
+- {{event("focus")}}
+- {{event("blur")}}
+- {{event("focusin")}}
+- {{event("focusout")}}
diff --git a/files/fr/web/api/element/getattribute/index.md b/files/fr/web/api/element/getattribute/index.md
index e0aa50f459..410b54fe7a 100644
--- a/files/fr/web/api/element/getattribute/index.md
+++ b/files/fr/web/api/element/getattribute/index.md
@@ -10,76 +10,78 @@ tags:
   - Reference
 translation_of: Web/API/Element/getAttribute
 ---
-<p>{{APIRef("DOM")}}</p>
+{{APIRef("DOM")}}
 
-<p><code>getAttribute</code> renvoie la valeur d'un attribut donné de l'élément spécifié. Si l'attribut n'existe pas, la valeur renvoyée sera soit <code>null</code> soit <code>""</code> (une chaine vide) ; voir {{ Anch("Notes") }} pour plus de détails.</p>
+`getAttribute` renvoie la valeur d'un attribut donné de l'élément spécifié. Si l'attribut n'existe pas, la valeur renvoyée sera soit `null` soit `""` (une chaine vide) ; voir {{ Anch("Notes") }} pour plus de détails.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="eval"><em>let attribut</em> = element.getAttribute(<em>nom_attribut</em>)
-</pre>
+    let attribut = element.getAttribute(nom_attribut)
 
-<p>où</p>
+où
 
-<ul>
- <li><code><em>attribut</em></code> est une chaine contenant la valeur de l'attribut <code><em>nom_attribut</em></code>.</li>
- <li><code><em>nom_attribut</em></code> est le nom de l'attribut dont on désire connaitre la valeur.</li>
-</ul>
+- `attribut` est une chaine contenant la valeur de l'attribut `nom_attribut`.
+- `nom_attribut` est le nom de l'attribut dont on désire connaitre la valeur.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Soit l'HTML :</p>
+Soit l'HTML :
 
-<pre class="notranslate">const div1 = document.getElementById("div1");</pre>
+    const div1 = document.getElementById("div1");
 
-<p>Exemple de JavaScript :</p>
+Exemple de JavaScript :
 
-<pre class="eval">const div1 = document.getElementById("div1");
-//=&gt; &lt;div id="div1"&gt;Hi Champ!&lt;/div&gt;
+    const div1 = document.getElementById("div1");
+    //=> <div id="div1">Hi Champ!</div>
 
-const attributID = div1.getAttribute("id");
-//=&gt; "div1"
+    const attributID = div1.getAttribute("id");
+    //=> "div1"
 
-cont alignement = div1.getAttribute("align");
-//=&gt; null
-</pre>
+    cont alignement = div1.getAttribute("align");
+    //=> null
 
-<h2 id="Notes">Description</h2>
+## Description
 
-<h3 id="Sensibilité_à_la_casse">Sensibilité à la casse</h3>
+### Sensibilité à la casse
 
-<p>Le paramètre <code>nom_attribut</code> est généralement sensible à la casse, mais ne l'est pas lorsqu'il est utilisé sur des éléments HTML.</p>
+Le paramètre `nom_attribut` est généralement sensible à la casse, mais ne l'est pas lorsqu'il est utilisé sur des éléments HTML.
 
-<h3 id="Attributs_inexistants">Attributs inexistants</h3>
+### Attributs inexistants
 
-<p>À peu près tous les navigateurs (Firefox, Internet Explorer, Opera, Safari, Konqueror et iCab, sans que cette liste soit exhaustive) renvoient <code>null</code> lorsque l'attribut demandé n'existe pas sur l'élément spécifié. La spécification DOM indique cependant que la valeur de retour correcte dans ce cas est en fait la chaine vide <code>""</code>, et certaines implémentation DOM auront ce comportement. Par conséquent, vous devriez utiliser {{domxref("element.hasAttribute()")}} pour vérifier l'existence d'un attribut avant d'appeler <code>getAttribute()</code> s'il est possible que l'attribut n'existe pas sur l'élément spécifié.</p>
+À peu près tous les navigateurs (Firefox, Internet Explorer, Opera, Safari, Konqueror et iCab, sans que cette liste soit exhaustive) renvoient `null` lorsque l'attribut demandé n'existe pas sur l'élément spécifié. La spécification DOM indique cependant que la valeur de retour correcte dans ce cas est en fait la chaine vide `""`, et certaines implémentation DOM auront ce comportement. Par conséquent, vous devriez utiliser {{domxref("element.hasAttribute()")}} pour vérifier l'existence d'un attribut avant d'appeler `getAttribute()` s'il est possible que l'attribut n'existe pas sur l'élément spécifié.
 
-<h3 id="Récupération_de_nonces">Récupération de nonces</h3>
+### Récupération de nonces
 
-<p>Pour des raisons de sécurité, les <em>nonces</em> <a href="/fr/docs/Web/HTTP/CSP">CSP</a> des sources autres que des scripts, telles que les feuilles de style CSS, et les appels <code>.getAttribute("nonce")</code> sont interdits.</p>
+Pour des raisons de sécurité, les _nonces_ [CSP](/fr/docs/Web/HTTP/CSP) des sources autres que des scripts, telles que les feuilles de style CSS, et les appels `.getAttribute("nonce")` sont interdits.
 
-<pre class="brush: js example-bad">let nonce = script.getAttribute("nonce");
-// renvoie une chaine vide</pre>
+```js example-bad
+let nonce = script.getAttribute("nonce");
+// renvoie une chaine vide
+```
 
-<p>Plutôt que de tenter de lire le <em>nonce</em> via l’attribut, utilisez la propriété {{domxref("HTMLOrForeignElement/nonce", "nonce")}} :</p>
+Plutôt que de tenter de lire le _nonce_ via l’attribut, utilisez la propriété {{domxref("HTMLOrForeignElement/nonce", "nonce")}} :
 
-<pre class="brush: js">let nonce = script.nonce;</pre>
+```js
+let nonce = script.nonce;
+```
 
-<h2 id="Sp.C3.A9cification">Spécifications</h2>
+## Spécifications
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <td><strong>Spécification</strong></td>
-   <td><strong>État</strong></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG','#dom-element-getattribute','getAttribute()')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <td><strong>Spécification</strong></td>
+      <td><strong>État</strong></td>
+    </tr>
+    <tr>
+      <td>
+        {{SpecName('DOM WHATWG','#dom-element-getattribute','getAttribute()')}}
+      </td>
+      <td>{{Spec2('DOM WHATWG')}}</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Sp.C3.A9cification">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<div>{{Compat("api.Element.getAttribute")}}</div>
+{{Compat("api.Element.getAttribute")}}
diff --git a/files/fr/web/api/element/getattributenames/index.md b/files/fr/web/api/element/getattributenames/index.md
index d99f4465fe..87f96635a6 100644
--- a/files/fr/web/api/element/getattributenames/index.md
+++ b/files/fr/web/api/element/getattributenames/index.md
@@ -9,58 +9,49 @@ tags:
   - Méthodes
 translation_of: Web/API/Element/getAttributeNames
 ---
-<p>{{APIRef("DOM")}}</p>
+{{APIRef("DOM")}}
 
-<p><code>Element.getAttributeNames()</code> renvoie les noms des attributs de l'élément sous la forme d'un {{jsxref("Array")}} (<em>tableau</em>) de chaînes de caractères. Si l'élément n'a pas d'attributs, il retourne un tableau vide.</p>
+`Element.getAttributeNames()` renvoie les noms des attributs de l'élément sous la forme d'un {{jsxref("Array")}} (_tableau_) de chaînes de caractères. Si l'élément n'a pas d'attributs, il retourne un tableau vide.
 
-<p>L'utilisation de <code>getAttributeNames()</code> complété par {{domxref("Element.getAttribute","getAttribute()")}}, est une alternative efficiente et performante pour l'accès à {{domxref("Element.attributes")}}.</p>
+L'utilisation de `getAttributeNames()` complété par {{domxref("Element.getAttribute","getAttribute()")}}, est une alternative efficiente et performante pour l'accès à {{domxref("Element.attributes")}}.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>let attributeNames</em> = element.getAttributeNames();
-</pre>
+    let attributeNames = element.getAttributeNames();
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush:js">// Itérer sur les attributs de l'élément
+```js
+// Itérer sur les attributs de l'élément
 for(let name of element.getAttributeNames())
 {
 	let value = element.getAttribute(name);
 	console.log(name, value);
 }
-</pre>
+```
 
-<h2 id="Polyfill">Polyfill</h2>
+## Polyfill
 
-<pre class="brush: html">if (Element.prototype.getAttributeNames == undefined) {
+```html
+if (Element.prototype.getAttributeNames == undefined) {
   Element.prototype.getAttributeNames = function () {
     var attributes = this.attributes;
     var length = attributes.length;
     var result = new Array(length);
-    for (var i = 0; i &lt; length; i++) {
+    for (var i = 0; i < length; i++) {
       result[i] = attributes[i].name;
     }
     return result;
   };
-}</pre>
+}
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName("DOM WHATWG", "#dom-element-getattributenames", "Element.getAttributeNames")}}</td>
-   <td>{{Spec2("DOM WHATWG")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                            | Statut                           | Commentaire          |
+| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName("DOM WHATWG", "#dom-element-getattributenames", "Element.getAttributeNames")}} | {{Spec2("DOM WHATWG")}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Element.getAttributeNames")}}</p>
+{{Compat("api.Element.getAttributeNames")}}
diff --git a/files/fr/web/api/element/getattributenode/index.md b/files/fr/web/api/element/getattributenode/index.md
index 3fd3fd508d..f805ace861 100644
--- a/files/fr/web/api/element/getattributenode/index.md
+++ b/files/fr/web/api/element/getattributenode/index.md
@@ -10,42 +10,39 @@ tags:
   - Noeud
 translation_of: Web/API/Element/getAttributeNode
 ---
-<p>{{ APIRef("DOM") }}</p>
+{{ APIRef("DOM") }}
 
-<h2 id="R.C3.A9sum.C3.A9">Résumé</h2>
+## Résumé
 
-<p>Renvoie le nœud d'attribut spécifié pour l'élément courant, en tant que noeud <code>Attr</code>.</p>
+Renvoie le nœud d'attribut spécifié pour l'élément courant, en tant que noeud `Attr`.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">var attrNode = element.getAttributeNode(attrName);</pre>
+```js
+var attrNode = element.getAttributeNode(attrName);
+```
 
-<ul>
- <li><code>attrNode</code> est un nœud <code>Attr</code> pour l'attribut demandé.</li>
- <li><code>attrName</code> est une chaîne de caractères qui contient le nom de l'attribut.</li>
-</ul>
+- `attrNode` est un nœud `Attr` pour l'attribut demandé.
+- `attrName` est une chaîne de caractères qui contient le nom de l'attribut.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre>// html: &lt;div id="top" /&gt;
-var t = document.getElementById("top");
-var idAttr = t.getAttributeNode("id");
-alert(idAttr.value == "top")
-</pre>
+    // html: <div id="top" />
+    var t = document.getElementById("top");
+    var idAttr = t.getAttributeNode("id");
+    alert(idAttr.value == "top")
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p>Lorsqu'elle est appelée sur un élément HTML dans un DOM marqué comme un document HTML, <code>getAttributeNode</code> passe en minuscules son argument avant de continuer.</p>
+Lorsqu'elle est appelée sur un élément HTML dans un DOM marqué comme un document HTML, `getAttributeNode` passe en minuscules son argument avant de continuer.
 
-<p>Les nœuds <code>Attr</code> héritent de <code>Node</code>, mais ne sont pas considérés comme faisant partie de l'arbre du document. Les attributs habituels des nœuds comme <a href="fr/DOM/element.parentNode">parentNode</a>, <a href="fr/DOM/element.previousSibling">previousSibling</a>, et <a href="fr/DOM/element.nextSibling">nextSibling</a> sont <code>null</code> pour un nœud <code>Attr</code>. Vous pouvez cependant accéder à l'élément auquel cet attribut appartient grâce à la propriété <code>ownerElement</code>.</p>
+Les nœuds `Attr` héritent de `Node`, mais ne sont pas considérés comme faisant partie de l'arbre du document. Les attributs habituels des nœuds comme [parentNode](fr/DOM/element.parentNode), [previousSibling](fr/DOM/element.previousSibling), et [nextSibling](fr/DOM/element.nextSibling) sont `null` pour un nœud `Attr`. Vous pouvez cependant accéder à l'élément auquel cet attribut appartient grâce à la propriété `ownerElement`.
 
-<p><a href="fr/DOM/element.getAttribute">getAttribute</a> est habituellement utilisé à la place de <code>getAttributeNode</code> pour obtenir la valeur d'un attribut d'un élément.</p>
+[getAttribute](fr/DOM/element.getAttribute) est habituellement utilisé à la place de `getAttributeNode` pour obtenir la valeur d'un attribut d'un élément.
 
-<p>{{ DOMAttributeMethods() }}</p>
+{{ DOMAttributeMethods() }}
 
-<h2 id="Sp.C3.A9cification">Spécification</h2>
+## Spécification
 
-<ul>
- <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-217A91B8">DOM Level 2 Core : getAttributeNode</a> — <small><a href="http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-217A91B8">traduction en français</a> (non normative)</small></li>
- <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#apis-in-html-documents">HTML 5: APIs in HTML documents</a></li>
-</ul>
\ No newline at end of file
+- [DOM Level 2 Core : getAttributeNode](http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-217A91B8) — [traduction en français](http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-217A91B8) (non normative)
+- [HTML 5: APIs in HTML documents](http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#apis-in-html-documents)
diff --git a/files/fr/web/api/element/getattributenodens/index.md b/files/fr/web/api/element/getattributenodens/index.md
index a9a9a56f60..0a4b46bb5b 100644
--- a/files/fr/web/api/element/getattributenodens/index.md
+++ b/files/fr/web/api/element/getattributenodens/index.md
@@ -3,38 +3,33 @@ title: element.getAttributeNodeNS
 slug: Web/API/Element/getAttributeNodeNS
 translation_of: Web/API/Element/getAttributeNodeNS
 ---
-<p>{{ ApiRef() }}</p>
+{{ ApiRef() }}
 
-<h3 id="R.C3.A9sum.C3.A9">Résumé</h3>
+### Résumé
 
-<p>Renvoie le nœud <code>Attr</code> pour l'attribut avec l'espace de noms et le nom donnés.</p>
+Renvoie le nœud `Attr` pour l'attribut avec l'espace de noms et le nom donnés.
 
-<h3 id="Syntaxe">Syntaxe</h3>
+### Syntaxe
 
-<pre class="eval"><em>attributeNode</em> = element.getAttributeNodeNS(<em>namespace</em>,<em>nodeName</em>)
-</pre>
+    attributeNode = element.getAttributeNodeNS(namespace,nodeName)
 
-<h3 id="Param.C3.A8tres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>attributeNode</code></dt>
- <dd>Le nœud pour l'attribut spécifié.</dd>
- <dt><code>namespace</code></dt>
- <dd>Une chaîne spécifiant l'espace de noms de l'attribut.</dd>
- <dt><code>nodeName</code></dt>
- <dd>Une chaîne spécifiant le nom de l'attribut.</dd>
-</dl>
+- `attributeNode`
+  - : Le nœud pour l'attribut spécifié.
+- `namespace`
+  - : Une chaîne spécifiant l'espace de noms de l'attribut.
+- `nodeName`
+  - : Une chaîne spécifiant le nom de l'attribut.
 
-<p>== Example == TBD The example needs to be fixed // html: &lt;div id="top" /&gt; t = document.getElementById("top"); specialNode = t.getAttributeNodeNS( "<a href="http://www.mozilla.org/ns/specialspace">http://www.mozilla.org/ns/specialspace</a>", "id"); // iNode.value = "full-top"</p>
+\== Example == TBD The example needs to be fixed // html: \<div id="top" /> t = document.getElementById("top"); specialNode = t.getAttributeNodeNS( "<http://www.mozilla.org/ns/specialspace>", "id"); // iNode.value = "full-top"
 
-<h3 id="Notes">Notes</h3>
+### Notes
 
-<p><code>getAttributeNodeNS</code> est plus spécifique que {{ domxref("Element.getAttributeNode") }} en ce qu'il permet de spécifier les attributs faisant partis d'un espace de noms particulier. La méthode de réglage correspondante est {{ domxref("Element.setAttributeNodeNS") }}.</p>
+`getAttributeNodeNS` est plus spécifique que {{ domxref("Element.getAttributeNode") }} en ce qu'il permet de spécifier les attributs faisant partis d'un espace de noms particulier. La méthode de réglage correspondante est {{ domxref("Element.setAttributeNodeNS") }}.
 
-<p>{{ DOMAttributeMethods() }}</p>
+{{ DOMAttributeMethods() }}
 
-<h3 id="Sp.C3.A9cification">Spécification</h3>
+### Spécification
 
-<ul>
- <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElGetAtNodeNS">DOM Level 2 Core: getAttributeNodeNS (en)</a> <small>— <a href="http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-ElGetAtNodeNS">traduction en français</a> (non normative)</small></li>
-</ul>
\ No newline at end of file
+- [DOM Level 2 Core: getAttributeNodeNS (en)](http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElGetAtNodeNS) — [traduction en français](http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-ElGetAtNodeNS) (non normative)
diff --git a/files/fr/web/api/element/getattributens/index.md b/files/fr/web/api/element/getattributens/index.md
index 6a5d33ddb7..39c6079fbe 100644
--- a/files/fr/web/api/element/getattributens/index.md
+++ b/files/fr/web/api/element/getattributens/index.md
@@ -8,117 +8,92 @@ tags:
   - Reference
 translation_of: Web/API/Element/getAttributeNS
 ---
-<p>{{APIRef("DOM")}}</p>
+{{APIRef("DOM")}}
 
-<p><strong><code>getAttributeNS()</code></strong> est une méthode de l'interface {{domxref("Element")}} qui renvoie la valeur chaîne de l'attribut avec l'espace de noms et le nom donnés. Si l'attribut nommé n'existe pas, cette valeur sera soit <code>null</code>, soit <code>""</code> (une chaîne vide) ; voir {{ Anch("Notes") }} pour plus de détails.</p>
+**`getAttributeNS()`** est une méthode de l'interface {{domxref("Element")}} qui renvoie la valeur chaîne de l'attribut avec l'espace de noms et le nom donnés. Si l'attribut nommé n'existe pas, cette valeur sera soit `null`, soit `""` (une chaîne vide) ; voir {{ Anch("Notes") }} pour plus de détails.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="eval"><em>attrVal</em> =<em>element</em>.getAttributeNS(<em>namespace</em>,<em>name</em>)
-</pre>
+    attrVal =element.getAttributeNS(namespace,name)
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>namespace </code></dt>
- <dd>L'espace de noms dans lequel rechercher l'attribut spécifié.</dd>
- <dt><code>name </code></dt>
- <dd>Le nom de l'attribut à chercher.</dd>
-</dl>
+- `namespace`
+  - : L'espace de noms dans lequel rechercher l'attribut spécifié.
+- `name`
+  - : Le nom de l'attribut à chercher.
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+### Valeur de retour
 
-<p>La valeur de chaîne de caractères de l'attribut spécifié. Si  l'attribut n'existe pas, le résultat est <code>null</code>.</p>
+La valeur de chaîne de caractères de l'attribut spécifié. Si  l'attribut n'existe pas, le résultat est `null`.
 
-<div class="note">
-<p><strong>Note :</strong> Les versions antérieures de la spécification DOM avaient cette méthode décrite comme renvoyant une chaîne vide pour des attributs inexistants, mais elle n'était généralement pas implémentée de cette façon, car null a plus de sens. La spécification DOM4 indique maintenant que cette méthode devrait retourner null pour les attributs inexistants.</p>
-</div>
+> **Note :** Les versions antérieures de la spécification DOM avaient cette méthode décrite comme renvoyant une chaîne vide pour des attributs inexistants, mais elle n'était généralement pas implémentée de cette façon, car null a plus de sens. La spécification DOM4 indique maintenant que cette méthode devrait retourner null pour les attributs inexistants.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Le document SVG suivant utilise une valeur d'attribut <code>foo</code> d'un espace de nom spécifique :</p>
+Le document SVG suivant utilise une valeur d'attribut `foo` d'un espace de nom spécifique :
 
-<pre class="brush: xml">&lt;svg xmlns="http://www.w3.org/2000/svg"
-    xmlns:test="http://www.example.com/2014/test" width="40" height="40"&gt;
+```xml
+<svg xmlns="http://www.w3.org/2000/svg"
+    xmlns:test="http://www.example.com/2014/test" width="40" height="40">
 
-  &lt;circle id="target" cx="12" cy="12" r="10" stroke="#444"
-      stroke-width="2" fill="none" test:foo="Hello namespaced attribute!"/&gt;
+  <circle id="target" cx="12" cy="12" r="10" stroke="#444"
+      stroke-width="2" fill="none" test:foo="Hello namespaced attribute!"/>
 
-  &lt;script type="text/javascript"&gt;
+  <script type="text/javascript">
     var ns = 'http://www.example.com/2014/test';
     var circle = document.getElementById( 'target' );
 
     console.log( 'attribute test:foo: "' + circle.getAttributeNS( ns, 'foo' ) + '"' );
-  &lt;/script&gt;
-&lt;/svg&gt;
-</pre>
+  </script>
+</svg>
+```
 
-<p>Dans un document HTML5, il faut utiliser <code>test:foo</code> pour accéder à l'attribut car les espaces de noms ne sont pas pris en charge.</p>
+Dans un document HTML5, il faut utiliser `test:foo` pour accéder à l'attribut car les espaces de noms ne sont pas pris en charge.
 
-<pre class="brush: html">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-&lt;body&gt;
+```html
+<!DOCTYPE html>
+<html>
+<body>
 
-&lt;svg xmlns="http://www.w3.org/2000/svg"
-    xmlns:test="http://www.example.com/2014/test" width="40" height="40"&gt;
-  &lt;circle id="target" cx="12" cy="12" r="10" stroke="#444" stroke-width="2"
-      fill="none" test:foo="Foo value"/&gt;
-&lt;/svg&gt;
+<svg xmlns="http://www.w3.org/2000/svg"
+    xmlns:test="http://www.example.com/2014/test" width="40" height="40">
+  <circle id="target" cx="12" cy="12" r="10" stroke="#444" stroke-width="2"
+      fill="none" test:foo="Foo value"/>
+</svg>
 
-&lt;script type="text/javascript"&gt;
+<script type="text/javascript">
   var ns = 'http://www.example.com/2014/test';
   var circle = document.getElementById( 'target' );
   console.log('Attribute value: ' + circle.getAttribute('test:foo'));
-&lt;/script&gt;
-
-&lt;/body&gt;
-&lt;/html&gt;</pre>
-
-<h2 id="Notes">Notes</h2>
-
-<p>Les espaces de noms sont uniquement pris en charge dans les documents XML, Les documents HTML5 doivent utiliser à la place <code>getAttribute()</code> .</p>
-
-<p>La méthode <code>getAttributeNS</code> diffère de {{domxref("element.getAttribute()", "getAttribute()")}} en ce qu'elle permet de spécifier les attributs faisant partie d'un espace de noms particulier, comme dans l'exemple précédent, où l'attribut fait partie d'un espace de noms fictif « specialspace » de mozilla.</p>
-
-<p>Avant la spécification DOM4, cette méthode était spécifiée pour renvoyer une chaîne vide plutôt que null pour les attributs inexistants. Cependant, la plupart des navigateurs ont renvoyé null. À partir de DOM4, la spécification dit maintenant de retourner null. Cependant, certains navigateurs plus anciens renvoient une chaîne vide. Pour cette raison, vous devez utiliser {{domxref("element.hasAttributeNS ()","hasAttributeNS ()")}} pour vérifier l'existence d'un attribut avant d'appeler <code>getAttributeNS()</code> s'il est possible que l'attribut demandé n'existe pas sur l'élément spécifié.</p>
-
-<p>{{ DOMAttributeMethods() }}</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">Commentaire</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("DOM WHATWG", "#dom-element-getattributens", "Element.getAttributeNS()")}}</td>
-   <td>{{Spec2("DOM WHATWG")}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName("DOM3 Core", "#ID-ElGetAttrNS", "Element.getAttributeNS()")}}</td>
-   <td>{{Spec2("DOM3 Core")}}</td>
-   <td>Specifie qu'une exception <code>NOT_SUPPORTED_ERR</code>  est levée si l'agent utilisateur ne supporte pas la fonctionnalité <code>"XML"</code>. Spécifie également que <code>null</code> doit être passé pour n'avoir aucun espace de noms.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("DOM2 Core", "#ID-ElGetAttrNS", "Element.getAttributeNS()")}}</td>
-   <td>{{Spec2("DOM2 Core")}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Element.getAttributeNS")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/Add-ons/Code_snippets/getAttributeNS">Code snippets:getAttributeNS</a></li>
-</ul>
+</script>
+
+</body>
+</html>
+```
+
+## Notes
+
+Les espaces de noms sont uniquement pris en charge dans les documents XML, Les documents HTML5 doivent utiliser à la place `getAttribute()` .
+
+La méthode `getAttributeNS` diffère de {{domxref("element.getAttribute()", "getAttribute()")}} en ce qu'elle permet de spécifier les attributs faisant partie d'un espace de noms particulier, comme dans l'exemple précédent, où l'attribut fait partie d'un espace de noms fictif « specialspace » de mozilla.
+
+Avant la spécification DOM4, cette méthode était spécifiée pour renvoyer une chaîne vide plutôt que null pour les attributs inexistants. Cependant, la plupart des navigateurs ont renvoyé null. À partir de DOM4, la spécification dit maintenant de retourner null. Cependant, certains navigateurs plus anciens renvoient une chaîne vide. Pour cette raison, vous devez utiliser {{domxref("element.hasAttributeNS ()","hasAttributeNS ()")}} pour vérifier l'existence d'un attribut avant d'appeler `getAttributeNS()` s'il est possible que l'attribut demandé n'existe pas sur l'élément spécifié.
+
+{{ DOMAttributeMethods() }}
+
+## Spécifications
+
+| Spécification                                                                                                    | État                             | Commentaire                                                                                                                                                                                                 |
+| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName("DOM WHATWG", "#dom-element-getattributens", "Element.getAttributeNS()")}} | {{Spec2("DOM WHATWG")}} |                                                                                                                                                                                                             |
+| {{SpecName("DOM3 Core", "#ID-ElGetAttrNS", "Element.getAttributeNS()")}}                 | {{Spec2("DOM3 Core")}}     | Specifie qu'une exception `NOT_SUPPORTED_ERR`  est levée si l'agent utilisateur ne supporte pas la fonctionnalité `"XML"`. Spécifie également que `null` doit être passé pour n'avoir aucun espace de noms. |
+| {{SpecName("DOM2 Core", "#ID-ElGetAttrNS", "Element.getAttributeNS()")}}                 | {{Spec2("DOM2 Core")}}     | Définition initiale                                                                                                                                                                                         |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Element.getAttributeNS")}}
+
+## Voir aussi
+
+- [Code snippets:getAttributeNS](/fr/Add-ons/Code_snippets/getAttributeNS)
diff --git a/files/fr/web/api/element/getboundingclientrect/index.md b/files/fr/web/api/element/getboundingclientrect/index.md
index 7fef648005..5e64f11e08 100644
--- a/files/fr/web/api/element/getboundingclientrect/index.md
+++ b/files/fr/web/api/element/getboundingclientrect/index.md
@@ -25,115 +25,111 @@ tags:
   - scrollHeight
 translation_of: Web/API/Element/getBoundingClientRect
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p>La méthode <code><strong>Element.getBoundingClientRect()</strong></code> retourne un objet {{domxref("DOMRect")}} fournissant des informations sur la taille d'un élément et sa position relative par rapport à la <a href="/fr/docs/Glossary/Viewport">zone d'affichage</a>.</p>
+La méthode **`Element.getBoundingClientRect()`** retourne un objet {{domxref("DOMRect")}} fournissant des informations sur la taille d'un élément et sa position relative par rapport à la [zone d'affichage](/fr/docs/Glossary/Viewport).
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:js"><var>objetRect</var> = <var>object</var>.getBoundingClientRect();</pre>
+```js
+objetRect = object.getBoundingClientRect();
+```
 
-<h3 id="Return_value">Valeur de retour</h3>
+### Valeur de retour
 
-<p>La valeur de retour est un objet {{domxref("DOMRect")}} qui est le plus petit rectangle contenant l'élément en entier, incluant sa zone de remplissage et la largeur de sa bordure. Les propriétés <code>left</code>, <code>top</code>, <code>right</code>, <code>bottom</code>, <code>x</code>, <code>y</code>, <code>width</code>, et <code>height</code>, décrivent la position et la taille du rectangle en pixels. Les propriétés autres que <code>width</code> et <code>height</code> sont relatives au coin en haut à gauche de la zone d'affichage.<img alt="Schéma d'un élément dans sa zone de remplissage, décrivant les propriétés retournées par la méthode." src="element-box-diagram.png"></p>
+La valeur de retour est un objet {{domxref("DOMRect")}} qui est le plus petit rectangle contenant l'élément en entier, incluant sa zone de remplissage et la largeur de sa bordure. Les propriétés `left`, `top`, `right`, `bottom`, `x`, `y`, `width`, et `height`, décrivent la position et la taille du rectangle en pixels. Les propriétés autres que `width` et `height` sont relatives au coin en haut à gauche de la zone d'affichage.![Schéma d'un élément dans sa zone de remplissage, décrivant les propriétés retournées par la méthode.](element-box-diagram.png)
 
-<p>Les propriétés <code>width</code> et <code>height</code> de l'objet {{domxref("DOMRect")}} retourné par la méthode incluent le <code>padding</code> et <code>border-width</code>, et non pas seulement la largeur/hauteur du contenu. Avec le modèle standard de boîte, cela correspondrait à la propriété <code>width</code> ou <code>height</code> de l'élément + <code>padding</code> + <code>border-width</code>. Mais si <code><a href="/fr/docs/Web/CSS/box-sizing">box-sizing: border-box</a></code> est défini pour l'élément, cela correpondrait seulement <code>width</code> ou <code>height</code>.</p>
+Les propriétés `width` et `height` de l'objet {{domxref("DOMRect")}} retourné par la méthode incluent le `padding` et `border-width`, et non pas seulement la largeur/hauteur du contenu. Avec le modèle standard de boîte, cela correspondrait à la propriété `width` ou `height` de l'élément + `padding` + `border-width`. Mais si [`box-sizing: border-box`](/fr/docs/Web/CSS/box-sizing) est défini pour l'élément, cela correpondrait seulement `width` ou `height`.
 
-<p>La valeur retournée peut être conceptualisée comme l'union des rectangles retournés par {{domxref("Element.getClientRects", "getClientRects()")}} pour l'élément, i.e. les boîtes de bordure CSS associées à l'élément.</p>
+La valeur retournée peut être conceptualisée comme l'union des rectangles retournés par {{domxref("Element.getClientRects", "getClientRects()")}} pour l'élément, i.e. les boîtes de bordure CSS associées à l'élément.
 
-<p>Les boîtes de bordure vides sont complètement ignorées. Si toutes les boîtes de bordure associées à l'élément sont vides, la méthode renvoie alors un rectangle pour lequel <code>width</code> et <code>height</code> valent 0 et où <code>top</code> et <code>left</code> correspondent au coin en haut à gauche de la première boîte de bordure (dans l'ordre du contenu) de l'élément.</p>
+Les boîtes de bordure vides sont complètement ignorées. Si toutes les boîtes de bordure associées à l'élément sont vides, la méthode renvoie alors un rectangle pour lequel `width` et `height` valent 0 et où `top` et `left` correspondent au coin en haut à gauche de la première boîte de bordure (dans l'ordre du contenu) de l'élément.
 
-<p>La distance de défilement qui a été parcourue dans la zone d'affichage (ou n'importe quel élément que l'on peut faire défiler) est prise en compte pour calculer le rectangle de délimitation. Cela signifie que les côtés du rectangle de délimitation (<code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code>) change ses valeurs à chaque fois que la position de défilement change (parce que les valeurs sont relatives à la zone d'affichage et ne sont pas absolues).</p>
+La distance de défilement qui a été parcourue dans la zone d'affichage (ou n'importe quel élément que l'on peut faire défiler) est prise en compte pour calculer le rectangle de délimitation. Cela signifie que les côtés du rectangle de délimitation (`top`, `right`, `bottom`, `left`) change ses valeurs à chaque fois que la position de défilement change (parce que les valeurs sont relatives à la zone d'affichage et ne sont pas absolues).
 
-<p>Si vous avez besoin d'un rectangle de délimitation relatif au coin supérieur gauche du document, ajoutez simplement la position actuelle de défilement aux propriétés <code>top</code> et <code>left</code> (elles peuvent être obtenues en utilisant {{domxref("window.scrollX")}} et {{domxref("window.scrollY")}}) pour avoir un rectangle de délimitation indépendant de la position de défilement actuelle.</p>
+Si vous avez besoin d'un rectangle de délimitation relatif au coin supérieur gauche du document, ajoutez simplement la position actuelle de défilement aux propriétés `top` et `left` (elles peuvent être obtenues en utilisant {{domxref("window.scrollX")}} et {{domxref("window.scrollY")}}) pour avoir un rectangle de délimitation indépendant de la position de défilement actuelle.
 
-<h3 id="Cross-browser_fallback">Solution de prise en charge multi-navigateurs</h3>
+### Solution de prise en charge multi-navigateurs
 
-<p>Les scripts qui doivent avoir une haute compatibilité pour l'ensemble des navigateurs peuvent utiliser <code>window.pageXOffset</code> et <code>window.pageYOffset</code> plutôt que <code>window.scrollX</code> et <code>window.scrollY.</code> Les scripts qui ne peuvent pas utiliser <code>window.pageXOffset</code>, <code>window.pageYOffset</code>, <code>window.scrollX</code> ou <code>window.scrollY</code> pourront utiliser cette méthode :</p>
+Les scripts qui doivent avoir une haute compatibilité pour l'ensemble des navigateurs peuvent utiliser `window.pageXOffset` et `window.pageYOffset` plutôt que `window.scrollX` et `window.scrollY.` Les scripts qui ne peuvent pas utiliser `window.pageXOffset`, `window.pageYOffset`, `window.scrollX` ou `window.scrollY` pourront utiliser cette méthode :
 
-<pre class="brush:js">// Pour scrollX
+```js
+// Pour scrollX
 (((t = document.documentElement) || (t = document.body.parentNode))
-  &amp;&amp; typeof t.ScrollLeft == 'number' ? t : document.body).ScrollLeft
+  && typeof t.ScrollLeft == 'number' ? t : document.body).ScrollLeft
 // Pour scrollY
 (((t = document.documentElement) || (t = document.body.parentNode))
-  &amp;&amp; typeof t.ScrollTop == 'number' ? t : document.body).ScrollTop
-</pre>
+  && typeof t.ScrollTop == 'number' ? t : document.body).ScrollTop
+```
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<p>Ce simple exemple récupère l'objet <code>DOMRect</code> représentant le rectangle de délimitation dans le client d'un simple élément div, et affiche ses propriétés dessous.</p>
+Ce simple exemple récupère l'objet `DOMRect` représentant le rectangle de délimitation dans le client d'un simple élément div, et affiche ses propriétés dessous.
 
-<pre class="brush:html">&lt;div&gt;&lt;/div&gt;</pre>
+```html
+<div></div>
+```
 
-<pre class="brush:css">div {
+```css
+div {
   width: 400px;
   height: 200px;
   padding: 20px;
   margin: 50px auto;
   background: purple;
-}</pre>
+}
+```
 
-<pre class="brush:js">let <var>elem</var> = document.querySelector('div');
-let <var>rect</var> = elem.getBoundingClientRect();
-for (let <var>key</var> in rect) {
+```js
+let elem = document.querySelector('div');
+let rect = elem.getBoundingClientRect();
+for (let key in rect) {
   if(typeof rect[key] !== 'function') {
-    let <var>para</var> = document.createElement('p');
+    let para = document.createElement('p');
     para.textContent  = `${ key } : ${ rect[key] }`;
     document.body.appendChild(para);
   }
-}</pre>
+}
+```
 
-<p>{{EmbedLiveSample('Example', '100%', 640)}}</p>
+{{EmbedLiveSample('Example', '100%', 640)}}
 
-<p>Remarquez comme les <code>width</code>/<code>height</code> sont égales à
-  <code>width</code>/<code>height</code> + <code>padding</code>.</p>
+Remarquez comme les `width`/`height` sont égales à
+`width`/`height` + `padding`.
 
-<p>Remarquez aussi que les valeurs de <code>x</code>/<code>left</code>,
-  <code>y</code>/<code>top</code>, <code>right</code>, et <code>bottom</code> sont égales à la distance absolue depuis le bord de la zone d'affichage jusqu'au coté de l'element dans chaque cas.</p>
+Remarquez aussi que les valeurs de `x`/`left`,
+`y`/`top`, `right`, et `bottom` sont égales à la distance absolue depuis le bord de la zone d'affichage jusqu'au coté de l'element dans chaque cas.
 
-<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("CSSOM View", "#dom-element-getboundingclientrect", "Element.getBoundingClientRect()")}}</td>
-   <td>{{Spec2("CSSOM View")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                        | Statut                           | Commentaire          |
+| ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName("CSSOM View", "#dom-element-getboundingclientrect", "Element.getBoundingClientRect()")}} | {{Spec2("CSSOM View")}} | Définition initiale. |
 
-<h3 id="Notes">Notes</h3>
+### Notes
 
-<p>L'objet <code>DOMRect</code> retourné peut être modifié dans les navigateurs modernes. Cela n'était pas le cas avec ceux plus anciens qui retournaient effectivement <code>DOMRectReadOnly</code>. Dans IE et Edge, ne pas pouvoir ajouter les propriétés manquantes à l'objet <a href="https://msdn.microsoft.com/en-us/library/hh826029(VS.85).aspx">ClientRect </a>qu'ils retournent empêche d'ajouter le support de <code>x</code> et <code>y</code>.</p>
+L'objet `DOMRect` retourné peut être modifié dans les navigateurs modernes. Cela n'était pas le cas avec ceux plus anciens qui retournaient effectivement `DOMRectReadOnly`. Dans IE et Edge, ne pas pouvoir ajouter les propriétés manquantes à l'objet [ClientRect ](<https://msdn.microsoft.com/en-us/library/hh826029(VS.85).aspx>)qu'ils retournent empêche d'ajouter le support de `x` et `y`.
 
-<p>En raison de problèmes de compatibilité (voir ci-dessous), il est plus sûr de se limiter aux propriétés <code>top</code>, <code>left</code>, <code>right</code>, et <code>bottom</code>.</p>
+En raison de problèmes de compatibilité (voir ci-dessous), il est plus sûr de se limiter aux propriétés `top`, `left`, `right`, et `bottom`.
 
-<p>Les propriétés dans l'objet <code>DOMRect</code> retourné ne sont pas possèdées pas ce dernier. Tandis que les opérateurs <code>in</code> et <code>for...in</code> vont trouver les propriétés retournées, les autres APIs comme Object.keys échoueront. De plus, et de façon inattendue, les fonctionnalités ES2015 et plus récentes telles que <code>Object.assign()</code> et les paramètres du reste / la décomposition d'un objet, ne réussiront pas à copier les propriétés retournées.</p>
+Les propriétés dans l'objet `DOMRect` retourné ne sont pas possèdées pas ce dernier. Tandis que les opérateurs `in` et `for...in` vont trouver les propriétés retournées, les autres APIs comme Object.keys échoueront. De plus, et de façon inattendue, les fonctionnalités ES2015 et plus récentes telles que `Object.assign()` et les paramètres du reste / la décomposition d'un objet, ne réussiront pas à copier les propriétés retournées.
 
-<pre class="brush:js">rect = elt.getBoundingClientRect()
+```js
+rect = elt.getBoundingClientRect()
 // The result in emptyObj is {}
 emptyObj = Object.assign({}, rect)
 emptyObj = { ...rect }
-{ width, ...emptyObj } = rect</pre>
+{ width, ...emptyObj } = rect
+```
 
-<p>Les propriétés <code>top</code>, <code>left</code>, <code>right</code>, et <code>bottom</code> de <code>DOMRect</code> sont calculées en utilisant les valeurs des autres propriétés de l'objet.</p>
+Les propriétés `top`, `left`, `right`, et `bottom` de `DOMRect` sont calculées en utilisant les valeurs des autres propriétés de l'objet.
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<div>{{Compat("api.Element.getBoundingClientRect")}}</div>
+{{Compat("api.Element.getBoundingClientRect")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("Element.getClientRects", "getClientRects()")}}</li>
- <li><a href="https://msdn.microsoft.com/en-us/library/ms536433(VS.85).aspx">MSDN: <code>getBoundingClientRect</code></a></li>
- <li><a href="https://msdn.microsoft.com/en-us/library/hh826029(VS.85).aspx">MSDN: <code>ClientRect</code></a>, une version plus ancienne de <code>DOMRect</code></li>
-</ul>
+- {{domxref("Element.getClientRects", "getClientRects()")}}
+- [MSDN: `getBoundingClientRect`](<https://msdn.microsoft.com/en-us/library/ms536433(VS.85).aspx>)
+- [MSDN: `ClientRect`](<https://msdn.microsoft.com/en-us/library/hh826029(VS.85).aspx>), une version plus ancienne de `DOMRect`
diff --git a/files/fr/web/api/element/getelementsbyclassname/index.md b/files/fr/web/api/element/getelementsbyclassname/index.md
index 016d94535a..1f729a405b 100644
--- a/files/fr/web/api/element/getelementsbyclassname/index.md
+++ b/files/fr/web/api/element/getelementsbyclassname/index.md
@@ -10,60 +10,55 @@ tags:
   - getElementByClassName
 translation_of: Web/API/Element/getElementsByClassName
 ---
-<p>{{APIRef("DOM")}}</p>
+{{APIRef("DOM")}}
 
-<p>La méthode <strong><code>Element.getElementsByClassName()</code></strong> retourne une {{domxref("HTMLCollection")}} contenant une référence sur tous les éléments ayant les noms de classes passés en paramètre. Quand la méthode est appelée sur l'objet document, la recherche s'effectue dans le document complet, noeud racine compris.</p>
+La méthode **`Element.getElementsByClassName()`** retourne une {{domxref("HTMLCollection")}} contenant une référence sur tous les éléments ayant les noms de classes passés en paramètre. Quand la méthode est appelée sur l'objet document, la recherche s'effectue dans le document complet, noeud racine compris.
 
-<p>À l'instar de la méthode {{domxref("Document.getElementsByClassName", "Document.getElementsByClassName()")}} qui agit sur le document entier ; elle va retourner les descendants de l'élément spécifié comme document root qui auront les noms de classes passés en paramètre.</p>
+À l'instar de la méthode {{domxref("Document.getElementsByClassName", "Document.getElementsByClassName()")}} qui agit sur le document entier ; elle va retourner les descendants de l'élément spécifié comme document root qui auront les noms de classes passés en paramètre.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var>var <em>elements</em></var> = <em>element</em>.getElementsByClassName(<em>names</em>);</pre>
+    var elements = element.getElementsByClassName(names);
 
-<ul>
- <li><em><var>elements</var></em> est une {{ domxref("HTMLCollection") }} de référence vers les élements trouvés.</li>
- <li><em><var>names</var></em> est une chaine représentant la liste des noms de classes à trouver; les noms de classes sont séparés par un espace.</li>
- <li><em>element</em> est n'importe quel {{domxref("Element")}} du document.</li>
-</ul>
+- **elements** est une {{ domxref("HTMLCollection") }} de référence vers les élements trouvés.
+- **names** est une chaine représentant la liste des noms de classes à trouver; les noms de classes sont séparés par un espace.
+- *element* est n'importe quel {{domxref("Element")}} du document.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Obtient tous les élements ayant une classe <code>test</code>:</p>
+Obtient tous les élements ayant une classe `test`:
 
-<pre class="brush: js">element.getElementsByClassName('test');</pre>
+```js
+element.getElementsByClassName('test');
+```
 
-<p>Obtient tous les élements ayant à la fois la classe <code>red</code> et la classe <code>test</code>:</p>
+Obtient tous les élements ayant à la fois la classe `red` et la classe `test`:
 
-<pre class="brush: js">element.getElementsByClassName('red test');</pre>
+```js
+element.getElementsByClassName('red test');
+```
 
-<p>Obtient tous les élements qui ont une classe <code>test</code>, à l'intérieur d'un élement qui a pour id <code>main</code>:</p>
+Obtient tous les élements qui ont une classe `test`, à l'intérieur d'un élement qui a pour id `main`:
 
-<pre class="brush: js">document.getElementById('main').getElementsByClassName('test');</pre>
+```js
+document.getElementById('main').getElementsByClassName('test');
+```
 
-<p>On peut aussi utiliser les méthodes de {{jsxref("Array.prototype")}} sur chaque {{ domxref("HTMLCollection") }} en passant la <code><var>HTMLCollection</var></code> comme valeur <var>this</var> de la méthode. Ci-dessous on trouvera tous les {{HTMLElement("div")}} avec une classe <code>test</code>:</p>
+On peut aussi utiliser les méthodes de {{jsxref("Array.prototype")}} sur chaque {{ domxref("HTMLCollection") }} en passant la `HTMLCollection` comme valeur *this* de la méthode. Ci-dessous on trouvera tous les {{HTMLElement("div")}} avec une classe `test`:
 
-<pre class="brush: js">var testElements = document.getElementsByClassName('test');
+```js
+var testElements = document.getElementsByClassName('test');
 var testDivs = Array.prototype.filter.call(testElements, function(testElement){
     return testElement.nodeName === 'div';
-});</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#dom-element-getelementsbyclassname', 'Element.getElementsByClassName()')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Element.getElementsByClassName")}}</p>
+});
+```
+
+## Spécifications
+
+| Spécification                                                                                                                            | Statut                           | Commentaire         |
+| ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- |
+| {{SpecName('DOM WHATWG', '#dom-element-getelementsbyclassname', 'Element.getElementsByClassName()')}} | {{Spec2('DOM WHATWG')}} | Définition initiale |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Element.getElementsByClassName")}}
diff --git a/files/fr/web/api/element/getelementsbytagname/index.md b/files/fr/web/api/element/getelementsbytagname/index.md
index 8cbef3215e..19c9d3772a 100644
--- a/files/fr/web/api/element/getelementsbytagname/index.md
+++ b/files/fr/web/api/element/getelementsbytagname/index.md
@@ -9,68 +9,45 @@ tags:
   - Reference
 translation_of: Web/API/Element/getElementsByTagName
 ---
-<p>{{APIRef("DOM")}}</p>
+{{APIRef("DOM")}}
 
-<p>La méthode <code><strong>Element.getElementsByTagName()</strong></code> retourne une liste des éléments portant le <a href="/fr/docs/Web/API/Element/tagName">nom de balise</a> donné. La recherche porte sur le sous-arbre de l'élément spécifié, à l'exception de cet élément lui-même. La liste retournée est <em>live</em>, c'est à dire qu'elle se met à jour automatiquement à chaque changement de l'arbre DOM. Par conséquent, il n'est pas nécessaire d'appeller plusieurs fois  <code>Element.getElementsByTagName()</code>  avec le même élément et les mêmes arguments.</p>
+La méthode **`Element.getElementsByTagName()`** retourne une liste des éléments portant le [nom de balise](/fr/docs/Web/API/Element/tagName) donné. La recherche porte sur le sous-arbre de l'élément spécifié, à l'exception de cet élément lui-même. La liste retournée est _live_, c'est à dire qu'elle se met à jour automatiquement à chaque changement de l'arbre DOM. Par conséquent, il n'est pas nécessaire d'appeller plusieurs fois `Element.getElementsByTagName()` avec le même élément et les mêmes arguments.
 
-<p>Quand elle est appelée sur un élément HTML dans un document HTML, <code>getElementsByTagName </code>place son argument en minuscule avant de continuer. Cela n'est pas souhaitable lorsque vous tentez de faire correspondre des éléments SVG " camel-cased"  dans une sous-arborescence dans un document HTML. {{domxref("Element.getElementsByTagNameNS()")}} fonctionne dans ce cas.</p>
+Quand elle est appelée sur un élément HTML dans un document HTML, `getElementsByTagName `place son argument en minuscule avant de continuer. Cela n'est pas souhaitable lorsque vous tentez de faire correspondre des éléments SVG " camel-cased" dans une sous-arborescence dans un document HTML. {{domxref("Element.getElementsByTagNameNS()")}} fonctionne dans ce cas.
 
-<p><code>Element.getElementsByTagName</code> est similaire à {{domxref("Document.getElementsByTagName()")}}, à part que sa recherche est limitée aux éléments qui sont des descendants de l'élément spécifié.</p>
+`Element.getElementsByTagName` est similaire à {{domxref("Document.getElementsByTagName()")}}, à part que sa recherche est limitée aux éléments qui sont des descendants de l'élément spécifié.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><code><em>elements</em> = <em>element</em>.getElementsByTagName(<em>tagName</em>)</code></pre>
+    elements = element.getElementsByTagName(tagName)
 
-<ul>
- <li><code>elements</code>  est une {{domxref("HTMLCollection")}} contenant les éléments trouvés, dans l'ordre dans lequel ils apparaissent dans le sous-arbre. Si aucun élément n'a été trouvé, la <code>HTMLCollection</code> est vide.</li>
- <li><code>element</code> est l'élément depuis lequel la recherche doit commencer. Notez que seuls les descendants de cet élément feront partie des résultats, mais pas l'élément lui-même.</li>
- <li><code>tagName</code>  est le nom qualifié à rechercher. La chaîne spéciale <code>"*"</code> représente tous les éléments possibles. Pour la compatibilité avec XHTML, les minuscules doivent être utilisées.</li>
-</ul>
+- `elements` est une {{domxref("HTMLCollection")}} contenant les éléments trouvés, dans l'ordre dans lequel ils apparaissent dans le sous-arbre. Si aucun élément n'a été trouvé, la `HTMLCollection` est vide.
+- `element` est l'élément depuis lequel la recherche doit commencer. Notez que seuls les descendants de cet élément feront partie des résultats, mais pas l'élément lui-même.
+- `tagName` est le nom qualifié à rechercher. La chaîne spéciale `"*"` représente tous les éléments possibles. Pour la compatibilité avec XHTML, les minuscules doivent être utilisées.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">// vérifie l'alignement sur un nombre de cellules dans un tableau. 
+```js
+// vérifie l'alignement sur un nombre de cellules dans un tableau.
 var table = document.getElementById("forecast-table");
 var cells = table.getElementsByTagName("td");
-for (var i = 0; i &lt; cells.length; i++) {
+for (var i = 0; i < cells.length; i++) {
     var status = cells[i].getAttribute("data-status");
     if ( status == "open" ) {
-        // saisit les données 
+        // saisit les données
     }
-}</pre>
+}
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#dom-element-getelementsbytagname', 'Element.getElementsByTagName()')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Change la valeur de retour de {{domxref("NodeList")}} à{{domxref("HTMLCollection")}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM3 Core', 'core.html#ID-1938918D', 'Element.getElementsByTagName()')}}</td>
-   <td>{{Spec2('DOM3 Core')}}</td>
-   <td>Pas de changement par rapport à {{SpecName('DOM2 Core')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Core', 'core.html#ID-1938918D', 'Element.getElementsByTagName()')}}</td>
-   <td>{{Spec2('DOM2 Core')}}</td>
-   <td>Pas de changement par rapport à {{SpecName('DOM1')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM1', 'level-one-core.html#ID-1938918D', 'Element.getElementsByTagName()')}}</td>
-   <td>{{Spec2('DOM1')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                    | Statut                           | Commentaire                                                                                              |
+| -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------------------------------------------------------------------------------------------- |
+| {{SpecName('DOM WHATWG', '#dom-element-getelementsbytagname', 'Element.getElementsByTagName()')}} | {{Spec2('DOM WHATWG')}} | Change la valeur de retour de {{domxref("NodeList")}} à{{domxref("HTMLCollection")}} |
+| {{SpecName('DOM3 Core', 'core.html#ID-1938918D', 'Element.getElementsByTagName()')}}                 | {{Spec2('DOM3 Core')}}     | Pas de changement par rapport à {{SpecName('DOM2 Core')}}                                         |
+| {{SpecName('DOM2 Core', 'core.html#ID-1938918D', 'Element.getElementsByTagName()')}}                 | {{Spec2('DOM2 Core')}}     | Pas de changement par rapport à {{SpecName('DOM1')}}                                             |
+| {{SpecName('DOM1', 'level-one-core.html#ID-1938918D', 'Element.getElementsByTagName()')}}         | {{Spec2('DOM1')}}         | Définition initiale                                                                                      |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Element.getElementsByTagName")}}</p>
+{{Compat("api.Element.getElementsByTagName")}}
diff --git a/files/fr/web/api/element/getelementsbytagnamens/index.md b/files/fr/web/api/element/getelementsbytagnamens/index.md
index 3bb1bbba96..0e7d0cb5e5 100644
--- a/files/fr/web/api/element/getelementsbytagnamens/index.md
+++ b/files/fr/web/api/element/getelementsbytagnamens/index.md
@@ -9,67 +9,47 @@ tags:
   - Reference
 translation_of: Web/API/Element/getElementsByTagNameNS
 ---
-<p>{{APIRef("DOM")}}</p>
+{{APIRef("DOM")}}
 
-<p>La méthode <code><strong>Element.getElementsByTagNameNS()</strong></code> renvoie un objet {{domxref("HTMLCollection")}} avec le nom de balise donné appartenant à l'espace de noms donné. Elle est semblable à la méthode {{Domxref("Document.getElementsByTagNameNS")}} mais cette dernière recherche sur l'ensemble du document tandis que <code>getElementsByTagNameNS()</code> recherche parmi les descendants de l'élément courant.</p>
+La méthode **`Element.getElementsByTagNameNS()`** renvoie un objet {{domxref("HTMLCollection")}} avec le nom de balise donné appartenant à l'espace de noms donné. Elle est semblable à la méthode {{Domxref("Document.getElementsByTagNameNS")}} mais cette dernière recherche sur l'ensemble du document tandis que `getElementsByTagNameNS()` recherche parmi les descendants de l'élément courant.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="eval"><em>elements</em> =<em> element</em>.getElementsByTagNameNS(<em>namespaceURI</em>,<em>localName</em>);</pre>
+    elements = element.getElementsByTagNameNS(namespaceURI,localName);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>namespaceURI</code></dt>
- <dd>L'URI de l'espace de noms des éléments à rechercher (cf. <code><a href="/fr/docs/Web/API/Element/namespaceURI">namespaceURI</a></code>). Par exemple, si vous recherchez des éléments XHTML, utilisez l'URI d'espace de noms XHTML, <code>http://www.w3.org/1999/xhtml</code>.</dd>
- <dt><code>localName</code></dt>
- <dd>Le nom local des éléments à rechercher ou la valeur spéciale <code>"*"</code> (correspondant à tous les éléments). Voir {{domxref("Node.localName")}}.</dd>
-</dl>
+- `namespaceURI`
+  - : L'URI de l'espace de noms des éléments à rechercher (cf. [`namespaceURI`](/fr/docs/Web/API/Element/namespaceURI)). Par exemple, si vous recherchez des éléments XHTML, utilisez l'URI d'espace de noms XHTML, `http://www.w3.org/1999/xhtml`.
+- `localName`
+  - : Le nom local des éléments à rechercher ou la valeur spéciale `"*"` (correspondant à tous les éléments). Voir {{domxref("Node.localName")}}.
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Une collection {{domxref("HTMLCollection")}} des éléments trouvés, dans l'ordre d'apparition dans l'arbre du DOM.</p>
+Une collection {{domxref("HTMLCollection")}} des éléments trouvés, dans l'ordre d'apparition dans l'arbre du DOM.
 
-<h2 id="Exemple">Exemples</h2>
+## Exemples
 
-<pre class="brush: js">// vérifie l'alignement d'une série de cellules d'un tableau dans un document XHTML.
+```js
+// vérifie l'alignement d'une série de cellules d'un tableau dans un document XHTML.
 var table = document.getElementById("forecast-table");
 var cells = table.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "td");
-for (var i = 0; i &lt; cells.length; i++) {
+for (var i = 0; i < cells.length; i++) {
   var axis = cells[i].getAttribute("axis");
   if (axis == "year") {
     // saisit les données
   }
 }
-</pre>
+```
 
-<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('DOM WHATWG', '#dom-element-getelementsbytagnamens', 'Element.getElementsByTagNameNS()')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Modification du type de la valeur de retour : passage de {{domxref("NodeList")}} à {{domxref("HTMLCollection")}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM3 Core', 'core.html#ID-A6C90942', 'Element.getElementsByTagNameNS()')}}</td>
-   <td>{{Spec2('DOM3 Core')}}</td>
-   <td>Aucune modification depuis {{SpecName('DOM2 Core')}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Core', 'core.html#ID-A6C90942', 'Element.getElementsByTagNameNS()')}}</td>
-   <td>{{Spec2('DOM2 Core')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                            | État                             | Commentaires                                                                                                                          |
+| ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('DOM WHATWG', '#dom-element-getelementsbytagnamens', 'Element.getElementsByTagNameNS()')}} | {{Spec2('DOM WHATWG')}} | Modification du type de la valeur de retour : passage de {{domxref("NodeList")}} à {{domxref("HTMLCollection")}}. |
+| {{SpecName('DOM3 Core', 'core.html#ID-A6C90942', 'Element.getElementsByTagNameNS()')}}                     | {{Spec2('DOM3 Core')}}     | Aucune modification depuis {{SpecName('DOM2 Core')}}.                                                                          |
+| {{SpecName('DOM2 Core', 'core.html#ID-A6C90942', 'Element.getElementsByTagNameNS()')}}                     | {{Spec2('DOM2 Core')}}     | Définition initiale.                                                                                                                  |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Element.getElementsByTagNameNS")}}</p>
+{{Compat("api.Element.getElementsByTagNameNS")}}
diff --git a/files/fr/web/api/element/hasattribute/index.md b/files/fr/web/api/element/hasattribute/index.md
index 5c90c03771..6d2f356ed6 100644
--- a/files/fr/web/api/element/hasattribute/index.md
+++ b/files/fr/web/api/element/hasattribute/index.md
@@ -9,69 +9,51 @@ tags:
   - Reference
 translation_of: Web/API/Element/hasAttribute
 ---
-<p>{{APIRef("DOM")}}</p>
+{{APIRef("DOM")}}
 
-<p>La méthode  <strong><code>Element.hasAttribute()</code></strong>  renvoie une <strong>valeur booléenne</strong> indiquant si l'élément courant possède l'attribut spécifié ou non.</p>
+La méthode **`Element.hasAttribute()`** renvoie une **valeur booléenne** indiquant si l'élément courant possède l'attribut spécifié ou non.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var>var <em>result</em></var> = <em><var>element</var></em>.hasAttribute(<em><var>name</var></em>);
-</pre>
+    var result = element.hasAttribute(name);
 
-<dl>
- <dt><code>result</code></dt>
- <dd>récupère la valeur de retour <code>true</code> ou <code>false</code>.</dd>
- <dt><code>name</code></dt>
- <dd>est une chaine de caractères représentant le nom de l'attribut.</dd>
-</dl>
+- `result`
+  - : récupère la valeur de retour `true` ou `false`.
+- `name`
+  - : est une chaine de caractères représentant le nom de l'attribut.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush:js">var foo = document.getElementById("foo");
+```js
+var foo = document.getElementById("foo");
 if (foo.hasAttribute("bar")) {
     // faire quelque chose
-}</pre>
+}
+```
 
-<h2 id="Notes">Polyfill</h2>
+## Polyfill
 
-<pre class="brush:js">;(function(prototype) {
+```js
+;(function(prototype) {
     prototype.hasAttribute = prototype.hasAttribute || function(name) {
-        return !!(this.attributes[name] &amp;&amp;
+        return !!(this.attributes[name] &&
                   this.attributes[name].specified);
     }
-})(Element.prototype);</pre>
+})(Element.prototype);
+```
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p>{{DOMAttributeMethods}}</p>
+{{DOMAttributeMethods}}
 
-<h2 id="Sp.C3.A9cification">Spécification</h2>
+## Spécification
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#dom-element-hasattribute', 'Element.hasAttribute()')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Dans {{SpecName('DOM3 Core')}}, déplacé de {{domxref("Node")}} à {{domxref("Element")}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM3 Core', 'core.html#ID-ElHasAttr', 'Element.hasAttribute()')}}</td>
-   <td>{{Spec2('DOM3 Core')}}</td>
-   <td>Pas de changement par rapport à {{SpecName('DOM2 Core')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Core', 'core.html#ID-ElHasAttr', 'Element.hasAttribute()')}}</td>
-   <td>{{Spec2('DOM2 Core')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                | Statut                           | Commentaire                                                                                               |
+| ------------------------------------------------------------------------------------------------------------ | -------------------------------- | --------------------------------------------------------------------------------------------------------- |
+| {{SpecName('DOM WHATWG', '#dom-element-hasattribute', 'Element.hasAttribute()')}} | {{Spec2('DOM WHATWG')}} | Dans {{SpecName('DOM3 Core')}}, déplacé de {{domxref("Node")}} à {{domxref("Element")}} |
+| {{SpecName('DOM3 Core', 'core.html#ID-ElHasAttr', 'Element.hasAttribute()')}}     | {{Spec2('DOM3 Core')}}     | Pas de changement par rapport à {{SpecName('DOM2 Core')}}                                          |
+| {{SpecName('DOM2 Core', 'core.html#ID-ElHasAttr', 'Element.hasAttribute()')}}     | {{Spec2('DOM2 Core')}}     | Définition initiale.                                                                                      |
 
-<h2 id="Browser_compatibility">Browser compatibility</h2>
+## Browser compatibility
 
-<p>{{Compat("api.Element.hasAttribute")}}</p>
+{{Compat("api.Element.hasAttribute")}}
diff --git a/files/fr/web/api/element/hasattributens/index.md b/files/fr/web/api/element/hasattributens/index.md
index d30aca00e1..5f4de8ace0 100644
--- a/files/fr/web/api/element/hasattributens/index.md
+++ b/files/fr/web/api/element/hasattributens/index.md
@@ -9,46 +9,43 @@ tags:
   - Méthodes
 translation_of: Web/API/Element/hasAttributeNS
 ---
-<p>{{ APIRef("DOM") }}</p>
+{{ APIRef("DOM") }}
 
-<h2 id="R.C3.A9sum.C3.A9">Résumé</h2>
+## Résumé
 
-<p><code>hasAttributeNS</code> renvoie une valeur booléenne indiquant si l'élément courant possède ou non l'attribut spécifié.</p>
+`hasAttributeNS` renvoie une valeur booléenne indiquant si l'élément courant possède ou non l'attribut spécifié.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">result =
+```js
+result =
 element.hasAttributeNS(
 namespace,
-localName)</pre>
-
-<dl>
- <dt><code>result</code></dt>
- <dd>Une valeur booléenne <code>true</code> ou <code>false</code>.</dd>
- <dt><code>namespace</code></dt>
- <dd>Une chaîne spécifiant l'espace de noms de l'attribut.</dd>
- <dt><code>localName</code></dt>
- <dd>Le nom de l'attribut.</dd>
-</dl>
-
-<h2 id="Exemple">Exemple</h2>
-
-<pre class="eval">// Vérifie que l'attribut existe
-// avant de définir une valeur
-var d = document.getElementById("div1");
-if (d.hasAttributeNS(
-        "http://www.mozilla.org/ns/specialspace/",
-        "special-align")) {
-   d.setAttribute("align", "center");
-}
-</pre>
-
-<h2 id="Notes">Notes</h2>
-
-<p>{{ DOMAttributeMethods() }}</p>
-
-<h2 id="Sp.C3.A9cification">Spécification</h2>
-
-<ul>
- <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElHasAttrNS">DOM Level 2 Core: hasAttributeNS (en)</a> <small>— <a href="http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-ElHasAttrNS">traduction en français</a> (non normative)</small></li>
-</ul>
+localName)
+```
+
+- `result`
+  - : Une valeur booléenne `true` ou `false`.
+- `namespace`
+  - : Une chaîne spécifiant l'espace de noms de l'attribut.
+- `localName`
+  - : Le nom de l'attribut.
+
+## Exemple
+
+    // Vérifie que l'attribut existe
+    // avant de définir une valeur
+    var d = document.getElementById("div1");
+    if (d.hasAttributeNS(
+            "http://www.mozilla.org/ns/specialspace/",
+            "special-align")) {
+       d.setAttribute("align", "center");
+    }
+
+## Notes
+
+{{ DOMAttributeMethods() }}
+
+## Spécification
+
+- [DOM Level 2 Core: hasAttributeNS (en)](http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElHasAttrNS) — [traduction en français](http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-ElHasAttrNS) (non normative)
diff --git a/files/fr/web/api/element/hasattributes/index.md b/files/fr/web/api/element/hasattributes/index.md
index ec7c62931f..abd5571777 100644
--- a/files/fr/web/api/element/hasattributes/index.md
+++ b/files/fr/web/api/element/hasattributes/index.md
@@ -10,70 +10,53 @@ tags:
   - polyfill
 translation_of: Web/API/Element/hasAttributes
 ---
-<div>{{ApiRef("DOM")}}</div>
+{{ApiRef("DOM")}}
 
-<p>La méthode <strong><code>hasAttributes()</code></strong>, rattachée à l'interface {{domxref("Element")}}, renvoie une valeur booléenne indiquant si le nœud courant a au moins un attribut ou non.</p>
+La méthode **`hasAttributes()`**, rattachée à l'interface {{domxref("Element")}}, renvoie une valeur booléenne indiquant si le nœud courant a au moins un attribut ou non.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:js">var result = element.hasAttributes();</pre>
+```js
+var result = element.hasAttributes();
+```
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+### Valeur de retour
 
-<dl>
- <dt><code>result</code></dt>
- <dd>contient la valeur de retour <code>true</code> ou <code>false</code>.</dd>
-</dl>
+- `result`
+  - : contient la valeur de retour `true` ou `false`.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush:js ">var foo = document.getElementById("foo");
+```js
+var foo = document.getElementById("foo");
 if (foo.hasAttributes()) {
     // faire quelque chose avec 'foo.attributes'
-}</pre>
+}
+```
 
-<h2 id="Polyfill">Polyfill</h2>
+## Polyfill
 
-<pre class="brush:js ">;(function(prototype) {
+```js
+;(function(prototype) {
     prototype.hasAttributes = prototype.hasAttributes || function() {
-        return (this.attributes.length &gt; 0);
+        return (this.attributes.length > 0);
     }
-})(Element.prototype);</pre>
+})(Element.prototype);
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName("DOM WHATWG", "#dom-element-hasattributes", "Element.hasAttributes()")}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Déplacé de l'interface {{domxref("Node")}} vers l'interface plus spécialisée {{domxref("Element")}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM3 Core','#ID-NodeHasAttrs','hasAttributes()')}}</td>
-   <td>{{Spec2('DOM3 Core')}}</td>
-   <td>Pas de changement par rapport à {{SpecName("DOM2 Core")}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Core','#ID-NodeHasAttrs','hasAttributes()')}}</td>
-   <td>{{Spec2('DOM2 Core')}}</td>
-   <td>Définition initiale, sur l'interface {{domxref("Node")}}.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                    | Statut                           | Commentaire                                                                                                     |
+| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | --------------------------------------------------------------------------------------------------------------- |
+| {{SpecName("DOM WHATWG", "#dom-element-hasattributes", "Element.hasAttributes()")}} | {{Spec2('DOM WHATWG')}} | Déplacé de l'interface {{domxref("Node")}} vers l'interface plus spécialisée {{domxref("Element")}}. |
+| {{SpecName('DOM3 Core','#ID-NodeHasAttrs','hasAttributes()')}}                             | {{Spec2('DOM3 Core')}}     | Pas de changement par rapport à {{SpecName("DOM2 Core")}}                                                |
+| {{SpecName('DOM2 Core','#ID-NodeHasAttrs','hasAttributes()')}}                             | {{Spec2('DOM2 Core')}}     | Définition initiale, sur l'interface {{domxref("Node")}}.                                                  |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Element.hasAttributes")}}</p>
+{{Compat("api.Element.hasAttributes")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("Element.attributes")}}</li>
- <li>{{domxref("Element.hasAttribute()")}}</li>
-</ul>
+- {{domxref("Element.attributes")}}
+- {{domxref("Element.hasAttribute()")}}
diff --git a/files/fr/web/api/element/id/index.md b/files/fr/web/api/element/id/index.md
index 29e4752a20..9dd64d63dd 100644
--- a/files/fr/web/api/element/id/index.md
+++ b/files/fr/web/api/element/id/index.md
@@ -9,60 +9,33 @@ tags:
   - Reference
 translation_of: Web/API/Element/id
 ---
-<p>{{ApiRef("DOM")}}</p>
+{{ApiRef("DOM")}}
 
-<p>La propriété  <strong><code>Element.id</code></strong> représente l'identifiant de l'élément, reflétant l' <strong><a href="/fr/docs/Web/HTML/Attributs_universels/id">id</a></strong> global de l'attribut.</p>
+La propriété **`Element.id`** représente l'identifiant de l'élément, reflétant l' **[id](/fr/docs/Web/HTML/Attributs_universels/id)** global de l'attribut.
 
-<p>Il doit être unique dans un document et est souvent utilisé pour extraire l'élément en utilisant {{domxref("document.getElementById","getElementById")}}. Les autres utilisations courantes de <code>id</code> comprennent l'utilisation de l'<a href="/fr/docs/Web/CSS/S%C3%A9lecteurs_d_ID">ID de l'élément en tant que sélecteur</a> lors de la mise en forme du document avec <a href="/fr/docs/Web/CSS">CSS</a>.</p>
+Il doit être unique dans un document et est souvent utilisé pour extraire l'élément en utilisant {{domxref("document.getElementById","getElementById")}}. Les autres utilisations courantes de `id` comprennent l'utilisation de l'[ID de l'élément en tant que sélecteur](/fr/docs/Web/CSS/S%C3%A9lecteurs_d_ID) lors de la mise en forme du document avec [CSS](/fr/docs/Web/CSS).
 
-<div class="note">
-<p><strong>Note :</strong> Les identifiants sont sensibles à la casse, mais vous devez éviter de créer des ID qui ne diffèrent que par la casse (voir <a href="/fr/docs/Archive/Case_Sensitivity_in_class_and_id_Names">Sensibilité à la casse dans les noms de classe et d'identifiant</a>).</p>
-</div>
+> **Note :** Les identifiants sont sensibles à la casse, mais vous devez éviter de créer des ID qui ne diffèrent que par la casse (voir [Sensibilité à la casse dans les noms de classe et d'identifiant](/fr/docs/Archive/Case_Sensitivity_in_class_and_id_Names)).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var <em>idStr</em> = <em>elt</em>.id; // Obtenez l'identifiant
-<em>elt</em>.id = <em>idStr; // Définir l'identifiant</em></pre>
+    var idStr = elt.id; // Obtenez l'identifiant
+    elt.id = idStr; // Définir l'identifiant
 
-<ul>
- <li><code>idStr</code> est l'identifiant de l'élément.</li>
-</ul>
+- `idStr` est l'identifiant de l'élément.
 
-<h2 id="Spécification">Spécification</h2>
+## Spécification
 
-<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('DOM WHATWG', '#dom-element-id', 'id')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Pas de changement par rapport à {{SpecName('DOM2 HTML')}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 HTML', 'html.html#ID-63534901', 'id')}}</td>
-   <td>{{Spec2('DOM2 HTML')}}</td>
-   <td>Pas de changement par rapport à {{SpecName('DOM1')}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM1', 'level-one-html.html#ID-63534901', 'id')}}</td>
-   <td>{{Spec2('DOM1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                    | Statut                           | Commentaire                                                       |
+| -------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------------------------- |
+| {{SpecName('DOM WHATWG', '#dom-element-id', 'id')}}             | {{Spec2('DOM WHATWG')}} | Pas de changement par rapport à {{SpecName('DOM2 HTML')}}. |
+| {{SpecName('DOM2 HTML', 'html.html#ID-63534901', 'id')}}     | {{Spec2('DOM2 HTML')}}     | Pas de changement par rapport à {{SpecName('DOM1')}}.     |
+| {{SpecName('DOM1', 'level-one-html.html#ID-63534901', 'id')}} | {{Spec2('DOM1')}}         | Définition initiale.                                              |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Element.id")}}</p>
+{{Compat("api.Element.id")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>L'attribut global <a href="/fr/docs/Web/HTML/Attributs_universels/id"><strong>id</strong></a> de DOM.</li>
-</ul>
+- L'attribut global [**id**](/fr/docs/Web/HTML/Attributs_universels/id) de DOM.
diff --git a/files/fr/web/api/element/index.md b/files/fr/web/api/element/index.md
index ac94a2ffc9..1ca458b754 100644
--- a/files/fr/web/api/element/index.md
+++ b/files/fr/web/api/element/index.md
@@ -4,422 +4,416 @@ slug: Web/API/Element
 translation_of: Web/API/Element
 browser-compat: api.Element
 ---
-<div>{{APIRef("DOM")}}</div>
-
-<p><strong><code>Element</code></strong> est la classe de base la plus générique dont héritent tous les objets qui représentent des éléments d'un <a href="/fr/docs/Web/API/Document"><code>Document</code></a>. Elle contient uniquement des méthodes et propriétés communes à l'ensemble des éléments. Des classes plus spécifiques héritent d'<code>Element</code>. Ainsi, l'interface <a href="/fr/docs/Web/API/HTMLElement"><code>HTMLElement</code></a> correspond à l'interface de base pour les éléments HTML tandis que l'interface <a href="/fr/docs/Web/API/SVGElement"><code>SVGElement</code></a> représente la base pour les éléments SVG. La plupart des fonctionnalités sont définies dans les classes situées plus loin dans la hiérarchie.</p>
-
-<h2 id="properties">Propriétés</h2>
-
-<p><em><code>Element</code> hérite des propriétés de son interface parente : <a href="/fr/docs/Web/API/Node"><code>Node</code></a> (et donc indirectement des propriétés du parent de celle-ci : <a href="/fr/docs/Web/API/EventTarget"><code>EventTarget</code></a>).</em></p>
-
-<dl>
-  <dt><a href="/fr/docs/Web/API/Element/assignedSlot"><code>Element.assignedSlot</code></a>{{readonlyInline}}</dt>
-  <dd>Renvoie un objet <a href="/fr/docs/Web/API/HTMLSlotElement"><code>HTMLSlotElement</code></a> représentant l'emplacement (<a href="/fr/docs/Web/HTML/Element/slot"><code>&lt;slot&gt;</code></a>) dans lequel le nœud est inséré.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/attributes"><code>Element.attributes</code></a> {{readOnlyInline}}</dt>
-  <dd>Renvoie un objet <a href="/fr/docs/Web/API/NamedNodeMap"><code>NamedNodeMap</code></a> contenant les attributs affectés de l'élément HTML correspondant.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/childElementCount"><code>Element.childElementCount</code></a> {{readonlyInline}}</dt>
-  <dd>Renvoie le nombre d'éléments enfants de cet élément.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/children"><code>Element.children</code></a> {{readonlyInline}}</dt>
-  <dd>Renvoie les éléments enfants de cet élément.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/classList"><code>Element.classList</code></a> {{readOnlyInline}}</dt>
-  <dd>Renvoie un objet <a href="/fr/docs/Web/API/DOMTokenList"><code>DOMTokenList</code></a> contenant la liste des attributs de classe.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/className"><code>Element.className</code></a></dt>
-  <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui représente la classe de l'élément.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/clientHeight"><code>Element.clientHeight</code></a> {{readOnlyInline}}</dt>
-  <dd>Renvoie un nombre (<a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Number"><code>Number</code></a>) représentant la hauteur intérieure de l'élément.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/clientLeft"><code>Element.clientLeft</code></a> {{readOnlyInline}}</dt>
-  <dd>Renvoie un nombre (<a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Number"><code>Number</code></a>) représentant la largeur de la bordure gauche de l'élément.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/clientTop"><code>Element.clientTop</code></a> {{readOnlyInline}}</dt>
-  <dd>Renvoie un nombre (<a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Number"><code>Number</code></a>) représentant la largeur de la bordure haute de l'élément.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/clientWidth"><code>Element.clientWidth</code></a> {{readOnlyInline}}</dt>
-  <dd>Renvoie un nombre (<a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Number"><code>Number</code></a>) représentant la largeur intérieure de l'élément.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/firstElementChild"><code>Element.firstElementChild</code></a> {{readonlyInline}}</dt>
-  <dd>Renvoie le premier élément enfant de cet élément.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/id"><code>Element.id</code></a></dt>
-  <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui représente l'identifiant de l'élément.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/innerHTML"><code>Element.innerHTML</code></a></dt>
-  <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui représente le balisage du contenu de l'élément.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/lastElementChild"><code>Element.lastElementChild</code></a> {{readonlyInline}}</dt>
-  <dd>Renvoie le dernier élément enfant de cet élément.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/localName"><code>Element.localName</code></a> {{readOnlyInline}}</dt>
-  <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui représente la partie locale pour le nom qualifié de l'élément.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/namespaceURI"><code>Element.namespaceURI</code></a> {{readonlyInline}}</dt>
-  <dd>L'URI pour l'espace de noms de l'élément ou <code>null</code> s'il n'y en a pas.
-  <div class="note">
-  <p><strong>Note :</strong> Pour Firefox 3.5 et les versions antérieures, les éléments HTML ne sont pas situés dans un espace de noms. Dans les versions ultérieures, les éléments HTML s'inscrivent dans l'espace de noms <code><a href="https://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a></code> tant pour les arbres HTML que XML.</p>
-  </div>
-  </dd>
-  <dt><a href="/fr/docs/Web/API/Element/nextElementSibling"><code>Element.nextElementSibling</code></a> {{readOnlyInline}}</dt>
-  <dd>Un objet <code>Element</code> qui représente l'élément qui suit immédiatement l'élément courant dans l'arbre ou <code>null</code> si l'élément courant n'a pas de voisin.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/outerHTML"><code>Element.outerHTML</code></a></dt>
-  <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui représente le balisage de l'élément (incluant son contenu). Lorsque cette propriété est utilisée en modification, cela remplace l'élément avec les noeuds construits à partir de l'analyse de la chaîne de caractères fournie.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/part"><code>Element.part</code></a></dt>
-  <dd>Représente les identifiants des parties de l'élément (c'est-à-dire ceux définis avec l'attribut <code>part</code>) sous la forme d'un objet <a href="/fr/docs/Web/API/DOMTokenList"><code>DOMTokenList</code></a>.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/prefix"><code>Element.prefix</code></a> {{readOnlyInline}}</dt>
-  <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui représente le préfixe de l'espace de nom pour l'élément ou <code>null</code> si aucun préfixe n'est défini.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/previousElementSibling"><code>Element.previousElementSibling</code></a> {{readOnlyInline}}</dt>
-  <dd>Un objet <code>Element</code> qui représente l'élément qui précède immédiatement l'élément courant dans l'arbre ou <code>null</code> si l'élément courant n'a pas de voisin.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/scrollHeight"><code>Element.scrollHeight</code></a> {{readOnlyInline}}</dt>
-  <dd>Renvoie un nombre (<a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Number"><code>Number</code></a>) représentant la hauteur de la vue de défilement pour l'élément.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/scrollLeft"><code>Element.scrollLeft</code></a></dt>
-  <dd>Un nombre (<a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Number"><code>Number</code></a>) qui représente le décalage à gauche de l'élément lié au défilement.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/scrollLeftMax"><code>Element.scrollLeftMax</code></a> {{Non-standard_Inline}} {{readOnlyInline}}</dt>
-  <dd>Renvoie un nombre (<a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Number"><code>Number</code></a>) représentant le décalage à gauche maximal pour l'élément lors du défilement.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/scrollTop"><code>Element.scrollTop</code></a></dt>
-  <dd>Un nombre (<a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Number"><code>Number</code></a>) qui représente le nombre de pixels dont on a fait défiler verticalement le haut de l'élément.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/scrollTopMax"><code>Element.scrollTopMax</code></a> {{Non-standard_Inline}} {{readOnlyInline}}</dt>
-  <dd>Renvoie un nombre (<a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Number"><code>Number</code></a>) représentant le décalage maximal depuis le haut de l'élément lors du défilement.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/scrollWidth"><code>Element.scrollWidth</code></a> {{readOnlyInline}}</dt>
-  <dd>Renvoie un nombre (<a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Number"><code>Number</code></a>) représentant la largeur de la vue de défilement pour l'élément.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/shadowRoot"><code>Element.shadowRoot</code></a>{{readOnlyInline}}</dt>
-  <dd>Renvoie la racine sombre ouverte (<i lang="en">open shadow root</i>) hébergée par l'élément ou <code>null</code> si aucune racine sombre ouverte n'est présente.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/openOrClosedShadowRoot"><code>Element.openOrClosedShadowRoot</code></a> {{Non-standard_Inline}}{{readOnlyInline}}</dt>
-  <dd>Renvoie la racine sombre hébergée par l'élément (qu'elle soit ouverte ou fermée). <strong>Uniquement disponible pour <a href="/fr/docs/Mozilla/Add-ons/WebExtensions">les WebExtensions</a>.</strong></dd>
-  <dt><a href="/fr/docs/Web/API/Element/slot"><code>Element.slot</code></a> {{Experimental_Inline}}</dt>
-  <dd>Renvoie le nom de l'emplacement du DOM sombre dans lequel l'élément est inséré.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/tagName"><code>Element.tagName</code></a> {{readOnlyInline}}</dt>
-  <dd>Renvoie une chaîne de caractères (<a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String"><code>String</code></a>) qui est le nom de la balise pour l'élément courant.</dd>
-</dl>
-
-<h3 id="properties_included_from_aria">Propriétés provenant d'ARIA</h3>
-
-<p><em>L'interface <code>Element</code> inclut les propriétés suivantes, définies sur le <i lang="en">mixin</i> <code>ARIAMixin</code>.</em></p>
-
-<dl>
-  <dt><a href="/fr/docs/Web/API/Element/ariaAtomic"><code>Element.ariaAtomic</code></a></dt>
-  <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui reflète l'attribut <code>aria-atomic</code> qui indique si des technologies d'assistance présenteront tout ou partie de la région modifiée selon les notifications définies par l'attribut <code>aria-relevant</code>.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/ariaAutoComplete"><code>Element.ariaAutoComplete</code></a></dt>
-  <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui reflète l'attribut <code>aria-autocomplete</code> qui indique si la saisie de texte peut déclencher l'affichage d'une ou plusieurs prédictions pour la valeur saisie par l'utilisateur à destination d'une liste de choix, d'une boîte de recherche ou d'une zone de texte. Elle indique également la façon dont les éventuelles prédictions seraient présentées.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/ariaBusy"><code>Element.ariaBusy</code></a></dt>
-  <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui reflète l'attribut <code>aria-busy</code> qui indique d'un élément est en train d'être modifié. Les technologies d'assistance peuvent alors faire le choix d'attendre la fin de la modification avant d'exposer le contenu à l'utilisateur.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/ariaChecked"><code>Element.ariaChecked</code></a></dt>
-  <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui reflète l'attribut <code>aria-checked</code> indiquant l'état coché (ou non) des cases à cocher, des boutons radio ou des autres éléments d'interface graphique qui peuvent être cochés.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/ariaColCount"><code>Element.ariaColCount</code></a></dt>
-  <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui reflète l'attribut <code>aria-colcount</code> indiquant le nombre de colonnes d'un tableau, d'une grille ou d'une grille arborescente.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/ariaColIndex"><code>Element.ariaColIndex</code></a></dt>
-  <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui reflète l'attribut <code>aria-colindex</code> qui définit l'indice de la colonne d'un élément ou sa position par rapport au nombre total de colonnes d'un tableau, d'une grille ou d'une grille arborescente.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/ariaColIndexText"><code>Element.ariaColIndexText</code></a></dt>
-  <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui reflète l'attribut <code>aria-colindextext</code> qui définit texte alternatif à <code>aria-colindex</code> qui soit compréhensible par un humain.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/ariaColSpan"><code>Element.ariaColSpan</code></a></dt>
-  <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui reflète l'attribut <code>aria-colspan</code> qui définit le nombre de colonnes sur lesquelles s'étend une cellule dans un tableau, une grille ou une grille arborescente.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/ariaCurrent"><code>Element.ariaCurrent</code></a></dt>
-  <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui reflète l'attribut <code>aria-current</code> qui indique l'élément représente l'objet courant dans un conteneur ou un ensemble d'éléments.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/ariaDescription"><code>Element.ariaDescription</code></a></dt>
-  <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui reflète l'attribut <code>aria-description</code> qui définit la chaîne de caractères pour décrire ou annoter l'élément courant.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/ariaDisabled"><code>Element.ariaDisabled</code></a></dt>
-  <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui reflète l'attribut <code>aria-disabled</code> qui indique que l'élément est perceptible mais désactivé et qu'il ne peut être édité ou manipulé.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/ariaExpanded"><code>Element.ariaExpanded</code></a></dt>
-  <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui reflète l'attribut <code>aria-expanded</code> qui indique si un élément de groupement contrôlé par l'élément courant est développé ou replié.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/ariaHasPopup"><code>Element.ariaHasPopup</code></a></dt>
-  <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui reflète l'attribut <code>aria-haspopup</code> qui indique la disponibilité et le type d'élément interactif visuel comme un menu ou une boîte de dialogue pouvant être généré par l'élément courant.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/ariaHidden"><code>Element.ariaHidden</code></a></dt>
-  <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui reflète l'attribut <code>aria-hidden</code> qui indique si l'élément est exposé à une API d'accessibilité.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/ariaKeyShortcuts"><code>Element.ariaKeyShortcuts</code></a></dt>
-  <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui reflète l'attribut <code>aria-keyshortcuts</code> qui indique les raccourcis clavier implémentés spécifiquement pour activer ou fournir le focus à un élément.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/ariaLabel"><code>Element.ariaLabel</code></a></dt>
-  <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui reflète l'attribut <code>aria-label</code> qui définit une chaîne de caractères étant un libellé pour l'élément courant.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/ariaLevel"><code>Element.ariaLevel</code></a></dt>
-  <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui reflète l'attribut <code>aria-level</code> qui définit le niveau hiérarchique de l'élément au sein d'une structure.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/ariaLive"><code>Element.ariaLive</code></a></dt>
-  <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui reflète l'attribut <code>aria-live</code> qui indique que l'élément sera mis à jour et qui décrit les types de mises à jour qui peuvent être attendues par les agents utilisateur, les outils d'assistance et l'utilisateur.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/ariaModal"><code>Element.ariaModal</code></a></dt>
-  <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui reflète l'attribut <code>aria-modal</code> qui indique si un élément est modal lorsqu'il est affiché.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/ariaMultiline"><code>Element.ariaMultiline</code></a></dt>
-  <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui reflète l'attribut <code>aria-multiline</code> qui indique si une zone de texte accepte une saisie sur plusieurs lignes ou sur une seule ligne.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/ariaMultiSelectable"><code>Element.ariaMultiSelectable</code></a></dt>
-  <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui reflète l'attribut <code>aria-multiselectable</code> qui indique que la personne peut choisir plus d'un élément parmi les éléments descendants qui peuvent être sélectionnés.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/ariaOrientation"><code>Element.ariaOrientation</code></a></dt>
-  <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui reflète l'attribut <code>aria-orientation</code> qui indique si l'orientation de l'élément est horizontale, verticale ou inconnue voire ambigüe.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/ariaPlaceholder"><code>Element.ariaPlaceholder</code></a></dt>
-  <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui reflète l'attribut <code>aria-placeholder</code> qui définit une indication courte destinée à aider l'utilisateur à saisir une valeur lorsque le contrôle ne possède pas de valeur.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/ariaPosInSet"><code>Element.ariaPosInSet</code></a></dt>
-  <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui reflète l'attribut <code>aria-posinset</code> qui définit l'index ou la position de l'élément courant dans l'ensemble ou l'arbre d'éléments.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/ariaPressed"><code>Element.ariaPressed</code></a></dt>
-  <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui reflète l'attribut <code>aria-pressed</code> qui indique l'état actif/pressé des boutons.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/ariaReadOnly"><code>Element.ariaReadOnly</code></a></dt>
-  <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui reflète l'attribut <code>aria-readonly</code> qui indique que l'élément ne peut pas être édité mais qu'il peut être utilisé sinon.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/ariaRelevant"><code>Element.ariaRelevant</code></a></dt>
-  <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui reflète l'attribut <code>aria-relevant</code> qui indique les notifications qui seront déclenchées par l'agent utilisateur lorsque l'arbre d'accessibilité d'une région interactive sera modifié. Cette propriété est utilisée afin de décrire quels changements d'une région <code>aria-live</code> sont pertinents et devraient être annoncés.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/ariaRequired"><code>Element.ariaRequired</code></a></dt>
-  <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui reflète l'attribut <code>aria-required</code> qui indique que la saisie d'une utilisatrice ou d'un utilisateur est requise sur l'élément avant qu'un formulaire puisse être envoyé.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/ariaRoleDescription"><code>Element.ariaRoleDescription</code></a></dt>
-  <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui reflète l'attribut <code>aria-roledescription</code> qui définit une description compréhensible par un humain, adaptée par l'autrice ou l'auteur du document pour le rôle de l'élément courant.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/ariaRowCount"><code>Element.ariaRowCount</code></a></dt>
-  <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui reflète l'attribut <code>aria-rowcount</code> qui définit le nombre total de lignes dans un tableau, une grille ou une grille arborescente.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/ariaRowIndex"><code>Element.ariaRowIndex</code></a></dt>
-  <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui reflète l'attribut <code>aria-rowindex</code> qui définit l'index ou la position de la ligne de l'élément par rapport au nombre total de lignes dans le tableau, la grille ou la grille arborescente.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/ariaRowIndexText"><code>Element.ariaRowIndexText</code></a></dt>
-  <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui reflète l'attribut <code>aria-rowindextext</code> qui définit un libellé alternatif à <code>aria-rowindex</code>, compréhensible par un humain.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/ariaRowSpan"><code>Element.ariaRowSpan</code></a></dt>
-  <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui reflète l'attribut <code>aria-rowspan</code> qui définit le nombre de lignes sur lesquelles s'étend une cellule dans un tableau, une grille ou une grille arborescente.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/ariaSelected"><code>Element.ariaSelected</code></a></dt>
-  <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui reflète l'attribut <code>aria-selected</code> qui indique l'état de sélection pour les éléments qui peuvent être sélectionnés.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/ariaSetSize"><code>Element.ariaSetSize</code></a></dt>
-  <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui reflète l'attribut <code>aria-setsize</code> qui définit le nombre d'objets dans l'ensemble d'éléments d'une liste ou d'un arbre.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/ariaSort"><code>Element.ariaSort</code></a></dt>
-  <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui reflète l'attribut <code>aria-sort</code> qui indique si les objets d'un tableau ou d'une grille sont triés par ordre croissant ou décroissant.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/ariaValueMax"><code>Element.ariaValueMax</code></a></dt>
-  <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui reflète l'attribut <code>aria-valueMax</code> qui définit la valeur maximale autorisée pour un élément d'interface utilisateur décrivant un intervalle.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/ariaValueMin"><code>Element.ariaValueMin</code></a></dt>
-  <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui reflète l'attribut <code>aria-valueMin</code> qui définit la valeur minimale autorisée pour un élément d'interface utilisateur décrivant un intervalle.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/ariaValueNow"><code>Element.ariaValueNow</code></a></dt>
-  <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui reflète l'attribut <code>aria-valueNow</code> qui définit la valeur courante d'un élément d'interface utilisateur décrivant un intervalle.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/ariaValueText"><code>Element.ariaValueText</code></a></dt>
-  <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui reflète l'attribut <code>aria-valuetext</code> qui définit une alternative textuelle à <code>aria-valuenow</code> compréhensible par un humain.</dd>
-</dl>
-
-<h3 id="handlers">Gestionnaires d'évènements</h3>
-
-<dl>
-  <dt><a href="/fr/docs/Web/API/Element/onfullscreenchange"><code>Element.onfullscreenchange</code></a></dt>
-  <dd>Un gestionnaire d'évènement pour l'évènement <a href="/fr/docs/Web/API/Document/fullscreenchange_event"><code>fullscreenchange</code></a> qui est envoyé lorsque l'élément passe en mode plein écran ou sort de celui-ci. Cet évènement peut être utilisé pour surveiller les transitions entre les deux modes mais aussi pour surveiller les modifications inattendues comme lorsque l'application s'exécute en arrière-plan.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/onfullscreenerror"><code>Element.onfullscreenerror</code></a></dt>
-  <dd>Un gestionnaire d'évènement pour <a href="/fr/docs/Web/API/Document/fullscreenerror_event"><code>fullscreenerror</code></a> qui est envoyé lorsqu'une erreur se produit lors du passage au mode plein écran.</dd>
-</dl>
-
-<h2 id="methods">Méthodes</h2>
-
-<p><em><code>Element</code> hérite des méthodes fournit par la classe parente <a href="/fr/docs/Web/API/Node"><code>Node</code></a> et de sa classe parente avant elle : <a href="/fr/docs/Web/API/EventTarget"><code>EventTarget</code></a>.</em></p>
-
-<dl>
-  <dt><a href="/fr/docs/Web/API/EventTarget/addEventListener"><code>EventTarget.addEventListener()</code></a></dt>
-  <dd>Enregistre un gestionnaire d'évènement sur l'élément pour un type d'évènement donné.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/after"><code>Element.after()</code></a></dt>
-  <dd>Insère un ensemble d'objets <a href="/fr/docs/Web/API/Node"><code>Node</code></a> ou <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> dans la liste des enfants du parent de l'élément courant, juste après ce dernier.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/attachShadow"><code>Element.attachShadow()</code></a></dt>
-  <dd>Attache un arbre du DOM sombre à l'élément indiqué puis renvoie une référence à sa racine <a href="/fr/docs/Web/API/ShadowRoot"><code>ShadowRoot</code></a>.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/animate"><code>Element.animate()</code></a> {{Experimental_Inline}}</dt>
-  <dd>Une méthode synthétique pour créer et exécuter une animation sur un élément. Renvoie l'instance de l'objet <code>Animation</code> créé.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/append"><code>Element.append()</code></a></dt>
-  <dd>Insère un ensemble d'objet <a href="/fr/docs/Web/API/Node"><code>Node</code></a> ou <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> après le dernier enfant de l'élément.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/before"><code>Element.before()</code></a></dt>
-  <dd>Insère un ensemble d'objet <a href="/fr/docs/Web/API/Node"><code>Node</code></a> ou <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> dans la liste des enfants du parent de l'élément courant, juste avant ce dernier.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/closest"><code>Element.closest()</code></a></dt>
-  <dd>Renvoie l'élément (<code>Element</code>) qui est le plus proche ancêtre de l'élément courant (ou l'élément courant lui-même) qui correspond au sélecteur passé en paramètre.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/createShadowRoot"><code>Element.createShadowRoot()</code></a> {{Non-standard_Inline}} {{Deprecated_Inline}}</dt>
-  <dd>Crée un <a href="/fr/docs/Web/Web_Components/Using_shadow_DOM">DOM sombre</a> sur l'élément, le transformant ainsi en hôte sombre. Renvoie un objet <a href="/fr/docs/Web/API/ShadowRoot"><code>ShadowRoot</code></a>.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/computedStyleMap"><code>Element.computedStyleMap()</code></a> {{Experimental_Inline}}</dt>
-  <dd>Renvoie une interface <a href="/fr/docs/Web/API/StylePropertyMapReadOnly"><code>StylePropertyMapReadOnly</code></a> qui fournit une représentation en lecture seule d'un bloc de déclaration CSS alternatif à <a href="/fr/docs/Web/API/CSSStyleDeclaration"><code>CSSStyleDeclaration</code></a>.</dd>
-  <dt><a href="/fr/docs/Web/API/EventTarget/dispatchEvent"><code>EventTarget.dispatchEvent()</code></a></dt>
-  <dd>Diffuse un évènement sur ce nœud dans le DOM et renvoie un booléen qui indique si aucun gestionnaire n'a annulé l'évènement.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/getAnimations"><code>Element.getAnimations()</code></a> {{Experimental_Inline}}</dt>
-  <dd>Renvoie un tableau des objets <code>Animation</code> actuellement actifs sur l'élément.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/getAttribute"><code>Element.getAttribute()</code></a></dt>
-  <dd>Récupère la valeur de l'attribut nommé  pour le nœud courant et le renvoie comme un <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Object">objet</a>.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/getAttributeNames"><code>Element.getAttributeNames()</code></a></dt>
-  <dd>Renvoie un tableau de noms d'attribut pour l'élément courant.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/getAttributeNode"><code>Element.getAttributeNode()</code></a></dt>
-  <dd>Récupère la représentation du nœud pour l'attrtibut nommé du nœud courant et le renvoie comme un objet <a href="/fr/docs/Web/API/Attr"><code>Attr</code></a>.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/getAttributeNodeNS"><code>Element.getAttributeNodeNS()</code></a></dt>
-  <dd>Depuis le nœud courant, récupère la représentation du nœud pour l'attribut avec le nom et l'espace de noms indiqués et renvoie la valeur obtenue sous la forme d'un objet <a href="/fr/docs/Web/API/Attr"><code>Attr</code></a>.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/getAttributeNS"><code>Element.getAttributeNS()</code></a></dt>
-  <dd>Depuis le nœud courant, récupère la valeur de l'attribut avec le nom et l'espace de noms indiqués et la renvoie sous la forme d'un <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Object">objet</a>.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/getBoundingClientRect"><code>Element.getBoundingClientRect()</code></a></dt>
-  <dd>Renvoie la taille d'un élément et sa position relative dans la zone d'affichage (<i lang="en">viewport</i>).</dd>
-  <dt><a href="/fr/docs/Web/API/Element/getBoxQuads"><code>Element.getBoxQuads()</code></a> {{experimental_inline}}</dt>
-  <dd>Renvoie une liste d'objets <a href="/fr/docs/Web/API/DOMQuad"><code>DOMQuad</code></a> qui représentent les fragments CSS pour le nœud.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/getClientRects"><code>Element.getClientRects()</code></a></dt>
-  <dd>Renvoie une collection de rectangles qui indique les rectangles englobants pour chaque ligne de texte d'un client.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/getElementsByClassName"><code>Element.getElementsByClassName()</code></a></dt>
-  <dd>Renvoie une collection dynamique <a href="/fr/docs/Web/API/HTMLCollection"><code>HTMLCollection</code></a> qui contient tous les descendants de l'élément courant et qui possèdent la liste de classes fournie en paramètre.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/getElementsByTagName"><code>Element.getElementsByTagName()</code></a></dt>
-  <dd>Renvoie une collection dynamique <a href="/fr/docs/Web/API/HTMLCollection"><code>HTMLCollection</code></a> qui contient tous les descendants de l'élément courant avec un nom de balise donné.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/getElementsByTagNameNS"><code>Element.getElementsByTagNameNS()</code></a></dt>
-  <dd>Renvoie une collection dynamique <a href="/fr/docs/Web/API/HTMLCollection"><code>HTMLCollection</code></a> qui contient tous les descendants de l'élément courant qui ont un nom de balise et un espace de noms donnés.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/hasAttribute"><code>Element.hasAttribute()</code></a></dt>
-  <dd>Renvoie un booléen indiquant si l'élément courant possède l'attribut donné.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/hasAttributeNS"><code>Element.hasAttributeNS()</code></a></dt>
-  <dd>Renvoie un booléen indiquant si l'élément courant possède l'attribut donné pour l'espace de noms donné.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/hasAttributes"><code>Element.hasAttributes()</code></a></dt>
-  <dd>Renvoie un booléen qui indique si l'élément courant a un ou plusieurs attributs HTML.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/hasPointerCapture"><code>Element.hasPointerCapture()</code></a></dt>
-  <dd>Indique si l'élément a la capture du pointeur pour le pointeur identifié par l'identifiant passé en argument.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/insertAdjacentElement"><code>Element.insertAdjacentElement()</code></a></dt>
-  <dd>Insère un nœud d'élément à la position relative indiquée par rapport à l'élément courant.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/insertAdjacentHTML"><code>Element.insertAdjacentHTML()</code></a></dt>
-  <dd>Analyse le texte comme HTML ou XML puis insère les nœuds résultatns dans l'arbre à la position indiquée.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/insertAdjacentText"><code>Element.insertAdjacentText()</code></a></dt>
-  <dd>Insère un nœud textuel à la position relative indiquée, par rapport à l'élément courant.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/matches"><code>Element.matches()</code></a></dt>
-  <dd>Renvoie un booléen qui indique si l'élément serait ciblé par la chaîne de caractères passée en argument qui décrit un sélecteur.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/prepend"><code>Element.prepend()</code></a></dt>
-  <dd>Insère un ensemble d'objets <a href="/fr/docs/Web/API/Node"><code>Node</code></a> ou <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> avant le premier enfant de l'élément courant.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/querySelector"><code>Element.querySelector()</code></a></dt>
-  <dd>Renvoie le premier objet <a href="/fr/docs/Web/API/Node"><code>Node</code></a> qui correspond au sélecteur donné, relatif à l'élément courant.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/querySelectorAll"><code>Element.querySelectorAll()</code></a></dt>
-  <dd>Renvoie un objet <a href="/fr/docs/Web/API/NodeList"><code>NodeList</code></a> contenant les nœuds pour lesquels le sélecteur, passé en argument, relatif à l'élément courant.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/releasePointerCapture"><code>Element.releasePointerCapture()</code></a></dt>
-  <dd>Libère (arrête) la capture du pointeur précédemment activée pour un évènement de pointeur spécifique.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/remove"><code>Element.remove()</code></a></dt>
-  <dd>Retire l'élément de la liste des éléments enfants de son parent.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/removeAttribute"><code>Element.removeAttribute()</code></a></dt>
-  <dd>Retire l'attribut nommé du nœud courant.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/removeAttributeNode"><code>Element.removeAttributeNode()</code></a></dt>
-  <dd>Retire la représentation nodale de l'attribut nommé pour le nœud courant.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/removeAttributeNS"><code>Element.removeAttributeNS()</code></a></dt>
-  <dd>Sur le nœud courant, retire l'attribut avec le nom et l'espace de noms indiqués.</dd>
-  <dt><a href="/fr/docs/Web/API/EventTarget/removeEventListener"><code>EventTarget.removeEventListener()</code></a></dt>
-  <dd>Retire un gestionnaire d'évènement de l'élément.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/replaceChildren"><code>Element.replaceChildren()</code></a></dt>
-  <dd>Remplace l'enfant existant d'un nœud avec un nouvel ensemble d'enfants.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/replaceWith"><code>Element.replaceWith()</code></a></dt>
-  <dd>Remplace l'élément dans la liste des enfants de son parent par un ensemble d'objets <a href="/fr/docs/Web/API/Node"><code>Node</code></a> ou <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a>.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/requestFullScreen"><code>Element.requestFullscreen()</code></a> {{Experimental_Inline}}</dt>
-  <dd>Demande au navigateur, de façon asynchrone, d'afficher l'élément en plein écran.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/requestPointerLock"><code>Element.requestPointerLock()</code></a> {{Experimental_Inline}}</dt>
-  <dd>Demande au navigateur, de façon asynchrone, de bloquer le pointeur sur l'élément indiqué.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/scroll"><code>Element.scroll()</code></a></dt>
-  <dd>Défile jusqu'à un ensemble de coordonnées données à l'intérieur de l'élément courant.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/scrollBy"><code>Element.scrollBy()</code></a></dt>
-  <dd>Défile un élément de la quantité indiquée.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/scrollIntoView"><code>Element.scrollIntoView()</code></a> {{Experimental_Inline}}</dt>
-  <dd>Défile la page jusqu'à ce que l'élément apparaisse dans la vue.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/scrollTo"><code>Element.scrollTo()</code></a></dt>
-  <dd>Défile jusqu'à un ensemble de coordonnées particulier à l'intérieur de l'élément donné.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/setAttribute"><code>Element.setAttribute()</code></a></dt>
-  <dd>Définit la valeur d'un attribut nommé pour le nœud courant.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/setAttributeNode"><code>Element.setAttributeNode()</code></a></dt>
-  <dd>Définit la représentation nodale d'un attribut nommé pour le nœud courant.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/setAttributeNodeNS"><code>Element.setAttributeNodeNS()</code></a></dt>
-  <dd>Pour le nœud courant, définit la représentation nodale d'un attribut avec le nom et l'espace de noms indiqués.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/setAttributeNS"><code>Element.setAttributeNS()</code></a></dt>
-  <dd>Pour le nœud courant, définit la valeur de l'attribut avec le nom et l'espace de noms indiqués.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/setCapture"><code>Element.setCapture()</code></a> {{Non-standard_Inline}}{{Deprecated_Inline}}</dt>
-  <dd>Initialise la capture des évènements liés à la souris, redirigeant ainsi tous les évènements de la souris sur cet élément.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/setPointerCapture"><code>Element.setPointerCapture()</code></a></dt>
-  <dd>Désigne un élément spécifique comme future cible pour la capture des <a href="/fr/docs/Web/API/Pointer_events">évènements de pointeur</a>.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/toggleAttribute"><code>Element.toggleAttribute()</code></a></dt>
-  <dd>Active/désactive un attribut booléen sur l'élément courant : s'il est présent, cela le retire et s'il est absent, cela l'ajoute.</dd>
-</dl>
-
-<h2 id="events">Évènements</h2>
-
-<p>On peut écouter ces évènements en utilisant la méthode <code>addEventListener()</code> ou en affectant un gestionnaire d'évènement à la propriété <code>on<em>nomevenement</em></code> de cette interface.</p>
-
-<dl>
-  <dt><a href="/fr/docs/Web/API/HTMLDialogElement/cancel_event"><code>cancel</code></a></dt>
-  <dd>Déclenché sur un élément <a href="/fr/docs/Web/HTML/Element/dialog"><code>&lt;dialog&gt;</code></a> lorsque la personne indique au navigateur le souhait de fermer la boîte de dialogue courante. Un navigateur pourra par exemple déclencher cet évènement lors d'un appui sur la touche <kbd>Echap</kbd> ou lors d'un clic sur le bouton « Fermer cette boîte de dialogue » fourni par le navigateur. Également disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/oncancel"><code>oncancel</code></a>.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/error_event"><code>error</code></a></dt>
-  <dd>Déclenché lors de l'échec du chargement d'une ressource ou lorsque celle-ci ne peut être utilisée. Cet évènement sera par exemple déclenché lors d'une erreur d'exécution d'un script ou lorsqu'une image ne peut être trouvée ou est invalide. Également disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/onerror"><code>onerror</code></a>.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/scroll_event"><code>scroll</code></a></dt>
-  <dd>Déclenché lors du défilement de la vue du document ou d'un élément. Également disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/onscroll"><code>onscroll</code></a>.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/select_event"><code>select</code></a></dt>
-  <dd>Déclenché lors de la sélection de texte. Également disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/onselect"><code>onselect</code></a>.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/show_event"><code>show</code></a></dt>
-  <dd>Déclenché lorsqu'un évènement <a href="/fr/docs/Web/API/Element/contextmenu_event"><code>contextmenu</code></a> a été déclenché ou a bouillonné sur un élément qui dispose de l'attribut <code><a href="/fr/docs/Web/HTML/Global_attributes/contextmenu">contextmenu</a></code> attribute. {{deprecated_inline}} Également disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/onshow"><code>onshow</code></a>.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/wheel_event"><code>wheel</code></a></dt>
-  <dd>Déclenché lorsque l'utilisateur fait tourner la molette d'un appareil de pointage (généralement une souris). Également disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/onwheel"><code>onwheel</code></a>.</dd>
-</dl>
-
-<h3 id="clipboard_events">Évènements du presse-papiers</h3>
-
-<dl>
-  <dt><a href="/fr/docs/Web/API/Element/copy_event"><code>copy</code></a></dt>
-  <dd>Déclenché lorsque l'utilisateur initie une action de copie via l'interface du navigateur. Également disponible via la propriété <a href="/fr/docs/Web/API/HTMLElement/oncopy"><code>oncopy</code></a>.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/cut_event"><code>cut</code></a></dt>
-  <dd>Déclenché lorsque l'utilisateur initie une action de coupe via l'interface du navigateur. Également disponible via la propriété <a href="/fr/docs/Web/API/HTMLElement/oncut"><code>oncut</code></a>.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/paste_event"><code>paste</code></a></dt>
-  <dd>Déclenché lorsque l'utilisateur initie une action pour coller via l'interface du navigateur. Également disponible via la propriété <a href="/fr/docs/Web/API/HTMLElement/onpaste"><code>onpaste</code></a>.</dd>
-</dl>
-
-<h3 id="composition_events">Évènements de composition</h3>
-
-<dl>
-  <dt><a href="/fr/docs/Web/API/Element/compositionend_event"><code>compositionend</code></a></dt>
-  <dd>Déclenché lorsqu'un système de composition textuel tel qu'un <a href="/fr/docs/Glossary/Input_method_editor">éditeur de méthode de saisie</a> termine ou annule la session de composition courante.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/compositionstart_event"><code>compositionstart</code></a></dt>
-  <dd>Déclenché lorsqu'un système de composition textuel tel qu'un <a href="/fr/docs/Glossary/Input_method_editor">éditeur de méthode de saisie</a> démarre une nouvelle session de composition.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/compositionupdate_event"><code>compositionupdate</code></a></dt>
-  <dd>Déclenché lorsqu'un nouveau caractère est reçu dans le contexte d'une session de composition textuelle.</dd>
-</dl>
-
-<h3 id="focus_events">Évènements pour le focus</h3>
-
-<dl>
-  <dt><a href="/fr/docs/Web/API/Element/blur_event"><code>blur</code></a></dt>
-  <dd>Déclenché lorsqu'un élément a perdu le focus. Également disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/onblur"><code>onblur</code></a>.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/focus_event"><code>focus</code></a></dt>
-  <dd>Déclenché lorsqu'un élément reçoit le focus. Également disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/onfocus"><code>onfocus</code></a>.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/focusin_event"><code>focusin</code></a></dt>
-  <dd>Déclenché lorsqu'un élément s'apprête à recevoir le focus.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/focusout_event"><code>focusout</code></a></dt>
-  <dd>Déclenché lorsqu'un élément s'apprête à perdre le focus.</dd>
-</dl>
-
-<h3 id="fullscreen_events">Évènements relatifs au plein écran</h3>
-
-<dl>
-  <dt><a href="/fr/docs/Web/API/Element/fullscreenchange_event"><code>fullscreenchange</code></a></dt>
-  <dd>Envoyé à un élément (<code>Element</code>) lorsque celui-ci effectue une transition (entrée ou sortie) pour le mode <a href="/fr/docs/Web/API/Fullscreen_API/Guide">plein écran</a>. Également disponible via la propriété <a href="/fr/docs/Web/API/Element/onfullscreenchange"><code>onfullscreenchange</code></a>.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/fullscreenerror_event"><code>fullscreenerror</code></a></dt>
-  <dd>Envoyé à un élément <code>Element</code> si une erreur se produit lors d'une transition (entrée ou sortie) pour le mode <a href="/fr/docs/Web/API/Fullscreen_API/Guide">plein écran</a>. Également disponible via la propriété <a href="/fr/docs/Web/API/Element/onfullscreenerror"><code>onfullscreenerror</code></a>.</dd>
-</dl>
-
-<h3 id="keyboard_events">Évènements relatifs au clavier</h3>
-
-<dl>
-  <dt><a href="/fr/docs/Web/API/Element/keydown_event"><code>keydown</code></a></dt>
-  <dd>Déclenché lors de l'appui sur une touche du clavier. Également disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/onkeydown"><code>onkeydown</code></a>.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/keypress_event"><code>keypress</code></a></dt>
-  <dd>Déclenché lorsqu'une touche produit un caractère lorsqu'elle est pressée. {{deprecated_inline}} Également disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/onkeypress"><code>onkeypress</code></a>.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/keyup_event"><code>keyup</code></a></dt>
-  <dd>Déclenché lorsqu'une touche est relâchée. Également disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/onkeyup"><code>onkeyup</code></a>.</dd>
-</dl>
-
-<h3 id="mouse_events">Évènements relatifs à la souris</h3>
-
-<dl>
-  <dt><a href="/fr/docs/Web/API/Element/auxclick_event"><code>auxclick</code></a></dt>
-  <dd>Déclenché lorsqu'un bouton non primaire d'un appareil de pointage (c'est-à-dire tout bouton de la souris en dehors du bouton gauche) a été pressé puis relâché sur un élément. Également disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/onauxclick"><code>onauxclick</code></a>.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/click_event"><code>click</code></a></dt>
-  <dd>Déclenché lorsqu'un bouton d'un appareil de pointage (par exemple le bouton gauche de la souris) a été pressé puis relâche sur un élément. Également disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/onclick"><code>onclick</code></a>.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/contextmenu_event"><code>contextmenu</code></a></dt>
-  <dd>Déclenché lorsqu'un utilisateur tente d'ouvrir un menu contextuel. Également disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/oncontextmenu"><code>oncontextmenu</code></a>.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/dblclick_event"><code>dblclick</code></a></dt>
-  <dd>Déclenché lorsqu'un bouton d'un appareil de pointage (par exemple le bouton gauche de la souris) a été utilisé pour un double-clic sur un élément. Également disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/ondblclick"><code>ondblclick</code></a>.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/DOMActivate_event"><code>DOMActivate</code></a> {{Deprecated_Inline}}</dt>
-  <dd>Se produit lorsqu'un élément est activé, par exemple avec un clic de souris ou l'appui d'une touche.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/mousedown_event"><code>mousedown</code></a></dt>
-  <dd>Déclenché lorsqu'un bouton d'un appareil de pointage est pressé sur un élément. Également disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/onmousedown"><code>onmousedown</code></a>.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/mouseenter_event"><code>mouseenter</code></a></dt>
-  <dd>Déclenché lorsqu'un appareil de pointage (généralement une souris) est déplacé pour arriver sur l'élément disposant du gestionnaire d'évènement. Également disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/onmouseenter"><code>onmouseenter</code></a>.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/mouseleave_event"><code>mouseleave</code></a></dt>
-  <dd>Déclenché lorsque le pointeur d'un appareil de pointage (généralement une souris) est déplacée en dehors de l'élément qui dispose du gestionnaire d'évènement. Également disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/onmouseleave"><code>onmouseleave</code></a>.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/mousemove_event"><code>mousemove</code></a></dt>
-  <dd>Déclenché lorsqu'un appareil de pointage (généralement une souris) est déplacé sur un élément. Également disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/onmousemove"><code>onmousemove</code></a>.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/mouseout_event"><code>mouseout</code></a></dt>
-  <dd>Déclenché lorsqu'un appareil de pointage (généralement une souris) se déplace pour quitter l'élément qui dispose du gestionnaire d'évènement (ou lorsque le pointeur quitte l'un des enfants de cet élément). Également disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/onmouseout"><code>onmouseout</code></a>.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/mouseover_event"><code>mouseover</code></a></dt>
-  <dd>Déclenché lorsqu'un appareil de pointage arrive sur l'élément (ou l'un de ses enfants) qui dispose du gestionnaire d'évènement. Également disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/onmouseover"><code>onmouseover</code></a>.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/mouseup_event"><code>mouseup</code></a></dt>
-  <dd>Déclenché lorsque le bouton d'un appareil de pointage est relâché pour un élément. Également disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/onmouseup"><code>onmouseup</code></a>.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/webkitmouseforcechanged_event"><code>webkitmouseforcechanged</code></a></dt>
-  <dd>Déclenché à chaque fois que la quantite dé pression change sur le pavé ou l'écran tactile.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/webkitmouseforcedown_event"><code>webkitmouseforcedown</code></a></dt>
-  <dd>Déclenché après l'évènement <code>mousedown</code> dès que suffisamment de pression a été appliquée pour qualifier ce clic de clic forcé.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/webkitmouseforcewillbegin_event"><code>webkitmouseforcewillbegin</code></a></dt>
-  <dd>Déclenché avant l'évènement <a href="/fr/docs/Web/API/Element/mousedown_event"><code>mousedown</code></a>.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/webkitmouseforceup_event"><code>webkitmouseforceup</code></a></dt>
-  <dd>Déclenché après l'évènement <a href="/fr/docs/Web/API/Element/webkitmouseforcedown_event"><code>webkitmouseforcedown</code></a> dès que suffisamment de pression a été relâchée pour terminer le clic forcé.</dd>
-</dl>
-
-<h3 id="touch_events">Évènements tactiles</h3>
-
-<dl>
-  <dt><a href="/fr/docs/Web/API/Element/touchcancel_event"><code>touchcancel</code></a></dt>
-  <dd>Déclenché lorsqu'un ou plusieurs points de toucher ont été perturbés de façon spécifique à l'implémentation (par exemple lorsque trop de points de toucher ont été créés). Également disponible avec la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/ontouchcancel"><code>ontouchcancel</code></a>.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/touchend_event"><code>touchend</code></a></dt>
-  <dd>Déclenché lorsqu'un ou plusieurs points de toucher sont retirés de la surface tactile. Également disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/ontouchend"><code>ontouchend</code></a>.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/touchmove_event"><code>touchmove</code></a></dt>
-  <dd>Déclenché lorsqu'un ou plusieurs points de toucher se déplacent sur la surface tactile. Également disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/ontouchmove"><code>ontouchmove</code></a>.</dd>
-  <dt><a href="/fr/docs/Web/API/Element/touchstart_event"><code>touchstart</code></a></dt>
-  <dd>Déclenché lorsqu'un ou plusieurs points de toucher sont placés sur la surface tactile. Également disponible via la propriété <a href="/fr/docs/Web/API/GlobalEventHandlers/ontouchstart"><code>ontouchstart</code></a>.</dd>
-</dl>
-
-<h2 id="specifications">Spécifications</h2>
-
-<p>{{Specifications}}</p>
-
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat}}</p>
+{{APIRef("DOM")}}
+
+**`Element`** est la classe de base la plus générique dont héritent tous les objets qui représentent des éléments d'un [`Document`](/fr/docs/Web/API/Document). Elle contient uniquement des méthodes et propriétés communes à l'ensemble des éléments. Des classes plus spécifiques héritent d'`Element`. Ainsi, l'interface [`HTMLElement`](/fr/docs/Web/API/HTMLElement) correspond à l'interface de base pour les éléments HTML tandis que l'interface [`SVGElement`](/fr/docs/Web/API/SVGElement) représente la base pour les éléments SVG. La plupart des fonctionnalités sont définies dans les classes situées plus loin dans la hiérarchie.
+
+## Propriétés
+
+_`Element` hérite des propriétés de son interface parente : [`Node`](/fr/docs/Web/API/Node) (et donc indirectement des propriétés du parent de celle-ci : [`EventTarget`](/fr/docs/Web/API/EventTarget))._
+
+- [`Element.assignedSlot`](/fr/docs/Web/API/Element/assignedSlot){{readonlyInline}}
+  - : Renvoie un objet [`HTMLSlotElement`](/fr/docs/Web/API/HTMLSlotElement) représentant l'emplacement ([`<slot>`](/fr/docs/Web/HTML/Element/slot)) dans lequel le nœud est inséré.
+- [`Element.attributes`](/fr/docs/Web/API/Element/attributes) {{readOnlyInline}}
+  - : Renvoie un objet [`NamedNodeMap`](/fr/docs/Web/API/NamedNodeMap) contenant les attributs affectés de l'élément HTML correspondant.
+- [`Element.childElementCount`](/fr/docs/Web/API/Element/childElementCount) {{readonlyInline}}
+  - : Renvoie le nombre d'éléments enfants de cet élément.
+- [`Element.children`](/fr/docs/Web/API/Element/children) {{readonlyInline}}
+  - : Renvoie les éléments enfants de cet élément.
+- [`Element.classList`](/fr/docs/Web/API/Element/classList) {{readOnlyInline}}
+  - : Renvoie un objet [`DOMTokenList`](/fr/docs/Web/API/DOMTokenList) contenant la liste des attributs de classe.
+- [`Element.className`](/fr/docs/Web/API/Element/className)
+  - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui représente la classe de l'élément.
+- [`Element.clientHeight`](/fr/docs/Web/API/Element/clientHeight) {{readOnlyInline}}
+  - : Renvoie un nombre ([`Number`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number)) représentant la hauteur intérieure de l'élément.
+- [`Element.clientLeft`](/fr/docs/Web/API/Element/clientLeft) {{readOnlyInline}}
+  - : Renvoie un nombre ([`Number`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number)) représentant la largeur de la bordure gauche de l'élément.
+- [`Element.clientTop`](/fr/docs/Web/API/Element/clientTop) {{readOnlyInline}}
+  - : Renvoie un nombre ([`Number`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number)) représentant la largeur de la bordure haute de l'élément.
+- [`Element.clientWidth`](/fr/docs/Web/API/Element/clientWidth) {{readOnlyInline}}
+  - : Renvoie un nombre ([`Number`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number)) représentant la largeur intérieure de l'élément.
+- [`Element.firstElementChild`](/fr/docs/Web/API/Element/firstElementChild) {{readonlyInline}}
+  - : Renvoie le premier élément enfant de cet élément.
+- [`Element.id`](/fr/docs/Web/API/Element/id)
+  - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui représente l'identifiant de l'élément.
+- [`Element.innerHTML`](/fr/docs/Web/API/Element/innerHTML)
+  - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui représente le balisage du contenu de l'élément.
+- [`Element.lastElementChild`](/fr/docs/Web/API/Element/lastElementChild) {{readonlyInline}}
+  - : Renvoie le dernier élément enfant de cet élément.
+- [`Element.localName`](/fr/docs/Web/API/Element/localName) {{readOnlyInline}}
+  - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui représente la partie locale pour le nom qualifié de l'élément.
+- [`Element.namespaceURI`](/fr/docs/Web/API/Element/namespaceURI) {{readonlyInline}}
+
+  - : L'URI pour l'espace de noms de l'élément ou `null` s'il n'y en a pas.
+
+    > **Note :** Pour Firefox 3.5 et les versions antérieures, les éléments HTML ne sont pas situés dans un espace de noms. Dans les versions ultérieures, les éléments HTML s'inscrivent dans l'espace de noms [`http://www.w3.org/1999/xhtml`](https://www.w3.org/1999/xhtml) tant pour les arbres HTML que XML.
+
+- [`Element.nextElementSibling`](/fr/docs/Web/API/Element/nextElementSibling) {{readOnlyInline}}
+  - : Un objet `Element` qui représente l'élément qui suit immédiatement l'élément courant dans l'arbre ou `null` si l'élément courant n'a pas de voisin.
+- [`Element.outerHTML`](/fr/docs/Web/API/Element/outerHTML)
+  - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui représente le balisage de l'élément (incluant son contenu). Lorsque cette propriété est utilisée en modification, cela remplace l'élément avec les noeuds construits à partir de l'analyse de la chaîne de caractères fournie.
+- [`Element.part`](/fr/docs/Web/API/Element/part)
+  - : Représente les identifiants des parties de l'élément (c'est-à-dire ceux définis avec l'attribut `part`) sous la forme d'un objet [`DOMTokenList`](/fr/docs/Web/API/DOMTokenList).
+- [`Element.prefix`](/fr/docs/Web/API/Element/prefix) {{readOnlyInline}}
+  - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui représente le préfixe de l'espace de nom pour l'élément ou `null` si aucun préfixe n'est défini.
+- [`Element.previousElementSibling`](/fr/docs/Web/API/Element/previousElementSibling) {{readOnlyInline}}
+  - : Un objet `Element` qui représente l'élément qui précède immédiatement l'élément courant dans l'arbre ou `null` si l'élément courant n'a pas de voisin.
+- [`Element.scrollHeight`](/fr/docs/Web/API/Element/scrollHeight) {{readOnlyInline}}
+  - : Renvoie un nombre ([`Number`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number)) représentant la hauteur de la vue de défilement pour l'élément.
+- [`Element.scrollLeft`](/fr/docs/Web/API/Element/scrollLeft)
+  - : Un nombre ([`Number`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number)) qui représente le décalage à gauche de l'élément lié au défilement.
+- [`Element.scrollLeftMax`](/fr/docs/Web/API/Element/scrollLeftMax) {{Non-standard_Inline}} {{readOnlyInline}}
+  - : Renvoie un nombre ([`Number`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number)) représentant le décalage à gauche maximal pour l'élément lors du défilement.
+- [`Element.scrollTop`](/fr/docs/Web/API/Element/scrollTop)
+  - : Un nombre ([`Number`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number)) qui représente le nombre de pixels dont on a fait défiler verticalement le haut de l'élément.
+- [`Element.scrollTopMax`](/fr/docs/Web/API/Element/scrollTopMax) {{Non-standard_Inline}} {{readOnlyInline}}
+  - : Renvoie un nombre ([`Number`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number)) représentant le décalage maximal depuis le haut de l'élément lors du défilement.
+- [`Element.scrollWidth`](/fr/docs/Web/API/Element/scrollWidth) {{readOnlyInline}}
+  - : Renvoie un nombre ([`Number`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number)) représentant la largeur de la vue de défilement pour l'élément.
+- [`Element.shadowRoot`](/fr/docs/Web/API/Element/shadowRoot){{readOnlyInline}}
+
+  - : Renvoie la racine sombre ouverte (
+
+    <i lang="en">open shadow root</i>
+
+    ) hébergée par l'élément ou `null` si aucune racine sombre ouverte n'est présente.
+
+- [`Element.openOrClosedShadowRoot`](/fr/docs/Web/API/Element/openOrClosedShadowRoot) {{Non-standard_Inline}}{{readOnlyInline}}
+  - : Renvoie la racine sombre hébergée par l'élément (qu'elle soit ouverte ou fermée). **Uniquement disponible pour [les WebExtensions](/fr/docs/Mozilla/Add-ons/WebExtensions).**
+- [`Element.slot`](/fr/docs/Web/API/Element/slot) {{Experimental_Inline}}
+  - : Renvoie le nom de l'emplacement du DOM sombre dans lequel l'élément est inséré.
+- [`Element.tagName`](/fr/docs/Web/API/Element/tagName) {{readOnlyInline}}
+  - : Renvoie une chaîne de caractères ([`String`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String)) qui est le nom de la balise pour l'élément courant.
+
+### Propriétés provenant d'ARIA
+
+_L'interface `Element` inclut les propriétés suivantes, définies sur le <i lang="en">mixin</i> `ARIAMixin`._
+
+- [`Element.ariaAtomic`](/fr/docs/Web/API/Element/ariaAtomic)
+  - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-atomic` qui indique si des technologies d'assistance présenteront tout ou partie de la région modifiée selon les notifications définies par l'attribut `aria-relevant`.
+- [`Element.ariaAutoComplete`](/fr/docs/Web/API/Element/ariaAutoComplete)
+  - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-autocomplete` qui indique si la saisie de texte peut déclencher l'affichage d'une ou plusieurs prédictions pour la valeur saisie par l'utilisateur à destination d'une liste de choix, d'une boîte de recherche ou d'une zone de texte. Elle indique également la façon dont les éventuelles prédictions seraient présentées.
+- [`Element.ariaBusy`](/fr/docs/Web/API/Element/ariaBusy)
+  - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-busy` qui indique d'un élément est en train d'être modifié. Les technologies d'assistance peuvent alors faire le choix d'attendre la fin de la modification avant d'exposer le contenu à l'utilisateur.
+- [`Element.ariaChecked`](/fr/docs/Web/API/Element/ariaChecked)
+  - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-checked` indiquant l'état coché (ou non) des cases à cocher, des boutons radio ou des autres éléments d'interface graphique qui peuvent être cochés.
+- [`Element.ariaColCount`](/fr/docs/Web/API/Element/ariaColCount)
+  - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-colcount` indiquant le nombre de colonnes d'un tableau, d'une grille ou d'une grille arborescente.
+- [`Element.ariaColIndex`](/fr/docs/Web/API/Element/ariaColIndex)
+  - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-colindex` qui définit l'indice de la colonne d'un élément ou sa position par rapport au nombre total de colonnes d'un tableau, d'une grille ou d'une grille arborescente.
+- [`Element.ariaColIndexText`](/fr/docs/Web/API/Element/ariaColIndexText)
+  - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-colindextext` qui définit texte alternatif à `aria-colindex` qui soit compréhensible par un humain.
+- [`Element.ariaColSpan`](/fr/docs/Web/API/Element/ariaColSpan)
+  - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-colspan` qui définit le nombre de colonnes sur lesquelles s'étend une cellule dans un tableau, une grille ou une grille arborescente.
+- [`Element.ariaCurrent`](/fr/docs/Web/API/Element/ariaCurrent)
+  - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-current` qui indique l'élément représente l'objet courant dans un conteneur ou un ensemble d'éléments.
+- [`Element.ariaDescription`](/fr/docs/Web/API/Element/ariaDescription)
+  - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-description` qui définit la chaîne de caractères pour décrire ou annoter l'élément courant.
+- [`Element.ariaDisabled`](/fr/docs/Web/API/Element/ariaDisabled)
+  - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-disabled` qui indique que l'élément est perceptible mais désactivé et qu'il ne peut être édité ou manipulé.
+- [`Element.ariaExpanded`](/fr/docs/Web/API/Element/ariaExpanded)
+  - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-expanded` qui indique si un élément de groupement contrôlé par l'élément courant est développé ou replié.
+- [`Element.ariaHasPopup`](/fr/docs/Web/API/Element/ariaHasPopup)
+  - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-haspopup` qui indique la disponibilité et le type d'élément interactif visuel comme un menu ou une boîte de dialogue pouvant être généré par l'élément courant.
+- [`Element.ariaHidden`](/fr/docs/Web/API/Element/ariaHidden)
+  - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-hidden` qui indique si l'élément est exposé à une API d'accessibilité.
+- [`Element.ariaKeyShortcuts`](/fr/docs/Web/API/Element/ariaKeyShortcuts)
+  - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-keyshortcuts` qui indique les raccourcis clavier implémentés spécifiquement pour activer ou fournir le focus à un élément.
+- [`Element.ariaLabel`](/fr/docs/Web/API/Element/ariaLabel)
+  - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-label` qui définit une chaîne de caractères étant un libellé pour l'élément courant.
+- [`Element.ariaLevel`](/fr/docs/Web/API/Element/ariaLevel)
+  - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-level` qui définit le niveau hiérarchique de l'élément au sein d'une structure.
+- [`Element.ariaLive`](/fr/docs/Web/API/Element/ariaLive)
+  - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-live` qui indique que l'élément sera mis à jour et qui décrit les types de mises à jour qui peuvent être attendues par les agents utilisateur, les outils d'assistance et l'utilisateur.
+- [`Element.ariaModal`](/fr/docs/Web/API/Element/ariaModal)
+  - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-modal` qui indique si un élément est modal lorsqu'il est affiché.
+- [`Element.ariaMultiline`](/fr/docs/Web/API/Element/ariaMultiline)
+  - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-multiline` qui indique si une zone de texte accepte une saisie sur plusieurs lignes ou sur une seule ligne.
+- [`Element.ariaMultiSelectable`](/fr/docs/Web/API/Element/ariaMultiSelectable)
+  - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-multiselectable` qui indique que la personne peut choisir plus d'un élément parmi les éléments descendants qui peuvent être sélectionnés.
+- [`Element.ariaOrientation`](/fr/docs/Web/API/Element/ariaOrientation)
+  - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-orientation` qui indique si l'orientation de l'élément est horizontale, verticale ou inconnue voire ambigüe.
+- [`Element.ariaPlaceholder`](/fr/docs/Web/API/Element/ariaPlaceholder)
+  - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-placeholder` qui définit une indication courte destinée à aider l'utilisateur à saisir une valeur lorsque le contrôle ne possède pas de valeur.
+- [`Element.ariaPosInSet`](/fr/docs/Web/API/Element/ariaPosInSet)
+  - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-posinset` qui définit l'index ou la position de l'élément courant dans l'ensemble ou l'arbre d'éléments.
+- [`Element.ariaPressed`](/fr/docs/Web/API/Element/ariaPressed)
+  - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-pressed` qui indique l'état actif/pressé des boutons.
+- [`Element.ariaReadOnly`](/fr/docs/Web/API/Element/ariaReadOnly)
+  - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-readonly` qui indique que l'élément ne peut pas être édité mais qu'il peut être utilisé sinon.
+- [`Element.ariaRelevant`](/fr/docs/Web/API/Element/ariaRelevant)
+  - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-relevant` qui indique les notifications qui seront déclenchées par l'agent utilisateur lorsque l'arbre d'accessibilité d'une région interactive sera modifié. Cette propriété est utilisée afin de décrire quels changements d'une région `aria-live` sont pertinents et devraient être annoncés.
+- [`Element.ariaRequired`](/fr/docs/Web/API/Element/ariaRequired)
+  - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-required` qui indique que la saisie d'une utilisatrice ou d'un utilisateur est requise sur l'élément avant qu'un formulaire puisse être envoyé.
+- [`Element.ariaRoleDescription`](/fr/docs/Web/API/Element/ariaRoleDescription)
+  - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-roledescription` qui définit une description compréhensible par un humain, adaptée par l'autrice ou l'auteur du document pour le rôle de l'élément courant.
+- [`Element.ariaRowCount`](/fr/docs/Web/API/Element/ariaRowCount)
+  - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-rowcount` qui définit le nombre total de lignes dans un tableau, une grille ou une grille arborescente.
+- [`Element.ariaRowIndex`](/fr/docs/Web/API/Element/ariaRowIndex)
+  - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-rowindex` qui définit l'index ou la position de la ligne de l'élément par rapport au nombre total de lignes dans le tableau, la grille ou la grille arborescente.
+- [`Element.ariaRowIndexText`](/fr/docs/Web/API/Element/ariaRowIndexText)
+  - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-rowindextext` qui définit un libellé alternatif à `aria-rowindex`, compréhensible par un humain.
+- [`Element.ariaRowSpan`](/fr/docs/Web/API/Element/ariaRowSpan)
+  - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-rowspan` qui définit le nombre de lignes sur lesquelles s'étend une cellule dans un tableau, une grille ou une grille arborescente.
+- [`Element.ariaSelected`](/fr/docs/Web/API/Element/ariaSelected)
+  - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-selected` qui indique l'état de sélection pour les éléments qui peuvent être sélectionnés.
+- [`Element.ariaSetSize`](/fr/docs/Web/API/Element/ariaSetSize)
+  - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-setsize` qui définit le nombre d'objets dans l'ensemble d'éléments d'une liste ou d'un arbre.
+- [`Element.ariaSort`](/fr/docs/Web/API/Element/ariaSort)
+  - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-sort` qui indique si les objets d'un tableau ou d'une grille sont triés par ordre croissant ou décroissant.
+- [`Element.ariaValueMax`](/fr/docs/Web/API/Element/ariaValueMax)
+  - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-valueMax` qui définit la valeur maximale autorisée pour un élément d'interface utilisateur décrivant un intervalle.
+- [`Element.ariaValueMin`](/fr/docs/Web/API/Element/ariaValueMin)
+  - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-valueMin` qui définit la valeur minimale autorisée pour un élément d'interface utilisateur décrivant un intervalle.
+- [`Element.ariaValueNow`](/fr/docs/Web/API/Element/ariaValueNow)
+  - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-valueNow` qui définit la valeur courante d'un élément d'interface utilisateur décrivant un intervalle.
+- [`Element.ariaValueText`](/fr/docs/Web/API/Element/ariaValueText)
+  - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui reflète l'attribut `aria-valuetext` qui définit une alternative textuelle à `aria-valuenow` compréhensible par un humain.
+
+### Gestionnaires d'évènements
+
+- [`Element.onfullscreenchange`](/fr/docs/Web/API/Element/onfullscreenchange)
+  - : Un gestionnaire d'évènement pour l'évènement [`fullscreenchange`](/fr/docs/Web/API/Document/fullscreenchange_event) qui est envoyé lorsque l'élément passe en mode plein écran ou sort de celui-ci. Cet évènement peut être utilisé pour surveiller les transitions entre les deux modes mais aussi pour surveiller les modifications inattendues comme lorsque l'application s'exécute en arrière-plan.
+- [`Element.onfullscreenerror`](/fr/docs/Web/API/Element/onfullscreenerror)
+  - : Un gestionnaire d'évènement pour [`fullscreenerror`](/fr/docs/Web/API/Document/fullscreenerror_event) qui est envoyé lorsqu'une erreur se produit lors du passage au mode plein écran.
+
+## Méthodes
+
+_`Element` hérite des méthodes fournit par la classe parente [`Node`](/fr/docs/Web/API/Node) et de sa classe parente avant elle : [`EventTarget`](/fr/docs/Web/API/EventTarget)._
+
+- [`EventTarget.addEventListener()`](/fr/docs/Web/API/EventTarget/addEventListener)
+  - : Enregistre un gestionnaire d'évènement sur l'élément pour un type d'évènement donné.
+- [`Element.after()`](/fr/docs/Web/API/Element/after)
+  - : Insère un ensemble d'objets [`Node`](/fr/docs/Web/API/Node) ou [`DOMString`](/fr/docs/Web/API/DOMString) dans la liste des enfants du parent de l'élément courant, juste après ce dernier.
+- [`Element.attachShadow()`](/fr/docs/Web/API/Element/attachShadow)
+  - : Attache un arbre du DOM sombre à l'élément indiqué puis renvoie une référence à sa racine [`ShadowRoot`](/fr/docs/Web/API/ShadowRoot).
+- [`Element.animate()`](/fr/docs/Web/API/Element/animate) {{Experimental_Inline}}
+  - : Une méthode synthétique pour créer et exécuter une animation sur un élément. Renvoie l'instance de l'objet `Animation` créé.
+- [`Element.append()`](/fr/docs/Web/API/Element/append)
+  - : Insère un ensemble d'objet [`Node`](/fr/docs/Web/API/Node) ou [`DOMString`](/fr/docs/Web/API/DOMString) après le dernier enfant de l'élément.
+- [`Element.before()`](/fr/docs/Web/API/Element/before)
+  - : Insère un ensemble d'objet [`Node`](/fr/docs/Web/API/Node) ou [`DOMString`](/fr/docs/Web/API/DOMString) dans la liste des enfants du parent de l'élément courant, juste avant ce dernier.
+- [`Element.closest()`](/fr/docs/Web/API/Element/closest)
+  - : Renvoie l'élément (`Element`) qui est le plus proche ancêtre de l'élément courant (ou l'élément courant lui-même) qui correspond au sélecteur passé en paramètre.
+- [`Element.createShadowRoot()`](/fr/docs/Web/API/Element/createShadowRoot) {{Non-standard_Inline}} {{Deprecated_Inline}}
+  - : Crée un [DOM sombre](/fr/docs/Web/Web_Components/Using_shadow_DOM) sur l'élément, le transformant ainsi en hôte sombre. Renvoie un objet [`ShadowRoot`](/fr/docs/Web/API/ShadowRoot).
+- [`Element.computedStyleMap()`](/fr/docs/Web/API/Element/computedStyleMap) {{Experimental_Inline}}
+  - : Renvoie une interface [`StylePropertyMapReadOnly`](/fr/docs/Web/API/StylePropertyMapReadOnly) qui fournit une représentation en lecture seule d'un bloc de déclaration CSS alternatif à [`CSSStyleDeclaration`](/fr/docs/Web/API/CSSStyleDeclaration).
+- [`EventTarget.dispatchEvent()`](/fr/docs/Web/API/EventTarget/dispatchEvent)
+  - : Diffuse un évènement sur ce nœud dans le DOM et renvoie un booléen qui indique si aucun gestionnaire n'a annulé l'évènement.
+- [`Element.getAnimations()`](/fr/docs/Web/API/Element/getAnimations) {{Experimental_Inline}}
+  - : Renvoie un tableau des objets `Animation` actuellement actifs sur l'élément.
+- [`Element.getAttribute()`](/fr/docs/Web/API/Element/getAttribute)
+  - : Récupère la valeur de l'attribut nommé pour le nœud courant et le renvoie comme un [objet](/fr/docs/Web/JavaScript/Reference/Global_Objects/Object).
+- [`Element.getAttributeNames()`](/fr/docs/Web/API/Element/getAttributeNames)
+  - : Renvoie un tableau de noms d'attribut pour l'élément courant.
+- [`Element.getAttributeNode()`](/fr/docs/Web/API/Element/getAttributeNode)
+  - : Récupère la représentation du nœud pour l'attrtibut nommé du nœud courant et le renvoie comme un objet [`Attr`](/fr/docs/Web/API/Attr).
+- [`Element.getAttributeNodeNS()`](/fr/docs/Web/API/Element/getAttributeNodeNS)
+  - : Depuis le nœud courant, récupère la représentation du nœud pour l'attribut avec le nom et l'espace de noms indiqués et renvoie la valeur obtenue sous la forme d'un objet [`Attr`](/fr/docs/Web/API/Attr).
+- [`Element.getAttributeNS()`](/fr/docs/Web/API/Element/getAttributeNS)
+  - : Depuis le nœud courant, récupère la valeur de l'attribut avec le nom et l'espace de noms indiqués et la renvoie sous la forme d'un [objet](/fr/docs/Web/JavaScript/Reference/Global_Objects/Object).
+- [`Element.getBoundingClientRect()`](/fr/docs/Web/API/Element/getBoundingClientRect)
+
+  - : Renvoie la taille d'un élément et sa position relative dans la zone d'affichage (
+
+    <i lang="en">viewport</i>
+
+    ).
+
+- [`Element.getBoxQuads()`](/fr/docs/Web/API/Element/getBoxQuads) {{experimental_inline}}
+  - : Renvoie une liste d'objets [`DOMQuad`](/fr/docs/Web/API/DOMQuad) qui représentent les fragments CSS pour le nœud.
+- [`Element.getClientRects()`](/fr/docs/Web/API/Element/getClientRects)
+  - : Renvoie une collection de rectangles qui indique les rectangles englobants pour chaque ligne de texte d'un client.
+- [`Element.getElementsByClassName()`](/fr/docs/Web/API/Element/getElementsByClassName)
+  - : Renvoie une collection dynamique [`HTMLCollection`](/fr/docs/Web/API/HTMLCollection) qui contient tous les descendants de l'élément courant et qui possèdent la liste de classes fournie en paramètre.
+- [`Element.getElementsByTagName()`](/fr/docs/Web/API/Element/getElementsByTagName)
+  - : Renvoie une collection dynamique [`HTMLCollection`](/fr/docs/Web/API/HTMLCollection) qui contient tous les descendants de l'élément courant avec un nom de balise donné.
+- [`Element.getElementsByTagNameNS()`](/fr/docs/Web/API/Element/getElementsByTagNameNS)
+  - : Renvoie une collection dynamique [`HTMLCollection`](/fr/docs/Web/API/HTMLCollection) qui contient tous les descendants de l'élément courant qui ont un nom de balise et un espace de noms donnés.
+- [`Element.hasAttribute()`](/fr/docs/Web/API/Element/hasAttribute)
+  - : Renvoie un booléen indiquant si l'élément courant possède l'attribut donné.
+- [`Element.hasAttributeNS()`](/fr/docs/Web/API/Element/hasAttributeNS)
+  - : Renvoie un booléen indiquant si l'élément courant possède l'attribut donné pour l'espace de noms donné.
+- [`Element.hasAttributes()`](/fr/docs/Web/API/Element/hasAttributes)
+  - : Renvoie un booléen qui indique si l'élément courant a un ou plusieurs attributs HTML.
+- [`Element.hasPointerCapture()`](/fr/docs/Web/API/Element/hasPointerCapture)
+  - : Indique si l'élément a la capture du pointeur pour le pointeur identifié par l'identifiant passé en argument.
+- [`Element.insertAdjacentElement()`](/fr/docs/Web/API/Element/insertAdjacentElement)
+  - : Insère un nœud d'élément à la position relative indiquée par rapport à l'élément courant.
+- [`Element.insertAdjacentHTML()`](/fr/docs/Web/API/Element/insertAdjacentHTML)
+  - : Analyse le texte comme HTML ou XML puis insère les nœuds résultatns dans l'arbre à la position indiquée.
+- [`Element.insertAdjacentText()`](/fr/docs/Web/API/Element/insertAdjacentText)
+  - : Insère un nœud textuel à la position relative indiquée, par rapport à l'élément courant.
+- [`Element.matches()`](/fr/docs/Web/API/Element/matches)
+  - : Renvoie un booléen qui indique si l'élément serait ciblé par la chaîne de caractères passée en argument qui décrit un sélecteur.
+- [`Element.prepend()`](/fr/docs/Web/API/Element/prepend)
+  - : Insère un ensemble d'objets [`Node`](/fr/docs/Web/API/Node) ou [`DOMString`](/fr/docs/Web/API/DOMString) avant le premier enfant de l'élément courant.
+- [`Element.querySelector()`](/fr/docs/Web/API/Element/querySelector)
+  - : Renvoie le premier objet [`Node`](/fr/docs/Web/API/Node) qui correspond au sélecteur donné, relatif à l'élément courant.
+- [`Element.querySelectorAll()`](/fr/docs/Web/API/Element/querySelectorAll)
+  - : Renvoie un objet [`NodeList`](/fr/docs/Web/API/NodeList) contenant les nœuds pour lesquels le sélecteur, passé en argument, relatif à l'élément courant.
+- [`Element.releasePointerCapture()`](/fr/docs/Web/API/Element/releasePointerCapture)
+  - : Libère (arrête) la capture du pointeur précédemment activée pour un évènement de pointeur spécifique.
+- [`Element.remove()`](/fr/docs/Web/API/Element/remove)
+  - : Retire l'élément de la liste des éléments enfants de son parent.
+- [`Element.removeAttribute()`](/fr/docs/Web/API/Element/removeAttribute)
+  - : Retire l'attribut nommé du nœud courant.
+- [`Element.removeAttributeNode()`](/fr/docs/Web/API/Element/removeAttributeNode)
+  - : Retire la représentation nodale de l'attribut nommé pour le nœud courant.
+- [`Element.removeAttributeNS()`](/fr/docs/Web/API/Element/removeAttributeNS)
+  - : Sur le nœud courant, retire l'attribut avec le nom et l'espace de noms indiqués.
+- [`EventTarget.removeEventListener()`](/fr/docs/Web/API/EventTarget/removeEventListener)
+  - : Retire un gestionnaire d'évènement de l'élément.
+- [`Element.replaceChildren()`](/fr/docs/Web/API/Element/replaceChildren)
+  - : Remplace l'enfant existant d'un nœud avec un nouvel ensemble d'enfants.
+- [`Element.replaceWith()`](/fr/docs/Web/API/Element/replaceWith)
+  - : Remplace l'élément dans la liste des enfants de son parent par un ensemble d'objets [`Node`](/fr/docs/Web/API/Node) ou [`DOMString`](/fr/docs/Web/API/DOMString).
+- [`Element.requestFullscreen()`](/fr/docs/Web/API/Element/requestFullScreen) {{Experimental_Inline}}
+  - : Demande au navigateur, de façon asynchrone, d'afficher l'élément en plein écran.
+- [`Element.requestPointerLock()`](/fr/docs/Web/API/Element/requestPointerLock) {{Experimental_Inline}}
+  - : Demande au navigateur, de façon asynchrone, de bloquer le pointeur sur l'élément indiqué.
+- [`Element.scroll()`](/fr/docs/Web/API/Element/scroll)
+  - : Défile jusqu'à un ensemble de coordonnées données à l'intérieur de l'élément courant.
+- [`Element.scrollBy()`](/fr/docs/Web/API/Element/scrollBy)
+  - : Défile un élément de la quantité indiquée.
+- [`Element.scrollIntoView()`](/fr/docs/Web/API/Element/scrollIntoView) {{Experimental_Inline}}
+  - : Défile la page jusqu'à ce que l'élément apparaisse dans la vue.
+- [`Element.scrollTo()`](/fr/docs/Web/API/Element/scrollTo)
+  - : Défile jusqu'à un ensemble de coordonnées particulier à l'intérieur de l'élément donné.
+- [`Element.setAttribute()`](/fr/docs/Web/API/Element/setAttribute)
+  - : Définit la valeur d'un attribut nommé pour le nœud courant.
+- [`Element.setAttributeNode()`](/fr/docs/Web/API/Element/setAttributeNode)
+  - : Définit la représentation nodale d'un attribut nommé pour le nœud courant.
+- [`Element.setAttributeNodeNS()`](/fr/docs/Web/API/Element/setAttributeNodeNS)
+  - : Pour le nœud courant, définit la représentation nodale d'un attribut avec le nom et l'espace de noms indiqués.
+- [`Element.setAttributeNS()`](/fr/docs/Web/API/Element/setAttributeNS)
+  - : Pour le nœud courant, définit la valeur de l'attribut avec le nom et l'espace de noms indiqués.
+- [`Element.setCapture()`](/fr/docs/Web/API/Element/setCapture) {{Non-standard_Inline}}{{Deprecated_Inline}}
+  - : Initialise la capture des évènements liés à la souris, redirigeant ainsi tous les évènements de la souris sur cet élément.
+- [`Element.setPointerCapture()`](/fr/docs/Web/API/Element/setPointerCapture)
+  - : Désigne un élément spécifique comme future cible pour la capture des [évènements de pointeur](/fr/docs/Web/API/Pointer_events).
+- [`Element.toggleAttribute()`](/fr/docs/Web/API/Element/toggleAttribute)
+  - : Active/désactive un attribut booléen sur l'élément courant : s'il est présent, cela le retire et s'il est absent, cela l'ajoute.
+
+## Évènements
+
+On peut écouter ces évènements en utilisant la méthode `addEventListener()` ou en affectant un gestionnaire d'évènement à la propriété `onnomevenement` de cette interface.
+
+- [`cancel`](/fr/docs/Web/API/HTMLDialogElement/cancel_event)
+
+  - : Déclenché sur un élément [`<dialog>`](/fr/docs/Web/HTML/Element/dialog) lorsque la personne indique au navigateur le souhait de fermer la boîte de dialogue courante. Un navigateur pourra par exemple déclencher cet évènement lors d'un appui sur la touche
+
+    <kbd>Echap</kbd>
+
+    ou lors d'un clic sur le bouton « Fermer cette boîte de dialogue » fourni par le navigateur. Également disponible via la propriété [`oncancel`](/fr/docs/Web/API/GlobalEventHandlers/oncancel).
+
+- [`error`](/fr/docs/Web/API/Element/error_event)
+  - : Déclenché lors de l'échec du chargement d'une ressource ou lorsque celle-ci ne peut être utilisée. Cet évènement sera par exemple déclenché lors d'une erreur d'exécution d'un script ou lorsqu'une image ne peut être trouvée ou est invalide. Également disponible via la propriété [`onerror`](/fr/docs/Web/API/GlobalEventHandlers/onerror).
+- [`scroll`](/fr/docs/Web/API/Element/scroll_event)
+  - : Déclenché lors du défilement de la vue du document ou d'un élément. Également disponible via la propriété [`onscroll`](/fr/docs/Web/API/GlobalEventHandlers/onscroll).
+- [`select`](/fr/docs/Web/API/Element/select_event)
+  - : Déclenché lors de la sélection de texte. Également disponible via la propriété [`onselect`](/fr/docs/Web/API/GlobalEventHandlers/onselect).
+- [`show`](/fr/docs/Web/API/Element/show_event)
+  - : Déclenché lorsqu'un évènement [`contextmenu`](/fr/docs/Web/API/Element/contextmenu_event) a été déclenché ou a bouillonné sur un élément qui dispose de l'attribut [`contextmenu`](/fr/docs/Web/HTML/Global_attributes/contextmenu) attribute. {{deprecated_inline}} Également disponible via la propriété [`onshow`](/fr/docs/Web/API/GlobalEventHandlers/onshow).
+- [`wheel`](/fr/docs/Web/API/Element/wheel_event)
+  - : Déclenché lorsque l'utilisateur fait tourner la molette d'un appareil de pointage (généralement une souris). Également disponible via la propriété [`onwheel`](/fr/docs/Web/API/GlobalEventHandlers/onwheel).
+
+### Évènements du presse-papiers
+
+- [`copy`](/fr/docs/Web/API/Element/copy_event)
+  - : Déclenché lorsque l'utilisateur initie une action de copie via l'interface du navigateur. Également disponible via la propriété [`oncopy`](/fr/docs/Web/API/HTMLElement/oncopy).
+- [`cut`](/fr/docs/Web/API/Element/cut_event)
+  - : Déclenché lorsque l'utilisateur initie une action de coupe via l'interface du navigateur. Également disponible via la propriété [`oncut`](/fr/docs/Web/API/HTMLElement/oncut).
+- [`paste`](/fr/docs/Web/API/Element/paste_event)
+  - : Déclenché lorsque l'utilisateur initie une action pour coller via l'interface du navigateur. Également disponible via la propriété [`onpaste`](/fr/docs/Web/API/HTMLElement/onpaste).
+
+### Évènements de composition
+
+- [`compositionend`](/fr/docs/Web/API/Element/compositionend_event)
+  - : Déclenché lorsqu'un système de composition textuel tel qu'un [éditeur de méthode de saisie](/fr/docs/Glossary/Input_method_editor) termine ou annule la session de composition courante.
+- [`compositionstart`](/fr/docs/Web/API/Element/compositionstart_event)
+  - : Déclenché lorsqu'un système de composition textuel tel qu'un [éditeur de méthode de saisie](/fr/docs/Glossary/Input_method_editor) démarre une nouvelle session de composition.
+- [`compositionupdate`](/fr/docs/Web/API/Element/compositionupdate_event)
+  - : Déclenché lorsqu'un nouveau caractère est reçu dans le contexte d'une session de composition textuelle.
+
+### Évènements pour le focus
+
+- [`blur`](/fr/docs/Web/API/Element/blur_event)
+  - : Déclenché lorsqu'un élément a perdu le focus. Également disponible via la propriété [`onblur`](/fr/docs/Web/API/GlobalEventHandlers/onblur).
+- [`focus`](/fr/docs/Web/API/Element/focus_event)
+  - : Déclenché lorsqu'un élément reçoit le focus. Également disponible via la propriété [`onfocus`](/fr/docs/Web/API/GlobalEventHandlers/onfocus).
+- [`focusin`](/fr/docs/Web/API/Element/focusin_event)
+  - : Déclenché lorsqu'un élément s'apprête à recevoir le focus.
+- [`focusout`](/fr/docs/Web/API/Element/focusout_event)
+  - : Déclenché lorsqu'un élément s'apprête à perdre le focus.
+
+### Évènements relatifs au plein écran
+
+- [`fullscreenchange`](/fr/docs/Web/API/Element/fullscreenchange_event)
+  - : Envoyé à un élément (`Element`) lorsque celui-ci effectue une transition (entrée ou sortie) pour le mode [plein écran](/fr/docs/Web/API/Fullscreen_API/Guide). Également disponible via la propriété [`onfullscreenchange`](/fr/docs/Web/API/Element/onfullscreenchange).
+- [`fullscreenerror`](/fr/docs/Web/API/Element/fullscreenerror_event)
+  - : Envoyé à un élément `Element` si une erreur se produit lors d'une transition (entrée ou sortie) pour le mode [plein écran](/fr/docs/Web/API/Fullscreen_API/Guide). Également disponible via la propriété [`onfullscreenerror`](/fr/docs/Web/API/Element/onfullscreenerror).
+
+### Évènements relatifs au clavier
+
+- [`keydown`](/fr/docs/Web/API/Element/keydown_event)
+  - : Déclenché lors de l'appui sur une touche du clavier. Également disponible via la propriété [`onkeydown`](/fr/docs/Web/API/GlobalEventHandlers/onkeydown).
+- [`keypress`](/fr/docs/Web/API/Element/keypress_event)
+  - : Déclenché lorsqu'une touche produit un caractère lorsqu'elle est pressée. {{deprecated_inline}} Également disponible via la propriété [`onkeypress`](/fr/docs/Web/API/GlobalEventHandlers/onkeypress).
+- [`keyup`](/fr/docs/Web/API/Element/keyup_event)
+  - : Déclenché lorsqu'une touche est relâchée. Également disponible via la propriété [`onkeyup`](/fr/docs/Web/API/GlobalEventHandlers/onkeyup).
+
+### Évènements relatifs à la souris
+
+- [`auxclick`](/fr/docs/Web/API/Element/auxclick_event)
+  - : Déclenché lorsqu'un bouton non primaire d'un appareil de pointage (c'est-à-dire tout bouton de la souris en dehors du bouton gauche) a été pressé puis relâché sur un élément. Également disponible via la propriété [`onauxclick`](/fr/docs/Web/API/GlobalEventHandlers/onauxclick).
+- [`click`](/fr/docs/Web/API/Element/click_event)
+  - : Déclenché lorsqu'un bouton d'un appareil de pointage (par exemple le bouton gauche de la souris) a été pressé puis relâche sur un élément. Également disponible via la propriété [`onclick`](/fr/docs/Web/API/GlobalEventHandlers/onclick).
+- [`contextmenu`](/fr/docs/Web/API/Element/contextmenu_event)
+  - : Déclenché lorsqu'un utilisateur tente d'ouvrir un menu contextuel. Également disponible via la propriété [`oncontextmenu`](/fr/docs/Web/API/GlobalEventHandlers/oncontextmenu).
+- [`dblclick`](/fr/docs/Web/API/Element/dblclick_event)
+  - : Déclenché lorsqu'un bouton d'un appareil de pointage (par exemple le bouton gauche de la souris) a été utilisé pour un double-clic sur un élément. Également disponible via la propriété [`ondblclick`](/fr/docs/Web/API/GlobalEventHandlers/ondblclick).
+- [`DOMActivate`](/fr/docs/Web/API/Element/DOMActivate_event) {{Deprecated_Inline}}
+  - : Se produit lorsqu'un élément est activé, par exemple avec un clic de souris ou l'appui d'une touche.
+- [`mousedown`](/fr/docs/Web/API/Element/mousedown_event)
+  - : Déclenché lorsqu'un bouton d'un appareil de pointage est pressé sur un élément. Également disponible via la propriété [`onmousedown`](/fr/docs/Web/API/GlobalEventHandlers/onmousedown).
+- [`mouseenter`](/fr/docs/Web/API/Element/mouseenter_event)
+  - : Déclenché lorsqu'un appareil de pointage (généralement une souris) est déplacé pour arriver sur l'élément disposant du gestionnaire d'évènement. Également disponible via la propriété [`onmouseenter`](/fr/docs/Web/API/GlobalEventHandlers/onmouseenter).
+- [`mouseleave`](/fr/docs/Web/API/Element/mouseleave_event)
+  - : Déclenché lorsque le pointeur d'un appareil de pointage (généralement une souris) est déplacée en dehors de l'élément qui dispose du gestionnaire d'évènement. Également disponible via la propriété [`onmouseleave`](/fr/docs/Web/API/GlobalEventHandlers/onmouseleave).
+- [`mousemove`](/fr/docs/Web/API/Element/mousemove_event)
+  - : Déclenché lorsqu'un appareil de pointage (généralement une souris) est déplacé sur un élément. Également disponible via la propriété [`onmousemove`](/fr/docs/Web/API/GlobalEventHandlers/onmousemove).
+- [`mouseout`](/fr/docs/Web/API/Element/mouseout_event)
+  - : Déclenché lorsqu'un appareil de pointage (généralement une souris) se déplace pour quitter l'élément qui dispose du gestionnaire d'évènement (ou lorsque le pointeur quitte l'un des enfants de cet élément). Également disponible via la propriété [`onmouseout`](/fr/docs/Web/API/GlobalEventHandlers/onmouseout).
+- [`mouseover`](/fr/docs/Web/API/Element/mouseover_event)
+  - : Déclenché lorsqu'un appareil de pointage arrive sur l'élément (ou l'un de ses enfants) qui dispose du gestionnaire d'évènement. Également disponible via la propriété [`onmouseover`](/fr/docs/Web/API/GlobalEventHandlers/onmouseover).
+- [`mouseup`](/fr/docs/Web/API/Element/mouseup_event)
+  - : Déclenché lorsque le bouton d'un appareil de pointage est relâché pour un élément. Également disponible via la propriété [`onmouseup`](/fr/docs/Web/API/GlobalEventHandlers/onmouseup).
+- [`webkitmouseforcechanged`](/fr/docs/Web/API/Element/webkitmouseforcechanged_event)
+  - : Déclenché à chaque fois que la quantite dé pression change sur le pavé ou l'écran tactile.
+- [`webkitmouseforcedown`](/fr/docs/Web/API/Element/webkitmouseforcedown_event)
+  - : Déclenché après l'évènement `mousedown` dès que suffisamment de pression a été appliquée pour qualifier ce clic de clic forcé.
+- [`webkitmouseforcewillbegin`](/fr/docs/Web/API/Element/webkitmouseforcewillbegin_event)
+  - : Déclenché avant l'évènement [`mousedown`](/fr/docs/Web/API/Element/mousedown_event).
+- [`webkitmouseforceup`](/fr/docs/Web/API/Element/webkitmouseforceup_event)
+  - : Déclenché après l'évènement [`webkitmouseforcedown`](/fr/docs/Web/API/Element/webkitmouseforcedown_event) dès que suffisamment de pression a été relâchée pour terminer le clic forcé.
+
+### Évènements tactiles
+
+- [`touchcancel`](/fr/docs/Web/API/Element/touchcancel_event)
+  - : Déclenché lorsqu'un ou plusieurs points de toucher ont été perturbés de façon spécifique à l'implémentation (par exemple lorsque trop de points de toucher ont été créés). Également disponible avec la propriété [`ontouchcancel`](/fr/docs/Web/API/GlobalEventHandlers/ontouchcancel).
+- [`touchend`](/fr/docs/Web/API/Element/touchend_event)
+  - : Déclenché lorsqu'un ou plusieurs points de toucher sont retirés de la surface tactile. Également disponible via la propriété [`ontouchend`](/fr/docs/Web/API/GlobalEventHandlers/ontouchend).
+- [`touchmove`](/fr/docs/Web/API/Element/touchmove_event)
+  - : Déclenché lorsqu'un ou plusieurs points de toucher se déplacent sur la surface tactile. Également disponible via la propriété [`ontouchmove`](/fr/docs/Web/API/GlobalEventHandlers/ontouchmove).
+- [`touchstart`](/fr/docs/Web/API/Element/touchstart_event)
+  - : Déclenché lorsqu'un ou plusieurs points de toucher sont placés sur la surface tactile. Également disponible via la propriété [`ontouchstart`](/fr/docs/Web/API/GlobalEventHandlers/ontouchstart).
+
+## Spécifications
+
+{{Specifications}}
+
+## Compatibilité des navigateurs
+
+{{Compat}}
diff --git a/files/fr/web/api/element/innerhtml/index.md b/files/fr/web/api/element/innerhtml/index.md
index 91ab29da37..8fe3f15e3b 100644
--- a/files/fr/web/api/element/innerhtml/index.md
+++ b/files/fr/web/api/element/innerhtml/index.md
@@ -10,154 +10,162 @@ tags:
 translation_of: Web/API/Element/innerHTML
 original_slug: Web/API/Element/innertHTML
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p>La propriété <strong><code>Element.innerHTML</code></strong> de {{domxref("Element")}} récupère ou définit la syntaxe HTML décrivant les descendants de l'élément.</p>
+La propriété **`Element.innerHTML`** de {{domxref("Element")}} récupère ou définit la syntaxe HTML décrivant les descendants de l'élément.
 
-<div class="note">
-  <p><strong>Note :</strong> Si un nœud {{HTMLElement("div")}}, {{HTMLElement("span")}}, ou {{HTMLElement("noembed")}} a un sous-nœud de type texte contenant les caractères <code>(&amp;), (&lt;),</code> ou <code>(&gt;)</code>, <code>innerHTML</code> renverra à la place les chaînes suivantes : <code>"&amp;amp;"</code>, <code>"&amp;lt;"</code> et <code>"&amp;gt;"</code> respectivement. Utilisez {{domxref("Node.textContent")}} pour obtenir une copie exacte du contenu de ces nœuds.</p>
-</div>
+> **Note :** Si un nœud {{HTMLElement("div")}}, {{HTMLElement("span")}}, ou {{HTMLElement("noembed")}} a un sous-nœud de type texte contenant les caractères `(&), (<),` ou `(>)`, `innerHTML` renverra à la place les chaînes suivantes : `"&amp;"`, `"&lt;"` et `"&gt;"` respectivement. Utilisez {{domxref("Node.textContent")}} pour obtenir une copie exacte du contenu de ces nœuds.
 
-<p>Pour insérer le HTML dans le document, plutôt que de remplacer le contenu d'un élément, utilisez la méthode {{domxref("Element.insertAdjacentHTML", "insertAdjacentHTML()")}}.</p>
+Pour insérer le HTML dans le document, plutôt que de remplacer le contenu d'un élément, utilisez la méthode {{domxref("Element.insertAdjacentHTML", "insertAdjacentHTML()")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">const <em>content</em> = <em>element</em>.innerHTML;
+    const content = element.innerHTML;
 
-<em>element</em>.innerHTML = <em>htmlString</em>;
-</pre>
+    element.innerHTML = htmlString;
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>Une  {{domxref("DOMString")}} contenant la sérialisation HTML des descendants de l'élément. Définir la valeur de <code>innerHTML</code> supprime tous les descendants et les remplace par les noeuds construits en analysant le HTML donné dans la chaîne <code>htmlString</code>.</p>
+Une  {{domxref("DOMString")}} contenant la sérialisation HTML des descendants de l'élément. Définir la valeur de `innerHTML` supprime tous les descendants et les remplace par les noeuds construits en analysant le HTML donné dans la chaîne `htmlString`.
 
-<h3 id="Exceptions">Exceptions</h3>
+### Exceptions
 
-<dl>
- <dt><code>SyntaxError</code></dt>
- <dd>Une tentative a été faite de définir la valeur de <code>innerHTML</code> en utilisant une chaîne qui n'est pas correctement formée HTML.</dd>
- <dt><code>NoModificationAllowedError</code></dt>
- <dd>Une tentative a été faite d'insérer le code HTML dans un noeud dont le parent est un {{domxref("Document")}}.</dd>
-</dl>
+- `SyntaxError`
+  - : Une tentative a été faite de définir la valeur de `innerHTML` en utilisant une chaîne qui n'est pas correctement formée HTML.
+- `NoModificationAllowedError`
+  - : Une tentative a été faite d'insérer le code HTML dans un noeud dont le parent est un {{domxref("Document")}}.
 
-<h2 id="Notes_dutilisation">Notes d'utilisation</h2>
+## Notes d'utilisation
 
-<p>La propriété <code>innerHTML</code> peut être utilisée pour examiner la source HTML actuelle de la page, y compris tous les changements réalisés depuis son chargement initial.</p>
+La propriété `innerHTML` peut être utilisée pour examiner la source HTML actuelle de la page, y compris tous les changements réalisés depuis son chargement initial.
 
-<h3 id="Lecture_du_contenu_HTML_dun_élément">Lecture du contenu HTML d'un élément</h3>
+### Lecture du contenu HTML d'un élément
 
-<p>La lecture de <code>innerHTML</code> amène l'agent utilisateur à sérialiser le fragment HTML ou XML composé des descendants de l'élément. La chaîne résultante est renvoyée.</p>
+La lecture de `innerHTML` amène l'agent utilisateur à sérialiser le fragment HTML ou XML composé des descendants de l'élément. La chaîne résultante est renvoyée.
 
-<pre class="brush: js">let contents = myElement.innerHTML;</pre>
+```js
+let contents = myElement.innerHTML;
+```
 
-<p>Cela vous permet de regarder le balisage HTML des nœuds de contenu de l'élément.</p>
+Cela vous permet de regarder le balisage HTML des nœuds de contenu de l'élément.
 
-<div class="note">
-<p><strong>Note :</strong> Le fragment HTML ou XML renvoyé est généré en fonction du contenu actuel de l'élément. Il est donc probable que le balisage et la mise en forme du fragment renvoyé ne correspondent pas au balisage de la page d'origine.</p>
-</div>
+> **Note :** Le fragment HTML ou XML renvoyé est généré en fonction du contenu actuel de l'élément. Il est donc probable que le balisage et la mise en forme du fragment renvoyé ne correspondent pas au balisage de la page d'origine.
 
-<h3 id="Remplacement_du_contenu_dun_élément">Remplacement du contenu d'un élément</h3>
+### Remplacement du contenu d'un élément
 
-<p>Définir la valeur de <code>innerHTML</code> vous permet de remplacer aisément le contenu existant d'un élément par un nouveau contenu.</p>
+Définir la valeur de `innerHTML` vous permet de remplacer aisément le contenu existant d'un élément par un nouveau contenu.
 
-<p>Par exemple, vous pouvez effacer le contenu entier du document en effaçant le contenu de l'attribut {{domxref("Document.body", "body")}} du document.</p>
+Par exemple, vous pouvez effacer le contenu entier du document en effaçant le contenu de l'attribut {{domxref("Document.body", "body")}} du document.
 
-<pre class="brush: js">document.body.innerHTML = "";</pre>
+```js
+document.body.innerHTML = "";
+```
 
-<p>Cet exemple récupère le balisage HTML actuel du document et remplace les caractères <code>"&lt;"</code> par l'entité HTML <code>"&amp; lt;"</code>, convertissant ainsi essentiellement le code HTML en texte brut. Ceci est ensuite inclus dans un élément {{HTMLElement ("pre")}}. Puis, la valeur de <code>innerHTML</code> est modifiée dans cette nouvelle chaîne. Par conséquent, le contenu du document est remplacé par un affichage du code source entier de la page.</p>
+Cet exemple récupère le balisage HTML actuel du document et remplace les caractères `"<"` par l'entité HTML `"& lt;"`, convertissant ainsi essentiellement le code HTML en texte brut. Ceci est ensuite inclus dans un élément {{HTMLElement ("pre")}}. Puis, la valeur de `innerHTML` est modifiée dans cette nouvelle chaîne. Par conséquent, le contenu du document est remplacé par un affichage du code source entier de la page.
 
-<pre class="brush: js">document.documentElement.innerHTML = "&lt;pre&gt;" +
-         document.documentElement.innerHTML.replace(/&lt;/g,"&amp;lt;") +
-            "&lt;/pre&gt;";</pre>
+```js
+document.documentElement.innerHTML = "<pre>" +
+         document.documentElement.innerHTML.replace(/</g,"&lt;") +
+            "</pre>";
+```
 
-<h4 id="Détails_opérationnels">Détails opérationnels</h4>
+#### Détails opérationnels
 
-<p>Qu'arrive-t-il exactement quand vous définissez la valeur de <code>innerHTML</code> ?  Cela entraîne l'agent utilisateur à suivre ces étapes :</p>
+Qu'arrive-t-il exactement quand vous définissez la valeur de `innerHTML` ?  Cela entraîne l'agent utilisateur à suivre ces étapes :
 
-<ol>
- <li>La valeur spécifiée est analysée en HTML ou XML (en fonction du type de document), ce qui donne un objet {{domxref ("DocumentFragment")}} représentant le nouvel ensemble de nœuds DOM pour les nouveaux éléments.</li>
- <li>Si l'élément dont le contenu est remplacé est un élément {{HTMLElement ("template")}}, l'attribut {{domxref ("HTMLTemplateElement.content", "content")}} de l'élément <code>&lt;template&gt;</code> est remplacé par le nouveau <code>DocumentFragment</code> créé à l'étape 1.</li>
- <li>Pour tous les autres éléments, le contenu de l'élément est remplacé par les noeuds du nouveau <code>DocumentFragment</code>.</li>
-</ol>
+1.  La valeur spécifiée est analysée en HTML ou XML (en fonction du type de document), ce qui donne un objet {{domxref ("DocumentFragment")}} représentant le nouvel ensemble de nœuds DOM pour les nouveaux éléments.
+2.  Si l'élément dont le contenu est remplacé est un élément {{HTMLElement ("template")}}, l'attribut {{domxref ("HTMLTemplateElement.content", "content")}} de l'élément `<template>` est remplacé par le nouveau `DocumentFragment` créé à l'étape 1.
+3.  Pour tous les autres éléments, le contenu de l'élément est remplacé par les noeuds du nouveau `DocumentFragment`.
 
-<h3 id="Considérations_de_sécurité">Considérations de sécurité</h3>
+### Considérations de sécurité
 
-<p>Il n'est pas rare de voir <code>innerHTML</code> utilisé pour insérer du texte dans une page Web. Il est possible que ceci devienne un vecteur d'attaque sur un site, ce qui crée potentiellement un risque de sécurité.</p>
+Il n'est pas rare de voir `innerHTML` utilisé pour insérer du texte dans une page Web. Il est possible que ceci devienne un vecteur d'attaque sur un site, ce qui crée potentiellement un risque de sécurité.
 
-<pre class="brush: js">const name = "John";
+```js
+const name = "John";
 // en supposant que 'el' est un élément de document HTML
 el.innerHTML = name; // inoffensif dans ce cas
 
 // ...
 
-name = "&lt;script&gt;alert('I am John in an annoying alert!')&lt;/script&gt;";
-el.innerHTML = name; // inoffensif dans ce cas</pre>
+name = "<script>alert('I am John in an annoying alert!')</script>";
+el.innerHTML = name; // inoffensif dans ce cas
+```
 
-<p>Bien que cela puisse ressembler à une attaque {{interwiki ("wikipedia", "cross-site_scripting","cross-site scripting")}}, le résultat est inoffensif. HTML5 spécifie qu'une balise {{HTMLElement ("script")}} insérée avec <code>innerHTML</code> <a href="https://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0">ne doit pas s'exécuter</a>.</p>
+Bien que cela puisse ressembler à une attaque {{interwiki ("wikipedia", "cross-site_scripting","cross-site scripting")}}, le résultat est inoffensif. HTML5 spécifie qu'une balise {{HTMLElement ("script")}} insérée avec `innerHTML` [ne doit pas s'exécuter](https://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0).
 
-<p>Cependant, il existe des moyens d'exécuter JavaScript sans utiliser les éléments {{HTMLElement ("script")}}, donc il existe toujours un risque de sécurité chaque fois que vous utilisez <code>innerHTML</code> pour définir des chaînes sur lesquelles vous n'avez aucun contrôle. Par exemple :</p>
+Cependant, il existe des moyens d'exécuter JavaScript sans utiliser les éléments {{HTMLElement ("script")}}, donc il existe toujours un risque de sécurité chaque fois que vous utilisez `innerHTML` pour définir des chaînes sur lesquelles vous n'avez aucun contrôle. Par exemple :
 
-<pre class="brush: js">const name = "&lt;img src='x' onerror='alert(1)'&gt;";
-el.innerHTML = name; // affiche l'alerte</pre>
+```js
+const name = "<img src='x' onerror='alert(1)'>";
+el.innerHTML = name; // affiche l'alerte
+```
 
-<p>Pour cette raison, il est recommandé de ne pas utiliser <code>innerHTML</code> pour insérer du texte brut ; à la place, utilisez {{domxref("Node.textContent")}}. Cela n'analyse pas le contenu passé en HTML, mais l'insère à la place en tant que texte brut.</p>
+Pour cette raison, il est recommandé de ne pas utiliser `innerHTML` pour insérer du texte brut ; à la place, utilisez {{domxref("Node.textContent")}}. Cela n'analyse pas le contenu passé en HTML, mais l'insère à la place en tant que texte brut.
 
-<div class="warning">
-<p><strong>Attention :</strong> Si votre projet est soumis à une vérification de sécurité, l'utilisation de <code>innerHTML</code> entraînera probablement le rejet de votre code. Par exemple, si vous utilisez <code>innerHTML</code> dans une extension de navigateur et soumettez l'extension à addons.mozilla.org, elle ne passera pas le processus de révision automatique.</p>
-</div>
+> **Attention :** Si votre projet est soumis à une vérification de sécurité, l'utilisation de `innerHTML` entraînera probablement le rejet de votre code. Par exemple, si vous utilisez `innerHTML` dans une extension de navigateur et soumettez l'extension à addons.mozilla.org, elle ne passera pas le processus de révision automatique.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Cet exemple utilise <code>innerHTML</code> pour créer un mécanisme pour consigner des messages dans une boîte sur une page Web.</p>
+Cet exemple utilise `innerHTML` pour créer un mécanisme pour consigner des messages dans une boîte sur une page Web.
 
-<h3 id="JavaScript">JavaScript</h3>
+### JavaScript
 
-<pre class="brush: js">function log(msg) {
+```js
+function log(msg) {
   var logElem = document.querySelector(".log");
 
   var time = new Date();
   var timeStr = time.toLocaleTimeString();
-  logElem.innerHTML += timeStr + ": " + msg + "&lt;br/&gt;";
+  logElem.innerHTML += timeStr + ": " + msg + "<br/>";
 }
 
-log("Logging mouse events inside this container...");</pre>
+log("Logging mouse events inside this container...");
+```
 
-<p>La fonction <code>log()</code> crée la sortie du journal en récupérant l'heure actuelle à partir d'un objet {{jsxref ("Date")}} en utilisant {{jsxref ("Date.toLocaleTimeString", "toLocaleTimeString ()")}} et en créant une chaîne avec l'horodatage et le texte du message. Ensuite, le message est ajouté à la boîte avec la classe <code>"log"</code>.</p>
+La fonction `log()` crée la sortie du journal en récupérant l'heure actuelle à partir d'un objet {{jsxref ("Date")}} en utilisant {{jsxref ("Date.toLocaleTimeString", "toLocaleTimeString ()")}} et en créant une chaîne avec l'horodatage et le texte du message. Ensuite, le message est ajouté à la boîte avec la classe `"log"`.
 
-<p>Nous ajoutons une seconde méthode qui enregistre des informations sur les événements basés sur {{domxref ("MouseEvent")}} (tels que {{event ("mousedown")}}, {{event ("click")}} et {{event ("mouseenter") }}) :</p>
+Nous ajoutons une seconde méthode qui enregistre des informations sur les événements basés sur {{domxref ("MouseEvent")}} (tels que {{event ("mousedown")}}, {{event ("click")}} et {{event ("mouseenter") }}) :
 
-<pre class="brush: js">function logEvent(event) {
-  var msg = "Event &lt;strong&gt;" + event.type + "&lt;/strong&gt; at &lt;em&gt;" +
-            event.clientX + ", " + event.clientY + "&lt;/em&gt;";
+```js
+function logEvent(event) {
+  var msg = "Event <strong>" + event.type + "</strong> at <em>" +
+            event.clientX + ", " + event.clientY + "</em>";
   log(msg);
-}</pre>
+}
+```
 
-<p>Alors, nous utilisons ceci comme un gestionnaire d'évènements pour un certain nombre d'évènements de souris sur la boîte qui contient notre journal.</p>
+Alors, nous utilisons ceci comme un gestionnaire d'évènements pour un certain nombre d'évènements de souris sur la boîte qui contient notre journal.
 
-<pre class="brush: js">var boxElem = document.querySelector(".box");
+```js
+var boxElem = document.querySelector(".box");
 
 boxElem.addEventListener("mousedown", logEvent);
 boxElem.addEventListener("mouseup", logEvent);
 boxElem.addEventListener("click", logEvent);
 boxElem.addEventListener("mouseenter", logEvent);
-boxElem.addEventListener("mouseleave", logEvent);</pre>
+boxElem.addEventListener("mouseleave", logEvent);
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<p>Le HTML est assez simple pour notre exemple.</p>
+Le HTML est assez simple pour notre exemple.
 
-<pre class="brush: html">&lt;div class="box"&gt;
-  &lt;div&gt;&lt;strong&gt;Log:&lt;/strong&gt;&lt;/div&gt;
-  &lt;div class="log"&gt;&lt;/div&gt;
-&lt;/div&gt;</pre>
+```html
+<div class="box">
+  <div><strong>Log:</strong></div>
+  <div class="log"></div>
+</div>
+```
 
-<p>Le {{HTMLElement ("div")}} avec la classe <code>"box"</code> est juste un conteneur pour la mise en page, présentant le contenu avec une boîte autour de lui. Le <code>&lt;div&gt;</code> dont la classe est <code>"log"</code> est le conteneur pour le texte du journal lui-même.</p>
+Le {{HTMLElement ("div")}} avec la classe `"box"` est juste un conteneur pour la mise en page, présentant le contenu avec une boîte autour de lui. Le `<div>` dont la classe est `"log"` est le conteneur pour le texte du journal lui-même.
 
-<h3 id="Notes">CSS</h3>
+### CSS
 
-<p>Les styles CSS suivants pour notre exemple de contenu.</p>
+Les styles CSS suivants pour notre exemple de contenu.
 
-<pre class="brush: css">.box {
+```css
+.box {
   width: 600px;
   height: 300px;
   border: 1px solid black;
@@ -169,38 +177,24 @@ boxElem.addEventListener("mouseleave", logEvent);</pre>
 .log {
   margin-top: 8px;
   font-family: monospace;
-}</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>Le contenu résultant ressemble à ceci. Vous pouvez voir la sortie dans le journal en déplaçant la souris dans et hors de la boîte, en cliquant dedans, et ainsi de suite.</p>
-
-<p>{{EmbedLiveSample("Exemple", 640, 350)}}</p>
-
-<h2 id="Specification">Spécification</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('DOM Parsing', '#innerhtml', 'Element.innerHTML')}}</td>
-   <td>{{ Spec2('DOM Parsing') }}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="References">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("Node.textContent")}} and {{domxref("Node.innerText")}}</li>
- <li>{{domxref("Element.insertAdjacentHTML")}}</li>
- <li>Analyse HTML dans une arborescence DOM : {{domxref("DOMParser")}}</li>
- <li>Sérialisation XML ou HTML dans une arborescence DOM : {{domxref("XMLSerializer")}}</li>
-</ul>
+}
+```
+
+### Résultat
+
+Le contenu résultant ressemble à ceci. Vous pouvez voir la sortie dans le journal en déplaçant la souris dans et hors de la boîte, en cliquant dedans, et ainsi de suite.
+
+{{EmbedLiveSample("Exemple", 640, 350)}}
+
+## Spécification
+
+| Spécification                                                                        | Statut                               | Commentaire          |
+| ------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- |
+| {{SpecName('DOM Parsing', '#innerhtml', 'Element.innerHTML')}} | {{ Spec2('DOM Parsing') }} | Définition initiale. |
+
+## Voir aussi
+
+- {{domxref("Node.textContent")}} and {{domxref("Node.innerText")}}
+- {{domxref("Element.insertAdjacentHTML")}}
+- Analyse HTML dans une arborescence DOM : {{domxref("DOMParser")}}
+- Sérialisation XML ou HTML dans une arborescence DOM : {{domxref("XMLSerializer")}}
diff --git a/files/fr/web/api/element/insertadjacentelement/index.md b/files/fr/web/api/element/insertadjacentelement/index.md
index 8587eb5de0..f13f332b60 100644
--- a/files/fr/web/api/element/insertadjacentelement/index.md
+++ b/files/fr/web/api/element/insertadjacentelement/index.md
@@ -9,72 +9,55 @@ tags:
   - Méthodes
 translation_of: Web/API/Element/insertAdjacentElement
 ---
-<p>{{APIRef("DOM")}}</p>
-
-<p>La méthode <code>insertAdjacentElement()</code> insère un noeud d'élément donné à une position donnée par rapport à l'élément sur lequel il est appelé.</p>
-
-<h2 id="Syntax">Syntaxe</h2>
-
-<pre><em>targetElement</em>.insertAdjacentElement(<em>position</em>, <em>element</em>);</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt>position</dt>
- <dd>Un objet {{domxref("DOMString")}} (<em>chaîne de caractères</em>) représentant la position par rapport à <code>targetElement</code> ; cela doit correspondre ( sans prendre en compte la casse ) à une des chaînes suivantes :
- <ul>
-  <li><code>'beforebegin'</code> : Avant <code>targetElement</code> lui-même.</li>
-  <li><code>'afterbegin'</code> : A l'intérieur de <code>targetElement</code>, avant son premier enfant.</li>
-  <li><code>'beforeend'</code> : A l'intérieur de <code>targetElement</code>, après son dernier enfant.</li>
-  <li><code>'afterend'</code> : Après <code>targetElement</code> lui-même.</li>
- </ul>
- </dd>
- <dt>element</dt>
- <dd>L'élément à insérer dans l'arbre.</dd>
-</dl>
-
-<h3 id="Valeur_retournée">Valeur retournée</h3>
-
-<p>L'élément inséré ou <code>null</code> si l'insertion a échouée.</p>
-
-<h3 id="Exceptions">Exceptions</h3>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Exception</th>
-   <th scope="col">Explications</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>SyntaxError</code></td>
-   <td>La <code>position</code> donnée n'est pas une valeur reconnue.</td>
-  </tr>
-  <tr>
-   <td><code>TypeError</code></td>
-   <td>L'<code>element</code> spécifié n'est pas un élément valide.</td>
-  </tr>
- </tbody>
-</table>
-
-<h3 id="Visualisation_des_positionnements">Visualisation des positionnements</h3>
-
-<pre>&lt;!-- beforebegin --&gt;
-&lt;p&gt;
-&lt;!-- afterbegin --&gt;
-foo
-&lt;!-- beforeend --&gt;
-&lt;/p&gt;
-&lt;!-- afterend --&gt;</pre>
-
-<div class="note">
-  <p><strong>Note :</strong> Les positions <code>beforebegin</code> et <code>afterend</code> ne fonctionnent que si le noeud est dans l'arbre et s'il possède un élément parent.</p>
-</div>
-
-<h2 id="Example">Exemple</h2>
-
-<pre class="brush: js">beforeBtn.addEventListener('click', function() {
+{{APIRef("DOM")}}
+
+La méthode `insertAdjacentElement()` insère un noeud d'élément donné à une position donnée par rapport à l'élément sur lequel il est appelé.
+
+## Syntaxe
+
+    targetElement.insertAdjacentElement(position, element);
+
+### Paramètres
+
+- position
+
+  - : Un objet {{domxref("DOMString")}} (_chaîne de caractères_) représentant la position par rapport à `targetElement` ; cela doit correspondre ( sans prendre en compte la casse ) à une des chaînes suivantes :
+
+    - `'beforebegin'` : Avant `targetElement` lui-même.
+    - `'afterbegin'` : A l'intérieur de `targetElement`, avant son premier enfant.
+    - `'beforeend'` : A l'intérieur de `targetElement`, après son dernier enfant.
+    - `'afterend'` : Après `targetElement` lui-même.
+
+- element
+  - : L'élément à insérer dans l'arbre.
+
+### Valeur retournée
+
+L'élément inséré ou `null` si l'insertion a échouée.
+
+### Exceptions
+
+| Exception     | Explications                                        |
+| ------------- | --------------------------------------------------- |
+| `SyntaxError` | La `position` donnée n'est pas une valeur reconnue. |
+| `TypeError`   | L'`element` spécifié n'est pas un élément valide.   |
+
+### Visualisation des positionnements
+
+    <!-- beforebegin -->
+    <p>
+    <!-- afterbegin -->
+    foo
+    <!-- beforeend -->
+    </p>
+    <!-- afterend -->
+
+> **Note :** Les positions `beforebegin` et `afterend` ne fonctionnent que si le noeud est dans l'arbre et s'il possède un élément parent.
+
+## Exemple
+
+```js
+beforeBtn.addEventListener('click', function() {
   var tempDiv = document.createElement('div');
   tempDiv.style.backgroundColor = randomColor();
   if (activeElem) {
@@ -90,38 +73,24 @@ afterBtn.addEventListener('click', function() {
     activeElem.insertAdjacentElement('afterend',tempDiv);
   }
   setListener(tempDiv);
-});</pre>
-
-<p>Une démo de notre <a href="https://mdn.github.io/dom-examples/insert-adjacent/insertAdjacentElement.html">insertAdjacentElement.html</a> est disponible sur Github ( avec le <a href="https://github.com/mdn/dom-examples/blob/master/insert-adjacent/insertAdjacentElement.html">code source</a> ). Nous avons un ensemble d'éléments {{htmlelement("div")}} dans un conteneur. Quand un élément reçoit un clic, il est sélectionné et vous pouvez appuyer sur les boutons <em>Insert before</em> (<em>insérer avant</em>) et <em>Insert after</em> (<em>insérer après</em>) pour insérer de nouveaux divs avant ou après l'élement sélectionné en utilisant <code>insertAdjacentElement()</code>.</p>
-
-<h2 id="Specification">Spécification</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('DOM WHATWG', '#dom-element-insertadjacentelement', 'insertAdjacentElement()')}}</td>
-   <td>{{ Spec2('DOM WHATWG') }}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Element.insertAdjacentElement")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("Element.insertAdjacentHTML()")}}</li>
- <li>{{domxref("Element.insertAdjacentText()")}}</li>
- <li>{{domxref("Node.insertBefore()")}}</li>
- <li>{{domxref("Node.appendChild()")}} ( même effet que <code>beforeend</code> )</li>
-</ul>
+});
+```
+
+Une démo de notre [insertAdjacentElement.html](https://mdn.github.io/dom-examples/insert-adjacent/insertAdjacentElement.html) est disponible sur Github ( avec le [code source](https://github.com/mdn/dom-examples/blob/master/insert-adjacent/insertAdjacentElement.html) ). Nous avons un ensemble d'éléments {{htmlelement("div")}} dans un conteneur. Quand un élément reçoit un clic, il est sélectionné et vous pouvez appuyer sur les boutons _Insert before_ (_insérer avant_) et _Insert after_ (_insérer après_) pour insérer de nouveaux divs avant ou après l'élement sélectionné en utilisant `insertAdjacentElement()`.
+
+## Spécification
+
+| Spécification                                                                                                            | Statut                           | Commentaire |
+| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- |
+| {{SpecName('DOM WHATWG', '#dom-element-insertadjacentelement', 'insertAdjacentElement()')}} | {{ Spec2('DOM WHATWG') }} |             |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Element.insertAdjacentElement")}}
+
+## Voir aussi
+
+- {{domxref("Element.insertAdjacentHTML()")}}
+- {{domxref("Element.insertAdjacentText()")}}
+- {{domxref("Node.insertBefore()")}}
+- {{domxref("Node.appendChild()")}} ( même effet que `beforeend` )
diff --git a/files/fr/web/api/element/insertadjacenthtml/index.md b/files/fr/web/api/element/insertadjacenthtml/index.md
index e1f0ffa06a..39f3fb07b7 100644
--- a/files/fr/web/api/element/insertadjacenthtml/index.md
+++ b/files/fr/web/api/element/insertadjacenthtml/index.md
@@ -8,92 +8,76 @@ tags:
   - Reference
 translation_of: Web/API/Element/insertAdjacentHTML
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p><code>insertAdjacentHTML()</code> analyse le texte spécifié en tant que HTML ou XML et insère les noeuds résultants dans le DOM à la position spécifiée. L'élement qui est utilisé n'est pas réanalysé et les élements qu'il contient ne sont donc pas corrompus. Ceci, et le fait d'éviter la sérialisation supplémentaire, rend la fonction plus rapide et directe que <strong>innerHTML</strong>.</p>
+`insertAdjacentHTML()` analyse le texte spécifié en tant que HTML ou XML et insère les noeuds résultants dans le DOM à la position spécifiée. L'élement qui est utilisé n'est pas réanalysé et les élements qu'il contient ne sont donc pas corrompus. Ceci, et le fait d'éviter la sérialisation supplémentaire, rend la fonction plus rapide et directe que **innerHTML**.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">element.insertAdjacentHTML(position, text);</pre>
+```js
+element.insertAdjacentHTML(position, text);
+```
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>position</code> </dt>
- <dd>une {{domxref("DOMString")}}  représentant la position relative à l'<code>element</code>, et doit être une des chaînes de caractères suivantes :</dd>
-</dl>
+- `position`
+  - : une {{domxref("DOMString")}}  représentant la position relative à l'`element`, et doit être une des chaînes de caractères suivantes :
 
-<ul>
- <li><code>'beforebegin'</code> : Avant l'<code>element</code>  lui-même.</li>
- <li><code>'afterbegin'</code> : Juste à l'intérieur de l'<code>element</code> , avant son premier enfant.</li>
- <li><code>'beforeend'</code> : Juste à l'intérieur de l'<code>element</code> , après son dernier enfant.</li>
- <li><code>'afterend'</code> : Après <code>element</code> lui-même.</li>
-</ul>
+<!---->
 
-<dl>
- <dt><code>text</code></dt>
- <dd> est la chaîne de caractères qui doit être analysée en tant qu'HTML ou XML et insérée dans l'arbre du DOM.</dd>
-</dl>
+- `'beforebegin'` : Avant l'`element`  lui-même.
+- `'afterbegin'` : Juste à l'intérieur de l'`element` , avant son premier enfant.
+- `'beforeend'` : Juste à l'intérieur de l'`element` , après son dernier enfant.
+- `'afterend'` : Après `element` lui-même.
 
-<h3 id="Visualisation_des_noms_de_position">Visualisation des noms de position</h3>
+<!---->
 
+- `text`
+  - :  est la chaîne de caractères qui doit être analysée en tant qu'HTML ou XML et insérée dans l'arbre du DOM.
 
-<pre>&lt;!-- beforebegin --&gt;
-&lt;p&gt;
-  &lt;!-- afterbegin --&gt;
-  foo
-  &lt;!-- beforeend --&gt;
-&lt;/p&gt;
-&lt;!-- afterend --&gt;</pre>
+### Visualisation des noms de position
 
-<div class="note">
-  <p><strong>Note :</strong> Les positions <code>beforebegin</code> et <code>afterend</code> ne fonctionnent que si le noeud est un arbre et a un élément parent.</p>
-</div>
+    <!-- beforebegin -->
+    <p>
+      <!-- afterbegin -->
+      foo
+      <!-- beforeend -->
+    </p>
+    <!-- afterend -->
 
-<h2 id="Example">Exemple</h2>
+> **Note :** Les positions `beforebegin` et `afterend` ne fonctionnent que si le noeud est un arbre et a un élément parent.
 
-<pre class="brush: js">// &lt;div id="one"&gt;one&lt;/div&gt;
+## Exemple
+
+```js
+// <div id="one">one</div>
 var d1 = document.getElementById('one');
-d1.insertAdjacentHTML('afterend', '&lt;div id="two"&gt;two&lt;/div&gt;');
+d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');
 
 // Ici la nouvelle structure est :
-// &lt;div id="one"&gt;one&lt;/div&gt;&lt;div id="two"&gt;two&lt;/div&gt;</pre>
+// <div id="one">one</div><div id="two">two</div>
+```
 
-<h2 id="Browser_Compatibility">Notes</h2>
+## Notes
 
-<h3 id="Considérations_de_sécurité">Considérations de sécurité</h3>
+### Considérations de sécurité
 
-<p>Lorsque vous insérez du code HTML dans une page en utilisant insertAdjacentHTML, veillez à ne pas utiliser d'entrée utilisateur qui n'a pas été échappée.</p>
+Lorsque vous insérez du code HTML dans une page en utilisant insertAdjacentHTML, veillez à ne pas utiliser d'entrée utilisateur qui n'a pas été échappée.
 
-<p>Il est recommandé de ne pas utiliser <code>insertAdjacentHTML</code> lors de l'insertion de texte brut; à la place, utilisez la propriété <code>node.textContent</code> ou la méthode <code>node.insertAdjacentText()</code>. Cela n'interprète pas le contenu transmis au format HTML, mais l'insère à la place sous forme de texte brut.</p>
+Il est recommandé de ne pas utiliser `insertAdjacentHTML` lors de l'insertion de texte brut; à la place, utilisez la propriété `node.textContent` ou la méthode `node.insertAdjacentText()`. Cela n'interprète pas le contenu transmis au format HTML, mais l'insère à la place sous forme de texte brut.
 
-<h2 id="Spécification">Spécification</h2>
+## Spécification
 
-<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('DOM Parsing', '#widl-Element-insertAdjacentHTML-void-DOMString-position-DOMString-text', 'Element.insertAdjacentHTML()')}}</td>
-   <td>{{ Spec2('DOM Parsing') }}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                                                                        | Statut                               | Commentaire |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ----------- |
+| {{SpecName('DOM Parsing', '#widl-Element-insertAdjacentHTML-void-DOMString-position-DOMString-text', 'Element.insertAdjacentHTML()')}} | {{ Spec2('DOM Parsing') }} |             |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Element.insertAdjacentHTML")}}</p>
+{{Compat("api.Element.insertAdjacentHTML")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("Element.insertAdjacentElement()")}}</li>
- <li>{{domxref("Element.insertAdjacentText()")}}</li>
- <li><a href="https://hacks.mozilla.org/2011/11/insertadjacenthtml-enables-faster-html-snippet-injection/">hacks.mozilla.org guest post</a> par Henri Sivonen  y compris le benchmark montrant que insertAdjacentHTML peut être beaucoup plus rapide dans certains cas.</li>
-</ul>
+- {{domxref("Element.insertAdjacentElement()")}}
+- {{domxref("Element.insertAdjacentText()")}}
+- [hacks.mozilla.org guest post](https://hacks.mozilla.org/2011/11/insertadjacenthtml-enables-faster-html-snippet-injection/) par Henri Sivonen y compris le benchmark montrant que insertAdjacentHTML peut être beaucoup plus rapide dans certains cas.
diff --git a/files/fr/web/api/element/insertadjacenttext/index.md b/files/fr/web/api/element/insertadjacenttext/index.md
index f0ab71ddad..2ecca80491 100644
--- a/files/fr/web/api/element/insertadjacenttext/index.md
+++ b/files/fr/web/api/element/insertadjacenttext/index.md
@@ -10,118 +10,89 @@ tags:
   - Texte
 translation_of: Web/API/Element/insertAdjacentText
 ---
-<p>{{APIRef("DOM")}}</p>
-
-<p>La méthode <code>insertAdjacentText()</code> insère un noeud texte donné à une position donnée par rapport à l'élément sur lequel elle est appelé.</p>
-
-<h2 id="Syntax">Syntaxe</h2>
-
-<pre><em>element</em>.insertAdjacentText(<em>position</em>, <em>element</em>);</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt>position</dt>
- <dd>Une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) représentant la position par rapport à l'<code>element</code> ; elle doit être l'une des chaînes suivantes :
- <ul>
-  <li><code>'beforebegin'</code> : avant l'<code>element</code> lui-même ;</li>
-  <li><code>'afterbegin'</code> : à l'intérieur de l'<code>element</code>, avant son premier enfant ;</li>
-  <li><code>'beforeend'</code> : à l'intérieur de l'<code>element</code>, avant son dernier enfant ;</li>
-  <li><code>'afterend'</code> : après l'<code>element</code> lui-même.</li>
- </ul>
- </dd>
- <dt>element</dt>
- <dd>Une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) représentant le texte à insérer dans l'arbre.</dd>
-</dl>
-
-<h3 id="Valeur_renvoyée">Valeur renvoyée</h3>
-
-<p>Vide.</p>
-
-<h3 id="Exceptions">Exceptions</h3>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Exception</th>
-   <th scope="col">Explication</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>SyntaxError</code></td>
-   <td>La <code>position</code> indiquée n'est pas une valeur reconnue.</td>
-  </tr>
- </tbody>
-</table>
-
-<h3 id="Visualisation_des_noms_de_position">Visualisation des noms de position</h3>
-
-<pre>&lt;!-- beforebegin --&gt;
-&lt;p&gt;
-&lt;!-- afterbegin> --&gt;
-machin
-&lt;!-- beforeend --&gt;
-&lt;/p&gt;
-&lt;!-- afterend --&gt;</pre>
-
-<div class="note">
-  <p><strong>Note :</strong> Les positions <code>beforebegin</code> et <code>afterend</code> ne fonctionnent que si le noeud est dans l'arbre et possède un élément parent.</p>
-</div>
-
-<h2 id="Example">Exemple</h2>
-
-<pre class="brush: js">beforeBtn.addEventListener('click', function() {
+{{APIRef("DOM")}}
+
+La méthode `insertAdjacentText()` insère un noeud texte donné à une position donnée par rapport à l'élément sur lequel elle est appelé.
+
+## Syntaxe
+
+    element.insertAdjacentText(position, element);
+
+### Paramètres
+
+- position
+
+  - : Une {{domxref("DOMString")}} (_chaîne de caractères_) représentant la position par rapport à l'`element` ; elle doit être l'une des chaînes suivantes :
+
+    - `'beforebegin'` : avant l'`element` lui-même ;
+    - `'afterbegin'` : à l'intérieur de l'`element`, avant son premier enfant ;
+    - `'beforeend'` : à l'intérieur de l'`element`, avant son dernier enfant ;
+    - `'afterend'` : après l'`element` lui-même.
+
+- element
+  - : Une {{domxref("DOMString")}} (_chaîne de caractères_) représentant le texte à insérer dans l'arbre.
+
+### Valeur renvoyée
+
+Vide.
+
+### Exceptions
+
+| Exception     | Explication                                           |
+| ------------- | ----------------------------------------------------- |
+| `SyntaxError` | La `position` indiquée n'est pas une valeur reconnue. |
+
+### Visualisation des noms de position
+
+    <!-- beforebegin -->
+    <p>
+    <!-- afterbegin> -->
+    machin
+    <!-- beforeend -->
+    </p>
+    <!-- afterend -->
+
+> **Note :** Les positions `beforebegin` et `afterend` ne fonctionnent que si le noeud est dans l'arbre et possède un élément parent.
+
+## Exemple
+
+```js
+beforeBtn.addEventListener('click', function() {
   para.insertAdjacentText('afterbegin',textInput.value);
 });
 
 afterBtn.addEventListener('click', function() {
   para.insertAdjacentText('beforeend',textInput.value);
-});</pre>
-
-<p>Jetez un œil à notre démo <a href="https://mdn.github.io/dom-examples/insert-adjacent/insertAdjacentText.html">insertAdjacentText.html</a> sur GitHub (voir le <a href="https://github.com/mdn/dom-examples/blob/master/insert-adjacent/insertAdjacentText.html">code source</a> aussi). Ici, nous avons un simple paragraphe. Vous pouvez entrer du texte dans l'élément de formulaire, puis presser les boutons <em>Insert before</em> (<em>insère avant</em>) et <em>Insert after</em> (<em>insère après</em>) pour l'insérer avant ou après le texte de paragraphe existant en utilisant <code>insertAdjacentText()</code>. Notez que le nœud texte existant n'y est pas ajouté — d'autres nœuds de texte sont créés contenant le nouvel ajout.</p>
-
-<h2 id="Émulation">Émulation</h2>
-
-<p>Vous pouvez utiliser une émulation de la méthode <code>insertAdjacentText()</code> dans Internet Explorer 5.5 (et peut-être antérieur) et supérieur avec le code suivant :</p>
-
-<pre>if (!Element.prototype.insertAdjacentText)
-  Element.prototype.insertAdjacentText = function(type, txt){
-    this.insertAdjacentHTML(
-      type,
-      (txt+'') // convertir en chaîne de caractères
-        .replace(/&amp;/g, '&amp;amp;') // intégrer des symboles d'esperluette
-        .replace(/&lt;/g, '&amp;lt;') // intégrer les symboles "plus petit que"
-    )
-  }
-</pre>
-
-<h2 id="Specification">Spécification</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('DOM WHATWG', '#dom-element-insertadjacenttext', 'insertAdjacentText()')}}</td>
-   <td>{{ Spec2('DOM WHATWG') }}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Element.insertAdjacentText")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("Element.insertAdjacentElement()")}}</li>
- <li>{{domxref("Element.insertAdjacentHTML()")}}</li>
-</ul>
+});
+```
+
+Jetez un œil à notre démo [insertAdjacentText.html](https://mdn.github.io/dom-examples/insert-adjacent/insertAdjacentText.html) sur GitHub (voir le [code source](https://github.com/mdn/dom-examples/blob/master/insert-adjacent/insertAdjacentText.html) aussi). Ici, nous avons un simple paragraphe. Vous pouvez entrer du texte dans l'élément de formulaire, puis presser les boutons _Insert before_ (_insère avant_) et _Insert after_ (_insère après_) pour l'insérer avant ou après le texte de paragraphe existant en utilisant `insertAdjacentText()`. Notez que le nœud texte existant n'y est pas ajouté — d'autres nœuds de texte sont créés contenant le nouvel ajout.
+
+## Émulation
+
+Vous pouvez utiliser une émulation de la méthode `insertAdjacentText()` dans Internet Explorer 5.5 (et peut-être antérieur) et supérieur avec le code suivant :
+
+    if (!Element.prototype.insertAdjacentText)
+      Element.prototype.insertAdjacentText = function(type, txt){
+        this.insertAdjacentHTML(
+          type,
+          (txt+'') // convertir en chaîne de caractères
+            .replace(/&/g, '&amp;') // intégrer des symboles d'esperluette
+            .replace(/</g, '&lt;') // intégrer les symboles "plus petit que"
+        )
+      }
+
+## Spécification
+
+| Spécification                                                                                                    | Statut                           | Commentaire |
+| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- |
+| {{SpecName('DOM WHATWG', '#dom-element-insertadjacenttext', 'insertAdjacentText()')}} | {{ Spec2('DOM WHATWG') }} |             |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Element.insertAdjacentText")}}
+
+## Voir aussi
+
+- {{domxref("Element.insertAdjacentElement()")}}
+- {{domxref("Element.insertAdjacentHTML()")}}
diff --git a/files/fr/web/api/element/localname/index.md b/files/fr/web/api/element/localname/index.md
index d64738b272..8123b9bf3d 100644
--- a/files/fr/web/api/element/localname/index.md
+++ b/files/fr/web/api/element/localname/index.md
@@ -11,96 +11,78 @@ tags:
   - local
 translation_of: Web/API/Element/localName
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p>La propriété en lecture seule <code><strong>Element.localName</strong></code> renvoie la partie locale du nom qualifié d'un élément.</p>
+La propriété en lecture seule **`Element.localName`** renvoie la partie locale du nom qualifié d'un élément.
 
-<div class="note">
-<p><strong>Note :</strong> Dans les versions précédentes de la spécification DOM, cet API était défini dans l'interface {{domxref("Node")}}.</p>
-</div>
+> **Note :** Dans les versions précédentes de la spécification DOM, cet API était défini dans l'interface {{domxref("Node")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var>name</var> = <var>element</var>.localName
-</pre>
+    name = element.localName
 
-<h3 id="Valeur_renvoyée">Valeur renvoyée</h3>
+### Valeur renvoyée
 
-<p>Une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) représentant la partie locale du nom qualifié de l'élément.</p>
+Une {{domxref("DOMString")}} (_chaîne de caractères_) représentant la partie locale du nom qualifié de l'élément.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>(Doit être servi avec un type de contenu XML, tel que <code>text/xml</code> ou <code>application/xhtml+xml</code>.)</p>
+(Doit être servi avec un type de contenu XML, tel que `text/xml` ou `application/xhtml+xml`.)
 
-<pre class="brush:xml">&lt;html xmlns="http://www.w3.org/1999/xhtml"
-      xmlns:svg="http://www.w3.org/2000/svg"&gt;
-&lt;head&gt;
-  &lt;script type="application/javascript"&gt;&lt;![CDATA[
+```xml
+<html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:svg="http://www.w3.org/2000/svg">
+<head>
+  <script type="application/javascript"><![CDATA[
   function test() {
     var text = document.getElementById('text');
     var circle = document.getElementById('circle');
 
-    text.value = "&lt;svg:circle&gt; has:\n" +
+    text.value = "<svg:circle> has:\n" +
                  "localName = '" + circle.localName + "'\n" +
                  "namespaceURI = '" + circle.namespaceURI + "'";
   }
-  ]]&gt;&lt;/script&gt;
-&lt;/head&gt;
-&lt;body onload="test()"&gt;
-  &lt;svg:svg version="1.1"
+  ]]></script>
+</head>
+<body onload="test()">
+  <svg:svg version="1.1"
     width="100px" height="100px"
-    viewBox="0 0 100 100"&gt;
-    &lt;svg:circle cx="50" cy="50" r="30" style="fill:#aaa" id="circle"/&gt;
-  &lt;/svg:svg&gt;
-  &lt;textarea id="text" rows="4" cols="55"/&gt;
-&lt;/body&gt;
-&lt;/html&gt;
-</pre>
-
-<h2 id="Notes">Notes</h2>
-
-<p>Le nom local d'un noeud est la partie du nom qualifié du noeud qui arrive après le signe deux points. Les noms qualifiés sont typiquement utilisés dans XML comme partie de l'espace de noms des documents particuliers XML. Par exemple, dans le nom qualifié <code>ecomm:partners</code>, <code>partners</code> est le nom local et <code>ecomm</code> est le préfixe :</p>
-
-<pre class="brush:xml">&lt;ecomm:business id="soda_shop" type="brick_n_mortar" xmlns:ecomm="http://example.com/ecomm"&gt;
-  &lt;ecomm:partners&gt;
-    &lt;ecomm:partner id="1001"&gt;Tony's Syrup Warehouse
-    &lt;/ecomm:partner&gt;
-  &lt;/ecomm:partner&gt;
-&lt;/ecomm:business&gt;
-</pre>
-
-<div class="note">
-<p><strong>Note :</strong> Dans {{Gecko("1.9.2")}} et antérieurs, la propriété renvoie la version majuscule du nom local pour les éléments HTML dans les DOM HTML (par opposition aux éléments XHTML dans les DOM XML). Dans les versions plus tardives, en conformité avec HTML5, la propriété renvoie dans la cas du stockage interne du DOM, en minuscule pour les éléments HTML dans les DOM HTML et les éléments XHTML dans les DOM XML. La propriété {{domxref("element.tagName","tagName")}} continue à renvoyer la casse majuscule pour les éléments HTML dans les DOM HTML.</p>
-</div>
-
-<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('DOM WHATWG', '#dom-element-localname', 'Element.localName')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Element.localName")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("Element.namespaceURI")}}</li>
- <li>{{domxref("Element.prefix")}}</li>
- <li>{{domxref("Attr.localName")}}</li>
- <li>{{domxref("Node.localName")}}</li>
-</ul>
+    viewBox="0 0 100 100">
+    <svg:circle cx="50" cy="50" r="30" style="fill:#aaa" id="circle"/>
+  </svg:svg>
+  <textarea id="text" rows="4" cols="55"/>
+</body>
+</html>
+```
+
+## Notes
+
+Le nom local d'un noeud est la partie du nom qualifié du noeud qui arrive après le signe deux points. Les noms qualifiés sont typiquement utilisés dans XML comme partie de l'espace de noms des documents particuliers XML. Par exemple, dans le nom qualifié `ecomm:partners`, `partners` est le nom local et `ecomm` est le préfixe :
+
+```xml
+<ecomm:business id="soda_shop" type="brick_n_mortar" xmlns:ecomm="http://example.com/ecomm">
+  <ecomm:partners>
+    <ecomm:partner id="1001">Tony's Syrup Warehouse
+    </ecomm:partner>
+  </ecomm:partner>
+</ecomm:business>
+```
+
+> **Note :** Dans {{Gecko("1.9.2")}} et antérieurs, la propriété renvoie la version majuscule du nom local pour les éléments HTML dans les DOM HTML (par opposition aux éléments XHTML dans les DOM XML). Dans les versions plus tardives, en conformité avec HTML5, la propriété renvoie dans la cas du stockage interne du DOM, en minuscule pour les éléments HTML dans les DOM HTML et les éléments XHTML dans les DOM XML. La propriété {{domxref("element.tagName","tagName")}} continue à renvoyer la casse majuscule pour les éléments HTML dans les DOM HTML.
+
+## Spécifications
+
+| Spécification                                                                                    | Statut                           | Commentaire          |
+| ------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName('DOM WHATWG', '#dom-element-localname', 'Element.localName')}} | {{Spec2('DOM WHATWG')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Element.localName")}}
+
+## Voir aussi
+
+- {{domxref("Element.namespaceURI")}}
+- {{domxref("Element.prefix")}}
+- {{domxref("Attr.localName")}}
+- {{domxref("Node.localName")}}
diff --git a/files/fr/web/api/element/matches/index.md b/files/fr/web/api/element/matches/index.md
index 21e4a2ee68..40ef961ca7 100644
--- a/files/fr/web/api/element/matches/index.md
+++ b/files/fr/web/api/element/matches/index.md
@@ -7,102 +7,84 @@ tags:
   - Selector
 translation_of: Web/API/Element/matches
 ---
-<p>{{ APIRef("DOM") }}</p>
+{{ APIRef("DOM") }}
 
-<p><code>La méthode<strong> </strong></code><strong><code>element.matches()</code></strong> renvoie <code>true</code> lorsque l'élément peut être sélectionné par le sélecteur défini par la chaîne passée en paramêtre; sinon, elle renvoie <code>false</code>.</p>
+`La méthode `**`element.matches()`** renvoie `true` lorsque l'élément peut être sélectionné par le sélecteur défini par la chaîne passée en paramêtre; sinon, elle renvoie `false`.
 
-<div class="warning">
-<p><strong>Attention :</strong> Certains navigateurs implémentent cette méthode sous le nom <code>matchesSelector()</code> non-standardisé et préfixé.</p>
-</div>
+> **Attention :** Certains navigateurs implémentent cette méthode sous le nom `matchesSelector()` non-standardisé et préfixé.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>var result</em> = <em>element</em>.matches(selectorString);
-</pre>
+    var result = element.matches(selectorString);
 
-<ul>
- <li><code>result</code> contient la valeur retournée <code>true</code> ou <code>false</code>.</li>
- <li><code>selectorString</code> est une chaîne définissant le sélecteur à tester sur l'élément.</li>
-</ul>
+- `result` contient la valeur retournée `true` ou `false`.
+- `selectorString` est une chaîne définissant le sélecteur à tester sur l'élément.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush: html">&lt;ul id="birds"&gt;
-  &lt;li&gt;perroquet amazone&lt;/li&gt;
-  &lt;li class="endangered"&gt;aigle des Philippines&lt;/li&gt;
-  &lt;li&gt;pélican blanc&lt;/li&gt;
-&lt;/ul&gt;
+```html
+<ul id="birds">
+  <li>perroquet amazone</li>
+  <li class="endangered">aigle des Philippines</li>
+  <li>pélican blanc</li>
+</ul>
 
-&lt;script type="text/javascript"&gt;
+<script type="text/javascript">
   var birds = document.getElementsByTagName('li');
 
-  for (var i = 0; i &lt; birds.length; i++) {
+  for (var i = 0; i < birds.length; i++) {
     if (birds[i].matches('.endangered')) {
       console.log('Le - ' + birds[i].textContent + '- est en voie de disparition !');
     }
   }
-&lt;/script&gt;</pre>
+</script>
+```
 
-<p>Ce code affichera l'alerte "Le - aigle des Philippines - est en voie de disparition !" sur la console, puisque l'élèment possède l'attribut<code> class </code>de valeur <code>endangered</code>.</p>
+Ce code affichera l'alerte "Le - aigle des Philippines - est en voie de disparition !" sur la console, puisque l'élèment possède l'attribut` class `de valeur `endangered`.
 
-<h2 id="Exceptions">Exceptions</h2>
+## Exceptions
 
-<dl>
- <dt><code>SYNTAX_ERR</code></dt>
- <dd>Lorsque la chaîne passée en paramêtre défini sélecteur invalide.</dd>
-</dl>
+- `SYNTAX_ERR`
+  - : Lorsque la chaîne passée en paramêtre défini sélecteur invalide.
 
-<h2 id="Polyfill">Polyfill</h2>
+## Polyfill
 
-<p>Pour les navigateurs qui ne supportent pas <code>Element.matches()</code> ou <code>Element.matchesSelector()</code>, mais fournissent le support de<code> document.querySelectorAll()</code>, il existe un <em>polyfill</em> :</p>
+Pour les navigateurs qui ne supportent pas `Element.matches()` ou `Element.matchesSelector()`, mais fournissent le support de` document.querySelectorAll()`, il existe un _polyfill_ :
 
-<pre>if (!Element.prototype.matches) {
-    Element.prototype.matches =
-        Element.prototype.matchesSelector ||
-        Element.prototype.mozMatchesSelector ||
-        Element.prototype.msMatchesSelector ||
-        Element.prototype.oMatchesSelector ||
-        Element.prototype.webkitMatchesSelector ||
-        function(s) {
-            var matches = (this.document || this.ownerDocument).querySelectorAll(s),
-                i = matches.length;
-            while (--i &gt;= 0 &amp;&amp; matches.item(i) !== this) {}
-            return i &gt; -1;
-        };
-}</pre>
+    if (!Element.prototype.matches) {
+        Element.prototype.matches =
+            Element.prototype.matchesSelector ||
+            Element.prototype.mozMatchesSelector ||
+            Element.prototype.msMatchesSelector ||
+            Element.prototype.oMatchesSelector ||
+            Element.prototype.webkitMatchesSelector ||
+            function(s) {
+                var matches = (this.document || this.ownerDocument).querySelectorAll(s),
+                    i = matches.length;
+                while (--i >= 0 && matches.item(i) !== this) {}
+                return i > -1;
+            };
+    }
 
-<p>Cependant, étant donné la possibilité de prendre en charge les anciens navigateurs, les éléments suivants devraient suffire pour la plupart (sinon tous) des cas pratiques (c'est-à-dire le support IE9 +).</p>
+Cependant, étant donné la possibilité de prendre en charge les anciens navigateurs, les éléments suivants devraient suffire pour la plupart (sinon tous) des cas pratiques (c'est-à-dire le support IE9 +).
 
-<pre class="brush: html">if (!Element.prototype.matches) {
+```html
+if (!Element.prototype.matches) {
     Element.prototype.matches = Element.prototype.msMatchesSelector;
-}</pre>
+}
+```
 
-<h2 id="Spécification">Spécification</h2>
+## Spécification
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Status</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#dom-element-matches', 'Element.prototype.matches')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                            | Status                           |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------- |
+| {{SpecName('DOM WHATWG', '#dom-element-matches', 'Element.prototype.matches')}} | {{Spec2('DOM WHATWG')}} |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
+{{Compat("api.Element.matches")}}
 
+## Voir aussi
 
-<p>{{Compat("api.Element.matches")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Les_s%C3%A9lecteurs">La syntaxe des sélecteurs</a></li>
- <li>autres méthodes qui utilisent les sélecteurs : {{domxref("element.querySelector()")}} et {{domxref("element.closest()")}}.</li>
-</ul>
+- [La syntaxe des sélecteurs](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Les_s%C3%A9lecteurs)
+- autres méthodes qui utilisent les sélecteurs : {{domxref("element.querySelector()")}} et {{domxref("element.closest()")}}.
diff --git a/files/fr/web/api/element/mousedown_event/index.md b/files/fr/web/api/element/mousedown_event/index.md
index 98ab94299d..f186be6852 100644
--- a/files/fr/web/api/element/mousedown_event/index.md
+++ b/files/fr/web/api/element/mousedown_event/index.md
@@ -10,79 +10,61 @@ tags:
   - mousedown
 translation_of: Web/API/Element/mousedown_event
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}
 
-<p>L'évènement <strong><code>mousedown</code></strong> est déclenché à partir d'un {{domxref("Element")}} lorsqu'on appuie sur le bouton d'un dispositif de pointage (une souris par exemple) pendant que le curseur est sur l'élément.</p>
+L'évènement **`mousedown`** est déclenché à partir d'un {{domxref("Element")}} lorsqu'on appuie sur le bouton d'un dispositif de pointage (une souris par exemple) pendant que le curseur est sur l'élément.
 
-<div class="note">
-<p><strong>Note :</strong> Cet évènement est différent de {{domxref("Element/click_event", "click")}}. <code>click</code> est déclenché après qu'un clic "entier" ait eu lieu (c'est-à-dire quand le bouton a été pressé puis relaché tandis que le pointeur était sur le même élément). <code>mousedown</code> est déclenché dès qu'on appuie sur le bouton.</p>
-</div>
+> **Note :** Cet évènement est différent de {{domxref("Element/click_event", "click")}}. `click` est déclenché après qu'un clic "entier" ait eu lieu (c'est-à-dire quand le bouton a été pressé puis relaché tandis que le pointeur était sur le même élément). `mousedown` est déclenché dès qu'on appuie sur le bouton.
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row">Se propage/remonte dans le DOM</th>
-   <td>Oui</td>
-  </tr>
-  <tr>
-   <th scope="row">Annulable</th>
-   <td>Oui</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface</th>
-   <td>{{domxref("MouseEvent")}}</td>
-  </tr>
-  <tr>
-   <th scope="row">Propriété pour la gestion d'évènement</th>
-   <td>{{domxref("GlobalEventHandlers.onmousedown", "onmousedown")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Se propage/remonte dans le DOM</th>
+      <td>Oui</td>
+    </tr>
+    <tr>
+      <th scope="row">Annulable</th>
+      <td>Oui</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface</th>
+      <td>{{domxref("MouseEvent")}}</td>
+    </tr>
+    <tr>
+      <th scope="row">Propriété pour la gestion d'évènement</th>
+      <td>
+        {{domxref("GlobalEventHandlers.onmousedown", "onmousedown")}}
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>{{page("/fr/docs/Web/API/Element/mousemove_event", "Exemples")}}</p>
+{{page("/fr/docs/Web/API/Element/mousemove_event", "Exemples")}}
 
-<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>
-  </tr>
- </thead>
- <thead>
-  <tr>
-   <td>{{SpecName('UI Events', '#event-type-mousedown', 'mousedown')}}</td>
-   <td>{{Spec2('UI Events')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM3 Events', '#event-type-mousedown', 'mousedown')}}</td>
-   <td>{{Spec2('DOM3 Events')}}</td>
-  </tr>
- </thead>
-</table>
+| Spécification                                                                            | État                             |
+| ---------------------------------------------------------------------------------------- | -------------------------------- |
+| {{SpecName('UI Events', '#event-type-mousedown', 'mousedown')}}     | {{Spec2('UI Events')}}     |
+| {{SpecName('DOM3 Events', '#event-type-mousedown', 'mousedown')}} | {{Spec2('DOM3 Events')}} |
+
+## Compatibilité des navigateurs
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+{{Compat("api.Element.mousedown_event")}}
 
-<p>{{Compat("api.Element.mousedown_event")}}</p>
+## Voir aussi
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+- [Une introduction aux évènements](/fr/docs/Apprendre/JavaScript/Building_blocks/Evènements)
+- D'autres évènements connexes
 
-<ul>
- <li><a href="/fr/docs/Apprendre/JavaScript/Building_blocks/Evènements">Une introduction aux évènements</a></li>
- <li>D'autres évènements connexes
-  <ul>
-   <li><a href="/fr/docs/Web/API/Element/mouseup_event"><code>mouseup</code></a></li>
-   <li><a href="/fr/docs/Web/API/Element/mousemove_event"><code>mousemove</code></a></li>
-   <li><a href="/fr/docs/Web/API/Element/click_event"><code>click</code></a></li>
-   <li><a href="/fr/docs/Web/API/Element/dblclick_event"><code>dblclick</code></a></li>
-   <li><a href="/fr/docs/Web/API/Element/mouseout_event"><code>mouseout</code></a></li>
-   <li><a href="/fr/docs/Web/API/Element/mouseover_event"><code>mouseover</code></a></li>
-   <li><a href="/fr/docs/Web/API/Element/mouseenter_event"><code>mouseenter</code></a></li>
-   <li><a href="/fr/docs/Web/API/Element/mouseleave_event"><code>mouseleave</code></a></li>
-   <li><a href="/fr/docs/Web/API/Element/contextmenu_event"><code>contextmenu</code></a></li>
-  </ul>
- </li>
-</ul>
+  - [`mouseup`](/fr/docs/Web/API/Element/mouseup_event)
+  - [`mousemove`](/fr/docs/Web/API/Element/mousemove_event)
+  - [`click`](/fr/docs/Web/API/Element/click_event)
+  - [`dblclick`](/fr/docs/Web/API/Element/dblclick_event)
+  - [`mouseout`](/fr/docs/Web/API/Element/mouseout_event)
+  - [`mouseover`](/fr/docs/Web/API/Element/mouseover_event)
+  - [`mouseenter`](/fr/docs/Web/API/Element/mouseenter_event)
+  - [`mouseleave`](/fr/docs/Web/API/Element/mouseleave_event)
+  - [`contextmenu`](/fr/docs/Web/API/Element/contextmenu_event)
diff --git a/files/fr/web/api/element/mouseenter_event/index.md b/files/fr/web/api/element/mouseenter_event/index.md
index ba2623f7c6..8bd5315202 100644
--- a/files/fr/web/api/element/mouseenter_event/index.md
+++ b/files/fr/web/api/element/mouseenter_event/index.md
@@ -10,84 +10,92 @@ tags:
   - mouseenter
 translation_of: Web/API/Element/mouseenter_event
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}
 
-<p>L'évènement <strong><code>mouseenter</code></strong> est déclenché à partir d'un élément {{domxref("Element")}} lorsqu'un dispositif de pointage est déplacé et que son curseur entre sur l'élément.</p>
+L'évènement **`mouseenter`** est déclenché à partir d'un élément {{domxref("Element")}} lorsqu'un dispositif de pointage est déplacé et que son curseur entre sur l'élément.
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row">Se propage/remonte dans le DOM</th>
-   <td>Non</td>
-  </tr>
-  <tr>
-   <th scope="row">Annulable</th>
-   <td>Non</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface</th>
-   <td>{{domxref("MouseEvent")}}</td>
-  </tr>
-  <tr>
-   <th scope="row">Propriété pour la gestion d'évènement</th>
-   <td>{{domxref("GlobalEventHandlers.onmouseenter", "onmouseenter")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Se propage/remonte dans le DOM</th>
+      <td>Non</td>
+    </tr>
+    <tr>
+      <th scope="row">Annulable</th>
+      <td>Non</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface</th>
+      <td>{{domxref("MouseEvent")}}</td>
+    </tr>
+    <tr>
+      <th scope="row">Propriété pour la gestion d'évènement</th>
+      <td>
+        {{domxref("GlobalEventHandlers.onmouseenter", "onmouseenter")}}
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Notes_dutilisation">Notes d'utilisation</h2>
+## Notes d'utilisation
 
-<p>Bien que {{domxref("Element/mouseover_event", "mouseover")}} soit similaire, <code>mouseenter</code> est différent et ne remonte pas dans le DOM et qu'il n'est pas envoyé aux descendants lorsque le pointeur passe d'un descendant à l'élément.</p>
+Bien que {{domxref("Element/mouseover_event", "mouseover")}} soit similaire, `mouseenter` est différent et ne remonte pas dans le DOM et qu'il n'est pas envoyé aux descendants lorsque le pointeur passe d'un descendant à l'élément.
 
+![](mouseenter.png)
 
-<img src="mouseenter.png">
-<p><code>mouseenter</code> est envoyé à chaque élément de la hiérarchie lorsqu'on rentre sur eux. Voici comment 4 évènements sont envoyés aux éléments lorsque le pointeur atteint le texte.</p>
+`mouseenter` est envoyé à chaque élément de la hiérarchie lorsqu'on rentre sur eux. Voici comment 4 évènements sont envoyés aux éléments lorsque le pointeur atteint le texte.
 
-<img src="mouseover.png">
-<p>Un seul évènement <code>mouseover</code> est envoyé depuis l'élément le plus profond du DOM puis remonte le DOM jusqu'à être annulé ou à atteindre la racine.</p>
+![](mouseover.png)
 
-<p>Avec des hiérarchies profondes, le nombre d'évènements <code>mouseenter</code> envoyé peut être important et entraîner des problèmes de performances. Dans ce cas, mieux vaut écouter les évènements <code>mouseover</code>.</p>
+Un seul évènement `mouseover` est envoyé depuis l'élément le plus profond du DOM puis remonte le DOM jusqu'à être annulé ou à atteindre la racine.
 
-<p>Avec la combinaison de <code>mouseenter</code> et <code>mouseleave</code> (déclenché quand le pointeur quitte la zone de l'élément), on a un effet fortement semblable à la pseudo-classe CSS {{cssxref(':hover')}}.</p>
+Avec des hiérarchies profondes, le nombre d'évènements `mouseenter` envoyé peut être important et entraîner des problèmes de performances. Dans ce cas, mieux vaut écouter les évènements `mouseover`.
 
-<h2 id="Exemples">Exemples</h2>
+Avec la combinaison de `mouseenter` et `mouseleave` (déclenché quand le pointeur quitte la zone de l'élément), on a un effet fortement semblable à la pseudo-classe CSS {{cssxref(':hover')}}.
 
-<p>La documentation <a href="/fr/docs/Web/API/Element/mouseover_event#Exemples"><code>mouseover</code></a> illustre la différence entre <code>mouseover</code> et <code>mouseenter</code>.</p>
+## Exemples
 
-<p>Ici, on utilise <code>mouseenter</code> pour modifier la bordure d'un <code>div</code> lorsque la souris rentre sur cet espace. On ajoute alors un élément à la liste avec le nombre d'évènements <code>mouseenter</code> ouor <code>mouseleave</code> event.</p>
+La documentation [`mouseover`](/fr/docs/Web/API/Element/mouseover_event#Exemples) illustre la différence entre `mouseover` et `mouseenter`.
 
-<h3 id="HTML">HTML</h3>
+Ici, on utilise `mouseenter` pour modifier la bordure d'un `div` lorsque la souris rentre sur cet espace. On ajoute alors un élément à la liste avec le nombre d'évènements `mouseenter` ouor `mouseleave` event.
 
-<pre class="brush: html">&lt;div id='mouseTarget'&gt;
- &lt;ul id="unorderedList"&gt;
-  &lt;li&gt;No events yet!&lt;/li&gt;
- &lt;/ul&gt;
-&lt;/div&gt;</pre>
+### HTML
 
-<h3 id="CSS">CSS</h3>
+```html
+<div id='mouseTarget'>
+ <ul id="unorderedList">
+  <li>No events yet!</li>
+ </ul>
+</div>
+```
 
-<p>On met en forme le <code>div</code> pour le rendre plus visible.</p>
+### CSS
 
-<pre class="brush: css">#mouseTarget {
+On met en forme le `div` pour le rendre plus visible.
+
+```css
+#mouseTarget {
   box-sizing: border-box;
   width:15rem;
   border:1px solid #333;
-}</pre>
+}
+```
 
-<h3 id="JavaScript">JavaScript</h3>
+### JavaScript
 
-<pre class="brush: js">var enterEventCount = 0;
+```js
+var enterEventCount = 0;
 var leaveEventCount = 0;
 const mouseTarget = document.getElementById('mouseTarget');
 const unorderedList = document.getElementById('unorderedList');
 
-mouseTarget.addEventListener('mouseenter', e =&gt; {
+mouseTarget.addEventListener('mouseenter', e => {
   mouseTarget.style.border = '5px dotted orange';
   enterEventCount++;
   addListItem("C'est le " + enterEventCount + "ème mouseenter.");
 });
 
-mouseTarget.addEventListener('mouseleave', e =&gt; {
+mouseTarget.addEventListener('mouseleave', e => {
   mouseTarget.style.border = '1px solid #333';
   leaveEventCount++;
   addListItem("C'est le " + leaveEventCount + "ème mouseleave.");
@@ -105,53 +113,36 @@ function addListItem(text) {
 
   // On ajoute l'élément de liste à la liste
   unorderedList.appendChild(newListItem);
-}</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples")}}</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>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('UI Events', '#event-type-mouseenter', 'mouseenter')}}</td>
-   <td>{{Spec2('UI Events')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM3 Events', '#event-type-mouseenter', 'mouseenter')}}</td>
-   <td>{{Spec2('DOM3 Events')}}</td>
-  </tr>
- </tbody>
-</table>
+}
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples")}}
+
+## Spécifications
+
+| Spécification                                                                            | État                             |
+| ---------------------------------------------------------------------------------------- | -------------------------------- |
+| {{SpecName('UI Events', '#event-type-mouseenter', 'mouseenter')}} | {{Spec2('UI Events')}}     |
+| {{SpecName('DOM3 Events', '#event-type-mouseenter', 'mouseenter')}} | {{Spec2('DOM3 Events')}} |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Element.mouseenter_event")}}
+
+## Voir aussi
+
+- [Une introduction aux évènements](/fr/docs/Apprendre/JavaScript/Building_blocks/Evènements)
+- D'autres évènements connexes
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Element.mouseenter_event")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Apprendre/JavaScript/Building_blocks/Evènements">Une introduction aux évènements</a></li>
- <li>D'autres évènements connexes
-  <ul>
-   <li><a href="/fr/docs/Web/API/Element/mousedown_event"><code>mousedown</code></a></li>
-   <li><a href="/fr/docs/Web/API/Element/mouseup_event"><code>mouseup</code></a></li>
-   <li><a href="/fr/docs/Web/API/Element/mousemove_event"><code>mousemove</code></a></li>
-   <li><code><a href="/fr/docs/Web/API/Element/mouseover_event">mouseover</a></code></li>
-   <li><a href="/fr/docs/Web/API/Element/click_event"><code>click</code></a></li>
-   <li><a href="/fr/docs/Web/API/Element/dblclick_event"><code>dblclick</code></a></li>
-   <li><a href="/fr/docs/Web/API/Element/mouseout_event"><code>mouseout</code></a></li>
-   <li><a href="/fr/docs/Web/API/Element/mouseenter_event"><code>mouseenter</code></a></li>
-   <li><a href="/fr/docs/Web/API/Element/mouseleave_event"><code>mouseleave</code></a></li>
-   <li><a href="/fr/docs/Web/API/Element/contextmenu_event"><code>contextmenu</code></a></li>
-  </ul>
- </li>
-</ul>
+  - [`mousedown`](/fr/docs/Web/API/Element/mousedown_event)
+  - [`mouseup`](/fr/docs/Web/API/Element/mouseup_event)
+  - [`mousemove`](/fr/docs/Web/API/Element/mousemove_event)
+  - [`mouseover`](/fr/docs/Web/API/Element/mouseover_event)
+  - [`click`](/fr/docs/Web/API/Element/click_event)
+  - [`dblclick`](/fr/docs/Web/API/Element/dblclick_event)
+  - [`mouseout`](/fr/docs/Web/API/Element/mouseout_event)
+  - [`mouseenter`](/fr/docs/Web/API/Element/mouseenter_event)
+  - [`mouseleave`](/fr/docs/Web/API/Element/mouseleave_event)
+  - [`contextmenu`](/fr/docs/Web/API/Element/contextmenu_event)
diff --git a/files/fr/web/api/element/mouseleave_event/index.md b/files/fr/web/api/element/mouseleave_event/index.md
index 2c9ee0d534..53e9bd5cb8 100644
--- a/files/fr/web/api/element/mouseleave_event/index.md
+++ b/files/fr/web/api/element/mouseleave_event/index.md
@@ -10,77 +10,86 @@ tags:
   - mouseleave
 translation_of: Web/API/Element/mouseleave_event
 ---
-<p>{{APIRef}}</p>
+{{APIRef}}
 
-<p>L'évènement <strong><code>mouseleave</code></strong> est déclenché à partir d'un {{domxref("Element")}} lorsque le curseur d'un dispositif de pointage (ex. une souris) se déplace en dehors de cet élément.</p>
+L'évènement **`mouseleave`** est déclenché à partir d'un {{domxref("Element")}} lorsque le curseur d'un dispositif de pointage (ex. une souris) se déplace en dehors de cet élément.
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row">Se propage/remonte dans le DOM</th>
-   <td>Non</td>
-  </tr>
-  <tr>
-   <th scope="row">Annulable</th>
-   <td>Non</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface</th>
-   <td>{{domxref("MouseEvent")}}</td>
-  </tr>
-  <tr>
-   <th scope="row">Propriété pour la gestion d'évènement</th>
-   <td>{{domxref("GlobalEventHandlers.onmouseleave", "onmouseleave")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Se propage/remonte dans le DOM</th>
+      <td>Non</td>
+    </tr>
+    <tr>
+      <th scope="row">Annulable</th>
+      <td>Non</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface</th>
+      <td>{{domxref("MouseEvent")}}</td>
+    </tr>
+    <tr>
+      <th scope="row">Propriété pour la gestion d'évènement</th>
+      <td>
+        {{domxref("GlobalEventHandlers.onmouseleave", "onmouseleave")}}
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<p><code>mouseleave</code> et {{event('mouseout')}} se ressemblent mais <code>mouseleave</code> ne remonte pas dans le DOM tandis que <code>mouseout</code> remonte. <code>mouseleave</code> est donc déclenché lorsque le pointeur a quitté l'élément et tout ses descendants tandis que <code>mouseout</code> est déclenché lorsque le pointeur quitte l'élément ou l'un des descendants (quand bien même il serait toujours sur le parent).</p>
+`mouseleave` et {{event('mouseout')}} se ressemblent mais `mouseleave` ne remonte pas dans le DOM tandis que `mouseout` remonte. `mouseleave` est donc déclenché lorsque le pointeur a quitté l'élément et tout ses descendants tandis que `mouseout` est déclenché lorsque le pointeur quitte l'élément ou l'un des descendants (quand bien même il serait toujours sur le parent).
 
-<img src="mouseleave.png">
-<p>Un évènement <code>mouseleave</code> est envoyé à chaque élément de la hiérarchie lorsqu'on les quitte. Les quatre évènements sont envoyés chacun aux quatre élément de la hiérarchie lorsque le pointeur se déplace du texte à une zone en dehors du <code>&lt;div&gt;</code> le plus haut dans la hiérarchie.</p>
+![](mouseleave.png)
 
-<img src="mouseout.png">
-<p>Un seul évènement <code>mouseout</code> est envoyé à l'élément le plus profond du DOM puis remonte le long de la hiérarchie tant qu'il n'est pas annulé ou qu'il n'a pas atteint la racine.</p>
+Un évènement `mouseleave` est envoyé à chaque élément de la hiérarchie lorsqu'on les quitte. Les quatre évènements sont envoyés chacun aux quatre élément de la hiérarchie lorsque le pointeur se déplace du texte à une zone en dehors du `<div>` le plus haut dans la hiérarchie.
 
-<h2 id="Exemples">Exemples</h2>
+![](mouseout.png)
 
-<p>Voir la documentation de <a href="/fr/docs/Web/API/Element/mouseout_event"><code>mouseout</code></a> pour un exemple sur les différences entre <code>mouseout</code> et <code>mouseleave</code>.</p>
+Un seul évènement `mouseout` est envoyé à l'élément le plus profond du DOM puis remonte le long de la hiérarchie tant qu'il n'est pas annulé ou qu'il n'a pas atteint la racine.
 
-<p>Ici, on utilise l'évènement <code>mouseenter</code> pour modifier la bordure d'un élément <code>div</code> lorsque la souris rentre sur cet espace. Ensuite, on ajoute un élément à la liste avec le nombre d'évènements <code>mouseenter</code> et <code>mouseleave</code>.</p>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+Voir la documentation de [`mouseout`](/fr/docs/Web/API/Element/mouseout_event) pour un exemple sur les différences entre `mouseout` et `mouseleave`.
 
-<pre class="brush: html">&lt;div id='mouseTarget'&gt;
- &lt;ul id="unorderedList"&gt;
-  &lt;li&gt;Pas encore d'évènement !&lt;/li&gt;
- &lt;/ul&gt;
-&lt;/div&gt;</pre>
+Ici, on utilise l'évènement `mouseenter` pour modifier la bordure d'un élément `div` lorsque la souris rentre sur cet espace. Ensuite, on ajoute un élément à la liste avec le nombre d'évènements `mouseenter` et `mouseleave`.
 
-<h3 id="CSS">CSS</h3>
+### HTML
 
-<p>On met le <code>div</code> en forme afin de le rendre plus visible.</p>
+```html
+<div id='mouseTarget'>
+ <ul id="unorderedList">
+  <li>Pas encore d'évènement !</li>
+ </ul>
+</div>
+```
 
-<pre class="brush: css">#mouseTarget {
+### CSS
+
+On met le `div` en forme afin de le rendre plus visible.
+
+```css
+#mouseTarget {
   box-sizing: border-box;
   width:15rem;
   border:1px solid #333;
-}</pre>
+}
+```
 
-<h3 id="JavaScript">JavaScript</h3>
+### JavaScript
 
-<pre class="brush: js">var enterEventCount = 0;
+```js
+var enterEventCount = 0;
 var leaveEventCount = 0;
 const mouseTarget = document.getElementById('mouseTarget');
 const unorderedList = document.getElementById('unorderedList');
 
-mouseTarget.addEventListener('mouseenter', e =&gt; {
+mouseTarget.addEventListener('mouseenter', e => {
   mouseTarget.style.border = '5px dotted orange';
   enterEventCount++;
   addListItem("Voici le nombre d'évènements mouseenter : " + enterEventCount + ".");
 });
 
-mouseTarget.addEventListener('mouseleave', e =&gt; {
+mouseTarget.addEventListener('mouseleave', e => {
   mouseTarget.style.border = '1px solid #333';
   leaveEventCount++;
   addListItem("Voici le nombre d'évènements mouseleave : " + leaveEventCount + ".");
@@ -98,50 +107,35 @@ function addListItem(text) {
 
   // On ajoute le nouvel élément à la liste
   unorderedList.appendChild(newListItem);
-}</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample('Exemples')}}</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>
-  </tr>
-  <tr>
-   <td>{{SpecName('UI Events', '#event-type-mouseleave', 'mouseleave')}}</td>
-   <td>{{Spec2('UI Events')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM3 Events', '#event-type-mouseleave', 'mouseleave')}}</td>
-   <td>{{Spec2('DOM3 Events')}}</td>
-  </tr>
- </tbody>
-</table>
+}
+```
+
+### Résultat
+
+{{EmbedLiveSample('Exemples')}}
+
+## Spécifications
+
+| Spécification                                                                            | État                             |
+| ---------------------------------------------------------------------------------------- | -------------------------------- |
+| {{SpecName('UI Events', '#event-type-mouseleave', 'mouseleave')}} | {{Spec2('UI Events')}}     |
+| {{SpecName('DOM3 Events', '#event-type-mouseleave', 'mouseleave')}} | {{Spec2('DOM3 Events')}} |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Element.mouseleave_event")}}
+
+## Voir aussi
+
+- [Une introduction aux évènements](/fr/docs/Apprendre/JavaScript/Building_blocks/Evènements)
+- D'autres évènements connexes
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Element.mouseleave_event")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Apprendre/JavaScript/Building_blocks/Evènements">Une introduction aux évènements</a></li>
- <li>D'autres évènements connexes
-  <ul>
-   <li><a href="/fr/docs/Web/API/Element/mousedown_event"><code>mousedown</code></a></li>
-   <li><a href="/fr/docs/Web/API/Element/mouseup_event"><code>mouseup</code></a></li>
-   <li><a href="/fr/docs/Web/API/Element/mousemove_event"><code>mousemove</code></a></li>
-   <li><code><a href="/fr/docs/Web/API/Element/mouseover_event">mouseover</a></code></li>
-   <li><a href="/fr/docs/Web/API/Element/click_event"><code>click</code></a></li>
-   <li><a href="/fr/docs/Web/API/Element/dblclick_event"><code>dblclick</code></a></li>
-   <li><a href="/fr/docs/Web/API/Element/mouseout_event"><code>mouseout</code></a></li>
-   <li><a href="/fr/docs/Web/API/Element/mouseenter_event"><code>mouseenter</code></a></li>
-   <li><a href="/fr/docs/Web/API/Element/contextmenu_event"><code>contextmenu</code></a></li>
-  </ul>
- </li>
-</ul>
+  - [`mousedown`](/fr/docs/Web/API/Element/mousedown_event)
+  - [`mouseup`](/fr/docs/Web/API/Element/mouseup_event)
+  - [`mousemove`](/fr/docs/Web/API/Element/mousemove_event)
+  - [`mouseover`](/fr/docs/Web/API/Element/mouseover_event)
+  - [`click`](/fr/docs/Web/API/Element/click_event)
+  - [`dblclick`](/fr/docs/Web/API/Element/dblclick_event)
+  - [`mouseout`](/fr/docs/Web/API/Element/mouseout_event)
+  - [`mouseenter`](/fr/docs/Web/API/Element/mouseenter_event)
+  - [`contextmenu`](/fr/docs/Web/API/Element/contextmenu_event)
diff --git a/files/fr/web/api/element/mousemove_event/index.md b/files/fr/web/api/element/mousemove_event/index.md
index d848446fb1..6f764d7592 100644
--- a/files/fr/web/api/element/mousemove_event/index.md
+++ b/files/fr/web/api/element/mousemove_event/index.md
@@ -11,62 +11,68 @@ tags:
   - mousemove
 translation_of: Web/API/Element/mousemove_event
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}
 
-<p>L'évènement <code>mousemove</code> est déclenché à partir d'un élément lorsqu'un dispositif de pointage (ex. une souris) est déplacé lorsque le curseur est à l'intérieur de l'élément.</p>
+L'évènement `mousemove` est déclenché à partir d'un élément lorsqu'un dispositif de pointage (ex. une souris) est déplacé lorsque le curseur est à l'intérieur de l'élément.
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row">Se propage/remonte dans le DOM</th>
-   <td>Oui</td>
-  </tr>
-  <tr>
-   <th scope="row">Annulable</th>
-   <td>Oui</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface</th>
-   <td>{{domxref("MouseEvent")}}</td>
-  </tr>
-  <tr>
-   <th scope="row">Propriété pour la gestion d'évènement</th>
-   <td>{{domxref("GlobalEventHandlers.onmousemove", "onmousemove")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Se propage/remonte dans le DOM</th>
+      <td>Oui</td>
+    </tr>
+    <tr>
+      <th scope="row">Annulable</th>
+      <td>Oui</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface</th>
+      <td>{{domxref("MouseEvent")}}</td>
+    </tr>
+    <tr>
+      <th scope="row">Propriété pour la gestion d'évènement</th>
+      <td>
+        {{domxref("GlobalEventHandlers.onmousemove", "onmousemove")}}
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans l'exemple suivant, on utilise les évènements <code><a href="/fr/docs/Web/API/Element/mousedown_event">mousedown</a></code>, <code><a href="/fr/docs/Web/API/Element/mousemove_event">mousemove</a></code> et <code><a href="/fr/docs/Web/API/Element/mouseup_event">mouseup</a></code> pour permettre à l'utilisateur de dessiner sur un <a href="/fr/docs/Web/API/Canvas_API">canevas</a> HTML (le dessin est simple : une ligne dont l'épaisseur vaut 1 et dont la couleur est toujours noire).</p>
+Dans l'exemple suivant, on utilise les évènements [`mousedown`](/fr/docs/Web/API/Element/mousedown_event), [`mousemove`](/fr/docs/Web/API/Element/mousemove_event) et [`mouseup`](/fr/docs/Web/API/Element/mouseup_event) pour permettre à l'utilisateur de dessiner sur un [canevas](/fr/docs/Web/API/Canvas_API) HTML (le dessin est simple : une ligne dont l'épaisseur vaut 1 et dont la couleur est toujours noire).
 
-<p>Lors du chargement de la page, les constantes <code>myPics</code> et <code>context</code> sont créées comme références au canevas et au contexte 2D qui seront utilisés pour le dessin. Enfin, la constante <code>rect</code> permet de stocker les coordonnées relatives du canevas par rapport à la page.</p>
+Lors du chargement de la page, les constantes `myPics` et `context` sont créées comme références au canevas et au contexte 2D qui seront utilisés pour le dessin. Enfin, la constante `rect` permet de stocker les coordonnées relatives du canevas par rapport à la page.
 
-<p>Le dessin commence quand l'évènement <code>mousedown</code> est déclenché. On stocke les coordonnées du pointeur dans les variables <code>x</code> et <code>y</code> puis on passe la variable <code>isDrawing</code> à <code>true</code> pour indiquer qu'un dessin est en cours.</p>
+Le dessin commence quand l'évènement `mousedown` est déclenché. On stocke les coordonnées du pointeur dans les variables `x` et `y` puis on passe la variable `isDrawing` à `true` pour indiquer qu'un dessin est en cours.
 
-<p>Lorsque le pointeur se déplace sur la page, l'évènement <code>mousemove</code> est déclenché. Si <code>isDrawing</code> vaut <code>true</code>, le gestionnaire d'évènement appelle la fonction <code>drawLine()</code> afin de dessiner une ligne entre le point de coordonnées <code>x</code> et <code>y</code> (stockées dans ces variables) et la position actuelle (N.B. les coordonnées <code>x</code> et <code>y</code> sont "corrigées" avec la constante <code>rect</code> pour tenir compte du décalage entre le canevas et la page).</p>
+Lorsque le pointeur se déplace sur la page, l'évènement `mousemove` est déclenché. Si `isDrawing` vaut `true`, le gestionnaire d'évènement appelle la fonction `drawLine()` afin de dessiner une ligne entre le point de coordonnées `x` et `y` (stockées dans ces variables) et la position actuelle (N.B. les coordonnées `x` et `y` sont "corrigées" avec la constante `rect` pour tenir compte du décalage entre le canevas et la page).
 
-<p>Lorsque la fonction <code>drawLine()</code> a fini son exécution, on ajuste les coordonnées courante en les stockant dans <code>x</code> et <code>y</code>.</p>
+Lorsque la fonction `drawLine()` a fini son exécution, on ajuste les coordonnées courante en les stockant dans `x` et `y`.
 
-<p>Lorsque l'évènement <code>mouseup</code> est déclenché, on dessine le segment final du dessin en cours, on passe <code>x</code> et <code>y</code> à <code>0</code> puis on arrête le dessin en passant <code>isDrawing</code> à <code>false</code>.</p>
+Lorsque l'évènement `mouseup` est déclenché, on dessine le segment final du dessin en cours, on passe `x` et `y` à `0` puis on arrête le dessin en passant `isDrawing` à `false`.
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;h1&gt;Dessiner grâce aux évènements de souris&lt;/h1&gt;
-&lt;canvas id="myPics" width="560" height="360"&gt;&lt;/canvas&gt;
-</pre>
+```html
+<h1>Dessiner grâce aux évènements de souris</h1>
+<canvas id="myPics" width="560" height="360"></canvas>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">canvas {
+```css
+canvas {
   border: 1px solid black;
   width: 560px;
   height: 360px;
-}</pre>
+}
+```
 
-<h3 id="JavaScript">JavaScript</h3>
+### JavaScript
 
-<pre class="brush: js">// Un booléen qui, lorsqu'il est vrai, indique que le déplacement de
+```js
+// Un booléen qui, lorsqu'il est vrai, indique que le déplacement de
 // la souris entraîne un dessin sur le canevas
 let isDrawing = false;
 let x = 0;
@@ -81,13 +87,13 @@ const rect = myPics.getBoundingClientRect();
 
 // On ajoute les gestionnaires d'évènements pour mousedown, mousemove
 // et mouseup
-myPics.addEventListener('mousedown', e =&gt; {
+myPics.addEventListener('mousedown', e => {
   x = e.clientX - rect.left;
   y = e.clientY - rect.top;
   isDrawing = true;
 });
 
-myPics.addEventListener('mousemove', e =&gt; {
+myPics.addEventListener('mousemove', e => {
   if (isDrawing === true) {
     drawLine(context, x, y, e.clientX - rect.left, e.clientY - rect.top);
     x = e.clientX - rect.left;
@@ -95,7 +101,7 @@ myPics.addEventListener('mousemove', e =&gt; {
   }
 });
 
-window.addEventListener('mouseup', e =&gt; {
+window.addEventListener('mouseup', e => {
   if (isDrawing === true) {
     drawLine(context, x, y, e.clientX - rect.left, e.clientY - rect.top);
     x = 0;
@@ -112,50 +118,35 @@ function drawLine(context, x1, y1, x2, y2) {
   context.lineTo(x2, y2);
   context.stroke();
   context.closePath();
-}</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples", 640, 450)}}</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>
-  </tr>
-  <tr>
-   <td>{{SpecName('UI Events', '#event-type-mousemove', 'mousemove')}}</td>
-   <td>{{Spec2('UI Events')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM3 Events', '#event-type-mousemove', 'mousemove')}}</td>
-   <td>{{Spec2('DOM3 Events')}}</td>
-  </tr>
- </tbody>
-</table>
+}
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples", 640, 450)}}
+
+## Spécifications
+
+| Spécification                                                                            | État                             |
+| ---------------------------------------------------------------------------------------- | -------------------------------- |
+| {{SpecName('UI Events', '#event-type-mousemove', 'mousemove')}}     | {{Spec2('UI Events')}}     |
+| {{SpecName('DOM3 Events', '#event-type-mousemove', 'mousemove')}} | {{Spec2('DOM3 Events')}} |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Element.mousemove_event")}}
+
+## Voir aussi
+
+- [Une introduction aux évènements](/fr/docs/Apprendre/JavaScript/Building_blocks/Evènements)
+- D'autres évènements connexes
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Element.mousemove_event")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Apprendre/JavaScript/Building_blocks/Evènements">Une introduction aux évènements</a></li>
- <li>D'autres évènements connexes
-  <ul>
-   <li><a href="/fr/docs/Web/API/Element/mouseup_event"><code>mouseup</code></a></li>
-   <li><a href="/fr/docs/Web/API/Element/mousedown_event"><code>mousedown</code></a></li>
-   <li><a href="/fr/docs/Web/API/Element/click_event"><code>click</code></a></li>
-   <li><a href="/fr/docs/Web/API/Element/dblclick_event"><code>dblclick</code></a></li>
-   <li><a href="/fr/docs/Web/API/Element/mouseout_event"><code>mouseout</code></a></li>
-   <li><a href="/fr/docs/Web/API/Element/mouseover_event"><code>mouseover</code></a></li>
-   <li><a href="/fr/docs/Web/API/Element/mouseenter_event"><code>mouseenter</code></a></li>
-   <li><a href="/fr/docs/Web/API/Element/mouseleave_event"><code>mouseleave</code></a></li>
-   <li><a href="/fr/docs/Web/API/Element/contextmenu_event"><code>contextmenu</code></a></li>
-  </ul>
- </li>
-</ul>
+  - [`mouseup`](/fr/docs/Web/API/Element/mouseup_event)
+  - [`mousedown`](/fr/docs/Web/API/Element/mousedown_event)
+  - [`click`](/fr/docs/Web/API/Element/click_event)
+  - [`dblclick`](/fr/docs/Web/API/Element/dblclick_event)
+  - [`mouseout`](/fr/docs/Web/API/Element/mouseout_event)
+  - [`mouseover`](/fr/docs/Web/API/Element/mouseover_event)
+  - [`mouseenter`](/fr/docs/Web/API/Element/mouseenter_event)
+  - [`mouseleave`](/fr/docs/Web/API/Element/mouseleave_event)
+  - [`contextmenu`](/fr/docs/Web/API/Element/contextmenu_event)
diff --git a/files/fr/web/api/element/mouseout_event/index.md b/files/fr/web/api/element/mouseout_event/index.md
index 0e44a3ae9f..d26eb2047e 100644
--- a/files/fr/web/api/element/mouseout_event/index.md
+++ b/files/fr/web/api/element/mouseout_event/index.md
@@ -10,52 +10,56 @@ tags:
   - mouseout
 translation_of: Web/API/Element/mouseout_event
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}
 
-<p>L'évènement <strong><code>mouseout</code></strong> est déclenché à partir d'un {{domxref("Element")}} lorsqu'un dispositif de pointage (ex. une souris) déplace le curseur en dehors de l'élément ou de l'un de ses fils. <code>mouseout</code> est également apporté à un élément si le curseur se déplace dans un élément fils car l'élément fils peut masquer la zone visible de l'élément.</p>
+L'évènement **`mouseout`** est déclenché à partir d'un {{domxref("Element")}} lorsqu'un dispositif de pointage (ex. une souris) déplace le curseur en dehors de l'élément ou de l'un de ses fils. `mouseout` est également apporté à un élément si le curseur se déplace dans un élément fils car l'élément fils peut masquer la zone visible de l'élément.
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row">Se propage/remonte dans le DOM</th>
-   <td>Oui</td>
-  </tr>
-  <tr>
-   <th scope="row">Annulable</th>
-   <td>Oui</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface</th>
-   <td>{{domxref("MouseEvent")}}</td>
-  </tr>
-  <tr>
-   <th scope="row">Propriété pour la gestion d'évènements</th>
-   <td>{{domxref("GlobalEventHandlers.onmouseout", "onmouseout")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Se propage/remonte dans le DOM</th>
+      <td>Oui</td>
+    </tr>
+    <tr>
+      <th scope="row">Annulable</th>
+      <td>Oui</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface</th>
+      <td>{{domxref("MouseEvent")}}</td>
+    </tr>
+    <tr>
+      <th scope="row">Propriété pour la gestion d'évènements</th>
+      <td>
+        {{domxref("GlobalEventHandlers.onmouseout", "onmouseout")}}
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans l'exemple suivant, on illustre la différence entre <code>mouseout</code> et <a href="/fr/docs/Web/API/Element/mouseleave_event"><code>mouseleave</code></a>. Ce dernier est ajouté à {{HTMLElement("ul")}} pour colorer la liste en violet lorsque la souris quitte <code>&lt;ul&gt;</code>. <code>mouseout</code> est ajouté à la liste pour colorer l'élément ciblé en orange lorsque la souris le quitte.</p>
+Dans l'exemple suivant, on illustre la différence entre `mouseout` et [`mouseleave`](/fr/docs/Web/API/Element/mouseleave_event). Ce dernier est ajouté à {{HTMLElement("ul")}} pour colorer la liste en violet lorsque la souris quitte `<ul>`. `mouseout` est ajouté à la liste pour colorer l'élément ciblé en orange lorsque la souris le quitte.
 
-<p>En essayant cet exemple, vous pourrez voir que <code>mouseout</code> est envoyé aux éléments individuels de la liste tandis que <code>mouseleave</code> est géré sur la liste entière. Cela provient de la hiérarchie des éléments et du fait que les éléments de la liste "masquent" la liste sous-jacente.</p>
+En essayant cet exemple, vous pourrez voir que `mouseout` est envoyé aux éléments individuels de la liste tandis que `mouseleave` est géré sur la liste entière. Cela provient de la hiérarchie des éléments et du fait que les éléments de la liste "masquent" la liste sous-jacente.
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;ul id="test"&gt;
-  &lt;li&gt;élément 1&lt;/li&gt;
-  &lt;li&gt;élément 2&lt;/li&gt;
-  &lt;li&gt;élément 3&lt;/li&gt;
-&lt;/ul&gt;
-</pre>
+```html
+<ul id="test">
+  <li>élément 1</li>
+  <li>élément 2</li>
+  <li>élément 3</li>
+</ul>
+```
 
-<h3 id="JavaScript">JavaScript</h3>
+### JavaScript
 
-<pre class="brush: js">let test = document.getElementById("test");
+```js
+let test = document.getElementById("test");
 
 // On affiche la liste en violet lorsque le curseur quitte
-// l'élément &lt;ul&gt;
+// l'élément <ul>
 test.addEventListener("mouseleave", function( event ) {
   // on cible la cible de mouseleave
   event.target.style.color = "purple";
@@ -66,7 +70,7 @@ test.addEventListener("mouseleave", function( event ) {
   }, 1000);
 }, false);
 
-// On affiche les éléments &lt;li&gt; en orange lorsque la souris
+// On affiche les éléments <li> en orange lorsque la souris
 // les quitte
 test.addEventListener("mouseout", function( event ) {
   // on cible la cible de mouseout
@@ -76,50 +80,35 @@ test.addEventListener("mouseout", function( event ) {
   setTimeout(function() {
     event.target.style.color = "";
   }, 500);
-}, false);</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples", 640, 200)}}</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>
-  </tr>
-  <tr>
-   <td>{{SpecName('UI Events', '#event-type-mouseout', 'mouseout')}}</td>
-   <td>{{Spec2('UI Events')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM3 Events', '#event-type-mouseout', 'mouseout')}}</td>
-   <td>{{Spec2('DOM3 Events')}}</td>
-  </tr>
- </tbody>
-</table>
+}, false);
+```
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Element.mouseout_event")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Apprendre/JavaScript/Building_blocks/Evènements">Une introduction aux évènements</a></li>
- <li>D'autres évènements connexes
-  <ul>
-   <li><a href="/fr/docs/Web/API/Element/mousedown_event"><code>mousedown</code></a></li>
-   <li><a href="/fr/docs/Web/API/Element/mouseup_event"><code>mouseup</code></a></li>
-   <li><a href="/fr/docs/Web/API/Element/mousemove_event"><code>mousemove</code></a></li>
-   <li><code><a href="/fr/docs/Web/API/Element/mouseover_event">mouseover</a></code></li>
-   <li><a href="/fr/docs/Web/API/Element/click_event"><code>click</code></a></li>
-   <li><a href="/fr/docs/Web/API/Element/dblclick_event"><code>dblclick</code></a></li>
-   <li><a href="/fr/docs/Web/API/Element/mouseenter_event"><code>mouseenter</code></a></li>
-   <li><a href="/fr/docs/Web/API/Element/mouseleave_event"><code>mouseleave</code></a></li>
-   <li><a href="/fr/docs/Web/API/Element/contextmenu_event"><code>contextmenu</code></a></li>
-  </ul>
- </li>
-</ul>
+### Résultat
+
+{{EmbedLiveSample("Exemples", 640, 200)}}
+
+## Spécifications
+
+| Spécification                                                                        | État                             |
+| ------------------------------------------------------------------------------------ | -------------------------------- |
+| {{SpecName('UI Events', '#event-type-mouseout', 'mouseout')}}     | {{Spec2('UI Events')}}     |
+| {{SpecName('DOM3 Events', '#event-type-mouseout', 'mouseout')}} | {{Spec2('DOM3 Events')}} |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Element.mouseout_event")}}
+
+## Voir aussi
+
+- [Une introduction aux évènements](/fr/docs/Apprendre/JavaScript/Building_blocks/Evènements)
+- D'autres évènements connexes
+
+  - [`mousedown`](/fr/docs/Web/API/Element/mousedown_event)
+  - [`mouseup`](/fr/docs/Web/API/Element/mouseup_event)
+  - [`mousemove`](/fr/docs/Web/API/Element/mousemove_event)
+  - [`mouseover`](/fr/docs/Web/API/Element/mouseover_event)
+  - [`click`](/fr/docs/Web/API/Element/click_event)
+  - [`dblclick`](/fr/docs/Web/API/Element/dblclick_event)
+  - [`mouseenter`](/fr/docs/Web/API/Element/mouseenter_event)
+  - [`mouseleave`](/fr/docs/Web/API/Element/mouseleave_event)
+  - [`contextmenu`](/fr/docs/Web/API/Element/contextmenu_event)
diff --git a/files/fr/web/api/element/mouseover_event/index.md b/files/fr/web/api/element/mouseover_event/index.md
index 368e39ddfe..e9d7e4c3d0 100644
--- a/files/fr/web/api/element/mouseover_event/index.md
+++ b/files/fr/web/api/element/mouseover_event/index.md
@@ -10,47 +10,51 @@ tags:
   - mouseover
 translation_of: Web/API/Element/mouseover_event
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}
 
-<p>L'évènement <strong><code>mouseover</code></strong> est déclenché à partir d'un {{domxref("Element")}} lorsqu'un dispositif de pointage (une souris par exemple) déplace le curseur sur l'élément ou sur l'un de ses éléments fils.</p>
+L'évènement **`mouseover`** est déclenché à partir d'un {{domxref("Element")}} lorsqu'un dispositif de pointage (une souris par exemple) déplace le curseur sur l'élément ou sur l'un de ses éléments fils.
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row">Se propage/remonte dans le DOM</th>
-   <td>Oui</td>
-  </tr>
-  <tr>
-   <th scope="row">Annulable</th>
-   <td>Oui</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface</th>
-   <td>{{domxref("MouseEvent")}}</td>
-  </tr>
-  <tr>
-   <th scope="row">Propriété pour la gestion d'évènement</th>
-   <td>{{domxref("GlobalEventHandlers.onmouseover", "onmouseover")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Se propage/remonte dans le DOM</th>
+      <td>Oui</td>
+    </tr>
+    <tr>
+      <th scope="row">Annulable</th>
+      <td>Oui</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface</th>
+      <td>{{domxref("MouseEvent")}}</td>
+    </tr>
+    <tr>
+      <th scope="row">Propriété pour la gestion d'évènement</th>
+      <td>
+        {{domxref("GlobalEventHandlers.onmouseover", "onmouseover")}}
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>L'exemple suivant illustre la différence entre les évènements <code>mouseover</code> et <a href="/fr/docs/Web/Events/mouseenter"><code>mouseenter</code></a>.</p>
+L'exemple suivant illustre la différence entre les évènements `mouseover` et [`mouseenter`](/fr/docs/Web/Events/mouseenter).
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;ul id="test"&gt;
-  &lt;li&gt;item 1&lt;/li&gt;
-  &lt;li&gt;item 2&lt;/li&gt;
-  &lt;li&gt;item 3&lt;/li&gt;
-&lt;/ul&gt;
-</pre>
+```html
+<ul id="test">
+  <li>item 1</li>
+  <li>item 2</li>
+  <li>item 3</li>
+</ul>
+```
 
-<h3 id="JavaScript">JavaScript</h3>
+### JavaScript
 
-<pre class="brush: js">let test = document.getElementById("test");
+```js
+let test = document.getElementById("test");
 
 // Ce gestionnaire ne sera exécuté qu'une fois
 // lorsque le curseur se déplace sur la liste
@@ -74,50 +78,35 @@ test.addEventListener("mouseover", function( event ) {
   setTimeout(function() {
     event.target.style.color = "";
   }, 500);
-}, false);</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample('Exemples')}}</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>
-  </tr>
-  <tr>
-   <td>{{SpecName('UI Events', '#event-type-mouseover', 'mouseover')}}</td>
-   <td>{{Spec2('UI Events')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM3 Events', '#event-type-mouseover', 'mouseover')}}</td>
-   <td>{{Spec2('DOM3 Events')}}</td>
-  </tr>
- </tbody>
-</table>
+}, false);
+```
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Element.mouseover_event")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Apprendre/JavaScript/Building_blocks/Evènements">Une introduction aux évènements</a></li>
- <li>D'autres évènements connexes
-  <ul>
-   <li><a href="/fr/docs/Web/API/Element/mousedown_event"><code>mousedown</code></a></li>
-   <li><a href="/fr/docs/Web/API/Element/mouseup_event"><code>mouseup</code></a></li>
-   <li><a href="/fr/docs/Web/API/Element/mousemove_event"><code>mousemove</code></a></li>
-   <li><a href="/fr/docs/Web/API/Element/click_event"><code>click</code></a></li>
-   <li><a href="/fr/docs/Web/API/Element/dblclick_event"><code>dblclick</code></a></li>
-   <li><a href="/fr/docs/Web/API/Element/mouseout_event"><code>mouseout</code></a></li>
-   <li><a href="/fr/docs/Web/API/Element/mouseenter_event"><code>mouseenter</code></a></li>
-   <li><a href="/fr/docs/Web/API/Element/mouseleave_event"><code>mouseleave</code></a></li>
-   <li><a href="/fr/docs/Web/API/Element/contextmenu_event"><code>contextmenu</code></a></li>
-  </ul>
- </li>
-</ul>
+### Résultat
+
+{{EmbedLiveSample('Exemples')}}
+
+## Spécifications
+
+| Spécification                                                                            | État                             |
+| ---------------------------------------------------------------------------------------- | -------------------------------- |
+| {{SpecName('UI Events', '#event-type-mouseover', 'mouseover')}}     | {{Spec2('UI Events')}}     |
+| {{SpecName('DOM3 Events', '#event-type-mouseover', 'mouseover')}} | {{Spec2('DOM3 Events')}} |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Element.mouseover_event")}}
+
+## Voir aussi
+
+- [Une introduction aux évènements](/fr/docs/Apprendre/JavaScript/Building_blocks/Evènements)
+- D'autres évènements connexes
+
+  - [`mousedown`](/fr/docs/Web/API/Element/mousedown_event)
+  - [`mouseup`](/fr/docs/Web/API/Element/mouseup_event)
+  - [`mousemove`](/fr/docs/Web/API/Element/mousemove_event)
+  - [`click`](/fr/docs/Web/API/Element/click_event)
+  - [`dblclick`](/fr/docs/Web/API/Element/dblclick_event)
+  - [`mouseout`](/fr/docs/Web/API/Element/mouseout_event)
+  - [`mouseenter`](/fr/docs/Web/API/Element/mouseenter_event)
+  - [`mouseleave`](/fr/docs/Web/API/Element/mouseleave_event)
+  - [`contextmenu`](/fr/docs/Web/API/Element/contextmenu_event)
diff --git a/files/fr/web/api/element/mouseup_event/index.md b/files/fr/web/api/element/mouseup_event/index.md
index 8dcab880a9..143e3155a4 100644
--- a/files/fr/web/api/element/mouseup_event/index.md
+++ b/files/fr/web/api/element/mouseup_event/index.md
@@ -11,75 +11,61 @@ tags:
   - mouseup
 translation_of: Web/API/Element/mouseup_event
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}
 
-<p>L'évènement <strong><code>mouseup</code></strong> est déclenché à partir d'un {{domxref("Element")}} lorsqu'un bouton d'un dispositif de pointage (une souris ou un pavé tactile par exemple) est relaché lorsque le pointeur est sur cet élément.</p>
+L'évènement **`mouseup`** est déclenché à partir d'un {{domxref("Element")}} lorsqu'un bouton d'un dispositif de pointage (une souris ou un pavé tactile par exemple) est relaché lorsque le pointeur est sur cet élément.
 
-<p>Les évènements <code>mouseup</code> peuvent être comparés aux évènements {{domxref("Element.mousedown_event", "mousedown")}} qui se produisent lorsqu'on <em>appuie</em> sur un bouton.</p>
+Les évènements `mouseup` peuvent être comparés aux évènements {{domxref("Element.mousedown_event", "mousedown")}} qui se produisent lorsqu'on _appuie_ sur un bouton.
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row">Se propage/remonte dans le DOM</th>
-   <td>Oui</td>
-  </tr>
-  <tr>
-   <th scope="row">Annulable</th>
-   <td>Oui</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface</th>
-   <td>{{domxref("MouseEvent")}}</td>
-  </tr>
-  <tr>
-   <th scope="row">Propriété pour la gestion d'évènement</th>
-   <td>{{domxref("GlobalEventHandlers.onmouseup", "onmouseup")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Se propage/remonte dans le DOM</th>
+      <td>Oui</td>
+    </tr>
+    <tr>
+      <th scope="row">Annulable</th>
+      <td>Oui</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface</th>
+      <td>{{domxref("MouseEvent")}}</td>
+    </tr>
+    <tr>
+      <th scope="row">Propriété pour la gestion d'évènement</th>
+      <td>
+        {{domxref("GlobalEventHandlers.onmouseup", "onmouseup")}}
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>{{page("/fr/docs/Web/API/Element/mousemove_event", "Exemples")}}</p>
+{{page("/fr/docs/Web/API/Element/mousemove_event", "Exemples")}}
 
-<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>
-  </tr>
-  <tr>
-   <td>{{SpecName('UI Events', '#event-type-mouseup', 'mouseup')}}</td>
-   <td>{{Spec2('UI Events')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM3 Events', '#event-type-mouseup', 'mouseup')}}</td>
-   <td>{{Spec2('DOM3 Events')}}</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                    | État                             |
+| -------------------------------------------------------------------------------- | -------------------------------- |
+| {{SpecName('UI Events', '#event-type-mouseup', 'mouseup')}} | {{Spec2('UI Events')}}     |
+| {{SpecName('DOM3 Events', '#event-type-mouseup', 'mouseup')}} | {{Spec2('DOM3 Events')}} |
+
+## Compatibilité des navigateurs
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+{{Compat("api.Element.mouseup_event")}}
 
-<p>{{Compat("api.Element.mouseup_event")}}</p>
+## Voir aussi
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+- [Une introduction aux évènements](/fr/docs/Apprendre/JavaScript/Building_blocks/Evènements)
+- D'autres évènements connexes
 
-<ul>
- <li><a href="/fr/docs/Apprendre/JavaScript/Building_blocks/Evènements">Une introduction aux évènements</a></li>
- <li>D'autres évènements connexes
-  <ul>
-   <li><a href="/fr/docs/Web/API/Element/mousedown_event"><code>mousedown</code></a></li>
-   <li><a href="/fr/docs/Web/API/Element/mousemove_event"><code>mousemove</code></a></li>
-   <li><a href="/fr/docs/Web/API/Element/click_event"><code>click</code></a></li>
-   <li><a href="/fr/docs/Web/API/Element/dblclick_event"><code>dblclick</code></a></li>
-   <li><a href="/fr/docs/Web/API/Element/mouseout_event"><code>mouseout</code></a></li>
-   <li><a href="/fr/docs/Web/API/Element/mouseover_event"><code>mouseover</code></a></li>
-   <li><a href="/fr/docs/Web/API/Element/mouseenter_event"><code>mouseenter</code></a></li>
-   <li><a href="/fr/docs/Web/API/Element/mouseleave_event"><code>mouseleave</code></a></li>
-   <li><a href="/fr/docs/Web/API/Element/contextmenu_event"><code>contextmenu</code></a></li>
-  </ul>
- </li>
-</ul>
+  - [`mousedown`](/fr/docs/Web/API/Element/mousedown_event)
+  - [`mousemove`](/fr/docs/Web/API/Element/mousemove_event)
+  - [`click`](/fr/docs/Web/API/Element/click_event)
+  - [`dblclick`](/fr/docs/Web/API/Element/dblclick_event)
+  - [`mouseout`](/fr/docs/Web/API/Element/mouseout_event)
+  - [`mouseover`](/fr/docs/Web/API/Element/mouseover_event)
+  - [`mouseenter`](/fr/docs/Web/API/Element/mouseenter_event)
+  - [`mouseleave`](/fr/docs/Web/API/Element/mouseleave_event)
+  - [`contextmenu`](/fr/docs/Web/API/Element/contextmenu_event)
diff --git a/files/fr/web/api/element/namespaceuri/index.md b/files/fr/web/api/element/namespaceuri/index.md
index 998f6a875e..4cd93942c6 100644
--- a/files/fr/web/api/element/namespaceuri/index.md
+++ b/files/fr/web/api/element/namespaceuri/index.md
@@ -10,65 +10,50 @@ tags:
   - URI
 translation_of: Web/API/Element/namespaceURI
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p>La propriété en lecture seule <code><strong>Element.namespaceURI</strong></code> renvoie l'URI d'espace de noms de l'élément ou <code>null</code> si l'élément n'est pas dans un espace de nom.</p>
+La propriété en lecture seule **`Element.namespaceURI`** renvoie l'URI d'espace de noms de l'élément ou `null` si l'élément n'est pas dans un espace de nom.
 
-<div class="note">
-<p><strong>Note :</strong> Avant DOM4, cet API était définie dans l'interface {{domxref("Node")}}.</p>
-</div>
+> **Note :** Avant DOM4, cet API était définie dans l'interface {{domxref("Node")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var>namespace</var> = <var>element</var>.namespaceURI</pre>
+    namespace = element.namespaceURI
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Dans cet extrait, un élément est examiné pour son {{domxref("localName")}} et son <code>namespaceURI</code>. Si le <code>namespaceURI</code> renvoie l'espace de noms XUL et le <code>localName</code> retourne "browser" (<em>navigateur</em>), alors le noeud est compris comme étant un <code>&lt;browser/&gt;</code> XUL.</p>
+Dans cet extrait, un élément est examiné pour son {{domxref("localName")}} et son `namespaceURI`. Si le `namespaceURI` renvoie l'espace de noms XUL et le `localName` retourne "browser" (_navigateur_), alors le noeud est compris comme étant un `<browser/>` XUL.
 
-<pre class="brush:js">if (element.localName == "browser" &amp;&amp;
+```js
+if (element.localName == "browser" &&
     element.namespaceURI == "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul") {
   // c'est un navigateur XUL
-}</pre>
+}
+```
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p>Ce n'est pas une valeur calculée qui est le résultat d'une recherche d'espace de noms basée sur un examen des déclarations d'espace de noms dans la portée. L'URI de l'espace de noms d'un nœud est fixé au moment de la création du nœud.</p>
+Ce n'est pas une valeur calculée qui est le résultat d'une recherche d'espace de noms basée sur un examen des déclarations d'espace de noms dans la portée. L'URI de l'espace de noms d'un nœud est fixé au moment de la création du nœud.
 
-<p>Dans Firefox 3.5 et antérieurs, l'URI d'espace de noms pour les éléments HTML dans un document HTML est <code>null</code>. Dans les versions postérieures, en conformité avec HTML5, c'est <code><a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a></code> comme dans XHTML. {{gecko_minversion_inline("1.9.2")}}</p>
+Dans Firefox 3.5 et antérieurs, l'URI d'espace de noms pour les éléments HTML dans un document HTML est `null`. Dans les versions postérieures, en conformité avec HTML5, c'est [`http://www.w3.org/1999/xhtml`](http://www.w3.org/1999/xhtml) comme dans XHTML. {{gecko_minversion_inline("1.9.2")}}
 
-<p>Vous pouvez créer un élément avec l'<code>namespaceURI</code> spécifié en utilisant la méthode DOM niveau 2 <a href="/fr/docs/Web/API/Document/createElementNS">document.createElementNS</a>.</p>
+Vous pouvez créer un élément avec l'`namespaceURI` spécifié en utilisant la méthode DOM niveau 2 [document.createElementNS](/fr/docs/Web/API/Document/createElementNS).
 
-<p>Le DOM ne gère pas ou n'applique pas la validation de l'espace de noms en soi. Il appartient à l'application DOM de faire toute validation nécessaire. Notez également que le préfixe d'espace de noms, une fois associé à un élément particulier, ne peut pas être modifié.</p>
+Le DOM ne gère pas ou n'applique pas la validation de l'espace de noms en soi. Il appartient à l'application DOM de faire toute validation nécessaire. Notez également que le préfixe d'espace de noms, une fois associé à un élément particulier, ne peut pas être modifié.
 
-<h2 id="Spécification">Spécification</h2>
+## Spécification
 
-<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("DOM4", "#dom-element-namespaceuri", "Element.namespaceuri")}}</td>
-   <td>{{Spec2("DOM4")}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                    | Statut                   | Commentaire         |
+| ------------------------------------------------------------------------------------------------ | ------------------------ | ------------------- |
+| {{SpecName("DOM4", "#dom-element-namespaceuri", "Element.namespaceuri")}} | {{Spec2("DOM4")}} | Définition initiale |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Element.namespaceURI")}}</p>
+{{Compat("api.Element.namespaceURI")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("Element.localName")}}</li>
- <li>{{domxref("Element.prefix")}}</li>
- <li>{{domxref("Attr.namespaceURI")}}</li>
- <li>{{domxref("Node.namespaceURI")}}</li>
-</ul>
+- {{domxref("Element.localName")}}
+- {{domxref("Element.prefix")}}
+- {{domxref("Attr.namespaceURI")}}
+- {{domxref("Node.namespaceURI")}}
diff --git a/files/fr/web/api/element/outerhtml/index.md b/files/fr/web/api/element/outerhtml/index.md
index 243fac13e5..2a57085dbf 100644
--- a/files/fr/web/api/element/outerhtml/index.md
+++ b/files/fr/web/api/element/outerhtml/index.md
@@ -8,104 +8,94 @@ tags:
   - Propriétés
 translation_of: Web/API/Element/outerHTML
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p>L'attribut <code>outerHTML</code> de l'interface DOM {{domxref("element")}} récupère le fragment HTML sérialisé décrivant l'élément ainsi que ses descendants. Il peut aussi être utilisé pour remplacer l'élément avec les noeuds générés de la chaîne fournie.</p>
+L'attribut `outerHTML` de l'interface DOM {{domxref("element")}} récupère le fragment HTML sérialisé décrivant l'élément ainsi que ses descendants. Il peut aussi être utilisé pour remplacer l'élément avec les noeuds générés de la chaîne fournie.
 
-<p>Pour obtenir uniquement la représentation HTML du contenu d'un élément ou pour remplacer le contenu d'un élément, utilisez plutôt la propriété {{domxref ("Element.innerHTML", "innerHTML")}}.</p>
+Pour obtenir uniquement la représentation HTML du contenu d'un élément ou pour remplacer le contenu d'un élément, utilisez plutôt la propriété {{domxref ("Element.innerHTML", "innerHTML")}}.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: html">var content = element.outerHTML;
+```html
+var content = element.outerHTML;
 
-element.outerHTML = htmlString;</pre>
+element.outerHTML = htmlString;
+```
 
-<h3 class="highlight-spanned" id="Valeur">Valeur</h3>
+### Valeur
 
-<p>La lecture de la valeur de <code>outerHTML</code> renvoie une  {{domxref("DOMString")}} contenant la sérialisation HTML des descendants de l'élément. Définir la valeur de <code>innerHTML</code> supprime tous les descendants et les remplace par les noeuds construits en analysant le HTML donné dans la chaîne <code>htmlString</code>.</p>
+La lecture de la valeur de `outerHTML` renvoie une  {{domxref("DOMString")}} contenant la sérialisation HTML des descendants de l'élément. Définir la valeur de `innerHTML` supprime tous les descendants et les remplace par les noeuds construits en analysant le HTML donné dans la chaîne `htmlString`.
 
-<h3 class="highlight-spanned" id="Exceptions">Exceptions</h3>
+### Exceptions
 
-<dl>
- <dt><code>SyntaxError</code></dt>
- <dd>Une tentative a été faite de définir la valeur de <code>outerHTML</code> en utilisant une chaîne qui n'est pas correctement formée HTML.</dd>
- <dt><code>NoModificationAllowedError</code></dt>
- <dd>Une tentative a été faite de définir  <code>outerHTML</code>  sur un élément qui est enfant direct du {{domxref("Document")}}, tel que {{domxref("Document.documentElement")}}.</dd>
-</dl>
+- `SyntaxError`
+  - : Une tentative a été faite de définir la valeur de `outerHTML` en utilisant une chaîne qui n'est pas correctement formée HTML.
+- `NoModificationAllowedError`
+  - : Une tentative a été faite de définir  `outerHTML`  sur un élément qui est enfant direct du {{domxref("Document")}}, tel que {{domxref("Document.documentElement")}}.
 
-<h2 id="Examples">Exemples</h2>
+## Exemples
 
-<p>Récupérer la valeur de la propriété <code>outerHTML</code> d'un élément :</p>
+Récupérer la valeur de la propriété `outerHTML` d'un élément :
 
-<pre class="brush: js">// HTML:
-// &lt;div id="d"&gt;&lt;p&gt;Contenu&lt;/p&gt;&lt;p&gt;Plus Complexe&lt;/p&gt;&lt;/div&gt;
+```js
+// HTML:
+// <div id="d"><p>Contenu</p><p>Plus Complexe</p></div>
 
 d = document.getElementById("d");
 dump(d.outerHTML);
 
-// la chaîne '&lt;div id="d"&gt;&lt;p&gt;Contenu&lt;/p&gt;&lt;p&gt;Plus Complexe&lt;/p&gt;&lt;/div&gt;'
+// la chaîne '<div id="d"><p>Contenu</p><p>Plus Complexe</p></div>'
 // est affichée dans la fenêtre console
-</pre>
+```
 
-<p>Remplacer un noeud en modifiant la propriété <code>outerHTML</code> :</p>
+Remplacer un noeud en modifiant la propriété `outerHTML` :
 
-<pre class="brush: js">// HTML:
-// &lt;div id="container"&gt;&lt;div id="d"&gt;Ceci est un div.&lt;/div&gt;&lt;/div&gt;
+```js
+// HTML:
+// <div id="container"><div id="d">Ceci est un div.</div></div>
 
 container = document.getElementById("container");
 d = document.getElementById("d");
 console.log(container.firstChild.nodeName); // affiche "DIV"
 
-d.outerHTML = "&lt;p&gt;Ce paragraphe remplace le div original.&lt;/p&gt;";
+d.outerHTML = "<p>Ce paragraphe remplace le div original.</p>";
 console.log(container.firstChild.nodeName); // affiche "P"
 
 // Le div #d ne fait plus partie de l'arbre décrivant le document,
 // le nouveau paragraphe l'ayant remplacé.
-</pre>
+```
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p>Si un élément n'a pas de noeud parent, définir sa propriété <code>outerHTML</code> ne le modifiera pas, ni ses descendants. De nombreux navigateurs déclencheront aussi une exception. Par exemple :</p>
+Si un élément n'a pas de noeud parent, définir sa propriété `outerHTML` ne le modifiera pas, ni ses descendants. De nombreux navigateurs déclencheront aussi une exception. Par exemple :
 
-<pre class="brush: js">var div = document.createElement("div");
-div.outerHTML = "&lt;div class=\"test\"&gt;test&lt;/div&gt;";
-console.log(div.outerHTML); // output: "&lt;div&gt;&lt;/div&gt;"</pre>
+```js
+var div = document.createElement("div");
+div.outerHTML = "<div class=\"test\">test</div>";
+console.log(div.outerHTML); // output: "<div></div>"
+```
 
-<p>Aussi, lorsqu'un élément va être remplacé dans le document, la variable dont la propriété <code>outerHTML</code> a été modifiée contiendra toujours une référence à l'élément initial :</p>
+Aussi, lorsqu'un élément va être remplacé dans le document, la variable dont la propriété `outerHTML` a été modifiée contiendra toujours une référence à l'élément initial :
 
-<pre class="brush: js">var p = document.getElementsByTagName("p")[0];
+```js
+var p = document.getElementsByTagName("p")[0];
 console.log(p.nodeName); // affiche: "P"
-p.outerHTML = "&lt;div&gt;Ce div remplace un paragraph.&lt;/div&gt;";
+p.outerHTML = "<div>Ce div remplace un paragraph.</div>";
 console.log(p.nodeName); // toujours "P";
-</pre>
-
-<h2 id="Specification">Spécification</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('DOM Parsing', '#outerhtml', 'Element.outerHTML')}}</td>
-   <td>{{ Spec2('DOM Parsing') }}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Element.outerHTML")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Sérialisation de l'arborescence DOM en XML ou HTML : {{domxref("XMLSerializer")}}</li>
- <li>Analyse XML ou HTML dans l'arborescence DOM : {{domxref("DOMParser")}}</li>
- <li>{{domxref("HTMLElement.outerText")}}</li>
-</ul>
+```
+
+## Spécification
+
+| Spécification                                                                        | Statut                               | Commentaire |
+| ------------------------------------------------------------------------------------ | ------------------------------------ | ----------- |
+| {{SpecName('DOM Parsing', '#outerhtml', 'Element.outerHTML')}} | {{ Spec2('DOM Parsing') }} |             |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Element.outerHTML")}}
+
+## Voir aussi
+
+- Sérialisation de l'arborescence DOM en XML ou HTML : {{domxref("XMLSerializer")}}
+- Analyse XML ou HTML dans l'arborescence DOM : {{domxref("DOMParser")}}
+- {{domxref("HTMLElement.outerText")}}
diff --git a/files/fr/web/api/element/prefix/index.md b/files/fr/web/api/element/prefix/index.md
index 638e979793..72793c5d87 100644
--- a/files/fr/web/api/element/prefix/index.md
+++ b/files/fr/web/api/element/prefix/index.md
@@ -9,58 +9,41 @@ tags:
   - Préfixe
 translation_of: Web/API/Element/prefix
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p>La propriété en lecture seule <code><strong>Element.prefix</strong></code> renvoie le préfixe d'espace de noms de l'élément spécifié ou <code>null</code> si aucun préfixe n'est précisé.</p>
+La propriété en lecture seule **`Element.prefix`** renvoie le préfixe d'espace de noms de l'élément spécifié ou `null` si aucun préfixe n'est précisé.
 
-<div class="note">
-<p><strong>Note :</strong> Avant DOM4 cet API était défini dans l'interface {{domxref("Node")}}.</p>
-</div>
+> **Note :** Avant DOM4 cet API était défini dans l'interface {{domxref("Node")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var>string</var> = <var>element</var>.prefix
-</pre>
+    string = element.prefix
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Les logs "x" suivants à la console.</p>
+Les logs "x" suivants à la console.
 
-<pre class="brush:xml">&lt;x:div onclick="console.log(this.prefix)"/&gt;
-</pre>
+```xml
+<x:div onclick="console.log(this.prefix)"/>
+```
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p>Cela fonctionnera uniquement lorsqu'un analyseur connaissant l'espace de noms est utilisé, c'est-à-dire lorsqu'un document est servi avec un type XML MIME. Cela ne fonctionnera pas pour les documents HTML.</p>
+Cela fonctionnera uniquement lorsqu'un analyseur connaissant l'espace de noms est utilisé, c'est-à-dire lorsqu'un document est servi avec un type XML MIME. Cela ne fonctionnera pas pour les documents HTML.
 
-<h2 id="Spécifications">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("DOM4", "#dom-element-prefix", "Element.prefix")}}</td>
-   <td>{{Spec2("DOM4")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                    | Statut                   | Commentaire          |
+| -------------------------------------------------------------------------------- | ------------------------ | -------------------- |
+| {{SpecName("DOM4", "#dom-element-prefix", "Element.prefix")}} | {{Spec2("DOM4")}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Element.prefix")}}</p>
+{{Compat("api.Element.prefix")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("Element.namespaceURI")}}</li>
- <li>{{domxref("Element.localName")}}</li>
- <li>{{domxref("Attr.prefix")}}</li>
- <li>{{domxref("Node.prefix")}}</li>
-</ul>
+- {{domxref("Element.namespaceURI")}}
+- {{domxref("Element.localName")}}
+- {{domxref("Attr.prefix")}}
+- {{domxref("Node.prefix")}}
diff --git a/files/fr/web/api/element/queryselector/index.md b/files/fr/web/api/element/queryselector/index.md
index 44325a3547..bee72ee47a 100644
--- a/files/fr/web/api/element/queryselector/index.md
+++ b/files/fr/web/api/element/queryselector/index.md
@@ -18,117 +18,96 @@ tags:
   - querySelector
 translation_of: Web/API/Element/querySelector
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p>La méthode <strong><code>querySelector()</code></strong> de l'interface <a href="/fr/docs/Web/API/Element"><code>Element</code></a> renvoie le premier élément descendant de l'élément sur lequel elle est invoquée qui correspond au groupe de sélecteurs spécifié.</p>
+La méthode **`querySelector()`** de l'interface [`Element`](/fr/docs/Web/API/Element) renvoie le premier élément descendant de l'élément sur lequel elle est invoquée qui correspond au groupe de sélecteurs spécifié.
 
-<h2 id="syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var>element</var> = baseElement.querySelector(<var>selector</var>s);</pre>
+    element = baseElement.querySelector(selectors);
 
-<h3 id="parameters">Paramètres</h3>
+### Paramètres
 
-<dl>
-  <dt><code>selectors</code></dt>
-  <dd>est un groupe de <a href="/fr/docs/Learn/CSS/Building_blocks/Selectors">sélecteurs</a> à faire correspondre aux éléments descendants du <a href="/fr/docs/Web/API/Element"><code>Element</code></a> <code>baseElement</code> ; cette syntaxe CSS doit être valide ou une exception SyntaxError se produit. Le premier élément trouvé correspondant à ce groupe de sélecteurs est renvoyé.</dd>
-</dl>
+- `selectors`
+  - : est un groupe de [sélecteurs](/fr/docs/Learn/CSS/Building_blocks/Selectors) à faire correspondre aux éléments descendants du [`Element`](/fr/docs/Web/API/Element) `baseElement` ; cette syntaxe CSS doit être valide ou une exception SyntaxError se produit. Le premier élément trouvé correspondant à ce groupe de sélecteurs est renvoyé.
 
-<h3 id="return_value">Valeur retournée</h3>
+### Valeur retournée
 
-<p>Le premier élément descendant de <code>baseElement</code> qui correspond au groupe de <code>selectors</code> « sélecteurs » spécifié. La hiérarchie entière des éléments est considérée lors de la mise en correspondance, y compris ceux qui sont en dehors de l'ensemble des éléments, y compris <code>baseElement</code> et ses descendants ; En d'autres termes, les sélecteurs sont d'abord appliqués au document entier, et non à l'élément de base, pour générer une liste initiale d'éléments potentiels. Les éléments résultants sont ensuite examinés pour voir s'ils sont des descendants de <code>baseElement</code>. La première correspondance de ces éléments restants est renvoyée par la méthode <code>querySelector()</code>.</p>
+Le premier élément descendant de `baseElement` qui correspond au groupe de `selectors` « sélecteurs » spécifié. La hiérarchie entière des éléments est considérée lors de la mise en correspondance, y compris ceux qui sont en dehors de l'ensemble des éléments, y compris `baseElement` et ses descendants ; En d'autres termes, les sélecteurs sont d'abord appliqués au document entier, et non à l'élément de base, pour générer une liste initiale d'éléments potentiels. Les éléments résultants sont ensuite examinés pour voir s'ils sont des descendants de `baseElement`. La première correspondance de ces éléments restants est renvoyée par la méthode `querySelector()`.
 
-<p>Si aucune correspondance n'est trouvée, la valeur retournée est <code>null</code>.</p>
+Si aucune correspondance n'est trouvée, la valeur retournée est `null`.
 
-<h3 id="exceptions">Exceptions</h3>
+### Exceptions
 
-<dl>
-  <dt>SyntaxError</dt>
-  <dd>Les <code>selectors</code> spécifiés sont invalides.</dd>
-</dl>
+- SyntaxError
+  - : Les `selectors` spécifiés sont invalides.
 
-<h2 id="example">Exemple</h2>
+## Exemple
 
-<p>Dans ce premier exemple, est retourné le premier élément <a href="/fr/docs/Web/HTML/Element/style"><code>&lt;style&gt;</code></a> dans le corps du document HTML qui, soit n'a pas de type, soit a le type <code>text/css</code>:</p>
+Dans ce premier exemple, est retourné le premier élément [`<style>`](/fr/docs/Web/HTML/Element/style) dans le corps du document HTML qui, soit n'a pas de type, soit a le type `text/css`:
 
-<pre class="brush:js">var el = document.body.querySelector("style[type='text/css'], style:not([type])");</pre>
+```js
+var el = document.body.querySelector("style[type='text/css'], style:not([type])");
+```
 
-<h3 id="the_entire_hierarchy_counts">La hiérarchie entière compte</h3>
+### La hiérarchie entière compte
 
-<p>Cet exemple montre que la hiérarchie du document entier est prise en compte lors de l'application des <code>selectors</code>, de sorte que les niveaux en dehors du <code>baseElement</code> spécifié sont toujours pris en compte lors de la recherche des correspondances.</p>
+Cet exemple montre que la hiérarchie du document entier est prise en compte lors de l'application des `selectors`, de sorte que les niveaux en dehors du `baseElement` spécifié sont toujours pris en compte lors de la recherche des correspondances.
 
-<h4 id="html">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;div&gt;
-  &lt;h5&gt;Original content&lt;/h5&gt;
-  &lt;p&gt;
+```html
+<div>
+  <h5>Original content</h5>
+  <p>
     inside paragraph
-    &lt;span&gt;inside span&lt;/span&gt;
+    <span>inside span</span>
     inside paragraph
-  &lt;/p&gt;
-&lt;/div&gt;
-&lt;div&gt;
-  &lt;h5&gt;Output&lt;/h5&gt;
-  &lt;div id="output"&gt;&lt;/div&gt;
-&lt;/div&gt;</pre>
-
-<h4 id="javascript">JavaScript</h4>
-
-<pre class="brush: js">var baseElement = document.querySelector("p");
-document.getElementById("output").innerHTML = (baseElement.querySelector("div span").innerHTML);</pre>
-
-<h4 id="result">Résultat</h4>
-
-<p>Le résultat ressemble à ceci :</p>
-
-<div>{{EmbedLiveSample('the_entire_hierarchy_counts', '', 200)}}</div>
-
-<h3 id="more_examples">Plus d'exemples</h3>
-
-<p>Voir <a href="/fr/docs/Web/API/Document/querySelector"><code>Document.querySelector()</code></a> pour des exemples supplémentaires du format approprié pour les sélecteurs.</p>
-
-<h2 id="specifications">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('DOM WHATWG','#dom-parentnode-queryselectorall','querySelector()')}}</td>
-      <td>{{Spec2('DOM WHATWG')}}</td>
-      <td></td>
-    </tr>
-    <tr>
-      <td>{{SpecName('Selectors API Level 2','#queryselectorall','querySelectorAll()')}}</td>
-      <td>{{Spec2('Selectors API Level 2')}}</td>
-      <td></td>
-    </tr>
-    <tr>
-      <td>{{SpecName('Selectors API Level 1','#queryselectorall','querySelectorAll()')}}</td>
-      <td>{{Spec2('Selectors API Level 1')}}</td>
-      <td></td>
-    </tr>
-  </tbody>
-</table>
-
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Element.querySelector")}}</p>
-
-<h2 id="see_also">Voir aussi</h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">Localisation des éléments DOM avec les sélecteurs</a></li>
-  <li><a href="/fr/docs/Web/CSS/Attribute_selectors">Sélecteurs d'attribut</a> dans le guide CSS</li>
-  <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Sélecteurs d'attribut</a> dans la zone d'apprentissage MDN</li>
-  <li><a href="/fr/docs/Web/API/Element/querySelectorAll"><code>element.querySelectorAll()</code></a></li>
-  <li><a href="/fr/docs/Web/API/Document/querySelector"><code>document.querySelector()</code></a> et <a href="/fr/docs/Web/API/Document/querySelectorAll"><code>Document.querySelectorAll()</code></a></li>
-  <li><a href="/fr/docs/Web/API/DocumentFragment/querySelector"><code>DocumentFragment.querySelector()</code></a> et <a href="/fr/docs/Web/API/DocumentFragment/querySelectorAll"><code>DocumentFragment.querySelectorAll()</code></a></li>
-  <li><a href="/fr/docs/Web/API/ParentNode/querySelector"><code>ParentNode.querySelector()</code></a> et <a href="/fr/docs/Web/API/ParentNode/querySelectorAll"><code>ParentNode.querySelectorAll()</code></a></li>
-  <li><a href="/en-US/docs/Archive/Add-ons/Code_snippets/QuerySelector">Exemples de code pour querySelector</a> <small>Archive en anglais</small></li>
-  <li>Autres méthodes qui prennent des sélecteurs : <a href="/fr/docs/Web/API/Element/closest"><code>element.closest()</code></a> et <a href="/fr/docs/Web/API/Element/matches"><code>element.matches()</code></a>.</li>
-</ul>
+  </p>
+</div>
+<div>
+  <h5>Output</h5>
+  <div id="output"></div>
+</div>
+```
+
+#### JavaScript
+
+```js
+var baseElement = document.querySelector("p");
+document.getElementById("output").innerHTML = (baseElement.querySelector("div span").innerHTML);
+```
+
+#### Résultat
+
+Le résultat ressemble à ceci :
+
+{{EmbedLiveSample('the_entire_hierarchy_counts', '', 200)}}
+
+### Plus d'exemples
+
+Voir [`Document.querySelector()`](/fr/docs/Web/API/Document/querySelector) pour des exemples supplémentaires du format approprié pour les sélecteurs.
+
+## Spécifications
+
+| Spécification                                                                                            | Statut                                       | Commentaire |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------------------- | ----------- |
+| {{SpecName('DOM WHATWG','#dom-parentnode-queryselectorall','querySelector()')}} | {{Spec2('DOM WHATWG')}}             |             |
+| {{SpecName('Selectors API Level 2','#queryselectorall','querySelectorAll()')}} | {{Spec2('Selectors API Level 2')}} |             |
+| {{SpecName('Selectors API Level 1','#queryselectorall','querySelectorAll()')}} | {{Spec2('Selectors API Level 1')}} |             |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Element.querySelector")}}
+
+## Voir aussi
+
+- [Localisation des éléments DOM avec les sélecteurs](/fr/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors)
+- [Sélecteurs d'attribut](/fr/docs/Web/CSS/Attribute_selectors) dans le guide CSS
+- [Sélecteurs d'attribut](/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors) dans la zone d'apprentissage MDN
+- [`element.querySelectorAll()`](/fr/docs/Web/API/Element/querySelectorAll)
+- [`document.querySelector()`](/fr/docs/Web/API/Document/querySelector) et [`Document.querySelectorAll()`](/fr/docs/Web/API/Document/querySelectorAll)
+- [`DocumentFragment.querySelector()`](/fr/docs/Web/API/DocumentFragment/querySelector) et [`DocumentFragment.querySelectorAll()`](/fr/docs/Web/API/DocumentFragment/querySelectorAll)
+- [`ParentNode.querySelector()`](/fr/docs/Web/API/ParentNode/querySelector) et [`ParentNode.querySelectorAll()`](/fr/docs/Web/API/ParentNode/querySelectorAll)
+- [Exemples de code pour querySelector](/en-US/docs/Archive/Add-ons/Code_snippets/QuerySelector) Archive en anglais
+- Autres méthodes qui prennent des sélecteurs : [`element.closest()`](/fr/docs/Web/API/Element/closest) et [`element.matches()`](/fr/docs/Web/API/Element/matches).
diff --git a/files/fr/web/api/element/queryselectorall/index.md b/files/fr/web/api/element/queryselectorall/index.md
index cab55d02fe..e11820dd21 100644
--- a/files/fr/web/api/element/queryselectorall/index.md
+++ b/files/fr/web/api/element/queryselectorall/index.md
@@ -9,158 +9,139 @@ tags:
   - Reference
 translation_of: Web/API/Element/querySelectorAll
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p>La méthode  <code><strong>querySelectorAll()</strong></code> de {{domxref("Element")}} retourne une  {{domxref("NodeList")}} non-directe des éléments correspondants au groupe de selecteurs CSS spécifiés qui sont des descendants de l'élément sur lequel la méthode a été appelée.</p>
+La méthode  **`querySelectorAll()`** de {{domxref("Element")}} retourne une  {{domxref("NodeList")}} non-directe des éléments correspondants au groupe de selecteurs CSS spécifiés qui sont des descendants de l'élément sur lequel la méthode a été appelée.
 
-<div class="note">
-<p><strong>Note :</strong> La définition de cet API a été déplacée vers l'interface {{domxref("ParentNode")}} .</p>
-</div>
+> **Note :** La définition de cet API a été déplacée vers l'interface {{domxref("ParentNode")}} .
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>elementList</em> = baseElement.querySelectorAll(<em>selectors</em>);
-</pre>
+    elementList = baseElement.querySelectorAll(selectors);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>selectors</code> </dt>
- <dd>une {{domxref("DOMString")}} contenant un ou plusieurs sélecteurs à comparer. Cette chaîne doit être valide pour les <a href="/fr/docs/Web/CSS/S%C3%A9lecteurs_CSS">sélecteurs CSS</a> ; si ce n'est pas le cas, une exception <code>SyntaxError</code> est levée. Voir <a href="/fr/docs/Web/API/Document_Object_Model/Localisation_des_%C3%A9l%C3%A9ments_DOM_avec_les_s%C3%A9lecteurs">Localisation des éléments DOM avec les sélecteurs</a> pour plus d'informations sur l'utilisation des sélecteurs pour identifier les éléments. Plusieurs sélecteurs peuvent être spécifiés en les séparant par une virgule.</dd>
-</dl>
+- `selectors`
+  - : une {{domxref("DOMString")}} contenant un ou plusieurs sélecteurs à comparer. Cette chaîne doit être valide pour les [sélecteurs CSS](/fr/docs/Web/CSS/S%C3%A9lecteurs_CSS) ; si ce n'est pas le cas, une exception `SyntaxError` est levée. Voir [Localisation des éléments DOM avec les sélecteurs](/fr/docs/Web/API/Document_Object_Model/Localisation_des_%C3%A9l%C3%A9ments_DOM_avec_les_s%C3%A9lecteurs) pour plus d'informations sur l'utilisation des sélecteurs pour identifier les éléments. Plusieurs sélecteurs peuvent être spécifiés en les séparant par une virgule.
 
-<div class="note">
-<p><strong>Note :</strong> Les caractères qui ne font pas partie de la syntaxe CSS standard doivent être échappés à l'aide d'une barre oblique inverse. Puisque JavaScript utilise également l'échappement en retour arrière, un soin particulier doit être pris lors de l'écriture de littéraux de chaîne utilisant ces caractères.</p>
-</div>
+> **Note :** Les caractères qui ne font pas partie de la syntaxe CSS standard doivent être échappés à l'aide d'une barre oblique inverse. Puisque JavaScript utilise également l'échappement en retour arrière, un soin particulier doit être pris lors de l'écriture de littéraux de chaîne utilisant ces caractères.
 
-<h3 id="Example">Valeur retournée</h3>
+### Valeur retournée
 
-<p>Une {{domxref ("NodeList")}} contenant un objet {{domxref ("Element")}} pour chaque noeud descendant qui correspond à au moins un des sélecteurs spécifiés.</p>
+Une {{domxref ("NodeList")}} contenant un objet {{domxref ("Element")}} pour chaque noeud descendant qui correspond à au moins un des sélecteurs spécifiés.
 
-<div class="note">
-<p><strong>Note :</strong> Si le <code>selectors</code> spécifié inclus un <a href="/fr/docs/Web/CSS/Pseudo-elements">pseudo-element CSS</a>, la liste renvoyée est toujours vide.</p>
-</div>
+> **Note :** Si le `selectors` spécifié inclus un [pseudo-element CSS](/fr/docs/Web/CSS/Pseudo-elements), la liste renvoyée est toujours vide.
 
-<h3 id="Example">Exception</h3>
+### Exception
 
-<dl>
- <dt><code>SyntaxError</code></dt>
- <dd>La syntaxe de la chaîne du <code>selectors</code> spécifié n'est pas correcte.</dd>
-</dl>
+- `SyntaxError`
+  - : La syntaxe de la chaîne du `selectors` spécifié n'est pas correcte.
 
-<h2 id="Example">Exemples</h2>
+## Exemples
 
-<h3 id="Obtention_d'une_liste_de_correspondances">Obtention d'une liste de correspondances</h3>
+### Obtention d'une liste de correspondances
 
-<p>Pour obtenir une {{domxref("NodeList")}} de tous les éléments {{HTMLElement("p")}} contenus dans l'élément <code>"myBox"</code> :</p>
+Pour obtenir une {{domxref("NodeList")}} de tous les éléments {{HTMLElement("p")}} contenus dans l'élément `"myBox"` :
 
-<pre class="brush: js">var matches = myBox.querySelectorAll("p");</pre>
+```js
+var matches = myBox.querySelectorAll("p");
+```
 
-<p>Cet exemple renvoie une liste de tous les éléments {{HTMLElement("div")}} dans <code>"myBox"</code>  avec une classe  "<code>note</code>" ou  "<code>alert</code>" :</p>
+Cet exemple renvoie une liste de tous les éléments {{HTMLElement("div")}} dans `"myBox"`  avec une classe  "`note`" ou  "`alert`" :
 
-<pre class="brush: js">var matches = myBox.querySelectorAll("div.note, div.alert");</pre>
+```js
+var matches = myBox.querySelectorAll("div.note, div.alert");
+```
 
-<p>Ici, nous obtenons une liste d'éléments <code>p</code> du document, dont le parent immédiat est un {{domxref("div")}}  qui a la classe <code>'highlighted'</code> et qui sont inclus dans un conteneur dont l'ID est <code>"test"</code> :</p>
+Ici, nous obtenons une liste d'éléments `p` du document, dont le parent immédiat est un {{domxref("div")}}  qui a la classe `'highlighted'` et qui sont inclus dans un conteneur dont l'ID est `"test"` :
 
-<pre class="brush: js">var container = document.querySelector("#test");
-var matches = container.querySelectorAll("div.highlighted &gt; p");</pre>
+```js
+var container = document.querySelector("#test");
+var matches = container.querySelectorAll("div.highlighted > p");
+```
 
-<p>Cet exemple utilise un <a href="/fr/docs/Web/CSS/S%C3%A9lecteurs_d_attribut">sélecteur d'attribut</a> pour renvoyer une liste d'éléments {{domxref("iframe")}} du document lesquels contiennent un attribut nommé <code>'data-src'</code>:</p>
+Cet exemple utilise un [sélecteur d'attribut](/fr/docs/Web/CSS/S%C3%A9lecteurs_d_attribut) pour renvoyer une liste d'éléments {{domxref("iframe")}} du document lesquels contiennent un attribut nommé `'data-src'`:
 
-<pre class="brush: js">var matches = document.querySelectorAll("iframe[data-src]");</pre>
+```js
+var matches = document.querySelectorAll("iframe[data-src]");
+```
 
-<p>Ici, un sélecteur d'attribut est utilisé pour renvoyer une liste des éléments de la liste contenus dans une liste dont l'ID est <code>"userlist"</code> et qui ont un attribut <code>"data-active"</code> dont la valeur est <code>"1"</code>:</p>
+Ici, un sélecteur d'attribut est utilisé pour renvoyer une liste des éléments de la liste contenus dans une liste dont l'ID est `"userlist"` et qui ont un attribut `"data-active"` dont la valeur est `"1"`:
 
-<pre class="brush: js">var container = document.querySelector("#userlist");
-var matches = container.querySelectorAll("li[data-active=1]");</pre>
+```js
+var container = document.querySelector("#userlist");
+var matches = container.querySelectorAll("li[data-active=1]");
+```
 
-<h3 id="Accès_aux_correspondances">Accès aux correspondances</h3>
+### Accès aux correspondances
 
-<p>Une fois que la {{domxref("NodeList")}} des éléments correspondants est retournée, vous pouvez l'examiner pour n'importe quel tableau (<em>array</em>). Si le tableau est vide (sa propriété <code>length</code> est 0), alors aucune correspondance n'a été trouvée.</p>
+Une fois que la {{domxref("NodeList")}} des éléments correspondants est retournée, vous pouvez l'examiner pour n'importe quel tableau (_array_). Si le tableau est vide (sa propriété `length` est 0), alors aucune correspondance n'a été trouvée.
 
-<p>Sinon, vous pouvez simplement utiliser la notation de tableau standard pour accéder au contenu de la liste. Vous pouvez utiliser n'importe quelle instruction de boucle commune, telle que :</p>
+Sinon, vous pouvez simplement utiliser la notation de tableau standard pour accéder au contenu de la liste. Vous pouvez utiliser n'importe quelle instruction de boucle commune, telle que :
 
-<pre class="brush: js">var highlightedItems = userList.querySelectorAll(".highlighted");
+```js
+var highlightedItems = userList.querySelectorAll(".highlighted");
 
 highlightedItems.forEach(function(userItem) {
   deleteUser(userItem);
-});</pre>
+});
+```
 
-<h2 id="Notes">Notes d'utilisation</h2>
+## Notes d'utilisation
 
-<p><code>queryselectorAll</code> se comporte différemment des bibliothèques DOM JavaScript les plus courantes, ce qui peut entraîner des résultats inattendus.</p>
+`queryselectorAll` se comporte différemment des bibliothèques DOM JavaScript les plus courantes, ce qui peut entraîner des résultats inattendus.
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<p>Considérons ce code HTML, avec ses trois blocs {{HTMLElement ("div")}} imbriqués.</p>
+Considérons ce code HTML, avec ses trois blocs {{HTMLElement ("div")}} imbriqués.
 
-<pre class="brush: html">&lt;div class="outer"&gt;
-  &lt;div class="select"&gt;
-    &lt;div class="inner"&gt;
-    &lt;/div&gt;
-  &lt;/div&gt;
-&lt;/div&gt;</pre>
+```html
+<div class="outer">
+  <div class="select">
+    <div class="inner">
+    </div>
+  </div>
+</div>
+```
 
-<h3 id="JavaScript">JavaScript</h3>
+### JavaScript
 
-<pre class="brush: js">var select = document.querySelector('.select');
+```js
+var select = document.querySelector('.select');
 var inner = select.querySelectorAll('.outer .inner');
-inner.length; // 1, pas 0!</pre>
+inner.length; // 1, pas 0!
+```
 
-<p>Dans cet exemple, en sélectionnant <code>".outer .inner"</code> dans le contexte <code>&lt;div&gt; </code>avec la classe <code>"select"</code>, l'élément avec la classe <code>".inner"</code> est toujours trouvé, même si <code>.outer</code> n'est pas un descendant de l'élément sur lequel la recherche est effectuée <code>(".select")</code>. Par défaut, <code>querySelectorAll()</code> vérifie uniquement que le dernier élément du sélecteur se trouve dans la portée de la recherche.</p>
+Dans cet exemple, en sélectionnant `".outer .inner"` dans le contexte `<div> `avec la classe `"select"`, l'élément avec la classe `".inner"` est toujours trouvé, même si `.outer` n'est pas un descendant de l'élément sur lequel la recherche est effectuée `(".select")`. Par défaut, `querySelectorAll()` vérifie uniquement que le dernier élément du sélecteur se trouve dans la portée de la recherche.
 
-<p>La pseudo-classe {{cssxref (": scope")}} restaure le comportement attendu, ne faisant correspondre les sélecteurs que sur les descendants de l'élément de base :</p>
+La pseudo-classe {{cssxref (": scope")}} restaure le comportement attendu, ne faisant correspondre les sélecteurs que sur les descendants de l'élément de base :
 
-<pre class="brush: js">var select = document.querySelector('.select');
+```js
+var select = document.querySelector('.select');
 var inner = select.querySelectorAll(':scope .outer .inner');
-inner.length; // 0</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName("DOM WHATWG", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td>
-   <td>{{Spec2("DOM WHATWG")}}</td>
-   <td>norme actuelle</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td>
-   <td>{{Spec2("Selectors API Level 2")}}</td>
-   <td>Pas de changement</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td>
-   <td>{{Spec2("DOM4")}}</td>
-   <td>Définition initiale</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}</td>
-   <td>{{Spec2("Selectors API Level 1")}}</td>
-   <td>Définition originale</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Element.querySelectorAll")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-</div>
+inner.length; // 0
+```
+
+## Spécifications
+
+| Spécification                                                                                                                                | Statut                                       | Commentaire          |
+| -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------- |
+| {{SpecName("DOM WHATWG", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}             | {{Spec2("DOM WHATWG")}}             | norme actuelle       |
+| {{SpecName("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}} | {{Spec2("Selectors API Level 2")}} | Pas de changement    |
+| {{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}                     | {{Spec2("DOM4")}}                     | Définition initiale  |
+| {{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}                     | {{Spec2("Selectors API Level 1")}} | Définition originale |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Element.querySelectorAll")}}
+
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/API/Document_Object_Model/Localisation_des_%C3%A9l%C3%A9ments_DOM_avec_les_s%C3%A9lecteurs">Localisation des éléments DOM avec les sélecteurs</a></li>
- <li><a href="/fr/docs/Web/CSS/S%C3%A9lecteurs_d_attribut">Sélecteurs d'attribut</a> dans le guide CSS</li>
- <li><a href="/fr/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors">Sélecteurs d'attribut</a> dans la zone d'apprentissage de MDN</li>
- <li>{{domxref("element.querySelector()")}}</li>
- <li>{{domxref("Document.querySelector()")}} et {{domxref("Document.querySelectorAll()")}}</li>
- <li>{{domxref("DocumentFragment.querySelector()")}} et {{domxref("DocumentFragment.querySelectorAll()")}}</li>
- <li>{{domxref("document.querySelector()")}} et {{domxref("ParentNode.querySelectorAll()")}}</li>
- <li><a href="/fr/Add-ons/Code_snippets/QuerySelector">Extraits de code pour <code>querySelector</code></a></li>
-</ul>
+- [Localisation des éléments DOM avec les sélecteurs](/fr/docs/Web/API/Document_Object_Model/Localisation_des_%C3%A9l%C3%A9ments_DOM_avec_les_s%C3%A9lecteurs)
+- [Sélecteurs d'attribut](/fr/docs/Web/CSS/S%C3%A9lecteurs_d_attribut) dans le guide CSS
+- [Sélecteurs d'attribut](/fr/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors) dans la zone d'apprentissage de MDN
+- {{domxref("element.querySelector()")}}
+- {{domxref("Document.querySelector()")}} et {{domxref("Document.querySelectorAll()")}}
+- {{domxref("DocumentFragment.querySelector()")}} et {{domxref("DocumentFragment.querySelectorAll()")}}
+- {{domxref("document.querySelector()")}} et {{domxref("ParentNode.querySelectorAll()")}}
+- [Extraits de code pour `querySelector`](/fr/Add-ons/Code_snippets/QuerySelector)
diff --git a/files/fr/web/api/element/releasepointercapture/index.md b/files/fr/web/api/element/releasepointercapture/index.md
index 22be0475ac..d16e0a7cfa 100644
--- a/files/fr/web/api/element/releasepointercapture/index.md
+++ b/files/fr/web/api/element/releasepointercapture/index.md
@@ -9,32 +9,30 @@ tags:
   - Pointeur
 translation_of: Web/API/Element/releasePointerCapture
 ---
-<p>{{APIRef("DOM")}}</p>
+{{APIRef("DOM")}}
 
-<p>Relâche (arrête) la capture de pointeur précédemment définie pour un <em>pointer</em> ({{domxref("PointerEvent")}}) spécifique.</p>
+Relâche (arrête) la capture de pointeur précédemment définie pour un _pointer_ ({{domxref("PointerEvent")}}) spécifique.
 
-<p>Voir la méthode <strong>{{domxref("Element.setPointerCapture","Element.setPointerCapture()")}}</strong> pour une description de <em>pointer capture </em>et la façon de le définir pour un élément particulier.</p>
+Voir la méthode **{{domxref("Element.setPointerCapture","Element.setPointerCapture()")}}** pour une description de _pointer capture_ et la façon de le définir pour un élément particulier.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">targetElement.<em>releasePointerCapture</em>(pointerId);
-</pre>
+    targetElement.releasePointerCapture(pointerId);
 
-<h3 id="Arguments">Arguments</h3>
+### Arguments
 
-<dl>
- <dt><em>pointerId</em></dt>
- <dd>L'{{domxref("PointerEvent.pointerId","identifiant")}} pour un {{domxref("PointerEvent","pointer event")}}.</dd>
-</dl>
+- _pointerId_
+  - : L'{{domxref("PointerEvent.pointerId","identifiant")}} pour un {{domxref("PointerEvent","pointer event")}}.
 
-<h3 id="Valeur_retournée">Valeur retournée</h3>
+### Valeur retournée
 
-<p>Si <code>pointerId</code> ne correspond à aucun pointeur actif, cette méthode renvoie <code>void</code> (<em>vide</em>) et déclenche une {{domxref("DOMException")}} avec le nom <code>InvalidPointerId</code>.</p>
+Si `pointerId` ne correspond à aucun pointeur actif, cette méthode renvoie `void` (_vide_) et déclenche une {{domxref("DOMException")}} avec le nom `InvalidPointerId`.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush: html">&lt;html&gt;
-&lt;script&gt;
+```html
+<html>
+<script>
 function downHandler(ev) {
  var el=document.getElementById("target");
  // L'élément "target" va recevoir/capturer d'autres évènements
@@ -51,42 +49,25 @@ function init() {
  el.onpointerdown = downHandler;
  el.onpointercancel = cancelHandler;
 }
-&lt;/script&gt;
-&lt;body onload="init();"&gt;
-&lt;div id="target"&gt; Touch me ... &lt;/div&gt;
-&lt;/body&gt;
-&lt;/html&gt;
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Pointer Events 2','#widl-Element-releasePointerCapture-void-long-pointerId', 'releasePointerCapture')}}</td>
-   <td>{{Spec2('Pointer Events 2')}}</td>
-   <td>Version non stable.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('Pointer Events', '#widl-Element-releasePointerCapture-void-long-pointerId', 'releasePointerCapture')}}</td>
-   <td>{{Spec2('Pointer Events')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Element.releasePointerCapture")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{ domxref("Element.setPointerCapture","Element.setPointerCapture()") }}</li>
- <li>{{ domxref("Pointer_events","Pointer Events") }}</li>
-</ul>
+</script>
+<body onload="init();">
+<div id="target"> Touch me ... </div>
+</body>
+</html>
+```
+
+## Spécifications
+
+| Spécification                                                                                                                                            | Statut                                   | Commentaire          |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('Pointer Events 2','#widl-Element-releasePointerCapture-void-long-pointerId', 'releasePointerCapture')}} | {{Spec2('Pointer Events 2')}} | Version non stable.  |
+| {{SpecName('Pointer Events', '#widl-Element-releasePointerCapture-void-long-pointerId', 'releasePointerCapture')}} | {{Spec2('Pointer Events')}}     | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Element.releasePointerCapture")}}
+
+## Voir aussi
+
+- {{ domxref("Element.setPointerCapture","Element.setPointerCapture()") }}
+- {{ domxref("Pointer_events","Pointer Events") }}
diff --git a/files/fr/web/api/element/removeattribute/index.md b/files/fr/web/api/element/removeattribute/index.md
index b27f3eb813..9ce1d00a4b 100644
--- a/files/fr/web/api/element/removeattribute/index.md
+++ b/files/fr/web/api/element/removeattribute/index.md
@@ -10,38 +10,32 @@ tags:
   - Suppression
 translation_of: Web/API/Element/removeAttribute
 ---
-<p>{{ APIRef("DOM") }}</p>
+{{ APIRef("DOM") }}
 
-<p><code>removeAttribute</code> supprime un attribut de l'élément spécifié.</p>
+`removeAttribute` supprime un attribut de l'élément spécifié.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="eval"><em>element</em>.removeAttribute(<em>nomAttribut</em>);
-</pre>
+    element.removeAttribute(nomAttribut);
 
-<ul>
- <li><code>nomAttribut</code> est une chaîne de caractères représentant le nom de l'attribut à enlever de l'<em>element</em> .</li>
-</ul>
+- `nomAttribut` est une chaîne de caractères représentant le nom de l'attribut à enlever de l'_element_ .
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre>// avant : &lt;div id="div1" align="left" width="200"&gt;
-document.getElementById("div1").removeAttribute("align");
-// maintenant : &lt;div id="div1" width="200"&gt;
-</pre>
+    // avant : <div id="div1" align="left" width="200">
+    document.getElementById("div1").removeAttribute("align");
+    // maintenant : <div id="div1" width="200">
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p>Il vaut mieux utiliser <code>removeAttribute</code> plutôt que de définir la valeur de l'attribut à <code>null</code> avec <a href="fr/DOM/element.setAttribute">setAttribute</a>.</p>
+Il vaut mieux utiliser `removeAttribute` plutôt que de définir la valeur de l'attribut à `null` avec [setAttribute](fr/DOM/element.setAttribute).
 
-<p>Tenter d'effacer un attribut que l'élément ne possède pas ne provoque aucune exception.</p>
+Tenter d'effacer un attribut que l'élément ne possède pas ne provoque aucune exception.
 
-<p><code>removeAttribute</code> ne renvoie rien, donc vous ne pouvez supprimer plusieurs attributs par enchaînement de cette méthode.</p>
+`removeAttribute` ne renvoie rien, donc vous ne pouvez supprimer plusieurs attributs par enchaînement de cette méthode.
 
-<p>{{ DOMAttributeMethods() }}</p>
+{{ DOMAttributeMethods() }}
 
-<h2 id="Sp.C3.A9cification">Spécification</h2>
+## Spécification
 
-<ul>
- <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-6D6AC0F9">DOM Level 2 Core : removeAttribute</a> — <small><a href="http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-6D6AC0F9">traduction en français</a> (non normative)</small></li>
-</ul>
+- [DOM Level 2 Core : removeAttribute](http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-6D6AC0F9) — [traduction en français](http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-6D6AC0F9) (non normative)
diff --git a/files/fr/web/api/element/removeattributenode/index.md b/files/fr/web/api/element/removeattributenode/index.md
index 4ecd896414..3f362cfe95 100644
--- a/files/fr/web/api/element/removeattributenode/index.md
+++ b/files/fr/web/api/element/removeattributenode/index.md
@@ -8,38 +8,35 @@ tags:
   - Méthodes
 translation_of: Web/API/Element/removeAttributeNode
 ---
-<p>{{ APIRef("DOM") }}</p>
+{{ APIRef("DOM") }}
 
-<p><code>removeAttributeNode</code> enlève l'attribut spécifié de l'élément courant.</p>
+`removeAttributeNode` enlève l'attribut spécifié de l'élément courant.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="eval"><em>removedAttr</em> =<em>element</em>.removeAttributeNode(<em>attributeNode</em>)
-</pre>
+    removedAttr =element.removeAttributeNode(attributeNode)
 
-<ul>
- <li><code>attributeNode</code> est le nœud <code>Attr</code> à enlever.</li>
- <li><code>removedAttr</code> est le nœud <code>Attr</code> qui vient d'être enlevé.</li>
-</ul>
+- `attributeNode` est le nœud `Attr` à enlever.
+- `removedAttr` est le nœud `Attr` qui vient d'être enlevé.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush: html">// &lt;div id="top" align="center" /&gt;
+```html
+// <div id="top" align="center" />
 var d = document.getElementById("top");
 var d_align = d.getAttributeNode("align");
 d.removeAttributeNode(d_align);
-// align est maintenant supprimé : &lt;div id="top" /&gt;</pre>
+// align est maintenant supprimé : <div id="top" />
+```
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p>Si l'attribut enlevé a une valeur par défaut, celle-ci remplace immédiatement l'ancienne. Lorsque c'est possible, l'attribut de remplacement conserve la même URI d'espace de noms et le même nom local, ainsi que le préfixe original.</p>
+Si l'attribut enlevé a une valeur par défaut, celle-ci remplace immédiatement l'ancienne. Lorsque c'est possible, l'attribut de remplacement conserve la même URI d'espace de noms et le même nom local, ainsi que le préfixe original.
 
-<p>Il n'y a pas de <code>removeAttributeNodeNS</code> (contrairement à la paire <code>setAttributeNode</code> et <code>setAttributeNodeNS</code> pour lesquels il est nécessaire de savoir quel attribut remplacer (le cas échéant),  <code>removeAttributeNode</code> n'a pas cette exigence.  <code>removeAttributeNode</code> peut supprimer des attributs, qu'ils soient d'espace de noms ou pas.</p>
+Il n'y a pas de `removeAttributeNodeNS` (contrairement à la paire `setAttributeNode` et `setAttributeNodeNS` pour lesquels il est nécessaire de savoir quel attribut remplacer (le cas échéant),  `removeAttributeNode` n'a pas cette exigence.  `removeAttributeNode` peut supprimer des attributs, qu'ils soient d'espace de noms ou pas.
 
-<p>{{ DOMAttributeMethods() }}</p>
+{{ DOMAttributeMethods() }}
 
-<h2 id="Sp.C3.A9cification">Spécification</h2>
+## Spécification
 
-<ul>
- <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-D589198">DOM Level 2 Core : removeAttributeNode</a> — <small><a href="http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-D589198">traduction en français</a> (non normative)</small></li>
-</ul>
+- [DOM Level 2 Core : removeAttributeNode](http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-D589198) — [traduction en français](http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-D589198) (non normative)
diff --git a/files/fr/web/api/element/removeattributens/index.md b/files/fr/web/api/element/removeattributens/index.md
index 457c552bb9..58ce20f5c2 100644
--- a/files/fr/web/api/element/removeattributens/index.md
+++ b/files/fr/web/api/element/removeattributens/index.md
@@ -8,37 +8,31 @@ tags:
   - Méthodes
 translation_of: Web/API/Element/removeAttributeNS
 ---
-<p>{{ APIRef("DOM") }}</p>
+{{ APIRef("DOM") }}
 
-<p><code>removeAttributeNS</code> supprime l'attribut spécifié d'un élément.</p>
+`removeAttributeNS` supprime l'attribut spécifié d'un élément.
 
-<p>Dans Firefox 3 et postérieurs, cette méthode réinitialise les valeurs DOM à leur valeur par défaut.</p>
+Dans Firefox 3 et postérieurs, cette méthode réinitialise les valeurs DOM à leur valeur par défaut.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="eval"><em>element</em>.removeAttributeNS(<em>namespace</em>,<em>attrName</em>);
-</pre>
+    element.removeAttributeNS(namespace,attrName);
 
-<ul>
- <li><code>namespace</code> est une chaîne qui contient l'espace de noms de l'attribut.</li>
- <li><code>attrName</code> est une chaîne qui nomme l'attribut à supprimer du noeud en cours.</li>
-</ul>
+- `namespace` est une chaîne qui contient l'espace de noms de l'attribut.
+- `attrName` est une chaîne qui nomme l'attribut à supprimer du noeud en cours.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre>// &lt;div id="div1" xmlns:special="http://www.mozilla.org/ns/specialspace"
-//      special:specialAlign="utterleft" width="200px" /&gt;
-d = document.getElementById("div1");
-d.removeAttributeNS("http://www.mozilla.org/ns/specialspace", "specialAlign");
-// l'élément est devenu : &lt;div id="div1" width="200px" /&gt;
-</pre>
+    // <div id="div1" xmlns:special="http://www.mozilla.org/ns/specialspace"
+    //      special:specialAlign="utterleft" width="200px" />
+    d = document.getElementById("div1");
+    d.removeAttributeNS("http://www.mozilla.org/ns/specialspace", "specialAlign");
+    // l'élément est devenu : <div id="div1" width="200px" />
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p>{{ DOMAttributeMethods() }}</p>
+{{ DOMAttributeMethods() }}
 
-<h2 id="Sp.C3.A9cification">Spécification</h2>
+## Spécification
 
-<ul>
- <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElRemAtNS">DOM Level 2 Core: removeAttributeNS (en)</a> <small>— <a href="http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-ElRemAtNS">traduction en français</a> (non normative)</small></li>
-</ul>
+- [DOM Level 2 Core: removeAttributeNS (en)](http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElRemAtNS) — [traduction en français](http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-ElRemAtNS) (non normative)
diff --git a/files/fr/web/api/element/requestfullscreen/index.md b/files/fr/web/api/element/requestfullscreen/index.md
index ad1dbf6456..5cf2f6c4ef 100644
--- a/files/fr/web/api/element/requestfullscreen/index.md
+++ b/files/fr/web/api/element/requestfullscreen/index.md
@@ -6,60 +6,42 @@ tags:
   - Plein écran
 translation_of: Web/API/Element/requestFullScreen
 ---
-<div>{{APIRef("Fullscreen API")}}</div>
+{{APIRef("Fullscreen API")}}
 
-<p>La méthode <code><strong>Element.requestFullscreen()</strong></code> envoie une requête asynchrone pour que l'élément soit affiché en plein écran.</p>
+La méthode **`Element.requestFullscreen()`** envoie une requête asynchrone pour que l'élément soit affiché en plein écran.
 
-<p>Il n'y a aucune garantie que l'élément passera effectivement en mode plein écran. Si la permission d'entrer en plein écran est acquise, le document recevra un événement {{event("fullscreenchange")}} pour l'informer qu'il est désormais en mode plein écran. Si la permission est refusée, le document recevra un événement {{event('fullscreenerror')}} à la place.</p>
+Il n'y a aucune garantie que l'élément passera effectivement en mode plein écran. Si la permission d'entrer en plein écran est acquise, le document recevra un événement {{event("fullscreenchange")}} pour l'informer qu'il est désormais en mode plein écran. Si la permission est refusée, le document recevra un événement {{event('fullscreenerror')}} à la place.
 
-<p>Cette méthode doit être invoquée par l'interaction d'un utilisateur ou un changement d'orientation du périphérique, sinon elle échouera.</p>
+Cette méthode doit être invoquée par l'interaction d'un utilisateur ou un changement d'orientation du périphérique, sinon elle échouera.
 
-<div class="note">
-<p><strong>Note :</strong> Seuls les éléments présents dans l'espace de noms (namespace) HTML (c'est à dire, les éléments qui font partie du standard HTML), ainsi que les éléments {{HTMLElement("svg")}} et {{HTMLElement("math")}}, qui se trouvent dans le plus haut niveau du document ou dans une {{HTMLElement('iframe')}} avec l'attribut {{htmlattrxref("allowfullscreen", "iframe")}} peuvent être affichés en plein écran. Cela signifie que les éléments se trouvant dans une {{HTMLElement('frame')}} ou un {{HTMLElement('object')}} ne le peuvent pas.</p>
-</div>
+> **Note :** Seuls les éléments présents dans l'espace de noms (namespace) HTML (c'est à dire, les éléments qui font partie du standard HTML), ainsi que les éléments {{HTMLElement("svg")}} et {{HTMLElement("math")}}, qui se trouvent dans le plus haut niveau du document ou dans une {{HTMLElement('iframe')}} avec l'attribut {{htmlattrxref("allowfullscreen", "iframe")}} peuvent être affichés en plein écran. Cela signifie que les éléments se trouvant dans une {{HTMLElement('frame')}} ou un {{HTMLElement('object')}} ne le peuvent pas.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>Element</em>.requestFullscreen();
-</pre>
+    Element.requestFullscreen();
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Avant d'appeler <code>requestFullScreen()</code>, mettez en place des gestionnaires (handlers) pour les évenements  {{event("fullscreenchange")}} et {{event("fullscreenerror")}}, pour savoir lorsque vous avez réussi à passer en mode plein écran (ou lorsque la permission de le faire a été refusée).</p>
+Avant d'appeler `requestFullScreen()`, mettez en place des gestionnaires (handlers) pour les évenements  {{event("fullscreenchange")}} et {{event("fullscreenerror")}}, pour savoir lorsque vous avez réussi à passer en mode plein écran (ou lorsque la permission de le faire a été refusée).
 
-<p>tbd</p>
+tbd
 
-<h2 id="Spécifications">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("Fullscreen", "#dom-element-requestfullscreen", "Element.requestFullScreen()")}}</td>
-   <td>{{Spec2("Fullscreen")}}</td>
-   <td>Initial definition</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                            | Statut                           | Commentaire        |
+| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------ |
+| {{SpecName("Fullscreen", "#dom-element-requestfullscreen", "Element.requestFullScreen()")}} | {{Spec2("Fullscreen")}} | Initial definition |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Element.requestFullscreen")}}</p>
+{{Compat("api.Element.requestFullscreen")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/en-US/docs/Web/API/Fullscreen_API">Full-screen API</a></li>
- <li>{{ domxref("Element.requestFullscreen()") }}</li>
- <li>{{ domxref("Document.exitFullscreen()") }}</li>
- <li>{{ domxref("Document.fullscreen") }}</li>
- <li>{{ domxref("Document.fullscreenElement") }}</li>
- <li>{{ cssxref(":fullscreen") }}</li>
- <li>{{ HTMLAttrXRef("allowfullscreen", "iframe") }}</li>
-</ul>
+- [Full-screen API](/en-US/docs/Web/API/Fullscreen_API)
+- {{ domxref("Element.requestFullscreen()") }}
+- {{ domxref("Document.exitFullscreen()") }}
+- {{ domxref("Document.fullscreen") }}
+- {{ domxref("Document.fullscreenElement") }}
+- {{ cssxref(":fullscreen") }}
+- {{ HTMLAttrXRef("allowfullscreen", "iframe") }}
diff --git a/files/fr/web/api/element/scrollheight/index.md b/files/fr/web/api/element/scrollheight/index.md
index 80bddbcd99..dd8d5f4d78 100644
--- a/files/fr/web/api/element/scrollheight/index.md
+++ b/files/fr/web/api/element/scrollheight/index.md
@@ -3,34 +3,32 @@ title: Element.scrollHeight
 slug: Web/API/Element/scrollHeight
 translation_of: Web/API/Element/scrollHeight
 ---
-<p>{{ ApiRef() }}</p>
+{{ ApiRef() }}
 
-<p>L'attribut en lecture seule <strong><code>element.scrollHeight</code></strong> est une mesure de la hauteur du contenu d'un élément qui inclut le contenu débordant et non visible à l'écran. La valeur <code>scrollHeight</code> est égale à la hauteur minimum dont l'élément aurait besoin pour que le contenu rentre dans le viewpoint sans utiliser de barre de défilement. Cela inclut les marges internes mais pas les marges externes.</p>
+L'attribut en lecture seule **`element.scrollHeight`** est une mesure de la hauteur du contenu d'un élément qui inclut le contenu débordant et non visible à l'écran. La valeur `scrollHeight` est égale à la hauteur minimum dont l'élément aurait besoin pour que le contenu rentre dans le viewpoint sans utiliser de barre de défilement. Cela inclut les marges internes mais pas les marges externes.
 
-<div class="note">
-<p><strong>Note :</strong> Cette propriété arrondit la valeur à l'entier le plus proche. Si vous avez besoin d'une valeur précise, utilisez <a href="/fr/docs/DOM/element.getBoundingClientRect">element.getBoundingClientRect()</a>.</p>
-</div>
+> **Note :** Cette propriété arrondit la valeur à l'entier le plus proche. Si vous avez besoin d'une valeur précise, utilisez [element.getBoundingClientRect()](/fr/docs/DOM/element.getBoundingClientRect).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="eval">var intElemScrollHeight = document.getElementById(id_attribute_value).scrollHeight;
-</pre>
+    var intElemScrollHeight = document.getElementById(id_attribute_value).scrollHeight;
 
-<p><code>intElemScrollHeight</code> est une variable contenant un entier correspondant à la valeur en pixels de la hauteur défilable de l'élément. <code>scrollHeight</code> est une propriété en lecture seule.</p>
+`intElemScrollHeight` est une variable contenant un entier correspondant à la valeur en pixels de la hauteur défilable de l'élément. `scrollHeight` est une propriété en lecture seule.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<h2>Exemple</h2>
+## Exemple
 
-<p>Avec l'évènement {{domxref("GlobalEventHandlers/onscroll", "onscroll")}}, cette équivalence peut s'avérer utile afin de déterminer si un utilisateur a lu du texte ou non (voir aussi les propriétés {{domxref("element.scrollTop")}} et {{domxref("element.clientHeight")}}).</p>
+Avec l'évènement {{domxref("GlobalEventHandlers/onscroll", "onscroll")}}, cette équivalence peut s'avérer utile afin de déterminer si un utilisateur a lu du texte ou non (voir aussi les propriétés {{domxref("element.scrollTop")}} et {{domxref("element.clientHeight")}}).
 
-<p>La case à cocher de la démo est désactivée et ne peut être cochée tant que l'ensemble du contenu n'a pas défilé.</p>
+La case à cocher de la démo est désactivée et ne peut être cochée tant que l'ensemble du contenu n'a pas défilé.
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;form name="registration"&gt;
-  &lt;p&gt;
-    &lt;textarea id="rules"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at laoreet magna.
+```html
+<form name="registration">
+  <p>
+    <textarea id="rules">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at laoreet magna.
 Aliquam erat volutpat. Praesent molestie, dolor ut eleifend aliquam, mi ligula ultrices sapien, quis cursus
 neque dui nec risus. Duis tincidunt lobortis purus eu aliquet. Quisque in dignissim magna. Aenean ac lorem at
 velit ultrices consequat. Nulla luctus nisi ut libero cursus ultrices. Pellentesque nec dignissim enim. Phasellus
@@ -52,18 +50,20 @@ ac mattis congue, quam neque mollis tortor, nec mollis nisl dolor a tortor. Maec
 interdum quis placerat metus posuere. Duis malesuada justo a diam vestibulum vel aliquam nisi ornare. Integer
 laoreet nisi a odio ornare non congue turpis eleifend. Cum sociis natoque penatibus et magnis dis parturient montes,
 nascetur ridiculus mus. Cras vulputate libero sed arcu iaculis nec lobortis orci fermentum.
-    &lt;/textarea&gt;
-  &lt;/p&gt;
-  &lt;p&gt;
-    &lt;input type="checkbox" id="agree" name="accept" /&gt;
-    &lt;label for="agree"&gt;I agree&lt;/label&gt;
-    &lt;input type="submit" id="nextstep" value="Next" /&gt;
-  &lt;/p&gt;
-&lt;/form&gt;</pre>
-
-<h3 id="CSS">CSS</h3>
-
-<pre class="brush: css">#notice {
+    </textarea>
+  </p>
+  <p>
+    <input type="checkbox" id="agree" name="accept" />
+    <label for="agree">I agree</label>
+    <input type="submit" id="nextstep" value="Next" />
+  </p>
+</form>
+```
+
+### CSS
+
+```css
+#notice {
   display: inline-block;
   margin-bottom: 12px;
   border-radius: 5px;
@@ -78,11 +78,13 @@ nascetur ridiculus mus. Cras vulputate libero sed arcu iaculis nec lobortis orci
   padding: 5px;
   border: #2A9F00 solid 2px;
   border-radius: 5px;
-}</pre>
+}
+```
 
-<h3 id="JavaScript">JavaScript</h3>
+### JavaScript
 
-<pre class="brush: js">function checkReading () {
+```js
+function checkReading () {
   if (checkReading.read) {
     return;
   }
@@ -100,28 +102,32 @@ onload = function () {
   oToBeRead.parentNode.insertBefore(document.createElement("br"), oToBeRead);
   oToBeRead.onscroll = checkReading;
   checkReading.call(oToBeRead);
-}</pre>
+}
+```
 
-<h3>Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample('Exemple', '640', '400')}}</p>
+{{EmbedLiveSample('Exemple', '640', '400')}}
 
-<h2 id="Sp.C3.A9cification">Problèmes et solutions</h2>
+## Problèmes et solutions
 
-<h3 id="Déterminer_si_un_élément_a_complètement_été_défilé">Déterminer si un élément a complètement été défilé</h3>
+### Déterminer si un élément a complètement été défilé
 
-<p>L'expression suivante renvoie <code>true</code> si l'élément est à la fin du défilement, <code>false</code> si ça ne l'est pas.</p>
+L'expression suivante renvoie `true` si l'élément est à la fin du défilement, `false` si ça ne l'est pas.
 
-<pre class="brush: js">element.scrollHeight - element.scrollTop === element.clientHeight</pre>
+```js
+element.scrollHeight - element.scrollTop === element.clientHeight
+```
 
-<p>Associée à l'événement <a href="/fr/docs/DOM/element.onscroll">element.onscroll</a>, l'expression peut être utile pour déterminer si un utilisateur a lu un texte ou non (voir aussi les propriétés <a href="/fr/docs/DOM/element.scrollTop">element.scrollTop</a> et <a href="/fr/docs/DOM/element.clientHeight">element.clientHeight</a>. Par exemple :</p>
+Associée à l'événement [element.onscroll](/fr/docs/DOM/element.onscroll), l'expression peut être utile pour déterminer si un utilisateur a lu un texte ou non (voir aussi les propriétés [element.scrollTop](/fr/docs/DOM/element.scrollTop) et [element.clientHeight](/fr/docs/DOM/element.clientHeight). Par exemple :
 
-<pre class="brush: html">&lt;!doctype html&gt;
-&lt;html&gt;
-&lt;head&gt;
-&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
-&lt;title&gt;MDN Example&lt;/title&gt;
-&lt;script type="text/javascript"&gt;
+```html
+<!doctype html>
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<title>MDN Example</title>
+<script type="text/javascript">
 function checkReading () {
   if (checkReading.read) { return; }
   checkReading.read = this.scrollHeight - this.scrollTop === this.clientHeight;
@@ -140,49 +146,28 @@ onload = function () {
   oToBeRead.parentNode.insertBefore(document.createElement("br"), oToBeRead);
   oToBeRead.onscroll = checkReading;
   checkReading.call(oToBeRead);
-}</pre>
-
-<p><a href="/files/4589/readme-example.html">Voir l'exemple en action</a></p>
-
-<h2 id="Sp.C3.A9cification">Spécification</h2>
-
-<p><code>scrollHeight</code> fait partie du modèle objet <abbr>DHTML</abbr> de Microsoft Internet Explorer. Elle fait partie de la spécification : {{ SpecName("CSSOM View") }}.</p>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Navigateur</th>
-   <th scope="col">Version</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>Internet Explorer</td>
-   <td><strong>8.0</strong></td>
-  </tr>
-  <tr>
-   <td>Firefox (Gecko)</td>
-   <td><strong>3.0</strong> (1.9)</td>
-  </tr>
-  <tr>
-   <td>Opera</td>
-   <td>?</td>
-  </tr>
-  <tr>
-   <td>Safari | Chrome | Webkit</td>
-   <td><strong>4.0</strong> | <strong>4.0</strong> | ?</td>
-  </tr>
- </tbody>
-</table>
-
-<p><strong>Dans les versions inférieures à Firefox 21 :</strong> quand le contenu d'un élément ne génère pas de barre de défilement verticale, alors sa propriété <code>scrollHeight</code> est égale à sa propriété <code>clientHeight</code>. Cela signifie soit que le contenu est trop court pour avoir besoin d'une barre de défilement, soit que la propriété CSS<code> {{ cssxref("overflow") }}</code> de l'élément a pour valeur <code>visible</code>.</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="https://docs.microsoft.com/en-us/previous-versions//hh781509(v=vs.85)">MSDN: Measuring Element Dimension and Location with CSSOM in Windows Internet Explorer 9</a></li>
- <li><a href="/fr/docs/DOM/element.clientHeight">element.clientHeight</a></li>
- <li><a href="/fr/docs/DOM/element.offsetHeight">element.offsetHeight</a></li>
-</ul>
+}
+```
+
+[Voir l'exemple en action](/files/4589/readme-example.html)
+
+## Spécification
+
+`scrollHeight` fait partie du modèle objet DHTML de Microsoft Internet Explorer. Elle fait partie de la spécification : {{ SpecName("CSSOM View") }}.
+
+## Compatibilité des navigateurs
+
+| Navigateur                 | Version                 |
+| -------------------------- | ----------------------- |
+| Internet Explorer          | **8.0**                 |
+| Firefox (Gecko)            | **3.0** (1.9)           |
+| Opera                      | ?                       |
+| Safari \| Chrome \| Webkit | **4.0** \| **4.0** \| ? |
+
+**Dans les versions inférieures à Firefox 21 :** quand le contenu d'un élément ne génère pas de barre de défilement verticale, alors sa propriété `scrollHeight` est égale à sa propriété `clientHeight`. Cela signifie soit que le contenu est trop court pour avoir besoin d'une barre de défilement, soit que la propriété CSS` {{ cssxref("overflow") }}` de l'élément a pour valeur `visible`.
+
+## Voir aussi
+
+- [MSDN: Measuring Element Dimension and Location with CSSOM in Windows Internet Explorer 9](<https://docs.microsoft.com/en-us/previous-versions//hh781509(v=vs.85)>)
+- [element.clientHeight](/fr/docs/DOM/element.clientHeight)
+- [element.offsetHeight](/fr/docs/DOM/element.offsetHeight)
diff --git a/files/fr/web/api/element/scrollintoview/index.md b/files/fr/web/api/element/scrollintoview/index.md
index 3dfbb5504a..be1ff265f9 100644
--- a/files/fr/web/api/element/scrollintoview/index.md
+++ b/files/fr/web/api/element/scrollintoview/index.md
@@ -8,74 +8,59 @@ tags:
   - Méthodes
 translation_of: Web/API/Element/scrollIntoView
 ---
-<div>{{ APIRef("DOM")}}{{SeeCompatTable}}</div>
+{{ APIRef("DOM")}}{{SeeCompatTable}}
 
-<p>La méthode <code><strong>Element.scrollIntoView()</strong></code> fait défiler la page de manière à rendre l'élément visible.</p>
+La méthode **`Element.scrollIntoView()`** fait défiler la page de manière à rendre l'élément visible.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">element.scrollIntoView();
-element.scrollIntoView(<var>alignToTop</var>); // Paramètre booléen
-element.scrollIntoView(<var>scrollIntoViewOptions</var>); // Paramètre d'objet
-</pre>
+    element.scrollIntoView();
+    element.scrollIntoView(alignToTop); // Paramètre booléen
+    element.scrollIntoView(scrollIntoViewOptions); // Paramètre d'objet
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>alignToTop</code> {{ optional_inline() }}</dt>
- <dd><p>est une valeur {{jsxref("Boolean")}} optionnelle qui :</p>
- <ul>
-  <li>si elle vaut <code>true</code> (<em>vrai</em>), aligne l'élément avec le haut de la zone visible de l'ancêtre défilable. Correspond à <code>scrollIntoViewOptions: {block: "start", inline: "nearest"}</code>. C'est la valeur par défaut.</li>
-  <li>Si elle vaut <code>false</code> (<em>faux</em>), celui-ci sera aligné en bas de la zone visible de l'ancêtre défilable. Correspond à <code>scrollIntoViewOptions: {block: "end", inline: "nearest"}</code>.</li>
- </ul>
- </dd>
- <dt><code>scrollIntoViewOptions</code> {{optional_inline}} {{experimental_inline}}</dt>
- <dd>Est un objet qui a les propriétés suivantes :</dd>
- <dt><code>behavior</code> {{optional_inline}}</dt>
- <dd>Définit l'animation de transition qui peut être <code>"auto"</code>, <code>"instant"</code> ou <code>"smooth"</code>. Par défaut : <code>"auto"</code>.</dd>
- <dt><code>block</code> {{optional_inline}}</dt>
- <dd>L'une des options  <code>"start"</code>, <code>"center"</code>, <code>"end"</code> ou<code>"nearest"</code>. Par défaut : <code>"center"</code>.</dd>
- <dt><code>inline</code> {{optional_inline}}</dt>
- <dd>L'une des options <code>"start"</code>, <code>"center"</code>, <code>"end"</code> ou <code>"nearest"</code>. Par défaut : <code>"nearest"</code>.</dd>
-</dl>
+- `alignToTop` {{ optional_inline() }}
 
-<h2 id="Exemple">Exemple</h2>
+  - : est une valeur {{jsxref("Boolean")}} optionnelle qui :
 
-<pre class="brush: js">var element = document.getElementById("box");
+    - si elle vaut `true` (_vrai_), aligne l'élément avec le haut de la zone visible de l'ancêtre défilable. Correspond à `scrollIntoViewOptions: {block: "start", inline: "nearest"}`. C'est la valeur par défaut.
+    - Si elle vaut `false` (_faux_), celui-ci sera aligné en bas de la zone visible de l'ancêtre défilable. Correspond à `scrollIntoViewOptions: {block: "end", inline: "nearest"}`.
+
+- `scrollIntoViewOptions` {{optional_inline}} {{experimental_inline}}
+  - : Est un objet qui a les propriétés suivantes :
+- `behavior` {{optional_inline}}
+  - : Définit l'animation de transition qui peut être `"auto"`, `"instant"` ou `"smooth"`. Par défaut : `"auto"`.
+- `block` {{optional_inline}}
+  - : L'une des options  `"start"`, `"center"`, `"end"` ou`"nearest"`. Par défaut : `"center"`.
+- `inline` {{optional_inline}}
+  - : L'une des options `"start"`, `"center"`, `"end"` ou `"nearest"`. Par défaut : `"nearest"`.
+
+## Exemple
+
+```js
+var element = document.getElementById("box");
 
 element.scrollIntoView();
 element.scrollIntoView(false);
 element.scrollIntoView({block: "end"});
 element.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});
-</pre>
+```
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p>L'élément peut ne pas être aligné complètement avec le haut ou le bas, selon la disposition des autres éléments.</p>
+L'élément peut ne pas être aligné complètement avec le haut ou le bas, selon la disposition des autres éléments.
 
-<h2 id="Sp.C3.A9cification">Spécification</h2>
+## Spécification
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th>Spécification</th>
-   <th>Statut</th>
-   <th>Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSSOM View", "#dom-element-scrollintoview", "Element.scrollIntoView()")}}</td>
-   <td>{{Spec2("CSSOM View")}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                    | Statut                           | Commentaire         |
+| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- |
+| {{SpecName("CSSOM View", "#dom-element-scrollintoview", "Element.scrollIntoView()")}} | {{Spec2("CSSOM View")}} | Définition initiale |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Element.scrollIntoView")}}</p>
+{{Compat("api.Element.scrollIntoView")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("Element.scrollIntoViewIfNeeded()")}}<a href="/en-US/docs/Web/API/Element/scrollIntoViewIfNeeded"> </a>{{non-standard_inline}}</li>
-</ul>
+- {{domxref("Element.scrollIntoViewIfNeeded()")}}[ ](/en-US/docs/Web/API/Element/scrollIntoViewIfNeeded){{non-standard_inline}}
diff --git a/files/fr/web/api/element/scrollintoviewifneeded/index.md b/files/fr/web/api/element/scrollintoviewifneeded/index.md
index c03e499120..f869730d60 100644
--- a/files/fr/web/api/element/scrollintoviewifneeded/index.md
+++ b/files/fr/web/api/element/scrollintoviewifneeded/index.md
@@ -8,40 +8,35 @@ tags:
   - Méthodes
 translation_of: Web/API/Element/scrollIntoViewIfNeeded
 ---
-<div>{{APIRef("DOM")}}{{Non-standard_header}}</div>
+{{APIRef("DOM")}}{{Non-standard_header}}
 
-<p>La méthode <code><strong>Element.scrollIntoViewIfNeeded()</strong></code> fait défiler l'élément en cours dans la zone visible de la fenêtre du navigateur s'il n'y est pas déjà. Si l'élément est déjà dans la zone visible de la fenêtre du navigateur, aucun défilement n'a lieu. Cette méthode est une variante propriétaire de la méthode standard <a href="/en-US/docs/Web/API/Element/scrollIntoView"><code>Element.scrollIntoView()</code></a>.</p>
+La méthode **`Element.scrollIntoViewIfNeeded()`** fait défiler l'élément en cours dans la zone visible de la fenêtre du navigateur s'il n'y est pas déjà. Si l'élément est déjà dans la zone visible de la fenêtre du navigateur, aucun défilement n'a lieu. Cette méthode est une variante propriétaire de la méthode standard [`Element.scrollIntoView()`](/en-US/docs/Web/API/Element/scrollIntoView).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>À faire.</p>
+À faire.
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><em><code>opt_center</code></em></dt>
- <dd>Est une valeur {{jsxref("Boolean")}} facultative avec la valeur <code>true</code> par défaut :
- <ul>
-  <li>Si <code>true</code> (<em>vrai</em>), l'élément sera aligné sur le centre de la zone visible de l'ancêtre défilable.</li>
-  <li>Si <code>false</code> (<em>faux</em>), l'élément sera aligné sur le bord le plus proche de la zone visible de l'ancêtre défilable. Selon le bord de la zone visible le plus proche de l'élément, soit le haut de l'élément sera aligné sur le bord supérieur de la zone visible, soit le bord inférieur de l'élément sera aligné sur le bord inférieur de la zone visible .</li>
- </ul>
- </dd>
-</dl>
+- _`opt_center`_
 
-<h2 id="Exemple">Exemple</h2>
+  - : Est une valeur {{jsxref("Boolean")}} facultative avec la valeur `true` par défaut :
 
-<p>À faire</p>
+    - Si `true` (_vrai_), l'élément sera aligné sur le centre de la zone visible de l'ancêtre défilable.
+    - Si `false` (_faux_), l'élément sera aligné sur le bord le plus proche de la zone visible de l'ancêtre défilable. Selon le bord de la zone visible le plus proche de l'élément, soit le haut de l'élément sera aligné sur le bord supérieur de la zone visible, soit le bord inférieur de l'élément sera aligné sur le bord inférieur de la zone visible .
 
-<h2 id="Spécifications">Spécifications</h2>
+## Exemple
 
-<p>Ne fait partie d'aucune spécification. C'est une méthode propriétaire propre à WebKit.</p>
+À faire
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Spécifications
 
-<p>{{Compat("api.Element.scrollIntoViewIfNeeded")}}</p>
+Ne fait partie d'aucune spécification. C'est une méthode propriétaire propre à WebKit.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Compatibilité des navigateurs
 
-<ul>
- <li><a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=17152">W3C CSSOM bug 17152 : Support centrant un élément lors du défilement dans la vue.</a> (demande de fonctionnalité pour un équivalent standardisé à <code>scrollIntoViewIfNeeded</code>)</li>
-</ul>
+{{Compat("api.Element.scrollIntoViewIfNeeded")}}
+
+## Voir aussi
+
+- [W3C CSSOM bug 17152 : Support centrant un élément lors du défilement dans la vue.](https://www.w3.org/Bugs/Public/show_bug.cgi?id=17152) (demande de fonctionnalité pour un équivalent standardisé à `scrollIntoViewIfNeeded`)
diff --git a/files/fr/web/api/element/scrollleft/index.md b/files/fr/web/api/element/scrollleft/index.md
index 1d408aae3c..115f89a128 100644
--- a/files/fr/web/api/element/scrollleft/index.md
+++ b/files/fr/web/api/element/scrollleft/index.md
@@ -6,64 +6,59 @@ tags:
   - DOM_0
 translation_of: Web/API/Element/scrollLeft
 ---
-<p>{{ ApiRef() }}</p>
+{{ ApiRef() }}
 
-<h3 id="R.C3.A9sum.C3.A9">Résumé</h3>
+### Résumé
 
-<p>Définit ou obtient le nombre de pixels dont le contenu est défilé vers la gauche.</p>
+Définit ou obtient le nombre de pixels dont le contenu est défilé vers la gauche.
 
-<h3 id="Syntaxe">Syntaxe</h3>
+### Syntaxe
 
-<pre class="eval">// Obtient le nombre de pixels défilés
-var <var>sLeft</var> = <var>element</var>.scrollLeft;
-</pre>
+    // Obtient le nombre de pixels défilés
+    var sLeft = element.scrollLeft;
 
-<p><var>sLeft</var> est un entier représentant le nombre de pixels dont <var>element</var> a été défilé vers la gauche.</p>
+_sLeft_ est un entier représentant le nombre de pixels dont _element_ a été défilé vers la gauche.
 
-<pre class="eval">// Définit le nombre de pixels défilés
-<var>element</var>.scrollLeft = 10;
-</pre>
+    // Définit le nombre de pixels défilés
+    element.scrollLeft = 10;
 
-<p><strong>scrollLeft</strong> peut être n'importe quelle valeur entière, cependant :</p>
+**scrollLeft** peut être n'importe quelle valeur entière, cependant :
 
-<ul>
- <li>Si l'élément ne peut pas défiler (par exemple parce qu'il ne déborde pas), <code>scrollLeft</code> est mis à 0.</li>
- <li>S'il reçoit une valeur inférieure à 0, <code>scrollLeft</code> est mis à 0.</li>
- <li>S'il reçoit une valeur plus grande que le maximum dont le contenu peut défiler, <code>scrollLeft</code> est mis au maximum.</li>
-</ul>
+- Si l'élément ne peut pas défiler (par exemple parce qu'il ne déborde pas), `scrollLeft` est mis à 0.
+- S'il reçoit une valeur inférieure à 0, `scrollLeft` est mis à 0.
+- S'il reçoit une valeur plus grande que le maximum dont le contenu peut défiler, `scrollLeft` est mis au maximum.
 
-<h3 id="Exemple">Exemple</h3>
+### Exemple
 
-<pre class="brush: html">&lt;script type="text/javascript"&gt;
+```html
+<script type="text/javascript">
 
 function doScrollLeft(el, p)
 {
   el.scrollLeft = p;
 }
 
-&lt;/script&gt;
+</script>
 
-&lt;div id="aDiv"
+<div id="aDiv"
      style="width: 100px; height: 200px; overflow: auto;"
-&gt;
-&lt;script type="text/javascript"&gt;
-for (var i=0; i&lt;100; ++i){
-  document.write(i + '-FooBar-FooBar-FooBar&lt;br&gt;');
+>
+<script type="text/javascript">
+for (var i=0; i<100; ++i){
+  document.write(i + '-FooBar-FooBar-FooBar<br>');
 }
-&lt;/script&gt;
-&lt;/div&gt;
-&lt;br&gt;
-&lt;input type="button" value="Défile de 50 pixels"
+</script>
+</div>
+<br>
+<input type="button" value="Défile de 50 pixels"
        onclick="doScrollLeft(document.getElementById('aDiv'), 50);"
-&gt;
-</pre>
+>
+```
 
-<h3 id="Sp.C3.A9cification">Spécification</h3>
+### Spécification
 
-<p>{{ DOM0() }}</p>
+{{ DOM0() }}
 
-<h3 id="R.C3.A9f.C3.A9rences">Références</h3>
+### Références
 
-<ul>
- <li><a href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/scrollleft.asp"><em>scrollLeft</em> sur MSDN</a></li>
-</ul>
\ No newline at end of file
+- [_scrollLeft_ sur MSDN](http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/scrollleft.asp)
diff --git a/files/fr/web/api/element/scrollleftmax/index.md b/files/fr/web/api/element/scrollleftmax/index.md
index cbf25a3745..fa23a3f747 100644
--- a/files/fr/web/api/element/scrollleftmax/index.md
+++ b/files/fr/web/api/element/scrollleftmax/index.md
@@ -3,24 +3,22 @@ title: Element.scrollLeftMax
 slug: Web/API/Element/scrollLeftMax
 translation_of: Web/API/Element/scrollLeftMax
 ---
-<p>{{APIRef("DOM")}}{{Non-standard_header}}</p>
+{{APIRef("DOM")}}{{Non-standard_header}}
 
-<p>La propriété non modifiable  <code><strong>Element.scrollLeftMax</strong></code> renvoie un  {{jsxref("Number")}} représentant la distance restante de défilement vers la gauche de l'élément.</p>
+La propriété non modifiable  **`Element.scrollLeftMax`** renvoie un  {{jsxref("Number")}} représentant la distance restante de défilement vers la gauche de l'élément.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre>var <em>pxl</em> = <em>elt</em>.scrollLeftMax;</pre>
+    var pxl = elt.scrollLeftMax;
 
-<h2 id="Specifications">Spécifications</h2>
+## Spécifications
 
-<p><em>Cette propriété ne fait partie d'aucune spécification.</em></p>
+_Cette propriété ne fait partie d'aucune spécification._
 
-<h2 id="Browser_compatibility" >Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Element.scrollLeftMax")}}</p>
+{{Compat("api.Element.scrollLeftMax")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("Element.scrollTopMax")}} renvoie la distance restante de défilement vers le haut de l'élément.</li>
-</ul>
+- {{domxref("Element.scrollTopMax")}} renvoie la distance restante de défilement vers le haut de l'élément.
diff --git a/files/fr/web/api/element/scrollto/index.md b/files/fr/web/api/element/scrollto/index.md
index ba30e5fecb..0cb509a946 100644
--- a/files/fr/web/api/element/scrollto/index.md
+++ b/files/fr/web/api/element/scrollto/index.md
@@ -9,70 +9,53 @@ tags:
   - scrollTo
 translation_of: Web/API/Element/scrollTo
 ---
-<div>{{ APIRef }}</div>
+{{ APIRef }}
 
-<p>La méthode <code><strong>scrollTo()</strong></code><strong> </strong>de l'interface {{domxref("Element")}} permet de faire défiler le document jusqu'à un jeu de coordonnées particulier.</p>
+La méthode **`scrollTo()`\*\*** \*\*de l'interface {{domxref("Element")}} permet de faire défiler le document jusqu'à un jeu de coordonnées particulier.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">element.scrollTo(<em>x-coord</em>, <em>y-coord</em>)
-element.scrollTo(<em>options</em>)
-</pre>
+    element.scrollTo(x-coord, y-coord)
+    element.scrollTo(options)
 
-<h3 id="Parameters">Paramètres</h3>
+### Paramètres
 
-<ul>
- <li><code>x-coord</code> est le pixel le long de l'axe horizontal du document qui doit être affiché en haut à gauche.</li>
- <li><code>y-coord</code> est le pixel le long de l'axe vertical du document qui doit être affiché en haut à gauche.</li>
-</ul>
+- `x-coord` est le pixel le long de l'axe horizontal du document qui doit être affiché en haut à gauche.
+- `y-coord` est le pixel le long de l'axe vertical du document qui doit être affiché en haut à gauche.
 
-<p>- ou -</p>
+\- ou -
 
-<ul>
- <li><code>options</code> est un dictionnaire de type {{domxref("ScrollToOptions")}}.</li>
-</ul>
+- `options` est un dictionnaire de type {{domxref("ScrollToOptions")}}.
 
-<h2 id="Example">Exemples</h2>
+## Exemples
 
-<p>En utilisant des coordonnées :</p>
+En utilisant des coordonnées :
 
-<pre class="brush:js">element.scrollTo(0, 1000);
-</pre>
+```js
+element.scrollTo(0, 1000);
+```
 
-<p>Ou en utilisant <code>options</code> :</p>
+Ou en utilisant `options` :
 
-<pre class="brush: js">element.scrollTo({
+```js
+element.scrollTo({
   top: 100,
   left: 100,
   behavior: 'smooth'
-});</pre>
-
-<h2 id="Specifications">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('CSSOM View', '#dom-element-scrollto-options-options', 'element.scrollTo()') }}</td>
-   <td>{{ Spec2('CSSOM View') }}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Element.scrollTo")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("Element.scrollTop")}}, {{domxref("Element.scrollLeft")}}</li>
- <li>{{domxref("Window.scrollTo()")}}</li>
-</ul>
+});
+```
+
+## Spécifications
+
+| Spécification                                                                                                            | Statut                           | Commentaire          |
+| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- |
+| {{ SpecName('CSSOM View', '#dom-element-scrollto-options-options', 'element.scrollTo()') }} | {{ Spec2('CSSOM View') }} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Element.scrollTo")}}
+
+## Voir aussi
+
+- {{domxref("Element.scrollTop")}}, {{domxref("Element.scrollLeft")}}
+- {{domxref("Window.scrollTo()")}}
diff --git a/files/fr/web/api/element/scrolltop/index.md b/files/fr/web/api/element/scrolltop/index.md
index 4b3d0ef24b..dc72baf8f8 100644
--- a/files/fr/web/api/element/scrolltop/index.md
+++ b/files/fr/web/api/element/scrolltop/index.md
@@ -8,51 +8,52 @@ tags:
   - Reference
 translation_of: Web/API/Element/scrollTop
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p>La propriété <code><strong>Element.scrollTop</strong></code> permet d'obtenir ou de définir le nombre de pixels sur lesquels le contenu a défilé verticalement.</p>
+La propriété **`Element.scrollTop`** permet d'obtenir ou de définir le nombre de pixels sur lesquels le contenu a défilé verticalement.
 
-<p>La valeur <code>scrollTop</code> d'un élément correspond à la distance entre le haut de l'élément et la partie la plus haute de son contenu visible. Lorsque le contenu d'un élément n'entraîne pas la création d'une barre de défilement verticale, la valeur de <code>scrollTop</code> est <code>0</code>.</p>
+La valeur `scrollTop` d'un élément correspond à la distance entre le haut de l'élément et la partie la plus haute de son contenu visible. Lorsque le contenu d'un élément n'entraîne pas la création d'une barre de défilement verticale, la valeur de `scrollTop` est `0`.
 
-<p>Lorsque <code>scrollTop</code> est utilisé sur l'élément racine (c'est-à-dire l'élément <code>&lt;html&gt;</code>), c'est la valeur de <code>scrollY</code> pour la fenêtre qui est renvoyée. <a href="https://www.w3.org/TR/2016/WD-cssom-view-1-20160317/#dom-element-scrolltop">Il s'agit d'un cas aux limites pour <code>scrollTop</code></a>.</p>
+Lorsque `scrollTop` est utilisé sur l'élément racine (c'est-à-dire l'élément `<html>`), c'est la valeur de `scrollY` pour la fenêtre qui est renvoyée. [Il s'agit d'un cas aux limites pour `scrollTop`](https://www.w3.org/TR/2016/WD-cssom-view-1-20160317/#dom-element-scrolltop).
 
-<div class="warning">
-<p><strong>Attention :</strong> Pour les systèmes qui utilisent un affichage mis à l'échelle (<i>display scaling</i>), <code>scrollTop</code> peut fournir une valeur décimale.</p>
-</div>
+> **Attention :** Pour les systèmes qui utilisent un affichage mis à l'échelle (_display scaling_), `scrollTop` peut fournir une valeur décimale.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">// Obtenir le nombre de pixels qui ont défilé.
-var <var>intElemScrollTop</var> = someElement.scrollTop;
-</pre>
+```js
+// Obtenir le nombre de pixels qui ont défilé.
+var intElemScrollTop = someElement.scrollTop;
+```
 
-<p>Après avoir exécuté le code ci-dessus, <code>intElemScrollTop</code> sera un entier correspondant au nombre de pixels pour lesquels le contenu de l'élément a défilé vers le haut.</p>
+Après avoir exécuté le code ci-dessus, `intElemScrollTop` sera un entier correspondant au nombre de pixels pour lesquels le contenu de l'élément a défilé vers le haut.
 
-<pre class="brush: js">// Définir le nombre de pixels à faire défiler.
-<var>element</var>.scrollTop = <var>intValue</var>;
-</pre>
+```js
+// Définir le nombre de pixels à faire défiler.
+element.scrollTop = intValue;
+```
 
-<p><code>scrollTop</code> peut être défini avec n'importe quelle valeur entière. Cependant :</p>
+`scrollTop` peut être défini avec n'importe quelle valeur entière. Cependant :
 
-<ul>
- <li>S'il n'est pas possible de faire défiler l'élément (s'il ne dépasse d'aucune façon ou si une de ses propriétés le fixe ainsi), <code>scrollTop</code> vaudra toujours <code>0</code>.</li>
- <li><code>scrollTop</code> ne permet pas d'utiliser des valeurs négatives. Il revient à <code>0</code>.</li>
- <li>Si la valeur utilisée est supérieure à la valeur maximale possible pour l'élément, <code>scrollTop</code> prendra cette valeur maximale possible.</li>
-</ul>
+- S'il n'est pas possible de faire défiler l'élément (s'il ne dépasse d'aucune façon ou si une de ses propriétés le fixe ainsi), `scrollTop` vaudra toujours `0`.
+- `scrollTop` ne permet pas d'utiliser des valeurs négatives. Il revient à `0`.
+- Si la valeur utilisée est supérieure à la valeur maximale possible pour l'élément, `scrollTop` prendra cette valeur maximale possible.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div id="container"&gt;
-  &lt;div id="content"&gt;Utilisez le bouton :) Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore harum adipisci earum placeat itaque, minima neque ipsam, incidunt corporis quod magnam corrupti, ut fugiat beatae quis dolor. Nisi, distinctio repellat!! Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore harum adipisci earum placeat itaque, minima neque ipsam, incidunt corporis quod magnam corrupti, ut fugiat beatae quis dolor. Nisi, distinctio repellat!! Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore harum adipisci earum placeat itaque, minima neque ipsam, incidunt corporis quod magnam corrupti, ut fugiat beatae quis dolor. Nisi, distinctio repellat!! Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore harum adipisci earum placeat itaque, minima neque ipsam, incidunt corporis quod magnam corrupti, ut fugiat beatae quis dolor. Nisi, distinctio repellat!! Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore harum adipisci earum placeat itaque, minima neque ipsam, incidunt corporis quod magnam corrupti, ut fugiat beatae quis dolor. Nisi, distinctio repellat!! Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore harum adipisci earum placeat itaque, minima neque ipsam, incidunt corporis quod magnam corrupti, ut fugiat beatae quis dolor. Nisi, distinctio repellat!!&lt;/div&gt;
-&lt;/div&gt;
+```html
+<div id="container">
+  <div id="content">Utilisez le bouton :) Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore harum adipisci earum placeat itaque, minima neque ipsam, incidunt corporis quod magnam corrupti, ut fugiat beatae quis dolor. Nisi, distinctio repellat!! Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore harum adipisci earum placeat itaque, minima neque ipsam, incidunt corporis quod magnam corrupti, ut fugiat beatae quis dolor. Nisi, distinctio repellat!! Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore harum adipisci earum placeat itaque, minima neque ipsam, incidunt corporis quod magnam corrupti, ut fugiat beatae quis dolor. Nisi, distinctio repellat!! Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore harum adipisci earum placeat itaque, minima neque ipsam, incidunt corporis quod magnam corrupti, ut fugiat beatae quis dolor. Nisi, distinctio repellat!! Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore harum adipisci earum placeat itaque, minima neque ipsam, incidunt corporis quod magnam corrupti, ut fugiat beatae quis dolor. Nisi, distinctio repellat!! Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore harum adipisci earum placeat itaque, minima neque ipsam, incidunt corporis quod magnam corrupti, ut fugiat beatae quis dolor. Nisi, distinctio repellat!!</div>
+</div>
 
-&lt;button id="slide" type="button"&gt;Défilez vers le bas&lt;/button&gt;</pre>
+<button id="slide" type="button">Défilez vers le bas</button>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">#container {
+```css
+#container {
   height: 100px;
   border: 1px solid #ccc;
   overflow-y: scroll;
@@ -60,47 +61,34 @@ var <var>intElemScrollTop</var> = someElement.scrollTop;
 
 #content {
   background-color: #ccc;
-}</pre>
+}
+```
 
-<h3 id="JavaScript">JavaScript</h3>
+### JavaScript
 
-<pre class="brush: js">const button = document.getElementById('slide');
+```js
+const button = document.getElementById('slide');
 
 button.onclick = function () {
   document.getElementById('container').scrollTop += 20;
-};</pre>
-
-<h3 id="Result">Résultat</h3>
+};
+```
 
-<p>{{EmbedLiveSample("Example")}}</p>
+### Résultat
 
+{{EmbedLiveSample("Example")}}
 
-<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('CSSOM View', '#dom-element-scrolltop', 'scrollTop')}}</td>
-   <td>{{Spec2("CSSOM View")}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                            | Statut                           | Commentaire |
+| ---------------------------------------------------------------------------------------- | -------------------------------- | ----------- |
+| {{SpecName('CSSOM View', '#dom-element-scrolltop', 'scrollTop')}} | {{Spec2("CSSOM View")}} |             |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Element.scrollTop")}}</p>
+{{Compat("api.Element.scrollTop")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/API/Element/scrollLeft"><code>Element.scrollLeft</code></a></li>
- <li><a href="/fr/docs/Web/API/Element/scrollTo"><code>Element.scrollTo()</code></a></li>
-</ul>
+- [`Element.scrollLeft`](/fr/docs/Web/API/Element/scrollLeft)
+- [`Element.scrollTo()`](/fr/docs/Web/API/Element/scrollTo)
diff --git a/files/fr/web/api/element/scrollwidth/index.md b/files/fr/web/api/element/scrollwidth/index.md
index 9297b2f417..f14babcee9 100644
--- a/files/fr/web/api/element/scrollwidth/index.md
+++ b/files/fr/web/api/element/scrollwidth/index.md
@@ -5,28 +5,34 @@ tags:
   - Référence_du_DOM_Gecko
 translation_of: Web/API/Element/scrollWidth
 ---
-<p>{{ ApiRef() }}</p>
-<h3 id="R.C3.A9sum.C3.A9">Résumé</h3>
-<p><b>scrollWidth</b> est une propriété en lecture seule qui renvoie, parmi la largeur en pixels du contenu d'un élément, et la largeur de l'élément, celle qui est la plus grande.</p>
-<h3 id="Syntaxe">Syntaxe</h3>
-<pre class="eval">var <var>xScrollWidth</var> = <var>element</var>.scrollWidth;
-</pre>
-<p><var>xScrollWidth</var> est la largeur du contenu d'<var>element</var> en pixels.</p>
-<h3 id="Exemple">Exemple</h3>
-<pre>&lt;div id="aDiv"
-     style="width: 100px; height: 200px; overflow: auto;"
-&gt;-FooBar-FooBar-FooBar&lt;/div&gt;
-&lt;br&gt;
-&lt;input type="button" value="Show scrollWidth"
-       onclick="alert(document.getElementById('aDiv').scrollWidth);"&gt;
-</pre>
-<h3 id="Sp.C3.A9cification">Spécification</h3>
-<p>Il n'y a pas de spécification du W3C pour <b>scrollWidth</b>.</p>
-<p>Un brouillon de l'éditeur existe cependant : <a href="http://dev.w3.org/cvsweb/~checkout~/csswg/cssom/Overview.src.html">Cascading Style Sheets Object Model (CSSOM)</a></p>
-<h3 id="R.C3.A9f.C3.A9rences">Références</h3>
-<ul>
- <li><a href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/scrollwidth.asp">
-  <i>
-   scrollWidth</i>
-  sur MSDN</a></li>
-</ul>
\ No newline at end of file
+{{ ApiRef() }}
+
+### Résumé
+
+**scrollWidth** est une propriété en lecture seule qui renvoie, parmi la largeur en pixels du contenu d'un élément, et la largeur de l'élément, celle qui est la plus grande.
+
+### Syntaxe
+
+    var xScrollWidth = element.scrollWidth;
+
+_xScrollWidth_ est la largeur du contenu d'_element_ en pixels.
+
+### Exemple
+
+    <div id="aDiv"
+         style="width: 100px; height: 200px; overflow: auto;"
+    >-FooBar-FooBar-FooBar</div>
+    <br>
+    <input type="button" value="Show scrollWidth"
+           onclick="alert(document.getElementById('aDiv').scrollWidth);">
+
+### Spécification
+
+Il n'y a pas de spécification du W3C pour **scrollWidth**.
+
+Un brouillon de l'éditeur existe cependant : [Cascading Style Sheets Object Model (CSSOM)](http://dev.w3.org/cvsweb/~checkout~/csswg/cssom/Overview.src.html)
+
+### Références
+
+- [_scrollWidth_
+  sur MSDN](http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/scrollwidth.asp)
diff --git a/files/fr/web/api/element/select_event/index.md b/files/fr/web/api/element/select_event/index.md
index f0be06d15b..064db39bed 100644
--- a/files/fr/web/api/element/select_event/index.md
+++ b/files/fr/web/api/element/select_event/index.md
@@ -3,75 +3,42 @@ title: select
 slug: Web/API/Element/select_event
 translation_of: Web/API/Element/select_event
 ---
-<p>L'évènement <code>select</code> est déclenché quand du texte est sélectionné. L'évènement peut ne pas être disponible pour tous les éléments dans tous les langages. Par exemple, en <a href="http://www.w3.org/TR/DOM-Level-3-Events/#references-HTML5">HTML5</a>, les évènements select ne peuvent être envoyés que sur des éléments <code>input</code> de formulaire et <code>textarea</code>.</p>
+L'évènement `select` est déclenché quand du texte est sélectionné. L'évènement peut ne pas être disponible pour tous les éléments dans tous les langages. Par exemple, en [HTML5](http://www.w3.org/TR/DOM-Level-3-Events/#references-HTML5), les évènements select ne peuvent être envoyés que sur des éléments `input` de formulaire et `textarea`.
 
-<h2 id="Info_générale">Info générale</h2>
+## Info générale
 
-<dl>
- <dt>Spécification</dt>
- <dd><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-select">DOM L3</a></dd>
- <dt>Interface</dt>
- <dd>UIEvent si généré depuis une interface utilisateur, Event sinon.</dd>
- <dt>Remonte</dt>
- <dd>Oui</dd>
- <dt>Annulable</dt>
- <dd>Non</dd>
- <dt>Cible</dt>
- <dd>Élément</dd>
- <dt>Action par Défault</dt>
- <dd>Aucune</dd>
-</dl>
+- Spécification
+  - : [DOM L3](http://www.w3.org/TR/DOM-Level-3-Events/#event-type-select)
+- Interface
+  - : UIEvent si généré depuis une interface utilisateur, Event sinon.
+- Remonte
+  - : Oui
+- Annulable
+  - : Non
+- Cible
+  - : Élément
+- Action par Défault
+  - : Aucune
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Property</th>
-   <th scope="col">Type</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>target</code> {{readonlyInline}}</td>
-   <td><a href="/en-US/docs/Web/API/EventTarget"><code>EventTarget</code></a></td>
-   <td>The event target (the topmost target in the DOM tree).</td>
-  </tr>
-  <tr>
-   <td><code>type</code> {{readonlyInline}}</td>
-   <td><a href="/en-US/docs/Web/API/DOMString"><code>DOMString</code></a></td>
-   <td>The type of event.</td>
-  </tr>
-  <tr>
-   <td><code>bubbles</code> {{readonlyInline}}</td>
-   <td><a href="/en-US/docs/Web/API/Boolean"><code>Boolean</code></a></td>
-   <td>Whether the event normally bubbles or not.</td>
-  </tr>
-  <tr>
-   <td><code>cancelable</code> {{readonlyInline}}</td>
-   <td><a href="/en-US/docs/Web/API/Boolean"><code>Boolean</code></a></td>
-   <td>Whether the event is cancellable or not.</td>
-  </tr>
-  <tr>
-   <td><code>view</code> {{readonlyInline}}</td>
-   <td><a href="/en-US/docs/Web/API/WindowProxy" rel="nofollow"><code>WindowProxy</code></a></td>
-   <td><a href="/en-US/docs/Web/API/Document/defaultView"><code>document.defaultView</code></a> (<code>window</code> of the document)</td>
-  </tr>
-  <tr>
-   <td><code>detail</code> {{readonlyInline}}</td>
-   <td><code>long</code> (<code>float</code>)</td>
-   <td>0.</td>
-  </tr>
- </tbody>
-</table>
+| Property                              | Type                                             | Description                                                                                   |
+| ------------------------------------- | ------------------------------------------------ | --------------------------------------------------------------------------------------------- |
+| `target` {{readonlyInline}}     | [`EventTarget`](/en-US/docs/Web/API/EventTarget) | The event target (the topmost target in the DOM tree).                                        |
+| `type` {{readonlyInline}}       | [`DOMString`](/en-US/docs/Web/API/DOMString)     | The type of event.                                                                            |
+| `bubbles` {{readonlyInline}}    | [`Boolean`](/en-US/docs/Web/API/Boolean)         | Whether the event normally bubbles or not.                                                    |
+| `cancelable` {{readonlyInline}} | [`Boolean`](/en-US/docs/Web/API/Boolean)         | Whether the event is cancellable or not.                                                      |
+| `view` {{readonlyInline}}       | [`WindowProxy`](/en-US/docs/Web/API/WindowProxy) | [`document.defaultView`](/en-US/docs/Web/API/Document/defaultView) (`window` of the document) |
+| `detail` {{readonlyInline}}     | `long` (`float`)                                 | 0.                                                                                            |
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush: html">&lt;input id="test" type="text" value="Sélectionnez-moi !" /&gt;
-&lt;script&gt;
+```html
+<input id="test" type="text" value="Sélectionnez-moi !" />
+<script>
   var elem = document.getElementById('test');
   elem.addEventListener('select', function() {
     alert('La sélection a changé !');
   }, false);
-&lt;/script&gt;</pre>
+</script>
+```
diff --git a/files/fr/web/api/element/setattribute/index.md b/files/fr/web/api/element/setattribute/index.md
index 2633e74e6b..ffd46a3092 100644
--- a/files/fr/web/api/element/setattribute/index.md
+++ b/files/fr/web/api/element/setattribute/index.md
@@ -9,76 +9,71 @@ tags:
   - Méthode
 translation_of: Web/API/Element/setAttribute
 ---
-<p>{{APIRef("DOM")}}</p>
+{{APIRef("DOM")}}
 
-<p>Ajoute un nouvel attribut ou change la valeur d'un attribut existant pour l'élément spécifié. Si l'attribut existe déjà, la valeur est mise à jour ; sinon, un nouvel attribut est ajouté avec le nom et la valeur spécifiés.</p>
+Ajoute un nouvel attribut ou change la valeur d'un attribut existant pour l'élément spécifié. Si l'attribut existe déjà, la valeur est mise à jour ; sinon, un nouvel attribut est ajouté avec le nom et la valeur spécifiés.
 
-<p>Pour obtenir la valeur actuelle d'un attribut, utilisez {{domxref("Element.getAttribute", "getAttribute()")}} ; pour supprimer un attribut, appelez {{domxref("Element.removeAttribute", "removeAttribute()")}}.</p>
+Pour obtenir la valeur actuelle d'un attribut, utilisez {{domxref("Element.getAttribute", "getAttribute()")}} ; pour supprimer un attribut, appelez {{domxref("Element.removeAttribute", "removeAttribute()")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>Element</em>.setAttribute(<em>name</em>, <em>value</em>);
-</pre>
+    Element.setAttribute(name, value);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>name</code></dt>
- <dd>Une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) spécifiant le nom de l'attribut pour lequel la valeur doit être définie. L'attribut name est automatiquement converti en minuscules quand <code>setAttribute()</code> est appelé sur un élément HTML dans document HTML.</dd>
- <dt><code>value</code></dt>
- <dd>une {{domxref("DOMString")}} contenant la valeur à affecter à l'attribut. Toute valeur spécifiée qui n'est pas une chaîne de caractères, est convertie automatiquement en chaîne.</dd>
-</dl>
+- `name`
+  - : Une {{domxref("DOMString")}} (_chaîne de caractères_) spécifiant le nom de l'attribut pour lequel la valeur doit être définie. L'attribut name est automatiquement converti en minuscules quand `setAttribute()` est appelé sur un élément HTML dans document HTML.
+- `value`
+  - : une {{domxref("DOMString")}} contenant la valeur à affecter à l'attribut. Toute valeur spécifiée qui n'est pas une chaîne de caractères, est convertie automatiquement en chaîne.
 
-<p>Les attributs booléens sont considérés être <code>true</code> (<em>vrai</em>) s'ils sont présents sur l'élément, quelle que soit leur valeur réelle ; en règle générale, vous devez spécifier la chaîne vide (<code>""</code>) dans <code>value</code> (certains utilisent le nom de l'attribut, mais ce fonctionnement n'est pas standard). Voir l' {{anch("Exemple", "exemple")}} ce-dessous pour une démonstration pratique.</p>
+Les attributs booléens sont considérés être `true` (_vrai_) s'ils sont présents sur l'élément, quelle que soit leur valeur réelle ; en règle générale, vous devez spécifier la chaîne vide (`""`) dans `value` (certains utilisent le nom de l'attribut, mais ce fonctionnement n'est pas standard). Voir l' {{anch("Exemple", "exemple")}} ce-dessous pour une démonstration pratique.
 
-<p>Puisque la valeur spécifiée est convertie en chaîne, spécifier <code>null</code> ne fait pas nécessairement ce que vous attendez. Au lieu de supprimer l'attribut ou de définir sa valeur comme {{jsxref("null")}} , il définit à la place la valeur de l'attribut avec la chaîne "null". Si vous souhaitez supprimer un attribut, appelez {{domxref("Element.removeAttribute","removeAttribute()")}}.</p>
+Puisque la valeur spécifiée est convertie en chaîne, spécifier `null` ne fait pas nécessairement ce que vous attendez. Au lieu de supprimer l'attribut ou de définir sa valeur comme {{jsxref("null")}} , il définit à la place la valeur de l'attribut avec la chaîne "null". Si vous souhaitez supprimer un attribut, appelez {{domxref("Element.removeAttribute","removeAttribute()")}}.
 
-<h3 id="Valeur_retournée">Valeur retournée</h3>
+### Valeur retournée
 
-<p>{{jsxref("undefined")}}.</p>
+{{jsxref("undefined")}}.
 
-<h3 id="Exceptions">Exceptions</h3>
+### Exceptions
 
-<dl>
- <dt><code>InvalidCharacterError</code></dt>
- <dd>Le nom d'attribut spécifié contient un ou plusieurs caractères qui ne sont pas valides dans les noms d'attribut.</dd>
-</dl>
+- `InvalidCharacterError`
+  - : Le nom d'attribut spécifié contient un ou plusieurs caractères qui ne sont pas valides dans les noms d'attribut.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Dans l'exemple suivant, <code>setAttribute()</code> est utilisé pour définir des attributs sur un {{HTMLElement("button")}} (<em>bouton</em>).</p>
+Dans l'exemple suivant, `setAttribute()` est utilisé pour définir des attributs sur un {{HTMLElement("button")}} (_bouton_).
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;button&gt;Hello World&lt;/button&gt;</pre>
+```html
+<button>Hello World</button>
+```
 
-<h3 id="JavaScript">JavaScript</h3>
+### JavaScript
 
-<pre class="brush:js">var b = document.querySelector("button");
+```js
+var b = document.querySelector("button");
 
 b.setAttribute("name", "helloButton");
-b.setAttribute("disabled", "");</pre>
+b.setAttribute("disabled", "");
+```
 
-<p>Ceci démontre 2 choses :</p>
+Ceci démontre 2 choses :
 
-<ul>
- <li>le premier appel de <code>setAttribute()</code> ci-dessus montre la modification de la valeur de l'attribut <code>name</code> en "helloButton". Vous pouvez le voir en utilisant l'inspecteur de page de votre navigateur (<a href="https://developers.google.com/web/tools/chrome-devtools/inspect-styles">Chrome</a>, <a href="https://docs.microsoft.com/en-us/microsoft-edge/f12-devtools-guide/dom-explorer">Edge</a>, <a href="/en-US/docs/Tools/Page_Inspector">Firefox</a>, <a href="https://developer.apple.com/library/content/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Introduction/Introduction.html">Safari</a>).</li>
- <li>Pour définir la valeur d'un attribut booléen, tel que <code>disabled</code>, vous pouvez spécifier n'importe quelle valeur. Une chaîne vide ou le nom de l'attribut sont des valeurs recommandées. Tout ce qui compte est que si l'attribut est présent, quelle que soit sa valeur réelle, sa valeur est considérée comme <code>true</code> (<em>vraie</em>). L'absence de l'attribut signifie que sa valeur est <code>false</code> (<em>fausse</em>). En définissant la valeur de l'attribut <code>disabled</code> sur la chaîne vide (""), nous définissons <code>disabled</code> sur <code>true</code>, ce qui entraîne la désactivation du bouton.</li>
-</ul>
+- le premier appel de `setAttribute()` ci-dessus montre la modification de la valeur de l'attribut `name` en "helloButton". Vous pouvez le voir en utilisant l'inspecteur de page de votre navigateur ([Chrome](https://developers.google.com/web/tools/chrome-devtools/inspect-styles), [Edge](https://docs.microsoft.com/en-us/microsoft-edge/f12-devtools-guide/dom-explorer), [Firefox](/en-US/docs/Tools/Page_Inspector), [Safari](https://developer.apple.com/library/content/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Introduction/Introduction.html)).
+- Pour définir la valeur d'un attribut booléen, tel que `disabled`, vous pouvez spécifier n'importe quelle valeur. Une chaîne vide ou le nom de l'attribut sont des valeurs recommandées. Tout ce qui compte est que si l'attribut est présent, quelle que soit sa valeur réelle, sa valeur est considérée comme `true` (_vraie_). L'absence de l'attribut signifie que sa valeur est `false` (_fausse_). En définissant la valeur de l'attribut `disabled` sur la chaîne vide (""), nous définissons `disabled` sur `true`, ce qui entraîne la désactivation du bouton.
 
-<p>{{ EmbedLiveSample('Example', '300', '50') }}</p>
+{{ EmbedLiveSample('Example', '300', '50') }}
 
-<p>{{DOMAttributeMethods}}</p>
+{{DOMAttributeMethods}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<ul>
- <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68F082">DOM Level 2 Core : setAttribute</a> — <small><a href="http://www.yoyodesign.org/doc/w3c/dom2/core/core.html#ID-F68F082">traduction en français</a> (non normative)</small></li>
- <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#apis-in-html-documents">HTML5 : API dans les documents HTML</a></li>
-</ul>
+- [DOM Level 2 Core : setAttribute](http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68F082) — [traduction en français](http://www.yoyodesign.org/doc/w3c/dom2/core/core.html#ID-F68F082) (non normative)
+- [HTML5 : API dans les documents HTML](http://www.whatwg.org/specs/web-apps/current-work/#apis-in-html-documents)
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<h3 id="Gecko_notes">Gecko notes</h3>
+### Gecko notes
 
-<p>L'utilisation de <code>setAttribute()</code> pour modifier certains attributs, en particulier la valeur dans XUL, fonctionne de façon incohérente, car l'attribut spécifie la valeur par défaut. Pour accéder ou modifier la valeur courante, vous devez utiliser les propriétés. Par exemple, utilisez <code>Element.value</code> à la place de <code>Element.setAttribute()</code>.</p>
+L'utilisation de `setAttribute()` pour modifier certains attributs, en particulier la valeur dans XUL, fonctionne de façon incohérente, car l'attribut spécifie la valeur par défaut. Pour accéder ou modifier la valeur courante, vous devez utiliser les propriétés. Par exemple, utilisez `Element.value` à la place de `Element.setAttribute()`.
diff --git a/files/fr/web/api/element/setattributenode/index.md b/files/fr/web/api/element/setattributenode/index.md
index 8f77b05d9a..2b78429f15 100644
--- a/files/fr/web/api/element/setattributenode/index.md
+++ b/files/fr/web/api/element/setattributenode/index.md
@@ -9,41 +9,38 @@ tags:
   - Reference
 translation_of: Web/API/Element/setAttributeNode
 ---
-<p>{{ APIRef("DOM") }}</p>
+{{ APIRef("DOM") }}
 
-<p><code>setAttributeNode</code><code>()</code>  ajoute un nouveau nœud <code>Attr</code> à l'élément courant.</p>
+` setAttributeNode``() ` ajoute un nouveau nœud `Attr` à l'élément courant.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">var replacedAttr = element.setAttributeNode(attribute);</pre>
+```js
+var replacedAttr = element.setAttributeNode(attribute);
+```
 
-<ul>
- <li><code>attribute</code> est le nœud <code>Attr</code> à définir sur l'élément.</li>
- <li><code>replacedAttr</code> est le nœud d'attribut remplacé, renvoyé par la fonction, s'il y en avait un.</li>
-</ul>
+- `attribute` est le nœud `Attr` à définir sur l'élément.
+- `replacedAttr` est le nœud d'attribut remplacé, renvoyé par la fonction, s'il y en avait un.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre>// &lt;div id="one" align="left"&gt;one&lt;/div&gt;
-// &lt;div id="two"&gt;two&lt;/div&gt;
-var d1 = document.getElementById("one");
-var d2 = document.getElementById("two");
-var a = d1.getAttributeNode("align");
-d2.setAttributeNode(a);
-alert(d2.attributes[1].value)
-// retourne: `left'
-</pre>
+    // <div id="one" align="left">one</div>
+    // <div id="two">two</div>
+    var d1 = document.getElementById("one");
+    var d2 = document.getElementById("two");
+    var a = d1.getAttributeNode("align");
+    d2.setAttributeNode(a);
+    alert(d2.attributes[1].value)
+    // retourne: `left'
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p>Si l'attribut nommé existe déjà sur l'élément, cet attribut est remplacé par le nouveau et le nœud remplacé est renvoyé.</p>
+Si l'attribut nommé existe déjà sur l'élément, cet attribut est remplacé par le nouveau et le nœud remplacé est renvoyé.
 
-<p>Cette méthode est peu utilisée. On lui préfère souvent  {{domxref("Element.setAttribute()")}}  pour modifier la valeur d'un attribut d'élément.</p>
+Cette méthode est peu utilisée. On lui préfère souvent  {{domxref("Element.setAttribute()")}} pour modifier la valeur d'un attribut d'élément.
 
-<p>{{DOMAttributeMethods()}}</p>
+{{DOMAttributeMethods()}}
 
-<h2 id="Sp.C3.A9cification">Spécification</h2>
+## Spécification
 
-<ul>
- <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-887236154">DOM Level 2 Core : setAttributeNode</a> — <small><a href="http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-887236154">traduction en français</a> (non normative</small> (Introduit dans <a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-setAttributeNode">DOM Level 1 Core</a>)</li>
-</ul>
+- [DOM Level 2 Core : setAttributeNode](http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-887236154) — [traduction en français](http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-887236154) (non normative (Introduit dans [DOM Level 1 Core](http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-setAttributeNode))
diff --git a/files/fr/web/api/element/setattributenodens/index.md b/files/fr/web/api/element/setattributenodens/index.md
index b2abe3c907..a93dd4f72e 100644
--- a/files/fr/web/api/element/setattributenodens/index.md
+++ b/files/fr/web/api/element/setattributenodens/index.md
@@ -8,46 +8,40 @@ tags:
   - Méthodes
 translation_of: Web/API/Element/setAttributeNodeNS
 ---
-<p>{{ APIRef("DOM") }}</p>
+{{ APIRef("DOM") }}
 
-<p><code>setAttributeNodeNS</code> ajoute un nouveau nœud attribut avec l'espace de noms et le nom spécifiés.</p>
+`setAttributeNodeNS` ajoute un nouveau nœud attribut avec l'espace de noms et le nom spécifiés.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="eval"><em>replacedAttr</em> = element.setAttributeNodeNS(<em>attributeNode</em>)
-</pre>
+    replacedAttr = element.setAttributeNodeNS(attributeNode)
 
-<dl>
- <dt><code>replacedAttr</code></dt>
- <dd>Le nœud attribut remplacé, si applicable, renvoyé par cette fonction.</dd>
- <dt><code>attributeNode</code></dt>
- <dd>Un nœud <code>Attr</code>.</dd>
-</dl>
+- `replacedAttr`
+  - : Le nœud attribut remplacé, si applicable, renvoyé par cette fonction.
+- `attributeNode`
+  - : Un nœud `Attr`.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre>// &lt;div id="one" special-align="utterleft"&gt;one&lt;/div&gt;
-// &lt;div id="two"&gt;two&lt;/div&gt;
+    // <div id="one" special-align="utterleft">one</div>
+    // <div id="two">two</div>
 
-var myns = "http://www.mozilla.org/ns/specialspace";
-var d1 = document.getElementById("one");
-var d2 = document.getElementById("two");
-var a = d1.getAttributeNodeNS(myns, "special-align");
-d2.setAttributeNodeNS(a);
+    var myns = "http://www.mozilla.org/ns/specialspace";
+    var d1 = document.getElementById("one");
+    var d2 = document.getElementById("two");
+    var a = d1.getAttributeNodeNS(myns, "special-align");
+    d2.setAttributeNodeNS(a);
 
-alert(d2.attributes[1].value) // renvoie : "utterleft"
-</pre>
+    alert(d2.attributes[1].value) // renvoie : "utterleft"
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p>Si l'attribut spécifié existe déjà sur l'élément, cet attribut est remplacé par le nouveau et l'ancien est renvoyé.</p>
+Si l'attribut spécifié existe déjà sur l'élément, cet attribut est remplacé par le nouveau et l'ancien est renvoyé.
 
-<p>Notez que si vous essayez de définir sans cloner le noeud, Mozilla donne une erreur "Attribut déjà utilisé" NS_ERROR_DOM_INUSE_ATTRIBUTE_ERR, car le DOM nécessite que le clonage d'<code>Attr</code> soit réutilisé (contrairement aux autres Noeuds qui peuvent être déplacés).</p>
+Notez que si vous essayez de définir sans cloner le noeud, Mozilla donne une erreur "Attribut déjà utilisé" NS_ERROR_DOM_INUSE_ATTRIBUTE_ERR, car le DOM nécessite que le clonage d'`Attr` soit réutilisé (contrairement aux autres Noeuds qui peuvent être déplacés).
 
-<p>{{ DOMAttributeMethods() }}</p>
+{{ DOMAttributeMethods() }}
 
-<h2 id="Sp.C3.A9cification">Spécification</h2>
+## Spécification
 
-<ul>
- <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElSetAtNodeNS">DOM Level 2 Core: setAttributeNodeNS (en)</a> <small>— <a href="http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-ElSetAtNodeNS">traduction en français</a> (non normative)</small></li>
-</ul>
+- [DOM Level 2 Core: setAttributeNodeNS (en)](http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElSetAtNodeNS) — [traduction en français](http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-ElSetAtNodeNS) (non normative)
diff --git a/files/fr/web/api/element/setattributens/index.md b/files/fr/web/api/element/setattributens/index.md
index 1274563722..26312d6014 100644
--- a/files/fr/web/api/element/setattributens/index.md
+++ b/files/fr/web/api/element/setattributens/index.md
@@ -8,38 +8,35 @@ tags:
   - Méthodes
 translation_of: Web/API/Element/setAttributeNS
 ---
-<p>{{ APIRef("DOM") }}</p>
+{{ APIRef("DOM") }}
 
-<p><code>setAttributeNS</code> ajoute un nouvel attribut ou modifie la valeur d'un attribut avec un espace de noms et un nom donnés.</p>
+`setAttributeNS` ajoute un nouvel attribut ou modifie la valeur d'un attribut avec un espace de noms et un nom donnés.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">element.setAttributeNS(
+```js
+element.setAttributeNS(
 namespace,
 name,
-value)</pre>
+value)
+```
 
-<ul>
- <li><code>namespace</code> est une chaîne spécifiant l'espace de noms de l'attribut.</li>
- <li><code>name</code> est une chaîne identifiant l'attribut par son nom qualifié ; c'est-à-dire un préfixe d'espace de noms suivi d'un deux-points suivi d'un nom local.</li>
- <li><code>value</code> est la valeur chaîne désirée pour le nouvel attribut.</li>
-</ul>
+- `namespace` est une chaîne spécifiant l'espace de noms de l'attribut.
+- `name` est une chaîne identifiant l'attribut par son nom qualifié ; c'est-à-dire un préfixe d'espace de noms suivi d'un deux-points suivi d'un nom local.
+- `value` est la valeur chaîne désirée pour le nouvel attribut.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="eval">var d = document.getElementById("d1");
-d.setAttributeNS("http://www.mozilla.org/ns/specialspace", "align", "center");
-</pre>
+    var d = document.getElementById("d1");
+    d.setAttributeNS("http://www.mozilla.org/ns/specialspace", "align", "center");
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p>{{ DOMAttributeMethods() }}</p>
+{{ DOMAttributeMethods() }}
 
-<p><code>setAttributeNS</code>  est la seule méthode pour les attributs d'espace nom qui attend le nom qualifié complet, c'est-à-dire <code>"namespace:localname"</code>.</p>
+`setAttributeNS`  est la seule méthode pour les attributs d'espace nom qui attend le nom qualifié complet, c'est-à-dire `"namespace:localname"`.
 
-<h2 id="Sp.C3.A9cification">Spécification</h2>
+## Spécification
 
-<ul>
- <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElSetAttrNS">DOM Level 2 Core: setAttributeNS (en)</a> <small>— <a href="http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-ElSetAttrNS">traduction en français</a> (non normative)</small></li>
- <li><a href="https://www.w3.org/TR/DOM-Level-2-Core/glossary.html#dt-qualifiedname">DOM-Level-2-Core: glossary qualified name</a></li>
-</ul>
+- [DOM Level 2 Core: setAttributeNS (en)](http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElSetAttrNS) — [traduction en français](http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-ElSetAttrNS) (non normative)
+- [DOM-Level-2-Core: glossary qualified name](https://www.w3.org/TR/DOM-Level-2-Core/glossary.html#dt-qualifiedname)
diff --git a/files/fr/web/api/element/setcapture/index.md b/files/fr/web/api/element/setcapture/index.md
index 28c60fdf20..95c7e135ea 100644
--- a/files/fr/web/api/element/setcapture/index.md
+++ b/files/fr/web/api/element/setcapture/index.md
@@ -10,37 +10,35 @@ tags:
   - Souris
 translation_of: Web/API/Element/setCapture
 ---
-<p>{{ APIRef("DOM") }}{{ gecko_minversion_header("2.0") }}</p>
+{{ APIRef("DOM") }}{{ gecko_minversion_header("2.0") }}
 
-<p>Appelez cette méthode pendant la gestion d'un évènement de la souris pour recibler tous les évènements de la souris sur cet élément jusqu'à ce que le bouton de la souris soit relâché ou que soit appelée {{ domxref("document.releaseCapture()") }}.</p>
+Appelez cette méthode pendant la gestion d'un évènement de la souris pour recibler tous les évènements de la souris sur cet élément jusqu'à ce que le bouton de la souris soit relâché ou que soit appelée {{ domxref("document.releaseCapture()") }}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">element.setCapture(<em>retargetToElement</em>);
-</pre>
+    element.setCapture(retargetToElement);
 
-<dl>
- <dt><code>retargetToElement</code></dt>
- <dd>Si la valeur est <code>true</code> (<em>vrai</em>), tous les évènements sont ciblés directement vers cet élément ; si elle est <code>false</code> (<em>faux</em>), les évènements peuvent aussi être déclenchés sur les descendants de cet élément.</dd>
-</dl>
+- `retargetToElement`
+  - : Si la valeur est `true` (_vrai_), tous les évènements sont ciblés directement vers cet élément ; si elle est `false` (_faux_), les évènements peuvent aussi être déclenchés sur les descendants de cet élément.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Dans cet exemple, les coordonnées en cours de la souris sont dessinées pendant que vous passez la souris après un clic et un appui sur un élément.</p>
+Dans cet exemple, les coordonnées en cours de la souris sont dessinées pendant que vous passez la souris après un clic et un appui sur un élément.
 
-<pre class="brush: html">&lt;html&gt;
-&lt;head&gt;
-  &lt;title&gt;Mouse Capture Example&lt;/title&gt;
-  &lt;style type="text/css"&gt;
+```html
+<html>
+<head>
+  <title>Mouse Capture Example</title>
+  <style type="text/css">
     #myButton {
       border: solid black 1px;
       color: black;
       padding: 2px;
       box-shadow: black 2px 2px;
     }
-  &lt;/style&gt;
+  </style>
 
-  &lt;script type="text/javascript"&gt;
+  <script type="text/javascript">
     function init() {
       var btn = document.getElementById("myButton");
       btn.addEventListener("mousedown", mouseDown, false);
@@ -60,28 +58,26 @@ translation_of: Web/API/Element/setCapture
       var output = document.getElementById("output");
       output.innerHTML = "Position: " + e.clientX + ", " + e.clientY;
     }
-  &lt;/script&gt;
-&lt;/head&gt;
-&lt;body onload="init()"&gt;
-  &lt;p&gt;This is an example of how to use mouse capture on elements in Gecko 2.0.&lt;/p&gt;
-  &lt;p&gt;&lt;a id="myButton" href="#"&gt;Test Me&lt;/a&gt;&lt;/p&gt;
-  &lt;div id="output"&gt;No events yet&lt;/div&gt;
-&lt;/body&gt;
-&lt;/html&gt;
-</pre>
+  </script>
+</head>
+<body onload="init()">
+  <p>This is an example of how to use mouse capture on elements in Gecko 2.0.</p>
+  <p><a id="myButton" href="#">Test Me</a></p>
+  <div id="output">No events yet</div>
+</body>
+</html>
+```
 
-<p><a href="/samples/domref/mousecapture.html">Voir l'exemple sur une page</a></p>
+[Voir l'exemple sur une page](/samples/domref/mousecapture.html)
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p>L'élément ne peut pas être entièrement déplacé vers le haut ou vers le bas, selon la disposition des autres éléments.</p>
+L'élément ne peut pas être entièrement déplacé vers le haut ou vers le bas, selon la disposition des autres éléments.
 
-<h2 id="Spécification">Spécification</h2>
+## Spécification
 
-<p>Basé sur l'implémentation Internet Explorer.</p>
+Basé sur l'implémentation Internet Explorer.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{ domxref("document.releaseCapture()") }}</li>
-</ul>
+- {{ domxref("document.releaseCapture()") }}
diff --git a/files/fr/web/api/element/setpointercapture/index.md b/files/fr/web/api/element/setpointercapture/index.md
index a412900e39..ed605fc787 100644
--- a/files/fr/web/api/element/setpointercapture/index.md
+++ b/files/fr/web/api/element/setpointercapture/index.md
@@ -10,36 +10,34 @@ tags:
   - Pointeur
 translation_of: Web/API/Element/setPointerCapture
 ---
-<p>{{APIRef("DOM")}}</p>
+{{APIRef("DOM")}}
 
-<p>La <em>Pointer capture</em> (<em>capture de pointeur</em>) permet de re-cibler des événements pour un événement de pointeur particulier ({{domxref ("PointerEvent")}}) vers un élément particulier au lieu de la cible normale à l'emplacement d'un pointeur. Cela peut être utilisé pour garantir qu'un élément continue à recevoir des événements de pointeur même si le contact du périphérique de pointeur se déplace hors de l'élément (par exemple en faisant défiler).</p>
+La _Pointer capture_ (_capture de pointeur_) permet de re-cibler des événements pour un événement de pointeur particulier ({{domxref ("PointerEvent")}}) vers un élément particulier au lieu de la cible normale à l'emplacement d'un pointeur. Cela peut être utilisé pour garantir qu'un élément continue à recevoir des événements de pointeur même si le contact du périphérique de pointeur se déplace hors de l'élément (par exemple en faisant défiler).
 
-<p><strong><code>setPointerCapture()</code></strong> est la méthode de l'interface {{domxref("Element")}} utilisée pour désigner un élément spécifique comme <em>cible de capture</em> de{{domxref("PointerEvent", "évènements de pointeur")}} futurs. Les évènements subséquents du pointeur seront reciblés sur l'élément jusqu'à la libération de la capture (via {{domxref("Element.releasePointerCapture")}}).</p>
+**`setPointerCapture()`** est la méthode de l'interface {{domxref("Element")}} utilisée pour désigner un élément spécifique comme _cible de capture_ de{{domxref("PointerEvent", "évènements de pointeur")}} futurs. Les évènements subséquents du pointeur seront reciblés sur l'élément jusqu'à la libération de la capture (via {{domxref("Element.releasePointerCapture")}}).
 
-<div class="note">
-  <p><strong>Note :</strong> Lorque la capture du pointeur est définie, les évènements {{domxref("PointerEvent.pointerover","pointerover")}}, {{domxref("PointerEvent.pointerout","pointerout")}} {{domxref("PointerEvent.pointerenter","pointerenter")}} et {{domxref("PointerEvent.pointerleave","pointerleave")}} sont uniquement générés lors du franchissement de la limite de l'élément dont la capture est définie, car les autres éléments ne peuvent plus être ciblés par le pointeur. Cela a pour effet de supprimer ces événements sur tous les autres éléments.</p>
-</div>
+> **Note :** Lorque la capture du pointeur est définie, les évènements {{domxref("PointerEvent.pointerover","pointerover")}}, {{domxref("PointerEvent.pointerout","pointerout")}} {{domxref("PointerEvent.pointerenter","pointerenter")}} et {{domxref("PointerEvent.pointerleave","pointerleave")}} sont uniquement générés lors du franchissement de la limite de l'élément dont la capture est définie, car les autres éléments ne peuvent plus être ciblés par le pointeur. Cela a pour effet de supprimer ces événements sur tous les autres éléments.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">.<em>setPointerCapture</em>(pointerId);
-</pre>targetElement
+    .setPointerCapture(pointerId);
 
-<h3 id="Arguments">Arguments</h3>
+targetElement
 
-<dl>
- <dt><em>pointerId</em></dt>
- <dd>L'{{domxref("PointerEvent.pointerId","identifiant")}} pour un {{domxref("PointerEvent","évènement de pointeur")}}.</dd>
-</dl>
+### Arguments
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+- _pointerId_
+  - : L'{{domxref("PointerEvent.pointerId","identifiant")}} pour un {{domxref("PointerEvent","évènement de pointeur")}}.
 
-<p>Cette méthode renvoie <code>void</code> et lance une {{domxref("DOMException")}} nommée <code>InvalidPointerId</code> si <code>pointerId</code> ne correspond à aucun des pointeurs actifs.</p>
+### Valeur de retour
 
-<h2 id="Exemple">Exemple</h2>
+Cette méthode renvoie `void` et lance une {{domxref("DOMException")}} nommée `InvalidPointerId` si `pointerId` ne correspond à aucun des pointeurs actifs.
 
-<pre class="brush: html">&lt;html&gt;
-&lt;script&gt;
+## Exemple
+
+```html
+<html>
+<script>
 function downHandler(ev) {
  var el=document.getElementById("target");
  //L'élément cible  ('target') recevra/capturera d'autres évènements
@@ -49,42 +47,25 @@ function init() {
  var el=document.getElementById("target");
  el.onpointerdown = downHandler;
 }
-&lt;/script&gt;
-&lt;body onload="init();"&gt;
-&lt;div id="target"&gt; Touch me ... &lt;/div&gt;
-&lt;/body&gt;
-&lt;/html&gt;
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Pointer Events 2','#widl-Element-setPointerCapture-void-long-pointerId', 'setPointerCapture')}}</td>
-   <td>{{Spec2('Pointer Events 2')}}</td>
-   <td>Version non stable.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('Pointer Events', '#widl-Element-setPointerCapture-void-long-pointerId', 'setPointerCapture')}}</td>
-   <td>{{Spec2('Pointer Events')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Element.setPointerCapture")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{ domxref("Element.releasePointerCapture")}}</li>
- <li>{{ domxref("Pointer_events","Pointer Events") }}</li>
-</ul>
+</script>
+<body onload="init();">
+<div id="target"> Touch me ... </div>
+</body>
+</html>
+```
+
+## Spécifications
+
+| Spécification                                                                                                                                    | Statut                                   | Commentaire          |
+| ------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------- |
+| {{SpecName('Pointer Events 2','#widl-Element-setPointerCapture-void-long-pointerId', 'setPointerCapture')}} | {{Spec2('Pointer Events 2')}} | Version non stable.  |
+| {{SpecName('Pointer Events', '#widl-Element-setPointerCapture-void-long-pointerId', 'setPointerCapture')}}     | {{Spec2('Pointer Events')}}     | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Element.setPointerCapture")}}
+
+## Voir aussi
+
+- {{ domxref("Element.releasePointerCapture")}}
+- {{ domxref("Pointer_events","Pointer Events") }}
diff --git a/files/fr/web/api/element/tagname/index.md b/files/fr/web/api/element/tagname/index.md
index 53bee23738..aa0068f467 100644
--- a/files/fr/web/api/element/tagname/index.md
+++ b/files/fr/web/api/element/tagname/index.md
@@ -9,61 +9,44 @@ tags:
   - Propriétés
 translation_of: Web/API/Element/tagName
 ---
-<p>{{ApiRef("DOM")}}</p>
+{{ApiRef("DOM")}}
 
-<p>Renvoie le nom de l'étiquette de l'élément sur lequel elle est appelée. Si l'élément est une {{HTMLElement("img")}}, sa propriété <code>tagName</code> est <code>"IMG"</code> (pour les documents HTML, elle peut être différente pour les documents XML et XHTML).</p>
+Renvoie le nom de l'étiquette de l'élément sur lequel elle est appelée. Si l'élément est une {{HTMLElement("img")}}, sa propriété `tagName` est `"IMG"` (pour les documents HTML, elle peut être différente pour les documents XML et XHTML).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>elementName</em> = element.tagName;
-</pre>
+    elementName = element.tagName;
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>Une chaîne indiquant le nom de l'étiquette de l'élément. Cette chaîne comporte des majuscules selon le type de document :</p>
+Une chaîne indiquant le nom de l'étiquette de l'élément. Cette chaîne comporte des majuscules selon le type de document :
 
-<ul>
- <li>Pour l'arbre DOM qui représente un document HTML, le nom renvoyé est toujours en forme majuscule canonique. Par exemple, <code>tagName</code> appelé sur un élément {{HTMLElement("div")}} renvoie <code>"DIV"</code>.</li>
- <li>Les noms des éléments dans un arbre DOM XML, sont retournés dans la même casse que celle utilisée dans le fichier XML d'origine. Si un document XML inclut une étiquette <code>"&lt;SomeTag&gt;"</code>, alors la valeur de la propriété <code>tagName</code> est <code>"SomeTag"</code>.</li>
- <li>Pour les objets {{domxref("Element")}} , la valeur de l'étiquette de nom est la même que la valeur de la propriété {{domxref("Node.nodeName", "nodeName")}} héritée de {{domxref("Node")}}.</li>
-</ul>
+- Pour l'arbre DOM qui représente un document HTML, le nom renvoyé est toujours en forme majuscule canonique. Par exemple, `tagName` appelé sur un élément {{HTMLElement("div")}} renvoie `"DIV"`.
+- Les noms des éléments dans un arbre DOM XML, sont retournés dans la même casse que celle utilisée dans le fichier XML d'origine. Si un document XML inclut une étiquette `"<SomeTag>"`, alors la valeur de la propriété `tagName` est `"SomeTag"`.
+- Pour les objets {{domxref("Element")}} , la valeur de l'étiquette de nom est la même que la valeur de la propriété {{domxref("Node.nodeName", "nodeName")}} héritée de {{domxref("Node")}}.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<h3 id="Contenu_HTML">Contenu HTML</h3>
+### Contenu HTML
 
-<pre class="eval">&lt;span id="naissance"&gt;Lorsque je suis né…&lt;/span&gt;
-</pre>
+    <span id="naissance">Lorsque je suis né…</span>
 
-<h3 id="Contenu_JavaScript">Contenu JavaScript</h3>
+### Contenu JavaScript
 
-<pre class="brush: js">var span = document.getElementById("naissance");
-console.log(span.tagName);</pre>
+```js
+var span = document.getElementById("naissance");
+console.log(span.tagName);
+```
 
-<p>En XHTML (ou tout autre format XML), la casse d'origine sera conservée, de sorte que <code>"span"</code> sera affiché dans le cas où le nom de l'étiquette d'origine a été créé en minuscules. En HTML, <code>"SPAN"</code> serait affiché à la place quelle que soit la casse utilisée lors de la création du document original.</p>
+En XHTML (ou tout autre format XML), la casse d'origine sera conservée, de sorte que `"span"` sera affiché dans le cas où le nom de l'étiquette d'origine a été créé en minuscules. En HTML, `"SPAN"` serait affiché à la place quelle que soit la casse utilisée lors de la création du document original.
 
-<h2 id="Sp.C3.A9cification">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th>Spécification</th>
-   <th>Statut</th>
-   <th>Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName("DOM3 Core", "core.html#ID-104682815", "Element.tagName")}}</td>
-   <td>{{Spec2("DOM3 Core")}}</td>
-   <td>Pas de changement</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("DOM2 Core", "core.html#ID-104682815", "Element.tagName")}}</td>
-   <td>{{Spec2("DOM2 Core")}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                | Statut                       | Commentaire         |
+| -------------------------------------------------------------------------------------------- | ---------------------------- | ------------------- |
+| {{SpecName("DOM3 Core", "core.html#ID-104682815", "Element.tagName")}} | {{Spec2("DOM3 Core")}} | Pas de changement   |
+| {{SpecName("DOM2 Core", "core.html#ID-104682815", "Element.tagName")}} | {{Spec2("DOM2 Core")}} | Définition initiale |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Element.tagName")}}</p>
+{{Compat("api.Element.tagName")}}
diff --git a/files/fr/web/api/encoding_api/index.md b/files/fr/web/api/encoding_api/index.md
index c6e927c6ad..2e5901f1e7 100644
--- a/files/fr/web/api/encoding_api/index.md
+++ b/files/fr/web/api/encoding_api/index.md
@@ -8,53 +8,36 @@ tags:
   - Reference
 translation_of: Web/API/Encoding_API
 ---
-<p>{{DefaultAPISidebar("Encoding API")}}{{SeeCompatTable}}</p>
+{{DefaultAPISidebar("Encoding API")}}{{SeeCompatTable}}
 
-<p>L'<code>API Encoding</code> fournit un mecanisme de traitement de texte dans plusieurs {{Glossary("character encoding", "character encodings")}}, incluant les encodings non-{{Glossary("UTF-8")}}.</p>
+L'`API Encoding` fournit un mecanisme de traitement de texte dans plusieurs {{Glossary("character encoding", "character encodings")}}, incluant les encodings non-{{Glossary("UTF-8")}}.
 
-<p>L'API fournit quatres interfaces: {{domxref("TextDecoder")}}, {{domxref("TextEncoder")}}, {{domxref("TextDecoderStream")}} et {{domxref("TextEncoderStream")}}.</p>
+L'API fournit quatres interfaces: {{domxref("TextDecoder")}}, {{domxref("TextEncoder")}}, {{domxref("TextDecoderStream")}} et {{domxref("TextEncoderStream")}}.
 
-<h2 id="Interfaces">Interfaces</h2>
+## Interfaces
 
-<ul>
- <li>{{DOMxRef("TextDecoder")}}</li>
- <li>{{DOMxRef("TextEncoder")}}</li>
- <li>{{DOMxRef("TextDecoderStream")}}</li>
- <li>{{DOMxRef("TextEncoderStream")}}</li>
-</ul>
+- {{DOMxRef("TextDecoder")}}
+- {{DOMxRef("TextEncoder")}}
+- {{DOMxRef("TextDecoderStream")}}
+- {{DOMxRef("TextEncoderStream")}}
 
-<h2 id="Tutoriels_Outils">Tutoriels &amp; Outils</h2>
+## Tutoriels & Outils
 
-<ul>
- <li>Un <a href="http://code.google.com/p/stringencoding/">shim</a> permettant d'utiliser cette interface dans les navigateurs ne le supportant pas.</li>
- <li><a href="/en-US/Add-ons/Code_snippets/StringView"><code>StringView</code></a> – une représentation de type C des chaînes basée sur des tableaux typés.</li>
-</ul>
+- Un [shim](http://code.google.com/p/stringencoding/) permettant d'utiliser cette interface dans les navigateurs ne le supportant pas.
+- [`StringView`](/en-US/Add-ons/Code_snippets/StringView) – une représentation de type C des chaînes basée sur des tableaux typés.
 
-<h2 id="Caracteristiques">Caracteristiques</h2>
+## Caracteristiques
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Caracteristiques</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName("Encoding")}}</td>
-   <td>{{Spec2("Encoding")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Caracteristiques                 | Statut                       | Commentaire          |
+| -------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName("Encoding")}} | {{Spec2("Encoding")}} | Définition initiale. |
 
-<h2 id="Compatibilité">Compatibilité</h2>
+## Compatibilité
 
+### `TextDecoder`
 
+{{Compat("api.TextDecoder")}}
 
-<h3 id="TextDecoder"><code>TextDecoder</code></h3>
+### `TextEncoder`
 
-<p>{{Compat("api.TextDecoder")}}</p>
-
-<h3 id="TextEncoder"><code>TextEncoder</code></h3>
-
-<p>{{Compat("api.TextEncoder")}}</p>
+{{Compat("api.TextEncoder")}}
diff --git a/files/fr/web/api/errorevent/index.md b/files/fr/web/api/errorevent/index.md
index 9d265d8ab4..e0da9edb4a 100644
--- a/files/fr/web/api/errorevent/index.md
+++ b/files/fr/web/api/errorevent/index.md
@@ -7,70 +7,45 @@ tags:
   - Worker API
 translation_of: Web/API/ErrorEvent
 ---
-<p>{{APIRef("HTML DOM")}}</p>
+{{APIRef("HTML DOM")}}
 
-<p>L'interface <strong><code>ErrorEvent</code></strong> représente un événement donnant des informations relatives aux erreurs dans les scripts ou dans les fichiers.</p>
+L'interface **`ErrorEvent`** représente un événement donnant des informations relatives aux erreurs dans les scripts ou dans les fichiers.
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<p><em>Hérite également des propriétés de son parent {{domxref("Event")}}</em>.</p>
+_Hérite également des propriétés de son parent {{domxref("Event")}}_.
 
-<dl>
- <dt>{{domxref("ErrorEvent.message")}} {{readonlyInline}}</dt>
- <dd>Un {{domxref("DOMString")}} contenant un message d'erreur lisible décrivant le problème.</dd>
- <dt>{{domxref("ErrorEvent.filename")}} {{readonlyInline}}</dt>
- <dd>Un {{domxref("DOMString")}} contenant le nom du fichier de script dans lequel l'erreur est survenue.</dd>
- <dt>{{domxref("ErrorEvent.lineno")}} {{readonlyInline}}</dt>
- <dd>Un <code>integer</code> contenant le numéro de ligne du fichier de script dans lequel l'erreur est survenue.</dd>
- <dt>{{domxref("ErrorEvent.colno")}} {{readonlyInline}}</dt>
- <dd>Un <code>integer</code> contenant le numéro de colonne du fichier de script dans lequel l'erreur est survenue.</dd>
- <dt>{{domxref("ErrorEvent.error")}} {{readonlyInline}} {{experimental_inline}}</dt>
- <dd>Un <code>Object</code> JavaScript qui est concerné par l'événement.</dd>
-</dl>
+- {{domxref("ErrorEvent.message")}} {{readonlyInline}}
+  - : Un {{domxref("DOMString")}} contenant un message d'erreur lisible décrivant le problème.
+- {{domxref("ErrorEvent.filename")}} {{readonlyInline}}
+  - : Un {{domxref("DOMString")}} contenant le nom du fichier de script dans lequel l'erreur est survenue.
+- {{domxref("ErrorEvent.lineno")}} {{readonlyInline}}
+  - : Un `integer` contenant le numéro de ligne du fichier de script dans lequel l'erreur est survenue.
+- {{domxref("ErrorEvent.colno")}} {{readonlyInline}}
+  - : Un `integer` contenant le numéro de colonne du fichier de script dans lequel l'erreur est survenue.
+- {{domxref("ErrorEvent.error")}} {{readonlyInline}} {{experimental_inline}}
+  - : Un `Object` JavaScript qui est concerné par l'événement.
 
-<h2 id="Constructeur">Constructeur</h2>
+## Constructeur
 
-<dl>
- <dt>{{domxref("ErrorEvent.ErrorEvent", "ErrorEvent()")}}</dt>
- <dd>Crée un événement <code>ErrorEvent</code> avec les paramètres fournis.</dd>
-</dl>
+- {{domxref("ErrorEvent.ErrorEvent", "ErrorEvent()")}}
+  - : Crée un événement `ErrorEvent` avec les paramètres fournis.
 
-<h2 id="Méthodes">Méthodes</h2>
+## Méthodes
 
-<p><em>Hérite des méthodes de son parent {{domxref("Event")}}</em>.</p>
+_Hérite des méthodes de son parent {{domxref("Event")}}_.
 
-<h2 id="Spécifications">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('HTML WHATWG', 'webappapis.html#the-errorevent-interface', 'ErrorEvent') }}</td>
-   <td>{{ Spec2('HTML WHATWG') }}</td>
-   <td>Ajout de la propriété <code>error</code> et du 5ème paramètre du constructeur.</td>
-  </tr>
-  <tr>
-   <td>{{ SpecName('HTML5 W3C', 'webappapis.html#the-errorevent-interface', 'ErrorEvent') }}</td>
-   <td>{{ Spec2('HTML5 W3C') }}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                        | Statut                               | Commentaire                                                         |
+| -------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ------------------------------------------------------------------- |
+| {{ SpecName('HTML WHATWG', 'webappapis.html#the-errorevent-interface', 'ErrorEvent') }} | {{ Spec2('HTML WHATWG') }} | Ajout de la propriété `error` et du 5ème paramètre du constructeur. |
+| {{ SpecName('HTML5 W3C', 'webappapis.html#the-errorevent-interface', 'ErrorEvent') }}     | {{ Spec2('HTML5 W3C') }}     | Définition initiale.                                                |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
+{{Compat("api.ErrorEvent")}}
 
+## Voir aussi
 
-<p>{{Compat("api.ErrorEvent")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/Web_Workers_API/Utilisation_des_web_workers">Utilisation des web workers</a>, notamment les objets susceptibles de déclencher un tel événement.</li>
-</ul>
+- [Utilisation des web workers](/fr/docs/Web/API/Web_Workers_API/Utilisation_des_web_workers), notamment les objets susceptibles de déclencher un tel événement.
diff --git a/files/fr/web/api/event/bubbles/index.md b/files/fr/web/api/event/bubbles/index.md
index 6c9a6b68fc..2c869ea435 100644
--- a/files/fr/web/api/event/bubbles/index.md
+++ b/files/fr/web/api/event/bubbles/index.md
@@ -9,25 +9,24 @@ tags:
   - évènements
 translation_of: Web/API/Event/bubbles
 ---
-<p>{{ ApiRef("DOM") }}</p>
+{{ ApiRef("DOM") }}
 
-<p>Indique si l'événement donné se propage à travers le DOM ou non.</p>
+Indique si l'événement donné se propage à travers le DOM ou non.
 
-<div class="note">
-<p><strong>Note :</strong> Voir <a href="/fr/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture">Propagation et capture des évènements</a> pour plus d'informations sur la propagation.</p>
-</div>
+> **Note :** Voir [Propagation et capture des évènements](/fr/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture) pour plus d'informations sur la propagation.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre>event.bubbles</pre>
+    event.bubbles
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>Retourne un booléen dont la valeur est <code>true</code> (<em>vraie</em>) si l'événement se propage à travers le DOM.</p>
+Retourne un booléen dont la valeur est `true` (_vraie_) si l'événement se propage à travers le DOM.
 
-<h2 id="Syntax">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">function goInput(e) {
+```js
+function goInput(e) {
   // vérifie la propagation et
   if (!e.bubbles) {
      // la lance si elle ne l'a pas été
@@ -35,49 +34,23 @@ translation_of: Web/API/Event/bubbles
   }
   // déjà propagé
   doOutput(e)
-}</pre>
+}
+```
 
-<div class="note">
-<p><strong>Note :</strong> Certains évènements seulement peuvent se propager. Ceux dont cette propriété est définie à  <code>true</code>. Vous pouvez utiliser cette propriété pour vérifier si un évènement est autorisé à se propager ou non.</p>
-</div>
+> **Note :** Certains évènements seulement peuvent se propager. Ceux dont cette propriété est définie à  `true`. Vous pouvez utiliser cette propriété pour vérifier si un évènement est autorisé à se propager ou non.
 
-<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('DOM WHATWG', '#dom-event-bubbles', 'Event.bubbles')}}</td>
-   <td>{{ Spec2('DOM WHATWG') }}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM4', '#dom-event-bubbles', 'Event.bubbles')}}</td>
-   <td>{{ Spec2('DOM4') }}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Events', '#Events-Event-canBubble', 'Event.bubbles')}}</td>
-   <td>{{ Spec2('DOM2 Events') }}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                    | Statut                               | Commentaire          |
+| ------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- |
+| {{SpecName('DOM WHATWG', '#dom-event-bubbles', 'Event.bubbles')}}         | {{ Spec2('DOM WHATWG') }}     |                      |
+| {{SpecName('DOM4', '#dom-event-bubbles', 'Event.bubbles')}}                 | {{ Spec2('DOM4') }}             |                      |
+| {{SpecName('DOM2 Events', '#Events-Event-canBubble', 'Event.bubbles')}} | {{ Spec2('DOM2 Events') }} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
+{{Compat("api.Event.bubbles")}}
 
+## Voir aussi
 
-<p>{{Compat("api.Event.bubbles")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/API/Event/stopPropagation">stopPropagation</a> pour empêcher la propagation</li>
-</ul>
+- [stopPropagation](/en-US/docs/Web/API/Event/stopPropagation) pour empêcher la propagation
diff --git a/files/fr/web/api/event/cancelable/index.md b/files/fr/web/api/event/cancelable/index.md
index 3f3b86744b..5d073dca6b 100644
--- a/files/fr/web/api/event/cancelable/index.md
+++ b/files/fr/web/api/event/cancelable/index.md
@@ -9,28 +9,26 @@ tags:
   - évènements
 translation_of: Web/API/Event/cancelable
 ---
-<div>{{ ApiRef("DOM") }}</div>
+{{ ApiRef("DOM") }}
 
-<p>La propriété  <dfn><code>cancelable</code></dfn> (<em>annulable</em>) de "Event" Indique si l'événement peut être annulé et donc empêché, comme si l'événement ne s'était jamais produit. Si l'événement n'est pas annulable, alors sa propriété <code>cancelable</code> est à <code>false</code> (<em>faux</em>) et l'écouteur d'événement ne peut pas l'arrêter.</p>
+La propriété  _`cancelable`_ (_annulable_) de "Event" Indique si l'événement peut être annulé et donc empêché, comme si l'événement ne s'était jamais produit. Si l'événement n'est pas annulable, alors sa propriété `cancelable` est à `false` (_faux_) et l'écouteur d'événement ne peut pas l'arrêter.
 
-<p>L'appel de {{domxref("event.preventDefault", "preventDefault()")}} sur un évènement qui ne peut être annulé produit une erreur, aussi les écouteurs d'évènement qui gèrent de nombreux types d'évènements peuvent être vérifiés avec <code>cancelable</code> avant d'appeler leurs méthodes <code>preventDefault()</code>.</p>
+L'appel de {{domxref("event.preventDefault", "preventDefault()")}} sur un évènement qui ne peut être annulé produit une erreur, aussi les écouteurs d'évènement qui gèrent de nombreux types d'évènements peuvent être vérifiés avec `cancelable` avant d'appeler leurs méthodes `preventDefault()`.
 
-<p>La plupart des événements natifs du navigateur qui peuvent être annulés sont ceux qui résultent de l'interaction de l'utilisateur avec la page. L'annulation des événements <a href="/fr/docs/Web/Events/click">click</a>, <a href="/fr/docs/Web/Events/scroll">scroll</a> ou <a href="/fr/docs/Web/Events/beforeunload">beforeunload</a> empêcherait l'utilisateur de cliquer sur un élément, de faire défiler la page ou de la quitter, respectivement.</p>
+La plupart des événements natifs du navigateur qui peuvent être annulés sont ceux qui résultent de l'interaction de l'utilisateur avec la page. L'annulation des événements [click](/fr/docs/Web/Events/click), [scroll](/fr/docs/Web/Events/scroll) ou [beforeunload](/fr/docs/Web/Events/beforeunload) empêcherait l'utilisateur de cliquer sur un élément, de faire défiler la page ou de la quitter, respectivement.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var>bool</var> = <em>event</em>.cancelable
-</pre>
+    bool = event.cancelable
 
-<ul>
- <li>Le résultat est un <code>booléen</code> qui est <code>true</code> (<em>vrai</em>) si l'événement peut être annulé.</li>
-</ul>
+- Le résultat est un `booléen` qui est `true` (_vrai_) si l'événement peut être annulé.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<p>Par exemple, les vendeurs de navigateurs proposent que l'<a href="/fr/docs/Web/Events/wheel">évènement wheel </a>puisse être annulable seulement  <a href="https://github.com/WICG/interventions/issues/33">la première fois que l'écouteur est appelé</a> (en) ; les évènements  <code>wheel</code> suivants ne peuvent être annulés.</p>
+Par exemple, les vendeurs de navigateurs proposent que l'[évènement wheel ](/fr/docs/Web/Events/wheel)puisse être annulable seulement  [la première fois que l'écouteur est appelé](https://github.com/WICG/interventions/issues/33) (en) ; les évènements  `wheel` suivants ne peuvent être annulés.
 
-<pre class="brush:js">function preventScrollWheel(event) {
+```js
+function preventScrollWheel(event) {
   if (typeof event.cancelable !== 'boolean' || event.cancelable) {
     // L'événement peut être annulé, alors nous le faisons.
     event.preventDefault();
@@ -42,47 +40,25 @@ translation_of: Web/API/Event/cancelable
   }
 }
 
-document.addEventListener('wheel', preventCancelableEvents);</pre>
+document.addEventListener('wheel', preventCancelableEvents);
+```
 
-<p> </p>
 
-<h2 id="Notes">Notes</h2>
 
-<p>Si l'événement peut être annulé, ou non, est déterminé au moment de l'initialisation de celui-ci.</p>
+## Notes
 
-<p>Pour annuler un événement, utiliser la méthode {{domxref("event.preventDefault", "preventDefault()")}} sur celui-ci. Cela permet d'empêcher l'action par défaut associée à l'événement de s'exécuter.</p>
+Si l'événement peut être annulé, ou non, est déterminé au moment de l'initialisation de celui-ci.
 
-<h2 id="Specifications">Spécifications</h2>
+Pour annuler un événement, utiliser la méthode {{domxref("event.preventDefault", "preventDefault()")}} sur celui-ci. Cela permet d'empêcher l'action par défaut associée à l'événement de s'exécuter.
 
-<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('DOM WHATWG', '#dom-event-cancelable', 'Event.cancelable')}}</td>
-   <td>{{ Spec2('DOM WHATWG') }}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM4', '#dom-event-cancelable', 'Event.cancelable')}}</td>
-   <td>{{ Spec2('DOM4') }}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Events', '#Events-Event-canCancel', 'Event.cancelable')}}</td>
-   <td>{{ Spec2('DOM2 Events') }}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+| Spécification                                                                                        | Statut                               | Commentaire          |
+| ---------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName('DOM WHATWG', '#dom-event-cancelable', 'Event.cancelable')}}     | {{ Spec2('DOM WHATWG') }}     |                      |
+| {{SpecName('DOM4', '#dom-event-cancelable', 'Event.cancelable')}}             | {{ Spec2('DOM4') }}             |                      |
+| {{SpecName('DOM2 Events', '#Events-Event-canCancel', 'Event.cancelable')}} | {{ Spec2('DOM2 Events') }} | Définition initiale. |
 
+## Compatibilité des navigateurs
 
-
-<p>{{Compat("api.Event.cancelable")}}</p>
+{{Compat("api.Event.cancelable")}}
diff --git a/files/fr/web/api/event/cancelbubble/index.md b/files/fr/web/api/event/cancelbubble/index.md
index 07d891daed..c6cb47bf5d 100644
--- a/files/fr/web/api/event/cancelbubble/index.md
+++ b/files/fr/web/api/event/cancelbubble/index.md
@@ -10,40 +10,28 @@ tags:
   - Propriétés
 translation_of: Web/API/Event/cancelBubble
 ---
-<p>{{APIRef("DOM Events")}}</p>
+{{APIRef("DOM Events")}}
 
-<p>La propriété <code><strong>Event.cancelBubble</strong></code> est un alias historique de {{domxref("Event.stopPropagation()")}}. Définir sa valeur à <code>true</code> (vrai) avant le renvoi à partir d'un gestionnaire d'évènements empêche la propagation de l'évènement. Dans les implémentations les plus tardives, cette définition à false (<em>faux</em>) ne fait rien. Voir {{anch("Compatibilité des navigateurs")}} pour plus de détails. </p>
+La propriété **`Event.cancelBubble`** est un alias historique de {{domxref("Event.stopPropagation()")}}. Définir sa valeur à `true` (vrai) avant le renvoi à partir d'un gestionnaire d'évènements empêche la propagation de l'évènement. Dans les implémentations les plus tardives, cette définition à false (_faux_) ne fait rien. Voir {{anch("Compatibilité des navigateurs")}} pour plus de détails.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">event.cancelBubble = <em>bool;</em>
-<em>var bool</em> = event.cancelBubble;
-</pre>
+    event.cancelBubble = bool;
+    var bool = event.cancelBubble;
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre>elem.onclick = function(e) {
- // fais des choses sympas ici
-  e.cancelBubble = true;
-}</pre>
+    elem.onclick = function(e) {
+     // fais des choses sympas ici
+      e.cancelBubble = true;
+    }
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#dom-event-cancelbubble', 'cancelBubble')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                | Statut                           | Commentaire |
+| -------------------------------------------------------------------------------------------- | -------------------------------- | ----------- |
+| {{SpecName('DOM WHATWG', '#dom-event-cancelbubble', 'cancelBubble')}} | {{Spec2('DOM WHATWG')}} |             |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Event.cancelBubble")}}</p>
+{{Compat("api.Event.cancelBubble")}}
diff --git a/files/fr/web/api/event/comparison_of_event_targets/index.md b/files/fr/web/api/event/comparison_of_event_targets/index.md
index 506a981aef..efba95d88c 100644
--- a/files/fr/web/api/event/comparison_of_event_targets/index.md
+++ b/files/fr/web/api/event/comparison_of_event_targets/index.md
@@ -8,69 +8,121 @@ tags:
 translation_of: Web/API/Event/Comparison_of_Event_Targets
 original_slug: Web/API/Event/Comparaison_des_cibles_d_évènements
 ---
-<p>{{ ApiRef() }}</p>
+{{ ApiRef() }}
 
-<h3 id="Event_targets">Cibles d'évènements</h3>
+### Cibles d'évènements
 
-<p>Il est facile de s'interroger sur la cible à examiner lors de l'écriture d'un gestionnaire d'événements. Cet article devrait clarifier l'utilisation des propriétés de la cible.</p>
+Il est facile de s'interroger sur la cible à examiner lors de l'écriture d'un gestionnaire d'événements. Cet article devrait clarifier l'utilisation des propriétés de la cible.
 
-<p>Il y a 5 cibles à considérer :</p>
+Il y a 5 cibles à considérer :
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th>Propriété</th>
-   <th>Définie dans</th>
-   <th>Objectif</th>
-  </tr>
-  <tr>
-   <td><a href="/en/DOM/event.target">event.target</a></td>
-   <td><a href="http://www.w3.org/TR/DOM-Level-2/events.html#Events-interface">DOM Event Interface</a></td>
-   <td>
-    <p>L'élément DOM sur le côté gauche de l'appel qui a déclenché cet événement, par exemple :</p>
-
-    <pre class="eval">
-<em>element</em>.dispatchEvent(<em>event</em>)
+  <tbody>
+    <tr>
+      <th>Propriété</th>
+      <th>Définie dans</th>
+      <th>Objectif</th>
+    </tr>
+    <tr>
+      <td><a href="/en/DOM/event.target">event.target</a></td>
+      <td>
+        <a href="http://www.w3.org/TR/DOM-Level-2/events.html#Events-interface"
+          >DOM Event Interface</a
+        >
+      </td>
+      <td>
+        <p>
+          L'élément DOM sur le côté gauche de l'appel qui a déclenché cet
+          événement, par exemple :
+        </p>
+        <pre class="eval"><em>element</em>.dispatchEvent(<em>event</em>)
 </pre>
-   </td>
-  </tr>
-  <tr>
-   <td><a href="/en/DOM/event.currentTarget">event.currentTarget</a></td>
-   <td><a href="https://www.w3.org/TR/DOM-Level-2/events.html#Events-interface">DOM Event Interface</a></td>
-   <td>La <a href="http://www.w3.org/TR/DOM-Level-2/events.html#Events-EventTarget"><code>EventTarget</code></a> (<em>cible d'évènement</em>) que les <a href="http://www.w3.org/TR/DOM-Level-2/events.html#Events-EventListener"><code>EventListeners</code></a> traitent actuellement. Au fur et à mesure de la capture et de la diffusion des évènements, cette valeur change.</td>
-  </tr>
-  <tr>
-   <td><a href="/en/DOM/event.relatedTarget">event.relatedTarget</a></td>
-   <td><a href="http://www.w3.org/TR/DOM-Level-2/events.html#Events-MouseEvent">DOM MouseEvent Interface</a></td>
-   <td>Identifie une cible secondaire pour l'évènement.</td>
-  </tr>
-  <tr>
-   <td><a href="/en/DOM/event.explicitOriginalTarget">event.explicitOriginalTarget</a></td>
-   <td>{{ Source("/dom/public/idl/events/nsIDOMNSEvent.idl", "nsIDOMNSEvent.idl") }}</td>
-   <td>{{ Non-standard_inline() }} Si l'évènement a été reciblé pour quelque raison autre que  un passage de limite anonyme, il sera défini sur la cible avant le reciblage. Par exemple, les évènements de souris sont reciblés vers leur noeud parent quand ils surviennent sur des noeuds de texte ({{ Bug("185889") }}), et, dans ce cas, <code>.target</code> affichera le parent <code>.explicitOriginalTarget</code> et le noeud de texte.<br>
-    Contrairement à <code>.originalTarget</code>, <code>.explicitOriginalTarget</code> n'aura jamais de contenu anonyme.</td>
-  </tr>
-  <tr>
-   <td><a href="/en/DOM/event.originalTarget">event.originalTarget</a></td>
-   <td>{{ Source("/dom/public/idl/events/nsIDOMNSEvent.idl", "nsIDOMNSEvent.idl") }}</td>
-   <td>{{ Non-standard_inline() }} La cible originale de l'évènement, avant tout reciblage. Voir <a href="/en-US/docs/XBL/XBL_1.0_Reference/Anonymous_Content#Event_Flow_and_Targeting">Anonymous Content#Event_Flow_and_Targeting</a> pour plus de détails.</td>
-  </tr>
- </tbody>
+      </td>
+    </tr>
+    <tr>
+      <td><a href="/en/DOM/event.currentTarget">event.currentTarget</a></td>
+      <td>
+        <a href="https://www.w3.org/TR/DOM-Level-2/events.html#Events-interface"
+          >DOM Event Interface</a
+        >
+      </td>
+      <td>
+        La
+        <a
+          href="http://www.w3.org/TR/DOM-Level-2/events.html#Events-EventTarget"
+          ><code>EventTarget</code></a
+        >
+        (<em>cible d'évènement</em>) que les
+        <a
+          href="http://www.w3.org/TR/DOM-Level-2/events.html#Events-EventListener"
+          ><code>EventListeners</code></a
+        >
+        traitent actuellement. Au fur et à mesure de la capture et de la
+        diffusion des évènements, cette valeur change.
+      </td>
+    </tr>
+    <tr>
+      <td><a href="/en/DOM/event.relatedTarget">event.relatedTarget</a></td>
+      <td>
+        <a href="http://www.w3.org/TR/DOM-Level-2/events.html#Events-MouseEvent"
+          >DOM MouseEvent Interface</a
+        >
+      </td>
+      <td>Identifie une cible secondaire pour l'évènement.</td>
+    </tr>
+    <tr>
+      <td>
+        <a href="/en/DOM/event.explicitOriginalTarget"
+          >event.explicitOriginalTarget</a
+        >
+      </td>
+      <td>
+        {{ Source("/dom/public/idl/events/nsIDOMNSEvent.idl", "nsIDOMNSEvent.idl") }}
+      </td>
+      <td>
+        {{ Non-standard_inline() }} Si l'évènement a été reciblé pour
+        quelque raison autre que  un passage de limite anonyme, il sera défini
+        sur la cible avant le reciblage. Par exemple, les évènements de souris
+        sont reciblés vers leur noeud parent quand ils surviennent sur des
+        noeuds de texte ({{ Bug("185889") }}), et, dans ce cas,
+        <code>.target</code> affichera le parent
+        <code>.explicitOriginalTarget</code> et le noeud de texte.<br />Contrairement
+        à <code>.originalTarget</code>,
+        <code>.explicitOriginalTarget</code> n'aura jamais de contenu anonyme.
+      </td>
+    </tr>
+    <tr>
+      <td><a href="/en/DOM/event.originalTarget">event.originalTarget</a></td>
+      <td>
+        {{ Source("/dom/public/idl/events/nsIDOMNSEvent.idl", "nsIDOMNSEvent.idl") }}
+      </td>
+      <td>
+        {{ Non-standard_inline() }} La cible originale de l'évènement,
+        avant tout reciblage. Voir
+        <a
+          href="/en-US/docs/XBL/XBL_1.0_Reference/Anonymous_Content#Event_Flow_and_Targeting"
+          >Anonymous Content#Event_Flow_and_Targeting</a
+        >
+        pour plus de détails.
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h3 id="Use_of_explicitOriginalTarget_and_originalTarget">Utilisation de <code>explicitOriginalTarget</code> et <code>originalTarget</code></h3>
+### Utilisation de `explicitOriginalTarget` et `originalTarget`
 
-<p>Problème : Seulement disponible dans un navigateur basé sur Mozilla ? Problème : Convient uniquement aux développeurs d'extensions ?</p>
+Problème : Seulement disponible dans un navigateur basé sur Mozilla ? Problème : Convient uniquement aux développeurs d'extensions ?
 
-<h3 id="Examples">Exemples</h3>
+### Exemples
 
-<pre class="brush: html">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-&lt;head&gt;
-    &lt;meta charset="utf-8"&gt;
-    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
-    &lt;title&gt;Comparison of Event Targets&lt;/title&gt;
-    &lt;style&gt;
+```html
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>Comparison of Event Targets</title>
+    <style>
         table {
             border-collapse: collapse;
             height: 150px;
@@ -88,29 +140,29 @@ original_slug: Web/API/Event/Comparaison_des_cibles_d_évènements
         .non-standard {
             background-color: #902D37;
         }
-    &lt;/style&gt;
-&lt;/head&gt;
-&lt;body&gt;
-    &lt;table&gt;
-    &lt;thead&gt;
-        &lt;tr&gt;
-            &lt;td class="standard"&gt;Original target dispatching the event &lt;small&gt;event.target&lt;/small&gt;&lt;/td&gt;
-            &lt;td class="standard"&gt;Target who's event listener is being processed &lt;small&gt;event.currentTarget&lt;/small&gt;&lt;/td&gt;
-            &lt;td class="standard"&gt;Identify other element (if any) involved in the event &lt;small&gt;event.relatedTarget&lt;/small&gt;&lt;/td&gt;
-            &lt;td class="non-standard"&gt;If there was a retargetting of the event for some reason &lt;small&gt; event.explicitOriginalTarget&lt;/small&gt; contains the target before retargetting (never contains anonymous targets)&lt;/td&gt;
-            &lt;td class="non-standard"&gt;If there was a retargetting of the event for some reason &lt;small&gt; event.originalTarget&lt;/small&gt; contains the target before retargetting (may contain anonymous targets)&lt;/td&gt;
-        &lt;/tr&gt;
-    &lt;/thead&gt;
-    &lt;tr&gt;
-        &lt;td id="target"&gt;&lt;/td&gt;
-        &lt;td id="currentTarget"&gt;&lt;/td&gt;
-        &lt;td id="relatedTarget"&gt;&lt;/td&gt;
-        &lt;td id="explicitOriginalTarget"&gt;&lt;/td&gt;
-        &lt;td id="originalTarget"&gt;&lt;/td&gt;
-    &lt;/tr&gt;
-&lt;/table&gt;
-&lt;p&gt;Clicking on the text will show the difference between explicitOriginalTarget, originalTarget and target&lt;/p&gt;
-&lt;script&gt;
+    </style>
+</head>
+<body>
+    <table>
+    <thead>
+        <tr>
+            <td class="standard">Original target dispatching the event <small>event.target</small></td>
+            <td class="standard">Target who's event listener is being processed <small>event.currentTarget</small></td>
+            <td class="standard">Identify other element (if any) involved in the event <small>event.relatedTarget</small></td>
+            <td class="non-standard">If there was a retargetting of the event for some reason <small> event.explicitOriginalTarget</small> contains the target before retargetting (never contains anonymous targets)</td>
+            <td class="non-standard">If there was a retargetting of the event for some reason <small> event.originalTarget</small> contains the target before retargetting (may contain anonymous targets)</td>
+        </tr>
+    </thead>
+    <tr>
+        <td id="target"></td>
+        <td id="currentTarget"></td>
+        <td id="relatedTarget"></td>
+        <td id="explicitOriginalTarget"></td>
+        <td id="originalTarget"></td>
+    </tr>
+</table>
+<p>Clicking on the text will show the difference between explicitOriginalTarget, originalTarget and target</p>
+<script>
     function handleClicks(e) {
         document.getElementById('target').innerHTML = e.target;
         document.getElementById('currentTarget').innerHTML = e.currentTarget;
@@ -126,44 +178,27 @@ original_slug: Web/API/Event/Comparaison_des_cibles_d_évènements
 
     document.addEventListener('click', handleClicks, false);
     document.addEventListener('mouseover', handleMouseover, false);
-&lt;/script&gt;
-&lt;/body&gt;
-&lt;/html&gt;</pre>
+</script>
+</body>
+</html>
+```
 
-<h3 id="Use_of_target_and_relatedTarget">Utilisation de <code>target</code> et <code>relatedTarget</code></h3>
+### Utilisation de `target` et `relatedTarget`
 
-<p>La propriété <code>relatedTarget</code> (<em>cible associée</em>) pour l'évènement <code>mouseover</code>  détient le noeud que la souris avait précédemment atteint. Pour l'évènement <code>mouseout</code>, il détient le noeud que la souris a déplacé à.</p>
+La propriété `relatedTarget` (_cible associée_) pour l'évènement `mouseover`  détient le noeud que la souris avait précédemment atteint. Pour l'évènement `mouseout`, il détient le noeud que la souris a déplacé à.
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th>Type d'évènement</th>
-   <th><a href="/en/DOM/event.target">event.target</a></th>
-   <th><a href="/en/DOM/event.relatedTarget">event.relatedTarget</a></th>
-  </tr>
-  <tr>
-   <td><code>mouseover</code></td>
-   <td>La EventTarget (<em>cible d'évènement</em>) entré par le périphérique de pointage.</td>
-   <td>La EventTarget (<em>cible d'évènement</em>) dont le périphérique de pointage est sorti.</td>
-  </tr>
-  <tr>
-   <td><code>mouseout</code></td>
-   <td>La EventTarget (<em>cible d'évènement</em>) dont le périphérique de pointage est sorti.</td>
-   <td>the EventTarget (<em>cible d'évènement</em>) entré par le périphérique de pointage.</td>
-  </tr>
- </tbody>
-</table>
+| Type d'évènement | [event.target](/en/DOM/event.target)                                             | [event.relatedTarget](/en/DOM/event.relatedTarget)                               |
+| ---------------- | -------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- |
+| `mouseover`      | La EventTarget (_cible d'évènement_) entré par le périphérique de pointage.      | La EventTarget (_cible d'évènement_) dont le périphérique de pointage est sorti. |
+| `mouseout`       | La EventTarget (_cible d'évènement_) dont le périphérique de pointage est sorti. | the EventTarget (_cible d'évènement_) entré par le périphérique de pointage.     |
 
-<p>Problème : A également besoin de descriptions sur les évènements <code>dragenter</code> et <code>dragexit</code>.</p>
+Problème : A également besoin de descriptions sur les évènements `dragenter` et `dragexit`.
 
-<h4 id="Example">Exemple</h4>
-
-<pre class="eval">&lt;hbox id="outer"&gt;
-  &lt;hbox id="inner"
-        onmouseover="dump('mouseover ' + event.relatedTarget.id + ' &gt; ' + event.target.id + '\n');"
-        onmouseout="dump('mouseout  ' + event.target.id + ' &gt; ' + event.relatedTarget.id + '\n');"
-        style="margin: 100px; border: 10px solid black; width: 100px; height: 100px;" /&gt;
-&lt;/hbox&gt;
-</pre>
+#### Exemple
 
-<p> </p>
+    <hbox id="outer">
+      <hbox id="inner"
+            onmouseover="dump('mouseover ' + event.relatedTarget.id + ' > ' + event.target.id + '\n');"
+            onmouseout="dump('mouseout  ' + event.target.id + ' > ' + event.relatedTarget.id + '\n');"
+            style="margin: 100px; border: 10px solid black; width: 100px; height: 100px;" />
+    </hbox>
diff --git a/files/fr/web/api/event/currenttarget/index.md b/files/fr/web/api/event/currenttarget/index.md
index d70ad8d00f..d1abd29fdc 100644
--- a/files/fr/web/api/event/currenttarget/index.md
+++ b/files/fr/web/api/event/currenttarget/index.md
@@ -9,23 +9,24 @@ tags:
   - Propriété
 translation_of: Web/API/Event/currentTarget
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p>La propriété <code><strong>currentTarget</strong></code>, accessible en lecture seule et rattachée à l'interface {{domxref("Event")}}, identifie la cible courante pour l'évènement lorsque celui-ci traverse le DOM. Elle fait toujours référence à l'élément sur lequel le gestionnaire d'évènement a été attaché tandis que {{domxref("Event.target")}} identifie l'élément à partir duquel l'évènement s'est produit (<code>event.target</code> peut donc être un descendant de <code>event.currentTarget</code>).</p>
+La propriété **`currentTarget`**, accessible en lecture seule et rattachée à l'interface {{domxref("Event")}}, identifie la cible courante pour l'évènement lorsque celui-ci traverse le DOM. Elle fait toujours référence à l'élément sur lequel le gestionnaire d'évènement a été attaché tandis que {{domxref("Event.target")}} identifie l'élément à partir duquel l'évènement s'est produit (`event.target` peut donc être un descendant de `event.currentTarget`).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var <em>currentEventTarget</em> = <em>event</em>.currentTarget;</pre>
+    var currentEventTarget = event.currentTarget;
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>{{domxref("EventTarget")}}</p>
+{{domxref("EventTarget")}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p><code>Event.currentTarget</code> peut s'avérer utile lorsqu'on attache le même gestionnaire d'évènement à plusieurs éléments.</p>
+`Event.currentTarget` peut s'avérer utile lorsqu'on attache le même gestionnaire d'évènement à plusieurs éléments.
 
-<pre class="brush: js">// Cette fonction masque la cible courante de l'évènement
+```js
+// Cette fonction masque la cible courante de l'évènement
 // et l'affiche dans la console.
 function hide(e){
   e.currentTarget.style.visibility = 'hidden';
@@ -36,57 +37,29 @@ function hide(e){
 
 var ps = document.getElementsByTagName('p');
 
-for(var i = 0; i &lt; ps.length; i++){
-  // On affiche l'élément &lt;p&gt; qui a été cliqué dans la console
+for(var i = 0; i < ps.length; i++){
+  // On affiche l'élément <p> qui a été cliqué dans la console
   ps[i].addEventListener('click', hide, false);
 }
-// On affiche l'élément &lt;body&gt; dans la console
+// On affiche l'élément <body> dans la console
 document.body.addEventListener('click', hide, false);
+```
 
-</pre>
-
-<div class="note">
-<p><strong>Note :</strong> La valeur de <code>event.currentTarget</code> est <strong>uniquement</strong> disponible lorsque l'évènement est géré. Ainsi, on ne pourra pas observer la valeur de <code>currentTarget</code> <em>a posteriori</em> (ex. si on a stocké la valeur d'<code>event</code> dans une variable lors de la gestion de l'évènement puis qu'on utilise celle-ci plus tard, <code>event.currentTarget</code> aura la valeur <code>null</code>).</p>
-</div>
-
-<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>
-   <td>{{SpecName("DOM WHATWG", "#dom-event-currenttarget", "Event.currentTarget")}}</td>
-   <td>{{Spec2("DOM WHATWG")}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName("DOM4", "#dom-event-currenttarget", "Event.currentTarget")}}</td>
-   <td>{{Spec2("DOM4")}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName("DOM3 Events", "#dfn-current-event-target", "current event target")}}</td>
-   <td>{{Spec2("DOM3 Events")}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName("DOM2 Events", "#Events-Event-currentTarget", "Event.currentTarget")}}</td>
-   <td>{{Spec2("DOM2 Events")}}</td>
-   <td>Initial definition</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Event.currentTarget")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/Event/Comparaison_des_cibles_d_évènements">Comparaison des différentes cibles pour les évènements</a></li>
-</ul>
+> **Note :** La valeur de `event.currentTarget` est **uniquement** disponible lorsque l'évènement est géré. Ainsi, on ne pourra pas observer la valeur de `currentTarget` _a posteriori_ (ex. si on a stocké la valeur d'`event` dans une variable lors de la gestion de l'évènement puis qu'on utilise celle-ci plus tard, `event.currentTarget` aura la valeur `null`).
+
+## Spécifications
+
+| Spécification                                                                                                | État                             | Commentaires       |
+| ------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------ |
+| {{SpecName("DOM WHATWG", "#dom-event-currenttarget", "Event.currentTarget")}}     | {{Spec2("DOM WHATWG")}} |                    |
+| {{SpecName("DOM4", "#dom-event-currenttarget", "Event.currentTarget")}}             | {{Spec2("DOM4")}}         |                    |
+| {{SpecName("DOM3 Events", "#dfn-current-event-target", "current event target")}} | {{Spec2("DOM3 Events")}} |                    |
+| {{SpecName("DOM2 Events", "#Events-Event-currentTarget", "Event.currentTarget")}} | {{Spec2("DOM2 Events")}} | Initial definition |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Event.currentTarget")}}
+
+## Voir aussi
+
+- [Comparaison des différentes cibles pour les évènements](/fr/docs/Web/API/Event/Comparaison_des_cibles_d_évènements)
diff --git a/files/fr/web/api/event/defaultprevented/index.md b/files/fr/web/api/event/defaultprevented/index.md
index f5b25e7c7d..4ff41dfd07 100644
--- a/files/fr/web/api/event/defaultprevented/index.md
+++ b/files/fr/web/api/event/defaultprevented/index.md
@@ -8,51 +8,30 @@ tags:
   - Propriété
 translation_of: Web/API/Event/defaultPrevented
 ---
-<p>{{APIRef("DOM")}}</p>
+{{APIRef("DOM")}}
 
-<h2 id="Résumé">Résumé</h2>
+## Résumé
 
-<p>Retourne un booléen indiquant si {{domxref("event.preventDefault()")}} a été appelée sur l'évènement ou non.</p>
+Retourne un booléen indiquant si {{domxref("event.preventDefault()")}} a été appelée sur l'évènement ou non.
 
-<div class="note">
-  <p><strong>Note :</strong> Cette propriété doit etre utilisée au lieu de la méthode <code>getPreventDefault()</code> qui n'est pas standard et est désormais dépréciée (voir {{bug(691151)}}).</p>
-</div>
+> **Note :** Cette propriété doit etre utilisée au lieu de la méthode `getPreventDefault()` qui n'est pas standard et est désormais dépréciée (voir {{bug(691151)}}).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="eval">bool = event.defaultPrevented </pre>
+    bool = event.defaultPrevented
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre> if (e.defaultPrevented) {
-   /* Le comportement par défaut a été inhibé */
- }
-</pre>
+     if (e.defaultPrevented) {
+       /* Le comportement par défaut a été inhibé */
+     }
 
-<h2 id="Spécification">Spécification</h2>
+## Spécification
 
-<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('DOM WHATWG', '#dom-event-defaultprevented', 'Event.defaultPrevented()')}}</td>
-   <td>{{ Spec2('DOM WHATWG') }}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                    | Statut                           | Commentaire |
+| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- |
+| {{SpecName('DOM WHATWG', '#dom-event-defaultprevented', 'Event.defaultPrevented()')}} | {{ Spec2('DOM WHATWG') }} |             |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-
-
-<p>{{Compat("api.Event.defaultPrevented")}}</p>
-
-<ul>
-</ul>
+{{Compat("api.Event.defaultPrevented")}}
diff --git a/files/fr/web/api/event/event/index.md b/files/fr/web/api/event/event/index.md
index 8a6992dc29..2636ab0c3b 100644
--- a/files/fr/web/api/event/event/index.md
+++ b/files/fr/web/api/event/event/index.md
@@ -8,66 +8,47 @@ tags:
   - évènements
 translation_of: Web/API/Event/Event
 ---
-<p>{{APIRef("DOM")}}</p>
+{{APIRef("DOM")}}
 
-<p>Le constructeur <code><strong>Event()</strong></code> crée un nouvel {{domxref("Event")}} (<em>évènement</em>).</p>
+Le constructeur **`Event()`** crée un nouvel {{domxref("Event")}} (_évènement_).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"> <em>event</em> = new Event(<em>typeArg</em>, <em>eventInit</em>);</pre>
+     event = new Event(typeArg, eventInit);
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt><em>typeArg</em></dt>
- <dd>C'est une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) représentant le nom de l'évènement.</dd>
- <dt><em>eventInit</em>{{optional_inline}}</dt>
- <dd><p>C'est un dictionnaire <code>EventInit</code> ayant les champs suivants :</p>
- <ul>
-  <li><code>bubbles</code>: (facultatif) un {{jsxref("Boolean")}} indiquant si les événements sont propagés . Par défaut est <code>false</code> (<em>faux</em>).</li>
-  <li><code>cancelable</code>: (facultatif) un {{jsxref("Boolean")}} indiquant si l'évènement peut être annulé. Par défaut est <code>false</code> (<em>faux</em>) .</li>
-  <li><code>composed</code>: ( facultatif ) un {{jsxref("Boolean")}} indiquant si l'évènement déclenchera les écouteurs en dehors d'une racine shadow (voir {{domxref("Event.composed")}} pour plus de détails). Par défaut est <code>false</code> (<em>faux</em>) .</li>
- </ul>
- </dd>
-</dl>
+- _typeArg_
+  - : C'est une {{domxref("DOMString")}} (_chaîne de caractères_) représentant le nom de l'évènement.
+- _eventInit_{{optional_inline}}
 
-<h2 id="Exemple">Exemple</h2>
+  - : C'est un dictionnaire `EventInit` ayant les champs suivants :
 
-<pre class="brush: js">// crée un évènement "look" qui est diffusé et ne peut être annulé
+    - `bubbles`: (facultatif) un {{jsxref("Boolean")}} indiquant si les événements sont propagés . Par défaut est `false` (_faux_).
+    - `cancelable`: (facultatif) un {{jsxref("Boolean")}} indiquant si l'évènement peut être annulé. Par défaut est `false` (_faux_) .
+    - `composed`: ( facultatif ) un {{jsxref("Boolean")}} indiquant si l'évènement déclenchera les écouteurs en dehors d'une racine shadow (voir {{domxref("Event.composed")}} pour plus de détails). Par défaut est `false` (_faux_) .
+
+## Exemple
+
+```js
+// crée un évènement "look" qui est diffusé et ne peut être annulé
 var evt = new Event("look", {"bubbles":true, "cancelable":false});
 document.dispatchEvent(evt);
 
 // l'événement peut être envoyé à partir de n'importe quel élément, pas seulement le document
 myDiv.dispatchEvent(evt);
-</pre>
-
-<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('DOM WHATWG','#interface-event','Event()')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+```
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Spécifications
 
+| Spécification                                                            | Statut                           | Commentaire          |
+| ------------------------------------------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName('DOM WHATWG','#interface-event','Event()')}} | {{Spec2('DOM WHATWG')}} | Définition initiale. |
 
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Event.Event")}}</p>
+{{Compat("api.Event.Event")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("Event")}}</li>
-</ul>
+- {{domxref("Event")}}
diff --git a/files/fr/web/api/event/eventphase/index.md b/files/fr/web/api/event/eventphase/index.md
index 290a0e6659..f6721c8a8d 100644
--- a/files/fr/web/api/event/eventphase/index.md
+++ b/files/fr/web/api/event/eventphase/index.md
@@ -10,88 +10,114 @@ tags:
   - Propriétés
 translation_of: Web/API/Event/eventPhase
 ---
-<p>{{ApiRef("DOM")}}</p>
+{{ApiRef("DOM")}}
 
-<p>Indique quelle phase du flux d'événements est actuellement évaluée.</p>
+Indique quelle phase du flux d'événements est actuellement évaluée.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js"><em>var phase</em> = event.eventPhase;
-</pre>
+```js
+var phase = event.eventPhase;
+```
 
-<p>Retourne un entier qui spécifie la phase courante d'évaluation du flux d'événements. Les valeurs possibles sont listées dans {{anch("Constantes de phase d'événement")}}.</p>
+Retourne un entier qui spécifie la phase courante d'évaluation du flux d'événements. Les valeurs possibles sont listées dans {{anch("Constantes de phase d'événement")}}.
 
-<h2 id="Constantes">Constantes</h2>
+## Constantes
 
-<h3 id="Constantes_de_phase_d'événement">Constantes de phase d'événement</h3>
+### Constantes de phase d'événement
 
-<p>Ces valeurs décrivent quelle est la phase du flux d'événements actuellement évalué.</p>
+Ces valeurs décrivent quelle est la phase du flux d'événements actuellement évalué.
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Constant</th>
-   <th scope="col">Value</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>Event.NONE</code></td>
-   <td>0</td>
-   <td>
-    <p>Aucun événement n'est actuellement traité.</p>
-   </td>
-  </tr>
-  <tr>
-   <td><code>Event.CAPTURING_PHASE</code></td>
-   <td>1</td>
-   <td>
-    <p>L'événement se propage à travers les objets ancêtres de la cible. Ce processus commence avec {{domxref("Window")}}, puis {{domxref("Document")}}, ensuite {{domxref("HTMLHtmlElement")}} et ainsi de suite à travers les éléments jusqu'à ce que le parent de la cible soit atteint. {{domxref("EventListener", "Event listeners", "", 1)}} sont enregistrés pour le mode capture lorsque {{domxref("EventTarget.addEventListener()")}} est appelé durant cette phase.</p>
-   </td>
-  </tr>
-  <tr>
-   <td><code>Event.AT_TARGET</code></td>
-   <td>2</td>
-   <td>L'événement est arrivé à {{domxref("EventTarget", "the event's target", "", 1)}}. Les écouteurs d'événements  enregistrés pour cette phase sont appelés à ce moment. Si {{domxref("Event.bubbles")}} vaut <code>false</code> (<em>faux</em>), le traitement de l'événement est terminé une fois la phase complète.</td>
-  </tr>
-  <tr>
-   <td><code>Event.BUBBLING_PHASE</code></td>
-   <td>3</td>
-   <td>L'événement se propage à rebours à travers les ancêtres de la cible dans l'ordre inverse, commençant avec le parent, et atteignant finalement le contenant {{domxref("Window")}}. Ceci est connu comme propagation et arrive seulement si {{domxref("Event.bubbles")}} vaut <code>true</code> (<em>vrai</em>). Les {{domxref("EventListener", "Event listeners", "", 1)}} enregistrés pour cette phase sont déclenchés durant ce traitement.</td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th scope="col">Constant</th>
+      <th scope="col">Value</th>
+      <th scope="col">Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>Event.NONE</code></td>
+      <td>0</td>
+      <td><p>Aucun événement n'est actuellement traité.</p></td>
+    </tr>
+    <tr>
+      <td><code>Event.CAPTURING_PHASE</code></td>
+      <td>1</td>
+      <td>
+        <p>
+          L'événement se propage à travers les objets ancêtres de la cible. Ce
+          processus commence avec {{domxref("Window")}}, puis
+          {{domxref("Document")}}, ensuite
+          {{domxref("HTMLHtmlElement")}} et ainsi de suite à travers
+          les éléments jusqu'à ce que le parent de la cible soit atteint.
+          {{domxref("EventListener", "Event listeners", "", 1)}}
+          sont enregistrés pour le mode capture lorsque
+          {{domxref("EventTarget.addEventListener()")}} est
+          appelé durant cette phase.
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td><code>Event.AT_TARGET</code></td>
+      <td>2</td>
+      <td>
+        L'événement est arrivé à
+        {{domxref("EventTarget", "the event's target", "", 1)}}.
+        Les écouteurs d'événements  enregistrés pour cette phase sont appelés à
+        ce moment. Si {{domxref("Event.bubbles")}} vaut
+        <code>false</code> (<em>faux</em>), le traitement de l'événement est
+        terminé une fois la phase complète.
+      </td>
+    </tr>
+    <tr>
+      <td><code>Event.BUBBLING_PHASE</code></td>
+      <td>3</td>
+      <td>
+        L'événement se propage à rebours à travers les ancêtres de la cible dans
+        l'ordre inverse, commençant avec le parent, et atteignant finalement le
+        contenant {{domxref("Window")}}. Ceci est connu comme propagation
+        et arrive seulement si {{domxref("Event.bubbles")}} vaut
+        <code>true</code> (<em>vrai</em>). Les
+        {{domxref("EventListener", "Event listeners", "", 1)}}
+        enregistrés pour cette phase sont déclenchés durant ce traitement.
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<p>Pour plus de détails, voir <a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow">section 3.1, Event dispatch and DOM event flow</a> (en) de la spécification du DOM niveau 3 sur les évènements .</p>
-
-<h2 id="Example">Exemple</h2>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;h4&gt;Event Propagation Chain&lt;/h4&gt;
-&lt;ul&gt;
-  &lt;li&gt;Click 'd1'&lt;/li&gt;
-  &lt;li&gt;Analyse event propagation chain&lt;/li&gt;
-  &lt;li&gt;Click next div and repeat the experience&lt;/li&gt;
-  &lt;li&gt;Change Capturing mode&lt;/li&gt;
-  &lt;li&gt;Repeat the experience&lt;/li&gt;
-&lt;/ul&gt;
-&lt;input type="checkbox" id="chCapture" /&gt;
-&lt;label for="chCapture"&gt;Use Capturing&lt;/label&gt;
- &lt;div id="d1"&gt;d1
-  &lt;div id="d2"&gt;d2
-      &lt;div id="d3"&gt;d3
-          &lt;div id="d4"&gt;d4&lt;/div&gt;
-      &lt;/div&gt;
-  &lt;/div&gt;
- &lt;/div&gt;
- &lt;div id="divInfo"&gt;&lt;/div&gt;
-</pre>
-
-<h3 id="CSS">CSS</h3>
-
-<pre class="brush: css">div {
+Pour plus de détails, voir [section 3.1, Event dispatch and DOM event flow](http://www.w3.org/TR/DOM-Level-3-Events/#event-flow) (en) de la spécification du DOM niveau 3 sur les évènements .
+
+## Exemple
+
+### HTML
+
+```html
+<h4>Event Propagation Chain</h4>
+<ul>
+  <li>Click 'd1'</li>
+  <li>Analyse event propagation chain</li>
+  <li>Click next div and repeat the experience</li>
+  <li>Change Capturing mode</li>
+  <li>Repeat the experience</li>
+</ul>
+<input type="checkbox" id="chCapture" />
+<label for="chCapture">Use Capturing</label>
+ <div id="d1">d1
+  <div id="d2">d2
+      <div id="d3">d3
+          <div id="d4">d4</div>
+      </div>
+  </div>
+ </div>
+ <div id="divInfo"></div>
+```
+
+### CSS
+
+```css
+div {
   margin: 20px;
   padding: 4px;
   border: thin black solid;
@@ -102,11 +128,13 @@ translation_of: Web/API/Event/eventPhase
   padding: 8px;
   background-color:white;
   font-size:80%;
-}</pre>
+}
+```
 
-<h3 id="JavaScript">JavaScript</h3>
+### JavaScript
 
-<pre class="brush: js">var clear = false, divInfo = null, divs = null, useCapture = false;
+```js
+var clear = false, divInfo = null, divs = null, useCapture = false;
 window.onload = function () {
   divInfo = document.getElementById("divInfo");
   divs = document.getElementsByTagName('div');
@@ -120,7 +148,7 @@ window.onload = function () {
 }
 
 function RemoveListeners() {
-  for (var i = 0; i &lt; divs.length; i++) {
+  for (var i = 0; i < divs.length; i++) {
     var d = divs[i];
     if (d.id != "divInfo") {
       d.removeEventListener("click", OnDivClick, true);
@@ -130,7 +158,7 @@ function RemoveListeners() {
 }
 
 function AddListeners() {
-  for (var i = 0; i &lt; divs.length; i++) {
+  for (var i = 0; i < divs.length; i++) {
     var d = divs[i];
     if (d.id != "divInfo") {
       if (chCapture.checked)
@@ -149,48 +177,28 @@ function OnDivClick(e) {
   if (e.eventPhase == 2)
     e.currentTarget.style.backgroundColor = 'red';
   var level = e.eventPhase == 0 ? "none" : e.eventPhase == 1 ? "capturing" : e.eventPhase == 2 ? "target" : e.eventPhase == 3 ? "bubbling" : "error";
-  divInfo.innerHTML += e.currentTarget.id + "; eventPhase: " + level + "&lt;br/&gt;";
+  divInfo.innerHTML += e.currentTarget.id + "; eventPhase: " + level + "<br/>";
 }
 
 function Clear() {
-  for (var i = 0; i &lt; divs.length; i++) {
+  for (var i = 0; i < divs.length; i++) {
     if (divs[i].id != "divInfo")
-      divs[i].style.backgroundColor = (i &amp; 1) ? "#f6eedb" : "#cceeff";
+      divs[i].style.backgroundColor = (i & 1) ? "#f6eedb" : "#cceeff";
   }
   divInfo.innerHTML = '';
-}</pre>
-
-<p>{{ EmbedLiveSample('Example', '', '700', '', 'Web/API/Event/eventPhase') }}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
+}
+```
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th>Spécification</th>
-   <th>Statut</th>
-   <th>Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName("DOM WHATWG", "#dom-event-eventphase", "Event.eventPhase")}}</td>
-   <td>{{Spec2("DOM WHATWG")}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName("DOM4", "#dom-event-eventphase", "Event.eventPhase")}}</td>
-   <td>{{Spec2("DOM4")}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName("DOM2 Events", "#Events-Event-eventPhase", "Event.eventPhase")}}</td>
-   <td>{{Spec2("DOM2 Events")}}</td>
-   <td>Première définition</td>
-  </tr>
- </tbody>
-</table>
+{{ EmbedLiveSample('Example', '', '700', '', 'Web/API/Event/eventPhase') }}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Spécifications
 
+| Spécification                                                                                        | Statut                           | Commentaire         |
+| ---------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- |
+| {{SpecName("DOM WHATWG", "#dom-event-eventphase", "Event.eventPhase")}}     | {{Spec2("DOM WHATWG")}} |                     |
+| {{SpecName("DOM4", "#dom-event-eventphase", "Event.eventPhase")}}             | {{Spec2("DOM4")}}         |                     |
+| {{SpecName("DOM2 Events", "#Events-Event-eventPhase", "Event.eventPhase")}} | {{Spec2("DOM2 Events")}} | Première définition |
 
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Event.eventPhase")}}</p>
+{{Compat("api.Event.eventPhase")}}
diff --git a/files/fr/web/api/event/explicitoriginaltarget/index.md b/files/fr/web/api/event/explicitoriginaltarget/index.md
index 9844a934bf..cc0bf70366 100644
--- a/files/fr/web/api/event/explicitoriginaltarget/index.md
+++ b/files/fr/web/api/event/explicitoriginaltarget/index.md
@@ -10,40 +10,44 @@ tags:
   - Reference
 translation_of: Web/API/Event/explicitOriginalTarget
 ---
-<div>{{ApiRef("DOM")}}{{Non-standard_header}}</div>
+{{ApiRef("DOM")}}{{Non-standard_header}}
 
-<p>Cette propriété représente la cible originale de l'évènement. Elle est spécifique à Mozilla.</p>
+Cette propriété représente la cible originale de l'évènement. Elle est spécifique à Mozilla.
 
-<p>Si l'évènement a été déporté pour une autre raison qu'une traverséee de frontière anonyme, cette propriété correspondra à la cible avant la déportation de l'évènement. Par exemples, les évènements de la souris sont déportés vers leur nœud parent lorsqu'ils se produisent sur des nœuds texte (cf. {{Bug(185889)}}). Dans ce cas <code><a href="/fr/docs/Web/API/Event/currentTarget">currentTarget</a></code> pointera vers le parent et <code>explicitOriginalTarget</code> vers le nœud texte.</p>
+Si l'évènement a été déporté pour une autre raison qu'une traverséee de frontière anonyme, cette propriété correspondra à la cible avant la déportation de l'évènement. Par exemples, les évènements de la souris sont déportés vers leur nœud parent lorsqu'ils se produisent sur des nœuds texte (cf. {{Bug(185889)}}). Dans ce cas [`currentTarget`](/fr/docs/Web/API/Event/currentTarget) pointera vers le parent et `explicitOriginalTarget` vers le nœud texte.
 
-<p>À la différence de <code><a href="/fr/docs/Web/API/Event/originalTarget">originalTarget</a></code>, <code>explicitOriginalTarget</code> ne contiendra jamais de contenu anonyme.</p>
+À la différence de [`originalTarget`](/fr/docs/Web/API/Event/originalTarget), `explicitOriginalTarget` ne contiendra jamais de contenu anonyme.
 
-<p>Voir aussi une <a href="/fr/docs/DOM/event/Comparison_of_Event_Targets">comparaison des cibles pour les évènements</a>.</p>
+Voir aussi une [comparaison des cibles pour les évènements](/fr/docs/DOM/event/Comparison_of_Event_Targets).
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Cette propriété peut être utiliséee avec <code>&lt;command&gt;</code> afin d'obtenir les détails de l'évènement de l'objet qui a invoqué la commande.</p>
+Cette propriété peut être utiliséee avec `<command>` afin d'obtenir les détails de l'évènement de l'objet qui a invoqué la commande.
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;command id="my-cmd-anAction"
-         oncommand="myCommand(event);"/&gt;
-&lt;menulist&gt;
-  &lt;menupopup&gt;
-    &lt;menuitem label="Get my element name!"
-              command="my-cmd-anAction"/&gt;
-  &lt;/menupopup&gt;
-&lt;/menulist&gt;</pre>
+```html
+<command id="my-cmd-anAction"
+         oncommand="myCommand(event);"/>
+<menulist>
+  <menupopup>
+    <menuitem label="Get my element name!"
+              command="my-cmd-anAction"/>
+  </menupopup>
+</menulist>
+```
 
-<h3 id="JavaScript">JavaScript</h3>
+### JavaScript
 
-<pre class="brush: js">function myCommand(ev) {
+```js
+function myCommand(ev) {
   console.log(ev.explicitOriginalTarget.nodeName);
   // affichera 'menuitem'
-}</pre>
+}
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Cette propriété est spécifique à Mozilla. Elle est définie dans l'IDL {{Source("/dom/public/idl/events/nsIDOMNSEvent.idl")}}</p>
+Cette propriété est spécifique à Mozilla. Elle est définie dans l'IDL {{Source("/dom/public/idl/events/nsIDOMNSEvent.idl")}}
 
-<p>Cette propriété <strong>n'est pas définie</strong> dans la spécification <a href="https://www.w3.org/TR/DOM-Level-2-Events/events.html">DOM Level 2 Events</a></p>
+Cette propriété **n'est pas définie** dans la spécification [DOM Level 2 Events](https://www.w3.org/TR/DOM-Level-2-Events/events.html)
diff --git a/files/fr/web/api/event/index.md b/files/fr/web/api/event/index.md
index a85599f14b..40a67b6565 100644
--- a/files/fr/web/api/event/index.md
+++ b/files/fr/web/api/event/index.md
@@ -1,167 +1,151 @@
 ---
 title: Event
 slug: Web/API/Event
-browser-compat: api.Event
 translation_of: Web/API/Event
+browser-compat: api.Event
 ---
-<p>{{APIRef("DOM")}}</p>
-
-<p>L'interface <code><strong>Event</strong></code> interface représente un évènement qui se produit dans le DOM.</p>
-
-<p>Un évènement peut être déclenché par une action humaine (clic avec la souris, appui sur une touche du clavier) ou généré par des API pour représenter la progression d'une tâche asynchrone. Il est également possible de déclencher un évènement à partir d'un programme, en appelant par exemple la méthode <a href="/fr/docs/Web/API/HTMLElement/click"><code>HTMLElement.click()</code></a> sur un élément ou en définissant l'évènement avant de l'envoyer sur une cible avec la méthode <a href="/fr/docs/Web/API/EventTarget/dispatchEvent"><code>EventTarget.dispatchEvent()</code></a>.</p>
-
-<p>Il existe de nombreux types d'évènements dont certains utilisent d'autres interfaces basées sur <code>Event</code>. L'interface <code>Event</code> contient les propriétés et méthodes qui sont communes à l'ensemble des évènements.</p>
-
-<p>De nombreux éléments DOM peuvent être paramétrés afin d'accepter (« d'écouter ») ces évènements et d'exécuter du code en réaction afin de les traiter (« gérer »). Les gestionnaires d'évènements sont généralement connectés (« attachés ») aux <a href="/fr/docs/Web/HTML/Element">éléments HTML</a> (tels que <code>&lt;button&gt;</code>, <code>&lt;div&gt;</code>, <code>&lt;span&gt;</code>, etc.) grâce à la méthode <a href="/fr/docs/Web/API/EventTarget/addEventListener"><code>EventTarget.addEventListener()</code></a> qui remplace les anciens <a href="/fr/docs/Web/HTML/Global_attributes">attributs de gestion d'évènement</a> qui étaient auparavant utilisés en HTML. Avec cette méthode d'ajout plus récente, les gestionnaires peuvent également être déconnectés/détachés si besoin via la méthode <a href="/fr/docs/Web/API/EventTarget/removeEventListener"><code>EventTarget.removeEventListener()</code></a>.</p>
-
-<div class="notecard note">
-<p><strong>Note :</strong> Il est tout à fait possible d'attacher plusieurs gestionnaires d'évènement à un seul élément, y compris pour la gestion d'un évènement particulier. Ainsi, des modules de code indépendant peuvent attacher leurs gestionnaires de façon indépendante (par exemple, sur une page web, un module de publicité et un autre module d'analyse pourront tout à fait attacher des gestionnaires pour étudier la consultation d'une vidéo).</p>
-</div>
-
-<p>Lorsqu'il y a de nombreux éléments imbriqués, chacun ayant ses propres gestionnaires d'évènement, le traitement des évènements peut se révéler compliqué, notamment lorsqu'un élément parent reçoit le même évènement que ses éléments enfants (par exemple pour des évènements qui se déclenchent sur la surface visuelle de l'élément enfant). Dans ce cas, l'ordre du traitement de ces évènements dépend des paramètres <a href="/fr/docs/Learn/JavaScript/Building_blocks/Events#event_bubbling_and_capture">de bouillonnement (<i>bubbling</i>) et de capture</a> définis sur chaque gestionnaire ainsi déclenché.</p>
-
-<h2 id="introduction">Interfaces basées sur Event</h2>
-
-<p>Voici une liste des interfaces basées sur <code>Event</code> avec un lien vers leur documentation dans la référence MDN.</p>
-
-<p>On notera que l'ensemble des interfaces d'évènements ont un nom qui termine par <i>Event</i> (« évènement » en anglais).</p>
-
-<ul>
- <li><a href="/fr/docs/Web/API/AnimationEvent"><code>AnimationEvent</code></a></li>
- <li><a href="/fr/docs/Web/API/AudioProcessingEvent"><code>AudioProcessingEvent</code></a></li>
- <li><a href="/fr/docs/Web/API/BeforeInputEvent"><code>BeforeInputEvent</code></a></li>
- <li><a href="/fr/docs/Web/API/BeforeUnloadEvent"><code>BeforeUnloadEvent</code></a></li>
- <li><a href="/fr/docs/Web/API/BlobEvent"><code>BlobEvent</code></a></li>
- <li><a href="/fr/docs/Web/API/ClipboardEvent"><code>ClipboardEvent</code></a></li>
- <li><a href="/fr/docs/Web/API/CloseEvent"><code>CloseEvent</code></a></li>
- <li><a href="/fr/docs/Web/API/CompositionEvent"><code>CompositionEvent</code></a></li>
- <li><a href="/fr/docs/Web/API/CSSFontFaceLoadEvent"><code>CSSFontFaceLoadEvent</code></a></li>
- <li><a href="/fr/docs/Web/API/CustomEvent"><code>CustomEvent</code></a></li>
- <li><a href="/fr/docs/Web/API/DeviceMotionEvent"><code>DeviceMotionEvent</code></a></li>
- <li><a href="/fr/docs/Web/API/DeviceOrientationEvent"><code>DeviceOrientationEvent</code></a></li>
- <li><a href="/fr/docs/Web/API/DeviceProximityEvent"><code>DeviceProximityEvent</code></a></li>
- <li><a href="/fr/docs/Web/API/DOMTransactionEvent"><code>DOMTransactionEvent</code></a></li>
- <li><a href="/fr/docs/Web/API/DragEvent"><code>DragEvent</code></a></li>
- <li><a href="/fr/docs/Web/API/EditingBeforeInputEvent"><code>EditingBeforeInputEvent</code></a></li>
- <li><a href="/fr/docs/Web/API/ErrorEvent"><code>ErrorEvent</code></a></li>
- <li><a href="/fr/docs/Web/API/FetchEvent"><code>FetchEvent</code></a></li>
- <li><a href="/fr/docs/Web/API/FocusEvent"><code>FocusEvent</code></a></li>
- <li><a href="/fr/docs/Web/API/GamepadEvent"><code>GamepadEvent</code></a></li>
- <li><a href="/fr/docs/Web/API/HashChangeEvent"><code>HashChangeEvent</code></a></li>
- <li><a href="/fr/docs/Web/API/IDBVersionChangeEvent"><code>IDBVersionChangeEvent</code></a></li>
- <li><a href="/fr/docs/Web/API/InputEvent"><code>InputEvent</code></a></li>
- <li><a href="/fr/docs/Web/API/KeyboardEvent"><code>KeyboardEvent</code></a></li>
- <li><a href="/fr/docs/Web/API/MediaStreamEvent"><code>MediaStreamEvent</code></a></li>
- <li><a href="/fr/docs/Web/API/MessageEvent"><code>MessageEvent</code></a></li>
- <li><a href="/fr/docs/Web/API/MouseEvent"><code>MouseEvent</code></a></li>
- <li><a href="/fr/docs/Web/API/MutationEvent"><code>MutationEvent</code></a></li>
- <li><a href="/fr/docs/Web/API/OfflineAudioCompletionEvent"><code>OfflineAudioCompletionEvent</code></a></li>
- <li><a href="/fr/docs/Web/API/OverconstrainedError"><code>OverconstrainedError</code></a></li>
- <li><a href="/fr/docs/Web/API/PageTransitionEvent"><code>PageTransitionEvent</code></a></li>
- <li><a href="/fr/docs/Web/API/PaymentRequestUpdateEvent"><code>PaymentRequestUpdateEvent</code></a></li>
- <li><a href="/fr/docs/Web/API/PointerEvent"><code>PointerEvent</code></a></li>
- <li><a href="/fr/docs/Web/API/PopStateEvent"><code>PopStateEvent</code></a></li>
- <li><a href="/fr/docs/Web/API/ProgressEvent"><code>ProgressEvent</code></a></li>
- <li><a href="/fr/docs/Web/API/RelatedEvent"><code>RelatedEvent</code></a></li>
- <li><a href="/fr/docs/Web/API/RTCDataChannelEvent"><code>RTCDataChannelEvent</code></a></li>
- <li><a href="/fr/docs/Web/API/RTCPeerConnectionIceEvent"><code>RTCPeerConnectionIceEvent</code></a></li>
- <li><a href="/fr/docs/Web/API/SensorEvent"><code>SensorEvent</code></a></li>
- <li><a href="/fr/docs/Web/API/StorageEvent"><code>StorageEvent</code></a></li>
- <li><a href="/fr/docs/Web/API/SVGEvent"><code>SVGEvent</code></a></li>
- <li><a href="/fr/docs/Web/API/SVGZoomEvent"><code>SVGZoomEvent</code></a></li>
- <li><a href="/fr/docs/Web/API/TimeEvent"><code>TimeEvent</code></a></li>
- <li><a href="/fr/docs/Web/API/TouchEvent"><code>TouchEvent</code></a></li>
- <li><a href="/fr/docs/Web/API/TrackEvent"><code>TrackEvent</code></a></li>
- <li><a href="/fr/docs/Web/API/TransitionEvent"><code>TransitionEvent</code></a></li>
- <li><a href="/fr/docs/Web/API/UIEvent"><code>UIEvent</code></a></li>
- <li><a href="/fr/docs/Web/API/UserProximityEvent"><code>UserProximityEvent</code></a></li>
- <li><a href="/fr/docs/Web/API/WebGLContextEvent"><code>WebGLContextEvent</code></a></li>
- <li><a href="/fr/docs/Web/API/WheelEvent"><code>WheelEvent</code></a></li>
-</ul>
-
-<h2 id="constructor">Constructeur</h2>
-
-<dl>
- <dt><a href="/fr/docs/Web/API/Event/Event"><code>Event()</code></a></dt>
- <dd>Crée un objet <code>Event</code> et le renvoie à l'appelant.</dd>
-</dl>
-
-<h2 id="properties">Propriétés</h2>
-
-<dl>
- <dt><a href="/fr/docs/Web/API/Event/bubbles"><code>Event.bubbles</code></a> {{readonlyinline}}</dt>
- <dd>Un booléen qui indique si l'évènement bouillonne/remonte vers le haut dans l'arbre du DOM.</dd>
- <dt><a href="/fr/docs/Web/API/Event/cancelBubble"><code>Event.cancelBubble</code></a></dt>
- <dd>Un alias historique de <a href="/fr/docs/Web/API/Event/stopPropagation"><code>Event.stopPropagation()</code></a>. Définir sa valeur à <code>true</code> avant le retour d'un gestionnaire d'évènement empêchera la propagation de l'évènement.</dd>
- <dt><a href="/fr/docs/Web/API/Event/cancelable"><code>Event.cancelable</code></a> {{readonlyinline}}</dt>
- <dd>Un booléen qui indique si l'évènement peut être annulé.</dd>
- <dt><a href="/fr/docs/Web/API/Event/composed"><code>Event.composed</code></a> {{ReadOnlyInline}}</dt>
- <dd>Un booléen qui indique si l'évènement peut bouillonner entre l'arbre du shadow DOM et le DOM standard.</dd>
- <dt><a href="/fr/docs/Web/API/Event/currentTarget"><code>Event.currentTarget</code></a> {{readonlyinline}}</dt>
- <dd>Une référence vers la cible actuellement enregistrée pour l'évènement. Il s'agit de l'objet vers lequel l'évènement est présentement destiné à être envoyé. Cette cible peut avoir été modifiée pendant la vie de l'évènement via un reciblage.</dd>
- <dt><a href="/fr/docs/Web/API/Event/deepPath"><code>Event.deepPath</code></a> {{non-standard_inline}}</dt>
- <dd>Un tableau (<a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Array"><code>Array</code></a>) de nœuds (<a href="/fr/docs/Web/API/Node"><code>Node</code></a>) du DOM qui ont été parcourus lors du bouillonnement/de la remontée de l'évènement.</dd>
- <dt><a href="/fr/docs/Web/API/Event/defaultPrevented"><code>Event.defaultPrevented</code></a> {{readonlyinline}}</dt>
- <dd>Indique si un appel à <a href="/fr/docs/Web/API/Event/preventDefault"><code>Event.preventDefault()</code></a> a annulé l'évènement.</dd>
- <dt><a href="/fr/docs/Web/API/Event/eventPhase"><code>Event.eventPhase</code></a> {{readonlyinline}}</dt>
- <dd>Indique la phase du flux de l'évènement qui est en cours de traitement.</dd>
- <dt><a href="/fr/docs/Web/API/Event/explicitOriginalTarget"><code>Event.explicitOriginalTarget</code></a> {{non-standard_inline}} {{readonlyinline}}</dt>
- <dd>La cible explicite et originnelle de l'évènement (spécifique à Mozilla).</dd>
- <dt><a href="/fr/docs/Web/API/Event/originalTarget"><code>Event.originalTarget</code></a> {{non-standard_inline}} {{readonlyinline}}</dt>
- <dd>La cible originale de l'évènement avant tout reciblage (spécifique à Mozilla).</dd>
- <dt><a href="/fr/docs/Web/API/Event/returnValue"><code>Event.returnValue</code></a> {{Deprecated_Inline}}</dt>
- <dd>Une propriété historique, introduite par Internet Explorer puis adoptée au sein de la spécification du DOM pour la compatibilité des sites existants. À la place, on privilégiera l'usage de <a href="/fr/docs/Web/API/Event/preventDefault"><code>Event.preventDefault()</code></a> et <a href="/fr/docs/Web/API/Event/defaultPrevented"><code>Event.defaultPrevented</code></a>.</dd>
- <dt><a href="/fr/docs/Web/API/Event/srcElement"><code>Event.srcElement</code></a> {{non-standard_inline}}</dt>
- <dd>Un alias non-standard (provenant d'anciennes versions d'Internet Explorer) pour <a href="/fr/docs/Web/API/Event/target"><code>Event.target</code></a>. Certains navigateurs le prennent en charge à des fins de compatibilité web.</dd>
- <dt><a href="/fr/docs/Web/API/Event/target"><code>Event.target</code></a> {{readonlyinline}}</dt>
- <dd>Une référence à la cible à laquelle l'évènement était initialement destiné.</dd>
- <dt><a href="/fr/docs/Web/API/Event/timeStamp"><code>Event.timeStamp</code></a> {{readonlyinline}}</dt>
- <dd>Le temps auquel l'évènement a été créé (exprimé en millisecondes). La spécification indique que cette valeur est relative à l'epoch mais l'implémentation des navigateurs peut varier. Des travaux sont en cours afin que cette valeur devienne une valeur de type <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a>.</dd>
- <dt><a href="/fr/docs/Web/API/Event/type"><code>Event.type</code></a> {{readonlyinline}}</dt>
- <dd>Le nom de l'évènement, exprimé de façon insensible à la casse.</dd>
- <dt><a href="/fr/docs/Web/API/Event/isTrusted"><code>Event.isTrusted</code></a> {{readonlyinline}}</dt>
- <dd>Indique si l'évènement a été initié par le navigateur (suite à une action humaine comme un clic) ou par un script (en utilisant une méthode de création comme <a href="/fr/docs/Web/API/Event/initEvent"><code>Event.initEvent</code></a>).</dd>
-</dl>
-
-<h3 id="deprecated_properties">Propriétés dépréciées</h3>
-
-<dl>
- <dt><a href="/fr/docs/Web/API/Event/composed"><code>Event.scoped</code></a> {{readonlyinline}} {{deprecated_inline}}</dt>
- <dd>Un booléen qui indique si l'évènement courant remontera de l'arbre du shadow DOM vers l'arbre du DOM classique. <a href="/fr/docs/Web/API/Event/composed"><code>Event.composed</code></a> doit être utilisé à la place.</dd>
-</dl>
-
-<h2 id="methods">Méthodes</h2>
-
-<dl>
- <dt><a href="/fr/docs/Web/API/Event/composedPath"><code>Event.composedPath()</code></a></dt>
- <dd>Renvoie le chemin de l'évènement (c'est-à-dire les objets pour lesquels des gestionnaires d'évènements seront appelés). Ce chemin n'inclut pas les nœuds des arbres shadow si la racine shadow a été créée avec un <a href="/fr/docs/Web/API/ShadowRoot/mode"><code>ShadowRoot.mode</code></a>.</dd>
- <dt><a href="/fr/docs/Web/API/Event/preventDefault"><code>Event.preventDefault()</code></a></dt>
- <dd>Annule l'évènement (si celui-ci peut être annulé).</dd>
- <dt><a href="/fr/docs/Web/API/Event/stopImmediatePropagation"><code>Event.stopImmediatePropagation</code></a></dt>
- <dd>Pour l'évènement courant, empêche les autres gestionnaires d'évènements d'être appelés. Cela inclut les gestionnaires attachés au même élément ainsi que ceux attachés aux éléments qui seront parcourus ensuite (pendant la phase de capture par exemple).</dd>
- <dt><a href="/fr/docs/Web/API/Event/stopPropagation"><code>Event.stopPropagation</code></a></dt>
- <dd>Arrête la propagation des évènements plus loin dans le DOM.</dd>
-</dl>
-
-<h3 id="deprecated_methods">Méthodes dépréciées</h3>
-
-<dl>
- <dt><a href="/fr/docs/Web/API/Event/initEvent"><code>Event.initEvent()</code></a> {{deprecated_inline}}</dt>
- <dd>Initialise la valeur d'un évènement créé. Si l'évènement a déjà diffusé, cette méthode n'a aucun effet.</dd>
-</dl>
-
-<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 types d'évènement disponibles : <a href="/fr/docs/Web/Events">Référence des évènements</a></li>
-  <li><a href="/fr/docs/Web/API/Event/Comparison_of_Event_Targets">Comparaison des cibles d'évènements</a> (<code>target</code> vs <code>currentTarget</code> vs <code>relatedTarget</code> vs <code>originalTarget</code>)</li>
-  <li><a href="/fr/docs/Web/Events/Creating_and_triggering_events">Créer et déclencher des évènements personnalisés</a></li>
-</ul>
+{{APIRef("DOM")}}
+
+L'interface **`Event`** interface représente un évènement qui se produit dans le DOM.
+
+Un évènement peut être déclenché par une action humaine (clic avec la souris, appui sur une touche du clavier) ou généré par des API pour représenter la progression d'une tâche asynchrone. Il est également possible de déclencher un évènement à partir d'un programme, en appelant par exemple la méthode [`HTMLElement.click()`](/fr/docs/Web/API/HTMLElement/click) sur un élément ou en définissant l'évènement avant de l'envoyer sur une cible avec la méthode [`EventTarget.dispatchEvent()`](/fr/docs/Web/API/EventTarget/dispatchEvent).
+
+Il existe de nombreux types d'évènements dont certains utilisent d'autres interfaces basées sur `Event`. L'interface `Event` contient les propriétés et méthodes qui sont communes à l'ensemble des évènements.
+
+De nombreux éléments DOM peuvent être paramétrés afin d'accepter (« d'écouter ») ces évènements et d'exécuter du code en réaction afin de les traiter (« gérer »). Les gestionnaires d'évènements sont généralement connectés (« attachés ») aux [éléments HTML](/fr/docs/Web/HTML/Element) (tels que `<button>`, `<div>`, `<span>`, etc.) grâce à la méthode [`EventTarget.addEventListener()`](/fr/docs/Web/API/EventTarget/addEventListener) qui remplace les anciens [attributs de gestion d'évènement](/fr/docs/Web/HTML/Global_attributes) qui étaient auparavant utilisés en HTML. Avec cette méthode d'ajout plus récente, les gestionnaires peuvent également être déconnectés/détachés si besoin via la méthode [`EventTarget.removeEventListener()`](/fr/docs/Web/API/EventTarget/removeEventListener).
+
+> **Note :** Il est tout à fait possible d'attacher plusieurs gestionnaires d'évènement à un seul élément, y compris pour la gestion d'un évènement particulier. Ainsi, des modules de code indépendant peuvent attacher leurs gestionnaires de façon indépendante (par exemple, sur une page web, un module de publicité et un autre module d'analyse pourront tout à fait attacher des gestionnaires pour étudier la consultation d'une vidéo).
+
+Lorsqu'il y a de nombreux éléments imbriqués, chacun ayant ses propres gestionnaires d'évènement, le traitement des évènements peut se révéler compliqué, notamment lorsqu'un élément parent reçoit le même évènement que ses éléments enfants (par exemple pour des évènements qui se déclenchent sur la surface visuelle de l'élément enfant). Dans ce cas, l'ordre du traitement de ces évènements dépend des paramètres [de bouillonnement (_bubbling_) et de capture](/fr/docs/Learn/JavaScript/Building_blocks/Events#event_bubbling_and_capture) définis sur chaque gestionnaire ainsi déclenché.
+
+## Interfaces basées sur Event
+
+Voici une liste des interfaces basées sur `Event` avec un lien vers leur documentation dans la référence MDN.
+
+On notera que l'ensemble des interfaces d'évènements ont un nom qui termine par _Event_ (« évènement » en anglais).
+
+- [`AnimationEvent`](/fr/docs/Web/API/AnimationEvent)
+- [`AudioProcessingEvent`](/fr/docs/Web/API/AudioProcessingEvent)
+- [`BeforeInputEvent`](/fr/docs/Web/API/BeforeInputEvent)
+- [`BeforeUnloadEvent`](/fr/docs/Web/API/BeforeUnloadEvent)
+- [`BlobEvent`](/fr/docs/Web/API/BlobEvent)
+- [`ClipboardEvent`](/fr/docs/Web/API/ClipboardEvent)
+- [`CloseEvent`](/fr/docs/Web/API/CloseEvent)
+- [`CompositionEvent`](/fr/docs/Web/API/CompositionEvent)
+- [`CSSFontFaceLoadEvent`](/fr/docs/Web/API/CSSFontFaceLoadEvent)
+- [`CustomEvent`](/fr/docs/Web/API/CustomEvent)
+- [`DeviceMotionEvent`](/fr/docs/Web/API/DeviceMotionEvent)
+- [`DeviceOrientationEvent`](/fr/docs/Web/API/DeviceOrientationEvent)
+- [`DeviceProximityEvent`](/fr/docs/Web/API/DeviceProximityEvent)
+- [`DOMTransactionEvent`](/fr/docs/Web/API/DOMTransactionEvent)
+- [`DragEvent`](/fr/docs/Web/API/DragEvent)
+- [`EditingBeforeInputEvent`](/fr/docs/Web/API/EditingBeforeInputEvent)
+- [`ErrorEvent`](/fr/docs/Web/API/ErrorEvent)
+- [`FetchEvent`](/fr/docs/Web/API/FetchEvent)
+- [`FocusEvent`](/fr/docs/Web/API/FocusEvent)
+- [`GamepadEvent`](/fr/docs/Web/API/GamepadEvent)
+- [`HashChangeEvent`](/fr/docs/Web/API/HashChangeEvent)
+- [`IDBVersionChangeEvent`](/fr/docs/Web/API/IDBVersionChangeEvent)
+- [`InputEvent`](/fr/docs/Web/API/InputEvent)
+- [`KeyboardEvent`](/fr/docs/Web/API/KeyboardEvent)
+- [`MediaStreamEvent`](/fr/docs/Web/API/MediaStreamEvent)
+- [`MessageEvent`](/fr/docs/Web/API/MessageEvent)
+- [`MouseEvent`](/fr/docs/Web/API/MouseEvent)
+- [`MutationEvent`](/fr/docs/Web/API/MutationEvent)
+- [`OfflineAudioCompletionEvent`](/fr/docs/Web/API/OfflineAudioCompletionEvent)
+- [`OverconstrainedError`](/fr/docs/Web/API/OverconstrainedError)
+- [`PageTransitionEvent`](/fr/docs/Web/API/PageTransitionEvent)
+- [`PaymentRequestUpdateEvent`](/fr/docs/Web/API/PaymentRequestUpdateEvent)
+- [`PointerEvent`](/fr/docs/Web/API/PointerEvent)
+- [`PopStateEvent`](/fr/docs/Web/API/PopStateEvent)
+- [`ProgressEvent`](/fr/docs/Web/API/ProgressEvent)
+- [`RelatedEvent`](/fr/docs/Web/API/RelatedEvent)
+- [`RTCDataChannelEvent`](/fr/docs/Web/API/RTCDataChannelEvent)
+- [`RTCPeerConnectionIceEvent`](/fr/docs/Web/API/RTCPeerConnectionIceEvent)
+- [`SensorEvent`](/fr/docs/Web/API/SensorEvent)
+- [`StorageEvent`](/fr/docs/Web/API/StorageEvent)
+- [`SVGEvent`](/fr/docs/Web/API/SVGEvent)
+- [`SVGZoomEvent`](/fr/docs/Web/API/SVGZoomEvent)
+- [`TimeEvent`](/fr/docs/Web/API/TimeEvent)
+- [`TouchEvent`](/fr/docs/Web/API/TouchEvent)
+- [`TrackEvent`](/fr/docs/Web/API/TrackEvent)
+- [`TransitionEvent`](/fr/docs/Web/API/TransitionEvent)
+- [`UIEvent`](/fr/docs/Web/API/UIEvent)
+- [`UserProximityEvent`](/fr/docs/Web/API/UserProximityEvent)
+- [`WebGLContextEvent`](/fr/docs/Web/API/WebGLContextEvent)
+- [`WheelEvent`](/fr/docs/Web/API/WheelEvent)
+
+## Constructeur
+
+- [`Event()`](/fr/docs/Web/API/Event/Event)
+  - : Crée un objet `Event` et le renvoie à l'appelant.
+
+## Propriétés
+
+- [`Event.bubbles`](/fr/docs/Web/API/Event/bubbles) {{readonlyinline}}
+  - : Un booléen qui indique si l'évènement bouillonne/remonte vers le haut dans l'arbre du DOM.
+- [`Event.cancelBubble`](/fr/docs/Web/API/Event/cancelBubble)
+  - : Un alias historique de [`Event.stopPropagation()`](/fr/docs/Web/API/Event/stopPropagation). Définir sa valeur à `true` avant le retour d'un gestionnaire d'évènement empêchera la propagation de l'évènement.
+- [`Event.cancelable`](/fr/docs/Web/API/Event/cancelable) {{readonlyinline}}
+  - : Un booléen qui indique si l'évènement peut être annulé.
+- [`Event.composed`](/fr/docs/Web/API/Event/composed) {{ReadOnlyInline}}
+  - : Un booléen qui indique si l'évènement peut bouillonner entre l'arbre du shadow DOM et le DOM standard.
+- [`Event.currentTarget`](/fr/docs/Web/API/Event/currentTarget) {{readonlyinline}}
+  - : Une référence vers la cible actuellement enregistrée pour l'évènement. Il s'agit de l'objet vers lequel l'évènement est présentement destiné à être envoyé. Cette cible peut avoir été modifiée pendant la vie de l'évènement via un reciblage.
+- [`Event.deepPath`](/fr/docs/Web/API/Event/deepPath) {{non-standard_inline}}
+  - : Un tableau ([`Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array)) de nœuds ([`Node`](/fr/docs/Web/API/Node)) du DOM qui ont été parcourus lors du bouillonnement/de la remontée de l'évènement.
+- [`Event.defaultPrevented`](/fr/docs/Web/API/Event/defaultPrevented) {{readonlyinline}}
+  - : Indique si un appel à [`Event.preventDefault()`](/fr/docs/Web/API/Event/preventDefault) a annulé l'évènement.
+- [`Event.eventPhase`](/fr/docs/Web/API/Event/eventPhase) {{readonlyinline}}
+  - : Indique la phase du flux de l'évènement qui est en cours de traitement.
+- [`Event.explicitOriginalTarget`](/fr/docs/Web/API/Event/explicitOriginalTarget) {{non-standard_inline}} {{readonlyinline}}
+  - : La cible explicite et originnelle de l'évènement (spécifique à Mozilla).
+- [`Event.originalTarget`](/fr/docs/Web/API/Event/originalTarget) {{non-standard_inline}} {{readonlyinline}}
+  - : La cible originale de l'évènement avant tout reciblage (spécifique à Mozilla).
+- [`Event.returnValue`](/fr/docs/Web/API/Event/returnValue) {{Deprecated_Inline}}
+  - : Une propriété historique, introduite par Internet Explorer puis adoptée au sein de la spécification du DOM pour la compatibilité des sites existants. À la place, on privilégiera l'usage de [`Event.preventDefault()`](/fr/docs/Web/API/Event/preventDefault) et [`Event.defaultPrevented`](/fr/docs/Web/API/Event/defaultPrevented).
+- [`Event.srcElement`](/fr/docs/Web/API/Event/srcElement) {{non-standard_inline}}
+  - : Un alias non-standard (provenant d'anciennes versions d'Internet Explorer) pour [`Event.target`](/fr/docs/Web/API/Event/target). Certains navigateurs le prennent en charge à des fins de compatibilité web.
+- [`Event.target`](/fr/docs/Web/API/Event/target) {{readonlyinline}}
+  - : Une référence à la cible à laquelle l'évènement était initialement destiné.
+- [`Event.timeStamp`](/fr/docs/Web/API/Event/timeStamp) {{readonlyinline}}
+  - : Le temps auquel l'évènement a été créé (exprimé en millisecondes). La spécification indique que cette valeur est relative à l'epoch mais l'implémentation des navigateurs peut varier. Des travaux sont en cours afin que cette valeur devienne une valeur de type [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp).
+- [`Event.type`](/fr/docs/Web/API/Event/type) {{readonlyinline}}
+  - : Le nom de l'évènement, exprimé de façon insensible à la casse.
+- [`Event.isTrusted`](/fr/docs/Web/API/Event/isTrusted) {{readonlyinline}}
+  - : Indique si l'évènement a été initié par le navigateur (suite à une action humaine comme un clic) ou par un script (en utilisant une méthode de création comme [`Event.initEvent`](/fr/docs/Web/API/Event/initEvent)).
+
+### Propriétés dépréciées
+
+- [`Event.scoped`](/fr/docs/Web/API/Event/composed) {{readonlyinline}} {{deprecated_inline}}
+  - : Un booléen qui indique si l'évènement courant remontera de l'arbre du shadow DOM vers l'arbre du DOM classique. [`Event.composed`](/fr/docs/Web/API/Event/composed) doit être utilisé à la place.
+
+## Méthodes
+
+- [`Event.composedPath()`](/fr/docs/Web/API/Event/composedPath)
+  - : Renvoie le chemin de l'évènement (c'est-à-dire les objets pour lesquels des gestionnaires d'évènements seront appelés). Ce chemin n'inclut pas les nœuds des arbres shadow si la racine shadow a été créée avec un [`ShadowRoot.mode`](/fr/docs/Web/API/ShadowRoot/mode).
+- [`Event.preventDefault()`](/fr/docs/Web/API/Event/preventDefault)
+  - : Annule l'évènement (si celui-ci peut être annulé).
+- [`Event.stopImmediatePropagation`](/fr/docs/Web/API/Event/stopImmediatePropagation)
+  - : Pour l'évènement courant, empêche les autres gestionnaires d'évènements d'être appelés. Cela inclut les gestionnaires attachés au même élément ainsi que ceux attachés aux éléments qui seront parcourus ensuite (pendant la phase de capture par exemple).
+- [`Event.stopPropagation`](/fr/docs/Web/API/Event/stopPropagation)
+  - : Arrête la propagation des évènements plus loin dans le DOM.
+
+### Méthodes dépréciées
+
+- [`Event.initEvent()`](/fr/docs/Web/API/Event/initEvent) {{deprecated_inline}}
+  - : Initialise la valeur d'un évènement créé. Si l'évènement a déjà diffusé, cette méthode n'a aucun effet.
+
+## Spécifications
+
+{{Specifications}}
+
+## Compatibilité des navigateurs
+
+{{Compat}}
+
+## Voir aussi
+
+- Les types d'évènement disponibles : [Référence des évènements](/fr/docs/Web/Events)
+- [Comparaison des cibles d'évènements](/fr/docs/Web/API/Event/Comparison_of_Event_Targets) (`target` vs `currentTarget` vs `relatedTarget` vs `originalTarget`)
+- [Créer et déclencher des évènements personnalisés](/fr/docs/Web/Events/Creating_and_triggering_events)
diff --git a/files/fr/web/api/event/initevent/index.md b/files/fr/web/api/event/initevent/index.md
index 6f06e8b7f3..fceca59b46 100644
--- a/files/fr/web/api/event/initevent/index.md
+++ b/files/fr/web/api/event/initevent/index.md
@@ -9,77 +9,54 @@ tags:
   - Reference
 translation_of: Web/API/Event/initEvent
 ---
-<p>{{ApiRef("DOM")}}{{deprecated_header}}</p>
-
-<p>La méthode <strong><code>Event.initEvent()</code></strong> est utilisée pour initialiser la valeur d'un objet {{domxref("event")}} créé à l'aide de {{domxref("Document.createEvent()")}}.</p>
-
-<p>Les évènements initialisés par ce moyen ont été créés par la méthode {{domxref("Document.createEvent()")}}. Celle-ci doit être appelée à définir l'évènement avant qu'il ne soit distribué, en utilisant {{domxref("EventTarget.dispatchEvent()")}}. Une fois l'évènement transmis, la méthode ne fait plus rien.</p>
-
-<div class="note">
-<p><strong>Note :</strong> Ne pas utiliser cette méthode qui est dépréciée.</p>
-
-<p>À la place, utilisez un constructeur d'évènements spécifique comme {{domxref("Event.Event", "Event()")}} . La page <a href="/fr/docs/Web/Guide/DOM/Events/Creating_and_triggering_events">Création et déclenchement d'évènements</a> vous donne plus d'informations sur la manière de les utiliser.</p>
-</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="eval"><em>event</em>.initEvent(<em>type</em>, <em>bubbles</em>, <em>cancelable</em>)
-</pre>
-
-<dl>
- <dt><code>type</code></dt>
- <dd>est une {{domxref("DOMString")}}  qui définit le type d'évènement.</dd>
- <dt><code>bubbles</code></dt>
- <dd>est un {{jsxref("Boolean")}} indiquant si l'évènement doit se propager vers le haut dans la chaîne des évènements ou non. Une fois déterminé, la propriété en lecture seule  {{domxref("Event.bubbles")}} donnera sa valeur.</dd>
- <dt><code>cancelable</code></dt>
- <dd>Une valeur booléenne définissant si l'évènement peut être annulé. Une fois déterminé, la propriété en lecture seule  {{ domxref("Event.cancelable") }}  donnera sa valeur.</dd>
-</dl>
-
-<h2 id="Exemple">Exemple</h2>
-
-<pre><code>// Crée un évènement.
-var event = document.createEvent('Event');
-</code>
-// Crée un évènement click qui doit se propager vers le haut
-// et ne peut être annulé<code>
-event.initEvent('click', true, false);
-
-// Écoute les évènements.
-elem.addEventListener('click', function (e) {
-  // e.target matches elem
-}, false);
-
-elem.dispatchEvent(event);</code>
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#dom-event-initevent','Event.initEvent()')}}</td>
-   <td>{{Spec2("DOM WHATWG")}}</td>
-   <td>Depuis {{SpecName('DOM2 Events')}}, dépréciée, remplacée par les constructeurs d'événements.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Events','##Events-Event-initEvent','Event.initEvent()')}}</td>
-   <td>{{Spec2('DOM2 Events')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Event.initEvent")}}</p>
-
-<h2 id="See_also">Voir aussi</h2>
-
-<ul>
-  <li>Le constructeur à utiliser à la place de cette méthode dépréciée : {{domxref("Event.Event","Event()")}}. Des constructeurs plus spécifiques peuvent aussi être utilisés.</li>
-</ul>
+{{ApiRef("DOM")}}{{deprecated_header}}
+
+La méthode **`Event.initEvent()`** est utilisée pour initialiser la valeur d'un objet {{domxref("event")}} créé à l'aide de {{domxref("Document.createEvent()")}}.
+
+Les évènements initialisés par ce moyen ont été créés par la méthode {{domxref("Document.createEvent()")}}. Celle-ci doit être appelée à définir l'évènement avant qu'il ne soit distribué, en utilisant {{domxref("EventTarget.dispatchEvent()")}}. Une fois l'évènement transmis, la méthode ne fait plus rien.
+
+> **Note :** Ne pas utiliser cette méthode qui est dépréciée.
+>
+> À la place, utilisez un constructeur d'évènements spécifique comme {{domxref("Event.Event", "Event()")}} . La page [Création et déclenchement d'évènements](/fr/docs/Web/Guide/DOM/Events/Creating_and_triggering_events) vous donne plus d'informations sur la manière de les utiliser.
+
+## Syntaxe
+
+    event.initEvent(type, bubbles, cancelable)
+
+- `type`
+  - : est une {{domxref("DOMString")}}  qui définit le type d'évènement.
+- `bubbles`
+  - : est un {{jsxref("Boolean")}} indiquant si l'évènement doit se propager vers le haut dans la chaîne des évènements ou non. Une fois déterminé, la propriété en lecture seule  {{domxref("Event.bubbles")}} donnera sa valeur.
+- `cancelable`
+  - : Une valeur booléenne définissant si l'évènement peut être annulé. Une fois déterminé, la propriété en lecture seule  {{ domxref("Event.cancelable") }}  donnera sa valeur.
+
+## Exemple
+
+    // Crée un évènement.
+    var event = document.createEvent('Event');
+
+    // Crée un évènement click qui doit se propager vers le haut
+    // et ne peut être annulé
+    event.initEvent('click', true, false);
+
+    // Écoute les évènements.
+    elem.addEventListener('click', function (e) {
+      // e.target matches elem
+    }, false);
+
+    elem.dispatchEvent(event);
+
+## Spécifications
+
+| Spécification                                                                                        | Statut                           | Commentaire                                                                                           |
+| ---------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------------------------------------------------------------- |
+| {{SpecName('DOM WHATWG', '#dom-event-initevent','Event.initEvent()')}}         | {{Spec2("DOM WHATWG")}} | Depuis {{SpecName('DOM2 Events')}}, dépréciée, remplacée par les constructeurs d'événements. |
+| {{SpecName('DOM2 Events','##Events-Event-initEvent','Event.initEvent()')}} | {{Spec2('DOM2 Events')}} | Définition initiale.                                                                                  |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Event.initEvent")}}
+
+## Voir aussi
+
+- Le constructeur à utiliser à la place de cette méthode dépréciée : {{domxref("Event.Event","Event()")}}. Des constructeurs plus spécifiques peuvent aussi être utilisés.
diff --git a/files/fr/web/api/event/istrusted/index.md b/files/fr/web/api/event/istrusted/index.md
index 0267223d10..cdb9b49165 100644
--- a/files/fr/web/api/event/istrusted/index.md
+++ b/files/fr/web/api/event/istrusted/index.md
@@ -9,53 +9,60 @@ tags:
   - Référence(2)
 translation_of: Web/API/Event/isTrusted
 ---
-<p>{{APIRef("DOM")}}</p>
+{{APIRef("DOM")}}
 
-<p>La propriété en lecture seule isTrusted, de l'interface {{domxref("Event")}}, est un booléen qui vaut true lorsque l'événement est généré par une action de l'utilisateur, et false, quand l'événement est créé ou modifié par un script ou envoyé par dispatchEvent.</p>
+La propriété en lecture seule isTrusted, de l'interface {{domxref("Event")}}, est un booléen qui vaut true lorsque l'événement est généré par une action de l'utilisateur, et false, quand l'événement est créé ou modifié par un script ou envoyé par dispatchEvent.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var bool = event.isTrusted;
-</pre>
+    var bool = event.isTrusted;
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre> if (e.isTrusted) {
-     /* The event is trusted. */
- } else {
-     /* The event is not trusted. */
- }
-</pre>
+     if (e.isTrusted) {
+         /* The event is trusted. */
+     } else {
+         /* The event is not trusted. */
+     }
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#dom-event-istrusted', 'Event.isTrusted')}}</td>
-   <td>{{ Spec2('DOM WHATWG') }}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM3 Events', '#trusted-events', 'Trusted events')}}</td>
-   <td>{{Spec2('DOM3 Events')}}</td>
-   <td>
-    <p>Ajoute des conditions à propos des événement trusted et untrusted. Cependant, cela ne défini pas la propriété isTrusted.</p>
-   </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM4', '#dom-event-istrusted', 'Event.isTrusted')}}</td>
-   <td>{{Spec2('DOM4')}}</td>
-   <td>Première définition.</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="col">Spécification</th>
+      <th scope="col">Statut</th>
+      <th scope="col">Commentaires</th>
+    </tr>
+    <tr>
+      <td>
+        {{SpecName('DOM WHATWG', '#dom-event-istrusted', 'Event.isTrusted')}}
+      </td>
+      <td>{{ Spec2('DOM WHATWG') }}</td>
+      <td> </td>
+    </tr>
+    <tr>
+      <td>
+        {{SpecName('DOM3 Events', '#trusted-events', 'Trusted events')}}
+      </td>
+      <td>{{Spec2('DOM3 Events')}}</td>
+      <td>
+        <p>
+          Ajoute des conditions à propos des événement trusted et untrusted.
+          Cependant, cela ne défini pas la propriété isTrusted.
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        {{SpecName('DOM4', '#dom-event-istrusted', 'Event.isTrusted')}}
+      </td>
+      <td>{{Spec2('DOM4')}}</td>
+      <td>Première définition.</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Event.isTrusted")}}</p>
+{{Compat("api.Event.isTrusted")}}
diff --git a/files/fr/web/api/event/originaltarget/index.md b/files/fr/web/api/event/originaltarget/index.md
index 810c8276a5..39e7d7b781 100644
--- a/files/fr/web/api/event/originaltarget/index.md
+++ b/files/fr/web/api/event/originaltarget/index.md
@@ -10,28 +10,26 @@ tags:
   - origine
 translation_of: Web/API/Event/originalTarget
 ---
-<div>{{ ApiRef("DOM") }} {{Non-standard_header}}</div>
+{{ ApiRef("DOM") }} {{Non-standard_header}}
 
-<p>La cible d'origine de l'évènement avant tout reciblage. (spécifique à Mozilla)</p>
+La cible d'origine de l'évènement avant tout reciblage. (spécifique à Mozilla)
 
-<p>En présence de contenu anonyme <a href="/fr/docs/XBL">XBL</a>, ce sera le nœud anonyme sur lequel l'événement a été déclenché à l'origine. Voir <a href="/fr/docs/Mozilla/Tech/XBL/XBL_1.0_Reference/Anonymous_Content#Event_Flow_and_Targeting">Anonymous Content#Event_Flow_and_Targeting</a> pour plus de détails.</p>
+En présence de contenu anonyme [XBL](/fr/docs/XBL), ce sera le nœud anonyme sur lequel l'événement a été déclenché à l'origine. Voir [Anonymous Content#Event_Flow_and_Targeting](/fr/docs/Mozilla/Tech/XBL/XBL_1.0_Reference/Anonymous_Content#Event_Flow_and_Targeting) pour plus de détails.
 
-<p><strong>Note :</strong> <code>originalTarget</code> peut aussi être un contenu anonyme natif  (voir {{Bug("208427")}}), dans ce cas, il est inutile pour le code non privilégié.</p>
+**Note :** `originalTarget` peut aussi être un contenu anonyme natif  (voir {{Bug("208427")}}), dans ce cas, il est inutile pour le code non privilégié.
 
-<p>Voir aussi <a href="/fr/docs/Web/API/Event/Comparaison_des_cibles_d_%C3%A9v%C3%A8nements">Comparaison des cibles d'évènements.</a></p>
+Voir aussi [Comparaison des cibles d'évènements.](/fr/docs/Web/API/Event/Comparaison_des_cibles_d_%C3%A9v%C3%A8nements)
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<p><em>Besoin d'un exemple qui ait du sens ici. ^^</em></p>
+_Besoin d'un exemple qui ait du sens ici. ^^_
 
-<h2 id="Specification">Spécification</h2>
+## Spécification
 
-<p>C'est une propriété propre à Mozilla. Définie dans {{Source("/dom/public/idl/events/nsIDOMNSEvent.idl")}}</p>
+C'est une propriété propre à Mozilla. Définie dans {{Source("/dom/public/idl/events/nsIDOMNSEvent.idl")}}
 
-<p>Cette propriété d'évènements <strong>n'est pas définie</strong> dans la spécification <a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">W3.org DOM niveau 2 Events</a></p>
+Cette propriété d'évènements **n'est pas définie** dans la spécification [W3.org DOM niveau 2 Events](http://www.w3.org/TR/DOM-Level-2-Events/events.html)
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-
-
-<p>{{Compat("api.Event.originalTarget")}}</p>
+{{Compat("api.Event.originalTarget")}}
diff --git a/files/fr/web/api/event/preventdefault/index.md b/files/fr/web/api/event/preventdefault/index.md
index db435939bb..7e8b7057f4 100644
--- a/files/fr/web/api/event/preventdefault/index.md
+++ b/files/fr/web/api/event/preventdefault/index.md
@@ -10,86 +10,98 @@ tags:
 translation_of: Web/API/Event/preventDefault
 browser-compat: api.Event.preventDefault
 ---
-<div>{{apiref("DOM")}}</div>
+{{apiref("DOM")}}
 
-<p>La méthode <strong><code>preventDefault()</code></strong>, rattachée à l'interface <a href="/fr/docs/Web/API/Event"><code>Event</code></a>, indique à l'agent utilisateur que si l'évènement n'est pas explicitement géré, l'action par défaut ne devrait pas être exécutée comme elle l'est normalement.</p>
+La méthode **`preventDefault()`**, rattachée à l'interface [`Event`](/fr/docs/Web/API/Event), indique à l'agent utilisateur que si l'évènement n'est pas explicitement géré, l'action par défaut ne devrait pas être exécutée comme elle l'est normalement.
 
-<p>L'évènement continue sa propagation habituelle à moins qu'un des gestionnaires d'évènement invoque <a href="/fr/docs/Web/API/Event/stopPropagation"><code>stopPropagation()</code></a> ou <a href="/fr/docs/Web/API/Event/stopImmediatePropagation"><code>stopImmediatePropagation()</code></a> pour interrompre la propagation.</p>
+L'évènement continue sa propagation habituelle à moins qu'un des gestionnaires d'évènement invoque [`stopPropagation()`](/fr/docs/Web/API/Event/stopPropagation) ou [`stopImmediatePropagation()`](/fr/docs/Web/API/Event/stopImmediatePropagation) pour interrompre la propagation.
 
-<p>Comme indiqué ci-après, appeler <code><strong>preventDefault()</strong></code> n'aura aucun effet pour un évènement qui ne peut être annulé (comme ceux émis par <a href="/fr/docs/Web/API/EventTarget/dispatchEvent"><code>EventTarget.dispatchEvent()</code></a> sans avoir indiqué <code>cancelable: true</code>).</p>
+Comme indiqué ci-après, appeler **`preventDefault()`** n'aura aucun effet pour un évènement qui ne peut être annulé (comme ceux émis par [`EventTarget.dispatchEvent()`](/fr/docs/Web/API/EventTarget/dispatchEvent) sans avoir indiqué `cancelable: true`).
 
-<h2 id="syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js"><var>event</var>.preventDefault();</pre>
+```js
+event.preventDefault();
+```
 
-<h2 id="examples">Exemples</h2>
+## Exemples
 
-<h3 id="blocking_default_click_handling">Bloquer la gestion du clic par défaut</h3>
+### Bloquer la gestion du clic par défaut
 
-<p>Lorsqu'on clique sur une case à cocher, par défaut, cela coche ou décoche la case. Dans cet exemple, on illustre comment bloquer ce comportement par défaut :</p>
+Lorsqu'on clique sur une case à cocher, par défaut, cela coche ou décoche la case. Dans cet exemple, on illustre comment bloquer ce comportement par défaut :
 
-<h4 id="javascript">JavaScript</h4>
+#### JavaScript
 
-<pre class="brush: js">document.querySelector("#id-checkbox").addEventListener("click", function(event) {
+```js
+document.querySelector("#id-checkbox").addEventListener("click", function(event) {
   console.log("Désolé ! preventDefault() ne vous laissera pas cocher ceci.");
   event.preventDefault();
-}, false);</pre>
+}, false);
+```
 
-<h4 id="html">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;p&gt;Essayez de cliquer sur la case à cocher.&lt;/p&gt;
+```html
+<p>Essayez de cliquer sur la case à cocher.</p>
 
-&lt;form&gt;
-  &lt;label for="id-checkbox"&gt;Checkbox:&lt;/label&gt;
-  &lt;input type="checkbox" id="id-checkbox"/&gt;
-&lt;/form&gt;</pre>
+<form>
+  <label for="id-checkbox">Checkbox:</label>
+  <input type="checkbox" id="id-checkbox"/>
+</form>
+```
 
-<h4 id="result">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("blocking_default_click_handling")}}</p>
+{{EmbedLiveSample("blocking_default_click_handling")}}
 
-<h3 id="stopping_keystrokes_from_reaching_an_edit_field">Empêcher les pressions du clavier sur un champ texte</h3>
+### Empêcher les pressions du clavier sur un champ texte
 
-<p>Dans l'exemple qui suit, on démontre comment empêcher d'écrire au clavier dans un champ texte grâce à <code>preventDefault()</code>.</p>
+Dans l'exemple qui suit, on démontre comment empêcher d'écrire au clavier dans un champ texte grâce à `preventDefault()`.
 
-<h4 id="html_2">HTML</h4>
+#### HTML
 
-<p>Voici le formulaire contenant le champ texte :</p>
+Voici le formulaire contenant le champ texte :
 
-<pre class="brush: html">&lt;form&gt;
-  &lt;label&gt;Un champ texte
-    &lt;input type="text" id="mon-champ-texte"&gt;
-  &lt;/label&gt;
-&lt;/form&gt;</pre>
+```html
+<form>
+  <label>Un champ texte
+    <input type="text" id="mon-champ-texte">
+  </label>
+</form>
+```
 
-<h4 id="JavaScript_2">JavaScript</h4>
+#### JavaScript
 
-<p>Et voici le fragment de code JavaScript qui s'occupe de la logique principale. On commence par enregistrer un gestionnaire d'évènement pour <a href="/fr/docs/Web/API/Element/keypress_event"><code>keypress</code></a> :</p>
+Et voici le fragment de code JavaScript qui s'occupe de la logique principale. On commence par enregistrer un gestionnaire d'évènement pour [`keypress`](/fr/docs/Web/API/Element/keypress_event) :
 
-<pre class="brush: js">let monChampTexte = document.getElementById('mon-champ-texte');
-monChampTexte.addEventListener('keypress', bloqueSaisie, false);</pre>
+```js
+let monChampTexte = document.getElementById('mon-champ-texte');
+monChampTexte.addEventListener('keypress', bloqueSaisie, false);
+```
 
-<p>La fonction <code>bloqueSaisie()</code> empêche toute saisie au clavier :</p>
+La fonction `bloqueSaisie()` empêche toute saisie au clavier :
 
-<pre class="brush: js">function bloqueSaisie(evt) {
+```js
+function bloqueSaisie(evt) {
   evt.preventDefault();
   console.log("Une saisie a été empêchée.");
-};</pre>
+};
+```
 
-<h4 id="result_2">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample('stopping_keystrokes_from_reaching_an_edit_field', 600, 200)}}</p>
+{{EmbedLiveSample('stopping_keystrokes_from_reaching_an_edit_field', 600, 200)}}
 
-<h2 id="notes">Notes</h2>
+## Notes
 
-<p>Invoquer <code>preventDefault()</code> à n'importe quel moment du cycle de vie d'un évènement annulera cet évènement. Cela signifie que toute action par défaut, normalement exécutée par le navigateur, n'aura pas lieu.</p>
+Invoquer `preventDefault()` à n'importe quel moment du cycle de vie d'un évènement annulera cet évènement. Cela signifie que toute action par défaut, normalement exécutée par le navigateur, n'aura pas lieu.
 
-<p>On peut utiliser la propriété <a href="/fr/docs/Web/API/Event/cancelable"><code>Event.cancelable</code></a> afin de vérifier si un évènement est annulable. Invoquer <code>preventDefault()</code> sur un évènement non-annulable n'aura aucun effet.</p>
+On peut utiliser la propriété [`Event.cancelable`](/fr/docs/Web/API/Event/cancelable) afin de vérifier si un évènement est annulable. Invoquer `preventDefault()` sur un évènement non-annulable n'aura aucun effet.
 
-<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/api/event/returnvalue/index.md b/files/fr/web/api/event/returnvalue/index.md
index 97654470d7..246177dc19 100644
--- a/files/fr/web/api/event/returnvalue/index.md
+++ b/files/fr/web/api/event/returnvalue/index.md
@@ -9,24 +9,21 @@ tags:
   - évènements
 translation_of: Web/API/Event/returnValue
 ---
-<p>{{APIRef("DOM Events")}}{{Non-standard_header}}{{ Deprecated_header() }}</p>
+{{APIRef("DOM Events")}}{{Non-standard_header}}{{ Deprecated_header() }}
 
-<p>La propriété <code><strong>Event.returnValue</strong></code> indique si l'action par défaut pour cet évènement a été empêchée ou non. Elle est définie à <code>true</code> (<em>vrai</em>) par défaut, permettant à l'action par défaut de se produire. La définition de cette propriété à <code>false</code> (<em>faux</em>) empêche le déclenchement de l'action par défaut.</p>
+La propriété **`Event.returnValue`** indique si l'action par défaut pour cet évènement a été empêchée ou non. Elle est définie à `true` (_vrai_) par défaut, permettant à l'action par défaut de se produire. La définition de cette propriété à `false` (_faux_) empêche le déclenchement de l'action par défaut.
 
-<div class="note">
-<p><strong>Note :</strong> Utilisez {{domxref("Event.preventDefault()")}} à la place de cette méthode non standard.</p>
-</div>
+> **Note :** Utilisez {{domxref("Event.preventDefault()")}} à la place de cette méthode non standard.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">event.returnValue = <em>bool;</em>
-<em>var bool</em> = event.returnValue;
-</pre>
+    event.returnValue = bool;
+    var bool = event.returnValue;
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Bien qu'elle ait été inclue <a href="https://www.w3.org/TR/1999/WD-DOM-Level-2-19990304/events.html#attribute-returnValue">dans l'ancien brouillon de travail de W3C DOM niveau 2</a><em>, cette propriété ne fait partie d'aucune spécification.</em></p>
+Bien qu'elle ait été inclue [dans l'ancien brouillon de travail de W3C DOM niveau 2](https://www.w3.org/TR/1999/WD-DOM-Level-2-19990304/events.html#attribute-returnValue)_, cette propriété ne fait partie d'aucune spécification._
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Event.returnValue")}}</p>
+{{Compat("api.Event.returnValue")}}
diff --git a/files/fr/web/api/event/srcelement/index.md b/files/fr/web/api/event/srcelement/index.md
index 6b0ab681b4..d6684e5cbe 100644
--- a/files/fr/web/api/event/srcelement/index.md
+++ b/files/fr/web/api/event/srcelement/index.md
@@ -9,24 +9,20 @@ tags:
   - Éléments SRC
 translation_of: Web/API/Event/srcElement
 ---
-<p>{{ApiRef("DOM")}}</p>
+{{ApiRef("DOM")}}
 
-<p>{{ Non-standard_header() }}</p>
+{{ Non-standard_header() }}
 
-<p><strong><code>Event.srcElement</code></strong> est un alias propriétaire (implémenté dans Internet Explorer) pour la propriété standard {{domxref("Event.target")}} qui commence à être pris en charge dans d'autres navigateurs à des fins de compatibilité Web.</p>
+**`Event.srcElement`** est un alias propriétaire (implémenté dans Internet Explorer) pour la propriété standard {{domxref("Event.target")}} qui commence à être pris en charge dans d'autres navigateurs à des fins de compatibilité Web.
 
-<h2 id="Spécification">Spécification</h2>
+## Spécification
 
-<p>Ne fait partie d'aucune spécification.</p>
+Ne fait partie d'aucune spécification.
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
+{{Compat("api.Event.srcElement")}}
 
+## Voir aussi
 
-<p>{{Compat("api.Event.srcElement")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("Window.event")}}</li>
-</ul>
+- {{domxref("Window.event")}}
diff --git a/files/fr/web/api/event/stopimmediatepropagation/index.md b/files/fr/web/api/event/stopimmediatepropagation/index.md
index 8770b808a0..8bd412ca1b 100644
--- a/files/fr/web/api/event/stopimmediatepropagation/index.md
+++ b/files/fr/web/api/event/stopimmediatepropagation/index.md
@@ -8,35 +8,22 @@ tags:
   - Reference
 translation_of: Web/API/Event/stopImmediatePropagation
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p>La méthode <code><strong>stopImmediatePropagation()</strong></code>, rattachée à l'interface {{domxref("Event")}}, empêche les gestionnaires d'évènement, associés à ce même évènement, d'être appelés.</p>
+La méthode **`stopImmediatePropagation()`**, rattachée à l'interface {{domxref("Event")}}, empêche les gestionnaires d'évènement, associés à ce même évènement, d'être appelés.
 
-<p>Si plusieurs gestionnaires d'évènement sont attachés à un élément pour le même type d'évènement, ils sont appelés dans l'ordre dans lequel ils ont été ajoutés. Si <code>stopImmediatePropagation()</code> est appelé pendant un de ces appels, les gestionnaires restants ne sont pas invoqués.</p>
+Si plusieurs gestionnaires d'évènement sont attachés à un élément pour le même type d'évènement, ils sont appelés dans l'ordre dans lequel ils ont été ajoutés. Si `stopImmediatePropagation()` est appelé pendant un de ces appels, les gestionnaires restants ne sont pas invoqués.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>event</em>.stopImmediatePropagation();</pre>
+    event.stopImmediatePropagation();
 
-<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('DOM WHATWG', '#dom-event-stopimmediatepropagation', 'Event.stopImmediatePropagation()')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                            | État                             | Commentaires |
+| ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ |
+| {{SpecName('DOM WHATWG', '#dom-event-stopimmediatepropagation', 'Event.stopImmediatePropagation()')}} | {{Spec2('DOM WHATWG')}} |              |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Event.stopImmediatePropagation")}}</p>
+{{Compat("api.Event.stopImmediatePropagation")}}
diff --git a/files/fr/web/api/event/stoppropagation/index.md b/files/fr/web/api/event/stoppropagation/index.md
index 1f8dd6e09f..193691c866 100644
--- a/files/fr/web/api/event/stoppropagation/index.md
+++ b/files/fr/web/api/event/stoppropagation/index.md
@@ -9,51 +9,32 @@ tags:
   - Reference
 translation_of: Web/API/Event/stopPropagation
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p>Évite que l'évènement courant ne se propage plus loin dans les phases de capture et de déploiement.</p>
+Évite que l'évènement courant ne se propage plus loin dans les phases de capture et de déploiement.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>event</em>.stopPropagation();</pre>
+    event.stopPropagation();
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<p>Voir la section Exemple 5 : <a href="/fr/docs/Web/API/Document_Object_Model/Exemples#Exemple_5_:_propagation_d%27%C3%A9v%C3%A8nements">Propagation d'évènements</a> dans le chapitre Exemples pour un exemple plus détaillé de cette méthode et de la propagation d'évènements dans le DOM.</p>
+Voir la section Exemple 5 : [Propagation d'évènements](/fr/docs/Web/API/Document_Object_Model/Exemples#Exemple_5_:_propagation_d%27%C3%A9v%C3%A8nements) dans le chapitre Exemples pour un exemple plus détaillé de cette méthode et de la propagation d'évènements dans le DOM.
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p>Voir <a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-flow-capture">DOM specification</a> (en)  pour une explication du flux d'évènements. (Une illustration est disponible dans le brouillon <a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow">DOM Level 3 Event draft</a> (en)).</p>
+Voir [DOM specification](http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-flow-capture) (en)  pour une explication du flux d'évènements. (Une illustration est disponible dans le brouillon [DOM Level 3 Event draft](http://www.w3.org/TR/DOM-Level-3-Events/#event-flow) (en)).
 
-<p><a href="/fr/docs/Web/API/Event/preventDefault">preventDefault</a> est une méthode complémentaire qui peut être utilisée pour empêcher l'action par défaut de l'évènement.</p>
+[preventDefault](/fr/docs/Web/API/Event/preventDefault) est une méthode complémentaire qui peut être utilisée pour empêcher l'action par défaut de l'évènement.
 
-<h2 id="Specification">Spécification</h2>
+## Spécification
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th>Spécification</th>
-   <th>Statut</th>
-   <th>Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName("DOM WHATWG", "#dom-event-stoppropagation", "Event.stopPropagation()")}}</td>
-   <td>{{Spec2("DOM WHATWG")}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName("DOM4", "#dom-event-stoppropagation", "Event.stopPropagation()")}}</td>
-   <td>{{Spec2("DOM4")}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName("DOM2 Events", "#Events-Event-stopPropagation", "Event.stopPropagation()")}}</td>
-   <td>{{Spec2("DOM2 Events")}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                        | Statut                           | Commentaire         |
+| -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- |
+| {{SpecName("DOM WHATWG", "#dom-event-stoppropagation", "Event.stopPropagation()")}}     | {{Spec2("DOM WHATWG")}} |                     |
+| {{SpecName("DOM4", "#dom-event-stoppropagation", "Event.stopPropagation()")}}             | {{Spec2("DOM4")}}         |                     |
+| {{SpecName("DOM2 Events", "#Events-Event-stopPropagation", "Event.stopPropagation()")}} | {{Spec2("DOM2 Events")}} | Définition initiale |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Event.stopPropagation")}}</p>
\ No newline at end of file
+{{Compat("api.Event.stopPropagation")}}
diff --git a/files/fr/web/api/event/target/index.md b/files/fr/web/api/event/target/index.md
index 2ab12c5de0..3e60e62d4a 100644
--- a/files/fr/web/api/event/target/index.md
+++ b/files/fr/web/api/event/target/index.md
@@ -9,19 +9,20 @@ tags:
   - Propriétés
 translation_of: Web/API/Event/target
 ---
-<p>{{ ApiRef("DOM") }}</p>
+{{ ApiRef("DOM") }}
 
-<p>C'est une référence à l'objet qui a envoyé l'événement. C'est une propriété différente de {{domxref("event.currentTarget")}} lorsque le gestionnaire d'événements est appelé au cours de la phase de propagation ou de la phase de capture de l'événement.</p>
+C'est une référence à l'objet qui a envoyé l'événement. C'est une propriété différente de {{domxref("event.currentTarget")}} lorsque le gestionnaire d'événements est appelé au cours de la phase de propagation ou de la phase de capture de l'événement.
 
-<h2 id="Example">Syntaxe</h2>
+## Syntaxe
 
-<pre><code><code>laCible = event.target</code></code></pre>
+    laCible = event.target
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<p>La propriété <code>event.target</code> peut être utilisée pour implémenter la <strong>délégation d'événements</strong>.</p>
+La propriété `event.target` peut être utilisée pour implémenter la **délégation d'événements**.
 
-<pre class="brush: js">// Produit une liste
+```js
+// Produit une liste
 var ul = document.createElement('ul');
 document.body.appendChild(ul);
 
@@ -31,59 +32,40 @@ ul.appendChild(li1);
 ul.appendChild(li2);
 
 function hide(e){
-  // e.target se réfère à l'élément &lt;li&gt; cliqué
-  // C'est différent de e.currentTarget qui doit faire référence au parent &lt;ul&gt; dans ce contexte
+  // e.target se réfère à l'élément <li> cliqué
+  // C'est différent de e.currentTarget qui doit faire référence au parent <ul> dans ce contexte
   e.target.style.visibility = 'hidden';
 }
 
 // Attache l'écouteur à la liste
-// Il se déclenche pour chaque &lt;li&gt; clické
-ul.addEventListener('click', hide, false);</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th>Spécification</th>
-   <th>Statut</th>
-   <th>Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName("DOM WHATWG", "#dom-event-target", "Event.target")}}</td>
-   <td>{{Spec2("DOM WHATWG")}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName("DOM4", "#dom-event-target", "Event.target")}}</td>
-   <td>{{Spec2("DOM4")}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName("DOM2 Events", "#Events-Event-target", "Event.target")}}</td>
-   <td>{{Spec2("DOM2 Events")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-
-
-<p>{{Compat("api.Event.target")}}</p>
-
-<h2 id="Notes_concernant_la_compatibilité">Notes concernant la compatibilité</h2>
-
-<p>Sur IE6-8, le modèle d'événement est différent. Les écouteurs sont attachés avec la méthode non standard <code>{{domxref('EventTarget.attachEvent')}}</code> . Dans ce modèle, l'objet événement a une propriété  <code>{{domxref('Event.srcElement')}}</code>, à la place de la propriété <code>target</code>, avec la même sémantique que <code>event.target</code>.</p>
-
-<pre class="brush: js">function hide(e) {
+// Il se déclenche pour chaque <li> clické
+ul.addEventListener('click', hide, false);
+```
+
+## Spécifications
+
+| Spécification                                                                            | Statut                           | Commentaire          |
+| ---------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName("DOM WHATWG", "#dom-event-target", "Event.target")}}     | {{Spec2("DOM WHATWG")}} |                      |
+| {{SpecName("DOM4", "#dom-event-target", "Event.target")}}             | {{Spec2("DOM4")}}         |                      |
+| {{SpecName("DOM2 Events", "#Events-Event-target", "Event.target")}} | {{Spec2("DOM2 Events")}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Event.target")}}
+
+## Notes concernant la compatibilité
+
+Sur IE6-8, le modèle d'événement est différent. Les écouteurs sont attachés avec la méthode non standard `{{domxref('EventTarget.attachEvent')}}` . Dans ce modèle, l'objet événement a une propriété  `{{domxref('Event.srcElement')}}`, à la place de la propriété `target`, avec la même sémantique que `event.target`.
+
+```js
+function hide(e) {
   // Support IE6-8
   var target = e.target || e.srcElement;
   target.style.visibility = 'hidden';
 }
-</pre>
+```
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<p><a href="/fr/docs/Web/API/Event/Comparaison_des_cibles_d_%C3%A9v%C3%A8nements">Comparaison des cibles d'évènements</a></p>
+[Comparaison des cibles d'évènements](/fr/docs/Web/API/Event/Comparaison_des_cibles_d_%C3%A9v%C3%A8nements)
diff --git a/files/fr/web/api/event/timestamp/index.md b/files/fr/web/api/event/timestamp/index.md
index c4bc3ffe6a..f053b897e7 100644
--- a/files/fr/web/api/event/timestamp/index.md
+++ b/files/fr/web/api/event/timestamp/index.md
@@ -9,53 +9,55 @@ tags:
   - temps
 translation_of: Web/API/Event/timeStamp
 ---
-<div>{{ApiRef("DOM")}}</div>
+{{ApiRef("DOM")}}
 
-<p>Retourne le temps (en millisecondes) à partir duquel l'événement a été créé.</p>
+Retourne le temps (en millisecondes) à partir duquel l'événement a été créé.
 
-<div class="note">
-<p><strong>Note :</strong> Cette propriété fonctionne seulement si le système d'évènements le prend en charge pour des évènements particuliers.</p>
-</div>
+> **Note :** Cette propriété fonctionne seulement si le système d'évènements le prend en charge pour des évènements particuliers.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">event.timeStamp
-</pre>
+    event.timeStamp
 
-<h3 id="Examples">Valeur</h3>
+### Valeur
 
-<p>Cette valeur est un nombre de millisecondes écoulées depuis le début du temps de vie du document courant jusqu'à la création de l'évènement.</p>
+Cette valeur est un nombre de millisecondes écoulées depuis le début du temps de vie du document courant jusqu'à la création de l'évènement.
 
-<p>Dans les nouvelles implémentations, la valeur est un {{domxref("DOMHighResTimeStamp")}} dont la précision est de 5 microsecondes (0,005 ms). Dans les implémentations plus anciennes, la valeur est un {{domxref("DOMTimeStamp")}} de précision d'une milliseconde.</p>
+Dans les nouvelles implémentations, la valeur est un {{domxref("DOMHighResTimeStamp")}} dont la précision est de 5 microsecondes (0,005 ms). Dans les implémentations plus anciennes, la valeur est un {{domxref("DOMTimeStamp")}} de précision d'une milliseconde.
 
-<h2 id="Examples">Exemple</h2>
+## Exemple
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;
+```html
+<p>
   Focus this iframe and press any key to get the
   current timestamp for the keypress event.
-&lt;/p&gt;
-&lt;p&gt;timeStamp: &lt;span id="time"&gt;-&lt;/span&gt;&lt;/p&gt;</pre>
+</p>
+<p>timeStamp: <span id="time">-</span></p>
+```
 
-<h3 id="JavaScript">JavaScript</h3>
+### JavaScript
 
-<pre class="brush: js">function getTime(event) {
+```js
+function getTime(event) {
   var time = document.getElementById("time");
   time.firstChild.nodeValue = event.timeStamp;
 }
-document.body.addEventListener("keypress", getTime);</pre>
+document.body.addEventListener("keypress", getTime);
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Example", "100%", 100)}}</p>
+{{EmbedLiveSample("Example", "100%", 100)}}
 
-<h2 id="Notes">Précision du temps réduite</h2>
+## Précision du temps réduite
 
-<p>Pour offrir une protection contre les attaques de synchronisation et les empreintes digitales, la précision de <code>event.timeStamp</code> peut être arrondie en fonction des paramètres du navigateur.<br>
- Dans Firefox, la préférence <code>privacy.reduceTimerPrecision</code> est activée et à 20 us par défaut dans Firefox 59 ; en version 60 ce sera 2 ms.</p>
+Pour offrir une protection contre les attaques de synchronisation et les empreintes digitales, la précision de `event.timeStamp` peut être arrondie en fonction des paramètres du navigateur.
+Dans Firefox, la préférence `privacy.reduceTimerPrecision` est activée et à 20 us par défaut dans Firefox 59 ; en version 60 ce sera 2 ms.
 
-<pre class="brush: js">// Précision du temps réduite (2ms) dans Firefox 60
+```js
+// Précision du temps réduite (2ms) dans Firefox 60
 event.timeStamp;
 // 1519211809934
 // 1519211810362
@@ -68,41 +70,19 @@ event.timeStamp;
 // 1519129853500
 // 1519129858900
 // 1519129864400
-// ...</pre>
-
-<p>Dans Firefox, vous pouvez aussi activer <code>privacy.resistFingerprinting</code>, la précision sera de 100 ms ou la valeur de <code>privacy.resistFingerprinting.reduceTimerPrecision.microseconds</code>, selon la valeur la plus grande.</p>
-
-<h2 id="Specifications">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('DOM WHATWG', '#dom-event-timestamp', 'Event.timeStamp')}}</td>
-   <td>{{ Spec2('DOM WHATWG') }}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM4', '#dom-event-timestamp', 'Event.timeStamp')}}</td>
-   <td>{{ Spec2('DOM4') }}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Events', '#Events-Event-timeStamp', 'Event.timeStamp')}}</td>
-   <td>{{ Spec2('DOM2 Events') }}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-
-
-<p>{{Compat("api.Event.timeStamp")}}</p>
+// ...
+```
+
+Dans Firefox, vous pouvez aussi activer `privacy.resistFingerprinting`, la précision sera de 100 ms ou la valeur de `privacy.resistFingerprinting.reduceTimerPrecision.microseconds`, selon la valeur la plus grande.
+
+## Spécifications
+
+| Spécification                                                                                    | Statut                               | Commentaire          |
+| ------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- |
+| {{SpecName('DOM WHATWG', '#dom-event-timestamp', 'Event.timeStamp')}}     | {{ Spec2('DOM WHATWG') }}     |                      |
+| {{SpecName('DOM4', '#dom-event-timestamp', 'Event.timeStamp')}}             | {{ Spec2('DOM4') }}             |                      |
+| {{SpecName('DOM2 Events', '#Events-Event-timeStamp', 'Event.timeStamp')}} | {{ Spec2('DOM2 Events') }} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Event.timeStamp")}}
diff --git a/files/fr/web/api/event/type/index.md b/files/fr/web/api/event/type/index.md
index 7931a24a5a..854f67f717 100644
--- a/files/fr/web/api/event/type/index.md
+++ b/files/fr/web/api/event/type/index.md
@@ -9,29 +9,29 @@ tags:
   - Type
 translation_of: Web/API/Event/type
 ---
-<p>{{APIRef}}</p>
+{{APIRef}}
 
-<p>La propriété en lecture seule<strong> Event.type </strong>retourne une chaîne de caractères (<em>string</em>) contenant le type de l'événement. Le type est défini lors de la construction de l'événement et est le nom d'usage pour se référer à celui-ci, tel que  <code>click</code>, <code>load</code> ou <code>error</code>.</p>
+La propriété en lecture seule **Event.type** retourne une chaîne de caractères (_string_) contenant le type de l'événement. Le type est défini lors de la construction de l'événement et est le nom d'usage pour se référer à celui-ci, tel que  `click`, `load` ou `error`.
 
-<p>L'argument <code><em>event</em></code> de {{ domxref("EventTarget.addEventListener()") }} et {{ domxref("EventTarget.removeEventListener()") }} n'est pas sensible à la casse.</p>
+L'argument `event` de {{ domxref("EventTarget.addEventListener()") }} et {{ domxref("EventTarget.removeEventListener()") }} n'est pas sensible à la casse.
 
-<p>Pour une liste des types d'événements disponibles, aller voir la page <a href="/fr/docs/Web/Events">Référence des évènements</a>.</p>
+Pour une liste des types d'événements disponibles, aller voir la page [Référence des évènements](/fr/docs/Web/Events).
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">event.type
-</pre>
+    event.type
 
-<h2 id="Example">Exemples</h2>
+## Exemples
 
-<pre class="brush: html">&lt;!DOCTYPE html&gt;
-&lt;html lang="en"&gt;
-&lt;head&gt;
-    &lt;meta charset="utf-8"&gt;
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
 
-    &lt;title&gt;Event.type Example&lt;/title&gt;
+    <title>Event.type Example</title>
 
-    &lt;script&gt;
+    <script>
         var currEvent;
         function getEvtType(evt) {
             console.group();
@@ -45,7 +45,7 @@ translation_of: Web/API/Event/type
         }
 
         //Évènements du clavier
-        document.addEventListener("keypress", getEvtType, false); //[second]  
+        document.addEventListener("keypress", getEvtType, false); //[second]
 
         document.addEventListener("keydown", getEvtType, false); //premier
         document.addEventListener("keyup", getEvtType, false); //troisième
@@ -56,47 +56,29 @@ translation_of: Web/API/Event/type
         document.addEventListener("mousedown", getEvtType, false); //premier
         document.addEventListener("mouseup", getEvtType, false); //second
 
-    &lt;/script&gt;
-&lt;/head&gt;
+    </script>
+</head>
 
-&lt;body&gt;
+<body>
 
-&lt;p&gt;Press any key or click the mouse to get the event type.&lt;/p&gt;
-&lt;p&gt;Event type: &lt;span id="Etype" style="color:red"&gt;-&lt;/span&gt;&lt;/p&gt;
+<p>Press any key or click the mouse to get the event type.</p>
+<p>Event type: <span id="Etype" style="color:red">-</span></p>
 
-&lt;/body&gt;
-&lt;/html&gt;</pre>
+</body>
+</html>
+```
 
-<h3 id="Specifications">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample('Example')}}</p>
+{{EmbedLiveSample('Example')}}
 
-<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('DOM WHATWG', '#dom-event-type', 'Event.type')}}</td>
-   <td>{{ Spec2('DOM WHATWG') }}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Events', '#Events-Event-type', 'Event.type')}}</td>
-   <td>{{ Spec2('DOM2 Events') }}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                        | Statut                               | Commentaire          |
+| ------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- |
+| {{SpecName('DOM WHATWG', '#dom-event-type', 'Event.type')}}     | {{ Spec2('DOM WHATWG') }}     |                      |
+| {{SpecName('DOM2 Events', '#Events-Event-type', 'Event.type')}} | {{ Spec2('DOM2 Events') }} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-
-
-<p>{{Compat("api.Event.type")}}</p>
+{{Compat("api.Event.type")}}
diff --git a/files/fr/web/api/eventlistener/index.md b/files/fr/web/api/eventlistener/index.md
index 8ae1a28d34..38de4de0de 100644
--- a/files/fr/web/api/eventlistener/index.md
+++ b/files/fr/web/api/eventlistener/index.md
@@ -9,38 +9,37 @@ tags:
   - Écouteurs
 translation_of: Web/API/EventListener
 ---
-<p>{{APIRef("DOM Events")}}</p>
+{{APIRef("DOM Events")}}
 
-<p>L'interface <strong><code>EventListener</code></strong> représente un objet qui peut gérer un évènement distribué par un objet {{domxref("EventTarget")}}.</p>
+L'interface **`EventListener`** représente un objet qui peut gérer un évènement distribué par un objet {{domxref("EventTarget")}}.
 
-<div class="note">
-<p><strong>Note :</strong> En raison du besoin de compatibilité avec le contenu existant, <code>EventListener</code> accepte à la fois une fonction et un objet avec une fonction de propriété <code>handleEvent</code>. Ceci est illustré dans l'exemple ci-dessous.</p>
-</div>
+> **Note :** En raison du besoin de compatibilité avec le contenu existant, `EventListener` accepte à la fois une fonction et un objet avec une fonction de propriété `handleEvent`. Ceci est illustré dans l'exemple ci-dessous.
 
-<h2 id="Method_overview">Propriétés</h2>
+## Propriétés
 
-<p><em>Cette interface n'implémente ni n'hérite d'aucune propriété.</em></p>
+_Cette interface n'implémente ni n'hérite d'aucune propriété._
 
-<h2 id="Methods">Méthodes</h2>
+## Méthodes
 
-<p><em>Cette interface n'hérite d'aucune méthode.</em></p>
+_Cette interface n'hérite d'aucune méthode._
 
-<dl>
- <dt>{{domxref("EventListener.handleEvent()")}}</dt>
- <dd>une fonction qui est appelée lorsque se produit un événement du type spécifié.</dd>
-</dl>
+- {{domxref("EventListener.handleEvent()")}}
+  - : une fonction qui est appelée lorsque se produit un événement du type spécifié.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;button id="btn"&gt;Click here!&lt;/button&gt;</pre>
+```html
+<button id="btn">Click here!</button>
+```
 
-<h3 id="JavaScript">JavaScript</h3>
+### JavaScript
 
-<p> </p>
 
-<pre class="brush: js">const buttonElement = document.getElementById('btn');
+
+```js
+const buttonElement = document.getElementById('btn');
 
 // Ajoute un gestionnaire pour l'évènement 'click' qui fournit une fonction de rappel.
 // Chaque fois que l'élément est cliqué, une fenêtre contextuelle avec "Élément clické!"
@@ -49,38 +48,22 @@ buttonElement.addEventListener('click', function (event) {
   alert('Element clicked through function!');
 });
 
-// Pour la compatibilité, un objet qui n'est pas une fonction avec une propriété `handleEvent` (<em>gestion d'évènement</em>)
+// Pour la compatibilité, un objet qui n'est pas une fonction avec une propriété `handleEvent` (gestion d'évènement)
 // sera traitée exactement comme la fonction elle-même.
 buttonElement.addEventListener('click', {
   handleEvent: function (event) {
     alert('Element clicked through handleEvent property!');
   }
-});</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample('Example')}}</p>
-
-<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('DOM WHATWG', '#callbackdef-eventlistener', 'EventListener')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Pas de changement.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Events', '#Events-EventListener', 'EventListener')}}</td>
-   <td>{{Spec2('DOM2 Events')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+});
+```
+
+### Résultat
+
+{{EmbedLiveSample('Example')}}
+
+## Spécifications
+
+| Spécification                                                                                    | Statut                           | Commentaire          |
+| ------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName('DOM WHATWG', '#callbackdef-eventlistener', 'EventListener')}} | {{Spec2('DOM WHATWG')}} | Pas de changement.   |
+| {{SpecName('DOM2 Events', '#Events-EventListener', 'EventListener')}}     | {{Spec2('DOM2 Events')}} | Définition initiale. |
diff --git a/files/fr/web/api/eventsource/close/index.md b/files/fr/web/api/eventsource/close/index.md
index d7289f87ef..3846e79506 100644
--- a/files/fr/web/api/eventsource/close/index.md
+++ b/files/fr/web/api/eventsource/close/index.md
@@ -12,67 +12,48 @@ tags:
   - close
 translation_of: Web/API/EventSource/close
 ---
-<div>{{APIRef('WebSockets API')}}</div>
+{{APIRef('WebSockets API')}}
 
-<p>La fonction <code><strong>close()</strong></code> de l'interface {{domxref("EventSource")}} coupe la connection, si existante, et affecte à la variable {{domxref("EventSource.readyState")}} la valeur <code>2</code> (closed).</p>
+La fonction **`close()`** de l'interface {{domxref("EventSource")}} coupe la connection, si existante, et affecte à la variable {{domxref("EventSource.readyState")}} la valeur `2` (closed).
 
-<div class="note">
-<p><strong>Note :</strong> Si la connexion est déjà fermé, la fonction n'agit pas.</p>
-</div>
+> **Note :** Si la connexion est déjà fermé, la fonction n'agit pas.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">eventSource.close();</pre>
+    eventSource.close();
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<p>Aucun.</p>
+Aucun.
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Nulle.</p>
+Nulle.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: js">var bouton = document.querySelector('button');
+```js
+var bouton = document.querySelector('button');
 var evtSource = new EventSource('sse.php');
 
 bouton.onclick = function() {
   console.log('Connection fermée');
   evtSource.close();
 }
-</pre>
+```
 
-<div class="note">
-<p><strong>Note :</strong> Vous pouvez trouver un exemple complet sur GitHub — voir <a href="https://github.com/mdn/dom-examples/tree/master/server-sent-events">Demo simple de SSE utilisant PHP.</a></p>
-</div>
+> **Note :** Vous pouvez trouver un exemple complet sur GitHub — voir [Demo simple de SSE utilisant PHP.](https://github.com/mdn/dom-examples/tree/master/server-sent-events)
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "comms.html#dom-eventsource-close", "close()")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Initial definition</td>
-  </tr>
- </tbody>
-</table>
+| Specification                                                                                        | Status                           | Comment            |
+| ---------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------ |
+| {{SpecName('HTML WHATWG', "comms.html#dom-eventsource-close", "close()")}} | {{Spec2('HTML WHATWG')}} | Initial definition |
 
-<ul>
-</ul>
+## Compatibilité des navigateurs
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+{{Compat("api.EventSource.close")}}
 
-<p>{{Compat("api.EventSource.close")}}</p>
+## Voir aussi
 
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("EventSource")}}</li>
-</ul>
+- {{domxref("EventSource")}}
diff --git a/files/fr/web/api/eventsource/index.md b/files/fr/web/api/eventsource/index.md
index 3ad72e5065..a47b9ebeff 100644
--- a/files/fr/web/api/eventsource/index.md
+++ b/files/fr/web/api/eventsource/index.md
@@ -7,53 +7,46 @@ tags:
   - Reference
 translation_of: Web/API/EventSource
 ---
-<div>{{APIRef("Websockets API")}}</div>
+{{APIRef("Websockets API")}}
 
-<p>L'interface <strong><code>EventSource</code></strong> est utilisée afin de recevoir des évènements envoyés par le serveur. Elle se connecte à un serveur via HTTP et reçoit des évènements au format <code>text/event-stream</code> avant de clôturer la connexion.</p>
+L'interface **`EventSource`** est utilisée afin de recevoir des évènements envoyés par le serveur. Elle se connecte à un serveur via HTTP et reçoit des évènements au format `text/event-stream` avant de clôturer la connexion.
 
-<h2 id="Constructeur">Constructeur</h2>
+## Constructeur
 
-<dl>
- <dt>{{domxref("EventSource.EventSource", "EventSource()")}}</dt>
- <dd>Cette méthode crée un nouvel objet <code>EventSource</code> à partir de l'objet {{domxref("USVString")}} fourni.</dd>
-</dl>
+- {{domxref("EventSource.EventSource", "EventSource()")}}
+  - : Cette méthode crée un nouvel objet `EventSource` à partir de l'objet {{domxref("USVString")}} fourni.
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<p><em>Cette interface hérite également des propriétés fournies par l'objet parent : {{domxref("EventTarget")}}.</em></p>
+_Cette interface hérite également des propriétés fournies par l'objet parent : {{domxref("EventTarget")}}._
 
-<dl>
- <dt>{{domxref("EventSource.readyState")}} {{readonlyinline}}</dt>
- <dd>Un nombre qui représente l'état de la connexion. Les valeurs possibles sont <code>CONNECTING</code> (<code>0</code>) (connexion en cours), <code>OPEN</code> (<code>1</code>) (connexion ouverte), ou <code>CLOSED</code> (<code>2</code>) (connexion fermée).</dd>
- <dt>{{domxref("EventSource.url")}} {{readonlyinline}}</dt>
- <dd>Un objet {{domxref("DOMString")}} qui représente l'URL de la source.</dd>
- <dt>{{domxref("EventSource.withCredentials")}} {{readonlyinline}}</dt>
- <dd>Un booléen qui indique si l'objet <code>EventSource</code> a été instancié avec les paramètres d'authentification CORS (<code>true</code>) ou non (<code>false</code>, la valeur par défaut).</dd>
-</dl>
+- {{domxref("EventSource.readyState")}} {{readonlyinline}}
+  - : Un nombre qui représente l'état de la connexion. Les valeurs possibles sont `CONNECTING` (`0`) (connexion en cours), `OPEN` (`1`) (connexion ouverte), ou `CLOSED` (`2`) (connexion fermée).
+- {{domxref("EventSource.url")}} {{readonlyinline}}
+  - : Un objet {{domxref("DOMString")}} qui représente l'URL de la source.
+- {{domxref("EventSource.withCredentials")}} {{readonlyinline}}
+  - : Un booléen qui indique si l'objet `EventSource` a été instancié avec les paramètres d'authentification CORS (`true`) ou non (`false`, la valeur par défaut).
 
-<h3 id="Gestionnaires_dévènement">Gestionnaires d'évènement</h3>
+### Gestionnaires d'évènement
 
-<dl>
- <dt>{{domxref("EventSource.onerror")}}</dt>
- <dd>Un objet {{event("Event_handlers", "event handler")}} qui est appelé lorsqu'une erreur se produit et que l'évènement {{event("error")}} est envoyé à l'objet <code>EventSource</code>.</dd>
- <dt>{{domxref("EventSource.onmessage")}}</dt>
- <dd>Un objet {{event("Event_handlers", "event handler")}} qui est appelé lorsqu'un évènement {{event("message")}} est reçu (ce qui signifie qu'on a reçu un message de la source).</dd>
- <dt>{{domxref("EventSource.onopen")}}</dt>
- <dd>Un objet {{event("Event_handlers", "event handler")}} qui est appelé lorsqu'un évènement {{event("open")}} est reçu, ce qui indique que la connexion vient d'être ouverte.</dd>
-</dl>
+- {{domxref("EventSource.onerror")}}
+  - : Un objet {{event("Event_handlers", "event handler")}} qui est appelé lorsqu'une erreur se produit et que l'évènement {{event("error")}} est envoyé à l'objet `EventSource`.
+- {{domxref("EventSource.onmessage")}}
+  - : Un objet {{event("Event_handlers", "event handler")}} qui est appelé lorsqu'un évènement {{event("message")}} est reçu (ce qui signifie qu'on a reçu un message de la source).
+- {{domxref("EventSource.onopen")}}
+  - : Un objet {{event("Event_handlers", "event handler")}} qui est appelé lorsqu'un évènement {{event("open")}} est reçu, ce qui indique que la connexion vient d'être ouverte.
 
-<h2 id="Méthodes">Méthodes</h2>
+## Méthodes
 
-<p><em>Cette interface hérite également de méthodes grâce à son objet parent : {{domxref("EventTarget")}}.</em></p>
+_Cette interface hérite également de méthodes grâce à son objet parent : {{domxref("EventTarget")}}._
 
-<dl>
- <dt>{{domxref("EventSource.close()")}}</dt>
- <dd>Cette méthode ferme la connexion s'il y en a une en cours et change la valeur de l'attribut <code>readyState</code> en <code>CLOSED</code>. Si la connexion est déjà fermée, la méthode ne fait rien.</dd>
-</dl>
+- {{domxref("EventSource.close()")}}
+  - : Cette méthode ferme la connexion s'il y en a une en cours et change la valeur de l'attribut `readyState` en `CLOSED`. Si la connexion est déjà fermée, la méthode ne fait rien.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: js">var evtSource = new EventSource('sse.php');
+```js
+var evtSource = new EventSource('sse.php');
 var eventList = document.querySelector('ul');
 
 evtSource.onmessage = function(e) {
@@ -61,35 +54,21 @@ evtSource.onmessage = function(e) {
 
   newElement.textContent = "message: " + e.data;
   eventList.appendChild(newElement);
-}</pre>
-
-<div class="note">
-<p><strong>Note :</strong> Un exemple complet est disponible sur GitHub, <a href="https://github.com/mdn/dom-examples/tree/master/server-sent-events">voir la démonstration SSE avec PHP</a>.</p>
-</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', "comms.html#the-eventsource-interface", "EventSource")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.EventSource")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Server-sent_events/Using_server-sent_events">Utiliser les évènements générés par le serveur</a></li>
-</ul>
+}
+```
+
+> **Note :** Un exemple complet est disponible sur GitHub, [voir la démonstration SSE avec PHP](https://github.com/mdn/dom-examples/tree/master/server-sent-events).
+
+## Spécifications
+
+| Spécification                                                                                                | État                             | Commentaires |
+| ------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------ |
+| {{SpecName('HTML WHATWG', "comms.html#the-eventsource-interface", "EventSource")}} | {{Spec2('HTML WHATWG')}} |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.EventSource")}}
+
+## Voir aussi
+
+- [Utiliser les évènements générés par le serveur](/fr/docs/Server-sent_events/Using_server-sent_events)
diff --git a/files/fr/web/api/eventsource/onopen/index.md b/files/fr/web/api/eventsource/onopen/index.md
index 64b0d58fb9..8cd75bbcb1 100644
--- a/files/fr/web/api/eventsource/onopen/index.md
+++ b/files/fr/web/api/eventsource/onopen/index.md
@@ -9,47 +9,34 @@ tags:
   - Reference
 translation_of: Web/API/EventSource/onopen
 ---
-<div>{{APIRef('Server Sent Events')}}</div>
+{{APIRef('Server Sent Events')}}
 
-<p>La propriété <code><strong>onopen</strong></code> de l'interface {{domxref("EventSource")}} est un {{event("Event_handlers", "event handler")}} qui est appelé lorsqu'un est évènement {{event("open")}} est reçu, indiquant que la connexion vient d'être établie.</p>
+La propriété **`onopen`** de l'interface {{domxref("EventSource")}} est un {{event("Event_handlers", "event handler")}} qui est appelé lorsqu'un est évènement {{event("open")}} est reçu, indiquant que la connexion vient d'être établie.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">eventSource.onopen = function</pre>
+    eventSource.onopen = function
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: js">evtSource.onopen = function() {
+```js
+evtSource.onopen = function() {
   console.log("Connexion au serveur établie.");
-};</pre>
-
-<div class="note">
-<p><strong>Note :</strong> Vous pouvez trouver un exemple complet sur GitHub — voir <a href="https://github.com/mdn/dom-examples/tree/master/server-sent-events">Simple SSE demo using PHP.</a></p>
-</div>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "comms.html#handler-eventsource-onopen", "onopen")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.EventSource.onopen")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("EventSource")}}</li>
-</ul>
+};
+```
+
+> **Note :** Vous pouvez trouver un exemple complet sur GitHub — voir [Simple SSE demo using PHP.](https://github.com/mdn/dom-examples/tree/master/server-sent-events)
+
+## Spécifications
+
+| Spécification                                                                                            | Statut                           | Commentaires         |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName('HTML WHATWG', "comms.html#handler-eventsource-onopen", "onopen")}} | {{Spec2('HTML WHATWG')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.EventSource.onopen")}}
+
+## Voir aussi
+
+- {{domxref("EventSource")}}
diff --git a/files/fr/web/api/eventtarget/addeventlistener/index.md b/files/fr/web/api/eventtarget/addeventlistener/index.md
index 8165dcccdf..4139ecb2de 100644
--- a/files/fr/web/api/eventtarget/addeventlistener/index.md
+++ b/files/fr/web/api/eventtarget/addeventlistener/index.md
@@ -28,74 +28,66 @@ tags:
   - mselementresize
 translation_of: Web/API/EventTarget/addEventListener
 ---
-<p>{{APIRef("DOM Events")}}</p>
-
-<p>>La méthode <code><strong>addEventListener()</strong></code> de {{domxref("EventTarget")}} attache une fonction à appeler chaque fois que l'évènement spécifié est envoyé à la cible.</p>
-
-<p>Les cibles courantes sont un {{domxref("Element")}}, le {{domxref("Document")}} lui-même et une {{domxref("Window")}}, mais on peut tout à fait cible n'importe quel objet prenant en charge les évènements (comme {{domxref("XMLHttpRequest")}}).</p>
-
-<p><code>addEventListener()</code> agit en ajoutant une fonction ou un objet qui implémente {{domxref("EventListener")}} à la liste des gestionnaires d'évènement pour le type d'évènement spécifié sur la cible ({{domxref("EventTarget")}}) à partir de laquelle il est appelé.</p>
-
-<h2 id="Syntax">Syntaxe</h2>
-
-<pre
-  class="brush: js"><var>target</var>.addEventListener(<var>type</var>, <var>listener</var> [, <var>options</var>]);
-<var>target</var>.addEventListener(<var>type</var>, <var>listener</var> [, <var>useCapture</var>]);
-<var>target</var>.addEventListener(<var>type</var>, <var>listener</var> [, <var>useCapture</var>, <var>wantsUntrusted</var> {{Non-standard_inline}}]); // Gecko/Mozilla uniquement</pre>
-
-
-<h3 id="Parameters">Paramètres</h3>
-
-<dl>
-  <dt><code>type</code></dt>
-  <dd>Une chaîne sensible à la casse représentant le <a href="/fr/docs/Web/Events">type d'évènement</a> à écouter.</dd>
-  <dt><code>listener</code></dt>
-  <dd>L'objet qui recevra un évènement (c'est-à-dire un objet qui implémente l'interface {{domxref("Event")}}) lorsqu'un évènement du type spécifié se produit. Cet argument doit être un objet implémentant l'interface {{domxref("EventListener")}} ou une <a href="/fr/docs/Web/JavaScript/Guide/Functions">fonction</a> JavaScript. Voir {{anch("The_event_listener_callback", "Fonction de rappel (<i>callback</i> pour le gestionnaire d'évènement)")}} pour plus de détails sur le fonctionnement d'une fonction de rappel.</dd>
-  <dt><code>options</code> {{optional_inline}}</dt>
-  <dd>Un objet options spécifie les caractéristiques de l'écouteur d'évènements. Les options disponibles sont :
-    <dl>
-      <dt><code>capture</code></dt>
-        <dd>Un booléen ({{jsxref("Boolean")}}) indiquant que les évènements de ce type seront distribués à l'<code><var>listener</var></code> enregistré avant d'être distribués à tout <code>EventTarget</code> située en dessous dans l'arborescence DOM.</dd>
-        <dt><code>once</code></dt>
-        <dd>Un booléen ({{jsxref("Boolean")}}) indiquant que <code>listener</code> doit être invoqué au plus une fois après avoir été ajouté. Si <code>true</code> (vrai), <code>listener</code> sera automatiquement supprimé après son appel.</dd>
-        <dt><code>passive</code></dt>
-        <dd>Un booléen ({{jsxref("Boolean")}}) qui, si <code>true</code>, indique que la fonction spécifiée par <code>listener</code> n'appellera jamais {{domxref("Event.preventDefault", "preventDefault()")}}. Si un écouteur passif appelle <code>preventDefault()</code>, l'agent utilisateur ne fera rien d'autre que de générer un avertissement dans la console. Voir {{anch("Improving_scrolling_performance_with_passive_listeners","Améliorer les performances du défilement avec des gestionnaires passifs")}} pour en apprendre davantage.</dd>
-        <dt><code>mozSystemGroup</code> {{non-standard_inline}}</dt>
-        <dd>Un booléen ({{jsxref("Boolean")}}) indiquant que l'écouteur doit être ajouté au groupe système. Disponible uniquement pour le code s'exécutant dans XBL ou dans le {{glossary("chrome")}} du navigateur Firefox.</dd>
-      </dl>
-    </dd>
-  <dt><code>useCapture</code> {{optional_inline}}</dt>
-  <dd>Un booléen ({{jsxref("Boolean")}}) indiquant si les évènements de ce type seront distribués au <code>listener</code> enregistré avant d'être distribués à toute <code>EventTarget</code> (« cible d'évènement ») située en dessous dans l'arborescence DOM. Les évènements qui se propagent vers le haut dans l'arborescence ne déclencheront pas un écouteur indiqué comme utilisant la capture. La propagation et la capture d'évènements sont deux manières de propager des évènements qui se produisent dans un élément imbriqué dans un autre, lorsque les deux éléments ont enregistré un gestionnaire pour cet évènement. Le mode de propagation de l'évènement détermine l'ordre dans lequel les éléments reçoivent l'évènement. Voir les <a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow">DOM Level 3 Events</a> et <a href="http://www.quirksmode.org/js/events_order.html#link4">JavaScript Event order</a> pour une explication détaillée. S'il n'est pas spécifié, <code>useCapture</code> aura <code>false</code> comme valeur par défaut.</dd>
-</dl>
-
-<div class="notecard note">
-  <p><strong>Note :</strong> Pour les écouteurs attachés à la cible d'évènement, l'évènement se trouve dans la phase cible, plutôt que dans les phases de propagation et de capture. Les évènements dans la phase cible déclencheront tous les écouteurs d'un élément dans l'ordre où ils ont été enregistrés, indépendamment du paramètre <code>useCapture</code>.</p>
-</div>
+{{APIRef("DOM Events")}}
 
-<div class="notecard note">
-  <p><strong>Note :</strong> <code>useCapture</code> n'a pas toujours été facultatif. Idéalement, vous devriez l'inclure pour une compatibilité navigateur la plus large possible.</p>
-</div>
+\>La méthode **`addEventListener()`** de {{domxref("EventTarget")}} attache une fonction à appeler chaque fois que l'évènement spécifié est envoyé à la cible.
+
+Les cibles courantes sont un {{domxref("Element")}}, le {{domxref("Document")}} lui-même et une {{domxref("Window")}}, mais on peut tout à fait cible n'importe quel objet prenant en charge les évènements (comme {{domxref("XMLHttpRequest")}}).
+
+`addEventListener()` agit en ajoutant une fonction ou un objet qui implémente {{domxref("EventListener")}} à la liste des gestionnaires d'évènement pour le type d'évènement spécifié sur la cible ({{domxref("EventTarget")}}) à partir de laquelle il est appelé.
+
+## Syntaxe
+
+```js
+target.addEventListener(type, listener [, options]);
+target.addEventListener(type, listener [, useCapture]);
+target.addEventListener(type, listener [, useCapture, wantsUntrusted {{Non-standard_inline}}]); // Gecko/Mozilla uniquement
+```
+
+### Paramètres
+
+- `type`
+  - : Une chaîne sensible à la casse représentant le [type d'évènement](/fr/docs/Web/Events) à écouter.
+- `listener`
+  - : L'objet qui recevra un évènement (c'est-à-dire un objet qui implémente l'interface {{domxref("Event")}}) lorsqu'un évènement du type spécifié se produit. Cet argument doit être un objet implémentant l'interface {{domxref("EventListener")}} ou une [fonction](/fr/docs/Web/JavaScript/Guide/Functions) JavaScript. Voir {{anch("The_event_listener_callback", "Fonction de rappel (<i>callback</i> pour le gestionnaire d'évènement)")}} pour plus de détails sur le fonctionnement d'une fonction de rappel.
+- `options` {{optional_inline}}
 
-<dl>
-  <dt><code>wantsUntrusted</code> {{Non-standard_inline}}</dt>
-  <dd>Un paramètre spécifique à Firefox (Gecko). Si <code>true</code>, l'écouteur reçoit les évènements synthétiques distribués par le contenu web (le défaut est <code>false</code> pour le {{glossary("chrome")}} du navigateur et <code>true</code> pour les pages web ordinaires). Ce paramètre est utile pour le code qui se trouve dans les compléments, ainsi que pour le navigateur lui-même.</dd>
-</dl>
+  - : Un objet options spécifie les caractéristiques de l'écouteur d'évènements. Les options disponibles sont :
 
-<h3 id="Return_value">Valeur de retour</h3>
+    - `capture`
+      - : Un booléen ({{jsxref("Boolean")}}) indiquant que les évènements de ce type seront distribués à l'`listener` enregistré avant d'être distribués à tout `EventTarget` située en dessous dans l'arborescence DOM.
+    - `once`
+      - : Un booléen ({{jsxref("Boolean")}}) indiquant que `listener` doit être invoqué au plus une fois après avoir été ajouté. Si `true` (vrai), `listener` sera automatiquement supprimé après son appel.
+    - `passive`
+      - : Un booléen ({{jsxref("Boolean")}}) qui, si `true`, indique que la fonction spécifiée par `listener` n'appellera jamais {{domxref("Event.preventDefault", "preventDefault()")}}. Si un écouteur passif appelle `preventDefault()`, l'agent utilisateur ne fera rien d'autre que de générer un avertissement dans la console. Voir {{anch("Improving_scrolling_performance_with_passive_listeners","Améliorer les performances du défilement avec des gestionnaires passifs")}} pour en apprendre davantage.
+    - `mozSystemGroup` {{non-standard_inline}}
+      - : Un booléen ({{jsxref("Boolean")}}) indiquant que l'écouteur doit être ajouté au groupe système. Disponible uniquement pour le code s'exécutant dans XBL ou dans le {{glossary("chrome")}} du navigateur Firefox.
 
-<p><code>undefined</code></p>
+- `useCapture` {{optional_inline}}
+  - : Un booléen ({{jsxref("Boolean")}}) indiquant si les évènements de ce type seront distribués au `listener` enregistré avant d'être distribués à toute `EventTarget` (« cible d'évènement ») située en dessous dans l'arborescence DOM. Les évènements qui se propagent vers le haut dans l'arborescence ne déclencheront pas un écouteur indiqué comme utilisant la capture. La propagation et la capture d'évènements sont deux manières de propager des évènements qui se produisent dans un élément imbriqué dans un autre, lorsque les deux éléments ont enregistré un gestionnaire pour cet évènement. Le mode de propagation de l'évènement détermine l'ordre dans lequel les éléments reçoivent l'évènement. Voir les [DOM Level 3 Events](http://www.w3.org/TR/DOM-Level-3-Events/#event-flow) et [JavaScript Event order](http://www.quirksmode.org/js/events_order.html#link4) pour une explication détaillée. S'il n'est pas spécifié, `useCapture` aura `false` comme valeur par défaut.
 
-<h2 id="Usage_notes">Notes d'utilisation</h2>
+> **Note :** Pour les écouteurs attachés à la cible d'évènement, l'évènement se trouve dans la phase cible, plutôt que dans les phases de propagation et de capture. Les évènements dans la phase cible déclencheront tous les écouteurs d'un élément dans l'ordre où ils ont été enregistrés, indépendamment du paramètre `useCapture`.
 
-<h3 id="The_event_listener_callback">Utilisation d'une fonction de rappel (<i>callback</i>)</h3>
+> **Note :** `useCapture` n'a pas toujours été facultatif. Idéalement, vous devriez l'inclure pour une compatibilité navigateur la plus large possible.
 
-<p>L'écouteur d'évènement peut être spécifié, soit comme une fonction de rappel (<i>callback</i>), soit comme un objet qui implémente {{domxref("EventListener")}} dont la méthode {{domxref("EventListener.handleEvent", "handleEvent()")}} sert de fonction de rappel.</p>
+- `wantsUntrusted` {{Non-standard_inline}}
+  - : Un paramètre spécifique à Firefox (Gecko). Si `true`, l'écouteur reçoit les évènements synthétiques distribués par le contenu web (le défaut est `false` pour le {{glossary("chrome")}} du navigateur et `true` pour les pages web ordinaires). Ce paramètre est utile pour le code qui se trouve dans les compléments, ainsi que pour le navigateur lui-même.
 
-<p>La fonction de rappel reçoit les mêmes paramètres et fournit la même valeur de retour que la méthode <code>handleEvent()</code> ; c'est-à-dire que le rappel accepte un seul paramètre : un objet basé sur {{domxref("Event")}} décrivant l'évènement qui s'est produit, et il ne retourne rien.</p>
+### Valeur de retour
 
-<p>Par exemple, un rappel de gestionnaire d'évènements pouvant être utilisé pour gérer à la fois {{domxref("Element/fullscreenchange_event", "fullscreenchange")}} et {{domxref("Element/fullscreenerror_event", "fullscreenerror")}} peut ressembler à ceci :</p>
+`undefined`
 
-<pre class="brush: js">
+## Notes d'utilisation
+
+### Utilisation d'une fonction de rappel (_callback_)
+
+L'écouteur d'évènement peut être spécifié, soit comme une fonction de rappel (_callback_), soit comme un objet qui implémente {{domxref("EventListener")}} dont la méthode {{domxref("EventListener.handleEvent", "handleEvent()")}} sert de fonction de rappel.
+
+La fonction de rappel reçoit les mêmes paramètres et fournit la même valeur de retour que la méthode `handleEvent()` ; c'est-à-dire que le rappel accepte un seul paramètre : un objet basé sur {{domxref("Event")}} décrivant l'évènement qui s'est produit, et il ne retourne rien.
+
+Par exemple, un rappel de gestionnaire d'évènements pouvant être utilisé pour gérer à la fois {{domxref("Element/fullscreenchange_event", "fullscreenchange")}} et {{domxref("Element/fullscreenerror_event", "fullscreenerror")}} peut ressembler à ceci :
+
+```js
 function eventHandler(event) {
   if (event.type == 'fullscreenchange') {
     /* gérer un passage en plein écran */
@@ -103,17 +95,17 @@ function eventHandler(event) {
     /* gérer une erreur de passage en plein écran */
   }
 }
-</pre>
+```
 
-<h3 id="Safely_detecting_option_support">Détection la prise en charge d'<code>options</code></h3>
+### Détection la prise en charge d'`options`
 
-<p>Dans les anciennes versions de la spécification DOM, le troisième paramètre de <code>addEventListener()</code> était une valeur booléenne indiquant s'il fallait ou non utiliser la capture. Au fil du temps, il est devenu clair que davantage d'options étaient nécessaires. Plutôt que d'ajouter davantage de paramètres à la fonction (ce qui complique énormément les choses lors du traitement des valeurs optionnelles), le troisième paramètre a été changé en un objet pouvant contenir diverses propriétés définissant les valeurs des options pour configurer le processus de suppression de l'écouteur d'évènement.</p>
+Dans les anciennes versions de la spécification DOM, le troisième paramètre de `addEventListener()` était une valeur booléenne indiquant s'il fallait ou non utiliser la capture. Au fil du temps, il est devenu clair que davantage d'options étaient nécessaires. Plutôt que d'ajouter davantage de paramètres à la fonction (ce qui complique énormément les choses lors du traitement des valeurs optionnelles), le troisième paramètre a été changé en un objet pouvant contenir diverses propriétés définissant les valeurs des options pour configurer le processus de suppression de l'écouteur d'évènement.
 
-<p>Du fait que les navigateurs anciens supposent toujours que le troisième paramètre est un booléen, vous devez construire votre code de façon à gérer ce scénario intelligemment. Vous pouvez le faire en utilisant la détection de fonctionnalité pour chacune des options qui vous intéresse.</p>
+Du fait que les navigateurs anciens supposent toujours que le troisième paramètre est un booléen, vous devez construire votre code de façon à gérer ce scénario intelligemment. Vous pouvez le faire en utilisant la détection de fonctionnalité pour chacune des options qui vous intéresse.
 
-<p>Par exemple, si vous voulez vérifier l'option <code>passive</code> :</p>
+Par exemple, si vous voulez vérifier l'option `passive` :
 
-<pre class="brush: js">
+```js
 let passiveSupported = false;
 
 try {
@@ -128,46 +120,46 @@ try {
 } catch(err) {
   passiveSupported = false;
 }
-</pre>
+```
 
-<p>Cela crée un objet <code>options</code> avec une fonction accesseur pour la propriété <code>passive</code> ; l'accesseur initialise un indicateur, <code>passiveSupported</code>, à <code>true</code> si elle est appelée. Cela signifie que si le navigateur vérifie la valeur de la propriété <code>passive</code> dans l'objet <code>options</code>, <code>passiveSupported</code> sera initialisé à <code>true</code> ; sinon, il restera <code>false</code>. Nous appelons alors <code>addEventListener()</code> pour installer un faux gestionnaire d'évènements, en spécifiant ces options, se sorte qu'elles soient vérifiées si le navigateur reconnaît un objet comme troisième paramètre. Ensuite, nous appelons <code>removeEventListener()</code> pour faire le ménage après notre passage. (Notez que <code>handleEvent()</code> est ignoré dans les écouteurs d'évènements qui ne sont pas appelés).</p>
+Cela crée un objet `options` avec une fonction accesseur pour la propriété `passive` ; l'accesseur initialise un indicateur, `passiveSupported`, à `true` si elle est appelée. Cela signifie que si le navigateur vérifie la valeur de la propriété `passive` dans l'objet `options`, `passiveSupported` sera initialisé à `true` ; sinon, il restera `false`. Nous appelons alors `addEventListener()` pour installer un faux gestionnaire d'évènements, en spécifiant ces options, se sorte qu'elles soient vérifiées si le navigateur reconnaît un objet comme troisième paramètre. Ensuite, nous appelons `removeEventListener()` pour faire le ménage après notre passage. (Notez que `handleEvent()` est ignoré dans les écouteurs d'évènements qui ne sont pas appelés).
 
-<p>Vous pouvez vérifier de cette façon si une option quelconque est supportée. Ajoutez simplement un accesseur pour cette option en utilisant un code similaire à celui montré ci-dessus.</p>
+Vous pouvez vérifier de cette façon si une option quelconque est supportée. Ajoutez simplement un accesseur pour cette option en utilisant un code similaire à celui montré ci-dessus.
 
-<p>Ensuite, lorsque vous voulez créer un écouteur d'évènements réel qui utilise les options en question, vous pouvez faire quelque chose comme ce qui suit :</p>
+Ensuite, lorsque vous voulez créer un écouteur d'évènements réel qui utilise les options en question, vous pouvez faire quelque chose comme ce qui suit :
 
-<pre class="brush: js">
+```js
 someElement.addEventListener(
   "mouseup",
   handleMouseUp,
   passiveSupported ? { passive: true } : false
 );
-</pre>
+```
 
-<p>Ici, nous ajoutons un écouteur pour l'évènement {{domxref("Element/mouseup_event", "mouseup")}} dans l'élément <code>someElement</code>. Pour le troisième paramètre, si <code>passiveSupported</code> est <code>true</code>, nous spécifions un objet <code>options</code> avec <code>passive</code> initialisée à <code>true</code> ; sinon, nous savons que nous devons passer un Boolean, et nous passons <code>false</code> comme valeur du paramètre <code>useCapture</code>.</p>
+Ici, nous ajoutons un écouteur pour l'évènement {{domxref("Element/mouseup_event", "mouseup")}} dans l'élément `someElement`. Pour le troisième paramètre, si `passiveSupported` est `true`, nous spécifions un objet `options` avec `passive` initialisée à `true` ; sinon, nous savons que nous devons passer un Boolean, et nous passons `false` comme valeur du paramètre `useCapture`.
 
-<p>Si vous préférez, vous pouvez utiliser une bibliothèque tierce comme <a href="https://github.com/modernizr/modernizr">Modernizr</a> ou <a href="https://github.com/rafrex/detect-it">Detect It</a> pour faire ce test pour vous.</p>
+Si vous préférez, vous pouvez utiliser une bibliothèque tierce comme [Modernizr](https://github.com/modernizr/modernizr) ou [Detect It](https://github.com/rafrex/detect-it) pour faire ce test pour vous.
 
-<p>Vous pouvez en apprendre davantage dans l'article à propos des <code><a href="https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md#feature-detection">EventListenerOptions</a></code> du <a href="https://wicg.github.io/admin/charter.html">Groupe Web Incubator Community</a>.</p>
+Vous pouvez en apprendre davantage dans l'article à propos des [`EventListenerOptions`](https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md#feature-detection) du [Groupe Web Incubator Community](https://wicg.github.io/admin/charter.html).
 
-<h2 id="Examples">Exemples</h2>
+## Exemples
 
-<h3 id="Add_a_simple_listener">Ajouter un écouteur simple</h3>
+### Ajouter un écouteur simple
 
-<p>Cet exemple montre comment utiliser <code>addEventListener()</code> pour surveiller les clics de souris sur un élément.</p>
+Cet exemple montre comment utiliser `addEventListener()` pour surveiller les clics de souris sur un élément.
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">
-&lt;table id="outside"&gt;
-  &lt;tr&gt;&lt;td id="t1"&gt;un&lt;/td&gt;&lt;/tr&gt;
-  &lt;tr&gt;&lt;td id="t2"&gt;deux&lt;/td&gt;&lt;/tr&gt;
-&lt;/table&gt;
-</pre>
+```html
+<table id="outside">
+  <tr><td id="t1">un</td></tr>
+  <tr><td id="t2">deux</td></tr>
+</table>
+```
 
-<h4 id="JavaScript">JavaScript</h4>
+#### JavaScript
 
-<pre class="brush: js">
+```js
 // Fonction pour changer le contenu de t2
 function modifyText() {
   const t2 = document.querySelector("#t2");
@@ -181,30 +173,30 @@ function modifyText() {
 // Ajouter un écouteur d'évènements à la table
 const el = document.querySelector("#outside");
 el.addEventListener("click", modifyText, false);
-</pre>
+```
 
-<p>Dans ce code, <code>modifyText()</code> est un écouteur pour les évènements <code>click</code> enregistré en utilisant <code>addEventListener()</code>. Un clic n'importe où sur la table se propagera jusqu'au gestionnaire et exécutera <code>modifyText()</code>.</p>
+Dans ce code, `modifyText()` est un écouteur pour les évènements `click` enregistré en utilisant `addEventListener()`. Un clic n'importe où sur la table se propagera jusqu'au gestionnaire et exécutera `modifyText()`.
 
-<h4 id="Result">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample('Add_a_simple_listener')}}</p>
+{{EmbedLiveSample('Add_a_simple_listener')}}
 
-<h3 id="Event_listener_with_anonymous_function">Écouteur d'évènement avec une fonction anonyme</h3>
+### Écouteur d'évènement avec une fonction anonyme
 
-<p>Ici, nous allons voir comment utiliser une fonction anonyme pour passer des paramètres à l'écouteur d'évènements.</p>
+Ici, nous allons voir comment utiliser une fonction anonyme pour passer des paramètres à l'écouteur d'évènements.
 
-<h4 id="HTML_2">HTML</h4>
+#### HTML
 
-<pre class="brush: html">
-&lt;table id="outside"&gt;
-  &lt;tr&gt;&lt;td id="t1"&gt;un&lt;/td&gt;&lt;/tr&gt;
-  &lt;tr&gt;&lt;td id="t2"&gt;deux&lt;/td&gt;&lt;/tr&gt;
-&lt;/table&gt;
-</pre>
+```html
+<table id="outside">
+  <tr><td id="t1">un</td></tr>
+  <tr><td id="t2">deux</td></tr>
+</table>
+```
 
-<h4 id="JavaScript_2">JavaScript</h4>
+#### JavaScript
 
-<pre class="brush: js">
+```js
 // Fonction pour changer le contenu de t2
 function modifyText(newText) {
   const t2 = document.querySelector("#t2");
@@ -214,30 +206,30 @@ function modifyText(newText) {
 // Fonction pour ajouter un écouteur d'évènement à la table
 const el = document.querySelector("#outside");
 el.addEventListener("click", function(){modifyText("quatre")}, false);
-</pre>
+```
 
-<p>Notez que l'écouteur est une fonction anonyme encapsulant le code qui peut à son tour envoyer des paramètres à la fonction <code>modifyText()</code>, qui est responsable de la réponse effective à l'évènement.</p>
+Notez que l'écouteur est une fonction anonyme encapsulant le code qui peut à son tour envoyer des paramètres à la fonction `modifyText()`, qui est responsable de la réponse effective à l'évènement.
 
-<h4 id="Result_2">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample('Event_listener_with_anonymous_function')}}</p>
+{{EmbedLiveSample('Event_listener_with_anonymous_function')}}
 
-<h3 id="Event_listener_with_an_arrow_function">Écouteur d'évènement avec une fonction fléchée</h3>
+### Écouteur d'évènement avec une fonction fléchée
 
-<p>Cet exemple montre un écouteur d'évènement simple implémenté en utilisant la notation de fonction fléchée.</p>
+Cet exemple montre un écouteur d'évènement simple implémenté en utilisant la notation de fonction fléchée.
 
-<h4 id="HTML_3">HTML</h4>
+#### HTML
 
-<pre class="brush: html">
-&lt;table id="outside"&gt;
-  &lt;tr&gt;&lt;td id="t1"&gt;un&lt;/td&gt;&lt;/tr&gt;
-  &lt;tr&gt;&lt;td id="t2"&gt;deux&lt;/td&gt;&lt;/tr&gt;
-&lt;/table&gt;
-</pre>
+```html
+<table id="outside">
+  <tr><td id="t1">un</td></tr>
+  <tr><td id="t2">deux</td></tr>
+</table>
+```
 
-<h4 id="JavaScript_3">JavaScript</h4>
+#### JavaScript
 
-<pre class="brush: js">
+```js
 // Fonction pour changer le contenu de t2
 function modifyText(newText) {
   const t2 = document.querySelector("#t2");
@@ -246,40 +238,41 @@ function modifyText(newText) {
 
 // Ajouter un écouteur d'évènements à la table avec une fonction fléchée
 const el = document.querySelector("#outside");
-el.addEventListener("click", () =&gt; {
+el.addEventListener("click", () => {
   modifyText("quatre");
-}, false);</pre>
+}, false);
+```
 
-<h4 id="Result_3">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample('Event_listener_with_an_arrow_function')}}</p>
+{{EmbedLiveSample('Event_listener_with_an_arrow_function')}}
 
-<p>Notez que si les fonctions anonymes et fléchées sont similaires, elles ont des liaisons <code>this</code> différentes. Alors que les fonctions anonymes (et toutes les fonctions JavaScript traditionnelles) créent leurs propres liaisons <code>this</code>, les fonctions fléchées héritent la liaison <code>this</code> de la fonction contenante. <a href="fr/docs/Web/JavaScript/Reference/Operators/this#avec_les_fonctions_fléchées">Voir la page sur l'opérateur <code>this</code> pour plus d'informations.</a></p>
+Notez que si les fonctions anonymes et fléchées sont similaires, elles ont des liaisons `this` différentes. Alors que les fonctions anonymes (et toutes les fonctions JavaScript traditionnelles) créent leurs propres liaisons `this`, les fonctions fléchées héritent la liaison `this` de la fonction contenante. [Voir la page sur l'opérateur `this` pour plus d'informations.](fr/docs/Web/JavaScript/Reference/Operators/this#avec_les_fonctions_fléchées)
 
-<p>Cela signifie que les variables et constantes disponibles pour la fonction contenante sont aussi disponibles pour le gestionnaire d'évènements lors de l'utilisation d'une fonction fléchée.</p>
+Cela signifie que les variables et constantes disponibles pour la fonction contenante sont aussi disponibles pour le gestionnaire d'évènements lors de l'utilisation d'une fonction fléchée.
 
-<h3 id="Example_of_options_usage">Exemple d'utilisation des options</h3>
+### Exemple d'utilisation des options
 
-<h4 id="HTML_4">HTML</h4>
+#### HTML
 
-<pre class="brush: html">
-&lt;div class="outer"&gt;
-  extérieur, once &amp; none-once
-  &lt;div class="middle" target="_blank"&gt;
-    milieu, capture &amp; none-capture
-    &lt;a class="inner1" href="https://www.mozilla.org" target="_blank"&gt;
-      intérieur1, passive &amp; preventDefault (ce qui n'est pas autorisé)
-    &lt;/a&gt;
-    &lt;a class="inner2" href="/" target="_blank"&gt;
-      intérieur2, none-passive &amp; preventDefault (nouvelle page non ouverte)
-    &lt;/a&gt;
-  &lt;/div&gt;
-&lt;/div&gt;
-</pre>
+```html
+<div class="outer">
+  extérieur, once & none-once
+  <div class="middle" target="_blank">
+    milieu, capture & none-capture
+    <a class="inner1" href="https://www.mozilla.org" target="_blank">
+      intérieur1, passive & preventDefault (ce qui n'est pas autorisé)
+    </a>
+    <a class="inner2" href="/" target="_blank">
+      intérieur2, none-passive & preventDefault (nouvelle page non ouverte)
+    </a>
+  </div>
+</div>
+```
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">
+```css
 .outer,
 .middle,
 .inner1,
@@ -305,11 +298,11 @@ el.addEventListener("click", () =&gt; {
   color: purple;
   width: 400px;
 }
-</pre>
+```
 
-<h4 id="JavaScript_4">JavaScript</h4>
+#### JavaScript
 
-<pre class="brush: js">
+```js
 const outer = document.querySelector('.outer');
 const middle = document.querySelector('.middle');
 const inner1 = document.querySelector('.inner1');
@@ -364,32 +357,32 @@ function nonePassiveHandler(event) {
   // event.stopPropagation();
   console.log('intérieur2, none-passive, default, nouvelle page non ouverte');
 }
-</pre>
+```
 
-<h4 id="Result_4">Résultat</h4>
+#### Résultat
 
-<p>Cliquez les conteneurs <var>extérieur</var>, <var>milieu</var>, <var>intérieurs</var> respectivement pour voir comment les options fonctionnent. Vous pouvez ouvrir la console pour observer les différents messages émis.</p>
+Cliquez les conteneurs _extérieur_, _milieu_, _intérieurs_ respectivement pour voir comment les options fonctionnent. Vous pouvez ouvrir la console pour observer les différents messages émis.
 
-<p>{{EmbedLiveSample('Example_of_options_usage', '', '320')}}</p>
+{{EmbedLiveSample('Example_of_options_usage', '', '320')}}
 
-<p>Avant d'utiliser une valeur particulière dans l'objet <code>options</code>, c'est une bonne idée que de s'assurer que le navigateur de l'utilisateur la prend en charge, du fait qu'elles sont un ajout que tous les navigateurs n'ont pas pris en charge historiquement. Voir {{anch("Safely_detecting_option_support", "Détection sûre du support des options")}} pour les détails.</p>
+Avant d'utiliser une valeur particulière dans l'objet `options`, c'est une bonne idée que de s'assurer que le navigateur de l'utilisateur la prend en charge, du fait qu'elles sont un ajout que tous les navigateurs n'ont pas pris en charge historiquement. Voir {{anch("Safely_detecting_option_support", "Détection sûre du support des options")}} pour les détails.
 
-<h3 id="Add_a_abortable_listener">Ajout d'un écouteur annulable</h3>
+### Ajout d'un écouteur annulable
 
-<p>Cet exemple montre comment ajouter un <code>addEventListener()</code> qui peut être interrompu par un {{domxref("AbortSignal")}}.</p>
+Cet exemple montre comment ajouter un `addEventListener()` qui peut être interrompu par un {{domxref("AbortSignal")}}.
 
-<h4 id="HTML_5">HTML</h4>
+#### HTML
 
-<pre class="brush: html">
-&lt;table id="outside"&gt;
-  &lt;tr&gt;&lt;td id="t1"&gt;un&lt;/td&gt;&lt;/tr&gt;
-  &lt;tr&gt;&lt;td id="t2"&gt;deux&lt;/td&gt;&lt;/tr&gt;
-&lt;/table&gt;
-</pre>
+```html
+<table id="outside">
+  <tr><td id="t1">un</td></tr>
+  <tr><td id="t2">deux</td></tr>
+</table>
+```
 
-<h4 id="JavaScript_5">JavaScript</h4>
+#### JavaScript
 
-<pre class="brush: js">
+```js
 // Ajout d'un écouteur d'évènement annulable à la table
 const controller = new AbortController();
 const el = document.querySelector("#outside");
@@ -405,92 +398,90 @@ function modifyText() {
     controller.abort(); // supprime l'écouteur lorsque la valeur est "trois".
   }
 }
-</pre>
+```
 
-<p>Dans l'exemple ci-dessus, nous modifions le code de l'exemple {{anch('Add_a_simple_listener', 'Ajouter un écouteur simple')}} de telle sorte qu'après que le contenu de la deuxième ligne soit devenu « trois », nous appelons <code>abort()</code> à partir du {{domxref("AbortController")}} que nous avons passé à l'appel <code>addEventListener()</code>. Cela a pour résultat que la valeur reste à "trois" pour toujours, parce que nous n'avons plus de code écoutant un évènement de clic.</p>
+Dans l'exemple ci-dessus, nous modifions le code de l'exemple {{anch('Add_a_simple_listener', 'Ajouter un écouteur simple')}} de telle sorte qu'après que le contenu de la deuxième ligne soit devenu « trois », nous appelons `abort()` à partir du {{domxref("AbortController")}} que nous avons passé à l'appel `addEventListener()`. Cela a pour résultat que la valeur reste à "trois" pour toujours, parce que nous n'avons plus de code écoutant un évènement de clic.
 
-<h4 id="Result_5">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample('Add_a_abortable_listener')}}</p>
+{{EmbedLiveSample('Add_a_abortable_listener')}}
 
-<h2 id="Other_notes">Autres notes</h2>
+## Autres notes
 
-<h3 id="Why_use_addEventListener">Pourquoi utiliser addEventListener() ?</h3>
+### Pourquoi utiliser addEventListener() ?
 
-<p><code>addEventListener</code> est la manière d'enregistrer un écouteur d'évènements telle que spécifiée dans le DOM du W3C. Ses avantages sont les suivants :</p>
+`addEventListener` est la manière d'enregistrer un écouteur d'évènements telle que spécifiée dans le DOM du W3C. Ses avantages sont les suivants :
 
-<ul>
-  <li>Elle permet d'ajouter plus d'un seul gestionnaire pour un évènement. Cela peut s'avérer particulièrement utile pour les bibliothèques {{Glossary("AJAX")}}, les modules JavaScript ou tout autre sorte de code qui a besoin de fonctionner correctement avec d'autres bibliothèques/extensions.</li>
-  <li>Elle donne un contrôle plus fin sur la phase d'activation de l'écouteur (capture contre propagation)</li>
-  <li>Elle fonctionne avec tout élément DOM, pas seulement avec les éléments HTML.</li>
-</ul>
+- Elle permet d'ajouter plus d'un seul gestionnaire pour un évènement. Cela peut s'avérer particulièrement utile pour les bibliothèques {{Glossary("AJAX")}}, les modules JavaScript ou tout autre sorte de code qui a besoin de fonctionner correctement avec d'autres bibliothèques/extensions.
+- Elle donne un contrôle plus fin sur la phase d'activation de l'écouteur (capture contre propagation)
+- Elle fonctionne avec tout élément DOM, pas seulement avec les éléments HTML.
 
-<p>L'<a href="#older_way_to_register_event_listeners">ancienne manière alternative</a> d'enregistrer des évènements est décrite ci-dessous.</p>
+L'[ancienne manière alternative](#older_way_to_register_event_listeners) d'enregistrer des évènements est décrite ci-dessous.
 
-<h3 id="Adding_a_listener_during_event_dispatch">Ajout d'un écouteur pendant la distribution d'un évènement</h3>
+### Ajout d'un écouteur pendant la distribution d'un évènement
 
-<p>Si un {{domxref("EventListener")}} est ajouté à une {{domxref("EventTarget")}} pendant qu'elle traite un évènement, cet évènement ne déclenchera l'écouteur. Cependant, le même écouteur pourra être déclenché à une étape ultérieure du flux d'évènements, telle que la phase de propagation.</p>
+Si un {{domxref("EventListener")}} est ajouté à une {{domxref("EventTarget")}} pendant qu'elle traite un évènement, cet évènement ne déclenchera l'écouteur. Cependant, le même écouteur pourra être déclenché à une étape ultérieure du flux d'évènements, telle que la phase de propagation.
 
-<h3 id="Multiple_identical_event_listeners">Écouteurs d'évènements identiques multiples</h3>
+### Écouteurs d'évènements identiques multiples
 
-<p>Si des <code>EventListener</code> identiques multiples sont enregistrés sur la même <code>EventTarget</code> avec les mêmes paramètres, les instances dupliquées sont supprimées. Elles ne provoqueront pas un appel en double de l'<code>EventListener</code>, et elles n'ont pas besoin d'être enlevées avec la méthode {{domxref("EventTarget.removeEventListener()", "removeEventListener()")}}.</p>
+Si des `EventListener` identiques multiples sont enregistrés sur la même `EventTarget` avec les mêmes paramètres, les instances dupliquées sont supprimées. Elles ne provoqueront pas un appel en double de l'`EventListener`, et elles n'ont pas besoin d'être enlevées avec la méthode {{domxref("EventTarget.removeEventListener()", "removeEventListener()")}}.
 
-<p>Notez toutefois que lors de l'utilisation d'une fonction anonyme comme gestionnaire, de tels écouteurs ne seront PAS identiques, du fait que les fonctions anonymes ne sont pas identiques, même si définies en utilisant le MÊME code source inchangé, simplement appelé répétitivement, même dans une boucle.</p>
+Notez toutefois que lors de l'utilisation d'une fonction anonyme comme gestionnaire, de tels écouteurs ne seront PAS identiques, du fait que les fonctions anonymes ne sont pas identiques, même si définies en utilisant le MÊME code source inchangé, simplement appelé répétitivement, même dans une boucle.
 
-<p>Cependant, le fait de définir répétitivement la même fonction nommée dans de tels cas peut être davantage problématique. (Voir <a href="#memory_issues">Problèmes de mémoire</a> ci-dessous.)</p>
+Cependant, le fait de définir répétitivement la même fonction nommée dans de tels cas peut être davantage problématique. (Voir [Problèmes de mémoire](#memory_issues) ci-dessous.)
 
-<h3 id="The_value_of_this_within_the_handler">La valeur de "this" à l'intérieur du gestionnaire</h3>
+### La valeur de "this" à l'intérieur du gestionnaire
 
-<p>Il est souvent souhaitable de référencer l'élément sur lequel le gestionnaire d'évènements a été déclenché, comme lors de l'utilisation d'un gestionnaire générique pour un ensemble d'éléments similaires.</p>
+Il est souvent souhaitable de référencer l'élément sur lequel le gestionnaire d'évènements a été déclenché, comme lors de l'utilisation d'un gestionnaire générique pour un ensemble d'éléments similaires.
 
-<p>Lorsqu'une fonction gestionnaire est attachée à un élément en utilisant <code>addEventListener()</code>, la valeur de {{jsxref("Operators/this","this")}} à l'intérieur du gestionnaire est une référence à l'élément. C'est la même valeur que celle de la propriété <code>currentTarget</code> de l'argument évènement qui est passé au gestionnaire.</p>
+Lorsqu'une fonction gestionnaire est attachée à un élément en utilisant `addEventListener()`, la valeur de {{jsxref("Operators/this","this")}} à l'intérieur du gestionnaire est une référence à l'élément. C'est la même valeur que celle de la propriété `currentTarget` de l'argument évènement qui est passé au gestionnaire.
 
-<pre class="brush: js">
+```js
 my_element.addEventListener('click', function(e) {
   console.log(this.className)           // journalise le className de my_element
   console.log(e.currentTarget === this) // journalise `true`
 })
-</pre>
+```
 
-<p>Pour mémoire, les <a href="/fr/docs/Web/JavaScript/Reference/Functions/Arrow_functions#pas_de_this_lié_à_la_fonction">fonctions fléchées n'ont pas de <code>this</code> lié</a>.</p>
+Pour mémoire, les [fonctions fléchées n'ont pas de `this` lié](/fr/docs/Web/JavaScript/Reference/Functions/Arrow_functions#pas_de_this_lié_à_la_fonction).
 
-<pre class="brush: js">
-my_element.addEventListener('click', (e) =&gt; {
+```js
+my_element.addEventListener('click', (e) => {
   console.log(this.className)           // ATTENTION : `this` n'est pas `my_element`
   console.log(e.currentTarget === this) // journalise `false`
 })
-</pre>
+```
 
-<p>Si un gestionnaire d'évènements (par exemple, {{domxref("GlobalEventHandlers.onclick", "onclick")}}) est spécifié sur un élément dans la source HTML, le code JavaScript dans la valeur de l'attribut est effectivement encapsulé dans une fonction du gestionnaire qui lie la valeur de <code>this</code> d'une manière cohérente avec le <code>addEventListener()</code> ; une occurrence de <code>this</code> dans le code représente une référence à l'élément.</p>
+Si un gestionnaire d'évènements (par exemple, {{domxref("GlobalEventHandlers.onclick", "onclick")}}) est spécifié sur un élément dans la source HTML, le code JavaScript dans la valeur de l'attribut est effectivement encapsulé dans une fonction du gestionnaire qui lie la valeur de `this` d'une manière cohérente avec le `addEventListener()` ; une occurrence de `this` dans le code représente une référence à l'élément.
 
-<pre class="brush: html">
-&lt;table id="my_table" onclick="console.log(this.id);"&gt;
-&lt;!-- `this` fait référence à la table ; journalise 'my_table' --&gt;
+```html
+<table id="my_table" onclick="console.log(this.id);">
+<!-- `this` fait référence à la table ; journalise 'my_table' -->
   ...
-&lt;/table&gt;
-</pre>
+</table>
+```
 
-<p>Notez que la valeur de <code>this</code> à l'intérieur d'une fonction, appelée par le code dans la valeur de l'attribut, se comporte selon les <a href="/fr/docs/Web/JavaScript/Reference/Operators/this">règles standard</a>. Ceci est illustré dans l'exemple suivant :</p>
+Notez que la valeur de `this` à l'intérieur d'une fonction, appelée par le code dans la valeur de l'attribut, se comporte selon les [règles standard](/fr/docs/Web/JavaScript/Reference/Operators/this). Ceci est illustré dans l'exemple suivant :
 
-<pre class="brush: html">
-&lt;script&gt;
+```html
+<script>
   function logID() { console.log(this.id); }
-&lt;/script&gt;
-&lt;table id="my_table" onclick="logID();"&gt;
-&lt;!-- lorsqu'appelée, `this` fera référence à l'objet global --&gt;
+</script>
+<table id="my_table" onclick="logID();">
+<!-- lorsqu'appelée, `this` fera référence à l'objet global -->
   ...
-&lt;/table&gt;
-</pre>
+</table>
+```
 
-<p>La valeur de <code>this</code> à l'intérieur de <code>logID</code> est une référence à l'objet global {{domxref("Window")}} (ou <code>undefined</code> dans le cas du <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a>).</p>
+La valeur de `this` à l'intérieur de `logID` est une référence à l'objet global {{domxref("Window")}} (ou `undefined` dans le cas du [mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode)).
 
-<h4 id="Specifying_this_using_bind">Spécification de "this" en utilisant bind()</h4>
+#### Spécification de "this" en utilisant bind()
 
-<p>La méthode {{jsxref("Function.prototype.bind()")}} vous permet de spécifier la valeur qui doit être utilisée comme <code>this</code> pour tous les appels à une fonction donnée. Cette méthode vous permet de contourner facilement les problèmes dans lesquels ce que <code>this</code> sera n'est pas clair, en fonction du contexte depuis lequel votre fonction a été appelée. Notez toutefois que vous aurez besoin de conserver quelque part une référence à l'écouteur, de façon à pouvoir le supprimer ultérieurement.</p>
+La méthode {{jsxref("Function.prototype.bind()")}} vous permet de spécifier la valeur qui doit être utilisée comme `this` pour tous les appels à une fonction donnée. Cette méthode vous permet de contourner facilement les problèmes dans lesquels ce que `this` sera n'est pas clair, en fonction du contexte depuis lequel votre fonction a été appelée. Notez toutefois que vous aurez besoin de conserver quelque part une référence à l'écouteur, de façon à pouvoir le supprimer ultérieurement.
 
-<p>Ceci est un exemple avec et sans <code>bind()</code> :</p>
+Ceci est un exemple avec et sans `bind()` :
 
-<pre class="brush: js">
+```js
 const Something = function(element) {
   // |this| est un objet nouvellement créé
   this.name = 'Quelque chose de bon';
@@ -504,11 +495,11 @@ const Something = function(element) {
   element.addEventListener('click', this.onclick2.bind(this), false); // Astuce
 }
 const s = new Something(document.body);
-</pre>
+```
 
-<p>Une autre solution consiste à utiliser une fonction spéciale appelée <code>handleEvent()</code> to intercepter tous les évènements :</p>
+Une autre solution consiste à utiliser une fonction spéciale appelée `handleEvent()` to intercepter tous les évènements :
 
-<pre class="brush: js">
+```js
 const Something = function(element) {
   // |this| est un objet nouvellement créé
   this.name = 'Quelque chose de bon';
@@ -533,11 +524,11 @@ const Something = function(element) {
   element.removeEventListener('dblclick', this, false);
 }
 const s = new Something(document.body);
-</pre>
+```
 
-<p>Une autre manière de gérer la référence à this est de passer à l'<code>EventListener</code> une fonction qui appelle la méthode de l'objet qui contient les champs auxquels on a besoin d'accéder :</p>
+Une autre manière de gérer la référence à this est de passer à l'`EventListener` une fonction qui appelle la méthode de l'objet qui contient les champs auxquels on a besoin d'accéder :
 
-<pre class="brush: js">
+```js
 class SomeClass {
 
   constructor() {
@@ -565,32 +556,32 @@ class SomeClass {
 
 const myObject = new SomeClass();
 myObject.register();
-</pre>
+```
 
-<h3 id="Getting_data_into_and_out_of_an_event_listener">Passer des données à et depuis un écouteur d'évènements</h3>
+### Passer des données à et depuis un écouteur d'évènements
 
-<p>On peut avoir l'impression que les écouteurs d'évènements sont comme des îles et qu'il est extrêmement difficile de leur passer des données quelconques, encore moins d'en récupérer après qu'ils ont été exécutés. Les écouteurs d'évènements ne prennent qu'un seul argument, l'objet <a href="/fr/docs/Learn/JavaScript/Building_blocks/Events#event_objects"><code>event</code></a>, qui est passé automatiquement à l'écouteur, et la valeur retournée est ignorée. Aussi, comment pouvons-nous leur passer des données et en récupérer ? Il y a certain nombre de bonnes méthodes pour ce faire.</p>
+On peut avoir l'impression que les écouteurs d'évènements sont comme des îles et qu'il est extrêmement difficile de leur passer des données quelconques, encore moins d'en récupérer après qu'ils ont été exécutés. Les écouteurs d'évènements ne prennent qu'un seul argument, l'objet [`event`](/fr/docs/Learn/JavaScript/Building_blocks/Events#event_objects), qui est passé automatiquement à l'écouteur, et la valeur retournée est ignorée. Aussi, comment pouvons-nous leur passer des données et en récupérer ? Il y a certain nombre de bonnes méthodes pour ce faire.
 
-<h4 id="Getting_data_into_an_event_listener_using_this">Passer des données à un écouteur d'évènement en utilisant "this"</h4>
+#### Passer des données à un écouteur d'évènement en utilisant "this"
 
-<p>Comme mentionné <a href="#specifying_this_using_bind">ci-dessus</a>, vous pouvez utiliser <code>Function.prototype.bind()</code> pour passer une valeur à un écouteur d'évènements via la variable de référence <code>this</code>.</p>
+Comme mentionné [ci-dessus](#specifying_this_using_bind), vous pouvez utiliser `Function.prototype.bind()` pour passer une valeur à un écouteur d'évènements via la variable de référence `this`.
 
-<pre class="brush: js">
+```js
 const myButton = document.getElementById('my-button-id');
 const someString = 'Donnée';
 
 myButton.addEventListener('click', function () {
   console.log(this); // Valeur attendue : "Donnée".
 }.bind(someString));
-</pre>
+```
 
-<p>Cette méthode est appropriée quand vous n'avez pas besoin de savoir sur quel élément HTML l'écouteur d'évènement a été déclenché par programme depuis l'intérieur de l'écouteur d'évènements. Le principal avantage de cette façon de faire est que l'écouteur d'évènements reçoit les données sensiblement de la même manière qu'il le ferait si vous les lui passiez au moyen de sa liste d'arguments.</p>
+Cette méthode est appropriée quand vous n'avez pas besoin de savoir sur quel élément HTML l'écouteur d'évènement a été déclenché par programme depuis l'intérieur de l'écouteur d'évènements. Le principal avantage de cette façon de faire est que l'écouteur d'évènements reçoit les données sensiblement de la même manière qu'il le ferait si vous les lui passiez au moyen de sa liste d'arguments.
 
-<h4 id="Getting_data_into_an_event_listener_using_the_outer_scope_property">Passer des données à un écouteur d'évènements en utilisant une propriété de portée externe</h4>
+#### Passer des données à un écouteur d'évènements en utilisant une propriété de portée externe
 
-<p>Quand une portée externe contient une déclaration de variable (avec <code>const</code>, <code>let</code>), toutes les fonctions internes déclarées dans cette portée ont accès à cette variable (voir <a href="/fr/docs/Glossary/Function#different_types_of_functions">ici</a> pour des informations sur les fonctions externes/internes, et <a href="/fr/docs/Web/JavaScript/Reference/Statements/var#implicit_globals_and_outer_function_scope">ici</a> pour des informations sur la portée des variables). Par conséquent, une des façons les plus simples pour accéder à des données depuis l'extérieur d'un écouteur d'évènements est de le rendre accessible dans la portée dans laquelle l'écouteur d'évènement est déclaré.</p>
+Quand une portée externe contient une déclaration de variable (avec `const`, `let`), toutes les fonctions internes déclarées dans cette portée ont accès à cette variable (voir [ici](/fr/docs/Glossary/Function#different_types_of_functions) pour des informations sur les fonctions externes/internes, et [ici](/fr/docs/Web/JavaScript/Reference/Statements/var#implicit_globals_and_outer_function_scope) pour des informations sur la portée des variables). Par conséquent, une des façons les plus simples pour accéder à des données depuis l'extérieur d'un écouteur d'évènements est de le rendre accessible dans la portée dans laquelle l'écouteur d'évènement est déclaré.
 
-<pre class="brush: js">
+```js
 const myButton = document.getElementById('my-button-id');
 let someString = 'Donnée';
 
@@ -601,23 +592,19 @@ myButton.addEventListener('click', function() {
 });
 
 console.log(someString);  // Valeur attendue : 'Donnée' (ne donnera jamais 'Encore des données')
-</pre>
+```
 
-<div class="notecard note">
-<p><strong>Note :</strong> Bien que les portées internes aient accès aux variables <code>const</code> et <code>let</code> depuis les portées externes, vous ne pouvez pas vous attendre à ce que des changements quelconques de ces variables soient accessibles après la définition de l'écouteur d'évènements, à l'intérieur de la même portée externe. Pourquoi ? Simplement parce qu'au moment où l'écouteur d'évènements s'exécutera, la portée dans laquelle il a été défini pourra avoir déjà fini de s'exécuter.</p>
-</div>
+> **Note :** Bien que les portées internes aient accès aux variables `const` et `let` depuis les portées externes, vous ne pouvez pas vous attendre à ce que des changements quelconques de ces variables soient accessibles après la définition de l'écouteur d'évènements, à l'intérieur de la même portée externe. Pourquoi ? Simplement parce qu'au moment où l'écouteur d'évènements s'exécutera, la portée dans laquelle il a été défini pourra avoir déjà fini de s'exécuter.
 
-<h4 id="Getting_data_into_and_out_of_an_event_listener_using_objects">Passer des données à et depuis un écouteur d'évènements en utilisant des objets</h4>
+#### Passer des données à et depuis un écouteur d'évènements en utilisant des objets
 
-<p>A l'inverse de la plupart des fonctions en JavaScript, les objets sont conservés en mémoire aussi longtemps qu'une variable les référençant existe en mémoire. Ceci, et le fait que les objets peuvent avoir des propriétés, et qu'ils peuvent être passés alentour par référence, en font des candidats plausibles pour partager des données entre les portées. Explorons cela.</p>
+A l'inverse de la plupart des fonctions en JavaScript, les objets sont conservés en mémoire aussi longtemps qu'une variable les référençant existe en mémoire. Ceci, et le fait que les objets peuvent avoir des propriétés, et qu'ils peuvent être passés alentour par référence, en font des candidats plausibles pour partager des données entre les portées. Explorons cela.
 
-<div class="notecard note">
-<p><strong>Note :</strong> Les fonctions en JavaScript sont en fait des objets. (Par conséquent, elles aussi peuvent avoir des propriétés, et seront conservées en mémoire même après qu'elles ont fini de s'exécuter, si elles ont été affectées à une variable qui persiste en mémoire.)</p>
-</div>
+> **Note :** Les fonctions en JavaScript sont en fait des objets. (Par conséquent, elles aussi peuvent avoir des propriétés, et seront conservées en mémoire même après qu'elles ont fini de s'exécuter, si elles ont été affectées à une variable qui persiste en mémoire.)
 
-<p>Du fait que les propriétés d'un objet peuvent être utilisées pour stocker des données en mémoire aussi longtemps qu'une variable référençant l'objet existe en mémoire, vous pouvez en fait les utiliser pour passer des données dans un écouteur d'évènements, et retourner tous les changements aux données après que l'écouteur d'évènements s'est exécuté. Considérez cet exemple :</p>
+Du fait que les propriétés d'un objet peuvent être utilisées pour stocker des données en mémoire aussi longtemps qu'une variable référençant l'objet existe en mémoire, vous pouvez en fait les utiliser pour passer des données dans un écouteur d'évènements, et retourner tous les changements aux données après que l'écouteur d'évènements s'est exécuté. Considérez cet exemple :
 
-<pre class="brush: js">
+```js
 const myButton = document.getElementById('my-button-id');
 const someObject = {aProperty: 'Donnée'};
 
@@ -633,43 +620,37 @@ window.setInterval(function() {
     someObject.aProperty = 'Donnée';  // Rétablit la valeur pour attendre l'exécution du prochain évènement
   }
 }, 5000);
-</pre>
+```
 
-<p>Dans cet exemple, même si la portée dans laquelle à la fois l'écouteur d'évènements et la fonction d'intervalle ont été définis a fini de s'exécuter avant que la valeur originale de <code>unObjet.unePropriete</code> ait changé, du fait que <code>someObject</code> persiste en mémoire (par référence) à la fois dans l'écouteur d'évènements et dans la fonction d'intervalle, tous deux ont accès aux mêmes données (i.e. quand l'un change les données, l'autre peut répondre aux changements).</p>
+Dans cet exemple, même si la portée dans laquelle à la fois l'écouteur d'évènements et la fonction d'intervalle ont été définis a fini de s'exécuter avant que la valeur originale de `unObjet.unePropriete` ait changé, du fait que `someObject` persiste en mémoire (par référence) à la fois dans l'écouteur d'évènements et dans la fonction d'intervalle, tous deux ont accès aux mêmes données (i.e. quand l'un change les données, l'autre peut répondre aux changements).
 
-<div class="notecard note">
-  <p><strong>Note :</strong> Les objets sont stockés dans les variables par référence, ce qui signifie que seul l'emplacement en mémoire des données elles-mêmes est stocké dans la variable. Entre autres choses, cela signifie que les variables qui "stockent" des objets peuvent en fait affecter d'autres variables qui se voient affecter ("stocker") la même référence d'objet. Quand deux variables référencent le même objet (par ex., <code>let a = b = {aProperty: 'Ouai'};</code>), le fait de changer les données dans l'une ou l'autre des variables affectera l'autre.</p>
-</div>
+> **Note :** Les objets sont stockés dans les variables par référence, ce qui signifie que seul l'emplacement en mémoire des données elles-mêmes est stocké dans la variable. Entre autres choses, cela signifie que les variables qui "stockent" des objets peuvent en fait affecter d'autres variables qui se voient affecter ("stocker") la même référence d'objet. Quand deux variables référencent le même objet (par ex., `let a = b = {aProperty: 'Ouai'};`), le fait de changer les données dans l'une ou l'autre des variables affectera l'autre.
 
-<div class="notecard note">
-  <p><strong>Note :</strong> Du fait que les objets sont stockés dans les variables par référence, vous pouvez retourner un objet depuis une fonction pour le maintenir en vie (le conserver en mémoire, de sorte que vous n'en perdiez pas les données) après que cette fonction a fini de s'exécuter.</p>
-</div>
+> **Note :** Du fait que les objets sont stockés dans les variables par référence, vous pouvez retourner un objet depuis une fonction pour le maintenir en vie (le conserver en mémoire, de sorte que vous n'en perdiez pas les données) après que cette fonction a fini de s'exécuter.
 
-<h3 id="Legacy_Internet_Explorer_and_attachEvent">Prise en charge d'Internet Explorer et attachEvent</h3>
+### Prise en charge d'Internet Explorer et attachEvent
 
-<p>Dans les versions Internet Explorer versions avant IE 9, vous deviez utiliser <code>attachEvent()</code> plutôt que la méthode standard <code>addEventListener</code>. Pour IE, nous modifions l'exemple précédent en :</p>
+Dans les versions Internet Explorer versions avant IE 9, vous deviez utiliser `attachEvent()` plutôt que la méthode standard `addEventListener`. Pour IE, nous modifions l'exemple précédent en :
 
-<pre class="brush: js">
+```js
 if (el.addEventListener) {
   el.addEventListener('click', modifierTexte, false);
 } else if (el.attachEvent)  {
   el.attachEvent('onclick', modifierTexte);
 }
-</pre>
+```
 
-<p>Il y a un inconvénient avec <code>attachEvent</code> : la valeur de <code>this</code> sera une référence à l'objet <code>window</code>, au lieu de l'élément sur lequel il a été déclenché.</p>
+Il y a un inconvénient avec `attachEvent` : la valeur de `this` sera une référence à l'objet `window`, au lieu de l'élément sur lequel il a été déclenché.
 
-<p>La méthode <code>attachEvent()</code> peut être couplée avec l'évènement <code>onresize</code> pour détecter que certains éléments dans une page web ont été redimensionnés. L'évènement propriétaire <code>mselementresize</code>, lorsqu'il est couplé avec la méthode <code>addEventListener</code> d'enregistrement des gestionnaires d'évènements, fournit une fonctionnalité similaire à celle de <code>onresize</code>, se déclenchant quand certains éléments HTML sont redimensionnés.</p>
+La méthode `attachEvent()` peut être couplée avec l'évènement `onresize` pour détecter que certains éléments dans une page web ont été redimensionnés. L'évènement propriétaire `mselementresize`, lorsqu'il est couplé avec la méthode `addEventListener` d'enregistrement des gestionnaires d'évènements, fournit une fonctionnalité similaire à celle de `onresize`, se déclenchant quand certains éléments HTML sont redimensionnés.
 
-<h3 id="Polyfill">Prothèse d'émulation (<i>polyfill</i>)</h3>
+### Prothèse d'émulation (_polyfill_)
 
-<p>Vous pouvez contourner le fait que <code>addEventListener()</code>, <code>removeEventListener()</code>, {{domxref("Event.preventDefault()")}} et {{domxref("Event.stopPropagation()")}} ne sont pas pris en charge par IE 8 en utilisant le code suivant au début de votre script. Le code prend en charge l'utilisation de <code>handleEvent()</code>, et aussi l'évènement {{event("DOMContentLoaded")}}.</p>
+Vous pouvez contourner le fait que `addEventListener()`, `removeEventListener()`, {{domxref("Event.preventDefault()")}} et {{domxref("Event.stopPropagation()")}} ne sont pas pris en charge par IE 8 en utilisant le code suivant au début de votre script. Le code prend en charge l'utilisation de `handleEvent()`, et aussi l'évènement {{event("DOMContentLoaded")}}.
 
-<div class="cardnote note">
-  <p><strong>Note :</strong> <code>useCapture</code> n'est pas pris en charge, du fait qu'IE 8 n'a aucune méthode alternative. Le code suivant ajoute seulement la prise en charge d'IE 8. Cette émulation pour IE 8 fonctionne uniquement en mode standard : une déclaration <code>doctype</code> est requise.</p>
-</div>
+> **Note :** `useCapture` n'est pas pris en charge, du fait qu'IE 8 n'a aucune méthode alternative. Le code suivant ajoute seulement la prise en charge d'IE 8. Cette émulation pour IE 8 fonctionne uniquement en mode standard : une déclaration `doctype` est requise.
 
-<pre class="brush: js">
+```js
 (function() {
   if (!Event.prototype.preventDefault) {
     Event.prototype.preventDefault=function() {
@@ -716,9 +697,9 @@ if (el.addEventListener) {
     };
     var removeEventListener=function(type,listener /*, useCapture (sera ignoré) */) {
       var counter=0;
-      while (counter&lt;eventListeners.length) {
+      while (counter<eventListeners.length) {
         var eventListener=eventListeners[counter];
-        if (eventListener.object==this &amp;&amp; eventListener.type==type &amp;&amp; eventListener.listener==listener) {
+        if (eventListener.object==this && eventListener.type==type && eventListener.listener==listener) {
           if (type=="DOMContentLoaded") {
             this.detachEvent("onreadystatechange",eventListener.wrapper);
           } else {
@@ -742,13 +723,13 @@ if (el.addEventListener) {
     }
   }
 })();
-</pre>
+```
 
-<h3 id="Older_way_to_register_event_listeners">Ancienne manière d'enregistrer les écouteurs d'évènements</h3>
+### Ancienne manière d'enregistrer les écouteurs d'évènements
 
-<p>La méthode <code>addEventListener()</code> a été ajoutée dans la spécification DOM 2 <a href="http://www.w3.org/TR/DOM-Level-2-Events">Events</a>. Avant cela, les écouteurs d'évènements étaient enregistrés de la manière suivante :</p>
+La méthode `addEventListener()` a été ajoutée dans la spécification DOM 2 [Events](http://www.w3.org/TR/DOM-Level-2-Events). Avant cela, les écouteurs d'évènements étaient enregistrés de la manière suivante :
 
-<pre class="brush: js">
+```js
 // Passage d'une référence à une fonction
 // Ne pas ajouter de '()' après, cela appelerait la fonction !
 el.onclick = modifyText;
@@ -757,20 +738,20 @@ el.onclick = modifyText;
 element.onclick = function() {
   ...logique de la fonction...
 };
-</pre>
+```
 
-<p>Cette méthode remplace l'(les) écouteur(s) d'évènements <code>click</code> existant(s) de l'élément s'il y en a. D'autres évènements et leurs gestionnaires d'évènements associés comme <code>blur</code> (<code>onblur</code>), et  <code>keypress</code> ( <code>onkeypress</code>) se comportent de façon similaire.</p>
+Cette méthode remplace l'(les) écouteur(s) d'évènements `click` existant(s) de l'élément s'il y en a. D'autres évènements et leurs gestionnaires d'évènements associés comme `blur` (`onblur`), et `keypress` ( `onkeypress`) se comportent de façon similaire.
 
-<p>Comme elle faisait partie de façon fondamentale du DOM 0, cette méthode est très largement prise en charge et ne nécessite aucun code multi-navigateur. C'est pourquoi elle est souvent utilisée pour enregistrer des évènements dynamiquement quand de très anciens navigateurs (comme IE dans les versions antérieures à IE8) doivent être pris en charge ; voir la table plus bas pour les détails de la prise en charge par les navigateurs pour <code>addEventListener</code>.</p>
+Comme elle faisait partie de façon fondamentale du DOM 0, cette méthode est très largement prise en charge et ne nécessite aucun code multi-navigateur. C'est pourquoi elle est souvent utilisée pour enregistrer des évènements dynamiquement quand de très anciens navigateurs (comme IE dans les versions antérieures à IE8) doivent être pris en charge ; voir la table plus bas pour les détails de la prise en charge par les navigateurs pour `addEventListener`.
 
-<h3 id="Memory_issues">Problèmes de mémoire</h3>
+### Problèmes de mémoire
 
-<pre class="brush: js">
+```js
 let i;
 const els = document.getElementsByTagName('*');
 
 // Cas 1
-for (i=0 ; i&lt;els.length ; i++) {
+for (i=0 ; i<els.length ; i++) {
   els[i].addEventListener("click", function(e){/*faire quelque chose*/}, false);
 }
 
@@ -779,46 +760,45 @@ function processEvent(e) {
   /* faire quelque chose */
 }
 
-for (i=0 ; i&lt;els.length ; i++) {
+for (i=0 ; i<els.length ; i++) {
   els[i].addEventListener("click", processEvent, false);
 }
-</pre>
+```
 
-<p>Dans le premier cas ci-dessus, une nouvelle fonction gestionnaire (anonyme) est créée à chaque itération de la boucle. Dans le second cas, la même fonction déclarée préalablement est utilisée comme gestionnaire d'évènements. Cela entraîne une consommation de mémoire réduite. De plus, dans le premier cas, il n'est pas possible d'appeler {{domxref("EventTarget.removeEventListener", "removeEventListener()")}} du fait qu'aucune référence à la fonction anonyme n'est conservée (ou ici, n'est conservée aucune des multiples fonctions anonymes que la boucle peut créer). Dans le second cas, il est possible de faire <code>myElement.removeEventListener("click", processEvent, false)</code> du fait que <code>processEvent</code> est la référence à la fonction.</p>
+Dans le premier cas ci-dessus, une nouvelle fonction gestionnaire (anonyme) est créée à chaque itération de la boucle. Dans le second cas, la même fonction déclarée préalablement est utilisée comme gestionnaire d'évènements. Cela entraîne une consommation de mémoire réduite. De plus, dans le premier cas, il n'est pas possible d'appeler {{domxref("EventTarget.removeEventListener", "removeEventListener()")}} du fait qu'aucune référence à la fonction anonyme n'est conservée (ou ici, n'est conservée aucune des multiples fonctions anonymes que la boucle peut créer). Dans le second cas, il est possible de faire `myElement.removeEventListener("click", processEvent, false)` du fait que `processEvent` est la référence à la fonction.
 
-<p>En fait, en ce qui concerne la consommation de mémoire, l'absence de conservation d'une référence à la fonction n'est pas le problème réel ; c'est plutôt l'absence de conservation d'une référence STATIQUE à la fonction. Dans les deux cas à problème ci-dessous, une référence à la fonction est conservée, mais du fait qu'elle est redéfinie à chaque itération, elle n'est pas statique. Dans le troisème cas, la référence à la fonction anonyme est réaffectée à chaque itération. Dans le quatrième cas, la définition entière de la fonction est inchangée, mais elle est néanmoins répétitivement définie comme si elle était nouvelle (à moins qu'elle n'ait été [[promue]] par le compilateur), et elle n'est donc pas statique. Par conséquent, bien qu'il ne semble y avoir simplement que des [[Multiple identical event listeners]], dans les deux cas, chaque itération créera à la place un nouvel écouteur avec sa propre unique référence à la fonction gestionnaire. Cependant, du fait que la définition de la fonction elle-même ne change pas, la MÊME fonction peut toujours être appelée pour chaque écouteur dupliqué (spécialement si le code est optimisé.)</p>
+En fait, en ce qui concerne la consommation de mémoire, l'absence de conservation d'une référence à la fonction n'est pas le problème réel ; c'est plutôt l'absence de conservation d'une référence STATIQUE à la fonction. Dans les deux cas à problème ci-dessous, une référence à la fonction est conservée, mais du fait qu'elle est redéfinie à chaque itération, elle n'est pas statique. Dans le troisème cas, la référence à la fonction anonyme est réaffectée à chaque itération. Dans le quatrième cas, la définition entière de la fonction est inchangée, mais elle est néanmoins répétitivement définie comme si elle était nouvelle (à moins qu'elle n'ait été \[\[promue]] par le compilateur), et elle n'est donc pas statique. Par conséquent, bien qu'il ne semble y avoir simplement que des \[\[Multiple identical event listeners]], dans les deux cas, chaque itération créera à la place un nouvel écouteur avec sa propre unique référence à la fonction gestionnaire. Cependant, du fait que la définition de la fonction elle-même ne change pas, la MÊME fonction peut toujours être appelée pour chaque écouteur dupliqué (spécialement si le code est optimisé.)
 
-<p>Également dans les deux cas, du fait que la référence à la fonction e été conservée mais est répétitivement redéfinie par chaque ajout, l'instruction 'remove' ci-dessus peut toujours supprimer un écouteur, mais seulement le dernier ajouté.</p>
+Également dans les deux cas, du fait que la référence à la fonction e été conservée mais est répétitivement redéfinie par chaque ajout, l'instruction 'remove' ci-dessus peut toujours supprimer un écouteur, mais seulement le dernier ajouté.
 
-<pre class="brush: js">
+```js
 // Pour illustration seulement : notez la "FAUTE" de [j] au lieu de [i] entrainant ainsi que les évènements voulus sont tous enregistrés pour le MÊME élément
 
 // Cas 3
-for (let i=0, j=0 ; i&lt;els.length ; i++) {
+for (let i=0, j=0 ; i<els.length ; i++) {
   /* faire des tas de choses avec j */
   els[j].addEventListener("click", processEvent = function(e) {/*faire quelque chose*/}, false);
 }
 
 // Cas 4
-for (let i=0, j=0 ; i&lt;els.length ; i++) {
+for (let i=0, j=0 ; i<els.length ; i++) {
   /* faire des tas de choses avec  j */
   function processEvent(e) {/*faire quelque chose*/};
   els[j].addEventListener("click", processEvent, false);
-}</pre>
+}
+```
 
-<h3 id="Improving_scrolling_performance_with_passive_listeners">Amélioration des performances de défilement avec les écouteurs passifs</h3>
+### Amélioration des performances de défilement avec les écouteurs passifs
 
-<p>D'après la spécification, la valeur par défaut pour l'option <code>passive</code> est toujours <code>false</code>. Toutefois, cela introduit la possibilité que des écouteurs d'évènements gérant certains évènements tactiles (parmi d'autres) bloquent le fil d'exécution principal du navigateur pendant qu'il essaye de gérer le défilement, avec pour résultat une possiblement énorme réduction de performance pendant la gestion du défilement.</p>
+D'après la spécification, la valeur par défaut pour l'option `passive` est toujours `false`. Toutefois, cela introduit la possibilité que des écouteurs d'évènements gérant certains évènements tactiles (parmi d'autres) bloquent le fil d'exécution principal du navigateur pendant qu'il essaye de gérer le défilement, avec pour résultat une possiblement énorme réduction de performance pendant la gestion du défilement.
 
-<p>Pour prévenir ce problème, certains navigateurs (spécifiquement, Chrome et Firefox) ont changé la valeur par défault de l'option <code>passive</code> à <code>true</code> pour les évènements {{event("touchstart")}} et {{event("touchmove")}} dans les nœuds de niveau document {{domxref("Window")}}, {{domxref("Document")}}, et {{domxref("Document.body")}}. Cela empêche que l'écouteur d'évènement ne soit appelé, de sorte qu'il ne peut pas bloquer le rendu de la page pendant que l'utilisateur fait un défilement.</p>
+Pour prévenir ce problème, certains navigateurs (spécifiquement, Chrome et Firefox) ont changé la valeur par défault de l'option `passive` à `true` pour les évènements {{event("touchstart")}} et {{event("touchmove")}} dans les nœuds de niveau document {{domxref("Window")}}, {{domxref("Document")}}, et {{domxref("Document.body")}}. Cela empêche que l'écouteur d'évènement ne soit appelé, de sorte qu'il ne peut pas bloquer le rendu de la page pendant que l'utilisateur fait un défilement.
 
-<div class="notecard note">
-  <p><strong>Note :</strong> Voir la table de compatibilité ci-dessous si vous avez besoin de savoir quels navigateurs (et/ou quelles versions de ces navigateurs) implémentent ce comportement modifié.</p>
-</div>
+> **Note :** Voir la table de compatibilité ci-dessous si vous avez besoin de savoir quels navigateurs (et/ou quelles versions de ces navigateurs) implémentent ce comportement modifié.
 
-<p>Vous pouvez passer outre ce comportement en initialisant explicitement la valeur de <code>passive</code> à <code>false</code>, comme montré ci-dessous :</p>
+Vous pouvez passer outre ce comportement en initialisant explicitement la valeur de `passive` à `false`, comme montré ci-dessous :
 
-<pre class="brush: js">
+```js
 /* Détection de la fonctionnalité */
 let passiveIfSupported = false;
 
@@ -838,49 +818,26 @@ window.addEventListener('scroll', function(event) {
   /* faire quelque chose */
   // ne peut pas utiliser event.preventDefault();
 }, passiveIfSupported );
-</pre>
-
-<p>Dans les navigateurs anciens qui ne prennent pas en charge le paramètre <code>options</code> d'<code>addEventListener()</code>, le fait d'essayer de l'utiliser empêche l'utilisation de l'argument <code>useCapture</code> sans utilisation appropriée de la <a href="#safely_detecting_option_support">détection de fonctionnalité</a>.</p>
-
-<p>Vous n'avez pas besoin de vous inquiéter de la valeur de <code>passive</code> pour l'évènement {{event("scroll")}} de base. Du fait qu'il ne peut pas être annulé, les écouteurs d'évènements ne peuvant pas bloquer le rendu de la page de toute façon.</p>
-
-<h2 id="Specifications">Spécifications</h2>
-
-<table class="standard-table">
-  <thead>
-    <tr>
-      <th>Spécification</th>
-      <th>Statut</th>
-      <th>Commentaire</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>{{SpecName("DOM WHATWG", "#dom-eventtarget-addeventlistener", "EventTarget.addEventListener()")}}</td>
-      <td>{{Spec2("DOM WHATWG")}}</td>
-      <td></td>
-    </tr>
-    <tr>
-      <td>{{SpecName("DOM4", "#dom-eventtarget-addeventlistener", "EventTarget.addEventListener()")}}</td>
-      <td>{{Spec2("DOM4")}}</td>
-      <td></td>
-    </tr>
-    <tr>
-      <td>{{SpecName("DOM2 Events", "#Events-EventTarget-addEventListener", "EventTarget.addEventListener()")}}</td>
-      <td>{{Spec2("DOM2 Events")}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
+```
+
+Dans les navigateurs anciens qui ne prennent pas en charge le paramètre `options` d'`addEventListener()`, le fait d'essayer de l'utiliser empêche l'utilisation de l'argument `useCapture` sans utilisation appropriée de la [détection de fonctionnalité](#safely_detecting_option_support).
+
+Vous n'avez pas besoin de vous inquiéter de la valeur de `passive` pour l'évènement {{event("scroll")}} de base. Du fait qu'il ne peut pas être annulé, les écouteurs d'évènements ne peuvant pas bloquer le rendu de la page de toute façon.
+
+## Spécifications
+
+| Spécification                                                                                                                            | Statut                           | Commentaire          |
+| ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName("DOM WHATWG", "#dom-eventtarget-addeventlistener", "EventTarget.addEventListener()")}}         | {{Spec2("DOM WHATWG")}} |                      |
+| {{SpecName("DOM4", "#dom-eventtarget-addeventlistener", "EventTarget.addEventListener()")}}                 | {{Spec2("DOM4")}}         |                      |
+| {{SpecName("DOM2 Events", "#Events-EventTarget-addEventListener", "EventTarget.addEventListener()")}} | {{Spec2("DOM2 Events")}} | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.EventTarget.addEventListener", 3)}}</p>
+{{Compat("api.EventTarget.addEventListener", 3)}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>{{domxref("EventTarget.removeEventListener()")}}</li>
-  <li><a href="/fr/docs/Web/Guide/Events/Creating_and_triggering_events">Création et déclenchement d'évènements</a></li>
-  <li><a href="http://www.quirksmode.org/js/this.html">Plus de détails sur l'utilisation de <code>this</code> dans les gestionnaires d'évènements</a></li>
-</ul>
+- {{domxref("EventTarget.removeEventListener()")}}
+- [Création et déclenchement d'évènements](/fr/docs/Web/Guide/Events/Creating_and_triggering_events)
+- [Plus de détails sur l'utilisation de `this` dans les gestionnaires d'évènements](http://www.quirksmode.org/js/this.html)
diff --git a/files/fr/web/api/eventtarget/dispatchevent/index.md b/files/fr/web/api/eventtarget/dispatchevent/index.md
index ff64998f51..854d476721 100644
--- a/files/fr/web/api/eventtarget/dispatchevent/index.md
+++ b/files/fr/web/api/eventtarget/dispatchevent/index.md
@@ -9,63 +9,43 @@ tags:
   - évènements
 translation_of: Web/API/EventTarget/dispatchEvent
 ---
-<p>{{APIRef("DOM Events")}}</p>
+{{APIRef("DOM Events")}}
 
-<p>Envoie un {{domxref("Event")}} (<em>évènement</em>) à la {{domxref("EventTarget")}} (<em>cible</em>) spécifiée (synchrone) en appelant les {{domxref("EventListener")}} (<em>écouteurs</em>)  dans l'ordre approprié. Le processus normal de traitement de l'évènement (y compris les phases de capture et l'éventuelle propagation) s'applique aussi aux évènements diffusés manuellement avec <code>dispatchEvent()</code>.</p>
+Envoie un {{domxref("Event")}} (_évènement_) à la {{domxref("EventTarget")}} (_cible_) spécifiée (synchrone) en appelant les {{domxref("EventListener")}} (_écouteurs_)  dans l'ordre approprié. Le processus normal de traitement de l'évènement (y compris les phases de capture et l'éventuelle propagation) s'applique aussi aux évènements diffusés manuellement avec `dispatchEvent()`.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>cancelled</em> = !<em>target</em>.dispatchEvent(<em>event</em>)
-</pre>
+    cancelled = !target.dispatchEvent(event)
 
-<h3 id="Param.C3.A8tres">Paramètres</h3>
+### Paramètres
 
-<ul>
- <li><code>event</code> est un objet {{domxref("Event")}} à envoyer.</li>
- <li><code>target</code> (<em>cible</em>) est utilisée pour initialiser la {{domxref("Event", "", "target")}} et déterminer quels écouteurs d'évènements doivent être invoqués.</li>
-</ul>
+- `event` est un objet {{domxref("Event")}} à envoyer.
+- `target` (_cible_) est utilisée pour initialiser la {{domxref("Event", "", "target")}} et déterminer quels écouteurs d'évènements doivent être invoqués.
 
-<h3 id="Valeur_retournée">Valeur retournée</h3>
+### Valeur retournée
 
-<ul>
- <li>La valeur de retour est  <code>false</code> (<em>faux</em>) si l'évènement est annulable et au moins l'un des gestionnaires d'événements qui ont géré cet événement appelé {{domxref ("Event.preventDefault ()")}}. Sinon, elle est <code>true</code> (<em>vrai</em>).</li>
-</ul>
+- La valeur de retour est  `false` (_faux_) si l'évènement est annulable et au moins l'un des gestionnaires d'événements qui ont géré cet événement appelé {{domxref ("Event.preventDefault ()")}}. Sinon, elle est `true` (_vrai_).
 
-<p>La méthode <code>dispatchEvent</code> lance une exception <code>UNSPECIFIED_EVENT_TYPE_ERR</code> si le type de l'évènement n'a pas été spécifié par son initialisation avant l'appel de la méthode ou s'il est <code>null</code> ou une chaîne vide. Les exceptions lancées par les gestionnaires d'évènements sont signalées comme exceptions non interceptées ; les gestionnaires d'événements s'exécutent sur une pile d'appels imbriquée : ils bloquent l'appelant jusqu'à ce qu'ils se terminent, mais les exceptions ne se propagent pas à l'appelant.</p>
+La méthode `dispatchEvent` lance une exception `UNSPECIFIED_EVENT_TYPE_ERR` si le type de l'évènement n'a pas été spécifié par son initialisation avant l'appel de la méthode ou s'il est `null` ou une chaîne vide. Les exceptions lancées par les gestionnaires d'évènements sont signalées comme exceptions non interceptées ; les gestionnaires d'événements s'exécutent sur une pile d'appels imbriquée : ils bloquent l'appelant jusqu'à ce qu'ils se terminent, mais les exceptions ne se propagent pas à l'appelant.
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p>Contrairement aux événements "natifs", qui sont déclenchés par le DOM et invoquent les gestionnaires d'événements de manière asynchrone via la <a href="/fr/docs/Web/JavaScript/Concurrence_et_boucle_des_%C3%A9v%C3%A9nements">boucle des événements</a>, <code>dispatchEvent</code> appelle les gestionnaires d'événements de manière synchrone. Tous les gestionnaires d'événements applicables s'exécuteront et retourneront avant que le code ne continue après l'appel à <code>dispatchEvent</code>.</p>
+Contrairement aux événements "natifs", qui sont déclenchés par le DOM et invoquent les gestionnaires d'événements de manière asynchrone via la [boucle des événements](/fr/docs/Web/JavaScript/Concurrence_et_boucle_des_%C3%A9v%C3%A9nements), `dispatchEvent` appelle les gestionnaires d'événements de manière synchrone. Tous les gestionnaires d'événements applicables s'exécuteront et retourneront avant que le code ne continue après l'appel à `dispatchEvent`.
 
-<p>Comme montré dans l'exemple qui précède, <code>dispatchEvent</code> est la dernière étape du processus création-initialisation-envoi, qui est utilisé pour envoyer des évènements dans le modèle de l'implémentation des évènements. Ceux-ci peuvent être créés en utilisant le <a href="/fr/docs/Web/API/Event/Event">constructeur d'évènements</a>.</p>
+Comme montré dans l'exemple qui précède, `dispatchEvent` est la dernière étape du processus création-initialisation-envoi, qui est utilisé pour envoyer des évènements dans le modèle de l'implémentation des évènements. Ceux-ci peuvent être créés en utilisant le [constructeur d'évènements](/fr/docs/Web/API/Event/Event).
 
-<p>Voir aussi <a href="/fr/docs/Web/API/Event">Objet Event référence</a>.</p>
+Voir aussi [Objet Event référence](/fr/docs/Web/API/Event).
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Voir <a href="/fr/docs/Web/Guide/DOM/Events/Creating_and_triggering_events">Création et déclenchement d'évènements</a>.</p>
+Voir [Création et déclenchement d'évènements](/fr/docs/Web/Guide/DOM/Events/Creating_and_triggering_events).
 
-<h2 id="Spécification">Spécification</h2>
+## Spécification
 
-<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('DOM WHATWG', '#dom-eventtarget-dispatchevent', 'EventTarget.dispatchEvent()')}}</td>
-   <td>{{ Spec2('DOM WHATWG') }}</td>
-   <td>Définition initiale dans la spécification DOM 2 Events (<em>évènements</em>)</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                            | Statut                           | Commentaire                                                           |
+| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | --------------------------------------------------------------------- |
+| {{SpecName('DOM WHATWG', '#dom-eventtarget-dispatchevent', 'EventTarget.dispatchEvent()')}} | {{ Spec2('DOM WHATWG') }} | Définition initiale dans la spécification DOM 2 Events (_évènements_) |
 
-<h2 id="Voir_.C3.A9galement">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-
-
-<p>{{Compat("api.EventTarget.dispatchEvent")}}</p>
+{{Compat("api.EventTarget.dispatchEvent")}}
diff --git a/files/fr/web/api/eventtarget/eventtarget/index.md b/files/fr/web/api/eventtarget/eventtarget/index.md
index 419fd32ffe..dee098e931 100644
--- a/files/fr/web/api/eventtarget/eventtarget/index.md
+++ b/files/fr/web/api/eventtarget/eventtarget/index.md
@@ -9,25 +9,26 @@ tags:
   - évènements
 translation_of: Web/API/EventTarget/EventTarget
 ---
-<div>{{APIRef("DOM Events")}}</div>
+{{APIRef("DOM Events")}}
 
-<p>Le constructeur <code><strong>EventTarget()</strong></code> crée une nouvelle instance d'objet {{domxref("EventTarget")}}.</p>
+Le constructeur **`EventTarget()`** crée une nouvelle instance d'objet {{domxref("EventTarget")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var <var>myEventTarget</var> = new EventTarget();</pre>
+    var myEventTarget = new EventTarget();
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<p>Aucun.</p>
+Aucun.
 
-<h3 id="Valeur_retournée">Valeur retournée</h3>
+### Valeur retournée
 
-<p>Une instance d'objet {{domxref("EventTarget")}}.</p>
+Une instance d'objet {{domxref("EventTarget")}}.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: js">class MyEventTarget extends EventTarget {
+```js
+class MyEventTarget extends EventTarget {
   constructor(mySecret) {
     super();
     this._secret = mySecret;
@@ -44,37 +45,19 @@ myEventTarget.addEventListener("foo", function(e) {
 
 let event = new CustomEvent("foo", { detail: 7 });
 myEventTarget.dispatchEvent(event);
-let newValue = myEventTarget.secret; // == 7</pre>
+let newValue = myEventTarget.secret; // == 7
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#dom-eventtarget-eventtarget', 'EventTarget() constructor')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                        | Statut                           | Commentaire |
+| -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- |
+| {{SpecName('DOM WHATWG', '#dom-eventtarget-eventtarget', 'EventTarget() constructor')}} | {{Spec2('DOM WHATWG')}} |             |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<div>
+{{Compat("api.EventTarget.EventTarget")}}
 
+## Voir aussi
 
-<p>{{Compat("api.EventTarget.EventTarget")}}</p>
-</div>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("EventTarget")}}</li>
-</ul>
-
-<p> </p>
+- {{domxref("EventTarget")}}
diff --git a/files/fr/web/api/eventtarget/index.md b/files/fr/web/api/eventtarget/index.md
index b58f686516..86c3e53a21 100644
--- a/files/fr/web/api/eventtarget/index.md
+++ b/files/fr/web/api/eventtarget/index.md
@@ -9,53 +9,48 @@ tags:
   - EventTarget
   - Interface
   - Événements DOM
-browser-compat: api.EventTarget
 translation_of: Web/API/EventTarget
+browser-compat: api.EventTarget
 ---
-<div>{{ApiRef("DOM Events")}}</div>
+{{ApiRef("DOM Events")}}
 
-<p><code>EventTarget</code> est une interface DOM implémentée par des objets qui peuvent recevoir des événements et peuvent avoir des écouteurs pour eux.</p>
+`EventTarget` est une interface DOM implémentée par des objets qui peuvent recevoir des événements et peuvent avoir des écouteurs pour eux.
 
-<p>{{domxref ("Element")}}, {{domxref ("Document")}} et {{domxref ("Window")}} sont les cibles d'événements les plus fréquentes, mais d'autres objets peuvent également être des cibles d'événements. Par exemple {{domxref ("XMLHttpRequest")}}, {{domxref ("AudioNode")}}, {{domxref ("AudioContext")}} et autres.</p>
+{{domxref ("Element")}}, {{domxref ("Document")}} et {{domxref ("Window")}} sont les cibles d'événements les plus fréquentes, mais d'autres objets peuvent également être des cibles d'événements. Par exemple {{domxref ("XMLHttpRequest")}}, {{domxref ("AudioNode")}}, {{domxref ("AudioContext")}} et autres.
 
-<p>De nombreuses cibles d'événements (y compris des éléments, des documents et des fenêtres) supporte également la définition de <a href="/fr/docs/Web/Guide/DOM/Events/Event_handlers">gestionnaires d'événements</a> via les propriétés et attributs <code>onevent</code>.</p>
+De nombreuses cibles d'événements (y compris des éléments, des documents et des fenêtres) supporte également la définition de [gestionnaires d'événements](/fr/docs/Web/Guide/DOM/Events/Event_handlers) via les propriétés et attributs `onevent`.
 
-<p>{{InheritanceDiagram}}</p>
+{{InheritanceDiagram}}
 
-<h2 id="Constructeur">Constructeur</h2>
+## Constructeur
 
-<dl>
- <dt>{{domxref("EventTarget.EventTarget()", "EventTarget()")}}</dt>
- <dd>Crée une nouvelle instance d'objet <code>EventTarget</code>.</dd>
-</dl>
+- {{domxref("EventTarget.EventTarget()", "EventTarget()")}}
+  - : Crée une nouvelle instance d'objet `EventTarget`.
 
-<h2 id="Méthodes">Méthodes</h2>
+## Méthodes
 
-<dl>
- <dt>{{domxref("EventTarget.addEventListener()", "<var>EventTarget</var>.addEventListener()")}}</dt>
- <dd>Enregistre un gestionnaire d'événements d'un type d'événement spécifique sur <code>EventTarget</code>.</dd>
- <dt>{{domxref("EventTarget.removeEventListener()", "<var>EventTarget</var>.removeEventListener()")}}</dt>
- <dd>Supprime un écouteur d'événement de <code>EventTarget</code>.</dd>
- <dt>{{domxref("EventTarget.dispatchEvent()", "<var>EventTarget</var>.dispatchEvent()")}}</dt>
- <dd>Envoie un événement à cet <code>EventTarget</code>.</dd>
-</dl>
+- {{domxref("EventTarget.addEventListener()", "<var>EventTarget</var>.addEventListener()")}}
+  - : Enregistre un gestionnaire d'événements d'un type d'événement spécifique sur `EventTarget`.
+- {{domxref("EventTarget.removeEventListener()", "<var>EventTarget</var>.removeEventListener()")}}
+  - : Supprime un écouteur d'événement de `EventTarget`.
+- {{domxref("EventTarget.dispatchEvent()", "<var>EventTarget</var>.dispatchEvent()")}}
+  - : Envoie un événement à cet `EventTarget`.
 
-<h3 id="Méthodes_supplémentaires_dans_la_base_de_code_Chrome_de_Mozilla">Méthodes supplémentaires dans la base de code Chrome de Mozilla</h3>
+### Méthodes supplémentaires dans la base de code Chrome de Mozilla
 
-<p>Mozilla inclut quelques extensions à utiliser par les cibles d'événements implémentées par JS pour implémenter les propriétés <code>onevent</code>.</p>
+Mozilla inclut quelques extensions à utiliser par les cibles d'événements implémentées par JS pour implémenter les propriétés `onevent`.
 
-<p>Voir aussi <a href="/fr/docs/Mozilla/WebIDL_bindings">liaisons WebIDL</a>.</p>
+Voir aussi [liaisons WebIDL](/fr/docs/Mozilla/WebIDL_bindings).
 
-<ul>
- <li><code>void <strong>setEventHandler</strong>(DOMString <var>type</var>, EventHandler <var>handler</var>)</code> {{non-standard_inline}}</li>
- <li><code>EventHandler <strong>getEventHandler</strong>(DOMString <var>type</var>)</code> {{non-standard_inline}}</li>
-</ul>
+- `void setEventHandler(DOMString type, EventHandler handler)` {{non-standard_inline}}
+- `EventHandler getEventHandler(DOMString type)` {{non-standard_inline}}
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<h3 id="Implémentation_simple_dEventTarget">Implémentation simple d'EventTarget</h3>
+### Implémentation simple d'EventTarget
 
-<pre class="brush: js">const EventTarget = function () {
+```js
+const EventTarget = function () {
   this.listeners = {}
 }
 
@@ -72,7 +67,7 @@ EventTarget.prototype.removeEventListener = function (type, callback) {
     return
   }
   const stack = this.listeners[type]
-  for (let i = 0, l = stack.length; i &lt; l; i++) {
+  for (let i = 0, l = stack.length; i < l; i++) {
     if (stack[i] === callback) {
       stack.splice(i, 1)
       return
@@ -86,25 +81,23 @@ EventTarget.prototype.dispatchEvent = function (event) {
   }
   const stack = this.listeners[event.type].slice()
 
-  for (let i = 0, l = stack.length; i &lt; l; i++) {
+  for (let i = 0, l = stack.length; i < l; i++) {
     stack[i].call(this, event)
   }
   return !event.defaultPrevented
 }
-</pre>
+```
 
-<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="Voir_également">Voir également</h2>
+## Voir également
 
-<ul>
- <li><a href="/fr/docs/Web/Reference/Events">Référence d'événement</a> - les événements disponibles sur la plateforme.</li>
- <li><a href="/fr/docs/Web/Guide/DOM/Events">Guide du développeur d'événements</a></li>
- <li>{{domxref("Event")}} interface</li>
-</ul>
+- [Référence d'événement](/fr/docs/Web/Reference/Events) - les événements disponibles sur la plateforme.
+- [Guide du développeur d'événements](/fr/docs/Web/Guide/DOM/Events)
+- {{domxref("Event")}} interface
diff --git a/files/fr/web/api/eventtarget/removeeventlistener/index.md b/files/fr/web/api/eventtarget/removeeventlistener/index.md
index bef6e42e79..7749831930 100644
--- a/files/fr/web/api/eventtarget/removeeventlistener/index.md
+++ b/files/fr/web/api/eventtarget/removeeventlistener/index.md
@@ -12,89 +12,92 @@ tags:
   - Écouteurs
 translation_of: Web/API/EventTarget/removeEventListener
 ---
-<div>{{APIRef("DOM Events")}}</div>
+{{APIRef("DOM Events")}}
 
-<p>La méthode <strong><code>EventTarget.removeEventListener()</code></strong> supprime d'une {{domxref("EventTarget")}} (<em>cible</em>) un écouteur d'évènements précédemment enregistré avec {{domxref("EventTarget.addEventListener()")}}. L'écouteur d'évènements à supprimer est identifié en utilisant la combinaison du type d'évènement, la fonction "event listener" elle-même et diverses options factultatives qui peuvent affecter le processus de correspondance ; voir la section <em>Correspondance utilisée pour la suppression d'écouteurs d'événements</em> ci-après.</p>
+La méthode **`EventTarget.removeEventListener()`** supprime d'une {{domxref("EventTarget")}} (_cible_) un écouteur d'évènements précédemment enregistré avec {{domxref("EventTarget.addEventListener()")}}. L'écouteur d'évènements à supprimer est identifié en utilisant la combinaison du type d'évènement, la fonction "event listener" elle-même et diverses options factultatives qui peuvent affecter le processus de correspondance ; voir la section _Correspondance utilisée pour la suppression d'écouteurs d'événements_ ci-après.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><code><em>target</em>.removeEventListener(<em>type</em>, <em>listener</em>[, <em>options</em>]);
-</code><em>target</em>.removeEventListener(<em>type</em>, <em>listener</em>[, <em>useCapture</em>]);
-</pre>
+    target.removeEventListener(type, listener[, options]);
+    target.removeEventListener(type, listener[, useCapture]);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>type</code></dt>
- <dd>Une chaîne représentant le type d'événement pour lequel supprimer un écouteur d'évènements.</dd>
- <dt><code>listener</code></dt>
- <dd>La fonction  {{domxref("EventListener")}}  du gestionnaire d'évènements à retirer de la cible d'évènements.</dd>
- <dt><code>options</code> {{optional_inline}}</dt>
- <dd>
- <p>Un objet d'options qui spécifie les caractéristiques de l'écouteur d'évènements. Les options disponibles sont :</p>
+- `type`
+  - : Une chaîne représentant le type d'événement pour lequel supprimer un écouteur d'évènements.
+- `listener`
+  - : La fonction  {{domxref("EventListener")}}  du gestionnaire d'évènements à retirer de la cible d'évènements.
+- `options` {{optional_inline}}
 
- <ul>
-  <li><code>capture</code> : un {{jsxref("Boolean")}} indiquant que les évènements de ce type seront envoyés au <code>listener</code> enregistré avant d'être distribués à tout <code>EventTarget</code> en-dessous dans l'arborescence du DOM.</li>
-  <li><code>passive</code> : un {{jsxref("Boolean")}} qui indique que le <code>listener</code> n'appellera jamais <code>preventDefault()</code>. S'il doit le faire, l'agent utilisateur l'ignorera et génèrera un avertissement dans la console.</li>
-  <li>{{non-standard_inline}} <code>mozSystemGroup</code> : Disponible seulement pour le code exécuté dans XBL ou dans le chrome de Firefox, c'est un {{jsxref("Boolean")}} indiquant que l'écouteur a été ajouté au groupe système.</li>
- </ul>
- </dd>
- <dt><code>useCapture</code> {{optional_inline}}</dt>
- <dd>Indique si l'{{domxref("EventListener")}} à retirer a été enregistré comme un<code> </code>écouteur capturant, ou non. Si le paramètre est absent, la valeur par défaut est <code>false</code> (<em>faux</em>).</dd>
-</dl>
+  - : Un objet d'options qui spécifie les caractéristiques de l'écouteur d'évènements. Les options disponibles sont :
 
-<p>Si un écouteur est enregistré deux fois, un avec capture et un sans, supprimez chacun séparément. La suppression d'un écouteur de capture n'affecte pas une version non capturante du même écouteur, et vice versa.</p>
+    - `capture` : un {{jsxref("Boolean")}} indiquant que les évènements de ce type seront envoyés au `listener` enregistré avant d'être distribués à tout `EventTarget` en-dessous dans l'arborescence du DOM.
+    - `passive` : un {{jsxref("Boolean")}} qui indique que le `listener` n'appellera jamais `preventDefault()`. S'il doit le faire, l'agent utilisateur l'ignorera et génèrera un avertissement dans la console.
+    - {{non-standard_inline}} `mozSystemGroup` : Disponible seulement pour le code exécuté dans XBL ou dans le chrome de Firefox, c'est un {{jsxref("Boolean")}} indiquant que l'écouteur a été ajouté au groupe système.
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+- `useCapture` {{optional_inline}}
+  - : Indique si l'{{domxref("EventListener")}} à retirer a été enregistré comme un` `écouteur capturant, ou non. Si le paramètre est absent, la valeur par défaut est `false` (_faux_).
 
-<p><code>undefined</code>. (<em>indéfini</em>)</p>
+Si un écouteur est enregistré deux fois, un avec capture et un sans, supprimez chacun séparément. La suppression d'un écouteur de capture n'affecte pas une version non capturante du même écouteur, et vice versa.
 
-<h3 id="Correspondance_utilisée_pour_la_suppression_d'écouteurs_d'événements">Correspondance utilisée pour la suppression d'écouteurs d'événements</h3>
+### Valeur de retour
 
-<p>Étant donné qu'un écouteur d'événements a déjà été ajouté en appelant {{domxref("EventTarget.addEventListener","addEventListener()")}}, vous pouvez éventuellement arriver à un point auquel vous devez le supprimer. Vous devez alors spécifier le même <code>type</code> et les mêmes paramètres <code>listener</code> pour <code>removeEventListener()</code>, mais qu'en est-il des paramètres <code>options</code> ou <code>useCapture</code> ?</p>
+`undefined`. (_indéfini_)
 
-<p>Alors que <code>addEventListener()</code> vous permet d'ajouter le même écouteur plus d'une fois pour le même type si les options sont différentes, la seule option que <code>removeEventListener()</code> vérifie est l'indicateur <code>capture</code> / <code>useCapture</code>. Sa valeur doit correspondre pour que <code>removeEventListener()</code> corresponde, mais pas les autres valeurs.</p>
+### Correspondance utilisée pour la suppression d'écouteurs d'événements
 
-<p>Par exemple, considérons l'appel de <code>addEventListener()</code> :</p>
+Étant donné qu'un écouteur d'événements a déjà été ajouté en appelant {{domxref("EventTarget.addEventListener","addEventListener()")}}, vous pouvez éventuellement arriver à un point auquel vous devez le supprimer. Vous devez alors spécifier le même `type` et les mêmes paramètres `listener` pour `removeEventListener()`, mais qu'en est-il des paramètres `options` ou `useCapture` ?
 
-<pre class="brush: js">element.addEventListener("mousedown", handleMouseDown, true);</pre>
+Alors que `addEventListener()` vous permet d'ajouter le même écouteur plus d'une fois pour le même type si les options sont différentes, la seule option que `removeEventListener()` vérifie est l'indicateur `capture` / `useCapture`. Sa valeur doit correspondre pour que `removeEventListener()` corresponde, mais pas les autres valeurs.
 
-<p>Maintenant, voyons chacun des deux appels de <code>removeEventListener()</code> :</p>
+Par exemple, considérons l'appel de `addEventListener()` :
 
-<pre class="brush: js">element.removeEventListener("mousedown", handleMouseDown, false);     // Fails
-element.removeEventListener("mousedown", handleMouseDown, true);</pre>
+```js
+element.addEventListener("mousedown", handleMouseDown, true);
+```
 
-<p>Le premier appel échoue parce que la valeur de <code>useCapture</code> ne correspond pas. Le second réussit puisqu'il correspond pour <code>useCapture</code>.</p>
+Maintenant, voyons chacun des deux appels de `removeEventListener()` :
 
-<p>Maintenant, observez ceci :</p>
+```js
+element.removeEventListener("mousedown", handleMouseDown, false);     // Fails
+element.removeEventListener("mousedown", handleMouseDown, true);
+```
 
-<pre class="brush: js">element.addEventListener("mousedown", handleMouseDown, { passive: true });</pre>
+Le premier appel échoue parce que la valeur de `useCapture` ne correspond pas. Le second réussit puisqu'il correspond pour `useCapture`.
 
-<p>Ici, nous spécifions un objet <code>options</code> dans lequel <code>passive</code> est défini à <code>true</code>, tandis que les autres options sont laissées à la valeur par défaut de <code>false</code>.</p>
+Maintenant, observez ceci :
 
-<p>Maintenant, regardez chacun de ces appels successifs à <code>removeEventListener()</code>. N'importe lequel d'entre eux dans lequel <code>capture</code> ou <code>useCapture</code> est <code>true</code> (<em>vrai</em>) échoue ; tous les autres réussissent. Seul le paramètre de <code>capture</code> est important pour <code>removeEventListener()</code>.</p>
+```js
+element.addEventListener("mousedown", handleMouseDown, { passive: true });
+```
 
-<pre class="brush: js">element.removeEventListener("mousedown", handleMouseDown, { passive: true });     // Réussit
+Ici, nous spécifions un objet `options` dans lequel `passive` est défini à `true`, tandis que les autres options sont laissées à la valeur par défaut de `false`.
+
+Maintenant, regardez chacun de ces appels successifs à `removeEventListener()`. N'importe lequel d'entre eux dans lequel `capture` ou `useCapture` est `true` (_vrai_) échoue ; tous les autres réussissent. Seul le paramètre de `capture` est important pour `removeEventListener()`.
+
+```js
+element.removeEventListener("mousedown", handleMouseDown, { passive: true });     // Réussit
 element.removeEventListener("mousedown", handleMouseDown, { capture: false });    // Réussit
 element.removeEventListener("mousedown", handleMouseDown, { capture: true });     // Échoue
 element.removeEventListener("mousedown", handleMouseDown, { passive: false });    // Réussit
 element.removeEventListener("mousedown", handleMouseDown, false);                 // Réussit
 element.removeEventListener("mousedown", handleMouseDown, true);                  // Échoue
-</pre>
+```
 
-<p>Il est à noter que certaines versions du navigateur ont été incohérentes à ce sujet, et sauf si vous avez des raisons spécifiques, il est probablement sage d'utiliser les mêmes valeurs que pour l'appel à <code>addEventListener()</code> lors de l'appel de <code>removeEventListener()</code>.</p>
+Il est à noter que certaines versions du navigateur ont été incohérentes à ce sujet, et sauf si vous avez des raisons spécifiques, il est probablement sage d'utiliser les mêmes valeurs que pour l'appel à `addEventListener()` lors de l'appel de `removeEventListener()`.
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p>Si un {{domxref("EventListener")}} est retiré d'un {{domxref("EventTarget")}} alors qu'il est en train de traiter un événement, il ne sera pas déclenché par les actions courantes. Les {{domxref("EventListener")}} ne peuvent jamais être invoqués après avoir été retirés.</p>
+Si un {{domxref("EventListener")}} est retiré d'un {{domxref("EventTarget")}} alors qu'il est en train de traiter un événement, il ne sera pas déclenché par les actions courantes. Les {{domxref("EventListener")}} ne peuvent jamais être invoqués après avoir été retirés.
 
-<p>L'appel de <code>removeEventListener()</code> avec des paramètres n'identifiant aucun {{domxref("EventListener")}} actuellement enregistré sur l'<code>EventTarget</code> n'a aucun effet.</p>
+L'appel de `removeEventListener()` avec des paramètres n'identifiant aucun {{domxref("EventListener")}} actuellement enregistré sur l'`EventTarget` n'a aucun effet.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Cet exemple montre comment ajouter un écouteur d'évènements basé sur <code>click</code> et supprimer un écouteur d'évènements basé sur <code>mouseover</code>.</p>
+Cet exemple montre comment ajouter un écouteur d'évènements basé sur `click` et supprimer un écouteur d'évènements basé sur `mouseover`.
 
-<pre class="brush: js">var body = document.querySelector('body'),
+```js
+var body = document.querySelector('body'),
     clickTarget = document.getElementById('click-target'),
     mouseOverTarget = document.getElementById('mouse-over-target'),
     toggle = false;
@@ -123,52 +126,33 @@ mouseOverTarget.addEventListener('mouseover', function () {
         makeBackgroundYellow,
         false
     );
-});</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th>Spécification</th>
-   <th>État</th>
-   <th>Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("DOM WHATWG", "#dom-eventtarget-removeeventlistener", "EventTarget.removeEventListener()")}}</td>
-   <td>{{Spec2("DOM WHATWG")}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName("DOM4", "#dom-eventtarget-removeeventlistener", "EventTarget.removeEventListener()")}}</td>
-   <td>{{Spec2("DOM4")}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName("DOM2 Events", "#Events-EventTarget-removeEventListener", "EventTarget.removeEventListener()")}}</td>
-   <td>{{Spec2("DOM2 Events")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.EventTarget.removeEventListener", 3)}}</p>
-
-<h2 id="Prothèse_(polyfill)_pour_la_prise_en_charge_des_navigateurs_anciens">Prothèse (<em>polyfill</em>) pour la prise en charge des navigateurs anciens</h2>
-
-<p><code>addEventListener()</code> et <code>removeEventListener()</code> ne sont pas présents dans les anciens navigateurs. Vous pouvez contourner ce problème en insérant le code suivant au début de vos scripts, permettant l'utilisation de <code>addEventListener()</code> et <code>removeEventListener()</code> dans les implémentations qui ne le supportent pas nativement. Toutefois, cette méthode ne fonctionnera pas sur Internet Explorer 7 ou version antérieure, car l'extension du fichier Element.prototype n'a pas été prise en charge jusqu'à Internet Explorer 8.</p>
-
-<pre class="brush: js">if (!Element.prototype.addEventListener) {
+});
+```
+
+## Spécifications
+
+| Spécification                                                                                                                                    | État                             | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName("DOM WHATWG", "#dom-eventtarget-removeeventlistener", "EventTarget.removeEventListener()")}}         | {{Spec2("DOM WHATWG")}} |                      |
+| {{SpecName("DOM4", "#dom-eventtarget-removeeventlistener", "EventTarget.removeEventListener()")}}                 | {{Spec2("DOM4")}}         |                      |
+| {{SpecName("DOM2 Events", "#Events-EventTarget-removeEventListener", "EventTarget.removeEventListener()")}} | {{Spec2("DOM2 Events")}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.EventTarget.removeEventListener", 3)}}
+
+## Prothèse (_polyfill_) pour la prise en charge des navigateurs anciens
+
+`addEventListener()` et `removeEventListener()` ne sont pas présents dans les anciens navigateurs. Vous pouvez contourner ce problème en insérant le code suivant au début de vos scripts, permettant l'utilisation de `addEventListener()` et `removeEventListener()` dans les implémentations qui ne le supportent pas nativement. Toutefois, cette méthode ne fonctionnera pas sur Internet Explorer 7 ou version antérieure, car l'extension du fichier Element.prototype n'a pas été prise en charge jusqu'à Internet Explorer 8.
+
+```js
+if (!Element.prototype.addEventListener) {
   var oListeners = {};
   function runListeners(oEvent) {
     if (!oEvent) { oEvent = window.event; }
-    for (var iLstId = 0, iElId = 0, oEvtListeners = oListeners[oEvent.type]; iElId &lt; oEvtListeners.aEls.length; iElId++) {
+    for (var iLstId = 0, iElId = 0, oEvtListeners = oListeners[oEvent.type]; iElId < oEvtListeners.aEls.length; iElId++) {
       if (oEvtListeners.aEls[iElId] === this) {
-        for (iLstId; iLstId &lt; oEvtListeners.aEvts[iElId].length; iLstId++) { oEvtListeners.aEvts[iElId][iLstId].call(this, oEvent); }
+        for (iLstId; iLstId < oEvtListeners.aEvts[iElId].length; iLstId++) { oEvtListeners.aEvts[iElId][iLstId].call(this, oEvent); }
         break;
       }
     }
@@ -176,7 +160,7 @@ mouseOverTarget.addEventListener('mouseover', function () {
   Element.prototype.addEventListener = function (sEventType, fListener /*, useCapture (will be ignored!) */) {
     if (oListeners.hasOwnProperty(sEventType)) {
       var oEvtListeners = oListeners[sEventType];
-      for (var nElIdx = -1, iElId = 0; iElId &lt; oEvtListeners.aEls.length; iElId++) {
+      for (var nElIdx = -1, iElId = 0; iElId < oEvtListeners.aEls.length; iElId++) {
         if (oEvtListeners.aEls[iElId] === this) { nElIdx = iElId; break; }
       }
       if (nElIdx === -1) {
@@ -189,7 +173,7 @@ mouseOverTarget.addEventListener('mouseover', function () {
           aElListeners.splice(0);
           this["on" + sEventType] = runListeners;
         }
-        for (var iLstId = 0; iLstId &lt; aElListeners.length; iLstId++) {
+        for (var iLstId = 0; iLstId < aElListeners.length; iLstId++) {
           if (aElListeners[iLstId] === fListener) { return; }
         }
         aElListeners.push(fListener);
@@ -202,19 +186,18 @@ mouseOverTarget.addEventListener('mouseover', function () {
   Element.prototype.removeEventListener = function (sEventType, fListener /*, useCapture (will be ignored!) */) {
     if (!oListeners.hasOwnProperty(sEventType)) { return; }
     var oEvtListeners = oListeners[sEventType];
-    for (var nElIdx = -1, iElId = 0; iElId &lt; oEvtListeners.aEls.length; iElId++) {
+    for (var nElIdx = -1, iElId = 0; iElId < oEvtListeners.aEls.length; iElId++) {
       if (oEvtListeners.aEls[iElId] === this) { nElIdx = iElId; break; }
     }
     if (nElIdx === -1) { return; }
-    for (var iLstId = 0, aElListeners = oEvtListeners.aEvts[nElIdx]; iLstId &lt; aElListeners.length; iLstId++) {
+    for (var iLstId = 0, aElListeners = oEvtListeners.aEvts[nElIdx]; iLstId < aElListeners.length; iLstId++) {
       if (aElListeners[iLstId] === fListener) { aElListeners.splice(iLstId, 1); }
     }
   };
-}</pre>
+}
+```
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("EventTarget.addEventListener")}}</li>
- <li>{{non-standard_inline}}{{domxref("EventTarget.detachEvent()")}}.</li>
-</ul>
+- {{domxref("EventTarget.addEventListener")}}
+- {{non-standard_inline}}{{domxref("EventTarget.detachEvent()")}}.
diff --git a/files/fr/web/api/extendableevent/extendableevent/index.md b/files/fr/web/api/extendableevent/extendableevent/index.md
index 52786b501f..cc87f30a32 100644
--- a/files/fr/web/api/extendableevent/extendableevent/index.md
+++ b/files/fr/web/api/extendableevent/extendableevent/index.md
@@ -10,50 +10,37 @@ tags:
   - ServiceWorker
 translation_of: Web/API/ExtendableEvent/ExtendableEvent
 ---
-<p>{{APIRef("Service Workers API")}}{{ SeeCompatTable() }}</p>
+{{APIRef("Service Workers API")}}{{ SeeCompatTable() }}
 
-<p>Le contructeur <code><strong>ExtendableEvent()</strong></code> crée un nouvel objet {{domxref("ExtendableEvent")}}.</p>
+Le contructeur **`ExtendableEvent()`** crée un nouvel objet {{domxref("ExtendableEvent")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">var myExtendableEvent = new ExtendableEvent(type, init);</pre>
+```js
+var myExtendableEvent = new ExtendableEvent(type, init);
+```
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><em>type</em></dt>
- <dd>Le type de l'ExtendableEvent, par exemple {{Event("install")}}, {{Event("activate")}}.</dd>
- <dt><em>init</em> {{optional_inline}}</dt>
- <dd>Un objet d'options contenant n'importe quelle configuration personnalisée que vous voulez appeler à un objet d'évènement. Pour le moment, il n'existe pas d'option dans la spécification, mais il a été défini pour une compatibilité future pour les différents évènements dérivés.</dd>
-</dl>
+- _type_
+  - : Le type de l'ExtendableEvent, par exemple {{Event("install")}}, {{Event("activate")}}.
+- _init_ {{optional_inline}}
+  - : Un objet d'options contenant n'importe quelle configuration personnalisée que vous voulez appeler à un objet d'évènement. Pour le moment, il n'existe pas d'option dans la spécification, mais il a été défini pour une compatibilité future pour les différents évènements dérivés.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Service Workers', '#extendable-event', 'ExtendableEvent')}}</td>
-   <td>{{Spec2('Service Workers')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                    | Statut                               | Commentaire          |
+| ------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- |
+| {{SpecName('Service Workers', '#extendable-event', 'ExtendableEvent')}} | {{Spec2('Service Workers')}} | Définition initiale. |
 
-<h2 id="Compatibilités_des_navigateurs">Compatibilités des navigateurs</h2>
+## Compatibilités des navigateurs
 
-<p>{{Compat("api.ExtendableEvent.ExtendableEvent")}}</p>
+{{Compat("api.ExtendableEvent.ExtendableEvent")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Utilisation des Service Workers</a></li>
- <li><a href="https://github.com/mdn/sw-test">Exemple simple de service workers</a></li>
- <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Les  ServiceWorker sont-ils prêts?</a></li>
- <li>{{jsxref("Promise")}}</li>
- <li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Utilisation performante des web workers</a></li>
-</ul>
+- [Utilisation des Service Workers](/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers)
+- [Exemple simple de service workers](https://github.com/mdn/sw-test)
+- [Les  ServiceWorker sont-ils prêts?](https://jakearchibald.github.io/isserviceworkerready/)
+- {{jsxref("Promise")}}
+- [Utilisation performante des web workers](/en-US/docs/Web/Guide/Performance/Using_web_workers)
diff --git a/files/fr/web/api/extendableevent/index.md b/files/fr/web/api/extendableevent/index.md
index 2d5ffe78b5..6264426df8 100644
--- a/files/fr/web/api/extendableevent/index.md
+++ b/files/fr/web/api/extendableevent/index.md
@@ -14,51 +14,44 @@ tags:
 translation_of: Web/API/ExtendableEvent
 browser-compat: api.ExtendableEvent
 ---
-<div>{{APIRef("Service Workers API")}}</div>
+{{APIRef("Service Workers API")}}
 
-<p>L'interface <strong><code>ExtendableEvent</code></strong> étend la durée de vie des événements <code><a href="/fr/docs/Web/API/ServiceWorkerGlobalScope/install_event">install</a></code> et <code><a href="/fr/docs/Web/API/ServiceWorkerGlobalScope/activate_event">activate</a></code> envoyés dans la portée globale dans le cycle de vie du service worker. Elle s'assure que les événements fonctionnels (comme <a href="/fr/docs/Web/API/FetchEvent"><code>FetchEvent</code></a>) ne soient pas distribués avant de mettre à jour les schémas de la base de données et de vider l'ancien cache.</p>
+L'interface **`ExtendableEvent`** étend la durée de vie des événements [`install`](/fr/docs/Web/API/ServiceWorkerGlobalScope/install_event) et [`activate`](/fr/docs/Web/API/ServiceWorkerGlobalScope/activate_event) envoyés dans la portée globale dans le cycle de vie du service worker. Elle s'assure que les événements fonctionnels (comme [`FetchEvent`](/fr/docs/Web/API/FetchEvent)) ne soient pas distribués avant de mettre à jour les schémas de la base de données et de vider l'ancien cache.
 
-<p>Si <a href="/fr/docs/Web/API/ExtendableEvent/waitUntil"><code>waitUntil()</code></a> est appelé en dehors du gestionnaire <code>ExtendableEvent</code>, le navigateur doit lever une exception <code>InvalidStateError</code> ; notez que plusieurs appels vont s'empiler, et que les promesses de résultat seront ajoutées à la liste des <a href="https://slightlyoff.github.io/ServiceWorker/spec/service_worker/index.html#dfn-extend-lifetime-promises">promesses à vie étendue</a>.</p>
+Si [`waitUntil()`](/fr/docs/Web/API/ExtendableEvent/waitUntil) est appelé en dehors du gestionnaire `ExtendableEvent`, le navigateur doit lever une exception `InvalidStateError` ; notez que plusieurs appels vont s'empiler, et que les promesses de résultat seront ajoutées à la liste des [promesses à vie étendue](https://slightlyoff.github.io/ServiceWorker/spec/service_worker/index.html#dfn-extend-lifetime-promises).
 
-<div class="note">
-<p><strong>Note :</strong> Le comportement décrit dans le paragraphe précédent a été corrigé dans Firefox 43 (voir <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1180274">le bug 1180274</a>).</p>
-</div>
+> **Note :** Le comportement décrit dans le paragraphe précédent a été corrigé dans Firefox 43 (voir [le bug 1180274](https://bugzilla.mozilla.org/show_bug.cgi?id=1180274)).
 
-<p>Cette interface hérite de l'interface <a href="/fr/docs/Web/API/Event"><code>Event</code></a>.</p>
+Cette interface hérite de l'interface [`Event`](/fr/docs/Web/API/Event).
 
-<p>{{InheritanceDiagram(700, 60, 20)}}</p>
+{{InheritanceDiagram(700, 60, 20)}}
 
-<div class="note">
-<p><strong>Note :</strong> Cette interface est disponible seulement quand la portée globale est <a href="/fr/docs/Web/API/ServiceWorkerGlobalScope"><code>ServiceWorkerGlobalScope</code></a>. Elle n'est pas disponible quand c'est un objet <a href="/fr/docs/Web/API/Window"><code>Window</code></a> ou un autre type de worker.</p>
-</div>
+> **Note :** Cette interface est disponible seulement quand la portée globale est [`ServiceWorkerGlobalScope`](/fr/docs/Web/API/ServiceWorkerGlobalScope). Elle n'est pas disponible quand c'est un objet [`Window`](/fr/docs/Web/API/Window) ou un autre type de worker.
 
-<h2 id="constructor">Constructeur</h2>
+## Constructeur
 
-<dl>
- <dt><a href="/fr/docs/Web/API/ExtendableEvent/ExtendableEvent"><code>ExtendableEvent()</code></a></dt>
- <dd>Crée un nouvel objet <code>ExtendableEvent</code>.</dd>
-</dl>
+- [`ExtendableEvent()`](/fr/docs/Web/API/ExtendableEvent/ExtendableEvent)
+  - : Crée un nouvel objet `ExtendableEvent`.
 
-<h2 id="properties">Propriétés</h2>
+## Propriétés
 
-<p>N'implémente pas de propriétés spécifiques, mais hérite de celles de son parent, <em><a href="/fr/docs/Web/API/Event"><code>Event</code></a>.</em></p>
+N'implémente pas de propriétés spécifiques, mais hérite de celles de son parent, _[`Event`](/fr/docs/Web/API/Event)._
 
-<h2 id="methods">Méthodes</h2>
+## Méthodes
 
-<p>Hérite des méthodes de son parent <em><a href="/fr/docs/Web/API/Event"><code>Event</code></a>.</em></p>
+Hérite des méthodes de son parent _[`Event`](/fr/docs/Web/API/Event)._
 
-<dl>
- <dt><a href="/fr/docs/Web/API/ExtendableEvent/waitUntil"><code>ExtendableEvent.waitUntil()</code></a></dt>
- <dd>Étend la durée de vie de l'évènement. Cette méthode doit être appelée dans le gestionnaire d'évènement <code><a href="/fr/docs/Web/API/ServiceWorkerGlobalScope/install_event">install</a></code> pour le worker en cours d'installation (voir <a href="/fr/docs/Web/API/ServiceWorkerRegistration/installing"><code>installing</code></a>) et dans le gestionnaire d'évènement <code><a href="/fr/docs/Web/API/ServiceWorkerGlobalScope/activate_event">activate</a></code> pour le worker actif (voir <a href="/fr/docs/Web/API/ServiceWorkerRegistration/active"><code>active</code></a>).</dd>
-</dl>
+- [`ExtendableEvent.waitUntil()`](/fr/docs/Web/API/ExtendableEvent/waitUntil)
+  - : Étend la durée de vie de l'évènement. Cette méthode doit être appelée dans le gestionnaire d'évènement [`install`](/fr/docs/Web/API/ServiceWorkerGlobalScope/install_event) pour le worker en cours d'installation (voir [`installing`](/fr/docs/Web/API/ServiceWorkerRegistration/installing)) et dans le gestionnaire d'évènement [`activate`](/fr/docs/Web/API/ServiceWorkerGlobalScope/activate_event) pour le worker actif (voir [`active`](/fr/docs/Web/API/ServiceWorkerRegistration/active)).
 
-<h2 id="examples">Exemples</h2>
+## Exemples
 
-<p>Ce fragment de code est tiré de <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/prefetch/service-worker.js">l'exemple du service worker utilisant prefetch</a> (voir <a href="https://googlechrome.github.io/samples/service-worker/prefetch/">l'exemple en live</a>). Ce code appelle <a href="/fr/docs/Web/API/ExtendableEvent/waitUntil"><code>ExtendableEvent.waitUntil()</code></a> dans le gestionnaire d'évènement <a href="/fr/docs/Web/API/ServiceWorkerGlobalScope/oninstall"><code>ServiceWorkerGlobalScope.oninstall</code></a>, retardant le traitement du worker <a href="/fr/docs/Web/API/ServiceWorkerRegistration/installing"><code>ServiceWorkerRegistration.installing</code></a> après l'installation jusqu'à ce que la promesse se résolve. La promesse se résout quand toutes les ressources ont été récupérées et mises en cache, ou quand une exception est levée.</p>
+Ce fragment de code est tiré de [l'exemple du service worker utilisant prefetch](https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/prefetch/service-worker.js) (voir [l'exemple en live](https://googlechrome.github.io/samples/service-worker/prefetch/)). Ce code appelle [`ExtendableEvent.waitUntil()`](/fr/docs/Web/API/ExtendableEvent/waitUntil) dans le gestionnaire d'évènement [`ServiceWorkerGlobalScope.oninstall`](/fr/docs/Web/API/ServiceWorkerGlobalScope/oninstall), retardant le traitement du worker [`ServiceWorkerRegistration.installing`](/fr/docs/Web/API/ServiceWorkerRegistration/installing) après l'installation jusqu'à ce que la promesse se résolve. La promesse se résout quand toutes les ressources ont été récupérées et mises en cache, ou quand une exception est levée.
 
-<p>Ce fragment de code montre aussi une bonne pratique pour construire des versions de cache utilisées par le service worker. Même s'il n'y a qu'un cache dans cet exemple, la même approche peut être utilisée pour plusieurs caches. Il lie un identifiant court pour un cache avec un nom de cache spécifique et versionné.</p>
+Ce fragment de code montre aussi une bonne pratique pour construire des versions de cache utilisées par le service worker. Même s'il n'y a qu'un cache dans cet exemple, la même approche peut être utilisée pour plusieurs caches. Il lie un identifiant court pour un cache avec un nom de cache spécifique et versionné.
 
-<pre class="brush: js">var CACHE_VERSION = 1;
+```js
+var CACHE_VERSION = 1;
 var CURRENT_CACHES = {
   prefetch: 'prefetch-cache-v' + CACHE_VERSION
 };
@@ -83,41 +76,25 @@ self.addEventListener('install', function(event) {
       console.error('Erreur de pré-chargement :', error);
     })
   );
-});</pre>
-
-<div class="warning">
-  <p><strong>Attention :</strong> Au moment du chargement des ressources, il est très important d'utiliser <code>{mode: 'no-cors'}</code> s'il y a une chance que la ressource soit servie depuis un serveur qui ne supporte pas le <a href="http://en.wikipedia.org/wiki/Cross-origin_resource_sharing">CORS</a>. Dans cet exemple, <a href="https://www.chromium.org">www.chromium.org</a> ne prend pas en charge le CORS.</p>
-</div>
-
-<h2 id="specifications">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('Service Workers', '#extendable-event', 'ExtendableEvent')}}</td>
-   <td>{{Spec2('Service Workers')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat}}</p>
-
-<h2 id="see_also">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Utiliser les Service Workers</a></li>
- <li><a href="https://github.com/mdn/sw-test">Un exemple de base pour un service worker</a></li>
- <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Peut-on utiliser les service workers ?</a></li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise"><code>Promise</code></a></li>
- <li><a href="/fr/docs/Web/Guide/Performance/Using_web_workers">Utiliser les web workers</a></li>
-</ul>
+});
+```
+
+> **Attention :** Au moment du chargement des ressources, il est très important d'utiliser `{mode: 'no-cors'}` s'il y a une chance que la ressource soit servie depuis un serveur qui ne supporte pas le [CORS](http://en.wikipedia.org/wiki/Cross-origin_resource_sharing). Dans cet exemple, [www.chromium.org](https://www.chromium.org) ne prend pas en charge le CORS.
+
+## Spécifications
+
+| Spécification                                                                                    | Statut                               | Commentaire         |
+| ------------------------------------------------------------------------------------------------ | ------------------------------------ | ------------------- |
+| {{SpecName('Service Workers', '#extendable-event', 'ExtendableEvent')}} | {{Spec2('Service Workers')}} | Définition initiale |
+
+## Compatibilité des navigateurs
+
+{{Compat}}
+
+## Voir aussi
+
+- [Utiliser les Service Workers](/fr/docs/Web/API/ServiceWorker_API/Using_Service_Workers)
+- [Un exemple de base pour un service worker](https://github.com/mdn/sw-test)
+- [Peut-on utiliser les service workers ?](https://jakearchibald.github.io/isserviceworkerready/)
+- [`Promise`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise)
+- [Utiliser les web workers](/fr/docs/Web/Guide/Performance/Using_web_workers)
diff --git a/files/fr/web/api/extendablemessageevent/data/index.md b/files/fr/web/api/extendablemessageevent/data/index.md
index fa74ec3d7d..ca1b492b22 100644
--- a/files/fr/web/api/extendablemessageevent/data/index.md
+++ b/files/fr/web/api/extendablemessageevent/data/index.md
@@ -9,23 +9,24 @@ tags:
   - Service Workers
 translation_of: Web/API/ExtendableMessageEvent/data
 ---
-<div>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</div>
+{{APIRef("Service Workers API")}}{{SeeCompatTable}}
 
-<p>La propriété <code><strong>data</strong></code> est une propriété en lecture seule rattachée à l'interface {{domxref("ExtendableMessageEvent")}} et qui permet d'accéder aux données de l'évènement. Il peut s'agir de n'importe quel type de donnée.</p>
+La propriété **`data`** est une propriété en lecture seule rattachée à l'interface {{domxref("ExtendableMessageEvent")}} et qui permet d'accéder aux données de l'évènement. Il peut s'agir de n'importe quel type de donnée.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var mesDonnees = ExtendableMessageEventInstance.data;</pre>
+    var mesDonnees = ExtendableMessageEventInstance.data;
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>N'importe quel type de donnée.</p>
+N'importe quel type de donnée.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Quand le code suivant est utilisé dans un service worker pour répondre à un message <em>push</em> en envoyant les données reçues par {{domxref("PushMessageData")}} au contexte principal via un <a href="/fr/docs/Web/API/Channel_Messaging_API">message</a>, l'objet de l'évènement <code>onmessage</code> sera un <code>ExtendableMessageEvent</code>.</p>
+Quand le code suivant est utilisé dans un service worker pour répondre à un message _push_ en envoyant les données reçues par {{domxref("PushMessageData")}} au contexte principal via un [message](/fr/docs/Web/API/Channel_Messaging_API), l'objet de l'évènement `onmessage` sera un `ExtendableMessageEvent`.
 
-<pre class="brush: js">var port;
+```js
+var port;
 
 self.addEventListener('push', function(e) {
   var obj = e.data.json();
@@ -41,34 +42,21 @@ self.onmessage = function(e) {
   console.log(e.data);
   port = e.ports[0];
 }
-</pre>
-
-<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">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Service Workers', '#extendablemessage-event-data-attribute', 'ExtendableMessageEvent.data')}}</td>
-   <td>{{Spec2('Service Workers')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.ExtendableMessageEvent.data")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Utiliser les <em>Service Workers</em></a></li>
- <li><a href="https://github.com/mdn/sw-test">Exemple simple utilisant les <em>service workers</em></a></li>
- <li><a href="https://jakearchibald.github.io/isserviceworkerready/">État d'avancement de l'implémentation pour <em>ServiceWorker</em> dans les navigateurs</a></li>
- <li><a href="/fr/docs/Web/API/Channel_Messaging_API">Échange de messages entre les canaux</a></li>
-</ul>
+```
+
+## Spécifications
+
+| Spécification                                                                                                                                | État                                 | Commentaire          |
+| -------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName('Service Workers', '#extendablemessage-event-data-attribute', 'ExtendableMessageEvent.data')}} | {{Spec2('Service Workers')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.ExtendableMessageEvent.data")}}
+
+## Voir aussi
+
+- [Utiliser les _Service Workers_](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers)
+- [Exemple simple utilisant les _service workers_](https://github.com/mdn/sw-test)
+- [État d'avancement de l'implémentation pour _ServiceWorker_ dans les navigateurs](https://jakearchibald.github.io/isserviceworkerready/)
+- [Échange de messages entre les canaux](/fr/docs/Web/API/Channel_Messaging_API)
diff --git a/files/fr/web/api/extendablemessageevent/extendablemessageevent/index.md b/files/fr/web/api/extendablemessageevent/extendablemessageevent/index.md
index a9d04efa8a..cd4de1962e 100644
--- a/files/fr/web/api/extendablemessageevent/extendablemessageevent/index.md
+++ b/files/fr/web/api/extendablemessageevent/extendablemessageevent/index.md
@@ -9,67 +9,53 @@ tags:
   - Service Workers
 translation_of: Web/API/ExtendableMessageEvent/ExtendableMessageEvent
 ---
-<p>{{APIRef("Service Workers API")}}{{ SeeCompatTable() }}</p>
+{{APIRef("Service Workers API")}}{{ SeeCompatTable() }}
 
-<p>Le constructeur <code><strong>Extendable</strong></code><strong><code>MessageEvent()</code></strong>crée une nouvelle instance d'un {{domxref("ExtendableMessageEvent")}}.</p>
+Le constructeur **`Extendable`\*\***`MessageEvent()`\*\*crée une nouvelle instance d'un {{domxref("ExtendableMessageEvent")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var myEME = new ExtendableMessageEvent(type, init);</pre>
+    var myEME = new ExtendableMessageEvent(type, init);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt>type</dt>
- <dd>Un {{domxref("DOMString")}} qui définie le type de message créé.</dd>
- <dt>init {{optional_inline}}</dt>
- <dd>Un objet d'initialisation, qui doit contenir les paramètres suivant:
- <ul>
-  <li><code>data</code>: Les données de l'évènement — peut être de n'importe quel type.</li>
-  <li><code>origin</code>: Une {{domxref("DOMString")}} qui définie l'origine de l'environnement du service worker correspondant.</li>
-  <li><code>lastEventId</code>: Une {{domxref("DOMString")}} qui définie le dernier l'id du dernier évènement de l'évènement source.</li>
-  <li><code>source</code>: Le {{domxref("Client")}}, {{domxref("ServiceWorker")}} ou {{domxref("MessagePort")}} qui a envoyé un message.</li>
-  <li><code>ports</code>: Un tableau contenant les objets  {{domxref("MessagePort")}} connectés au canal d'envoie des messages.</li>
- </ul>
- </dd>
-</dl>
+- type
+  - : Un {{domxref("DOMString")}} qui définie le type de message créé.
+- init {{optional_inline}}
 
-<h2 id="Exemples">Exemples</h2>
+  - : Un objet d'initialisation, qui doit contenir les paramètres suivant:
 
-<pre class="brush: js">var init = {
+    - `data`: Les données de l'évènement — peut être de n'importe quel type.
+    - `origin`: Une {{domxref("DOMString")}} qui définie l'origine de l'environnement du service worker correspondant.
+    - `lastEventId`: Une {{domxref("DOMString")}} qui définie le dernier l'id du dernier évènement de l'évènement source.
+    - `source`: Le {{domxref("Client")}}, {{domxref("ServiceWorker")}} ou {{domxref("MessagePort")}} qui a envoyé un message.
+    - `ports`: Un tableau contenant les objets  {{domxref("MessagePort")}} connectés au canal d'envoie des messages.
+
+## Exemples
+
+```js
+var init = {
              data : 'Message de bienvenue',
              source : MessagePortReference,
              ports : MessagePortListReference
            }
 
-var myEME = new ExtendableMessageEvent('message', init);</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Service Workers', '#extendablemessage-event-interface', 'ExtendableMessageEvent')}}</td>
-   <td>{{Spec2('Service Workers')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilités_des_navigateurs">Compatibilités des navigateurs</h2>
-
-<p>{{Compat("api.ExtendableMessageEvent.ExtendableMessageEvent")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Utiliser les Service Workers</a></li>
- <li><a href="https://github.com/mdn/sw-test">Exemple simple de service workers</a></li>
- <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Les Services Workers sont-ils prêts ?</a></li>
- <li><a href="/en-US/docs/Web/API/Channel_Messaging_API">Canal de messages</a></li>
-</ul>
+var myEME = new ExtendableMessageEvent('message', init);
+```
+
+## Spécifications
+
+| Spécification                                                                                                                    | Statut                               | Commentaire          |
+| -------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName('Service Workers', '#extendablemessage-event-interface', 'ExtendableMessageEvent')}} | {{Spec2('Service Workers')}} | Définition initiale. |
+
+## Compatibilités des navigateurs
+
+{{Compat("api.ExtendableMessageEvent.ExtendableMessageEvent")}}
+
+## Voir aussi
+
+- [Utiliser les Service Workers](/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers)
+- [Exemple simple de service workers](https://github.com/mdn/sw-test)
+- [Les Services Workers sont-ils prêts ?](https://jakearchibald.github.io/isserviceworkerready/)
+- [Canal de messages](/en-US/docs/Web/API/Channel_Messaging_API)
diff --git a/files/fr/web/api/extendablemessageevent/index.md b/files/fr/web/api/extendablemessageevent/index.md
index adad758848..5cdfead701 100644
--- a/files/fr/web/api/extendablemessageevent/index.md
+++ b/files/fr/web/api/extendablemessageevent/index.md
@@ -10,47 +10,42 @@ tags:
   - Service Workers
 translation_of: Web/API/ExtendableMessageEvent
 ---
-<div>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</div>
+{{APIRef("Service Workers API")}}{{SeeCompatTable}}
 
-<div> </div>
+L'interface **`ExtendableMessageEvent`** de {{domxref("ServiceWorker_API", "ServiceWorker API")}} représentes un objet d'évenement qu'un évènement {{event("message_(ServiceWorker)","message")}} lance pour un service worker (quand un canal de message est reçu sur le {{domxref("ServiceWorkerGlobalScope")}} depuis un autre context) — étends la durée de vie de ces évènements.
 
-<p>L'interface <strong><code>ExtendableMessageEvent</code></strong> de {{domxref("ServiceWorker_API", "ServiceWorker API")}} représentes un objet d'évenement qu'un évènement {{event("message_(ServiceWorker)","message")}} lance pour un service worker (quand un canal de message est reçu sur le {{domxref("ServiceWorkerGlobalScope")}} depuis un autre context) — étends la durée de vie de ces évènements.</p>
+Cette interface hérite de l'interface {{domxref("ExtendableEvent")}}.
 
-<p>Cette interface hérite de l'interface {{domxref("ExtendableEvent")}}.</p>
+## Constructeur
 
-<h2 id="Constructeur">Constructeur</h2>
+- {{domxref("ExtendableMessageEvent.ExtendableMessageEvent()")}}
+  - : Crée une nouvelle instance de l'objet `ExtendableMessageEvent`.
 
-<dl>
- <dt>{{domxref("ExtendableMessageEvent.ExtendableMessageEvent()")}}</dt>
- <dd>Crée une nouvelle instance de l'objet <code>ExtendableMessageEvent</code>.</dd>
-</dl>
+## Propriétés
 
-<h2 id="Propriétés">Propriétés</h2>
+_Hérite des propriétés de son parent,_ _{{domxref("ExtendableEvent")}}_.
 
-<p><em>Hérite des propriétés de son parent, </em><em>{{domxref("ExtendableEvent")}}</em>.</p>
+- {{domxref("ExtendableMessageEvent.data")}} {{readonlyinline}}
+  - : Retourne les données de l'évenements. Il peut être de n'importe quel type.
+- {{domxref("ExtendableMessageEvent.origin")}} {{readonlyinline}}
+  - : Retourne l'origine du {{domxref("ServiceWorkerClient")}} qui envoie le message.
+- {{domxref("ExtendableMessageEvent.lastEventId")}} {{readonlyinline}}
+  - : Représente, dans un [server-sent events](en-US/docs/Server-sent_events/Using_server-sent_events), le dernier ID de l'évenement source.
+- {{domxref("ExtendableMessageEvent.source")}} {{readonlyinline}}
+  - : Retourne une référence vers le service worker qui envoie le message.
+- {{domxref("ExtendableMessageEvent.ports")}} {{readonlyinline}}
+  - : Retourne un tableau contenant l'objet {{domxref("MessagePort")}} représentant les ports associés au canal de messagerie.
 
-<dl>
- <dt>{{domxref("ExtendableMessageEvent.data")}} {{readonlyinline}}</dt>
- <dd>Retourne les données de l'évenements. Il peut être de n'importe quel type.</dd>
- <dt>{{domxref("ExtendableMessageEvent.origin")}} {{readonlyinline}}</dt>
- <dd>Retourne l'origine du {{domxref("ServiceWorkerClient")}} qui envoie le message.</dd>
- <dt>{{domxref("ExtendableMessageEvent.lastEventId")}} {{readonlyinline}}</dt>
- <dd>Représente, dans un <a href="en-US/docs/Server-sent_events/Using_server-sent_events">server-sent events</a>, le dernier ID de l'évenement source.</dd>
- <dt>{{domxref("ExtendableMessageEvent.source")}} {{readonlyinline}}</dt>
- <dd>Retourne une référence vers le service worker qui envoie le message.</dd>
- <dt>{{domxref("ExtendableMessageEvent.ports")}} {{readonlyinline}}</dt>
- <dd>Retourne un tableau contenant l'objet {{domxref("MessagePort")}} représentant les ports associés au canal de messagerie.</dd>
-</dl>
+## Méthodes
 
-<h2 id="Méthodes">Méthodes</h2>
+_Hérite des méthodesde son parent, {{domxref("ExtendableEvent")}}_.
 
-<p><em>Hérite des méthodesde son parent, {{domxref("ExtendableEvent")}}</em>.</p>
+## Exemples
 
-<h2 id="Exemples">Exemples</h2>
+Le code suivant est utilisé dans un service worker pour répondre à un message push en envoyant les données reçues via  {{domxref("PushMessageData")}} au contexte principale via un [channel message](/en-US/docs/Web/API/Channel_Messaging_API), l'objet d'évènement du `onmessage` sera un `ExtendableMessageEvent`.
 
-<p>Le code suivant est utilisé dans un service worker pour répondre à un message push en envoyant les données reçues via  {{domxref("PushMessageData")}} au contexte principale via un <a href="/en-US/docs/Web/API/Channel_Messaging_API">channel message</a>, l'objet d'évènement du <code>onmessage</code> sera un <code>ExtendableMessageEvent</code>.</p>
-
-<pre class="brush: js">var port;
+```js
+var port;
 
 self.addEventListener('push', function(e) {
   var obj = e.data.json();
@@ -66,34 +61,21 @@ self.onmessage = function(e) {
   console.log(e);
   port = e.ports[0];
 }
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaireaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Service Workers', '#extendablemessage-event-interface', 'ExtendableMessageEvent')}}</td>
-   <td>{{Spec2('Service Workers')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilités_des_navigateurs">Compatibilités des navigateurs</h2>
-
-<p>{{Compat("api.ExtendableMessageEvent")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Utiliser les Service Workers</a></li>
- <li><a href="https://github.com/mdn/sw-test">Exemple simple de service workers</a></li>
- <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Les serviceWorker sont-ils prêts?</a></li>
- <li><a href="/en-US/docs/Web/API/Channel_Messaging_API">Cannal de Messagerie</a></li>
-</ul>
+```
+
+## Spécifications
+
+| Spécification                                                                                                                    | Statut                               | Commentaireaire      |
+| -------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName('Service Workers', '#extendablemessage-event-interface', 'ExtendableMessageEvent')}} | {{Spec2('Service Workers')}} | Définition initiale. |
+
+## Compatibilités des navigateurs
+
+{{Compat("api.ExtendableMessageEvent")}}
+
+## Voir aussi
+
+- [Utiliser les Service Workers](/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers)
+- [Exemple simple de service workers](https://github.com/mdn/sw-test)
+- [Les serviceWorker sont-ils prêts?](https://jakearchibald.github.io/isserviceworkerready/)
+- [Cannal de Messagerie](/en-US/docs/Web/API/Channel_Messaging_API)
diff --git a/files/fr/web/api/extendablemessageevent/lasteventid/index.md b/files/fr/web/api/extendablemessageevent/lasteventid/index.md
index 997f1a7bf4..cd1fc93d7f 100644
--- a/files/fr/web/api/extendablemessageevent/lasteventid/index.md
+++ b/files/fr/web/api/extendablemessageevent/lasteventid/index.md
@@ -11,23 +11,24 @@ tags:
   - lastEventID
 translation_of: Web/API/ExtendableMessageEvent/lastEventId
 ---
-<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+{{APIRef("Service Workers API")}}{{SeeCompatTable}}
 
-<p>La propriété en lecture seule <strong><code>lastEventID</code></strong> de l'interface {{domxref("ExtendableMessageEvent")}} représente, dans <a href="/en-US/docs/Web/API/en-US/docs/Server-sent_events/Using_server-sent_events">les évenements envoyés par lle serveur</a>, le dernier ID de l'évenement source.</p>
+La propriété en lecture seule **`lastEventID`** de l'interface {{domxref("ExtendableMessageEvent")}} représente, dans [les évenements envoyés par lle serveur](/en-US/docs/Web/API/en-US/docs/Server-sent_events/Using_server-sent_events), le dernier ID de l'évenement source.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var myLastEventId = ExtendableMessageEventInstance.lastEventId;</pre>
+    var myLastEventId = ExtendableMessageEventInstance.lastEventId;
 
-<h3 id="Value">Value</h3>
+### Value
 
-<p>Une {{domxref("DOMString")}}.</p>
+Une {{domxref("DOMString")}}.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Le code suivant est utilisé, dans un service worker, pour répondre à un message push en envoyant les données reçues par le  {{domxref("PushMessageData")}} au contexte principale, via le <a href="/en-US/docs/Web/API/Channel_Messaging_API">canal de messages</a>. L'objet événement de <code>onmessage</code> sera un <code>ExtendableMessageEvent.</code></p>
+Le code suivant est utilisé, dans un service worker, pour répondre à un message push en envoyant les données reçues par le  {{domxref("PushMessageData")}} au contexte principale, via le [canal de messages](/en-US/docs/Web/API/Channel_Messaging_API). L'objet événement de `onmessage` sera un `ExtendableMessageEvent.`
 
-<pre class="brush: js">var port;
+```js
+var port;
 
 self.addEventListener('push', function(e) {
   var obj = e.data.json();
@@ -43,34 +44,21 @@ self.onmessage = function(e) {
   console.log(e.lastEventId);
   port = e.ports[0];
 }
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Service Workers', '#extendablemessage-event-lasteventid-attribute', 'ExtendableMessageEvent.lastEventId')}}</td>
-   <td>{{Spec2('Service Workers')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilités_des_navigateurs">Compatibilités des navigateurs</h2>
-
-<p>{{Compat("api.ExtendableMessageEvent.lastEventId")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Utilisation des Service Workers</a></li>
- <li><a href="https://github.com/mdn/sw-test">Exemple simple des service workers</a></li>
- <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Est-ce que les service workers sont prêts ?</a></li>
- <li><a href="/en-US/docs/Web/API/Channel_Messaging_API">Canal de messages</a></li>
-</ul>
+```
+
+## Spécifications
+
+| Spécification                                                                                                                                                    | Statut                               | Commentaire          |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName('Service Workers', '#extendablemessage-event-lasteventid-attribute', 'ExtendableMessageEvent.lastEventId')}} | {{Spec2('Service Workers')}} | Définition initiale. |
+
+## Compatibilités des navigateurs
+
+{{Compat("api.ExtendableMessageEvent.lastEventId")}}
+
+## Voir aussi
+
+- [Utilisation des Service Workers](/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers)
+- [Exemple simple des service workers](https://github.com/mdn/sw-test)
+- [Est-ce que les service workers sont prêts ?](https://jakearchibald.github.io/isserviceworkerready/)
+- [Canal de messages](/en-US/docs/Web/API/Channel_Messaging_API)
diff --git a/files/fr/web/api/extendablemessageevent/origin/index.md b/files/fr/web/api/extendablemessageevent/origin/index.md
index 1d800b866f..6179c94fa4 100644
--- a/files/fr/web/api/extendablemessageevent/origin/index.md
+++ b/files/fr/web/api/extendablemessageevent/origin/index.md
@@ -11,23 +11,24 @@ tags:
   - origin
 translation_of: Web/API/ExtendableMessageEvent/origin
 ---
-<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+{{APIRef("Service Workers API")}}{{SeeCompatTable}}
 
-<p>La propriété en lecture seule <strong>origin</strong> de l'interface {{domxref("ExtendableMessageEvent")}} retourne l'origine du  {{domxref("ServiceWorkerClient")}} qui a envoyé le message.</p>
+La propriété en lecture seule **origin** de l'interface {{domxref("ExtendableMessageEvent")}} retourne l'origine du  {{domxref("ServiceWorkerClient")}} qui a envoyé le message.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var myOrigin = ExtendableMessageEventInstance.origin;</pre>
+    var myOrigin = ExtendableMessageEventInstance.origin;
 
-<h3 id="Value">Value</h3>
+### Value
 
-<p>Une {{domxref("DOMString")}}.</p>
+Une {{domxref("DOMString")}}.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Le code suivant est utilisé, dans un service worker, pour répondre à un message push en envoyant les données reçues par le  <a href="/fr/docs/Web/API/PushMessageData"><code>PushMessageData</code></a> au contexte principale, via le <a href="/en-US/docs/Web/API/Channel_Messaging_API">canal de messages</a>. L'objet événement de <code>onmessage</code> sera un <code>ExtendableMessageEvent.</code></p>
+Le code suivant est utilisé, dans un service worker, pour répondre à un message push en envoyant les données reçues par le  [`PushMessageData`](/fr/docs/Web/API/PushMessageData) au contexte principale, via le [canal de messages](/en-US/docs/Web/API/Channel_Messaging_API). L'objet événement de `onmessage` sera un `ExtendableMessageEvent.`
 
-<pre class="brush: js">var port;
+```js
+var port;
 
 self.addEventListener('push', function(e) {
   var obj = e.data.json();
@@ -43,34 +44,21 @@ self.onmessage = function(e) {
   console.log(e.origin);
   port = e.ports[0];
 }
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Service Workers', '#extendablemessage-event-origin-attribute', 'ExtendableMessageEvent.origin')}}</td>
-   <td>{{Spec2('Service Workers')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilités_des_navigateurs">Compatibilités des navigateurs</h2>
-
-<p>{{Compat("api.ExtendableMessageEvent.origin")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Utilisation des Service Workers</a></li>
- <li><a href="https://github.com/mdn/sw-test">Exemple simple des service workers</a></li>
- <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Est-ce que les service workers sont prêts ?</a></li>
- <li><a href="/en-US/docs/Web/API/Channel_Messaging_API">Canal de messages</a></li>
-</ul>
\ No newline at end of file
+```
+
+## Spécifications
+
+| Spécification                                                                                                                                    | Statut                               | Commentaire          |
+| ------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- |
+| {{SpecName('Service Workers', '#extendablemessage-event-origin-attribute', 'ExtendableMessageEvent.origin')}} | {{Spec2('Service Workers')}} | Définition initiale. |
+
+## Compatibilités des navigateurs
+
+{{Compat("api.ExtendableMessageEvent.origin")}}
+
+## Voir aussi
+
+- [Utilisation des Service Workers](/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers)
+- [Exemple simple des service workers](https://github.com/mdn/sw-test)
+- [Est-ce que les service workers sont prêts ?](https://jakearchibald.github.io/isserviceworkerready/)
+- [Canal de messages](/en-US/docs/Web/API/Channel_Messaging_API)
diff --git a/files/fr/web/api/extendablemessageevent/ports/index.md b/files/fr/web/api/extendablemessageevent/ports/index.md
index e758af8154..994d3daaeb 100644
--- a/files/fr/web/api/extendablemessageevent/ports/index.md
+++ b/files/fr/web/api/extendablemessageevent/ports/index.md
@@ -11,23 +11,24 @@ tags:
   - ports
 translation_of: Web/API/ExtendableMessageEvent/ports
 ---
-<p>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</p>
+{{APIRef("Service Workers API")}}{{SeeCompatTable}}
 
-<p>La propriété en lecture seule <strong>ports</strong> de l'interface {{domxref("ExtendableMessageEvent")}} retourne un tableau contenant les objects {{domxref("MessagePort")}} représentants les ports associés aux canaux de messages associés (le canal du message est envoyé).</p>
+La propriété en lecture seule **ports** de l'interface {{domxref("ExtendableMessageEvent")}} retourne un tableau contenant les objects {{domxref("MessagePort")}} représentants les ports associés aux canaux de messages associés (le canal du message est envoyé).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var myPorts = ExtendableMessageEventInstance.ports;</pre>
+    var myPorts = ExtendableMessageEventInstance.ports;
 
-<h3 id="Value">Value</h3>
+### Value
 
-<p>Un tableau de {{domxref("MessagePort")}}.</p>
+Un tableau de {{domxref("MessagePort")}}.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Le code suivant est utilisé, dans un service worker, pour répondre à un message push en envoyant les données reçues par le  <a href="/fr/docs/Web/API/PushMessageData"><code>PushMessageData</code></a> au contexte principale, via le <a href="/en-US/docs/Web/API/Channel_Messaging_API">canal de messages</a>. L'objet événement de <code>onmessage</code> sera un <code>ExtendableMessageEvent.</code></p>
+Le code suivant est utilisé, dans un service worker, pour répondre à un message push en envoyant les données reçues par le  [`PushMessageData`](/fr/docs/Web/API/PushMessageData) au contexte principale, via le [canal de messages](/en-US/docs/Web/API/Channel_Messaging_API). L'objet événement de `onmessage` sera un `ExtendableMessageEvent.`
 
-<pre class="brush: js">var port;
+```js
+var port;
 
 self.addEventListener('push', function(e) {
   var obj = e.data.json();
@@ -42,34 +43,21 @@ self.addEventListener('push', function(e) {
 self.onmessage = function(e) {
   port = e.ports[0];
 }
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Service Workers', '#extendablemessage-event-ports-attribute', 'ExtendableMessageEvent.ports')}}</td>
-   <td>{{Spec2('Service Workers')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilités_des_navigateurs">Compatibilités des navigateurs</h2>
-
-<p>{{Compat("api.ExtendableMessageEvent.ports")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Utilisation des Service Workers</a></li>
- <li><a href="https://github.com/mdn/sw-test">Exemple simple des service workers</a></li>
- <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Est-ce que les service workers sont prêts ?</a></li>
- <li><a href="/en-US/docs/Web/API/Channel_Messaging_API">Canal de messages</a></li>
-</ul>
+```
+
+## Spécifications
+
+| Spécification                                                                                                                                    | Statut                               | Commentaire          |
+| ------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- |
+| {{SpecName('Service Workers', '#extendablemessage-event-ports-attribute', 'ExtendableMessageEvent.ports')}} | {{Spec2('Service Workers')}} | Définition initiale. |
+
+## Compatibilités des navigateurs
+
+{{Compat("api.ExtendableMessageEvent.ports")}}
+
+## Voir aussi
+
+- [Utilisation des Service Workers](/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers)
+- [Exemple simple des service workers](https://github.com/mdn/sw-test)
+- [Est-ce que les service workers sont prêts ?](https://jakearchibald.github.io/isserviceworkerready/)
+- [Canal de messages](/en-US/docs/Web/API/Channel_Messaging_API)
diff --git a/files/fr/web/api/featurepolicy/allowedfeatures/index.md b/files/fr/web/api/featurepolicy/allowedfeatures/index.md
index 1abfbd8c0f..97a6ea6866 100644
--- a/files/fr/web/api/featurepolicy/allowedfeatures/index.md
+++ b/files/fr/web/api/featurepolicy/allowedfeatures/index.md
@@ -9,28 +9,28 @@ tags:
   - Reference
 translation_of: Web/API/FeaturePolicy/allowedFeatures
 ---
-<p>{{APIRef("Feature Policy API")}}{{SeeCompatTable}}</p>
+{{APIRef("Feature Policy API")}}{{SeeCompatTable}}
 
-<p>La méthode <strong><code>allowedFeatures()</code></strong> de l'interface {{DOMxRef("FeaturePolicy")}} retourne la liste des noms des directives de fonctionnalités permises par ce Feature Policy. Elle permet l'introspection de directives spécifiques du Feature Policy sur lequel la méthode est appelée. Ainsi, la méthode <code>allowedFeatures()</code> retourne un sous-ensemble de la liste des noms de directives retournée par {{DOMxRef("FeaturePolicy.features", "features()")}}.</p>
+La méthode **`allowedFeatures()`** de l'interface {{DOMxRef("FeaturePolicy")}} retourne la liste des noms des directives de fonctionnalités permises par ce Feature Policy. Elle permet l'introspection de directives spécifiques du Feature Policy sur lequel la méthode est appelée. Ainsi, la méthode `allowedFeatures()` retourne un sous-ensemble de la liste des noms de directives retournée par {{DOMxRef("FeaturePolicy.features", "features()")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">const permissions = <em>FeaturePolicy</em>.allowedFeatures()
-</pre>
+    const permissions = FeaturePolicy.allowedFeatures()
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<p>Aucun.</p>
+Aucun.
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Un tableau de chaines de caractères représentant les noms des directives Feature Policy dont l'utilisation de la fonctionnalité associée est permise par le Feature Policy sur laquel est appelée cette méthode.</p>
+Un tableau de chaines de caractères représentant les noms des directives Feature Policy dont l'utilisation de la fonctionnalité associée est permise par le Feature Policy sur laquel est appelée cette méthode.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>L'exemple suivant affiche toutes les directives permises pour le présent document. Notez que ces fonctionnalités pourraient être restreintes par l'API Permissions, si l'utilisateur n'a pas encore accordé les droits correspondants.</p>
+L'exemple suivant affiche toutes les directives permises pour le présent document. Notez que ces fonctionnalités pourraient être restreintes par l'API Permissions, si l'utilisateur n'a pas encore accordé les droits correspondants.
 
-<pre class="brush: js">// D'abord, récupère l'objet Feature Policy
+```js
+// D'abord, récupère l'objet Feature Policy
 const featurePolicy = document.featurePolicy
 
 // Puis demande la liste des foncitonnalités permises
@@ -38,27 +38,14 @@ const permissions = featurePolicy.allowedFeatures()
 
 for (const directive of permissions)
   console.log(directive)
-</pre>
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName("Feature Policy","","allowsFeature")}}</td>
-   <td>{{Spec2("Feature Policy")}}</td>
-   <td>Initial definition.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                    | Statut                               | Commentaire         |
+| ---------------------------------------------------------------- | ------------------------------------ | ------------------- |
+| {{SpecName("Feature Policy","","allowsFeature")}} | {{Spec2("Feature Policy")}} | Initial definition. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-
-
-<p>{{Compat("api.FeaturePolicy.allowedFeatures")}}</p>
+{{Compat("api.FeaturePolicy.allowedFeatures")}}
diff --git a/files/fr/web/api/featurepolicy/allowsfeature/index.md b/files/fr/web/api/featurepolicy/allowsfeature/index.md
index 52eae7a58d..20c6aec1a6 100644
--- a/files/fr/web/api/featurepolicy/allowsfeature/index.md
+++ b/files/fr/web/api/featurepolicy/allowsfeature/index.md
@@ -8,38 +8,38 @@ tags:
   - Reference
 translation_of: Web/API/FeaturePolicy/allowsFeature
 ---
-<div>{{APIRef("Feature Policy API")}}{{SeeCompatTable}}</div>
+{{APIRef("Feature Policy API")}}{{SeeCompatTable}}
 
-<p>La méthode <strong><code>allowsFeature()</code></strong> de l'interface {{DOMxRef("FeaturePolicy")}} permet l'introspection de directives du Feature Policy sur lequel la méthode est appelée. Elle retourne un {{JSxRef("Boolean")}} valant <code>true</code> si et seulement si la fonctionnalité dont le nom de directive est fourni est permise dans le contexte spécifié (ou le contexte par défaut si aucun contexte n'est spécifié).</p>
+La méthode **`allowsFeature()`** de l'interface {{DOMxRef("FeaturePolicy")}} permet l'introspection de directives du Feature Policy sur lequel la méthode est appelée. Elle retourne un {{JSxRef("Boolean")}} valant `true` si et seulement si la fonctionnalité dont le nom de directive est fourni est permise dans le contexte spécifié (ou le contexte par défaut si aucun contexte n'est spécifié).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">const listePermissions = <em>FeaturePolicy</em>.allowsFeature(&lt;nomDirective&gt;)
-</pre>
+    const listePermissions = FeaturePolicy.allowsFeature(<nomDirective>)
 
-<p>ou</p>
+ou
 
-<pre class="syntaxbox">const listePermissions = <em>FeaturePolicy</em>.allowsFeature(&lt;nomDirective&gt;, &lt;origine&gt;)</pre>
+    const listePermissions = FeaturePolicy.allowsFeature(<nomDirective>, <origine>)
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<h4 id="Nom_de_directive"><code>Nom de directive</code></h4>
+#### `Nom de directive`
 
-<p>Le nom de la directive associée à une fonctionnalité.</p>
+Le nom de la directive associée à une fonctionnalité.
 
-<h4 id="Origine_Optional_inline"><code>Origine</code> {{Optional_inline}}</h4>
+#### `Origine` {{Optional_inline}}
 
-<p>Une URL d'origine sur lequel vérifier la disponibilité de la fonctionnalité. Si omise, sa valeur par défaut est utilisée.</p>
+Une URL d'origine sur lequel vérifier la disponibilité de la fonctionnalité. Si omise, sa valeur par défaut est utilisée.
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Un {{JSxRef("Boolean")}} valant <code>true</code> si et seulement si la fonctionnalité est permise.</p>
+Un {{JSxRef("Boolean")}} valant `true` si et seulement si la fonctionnalité est permise.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Cet exemple demande au document s'il lui est permis par Feature Policy d'utiliser l'API Camera (appareil photo). Notez que l'API Camera pourrait être restreinte par l'API Permissions si l'utilisateur n'a pas encore accordé la permission.</p>
+Cet exemple demande au document s'il lui est permis par Feature Policy d'utiliser l'API Camera (appareil photo). Notez que l'API Camera pourrait être restreinte par l'API Permissions si l'utilisateur n'a pas encore accordé la permission.
 
-<pre class="brush: js">// D'abord, récupère le Feature Policy
+```js
+// D'abord, récupère le Feature Policy
 const featurePolicy = document.featurePolicy
 
 // Demande si la fonctionnalité est disponible
@@ -50,27 +50,14 @@ if (estPermise)
 
 else
   console.log("FP n'autorise pas l'appareil photo.")
-</pre>
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName("Feature Policy","","allowsFeature")}}</td>
-   <td>{{Spec2("Feature Policy")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                    | Statut                               | Commentaire          |
+| ---------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName("Feature Policy","","allowsFeature")}} | {{Spec2("Feature Policy")}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-
-
-<p>{{Compat("api.FeaturePolicy.allowsFeature")}}</p>
+{{Compat("api.FeaturePolicy.allowsFeature")}}
diff --git a/files/fr/web/api/featurepolicy/features/index.md b/files/fr/web/api/featurepolicy/features/index.md
index 5027fa3465..19302a0345 100644
--- a/files/fr/web/api/featurepolicy/features/index.md
+++ b/files/fr/web/api/featurepolicy/features/index.md
@@ -8,28 +8,28 @@ tags:
   - Reference
 translation_of: Web/API/FeaturePolicy/features
 ---
-<div>{{APIRef("Feature Policy API")}}{{SeeCompatTable}}</div>
+{{APIRef("Feature Policy API")}}{{SeeCompatTable}}
 
-<p>La méthode <strong><code>features()</code></strong> de l'interface {{DOMxRef("FeaturePolicy")}} retourne la liste des noms de directives de fonctionnalités supportées par l'agent utilisateur. Une fonctionnalité dont le nom apparait dans la liste pourrait n'être pas autorisée par le Feature Policy du contexte courant d'exécution ou n'être pas accessible à cause des permissions de l'utilisateur.</p>
+La méthode **`features()`** de l'interface {{DOMxRef("FeaturePolicy")}} retourne la liste des noms de directives de fonctionnalités supportées par l'agent utilisateur. Une fonctionnalité dont le nom apparait dans la liste pourrait n'être pas autorisée par le Feature Policy du contexte courant d'exécution ou n'être pas accessible à cause des permissions de l'utilisateur.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">const fonctionnalitésSupportées = <em>FeaturePolicy</em>.features()
-</pre>
+    const fonctionnalitésSupportées = FeaturePolicy.features()
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<p>Aucun.</p>
+Aucun.
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Un tableau de chaines de caractères représentant les noms des directives Feature Policy dont la fonctionnalité associée est supportée par l'agent utilisateur.</p>
+Un tableau de chaines de caractères représentant les noms des directives Feature Policy dont la fonctionnalité associée est supportée par l'agent utilisateur.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Cet exemple affiche dans la console toutes les directives supportées par votre agent utilisateur :</p>
+Cet exemple affiche dans la console toutes les directives supportées par votre agent utilisateur :
 
-<pre class="brush: js">// Récupère l'objet Feature Policy
+```js
+// Récupère l'objet Feature Policy
 const featurePolicy = document.featurePolicy
 
 // Récupère la liste des noms de directives de Feature Policy dont les fonctionnalités sont supportées
@@ -38,27 +38,14 @@ const fonctionnalitésSupportées = featurePolicy.features()
 // Affiche chaque directive dans la console
 for (const directive of fonctionnalitésSupportées)
   console.log(directive)
-</pre>
+```
 
-<h2 id="Spécification">Spécification</h2>
+## Spécification
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName("Feature Policy","","features")}}</td>
-   <td>{{Spec2("Feature Policy")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                | Statut                               | Commentaire          |
+| ------------------------------------------------------------ | ------------------------------------ | -------------------- |
+| {{SpecName("Feature Policy","","features")}} | {{Spec2("Feature Policy")}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-
-
-<p>{{Compat("api.FeaturePolicy.features")}}</p>
+{{Compat("api.FeaturePolicy.features")}}
diff --git a/files/fr/web/api/featurepolicy/getallowlistforfeature/index.md b/files/fr/web/api/featurepolicy/getallowlistforfeature/index.md
index 9d13d0db4c..cf155f8a07 100644
--- a/files/fr/web/api/featurepolicy/getallowlistforfeature/index.md
+++ b/files/fr/web/api/featurepolicy/getallowlistforfeature/index.md
@@ -8,34 +8,34 @@ tags:
   - Reference
 translation_of: Web/API/FeaturePolicy/getAllowlistForFeature
 ---
-<div>{{APIRef("Feature Policy API")}}{{SeeCompatTable}}</div>
+{{APIRef("Feature Policy API")}}{{SeeCompatTable}}
 
-<p>La méthode <strong><code>getAllowlistForFeature()</code></strong> de {{DOMxRef("FeaturePolicy")}} permet d'obtenir la liste des permissions associée à une fonctionnalité pour ce Feature Policy.</p>
+La méthode **`getAllowlistForFeature()`** de {{DOMxRef("FeaturePolicy")}} permet d'obtenir la liste des permissions associée à une fonctionnalité pour ce Feature Policy.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">const listePermissions = <em>FeaturePolicy</em>.getAllowlistForFeature(&lt;fonctionnalité&gt;)
-</pre>
+    const listePermissions = FeaturePolicy.getAllowlistForFeature(<fonctionnalité>)
 
-<h3 id="Parameter">Parameter</h3>
+### Parameter
 
-<h4 id="Nom_de_fonctionnalité">Nom de fonctionnalité</h4>
+#### Nom de fonctionnalité
 
-<p>Un nom de fonctionnalité doit être fourni.</p>
+Un nom de fonctionnalité doit être fourni.
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Une <a href="fr/Web/HTTP/Feature_Policy/Using_Feature_Policy">liste de permissions</a> pour la fonctionnalité demandée est retournée.</p>
+Une [liste de permissions](fr/Web/HTTP/Feature_Policy/Using_Feature_Policy) pour la fonctionnalité demandée est retournée.
 
-<h2 id="Erreurs">Erreurs</h2>
+## Erreurs
 
-<p>La fonction jettera un avertissement si la directive de Feature Policy demandée est inconnue. Toutefois, elle retournera aussi un tableau vide, indiquant que l'utilisation de cette fonctionnalité n'est permise pour aucune origine.</p>
+La fonction jettera un avertissement si la directive de Feature Policy demandée est inconnue. Toutefois, elle retournera aussi un tableau vide, indiquant que l'utilisation de cette fonctionnalité n'est permise pour aucune origine.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Cet exemple affiche toutes les origines à qui la directive Feature Policy permet d'utiliser l'API Camera (appareil photo). Notez que l'API Camera pourrait être restreinte par l'API Permissions si l'utilisateur n'a pas encore accordé la permission.</p>
+Cet exemple affiche toutes les origines à qui la directive Feature Policy permet d'utiliser l'API Camera (appareil photo). Notez que l'API Camera pourrait être restreinte par l'API Permissions si l'utilisateur n'a pas encore accordé la permission.
 
-<pre class="brush: js">// D'abord, récupère l'objet Feature Policy
+```js
+// D'abord, récupère l'objet Feature Policy
 const featurePolicy = document.featurePolicy
 
 // Puis demande la liste pour la fonctionnalité "camera"
@@ -43,27 +43,14 @@ const listePermissions = featurePolicy.getAllowlistForFeature("camera")
 
 for (const origine of listePermissions)
   console.log(origine)
-</pre>
+```
 
-<h2 id="Spécification">Spécification</h2>
+## Spécification
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName("Feature Policy","","getAllowlistForFeature")}}</td>
-   <td>{{Spec2("Feature Policy")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                | Statut                               | Commentaire          |
+| ---------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName("Feature Policy","","getAllowlistForFeature")}} | {{Spec2("Feature Policy")}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-
-
-<p>{{Compat("api.FeaturePolicy.getAllowlistForFeature")}}</p>
+{{Compat("api.FeaturePolicy.getAllowlistForFeature")}}
diff --git a/files/fr/web/api/featurepolicy/index.md b/files/fr/web/api/featurepolicy/index.md
index e63c2d60af..4ce7868824 100644
--- a/files/fr/web/api/featurepolicy/index.md
+++ b/files/fr/web/api/featurepolicy/index.md
@@ -15,54 +15,35 @@ tags:
   - delegation
 translation_of: Web/API/FeaturePolicy
 ---
-<p>{{APIRef("Feature Policy")}}</p>
+{{APIRef("Feature Policy")}}
 
-<p>L'interface <code>FeaturePolicy</code> de l'<a href="/en-US/docs/Web/HTTP/Feature_Policy">API Feature Policy</a> représente l'ensemble des règles appliquées au contexte d'exécution courant.</p>
+L'interface `FeaturePolicy` de l'[API Feature Policy](/en-US/docs/Web/HTTP/Feature_Policy) représente l'ensemble des règles appliquées au contexte d'exécution courant.
 
-<h2 id="Méthodes_de_FeaturePolicy">Méthodes de FeaturePolicy</h2>
+## Méthodes de FeaturePolicy
 
-<dl>
- <dt>{{DOMxRef("FeaturePolicy.allowsFeature")}}</dt>
- <dd>Retourne un Boolean indiquant si une fonctionnalité particulière est activée ou non dans le contexte spécifié.</dd>
- <dt>{{DOMxRef("FeaturePolicy.features")}}</dt>
- <dd>Retourne une liste des noms de toutes les fonctionnalités supportées par l'agent utilisateur. Une fonctionnalité dont le nom est dans la liste pourrait ne pas être autorisée par le Feature Policy du contexte courant d'exécution ou n'être pas accessible à cause des permissions de l'utilisateur.</dd>
- <dt>{{DOMxRef("FeaturePolicy.allowedFeatures")}}</dt>
- <dd>Retourne une liste des noms des fonctionnalités supportées par l'agent utilisateur et autorisées par le Feature Policy. Notee que les fonctionnaltiés dont le nom est dans la liste pourraient toujours être bloquées par l'absence de permission de l'utilisateur.</dd>
-</dl>
+- {{DOMxRef("FeaturePolicy.allowsFeature")}}
+  - : Retourne un Boolean indiquant si une fonctionnalité particulière est activée ou non dans le contexte spécifié.
+- {{DOMxRef("FeaturePolicy.features")}}
+  - : Retourne une liste des noms de toutes les fonctionnalités supportées par l'agent utilisateur. Une fonctionnalité dont le nom est dans la liste pourrait ne pas être autorisée par le Feature Policy du contexte courant d'exécution ou n'être pas accessible à cause des permissions de l'utilisateur.
+- {{DOMxRef("FeaturePolicy.allowedFeatures")}}
+  - : Retourne une liste des noms des fonctionnalités supportées par l'agent utilisateur et autorisées par le Feature Policy. Notee que les fonctionnaltiés dont le nom est dans la liste pourraient toujours être bloquées par l'absence de permission de l'utilisateur.
 
-<dl>
- <dt>{{DOMxRef("FeaturePolicy.getAllowlistForFeature")}}</dt>
- <dd>Retourne la liste de permissions pour la fonctionnalité spécifiée.</dd>
-</dl>
+<!---->
 
-<h2 id="Spécification">Spécification</h2>
+- {{DOMxRef("FeaturePolicy.getAllowlistForFeature")}}
+  - : Retourne la liste de permissions pour la fonctionnalité spécifiée.
 
-<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("Feature Policy")}}</td>
-   <td>{{Spec2("Feature Policy")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+## Spécification
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+| Spécification                            | Statut                               | Commentaire          |
+| ---------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName("Feature Policy")}} | {{Spec2("Feature Policy")}} | Définition initiale. |
 
+## Compatibilité des navigateurs
 
+{{Compat("api.FeaturePolicy")}}
 
-<p>{{Compat("api.FeaturePolicy")}}</p>
+## Voir aussi
 
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{HTTPHeader("Feature-Policy")}}</li>
- <li><a href="/en-US/docs/Web/Privacy">Anonymat et vie privée, permissions et informations sur la sécurité</a></li>
-</ul>
+- {{HTTPHeader("Feature-Policy")}}
+- [Anonymat et vie privée, permissions et informations sur la sécurité](/en-US/docs/Web/Privacy)
diff --git a/files/fr/web/api/federatedcredential/federatedcredential/index.md b/files/fr/web/api/federatedcredential/federatedcredential/index.md
index ce4da760af..aaae528754 100644
--- a/files/fr/web/api/federatedcredential/federatedcredential/index.md
+++ b/files/fr/web/api/federatedcredential/federatedcredential/index.md
@@ -9,46 +9,30 @@ tags:
   - Reference
 translation_of: Web/API/FederatedCredential/FederatedCredential
 ---
-<p>{{APIRef("")}}{{Non-standard_header}}</p>
+{{APIRef("")}}{{Non-standard_header}}
 
-<p>Le constructeur <strong><code>FederatedCredential</code></strong> permet de créer un nouvel objet {{domxref("FederatedCredential")}}.</p>
+Le constructeur **`FederatedCredential`** permet de créer un nouvel objet {{domxref("FederatedCredential")}}.
 
-<p>Pour les navigateurs qui le prennent en charge, une instance de cette classe pourra être passée comme propriété <code>credential</code> pour l'objet <code>init</code> utilisé comme argument pour {{domxref('fetch')}}.</p>
+Pour les navigateurs qui le prennent en charge, une instance de cette classe pourra être passée comme propriété `credential` pour l'objet `init` utilisé comme argument pour {{domxref('fetch')}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var mesCredentials = new FederatedCredential(init)</pre>
+    var mesCredentials = new FederatedCredential(init)
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>init</code></dt>
- <dd>Les propriétés de cet objet sont :
- <ul>
-  <li><code>provider</code> : une chaîne de caractères {{domxref("USVString")}} identifiant le fournisseur d'information d'authentification.</li>
- </ul>
- </dd>
-</dl>
+- `init`
 
-<h2 id="Spécifications">Spécifications</h2>
+  - : Les propriétés de cet objet sont :
 
-<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('Credential Management')}}</td>
-   <td>{{Spec2('Credential Management')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+    - `provider` : une chaîne de caractères {{domxref("USVString")}} identifiant le fournisseur d'information d'authentification.
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Spécifications
 
-<p>{{Compat("api.FederatedCredential.FederatedCredential")}}</p>
+| Spécification                                    | État                                         | Commentaires         |
+| ------------------------------------------------ | -------------------------------------------- | -------------------- |
+| {{SpecName('Credential Management')}} | {{Spec2('Credential Management')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.FederatedCredential.FederatedCredential")}}
diff --git a/files/fr/web/api/federatedcredential/index.md b/files/fr/web/api/federatedcredential/index.md
index 63f8e2f25c..58a720bd98 100644
--- a/files/fr/web/api/federatedcredential/index.md
+++ b/files/fr/web/api/federatedcredential/index.md
@@ -8,39 +8,36 @@ tags:
   - Reference
 translation_of: Web/API/FederatedCredential
 ---
-<p>{{SeeCompatTable}}{{APIRef("Credential Management API")}}</p>
+{{SeeCompatTable}}{{APIRef("Credential Management API")}}
 
-<p>L'interface <strong><code>FederatedCredential</code></strong>, rattachée à l'<a href="/en-US/docs/Web/API/Credential_Management_API">API Credential Management</a>, donne des détails quant aux informations d'authentification fournies par un fournisseur d'identité fédéré. Un fournisseur d'identité fédéré est une entité en laquelle un site web à confiance pour authentifier un utilisateur et qui fournit une API à cet effet. <a href="http://openid.net/developers/specs/">OpenID Connect</a> est un exemple de <em>framework</em> pour construire un fournisseur d'identité fédéré.</p>
+L'interface **`FederatedCredential`**, rattachée à l'[API Credential Management](/en-US/docs/Web/API/Credential_Management_API), donne des détails quant aux informations d'authentification fournies par un fournisseur d'identité fédéré. Un fournisseur d'identité fédéré est une entité en laquelle un site web à confiance pour authentifier un utilisateur et qui fournit une API à cet effet. [OpenID Connect](http://openid.net/developers/specs/) est un exemple de _framework_ pour construire un fournisseur d'identité fédéré.
 
-<p>Pour les navigateurs qui le prennent en charge, une instance de cette interface pourra être passée comme propriété <code>credential</code> de l'objet <code>init</code> pour la méthode globale {{domxref('fetch')}}.</p>
+Pour les navigateurs qui le prennent en charge, une instance de cette interface pourra être passée comme propriété `credential` de l'objet `init` pour la méthode globale {{domxref('fetch')}}.
 
-<h2 id="Constructeur">Constructeur</h2>
+## Constructeur
 
-<dl>
- <dt>{{domxref("FederatedCredential.FederatedCredential()","FederatedCredential()")}}</dt>
- <dd>Crée un nouvel objet <code>FederatedCredential</code>.</dd>
-</dl>
+- {{domxref("FederatedCredential.FederatedCredential()","FederatedCredential()")}}
+  - : Crée un nouvel objet `FederatedCredential`.
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<p><em>Hérite des propriétés de l'interface parente : {{domxref("Credential")}}.</em></p>
+_Hérite des propriétés de l'interface parente : {{domxref("Credential")}}._
 
-<dl>
- <dt>{{domxref("FederatedCredential.provider")}} {{readonlyInline}}</dt>
- <dd>Une chaîne de caractères {{domxref("USVString")}} qui contient l'information sur le fournisseur d'authentification fédéré.</dd>
-</dl>
+- {{domxref("FederatedCredential.provider")}} {{readonlyInline}}
+  - : Une chaîne de caractères {{domxref("USVString")}} qui contient l'information sur le fournisseur d'authentification fédéré.
 
-<h3 id="Gestionnaires_d'évènements">Gestionnaires d'évènements</h3>
+### Gestionnaires d'évènements
 
-<p>Aucun.</p>
+Aucun.
 
-<h2 id="Méthodes">Méthodes</h2>
+## Méthodes
 
-<p>Aucun.</p>
+Aucun.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: js">var cred = new FederatedCredential({
+```js
+var cred = new FederatedCredential({
   id: id,
   name: name,
   provider: 'https://account.google.com',
@@ -51,27 +48,15 @@ translation_of: Web/API/FederatedCredential
 navigator.credentials.store(cred)
   .then(function() {
   // Faire quelque chose
-});</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('Credential Management')}}</td>
-   <td>{{Spec2('Credential Management')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.FederatedCredential")}}</p>
+});
+```
+
+## Spécifications
+
+| Spécification                                    | État                                         | Commentaires         |
+| ------------------------------------------------ | -------------------------------------------- | -------------------- |
+| {{SpecName('Credential Management')}} | {{Spec2('Credential Management')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.FederatedCredential")}}
diff --git a/files/fr/web/api/federatedcredential/provider/index.md b/files/fr/web/api/federatedcredential/provider/index.md
index de45d5fda4..bc1ae5dbf3 100644
--- a/files/fr/web/api/federatedcredential/provider/index.md
+++ b/files/fr/web/api/federatedcredential/provider/index.md
@@ -9,41 +9,30 @@ tags:
   - Reference
 translation_of: Web/API/FederatedCredential/provider
 ---
-<p>{{SeeCompatTable}}{{APIRef("")}}</p>
+{{SeeCompatTable}}{{APIRef("")}}
 
-<p>La propriété <strong><code>provider</code></strong>, rattachée à l'interface {{domxref("FederatedCredential")}}, fournit une chaîne de caractères {{domxref("USVString")}} qui décrit un fournisseur d'identité fédéré.</p>
+La propriété **`provider`**, rattachée à l'interface {{domxref("FederatedCredential")}}, fournit une chaîne de caractères {{domxref("USVString")}} qui décrit un fournisseur d'identité fédéré.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var provider = FederatedCredential.provider</pre>
+    var provider = FederatedCredential.provider
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>Une chaîne de caractères {{domxref("USVString")}} identifiant un fournisseur d'identité fédéré.</p>
+Une chaîne de caractères {{domxref("USVString")}} identifiant un fournisseur d'identité fédéré.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: js">// TBD</pre>
+```js
+// TBD
+```
 
-<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('Credential Management')}}</td>
-   <td>{{Spec2('Credential Management')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                    | État                                         | Commentaires         |
+| ------------------------------------------------ | -------------------------------------------- | -------------------- |
+| {{SpecName('Credential Management')}} | {{Spec2('Credential Management')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.FederatedCredential.provider")}}</p>
+{{Compat("api.FederatedCredential.provider")}}
diff --git a/files/fr/web/api/fetch/index.md b/files/fr/web/api/fetch/index.md
index 30544929ec..a6820a8437 100644
--- a/files/fr/web/api/fetch/index.md
+++ b/files/fr/web/api/fetch/index.md
@@ -14,96 +14,77 @@ tags:
 translation_of: Web/API/WindowOrWorkerGlobalScope/fetch
 original_slug: Web/API/WindowOrWorkerGlobalScope/fetch
 ---
-<p>{{APIRef("Fetch")}}</p>
+{{APIRef("Fetch")}}
 
-<p>La méthode <code><strong>fetch()</strong></code> du mixin {{domxref("WindowOrWorkerGlobalScope")}} démarre le chargement d'une ressource sur le réseau et retourne une promesse qui est résolue dès que la réponse est disponible. La promesse résoud l'objet {{domxref("Response")}} représentant la réponse de votre requête. Cette promesse n'échoue pas en cas d'erreur HTTP, elle n'échoue que sur les problèmes de réseau. Vous devez utiliser un gestionnaire <code>then</code> pour identifier les erreurs HTTP.</p>
+La méthode **`fetch()`** du mixin {{domxref("WindowOrWorkerGlobalScope")}} démarre le chargement d'une ressource sur le réseau et retourne une promesse qui est résolue dès que la réponse est disponible. La promesse résoud l'objet {{domxref("Response")}} représentant la réponse de votre requête. Cette promesse n'échoue pas en cas d'erreur HTTP, elle n'échoue que sur les problèmes de réseau. Vous devez utiliser un gestionnaire `then` pour identifier les erreurs HTTP.
 
-<p><code>WindowOrWorkerGlobalScope</code> est aussi bien implémenté par {{domxref("Window")}} que par {{domxref("WorkerGlobalScope")}}, ce qui signifie que la méthode <code>fetch()</code> est disponible dans la plupart des cas où vous pourriez en avoir besoin.</p>
+`WindowOrWorkerGlobalScope` est aussi bien implémenté par {{domxref("Window")}} que par {{domxref("WorkerGlobalScope")}}, ce qui signifie que la méthode `fetch()` est disponible dans la plupart des cas où vous pourriez en avoir besoin.
 
-<p>Une promesse {{domxref("GlobalFetch.fetch","fetch()")}} n'est rejetée que quand un problème de réseau est rencontré, même si en réalité cela signifie généralement qu'il y a un problème de permissions ou quelque chose de similaire. La promesse ne sera pas rejetée en cas d'erreur HTTP (<code>404</code>, etc.) Pour cela, un gestionnaire <code>then()</code> doit vérifier que la propriété {{domxref("Response.ok")}} ait bien pour valeur <code>true</code> et/ou la valeur de la propriété {{domxref("Response.status")}}.</p>
+Une promesse {{domxref("GlobalFetch.fetch","fetch()")}} n'est rejetée que quand un problème de réseau est rencontré, même si en réalité cela signifie généralement qu'il y a un problème de permissions ou quelque chose de similaire. La promesse ne sera pas rejetée en cas d'erreur HTTP (`404`, etc.) Pour cela, un gestionnaire `then()` doit vérifier que la propriété {{domxref("Response.ok")}} ait bien pour valeur `true` et/ou la valeur de la propriété {{domxref("Response.status")}}.
 
-<p>La méthode <code>fetch()</code> est contrôlée par la directive <code>connect-src</code> de l'entête <a href="/fr/docs/Web/HTTP/Headers/Content-Security-Policy">Content Security Policy</a> plutôt que par la directive de la ressource qui est récupérée.</p>
+La méthode `fetch()` est contrôlée par la directive `connect-src` de l'entête [Content Security Policy](/fr/docs/Web/HTTP/Headers/Content-Security-Policy) plutôt que par la directive de la ressource qui est récupérée.
 
-<div class="note">
-<p><strong>Note :</strong> Les paramètres de la méthode <code>fetch()</code> sont identiques à ceux du contructeur d'une {{domxref("Request.Request","Request()")}}.</p>
-</div>
+> **Note :** Les paramètres de la méthode `fetch()` sont identiques à ceux du contructeur d'une {{domxref("Request.Request","Request()")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">const <em>fetchResponsePromise</em> = Promise&lt;Response&gt; fetch(<em>entrée</em>[, <em>init</em>]);</pre>
+    const fetchResponsePromise = Promise<Response> fetch(entrée[, init]);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code><em>entrée</em></code></dt>
- <dd>Définit la ressource que vous voulez obtenir. Cela peut être :
- <ul>
-  <li>Un {{domxref("USVString")}} qui contient l'URL de la ressource à obtenir. Certains navigateurs acceptent <code>blob:</code> et <code>data:</code>.</li>
-  <li>Un objet {{domxref("Request")}}.</li>
- </ul>
- </dd>
- <dt><code><em>init</em></code> {{optional_inline}}</dt>
- <dd>
-  <p>Un objet qui contient les paramètres de votre requête. Les options possibles sont :</p>
+- `entrée`
 
-  <dl>
-    <dt><code>method</code></dt>
-    <dd>La méthode de la requête, par exemple <code>GET</code> ou <code>POST</code>.</dd>
+  - : Définit la ressource que vous voulez obtenir. Cela peut être :
 
-    <dt><code>headers</code></dt>
-    <dd>Les entêtes à ajouter à votre requête, contenues dans un objet {{domxref("Headers")}} ou dans un objet avec des {{domxref("ByteString")}} pour valeurs.</dd>
+    - Un {{domxref("USVString")}} qui contient l'URL de la ressource à obtenir. Certains navigateurs acceptent `blob:` et `data:`.
+    - Un objet {{domxref("Request")}}.
 
-    <dt><code>body</code></dt>
-    <dd>Le corps de votre requête. Cela peut être un {{domxref("Blob")}}, un {{domxref("BufferSource")}}, un {{domxref("FormData")}}, un {{domxref("URLSearchParams")}}, ou un {{domxref("USVString")}}. Notez cependant qu'une requête avec <code>GET</code> ou <code>HEAD</code> pour méthode ne peut pas avoir de corps.</dd>
+- `init` {{optional_inline}}
 
-    <dt><code>mode</code></dt>
-    <dd>Le mode à utiliser pour cette requête, par exemple <code>cors</code>, <code>no-cors</code>, ou <code>same-origin.</code></dd>
+  - : Un objet qui contient les paramètres de votre requête. Les options possibles sont :
 
-    <dt><code>credentials</code></dt>
-    <dd>Les identifiants à utiliser pour cette requête : <code>omit</code>, <code>same-origin</code>, ou <code>include</code>. Pour envoyer automatiquement les cookies pour le domaine actuel, cette option doit être définie. À partir de Chrome 50, cette propriété peut aussi prendre un objet {{domxref("FederatedCredential")}} ou une instance de {{domxref("PasswordCredential")}}.</dd>
+    - `method`
+      - : La méthode de la requête, par exemple `GET` ou `POST`.
+    - `headers`
+      - : Les entêtes à ajouter à votre requête, contenues dans un objet {{domxref("Headers")}} ou dans un objet avec des {{domxref("ByteString")}} pour valeurs.
+    - `body`
+      - : Le corps de votre requête. Cela peut être un {{domxref("Blob")}}, un {{domxref("BufferSource")}}, un {{domxref("FormData")}}, un {{domxref("URLSearchParams")}}, ou un {{domxref("USVString")}}. Notez cependant qu'une requête avec `GET` ou `HEAD` pour méthode ne peut pas avoir de corps.
+    - `mode`
+      - : Le mode à utiliser pour cette requête, par exemple `cors`, `no-cors`, ou `same-origin.`
+    - `credentials`
+      - : Les identifiants à utiliser pour cette requête : `omit`, `same-origin`, ou `include`. Pour envoyer automatiquement les cookies pour le domaine actuel, cette option doit être définie. À partir de Chrome 50, cette propriété peut aussi prendre un objet {{domxref("FederatedCredential")}} ou une instance de {{domxref("PasswordCredential")}}.
+    - `cache`
+      - : Le comportement du cache pour cette requête : `default`, `no-store`, `reload`, `no-cache`, `force-cache`, ou `only-if-cached`.
+    - `redirect`
+      - : Le mode de redirection à adopter pour cette requête : `follow` (suivre les redirections automatiquement), `error` (abandonner avec une erreur si une redirection a lieu), ou `manual` (gérer les redirections manuellement). Dans Chrome, la valeur par défaut était `follow` avant Chrome 47, mais à partir de cette version, c'est `manual`.
+    - `referrer`
+      - : Un USVString qui vaut `no-referrer`, `client`, ou qui contient une URL. La valeur par défaut est `client`.
+    - `referrerPolicy`
+      - : Spécifie la valeur de l'entête HTTP referer. Cela peut être `no-referrer`, `no-referrer-when-downgrade`, `origin`, `origin-when-cross-origin` ou `unsafe-url`.
+    - `integrity`
+      - : Contient la valeur de [l'intégrité de la sous-ressource](/fr/docs/Web/Security/Subresource_Integrity) de la requête (par exemple, `sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=`).
+    - `keepalive`
+      - : Peut être utilisée pour autoriser la requête à se poursuivre après la fermeture de la page. Une requête avec ce paramètre est équivalente à l'API {{domxref("Navigator.sendBeacon()")}}.
+    - `signal`
+      - : Une instance de {{domxref("AbortSignal")}} vous permettant de communiquer avec une requête et de l'interrompre si vous le souhaitez via un {{domxref("AbortController")}}.
 
-    <dt><code>cache</code></dt>
-    <dd>Le comportement du cache pour cette requête : <code>default</code>, <code>no-store</code>, <code>reload</code>, <code>no-cache</code>, <code>force-cache</code>, ou <code>only-if-cached</code>.</dd>
+### Valeur retournée
 
-    <dt><code>redirect</code></dt>
-    <dd>Le mode de redirection à adopter pour cette requête : <code>follow</code> (suivre les redirections automatiquement), <code>error</code> (abandonner avec une erreur si une redirection a lieu), ou <code>manual</code> (gérer les redirections manuellement). Dans Chrome, la valeur par défaut était <code>follow</code> avant Chrome 47, mais à partir de cette version, c'est <code>manual</code>.</dd>
+Une {{domxref("Promise")}} qui se résoud avec un object {{domxref("Response")}}.
 
-    <dt><code>referrer</code></dt>
-    <dd>Un USVString qui vaut <code>no-referrer</code>, <code>client</code>, ou qui contient une URL. La valeur par défaut est <code>client</code>.</dd>
+### Exceptions
 
-    <dt><code>referrerPolicy</code></dt>
-    <dd>Spécifie la valeur de l'entête HTTP referer. Cela peut être <code>no-referrer</code>, <code>no-referrer-when-downgrade</code>, <code>origin</code>, <code>origin-when-cross-origin</code> ou <code>unsafe-url</code>.</dd>
+- `AbortError`
+  - : La requête a été interrompue à cause d'un appel à la méthode {{domxref("AbortController.abort", "abort()")}} de {{domxref("AbortController")}}.
+- `TypeError`
+  - : L'URL spécifié inclut des identifiants. Ces informations devraient plutôt être fournises via l'en-tête HTTP {{HTTPHeader("Authorization")}}.
 
-    <dt><code>integrity</code></dt>
-    <dd>Contient la valeur de <a href="/fr/docs/Web/Security/Subresource_Integrity">l'intégrité de la sous-ressource</a> de la requête (par exemple, <code>sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=</code>).</dd>
+## Exemple
 
-    <dt><code>keepalive</code></dt>
-    <dd>Peut être utilisée pour autoriser la requête à se poursuivre après la fermeture de la page. Une requête avec ce paramètre est équivalente à l'API {{domxref("Navigator.sendBeacon()")}}.</dd>
+Dans notre [exemple de requête avec fetch](https://github.com/mdn/fetch-examples/tree/gh-pages/fetch-request) (voir [cet exemple en direct](http://mdn.github.io/fetch-examples/fetch-request/)) nous créons une nouvelle {{domxref("Request")}} avec le constructeur correspondant, puis on l'envoie en appellant `fetch()`. Comme nous récupérons une image, nous utilisons la méthode {{domxref("Body.blob()")}} sur la réponse pour lui donner le bon type MIME pour qu'elle soit gérée correctement, puis l'on crée l'URL correspondant à cet objet et on l'affiche dans un élément {{htmlelement("img")}}.
 
-    <dt><code>signal</code></dt>
-    <dd>Une instance de {{domxref("AbortSignal")}} vous permettant de communiquer avec une requête et de l'interrompre si vous le souhaitez via un {{domxref("AbortController")}}.</dd>
-  </dl>
-</dd>
-</dl>
-
-<h3 id="Valeur_retournée">Valeur retournée</h3>
-
-<p>Une {{domxref("Promise")}} qui se résoud avec un object {{domxref("Response")}}.</p>
-
-<h3 id="Exceptions">Exceptions</h3>
-
-<dl>
- <dt><code>AbortError</code></dt>
- <dd>La requête a été interrompue à cause d'un appel à la méthode {{domxref("AbortController.abort", "abort()")}} de {{domxref("AbortController")}}.</dd>
- <dt><code>TypeError</code></dt>
- <dd>L'URL spécifié inclut des identifiants. Ces informations devraient plutôt être fournises via l'en-tête HTTP {{HTTPHeader("Authorization")}}.</dd>
-</dl>
-
-<h2 id="Exemple">Exemple</h2>
-
-<p>Dans notre <a href="https://github.com/mdn/fetch-examples/tree/gh-pages/fetch-request">exemple de requête avec fetch</a> (voir <a href="http://mdn.github.io/fetch-examples/fetch-request/">cet exemple en direct</a>) nous créons une nouvelle {{domxref("Request")}} avec le constructeur correspondant, puis on l'envoie en appellant <code>fetch()</code>. Comme nous récupérons une image, nous utilisons la méthode {{domxref("Body.blob()")}} sur la réponse pour lui donner le bon type MIME pour qu'elle soit gérée correctement, puis l'on crée l'URL correspondant à cet objet et on l'affiche dans un élément {{htmlelement("img")}}.</p>
-
-<pre class="brush: js">const monImage = document.querySelector('img');
+```js
+const monImage = document.querySelector('img');
 
 let maRequete = new Request('fleurs.jpg');
 
@@ -117,11 +98,13 @@ fetch(maRequete)
 .then(function(reponse) {
   let URLobjet = URL.createObjectURL(reponse);
   monImage.src = URLobjet;
-});</pre>
+});
+```
 
-<p>Dans notre <a href="https://github.com/mdn/fetch-examples/tree/gh-pages/fetch-with-init-then-request">exemple fetch avec initialisation et requête</a> (voir <a href="http://mdn.github.io/fetch-examples/fetch-with-init-then-request/">cet exemple en direct</a>) nous faisons la même chose à la différence que nous passons aussi un objet d'initalisation à la méthode <code>fetch</code> :</p>
+Dans notre [exemple fetch avec initialisation et requête](https://github.com/mdn/fetch-examples/tree/gh-pages/fetch-with-init-then-request) (voir [cet exemple en direct](http://mdn.github.io/fetch-examples/fetch-with-init-then-request/)) nous faisons la même chose à la différence que nous passons aussi un objet d'initalisation à la méthode `fetch` :
 
-<pre class="brush: js">const monImage = document.querySelector('img');
+```js
+const monImage = document.querySelector('img');
 
 let mesEntetes = new Headers();
 mesEntetes.append('Content-Type', 'image/jpeg');
@@ -135,15 +118,19 @@ let maRequete = new Request('fleurs.jpg');
 
 fetch(maRequete, monInit).then(function(reponse) {
   ...
-});</pre>
+});
+```
 
-<p>Notez que vous pouvez aussi passer l'objet d'initialisation au constructeur de la requête pour obtenir le même effet, par exemple :</p>
+Notez que vous pouvez aussi passer l'objet d'initialisation au constructeur de la requête pour obtenir le même effet, par exemple :
 
-<pre class="brush: js">let maRequete = new Request('fleurs.jpg', monInit);</pre>
+```js
+let maRequete = new Request('fleurs.jpg', monInit);
+```
 
-<p>Vous pouvez aussi utiliser un objet litéral comme en-têtes dans votre objet d'initalisation.</p>
+Vous pouvez aussi utiliser un objet litéral comme en-têtes dans votre objet d'initalisation.
 
-<pre class="brush: js">const monInit = { method: 'GET',
+```js
+const monInit = { method: 'GET',
                headers: {
                    'Content-Type': 'image/jpeg'
                },
@@ -151,44 +138,23 @@ fetch(maRequete, monInit).then(function(reponse) {
                cache: 'default' };
 
 let maRequete = new Request('fleurs.jpg', monInit);
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Fetch','#fetch-method','fetch()')}}</td>
-   <td>{{Spec2('Fetch')}}</td>
-   <td>Définie dans un <code>WindowOrWorkerGlobalScope</code> dans la nouvelle spécification.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('Fetch','#dom-global-fetch','fetch()')}}</td>
-   <td>{{Spec2('Fetch')}}</td>
-   <td>Définition initiale</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('Credential Management')}}</td>
-   <td>{{Spec2('Credential Management')}}</td>
-   <td>Ajoute la possiblité d'utiliser une instance de {{domxref("FederatedCredential")}} ou de {{domxref("PasswordCredential")}} comme valeur de <code>init.credentials</code>.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/Fetch_API">Fetch API</a></li>
- <li><a href="/fr/docs/Web/API/Service_Worker_API">ServiceWorker API</a></li>
- <li><a href="/fr/docs/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
- <li><a href="/fr/docs/HTTP">HTTP</a></li>
-</ul>
+```
+
+## Spécifications
+
+| Specification                                                        | Statut                                       | Commentaire                                                                                                                                                                         |
+| -------------------------------------------------------------------- | -------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('Fetch','#fetch-method','fetch()')}}     | {{Spec2('Fetch')}}                     | Définie dans un `WindowOrWorkerGlobalScope` dans la nouvelle spécification.                                                                                                         |
+| {{SpecName('Fetch','#dom-global-fetch','fetch()')}} | {{Spec2('Fetch')}}                     | Définition initiale                                                                                                                                                                 |
+| {{SpecName('Credential Management')}}                     | {{Spec2('Credential Management')}} | Ajoute la possiblité d'utiliser une instance de {{domxref("FederatedCredential")}} ou de {{domxref("PasswordCredential")}} comme valeur de `init.credentials`. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}
+
+## Voir aussi
+
+- [Fetch API](/fr/docs/Web/API/Fetch_API)
+- [ServiceWorker API](/fr/docs/Web/API/Service_Worker_API)
+- [HTTP access control (CORS)](/fr/docs/HTTP/Access_control_CORS)
+- [HTTP](/fr/docs/HTTP)
diff --git a/files/fr/web/api/fetch_api/basic_concepts/index.md b/files/fr/web/api/fetch_api/basic_concepts/index.md
index 93a268d89b..2f05f79f76 100644
--- a/files/fr/web/api/fetch_api/basic_concepts/index.md
+++ b/files/fr/web/api/fetch_api/basic_concepts/index.md
@@ -3,62 +3,66 @@ title: 'Fetch : concepts de départ'
 slug: Web/API/Fetch_API/Basic_concepts
 translation_of: Web/API/Fetch_API/Basic_concepts
 ---
-<p>{{DefaultAPISidebar("Fetch API")}}{{draft}}</p>
+{{DefaultAPISidebar("Fetch API")}}{{draft}}
 
-<p>L'API <a href="/en-US/docs/Web/API/Fetch_API">Fetch </a>fournit une interface pour récupérer des ressources (y compris depuis le réseau). Elle paraîtra familière à quiconque aura déjà utilisé {{domxref("XMLHttpRequest")}}, mais elle fournit un jeu de fonctionnalités plus puissantes et plus souples. Cet article explique quelques uns des principes de base de l'API Fetch.</p>
+L'API [Fetch ](/en-US/docs/Web/API/Fetch_API)fournit une interface pour récupérer des ressources (y compris depuis le réseau). Elle paraîtra familière à quiconque aura déjà utilisé {{domxref("XMLHttpRequest")}}, mais elle fournit un jeu de fonctionnalités plus puissantes et plus souples. Cet article explique quelques uns des principes de base de l'API Fetch.
 
-<div class="note">
-<p><strong>Note :</strong> This article will be added to over time. If you find a Fetch concept that you feel needs explaining better, let someone know on the <a href="https://discourse.mozilla-community.org/c/mdn">MDN discussion forum</a>, or <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a> (#mdn room.)</p>
-</div>
+> **Note :** This article will be added to over time. If you find a Fetch concept that you feel needs explaining better, let someone know on the [MDN discussion forum](https://discourse.mozilla-community.org/c/mdn), or [Mozilla IRC](https://wiki.mozilla.org/IRC) (#mdn room.)
 
-<h2 id="In_a_nutshell">In a nutshell</h2>
+## In a nutshell
 
-<p>At the heart of Fetch are the Interface abstractions of HTTP {{domxref("Request")}}s, {{domxref("Response")}}s, {{domxref("Headers")}}, and {{domxref("Body")}} payloads, along with a {{domxref("GlobalFetch.fetch","global fetch")}} method for initiating asynchronous resource requests. Because the main components of HTTP are abstracted as JavaScript objects, it is easy for other APIs to make use of such functionality.</p>
+At the heart of Fetch are the Interface abstractions of HTTP {{domxref("Request")}}s, {{domxref("Response")}}s, {{domxref("Headers")}}, and {{domxref("Body")}} payloads, along with a {{domxref("GlobalFetch.fetch","global fetch")}} method for initiating asynchronous resource requests. Because the main components of HTTP are abstracted as JavaScript objects, it is easy for other APIs to make use of such functionality.
 
-<p><a href="/en-US/docs/Web/API/ServiceWorker_API">Service Workers</a> is an example of an API that makes heavy use of Fetch.</p>
+[Service Workers](/en-US/docs/Web/API/ServiceWorker_API) is an example of an API that makes heavy use of Fetch.
 
-<p>Fetch takes the asynchronous nature of such requests one step further. The API is completely {{jsxref("Promise")}}-based.</p>
+Fetch takes the asynchronous nature of such requests one step further. The API is completely {{jsxref("Promise")}}-based.
 
-<h2 id="Guard">Guard</h2>
+## Guard
 
-<p>Guard is a feature of {{domxref("Headers")}} objects, with possible values of <code>immutable</code>, <code>request</code>, <code>request-no-cors</code>, <code>response</code>, or <code>none</code>, depending on where the header is used.</p>
+Guard is a feature of {{domxref("Headers")}} objects, with possible values of `immutable`, `request`, `request-no-cors`, `response`, or `none`, depending on where the header is used.
 
-<p>When a new {{domxref("Headers")}} object is created using the {{domxref("Headers.Headers","Headers()")}} {{glossary("constructor")}}, its guard is set to <code>none</code> (the default). When a {{domxref("Request")}} or {{domxref("Response")}} object is created, it has an associated {{domxref("Headers")}} object whose guard is set as summarized below:</p>
+When a new {{domxref("Headers")}} object is created using the {{domxref("Headers.Headers","Headers()")}} {{glossary("constructor")}}, its guard is set to `none` (the default). When a {{domxref("Request")}} or {{domxref("Response")}} object is created, it has an associated {{domxref("Headers")}} object whose guard is set as summarized below:
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th scope="row">new object's type</th>
-   <th scope="col">creating constructor</th>
-   <th scope="col">guard setting of associated {{domxref("Headers")}} object</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td rowspan="2">{{domxref("Request")}}</td>
-   <td>{{domxref("Request.Request","Request()")}}</td>
-   <td><code>request</code></td>
-  </tr>
-  <tr>
-   <td>{{domxref("Request.Request","Request()")}} with {{domxref("Request.mode","mode")}} of <code>no-cors</code></td>
-   <td><code>request-no-cors</code></td>
-  </tr>
-  <tr>
-   <td rowspan="2">{{domxref("Response")}}</td>
-   <td>{{domxref("Response.Response","Response()")}}</td>
-   <td><code>response</code></td>
-  </tr>
-  <tr>
-   <td>{{domxref("Response.error","error()")}} or {{domxref("Response.redirect","redirect()")}} methods</td>
-   <td><code>immutable</code></td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th scope="row">new object's type</th>
+      <th scope="col">creating constructor</th>
+      <th scope="col">
+        guard setting of associated {{domxref("Headers")}} object
+      </th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td rowspan="2">{{domxref("Request")}}</td>
+      <td>{{domxref("Request.Request","Request()")}}</td>
+      <td><code>request</code></td>
+    </tr>
+    <tr>
+      <td>
+        {{domxref("Request.Request","Request()")}} with
+        {{domxref("Request.mode","mode")}} of <code>no-cors</code>
+      </td>
+      <td><code>request-no-cors</code></td>
+    </tr>
+    <tr>
+      <td rowspan="2">{{domxref("Response")}}</td>
+      <td>{{domxref("Response.Response","Response()")}}</td>
+      <td><code>response</code></td>
+    </tr>
+    <tr>
+      <td>
+        {{domxref("Response.error","error()")}} or
+        {{domxref("Response.redirect","redirect()")}} methods
+      </td>
+      <td><code>immutable</code></td>
+    </tr>
+  </tbody>
 </table>
 
-<p>A header's guard affects the {{domxref("Headers.set","set()")}}, {{domxref("Headers.delete","delete()")}}, and {{domxref("Headers.append","append()")}} methods which change the header's contents. A <code>TypeError</code> is thrown if you try to modify a {{domxref("Headers")}} object whose guard is <code>immutable</code>. However, the operation will work if</p>
+A header's guard affects the {{domxref("Headers.set","set()")}}, {{domxref("Headers.delete","delete()")}}, and {{domxref("Headers.append","append()")}} methods which change the header's contents. A `TypeError` is thrown if you try to modify a {{domxref("Headers")}} object whose guard is `immutable`. However, the operation will work if
 
-<ul>
- <li>guard is <code>request</code> and the header <var>name</var> isn't a {{Glossary("forbidden header name")}} .</li>
- <li>guard is <code>request-no-cors</code> and the header <var>name</var>/<var>value</var> is a {{Glossary("simple header")}} .</li>
- <li>guard is <code>response</code> and the header <var>name</var> isn't a {{Glossary("forbidden response header name")}} .</li>
-</ul>
+- guard is `request` and the header _name_ isn't a {{Glossary("forbidden header name")}} .
+- guard is `request-no-cors` and the header _name_/_value_ is a {{Glossary("simple header")}} .
+- guard is `response` and the header _name_ isn't a {{Glossary("forbidden response header name")}} .
diff --git a/files/fr/web/api/fetch_api/index.md b/files/fr/web/api/fetch_api/index.md
index 49ae613fb1..7a6a5d82d2 100644
--- a/files/fr/web/api/fetch_api/index.md
+++ b/files/fr/web/api/fetch_api/index.md
@@ -3,79 +3,60 @@ title: API Fetch
 slug: Web/API/Fetch_API
 translation_of: Web/API/Fetch_API
 ---
-<p>{{DefaultAPISidebar("Fetch API")}}</p>
+{{DefaultAPISidebar("Fetch API")}}
 
-<p>L'API Fetch fournit une interface pour la récupération de ressources (e.g., à travers le réseau.) Elle paraîtra familière à tout utilisateur de {{domxref("XMLHttpRequest")}}, mais cette nouvelle API propose néanmoins un ensemble de fonctionnalités plus souples et plus puissantes.</p>
+L'API Fetch fournit une interface pour la récupération de ressources (e.g., à travers le réseau.) Elle paraîtra familière à tout utilisateur de {{domxref("XMLHttpRequest")}}, mais cette nouvelle API propose néanmoins un ensemble de fonctionnalités plus souples et plus puissantes.
 
-<h2 id="Concepts_et_usage">Concepts et usage</h2>
+## Concepts et usage
 
-<p>Fetch fournit une définition générique des objets {{domxref("Request")}} et {{domxref("Response")}} (et d'autres choses impliquées par les requêtes réseau). Ainsi il sera possible de les utiliser dès que nécessaire à l'avenir, même si c'est dans le cadre de <i>service workers</i>, de l'API Cache ou d'autres mécanismes similaires qui manipulent ou modifient des requêtes et des réponses, ou n'importe quelle situation qui pourrait requérir que vous génériez vos propres réponses au moyen d'un programme.</p>
+Fetch fournit une définition générique des objets {{domxref("Request")}} et {{domxref("Response")}} (et d'autres choses impliquées par les requêtes réseau). Ainsi il sera possible de les utiliser dès que nécessaire à l'avenir, même si c'est dans le cadre de _service workers_, de l'API Cache ou d'autres mécanismes similaires qui manipulent ou modifient des requêtes et des réponses, ou n'importe quelle situation qui pourrait requérir que vous génériez vos propres réponses au moyen d'un programme.
 
-<p>Elle fournit également une définition pour des concepts associés tels que CORS et la sémantique de l'en-tête HTTP <i>origin</i>, supplantant les définitions précédemment proposées ailleurs.</p>
+Elle fournit également une définition pour des concepts associés tels que CORS et la sémantique de l'en-tête HTTP _origin_, supplantant les définitions précédemment proposées ailleurs.
 
-<p>Pour effectuer une requête et obtenir une ressource, utilisez la méthode {{domxref("GlobalFetch.fetch")}}. Elle est implémentée dans de multiples interfaces, et en particulier dans {{domxref("Window")}} et {{domxref("WorkerGlobalScope")}}. Ce qui la rend disponible de la même manière dans tout contexte où vous souhaiteriez récupérer des ressources.</p>
+Pour effectuer une requête et obtenir une ressource, utilisez la méthode {{domxref("GlobalFetch.fetch")}}. Elle est implémentée dans de multiples interfaces, et en particulier dans {{domxref("Window")}} et {{domxref("WorkerGlobalScope")}}. Ce qui la rend disponible de la même manière dans tout contexte où vous souhaiteriez récupérer des ressources.
 
-<p>La méthode <code>fetch()</code> prend un argument obligatoire, le chemin vers la ressource souhaitée. Elle retourne une promesse qui résout la {{domxref("Response")}} de cette requête, qu'elle soit couronnée de succès ou non. Vous pouvez aussi optionnellement lui passer un objet d'options <code>init</code> comme second argument (voir {{domxref("Request")}}.)</p>
+La méthode `fetch()` prend un argument obligatoire, le chemin vers la ressource souhaitée. Elle retourne une promesse qui résout la {{domxref("Response")}} de cette requête, qu'elle soit couronnée de succès ou non. Vous pouvez aussi optionnellement lui passer un objet d'options `init` comme second argument (voir {{domxref("Request")}}.)
 
-<p>Une fois que la {{domxref("Response")}} a été retournée, il y a un ensemble de méthodes disponibles pour déterminer ce que doit être le contenu du corps et comment il doit être manipulé (voir {{domxref("Body")}}.)</p>
+Une fois que la {{domxref("Response")}} a été retournée, il y a un ensemble de méthodes disponibles pour déterminer ce que doit être le contenu du corps et comment il doit être manipulé (voir {{domxref("Body")}}.)
 
-<p>Vous pourriez créer une requête et une réponse directement en utilisant les constructeurs {{domxref("Request.Request","Request()")}} et {{domxref("Response.Response","Response()")}}, même s'il est improbable que vous procédiez ainsi. Il est plus probable cependant que leur création résulte des actions d'une autre API (par exemple, {{domxref("FetchEvent.respondWith")}} des <i>service workers</i>).</p>
+Vous pourriez créer une requête et une réponse directement en utilisant les constructeurs {{domxref("Request.Request","Request()")}} et {{domxref("Response.Response","Response()")}}, même s'il est improbable que vous procédiez ainsi. Il est plus probable cependant que leur création résulte des actions d'une autre API (par exemple, {{domxref("FetchEvent.respondWith")}} des _service workers_).
 
-<div class="note">
-<p><strong>Note :</strong> Pour en savoir plus sur l'utilisation des fonctionnalités de l'API Fetch et en approfondir les concepts, consulter respectivement <a href="/en-US/docs/Web/API/Fetch_API/Using_Fetch">Utiliser Fetch</a> et <a href="/en-US/docs/Web/API/Fetch_API/Basic_concepts">Fetch, les concepts de base</a>.</p>
-</div>
+> **Note :** Pour en savoir plus sur l'utilisation des fonctionnalités de l'API Fetch et en approfondir les concepts, consulter respectivement [Utiliser Fetch](/en-US/docs/Web/API/Fetch_API/Using_Fetch) et [Fetch, les concepts de base](/en-US/docs/Web/API/Fetch_API/Basic_concepts).
 
-<h3 id="Interrompre_un_fetch">Interrompre un fetch</h3>
+### Interrompre un fetch
 
-<p>Les navigateurs ont commencé à ajouter le support expérimental des interfaces {{DOMxRef("AbortController")}} et {{DOMxRef("AbortSignal")}} (connue aussi sous le nom d'API d'interruption), qui autorisent les opérations telles que Fetch et XHR à être interrompue si elles ne sont pas encore achevées. Voir les pages des interfaces pour plus de détails.</p>
+Les navigateurs ont commencé à ajouter le support expérimental des interfaces {{DOMxRef("AbortController")}} et {{DOMxRef("AbortSignal")}} (connue aussi sous le nom d'API d'interruption), qui autorisent les opérations telles que Fetch et XHR à être interrompue si elles ne sont pas encore achevées. Voir les pages des interfaces pour plus de détails.
 
-<h2 id="Les_interfaces_de_Fetch">Les interfaces de Fetch</h2>
+## Les interfaces de Fetch
 
-<dl>
- <dt>{{domxref("GlobalFetch")}}</dt>
- <dd>La méthode <code>fetch()</code> est utilisée pour récuperer une ressource.</dd>
- <dt>{{domxref("Headers")}}</dt>
- <dd>Représente les en-têtes de requête et de réponse, vous permettant de les consulter et de prendre différentes décisions en fonction du résultat.</dd>
- <dt>{{domxref("Request")}}</dt>
- <dd>Représente la requête d'une ressource.</dd>
- <dt>{{domxref("Response")}}</dt>
- <dd>Représente la réponse à une requête.</dd>
-</dl>
+- {{domxref("GlobalFetch")}}
+  - : La méthode `fetch()` est utilisée pour récuperer une ressource.
+- {{domxref("Headers")}}
+  - : Représente les en-têtes de requête et de réponse, vous permettant de les consulter et de prendre différentes décisions en fonction du résultat.
+- {{domxref("Request")}}
+  - : Représente la requête d'une ressource.
+- {{domxref("Response")}}
+  - : Représente la réponse à une requête.
 
-<h2 id="Mixin_de_Fetch">Mixin de Fetch</h2>
+## Mixin de Fetch
 
-<dl>
- <dt>{{domxref("Body")}}</dt>
- <dd>Fournit les méthodes relatives au corps de la requête/réponse, vous permettant  de déclarer quel est son type de contenu et comment il doit être manipulé.</dd>
-</dl>
+- {{domxref("Body")}}
+  - : Fournit les méthodes relatives au corps de la requête/réponse, vous permettant  de déclarer quel est son type de contenu et comment il doit être manipulé.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Fetch')}}</td>
-   <td>{{Spec2('Fetch')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                | Statut                   | Commentaire         |
+| ---------------------------- | ------------------------ | ------------------- |
+| {{SpecName('Fetch')}} | {{Spec2('Fetch')}} | Définition initiale |
 
-<h2 id="Compatibilité_Navigateurs">Compatibilité Navigateurs</h2>
+## Compatibilité Navigateurs
 
-<p>{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}</p>
+{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
- <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
- <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
- <li><a href="https://github.com/github/fetch">Fetch polyfill</a></li>
- <li><a href="/en-US/docs/Web/API/Fetch_API/Basic_concepts">Fetch basic concepts</a></li>
-</ul>
+- [ServiceWorker API](/en-US/docs/Web/API/ServiceWorker_API)
+- [HTTP access control (CORS)](/en-US/docs/Web/HTTP/Access_control_CORS)
+- [HTTP](/en-US/docs/Web/HTTP)
+- [Fetch polyfill](https://github.com/github/fetch)
+- [Fetch basic concepts](/en-US/docs/Web/API/Fetch_API/Basic_concepts)
diff --git a/files/fr/web/api/fetch_api/using_fetch/index.md b/files/fr/web/api/fetch_api/using_fetch/index.md
index 04a5708c1a..919d9496d2 100644
--- a/files/fr/web/api/fetch_api/using_fetch/index.md
+++ b/files/fr/web/api/fetch_api/using_fetch/index.md
@@ -13,37 +13,38 @@ tags:
   - request
 translation_of: Web/API/Fetch_API/Using_Fetch
 ---
-<p>{{DefaultAPISidebar("Fetch API")}}</p>
+{{DefaultAPISidebar("Fetch API")}}
 
-<p>L'<a href="/fr/docs/Web/API/Fetch_API">API Fetch</a> fournit une interface JavaScript pour l'accès et la manipulation des parties de la pipeline HTTP, comme les requêtes et les réponses. Cela fournit aussi une méthode globale {{domxref("GlobalFetch.fetch","fetch()")}} qui procure un moyen facile et logique de récupérer des ressources à travers le réseau de manière asynchrone.</p>
+L'[API Fetch](/fr/docs/Web/API/Fetch_API) fournit une interface JavaScript pour l'accès et la manipulation des parties de la pipeline HTTP, comme les requêtes et les réponses. Cela fournit aussi une méthode globale {{domxref("GlobalFetch.fetch","fetch()")}} qui procure un moyen facile et logique de récupérer des ressources à travers le réseau de manière asynchrone.
 
-<p>Ce genre de fonctionnalité était auparavant réalisé avec {{domxref("XMLHttpRequest")}}. Fetch fournit une meilleure alternative qui peut être utilisée facilement par d’autres technologies comme {{domxref("ServiceWorker_API", "Service Workers")}}. Fetch fournit aussi un endroit unique et logique pour la définition d'autres concepts liés à HTTP comme CORS et les extensions d'HTTP.</p>
+Ce genre de fonctionnalité était auparavant réalisé avec {{domxref("XMLHttpRequest")}}. Fetch fournit une meilleure alternative qui peut être utilisée facilement par d’autres technologies comme {{domxref("ServiceWorker_API", "Service Workers")}}. Fetch fournit aussi un endroit unique et logique pour la définition d'autres concepts liés à HTTP comme CORS et les extensions d'HTTP.
 
-<h2 id="Létat_actuel_du_support_par_les_navigateurs">L'état actuel du support par les navigateurs</h2>
+## L'état actuel du support par les navigateurs
 
-<p>Le support de Fetch est à ses débuts, mais les choses progressent. Il a été activé par défaut sur Firefox 39 et supérieur, et sur Chrome 42 et supérieur.</p>
+Le support de Fetch est à ses débuts, mais les choses progressent. Il a été activé par défaut sur Firefox 39 et supérieur, et sur Chrome 42 et supérieur.
 
-<p>Si vous souhaitez l'utiliser maintenant, il y a un <a href="https://github.com/github/fetch">polyfill Fetch</a> disponible qui recrée la fonctionnalité pour les navigateurs qui ne le supportent pas. Gardez à l'esprit qu'il est au stade expérimental et pas encore complètement fonctionnel.</p>
+Si vous souhaitez l'utiliser maintenant, il y a un [polyfill Fetch](https://github.com/github/fetch) disponible qui recrée la fonctionnalité pour les navigateurs qui ne le supportent pas. Gardez à l'esprit qu'il est au stade expérimental et pas encore complètement fonctionnel.
 
-<div class="note">
-<p><strong>Note :</strong> Certaines préoccupations ont été soulevées sur le fait que la <a href="https://fetch.spec.whatwg.org/">spécification de Fetch</a> est en contradition avec la <a href="https://streams.spec.whatwg.org/">spécification de Streams</a>; cependant, les prévisions montrent une intention d'intégrer Streams avec Fetch: pour plus d'informations reportez vous à <a href="https://github.com/yutakahirano/fetch-with-streams/">Fetch API integrated with Streams</a>.</p>
-</div>
+> **Note :** Certaines préoccupations ont été soulevées sur le fait que la [spécification de Fetch](https://fetch.spec.whatwg.org/) est en contradition avec la [spécification de Streams](https://streams.spec.whatwg.org/); cependant, les prévisions montrent une intention d'intégrer Streams avec Fetch: pour plus d'informations reportez vous à [Fetch API integrated with Streams](https://github.com/yutakahirano/fetch-with-streams/).
 
-<h2 id="Détection_de_la_fonctionnalité">Détection de la fonctionnalité</h2>
+## Détection de la fonctionnalité
 
-<p>Le support de l'API Fetch peut être détecté en vérifiant l'existence de {{domxref("Headers")}}, {{domxref("Request")}}, {{domxref("Response")}} ou {{domxref("GlobalFetch.fetch","fetch()")}} sur la portée de {{domxref("Window")}} ou de {{domxref("Worker")}}. Par exemple, vous pouvez faire cela dans votre script :</p>
+Le support de l'API Fetch peut être détecté en vérifiant l'existence de {{domxref("Headers")}}, {{domxref("Request")}}, {{domxref("Response")}} ou {{domxref("GlobalFetch.fetch","fetch()")}} sur la portée de {{domxref("Window")}} ou de {{domxref("Worker")}}. Par exemple, vous pouvez faire cela dans votre script :
 
-<pre class="brush: js">if (window.fetch) {
+```js
+if (window.fetch) {
     // exécuter ma requête fetch ici
 } else {
     // Faire quelque chose avec XMLHttpRequest?
-}</pre>
+}
+```
 
-<h2 id="Créer_une_requête_fetch">Créer une requête fetch</h2>
+## Créer une requête fetch
 
-<p>Une requête fetch basique est vraiment simple à initier. Jetez un coup d'œil au code suivant :</p>
+Une requête fetch basique est vraiment simple à initier. Jetez un coup d'œil au code suivant :
 
-<pre class="brush: js">const myImage = document.querySelector('img');
+```js
+const myImage = document.querySelector('img');
 
 fetch('flowers.jpg')
 .then(function(response) {
@@ -53,26 +54,24 @@ fetch('flowers.jpg')
   const objectURL = URL.createObjectURL(myBlob);
   myImage.src = objectURL;
 });
+```
 
-</pre>
+Ici nous récupérons une image à travers le réseau et l'insérons dans un élément {{htmlelement("img")}}. L'utilisation la plus simple de `fetch()` prend un argument — le chemin de la ressource que nous souhaitons récupérer — et retourne une promesse (promise) contenant, en réponse, un objet (de type {{domxref("Response")}}).
 
-<p>Ici nous récupérons une image à travers le réseau et l'insérons dans un élément {{htmlelement("img")}}. L'utilisation la plus simple de <code>fetch()</code> prend un argument — le chemin de la ressource que nous souhaitons récupérer — et retourne une promesse (promise) contenant, en réponse, un objet (de type {{domxref("Response")}}).</p>
+Bien sûr, il s'agit seulement d'une réponse HTTP, pas exactement de l'image. Pour extraire le contenu de l'image de la réponse, nous utilisons la méthode {{domxref("Body.blob","blob()")}} (définie sur le mixin {{domxref("Body")}}, qui est implémenté autant par les objets {{domxref("Request")}} que par les objets {{domxref("Response")}}).
 
-<p>Bien sûr, il s'agit seulement d'une réponse HTTP, pas exactement de l'image. Pour extraire le contenu de l'image de la réponse, nous utilisons la méthode {{domxref("Body.blob","blob()")}} (définie sur le mixin {{domxref("Body")}}, qui est implémenté autant par les objets {{domxref("Request")}} que par les objets {{domxref("Response")}}).</p>
+> **Note :** Le mixin Body a aussi des méthodes similaires pour extraire d'autres types contenu ; pour plus d'informations regardez la section {{anch("Corps")}}.
 
-<div class="note">
-<p><strong>Note :</strong> Le mixin Body a aussi des méthodes similaires pour extraire d'autres types contenu ; pour plus d'informations regardez la section {{anch("Corps")}}.</p>
-</div>
+Un objet `objectURL` est ensuite créé à partir du {{domxref("Blob")}} extrait, puis est inseré dans {{domxref("img")}}.
 
-<p>Un objet <code>objectURL</code> est ensuite créé à partir du {{domxref("Blob")}} extrait, puis est inseré dans {{domxref("img")}}.</p>
+Les requêtes Fetch sont controllées par la directive `connect-src` du [Content Security Policy](/fr/docs/Security/CSP/CSP_policy_directives) plutôt que par la directive de la ressource dont il s’agit de la récupération.
 
-<p>Les requêtes Fetch sont controllées par la directive <code>connect-src</code> du <a href="/fr/docs/Security/CSP/CSP_policy_directives">Content Security Policy</a> plutôt que par la directive de la ressource dont il s’agit de la récupération.</p>
+### Fournir des options à la requête
 
-<h3 id="Fournir_des_options_à_la_requête">Fournir des options à la requête</h3>
+La méthode `fetch()` accepte un second paramètre, optionnel ; un objet `init` qui vous permet de contrôler un certain nombre de réglages :
 
-<p>La méthode <code>fetch()</code> accepte un second paramètre, optionnel ; un objet <code>init</code> qui vous permet de contrôler un certain nombre de réglages :</p>
-
-<pre class="brush: js">var myHeaders = new Headers();
+```js
+var myHeaders = new Headers();
 
 var myInit = { method: 'GET',
                headers: myHeaders,
@@ -87,16 +86,16 @@ fetch('flowers.jpg',myInit)
   var objectURL = URL.createObjectURL(myBlob);
   myImage.src = objectURL;
 });
+```
 
-</pre>
+Reportez-vous à {{domxref("GlobalFetch.fetch","fetch()")}} pour la liste complète des options disponibles, et plus de détails.
 
-<p>Reportez-vous à {{domxref("GlobalFetch.fetch","fetch()")}} pour la liste complète des options disponibles, et plus de détails.</p>
+### Vérifier que la récupération a réussi
 
-<h3 id="Vérifier_que_la_récupération_a_réussi">Vérifier que la récupération a réussi</h3>
+Une promesse {{domxref("GlobalFetch.fetch","fetch()")}} va retourner une {{jsxref("TypeError")}} quand un problème réseau s'est produit. Cependant, il peut aussi s'agir d'un problème de permission ou quelque chose de similaire — un code HTTP 404 ne constitue pas une erreur réseau, par exemple. Un bon test de la réussite de `fetch()` devrait inclure la vérification que la promesse soit résolue, puis vérifier que la propriété {{domxref("Response.ok")}} ait la valeur _true_. Le code devrait ressembler à ce qui suit:
 
-<p>Une promesse {{domxref("GlobalFetch.fetch","fetch()")}} va retourner une {{jsxref("TypeError")}} quand un problème réseau s'est produit. Cependant, il peut aussi s'agir d'un problème de permission ou quelque chose de similaire — un code HTTP 404 ne constitue pas une erreur réseau, par exemple. Un bon test de la réussite de <code>fetch()</code> devrait inclure la vérification que la promesse soit résolue, puis vérifier que la propriété {{domxref("Response.ok")}} ait la valeur <em>true</em>. Le code devrait ressembler à ce qui suit:</p>
-
-<pre class="brush: js">fetch('flowers.jpg').then(function(response) {
+```js
+fetch('flowers.jpg').then(function(response) {
   if(response.ok) {
     response.blob().then(function(myBlob) {
       var objectURL = URL.createObjectURL(myBlob);
@@ -108,13 +107,15 @@ fetch('flowers.jpg',myInit)
 })
 .catch(function(error) {
   console.log('Il y a eu un problème avec l\'opération fetch: ' + error.message);
-});</pre>
+});
+```
 
-<h3 id="Fournir_votre_propre_objet_requête">Fournir votre propre objet requête</h3>
+### Fournir votre propre objet requête
 
-<p>Plutôt que de transmettre le chemin de la ressource que vous souhaitez récupérer avec l'appel <code>fetch()</code>, vous pouvez créer un objet de requête en utilisant le constructeur {{domxref("Request.Request","Request()")}}, et le transmettre à la méthode <code>fetch()</code> en tant qu’argument:</p>
+Plutôt que de transmettre le chemin de la ressource que vous souhaitez récupérer avec l'appel `fetch()`, vous pouvez créer un objet de requête en utilisant le constructeur {{domxref("Request.Request","Request()")}}, et le transmettre à la méthode `fetch()` en tant qu’argument:
 
-<pre class="brush: js">var myHeaders = new Headers();
+```js
+var myHeaders = new Headers();
 
 var myInit = { method: 'GET',
                headers: myHeaders,
@@ -130,39 +131,45 @@ fetch(myRequest,myInit)
 .then(function(myBlob) {
   var objectURL = URL.createObjectURL(myBlob);
   myImage.src = objectURL;
-});</pre>
+});
+```
 
-<p><code>Request()</code> accepte exactement les mêmes paramètres que la méthode <code>fetch()</code>. Vous pouvez même lui transmettre un objet Request existant pour en créer une copie :</p>
+`Request()` accepte exactement les mêmes paramètres que la méthode `fetch()`. Vous pouvez même lui transmettre un objet Request existant pour en créer une copie :
 
-<pre class="brush: js">var anotherRequest = new Request(myRequest,myInit);</pre>
+```js
+var anotherRequest = new Request(myRequest,myInit);
+```
 
-<p>C'est très pratique, si le corps de la requête et de la réponse ne sont utilisés qu'une fois seulement. Cette manière de faire une copie permet de ré-utiliser la requête/réponse, en changeant juste les options du <code>init</code> si nécessaire.</p>
+C'est très pratique, si le corps de la requête et de la réponse ne sont utilisés qu'une fois seulement. Cette manière de faire une copie permet de ré-utiliser la requête/réponse, en changeant juste les options du `init` si nécessaire.
 
-<div class="note">
-<p><strong>Note :</strong> Il y a aussi une méthode {{domxref("Request.clone","clone()")}} qui créer une copie. Cela a une sémantique légèrement différente à l'autre méthode de copie— La première va échouer si l'ancien corps de la requête a déjà été lu (même pour copier une réponse), alors qu'avec <code>clone()</code> non.</p>
-</div>
+> **Note :** Il y a aussi une méthode {{domxref("Request.clone","clone()")}} qui créer une copie. Cela a une sémantique légèrement différente à l'autre méthode de copie— La première va échouer si l'ancien corps de la requête a déjà été lu (même pour copier une réponse), alors qu'avec `clone()` non.
 
-<h2 id="En-têtes_Headers">En-têtes (Headers)</h2>
+## En-têtes (Headers)
 
-<p>L'interface {{domxref("Headers")}} vous permet de créer vos propres objets d'en-têtes via le constructeur {{domxref("Headers.Headers","Headers()")}}. Un objet en-tête est un simple ensemble de plusieurs clé-valeurs:</p>
+L'interface {{domxref("Headers")}} vous permet de créer vos propres objets d'en-têtes via le constructeur {{domxref("Headers.Headers","Headers()")}}. Un objet en-tête est un simple ensemble de plusieurs clé-valeurs:
 
-<pre class="brush: js">var content = "Hello World";
+```js
+var content = "Hello World";
 var myHeaders = new Headers();
 myHeaders.append("Content-Type", "text/plain");
 myHeaders.append("Content-Length", content.length.toString());
-myHeaders.append("X-Custom-Header", "ProcessThisImmediately");</pre>
+myHeaders.append("X-Custom-Header", "ProcessThisImmediately");
+```
 
-<p>On peut atteindre le même résultat en transmettant un tableau de tableaux ou un objet littéral au constructeur:</p>
+On peut atteindre le même résultat en transmettant un tableau de tableaux ou un objet littéral au constructeur:
 
-<pre class="brush: js">myHeaders = new Headers({
+```js
+myHeaders = new Headers({
   "Content-Type": "text/plain",
   "Content-Length": content.length.toString(),
   "X-Custom-Header": "ProcessThisImmediately",
-});</pre>
+});
+```
 
-<p>Le contenu peut être interrogé et récupéré:</p>
+Le contenu peut être interrogé et récupéré:
 
-<pre class="brush: js">console.log(myHeaders.has("Content-Type")); // true
+```js
+console.log(myHeaders.has("Content-Type")); // true
 console.log(myHeaders.has("Set-Cookie")); // false
 myHeaders.set("Content-Type", "text/html");
 myHeaders.append("X-Custom-Header", "AnotherValue");
@@ -171,140 +178,124 @@ console.log(myHeaders.get("Content-Length")); // 11
 console.log(myHeaders.getAll("X-Custom-Header")); // ["ProcessThisImmediately", "AnotherValue"]
 
 myHeaders.delete("X-Custom-Header");
-console.log(myHeaders.getAll("X-Custom-Header")); // [ ]</pre>
+console.log(myHeaders.getAll("X-Custom-Header")); // [ ]
+```
 
-<p>Certaines de ces opérations sont seulement utiles dans {{domxref("ServiceWorker_API","ServiceWorkers")}}, mais elles fournissent une bien meilleur API pour la manipulation des en-têtes.</p>
+Certaines de ces opérations sont seulement utiles dans {{domxref("ServiceWorker_API","ServiceWorkers")}}, mais elles fournissent une bien meilleur API pour la manipulation des en-têtes.
 
-<p>Toutes les méthodes d'en-tête provoquent une erreur TypeError si un nom d’en-tête utilisé n'est pas un nom d’en-tête HTTP valide. Les opérations de mutation vont provoquer une erreur TypeError si il y a une protection immutable (voir ci-dessous). Sinon elles vont échouer en silence. Par exemple :</p>
+Toutes les méthodes d'en-tête provoquent une erreur TypeError si un nom d’en-tête utilisé n'est pas un nom d’en-tête HTTP valide. Les opérations de mutation vont provoquer une erreur TypeError si il y a une protection immutable (voir ci-dessous). Sinon elles vont échouer en silence. Par exemple :
 
-<pre class="brush: js">var myResponse = Response.error();
+```js
+var myResponse = Response.error();
 try {
   myResponse.headers.set("Origin", "http://mybank.com");
 } catch(e) {
   console.log("Ne peut pas prétendre être une banque!");
-}</pre>
+}
+```
 
-<p>Un bon cas d'utilisation des en-têtes est de vérifier que le type de contenu récupéré est correct avant de poursuivre le traitement. Par exemple:</p>
+Un bon cas d'utilisation des en-têtes est de vérifier que le type de contenu récupéré est correct avant de poursuivre le traitement. Par exemple:
 
-<pre class="brush: js">fetch(myRequest).then(function(response) {
+```js
+fetch(myRequest).then(function(response) {
   var contentType = response.headers.get("content-type");
-  if(contentType &amp;&amp; contentType.indexOf("application/json") !== -1) {
+  if(contentType && contentType.indexOf("application/json") !== -1) {
     return response.json().then(function(json) {
       // traitement du JSON
     });
   } else {
     console.log("Oops, nous n'avons pas du JSON!");
   }
-});</pre>
+});
+```
 
-<h3 id="Protection_Guard">Protection (Guard)</h3>
+### Protection (Guard)
 
-<p>Puisque les en-têtes peuvent être envoyés dans les requêtes et reçus dans les réponses, et ont diverses limitations sur quelles informations peuvent et doivent être mutables, les objets en-tête ont une propriété <em>guard</em>. Ce n'est pas exposé au Web, mais cela définit quelle opération de mutation est autorisée sur l'objet en-tête.</p>
+Puisque les en-têtes peuvent être envoyés dans les requêtes et reçus dans les réponses, et ont diverses limitations sur quelles informations peuvent et doivent être mutables, les objets en-tête ont une propriété _guard_. Ce n'est pas exposé au Web, mais cela définit quelle opération de mutation est autorisée sur l'objet en-tête.
 
-<p>Les valeurs possibles de la propriété <em>guard</em> sont:</p>
+Les valeurs possibles de la propriété _guard_ sont:
 
-<ul>
- <li><code>none</code>: défaut.</li>
- <li><code>request</code>: guard pour l’en-tête obtenu d'une requête ({{domxref("Request.headers")}}).</li>
- <li><code>request-no-cors</code>: guard pour l'en-tête obtenu d'une requête créé avec {{domxref("Request.mode")}} <code>no-cors</code>.</li>
- <li><code>response</code>: guard pour l'en-tête obtenu d'une réponse ({{domxref("Response.headers")}}).</li>
- <li><code>immutable</code>: majoritairement utilisé pour les ServiceWorkers; retourne un objet en-tête en lecture seule.</li>
-</ul>
+- `none`: défaut.
+- `request`: guard pour l’en-tête obtenu d'une requête ({{domxref("Request.headers")}}).
+- `request-no-cors`: guard pour l'en-tête obtenu d'une requête créé avec {{domxref("Request.mode")}} `no-cors`.
+- `response`: guard pour l'en-tête obtenu d'une réponse ({{domxref("Response.headers")}}).
+- `immutable`: majoritairement utilisé pour les ServiceWorkers; retourne un objet en-tête en lecture seule.
 
-<div class="note">
-<p><strong>Note :</strong> Vous ne pouvez pas ajouter ou définir sur une requête protegée une en-tête <code>Content-Length</code>. De manière similaire, ajouter <code>Set-Cookie</code> dans l'en-tête de réponse n'est pas autorisé: les ServiceWorkers ne sont pas autorisés à gérer des cookies via des réponses synthétisées.</p>
-</div>
+> **Note :** Vous ne pouvez pas ajouter ou définir sur une requête protegée une en-tête `Content-Length`. De manière similaire, ajouter `Set-Cookie` dans l'en-tête de réponse n'est pas autorisé: les ServiceWorkers ne sont pas autorisés à gérer des cookies via des réponses synthétisées.
 
-<h2 id="Réponses">Réponses</h2>
+## Réponses
 
-<p>Comme vous l'avez vu ci-dessus, des instances de {{domxref("Response")}} sont retournées quand la promesse de <code>fetch()</code> est résolue.</p>
+Comme vous l'avez vu ci-dessus, des instances de {{domxref("Response")}} sont retournées quand la promesse de `fetch()` est résolue.
 
-<p>Elles peuvent aussi être programmées dans le code via JavaScript, mais c'est seulement utile concernant les {{domxref("ServiceWorker_API", "ServiceWorkers")}}, quand vous retournez, pour une requête reçue, une réponse personnalisée en utilisant la méthode {{domxref("FetchEvent.respondWith","respondWith()")}}:</p>
+Elles peuvent aussi être programmées dans le code via JavaScript, mais c'est seulement utile concernant les {{domxref("ServiceWorker_API", "ServiceWorkers")}}, quand vous retournez, pour une requête reçue, une réponse personnalisée en utilisant la méthode {{domxref("FetchEvent.respondWith","respondWith()")}}:
 
-<pre class="brush: js">var myBody = new Blob();
+```js
+var myBody = new Blob();
 
 addEventListener('fetch', function(event) {
   event.respondWith(new Response(myBody, {
     headers: { "Content-Type" : "text/plain" }
   });
-)});</pre>
+)});
+```
 
-<p>Le constructeur {{domxref("Response.Response","Response()")}} prend deux arguments optionnels —le corps de la réponse, et un objet d'options (similaire à l'objet que {{domxref("Request.Request","Request()")}} accepte).</p>
+Le constructeur {{domxref("Response.Response","Response()")}} prend deux arguments optionnels —le corps de la réponse, et un objet d'options (similaire à l'objet que {{domxref("Request.Request","Request()")}} accepte).
 
-<p>Les propriétés de réponse les plus communes que vous allez utiliser sont:</p>
+Les propriétés de réponse les plus communes que vous allez utiliser sont:
 
-<ul>
- <li>{{domxref("Response.status")}} —Un entier (valeur par défaut 200) contenant le code de statut de la réponse.</li>
- <li>{{domxref("Response.statusText")}} — Une chaine de caractères (valeur par défaut "OK"), qui correspond au message du statut HTTP.</li>
- <li>{{domxref("Response.ok")}} —vu précedemment, c'est un raccourci pour vérifier que le code de statut et bien compris entre 200 et 299 inclus. Retourne un {{domxref("Boolean")}}.</li>
-</ul>
+- {{domxref("Response.status")}} —Un entier (valeur par défaut 200) contenant le code de statut de la réponse.
+- {{domxref("Response.statusText")}} — Une chaine de caractères (valeur par défaut "OK"), qui correspond au message du statut HTTP.
+- {{domxref("Response.ok")}} —vu précedemment, c'est un raccourci pour vérifier que le code de statut et bien compris entre 200 et 299 inclus. Retourne un {{domxref("Boolean")}}.
 
-<div class="note">
-<p><strong>Note :</strong> La méthode statique {{domxref("Response.error","error()")}} retourne simplement une réponse d'erreur. De manière similaire, {{domxref("Response.redirect","redirect()")}} retourne une réponse de redirection vers une URL spécifique. Elles sont aussi pertinentes pour les Service Workers.</p>
-</div>
+> **Note :** La méthode statique {{domxref("Response.error","error()")}} retourne simplement une réponse d'erreur. De manière similaire, {{domxref("Response.redirect","redirect()")}} retourne une réponse de redirection vers une URL spécifique. Elles sont aussi pertinentes pour les Service Workers.
 
-<h2 id="Corps">Corps</h2>
+## Corps
 
-<p>Autant une requête qu'une réponse peut contenir un corps avec des données. Un corps est une instance de n'importe lequel des types suivants:</p>
+Autant une requête qu'une réponse peut contenir un corps avec des données. Un corps est une instance de n'importe lequel des types suivants:
 
-<ul>
- <li>{{domxref("ArrayBuffer")}}</li>
- <li>{{domxref("ArrayBufferView")}} (Uint8Array et ses proches)</li>
- <li>{{domxref("Blob")}}/Fichier</li>
- <li>chaine de caractères</li>
- <li>{{domxref("URLSearchParams")}}</li>
- <li>{{domxref("FormData")}}</li>
-</ul>
+- {{domxref("ArrayBuffer")}}
+- {{domxref("ArrayBufferView")}} (Uint8Array et ses proches)
+- {{domxref("Blob")}}/Fichier
+- chaine de caractères
+- {{domxref("URLSearchParams")}}
+- {{domxref("FormData")}}
 
-<p>Le mixin {{domxref("Body")}} définit les méthodes suivantes pour extraire le corps (implémenté autant par la {{domxref("Request")}} que par la {{domxref("Response")}}). Elles retournent toutes une promesse qui sera éventuellement résolue avec le contenu actuel.</p>
+Le mixin {{domxref("Body")}} définit les méthodes suivantes pour extraire le corps (implémenté autant par la {{domxref("Request")}} que par la {{domxref("Response")}}). Elles retournent toutes une promesse qui sera éventuellement résolue avec le contenu actuel.
 
-<ul>
- <li>{{domxref("Body.arrayBuffer","arrayBuffer()")}}</li>
- <li>{{domxref("Body.blob","blob()")}}</li>
- <li>{{domxref("Body.json","json()")}}</li>
- <li>{{domxref("Body.text","text()")}}</li>
- <li>{{domxref("Body.formData","formData()")}}</li>
-</ul>
+- {{domxref("Body.arrayBuffer","arrayBuffer()")}}
+- {{domxref("Body.blob","blob()")}}
+- {{domxref("Body.json","json()")}}
+- {{domxref("Body.text","text()")}}
+- {{domxref("Body.formData","formData()")}}
 
-<p>Ceci rend l'usage de données non textuelles plus facile qu’avec XHR.</p>
+Ceci rend l'usage de données non textuelles plus facile qu’avec XHR.
 
-<p>Le corps des requêtes peut être défini en passant les paramètres du corps:</p>
+Le corps des requêtes peut être défini en passant les paramètres du corps:
 
-<pre class="brush: js">var form = new FormData(document.getElementById('login-form'));
+```js
+var form = new FormData(document.getElementById('login-form'));
 fetch("/login", {
   method: "POST",
   body: form
-})</pre>
-
-<p>Les Requêtes et Réponses (et par extension la fonction <code>fetch()</code>), vont tenter de déterminer le type de contenu. Une requête va automatiquement définir un en-tête <code>Content-Type</code>  si rien n'est défini dans le dictionnaire [NDLT: configuration d'initialisation].</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Fetch')}}</td>
-   <td>{{Spec2('Fetch')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_navigateur">Compatibilité navigateur</h2>
-
-<p>{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/ServiceWorker_API">API ServiceWorker</a></li>
- <li><a href="/fr/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
- <li><a href="/fr/docs/Web/HTTP">HTTP</a></li>
- <li><a href="https://github.com/github/fetch">Polyfill pour Fetch</a></li>
- <li><a href="https://github.com/mdn/fetch-examples/">Exemples de Fetch sur Github</a></li>
-</ul>
+})
+```
+
+Les Requêtes et Réponses (et par extension la fonction `fetch()`), vont tenter de déterminer le type de contenu. Une requête va automatiquement définir un en-tête `Content-Type`  si rien n'est défini dans le dictionnaire \[NDLT: configuration d'initialisation].
+
+## Spécifications
+
+| Spécification                | Statut                   | Commentaire         |
+| ---------------------------- | ------------------------ | ------------------- |
+| {{SpecName('Fetch')}} | {{Spec2('Fetch')}} | Définition initiale |
+
+## Compatibilité navigateur
+
+{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}
+
+## Voir aussi
+
+- [API ServiceWorker](/fr/docs/Web/API/ServiceWorker_API)
+- [HTTP access control (CORS)](/fr/docs/Web/HTTP/Access_control_CORS)
+- [HTTP](/fr/docs/Web/HTTP)
+- [Polyfill pour Fetch](https://github.com/github/fetch)
+- [Exemples de Fetch sur Github](https://github.com/mdn/fetch-examples/)
diff --git a/files/fr/web/api/fetchevent/index.md b/files/fr/web/api/fetchevent/index.md
index d4f17e749d..14746adbfe 100644
--- a/files/fr/web/api/fetchevent/index.md
+++ b/files/fr/web/api/fetchevent/index.md
@@ -3,57 +3,48 @@ title: FetchEvent
 slug: Web/API/FetchEvent
 translation_of: Web/API/FetchEvent
 ---
-<p>{{APIRef("Service Workers API")}}{{ SeeCompatTable() }}</p>
+{{APIRef("Service Workers API")}}{{ SeeCompatTable() }}
 
-<p>Le paramètre passé au gestionnaire {{domxref("ServiceWorkerGlobalScope.onfetch")}}, <code>FetchEvent</code> représente une action de récupération qui est délivrée sur la {{domxref("ServiceWorkerGlobalScope")}} d'un {{domxref("ServiceWorker")}}. Il contient des informations relatives à la requête et la réponse associée, et fourni la méthode {{domxref("FetchEvent.respondWith", "FetchEvent.respondWith()")}} , qui permet de renvoyer une réponse arbitraire à la page controlée.</p>
+Le paramètre passé au gestionnaire {{domxref("ServiceWorkerGlobalScope.onfetch")}}, `FetchEvent` représente une action de récupération qui est délivrée sur la {{domxref("ServiceWorkerGlobalScope")}} d'un {{domxref("ServiceWorker")}}. Il contient des informations relatives à la requête et la réponse associée, et fourni la méthode {{domxref("FetchEvent.respondWith", "FetchEvent.respondWith()")}} , qui permet de renvoyer une réponse arbitraire à la page controlée.
 
-<h2 id="Constructeur">Constructeur</h2>
+## Constructeur
 
-<dl>
- <dt>{{domxref("FetchEvent.FetchEvent()")}}</dt>
- <dd>Crée un nouvel objet <code>FetchEvent</code>.</dd>
-</dl>
+- {{domxref("FetchEvent.FetchEvent()")}}
+  - : Crée un nouvel objet `FetchEvent`.
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<p><em>Hérite de son ancêtre, {{domxref("Event")}}</em>.</p>
+_Hérite de son ancêtre, {{domxref("Event")}}_.
 
-<dl>
- <dt>{{domxref("FetchEvent.isReload")}} {{readonlyInline}}</dt>
- <dd>Retourne un {{jsxref("Boolean")}} qui est à <code>true</code> si l'évènement a été délivré avec l'intention de recharger la page, ou <code>false</code> sinon. Par exemple, cliquer sur le bouton recharger du navigateur est considéré comme une intention de recharger la page, tandis que cliquer sur un lien ou sur le bouton précédent du navigateur n'est pas considéré comme tel.</dd>
- <dt>{{domxref("FetchEvent.request")}} {{readonlyInline}}</dt>
- <dd>Retourne la {{domxref("Request")}} qui a déclenché l'évènement.</dd>
- <dt>{{domxref("FetchEvent.clientId")}} {{readonlyInline}}</dt>
- <dd>Retourne l'id du {{domxref("Client")}} controlé par le service worker en cours.</dd>
-</dl>
+- {{domxref("FetchEvent.isReload")}} {{readonlyInline}}
+  - : Retourne un {{jsxref("Boolean")}} qui est à `true` si l'évènement a été délivré avec l'intention de recharger la page, ou `false` sinon. Par exemple, cliquer sur le bouton recharger du navigateur est considéré comme une intention de recharger la page, tandis que cliquer sur un lien ou sur le bouton précédent du navigateur n'est pas considéré comme tel.
+- {{domxref("FetchEvent.request")}} {{readonlyInline}}
+  - : Retourne la {{domxref("Request")}} qui a déclenché l'évènement.
+- {{domxref("FetchEvent.clientId")}} {{readonlyInline}}
+  - : Retourne l'id du {{domxref("Client")}} controlé par le service worker en cours.
 
-<h3 id="Propriétés_dépréciées">Propriétés dépréciées</h3>
+### Propriétés dépréciées
 
-<dl>
- <dt>{{domxref("FetchEvent.client")}} {{readonlyInline}}</dt>
- <dd>Retourne le {{domxref("Client")}} controlé par le service worker en cours.</dd>
-</dl>
+- {{domxref("FetchEvent.client")}} {{readonlyInline}}
+  - : Retourne le {{domxref("Client")}} controlé par le service worker en cours.
 
-<h2 id="Méthodes">Méthodes</h2>
+## Méthodes
 
-<p><em>Hérite de son parent, </em><em>{{domxref("ExtendableEvent")}}</em>.</p>
+_Hérite de son parent,_ _{{domxref("ExtendableEvent")}}_.
 
-<dl>
- <dt>{{domxref("FetchEvent.respondWith()")}}</dt>
- <dd>Promesse qui est résolue en retournant une {{domxref("Response")}} ou une <a href="http://fetch.spec.whatwg.org/#concept-network-error">erreur réseau</a>  à <code><a href="http://fetch.spec.whatwg.org/#concept-fetch">Fetch</a></code>.</dd>
- <dt>{{domxref("ExtendableEvent.waitUntil", "ExtendableEvent.waitUntil()")}}</dt>
- <dd>
- <p>Etend la durée de vie de l'évènement. Cette méthode est destinée à être appelée dans l'{{event("Event_handlers", "event handler")}} {{event("install")}} pour le worker {{domxref("ServiceWorkerRegistration.installing", "installing")}}, et dans l'{{event("Event_handlers", "event handler")}} {{event("active")}} pour le worker {{domxref("ServiceWorkerRegistration.active", "active")}}.</p>
- </dd>
-</dl>
+- {{domxref("FetchEvent.respondWith()")}}
+  - : Promesse qui est résolue en retournant une {{domxref("Response")}} ou une [erreur réseau](http://fetch.spec.whatwg.org/#concept-network-error)  à [`Fetch`](http://fetch.spec.whatwg.org/#concept-fetch).
+- {{domxref("ExtendableEvent.waitUntil", "ExtendableEvent.waitUntil()")}}
+  - : Etend la durée de vie de l'évènement. Cette méthode est destinée à être appelée dans l'{{event("Event_handlers", "event handler")}} {{event("install")}} pour le worker {{domxref("ServiceWorkerRegistration.installing", "installing")}}, et dans l'{{event("Event_handlers", "event handler")}} {{event("active")}} pour le worker {{domxref("ServiceWorkerRegistration.active", "active")}}.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Ce extrait de code provient de l'exemple <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/prefetch/service-worker.js">Service Worker Fetch</a> (<a href="https://googlechrome.github.io/samples/service-worker/prefetch/">lancer l'exemple dans le navigateur</a>). Dans une partie antérieure du code,  un {{domxref("InstallEvent")}} contrôle la mise en cache de plusieurs ressources. Le gestionnaire {{domxref("ServiceWorkerGlobalScope.onfetch")}} attends ensuite l'évènement {{event("fetch")}} . Une fois déclenché, {{domxref("FetchEvent.respondWith()")}} retourne une promesse à la page contrôlée. Cette promesse est résolue avec comme valeur de retour la première requête d'URL qui correspond dans l'objet {{domxref("Cache")}}. Si aucune correspondance n'est trouvée (i.e. la ressource n'a pas été mise en cache pendant la phase d'installation), le code va récupérer une réponse depuis le réseau.</p>
+Ce extrait de code provient de l'exemple [Service Worker Fetch](https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/prefetch/service-worker.js) ([lancer l'exemple dans le navigateur](https://googlechrome.github.io/samples/service-worker/prefetch/)). Dans une partie antérieure du code,  un {{domxref("InstallEvent")}} contrôle la mise en cache de plusieurs ressources. Le gestionnaire {{domxref("ServiceWorkerGlobalScope.onfetch")}} attends ensuite l'évènement {{event("fetch")}} . Une fois déclenché, {{domxref("FetchEvent.respondWith()")}} retourne une promesse à la page contrôlée. Cette promesse est résolue avec comme valeur de retour la première requête d'URL qui correspond dans l'objet {{domxref("Cache")}}. Si aucune correspondance n'est trouvée (i.e. la ressource n'a pas été mise en cache pendant la phase d'installation), le code va récupérer une réponse depuis le réseau.
 
-<p>Le code gère aussi les exceptions émises depuis l'opération {{domxref("ServiceWorkerGlobalScope.fetch()")}}. A noter que qu'une réponse d'erreur HTTP (e.g., 404) ne déclenche pas d'exception. Elle retourne un objet de réponse normal avec le code d'erreur approprié.</p>
+Le code gère aussi les exceptions émises depuis l'opération {{domxref("ServiceWorkerGlobalScope.fetch()")}}. A noter que qu'une réponse d'erreur HTTP (e.g., 404) ne déclenche pas d'exception. Elle retourne un objet de réponse normal avec le code d'erreur approprié.
 
-<pre class="brush: js">self.addEventListener('fetch', function(event) {
+```js
+self.addEventListener('fetch', function(event) {
   console.log('Gestion de l\'évènement de fetch pour', event.request.url);
 
   event.respondWith(
@@ -76,32 +67,20 @@ translation_of: Web/API/FetchEvent
       });
     })
   );
-});</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Service Workers', '#fetch-event-section', 'FetchEvent')}}</td>
-   <td>{{Spec2('Service Workers')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.FetchEvent")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{jsxref("Promise")}}</li>
- <li><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a></li>
-</ul>
+});
+```
+
+## Spécifications
+
+| Spécification                                                                                | Statut                               | Commentaire          |
+| -------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName('Service Workers', '#fetch-event-section', 'FetchEvent')}} | {{Spec2('Service Workers')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.FetchEvent")}}
+
+## Voir aussi
+
+- {{jsxref("Promise")}}
+- [Fetch API](/en-US/docs/Web/API/Fetch_API)
diff --git a/files/fr/web/api/file/index.md b/files/fr/web/api/file/index.md
index 0f4a7cf796..d5d6b5b6d7 100644
--- a/files/fr/web/api/file/index.md
+++ b/files/fr/web/api/file/index.md
@@ -6,112 +6,86 @@ tags:
   - File
 translation_of: Web/API/File
 ---
-<div>{{APIRef}}</div>
-
-<p>L’interface <strong><code>File</code></strong> fournit des informations sur des fichiers et permet au code JavaScript d’une une page web d’accéder à leurs contenus.</p>
-
-<p>Les objets <code>File</code> sont généralements obtenus à partir de :</p>
-
-<ul>
- <li>l’objet {{domxref("FileList")}} retourné lorsque qu’un utilisateur ou une utilisatrice sélectionne des fichiers grâce à un élément {{HTMLElement("input")}} ;</li>
- <li>l’objet {{domxref("DataTransfer")}} d’une opération de glisser-déposer ;</li>
- <li>l’API <code>mozGetAsFile()</code> de l’élément {{domxref("HTMLCanvasElement")}}.</li>
-</ul>
-
-<p>Dans Gecko, le code privilégié peut créer des objets <code>File</code> représentant tout fichier local sans nécessiter une interaction de l’utilisateur ou de l’utilisatrice (voir {{anch("Notes d’implémentation")}} pour plus d’informations.)</p>
-
-<p>Un objet <code>File</code> est un genre spécifique de {{domxref("Blob")}}, et peut être utilisé dans tout contexte où un blob peut l’être. En particulier, {{domxref("FileReader")}}, {{domxref("URL.createObjectURL()")}}, {{domxref("ImageBitmapFactories.createImageBitmap()", "createImageBitmap()")}}, et {{domxref("XMLHttpRequest", "", "send()")}} acceptent indifféremment des <code>Blob</code>s et des <code>File</code>s.</p>
-
-<p>Voir <a href="/fr/docs/Web/API/File/Using_files_from_web_applications">Utiliser des fichiers à partir d'applications web</a> pour plus d’informations et des exemples.</p>
-
-<p>{{InheritanceDiagram}}</p>
-
-<h2 id="Constructeur">Constructeur</h2>
-
-<dl>
- <dt>{{domxref("File.File", "File()")}}</dt>
- <dd>Renvoie un <code>File</code> nouvellement construit.</dd>
-</dl>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<dl>
- <dt>{{domxref("File.lastModified")}} {{readonlyinline}}</dt>
- <dd>Renvoie le temps de dernière modification du fichier, exprimé en millisecondes écoulées depuis l’ère UNIX (1er janvier 1970 à minuit).</dd>
- <dt>{{domxref("File.lastModifiedDate")}} {{readonlyinline}} {{deprecated_inline}} {{gecko_minversion_inline("15.0")}}</dt>
- <dd>Renvoie la {{jsxref("Date")}} de dernière modification du fichier.</dd>
- <dt>{{domxref("File.name")}} {{readonlyinline}}</dt>
- <dd>Renvoie le nom du fichier.</dd>
- <dt>{{domxref("File.webkitRelativePath")}} {{readonlyinline}} {{non-standard_inline}}</dt>
- <dd>Renvoie le chemin auquel l’URL du {{domxref("File")}} est relative.</dd>
-</dl>
-
-<p><code>File</code> implémente {{domxref("Blob")}}, et ainsi possède les propriétés suivantes :</p>
-
-<dl>
- <dt>{{domxref("File.size")}} {{readonlyinline}}</dt>
- <dd>Renvoie la taille du fichier en octets.</dd>
- <dt>{{domxref("File.type")}} {{readonlyinline}}</dt>
- <dd>Renvoie le type <a href="/fr/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types">MIME</a>du fichier.</dd>
-</dl>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<p><em>L’interface <code>File</code> ne définit aucune méthode, mais hérite des méthodes de l’interface {{domxref("Blob")}} :</em></p>
-
-<dl>
- <dt>{{domxref("Blob.slice()", "Blob.slice([start[, end[, contentType]]])")}}</dt>
- <dd>Renvoie un nouvel objet <code>Blob</code> contenant les données du blob source comprises dans l’intervalle d’octets spécifié.</dd>
- <dt>{{domxref("Blob.stream()", "Blob.stream()")}}</dt>
- <dd>Transforme le <code>File</code> en un {{domxref("ReadableStream")}} pouvant être utilisé pour lire le contenu du <code>File</code>.</dd>
- <dt>{{domxref("Blob.text()", "Blob.text()")}}</dt>
- <dd>Transforme le <code>File</code> en un flux (<em>stream</em>) et le lit en entier. Renvoie une {{jsxref("promise", "promesse")}} qui se résoud en une {{domxref("USVString")}} (texte).</dd>
- <dt>{{domxref("Blob.arrayBuffer()", "Blob.arrayBuffer()")}}</dt>
- <dd>Transforme le <code>File</code> en un flux (<em>stream</em>) et le lit en entier. Retourne une {{jsxref("promise", "promesse")}} qui se résoud en un {{domxref("ArrayBuffer")}}.</dd>
-</dl>
-
-<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('File API')}}</td>
-   <td>{{Spec2('File API')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.File")}}</p>
-
-<h3 id="Notes_d’implémentation">Notes d’implémentation</h3>
-
-<ul>
- <li>Dans Gecko, vous pouvez utiliser API depuis du code chrome. Voir <a href="/en-US/docs/Extensions/Using_the_DOM_File_API_in_chrome_code">Using the DOM File API in chrome code</a> pour plus de détails. Pour l’utiliser depuis du code chrome, JSM, ou portée Bootstrap, vous devez l’importer en utilisant <code><a href="/en-US/docs/Components.utils.importGlobalProperties">Cu.importGlobalProperties</a>(['File']);</code></li>
- <li>À partir de Gecko 6.0 {{geckoRelease("6.0")}}, le code privilégié (par exemple au sein d’une extension) peut passer un objet {{interface("nsIFile")}} au constructeur DOM <code>File</code> pour spécifier le fichier à référencer.</li>
- <li>À partir de Gecko 8.0 {{geckoRelease("8.0")}}, vous pouvez utiliser <code>new File</code> pour créer des objets <code>File</code> depuis des composants XPCOM au lieu de devoir instancier les objets {{interface("nsIDOMFile")}} directement. Contrairement à {{domxref("Blob")}}, le constructeur prend le nom de fichier comme second argument. Le nom de fichier peut être une chaîne quelconque.
-  <pre class="syntaxbox">new File(
-  Array parts,
-  String filename,
-  BlobPropertyBag properties
-);</pre>
- </li>
- <li>Les propriétés et méthodes non standard suivantes ont été retirées de Gecko 7 {{geckoRelease("7.0")}} : {{domxref("File.fileName")}}, {{domxref("File.fileSize")}}, {{domxref("File.getAsBinary()")}}, {{domxref("File.getAsDataURL()")}}, {{domxref("File.getAsText()","File.getAsText(string encoding)")}} ({{bug("661876")}}). Les propriétés standard {{domxref("File.name")}}, {{domxref("Blob.size")}}, et les méthodes de {{domxref("FileReader")}} devraient être utilisées à la place.</li>
-</ul>
-
-<h2 id="Voir_aussi">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>{{domxref("FileReader")}}</li>
- <li><a href="/en-US/docs/Extensions/Using_the_DOM_File_API_in_chrome_code">Using the DOM File API in chrome code</a> (pour du code privilégié s’exécutant dans Gecko, tel que des extensions de Firefox)</li>
-</ul>
+{{APIRef}}
+
+L’interface **`File`** fournit des informations sur des fichiers et permet au code JavaScript d’une une page web d’accéder à leurs contenus.
+
+Les objets `File` sont généralements obtenus à partir de :
+
+- l’objet {{domxref("FileList")}} retourné lorsque qu’un utilisateur ou une utilisatrice sélectionne des fichiers grâce à un élément {{HTMLElement("input")}} ;
+- l’objet {{domxref("DataTransfer")}} d’une opération de glisser-déposer ;
+- l’API `mozGetAsFile()` de l’élément {{domxref("HTMLCanvasElement")}}.
+
+Dans Gecko, le code privilégié peut créer des objets `File` représentant tout fichier local sans nécessiter une interaction de l’utilisateur ou de l’utilisatrice (voir {{anch("Notes d’implémentation")}} pour plus d’informations.)
+
+Un objet `File` est un genre spécifique de {{domxref("Blob")}}, et peut être utilisé dans tout contexte où un blob peut l’être. En particulier, {{domxref("FileReader")}}, {{domxref("URL.createObjectURL()")}}, {{domxref("ImageBitmapFactories.createImageBitmap()", "createImageBitmap()")}}, et {{domxref("XMLHttpRequest", "", "send()")}} acceptent indifféremment des `Blob`s et des `File`s.
+
+Voir [Utiliser des fichiers à partir d'applications web](/fr/docs/Web/API/File/Using_files_from_web_applications) pour plus d’informations et des exemples.
+
+{{InheritanceDiagram}}
+
+## Constructeur
+
+- {{domxref("File.File", "File()")}}
+  - : Renvoie un `File` nouvellement construit.
+
+## Propriétés
+
+- {{domxref("File.lastModified")}} {{readonlyinline}}
+  - : Renvoie le temps de dernière modification du fichier, exprimé en millisecondes écoulées depuis l’ère UNIX (1er janvier 1970 à minuit).
+- {{domxref("File.lastModifiedDate")}} {{readonlyinline}} {{deprecated_inline}} {{gecko_minversion_inline("15.0")}}
+  - : Renvoie la {{jsxref("Date")}} de dernière modification du fichier.
+- {{domxref("File.name")}} {{readonlyinline}}
+  - : Renvoie le nom du fichier.
+- {{domxref("File.webkitRelativePath")}} {{readonlyinline}} {{non-standard_inline}}
+  - : Renvoie le chemin auquel l’URL du {{domxref("File")}} est relative.
+
+`File` implémente {{domxref("Blob")}}, et ainsi possède les propriétés suivantes :
+
+- {{domxref("File.size")}} {{readonlyinline}}
+  - : Renvoie la taille du fichier en octets.
+- {{domxref("File.type")}} {{readonlyinline}}
+  - : Renvoie le type [MIME](/fr/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types)du fichier.
+
+## Méthodes
+
+_L’interface `File` ne définit aucune méthode, mais hérite des méthodes de l’interface {{domxref("Blob")}} :_
+
+- {{domxref("Blob.slice()", "Blob.slice([start[, end[, contentType]]])")}}
+  - : Renvoie un nouvel objet `Blob` contenant les données du blob source comprises dans l’intervalle d’octets spécifié.
+- {{domxref("Blob.stream()", "Blob.stream()")}}
+  - : Transforme le `File` en un {{domxref("ReadableStream")}} pouvant être utilisé pour lire le contenu du `File`.
+- {{domxref("Blob.text()", "Blob.text()")}}
+  - : Transforme le `File` en un flux (_stream_) et le lit en entier. Renvoie une {{jsxref("promise", "promesse")}} qui se résoud en une {{domxref("USVString")}} (texte).
+- {{domxref("Blob.arrayBuffer()", "Blob.arrayBuffer()")}}
+  - : Transforme le `File` en un flux (_stream_) et le lit en entier. Retourne une {{jsxref("promise", "promesse")}} qui se résoud en un {{domxref("ArrayBuffer")}}.
+
+## Spécifications
+
+| Spécification                    | Statut                       | Commentaire          |
+| -------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('File API')}} | {{Spec2('File API')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.File")}}
+
+### Notes d’implémentation
+
+- Dans Gecko, vous pouvez utiliser API depuis du code chrome. Voir [Using the DOM File API in chrome code](/en-US/docs/Extensions/Using_the_DOM_File_API_in_chrome_code) pour plus de détails. Pour l’utiliser depuis du code chrome, JSM, ou portée Bootstrap, vous devez l’importer en utilisant `Cu.importGlobalProperties(['File']);`
+- À partir de Gecko 6.0 {{geckoRelease("6.0")}}, le code privilégié (par exemple au sein d’une extension) peut passer un objet {{interface("nsIFile")}} au constructeur DOM `File` pour spécifier le fichier à référencer.
+- À partir de Gecko 8.0 {{geckoRelease("8.0")}}, vous pouvez utiliser `new File` pour créer des objets `File` depuis des composants XPCOM au lieu de devoir instancier les objets {{interface("nsIDOMFile")}} directement. Contrairement à {{domxref("Blob")}}, le constructeur prend le nom de fichier comme second argument. Le nom de fichier peut être une chaîne quelconque.
+
+      new File(
+        Array parts,
+        String filename,
+        BlobPropertyBag properties
+      );
+
+- Les propriétés et méthodes non standard suivantes ont été retirées de Gecko 7 {{geckoRelease("7.0")}} : {{domxref("File.fileName")}}, {{domxref("File.fileSize")}}, {{domxref("File.getAsBinary()")}}, {{domxref("File.getAsDataURL()")}}, {{domxref("File.getAsText()","File.getAsText(string encoding)")}} ({{bug("661876")}}). Les propriétés standard {{domxref("File.name")}}, {{domxref("Blob.size")}}, et les méthodes de {{domxref("FileReader")}} devraient être utilisées à la place.
+
+## Voir aussi
+
+- [Utiliser des fichiers à partir d'applications web](/fr/docs/Web/API/File/Using_files_from_web_applications)
+- {{domxref("FileReader")}}
+- [Using the DOM File API in chrome code](/en-US/docs/Extensions/Using_the_DOM_File_API_in_chrome_code) (pour du code privilégié s’exécutant dans Gecko, tel que des extensions de Firefox)
diff --git a/files/fr/web/api/file/name/index.md b/files/fr/web/api/file/name/index.md
index be29d91b9a..bf3e5a69ff 100644
--- a/files/fr/web/api/file/name/index.md
+++ b/files/fr/web/api/file/name/index.md
@@ -10,32 +10,28 @@ tags:
 translation_of: Web/API/File/fileName
 original_slug: Web/API/File/fileName
 ---
-<p>{{APIRef("File API")}}{{non-standard_header}}</p>
+{{APIRef("File API")}}{{non-standard_header}}
 
-<p>{{obsolete_header(7.0)}}</p>
+{{obsolete_header(7.0)}}
 
-<h2 id="Résumé">Résumé</h2>
+## Résumé
 
-<p>Renvoie le nom du fichier. Pour des raisons de sécurité, le chemin est exclu de la propriété.</p>
+Renvoie le nom du fichier. Pour des raisons de sécurité, le chemin est exclu de la propriété.
 
-<div class="note">
-  <p><strong>Note :</strong> Cette propriété est dépréciée. Utilisez {{domxref("File.name")}} à la place.</p>
-</div>
+> **Note :** Cette propriété est dépréciée. Utilisez {{domxref("File.name")}} à la place.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre>var name = instanceOfFile.fileName</pre>
+    var name = instanceOfFile.fileName
 
-<h2 id="Valeur">Valeur</h2>
+## Valeur
 
-<p>Une chaîne de caractères.</p>
+Une chaîne de caractères.
 
-<h2 id="Specification">Specification</h2>
+## Specification
 
-<p>Ne fait partie d'aucune spécification.</p>
+Ne fait partie d'aucune spécification.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("File.name")}}</li>
-</ul>
+- {{domxref("File.name")}}
diff --git a/files/fr/web/api/file/using_files_from_web_applications/index.md b/files/fr/web/api/file/using_files_from_web_applications/index.md
index 8d9eb1119e..620b413caa 100644
--- a/files/fr/web/api/file/using_files_from_web_applications/index.md
+++ b/files/fr/web/api/file/using_files_from_web_applications/index.md
@@ -8,139 +8,154 @@ tags:
   - ajax upload
 translation_of: Web/API/File/Using_files_from_web_applications
 ---
-<p>{{APIRef("File API")}}{{draft}}</p>
+{{APIRef("File API")}}{{draft}}
 
-<p>Grâce à l'API File ajoutée au DOM avec HTML5, il est maintenant possible depuis une page web de proposer à l'utilisateur de sélectionner des fichiers locaux, puis d'en lire le contenu. Cette sélection est possible en utilisant un élément HTML {{ HTMLElement("input") }} ou par glisser-déposer.</p>
+Grâce à l'API File ajoutée au DOM avec HTML5, il est maintenant possible depuis une page web de proposer à l'utilisateur de sélectionner des fichiers locaux, puis d'en lire le contenu. Cette sélection est possible en utilisant un élément HTML {{ HTMLElement("input") }} ou par glisser-déposer.
 
-<p>Vous pouvez utiliser si vous le souhaitez l'API DOM File depuis du code chrome d'extensions ou d'un autre navigateur ; notez cependant qu'il existe des fonctionnalités additionnelles auxquelles il vous faudra être attentif. Reportez-vous à <a href="/en/Extensions/Using_the_DOM_File_API_in_chrome_code">Using the DOM File API in chrome code</a> pour plus de détails.</p>
+Vous pouvez utiliser si vous le souhaitez l'API DOM File depuis du code chrome d'extensions ou d'un autre navigateur ; notez cependant qu'il existe des fonctionnalités additionnelles auxquelles il vous faudra être attentif. Reportez-vous à [Using the DOM File API in chrome code](/en/Extensions/Using_the_DOM_File_API_in_chrome_code) pour plus de détails.
 
-<h2 id="Accéder_au(x)_fichier(s)_sélectionné(s)">Accéder au(x) fichier(s) sélectionné(s)</h2>
+## Accéder au(x) fichier(s) sélectionné(s)
 
-<p>Examinez ce code HTML :</p>
+Examinez ce code HTML :
 
-<pre class="brush: html">&lt;input type="file" id="input"&gt;</pre>
+```html
+<input type="file" id="input">
+```
 
-<p>L'API File permet d'accèder à la {{ domxref("FileList") }} contenant les objets {{ domxref("File") }} qui correspondent aux fichiers selectionnés par l'utilisateur.</p>
+L'API File permet d'accèder à la {{ domxref("FileList") }} contenant les objets {{ domxref("File") }} qui correspondent aux fichiers selectionnés par l'utilisateur.
 
-<p>Si l'utilisateur ne sélectionne qu'un seul fichier, on ne prendra en compte que le premier élément de la {{ domxref("FileList") }}.</p>
+Si l'utilisateur ne sélectionne qu'un seul fichier, on ne prendra en compte que le premier élément de la {{ domxref("FileList") }}.
 
-<p>Pour accéder à un fichier sélectionné en utilisant un sélecteur DOM classique :</p>
+Pour accéder à un fichier sélectionné en utilisant un sélecteur DOM classique :
 
-<pre class="brush: js">var fichierSelectionne = document.getElementById('input').files[0];</pre>
+```js
+var fichierSelectionne = document.getElementById('input').files[0];
+```
 
-<p>Pour accèder à un fichier sélectionné en utilisant un sélecteur <a href="http://jquery.com/">jQuery</a> :</p>
+Pour accèder à un fichier sélectionné en utilisant un sélecteur [jQuery](http://jquery.com/) :
 
-<pre class="brush: js"><code>var </code>fichierSelectionne <code>= $('#input').get(0).files[0];
+```js
+var fichierSelectionne = $('#input').get(0).files[0];
 
-var </code>fichierSelectionne <code>= $('#input')[0].files[0];</code></pre>
+var fichierSelectionne = $('#input')[0].files[0];
+```
 
-<div class="note">
-<p><strong>Note :</strong> Si vous rencontrez une erreur "<code>files is undefined</code>" : vous n'avez pas sélectionné le bon élément HTML, en oubliant qu'un sélecteur jQuery renvoie une liste d'éléments DOM correspondants. Récupérez l'élément DOM pour appeler sa méthode "<code>files</code>".</p>
-</div>
+> **Note :** Si vous rencontrez une erreur "`files is undefined`" : vous n'avez pas sélectionné le bon élément HTML, en oubliant qu'un sélecteur jQuery renvoie une liste d'éléments DOM correspondants. Récupérez l'élément DOM pour appeler sa méthode "`files`".
 
-<h2 id="Accéder_au(x)_fichier(s)_sélectionné(s)_sur_un_événement_change">Accéder au(x) fichier(s) sélectionné(s) sur un événement <em>change</em></h2>
+## Accéder au(x) fichier(s) sélectionné(s) sur un événement _change_
 
-<p>Il est en outre possible (mais pas obligatoire) d'accéder à la {{ domxref("FileList") }} via l'événement <code>change</code> :</p>
+Il est en outre possible (mais pas obligatoire) d'accéder à la {{ domxref("FileList") }} via l'événement `change` :
 
-<pre class="brush: html">&lt;input type="file" id="input" onchange="handleFiles(this.files)"&gt;</pre>
+```html
+<input type="file" id="input" onchange="handleFiles(this.files)">
+```
 
-<p>La fonction <code>handleFiles()</code> est appelée avec un objet {{ domxref("FileList") }} contenant des objets {{ domxref("File") }} représentant les fichiers sélectionnés par l'utilisateur.</p>
+La fonction `handleFiles()` est appelée avec un objet {{ domxref("FileList") }} contenant des objets {{ domxref("File") }} représentant les fichiers sélectionnés par l'utilisateur.
 
-<p>Si vous souhaitez permettre à l'utilisateur de sélectionner plusieurs fichiers simmultanément, utilisez simplement l'attribut <code>multiple</code> de l'élément <code>input</code> :</p>
+Si vous souhaitez permettre à l'utilisateur de sélectionner plusieurs fichiers simmultanément, utilisez simplement l'attribut `multiple` de l'élément `input` :
 
-<pre class="brush: html">&lt;input type="file" id="input" <strong>multiple</strong> onchange="handleFiles(this.files)"&gt;</pre>
+```html
+<input type="file" id="input" multiple onchange="handleFiles(this.files)">
+```
 
-<p>La liste de fichiers passée à la fonction <code>handleFiles()</code> contient dans ce cas un seul objet {{ domxref("File") }} pour chaque fichier sélectionné par l'utilisateur.</p>
+La liste de fichiers passée à la fonction `handleFiles()` contient dans ce cas un seul objet {{ domxref("File") }} pour chaque fichier sélectionné par l'utilisateur.
 
-<h3 id="Ajouter_dynamiquement_un_gestionnaire_d'événement_change">Ajouter dynamiquement un gestionnaire d'événement <em>change</em></h3>
+### Ajouter dynamiquement un gestionnaire d'événement _change_
 
-<p>Dans le cas où votre champ input a été créé à l'aide d'une bibliothèque JavaScript comme <a href="http://www.jquery.com/">jQuery</a>, il vous faudra utiliser la méthode {{ domxref("EventTarget.addEventListener()") }} pour ajouter le gestionnaire d'événement <code>change</code>, comme cela :</p>
+Dans le cas où votre champ input a été créé à l'aide d'une bibliothèque JavaScript comme [jQuery](http://www.jquery.com/), il vous faudra utiliser la méthode {{ domxref("EventTarget.addEventListener()") }} pour ajouter le gestionnaire d'événement `change`, comme cela :
 
-<pre class="brush: js">var inputElement = document.getElementById("inputField");
+```js
+var inputElement = document.getElementById("inputField");
 inputElement.addEventListener("change", handleFiles, false);
 function handleFiles() {
   var fileList = this.files; /* Vous pouvez maintenant manipuler la liste de fichiers */
-}</pre>
+}
+```
 
-<p>Notez que dans ce cas la fonction <code>handleFiles()</code> est elle-même le gestionnaire d'événement, contrairement à l'exemple précédent où un gestionnaire d'événement l'appelle en lui passant un paramètre.</p>
+Notez que dans ce cas la fonction `handleFiles()` est elle-même le gestionnaire d'événement, contrairement à l'exemple précédent où un gestionnaire d'événement l'appelle en lui passant un paramètre.
 
-<h2 id="Obtenir_des_informations_sur_le(s)_fichier(s)_sélectionné(s)">Obtenir des informations sur le(s) fichier(s) sélectionné(s)</h2>
+## Obtenir des informations sur le(s) fichier(s) sélectionné(s)
 
-<p>L'objet {{ domxref("FileList") }} exposé par le DOM fournit la liste de tous les fichiers sélectionnés par l'utilisateur, chaque fichier étant identifié par un objet {{ domxref("File") }}. Vous pouvez en déterminer le nombre en récupérant la valeur de l'attribut <code>length</code> de la liste de fichiers :</p>
+L'objet {{ domxref("FileList") }} exposé par le DOM fournit la liste de tous les fichiers sélectionnés par l'utilisateur, chaque fichier étant identifié par un objet {{ domxref("File") }}. Vous pouvez en déterminer le nombre en récupérant la valeur de l'attribut `length` de la liste de fichiers :
 
-<pre class="brush: js"><code>var numFiles = files.length;</code></pre>
+```js
+var numFiles = files.length;
+```
 
-<p>Chaque objet {{ domxref("File") }} peut être simplement récupéré en accédant à la liste comme vous le feriez pour un tableau :</p>
+Chaque objet {{ domxref("File") }} peut être simplement récupéré en accédant à la liste comme vous le feriez pour un tableau :
 
-<pre class="brush: js">for (var i = 0, numFiles = files.length; i &lt; numFiles; i++) {
+```js
+for (var i = 0, numFiles = files.length; i < numFiles; i++) {
   var file = files[i];
   ..
 }
-</pre>
+```
 
-<p>La boucle parcourt l'ensemble des fichiers de la liste.</p>
+La boucle parcourt l'ensemble des fichiers de la liste.
 
-<p>L'objet {{ domxref("File") }} expose trois attributs accessibles en lecture seulement et contenant des informations utiles sur le fichier.</p>
+L'objet {{ domxref("File") }} expose trois attributs accessibles en lecture seulement et contenant des informations utiles sur le fichier.
 
-<dl>
- <dt><code>name</code></dt>
- <dd>Une chaîne de caractères contenant le nom du fichier uniquement, sans aucune information relative au chemin d'accès.</dd>
- <dt><code>size</code></dt>
- <dd>La taille du fichier exprimée en octets, sous la forme d'un entier de 64 bits.</dd>
- <dt><code>type</code></dt>
- <dd>Le type MIME du fichier sous la forme d'une chaîne de caractères, ou bien une chaîne vide <code>""</code> si le type ne peut pas être déterminé.</dd>
-</dl>
+- `name`
+  - : Une chaîne de caractères contenant le nom du fichier uniquement, sans aucune information relative au chemin d'accès.
+- `size`
+  - : La taille du fichier exprimée en octets, sous la forme d'un entier de 64 bits.
+- `type`
+  - : Le type MIME du fichier sous la forme d'une chaîne de caractères, ou bien une chaîne vide `""` si le type ne peut pas être déterminé.
 
-<h3 id="Exemple_Afficher_la_taille_d'un_ou_plusieurs_fichiers">Exemple : Afficher la taille d'un ou plusieurs fichiers</h3>
+### Exemple : Afficher la taille d'un ou plusieurs fichiers
 
-<p>L'exemple suivant montre une utilisation possible de la propriété <code>size</code> :</p>
+L'exemple suivant montre une utilisation possible de la propriété `size` :
 
-<pre class="brush: html">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-&lt;head&gt;
-&lt;meta charset="UTF-8"&gt;
-&lt;title&gt;File(s) size&lt;/title&gt;
-&lt;script&gt;
+```html
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>File(s) size</title>
+<script>
 function updateSize() {
   var nBytes = 0,
       oFiles = document.getElementById("uploadInput").files,
       nFiles = oFiles.length;
-  for (var nFileId = 0; nFileId &lt; nFiles; nFileId++) {
+  for (var nFileId = 0; nFileId < nFiles; nFileId++) {
     nBytes += oFiles[nFileId].size;
   }
   var sOutput = nBytes + " bytes";
   // partie de code facultative pour l'approximation des multiples
-  for (var aMultiples = ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"], nMultiple = 0, nApprox = nBytes / 1024; nApprox &gt; 1; nApprox /= 1024, nMultiple++) {
+  for (var aMultiples = ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"], nMultiple = 0, nApprox = nBytes / 1024; nApprox > 1; nApprox /= 1024, nMultiple++) {
     sOutput = nApprox.toFixed(3) + " " + aMultiples[nMultiple] + " (" + nBytes + " bytes)";
   }
   // fin de la partie de code facultative
   document.getElementById("fileNum").innerHTML = nFiles;
   document.getElementById("fileSize").innerHTML = sOutput;
 }
-&lt;/script&gt;
-&lt;/head&gt;
+</script>
+</head>
 
-&lt;body onload="updateSize();"&gt;
-&lt;form name="uploadForm"&gt;
-&lt;p&gt;&lt;input id="uploadInput" type="file" name="myFiles" onchange="updateSize();" multiple&gt; selected files: &lt;span id="fileNum"&gt;0&lt;/span&gt;; total size: &lt;span id="fileSize"&gt;0&lt;/span&gt;&lt;/p&gt;
-&lt;p&gt;&lt;input type="submit" value="Send file"&gt;&lt;/p&gt;
-&lt;/form&gt;
-&lt;/body&gt;
-&lt;/html&gt;
-</pre>
+<body onload="updateSize();">
+<form name="uploadForm">
+<p><input id="uploadInput" type="file" name="myFiles" onchange="updateSize();" multiple> selected files: <span id="fileNum">0</span>; total size: <span id="fileSize">0</span></p>
+<p><input type="submit" value="Send file"></p>
+</form>
+</body>
+</html>
+```
 
-<h2 id="Utiliser_des_éléments_input_masqués_de_type_file_avec_l'événement_click">Utiliser des éléments <em>input </em>masqués de type <em>file </em>avec l'événement <code>click</code></h2>
+## Utiliser des éléments _input_ masqués de type _file_ avec l'événement `click`
 
-<p>Il est possible depuis Gecko 2.0 {{ geckoRelease("2.0") }} de masquer l'élément {{ HTMLElement("input") }} de type file, généralement considéré comme laid, et de présenter votre propre interface pour l'ouverture du sélecteur de fichiers et l'affichage du ou des fichiers sélectionnés par l'utilisateur. Vous devez pour cela attribuer à votre élément <code>input</code> un style incluant <code>display:none</code> et gérer l'événement <code>click</code> sur votre élément {{ HTMLElement("input") }}.</p>
+Il est possible depuis Gecko 2.0 {{ geckoRelease("2.0") }} de masquer l'élément {{ HTMLElement("input") }} de type file, généralement considéré comme laid, et de présenter votre propre interface pour l'ouverture du sélecteur de fichiers et l'affichage du ou des fichiers sélectionnés par l'utilisateur. Vous devez pour cela attribuer à votre élément `input` un style incluant `display:none` et gérer l'événement `click` sur votre élément {{ HTMLElement("input") }}.
 
-<p>Examinez cet extrait de code HTML :</p>
+Examinez cet extrait de code HTML :
 
-<pre class="brush: html">&lt;input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)"&gt;
-&lt;a href="#" id="fileSelect"&gt;Select some files&lt;/a&gt;</pre>
+```html
+<input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)">
+<a href="#" id="fileSelect">Select some files</a>
+```
 
-<p>Le code gérant l'événement <code>click</code> peut être écrit de cette façon :</p>
+Le code gérant l'événement `click` peut être écrit de cette façon :
 
-<pre class="brush: js">var fileSelect = document.getElementById("fileSelect"),
+```js
+var fileSelect = document.getElementById("fileSelect"),
   fileElem = document.getElementById("fileElem");
 
 fileSelect.addEventListener("click", function (e) {
@@ -149,39 +164,43 @@ fileSelect.addEventListener("click", function (e) {
   }
   e.preventDefault(); // empêche la navigation vers "#"
 }, false);
-</pre>
+```
 
-<p>Vous pouvez bien sûr appliquer le style de votre choix au nouveau bouton d'ouverture du sélecteur de fichiers.</p>
+Vous pouvez bien sûr appliquer le style de votre choix au nouveau bouton d'ouverture du sélecteur de fichiers.
 
-<h2 id="Utiliser_un_élément_label_pour_activer_un_élément_input_masqué_de_type_file">Utiliser un élément <em>label </em>pour activer un élément <em>input </em>masqué de type <em>file</em></h2>
+## Utiliser un élément _label_ pour activer un élément _input_ masqué de type _file_
 
-<p>Un élément {{ HTMLElement("label") }} peut être utilisé pour ouvrir le sélecteur de fichiers sans l'aide de JavaScript (méthode <code>click()</code>).</p>
+Un élément {{ HTMLElement("label") }} peut être utilisé pour ouvrir le sélecteur de fichiers sans l'aide de JavaScript (méthode `click()`).
 
-<p>Examinez ce morceau de code HTML :</p>
+Examinez ce morceau de code HTML :
 
-<pre class="brush: html">&lt;input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)"&gt; &lt;label for="fileElem"&gt;Select some files&lt;/label&gt;</pre>
+```html
+<input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)"> <label for="fileElem">Select some files</label>
+```
 
-<p>Il n'y a pas besoin d'ajouter du code JavaScript pour l'appel à <code>fileElem.click()</code>. Vous pouvez dans ce cas aussi appliquer le style de votre choix à l'élément <code>label</code>.</p>
+Il n'y a pas besoin d'ajouter du code JavaScript pour l'appel à `fileElem.click()`. Vous pouvez dans ce cas aussi appliquer le style de votre choix à l'élément `label`.
 
-<h2 id="Sélectionner_des_fichiers_en_utilisant_drag_and_drop">Sélectionner des fichiers en utilisant <em>drag and drop</em></h2>
+## Sélectionner des fichiers en utilisant _drag and drop_
 
-<p>Vous pouvez aussi autoriser l'utilisateur à glisser-déposer (<em>drag and drop</em>) des fichiers dans votre application web.</p>
+Vous pouvez aussi autoriser l'utilisateur à glisser-déposer (_drag and drop_) des fichiers dans votre application web.
 
-<p>La première étape consiste définir une zone de dépôt. La délimitation exacte de la partie de votre page qui acceptera des dépôts dépend de la conception de votre application, mais il est facile d'autoriser un élément à capter des événements <code>drop</code> :</p>
+La première étape consiste définir une zone de dépôt. La délimitation exacte de la partie de votre page qui acceptera des dépôts dépend de la conception de votre application, mais il est facile d'autoriser un élément à capter des événements `drop` :
 
-<pre class="brush: js">var dropbox;
+```js
+var dropbox;
 
 dropbox = document.getElementById("dropbox");
 dropbox.addEventListener("dragenter", dragenter, false);
 dropbox.addEventListener("dragover", dragover, false);
 dropbox.addEventListener("drop", drop, false);
-</pre>
+```
 
-<p>Dans cet exemple, l'élément portant l'ID <code>dropbox</code> devient notre zone de dépôt en y ajoutant les gestionnaires d'écoute des événements {{event('dragenter')}}, {{event('dragover')}}, et {{event('drop')}}.</p>
+Dans cet exemple, l'élément portant l'ID `dropbox` devient notre zone de dépôt en y ajoutant les gestionnaires d'écoute des événements {{event('dragenter')}}, {{event('dragover')}}, et {{event('drop')}}.
 
-<p>Nous n'avons pas vraiment besoin dans notre cas de gérer les événements <code>dragenter</code> et <code>dragover</code>. Les deux fonctions associées restent donc assez simples, elle ne servent qu'à stopper la propagation de l'événement et empêcher le déclenchement de l'action par défaut :</p>
+Nous n'avons pas vraiment besoin dans notre cas de gérer les événements `dragenter` et `dragover`. Les deux fonctions associées restent donc assez simples, elle ne servent qu'à stopper la propagation de l'événement et empêcher le déclenchement de l'action par défaut :
 
-<pre class="brush: js">function dragenter(e) {
+```js
+function dragenter(e) {
   e.stopPropagation();
   e.preventDefault();
 }
@@ -190,11 +209,12 @@ function dragover(e) {
   e.stopPropagation();
   e.preventDefault();
 }
-</pre>
+```
 
-<p>La vraie magie est dans la fonction <code>drop()</code> :</p>
+La vraie magie est dans la fonction `drop()` :
 
-<pre class="brush: js">function drop(e) {
+```js
+function drop(e) {
   e.stopPropagation();
   e.preventDefault();
 
@@ -202,16 +222,18 @@ function dragover(e) {
   var files = dt.files;
 
   handleFiles(files);
-}</pre>
+}
+```
 
-<p>Nous récupérons ici le champ <code>dataTransfer</code> de l'événement puis nous en extrayons la liste des fichiers que nous passons à <code>handleFiles()</code>. À partir de ce point les fichiers se manipulent de la même façon, que l'utilisateur ait employé l'élément <code>input</code> ou le glisser-déposer.</p>
+Nous récupérons ici le champ `dataTransfer` de l'événement puis nous en extrayons la liste des fichiers que nous passons à `handleFiles()`. À partir de ce point les fichiers se manipulent de la même façon, que l'utilisateur ait employé l'élément `input` ou le glisser-déposer.
 
-<h2 id="Exemple_Afficher_les_miniatures_d'images_sélectionnées_par_l'utilisateur">Exemple : Afficher les miniatures d'images sélectionnées par l'utilisateur</h2>
+## Exemple : Afficher les miniatures d'images sélectionnées par l'utilisateur
 
-<p>Admettons que vous développiez actuellement le prochain site génial de partage de photos, et que vous souhaitiez utiliser HTML5 pour afficher une prévisualisation miniature des images avant que l'utilisateur ne les télécharge vraiment sur le serveur. Vous pouvez définir votre élément <code>input</code> ou votre zone de dépôt comme étudié précédemment et les faire appeler une fonction telle que la fonction <code>handleFiles()</code> montrée ci-dessous :</p>
+Admettons que vous développiez actuellement le prochain site génial de partage de photos, et que vous souhaitiez utiliser HTML5 pour afficher une prévisualisation miniature des images avant que l'utilisateur ne les télécharge vraiment sur le serveur. Vous pouvez définir votre élément `input` ou votre zone de dépôt comme étudié précédemment et les faire appeler une fonction telle que la fonction `handleFiles()` montrée ci-dessous :
 
-<pre class="brush: js">function handleFiles(files) {
-  for (var i = 0; i &lt; files.length; i++) {
+```js
+function handleFiles(files) {
+  for (var i = 0; i < files.length; i++) {
     var file = files[i];
     var imageType = /^image\//;
 
@@ -229,43 +251,50 @@ function dragover(e) {
     reader.readAsDataURL(file);
   }
 }
-</pre>
+```
 
-<p>La boucle qui manipule dans notre cas les fichiers sélectionnés par l'utilisateur examine l'attribut type de chaque fichier et contrôle qu'il s'agit bien d'une image (en utilisant une expression régulière pour vérifier la correspondance du type MIME avec la chaîne "<code>image/*</code>"). Nous créons un nouvel élément img pour chaque fichier image. Vous pouvez utiliser du CSS pour définir d'agréables bordures ou effets d'ombres ou encore pour préciser la taille de l'image [de l'élément <code>img</code>, NDT], même si cela n'est pas nécessaire ici.</p>
+La boucle qui manipule dans notre cas les fichiers sélectionnés par l'utilisateur examine l'attribut type de chaque fichier et contrôle qu'il s'agit bien d'une image (en utilisant une expression régulière pour vérifier la correspondance du type MIME avec la chaîne "`image/*`"). Nous créons un nouvel élément img pour chaque fichier image. Vous pouvez utiliser du CSS pour définir d'agréables bordures ou effets d'ombres ou encore pour préciser la taille de l'image \[de l'élément `img`, NDT], même si cela n'est pas nécessaire ici.
 
-<p>La classe CSS ob<code>j</code> est ajoutée à chaque élément image afin de faciliter sa recherche dans l'arbre du DOM, ainsi qu'un attribut <code>file</code> spécifiant le {{ domxref("File") }} correspondant et qui nous permettra de récupérer les fichiers images lors du téléchargement effectif vers le serveur. Nous utilisons {{ domxref("Node.appendChild()") }} pour ajouter la nouvelle miniature à la zone de prévisualisation de notre document.</p>
+La classe CSS ob`j` est ajoutée à chaque élément image afin de faciliter sa recherche dans l'arbre du DOM, ainsi qu'un attribut `file` spécifiant le {{ domxref("File") }} correspondant et qui nous permettra de récupérer les fichiers images lors du téléchargement effectif vers le serveur. Nous utilisons {{ domxref("Node.appendChild()") }} pour ajouter la nouvelle miniature à la zone de prévisualisation de notre document.
 
-<p>Nous définissons ensuite le {{ domxref("FileReader") }} qui gérera le chargement asynchrone de l'image et son lien à l'élément <code>img</code>. Après avoir créé le nouvel objet <code>FileReader</code>, nous définissons sa fonction <code>onload</code> pouis nous appelons <code>readAsDataURL()</code> pour démarrer l'opération de lecture en tâche de fond. Lorsque le chargement du fichier image est complètement terminé, son contenu est converti en <code>data</code> : c'est l'URL transmise à la fonction de rappel <code>onload</code>. Notre implémentation de cette procédure définit l'image chargée comme valeur de l'attribut <code>src</code> de l'élement <code>img</code>, faisant ainsi apparaître l'image dans la miniature à l'écran.</p>
+Nous définissons ensuite le {{ domxref("FileReader") }} qui gérera le chargement asynchrone de l'image et son lien à l'élément `img`. Après avoir créé le nouvel objet `FileReader`, nous définissons sa fonction `onload` pouis nous appelons `readAsDataURL()` pour démarrer l'opération de lecture en tâche de fond. Lorsque le chargement du fichier image est complètement terminé, son contenu est converti en `data` : c'est l'URL transmise à la fonction de rappel `onload`. Notre implémentation de cette procédure définit l'image chargée comme valeur de l'attribut `src` de l'élement `img`, faisant ainsi apparaître l'image dans la miniature à l'écran.
 
-<h2 id="Utiliser_un_objet_URLs">Utiliser un objet URLs</h2>
+## Utiliser un objet URLs
 
-<p>Gecko 2.0 {{ geckoRelease("2.0") }} introduit la prise en charge des méthodes du DOM {{ domxref("window.URL.createObjectURL()") }} et {{ domxref("window.URL.revokeObjectURL()") }}. Elles vous permettent de créer des chaînes d'URL simples qui peuvent être utilisées pour repérer n'importe quelle donnée pouvant être référencée à l'aide d'un objet DOM {{ domxref("File") }}, y compris des fichiers locaux sur l'ordinateur de l'utilisateur.</p>
+Gecko 2.0 {{ geckoRelease("2.0") }} introduit la prise en charge des méthodes du DOM {{ domxref("window.URL.createObjectURL()") }} et {{ domxref("window.URL.revokeObjectURL()") }}. Elles vous permettent de créer des chaînes d'URL simples qui peuvent être utilisées pour repérer n'importe quelle donnée pouvant être référencée à l'aide d'un objet DOM {{ domxref("File") }}, y compris des fichiers locaux sur l'ordinateur de l'utilisateur.
 
-<p>Vous pouvez procéder ainsi pour créer un objet URL lorsque vous souhaitez référencer un objet {{ domxref("File") }} par URL depuis HTML :</p>
+Vous pouvez procéder ainsi pour créer un objet URL lorsque vous souhaitez référencer un objet {{ domxref("File") }} par URL depuis HTML :
 
-<pre class="brush: js"><code>var objectURL = window.URL.createObjectURL(fileObj);</code></pre>
+```js
+var objectURL = window.URL.createObjectURL(fileObj);
+```
 
-<p>L'objet URL est une chaîne identifiant l'objet {{ domxref("File") }}. Un objet URL unique est créé à chaque fois que vous appelez {{ domxref("window.URL.createObjectURL()") }}, même si vous avez déjà créé un objet URL pour ce fichier. Chacun d'eux doit être libéré ; bien qu'ils soient automatiquement libérés lorsque le document est déchargé, vous devez explicitement les libérer en appelant {{ domxref("window.URL.revokeObjectURL()") }}  si votre page les utilise de manière dynamique :</p>
+L'objet URL est une chaîne identifiant l'objet {{ domxref("File") }}. Un objet URL unique est créé à chaque fois que vous appelez {{ domxref("window.URL.createObjectURL()") }}, même si vous avez déjà créé un objet URL pour ce fichier. Chacun d'eux doit être libéré ; bien qu'ils soient automatiquement libérés lorsque le document est déchargé, vous devez explicitement les libérer en appelant {{ domxref("window.URL.revokeObjectURL()") }}  si votre page les utilise de manière dynamique :
 
-<pre class="brush: js"><code>window.URL.revokeObjectURL(objectURL);</code></pre>
+```js
+window.URL.revokeObjectURL(objectURL);
+```
 
-<h2 id="Exemple_Utilisation_de_l'objet_URLs_pour_afficher_des_images">Exemple : Utilisation de l'objet URLs pour afficher des images</h2>
+## Exemple : Utilisation de l'objet URLs pour afficher des images
 
-<p>Cet exemple utilise des objets URLs pour afficher des vignettes d'image. Il affiche en outre d'autres informations, dont leurs noms et leurs tailles.</p>
+Cet exemple utilise des objets URLs pour afficher des vignettes d'image. Il affiche en outre d'autres informations, dont leurs noms et leurs tailles.
 
-<p>Le code HTML qui présente l'interface ressemble à ceci:</p>
+Le code HTML qui présente l'interface ressemble à ceci:
 
-<pre class="brush: html"><code>&lt;input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)"&gt;
-&lt;a href="#" id="fileSelect"&gt;Sélectionnez des fichiers&lt;/a&gt;
-&lt;div id="fileList"&gt;
-  &lt;p&gt;Aucun fichier sélectionné !&lt;/p&gt;
-&lt;/div&gt;</code></pre>
+```html
+<input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)">
+<a href="#" id="fileSelect">Sélectionnez des fichiers</a>
+<div id="fileList">
+  <p>Aucun fichier sélectionné !</p>
+</div>
+```
 
-<p>Ce code définit notre élément fichier {{ HTMLElement("input") }}, ainsi qu'un lien qui appelle le sélecteur de fichiers (l'élément <code>input</code> étant masqué pour éviter l'affichage de la si peu séduisante interface utilisateur). Vous pouvez vous reporter à la section {{ anch("Using hidden file input elements using the click() method") }} pour des explications détaillées sur cette partie de code ainsi que sur la méthode appelant le sélecteur de fichiers.</p>
+Ce code définit notre élément fichier {{ HTMLElement("input") }}, ainsi qu'un lien qui appelle le sélecteur de fichiers (l'élément `input` étant masqué pour éviter l'affichage de la si peu séduisante interface utilisateur). Vous pouvez vous reporter à la section {{ anch("Using hidden file input elements using the click() method") }} pour des explications détaillées sur cette partie de code ainsi que sur la méthode appelant le sélecteur de fichiers.
 
-<p>Voici la méthode <code>handleFiles()</code> :</p>
+Voici la méthode `handleFiles()` :
 
-<pre class="brush: js"><code>window.URL = window.URL || window.webkitURL;
+```js
+window.URL = window.URL || window.webkitURL;
 
 var fileSelect = document.getElementById("fileSelect"),
     fileElem = document.getElementById("fileElem"),
@@ -280,12 +309,12 @@ fileSelect.addEventListener("click", function (e) {
 
 function handleFiles(files) {
   if (!files.length) {
-    fileList.innerHTML = "&lt;p&gt;Aucun fichier sélectionné !&lt;/p&gt;";
+    fileList.innerHTML = "<p>Aucun fichier sélectionné !</p>";
   } else {
     fileList.innerHTML = "";
     var list = document.createElement("ul");
     fileList.appendChild(list);
-    for (var i = 0; i &lt; files.length; i++) {
+    for (var i = 0; i < files.length; i++) {
       var li = document.createElement("li");
       list.appendChild(li);
 
@@ -301,51 +330,50 @@ function handleFiles(files) {
       li.appendChild(info);
     }
   }
-}</code></pre>
+}
+```
 
-<p>Nous commençons par la recherche de l'URL du {{ HTMLElement("div") }} dont l'ID est <code>fileList</code>, qui est le bloc dans lequel nous inérerons notre liste de fichiers, ainsi que les miniatures..</p>
+Nous commençons par la recherche de l'URL du {{ HTMLElement("div") }} dont l'ID est `fileList`, qui est le bloc dans lequel nous inérerons notre liste de fichiers, ainsi que les miniatures..
 
-<p>Si l'objet {{ domxref("FileList") }} passé à <code>handleFiles()</code> est <code>null</code>, nous définissons simplement le contenu HTML du bloc pour pour afficher "Aucun fichier sélectionné ! ". Nous commençons dans le cas contraire à construire notre liste de fichiers, comme ceci :</p>
+Si l'objet {{ domxref("FileList") }} passé à `handleFiles()` est `null`, nous définissons simplement le contenu HTML du bloc pour pour afficher "Aucun fichier sélectionné ! ". Nous commençons dans le cas contraire à construire notre liste de fichiers, comme ceci :
 
-<ol>
- <li>Une nouvelle liste non ordonnée ({{ HTMLElement("ul") }}) est créée.</li>
- <li>L'élement de la liste nouvellement créée est ajoutée dans le bloc {{ HTMLElement("div") }} en appelant sa méthode {{ domxref("Node.appendChild()") }}.</li>
- <li>Pour chaque {{ domxref("File") }} dans le {{ domxref("FileList") }} représenté par <code>files</code> :
-  <ol>
-   <li>Création et ajout à la liste d'un nouvel élément de liste {{ HTMLElement("li") }}.</li>
-   <li>Création d'un nouvel élément image {{ HTMLElement("img") }}.</li>
-   <li>Définition d'un nouvel objet URL représentant le fichier comme source de l'image, en utilisant {{ domxref("window.URL.createObjectURL()") }} pour la création de l'URL du Blob.</li>
-   <li>Définition de la hauteur de l'image à 60 pixels.</li>
-   <li>Définition du gestionnaire pour l'événement <code>load</code> de l'image afin de libérer l'objet URL, devenu inutile une fois l'image chargée. La libération est effectuée en appelant la méthode {{ domxref("window.URL.revokeObjectURL()") }} avec en paramètre la chaîne de l'objet URL de l'attribut <code>img.src</code>.</li>
-   <li>Ajout du nouvel élément à la liste.</li>
-  </ol>
- </li>
-</ol>
+1.  Une nouvelle liste non ordonnée ({{ HTMLElement("ul") }}) est créée.
+2.  L'élement de la liste nouvellement créée est ajoutée dans le bloc {{ HTMLElement("div") }} en appelant sa méthode {{ domxref("Node.appendChild()") }}.
+3.  Pour chaque {{ domxref("File") }} dans le {{ domxref("FileList") }} représenté par `files` :
 
-<h2 id="Exemple_Télécharger_sur_le_serveur_un_fichier_sélectionné_par_l'utilisateur">Exemple : Télécharger sur le serveur un fichier sélectionné par l'utilisateur</h2>
+    1.  Création et ajout à la liste d'un nouvel élément de liste {{ HTMLElement("li") }}.
+    2.  Création d'un nouvel élément image {{ HTMLElement("img") }}.
+    3.  Définition d'un nouvel objet URL représentant le fichier comme source de l'image, en utilisant {{ domxref("window.URL.createObjectURL()") }} pour la création de l'URL du Blob.
+    4.  Définition de la hauteur de l'image à 60 pixels.
+    5.  Définition du gestionnaire pour l'événement `load` de l'image afin de libérer l'objet URL, devenu inutile une fois l'image chargée. La libération est effectuée en appelant la méthode {{ domxref("window.URL.revokeObjectURL()") }} avec en paramètre la chaîne de l'objet URL de l'attribut `img.src`.
+    6.  Ajout du nouvel élément à la liste.
 
-<p>Vous pourriez en outre vouloir autoriser l'utilisateur à télécharger sur un serveur (<em>upload</em>) un ou plusieurs fichiers sélectionnés (tels que les images sélectionnées en suivant l'exemple précedent). Cette opération peut être très facilement effectuée de manière asynchrone.</p>
+## Exemple : Télécharger sur le serveur un fichier sélectionné par l'utilisateur
 
-<h3 id="Créer_les_tâches_de_téléchargement">Créer les tâches de téléchargement</h3>
+Vous pourriez en outre vouloir autoriser l'utilisateur à télécharger sur un serveur (_upload_) un ou plusieurs fichiers sélectionnés (tels que les images sélectionnées en suivant l'exemple précedent). Cette opération peut être très facilement effectuée de manière asynchrone.
 
-<p>En poursuivant avec le code générant des miniatures de l'exemple précédent, rappelez-vous que chaque image de miniature s'est vue ajouter la classe CSS <code>obj</code>, ainsi que le {{ domxref("File") }} correspondant stocké dans l'attribut <code>file</code>. Cela nous permet de sélectionner très facilement toutes les images choisies par l'utilisateur pour le téléchargement à l'aide de {{ domxref("Document.querySelectorAll()") }}, comme cela :</p>
+### Créer les tâches de téléchargement
 
-<pre class="brush: js">function sendFiles() {
+En poursuivant avec le code générant des miniatures de l'exemple précédent, rappelez-vous que chaque image de miniature s'est vue ajouter la classe CSS `obj`, ainsi que le {{ domxref("File") }} correspondant stocké dans l'attribut `file`. Cela nous permet de sélectionner très facilement toutes les images choisies par l'utilisateur pour le téléchargement à l'aide de {{ domxref("Document.querySelectorAll()") }}, comme cela :
+
+```js
+function sendFiles() {
   var imgs = document.querySelectorAll(".obj");
 
-  for (var i = 0; i &lt; imgs.length; i++) {
+  for (var i = 0; i < imgs.length; i++) {
     new FileUpload(imgs[i], imgs[i].file);
   }
 }
-</pre>
+```
 
-<p>La ligne 2 crée un tableau, nommé <code>imgs</code>, de tous les éléments de la classe CSS <code>obj</code> dans le document ; s'agit dans notre cas de toutes les miniatures d'images. Une fois la liste établie, c'est un jeu d'enfant de la parcourir et de créer une nouvelle instance de <code>FileUpload</code> pour chacun de ses éléments. Chacune de ces instances gère le téléchargement du fichier correspondant vers le serveur.</p>
+La ligne 2 crée un tableau, nommé `imgs`, de tous les éléments de la classe CSS `obj` dans le document ; s'agit dans notre cas de toutes les miniatures d'images. Une fois la liste établie, c'est un jeu d'enfant de la parcourir et de créer une nouvelle instance de `FileUpload` pour chacun de ses éléments. Chacune de ces instances gère le téléchargement du fichier correspondant vers le serveur.
 
-<h3 id="Manipuler_le_processus_de_téléchargement_pour_un_fichier">Manipuler le processus de téléchargement pour un fichier</h3>
+### Manipuler le processus de téléchargement pour un fichier
 
-<p>La fonction <code>FileUpload</code> accepte deux arguments : un élement image et un fichier à partir duquel les données de l'image sont lues.</p>
+La fonction `FileUpload` accepte deux arguments : un élement image et un fichier à partir duquel les données de l'image sont lues.
 
-<pre class="brush: js">function FileUpload(img, file) {
+```js
+function FileUpload(img, file) {
   var reader = new FileReader();
   this.ctrl = createThrobber(img);
   var xhr = new XMLHttpRequest();
@@ -371,40 +399,37 @@ function handleFiles(files) {
   };
   reader.readAsBinaryString(file);
 }
-</pre>
+```
 
-<p>La fonction <code>FileUpload()</code> montrée ci-dessus crée un indicateur d'activité (<em>throbber</em>) pour l'affichage de la progression, ainsi qu'un {{ domxref("XMLHttpRequest") }} pour gérer le téléchargement des données.</p>
+La fonction `FileUpload()` montrée ci-dessus crée un indicateur d'activité (_throbber_) pour l'affichage de la progression, ainsi qu'un {{ domxref("XMLHttpRequest") }} pour gérer le téléchargement des données.
 
-<p>Il est nécessaire de prévoir quelques étapes préparatoires avant le téléchargement effectif des données :</p>
+Il est nécessaire de prévoir quelques étapes préparatoires avant le téléchargement effectif des données :
 
-<ol>
- <li>Le processus d'écoute de l'événement <code>progress</code> du XMLHttpRequest est écrit de telle façon que l'indicateur d'activité affiche l'information de progression du téléchargement la plus récente. </li>
- <li>Le gestionnaire de l'événement <code>load</code> du XMLHttpRequest est écrit pour que l'indicateur d'activité affiche 100% afin d'être sûr atteigne effectivement les 100%, même en cas granularité anormale lors du processus. Le gestionnaire supprime ensuite l'indicateur devenu inutile, entraînant sa disparition à la fin normale du téléchargement.</li>
- <li>La requête de téléchargement de l'image est ouverte par l'appel à la méthode <code>open()</code> du XMLHttpRequest, démarrant la création d'une requête POST.</li>
- <li>Le type MIME pour le téléchargement est défini en appelant la fonction <code>overrideMimeType()</code> du <code>XMLHttpRequest</code>. Nous utilisons ici un type MIME générique ; vous pouvez selon les cas définir ou ne définir aucun type MIME.</li>
- <li>L'objet <code>FileReader</code> est utilisé pour la conversion du fichier en chaîne binaire.</li>
- <li>La fonction <code>send()</code> du  XMLHttpRequest est appelée en dernier pour télécharger le contenu du fichier complètement chargé.</li>
-</ol>
+1.  Le processus d'écoute de l'événement `progress` du XMLHttpRequest est écrit de telle façon que l'indicateur d'activité affiche l'information de progression du téléchargement la plus récente.
+2.  Le gestionnaire de l'événement `load` du XMLHttpRequest est écrit pour que l'indicateur d'activité affiche 100% afin d'être sûr atteigne effectivement les 100%, même en cas granularité anormale lors du processus. Le gestionnaire supprime ensuite l'indicateur devenu inutile, entraînant sa disparition à la fin normale du téléchargement.
+3.  La requête de téléchargement de l'image est ouverte par l'appel à la méthode `open()` du XMLHttpRequest, démarrant la création d'une requête POST.
+4.  Le type MIME pour le téléchargement est défini en appelant la fonction `overrideMimeType()` du `XMLHttpRequest`. Nous utilisons ici un type MIME générique ; vous pouvez selon les cas définir ou ne définir aucun type MIME.
+5.  L'objet `FileReader` est utilisé pour la conversion du fichier en chaîne binaire.
+6.  La fonction `send()` du  XMLHttpRequest est appelée en dernier pour télécharger le contenu du fichier complètement chargé.
 
-<div class="note">
-<p><strong>Note :</strong> la méthode non standard <code>sendAsBinary</code> utilisée dans l'exemple ci-dessus est obsolète depuis Gecko 31 {{ geckoRelease(31) }} ; utilisez plutôt la méthode standard <code>send(Blob data)</code>. </p>
-</div>
+> **Note :** la méthode non standard `sendAsBinary` utilisée dans l'exemple ci-dessus est obsolète depuis Gecko 31 {{ geckoRelease(31) }} ; utilisez plutôt la méthode standard `send(Blob data)`.
 
-<h3 id="Gérer_le_processus_de_téléchargement_d'un_fichier_de_manière_asynchrone">Gérer le processus de téléchargement d'un fichier de manière asynchrone</h3>
+### Gérer le processus de téléchargement d'un fichier de manière asynchrone
 
-<pre class="brush: html">&lt;?php
+```html
+<?php
 if (isset($_FILES['myFile'])) {
     // Exemple:
     move_uploaded_file($_FILES['myFile']['tmp_name'], "uploads/" . $_FILES['myFile']['name']);
     exit;
 }
-?&gt;
-&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-&lt;head&gt;
-    &lt;title&gt;dnd binary upload&lt;/title&gt;
-    &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
-    &lt;script type="text/javascript"&gt;
+?>
+<!DOCTYPE html>
+<html>
+<head>
+    <title>dnd binary upload</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <script type="text/javascript">
         function sendFile(file) {
             var uri = "/index.php";
             var xhr = new XMLHttpRequest();
@@ -412,7 +437,7 @@ if (isset($_FILES['myFile'])) {
 
             xhr.open("POST", uri, true);
             xhr.onreadystatechange = function() {
-                if (xhr.readyState == 4 &amp;&amp; xhr.status == 200) {
+                if (xhr.readyState == 4 && xhr.status == 200) {
                     // Handle response.
                     alert(xhr.responseText); // handle response.
                 }
@@ -434,61 +459,63 @@ if (isset($_FILES['myFile'])) {
                 event.preventDefault();
 
                 var filesArray = event.dataTransfer.files;
-                for (var i=0; i&lt;filesArray.length; i++) {
+                for (var i=0; i<filesArray.length; i++) {
                     sendFile(filesArray[i]);
                 }
             }
          }
-    &lt;/script&gt;
-&lt;/head&gt;
-&lt;body&gt;
-    &lt;div&gt;
-        &lt;div id="dropzone" style="margin:30px; width:500px; height:300px; border:1px dotted grey;"&gt;Drag &amp; drop your file here...&lt;/div&gt;
-    &lt;/div&gt;
-&lt;/body&gt;
-&lt;/html&gt;
-</pre>
+    </script>
+</head>
+<body>
+    <div>
+        <div id="dropzone" style="margin:30px; width:500px; height:300px; border:1px dotted grey;">Drag & drop your file here...</div>
+    </div>
+</body>
+</html>
+```
 
-<h2 id="Exemple_Utiliser_un_objet_URLs_pour_afficher_un_PDF">Exemple : Utiliser un objet URLs pour afficher un PDF</h2>
+## Exemple : Utiliser un objet URLs pour afficher un PDF
 
-<p>Vous pouvez utiliser un objet URLs pour d'autres choses que les images ! Ils peuvent être utilisés pour afficher des fichiers PDF incorporés ou toutes autres ressources affichables par le navigateur.</p>
+Vous pouvez utiliser un objet URLs pour d'autres choses que les images ! Ils peuvent être utilisés pour afficher des fichiers PDF incorporés ou toutes autres ressources affichables par le navigateur.
 
-<p>Sous Firefox, la constante de configuration <code>pdfjs.disabled</code> doit être définie à <code>false</code> {{non-standard_inline()}} pour afficher les PDF encapsulés dans dans un {{ HTMLElement("iframe") }} plutôt que de s'en voir proposer le téléchargement sur le PC local.</p>
+Sous Firefox, la constante de configuration `pdfjs.disabled` doit être définie à `false` {{non-standard_inline()}} pour afficher les PDF encapsulés dans dans un {{ HTMLElement("iframe") }} plutôt que de s'en voir proposer le téléchargement sur le PC local.
 
-<pre class="brush: html">&lt;iframe id="viewer"&gt;</pre>
+```html
+<iframe id="viewer">
+```
 
-<p>Et voici comment modifier la valeur de l'attribut <code>src</code> :</p>
+Et voici comment modifier la valeur de l'attribut `src` :
 
-<pre class="brush: js">var obj_url = window.URL.createObjectURL(blob);
+```js
+var obj_url = window.URL.createObjectURL(blob);
 var iframe = document.getElementById('viewer');
 iframe.setAttribute('src', obj_url);
-window.URL.revokeObjectURL(obj_url);</pre>
+window.URL.revokeObjectURL(obj_url);
+```
 
-<h2 id="Exemple_Utiliser_un_objet_URLs_avec_d'autres_types_de_fichiers">Exemple : Utiliser un objet URLs avec d'autres types de fichiers</h2>
+## Exemple : Utiliser un objet URLs avec d'autres types de fichiers
 
-<p>Vous pouvez manipuler de la même façon des fichiers d'autres formats. Voici comment prévisualiser une vidéo téléchargée sur le serveur :</p>
+Vous pouvez manipuler de la même façon des fichiers d'autres formats. Voici comment prévisualiser une vidéo téléchargée sur le serveur :
 
-<pre class="brush: js">var video = document.getElementById('video');
+```js
+var video = document.getElementById('video');
 var obj_url = window.URL.createObjectURL(blob);
 video.src = obj_url;
 video.play()
-window.URL.revokeObjectURL(obj_url);</pre>
-
-<h2 id="Specification">Spécifications</h2>
-
-<ul>
- <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#file-upload-state-%28type=file%29">File upload state</a> (HTML 5 working draft)</li>
- <li><a href="http://www.w3.org/TR/FileAPI/">File API</a></li>
-</ul>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{ domxref("File") }}</li>
- <li>{{ domxref("FileList") }}</li>
- <li>{{ domxref("FileReader") }}</li>
- <li><a href="/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest">Utiliser XMLHttpRequest</a></li>
- <li><a href="/en/Extensions/Using_the_DOM_File_API_in_chrome_code">Using the DOM File API in chrome code</a></li>
- <li>{{ domxref("XMLHttpRequest") }}</li>
- <li><a href="http://www.jquery.com/">jQuery</a> JavaScript library</li>
-</ul>
+window.URL.revokeObjectURL(obj_url);
+```
+
+## Spécifications
+
+- [File upload state](http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#file-upload-state-%28type=file%29) (HTML 5 working draft)
+- [File API](http://www.w3.org/TR/FileAPI/)
+
+## Voir aussi
+
+- {{ domxref("File") }}
+- {{ domxref("FileList") }}
+- {{ domxref("FileReader") }}
+- [Utiliser XMLHttpRequest](/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest)
+- [Using the DOM File API in chrome code](/en/Extensions/Using_the_DOM_File_API_in_chrome_code)
+- {{ domxref("XMLHttpRequest") }}
+- [jQuery](http://www.jquery.com/) JavaScript library
diff --git a/files/fr/web/api/file_and_directory_entries_api/index.md b/files/fr/web/api/file_and_directory_entries_api/index.md
index 8d24b23d1d..847709ebac 100644
--- a/files/fr/web/api/file_and_directory_entries_api/index.md
+++ b/files/fr/web/api/file_and_directory_entries_api/index.md
@@ -4,53 +4,47 @@ slug: Web/API/File_and_Directory_Entries_API
 translation_of: Web/API/File_and_Directory_Entries_API
 original_slug: Web/API/API_fichier_systeme
 ---
-<p>{{DefaultAPISidebar("File System API")}}{{Non-standard_header()}}</p>
+{{DefaultAPISidebar("File System API")}}{{Non-standard_header()}}
 
-<p>L'API fichier système simule un fichier système en local que les applications web peuvent utiliser. Vous pouvez développer des applications qui lisent, écrivent, et créent des fichiers et/ou des dossiers dans un espace virtuel.</p>
+L'API fichier système simule un fichier système en local que les applications web peuvent utiliser. Vous pouvez développer des applications qui lisent, écrivent, et créent des fichiers et/ou des dossiers dans un espace virtuel.
 
-<p>Deux API très simulaires existent en fonction du comportement asynchrone ou synchrone souhaité. L'API synchrone est prévu pour être utilisée dans un {{domxref("Worker")}} et retournera les valeurs recherchées. The asynchronous API will not block and functions and the API will not return values; instead, you will need to supply a callback function to handle the response whenever it arrives.</p>
+Deux API très simulaires existent en fonction du comportement asynchrone ou synchrone souhaité. L'API synchrone est prévu pour être utilisée dans un {{domxref("Worker")}} et retournera les valeurs recherchées. The asynchronous API will not block and functions and the API will not return values; instead, you will need to supply a callback function to handle the response whenever it arrives.
 
-<h2 id="API_asynchrone">API asynchrone</h2>
+## API asynchrone
 
-<p>L'API asynchrone a les interfaces suivantes :</p>
+L'API asynchrone a les interfaces suivantes :
 
-<ul>
- <li><a href="/en/DOM/File_API/File_System_API/LocalFileSystem">LocalFileSystem</a> a deux méthodes globales qui vous permet d'avoir accès à un espace virtuel : requestFileSystem() et resolveLocalFileSystemURL().  Les méthodes sont implémentées par l'objet <a href="/fr/docs/window">window</a> et le worker global scope.</li>
- <li><a href="/en/DOM/File_API/File_System_API/FileSystem">FileSystem</a> représente un fichier système. L'objet est la passerelle à votre API toute entière.</li>
- <li><a href="/en/DOM/File_API/File_System_API/Entry">Entry</a> représente une entrée dans un fichier système. L'entrée peut être un fichier ou un dossier.</li>
- <li><a href="/en/DOM/File_API/File_System_API/DirectoryEntry">DirectoryEntry</a> représente un dossier dans un fichier système.</li>
- <li><a href="/en/DOM/File_API/File_System_API/DirectoryReader">DirectoryReader</a> vous permet la lecture de fichiers et dossiers à partir d'un dossier.</li>
- <li><a href="/en/DOM/File_API/File_System_API/FileEntry">FileEntry</a> représente un fichier dans un fichier système.</li>
- <li><a href="/en/DOM/File_API/File_System_API/FileError">FileError</a> est une erreur que vous pourriez rencontrer pendant l'utilisation des méthodes asynchrones.</li>
-</ul>
+- [LocalFileSystem](/en/DOM/File_API/File_System_API/LocalFileSystem) a deux méthodes globales qui vous permet d'avoir accès à un espace virtuel : requestFileSystem() et resolveLocalFileSystemURL().  Les méthodes sont implémentées par l'objet [window](/fr/docs/window) et le worker global scope.
+- [FileSystem](/en/DOM/File_API/File_System_API/FileSystem) représente un fichier système. L'objet est la passerelle à votre API toute entière.
+- [Entry](/en/DOM/File_API/File_System_API/Entry) représente une entrée dans un fichier système. L'entrée peut être un fichier ou un dossier.
+- [DirectoryEntry](/en/DOM/File_API/File_System_API/DirectoryEntry) représente un dossier dans un fichier système.
+- [DirectoryReader](/en/DOM/File_API/File_System_API/DirectoryReader) vous permet la lecture de fichiers et dossiers à partir d'un dossier.
+- [FileEntry](/en/DOM/File_API/File_System_API/FileEntry) représente un fichier dans un fichier système.
+- [FileError](/en/DOM/File_API/File_System_API/FileError) est une erreur que vous pourriez rencontrer pendant l'utilisation des méthodes asynchrones.
 
-<h2 id="API_synchrone">API synchrone</h2>
+## API synchrone
 
-<p>L'API synchrone est utile avec les <a href="/En/Using_web_workers">WebWorkers</a>. Contrairement à l'API asynchrone, l'API synchrone n'utilise pas les callbacks parce que les méthodes de l'API retournent des valeurs.</p>
+L'API synchrone est utile avec les [WebWorkers](/En/Using_web_workers). Contrairement à l'API asynchrone, l'API synchrone n'utilise pas les callbacks parce que les méthodes de l'API retournent des valeurs.
 
-<ul>
- <li><a href="/en/DOM/File_API/File_System_API/LocalFileSystemSync">LocalFileSystemSync</a> a deux méthodes globales qui vous permet d'avoir accès à un espace virtuel : requestFileSystemSync() et resolveLocalFileSystemSyncURL(). Les méthodes sont implémentées par l'objet worker.</li>
- <li><a href="/en/DOM/File_API/File_System_API/FileSystemSync">FileSystemSync</a> représente un fichier système.</li>
- <li><a href="/en/DOM/File_API/File_System_API/EntrySync">EntrySync</a> représente une entrée dans un fichier système. L'entrée peut être un fichier ou un dossier.</li>
- <li><a href="/en/DOM/File_API/File_System_API/DirectoryEntrySync">DirectoryEntrySync</a> représente un dossier dans un fichier système.</li>
- <li><a href="/en/DOM/File_API/File_System_API/DirectoryReaderSync">DirectoryReaderSync</a>  vous permet la lecture de fichiers et dossiers à partir d'un dossier.</li>
- <li><a href="/en/DOM/File_API/File_System_API/FileEntrySync">FileEntrySync</a> représente un fichier dans un fichier système.</li>
- <li><a href="/en/DOM/File_API/File_System_API/FileException">FileException</a> est une erreur que vous pourriez rencontrer pendant l'utilisation des méthodes synchrones.</li>
-</ul>
+- [LocalFileSystemSync](/en/DOM/File_API/File_System_API/LocalFileSystemSync) a deux méthodes globales qui vous permet d'avoir accès à un espace virtuel : requestFileSystemSync() et resolveLocalFileSystemSyncURL(). Les méthodes sont implémentées par l'objet worker.
+- [FileSystemSync](/en/DOM/File_API/File_System_API/FileSystemSync) représente un fichier système.
+- [EntrySync](/en/DOM/File_API/File_System_API/EntrySync) représente une entrée dans un fichier système. L'entrée peut être un fichier ou un dossier.
+- [DirectoryEntrySync](/en/DOM/File_API/File_System_API/DirectoryEntrySync) représente un dossier dans un fichier système.
+- [DirectoryReaderSync](/en/DOM/File_API/File_System_API/DirectoryReaderSync)  vous permet la lecture de fichiers et dossiers à partir d'un dossier.
+- [FileEntrySync](/en/DOM/File_API/File_System_API/FileEntrySync) représente un fichier dans un fichier système.
+- [FileException](/en/DOM/File_API/File_System_API/FileException) est une erreur que vous pourriez rencontrer pendant l'utilisation des méthodes synchrones.
 
-<h2 id="Compatibilité_navigateur">Compatibilité navigateur</h2>
+## Compatibilité navigateur
 
-<h3 id="FileSystem"><code>FileSystem</code></h3>
+### `FileSystem`
 
-<p>{{Compat("api.FileSystem", 0)}}</p>
+{{Compat("api.FileSystem", 0)}}
 
-<h3 id="FileSystemSync_property">Propriété <code>FileSystemSync</code></h3>
+### Propriété `FileSystemSync`
 
-<p>{{Compat("api.FileSystemSync", 0)}}</p>
+{{Compat("api.FileSystemSync", 0)}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>Particularité : {{ spec("http://dev.w3.org/2009/dap/file-system/pub/FileSystem/", "File API: Directories and System Specification", "NOTE") }}</li>
- <li>Commentaire Mozilla : <a href="https://hacks.mozilla.org/2012/07/why-no-filesystem-api-in-firefox/">Why no FileSystem API in Firefox?</a></li>
-</ul>
+- Particularité : {{ spec("http://dev.w3.org/2009/dap/file-system/pub/FileSystem/", "File API: Directories and System Specification", "NOTE") }}
+- Commentaire Mozilla : [Why no FileSystem API in Firefox?](https://hacks.mozilla.org/2012/07/why-no-filesystem-api-in-firefox/)
diff --git a/files/fr/web/api/filelist/index.md b/files/fr/web/api/filelist/index.md
index 41533953da..70e0401a74 100644
--- a/files/fr/web/api/filelist/index.md
+++ b/files/fr/web/api/filelist/index.md
@@ -7,65 +7,67 @@ tags:
   - Files
 translation_of: Web/API/FileList
 ---
-<div>{{APIRef("File API")}}{{gecko_minversion_header("1.9")}}</div>
+{{APIRef("File API")}}{{gecko_minversion_header("1.9")}}
 
-<p>Un objet <strong><code>FileList</code></strong> est renvoyé par la propriété <code>files</code> d'un élément HTML {{HTMLElement("input")}}. Il permet d'accéder à la liste des fichiers sélectionnés via l'élément <code>&lt;input type="file"&gt;</code>. Cet objet peut également être utilisé pour les fichiers glissés-déposés dans du contenu web via l'<a href="/fr/docs/Web/API/API_HTML_Drag_and_Drop">API Drag &amp; Drop</a> (voir l'objet <a href="/fr/docs/Web/API/DataTransfer"><code>DataTransfer</code></a> pour plus de détails).</p>
+Un objet **`FileList`** est renvoyé par la propriété `files` d'un élément HTML {{HTMLElement("input")}}. Il permet d'accéder à la liste des fichiers sélectionnés via l'élément `<input type="file">`. Cet objet peut également être utilisé pour les fichiers glissés-déposés dans du contenu web via l'[API Drag & Drop](/fr/docs/Web/API/API_HTML_Drag_and_Drop) (voir l'objet [`DataTransfer`](/fr/docs/Web/API/DataTransfer) pour plus de détails).
 
-<h2 id="Utiliser_une_liste_de_fichiers">Utiliser une liste de fichiers</h2>
+## Utiliser une liste de fichiers
 
-<p>Tous les éléments <code>&lt;input&gt;</code> possèdent un attribut <code>files</code> de type <code>FileList</code> qui permet d'accéder aux éléments de cette liste. Ainsi, si le code HTML utilisé est :</p>
+Tous les éléments `<input>` possèdent un attribut `files` de type `FileList` qui permet d'accéder aux éléments de cette liste. Ainsi, si le code HTML utilisé est :
 
-<pre>&lt;input id="fileItem" type="file"&gt;
-</pre>
+    <input id="fileItem" type="file">
 
-<p>On pourra utiliser la ligne suivant pour récupérer le premier fichier de la liste sous la forme d'un objet <a href="/fr/docs/Web/API/File"><code>File</code></a> :</p>
+On pourra utiliser la ligne suivant pour récupérer le premier fichier de la liste sous la forme d'un objet [`File`](/fr/docs/Web/API/File) :
 
-<pre class="brush: js">var file = document.getElementById('fileItem').files[0]</pre>
+```js
+var file = document.getElementById('fileItem').files[0]
+```
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <td class="header">Attribut</td>
-   <td class="header">Type</td>
-   <td class="header">Description</td>
-  </tr>
-  <tr>
-   <td><code>length</code></td>
-   <td><code>integer</code></td>
-   <td>Une valeur en lecture seule qui indique le nombre de fichier dans la liste.</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <td class="header">Attribut</td>
+      <td class="header">Type</td>
+      <td class="header">Description</td>
+    </tr>
+    <tr>
+      <td><code>length</code></td>
+      <td><code>integer</code></td>
+      <td>
+        Une valeur en lecture seule qui indique le nombre de fichier dans la
+        liste.
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Méthodes">Méthodes</h2>
+## Méthodes
 
-<h3 id="item()"><code>item()</code></h3>
+### `item()`
 
-<p>Cette méthode renvoie un objet <a href="/fr/docs/Web/API/File"><code>File</code></a> qui représente le fichier à l'indice fourni.</p>
+Cette méthode renvoie un objet [`File`](/fr/docs/Web/API/File) qui représente le fichier à l'indice fourni.
 
-<pre> File item(
-   index
- );
-</pre>
+     File item(
+       index
+     );
 
-<h4 id="Paramètres">Paramètres</h4>
+#### Paramètres
 
-<dl>
- <dt><code>index</code></dt>
- <dd>Un indice (commençant à partir de zéro) indiquant le fichier qu'on souhaite récupérer de la liste.</dd>
-</dl>
+- `index`
+  - : Un indice (commençant à partir de zéro) indiquant le fichier qu'on souhaite récupérer de la liste.
 
-<h4 id="Valeur_de_retour">Valeur de retour</h4>
+#### Valeur de retour
 
-<p>L'objet <a href="/fr/docs/Web/API/File"><code>File</code></a> qui représente le fichier demandé.</p>
+L'objet [`File`](/fr/docs/Web/API/File) qui représente le fichier demandé.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans cet exemple, on parcourt l'ensemble des fichiers sélectionnés par l'utilisateur via un élément {{HTMLElement("input")}} :</p>
+Dans cet exemple, on parcourt l'ensemble des fichiers sélectionnés par l'utilisateur via un élément {{HTMLElement("input")}} :
 
-<pre class="brush:js">// fileInput est un élément HTML input : &lt;input type="file" id="myfileinput" multiple&gt;
+```js
+// fileInput est un élément HTML input : <input type="file" id="myfileinput" multiple>
 var fileInput = document.getElementById("myfileinput");
 
 // files est un objet FileList (semblable à NodeList)
@@ -73,30 +75,33 @@ var files = fileInput.files;
 var file;
 
 // on parcourt les fichiers
-for (var i = 0; i &lt; files.length; i++) {
+for (var i = 0; i < files.length; i++) {
     // on récupère le i-ème fichier
     file = files.item(i);
     // ou encore
     file = files[i];
     console.log(file.name);
 }
-</pre>
+```
 
-<h3 id="Exemple_complet">Exemple complet</h3>
+### Exemple complet
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;input id="myfiles" multiple type="file"&gt;</pre>
+```html
+<input id="myfiles" multiple type="file">
+```
 
-<h4 id="JavaScript">JavaScript</h4>
+#### JavaScript
 
-<pre class="brush: js">var recupererFichiers = function() {
+```js
+var recupererFichiers = function() {
   var fichiersInput = document.querySelector("#myFiles");
   var fichiers = fichiersInput.files;
 
   var nbFichiers = fichiers.length;
   var i = 0;
-  while(i &lt; nbFichiers){
+  while(i < nbFichiers){
     var fichier = fichiers[i];
     console.log(fichier.name);
     i++;
@@ -105,44 +110,26 @@ for (var i = 0; i &lt; files.length; i++) {
 
 // On invoque cette fonction pour chaque modification apportée à l'élément
 // input
-document.querySelector("#myFiles").onchange = recupererFichiers;</pre>
+document.querySelector("#myFiles").onchange = recupererFichiers;
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Exemple_complet")}}</p>
+{{EmbedLiveSample("Exemple_complet")}}
 
-<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('File API', '#filelist-section', 'FileList')}}</td>
-   <td>{{Spec2('File API')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', '#concept-input-type-file-selected', 'selected files')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                | État                             | Commentaires |
+| ------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------ |
+| {{SpecName('File API', '#filelist-section', 'FileList')}}                                 | {{Spec2('File API')}}     |              |
+| {{SpecName('HTML WHATWG', '#concept-input-type-file-selected', 'selected files')}} | {{Spec2('HTML WHATWG')}} |              |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.FileList")}}</p>
+{{Compat("api.FileList")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/API/File/Using_files_from_web_applications">Utiliser des fichiers dans des applications web</a></li>
- <li><code><a href="/fr/docs/Web/API/File">File</a></code></li>
- <li><code><a href="/fr/docs/Web/API/FileReader">FileReader</a></code></li>
-</ul>
+- [Utiliser des fichiers dans des applications web](/fr/docs/Web/API/File/Using_files_from_web_applications)
+- [`File`](/fr/docs/Web/API/File)
+- [`FileReader`](/fr/docs/Web/API/FileReader)
diff --git a/files/fr/web/api/filereader/filereader/index.md b/files/fr/web/api/filereader/filereader/index.md
index 53c3cedb1e..5e13f908c3 100644
--- a/files/fr/web/api/filereader/filereader/index.md
+++ b/files/fr/web/api/filereader/filereader/index.md
@@ -8,52 +8,40 @@ tags:
   - Reference
 translation_of: Web/API/FileReader/FileReader
 ---
-<p><strong><code>FileReader()</code></strong>  est un constructeur qui permet de créer un nouvel objet FileReader.</p>
+**`FileReader()`**  est un constructeur qui permet de créer un nouvel objet FileReader.
 
-<p>Pour plus de details à propos de <code>FileReader</code>, visiter <a href="/en-US/docs/Web/API/File/Using_files_from_web_applications">Using files from web applications</a>.</p>
+Pour plus de details à propos de `FileReader`, visiter [Using files from web applications](/en-US/docs/Web/API/File/Using_files_from_web_applications).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">var reader = new FileReader();</pre>
+```js
+var reader = new FileReader();
+```
 
-<h3 id="Paramèteres">Paramèteres</h3>
+### Paramèteres
 
-<p>Aucun.</p>
+Aucun.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>L'extrait de code ci-dessous montre la création d'un objet <code><a href="/en-US/docs/Web/API/FileReader">FileReader</a></code> en utilisant le constructeur <code>FileReader()</code>  ainsi qu'une utilisation subséquente de cet objet:</p>
+L'extrait de code ci-dessous montre la création d'un objet [`FileReader`](/en-US/docs/Web/API/FileReader) en utilisant le constructeur `FileReader()`  ainsi qu'une utilisation subséquente de cet objet:
 
-<pre class="brush: js">function printFile(file) {
+```js
+function printFile(file) {
   var reader = new FileReader();
   reader.onload = function(evt) {
     console.log(evt.target.result);
   };
   reader.readAsText(file);
 }
-</pre>
-
-<h2 id="Caractéristiques">Caractéristiques</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Caractéristique</th>
-   <th scope="col">Status</th>
-   <th scope="col">Commentaire</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('File API')}}</td>
-   <td>{{Spec2('File API')}}</td>
-   <td>Définition Initiale</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/API/File/Using_files_from_web_applications">Using files from web applications</a></li>
-</ul>
+```
+
+## Caractéristiques
+
+| Caractéristique                  | Status                       | Commentaire         |
+| -------------------------------- | ---------------------------- | ------------------- |
+| {{SpecName('File API')}} | {{Spec2('File API')}} | Définition Initiale |
+
+## Voir aussi
+
+- [Using files from web applications](/en-US/docs/Web/API/File/Using_files_from_web_applications)
diff --git a/files/fr/web/api/filereader/index.md b/files/fr/web/api/filereader/index.md
index 913886ed27..5457e2427a 100644
--- a/files/fr/web/api/filereader/index.md
+++ b/files/fr/web/api/filereader/index.md
@@ -8,115 +8,94 @@ tags:
   - Référence(2)
 translation_of: Web/API/FileReader
 ---
-<div>{{APIRef("File API")}}</div>
-
-<p>L'objet <strong><code>FileReader</code></strong> permet à des applications web de lire le contenu de fichiers (ou de tampons de mémoire brute) de façon asynchrone. On peut ainsi lire le contenu des objets {{domxref("File")}} ou {{domxref("Blob")}} (qui représentent respectivement un fichier ou des données).</p>
-
-<p>Les objets qui sont des fichiers peuvent être obtenus à partir d'un objet {{domxref("FileList")}}, renvoyé lorsque l'utilisateur sélectionne des fichiers grâce à un élément {{HTMLElement("input")}}, via un glisser-déposer avec un objet <a href="/fr/docs/Web/API/DataTransfer"><code>DataTransfer</code></a> ou grâce à l'API <code>mozGetAsFile()</code> API de {{domxref("HTMLCanvasElement")}}.</p>
-
-<p>{{AvailableInWorkers}}</p>
-
-<h2 id="Constructeur">Constructeur</h2>
-
-<dl>
- <dt>{{domxref("FileReader.FileReader", "FileReader()")}}</dt>
- <dd>Ce constructeur renvoie un nouvel objet <code>FileReader</code>.</dd>
-</dl>
-
-<p>Pour plus d'informations et d'exemples, consulter <a href="/fr/docs/Using_files_from_web_applications">utiliser des fichiers depuis des applications web</a>.</p>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<dl>
- <dt>{{domxref("FileReader.error")}} {{readonlyinline}}</dt>
- <dd>Un objet {{domxref("DOMError")}} qui représente l'erreur qui s'est produite lors de la lecture du fichier.</dd>
- <dt>{{domxref("FileReader.readyState")}} {{readonlyinline}}</dt>
- <dd>Un nombre qui indique l'état du <code>FileReader</code>. Cette valeur est l'une des suivantes :
- <table class="standard-table">
-  <tbody>
-   <tr>
-    <td><code>EMPTY</code></td>
-    <td><code>0</code></td>
-    <td>Aucune donnée n'a encore été chargée.</td>
-   </tr>
-   <tr>
-    <td><code>LOADING</code></td>
-    <td><code>1</code></td>
-    <td>Des données sont en cours de chargement.</td>
-   </tr>
-   <tr>
-    <td><code>DONE</code></td>
-    <td><code>2</code></td>
-    <td>La demande de lecture est complètement terminée.</td>
-   </tr>
-  </tbody>
- </table>
- </dd>
- <dt>{{domxref("FileReader.result")}} {{readonlyinline}}</dt>
- <dd>Le contenu du fichier. Cette propriété est uniquement valide lorsque l'opération de lecture est terminée et le format des données dépend de la méthode utilisée pour l'opération de lecture.</dd>
-</dl>
-
-<h3 id="Gestionnaire_d'évènements">Gestionnaire d'évènements</h3>
-
-<dl>
- <dt>{{domxref("FileReader.onabort")}}</dt>
- <dd>Un gestionnaire pour l'évènement {{event("abort")}}. Cet évènement est déclenché à chaque fois que l'opération de lecture est interrompue.</dd>
- <dt>{{domxref("FileReader.onerror")}}</dt>
- <dd>Un gestionnaire pour l'évènement {{event("error")}}. Cet évènement est déclenché à chaque fois qu'il y a une erreur pendant l'opération de lecture.</dd>
- <dt>{{domxref("FileReader.onload")}}</dt>
- <dd>Un gestionnaire pour l'évènement {{event("load")}}. Cet évènement est déclenché à chaque fois qu'une opération de lecture est menée à bien.</dd>
- <dt>{{domxref("FileReader.onloadstart")}}</dt>
- <dd>Un gestionnaire pour l'évènement {{event("loadstart")}}. Cet évènement est déclenché chaque fois qu'une opération de lecture commence.</dd>
- <dt>{{domxref("FileReader.onloadend")}}</dt>
- <dd>Un gestionnaire pour l'évènement {{event("loadend")}}. Cet évènement est déclenché chaque fois qu'une opération de lecture est terminée (que ce soit un succès ou un échec).</dd>
- <dt>{{domxref("FileReader.onprogress")}}</dt>
- <dd>Un gestionnaire pour l'évènement {{event("progress")}}. Cet évènement est déclenché lorsque la lecture du {{domxref("Blob")}} est en cours.</dd>
-</dl>
-
-<div class="note">
-<p><strong>Note :</strong> <code>FileReader</code> hérite de l'interface {{domxref("EventTarget")}} et tout ces évènements peuvent donc être « écoutés » grâce à la méthode {{domxref("EventTarget.addEventListener()","addEventListener")}}.</p>
-</div>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<dl>
- <dt>{{domxref("FileReader.abort()")}}</dt>
- <dd>Cette méthode interrompt l'opération de lecture. Après avoir renvoyé une valeur, l'état <code>readyState</code> aura la valeur <code>DONE</code>.</dd>
- <dt>{{domxref("FileReader.readAsArrayBuffer()")}} {{gecko_minversion_inline("7.0")}}</dt>
- <dd>Cette méthode démarre la lecture du contenu pour le blob indiqué. Une fois que la lecture est terminée, l'attribut <code>result</code> contient un objet {{domxref("ArrayBuffer")}} représentant les données du fichier.</dd>
- <dt>{{domxref("FileReader.readAsBinaryString()")}} {{non-standard_inline}}</dt>
- <dd>Cette méthode démarre la lecture du contenu pour le blob indiqué. Une fois que la lecture est terminée, l'attribut <code>result</code> contient les données binaires brutes sous la forme d'une chaîne de caractères.</dd>
- <dt>{{domxref("FileReader.readAsDataURL()")}}</dt>
- <dd>Cette méthode démarre la lecture du contenu pour le blob indiqué. Une fois que la lecture est terminée, l'attribut <code>result</code> contient une URL de données qui représente les données du fichier.</dd>
- <dt>{{domxref("FileReader.readAsText()")}}</dt>
- <dd>Cette méthode démarre la lecture du contenu pour le blob indiqué. Une fois la lecture terminée, l'attribut <code>result</code> contient les données du fichier sous la forme d'une chaîne de caractères.</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("File API", "#dfn-filereader", "FileReader")}}</td>
-   <td>{{Spec2("File API")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.FileReader")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Using_files_from_web_applications">Manipuler des fichiers depuis des applications web</a></li>
- <li>{{domxref("File")}}</li>
- <li>{{domxref("Blob")}}</li>
-</ul>
+{{APIRef("File API")}}
+
+L'objet **`FileReader`** permet à des applications web de lire le contenu de fichiers (ou de tampons de mémoire brute) de façon asynchrone. On peut ainsi lire le contenu des objets {{domxref("File")}} ou {{domxref("Blob")}} (qui représentent respectivement un fichier ou des données).
+
+Les objets qui sont des fichiers peuvent être obtenus à partir d'un objet {{domxref("FileList")}}, renvoyé lorsque l'utilisateur sélectionne des fichiers grâce à un élément {{HTMLElement("input")}}, via un glisser-déposer avec un objet [`DataTransfer`](/fr/docs/Web/API/DataTransfer) ou grâce à l'API `mozGetAsFile()` API de {{domxref("HTMLCanvasElement")}}.
+
+{{AvailableInWorkers}}
+
+## Constructeur
+
+- {{domxref("FileReader.FileReader", "FileReader()")}}
+  - : Ce constructeur renvoie un nouvel objet `FileReader`.
+
+Pour plus d'informations et d'exemples, consulter [utiliser des fichiers depuis des applications web](/fr/docs/Using_files_from_web_applications).
+
+## Propriétés
+
+- {{domxref("FileReader.error")}} {{readonlyinline}}
+  - : Un objet {{domxref("DOMError")}} qui représente l'erreur qui s'est produite lors de la lecture du fichier.
+- {{domxref("FileReader.readyState")}} {{readonlyinline}}
+
+  - : Un nombre qui indique l'état du `FileReader`. Cette valeur est l'une des suivantes :
+
+    <table class="standard-table">
+      <tbody>
+        <tr>
+          <td><code>EMPTY</code></td>
+          <td><code>0</code></td>
+          <td>Aucune donnée n'a encore été chargée.</td>
+        </tr>
+        <tr>
+          <td><code>LOADING</code></td>
+          <td><code>1</code></td>
+          <td>Des données sont en cours de chargement.</td>
+        </tr>
+        <tr>
+          <td><code>DONE</code></td>
+          <td><code>2</code></td>
+          <td>La demande de lecture est complètement terminée.</td>
+        </tr>
+      </tbody>
+    </table>
+
+- {{domxref("FileReader.result")}} {{readonlyinline}}
+  - : Le contenu du fichier. Cette propriété est uniquement valide lorsque l'opération de lecture est terminée et le format des données dépend de la méthode utilisée pour l'opération de lecture.
+
+### Gestionnaire d'évènements
+
+- {{domxref("FileReader.onabort")}}
+  - : Un gestionnaire pour l'évènement {{event("abort")}}. Cet évènement est déclenché à chaque fois que l'opération de lecture est interrompue.
+- {{domxref("FileReader.onerror")}}
+  - : Un gestionnaire pour l'évènement {{event("error")}}. Cet évènement est déclenché à chaque fois qu'il y a une erreur pendant l'opération de lecture.
+- {{domxref("FileReader.onload")}}
+  - : Un gestionnaire pour l'évènement {{event("load")}}. Cet évènement est déclenché à chaque fois qu'une opération de lecture est menée à bien.
+- {{domxref("FileReader.onloadstart")}}
+  - : Un gestionnaire pour l'évènement {{event("loadstart")}}. Cet évènement est déclenché chaque fois qu'une opération de lecture commence.
+- {{domxref("FileReader.onloadend")}}
+  - : Un gestionnaire pour l'évènement {{event("loadend")}}. Cet évènement est déclenché chaque fois qu'une opération de lecture est terminée (que ce soit un succès ou un échec).
+- {{domxref("FileReader.onprogress")}}
+  - : Un gestionnaire pour l'évènement {{event("progress")}}. Cet évènement est déclenché lorsque la lecture du {{domxref("Blob")}} est en cours.
+
+> **Note :** `FileReader` hérite de l'interface {{domxref("EventTarget")}} et tout ces évènements peuvent donc être « écoutés » grâce à la méthode {{domxref("EventTarget.addEventListener()","addEventListener")}}.
+
+## Méthodes
+
+- {{domxref("FileReader.abort()")}}
+  - : Cette méthode interrompt l'opération de lecture. Après avoir renvoyé une valeur, l'état `readyState` aura la valeur `DONE`.
+- {{domxref("FileReader.readAsArrayBuffer()")}} {{gecko_minversion_inline("7.0")}}
+  - : Cette méthode démarre la lecture du contenu pour le blob indiqué. Une fois que la lecture est terminée, l'attribut `result` contient un objet {{domxref("ArrayBuffer")}} représentant les données du fichier.
+- {{domxref("FileReader.readAsBinaryString()")}} {{non-standard_inline}}
+  - : Cette méthode démarre la lecture du contenu pour le blob indiqué. Une fois que la lecture est terminée, l'attribut `result` contient les données binaires brutes sous la forme d'une chaîne de caractères.
+- {{domxref("FileReader.readAsDataURL()")}}
+  - : Cette méthode démarre la lecture du contenu pour le blob indiqué. Une fois que la lecture est terminée, l'attribut `result` contient une URL de données qui représente les données du fichier.
+- {{domxref("FileReader.readAsText()")}}
+  - : Cette méthode démarre la lecture du contenu pour le blob indiqué. Une fois la lecture terminée, l'attribut `result` contient les données du fichier sous la forme d'une chaîne de caractères.
+
+## Spécifications
+
+| Spécification                                                                | État                         | Commentaires         |
+| ---------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName("File API", "#dfn-filereader", "FileReader")}} | {{Spec2("File API")}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.FileReader")}}
+
+## Voir aussi
+
+- [Manipuler des fichiers depuis des applications web](/fr/docs/Using_files_from_web_applications)
+- {{domxref("File")}}
+- {{domxref("Blob")}}
diff --git a/files/fr/web/api/filereader/readasarraybuffer/index.md b/files/fr/web/api/filereader/readasarraybuffer/index.md
index cba515b488..f0063940c0 100644
--- a/files/fr/web/api/filereader/readasarraybuffer/index.md
+++ b/files/fr/web/api/filereader/readasarraybuffer/index.md
@@ -8,50 +8,31 @@ tags:
   - Méthodes
 translation_of: Web/API/FileReader/readAsArrayBuffer
 ---
-<p>{{APIRef("File API")}}</p>
+{{APIRef("File API")}}
 
-<p>La méthode <strong><code>readAsArrayBuffer()</code></strong> de l'interface {{domxref("FileReader")}} permet de lire un {{domxref("Blob")}} ou un {{domxref("File")}} (<em>fichier</em>). Quand l'opération est finie, l'attribut {{domxref("FileReader.readyState","readyState")}} prend la valeur <code>"DONE"</code> (<em>terminé</em>) à savoir <code>2</code>, et l'événement {{event("loadend")}} est levé. L'attribut {{domxref("FileReader.result","résultat")}} contient alors les données lues sous la forme d'un objet {{domxref("ArrayBuffer")}}.</p>
+La méthode **`readAsArrayBuffer()`** de l'interface {{domxref("FileReader")}} permet de lire un {{domxref("Blob")}} ou un {{domxref("File")}} (_fichier_). Quand l'opération est finie, l'attribut {{domxref("FileReader.readyState","readyState")}} prend la valeur `"DONE"` (_terminé_) à savoir `2`, et l'événement {{event("loadend")}} est levé. L'attribut {{domxref("FileReader.result","résultat")}} contient alors les données lues sous la forme d'un objet {{domxref("ArrayBuffer")}}.
 
-<div class="note">
-<p><strong>Note :</strong> La méthode {{domxref("Blob.arrayBuffer()")}} est une nouvelle API basée sur les promesses permettant de lire un fichier.</p>
-</div>
+> **Note :** La méthode {{domxref("Blob.arrayBuffer()")}} est une nouvelle API basée sur les promesses permettant de lire un fichier.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>instanceOfFileReader</em>.readAsArrayBuffer(<em>blob</em>);</pre>
+    instanceOfFileReader.readAsArrayBuffer(blob);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>blob</code></dt>
- <dd>Le {{domxref("Blob")}} ou le {{domxref("File")}} (<em>fichier</em>) devant être lu.</dd>
-</dl>
+- `blob`
+  - : Le {{domxref("Blob")}} ou le {{domxref("File")}} (_fichier_) devant être lu.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName("File API", "#readAsArrayBuffer", "FileReader.readAsArrayBuffer")}}</td>
-   <td>{{Spec2("File API")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                            | Statut                       | Commentaire          |
+| -------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName("File API", "#readAsArrayBuffer", "FileReader.readAsArrayBuffer")}} | {{Spec2("File API")}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
+{{Compat("api.FileReader.readAsArrayBuffer")}}.
 
+## Voir aussi
 
-<p>{{Compat("api.FileReader.readAsArrayBuffer")}}.</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("FileReader")}}</li>
-</ul>
+- {{domxref("FileReader")}}
diff --git a/files/fr/web/api/filereader/readasbinarystring/index.md b/files/fr/web/api/filereader/readasbinarystring/index.md
index 2155291f2b..418c9f4f88 100644
--- a/files/fr/web/api/filereader/readasbinarystring/index.md
+++ b/files/fr/web/api/filereader/readasbinarystring/index.md
@@ -3,30 +3,29 @@ title: FileReader.readAsBinaryString()
 slug: Web/API/FileReader/readAsBinaryString
 translation_of: Web/API/FileReader/readAsBinaryString
 ---
-<div>{{APIRef("File API")}}</div>
+{{APIRef("File API")}}
 
-<p>La méthode <code>readAsArrayBuffer()</code> de l'interface {{domxref("FileReader")}} permet de lire un {{domxref("Blob")}} ou un {{domxref("File")}} (<em>fichier</em>). Quand l'opération est finie, l'attribut {{domxref("FileReader.readyState","readyState")}} prend la valeur <code>"DONE"</code> (<em>terminé</em>), et l'événement {{event("loadend")}} est levé.</p>
+La méthode `readAsArrayBuffer()` de l'interface {{domxref("FileReader")}} permet de lire un {{domxref("Blob")}} ou un {{domxref("File")}} (_fichier_). Quand l'opération est finie, l'attribut {{domxref("FileReader.readyState","readyState")}} prend la valeur `"DONE"` (_terminé_), et l'événement {{event("loadend")}} est levé.
 
-<p>L'attribut {{domxref("FileReader.result","result")}} contient alors les données binaires brutes lues.</p>
+L'attribut {{domxref("FileReader.result","result")}} contient alors les données binaires brutes lues.
 
-<p>Notez que cette méthode fût enlevée de l'API, mais réintroduite pour des raison de compatibilité ascendante.</p>
+Notez que cette méthode fût enlevée de l'API, mais réintroduite pour des raison de compatibilité ascendante.
 
-<p>L'utilisation de {{domxref("FileReader.readAsArrayBuffer()")}} est recomandée.</p>
+L'utilisation de {{domxref("FileReader.readAsArrayBuffer()")}} est recomandée.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>instanceOfFileReader</em>.readAsBinaryString(blob);</pre>
+    instanceOfFileReader.readAsBinaryString(blob);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>blob</code></dt>
- <dd>Le {{domxref("Blob")}} or {{domxref("File")}} devant être lu.</dd>
-</dl>
+- `blob`
+  - : Le {{domxref("Blob")}} or {{domxref("File")}} devant être lu.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">var canvas = document.createElement('canvas');
+```js
+var canvas = document.createElement('canvas');
 var height = 200;
 var width  = 200;
 
@@ -48,35 +47,19 @@ canvas.toBlob(function (blob) {
   }
 
   reader.readAsBinaryString(blob);
-});</pre>
+});
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('File API','#readAsBinaryString','readAsBinaryString')}}</td>
-   <td>{{Spec2('File API')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+| Specification                                                                            | Status                       | Comment |
+| ---------------------------------------------------------------------------------------- | ---------------------------- | ------- |
+| {{SpecName('File API','#readAsBinaryString','readAsBinaryString')}} | {{Spec2('File API')}} |         |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
+{{Compat("api.FileReader.readAsBinaryString")}}
 
+## See also
 
-<p>{{Compat("api.FileReader.readAsBinaryString")}}</p>
-
-<h2 id="See_also">See also</h2>
-
-<ul>
- <li>{{domxref("FileReader")}}</li>
-</ul>
+- {{domxref("FileReader")}}
diff --git a/files/fr/web/api/filereader/readasdataurl/index.md b/files/fr/web/api/filereader/readasdataurl/index.md
index 04dbbd93f1..01642d791a 100644
--- a/files/fr/web/api/filereader/readasdataurl/index.md
+++ b/files/fr/web/api/filereader/readasdataurl/index.md
@@ -9,31 +9,32 @@ tags:
   - Reference
 translation_of: Web/API/FileReader/readAsDataURL
 ---
-<div>{{APIRef("API File")}}</div>
+{{APIRef("API File")}}
 
-<p>La méthode <code>readAsDataURL</code> permet de lire le contenu de l’objet  {{domxref("Blob")}} ou {{domxref("File")}} spécifié. À la fin de l’opération de lecture, la propriété {{domxref("FileReader.readyState","readyState")}} renvoie l’état <code>DONE</code>, et l’évènement {{event("loadend")}} se déclenche. À ce moment-là, l’attribut {{domxref("FileReader.result","result")}} contient les données dans une URL représentant les données du fichier sous forme de chaîne encodée en base64.</p>
+La méthode `readAsDataURL` permet de lire le contenu de l’objet  {{domxref("Blob")}} ou {{domxref("File")}} spécifié. À la fin de l’opération de lecture, la propriété {{domxref("FileReader.readyState","readyState")}} renvoie l’état `DONE`, et l’évènement {{event("loadend")}} se déclenche. À ce moment-là, l’attribut {{domxref("FileReader.result","result")}} contient les données dans une URL représentant les données du fichier sous forme de chaîne encodée en base64.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>instanceOfFileReader</em>.readAsDataURL(blob);</pre>
+    instanceOfFileReader.readAsDataURL(blob);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>blob</code></dt>
- <dd>L’argument {{domxref("Blob")}} ou {{domxref("File")}} à partir duquel exécuter la lecture.</dd>
-</dl>
+- `blob`
+  - : L’argument {{domxref("Blob")}} ou {{domxref("File")}} à partir duquel exécuter la lecture.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;input type="file" onchange="previewFile()"&gt;&lt;br&gt;
-&lt;img src="" height="200" alt="Aperçu de l’image..."&gt;</pre>
+```html
+<input type="file" onchange="previewFile()"><br>
+<img src="" height="200" alt="Aperçu de l’image...">
+```
 
-<h3 id="JavaScript">JavaScript</h3>
+### JavaScript
 
-<pre class="brush: js">function previewFile() {
+```js
+function previewFile() {
   var preview = document.querySelector('img');
   var file    = document.querySelector('input[type=file]').files[0];
   var reader  = new FileReader();
@@ -45,24 +46,28 @@ translation_of: Web/API/FileReader/readAsDataURL
   if (file) {
     reader.readAsDataURL(file);
   }
-}</pre>
+}
+```
+
+### Résultat en direct
 
-<h3 id="Résultat_en_direct">Résultat en direct</h3>
+{{EmbedLiveSample("Example", "100%", 240)}}
 
-<p>{{EmbedLiveSample("Example", "100%", 240)}}</p>
 
-<p> </p>
 
-<h2 id="Exemple_de_lecture_de_plusieurs_fichiers">Exemple de lecture de plusieurs fichiers</h2>
+## Exemple de lecture de plusieurs fichiers
 
-<h3 id="HTML_2">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;input id="browse" type="file" onchange="previewFiles()" multiple&gt;
-&lt;div id="preview"&gt;&lt;/div&gt;</pre>
+```html
+<input id="browse" type="file" onchange="previewFiles()" multiple>
+<div id="preview"></div>
+```
 
-<h3 id="JavaScript_2">JavaScript</h3>
+### JavaScript
 
-<pre class="brush: js">function previewFiles() {
+```js
+function previewFiles() {
 
   var preview = document.querySelector('#preview');
   var files   = document.querySelector('input[type=file]').files;
@@ -91,35 +96,20 @@ translation_of: Web/API/FileReader/readAsDataURL
   }
 
 }
-</pre>
-
-<div class="note">
-  <p><strong>Note :</strong> Le constructeur <a href="/en-US/docs/Web/API/FileReader"><code>FileReader()</code></a> n’est pas pris en charge dans les versions IE antérieures à Internet Explorer 10. Pour un code compatible avec tous les navigateurs, accédez à notre <a href="https://mdn.mozillademos.org/files/3699/crossbrowser_image_preview.html">solution d’aperçu d’image multinavigateur</a>. Examinez également cette <a href="https://mdn.mozillademos.org/files/3698/image_upload_preview.html">alternative plus puissante</a>.</p>
-</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">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName("API File", "#FileReader-interface", "FileReader")}}</td>
-   <td>{{Spec2("API File")}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_avec_les_navigateurs">Compatibilité avec les navigateurs</h2>
-
-<p>{{Compat("api.FileReader.readAsDataURL")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("FileReader")}}</li>
-</ul>
+```
+
+> **Note :** Le constructeur [`FileReader()`](/en-US/docs/Web/API/FileReader) n’est pas pris en charge dans les versions IE antérieures à Internet Explorer 10. Pour un code compatible avec tous les navigateurs, accédez à notre [solution d’aperçu d’image multinavigateur](https://mdn.mozillademos.org/files/3699/crossbrowser_image_preview.html). Examinez également cette [alternative plus puissante](https://mdn.mozillademos.org/files/3698/image_upload_preview.html).
+
+## Spécifications
+
+| Spécification                                                                        | État                         | Commentaire         |
+| ------------------------------------------------------------------------------------ | ---------------------------- | ------------------- |
+| {{SpecName("API File", "#FileReader-interface", "FileReader")}} | {{Spec2("API File")}} | Définition initiale |
+
+## Compatibilité avec les navigateurs
+
+{{Compat("api.FileReader.readAsDataURL")}}
+
+## Voir aussi
+
+- {{domxref("FileReader")}}
diff --git a/files/fr/web/api/filereader/readastext/index.md b/files/fr/web/api/filereader/readastext/index.md
index cceb86eff2..63833ac3b9 100644
--- a/files/fr/web/api/filereader/readastext/index.md
+++ b/files/fr/web/api/filereader/readastext/index.md
@@ -9,54 +9,41 @@ tags:
   - Reference
 translation_of: Web/API/FileReader/readAsText
 ---
-<div>{{APIRef("File API")}}</div>
+{{APIRef("File API")}}
 
-<p>La méthode <code>readAsText</code> est utilisée pour lire le contenu du {{domxref("Blob")}} ou {{domxref("File")}} spécifié en paramètre. Lorsque la lecture est terminée, l'état {{domxref("FileReader.readyState","readyState")}} passe à <code>DONE</code>, l'événement {{event("loadend")}} est lancé, et l'attribut {{domxref("FileReader.result","result")}} contient le contenu du fichier sous forme de chaîne de caractères.</p>
+La méthode `readAsText` est utilisée pour lire le contenu du {{domxref("Blob")}} ou {{domxref("File")}} spécifié en paramètre. Lorsque la lecture est terminée, l'état {{domxref("FileReader.readyState","readyState")}} passe à `DONE`, l'événement {{event("loadend")}} est lancé, et l'attribut {{domxref("FileReader.result","result")}} contient le contenu du fichier sous forme de chaîne de caractères.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>instanceOfFileReader</em>.readAsText(blob[, encoding]);</pre>
+    instanceOfFileReader.readAsText(blob[, encoding]);
 
-<h3 id="Parameters">Parameters</h3>
+### Parameters
 
-<dl>
- <dt><code>blob</code></dt>
- <dd>Le {{domxref("Blob")}} ou {{domxref("File")}} qui doit être lu.</dd>
- <dt>encoding {{optional_inline}}</dt>
- <dd>Une chaîne de caractères spécifiant l'encodage utilisé dans les données de retour. Par défaut, UTF-8 est utilisé lorsque le paramètre n'est pas spécifié.</dd>
-</dl>
+- `blob`
+  - : Le {{domxref("Blob")}} ou {{domxref("File")}} qui doit être lu.
+- encoding {{optional_inline}}
+  - : Une chaîne de caractères spécifiant l'encodage utilisé dans les données de retour. Par défaut, UTF-8 est utilisé lorsque le paramètre n'est pas spécifié.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: js">var selectedFile = document.getElementById('input').files[0];
+```js
+var selectedFile = document.getElementById('input').files[0];
 var content = document.getElementById('content');
 var reader = new FileReader();
 reader.onload = function(event) { content.innerHTML = reader.result; };
-reader.readAsText(selectedFile);</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName("File API", "#FileReader-interface", "FileReader")}}</td>
-   <td>{{Spec2("File API")}}</td>
-   <td>Définition initale</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.FileReader.readAsText")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("FileReader")}}</li>
-</ul>
+reader.readAsText(selectedFile);
+```
+
+## Spécifications
+
+| Specification                                                                        | État                         | Commentaires       |
+| ------------------------------------------------------------------------------------ | ---------------------------- | ------------------ |
+| {{SpecName("File API", "#FileReader-interface", "FileReader")}} | {{Spec2("File API")}} | Définition initale |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.FileReader.readAsText")}}
+
+## Voir aussi
+
+- {{domxref("FileReader")}}
diff --git a/files/fr/web/api/filerequest/index.md b/files/fr/web/api/filerequest/index.md
index b3a223f334..d881bf6af2 100644
--- a/files/fr/web/api/filerequest/index.md
+++ b/files/fr/web/api/filerequest/index.md
@@ -8,47 +8,32 @@ tags:
   - Interface
 translation_of: Web/API/FileRequest
 ---
-<p>{{APIRef("File System API")}} {{non-standard_header}}</p>
+{{APIRef("File System API")}} {{non-standard_header}}
 
-<h2 id="Résumé">Résumé</h2>
+## Résumé
 
-<p>L'interface <code>FileRequest</code> étend l'interface {{domxref("DOMRequest")}} pour fournir des propriétés supplémentaires nécessaires aux objets {{domxref("LockedFile")}}.</p>
+L'interface `FileRequest` étend l'interface {{domxref("DOMRequest")}} pour fournir des propriétés supplémentaires nécessaires aux objets {{domxref("LockedFile")}}.
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<dl>
- <dt>{{domxref("FileRequest.lockedFile")}} {{readonlyinline}}</dt>
- <dd>L'objet {{domxref("LockedFile")}} à partir duquel la demande a été lancée.</dd>
- <dt>{{domxref("FileRequest.onprogress")}}</dt>
- <dd>Un gestionnaire de rappel appelé à plusieurs reprises alors que l'opération représentée par la <code>FileRequest</code> est en cours.</dd>
-</dl>
+- {{domxref("FileRequest.lockedFile")}} {{readonlyinline}}
+  - : L'objet {{domxref("LockedFile")}} à partir duquel la demande a été lancée.
+- {{domxref("FileRequest.onprogress")}}
+  - : Un gestionnaire de rappel appelé à plusieurs reprises alors que l'opération représentée par la `FileRequest` est en cours.
 
-<p>L'interface <code>FileRequest</code> hérite également de l'interface {{domxref("DOMRequest")}}.</p>
+L'interface `FileRequest` hérite également de l'interface {{domxref("DOMRequest")}}.
 
-<h2 id="Method_overview">Méthodes</h2>
+## Méthodes
 
-<p>Aucune.</p>
+Aucune.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('FileSystem')}}</td>
-   <td>{{Spec2('FileSystem')}}</td>
-   <td>Brouillon proposé.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                        | Statut                           | Commentaire        |
+| ------------------------------------ | -------------------------------- | ------------------ |
+| {{SpecName('FileSystem')}} | {{Spec2('FileSystem')}} | Brouillon proposé. |
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("FileHandle")}}</li>
- <li>{{domxref("LockedFile")}}</li>
-</ul>
+- {{domxref("FileHandle")}}
+- {{domxref("LockedFile")}}
diff --git a/files/fr/web/api/filerequest/lockedfile/index.md b/files/fr/web/api/filerequest/lockedfile/index.md
index 18a3138b9c..43ca95f4ce 100644
--- a/files/fr/web/api/filerequest/lockedfile/index.md
+++ b/files/fr/web/api/filerequest/lockedfile/index.md
@@ -8,41 +8,27 @@ tags:
   - Propriétés
 translation_of: Web/API/FileRequest/lockedFile
 ---
-<p>{{APIRef("File System API")}} {{non-standard_header}}</p>
+{{APIRef("File System API")}} {{non-standard_header}}
 
-<h2 id="Résumé">Résumé</h2>
+## Résumé
 
-<p>La propriété <code>lockedFile</code> représente l'objet {{domxref("LockedFile")}} à partir duquel la requête a été lancée.</p>
+La propriété `lockedFile` représente l'objet {{domxref("LockedFile")}} à partir duquel la requête a été lancée.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var lockedFile = <em>instanceOfFileRequest</em>.lockedFile
-</pre>
+    var lockedFile = instanceOfFileRequest.lockedFile
 
-<h2 id="Valeur">Valeur</h2>
+## Valeur
 
-<p>Un objet {{domxref("LockedFile")}}.</p>
+Un objet {{domxref("LockedFile")}}.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('FileSystem')}}</td>
-   <td>{{Spec2('FileSystem')}}</td>
-   <td>Brouillon proposé.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                        | Statut                           | Commentaire        |
+| ------------------------------------ | -------------------------------- | ------------------ |
+| {{SpecName('FileSystem')}} | {{Spec2('FileSystem')}} | Brouillon proposé. |
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("FileRequest")}}</li>
- <li>{{domxref("LockedFile")}}</li>
-</ul>
+- {{domxref("FileRequest")}}
+- {{domxref("LockedFile")}}
diff --git a/files/fr/web/api/filerequest/onprogress/index.md b/files/fr/web/api/filerequest/onprogress/index.md
index 5567917dc9..82f162eb8c 100644
--- a/files/fr/web/api/filerequest/onprogress/index.md
+++ b/files/fr/web/api/filerequest/onprogress/index.md
@@ -8,29 +8,27 @@ tags:
   - Propriétés
 translation_of: Web/API/FileRequest/onprogress
 ---
-<p>{{APIRef("File System API")}} {{non-standard_header}}</p>
+{{APIRef("File System API")}} {{non-standard_header}}
 
-<p>Cette propriété spécifie une fonction de rappel devant être exécutée de façon répétée pendant que l'opération représentée par un objet  {{ domxref("FileRequest") }} est en cours.</p>
+Cette propriété spécifie une fonction de rappel devant être exécutée de façon répétée pendant que l'opération représentée par un objet  {{ domxref("FileRequest") }} est en cours.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="eval"><em>instanceOfFileRequest</em>.onprogress = <em>function</em>;
-</pre>
+    instanceOfFileRequest.onprogress = function;
 
-<p>Où <code><em>instanceOfFileRequest</em></code> est un objet {{ domxref("FileRequest") }} et <code><em>function</em></code> est la fonction JavaScript à exécuter.</p>
+Où `instanceOfFileRequest` est un objet {{ domxref("FileRequest") }} et `function` est la fonction JavaScript à exécuter.
 
-<p>Chaque fois que la fonction callback est appelée, elle obtient un objet en tant que premier paramètre. Ces objets contiennent deux propriétés :</p>
+Chaque fois que la fonction callback est appelée, elle obtient un objet en tant que premier paramètre. Ces objets contiennent deux propriétés :
 
-<dl>
- <dt><code>loaded</code></dt>
- <dd>Un nombre représentant la quantité actuelle d'octets traités par l'opération.</dd>
- <dt><code>total</code></dt>
- <dd>Un nombre représentant le nombre total d'octets qui seront traités par l'opération.</dd>
-</dl>
+- `loaded`
+  - : Un nombre représentant la quantité actuelle d'octets traités par l'opération.
+- `total`
+  - : Un nombre représentant le nombre total d'octets qui seront traités par l'opération.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">// Supposons 'request' qui est un objet FileRequest
+```js
+// Supposons 'request' qui est un objet FileRequest
 
 request.onprogress = function (status) {
   var progress = document.querySelector('progress');
@@ -38,15 +36,13 @@ request.onprogress = function (status) {
   progress.value = status.loaded;
   progress.max   = status.total;
 }
-</pre>
+```
 
-<h2 id="Specification">Spécification</h2>
+## Spécification
 
-<p>Ne fait partie d'aucune spécification.</p>
+Ne fait partie d'aucune spécification.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{ domxref("DOMRequest") }}</li>
- <li>{{ domxref("LockedFile") }}</li>
-</ul>
+- {{ domxref("DOMRequest") }}
+- {{ domxref("LockedFile") }}
diff --git a/files/fr/web/api/focusevent/index.md b/files/fr/web/api/focusevent/index.md
index b3ca995846..757974f7b8 100644
--- a/files/fr/web/api/focusevent/index.md
+++ b/files/fr/web/api/focusevent/index.md
@@ -9,55 +9,36 @@ tags:
   - Interface
 translation_of: Web/API/FocusEvent
 ---
-<p>{{APIRef("DOM Events")}}{{SeeCompatTable}}</p>
+{{APIRef("DOM Events")}}{{SeeCompatTable}}
 
-<p>L'interface <strong><code>FocusEvent</code> </strong>représente les événements liés au focus tels que<code> </code>{{event("focus")}}, {{event("blur")}}, {{event("focusin")}} ou {{event("focusout")}}.</p>
+L'interface **`FocusEvent` **représente les événements liés au focus tels que` `{{event("focus")}}, {{event("blur")}}, {{event("focusin")}} ou {{event("focusout")}}.
 
-<h2 id="Constructeur">Constructeur</h2>
+## Constructeur
 
-<dl>
- <dt>{{domxref("FocusEvent.FocusEvent", "FocusEvent()")}}</dt>
- <dd>crée un événement <strong>FocusEvent </strong>avec les paramètres donnés<strong>.</strong></dd>
-</dl>
+- {{domxref("FocusEvent.FocusEvent", "FocusEvent()")}}
+  - : crée un événement **FocusEvent** avec les paramètres donnés**.**
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<p><em>Hértite des propriétés de son parent domxref("UIEvent")}} et indirectement de {{domxref("Event")}}</em>.</p>
+_Hértite des propriétés de son parent domxref("UIEvent")}} et indirectement de {{domxref("Event")}}_.
 
-<dl>
- <dt>{{domxref("FocusEvent.relatedTarget")}} {{readonlyInline}}</dt>
- <dd>est un {{domxref("EventTarget")}} représentant une cible secondaire pour cet événement. Car dans certain cas (comme quand vous tabulez dans ou hors de la page), cette propriété peut être définie comme étant nulle pour des raisons de sécurité.</dd>
-</dl>
+- {{domxref("FocusEvent.relatedTarget")}} {{readonlyInline}}
+  - : est un {{domxref("EventTarget")}} représentant une cible secondaire pour cet événement. Car dans certain cas (comme quand vous tabulez dans ou hors de la page), cette propriété peut être définie comme étant nulle pour des raisons de sécurité.
 
-<h2 id="Méthodes">Méthodes</h2>
+## Méthodes
 
-<p><em>Aucune méthode spécifique ; Hérite des propriétés de son parent<em> {{domxref("UIEvent")}} </em>et indirectement de {{domxref("Event")}}</em>.</p>
+_Aucune méthode spécifique ; Hérite des propriétés de son parent _{{domxref("UIEvent")}}_ et indirectement de {{domxref("Event")}}_.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM3 Events', '#interface-FocusEvent', 'FocusEvent')}}</td>
-   <td>{{Spec2('DOM3 Events')}}</td>
-   <td>Première définition.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                            | Statut                           | Commentaire          |
+| ---------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName('DOM3 Events', '#interface-FocusEvent', 'FocusEvent')}} | {{Spec2('DOM3 Events')}} | Première définition. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
+{{Compat("api.FocusEvent")}}
 
+## Voir aussi
 
-<p>{{Compat("api.FocusEvent")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>L'interface de base {{domxref("Event")}}</li>
-</ul>
+- L'interface de base {{domxref("Event")}}
diff --git a/files/fr/web/api/force_touch_events/index.md b/files/fr/web/api/force_touch_events/index.md
index f20d66888f..665399eaa6 100644
--- a/files/fr/web/api/force_touch_events/index.md
+++ b/files/fr/web/api/force_touch_events/index.md
@@ -8,45 +8,39 @@ tags:
   - Mobile
 translation_of: Web/API/Force_Touch_events
 ---
-<p>{{DefaultAPISidebar("Force Touch events")}}</p>
+{{DefaultAPISidebar("Force Touch events")}}
 
-<p>{{Non-standard_header()}}</p>
+{{Non-standard_header()}}
 
-<p><strong>Force Touch events</strong> est une fonctionnalité propriétaire propre à Apple et qui rend possibles (si supporté par le matériel d'entrée) de nouvelles interactions basées sur le fait que l'utilisateur clique ou appuie sur l'écran tactile ou sur le trackpad.</p>
+**Force Touch events** est une fonctionnalité propriétaire propre à Apple et qui rend possibles (si supporté par le matériel d'entrée) de nouvelles interactions basées sur le fait que l'utilisateur clique ou appuie sur l'écran tactile ou sur le trackpad.
 
-<h2 id="Évènements">Évènements</h2>
+## Évènements
 
-<dl>
- <dt>{{event("webkitmouseforcewillbegin")}} {{non-standard_inline}}</dt>
- <dd>Cet évènement est lancé avant l'évènement {{event("mousedown")}}. Son utilisation principale est de permettre {{domxref("Event.preventDefault()")}}.</dd>
- <dt>{{event("webkitmouseforcedown")}} {{non-standard_inline}}</dt>
- <dd>Cet évènement est lancé après l'évènement {{event("mousedown")}} dès qu'une pression suffisante a été appliquée pour qu'il puisse être qualifié de "clic de force".</dd>
- <dt>{{event("webkitmouseforceup")}} {{non-standard_inline}}</dt>
- <dd>Cet évènement est lancé après l'évènement {{event("webkitmouseforcedown")}} dès que la pression a été suffisamment réduite pour terminer le "clic de force".</dd>
- <dt>{{event("webkitmouseforcechanged")}} {{non-standard_inline}}</dt>
- <dd>Cet évènement est lancé chaque fois que la quantité de pression change. Il se déclenche d'abord après l'événement {{event ("mousedown")}} et s'arrête avant l'événement {{event ("mouseup")}}.</dd>
-</dl>
+- {{event("webkitmouseforcewillbegin")}} {{non-standard_inline}}
+  - : Cet évènement est lancé avant l'évènement {{event("mousedown")}}. Son utilisation principale est de permettre {{domxref("Event.preventDefault()")}}.
+- {{event("webkitmouseforcedown")}} {{non-standard_inline}}
+  - : Cet évènement est lancé après l'évènement {{event("mousedown")}} dès qu'une pression suffisante a été appliquée pour qu'il puisse être qualifié de "clic de force".
+- {{event("webkitmouseforceup")}} {{non-standard_inline}}
+  - : Cet évènement est lancé après l'évènement {{event("webkitmouseforcedown")}} dès que la pression a été suffisamment réduite pour terminer le "clic de force".
+- {{event("webkitmouseforcechanged")}} {{non-standard_inline}}
+  - : Cet évènement est lancé chaque fois que la quantité de pression change. Il se déclenche d'abord après l'événement {{event ("mousedown")}} et s'arrête avant l'événement {{event ("mouseup")}}.
 
-<h2 id="Propriété_des_évènements">Propriété des évènements</h2>
+## Propriété des évènements
 
-<p>La propriété suivante est connue pour être disponible sur les objets évènement {{event("webkitmouseforcewillbegin")}}, {{event("mousedown")}}, {{event("webkitmouseforcechanged")}}, {{event("webkitmouseforcedown")}}, {{event("webkitmouseforceup")}}, {{event("mousemove")}} et {{event("mouseup")}}:</p>
+La propriété suivante est connue pour être disponible sur les objets évènement {{event("webkitmouseforcewillbegin")}}, {{event("mousedown")}}, {{event("webkitmouseforcechanged")}}, {{event("webkitmouseforcedown")}}, {{event("webkitmouseforceup")}}, {{event("mousemove")}} et {{event("mouseup")}}:
 
-<dl>
- <dt>{{domxref("MouseEvent.webkitForce")}} {{non-standard_inline()}} {{readonlyinline}}</dt>
- <dd>La quantité de pression actuellement appliquée sur le trackpad / écran tactile.</dd>
-</dl>
+- {{domxref("MouseEvent.webkitForce")}} {{non-standard_inline()}} {{readonlyinline}}
+  - : La quantité de pression actuellement appliquée sur le trackpad / écran tactile.
 
-<h2 id="Constantes">Constantes</h2>
+## Constantes
 
-<p>Ces constantes sont utiles pour déterminer l'intensité relative de la pression indiquée par {{domxref ("MouseEvent.webkitForce")}} :</p>
+Ces constantes sont utiles pour déterminer l'intensité relative de la pression indiquée par {{domxref ("MouseEvent.webkitForce")}} :
 
-<dl>
- <dt>{{domxref("MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN")}} {{non-standard_inline}}{{readonlyinline}}</dt>
- <dd>Force minimum nécessaire pour un click normal.</dd>
- <dt>{{domxref("MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN")}} {{non-standard_inline}}{{readonlyinline}}</dt>
- <dd>Force minimum nécessaire pour un click de force.</dd>
-</dl>
+- {{domxref("MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN")}} {{non-standard_inline}}{{readonlyinline}}
+  - : Force minimum nécessaire pour un click normal.
+- {{domxref("MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN")}} {{non-standard_inline}}{{readonlyinline}}
+  - : Force minimum nécessaire pour un click de force.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p><em>Ne fait partie d'aucune spécification.</em> Apple a <a href="https://developer.apple.com/library/prerelease/mac/documentation/AppleApplications/Conceptual/SafariJSProgTopics/RespondingtoForceTouchEventsfromJavaScript.html">une description dans la bibilitothèque Mac Developer</a>.</p>
+_Ne fait partie d'aucune spécification._ Apple a [une description dans la bibilitothèque Mac Developer](https://developer.apple.com/library/prerelease/mac/documentation/AppleApplications/Conceptual/SafariJSProgTopics/RespondingtoForceTouchEventsfromJavaScript.html).
diff --git a/files/fr/web/api/formdata/append/index.md b/files/fr/web/api/formdata/append/index.md
index 80ab87cb3f..6c0450b234 100644
--- a/files/fr/web/api/formdata/append/index.md
+++ b/files/fr/web/api/formdata/append/index.md
@@ -11,88 +11,75 @@ tags:
   - XMLHttpRequest
 translation_of: Web/API/FormData/append
 ---
-<p>{{APIRef("XMLHttpRequest")}}</p>
+{{APIRef("XMLHttpRequest")}}
 
-<p>La méthode <code><strong>append()</strong></code> de l'interface {{domxref("FormData")}} ajoute une nouvelle valeur à une clé existante dans un objet <code>FormData</code>, ou rajoute cette clé et cette valeur quand elle n'existe pas.</p>
+La méthode **`append()`** de l'interface {{domxref("FormData")}} ajoute une nouvelle valeur à une clé existante dans un objet `FormData`, ou rajoute cette clé et cette valeur quand elle n'existe pas.
 
-<p>La différence entre {{domxref("FormData.set")}} et <code>append()</code> est que, quand la clé existe, {{domxref("FormData.set")}} va remplacer les valeurs existantes avec la nouvelle alors qu' <code>append()</code> va rajouter celle-ci à la fin de l'ensemble des valeurs existantes.</p>
+La différence entre {{domxref("FormData.set")}} et `append()` est que, quand la clé existe, {{domxref("FormData.set")}} va remplacer les valeurs existantes avec la nouvelle alors qu' `append()` va rajouter celle-ci à la fin de l'ensemble des valeurs existantes.
 
-<div class="note">
-<p><strong>Note :</strong> Cette méthode est disponible dans les <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
-</div>
+> **Note :** Cette méthode est disponible dans les [Web Workers](/en-US/docs/Web/API/Web_Workers_API).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>Il y a deux versions de cette méthode : avec deux ou trois paramètres</p>
+Il y a deux versions de cette méthode : avec deux ou trois paramètres
 
-<pre class="brush: js">formData.append(name, value);
-formData.append(name, value, filename);</pre>
+```js
+formData.append(name, value);
+formData.append(name, value, filename);
+```
 
-<h3 id="append_Parameters">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>name</code></dt>
- <dd>Le nom de la clé dont les données sont contenues dans <code>value</code>.</dd>
- <dt><code>value</code></dt>
- <dd>La valeur du champ clé. Elle peut être une {{domxref("USVString")}} ou un {{domxref("Blob")}} (incluant les sous-classes comme {{domxref("File")}}).</dd>
- <dt><code>filename </code>{{optional_inline}}</dt>
- <dd>Le nom du fichier envoyé au serveur (a {{domxref("USVString")}}), quand un {{domxref("Blob")}} ou un {{domxref("File")}} est passé en second paramètre. Le nom du fichier par défaut pour des objets {{domxref("Blob")}} est "blob". Le nom du fichier par défaut pour des objets {{domxref("File")}} est le nom du fichier de l'objet.</dd>
-</dl>
+- `name`
+  - : Le nom de la clé dont les données sont contenues dans `value`.
+- `value`
+  - : La valeur du champ clé. Elle peut être une {{domxref("USVString")}} ou un {{domxref("Blob")}} (incluant les sous-classes comme {{domxref("File")}}).
+- `filename `{{optional_inline}}
+  - : Le nom du fichier envoyé au serveur (a {{domxref("USVString")}}), quand un {{domxref("Blob")}} ou un {{domxref("File")}} est passé en second paramètre. Le nom du fichier par défaut pour des objets {{domxref("Blob")}} est "blob". Le nom du fichier par défaut pour des objets {{domxref("File")}} est le nom du fichier de l'objet.
 
-<div class="note">
-<p><strong>Note:</strong> Si vous spécifiez un  {{domxref("Blob")}} comme donnée rattachée à un objet de type <code>FormData</code>, le nom de fichier envoyé au serveur sera dans l'entête "Content-Disposition" mais peut varier selon le navigateur.</p>
-</div>
+> **Note :** Si vous spécifiez un  {{domxref("Blob")}} comme donnée rattachée à un objet de type `FormData`, le nom de fichier envoyé au serveur sera dans l'entête "Content-Disposition" mais peut varier selon le navigateur.
 
-<h3 id="Retours">Retours</h3>
+### Retours
 
-<p>Void.</p>
+Void.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>La ligne suivante crée un objet <code>FormData</code> vide :</p>
+La ligne suivante crée un objet `FormData` vide :
 
-<pre class="brush: js">var formData = new FormData(); // Actuellement vide</pre>
+```js
+var formData = new FormData(); // Actuellement vide
+```
 
-<p>Vous pouvez rajouter des paires clé/valeur en utilisant {{domxref("FormData.append")}}:</p>
+Vous pouvez rajouter des paires clé/valeur en utilisant {{domxref("FormData.append")}}:
 
-<pre class="brush: js">formData.append('username', 'Chris');
-formData.append('userpic', myFileInput.files[0], 'chris.jpg');</pre>
+```js
+formData.append('username', 'Chris');
+formData.append('userpic', myFileInput.files[0], 'chris.jpg');
+```
 
-<p>Comme pour un formulaire classique, vous pouvez ajouter plusieurs valeurs pour la même clé. Par exemple ( et pour être en accord avec les conventions de nommage PHP, on ajoute [] au nom de la clé):</p>
+Comme pour un formulaire classique, vous pouvez ajouter plusieurs valeurs pour la même clé. Par exemple ( et pour être en accord avec les conventions de nommage PHP, on ajoute \[] au nom de la clé):
 
-<pre class="brush: js">formData.append('userpic[]', myFileInput.files[0], 'chris1.jpg');
-formData.append('userpic[]', myFileInput.files[1], 'chris2.jpg');</pre>
+```js
+formData.append('userpic[]', myFileInput.files[0], 'chris1.jpg');
+formData.append('userpic[]', myFileInput.files[1], 'chris2.jpg');
+```
 
-<p>Cette technique permet de simplement gérer l'envoi de plusieurs fichiers avec l'envoi d'une structure facilement itérable.</p>
+Cette technique permet de simplement gérer l'envoi de plusieurs fichiers avec l'envoi d'une structure facilement itérable.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('XMLHttpRequest','#dom-formdata-append','append()')}}</td>
-   <td>{{Spec2('XMLHttpRequest')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                        | Statut                               | Commentaire         |
+| ------------------------------------------------------------------------------------ | ------------------------------------ | ------------------- |
+| {{SpecName('XMLHttpRequest','#dom-formdata-append','append()')}} | {{Spec2('XMLHttpRequest')}} | Définition initiale |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
+{{Compat("api.FormData.append")}}
 
+## Voir aussi
 
-<p>{{Compat("api.FormData.append")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("XMLHTTPRequest")}}</li>
- <li><a href="/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest">Utiliser XMLHttpRequest</a></li>
- <li><a href="/fr/docs/Web/API/FormData/Utilisation_objets_FormData">Utiliser les objets FormData</a></li>
- <li>{{HTMLElement("Form")}}</li>
-</ul>
+- {{domxref("XMLHTTPRequest")}}
+- [Utiliser XMLHttpRequest](/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest)
+- [Utiliser les objets FormData](/fr/docs/Web/API/FormData/Utilisation_objets_FormData)
+- {{HTMLElement("Form")}}
diff --git a/files/fr/web/api/formdata/delete/index.md b/files/fr/web/api/formdata/delete/index.md
index 551431a588..737804897a 100644
--- a/files/fr/web/api/formdata/delete/index.md
+++ b/files/fr/web/api/formdata/delete/index.md
@@ -11,68 +11,54 @@ tags:
   - delete
 translation_of: Web/API/FormData/delete
 ---
-<p>{{APIRef("XMLHttpRequest")}}</p>
+{{APIRef("XMLHttpRequest")}}
 
-<p>La méthode <code><strong>delete()</strong></code> de l'interface {{domxref("FormData")}} supprime une clé et sa (ses) valeur(s) d'un objet <code>FormData</code>.</p>
+La méthode **`delete()`** de l'interface {{domxref("FormData")}} supprime une clé et sa (ses) valeur(s) d'un objet `FormData`.
 
-<div class="note">
-<p><strong>Note :</strong> Cette méthode est disponible dans les <a href="/fr/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
-</div>
+> **Note :** Cette méthode est disponible dans les [Web Workers](/fr/docs/Web/API/Web_Workers_API).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">formData.delete(name);</pre>
+```js
+formData.delete(name);
+```
 
-<h3 id="append_Parameters">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>name</code></dt>
- <dd>Le nom de la clé que vous voulez supprimer.</dd>
-</dl>
+- `name`
+  - : Le nom de la clé que vous voulez supprimer.
 
-<h3 id="Retours">Retours</h3>
+### Retours
 
-<p>Void.</p>
+Void.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>La ligne suivante crée un objet <code>FormData</code> vide et le pré-remplit avec les paires clé/valeur d'un formulaire :</p>
+La ligne suivante crée un objet `FormData` vide et le pré-remplit avec les paires clé/valeur d'un formulaire :
 
-<pre class="brush: js">var formData = new FormData(myForm);</pre>
+```js
+var formData = new FormData(myForm);
+```
 
-<p>Vous pouvez supprimer les clés et leurs valeurs en utilisant <code>delete()</code>:</p>
+Vous pouvez supprimer les clés et leurs valeurs en utilisant `delete()`:
 
-<pre class="brush: js">formData.delete('username');
-</pre>
+```js
+formData.delete('username');
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('XMLHttpRequest','#dom-formdata-delete','delete()')}}</td>
-   <td>{{Spec2('XMLHttpRequest')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                        | Statut                               | Commentaire |
+| ------------------------------------------------------------------------------------ | ------------------------------------ | ----------- |
+| {{SpecName('XMLHttpRequest','#dom-formdata-delete','delete()')}} | {{Spec2('XMLHttpRequest')}} |             |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
+{{Compat("api.FormData.delete")}}
 
+## Voir aussi
 
-<p>{{Compat("api.FormData.delete")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("XMLHTTPRequest")}}</li>
- <li><a href="/fr/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest">Utiliser XMLHttpRequest</a></li>
- <li><a href="/fr/docs/Web/API/FormData/Utilisation_objets_FormData">Utiliser les objets FormData</a></li>
- <li>{{HTMLElement("Form")}}</li>
-</ul>
+- {{domxref("XMLHTTPRequest")}}
+- [Utiliser XMLHttpRequest](/fr/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest)
+- [Utiliser les objets FormData](/fr/docs/Web/API/FormData/Utilisation_objets_FormData)
+- {{HTMLElement("Form")}}
diff --git a/files/fr/web/api/formdata/entries/index.md b/files/fr/web/api/formdata/entries/index.md
index dc940b71b6..b8c8df5899 100644
--- a/files/fr/web/api/formdata/entries/index.md
+++ b/files/fr/web/api/formdata/entries/index.md
@@ -11,26 +11,25 @@ tags:
   - XMLHttpRequest
 translation_of: Web/API/FormData/entries
 ---
-<p>{{APIRef("XMLHttpRequest")}}</p>
+{{APIRef("XMLHttpRequest")}}
 
-<p>La methode <strong>FormData.entries()</strong> retourne un {{jsxref("Les_protocoles_iteration",'iterateur')}} permettant d'accéder aux paires clefs/valeurs contenues dans cet objet.<br>
- La clef de chaque paire est une {{domxref("USVString")}}. De la même manière, la valeur peut être une {{domxref("USVString")}} ou un {{domxref("Blob")}}.</p>
+La methode **FormData.entries()** retourne un {{jsxref("Les_protocoles_iteration",'iterateur')}} permettant d'accéder aux paires clefs/valeurs contenues dans cet objet.
+La clef de chaque paire est une {{domxref("USVString")}}. De la même manière, la valeur peut être une {{domxref("USVString")}} ou un {{domxref("Blob")}}.
 
-<div class="note">
-<p><strong>Note :</strong> Cette methode est disponible dans les <a href="/fr/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
-</div>
+> **Note :** Cette methode est disponible dans les [Web Workers](/fr/docs/Web/API/Web_Workers_API).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">formData.entries();</pre>
+    formData.entries();
 
-<h3 id="Valeur_retournée">Valeur retournée</h3>
+### Valeur retournée
 
-<p>Retourne un {{jsxref("Les_protocoles_iteration","iterateur")}}.</p>
+Retourne un {{jsxref("Les_protocoles_iteration","iterateur")}}.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">// Creation d'un objet FormData
+```js
+// Creation d'un objet FormData
 var formData = new FormData();
 formData.append('key1', 'value1');
 formData.append('key2', 'value2');
@@ -39,43 +38,26 @@ formData.append('key2', 'value2');
 for(var pair of formData.entries()) {
    console.log(pair[0]+ ', '+ pair[1]);
 }
-</pre>
+```
 
-<p>Le resultat est:</p>
+Le resultat est:
 
-<pre>key1, value1
-key2, value2</pre>
+    key1, value1
+    key2, value2
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('XMLHttpRequest','#dom-formdata','entries() (as iterator&lt;&gt;)')}}</td>
-   <td>{{Spec2('XMLHttpRequest')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                | Statut                               | Commentaire         |
+| ------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ------------------- |
+| {{SpecName('XMLHttpRequest','#dom-formdata','entries() (as iterator&lt;&gt;)')}} | {{Spec2('XMLHttpRequest')}} | Définition initiale |
 
-<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+## Compatibilité navigateurs
 
-<div>
+{{Compat("api.FormData.entries")}}
 
+## Voir aussi
 
-<p>{{Compat("api.FormData.entries")}}</p>
-</div>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("XMLHTTPRequest")}}</li>
- <li><a href="/fr/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest">Utiliser XMLHttpRequest</a></li>
- <li><a href="/fr/docs/Web/API/FormData/Utilisation_objets_FormData">Utiliser les objets FormData</a></li>
- <li>{{HTMLElement("Form")}}</li>
-</ul>
+- {{domxref("XMLHTTPRequest")}}
+- [Utiliser XMLHttpRequest](/fr/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest)
+- [Utiliser les objets FormData](/fr/docs/Web/API/FormData/Utilisation_objets_FormData)
+- {{HTMLElement("Form")}}
diff --git a/files/fr/web/api/formdata/formdata/index.md b/files/fr/web/api/formdata/formdata/index.md
index 3852b6d2be..5e9b2e5cc1 100644
--- a/files/fr/web/api/formdata/formdata/index.md
+++ b/files/fr/web/api/formdata/formdata/index.md
@@ -10,90 +10,77 @@ tags:
   - XMLHttpRequest
 translation_of: Web/API/FormData/FormData
 ---
-<p>{{APIRef("XMLHttpRequest")}}</p>
+{{APIRef("XMLHttpRequest")}}
 
-<p>Le constructeur <code><strong>FormData()</strong></code> crée un nouvel objet {{domxref("FormData")}}.</p>
+Le constructeur **`FormData()`** crée un nouvel objet {{domxref("FormData")}}.
 
-<div class="note">
-<p><strong>Note :</strong> Cette fonctionnalité est disponible dans <a href="/fr/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
-</div>
+> **Note :** Cette fonctionnalité est disponible dans [Web Workers](/fr/docs/Web/API/Web_Workers_API).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js"><code>var formData = new FormData(</code><code>form</code><code>)</code></pre>
+```js
+var formData = new FormData(form)
+```
 
-<h3 id="Parameters">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>form </code>{{optional_inline}}</dt>
- <dd>Un element HTML {{HTMLElement("form")}} — quand il est spécifié, l'objet {{domxref("FormData")}} sera rempli avec les clés/valeurs du formulaire en utilisant les noms de propriétés de chaque élément pour clé et les valeurs soumises. Cela encodera aussi le contenu des fichiers.</dd>
-</dl>
+- `form `{{optional_inline}}
+  - : Un element HTML {{HTMLElement("form")}} — quand il est spécifié, l'objet {{domxref("FormData")}} sera rempli avec les clés/valeurs du formulaire en utilisant les noms de propriétés de chaque élément pour clé et les valeurs soumises. Cela encodera aussi le contenu des fichiers.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>La ligne suivante crée un objet <code>FormData</code> vide:</p>
+La ligne suivante crée un objet `FormData` vide:
 
-<pre class="brush: js">var formData = new FormData(); // Formulaire vide à cet instant</pre>
+```js
+var formData = new FormData(); // Formulaire vide à cet instant
+```
 
-<p>Vous pouvez ajouter un couple clé/valeur en utilisant {{domxref("FormData.append")}} :</p>
+Vous pouvez ajouter un couple clé/valeur en utilisant {{domxref("FormData.append")}} :
 
-<pre class="brush: js">formData.append('username', 'Chris');
-</pre>
+```js
+formData.append('username', 'Chris');
+```
 
-<p>Ou vous pouvez spécifier l'argument optionnel <code><em>form</em></code> à la création de l'objet <code>FormData</code> pour le pré-remplir avec les valeurs issues du formulaire spécifié :</p>
+Ou vous pouvez spécifier l'argument optionnel `form` à la création de l'objet `FormData` pour le pré-remplir avec les valeurs issues du formulaire spécifié :
 
-<pre class="brush: html">&lt;form id="myForm" name="myForm"&gt;
-  &lt;div&gt;
-    &lt;label for="username"&gt;Enter name:&lt;/label&gt;
-    &lt;input type="text" id="username" name="username"&gt;
-  &lt;/div&gt;
-  &lt;div&gt;
-    &lt;label for="useracc"&gt;Enter account number:&lt;/label&gt;
-    &lt;input type="text" id="useracc" name="useracc"&gt;
-  &lt;/div&gt;
-  &lt;div&gt;
-    &lt;label for="userfile"&gt;Upload file:&lt;/label&gt;
-    &lt;input type="file" id="userfile" name="userfile"&gt;
-  &lt;/div&gt;
-&lt;input type="submit" value="Submit!"&gt;
-&lt;/form&gt;
-</pre>
+```html
+<form id="myForm" name="myForm">
+  <div>
+    <label for="username">Enter name:</label>
+    <input type="text" id="username" name="username">
+  </div>
+  <div>
+    <label for="useracc">Enter account number:</label>
+    <input type="text" id="useracc" name="useracc">
+  </div>
+  <div>
+    <label for="userfile">Upload file:</label>
+    <input type="file" id="userfile" name="userfile">
+  </div>
+<input type="submit" value="Submit!">
+</form>
+```
 
-<div class="note">
-<p><strong>Note :</strong> Seuls les champs de formulaires valides sont inclus dans un objet FormData, c'est-à-dire ceux qui portent un nom (attribut <code>name</code>), qui ne sont pas désactivés et qui sont cochés (boutons radio et cases à cocher) ou sélectionnés (une ou plusieurs options dans une sélection).</p>
-</div>
+> **Note :** Seuls les champs de formulaires valides sont inclus dans un objet FormData, c'est-à-dire ceux qui portent un nom (attribut `name`), qui ne sont pas désactivés et qui sont cochés (boutons radio et cases à cocher) ou sélectionnés (une ou plusieurs options dans une sélection).
 
-<pre class="brush: js">var myForm = document.getElementById('myForm');
-formData = new FormData(myForm);</pre>
+```js
+var myForm = document.getElementById('myForm');
+formData = new FormData(myForm);
+```
 
-<h2 id="Spécifications">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">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('XMLHttpRequest','#dom-formdata','FormData()')}}</td>
-   <td>{{Spec2('XMLHttpRequest')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                    | Statut                               | Commentaires         |
+| -------------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName('XMLHttpRequest','#dom-formdata','FormData()')}} | {{Spec2('XMLHttpRequest')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.FormData.FormData")}}</p>
+{{Compat("api.FormData.FormData")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("XMLHTTPRequest")}}</li>
- <li><a href="/fr/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest">Manipuler <code>XMLHttpRequest</code></a></li>
- <li><a href="/fr/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects">Utiliser les objets <code>FormData</code></a></li>
- <li>{{HTMLElement("Form")}}</li>
-</ul>
+- {{domxref("XMLHTTPRequest")}}
+- [Manipuler `XMLHttpRequest`](/fr/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest)
+- [Utiliser les objets `FormData`](/fr/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects)
+- {{HTMLElement("Form")}}
diff --git a/files/fr/web/api/formdata/get/index.md b/files/fr/web/api/formdata/get/index.md
index 5eec93c7e9..d5b08c1c1c 100644
--- a/files/fr/web/api/formdata/get/index.md
+++ b/files/fr/web/api/formdata/get/index.md
@@ -4,63 +4,59 @@ slug: Web/API/FormData/get
 translation_of: Web/API/FormData/get
 browser-compat: api.FormData.get
 ---
-<p>{{APIRef("XMLHttpRequest")}}</p>
+{{APIRef("XMLHttpRequest")}}
 
-<p>La méthode <strong><code>get()</code></strong> de l'interface <a href="/fr/docs/Web/API/FormData"><code>FormData</code></a> renvoie la première valeur associée à une clé donnée dans un objet <code>FormData</code>. Si vous souhaitez manipuler plusieurs valeurs et les récupérer intégralement, utilisez plutôt la méthode <a href="/fr/docs/Web/API/FormData/getAll"><code>getAll()</code></a>.</p>
+La méthode **`get()`** de l'interface [`FormData`](/fr/docs/Web/API/FormData) renvoie la première valeur associée à une clé donnée dans un objet `FormData`. Si vous souhaitez manipuler plusieurs valeurs et les récupérer intégralement, utilisez plutôt la méthode [`getAll()`](/fr/docs/Web/API/FormData/getAll).
 
-<div class="note">
-  <p><strong>Note :</strong> Cette méthode est disponible dans les <a href="/fr/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
-</div>
+> **Note :** Cette méthode est disponible dans les [Web Workers](/fr/docs/Web/API/Web_Workers_API).
 
-<h2 id="syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">formData.get(name);</pre>
+```js
+formData.get(name);
+```
 
-<h3 id="append_Parameters">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>name</code></dt>
- <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/USVString"><code>USVString</code></a> représentant le nom de la clé que vous souhaitez retrouver.</dd>
-</dl>
+- `name`
+  - : Une chaîne de caractères [`USVString`](/fr/docs/Web/API/USVString) représentant le nom de la clé que vous souhaitez retrouver.
 
-<h3 id="Return_value">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Un objet <a href="/fr/docs/Web/API/FormDataEntryValue"><code>FormDataEntryValue</code></a> contenant la valeur. Si la clé n'existe pas, la méthode renvoie <code>null</code>.</p>
+Un objet [`FormDataEntryValue`](/fr/docs/Web/API/FormDataEntryValue) contenant la valeur. Si la clé n'existe pas, la méthode renvoie `null`.
 
-<h2 id="example">Exemple</h2>
+## Exemple
 
-<p>La ligne suivante crée un objet <code>FormData</code> vide :</p>
+La ligne suivante crée un objet `FormData` vide :
 
-<pre class="brush: js">
+```js
 var formData = new FormData();
-</pre>
+```
 
-<p>Si nous ajoutons deux valeurs <code>username</code> en utilisant <a href="/fr/docs/Web/API/FormData/append"><code>FormData.append</code></a> :</p>
+Si nous ajoutons deux valeurs `username` en utilisant [`FormData.append`](/fr/docs/Web/API/FormData/append) :
 
-<pre class="brush: js">
+```js
 formData.append('username', 'Chris');
 formData.append('username', 'Bob');
-</pre>
+```
 
-<p>L'appel suivant à <code>get()</code> renverra uniquement la première valeur <code>username</code> indexée :</p>
+L'appel suivant à `get()` renverra uniquement la première valeur `username` indexée :
 
-<pre class="brush: js">
+```js
 formData.get('username'); // Renvoie "Chris"
-</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="/fr/docs/Web/API/XMLHttpRequest"><code>XMLHTTPRequest</code></a></li>
- <li><a href="/fr/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest">Utiliser XMLHttpRequest</a></li>
- <li><a href="/fr/docs/Web/API/FormData/Using_FormData_Objects">Utiliser les objets <code>FormData</code></a></li>
- <li><a href="/fr/docs/Web/HTML/Element/Form"><code>&lt;form&gt;</code></a></li>
-</ul>
+- [`XMLHTTPRequest`](/fr/docs/Web/API/XMLHttpRequest)
+- [Utiliser XMLHttpRequest](/fr/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest)
+- [Utiliser les objets `FormData`](/fr/docs/Web/API/FormData/Using_FormData_Objects)
+- [`<form>`](/fr/docs/Web/HTML/Element/Form)
diff --git a/files/fr/web/api/formdata/getall/index.md b/files/fr/web/api/formdata/getall/index.md
index 2b1ced7864..c61386e768 100644
--- a/files/fr/web/api/formdata/getall/index.md
+++ b/files/fr/web/api/formdata/getall/index.md
@@ -11,72 +11,61 @@ tags:
   - getAll
 translation_of: Web/API/FormData/getAll
 ---
-<p>{{APIRef("XMLHttpRequest")}}</p>
+{{APIRef("XMLHttpRequest")}}
 
-<p>La méthode <code><strong>getAll()</strong></code> de l'interface {{domxref("FormData")}} renvoie toutes les valeurs associées à une clé donnée à partir d'un objet <code>FormData</code>.</p>
+La méthode **`getAll()`** de l'interface {{domxref("FormData")}} renvoie toutes les valeurs associées à une clé donnée à partir d'un objet `FormData`.
 
-<div class="note">
-<p><strong>Note :</strong> Cette méthode est disponible dans les <a href="/fr/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
-</div>
+> **Note :** Cette méthode est disponible dans les [Web Workers](/fr/docs/Web/API/Web_Workers_API).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">formData.getAll(name);</pre>
+```js
+formData.getAll(name);
+```
 
-<h3 id="append_Parameters">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>name</code></dt>
- <dd>Un {{domxref("USVString")}} représentant le nom de la clé que vous voulez récupérer.</dd>
-</dl>
+- `name`
+  - : Un {{domxref("USVString")}} représentant le nom de la clé que vous voulez récupérer.
 
-<h3 id="Retours">Retours</h3>
+### Retours
 
-<p>Un tableau de {{domxref("FormDataEntryValue")}} dont la clé correspond à la valeur passée dans le paramètre <code>name</code>. Si la clé n'existe pas, la méthode renvoie une liste vide.</p>
+Un tableau de {{domxref("FormDataEntryValue")}} dont la clé correspond à la valeur passée dans le paramètre `name`. Si la clé n'existe pas, la méthode renvoie une liste vide.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>La ligne suivante crée un objet <code>FormData</code> vide :</p>
+La ligne suivante crée un objet `FormData` vide :
 
-<pre class="brush: js">var formData = new FormData();</pre>
+```js
+var formData = new FormData();
+```
 
-<p>Si nous ajoutons deux valeurs <code>username</code> en utilisant {{domxref("FormData.append")}} :</p>
+Si nous ajoutons deux valeurs `username` en utilisant {{domxref("FormData.append")}} :
 
-<pre class="brush: js">formData.append('username', 'Chris');
-formData.append('username', 'Bob');</pre>
+```js
+formData.append('username', 'Chris');
+formData.append('username', 'Bob');
+```
 
-<p>La fonction <code>getAll()</code> suivante va retourner chaque valeurs de <code>username</code> dans un tableau :</p>
+La fonction `getAll()` suivante va retourner chaque valeurs de `username` dans un tableau :
 
-<pre class="brush: js">formData.getAll('username'); // Returns ["Chris", "Bob"]</pre>
+```js
+formData.getAll('username'); // Returns ["Chris", "Bob"]
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('XMLHttpRequest','#dom-formdata-getall','getAll()')}}</td>
-   <td>{{Spec2('XMLHttpRequest')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                        | Statut                               | Commentaire |
+| ------------------------------------------------------------------------------------ | ------------------------------------ | ----------- |
+| {{SpecName('XMLHttpRequest','#dom-formdata-getall','getAll()')}} | {{Spec2('XMLHttpRequest')}} |             |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
+{{Compat("api.FormData.getAll")}}
 
+## Voir aussi
 
-<p>{{Compat("api.FormData.getAll")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("XMLHTTPRequest")}}</li>
- <li><a href="/fr/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest">Utiliser XMLHttpRequest</a></li>
- <li><a href="/fr/docs/Web/API/FormData/Utilisation_objets_FormData">Utiliser les objets FormData</a></li>
- <li>{{HTMLElement("Form")}}</li>
-</ul>
+- {{domxref("XMLHTTPRequest")}}
+- [Utiliser XMLHttpRequest](/fr/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest)
+- [Utiliser les objets FormData](/fr/docs/Web/API/FormData/Utilisation_objets_FormData)
+- {{HTMLElement("Form")}}
diff --git a/files/fr/web/api/formdata/has/index.md b/files/fr/web/api/formdata/has/index.md
index 2915f9d65a..b167e01317 100644
--- a/files/fr/web/api/formdata/has/index.md
+++ b/files/fr/web/api/formdata/has/index.md
@@ -11,70 +11,56 @@ tags:
   - has
 translation_of: Web/API/FormData/has
 ---
-<p>{{APIRef("XMLHttpRequest")}}</p>
+{{APIRef("XMLHttpRequest")}}
 
-<p>La méthode <code><strong>has()</strong></code> de l'interface {{domxref("FormData")}} renvoie un booléen indiquant si un objet <code>FormData</code> contient une certaine clé.</p>
+La méthode **`has()`** de l'interface {{domxref("FormData")}} renvoie un booléen indiquant si un objet `FormData` contient une certaine clé.
 
-<div class="note">
-<p><strong>Note :</strong> Cette méthode est disponible dans les <a href="/fr/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
-</div>
+> **Note :** Cette méthode est disponible dans les [Web Workers](/fr/docs/Web/API/Web_Workers_API).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">formData.has(name);</pre>
+```js
+formData.has(name);
+```
 
-<h3 id="append_Parameters">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>name</code></dt>
- <dd>Un {{domxref("USVString")}} représentant le nom de la clé que vous voulez tester.</dd>
-</dl>
+- `name`
+  - : Un {{domxref("USVString")}} représentant le nom de la clé que vous voulez tester.
 
-<h3 id="Retours">Retours</h3>
+### Retours
 
-<p>Un {{domxref("Boolean")}}.</p>
+Un {{domxref("Boolean")}}.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>La ligne suivante crée un objet <code>FormData</code> vide :</p>
+La ligne suivante crée un objet `FormData` vide :
 
-<pre class="brush: js">var formData = new FormData();</pre>
+```js
+var formData = new FormData();
+```
 
-<p>L'extrait suivant montre les résultats des tests effectués pour vérifier l'existence d'un <code>username</code> dans l'objet FormData, avant et après avoir ajouté une valeur <code>username</code> avec {{domxref("FormData.append")}} :</p>
+L'extrait suivant montre les résultats des tests effectués pour vérifier l'existence d'un `username` dans l'objet FormData, avant et après avoir ajouté une valeur `username` avec {{domxref("FormData.append")}} :
 
-<pre class="brush: js">formData.has('username'); // Retourne false
+```js
+formData.has('username'); // Retourne false
 formData.append('username', 'Chris');
 formData.has('username'); // Retourne true
-</pre>
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('XMLHttpRequest','#dom-formdata-has','has()')}}</td>
-   <td>{{Spec2('XMLHttpRequest')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                | Statut                               | Commentaire |
+| ---------------------------------------------------------------------------- | ------------------------------------ | ----------- |
+| {{SpecName('XMLHttpRequest','#dom-formdata-has','has()')}} | {{Spec2('XMLHttpRequest')}} |             |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
+{{Compat("api.FormData.has")}}
 
+## Voir aussi
 
-<p>{{Compat("api.FormData.has")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("XMLHTTPRequest")}}</li>
- <li><a href="/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest">Utilisation de XMLHttpRequest</a></li>
- <li><a href="/fr/docs/Web/API/FormData/Utilisation_objets_FormData">Utilisation des objects FormData </a></li>
- <li>{{HTMLElement("Form")}}</li>
-</ul>
+- {{domxref("XMLHTTPRequest")}}
+- [Utilisation de XMLHttpRequest](/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest)
+- [Utilisation des objects FormData](/fr/docs/Web/API/FormData/Utilisation_objets_FormData)
+- {{HTMLElement("Form")}}
diff --git a/files/fr/web/api/formdata/index.md b/files/fr/web/api/formdata/index.md
index 8fbf318e86..12b77b0afa 100644
--- a/files/fr/web/api/formdata/index.md
+++ b/files/fr/web/api/formdata/index.md
@@ -9,79 +9,55 @@ tags:
   - XMLHttpRequest
 translation_of: Web/API/FormData
 ---
-<p>{{APIRef("XMLHttpRequest")}}</p>
+{{APIRef("XMLHttpRequest")}}
 
-<p>L'interface <code>FormData</code> permet de construire facilement un ensemble de paires clé/valeur représentant les champs du formulaire et leurs valeurs, qui peuvent ensuite être facilement envoyées en utilisant la méthode {{domxref("XMLHttpRequest.send()")}} de l'objet XMLHttpRequest. Il utilise le même format qu'utilise un formulaire si le type d'encodage est mis à <code>"multipart/form-data"</code>.</p>
+L'interface `FormData` permet de construire facilement un ensemble de paires clé/valeur représentant les champs du formulaire et leurs valeurs, qui peuvent ensuite être facilement envoyées en utilisant la méthode {{domxref("XMLHttpRequest.send()")}} de l'objet XMLHttpRequest. Il utilise le même format qu'utilise un formulaire si le type d'encodage est mis à `"multipart/form-data"`.
 
-<p>Vous pouvez également le passer directement au constructeur {{domxref("URLSearchParams")}} si vous souhaitez générer des paramètres de requête de la même manière qu'un {{HTMLElement("form")}} le ferait s'il utilisait une simple soumission <code>GET</code>.</p>
+Vous pouvez également le passer directement au constructeur {{domxref("URLSearchParams")}} si vous souhaitez générer des paramètres de requête de la même manière qu'un {{HTMLElement("form")}} le ferait s'il utilisait une simple soumission `GET`.
 
-<p>Un objet implémentant <code>FormData</code> peut être utilisé directement dans une structure {{jsxref("Statements/for...of", "for...of")}}, au lieu de {{domxref('FormData.entries()', 'entries()')}} : <code>for (var p of myFormData)</code> est équivalent à <code>for (var p of myFormData.entries())</code>.</p>
+Un objet implémentant `FormData` peut être utilisé directement dans une structure {{jsxref("Statements/for...of", "for...of")}}, au lieu de {{domxref('FormData.entries()', 'entries()')}} : `for (var p of myFormData)` est équivalent à `for (var p of myFormData.entries())`.
 
-<div class="note">
-<p><strong>Note :</strong> Cette fonctionnalité est disponible dans les <a href="/fr/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
-</div>
+> **Note :** Cette fonctionnalité est disponible dans les [Web Workers](/fr/docs/Web/API/Web_Workers_API).
 
-<h2 id="Constructeur">Constructeur</h2>
+## Constructeur
 
-<dl>
- <dt>{{domxref("FormData.FormData","FormData()")}}</dt>
- <dd>Crée un nouvel objet <code>FormData</code>.</dd>
-</dl>
+- {{domxref("FormData.FormData","FormData()")}}
+  - : Crée un nouvel objet `FormData`.
 
-<h2 id="Méthodes">Méthodes</h2>
+## Méthodes
 
-<dl>
- <dt>{{domxref("FormData.append()")}}</dt>
- <dd>Ajoute une nouvelle valeur à une clé existante dans un objet <code>FormData</code>, ou ajoute la clé si elle n'existe pas encore.</dd>
- <dt>{{domxref("FormData.delete()")}}</dt>
- <dd>Supprime une paire clé/valeur d'un objet <code>FormData</code>.</dd>
- <dt>{{domxref("FormData.entries()")}}</dt>
- <dd>Retourne une {{jsxref("Les_protocoles_iteration", "itération")}} permettant de passer en revue toutes les paires clé/valeur contenues dans cet objet.</dd>
- <dt>{{domxref("FormData.get()")}}</dt>
- <dd>Renvoie la première valeur associée à une clé donnée à partir d'un objet <code>FormData</code>.</dd>
- <dt>{{domxref("FormData.getAll()")}}</dt>
- <dd>Retourne un tableau de toutes les valeurs associées à une clé donnée à partir d'un <code>FormData</code>.</dd>
- <dt>{{domxref("FormData.has()")}}</dt>
- <dd>Renvoie un booléen indiquant si un objet <code>FormData</code> contient une certaine clé.</dd>
- <dt>{{domxref("FormData.keys()")}}</dt>
- <dd>Retourne une {{jsxref("Les_protocoles_iteration", "itération")}} permettant de parcourir toutes les clés des paires clé/valeur contenues dans cet objet.</dd>
- <dt>{{domxref("FormData.set()")}}</dt>
- <dd>Définit une nouvelle valeur pour une clé existante dans un objet <code>FormData</code>, ou ajoute la clé/valeur si elle n'existe pas encore.</dd>
- <dt>{{domxref("FormData.values()")}}</dt>
- <dd>Retourne une {{jsxref("Les_protocoles_iteration", "itération")}} permettant de parcourir toutes les clés des paires clé/valeur contenues dans cet objet.</dd>
-</dl>
+- {{domxref("FormData.append()")}}
+  - : Ajoute une nouvelle valeur à une clé existante dans un objet `FormData`, ou ajoute la clé si elle n'existe pas encore.
+- {{domxref("FormData.delete()")}}
+  - : Supprime une paire clé/valeur d'un objet `FormData`.
+- {{domxref("FormData.entries()")}}
+  - : Retourne une {{jsxref("Les_protocoles_iteration", "itération")}} permettant de passer en revue toutes les paires clé/valeur contenues dans cet objet.
+- {{domxref("FormData.get()")}}
+  - : Renvoie la première valeur associée à une clé donnée à partir d'un objet `FormData`.
+- {{domxref("FormData.getAll()")}}
+  - : Retourne un tableau de toutes les valeurs associées à une clé donnée à partir d'un `FormData`.
+- {{domxref("FormData.has()")}}
+  - : Renvoie un booléen indiquant si un objet `FormData` contient une certaine clé.
+- {{domxref("FormData.keys()")}}
+  - : Retourne une {{jsxref("Les_protocoles_iteration", "itération")}} permettant de parcourir toutes les clés des paires clé/valeur contenues dans cet objet.
+- {{domxref("FormData.set()")}}
+  - : Définit une nouvelle valeur pour une clé existante dans un objet `FormData`, ou ajoute la clé/valeur si elle n'existe pas encore.
+- {{domxref("FormData.values()")}}
+  - : Retourne une {{jsxref("Les_protocoles_iteration", "itération")}} permettant de parcourir toutes les clés des paires clé/valeur contenues dans cet objet.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('XMLHttpRequest','#interface-formdata','FormData')}}</td>
-   <td>{{Spec2('XMLHttpRequest')}}</td>
-   <td>FormData définit dans les specs XHR</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                        | Statut                               | Commentaire                         |
+| ------------------------------------------------------------------------------------ | ------------------------------------ | ----------------------------------- |
+| {{SpecName('XMLHttpRequest','#interface-formdata','FormData')}} | {{Spec2('XMLHttpRequest')}} | FormData définit dans les specs XHR |
 
-<ul>
-</ul>
+## Compatibilité des navigateurs
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+{{Compat("api.FormData")}}
 
+## Voir aussi
 
-
-<p>{{Compat("api.FormData")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("XMLHTTPRequest")}}</li>
- <li><a href="/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest">Utilisation de XMLHttpRequest</a></li>
- <li><a href="/fr/docs/Web/API/FormData/Utilisation_objets_FormData">Utilisation des objects FormData </a></li>
- <li>{{HTMLElement("Form")}}</li>
-</ul>
+- {{domxref("XMLHTTPRequest")}}
+- [Utilisation de XMLHttpRequest](/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest)
+- [Utilisation des objects FormData](/fr/docs/Web/API/FormData/Utilisation_objets_FormData)
+- {{HTMLElement("Form")}}
diff --git a/files/fr/web/api/formdata/keys/index.md b/files/fr/web/api/formdata/keys/index.md
index 3b3b55c86c..e41b139f4b 100644
--- a/files/fr/web/api/formdata/keys/index.md
+++ b/files/fr/web/api/formdata/keys/index.md
@@ -12,25 +12,24 @@ tags:
   - keys
 translation_of: Web/API/FormData/keys
 ---
-<p>{{APIRef("XMLHttpRequest")}}</p>
+{{APIRef("XMLHttpRequest")}}
 
-<p>La méthode <code>FormData.keys()</code> renvoie une {{jsxref("Les_protocoles_iteration", "itération")}} permettant de parcourir toutes les clés contenues dans cet objet. Les clés sont des objets {{domxref("USVString")}}.</p>
+La méthode `FormData.keys()` renvoie une {{jsxref("Les_protocoles_iteration", "itération")}} permettant de parcourir toutes les clés contenues dans cet objet. Les clés sont des objets {{domxref("USVString")}}.
 
-<div class="note">
-<p><strong>Note :</strong> Cette méthode est disponible dans les <a href="/fr/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
-</div>
+> **Note :** Cette méthode est disponible dans les [Web Workers](/fr/docs/Web/API/Web_Workers_API).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">formData.keys();</pre>
+    formData.keys();
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Retourne une {{jsxref("Les_protocoles_iteration", "itération")}}.</p>
+Retourne une {{jsxref("Les_protocoles_iteration", "itération")}}.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">// Créer un object FormData test
+```js
+// Créer un object FormData test
 var formData = new FormData();
 formData.append('cle1', 'valeur1');
 formData.append('cle2', 'valeur2');
@@ -39,41 +38,26 @@ formData.append('cle2', 'valeur2');
 for (var key of formData.keys()) {
    console.log(key);
 }
-</pre>
+```
 
-<p>Le résultat est :</p>
+Le résultat est :
 
-<pre>cle1
-cle2</pre>
+    cle1
+    cle2
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('XMLHttpRequest','#dom-formdata','keys() (as iterator&lt;&gt;)')}}</td>
-   <td>{{Spec2('XMLHttpRequest')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                            | Statut                               | Commentaire         |
+| -------------------------------------------------------------------------------------------------------- | ------------------------------------ | ------------------- |
+| {{SpecName('XMLHttpRequest','#dom-formdata','keys() (as iterator&lt;&gt;)')}} | {{Spec2('XMLHttpRequest')}} | Définition initiale |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
+{{Compat("api.FormData.keys")}}
 
+## Voir aussi
 
-<p>{{Compat("api.FormData.keys")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("XMLHTTPRequest")}}</li>
- <li><a href="/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest">Utiliser XMLHttpRequest</a></li>
- <li><a href="/fr/docs/Web/API/FormData/Utilisation_objets_FormData">Utiliser les objets FormData</a></li>
- <li>{{HTMLElement("Form")}}</li>
-</ul>
+- {{domxref("XMLHTTPRequest")}}
+- [Utiliser XMLHttpRequest](/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest)
+- [Utiliser les objets FormData](/fr/docs/Web/API/FormData/Utilisation_objets_FormData)
+- {{HTMLElement("Form")}}
diff --git a/files/fr/web/api/formdata/set/index.md b/files/fr/web/api/formdata/set/index.md
index 2174a28c4d..3df31fa9a8 100644
--- a/files/fr/web/api/formdata/set/index.md
+++ b/files/fr/web/api/formdata/set/index.md
@@ -11,82 +11,69 @@ tags:
   - set
 translation_of: Web/API/FormData/set
 ---
-<p>{{APIRef("XMLHttpRequest")}}</p>
+{{APIRef("XMLHttpRequest")}}
 
-<p>La méthode <code>set()</code> de l'interface {{domxref("FormData")}} définit une nouvelle valeur pour une clé existante dans un objet <code>FormData</code>, ou ajoute la clé/valeur si elle n'existe pas encore.</p>
+La méthode `set()` de l'interface {{domxref("FormData")}} définit une nouvelle valeur pour une clé existante dans un objet `FormData`, ou ajoute la clé/valeur si elle n'existe pas encore.
 
-<p>La différence entre <code>set()</code> et {{domxref("FormData.append")}} est que si la clé spécifiée existe déjà, <code>set()</code> écrasera toutes les valeurs existantes avec la nouvelle, tandis que {{domxref("FormData.append")}} ajoutera la nouvelle valeur à la fin de l'ensemble de valeurs existant.</p>
+La différence entre `set()` et {{domxref("FormData.append")}} est que si la clé spécifiée existe déjà, `set()` écrasera toutes les valeurs existantes avec la nouvelle, tandis que {{domxref("FormData.append")}} ajoutera la nouvelle valeur à la fin de l'ensemble de valeurs existant.
 
-<div class="note">
-<p><strong>Note :</strong> Cette méthode est disponible dans les <a href="/fr/docs/Web/API/Web_Workers_API" rel="noopener">Web Workers</a>.</p>
-</div>
+> **Note :** Cette méthode est disponible dans les [Web Workers](/fr/docs/Web/API/Web_Workers_API).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>Il existe deux versions de cette méthode : une version à deux et une version à trois paramètres :</p>
+Il existe deux versions de cette méthode : une version à deux et une version à trois paramètres :
 
-<pre class="brush: js">formData.set(name, value);
-formData.set(name, value, filename);</pre>
+```js
+formData.set(name, value);
+formData.set(name, value, filename);
+```
 
-<h4 id="append_Parameters">Paramètres</h4>
+#### Paramètres
 
-<dl>
- <dt><code>name</code></dt>
- <dd>Le nom du champ dont les données sont contenues en valeur (<code>value</code>).</dd>
- <dt><code>value</code></dt>
- <dd>La valeur du champ. Il peut s'agir d'un {{domxref("USVString")}} ou d'un {{domxref("Blob")}} (y compris les sous-classes telles que {{domxref("File")}}). Si aucune de ces sous-classes n'est spécifiée, la valeur est convertie en une chaîne de caractères.</dd>
- <dt><code>filename </code>{{optional_inline}}</dt>
- <dd>Le nom de fichier communiqué au serveur (un {{domxref("USVString")}}), lorsqu'un {{domxref("Blob")}} ou un {{domxref("File")}} est passée comme deuxième paramètre. Le nom de fichier par défaut pour les objets {{domxref("Blob")}} est "blob". Le nom de fichier par défaut pour les objets {{domxref("File")}} est le nom du fichier.</dd>
-</dl>
+- `name`
+  - : Le nom du champ dont les données sont contenues en valeur (`value`).
+- `value`
+  - : La valeur du champ. Il peut s'agir d'un {{domxref("USVString")}} ou d'un {{domxref("Blob")}} (y compris les sous-classes telles que {{domxref("File")}}). Si aucune de ces sous-classes n'est spécifiée, la valeur est convertie en une chaîne de caractères.
+- `filename `{{optional_inline}}
+  - : Le nom de fichier communiqué au serveur (un {{domxref("USVString")}}), lorsqu'un {{domxref("Blob")}} ou un {{domxref("File")}} est passée comme deuxième paramètre. Le nom de fichier par défaut pour les objets {{domxref("Blob")}} est "blob". Le nom de fichier par défaut pour les objets {{domxref("File")}} est le nom du fichier.
 
-<div class="note">
-<p><strong>Note :</strong> Si vous spécifiez un {{domxref("Blob")}} comme donnée à ajouter à l'objet FormData, le nom du fichier qui sera rapporté au serveur dans l'en-tête "Content-Disposition" utilisé pour varier d'un navigateur à l'autre.</p>
-</div>
+> **Note :** Si vous spécifiez un {{domxref("Blob")}} comme donnée à ajouter à l'objet FormData, le nom du fichier qui sera rapporté au serveur dans l'en-tête "Content-Disposition" utilisé pour varier d'un navigateur à l'autre.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>La ligne suivante crée un objet <code>FormData</code> vide:</p>
+La ligne suivante crée un objet `FormData` vide:
 
-<pre class="brush: js">var formData = new FormData(); // Actuellement vide</pre>
+```js
+var formData = new FormData(); // Actuellement vide
+```
 
-<p>Vous pouvez définir des paires clé/valeur à ce sujet en utilisant {{domxref("FormData.set")}} :</p>
+Vous pouvez définir des paires clé/valeur à ce sujet en utilisant {{domxref("FormData.set")}} :
 
-<pre class="brush: js">formData.set('username', 'Chris');
-formData.set('userpic', myFileInput.files[0], 'chris.jpg');</pre>
+```js
+formData.set('username', 'Chris');
+formData.set('userpic', myFileInput.files[0], 'chris.jpg');
+```
 
-<p>Si la valeur envoyée est différente de String ou Blob, elle sera automatiquement convertie en <code>String</code> :</p>
+Si la valeur envoyée est différente de String ou Blob, elle sera automatiquement convertie en `String` :
 
-<pre class="brush: js">formData.set('name', 72);
-formData.get('name'); // "72"</pre>
+```js
+formData.set('name', 72);
+formData.get('name'); // "72"
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('XMLHttpRequest','#dom-formdata-set','set()')}}</td>
-   <td>{{Spec2('XMLHttpRequest')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                | Statut                               | Commentaire |
+| ---------------------------------------------------------------------------- | ------------------------------------ | ----------- |
+| {{SpecName('XMLHttpRequest','#dom-formdata-set','set()')}} | {{Spec2('XMLHttpRequest')}} |             |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
+{{Compat("api.FormData.set")}}
 
+## Voir aussi
 
-<p>{{Compat("api.FormData.set")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("XMLHTTPRequest")}}</li>
- <li><a href="/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest">Utiliser XMLHttpRequest</a></li>
- <li><a href="/fr/docs/Web/Guide/Using_FormData_Objects">Utiliser les objets FormData</a></li>
- <li>{{HTMLElement("Form")}}</li>
-</ul>
+- {{domxref("XMLHTTPRequest")}}
+- [Utiliser XMLHttpRequest](/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest)
+- [Utiliser les objets FormData](/fr/docs/Web/Guide/Using_FormData_Objects)
+- {{HTMLElement("Form")}}
diff --git a/files/fr/web/api/formdata/using_formdata_objects/index.md b/files/fr/web/api/formdata/using_formdata_objects/index.md
index 93fc4bc977..480822832a 100644
--- a/files/fr/web/api/formdata/using_formdata_objects/index.md
+++ b/files/fr/web/api/formdata/using_formdata_objects/index.md
@@ -12,13 +12,14 @@ tags:
 translation_of: Web/API/FormData/Using_FormData_Objects
 original_slug: Web/API/FormData/Utilisation_objets_FormData
 ---
-<p>L’objet <code><a href="/en-US/docs/Web/API/FormData">FormData</a></code> vous permet de compiler un ensemble de paires clé/valeur à envoyer à l’aide de l’API <code><a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code>. Il est principalement destiné à l’envoi de données de formulaire, mais il peut également être utilisé indépendamment des formulaires pour transmettre des données indexées. Le format des données transmises est le même que celui qu’utiliserait la méthode {{domxref("HTMLFormElement.submit","submit()")}} du formulaire pour envoyer les données si l’encodage de ce dernier était défini sur <code>multipart/form-data</code>.</p>
+L’objet [`FormData`](/en-US/docs/Web/API/FormData) vous permet de compiler un ensemble de paires clé/valeur à envoyer à l’aide de l’API [`XMLHttpRequest`](/en-US/docs/Web/API/XMLHttpRequest). Il est principalement destiné à l’envoi de données de formulaire, mais il peut également être utilisé indépendamment des formulaires pour transmettre des données indexées. Le format des données transmises est le même que celui qu’utiliserait la méthode {{domxref("HTMLFormElement.submit","submit()")}} du formulaire pour envoyer les données si l’encodage de ce dernier était défini sur `multipart/form-data`.
 
-<h2 id="Création_intégrale_d’un_objet_FormData">Création intégrale d’un objet FormData</h2>
+## Création intégrale d’un objet FormData
 
-<p>Vous pouvez construire un objet <code>FormData</code> vous-même, en créer une instance, puis y ajouter des champs en appelant la méthode {{domxref("FormData.append","append()")}}, comme suit :</p>
+Vous pouvez construire un objet `FormData` vous-même, en créer une instance, puis y ajouter des champs en appelant la méthode {{domxref("FormData.append","append()")}}, comme suit :
 
-<pre class="brush: js">var formData = new FormData();
+```js
+var formData = new FormData();
 
 formData.append("username", "Groucho");
 formData.append("accountnum", 123456); // le numéro 123456 est converti immédiatement en chaîne "123456"
@@ -27,7 +28,7 @@ formData.append("accountnum", 123456); // le numéro 123456 est converti immédi
 formData.append("userfile", fileInputElement.files[0]);
 
 // objet JavaScript de type fichier
-var content = '&lt;a id="a"&gt;&lt;b id="b"&gt;hey!&lt;/b&gt;&lt;/a&gt;'; // the body of the new file...
+var content = '<a id="a"><b id="b">hey!</b></a>'; // the body of the new file...
 var blob = new Blob([content], { type: "text/xml"});
 
 formData.append("webmasterfile", blob);
@@ -35,59 +36,63 @@ formData.append("webmasterfile", blob);
 var request = new XMLHttpRequest();
 request.open("POST", "http://foo.com/submitform.php");
 request.send(formData);
-</pre>
+```
 
-<div class="note">
-  <p><strong>Note :</strong> Les champs « userfile » et « webmasterfile » contiennent tous deux un fichier. Le numéro attribué au champ « accountnum » est immédiatement converti en chaîne par la méthode <a href="/en/DOM/XMLHttpRequest/FormData#append()"><code>FormData.append()</code></a> (la valeur du champ peut être un objet {{ domxref("Blob") }}, {{ domxref("File") }} ou une chaîne : <strong>s’il ne s’agit ni d’un objet Blob, ni d’un objet File, la valeur est convertie en chaîne</strong>).</p>
-</div>
+> **Note :** Les champs « userfile » et « webmasterfile » contiennent tous deux un fichier. Le numéro attribué au champ « accountnum » est immédiatement converti en chaîne par la méthode [`FormData.append()`](</en/DOM/XMLHttpRequest/FormData#append()>) (la valeur du champ peut être un objet {{ domxref("Blob") }}, {{ domxref("File") }} ou une chaîne : **s’il ne s’agit ni d’un objet Blob, ni d’un objet File, la valeur est convertie en chaîne**).
 
-<p>Dans cet exemple, une instance <code>FormData</code> contenant les valeurs des champs « username », « accountnum », « userfile » et « webmasterfile » est créée, puis la méthode <code>XMLHttpRequest</code> <a href="/en/DOM/XMLHttpRequest#send()"><code>send()</code></a> est utilisée pour envoyer les données du formulaire. Le champ « webmasterfile » est un objet {{domxref("Blob")}}. Un objet <code>Blob</code> représente un objet-fichier de données brutes immuables. Les Blobs représentent des données qui ne sont pas nécessairement dans un format JavaScript natif. L’interface {{ domxref("File") }} se base sur l’objet <code>Blob</code>, elle en hérite les fonctionnalités et les étend pour prendre en charge les fichiers du système de l’utilisateur. Pour construire un <code>Blob</code>, vous pouvez invoquer le {{domxref("Blob.Blob","constructeur Blob()")}}.</p>
+Dans cet exemple, une instance `FormData` contenant les valeurs des champs « username », « accountnum », « userfile » et « webmasterfile » est créée, puis la méthode `XMLHttpRequest` [`send()`](</en/DOM/XMLHttpRequest#send()>) est utilisée pour envoyer les données du formulaire. Le champ « webmasterfile » est un objet {{domxref("Blob")}}. Un objet `Blob` représente un objet-fichier de données brutes immuables. Les Blobs représentent des données qui ne sont pas nécessairement dans un format JavaScript natif. L’interface {{ domxref("File") }} se base sur l’objet `Blob`, elle en hérite les fonctionnalités et les étend pour prendre en charge les fichiers du système de l’utilisateur. Pour construire un `Blob`, vous pouvez invoquer le {{domxref("Blob.Blob","constructeur Blob()")}}.
 
-<h2 id="Récupération_d’un_objet_FormData_dans_un_formulaire_HTML">Récupération d’un objet FormData dans un formulaire HTML</h2>
+## Récupération d’un objet FormData dans un formulaire HTML
 
-<p>Pour construire un objet <code>FormData</code> contenant les données d’un élément HTML {{ HTMLElement("form") }} existant, spécifiez cet élément lors de la création de l’objet<code> </code>:</p>
+Pour construire un objet `FormData` contenant les données d’un élément HTML {{ HTMLElement("form") }} existant, spécifiez cet élément lors de la création de l’objet` `:
 
-<pre class="brush: js">var formData = new FormData(someFormElement);
-</pre>
+```js
+var formData = new FormData(someFormElement);
+```
 
-<p>Par exemple :</p>
+Par exemple :
 
-<pre class="brush: js">var formElement = document.querySelector("form");
+```js
+var formElement = document.querySelector("form");
 var request = new XMLHttpRequest();
 request.open("POST", "submitform.php");
 request.send(new FormData(formElement));
-</pre>
+```
 
-<p>Vous pouvez également ajouter des données supplémentaires à l’objet <code>FormData</code> entre sa récupération dans un formulaire et son envoi, comme suit :</p>
+Vous pouvez également ajouter des données supplémentaires à l’objet `FormData` entre sa récupération dans un formulaire et son envoi, comme suit :
 
-<pre class="brush: js">var formElement = document.querySelector("form");
+```js
+var formElement = document.querySelector("form");
 var formData = new FormData(formElement);
 var request = new XMLHttpRequest();
 request.open("POST", "submitform.php");
 formData.append("serialnumber", serialNumber++);
-request.send(formData);</pre>
+request.send(formData);
+```
 
-<p>Vous pouvez ainsi ajouter des données au formulaire avant de l’envoyer, pour y inclure des informations supplémentaires que les utilisateurs ne peuvent pas nécessairement modifier.</p>
+Vous pouvez ainsi ajouter des données au formulaire avant de l’envoyer, pour y inclure des informations supplémentaires que les utilisateurs ne peuvent pas nécessairement modifier.
 
-<h2 id="Envoi_de_fichiers_via_un_objet_FormData">Envoi de fichiers via un objet FormData</h2>
+## Envoi de fichiers via un objet FormData
 
-<p>L’objet <code>FormData</code> vous permet également d’envoyer des fichiers. Il vous suffit d’inclure un élément HTML {{ HTMLElement("input") }} de type <code>file</code> dans votre élément {{htmlelement("form")}} :</p>
+L’objet `FormData` vous permet également d’envoyer des fichiers. Il vous suffit d’inclure un élément HTML {{ HTMLElement("input") }} de type `file` dans votre élément {{htmlelement("form")}} :
 
-<pre class="brush: html">&lt;form enctype="multipart/form-data" method="post" name="fileinfo"&gt;
-  &lt;label&gt;Votre adresse électronique :&lt;/label&gt;
-  &lt;input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /&gt;&lt;br /&gt;
-  &lt;label&gt;Étiquette du fichier personnalisé :&lt;/label&gt;
-  &lt;input type="text" name="filelabel" size="12" maxlength="32" /&gt;&lt;br /&gt;
-  &lt;label&gt;Fichier à mettre de côté :&lt;/label&gt;
-  &lt;input type="file" name="file" required /&gt;
-  &lt;input type="submit" value="Mettez le fichier de côté." /&gt;
-&lt;/form&gt;
-&lt;div&gt;&lt;/div&gt;
-</pre>
+```html
+<form enctype="multipart/form-data" method="post" name="fileinfo">
+  <label>Votre adresse électronique :</label>
+  <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /><br />
+  <label>Étiquette du fichier personnalisé :</label>
+  <input type="text" name="filelabel" size="12" maxlength="32" /><br />
+  <label>Fichier à mettre de côté :</label>
+  <input type="file" name="file" required />
+  <input type="submit" value="Mettez le fichier de côté." />
+</form>
+<div></div>
+```
 
-<p>Vous pouvez ensuite l’envoyer à l’aide du code suivant :</p>
+Vous pouvez ensuite l’envoyer à l’aide du code suivant :
 
-<pre class="brush: js">var form = document.forms.namedItem("fileinfo");
+```js
+var form = document.forms.namedItem("fileinfo");
 form.addEventListener('submit', function(ev) {
 
   var oOutput = document.querySelector("div"),
@@ -101,29 +106,29 @@ form.addEventListener('submit', function(ev) {
     if (oReq.status == 200) {
       oOutput.innerHTML = "Envoyé !";
     } else {
-      oOutput.innerHTML = "Erreur " + oReq.status + " lors de la tentative d’envoi du fichier.&lt;br \/&gt;";
+      oOutput.innerHTML = "Erreur " + oReq.status + " lors de la tentative d’envoi du fichier.<br \/>";
     }
   };
 
   oReq.send(oData);
   ev.preventDefault();
 }, false);
-</pre>
+```
 
-<div class="note">
-<p><strong>Note :</strong> Si vous passez une référence dans le formulaire, la méthode spécifiée dans ce dernier sera utilisée au lieu de celle définie dans l’appel de la méthode open().</p>
-</div>
+> **Note :** Si vous passez une référence dans le formulaire, la méthode spécifiée dans ce dernier sera utilisée au lieu de celle définie dans l’appel de la méthode open().
 
-<p>Vous pouvez également ajouter un objet {{ domxref("File") }} ou {{ domxref("Blob") }} directement dans l’objet {{ domxref("FormData") }} :</p>
+Vous pouvez également ajouter un objet {{ domxref("File") }} ou {{ domxref("Blob") }} directement dans l’objet {{ domxref("FormData") }} :
 
-<pre class="brush: js">data.append("myfile", myBlob, "filename.txt");
-</pre>
+```js
+data.append("myfile", myBlob, "filename.txt");
+```
 
-<p>Avec la méthode {{domxref("FormData.append","append()")}}, vous pouvez utiliser le troisième paramètre facultatif pour passer un nom de fichier dans l’en-tête <code>Content-Disposition</code> envoyé au serveur. Si aucun nom de fichier n’est spécifié (ou si le paramètre n’est pas pris en charge), le nom « blob » est utilisé.</p>
+Avec la méthode {{domxref("FormData.append","append()")}}, vous pouvez utiliser le troisième paramètre facultatif pour passer un nom de fichier dans l’en-tête `Content-Disposition` envoyé au serveur. Si aucun nom de fichier n’est spécifié (ou si le paramètre n’est pas pris en charge), le nom « blob » est utilisé.
 
-<p>Vous pouvez utiliser l’objet <code>FormData</code> avec jQuery si vous définissez les options appropriées :</p>
+Vous pouvez utiliser l’objet `FormData` avec jQuery si vous définissez les options appropriées :
 
-<pre class="brush: js">var fd = new FormData(document.querySelector("form"));
+```js
+var fd = new FormData(document.querySelector("form"));
 fd.append("CustomField", "Données supplémentaires");
 $.ajax({
   url: "stash.php",
@@ -132,17 +137,15 @@ $.ajax({
   processData: false,  // dire à jQuery de ne pas traiter les données
   contentType: false   // dire à jQuery de ne pas définir le contentType
 });
-</pre>
+```
 
-<h2 id="Envoi_de_formulaires_et_de_fichiers_via_AJAX_sans_objet_FormData">Envoi de formulaires et de fichiers via AJAX <em>sans</em> objet <code>FormData</code></h2>
+## Envoi de formulaires et de fichiers via AJAX *sans* objet `FormData`
 
-<p>Si vous voulez en savoir plus sur la sérialisation des données  et l’envoi d’un formulaire via <a href="/en-US/docs/AJAX">AJAX</a> <em>sans</em> utiliser d’objets FormData, consultez <a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files">ce paragraph</a>e.</p>
+Si vous voulez en savoir plus sur la sérialisation des données  et l’envoi d’un formulaire via [AJAX](/en-US/docs/AJAX) *sans* utiliser d’objets FormData, consultez [ce paragraph](/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files)e.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Utiliser XMLHttpRequest</a></li>
- <li>{{domxref("HTMLFormElement")}}</li>
- <li>{{domxref("Blob")}}</li>
- <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays">Tableaux typés</a></li>
-</ul>
+- [Utiliser XMLHttpRequest](/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest)
+- {{domxref("HTMLFormElement")}}
+- {{domxref("Blob")}}
+- [Tableaux typés](/en-US/docs/Web/JavaScript/Typed_arrays)
diff --git a/files/fr/web/api/formdata/values/index.md b/files/fr/web/api/formdata/values/index.md
index 7a5ddadcec..5d9b46fc27 100644
--- a/files/fr/web/api/formdata/values/index.md
+++ b/files/fr/web/api/formdata/values/index.md
@@ -12,25 +12,24 @@ tags:
   - values
 translation_of: Web/API/FormData/values
 ---
-<p>{{APIRef("XMLHttpRequest")}}</p>
+{{APIRef("XMLHttpRequest")}}
 
-<p>La méthode <code><strong>FormData.values()</strong></code> renvoie une {{jsxref("Les_protocoles_iteration", "itération")}} permettant de passer en revue toutes les valeurs contenues dans cet objet. Les valeurs sont des objets {{domxref("USVString")}} ou {{domxref("Blob")}}.</p>
+La méthode **`FormData.values()`** renvoie une {{jsxref("Les_protocoles_iteration", "itération")}} permettant de passer en revue toutes les valeurs contenues dans cet objet. Les valeurs sont des objets {{domxref("USVString")}} ou {{domxref("Blob")}}.
 
-<div class="note">
-<p><strong>Note :</strong> Cette méthode est disponible dans les <a href="/fr/docs/Web/API/Web_Workers_API" rel="noopener">Web Workers</a>.</p>
-</div>
+> **Note :** Cette méthode est disponible dans les [Web Workers](/fr/docs/Web/API/Web_Workers_API).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">formData.values();</pre>
+    formData.values();
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Retourne une {{jsxref("Les_protocoles_iteration", "itération")}} .</p>
+Retourne une {{jsxref("Les_protocoles_iteration", "itération")}} .
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">// Créer un objet FormData test
+```js
+// Créer un objet FormData test
 var formData = new FormData();
 formData.append('cle1', 'valeur1');
 formData.append('cle2', 'valeur2');
@@ -39,41 +38,26 @@ formData.append('cle2', 'valeur2');
 for (var value of formData.values()) {
    console.log(value);
 }
-</pre>
+```
 
-<p>Le résultat est :</p>
+Le résultat est :
 
-<pre>valeur1
-valeur2</pre>
+    valeur1
+    valeur2
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('XMLHttpRequest','#dom-formdata','values() (as iterator&lt;&gt;)')}}</td>
-   <td>{{Spec2('XMLHttpRequest')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                            | Statut                               | Commentaire          |
+| -------------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName('XMLHttpRequest','#dom-formdata','values() (as iterator&lt;&gt;)')}} | {{Spec2('XMLHttpRequest')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
+{{Compat("api.FormData.values")}}
 
+## Voir aussi
 
-<p>{{Compat("api.FormData.values")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("XMLHTTPRequest")}}</li>
- <li><a href="/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest">Utiliser XMLHttpRequest</a></li>
- <li><a href="/fr/docs/Web/Guide/Using_FormData_Objects">Utiliser les objets FormData</a></li>
- <li>{{HTMLElement("Form")}}</li>
-</ul>
+- {{domxref("XMLHTTPRequest")}}
+- [Utiliser XMLHttpRequest](/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest)
+- [Utiliser les objets FormData](/fr/docs/Web/Guide/Using_FormData_Objects)
+- {{HTMLElement("Form")}}
diff --git a/files/fr/web/api/fullscreen_api/index.md b/files/fr/web/api/fullscreen_api/index.md
index 8b0a59233a..554b01e01d 100644
--- a/files/fr/web/api/fullscreen_api/index.md
+++ b/files/fr/web/api/fullscreen_api/index.md
@@ -9,100 +9,100 @@ tags:
 translation_of: Web/API/Fullscreen_API
 original_slug: Web/Guide/DOM/Using_full_screen_mode
 ---
-<p>{{DefaultAPISidebar("Fullscreen API")}}</p>
+{{DefaultAPISidebar("Fullscreen API")}}
 
-<p>L'<strong>API Fullscreen</strong> <em>(plein écran)</em> fournit un moyen simple de présenter du contenu web en utilisant l'ensemble de l'écran de l'utilisateur. L'API vous permet de diriger facilement le navigateur pour faire en sorte qu'un élément et ses enfants, le cas échéant, occupent entièrement l'écran, éliminant toute l'interface utilisateur du navigateur et les autres applications de l'écran pendant ce temps.</p>
+L'**API Fullscreen** _(plein écran)_ fournit un moyen simple de présenter du contenu web en utilisant l'ensemble de l'écran de l'utilisateur. L'API vous permet de diriger facilement le navigateur pour faire en sorte qu'un élément et ses enfants, le cas échéant, occupent entièrement l'écran, éliminant toute l'interface utilisateur du navigateur et les autres applications de l'écran pendant ce temps.
 
-<div class="note">
-  <p><strong>Note :</strong> Pour le moment, tous les navigateurs n'utilisent pas la version non préfixée de cet API. Consultez le tableau récapitulant les <a href="#Préfixes">préfixes</a> et les différences de noms entre eux (vous pouvez également utiliser  <a href="https://github.com/rafrex/fscreen">Fscreen</a>  pour l'accès du fournisseur à l'API).</p>
-</div>
+> **Note :** Pour le moment, tous les navigateurs n'utilisent pas la version non préfixée de cet API. Consultez le tableau récapitulant les [préfixes](#Préfixes) et les différences de noms entre eux (vous pouvez également utiliser [Fscreen](https://github.com/rafrex/fscreen) pour l'accès du fournisseur à l'API).
 
-<h2 id="Specification">Activation du mode plein écran</h2>
+## Activation du mode plein écran
 
-<p>En partant d'un élément que vous aimeriez afficher en plein écran ({{ HTMLElement("video") }}, par exemple), vous pouvez le passer en mode plein écran simplement en appelant sa méthode {{ domxref("Element.requestFullscreen()") }} .</p>
+En partant d'un élément que vous aimeriez afficher en plein écran ({{ HTMLElement("video") }}, par exemple), vous pouvez le passer en mode plein écran simplement en appelant sa méthode {{ domxref("Element.requestFullscreen()") }} .
 
-<p>Prenons cet élément {{ HTMLElement("video") }} :</p>
+Prenons cet élément {{ HTMLElement("video") }} :
 
-<pre class="brush: html">&lt;video controls id="myvideo"&gt;
-  &lt;source src="somevideo.webm"&gt;&lt;/source&gt;
-  &lt;source src="somevideo.mp4"&gt;&lt;/source&gt;
-&lt;/video&gt;
-</pre>
+```html
+<video controls id="myvideo">
+  <source src="somevideo.webm"></source>
+  <source src="somevideo.mp4"></source>
+</video>
+```
 
-<p>Nous pouvons mettre cet élément video en plein écran avec un script de cette façon :</p>
+Nous pouvons mettre cet élément video en plein écran avec un script de cette façon :
 
-<pre class="brush: js">var elem = document.getElementById("myvideo");
+```js
+var elem = document.getElementById("myvideo");
 if (elem.requestFullscreen) {
   elem.requestFullscreen();
-}</pre>
+}
+```
 
-<h3 id="Différences_de_présentation">Différences de présentation</h3>
+### Différences de présentation
 
-<p>Il est important de savoir qu'il y a une différence clef entre les implémentations de Gecko et WebKit : Gecko ajoute automatiquement des règles CSS à l'élément afin qu'il remplisse l'écran : "<code>width: 100%; height: 100%</code>". WebKit ne fait pas ça ; à la place, il centre l'élément sans le redimensionner au milieu d'un écran noir. Pour obtenir le même comportement que Gecko dans WebKit, vous devez ajouter votre propre règle "<code>width: 100%; height: 100%;</code>" à l'élément :</p>
+Il est important de savoir qu'il y a une différence clef entre les implémentations de Gecko et WebKit : Gecko ajoute automatiquement des règles CSS à l'élément afin qu'il remplisse l'écran : "`width: 100%; height: 100%`". WebKit ne fait pas ça ; à la place, il centre l'élément sans le redimensionner au milieu d'un écran noir. Pour obtenir le même comportement que Gecko dans WebKit, vous devez ajouter votre propre règle "`width: 100%; height: 100%;`" à l'élément :
 
-<pre class="brush: css">#myvideo:-webkit-full-screen  {
+```css
+#myvideo:-webkit-full-screen  {
   width: 100%;
   height: 100%;
 }
-</pre>
+```
 
-<p>Dans l'autre sens, si vous essayez d'émuler le comportement de WebKit sur Gecko, vous devez placer l'élément que vous souhaitez présenter dans un autre élément, que vous mettrez en plein écran, et utiliser des règles CSS pour ajuster l'apparence de l'élément interne.</p>
+Dans l'autre sens, si vous essayez d'émuler le comportement de WebKit sur Gecko, vous devez placer l'élément que vous souhaitez présenter dans un autre élément, que vous mettrez en plein écran, et utiliser des règles CSS pour ajuster l'apparence de l'élément interne.
 
-<h3 id="Notification">Notification</h3>
+### Notification
 
-<p>Quand le mode plein écran est activé, le document qui contient l'élément reçoit un événement de type   {{ event("fullscreenchange") }} . Lors de la sortie du mode plein écran, le document reçoit à nouveau l'événement  {{ event("fullscreenchange") }} . Notez que l'événement  en lui-même {{ event("fullscreenchange") }} ne fournit aucune information si le document est en train d'entrer ou de sortir du mode plein écran, mais si le document a une valeur non nulle {{ domxref("document.fullscreenElement", "fullscreenElement") }} , vous savez que vous êtes en mode plein écran.</p>
+Quand le mode plein écran est activé, le document qui contient l'élément reçoit un événement de type   {{ event("fullscreenchange") }} . Lors de la sortie du mode plein écran, le document reçoit à nouveau l'événement  {{ event("fullscreenchange") }} . Notez que l'événement  en lui-même {{ event("fullscreenchange") }} ne fournit aucune information si le document est en train d'entrer ou de sortir du mode plein écran, mais si le document a une valeur non nulle {{ domxref("document.fullscreenElement", "fullscreenElement") }} , vous savez que vous êtes en mode plein écran.
 
-<h3 id="Lorsqu'une_demande_de_plein_écran_échoue">Lorsqu'une demande de plein écran échoue</h3>
+### Lorsqu'une demande de plein écran échoue
 
-<p>Il n'est pas garanti que vous soyez capable de passer en mode plein écran. Par exemple, les élements {{ HTMLElement("iframe") }} possèdent l'attribut  {{ HTMLAttrXRef("allowfullscreen", "iframe") }} pour permettre à leur contenu d'être affiché en mode plein écran. Certains contenus comme les greffons fenêtrés ne peuvent être représentés en plein écran. Essayer de placer un élément qui ne peut être affiché en mode plein écran (ou le parent ou le descendant d'un tel élément) ne marchera pas. A la place, l'élément qui a demandé le mode plein écran recevra un événement  <code>mozfullscreenerror</code> . Quand une demande de plein écran échoue, Firefox écrit un message d'erreur dans la console Web expliquant pourquoi la demande n'a pas pu aboutir. Dans Chrome et les versions plus récentes d'Opera, aucun avertissement de ce type n'est généré.</p>
+Il n'est pas garanti que vous soyez capable de passer en mode plein écran. Par exemple, les élements {{ HTMLElement("iframe") }} possèdent l'attribut  {{ HTMLAttrXRef("allowfullscreen", "iframe") }} pour permettre à leur contenu d'être affiché en mode plein écran. Certains contenus comme les greffons fenêtrés ne peuvent être représentés en plein écran. Essayer de placer un élément qui ne peut être affiché en mode plein écran (ou le parent ou le descendant d'un tel élément) ne marchera pas. A la place, l'élément qui a demandé le mode plein écran recevra un événement  `mozfullscreenerror` . Quand une demande de plein écran échoue, Firefox écrit un message d'erreur dans la console Web expliquant pourquoi la demande n'a pas pu aboutir. Dans Chrome et les versions plus récentes d'Opera, aucun avertissement de ce type n'est généré.
 
-<div class="note">
-<p><strong>Note :</strong> Les requêtes de Fullscreen doivent être appelées depuis un gestionnaire d'évènements ou sinon, elles seront refusées.</p>
-</div>
+> **Note :** Les requêtes de Fullscreen doivent être appelées depuis un gestionnaire d'évènements ou sinon, elles seront refusées.
 
-<h2 id="Sortie_du_mode_plein_écran">Sortie du mode plein écran</h2>
+## Sortie du mode plein écran
 
-<p>L'utilisateur peut toujours sortir du mode plein écran quand il le désire ; voir {{ anch("Choses que vos utilisateurs doivent savoir") }}. Vous pouvez également le faire en appelant la méthode  {{domxref("Document.exitFullscreen()")}} .</p>
+L'utilisateur peut toujours sortir du mode plein écran quand il le désire ; voir {{ anch("Choses que vos utilisateurs doivent savoir") }}. Vous pouvez également le faire en appelant la méthode  {{domxref("Document.exitFullscreen()")}} .
 
-<h2 id="Autres_informations">Autres informations</h2>
+## Autres informations
 
-<p>Le {{ domxref("document") }} fournit des informations supplémentaires pouvant être utiles lorsque vous développez des applications web en plein écran :</p>
+Le {{ domxref("document") }} fournit des informations supplémentaires pouvant être utiles lorsque vous développez des applications web en plein écran :
 
-<dl>
- <dt>{{ domxref("document.fullscreenElement", "fullscreenElement") }}</dt>
- <dd>L'attribut <code>fullscreenElement</code> vous indique l'{{ domxref("element") }} qui est actuellement affiché en plein écran. S'il est non nul, le document est en mode plein écran. S'il est nul, le document n'est pas en mode plein écran.</dd>
- <dt>{{ domxref("document.fullscreenEnabled", "fullscreenEnabled") }}</dt>
- <dd>L'attribut <code>fullscreenEnabled</code> vous indique si le document est actuellement dans un état qui permettrait d'activer le mode plein écran ou non.</dd>
-</dl>
+- {{ domxref("document.fullscreenElement", "fullscreenElement") }}
+  - : L'attribut `fullscreenElement` vous indique l'{{ domxref("element") }} qui est actuellement affiché en plein écran. S'il est non nul, le document est en mode plein écran. S'il est nul, le document n'est pas en mode plein écran.
+- {{ domxref("document.fullscreenEnabled", "fullscreenEnabled") }}
+  - : L'attribut `fullscreenEnabled` vous indique si le document est actuellement dans un état qui permettrait d'activer le mode plein écran ou non.
 
-<h2 id="Things_your_users_want_to_know">Choses que vos utilisateurs doivent savoir</h2>
+## Choses que vos utilisateurs doivent savoir
 
-<p>Vous voulez faire savoir à vos utilisateurs qu'il peuvent utiliser la touche <kbd>ECHAP</kbd>  (ou  <kbd>F11</kbd>) pour sortir du mode plein écran.</p>
+Vous voulez faire savoir à vos utilisateurs qu'il peuvent utiliser la touche <kbd>ECHAP</kbd>  (ou  <kbd>F11</kbd>) pour sortir du mode plein écran.
 
-<p>En même temps, naviguer sur une autre page, changer d'onglet, ou changer d'application (en utilisant, par exemple, <kbd>Alt</kbd>-<kbd>Tab</kbd> ) pendant le mode plein écran, implique la sortie du mode plein écran de toute façon.</p>
+En même temps, naviguer sur une autre page, changer d'onglet, ou changer d'application (en utilisant, par exemple, <kbd>Alt</kbd>-<kbd>Tab</kbd> ) pendant le mode plein écran, implique la sortie du mode plein écran de toute façon.
 
-<h2 id="Specification">Exemple</h2>
+## Exemple
 
-<p>Dans cet exemple, une vidéo est affichée dans une page web. Taper sur l'une des touches  <kbd>Retour</kbd>  ou <kbd>Entrée</kbd>, permet à l'utilisateur de passer d'une présentation dans une fenêtre à une présentation en mode plein écran de la vidéo.</p>
+Dans cet exemple, une vidéo est affichée dans une page web. Taper sur l'une des touches  <kbd>Retour</kbd>  ou <kbd>Entrée</kbd>, permet à l'utilisateur de passer d'une présentation dans une fenêtre à une présentation en mode plein écran de la vidéo.
 
-<p><a href="/samples/domref/fullscreen.html">Voir l'exemple sur une page</a></p>
+[Voir l'exemple sur une page](/samples/domref/fullscreen.html)
 
-<h3 id="Action_sur_la_touche_Entrée">Action sur la touche <kbd>Entrée</kbd></h3>
+### Action sur la touche <kbd>Entrée</kbd>
 
-<p>Quand la page est chargée, ce code est exécuté pour mettre en place un évènement "listener" permettant de surveiller la moindre action sur la touche  <kbd>Entrée</kbd> .</p>
+Quand la page est chargée, ce code est exécuté pour mettre en place un évènement "listener" permettant de surveiller la moindre action sur la touche  <kbd>Entrée</kbd> .
 
-<pre class="brush: js">document.addEventListener("keydown", function(e) {
+```js
+document.addEventListener("keydown", function(e) {
   if (e.keyCode == 13) {
     toggleFullScreen();
   }
 }, false);
-</pre>
+```
 
-<h3 id="Passer_en_mode_plein_écran">Passer en mode plein écran</h3>
+### Passer en mode plein écran
 
-<p>Ce code est appelé lorsque l'utilisateur appuie sur la touche <kbd>Entrée</kbd>, comme vu plus haut.</p>
+Ce code est appelé lorsque l'utilisateur appuie sur la touche <kbd>Entrée</kbd>, comme vu plus haut.
 
-<pre class="brush: js">function toggleFullScreen() {
+```js
+function toggleFullScreen() {
   if (!document.fullscreenElement) {
       document.documentElement.requestFullscreen();
   } else {
@@ -110,134 +110,61 @@ if (elem.requestFullscreen) {
       document.exitFullscreen();
     }
   }
-}</pre>
-
-<p> Dans un premier temps, la valeur de l'attribut <code>fullscreenElement</code> est analysée dans le {{ domxref("document") }} (en contrôlant s'il est préfixé par <code>moz-, ms-</code> ou <code>webkit-</code>). Si la valeur est nulle, le document est actuellement en mode normal, donc nous devons passer en mode plein écran. Le passage en mode plein écran est assuré en appelant {{ domxref("element.requestFullscreen()") }}.</p>
-
-<p>Si le mode plein écran est déjà activé (<code>fullscreenElement</code> est non nul), nous appelons  {{ domxref("document.exitFullscreen()") }}.</p>
-
-<h2 id="Préfixes_2">Préfixes</h2>
-
-<p>Pour le moment, tous les navigateurs n'ont pas implémenté la version sans préfixe de l'API (pour l'accès du fournisseur de l'API, vous pouvez utiliser <a href="https://github.com/rafrex/fscreen">Fscreen</a>) . Voici le tableau résumant les préfixes et les différences de noms entre eux :</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Standard</th>
-   <th scope="col">Blink (Chrome &amp; Opera)</th>
-   <th scope="col">Gecko (Firefox)</th>
-   <th scope="col">Internet Explorer 11</th>
-   <th scope="col">Edge</th>
-   <th scope="col">Safari (WebKit)</th>
-  </tr>
-  <tr>
-   <td>{{domxref("Document.fullscreen")}}</td>
-   <td><code>webkitIsFullScreen</code></td>
-   <td><code>mozFullScreen</code></td>
-   <td><em>-</em></td>
-   <td><code>webkitIsFullScreen</code></td>
-   <td><code>webkitIsFullScreen</code></td>
-  </tr>
-  <tr>
-   <td>{{domxref("Document.fullscreenEnabled")}}</td>
-   <td><code>webkitFullscreenEnabled</code></td>
-   <td><code>mozFullScreenEnabled</code></td>
-   <td><code>msFullscreenEnabled</code></td>
-   <td><code>webkitFullscreenEnabled</code></td>
-   <td><code>webkitFullscreenEnabled</code></td>
-  </tr>
-  <tr>
-   <td>{{domxref("Document.fullscreenElement")}}</td>
-   <td><code>webkitFullscreenElement</code></td>
-   <td><code>mozFullScreenElement</code></td>
-   <td><code>msFullscreenElement</code></td>
-   <td><code>webkitFullscreenElement</code></td>
-   <td><code>webkitFullscreenElement</code></td>
-  </tr>
-  <tr>
-   <td>{{domxref("Document.onfullscreenchange")}}</td>
-   <td><code>onwebkitfullscreenchange</code></td>
-   <td><code>onmozfullscreenchange</code></td>
-   <td><code>MSFullscreenChange</code></td>
-   <td><code>onwebkitfullscreenchange</code></td>
-   <td><code>onwebkitfullscreenchange</code></td>
-  </tr>
-  <tr>
-   <td>{{domxref("Document.onfullscreenerror")}}</td>
-   <td><code>onwebkitfullscreenerror</code></td>
-   <td><code>onmozfullscreenerror</code></td>
-   <td><code>MSFullscreenError</code></td>
-   <td><code>onwebkitfullscreenerror</code></td>
-   <td><code>onwebkitfullscreenerror</code></td>
-  </tr>
-  <tr>
-   <td>{{domxref("Document.exitFullscreen()")}}</td>
-   <td><code>webkitExitFullscreen()</code></td>
-   <td><code>mozCancelFullScreen()</code></td>
-   <td><code>msExitFullscreen()</code></td>
-   <td><code>webkitExitFullscreen()</code></td>
-   <td><code>webkitExitFullscreen()</code></td>
-  </tr>
-  <tr>
-   <td>{{domxref("Element.requestFullscreen()")}}</td>
-   <td><code>webkitRequestFullscreen()</code></td>
-   <td><code>mozRequestFullScreen()</code></td>
-   <td><code>msRequestFullscreen()</code></td>
-   <td><code>webkitRequestFullscreen()</code></td>
-   <td><code>webkitRequestFullscreen()</code></td>
-  </tr>
- </thead>
-</table>
-
-<h2 id="Specification">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("Fullscreen")}}</td>
-   <td>{{Spec2("Fullscreen")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<h3 id="Document.fullscreen"><code>Document.fullscreen</code></h3>
-
-<p>{{Compat("api.Document.fullscreen")}}</p>
-
-<h3 id="Document.fullscreenElement"><code>Document.fullscreenElement</code></h3>
-
-<p>{{Compat("api.Document.fullscreenElement")}}</p>
-
-<h3 id="Document.fullscreenEnabled"><code>Document.fullscreenEnabled</code></h3>
-
-<p>{{Compat("api.Document.fullscreenEnabled")}}</p>
-
-<h3 id="Document.exitFullscreen"><code>Document.exitFullscreen</code></h3>
-
-<p>{{Compat("api.Document.exitFullscreen")}}</p>
-
-<h3 id="Element.requestFullscreen"><code>Element.requestFullscreen</code></h3>
-
-<p>{{Compat("api.Element.requestFullscreen")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/Guide/DOM/Using_full_screen_mode">Utiliser le mode plein écran</a></li>
- <li>{{ domxref("Element.requestFullscreen()") }}</li>
- <li>{{ domxref("Document.exitFullscreen()") }}</li>
- <li>{{ domxref("Document.fullscreen") }}</li>
- <li>{{ domxref("Document.fullscreenElement") }}</li>
- <li>{{ cssxref(":fullscreen") }}, {{cssxref("::backdrop")}}</li>
- <li>{{ HTMLAttrXRef("allowfullscreen", "iframe") }}</li>
-</ul>
+}
+```
+
+Dans un premier temps, la valeur de l'attribut `fullscreenElement` est analysée dans le {{ domxref("document") }} (en contrôlant s'il est préfixé par `moz-, ms-` ou `webkit-`). Si la valeur est nulle, le document est actuellement en mode normal, donc nous devons passer en mode plein écran. Le passage en mode plein écran est assuré en appelant {{ domxref("element.requestFullscreen()") }}.
+
+Si le mode plein écran est déjà activé (`fullscreenElement` est non nul), nous appelons  {{ domxref("document.exitFullscreen()") }}.
+
+## Préfixes
+
+Pour le moment, tous les navigateurs n'ont pas implémenté la version sans préfixe de l'API (pour l'accès du fournisseur de l'API, vous pouvez utiliser [Fscreen](https://github.com/rafrex/fscreen)) . Voici le tableau résumant les préfixes et les différences de noms entre eux :
+
+| Standard                                                 | Blink (Chrome & Opera)      | Gecko (Firefox)          | Internet Explorer 11    | Edge                        | Safari (WebKit)             |
+| -------------------------------------------------------- | --------------------------- | ------------------------ | ----------------------- | --------------------------- | --------------------------- |
+| {{domxref("Document.fullscreen")}}             | `webkitIsFullScreen`        | `mozFullScreen`          | _-_                     | `webkitIsFullScreen`        | `webkitIsFullScreen`        |
+| {{domxref("Document.fullscreenEnabled")}} | `webkitFullscreenEnabled`   | `mozFullScreenEnabled`   | `msFullscreenEnabled`   | `webkitFullscreenEnabled`   | `webkitFullscreenEnabled`   |
+| {{domxref("Document.fullscreenElement")}} | `webkitFullscreenElement`   | `mozFullScreenElement`   | `msFullscreenElement`   | `webkitFullscreenElement`   | `webkitFullscreenElement`   |
+| {{domxref("Document.onfullscreenchange")}} | `onwebkitfullscreenchange`  | `onmozfullscreenchange`  | `MSFullscreenChange`    | `onwebkitfullscreenchange`  | `onwebkitfullscreenchange`  |
+| {{domxref("Document.onfullscreenerror")}} | `onwebkitfullscreenerror`   | `onmozfullscreenerror`   | `MSFullscreenError`     | `onwebkitfullscreenerror`   | `onwebkitfullscreenerror`   |
+| {{domxref("Document.exitFullscreen()")}}     | `webkitExitFullscreen()`    | `mozCancelFullScreen()`  | `msExitFullscreen()`    | `webkitExitFullscreen()`    | `webkitExitFullscreen()`    |
+| {{domxref("Element.requestFullscreen()")}} | `webkitRequestFullscreen()` | `mozRequestFullScreen()` | `msRequestFullscreen()` | `webkitRequestFullscreen()` | `webkitRequestFullscreen()` |
+
+## Spécifications
+
+| Specification                        | Statut                           | Commentaire          |
+| ------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName("Fullscreen")}} | {{Spec2("Fullscreen")}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+### `Document.fullscreen`
+
+{{Compat("api.Document.fullscreen")}}
+
+### `Document.fullscreenElement`
+
+{{Compat("api.Document.fullscreenElement")}}
+
+### `Document.fullscreenEnabled`
+
+{{Compat("api.Document.fullscreenEnabled")}}
+
+### `Document.exitFullscreen`
+
+{{Compat("api.Document.exitFullscreen")}}
+
+### `Element.requestFullscreen`
+
+{{Compat("api.Element.requestFullscreen")}}
+
+## Voir aussi
+
+- [Utiliser le mode plein écran](/fr/docs/Web/Guide/DOM/Using_full_screen_mode)
+- {{ domxref("Element.requestFullscreen()") }}
+- {{ domxref("Document.exitFullscreen()") }}
+- {{ domxref("Document.fullscreen") }}
+- {{ domxref("Document.fullscreenElement") }}
+- {{ cssxref(":fullscreen") }}, {{cssxref("::backdrop")}}
+- {{ HTMLAttrXRef("allowfullscreen", "iframe") }}
diff --git a/files/fr/web/api/gainnode/index.md b/files/fr/web/api/gainnode/index.md
index 93d8c9bf19..a31634b587 100644
--- a/files/fr/web/api/gainnode/index.md
+++ b/files/fr/web/api/gainnode/index.md
@@ -8,86 +8,69 @@ tags:
   - Web Audio API
 translation_of: Web/API/GainNode
 ---
-<p>{{ APIRef("Web Audio API") }}</p>
+{{ APIRef("Web Audio API") }}
 
-<p>L'interface <strong><code>GainNode</code></strong> représente une variation de volume. Il s'agit d'un {{domxref("AudioNode")}}, c'est un module de traitement audio, qui provoque un gain donné à appliquer à des données d'entrée avant sa propagation à la sortie. Un <code>GainNode</code> a toujours exactement une entrée et une sortie, avec la même quantité de canaux.</p>
+L'interface **`GainNode`** représente une variation de volume. Il s'agit d'un {{domxref("AudioNode")}}, c'est un module de traitement audio, qui provoque un gain donné à appliquer à des données d'entrée avant sa propagation à la sortie. Un `GainNode` a toujours exactement une entrée et une sortie, avec la même quantité de canaux.
 
-<p>Le gain est une valeur sans unité, qui change éventuellement avec le temps, qui est multiplié à chaque échantillon correspondant de tous les canaux entrées. En cas de modification, le nouveau gain est appliqué à l'aide d'un algorithme d'effilochage afin d'éviter aux «clics» inesthétiques d'apparaître dans l'audio résultant.</p>
+Le gain est une valeur sans unité, qui change éventuellement avec le temps, qui est multiplié à chaque échantillon correspondant de tous les canaux entrées. En cas de modification, le nouveau gain est appliqué à l'aide d'un algorithme d'effilochage afin d'éviter aux «clics» inesthétiques d'apparaître dans l'audio résultant.
 
-<p><img alt="Un objet GainNode augmente le gain de la sortie." src="webaudiogainnode.png"></p>
+![Un objet GainNode augmente le gain de la sortie.](webaudiogainnode.png)
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row"><dfn>Nombre d'entrées</dfn></th>
-   <td><code>1</code></td>
-  </tr>
-  <tr>
-   <th scope="row"><dfn>Nombre de sorties</dfn></th>
-   <td><code>1</code></td>
-  </tr>
-  <tr>
-   <th scope="row"><dfn>Mode de comptage des canaux</dfn></th>
-   <td><code>"max"</code></td>
-  </tr>
-  <tr>
-   <th scope="row"><dfn>Nombre de canaux</dfn></th>
-   <td><code>2</code> (inutilisés dans le mode de comptage par défaut)</td>
-  </tr>
-  <tr>
-   <th scope="row"><dfn>Interprétation des canaux</dfn></th>
-   <td><code>"speakers"</code></td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row"><dfn>Nombre d'entrées</dfn></th>
+      <td><code>1</code></td>
+    </tr>
+    <tr>
+      <th scope="row"><dfn>Nombre de sorties</dfn></th>
+      <td><code>1</code></td>
+    </tr>
+    <tr>
+      <th scope="row"><dfn>Mode de comptage des canaux</dfn></th>
+      <td><code>"max"</code></td>
+    </tr>
+    <tr>
+      <th scope="row"><dfn>Nombre de canaux</dfn></th>
+      <td><code>2</code> (inutilisés dans le mode de comptage par défaut)</td>
+    </tr>
+    <tr>
+      <th scope="row"><dfn>Interprétation des canaux</dfn></th>
+      <td><code>"speakers"</code></td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Constructeur">Constructeur</h2>
+## Constructeur
 
-<dl>
- <dt>{{domxref("GainNode.GainNode", "GainNode()")}}</dt>
- <dd>Crée une nouvelle instance d'un objet <code>GainNode</code>. Il ne faut pas créer un noeud de gain manuellement, mais plutôt utiliser la méthode {{domxref("AudioContext.createGain()")}}.</dd>
-</dl>
+- {{domxref("GainNode.GainNode", "GainNode()")}}
+  - : Crée une nouvelle instance d'un objet `GainNode`. Il ne faut pas créer un noeud de gain manuellement, mais plutôt utiliser la méthode {{domxref("AudioContext.createGain()")}}.
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<p><em>Hérite des propritétés de son parent, </em><em>{{domxref("AudioNode")}}</em>.</p>
+_Hérite des propritétés de son parent,_ _{{domxref("AudioNode")}}_.
 
-<dl>
- <dt>{{domxref("GainNode.gain")}}</dt>
- <dd>Est un <a href="/fr/docs/Web/API/AudioParam#a-rate">a-rate</a> {{domxref ("AudioParam")}} représentant le montant du gain à appliquer. (Bien que le <code>AudioParam</code> retournée est en lecture seule, la valeur qu'il représente ne l'est pas).</dd>
-</dl>
+- {{domxref("GainNode.gain")}}
+  - : Est un [a-rate](/fr/docs/Web/API/AudioParam#a-rate) {{domxref ("AudioParam")}} représentant le montant du gain à appliquer. (Bien que le `AudioParam` retournée est en lecture seule, la valeur qu'il représente ne l'est pas).
 
-<h2 id="Méthodes">Méthodes</h2>
+## Méthodes
 
-<p>Aucune méthode spécifique; hérite des méthodes de son parent, {{domxref("AudioNode")}}.</p>
+Aucune méthode spécifique; hérite des méthodes de son parent, {{domxref("AudioNode")}}.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>{{page("/en-US/docs/Web/API/AudioContext.createGain","Example")}}</p>
+{{page("/en-US/docs/Web/API/AudioContext.createGain","Example")}}
 
-<h2 id="Spécification">Spécification</h2>
+## Spécification
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statuts</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Web Audio API', '#GainNode-section', 'GainNode')}}</td>
-   <td>{{Spec2('Web Audio API')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                        | Statuts                              | Commentaire |
+| ------------------------------------------------------------------------------------ | ------------------------------------ | ----------- |
+| {{SpecName('Web Audio API', '#GainNode-section', 'GainNode')}} | {{Spec2('Web Audio API')}} |             |
 
-<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+## Compatibilité navigateurs
 
-<p>{{Compat("api.GainNode")}}</p>
+{{Compat("api.GainNode")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser l'API Web Audio</a></li>
-</ul>
+- [Utiliser l'API Web Audio](/en-US/docs/Web_Audio_API/Using_Web_Audio_API)
diff --git a/files/fr/web/api/gamepad/index.md b/files/fr/web/api/gamepad/index.md
index 8def16d3c7..78ce7b6bb5 100644
--- a/files/fr/web/api/gamepad/index.md
+++ b/files/fr/web/api/gamepad/index.md
@@ -3,95 +3,97 @@ title: Gamepad
 slug: Web/API/Gamepad
 translation_of: Web/API/Gamepad
 ---
-<p>{{APIRef("Gamepad API")}}</p>
-
-<p>L'interface <strong><code>Gamepad</code></strong> de l'<a href="/fr/docs/Web/API/Gamepad_API">API Gamepad</a> définit une manette individuelle ou un autre contrôleur, autorisant l'accès à des informations telles que les boutons pressés, la position des axes et l'identifiant.</p>
-
-<p>Un objet <code>Gamepad</code> peut être retourné de deux manières :</p>
-
-<ul>
- <li>Via la propriété <code>gamepad</code> des événements {{event("gamepadconnected")}} et {{event("gamepaddisconnected")}}.</li>
- <li>Ou en prenant n'importe quelle position dans le tableau retourné par la méthode {{domxref("Navigator.getGamepads()")}}.</li>
-</ul>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<dl>
- <dt>{{domxref("Gamepad.axes")}} {{readonlyInline}}</dt>
- <dd>Un tableau représentant les contrôles avec les axes présents sur le dispositif (par exemple : les joysticks analogiques).</dd>
- <dt>{{domxref("Gamepad.buttons")}} {{readonlyInline}}</dt>
- <dd>Un tableau d'objets {{domxref("gamepadButton")}} représentant les boutons présents sur le dispositif.</dd>
- <dt>{{domxref("Gamepad.connected")}} {{readonlyInline}}</dt>
- <dd>Un booléen indiquant si la manette est toujours connectée au système.</dd>
- <dt>{{domxref("Gamepad.displayId")}} {{readonlyInline}}</dt>
- <dd>Retourne <dfn>{{domxref("VRDisplay.displayId")}} associé à {{domxref("VRDisplay")}} — Le VRDisplay</dfn><dfn> </dfn>dont la manette contrôle la scène affichée.</dd>
- <dt>{{domxref("Gamepad.id")}} {{readonlyInline}}</dt>
- <dd>Un {{domxref("DOMString")}} contenant l'information d'identification de la manette.</dd>
- <dt>{{domxref("Gamepad.index")}} {{readonlyInline}}</dt>
- <dd>Un entier qui s'auto-incrémente pour être unique à chaque dispositif actuellement connecté au système.</dd>
- <dt>{{domxref("Gamepad.mapping")}} {{readonlyInline}}</dt>
- <dd>Une chaîne de caractères indiquant si le navigateur a remappé les contrôles du dispositif à un layout connu.</dd>
- <dt>{{domxref("Gamepad.timestamp")}} {{readonlyInline}}</dt>
- <dd>Un {{domxref("DOMHighResTimeStamp")}} représentant la dernière fois que les données pour cette manette a été mise à jour. <em>Noter que cette propriété n'est pas supportée partout.</em></dd>
-</dl>
-
-<h3 id="Extensions_expérimentales_apportées_à_Gamepad">Extensions expérimentales apportées à <code>Gamepad</code></h3>
-
-<p>Les interfaces suivantes sont définies dans la spécification {{SpecName("GamepadExtensions")}} et fournissent un accès à des fonctionnalités expérimentales tels que les retours haptiques et informations de position des contrôleurs WebVR.</p>
-
-<dl>
- <dt>{{domxref("Gamepad.hand")}} {{readonlyinline}}</dt>
- <dd>Une énumération qui définit dans quelle main le contrôleur est tenue (ou dans laquelle il est probablement tenue).</dd>
- <dt>{{domxref("Gamepad.hapticActuators")}} {{readonlyinline}}</dt>
- <dd>Un tableau contenant des objets {{domxref("GamepadHapticActuator")}} dont chacun représente un matériel disponible pour le contrôleur pour les retours haptiques.</dd>
- <dt>{{domxref("Gamepad.pose")}} {{readonlyinline}}</dt>
- <dd>Un objet {{domxref("GamepadPose")}} qui représente la position et l'orientation d'un contrôleur WebVR dans l'espace en trois dimensions.</dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">window.addEventListener("gamepadconnected", function(event) {
+{{APIRef("Gamepad API")}}
+
+L'interface **`Gamepad`** de l'[API Gamepad](/fr/docs/Web/API/Gamepad_API) définit une manette individuelle ou un autre contrôleur, autorisant l'accès à des informations telles que les boutons pressés, la position des axes et l'identifiant.
+
+Un objet `Gamepad` peut être retourné de deux manières :
+
+- Via la propriété `gamepad` des événements {{event("gamepadconnected")}} et {{event("gamepaddisconnected")}}.
+- Ou en prenant n'importe quelle position dans le tableau retourné par la méthode {{domxref("Navigator.getGamepads()")}}.
+
+## Propriétés
+
+- {{domxref("Gamepad.axes")}} {{readonlyInline}}
+  - : Un tableau représentant les contrôles avec les axes présents sur le dispositif (par exemple : les joysticks analogiques).
+- {{domxref("Gamepad.buttons")}} {{readonlyInline}}
+  - : Un tableau d'objets {{domxref("gamepadButton")}} représentant les boutons présents sur le dispositif.
+- {{domxref("Gamepad.connected")}} {{readonlyInline}}
+  - : Un booléen indiquant si la manette est toujours connectée au système.
+- {{domxref("Gamepad.displayId")}} {{readonlyInline}}
+  - : Retourne *{{domxref("VRDisplay.displayId")}} associé à {{domxref("VRDisplay")}} — Le VRDisplay\*\* *dont la manette contrôle la scène affichée.
+- {{domxref("Gamepad.id")}} {{readonlyInline}}
+  - : Un {{domxref("DOMString")}} contenant l'information d'identification de la manette.
+- {{domxref("Gamepad.index")}} {{readonlyInline}}
+  - : Un entier qui s'auto-incrémente pour être unique à chaque dispositif actuellement connecté au système.
+- {{domxref("Gamepad.mapping")}} {{readonlyInline}}
+  - : Une chaîne de caractères indiquant si le navigateur a remappé les contrôles du dispositif à un layout connu.
+- {{domxref("Gamepad.timestamp")}} {{readonlyInline}}
+  - : Un {{domxref("DOMHighResTimeStamp")}} représentant la dernière fois que les données pour cette manette a été mise à jour. _Noter que cette propriété n'est pas supportée partout._
+
+### Extensions expérimentales apportées à `Gamepad`
+
+Les interfaces suivantes sont définies dans la spécification {{SpecName("GamepadExtensions")}} et fournissent un accès à des fonctionnalités expérimentales tels que les retours haptiques et informations de position des contrôleurs WebVR.
+
+- {{domxref("Gamepad.hand")}} {{readonlyinline}}
+  - : Une énumération qui définit dans quelle main le contrôleur est tenue (ou dans laquelle il est probablement tenue).
+- {{domxref("Gamepad.hapticActuators")}} {{readonlyinline}}
+  - : Un tableau contenant des objets {{domxref("GamepadHapticActuator")}} dont chacun représente un matériel disponible pour le contrôleur pour les retours haptiques.
+- {{domxref("Gamepad.pose")}} {{readonlyinline}}
+  - : Un objet {{domxref("GamepadPose")}} qui représente la position et l'orientation d'un contrôleur WebVR dans l'espace en trois dimensions.
+
+## Exemples
+
+```js
+window.addEventListener("gamepadconnected", function(event) {
   console.log("Contrôleur connecté à %d: %s. %d boutons, %d axes.",
   event.gamepad.index, event.gamepad.id,
   event.gamepad.buttons.length, event.gamepad.axes.length);
-});</pre>
+});
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName("Gamepad", "#gamepad-interface", "Gamepad")}}</td>
-   <td>{{Spec2("Gamepad")}}</td>
-   <td>Première définition</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('WebVR', '#gamepad-getvrdisplays-attribute', 'displayId')}}</td>
-   <td>{{Spec2("WebVR")}}</td>
-   <td>
-    <p>Définit la propriété {{domxref("Gamepad.displayId")}}.</p>
-   </td>
-  </tr>
-  <tr>
-   <td>{{SpecName("GamepadExtensions", "#partial-gamepad-interface", "Gamepad extensions")}}</td>
-   <td>{{Spec2("GamepadExtensions")}}</td>
-   <td>Définit les extensions expérimentales</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="col">Spécification</th>
+      <th scope="col">Statut</th>
+      <th scope="col">Commentaire</th>
+    </tr>
+    <tr>
+      <td>
+        {{SpecName("Gamepad", "#gamepad-interface", "Gamepad")}}
+      </td>
+      <td>{{Spec2("Gamepad")}}</td>
+      <td>Première définition</td>
+    </tr>
+    <tr>
+      <td>
+        {{SpecName('WebVR', '#gamepad-getvrdisplays-attribute', 'displayId')}}
+      </td>
+      <td>{{Spec2("WebVR")}}</td>
+      <td>
+        <p>
+          Définit la propriété {{domxref("Gamepad.displayId")}}.
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        {{SpecName("GamepadExtensions", "#partial-gamepad-interface", "Gamepad extensions")}}
+      </td>
+      <td>{{Spec2("GamepadExtensions")}}</td>
+      <td>Définit les extensions expérimentales</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Compatibilités_des_navigateurs">Compatibilités des navigateurs</h2>
+## Compatibilités des navigateurs
 
-<p>{{Compat("api.Gamepad")}}</p>
+{{Compat("api.Gamepad")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/Guide/API/Gamepad">Utilisation de l'API Gamepad</a></li>
- <li><a href="/fr/docs/Web/API/Gamepad_API">API Gamepad</a></li>
-</ul>
+- [Utilisation de l'API Gamepad](/fr/docs/Web/Guide/API/Gamepad)
+- [API Gamepad](/fr/docs/Web/API/Gamepad_API)
diff --git a/files/fr/web/api/gamepad_api/index.md b/files/fr/web/api/gamepad_api/index.md
index 7e81e21b27..2548f041e8 100644
--- a/files/fr/web/api/gamepad_api/index.md
+++ b/files/fr/web/api/gamepad_api/index.md
@@ -3,88 +3,59 @@ title: Gamepad API
 slug: Web/API/Gamepad_API
 translation_of: Web/API/Gamepad_API
 ---
-<div>{{DefaultAPISidebar("Gamepad API")}}</div>
+{{DefaultAPISidebar("Gamepad API")}}
 
-<p>L'<strong>API Gamepad</strong> est un moyen pour les développeurs d'accéder aux signaux provenant des manettes des jeu et des autres unités de commande du jeu d'y répondre de manière simple et systématiq. Il contient trois interfaces, deux événements et une fonction spécialisée, pour répondre aux manettes connectées et déconnectées, et pour accéder à d'autres informations sur les manettes elles-mêmes, ainsi que sur les boutons et autres commandes sur lesquels vous appuyez actuellement.</p>
+L'**API Gamepad** est un moyen pour les développeurs d'accéder aux signaux provenant des manettes des jeu et des autres unités de commande du jeu d'y répondre de manière simple et systématiq. Il contient trois interfaces, deux événements et une fonction spécialisée, pour répondre aux manettes connectées et déconnectées, et pour accéder à d'autres informations sur les manettes elles-mêmes, ainsi que sur les boutons et autres commandes sur lesquels vous appuyez actuellement.
 
-<h2 id="Interfaces">Interfaces</h2>
+## Interfaces
 
-<dl>
- <dt><a href="/en-US/docs/Web/API/Gamepad"><code>Gamepad</code></a></dt>
- <dd>Représente une manette de jeu / unités de commande du jeu connecté à l'ordinateur.</dd>
- <dt><a href="/en-US/docs/Web/API/GamepadButton"><code>GamepadButton</code></a></dt>
- <dd>Représente un bouton sur un gamepad connecté.</dd>
- <dt><a href="/en-US/docs/Web/API/GamepadEvent"><code>GamepadEvent</code></a></dt>
- <dd>L'objet d'événement qui déclenche des événements sur la manette de jeu contiguë de manière représentative.</dd>
-</dl>
+- [`Gamepad`](/en-US/docs/Web/API/Gamepad)
+  - : Représente une manette de jeu / unités de commande du jeu connecté à l'ordinateur.
+- [`GamepadButton`](/en-US/docs/Web/API/GamepadButton)
+  - : Représente un bouton sur un gamepad connecté.
+- [`GamepadEvent`](/en-US/docs/Web/API/GamepadEvent)
+  - : L'objet d'événement qui déclenche des événements sur la manette de jeu contiguë de manière représentative.
 
-<h3 id="Extensions_de_manette_du_jeu_expérimentales">Extensions de manette du jeu expérimentales</h3>
+### Extensions de manette du jeu expérimentales
 
-<dl>
- <dt><a href="/en-US/docs/Web/API/GamepadHapticActuator"><code>GamepadHapticActuator</code></a></dt>
- <dd>Represents hardware in the controller designed to provide haptic feedback to the user (if available), most commonly vibration hardware.</dd>
- <dt><a href="/en-US/docs/Web/API/GamepadPose"><code>GamepadPose</code></a></dt>
- <dd>Represents the pose of a controller (e.g. position and orientation in 3D space) in the case of a <a href="/en-US/docs/Web/API/WebVR_API">WebVR</a>controller.</dd>
-</dl>
+- [`GamepadHapticActuator`](/en-US/docs/Web/API/GamepadHapticActuator)
+  - : Represents hardware in the controller designed to provide haptic feedback to the user (if available), most commonly vibration hardware.
+- [`GamepadPose`](/en-US/docs/Web/API/GamepadPose)
+  - : Represents the pose of a controller (e.g. position and orientation in 3D space) in the case of a [WebVR](/en-US/docs/Web/API/WebVR_API)controller.
 
-<p>See also the <a href="/en-US/docs/Web/API/Gamepad#Experimental_extensions_to_Gamepad">extensions to the Gamepad interface</a>, for features that allow you to access the above information.</p>
+See also the [extensions to the Gamepad interface](/en-US/docs/Web/API/Gamepad#Experimental_extensions_to_Gamepad), for features that allow you to access the above information.
 
-<h3 id="Extensions_à_d'autres_interfaces">Extensions à d'autres interfaces</h3>
+### Extensions à d'autres interfaces
 
-<h4 id="Navigator">Navigator</h4>
+#### Navigator
 
-<dl>
- <dt>{{domxref("Navigator.getGamepads()")}}</dt>
- <dd>An extension to the {{domxref("Navigator")}} object that returns an array of {{domxref("Gamepad")}} objects, one for each connected gamepad.</dd>
-</dl>
+- {{domxref("Navigator.getGamepads()")}}
+  - : An extension to the {{domxref("Navigator")}} object that returns an array of {{domxref("Gamepad")}} objects, one for each connected gamepad.
 
-<h4 id="Window_events">Window events</h4>
+#### Window events
 
-<dl>
- <dt>{{domxref("Window.ongamepadconnected")}}</dt>
- <dd>Represents an event handler that will run when a gamepad is connected (when the {{event('gamepadconnected')}} event fires).</dd>
- <dt>{{domxref("Window.ongamepaddisconnected")}}</dt>
- <dd>Represents an event handler that will run when a gamepad is disconnected (when the {{event('gamepaddisconnected')}} event fires).</dd>
-</dl>
+- {{domxref("Window.ongamepadconnected")}}
+  - : Represents an event handler that will run when a gamepad is connected (when the {{event('gamepadconnected')}} event fires).
+- {{domxref("Window.ongamepaddisconnected")}}
+  - : Represents an event handler that will run when a gamepad is disconnected (when the {{event('gamepaddisconnected')}} event fires).
 
-<h2 id="Tutoriels_et_guides">Tutoriels et guides</h2>
+## Tutoriels et guides
 
-<ul>
- <li><a href="/en-US/docs/Web/API/Gamepad_API/Using_the_Gamepad_API">Using the Gamepad API</a></li>
- <li><a href="/en-US/docs/Games/Techniques/Controls_Gamepad_API">Implementing controls using the Gamepad API</a></li>
-</ul>
+- [Using the Gamepad API](/en-US/docs/Web/API/Gamepad_API/Using_the_Gamepad_API)
+- [Implementing controls using the Gamepad API](/en-US/docs/Games/Techniques/Controls_Gamepad_API)
 
-<h2 id="Caractéristiques">Caractéristiques</h2>
+## Caractéristiques
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName("GamepadExtensions")}}</td>
-   <td>{{Spec2("GamepadExtensions")}}</td>
-   <td>Defines the {{anch("Experimental Gamepad extensions")}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("Gamepad", "", "The Gamepad API specification")}}</td>
-   <td>{{Spec2("Gamepad")}}</td>
-   <td>Initial definition</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                    | Statut                                   | Commentaire                                                           |
+| -------------------------------------------------------------------------------- | ---------------------------------------- | --------------------------------------------------------------------- |
+| {{SpecName("GamepadExtensions")}}                                     | {{Spec2("GamepadExtensions")}} | Defines the {{anch("Experimental Gamepad extensions")}}. |
+| {{SpecName("Gamepad", "", "The Gamepad API specification")}} | {{Spec2("Gamepad")}}             | Initial definition                                                    |
 
-<h2 id="Compatibilité_du_navigateur">Compatibilité du navigateur</h2>
+## Compatibilité du navigateur
 
+{{Compat("api.Gamepad")}}
 
+## Voir également
 
-<p>{{Compat("api.Gamepad")}}</p>
-
-<h2 id="Voir_également">Voir également</h2>
-
-<ul>
- <li><a href="https://hacks.mozilla.org/2013/12/the-gamepad-api/" rel="nofollow">The Gamepad API</a> by Ted Mielczarek and Robert Nyman</li>
- <li><a href="http://luser.github.io/gamepadtest/">Simple API demo page</a> (<a href="https://github.com/luser/gamepadtest">source</a>)</li>
-</ul>
+- [The Gamepad API](https://hacks.mozilla.org/2013/12/the-gamepad-api/) by Ted Mielczarek and Robert Nyman
+- [Simple API demo page](http://luser.github.io/gamepadtest/) ([source](https://github.com/luser/gamepadtest))
diff --git a/files/fr/web/api/gamepad_api/using_the_gamepad_api/index.md b/files/fr/web/api/gamepad_api/using_the_gamepad_api/index.md
index d30dc4dce8..5a152773d4 100644
--- a/files/fr/web/api/gamepad_api/using_the_gamepad_api/index.md
+++ b/files/fr/web/api/gamepad_api/using_the_gamepad_api/index.md
@@ -4,38 +4,49 @@ slug: Web/API/Gamepad_API/Using_the_Gamepad_API
 translation_of: Web/API/Gamepad_API/Using_the_Gamepad_API
 original_slug: Web/Guide/API/Gamepad
 ---
-<p>{{ SeeCompatTable() }}</p>
-
-<p>HTML5 a introduit plusieurs des composants nécessaires pour le développement de jeux vidéos riches et interactifs. Des technologies comme <code>&lt;canvas&gt;</code>, WebGL, <code>&lt;audio&gt;</code>, et <code>&lt;video&gt;</code>, ainsi que les implémentations JavaScript, ont mûri au point de supporter plusieurs fonctions autrefois réservées aux applications natives. L'API Gamepad est une manière pour les développeurs et <em><code>designers</code></em> d'accéder aux contrôleurs de jeux.</p>
-
-<div class="note">
- <p><strong>Note :</strong> Dans Firefox 29 et plus, l'API Gamepad est activée par défaut, tout comme pour les versions Nightly et Aurora. Depuis Firefox 24, l'API Gamepad était déjà disponible derrière une option dans les préférences. Il est possible de l'activer dans ces versions en ouvrant <code>about:config</code> et en activant <code>dom.gamepad.enabled</code>.</p>
-</div>
-<p>L'API Gamepad introduit de nouveaux évènements à l'objet {{ domxref("Window") }} pour lire l'état des contrôleurs. En plus de ces événements, l'API ajoute aussi un objet {{ domxref("Gamepad") }} que vous pouvez utiliser pour récupérer l'état d'un contrôleur connecté, et une méthode {{ domxref("navigator.getGamepads") }} que vous pouvez utiliser pour obtenir la liste des contrôleurs connus par la page.</p>
-<h2 id="conntecting">Connexion au contrôleur</h2>
-<p>Lorsqu'un nouveau contrôleur est connecté à l'ordinateur, la page active reçoit tout d'abord un événement {{ domxref("Window.gamepadconnected") }}. Si un contrôleur est déjà connecté lorsque la page termine de charger, l'événement {{ domxref("Window.gamepadconnected") }} est envoyé à la page active lorsque l'utilisateur appuie sur un bouton ou bouge un axe.</p>
-<div>
- <p>Dans Firefox, les contrôleurs ne sont rendus visibles à une page que lorsque l'utilisateur s'en sert alors que cette page est active. Cela permet d'éviter que les contrôleurs soient utilisés pour identifier l'utilisateur. Dès lors qu'un contrôleur a été utilisé, les autres contrôleurs connectés seront rendus visibles automatiquement.</p>
-</div>
-<p>Vous pouvez utiliser {{ domxref("Window.gamepadconnected") }} ainsi :</p>
-<pre class="brush: js">window.addEventListener("gamepadconnected", function(e) {
+{{ SeeCompatTable() }}
+
+HTML5 a introduit plusieurs des composants nécessaires pour le développement de jeux vidéos riches et interactifs. Des technologies comme `<canvas>`, WebGL, `<audio>`, et `<video>`, ainsi que les implémentations JavaScript, ont mûri au point de supporter plusieurs fonctions autrefois réservées aux applications natives. L'API Gamepad est une manière pour les développeurs et _`designers`_ d'accéder aux contrôleurs de jeux.
+
+> **Note :** Dans Firefox 29 et plus, l'API Gamepad est activée par défaut, tout comme pour les versions Nightly et Aurora. Depuis Firefox 24, l'API Gamepad était déjà disponible derrière une option dans les préférences. Il est possible de l'activer dans ces versions en ouvrant `about:config` et en activant `dom.gamepad.enabled`.
+
+L'API Gamepad introduit de nouveaux évènements à l'objet {{ domxref("Window") }} pour lire l'état des contrôleurs. En plus de ces événements, l'API ajoute aussi un objet {{ domxref("Gamepad") }} que vous pouvez utiliser pour récupérer l'état d'un contrôleur connecté, et une méthode {{ domxref("navigator.getGamepads") }} que vous pouvez utiliser pour obtenir la liste des contrôleurs connus par la page.
+
+## Connexion au contrôleur
+
+Lorsqu'un nouveau contrôleur est connecté à l'ordinateur, la page active reçoit tout d'abord un événement {{ domxref("Window.gamepadconnected") }}. Si un contrôleur est déjà connecté lorsque la page termine de charger, l'événement {{ domxref("Window.gamepadconnected") }} est envoyé à la page active lorsque l'utilisateur appuie sur un bouton ou bouge un axe.
+
+Dans Firefox, les contrôleurs ne sont rendus visibles à une page que lorsque l'utilisateur s'en sert alors que cette page est active. Cela permet d'éviter que les contrôleurs soient utilisés pour identifier l'utilisateur. Dès lors qu'un contrôleur a été utilisé, les autres contrôleurs connectés seront rendus visibles automatiquement.
+
+Vous pouvez utiliser {{ domxref("Window.gamepadconnected") }} ainsi :
+
+```js
+window.addEventListener("gamepadconnected", function(e) {
   console.log("Contrôleur n°%d connecté : %s. %d boutons, %d axes.",
   e.gamepad.index, e.gamepad.id,
   e.gamepad.buttons.length, e.gamepad.axes.length);
 });
-</pre>
-<p>Chaque contrôleur est associé à un identifiant unique, qui est disponible dans la propriété <code>gamepad</code> de l'événement.</p>
-<div class="note">
- <p><strong>Note :</strong> À l'écriture de ces lignes, Chrome n'implémente pas les événements {{ domxref("Window.gamepadconnected") }} et {{ domxref("Window.gamepaddisconnected") }}. Vous devez utiliser {{ domxref("navigator.getGamepads") }} pour récupérer la liste des contrôleurs disponibles.</p>
-</div>
-<h2 id="disconnecting">Déconnexion du contrôleur</h2>
-<p>Lorsqu'un contrôleur est déconnecté, et si la page avait déjà reçu des données de ce contrôleur auparavant (par exemple par l'événement {{ domxref("Window.gamepadconnected") }}), un second événement est envoyé à la fenêtre active :  {{ domxref("Window.gamepaddisconnected") }}.</p>
-<pre class="brush: js">window.addEventListener("gamepaddisconnected", function(e) {
+```
+
+Chaque contrôleur est associé à un identifiant unique, qui est disponible dans la propriété `gamepad` de l'événement.
+
+> **Note :** À l'écriture de ces lignes, Chrome n'implémente pas les événements {{ domxref("Window.gamepadconnected") }} et {{ domxref("Window.gamepaddisconnected") }}. Vous devez utiliser {{ domxref("navigator.getGamepads") }} pour récupérer la liste des contrôleurs disponibles.
+
+## Déconnexion du contrôleur
+
+Lorsqu'un contrôleur est déconnecté, et si la page avait déjà reçu des données de ce contrôleur auparavant (par exemple par l'événement {{ domxref("Window.gamepadconnected") }}), un second événement est envoyé à la fenêtre active :  {{ domxref("Window.gamepaddisconnected") }}.
+
+```js
+window.addEventListener("gamepaddisconnected", function(e) {
   console.log("Contrôleur n°%d déconnecté : %s",
   e.gamepad.index, e.gamepad.id);
-});</pre>
-<p>La propriété <code>index</code> sera unique à chaque périphérique connecté au système, même si plusieurs contrôleurs du même type sont utilisés. La propriété correspond également à l'indice du tableau retourné par {{ domxref("navigator.getGamepads") }}.</p>
-<pre class="brush: js">var gamepads = {};
+});
+```
+
+La propriété `index` sera unique à chaque périphérique connecté au système, même si plusieurs contrôleurs du même type sont utilisés. La propriété correspond également à l'indice du tableau retourné par {{ domxref("navigator.getGamepads") }}.
+
+```js
+var gamepads = {};
 
 function gamepadHandler(event, connecting) {
   var gamepad = event.gamepad;
@@ -51,46 +62,53 @@ function gamepadHandler(event, connecting) {
 
 window.addEventListener("gamepadconnected", function(e) { gamepadHandler(e, true); }, false);
 window.addEventListener("gamepaddisconnected", function(e) { gamepadHandler(e, false); }, false);
-</pre>
-<p>Cet exemple montre également comment la propriété <code>gamepad</code> peut être conservée après que l'événement se soit terminé. Cette technique sera utilisée plus tard pour obtenir l'état du périphérique.</p>
-<div>
- [PAGE NON TRADUITE DEPUIS ICI...]</div>
-<div>
-  </div>
-<h2 id="querying">Querying the Gamepad object</h2>
-<p>As you can see, the <strong>gamepad</strong> events discussed above include a <code>gamepad</code> property on the event object, which returns a {{ domxref("Gamepad") }} object. We can use this in order to determine which gamepad (i.e., its ID) had caused the event, since multiple gamepads might be connected at once. We can do much more with the {{ domxref("Gamepad") }} object, including holding a reference to it and querying it to find out which buttons and axes are being pressed at any one time. Doing so is often desirable for games or other interactive web pages that need to know the state of a gamepad now vs. the next time an event fires.</p>
-<p>Performing such checks tends to involve using the {{ domxref("Gamepad") }} object in conjunction with an animation loop (e.g., {{ domxref("requestAnimationFrame") }}), where developers want to make decisions for the current frame based on the state of the gamepad or gamepads.</p>
-<div class="note">
- <p><strong>Note :</strong> The Gamepad API also provides a function -- {{ domxref("Navigator.getGamepads") }}-- that returns a list of all devices currently visible to the webpage, an array of {{ domxref("Gamepad") }} objects. This can then be used to get the same information. For example, the first code example above you be rewritten as shown below:</p>
-</div>
-<pre class="brush: js">window.addEventListener("gamepadconnected", function(e) {
+```
+
+Cet exemple montre également comment la propriété `gamepad` peut être conservée après que l'événement se soit terminé. Cette technique sera utilisée plus tard pour obtenir l'état du périphérique.
+
+\[PAGE NON TRADUITE DEPUIS ICI...]
+
+## Querying the Gamepad object
+
+As you can see, the **gamepad** events discussed above include a `gamepad` property on the event object, which returns a {{ domxref("Gamepad") }} object. We can use this in order to determine which gamepad (i.e., its ID) had caused the event, since multiple gamepads might be connected at once. We can do much more with the {{ domxref("Gamepad") }} object, including holding a reference to it and querying it to find out which buttons and axes are being pressed at any one time. Doing so is often desirable for games or other interactive web pages that need to know the state of a gamepad now vs. the next time an event fires.
+
+Performing such checks tends to involve using the {{ domxref("Gamepad") }} object in conjunction with an animation loop (e.g., {{ domxref("requestAnimationFrame") }}), where developers want to make decisions for the current frame based on the state of the gamepad or gamepads.
+
+> **Note :** The Gamepad API also provides a function -- {{ domxref("Navigator.getGamepads") }}-- that returns a list of all devices currently visible to the webpage, an array of {{ domxref("Gamepad") }} objects. This can then be used to get the same information. For example, the first code example above you be rewritten as shown below:
+
+```js
+window.addEventListener("gamepadconnected", function(e) {
   var gp = navigator.getGamepads()[e.gamepad.index];
   console.log("Gamepad connected at index %d: %s. %d buttons, %d axes.",
   gp.index, gp.id,
   gp.buttons.length, gp.axes.length);
-});</pre>
-<p>The {{ domxref("Gamepad") }} object's properties are as follows:</p>
-<ul>
- <li><code>id</code>: A string containing some information about the controller. This is not strictly specified, but in Firefox it will contain three pieces of information separated by dashes (<code>-</code>): two 4-digit hexadecimal strings containing the USB vendor and product id of the controller, and the name of the controller as provided by the driver. This information is intended to allow you to find a mapping for the controls on the device as well as display useful feedback to the user.</li>
- <li><code>index</code>: An integer that is unique for each gamepad currently connected to the system. This can be used to distinguish multiple controllers. Note that disconnecting a device and then connecting a new device may reuse the previous index.</li>
- <li><code>mapping</code>: A string indicating whether the browser has remapped the controls on the device to a known layout. Currently there is only one supported known layout–the <a href="https://dvcs.w3.org/hg/gamepad/raw-file/default/gamepad.html#remapping">standard gamepad</a>. If the browser is able to map controls on the device to that layout the <code>mapping</code> property will be set to the string <code>standard</code>.</li>
- <li><code>connected</code>: A boolean indicating whether the gamepad is still connected to the system. If this is so the value is <code>True</code>; if not, it is <code>False</code>.</li>
- <li><code>buttons</code>: An array of {{ domxref("GamepadButton") }} objects representing the buttons present on the device. Each {{ domxref("GamepadButton") }} has a <code>pressed</code> and a <code>value</code> property:
-  <ul>
-   <li>The <code>pressed</code> property is a boolean indicating whether the button is currently pressed (<code>true</code>) or unpressed (<code>false</code>).</li>
-   <li>The <code>value</code> property is a floating point value used to enable representing analog buttons, such as the triggers on many modern gamepads. The values are normalized to the range 0.0..1.0, with 0.0 representing a button that is not pressed, and 1.0 representing a button that is fully pressed.</li>
-  </ul>
- </li>
- <li><code>axes</code>: An array representing the controls with axes present on the device (e.g. analog thumb sticks). Each entry in the array is a floating point value in the range -1.0 - 1.0, representing the axis position from the lowest value (-1.0) to the highest value (1.0).</li>
- <li><code>timestamp</code>: This returns a {{ domxref("DOMHighResTimeStamp") }} representing the last time the data for this gamepad was updated, allowing developers to determine if the <code>axes</code> and <code>button</code> data have been updated from the hardware. The value must be relative to the <code>navigationStart</code> attribute of the {{ domxref("PerformanceTiming") }} interface. Values are monotonically increasing, meaning that they can be compared to determine the ordering of updates, as newer values will always be greater than or equal to older values. Note that this property is not currently supported in Firefox.</li>
-</ul>
-<div class="note">
- <p><strong>Note :</strong> The Gamepad object is available on the {{ domxref("Window.gamepadconnected") }} event rather than the {{ domxref("Window") }} object itself, for security reasons. Once we have a reference to it, we can query its properties for information about the current state of the gamepad. Behind the scenes, this object will be updated every time the gamepad's state changes.</p>
-</div>
-<h3 id="Using_button_information">Using button information</h3>
-<p>Let's look at a simple example that displays connection information for one gamepad (it ignores subsequent gamepad connections) and allows you to move a ball around the screen using the four gamepad buttons on the right hand side of the gamepad. You can <a href="http://chrisdavidmills.github.io/gamepad-buttons/">view the demo live</a>, and <a href="https://github.com/chrisdavidmills/gamepad-buttons/tree/master">find the source code</a> on Github.</p>
-<p>To start with, we declare some variables: The <code>gamepadInfo</code> paragraph that the connection info is written into, the <code>ball</code> that we want to move, the <code>start</code> variable that acts as the ID for <code>requestAnimation Frame</code>, the <code>a</code> and <code>b</code> variables that act as position modifiers for moving the ball, and the shorthand variables that will be used for the {{ domxref("requestAnimationFrame") }} and {{ domxref("cancelRequestAnimationFrame") }} cross browser forks.</p>
-<pre class="brush: js">var gamepadInfo = document.getElementById("gamepad-info");
+});
+```
+
+The {{ domxref("Gamepad") }} object's properties are as follows:
+
+- `id`: A string containing some information about the controller. This is not strictly specified, but in Firefox it will contain three pieces of information separated by dashes (`-`): two 4-digit hexadecimal strings containing the USB vendor and product id of the controller, and the name of the controller as provided by the driver. This information is intended to allow you to find a mapping for the controls on the device as well as display useful feedback to the user.
+- `index`: An integer that is unique for each gamepad currently connected to the system. This can be used to distinguish multiple controllers. Note that disconnecting a device and then connecting a new device may reuse the previous index.
+- `mapping`: A string indicating whether the browser has remapped the controls on the device to a known layout. Currently there is only one supported known layout–the [standard gamepad](https://dvcs.w3.org/hg/gamepad/raw-file/default/gamepad.html#remapping). If the browser is able to map controls on the device to that layout the `mapping` property will be set to the string `standard`.
+- `connected`: A boolean indicating whether the gamepad is still connected to the system. If this is so the value is `True`; if not, it is `False`.
+- `buttons`: An array of {{ domxref("GamepadButton") }} objects representing the buttons present on the device. Each {{ domxref("GamepadButton") }} has a `pressed` and a `value` property:
+
+  - The `pressed` property is a boolean indicating whether the button is currently pressed (`true`) or unpressed (`false`).
+  - The `value` property is a floating point value used to enable representing analog buttons, such as the triggers on many modern gamepads. The values are normalized to the range 0.0..1.0, with 0.0 representing a button that is not pressed, and 1.0 representing a button that is fully pressed.
+
+- `axes`: An array representing the controls with axes present on the device (e.g. analog thumb sticks). Each entry in the array is a floating point value in the range -1.0 - 1.0, representing the axis position from the lowest value (-1.0) to the highest value (1.0).
+- `timestamp`: This returns a {{ domxref("DOMHighResTimeStamp") }} representing the last time the data for this gamepad was updated, allowing developers to determine if the `axes` and `button` data have been updated from the hardware. The value must be relative to the `navigationStart` attribute of the {{ domxref("PerformanceTiming") }} interface. Values are monotonically increasing, meaning that they can be compared to determine the ordering of updates, as newer values will always be greater than or equal to older values. Note that this property is not currently supported in Firefox.
+
+> **Note :** The Gamepad object is available on the {{ domxref("Window.gamepadconnected") }} event rather than the {{ domxref("Window") }} object itself, for security reasons. Once we have a reference to it, we can query its properties for information about the current state of the gamepad. Behind the scenes, this object will be updated every time the gamepad's state changes.
+
+### Using button information
+
+Let's look at a simple example that displays connection information for one gamepad (it ignores subsequent gamepad connections) and allows you to move a ball around the screen using the four gamepad buttons on the right hand side of the gamepad. You can [view the demo live](http://chrisdavidmills.github.io/gamepad-buttons/), and [find the source code](https://github.com/chrisdavidmills/gamepad-buttons/tree/master) on Github.
+
+To start with, we declare some variables: The `gamepadInfo` paragraph that the connection info is written into, the `ball` that we want to move, the `start` variable that acts as the ID for `requestAnimation Frame`, the `a` and `b` variables that act as position modifiers for moving the ball, and the shorthand variables that will be used for the {{ domxref("requestAnimationFrame") }} and {{ domxref("cancelRequestAnimationFrame") }} cross browser forks.
+
+```js
+var gamepadInfo = document.getElementById("gamepad-info");
 var ball = document.getElementById("ball");
 var start;
 var a = 0;
@@ -102,29 +120,41 @@ var rAF = window.mozRequestAnimationFrame ||
 
 var rAFStop = window.mozCancelRequestAnimationFrame ||
   window.webkitCancelRequestAnimationFrame ||
-  window.cancelRequestAnimationFrame;</pre>
-<p>Next we use the {{ domxref("Window.gamepadconnected") }} event to check for a gamepad being connected. When one is connected, we grab the gamepad using {{ domxref("Navigator.getGamepads") }}<code>[0]</code>, print information about the gamepad into our gamepad info <code>div</code>, and fire the <code>gameLoop()</code> function that starts the whole ball movement process up.</p>
-<pre class="brush: js">window.addEventListener("gamepadconnected", function(e) {
+  window.cancelRequestAnimationFrame;
+```
+
+Next we use the {{ domxref("Window.gamepadconnected") }} event to check for a gamepad being connected. When one is connected, we grab the gamepad using {{ domxref("Navigator.getGamepads") }}`[0]`, print information about the gamepad into our gamepad info `div`, and fire the `gameLoop()` function that starts the whole ball movement process up.
+
+```js
+window.addEventListener("gamepadconnected", function(e) {
   var gp = navigator.getGamepads()[e.gamepad.index];
   gamepadInfo.innerHTML = "Gamepad connected at index " + gp.index + ": " + gp.id + ". It has " + gp.buttons.length + " buttons and " + gp.axes.length + " axes.";
 
   gameLoop();
-});</pre>
-<p>Now we use the {{ domxref("Window.gamepaddisconnected") }} event to check if the gamepad is disconnected again. If so, we stop the {{ domxref("requestAnimationFrame") }} loop (see below) and revert the gamepad information back to what it was originally.</p>
-<pre class="brush: js">window.addEventListener("gamepaddisconnected", function(e) {
+});
+```
+
+Now we use the {{ domxref("Window.gamepaddisconnected") }} event to check if the gamepad is disconnected again. If so, we stop the {{ domxref("requestAnimationFrame") }} loop (see below) and revert the gamepad information back to what it was originally.
+
+```js
+window.addEventListener("gamepaddisconnected", function(e) {
   gamepadInfo.innerHTML = "Waiting for gamepad.";
 
   rAFStop(start);
-});</pre>
-<p>Chrome does things differently here. Instead of constantly storing the gamepad's latest state in a variable it only stores a snapshot, so to do the same thing in Chrome you have to keep polling it and then only use the {{ domxref("Gamepad") }} object in code when it is available. We have done this below using {{ domxref("Window.setInterval") }}; once the object is available the gamepad info is outputted, the game loop is started, and the interval is cleared using {{ domxref("Window.clearInterval") }}. Note that in older versions of Chrome {{ domxref("Navigator.getGamepads") }} is implemented with a <code>webkit</code> prefix. We attempt to detect and handle both the prefixed version and the standard version of the function for backwards-compatibility.</p>
-<pre class="brush: js">if(!('GamepadEvent' in window)) {
+});
+```
+
+Chrome does things differently here. Instead of constantly storing the gamepad's latest state in a variable it only stores a snapshot, so to do the same thing in Chrome you have to keep polling it and then only use the {{ domxref("Gamepad") }} object in code when it is available. We have done this below using {{ domxref("Window.setInterval") }}; once the object is available the gamepad info is outputted, the game loop is started, and the interval is cleared using {{ domxref("Window.clearInterval") }}. Note that in older versions of Chrome {{ domxref("Navigator.getGamepads") }} is implemented with a `webkit` prefix. We attempt to detect and handle both the prefixed version and the standard version of the function for backwards-compatibility.
+
+```js
+if(!('GamepadEvent' in window)) {
   // No gamepad events available, poll instead.
   var interval = setInterval(pollGamepads, 500);
 }
 
 function pollGamepads() {
   var gamepads = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads : []);
-  for (var i = 0; i &lt; gamepads.length; i++) {
+  for (var i = 0; i < gamepads.length; i++) {
     var gp = gamepads[i];
     if(gp) {
       gamepadInfo.innerHTML = "Gamepad connected at index " + gp.index + ": " + gp.id + ". It has " + gp.buttons.length + " buttons and " + gp.axes.length + " axes.";
@@ -132,10 +162,15 @@ function pollGamepads() {
       clearInterval(interval);
     }
   }
-}</pre>
-<p>Now on to the main game loop. In each execution of the loop we check if one of four buttons is being pressed; if so, we update the values of the <code>a</code> and <code>b</code> movement variables appropriately, then update the {{ cssxref("left") }} and {{ cssxref("top") }} properties, changing their values to the current values of <code>a</code> and <code>b</code> respectively. This has the effect of moving the ball around the screen.  In current versions of Chrome (version 34 as of this writing) the button values are stored as an array of double values, instead of {{ domxref("GamepadButton") }} objects. This is fixed in development versions.</p>
-<p>After all this is done, we use our <code>rAF</code> variable to request the next animation frame, running <code>gameLoop()</code> again.</p>
-<pre class="brush: js">function buttonPressed(b) {
+}
+```
+
+Now on to the main game loop. In each execution of the loop we check if one of four buttons is being pressed; if so, we update the values of the `a` and `b` movement variables appropriately, then update the {{ cssxref("left") }} and {{ cssxref("top") }} properties, changing their values to the current values of `a` and `b` respectively. This has the effect of moving the ball around the screen.  In current versions of Chrome (version 34 as of this writing) the button values are stored as an array of double values, instead of {{ domxref("GamepadButton") }} objects. This is fixed in development versions.
+
+After all this is done, we use our `rAF` variable to request the next animation frame, running `gameLoop()` again.
+
+```js
+function buttonPressed(b) {
   if (typeof(b) == "object") {
     return b.pressed;
   }
@@ -163,12 +198,19 @@ function gameLoop() {
   ball.style.top = b*2 + "px";
 
   var start = rAF(gameLoop);
-};</pre>
-<h3 id="Using_axes_information">Using axes information</h3>
-<p><strong>TBD (basically the same, except using axes[i] rather than button[i].value for both Firefox and Chrome.)</strong></p>
-<h2 id="Complete_example_Displaying_gamepad_state">Complete example: Displaying gamepad state</h2>
-<p>This example shows how to use the {{ domxref("Gamepad") }} object, as well as the {{ domxref("Window.gamepadconnected") }} and {{ domxref("Window.gamepaddisconnected") }} events in order to display the state of all gamepads connected to the system. You can find a <a href="http://luser.github.io/gamepadtest/">working demo</a> and look at the <a href="https://github.com/luser/gamepadtest">full source code</a> on Github.</p>
-<pre class="brush: js">var haveEvents = 'GamepadEvent' in window;
+};
+```
+
+### Using axes information
+
+**TBD (basically the same, except using axes\[i] rather than button\[i].value for both Firefox and Chrome.)**
+
+## Complete example: Displaying gamepad state
+
+This example shows how to use the {{ domxref("Gamepad") }} object, as well as the {{ domxref("Window.gamepadconnected") }} and {{ domxref("Window.gamepaddisconnected") }} events in order to display the state of all gamepads connected to the system. You can find a [working demo](http://luser.github.io/gamepadtest/) and look at the [full source code](https://github.com/luser/gamepadtest) on Github.
+
+```js
+var haveEvents = 'GamepadEvent' in window;
 var controllers = {};
 var rAF = window.mozRequestAnimationFrame ||
   window.webkitRequestAnimationFrame ||
@@ -185,7 +227,7 @@ function addgamepad(gamepad) {
   d.appendChild(t);
   var b = document.createElement("div");
   b.className = "buttons";
-  for (var i=0; i&lt;gamepad.buttons.length; i++) {
+  for (var i=0; i<gamepad.buttons.length; i++) {
     var e = document.createElement("span");
     e.className = "button";
     //e.id = "b" + i;
@@ -195,7 +237,7 @@ function addgamepad(gamepad) {
   d.appendChild(b);
   var a = document.createElement("div");
   a.className = "axes";
-  for (var i=0; i&lt;gamepad.axes.length; i++) {
+  for (var i=0; i<gamepad.axes.length; i++) {
     var e = document.createElement("progress");
     e.className = "axis";
     //e.id = "a" + i;
@@ -228,7 +270,7 @@ function updateStatus() {
     var controller = controllers[j];
     var d = document.getElementById("controller" + j);
     var buttons = d.getElementsByClassName("button");
-    for (var i=0; i&lt;controller.buttons.length; i++) {
+    for (var i=0; i<controller.buttons.length; i++) {
       var b = buttons[i];
       var val = controller.buttons[i];
       var pressed = val == 1.0;
@@ -246,7 +288,7 @@ function updateStatus() {
     }
 
     var axes = d.getElementsByClassName("axis");
-    for (var i=0; i&lt;controller.axes.length; i++) {
+    for (var i=0; i<controller.axes.length; i++) {
       var a = axes[i];
       a.innerHTML = i + ": " + controller.axes[i].toFixed(4);
       a.setAttribute("value", controller.axes[i] + 1);
@@ -257,7 +299,7 @@ function updateStatus() {
 
 function scangamepads() {
   var gamepads = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads() : []);
-  for (var i = 0; i &lt; gamepads.length; i++) {
+  for (var i = 0; i < gamepads.length; i++) {
     if (gamepads[i]) {
       if (!(gamepads[i].index in controllers)) {
         addgamepad(gamepads[i]);
@@ -272,11 +314,13 @@ window.addEventListener("gamepadconnected", connecthandler);
 window.addEventListener("gamepaddisconnected", disconnecthandler);
 if (!haveEvents) {
   setInterval(scangamepads, 500);
-}</pre>
-<h2 id="Specifications">Specifications</h2>
-<p>{{page("/en-US/docs/Gamepad","Specifications")}}</p>
-<h2 id="Browser_compatibility">Browser compatibility</h2>
-<p>{{page("/en-US/docs/Gamepad","Browser_compatibility")}}</p>
-<p> </p>
-<p> </p>
-<p> </p>
+}
+```
+
+## Specifications
+
+{{page("/en-US/docs/Gamepad","Specifications")}}
+
+## Browser compatibility
+
+{{page("/en-US/docs/Gamepad","Browser_compatibility")}}
diff --git a/files/fr/web/api/geolocation/clearwatch/index.md b/files/fr/web/api/geolocation/clearwatch/index.md
index c4952eb7cf..e3cf88e859 100644
--- a/files/fr/web/api/geolocation/clearwatch/index.md
+++ b/files/fr/web/api/geolocation/clearwatch/index.md
@@ -10,29 +10,28 @@ tags:
   - Reference
 translation_of: Web/API/Geolocation/clearWatch
 ---
-<p>{{ APIref("Geolocation API") }}</p>
+{{ APIref("Geolocation API") }}
 
-<p>La méthode <strong><code>Geolocation.clearWatch()</code></strong> est utilisée pour libérer les ressources de localisation/erreur créées antérieurement en utilisant {{domxref("Geolocation.watchPosition()")}}.</p>
+La méthode **`Geolocation.clearWatch()`** est utilisée pour libérer les ressources de localisation/erreur créées antérieurement en utilisant {{domxref("Geolocation.watchPosition()")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">navigator.geolocation.clearWatch(<em>id</em>);</pre>
+    navigator.geolocation.clearWatch(id);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><em>id</em></dt>
- <dd>Le nombre ID est donné par la méthode qui permet la localisation : {{domxref("Geolocation.watchPosition()")}} ; ressource que vous désirez supprimer.</dd>
-</dl>
+- _id_
+  - : Le nombre ID est donné par la méthode qui permet la localisation : {{domxref("Geolocation.watchPosition()")}} ; ressource que vous désirez supprimer.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">var id, target, option;
+```js
+var id, target, option;
 
 function success(pos) {
   var crd = pos.coords;
 
-  if (target.latitude === crd.latitude &amp;&amp; target.longitude === crd.longitude) {
+  if (target.latitude === crd.latitude && target.longitude === crd.longitude) {
     console.log('Congratulation, you reach the target');
     navigator.geolocation.clearWatch(id);
   }
@@ -54,36 +53,21 @@ options = {
 };
 
 id = navigator.geolocation.watchPosition(success, error, options);
-</pre>
-
-<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('Geolocation')}}</td>
-   <td>{{Spec2('Geolocation')}}</td>
-   <td>Spécification initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Geolocation.clearWatch")}}</p>
-
-<h2 id="See_also">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/Using_geolocation">Utiliser geolocation</a></li>
- <li>{{domxref("Geolocation")}}</li>
- <li>{{domxref("Geolocation.watchPosition()")}}</li>
- <li>{{domxref("Geolocation.getCurrentPosition()")}}</li>
-</ul>
+```
+
+## Spécifications
+
+| Spécification                        | Statut                           | Commentaire             |
+| ------------------------------------ | -------------------------------- | ----------------------- |
+| {{SpecName('Geolocation')}} | {{Spec2('Geolocation')}} | Spécification initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Geolocation.clearWatch")}}
+
+## Voir aussi
+
+- [Utiliser geolocation](/fr/docs/Web/API/Using_geolocation)
+- {{domxref("Geolocation")}}
+- {{domxref("Geolocation.watchPosition()")}}
+- {{domxref("Geolocation.getCurrentPosition()")}}
diff --git a/files/fr/web/api/geolocation/getcurrentposition/index.md b/files/fr/web/api/geolocation/getcurrentposition/index.md
index 8168640a6c..a2d19748da 100644
--- a/files/fr/web/api/geolocation/getcurrentposition/index.md
+++ b/files/fr/web/api/geolocation/getcurrentposition/index.md
@@ -8,34 +8,32 @@ tags:
   - Reference
 translation_of: Web/API/Geolocation/getCurrentPosition
 ---
-<div>{{securecontext_header}}{{APIRef("Geolocation API")}}</div>
+{{securecontext_header}}{{APIRef("Geolocation API")}}
 
-<p>La méthode <strong><code>Geolocation.getCurrentPosition()</code></strong> fournit la position actuelle de l'appareil.</p>
+La méthode **`Geolocation.getCurrentPosition()`** fournit la position actuelle de l'appareil.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">navigator.geolocation.getCurrentPosition(<em>success[</em>, <em>error[</em>, <em>[options]]</em>)</pre>
+    navigator.geolocation.getCurrentPosition(success[, error[, [options]])
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>success</code></dt>
- <dd>Une fonction de rappel qui prend un objet {{domxref("Position")}} comme argument.</dd>
- <dt><code>error</code> {{optional_inline}}</dt>
- <dd>Une fonction de rappel qui prend un objet {{domxref("PositionError")}} comme argument.</dd>
- <dt><code>options</code> {{optional_inline}}</dt>
- <dd>Un objet {{domxref("PositionOptions")}} optionnel. Les options décrites par cet objet sont :
- <ul>
-  <li><code>maximumAge</code> : un entier qui exprime une durée en millisecondes ou l'infini pour indiquer la durée maximale pendant laquelle mettre en cache la position.</li>
-  <li><code>timeout</code> : un entier qui exprime la durée, en millisecondes, avant que la fonction de rappel <code>error</code> soit appelé. Si cette propriété vaut <code>0</code>, la fonction d'erreur ne sera jamais appelée.</li>
-  <li><code>enableHighAccuracy</code> : un booléen qui indique si une précision élevée est requise.</li>
- </ul>
- </dd>
-</dl>
+- `success`
+  - : Une fonction de rappel qui prend un objet {{domxref("Position")}} comme argument.
+- `error` {{optional_inline}}
+  - : Une fonction de rappel qui prend un objet {{domxref("PositionError")}} comme argument.
+- `options` {{optional_inline}}
 
-<h2 id="Exemples">Exemples</h2>
+  - : Un objet {{domxref("PositionOptions")}} optionnel. Les options décrites par cet objet sont :
 
-<pre class="brush: js">var options = {
+    - `maximumAge` : un entier qui exprime une durée en millisecondes ou l'infini pour indiquer la durée maximale pendant laquelle mettre en cache la position.
+    - `timeout` : un entier qui exprime la durée, en millisecondes, avant que la fonction de rappel `error` soit appelé. Si cette propriété vaut `0`, la fonction d'erreur ne sera jamais appelée.
+    - `enableHighAccuracy` : un booléen qui indique si une précision élevée est requise.
+
+## Exemples
+
+```js
+var options = {
   enableHighAccuracy: true,
   timeout: 5000,
   maximumAge: 0
@@ -55,34 +53,19 @@ function error(err) {
 }
 
 navigator.geolocation.getCurrentPosition(success, error, options);
-</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('Geolocation')}}</td>
-   <td>{{Spec2('Geolocation')}}</td>
-   <td>Spécification initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Geolocation.getCurrentPosition")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/en-US/docs/WebAPI/Using_geolocation">Utiliser la géolocalisation</a></li>
- <li>{{domxref("Navigator.geolocation")}}</li>
-</ul>
+```
+
+## Spécifications
+
+| Spécification                        | État                             | Commentaires            |
+| ------------------------------------ | -------------------------------- | ----------------------- |
+| {{SpecName('Geolocation')}} | {{Spec2('Geolocation')}} | Spécification initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Geolocation.getCurrentPosition")}}
+
+## Voir aussi
+
+- [Utiliser la géolocalisation](/en-US/docs/WebAPI/Using_geolocation)
+- {{domxref("Navigator.geolocation")}}
diff --git a/files/fr/web/api/geolocation/index.md b/files/fr/web/api/geolocation/index.md
index e492a2a532..035dbab103 100644
--- a/files/fr/web/api/geolocation/index.md
+++ b/files/fr/web/api/geolocation/index.md
@@ -9,58 +9,39 @@ tags:
   - Reference
 translation_of: Web/API/Geolocation
 ---
-<div>{{APIRef("Geolocation API")}}</div>
+{{APIRef("Geolocation API")}}
 
-<p>En intégrant l'interface <code><strong>Geolocation</strong></code>, on peut obtenir la position d'un ordinateur, d'un téléphone ou d'une tablette, ce qui permet aux contenus Web d'accéder à leur localisation. Un site internet ou une application mobile peut alors offrir divers services liés à la localisation de l'utilisateur.</p>
+En intégrant l'interface **`Geolocation`**, on peut obtenir la position d'un ordinateur, d'un téléphone ou d'une tablette, ce qui permet aux contenus Web d'accéder à leur localisation. Un site internet ou une application mobile peut alors offrir divers services liés à la localisation de l'utilisateur.
 
-<p>On obtient un objet par le biais de cette interface avec la propriété {{domxref("NavigatorGeolocation.geolocation")}} proposée par l'objet {{domxref("Navigator")}} .</p>
+On obtient un objet par le biais de cette interface avec la propriété {{domxref("NavigatorGeolocation.geolocation")}} proposée par l'objet {{domxref("Navigator")}} .
 
-<div class="note">
-<p><strong>Note:</strong> Pour des raisons de sécurité, quand une page web tente d'accéder aux données de localisation, l'utilisateur est prévenu, et son accord lui est demandé. Sachez que chaque navigateur a ses propres méthodes et politiques pour gérer les autorisations.</p>
-</div>
+> **Note :** Pour des raisons de sécurité, quand une page web tente d'accéder aux données de localisation, l'utilisateur est prévenu, et son accord lui est demandé. Sachez que chaque navigateur a ses propres méthodes et politiques pour gérer les autorisations.
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<p><em>L'interface de géolocalisation n'utilise ou n'hérite d'aucune propriété.</em></p>
+_L'interface de géolocalisation n'utilise ou n'hérite d'aucune propriété._
 
-<h2 id="Méthodes">Méthodes</h2>
+## Méthodes
 
-<p><em>L'interface de géolocalisation n'hérite d'aucune méthode.</em></p>
+_L'interface de géolocalisation n'hérite d'aucune méthode._
 
-<dl>
- <dt>{{domxref("Geolocation.getCurrentPosition()")}}</dt>
- <dd>Determine la position actuelle de l'appareil et donne en retour l'objet {{domxref("Position")}} avec sa valeur.</dd>
- <dt>{{domxref("Geolocation.watchPosition()")}}</dt>
- <dd>Retourne une valeur <code>long</code> représentant la nouvelle fonction callback, créée pour être utilisée à chaque fois que la position de l'appareil change.</dd>
- <dt>{{domxref("Geolocation.clearWatch()")}}</dt>
- <dd>Supprime le lien créé par la précédente utilisation de <code>watchPosition()</code>.</dd>
-</dl>
+- {{domxref("Geolocation.getCurrentPosition()")}}
+  - : Determine la position actuelle de l'appareil et donne en retour l'objet {{domxref("Position")}} avec sa valeur.
+- {{domxref("Geolocation.watchPosition()")}}
+  - : Retourne une valeur `long` représentant la nouvelle fonction callback, créée pour être utilisée à chaque fois que la position de l'appareil change.
+- {{domxref("Geolocation.clearWatch()")}}
+  - : Supprime le lien créé par la précédente utilisation de `watchPosition()`.
 
-<h2 id="Spécifications">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('Geolocation')}}</td>
-   <td>{{Spec2('Geolocation')}}</td>
-   <td>Spécification initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                        | Statut                           | Commentaire             |
+| ------------------------------------ | -------------------------------- | ----------------------- |
+| {{SpecName('Geolocation')}} | {{Spec2('Geolocation')}} | Spécification initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Geolocation")}}</p>
+{{Compat("api.Geolocation")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li><a href="/fr/docs/Web/API/Geolocation_API/Using_the_Geolocation_API">Utiliser geolocation</a></li>
-</ul>
+- [Utiliser geolocation](/fr/docs/Web/API/Geolocation_API/Using_the_Geolocation_API)
diff --git a/files/fr/web/api/geolocation/watchposition/index.md b/files/fr/web/api/geolocation/watchposition/index.md
index c2424f4774..71ed0cfc2c 100644
--- a/files/fr/web/api/geolocation/watchposition/index.md
+++ b/files/fr/web/api/geolocation/watchposition/index.md
@@ -10,35 +10,34 @@ tags:
   - Reference
 translation_of: Web/API/Geolocation/watchPosition
 ---
-<p>{{ APIref("Geolocation API") }}</p>
+{{ APIref("Geolocation API") }}
 
-<p>La méthode <strong><code>Geolocation.watchPosition()</code></strong> permet de manipuler une fonction appelée automatiquement à chaque fois que la position de l'appareil change. Vous pouvez de même, en option, manipuler une autre fonction appelée automatiquement pour gérer les erreurs.</p>
+La méthode **`Geolocation.watchPosition()`** permet de manipuler une fonction appelée automatiquement à chaque fois que la position de l'appareil change. Vous pouvez de même, en option, manipuler une autre fonction appelée automatiquement pour gérer les erreurs.
 
-<p>Cette méthode retourne une valeur ID de veille qui permet de libérer les fonctions déclarées automatiquement, évoquées précédemment, à l'aide de la méthode {{domxref("Geolocation.clearWatch()")}}.</p>
+Cette méthode retourne une valeur ID de veille qui permet de libérer les fonctions déclarées automatiquement, évoquées précédemment, à l'aide de la méthode {{domxref("Geolocation.clearWatch()")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>id</em> = navigator.geolocation.watchPosition(<em>success[</em>, <em>error[</em>, <em>options]]</em>)</pre>
+    id = navigator.geolocation.watchPosition(success[, error[, options]])
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><em>success</em></dt>
- <dd>Nom d'une fonction appelée qui a pour paramètre l'objet {{domxref("Position")}}.</dd>
- <dt><em>error</em> {{optional_inline}}</dt>
- <dd>Nom d'une fonction optionnelle qui a pour paramètre l'objet {{domxref("PositionError")}}.</dd>
- <dt><em>options</em> {{optional_inline}}</dt>
- <dd>Un objet optionnel {{domxref("PositionOptions")}}.</dd>
-</dl>
+- _success_
+  - : Nom d'une fonction appelée qui a pour paramètre l'objet {{domxref("Position")}}.
+- _error_ {{optional_inline}}
+  - : Nom d'une fonction optionnelle qui a pour paramètre l'objet {{domxref("PositionError")}}.
+- _options_ {{optional_inline}}
+  - : Un objet optionnel {{domxref("PositionOptions")}}.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">var id, target, options;
+```js
+var id, target, options;
 
 function success(pos) {
   var crd = pos.coords;
 
-  if (target.latitude === crd.latitude &amp;&amp; target.longitude === crd.longitude) {
+  if (target.latitude === crd.latitude && target.longitude === crd.longitude) {
     console.log('Bravo, vous avez atteint la cible');
     navigator.geolocation.clearWatch(id);
   }
@@ -60,41 +59,24 @@ options = {
 };
 
 id = navigator.geolocation.watchPosition(success, error, options);
-</pre>
-
-<div class="note">
-  <p><strong>Note :</strong> Si votre application fonctionne sous Firefox OS, veillez à la <a href="/en-US/docs/Web/API/Geolocation/navigator.requestWakeLock()">geolocation wake lock</a> pour que votre application continue à recevoir les changements de positions si votre application tourne en tâche de fond, ou si votre écran est éteint.</p>
-</div>
-
-<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('Geolocation', '#watch-position', 'Geolocation.watchPosition()')}}</td>
-   <td>{{Spec2('Geolocation')}}</td>
-   <td>Specification initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Geolocation.watchPosition")}}</p>
-
-<h2 id="See_also">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/Geolocation/navigator.requestWakeLock()">geolocation wake lock</a></li>
- <li><a href="/fr/docs/WebAPI/Using_geolocation">Utiliser geolocation</a></li>
- <li>L'interface qui lui est réservée, {{domxref("Geolocation")}}, et la façon d'y accéder {{domxref("NavigatorGeolocation.geolocation")}}.</li>
- <li>L'opération inverse : {{domxref("Geolocation.clearWatch()")}}</li>
- <li>Une méthode similaire : {{domxref("Geolocation.getCurrentPosition()")}}</li>
-</ul>
+```
+
+> **Note :** Si votre application fonctionne sous Firefox OS, veillez à la [geolocation wake lock](</en-US/docs/Web/API/Geolocation/navigator.requestWakeLock()>) pour que votre application continue à recevoir les changements de positions si votre application tourne en tâche de fond, ou si votre écran est éteint.
+
+## Spécifications
+
+| Spécification                                                                                            | Statut                           | Commentaire             |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------- |
+| {{SpecName('Geolocation', '#watch-position', 'Geolocation.watchPosition()')}} | {{Spec2('Geolocation')}} | Specification initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Geolocation.watchPosition")}}
+
+## Voir aussi
+
+- [geolocation wake lock](</fr/docs/Web/API/Geolocation/navigator.requestWakeLock()>)
+- [Utiliser geolocation](/fr/docs/WebAPI/Using_geolocation)
+- L'interface qui lui est réservée, {{domxref("Geolocation")}}, et la façon d'y accéder {{domxref("NavigatorGeolocation.geolocation")}}.
+- L'opération inverse : {{domxref("Geolocation.clearWatch()")}}
+- Une méthode similaire : {{domxref("Geolocation.getCurrentPosition()")}}
diff --git a/files/fr/web/api/geolocation_api/index.md b/files/fr/web/api/geolocation_api/index.md
index 153bce57b2..7b3fd6c5ec 100644
--- a/files/fr/web/api/geolocation_api/index.md
+++ b/files/fr/web/api/geolocation_api/index.md
@@ -8,67 +8,68 @@ tags:
   - Géolocalisation
 translation_of: Web/API/Geolocation_API
 ---
-<div>{{securecontext_header}}{{DefaultAPISidebar("Geolocation API")}}</div>
+{{securecontext_header}}{{DefaultAPISidebar("Geolocation API")}}
 
-<p>L'API <strong>Geolocation </strong>(pour géolocalisation) permet à un utilisateur d'indiquer sa localisation à une application web s'il le souhaite. Pour des raisons de vie privée, l'application doit demander la permission à l'utilisateur de manipuler ces informations.</p>
+L'API **Geolocation** (pour géolocalisation) permet à un utilisateur d'indiquer sa localisation à une application web s'il le souhaite. Pour des raisons de vie privée, l'application doit demander la permission à l'utilisateur de manipuler ces informations.
 
-<h2 id="Lobjet_geolocation">L'objet <code>geolocation</code></h2>
+## L'objet `geolocation`
 
-<p>L'API <a href="/fr/docs/Web/API/Geolocation">Geolocation</a> est publiée via l'objet {{domxref("navigator.geolocation")}}.</p>
+L'API [Geolocation](/fr/docs/Web/API/Geolocation) est publiée via l'objet {{domxref("navigator.geolocation")}}.
 
-<p>Si l'objet existe, les services de géolocalisation sont disponibles. On peut donc tester la présence de ces fonctionnalités de cette façon :</p>
+Si l'objet existe, les services de géolocalisation sont disponibles. On peut donc tester la présence de ces fonctionnalités de cette façon :
 
-<pre class="brush: js">if ("geolocation" in navigator) {
+```js
+if ("geolocation" in navigator) {
   /* la géolocalisation est disponible */
 } else {
   /* la géolocalisation n'est pas disponible */
 }
-</pre>
+```
 
-<div class="note">
-<p><strong>Note :</strong> Pour Firefox 24 et les versions antérieures, <code>"geolocation" in navigator</code> renvoyait toujours <code>true</code> même si l'API était désactivée. Cela a été corrigé à partir de <a href="/en-US/docs/Mozilla/Firefox/Releases/25/Site_Compatibility">Firefox 25</a> afin de respecter la spécification ({{bug(884921)}}).</p>
-</div>
+> **Note :** Pour Firefox 24 et les versions antérieures, `"geolocation" in navigator` renvoyait toujours `true` même si l'API était désactivée. Cela a été corrigé à partir de [Firefox 25](/en-US/docs/Mozilla/Firefox/Releases/25/Site_Compatibility) afin de respecter la spécification ({{bug(884921)}}).
 
-<h3 id="Obtenir_la_position_actuelle">Obtenir la position actuelle</h3>
+### Obtenir la position actuelle
 
-<p>Afin d'obtenir la position actuelle de l'utilisateur, on peut appeler la méthode {{domxref("geolocation.getCurrentPosition()","getCurrentPosition()")}}. Cela initie une requête asynchrone pour détecter la position de l'utilisateur en demandant au composant matériel une position à jour. Lorsque la position est déterminée, la fonction de <em>callback</em> est appelée. Il est possible de fournir un deuxième <em>callback</em> afin de gérer les erreurs. Le troisième paramètre de la fonction, optionnel, est un objet d'options qui indique l'âge maximal pour la position, le temps à attendre l'exécution de la requête et si on souhaite obtenir une précision élevée pour la position.</p>
+Afin d'obtenir la position actuelle de l'utilisateur, on peut appeler la méthode {{domxref("geolocation.getCurrentPosition()","getCurrentPosition()")}}. Cela initie une requête asynchrone pour détecter la position de l'utilisateur en demandant au composant matériel une position à jour. Lorsque la position est déterminée, la fonction de _callback_ est appelée. Il est possible de fournir un deuxième _callback_ afin de gérer les erreurs. Le troisième paramètre de la fonction, optionnel, est un objet d'options qui indique l'âge maximal pour la position, le temps à attendre l'exécution de la requête et si on souhaite obtenir une précision élevée pour la position.
 
-<div class="note">
-<p><strong>Note :</strong> Par défaut {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}} tente de répondre aussi rapidement que possible quitte à ce que le résultat soit peu précis. Cela permet de répondre rapidement (potentiellement avec des données peu précises comme l'IP ou le WiFi) plutôt que d'attendre une ou plusieurs minutes le calibrage du GPS.</p>
-</div>
+> **Note :** Par défaut {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}} tente de répondre aussi rapidement que possible quitte à ce que le résultat soit peu précis. Cela permet de répondre rapidement (potentiellement avec des données peu précises comme l'IP ou le WiFi) plutôt que d'attendre une ou plusieurs minutes le calibrage du GPS.
 
-<pre class="brush: js">navigator.geolocation.getCurrentPosition(function(position) {
+```js
+navigator.geolocation.getCurrentPosition(function(position) {
   faireQqc(position.coords.latitude, position.coords.longitude);
-});</pre>
+});
+```
 
-<p>Dans l'exemple ci-avant, la fonction <code>faireQqc()</code> sera exécutée quand la localisation sera obtenue.</p>
+Dans l'exemple ci-avant, la fonction `faireQqc()` sera exécutée quand la localisation sera obtenue.
 
-<h3 id="Suivre_lévolution_de_la_position">Suivre l'évolution de la position</h3>
+### Suivre l'évolution de la position
 
-<p>Si les données de position changent (que l'appareil ait bougé ou que des informations de géolocalisation plus précises soient disponibles), on peut définir une fonction de <em>callback</em> qui sera appelée avec les informations mises à jour</p>
+Si les données de position changent (que l'appareil ait bougé ou que des informations de géolocalisation plus précises soient disponibles), on peut définir une fonction de _callback_ qui sera appelée avec les informations mises à jour
 
-<p>Pour cela, on utilise la fonction {{domxref("Geolocation.watchPosition()","watchPosition()")}} qui utilise les mêmes paramètres d'entrée que {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}. Ce <em>callback</em> est appelé plusieurs fois, permettant au navigateur de mettre à jour la position lorsqu'on se déplace ou lorsque des données plus précises sont fournies. La fonction de rappel pour la gestion des erreurs (optionnelle) peut aussi être appelée de façon répétée.</p>
+Pour cela, on utilise la fonction {{domxref("Geolocation.watchPosition()","watchPosition()")}} qui utilise les mêmes paramètres d'entrée que {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}. Ce _callback_ est appelé plusieurs fois, permettant au navigateur de mettre à jour la position lorsqu'on se déplace ou lorsque des données plus précises sont fournies. La fonction de rappel pour la gestion des erreurs (optionnelle) peut aussi être appelée de façon répétée.
 
-<div class="note">
-<p><strong>Note :</strong> On peut utiliser {{domxref("Geolocation.watchPosition()","watchPosition()")}} sans avoir d'abord appelé {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}.</p>
-</div>
+> **Note :** On peut utiliser {{domxref("Geolocation.watchPosition()","watchPosition()")}} sans avoir d'abord appelé {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}.
 
-<pre class="brush: js">var watchID = navigator.geolocation.watchPosition(function(position) {
+```js
+var watchID = navigator.geolocation.watchPosition(function(position) {
   faireQqc(position.coords.latitude, position.coords.longitude);
-});</pre>
+});
+```
 
-<p>La méthode {{domxref("Geolocation.watchPosition()","watchPosition()")}} renvoie un identifiant qui peut être utilisé afin de redemander la position. Cet identifiant peut également être passé à la méthode {{domxref("Geolocation.clearWatch()","clearWatch()")}} afin d'arrêter le suivi de la position.</p>
+La méthode {{domxref("Geolocation.watchPosition()","watchPosition()")}} renvoie un identifiant qui peut être utilisé afin de redemander la position. Cet identifiant peut également être passé à la méthode {{domxref("Geolocation.clearWatch()","clearWatch()")}} afin d'arrêter le suivi de la position.
 
-<pre class="brush: js">navigator.geolocation.clearWatch(watchID);
-</pre>
+```js
+navigator.geolocation.clearWatch(watchID);
+```
 
-<h3 id="Paramétrer_la_réponse">Paramétrer la réponse</h3>
+### Paramétrer la réponse
 
-<p>{{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}} et {{domxref("Geolocation.watchPosition()","watchPosition()")}} prennent en argument un <em>callback</em> appelé en cas de succès, un deuxième <em>callback</em> (optionnel) appelé en cas d'erreur et un troisième argument (optionnel) qui est un objet <code><a href="/fr/docs/Web/API/PositionOptions">PositionOptions</a></code>.</p>
+{{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}} et {{domxref("Geolocation.watchPosition()","watchPosition()")}} prennent en argument un _callback_ appelé en cas de succès, un deuxième _callback_ (optionnel) appelé en cas d'erreur et un troisième argument (optionnel) qui est un objet [`PositionOptions`](/fr/docs/Web/API/PositionOptions).
 
-<p>Un appel à {{domxref("Geolocation.watchPosition()","watchPosition")}} peut donc ressembler à :</p>
+Un appel à {{domxref("Geolocation.watchPosition()","watchPosition")}} peut donc ressembler à :
 
-<pre class="brush: js">function geo_success(position) {
+```js
+function geo_success(position) {
   do_something(position.coords.latitude, position.coords.longitude);
 }
 
@@ -82,28 +83,31 @@ var geo_options = {
   timeout           : 27000
 };
 
-var wpid = navigator.geolocation.watchPosition(geo_success, geo_error, geo_options);</pre>
+var wpid = navigator.geolocation.watchPosition(geo_success, geo_error, geo_options);
+```
 
-<h2 id="Décrire_une_position">Décrire une position</h2>
+## Décrire une position
 
-<p>La position de l'utilisateur est décrite par un objet {{domxref("Position")}} qui fait référence à un objet {{domxref("Coordinates")}} via la propriété <code>coords</code>.</p>
+La position de l'utilisateur est décrite par un objet {{domxref("Position")}} qui fait référence à un objet {{domxref("Coordinates")}} via la propriété `coords`.
 
-<p>{{page("/fr/docs/Web/API/Position")}}</p>
+{{page("/fr/docs/Web/API/Position")}}
 
-<p>{{page("/fr/docs/Web/API/Position/coords","Coordinates")}}</p>
+{{page("/fr/docs/Web/API/Position/coords","Coordinates")}}
 
-<h2 id="Gérer_les_erreurs">Gérer les erreurs</h2>
+## Gérer les erreurs
 
-<p>Le <em>callback</em> de gestion des erreurs (s'il est passé à <code>getCurrentPosition()</code> ou <code>watchPosition()</code>) s'attend à recevoir un objet <code><a href="/fr/docs/Web/API/PositionError">PositionError</a></code> comme premier paramètre.</p>
+Le _callback_ de gestion des erreurs (s'il est passé à `getCurrentPosition()` ou `watchPosition()`) s'attend à recevoir un objet [`PositionError`](/fr/docs/Web/API/PositionError) comme premier paramètre.
 
-<pre class="brush: js">function errorCallback(error) {
+```js
+function errorCallback(error) {
   alert('ERROR(' + error.code + '): ' + error.message);
 };
-</pre>
+```
 
-<h2 id="Exemple_interactif">Exemple interactif</h2>
+## Exemple interactif
 
-<pre class="brush: css hidden">body {
+```css hidden
+body {
   padding: 20px;
   background-color:#ffffc9
 }
@@ -111,18 +115,20 @@ var wpid = navigator.geolocation.watchPosition(geo_success, geo_error, geo_optio
 button {
   margin: .5rem 0;
 }
-</pre>
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html;">&lt;button id = "find-me"&gt;Montrer ma localisation&lt;/button&gt;&lt;br/&gt;
-&lt;p id = "status"&gt;&lt;/p&gt;
-&lt;a id = "map-link" target="_blank"&gt;&lt;/a&gt;
-</pre>
+```html
+<button id = "find-me">Montrer ma localisation</button><br/>
+<p id = "status"></p>
+<a id = "map-link" target="_blank"></a>
+```
 
-<h3 id="JavaScript">JavaScript</h3>
+### JavaScript
 
-<pre class="brush: js">function geoFindMe() {
+```js
+function geoFindMe() {
 
   const status = document.querySelector('#status');
   const mapLink = document.querySelector('#map-link');
@@ -153,17 +159,18 @@ button {
 }
 
 document.querySelector('#find-me').addEventListener('click', geoFindMe);
-</pre>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample('Exemple_interactif', 350, 150, "", "", "", "geolocation")}}</p>
+{{EmbedLiveSample('Exemple_interactif', 350, 150, "", "", "", "geolocation")}}
 
-<h2 id="Demander_la_permission">Demander la permission</h2>
+## Demander la permission
 
-<p>Pour une extension, toute utilisation des données de géolocalisation ne peut se faire qu'après avoir obtenu la permission. La fonction qui suit permet de demander la permission de façon semblable au rendu des pages web. La réponse de l'utilisateur est enregistrée dans la préférence indiquée par le paramètre <code>pref</code>. La fonction fournie dans le paramètre de <code>callback</code> sera appelée avec une valeur booléenne qui indique la réponse de l'utilisateur. Lorsque cette dernière vaut <code>true</code>, le module complémentaire pourra accéder aux données de géolocalisation.</p>
+Pour une extension, toute utilisation des données de géolocalisation ne peut se faire qu'après avoir obtenu la permission. La fonction qui suit permet de demander la permission de façon semblable au rendu des pages web. La réponse de l'utilisateur est enregistrée dans la préférence indiquée par le paramètre `pref`. La fonction fournie dans le paramètre de `callback` sera appelée avec une valeur booléenne qui indique la réponse de l'utilisateur. Lorsque cette dernière vaut `true`, le module complémentaire pourra accéder aux données de géolocalisation.
 
-<pre class="brush: js">function prompt(window, pref, message, callback) {
+```js
+function prompt(window, pref, message, callback) {
     let branch = Components.classes["@mozilla.org/preferences-service;1"]
                            .getService(Components.interfaces.nsIPrefBranch);
 
@@ -225,20 +232,18 @@ prompt(window,
        "extensions.foo-addon.allowGeolocation",
        "Foo Add-on wants to know your location.",
        function callback(allowed) { alert(allowed); });
-</pre>
+```
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Geolocation")}}</p>
+{{Compat("api.Geolocation")}}
 
-<h3 id="Disponibilité">Disponibilité</h3>
+### Disponibilité
 
-<p>La localisation basée sur le WiFi étant généralement obtenue via un service Google, l'API de géolocalisation peut être indisponible en Chine. Vous pouvez utiliser des fournisseurs tiers tels que <a href="http://lbsyun.baidu.com/index.php?title=jspopular/guide/geolocation">Baidu</a>, <a href="https://lbs.amap.com/api/javascript-api/guide/services/geolocation#geolocation">Autonavi</a> ou <a href="http://lbs.qq.com/tool/component-geolocation.html">Tencent</a>. Ces services se basent sur l'adresse IP de l'utilisateur ou sur une application locale afin de fournir un positionnement amélioré.</p>
+La localisation basée sur le WiFi étant généralement obtenue via un service Google, l'API de géolocalisation peut être indisponible en Chine. Vous pouvez utiliser des fournisseurs tiers tels que [Baidu](http://lbsyun.baidu.com/index.php?title=jspopular/guide/geolocation), [Autonavi](https://lbs.amap.com/api/javascript-api/guide/services/geolocation#geolocation) ou [Tencent](http://lbs.qq.com/tool/component-geolocation.html). Ces services se basent sur l'adresse IP de l'utilisateur ou sur une application locale afin de fournir un positionnement amélioré.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("navigator.geolocation")}}</li>
- <li><a href="https://www.w3.org/TR/geolocation-API/">L'API Geolocation sur w3.org</a></li>
- <li><a href="https://hacks.mozilla.org/2013/10/who-moved-my-geolocation/">Qui a déplacé ma géolocalisation ? sur le blog Hacks</a></li>
-</ul>
+- {{domxref("navigator.geolocation")}}
+- [L'API Geolocation sur w3.org](https://www.w3.org/TR/geolocation-API/)
+- [Qui a déplacé ma géolocalisation ? sur le blog Hacks](https://hacks.mozilla.org/2013/10/who-moved-my-geolocation/)
diff --git a/files/fr/web/api/geolocationcoordinates/index.md b/files/fr/web/api/geolocationcoordinates/index.md
index f7897746b3..73419dc1d9 100644
--- a/files/fr/web/api/geolocationcoordinates/index.md
+++ b/files/fr/web/api/geolocationcoordinates/index.md
@@ -3,65 +3,46 @@ title: Coordinates
 slug: Web/API/GeolocationCoordinates
 translation_of: Web/API/GeolocationCoordinates
 ---
-<div>{{securecontext_header}}{{APIRef("Geolocation API")}}</div>
+{{securecontext_header}}{{APIRef("Geolocation API")}}L'interface **`Coordinates`** représente la position et l'altitude du périphérique sur Terre, ainsi que la précision avec lesquels ces propriétés sont calculées.
 
-<div>L'interface <strong><code>Coordinates</code></strong> représente la position et l'altitude du périphérique sur Terre, ainsi que la précision avec lesquels ces propriétés sont calculées.</div>
+## Propriétés
 
-<h2 id="Propriétés">Propriétés</h2>
+_L'interface `Coordinates` n'hérite d'aucune propriété._
 
-<p><em>L'interface <code>Coordinates</code> n'hérite d'aucune propriété.</em></p>
+- {{domxref("Coordinates.latitude")}} {{readonlyInline}} {{securecontext_inline}}
+  - : Renvoie un `double` représentant la latitude en degrés décimaux.
+- {{domxref("Coordinates.longitude")}} {{readonlyInline}} {{securecontext_inline}}
+  - : Renvoie un `double` représentant la longitude en degrés décimaux.
+- {{domxref("Coordinates.altitude")}} {{readonlyInline}} {{securecontext_inline}}
+  - : Renvoie un `double` représentant l'altitude en mètres, relatif au niveau de la mer. Cette valeur peut être `null` si l'implémentation ne peut pas fournir de données.
+- {{domxref("Coordinates.accuracy")}} {{readonlyInline}} {{securecontext_inline}}
+  - : Renvoie un `double` représentant la précision des propriétés `latitude` et `longitude` , exprimé en mètres.
+- {{domxref("Coordinates.altitudeAccuracy")}} {{readonlyInline}} {{securecontext_inline}}
+  - : Renvoie un `double` représentant la précision de l'`altitude` . Cette valeur peut être `null`.
+- {{domxref("Coordinates.heading")}} {{readonlyInline}} {{securecontext_inline}}
+  - : Renvoie un `double` représentant la direction dans laquelle le périphérique se déplace. Cette valeur, spécifiée en degrés, indique la distance à laquelle le périphérique se trouve par rapport au Vrai Nord. `0` degrés représente le Vrai Nord, la direction est déterminé suivant le sens horaire des aiguilles d'une montre (ce qui veut dire que l'Est se trouve à `90` degrés et l'Ouest à `270` degrés). Si `speed` est à `0`, `heading` est alors [`NaN`](/en-US/docs/JavaScript/Reference/Global_Objects/NaN). Si le périphérique est incapable de fournir des informations relatives à l'endroit où il se déplace (`heading`), cette valeur est alors `null`.
+- {{domxref("Coordinates.speed")}} {{readonlyInline}} {{securecontext_inline}}
+  - : Renvoie un `double` représentant la vélocité du périphérique en mètres par seconde. Cette valeur peut être `null`.
 
-<dl>
- <dt>{{domxref("Coordinates.latitude")}} {{readonlyInline}} {{securecontext_inline}}</dt>
- <dd>Renvoie un <code>double</code> représentant la latitude en degrés décimaux.</dd>
- <dt>{{domxref("Coordinates.longitude")}} {{readonlyInline}} {{securecontext_inline}}</dt>
- <dd>Renvoie un <code>double</code> représentant la longitude en degrés décimaux.</dd>
- <dt>{{domxref("Coordinates.altitude")}} {{readonlyInline}} {{securecontext_inline}}</dt>
- <dd>Renvoie un <code>double</code> représentant l'altitude en mètres, relatif au niveau de la mer. Cette valeur peut être <code>null</code> si l'implémentation ne peut pas fournir de données.</dd>
- <dt>{{domxref("Coordinates.accuracy")}} {{readonlyInline}} {{securecontext_inline}}</dt>
- <dd>Renvoie un <code>double</code> représentant la précision des propriétés <code>latitude</code> et <code>longitude</code> , exprimé en mètres.</dd>
- <dt>{{domxref("Coordinates.altitudeAccuracy")}} {{readonlyInline}} {{securecontext_inline}}</dt>
- <dd>Renvoie un <code>double</code> représentant la précision de l'<code>altitude</code> . Cette valeur peut être <code>null</code>.</dd>
- <dt>{{domxref("Coordinates.heading")}} {{readonlyInline}} {{securecontext_inline}}</dt>
- <dd>Renvoie un <code>double</code> représentant la direction dans laquelle le périphérique se déplace. Cette valeur, spécifiée en degrés, indique la distance à laquelle le périphérique se trouve par rapport au Vrai Nord. <code>0</code> degrés représente le Vrai Nord, la direction est déterminé suivant le sens horaire des aiguilles d'une montre (ce qui veut dire que l'Est se trouve à <code>90</code> degrés et l'Ouest à <code>270</code> degrés). Si <code>speed</code> est à <code>0</code>, <code>heading</code> est alors <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/NaN">NaN</a></code>. Si le périphérique est incapable de fournir des informations relatives à l'endroit où il se déplace (<code>heading</code>), cette valeur est alors <code>null</code>.</dd>
- <dt>{{domxref("Coordinates.speed")}} {{readonlyInline}} {{securecontext_inline}}</dt>
- <dd>Renvoie un <code>double</code> représentant la vélocité du périphérique en mètres par seconde. Cette valeur peut être <code>null</code>.</dd>
-</dl>
+## Méthodes
 
-<h2 id="Méthodes">Méthodes</h2>
+**_L'interface_ `Coordinates` _n'implémente et n'hérite d'aucune méthode._**
 
-<p><em><em><em>L'interface </em><code>Coordinates</code> <em>n'implémente et n'hérite d'aucune méthode.</em></em></em></p>
 
-<p> </p>
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p> </p>
 
-<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('Geolocation', '#coordinates', 'Coordinates')}}</td>
-   <td>{{Spec2('Geolocation')}}</td>
-   <td>Spécification initiale.</td>
-  </tr>
- </tbody>
-</table>
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+| Spécification                                                                | Statut                           | Commentaire             |
+| ---------------------------------------------------------------------------- | -------------------------------- | ----------------------- |
+| {{SpecName('Geolocation', '#coordinates', 'Coordinates')}} | {{Spec2('Geolocation')}} | Spécification initiale. |
 
-<p>{{Compat("api.GeolocationCoordinates")}}</p>
+## Compatibilité des navigateurs
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+{{Compat("api.GeolocationCoordinates")}}
 
-<ul>
- <li><a href="/fr/docs/WebAPI/Using_geolocation">Using geolocation</a></li>
- <li>The {{domxref("Geolocation")}} interface that uses it.</li>
-</ul>
+## Voir aussi
+
+- [Using geolocation](/fr/docs/WebAPI/Using_geolocation)
+- The {{domxref("Geolocation")}} interface that uses it.
diff --git a/files/fr/web/api/geolocationposition/index.md b/files/fr/web/api/geolocationposition/index.md
index d52abf198c..68c5055636 100644
--- a/files/fr/web/api/geolocationposition/index.md
+++ b/files/fr/web/api/geolocationposition/index.md
@@ -10,51 +10,34 @@ tags:
   - TopicStub
 translation_of: Web/API/GeolocationPosition
 ---
-<div>{{securecontext_header}}{{APIRef("Geolocation API")}}</div>
+{{securecontext_header}}{{APIRef("Geolocation API")}}
 
-<p>L'interface <strong><code>GeolocationPosition</code></strong> représente la position de l'appareil concerné à un instant donné. La position, représentée par un objet {{domxref("GeolocationCoordinates")}}, comprend la position 2D de l'appareil, sur un sphéroïde représentant la Terre, mais aussi son altitude et sa vitesse.</p>
+L'interface **`GeolocationPosition`** représente la position de l'appareil concerné à un instant donné. La position, représentée par un objet {{domxref("GeolocationCoordinates")}}, comprend la position 2D de l'appareil, sur un sphéroïde représentant la Terre, mais aussi son altitude et sa vitesse.
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<p><em>L'interface <code>GeolocationPosition</code> n'hérite d'aucune propriété.</em></p>
+_L'interface `GeolocationPosition` n'hérite d'aucune propriété._
 
-<dl>
- <dt>{{domxref("GeolocationPosition.coords")}} {{readonlyInline}} {{securecontext_inline}}</dt>
- <dd>Renvoie un objet {{domxref("GeolocationCoordinates")}} définissant l'emplacement actuel.</dd>
- <dt>{{domxref("GeolocationPosition.timestamp")}} {{readonlyInline}} {{securecontext_inline}}</dt>
- <dd>Renvoie un {{domxref("DOMTimeStamp")}} représentant l'heure à laquelle l'emplacement a été récupéré.</dd>
-</dl>
+- {{domxref("GeolocationPosition.coords")}} {{readonlyInline}} {{securecontext_inline}}
+  - : Renvoie un objet {{domxref("GeolocationCoordinates")}} définissant l'emplacement actuel.
+- {{domxref("GeolocationPosition.timestamp")}} {{readonlyInline}} {{securecontext_inline}}
+  - : Renvoie un {{domxref("DOMTimeStamp")}} représentant l'heure à laquelle l'emplacement a été récupéré.
 
-<h2 id="Méthodes">Méthodes</h2>
+## Méthodes
 
-<p><em><em>L'interface </em><code>GeolocationPosition</code><em> n'implémente ni n'hérite d'aucune méthode.</em></em></p>
+**L'interface* `GeolocationPosition` *n'implémente ni n'hérite d'aucune méthode.**
 
-<h2 id="Spécifications">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('Geolocation', '#position_interface', 'GeolocationPosition')}}</td>
-   <td>{{Spec2('Geolocation')}}</td>
-   <td>Spécification initale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                    | Statut                           | Commentaire            |
+| ------------------------------------------------------------------------------------------------ | -------------------------------- | ---------------------- |
+| {{SpecName('Geolocation', '#position_interface', 'GeolocationPosition')}} | {{Spec2('Geolocation')}} | Spécification initale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.GeolocationPosition")}}</p>
+{{Compat("api.GeolocationPosition")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/en-US/docs/Web/API/Geolocation_API/Using">Utilisation de l'API de Géolocalisation</a></li>
- <li>{{domxref("Geolocation")}}</li>
-</ul>
+- [Utilisation de l'API de Géolocalisation](/en-US/docs/Web/API/Geolocation_API/Using)
+- {{domxref("Geolocation")}}
diff --git a/files/fr/web/api/geolocationposition/timestamp/index.md b/files/fr/web/api/geolocationposition/timestamp/index.md
index 460fb29213..252f00f922 100644
--- a/files/fr/web/api/geolocationposition/timestamp/index.md
+++ b/files/fr/web/api/geolocationposition/timestamp/index.md
@@ -3,47 +3,29 @@ title: GeolocationPosition.timestamp
 slug: Web/API/GeolocationPosition/timestamp
 translation_of: Web/API/GeolocationPosition/timestamp
 ---
-<div>{{securecontext_header}}{{APIRef("Geolocation API")}}</div>
+{{securecontext_header}}{{APIRef("Geolocation API")}}
 
-<p>La propriété en lecture seule <code><strong>GeolocationPosition.timestamp</strong></code> retourne un objet {{domxref("DOMTimeStamp")}} représentant la date et l'heure de la création de l'objet {{domxref("GeolocationPosition")}} auquel il appartient. La précision est de l'ordre de la milliseconde.</p>
+La propriété en lecture seule **`GeolocationPosition.timestamp`** retourne un objet {{domxref("DOMTimeStamp")}} représentant la date et l'heure de la création de l'objet {{domxref("GeolocationPosition")}} auquel il appartient. La précision est de l'ordre de la milliseconde.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre>var timestamp = geolocationPositionInstance.timestamp
-</pre>
+    var timestamp = geolocationPositionInstance.timestamp
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>Un objet {{domxref("DOMTimeStamp")}}.</p>
+Un objet {{domxref("DOMTimeStamp")}}.
 
-<h2 id="Spécification">Spécification</h2>
+## Spécification
 
-<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('Geolocation', '#dom-geolocationposition-timestamp', 'GeolocationPosition.timestamp')}}</td>
-   <td>{{Spec2('Geolocation')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                        | Statut                           | Commentaire          |
+| ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName('Geolocation', '#dom-geolocationposition-timestamp', 'GeolocationPosition.timestamp')}} | {{Spec2('Geolocation')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
+{{Compat("api.GeolocationPosition.timestamp")}}
 
+## Voir aussi
 
-<p>{{Compat("api.GeolocationPosition.timestamp")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/Geolocation_API/Using">Utiliser l'API de Geolocation</a></li>
- <li>{{domxref("GeolocationPosition")}}</li>
-</ul>
+- [Utiliser l'API de Geolocation](/fr/docs/Web/API/Geolocation_API/Using)
+- {{domxref("GeolocationPosition")}}
diff --git a/files/fr/web/api/geolocationpositionerror/index.md b/files/fr/web/api/geolocationpositionerror/index.md
index 9a7f5a0af1..0a03eb4bee 100644
--- a/files/fr/web/api/geolocationpositionerror/index.md
+++ b/files/fr/web/api/geolocationpositionerror/index.md
@@ -3,78 +3,42 @@ title: GeolocationPositionError
 slug: Web/API/GeolocationPositionError
 translation_of: Web/API/GeolocationPositionError
 ---
-<div>{{securecontext_header}}{{APIRef("Geolocation API")}}</div>
+{{securecontext_header}}{{APIRef("Geolocation API")}}
 
-<p>L'interface <strong><code>GeolocationPositionError</code></strong> représente la raison de l'erreur apparue lorsque l'on utilise la géolocalisation de l'appareil.</p>
+L'interface **`GeolocationPositionError`** représente la raison de l'erreur apparue lorsque l'on utilise la géolocalisation de l'appareil.
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<p><em>L'interface <code>GeolocationPositionError</code> n'hérite d'aucune propriété.</em></p>
+_L'interface `GeolocationPositionError` n'hérite d'aucune propriété._
 
-<dl>
- <dt>{{domxref("GeolocationPositionError.code")}} {{readonlyInline}} {{securecontext_inline}}</dt>
- <dd>Retourne un <code>unsigned short</code> représentant un code d'erreur. Les valeurs possibles sont:
- <table class="standard-table">
-  <tbody>
-   <tr>
-    <th scope="col">Valeur</th>
-    <th scope="col">Constante associée</th>
-    <th scope="col">Description</th>
-   </tr>
-   <tr>
-    <td><code>1</code></td>
-    <td><code>PERMISSION_DENIED</code></td>
-    <td>L’acquisition de la position échoue car la page n'a pas l'autorisation de le faire.</td>
-   </tr>
-   <tr>
-    <td><code>2</code></td>
-    <td><code>POSITION_UNAVAILABLE</code></td>
-    <td>L’acquisition de la localisation échoue car au moins une source donnant la position a retourné une erreur interne.</td>
-   </tr>
-   <tr>
-    <td><code>3</code></td>
-    <td><code>TIMEOUT</code></td>
-    <td>Le temps alloué pour obtenir la position défini par {{domxref("PositionOptions.timeout")}} est écoulé avant que l'information soit obtenu.</td>
-   </tr>
-  </tbody>
- </table>
- </dd>
- <dt>{{domxref("GeolocationPositionError.message")}} {{readonlyInline}} {{securecontext_inline}}</dt>
- <dd>Retourne une {{domxref("DOMString")}} compréhensible par un humain décrivant les détails de l'erreur. Les spécifications indiquent que cela sert au débogage et ne doit pas être directement affiché à l'utilisateur.</dd>
-</dl>
+- {{domxref("GeolocationPositionError.code")}} {{readonlyInline}} {{securecontext_inline}}
 
-<h2 id="Méthodes">Méthodes</h2>
+  - : Retourne un `unsigned short` représentant un code d'erreur. Les valeurs possibles sont:
 
-<p><em><em>L'interface </em><code>GeolocationPositionError</code><em> n'implémente et n'hérite d'aucune méthode.</em></em></p>
+    | Valeur | Constante associée     | Description                                                                                                                                              |
+    | ------ | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
+    | `1`    | `PERMISSION_DENIED`    | L’acquisition de la position échoue car la page n'a pas l'autorisation de le faire.                                                                      |
+    | `2`    | `POSITION_UNAVAILABLE` | L’acquisition de la localisation échoue car au moins une source donnant la position a retourné une erreur interne.                                       |
+    | `3`    | `TIMEOUT`              | Le temps alloué pour obtenir la position défini par {{domxref("PositionOptions.timeout")}} est écoulé avant que l'information soit obtenu. |
 
-<h2 id="Spécifications">Spécifications</h2>
+- {{domxref("GeolocationPositionError.message")}} {{readonlyInline}} {{securecontext_inline}}
+  - : Retourne une {{domxref("DOMString")}} compréhensible par un humain décrivant les détails de l'erreur. Les spécifications indiquent que cela sert au débogage et ne doit pas être directement affiché à l'utilisateur.
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('Geolocation', '#position_error_interface', 'GeolocationPositionError')}}</td>
-   <td>{{Spec2('Geolocation')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+## Méthodes
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+**L'interface* `GeolocationPositionError` *n'implémente et n'hérite d'aucune méthode.**
 
+## Spécifications
 
+| Spécification                                                                                                    | Statut                           | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName('Geolocation', '#position_error_interface', 'GeolocationPositionError')}} | {{Spec2('Geolocation')}} | Définition initiale. |
 
-<p>{{Compat("api.GeolocationPositionError")}}</p>
+## Compatibilité des navigateurs
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+{{Compat("api.GeolocationPositionError")}}
 
-<ul>
- <li><a href="/fr/docs/Web/API/Geolocation_API/Using">Utiliser l'API de géolocalisation</a></li>
- <li>{{domxref("Geolocation")}}</li>
-</ul>
+## Voir aussi
+
+- [Utiliser l'API de géolocalisation](/fr/docs/Web/API/Geolocation_API/Using)
+- {{domxref("Geolocation")}}
diff --git a/files/fr/web/api/gestureevent/index.md b/files/fr/web/api/gestureevent/index.md
index e69a862368..5df52dc4c2 100644
--- a/files/fr/web/api/gestureevent/index.md
+++ b/files/fr/web/api/gestureevent/index.md
@@ -8,65 +8,55 @@ tags:
   - Interface
 translation_of: Web/API/GestureEvent
 ---
-<p>{{APIRef("DOM Events")}}</p>
+{{APIRef("DOM Events")}}
 
-<p>{{Non-standard_header()}}</p>
+{{Non-standard_header()}}
 
-<p>L'interface propriétaire <code><strong>GestureEvent</strong></code> propre à WebKitdonne des informations sur les gestes multi-touches. Les événements utilisant cette interface incluent {{event("gesturestart")}}, {{event("gesturechange")}} et {{event("gestureend")}}.</p>
+L'interface propriétaire **`GestureEvent`** propre à WebKitdonne des informations sur les gestes multi-touches. Les événements utilisant cette interface incluent {{event("gesturestart")}}, {{event("gesturechange")}} et {{event("gestureend")}}.
 
-<p><code>GestureEvent</code> dérive de {{domxref("UIEvent")}} qui elle-même dérive de {{domxref("Event")}}.</p>
+`GestureEvent` dérive de {{domxref("UIEvent")}} qui elle-même dérive de {{domxref("Event")}}.
 
-<h2 id="Constructeur">Constructeur</h2>
+## Constructeur
 
-<dl>
- <dt>{{domxref("GestureEvent.GestureEvent", "GestureEvent()")}}</dt>
- <dd>Crée un nouvel objet <code>GestureEvent</code>.</dd>
-</dl>
+- {{domxref("GestureEvent.GestureEvent", "GestureEvent()")}}
+  - : Crée un nouvel objet `GestureEvent`.
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<p><em>Cette interface hérite aussi des propriétés de ses parents {{domxref("UIEvent")}} et {{domxref("Event")}}.</em></p>
+_Cette interface hérite aussi des propriétés de ses parents {{domxref("UIEvent")}} et {{domxref("Event")}}._
 
-<dl>
- <dt>{{domxref("GestureEvent.rotation")}} {{readonlyinline}}</dt>
- <dd>Changement de rotation (en degrés) depuis le début de l'événement. Les valeurs positives indiquent une rotation dans le sens des aiguilles d'une montre ; les valeurs négatives indiquent une rotation dans le sens inverse des aiguilles d'une montre. Valeur initiale : <code>0.0</code></dd>
- <dt>{{domxref("GestureEvent.scale")}} {{readonlyinline}}</dt>
- <dd>Distance entre deux chiffres depuis le début de l'événement. Exprimé en tant que multiple à virgule flottante de la distance initiale entre les chiffres au début du geste. Les valeurs inférieures à 1,0 indiquent une poussée vers l'intérieur (zoom arrière). Les valeurs supérieures à 1.0 indiquent un relachement vers l'extérieur (zoom avant). Valeur initiale: <code>1.0</code></dd>
-</dl>
+- {{domxref("GestureEvent.rotation")}} {{readonlyinline}}
+  - : Changement de rotation (en degrés) depuis le début de l'événement. Les valeurs positives indiquent une rotation dans le sens des aiguilles d'une montre ; les valeurs négatives indiquent une rotation dans le sens inverse des aiguilles d'une montre. Valeur initiale : `0.0`
+- {{domxref("GestureEvent.scale")}} {{readonlyinline}}
+  - : Distance entre deux chiffres depuis le début de l'événement. Exprimé en tant que multiple à virgule flottante de la distance initiale entre les chiffres au début du geste. Les valeurs inférieures à 1,0 indiquent une poussée vers l'intérieur (zoom arrière). Les valeurs supérieures à 1.0 indiquent un relachement vers l'extérieur (zoom avant). Valeur initiale: `1.0`
 
-<h2 id="Méthodes">Méthodes</h2>
+## Méthodes
 
-<p><em>Cette interface hérite aussi des méthodes de ses parents {{domxref("UIEvent")}} et {{domxref("Event")}}.</em></p>
+_Cette interface hérite aussi des méthodes de ses parents {{domxref("UIEvent")}} et {{domxref("Event")}}._
 
-<dl>
- <dt>{{domxref("GestureEvent.initGestureEvent()")}}</dt>
- <dd>Initialise la valeur d'un <code>GestureEvent</code>. Si l'évènement a déjà été distribué, cette méthode ne fait rien.</dd>
-</dl>
+- {{domxref("GestureEvent.initGestureEvent()")}}
+  - : Initialise la valeur d'un `GestureEvent`. Si l'évènement a déjà été distribué, cette méthode ne fait rien.
 
-<h2 id="Types_d'événement_gestuel">Types d'événement gestuel</h2>
+## Types d'événement gestuel
 
-<ul>
- <li>{{event("gesturestart")}}</li>
- <li>{{event("gesturechange")}}</li>
- <li>{{event("gestureend")}}</li>
-</ul>
+- {{event("gesturestart")}}
+- {{event("gesturechange")}}
+- {{event("gestureend")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p><em>Ne fait partie d'aucune spécification.</em> Apple a une<a href="https://developer.apple.com/library/iad/documentation/UserExperience/Reference/GestureEventClassReference/index.html"> description dans la bibliothèque Safari Developer</a>.</p>
+_Ne fait partie d'aucune spécification._ Apple a une[ description dans la bibliothèque Safari Developer](https://developer.apple.com/library/iad/documentation/UserExperience/Reference/GestureEventClassReference/index.html).
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.GestureEvent")}}</p>
+{{Compat("api.GestureEvent")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("MSGestureEvent")}}</li>
- <li>{{event("MSGestureStart")}}</li>
- <li>{{event("MSGestureEnd")}}</li>
- <li>{{event("MSGestureTap")}}</li>
- <li>{{event("MSGestureHold")}}</li>
- <li>{{event("MSGestureChange")}}</li>
- <li>{{event("MSInertiaStart")}}</li>
-</ul>
+- {{domxref("MSGestureEvent")}}
+- {{event("MSGestureStart")}}
+- {{event("MSGestureEnd")}}
+- {{event("MSGestureTap")}}
+- {{event("MSGestureHold")}}
+- {{event("MSGestureChange")}}
+- {{event("MSInertiaStart")}}
diff --git a/files/fr/web/api/globaleventhandlers/index.md b/files/fr/web/api/globaleventhandlers/index.md
index 7c24f31bb7..816fd6e0e6 100644
--- a/files/fr/web/api/globaleventhandlers/index.md
+++ b/files/fr/web/api/globaleventhandlers/index.md
@@ -8,244 +8,209 @@ tags:
   - évènements
 translation_of: Web/API/GlobalEventHandlers
 ---
-<div>
-<div>{{ ApiRef("HTML DOM") }}</div>
-</div>
+{{ ApiRef("HTML DOM") }}
 
-<p>L'interface <strong><code>GlobalEventHandlers</code></strong> décrit les gestionnaires d'évènements usuels de nombreuses interfaces comme {{domxref("HTMLElement")}}, {{domxref("Document")}}, {{domxref("Window")}} ou {{domxref("WorkerGlobalScope")}} pour les Web Workers. Chacune de ces interfaces peut implémenter plus de gestionnaires d'évènements.</p>
+L'interface **`GlobalEventHandlers`** décrit les gestionnaires d'évènements usuels de nombreuses interfaces comme {{domxref("HTMLElement")}}, {{domxref("Document")}}, {{domxref("Window")}} ou {{domxref("WorkerGlobalScope")}} pour les Web Workers. Chacune de ces interfaces peut implémenter plus de gestionnaires d'évènements.
 
-<p><code>GlobalEventHandlers</code> est une interface brute et aucun objet de ce type ne peut être créé.</p>
+`GlobalEventHandlers` est une interface brute et aucun objet de ce type ne peut être créé.
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<p>Les propriétés des évènements, de la forme <code>onXYZ</code>, sont définies sur {{domxref("GlobalEventHandlers")}} et implémentées par {{domxref("HTMLElement")}}, {{domxref("Document")}}, {{domxref("Window")}} et {{domxref("WorkerGlobalScope")}} pour les Web Workers.</p>
+Les propriétés des évènements, de la forme `onXYZ`, sont définies sur {{domxref("GlobalEventHandlers")}} et implémentées par {{domxref("HTMLElement")}}, {{domxref("Document")}}, {{domxref("Window")}} et {{domxref("WorkerGlobalScope")}} pour les Web Workers.
 
-<dl>
- <dt>{{domxref("GlobalEventHandlers.onabort")}}</dt>
- <dd>Est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event ("abort")}} est déclenché.</dd>
- <dt>{{domxref("GlobalEventHandlers.onanimationcancel")}} {{Non-standard_inline}}</dt>
- <dd>un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) appelé lorsqu'un évènement {{event("animationcancel")}} est envoyé, indiquant que l'exécution de l'<a href="/fr/docs/Web/CSS/Animations_CSS">animation CSS</a> a été abandonnée.</dd>
- <dt>{{domxref("GlobalEventHandlers.onanimationend")}} {{Non-standard_inline}}</dt>
- <dd>un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) appelé lorsqu'un évènement {{event("animationend")}} est envoyé, indiquant que l'exécution de l'<a href="/fr/docs/Web/CSS/Animations_CSS">animation CSS</a> a été abandonnée.</dd>
- <dt>{{domxref("GlobalEventHandlers.onanimationiteration")}} {{Non-standard_inline}}</dt>
- <dd>un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) appelé lorsqu'un évènement {{event("animationiteration")}} est envoyé , indiquant qu'une <a href="/fr/docs/Web/CSS/Animations_CSS">animation CSS</a> a commencé à jouer une nouvelle itération de la séquence d'animation.</dd>
- <dt>{{domxref("GlobalEventHandlers.onanimationstart")}} {{Non-standard_inline}}</dt>
- <dd>un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) appelé lorsqu'un évènement {{event("animationstart")}} est envoyé , indiquant qu'une <a href="/fr/docs/Web/CSS/Animations_CSS">animation CSS</a> a commencé.</dd>
- <dt>{{domxref("GlobalEventHandlers.onauxclick")}} {{Non-standard_inline}}</dt>
- <dd>un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) appelé lorsqu'un évènement {{event("auxclick")}} est envoyé , indiquant qu'un bouton non primaire a été enfoncé sur le périphérique d'entrée (par exemple, un bouton du milieu de la souris).</dd>
- <dt>{{domxref("GlobalEventHandlers.onblur")}}</dt>
- <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("blur")}} est déclenché.</dd>
- <dt>{{domxref("GlobalEventHandlers.onerror")}}</dt>
- <dd>est un {{domxref("OnErrorEventHandler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsqu'un événement {{event("error")}} est déclenché.</dd>
- <dt>{{domxref("GlobalEventHandlers.onfocus")}}</dt>
- <dd>est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'évènement {{event("focus")}} est déclenché.</dd>
- <dt>{{domxref("GlobalEventHandlers.oncancel")}}</dt>
- <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsqu'un événement {{event("cancel")}} est déclenché.</dd>
- <dt>{{domxref("GlobalEventHandlers.oncanplay")}}</dt>
- <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsqu'un événement {{event("canplay")}} est déclenché.</dd>
- <dt>{{domxref("GlobalEventHandlers.oncanplaythrough")}}</dt>
- <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsqu'un événement {{event("canplaythrough")}} est déclenché.</dd>
- <dt>{{domxref("GlobalEventHandlers.onchange")}}</dt>
- <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsqu'un événement {{event("change")}} est déclenché.</dd>
- <dt>{{domxref("GlobalEventHandlers.onclick")}}</dt>
- <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsqu'un événement {{event("click")}} est déclenché.</dd>
- <dt>{{domxref("GlobalEventHandlers.onclose")}}</dt>
- <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsqu'un événement {{event("close")}} est déclenché.</dd>
- <dt>{{domxref("GlobalEventHandlers.oncontextmenu")}}</dt>
- <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsqu'un événement {{event("contextmenu")}} est déclenché.</dd>
- <dt>{{domxref("GlobalEventHandlers.oncuechange")}}</dt>
- <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsqu'un événement {{event("cuechange")}} est déclenché.</dd>
- <dt>{{domxref("GlobalEventHandlers.ondblclick")}}</dt>
- <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsqu'un événement {{event("dblclick")}} est déclenché.</dd>
- <dt>{{domxref("GlobalEventHandlers.ondrag")}}</dt>
- <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsqu'un événement {{event("drag")}} est déclenché.</dd>
- <dt>{{domxref("GlobalEventHandlers.ondragend")}}</dt>
- <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsqu'un événement {{event("dragend")}} est déclenché.</dd>
- <dt>{{domxref("GlobalEventHandlers.ondragenter")}}</dt>
- <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsqu'un événement {{event("dragenter")}} est déclenché.</dd>
- <dt>{{domxref("GlobalEventHandlers.ondragexit")}}</dt>
- <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsqu'un événement {{event("dragexit")}} est déclenché.</dd>
- <dt>{{domxref("GlobalEventHandlers.ondragleave")}}</dt>
- <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsqu'un événement {{event("dragleave")}} est déclenché.</dd>
- <dt>{{domxref("GlobalEventHandlers.ondragover")}}</dt>
- <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsqu'un événement {{event("dragover")}} est déclenché.</dd>
- <dt>{{domxref("GlobalEventHandlers.ondragstart")}}</dt>
- <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsqu'un événement {{event("dragstart")}} est déclenché.</dd>
- <dt>{{domxref("GlobalEventHandlers.ondrop")}}</dt>
- <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsqu'un événement {{event("drop")}} est déclenché.</dd>
- <dt>{{domxref("GlobalEventHandlers.ondurationchange")}}</dt>
- <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsqu'un événement {{event("durationchange")}} est déclenché.</dd>
- <dt>{{domxref("GlobalEventHandlers.onemptied")}}</dt>
- <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsqu'un événement {{event("emptied")}} est déclenché.</dd>
- <dt>{{domxref("GlobalEventHandlers.onended")}}</dt>
- <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsqu'un événement {{event("ended")}} est déclenché.</dd>
- <dt>{{domxref("GlobalEventHandlers.ongotpointercapture")}}</dt>
- <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque le type d'événement {{event("gotpointercapture")}} est déclenché.</dd>
- <dt>{{domxref("GlobalEventHandlers.oninput")}}</dt>
- <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("input")}} est déclenché.</dd>
- <dt>{{domxref("GlobalEventHandlers.oninvalid")}}</dt>
- <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("invalid")}} est déclenché.</dd>
- <dt>{{domxref("GlobalEventHandlers.onkeydown")}}</dt>
- <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("keydown")}} est déclenché.</dd>
- <dt>{{domxref("GlobalEventHandlers.onkeypress")}}</dt>
- <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("keypress")}} est déclenché.</dd>
- <dt>{{domxref("GlobalEventHandlers.onkeyup")}}</dt>
- <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("keyup")}} est déclenché.</dd>
- <dt>{{domxref("GlobalEventHandlers.onload")}}</dt>
- <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("load")}} est déclenché.</dd>
- <dt>{{domxref("GlobalEventHandlers.onloadeddata")}}</dt>
- <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("loadeddata")}} est déclenché.</dd>
- <dt>{{domxref("GlobalEventHandlers.onloadedmetadata")}}</dt>
- <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("loadedmetadata")}} est déclenché.</dd>
- <dt>{{domxref("GlobalEventHandlers.onloadend")}}</dt>
- <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("loadend")}} est déclenché (lorsque la progression s'est arrêtée sur le chargement d'une ressource).</dd>
- <dt>{{domxref("GlobalEventHandlers.onloadstart")}}</dt>
- <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("loadstart")}} est déclenché.</dd>
- <dt>{{domxref("GlobalEventHandlers.onlostpointercapture")}}</dt>
- <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque le type d'événement {{event("lostpointercapture")}} est déclenché.</dd>
- <dt>{{domxref("GlobalEventHandlers.onmousedown")}}</dt>
- <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("mousedown")}} est déclenché.</dd>
- <dt>{{domxref("GlobalEventHandlers.onmouseenter")}}</dt>
- <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("mouseenter")}} est déclenché.</dd>
- <dt>{{domxref("GlobalEventHandlers.onmouseleave")}}</dt>
- <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("mouseleave")}} est déclenché.</dd>
- <dt>{{domxref("GlobalEventHandlers.onmousemove")}}</dt>
- <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("mousemove")}} est déclenché.</dd>
- <dt>{{domxref("GlobalEventHandlers.onmouseout")}}</dt>
- <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("mouseout")}} est déclenché.</dd>
- <dt>{{domxref("GlobalEventHandlers.onmouseover")}}</dt>
- <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("mouseover")}} est déclenché.</dd>
- <dt>{{domxref("GlobalEventHandlers.onmouseup")}}</dt>
- <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("mouseup")}} est déclenché.</dd>
- <dt>{{domxref("GlobalEventHandlers.onmousewheel")}} {{Non-standard_inline}} {{Deprecated_inline}}</dt>
- <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("mousewheel")}} est déclenché. Déprécié. Utiliser  <code>onwheel</code> à la place.</dd>
- <dt>{{ domxref("GlobalEventHandlers.onwheel") }}</dt>
- <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("wheel")}} est déclenché.</dd>
- <dt>{{domxref("GlobalEventHandlers.onpause")}}</dt>
- <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("pause")}} est déclenché.</dd>
- <dt>{{domxref("GlobalEventHandlers.onplay")}}</dt>
- <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("play")}} est déclenché.</dd>
- <dt>{{domxref("GlobalEventHandlers.onplaying")}}</dt>
- <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("playing")}} est déclenché.</dd>
- <dt>{{domxref("GlobalEventHandlers.onpointerdown")}}</dt>
- <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("pointerdown")}} est déclenché.</dd>
- <dt>{{domxref("GlobalEventHandlers.onpointermove")}}</dt>
- <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("pointermove")}} est déclenché.</dd>
- <dt>{{domxref("GlobalEventHandlers.onpointerup")}}</dt>
- <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("pointerup")}} est déclenché.</dd>
- <dt>{{domxref("GlobalEventHandlers.onpointercancel")}}</dt>
- <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("pointercancel")}} est déclenché.</dd>
- <dt>{{domxref("GlobalEventHandlers.onpointerover")}}</dt>
- <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("pointerover")}} est déclenché.</dd>
- <dt>{{domxref("GlobalEventHandlers.onpointerout")}}</dt>
- <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("pointerout")}} est déclenché.</dd>
- <dt>{{domxref("GlobalEventHandlers.onpointerenter")}}</dt>
- <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("pointerevent")}} est déclenché.</dd>
- <dt>{{domxref("GlobalEventHandlers.onpointerleave")}}</dt>
- <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("pointerleave")}} est déclenché.</dd>
- <dt>{{domxref("GlobalEventHandlers.onpointerlockchange")}} {{experimental_inline}}</dt>
- <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("pointerlockchange")}} est déclenché.</dd>
- <dt>{{domxref("GlobalEventHandlers.onpointerlockerror")}} {{experimental_inline}}</dt>
- <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("pointerlockerror")}} est déclenché.</dd>
- <dt>{{domxref("GlobalEventHandlers.onprogress")}}</dt>
- <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("progress")}} est déclenché.</dd>
- <dt>{{domxref("GlobalEventHandlers.onratechange")}}</dt>
- <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("ratechange")}} est déclenché.</dd>
- <dt>{{domxref("GlobalEventHandlers.onreset")}}</dt>
- <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("reset")}} est déclenché.</dd>
- <dt>{{domxref("GlobalEventHandlers.onscroll")}}</dt>
- <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("scroll")}} est déclenché.</dd>
- <dt>{{domxref("GlobalEventHandlers.onseeked")}}</dt>
- <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("seeked")}} est déclenché.</dd>
- <dt>{{domxref("GlobalEventHandlers.onseeking")}}</dt>
- <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("seeking")}} est déclenché.</dd>
- <dt>{{domxref("GlobalEventHandlers.onselect")}}</dt>
- <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("select")}} est déclenché.</dd>
- <dt>{{domxref("GlobalEventHandlers.onselectstart")}}</dt>
- <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("selectionchange")}} est déclenché, par exemple, quand l'utilisateur commence une nouvelle sélection de texte sur une page web.</dd>
- <dt>{{domxref("GlobalEventHandlers.onselectionchange")}}</dt>
- <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("selectionchange")}} est déclenché, par exemple, quand le texte sélectionné sur une page web change.</dd>
- <dt>{{domxref("GlobalEventHandlers.onshow")}}</dt>
- <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("show")}} est déclenché.</dd>
- <dt>{{domxref("GlobalEventHandlers.onsort")}} {{experimental_inline}}</dt>
- <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("sort")}} est déclenché.</dd>
- <dt>{{domxref("GlobalEventHandlers.onstalled")}}</dt>
- <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("stalled")}} est déclenché.</dd>
- <dt>{{domxref("GlobalEventHandlers.onsubmit")}}</dt>
- <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("submit")}} est déclenché.</dd>
- <dt>{{domxref("GlobalEventHandlers.onsuspend")}}</dt>
- <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("suspend")}} est déclenché.</dd>
- <dt>{{domxref("GlobalEventHandlers.ontimeupdate")}}</dt>
- <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("timeupdate")}} est déclenché.</dd>
- <dt>{{domxref("GlobalEventHandlers.onvolumechange")}}</dt>
- <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("volumechange")}} est déclenché.</dd>
- <dt>{{domxref("GlobalEventHandlers.ontouchcancel")}} {{Non-standard_inline}} {{Experimental_inline}}</dt>
- <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("touchcancel")}} est déclenché.</dd>
- <dt>{{domxref("GlobalEventHandlers.ontouchend")}} {{Non-standard_inline}} {{Experimental_inline}}</dt>
- <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("touchend")}} est déclenché.</dd>
- <dt>{{domxref("GlobalEventHandlers.ontouchmove")}} {{Non-standard_inline}} {{Experimental_inline}}</dt>
- <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("touchmove")}} est déclenché.</dd>
- <dt>{{domxref("GlobalEventHandlers.ontouchstart")}} {{Non-standard_inline}} {{Experimental_inline}}</dt>
- <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("touchstart")}} est déclenché.</dd>
- <dt>{{domxref("GlobalEventHandlers.ontransitioncancel")}}</dt>
- <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) appelé lorsqu'un évènement {{event("transitioncancel")}} est envoyé, indiquant qu'une <a href="/fr/docs/Web/CSS/CSS_Transitions">transition CSS</a> a été abandonnée.</dd>
- <dt>{{domxref("GlobalEventHandlers.ontransitionend")}}</dt>
- <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) appelé lorsqu'un évènement {{event("transitionend")}} est envoyé, indiquant qu'une <a href="/fr/docs/Web/CSS/CSS_Transitions">transition CSS</a> est terminée.</dd>
- <dt>{{domxref("GlobalEventHandlers.onwaiting")}}</dt>
- <dd>est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'événement {{event("waiting")}} est déclenché.</dd>
-</dl>
+- {{domxref("GlobalEventHandlers.onabort")}}
+  - : Est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsque l'événement {{event ("abort")}} est déclenché.
+- {{domxref("GlobalEventHandlers.onanimationcancel")}} {{Non-standard_inline}}
+  - : un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) appelé lorsqu'un évènement {{event("animationcancel")}} est envoyé, indiquant que l'exécution de l'[animation CSS](/fr/docs/Web/CSS/Animations_CSS) a été abandonnée.
+- {{domxref("GlobalEventHandlers.onanimationend")}} {{Non-standard_inline}}
+  - : un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) appelé lorsqu'un évènement {{event("animationend")}} est envoyé, indiquant que l'exécution de l'[animation CSS](/fr/docs/Web/CSS/Animations_CSS) a été abandonnée.
+- {{domxref("GlobalEventHandlers.onanimationiteration")}} {{Non-standard_inline}}
+  - : un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) appelé lorsqu'un évènement {{event("animationiteration")}} est envoyé , indiquant qu'une [animation CSS](/fr/docs/Web/CSS/Animations_CSS) a commencé à jouer une nouvelle itération de la séquence d'animation.
+- {{domxref("GlobalEventHandlers.onanimationstart")}} {{Non-standard_inline}}
+  - : un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) appelé lorsqu'un évènement {{event("animationstart")}} est envoyé , indiquant qu'une [animation CSS](/fr/docs/Web/CSS/Animations_CSS) a commencé.
+- {{domxref("GlobalEventHandlers.onauxclick")}} {{Non-standard_inline}}
+  - : un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) appelé lorsqu'un évènement {{event("auxclick")}} est envoyé , indiquant qu'un bouton non primaire a été enfoncé sur le périphérique d'entrée (par exemple, un bouton du milieu de la souris).
+- {{domxref("GlobalEventHandlers.onblur")}}
+  - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsque l'événement {{event("blur")}} est déclenché.
+- {{domxref("GlobalEventHandlers.onerror")}}
+  - : est un {{domxref("OnErrorEventHandler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsqu'un événement {{event("error")}} est déclenché.
+- {{domxref("GlobalEventHandlers.onfocus")}}
+  - : est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'évènement {{event("focus")}} est déclenché.
+- {{domxref("GlobalEventHandlers.oncancel")}}
+  - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsqu'un événement {{event("cancel")}} est déclenché.
+- {{domxref("GlobalEventHandlers.oncanplay")}}
+  - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsqu'un événement {{event("canplay")}} est déclenché.
+- {{domxref("GlobalEventHandlers.oncanplaythrough")}}
+  - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsqu'un événement {{event("canplaythrough")}} est déclenché.
+- {{domxref("GlobalEventHandlers.onchange")}}
+  - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsqu'un événement {{event("change")}} est déclenché.
+- {{domxref("GlobalEventHandlers.onclick")}}
+  - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsqu'un événement {{event("click")}} est déclenché.
+- {{domxref("GlobalEventHandlers.onclose")}}
+  - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsqu'un événement {{event("close")}} est déclenché.
+- {{domxref("GlobalEventHandlers.oncontextmenu")}}
+  - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsqu'un événement {{event("contextmenu")}} est déclenché.
+- {{domxref("GlobalEventHandlers.oncuechange")}}
+  - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsqu'un événement {{event("cuechange")}} est déclenché.
+- {{domxref("GlobalEventHandlers.ondblclick")}}
+  - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsqu'un événement {{event("dblclick")}} est déclenché.
+- {{domxref("GlobalEventHandlers.ondrag")}}
+  - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsqu'un événement {{event("drag")}} est déclenché.
+- {{domxref("GlobalEventHandlers.ondragend")}}
+  - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsqu'un événement {{event("dragend")}} est déclenché.
+- {{domxref("GlobalEventHandlers.ondragenter")}}
+  - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsqu'un événement {{event("dragenter")}} est déclenché.
+- {{domxref("GlobalEventHandlers.ondragexit")}}
+  - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsqu'un événement {{event("dragexit")}} est déclenché.
+- {{domxref("GlobalEventHandlers.ondragleave")}}
+  - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsqu'un événement {{event("dragleave")}} est déclenché.
+- {{domxref("GlobalEventHandlers.ondragover")}}
+  - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsqu'un événement {{event("dragover")}} est déclenché.
+- {{domxref("GlobalEventHandlers.ondragstart")}}
+  - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsqu'un événement {{event("dragstart")}} est déclenché.
+- {{domxref("GlobalEventHandlers.ondrop")}}
+  - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsqu'un événement {{event("drop")}} est déclenché.
+- {{domxref("GlobalEventHandlers.ondurationchange")}}
+  - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsqu'un événement {{event("durationchange")}} est déclenché.
+- {{domxref("GlobalEventHandlers.onemptied")}}
+  - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsqu'un événement {{event("emptied")}} est déclenché.
+- {{domxref("GlobalEventHandlers.onended")}}
+  - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsqu'un événement {{event("ended")}} est déclenché.
+- {{domxref("GlobalEventHandlers.ongotpointercapture")}}
+  - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsque le type d'événement {{event("gotpointercapture")}} est déclenché.
+- {{domxref("GlobalEventHandlers.oninput")}}
+  - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsque l'événement {{event("input")}} est déclenché.
+- {{domxref("GlobalEventHandlers.oninvalid")}}
+  - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsque l'événement {{event("invalid")}} est déclenché.
+- {{domxref("GlobalEventHandlers.onkeydown")}}
+  - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsque l'événement {{event("keydown")}} est déclenché.
+- {{domxref("GlobalEventHandlers.onkeypress")}}
+  - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsque l'événement {{event("keypress")}} est déclenché.
+- {{domxref("GlobalEventHandlers.onkeyup")}}
+  - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsque l'événement {{event("keyup")}} est déclenché.
+- {{domxref("GlobalEventHandlers.onload")}}
+  - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsque l'événement {{event("load")}} est déclenché.
+- {{domxref("GlobalEventHandlers.onloadeddata")}}
+  - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsque l'événement {{event("loadeddata")}} est déclenché.
+- {{domxref("GlobalEventHandlers.onloadedmetadata")}}
+  - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsque l'événement {{event("loadedmetadata")}} est déclenché.
+- {{domxref("GlobalEventHandlers.onloadend")}}
+  - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsque l'événement {{event("loadend")}} est déclenché (lorsque la progression s'est arrêtée sur le chargement d'une ressource).
+- {{domxref("GlobalEventHandlers.onloadstart")}}
+  - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsque l'événement {{event("loadstart")}} est déclenché.
+- {{domxref("GlobalEventHandlers.onlostpointercapture")}}
+  - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsque le type d'événement {{event("lostpointercapture")}} est déclenché.
+- {{domxref("GlobalEventHandlers.onmousedown")}}
+  - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsque l'événement {{event("mousedown")}} est déclenché.
+- {{domxref("GlobalEventHandlers.onmouseenter")}}
+  - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsque l'événement {{event("mouseenter")}} est déclenché.
+- {{domxref("GlobalEventHandlers.onmouseleave")}}
+  - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsque l'événement {{event("mouseleave")}} est déclenché.
+- {{domxref("GlobalEventHandlers.onmousemove")}}
+  - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsque l'événement {{event("mousemove")}} est déclenché.
+- {{domxref("GlobalEventHandlers.onmouseout")}}
+  - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsque l'événement {{event("mouseout")}} est déclenché.
+- {{domxref("GlobalEventHandlers.onmouseover")}}
+  - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsque l'événement {{event("mouseover")}} est déclenché.
+- {{domxref("GlobalEventHandlers.onmouseup")}}
+  - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsque l'événement {{event("mouseup")}} est déclenché.
+- {{domxref("GlobalEventHandlers.onmousewheel")}} {{Non-standard_inline}} {{Deprecated_inline}}
+  - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsque l'événement {{event("mousewheel")}} est déclenché. Déprécié. Utiliser  `onwheel` à la place.
+- {{ domxref("GlobalEventHandlers.onwheel") }}
+  - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsque l'événement {{event("wheel")}} est déclenché.
+- {{domxref("GlobalEventHandlers.onpause")}}
+  - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsque l'événement {{event("pause")}} est déclenché.
+- {{domxref("GlobalEventHandlers.onplay")}}
+  - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsque l'événement {{event("play")}} est déclenché.
+- {{domxref("GlobalEventHandlers.onplaying")}}
+  - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsque l'événement {{event("playing")}} est déclenché.
+- {{domxref("GlobalEventHandlers.onpointerdown")}}
+  - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsque l'événement {{event("pointerdown")}} est déclenché.
+- {{domxref("GlobalEventHandlers.onpointermove")}}
+  - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsque l'événement {{event("pointermove")}} est déclenché.
+- {{domxref("GlobalEventHandlers.onpointerup")}}
+  - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsque l'événement {{event("pointerup")}} est déclenché.
+- {{domxref("GlobalEventHandlers.onpointercancel")}}
+  - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsque l'événement {{event("pointercancel")}} est déclenché.
+- {{domxref("GlobalEventHandlers.onpointerover")}}
+  - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsque l'événement {{event("pointerover")}} est déclenché.
+- {{domxref("GlobalEventHandlers.onpointerout")}}
+  - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsque l'événement {{event("pointerout")}} est déclenché.
+- {{domxref("GlobalEventHandlers.onpointerenter")}}
+  - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsque l'événement {{event("pointerevent")}} est déclenché.
+- {{domxref("GlobalEventHandlers.onpointerleave")}}
+  - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsque l'événement {{event("pointerleave")}} est déclenché.
+- {{domxref("GlobalEventHandlers.onpointerlockchange")}} {{experimental_inline}}
+  - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsque l'événement {{event("pointerlockchange")}} est déclenché.
+- {{domxref("GlobalEventHandlers.onpointerlockerror")}} {{experimental_inline}}
+  - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsque l'événement {{event("pointerlockerror")}} est déclenché.
+- {{domxref("GlobalEventHandlers.onprogress")}}
+  - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsque l'événement {{event("progress")}} est déclenché.
+- {{domxref("GlobalEventHandlers.onratechange")}}
+  - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsque l'événement {{event("ratechange")}} est déclenché.
+- {{domxref("GlobalEventHandlers.onreset")}}
+  - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsque l'événement {{event("reset")}} est déclenché.
+- {{domxref("GlobalEventHandlers.onscroll")}}
+  - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsque l'événement {{event("scroll")}} est déclenché.
+- {{domxref("GlobalEventHandlers.onseeked")}}
+  - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsque l'événement {{event("seeked")}} est déclenché.
+- {{domxref("GlobalEventHandlers.onseeking")}}
+  - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsque l'événement {{event("seeking")}} est déclenché.
+- {{domxref("GlobalEventHandlers.onselect")}}
+  - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsque l'événement {{event("select")}} est déclenché.
+- {{domxref("GlobalEventHandlers.onselectstart")}}
+  - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsque l'événement {{event("selectionchange")}} est déclenché, par exemple, quand l'utilisateur commence une nouvelle sélection de texte sur une page web.
+- {{domxref("GlobalEventHandlers.onselectionchange")}}
+  - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsque l'événement {{event("selectionchange")}} est déclenché, par exemple, quand le texte sélectionné sur une page web change.
+- {{domxref("GlobalEventHandlers.onshow")}}
+  - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsque l'événement {{event("show")}} est déclenché.
+- {{domxref("GlobalEventHandlers.onsort")}} {{experimental_inline}}
+  - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsque l'événement {{event("sort")}} est déclenché.
+- {{domxref("GlobalEventHandlers.onstalled")}}
+  - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsque l'événement {{event("stalled")}} est déclenché.
+- {{domxref("GlobalEventHandlers.onsubmit")}}
+  - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsque l'événement {{event("submit")}} est déclenché.
+- {{domxref("GlobalEventHandlers.onsuspend")}}
+  - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsque l'événement {{event("suspend")}} est déclenché.
+- {{domxref("GlobalEventHandlers.ontimeupdate")}}
+  - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsque l'événement {{event("timeupdate")}} est déclenché.
+- {{domxref("GlobalEventHandlers.onvolumechange")}}
+  - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsque l'événement {{event("volumechange")}} est déclenché.
+- {{domxref("GlobalEventHandlers.ontouchcancel")}} {{Non-standard_inline}} {{Experimental_inline}}
+  - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsque l'événement {{event("touchcancel")}} est déclenché.
+- {{domxref("GlobalEventHandlers.ontouchend")}} {{Non-standard_inline}} {{Experimental_inline}}
+  - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsque l'événement {{event("touchend")}} est déclenché.
+- {{domxref("GlobalEventHandlers.ontouchmove")}} {{Non-standard_inline}} {{Experimental_inline}}
+  - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsque l'événement {{event("touchmove")}} est déclenché.
+- {{domxref("GlobalEventHandlers.ontouchstart")}} {{Non-standard_inline}} {{Experimental_inline}}
+  - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsque l'événement {{event("touchstart")}} est déclenché.
+- {{domxref("GlobalEventHandlers.ontransitioncancel")}}
+  - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) appelé lorsqu'un évènement {{event("transitioncancel")}} est envoyé, indiquant qu'une [transition CSS](/fr/docs/Web/CSS/CSS_Transitions) a été abandonnée.
+- {{domxref("GlobalEventHandlers.ontransitionend")}}
+  - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) appelé lorsqu'un évènement {{event("transitionend")}} est envoyé, indiquant qu'une [transition CSS](/fr/docs/Web/CSS/CSS_Transitions) est terminée.
+- {{domxref("GlobalEventHandlers.onwaiting")}}
+  - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsque l'événement {{event("waiting")}} est déclenché.
 
-<h2 id="Méthodes">Méthodes</h2>
+## Méthodes
 
-<p><em>Cette interface ne définit aucune méthode.</em></p>
+_Cette interface ne définit aucune méthode._
 
-<h2 id="Spécifications">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("Selection API",'', 'Extension to GlobalEventHandlers')}}</td>
-   <td>{{Spec2('Selection API')}}</td>
-   <td>Ajoute <code>onselectionchange.</code></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('Pointer Lock', '#extensions-to-the-document-interface', 'Extension of Document')}}</td>
-   <td>{{Spec2('Pointer Lock')}}</td>
-   <td>Ajoute<code>onpointerlockchange</code> et <code>onpointerlockerror</code> sur{{domxref("Document")}}. Est implémenté expérimentalement <code>GlobalEventHandlers</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', '#globaleventhandlers', 'GlobalEventHandlers')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Pas de changement depuis le précédent {{SpecName("HTML5.1")}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5.1', '#globaleventhandlers', 'GlobalEventHandlers')}}</td>
-   <td>{{Spec2('HTML5.1')}}</td>
-   <td>Instantané de {{SpecName("HTML WHATWG")}}. <code>onsort</code> ajouté depuis {{SpecName("HTML5 W3C")}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML5 W3C", "#globaleventhandlers", "GlobalEventHandlers")}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Instantané de {{SpecName("HTML WHATWG")}}. Création de <code>GlobalEventHandlers</code>.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                | Statut                               | Commentaire                                                                                                                                      |
+| ---------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| {{SpecName("Selection API",'', 'Extension to GlobalEventHandlers')}}                                 | {{Spec2('Selection API')}} | Ajoute `onselectionchange.`                                                                                                                      |
+| {{SpecName('Pointer Lock', '#extensions-to-the-document-interface', 'Extension of Document')}} | {{Spec2('Pointer Lock')}}     | Ajoute`onpointerlockchange` et `onpointerlockerror` sur{{domxref("Document")}}. Est implémenté expérimentalement `GlobalEventHandlers`. |
+| {{SpecName('HTML WHATWG', '#globaleventhandlers', 'GlobalEventHandlers')}}                         | {{Spec2('HTML WHATWG')}}     | Pas de changement depuis le précédent {{SpecName("HTML5.1")}}.                                                                          |
+| {{SpecName('HTML5.1', '#globaleventhandlers', 'GlobalEventHandlers')}}                                 | {{Spec2('HTML5.1')}}         | Instantané de {{SpecName("HTML WHATWG")}}. `onsort` ajouté depuis {{SpecName("HTML5 W3C")}}.                                     |
+| {{SpecName("HTML5 W3C", "#globaleventhandlers", "GlobalEventHandlers")}}                             | {{Spec2('HTML5 W3C')}}         | Instantané de {{SpecName("HTML WHATWG")}}. Création de `GlobalEventHandlers`.                                                           |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.GlobalEventHandlers")}}</p>
+{{Compat("api.GlobalEventHandlers")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("Element")}}</li>
- <li>{{event("Event_handlers", "event handler")}}</li>
- <li>{{domxref("Event")}}</li>
-</ul>
+- {{domxref("Element")}}
+- {{event("Event_handlers", "event handler")}}
+- {{domxref("Event")}}
diff --git a/files/fr/web/api/globaleventhandlers/onabort/index.md b/files/fr/web/api/globaleventhandlers/onabort/index.md
index 746e9fa76e..85348853fa 100644
--- a/files/fr/web/api/globaleventhandlers/onabort/index.md
+++ b/files/fr/web/api/globaleventhandlers/onabort/index.md
@@ -9,46 +9,34 @@ tags:
   - Window
 translation_of: Web/API/GlobalEventHandlers/onabort
 ---
-<div>{{ ApiRef("HTML DOM") }}</div>
+{{ ApiRef("HTML DOM") }}
 
-<p>Un gestionnaire d'évènement pour interrompre les événements envoyés à la fenêtre. (non disponible sur Firefox 2 ou Safari).</p>
+Un gestionnaire d'évènement pour interrompre les événements envoyés à la fenêtre. (non disponible sur Firefox 2 ou Safari).
 
-<p>Bien que le <a href="https://html.spec.whatwg.org/multipage/browsing-the-web.html#abort-a-document">standard pour l'abandon d'un chargement de document</a> soit défini, le problème HTML N° 3525 suggère que les navigateurs ne déclenchent pas pour l'instant l'événement "abort" sur une <code>window</code> qui déclencherait un appel à <code>onabort</code>.</p>
+Bien que le [standard pour l'abandon d'un chargement de document](https://html.spec.whatwg.org/multipage/browsing-the-web.html#abort-a-document) soit défini, le problème HTML N° 3525 suggère que les navigateurs ne déclenchent pas pour l'instant l'événement "abort" sur une `window` qui déclencherait un appel à `onabort`.
 
-<p>À FAIRE : définir ce qu'est "interrompre" : fermer la fenêtre via le gestionnaire de fenêtre ? Arrêter le chargement de la page ? Par quels moyens et pour quelles raisons (utilisateur, réseau/serveur) ? À quelle étape cela devrait-il se déclencher / être capturé ? Pour IE, onabort est seulement disponible pour les balises <code>img</code>.</p>
+À FAIRE : définir ce qu'est "interrompre" : fermer la fenêtre via le gestionnaire de fenêtre ? Arrêter le chargement de la page ? Par quels moyens et pour quelles raisons (utilisateur, réseau/serveur) ? À quelle étape cela devrait-il se déclencher / être capturé ? Pour IE, onabort est seulement disponible pour les balises `img`.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">window.onabort =<em> refFonc</em>
-</pre>
+    window.onabort = refFonc
 
-<ul>
- <li><code>refFonc</code> : référence à une fonction</li>
-</ul>
+- `refFonc` : référence à une fonction
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush:js">window.onabort = function() {
+```js
+window.onabort = function() {
   alert("Chargement interrompu.");
-}</pre>
-
-<h2 id="Specification">Spécification</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onabort','onabort')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.GlobalEventHandlers.onabort")}}</p>
+}
+```
+
+## Spécification
+
+| Spécification                                                                                    | Statut                           | Commentaire |
+| ------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- |
+| {{SpecName('HTML WHATWG','webappapis.html#handler-onabort','onabort')}} | {{Spec2('HTML WHATWG')}} |             |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.GlobalEventHandlers.onabort")}}
diff --git a/files/fr/web/api/globaleventhandlers/onauxclick/index.md b/files/fr/web/api/globaleventhandlers/onauxclick/index.md
index edf6be44f6..b9024e55b8 100644
--- a/files/fr/web/api/globaleventhandlers/onauxclick/index.md
+++ b/files/fr/web/api/globaleventhandlers/onauxclick/index.md
@@ -8,32 +8,30 @@ tags:
   - Reference
 translation_of: Web/API/GlobalEventHandlers/onauxclick
 ---
-<div>{{ApiRef("HTML DOM")}} {{SeeCompatTable}}</div>
+{{ApiRef("HTML DOM")}} {{SeeCompatTable}}
 
-<p>La propriété <code><strong>onauxclick</strong></code> du mixin {{domxref("GlobalEventHandlers")}} est un {{event("Event_handlers", "event handler")}} pour le traitement des événements {{event("auxclick")}}.</p>
+La propriété **`onauxclick`** du mixin {{domxref("GlobalEventHandlers")}} est un {{event("Event_handlers", "event handler")}} pour le traitement des événements {{event("auxclick")}}.
 
-<p>L'événement <code>auxclick</code> est déclenché lorsqu'un bouton non principal a été enfoncé sur un périphérique d'entrée (par exemple, la molette de la souris). Il se déclenche après les événements {{event("mousedown")}} et {{event("mouseup")}}, dans cet ordre.</p>
+L'événement `auxclick` est déclenché lorsqu'un bouton non principal a été enfoncé sur un périphérique d'entrée (par exemple, la molette de la souris). Il se déclenche après les événements {{event("mousedown")}} et {{event("mouseup")}}, dans cet ordre.
 
-<div class="note">
-<p><strong>Note :</strong> Les fournisseurs de navigateurs implémentent cette propriété dans le cadre d'un plan visant à améliorer la compatibilité en ce qui concerne le comportement des boutons. Plus précisément, le comportement des événements est mis à jour afin que {{Event ("click")}} ne se déclenche que pour les clics sur le bouton principal (par exemple, le bouton gauche de la souris), tandis que {{Event ("auxclick")}} se déclenche pour le bouton non principal. Historiquement, {{Event("click")}} s'est généralement déclenché pour le clic de n'importe quel bouton d'entrée de périphérique, bien que le comportement du navigateur soit quelque peu incohérent.</p>
-</div>
+> **Note :** Les fournisseurs de navigateurs implémentent cette propriété dans le cadre d'un plan visant à améliorer la compatibilité en ce qui concerne le comportement des boutons. Plus précisément, le comportement des événements est mis à jour afin que {{Event ("click")}} ne se déclenche que pour les clics sur le bouton principal (par exemple, le bouton gauche de la souris), tandis que {{Event ("auxclick")}} se déclenche pour le bouton non principal. Historiquement, {{Event("click")}} s'est généralement déclenché pour le clic de n'importe quel bouton d'entrée de périphérique, bien que le comportement du navigateur soit quelque peu incohérent.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var>target</var>.onauxclick = <var>functionRe<em>f</em></var>;
-</pre>
+    target.onauxclick = functionRef;
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p><code>functionRef</code> est un nom de fonction ou une <a href="/en-US/docs/Web/JavaScript/Reference/Operators/function">function expression</a>. La fonction reçoit un objet {{domxref("MouseEvent")}} comme seul argument. Dans la fonction, <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a></code> sera l'élément sur lequel l'événement a été déclenché.</p>
+`functionRef` est un nom de fonction ou une [function expression](/en-US/docs/Web/JavaScript/Reference/Operators/function). La fonction reçoit un objet {{domxref("MouseEvent")}} comme seul argument. Dans la fonction, [`this`](/en-US/docs/Web/JavaScript/Reference/Operators/this) sera l'élément sur lequel l'événement a été déclenché.
 
-<p>Un seul gestionnaire <code>onauxclick</code> peut être affecté à un objet à la fois. Vous pouvez préférer utiliser la méthode {{domxref("EventTarget.addEventListener()")}} à la place, car elle est plus flexible.</p>
+Un seul gestionnaire `onauxclick` peut être affecté à un objet à la fois. Vous pouvez préférer utiliser la méthode {{domxref("EventTarget.addEventListener()")}} à la place, car elle est plus flexible.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Dans cet exemple, nous définissons des fonctions pour deux gestionnaires d'événements — {{domxref("GlobalEventHandlers.onclick", "onclick")}} et <code>onauxclick</code>. Le premier modifie la couleur de l'arrière-plan du bouton, tandis que le second modifie la couleur de premier plan (texte) du bouton. Vous pouvez voir les deux fonctions en action en essayant la démo avec une souris à plusieurs boutons (<a href="https://mdn.github.io/dom-examples/auxclick/">voir en direct sur GitHub</a>; également <a href="https://github.com/mdn/dom-examples/blob/master/auxclick/index.html">voir le code source</a>).</p>
+Dans cet exemple, nous définissons des fonctions pour deux gestionnaires d'événements — {{domxref("GlobalEventHandlers.onclick", "onclick")}} et `onauxclick`. Le premier modifie la couleur de l'arrière-plan du bouton, tandis que le second modifie la couleur de premier plan (texte) du bouton. Vous pouvez voir les deux fonctions en action en essayant la démo avec une souris à plusieurs boutons ([voir en direct sur GitHub](https://mdn.github.io/dom-examples/auxclick/); également [voir le code source](https://github.com/mdn/dom-examples/blob/master/auxclick/index.html)).
 
-<pre class="brush: js">var button = document.querySelector('button');
+```js
+var button = document.querySelector('button');
 var html = document.querySelector('html');
 
 function random(number) {
@@ -48,41 +46,25 @@ button.onclick = function() {
 button.onauxclick = function() {
   var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
   button.style.color = rndCol;
-}</pre>
-
-<div class="note">
-<p><strong>Note :</strong> Si vous utilisez une souris à trois boutons, vous remarquerez que le gestionnaire<code> onauxclick</code> est exécuté lorsque l'un des boutons non gauche de la souris est cliqué.</p>
-</div>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('UI Events','#event-type-auxclick','onauxclick')}}</td>
-   <td>{{Spec2('UI Events')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.GlobalEventHandlers.onauxclick")}}</p>
-
-<h2 id="Voir_également">Voir également</h2>
-
-<ul>
- <li>{{event("auxclick")}} event</li>
- <li>Related event handlers
-  <ul>
-   <li>{{domxref("GlobalEventHandlers.onclick")}}</li>
-   <li>{{domxref("GlobalEventHandlers.ondblclick")}}</li>
-  </ul>
- </li>
-</ul>
+}
+```
+
+> **Note :** Si vous utilisez une souris à trois boutons, vous remarquerez que le gestionnaire` onauxclick` est exécuté lorsque l'un des boutons non gauche de la souris est cliqué.
+
+## Spécifications
+
+| Spécification                                                                    | Statut                       | Commentaire |
+| -------------------------------------------------------------------------------- | ---------------------------- | ----------- |
+| {{SpecName('UI Events','#event-type-auxclick','onauxclick')}} | {{Spec2('UI Events')}} |             |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.GlobalEventHandlers.onauxclick")}}
+
+## Voir également
+
+- {{event("auxclick")}} event
+- Related event handlers
+
+  - {{domxref("GlobalEventHandlers.onclick")}}
+  - {{domxref("GlobalEventHandlers.ondblclick")}}
diff --git a/files/fr/web/api/globaleventhandlers/onblur/index.md b/files/fr/web/api/globaleventhandlers/onblur/index.md
index ea3ed43e43..1ae6bb272a 100644
--- a/files/fr/web/api/globaleventhandlers/onblur/index.md
+++ b/files/fr/web/api/globaleventhandlers/onblur/index.md
@@ -6,35 +6,34 @@ tags:
   - DOM_0
 translation_of: Web/API/GlobalEventHandlers/onblur
 ---
-<p>{{ ApiRef() }}</p>
+{{ ApiRef() }}
 
-<h3 id="R.C3.A9sum.C3.A9">Résumé</h3>
+### Résumé
 
-<p>La propriété <strong>onblur</strong> renvoie le gestionnaire de l'évènement <code>blur</code> (perte de focus) pour l'élément courant.</p>
+La propriété **onblur** renvoie le gestionnaire de l'évènement `blur` (perte de focus) pour l'élément courant.
 
-<h3 id="Syntaxe">Syntaxe</h3>
+### Syntaxe
 
-<pre class="eval">element.onblur = nomFonctionUtilisateur;
-</pre>
+    element.onblur = nomFonctionUtilisateur;
 
-<ul>
- <li><code>nomFonctionUtilisateur</code> est le nom de la fonction utilisateur préalablement définie, sans les parenthèses ni aucun argument. Il est également possible de déclarer une « fonction anonyme », comme :</li>
-</ul>
+- `nomFonctionUtilisateur` est le nom de la fonction utilisateur préalablement définie, sans les parenthèses ni aucun argument. Il est également possible de déclarer une « fonction anonyme », comme :
 
-<pre class="eval">element.onblur = function() {
-    alert("Évènement onblur détecté");
-};
-</pre>
+<!---->
 
-<h3 id="Exemple">Exemple</h3>
+    element.onblur = function() {
+        alert("Évènement onblur détecté");
+    };
 
-<p>Lorsqu'une zone de saisie n'est plus active suite à une perte du « focus », une boîte de message (alert) est affichée.</p>
+### Exemple
 
-<pre class="brush: html">&lt;form&gt;
-	&lt;input type="text" id="foo" value="Allo!" /&gt;
-&lt;/form&gt;
+Lorsqu'une zone de saisie n'est plus active suite à une perte du « focus », une boîte de message (alert) est affichée.
 
-&lt;script type="text/javascript"&gt;
+```html
+<form>
+	<input type="text" id="foo" value="Allo!" />
+</form>
+
+<script type="text/javascript">
 
 var elem = document.getElementById("foo");
 
@@ -46,15 +45,15 @@ elem.onblur = afficherMessage;
 function afficherMessage() {
 	alert("Évènement onblur detecté!");
 }
-&lt;/script&gt;
-</pre>
+</script>
+```
 
-<h3 id="Notes">Notes</h3>
+### Notes
 
-<p>L'évènement <code>blur</code> se déclenche lors de la perte de focus d'un élément.</p>
+L'évènement `blur` se déclenche lors de la perte de focus d'un élément.
 
-<p>Microsoft Internet Explorer déclenche l'évènement <code>blur</code> sur presque tous les éléments, contrairement aux navigateurs Gecko (dont Firefox) qui ne le déclencheront que sur un nombre limité d'éléments.</p>
+Microsoft Internet Explorer déclenche l'évènement `blur` sur presque tous les éléments, contrairement aux navigateurs Gecko (dont Firefox) qui ne le déclencheront que sur un nombre limité d'éléments.
 
-<h3 id="Sp.C3.A9cification">Spécification</h3>
+### Spécification
 
-<p>{{ DOM0() }}</p>
\ No newline at end of file
+{{ DOM0() }}
diff --git a/files/fr/web/api/globaleventhandlers/onchange/index.md b/files/fr/web/api/globaleventhandlers/onchange/index.md
index 577350c6a0..bb1eff3e49 100644
--- a/files/fr/web/api/globaleventhandlers/onchange/index.md
+++ b/files/fr/web/api/globaleventhandlers/onchange/index.md
@@ -7,29 +7,37 @@ tags:
   - Référence_du_DOM_Gecko
 translation_of: Web/API/GlobalEventHandlers/onchange
 ---
-<p>{{ ApiRef() }}</p>
-<h3 id="R.C3.A9sum.C3.A9">Résumé</h3>
-<p>La propriété <code>onchange</code> définit et renvoie le gestionnaire d'évènement <code>onChange</code> (modification) pour l'élément courant.</p>
-<h3 id="Syntaxe">Syntaxe</h3>
-<pre class="eval">element.onchange = code de gestion de l'évènement
-</pre>
-<h3 id="Notes">Notes</h3>
-<p>Le pseudo code suivant illustre la manière dont le gestionnaire d'évènement <code>change</code> est implémenté dans Mozilla :</p>
-<pre>  control.onfocus = focus;
-  control.onblur = blur;
-  function focus () {
-      original_value = control.value;
-  }
-
-  function blur () {
-      if (control.value != original_value)
-        control.onchange();
-  }
-</pre>
-<p>Par conséquent, vous pouvez rencontrer des comportements inattendus dans l'évènement <code>change</code> si vous modifiez la valeur du contrôle dans vos propres gestionnaires d'évènements <code>focus</code> ou <code>blur</code>. De plus, l'évènement <code>change</code> se déclenche avant l'évènement <code>blur</code>. Ce comportement n'est pas le même que celui d'Internet Explorer.</p>
-<h3 id="Specification">Specification</h3>
-<p>{{ DOM0() }}</p>
-<h3 id="Voir_aussi">Voir aussi</h3>
-<ul>
- <li><a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-htmlevents">DOM Level 2: HTML event types</a> <small>— traduction en français (non normative) : <a href="http://www.yoyodesign.org/doc/w3c/dom2-events/events.html#Events-eventgroupings-htmlevents">DOM Niveau 2 Events : Les types d'événements HTML</a></small></li>
-</ul>
\ No newline at end of file
+{{ ApiRef() }}
+
+### Résumé
+
+La propriété `onchange` définit et renvoie le gestionnaire d'évènement `onChange` (modification) pour l'élément courant.
+
+### Syntaxe
+
+    element.onchange = code de gestion de l'évènement
+
+### Notes
+
+Le pseudo code suivant illustre la manière dont le gestionnaire d'évènement `change` est implémenté dans Mozilla :
+
+      control.onfocus = focus;
+      control.onblur = blur;
+      function focus () {
+          original_value = control.value;
+      }
+
+      function blur () {
+          if (control.value != original_value)
+            control.onchange();
+      }
+
+Par conséquent, vous pouvez rencontrer des comportements inattendus dans l'évènement `change` si vous modifiez la valeur du contrôle dans vos propres gestionnaires d'évènements `focus` ou `blur`. De plus, l'évènement `change` se déclenche avant l'évènement `blur`. Ce comportement n'est pas le même que celui d'Internet Explorer.
+
+### Specification
+
+{{ DOM0() }}
+
+### Voir aussi
+
+- [DOM Level 2: HTML event types](http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-htmlevents) — traduction en français (non normative) : [DOM Niveau 2 Events : Les types d'événements HTML](http://www.yoyodesign.org/doc/w3c/dom2-events/events.html#Events-eventgroupings-htmlevents)
diff --git a/files/fr/web/api/globaleventhandlers/onclick/index.md b/files/fr/web/api/globaleventhandlers/onclick/index.md
index 73354e541b..3c09f4fd85 100644
--- a/files/fr/web/api/globaleventhandlers/onclick/index.md
+++ b/files/fr/web/api/globaleventhandlers/onclick/index.md
@@ -3,32 +3,33 @@ title: element.onclick
 slug: Web/API/GlobalEventHandlers/onclick
 translation_of: Web/API/GlobalEventHandlers/onclick
 ---
-<p>{{ ApiRef() }}</p>
+{{ ApiRef() }}
 
-<h3 id="R.C3.A9sum.C3.A9">Résumé</h3>
+### Résumé
 
-<p>La propriété <strong>onclick</strong> représente le gestionnaire d'évènement onClick de l'élément courant.</p>
+La propriété **onclick** représente le gestionnaire d'évènement onClick de l'élément courant.
 
-<h3 id="Syntaxe">Syntaxe</h3>
+### Syntaxe
 
-<p><code><em>element</em>.onclick = <em>functionRef</em></code></p>
+`element.onclick = functionRef`
 
-<p>où <em>functionRef</em> est une fonction ou une expression de type <em>function. </em>Consulter la <a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope">référence des fonctions</a> pour plus de détails.</p>
+où _functionRef_ est une fonction ou une expression de type _function._ Consulter la [référence des fonctions](/en-US/docs/JavaScript/Reference/Functions_and_function_scope) pour plus de détails.
 
-<p>Le paramètre fourni au gestionnaire d'évènement <em>functionRef</em> lors du déclenchement de l'évènement est un objet qui représente l'évènement de click, de type {{ domxref("MouseEvent") }}.</p>
+Le paramètre fourni au gestionnaire d'évènement _functionRef_ lors du déclenchement de l'évènement est un objet qui représente l'évènement de click, de type {{ domxref("MouseEvent") }}.
 
-<h3 id="Exemple">Exemple</h3>
+### Exemple
 
-<pre class="brush: html">&lt;!doctype html&gt;
-&lt;html&gt;
-&lt;head&gt;
-&lt;title&gt;onclick event example&lt;/title&gt;
-&lt;script type="text/javascript"&gt;
+```html
+<!doctype html>
+<html>
+<head>
+<title>onclick event example</title>
+<script type="text/javascript">
 function initElement()
 {
   var p = document.getElementById("foo");
   // NOTE: showAlert(); ou showAlert(param); NE fonctionne PAS ici.
-  // Il faut fournir une valeur de type <em><strong>function</strong></em> (nom de fonction déclaré ailleurs ou declaration en ligne de fonction).
+  // Il faut fournir une valeur de type function (nom de fonction déclaré ailleurs ou declaration en ligne de fonction).
   p.onclick = showAlert;
 };
 
@@ -36,31 +37,33 @@ function showAlert()
 {
   alert("Evènement de click détecté");
 }
-&lt;/script&gt;
-&lt;style type="text/css"&gt;
+</script>
+<style type="text/css">
 #foo {
 border: solid blue 2px;
 }
-&lt;/style&gt;
-&lt;/head&gt;
-&lt;body onload="initElement();"&gt;
-&lt;span id="foo"&gt;Mon Span à cliquer&lt;/span&gt;
-&lt;p&gt;Cliquez sur l'élément ci-dessus.&lt;/p&gt;
-&lt;/body&gt;
-&lt;/html&gt;</pre>
-
-<p>Vous pouvez aussi utiliser la syntaxe des fonctions déclarées en ligne, anonymes ou non.</p>
-
-<pre class="brush: js">// affectation de fonction anonyme declarée en ligne
+</style>
+</head>
+<body onload="initElement();">
+<span id="foo">Mon Span à cliquer</span>
+<p>Cliquez sur l'élément ci-dessus.</p>
+</body>
+</html>
+```
+
+Vous pouvez aussi utiliser la syntaxe des fonctions déclarées en ligne, anonymes ou non.
+
+```js
+// affectation de fonction anonyme declarée en ligne
 p.onclick = function() { alert("moot!"); };
-</pre>
+```
 
-<h3 id="Notes">Notes</h3>
+### Notes
 
-<p>L'évènement <code>click</code> est déclenché lorsque l'utilisateur clique sur un élément.</p>
+L'évènement `click` est déclenché lorsque l'utilisateur clique sur un élément.
 
-<p>Avec cette syntaxe un seul gestionnaire d'évènement click peut être assigné à un élement . Pour gérer plusieurs fonctions gestionnaires d'évènements click sur un même élément, utilisez {{ domxref("EventTarget.addEventListener()") }} qui fait partie de la spécification DOM Events.</p>
+Avec cette syntaxe un seul gestionnaire d'évènement click peut être assigné à un élement . Pour gérer plusieurs fonctions gestionnaires d'évènements click sur un même élément, utilisez {{ domxref("EventTarget.addEventListener()") }} qui fait partie de la spécification DOM Events.
 
-<h3 id="Sp.C3.A9cification">Spécification</h3>
+### Spécification
 
-<p>Defini en <a href="http://w3c.github.io/html/webappapis.html#dom-globaleventhandlers-onclick">HTML</a>.</p>
+Defini en [HTML](http://w3c.github.io/html/webappapis.html#dom-globaleventhandlers-onclick).
diff --git a/files/fr/web/api/globaleventhandlers/onclose/index.md b/files/fr/web/api/globaleventhandlers/onclose/index.md
index 757077c904..bf698535b2 100644
--- a/files/fr/web/api/globaleventhandlers/onclose/index.md
+++ b/files/fr/web/api/globaleventhandlers/onclose/index.md
@@ -9,39 +9,26 @@ tags:
   - Reference
 translation_of: Web/API/GlobalEventHandlers/onclose
 ---
-<div>{{ApiRef("HTML DOM")}}</div>
+{{ApiRef("HTML DOM")}}
 
-<p>Un gestionnaire d'évènement utilisé lorsque des évènements de fermeture sont envoyés à la fenêtre (non disponible dans Firefox 2 ou Safari).</p>
+Un gestionnaire d'évènement utilisé lorsque des évènements de fermeture sont envoyés à la fenêtre (non disponible dans Firefox 2 ou Safari).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">window.onclose = funcRef;
-</pre>
+    window.onclose = funcRef;
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<ul>
- <li><code>funcRef</code> est une fonction.</li>
-</ul>
+- `funcRef` est une fonction.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">window.onclose = resetThatServerThing;
-</pre>
+```js
+window.onclose = resetThatServerThing;
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onclose','onclose')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                    | Statut                           | Commentaires |
+| ------------------------------------------------------------------------------------------------ | -------------------------------- | ------------ |
+| {{SpecName('HTML WHATWG','webappapis.html#handler-onclose','onclose')}} | {{Spec2('HTML WHATWG')}} |              |
diff --git a/files/fr/web/api/globaleventhandlers/ondblclick/index.md b/files/fr/web/api/globaleventhandlers/ondblclick/index.md
index 81e25a91e3..db9380a8bd 100644
--- a/files/fr/web/api/globaleventhandlers/ondblclick/index.md
+++ b/files/fr/web/api/globaleventhandlers/ondblclick/index.md
@@ -7,24 +7,31 @@ tags:
   - Référence_du_DOM_Gecko
 translation_of: Web/API/GlobalEventHandlers/ondblclick
 ---
-<p>{{ ApiRef() }}</p>
-<h3 id="R.C3.A9sum.C3.A9">Résumé</h3>
-<p>La propriété <b>ondblclick</b> renvoie le gestionnaire d'évènement <code>dblclick</code> de l'élément courant.</p>
-<h3 id="Syntaxe">Syntaxe</h3>
-<pre class="eval">element.ondblclick = nomDeFonction;
-</pre>
-<ul>
- <li><code>nomDeFonction</code> est le nom d'une fonction définie par l'utilisateur, sans les parenthèses ni aucun paramètre. Il peut également s'agir d'une déclaration de fonction anonyme, comme :</li>
-</ul>
-<pre class="eval">element.ondblclick = function() { alert("Évènement dblclick détecté"); };
-</pre>
-<h3 id="Exemple">Exemple</h3>
-<pre class="brush: html">&lt;html&gt;
-
-&lt;head&gt;
-&lt;title&gt;ondblclick event example&lt;/title&gt;
-
-&lt;script type="text/javascript"&gt;
+{{ ApiRef() }}
+
+### Résumé
+
+La propriété **ondblclick** renvoie le gestionnaire d'évènement `dblclick` de l'élément courant.
+
+### Syntaxe
+
+    element.ondblclick = nomDeFonction;
+
+- `nomDeFonction` est le nom d'une fonction définie par l'utilisateur, sans les parenthèses ni aucun paramètre. Il peut également s'agir d'une déclaration de fonction anonyme, comme :
+
+<!---->
+
+    element.ondblclick = function() { alert("Évènement dblclick détecté"); };
+
+### Exemple
+
+```html
+<html>
+
+<head>
+<title>ondblclick event example</title>
+
+<script type="text/javascript">
 
 function initElement() {
  var p = document.getElementById("foo");
@@ -36,24 +43,28 @@ function initElement() {
 function showAlert() {
  alert("Évènement dblclick détecté")
 }
-&lt;/script&gt;
+</script>
 
-&lt;style type="text/css"&gt;
-&lt;!--
+<style type="text/css">
+<!--
 #foo {
 border: solid blue 2px;
 }
---&gt;
-&lt;/style&gt;
-&lt;/head&gt;
-
-&lt;body onload="initElement()";&gt;
-&lt;span id="foo"&gt;Mon élément&lt;/span&gt;
-&lt;p&gt;Double-cliquez sur l'élément ci-dessus.&lt;/p&gt;
-&lt;/body&gt;
-&lt;/html&gt;
-</pre>
-<h3 id="Notes">Notes</h3>
-<p>L'évènement <code>dblclick</code> est déclenché lorsque l'utilisateur double-clique sur un élément.</p>
-<h3 id="Sp.C3.A9cification">Spécification</h3>
-<p>{{ DOM0() }}</p>
\ No newline at end of file
+-->
+</style>
+</head>
+
+<body onload="initElement()";>
+<span id="foo">Mon élément</span>
+<p>Double-cliquez sur l'élément ci-dessus.</p>
+</body>
+</html>
+```
+
+### Notes
+
+L'évènement `dblclick` est déclenché lorsque l'utilisateur double-clique sur un élément.
+
+### Spécification
+
+{{ DOM0() }}
diff --git a/files/fr/web/api/globaleventhandlers/onerror/index.md b/files/fr/web/api/globaleventhandlers/onerror/index.md
index 1f44c2033c..b25ada424d 100644
--- a/files/fr/web/api/globaleventhandlers/onerror/index.md
+++ b/files/fr/web/api/globaleventhandlers/onerror/index.md
@@ -8,89 +8,74 @@ tags:
   - Reference
 translation_of: Web/API/GlobalEventHandlers/onerror
 ---
-<div>{{ApiRef("HTML DOM")}}</div>
+{{ApiRef("HTML DOM")}}
 
-<p>Un <a href="/en-US/docs/Web/Guide/Events/Event_handlers">gestionnaire d'événement</a> pour l'événement <code><a href="/en-US/docs/Web/Events/error">error</a></code>. Des événements d'erreur sont déclenchés vers diverses cibles et pour différents types d'erreurs:</p>
+Un [gestionnaire d'événement](/en-US/docs/Web/Guide/Events/Event_handlers) pour l'événement [`error`](/en-US/docs/Web/Events/error). Des événements d'erreur sont déclenchés vers diverses cibles et pour différents types d'erreurs:
 
-<ul>
- <li>Lorsqu'une <strong>erreur de runtime JavaScript</strong> se produit (erreurs de syntaxe comprises), un évènement <code><a href="/en-US/docs/Web/Events/error">error</a></code> utilisant l'interface {{domxref("ErrorEvent")}} est envoyé à {{domxref("window")}}, et <code>window.onerror()</code> est appelé.</li>
- <li>Lorsque le <strong>chargement d'une ressource</strong> (telle que {{HTMLElement("img")}} ou {{HTMLElement("script")}}) <strong>échoue</strong>, un événement <code><a href="/en-US/docs/Web/Events/error">error</a></code> utilisant l'interface {{domxref("Event")}} est déclenché sur l'élément qui a initié le chargement, et le gestionnaire <code>onerror()</code> de l'élément est invoqué. Ces évènements d'erreur ne remontent pas à window, mais (au moins dans FireFox) ils peuvent être gérés par une unique capture {{domxref("window.addEventListener")}}.</li>
-</ul>
+- Lorsqu'une **erreur de runtime JavaScript** se produit (erreurs de syntaxe comprises), un évènement [`error`](/en-US/docs/Web/Events/error) utilisant l'interface {{domxref("ErrorEvent")}} est envoyé à {{domxref("window")}}, et `window.onerror()` est appelé.
+- Lorsque le **chargement d'une ressource** (telle que {{HTMLElement("img")}} ou {{HTMLElement("script")}}) **échoue**, un événement [`error`](/en-US/docs/Web/Events/error) utilisant l'interface {{domxref("Event")}} est déclenché sur l'élément qui a initié le chargement, et le gestionnaire `onerror()` de l'élément est invoqué. Ces évènements d'erreur ne remontent pas à window, mais (au moins dans FireFox) ils peuvent être gérés par une unique capture {{domxref("window.addEventListener")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>Pour des raisons historiques, des arguments différents sont passés aux gestionnaires <code>window.onerror</code> et <code>element.onerror</code>.</p>
+Pour des raisons historiques, des arguments différents sont passés aux gestionnaires `window.onerror` et `element.onerror`.
 
-<h3 id="window.onerror">window.onerror</h3>
+### window\.onerror
 
-<pre class="brush: js">window.onerror = function(messageOrEvent, source, noligne, nocolonne, erreur) { ... }</pre>
+```js
+window.onerror = function(messageOrEvent, source, noligne, nocolonne, erreur) { ... }
+```
 
-<p>Paramètres de la fonction :</p>
+Paramètres de la fonction :
 
-<ul>
- <li><code>message </code>: message d'erreur (chaîne ou objet évènement). Disponible comme <code>event</code> (sic !) dans le gestionnaire de HTML <code>onerror=""</code> et aussi comme objet évènement lors de l'envoi d'un <a href="/en-US/docs/Web/API/Event">Event</a> à <code>window,</code> auquel cas les autres arguments ne seront pas fournis (au contraire de <a href="/en-US/docs/Web/API/ErrorEvent">ErrorEvent</a>, qui amène le passage de l'ensemble complet des arguments à <code>window.onerror</code>, tandis que seul l'objet d'évènement d'erreur est  passé aux gestionnaires de<code> window.addEventListener('error'))</code></li>
- <li>source : l'URL du script où l'erreur a été déclenchée (chaîne)</li>
- <li>noligne : le numéro de ligne où l'erreur a été déclenchée (nombre)</li>
- <li>nocolonne : le numéro de colonne où l'erreur a été déclenchée (nombre)</li>
- <li>erreur : un <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error">Error Object</a> (objet) {{gecko_minversion_inline("31.0")}}</li>
-</ul>
+- `message `: message d'erreur (chaîne ou objet évènement). Disponible comme `event` (sic !) dans le gestionnaire de HTML `onerror=""` et aussi comme objet évènement lors de l'envoi d'un [Event](/en-US/docs/Web/API/Event) à `window,` auquel cas les autres arguments ne seront pas fournis (au contraire de [ErrorEvent](/en-US/docs/Web/API/ErrorEvent), qui amène le passage de l'ensemble complet des arguments à `window.onerror`, tandis que seul l'objet d'évènement d'erreur est  passé aux gestionnaires de` window.addEventListener('error'))`
+- source : l'URL du script où l'erreur a été déclenchée (chaîne)
+- noligne : le numéro de ligne où l'erreur a été déclenchée (nombre)
+- nocolonne : le numéro de colonne où l'erreur a été déclenchée (nombre)
+- erreur : un [Error Object](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error) (objet) {{gecko_minversion_inline("31.0")}}
 
-<h3 id="element.onerror_(et_window.addEventListener('error'))">element.onerror (et <code>window.addEventListener('error')</code>)</h3>
+### element.onerror (et `window.addEventListener('error')`)
 
-<pre><code>element.onerror = function(event) { ... }</code></pre>
+    element.onerror = function(event) { ... }
 
-<p><code>element.onerror</code> accepte une fonction avec un argument unique de type {{domxref("Event")}}.</p>
+`element.onerror` accepte une fonction avec un argument unique de type {{domxref("Event")}}.
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p>Quand une erreur de syntaxe<strong>(?)</strong> se produit dans un script chargé à partir d'une <a href="/en-US/docs/Web/Security/Same-origin_policy">origine différente</a>, les détails de l'erreur de syntaxe ne sont pas rapportés, afin de prévenir la fuite d'information (voir {{bug("363897")}}). A la place, l'erreur est simplement reportée en tant que <code><strong>"Script error"</strong></code>. Ce comportement peut être surchargé par certains navigateurs en utilisant l'attribut <code>{{htmlattrxref("crossorigin","script")}}</code> de {{HTMLElement("script")}} et en faisant en sorte que le serveur envoie les entêtes de réponse <a href="/en-US/docs/Web/HTTP/Access_control_CORS">CORS</a> HTTP appropriés. Un contournement consiste à isoler "Script error" et à la gérer en sachant que les détails de l'erreur ne sont visibles que la console du navigateur et non accessibles en JavaScript.</p>
+Quand une erreur de syntaxe**(?)** se produit dans un script chargé à partir d'une [origine différente](/en-US/docs/Web/Security/Same-origin_policy), les détails de l'erreur de syntaxe ne sont pas rapportés, afin de prévenir la fuite d'information (voir {{bug("363897")}}). A la place, l'erreur est simplement reportée en tant que **`"Script error"`**. Ce comportement peut être surchargé par certains navigateurs en utilisant l'attribut `{{htmlattrxref("crossorigin","script")}}` de {{HTMLElement("script")}} et en faisant en sorte que le serveur envoie les entêtes de réponse [CORS](/en-US/docs/Web/HTTP/Access_control_CORS) HTTP appropriés. Un contournement consiste à isoler "Script error" et à la gérer en sachant que les détails de l'erreur ne sont visibles que la console du navigateur et non accessibles en JavaScript.
 
-<pre><code>window.onerror = function (msg, url, noLigne, noColonne, erreur) {
-    var chaine = msg.toLowerCase();
-    var souschaine = "script error";
-    if (chaine.indexOf(souschaine) &gt; -1){
-        alert('Script Error : voir la Console du Navigateur pour les Détails');
-    } else {
-        var message = [
-            'Message : ' + msg,
-            'URL : ' + url,
-            'Ligne : ' + noLigne,
-            'Colonne : ' + noColonne,
-            'Objet Error : ' + JSON.stringify(erreur)
-        ].join(' - ');
+    window.onerror = function (msg, url, noLigne, noColonne, erreur) {
+        var chaine = msg.toLowerCase();
+        var souschaine = "script error";
+        if (chaine.indexOf(souschaine) > -1){
+            alert('Script Error : voir la Console du Navigateur pour les Détails');
+        } else {
+            var message = [
+                'Message : ' + msg,
+                'URL : ' + url,
+                'Ligne : ' + noLigne,
+                'Colonne : ' + noColonne,
+                'Objet Error : ' + JSON.stringify(erreur)
+            ].join(' - ');
 
-        alert(message);
-    }
+            alert(message);
+        }
 
-    return false;
-};</code></pre>
+        return false;
+    };
 
-<p>Lors de l'utilisation du balisage html intégré (&lt;body onerror="alert('une erreur est survenue')&gt;...), la spécification HTML requiert que les arguments passés à <code>onerror</code> soient nommés <code>event</code>, <code>source</code>, <code>lineno</code>, <code>colno</code>, <code>error</code>. Dans les navigteurs qui n'ont pas implémenté cette obligation, ils peuvent toujours être obtenus via <code>arguments[0]</code> à <code>arguments[2]</code>.</p>
+Lors de l'utilisation du balisage html intégré (\<body onerror="alert('une erreur est survenue')>...), la spécification HTML requiert que les arguments passés à `onerror` soient nommés `event`, `source`, `lineno`, `colno`, `error`. Dans les navigteurs qui n'ont pas implémenté cette obligation, ils peuvent toujours être obtenus via `arguments[0]` à `arguments[2]`.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onerror','onerror')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                    | Statut                           | Commentaire |
+| ------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- |
+| {{SpecName('HTML WHATWG','webappapis.html#handler-onerror','onerror')}} | {{Spec2('HTML WHATWG')}} |             |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.GlobalEventHandlers.onerror")}}</p>
+{{Compat("api.GlobalEventHandlers.onerror")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="http://blog.getsentry.com/2016/01/04/client-javascript-reporting-window-onerror.html">Capture and report JavaScript errors with window.onerror (blog.getsentry.com, 2016)</a></li>
- <li><a href="https://danlimerick.wordpress.com/2014/01/18/how-to-catch-javascript-errors-with-window-onerror-even-on-chrome-and-firefox/">How to catch JavaScript Errors with window.onerror (even on Chrome and Firefox) (danlimerick.wordpress.com, 2014)</a></li>
-</ul>
+- [Capture and report JavaScript errors with window.onerror (blog.getsentry.com, 2016)](http://blog.getsentry.com/2016/01/04/client-javascript-reporting-window-onerror.html)
+- [How to catch JavaScript Errors with window.onerror (even on Chrome and Firefox) (danlimerick.wordpress.com, 2014)](https://danlimerick.wordpress.com/2014/01/18/how-to-catch-javascript-errors-with-window-onerror-even-on-chrome-and-firefox/)
diff --git a/files/fr/web/api/globaleventhandlers/onfocus/index.md b/files/fr/web/api/globaleventhandlers/onfocus/index.md
index e7f9702f3f..f8b2de65f5 100644
--- a/files/fr/web/api/globaleventhandlers/onfocus/index.md
+++ b/files/fr/web/api/globaleventhandlers/onfocus/index.md
@@ -7,14 +7,22 @@ tags:
   - Référence_du_DOM_Gecko
 translation_of: Web/API/GlobalEventHandlers/onfocus
 ---
-<p>{{ ApiRef() }}</p>
-<h3 id="R.C3.A9sum.C3.A9">Résumé</h3>
-<p>La propriété <b>onfocus</b> renvoie le gestionnaire de l'évènement <code>focus</code> pour l'élément courant.</p>
-<h3 id="Syntaxe">Syntaxe</h3>
-<pre class="eval">code de gestion de l'évènement = element.onfocus
-</pre>
-<h3 id="Notes">Notes</h3>
-<p>L'évènement focus se déclenche lorsque l'utilisateur donne le focus clavier à l'élément donné.</p>
-<p>Contrairement à Microsoft Internet Explorer, dans lequel presque toutes les sortes d'éléments peuvent recevoir l'évènement focus, presqu'aucune sorte d'élément ne reçoit cet évènement dans les navigateurs utilisant Gecko.</p>
-<h3 id="Sp.C3.A9cification">Spécification</h3>
-<p>{{ DOM0() }}</p>
\ No newline at end of file
+{{ ApiRef() }}
+
+### Résumé
+
+La propriété **onfocus** renvoie le gestionnaire de l'évènement `focus` pour l'élément courant.
+
+### Syntaxe
+
+    code de gestion de l'évènement = element.onfocus
+
+### Notes
+
+L'évènement focus se déclenche lorsque l'utilisateur donne le focus clavier à l'élément donné.
+
+Contrairement à Microsoft Internet Explorer, dans lequel presque toutes les sortes d'éléments peuvent recevoir l'évènement focus, presqu'aucune sorte d'élément ne reçoit cet évènement dans les navigateurs utilisant Gecko.
+
+### Spécification
+
+{{ DOM0() }}
diff --git a/files/fr/web/api/globaleventhandlers/ongotpointercapture/index.md b/files/fr/web/api/globaleventhandlers/ongotpointercapture/index.md
index 02508798b1..5401fc38c2 100644
--- a/files/fr/web/api/globaleventhandlers/ongotpointercapture/index.md
+++ b/files/fr/web/api/globaleventhandlers/ongotpointercapture/index.md
@@ -3,21 +3,20 @@ title: GlobalEventHandlers.ongotpointercapture
 slug: Web/API/GlobalEventHandlers/ongotpointercapture
 translation_of: Web/API/GlobalEventHandlers/ongotpointercapture
 ---
-<div>{{ApiRef("HTML DOM")}}</div>
+{{ApiRef("HTML DOM")}}La propriété **`ongotpointercapture`** du mixin {{domxref("GlobalEventHandlers")}} est un {{event("Event_handlers", "event handler")}} qui traite les évènements de type {{event("gotpointercapture")}}.
 
-<div>La propriété <strong><code>ongotpointercapture</code></strong> du mixin {{domxref("GlobalEventHandlers")}} est un {{event("Event_handlers", "event handler")}} qui traite les évènements de type {{event("gotpointercapture")}}.</div>
+## Syntaxe
 
-<h2 id="Syntaxe">Syntaxe</h2>
+    target.ongotpointercapture = functionRef;
 
-<pre class="syntaxbox"><em>target</em>.ongotpointercapture = <em>functionRef</em>;</pre>
+### Valeur
 
-<h3 id="Valeur">Valeur</h3>
+`functionRef` est un nom de fonction ou une [expression fonction](/en-US/docs/Web/JavaScript/Reference/Operators/function). La fonction accepte un objet {{domxref("FocusEvent")}} en tant qu'unique argument.
 
-<p><code>functionRef</code> est un nom de fonction ou une <a href="/en-US/docs/Web/JavaScript/Reference/Operators/function">expression fonction</a>. La fonction accepte un objet {{domxref("FocusEvent")}} en tant qu'unique argument.</p>
+## Example
 
-<h2 id="Example">Example</h2>
-
-<pre class="brush: js">function overHandler(event) {
+```js
+function overHandler(event) {
   // Obtient le gestionnaire de type "gotpointercapture" de la cible de l'événement
   let gotCaptureHandler = event.target.ongotpointercapture;
 }
@@ -25,35 +24,21 @@ translation_of: Web/API/GlobalEventHandlers/ongotpointercapture
 function init() {
   let el = document.getElementById('target');
   el.ongotpointercapture = overHandler;
-}</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Pointer Events 2', '#the-gotpointercapture-event', 'onlostpointercapture')}}</td>
-   <td>{{Spec2('Pointer Events 2')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+}
+```
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Spécifications
 
+| Spécification                                                                                                        | Status                                   | Commentaire |
+| -------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ----------- |
+| {{SpecName('Pointer Events 2', '#the-gotpointercapture-event', 'onlostpointercapture')}} | {{Spec2('Pointer Events 2')}} |             |
 
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.GlobalEventHandlers.ongotpointercapture")}}</p>
+{{Compat("api.GlobalEventHandlers.ongotpointercapture")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>L'évènement <code><a href="/en-US/docs/Web/API/Document/gotpointercapture_event">Document: gotpointercapture</a></code></li>
- <li>L'évènement <code><a href="/en-US/docs/Web/API/Element/gotpointercapture_event">Element: gotpointercapture</a></code></li>
- <li>{{domxref("Element.setPointerCapture()")}}</li>
-</ul>
+- L'évènement [`Document: gotpointercapture`](/en-US/docs/Web/API/Document/gotpointercapture_event)
+- L'évènement [`Element: gotpointercapture`](/en-US/docs/Web/API/Element/gotpointercapture_event)
+- {{domxref("Element.setPointerCapture()")}}
diff --git a/files/fr/web/api/globaleventhandlers/onkeydown/index.md b/files/fr/web/api/globaleventhandlers/onkeydown/index.md
index 0b2e1762b3..b280fea9ad 100644
--- a/files/fr/web/api/globaleventhandlers/onkeydown/index.md
+++ b/files/fr/web/api/globaleventhandlers/onkeydown/index.md
@@ -7,16 +7,26 @@ tags:
   - Référence_du_DOM_Gecko
 translation_of: Web/API/GlobalEventHandlers/onkeydown
 ---
-<p>{{ ApiRef() }}</p>
-<h3 id="R.C3.A9sum.C3.A9">Résumé</h3>
-<p>La propriété <strong>onkeydown</strong> définit et renvoie le gestionnaire d'évènement <code>keydown</code> de l'élément courant.</p>
-<h3 id="Syntaxe">Syntaxe</h3>
-<pre class="eval">code de gestion de l'évènement = element.onkeydown
-</pre>
-<h3 id="Notes">Notes</h3>
-<p>L'évènement <code>keydown</code> se déclenche lorsque qu'une touche du clavier est enfoncée.</p>
-<p>À différencier de <a href="/fr/DOM/element.onkeypress">onkeypress</a> qui se déclenche lorsque qu'une touche du clavier est pressée. (La nuance se situe dans le fait que <code>onkeydown</code> se produit avant <code>onkeypress</code> même s'ils se produisent quasiment au même instant)</p>
-<h3 id="Notes">Voir aussi</h3>
-<p><a href="/fr/DOM/element.onkeypress">onkeypress</a> <a href="/fr/DOM/element.onkeyup">onkeyup</a></p>
-<h3 id="Sp.C3.A9cification">Spécification</h3>
-<p>{{ DOM0() }}</p>
\ No newline at end of file
+{{ ApiRef() }}
+
+### Résumé
+
+La propriété **onkeydown** définit et renvoie le gestionnaire d'évènement `keydown` de l'élément courant.
+
+### Syntaxe
+
+    code de gestion de l'évènement = element.onkeydown
+
+### Notes
+
+L'évènement `keydown` se déclenche lorsque qu'une touche du clavier est enfoncée.
+
+À différencier de [onkeypress](/fr/DOM/element.onkeypress) qui se déclenche lorsque qu'une touche du clavier est pressée. (La nuance se situe dans le fait que `onkeydown` se produit avant `onkeypress` même s'ils se produisent quasiment au même instant)
+
+### Voir aussi
+
+[onkeypress](/fr/DOM/element.onkeypress) [onkeyup](/fr/DOM/element.onkeyup)
+
+### Spécification
+
+{{ DOM0() }}
diff --git a/files/fr/web/api/globaleventhandlers/onkeypress/index.md b/files/fr/web/api/globaleventhandlers/onkeypress/index.md
index e22a9435d9..42a8889bf9 100644
--- a/files/fr/web/api/globaleventhandlers/onkeypress/index.md
+++ b/files/fr/web/api/globaleventhandlers/onkeypress/index.md
@@ -7,16 +7,26 @@ tags:
   - Référence_du_DOM_Gecko
 translation_of: Web/API/GlobalEventHandlers/onkeypress
 ---
-<p>{{ ApiRef() }}</p>
-<h3 id="R.C3.A9sum.C3.A9">Résumé</h3>
-<p>La propriété <strong>onkeypress</strong> définit et renvoie le gestionnaire d'évènement <code>keypress</code> de l'élément courant.</p>
-<h3 id="Syntaxe">Syntaxe</h3>
-<pre class="eval">element.onkeypress = code de gestion de l'évènement
-</pre>
-<h3 id="Notes">Notes</h3>
-<p>L'évènement <code>keypress</code> se déclenche lorsque qu'une touche du clavier est pressée.</p>
-<p>À différencier de <a href="/fr/DOM/element.onkeydown">onkeydown</a> qui se déclenche lorsque qu'une touche du clavier est enfoncée. (La nuance se situe dans le fait que <code>onkeydown</code> se produit avant <code>onkeypress</code>, même s'il se produisent quasiment au même instant)</p>
-<h3 id="Notes">Voir aussi</h3>
-<p><a href="/fr/DOM/element.onkeydown">onkeydown</a> <a href="/fr/DOM/element.onkeyup">onkeyup</a></p>
-<h3 id="Sp.C3.A9cification">Spécification</h3>
-<p>{{ DOM0() }}</p>
\ No newline at end of file
+{{ ApiRef() }}
+
+### Résumé
+
+La propriété **onkeypress** définit et renvoie le gestionnaire d'évènement `keypress` de l'élément courant.
+
+### Syntaxe
+
+    element.onkeypress = code de gestion de l'évènement
+
+### Notes
+
+L'évènement `keypress` se déclenche lorsque qu'une touche du clavier est pressée.
+
+À différencier de [onkeydown](/fr/DOM/element.onkeydown) qui se déclenche lorsque qu'une touche du clavier est enfoncée. (La nuance se situe dans le fait que `onkeydown` se produit avant `onkeypress`, même s'il se produisent quasiment au même instant)
+
+### Voir aussi
+
+[onkeydown](/fr/DOM/element.onkeydown) [onkeyup](/fr/DOM/element.onkeyup)
+
+### Spécification
+
+{{ DOM0() }}
diff --git a/files/fr/web/api/globaleventhandlers/onkeyup/index.md b/files/fr/web/api/globaleventhandlers/onkeyup/index.md
index 22c189fd6c..cc068b3dd8 100644
--- a/files/fr/web/api/globaleventhandlers/onkeyup/index.md
+++ b/files/fr/web/api/globaleventhandlers/onkeyup/index.md
@@ -5,18 +5,31 @@ tags:
   - Référence_du_DOM_Gecko
 translation_of: Web/API/GlobalEventHandlers/onkeyup
 ---
-<p>{{ ApiRef() }}</p>
-<h3 id="R.C3.A9sum.C3.A9">Résumé</h3>
-<p>La propriété <strong>onkeyup</strong> renvoi le gestionnaire d'évènements onKeyUp de l'élément courant.</p>
-<h3 id="Syntaxe">Syntaxe</h3>
-<p>code de gestion de l'évènement = element.onkeyup</p>
-<h3 id="Exemple">Exemple</h3>
-<pre class="brush: html"> &lt;input type="text" onKeyUp="cleRelachee(event)"&gt;
- &lt;script&gt;function cleRelachee(evt){ alert(evt.keyCode) }&lt;/script&gt;
-</pre>
-<h3 id="Notes">Notes</h3>
-<p>L'évènement <code>keyup</code> se déclenche lorsque qu'une touche du clavier qui a été pressée est relâchée.</p>
-<h3 id="Notes">Voir aussi</h3>
-<p><a href="/fr/DOM/element.onkeypress">onkeypress</a> <a href="/fr/DOM/element.onkeydown">onkeydown</a></p>
-<h3 id="Sp.C3.A9cification">Spécification</h3>
-<p>Ne fait partie d'aucune spécification.</p>
\ No newline at end of file
+{{ ApiRef() }}
+
+### Résumé
+
+La propriété **onkeyup** renvoi le gestionnaire d'évènements onKeyUp de l'élément courant.
+
+### Syntaxe
+
+code de gestion de l'évènement = element.onkeyup
+
+### Exemple
+
+```html
+ <input type="text" onKeyUp="cleRelachee(event)">
+ <script>function cleRelachee(evt){ alert(evt.keyCode) }</script>
+```
+
+### Notes
+
+L'évènement `keyup` se déclenche lorsque qu'une touche du clavier qui a été pressée est relâchée.
+
+### Voir aussi
+
+[onkeypress](/fr/DOM/element.onkeypress) [onkeydown](/fr/DOM/element.onkeydown)
+
+### Spécification
+
+Ne fait partie d'aucune spécification.
diff --git a/files/fr/web/api/globaleventhandlers/onload/index.md b/files/fr/web/api/globaleventhandlers/onload/index.md
index e1c9c1d4c7..2f01d7a6eb 100644
--- a/files/fr/web/api/globaleventhandlers/onload/index.md
+++ b/files/fr/web/api/globaleventhandlers/onload/index.md
@@ -5,20 +5,28 @@ tags:
   - Référence_du_DOM_Gecko
 translation_of: Web/API/GlobalEventHandlers/onload
 ---
-<p>{{ ApiRef() }}</p>
-<h3 id="R.C3.A9sum.C3.A9">Résumé</h3>
-<p>Un gestionnaire d'évènement pour l'évènement <code>load</code> (chargement) de la fenêtre.</p>
-<h3 id="Syntaxe">Syntaxe</h3>
-<pre>window.onload = refFct;
-</pre>
-<h3 id="Param.C3.A8tres">Paramètres</h3>
-<ul>
- <li><code>refFct</code> est une référence à une fonction.</li>
-</ul>
-<h3 id="Exemple">Exemple</h3>
-<pre>window.onload = init;
-</pre>
-<h3 id="Notes">Notes</h3>
-<p>L'évènement <code>load</code> se déclenche à la fin du processus de chargement du document. À ce moment, tous les objets du document sont dans le DOM.</p>
-<h3 id="Sp.C3.A9cification">Spécification</h3>
-<p>Ne fait partie d'aucune spécification.</p>
\ No newline at end of file
+{{ ApiRef() }}
+
+### Résumé
+
+Un gestionnaire d'évènement pour l'évènement `load` (chargement) de la fenêtre.
+
+### Syntaxe
+
+    window.onload = refFct;
+
+### Paramètres
+
+- `refFct` est une référence à une fonction.
+
+### Exemple
+
+    window.onload = init;
+
+### Notes
+
+L'évènement `load` se déclenche à la fin du processus de chargement du document. À ce moment, tous les objets du document sont dans le DOM.
+
+### Spécification
+
+Ne fait partie d'aucune spécification.
diff --git a/files/fr/web/api/globaleventhandlers/onloadend/index.md b/files/fr/web/api/globaleventhandlers/onloadend/index.md
index dfa1f3a113..e62f46a6f7 100644
--- a/files/fr/web/api/globaleventhandlers/onloadend/index.md
+++ b/files/fr/web/api/globaleventhandlers/onloadend/index.md
@@ -9,28 +9,30 @@ tags:
   - évènements
 translation_of: Web/API/GlobalEventHandlers/onloadend
 ---
-<div>{{ApiRef}}</div>
+{{ApiRef}}
 
-<p>La propriété <strong><code>onloadend</code></strong> du "mixin" {{domxref("GlobalEventHandlers")}} est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'évènement {{event("loadend")}} est déclenché (quand la progression est arrêtée sur le chargement d'une ressource).</p>
+La propriété **`onloadend`** du "mixin" {{domxref("GlobalEventHandlers")}} est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsque l'évènement {{event("loadend")}} est déclenché (quand la progression est arrêtée sur le chargement d'une ressource).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var>img</var>.onloadend = <var>funcRef</var>;
-</pre>
+    img.onloadend = funcRef;
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p><code>funcRef</code> est la fonction du gestionnaire à appeler quand l'évènement <code>loadend </code>de la ressource est déclenché.</p>
+`funcRef` est la fonction du gestionnaire à appeler quand l'évènement `loadend `de la ressource est déclenché.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Contenu_HTML">Contenu HTML</h3>
+### Contenu HTML
 
-<pre class="brush: html">&lt;img src="myImage.jpg"&gt;</pre>
+```html
+<img src="myImage.jpg">
+```
 
-<h3 id="Contenu_JavaScript">Contenu JavaScript</h3>
+### Contenu JavaScript
 
-<pre class="brush: js">// 'loadstart' est le premier lancé, puis 'load', puis 'loadend'
+```js
+// 'loadstart' est le premier lancé, puis 'load', puis 'loadend'
 
 image.addEventListener('load', function(e) {
   console.log('Image loaded');
@@ -42,27 +44,15 @@ image.addEventListener('loadstart', function(e) {
 
 image.addEventListener('loadend', function(e) {
   console.log('Image load finished');
-});</pre>
-
-<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", "webappapis.html#handler-onloadend", "onloadend")}}</td>
-   <td>{{Spec2("HTML WHATWG")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.GlobalEventHandlers.onloadend")}}</p>
+});
+```
+
+## Spécifications
+
+| Spécification                                                                                            | Statut                           | Commentaire          |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName("HTML WHATWG", "webappapis.html#handler-onloadend", "onloadend")}} | {{Spec2("HTML WHATWG")}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.GlobalEventHandlers.onloadend")}}
diff --git a/files/fr/web/api/globaleventhandlers/onloadstart/index.md b/files/fr/web/api/globaleventhandlers/onloadstart/index.md
index 8dd07ad991..e9f0da2f5c 100644
--- a/files/fr/web/api/globaleventhandlers/onloadstart/index.md
+++ b/files/fr/web/api/globaleventhandlers/onloadstart/index.md
@@ -9,28 +9,30 @@ tags:
   - évènements
 translation_of: Web/API/GlobalEventHandlers/onloadstart
 ---
-<div>{{ApiRef}}</div>
+{{ApiRef}}
 
-<p>La propriété <strong><code>onloadstart</code></strong> du "mixin" {{domxref("GlobalEventHandlers")}} est un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) représentant le code à appeler lorsque l'évènement {{event("loadstart")}} est déclenché (quand la progression est commencée sur le chargement d'une ressource).</p>
+La propriété **`onloadstart`** du "mixin" {{domxref("GlobalEventHandlers")}} est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsque l'évènement {{event("loadstart")}} est déclenché (quand la progression est commencée sur le chargement d'une ressource).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var>img</var>.onloadstart = <var>funcRef</var>;
-</pre>
+    img.onloadstart = funcRef;
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p><code>funcRef</code> est la fonction du gestionnaire à appeler lorsque l'évènement <code>loadstart</code> de la ressource est déclenché.</p>
+`funcRef` est la fonction du gestionnaire à appeler lorsque l'évènement `loadstart` de la ressource est déclenché.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Contenu_HTML">Contenu HTML</h3>
+### Contenu HTML
 
-<pre class="brush: html">&lt;img src="myImage.jpg"&gt;</pre>
+```html
+<img src="myImage.jpg">
+```
 
-<h3 id="Contenu_JavaScript">Contenu JavaScript</h3>
+### Contenu JavaScript
 
-<pre class="brush: js">// 'loadstart' est lancé le premier, puis 'load', puis 'loadend'
+```js
+// 'loadstart' est lancé le premier, puis 'load', puis 'loadend'
 
 image.addEventListener('load', function(e) {
   console.log('Image loaded');
@@ -42,33 +44,15 @@ image.addEventListener('loadstart', function(e) {
 
 image.addEventListener('loadend', function(e) {
   console.log('Image load finished');
-});</pre>
-
-<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", "webappapis.html#handler-onloadstart", "onloadstart")}}</td>
-   <td>{{Spec2("HTML WHATWG")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<div>
-<div>
-
-
-<p>{{Compat("api.GlobalEventHandlers.onloadstart")}}</p>
-</div>
-</div>
+});
+```
+
+## Spécifications
+
+| Spécification                                                                                                | Statut                           | Commentaire          |
+| ------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName("HTML WHATWG", "webappapis.html#handler-onloadstart", "onloadstart")}} | {{Spec2("HTML WHATWG")}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.GlobalEventHandlers.onloadstart")}}
diff --git a/files/fr/web/api/globaleventhandlers/onmousedown/index.md b/files/fr/web/api/globaleventhandlers/onmousedown/index.md
index ddc16d114f..77e14f71e0 100644
--- a/files/fr/web/api/globaleventhandlers/onmousedown/index.md
+++ b/files/fr/web/api/globaleventhandlers/onmousedown/index.md
@@ -7,13 +7,20 @@ tags:
   - Référence_du_DOM_Gecko
 translation_of: Web/API/GlobalEventHandlers/onmousedown
 ---
-<p>{{ ApiRef() }}</p>
-<h3 id="R.C3.A9sum.C3.A9">Résumé</h3>
-<p>La propriété <b>onmousedown</b> renvoie le gestionnaire de l'évènement <code>mousedown</code> (bouton de la souris enfoncé) pour l'élément courant.</p>
-<h3 id="Syntaxe">Syntaxe</h3>
-<pre class="eval">code de gestion de l'évènement = element.onMouseDown
-</pre>
-<h3 id="Notes">Notes</h3>
-<p>L'évènement <code>mousedown</code> se déclenche lorsque l'utilisateur appuie sur le bouton gauche de la souris.</p>
-<h3 id="Sp.C3.A9cification">Spécification</h3>
-<p>{{ DOM0() }}</p>
\ No newline at end of file
+{{ ApiRef() }}
+
+### Résumé
+
+La propriété **onmousedown** renvoie le gestionnaire de l'évènement `mousedown` (bouton de la souris enfoncé) pour l'élément courant.
+
+### Syntaxe
+
+    code de gestion de l'évènement = element.onMouseDown
+
+### Notes
+
+L'évènement `mousedown` se déclenche lorsque l'utilisateur appuie sur le bouton gauche de la souris.
+
+### Spécification
+
+{{ DOM0() }}
diff --git a/files/fr/web/api/globaleventhandlers/onmousemove/index.md b/files/fr/web/api/globaleventhandlers/onmousemove/index.md
index 0521bff2f8..07ecef1a1e 100644
--- a/files/fr/web/api/globaleventhandlers/onmousemove/index.md
+++ b/files/fr/web/api/globaleventhandlers/onmousemove/index.md
@@ -7,31 +7,33 @@ tags:
   - Référence_du_DOM_Gecko
 translation_of: Web/API/GlobalEventHandlers/onmousemove
 ---
-<p>{{ ApiRef() }}</p>
+{{ ApiRef() }}
 
-<h3 id="R.C3.A9sum.C3.A9">Résumé</h3>
+### Résumé
 
-<p>La propriété <strong>onmousemove</strong> renvoie le code de gestion de l'évènement <code>mousemove</code> pour l'élément courant.</p>
+La propriété **onmousemove** renvoie le code de gestion de l'évènement `mousemove` pour l'élément courant.
 
-<h3 id="Syntax">Syntax</h3>
+### Syntax
 
-<p><code><em>element</em>.onmousemove = <em>functionRef</em></code></p>
+`element.onmousemove = functionRef`
 
-<p>où <em>functionRef</em> est une fonction ou une expression de type <em>function. </em>Consulter la <a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope">référence des fonctions</a> pour plus de détails.</p>
+où _functionRef_ est une fonction ou une expression de type _function._ Consulter la [référence des fonctions](/en-US/docs/JavaScript/Reference/Functions_and_function_scope) pour plus de détails.
 
-<p>Le paramètre fournit au gestionnaire d'évènement <em>functionRef</em> lors du déclenchement de l'évènement est objet qui représente l'évènement de déplacment de souris, de type {{ domxref("MouseEvent") }}.</p>
+Le paramètre fournit au gestionnaire d'évènement _functionRef_ lors du déclenchement de l'évènement est objet qui représente l'évènement de déplacment de souris, de type {{ domxref("MouseEvent") }}.
 
-<h3 id="Notes">Exemple</h3>
+### Exemple
 
-<pre class="brush: js">document.body.onmousemove = event =&gt; {
+```js
+document.body.onmousemove = event => {
   // Suivi de la position de la souris dans la console
   console.log(`Position de la souris : X = ${event.clientX} | Y = ${event.clientY}`);
-}</pre>
+}
+```
 
-<h3 id="Notes">Notes</h3>
+### Notes
 
-<p>L'évènement <code>mousemove</code> se déclenche lorsque l'utilisateur déplace la souris.</p>
+L'évènement `mousemove` se déclenche lorsque l'utilisateur déplace la souris.
 
-<h3 id="Sp.C3.A9cification">Spécification</h3>
+### Spécification
 
-<p>{{ DOM0() }}</p>
+{{ DOM0() }}
diff --git a/files/fr/web/api/globaleventhandlers/onmouseout/index.md b/files/fr/web/api/globaleventhandlers/onmouseout/index.md
index 89d6a49b93..8574ace6b6 100644
--- a/files/fr/web/api/globaleventhandlers/onmouseout/index.md
+++ b/files/fr/web/api/globaleventhandlers/onmouseout/index.md
@@ -7,13 +7,20 @@ tags:
   - Référence_du_DOM_Gecko
 translation_of: Web/API/GlobalEventHandlers/onmouseout
 ---
-<p>{{ ApiRef() }}</p>
-<h3 id="R.C3.A9sum.C3.A9">Résumé</h3>
-<p>La propriété <b>onmouseout</b> renvoie le code de gestion de l'évènement <code>mouseout</code> (sortie du pointeur de la souris) pour l'élément courant.</p>
-<h3 id="Syntaxe">Syntaxe</h3>
-<pre class="eval">code de gestion de l'évènement = element.onmouseout
-</pre>
-<h3 id="Notes">Notes</h3>
-<p>L'évènement <code>mouseout</code> se déclenche lorsque le pointeur de la souris quitte un élément (par exemple lorsque le pointeur sort d'une image sur une page web, cet évènement se déclenche pour l'élément <code>image</code> correspondant).</p>
-<h3 id="Sp.C3.A9cification">Spécification</h3>
-<p>{{ DOM0() }}</p>
\ No newline at end of file
+{{ ApiRef() }}
+
+### Résumé
+
+La propriété **onmouseout** renvoie le code de gestion de l'évènement `mouseout` (sortie du pointeur de la souris) pour l'élément courant.
+
+### Syntaxe
+
+    code de gestion de l'évènement = element.onmouseout
+
+### Notes
+
+L'évènement `mouseout` se déclenche lorsque le pointeur de la souris quitte un élément (par exemple lorsque le pointeur sort d'une image sur une page web, cet évènement se déclenche pour l'élément `image` correspondant).
+
+### Spécification
+
+{{ DOM0() }}
diff --git a/files/fr/web/api/globaleventhandlers/onmouseover/index.md b/files/fr/web/api/globaleventhandlers/onmouseover/index.md
index cd357f569f..1ab1660d55 100644
--- a/files/fr/web/api/globaleventhandlers/onmouseover/index.md
+++ b/files/fr/web/api/globaleventhandlers/onmouseover/index.md
@@ -5,13 +5,20 @@ tags:
   - Référence_du_DOM_Gecko
 translation_of: Web/API/GlobalEventHandlers/onmouseover
 ---
-<p>{{ ApiRef() }}</p>
-<h3 id="R.C3.A9sum.C3.A9">Résumé</h3>
-<p>La propriété <b>onmouseover</b> renvoie le code de gestion de l'évènement <code>onMouseOver</code> pour l'élément courant.</p>
-<h3 id="Syntaxe">Syntaxe</h3>
-<pre class="eval">code de gestion de l'évènement = element.onmouseover
-</pre>
-<h3 id="Notes">Notes</h3>
-<p>L'évènement <code>mouseover</code> se déclenche lorsque l'utilisateur déplace la souris au dessus d'un élément particulier.</p>
-<h3 id="Sp.C3.A9cification">Spécification</h3>
-<p>Ne fait partie d'aucune spécification.</p>
\ No newline at end of file
+{{ ApiRef() }}
+
+### Résumé
+
+La propriété **onmouseover** renvoie le code de gestion de l'évènement `onMouseOver` pour l'élément courant.
+
+### Syntaxe
+
+    code de gestion de l'évènement = element.onmouseover
+
+### Notes
+
+L'évènement `mouseover` se déclenche lorsque l'utilisateur déplace la souris au dessus d'un élément particulier.
+
+### Spécification
+
+Ne fait partie d'aucune spécification.
diff --git a/files/fr/web/api/globaleventhandlers/onmouseup/index.md b/files/fr/web/api/globaleventhandlers/onmouseup/index.md
index 554d073793..766da9723d 100644
--- a/files/fr/web/api/globaleventhandlers/onmouseup/index.md
+++ b/files/fr/web/api/globaleventhandlers/onmouseup/index.md
@@ -7,13 +7,20 @@ tags:
   - Référence_du_DOM_Gecko
 translation_of: Web/API/GlobalEventHandlers/onmouseup
 ---
-<p>{{ ApiRef() }}</p>
-<h3 id="R.C3.A9sum.C3.A9">Résumé</h3>
-<p>La propriété <b>onmouseup</b> renvoie le gestionnaire de l'évènement <code>mouseup</code> (bouton de la souris relaché) pour l'élément courant.</p>
-<h3 id="Syntaxe">Syntaxe</h3>
-<pre class="eval">code de gestion de l'évènement = element.onMouseUp
-</pre>
-<h3 id="Notes">Notes</h3>
-<p>L'évènement <code>mouseup</code> se déclenche lorsque l'utilisateur relâche le bouton gauche de la souris.</p>
-<h3 id="Sp.C3.A9cification">Spécification</h3>
-<p>{{ DOM0() }}</p>
\ No newline at end of file
+{{ ApiRef() }}
+
+### Résumé
+
+La propriété **onmouseup** renvoie le gestionnaire de l'évènement `mouseup` (bouton de la souris relaché) pour l'élément courant.
+
+### Syntaxe
+
+    code de gestion de l'évènement = element.onMouseUp
+
+### Notes
+
+L'évènement `mouseup` se déclenche lorsque l'utilisateur relâche le bouton gauche de la souris.
+
+### Spécification
+
+{{ DOM0() }}
diff --git a/files/fr/web/api/globaleventhandlers/onreset/index.md b/files/fr/web/api/globaleventhandlers/onreset/index.md
index 40d2325e6f..8227bf6d7a 100644
--- a/files/fr/web/api/globaleventhandlers/onreset/index.md
+++ b/files/fr/web/api/globaleventhandlers/onreset/index.md
@@ -9,25 +9,23 @@ tags:
   - évènements
 translation_of: Web/API/GlobalEventHandlers/onreset
 ---
-<p>{{ ApiRef() }}</p>
+{{ ApiRef() }}
 
-<p>La propriété <code><strong>GlobalEventHandlers.onreset</strong></code> contient un {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) déclenché quand un évènement {{event("reset")}} est reçu.</p>
+La propriété **`GlobalEventHandlers.onreset`** contient un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) déclenché quand un évènement {{event("reset")}} est reçu.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre>window.onreset = funcRef;
-</pre>
+    window.onreset = funcRef;
 
-<h3 id="Parameters">Paramètres</h3>
+### Paramètres
 
-<ul>
- <li><code>funcRef</code> est une référence à une fonction.</li>
-</ul>
+- `funcRef` est une référence à une fonction.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush: html">&lt;html&gt;
-&lt;script&gt;
+```html
+<html>
+<script>
 function reg() {
   window.captureEvents(Event.RESET);
   window.onreset = hit;
@@ -36,38 +34,27 @@ function reg() {
 function hit() {
  alert('hit');
 }
-&lt;/script&gt;
+</script>
 
-&lt;body onload="reg();"&gt;
- &lt;form&gt;
-   &lt;input type="reset" value="reset" /&gt;
- &lt;/form&gt;
- &lt;div id="d"&gt; &lt;/div&gt;
-&lt;/body&gt;
-&lt;/html&gt;
-</pre>
+<body onload="reg();">
+ <form>
+   <input type="reset" value="reset" />
+ </form>
+ <div id="d"> </div>
+</body>
+</html>
+```
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p>L'évènement <code>reset</code> est déclenché quand l'utilisateur clique sur le bouton de réinitialisation dans un formulaire (<code>&lt;input type="reset"/&gt;</code>).</p>
+L'évènement `reset` est déclenché quand l'utilisateur clique sur le bouton de réinitialisation dans un formulaire (`<input type="reset"/>`).
 
-<h2 id="Specification">Spécification</h2>
+## Spécification
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onreset','onreset')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                    | Statut                           | Commentaire |
+| ------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- |
+| {{SpecName('HTML WHATWG','webappapis.html#handler-onreset','onreset')}} | {{Spec2('HTML WHATWG')}} |             |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.GlobalEventHandlers.onreset")}}</p>
+{{Compat("api.GlobalEventHandlers.onreset")}}
diff --git a/files/fr/web/api/globaleventhandlers/onresize/index.md b/files/fr/web/api/globaleventhandlers/onresize/index.md
index 02ef0ffba5..3ee94157c2 100644
--- a/files/fr/web/api/globaleventhandlers/onresize/index.md
+++ b/files/fr/web/api/globaleventhandlers/onresize/index.md
@@ -7,38 +7,38 @@ tags:
 translation_of: Web/API/window.onresize
 translation_of_original: Web/API/Element.onresize
 ---
-<p>{{ ApiRef() }}</p>
+{{ ApiRef() }}
 
-<h3 id="R.C3.A9sum.C3.A9">Résumé</h3>
+### Résumé
 
-<p>La propriété <strong>onresize</strong> renvoie le code de gestion <code>onresize</code> de l'élément. Il sert également à définir le code devant s'exécuter lorsqu'un évènement de redimensionnement survient.</p>
+La propriété **onresize** renvoie le code de gestion `onresize` de l'élément. Il sert également à définir le code devant s'exécuter lorsqu'un évènement de redimensionnement survient.
 
-<p>Seul l'objet <var>window</var> possède un évènement <code>onresize</code>.</p>
+Seul l'objet _window_ possède un évènement `onresize`.
 
-<h3 id="Syntaxe">Syntaxe</h3>
+### Syntaxe
 
-<pre class="eval">// attribue une fonction anonyme à onresize
-window.onresize = function(){alert('Redimensionnement de la fenêtre')}
+    // attribue une fonction anonyme à onresize
+    window.onresize = function(){alert('Redimensionnement de la fenêtre')}
 
-// Attribue la référence d'une fonction à onresize
-function sayHi(){alert('Hi')}
+    // Attribue la référence d'une fonction à onresize
+    function sayHi(){alert('Hi')}
 
-window.onresize = sayHi;
+    window.onresize = sayHi;
 
-// Montre la valeur de window.onresize
-alert(window.onresize);
-</pre>
+    // Montre la valeur de window.onresize
+    alert(window.onresize);
 
-<p>Un évènement onresize employé avec des cadres sera lancé à chaque fois que le cadre sera redimensionné soit directement, soit comme résultant du redimensionnement de la fenêtre.</p>
+Un évènement onresize employé avec des cadres sera lancé à chaque fois que le cadre sera redimensionné soit directement, soit comme résultant du redimensionnement de la fenêtre.
 
-<h3 id="Exemple">Exemple</h3>
+### Exemple
 
-<pre class="brush: html">&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
- "http://www.w3.org/TR/html4/strict.dtd"&gt;
-&lt;html&gt;
-&lt;head&gt;
-&lt;title&gt;exemple avec onresize&lt;/title&gt;
-&lt;script type="text/javascript"&gt;
+```html
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+ "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+<title>exemple avec onresize</title>
+<script type="text/javascript">
 
 function sayHi(){
   alert('Hi');
@@ -46,20 +46,21 @@ function sayHi(){
 
 window.onresize = sayHi;
 
-&lt;/script&gt;
-&lt;/head&gt;
-&lt;body&gt;
-&lt;input type="button"
+</script>
+</head>
+<body>
+<input type="button"
  value="Cliquez ici pour voir window.onresize"
  onclick="alert(window.onresize);"
-&gt;
-&lt;/body&gt;
-&lt;/html&gt;</pre>
+>
+</body>
+</html>
+```
 
-<h3 id="Notes">Notes</h3>
+### Notes
 
-<p>Un attribut onresize peut être placé sur n'importe quel élément, mais seul l'objet <code>window</code> possède un évènement sur le redimensionnement. Le rédimensionnement d'autres éléments (par exemple, la modification de la largeur ou de la hauteur d'un élément img par un script) ne lancera aucun évènement de redimensionnement.</p>
+Un attribut onresize peut être placé sur n'importe quel élément, mais seul l'objet `window` possède un évènement sur le redimensionnement. Le rédimensionnement d'autres éléments (par exemple, la modification de la largeur ou de la hauteur d'un élément img par un script) ne lancera aucun évènement de redimensionnement.
 
-<h3 id="Sp.C3.A9cification">Spécification</h3>
+### Spécification
 
-<p>{{ DOM0() }}</p>
\ No newline at end of file
+{{ DOM0() }}
diff --git a/files/fr/web/api/globaleventhandlers/onscroll/index.md b/files/fr/web/api/globaleventhandlers/onscroll/index.md
index 7ae7447408..6c6146811e 100644
--- a/files/fr/web/api/globaleventhandlers/onscroll/index.md
+++ b/files/fr/web/api/globaleventhandlers/onscroll/index.md
@@ -5,13 +5,20 @@ tags:
   - Référence_du_DOM_Gecko
 translation_of: Web/API/GlobalEventHandlers/onscroll
 ---
-<p>{{ ApiRef() }}</p>
-<h3 id="R.C3.A9sum.C3.A9">Résumé</h3>
-<p>La propriété <b>onscroll</b> renvoie le gestionnaire d'évènement <code>scroll</code> pour l'élément courant.</p>
-<h3 id="Syntaxe">Syntaxe</h3>
-<pre class="eval"><i>code de gestion d'évènement</i> = element.onscroll;
-</pre>
-<h3 id="Notes">Notes</h3>
-<p>L'évènement <code>scroll</code> se déclenche lorsque l'utilisateur fait défiler le contenu d'un élément.</p>
-<h3 id="Sp.C3.A9cification">Spécification</h3>
-<p>DOM Level 0. Ne fait partie d'aucune spécification.</p>
\ No newline at end of file
+{{ ApiRef() }}
+
+### Résumé
+
+La propriété **onscroll** renvoie le gestionnaire d'évènement `scroll` pour l'élément courant.
+
+### Syntaxe
+
+    code de gestion d'évènement = element.onscroll;
+
+### Notes
+
+L'évènement `scroll` se déclenche lorsque l'utilisateur fait défiler le contenu d'un élément.
+
+### Spécification
+
+DOM Level 0. Ne fait partie d'aucune spécification.
diff --git a/files/fr/web/api/globaleventhandlers/onselect/index.md b/files/fr/web/api/globaleventhandlers/onselect/index.md
index fea6ba3dde..f2b8e48654 100644
--- a/files/fr/web/api/globaleventhandlers/onselect/index.md
+++ b/files/fr/web/api/globaleventhandlers/onselect/index.md
@@ -9,68 +9,58 @@ tags:
   - Reference
 translation_of: Web/API/GlobalEventHandlers/onselect
 ---
-<div>{{ ApiRef("HTML DOM") }}</div>
+{{ ApiRef("HTML DOM") }}
 
-<p>La propriété <strong><code>onselect</code></strong> du mixin {{domxref("GlobalEventHandlers")}} est un {{event("Event_handlers", "event handler")}} qui traite les événements <a href="/fr-FR/docs/Web/API/Element/select_event"><code>select</code></a>.</p>
+La propriété **`onselect`** du mixin {{domxref("GlobalEventHandlers")}} est un {{event("Event_handlers", "event handler")}} qui traite les événements [`select`](/fr-FR/docs/Web/API/Element/select_event).
 
-<p>L'événement <code>select</code> n'est déclenché qu'après que du texte à l'intérieur d'un <code>{{HtmlElement('input/text', '&lt;input type="text"&gt;')}}</code> ou d'un {{HtmlElement("textarea")}} a été sélectionné.</p>
+L'événement `select` n'est déclenché qu'après que du texte à l'intérieur d'un `{{HtmlElement('input/text', '&lt;input type="text"&gt;')}}` ou d'un {{HtmlElement("textarea")}} a été sélectionné.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>target</em>.onselect = <em>functionRef</em>;
-</pre>
+    target.onselect = functionRef;
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p><code>réfFonction</code> est un nom de fonction ou une <a href="/fr-FR/docs/Web/JavaScript/Reference/Operators/function">expression retournant une fonction</a>. La fonction reçoit un objet {{domxref("UIEvent")}} comme unique argument.</p>
+`réfFonction` est un nom de fonction ou une [expression retournant une fonction](/fr-FR/docs/Web/JavaScript/Reference/Operators/function). La fonction reçoit un objet {{domxref("UIEvent")}} comme unique argument.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Cet exemple enregistre le texte que vous sélectionnez à l'intérieur d'un élément {{HtmlElement("textarea")}}.</p>
+Cet exemple enregistre le texte que vous sélectionnez à l'intérieur d'un élément {{HtmlElement("textarea")}}.
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;textarea&gt;Essayez de sélectionner du texte dans cet élément.&lt;/textarea&gt;
-&lt;p id="log"&gt;&lt;/p&gt;</pre>
+```html
+<textarea>Essayez de sélectionner du texte dans cet élément.</textarea>
+<p id="log"></p>
+```
 
-<h3 id="JavaScript">JavaScript</h3>
+### JavaScript
 
-<pre class="brush: js">function enregistrerSelection(event) {
+```js
+function enregistrerSelection(event) {
   const log = document.getElementById('log');
   const selection = event.target.value.substring(event.target.selectionStart, event.target.selectionEnd);
   log.textContent = `Vous avez sélectionné : ${selection}`;
 }
 
 const textarea = document.querySelector('textarea');
-textarea.onselect = enregistrerSelection;</pre>
+textarea.onselect = enregistrerSelection;
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Examples")}}</p>
+{{EmbedLiveSample("Examples")}}
 
-<h2 id="Specification">Spécification</h2>
+## Spécification
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onselect','onselect')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                    | Statut                           | Commentaire |
+| ------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- |
+| {{SpecName('HTML WHATWG','webappapis.html#handler-onselect','onselect')}} | {{Spec2('HTML WHATWG')}} |             |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.GlobalEventHandlers.onselect")}}</p>
+{{Compat("api.GlobalEventHandlers.onselect")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>L'événement <a href="/fr-FR/docs/Web/API/Element/select_event"><code>select</code></a></li>
-</ul>
+- L'événement [`select`](/fr-FR/docs/Web/API/Element/select_event)
diff --git a/files/fr/web/api/globaleventhandlers/onwheel/index.md b/files/fr/web/api/globaleventhandlers/onwheel/index.md
index 00be813af4..2c85e2e382 100644
--- a/files/fr/web/api/globaleventhandlers/onwheel/index.md
+++ b/files/fr/web/api/globaleventhandlers/onwheel/index.md
@@ -10,38 +10,27 @@ tags:
 translation_of: Web/API/GlobalEventHandlers/onwheel
 original_slug: Web/API/Element/onwheel
 ---
-<p>{{ ApiRef("DOM") }}</p>
+{{ ApiRef("DOM") }}
 
-<p>La propriété <code>onwheel</code> renvoie le code du gestionnaire d'évènements <code>onwheel</code> de l'élément courrant.</p>
+La propriété `onwheel` renvoie le code du gestionnaire d'évènements `onwheel` de l'élément courrant.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">element.onwheel = function() { .. }</pre>
+```js
+element.onwheel = function() { .. }
+```
 
-<h2 id="Spécification">Spécification</h2>
+## Spécification
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onwheel','onwheel')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                    | Statut                           | Commentaire |
+| ------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- |
+| {{SpecName('HTML WHATWG','webappapis.html#handler-onwheel','onwheel')}} | {{Spec2('HTML WHATWG')}} |             |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.GlobalEventHandlers.onwheel")}}</p>
+{{Compat("api.GlobalEventHandlers.onwheel")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li><a href="/fr/docs/Web/API/Document/wheel_event">Document: <code>wheel</code> event</a></li>
-  <li><a href="/fr/docs/Web/API/Element/wheel_event">Element: <code>wheel</code> event</a></li>
-</ul>
\ No newline at end of file
+- [Document: `wheel` event](/fr/docs/Web/API/Document/wheel_event)
+- [Element: `wheel` event](/fr/docs/Web/API/Element/wheel_event)
diff --git a/files/fr/web/api/headers/index.md b/files/fr/web/api/headers/index.md
index bd5d8fd41b..88237327df 100644
--- a/files/fr/web/api/headers/index.md
+++ b/files/fr/web/api/headers/index.md
@@ -12,84 +12,72 @@ tags:
   - Reference
 translation_of: Web/API/Headers
 ---
-<div>{{APIRef("Fetch API")}}</div>
+{{APIRef("Fetch API")}}
 
-<p>L'interface <code>Headers</code> de l'API Fetch vous permet d'effectuer diverses actions sur les en-têtes de requête et de réponse HTTP. Ces actions incluent la récupération, la configuration, l’ajout et la suppression. Un objet <code>Headers</code> a une liste <code>Headers</code> associée qui est vide lors de l'initialisation et qui est constituée de zéro ou plusieurs paires de noms et de valeurs. Vous pouvez en ajouter via les méthodes comme{{domxref("Headers.append","append()")}} (see {{anch("Examples")}}.)  Dans toutes les méthodes de cette interface, les noms des <code>Headers</code> sont reliés à une séquence d'octets sensible à la case.</p>
+L'interface `Headers` de l'API Fetch vous permet d'effectuer diverses actions sur les en-têtes de requête et de réponse HTTP. Ces actions incluent la récupération, la configuration, l’ajout et la suppression. Un objet `Headers` a une liste `Headers` associée qui est vide lors de l'initialisation et qui est constituée de zéro ou plusieurs paires de noms et de valeurs. Vous pouvez en ajouter via les méthodes comme{{domxref("Headers.append","append()")}} (see {{anch("Examples")}}.)  Dans toutes les méthodes de cette interface, les noms des `Headers` sont reliés à une séquence d'octets sensible à la case.
 
-<p>Pour des raisons de sécurité, les <code>Headers</code> ci-dessous peuvent être controlés uniquement par l'User Agent : {{Glossary("Forbidden_header_name", "forbidden header names", 1)}}  et {{Glossary("Forbidden_response_header_name", "forbidden response header names", 1)}}.</p>
+Pour des raisons de sécurité, les `Headers` ci-dessous peuvent être controlés uniquement par l'User Agent : {{Glossary("Forbidden_header_name", "forbidden header names", 1)}}  et {{Glossary("Forbidden_response_header_name", "forbidden response header names", 1)}}.
 
-<p>Un objet <code>Headers</code> a aussi une garde associée, qui prend la valeur <code>immutable</code>, <code>request</code>, <code>request-no-cors</code>, <code>reponse</code>, or <code>none</code>. Cela affecte si les méthodes {{domxref("Headers.set","set()")}}, {{domxref("Headers.delete","delete()")}}, et {{domxref("Headers.append","append()")}}  vont modifier le <code>Header</code>. Pour plus d'informations voir {{Glossary("Guard")}}.</p>
+Un objet `Headers` a aussi une garde associée, qui prend la valeur `immutable`, `request`, `request-no-cors`, `reponse`, or `none`. Cela affecte si les méthodes {{domxref("Headers.set","set()")}}, {{domxref("Headers.delete","delete()")}}, et {{domxref("Headers.append","append()")}}  vont modifier le `Header`. Pour plus d'informations voir {{Glossary("Guard")}}.
 
-<p>Vous pouvez récuperer un objet <code>Header</code> via les propriétés {{domxref("Request.headers")}} et {{domxref("Response.headers")}} et créer un nouvel objet <code>Header</code> en utilisant le constructeur {{domxref("Headers.Headers()")}}.</p>
+Vous pouvez récuperer un objet `Header` via les propriétés {{domxref("Request.headers")}} et {{domxref("Response.headers")}} et créer un nouvel objet `Header` en utilisant le constructeur {{domxref("Headers.Headers()")}}.
 
-<p>Un objet implémentant <code>Headers</code> peut directement être utilisé dans une structure {{jsxref("Statements/for...of", "for...of")}}, au lieu de{{domxref('Headers.entries()', 'entries()')}}: <code>for (var p of myHeaders)</code> est équivalent à <code>for (var p of myHeaders.entries())</code>.</p>
+Un objet implémentant `Headers` peut directement être utilisé dans une structure {{jsxref("Statements/for...of", "for...of")}}, au lieu de{{domxref('Headers.entries()', 'entries()')}}: `for (var p of myHeaders)` est équivalent à `for (var p of myHeaders.entries())`.
 
-<div class="note">
-<p><strong>Note :</strong> Vous pouvez trouver plus d'informations à propos des Headers disponibles en lisant la page suivante : <a href="/en-US/docs/Web/HTTP/Headers">HTTP headers</a>.</p>
-</div>
+> **Note :** Vous pouvez trouver plus d'informations à propos des Headers disponibles en lisant la page suivante : [HTTP headers](/en-US/docs/Web/HTTP/Headers).
 
-<h2 id="Constructeur">Constructeur</h2>
+## Constructeur
 
-<dl>
- <dt>{{domxref("Headers.Headers()", "Headers()")}}</dt>
- <dd>Crée un nouvel objet <code>Headers</code>.</dd>
-</dl>
+- {{domxref("Headers.Headers()", "Headers()")}}
+  - : Crée un nouvel objet `Headers`.
 
-<h2 id="Méthodes">Méthodes</h2>
+## Méthodes
 
-<dl>
- <dt>{{domxref("Headers.append()")}}</dt>
- <dd>Ajoute une nouvelle valeur à un Header existant dans un objet <code>Headers</code>, ou ajoute le header s'il n'existe pas déjà.</dd>
- <dt>{{domxref("Headers.delete()")}}</dt>
- <dd>Supprime un header dans un objet <code>Headers</code>.</dd>
- <dt>{{domxref("Headers.entries()")}}</dt>
- <dd>Retourne un {{jsxref("Iteration_protocols","iterator")}} permettant d'acceder à toutes les paires clef/valeur contenue dans cet objet.</dd>
- <dt>{{domxref("Headers.forEach()")}}</dt>
- <dd>Exécute une fonction fournie une fois pour chaque élément du tableau.</dd>
- <dt>{{domxref("Headers.get()")}}</dt>
- <dd>Retourne une séquence {{domxref("ByteString")}} de toutes les valeurs d'un Header dans un objet <code>Headers</code> avec un nom donné.</dd>
- <dt>{{domxref("Headers.has()")}}</dt>
- <dd>Retourne un booléen indiquant si un objet <code>Headers</code> contient un certain header.</dd>
- <dt>{{domxref("Headers.keys()")}}</dt>
- <dd>Retourne un  {{jsxref("Iteration_protocols", "iterator")}} permettant de parcourir toutes les clefs des paires clef/valeur contenues dans cet objet.</dd>
- <dt>{{domxref("Headers.set()")}}</dt>
- <dd>Définti une nouvelle valeur pour un header existant dans un objet <code>Headers</code>, ou ajoute le header s'il n'existe pas déjà.</dd>
- <dt>{{domxref("Headers.values()")}}</dt>
- <dd>Retourne un {{jsxref("Iteration_protocols", "iterator")}} permettant de parcourir toutes les valeurs des paires clefs/valeur contenues dans cet objet.</dd>
-</dl>
+- {{domxref("Headers.append()")}}
+  - : Ajoute une nouvelle valeur à un Header existant dans un objet `Headers`, ou ajoute le header s'il n'existe pas déjà.
+- {{domxref("Headers.delete()")}}
+  - : Supprime un header dans un objet `Headers`.
+- {{domxref("Headers.entries()")}}
+  - : Retourne un {{jsxref("Iteration_protocols","iterator")}} permettant d'acceder à toutes les paires clef/valeur contenue dans cet objet.
+- {{domxref("Headers.forEach()")}}
+  - : Exécute une fonction fournie une fois pour chaque élément du tableau.
+- {{domxref("Headers.get()")}}
+  - : Retourne une séquence {{domxref("ByteString")}} de toutes les valeurs d'un Header dans un objet `Headers` avec un nom donné.
+- {{domxref("Headers.has()")}}
+  - : Retourne un booléen indiquant si un objet `Headers` contient un certain header.
+- {{domxref("Headers.keys()")}}
+  - : Retourne un  {{jsxref("Iteration_protocols", "iterator")}} permettant de parcourir toutes les clefs des paires clef/valeur contenues dans cet objet.
+- {{domxref("Headers.set()")}}
+  - : Définti une nouvelle valeur pour un header existant dans un objet `Headers`, ou ajoute le header s'il n'existe pas déjà.
+- {{domxref("Headers.values()")}}
+  - : Retourne un {{jsxref("Iteration_protocols", "iterator")}} permettant de parcourir toutes les valeurs des paires clefs/valeur contenues dans cet objet.
 
-<div class="note">
-<p><strong>Note :</strong> Pour être clair, la différence entre {{domxref("Headers.set()")}} et {{domxref("Headers.append()")}} est que si le header spécifié existe et accepte plusieurs valeurs,  {{domxref("Headers.set()")}} va remplacer la valeur existante par la nouvelle, tandis que {{domxref("Headers.append()")}} va ajouter la nouvelle valeur à la fin des autres valeurs. Voir leurs pages dédiées pour des exemples de code.</p>
-</div>
+> **Note :** Pour être clair, la différence entre {{domxref("Headers.set()")}} et {{domxref("Headers.append()")}} est que si le header spécifié existe et accepte plusieurs valeurs,  {{domxref("Headers.set()")}} va remplacer la valeur existante par la nouvelle, tandis que {{domxref("Headers.append()")}} va ajouter la nouvelle valeur à la fin des autres valeurs. Voir leurs pages dédiées pour des exemples de code.
 
-<div class="note">
-<p><strong>Note :</strong> Toutes les méthodes Headers vont retourner <code>TypeError</code> si vous essayez de passer dans une réfférenceun nom qui n'est pas un <a href="https://fetch.spec.whatwg.org/#concept-header-name">nom de Header HTTP valide</a>. Les opérations de mutation vont retourner <code>TypeError</code> si le header a un {{Glossary("Guard")}} immuable. Dans tous les autres cas, les erreurs sont silencieuses.</p>
-</div>
+> **Note :** Toutes les méthodes Headers vont retourner `TypeError` si vous essayez de passer dans une réfférenceun nom qui n'est pas un [nom de Header HTTP valide](https://fetch.spec.whatwg.org/#concept-header-name). Les opérations de mutation vont retourner `TypeError` si le header a un {{Glossary("Guard")}} immuable. Dans tous les autres cas, les erreurs sont silencieuses.
 
-<div class="note">
-<p><strong>Note :</strong> Lorsque les valeurs d'en-tête sont itérées, elles sont automatiquement triées par ordre lexicographique et les valeurs des noms d'en-tête en double sont combinées.</p>
-</div>
+> **Note :** Lorsque les valeurs d'en-tête sont itérées, elles sont automatiquement triées par ordre lexicographique et les valeurs des noms d'en-tête en double sont combinées.
 
-<h3 id="Méthodes_obsolètes">Méthodes obsolètes</h3>
+### Méthodes obsolètes
 
-<dl>
- <dt>{{domxref("Headers.getAll()")}}</dt>
- <dd>Utilisée pour retourner un array de toutes les valeurs d'un header dans un objet <code>Headers</code> avec un nom donné. Cette méthode est maintenant supprimée des standards, et {{domxref("Headers.get()")}} retourne maintenant toutes les valeurs d'un nom donné au lieu du premier seulement.</dd>
-</dl>
+- {{domxref("Headers.getAll()")}}
+  - : Utilisée pour retourner un array de toutes les valeurs d'un header dans un objet `Headers` avec un nom donné. Cette méthode est maintenant supprimée des standards, et {{domxref("Headers.get()")}} retourne maintenant toutes les valeurs d'un nom donné au lieu du premier seulement.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans le fragment de code suivant, nous créons un nouvel Header en utilisant le contructeur <code>Headers()</code>, ajoutons un nouvel header à ce dernier en utilisant <code>append()</code>, puis retournons la valeur du header en utilisant <code>get()</code> :</p>
+Dans le fragment de code suivant, nous créons un nouvel Header en utilisant le contructeur `Headers()`, ajoutons un nouvel header à ce dernier en utilisant `append()`, puis retournons la valeur du header en utilisant `get()` :
 
-<pre class="brush: js">var monHeader = new Headers();
+```js
+var monHeader = new Headers();
 
 monHeader.append('Content-Type', 'text/xml');
 monHeader.get('Content-Type') // doit retourner 'text/xml'
-</pre>
+```
 
-<p>La même chose peut être accomplie en passant par un array d'array  un littéral d'objet au constructeur.</p>
+La même chose peut être accomplie en passant par un array d'array  un littéral d'objet au constructeur.
 
-<pre class="brush: js">var mesHeaders = new Headers({
+```js
+var mesHeaders = new Headers({
     'Content-Type': 'text/xml'
 });
 
@@ -99,35 +87,20 @@ mesHeaders = new Headers([
 ]);
 
 mesHeaders.get('Content-Type') // doit retourner 'text/xml'
-</pre>
+```
 
-<h2 id="Caractéristiques">Caractéristiques</h2>
+## Caractéristiques
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Caractéristiques</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Fetch','#headers-class','Headers')}}</td>
-   <td>{{Spec2('Fetch')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+| Caractéristiques                                                 | Statut                   | Commentaires |
+| ---------------------------------------------------------------- | ------------------------ | ------------ |
+| {{SpecName('Fetch','#headers-class','Headers')}} | {{Spec2('Fetch')}} |              |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
+{{Compat("api.Headers")}}
 
+## Voir aussi
 
-<p>{{Compat("api.Headers")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/API/ServiceWorker_API">API ServiceWorker</a></li>
- <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
- <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
-</ul>
+- [API ServiceWorker](/en-US/docs/Web/API/ServiceWorker_API)
+- [HTTP access control (CORS)](/en-US/docs/Web/HTTP/Access_control_CORS)
+- [HTTP](/en-US/docs/Web/HTTP)
diff --git a/files/fr/web/api/history/index.md b/files/fr/web/api/history/index.md
index dcc99caefd..880dfa1138 100644
--- a/files/fr/web/api/history/index.md
+++ b/files/fr/web/api/history/index.md
@@ -6,82 +6,66 @@ tags:
   - HTML-DOM
 translation_of: Web/API/History
 ---
-<p>{{APIRef}}</p>
-
-<p>L'interface <strong><code>History</code></strong> permet de manipuler l'historique de navigation du navigateur, soit la liste des pages visitées au sein de l'onglet ou fenêtre ou cadre dans lequelle la page actuelle est ouverte.</p>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<p><em>L'interface <code>History</code></em><em> n'hérite d'aucune propriété.</em></p>
-
-<dl>
- <dt>{{domxref("History.length")}} {{readOnlyInline}}</dt>
- <dd>Retourne un <code>Integer</code> représentant le nombre d'élements dans l'historique de la session, y incluant la page actullement ouverte. Par exemple, pour une page chargée dans un nouvel onglet cette propriété retourne <code>1</code>.</dd>
- <dt>{{domxref("History.current")}} {{readOnlyInline}} {{ non-standard_inline() }} {{ obsolete_inline(26) }}</dt>
- <dd>Retourne un {{domxref("DOMString")}} de l‘URL active dans l'historique de navigation. Cette propriété n‘a jamais été rendu disponible au contenu web ni supporté par aucun autre navigateur. Utilisez plutôt {{domxref("Location.href")}}.</dd>
- <dt>{{domxref("History.next")}} {{readOnlyInline}} {{ non-standard_inline() }} {{ obsolete_inline(26) }}</dt>
- <dd>Retourne un {{domxref("DOMString")}} de l‘URL suivante dans l'historique de navigation. Cette propriété n‘a jamais été rendu disponible au contenu web ni supporté par aucun autre navigateur.</dd>
- <dt>{{domxref("History.previous")}} {{readOnlyInline}} {{ non-standard_inline() }} {{ obsolete_inline(26) }}</dt>
- <dd>Retourne un {{domxref("DOMString")}} de l‘URL précédente dans l'historique de navigation.</dd>
- <dt>{{domxref("History.state")}} {{readOnlyInline}} {{ gecko_minversion_inline("2.0") }}</dt>
- <dd>Retourne une value <code>any</code> représentant l'état le plus haut de l‘historique de navigation. C‘est une manière de vérifier cet état sans avoir à attendre un évenement {{event("popstate")}}.</dd>
-</dl>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<p><em>L‘interface <code>History</code></em> <em>n‘hérite d‘aucune méthode.</em></p>
-
-<dl>
- <dt>{{domxref("History.back()")}}</dt>
- <dd>Recule vers la page précédente dans l‘historique de navigation, soit la même action que lorsque l‘utilsateur clique le bouton Précédent du navigateur. Equivalent de <code>history.go(-1)</code>.
- <div class="note">
-   <p><strong>Note:</strong> Appeler cette méthode pour reculer plus loin que la première page de l'historique de navigation n‘a aucun effet et ne déclenche pas d'exception.</p>
-  </div>
- </dd>
- <dt>{{domxref("History.forward()")}}</dt>
- <dd>Avance vers la page suivante dans l‘historique de navigation, soit la même action que lorsque l‘utilsateur clique le bouton Suivant du navigateur. Equivalent de <code>history.go(1)</code>.
- <div class="note"><p><strong>Note:</strong> Appeler cette méthode pour avancer plus loin que la page la plus récente de l'historique de navigation n‘a aucun effet et ne déclenche pas d'exception.</p></div>
- </dd>
- <dt>{{domxref("History.go()")}}</dt>
- <dd>Charge une page dans l‘historique de navigation, identifiée par sa position relative à la page courante, par exemple <code>-1</code> pour la page précédente ou <code>1</code> pour la page suivante. Lorsque <code><em>integerDelta</em></code> sort du cadre de l‘historique (aka. -1 alors qu‘il n‘y a pas de page précédente), cette méthode n‘aura aucun effet et ne déclenchera pas d'exception. Appeler <code>go()</code> sans paramètres ou un paramètre autre qu'un <code>Integer</code> n‘a aucun effet (sauf par Internet Explorer, <a href="http://msdn.microsoft.com/en-us/library/ms536443(VS.85).aspx">qui supporte les URLs en String comme paramètre</a>).</dd>
- <dt>{{domxref("History.pushState()")}} {{ gecko_minversion_inline("2.0") }}</dt>
- <dd>Insère les paramètres fournis dans la pile de l‘historique de navigation avec un titre donné et, si fourni, l‘URL. Les données sont traitées comme opaque par le DOM; il est nécessaire de spécifier chaque objet JavaScript devant être sérialisé. Notez que Firefox ignore actuellement le paramètre titre; pour plus d'informations, voir <a href="/fr/docs/Web/Guide/DOM/Manipuler_historique_du_navigateur">Manipuler l'historique du navigateur</a>.
- <div class="note"><p><strong>Note:</strong> De Gecko 2.0 {{ geckoRelease("2.0") }} jusqu‘à Gecko 5.0 {{ geckoRelease("5.0") }}, l‘objet donné est sérialisé via JSON. A partir de Gecko 6.0 {{ geckoRelease("6.0") }}, cet objet est sérialisé via <a href="/en/DOM/The_structured_clone_algorithm">the structured clone algorithm</a>. Cela permet une plus large variété d‘objets pouvant être passé.</p></div>
- </dd>
- <dt>{{domxref("History.replaceState()")}} {{ gecko_minversion_inline("2.0") }}</dt>
- <dd>Modifie la page la plus récente dans la pile de l‘historique de navigation pour avoir les données, titre, et si spécifiée, URL. Les données sont traitées comme opaque par le DOM; il est nécessaire de spécifier chaque objet JavaScript devant être sérialisé. Notez que Firefox ignore actuellement le paramètre titre; pour plus d'informations, voir <a href="/fr/docs/Web/Guide/DOM/Manipuler_historique_du_navigateur">Manipuler l'historique du navigateur</a>.
- <div class="note"><p><strong>Note:</strong> De Gecko 2.0 {{ geckoRelease("2.0") }} jusqu‘à Gecko 5.0 {{ geckoRelease("5.0") }}, l‘objet donné est sérialisé via JSON. A partir de Gecko 6.0 {{ geckoRelease("6.0") }}, cet objet est sérialisé via <a href="/en/DOM/The_structured_clone_algorithm">the structured clone algorithm</a>. Cela permet une plus large variété d‘objets pouvant être passé.</p></div>
- </dd>
-</dl>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Etat</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "history.html#history-0", "History")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Conforme à {{SpecName("HTML5 W3C")}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', "browsers.html#the-history-interface", "History")}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.History")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>La propriété {{domxref("Window.history")}} retourne l'historique de navigation de la session en cours.</li>
-</ul>
+{{APIRef}}
+
+L'interface **`History`** permet de manipuler l'historique de navigation du navigateur, soit la liste des pages visitées au sein de l'onglet ou fenêtre ou cadre dans lequelle la page actuelle est ouverte.
+
+## Propriétés
+
+*L'interface `History`* *n'hérite d'aucune propriété.*
+
+- {{domxref("History.length")}} {{readOnlyInline}}
+  - : Retourne un `Integer` représentant le nombre d'élements dans l'historique de la session, y incluant la page actullement ouverte. Par exemple, pour une page chargée dans un nouvel onglet cette propriété retourne `1`.
+- {{domxref("History.current")}} {{readOnlyInline}} {{ non-standard_inline() }} {{ obsolete_inline(26) }}
+  - : Retourne un {{domxref("DOMString")}} de l‘URL active dans l'historique de navigation. Cette propriété n‘a jamais été rendu disponible au contenu web ni supporté par aucun autre navigateur. Utilisez plutôt {{domxref("Location.href")}}.
+- {{domxref("History.next")}} {{readOnlyInline}} {{ non-standard_inline() }} {{ obsolete_inline(26) }}
+  - : Retourne un {{domxref("DOMString")}} de l‘URL suivante dans l'historique de navigation. Cette propriété n‘a jamais été rendu disponible au contenu web ni supporté par aucun autre navigateur.
+- {{domxref("History.previous")}} {{readOnlyInline}} {{ non-standard_inline() }} {{ obsolete_inline(26) }}
+  - : Retourne un {{domxref("DOMString")}} de l‘URL précédente dans l'historique de navigation.
+- {{domxref("History.state")}} {{readOnlyInline}} {{ gecko_minversion_inline("2.0") }}
+  - : Retourne une value `any` représentant l'état le plus haut de l‘historique de navigation. C‘est une manière de vérifier cet état sans avoir à attendre un évenement {{event("popstate")}}.
+
+## Méthodes
+
+_L‘interface `History`_ _n‘hérite d‘aucune méthode._
+
+- {{domxref("History.back()")}}
+
+  - : Recule vers la page précédente dans l‘historique de navigation, soit la même action que lorsque l‘utilsateur clique le bouton Précédent du navigateur. Equivalent de `history.go(-1)`.
+
+    > **Note :** Appeler cette méthode pour reculer plus loin que la première page de l'historique de navigation n‘a aucun effet et ne déclenche pas d'exception.
+
+- {{domxref("History.forward()")}}
+
+  - : Avance vers la page suivante dans l‘historique de navigation, soit la même action que lorsque l‘utilsateur clique le bouton Suivant du navigateur. Equivalent de `history.go(1)`.
+
+    > **Note :** Appeler cette méthode pour avancer plus loin que la page la plus récente de l'historique de navigation n‘a aucun effet et ne déclenche pas d'exception.
+
+- {{domxref("History.go()")}}
+  - : Charge une page dans l‘historique de navigation, identifiée par sa position relative à la page courante, par exemple `-1` pour la page précédente ou `1` pour la page suivante. Lorsque `integerDelta` sort du cadre de l‘historique (aka. -1 alors qu‘il n‘y a pas de page précédente), cette méthode n‘aura aucun effet et ne déclenchera pas d'exception. Appeler `go()` sans paramètres ou un paramètre autre qu'un `Integer` n‘a aucun effet (sauf par Internet Explorer, [qui supporte les URLs en String comme paramètre](<http://msdn.microsoft.com/en-us/library/ms536443(VS.85).aspx>)).
+- {{domxref("History.pushState()")}} {{ gecko_minversion_inline("2.0") }}
+
+  - : Insère les paramètres fournis dans la pile de l‘historique de navigation avec un titre donné et, si fourni, l‘URL. Les données sont traitées comme opaque par le DOM; il est nécessaire de spécifier chaque objet JavaScript devant être sérialisé. Notez que Firefox ignore actuellement le paramètre titre; pour plus d'informations, voir [Manipuler l'historique du navigateur](/fr/docs/Web/Guide/DOM/Manipuler_historique_du_navigateur).
+
+    > **Note :** De Gecko 2.0 {{ geckoRelease("2.0") }} jusqu‘à Gecko 5.0 {{ geckoRelease("5.0") }}, l‘objet donné est sérialisé via JSON. A partir de Gecko 6.0 {{ geckoRelease("6.0") }}, cet objet est sérialisé via [the structured clone algorithm](/en/DOM/The_structured_clone_algorithm). Cela permet une plus large variété d‘objets pouvant être passé.
+
+- {{domxref("History.replaceState()")}} {{ gecko_minversion_inline("2.0") }}
+
+  - : Modifie la page la plus récente dans la pile de l‘historique de navigation pour avoir les données, titre, et si spécifiée, URL. Les données sont traitées comme opaque par le DOM; il est nécessaire de spécifier chaque objet JavaScript devant être sérialisé. Notez que Firefox ignore actuellement le paramètre titre; pour plus d'informations, voir [Manipuler l'historique du navigateur](/fr/docs/Web/Guide/DOM/Manipuler_historique_du_navigateur).
+
+    > **Note :** De Gecko 2.0 {{ geckoRelease("2.0") }} jusqu‘à Gecko 5.0 {{ geckoRelease("5.0") }}, l‘objet donné est sérialisé via JSON. A partir de Gecko 6.0 {{ geckoRelease("6.0") }}, cet objet est sérialisé via [the structured clone algorithm](/en/DOM/The_structured_clone_algorithm). Cela permet une plus large variété d‘objets pouvant être passé.
+
+## Spécifications
+
+| Spécification                                                                                        | Etat                             | Commentaire                                  |
+| ---------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------------------------------- |
+| {{SpecName('HTML WHATWG', "history.html#history-0", "History")}}                 | {{Spec2('HTML WHATWG')}} | Conforme à {{SpecName("HTML5 W3C")}}. |
+| {{SpecName('HTML5 W3C', "browsers.html#the-history-interface", "History")}} | {{Spec2('HTML5 W3C')}}     | Définition initiale.                         |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.History")}}
+
+## Voir aussi
+
+- La propriété {{domxref("Window.history")}} retourne l'historique de navigation de la session en cours.
diff --git a/files/fr/web/api/history/length/index.md b/files/fr/web/api/history/length/index.md
index bbed2b4976..b077915a06 100644
--- a/files/fr/web/api/history/length/index.md
+++ b/files/fr/web/api/history/length/index.md
@@ -3,45 +3,25 @@ title: History.length
 slug: Web/API/History/length
 translation_of: Web/API/History/length
 ---
-<div>{{APIRef("History API")}}</div>
+{{APIRef("History API")}}
 
-<p>La propriété en lecture seule <code><strong>History.length</strong></code> retourne un entier indiquant le nombre d'élément dans l'historique de session, incluant la page courante. Par exemple, pour une page dans un nouvel onglet, la propriété retournera <code>1</code>.</p>
+La propriété en lecture seule **`History.length`** retourne un entier indiquant le nombre d'élément dans l'historique de session, incluant la page courante. Par exemple, pour une page dans un nouvel onglet, la propriété retournera `1`.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">const <em>length</em> = history.length
-</pre>
+    const length = history.length
 
-<h2 id="Spécification">Spécification</h2>
+## Spécification
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statuts</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "history.html#dom-history-length", "History.length")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Pas de changement depuis {{SpecName("HTML5 W3C")}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', "browsers.html#dom-history-length", "History.length")}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                | Statuts                          | Commentaire                                                |
+| ------------------------------------------------------------------------------------------------------------ | -------------------------------- | ---------------------------------------------------------- |
+| {{SpecName('HTML WHATWG', "history.html#dom-history-length", "History.length")}} | {{Spec2('HTML WHATWG')}} | Pas de changement depuis {{SpecName("HTML5 W3C")}}. |
+| {{SpecName('HTML5 W3C', "browsers.html#dom-history-length", "History.length")}}     | {{Spec2('HTML5 W3C')}}     | Définition initiale.                                       |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
+{{Compat("api.History.length")}}
 
+## Voir aussi
 
-<p>{{Compat("api.History.length")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>L'interface {{domxref("History")}} auquel <code>length</code> se rattache.</li>
-</ul>
+- L'interface {{domxref("History")}} auquel `length` se rattache.
diff --git a/files/fr/web/api/history_api/example/index.md b/files/fr/web/api/history_api/example/index.md
index 82c3fa5b38..9cd519d263 100644
--- a/files/fr/web/api/history_api/example/index.md
+++ b/files/fr/web/api/history_api/example/index.md
@@ -4,143 +4,147 @@ slug: Web/API/History_API/Example
 translation_of: Web/API/History_API/Example
 original_slug: Web/Guide/DOM/Manipuler_historique_du_navigateur/Example
 ---
-<p>Voici un exemple de site web AJAX composé uniquement de trois pages (<em>page_un.php</em>, <em>page_deux.php</em> et <em>page_trois.php</em>). Pour tester cet exemple, merci de créer les fichiers suivants :</p>
+Voici un exemple de site web AJAX composé uniquement de trois pages (_page_un.php_, *page_deux.php* et *page_trois.php*). Pour tester cet exemple, merci de créer les fichiers suivants :
 
-<p><strong>page_un.php</strong>:</p>
+**page_un.php**:
 
-<pre class="brush: php">&lt;?php
+```php
+<?php
     $page_title = "Page un";
 
     $as_json = false;
-    if (isset($_GET["view_as"]) &amp;&amp; $_GET["view_as"] == "json") {
+    if (isset($_GET["view_as"]) && $_GET["view_as"] == "json") {
         $as_json = true;
         ob_start();
     } else {
-?&gt;
-&lt;!doctype html&gt;
-&lt;html&gt;
-&lt;head&gt;
-&lt;?php
+?>
+<!doctype html>
+<html>
+<head>
+<?php
         include "include/header.php";
-        echo "&lt;title&gt;" . $page_title . "&lt;/title&gt;";
-?&gt;
-&lt;/head&gt;
+        echo "<title>" . $page_title . "</title>";
+?>
+</head>
 
-&lt;body&gt;
+<body>
 
-&lt;?php include "include/before_content.php"; ?&gt;
+<?php include "include/before_content.php"; ?>
 
-&lt;p&gt;This paragraph is shown only when the navigation starts from &lt;strong&gt;first_page.php&lt;/strong&gt;.&lt;/p&gt;
+<p>This paragraph is shown only when the navigation starts from <strong>first_page.php</strong>.</p>
 
-&lt;div id="ajax-content"&gt;
-&lt;?php } ?&gt;
+<div id="ajax-content">
+<?php } ?>
 
-    &lt;p&gt;This is the content of &lt;strong&gt;first_page.php&lt;/strong&gt;.&lt;/p&gt;
+    <p>This is the content of <strong>first_page.php</strong>.</p>
 
-&lt;?php
+<?php
     if ($as_json) {
-        echo json_encode(array("page" =&gt; $page_title, "content" =&gt; ob_get_clean()));
+        echo json_encode(array("page" => $page_title, "content" => ob_get_clean()));
     } else {
-?&gt;
-&lt;/div&gt;
+?>
+</div>
 
-&lt;p&gt;This paragraph is shown only when the navigation starts from &lt;strong&gt;first_page.php&lt;/strong&gt;.&lt;/p&gt;
+<p>This paragraph is shown only when the navigation starts from <strong>first_page.php</strong>.</p>
 
-&lt;?php
+<?php
         include "include/after_content.php";
-        echo "&lt;/body&gt;\n&lt;/html&gt;";
+        echo "</body>\n</html>";
     }
-?&gt;
-</pre>
+?>
+```
 
-<p><strong>page_deux.php</strong>:</p>
+**page_deux.php**:
 
-<pre class="brush: php">&lt;?php
+```php
+<?php
     $page_title = "Page deux";
 
     $as_json = false;
-    if (isset($_GET["view_as"]) &amp;&amp; $_GET["view_as"] == "json") {
+    if (isset($_GET["view_as"]) && $_GET["view_as"] == "json") {
         $as_json = true;
         ob_start();
     } else {
-?&gt;
-&lt;!doctype html&gt;
-&lt;html&gt;
-&lt;head&gt;
-&lt;?php
+?>
+<!doctype html>
+<html>
+<head>
+<?php
         include "include/header.php";
-        echo "&lt;title&gt;" . $page_title . "&lt;/title&gt;";
-?&gt;
-&lt;/head&gt;
+        echo "<title>" . $page_title . "</title>";
+?>
+</head>
 
-&lt;body&gt;
+<body>
 
-&lt;?php include "include/before_content.php"; ?&gt;
+<?php include "include/before_content.php"; ?>
 
-&lt;p&gt;This paragraph is shown only when the navigation starts from &lt;strong&gt;second_page.php&lt;/strong&gt;.&lt;/p&gt;
+<p>This paragraph is shown only when the navigation starts from <strong>second_page.php</strong>.</p>
 
-&lt;div id="ajax-content"&gt;
-&lt;?php } ?&gt;
+<div id="ajax-content">
+<?php } ?>
 
-    &lt;p&gt;This is the content of &lt;strong&gt;second_page.php&lt;/strong&gt;.&lt;/p&gt;
+    <p>This is the content of <strong>second_page.php</strong>.</p>
 
-&lt;?php
+<?php
     if ($as_json) {
-        echo json_encode(array("page" =&gt; $page_title, "content" =&gt; ob_get_clean()));
+        echo json_encode(array("page" => $page_title, "content" => ob_get_clean()));
     } else {
-?&gt;
-&lt;/div&gt;
+?>
+</div>
 
-&lt;p&gt;This paragraph is shown only when the navigation starts from &lt;strong&gt;second_page.php&lt;/strong&gt;.&lt;/p&gt;
+<p>This paragraph is shown only when the navigation starts from <strong>second_page.php</strong>.</p>
 
-&lt;?php
+<?php
         include "include/after_content.php";
-        echo "&lt;/body&gt;\n&lt;/html&gt;";
+        echo "</body>\n</html>";
     }
-?&gt;
-</pre>
+?>
+```
 
-<p><strong>page_trois.php</strong>:</p>
+**page_trois.php**:
 
-<pre class="brush: php">&lt;?php
+```php
+<?php
     $page_title = "Page trois";
-    $page_content = "&lt;p&gt;Ceci est le contenu de la &lt;strong&gt;page_trois.php&lt;/strong&gt;. Ce contenu est stocké dans une variable PHP.&lt;/p&gt;";
+    $page_content = "<p>Ceci est le contenu de la <strong>page_trois.php</strong>. Ce contenu est stocké dans une variable PHP.</p>";
 
-    if (isset($_GET["view_as"]) &amp;&amp; $_GET["view_as"] == "json") {
-        echo json_encode(array("page" =&gt; $page_title, "content" =&gt; $page_content));
+    if (isset($_GET["view_as"]) && $_GET["view_as"] == "json") {
+        echo json_encode(array("page" => $page_title, "content" => $page_content));
     } else {
-?&gt;
-&lt;!doctype html&gt;
-&lt;html&gt;
-&lt;head&gt;
-&lt;?php
+?>
+<!doctype html>
+<html>
+<head>
+<?php
         include "include/header.php";
-        echo "&lt;title&gt;" . $page_title . "&lt;/title&gt;";
-?&gt;
-&lt;/head&gt;
+        echo "<title>" . $page_title . "</title>";
+?>
+</head>
 
-&lt;body&gt;
+<body>
 
-&lt;?php include "include/before_content.php"; ?&gt;
+<?php include "include/before_content.php"; ?>
 
-&lt;p&gt;This paragraph is shown only when the navigation starts from &lt;strong&gt;third_page.php&lt;/strong&gt;.&lt;/p&gt;
+<p>This paragraph is shown only when the navigation starts from <strong>third_page.php</strong>.</p>
 
-&lt;div id="ajax-content"&gt;
-&lt;?php echo $page_content; ?&gt;
-&lt;/div&gt;
+<div id="ajax-content">
+<?php echo $page_content; ?>
+</div>
 
-&lt;p&gt;This paragraph is shown only when the navigation starts from &lt;strong&gt;third_page.php&lt;/strong&gt;.&lt;/p&gt;
+<p>This paragraph is shown only when the navigation starts from <strong>third_page.php</strong>.</p>
 
-&lt;?php
+<?php
         include "include/after_content.php";
-        echo "&lt;/body&gt;\n&lt;/html&gt;";
+        echo "</body>\n</html>";
     }
-?&gt;
-</pre>
+?>
+```
 
-<p><strong>css/style.css</strong>:</p>
+**css/style.css**:
 
-<pre class="brush: css">#ajax-loader {
+```css
+#ajax-loader {
     position: fixed;
     display: table;
     top: 0;
@@ -149,7 +153,7 @@ original_slug: Web/Guide/DOM/Manipuler_historique_du_navigateur/Example
     height: 100%;
 }
 
-#ajax-loader &gt; div {
+#ajax-loader > div {
     display: table-cell;
     width: 100%;
     height: 100%;
@@ -158,32 +162,42 @@ original_slug: Web/Guide/DOM/Manipuler_historique_du_navigateur/Example
     background-color: #000000;
     opacity: 0.65;
 }
-</pre>
-<p><strong>include/after_content.php</strong>:</p>
-<pre class="brush: php">&lt;p&gt;Ceci est le pied-de-page. Il est commun à toutes les pages ajax.&lt;/p&gt;
-</pre>
-<p><strong>include/before_content.php</strong>:</p>
-<pre class="brush: php">&lt;p&gt;
-[ &lt;a class="ajax-nav" href="page_un.php"&gt;Premier exemple&lt;/a&gt;
-| &lt;a class="ajax-nav" href="page_deux.php"&gt;Second exemple&lt;/a&gt;
-| &lt;a class="ajax-nav" href="page_trois.php"&gt;Troisième exemple&lt;/a&gt;
-| &lt;a class="ajax-nav" href="inexistante.php"&gt;Page inexistante&lt;/a&gt; ]
-&lt;/p&gt;
-
-</pre>
-<p><strong>include/header.php</strong>:</p>
-<pre class="brush: html">&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
-&lt;script type="text/javascript" src="js/ajax_nav.js"&gt;&lt;/script&gt;
-&lt;link rel="stylesheet" href="css/style.css" /&gt;
-</pre>
-<p><strong>js/ajax_nav.js</strong>:</p>
-
-<pre class="brush: js">"use strict";
+```
+
+**include/after_content.php**:
+
+```php
+<p>Ceci est le pied-de-page. Il est commun à toutes les pages ajax.</p>
+```
+
+**include/before_content.php**:
+
+```php
+<p>
+[ <a class="ajax-nav" href="page_un.php">Premier exemple</a>
+| <a class="ajax-nav" href="page_deux.php">Second exemple</a>
+| <a class="ajax-nav" href="page_trois.php">Troisième exemple</a>
+| <a class="ajax-nav" href="inexistante.php">Page inexistante</a> ]
+</p>
+```
+
+**include/header.php**:
+
+```html
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<script type="text/javascript" src="js/ajax_nav.js"></script>
+<link rel="stylesheet" href="css/style.css" />
+```
+
+**js/ajax_nav.js**:
+
+```js
+"use strict";
 
 var ajaxRequest = new (function () {
 
     function closeReq () {
-        oLoadingBox.parentNode &amp;&amp; document.body.removeChild(oLoadingBox);
+        oLoadingBox.parentNode && document.body.removeChild(oLoadingBox);
         bIsLoading = false;
     }
 
@@ -243,7 +257,7 @@ var ajaxRequest = new (function () {
     }
 
     function filterURL (sURL, sViewMode) {
-        return sURL.replace(rSearch, "") + ("?" + sURL.replace(rHost, "&amp;").replace(rView, sViewMode ? "&amp;" + sViewKey + "=" + sViewMode : "").slice(1)).replace(rEndQstMark, "");
+        return sURL.replace(rSearch, "") + ("?" + sURL.replace(rHost, "&").replace(rView, sViewMode ? "&" + sViewKey + "=" + sViewMode : "").slice(1)).replace(rEndQstMark, "");
     }
 
     function getPage (sPage) {
@@ -278,7 +292,7 @@ var ajaxRequest = new (function () {
 
     function init () {
         oPageInfo.title = document.title;
-        for (var oLink, nIdx = 0, nLen = document.links.length; nIdx &lt; nLen; document.links[nIdx++].onclick = processLink);
+        for (var oLink, nIdx = 0, nLen = document.links.length; nIdx < nLen; document.links[nIdx++].onclick = processLink);
     }
 
     const
@@ -287,7 +301,7 @@ var ajaxRequest = new (function () {
         sTargetId = "ajax-content", sViewKey = "view_as", sAjaxClass = "ajax-nav",
 
         /* not customizable constants */
-        rSearch = /\?.*$/, rHost = /^[^\?]*\?*&amp;*/, rView = new RegExp("&amp;" + sViewKey + "\\=[^&amp;]*|&amp;*$", "i"), rEndQstMark = /\?$/,
+        rSearch = /\?.*$/, rHost = /^[^\?]*\?*&*/, rView = new RegExp("&" + sViewKey + "\\=[^&]*|&*$", "i"), rEndQstMark = /\?$/,
         oLoadingBox = document.createElement("div"), oCover = document.createElement("div"), oLoadingImg = new Image(),
         oPageInfo = {
             title: null,
@@ -383,15 +397,13 @@ var ajaxRequest = new (function () {
     this.rebuildLinks = init;
 
 })();
-</pre>
+```
 
-<div class="note">
-  <p><strong>Note :</strong> <a href="/en/JavaScript/Reference/Statements/const"><code>const</code></a> (instruction de constante) <strong>ne fait pas partie de ECMAScript 5</strong>. Il est supporté dans Firefox et Chrome (V8) et partiellement supporté dans Opera 9+ et Safari. <strong>Il n'est pas supporté dans Internet Explorer 6-9, ou dans la version de prévisualisation de Internet Explorer 10</strong>. <a href="/en/JavaScript/Reference/Statements/const"><code>const</code></a> sera défini par ECMAScript 6, mais avec une sémantique différente. Proches des variables déclarées avec l'instruction <a href="/en/JavaScript/Reference/Statements/let"><code>let</code></a>, les constantes déclarées avec <a href="/en/JavaScript/Reference/Statements/const"><code>const</code></a> seront limitées en portée. <strong>Nous ne l'avons utilisé que pour des raisons pédagogiques, si vous souhaitez une compatibilité maximale de ce code, merci de remplacer les références à </strong><strong><a href="/en/JavaScript/Reference/Statements/const"><code>const</code></a> par des instructions <a href="/en/JavaScript/Reference/Statements/var"><code>var</code></a>.</strong>
-  </p>
-</div>
-<p>Pour plus d'informations, voyez : <a href="/fr/docs/DOM/manipuler_lhistorique_du_navigateur">Manipuler l'historique du navigateur</a>.</p>
-<h2 id="Lire_également">Lire également</h2>
-<ul>
-  <li>{{ domxref("window.history") }}</li>
-  <li>{{ domxref("window.onpopstate") }}</li>
-</ul>
+> **Note :** [`const`](/en/JavaScript/Reference/Statements/const) (instruction de constante) **ne fait pas partie de ECMAScript 5**. Il est supporté dans Firefox et Chrome (V8) et partiellement supporté dans Opera 9+ et Safari. **Il n'est pas supporté dans Internet Explorer 6-9, ou dans la version de prévisualisation de Internet Explorer 10**. [`const`](/en/JavaScript/Reference/Statements/const) sera défini par ECMAScript 6, mais avec une sémantique différente. Proches des variables déclarées avec l'instruction [`let`](/en/JavaScript/Reference/Statements/let), les constantes déclarées avec [`const`](/en/JavaScript/Reference/Statements/const) seront limitées en portée. **Nous ne l'avons utilisé que pour des raisons pédagogiques, si vous souhaitez une compatibilité maximale de ce code, merci de remplacer les références à** **[`const`](/en/JavaScript/Reference/Statements/const) par des instructions [`var`](/en/JavaScript/Reference/Statements/var).**
+
+Pour plus d'informations, voyez : [Manipuler l'historique du navigateur](/fr/docs/DOM/manipuler_lhistorique_du_navigateur).
+
+## Lire également
+
+- {{ domxref("window.history") }}
+- {{ domxref("window.onpopstate") }}
diff --git a/files/fr/web/api/history_api/index.md b/files/fr/web/api/history_api/index.md
index b7d1b6a1e5..40ec87c023 100644
--- a/files/fr/web/api/history_api/index.md
+++ b/files/fr/web/api/history_api/index.md
@@ -8,181 +8,159 @@ tags:
 translation_of: Web/API/History_API
 original_slug: Web/Guide/DOM/Manipuler_historique_du_navigateur
 ---
-<p>L'objet DOM {{ domxref("window") }} fournit un accès à l'historique du navigateur via l'objet {{ domxref("window.history", "history") }}. Il expose un ensemble de méthodes et de propriétés qui permettent d'avancer et de reculer dans l'historique de l'utilisateur ainsi que -- à partir d'HTML5 -- manipuler le contenu de l'ensemble de l'historique.</p>
+L'objet DOM {{ domxref("window") }} fournit un accès à l'historique du navigateur via l'objet {{ domxref("window.history", "history") }}. Il expose un ensemble de méthodes et de propriétés qui permettent d'avancer et de reculer dans l'historique de l'utilisateur ainsi que -- à partir d'HTML5 -- manipuler le contenu de l'ensemble de l'historique.
 
-<h2 id="Se_déplacer_dans_l'historique">Se déplacer dans l'historique</h2>
+## Se déplacer dans l'historique
 
-<p>Avancer ou reculer dans l'historique de l'utilisateur est possible en utilisant les méthodes <code>back()</code>, <code>forward()</code> et <code>go()</code>.</p>
+Avancer ou reculer dans l'historique de l'utilisateur est possible en utilisant les méthodes `back()`, `forward()` et `go()`.
 
-<h3 id="Avancer_et_reculer">Avancer et reculer</h3>
+### Avancer et reculer
 
-<p>Pour reculer dans l'historique, il vous suffit de faire :</p>
+Pour reculer dans l'historique, il vous suffit de faire :
 
-<pre class="brush: js">window.history.back();
-</pre>
+```js
+window.history.back();
+```
 
-<p>Cela agira exactement comme si l'utilisateur cliquait sur le bouton Retour de la barre d'outils de son navigateur.</p>
+Cela agira exactement comme si l'utilisateur cliquait sur le bouton Retour de la barre d'outils de son navigateur.
 
-<p>De la même manière, il est possible d'avancer (comme si l'utilisateur cliquait sur le bouton Avancer) :</p>
+De la même manière, il est possible d'avancer (comme si l'utilisateur cliquait sur le bouton Avancer) :
 
-<pre class="brush: js">window.history.forward();
-</pre>
+```js
+window.history.forward();
+```
 
-<h3 id="Se_déplacer_à_un_élément_précis_de_l'historique">Se déplacer à un élément précis de l'historique</h3>
+### Se déplacer à un élément précis de l'historique
 
-<p>Vous pouvez utiliser la méthode <code>go()</code> pour charger une page spécifique de l'historique de la session, identifiée par sa position relative par rapport à la page en cours (la page courante étant, évidemment, d'index 0).</p>
+Vous pouvez utiliser la méthode `go()` pour charger une page spécifique de l'historique de la session, identifiée par sa position relative par rapport à la page en cours (la page courante étant, évidemment, d'index 0).
 
-<p>Pour reculer d'une page (l'équivalent d'un appel à <code>back()</code>):</p>
+Pour reculer d'une page (l'équivalent d'un appel à `back()`):
 
-<pre class="brush: js"><code>window.history.go(-1);</code>
-</pre>
+```js
+window.history.go(-1);
+```
 
-<p>Pour avancer d'une page, comme en appelant <code>forward()</code>:</p>
+Pour avancer d'une page, comme en appelant `forward()`:
 
-<pre class="brush: js"><code>window.history.go(1);</code>
-</pre>
+```js
+window.history.go(1);
+```
 
-<p>De la même manière, vous pouvez avancer de 2 pages en passant la valeur 2, et ainsi de suite.</p>
+De la même manière, vous pouvez avancer de 2 pages en passant la valeur 2, et ainsi de suite.
 
-<p>Vous pouvez déterminer le nombre de pages de l'historique en accédant à la valeur de la propriété length (<em>longeur</em>) :</p>
+Vous pouvez déterminer le nombre de pages de l'historique en accédant à la valeur de la propriété length (_longeur_) :
 
-<pre class="brush: js">var numberOfEntries = window.history.length;
-</pre>
+```js
+var numberOfEntries = window.history.length;
+```
 
-<div class="note">
-  <p><strong>Note :</strong> Internet Explorer supporte le passage d'une URL sous forme de chaîne de caractères comme paramètre de la méthode <code>go()</code>; ce comportement est non standard et non supporté par Gecko.</p>
-</div>
+> **Note :** Internet Explorer supporte le passage d'une URL sous forme de chaîne de caractères comme paramètre de la méthode `go()`; ce comportement est non standard et non supporté par Gecko.
 
-<h2 id="Ajouter_et_modifier_des_entrées_de_l'historique">Ajouter et modifier des entrées de l'historique</h2>
+## Ajouter et modifier des entrées de l'historique
 
-<p>{{ gecko_minversion_header("2") }}</p>
+{{ gecko_minversion_header("2") }}
 
-<p>HTML5 a introduit les méthodes <a href="/fr/docs/Web/Guide/DOM/Manipuler_historique_du_navigateur#La_méthode_pushState()">history.pushState()</a> et <a href="/fr/docs/Web/Guide/DOM/Manipuler_historique_du_navigateur#La_méthode_replaceState()">history.replaceState()</a>, qui permettent, respectivement, d'ajouter et de modifier des entrées de l'historique. Ces méthodes fonctionnent conjointement avec l'événement <a href="/fr/docs/Web/API/WindowEventHandlers/onpopstate">onpopstate</a>.</p>
+HTML5 a introduit les méthodes [history.pushState()](</fr/docs/Web/Guide/DOM/Manipuler_historique_du_navigateur#La_méthode_pushState()>) et [history.replaceState()](</fr/docs/Web/Guide/DOM/Manipuler_historique_du_navigateur#La_méthode_replaceState()>), qui permettent, respectivement, d'ajouter et de modifier des entrées de l'historique. Ces méthodes fonctionnent conjointement avec l'événement [onpopstate](/fr/docs/Web/API/WindowEventHandlers/onpopstate).
 
-<p>L'utilisation de <code>history.pushState()</code> change le référent créé habituellement dans l'en-tête HTTP pour les objets <a href="/en/DOM/XMLHttpRequest"><code>XMLHttpRequest</code></a>, chaque fois que son état a été changé. Le référent sera l'URL de la page dont l'objet window est <code>this</code> au moment de la création de l'objet <a href="/en/DOM/XMLHttpRequest"><code>XMLHttpRequest</code></a>.</p>
+L'utilisation de `history.pushState()` change le référent créé habituellement dans l'en-tête HTTP pour les objets [`XMLHttpRequest`](/en/DOM/XMLHttpRequest), chaque fois que son état a été changé. Le référent sera l'URL de la page dont l'objet window est `this` au moment de la création de l'objet [`XMLHttpRequest`](/en/DOM/XMLHttpRequest).
 
-<h3 id="Exemple_de_la_méthode_pushState()">Exemple de la méthode pushState()</h3>
+### Exemple de la méthode pushState()
 
-<p>Supposons que http://mozilla.org/foo.html exécute la séquence JavaScript suivante :</p>
+Supposons que http\://mozilla.org/foo.html exécute la séquence JavaScript suivante :
 
-<pre class="brush: js">var stateObj = { foo: "bar" };
+```js
+var stateObj = { foo: "bar" };
 history.pushState(stateObj, "page 2", "bar.html");
-</pre>
+```
 
-<p>Cela va provoquer l'apparition dans la barre de navigation de http://mozilla.org/bar.html, mais ne provoquera pas le chargement effectif de <code>bar.html</code> ni même le test d'existence de <code>bar.html</code>.</p>
+Cela va provoquer l'apparition dans la barre de navigation de http\://mozilla.org/bar.html, mais ne provoquera pas le chargement effectif de `bar.html` ni même le test d'existence de `bar.html`.
 
-<p>Supposons à présent que l'utilisateur accède à la page http://google.com, puis clique sur l'icône "Recul". La barre de navigation va alors afficher http://mozilla.org/bar.html, et si vous lisez l'<code>history.state</code>, vous obtiendrez le <code>stateObj</code>.  L'événement <code>popstate</code> ne sera pas lancé car la page a été rechargée. La page elle-même ressemblera à <code>bar.html</code>.</p>
+Supposons à présent que l'utilisateur accède à la page http\://google.com, puis clique sur l'icône "Recul". La barre de navigation va alors afficher http\://mozilla.org/bar.html, et si vous lisez l'`history.state`, vous obtiendrez le `stateObj`.  L'événement `popstate` ne sera pas lancé car la page a été rechargée. La page elle-même ressemblera à `bar.html`.
 
-<p>Si on clique à nouveau sur Recul, l'URL de la barre de navigation va se changer en http://mozilla.org/foo.html et le document va recevoir un autre événement <code>popstate</code>, qui comportera, cette fois, un état null. Dans ce cas aussi, revenir en arrière ne modifie pas le contenu du document par rapport à ce qu'il était à l'étape précédente, cela bien qu'il ait pu être mis à jour manuellement sur réception de l'événement <code>popstate</code>.</p>
+Si on clique à nouveau sur Recul, l'URL de la barre de navigation va se changer en http\://mozilla.org/foo.html et le document va recevoir un autre événement `popstate`, qui comportera, cette fois, un état null. Dans ce cas aussi, revenir en arrière ne modifie pas le contenu du document par rapport à ce qu'il était à l'étape précédente, cela bien qu'il ait pu être mis à jour manuellement sur réception de l'événement `popstate`.
 
-<h3 id="La_méthode_pushState()">La méthode pushState()</h3>
+### La méthode pushState()
 
-<p><code>La méthode pushState()</code> utilise trois paramètres : un objet état, un titre (qui est pour l'instant ignoré) et, éventuellement, une URL. Examinons chacun de ces paramètres en détail :</p>
+`La méthode pushState()` utilise trois paramètres : un objet état, un titre (qui est pour l'instant ignoré) et, éventuellement, une URL. Examinons chacun de ces paramètres en détail :
 
-<ul>
- <li>
-  <p><strong>state object</strong> (<em><strong>objet état</strong></em>) — L'objet état est un objet JavaScript qui est associé à une nouvelle entrée de l'historique par <code>pushState()</code>. Chaque fois qu'un utilisateur ouvre une nouvelle page, un événement <code>popstate</code> est émis et la propriété <code>state</code> de l'événement contient une copie de l'objet état de ce nouvel élément de l'historique.<br>
-   L'objet état peut être tout ce qui peut être sous forme de liste. Puisque Firefox sauvegarde les objets état sur le disque de l'utilisateur de façon à ce qu'ils puissent être rétablis après redémarrage du navigateur, le codage de l'objet état est limité à une taille de 640k octets. Si vous donnez à <code>pushState()</code> un objet état dont la représentation a une taille plus importante, la méthode génèrera une exception. Si vous avez un besoin d'espace plus important, il est conseillé d'utiliser <code>sessionStorage</code> et/ou <code>localStorage</code>.</p>
- </li>
- <li>
-  <p><strong>title</strong> (<strong><em>titre</em>)</strong> — Firefox, pour l'instant, ignore ce paramètre, bien qu'il puisse être utilisé plus tard. Afin de prévenir les changements futurs de cette méthode, il serait prudent de fournir ici, en paramètre, une chaîne vide. Vous pourriez aussi donner un titre court à l'état vers lequel vous vous dirigez.</p>
- </li>
- <li>
-  <p><strong>URL</strong> — L'URL de la nouvelle entrée de l'historique est donnée par ce paramètre. Il convient de préciser que le navigateur n'essaiera pas de charger la page pointée par cette URL après un appel à <code>pushState()</code>, mais il se peut qu'il tente de le faire plus tard, par exemple, lorsque l'utilisateur relancera son navigateur. Il n'est pas nécessaire que la nouvelle URL soit absolue ; si elle est relative, ce sera par rapport à l'URL courante. La nouvelle URL doit avoir la même origine (domaine) que l'URL courante ; dans le cas contraire, <code>pushState()</code> génèrera une exception. Ce paramètre est optionnel ; s'il n'est pas spécifié, sa valeur par défaut est l'URL de la page courante.</p>
- </li>
-</ul>
+- **state object** (**_objet état_**) — L'objet état est un objet JavaScript qui est associé à une nouvelle entrée de l'historique par `pushState()`. Chaque fois qu'un utilisateur ouvre une nouvelle page, un événement `popstate` est émis et la propriété `state` de l'événement contient une copie de l'objet état de ce nouvel élément de l'historique.
+  L'objet état peut être tout ce qui peut être sous forme de liste. Puisque Firefox sauvegarde les objets état sur le disque de l'utilisateur de façon à ce qu'ils puissent être rétablis après redémarrage du navigateur, le codage de l'objet état est limité à une taille de 640k octets. Si vous donnez à `pushState()` un objet état dont la représentation a une taille plus importante, la méthode génèrera une exception. Si vous avez un besoin d'espace plus important, il est conseillé d'utiliser `sessionStorage` et/ou `localStorage`.
+- **title** (**_titre_)** — Firefox, pour l'instant, ignore ce paramètre, bien qu'il puisse être utilisé plus tard. Afin de prévenir les changements futurs de cette méthode, il serait prudent de fournir ici, en paramètre, une chaîne vide. Vous pourriez aussi donner un titre court à l'état vers lequel vous vous dirigez.
+- **URL** — L'URL de la nouvelle entrée de l'historique est donnée par ce paramètre. Il convient de préciser que le navigateur n'essaiera pas de charger la page pointée par cette URL après un appel à `pushState()`, mais il se peut qu'il tente de le faire plus tard, par exemple, lorsque l'utilisateur relancera son navigateur. Il n'est pas nécessaire que la nouvelle URL soit absolue ; si elle est relative, ce sera par rapport à l'URL courante. La nouvelle URL doit avoir la même origine (domaine) que l'URL courante ; dans le cas contraire, `pushState()` génèrera une exception. Ce paramètre est optionnel ; s'il n'est pas spécifié, sa valeur par défaut est l'URL de la page courante.
 
-<div class="note">
-  <p><strong>Note :</strong> Dans Gecko 2.0 {{ geckoRelease("2.0") }} jusqu'à Gecko 5.0 {{ geckoRelease("5.0") }}, l'objet fourni est sérialisé en utilisant JSON. À partir de  Gecko 6.0 {{ geckoRelease("6.0") }}, l'objet est sérialisé à l'aide de<a href="/en/DOM/The_structured_clone_algorithm"> "structured clone algorithm"</a> qui autorise, en particulier, la sérialisation d'arbres récursifs cycliques. Cela permet de passer de façon sûre une plus grande diversité d'objets.</p>
-</div>
+> **Note :** Dans Gecko 2.0 {{ geckoRelease("2.0") }} jusqu'à Gecko 5.0 {{ geckoRelease("5.0") }}, l'objet fourni est sérialisé en utilisant JSON. À partir de  Gecko 6.0 {{ geckoRelease("6.0") }}, l'objet est sérialisé à l'aide de[ "structured clone algorithm"](/en/DOM/The_structured_clone_algorithm) qui autorise, en particulier, la sérialisation d'arbres récursifs cycliques. Cela permet de passer de façon sûre une plus grande diversité d'objets.
 
-<p>On peut assimiler l'appel à <code>pushState()</code> à l'affectation <code>window.location = "#foo"</code>, en cela que l'un comme l'autre auront pour effet de créer et déclencher une autre entrée de l'historique associée au document courant. Mais <code>pushState()</code> a quelques avantages :</p>
+On peut assimiler l'appel à `pushState()` à l'affectation `window.location = "#foo"`, en cela que l'un comme l'autre auront pour effet de créer et déclencher une autre entrée de l'historique associée au document courant. Mais `pushState()` a quelques avantages :
 
-<ul>
- <li>La nouvelle URL peut être quelconque pourvu qu'elle ait la même origine que l'URL courante. En revanche, affecter <code>window.location</code> vous maintient  au même {{ domxref("document") }} seulement si vous modifiez uniquement le hash.</li>
- <li>Vous n'êtes pas contraint de modifier l'URL si vous ne le voulez pas. Par contre, affecter <code>window.location = "#foo";</code> crée une nouvelle entrée de l'historique seulement si le hash courant n'est pas <code>#foo</code>.</li>
- <li>Vous pouvez associer des données quelconques avec votre nouvelle entrée de l'historique. Avec l'approche basée sur le hash, il est nécessaire de coder toute donnée pertinente en une chaîne courte.</li>
-</ul>
+- La nouvelle URL peut être quelconque pourvu qu'elle ait la même origine que l'URL courante. En revanche, affecter `window.location` vous maintient  au même {{ domxref("document") }} seulement si vous modifiez uniquement le hash.
+- Vous n'êtes pas contraint de modifier l'URL si vous ne le voulez pas. Par contre, affecter `window.location = "#foo";` crée une nouvelle entrée de l'historique seulement si le hash courant n'est pas `#foo`.
+- Vous pouvez associer des données quelconques avec votre nouvelle entrée de l'historique. Avec l'approche basée sur le hash, il est nécessaire de coder toute donnée pertinente en une chaîne courte.
 
-<p>Notez que <code>pushState()</code> n'entraîne jamais le déclenchement d'un événement <code>hashchange</code>, même si la nouvelle URL diffère de l'ancienne seulement par son hash.</p>
+Notez que `pushState()` n'entraîne jamais le déclenchement d'un événement `hashchange`, même si la nouvelle URL diffère de l'ancienne seulement par son hash.
 
-<p>Dans un document <a href="/fr/docs/Mozilla/Tech/XUL">XUL</a> elle crée l'élément XUL spécifié.</p>
+Dans un document [XUL](/fr/docs/Mozilla/Tech/XUL) elle crée l'élément XUL spécifié.
 
-<p>Dans d'autres documents, elle crée un élément avec l'URI d'espace de nom <code>null</code>. </p>
+Dans d'autres documents, elle crée un élément avec l'URI d'espace de nom `null`.
 
-<h3 id="La_méthode_replaceState()">La méthode replaceState()</h3>
+### La méthode replaceState()
 
-<p><code>history.replaceState()</code> fonctionne exactement comme <code>history.pushState()</code> hormis le fait que <code>replaceState()</code> modifie l'entrée courante de l'historique au lieu d'en créer une nouvelle. À noter que ceci n'empêche pas la création d'une nouvelle entrée dans l'historique global du navigateur.</p>
+`history.replaceState()` fonctionne exactement comme `history.pushState()` hormis le fait que `replaceState()` modifie l'entrée courante de l'historique au lieu d'en créer une nouvelle. À noter que ceci n'empêche pas la création d'une nouvelle entrée dans l'historique global du navigateur.
 
-<p><code>replaceState()</code> est particulièrement utile si vous désirez mettre à jour l'objet état ou l'URL de l'entrée courante de l'historique en réponse à une action de l'utilisateur.</p>
+`replaceState()` est particulièrement utile si vous désirez mettre à jour l'objet état ou l'URL de l'entrée courante de l'historique en réponse à une action de l'utilisateur.
 
-<div class="note">
-  <p><strong>Note :</strong> Dans Gecko 2.0 {{ geckoRelease("2.0") }} jusqu'à Gecko 5.0 {{ geckoRelease("5.0") }}, l'objet transmis est sérialisé avec JSON. À partir de  Gecko 6.0 {{ geckoRelease("6.0") }}, l'objet est sérialisé à l'aide de<a href="/en/DOM/The_structured_clone_algorithm"> "structured clone algorithm"</a> qui autorise, en particulier, la sérialisation d'arbres récursifs cycliques. Cela permet de passer de façon sûre une plus grande diversité d'objets.</p>
-</div>
+> **Note :** Dans Gecko 2.0 {{ geckoRelease("2.0") }} jusqu'à Gecko 5.0 {{ geckoRelease("5.0") }}, l'objet transmis est sérialisé avec JSON. À partir de  Gecko 6.0 {{ geckoRelease("6.0") }}, l'objet est sérialisé à l'aide de[ "structured clone algorithm"](/en/DOM/The_structured_clone_algorithm) qui autorise, en particulier, la sérialisation d'arbres récursifs cycliques. Cela permet de passer de façon sûre une plus grande diversité d'objets.
 
-<h3 id="Exemple_de_la_méthode_replaceState()">Exemple de la méthode replaceState()</h3>
+### Exemple de la méthode replaceState()
 
-<p>Supposons que <code>http://mozilla.org/foo.html</code> exécute le code JavaScript suivant :</p>
+Supposons que `http://mozilla.org/foo.html` exécute le code JavaScript suivant :
 
-<pre class="brush: js">var stateObj = { foo: "bar" };
-history.pushState(stateObj, "page 2", "bar.html");</pre>
+```js
+var stateObj = { foo: "bar" };
+history.pushState(stateObj, "page 2", "bar.html");
+```
 
-<p>L'explication des deux lignes ci-dessus peut être trouvée dans la section "<a href="#">Exemple de la méthode pushState()</a>". Supposons ensuite que http://mozilla.org/bar.html exécute le code JavaScript suivant :</p>
+L'explication des deux lignes ci-dessus peut être trouvée dans la section "[Exemple de la méthode pushState()](#)". Supposons ensuite que http\://mozilla.org/bar.html exécute le code JavaScript suivant :
 
-<pre class="brush: js">history.replaceState(stateObj, "page 3", "bar2.html");</pre>
+```js
+history.replaceState(stateObj, "page 3", "bar2.html");
+```
 
-<p>Cela entraînera l'affichage de la barre d'URL http://mozilla.org/bar2.html, mais le navigateur ne chargera pas <code>bar2.html</code> ou même vérifiera que <code>bar2.html</code> existe.</p>
+Cela entraînera l'affichage de la barre d'URL http\://mozilla.org/bar2.html, mais le navigateur ne chargera pas `bar2.html` ou même vérifiera que `bar2.html` existe.
 
-<p>Supposons maintenant que l'utilisateur accède à http://www.microsoft.com, puis clique sur le bouton Précédent. À ce stade, la barre d'URL affichera http://mozilla.org/bar2.html. Si l'utilisateur clique à nouveau sur Retour, la barre d'URL affichera http://mozilla.org/foo.html et contournera totalement bar.html.</p>
+Supposons maintenant que l'utilisateur accède à http\://www\.microsoft.com, puis clique sur le bouton Précédent. À ce stade, la barre d'URL affichera http\://mozilla.org/bar2.html. Si l'utilisateur clique à nouveau sur Retour, la barre d'URL affichera http\://mozilla.org/foo.html et contournera totalement bar.html.
 
-<h3 id="L'événement_popstate">L'événement popstate</h3>
+### L'événement popstate
 
-<p>Un événement <code>popstate</code> est envoyé à la fenêtre chaque fois que l'entrée active de l'historique change. Si l'entrée de l'historique activée a été créée par un appel à <code>replaceState</code>, la propriété <code>state </code>de l'événement <code>popstate</code> contient une copie de l'objet état  de l'entrée de l'historique.</p>
+Un événement `popstate` est envoyé à la fenêtre chaque fois que l'entrée active de l'historique change. Si l'entrée de l'historique activée a été créée par un appel à `replaceState`, la propriété `state `de l'événement `popstate` contient une copie de l'objet état  de l'entrée de l'historique.
 
-<p>Voir {{ domxref("window.onpopstate") }} pour un exemple d'utilisation.</p>
+Voir {{ domxref("window.onpopstate") }} pour un exemple d'utilisation.
 
-<h3 id="Lire_l'état_courant">Lire l'état courant</h3>
+### Lire l'état courant
 
-<p>Quand votre page est chargée, il se pourrait qu'elle ait un objet état non nul. Cela peut se produire, par exemple, si la page fixe un objet état (avec  <code>pushState()</code> ou <code>replaceState()</code>) et qu'ensuite l'utilisateur redémarre le navigateur.  Quand votre page sera rechargée, elle recevra l'événement  onload , mais pas l'événement popstate.  Néanmoins, si vous lisez la propriété history.state, vous récupèrerez l'objet état que vous auriez obtenu si un événement popstate avait été déclenché.</p>
+Quand votre page est chargée, il se pourrait qu'elle ait un objet état non nul. Cela peut se produire, par exemple, si la page fixe un objet état (avec  `pushState()` ou `replaceState()`) et qu'ensuite l'utilisateur redémarre le navigateur.  Quand votre page sera rechargée, elle recevra l'événement  onload , mais pas l'événement popstate.  Néanmoins, si vous lisez la propriété history.state, vous récupèrerez l'objet état que vous auriez obtenu si un événement popstate avait été déclenché.
 
-<p>Vous pouvez lire l'état de l'entrée courante de l'historique sans devoir attendre un événement <code>popstate</code> en utilisant la propriété <code>history.state</code> comme ceci :</p>
+Vous pouvez lire l'état de l'entrée courante de l'historique sans devoir attendre un événement `popstate` en utilisant la propriété `history.state` comme ceci :
 
-<pre class="brush: js">var currentState = history.state;
-</pre>
+```js
+var currentState = history.state;
+```
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Pour un exemple comple de site web AJAX, vous pouvez voir : <a href="/fr/docs/Web/Guide/DOM/Manipuler_historique_du_navigateur/Example">Exemple de navigation en Ajax</a>.</p>
+Pour un exemple comple de site web AJAX, vous pouvez voir : [Exemple de navigation en Ajax](/fr/docs/Web/Guide/DOM/Manipuler_historique_du_navigateur/Example).
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "browsers.html#history", "History")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Pas de changement de {{SpecName("HTML5 W3C")}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', "browsers.html#history", "History")}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                        | Statut                           | Commentaire                                            |
+| ------------------------------------------------------------------------------------ | -------------------------------- | ------------------------------------------------------ |
+| {{SpecName('HTML WHATWG', "browsers.html#history", "History")}} | {{Spec2('HTML WHATWG')}} | Pas de changement de {{SpecName("HTML5 W3C")}}. |
+| {{SpecName('HTML5 W3C', "browsers.html#history", "History")}}     | {{Spec2('HTML5 W3C')}}     | Définition initiale.                                   |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.History")}}</p>
+{{Compat("api.History")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{ domxref("window.history") }}</li>
- <li>{{ domxref("window.onpopstate") }}</li>
-</ul>
+- {{ domxref("window.history") }}
+- {{ domxref("window.onpopstate") }}
diff --git a/files/fr/web/api/html_drag_and_drop_api/drag_operations/index.md b/files/fr/web/api/html_drag_and_drop_api/drag_operations/index.md
index d6349a6d4b..81c6ed2503 100644
--- a/files/fr/web/api/html_drag_and_drop_api/drag_operations/index.md
+++ b/files/fr/web/api/html_drag_and_drop_api/drag_operations/index.md
@@ -4,294 +4,271 @@ slug: Web/API/HTML_Drag_and_Drop_API/Drag_operations
 translation_of: Web/API/HTML_Drag_and_Drop_API/Drag_operations
 original_slug: Web/API/API_HTML_Drag_and_Drop/Opérations_de_glissement
 ---
-<p>Ce qui suit décrit les étapes qui se déroulent lors d'un Glisser Déposer.</p>
+Ce qui suit décrit les étapes qui se déroulent lors d'un Glisser Déposer.
 
-<div class="note">
-  <p><strong>Note :</strong> Les opérations de glisser décrits dans ce document utilisent l'interface {{domxref("DataTransfer")}}. Ce document n'utilise pas l'interface {{domxref("DataTransferItem")}} ni l'interface {{domxref("DataTransferItemList")}}.</p>
-</div>
+> **Note :** Les opérations de glisser décrits dans ce document utilisent l'interface {{domxref("DataTransfer")}}. Ce document n'utilise pas l'interface {{domxref("DataTransferItem")}} ni l'interface {{domxref("DataTransferItemList")}}.
 
-<h2 id="draggableattribute">L'attribut draggable</h2>
+## L'attribut draggable
 
-<p>Dans une page Web, certains cas nécessitent l'usage du Glisser Déposer. Il peut servir pour des sélections de texte, d'images ou de liens. Lorsqu'une image ou un lien sont glissés, l'URL de l'image ou du lien est défini comme données du glissement, et le Glisser commence. Pour d'autres éléments, il peut s'agir d'une sélection effectuée qui servira au glissement. Pour voir cet effet, sélectionnez une zone dans une page Web, puis cliquez dedans en maintenant le bouton de la souris et glissez la sélection. Un rendu translucide de la sélection apparaitra en suivant le pointeur de la souris. Il s'agit toutefois du comportement par défaut du glissement si aucun scrutateur n'a été défini pour traiter les données.</p>
+Dans une page Web, certains cas nécessitent l'usage du Glisser Déposer. Il peut servir pour des sélections de texte, d'images ou de liens. Lorsqu'une image ou un lien sont glissés, l'URL de l'image ou du lien est défini comme données du glissement, et le Glisser commence. Pour d'autres éléments, il peut s'agir d'une sélection effectuée qui servira au glissement. Pour voir cet effet, sélectionnez une zone dans une page Web, puis cliquez dedans en maintenant le bouton de la souris et glissez la sélection. Un rendu translucide de la sélection apparaitra en suivant le pointeur de la souris. Il s'agit toutefois du comportement par défaut du glissement si aucun scrutateur n'a été défini pour traiter les données.
 
-<p>En HTML, excepté le comportement par défaut des images, des liens et des sélections, aucun autre élément ne peut être glissé. Tous les éléments XUL peuvent être glissés.</p>
+En HTML, excepté le comportement par défaut des images, des liens et des sélections, aucun autre élément ne peut être glissé. Tous les éléments XUL peuvent être glissés.
 
-<p>Pour rendre un autre élément HTML glissable, deux choses doivent être faites :</p>
+Pour rendre un autre élément HTML glissable, deux choses doivent être faites :
 
-<ul>
- <li>Définissez l'attribut <code>{{htmlattrxref("draggable")}}</code> à <code>true</code> sur l'élément que vous voulez rendre glissable.</li>
- <li>Ajoutez un scrutateur sur l'événement <code>{{event("dragstart")}}</code> et définissez les données du glissement dans ce scrutateur.</li>
- <li>{{domxref("DataTransfer.setData","Définir la donnée de glissement")}} au sein du scrutateur ajouté précédemment.</li>
-</ul>
+- Définissez l'attribut `{{htmlattrxref("draggable")}}` à `true` sur l'élément que vous voulez rendre glissable.
+- Ajoutez un scrutateur sur l'événement `{{event("dragstart")}}` et définissez les données du glissement dans ce scrutateur.
+- {{domxref("DataTransfer.setData","Définir la donnée de glissement")}} au sein du scrutateur ajouté précédemment.
 
-<p>Voici un exemple qui permet à une section de contenu d'être glissée :</p>
+Voici un exemple qui permet à une section de contenu d'être glissée :
 
-<pre>&lt;div draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'Ce texte peut être glissé')"&gt;
-  Ce texte &lt;strong&gt;peut&lt;/strong&gt; être glissé.
-&lt;/div&gt;
-</pre>
+    <div draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'Ce texte peut être glissé')">
+      Ce texte <strong>peut</strong> être glissé.
+    </div>
 
-<p>L'attribut <code>{{htmlattrxref("draggable")}}</code> est défini à true, ce qui rend l'élément glissant. Si cet attribut est omis ou défini à false, l'élément ne serait pas glissant et le texte serait alors simplement sélectionné. Cet attribut peut être placé sur n'importe quel élément, y compris des images et des liens. Toutefois, pour les deux derniers, la valeur par défaut est true, donc vous n'utiliserez l'attribut <code>{{htmlattrxref("draggable")}}</code> <code> </code>que pour le définir à <code>false</code> pour interdire le glissement de ces éléments.</p>
+L'attribut `{{htmlattrxref("draggable")}}` est défini à true, ce qui rend l'élément glissant. Si cet attribut est omis ou défini à false, l'élément ne serait pas glissant et le texte serait alors simplement sélectionné. Cet attribut peut être placé sur n'importe quel élément, y compris des images et des liens. Toutefois, pour les deux derniers, la valeur par défaut est true, donc vous n'utiliserez l'attribut `{{htmlattrxref("draggable")}}` ``que pour le définir à `false` pour interdire le glissement de ces éléments.
 
-<p>Notez que lorsqu'un élément est rendu glissable, le texte ou les autres éléments qu'il contient ne peuvent plus être sélectionné de manière classique en cliquant et déplaçant la souris. Au lieu de cela, l'utilisateur doit maintenir la touche <kbd>Alt</kbd> appuyée pour sélectionner le texte avec la souris, ou bien utilisez le clavier.</p>
+Notez que lorsqu'un élément est rendu glissable, le texte ou les autres éléments qu'il contient ne peuvent plus être sélectionné de manière classique en cliquant et déplaçant la souris. Au lieu de cela, l'utilisateur doit maintenir la touche <kbd>Alt</kbd> appuyée pour sélectionner le texte avec la souris, ou bien utilisez le clavier.
 
-<p>Pour des éléments XUL, il n'est pas nécessaire d'utiliser l'attribut <code>{{htmlattrxref("draggable")}}</code>, car tous les éléments XUL sont glissables.</p>
+Pour des éléments XUL, il n'est pas nécessaire d'utiliser l'attribut `{{htmlattrxref("draggable")}}`, car tous les éléments XUL sont glissables.
 
-<pre>&lt;button label="Glisse moi" ondragstart="event.dataTransfer.setData('text/plain', 'Bouton à glisser');"&gt;
-</pre>
+    <button label="Glisse moi" ondragstart="event.dataTransfer.setData('text/plain', 'Bouton à glisser');">
 
-<p> </p>
 
-<h2 id="dragstart">Démarrer une opération de glissement</h2>
 
-<p>Dans cet exemple, un scrutateur est ajouté à l'événement dragstart en utilisant l'attribut <code>ondragstart</code>.</p>
+## Démarrer une opération de glissement
 
-<pre>&lt;div draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'Ce texte peut être glissé')"&gt;
-  Ce texte &lt;strong&gt;peut&lt;/strong&gt; être glissé.
-&lt;/div&gt;
-</pre>
+Dans cet exemple, un scrutateur est ajouté à l'événement dragstart en utilisant l'attribut `ondragstart`.
 
-<p>Lorsqu'un utilisateur commence un glissement, l'événement dragstart est déclenché. Dans cet exemple, le scrutateur dragstart a été ajouté à l'élément à déplacer lui-même. Vous pouvez toutefois mettre le scrutateur sur un ancètre plus élevé car l'événement drag diffuse comme le font les autres événements. À l'intérieur de l'événement dragstart, vous devez spécifier la donnée de glissement, l'image filligrane et les effets du glissement tels que décrits ci-dessous. Cependant, seule la donnée de glissement est nécessaire ; l'image et les effets du glissement par défaut sont suffisants pour la majorité des cas.</p>
+    <div draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'Ce texte peut être glissé')">
+      Ce texte <strong>peut</strong> être glissé.
+    </div>
 
-<h2 id="dragdata">Donnée de glissement</h2>
+Lorsqu'un utilisateur commence un glissement, l'événement dragstart est déclenché. Dans cet exemple, le scrutateur dragstart a été ajouté à l'élément à déplacer lui-même. Vous pouvez toutefois mettre le scrutateur sur un ancètre plus élevé car l'événement drag diffuse comme le font les autres événements. À l'intérieur de l'événement dragstart, vous devez spécifier la donnée de glissement, l'image filligrane et les effets du glissement tels que décrits ci-dessous. Cependant, seule la donnée de glissement est nécessaire ; l'image et les effets du glissement par défaut sont suffisants pour la majorité des cas.
 
-<p>Tous les événements de glissement ont une propriété appelée <a href="/Fr/GlisserD%C3%A9poser/DataTransfer">dataTransfer</a> utilisée pour contenir la donnée de glissement.</p>
+## Donnée de glissement
 
-<p>Lorsqu'un glissement a lieu, une donnée doit être associée au glissement pour identifier ce qui est en train de glisser. Par exemple, lors du glissement d'un texte sélectionné dans un champs de texte, la donnée associée au glissement est le texte lui-même. De même, lors du glissement d'un lien, la donnée associée est l'URL du lien.</p>
+Tous les événements de glissement ont une propriété appelée [dataTransfer](/Fr/GlisserD%C3%A9poser/DataTransfer) utilisée pour contenir la donnée de glissement.
 
-<p>La donnée de glissement contient deux informations : son type ou format et sa valeur. Le format est une chaîne de caractère (telle que <a href="/Fr/GlisserD%C3%A9poser/Types_de_glissement_recommand%C3%A9s#text">text/plain</a> pour un texte), et la valeur est un texte. Lorsqu'un glissement démarre, vous devez lui ajouter en fournissant un type et la donnée. Dans les scrutateurs des événements <code>dragenter</code> et <code>dragover</code> au cours d'un glissement, vous pouvez vérifier les types de données et indiquer si un dépôt est permis ou non. Par exemple, une cible de dépôt qui accepte que des liens testera les types lien <a href="/Fr/GlisserD%C3%A9poser/Types_de_glissement_recommand%C3%A9s#link">text/uri-list</a>. Pendant un évément de dépôt, un scrutateur récupèrera la donnée glissée et l'insèrera dans la zone de dépôt.</p>
+Lorsqu'un glissement a lieu, une donnée doit être associée au glissement pour identifier ce qui est en train de glisser. Par exemple, lors du glissement d'un texte sélectionné dans un champs de texte, la donnée associée au glissement est le texte lui-même. De même, lors du glissement d'un lien, la donnée associée est l'URL du lien.
 
-<p>Les types MIME habituels sont <a href="/Fr/GlisserD%C3%A9poser/Types_de_glissement_recommand%C3%A9s#text">text/plain</a> ou <a href="/Fr/GlisserD%C3%A9poser/Types_de_glissement_recommand%C3%A9s#image">image/jpeg</a>, mais vous pouvez créer vos propres types. La liste des types les plus utilisés est disponible sur <a href="/Fr/GlisserD%C3%A9poser/Types_de_glissement">cette page</a>.</p>
+La donnée de glissement contient deux informations : son type ou format et sa valeur. Le format est une chaîne de caractère (telle que [text/plain](/Fr/GlisserD%C3%A9poser/Types_de_glissement_recommand%C3%A9s#text) pour un texte), et la valeur est un texte. Lorsqu'un glissement démarre, vous devez lui ajouter en fournissant un type et la donnée. Dans les scrutateurs des événements `dragenter` et `dragover` au cours d'un glissement, vous pouvez vérifier les types de données et indiquer si un dépôt est permis ou non. Par exemple, une cible de dépôt qui accepte que des liens testera les types lien [text/uri-list](/Fr/GlisserD%C3%A9poser/Types_de_glissement_recommand%C3%A9s#link). Pendant un évément de dépôt, un scrutateur récupèrera la donnée glissée et l'insèrera dans la zone de dépôt.
 
-<p>Un glissement peut fournir une donnée dans différents types. Ceci permet à une donnée d'être disponible dans des types spécifiques, souvent personnalisés, toujours en fournissant un format pour les cibles ne supportant pas ces types spécifiques. Habituellement, il s'agit toujours d'une version textuelle de type <a href="/Fr/GlisserD%C3%A9poser/Types_de_glissement_recommand%C3%A9s#text">text/plain</a>. La donnée n'en sera qu'une représentation sous la forme d'un texte.</p>
+Les types MIME habituels sont [text/plain](/Fr/GlisserD%C3%A9poser/Types_de_glissement_recommand%C3%A9s#text) ou [image/jpeg](/Fr/GlisserD%C3%A9poser/Types_de_glissement_recommand%C3%A9s#image), mais vous pouvez créer vos propres types. La liste des types les plus utilisés est disponible sur [cette page](/Fr/GlisserD%C3%A9poser/Types_de_glissement).
 
-<p>Pour définir une donnée dans un dataTransfer, utilisez la méthode <a href="/Fr/GlisserD%C3%A9poser/DataTransfer#setData">setData</a>. Elle prend deux arguments qui sont le type de la donnée et sa valeur. Par exemple :</p>
+Un glissement peut fournir une donnée dans différents types. Ceci permet à une donnée d'être disponible dans des types spécifiques, souvent personnalisés, toujours en fournissant un format pour les cibles ne supportant pas ces types spécifiques. Habituellement, il s'agit toujours d'une version textuelle de type [text/plain](/Fr/GlisserD%C3%A9poser/Types_de_glissement_recommand%C3%A9s#text). La donnée n'en sera qu'une représentation sous la forme d'un texte.
 
-<pre>event.dataTransfer.setData("text/plain", "Texte à glisser");
-</pre>
+Pour définir une donnée dans un dataTransfer, utilisez la méthode [setData](/Fr/GlisserD%C3%A9poser/DataTransfer#setData). Elle prend deux arguments qui sont le type de la donnée et sa valeur. Par exemple :
 
-<p>Dans ce cas, la valeur de la donnée est "Texte à glisser" et son format est <a href="/Fr/GlisserD%C3%A9poser/Types_de_glissement_recommand%C3%A9s#text">text/plain</a>.</p>
+    event.dataTransfer.setData("text/plain", "Texte à glisser");
 
-<p>Vous pouvez fournir une donnée dans de multiples formats. Il suffit d'appeler la méthode <a href="/Fr/GlisserD%C3%A9poser/DataTransfer#setData">setData</a> plusieurs fois avec chacun des formats. Vous devez l'appeler dans l'ordre du format le plus spécifique au moins spécifique.</p>
+Dans ce cas, la valeur de la donnée est "Texte à glisser" et son format est [text/plain](/Fr/GlisserD%C3%A9poser/Types_de_glissement_recommand%C3%A9s#text).
 
-<pre>var dt = event.dataTransfer;
-dt.setData("application/x-bookmark", bookmarkString);
-dt.setData("text/uri-list", "http://www.mozilla.org");
-dt.setData("text/plain", "http://www.mozilla.org");
-</pre>
+Vous pouvez fournir une donnée dans de multiples formats. Il suffit d'appeler la méthode [setData](/Fr/GlisserD%C3%A9poser/DataTransfer#setData) plusieurs fois avec chacun des formats. Vous devez l'appeler dans l'ordre du format le plus spécifique au moins spécifique.
 
-<p>Ici, une donnée est ajoutée avec trois types différents. Le premier type 'application/x-bookmark' est un type personnalisé. Toutes les applications ne vont pas supporter ce type, mais vous pouvez l'utiliser pour le glissement entre des zones d'une même application ou d'un même site. En fournissant la donnée avec d'autres types, vous la rendez disponible à moindre échelle pour d'autres applications. Le type 'application/x-bookmark' fournira ainsi plus de détail à l'application qu'avec les autres types qui ne seraient que de simples liens ou textes.</p>
+    var dt = event.dataTransfer;
+    dt.setData("application/x-bookmark", bookmarkString);
+    dt.setData("text/uri-list", "http://www.mozilla.org");
+    dt.setData("text/plain", "http://www.mozilla.org");
 
-<p>Notez que cet exemple, <a href="/Fr/GlisserD%C3%A9poser/Types_de_glissement_recommand%C3%A9s#link">text/uri-list</a> et <a href="/Fr/GlisserD%C3%A9poser/Types_de_glissement_recommand%C3%A9s#text">text/plain</a> contiennent la même donnée. C'est souvent le cas, mais pas forcément nécessaire.</p>
+Ici, une donnée est ajoutée avec trois types différents. Le premier type 'application/x-bookmark' est un type personnalisé. Toutes les applications ne vont pas supporter ce type, mais vous pouvez l'utiliser pour le glissement entre des zones d'une même application ou d'un même site. En fournissant la donnée avec d'autres types, vous la rendez disponible à moindre échelle pour d'autres applications. Le type 'application/x-bookmark' fournira ainsi plus de détail à l'application qu'avec les autres types qui ne seraient que de simples liens ou textes.
 
-<p>Si vous essayez d'ajouter une donnée deux fois avec le même format, alors la nouvelle donnée remplacera l'ancienne, mais à la même position que l'ancienne dans la liste.</p>
+Notez que cet exemple, [text/uri-list](/Fr/GlisserD%C3%A9poser/Types_de_glissement_recommand%C3%A9s#link) et [text/plain](/Fr/GlisserD%C3%A9poser/Types_de_glissement_recommand%C3%A9s#text) contiennent la même donnée. C'est souvent le cas, mais pas forcément nécessaire.
 
-<p>Vous pouvez effacer la donnée en utilisant la méthode <a href="/Fr/GlisserD%C3%A9poser/DataTransfer#clearData">clearData</a>, avec un seul argument qui est le type de la donnée à effacer.</p>
+Si vous essayez d'ajouter une donnée deux fois avec le même format, alors la nouvelle donnée remplacera l'ancienne, mais à la même position que l'ancienne dans la liste.
 
-<pre>event.dataTransfer.clearData("text/uri-list");
-</pre>
+Vous pouvez effacer la donnée en utilisant la méthode [clearData](/Fr/GlisserD%C3%A9poser/DataTransfer#clearData), avec un seul argument qui est le type de la donnée à effacer.
 
-<p>L'argument de type de la méthode <a href="/Fr/GlisserD%C3%A9poser/DataTransfer#clearData">clearData</a> est optionnel. S'il n'est pas précisé, la donnée associée à tous les types est effacée. Et si aucune donnée à glisser n'est ajoutée, alors l'opération de glissement ne s'effectue pas.</p>
+    event.dataTransfer.clearData("text/uri-list");
 
-<h2 id="dragfeedback">Définir l'image filigrane d'un glissement</h2>
+L'argument de type de la méthode [clearData](/Fr/GlisserD%C3%A9poser/DataTransfer#clearData) est optionnel. S'il n'est pas précisé, la donnée associée à tous les types est effacée. Et si aucune donnée à glisser n'est ajoutée, alors l'opération de glissement ne s'effectue pas.
 
-<p>Lorsqu'un glissement a lieu, une image translucide est générée à partir de l'origine du glissement (l'élément d'origine ayant déclenché l'événement), et cette image suit le déplacement de la souris. Elle est créée automatiquement donc vous n'avez pas à le faire vous même. Toutefois, vous pouvez personnaliser cette image filigrane grâce à <a href="/Fr/GlisserD%C3%A9poser/DataTransfer#setDragImage">setDragImage</a>.</p>
+## Définir l'image filigrane d'un glissement
 
-<pre>event.dataTransfer.setDragImage(image, xOffset, yOffset);
-</pre>
+Lorsqu'un glissement a lieu, une image translucide est générée à partir de l'origine du glissement (l'élément d'origine ayant déclenché l'événement), et cette image suit le déplacement de la souris. Elle est créée automatiquement donc vous n'avez pas à le faire vous même. Toutefois, vous pouvez personnaliser cette image filigrane grâce à [setDragImage](/Fr/GlisserD%C3%A9poser/DataTransfer#setDragImage).
 
-<p>Trois arguments sont nécessaires. Le premier est la référence à une image. Cette référence pointera en gérénal vers un élément image, mais elle peut pointer aussi vers un canvas ou vers tous autres éléments. L'image filigrane sera simplement générée telle qu'elle ressemble à l'écran, et dessinée à sa taille d'origine. Il est également possible d'utiliser des images et des canvas qui ne sont pas dans un document, comme le montre cet exemple :</p>
+    event.dataTransfer.setDragImage(image, xOffset, yOffset);
 
-<pre>function dragWithCustomImage(event)
-{
-  var canvas = document.createElement("canvas");
-  canvas.width = canvas.height = 50;
+Trois arguments sont nécessaires. Le premier est la référence à une image. Cette référence pointera en gérénal vers un élément image, mais elle peut pointer aussi vers un canvas ou vers tous autres éléments. L'image filigrane sera simplement générée telle qu'elle ressemble à l'écran, et dessinée à sa taille d'origine. Il est également possible d'utiliser des images et des canvas qui ne sont pas dans un document, comme le montre cet exemple :
 
-  var ctx = canvas.getContext("2d");
-  ctx.lineWidth = 4;
-  ctx.moveTo(0, 0);
-  ctx.lineTo(50, 50);
-  ctx.moveTo(0, 50);
-  ctx.lineTo(50, 0);
-  ctx.stroke();
+    function dragWithCustomImage(event)
+    {
+      var canvas = document.createElement("canvas");
+      canvas.width = canvas.height = 50;
 
-  var dt = event.dataTransfer;
-  dt.setData('text/plain', 'Data to Drag');
-  dt.setDragImage(canvas, 25, 25);
-}
-</pre>
+      var ctx = canvas.getContext("2d");
+      ctx.lineWidth = 4;
+      ctx.moveTo(0, 0);
+      ctx.lineTo(50, 50);
+      ctx.moveTo(0, 50);
+      ctx.lineTo(50, 0);
+      ctx.stroke();
 
-<p>Cette technique est utile pour dessiner des images filigranes personnalisées en utilisant l'élément canvas.</p>
+      var dt = event.dataTransfer;
+      dt.setData('text/plain', 'Data to Drag');
+      dt.setDragImage(canvas, 25, 25);
+    }
 
-<p>Les deuxième et troisième arguments de la méthode <a href="/Fr/GlisserD%C3%A9poser/DataTransfer#setDragImage">setDragImage</a> sont les décalages de l'image par rapport au pointeur de la souris. Dans cet exemple, comme le canvas fait 50 pixels de large et 50 pixels de haut, nous utilisons son centre (soit 25 et 25) pour que l'image soit centrée sur le pointeur de la souris.</p>
+Cette technique est utile pour dessiner des images filigranes personnalisées en utilisant l'élément canvas.
 
-<h2 id="drageffects">Effets du glissement</h2>
+Les deuxième et troisième arguments de la méthode [setDragImage](/Fr/GlisserD%C3%A9poser/DataTransfer#setDragImage) sont les décalages de l'image par rapport au pointeur de la souris. Dans cet exemple, comme le canvas fait 50 pixels de large et 50 pixels de haut, nous utilisons son centre (soit 25 et 25) pour que l'image soit centrée sur le pointeur de la souris.
 
-<p>Lors d'un glisser/déposer, plusieur opérations se déroulent. L'opération <code>copy</code> indique que la donnée glissée sera copiée de son emplacement d'origine au lieu de dépot. L'opération <code>move</code> indique que la donnée glissée sera déplacée, et l'opération <code>link</code> indique une forme de relation ou de connexion entre l'origine et le lieu de dépot.</p>
+## Effets du glissement
 
-<p>Vous pouvez spécifier laquelle de ces trois opérations sera autorisée au niveau de l'origine du glissement, en définissant la propriété <a href="/Fr/GlisserD%C3%A9poser/DataTransfer#effectAllowed">effectAllowed</a> dans un scrutateur d'événement <code>dragstart</code>.</p>
+Lors d'un glisser/déposer, plusieur opérations se déroulent. L'opération `copy` indique que la donnée glissée sera copiée de son emplacement d'origine au lieu de dépot. L'opération `move` indique que la donnée glissée sera déplacée, et l'opération `link` indique une forme de relation ou de connexion entre l'origine et le lieu de dépot.
 
-<pre>event.dataTransfer.effectAllowed = "copy";
-</pre>
+Vous pouvez spécifier laquelle de ces trois opérations sera autorisée au niveau de l'origine du glissement, en définissant la propriété [effectAllowed](/Fr/GlisserD%C3%A9poser/DataTransfer#effectAllowed) dans un scrutateur d'événement `dragstart`.
 
-<p>Dans cet exemple, seule une copie n'est autorisée. Vous pouvez combiner les valeurs de plusieurs façons :</p>
+    event.dataTransfer.effectAllowed = "copy";
 
-<dl>
- <dt>none</dt>
- <dd>Aucune opération permise</dd>
- <dt>copy</dt>
- <dd>Copie uniquement</dd>
- <dt>move</dt>
- <dd>Déplacement uniquement</dd>
- <dt>link</dt>
- <dd>Lien uniquement</dd>
- <dt>copyMove</dt>
- <dd>Copie ou déplacement uniquement</dd>
- <dt>copyLink</dt>
- <dd>Copie ou lien uniquement</dd>
- <dt>linkMove</dt>
- <dd>Lien ou déplacement uniquement</dd>
- <dt>all</dt>
- <dd>Copie, déplacement ou lien</dd>
-</dl>
+Dans cet exemple, seule une copie n'est autorisée. Vous pouvez combiner les valeurs de plusieurs façons :
 
-<p>Notez que ces valeurs doivent être écrites exactement comme cela. Si vous ne modifiez pas la propriété <a href="/Fr/GlisserD%C3%A9poser/DataTransfer#effectAllowed">effectAllowed</a>, alors tous les opérations seront permises comme pour la valeur 'all'. L'usage de cette propriété intervient seulement si vous souhaitez exclure des types spécifiques.</p>
+- none
+  - : Aucune opération permise
+- copy
+  - : Copie uniquement
+- move
+  - : Déplacement uniquement
+- link
+  - : Lien uniquement
+- copyMove
+  - : Copie ou déplacement uniquement
+- copyLink
+  - : Copie ou lien uniquement
+- linkMove
+  - : Lien ou déplacement uniquement
+- all
+  - : Copie, déplacement ou lien
 
-<p>Pendant une opération de glissement, un scrutateur pour les événements <code>dragenter</code> ou <code>dragover</code> peut tester la propriété <a href="/Fr/GlisserD%C3%A9poser/DataTransfer#effectAllowed">effectAllowed</a> afin de voir quelles opérations sont autorisées. La propriété associée <a href="/Fr/GlisserD%C3%A9pose/DataTransfer#dropEffect">dropEffect</a> doit être définie dans un de ces événements pour spécifier ce que chaque opération aura à faire. Les valeurs valides pour <a href="/Fr/GlisserD%C3%A9pose/DataTransfer#dropEffect">dropEffect</a> sont <code>none</code>, <code>copy</code>, <code>move</code> ou <code>link</code>. Il n'y a pas de combinaison pour cette propriété.</p>
+Notez que ces valeurs doivent être écrites exactement comme cela. Si vous ne modifiez pas la propriété [effectAllowed](/Fr/GlisserD%C3%A9poser/DataTransfer#effectAllowed), alors tous les opérations seront permises comme pour la valeur 'all'. L'usage de cette propriété intervient seulement si vous souhaitez exclure des types spécifiques.
 
-<p>Pour les événements <code>dragenter</code> et <code>dragover</code>, la propriété <a href="/Fr/GlisserD%C3%A9pose/DataTransfer#dropEffect">dropEffect</a> est initialisée avec l'effet attendu par l'utilisateur. L'utilisateur peut modifier l'effet désiré en appuyant sur une touche de modification. Bien que les touches varient selon la plateforme, habituellement, il s'agit d'une combinaison des touches Maj et Control qui permettent de copier, déplacer et créer un raccourci. Le pointeur de la souris change de forme pour montrer l'opération souhaitée, par exemple un signe + à côté de la souris pour une copie.</p>
+Pendant une opération de glissement, un scrutateur pour les événements `dragenter` ou `dragover` peut tester la propriété [effectAllowed](/Fr/GlisserD%C3%A9poser/DataTransfer#effectAllowed) afin de voir quelles opérations sont autorisées. La propriété associée [dropEffect](/Fr/GlisserD%C3%A9pose/DataTransfer#dropEffect) doit être définie dans un de ces événements pour spécifier ce que chaque opération aura à faire. Les valeurs valides pour [dropEffect](/Fr/GlisserD%C3%A9pose/DataTransfer#dropEffect) sont `none`, `copy`, `move` ou `link`. Il n'y a pas de combinaison pour cette propriété.
 
-<p>Vous pouvez modifier les propriétés <a href="/Fr/GlisserD%C3%A9poser/DataTransfer#effectAllowed">effectAllowed</a> et <a href="/Fr/GlisserD%C3%A9pose/DataTransfer#dropEffect">dropEffect</a> pendant les événements <code>dragenter</code> ou <code>dragover</code>, si par exemple une cible ne supporte qu'un seul type d'opération. La modification de la propriété <a href="/Fr/GlisserD%C3%A9poser/DataTransfer#effectAllowed">effectAllowed</a> vous permet de spécifier les opérations autorisées sur une cible donnée. Par exemple, mettre une propriété <code>copyMove</code> permet des opération de copie ou de déplacement, mais pas de créer un lien raccourci.</p>
+Pour les événements `dragenter` et `dragover`, la propriété [dropEffect](/Fr/GlisserD%C3%A9pose/DataTransfer#dropEffect) est initialisée avec l'effet attendu par l'utilisateur. L'utilisateur peut modifier l'effet désiré en appuyant sur une touche de modification. Bien que les touches varient selon la plateforme, habituellement, il s'agit d'une combinaison des touches Maj et Control qui permettent de copier, déplacer et créer un raccourci. Le pointeur de la souris change de forme pour montrer l'opération souhaitée, par exemple un signe + à côté de la souris pour une copie.
 
-<p>Vous pouvez modifier la propriété <a href="/Fr/GlisserD%C3%A9pose/DataTransfer#dropEffect">dropEffect</a> en remplaçant l'effet de l'utilisateur, et forcer à obtenir une opération spécifique. Notez que cet effet doit être un de ceux listé dans la propriété <a href="/Fr/GlisserD%C3%A9poser/DataTransfer#effectAllowed">effectAllowed</a>, sinon une valeur alternative sera attribuée.</p>
+Vous pouvez modifier les propriétés [effectAllowed](/Fr/GlisserD%C3%A9poser/DataTransfer#effectAllowed) et [dropEffect](/Fr/GlisserD%C3%A9pose/DataTransfer#dropEffect) pendant les événements `dragenter` ou `dragover`, si par exemple une cible ne supporte qu'un seul type d'opération. La modification de la propriété [effectAllowed](/Fr/GlisserD%C3%A9poser/DataTransfer#effectAllowed) vous permet de spécifier les opérations autorisées sur une cible donnée. Par exemple, mettre une propriété `copyMove` permet des opération de copie ou de déplacement, mais pas de créer un lien raccourci.
 
-<pre>event.dataTransfer.effectAllowed = "copyMove";
-event.dataTransfer.dropEffect = "copy";
-</pre>
+Vous pouvez modifier la propriété [dropEffect](/Fr/GlisserD%C3%A9pose/DataTransfer#dropEffect) en remplaçant l'effet de l'utilisateur, et forcer à obtenir une opération spécifique. Notez que cet effet doit être un de ceux listé dans la propriété [effectAllowed](/Fr/GlisserD%C3%A9poser/DataTransfer#effectAllowed), sinon une valeur alternative sera attribuée.
 
-<p>Dans cet exemple, la copie est l'effet proposé qui est inclus dans la liste des effets autorisés.</p>
+    event.dataTransfer.effectAllowed = "copyMove";
+    event.dataTransfer.dropEffect = "copy";
 
-<p>Vous pouvez utiliser la valeur <code>none</code> pour interdir tout dépôt à cet emplacement.</p>
+Dans cet exemple, la copie est l'effet proposé qui est inclus dans la liste des effets autorisés.
 
-<h2 id="droptargets">Spécifier les cibles de dépôt</h2>
+Vous pouvez utiliser la valeur `none` pour interdir tout dépôt à cet emplacement.
 
-<p>Un scrutateur pour les événements <code>dragenter</code> et <code>dragover</code> est utilisé pour indiquer des cibles de dépôt valides, c'est-à-dire là où les items pourront être déposés. La plupart des zones d'une page Web ne sont pas des endroits valides pour déposer des données. Ainsi, le comportement par défaut pour ces événements ne permet pas un dépôt.</p>
+## Spécifier les cibles de dépôt
 
-<p>Si vous voulez autoriser un dépôt, vous devez empêcher le comportement par défaut en annulant l'événement. Il suffit soit de retourner <code>false</code> à partir d'un scrutateur d'événement, ou par l'appel de la méthode événementielle <a href="/fr/DOM/event.preventDefault">event.preventDefault</a>. Cette dernière solution est plus faisable avec une fonction définie dans un script séparé.</p>
+Un scrutateur pour les événements `dragenter` et `dragover` est utilisé pour indiquer des cibles de dépôt valides, c'est-à-dire là où les items pourront être déposés. La plupart des zones d'une page Web ne sont pas des endroits valides pour déposer des données. Ainsi, le comportement par défaut pour ces événements ne permet pas un dépôt.
 
-<pre>&lt;div ondragover="return false"&gt;
-&lt;div ondragover="event.preventDefault()"&gt;
-</pre>
+Si vous voulez autoriser un dépôt, vous devez empêcher le comportement par défaut en annulant l'événement. Il suffit soit de retourner `false` à partir d'un scrutateur d'événement, ou par l'appel de la méthode événementielle [event.preventDefault](/fr/DOM/event.preventDefault). Cette dernière solution est plus faisable avec une fonction définie dans un script séparé.
 
-<p>L'appel de la méthode <a href="/fr/DOM/event.preventDefault">event.preventDefault</a> pendant les événements <code>dragenter</code> et <code>dragover</code> indiquera qu'un dépôt est permis à cet endroit. Toutefois, il est fréquent d'appeler la méthode <a href="/fr/DOM/event.preventDefault">event.preventDefault</a> seulement dans certaines situations, par exemple si un lien est en train d'être glissé. Pour cela, appelez une fonction qui testera une condition et annulera l'événement seulement si cette condition est rencontrée. Dans le cas contraire, il suffit de ne pas annuler l'événement et aucun dépôt ne se réalisera si l'utilisateur lache le bouton de la souris.</p>
+    <div ondragover="return false">
+    <div ondragover="event.preventDefault()">
 
-<p>Il est plus fréquent d'accepter ou non un dépôt en fonction du type de la donnée glissée. Par exemple, permettre les images ou les liens, ou bien les deux. Pour cela, testez les <a href="/fr/GlisserD%C3%A9poser/DataTransfer#types">types</a> de l'objet <code>dataTransfer</code>. Les types sont sous la forme d'une liste de chaînes de caractères ajoutées au début du glissement, du plus signifiant au moins signifiant.</p>
+L'appel de la méthode [event.preventDefault](/fr/DOM/event.preventDefault) pendant les événements `dragenter` et `dragover` indiquera qu'un dépôt est permis à cet endroit. Toutefois, il est fréquent d'appeler la méthode [event.preventDefault](/fr/DOM/event.preventDefault) seulement dans certaines situations, par exemple si un lien est en train d'être glissé. Pour cela, appelez une fonction qui testera une condition et annulera l'événement seulement si cette condition est rencontrée. Dans le cas contraire, il suffit de ne pas annuler l'événement et aucun dépôt ne se réalisera si l'utilisateur lache le bouton de la souris.
 
-<pre>function doDragOver(event)
-{
-  var isLink = event.dataTransfer.types.contains("text/uri-list");
-  if (isLink)
-    event.preventDefault();
-}
-</pre>
+Il est plus fréquent d'accepter ou non un dépôt en fonction du type de la donnée glissée. Par exemple, permettre les images ou les liens, ou bien les deux. Pour cela, testez les [types](/fr/GlisserD%C3%A9poser/DataTransfer#types) de l'objet `dataTransfer`. Les types sont sous la forme d'une liste de chaînes de caractères ajoutées au début du glissement, du plus signifiant au moins signifiant.
 
-<p>Dans cet exemple, la méthode <code>contains</code> est utilisée pour vérifier si le type <a href="/fr/GlisserD%C3%A9poser/Types_de_glissement_recommand%C3%A9s#link">text/uri-list</a> est présent dans la liste des types. S'il l'est, l'événement est annulé, ce qui autorise un dépôt. Si la donnée ne contient pas un lien, l'événement ne sera pas annulé et le dépôt ne sera pas autorisé à cet endroit.</p>
+    function doDragOver(event)
+    {
+      var isLink = event.dataTransfer.types.contains("text/uri-list");
+      if (isLink)
+        event.preventDefault();
+    }
 
-<p>Vous pouvez également définir une propriété <a href="/fr/GlisserD%C3%A9poser/DataTransfer#effectAllowed">effectAllowed</a> ou <a href="/fr/GlisserD%C3%A9poser/DataTransfer#dropEffect">dropEffect</a> ou les deux à la fois si vous souhaitez être plus précis sur le type d'opération autorisé. Naturellement, le changement de propriété n'aura aucun effet si vous n'avez pas annulé l'événement.</p>
+Dans cet exemple, la méthode `contains` est utilisée pour vérifier si le type [text/uri-list](/fr/GlisserD%C3%A9poser/Types_de_glissement_recommand%C3%A9s#link) est présent dans la liste des types. S'il l'est, l'événement est annulé, ce qui autorise un dépôt. Si la donnée ne contient pas un lien, l'événement ne sera pas annulé et le dépôt ne sera pas autorisé à cet endroit.
 
-<h2 id="dropfeedback">Retour d'information du dépôt</h2>
+Vous pouvez également définir une propriété [effectAllowed](/fr/GlisserD%C3%A9poser/DataTransfer#effectAllowed) ou [dropEffect](/fr/GlisserD%C3%A9poser/DataTransfer#dropEffect) ou les deux à la fois si vous souhaitez être plus précis sur le type d'opération autorisé. Naturellement, le changement de propriété n'aura aucun effet si vous n'avez pas annulé l'événement.
 
-<p>Il y a de nombreuses manières d'indiquer à l'utilisateur que le dépot est autorisé dans une certaine zone. Le pointeur de la souris va être mis à jour en fonction de la valeur de la propriété <a href="/En/DragDrop/DataTransfer#dropEffect.28.29">dropEffect</a>. L'apparence exacte dépend de la plateforme de l'utilisateur, généralement il s'agit d'un icone représentant un signe plus qui apparaît pour une copie par exemple, et un 'impossible de déposer ici' peut apparaître quand le dépôt n'est pas autorisé. Cette information contextuelle est suffisante dans la plupart des cas.</p>
+## Retour d'information du dépôt
 
-<p>De plus, vous pouvez aussi mettre à jour l'interface utilisateur en surlignant au besoin. Pour un simple surlignage, vous pouvez utiliser la pseudo-classe <code>-moz-drag-over</code>sur la cible du dépôt.</p>
+Il y a de nombreuses manières d'indiquer à l'utilisateur que le dépot est autorisé dans une certaine zone. Le pointeur de la souris va être mis à jour en fonction de la valeur de la propriété [dropEffect](/En/DragDrop/DataTransfer#dropEffect.28.29). L'apparence exacte dépend de la plateforme de l'utilisateur, généralement il s'agit d'un icone représentant un signe plus qui apparaît pour une copie par exemple, et un 'impossible de déposer ici' peut apparaître quand le dépôt n'est pas autorisé. Cette information contextuelle est suffisante dans la plupart des cas.
 
-<pre>.droparea:-moz-drag-over {
-  border: 1px solid black;
-}
-</pre>
+De plus, vous pouvez aussi mettre à jour l'interface utilisateur en surlignant au besoin. Pour un simple surlignage, vous pouvez utiliser la pseudo-classe `-moz-drag-over`sur la cible du dépôt.
 
-<p>Dans cet example, l'élement comportant la classe <code>droparea</code> va recevoir un bord noir de un pixel tant que la cible sera valide, ce qui est le cas, si la méthode <a href="/en/DOM/event.preventDefault">event.preventDefault</a> est appelé durant l'évenement <code>dragenter</code>. Il est à noter que vous devez annuler l'évenement <code>dragenter</code> de cette pseudo-classe tant que l'état n'est pas verifié par l'évenement <code>dragover</code>.</p>
+    .droparea:-moz-drag-over {
+      border: 1px solid black;
+    }
 
-<p>For more complex visual effects, you can also perform other operations during the <code>dragenter</code> event, for example, by inserting an element at the location where the drop will occur. For example, this might be an insertion marker or an element that represents the dragged element in its new location. To do this, you could create an <a href="/en/XUL/image">image</a> or <a href="/en/XUL/separator">separator</a> element for example, and simply insert it into the document during the <code>dragenter</code> event.</p>
+Dans cet example, l'élement comportant la classe `droparea` va recevoir un bord noir de un pixel tant que la cible sera valide, ce qui est le cas, si la méthode [event.preventDefault](/en/DOM/event.preventDefault) est appelé durant l'évenement `dragenter`. Il est à noter que vous devez annuler l'évenement `dragenter` de cette pseudo-classe tant que l'état n'est pas verifié par l'évenement `dragover`.
 
-<p>The <code>dragover</code> event will fire at the element the mouse is pointing at. Naturally, you may need to move the insertion marker around a <code>dragover</code> event as well. You can use the event's <a href="/en/DOM/event.clientX">clientX</a> and <a href="/en/DOM/event.clientY">clientY</a> properties as with other mouse events to determine the location of the mouse pointer.</p>
+For more complex visual effects, you can also perform other operations during the `dragenter` event, for example, by inserting an element at the location where the drop will occur. For example, this might be an insertion marker or an element that represents the dragged element in its new location. To do this, you could create an [image](/en/XUL/image) or [separator](/en/XUL/separator) element for example, and simply insert it into the document during the `dragenter` event.
 
-<p>Finally, the <code>dragleave</code> event will fire at an element when the drag leaves the element. This is the time when you should remove any insertion markers or highlighting. You do not need to cancel this event. Any highlighting or other visual effects specified using the <code>-moz-drag-over</code> pseudoclass will be removed automatically. The <code>dragleave</code> event will always fire, even if the drag is cancelled, so you can always ensure that any insertion point cleanup can be done during this event.</p>
+The `dragover` event will fire at the element the mouse is pointing at. Naturally, you may need to move the insertion marker around a `dragover` event as well. You can use the event's [clientX](/en/DOM/event.clientX) and [clientY](/en/DOM/event.clientY) properties as with other mouse events to determine the location of the mouse pointer.
 
-<h2 id="drop">Performing a Drop</h2>
+Finally, the `dragleave` event will fire at an element when the drag leaves the element. This is the time when you should remove any insertion markers or highlighting. You do not need to cancel this event. Any highlighting or other visual effects specified using the `-moz-drag-over` pseudoclass will be removed automatically. The `dragleave` event will always fire, even if the drag is cancelled, so you can always ensure that any insertion point cleanup can be done during this event.
 
-<p>When the user releases the mouse, the drag and drop operation ends. If the mouse was released over an element that is a valid drop target, that is, one that cancelled the last <code>dragenter</code> or <code>dragover</code> event, then the drop will be successful, and a <code>drop</code> event will fire at the target. Otherwise, the drag operation is cancelled and no <code>drop</code> event is fired.</p>
+## Performing a Drop
 
-<p>During the <code>drop</code> event, you should retrieve that data that was dropped from the event and insert it at the drop location. You can use the <a href="/En/DragDrop/DataTransfer#dropEffect.28.29">dropEffect</a> property to determine which drag operation was desired.</p>
+When the user releases the mouse, the drag and drop operation ends. If the mouse was released over an element that is a valid drop target, that is, one that cancelled the last `dragenter` or `dragover` event, then the drop will be successful, and a `drop` event will fire at the target. Otherwise, the drag operation is cancelled and no `drop` event is fired.
 
-<p>As with all drag related events, the event's <code>dataTransfer</code> property will hold the data that is being dragged. The <a href="/En/DragDrop/DataTransfer#getData.28.29">getData</a> method may be used to retrieve the data again.</p>
+During the `drop` event, you should retrieve that data that was dropped from the event and insert it at the drop location. You can use the [dropEffect](/En/DragDrop/DataTransfer#dropEffect.28.29) property to determine which drag operation was desired.
 
-<pre>function onDrop(event)
-{
-  var data = event.dataTransfer.getData("text/plain");
-  event.target.textContent = data;
-  event.preventDefault();
-}
-</pre>
+As with all drag related events, the event's `dataTransfer` property will hold the data that is being dragged. The [getData](/En/DragDrop/DataTransfer#getData.28.29) method may be used to retrieve the data again.
 
-<p>The <a href="/En/DragDrop/DataTransfer#getData.28.29">getData</a> method takes one argument, the type of data to retrieve. It will return the string value that was set when the <a href="/En/DragDrop/DataTransfer#setData.28.29">setData</a> was called at the beginning of the drag operation. An empty string will be returned if data of that type does not exist. Naturally though, you would likely know that the right type of data was available, as it was previously checked during a <code>dragover</code> event.</p>
+    function onDrop(event)
+    {
+      var data = event.dataTransfer.getData("text/plain");
+      event.target.textContent = data;
+      event.preventDefault();
+    }
 
-<p>In the example here, once we have retrieved the data, we insert the string as the textual content of the target. This has the effect of inserting the dragged text where it was dropped, assuming that the drop target is an area of text such as a <code>p</code> or <code>div</code> element.</p>
+The [getData](/En/DragDrop/DataTransfer#getData.28.29) method takes one argument, the type of data to retrieve. It will return the string value that was set when the [setData](/En/DragDrop/DataTransfer#setData.28.29) was called at the beginning of the drag operation. An empty string will be returned if data of that type does not exist. Naturally though, you would likely know that the right type of data was available, as it was previously checked during a `dragover` event.
 
-<p>In a web page, you should call the <a href="/en/DOM/event.preventDefault">preventDefault</a> method of the event if you have accepted the drop so that the default browser handling does not handle the droppped data as well. For example, when a link is dragged to a web page, Firefox will open the link. By cancelling the event, this behaviour will be prevented.</p>
+In the example here, once we have retrieved the data, we insert the string as the textual content of the target. This has the effect of inserting the dragged text where it was dropped, assuming that the drop target is an area of text such as a `p` or `div` element.
 
-<p>You can retrieve other types of data as well. If the data is a link, it should have the type <a href="/En/DragDrop/Recommended_Drag_Types#link">text/uri-list</a>. You could then insert a link into the content.</p>
+In a web page, you should call the [preventDefault](/en/DOM/event.preventDefault) method of the event if you have accepted the drop so that the default browser handling does not handle the droppped data as well. For example, when a link is dragged to a web page, Firefox will open the link. By cancelling the event, this behaviour will be prevented.
 
-<pre>function doDrop(event)
-{
-  var links = event.dataTransfer.getData("text/uri-list").split("\n");
-  for each (var link in links) {
-    if (link.indexOf("#") == 0)
-      continue;
+You can retrieve other types of data as well. If the data is a link, it should have the type [text/uri-list](/En/DragDrop/Recommended_Drag_Types#link). You could then insert a link into the content.
 
-    var newlink = document.createElement("a");
-    newlink.href = link;
-    newlink.textContent = link;
-    event.target.appendChild(newlink);
-  }
-  event.preventDefault();
-}
-</pre>
+    function doDrop(event)
+    {
+      var links = event.dataTransfer.getData("text/uri-list").split("\n");
+      for each (var link in links) {
+        if (link.indexOf("#") == 0)
+          continue;
 
-<p>This example inserts a link from the dragged data. As you might be able to guess from the name, the <a href="/En/DragDrop/Recommended_Drag_Types#link">text/uri-list</a> type actually may contain a list of URLs, each on a separate line. In this code, we use the <a href="/en/Core_JavaScript_1.5_Reference/Global_Objects/String/split">split</a> to split the string into lines, then iterate over the list of lines, inserting each as a link into the document. Note also that we skip links starting with a number sign (#) as these are comments.</p>
+        var newlink = document.createElement("a");
+        newlink.href = link;
+        newlink.textContent = link;
+        event.target.appendChild(newlink);
+      }
+      event.preventDefault();
+    }
 
-<p>For simple cases, you can use the special type <code>URL</code> to just retrieve the first valid URL in the list. For example:</p>
+This example inserts a link from the dragged data. As you might be able to guess from the name, the [text/uri-list](/En/DragDrop/Recommended_Drag_Types#link) type actually may contain a list of URLs, each on a separate line. In this code, we use the [split](/en/Core_JavaScript_1.5_Reference/Global_Objects/String/split) to split the string into lines, then iterate over the list of lines, inserting each as a link into the document. Note also that we skip links starting with a number sign (#) as these are comments.
 
-<pre>var link = event.dataTransfer.getData("URL");
-</pre>
+For simple cases, you can use the special type `URL` to just retrieve the first valid URL in the list. For example:
 
-<p>This eliminates the need to check for comments or iterate through lines yourself, however it is limited to only the first URL in the list.</p>
+    var link = event.dataTransfer.getData("URL");
 
-<p>The <code>URL</code> type is a special type used only as a shorthand, and it does not appear within the list of types specified in the <a href="/En/DragDrop/DataTransfer#types.28.29">types</a> property.</p>
+This eliminates the need to check for comments or iterate through lines yourself, however it is limited to only the first URL in the list.
 
-<p>Sometimes you may support a number of different formats, and you want to retrieve the data that is most specific that is supported. In this example, three formats are support by a drop target.</p>
+The `URL` type is a special type used only as a shorthand, and it does not appear within the list of types specified in the [types](/En/DragDrop/DataTransfer#types.28.29) property.
 
-<p>The following example returns the data associated with the best supported format:</p>
+Sometimes you may support a number of different formats, and you want to retrieve the data that is most specific that is supported. In this example, three formats are support by a drop target.
 
-<pre>function doDrop(event)
-{
-  var types = event.dataTransfer.types;
-  var supportedTypes = ["application/x-moz-file", "text/uri-list", "text/plain"];
-  types = supportedTypes.filter(function (value) types.contains(value));
-  if (types.length)
-    var data = event.dataTransfer.getData(types[0]);
-  event.preventDefault();
-}
-</pre>
+The following example returns the data associated with the best supported format:
 
-<p>This method relies on JavaScript functionality available in Firefox 3. However the code could be adjusted to support other platforms.</p>
+    function doDrop(event)
+    {
+      var types = event.dataTransfer.types;
+      var supportedTypes = ["application/x-moz-file", "text/uri-list", "text/plain"];
+      types = supportedTypes.filter(function (value) types.contains(value));
+      if (types.length)
+        var data = event.dataTransfer.getData(types[0]);
+      event.preventDefault();
+    }
 
-<h2 id="dragend">Finishing a Drag</h2>
+This method relies on JavaScript functionality available in Firefox 3. However the code could be adjusted to support other platforms.
 
-<p>Once the drag is complete, a <code>dragend</code> is fired at the source of the drag (the same element that received the <code>dragstart</code> event). This event will fire if the drag was successful or if it was cancelled. However, you can use the <a href="/En/DragDrop/DataTransfer#dropEffect.28.29">dropEffect</a> to determine what drop operation occurred.</p>
+## Finishing a Drag
 
-<p>If the <a href="/En/DragDrop/DataTransfer#dropEffect.28.29">dropEffect</a> property has the value <code>none</code> during a <code>dragend</code>, then the drag was cancelled. Otherwise, the effect specifies which operation was performed. The source can use this information after a move operation to remove the dragged item from the old location. The <a href="/En/DragDrop/DataTransfer#mozUserCancelled.28.29">mozUserCancelled</a> property will be set to true if the user cancelled the drag (by pressing Escape), and false if the drag was cancelled for other reasons such as an invalid drop target, or if was successful.</p>
+Once the drag is complete, a `dragend` is fired at the source of the drag (the same element that received the `dragstart` event). This event will fire if the drag was successful or if it was cancelled. However, you can use the [dropEffect](/En/DragDrop/DataTransfer#dropEffect.28.29) to determine what drop operation occurred.
 
-<p>A drop can occur inside the same window or over another application. The <code>dragend</code> event will always fire regardless. The event's <a href="/en/DOM/event.screenX">screenX</a> and <a href="/en/DOM/event.screenY">screenY</a> properties will be set to the screen coordinate where the drop occurred.</p>
+If the [dropEffect](/En/DragDrop/DataTransfer#dropEffect.28.29) property has the value `none` during a `dragend`, then the drag was cancelled. Otherwise, the effect specifies which operation was performed. The source can use this information after a move operation to remove the dragged item from the old location. The [mozUserCancelled](/En/DragDrop/DataTransfer#mozUserCancelled.28.29) property will be set to true if the user cancelled the drag (by pressing Escape), and false if the drag was cancelled for other reasons such as an invalid drop target, or if was successful.
 
-<p>After the <code>dragend</code> event has finished propagating, the drag and drop operation is complete.</p>
+A drop can occur inside the same window or over another application. The `dragend` event will always fire regardless. The event's [screenX](/en/DOM/event.screenX) and [screenY](/en/DOM/event.screenY) properties will be set to the screen coordinate where the drop occurred.
+
+After the `dragend` event has finished propagating, the drag and drop operation is complete.
diff --git a/files/fr/web/api/html_drag_and_drop_api/index.md b/files/fr/web/api/html_drag_and_drop_api/index.md
index f9856ebd08..3fbbe9166e 100644
--- a/files/fr/web/api/html_drag_and_drop_api/index.md
+++ b/files/fr/web/api/html_drag_and_drop_api/index.md
@@ -10,150 +10,108 @@ tags:
 translation_of: Web/API/HTML_Drag_and_Drop_API
 original_slug: Web/API/API_HTML_Drag_and_Drop
 ---
-<p>{{DefaultAPISidebar("HTML Drag and Drop API")}}</p>
-
-<p><strong>L'interface HTML <em>Drag and Drop</em></strong> (pour glisser-déposer) permet à des applications d'utiliser des fonctionnalités de glisser-déposer dans le navigateur.</p>
-
-<p>L'utilisateur pourra sélectionner des éléments déplaçables à la souris et les déplacer vers un élément où on peut déposer en relâchant le bouton de la souris. Une représentation translucide de l'élément déplacé suit le pointeur lors de l'opération.</p>
-
-<p>Pour les sites web et les extensions, on peut personnaliser les éléments qui peuvent être déplacés, la façon dont ceux-ci sont signalés et les éléments qui peuvent servir de destination.</p>
-
-<p>L'aperçu de cette API inclut une description des interfaces, les étapes à suivre pour prendre en charge ces fonctionnalités dans une application et un aperçu de l'interopérabilité de ces interfaces.</p>
-
-<h2 id="Évènements_de_déplacement">Évènements de déplacement</h2>
-
-<p>L'API HTML <em>Drag and Drop</em> utilise le modèle d'évènements du DOM ({{domxref("Event")}}) ainsi que les éléments de déplacements (<em>{{domxref("DragEvent")}}</em>) hérités des évènements liés à la souris ({{domxref("MouseEvent")}}). Une opération de déplacement commence généralement lorsqu'un utilisateur sélectionne un élément déplaçable puis qu'il le déplace sur un élément de destination avant de relâcher l'élément déplacé.</p>
-
-<p>Lors des opérations de déplacement, plusieurs évènements sont déclenchés (dont certains qui sont déclenchés à plusieurs reprises comme {{event("drag")}} et {{event("dragover")}}).</p>
-
-<p>Chaque <a href="/fr/docs/Web/API/DragEvent#Event_types">type d'évènement de déplacement</a> possède un <a href="/fr/docs/Web/API/DragEvent#GlobalEventHandlers">gestionnaire d'évènement global (une méthode <code>on...</code>)</a> :</p>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Évènement</th>
-   <th scope="col">Gestionnaire d'évènement global</th>
-   <th scope="col">Déclenchement</th>
-  </tr>
-  <tr>
-   <td>{{event('drag')}}</td>
-   <td>{{domxref('GlobalEventHandlers.ondrag','ondrag')}}</td>
-   <td>…un objet déplaçable (que ce soit un élément ou une sélection de texte) est déplacée.</td>
-  </tr>
-  <tr>
-   <td>{{event('dragend')}}</td>
-   <td>{{domxref('GlobalEventHandlers.ondragend','ondragend')}}</td>
-   <td>…une opération de déplacement se termine (en relâchant le bouton de la souris ou en utilisant la touche Echap, voir <a href="/en-US/docs/DragDrop/Drag_Operations#dragend" >Terminer un déplacement</a>)</td>
-  </tr>
-  <tr>
-   <td>{{event('dragenter')}}</td>
-   <td>{{domxref('GlobalEventHandlers.ondragenter','ondragenter')}}</td>
-   <td>…un élément en cours de déplacement arrive sur une zone de dépôt valide (voir <a href="/fr/docs/DragDrop/Drag_Operations#droptargets" >indiquer une cible de destination</a>).</td>
-  </tr>
-  <tr>
-   <td>{{event('dragexit')}}</td>
-   <td>{{domxref('GlobalEventHandlers.ondragexit','ondragexit')}}</td>
-   <td>…un élément n'est plus la sélection immédiate du déplacement.</td>
-  </tr>
-  <tr>
-   <td>{{event('dragleave')}}</td>
-   <td>{{domxref('GlobalEventHandlers.ondragleave','ondragleave')}}</td>
-   <td>…un élément en cours de déplacement quitte une zone de dépôt valide.</td>
-  </tr>
-  <tr>
-   <td>{{event('dragover')}}</td>
-   <td>{{domxref('GlobalEventHandlers.ondragover','ondragover')}}</td>
-   <td>…un élément en cours de déplacement est en cours de survol d'une zone de dépôt valide (cet évènement est déclenché toutes les quelques centaines de millisecondes).</td>
-  </tr>
-  <tr>
-   <td>{{event('dragstart')}}</td>
-   <td>{{domxref('GlobalEventHandlers.ondragstart','ondragstart')}}</td>
-   <td>…l'utilisateur commence à déplacer un élément (voir <a href="/fr/docs/DragDrop/Drag_Operations#dragstart" >démarrer une opération de glissement</a>).</td>
-  </tr>
-  <tr>
-   <td>{{event('drop')}}</td>
-   <td>{{domxref('GlobalEventHandlers.ondrop','ondrop')}}</td>
-   <td>…un élément est déposé sur une cible valide (voir <a href="/fr/docs/DragDrop/Drag_Operations#drop" >déposer un élément</a>).</td>
-  </tr>
- </tbody>
-</table>
-
-<div class="note">
-  <p><strong>Note :</strong> Les évènements <code>dragstart</code> et <code>dragend</code> ne sont pas déclenchés lors qu'on glisse-dépose un fichier de l'appareil dans le navigateur.</p>
-</div>
-
-<h2 id="Interfaces">Interfaces</h2>
-
-<p>Les interfaces fournies par cette API sont</p>
-
-<ul>
- <li>{{domxref("DragEvent")}},</li>
- <li>{{domxref("DataTransfer")}},</li>
- <li>{{domxref("DataTransferItem")}}</li>
- <li>{{domxref("DataTransferItemList")}}.</li>
-</ul>
-
-<p>L'interface {{domxref("DragEvent")}} possède un constructeur et une propriété {{domxref("DragEvent.dataTransfer","dataTransfer")}} qui est un objet {{domxref("DataTransfer")}}.</p>
-
-<p>Les objets {{domxref("DataTransfer")}} incluent l'état du glisser-déposer, le type de déplacement (<code>copy</code> ou <code>move</code>), les données déplacées (un ou plusieurs objets) et le type MIME de chaque objet déplacé. Les objets {{domxref("DataTransfer")}} possèdent également des méthodes permettant d'ajouter ou de retirer des objets aux données déplacées.</p>
-
-<p>Les interfaces {{domxref("DragEvent")}} et {{domxref("DataTransfer")}} sont standard et suffisent à apporter des fonctionnalités de glisser/déposer. Toutefois, Firefox prend en charge quelques extensions spécifiques à Gecko (cf. ci-après) pour l'objet {{domxref("DataTransfer")}} (bien entendu, ces extensions ne fonctionneront que dans Firefox et pas dans les autres navigateurs).</p>
-
-<p>Chaque objet {{domxref("DataTransfer")}} possède une propriété  {{domxref("DataTransfer.items","items")}} qui est une liste ({{domxref("DataTransferItemList","list")}}) d'objets {{domxref("DataTransferItem")}}. Un objet {{domxref("DataTransferItem")}} représente un seul objet déplacé, avec une propriété {{domxref("DataTransferItem.kind","kind")}} qui indique s'il s'agit d'un texte (<code>string</code>) ou d'un fichier (<code>file</code>) et une propriété {{domxref("DataTransferItem.type","type")}} qui correspond au type MIME de la donnée déplacée. L'objet {{domxref("DataTransferItem")}} possède également des méthodes pour consulter les données de l'objet déplacé.</p>
-
-<p>L'objet {{domxref("DataTransferItemList")}} est une liste d'objets {{domxref("DataTransferItem")}}. La liste possède des méthodes pour ajouter un objet en déplacement à la liste, pour retirer un objet de la liste ou pour vider la liste de tout ses objets.</p>
-
-<p>La différence principale entre {{domxref("DataTransfer")}} et {{domxref("DataTransferItem")}} est l'utilisation de la méthode synchrone {{domxref("DataTransfer.getData","getData()")}} pour la première et de la méthode asynchrone {{domxref("DataTransferItem.getAsString","getAsString()")}} pour la deuxième.</p>
-
-<div class="note">
-  <p><strong>Note :</strong> {{domxref("DragEvent")}} et {{domxref("DataTransfer")}} sont largement prises en charge par les navigateurs de bureau tandis que {{domxref("DataTransferItem")}} et {{domxref("DataTransferItemList")}} ont une compatibilité plus restreinte. Voir la section ci-après sur l'interopérabilité.</p>
-</div>
-
-<h3 id="Interfaces_spécifiques_à_Gecko">Interfaces spécifiques à Gecko</h3>
-
-<p>Mozilla / Firefox prend en charge certaines fonctionnalités qui ne font pas partie du modèle standard. Ce sont des fonctions utilitaires pour aider au déplacement de plusieurs objets ou de données qui ne sont pas du texte (des fichiers par exemple). Pour plus d'informations, voir <a href="/fr/docs/Web/API/HTML_Drag_and_Drop_API/Multiple_items" >Glisser-déposer plusieurs objets</a>. Voir aussi la page de référence de {{domxref("DataTransfer")}} pour la liste de l'ensemble <a href="/fr/docs/Web/API/DataTransfer#Gecko_properties">des propriétés spécifique à Gecko</a> et <a href="/fr/docs/Web/API/DataTransfer#Gecko_methods">des méthodes spécifiques à Gecko</a>.</p>
-
-<h2 id="Bases">Bases</h2>
-
-<p>Dans cette section, nous allons voir les premières étapes nécessaires aux fonctionnalités de glisser-déposer dans une application.</p>
-
-<h3 id="Identifier_ce_qui_peut_être_déplacé">Identifier ce qui peut être déplacé</h3>
-
-<p>Pour qu'un élément puisse être déplacé, il faut lui ajouter l'attribut {{htmlattrxref("draggable")}} ainsi que le gestionnaire d'évènement global {{domxref("GlobalEventHandlers.ondragstart","ondragstart")}} :</p>
-
-<pre class="brush: html">&lt;script&gt;
+{{DefaultAPISidebar("HTML Drag and Drop API")}}
+
+**L'interface HTML _Drag and Drop_** (pour glisser-déposer) permet à des applications d'utiliser des fonctionnalités de glisser-déposer dans le navigateur.
+
+L'utilisateur pourra sélectionner des éléments déplaçables à la souris et les déplacer vers un élément où on peut déposer en relâchant le bouton de la souris. Une représentation translucide de l'élément déplacé suit le pointeur lors de l'opération.
+
+Pour les sites web et les extensions, on peut personnaliser les éléments qui peuvent être déplacés, la façon dont ceux-ci sont signalés et les éléments qui peuvent servir de destination.
+
+L'aperçu de cette API inclut une description des interfaces, les étapes à suivre pour prendre en charge ces fonctionnalités dans une application et un aperçu de l'interopérabilité de ces interfaces.
+
+## Évènements de déplacement
+
+L'API HTML _Drag and Drop_ utilise le modèle d'évènements du DOM ({{domxref("Event")}}) ainsi que les éléments de déplacements (_{{domxref("DragEvent")}}_) hérités des évènements liés à la souris ({{domxref("MouseEvent")}}). Une opération de déplacement commence généralement lorsqu'un utilisateur sélectionne un élément déplaçable puis qu'il le déplace sur un élément de destination avant de relâcher l'élément déplacé.
+
+Lors des opérations de déplacement, plusieurs évènements sont déclenchés (dont certains qui sont déclenchés à plusieurs reprises comme {{event("drag")}} et {{event("dragover")}}).
+
+Chaque [type d'évènement de déplacement](/fr/docs/Web/API/DragEvent#Event_types) possède un [gestionnaire d'évènement global (une méthode `on...`)](/fr/docs/Web/API/DragEvent#GlobalEventHandlers) :
+
+| Évènement                    | Gestionnaire d'évènement global                                                  | Déclenchement                                                                                                                                                                                |
+| ---------------------------- | -------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{event('drag')}}     | {{domxref('GlobalEventHandlers.ondrag','ondrag')}}             | …un objet déplaçable (que ce soit un élément ou une sélection de texte) est déplacée.                                                                                                        |
+| {{event('dragend')}} | {{domxref('GlobalEventHandlers.ondragend','ondragend')}}     | …une opération de déplacement se termine (en relâchant le bouton de la souris ou en utilisant la touche Echap, voir [Terminer un déplacement](/en-US/docs/DragDrop/Drag_Operations#dragend)) |
+| {{event('dragenter')}} | {{domxref('GlobalEventHandlers.ondragenter','ondragenter')}} | …un élément en cours de déplacement arrive sur une zone de dépôt valide (voir [indiquer une cible de destination](/fr/docs/DragDrop/Drag_Operations#droptargets)).                           |
+| {{event('dragexit')}} | {{domxref('GlobalEventHandlers.ondragexit','ondragexit')}}     | …un élément n'est plus la sélection immédiate du déplacement.                                                                                                                                |
+| {{event('dragleave')}} | {{domxref('GlobalEventHandlers.ondragleave','ondragleave')}} | …un élément en cours de déplacement quitte une zone de dépôt valide.                                                                                                                         |
+| {{event('dragover')}} | {{domxref('GlobalEventHandlers.ondragover','ondragover')}}     | …un élément en cours de déplacement est en cours de survol d'une zone de dépôt valide (cet évènement est déclenché toutes les quelques centaines de millisecondes).                          |
+| {{event('dragstart')}} | {{domxref('GlobalEventHandlers.ondragstart','ondragstart')}} | …l'utilisateur commence à déplacer un élément (voir [démarrer une opération de glissement](/fr/docs/DragDrop/Drag_Operations#dragstart)).                                                    |
+| {{event('drop')}}     | {{domxref('GlobalEventHandlers.ondrop','ondrop')}}             | …un élément est déposé sur une cible valide (voir [déposer un élément](/fr/docs/DragDrop/Drag_Operations#drop)).                                                                             |
+
+> **Note :** Les évènements `dragstart` et `dragend` ne sont pas déclenchés lors qu'on glisse-dépose un fichier de l'appareil dans le navigateur.
+
+## Interfaces
+
+Les interfaces fournies par cette API sont
+
+- {{domxref("DragEvent")}},
+- {{domxref("DataTransfer")}},
+- {{domxref("DataTransferItem")}}
+- {{domxref("DataTransferItemList")}}.
+
+L'interface {{domxref("DragEvent")}} possède un constructeur et une propriété {{domxref("DragEvent.dataTransfer","dataTransfer")}} qui est un objet {{domxref("DataTransfer")}}.
+
+Les objets {{domxref("DataTransfer")}} incluent l'état du glisser-déposer, le type de déplacement (`copy` ou `move`), les données déplacées (un ou plusieurs objets) et le type MIME de chaque objet déplacé. Les objets {{domxref("DataTransfer")}} possèdent également des méthodes permettant d'ajouter ou de retirer des objets aux données déplacées.
+
+Les interfaces {{domxref("DragEvent")}} et {{domxref("DataTransfer")}} sont standard et suffisent à apporter des fonctionnalités de glisser/déposer. Toutefois, Firefox prend en charge quelques extensions spécifiques à Gecko (cf. ci-après) pour l'objet {{domxref("DataTransfer")}} (bien entendu, ces extensions ne fonctionneront que dans Firefox et pas dans les autres navigateurs).
+
+Chaque objet {{domxref("DataTransfer")}} possède une propriété  {{domxref("DataTransfer.items","items")}} qui est une liste ({{domxref("DataTransferItemList","list")}}) d'objets {{domxref("DataTransferItem")}}. Un objet {{domxref("DataTransferItem")}} représente un seul objet déplacé, avec une propriété {{domxref("DataTransferItem.kind","kind")}} qui indique s'il s'agit d'un texte (`string`) ou d'un fichier (`file`) et une propriété {{domxref("DataTransferItem.type","type")}} qui correspond au type MIME de la donnée déplacée. L'objet {{domxref("DataTransferItem")}} possède également des méthodes pour consulter les données de l'objet déplacé.
+
+L'objet {{domxref("DataTransferItemList")}} est une liste d'objets {{domxref("DataTransferItem")}}. La liste possède des méthodes pour ajouter un objet en déplacement à la liste, pour retirer un objet de la liste ou pour vider la liste de tout ses objets.
+
+La différence principale entre {{domxref("DataTransfer")}} et {{domxref("DataTransferItem")}} est l'utilisation de la méthode synchrone {{domxref("DataTransfer.getData","getData()")}} pour la première et de la méthode asynchrone {{domxref("DataTransferItem.getAsString","getAsString()")}} pour la deuxième.
+
+> **Note :** {{domxref("DragEvent")}} et {{domxref("DataTransfer")}} sont largement prises en charge par les navigateurs de bureau tandis que {{domxref("DataTransferItem")}} et {{domxref("DataTransferItemList")}} ont une compatibilité plus restreinte. Voir la section ci-après sur l'interopérabilité.
+
+### Interfaces spécifiques à Gecko
+
+Mozilla / Firefox prend en charge certaines fonctionnalités qui ne font pas partie du modèle standard. Ce sont des fonctions utilitaires pour aider au déplacement de plusieurs objets ou de données qui ne sont pas du texte (des fichiers par exemple). Pour plus d'informations, voir [Glisser-déposer plusieurs objets](/fr/docs/Web/API/HTML_Drag_and_Drop_API/Multiple_items). Voir aussi la page de référence de {{domxref("DataTransfer")}} pour la liste de l'ensemble [des propriétés spécifique à Gecko](/fr/docs/Web/API/DataTransfer#Gecko_properties) et [des méthodes spécifiques à Gecko](/fr/docs/Web/API/DataTransfer#Gecko_methods).
+
+## Bases
+
+Dans cette section, nous allons voir les premières étapes nécessaires aux fonctionnalités de glisser-déposer dans une application.
+
+### Identifier ce qui peut être déplacé
+
+Pour qu'un élément puisse être déplacé, il faut lui ajouter l'attribut {{htmlattrxref("draggable")}} ainsi que le gestionnaire d'évènement global {{domxref("GlobalEventHandlers.ondragstart","ondragstart")}} :
+
+```html
+<script>
 function dragstart_handler(ev) {
  // On ajoute l'identifiant de l'élément cible à l'objet de transfert
  ev.dataTransfer.setData("text/plain", ev.target.innerText);
 }
-&lt;/script&gt;
+</script>
 
-&lt;p id="p1" draggable="true" ondragstart="dragstart_handler(event)"&gt;Cet élément est déplaçable.&lt;/p&gt;
-</pre>
+<p id="p1" draggable="true" ondragstart="dragstart_handler(event)">Cet élément est déplaçable.</p>
+```
 
-<p>Voir <a href="/fr/docs/Web/HTML/Global_attributes/draggable" >la page de référence sur l'attribut <code>draggable</code></a> et <a href="/fr/docs/Web/Guide/HTML/Drag_operations#draggableattribute">le guide sur les opérations de déplacement</a> pour plus d'informations.</p>
+Voir [la page de référence sur l'attribut `draggable`](/fr/docs/Web/HTML/Global_attributes/draggable) et [le guide sur les opérations de déplacement](/fr/docs/Web/Guide/HTML/Drag_operations#draggableattribute) pour plus d'informations.
 
-<h3 id="Définir_les_données_déplacées">Définir les données déplacées</h3>
+### Définir les données déplacées
 
-<p>Une application peut inclure plusieurs objets dans une opération de glisser/déposer. Chaque objet est une chaîne de caractères ({{domxref("DOMString")}}) ayant un type MIME particulier (indiqué par son attribut <code>type</code>) tel que <code>text/html</code>.</p>
+Une application peut inclure plusieurs objets dans une opération de glisser/déposer. Chaque objet est une chaîne de caractères ({{domxref("DOMString")}}) ayant un type MIME particulier (indiqué par son attribut `type`) tel que `text/html`.
 
-<p>Chaque {{domxref("DragEvent")}} possède une propriété  {{domxref("DragEvent.dataTransfer","dataTransfer")}} contenant les données transportées. Cette propriété (un objet {{domxref("DataTransfer")}}) possède des méthodes pour gérer les données transportées. La méthode {{domxref("DataTransfer.setData","setData()")}} permet d'ajouter un objet aux données transportées :</p>
+Chaque {{domxref("DragEvent")}} possède une propriété  {{domxref("DragEvent.dataTransfer","dataTransfer")}} contenant les données transportées. Cette propriété (un objet {{domxref("DataTransfer")}}) possède des méthodes pour gérer les données transportées. La méthode {{domxref("DataTransfer.setData","setData()")}} permet d'ajouter un objet aux données transportées :
 
-<pre class="brush: js">function dragstart_handler(ev) {
+```js
+function dragstart_handler(ev) {
   // On ajoute différents types de données transportées
   ev.dataTransfer.setData("text/plain", ev.target.innerText);
   ev.dataTransfer.setData("text/html", ev.target.outerHTML);
   ev.dataTransfer.setData("text/uri-list", ev.target.ownerDocument.location.href);
 }
-</pre>
+```
 
-<p>Pour connaître la liste des types de donnée communément utilisées lors d'un glisser/déposer (texte, HTML, liens, fichiers, etc.), voir <a href="/fr/docs/DragDrop/Recommended_Drag_Types" >les types recommandés</a>. Pour plus d'informations sur les informations transportées, voir <a href="/fr/docs/Web/Guide/HTML/Drag_operations#dragdata" >Drag Data</a>.</p>
+Pour connaître la liste des types de donnée communément utilisées lors d'un glisser/déposer (texte, HTML, liens, fichiers, etc.), voir [les types recommandés](/fr/docs/DragDrop/Recommended_Drag_Types). Pour plus d'informations sur les informations transportées, voir [Drag Data](/fr/docs/Web/Guide/HTML/Drag_operations#dragdata).
 
-<h3 id="Définir_limage_pour_le_déplacement">Définir l'image pour le déplacement</h3>
+### Définir l'image pour le déplacement
 
-<p>Par défaut, le navigateur fournit une image qui apparaît à côté du pointeur lors de l'opération de déplacement. Toutefois, une application peut définir une image personnalisée grâce à la méthode {{domxref("DataTransfer.setDragImage","setDragImage()")}} :</p>
+Par défaut, le navigateur fournit une image qui apparaît à côté du pointeur lors de l'opération de déplacement. Toutefois, une application peut définir une image personnalisée grâce à la méthode {{domxref("DataTransfer.setDragImage","setDragImage()")}} :
 
-<pre class="brush: js">function dragstart_handler(ev) {
+```js
+function dragstart_handler(ev) {
   // On crée une image qu'on utilise pour le déplacement
   // Note : on changera "example.gif" vers une vraie image
   // (sinon l'image par défaut sera utilisée)
@@ -161,38 +119,38 @@ function dragstart_handler(ev) {
   img.src = 'example.gif';
   ev.dataTransfer.setDragImage(img, 10, 10);
 }
-</pre>
+```
 
-<p>Pour en savoir plus, voir <a href="/fr/docs/DragDrop/Drag_Operations#dragfeedback" >Définir l'image de <em>feedback</em> pour le glisser-déposer</a>.</p>
+Pour en savoir plus, voir [Définir l'image de _feedback_ pour le glisser-déposer](/fr/docs/DragDrop/Drag_Operations#dragfeedback).
 
-<h3 id="Définir_leffet_de_déplacement">Définir l'effet de déplacement</h3>
+### Définir l'effet de déplacement
 
-<p>La propriété {{domxref("DataTransfer.dropEffect","dropEffect")}} est utilisée pour fournir un retour à l'utilisateur qui effectue l'opération de glisser/déposer. Généralement, cela se traduit par la modification du curseur affiché par le navigateur lors du déplacement.</p>
+La propriété {{domxref("DataTransfer.dropEffect","dropEffect")}} est utilisée pour fournir un retour à l'utilisateur qui effectue l'opération de glisser/déposer. Généralement, cela se traduit par la modification du curseur affiché par le navigateur lors du déplacement.
 
-<p>Il est possible de définir trois effets :</p>
+Il est possible de définir trois effets :
 
-<ul>
- <li><code>copy</code> : indique que les données déplacées seront copiées depuis l'emplacement source vers la cible.</li>
- <li><code>move</code> : indique que les données déplacées seront déplacées depuis l'emplacement source vers la cible.</li>
- <li><code>link</code> : indique qu'une relation ou une connexion sera créée entre la source et la cible.</li>
-</ul>
+- `copy` : indique que les données déplacées seront copiées depuis l'emplacement source vers la cible.
+- `move` : indique que les données déplacées seront déplacées depuis l'emplacement source vers la cible.
+- `link` : indique qu'une relation ou une connexion sera créée entre la source et la cible.
 
-<p>Lors de l'opération de déplacement, les effets peuvent être modifiés afin d'indiquer que certains effets sont autorisés à certains emplacements.</p>
+Lors de l'opération de déplacement, les effets peuvent être modifiés afin d'indiquer que certains effets sont autorisés à certains emplacements.
 
-<p>Voici un exemple illustrant l'utilisation de cette propriété.</p>
+Voici un exemple illustrant l'utilisation de cette propriété.
 
-<pre class="brush: js">function dragstart_handler(ev) {
+```js
+function dragstart_handler(ev) {
   ev.dataTransfer.dropEffect = "copy";
 }
-</pre>
+```
 
-<p>See <a href="/en-US/docs/Web/Guide/HTML/Drag_operations#drageffects" >Drag Effects</a> for more details.</p>
+See [Drag Effects](/en-US/docs/Web/Guide/HTML/Drag_operations#drageffects) for more details.
 
-<h3 id="Définir_la_zone_où_déposer_lélément_déplacé">Définir la zone où déposer l'élément déplacé</h3>
+### Définir la zone où déposer l'élément déplacé
 
-<p>Par défaut, le navigateur empêche de déposer quoi que ce soit sur la plupart des éléments HTML. Pour modifier ce comportement, il faut qu'un élément devienne une zone cible ou qu'il soit identifié comme "<em>droppable</em>". L'élément doit avoir les deux gestionnaires d'évènements {{domxref("GlobalEventHandlers.ondragover","ondragover")}} et {{domxref("GlobalEventHandlers.ondrop","ondrop")}} comme attributs. Dans l'exemple suivant, on montre comment utiliser ces attributs et on fournit des gestionnaires d'évènements simples associés :</p>
+Par défaut, le navigateur empêche de déposer quoi que ce soit sur la plupart des éléments HTML. Pour modifier ce comportement, il faut qu'un élément devienne une zone cible ou qu'il soit identifié comme "_droppable_". L'élément doit avoir les deux gestionnaires d'évènements {{domxref("GlobalEventHandlers.ondragover","ondragover")}} et {{domxref("GlobalEventHandlers.ondrop","ondrop")}} comme attributs. Dans l'exemple suivant, on montre comment utiliser ces attributs et on fournit des gestionnaires d'évènements simples associés :
 
-<pre class="brush: html">&lt;script&gt;
+```html
+<script>
 function dragover_handler(ev) {
  ev.preventDefault();
  ev.dataTransfer.dropEffect = "move";
@@ -203,22 +161,23 @@ function drop_handler(ev) {
  var data = ev.dataTransfer.getData("text/plain");
  ev.target.appendChild(document.getElementById(data));
 }
-&lt;/script&gt;
+</script>
 
-&lt;p id="target" ondrop="drop_handler(event)" ondragover="dragover_handler(event)"&gt;Zone pour déposer&lt;/p&gt;
-</pre>
+<p id="target" ondrop="drop_handler(event)" ondragover="dragover_handler(event)">Zone pour déposer</p>
+```
 
-<p>On voit ici que chaque gestionnaire invoque {{domxref("Event.preventDefault","preventDefault()")}} afin d'éviter toute gestion d'évènement ultérieure (comme <a href="/fr/docs/Web/API/Touch_events">les évènements tactiles</a> ou <a href="/fr/docs/Web/API/Pointer_events">les évènements de pointeur</a>).</p>
+On voit ici que chaque gestionnaire invoque {{domxref("Event.preventDefault","preventDefault()")}} afin d'éviter toute gestion d'évènement ultérieure (comme [les évènements tactiles](/fr/docs/Web/API/Touch_events) ou [les évènements de pointeur](/fr/docs/Web/API/Pointer_events)).
 
-<p>Pour plus d'information, voir <a href="/fr/docs/Web/Guide/HTML/Drag_operations#droptargets">Indiquer une cible pour un glisser-déposer</a>.</p>
+Pour plus d'information, voir [Indiquer une cible pour un glisser-déposer](/fr/docs/Web/Guide/HTML/Drag_operations#droptargets).
 
-<h3 id="Gérer_le_dépôt_de_lobjet">Gérer le dépôt de l'objet</h3>
+### Gérer le dépôt de l'objet
 
-<p>Le gestionnaire de l'évènement {{event("drop")}} permet de gérer les données déposées avec la logique de l'application. Généralement, une application utilisera {{domxref("DataTransfer.getData","getData()")}} afin de récupérer les données déplacées et les traitera. L'application peut choisir d'avoir un comportement différent selon la valeur de {{domxref("DataTransfer.dropEffect","dropEffect")}} et/ou celles des autres propriétés.</p>
+Le gestionnaire de l'évènement {{event("drop")}} permet de gérer les données déposées avec la logique de l'application. Généralement, une application utilisera {{domxref("DataTransfer.getData","getData()")}} afin de récupérer les données déplacées et les traitera. L'application peut choisir d'avoir un comportement différent selon la valeur de {{domxref("DataTransfer.dropEffect","dropEffect")}} et/ou celles des autres propriétés.
 
-<p>Dans l'exemple suivant, on montre un gestionnaire pour le dépot de l'objet : on récupère l'identifiant (<code>id</code>) de l'élément déplacé puis on utilise celui-ci afin de le déplacer depuis la source vers la cible :</p>
+Dans l'exemple suivant, on montre un gestionnaire pour le dépot de l'objet : on récupère l'identifiant (`id`) de l'élément déplacé puis on utilise celui-ci afin de le déplacer depuis la source vers la cible :
 
-<pre class="brush: html">&lt;script&gt;
+```html
+<script>
 function dragstart_handler(ev) {
  // On ajoute l'identifiant de l'élément cible à l'objet de transfert
  ev.dataTransfer.setData("application/my-app", ev.target.id);
@@ -235,41 +194,35 @@ function drop_handler(ev) {
  var data = ev.dataTransfer.getData("application/my-app");
  ev.target.appendChild(document.getElementById(data));
 }
-&lt;/script&gt;
+</script>
 
-&lt;p id="p1" draggable="true" ondragstart="dragstart_handler(event)"&gt;Cet élément peut être déplacé.&lt;/p&gt;
-&lt;div id="target" ondrop="drop_handler(event)" ondragover="dragover_handler(event)"&gt;Zone pour le dépôt&lt;/div&gt;
-</pre>
+<p id="p1" draggable="true" ondragstart="dragstart_handler(event)">Cet élément peut être déplacé.</p>
+<div id="target" ondrop="drop_handler(event)" ondragover="dragover_handler(event)">Zone pour le dépôt</div>
+```
 
-<p>Pour plus d'information, voir <a href="/fr/docs/Web/Guide/HTML/Drag_operations#drop">Gérer le dépôt lors d'une opération de glisser-déposer</a>.</p>
+Pour plus d'information, voir [Gérer le dépôt lors d'une opération de glisser-déposer](/fr/docs/Web/Guide/HTML/Drag_operations#drop).
 
-<h3 id="Terminer_lopération_de_glisserdéposer">Terminer l'opération de glisser/déposer</h3>
+### Terminer l'opération de glisser/déposer
 
-<p>À la fin de l'opération, c'est l'évènement {{event("dragend")}} qui est déclenché <em>sur l'élément source</em> (celui qui a été "saisi" au début). Cet évènement est déclenché lorsque l'opération est terminée ou qu'elle a été annulée. Le gestionnaire d'évènement pour {{event("dragend")}} peut vérifier la valeur de la propriété {{domxref("DataTransfer.dropEffect","dropEffect")}} afin de déterminer si l'opération a réussi ou non.</p>
+À la fin de l'opération, c'est l'évènement {{event("dragend")}} qui est déclenché _sur l'élément source_ (celui qui a été "saisi" au début). Cet évènement est déclenché lorsque l'opération est terminée ou qu'elle a été annulée. Le gestionnaire d'évènement pour {{event("dragend")}} peut vérifier la valeur de la propriété {{domxref("DataTransfer.dropEffect","dropEffect")}} afin de déterminer si l'opération a réussi ou non.
 
-<p>Pour plus d'informations sur la gestion de la fin d'une opération de glisser-déposer, voir <a href="/fr/docs/DragDrop/Drag_Operations#dragend" >Terminer un glisser-déposer</a>.</p>
+Pour plus d'informations sur la gestion de la fin d'une opération de glisser-déposer, voir [Terminer un glisser-déposer](/fr/docs/DragDrop/Drag_Operations#dragend).
 
-<h2 id="Interopérabilité">Interopérabilité</h2>
+## Interopérabilité
 
-<p>Comme on peut le voir <a href="/en-US/docs/Web/API/DataTransferItem#Browser_compatibility">dans le tableau de compatibilité pour l'interface <code>DataTransferItem</code></a>, la prise en charge du <em>drag-and-drop</em> est assez répandue parmi les navigateurs de bureau à l'exception des interfaces {{domxref("DataTransferItem")}} et {{domxref("DataTransferItemList")}}. Ce tableau montre également que la prise en charge sur mobile est assez faible.</p>
+Comme on peut le voir [dans le tableau de compatibilité pour l'interface `DataTransferItem`](/en-US/docs/Web/API/DataTransferItem#Browser_compatibility), la prise en charge du _drag-and-drop_ est assez répandue parmi les navigateurs de bureau à l'exception des interfaces {{domxref("DataTransferItem")}} et {{domxref("DataTransferItemList")}}. Ce tableau montre également que la prise en charge sur mobile est assez faible.
 
-<h2 id="Examples_and_demos">Exemples et démos</h2>
+## Exemples et démos
 
-<ul>
- <li><a href="https://mdn.github.io/dom-examples/drag-and-drop/copy-move-DataTransfer.html">Copier et déplacer des éléments avec l'interface <code>DataTransfer</code></a></li>
- <li><a href="http://mdn.github.io/dom-examples/drag-and-drop/copy-move-DataTransferItemList.html">Copier et déplacer des éléments avec l'interface <code>DataTransferListItem</code></a></li>
- <li><a href="https://jsbin.com/hiqasek/edit?html,js,output">JSBin : Glisser-déposer des fichiers</a></li>
- <li>
-  <p><a href="https://park.glitch.me/">Un parking réalisé avec l'API Drag and Drop</a> (<a href="https://glitch.com/edit/#!/park">lien pour éditer le code</a>)</p>
- </li>
-</ul>
+- [Copier et déplacer des éléments avec l'interface `DataTransfer`](https://mdn.github.io/dom-examples/drag-and-drop/copy-move-DataTransfer.html)
+- [Copier et déplacer des éléments avec l'interface `DataTransferListItem`](http://mdn.github.io/dom-examples/drag-and-drop/copy-move-DataTransferItemList.html)
+- [JSBin : Glisser-déposer des fichiers](https://jsbin.com/hiqasek/edit?html,js,output)
+- [Un parking réalisé avec l'API Drag and Drop](https://park.glitch.me/) ([lien pour éditer le code](https://glitch.com/edit/#!/park))
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations">Les opérations de déplacement</a></li>
- <li><a href="/fr/docs/Web/API/HTML_Drag_and_Drop_API/Multiple_items">Glisser-déposer plusieurs objets</a></li>
- <li><a href="/fr/docs/Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types">Types de déplacement recommandés</a></li>
- <li><a href="https://html.spec.whatwg.org/multipage/interaction.html#dnd">Spécification HTML5 : Drag and Drop</a></li>
- <li><a href="http://caniuse.com/#search=draganddrop">Données d'interopérabilité pour l'API Drag and Drop sur CanIUse</a></li>
-</ul>
+- [Les opérations de déplacement](/fr/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations)
+- [Glisser-déposer plusieurs objets](/fr/docs/Web/API/HTML_Drag_and_Drop_API/Multiple_items)
+- [Types de déplacement recommandés](/fr/docs/Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types)
+- [Spécification HTML5 : Drag and Drop](https://html.spec.whatwg.org/multipage/interaction.html#dnd)
+- [Données d'interopérabilité pour l'API Drag and Drop sur CanIUse](http://caniuse.com/#search=draganddrop)
diff --git a/files/fr/web/api/htmlbaseelement/index.md b/files/fr/web/api/htmlbaseelement/index.md
index 955bbf4122..37bec4f2b6 100644
--- a/files/fr/web/api/htmlbaseelement/index.md
+++ b/files/fr/web/api/htmlbaseelement/index.md
@@ -3,74 +3,35 @@ title: HTMLBaseElement
 slug: Web/API/HTMLBaseElement
 translation_of: Web/API/HTMLBaseElement
 ---
-<div>
-<div>{{APIRef("HTML DOM")}}</div>
-</div>
+{{APIRef("HTML DOM")}}L'interface **`HTMLBaseElement`** contient l'URI de base pour un document. Cet objet hérite de toutes les propriétés et des méthodes telles quelles sont décrites dans l'interface {{domxref("HTMLElement")}}.
 
-<div></div>
+## Propriétés
 
-<div>L'interface <strong><code>HTMLBaseElement</code></strong> contient l'URI de base pour un document. Cet objet hérite de toutes les propriétés et des méthodes telles quelles sont décrites dans l'interface {{domxref("HTMLElement")}}.</div>
+_Hérite des propriétés de son parent, {{domxref("HTMLElement")}}._
 
-<div></div>
+- {{domxref("HTMLBaseElement.href")}}
+  - : est un {{domxref("DOMString")}} qui reflète l'attribut HTML {{htmlattrxref("href", "base")}}, contenant l'URL de base pour les URLs relatives dans le document.
+- {{domxref("HTMLBaseElement.target")}}
+  - : est un {{domxref("DOMString")}} qui reflète l'attribut HTML {{htmlattrxref("target", "base")}}, contenant un contexte de navigation cible par défaut ou une frame pour les éléments qui n'ont pas de cibe spécifiée.
 
-<h2 id="Propriétés">Propriétés</h2>
+## Methodes
 
-<p><em>Hérite des propriétés de son parent, {{domxref("HTMLElement")}}.</em></p>
+_Pas de méthodes spécifiques; Hérite des propriétés de son parent, {{domxref("HTMLElement")}}._
 
-<dl>
- <dt>{{domxref("HTMLBaseElement.href")}}</dt>
- <dd>est un {{domxref("DOMString")}} qui reflète l'attribut HTML {{htmlattrxref("href", "base")}}, contenant l'URL de base pour les URLs relatives dans le document.</dd>
- <dt>{{domxref("HTMLBaseElement.target")}}</dt>
- <dd>est un {{domxref("DOMString")}} qui reflète l'attribut HTML {{htmlattrxref("target", "base")}}, contenant un contexte de navigation cible par défaut ou une frame pour les éléments qui n'ont pas de cibe spécifiée.</dd>
-</dl>
+## Spécifications
 
-<h2 id="Methodes">Methodes</h2>
+| Spécification                                                                                                        | Statut                           | Commentaire                                                                    |
+| -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------------------------------ |
+| {{SpecName('HTML WHATWG', "semantics.html#the-base-element", "HTMLBaseElement")}}         | {{Spec2('HTML WHATWG')}} | Aucun changement depuis le dernier snapshot, {{SpecName("HTML5.1")}}. |
+| {{SpecName('HTML5.1', "document-metadata.html#the-base-element", "HTMLBaseElement")}}     | {{Spec2('HTML5.1')}}     | Aucun changement depuis {{SpecName("HTML5 W3C")}}                       |
+| {{SpecName('HTML5 W3C', "document-metadata.html#the-base-element", "HTMLBaseElement")}} | {{Spec2('HTML5 W3C')}}     | Aucun changement depuis {{SpecName("DOM2 HTML")}}.                      |
+| {{SpecName('DOM2 HTML', 'html.html#ID-73629039', 'HTMLBaseElement')}}                         | {{Spec2('DOM2 HTML')}}     | Aucun changement depuis {{SpecName("DOM1")}}.                          |
+| {{SpecName('DOM1', 'level-one-html.html#ID-73629039', 'HTMLBaseElement')}}                 | {{Spec2('DOM1')}}         | Première définition.                                                           |
 
-<p><em>Pas de méthodes spécifiques; Hérite des propriétés de son parent, {{domxref("HTMLElement")}}.</em></p>
+## Compatibilités navigateur
 
-<h2 id="Spécifications">Spécifications</h2>
+{{Compat("api.HTMLBaseElement")}}
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "semantics.html#the-base-element", "HTMLBaseElement")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Aucun changement depuis le dernier snapshot, {{SpecName("HTML5.1")}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5.1', "document-metadata.html#the-base-element", "HTMLBaseElement")}}</td>
-   <td>{{Spec2('HTML5.1')}}</td>
-   <td>Aucun changement depuis {{SpecName("HTML5 W3C")}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', "document-metadata.html#the-base-element", "HTMLBaseElement")}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Aucun changement depuis {{SpecName("DOM2 HTML")}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 HTML', 'html.html#ID-73629039', 'HTMLBaseElement')}}</td>
-   <td>{{Spec2('DOM2 HTML')}}</td>
-   <td>Aucun changement depuis {{SpecName("DOM1")}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM1', 'level-one-html.html#ID-73629039', 'HTMLBaseElement')}}</td>
-   <td>{{Spec2('DOM1')}}</td>
-   <td>Première définition.</td>
-  </tr>
- </tbody>
-</table>
+## Voir aussi
 
-<h2 id="Compatibilités_navigateur">Compatibilités navigateur</h2>
-
-<p>{{Compat("api.HTMLBaseElement")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>L'élément HTML implémentant l'interface {{ HTMLElement("base") }}</li>
-</ul>
+- L'élément HTML implémentant l'interface {{ HTMLElement("base") }}
diff --git a/files/fr/web/api/htmlbasefontelement/index.md b/files/fr/web/api/htmlbasefontelement/index.md
index eda1725bb9..f551437ac5 100644
--- a/files/fr/web/api/htmlbasefontelement/index.md
+++ b/files/fr/web/api/htmlbasefontelement/index.md
@@ -9,57 +9,38 @@ tags:
   - Reference
 translation_of: Web/API/HTMLBaseFontElement
 ---
-<div>{{APIRef("HTML DOM")}}{{obsolete_header}}</div>
+{{APIRef("HTML DOM")}}{{obsolete_header}}
 
-<p>L'interface <strong><code>HTMLBaseFontElement</code></strong> fournit des propriétés spéciales (au-delà de l'interface classique {{domxref("HTMLElement")}} dont elle dispose également par héritage) pour manipuler les éléments {{HTMLElement("basefont")}}.</p>
+L'interface **`HTMLBaseFontElement`** fournit des propriétés spéciales (au-delà de l'interface classique {{domxref("HTMLElement")}} dont elle dispose également par héritage) pour manipuler les éléments {{HTMLElement("basefont")}}.
 
-<p>L'élément <code>&lt;basefont&gt;</code> est obsolète en HTML4 et supprimé en HTML5. Cette dernière spécification exige que cet élément implémente {{domxref("HTMLUnknownElement")}} plutôt que <code>HTMLBaseFontElement</code>.</p>
+L'élément `<basefont>` est obsolète en HTML4 et supprimé en HTML5. Cette dernière spécification exige que cet élément implémente {{domxref("HTMLUnknownElement")}} plutôt que `HTMLBaseFontElement`.
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<p><em>Hérite des propriétés de son parent, {{domxref("HTMLElement")}}.</em></p>
+_Hérite des propriétés de son parent, {{domxref("HTMLElement")}}._
 
-<dl>
- <dt>{{domxref("HTMLBaseFontElement.color")}}</dt>
- <dd>Est un {{domxref("DOMString")}} représentant la couleur du texte en utilisant soit une couleur nommée soit une couleur spécifiée au format hexadécimal <code>#RRGGBB</code>.</dd>
- <dt>{{domxref("HTMLBaseFontElement.face")}}</dt>
- <dd>Est un {{domxref("DOMString")}} représentant une liste d'un ou plusieurs noms de polices. Le texte du document dans le style par défaut est rendu dans la première face de police prise en charge par le navigateur du client. Si aucune police répertoriée n'est installée sur le système local, le navigateur utilise généralement par défaut la police proportionnelle ou à largeur fixe pour ce système.</dd>
- <dt>{{domxref("HTMLBaseFontElement.size")}}</dt>
- <dd>Est un {{domxref("DOMString")}} représentant la taille de la police sous forme de valeur numérique ou relative. Les valeurs numériques vont de <code>1</code> à <code>7</code>, <code>1</code> étant le plus petit et <code>3</code> la valeur par défaut. La valeur relative comme par un <code>'+'</code> ou un <code>'-</code>'.</dd>
-</dl>
+- {{domxref("HTMLBaseFontElement.color")}}
+  - : Est un {{domxref("DOMString")}} représentant la couleur du texte en utilisant soit une couleur nommée soit une couleur spécifiée au format hexadécimal `#RRGGBB`.
+- {{domxref("HTMLBaseFontElement.face")}}
+  - : Est un {{domxref("DOMString")}} représentant une liste d'un ou plusieurs noms de polices. Le texte du document dans le style par défaut est rendu dans la première face de police prise en charge par le navigateur du client. Si aucune police répertoriée n'est installée sur le système local, le navigateur utilise généralement par défaut la police proportionnelle ou à largeur fixe pour ce système.
+- {{domxref("HTMLBaseFontElement.size")}}
+  - : Est un {{domxref("DOMString")}} représentant la taille de la police sous forme de valeur numérique ou relative. Les valeurs numériques vont de `1` à `7`, `1` étant le plus petit et `3` la valeur par défaut. La valeur relative comme par un `'+'` ou un `'-`'.
 
-<h2 id="Méthodes">Méthodes</h2>
+## Méthodes
 
-<p><em>Pas de méthode spécifique; hérite des méthodes de son parent, {{domxref("HTMLElement")}}.</em></p>
+_Pas de méthode spécifique; hérite des méthodes de son parent, {{domxref("HTMLElement")}}._
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName("DOM2 HTML", "html.html#ID-32774408", "HTMLBaseFontElement")}}</td>
-   <td>{{Spec2('DOM2 HTML')}}</td>
-   <td>Pas de changement.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("DOM1", "level-one-html.html#ID-32774408", "HTMLBaseFontElement")}}</td>
-   <td>{{Spec2('DOM1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                            | Statut                       | Commentaire          |
+| -------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName("DOM2 HTML", "html.html#ID-32774408", "HTMLBaseFontElement")}}         | {{Spec2('DOM2 HTML')}} | Pas de changement.   |
+| {{SpecName("DOM1", "level-one-html.html#ID-32774408", "HTMLBaseFontElement")}} | {{Spec2('DOM1')}}     | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.HTMLBaseFontElement")}}</p>
+{{Compat("api.HTMLBaseFontElement")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>L'élément HTML {{HTMLElement("basefont")}} implémentait cette interface.</li>
-</ul>
+- L'élément HTML {{HTMLElement("basefont")}} implémentait cette interface.
diff --git a/files/fr/web/api/htmlbodyelement/index.md b/files/fr/web/api/htmlbodyelement/index.md
index 1e66d99e04..79b09268f3 100644
--- a/files/fr/web/api/htmlbodyelement/index.md
+++ b/files/fr/web/api/htmlbodyelement/index.md
@@ -8,111 +8,78 @@ tags:
   - Reference
 translation_of: Web/API/HTMLBodyElement
 ---
-<div>{{APIRef("HTML DOM")}}</div>
+{{APIRef("HTML DOM")}}
 
-<p>L'interface <strong> <code>HTMLBodyElement</code> </strong> des propriétés particulières (au-delà de celles de l'interface {{ domxref("HTMLElement") }} dont-elle hérite également) pour manipuler les éléments.</p>
+L'interface **`HTMLBodyElement` **des propriétés particulières (au-delà de celles de l'interface {{ domxref("HTMLElement") }} dont-elle hérite également) pour manipuler les éléments.
 
-<h2 id="propriétés">propriétés</h2>
+## propriétés
 
-<p><em>Propriétés hérite de son parent, {{domxref("HTMLElement")}} et de {{domxref("WindowEventHandlers")}}.</em></p>
+_Propriétés hérite de son parent, {{domxref("HTMLElement")}} et de {{domxref("WindowEventHandlers")}}._
 
-<dl>
- <dt>{{domxref("HTMLBodyElement.aLink")}} {{obsolete_inline}}</dt>
- <dd>Est un {{ domxref("DOMString") }} qui représente la couleur des liens hypertextes actifs.</dd>
- <dt>{{domxref("HTMLBodyElement.background")}} {{obsolete_inline}}</dt>
- <dd>Est un {{ domxref("DOMString") }} qui représente la description de l'emplacement de la ressource d'image d'arrière-plan. Notez que ce n'est pas un URI, même si certaines anciennes versions de certains navigateurs s'y attendent.</dd>
- <dt>{{domxref("HTMLBodyElement.bgColor")}} {{obsolete_inline}}</dt>
- <dd>Est un {{ domxref("DOMString") }} qui représente la couleur de fond du document.</dd>
- <dt>{{domxref("HTMLBodyElement.link")}} {{obsolete_inline}}</dt>
- <dd>Est un {{ domxref("DOMString") }} qui représente la couleur des liens non visités.</dd>
- <dt>{{domxref("HTMLBodyElement.text")}} {{obsolete_inline}}</dt>
- <dd>Est un {{ domxref("DOMString") }} qui représente la couleur de premier plan du texte.</dd>
- <dt>{{domxref("HTMLBodyElement.vLink")}} {{obsolete_inline}}</dt>
- <dd>Est un {{ domxref("DOMString") }} qui représente la couleur des liens visités.</dd>
-</dl>
+- {{domxref("HTMLBodyElement.aLink")}} {{obsolete_inline}}
+  - : Est un {{ domxref("DOMString") }} qui représente la couleur des liens hypertextes actifs.
+- {{domxref("HTMLBodyElement.background")}} {{obsolete_inline}}
+  - : Est un {{ domxref("DOMString") }} qui représente la description de l'emplacement de la ressource d'image d'arrière-plan. Notez que ce n'est pas un URI, même si certaines anciennes versions de certains navigateurs s'y attendent.
+- {{domxref("HTMLBodyElement.bgColor")}} {{obsolete_inline}}
+  - : Est un {{ domxref("DOMString") }} qui représente la couleur de fond du document.
+- {{domxref("HTMLBodyElement.link")}} {{obsolete_inline}}
+  - : Est un {{ domxref("DOMString") }} qui représente la couleur des liens non visités.
+- {{domxref("HTMLBodyElement.text")}} {{obsolete_inline}}
+  - : Est un {{ domxref("DOMString") }} qui représente la couleur de premier plan du texte.
+- {{domxref("HTMLBodyElement.vLink")}} {{obsolete_inline}}
+  - : Est un {{ domxref("DOMString") }} qui représente la couleur des liens visités.
 
-<h2 id="méthodes">méthodes</h2>
+## méthodes
 
-<p><em>Aucune méthode spécifique; méthodes hérite de ses parents, {{domxref("HTMLElement")}} et de {{domxref("WindowEventHandlers")}}</em><em>.</em></p>
+_Aucune méthode spécifique; méthodes hérite de ses parents, {{domxref("HTMLElement")}} et de {{domxref("WindowEventHandlers")}}\*\*._
 
-<h2 id="Les_gestionnaires_d'événements">Les gestionnaires d'événements</h2>
+## Les gestionnaires d'événements
 
-<p><em>Pas de gestionnaire d'événement spécifique; gestionnaires d'événements hérite de ses parents, {{domxref("HTMLElement")}} et de {{domxref("WindowEventHandlers")}}</em><em>.</em></p>
+_Pas de gestionnaire d'événement spécifique; gestionnaires d'événements hérite de ses parents, {{domxref("HTMLElement")}} et de {{domxref("WindowEventHandlers")}}\*\*._
 
-<dl>
- <dt>{{domxref("WindowEventHandlers.onafterprint")}}</dt>
- <dd>Est un {{event("Event_handlers", "event handler")}} représentant le code d'appel lorsque l'événement {{event("afterprint")}} est déclenché.</dd>
- <dt>{{domxref("WindowEventHandlers.onbeforeprint")}}</dt>
- <dd>Est un {{event("Event_handlers", "event handler")}} représentant le code d'appel lorsque l'événement {{event("beforeprint")}} est déclenché.</dd>
- <dt>{{domxref("WindowEventHandlers.onbeforeunload")}}</dt>
- <dd>Est un {{event("Event_handlers", "event handler")}} représentant le code d'appel lorsque l'événement {{event("beforeunload")}} est déclenché.</dd>
- <dt>{{domxref("WindowEventHandlers.onhashchange")}}</dt>
- <dd>Est un {{event("Event_handlers", "event handler")}} représentant le code d'appel lorsque l'événement {{event("hashchange")}} est déclenché.</dd>
- <dt>{{domxref("WindowEventHandlers.onlanguagechange")}} {{experimental_inline}}</dt>
- <dd>Est un {{event("Event_handlers", "event handler")}} représentant le code d'appel lorsque l'événement {{event("languagechange")}} est déclenché.</dd>
- <dt>{{domxref("WindowEventHandlers.onmessage")}}</dt>
- <dd>Est un {{event("Event_handlers", "event handler")}} représentant le code d'appel lorsque l'événement {{event("message")}} est déclenché.</dd>
- <dt>{{domxref("WindowEventHandlers.onoffline")}}</dt>
- <dd>Est un {{event("Event_handlers", "event handler")}} représentant le code d'appel lorsque l'événement {{event("offline")}} est déclenché.</dd>
- <dt>{{domxref("WindowEventHandlers.ononline")}}</dt>
- <dd>Est un {{event("Event_handlers", "event handler")}} représentant le code d'appel lorsque l'événement {{event("online")}} est déclenché.</dd>
- <dt>{{domxref("WindowEventHandlers.onpagehide")}}</dt>
- <dd>Est un {{event("Event_handlers", "event handler")}} représentant le code d'appel lorsque l'événement {{event("pagehide")}} est déclenché.</dd>
- <dt>{{domxref("WindowEventHandlers.onpageshow")}}</dt>
- <dd>Est un {{event("Event_handlers", "event handler")}} représentant le code d'appel lorsque l'événement {{event("pageshow")}} est déclenché.</dd>
- <dt>{{domxref("WindowEventHandlers.onpopstate")}}</dt>
- <dd>Est un {{event("Event_handlers", "event handler")}} représentant le code d'appel lorsque l'événement {{event("popstate")}} est déclenché.</dd>
- <dt>{{domxref("WindowEventHandlers.onresize")}}</dt>
- <dd>Est un {{event("Event_handlers", "event handler")}} représentant le code d'appel lorsque l'événement {{event("resize")}} est déclenché.</dd>
- <dt>{{domxref("WindowEventHandlers.onstorage")}}</dt>
- <dd>Est un {{event("Event_handlers", "event handler")}} représentant le code d'appel lorsque l'événement {{event("storage")}} est déclenché.</dd>
- <dt>{{domxref("WindowEventHandlers.onunload")}}</dt>
- <dd>Est un {{event("Event_handlers", "event handler")}} représentant le code d'appel lorsque l'événement {{event("unload")}} est déclenché.</dd>
-</dl>
+- {{domxref("WindowEventHandlers.onafterprint")}}
+  - : Est un {{event("Event_handlers", "event handler")}} représentant le code d'appel lorsque l'événement {{event("afterprint")}} est déclenché.
+- {{domxref("WindowEventHandlers.onbeforeprint")}}
+  - : Est un {{event("Event_handlers", "event handler")}} représentant le code d'appel lorsque l'événement {{event("beforeprint")}} est déclenché.
+- {{domxref("WindowEventHandlers.onbeforeunload")}}
+  - : Est un {{event("Event_handlers", "event handler")}} représentant le code d'appel lorsque l'événement {{event("beforeunload")}} est déclenché.
+- {{domxref("WindowEventHandlers.onhashchange")}}
+  - : Est un {{event("Event_handlers", "event handler")}} représentant le code d'appel lorsque l'événement {{event("hashchange")}} est déclenché.
+- {{domxref("WindowEventHandlers.onlanguagechange")}} {{experimental_inline}}
+  - : Est un {{event("Event_handlers", "event handler")}} représentant le code d'appel lorsque l'événement {{event("languagechange")}} est déclenché.
+- {{domxref("WindowEventHandlers.onmessage")}}
+  - : Est un {{event("Event_handlers", "event handler")}} représentant le code d'appel lorsque l'événement {{event("message")}} est déclenché.
+- {{domxref("WindowEventHandlers.onoffline")}}
+  - : Est un {{event("Event_handlers", "event handler")}} représentant le code d'appel lorsque l'événement {{event("offline")}} est déclenché.
+- {{domxref("WindowEventHandlers.ononline")}}
+  - : Est un {{event("Event_handlers", "event handler")}} représentant le code d'appel lorsque l'événement {{event("online")}} est déclenché.
+- {{domxref("WindowEventHandlers.onpagehide")}}
+  - : Est un {{event("Event_handlers", "event handler")}} représentant le code d'appel lorsque l'événement {{event("pagehide")}} est déclenché.
+- {{domxref("WindowEventHandlers.onpageshow")}}
+  - : Est un {{event("Event_handlers", "event handler")}} représentant le code d'appel lorsque l'événement {{event("pageshow")}} est déclenché.
+- {{domxref("WindowEventHandlers.onpopstate")}}
+  - : Est un {{event("Event_handlers", "event handler")}} représentant le code d'appel lorsque l'événement {{event("popstate")}} est déclenché.
+- {{domxref("WindowEventHandlers.onresize")}}
+  - : Est un {{event("Event_handlers", "event handler")}} représentant le code d'appel lorsque l'événement {{event("resize")}} est déclenché.
+- {{domxref("WindowEventHandlers.onstorage")}}
+  - : Est un {{event("Event_handlers", "event handler")}} représentant le code d'appel lorsque l'événement {{event("storage")}} est déclenché.
+- {{domxref("WindowEventHandlers.onunload")}}
+  - : Est un {{event("Event_handlers", "event handler")}} représentant le code d'appel lorsque l'événement {{event("unload")}} est déclenché.
 
-<h2 id="Specifications">Specifications</h2>
+## Specifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "sections.html#the-body-element", "HTMLBodyElement")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Techniquement, les propriétés liées à l'événement, <code>onafterprint</code>, <code>onbeforeprint</code>, <code>onbeforeunload</code>, <code>onblur</code>, <code>onerror</code>, <code>onfocus</code>, <code>onhashchange</code>, <code>onlanguagechange</code>, <code>onload</code>, <code>onmessage</code>, <code>onoffline</code>, <code>ononline</code>, <code>onpopstate</code>, <code>onresize</code>, <code>onstorage</code> et <code>onunload</code>, ont été passées à {{domxref("WindowEventHandlers")}}, et <code>HTMLBodyElement</code> implémentant cette interface.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5.1', "sections.html#the-body-element", "HTMLBodyElement")}}</td>
-   <td>{{Spec2('HTML5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', "sections.html#the-body-element", "HTMLBodyElement")}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Les propriétés suivantes sont désormais obsolètes: <code>aLink</code>, <code>bgColor</code>, <code>background</code>, <code>link</code>, <code>text</code> Les propriétés suivantes ont été ajoutées:. <code>vLink</code>, <code>onafterprint</code>, <code>onbeforeprint</code>, <code>onbeforeunload</code>, <code>onblur</code>, <code>onerror</code>, <code>onfocus</code>, <code>onhashchange</code>, <code>onload</code>, <code>onmessage</code>, <code>onoffline</code>, <code>ononline</code>, <code>onpopstate</code>, <code>onresize</code>, et <code>onstorage</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 HTML', 'html.html#ID-62018039', 'HTMLBodyElement')}}</td>
-   <td>{{Spec2('DOM2 HTML')}}</td>
-   <td>Ne change pas de {{SpecName("DOM1")}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM1', 'level-one-html.html#ID-62018039', 'HTMLBodyElement')}}</td>
-   <td>{{Spec2('DOM1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Specification                                                                                                | Status                           | Comment                                                                                                                                                                                                                                                                                                                                                                                           |
+| ------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('HTML WHATWG', "sections.html#the-body-element", "HTMLBodyElement")}} | {{Spec2('HTML WHATWG')}} | Techniquement, les propriétés liées à l'événement, `onafterprint`, `onbeforeprint`, `onbeforeunload`, `onblur`, `onerror`, `onfocus`, `onhashchange`, `onlanguagechange`, `onload`, `onmessage`, `onoffline`, `ononline`, `onpopstate`, `onresize`, `onstorage` et `onunload`, ont été passées à {{domxref("WindowEventHandlers")}}, et `HTMLBodyElement` implémentant cette interface. |
+| {{SpecName('HTML5.1', "sections.html#the-body-element", "HTMLBodyElement")}}         | {{Spec2('HTML5.1')}}     |                                                                                                                                                                                                                                                                                                                                                                                                   |
+| {{SpecName('HTML5 W3C', "sections.html#the-body-element", "HTMLBodyElement")}}     | {{Spec2('HTML5 W3C')}}     | Les propriétés suivantes sont désormais obsolètes: `aLink`, `bgColor`, `background`, `link`, `text` Les propriétés suivantes ont été ajoutées:. `vLink`, `onafterprint`, `onbeforeprint`, `onbeforeunload`, `onblur`, `onerror`, `onfocus`, `onhashchange`, `onload`, `onmessage`, `onoffline`, `ononline`, `onpopstate`, `onresize`, et `onstorage`.                                             |
+| {{SpecName('DOM2 HTML', 'html.html#ID-62018039', 'HTMLBodyElement')}}                 | {{Spec2('DOM2 HTML')}}     | Ne change pas de {{SpecName("DOM1")}}.                                                                                                                                                                                                                                                                                                                                                    |
+| {{SpecName('DOM1', 'level-one-html.html#ID-62018039', 'HTMLBodyElement')}}         | {{Spec2('DOM1')}}         | Définition initiale.                                                                                                                                                                                                                                                                                                                                                                              |
 
-<h2 id="Browser_compatibility">Browser compatibility</h2>
+## Browser compatibility
 
-<p>{{Compat("api.HTMLBodyElement")}}</p>
+{{Compat("api.HTMLBodyElement")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>Élément HTML mise en œuvre par cette interface: {{ HTMLElement("body") }}</li>
-</ul>
+- Élément HTML mise en œuvre par cette interface: {{ HTMLElement("body") }}
diff --git a/files/fr/web/api/htmlbrelement/index.md b/files/fr/web/api/htmlbrelement/index.md
index 98cbcbaa55..cb0d0fbc79 100644
--- a/files/fr/web/api/htmlbrelement/index.md
+++ b/files/fr/web/api/htmlbrelement/index.md
@@ -6,66 +6,35 @@ tags:
   - Référence_du_DOM_Gecko
 translation_of: Web/API/HTMLBRElement
 ---
-<div>
- {{ApiRef}}</div>
-<p>L'interface <strong><code>HTMLBRElement</code></strong> représente un retour à la ligne. Il hérite de {{domxref("HTMLElement")}}.</p>
-<h2 id="Propriétés">Propriétés</h2>
-<p><em>Hérite les propriétés de son parent : {{domxref("HTMLElement")}}.</em></p>
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Nom</th>
-   <th scope="col">Type</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>clear</code> {{obsolete_inline}}</td>
-   <td>{{domxref("DOMString")}}</td>
-   <td>Indique le flux du texte autours des objets flottants.</td>
-  </tr>
- </tbody>
-</table>
-<h2 id="Méthodes">Méthodes</h2>
-<p><em>Aucune méthode spécifique ; </em><em>hérite les méthodes de son parent, {{domxref("HTMLElement")}}</em>.</p>
-<h2 id="Spécifications">Spécifications</h2>
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "text-level-semantics.html#the-br-element", "HTMLBRElement")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Aucun changement par rapport à {{SpecName("HTML5 W3C")}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', "text-level-semantics.html#the-br-element", "HTMLBRElement")}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Aucun changement par rapport à {{SpecName("DOM2 HTML")}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 HTML', 'html.html#ID-ID-56836063', 'HTMLBodyElement')}}</td>
-   <td>{{Spec2('DOM2 HTML')}}</td>
-   <td>Aucun changement par rapport à {{SpecName("DOM1")}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM1', 'level-one-html.html#ID-56836063', 'HTMLBodyElement')}}</td>
-   <td>{{Spec2('DOM1')}}</td>
-   <td>Première définition.</td>
-  </tr>
- </tbody>
-</table>
+{{ApiRef}}
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+L'interface **`HTMLBRElement`** représente un retour à la ligne. Il hérite de {{domxref("HTMLElement")}}.
 
-<p>{{Compat("api.HTMLBRElement")}}</p>
+## Propriétés
 
-<h2 id="See_also">Voir aussi</h2>
+_Hérite les propriétés de son parent : {{domxref("HTMLElement")}}._
 
-<ul>
- <li>L'élément HTML supportant cet interface : {{ HTMLElement("br") }}</li>
-</ul>
+| Nom                              | Type                             | Description                                            |
+| -------------------------------- | -------------------------------- | ------------------------------------------------------ |
+| `clear` {{obsolete_inline}} | {{domxref("DOMString")}} | Indique le flux du texte autours des objets flottants. |
+
+## Méthodes
+
+_Aucune méthode spécifique ;_ _hérite les méthodes de son parent, {{domxref("HTMLElement")}}_.
+
+## Spécifications
+
+| Spécification                                                                                                        | Statut                           | Commentaires                                                    |
+| -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | --------------------------------------------------------------- |
+| {{SpecName('HTML WHATWG', "text-level-semantics.html#the-br-element", "HTMLBRElement")}} | {{Spec2('HTML WHATWG')}} | Aucun changement par rapport à {{SpecName("HTML5 W3C")}} |
+| {{SpecName('HTML5 W3C', "text-level-semantics.html#the-br-element", "HTMLBRElement")}} | {{Spec2('HTML5 W3C')}}     | Aucun changement par rapport à {{SpecName("DOM2 HTML")}} |
+| {{SpecName('DOM2 HTML', 'html.html#ID-ID-56836063', 'HTMLBodyElement')}}                     | {{Spec2('DOM2 HTML')}}     | Aucun changement par rapport à {{SpecName("DOM1")}}.    |
+| {{SpecName('DOM1', 'level-one-html.html#ID-56836063', 'HTMLBodyElement')}}                 | {{Spec2('DOM1')}}         | Première définition.                                            |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.HTMLBRElement")}}
+
+## Voir aussi
+
+- L'élément HTML supportant cet interface : {{ HTMLElement("br") }}
diff --git a/files/fr/web/api/htmlbuttonelement/index.md b/files/fr/web/api/htmlbuttonelement/index.md
index 267f98b17b..06bf2eb44a 100644
--- a/files/fr/web/api/htmlbuttonelement/index.md
+++ b/files/fr/web/api/htmlbuttonelement/index.md
@@ -9,137 +9,104 @@ tags:
   - TopicStub
 translation_of: Web/API/HTMLButtonElement
 ---
-<div>{{APIRef("HTML DOM")}}</div>
-
-<p>  L'interface   <strong><code>HTMLButtonElement</code></strong>  fournit des propriétés et des méthodes (au-delà de l'interface d'objet {{HTMLElement ("button")}} dont elle dispose également par héritage) pour manipuler la présentation et la présentation des éléments de bouton.</p>
-
-<p>{{InheritanceDiagram(600, 120)}}</p>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<p>Hérite des propriétés de son parent, <em> {{domxref("HTMLElement")}}.</em></p>
-
-<dl>
- <dt>{{domxref("HTMLButtonElement.accessKey")}}</dt>
- <dd>Est un {{domxref ("DOMString")}} indiquant la touche de clavier à caractère unique permettant d'accéder au bouton.</dd>
- <dt>{{domxref("HTMLButtonElement.autofocus")}}</dt>
- <dd>Est un {{domxref ("Boolean")}} indiquant si le contrôle doit avoir ou non le focus d'entrée lors du chargement de la page, sauf si l'utilisateur le remplace, par exemple en tapant un contrôle différent. Cet attribut est spécifié pour un seul élément associé à un formulaire dans un document.</dd>
- <dt>{{domxref("HTMLButtonElement.disabled")}}</dt>
- <dd>Est un {{domxref ("Boolean")}} indiquant si le contrôle est désactivé ou non, ce qui signifie qu'il n'accepte aucun clic .</dd>
- <dt>{{domxref("HTMLButtonElement.form")}} {{readonlyInline}}</dt>
- <dd>Est un {{domxref ("HTMLFormElement")}} reflétant le formulaire auquel ce bouton est associé. Si le bouton est un descendant d'un élément de formulaire, cet attribut est l'ID de cet élément de formulaire.<br>
- Si le bouton n'est pas un descendant d'un élément de formulaire, l'attribut peut être l'identifiant de n'importe quel élément de formulaire dans le même document auquel il est lié, ou la valeur null si aucun élément ne correspond .</dd>
- <dt>{{domxref("HTMLButtonElement.formAction")}}</dt>
- <dd>Est un {{domxref ("DOMString")}} reflétant l'URI d'une ressource qui traite les informations soumises par le bouton. S'il est spécifié, cet attribut remplace l'attribut {{htmlattrxref ("action", "form")}} de l'élément {{HTMLElement ("form")}} à qui appartient cet élément.</dd>
- <dt>{{domxref("HTMLButtonElement.formEnctype")}}</dt>
- <dd>Est un {{domxref ("DOMString")}} reflétant le type de contenu utilisé pour soumettre le formulaire au serveur. S'il est spécifié, cet attribut remplace l'attribut {{htmlattrxref ("enctype", "form")}} de l'élément {{HTMLElement ("form")}} à qui appartient cet élément.</dd>
- <dt>{{domxref("HTMLButtonElement.formMethod")}}</dt>
- <dd>Est un {{domxref ("DOMChaine")}} reflétant la méthode HTTP que le navigateur utilise pour soumettre le formulaire. S'il est spécifié, cet attribut remplace l'attribut {{htmlattrxref ("méthode", "form")}} de l'élément {{HTMLElement ("form")}} à qui appartient cet élément.</dd>
- <dt>{{domxref("HTMLButtonElement.formNoValidate")}}</dt>
- <dd>Est un {{domxref ("Boolean")}} indiquant que le formulaire ne doit pas être validé lors de sa soumission. S'il est spécifié, cet attribut remplace l'attribut {{htmlattrxref ("novalidate", "form")}} de l'élément {{HTMLElement ("form")}} à qui appartient cet élément.</dd>
- <dt>{{domxref("HTMLButtonElement.formTarget")}}</dt>
- <dd>Est un {{domxref ("DOMChaîne")}} reflétant un nom ou un mot clé indiquant où afficher la réponse reçue après la soumission du formulaire. S'il est spécifié, cet attribut remplace l'attribut {{htmlattrxref ("target", "form")}} de l'élément {{HTMLElement ("form")}} à qui appartient cet élément.</dd>
- <dt>{{domxref("HTMLButtonElement.labels")}} {{readonlyInline}}</dt>
- <dd>Est un {{domxref ("NodeList")}} qui représente une liste d'éléments {{HTMLElement ("label")}} qui sont des étiquettes pour ce bouton.</dd>
- <dt>{{domxref("HTMLButtonElement.menu")}} {{experimental_inline}}</dt>
- <dd>Est-ce un {{domxref ("HTMLMenuElement")}} représentant l'élément de menu à afficher si le bouton est cliqué et de type = "menu".</dd>
- <dt>{{domxref("HTMLButtonElement.name")}}</dt>
- <dd>Est un {{domxref ("DOMString")}} représentant le nom de l'objet lorsqu'il est soumis avec un formulaire. {{HTMLVersionInline (5)}} Si spécifié, il ne doit pas s'agir d'une chaîne vide.</dd>
- <dt>{{domxref("HTMLButtonElement.tabIndex")}}</dt>
- <dd>Est un  <code>long</code> qui représente la position de cet élément dans l'ordre de tabulation .</dd>
- <dt>{{domxref("HTMLButtonElement.type")}}</dt>
- <dd>: Est un {{domxref ("DOMString")}} indiquant le comportement du bouton. C'est un attribut énuméré avec les valeurs possibles suivantes:
- <ul>
-  <li><code>"submit"</code>: Le bouton soumet le formulaire. Il s'agit de la valeur par défaut si l'attribut n'est pas spécifié, {{HTMLVersionInline (5)}} ou s'il est modifié dynamiquement en une valeur vide ou non valide.</li>
-  <li><code>"reset"</code>: Le bouton réinitialise le formulaire.</li>
-  <li><code>"button"</code>: Le bouton ne fait rien.</li>
-  <li><code>"menu"</code>: Le bouton affiche un menu. {{experimental_inline}}</li>
- </ul>
- </dd>
- <dt>{{domxref("HTMLButtonElement.validationMessage")}} {{readonlyInline}}</dt>
- <dd>Est un {{domxref ("DOMString")}} représentant le message localisé décrivant les contraintes de validation que le contrôle ne satisfait pas (le cas échéant). Cet attribut est la chaîne vide si le contrôle n'est pas candidat à la validation de contrainte (willValidate est false) ou s'il respecte ses contraintes.</dd>
- <dt>{{domxref("HTMLButtonElement.validity")}} {{readonlyInline}}</dt>
- <dd>Est un {{domxref ("ValidityState")}} représentant les états de validité dans lesquels se trouve ce bouton.</dd>
- <dt>{{domxref("HTMLButtonElement.value")}}</dt>
- <dd>Est un {{domxref ("DOMString")}} représentant la valeur de contrôle de formulaire actuelle du bouton.</dd>
- <dt>{{domxref("HTMLButtonElement.willValidate")}} {{readonlyInline}}</dt>
- <dd>Est un {{domxref ("Boolean")}} indiquant si le bouton est candidat à la validation de contrainte. Il est  <code>false</code> si des conditions l'empêchent de valider la contrainte .</dd>
-</dl>
-
-<h2 id="Les_méthodes">Les méthodes</h2>
-
-<p>Hérite des méthodes de son parent, {{domxref ("HTMLElement")}}.</p>
+{{APIRef("HTML DOM")}}
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Nom</th>
-   <th scope="col">Type de retour</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>checkValidity()</code></td>
-   <td>{{domxref("Boolean")}}</td>
-   <td>
-    <p>Non pris en charge pour les éléments de bouton.</p>
-   </td>
-  </tr>
-  <tr>
-   <td>
-    <p><code>setCustomValidity(in DOMString error)</code></p>
-   </td>
-   <td><code>void</code></td>
-   <td>Non pris en charge pour les éléments de bouton.</td>
-  </tr>
- </tbody>
-</table>
+L'interface   **`HTMLButtonElement`**  fournit des propriétés et des méthodes (au-delà de l'interface d'objet {{HTMLElement ("button")}} dont elle dispose également par héritage) pour manipuler la présentation et la présentation des éléments de bouton.
+
+{{InheritanceDiagram(600, 120)}}
+
+## Propriétés
+
+Hérite des propriétés de son parent,  *{{domxref("HTMLElement")}}.*
+
+- {{domxref("HTMLButtonElement.accessKey")}}
+  - : Est un {{domxref ("DOMString")}} indiquant la touche de clavier à caractère unique permettant d'accéder au bouton.
+- {{domxref("HTMLButtonElement.autofocus")}}
+  - : Est un {{domxref ("Boolean")}} indiquant si le contrôle doit avoir ou non le focus d'entrée lors du chargement de la page, sauf si l'utilisateur le remplace, par exemple en tapant un contrôle différent. Cet attribut est spécifié pour un seul élément associé à un formulaire dans un document.
+- {{domxref("HTMLButtonElement.disabled")}}
+  - : Est un {{domxref ("Boolean")}} indiquant si le contrôle est désactivé ou non, ce qui signifie qu'il n'accepte aucun clic .
+- {{domxref("HTMLButtonElement.form")}} {{readonlyInline}}
+  - : Est un {{domxref ("HTMLFormElement")}} reflétant le formulaire auquel ce bouton est associé. Si le bouton est un descendant d'un élément de formulaire, cet attribut est l'ID de cet élément de formulaire.
+    Si le bouton n'est pas un descendant d'un élément de formulaire, l'attribut peut être l'identifiant de n'importe quel élément de formulaire dans le même document auquel il est lié, ou la valeur null si aucun élément ne correspond .
+- {{domxref("HTMLButtonElement.formAction")}}
+  - : Est un {{domxref ("DOMString")}} reflétant l'URI d'une ressource qui traite les informations soumises par le bouton. S'il est spécifié, cet attribut remplace l'attribut {{htmlattrxref ("action", "form")}} de l'élément {{HTMLElement ("form")}} à qui appartient cet élément.
+- {{domxref("HTMLButtonElement.formEnctype")}}
+  - : Est un {{domxref ("DOMString")}} reflétant le type de contenu utilisé pour soumettre le formulaire au serveur. S'il est spécifié, cet attribut remplace l'attribut {{htmlattrxref ("enctype", "form")}} de l'élément {{HTMLElement ("form")}} à qui appartient cet élément.
+- {{domxref("HTMLButtonElement.formMethod")}}
+  - : Est un {{domxref ("DOMChaine")}} reflétant la méthode HTTP que le navigateur utilise pour soumettre le formulaire. S'il est spécifié, cet attribut remplace l'attribut {{htmlattrxref ("méthode", "form")}} de l'élément {{HTMLElement ("form")}} à qui appartient cet élément.
+- {{domxref("HTMLButtonElement.formNoValidate")}}
+  - : Est un {{domxref ("Boolean")}} indiquant que le formulaire ne doit pas être validé lors de sa soumission. S'il est spécifié, cet attribut remplace l'attribut {{htmlattrxref ("novalidate", "form")}} de l'élément {{HTMLElement ("form")}} à qui appartient cet élément.
+- {{domxref("HTMLButtonElement.formTarget")}}
+  - : Est un {{domxref ("DOMChaîne")}} reflétant un nom ou un mot clé indiquant où afficher la réponse reçue après la soumission du formulaire. S'il est spécifié, cet attribut remplace l'attribut {{htmlattrxref ("target", "form")}} de l'élément {{HTMLElement ("form")}} à qui appartient cet élément.
+- {{domxref("HTMLButtonElement.labels")}} {{readonlyInline}}
+  - : Est un {{domxref ("NodeList")}} qui représente une liste d'éléments {{HTMLElement ("label")}} qui sont des étiquettes pour ce bouton.
+- {{domxref("HTMLButtonElement.menu")}} {{experimental_inline}}
+  - : Est-ce un {{domxref ("HTMLMenuElement")}} représentant l'élément de menu à afficher si le bouton est cliqué et de type = "menu".
+- {{domxref("HTMLButtonElement.name")}}
+  - : Est un {{domxref ("DOMString")}} représentant le nom de l'objet lorsqu'il est soumis avec un formulaire. {{HTMLVersionInline (5)}} Si spécifié, il ne doit pas s'agir d'une chaîne vide.
+- {{domxref("HTMLButtonElement.tabIndex")}}
+  - : Est un  `long` qui représente la position de cet élément dans l'ordre de tabulation .
+- {{domxref("HTMLButtonElement.type")}}
 
-<p>Avec un navigateur basé sur Gecko, utilisez la pseudo-classe {{cssxref (": - moz-submit-invalid")}} pour styler les boutons de soumission en fonction de la validation d'un formulaire.</p>
+  - : : Est un {{domxref ("DOMString")}} indiquant le comportement du bouton. C'est un attribut énuméré avec les valeurs possibles suivantes:
 
-<h2 id="Spécifications">Spécifications</h2>
+    - `"submit"`: Le bouton soumet le formulaire. Il s'agit de la valeur par défaut si l'attribut n'est pas spécifié, {{HTMLVersionInline (5)}} ou s'il est modifié dynamiquement en une valeur vide ou non valide.
+    - `"reset"`: Le bouton réinitialise le formulaire.
+    - `"button"`: Le bouton ne fait rien.
+    - `"menu"`: Le bouton affiche un menu. {{experimental_inline}}
+
+- {{domxref("HTMLButtonElement.validationMessage")}} {{readonlyInline}}
+  - : Est un {{domxref ("DOMString")}} représentant le message localisé décrivant les contraintes de validation que le contrôle ne satisfait pas (le cas échéant). Cet attribut est la chaîne vide si le contrôle n'est pas candidat à la validation de contrainte (willValidate est false) ou s'il respecte ses contraintes.
+- {{domxref("HTMLButtonElement.validity")}} {{readonlyInline}}
+  - : Est un {{domxref ("ValidityState")}} représentant les états de validité dans lesquels se trouve ce bouton.
+- {{domxref("HTMLButtonElement.value")}}
+  - : Est un {{domxref ("DOMString")}} représentant la valeur de contrôle de formulaire actuelle du bouton.
+- {{domxref("HTMLButtonElement.willValidate")}} {{readonlyInline}}
+  - : Est un {{domxref ("Boolean")}} indiquant si le bouton est candidat à la validation de contrainte. Il est  `false` si des conditions l'empêchent de valider la contrainte .
+
+## Les méthodes
+
+Hérite des méthodes de son parent, {{domxref ("HTMLElement")}}.
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "forms.html#the-button-element", "HTMLButtonElement")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>L'attribut suivant a été ajouté : <code>menu</code>.<br>
-    L'attribut  <code>type</code> peut prendre une valeur supplémentaire , <code>"menu"</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', "forms.html#the-button-element", "HTMLButtonElement")}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Les attributs  <code>tabindex</code> et <code>accesskey</code>,  sont maintenant définis sur {{domxref("HTMLElement")}}.<br>
-    Les attributs suivants ont été ajoutés : <code>autofocus</code>, <code>formAction</code>, <code>formEnctype</code>, <code>formMethod</code>, <code>formNoValidate</code>, <code>formTarget</code>, <code>labels</code>, <code>validity</code>, <code>validationMessage</code>, and <code>willValidate</code>.<br>
-    Les méthodes suivantes ont été ajoutées : <code>checkValidity()</code>, <code>setCustomValidity()</code>.<br>
-    The <code>type</code> attribute is no more read-only.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 HTML', 'html.html#ID-34812697', 'HTMLButtonElement')}}</td>
-   <td>{{Spec2('DOM2 HTML')}}</td>
-   <td>Aucun changement de  {{SpecName("DOM1")}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM1', 'level-one-html.html#ID-34812697', 'HTMLButtonElement')}}</td>
-   <td>{{Spec2('DOM1')}}</td>
-   <td>. Définition initiale</td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th scope="col">Nom</th>
+      <th scope="col">Type de retour</th>
+      <th scope="col">Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>checkValidity()</code></td>
+      <td>{{domxref("Boolean")}}</td>
+      <td><p>Non pris en charge pour les éléments de bouton.</p></td>
+    </tr>
+    <tr>
+      <td>
+        <p><code>setCustomValidity(in DOMString error)</code></p>
+      </td>
+      <td><code>void</code></td>
+      <td>Non pris en charge pour les éléments de bouton.</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+Avec un navigateur basé sur Gecko, utilisez la pseudo-classe {{cssxref (": - moz-submit-invalid")}} pour styler les boutons de soumission en fonction de la validation d'un formulaire.
+
+## Spécifications
+
+| Spécification                                                                                                | Statut                           | Commentaire                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| ------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('HTML WHATWG', "forms.html#the-button-element", "HTMLButtonElement")}} | {{Spec2('HTML WHATWG')}} | L'attribut suivant a été ajouté : `menu`. L'attribut  `type` peut prendre une valeur supplémentaire , `"menu"`.                                                                                                                                                                                                                                                                                                                             |
+| {{SpecName('HTML5 W3C', "forms.html#the-button-element", "HTMLButtonElement")}}     | {{Spec2('HTML5 W3C')}}     | Les attributs  `tabindex` et `accesskey`,  sont maintenant définis sur {{domxref("HTMLElement")}}. Les attributs suivants ont été ajoutés : `autofocus`, `formAction`, `formEnctype`, `formMethod`, `formNoValidate`, `formTarget`, `labels`, `validity`, `validationMessage`, and `willValidate`. Les méthodes suivantes ont été ajoutées : `checkValidity()`, `setCustomValidity()`. The `type` attribute is no more read-only. |
+| {{SpecName('DOM2 HTML', 'html.html#ID-34812697', 'HTMLButtonElement')}}             | {{Spec2('DOM2 HTML')}}     | Aucun changement de  {{SpecName("DOM1")}}.                                                                                                                                                                                                                                                                                                                                                                                          |
+| {{SpecName('DOM1', 'level-one-html.html#ID-34812697', 'HTMLButtonElement')}}         | {{Spec2('DOM1')}}         | . Définition initiale                                                                                                                                                                                                                                                                                                                                                                                                                       |
+
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.HTMLButtonElement")}}</p>
+{{Compat("api.HTMLButtonElement")}}
 
-<h2 id="Voir_également">Voir également</h2>
+## Voir également
 
-<ul>
- <li>Élément HTML implémentant cette interface : {{HTMLElement("button")}}</li>
-</ul>
+- Élément HTML implémentant cette interface : {{HTMLElement("button")}}
diff --git a/files/fr/web/api/htmlbuttonelement/labels/index.md b/files/fr/web/api/htmlbuttonelement/labels/index.md
index 463b72f021..02edee6291 100644
--- a/files/fr/web/api/htmlbuttonelement/labels/index.md
+++ b/files/fr/web/api/htmlbuttonelement/labels/index.md
@@ -7,60 +7,47 @@ tags:
   - Propriété
 translation_of: Web/API/HTMLButtonElement/labels
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p>La propriété en lecture seule <code><strong>HTMLButtonElement.labels</strong></code> renvoie une {{domxref("NodeList")}} (<em>liste de noeuds</em>) des éléments {{HTMLElement("label")}} (<em>étiquette</em>) associés avec l'élément {{HTMLElement("button")}} (<em>bouton</em>).</p>
+La propriété en lecture seule **`HTMLButtonElement.labels`** renvoie une {{domxref("NodeList")}} (_liste de noeuds_) des éléments {{HTMLElement("label")}} (_étiquette_) associés avec l'élément {{HTMLElement("button")}} (_bouton_).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var <var>labelElements</var> = <var>button</var>.labels;
-</pre>
+    var labelElements = button.labels;
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Une {{domxref("NodeList")}} contenant les éléments <code>&lt;label&gt;</code> associés avec l'élément <code>&lt;button&gt;</code>.</p>
+Une {{domxref("NodeList")}} contenant les éléments `<label>` associés avec l'élément `<button>`.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;label id="label1" for="test"&gt;Label 1&lt;/label&gt;
-&lt;button id="test"&gt;Button&lt;/button&gt;
-&lt;label id="label2" for="test"&gt;Label 2&lt;/label&gt;
-</pre>
+```html
+<label id="label1" for="test">Label 1</label>
+<button id="test">Button</button>
+<label id="label2" for="test">Label 2</label>
+```
 
-<h3 id="JavaScript">JavaScript</h3>
+### JavaScript
 
-<pre class="brush: js">window.addEventListener("DOMContentLoaded", function() {
+```js
+window.addEventListener("DOMContentLoaded", function() {
   const button = document.getElementById("test");
-  for(var i = 0; i &lt; button.labels.length; i++) {
+  for(var i = 0; i < button.labels.length; i++) {
     console.log(button.labels[i].textContent); // "Label 1" et "Label 2"
   }
-});</pre>
+});
+```
 
-<p>{{EmbedLiveSample("Example", "100%", 30)}}</p>
+{{EmbedLiveSample("Example", "100%", 30)}}
 
-<h2 id="Spécifications">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("HTML WHATWG", "forms.html#dom-lfe-labels", "labels")}}</td>
-   <td>{{Spec2("HTML WHATWG")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                            | Statut                           | Commentaire          |
+| ---------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName("HTML WHATWG", "forms.html#dom-lfe-labels", "labels")}} | {{Spec2("HTML WHATWG")}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-
-
-<p>{{Compat("api.HTMLButtonElement.labels")}}</p>
+{{Compat("api.HTMLButtonElement.labels")}}
diff --git a/files/fr/web/api/htmlcanvaselement/getcontext/index.md b/files/fr/web/api/htmlcanvaselement/getcontext/index.md
index db299b5342..6c773c3437 100644
--- a/files/fr/web/api/htmlcanvaselement/getcontext/index.md
+++ b/files/fr/web/api/htmlcanvaselement/getcontext/index.md
@@ -9,123 +9,96 @@ tags:
   - Reference
 translation_of: Web/API/HTMLCanvasElement/getContext
 ---
-<div>{{APIRef("Canvas API")}}</div>
-
-<p>La méthode <strong><code>HTMLCanvasElement.getContext()</code></strong> retourne un contexte de dessin sur le canevas, ou {{jsxref("null")}} si l'identificateur de contexte n'est pas supporté.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><var><em>canvas</em>.getContext(typeDeC<em>ontexte, attributsDeContexte</em>);</var>
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt>typeDeContexte</dt>
- <dd>Est un {{domxref("DOMString")}} contenant l'identifcateur de contexte définissant le contexte de dessin associé au canevas. Les valeurs possibles sont :
- <ul>
-  <li><code>"2d</code>", conduisant à la création d'un objet {{domxref("CanvasRenderingContext2D")}} représentant un contexte de représentation bi-dimensionnel.</li>
-  <li><code>"webgl"</code> (ou <code>"experimental-webgl"</code>) pour créer un objet {{domxref("WebGLRenderingContext")}} représentant un contexte de représentation tri-dimensionnel. Ce contexte est seulement disponible sur les navigateurs implémentant la version 1 de <a href="/en-US/docs/Web/WebGL">WebGL</a> (OpenGL ES 2.0).</li>
-  <li>"<code>webgl2</code>" pour créer un objet {{domxref("WebGL2RenderingContext")}} représentant un contexte de représentation tri-dimensionnel. Ce contexte est seulement disponible sur les navigateurs implémentant la version 2 de <a href="/en-US/docs/Web/WebGL">WebGL</a> (OpenGL ES 3.0). {{experimental_inline}}.</li>
-  <li><code>"bitmaprenderer"</code> pour créer un {{domxref("ImageBitmapRenderingContext")}} ne fournissant que la fonctionnalité de remplacement du contenu du canevas par une {{domxref("ImageBitmap")}} donnée.</li>
- </ul>
-
- <p>Note : l'identificateur "<code>experimental-webgl</code>" est utilisé dans les nouvelles implémentations de WebGL. Ces implémentations n'ont pas encore obtenu la conformité à la suite de test, ou l'emploi des pilotes graphiques sur la plateforme n'est pas encore stable. Le <a href="https://www.khronos.org/">Khronos Group</a> certifie les implémentations WebGL sous certaines <a href="https://www.khronos.org/registry/webgl/sdk/tests/CONFORMANCE_RULES.txt">règles de conformité</a>.</p>
- </dd>
- <dt><code>attributsDeContexte</code></dt>
- <dd>
- <p>Vous pouvez utiliser plusieurs attributs de contexte quand vous créez votre contexte de représentation, par exemple :</p>
-
- <pre class="brush: js">canvas.getContext('webgl',
-                 { antialias: false,
-                   depth: false });</pre>
- attributs de contexte 2d :
-
- <ul>
-  <li><strong><code>alpha </code></strong>: booléen indiquant que le canevas contient un canal alpha. Si positionné à <code>false</code>, le navigateur saura ainsi que l'arrière-plan est toujours opaque, ce qui peut alors accélérer le dessin de contenus et d'images transparents.</li>
-  <li>{{non-standard_inline}} (Gecko seulement) <strong><code>willReadFrequently </code></strong>: booléen indiquant si de nombreuses opérations de relecture sont prévues ou non. Cela forcera l'utilisation d'un canevas 2D logiciel (au lieu d'un canevas accéléré matériellement) et peut faire économiser de la mémoire lors d'appels fréquents à {{domxref("CanvasRenderingContext2D.getImageData", "getImageData()")}}. Cette option est seulement disponible si l'indicateur <code>gfx.canvas.willReadFrequently.enable</code> est positionné à <code>true</code> (ce qui, par défaut, est seulement le cas pour B2G/Firefox OS).</li>
-  <li>{{non-standard_inline}} (Blink seulement) <strong><code>storage </code></strong>: chaîne indiquant quel stockage est utilisé ("persistent" par défaut).</li>
- </ul>
- attributs de contexte WebGL :
-
- <ul>
-  <li><strong><code>alpha </code></strong>: booléen indiquant que le canevas contient un tampon alpha.</li>
-  <li><strong><code>depth </code></strong>: booléen indiquant que le tampon de dessin a un tampon de profondeur d'au moins 16 bits.</li>
-  <li><strong><code>stencil </code></strong>: booléen indiquant que le tampon de dessin a un tampon stencil d'au moins 8 bits.</li>
-  <li><strong><code>antialias </code></strong>: booléen indiquant si un anti-aliasing doit être effectué ou non.</li>
-  <li><strong><code>premultipliedAlpha </code></strong>: booléen indiquant que le composeur de page supposera que le tampon de dessin contient des couleurs avec alpha pré-multiplié.</li>
-  <li><strong><code>preserveDrawingBuffer </code></strong>: si la valeur est is true, les tampons ne seront pas effacés et conserveront leurs valeurs jusqu'à ce qu'elles soient effacées ou réécrites par l'auteur.</li>
-  <li>
-   <p><code><strong>failIfMajorPerformanceCaveat</strong></code><strong><code> </code></strong>: booléen indiquant qu'un contexte sera créé si la performance du système est faible.</p>
-  </li>
- </ul>
- </dd>
-</dl>
-
-<h3 id="Valeur_retournée">Valeur retournée :</h3>
-
-<p>Un {{domxref("RenderingContext")}}, qui est soit un</p>
-
-<ul>
- <li>{{domxref("CanvasRenderingContext2D")}} pour <code>"2d"</code>,</li>
- <li>{{domxref("WebGLRenderingContext")}} pour <code>"webgl"</code> et <code>"experimental-webgl"</code>,</li>
- <li>{{domxref("WebGL2RenderingContext")}} pour <code>"webgl2"</code> ou</li>
- <li>{{domxref("ImageBitmapRenderingContext")}} pour <code>"bitmaprenderer"</code>.</li>
-</ul>
-
-<p>Si le <em>typeDeContexte</em> ne correspond pas à un contexte de dessin possible, <code>null</code> est retourné.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Étant donné l'élément {{HTMLElement("canvas")}} :</p>
-
-<pre class="brush: html">&lt;canvas id="canvas" width="300" height="300"&gt;&lt;/canvas&gt;
-</pre>
-
-<p>vous pouvez obtenir un contexte 2d du canevas grâce au code suivant :</p>
-
-<pre class="brush: js">var canvas = document.getElementById('canvas');
+{{APIRef("Canvas API")}}
+
+La méthode **`HTMLCanvasElement.getContext()`** retourne un contexte de dessin sur le canevas, ou {{jsxref("null")}} si l'identificateur de contexte n'est pas supporté.
+
+## Syntaxe
+
+    canvas.getContext(typeDeContexte, attributsDeContexte);
+
+### Paramètres
+
+- typeDeContexte
+
+  - : Est un {{domxref("DOMString")}} contenant l'identifcateur de contexte définissant le contexte de dessin associé au canevas. Les valeurs possibles sont :
+
+    - `"2d`", conduisant à la création d'un objet {{domxref("CanvasRenderingContext2D")}} représentant un contexte de représentation bi-dimensionnel.
+    - `"webgl"` (ou `"experimental-webgl"`) pour créer un objet {{domxref("WebGLRenderingContext")}} représentant un contexte de représentation tri-dimensionnel. Ce contexte est seulement disponible sur les navigateurs implémentant la version 1 de [WebGL](/en-US/docs/Web/WebGL) (OpenGL ES 2.0).
+    - "`webgl2`" pour créer un objet {{domxref("WebGL2RenderingContext")}} représentant un contexte de représentation tri-dimensionnel. Ce contexte est seulement disponible sur les navigateurs implémentant la version 2 de [WebGL](/en-US/docs/Web/WebGL) (OpenGL ES 3.0). {{experimental_inline}}.
+    - `"bitmaprenderer"` pour créer un {{domxref("ImageBitmapRenderingContext")}} ne fournissant que la fonctionnalité de remplacement du contenu du canevas par une {{domxref("ImageBitmap")}} donnée.
+
+    Note : l'identificateur "`experimental-webgl`" est utilisé dans les nouvelles implémentations de WebGL. Ces implémentations n'ont pas encore obtenu la conformité à la suite de test, ou l'emploi des pilotes graphiques sur la plateforme n'est pas encore stable. Le [Khronos Group](https://www.khronos.org/) certifie les implémentations WebGL sous certaines [règles de conformité](https://www.khronos.org/registry/webgl/sdk/tests/CONFORMANCE_RULES.txt).
+
+- `attributsDeContexte`
+
+  - : Vous pouvez utiliser plusieurs attributs de contexte quand vous créez votre contexte de représentation, par exemple :
+
+    ```js
+    canvas.getContext('webgl',
+                     { antialias: false,
+                       depth: false });
+    ```
+
+    attributs de contexte 2d :
+
+    - **`alpha `**: booléen indiquant que le canevas contient un canal alpha. Si positionné à `false`, le navigateur saura ainsi que l'arrière-plan est toujours opaque, ce qui peut alors accélérer le dessin de contenus et d'images transparents.
+    - {{non-standard_inline}} (Gecko seulement) **`willReadFrequently `**: booléen indiquant si de nombreuses opérations de relecture sont prévues ou non. Cela forcera l'utilisation d'un canevas 2D logiciel (au lieu d'un canevas accéléré matériellement) et peut faire économiser de la mémoire lors d'appels fréquents à {{domxref("CanvasRenderingContext2D.getImageData", "getImageData()")}}. Cette option est seulement disponible si l'indicateur `gfx.canvas.willReadFrequently.enable` est positionné à `true` (ce qui, par défaut, est seulement le cas pour B2G/Firefox OS).
+    - {{non-standard_inline}} (Blink seulement) **`storage `**: chaîne indiquant quel stockage est utilisé ("persistent" par défaut).
+
+    attributs de contexte WebGL :
+
+    - **`alpha `**: booléen indiquant que le canevas contient un tampon alpha.
+    - **`depth `**: booléen indiquant que le tampon de dessin a un tampon de profondeur d'au moins 16 bits.
+    - **`stencil `**: booléen indiquant que le tampon de dessin a un tampon stencil d'au moins 8 bits.
+    - **`antialias `**: booléen indiquant si un anti-aliasing doit être effectué ou non.
+    - **`premultipliedAlpha `**: booléen indiquant que le composeur de page supposera que le tampon de dessin contient des couleurs avec alpha pré-multiplié.
+    - **`preserveDrawingBuffer `**: si la valeur est is true, les tampons ne seront pas effacés et conserveront leurs valeurs jusqu'à ce qu'elles soient effacées ou réécrites par l'auteur.
+    - **`failIfMajorPerformanceCaveat`\*\***` `\*\*: booléen indiquant qu'un contexte sera créé si la performance du système est faible.
+
+### Valeur retournée :
+
+Un {{domxref("RenderingContext")}}, qui est soit un
+
+- {{domxref("CanvasRenderingContext2D")}} pour `"2d"`,
+- {{domxref("WebGLRenderingContext")}} pour `"webgl"` et `"experimental-webgl"`,
+- {{domxref("WebGL2RenderingContext")}} pour `"webgl2"` ou
+- {{domxref("ImageBitmapRenderingContext")}} pour `"bitmaprenderer"`.
+
+Si le *typeDeContexte* ne correspond pas à un contexte de dessin possible, `null` est retourné.
+
+## Exemples
+
+Étant donné l'élément {{HTMLElement("canvas")}} :
+
+```html
+<canvas id="canvas" width="300" height="300"></canvas>
+```
+
+vous pouvez obtenir un contexte 2d du canevas grâce au code suivant :
+
+```js
+var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
 console.log(ctx); // CanvasRenderingContext2D { ... }
-</pre>
-
-<p>Vous avez alors le <a href="/en-US/docs/Web/API/CanvasRenderingContext2D">contexte 2D de représentation</a> pour un canevas, et vous pouvez dessiner à l'intérieur.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Pas de changement depuis l'instantané le plus récent, {{SpecName('HTML5 W3C')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5.1', "scripting-1.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}}</td>
-   <td>{{Spec2('HTML5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', "scripting-1.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Instantané du {{SpecName('HTML WHATWG')}} contenant la définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
-
-<p>{{Compat("api.HTMLCanvasElement.getContext")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>L'interface la définissant, {{domxref("HTMLCanvasElement")}}.</li>
- <li>{{domxref("OffscreenCanvas.getContext()")}}.</li>
- <li>Contextes de représentation disponibles : {{domxref("CanvasRenderingContext2D")}}, {{domxref("WebGLRenderingContext")}} et {{domxref("WebGL2RenderingContext")}} et {{domxref("ImageBitmapRenderingContext")}}.</li>
-</ul>
+```
+
+Vous avez alors le [contexte 2D de représentation](/en-US/docs/Web/API/CanvasRenderingContext2D) pour un canevas, et vous pouvez dessiner à l'intérieur.
+
+## Spécifications
+
+| Spécification                                                                                                                        | Statut                           | Commentaire                                                                            |
+| ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------------------------------------------------------------------------- |
+| {{SpecName('HTML WHATWG', "scripting.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}} | {{Spec2('HTML WHATWG')}} | Pas de changement depuis l'instantané le plus récent, {{SpecName('HTML5 W3C')}} |
+| {{SpecName('HTML5.1', "scripting-1.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}}     | {{Spec2('HTML5.1')}}     |                                                                                        |
+| {{SpecName('HTML5 W3C', "scripting-1.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}} | {{Spec2('HTML5 W3C')}}     | Instantané du {{SpecName('HTML WHATWG')}} contenant la définition initiale.   |
+
+## Compatibilité navigateurs
+
+{{Compat("api.HTMLCanvasElement.getContext")}}
+
+## Voir aussi
+
+- L'interface la définissant, {{domxref("HTMLCanvasElement")}}.
+- {{domxref("OffscreenCanvas.getContext()")}}.
+- Contextes de représentation disponibles : {{domxref("CanvasRenderingContext2D")}}, {{domxref("WebGLRenderingContext")}} et {{domxref("WebGL2RenderingContext")}} et {{domxref("ImageBitmapRenderingContext")}}.
diff --git a/files/fr/web/api/htmlcanvaselement/height/index.md b/files/fr/web/api/htmlcanvaselement/height/index.md
index c56de245f4..647a45f107 100644
--- a/files/fr/web/api/htmlcanvaselement/height/index.md
+++ b/files/fr/web/api/htmlcanvaselement/height/index.md
@@ -8,69 +8,45 @@ tags:
   - Propriété
 translation_of: Web/API/HTMLCanvasElement/height
 ---
-<div>
-<div>
-<div>{{APIRef("Canvas API")}}</div>
-</div>
-</div>
+{{APIRef("Canvas API")}}
 
-<p>La propriété <strong><code>HTMLCanvasElement.height</code></strong> est un entier positif reflétant l'attribut HTML {{htmlattrxref("height", "canvas")}} de l'élément {{HTMLElement("canvas")}} mesuré en pixels CSS. Quand cet attribut n'est pas spécifié, ou si on lui affecte une valeur invalide, telle que négative, la valeur par défaut de <code>150</code> is utilisée.</p>
+La propriété **`HTMLCanvasElement.height`** est un entier positif reflétant l'attribut HTML {{htmlattrxref("height", "canvas")}} de l'élément {{HTMLElement("canvas")}} mesuré en pixels CSS. Quand cet attribut n'est pas spécifié, ou si on lui affecte une valeur invalide, telle que négative, la valeur par défaut de `150` is utilisée.
 
-<p>C'est l'une des deux propriétés, l'autre étant {{domxref("HTMLCanvasElement.width")}}, qui contrôlent la taille du canevas.</p>
+C'est l'une des deux propriétés, l'autre étant {{domxref("HTMLCanvasElement.width")}}, qui contrôlent la taille du canevas.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var>var <em>pxl</em> = <em>canvas</em></var>.height;
-<em>canvas</em>.height = <em>pxl</em>;
-</pre>
+    var pxl = canvas.height;
+    canvas.height = pxl;
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Étant donné cet élément {{HTMLElement("canvas")}} :</p>
+Étant donné cet élément {{HTMLElement("canvas")}} :
 
-<pre class="brush: html">&lt;canvas id="canvas" width="300" height="300"&gt;&lt;/canvas&gt;
-</pre>
+```html
+<canvas id="canvas" width="300" height="300"></canvas>
+```
 
-<p>vous pouvez obtenir la hauteur du canevas avec le code suivant :</p>
+vous pouvez obtenir la hauteur du canevas avec le code suivant :
 
-<pre class="brush: js">var canvas = document.getElementById('canvas');
+```js
+var canvas = document.getElementById('canvas');
 console.log(canvas.height); // 300
-</pre>
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "scripting.html#attr-canvas-height", "HTMLCanvasElement.height")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Pas de changement depuis l'instantané le plus récent, {{SpecName('HTML5 W3C')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5.1', "scripting-1.html#attr-canvas-height", "HTMLCanvasElement.height")}}</td>
-   <td>{{Spec2('HTML5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', "scripting-1.html#attr-canvas-height", "HTMLCanvasElement.height")}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Instantané du {{SpecName('HTML WHATWG')}} contenant la définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                | Statut                           | Commentaire                                                                            |
+| ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------------------------------------------------------------------------- |
+| {{SpecName('HTML WHATWG', "scripting.html#attr-canvas-height", "HTMLCanvasElement.height")}} | {{Spec2('HTML WHATWG')}} | Pas de changement depuis l'instantané le plus récent, {{SpecName('HTML5 W3C')}} |
+| {{SpecName('HTML5.1', "scripting-1.html#attr-canvas-height", "HTMLCanvasElement.height")}}     | {{Spec2('HTML5.1')}}     |                                                                                        |
+| {{SpecName('HTML5 W3C', "scripting-1.html#attr-canvas-height", "HTMLCanvasElement.height")}} | {{Spec2('HTML5 W3C')}}     | Instantané du {{SpecName('HTML WHATWG')}} contenant la définition initiale.   |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.HTMLCanvasElement.height")}}</p>
+{{Compat("api.HTMLCanvasElement.height")}}
 
-<h2 id="See_Also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>L'interface la définissant, {{domxref("HTMLCanvasElement")}}.</li>
- <li>L'autre propriété contrôlant la taille du canevas, {{domxref("HTMLCanvasElement.width")}}.</li>
-</ul>
+- L'interface la définissant, {{domxref("HTMLCanvasElement")}}.
+- L'autre propriété contrôlant la taille du canevas, {{domxref("HTMLCanvasElement.width")}}.
diff --git a/files/fr/web/api/htmlcanvaselement/index.md b/files/fr/web/api/htmlcanvaselement/index.md
index bdfdfd8945..c4c49baa9e 100644
--- a/files/fr/web/api/htmlcanvaselement/index.md
+++ b/files/fr/web/api/htmlcanvaselement/index.md
@@ -5,127 +5,214 @@ tags:
   - Canvas
 translation_of: Web/API/HTMLCanvasElement
 ---
-<div>{{ApiRef}}</div>
+{{ApiRef}}
 
-<p>L'interface <strong><code>HTMLCanvasElement</code></strong> fournit un ensemble de propriétés et de méthodes pour manipuler la disposition et la représentation des éléments canvas. L'interface <code>HTMLCanvasElement</code> hérite également des propriétés et des méthodes de l'interface {{domxref("HTMLElement")}}.</p>
+L'interface **`HTMLCanvasElement`** fournit un ensemble de propriétés et de méthodes pour manipuler la disposition et la représentation des éléments canvas. L'interface `HTMLCanvasElement` hérite également des propriétés et des méthodes de l'interface {{domxref("HTMLElement")}}.
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<p><em>Propriétés hérités de son parent, </em><em>{{domxref("HTMLElement")}}.</em></p>
+_Propriétés hérités de son parent,_ _{{domxref("HTMLElement")}}._
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Nom</th>
-   <th scope="col">Type</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>height</code></td>
-   <td><code>unsigned long</code></td>
-   <td>Représente l'attribut HTML {{htmlattrxref("height", "canvas")}}, qui spécifie la hauteur de l'espace des coordonnées en pixels CSS.</td>
-  </tr>
-  <tr>
-   <td><code>width</code></td>
-   <td><code>unsigned long</code></td>
-   <td>Représente l'attribut HTML {{htmlattrxref("width", "canvas")}}, qui spécifie la largeur de l'espace des coordonnées en pixels CSS.</td>
-  </tr>
- </tbody>
-</table>
+| Nom      | Type            | Description                                                                                                                                     |
+| -------- | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
+| `height` | `unsigned long` | Représente l'attribut HTML {{htmlattrxref("height", "canvas")}}, qui spécifie la hauteur de l'espace des coordonnées en pixels CSS. |
+| `width`  | `unsigned long` | Représente l'attribut HTML {{htmlattrxref("width", "canvas")}}, qui spécifie la largeur de l'espace des coordonnées en pixels CSS. |
 
-<h2 id="Méthodes">Méthodes</h2>
+## Méthodes
 
-<p><em>Méthodes héritées de son parent, </em><em>{{domxref("HTMLElement")}}.</em></p>
+_Méthodes héritées de son parent,_ _{{domxref("HTMLElement")}}._
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Nom &amp; arguments</th>
-   <th scope="col">Résultat</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>getContext(in {{domxref("DOMString")}} contextId)</code></td>
-   <td>{{domxref("RenderingContext")}}</td>
-   <td>Renvoie un contexte de dessin sur le canvas, ou null si l'ID de contexte n'est pas supporté. Un contexte de dessin vous permet de dessiner sur le canvas. Appeler getContext avec <code>"2d"</code> renvoie un object {{domxref("CanvasRenderingContext2D")}}, alors que l'appeler avec <code>"experimental-webgl"</code> (ou <code>"webgl"</code>) renvoie un objet {{domxref("WebGLRenderingContext")}} . Ce dernier contexte n'est disponible que dans les navigateur qui implémentent <a href="/en-US/docs/Web/WebGL">WebGL</a>.</td>
-  </tr>
-  <tr>
-   <td><code>supportsContext()</code> {{experimental_inline}}</td>
-   <td>{{domxref("Boolean")}}</td>
-   <td>Renvoie une valeur {{domxref("Boolean")}} indiquant si le contexte donné est supporté par ce canvas.</td>
-  </tr>
-  <tr>
-   <td><em><code>setContext()</code></em> {{experimental_inline}}</td>
-   <td><code>void</code></td>
-   <td>Chnage de contexte de l'élément en rapport avec celui fourni.</td>
-  </tr>
-  <tr>
-   <td><code>transferControlToProxy()</code> {{experimental_inline}}</td>
-   <td>{{domxref("CanvasProxy")}}</td>
-   <td>Retourne un mandataire pour autoriser le canvas à être utilisé dans un autre {{domxref("Worker")}}.</td>
-  </tr>
-  <tr>
-   <td><code>toDataURL</code>(in optional {{domxref("DOMString")}} type, in any ...args)</td>
-   <td>{{domxref("DOMString")}}</td>
-   <td>Renvoie une <code>data:</code> URL contenant une représentation de l'image au format spécifié par l'argument <code>type</code> (PNG par défaut). L'image renvoyée est en 96dpi.
-    <ul>
-     <li>Si la hauteur ou la largeur du canvas est <code>0</code>, <code>"data:,</code>" représentant une chaîne vide, est renvoyée.</li>
-     <li>Si le format demandé n'est pas <code>image/png</code>, mais que la valeur renvoyée commence par <code>data:image/png</code>, alors le format demandé n'est pas supporté.</li>
-     <li>Chrome supporte le format <code>image/webp</code>.</li>
-     <li>Si le format demandé est <code>image/jpeg </code>ou <code>image/webp</code>, alors le second argument, s'il est compris entre <code>0.0</code> et <code>1.0</code>, est considéré comme une indication de la qualité d'image ; si le second argument est n'importe quoi d'autre, la valeur par défaut pour la qualité est utilisé. Les autres arguments sont ignorés.</li>
-    </ul>
-   </td>
-  </tr>
-  <tr>
-   <td><code>toDataURLHD()</code>{{experimental_inline}}</td>
-   <td>{{domxref("DOMString")}}</td>
-   <td>Renvoie une <code>data:</code> URL contenant une représentation de l'image au format spécifié par <code>type</code> (PNG par défaut). L'image renvoyée est à la résolution native du canvas.
-    <ul>
-     <li>Si la hauteur ou la largeur du canvas est <code>0</code>, <code>"data:,</code>" représentant une chaîne vide, est renvoyée.</li>
-     <li>Si le format demandé n'est pas <code>image/png</code>, mais que la valeur renvoyée commence par <code>data:image/png</code>, alors le format demandé n'est pas supporté.</li>
-     <li>Chrome supporte le format <code>image/webp</code>.</li>
-     <li>Si le format demandé est <code>image/jpeg </code>ou <code>image/webp</code>, alors le second argument, s'il est compris entre <code>0.0</code> et <code>1.0</code>, est considéré comme une indication de la qualité d'image ; si le second argument est n'importe quoi d'autre, la valeur par défaut pour la qualité est utilisé. Les autres arguments sont ignorés.</li>
-    </ul>
-   </td>
-  </tr>
-  <tr>
-   <td><code>toBlob</code>(in FileCallback callback, in optional {{domxref("DOMString")}} type, in any ...args)</td>
-   <td><code>void</code></td>
-   <td>Renvoie un objet {{domxref("Blob")}} représentant l'image contenue dans le canvas ; ce fichier peut être mis en cache sur le disque ou stocké en mémoire au choix du navigateur. Si <code>type</code> n'est pas précisé, le format de l'image est <code>image/png</code>. L'image renvoyée est en 96dpi.</td>
-  </tr>
-  <tr>
-   <td><code>toBlobHD</code>(in FileCallback callback, in optional {{domxref("DOMString")}} type, in any ...args) {{experimental_inline}}</td>
-   <td><code>void</code></td>
-   <td>Renvoie un objet {{domxref("Blob")}} représentant l'image contenue dans le canvas ; ce fichier peut être mis en cache sur le disque ou stocké en mémoire au choix du navigateur. Si <code>type</code> n'est pas précisé, le format de l'image est <code>image/png</code>. L'image renvoyée est à la résolution native du canvas.</td>
-  </tr>
-  <tr>
-   <td><code>mozGetAsFile</code>(in {{domxref("DOMString")}} name, in optional {{domxref("DOMString")}} type) {{non-standard_inline}}</td>
-   <td>{{domxref("File")}}</td>
-   <td>Renvoie un objet {{domxref("File")}} représentant l'image contenue dans le canvas ; ce fichier est en mémoire avec le <code>nom</code> précisé. Si <code>type</code> n'est pas précisé, le fotmat de l'image est <code>image/png</code>.</td>
-  </tr>
-  <tr>
-   <td><code>void mozFetchAsStream(in {{interface("nsIInputStreamCallback")}} callback, [optional] in DOMString type)</code> {{non-standard_inline}}</td>
-   <td><code>void</code></td>
-   <td>Crée un nouveau flux d'entrée qui, quand il est prêt, fournit le contenu du canvas en tant que données d'image. Quand le nouveau flux est prêt, la fonction de rappel spécifiée {{ifmethod("nsIInputStreamCallback", "onInputStreamReady")}} est appelée. Si <code>type</code> n'est pas précisée, Le format de l'image est <code>image/png.</code>
-    <div class="note">
-      <p><strong>Note :</strong> Cette méthode ne peut être utilisée que depuis le code chrome.</p>
-    </div>
-   </td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th scope="col">Nom &#x26; arguments</th>
+      <th scope="col">Résultat</th>
+      <th scope="col">Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        <code>getContext(in {{domxref("DOMString")}} contextId)</code>
+      </td>
+      <td>{{domxref("RenderingContext")}}</td>
+      <td>
+        Renvoie un contexte de dessin sur le canvas, ou null si l'ID de contexte
+        n'est pas supporté. Un contexte de dessin vous permet de dessiner sur le
+        canvas. Appeler getContext avec <code>"2d"</code> renvoie un object
+        {{domxref("CanvasRenderingContext2D")}}, alors que
+        l'appeler avec <code>"experimental-webgl"</code> (ou
+        <code>"webgl"</code>) renvoie un objet
+        {{domxref("WebGLRenderingContext")}} . Ce dernier contexte
+        n'est disponible que dans les navigateur qui implémentent
+        <a href="/en-US/docs/Web/WebGL">WebGL</a>.
+      </td>
+    </tr>
+    <tr>
+      <td><code>supportsContext()</code> {{experimental_inline}}</td>
+      <td>{{domxref("Boolean")}}</td>
+      <td>
+        Renvoie une valeur {{domxref("Boolean")}} indiquant si le contexte
+        donné est supporté par ce canvas.
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <em><code>setContext()</code></em> {{experimental_inline}}
+      </td>
+      <td><code>void</code></td>
+      <td>Chnage de contexte de l'élément en rapport avec celui fourni.</td>
+    </tr>
+    <tr>
+      <td>
+        <code>transferControlToProxy()</code> {{experimental_inline}}
+      </td>
+      <td>{{domxref("CanvasProxy")}}</td>
+      <td>
+        Retourne un mandataire pour autoriser le canvas à être utilisé dans un
+        autre {{domxref("Worker")}}.
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <code>toDataURL</code>(in optional {{domxref("DOMString")}}
+        type, in any ...args)
+      </td>
+      <td>{{domxref("DOMString")}}</td>
+      <td>
+        Renvoie une <code>data:</code> URL contenant une représentation de
+        l'image au format spécifié par l'argument <code>type</code> (PNG par
+        défaut). L'image renvoyée est en 96dpi.
+        <ul>
+          <li>
+            Si la hauteur ou la largeur du canvas est <code>0</code>,
+            <code>"data:,</code>" représentant une chaîne vide, est renvoyée.
+          </li>
+          <li>
+            Si le format demandé n'est pas <code>image/png</code>, mais que la
+            valeur renvoyée commence par <code>data:image/png</code>, alors le
+            format demandé n'est pas supporté.
+          </li>
+          <li>Chrome supporte le format <code>image/webp</code>.</li>
+          <li>
+            Si le format demandé est <code>image/jpeg </code>ou
+            <code>image/webp</code>, alors le second argument, s'il est compris
+            entre <code>0.0</code> et <code>1.0</code>, est considéré comme une
+            indication de la qualité d'image ; si le second argument est
+            n'importe quoi d'autre, la valeur par défaut pour la qualité est
+            utilisé. Les autres arguments sont ignorés.
+          </li>
+        </ul>
+      </td>
+    </tr>
+    <tr>
+      <td><code>toDataURLHD()</code>{{experimental_inline}}</td>
+      <td>{{domxref("DOMString")}}</td>
+      <td>
+        Renvoie une <code>data:</code> URL contenant une représentation de
+        l'image au format spécifié par <code>type</code> (PNG par défaut).
+        L'image renvoyée est à la résolution native du canvas.
+        <ul>
+          <li>
+            Si la hauteur ou la largeur du canvas est <code>0</code>,
+            <code>"data:,</code>" représentant une chaîne vide, est renvoyée.
+          </li>
+          <li>
+            Si le format demandé n'est pas <code>image/png</code>, mais que la
+            valeur renvoyée commence par <code>data:image/png</code>, alors le
+            format demandé n'est pas supporté.
+          </li>
+          <li>Chrome supporte le format <code>image/webp</code>.</li>
+          <li>
+            Si le format demandé est <code>image/jpeg </code>ou
+            <code>image/webp</code>, alors le second argument, s'il est compris
+            entre <code>0.0</code> et <code>1.0</code>, est considéré comme une
+            indication de la qualité d'image ; si le second argument est
+            n'importe quoi d'autre, la valeur par défaut pour la qualité est
+            utilisé. Les autres arguments sont ignorés.
+          </li>
+        </ul>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <code>toBlob</code>(in FileCallback callback, in optional
+        {{domxref("DOMString")}} type, in any ...args)
+      </td>
+      <td><code>void</code></td>
+      <td>
+        Renvoie un objet {{domxref("Blob")}} représentant l'image contenue
+        dans le canvas ; ce fichier peut être mis en cache sur le disque ou
+        stocké en mémoire au choix du navigateur. Si <code>type</code> n'est pas
+        précisé, le format de l'image est <code>image/png</code>. L'image
+        renvoyée est en 96dpi.
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <code>toBlobHD</code>(in FileCallback callback, in optional
+        {{domxref("DOMString")}} type, in any ...args)
+        {{experimental_inline}}
+      </td>
+      <td><code>void</code></td>
+      <td>
+        Renvoie un objet {{domxref("Blob")}} représentant l'image contenue
+        dans le canvas ; ce fichier peut être mis en cache sur le disque ou
+        stocké en mémoire au choix du navigateur. Si <code>type</code> n'est pas
+        précisé, le format de l'image est <code>image/png</code>. L'image
+        renvoyée est à la résolution native du canvas.
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <code>mozGetAsFile</code>(in {{domxref("DOMString")}} name, in
+        optional {{domxref("DOMString")}} type)
+        {{non-standard_inline}}
+      </td>
+      <td>{{domxref("File")}}</td>
+      <td>
+        Renvoie un objet {{domxref("File")}} représentant l'image contenue
+        dans le canvas ; ce fichier est en mémoire avec le
+        <code>nom</code> précisé. Si <code>type</code> n'est pas précisé, le
+        fotmat de l'image est <code>image/png</code>.
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <code
+          >void mozFetchAsStream(in
+          {{interface("nsIInputStreamCallback")}} callback,
+          [optional] in DOMString type)</code
+        >
+        {{non-standard_inline}}
+      </td>
+      <td><code>void</code></td>
+      <td>
+        Crée un nouveau flux d'entrée qui, quand il est prêt, fournit le contenu
+        du canvas en tant que données d'image. Quand le nouveau flux est prêt,
+        la fonction de rappel spécifiée
+        {{ifmethod("nsIInputStreamCallback", "onInputStreamReady")}}
+        est appelée. Si <code>type</code> n'est pas précisée, Le format de
+        l'image est <code>image/png.</code>
+        <div class="note">
+          <p>
+            <strong>Note :</strong> Cette méthode ne peut être utilisée que
+            depuis le code chrome.
+          </p>
+        </div>
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Examples">Examples</h2>
+## Examples
 
-<h3 id="Example_Obtenir_la_data-url_du_canvas">Example: Obtenir la data-url du canvas</h3>
+### Example: Obtenir la data-url du canvas
 
-<p>D'abord, dessinez dans le canvas, ensuite appelez <code>canvas.toDataURL()</code> pour obtenir la data: URL du canvas.</p>
+D'abord, dessinez dans le canvas, ensuite appelez `canvas.toDataURL()` pour obtenir la data: URL du canvas.
 
-<pre class="brush: js">function test() {
+```js
+function test() {
  var canvas = document.getElementById("canvas");
  var url = canvas.toDataURL();
 
@@ -133,13 +220,14 @@ translation_of: Web/API/HTMLCanvasElement
  nouvelleImg.src = url;
  document.body.appendChild(nouvelleImg);
 }
-</pre>
+```
 
-<h3 id="Example_Obtenir_un_fichier_représentant_le_canvas">Example: Obtenir un fichier représentant le canvas</h3>
+### Example: Obtenir un fichier représentant le canvas
 
-<p>Une fois que vous avez dessiné du contenu dans un canvas, vous pouvez le convertir dans un fichier avec l'un des formats supportés. Par exemple, l'extrait de code ci-dessous récupère l'image contenue dans l'élément canvas avec l'ID "canvas", en effectue une copie au format PNG, puis ajoute un nouvel élément {{HTMLElement("img")}} au document, dont l'image source est celle créée en utilisant le canvas.</p>
+Une fois que vous avez dessiné du contenu dans un canvas, vous pouvez le convertir dans un fichier avec l'un des formats supportés. Par exemple, l'extrait de code ci-dessous récupère l'image contenue dans l'élément canvas avec l'ID "canvas", en effectue une copie au format PNG, puis ajoute un nouvel élément {{HTMLElement("img")}} au document, dont l'image source est celle créée en utilisant le canvas.
 
-<pre class="brush: js">function test() {
+```js
+function test() {
   var canvas = document.getElementById("canvas");
   canvas.toBlob(function(blob) {
     var nouvelleImg = document.createElement("img"),
@@ -151,16 +239,18 @@ translation_of: Web/API/HTMLCanvasElement
     nouvelleImg.src = url;
     document.body.appendChild(nouvelleImg);
   });
-}</pre>
+}
+```
 
-<p>Vous pouvez utiliser cette technique en association avec les événemments de souris pour effectuer un changement d'images dynamique (niveau de gris et couleur dans cet exemple) :</p>
+Vous pouvez utiliser cette technique en association avec les événemments de souris pour effectuer un changement d'images dynamique (niveau de gris et couleur dans cet exemple) :
 
-<pre class="brush: html">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-&lt;head&gt;
-&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
-&lt;title&gt;MDC Example&lt;/title&gt;
-&lt;script type="text/javascript"&gt;
+```html
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<title>MDC Example</title>
+<script type="text/javascript">
 function afficherImageCouleur() {
   this.style.display = "none";
   this.nextSibling.style.display = "inline";
@@ -176,7 +266,7 @@ function supprimerCouleurs() {
       nImgsLong = aImages.length,
       oCanvas = document.createElement("canvas"),
       oCtx = oCanvas.getContext("2d");
-  for (var nLargeur, nHauteur, oImgData, oImgGrise, nPixel, aPix, nPixLong, nImgId = 0; nImgId &lt; nImgsLong; nImgId++) {
+  for (var nLargeur, nHauteur, oImgData, oImgGrise, nPixel, aPix, nPixLong, nImgId = 0; nImgId < nImgsLong; nImgId++) {
     oImgCouleur = aImages[nImgId];
     nLargeur = oImgCouleur .offsetWidth;
     nHauteur = oImgCouleur .offsetHeight;
@@ -186,7 +276,7 @@ function supprimerCouleurs() {
     oImgData = oCtx.getImageData(0, 0, nLargeur, nHauteur);
     aPix = oImgData.data;
     nPixLong = aPix.length;
-    for (nPixel = 0; nPixel &lt; nPixLen; nPixel += 4) {
+    for (nPixel = 0; nPixel < nPixLen; nPixel += 4) {
       aPix[nPixel + 2] = aPix[nPixel + 1] = aPix[nPixel] = (aPix[nPixel] + aPix[nPixel + 1] + aPix[nPixel + 2]) / 3;
     }
     oCtx.putImageData(oImgData, 0, 0);
@@ -199,47 +289,32 @@ function supprimerCouleurs() {
     oImgCouleur.parentNode.insertBefore(oImgGrise , oImgCouleur);
   }
 }
-&lt;/script&gt;
-&lt;/head&gt;
+</script>
+</head>
 
-&lt;body onload="supprimerCouleurs();"&gt;
-&lt;p&gt;&lt;img class="grayscale" src="chagall.jpg" alt="" /&gt;&lt;/p&gt;
-&lt;/body&gt;
-&lt;/html&gt;</pre>
+<body onload="supprimerCouleurs();">
+<p><img class="grayscale" src="chagall.jpg" alt="" /></p>
+</body>
+</html>
+```
 
-<p>Remarquez qu'ici nous créons une image PNG ; si vous ajoutez un second paramètre à l'appel de <code>toBlob()</code>, vous pouvez spécifier le type d'image. Par exemple, pour obtenir l'image au format JPEG :</p>
+Remarquez qu'ici nous créons une image PNG ; si vous ajoutez un second paramètre à l'appel de `toBlob()`, vous pouvez spécifier le type d'image. Par exemple, pour obtenir l'image au format JPEG :
 
-<pre class="brush: js"> canvas.toBlob(function(blob){...}, "image/jpeg", 0.95); // JPEG avec une qualité de 95%</pre>
+```js
+ canvas.toBlob(function(blob){...}, "image/jpeg", 0.95); // JPEG avec une qualité de 95%
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "embedded-content-0.html#the-canvas-element", "HTMLCanvasElement")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>La méthode <code>getContext()</code> retourne un {{domxref("RenderingContext")}} au lieu d'un <code>object</code> opaque.<br>
-    Les méthodes <code>supportsContext()</code>, <code>setContext()</code>, <code>transferControlToProxy()</code>, <code>toDataURLHD()</code>, <code>toBlobURLHD()</code> ont été ajoutées.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', "the-canvas-element.html#the-canvas-element", "HTMLCanvasElement")}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                | Statut                           | Commentaire                                                                                                                                                                                                                                   |
+| ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('HTML WHATWG', "embedded-content-0.html#the-canvas-element", "HTMLCanvasElement")}} | {{Spec2('HTML WHATWG')}} | La méthode `getContext()` retourne un {{domxref("RenderingContext")}} au lieu d'un `object` opaque. Les méthodes `supportsContext()`, `setContext()`, `transferControlToProxy()`, `toDataURLHD()`, `toBlobURLHD()` ont été ajoutées. |
+| {{SpecName('HTML5 W3C', "the-canvas-element.html#the-canvas-element", "HTMLCanvasElement")}} | {{Spec2('HTML5 W3C')}}     | Définition initiale.                                                                                                                                                                                                                          |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.HTMLCanvasElement")}}</p>
+{{Compat("api.HTMLCanvasElement")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>Elément HTML implementant cette interface : {{HTMLElement("canvas")}}.</li>
-</ul>
+- Elément HTML implementant cette interface : {{HTMLElement("canvas")}}.
diff --git a/files/fr/web/api/htmlcollection/index.md b/files/fr/web/api/htmlcollection/index.md
index 4776f87c85..4af0c097bb 100644
--- a/files/fr/web/api/htmlcollection/index.md
+++ b/files/fr/web/api/htmlcollection/index.md
@@ -7,88 +7,63 @@ tags:
   - Reference
 translation_of: Web/API/HTMLCollection
 ---
-<p>{{APIRef("HTML DOM")}}</p>
+{{APIRef("HTML DOM")}}
 
-<p>L'interface <strong>HTMLCollection</strong> est constituée d'une collection générique (à la manière d'un tableau similaire à <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/arguments">arguments</a>) d'éléments (dans l'ordre du document) et offre des méthodes et des propriétés pour sélectionner ces éléments dans la liste.</p>
+L'interface **HTMLCollection** est constituée d'une collection générique (à la manière d'un tableau similaire à [arguments](/fr/docs/Web/JavaScript/Reference/Fonctions/arguments)) d'éléments (dans l'ordre du document) et offre des méthodes et des propriétés pour sélectionner ces éléments dans la liste.
 
-<p><strong>Note:</strong> Cette interface est appelée <code>HTMLCollection</code> pour des raisons historiques (avant DOM4, les collections implémentant cette interface pouvaient uniquement êtres constituées d'élements HTML).</p>
+**Note:** Cette interface est appelée `HTMLCollection` pour des raisons historiques (avant DOM4, les collections implémentant cette interface pouvaient uniquement êtres constituées d'élements HTML).
 
-<p>Une HTMLCollection dans le DOM HTML est automatiquement mise à jour quand le document concerné change.</p>
+Une HTMLCollection dans le DOM HTML est automatiquement mise à jour quand le document concerné change.
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<dl>
- <dt>{{domxref("HTMLCollection.length")}} {{readonlyInline}}</dt>
- <dd>Retourne le nombre d'éléments de la collection.</dd>
-</dl>
+- {{domxref("HTMLCollection.length")}} {{readonlyInline}}
+  - : Retourne le nombre d'éléments de la collection.
 
-<h2 id="Méthodes">Méthodes</h2>
+## Méthodes
 
-<dl>
- <dt>{{domxref("HTMLCollection.item()")}}</dt>
- <dd>Retourne le nœud spécifique à l'<code>index</code> basé sur zéro donné dans la liste. Retourne <code>null</code> si l'<code>index</code> est hors de portée.</dd>
- <dt>{{domxref("HTMLCollection.namedItem()")}}</dt>
- <dd>Retourne le nœud spécifique dont l'ID ou, à défaut, le nom correspond à la chaîne de caractères fournie par <code>name</code>. La recherche par nom est faite seulement en dernier ressort, uniquement en HTML, et seulement si l'élément référencé supporte l'attribut <code>name</code>. Retourne <code>null</code> si aucun nœud n'existe pour le nom donné.</dd>
-</dl>
+- {{domxref("HTMLCollection.item()")}}
+  - : Retourne le nœud spécifique à l'`index` basé sur zéro donné dans la liste. Retourne `null` si l'`index` est hors de portée.
+- {{domxref("HTMLCollection.namedItem()")}}
+  - : Retourne le nœud spécifique dont l'ID ou, à défaut, le nom correspond à la chaîne de caractères fournie par `name`. La recherche par nom est faite seulement en dernier ressort, uniquement en HTML, et seulement si l'élément référencé supporte l'attribut `name`. Retourne `null` si aucun nœud n'existe pour le nom donné.
 
-<h2 id="Utilisation_en_JavaScript">Utilisation en JavaScript</h2>
+## Utilisation en JavaScript
 
-<p><code>HTMLCollection</code> expose aussi directement ses membres comme propriétés, par nom et par index. Les ID HTML peuvent contenir : et . comme caractères valides, ce qui nécessite d'utiliser la notation entre crochets pour accèder aux propriétés. Actuellement, HTMLCollections ne reconnait pas  purement les ID numériques, ce qui provoquerait des conflits avec l'accès de "array-style" , bien qu'HTML5 le permette.</p>
+`HTMLCollection` expose aussi directement ses membres comme propriétés, par nom et par index. Les ID HTML peuvent contenir : et . comme caractères valides, ce qui nécessite d'utiliser la notation entre crochets pour accèder aux propriétés. Actuellement, HTMLCollections ne reconnait pas  purement les ID numériques, ce qui provoquerait des conflits avec l'accès de "array-style" , bien qu'HTML5 le permette.
 
-<p>Par exemple, en supposant qu'il y ait un élément <code>&lt;form&gt;</code> <em>(formulaire)</em> dans le document et que son <code>id</code> soit <code>"myForm" </code>:</p>
+Par exemple, en supposant qu'il y ait un élément `<form>` _(formulaire)_ dans le document et que son `id` soit `"myForm" `:
 
-<pre class="brush: html"><code>var elem1, elem2;
+```html
+var elem1, elem2;
 
 // document.forms est une HTMLCollection
 
 elem1 = document.forms[0];
 elem2 = document.forms.item(0);
 
-alert(elem1 === elem2); // affiche : "true" <em>(vrai)</em>
+alert(elem1 === elem2); // affiche : "true" (vrai)
 
 elem1 = document.forms.myForm;
 elem2 = document.forms.namedItem("myForm");
 
 alert(elem1 === elem2); // affiche : "true"
 
-elem1 = document.forms["named.item.with.periods"];</code></pre>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>Certains navigateurs se comportent différemment quand il y a plus d'un élément correspondant à la chaîne utilisée comme index (ou l'argument <code>namedItem</code>). Firefox 8 se comporte comme spécifié dans DOM 2 et DOM4, en retournant le premier élément correspondant. Les navigateurs WebKit et Internet Explorer, dans ce cas, retournent une autre <code>HTMLCollection</code> et Opera retourne un {{domxref("NodeList")}} de tous les éléments correspondants.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#htmlcollection', 'HTMLCollection')}}</td>
-   <td>{{ Spec2('DOM WHATWG') }}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 HTML', 'html.html#ID-75708506', 'HTMLCollection')}}</td>
-   <td>{{ Spec2('DOM2 HTML') }}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM1', 'level-one-html.html#ID-75708506', 'HTMLCollection')}}</td>
-   <td>{{ Spec2('DOM1') }}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("NodeList")}}</li>
- <li>{{domxref("HTMLFormControlsCollection")}}, {{domxref("HTMLOptionsCollection")}}</li>
-</ul>
+elem1 = document.forms["named.item.with.periods"];
+```
+
+## Compatibilité des navigateurs
+
+Certains navigateurs se comportent différemment quand il y a plus d'un élément correspondant à la chaîne utilisée comme index (ou l'argument `namedItem`). Firefox 8 se comporte comme spécifié dans DOM 2 et DOM4, en retournant le premier élément correspondant. Les navigateurs WebKit et Internet Explorer, dans ce cas, retournent une autre `HTMLCollection` et Opera retourne un {{domxref("NodeList")}} de tous les éléments correspondants.
+
+## Spécifications
+
+| Specification                                                                                    | Statut                           | Commentaire          |
+| ------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName('DOM WHATWG', '#htmlcollection', 'HTMLCollection')}}             | {{ Spec2('DOM WHATWG') }} |                      |
+| {{SpecName('DOM2 HTML', 'html.html#ID-75708506', 'HTMLCollection')}}     | {{ Spec2('DOM2 HTML') }} |                      |
+| {{SpecName('DOM1', 'level-one-html.html#ID-75708506', 'HTMLCollection')}} | {{ Spec2('DOM1') }}         | Définition initiale. |
+
+## Voir aussi
+
+- {{domxref("NodeList")}}
+- {{domxref("HTMLFormControlsCollection")}}, {{domxref("HTMLOptionsCollection")}}
diff --git a/files/fr/web/api/htmlcollection/item/index.md b/files/fr/web/api/htmlcollection/item/index.md
index d3e10f88c0..d1c5d2cea5 100644
--- a/files/fr/web/api/htmlcollection/item/index.md
+++ b/files/fr/web/api/htmlcollection/item/index.md
@@ -3,34 +3,31 @@ title: HTMLCollection.item
 slug: Web/API/HTMLCollection/item
 translation_of: Web/API/HTMLCollection/item
 ---
-<p>{{APIRef("HTML DOM")}}</p>
+{{APIRef("HTML DOM")}}
 
-<p><code>HTMLCollection.item()</code> récupère un élément par sa position.</p>
+`HTMLCollection.item()` récupère un élément par sa position.
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt>index</dt>
- <dd>La position de l'élement à retourner. Les éléments apparaissent dans une HTMLCollection dans le même ordre que celui du document source.</dd>
-</dl>
+- index
+  - : La position de l'élement à retourner. Les éléments apparaissent dans une HTMLCollection dans le même ordre que celui du document source.
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+### Valeur de retour
 
-<p>L'élement à la position spécifiée, ou null si la position est inférieure à zéro ou supérieure ou égale à la valeur de la propriété <code>length</code>.</p>
+L'élement à la position spécifiée, ou null si la position est inférieure à zéro ou supérieure ou égale à la valeur de la propriété `length`.
 
-<h2 id="Description">Description</h2>
+## Description
 
-<p>La méthode <code>item()</code> retourne un élément numéroté d'une HTMLCollection. En Javascript, il est plus simple de traiter une HTMLCollection comme un tableau et d'utiliser les indexes comme pour les tableaux.</p>
+La méthode `item()` retourne un élément numéroté d'une HTMLCollection. En Javascript, il est plus simple de traiter une HTMLCollection comme un tableau et d'utiliser les indexes comme pour les tableaux.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">var c = document.images;  // Ceci est une HTMLCollection.
+```js
+var c = document.images;  // Ceci est une HTMLCollection.
 var img0 = c.item(0);     // Vous pouvez utiliser la méthode item comme ceci,
 var img1 = c[1];          // Mais cette notation est plus simple et plus commune
-</pre>
+```
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("NodeList.item()")}}</li>
-</ul>
+- {{domxref("NodeList.item()")}}
diff --git a/files/fr/web/api/htmlcontentelement/getdistributednodes/index.md b/files/fr/web/api/htmlcontentelement/getdistributednodes/index.md
index 282b4a2933..c34b0e1a69 100644
--- a/files/fr/web/api/htmlcontentelement/getdistributednodes/index.md
+++ b/files/fr/web/api/htmlcontentelement/getdistributednodes/index.md
@@ -8,43 +8,31 @@ tags:
   - Web Components
 translation_of: Web/API/HTMLContentElement/getDistributedNodes
 ---
-<p>{{ APIRef("Web Components") }}</p>
+{{ APIRef("Web Components") }}
 
-<p>La méthode <code><strong>HTMLContentElement.getDistributedNodes()</strong></code> retourne un {{domxref("NodeList")}} statique du {{glossary("distributed nodes")}} associé avec l'élément <code>&lt;content&gt;</code>.</p>
+La méthode **`HTMLContentElement.getDistributedNodes()`** retourne un {{domxref("NodeList")}} statique du {{glossary("distributed nodes")}} associé avec l'élément `<content>`.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var <em>nodeList</em> = <em>object</em>.getDistributedNodes()
-</pre>
+    var nodeList = object.getDistributedNodes()
 
-<h2 id="Specifications">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">// Récupère les éléments
-var nodes = myContentObject.getDistributedNodes();</pre>
+```js
+// Récupère les éléments
+var nodes = myContentObject.getDistributedNodes();
+```
 
-<h2 id="Specifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Shadow DOM', '#the-content-element', 'content')}}</td>
-   <td>{{Spec2('Shadow DOM')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                    | Status                           | Commentaire |
+| -------------------------------------------------------------------------------- | -------------------------------- | ----------- |
+| {{SpecName('Shadow DOM', '#the-content-element', 'content')}} | {{Spec2('Shadow DOM')}} |             |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.HTMLContentElement.getDistributedNodes")}}</p>
+{{Compat("api.HTMLContentElement.getDistributedNodes")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li><a href="/fr/docs/Web/API/HTMLContentElement">HTMLContentElement</a></li>
-</ul>
+- [HTMLContentElement](/fr/docs/Web/API/HTMLContentElement)
diff --git a/files/fr/web/api/htmlcontentelement/index.md b/files/fr/web/api/htmlcontentelement/index.md
index 9746995c4a..51df4a127b 100644
--- a/files/fr/web/api/htmlcontentelement/index.md
+++ b/files/fr/web/api/htmlcontentelement/index.md
@@ -9,52 +9,35 @@ tags:
   - Web Components
 translation_of: Web/API/HTMLContentElement
 ---
-<p>{{ APIRef("Web Components") }}</p>
+{{ APIRef("Web Components") }}
 
-<p>L'interface <code><strong>HTMLContentElement</strong></code> represente un élément HTML {{HTMLElement("content")}}, utilisé dans le <a href="/en-US/docs/Web/Web_Components/Shadow_DOM">Shadow DOM</a>. </p>
+L'interface **`HTMLContentElement`** represente un élément HTML {{HTMLElement("content")}}, utilisé dans le [Shadow DOM](/en-US/docs/Web/Web_Components/Shadow_DOM).
 
-<h2 id="Properties">Propriétés</h2>
+## Propriétés
 
-<p><em>Cette interface hérite des propriétés de {{domxref("HTMLElement")}}.</em></p>
+_Cette interface hérite des propriétés de {{domxref("HTMLElement")}}._
 
-<dl>
- <dt>{{domxref("HTMLContentElement.select")}}</dt>
- <dd>Une {{domxref("DOMString")}} qui renvoie le {{ htmlattrxref("select", "content") }} d'un attribut HTML. La valeur de retour est une liste de sélecteurs CSS séparés par des virgules. Ils récupèrent le contenu à inserer à la place de l'élément <code>&lt;content&gt;</code>.</dd>
-</dl>
+- {{domxref("HTMLContentElement.select")}}
+  - : Une {{domxref("DOMString")}} qui renvoie le {{ htmlattrxref("select", "content") }} d'un attribut HTML. La valeur de retour est une liste de sélecteurs CSS séparés par des virgules. Ils récupèrent le contenu à inserer à la place de l'élément `<content>`.
 
-<h2 id="Méthodes">Méthodes</h2>
+## Méthodes
 
-<p><em>Cette interface hérite des methodes de {{domxref("HTMLElement")}}.</em></p>
+_Cette interface hérite des methodes de {{domxref("HTMLElement")}}._
 
-<dl>
- <dt>{{domxref("HTMLContentElement.getDistributedNodes()")}}</dt>
- <dd>Retourne un {{domxref("NodeList")}} statique du {{glossary("distributed nodes")}} associé avec l'élément <code>&lt;content&gt;</code>. </dd>
-</dl>
+- {{domxref("HTMLContentElement.getDistributedNodes()")}}
+  - : Retourne un {{domxref("NodeList")}} statique du {{glossary("distributed nodes")}} associé avec l'élément `<content>`.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Shadow DOM', '#the-content-element', 'content')}}</td>
-   <td>{{Spec2('Shadow DOM')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                    | Statut                           | Commentaire |
+| -------------------------------------------------------------------------------- | -------------------------------- | ----------- |
+| {{SpecName('Shadow DOM', '#the-content-element', 'content')}} | {{Spec2('Shadow DOM')}} |             |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.HTMLContentElement")}}</p>
+{{Compat("api.HTMLContentElement")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>L'élement HTML {{HTMLElement("content")}}, qui implémente cette interface.</li>
- <li><a href="/en-US/docs/Web/Web_Components/Shadow_DOM">Shadow DOM</a></li>
-</ul>
+- L'élement HTML {{HTMLElement("content")}}, qui implémente cette interface.
+- [Shadow DOM](/en-US/docs/Web/Web_Components/Shadow_DOM)
diff --git a/files/fr/web/api/htmlcontentelement/select/index.md b/files/fr/web/api/htmlcontentelement/select/index.md
index f5b8eda778..c639c24316 100644
--- a/files/fr/web/api/htmlcontentelement/select/index.md
+++ b/files/fr/web/api/htmlcontentelement/select/index.md
@@ -9,43 +9,31 @@ tags:
   - Web Components
 translation_of: Web/API/HTMLContentElement/select
 ---
-<p>{{ APIRef("Web Components") }}</p>
+{{ APIRef("Web Components") }}
 
-<p>La propriété <code><strong>HTMLContentElement.select</strong></code> represente l'attribut <code>select</code>. La valeur de retour est une liste de sélecteurs CSS séparés par des espaces. Ils récupèrent le contenu à inserer à la place de l'élément <code>&lt;content&gt;</code>.</p>
+La propriété **`HTMLContentElement.select`** represente l'attribut `select`. La valeur de retour est une liste de sélecteurs CSS séparés par des espaces. Ils récupèrent le contenu à inserer à la place de l'élément `<content>`.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>object</em>.select = "<em>CSSselector</em> <em>CSSselector</em> ...";
-</pre>
+    object.select = "CSSselector CSSselector ...";
 
-<h2 id="Specifications">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">// Choisi les éléments &lt;h1&gt; et les elements avec la class "error"
-myContentObject.select = "h1 .error";</pre>
+```js
+// Choisi les éléments <h1> et les elements avec la class "error"
+myContentObject.select = "h1 .error";
+```
 
-<h2 id="Specifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Shadow DOM', '#the-content-element', 'content')}}</td>
-   <td>{{Spec2('Shadow DOM')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Specification                                                                    | Status                           | Comment |
+| -------------------------------------------------------------------------------- | -------------------------------- | ------- |
+| {{SpecName('Shadow DOM', '#the-content-element', 'content')}} | {{Spec2('Shadow DOM')}} |         |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.HTMLContentElement.getDistributedNodes")}}</p>
+{{Compat("api.HTMLContentElement.getDistributedNodes")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li><a href="/fr/docs/Web/API/HTMLContentElement">HTMLContentElement</a></li>
-</ul>
+- [HTMLContentElement](/fr/docs/Web/API/HTMLContentElement)
diff --git a/files/fr/web/api/htmldialogelement/close_event/index.md b/files/fr/web/api/htmldialogelement/close_event/index.md
index e2a81f2a09..37cee6ecbf 100644
--- a/files/fr/web/api/htmldialogelement/close_event/index.md
+++ b/files/fr/web/api/htmldialogelement/close_event/index.md
@@ -11,61 +11,67 @@ tags:
   - fermeture
 translation_of: Web/API/HTMLDialogElement/close_event
 ---
-<p>{{ APIRef() }}</p>
+{{ APIRef() }}
 
-<p>L'événement <strong><code>close</code></strong> est déclenché sur un objet {{domxref ("HTMLDialogElement")}} lorsque la boîte de dialogue qu'il représente a été fermée.</p>
+L'événement **`close`** est déclenché sur un objet {{domxref ("HTMLDialogElement")}} lorsque la boîte de dialogue qu'il représente a été fermée.
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row">Bouillonnant</th>
-   <td>Non</td>
-  </tr>
-  <tr>
-   <th scope="row">Annulable</th>
-   <td>Non</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface</th>
-   <td>{{domxref("Event")}}</td>
-  </tr>
-  <tr>
-   <th scope="row">Propriété du gestionnaire d'événements</th>
-   <td>{{domxref ("GlobalEventHandlers/onclose", "onclose")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Bouillonnant</th>
+      <td>Non</td>
+    </tr>
+    <tr>
+      <th scope="row">Annulable</th>
+      <td>Non</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface</th>
+      <td>{{domxref("Event")}}</td>
+    </tr>
+    <tr>
+      <th scope="row">Propriété du gestionnaire d'événements</th>
+      <td>
+        {{domxref ("GlobalEventHandlers/onclose", "onclose")}}
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Exemple_concret">Exemple concret</h3>
+### Exemple concret
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;dialog class="example-dialog"&gt;
-  &lt;button class="close" type="reset"&gt;Close&lt;/button&gt;
-&lt;/dialog&gt;
+```html
+<dialog class="example-dialog">
+  <button class="close" type="reset">Close</button>
+</dialog>
 
-&lt;button class="open-dialog"&gt;Open dialog&lt;/button&gt;
+<button class="open-dialog">Open dialog</button>
 
-&lt;div class="result"&gt;&lt;/div&gt;</pre>
+<div class="result"></div>
+```
 
-<pre class="brush: css hidden">button, div {
+```css hidden
+button, div {
   margin: .5rem;
 }
-</pre>
+```
 
-<h4 id="JS">JS</h4>
+#### JS
 
-<pre class="brush: js">const result = document.querySelector('.result')
+```js
+const result = document.querySelector('.result')
 
 const dialog = document.querySelector('.example-dialog')
-dialog.addEventListener('close', (event) =&gt; {
+dialog.addEventListener('close', (event) => {
   result.textContent = 'dialog was closed'
 })
 
 const openDialog = document.querySelector('.open-dialog')
-openDialog.addEventListener('click', () =&gt; {
+openDialog.addEventListener('click', () => {
   if (typeof dialog.showModal === 'function') {
     dialog.showModal()
     result.textContent = ''
@@ -75,36 +81,25 @@ openDialog.addEventListener('click', () =&gt; {
 })
 
 const closeButton = document.querySelector('.close')
-closeButton.addEventListener('click', () =&gt; {
+closeButton.addEventListener('click', () => {
   dialog.close()
 })
-</pre>
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{ EmbedLiveSample('Exemple_concret', '100%', '100px') }}</p>
+{{ EmbedLiveSample('Exemple_concret', '100%', '100px') }}
 
-<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>
-  </tr>
-  <tr>
-   <td>{{ SpecName('HTML WHATWG', 'indices.html#event-close', 'close') }}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                            | État                             |
+| ---------------------------------------------------------------------------------------- | -------------------------------- |
+| {{ SpecName('HTML WHATWG', 'indices.html#event-close', 'close') }} | {{Spec2('HTML WHATWG')}} |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.HTMLDialogElement.close_event")}}</p>
+{{Compat("api.HTMLDialogElement.close_event")}}
 
-<h2 id="Voir_également">Voir également</h2>
+## Voir également
 
-<ul>
- <li>Élément HTML <code><a href="/en-US/docs/Web/HTML/Element/dialog">&lt;dialog&gt;</a></code></li>
-</ul>
+- Élément HTML [`<dialog>`](/en-US/docs/Web/HTML/Element/dialog)
diff --git a/files/fr/web/api/htmldialogelement/index.md b/files/fr/web/api/htmldialogelement/index.md
index 15d1449571..60a44192db 100644
--- a/files/fr/web/api/htmldialogelement/index.md
+++ b/files/fr/web/api/htmldialogelement/index.md
@@ -12,72 +12,67 @@ tags:
   - TopicStub
 translation_of: Web/API/HTMLDialogElement
 ---
-<div>{{APIRef("HTML DOM")}}{{SeeCompatTable}}</div>
-
-<p>The <strong><code>HTMLDialogElement</code></strong> interface provides methods to manipulate {{HTMLElement("dialog")}} elements. It inherits properties and methods from the {{domxref("HTMLElement")}} interface.</p>
-
-<p>{{InheritanceDiagram(600, 120)}}</p>
-
-<h2 id="Properties">Properties</h2>
-
-<p><em>Inherits properties from its parent, {{domxref("HTMLElement")}}.</em></p>
-
-<dl>
- <dt>{{domxref("HTMLDialogElement.open")}}</dt>
- <dd>A {{domxref("Boolean")}} reflecting the {{htmlattrxref("open", "dialog")}} HTML attribute, indicating whether the dialog is available for interaction.</dd>
- <dt>{{domxref("HTMLDialogElement.returnValue")}}</dt>
- <dd>A {{domxref("DOMString")}} that sets or returns the return value for the dialog.</dd>
-</dl>
-
-<h2 id="Methods">Methods</h2>
-
-<p><em>Inherits methods from its parent, {{domxref("HTMLElement")}}.</em></p>
-
-<dl>
- <dt>{{domxref("HTMLDialogElement.close()")}}</dt>
- <dd>Closes the dialog. An optional {{domxref("DOMString")}} may be passed as an argument, updating the <code>returnValue</code> of the the dialog.</dd>
- <dt>{{domxref("HTMLDialogElement.show()")}}</dt>
- <dd>Displays the dialog modelessly, i.e. still allowing interaction with content outside of the dialog.</dd>
- <dt>{{domxref("HTMLDialogElement.showModal()")}}</dt>
- <dd>Displays the dialog as a modal, over the top of any other dialogs that might be present. Interaction outside the dialog is blocked.</dd>
-</dl>
-
-<h2 id="Events">Events</h2>
-
-<dl>
- <dt>{{domxref("HTMLDialogElement/close_event", "close")}}</dt>
- <dd>Fired when the dialog is closed.<br>
- Also available via the {{domxref("GlobalEventHandlers/onclose", "onclose")}} property.</dd>
-</dl>
-
-<h2 id="Examples">Examples</h2>
-
-<p>The following example shows a simple button that, when clicked, opens a {{htmlelement("dialog")}} containing a form via the {{domxref("HTMLDialogElement.showModal()")}} function. From there you can click the <em>Cancel</em> button to close the dialog (via the {{domxref("HTMLDialogElement.close()")}} function), or submit the form via the submit button.</p>
-
-<pre class="brush: html">  &lt;!-- Simple pop-up dialog box, containing a form --&gt;
-  &lt;dialog id="favDialog"&gt;
-    &lt;form method="dialog"&gt;
-      &lt;section&gt;
-        &lt;p&gt;&lt;label for="favAnimal"&gt;Favorite animal:&lt;/label&gt;
-        &lt;select id="favAnimal" name="favAnimal"&gt;
-          &lt;option&gt;&lt;/option&gt;
-          &lt;option&gt;Brine shrimp&lt;/option&gt;
-          &lt;option&gt;Red panda&lt;/option&gt;
-          &lt;option&gt;Spider monkey&lt;/option&gt;
-        &lt;/select&gt;&lt;/p&gt;
-      &lt;/section&gt;
-      &lt;menu&gt;
-        &lt;button id="cancel" type="reset"&gt;Cancel&lt;/button&gt;
-        &lt;button type="submit"&gt;Confirm&lt;/button&gt;
-      &lt;/menu&gt;
-    &lt;/form&gt;
-  &lt;/dialog&gt;
-
-  &lt;menu&gt;
-    &lt;button id="updateDetails"&gt;Update details&lt;/button&gt;
-  &lt;/menu&gt;
-
-  &lt;script&gt;
+{{APIRef("HTML DOM")}}{{SeeCompatTable}}
+
+The **`HTMLDialogElement`** interface provides methods to manipulate {{HTMLElement("dialog")}} elements. It inherits properties and methods from the {{domxref("HTMLElement")}} interface.
+
+{{InheritanceDiagram(600, 120)}}
+
+## Properties
+
+_Inherits properties from its parent, {{domxref("HTMLElement")}}._
+
+- {{domxref("HTMLDialogElement.open")}}
+  - : A {{domxref("Boolean")}} reflecting the {{htmlattrxref("open", "dialog")}} HTML attribute, indicating whether the dialog is available for interaction.
+- {{domxref("HTMLDialogElement.returnValue")}}
+  - : A {{domxref("DOMString")}} that sets or returns the return value for the dialog.
+
+## Methods
+
+_Inherits methods from its parent, {{domxref("HTMLElement")}}._
+
+- {{domxref("HTMLDialogElement.close()")}}
+  - : Closes the dialog. An optional {{domxref("DOMString")}} may be passed as an argument, updating the `returnValue` of the the dialog.
+- {{domxref("HTMLDialogElement.show()")}}
+  - : Displays the dialog modelessly, i.e. still allowing interaction with content outside of the dialog.
+- {{domxref("HTMLDialogElement.showModal()")}}
+  - : Displays the dialog as a modal, over the top of any other dialogs that might be present. Interaction outside the dialog is blocked.
+
+## Events
+
+- {{domxref("HTMLDialogElement/close_event", "close")}}
+  - : Fired when the dialog is closed.
+    Also available via the {{domxref("GlobalEventHandlers/onclose", "onclose")}} property.
+
+## Examples
+
+The following example shows a simple button that, when clicked, opens a {{htmlelement("dialog")}} containing a form via the {{domxref("HTMLDialogElement.showModal()")}} function. From there you can click the _Cancel_ button to close the dialog (via the {{domxref("HTMLDialogElement.close()")}} function), or submit the form via the submit button.
+
+```html
+  <!-- Simple pop-up dialog box, containing a form -->
+  <dialog id="favDialog">
+    <form method="dialog">
+      <section>
+        <p><label for="favAnimal">Favorite animal:</label>
+        <select id="favAnimal" name="favAnimal">
+          <option></option>
+          <option>Brine shrimp</option>
+          <option>Red panda</option>
+          <option>Spider monkey</option>
+        </select></p>
+      </section>
+      <menu>
+        <button id="cancel" type="reset">Cancel</button>
+        <button type="submit">Confirm</button>
+      </menu>
+    </form>
+  </dialog>
+
+  <menu>
+    <button id="updateDetails">Update details</button>
+  </menu>
+
+  <script>
     (function() {
       var updateButton = document.getElementById('updateDetails');
       var cancelButton = document.getElementById('cancel');
@@ -105,44 +100,22 @@ translation_of: Web/API/HTMLDialogElement
       });
 
     })();
-  &lt;/script&gt;</pre>
-
-<div class="note">
-<p><strong>Note :</strong> You can find this example on GitHub as <a href="https://github.com/mdn/dom-examples/blob/master/htmldialogelement-basic/index.html">htmldialogelement-basic</a> (<a href="https://mdn.github.io/dom-examples/htmldialogelement-basic/">see it live also</a>).</p>
-</div>
-
-<h2 id="Specifications">Specifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', '#htmldialogelement', 'HTMLDialogElement')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5.2', 'interactive-elements.html#the-dialog-element', '&lt;dialog&gt;')}}</td>
-   <td>{{Spec2('HTML5.2')}}</td>
-   <td>Initial definition</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Browser compatibility</h2>
-
-
-
-<p>{{Compat("api.HTMLDialogElement")}}</p>
-
-<h2 id="See_also">See also</h2>
-
-<ul>
- <li>The HTML element implementing this interface: {{ HTMLElement("dialog") }}.</li>
-</ul>
+  </script>
+```
+
+> **Note :** You can find this example on GitHub as [htmldialogelement-basic](https://github.com/mdn/dom-examples/blob/master/htmldialogelement-basic/index.html) ([see it live also](https://mdn.github.io/dom-examples/htmldialogelement-basic/)).
+
+## Specifications
+
+| Specification                                                                                                            | Status                           | Comment            |
+| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------ |
+| {{SpecName('HTML WHATWG', '#htmldialogelement', 'HTMLDialogElement')}}                             | {{Spec2('HTML WHATWG')}} |                    |
+| {{SpecName('HTML5.2', 'interactive-elements.html#the-dialog-element', '&lt;dialog&gt;')}} | {{Spec2('HTML5.2')}}     | Initial definition |
+
+## Browser compatibility
+
+{{Compat("api.HTMLDialogElement")}}
+
+## See also
+
+- The HTML element implementing this interface: {{ HTMLElement("dialog") }}.
diff --git a/files/fr/web/api/htmldivelement/index.md b/files/fr/web/api/htmldivelement/index.md
index 7bacdb5605..65c2d18b59 100644
--- a/files/fr/web/api/htmldivelement/index.md
+++ b/files/fr/web/api/htmldivelement/index.md
@@ -8,65 +8,36 @@ tags:
   - Reference
 translation_of: Web/API/HTMLDivElement
 ---
-<div>{{APIRef("HTML DOM")}}</div>
+{{APIRef("HTML DOM")}}
 
-<p>L'interface <strong><code>HTMLDivElement</code></strong> fournit certaines propriétés spécifiques (en plus de celles qui proviennent de l'interface {{domxref("HTMLElement")}} via l'héritage) afin de manipuler les éléments {{HtmlElement("div")}}.</p>
+L'interface **`HTMLDivElement`** fournit certaines propriétés spécifiques (en plus de celles qui proviennent de l'interface {{domxref("HTMLElement")}} via l'héritage) afin de manipuler les éléments {{HtmlElement("div")}}.
 
-<p>{{InheritanceDiagram(600,120)}}</p>
+{{InheritanceDiagram(600,120)}}
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<p><em>Cette interface hérite des propriétés de son parent {{domxref("HTMLElement")}}.</em></p>
+_Cette interface hérite des propriétés de son parent {{domxref("HTMLElement")}}._
 
-<dl>
- <dt>{{domxref("HTMLDivElement.align")}} {{obsolete_inline}}</dt>
- <dd>Une chaîne de caractères {{domxref("DOMString")}} qui représente une propriété à valeur contrainte indiquant l'alignement du contenu de l'élément par rapport à son contexte. Les valeurs possibles pour cette propriété sont <code>"left"</code>, <code>"right"</code>, <code>"justify"</code> et <code>"center"</code>.</dd>
-</dl>
+- {{domxref("HTMLDivElement.align")}} {{obsolete_inline}}
+  - : Une chaîne de caractères {{domxref("DOMString")}} qui représente une propriété à valeur contrainte indiquant l'alignement du contenu de l'élément par rapport à son contexte. Les valeurs possibles pour cette propriété sont `"left"`, `"right"`, `"justify"` et `"center"`.
 
-<h2 id="Méthodes">Méthodes</h2>
+## Méthodes
 
-<p><em>Aucune méthode spécifique. Toutes les méthodes sont héritées depuis le parent {{domxref("HTMLElement")}}.</em></p>
+_Aucune méthode spécifique. Toutes les méthodes sont héritées depuis le parent {{domxref("HTMLElement")}}._
 
-<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', "#htmldivelement", "HTMLDivElement")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', "grouping-content.html#the-div-element", "HTMLDivElement")}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Aucune modification depuis {{SpecName("DOM2 HTML")}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 HTML', 'html.html#ID-22445964', 'HTMLDivElement')}}</td>
-   <td>{{Spec2('DOM2 HTML')}}</td>
-   <td>Aucune modification depuis {{SpecName("DOM1")}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM1', 'level-one-html.html#ID-22445964', 'HTMLDivElement')}}</td>
-   <td>{{Spec2('DOM1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                    | État                             | Commentaires                                                 |
+| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------------ |
+| {{SpecName('HTML WHATWG', "#htmldivelement", "HTMLDivElement")}}                             | {{Spec2('HTML WHATWG')}} |                                                              |
+| {{SpecName('HTML5 W3C', "grouping-content.html#the-div-element", "HTMLDivElement")}} | {{Spec2('HTML5 W3C')}}     | Aucune modification depuis {{SpecName("DOM2 HTML")}}. |
+| {{SpecName('DOM2 HTML', 'html.html#ID-22445964', 'HTMLDivElement')}}                     | {{Spec2('DOM2 HTML')}}     | Aucune modification depuis {{SpecName("DOM1")}}.     |
+| {{SpecName('DOM1', 'level-one-html.html#ID-22445964', 'HTMLDivElement')}}                 | {{Spec2('DOM1')}}         | Définition initiale.                                         |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.HTMLDivElement")}}</p>
+{{Compat("api.HTMLDivElement")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>L'élément HTML qui implémente cette interface : {{HTMLElement("div")}}.</li>
-</ul>
+- L'élément HTML qui implémente cette interface : {{HTMLElement("div")}}.
diff --git a/files/fr/web/api/htmldocument/index.md b/files/fr/web/api/htmldocument/index.md
index 649b922b25..e9f6331602 100644
--- a/files/fr/web/api/htmldocument/index.md
+++ b/files/fr/web/api/htmldocument/index.md
@@ -3,14 +3,12 @@ title: HTMLDocument
 slug: Web/API/HTMLDocument
 translation_of: Web/API/HTMLDocument
 ---
-<p>{{ APIRef("HTML DOM") }}</p>
+{{ APIRef("HTML DOM") }}
 
-<p><strong><code>HTMLDocument</code></strong> est une interface abstraite de <a href="/fr-FR/docs/DOM">DOM</a> qui fournit un accès aux propriétés spéciales et aux méthodes non présentes par défaut dans un document ordinaire (XML).</p>
+**`HTMLDocument`** est une interface abstraite de [DOM](/fr-FR/docs/DOM) qui fournit un accès aux propriétés spéciales et aux méthodes non présentes par défaut dans un document ordinaire (XML).
 
-<p>Ses méthodes et propriétés sont incluses dans la page {{domxref("document")}} et listées séparément dans leur propre section DOM référencées ci-dessus.</p>
+Ses méthodes et propriétés sont incluses dans la page {{domxref("document")}} et listées séparément dans leur propre section DOM référencées ci-dessus.
 
-<h2 id="Spécification">Spécification</h2>
+## Spécification
 
-<ul>
- <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268">http://www.w3.org/TR/DOM-Level-2-HTM...ml#ID-26809268</a></li>
-</ul>
+- [http://www.w3.org/TR/DOM-Level-2-HTM...ml#ID-26809268](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268)
diff --git a/files/fr/web/api/htmlelement/accesskey/index.md b/files/fr/web/api/htmlelement/accesskey/index.md
index e89e767a56..544c9dfd3e 100644
--- a/files/fr/web/api/htmlelement/accesskey/index.md
+++ b/files/fr/web/api/htmlelement/accesskey/index.md
@@ -12,12 +12,8 @@ translation_of: Web/API/HTMLElement/accessKey
 translation_of_original: Web/API/Element/accessKey
 original_slug: Web/API/Element/accessKey
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<div> </div>
+La propriété **Element.accessKey** définit la touche sur laquelle l'utilisateur doit appuyer pour accéder à l'élément.
 
-<p>La propriété <strong>Element.accessKey</strong> définit la touche sur laquelle l'utilisateur doit appuyer pour accéder à l'élément.</p>
-
-<div class="note">
-<p><strong>Note :</strong> La propriété <code>Element.accessKey</code><strong> </strong>est rarement utilisée en raison de ses multiples conflits avec des raccourcis clavier déjà présents dans les navigateurs. Pour contourner ce problème, les navigateurs appliquent le comportement attendu de "accesskey" lorsqu'une autre touche est pressée simultanément (comme <kbd>Alt</kbd> + accesskey).</p>
-</div>
+> **Note :** La propriété `Element.accessKey`\*\* \*\*est rarement utilisée en raison de ses multiples conflits avec des raccourcis clavier déjà présents dans les navigateurs. Pour contourner ce problème, les navigateurs appliquent le comportement attendu de "accesskey" lorsqu'une autre touche est pressée simultanément (comme <kbd>Alt</kbd> + accesskey).
diff --git a/files/fr/web/api/htmlelement/animationend_event/index.md b/files/fr/web/api/htmlelement/animationend_event/index.md
index 836a817daf..65caf0c965 100644
--- a/files/fr/web/api/htmlelement/animationend_event/index.md
+++ b/files/fr/web/api/htmlelement/animationend_event/index.md
@@ -4,79 +4,40 @@ slug: Web/API/HTMLElement/animationend_event
 translation_of: Web/API/HTMLElement/animationend_event
 original_slug: Web/Events/animationend
 ---
-<p>L'événement <code><strong>animationend</strong> est déclenché quand une animation CSS est terminée.</code></p>
-
-<h2 id="Informations_générales">Informations générales</h2>
-
-<dl>
- <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
- <dd style="margin: 0 0 0 120px;"><a href="http://www.w3.org/TR/css3-animations/#animation-events">CSS Animations</a></dd>
- <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
- <dd style="margin: 0 0 0 120px;">AnimationEvent</dd>
- <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
- <dd style="margin: 0 0 0 120px;">Oui</dd>
- <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
- <dd style="margin: 0 0 0 120px;">Non</dd>
- <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
- <dd style="margin: 0 0 0 120px;">Document, Element, Window</dd>
- <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
- <dd style="margin: 0 0 0 120px;">Aucune</dd>
-</dl>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Propriété</th>
-   <th scope="col">Type</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>target</code> {{ReadOnlyInline}}</td>
-   <td>{{domxref("EventTarget")}}</td>
-   <td>La cible de l'événement (la plus haute cible dans l'arbre du DOM).</td>
-  </tr>
-  <tr>
-   <td><code>type</code> {{ReadOnlyInline}}</td>
-   <td>{{domxref("DOMString")}}</td>
-   <td>Le type de l'événement.</td>
-  </tr>
-  <tr>
-   <td><code>bubbles</code> {{ReadOnlyInline}}</td>
-   <td><code>boolean</code></td>
-   <td>Est-ce que l'événement se propage?</td>
-  </tr>
-  <tr>
-   <td><code>cancelable</code> {{ReadOnlyInline}}</td>
-   <td><code>boolean</code></td>
-   <td>Est-il possible d'annuler l'événement?</td>
-  </tr>
-  <tr>
-   <td><code>animationName</code> {{ReadOnlyInline}}</td>
-   <td>{{domxref("DOMString")}}</td>
-   <td>Le nom de la propriété CSS associéee à la transition.</td>
-  </tr>
-  <tr>
-   <td><code>elapsedTime</code> {{ReadOnlyInline}}</td>
-   <td>Float</td>
-   <td>Le temps durant lequel l'animation a durée, en secondes, quand l'événement est déclenché, excepté le temps lorsque l'animation était en pause. Pour un événement <strong>animationstart</strong>, <em>elapsedTime</em> vaut zéro à moins que <em>animation-delay </em>ne soit négatif, et dans ce cas, l'événement sera déclenché avec un <em>elapsedTime</em> de (-1 * delay).</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Evénements_liés">Evénements liés</h2>
-
-<ul>
- <li>{{Event("animationstart")}}</li>
- <li>{{Event("animationend")}}</li>
- <li>{{Event("animationiteration")}}</li>
-</ul>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/CSS/Using_CSS_animations">Utilisation des animations CSS</a></li>
-</ul>
+L'événement `animationend est déclenché quand une animation CSS est terminée.`
+
+## Informations générales
+
+- Spécification
+  - : [CSS Animations](http://www.w3.org/TR/css3-animations/#animation-events)
+- Interface
+  - : AnimationEvent
+- Propagation
+  - : Oui
+- Annulable
+  - : Non
+- Cible
+  - : Document, Element, Window
+- Action par défaut
+  - : Aucune
+
+## Propriétés
+
+| Propriété                                | Type                                 | Description                                                                                                                                                                                                                                                                                                                                    |
+| ---------------------------------------- | ------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `target` {{ReadOnlyInline}}        | {{domxref("EventTarget")}} | La cible de l'événement (la plus haute cible dans l'arbre du DOM).                                                                                                                                                                                                                                                                             |
+| `type` {{ReadOnlyInline}}          | {{domxref("DOMString")}}     | Le type de l'événement.                                                                                                                                                                                                                                                                                                                        |
+| `bubbles` {{ReadOnlyInline}}       | `boolean`                            | Est-ce que l'événement se propage?                                                                                                                                                                                                                                                                                                             |
+| `cancelable` {{ReadOnlyInline}}    | `boolean`                            | Est-il possible d'annuler l'événement?                                                                                                                                                                                                                                                                                                         |
+| `animationName` {{ReadOnlyInline}} | {{domxref("DOMString")}}     | Le nom de la propriété CSS associéee à la transition.                                                                                                                                                                                                                                                                                          |
+| `elapsedTime` {{ReadOnlyInline}}   | Float                                | Le temps durant lequel l'animation a durée, en secondes, quand l'événement est déclenché, excepté le temps lorsque l'animation était en pause. Pour un événement **animationstart**, _elapsedTime_ vaut zéro à moins que _animation-delay_ ne soit négatif, et dans ce cas, l'événement sera déclenché avec un _elapsedTime_ de (-1 \* delay). |
+
+## Evénements liés
+
+- {{Event("animationstart")}}
+- {{Event("animationend")}}
+- {{Event("animationiteration")}}
+
+## Voir aussi
+
+- [Utilisation des animations CSS](/fr/docs/CSS/Using_CSS_animations)
diff --git a/files/fr/web/api/htmlelement/animationiteration_event/index.md b/files/fr/web/api/htmlelement/animationiteration_event/index.md
index f0e8c058b7..82a21ad3be 100644
--- a/files/fr/web/api/htmlelement/animationiteration_event/index.md
+++ b/files/fr/web/api/htmlelement/animationiteration_event/index.md
@@ -4,81 +4,42 @@ slug: Web/API/HTMLElement/animationiteration_event
 translation_of: Web/API/HTMLElement/animationiteration_event
 original_slug: Web/Events/animationiteration
 ---
-<p>L'événement<strong> </strong><code><strong> animationiteration</strong> est déclenché lorsqu'une itération d'une animation se termine. Cet événement ne se produit pas pour les animations avec <em>animation-iteration-count</em> valant 1.</code></p>
-
-<h2 id="informations_générales">informations générales</h2>
-
-<dl>
- <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
- <dd style="margin: 0 0 0 120px;"><a href="http://www.w3.org/TR/css3-animations/#animation-events">CSS Animations</a></dd>
- <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
- <dd style="margin: 0 0 0 120px;">AnimationEvent</dd>
- <dt style="float: left; text-align: right; width: 120px;">Synchronisme</dt>
- <dd style="margin: 0 0 0 120px;">synchronous</dd>
- <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
- <dd style="margin: 0 0 0 120px;">Oui</dd>
- <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
- <dd style="margin: 0 0 0 120px;">Non</dd>
- <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
- <dd style="margin: 0 0 0 120px;">Document, Element</dd>
- <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
- <dd style="margin: 0 0 0 120px;">Aucune</dd>
-</dl>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Propriété</th>
-   <th scope="col">Type</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>target</code> {{ReadOnlyInline}}</td>
-   <td>{{domxref("EventTarget")}}</td>
-   <td>La cible de l'événement (la plus haute cible dans l'arbre du DOM).</td>
-  </tr>
-  <tr>
-   <td><code>type</code> {{ReadOnlyInline}}</td>
-   <td>{{domxref("DOMString")}}</td>
-   <td>Le type de l'événement.</td>
-  </tr>
-  <tr>
-   <td><code>bubbles</code> {{ReadOnlyInline}}</td>
-   <td><code>boolean</code></td>
-   <td>Est-ce que l'événement se propage?</td>
-  </tr>
-  <tr>
-   <td><code>cancelable</code> {{ReadOnlyInline}}</td>
-   <td><code>boolean</code></td>
-   <td>Est-il possible d'annuler l'événement?</td>
-  </tr>
-  <tr>
-   <td><code>animationName</code> {{ReadOnlyInline}}</td>
-   <td>{{domxref("DOMString")}}</td>
-   <td>Le nom de la propriété CSS associéee à la transition.</td>
-  </tr>
-  <tr>
-   <td><code>elapsedTime</code> {{ReadOnlyInline}}</td>
-   <td>Float</td>
-   <td>Le temps durant lequel l'animation a durée, en secondes, quand l'événement est déclenché, excepté le temps lorsque l'animation était en pause. Pour un événement <strong>animationstart</strong>, <em>elapsedTime</em> vaut zéro à moins que <em>animation-delay </em>ne soit négatif, et dans ce cas, l'événement sera déclenché avec un <em>elapsedTime</em> de (-1 * delay).</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Evénements_liés">Evénements liés</h2>
-
-<ul>
- <li>{{Event("animationstart")}}</li>
- <li>{{Event("animationend")}}</li>
- <li>{{Event("animationiteration")}}</li>
-</ul>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/CSS/Using_CSS_animations">Utilisation des animations CSS</a></li>
-</ul>
+L'événement\*\* \*\*`animationiteration est déclenché lorsqu'une itération d'une animation se termine. Cet événement ne se produit pas pour les animations avec animation-iteration-count valant 1.`
+
+## informations générales
+
+- Spécification
+  - : [CSS Animations](http://www.w3.org/TR/css3-animations/#animation-events)
+- Interface
+  - : AnimationEvent
+- Synchronisme
+  - : synchronous
+- Propagation
+  - : Oui
+- Annulable
+  - : Non
+- Cible
+  - : Document, Element
+- Action par défaut
+  - : Aucune
+
+## Propriétés
+
+| Propriété                                | Type                                 | Description                                                                                                                                                                                                                                                                                                                                    |
+| ---------------------------------------- | ------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `target` {{ReadOnlyInline}}        | {{domxref("EventTarget")}} | La cible de l'événement (la plus haute cible dans l'arbre du DOM).                                                                                                                                                                                                                                                                             |
+| `type` {{ReadOnlyInline}}          | {{domxref("DOMString")}}     | Le type de l'événement.                                                                                                                                                                                                                                                                                                                        |
+| `bubbles` {{ReadOnlyInline}}       | `boolean`                            | Est-ce que l'événement se propage?                                                                                                                                                                                                                                                                                                             |
+| `cancelable` {{ReadOnlyInline}}    | `boolean`                            | Est-il possible d'annuler l'événement?                                                                                                                                                                                                                                                                                                         |
+| `animationName` {{ReadOnlyInline}} | {{domxref("DOMString")}}     | Le nom de la propriété CSS associéee à la transition.                                                                                                                                                                                                                                                                                          |
+| `elapsedTime` {{ReadOnlyInline}}   | Float                                | Le temps durant lequel l'animation a durée, en secondes, quand l'événement est déclenché, excepté le temps lorsque l'animation était en pause. Pour un événement **animationstart**, _elapsedTime_ vaut zéro à moins que _animation-delay_ ne soit négatif, et dans ce cas, l'événement sera déclenché avec un _elapsedTime_ de (-1 \* delay). |
+
+## Evénements liés
+
+- {{Event("animationstart")}}
+- {{Event("animationend")}}
+- {{Event("animationiteration")}}
+
+## Voir aussi
+
+- [Utilisation des animations CSS](/fr/docs/CSS/Using_CSS_animations)
diff --git a/files/fr/web/api/htmlelement/animationstart_event/index.md b/files/fr/web/api/htmlelement/animationstart_event/index.md
index f4dfb8d3cb..84d56e0b9a 100644
--- a/files/fr/web/api/htmlelement/animationstart_event/index.md
+++ b/files/fr/web/api/htmlelement/animationstart_event/index.md
@@ -4,79 +4,40 @@ slug: Web/API/HTMLElement/animationstart_event
 translation_of: Web/API/HTMLElement/animationstart_event
 original_slug: Web/Events/animationstart
 ---
-<p>L'événement <strong><code>animationstart </code></strong><code>est déclenché quand une animation CSS a commencé. Si <em>animation-delay</em> est défini alors le déclenchement se fera une fois le delai expiré. Un délai négatif causera un déclenchement de l'événement avec un </code><em>elapsedTime </em>équivalent à la valeur absolue du délai.</p>
-
-<h2 id="Informations_générales">Informations générales</h2>
-
-<dl>
- <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
- <dd style="margin: 0 0 0 120px;"><a href="http://www.w3.org/TR/css3-animations/#animation-events">CSS Animations</a></dd>
- <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
- <dd style="margin: 0 0 0 120px;">AnimationEvent</dd>
- <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
- <dd style="margin: 0 0 0 120px;">Oui</dd>
- <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
- <dd style="margin: 0 0 0 120px;">Non</dd>
- <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
- <dd style="margin: 0 0 0 120px;">Document, Element</dd>
- <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
- <dd style="margin: 0 0 0 120px;">Aucune</dd>
-</dl>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Propriété</th>
-   <th scope="col">Type</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>target</code> {{ReadOnlyInline}}</td>
-   <td>{{domxref("EventTarget")}}</td>
-   <td>La cible de l'événement (la plus haute cible dans l'arbre du DOM).</td>
-  </tr>
-  <tr>
-   <td><code>type</code> {{ReadOnlyInline}}</td>
-   <td>{{domxref("DOMString")}}</td>
-   <td>Le type de l'événement.</td>
-  </tr>
-  <tr>
-   <td><code>bubbles</code> {{ReadOnlyInline}}</td>
-   <td><code>boolean</code></td>
-   <td>Est-ce que l'événement se propage?</td>
-  </tr>
-  <tr>
-   <td><code>cancelable</code> {{ReadOnlyInline}}</td>
-   <td><code>boolean</code></td>
-   <td>Est-il possible d'annuler l'événement?</td>
-  </tr>
-  <tr>
-   <td><code>animationName</code> {{ReadOnlyInline}}</td>
-   <td>{{domxref("DOMString")}}</td>
-   <td>Le nom de la propriété CSS associéee à la transition.</td>
-  </tr>
-  <tr>
-   <td><code>elapsedTime</code> {{ReadOnlyInline}}</td>
-   <td>Float</td>
-   <td>Le temps durant lequel l'animation a durée, en secondes, quand l'événement est déclenché, excepté le temps lorsque l'animation était en pause. Pour un événement <strong>animationstart</strong>, <em>elapsedTime</em> vaut zéro à moins que <em>animation-delay </em>ne soit négatif, et dans ce cas, l'événement sera déclenché avec un <em>elapsedTime</em> de (-1 * delay).</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Evénements_liés">Evénements liés</h2>
-
-<ul>
- <li>{{Event("animationstart")}}</li>
- <li>{{Event("animationend")}}</li>
- <li>{{Event("animationiteration")}}</li>
-</ul>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/CSS/Using_CSS_animations">Utilisation des animations CSS</a></li>
-</ul>
+L'événement **`animationstart `**`est déclenché quand une animation CSS a commencé. Si animation-delay est défini alors le déclenchement se fera une fois le delai expiré. Un délai négatif causera un déclenchement de l'événement avec un `_elapsedTime_ équivalent à la valeur absolue du délai.
+
+## Informations générales
+
+- Spécification
+  - : [CSS Animations](http://www.w3.org/TR/css3-animations/#animation-events)
+- Interface
+  - : AnimationEvent
+- Propagation
+  - : Oui
+- Annulable
+  - : Non
+- Cible
+  - : Document, Element
+- Action par défaut
+  - : Aucune
+
+## Propriétés
+
+| Propriété                                | Type                                 | Description                                                                                                                                                                                                                                                                                                                                    |
+| ---------------------------------------- | ------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `target` {{ReadOnlyInline}}        | {{domxref("EventTarget")}} | La cible de l'événement (la plus haute cible dans l'arbre du DOM).                                                                                                                                                                                                                                                                             |
+| `type` {{ReadOnlyInline}}          | {{domxref("DOMString")}}     | Le type de l'événement.                                                                                                                                                                                                                                                                                                                        |
+| `bubbles` {{ReadOnlyInline}}       | `boolean`                            | Est-ce que l'événement se propage?                                                                                                                                                                                                                                                                                                             |
+| `cancelable` {{ReadOnlyInline}}    | `boolean`                            | Est-il possible d'annuler l'événement?                                                                                                                                                                                                                                                                                                         |
+| `animationName` {{ReadOnlyInline}} | {{domxref("DOMString")}}     | Le nom de la propriété CSS associéee à la transition.                                                                                                                                                                                                                                                                                          |
+| `elapsedTime` {{ReadOnlyInline}}   | Float                                | Le temps durant lequel l'animation a durée, en secondes, quand l'événement est déclenché, excepté le temps lorsque l'animation était en pause. Pour un événement **animationstart**, _elapsedTime_ vaut zéro à moins que _animation-delay_ ne soit négatif, et dans ce cas, l'événement sera déclenché avec un _elapsedTime_ de (-1 \* delay). |
+
+## Evénements liés
+
+- {{Event("animationstart")}}
+- {{Event("animationend")}}
+- {{Event("animationiteration")}}
+
+## Voir aussi
+
+- [Utilisation des animations CSS](/fr/docs/CSS/Using_CSS_animations)
diff --git a/files/fr/web/api/htmlelement/beforeinput_event/index.md b/files/fr/web/api/htmlelement/beforeinput_event/index.md
index 8d34743cfd..de24c8836e 100644
--- a/files/fr/web/api/htmlelement/beforeinput_event/index.md
+++ b/files/fr/web/api/htmlelement/beforeinput_event/index.md
@@ -3,90 +3,83 @@ title: 'HTMLElement: beforeinput event'
 slug: Web/API/HTMLElement/beforeinput_event
 translation_of: Web/API/HTMLElement/beforeinput_event
 ---
-<div>{{APIRef}} {{SeeCompatTable}}</div>
+{{APIRef}} {{SeeCompatTable}}
 
-<p>L’évènement DOM <strong><code>beforeinput</code></strong> est émis quand la valeur d’un élément {{HTMLElement("input")}}, {{HTMLElement("select")}}, ou {{HTMLElement("textarea")}} est sur le point d’être modifié. L’évènement s’applique également aux éléments ayant l’attribut {{domxref("HTMLElement.contentEditable", "contenteditable")}} actif, et à tout élément quand le {{domxref("Document.designMode", "designMode")}} est activé.</p>
+L’évènement DOM **`beforeinput`** est émis quand la valeur d’un élément {{HTMLElement("input")}}, {{HTMLElement("select")}}, ou {{HTMLElement("textarea")}} est sur le point d’être modifié. L’évènement s’applique également aux éléments ayant l’attribut {{domxref("HTMLElement.contentEditable", "contenteditable")}} actif, et à tout élément quand le {{domxref("Document.designMode", "designMode")}} est activé.
 
-<p>Dans le cas de <code>contenteditable</code> et <code>designMode</code>, la cible de l’évènement est <em>l’hôte d’édition.</em> Si ces propriétés s’appliquent à plusieurs éléments, l’hôte d’édition est le plus proche ancêtre dont le parent n’est pas éditable.</p>
+Dans le cas de `contenteditable` et `designMode`, la cible de l’évènement est _l’hôte d’édition._ Si ces propriétés s’appliquent à plusieurs éléments, l’hôte d’édition est le plus proche ancêtre dont le parent n’est pas éditable.
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th>Bouillonne</th>
-   <td>Oui</td>
-  </tr>
-  <tr>
-   <th>Annulable</th>
-   <td>Oui</td>
-  </tr>
-  <tr>
-   <th>Interface</th>
-   <td>{{DOMxRef("InputEvent")}}</td>
-  </tr>
-  <tr>
-   <th>Propriété gestionnaire d’évènement</th>
-   <td>Aucune</td>
-  </tr>
-  <tr>
-   <th>Sync / Async</th>
-   <td>Sync</td>
-  </tr>
-  <tr>
-   <th>Composé</th>
-   <td>Oui</td>
-  </tr>
-  <tr>
-   <th>Action par défaut</th>
-   <td>Mettre à jour l’élément DOM</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th>Bouillonne</th>
+      <td>Oui</td>
+    </tr>
+    <tr>
+      <th>Annulable</th>
+      <td>Oui</td>
+    </tr>
+    <tr>
+      <th>Interface</th>
+      <td>{{DOMxRef("InputEvent")}}</td>
+    </tr>
+    <tr>
+      <th>Propriété gestionnaire d’évènement</th>
+      <td>Aucune</td>
+    </tr>
+    <tr>
+      <th>Sync / Async</th>
+      <td>Sync</td>
+    </tr>
+    <tr>
+      <th>Composé</th>
+      <td>Oui</td>
+    </tr>
+    <tr>
+      <th>Action par défaut</th>
+      <td>Mettre à jour l’élément DOM</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Cet exemple affiche la valeur de l’élément {{HtmlElement("input")}} juste avant qu’elle soit modifiée.</p>
+Cet exemple affiche la valeur de l’élément {{HtmlElement("input")}} juste avant qu’elle soit modifiée.
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;input placeholder="Saisissez du texte" name="name"/&gt;
-&lt;p id="values"&gt;&lt;/p&gt;</pre>
+```html
+<input placeholder="Saisissez du texte" name="name"/>
+<p id="values"></p>
+```
 
-<h3 id="JavaScript">JavaScript</h3>
+### JavaScript
 
-<pre class="brush: js">const input = document.querySelector('input');
+```js
+const input = document.querySelector('input');
 const log = document.getElementById('values');
 
 input.addEventListener('beforeinput', updateValue);
 
 function updateValue(e) {
   log.textContent = e.target.value;
-}</pre>
+}
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Examples")}}</p>
+{{EmbedLiveSample("Examples")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('UI Events', "#event-type-beforeinput", "beforeinput event")}}</td>
-   <td>{{Spec2('UI Events')}}</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                    | Statut                       |
+| ------------------------------------------------------------------------------------------------ | ---------------------------- |
+| {{SpecName('UI Events', "#event-type-beforeinput", "beforeinput event")}} | {{Spec2('UI Events')}} |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.HTMLElement.beforeinput_event")}}</p>
+{{Compat("api.HTMLElement.beforeinput_event")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>Évènement associé : <code><a href="/en-US/docs/Web/API/HTMLElement/input_event">input</a></code></li>
-</ul>
+- Évènement associé : [`input`](/en-US/docs/Web/API/HTMLElement/input_event)
diff --git a/files/fr/web/api/htmlelement/change_event/index.md b/files/fr/web/api/htmlelement/change_event/index.md
index ba007c779b..9f239a8004 100644
--- a/files/fr/web/api/htmlelement/change_event/index.md
+++ b/files/fr/web/api/htmlelement/change_event/index.md
@@ -11,63 +11,66 @@ tags:
   - Élément HTML
 translation_of: Web/API/HTMLElement/change_event
 ---
-<p>{{APIRef}}</p>
+{{APIRef}}
 
-<p>L'événement <strong>change</strong> est déclenché pour les éléments {{HTMLElement("input")}} <em>(entrée)</em>, {{HTMLElement("select")}} <em>(sélection)</em> et {{HTMLElement("textarea")}} <em>(zone de texte)</em> lorsqu'un changement de leur valeur est réalisé par l'utilisateur. Contrairement à l'événement {{event("input")}}, <strong>change</strong> n'est pas nécessairement déclenché pour chaque changement de valeur.</p>
+L'événement **change** est déclenché pour les éléments {{HTMLElement("input")}} _(entrée)_, {{HTMLElement("select")}} _(sélection)_ et {{HTMLElement("textarea")}} _(zone de texte)_ lorsqu'un changement de leur valeur est réalisé par l'utilisateur. Contrairement à l'événement {{event("input")}}, **change** n'est pas nécessairement déclenché pour chaque changement de valeur.
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row">Propagation</th>
-   <td>Oui</td>
-  </tr>
-  <tr>
-   <th scope="row">Annulable</th>
-   <td>Non</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface</th>
-   <td>{{domxref("Event")}}</td>
-  </tr>
-  <tr>
-   <th scope="row">Gestionnaire d'événements</th>
-   <td>{{domxref("GlobalEventHandlers/onchange", "onchange")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Propagation</th>
+      <td>Oui</td>
+    </tr>
+    <tr>
+      <th scope="row">Annulable</th>
+      <td>Non</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface</th>
+      <td>{{domxref("Event")}}</td>
+    </tr>
+    <tr>
+      <th scope="row">Gestionnaire d'événements</th>
+      <td>
+        {{domxref("GlobalEventHandlers/onchange", "onchange")}}
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<p>En fonction du type d'élément de formulaire modifié et de la manière dont l'utilisateur interagit avec cet élément, l'événement <strong>change</strong> se déclenche à un moment différent :</p>
+En fonction du type d'élément de formulaire modifié et de la manière dont l'utilisateur interagit avec cet élément, l'événement **change** se déclenche à un moment différent :
 
-<ul>
- <li>Quand l'élément est activé (en cliquant ou en utilisant le clavier) pour <code>&lt;input type="radio"&gt;</code> et <code>&lt;input type="checkbox"&gt;</code><em>(case à cocher</em>).</li>
- <li>Quand l'utilisateur réalise le changement de manière explicite (par exemple, en sélectionnant une valeur venant d'un {{HTMLElement("select")}} d'un menu déroulant avec le clic d'une souris, en sélectionnant une date d'un "date picker" <em>(sélecteur de date)</em> pour <code>&lt;input type="date"&gt;</code>, en sélectionnant un fichier d'un "file picker" <em>(sélecteur de fichier)</em> pour <code>&lt;input type="file"&gt;</code>, etc.).</li>
- <li>Quand l'élément perd le focus après que sa valeur a été changée, mais pas validée (par exemple, après l'édition d'une valeur de {{HTMLElement("textarea")}} ou <code>&lt;input type="text"&gt;</code>).</li>
-</ul>
+- Quand l'élément est activé (en cliquant ou en utilisant le clavier) pour `<input type="radio">` et `<input type="checkbox">`_(case à cocher_).
+- Quand l'utilisateur réalise le changement de manière explicite (par exemple, en sélectionnant une valeur venant d'un {{HTMLElement("select")}} d'un menu déroulant avec le clic d'une souris, en sélectionnant une date d'un "date picker" _(sélecteur de date)_ pour `<input type="date">`, en sélectionnant un fichier d'un "file picker" _(sélecteur de fichier)_ pour `<input type="file">`, etc.).
+- Quand l'élément perd le focus après que sa valeur a été changée, mais pas validée (par exemple, après l'édition d'une valeur de {{HTMLElement("textarea")}} ou `<input type="text">`).
 
-<p>Les différents navigateurs ne sont pas toujours d'accord sur le fait que l'événement <strong>change</strong> doit être déclenché pour certains types d'interactions. Par exemple, la navigation avec le clavier dans les éléments {{HTMLElement("select")}} ne déclenche jamais l'événement dans Gecko jusqu'à ce que l'utilisateur appuie sur la touche Entrée ou déplace le focus en dehors du &lt;select&gt; (voir {{bug("126379")}}).</p>
+Les différents navigateurs ne sont pas toujours d'accord sur le fait que l'événement **change** doit être déclenché pour certains types d'interactions. Par exemple, la navigation avec le clavier dans les éléments {{HTMLElement("select")}} ne déclenche jamais l'événement dans Gecko jusqu'à ce que l'utilisateur appuie sur la touche Entrée ou déplace le focus en dehors du \<select> (voir {{bug("126379")}}).
 
-<p><a href="https://html.spec.whatwg.org/multipage/forms.html#concept-input-apply">La spécification HTML répertorie les types <code>&lt;input&gt;</code> qui doivent déclencher l'événement <code>change</code>.</a></p>
+[La spécification HTML répertorie les types `<input>` qui doivent déclencher l'événement `change`.](https://html.spec.whatwg.org/multipage/forms.html#concept-input-apply)
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Lélément_&lt;select>">L'élément &lt;select&gt;</h3>
+### L'élément \<select>
 
-<p>Le code suivant gère l'événement <strong>change</strong> sur {{HTMLElement("select")}} en appellant la fonction <code>changeEventHandler() </code>dans<code> l'attribut <em>onchange</em>. Il lit la valeur de la cible de l'événement et la montre dans une alerte.</code></p>
+Le code suivant gère l'événement **change** sur {{HTMLElement("select")}} en appellant la fonction `changeEventHandler() `dans` l'attribut onchange. Il lit la valeur de la cible de l'événement et la montre dans une alerte.`
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;label&gt;Choose an ice cream flavor:
-  &lt;select class="ice-cream" name="ice-cream"&gt;
-    &lt;option value=""&gt;Select One …&lt;/option&gt;
-    &lt;option value="chocolate"&gt;Chocolate&lt;/option&gt;
-    &lt;option value="sardine"&gt;Sardine&lt;/option&gt;
-    &lt;option value="vanilla"&gt;Vanilla&lt;/option&gt;
-  &lt;/select&gt;
-&lt;/label&gt;
+```html
+<label>Choose an ice cream flavor:
+  <select class="ice-cream" name="ice-cream">
+    <option value="">Select One …</option>
+    <option value="chocolate">Chocolate</option>
+    <option value="sardine">Sardine</option>
+    <option value="vanilla">Vanilla</option>
+  </select>
+</label>
 
-&lt;div class="result"&gt;&lt;/div&gt;</pre>
+<div class="result"></div>
+```
 
-<pre class="brush: css hidden">body {
+```css hidden
+body {
   display: grid;
   grid-template-areas: "select result";
 }
@@ -78,88 +81,67 @@ select {
 
 .result {
   grid-area: result;
-}</pre>
+}
+```
 
-<h4 id="Javascript">Javascript</h4>
+#### Javascript
 
-<pre class="brush: js">const selectElement = document.querySelector('.ice-cream');
+```js
+const selectElement = document.querySelector('.ice-cream');
 
-selectElement.addEventListener('change', (event) =&gt; {
+selectElement.addEventListener('change', (event) => {
   const result = document.querySelector('.result');
   result.textContent = `You like ${event.target.value}`;
-});</pre>
+});
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{ EmbedLiveSample('Lélément_&lt;select&gt;', '100%', '75px') }}</p>
+{{ EmbedLiveSample('Lélément_&lt;select&gt;', '100%', '75px') }}
 
-<h3 id="Lélément_dentrée_de_texte">L'élément d'entrée de texte</h3>
+### L'élément d'entrée de texte
 
-<p>Pour certains éléments, notamment <code>&lt;input type="text"&gt;</code>, l'événement de changement ne se déclenche pas tant que le contrôle ne perd pas le focus. Essayez de saisir quelque chose dans le champ ci-dessous, puis cliquez ailleurs pour déclencher l'événement.</p>
+Pour certains éléments, notamment `<input type="text">`, l'événement de changement ne se déclenche pas tant que le contrôle ne perd pas le focus. Essayez de saisir quelque chose dans le champ ci-dessous, puis cliquez ailleurs pour déclencher l'événement.
 
-<h4 id="HTML_2">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;input placeholder="Enter some text" name="name"/&gt;
-&lt;p id="log"&gt;&lt;/p&gt;</pre>
+```html
+<input placeholder="Enter some text" name="name"/>
+<p id="log"></p>
+```
 
-<h4 id="JavaScript">JavaScript</h4>
+#### JavaScript
 
-<pre class="brush: js">const input = document.querySelector('input');
+```js
+const input = document.querySelector('input');
 const log = document.getElementById('log');
 
 input.addEventListener('change', updateValue);
 
 function updateValue(e) {
   log.textContent = e.target.value;
-}</pre>
-
-<h4 id="Résultat_2">Résultat</h4>
-
-<p>{{ EmbedLiveSample('Lélément_dentrée_de_texte', '100%', '75px') }}</p>
-
-<ul>
-</ul>
-
-<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", "indices.html#event-change", "change")}}</td>
-   <td>{{Spec2("HTML WHATWG")}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML5 W3C", "webappapis.html#handler-onchange", "change")}}</td>
-   <td>{{Spec2("HTML5 W3C")}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName("DOM2 Events", "#Events-eventgroupings-htmlevents", "change")}}</td>
-   <td>{{Spec2("DOM2 Events")}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+}
+```
+
+#### Résultat
+
+{{ EmbedLiveSample('Lélément_dentrée_de_texte', '100%', '75px') }}
 
-<h2 id="Compatibilités_navigateurs">Compatibilités navigateurs</h2>
+## Spécifications
 
+| Spécification                                                                                        | Statut                           | Commentaire         |
+| ---------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- |
+| {{SpecName("HTML WHATWG", "indices.html#event-change", "change")}}             | {{Spec2("HTML WHATWG")}} |                     |
+| {{SpecName("HTML5 W3C", "webappapis.html#handler-onchange", "change")}}     | {{Spec2("HTML5 W3C")}}     |                     |
+| {{SpecName("DOM2 Events", "#Events-eventgroupings-htmlevents", "change")}} | {{Spec2("DOM2 Events")}} | Définition initiale |
 
+## Compatibilités navigateurs
 
-<p>{{Compat("api.GlobalEventHandlers.onchange")}}</p>
+{{Compat("api.GlobalEventHandlers.onchange")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<p>Cet événement est aussi déclenché dans plusieurs API non-standard:</p>
+Cet événement est aussi déclenché dans plusieurs API non-standard:
 
-<ul>
- <li>{{domxref("NetworkInformation.connection")}} déclenche l'événement <strong>change</strong> lorsque les informations de connexions changent.</li>
- <li>{{domxref("DeviceStorageChangeEvent")}} est déclenché à chaque fois qu'un fichier est créé, modifié, ou supprimé du système de stockage du périphérique.</li>
-</ul>
+- {{domxref("NetworkInformation.connection")}} déclenche l'événement **change** lorsque les informations de connexions changent.
+- {{domxref("DeviceStorageChangeEvent")}} est déclenché à chaque fois qu'un fichier est créé, modifié, ou supprimé du système de stockage du périphérique.
diff --git a/files/fr/web/api/htmlelement/click/index.md b/files/fr/web/api/htmlelement/click/index.md
index 4fcce54685..9bd9f6704c 100644
--- a/files/fr/web/api/htmlelement/click/index.md
+++ b/files/fr/web/api/htmlelement/click/index.md
@@ -6,67 +6,54 @@ tags:
   - Référence_du_DOM_Gecko
 translation_of: Web/API/HTMLElement/click
 ---
-<p>{{ ApiRef() }}</p>
-<h2 id="R.C3.A9sum.C3.A9">Résumé</h2>
-<p>La méthode <b>click</b> simule un clic sur un élément.</p>
-<h2 id="Syntaxe">Syntaxe</h2>
-<pre class="syntaxbox">element.click()</pre>
-<h2 id="Notes">Notes</h2>
-<p>Lorsque la méthode <code>click</code> est utilisée sur des éléments où elle est gérée (par exemple un {{HTMLElement("input")}}), elle déclenche également l'évènement <code>click</code> de l'élément qui se propagera aux éléments situés plus haut dans l'arbre du document (ou la chaîne évènementielle) et déclenchera aussi leurs évènements <code>click</code>. Cependant, la propagation d'un évènement <code>click</code> ne déclenchera pas la navigation à partir d'un élément {{HTMLElement("a")}} comme si un vrai clic de souris avait été reçu.</p>
-<p>Au moment où sont écrites ces lignes (Opera Next est à la version 12.11), la méthode <code>click</code> d'Opera <strong>sera ignorée silencieusement</strong>, si executée sur un élément {{HTMLElement("input")}} avec un type "file", et une propriété <a href="/fr/docs/CSS">CSS</a> {{cssxref('display')}} à "none".</p>
-<div>
- <p>{{gecko_callout_heading("5.0")}}</p>
- <p>Avant Gecko 5.0 {{geckoRelease("5.0")}}, Gecko supportait la méthode <code>click</code> qu'avec des éléments {{HTMLElement("input")}} de type
-  <i>
-   button</i>
-  ,
-  <i>
-   checkbox</i>
-  ,
-  <i>
-   radio</i>
-  ,
-  <i>
-   reset</i>
-  ou
-  <i>
-   submit</i>
-  . Gecko n'implémentait pas la méthode <code>click</code> sur d'autres éléments qui auraient pu répondre à des clics de souris comme les liens (éléments {{HTMLElement("a")}}), et ne déclenchait pas nécessairement l'évènement click d'autres éléments.</p>
- <p>Cependant, maintenant Gecko supporte la méthode sur tous les éléments comme requis par <a href="/fr/docs/HTML/HTML5">HTML5</a>.</p>
- <p>D'autres implémentations du DOM peuvent se comporter différemment.</p>
-</div>
-
-<h2 id="Specifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('DOM2 HTML', 'html.html#ID-2651361')}} <small>— <a href="http://www.yoyodesign.org/doc/w3c/dom2/html/html.html#ID-2651361">traduction en français</a> (non normative)</small></td>
-   <td>{{Spec2('DOM2 HTML')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-p>{{Compat("api.HTMLElement.click")}}</p>
-
-<h2 id="See_also">Voir aussi</h2>
-
-<ul>
-  <li>Gestionnaires d'événements liés
-    <ul>
-      <li>{{domxref("GlobalEventHandlers.onclick")}}</li>
-      <li>{{domxref("GlobalEventHandlers.ondblclick")}}</li>
-      <li>{{domxref("GlobalEventHandlers.onauxclick")}}</li>
-    </ul>
-  </li>
-</ul>
+{{ ApiRef() }}
+
+## Résumé
+
+La méthode **click** simule un clic sur un élément.
+
+## Syntaxe
+
+    element.click()
+
+## Notes
+
+Lorsque la méthode `click` est utilisée sur des éléments où elle est gérée (par exemple un {{HTMLElement("input")}}), elle déclenche également l'évènement `click` de l'élément qui se propagera aux éléments situés plus haut dans l'arbre du document (ou la chaîne évènementielle) et déclenchera aussi leurs évènements `click`. Cependant, la propagation d'un évènement `click` ne déclenchera pas la navigation à partir d'un élément {{HTMLElement("a")}} comme si un vrai clic de souris avait été reçu.
+
+Au moment où sont écrites ces lignes (Opera Next est à la version 12.11), la méthode `click` d'Opera **sera ignorée silencieusement**, si executée sur un élément {{HTMLElement("input")}} avec un type "file", et une propriété [CSS](/fr/docs/CSS) {{cssxref('display')}} à "none".
+
+{{gecko_callout_heading("5.0")}}
+
+Avant Gecko 5.0 {{geckoRelease("5.0")}}, Gecko supportait la méthode `click` qu'avec des éléments {{HTMLElement("input")}} de type
+_button_
+,
+_checkbox_
+,
+_radio_
+,
+_reset_
+ou
+_submit_
+. Gecko n'implémentait pas la méthode `click` sur d'autres éléments qui auraient pu répondre à des clics de souris comme les liens (éléments {{HTMLElement("a")}}), et ne déclenchait pas nécessairement l'évènement click d'autres éléments.
+
+Cependant, maintenant Gecko supporte la méthode sur tous les éléments comme requis par [HTML5](/fr/docs/HTML/HTML5).
+
+D'autres implémentations du DOM peuvent se comporter différemment.
+
+## Spécifications
+
+| Spécification                                                                                                                                                                 | Statut                       | Commentaires |
+| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------ |
+| {{SpecName('DOM2 HTML', 'html.html#ID-2651361')}} — [traduction en français](http://www.yoyodesign.org/doc/w3c/dom2/html/html.html#ID-2651361) (non normative) | {{Spec2('DOM2 HTML')}} |              |
+
+## Compatibilité des navigateurs
+
+p>{{Compat("api.HTMLElement.click")}}
+
+## Voir aussi
+
+- Gestionnaires d'événements liés
+
+  - {{domxref("GlobalEventHandlers.onclick")}}
+  - {{domxref("GlobalEventHandlers.ondblclick")}}
+  - {{domxref("GlobalEventHandlers.onauxclick")}}
diff --git a/files/fr/web/api/htmlelement/contenteditable/index.md b/files/fr/web/api/htmlelement/contenteditable/index.md
index ceb68bb2f8..d7115157a2 100644
--- a/files/fr/web/api/htmlelement/contenteditable/index.md
+++ b/files/fr/web/api/htmlelement/contenteditable/index.md
@@ -9,55 +9,35 @@ tags:
   - contenteditable
 translation_of: Web/API/HTMLElement/contentEditable
 ---
-<div>
-<div>{{APIRef("HTML DOM")}}</div>
-</div>
-
-<p><code>La propriété </code><strong><code>HTMLElement.contentEditable</code></strong> est utilisée pour indiquer si un élément HTML est ou non éditable. Cet attribut peut avoir 3 valeurs :</p>
-
-<ul>
- <li><code>"true"</code> <em>(vrai)</em> indique que l'élément est éditable.</li>
- <li><code>"false"</code> <em>(faux)</em> indique que l'élément ne sera pas éditable.</li>
- <li><code>"inherit"</code>  <em>(hérité)</em> indique que l'élément héritera de l'état editable de son parent.</li>
-</ul>
-
-<p>Vous pouvez utiliser la propriété {{domxref("HTMLElement.isContentEditable")}} pour tester la valeur de la propriété {{domxref("Boolean")}}.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><em>editable</em> = element.contentEditable
-element.contentEditable = "true"
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'interaction.html#contenteditable', 'contenteditable')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Definition initiale</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.HTMLElement.contentEditable")}}</p>
-
-<p>Dans Internet Explorer, le <code>contentable</code> ne peut pas être appliqué aux {{htmlelement("table")}}, {{htmlelement("col")}}, {{htmlelement("colgroup")}}, {{htmlelement("tbody")}}, {{htmlelement("td")}}, {{htmlelement("tfoot")}}, {{htmlelement("th")}}, {{htmlelement("thead")}} et {{htmlelement("tr")}} directement. Un élément {{htmlelement("span")}} ou {{htmlelement("div")}} modifiable au niveau du contenu peut être placé à l'intérieur de chaque cellule du tableau.</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>  <a href="/fr/docs/Web/HTML/Contenu_editable">Contenu editable</a></li>
- <li>{{domxref("HTMLElement.isContentEditable")}}</li>
- <li>L'attribut global <a href="/fr/docs/Web/HTML/Attributs_universels/contenteditable">contenteditable</a> .</li>
-</ul>
+{{APIRef("HTML DOM")}}
+
+`La propriété `**`HTMLElement.contentEditable`** est utilisée pour indiquer si un élément HTML est ou non éditable. Cet attribut peut avoir 3 valeurs :
+
+- `"true"` _(vrai)_ indique que l'élément est éditable.
+- `"false"` _(faux)_ indique que l'élément ne sera pas éditable.
+- `"inherit"`  _(hérité)_ indique que l'élément héritera de l'état editable de son parent.
+
+Vous pouvez utiliser la propriété {{domxref("HTMLElement.isContentEditable")}} pour tester la valeur de la propriété {{domxref("Boolean")}}.
+
+## Syntaxe
+
+    editable = element.contentEditable
+    element.contentEditable = "true"
+
+## Spécifications
+
+| Specification                                                                                                | Statut                           | Commentaire         |
+| ------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------- |
+| {{SpecName('HTML WHATWG', 'interaction.html#contenteditable', 'contenteditable')}} | {{Spec2('HTML WHATWG')}} | Definition initiale |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.HTMLElement.contentEditable")}}
+
+Dans Internet Explorer, le `contentable` ne peut pas être appliqué aux {{htmlelement("table")}}, {{htmlelement("col")}}, {{htmlelement("colgroup")}}, {{htmlelement("tbody")}}, {{htmlelement("td")}}, {{htmlelement("tfoot")}}, {{htmlelement("th")}}, {{htmlelement("thead")}} et {{htmlelement("tr")}} directement. Un élément {{htmlelement("span")}} ou {{htmlelement("div")}} modifiable au niveau du contenu peut être placé à l'intérieur de chaque cellule du tableau.
+
+## Voir aussi
+
+- [Contenu editable](/fr/docs/Web/HTML/Contenu_editable)
+- {{domxref("HTMLElement.isContentEditable")}}
+- L'attribut global [contenteditable](/fr/docs/Web/HTML/Attributs_universels/contenteditable) .
diff --git a/files/fr/web/api/htmlelement/dir/index.md b/files/fr/web/api/htmlelement/dir/index.md
index 96848e9935..5cfee0d797 100644
--- a/files/fr/web/api/htmlelement/dir/index.md
+++ b/files/fr/web/api/htmlelement/dir/index.md
@@ -6,43 +6,45 @@ tags:
   - Référence_du_DOM_Gecko
 translation_of: Web/API/HTMLElement/dir
 ---
-<p>{{ ApiRef() }}</p>
-<h2 id="R.C3.A9sum.C3.A9">Résumé</h2>
-<p>L'attribut <code><strong>dir</strong></code> obtient ou définit la direction d'écriture du texte pour le contenu de l'élément courant.</p>
-<h2 id="Syntaxe_et_valeurs">Syntaxe et valeurs</h2>
-<pre class="brush: js">var <var>DirectionActuelle</var> = referenceElement.dir;
-referenceElement.dir = <var>NouvelleDirection</var>;
-</pre>
-<p><var>DirectionActuelle</var> est une variable chaîne de caractères représentant la direction d'écriture du texte pour l'élément courant. <var>NouvelleDirection</var> est une variable chaîne de caractères représentant la nouvelle direction d'écriture du texte souhaitée pour l'élément.</p>
-<p>Les valeurs possibles pour <code><strong>dir</strong></code> sont <strong><code>ltr</code></strong>, pour de gauche à droite (<em>left-to-right</em>), et <strong><code>rtl</code></strong>, pour de droite à gauche (<em>right-to-left</em>).</p>
-<h2 id="Exemple">Exemple</h2>
-<pre class="brush: js">var para = document.getElementById("para1");
+{{ ApiRef() }}
+
+## Résumé
+
+L'attribut **`dir`** obtient ou définit la direction d'écriture du texte pour le contenu de l'élément courant.
+
+## Syntaxe et valeurs
+
+```js
+var DirectionActuelle = referenceElement.dir;
+referenceElement.dir = NouvelleDirection;
+```
+
+_DirectionActuelle_ est une variable chaîne de caractères représentant la direction d'écriture du texte pour l'élément courant. _NouvelleDirection_ est une variable chaîne de caractères représentant la nouvelle direction d'écriture du texte souhaitée pour l'élément.
+
+Les valeurs possibles pour **`dir`** sont **`ltr`**, pour de gauche à droite (_left-to-right_), et **`rtl`**, pour de droite à gauche (_right-to-left_).
+
+## Exemple
+
+```js
+var para = document.getElementById("para1");
 para.dir = "rtl";
 // change la direction du texte sur un paragraphe identifié par "para1"
-</pre>
-<h2 id="Notes">Notes</h2>
-<p>La direction d'écriture du texte sur un élément est celle dans laquelle le texte est disposé (pour permettre le support de systèmes multilingues). Les langues arabes et l'hébreu sont des exemples typiques de langues qui utiliseront la direction « rtl » (de droite à gauche).</p>
-<p>Une image peut avoir sont attribut <code>dir</code> positionné à « rtl », auquel cas les attributs <code>title</code> et <code>alt</code> seront formatés et définis comme allant de droite à gauche.</p>
-<p>Lorsqu'un tableau a sa direction définie comme « rtl », l'ordre des colonnes va de droite à gauche.</p>
-<div>
- <p>{{ gecko_callout_heading("7.0") }}</p>
- <p>Avant Gecko 7.0 {{ geckoRelease("7.0") }}, il était possible que la valeur renvoyée ne soit pas toujours en minuscule. A partir de Gecko 7.0, la valeur renvoyée est toujours en minuscule, comme défini dans la spécification.</p>
-</div>
-<h2 id="Sp.C3.A9cification">Spécification</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('DOM2 HTML', 'html.html#ID-52460740', 'dir')}} <small>— <a href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-52460740">traduction</a> (non normative)</small></td>
-   <td>{{Spec2('DOM2 HTML')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-<p> </p>
+```
+
+## Notes
+
+La direction d'écriture du texte sur un élément est celle dans laquelle le texte est disposé (pour permettre le support de systèmes multilingues). Les langues arabes et l'hébreu sont des exemples typiques de langues qui utiliseront la direction « rtl » (de droite à gauche).
+
+Une image peut avoir sont attribut `dir` positionné à « rtl », auquel cas les attributs `title` et `alt` seront formatés et définis comme allant de droite à gauche.
+
+Lorsqu'un tableau a sa direction définie comme « rtl », l'ordre des colonnes va de droite à gauche.
+
+{{ gecko_callout_heading("7.0") }}
+
+Avant Gecko 7.0 {{ geckoRelease("7.0") }}, il était possible que la valeur renvoyée ne soit pas toujours en minuscule. A partir de Gecko 7.0, la valeur renvoyée est toujours en minuscule, comme défini dans la spécification.
+
+## Spécification
+
+| Spécification                                                                                                                                                                  | Statut                       | Commentaire |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------- |
+| {{SpecName('DOM2 HTML', 'html.html#ID-52460740', 'dir')}} — [traduction](http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-52460740) (non normative) | {{Spec2('DOM2 HTML')}} |             |
diff --git a/files/fr/web/api/htmlelement/hidden/index.md b/files/fr/web/api/htmlelement/hidden/index.md
index f54affe844..8cbd7090df 100644
--- a/files/fr/web/api/htmlelement/hidden/index.md
+++ b/files/fr/web/api/htmlelement/hidden/index.md
@@ -3,86 +3,87 @@ title: HTMLElement.hidden
 slug: Web/API/HTMLElement/hidden
 translation_of: Web/API/HTMLElement/hidden
 ---
-<div>{{ APIRef("HTML DOM") }}</div>
+{{ APIRef("HTML DOM") }}
 
-<p>La propriété <strong><code>hidden</code></strong> de l'{{domxref("HTMLElement")}} est un {{jsxref("Boolean")}} qui vaut <code>true</code> si l'élément est caché, sinon sa valeur est <code>false</code>. Cela est très différent de l'utilisation de la propriété CSS {{cssxref("display")}} pour contrôler la visibilité d'un élément.</p>
+La propriété **`hidden`** de l'{{domxref("HTMLElement")}} est un {{jsxref("Boolean")}} qui vaut `true` si l'élément est caché, sinon sa valeur est `false`. Cela est très différent de l'utilisation de la propriété CSS {{cssxref("display")}} pour contrôler la visibilité d'un élément.
 
-<p>La propriété <code>hidden</code> s'applique à tous les modes de présentation et ne doit pas être utilisée pour cacher du contenu qui est destiné à être directement accessible par l'utilisateur.</p>
+La propriété `hidden` s'applique à tous les modes de présentation et ne doit pas être utilisée pour cacher du contenu qui est destiné à être directement accessible par l'utilisateur.
 
-<p>Des cas d'utilisation appropriés de <code>hidden</code> comprennent :</p>
+Des cas d'utilisation appropriés de `hidden` comprennent :
 
-<ul>
- <li>du contenu qui n'est pas encore pertinent mais qui peut être nécessaire ultérieurement ;</li>
- <li>du contenu qui était nécessaire antérieurement mais qui ne l'est plus ;</li>
- <li>du contenu qui est réutilisé par d'autres parties de la page à la manière d'un modèle ;</li>
- <li>la création d'un canevas hors écran comme tampon de dessin.</li>
-</ul>
+- du contenu qui n'est pas encore pertinent mais qui peut être nécessaire ultérieurement ;
+- du contenu qui était nécessaire antérieurement mais qui ne l'est plus ;
+- du contenu qui est réutilisé par d'autres parties de la page à la manière d'un modèle ;
+- la création d'un canevas hors écran comme tampon de dessin.
 
-<p>Des cas inappropriés d'utilisation comprennent :</p>
+Des cas inappropriés d'utilisation comprennent :
 
-<ul>
- <li>le fait de cacher des panneaux dans une boîte de dialogue à onglets ;</li>
- <li>le fait de cacher du contenu dans une présentation tout en ayant l'intention qu'il soit visible dans d'autres.</li>
-</ul>
+- le fait de cacher des panneaux dans une boîte de dialogue à onglets ;
+- le fait de cacher du contenu dans une présentation tout en ayant l'intention qu'il soit visible dans d'autres.
 
-<div class="note">
-<p><strong>Note :</strong> Des éléments qui ne sont pas <code>hidden</code> ne doivent pas faire référence à des éléments qui le sont.</p>
-</div>
+> **Note :** Des éléments qui ne sont pas `hidden` ne doivent pas faire référence à des éléments qui le sont.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>estCaché</em> = <em>HTMLElement</em>.hidden;
+    estCaché = HTMLElement.hidden;
 
-<em>HTMLElement</em>.hidden = true | false;</pre>
+    HTMLElement.hidden = true | false;
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>Un Boolean qui est <code>true</code> si l'élément est caché à la vue ; sinon, la valeur est <code>false</code>.</p>
+Un Boolean qui est `true` si l'élément est caché à la vue ; sinon, la valeur est `false`.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<p>Voici un exemple où un bloc caché est utilisé pour contenir un message de remerciement qui est affiché après qu'un utilisateur a accepté une demande inhabituelle.</p>
+Voici un exemple où un bloc caché est utilisé pour contenir un message de remerciement qui est affiché après qu'un utilisateur a accepté une demande inhabituelle.
 
-<h3 id="JavaScript">JavaScript</h3>
+### JavaScript
 
-<pre class="brush: js">document.getElementById("boutonOk")
+```js
+document.getElementById("boutonOk")
         .addEventListener("click", function() {
   document.getElementById("bienvenue").hidden = true;
   document.getElementById("impressionnant").hidden = false;
-}, false);</pre>
+}, false);
+```
 
-<p>Ce code installe une gestionnaire pour le bouton "OK" du panneau de bienvenue, gestionnaire qui cache le panneau de bienvenue et rend le panneau de suite — ayant le curieux nom d'"impressionnant" — visible à sa place.</p>
+Ce code installe une gestionnaire pour le bouton "OK" du panneau de bienvenue, gestionnaire qui cache le panneau de bienvenue et rend le panneau de suite — ayant le curieux nom d'"impressionnant" — visible à sa place.
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<p>Le code HTML pour les deux boîtes est montré ci-dessous.</p>
+Le code HTML pour les deux boîtes est montré ci-dessous.
 
-<h4 id="Le_panneau_bienvenue">Le panneau bienvenue</h4>
+#### Le panneau bienvenue
 
-<pre class="brush: html">&lt;div id="bienvenue" class="panneau"&gt;
-  &lt;h1&gt;Bienvenue à Machin.com !&lt;/h1&gt;
-  &lt;p&gt;En cliquant sur "OK", vous acceptez d'être impressionnant chaque jour !&lt;/p&gt;
-  &lt;button class="bouton" id="boutonOk"&gt;OK&lt;/button&gt;
-&lt;/div&gt;</pre>
+```html
+<div id="bienvenue" class="panneau">
+  <h1>Bienvenue à Machin.com !</h1>
+  <p>En cliquant sur "OK", vous acceptez d'être impressionnant chaque jour !</p>
+  <button class="bouton" id="boutonOk">OK</button>
+</div>
+```
 
-<p>Ce code HTML crée un panneau (dans un bloc {{HTMLElement("div")}}) qui accueille les utilisateurs sur un site et leur dit ce qu'ils acceptent en cliquant sur le bouton OK.</p>
+Ce code HTML crée un panneau (dans un bloc {{HTMLElement("div")}}) qui accueille les utilisateurs sur un site et leur dit ce qu'ils acceptent en cliquant sur le bouton OK.
 
-<h4 id="Le_panneau_de_suite">Le panneau de suite</h4>
+#### Le panneau de suite
 
-<p>Une fois que l'utilisateur a cliqué sur le bouton "OK" dans le panneau d'accueil, le code JavaScript échange les deux panneaux en changeant leurs valeurs respectives pour <code>hidden</code>. Le panneau de suite ressemble à ce qui suit en HTML:</p>
+Une fois que l'utilisateur a cliqué sur le bouton "OK" dans le panneau d'accueil, le code JavaScript échange les deux panneaux en changeant leurs valeurs respectives pour `hidden`. Le panneau de suite ressemble à ce qui suit en HTML:
 
-<pre class="brush: html">&lt;div id="impressionnant" class="panneau" hidden&gt;
-  &lt;h1&gt;Merci !&lt;/h1&gt;
-  &lt;p&gt;Merci &lt;strong&gt;vraiment&lt;/strong&gt; beaucoup d'avoir accepté d'être
+```html
+<div id="impressionnant" class="panneau" hidden>
+  <h1>Merci !</h1>
+  <p>Merci <strong>vraiment</strong> beaucoup d'avoir accepté d'être
   impressionnant aujourd'hui ! Maintenant, sortez et faites des choses impressionnantes
-  d'une façon impressionnante pour rendre le monde plus impressionnant !&lt;/p&gt;
-&lt;/div&gt;</pre>
+  d'une façon impressionnante pour rendre le monde plus impressionnant !</p>
+</div>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<p>Le contenu est mis en forme en utilisant le CSS ci-dessous.</p>
+Le contenu est mis en forme en utilisant le CSS ci-dessous.
 
-<pre class="brush: css">.panneau {
+```css
+.panneau {
   font: 16px "Open Sans", Helvetica, Arial, sans-serif;
   border: 1px solid #22d;
   padding: 12px;
@@ -98,46 +99,26 @@ translation_of: Web/API/HTMLElement/hidden
 h1 {
   margin-top: 0;
   font-size: 175%;
-}</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{ EmbedLiveSample('Example', 560, 200) }}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "interaction.html#dom-hidden", "HTMLElement.hidden")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5.1', "editing.html#the-hidden-attribute", "HTMLElement.hidden")}}</td>
-   <td>{{Spec2('HTML5.1')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', "editing.html#the-hidden-attribute", "HTMLElement.hidden")}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.HTMLElement.hidden")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("Element.hidden")}}</li>
- <li>{{cssxref("display")}}</li>
-</ul>
+}
+```
+
+### Résultat
+
+{{ EmbedLiveSample('Example', 560, 200) }}
+
+## Spécifications
+
+| Spécification                                                                                                    | Statut                           | Commentaire |
+| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- |
+| {{SpecName('HTML WHATWG', "interaction.html#dom-hidden", "HTMLElement.hidden")}}     | {{Spec2('HTML WHATWG')}} |             |
+| {{SpecName('HTML5.1', "editing.html#the-hidden-attribute", "HTMLElement.hidden")}}     | {{Spec2('HTML5.1')}}     |             |
+| {{SpecName('HTML5 W3C', "editing.html#the-hidden-attribute", "HTMLElement.hidden")}} | {{Spec2('HTML5 W3C')}}     |             |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.HTMLElement.hidden")}}
+
+## Voir aussi
+
+- {{domxref("Element.hidden")}}
+- {{cssxref("display")}}
diff --git a/files/fr/web/api/htmlelement/index.md b/files/fr/web/api/htmlelement/index.md
index 5b5276f04e..77f521cae9 100644
--- a/files/fr/web/api/htmlelement/index.md
+++ b/files/fr/web/api/htmlelement/index.md
@@ -6,113 +6,43 @@ tags:
   - Référence_du_DOM_Gecko
 translation_of: Web/API/HTMLElement
 ---
-<div>
- {{ApiRef}}</div>
-<h2 id="Interface_des_éléments_HTML">Interface des éléments HTML</h2>
-<p><code>HTMLElement</code> est une interface abstraite pour le <a href="/fr/docs/DOM">DOM</a>, héritée par tous les éléments HTML.</p>
-<h2 id="Propriétés">Propriétés</h2>
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Nom</th>
-   <th scope="col">Type</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{domxref("element.accessKey", "accessKey")}} {{HTMLVersionInline(5)}}</td>
-   <td>{{domxref("DOMString")}}</td>
-   <td>La touche de navigation clavier assignée à l'élément.</td>
-  </tr>
-  <tr>
-   <td>{{domxref("element.accessKeyLabel", "accessKeyLabel")}} {{HTMLVersionInline(5)}}</td>
-   <td>{{domxref("DOMString")}}</td>
-   <td>Une chaîne de caractères définissant la touche de navigation clavier assignée.</td>
-  </tr>
-  <tr>
-   <td>{{domxref("element.className", "className")}}</td>
-   <td>{{domxref("DOMString")}}</td>
-   <td>Le nom de la classe <a href="/fr/docs/CSS">CSS</a> définie pour l'élément.</td>
-  </tr>
-  <tr>
-   <td>{{domxref("element.dataset", "dataset")}} {{HTMLVersionInline(5)}}</td>
-   <td>{{domxref("DOMStringMap")}}</td>
-   <td>Un tableau associatif des attributs  <code>data-*</code> de l'élément.</td>
-  </tr>
-  <tr>
-   <td>{{domxref("element.dir", "dir")}}</td>
-   <td>{{domxref("DOMString")}}</td>
-   <td>L'attribut <code>dir</code> de l'élément.</td>
-  </tr>
-  <tr>
-   <td>{{domxref("element.id", "id")}}</td>
-   <td>{{domxref("DOMString")}}</td>
-   <td>L'ID de l'élément.</td>
-  </tr>
-  <tr>
-   <td>{{domxref("element.lang", "lang")}}</td>
-   <td>{{domxref("DOMString")}}</td>
-   <td>L'attribut  <code>lang</code> de l'élément.</td>
-  </tr>
-  <tr>
-   <td>{{domxref("element.title", "title")}}</td>
-   <td>{{domxref("DOMString")}}</td>
-   <td>L'attribut <code>title</code> de l'élément.</td>
-  </tr>
- </tbody>
-</table>
-<h2 id="Méthodes">Méthodes</h2>
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Nom et paramètres</th>
-   <th scope="col">Renvoie</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{domxref("element.blur()", "blur()")}} {{HTMLVersionInline(5)}}</td>
-   <td><code>void</code></td>
-   <td>Retire le focus clavier de l'élément actuellement sélectionné.</td>
-  </tr>
-  <tr>
-   <td>{{domxref("element.click()", "click()")}} {{HTMLVersionInline(5)}}</td>
-   <td><code>void</code></td>
-   <td>Envoie un évènement <code>click</code> à l'élément.</td>
-  </tr>
-  <tr>
-   <td>{{domxref("element.focus()", "focus()")}} {{HTMLVersionInline(5)}}</td>
-   <td><code>void</code></td>
-   <td>Place le focus clavier sur l'élément.</td>
-  </tr>
- </tbody>
-</table>
-<h2 id="Spécification">Spécification</h2>
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'elements.html#htmlelement', 'HTMLElement')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+{{ApiRef}}
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Interface des éléments HTML
 
-<p>{{Compat("api.HTMLElement")}}</p>
+`HTMLElement` est une interface abstraite pour le [DOM](/fr/docs/DOM), héritée par tous les éléments HTML.
 
-<h2 id="See_also">Voir aussi</h2>
+## Propriétés
 
-<ul>
- <li>{{domxref("Element")}}</li>
-</ul>
+| Nom                                                                                                       | Type                                 | Description                                                                    |
+| --------------------------------------------------------------------------------------------------------- | ------------------------------------ | ------------------------------------------------------------------------------ |
+| {{domxref("element.accessKey", "accessKey")}} {{HTMLVersionInline(5)}}             | {{domxref("DOMString")}}     | La touche de navigation clavier assignée à l'élément.                          |
+| {{domxref("element.accessKeyLabel", "accessKeyLabel")}} {{HTMLVersionInline(5)}} | {{domxref("DOMString")}}     | Une chaîne de caractères définissant la touche de navigation clavier assignée. |
+| {{domxref("element.className", "className")}}                                              | {{domxref("DOMString")}}     | Le nom de la classe [CSS](/fr/docs/CSS) définie pour l'élément.                |
+| {{domxref("element.dataset", "dataset")}} {{HTMLVersionInline(5)}}                 | {{domxref("DOMStringMap")}} | Un tableau associatif des attributs  `data-*` de l'élément.                    |
+| {{domxref("element.dir", "dir")}}                                                              | {{domxref("DOMString")}}     | L'attribut `dir` de l'élément.                                                 |
+| {{domxref("element.id", "id")}}                                                                  | {{domxref("DOMString")}}     | L'ID de l'élément.                                                             |
+| {{domxref("element.lang", "lang")}}                                                          | {{domxref("DOMString")}}     | L'attribut  `lang` de l'élément.                                               |
+| {{domxref("element.title", "title")}}                                                          | {{domxref("DOMString")}}     | L'attribut `title` de l'élément.                                               |
+
+## Méthodes
+
+| Nom et paramètres                                                                         | Renvoie | Description                                                    |
+| ----------------------------------------------------------------------------------------- | ------- | -------------------------------------------------------------- |
+| {{domxref("element.blur()", "blur()")}} {{HTMLVersionInline(5)}}     | `void`  | Retire le focus clavier de l'élément actuellement sélectionné. |
+| {{domxref("element.click()", "click()")}} {{HTMLVersionInline(5)}} | `void`  | Envoie un évènement `click` à l'élément.                       |
+| {{domxref("element.focus()", "focus()")}} {{HTMLVersionInline(5)}} | `void`  | Place le focus clavier sur l'élément.                          |
+
+## Spécification
+
+| Spécification                                                                                    | Statut                           | Commentaires |
+| ------------------------------------------------------------------------------------------------ | -------------------------------- | ------------ |
+| {{SpecName('HTML WHATWG', 'elements.html#htmlelement', 'HTMLElement')}} | {{Spec2('HTML WHATWG')}} |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.HTMLElement")}}
+
+## Voir aussi
+
+- {{domxref("Element")}}
diff --git a/files/fr/web/api/htmlelement/innertext/index.md b/files/fr/web/api/htmlelement/innertext/index.md
index e49115801b..3f639cd672 100644
--- a/files/fr/web/api/htmlelement/innertext/index.md
+++ b/files/fr/web/api/htmlelement/innertext/index.md
@@ -4,40 +4,25 @@ slug: Web/API/HTMLElement/innerText
 translation_of: Web/API/HTMLElement/innerText
 original_slug: Web/API/Node/innerText
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<h2 id="Sommaire">Sommaire</h2>
+## Sommaire
 
-<p><code><strong>Node.innerText</strong></code> est une propriété représentant le contenu textuel « visuellement rendu » d’un nœud. Utilisé en lecture, il renvoie une approximation du texte que l’utilisateur ou utilisatrice obtiendrait s’il ou elle sélectionnnait le contenu d’un élément avec le curseur, et le copiait dans le presse-papier.</p>
+**`Node.innerText`** est une propriété représentant le contenu textuel « visuellement rendu » d’un nœud. Utilisé en lecture, il renvoie une approximation du texte que l’utilisateur ou utilisatrice obtiendrait s’il ou elle sélectionnnait le contenu d’un élément avec le curseur, et le copiait dans le presse-papier.
 
-<p>{{domxref("Node.textContent")}} est une alternative similaire, bien qu’il y ait d’importantes différences entre les deux.</p>
+{{domxref("Node.textContent")}} est une alternative similaire, bien qu’il y ait d’importantes différences entre les deux.
 
-<h2 id="Spécification">Spécification</h2>
+## Spécification
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'dom.html#the-innertext-idl-attribute', 'innerText')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Introduction basée sur le <a href="https://github.com/rocallahan/innerText-spec">brouillon de spécification de innerText</a>. Voir <a href="https://github.com/whatwg/html/issues/465">whatwg/html#465</a> et <a href="https://github.com/whatwg/compat/issues/5">whatwg/compat#5</a> pour l’histoire.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                | Statut                           | Commentaire                                                                                                                                                                                                                                                           |
+| ------------------------------------------------------------------------------------------------------------ | -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('HTML WHATWG', 'dom.html#the-innertext-idl-attribute', 'innerText')}} | {{Spec2('HTML WHATWG')}} | Introduction basée sur le [brouillon de spécification de innerText](https://github.com/rocallahan/innerText-spec). Voir [whatwg/html#465](https://github.com/whatwg/html/issues/465) et [whatwg/compat#5](https://github.com/whatwg/compat/issues/5) pour l’histoire. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
+{{Compat("api.Node.innerText")}}
 
+## Voir aussi
 
-<p>{{Compat("api.Node.innerText")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("HTMLElement.outerText")}}</li>
- <li>{{domxref("Element.innerHTML")}}</li>
-</ul>
+- {{domxref("HTMLElement.outerText")}}
+- {{domxref("Element.innerHTML")}}
diff --git a/files/fr/web/api/htmlelement/input_event/index.md b/files/fr/web/api/htmlelement/input_event/index.md
index 1e5ed92105..d70e1d9447 100644
--- a/files/fr/web/api/htmlelement/input_event/index.md
+++ b/files/fr/web/api/htmlelement/input_event/index.md
@@ -8,93 +8,50 @@ tags:
   - HTML5
 translation_of: Web/API/HTMLElement/input_event
 ---
-<p>L'évènement DOM <code>input</code> <em>(entrée)</em> est déclenché de façon synchrone quand la valeur d'un élément {{HTMLElement("input")}} <em>(entrée)</em>, {{HTMLElement("select")}} <em>(sélection)</em> ou {{ HTMLElement("textarea") }} <em>(zone de texte)</em> est modifiée. (Pour les éléments <code>input</code> avec <code>type=checkbox</code> <em>(case à cocher)</em> ou <code>type=radio</code> , l'évènement <code>input</code>  n'est pas lancé quand l'utilisateur clique sur le contrôle, parce que la valeur attribuée ne peut être changée).</p>
+L'évènement DOM `input` _(entrée)_ est déclenché de façon synchrone quand la valeur d'un élément {{HTMLElement("input")}} _(entrée)_, {{HTMLElement("select")}} _(sélection)_ ou {{ HTMLElement("textarea") }} _(zone de texte)_ est modifiée. (Pour les éléments `input` avec `type=checkbox` _(case à cocher)_ ou `type=radio` , l'évènement `input`  n'est pas lancé quand l'utilisateur clique sur le contrôle, parce que la valeur attribuée ne peut être changée).
 
-<p>De plus, l'évènement  <code>input</code> se déclenche sur les éditeurs <a href="/fr/docs/Web/API/HTMLElement/contentEditable"><code>contenteditable</code></a> quand son contenu est modifié. Dans ce cas, l'évènement cible est l'élément "editing host" <em>(hôte de l'édition)</em> . S'il y a deux éléments ou plus qui ont <code>contenteditable</code> à true <em>(vrai)</em>, "editing host" est l'élément ancêtre le plus proche dont le parent n'est pas modifiable . De même, il est déclenché sur l'élément racine des éditeurs <a href="/fr/docs/Web/API/Document/designMode"><code>designMode</code></a> .</p>
+De plus, l'évènement  `input` se déclenche sur les éditeurs [`contenteditable`](/fr/docs/Web/API/HTMLElement/contentEditable) quand son contenu est modifié. Dans ce cas, l'évènement cible est l'élément "editing host" _(hôte de l'édition)_ . S'il y a deux éléments ou plus qui ont `contenteditable` à true _(vrai)_, "editing host" est l'élément ancêtre le plus proche dont le parent n'est pas modifiable . De même, il est déclenché sur l'élément racine des éditeurs [`designMode`](/fr/docs/Web/API/Document/designMode) .
 
-<h2 id="Information_générale">Information générale</h2>
+## Information générale
 
-<dl>
- <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
- <dd style="margin: 0 0 0 120px;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#event-input-input">HTML5</a>, <a href="https://dvcs.w3.org/hg/dom3events/raw-file/tip/html/DOM3-Events.html#event-type-input">DOM Level 3 Events</a></dd>
- <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
- <dd style="margin: 0 0 0 120px;">{{domxref("Event")}}, {{domxref("InputEvent")}}</dd>
- <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
- <dd style="margin: 0 0 0 120px;">Oui</dd>
- <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
- <dd style="margin: 0 0 0 120px;">Non</dd>
- <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
- <dd style="margin: 0 0 0 120px;">Élement</dd>
- <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
- <dd style="margin: 0 0 0 120px;">La valeur ou le contenu est modifié</dd>
-</dl>
+- Spécification
+  - : [HTML5](http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#event-input-input), [DOM Level 3 Events](https://dvcs.w3.org/hg/dom3events/raw-file/tip/html/DOM3-Events.html#event-type-input)
+- Interface
+  - : {{domxref("Event")}}, {{domxref("InputEvent")}}
+- Propagation
+  - : Oui
+- Annulable
+  - : Non
+- Cible
+  - : Élement
+- Action par défaut
+  - : La valeur ou le contenu est modifié
 
-<p> </p>
 
-<h2 id="Propriétés">Propriétés</h2>
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Property</th>
-   <th scope="col">Type</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>target</code> {{readonlyInline}}</td>
-   <td>{{domxref("EventTarget")}}</td>
-   <td>The event target (the topmost target in the DOM tree).</td>
-  </tr>
-  <tr>
-   <td><code>type</code> {{readonlyInline}}</td>
-   <td>{{domxref("DOMString")}}</td>
-   <td>The type of event.</td>
-  </tr>
-  <tr>
-   <td><code>bubbles</code> {{readonlyInline}}</td>
-   <td>{{jsxref("Boolean")}}</td>
-   <td>Whether the event normally bubbles or not.</td>
-  </tr>
-  <tr>
-   <td><code>cancelable</code> {{readonlyInline}}</td>
-   <td>{{jsxref("Boolean")}}</td>
-   <td>Whether the event is cancellable or not.</td>
-  </tr>
- </tbody>
-</table>
+## Propriétés
 
-<h2 id="Specifications">Spécifications</h2>
+| Property                              | Type                                 | Description                                            |
+| ------------------------------------- | ------------------------------------ | ------------------------------------------------------ |
+| `target` {{readonlyInline}}     | {{domxref("EventTarget")}} | The event target (the topmost target in the DOM tree). |
+| `type` {{readonlyInline}}       | {{domxref("DOMString")}}     | The type of event.                                     |
+| `bubbles` {{readonlyInline}}    | {{jsxref("Boolean")}}         | Whether the event normally bubbles or not.             |
+| `cancelable` {{readonlyInline}} | {{jsxref("Boolean")}}         | Whether the event is cancellable or not.               |
 
-<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#event-input-input", "input event")}}</td>
-      <td>{{Spec2('HTML WHATWG')}}</td>
-    </tr>
-    <tr>
-      <td>{{SpecName('DOM3 Events', "#event-type-input", "input event")}}</td>
-      <td>{{Spec2('DOM3 Events')}}</td>
-    </tr>
-  </tbody>
-</table>
+## Spécifications
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+| Spécification                                                                                        | Statut                           |
+| ---------------------------------------------------------------------------------------------------- | -------------------------------- |
+| {{SpecName('HTML WHATWG', "forms.html#event-input-input", "input event")}} | {{Spec2('HTML WHATWG')}} |
+| {{SpecName('DOM3 Events', "#event-type-input", "input event")}}                 | {{Spec2('DOM3 Events')}} |
 
-<p>{{Compat("api.HTMLElement.input_event")}}</p>
+## Compatibilité des navigateurs
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+{{Compat("api.HTMLElement.input_event")}}
 
-<ul>
- <li>{{event("keydown")}}</li>
- <li>{{event("keyup")}}</li>
- <li>{{event("keypress")}}</li>
- <li>{{event("input")}}</li>
-</ul>
+## Voir aussi
+
+- {{event("keydown")}}
+- {{event("keyup")}}
+- {{event("keypress")}}
+- {{event("input")}}
diff --git a/files/fr/web/api/htmlelement/iscontenteditable/index.md b/files/fr/web/api/htmlelement/iscontenteditable/index.md
index dd7c704998..717a7f65e0 100644
--- a/files/fr/web/api/htmlelement/iscontenteditable/index.md
+++ b/files/fr/web/api/htmlelement/iscontenteditable/index.md
@@ -10,70 +10,50 @@ tags:
   - Élément HTML
 translation_of: Web/API/HTMLElement/isContentEditable
 ---
-<div>
-<div>{{ APIRef("HTML DOM") }}</div>
-</div>
+{{ APIRef("HTML DOM") }}
 
-<p>La propriété en lecture seule <strong><code>HTMLElement.isContentEditable</code></strong> renvoie un  {{jsxref("Boolean")}} qui est <code>true </code><em>(vrai)</em> si le contenu de l'élément est éditable ; sinon elle renvoie <code>false</code><em>(faux)</em>.</p>
+La propriété en lecture seule **`HTMLElement.isContentEditable`** renvoie un  {{jsxref("Boolean")}} qui est `true `_(vrai)_ si le contenu de l'élément est éditable ; sinon elle renvoie `false`_(faux)_.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>editable</em> = <em>element</em>.isContentEditable
-</pre>
+    editable = element.isContentEditable
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<h3 id="JavaScript">JavaScript</h3>
+### JavaScript
 
-<pre class="brush: js">document.getElementById("infoText1").innerHTML += document.getElementById("myText1").isContentEditable;
-document.getElementById("infoText2").innerHTML += document.getElementById("myText2").isContentEditable;</pre>
+```js
+document.getElementById("infoText1").innerHTML += document.getElementById("myText1").isContentEditable;
+document.getElementById("infoText2").innerHTML += document.getElementById("myText2").isContentEditable;
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p id="myText1"&gt;Uneditable Paragraph&lt;/p&gt;
-&lt;p id="myText2" contentEditable="true"&gt;Editable Paragraph&lt;/p&gt;
+```html
+<p id="myText1">Uneditable Paragraph</p>
+<p id="myText2" contentEditable="true">Editable Paragraph</p>
 
-&lt;p id="infoText1"&gt;Can edit the first paragraph? &lt;/p&gt;
-&lt;p id="infoText2"&gt;Can edit the second paragraph? &lt;/p&gt;</pre>
+<p id="infoText1">Can edit the first paragraph? </p>
+<p id="infoText2">Can edit the second paragraph? </p>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{ EmbedLiveSample('Example') }}</p>
+{{ EmbedLiveSample('Example') }}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "editing.html#dom-iscontenteditable", "HTMLElement.contenteditable")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Pas de changement de la dernière image, {{SpecName('HTML5.1')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5.1', "editing.html#dom-iscontenteditable", "HTMLElement.contenteditable")}}</td>
-   <td>{{Spec2('HTML5.1')}}</td>
-   <td>L'image de {{SpecName('HTML WHATWG')}}, n'est pas changée par {{SpecName('HTML5 W3C')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', "editing.html#dom-iscontenteditable", "HTMLElement.contenteditable")}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Image de  {{SpecName('HTML WHATWG')}},  definition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Specification                                                                                                                    | Status                           | Comment                                                                                                 |
+| -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------- |
+| {{SpecName('HTML WHATWG', "editing.html#dom-iscontenteditable", "HTMLElement.contenteditable")}} | {{Spec2('HTML WHATWG')}} | Pas de changement de la dernière image, {{SpecName('HTML5.1')}}                                |
+| {{SpecName('HTML5.1', "editing.html#dom-iscontenteditable", "HTMLElement.contenteditable")}}     | {{Spec2('HTML5.1')}}     | L'image de {{SpecName('HTML WHATWG')}}, n'est pas changée par {{SpecName('HTML5 W3C')}} |
+| {{SpecName('HTML5 W3C', "editing.html#dom-iscontenteditable", "HTMLElement.contenteditable")}}     | {{Spec2('HTML5 W3C')}}     | Image de  {{SpecName('HTML WHATWG')}},  definition initiale.                                   |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.HTMLElement.isContentEditable")}}</p>
+{{Compat("api.HTMLElement.isContentEditable")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("element.contentEditable")}}</li>
- <li>L'attribut global <a href="/en-US/docs/Web/HTML/Global_attributes/contenteditable">contenteditable</a>.</li>
-</ul>
+- {{domxref("element.contentEditable")}}
+- L'attribut global [contenteditable](/en-US/docs/Web/HTML/Global_attributes/contenteditable).
diff --git a/files/fr/web/api/htmlelement/lang/index.md b/files/fr/web/api/htmlelement/lang/index.md
index 15d2f5536f..3d17dce396 100644
--- a/files/fr/web/api/htmlelement/lang/index.md
+++ b/files/fr/web/api/htmlelement/lang/index.md
@@ -6,41 +6,41 @@ tags:
   - Référence_du_DOM_Gecko
 translation_of: Web/API/HTMLElement/lang
 ---
-<p>{{ ApiRef() }}</p>
-<h2 id="R.C3.A9sum.C3.A9">Résumé</h2>
-<p>Cette propriété permet d'obtenir ou de définir la langue de base des valeurs d'attribut et du contenu textuel d'un élément.</p>
-<h2 id="Syntaxe_et_valeurs">Syntaxe et valeurs</h2>
-<pre class="brush: js">var <var>langueUtilisee</var> = référenceElement.lang; // Récupérer la valeur de lang
-référenceElement.lang = <var>NouvelleLangue</var>; // Définir la valeur de lang
-</pre>
-<p><var>langueUtilisee</var> est une variable chaîne de caracteres recevant la langue dans laquelle le texte de l'élément courant est écrit. <var>NouvelleLangue</var> est une variable chaîne de caractères dont la valeur définit la langue dans laquelle le texte de l'élément courant est écrit.</p>
-<h2 id="Exemple">Exemple</h2>
-<pre class="brush: js">// ce bout de code compare la langue de base et
+{{ ApiRef() }}
+
+## Résumé
+
+Cette propriété permet d'obtenir ou de définir la langue de base des valeurs d'attribut et du contenu textuel d'un élément.
+
+## Syntaxe et valeurs
+
+```js
+var langueUtilisee = référenceElement.lang; // Récupérer la valeur de lang
+référenceElement.lang = NouvelleLangue; // Définir la valeur de lang
+```
+
+_langueUtilisee_ est une variable chaîne de caracteres recevant la langue dans laquelle le texte de l'élément courant est écrit. _NouvelleLangue_ est une variable chaîne de caractères dont la valeur définit la langue dans laquelle le texte de l'élément courant est écrit.
+
+## Exemple
+
+```js
+// ce bout de code compare la langue de base et
 // redirige vers une autre URL suivant la langue
 if (document.documentElement.lang === "en") {
     window.location.href = "un_document.html.en";
 } else if(document.documentElement.lang === "ru") {
     window.location.href = "un_document.html.ru";
 }
-</pre>
-<h2 id="Notes">Notes</h2>
-<p>Les codes de langues renvoyés par cette propriété sont définis dans la <a href="http://tools.ietf.org/html/rfc1766">RFC 1766</a>. Par exemple, « en » pour anglais, « ja » pour japonais, « es » pour espagnol, « fr » pour français, etc. La valeur par défaut de cet attribut est <code>unknown</code> (inconnue). Notez que cet attribut, bien que valide au niveau de chaque élément individuel, et le plus souvent spécifié pour le nœud racine du document.</p>
-<p>Ne marche qu'avec l'attribut <code>lang</code>, et non avec <code>xml:lang</code>.</p>
-<h2 id="Sp.C3.A9cification">Spécification</h2>
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('DOM2 HTML', 'html.html#ID-59132807', 'id')}}</td>
-   <td>{{Spec2('DOM2 HTML')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-<p> </p>
+```
+
+## Notes
+
+Les codes de langues renvoyés par cette propriété sont définis dans la [RFC 1766](http://tools.ietf.org/html/rfc1766). Par exemple, « en » pour anglais, « ja » pour japonais, « es » pour espagnol, « fr » pour français, etc. La valeur par défaut de cet attribut est `unknown` (inconnue). Notez que cet attribut, bien que valide au niveau de chaque élément individuel, et le plus souvent spécifié pour le nœud racine du document.
+
+Ne marche qu'avec l'attribut `lang`, et non avec `xml:lang`.
+
+## Spécification
+
+| Spécification                                                                | Statut                       | Commentaires |
+| ---------------------------------------------------------------------------- | ---------------------------- | ------------ |
+| {{SpecName('DOM2 HTML', 'html.html#ID-59132807', 'id')}} | {{Spec2('DOM2 HTML')}} |              |
diff --git a/files/fr/web/api/htmlelement/offsetheight/index.md b/files/fr/web/api/htmlelement/offsetheight/index.md
index 5ceee19bcc..9ea5546329 100644
--- a/files/fr/web/api/htmlelement/offsetheight/index.md
+++ b/files/fr/web/api/htmlelement/offsetheight/index.md
@@ -5,50 +5,45 @@ tags:
   - Référence_du_DOM_Gecko
 translation_of: Web/API/HTMLElement/offsetHeight
 ---
-<p>{{ ApiRef() }}</p>
+{{ ApiRef() }}
 
-<h3 id="R.C3.A9sum.C3.A9">Résumé</h3>
+### Résumé
 
-<p>Propriété <abbr>DHTML</abbr> permettant d'obtenir la hauteur d'un élément par rapport à la mise en page.</p>
+Propriété DHTML permettant d'obtenir la hauteur d'un élément par rapport à la mise en page.
 
-<h3 id="Syntaxe">Syntaxe</h3>
+### Syntaxe
 
-<pre class="eval">var <em>hauteurTotaleElem</em> = document.getElementById(<em>id</em>).offsetHeight;
-</pre>
+    var hauteurTotaleElem = document.getElementById(id).offsetHeight;
 
-<p><em>hauteurTotalElem</em> est une variable stockant un entier correspondant à la valeur en pixels de la hauteur totale de l'élément identifé par <code>id</code>. <code>offsetHeight</code> est une propriété en lecture seule.</p>
+_hauteurTotalElem_ est une variable stockant un entier correspondant à la valeur en pixels de la hauteur totale de l'élément identifé par `id`. `offsetHeight` est une propriété en lecture seule.
 
-<h3 id="Description">Description</h3>
+### Description
 
-<p>Typiquement, la propriété <strong>offsetHeight</strong> d'un élément est une mesure qui comprend les bordures de l'élément, ses marges internes verticales (padding), la barre de défilement horizontale si présente et affichée, et la hauteur CSS de l'élément.</p>
+Typiquement, la propriété **offsetHeight** d'un élément est une mesure qui comprend les bordures de l'élément, ses marges internes verticales (padding), la barre de défilement horizontale si présente et affichée, et la hauteur CSS de l'élément.
 
-<h3 id="Exemple">Exemple</h3>
+### Exemple
 
-<h2 id="Example">Example</h2>
+## Example
 
-<p><img src="dimensions-offset.png"></p>
+![](dimensions-offset.png)
 
-<p>L'exemple d'image ci-avant montre une barre de défilement et un décalage <code>offsetHeight</code> qui rentre dans la fenêtre. Toutefois, les éléments non-défilables peuvent avoir des valeurs <code>offsetHeight</code> élevées, voire plus élevéesque le contenu visible. Ces éléments sont généralement contenu au sein d'éléments défilables et, de fait, les éléments non-défilables peuvent être partiellement ou complètement invisible, selon la valeur de <code>scrollTop</code> pour le conteneur.</p>
+L'exemple d'image ci-avant montre une barre de défilement et un décalage `offsetHeight` qui rentre dans la fenêtre. Toutefois, les éléments non-défilables peuvent avoir des valeurs `offsetHeight` élevées, voire plus élevéesque le contenu visible. Ces éléments sont généralement contenu au sein d'éléments défilables et, de fait, les éléments non-défilables peuvent être partiellement ou complètement invisible, selon la valeur de `scrollTop` pour le conteneur.
 
-<h3 id="Sp.C3.A9cification">Spécification</h3>
+### Spécification
 
-<p><code>offsetHeight</code> fait partie du modèle objet DHTML de Microsoft Internet Explorer. Elle ne fait partie d'aucune spécification ou recommandation technique du W3C.</p>
+`offsetHeight` fait partie du modèle objet DHTML de Microsoft Internet Explorer. Elle ne fait partie d'aucune spécification ou recommandation technique du W3C.
 
-<h3 id="Notes">Notes</h3>
+### Notes
 
-<p><code>offsetHeight</code> est une propriété du modèle objet DHTML introduite par Microsoft Internet Explorer. On l'appelle parfois la hauteur physique ou graphique d'un élément, ou sa hauteur « border-box » (bordure et boîte).</p>
+`offsetHeight` est une propriété du modèle objet DHTML introduite par Microsoft Internet Explorer. On l'appelle parfois la hauteur physique ou graphique d'un élément, ou sa hauteur « border-box » (bordure et boîte).
 
-<h3 id="R.C3.A9f.C3.A9rences">Références</h3>
+### Références
 
-<ul>
- <li><a href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/offsetheight.asp?frame=true"><em>offsetHeight definition</em> sur MSDN</a></li>
- <li><a href="http://msdn.microsoft.com/workshop/author/om/measuring.asp"><em>Measuring Element Dimension and Location</em> sur MSDN</a></li>
-</ul>
+- [_offsetHeight definition_ sur MSDN](http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/offsetheight.asp?frame=true)
+- [_Measuring Element Dimension and Location_ sur MSDN](http://msdn.microsoft.com/workshop/author/om/measuring.asp)
 
-<h3 id="Voir_aussi">Voir aussi</h3>
+### Voir aussi
 
-<ul>
- <li><a href="/fr/DOM/element.clientHeight"><code>element.clientHeight</code></a></li>
- <li><a href="/fr/DOM/element.scrollHeight"><code>element.scrollHeight</code></a></li>
- <li><a href="/fr/DOM/element.offsetWidth"><code>element.offsetWidth</code></a></li>
-</ul>
\ No newline at end of file
+- [`element.clientHeight`](/fr/DOM/element.clientHeight)
+- [`element.scrollHeight`](/fr/DOM/element.scrollHeight)
+- [`element.offsetWidth`](/fr/DOM/element.offsetWidth)
diff --git a/files/fr/web/api/htmlelement/offsetleft/index.md b/files/fr/web/api/htmlelement/offsetleft/index.md
index f4bf76cb37..f6cdd9c10d 100644
--- a/files/fr/web/api/htmlelement/offsetleft/index.md
+++ b/files/fr/web/api/htmlelement/offsetleft/index.md
@@ -5,53 +5,68 @@ tags:
   - Référence_du_DOM_Gecko
 translation_of: Web/API/HTMLElement/offsetLeft
 ---
-<p>{{ ApiRef() }}</p>
-<h3 id="R.C3.A9sum.C3.A9">Résumé</h3>
-<p>Renvoie le nombre de pixels dont le
- <i>
-  coin supérieur gauche</i>
- de l'élément courant est décalé vers là gauche au sein du nœud <code><a href="fr/DOM/element.offsetParent">offsetParent</a></code>.</p>
-<h3 id="Syntaxe">Syntaxe</h3>
-<pre class="eval"><i>left</i> =<i>element</i>.offsetLeft;
-</pre>
-<p><code>left</code> est un entier représentant le décalage vers la gauche en pixels.</p>
-<h3 id="Note">Note</h3>
-<p><code>offsetLeft</code> renvoie la position du coin supérieur gauche de l'élément ; pas nécessairement du « vrai » bord gauche de l'élément. C'est important pour les éléments <b>span</b> dans les textes continus qui s'étendent sur plusieurs lignes. Le span peut commencer au milieu de la page et continuer au début de la ligne suivante. La propriété <code>offsetLeft</code> fera référence au coin gauche de départ du span, pas le bord gauche du texte au début de la seconde ligne. Par conséquent, une boîte avec les valeurs left, top, width et height correspondant à <code>offsetLeft, offsetTop, offsetWidth</code> et <code>offsetHeight</code> ne contiendra pas forcément un span avec débordement de texte.</p>
-<h3 id="Exemple">Exemple</h3>
-<pre>var colorTable = document.getElementById("t1");
-var tOLeft = colorTable.offsetLeft;
-
-if (tOLeft &gt; 5) {
-  // grand décalage à gauche : faire quelque chose ici
-}
-</pre>
-<h3 id="Exemple_2">Exemple</h3>
-<p>Comme noté plus haut, cet exemple montre une « longue » phrase qui déborde dans un div avec une bordure bleue, et une boîte rouge dont on pourrait croire qu'elle décrit les limites du span.</p>
-
-<p><img src="offsetleft.jpg"></p>
-
-<p><small>Note : il s'agit d'une image de l'exemple, pas d'un rendu direct dans le navigateur. En effet, il n'est pas possible d'intégrer des scripts dans la page du wiki.</small></p>
-<pre class="brush: html">&lt;div style="width: 300px; border-color:blue;
-  border-style:solid; border-width:1;"&gt;
-  &lt;span&gt;Short span. &lt;/span&gt;
-  &lt;span id="long"&gt;Long span that wraps withing this div.&lt;/span&gt;
-&lt;/div&gt;
-
-&lt;div id="box" style="position: absolute; border-color: red;
-  border-width: 1; border-style: solid; z-index: 10"&gt;
-&lt;/div&gt;
-
-&lt;script&gt;
+{{ ApiRef() }}
+
+### Résumé
+
+Renvoie le nombre de pixels dont le
+_coin supérieur gauche_
+de l'élément courant est décalé vers là gauche au sein du nœud [`offsetParent`](fr/DOM/element.offsetParent).
+
+### Syntaxe
+
+    left =element.offsetLeft;
+
+`left` est un entier représentant le décalage vers la gauche en pixels.
+
+### Note
+
+`offsetLeft` renvoie la position du coin supérieur gauche de l'élément ; pas nécessairement du « vrai » bord gauche de l'élément. C'est important pour les éléments **span** dans les textes continus qui s'étendent sur plusieurs lignes. Le span peut commencer au milieu de la page et continuer au début de la ligne suivante. La propriété `offsetLeft` fera référence au coin gauche de départ du span, pas le bord gauche du texte au début de la seconde ligne. Par conséquent, une boîte avec les valeurs left, top, width et height correspondant à `offsetLeft, offsetTop, offsetWidth` et `offsetHeight` ne contiendra pas forcément un span avec débordement de texte.
+
+### Exemple
+
+    var colorTable = document.getElementById("t1");
+    var tOLeft = colorTable.offsetLeft;
+
+    if (tOLeft > 5) {
+      // grand décalage à gauche : faire quelque chose ici
+    }
+
+### Exemple
+
+Comme noté plus haut, cet exemple montre une « longue » phrase qui déborde dans un div avec une bordure bleue, et une boîte rouge dont on pourrait croire qu'elle décrit les limites du span.
+
+![](offsetleft.jpg)
+
+Note : il s'agit d'une image de l'exemple, pas d'un rendu direct dans le navigateur. En effet, il n'est pas possible d'intégrer des scripts dans la page du wiki.
+
+```html
+<div style="width: 300px; border-color:blue;
+  border-style:solid; border-width:1;">
+  <span>Short span. </span>
+  <span id="long">Long span that wraps withing this div.</span>
+</div>
+
+<div id="box" style="position: absolute; border-color: red;
+  border-width: 1; border-style: solid; z-index: 10">
+</div>
+
+<script>
   var box = document.getElementById("box");
   var long = document.getElementById("long");
   box.style.left = long.offsetLeft + document.body.scrollLeft;
   box.style.top = long.offsetTop + document.body.scrollTop;
   box.style.width = long.offsetWidth;
   box.style.height = long.offsetHeight;
-&lt;/script&gt;
-</pre>
-<h3 id="Voir_aussi">Voir aussi</h3>
-<p><code><a href="fr/DOM/element.offsetParent">offsetParent</a></code>, <code><a href="fr/DOM/element.offsetTop">offsetTop</a></code>, <code><a href="fr/DOM/element.offsetWidth">offsetWidth</a></code>, <code><a href="fr/DOM/element.offsetHeight">offsetHeight</a></code></p>
-<h3 id="Sp.C3.A9cification">Spécification</h3>
-<p>Cette propriété ne fait partie d'aucun standard ou recommandation technique du W3C.</p>
-<p><a href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/offsetleft.asp">MSDN: offsetLeft</a></p>
\ No newline at end of file
+</script>
+```
+
+### Voir aussi
+
+[`offsetParent`](fr/DOM/element.offsetParent), [`offsetTop`](fr/DOM/element.offsetTop), [`offsetWidth`](fr/DOM/element.offsetWidth), [`offsetHeight`](fr/DOM/element.offsetHeight)
+
+### Spécification
+
+Cette propriété ne fait partie d'aucun standard ou recommandation technique du W3C.
+
+[MSDN: offsetLeft](http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/offsetleft.asp)
diff --git a/files/fr/web/api/htmlelement/offsetparent/index.md b/files/fr/web/api/htmlelement/offsetparent/index.md
index 4f3775191e..93a25485bf 100644
--- a/files/fr/web/api/htmlelement/offsetparent/index.md
+++ b/files/fr/web/api/htmlelement/offsetparent/index.md
@@ -7,15 +7,20 @@ tags:
   - Référence_du_DOM_Gecko
 translation_of: Web/API/HTMLElement/offsetParent
 ---
-<p>{{ ApiRef() }}</p>
-<h3 id="R.C3.A9sum.C3.A9">Résumé</h3>
-<p>Renvoie une référence à l'objet qui est l'élément conteneur positionné le plus proche (dans la hiérarchie de positionnement). Si l'élément n'est pas positionné, c'est l'élément racine (html en mode de respect des standards ; body en mode de rendu quirks) qui est l'<b>offsetParent</b>.</p>
-<h3 id="Syntaxe">Syntaxe</h3>
-<pre class="eval"><i>objetParent</i> = element.offsetParent
-</pre>
-<h3 id="Param.C3.A8tres">Paramètres</h3>
-<ul>
- <li><code>objetParent</code> est une référence à l'élément dans lequel l'élément courant est positionné.</li>
-</ul>
-<h3 id="Sp.C3.A9cification">Spécification</h3>
-<p>{{ DOM0() }}</p>
\ No newline at end of file
+{{ ApiRef() }}
+
+### Résumé
+
+Renvoie une référence à l'objet qui est l'élément conteneur positionné le plus proche (dans la hiérarchie de positionnement). Si l'élément n'est pas positionné, c'est l'élément racine (html en mode de respect des standards ; body en mode de rendu quirks) qui est l'**offsetParent**.
+
+### Syntaxe
+
+    objetParent = element.offsetParent
+
+### Paramètres
+
+- `objetParent` est une référence à l'élément dans lequel l'élément courant est positionné.
+
+### Spécification
+
+{{ DOM0() }}
diff --git a/files/fr/web/api/htmlelement/offsettop/index.md b/files/fr/web/api/htmlelement/offsettop/index.md
index 44e3b80d2c..68c4330e6f 100644
--- a/files/fr/web/api/htmlelement/offsettop/index.md
+++ b/files/fr/web/api/htmlelement/offsettop/index.md
@@ -6,41 +6,37 @@ tags:
   - DOM_0
 translation_of: Web/API/HTMLElement/offsetTop
 ---
-<p>{{ ApiRef() }}</p>
+{{ ApiRef() }}
 
-<h3 id="R.C3.A9sum.C3.A9">Résumé</h3>
+### Résumé
 
-<p><strong>offsetTop</strong> renvoie la distance entre l'élément courant et le haut du nœud <a href="/fr/docs/DOM/element.offsetParent"><code>offsetParent</code></a>.</p>
+**offsetTop** renvoie la distance entre l'élément courant et le haut du nœud [`offsetParent`](/fr/docs/DOM/element.offsetParent).
 
-<h3 id="Syntaxe">Syntaxe</h3>
+### Syntaxe
 
-<pre class="eval"><em>topPos</em> = element.offsetTop;
-</pre>
+    topPos = element.offsetTop;
 
-<h3 id="Param.C3.A8tres">Paramètres</h3>
+### Paramètres
 
-<ul>
- <li><code>topPos</code> est le nombre de pixels depuis le haut de l'élément parent.</li>
-</ul>
+- `topPos` est le nombre de pixels depuis le haut de l'élément parent.
 
-<h3 id="Exemple">Exemple</h3>
+### Exemple
 
-<pre>d = document.getElementById("div1");
+    d = document.getElementById("div1");
 
-topPos = d.offsetTop;
+    topPos = d.offsetTop;
 
-if (topPos &gt; 10 ) {
+    if (topPos > 10 ) {
 
-    // l'objet est décalé de plus de
-    // 10 pixels par rapport à son parent
+        // l'objet est décalé de plus de
+        // 10 pixels par rapport à son parent
 
-}
-</pre>
+    }
 
-<h3 id="Sp.C3.A9cification">Spécification</h3>
+### Spécification
 
-<p>{{ DOM0() }}</p>
+{{ DOM0() }}
 
-<h3 id="R.C3.A9f.C3.A9rences">Références</h3>
+### Références
 
-<p><a href="http://msdn2.microsoft.com/en-us/library/ms534303.aspx"><em>offsetTop definition</em> sur MSDN</a></p>
\ No newline at end of file
+[_offsetTop definition_ sur MSDN](http://msdn2.microsoft.com/en-us/library/ms534303.aspx)
diff --git a/files/fr/web/api/htmlelement/offsetwidth/index.md b/files/fr/web/api/htmlelement/offsetwidth/index.md
index a957ef38e9..66bde2526f 100644
--- a/files/fr/web/api/htmlelement/offsetwidth/index.md
+++ b/files/fr/web/api/htmlelement/offsetwidth/index.md
@@ -3,38 +3,35 @@ title: element.offsetWidth
 slug: Web/API/HTMLElement/offsetWidth
 translation_of: Web/API/HTMLElement/offsetWidth
 ---
-<p>{{ ApiRef() }}</p>
+{{ ApiRef() }}
 
-<h3 id="R.C3.A9sum.C3.A9">Résumé</h3>
+### Résumé
 
-<p>Renvoie la largeur totale d'un élément.</p>
+Renvoie la largeur totale d'un élément.
 
-<h3 id="Syntaxe">Syntaxe</h3>
+### Syntaxe
 
-<pre class="eval">var <em>offsetWidth</em> = <em>element</em>.offsetWidth;
-</pre>
+    var offsetWidth = element.offsetWidth;
 
-<p><code>offsetWidth</code> est une propriété en lecture seule.</p>
+`offsetWidth` est une propriété en lecture seule.
 
-<h3 id="Description">Description</h3>
+### Description
 
-<p>Typiquement, l'attribut <code>offsetWidth</code> est une mesure qui comprend les bordures de l'élément, ses marges internes horizontales (padding), la barre de défilement verticale si présente et affichée, et la largeur CSS de l'élément.</p>
+Typiquement, l'attribut `offsetWidth` est une mesure qui comprend les bordures de l'élément, ses marges internes horizontales (padding), la barre de défilement verticale si présente et affichée, et la largeur CSS de l'élément.
 
-<h2 id="exemple">Exemple</h2>
+## Exemple
 
-<p><img src="dimensions-offset.png"></p>
+![](dimensions-offset.png)
 
-<h3 id="Sp.C3.A9cification">Spécification</h3>
+### Spécification
 
-<p><code>offsetWidth</code> fait partie du modèle objet <abbr>DHTML</abbr> de Microsoft Internet Explorer. Elle ne fait partie d'aucune spécification ou recommandation technique du W3C.</p>
+`offsetWidth` fait partie du modèle objet DHTML de Microsoft Internet Explorer. Elle ne fait partie d'aucune spécification ou recommandation technique du W3C.
 
-<h3 id="Notes">Notes</h3>
+### Notes
 
-<p><code>offsetWidth</code> est une propriété du modèle objet <abbr>DHTML</abbr> provenant de Microsoft Internet Explorer. On l'appelle parfois la largeur physique ou graphique d'un élément, ou sa largeur « border-box » (bordure et boîte).</p>
+`offsetWidth` est une propriété du modèle objet DHTML provenant de Microsoft Internet Explorer. On l'appelle parfois la largeur physique ou graphique d'un élément, ou sa largeur « border-box » (bordure et boîte).
 
-<h3 id="R.C3.A9f.C3.A9rences">Références</h3>
+### Références
 
-<ul>
- <li><a href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/offsetwidth.asp?frame=true"><em>offsetWidth definition</em> sur MSDN</a></li>
- <li><a href="http://msdn.microsoft.com/workshop/author/om/measuring.asp"><em>Measuring Element Dimension and Location</em> sur MSDN</a></li>
-</ul>
\ No newline at end of file
+- [_offsetWidth definition_ sur MSDN](http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/offsetwidth.asp?frame=true)
+- [_Measuring Element Dimension and Location_ sur MSDN](http://msdn.microsoft.com/workshop/author/om/measuring.asp)
diff --git a/files/fr/web/api/htmlelement/outertext/index.md b/files/fr/web/api/htmlelement/outertext/index.md
index fb0464c439..fc7fe6a2eb 100644
--- a/files/fr/web/api/htmlelement/outertext/index.md
+++ b/files/fr/web/api/htmlelement/outertext/index.md
@@ -7,31 +7,29 @@ tags:
   - Propriété
 translation_of: Web/API/HTMLElement/outerText
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p>{{ Non-standard_header() }}</p>
+{{ Non-standard_header() }}
 
-<h2 id="Résumé">Résumé</h2>
+## Résumé
 
-<p><strong><code>HTMLElement.outerText</code></strong> n'est pas une propriété standard. En lecture, elle renvoie la même valeur que {{domxref("Node.innerText")}}. En écriture, elle supprime le noeud courant et le remplace par le texte fourni.</p>
+**`HTMLElement.outerText`** n'est pas une propriété standard. En lecture, elle renvoie la même valeur que {{domxref("Node.innerText")}}. En écriture, elle supprime le noeud courant et le remplace par le texte fourni.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Voir <a href="http://stackoverflow.com/questions/18481382/what-is-the-difference-between-innertext-and-outertext/18481435#18481435">cette réponse proposée sur StackOverflow</a>.</p>
+Voir [cette réponse proposée sur StackOverflow](http://stackoverflow.com/questions/18481382/what-is-the-difference-between-innertext-and-outertext/18481435#18481435).
 
-<h2 id="Spécification">Spécification</h2>
+## Spécification
 
-<p>Ne fait partie d'aucune spécification. Discussion de la norme : <a href="https://github.com/whatwg/html/issues/668">whatwg/html#668</a>.</p>
+Ne fait partie d'aucune spécification. Discussion de la norme : [whatwg/html#668](https://github.com/whatwg/html/issues/668).
 
-<p>Microsoft en a publié <a href="https://msdn.microsoft.com/en-us/library/ms534311(v=vs.85).aspx">une description sur MSDN</a>.</p>
+Microsoft en a publié [une description sur MSDN](<https://msdn.microsoft.com/en-us/library/ms534311(v=vs.85).aspx>).
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.HTMLElement.outerText")}}</p>
+{{Compat("api.HTMLElement.outerText")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("Node.innerText")}}</li>
- <li>{{domxref("Element.outerHTML")}}</li>
-</ul>
+- {{domxref("Node.innerText")}}
+- {{domxref("Element.outerHTML")}}
diff --git a/files/fr/web/api/htmlelement/title/index.md b/files/fr/web/api/htmlelement/title/index.md
index 6c545982d7..4746016d01 100644
--- a/files/fr/web/api/htmlelement/title/index.md
+++ b/files/fr/web/api/htmlelement/title/index.md
@@ -9,66 +9,40 @@ tags:
   - Reference
 translation_of: Web/API/HTMLElement/title
 ---
-<div>{{ APIRef("HTML DOM") }}</div>
+{{ APIRef("HTML DOM") }}
 
-<p>La propriété <strong><code>HTMLElement.title</code></strong> représente le titre de l'élément, le texte habituellement affiché dans une fenêtre contextuelle d''info-bulle' lorsque la souris survole le nœud affiché.</p>
+La propriété **`HTMLElement.title`** représente le titre de l'élément, le texte habituellement affiché dans une fenêtre contextuelle d''info-bulle' lorsque la souris survole le nœud affiché.
 
-<div class="note">
-<p><strong>Note :</strong> Si un nœud n'a pas d'attribut <code>title</code>, alors l'action par défaut est de l'hériter de son nœud parent, qui peut à son tour l'hériter de son nœud parent, etc..</p>
+> **Note :** Si un nœud n'a pas d'attribut `title`, alors l'action par défaut est de l'hériter de son nœud parent, qui peut à son tour l'hériter de son nœud parent, etc..
+>
+>      <div title="InfoCool">
+>        <div title="">le survol de la souris ici fera apparaître "InfoCool"</div>
+>        <div title=" ">le survol de la souris ici ne fera rien apparaître</div>
+>      </div>
 
-<pre> &lt;div title="InfoCool"&gt;
-   &lt;div title=""&gt;le survol de la souris ici fera apparaître "InfoCool"&lt;/div&gt;
-   &lt;div title=" "&gt;le survol de la souris ici ne fera rien apparaître&lt;/div&gt;
- &lt;/div&gt;
-</pre>
-</div>
+## Syntaxe
 
-<h2 id="Syntax">Syntaxe</h2>
+    var chn = element.title;
+    element.title = chn;
 
-<pre class="eval">var <em>chn</em> = <em>element</em>.title;<em>
-</em>element.title = <em>chn</em>;
-</pre>
+## Exemple
 
-<h2 id="Example">Exemple</h2>
+```js
+ bouton1.title = "cliquer pour rafraîchir";
+```
 
-<pre class="brush: js"> bouton1.title = "cliquer pour rafraîchir";
-</pre>
+## Spécifications
 
-<h2 id="Specification">Spécifications</h2>
+| Spécification                                                                        | Statut                           | Commentaire                                                          |
+| ------------------------------------------------------------------------------------ | -------------------------------- | -------------------------------------------------------------------- |
+| {{SpecName('HTML WHATWG', '#dom-title', 'title')}}                 | {{Spec2('HTML WHATWG')}} | Pas de changement par rapport à la {{SpecName('DOM2 HTML')}}. |
+| {{SpecName('DOM2 HTML', 'html.html#ID-78276800', 'title')}}     | {{Spec2('DOM2 HTML')}}     | Pas de changement par rapport à la {{SpecName('DOM1')}}.     |
+| {{SpecName('DOM1', 'level-one-html.html#ID-78276800', 'title')}} | {{Spec2('DOM1')}}         | Définition initiale.                                                 |
 
-<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', '#dom-title', 'title')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Pas de changement par rapport à la {{SpecName('DOM2 HTML')}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 HTML', 'html.html#ID-78276800', 'title')}}</td>
-   <td>{{Spec2('DOM2 HTML')}}</td>
-   <td>Pas de changement par rapport à la {{SpecName('DOM1')}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM1', 'level-one-html.html#ID-78276800', 'title')}}</td>
-   <td>{{Spec2('DOM1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+## Compatibilité des navigateurs
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+{{Compat("api.HTMLElement.title")}}
 
-<p>{{Compat("api.HTMLElement.title")}}</p>
+## Voir aussi
 
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>L'attribut HTML global <a href="/fr/docs/Web/HTML/Attributs_universels/title"><strong>title</strong></a>.</li>
-</ul>
+- L'attribut HTML global [**title**](/fr/docs/Web/HTML/Attributs_universels/title).
diff --git a/files/fr/web/api/htmlelement/transitionend_event/index.md b/files/fr/web/api/htmlelement/transitionend_event/index.md
index a780a3023b..2ab87e6a9e 100644
--- a/files/fr/web/api/htmlelement/transitionend_event/index.md
+++ b/files/fr/web/api/htmlelement/transitionend_event/index.md
@@ -11,108 +11,80 @@ tags:
 translation_of: Web/API/HTMLElement/transitionend_event
 original_slug: Web/Events/transitionend
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}
 
-<p>L'événement <strong><code>transitionend</code></strong> est déclenché lorsqu'une <a href="/en-US/docs/CSS/Using_CSS_transitions">transition CSS</a> est terminée. Dans le cas où une transition est supprimée avant la fin, par exemple si {{cssxref ("transition-property")}} est supprimé ou {{cssxref ("display")}} est défini sur <code>none</code>, alors l'événement ne pourra pas être généré.</p>
+L'événement **`transitionend`** est déclenché lorsqu'une [transition CSS](/en-US/docs/CSS/Using_CSS_transitions) est terminée. Dans le cas où une transition est supprimée avant la fin, par exemple si {{cssxref ("transition-property")}} est supprimé ou {{cssxref ("display")}} est défini sur `none`, alors l'événement ne pourra pas être généré.
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row">Bulles</th>
-   <td>Oui</td>
-  </tr>
-  <tr>
-   <th scope="row">Annulable</th>
-   <td>Oui</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface</th>
-   <td>{{domxref("TransitionEvent")}}</td>
-  </tr>
-  <tr>
-   <th scope="row">Propriété de gestionnaire d'événements</th>
-   <td>{{domxref("GlobalEventHandlers/ontransitionend", "ontransitionend")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Bulles</th>
+      <td>Oui</td>
+    </tr>
+    <tr>
+      <th scope="row">Annulable</th>
+      <td>Oui</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface</th>
+      <td>{{domxref("TransitionEvent")}}</td>
+    </tr>
+    <tr>
+      <th scope="row">Propriété de gestionnaire d'événements</th>
+      <td>
+        {{domxref("GlobalEventHandlers/ontransitionend", "ontransitionend")}}
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<p>L'événement <code>transitionend</code> est déclenché dans les deux sens - à la fin de la transition vers l'état de transition et lorsqu'il revient complètement à l'état par défaut ou sans transition. S'il n'y a pas de délai ou de durée de transition, si les deux sont 0 ou qu'aucun n'est déclaré, il n'y a pas de transition et aucun des événements de transition n'est déclenché.  Si l'événement <code>transitioncancel</code> est déclenché, l'événement <code>transitionend</code> ne se déclenchera pas.</p>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Propriétés</th>
-   <th scope="col">Type</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>target</code> {{readonlyInline}}</td>
-   <td>{{domxref("EventTarget")}}</td>
-   <td>The event target (the topmost target in the DOM tree).</td>
-  </tr>
-  <tr>
-   <td><code>type</code> {{readonlyInline}}</td>
-   <td>{{domxref("DOMString")}}</td>
-   <td>The type of event.</td>
-  </tr>
-  <tr>
-   <td><code>bubbles</code> {{readonlyInline}}</td>
-   <td>{{jsxref("Boolean")}}</td>
-   <td>Whether the event normally bubbles or not.</td>
-  </tr>
-  <tr>
-   <td><code>cancelable</code> {{readonlyInline}}</td>
-   <td>{{jsxref("Boolean")}}</td>
-   <td>Whether the event is cancellable or not.</td>
-  </tr>
-  <tr>
-   <td><code>propertyName</code> {{readonlyInline}}</td>
-   <td>{{domxref("DOMString")}}</td>
-   <td>The name of the CSS property associated with the transition.</td>
-  </tr>
-  <tr>
-   <td><code>elapsedTime</code> {{readonlyInline}}</td>
-   <td>Float</td>
-   <td>The amount of time the transition has been running, in seconds, as of the time the event was generated. This value is not affected by the value of <code>transition-delay</code>.</td>
-  </tr>
-  <tr>
-   <td><code>pseudoElement</code> {{readonlyInline}}</td>
-   <td>{{domxref("DOMString")}}</td>
-   <td>The name (beginning with two colons) of the CSS pseudo-element on which the transition occured (in which case the target of the event is that pseudo-element's corresponding element), or the empty string if the transition occurred on an element (which means the target of the event is that element).</td>
-  </tr>
- </tbody>
-</table>
+L'événement `transitionend` est déclenché dans les deux sens - à la fin de la transition vers l'état de transition et lorsqu'il revient complètement à l'état par défaut ou sans transition. S'il n'y a pas de délai ou de durée de transition, si les deux sont 0 ou qu'aucun n'est déclaré, il n'y a pas de transition et aucun des événements de transition n'est déclenché.  Si l'événement `transitioncancel` est déclenché, l'événement `transitionend` ne se déclenchera pas.
+
+## Propriétés
+
+| Propriétés                               | Type                                 | Description                                                                                                                                                                                                                                                                                                |
+| ---------------------------------------- | ------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `target` {{readonlyInline}}        | {{domxref("EventTarget")}} | The event target (the topmost target in the DOM tree).                                                                                                                                                                                                                                                     |
+| `type` {{readonlyInline}}          | {{domxref("DOMString")}}     | The type of event.                                                                                                                                                                                                                                                                                         |
+| `bubbles` {{readonlyInline}}       | {{jsxref("Boolean")}}         | Whether the event normally bubbles or not.                                                                                                                                                                                                                                                                 |
+| `cancelable` {{readonlyInline}}    | {{jsxref("Boolean")}}         | Whether the event is cancellable or not.                                                                                                                                                                                                                                                                   |
+| `propertyName` {{readonlyInline}}  | {{domxref("DOMString")}}     | The name of the CSS property associated with the transition.                                                                                                                                                                                                                                               |
+| `elapsedTime` {{readonlyInline}}   | Float                                | The amount of time the transition has been running, in seconds, as of the time the event was generated. This value is not affected by the value of `transition-delay`.                                                                                                                                     |
+| `pseudoElement` {{readonlyInline}} | {{domxref("DOMString")}}     | The name (beginning with two colons) of the CSS pseudo-element on which the transition occured (in which case the target of the event is that pseudo-element's corresponding element), or the empty string if the transition occurred on an element (which means the target of the event is that element). |
 
-<h2 id="Examples">Examples</h2>
+## Examples
 
-<p>This code gets an element that has a transition defined and adds a listener to the <code>transitionend</code> event:</p>
+This code gets an element that has a transition defined and adds a listener to the `transitionend` event:
 
-<pre class="brush: js">const transition = document.querySelector('.transition');
+```js
+const transition = document.querySelector('.transition');
 
-transition.addEventListener('transitionend', () =&gt; {
+transition.addEventListener('transitionend', () => {
   console.log('Transition ended');
-});</pre>
+});
+```
 
-<p>The same, but using the {{domxref("GlobalEventHandlers/ontransitionend", "ontransitionend")}}:</p>
+The same, but using the {{domxref("GlobalEventHandlers/ontransitionend", "ontransitionend")}}:
 
-<pre class="brush: js">const transition = document.querySelector('.transition');
+```js
+const transition = document.querySelector('.transition');
 
-transition.ontransitionend = () =&gt; {
+transition.ontransitionend = () => {
   console.log('Transition ended');
-};</pre>
+};
+```
 
-<h3 id="Live_example">Live example</h3>
+### Live example
 
-<p>In the following example, we have a simple {{htmlelement("div")}} element, styled with a transition that includes a delay:</p>
+In the following example, we have a simple {{htmlelement("div")}} element, styled with a transition that includes a delay:
 
-<pre class="brush: html">&lt;div class="transition"&gt;Hover over me&lt;/div&gt;
-&lt;div class="message"&gt;&lt;/div&gt;</pre>
+```html
+<div class="transition">Hover over me</div>
+<div class="message"></div>
+```
 
-<pre class="brush: css">.transition {
+```css
+.transition {
   width: 100px;
   height: 100px;
   background: rgba(255,0,0,1);
@@ -124,11 +96,13 @@ transition.ontransitionend = () =&gt; {
 .transition:hover {
   transform: rotate(90deg);
   background: rgba(255,0,0,0);
-}</pre>
+}
+```
 
-<p>To this, we'll add some JavaScript to indicate that the <code><a href="/en-US/docs/Web/API/HTMLElement/transitionstart_event">transitionstart</a></code>, <code><a href="/en-US/docs/Web/API/HTMLElement/transitionrun_event">transitionrun</a></code>, <code><a href="/en-US/docs/Web/API/Window/transitioncancel_event">transitioncancel</a></code> and <code>transitionend</code> events fire. In this example, to cancel the transition, stop hovering over the transitioning box before the transition ends. For the transition end event to fire, stay hovered over the transition until the transition ends.</p>
+To this, we'll add some JavaScript to indicate that the [`transitionstart`](/en-US/docs/Web/API/HTMLElement/transitionstart_event), [`transitionrun`](/en-US/docs/Web/API/HTMLElement/transitionrun_event), [`transitioncancel`](/en-US/docs/Web/API/Window/transitioncancel_event) and `transitionend` events fire. In this example, to cancel the transition, stop hovering over the transitioning box before the transition ends. For the transition end event to fire, stay hovered over the transition until the transition ends.
 
-<pre class="brush: js">const message = document.querySelector('.message');
+```js
+const message = document.querySelector('.message');
 const el = document.querySelector('.transition');
 
 el.addEventListener('transitionrun', function() {
@@ -146,46 +120,31 @@ el.addEventListener('transitioncancel', function() {
 el.addEventListener('transitionend', function() {
   message.textContent = 'transitionend fired';
 });
-</pre>
+```
 
-<p>{{ EmbedLiveSample('Live_example', '100%', '150px') }}</p>
+{{ EmbedLiveSample('Live_example', '100%', '150px') }}
 
-<p>The <code>transitionend</code> event is fired in both directions: when the box finishes turning and the opacity hits 0 or 1, depending on the direction.</p>
+The `transitionend` event is fired in both directions: when the box finishes turning and the opacity hits 0 or 1, depending on the direction.
 
-<p>If there is no transition delay or duration, if both are 0s or neither is declared, there is no transition, and none of the transition events are fired.</p>
+If there is no transition delay or duration, if both are 0s or neither is declared, there is no transition, and none of the transition events are fired.
 
-<p>If the <code>transitioncancel</code> event is fired, the <code>transitionend</code> event will not fire.</p>
+If the `transitioncancel` event is fired, the `transitionend` event will not fire.
 
-<h2 id="Spécifications">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 Transitions", "#transitionend", "transitionend")}}</td>
-   <td>{{Spec2('CSS3 Transitions')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                            | Statut                                   | Commentaire          |
+| ---------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName("CSS3 Transitions", "#transitionend", "transitionend")}} | {{Spec2('CSS3 Transitions')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.HTMLElement.transitionend_event")}}</p>
+{{Compat("api.HTMLElement.transitionend_event")}}
 
-<h2 id="Voir_également">Voir également</h2>
+## Voir également
 
-<ul>
- <li>Le gestionnaire d'événements {{domxref("GlobalEventHandlers.ontransitionend")}}</li>
- <li>L'interface {{domxref("TransitionEvent")}}</li>
- <li>Propriétés CSS : {{cssxref("transition")}}, {{cssxref("transition-delay")}}, {{cssxref("transition-duration")}}, {{cssxref("transition-property")}}, {{cssxref("transition-timing-function")}}</li>
- <li>Événements liés: {{domxref("HTMLElement/transitionrun_event", "transitionrun")}}, {{domxref("HTMLElement/transitionstart_event", "transitionstart")}}, {{domxref("HTMLElement/transitioncancel_event", "transitioncancel")}}</li>
- <li>Cet événement sur {{domxref("Document")}} cible : {{domxref("Document/transitionend_event", "transitionend")}}</li>
- <li>Cet événement sur {{domxref("Window")}} cible : {{domxref("Window/transitionend_event", "transitionend")}}</li>
-</ul>
+- Le gestionnaire d'événements {{domxref("GlobalEventHandlers.ontransitionend")}}
+- L'interface {{domxref("TransitionEvent")}}
+- Propriétés CSS : {{cssxref("transition")}}, {{cssxref("transition-delay")}}, {{cssxref("transition-duration")}}, {{cssxref("transition-property")}}, {{cssxref("transition-timing-function")}}
+- Événements liés: {{domxref("HTMLElement/transitionrun_event", "transitionrun")}}, {{domxref("HTMLElement/transitionstart_event", "transitionstart")}}, {{domxref("HTMLElement/transitioncancel_event", "transitioncancel")}}
+- Cet événement sur {{domxref("Document")}} cible : {{domxref("Document/transitionend_event", "transitionend")}}
+- Cet événement sur {{domxref("Window")}} cible : {{domxref("Window/transitionend_event", "transitionend")}}
diff --git a/files/fr/web/api/htmlformcontrolscollection/index.md b/files/fr/web/api/htmlformcontrolscollection/index.md
index 7924983b8c..03b1242977 100644
--- a/files/fr/web/api/htmlformcontrolscollection/index.md
+++ b/files/fr/web/api/htmlformcontrolscollection/index.md
@@ -8,57 +8,36 @@ tags:
   - Interface
 translation_of: Web/API/HTMLFormControlsCollection
 ---
-<div>{{APIRef("HTML DOM")}}</div>
+{{APIRef("HTML DOM")}}
 
-<p>L'interface <strong><code>HTMLFormControlsCollection</code></strong> représente une <em>collection</em> <em>d'éléments de contrôle de formulaires</em>. Il représente les listes retournées par le {{domxref("HTMLFormElement")}} et le {{domxref("HTMLFieldSetElement")}} de la propriété d'interface {{domxref("HTMLFieldSetElement.elements", "elements")}}.</p>
+L'interface **`HTMLFormControlsCollection`** représente une _collection_ _d'éléments de contrôle de formulaires_. Il représente les listes retournées par le {{domxref("HTMLFormElement")}} et le {{domxref("HTMLFieldSetElement")}} de la propriété d'interface {{domxref("HTMLFieldSetElement.elements", "elements")}}.
 
-<p>Cette interface remplace une méthode de {{domxref("HTMLCollection")}}, sur laquelle elle est basée.</p>
+Cette interface remplace une méthode de {{domxref("HTMLCollection")}}, sur laquelle elle est basée.
 
-<p>{{InheritanceDiagram}}</p>
+{{InheritanceDiagram}}
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<p><em>Cette interface hérite des propriétés de son parent {{domxref("HTMLCollection")}}.</em></p>
+_Cette interface hérite des propriétés de son parent {{domxref("HTMLCollection")}}._
 
-<h2 id="Méthodes">Méthodes</h2>
+## Méthodes
 
-<p><em>Cette interface hérite des méthodes de son parent {{domxref("HTMLCollection")}}.</em></p>
+_Cette interface hérite des méthodes de son parent {{domxref("HTMLCollection")}}._
 
-<dl>
- <dt>{{domxref("HTMLFormControlsCollection.namedItem()")}}</dt>
- <dd>Renvoie la {{domxref("RadioNodeList")}} (<em>liste de noeuds radio</em>) ou l'{{domxref("Element")}} dans la collection dont le <code>name</code> (<em>nom</em>) ou l'<code>id</code> (<em>identifiant</em>) correspond au nom spécifié, ou <code>null</code> si aucun noeud ne correspond. Noter que cette version de <code>namedItem()</code> cache celui hérité de {{domxref("HTMLCollection")}}. Comme pour le premier, en JavaScript, en utilisant le crochet de la syntaxe de tableau (<em>array</em>) avec une {{jsxref("String")}} (<em>chaîne de caractères</em>), <code><em>collection</em>["value"]</code> est équivalent à <code><em>collection</em>.namedItem("value")</code>.</dd>
-</dl>
+- {{domxref("HTMLFormControlsCollection.namedItem()")}}
+  - : Renvoie la {{domxref("RadioNodeList")}} (_liste de noeuds radio_) ou l'{{domxref("Element")}} dans la collection dont le `name` (_nom_) ou l'`id` (_identifiant_) correspond au nom spécifié, ou `null` si aucun noeud ne correspond. Noter que cette version de `namedItem()` cache celui hérité de {{domxref("HTMLCollection")}}. Comme pour le premier, en JavaScript, en utilisant le crochet de la syntaxe de tableau (_array_) avec une {{jsxref("String")}} (_chaîne de caractères_), `collection["value"]` est équivalent à `collection.namedItem("value")`.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "infrastructure.html#htmlformcontrolscollection", "HTMLFormControlsCollection")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Pas de changement depuis le dernier instantané {{SpecName('HTML5 W3C')}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', "infrastructure.html#htmlformcontrolscollection", "HTMLFormControlsCollection")}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Dans cet instantané de {{SpecName("HTML WHATWG")}}, <code>HTMLFormControlsCollections</code> est défini pour la première fois.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                                    | Statut                           | Commentaire                                                                                                                  |
+| ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('HTML WHATWG', "infrastructure.html#htmlformcontrolscollection", "HTMLFormControlsCollection")}} | {{Spec2('HTML WHATWG')}} | Pas de changement depuis le dernier instantané {{SpecName('HTML5 W3C')}}.                                             |
+| {{SpecName('HTML5 W3C', "infrastructure.html#htmlformcontrolscollection", "HTMLFormControlsCollection")}}     | {{Spec2('HTML5 W3C')}}     | Dans cet instantané de {{SpecName("HTML WHATWG")}}, `HTMLFormControlsCollections` est défini pour la première fois. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
+{{Compat("api.HTMLFormControlsCollection")}}
 
+## Voir aussi
 
-<p>{{Compat("api.HTMLFormControlsCollection")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("HTMLCollection")}}, {{domxref("RadioNodeList")}}, {{domxref("HTMLOptionsCollection")}}</li>
-</ul>
+- {{domxref("HTMLCollection")}}, {{domxref("RadioNodeList")}}, {{domxref("HTMLOptionsCollection")}}
diff --git a/files/fr/web/api/htmlformelement/acceptcharset/index.md b/files/fr/web/api/htmlformelement/acceptcharset/index.md
index 59cf90bc64..57663cfbef 100644
--- a/files/fr/web/api/htmlformelement/acceptcharset/index.md
+++ b/files/fr/web/api/htmlformelement/acceptcharset/index.md
@@ -5,23 +5,21 @@ tags:
   - HTMLFormElement
 translation_of: Web/API/HTMLFormElement/acceptCharset
 ---
-<div>{{APIRef("HTML DOM")}}</div>
+{{APIRef("HTML DOM")}}
 
-<p>La propriété <code><strong>HTMLFormElement.acceptCharset</strong></code> représente une liste des codages de caratères acceptés par l'élément FORM concerné. Les valeurs de cette liste peuvent être séparés par des virgules ou des espaces.</p>
+La propriété **`HTMLFormElement.acceptCharset`** représente une liste des codages de caratères acceptés par l'élément FORM concerné. Les valeurs de cette liste peuvent être séparés par des virgules ou des espaces.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="eval"><em>string</em> = form.acceptCharset;
-form.acceptCharset = <em>string</em><code>;</code>
-</pre>
+    string = form.acceptCharset;
+    form.acceptCharset = string;
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="eval">inputs = document.forms["myform"].acceptCharset
-</pre>
+    inputs = document.forms["myform"].acceptCharset
 
-<h2 id="Specification">Spécification</h2>
+## Spécification
 
-<p><a href="http://www.w3.org/TR/html5/forms.html#dom-form-acceptcharset">HTML 5, Section 4.10.3: The Form Element</a></p>
+[HTML 5, Section 4.10.3: The Form Element](http://www.w3.org/TR/html5/forms.html#dom-form-acceptcharset)
 
-<p><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-19661795">DOM Level 2 HTML: acceptCharset</a></p>
+[DOM Level 2 HTML: acceptCharset](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-19661795)
diff --git a/files/fr/web/api/htmlformelement/action/index.md b/files/fr/web/api/htmlformelement/action/index.md
index 7faeadc67a..612ca4a371 100644
--- a/files/fr/web/api/htmlformelement/action/index.md
+++ b/files/fr/web/api/htmlformelement/action/index.md
@@ -3,24 +3,23 @@ title: HTMLFormElement.action
 slug: Web/API/HTMLFormElement/action
 translation_of: Web/API/HTMLFormElement/action
 ---
-<div>{{APIRef("HTML DOM")}}</div>
+{{APIRef("HTML DOM")}}
 
-<p>La propriété <strong><code>HTMLFormElement.action</code></strong> représente l'action associée à l'élément {{HTMLElement("form")}}.</p>
+La propriété **`HTMLFormElement.action`** représente l'action associée à l'élément {{HTMLElement("form")}}.
 
-<p>L'action d'un formulaire est le programme exécuté sur le serveur lorsque le formulaire est soumis. Cette propriété peut être récupérée ou définie.</p>
+L'action d'un formulaire est le programme exécuté sur le serveur lorsque le formulaire est soumis. Cette propriété peut être récupérée ou définie.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="eval"><em>string</em> = form.action
-form.action = <em>string</em>
-</pre>
+    string = form.action
+    form.action = string
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<p>form.action = "/cgi-bin/publish";</p>
+form.action = "/cgi-bin/publish";
 
-<h2 id="Specification">Spécification</h2>
+## Spécification
 
-<p><a href="http://www.w3.org/TR/html5/association-of-controls-and-forms.html#dom-fs-method">HTML 5, Section 4.10.19.6, Form submission</a></p>
+[HTML 5, Section 4.10.19.6, Form submission](http://www.w3.org/TR/html5/association-of-controls-and-forms.html#dom-fs-method)
 
-<p><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-74049184">DOM Level 2 HTML: action</a></p>
+[DOM Level 2 HTML: action](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-74049184)
diff --git a/files/fr/web/api/htmlformelement/elements/index.md b/files/fr/web/api/htmlformelement/elements/index.md
index fbe30d563e..917df92fce 100644
--- a/files/fr/web/api/htmlformelement/elements/index.md
+++ b/files/fr/web/api/htmlformelement/elements/index.md
@@ -3,29 +3,25 @@ title: HTMLFormElement.elements
 slug: Web/API/HTMLFormElement/elements
 translation_of: Web/API/HTMLFormElement/elements
 ---
-<div>
-<div>{{APIRef("HTML DOM")}}</div>
-</div>
+{{APIRef("HTML DOM")}}
 
-<p>La propriété <code><strong>HTMLFormElement.elements</strong></code> retourne une {{domxref("HTMLFormControlsCollection")}} ({{ HTMLVersionInline(4) }} <code><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-75708506">HTMLCollection</a></code>) de tous les contrôles de formulaire contenu dans l'élément FORM, à l'exception des éléments de type <a href="/fr-FR/docs/HTML/Element/Input">input</a> dont l'attribut <code>type</code> est égal à <code>image</code>.</p>
+La propriété **`HTMLFormElement.elements`** retourne une {{domxref("HTMLFormControlsCollection")}} ({{ HTMLVersionInline(4) }} [`HTMLCollection`](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-75708506)) de tous les contrôles de formulaire contenu dans l'élément FORM, à l'exception des éléments de type [input](/fr-FR/docs/HTML/Element/Input) dont l'attribut `type` est égal à `image`.
 
-<p>Vous pouvez accéder à un élément particulier en utilisant soit un index soit le <code>name</code> ou l'<code>id</code> de l'élément.</p>
+Vous pouvez accéder à un élément particulier en utilisant soit un index soit le `name` ou l'`id` de l'élément.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>nodeList</em> = <em>HTMLFormElement</em>.elements
-</pre>
+    nodeList = HTMLFormElement.elements
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush:js">var inputs = document.getElementById("form1").elements;
+```js
+var inputs = document.getElementById("form1").elements;
 var inputByIndex = inputs[2];
 var inputByName = inputs["login"];
-</pre>
+```
 
-<h2 id="Specification">Spécification</h2>
+## Spécification
 
-<ul>
- <li><a href="http://www.w3.org/TR/html5/forms.html#dom-form-elements">HTML5, Section 4.10.3, The form Element</a></li>
- <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-76728479">DOM Level 2 HTML: elements</a></li>
-</ul>
+- [HTML5, Section 4.10.3, The form Element](http://www.w3.org/TR/html5/forms.html#dom-form-elements)
+- [DOM Level 2 HTML: elements](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-76728479)
diff --git a/files/fr/web/api/htmlformelement/encoding/index.md b/files/fr/web/api/htmlformelement/encoding/index.md
index 43c942335d..a148520e2d 100644
--- a/files/fr/web/api/htmlformelement/encoding/index.md
+++ b/files/fr/web/api/htmlformelement/encoding/index.md
@@ -3,8 +3,6 @@ title: HTMLFormElement.encoding
 slug: Web/API/HTMLFormElement/encoding
 translation_of: Web/API/HTMLFormElement/encoding
 ---
-<div>
-<div>{{APIRef("HTML DOM")}}</div>
-</div>
+{{APIRef("HTML DOM")}}
 
-<p>La propriété <strong><code>HTMLFormElement.encoding</code></strong> est un nom alternatif pour l'élément {{domxref("HTMLFormElement.enctype","enctype")}} de l'objet {{domxref("HTMLFormElement")}} du DOM.</p>
+La propriété **`HTMLFormElement.encoding`** est un nom alternatif pour l'élément {{domxref("HTMLFormElement.enctype","enctype")}} de l'objet {{domxref("HTMLFormElement")}} du DOM.
diff --git a/files/fr/web/api/htmlformelement/enctype/index.md b/files/fr/web/api/htmlformelement/enctype/index.md
index d706eec625..71107a5efa 100644
--- a/files/fr/web/api/htmlformelement/enctype/index.md
+++ b/files/fr/web/api/htmlformelement/enctype/index.md
@@ -3,24 +3,23 @@ title: HTMLFormElement.enctype
 slug: Web/API/HTMLFormElement/enctype
 translation_of: Web/API/HTMLFormElement/enctype
 ---
-<div>{{APIRef("HTML DOM")}}</div>
+{{APIRef("HTML DOM")}}
 
-<p>La propriété <code><strong>HTMLFormElement.enctype</strong></code> représente le type de contenu de l'élément  {{HTMLElement("form")}}.</p>
+La propriété **`HTMLFormElement.enctype`** représente le type de contenu de l'élément  {{HTMLElement("form")}}.
 
-<p>Le type d'encodage généralement utilisé est "application/x-www-form-urlencoded".</p>
+Le type d'encodage généralement utilisé est "application/x-www-form-urlencoded".
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="eval"><em>string</em> = form.enctype
-form.enctype = <em>string</em>
-</pre>
+    string = form.enctype
+    form.enctype = string
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="eval">form.enctype = "application/x-www-form-urlencoded";</pre>
+    form.enctype = "application/x-www-form-urlencoded";
 
-<h2 id="Specification">Spécification</h2>
+## Spécification
 
-<p><a href="http://www.w3.org/TR/html5/forms.html#attr-fs-enctype">HTML 5, Section 4.10.19.6, Form submission</a></p>
+[HTML 5, Section 4.10.19.6, Form submission](http://www.w3.org/TR/html5/forms.html#attr-fs-enctype)
 
-<p><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-84227810">DOM Level 2 HTML: enctype</a></p>
+[DOM Level 2 HTML: enctype](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-84227810)
diff --git a/files/fr/web/api/htmlformelement/index.md b/files/fr/web/api/htmlformelement/index.md
index 747286a784..8850ffaf60 100644
--- a/files/fr/web/api/htmlformelement/index.md
+++ b/files/fr/web/api/htmlformelement/index.md
@@ -10,118 +10,112 @@ tags:
   - Interface
 translation_of: Web/API/HTMLFormElement
 ---
-<div>{{APIRef("HTML DOM")}}</div>
-
-<p>L'interface <strong><code>HTMLFormElement</code></strong> représente un élément  {{HTMLElement("form")}} dans le DOM ; il peut être utilisé pour accéder et, dans quelques cas, modifier l'aspect du formulaire, ainsi que pour accéder à ses éléments composants.</p>
-
-<p>{{InheritanceDiagram(600,120)}}</p>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<p><em>Cette interface hérite aussi des propriétés de son parent {{domxref("HTMLElement")}}.</em></p>
-
-<dl>
- <dt>{{domxref("HTMLFormElement.elements")}}{{ReadOnlyInline}}</dt>
- <dd>Un élément {{domxref("HTMLFormControlsCollection")}} regroupant les différents contrôles associés à ce formulaire.</dd>
- <dt>{{domxref("HTMLFormElement.length")}}{{ReadOnlyInline}}</dt>
- <dd>Une valeur de type <code>long</code> indiquant le nombre de contrôles dans le formulaire.</dd>
- <dt>{{domxref("HTMLFormElement.name")}}</dt>
- <dd>Une chaîne {{domxref("DOMString")}} indiquant la valeur de l'attribut HTML {{htmlattrxref("name", "form")}} pour ce formulaire et qui correspond au nom du formulaire.</dd>
- <dt>{{domxref("HTMLFormElement.method")}}</dt>
- <dd>Une chaîne {{domxref("DOMString")}} indiquant la valeur de l'attribut HTML {{htmlattrxref("method", "form")}} pour ce formulaire et qui correspond à la méthode HTTP utilisée pour envoyer le formulaires. Seules certaines valeurs peuvent être utilisées avec cette propriété.</dd>
- <dt>{{domxref("HTMLFormElement.target")}}</dt>
- <dd>Une chaîne {{domxref("DOMString")}} indiquant la valeur de l'attribut HTML {{htmlattrxref("target", "form")}} pour ce formulaire et qui indique l'emplacement où seront affichées les résultats après envoi du formulaire.</dd>
- <dt>{{domxref("HTMLFormElement.action")}}</dt>
- <dd>Une chaîne {{domxref("DOMString")}} indiquant la valeur de l'attribut HTML {{htmlattrxref("action", "form")}} pour ce formulaire et qui contient l'URI d'un programme traitant les informations transmises via le formulaire.</dd>
- <dt>{{domxref("HTMLFormElement.encoding")}} ou {{domxref("HTMLFormElement.enctype")}}</dt>
- <dd>Une chaîne {{domxref("DOMString")}} indiquant la valeur de l'attribut HTML {{htmlattrxref("enctype", "form")}} pour ce formulaire et qui correspond au type de contenu utilisé pour transmettre les données du formulaire vers le serveur. Seules certaines valeurs peuvent être utilisées pour cette propriété. Les deux noms indiqués pour la méthode sont synonymes.</dd>
- <dt>{{domxref("HTMLFormElement.acceptCharset")}}</dt>
- <dd>Une chaîne {{domxref("DOMString")}} indiquant la valeur de l'attribut HTML {{htmlattrxref("accept-charset", "form")}} pour ce formulaire et qui correspond au jeu de caractères / à l'encodage pris en charge par le serveur.</dd>
- <dt>{{domxref("HTMLFormElement.autocomplete")}}</dt>
- <dd>Une chaîne {{domxref("DOMString")}} indiquant la valeur de l'attribut HTML {{htmlattrxref("autocomplete", "form")}} pour ce formulaire et qui indique si les contrôles du formulaire sont automatiquement renseignés par le navigateur.</dd>
- <dt>{{domxref("HTMLFormElement.noValidate")}}</dt>
- <dd>Un booléen indiquant la valeur de l'attribut HTML {{htmlattrxref("novalidate", "form")}} pour ce formulaire et qui indique si le formulaire ne devrait pas être validé.</dd>
-</dl>
-
-<p>Les champs de saisie nommés sont ajoutés comme propriétés sur leurs formulaires associés. Ces propriétés peuvent surcharger les propriétés natives si elles utilisent le même nom ! Par exemple, un formulaire disposant d'un {{HTMLElement("&lt;input&gt;")}} nommé <code>action</code> surchargera la propriété native <code>action</code> et tout appel renverra le champ <code>input</code> plutôt que la valeur de l'attribut HTML {{htmlattrxref("action", "form")}}.</p>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<p><em>Cette interface hérite aussi des méthodes de son parent {{domxref("HTMLElement")}}.</em></p>
-
-<dl>
- <dt>{{domxref("HTMLFormElement.submit()")}}</dt>
- <dd>soumet le formulaire au serveur.</dd>
- <dt>{{domxref("HTMLFormElement.reset()")}}</dt>
- <dd>redéfinit le formulaire à son état initial.</dd>
- <dt>{{domxref("HTMLFormElement.checkValidity()")}}</dt>
- <dd>renvoie <code>true</code> si les contrôles du formulaire sont soumis à des contraintes de validation et les respectent. Elle renvoie <code>false</code> si certains contrôles ne respectent pas leurs contraintes. Elle déclenche un évènement {{event("invalid")}} pour chaque contrôle qui ne respecte pas ses contraintes. De tels contrôles sont considérés invalides si l'évènement n'est pas annulé. C'est au développeur de choisir comment réagir face à la valeur <code>false</code> produite par cette méthode.</dd>
- <dt>{{domxref("HTMLFormElement.reportValidity()")}}</dt>
- <dd>renvoie <code>true</code> si les contrôles du formulaire respectent leurs contraintes de validation. Lorsque <code>false</code> est renvoyé, des évènements annulables {{Event("invalid")}} sont déclenchés pour chaque contrôle invalide et les problèmes de validation sont rapportés à l'utilisateur.</dd>
- <dt>{{domxref("HTMLFormElement.requestAutocomplete()")}} {{obsolete_inline}}</dt>
- <dd>déclenche une interface native du navigateur afin d'aider les utilisateurs à remplir les champs pour lesquels <a href="https://html.spec.whatwg.org/#autofill-field-name">la valeur nommée du champ à remplissage automatique</a> ne vaut pas <code>off</code> ou <code>on</code>. Le formulaire reçoit un évènement lorsque l'utilisateur a fini d'intéragir avec l'interface, l'événement sera {{event("autocomplete")}} si les champs ont bien été remplis ou {{event("autocompleteerror")}} s'il y a eu un problème. <strong>Cette méthode a été retirée de Chrome et Firefox — cf. {{bug(1270740)}} pour plus d'informations et les raisons associées.</strong></dd>
-</dl>
-
-<h2 id="Notes_d'utilisation">Notes d'utilisation</h2>
-
-<h3 id="Obtention_d'un_objet_élément_de_formulaire">Obtention d'un objet élément de formulaire</h3>
-
-<p>Pour obtenir un objet <code>HTMLFormElement</code>, vous pouvez utiliser un <a href="/fr/docs/Web/CSS/S%C3%A9lecteurs_CSS">sélecteur CSS</a> avec {{domxref("ParentNode.querySelector", "querySelector()")}}  ou vous pouvez obtenir une liste de tous les formulaires du document utilisant sa propriété {{domxref("Document.forms", "forms")}}.</p>
-
-<p>{{domxref("Document.forms")}} renvoie un tableau des objets <code>HTMLFormElement</code> listant chacun des formulaires de la page. Vous pouvez utiliser alors l'une des syntaxes suivantes pour obtenir un formulaire individuel :</p>
-
-<dl>
- <dt><code>document.forms[<em>index</em>]</code></dt>
- <dd>renvoie le formulaire à l'<code>index</code> spécifié dans le tableau du formulaire.</dd>
- <dt><code>document.forms[<em>id</em>]</code></dt>
- <dd>renvoie le formulaire dont l'ID (<em>identifiant</em>) est <code>id</code> .</dd>
- <dt><code>document.forms[<em>name</em>]</code></dt>
- <dd>renvoie le formulaire dont la valeur d'attribut de {{domxref("Element.name", "name")}} est <code>name</code>.</dd>
-</dl>
-
-<h3 id="Accès_aux_éléments_du_formulaire">Accès aux éléments du formulaire</h3>
-
-<p>Vous pouvez accéder à la liste des éléments contenant des données dans le formulaire en examinant la propriété {{domxref ("HTMLFormElement.elements", "elements")}}. Ceci retourne une {{domxref ("HTMLFormControlsCollection")}} listant tous les éléments d'entrée de données utilisateur du formulaire, aussi bien ceux qui sont des descendants du <code>&lt;form&gt;</code> que ceux déclarés membres du formulaire par leurs attributs.</p>
-
-<h3 id="Éléments_considérés_comme_des_contrôles_de_formulaire">Éléments considérés comme des contrôles de formulaire</h3>
-
-<p>Les éléments qui sont inclus par <code>HTMLFormElement.elements</code> et  <code>HTMLFormElement.length</code> sont :</p>
-
-<ul>
- <li>{{HTMLElement("button")}} (<em>bouton</em>)</li>
- <li>{{HTMLElement("fieldset")}} (<em>champ</em>s)</li>
- <li>{{HTMLElement("input")}} (<em>entrée</em>) (à l'exception de ceux dont {{htmlattrxref("type", "input")}} est <code>"image"</code> omis pour des raisons historiques)</li>
- <li>{{HTMLElement("object")}} (<em>objet</em>)</li>
- <li>{{HTMLElement("output")}} (<em>sortie</em>)</li>
- <li>{{HTMLElement("select")}} (<em>sélection</em>)</li>
- <li>{{HTMLElement("textarea")}} (<em>zone de texte</em>)</li>
-</ul>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Crée un nouvel élément de formulaire, modifie ses attributs et l'envoie :</p>
-
-<pre class="brush: js">var f = document.createElement("form"); // On crée un formulaire
+{{APIRef("HTML DOM")}}
+
+L'interface **`HTMLFormElement`** représente un élément  {{HTMLElement("form")}} dans le DOM ; il peut être utilisé pour accéder et, dans quelques cas, modifier l'aspect du formulaire, ainsi que pour accéder à ses éléments composants.
+
+{{InheritanceDiagram(600,120)}}
+
+## Propriétés
+
+_Cette interface hérite aussi des propriétés de son parent {{domxref("HTMLElement")}}._
+
+- {{domxref("HTMLFormElement.elements")}}{{ReadOnlyInline}}
+  - : Un élément {{domxref("HTMLFormControlsCollection")}} regroupant les différents contrôles associés à ce formulaire.
+- {{domxref("HTMLFormElement.length")}}{{ReadOnlyInline}}
+  - : Une valeur de type `long` indiquant le nombre de contrôles dans le formulaire.
+- {{domxref("HTMLFormElement.name")}}
+  - : Une chaîne {{domxref("DOMString")}} indiquant la valeur de l'attribut HTML {{htmlattrxref("name", "form")}} pour ce formulaire et qui correspond au nom du formulaire.
+- {{domxref("HTMLFormElement.method")}}
+  - : Une chaîne {{domxref("DOMString")}} indiquant la valeur de l'attribut HTML {{htmlattrxref("method", "form")}} pour ce formulaire et qui correspond à la méthode HTTP utilisée pour envoyer le formulaires. Seules certaines valeurs peuvent être utilisées avec cette propriété.
+- {{domxref("HTMLFormElement.target")}}
+  - : Une chaîne {{domxref("DOMString")}} indiquant la valeur de l'attribut HTML {{htmlattrxref("target", "form")}} pour ce formulaire et qui indique l'emplacement où seront affichées les résultats après envoi du formulaire.
+- {{domxref("HTMLFormElement.action")}}
+  - : Une chaîne {{domxref("DOMString")}} indiquant la valeur de l'attribut HTML {{htmlattrxref("action", "form")}} pour ce formulaire et qui contient l'URI d'un programme traitant les informations transmises via le formulaire.
+- {{domxref("HTMLFormElement.encoding")}} ou {{domxref("HTMLFormElement.enctype")}}
+  - : Une chaîne {{domxref("DOMString")}} indiquant la valeur de l'attribut HTML {{htmlattrxref("enctype", "form")}} pour ce formulaire et qui correspond au type de contenu utilisé pour transmettre les données du formulaire vers le serveur. Seules certaines valeurs peuvent être utilisées pour cette propriété. Les deux noms indiqués pour la méthode sont synonymes.
+- {{domxref("HTMLFormElement.acceptCharset")}}
+  - : Une chaîne {{domxref("DOMString")}} indiquant la valeur de l'attribut HTML {{htmlattrxref("accept-charset", "form")}} pour ce formulaire et qui correspond au jeu de caractères / à l'encodage pris en charge par le serveur.
+- {{domxref("HTMLFormElement.autocomplete")}}
+  - : Une chaîne {{domxref("DOMString")}} indiquant la valeur de l'attribut HTML {{htmlattrxref("autocomplete", "form")}} pour ce formulaire et qui indique si les contrôles du formulaire sont automatiquement renseignés par le navigateur.
+- {{domxref("HTMLFormElement.noValidate")}}
+  - : Un booléen indiquant la valeur de l'attribut HTML {{htmlattrxref("novalidate", "form")}} pour ce formulaire et qui indique si le formulaire ne devrait pas être validé.
+
+Les champs de saisie nommés sont ajoutés comme propriétés sur leurs formulaires associés. Ces propriétés peuvent surcharger les propriétés natives si elles utilisent le même nom ! Par exemple, un formulaire disposant d'un {{HTMLElement("&lt;input&gt;")}} nommé `action` surchargera la propriété native `action` et tout appel renverra le champ `input` plutôt que la valeur de l'attribut HTML {{htmlattrxref("action", "form")}}.
+
+## Méthodes
+
+_Cette interface hérite aussi des méthodes de son parent {{domxref("HTMLElement")}}._
+
+- {{domxref("HTMLFormElement.submit()")}}
+  - : soumet le formulaire au serveur.
+- {{domxref("HTMLFormElement.reset()")}}
+  - : redéfinit le formulaire à son état initial.
+- {{domxref("HTMLFormElement.checkValidity()")}}
+  - : renvoie `true` si les contrôles du formulaire sont soumis à des contraintes de validation et les respectent. Elle renvoie `false` si certains contrôles ne respectent pas leurs contraintes. Elle déclenche un évènement {{event("invalid")}} pour chaque contrôle qui ne respecte pas ses contraintes. De tels contrôles sont considérés invalides si l'évènement n'est pas annulé. C'est au développeur de choisir comment réagir face à la valeur `false` produite par cette méthode.
+- {{domxref("HTMLFormElement.reportValidity()")}}
+  - : renvoie `true` si les contrôles du formulaire respectent leurs contraintes de validation. Lorsque `false` est renvoyé, des évènements annulables {{Event("invalid")}} sont déclenchés pour chaque contrôle invalide et les problèmes de validation sont rapportés à l'utilisateur.
+- {{domxref("HTMLFormElement.requestAutocomplete()")}} {{obsolete_inline}}
+  - : déclenche une interface native du navigateur afin d'aider les utilisateurs à remplir les champs pour lesquels [la valeur nommée du champ à remplissage automatique](https://html.spec.whatwg.org/#autofill-field-name) ne vaut pas `off` ou `on`. Le formulaire reçoit un évènement lorsque l'utilisateur a fini d'intéragir avec l'interface, l'événement sera {{event("autocomplete")}} si les champs ont bien été remplis ou {{event("autocompleteerror")}} s'il y a eu un problème. **Cette méthode a été retirée de Chrome et Firefox — cf. {{bug(1270740)}} pour plus d'informations et les raisons associées.**
+
+## Notes d'utilisation
+
+### Obtention d'un objet élément de formulaire
+
+Pour obtenir un objet `HTMLFormElement`, vous pouvez utiliser un [sélecteur CSS](/fr/docs/Web/CSS/S%C3%A9lecteurs_CSS) avec {{domxref("ParentNode.querySelector", "querySelector()")}}  ou vous pouvez obtenir une liste de tous les formulaires du document utilisant sa propriété {{domxref("Document.forms", "forms")}}.
+
+{{domxref("Document.forms")}} renvoie un tableau des objets `HTMLFormElement` listant chacun des formulaires de la page. Vous pouvez utiliser alors l'une des syntaxes suivantes pour obtenir un formulaire individuel :
+
+- `document.forms[index]`
+  - : renvoie le formulaire à l'`index` spécifié dans le tableau du formulaire.
+- `document.forms[id]`
+  - : renvoie le formulaire dont l'ID (_identifiant_) est `id` .
+- `document.forms[name]`
+  - : renvoie le formulaire dont la valeur d'attribut de {{domxref("Element.name", "name")}} est `name`.
+
+### Accès aux éléments du formulaire
+
+Vous pouvez accéder à la liste des éléments contenant des données dans le formulaire en examinant la propriété {{domxref ("HTMLFormElement.elements", "elements")}}. Ceci retourne une {{domxref ("HTMLFormControlsCollection")}} listant tous les éléments d'entrée de données utilisateur du formulaire, aussi bien ceux qui sont des descendants du `<form>` que ceux déclarés membres du formulaire par leurs attributs.
+
+### Éléments considérés comme des contrôles de formulaire
+
+Les éléments qui sont inclus par `HTMLFormElement.elements` et  `HTMLFormElement.length` sont :
+
+- {{HTMLElement("button")}} (_bouton_)
+- {{HTMLElement("fieldset")}} (*champ*s)
+- {{HTMLElement("input")}} (_entrée_) (à l'exception de ceux dont {{htmlattrxref("type", "input")}} est `"image"` omis pour des raisons historiques)
+- {{HTMLElement("object")}} (_objet_)
+- {{HTMLElement("output")}} (_sortie_)
+- {{HTMLElement("select")}} (_sélection_)
+- {{HTMLElement("textarea")}} (_zone de texte_)
+
+## Exemples
+
+Crée un nouvel élément de formulaire, modifie ses attributs et l'envoie :
+
+```js
+var f = document.createElement("form"); // On crée un formulaire
 document.body.appendChild(f);           // On l'ajoute au corps du document
 f.action = "/cgi-bin/some.cgi";         // On y ajoute des attributs action et method
 f.method = "POST"
 f.submit();                             // On appelle la méhtode submit pour l'envoyer
-</pre>
+```
 
-<p>Extrait des informations d'un élément de formulaire et définit quelques uns de ses attributs :</p>
+Extrait des informations d'un élément de formulaire et définit quelques uns de ses attributs :
 
-<pre class="brush: html">&lt;form name="formA" action="/cgi-bin/test" method="post"&gt;
- &lt;p&gt;Appuyez sur "Info" pour les détails du formulaire, ou "Définir" pour modifier ces détails.&lt;/p&gt;
- &lt;p&gt;
-  &lt;button type="button" onclick="getFormInfo();"&gt;Info&lt;/button&gt;
-  &lt;button type="button" onclick="setFormInfo(this.form);"&gt;Set&lt;/button&gt;
-  &lt;button type="reset"&gt;Reset&lt;/button&gt;
- &lt;/p&gt;
+```html
+<form name="formA" action="/cgi-bin/test" method="post">
+ <p>Appuyez sur "Info" pour les détails du formulaire, ou "Définir" pour modifier ces détails.</p>
+ <p>
+  <button type="button" onclick="getFormInfo();">Info</button>
+  <button type="button" onclick="setFormInfo(this.form);">Set</button>
+  <button type="reset">Reset</button>
+ </p>
 
- &lt;textarea id="form-info" rows="15" cols="20"&gt;&lt;/textarea&gt;
-&lt;/form&gt;
+ <textarea id="form-info" rows="15" cols="20"></textarea>
+</form>
 
-&lt;script&gt;
+<script>
   function getFormInfo(){
     // Obtenir une référence au formulaire par son nom
     var f = document.forms["formA"];
@@ -130,7 +124,7 @@ f.submit();                             // On appelle la méhtode submit pour l'
     // Itérer sur les propriétés en les transformant en une chaîne que nous pouvons afficher à l'utilisateur
     var info = properties.reduce(function(property) { return property + ": " + f[property] }, "").join("\n");
 
-    // Définir les &lt;textarea&gt; du formulaire pour en afficher les propriétés
+    // Définir les <textarea> du formulaire pour en afficher les propriétés
     document.forms["formA"].elements['form-info'].value = info;
   }
 
@@ -138,86 +132,62 @@ f.submit();                             // On appelle la méhtode submit pour l'
     f.action = "a-different-url.cgi";
     f.name   = "a-different-name";
   }
-&lt;/script&gt;</pre>
-
-<p>Envoi d'un formulaire dans une nouvelle fenêtre :</p>
-
-<pre class="brush: html">&lt;!doctype html&gt;
-&lt;html&gt;
-&lt;head&gt;
-&lt;meta charset="utf-8"&gt;
-&lt;title&gt;Example new-window form submission&lt;/title&gt;
-&lt;/head&gt;
-&lt;body&gt;
-
-&lt;form action="test.php" target="_blank"&gt;
-  &lt;p&gt;&lt;label&gt;First name: &lt;input type="text" name="firstname"&gt;&lt;/label&gt;&lt;/p&gt;
-  &lt;p&gt;&lt;label&gt;Last name: &lt;input type="text" name="lastname"&gt;&lt;/label&gt;&lt;/p&gt;
-  &lt;p&gt;&lt;label&gt;&lt;input type="password" name="pwd"&gt;&lt;/label&gt;&lt;/p&gt;
-
-  &lt;fieldset&gt;
-   &lt;legend&gt;Pet preference&lt;/legend&gt;
-    &lt;p&gt;&lt;label&gt;&lt;input type="radio" name="pet" value="cat"&gt; Cat&lt;/label&gt;&lt;/p&gt;
-    &lt;p&gt;&lt;label&gt;&lt;input type="radio" name="pet" value="dog"&gt; Dog&lt;/label&gt;&lt;/p&gt;
-  &lt;/fieldset&gt;
-
-  &lt;fieldset&gt;
-    &lt;legend&gt;Owned vehicles&lt;/legend&gt;
-
-    &lt;p&gt;&lt;label&gt;&lt;input type="checkbox" name="vehicle" value="Bike"&gt;I have a bike&lt;/label&gt;&lt;/p&gt;
-    &lt;p&gt;&lt;label&gt;&lt;input type="checkbox" name="vehicle" value="Car"&gt;I have a car&lt;/label&gt;&lt;/p&gt;
-  &lt;/fieldset&gt;
-
-  &lt;p&gt;&lt;button&gt;Submit&lt;/button&gt;&lt;/p&gt;
-&lt;/form&gt;
-
-&lt;/body&gt;
-&lt;/html&gt;</pre>
-
-<h3 id="Envoi_de_formulaires_et_téléchargement_de_fichiers_en_utilisant_XMLHttpRequest">Envoi de formulaires et téléchargement de fichiers en utilisant <code>XMLHttpRequest</code></h3>
-
-<p>Vous pouvez consulter <a href="/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest#Submitting_forms_and_uploading_files">ce paragraphe</a> si vous souhaitez en savoir plus pour sérialiser et envoyer un formulaire grâce à l'API {{domxref("XMLHttpRequest")}}.</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', "forms.html#the-form-element", "HTMLFormElement")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Ajout de la méthode <code>requestAutocomplete()</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', "forms.html#the-form-element", "HTMLFormElement")}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Les propriétés de l'élément renvoient un élément {{domxref("HTMLFormControlsCollection")}} plutôt qu'un {{domxref("HTMLCollection")}} (changement principalement technique). Ajout de la méthode <code>checkValidity()</code>. Ajout des propriétés <code>autocomplete</code>, <code>noValidate</code> et <code>encoding</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 HTML', 'html.html#ID-40002357', 'HTMLFormElement')}}</td>
-   <td>{{Spec2('DOM2 HTML')}}</td>
-   <td>Aucune modification.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM1', 'level-one-html.html#ID-40002357', 'HTMLFormElement')}}</td>
-   <td>{{Spec2('DOM1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-
-
-<p>{{Compat("api.HTMLFormElement")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>L'élément HTML qui implémente cette interface {{HTMLElement("form")}}.</li>
-</ul>
+</script>
+```
+
+Envoi d'un formulaire dans une nouvelle fenêtre :
+
+```html
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Example new-window form submission</title>
+</head>
+<body>
+
+<form action="test.php" target="_blank">
+  <p><label>First name: <input type="text" name="firstname"></label></p>
+  <p><label>Last name: <input type="text" name="lastname"></label></p>
+  <p><label><input type="password" name="pwd"></label></p>
+
+  <fieldset>
+   <legend>Pet preference</legend>
+    <p><label><input type="radio" name="pet" value="cat"> Cat</label></p>
+    <p><label><input type="radio" name="pet" value="dog"> Dog</label></p>
+  </fieldset>
+
+  <fieldset>
+    <legend>Owned vehicles</legend>
+
+    <p><label><input type="checkbox" name="vehicle" value="Bike">I have a bike</label></p>
+    <p><label><input type="checkbox" name="vehicle" value="Car">I have a car</label></p>
+  </fieldset>
+
+  <p><button>Submit</button></p>
+</form>
+
+</body>
+</html>
+```
+
+### Envoi de formulaires et téléchargement de fichiers en utilisant `XMLHttpRequest`
+
+Vous pouvez consulter [ce paragraphe](/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest#Submitting_forms_and_uploading_files) si vous souhaitez en savoir plus pour sérialiser et envoyer un formulaire grâce à l'API {{domxref("XMLHttpRequest")}}.
+
+## Spécifications
+
+| Spécification                                                                                            | État                             | Commentaires                                                                                                                                                                                                                                                                                                   |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('HTML WHATWG', "forms.html#the-form-element", "HTMLFormElement")}} | {{Spec2('HTML WHATWG')}} | Ajout de la méthode `requestAutocomplete()`.                                                                                                                                                                                                                                                                   |
+| {{SpecName('HTML5 W3C', "forms.html#the-form-element", "HTMLFormElement")}}     | {{Spec2('HTML5 W3C')}}     | Les propriétés de l'élément renvoient un élément {{domxref("HTMLFormControlsCollection")}} plutôt qu'un {{domxref("HTMLCollection")}} (changement principalement technique). Ajout de la méthode `checkValidity()`. Ajout des propriétés `autocomplete`, `noValidate` et `encoding`. |
+| {{SpecName('DOM2 HTML', 'html.html#ID-40002357', 'HTMLFormElement')}}             | {{Spec2('DOM2 HTML')}}     | Aucune modification.                                                                                                                                                                                                                                                                                           |
+| {{SpecName('DOM1', 'level-one-html.html#ID-40002357', 'HTMLFormElement')}}     | {{Spec2('DOM1')}}         | Définition initiale.                                                                                                                                                                                                                                                                                           |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.HTMLFormElement")}}
+
+## Voir aussi
+
+- L'élément HTML qui implémente cette interface {{HTMLElement("form")}}.
diff --git a/files/fr/web/api/htmlformelement/length/index.md b/files/fr/web/api/htmlformelement/length/index.md
index 93fb19ff7c..1f497f191c 100644
--- a/files/fr/web/api/htmlformelement/length/index.md
+++ b/files/fr/web/api/htmlformelement/length/index.md
@@ -3,27 +3,23 @@ title: HTMLFormElement.length
 slug: Web/API/HTMLFormElement/length
 translation_of: Web/API/HTMLFormElement/length
 ---
-<div>
-<div>{{APIRef("HTML DOM")}}</div>
-</div>
+{{APIRef("HTML DOM")}}
 
-<p>La propriété en lecture seule <code><strong>HTMLFormElement.length</strong></code> retourne le nombre de contrôles présents dans l'élément {{HTMLElement("Form")}}.</p>
+La propriété en lecture seule **`HTMLFormElement.length`** retourne le nombre de contrôles présents dans l'élément {{HTMLElement("Form")}}.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var>integer</var> = form.length
-</pre>
+    integer = form.length
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush:js">if (document.getElementById("form1").length &gt; 1) {
+```js
+if (document.getElementById("form1").length > 1) {
   // more than one form control here
 }
-</pre>
+```
 
-<h2 id="Specifications">Spécifications</h2>
+## Spécifications
 
-<ul>
- <li><a href="http://www.w3.org/TR/html5/forms.html#dom-form-length">HTML 5, Section 4.10.3, The form Element</a></li>
- <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#HTML-HTMLFormElement-length">DOM Level 2: length</a></li>
-</ul>
+- [HTML 5, Section 4.10.3, The form Element](http://www.w3.org/TR/html5/forms.html#dom-form-length)
+- [DOM Level 2: length](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#HTML-HTMLFormElement-length)
diff --git a/files/fr/web/api/htmlformelement/method/index.md b/files/fr/web/api/htmlformelement/method/index.md
index 2b6d2ab603..43eaa9c50a 100644
--- a/files/fr/web/api/htmlformelement/method/index.md
+++ b/files/fr/web/api/htmlformelement/method/index.md
@@ -3,23 +3,21 @@ title: HTMLFormElement.method
 slug: Web/API/HTMLFormElement/method
 translation_of: Web/API/HTMLFormElement/method
 ---
-<div>{{APIRef("HTML DOM")}}</div>
+{{APIRef("HTML DOM")}}
 
-<p>La propriété <code><strong>HTMLFormElement.method</strong></code> représente la méthode HTTP utilisée pour soumettre un formulaire.</p>
+La propriété **`HTMLFormElement.method`** représente la méthode HTTP utilisée pour soumettre un formulaire.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="eval"><em>string</em> = form.method
-form.method = <em>string</em>
-</pre>
+    string = form.method
+    form.method = string
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="eval">document.forms["myform"].method = "post";
-</pre>
+    document.forms["myform"].method = "post";
 
-<h2 id="Specification">Spécification</h2>
+## Spécification
 
-<p><a href="http://www.w3.org/TR/html5/association-of-controls-and-forms.html#dom-fs-method">HTML 5, Section 4.10.19.6, Form submission</a></p>
+[HTML 5, Section 4.10.19.6, Form submission](http://www.w3.org/TR/html5/association-of-controls-and-forms.html#dom-fs-method)
 
-<p><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-82545539">DOM Level 2 HTML: method</a></p>
+[DOM Level 2 HTML: method](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-82545539)
diff --git a/files/fr/web/api/htmlformelement/name/index.md b/files/fr/web/api/htmlformelement/name/index.md
index 50fa4fe6b1..3256e5be65 100644
--- a/files/fr/web/api/htmlformelement/name/index.md
+++ b/files/fr/web/api/htmlformelement/name/index.md
@@ -3,30 +3,28 @@ title: HTMLFormElement.name
 slug: Web/API/HTMLFormElement/name
 translation_of: Web/API/HTMLFormElement/name
 ---
-<div>
-<div>{{APIRef("HTML DOM")}}</div>
-</div>
+{{APIRef("HTML DOM")}}
 
-<p>La propriété <code>HTMLFormElement.name</code> représente le nom de l'élément <code>form</code> sous la forme d'une chaîne de caratères.</p>
+La propriété `HTMLFormElement.name` représente le nom de l'élément `form` sous la forme d'une chaîne de caratères.
 
-<p>Si votre {{HTMLElement("Form")}} contient un élément appelé <em>name</em>, alors ce dernier redéfinit la propriété <code>form.name</code>, afin que vous ne puissiez y accéder. Internet Explorer (IE) bloque la définition ou la modification du nom d'un élément créé avec <code>createElement()</code> à partir de la propriété <code>name</code>.</p>
+Si votre {{HTMLElement("Form")}} contient un élément appelé *name*, alors ce dernier redéfinit la propriété `form.name`, afin que vous ne puissiez y accéder. Internet Explorer (IE) bloque la définition ou la modification du nom d'un élément créé avec `createElement()` à partir de la propriété `name`.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>string</em> = form.name
-form.name = <em>string</em></pre>
+    string = form.name
+    form.name = string
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush:js">var form1name = document.getElementById("form1").name;
+```js
+var form1name = document.getElementById("form1").name;
 
 if (form1name != document.form.form1) {
    // browser doesn't support this form of reference
-}</pre>
+}
+```
 
-<h2 id="Specification">Spécification</h2>
+## Spécification
 
-<ul>
- <li><a href="http://www.w3.org/TR/html5/forms.html#dom-form-name">HTML 5, Section 4.10.3, The form Element</a></li>
- <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-22051454">DOM Level 2 HTML: name</a></li>
-</ul>
+- [HTML 5, Section 4.10.3, The form Element](http://www.w3.org/TR/html5/forms.html#dom-form-name)
+- [DOM Level 2 HTML: name](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-22051454)
diff --git a/files/fr/web/api/htmlformelement/reportvalidity/index.md b/files/fr/web/api/htmlformelement/reportvalidity/index.md
index c41fd7c61d..d54f17148d 100644
--- a/files/fr/web/api/htmlformelement/reportvalidity/index.md
+++ b/files/fr/web/api/htmlformelement/reportvalidity/index.md
@@ -6,53 +6,37 @@ tags:
   - Méthode
 translation_of: Web/API/HTMLFormElement/reportValidity
 ---
-<div>{{APIRef("HTML DOM")}}</div>
+{{APIRef("HTML DOM")}}
 
-<p>La méthode  <strong><code>HTMLFormElement.reportValidity()</code></strong> renvoie true si les contrôles enfants de l'élément répondent à leurs contraintes de validation. Lorsque la valeur <code>false</code> est renvoyée, ,  les événements <code><a href="/en-US/docs/Web/Events/invalid">invalid</a></code> annulables sont déclenchés pour chaque enfant non valide et les problèmes de validation sont signalés à l'utilisateur. .</p>
+La méthode  **`HTMLFormElement.reportValidity()`** renvoie true si les contrôles enfants de l'élément répondent à leurs contraintes de validation. Lorsque la valeur `false` est renvoyée, ,  les événements [`invalid`](/en-US/docs/Web/Events/invalid) annulables sont déclenchés pour chaque enfant non valide et les problèmes de validation sont signalés à l'utilisateur. .
 
-<h2 id="Syntax">Syntax</h2>
+## Syntax
 
-<pre class="syntaxbox"><em>HTMLFormElement</em>.reportValidity()
-</pre>
+    HTMLFormElement.reportValidity()
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+### Valeur de retour
 
-<p>{{domxref("Boolean")}}</p>
+{{domxref("Boolean")}}
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">document.forms['myform'].addEventListener('invalid', function() {
+```js
+document.forms['myform'].addEventListener('invalid', function() {
   // Optional response here
 }, false);
 
 document.forms['myform'].addEventListener('submit', function() {
   document.forms['myform'].reportValidity();
-}, false);</pre>
-
-<h2 id="Specifications">Specifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Commentaire</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("HTML WHATWG", "forms.html#dom-cva-reportvalidity", "HTMLFormElement.reportValidity()")}}</td>
-   <td>{{Spec2("HTML WHATWG")}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML5.1", "semantics.html#the-constraint-validation-api", "HTMLFormElement.reportValidity()")}}</td>
-   <td>{{Spec2("HTML5.1")}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_du_navigateur">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.HTMLFormElement.reportValidity")}}</p>
+}, false);
+```
+
+## Specifications
+
+| Specification                                                                                                                                    | Status                           | Commentaire         |
+| ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------- |
+| {{SpecName("HTML WHATWG", "forms.html#dom-cva-reportvalidity", "HTMLFormElement.reportValidity()")}}             | {{Spec2("HTML WHATWG")}} |                     |
+| {{SpecName("HTML5.1", "semantics.html#the-constraint-validation-api", "HTMLFormElement.reportValidity()")}} | {{Spec2("HTML5.1")}}     | Définition initiale |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.HTMLFormElement.reportValidity")}}
diff --git a/files/fr/web/api/htmlformelement/reset/index.md b/files/fr/web/api/htmlformelement/reset/index.md
index 6d43514959..6ca27fcff4 100644
--- a/files/fr/web/api/htmlformelement/reset/index.md
+++ b/files/fr/web/api/htmlformelement/reset/index.md
@@ -9,20 +9,18 @@ tags:
   - Reference
 translation_of: Web/API/HTMLFormElement/reset
 ---
-<div>{{APIRef("HTML DOM")}}</div>
+{{APIRef("HTML DOM")}}
 
-<p>La méthode <strong><code>HTMLFormElement.reset()</code></strong> restaure les valeurs par défaut des éléments du formulaire. Cette méthode fait la même chose que lorsqu'on clique sur un bouton de type <code>reset</code>.</p>
+La méthode **`HTMLFormElement.reset()`** restaure les valeurs par défaut des éléments du formulaire. Cette méthode fait la même chose que lorsqu'on clique sur un bouton de type `reset`.
 
-<p>Si un élément du formulaire (comme un bouton reset par exemple) a un <code>name</code> ou <code>id</code> valant <var>reset</var>, celui-ci remplacera la méthode reset du formulaire. Les attributs des éléments, comme <code>disabled</code>, ne sont pas réinitialisés.</p>
+Si un élément du formulaire (comme un bouton reset par exemple) a un `name` ou `id` valant _reset_, celui-ci remplacera la méthode reset du formulaire. Les attributs des éléments, comme `disabled`, ne sont pas réinitialisés.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="eval"><em>HTMLFormElement</em>.reset()
-</pre>
+    HTMLFormElement.reset()
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="eval">document.getElementById("myform").reset();
-</pre>
+    document.getElementById("myform").reset();
 
-<h2 id="Specification">Spécification</h2>
+## Spécification
diff --git a/files/fr/web/api/htmlformelement/submit/index.md b/files/fr/web/api/htmlformelement/submit/index.md
index 19479867d2..2630092001 100644
--- a/files/fr/web/api/htmlformelement/submit/index.md
+++ b/files/fr/web/api/htmlformelement/submit/index.md
@@ -7,34 +7,32 @@ tags:
   - Méthode
 translation_of: Web/API/HTMLFormElement/submit
 ---
-<div>{{APIRef("HTML DOM")}}</div>
+{{APIRef("HTML DOM")}}
 
-<p>La méthode  <strong><code>HTMLFormElement.submit()</code></strong>  soumet un {{HtmlElement("form")}} donné</p>
+La méthode  **`HTMLFormElement.submit()`**  soumet un {{HtmlElement("form")}} donné
 
-<p>Cette méthode est similaire, mais pas identique, à l’activation du script submit {{HtmlElement ("button")}}. Lors de l'appel direct de cette méthode, cependant:</p>
+Cette méthode est similaire, mais pas identique, à l’activation du script submit {{HtmlElement ("button")}}. Lors de l'appel direct de cette méthode, cependant:
 
-<ul>
- <li>Aucun événement {{event ("submit")}} n'est déclenché. En particulier, le formulaire  </li>
- <li>{{domxref("GlobalEventHandlers.onsubmit", "onsubmit")}}  le gestionnaire d'événement n'est pas exécuté .</li>
- <li><a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">Constraint validation</a> n'est pas déclenché .</li>
-</ul>
+- Aucun événement {{event ("submit")}} n'est déclenché. En particulier, le formulaire
+- {{domxref("GlobalEventHandlers.onsubmit", "onsubmit")}}  le gestionnaire d'événement n'est pas exécuté .
+- [Constraint validation](/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation) n'est pas déclenché .
 
-<p>Si un contrôle de formulaire (tel qu'un  submit bouton ) a un<code>name</code> ou un <code>id</code> de <code>submit</code>, cette méthode masquera la méthode d'envoi du formulaire.</p>
+Si un contrôle de formulaire (tel qu'un  submit bouton ) a un`name` ou un `id` de `submit`, cette méthode masquera la méthode d'envoi du formulaire.
 
-<h2 id="Syntax">Syntax</h2>
+## Syntax
 
-<pre class="syntaxbox"><em>HTMLFormElement</em>.submit()
-</pre>
+    HTMLFormElement.submit()
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">document.forms["myform"].submit();
-</pre>
+```js
+document.forms["myform"].submit();
+```
 
-<h2 id="Specification">Specification</h2>
+## Specification
 
-<p><a href="https://html.spec.whatwg.org/multipage/forms.html#the-form-element">HTML Living standard: The form element</a></p>
+[HTML Living standard: The form element](https://html.spec.whatwg.org/multipage/forms.html#the-form-element)
 
-<h2 id="Compatibilité_du_navigateur">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.HTMLFormElement.submit")}}</p>
+{{Compat("api.HTMLFormElement.submit")}}
diff --git a/files/fr/web/api/htmlformelement/submit_event/index.md b/files/fr/web/api/htmlformelement/submit_event/index.md
index 2e6139eced..397a24e1c0 100644
--- a/files/fr/web/api/htmlformelement/submit_event/index.md
+++ b/files/fr/web/api/htmlformelement/submit_event/index.md
@@ -4,57 +4,30 @@ slug: Web/API/HTMLFormElement/submit_event
 translation_of: Web/API/HTMLFormElement/submit_event
 original_slug: Web/API/HTMLFormElement/submit_event_
 ---
-<p>L’événement <code>submit</code> est émis lorsqu’un formulaire est soumis au serveur.</p>
+L’événement `submit` est émis lorsqu’un formulaire est soumis au serveur.
 
-<p>Notez que l’événement <code>submit</code> se déclenche <strong>uniquement</strong> sur <a href="/fr-FR/docs/Web/HTML/Element/form">l’élement form</a>, et pas sur les éléments <a href="/fr-FR/docs/Web/HTML/Element/button">button</a> ou <a href="/fr/docs/Web/HTML/Element/Input/submit">input submit</a>. (Les formulaires sont soumis, pas les boutons.)</p>
+Notez que l’événement `submit` se déclenche **uniquement** sur [l’élement form](/fr-FR/docs/Web/HTML/Element/form), et pas sur les éléments [button](/fr-FR/docs/Web/HTML/Element/button) ou [input submit](/fr/docs/Web/HTML/Element/Input/submit). (Les formulaires sont soumis, pas les boutons.)
 
-<h2 id="Informations_générales">Informations générales</h2>
+## Informations générales
 
-<dl>
- <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
- <dd style="margin: 0 0 0 120px;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#form-submission-algorithm">HTML5</a></dd>
- <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
- <dd style="margin: 0 0 0 120px;">{{domxref("Event")}}</dd>
- <dt style="float: left; text-align: right; width: 120px;">Bouillonne</dt>
- <dd style="margin: 0 0 0 120px;">Oui (bien que spécifié comme un événement simple qui ne bouillonne pas)</dd>
- <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
- <dd style="margin: 0 0 0 120px;">Oui</dd>
- <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
- <dd style="margin: 0 0 0 120px;">Élément</dd>
- <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
- <dd style="margin: 0 0 0 120px;">Variable (envoie le contenu du formulaire au serveur)</dd>
-</dl>
+- Spécification
+  - : [HTML5](http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#form-submission-algorithm)
+- Interface
+  - : {{domxref("Event")}}
+- Bouillonne
+  - : Oui (bien que spécifié comme un événement simple qui ne bouillonne pas)
+- Annulable
+  - : Oui
+- Cible
+  - : Élément
+- Action par défaut
+  - : Variable (envoie le contenu du formulaire au serveur)
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Propriété</th>
-   <th scope="col">Type</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>target</code> {{readonlyInline}}</td>
-   <td>{{domxref("EventTarget")}}</td>
-   <td>La cible de l’évènement (la cible la plus haute dans l’arbre DOM).</td>
-  </tr>
-  <tr>
-   <td><code>type</code> {{readonlyInline}}</td>
-   <td>{{domxref("DOMString")}}</td>
-   <td>Le type de l’évènement.</td>
-  </tr>
-  <tr>
-   <td><code>bubbles</code> {{readonlyInline}}</td>
-   <td>{{jsxref("Boolean")}}</td>
-   <td>Si l’évènement bouillonne normalement ou non.</td>
-  </tr>
-  <tr>
-   <td><code>cancelable</code> {{readonlyInline}}</td>
-   <td>{{jsxref("Boolean")}}</td>
-   <td>Si l’évènement est annulable ou non.</td>
-  </tr>
- </tbody>
-</table>
+| Propriété                             | Type                                 | Description                                                        |
+| ------------------------------------- | ------------------------------------ | ------------------------------------------------------------------ |
+| `target` {{readonlyInline}}     | {{domxref("EventTarget")}} | La cible de l’évènement (la cible la plus haute dans l’arbre DOM). |
+| `type` {{readonlyInline}}       | {{domxref("DOMString")}}     | Le type de l’évènement.                                            |
+| `bubbles` {{readonlyInline}}    | {{jsxref("Boolean")}}         | Si l’évènement bouillonne normalement ou non.                      |
+| `cancelable` {{readonlyInline}} | {{jsxref("Boolean")}}         | Si l’évènement est annulable ou non.                               |
diff --git a/files/fr/web/api/htmlformelement/target/index.md b/files/fr/web/api/htmlformelement/target/index.md
index 3d7a6002d0..b5c5dcc6c7 100644
--- a/files/fr/web/api/htmlformelement/target/index.md
+++ b/files/fr/web/api/htmlformelement/target/index.md
@@ -3,23 +3,21 @@ title: HTMLFormElement.target
 slug: Web/API/HTMLFormElement/target
 translation_of: Web/API/HTMLFormElement/target
 ---
-<div>{{APIRef("HTML DOM")}}</div>
+{{APIRef("HTML DOM")}}
 
-<p>La propriété <strong><code>HTMLFormElement.target</code></strong> représente la cible de l'action (i.e., le cadre de destination dans lequel produire le résultat).</p>
+La propriété **`HTMLFormElement.target`** représente la cible de l'action (i.e., le cadre de destination dans lequel produire le résultat).
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="eval"><em>string</em> = form.target
-form.target = <em>string</em>
-</pre>
+    string = form.target
+    form.target = string
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="eval">myForm.target = document.frames[1].name;
-</pre>
+    myForm.target = document.frames[1].name;
 
-<h2 id="Specification">Spécification</h2>
+## Spécification
 
-<p><a href="http://www.w3.org/TR/html5/association-of-controls-and-forms.html#dom-fs-method">HTML 5, Section 4.10.19.6, Form submission</a></p>
+[HTML 5, Section 4.10.19.6, Form submission](http://www.w3.org/TR/html5/association-of-controls-and-forms.html#dom-fs-method)
 
-<p><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-6512890">DOM Level 2 HTML: target</a></p>
+[DOM Level 2 HTML: target](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-6512890)
diff --git a/files/fr/web/api/htmlframesetelement/index.md b/files/fr/web/api/htmlframesetelement/index.md
index 6186ebcbf2..b456961500 100644
--- a/files/fr/web/api/htmlframesetelement/index.md
+++ b/files/fr/web/api/htmlframesetelement/index.md
@@ -10,100 +10,70 @@ tags:
   - Reference
 translation_of: Web/API/HTMLFrameSetElement
 ---
-<div>{{APIRef("HTML DOM")}}{{Obsolete_header}}</div>
+{{APIRef("HTML DOM")}}{{Obsolete_header}}
 
-<p>L'interface <strong><code>HTMLFrameSetElement</code></strong> fournit des propriétés spéciales (au-delà de celles de l'interface standard {{domxref("HTMLElement")}} dont elles héritent aussi) pour manipuler les éléments {{HTMLELEment("frameset")}}.</p>
+L'interface **`HTMLFrameSetElement`** fournit des propriétés spéciales (au-delà de celles de l'interface standard {{domxref("HTMLElement")}} dont elles héritent aussi) pour manipuler les éléments {{HTMLELEment("frameset")}}.
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<p><em>Hérite des propriétés de son parent, {{domxref("HTMLElement")}} et de {{domxref("WindowEventHandlers")}}.</em></p>
+_Hérite des propriétés de son parent, {{domxref("HTMLElement")}} et de {{domxref("WindowEventHandlers")}}._
 
-<dl>
- <dt>{{domxref("HTMLFrameSetElement.cols")}} {{obsolete_inline}}</dt>
- <dd>Est un {{domxref("DOMString")}} structuré comme une liste séparée par des virgules spécifiant la largeur de chaque colonne à l'intérieur d'un jeu de cadres.</dd>
- <dt>{{domxref("HTMLFrameSetElement.rows")}} {{obsolete_inline}}</dt>
- <dd>Est un {{domxref("DOMString")}} structuré comme une liste séparée par des virgules spécifiant la hauteur de chaque colonne à l'intérieur d'un jeu de cadres.</dd>
-</dl>
+- {{domxref("HTMLFrameSetElement.cols")}} {{obsolete_inline}}
+  - : Est un {{domxref("DOMString")}} structuré comme une liste séparée par des virgules spécifiant la largeur de chaque colonne à l'intérieur d'un jeu de cadres.
+- {{domxref("HTMLFrameSetElement.rows")}} {{obsolete_inline}}
+  - : Est un {{domxref("DOMString")}} structuré comme une liste séparée par des virgules spécifiant la hauteur de chaque colonne à l'intérieur d'un jeu de cadres.
 
-<h2 id="Méthodes">Méthodes</h2>
+## Méthodes
 
-<p><em>Pas de méthode spécifique; hérite des méthodes de son parent, {{domxref("HTMLElement")}} et de {{domxref("WindowEventHandlers")}}</em><em>.</em></p>
+_Pas de méthode spécifique; hérite des méthodes de son parent, {{domxref("HTMLElement")}} et de {{domxref("WindowEventHandlers")}}\*\*._
 
-<h2 id="Gestionnaires_dévénements">Gestionnaires d'événements</h2>
+## Gestionnaires d'événements
 
-<p><em>Aucun gestionnaire d'événements spécifique; hérite des gestionnairs d'événements de son parent, {{domxref("HTMLElement")}} et de {{domxref("WindowEventHandlers")}}</em><em>.</em></p>
+_Aucun gestionnaire d'événements spécifique; hérite des gestionnairs d'événements de son parent, {{domxref("HTMLElement")}} et de {{domxref("WindowEventHandlers")}}\*\*._
 
-<dl>
- <dt>{{domxref("WindowEventHandlers.onafterprint")}}</dt>
- <dd>Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("afterprint")}} est déclenché.</dd>
- <dt>{{domxref("WindowEventHandlers.onbeforeprint")}}</dt>
- <dd>Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("beforeprint")}} est déclenché.</dd>
- <dt>{{domxref("WindowEventHandlers.onbeforeunload")}}</dt>
- <dd>Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("beforeunload")}} est déclenché.</dd>
- <dt>{{domxref("WindowEventHandlers.onhashchange")}}</dt>
- <dd>Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("hashchange")}} est déclenché.</dd>
- <dt>{{domxref("WindowEventHandlers.onlanguagechange")}} {{experimental_inline}}</dt>
- <dd>Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("languagechange")}} est déclenché.</dd>
- <dt>{{domxref("WindowEventHandlers.onmessage")}}</dt>
- <dd>Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("message")}} est déclenché.</dd>
- <dt>{{domxref("WindowEventHandlers.onoffline")}}</dt>
- <dd>Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("offline")}} est déclenché.</dd>
- <dt>{{domxref("WindowEventHandlers.ononline")}}</dt>
- <dd>Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("online")}} est déclenché.</dd>
- <dt>{{domxref("WindowEventHandlers.onpagehide")}}</dt>
- <dd>Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("pagehide")}} est déclenché.</dd>
- <dt>{{domxref("WindowEventHandlers.onpageshow")}}</dt>
- <dd>Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("pageshow")}} est déclenché.</dd>
- <dt>{{domxref("WindowEventHandlers.onpopstate")}}</dt>
- <dd>Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("popstate")}} est déclenché.</dd>
- <dt>{{domxref("WindowEventHandlers.onresize")}}</dt>
- <dd>Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("resize")}} est déclenché.</dd>
- <dt>{{domxref("WindowEventHandlers.onstorage")}}</dt>
- <dd>Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("storage")}} est déclenché.</dd>
- <dt>{{domxref("WindowEventHandlers.onunload")}}</dt>
- <dd>Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("unload")}} est déclenché.</dd>
-</dl>
+- {{domxref("WindowEventHandlers.onafterprint")}}
+  - : Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("afterprint")}} est déclenché.
+- {{domxref("WindowEventHandlers.onbeforeprint")}}
+  - : Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("beforeprint")}} est déclenché.
+- {{domxref("WindowEventHandlers.onbeforeunload")}}
+  - : Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("beforeunload")}} est déclenché.
+- {{domxref("WindowEventHandlers.onhashchange")}}
+  - : Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("hashchange")}} est déclenché.
+- {{domxref("WindowEventHandlers.onlanguagechange")}} {{experimental_inline}}
+  - : Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("languagechange")}} est déclenché.
+- {{domxref("WindowEventHandlers.onmessage")}}
+  - : Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("message")}} est déclenché.
+- {{domxref("WindowEventHandlers.onoffline")}}
+  - : Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("offline")}} est déclenché.
+- {{domxref("WindowEventHandlers.ononline")}}
+  - : Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("online")}} est déclenché.
+- {{domxref("WindowEventHandlers.onpagehide")}}
+  - : Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("pagehide")}} est déclenché.
+- {{domxref("WindowEventHandlers.onpageshow")}}
+  - : Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("pageshow")}} est déclenché.
+- {{domxref("WindowEventHandlers.onpopstate")}}
+  - : Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("popstate")}} est déclenché.
+- {{domxref("WindowEventHandlers.onresize")}}
+  - : Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("resize")}} est déclenché.
+- {{domxref("WindowEventHandlers.onstorage")}}
+  - : Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("storage")}} est déclenché.
+- {{domxref("WindowEventHandlers.onunload")}}
+  - : Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("unload")}} est déclenché.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "#htmlframesetelement", "HTMLFrameSetElement")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>À partir de l'instantané {{SpecName('HTML5 W3C')}}, l'interface {{domxref("WindowEventHandlers")}} a maintenant une propriété <code>onlanguagechange</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', "obsolete.html#htmlframesetelement", "HTMLFrameSetElement")}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Instantané d'un précédent {{SpecName('HTML WHATWG')}}<br>
-    Les cadres sont désormais obsolètes. Implémente {{domxref("WindowEventHandlers")}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 HTML', 'html.html#ID-ID-43829095', 'HTMLBodyElement')}}</td>
-   <td>{{Spec2('DOM2 HTML')}}</td>
-   <td>Aucun changement par rapport à {{SpecName("DOM1")}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM1', 'level-one-html.html#ID-43829095', 'HTMLBodyElement')}}</td>
-   <td>{{Spec2('DOM1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                    | Statut                           | Commentaire                                                                                                                                                        |
+| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| {{SpecName('HTML WHATWG', "#htmlframesetelement", "HTMLFrameSetElement")}}             | {{Spec2('HTML WHATWG')}} | À partir de l'instantané {{SpecName('HTML5 W3C')}}, l'interface {{domxref("WindowEventHandlers")}} a maintenant une propriété `onlanguagechange`. |
+| {{SpecName('HTML5 W3C', "obsolete.html#htmlframesetelement", "HTMLFrameSetElement")}} | {{Spec2('HTML5 W3C')}}     | Instantané d'un précédent {{SpecName('HTML WHATWG')}} Les cadres sont désormais obsolètes. Implémente {{domxref("WindowEventHandlers")}}.       |
+| {{SpecName('DOM2 HTML', 'html.html#ID-ID-43829095', 'HTMLBodyElement')}}                 | {{Spec2('DOM2 HTML')}}     | Aucun changement par rapport à {{SpecName("DOM1")}}.                                                                                                       |
+| {{SpecName('DOM1', 'level-one-html.html#ID-43829095', 'HTMLBodyElement')}}             | {{Spec2('DOM1')}}         | Définition initiale.                                                                                                                                               |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.HTMLFrameSetElement")}}</p>
+{{Compat("api.HTMLFrameSetElement")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>Élément HTML implémentant cette interface : {{HTMLElement("frameset")}}</li>
- <li>L'équivalent de cet élément en dehors des cadres : {{domxref("HTMLBodyElement")}}.</li>
-</ul>
+- Élément HTML implémentant cette interface : {{HTMLElement("frameset")}}
+- L'équivalent de cet élément en dehors des cadres : {{domxref("HTMLBodyElement")}}.
diff --git a/files/fr/web/api/htmliframeelement/allowpaymentrequest/index.md b/files/fr/web/api/htmliframeelement/allowpaymentrequest/index.md
index 996b69b362..220e31bbbe 100644
--- a/files/fr/web/api/htmliframeelement/allowpaymentrequest/index.md
+++ b/files/fr/web/api/htmliframeelement/allowpaymentrequest/index.md
@@ -1,27 +1,27 @@
 ---
 title: HTMLIFrameElement.allowPaymentRequest
 slug: Web/API/HTMLIFrameElement/allowPaymentRequest
+translation_of: HTMLIFrameElement.allowPaymentRequest
 browser-compat: api.HTMLIFrameElement.allowPaymentRequest
-translation_of: 'HTMLIFrameElement.allowPaymentRequest'
 ---
-<p>{{APIRef("HTML DOM")}}{{deprecated_header}}{{non-standard_header}}</p>
+{{APIRef("HTML DOM")}}{{deprecated_header}}{{non-standard_header}}
 
-<p>La propriété <strong><code>allowPaymentRequest</code></strong> de l'interface {{domxref("HTMLIFrameElement")}} retourne une valeur booléenne indiquant si la <a href="/fr/docs/Web/API/Payment_Request_API"><i lang="en">Payment Request API</i></a> peut être invoquée sur une <i lang="en">iframe</i> utilisant une origine tierce.</p>
+La propriété **`allowPaymentRequest`** de l'interface {{domxref("HTMLIFrameElement")}} retourne une valeur booléenne indiquant si la [<i lang="en">Payment Request API</i>](/fr/docs/Web/API/Payment_Request_API) peut être invoquée sur une <i lang="en">iframe</i> utilisant une origine tierce.
 
-<h2 id="syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">var allow = htmlIFrameElement.allowPaymentRequest</pre>
+```js
+var allow = htmlIFrameElement.allowPaymentRequest
+```
 
-<h3 id="value">Valeur</h3>
+### Valeur
 
-<p>Une valeur booléenne.</p>
+Une valeur booléenne.
 
-<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/Payment_Request_API">Payment Request API</a> </li>
-</ul>
+- [Payment Request API](/fr/docs/Web/API/Payment_Request_API)
diff --git a/files/fr/web/api/htmliframeelement/contentdocument/index.md b/files/fr/web/api/htmliframeelement/contentdocument/index.md
index 5580e0abc8..178b02027f 100644
--- a/files/fr/web/api/htmliframeelement/contentdocument/index.md
+++ b/files/fr/web/api/htmliframeelement/contentdocument/index.md
@@ -1,22 +1,24 @@
 ---
 title: HTMLIFrameElement.contentDocument
 slug: Web/API/HTMLIFrameElement/contentDocument
+translation_of: HTMLIFrameElement.contentDocument
 browser-compat: api.HTMLIFrameElement.contentDocument
-translation_of: 'HTMLIFrameElement.contentDocument'
 ---
-<p>Si l'<i lang="en">iframe</i> et le document parent de l'<i lang="en">iframe</i> sont de la <a href="/fr/docs/Web/Security/Same-origin_policy">même origine</a>, <code>HTMLIFrameElement.contentDocument</code> retourne un <a href="/fr/docs/Web/API/Document"><code>Document</code></a> (c'est à dire le document actif dans le contexte de navigation imbriqué du cadre). Sinon, il retourne <code>null</code>.</p>
+Si l'<i lang="en">iframe</i> et le document parent de l'<i lang="en">iframe</i> sont de la [même origine](/fr/docs/Web/Security/Same-origin_policy), `HTMLIFrameElement.contentDocument` retourne un [`Document`](/fr/docs/Web/API/Document) (c'est à dire le document actif dans le contexte de navigation imbriqué du cadre). Sinon, il retourne `null`.
 
-<h2 id="examples">Exemples</code></h2>
+## Exemples
 
-<pre class="brush: js">var iframeDocument = document.getElementsByTagName("iframe")[0].contentDocument;
+```js
+var iframeDocument = document.getElementsByTagName("iframe")[0].contentDocument;
 
 iframeDocument.body.style.backgroundColor = "blue";
-// Cela passe la couleur d'arrière-plan de l'iframe en bleu.</pre>
+// Cela passe la couleur d'arrière-plan de l'iframe en bleu.
+```
 
-<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/api/htmliframeelement/contentwindow/index.md b/files/fr/web/api/htmliframeelement/contentwindow/index.md
index 2dd8193ca3..747e6b1e3a 100644
--- a/files/fr/web/api/htmliframeelement/contentwindow/index.md
+++ b/files/fr/web/api/htmliframeelement/contentwindow/index.md
@@ -8,39 +8,26 @@ tags:
   - Web
 translation_of: Web/API/HTMLIFrameElement/contentWindow
 ---
-<div>{{APIRef("HTML DOM")}}</div>
+{{APIRef("HTML DOM")}}
 
-<p>La propriété <strong><code>contentWindow</code></strong> renvoie l'objet <code><a href="/fr/docs/Web/API/Window">Window</a></code> d'un élément {{HTMLElement("iframe")}}. Cet objet <code>Window</code> peut être utilisé pour accéder au document de l'<em>iframe</em> et à son DOM. Cet attribut est en lecture seule mais ses propriétés peuvent être manipulées comme pour l'objet global <code>Window</code>.</p>
+La propriété **`contentWindow`** renvoie l'objet [`Window`](/fr/docs/Web/API/Window) d'un élément {{HTMLElement("iframe")}}. Cet objet `Window` peut être utilisé pour accéder au document de l'_iframe_ et à son DOM. Cet attribut est en lecture seule mais ses propriétés peuvent être manipulées comme pour l'objet global `Window`.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: js">var x = document.getElementsByTagName("iframe")[0].contentWindow;
+```js
+var x = document.getElementsByTagName("iframe")[0].contentWindow;
 //x = window.frames[0];
 
 x.document.getElementsByTagName("body")[0].style.backgroundColor = "blue";
-// ceci devrait changer le 1er iframe dans le document bleu.</pre>
+// ceci devrait changer le 1er iframe dans le document bleu.
+```
 
-<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-iframe-contentwindow', 'HTMLIFrameElement: contentWindow')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                | État                             | Commentaires |
+| ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ |
+| {{SpecName('HTML WHATWG', '#dom-iframe-contentwindow', 'HTMLIFrameElement: contentWindow')}} | {{Spec2('HTML WHATWG')}} |              |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-
-
-<p>{{Compat("api.HTMLIFrameElement.contentWindow")}}</p>
+{{Compat("api.HTMLIFrameElement.contentWindow")}}
diff --git a/files/fr/web/api/htmliframeelement/csp/index.md b/files/fr/web/api/htmliframeelement/csp/index.md
index b07bf82f45..d435b7918a 100644
--- a/files/fr/web/api/htmliframeelement/csp/index.md
+++ b/files/fr/web/api/htmliframeelement/csp/index.md
@@ -1,26 +1,28 @@
 ---
 title: HTMLIFrameElement.csp
 slug: Web/API/HTMLIFrameElement/csp
+translation_of: HTMLIFrameElement.csp
 browser-compat: api.HTMLIFrameElement.csp
-translation_of: 'HTMLIFrameElement.csp'
 ---
-<p>{{SeeCompatTable}}{{APIRef("HTML DOM")}}</p>
+{{SeeCompatTable}}{{APIRef("HTML DOM")}}
 
-<p>La propriété <strong><code>csp</code></strong> de l'interface {{domxref("HTMLIFrameElement")}} spécifie la <a href="/fr/docs/Web/HTTP/CSP">stratégie de sécurité du contenu (en anglais <i lang="en">Content Security Policy (CSP)</i>)</a> qu'un document embarqué doit accepter de respecter.</p>
+La propriété **`csp`** de l'interface {{domxref("HTMLIFrameElement")}} spécifie la [stratégie de sécurité du contenu (en anglais <i lang="en">Content Security Policy (CSP)</i>)](/fr/docs/Web/HTTP/CSP) qu'un document embarqué doit accepter de respecter.
 
-<h2 id="syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">var <em>csp</em> = HTMLIFrameElement.csp
-HTMLIFrameElement.csp = <em>csp</em></pre>
+```js
+var csp = HTMLIFrameElement.csp
+HTMLIFrameElement.csp = csp
+```
 
-<h3 id="value">Valeur</h3>
+### Valeur
 
-<p>Une <a href="https://w3c.github.io/webappsec-cspee/#dom-htmliframeelement-csp">stratégie de sécurité du contenu</a>.</p>
+Une [stratégie de sécurité du contenu](https://w3c.github.io/webappsec-cspee/#dom-htmliframeelement-csp).
 
-<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/api/htmliframeelement/featurepolicy/index.md b/files/fr/web/api/htmliframeelement/featurepolicy/index.md
index 54bcd1037e..f025e3546a 100644
--- a/files/fr/web/api/htmliframeelement/featurepolicy/index.md
+++ b/files/fr/web/api/htmliframeelement/featurepolicy/index.md
@@ -10,37 +10,24 @@ tags:
   - Property
 translation_of: Web/API/HTMLIFrameElement/featurePolicy
 ---
-<div>{{APIRef("Feature Policy API")}}{{SeeCompatTable}}</div>
+{{APIRef("Feature Policy API")}}{{SeeCompatTable}}
 
-<p>La propriété en lecture seule <strong><code>featurePolicy</code></strong> de l'interface {{DOMxRef("HTMLIFrameElement")}} retourne l'interface {{DOMxRef("FeaturePolicy")}}, qui fournit une API simple pour consulter facilement les règles de fonctionnalités appliquées à un élément <code>&lt;iframe&gt;</code> spécifique.</p>
+La propriété en lecture seule **`featurePolicy`** de l'interface {{DOMxRef("HTMLIFrameElement")}} retourne l'interface {{DOMxRef("FeaturePolicy")}}, qui fournit une API simple pour consulter facilement les règles de fonctionnalités appliquées à un élément `<iframe>` spécifique.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var policy = <em>HTMLIFrameElement</em>.featurePolicy</pre>
+    var policy = HTMLIFrameElement.featurePolicy
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>Un objet <a href="/en-US/docs/Web/API/FeaturePolicy"><code>FeaturePolicy</code></a> pouvant être utilisé pour consulter les paramètres Feature Policy appliqués au cadre.</p>
+Un objet [`FeaturePolicy`](/en-US/docs/Web/API/FeaturePolicy) pouvant être utilisé pour consulter les paramètres Feature Policy appliqués au cadre.
 
-<h2 id="Spécification">Spécification</h2>
+## Spécification
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName("Feature Policy")}}</td>
-   <td>{{Spec2("Feature Policy")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                            | État                                 | Commentaire          |
+| ---------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName("Feature Policy")}} | {{Spec2("Feature Policy")}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-
-
-<p>{{Compat("api.HTMLIFrameElement.featurePolicy")}}</p>
+{{Compat("api.HTMLIFrameElement.featurePolicy")}}
diff --git a/files/fr/web/api/htmliframeelement/index.md b/files/fr/web/api/htmliframeelement/index.md
index c1e182c024..54f2c191b9 100644
--- a/files/fr/web/api/htmliframeelement/index.md
+++ b/files/fr/web/api/htmliframeelement/index.md
@@ -8,103 +8,74 @@ tags:
   - Reference
 translation_of: Web/API/HTMLIFrameElement
 ---
-<div>{{APIRef("HTML DOM")}}</div>
+{{APIRef("HTML DOM")}}
 
-<p>L'interface <strong><code>HTMLIFrameElement</code></strong> fournit des propriétés et des méthodes spéciales (en plus de celles de l'interface {{domxref("HTMLElement")}} auxquelles elle peut accéder par héritage) pour manipuler la disposition et la présentation des éléments "en-ligne" d'un cadre.</p>
+L'interface **`HTMLIFrameElement`** fournit des propriétés et des méthodes spéciales (en plus de celles de l'interface {{domxref("HTMLElement")}} auxquelles elle peut accéder par héritage) pour manipuler la disposition et la présentation des éléments "en-ligne" d'un cadre.
 
-<p>{{InheritanceDiagram(600,120)}}</p>
+{{InheritanceDiagram(600,120)}}
 
-<h2 id="Properties">Propriétés</h2>
+## Propriétés
 
-<p><em>Propriétés héritées de son parent, {{domxref("HTMLElement")}}</em>.</p>
+_Propriétés héritées de son parent, {{domxref("HTMLElement")}}_.
 
-<dl>
-  <dt>{{domxref("HTMLIFrameElement.align")}} {{obsolete_inline}}</dt>
-  <dd>Est une caîne de caractères {{domxref("DOMString")}} qui spécifie l'alignement du cadre par rapport au contexte environnant.</dd>
-  <dt>{{domxref("HTMLIFrameElement.allow")}} {{experimental_inline}}</dt>
-  <dd>Est une liste d'origines à partir desquelles le cadre est autorisé à afficher du contenu. Cet attribut accepte également les valeurs <code>self</code> et <code>src</code> qui représentent l'origine dans l'attribut src de l'iframe. La valeur par défaut est <code>src</code>.</dd>
-  <dt>{{domxref("HTMLIFrameElement.allowfullscreen")}} {{experimental_inline}}</dt>
-  <dd>Est un {{domxref("Boolean")}} indiquant si le cadre en ligne est prêt à être placé en mode plein écran. Voir <a href="/fr/docs/Web/API/Fullscreen_API">Utiliser le mode plein écran</a> pour plus de détails.</dd>
-  <dt>{{domxref("HTMLIFrameElement.allowPaymentRequest")}}</dt>
-  <dd>Est un {{domxref("Boolean")}} indiquant si l'API' <a href="/fr/docs/Web/API/Payment_Request_API">Payment Request API</a> peut être appelée à l'intérieur d'une iframe cross-origin.</dd>
-  <dt>{{domxref("HTMLIFrameElement.contentDocument")}} {{readonlyInline}}</dt>
-  <dd>Retourne un {{domxref("Document")}}, le document actif dans le contexte de navigation imbriqué du cadre en ligne.</dd>
-  <dt>{{domxref("HTMLIFrameElement.contentWindow")}} {{readonlyInline}}</dt>
-  <dd>Renvoie un {{domxref("WindowProxy")}}, la fenêtre proxy pour le contexte de navigation imbriqué.</dd>
-  <dt>{{domxref("HTMLIFrameElement.csp")}}</dt>
-  <dd>Spécifie la politique de sécurité du contenu qu'un document incorporé doit accepter d'appliquer à lui-même.</dd>
-  <dt>{{domxref("HTMLIFrameElement.frameBorder")}} {{obsolete_inline}}</dt>
-  <dd>Est une chaîne de caractères {{domxref("DOMString")}} qui indique s'il faut créer des bordures entre les cadres.</dd>
-  <dt>{{domxref("HTMLIFrameElement.height")}}</dt>
-  <dd>Est une chaîne de caractères {{domxref("DOMString")}} qui reflète l'attribut HTML {{htmlattrxref("height", "iframe")}} indiquant la hauteur du cadre.</dd>
-  <dt>{{domxref("HTMLIFrameElement.longDesc")}} {{obsolete_inline}}</dt>
-  <dd>Est une chaîne de caractères {{domxref("DOMString")}} qui contient l'URI d'une description longue du cadre.</dd>
-  <dt>{{domxref("HTMLIFrameElement.marginHeight")}} {{obsolete_inline}}</dt>
-  <dd>Est une chaîne de caractères {{domxref("DOMString")}} représentant la hauteur de la marge du cadre.</dd>
-  <dt>{{domxref("HTMLIFrameElement.marginWidth")}} {{obsolete_inline}}</dt>
-  <dd>Est une chaîne de caractères {{domxref("DOMString")}} représentant la largeur de la marge du cadre.</dd>
-  <dt>{{domxref("HTMLIFrameElement.name")}}</dt>
-  <dd>Est une chaîne de caractères {{domxref("DOMString")}} qui reflète l'attribut HTML {{htmlattrxref("name", "iframe")}} contenant un nom permettant de faire référence au cadre.</dd>
-  <dt>{{domxref("HTMLIFrameElement.featurePolicy")}} {{readonlyinline}}{{experimental_inline}}</dt>
-  <dd>Retourne l'interface {{domxref("FeaturePolicy")}} qui fournit une API simple pour l'introspection des politiques de fonctionnalité appliquées à un document spécifique.</dd>
-  <dt>{{domxref("HTMLIFrameElement.referrerPolicy")}} {{experimental_inline}}</dt>
-  <dd>Est une chaîne de caractères {{domxref("DOMString")}} qui reflète l'attribut HTML {{htmlattrxref("referrerPolicy", "iframe")}} attribut HTML indiquant le référent à utiliser lors de l'extraction de la ressource liée.</dd>
-  <dt>{{domxref("HTMLIFrameElement.sandbox")}}</dt>
-  <dd>Est un {{domxref("DOMSettableTokenList")}} qui reflète l'attribut {{htmlattrxref("sandbox", "iframe")}} indiquant des restrictions supplémentaires sur le comportement du contenu imbriqué.</dd>
-  <dt>{{domxref("HTMLIFrameElement.scrolling")}} {{obsolete_inline}}</dt>
-  <dd>Est une chaîne de caractères {{domxref("DOMString")}} qui indique si le navigateur doit fournir des barres de défilement pour le cadre.</dd>
-  <dt>{{domxref("HTMLIFrameElement.src")}}</dt>
-  <dd>Est une chaîne de caractères {{domxref("DOMString")}} qui reflète l'attribut HTML {{htmlattrxref("src", "iframe")}} contenant l'adresse du contenu à intégrer. Notez que la suppression programmatique de l'attribut src d'un <code>&lt;iframe&gt;</code> (par exemple via {{domxref("Element.removeAttribute()")}}) entraîne le chargement de <code>about:blank</code> dans le cadre dans Firefox (à partir de la version 65), les navigateurs basés sur Chromium et Safari/iOS.</dd>
-  <dt>{{domxref("HTMLIFrameElement.srcdoc")}}</dt>
-  <dd>Est une chaîne de caractères {{domxref("DOMString")}} qui représente le contenu à afficher dans le cadre.</dd>
-  <dt>{{domxref("HTMLIFrameElement.width")}}</dt>
-  <dd>Est une chaîne de caractères {{domxref("DOMString")}} qui reflète l'attribut HTML {{htmlattrxref("width", "iframe")}} indiquant la largeur du cadre.</dd>
-</dl>
+- {{domxref("HTMLIFrameElement.align")}} {{obsolete_inline}}
+  - : Est une caîne de caractères {{domxref("DOMString")}} qui spécifie l'alignement du cadre par rapport au contexte environnant.
+- {{domxref("HTMLIFrameElement.allow")}} {{experimental_inline}}
+  - : Est une liste d'origines à partir desquelles le cadre est autorisé à afficher du contenu. Cet attribut accepte également les valeurs `self` et `src` qui représentent l'origine dans l'attribut src de l'iframe. La valeur par défaut est `src`.
+- {{domxref("HTMLIFrameElement.allowfullscreen")}} {{experimental_inline}}
+  - : Est un {{domxref("Boolean")}} indiquant si le cadre en ligne est prêt à être placé en mode plein écran. Voir [Utiliser le mode plein écran](/fr/docs/Web/API/Fullscreen_API) pour plus de détails.
+- {{domxref("HTMLIFrameElement.allowPaymentRequest")}}
+  - : Est un {{domxref("Boolean")}} indiquant si l'API' [Payment Request API](/fr/docs/Web/API/Payment_Request_API) peut être appelée à l'intérieur d'une iframe cross-origin.
+- {{domxref("HTMLIFrameElement.contentDocument")}} {{readonlyInline}}
+  - : Retourne un {{domxref("Document")}}, le document actif dans le contexte de navigation imbriqué du cadre en ligne.
+- {{domxref("HTMLIFrameElement.contentWindow")}} {{readonlyInline}}
+  - : Renvoie un {{domxref("WindowProxy")}}, la fenêtre proxy pour le contexte de navigation imbriqué.
+- {{domxref("HTMLIFrameElement.csp")}}
+  - : Spécifie la politique de sécurité du contenu qu'un document incorporé doit accepter d'appliquer à lui-même.
+- {{domxref("HTMLIFrameElement.frameBorder")}} {{obsolete_inline}}
+  - : Est une chaîne de caractères {{domxref("DOMString")}} qui indique s'il faut créer des bordures entre les cadres.
+- {{domxref("HTMLIFrameElement.height")}}
+  - : Est une chaîne de caractères {{domxref("DOMString")}} qui reflète l'attribut HTML {{htmlattrxref("height", "iframe")}} indiquant la hauteur du cadre.
+- {{domxref("HTMLIFrameElement.longDesc")}} {{obsolete_inline}}
+  - : Est une chaîne de caractères {{domxref("DOMString")}} qui contient l'URI d'une description longue du cadre.
+- {{domxref("HTMLIFrameElement.marginHeight")}} {{obsolete_inline}}
+  - : Est une chaîne de caractères {{domxref("DOMString")}} représentant la hauteur de la marge du cadre.
+- {{domxref("HTMLIFrameElement.marginWidth")}} {{obsolete_inline}}
+  - : Est une chaîne de caractères {{domxref("DOMString")}} représentant la largeur de la marge du cadre.
+- {{domxref("HTMLIFrameElement.name")}}
+  - : Est une chaîne de caractères {{domxref("DOMString")}} qui reflète l'attribut HTML {{htmlattrxref("name", "iframe")}} contenant un nom permettant de faire référence au cadre.
+- {{domxref("HTMLIFrameElement.featurePolicy")}} {{readonlyinline}}{{experimental_inline}}
+  - : Retourne l'interface {{domxref("FeaturePolicy")}} qui fournit une API simple pour l'introspection des politiques de fonctionnalité appliquées à un document spécifique.
+- {{domxref("HTMLIFrameElement.referrerPolicy")}} {{experimental_inline}}
+  - : Est une chaîne de caractères {{domxref("DOMString")}} qui reflète l'attribut HTML {{htmlattrxref("referrerPolicy", "iframe")}} attribut HTML indiquant le référent à utiliser lors de l'extraction de la ressource liée.
+- {{domxref("HTMLIFrameElement.sandbox")}}
+  - : Est un {{domxref("DOMSettableTokenList")}} qui reflète l'attribut {{htmlattrxref("sandbox", "iframe")}} indiquant des restrictions supplémentaires sur le comportement du contenu imbriqué.
+- {{domxref("HTMLIFrameElement.scrolling")}} {{obsolete_inline}}
+  - : Est une chaîne de caractères {{domxref("DOMString")}} qui indique si le navigateur doit fournir des barres de défilement pour le cadre.
+- {{domxref("HTMLIFrameElement.src")}}
+  - : Est une chaîne de caractères {{domxref("DOMString")}} qui reflète l'attribut HTML {{htmlattrxref("src", "iframe")}} contenant l'adresse du contenu à intégrer. Notez que la suppression programmatique de l'attribut src d'un `<iframe>` (par exemple via {{domxref("Element.removeAttribute()")}}) entraîne le chargement de `about:blank` dans le cadre dans Firefox (à partir de la version 65), les navigateurs basés sur Chromium et Safari/iOS.
+- {{domxref("HTMLIFrameElement.srcdoc")}}
+  - : Est une chaîne de caractères {{domxref("DOMString")}} qui représente le contenu à afficher dans le cadre.
+- {{domxref("HTMLIFrameElement.width")}}
+  - : Est une chaîne de caractères {{domxref("DOMString")}} qui reflète l'attribut HTML {{htmlattrxref("width", "iframe")}} indiquant la largeur du cadre.
 
-<h2 id="Methods">Méthodes</h2>
+## Méthodes
 
-<p><em>Aucune méthode spécifique ; hérite des propriétés de son parent, {{domxref("HTMLElement")}}</em>.</p>
+_Aucune méthode spécifique ; hérite des propriétés de son parent, {{domxref("HTMLElement")}}_.
 
-<h2 id="Spécifications">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('HTML WHATWG', "#htmliframeelement", "HTMLIFrameElement")}}</td>
-      <td>{{Spec2('HTML WHATWG')}}</td>
-      <td>La propriété suivante a été ajoutée : <code>allowFullscreen</code>.</td>
-    </tr>
-    <tr>
-      <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#the-iframe-element", "HTMLIFrameElement")}}</td>
-      <td>{{Spec2('HTML5 W3C')}}</td>
-      <td>Les propriétés suivantes sont désormais obsolètes : <code>scrolling</code>, <code>marginWidth</code>, <code>marginHeight</code>, <code>longDesc</code>, <code>frameBorder</code> et <code>align</code>.<br>Les propriétés suivantes ont été ajoutées : <code>srcdoc</code>, <code>sandbox</code>, et <code>contentWindow</code>.</td>
-    </tr>
-    <tr>
-      <td>{{SpecName('DOM2 HTML', 'html.html#ID-50708718', 'HTMLIFrameElement')}}</td>
-      <td>{{Spec2('DOM2 HTML')}}</td>
-      <td>La propriété <code>contentDocument</code> a été ajoutée.</td>
-    </tr>
-    <tr>
-      <td>{{SpecName('DOM1', 'level-one-html.html#ID-50708718', 'HTMLIFrameElement')}}</td>
-      <td>{{Spec2('DOM1')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                                                | Statut                           | Commentaire                                                                                                                                                                                                                |
+| ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('HTML WHATWG', "#htmliframeelement", "HTMLIFrameElement")}}                                 | {{Spec2('HTML WHATWG')}} | La propriété suivante a été ajoutée : `allowFullscreen`.                                                                                                                                                                   |
+| {{SpecName('HTML5 W3C', "embedded-content-0.html#the-iframe-element", "HTMLIFrameElement")}} | {{Spec2('HTML5 W3C')}}     | Les propriétés suivantes sont désormais obsolètes : `scrolling`, `marginWidth`, `marginHeight`, `longDesc`, `frameBorder` et `align`. Les propriétés suivantes ont été ajoutées : `srcdoc`, `sandbox`, et `contentWindow`. |
+| {{SpecName('DOM2 HTML', 'html.html#ID-50708718', 'HTMLIFrameElement')}}                             | {{Spec2('DOM2 HTML')}}     | La propriété `contentDocument` a été ajoutée.                                                                                                                                                                              |
+| {{SpecName('DOM1', 'level-one-html.html#ID-50708718', 'HTMLIFrameElement')}}                         | {{Spec2('DOM1')}}         | Définition initiale.                                                                                                                                                                                                       |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.HTMLIFrameElement")}}</p>
+{{Compat("api.HTMLIFrameElement")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>L'élément HTML implémentant cette interface : {{HTMLElement("iframe")}}</li>
-</ul>
+- L'élément HTML implémentant cette interface : {{HTMLElement("iframe")}}
diff --git a/files/fr/web/api/htmlimageelement/image/index.md b/files/fr/web/api/htmlimageelement/image/index.md
index 669d6095b2..f23609cd96 100644
--- a/files/fr/web/api/htmlimageelement/image/index.md
+++ b/files/fr/web/api/htmlimageelement/image/index.md
@@ -7,56 +7,45 @@ tags:
   - DOM
 translation_of: Web/API/HTMLImageElement/Image
 ---
-<div>{{ APIRef("HTML DOM") }}</div>
+{{ APIRef("HTML DOM") }}
 
-<p>Le constructeur <strong><code>Image()</code></strong> crée une nouvelle instance {{domxref("HTMLImageElement")}} .</p>
+Le constructeur **`Image()`** crée une nouvelle instance {{domxref("HTMLImageElement")}} .
 
-<p>C'est fonctionnellement équivalent à {{domxref("Document.createElement()", "document.createElement('img')")}}.</p>
+C'est fonctionnellement équivalent à {{domxref("Document.createElement()", "document.createElement('img')")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">Image(width, height)</pre>
+    Image(width, height)
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt>width</dt>
- <dd>La largeur de l'image (c'est-à-dire, la valeur pour l'attribut {{htmlattrxref("width", "img")}})</dd>
- <dt>height</dt>
- <dd>La hauteur de l'image (c'est-à-dire, la valeur pour l'attribut {{htmlattrxref("height", "img")}}).</dd>
-</dl>
+- width
+  - : La largeur de l'image (c'est-à-dire, la valeur pour l'attribut {{htmlattrxref("width", "img")}})
+- height
+  - : La hauteur de l'image (c'est-à-dire, la valeur pour l'attribut {{htmlattrxref("height", "img")}}).
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: js">var myImage = new Image(100, 200);
+```js
+var myImage = new Image(100, 200);
 myImage.src = 'picture.jpg';
-console.log(myImage);</pre>
+console.log(myImage);
+```
 
-<div>Cela équivaudrait à définir la balise HTML suivante dans le {{htmlelement("body")}} (<em>corps</em>) :</div>
+Cela équivaudrait à définir la balise HTML suivante dans le {{htmlelement("body")}} (_corps_) :
 
-<pre class="brush: html">&lt;img width="100" height="200" src="picture.jpg"&gt;
-</pre>
+```html
+<img width="100" height="200" src="picture.jpg">
+```
 
-<div class="note">
-<p><strong>Note :</strong> Le "bitmap" entier est chargé quelle que soit la taille spécifiée dans le constructeur. Si une taille est spécifiée dans le constructeur, elle sera reflétée dans les propriétés {{domxref("HTMLImageElement.width")}} et {{domxref("HTMLImageElement.height")}} de l'instance résultante. La largeur intrinsèque et la hauteur de l'image en pixels CSS sont reflétées à travers les propriétés {{domxref("HTMLImageElement.naturalWidth")}} et {{domxref("HTMLImageElement.naturalHeight")}}. Si aucune taille n'est spécifiée dans le constructeur, les deux paires de ces propriétés auront les mêmes valeurs.</p>
-</div>
+> **Note :** Le "bitmap" entier est chargé quelle que soit la taille spécifiée dans le constructeur. Si une taille est spécifiée dans le constructeur, elle sera reflétée dans les propriétés {{domxref("HTMLImageElement.width")}} et {{domxref("HTMLImageElement.height")}} de l'instance résultante. La largeur intrinsèque et la hauteur de l'image en pixels CSS sont reflétées à travers les propriétés {{domxref("HTMLImageElement.naturalWidth")}} et {{domxref("HTMLImageElement.naturalHeight")}}. Si aucune taille n'est spécifiée dans le constructeur, les deux paires de ces propriétés auront les mêmes valeurs.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML WHATWG", "embedded-content.html#dom-image", "Image()")}}</td>
-   <td>{{spec2("HTML WHATWG")}}</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                    | Statut                           | Commentaire |
+| ------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- |
+| {{SpecName("HTML WHATWG", "embedded-content.html#dom-image", "Image()")}} | {{spec2("HTML WHATWG")}} |             |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.HTMLImageElement.Image")}}</p>
+{{Compat("api.HTMLImageElement.Image")}}
diff --git a/files/fr/web/api/htmlimageelement/index.md b/files/fr/web/api/htmlimageelement/index.md
index cc2ab84054..07b28b66bc 100644
--- a/files/fr/web/api/htmlimageelement/index.md
+++ b/files/fr/web/api/htmlimageelement/index.md
@@ -3,85 +3,80 @@ title: HTMLImageElement
 slug: Web/API/HTMLImageElement
 translation_of: Web/API/HTMLImageElement
 ---
-<p>{{APIRef("HTML DOM")}}</p>
-
-<p>L'interface  <strong><code>HTMLImageElement</code></strong> fournit des propriétés et des méthodes spéciales pour manipuler la mise en page et la présentation des éléments {{HTMLElement("img")}} .</p>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<p><em>Hérite les propriétés de son parent, {{domxref ("HTMLElement")}}</em></p>
-
-<dl>
- <dt>{{domxref("HTMLImageElement.align")}} {{obsolete_inline}}</dt>
- <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> qui indique l'alignement de l'image en respectant le contexte environnant. Les valeurs possibles sont <code>"left"</code><em>(gauche)</em>, <code>"right"</code><em>(droite)</em>, <code>"justify"</code><em>(justifié)</em>, et <code>"center"</code><em>(centré) .</em></dd>
- <dt>{{domxref("HTMLImageElement.alt")}}</dt>
- <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères) </em>qui reflète les attributs HTML {{htmlattrxref("alt", "img")}} , ceux-ci indiquant le recul du contexte de l'image.</dd>
- <dt>{{domxref("HTMLImageElement.border")}} {{obsolete_inline}}</dt>
- <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères) </em>qui est responsable de la largeur de la bordure entourant l'image. Il est maintenant déprécié et la propriété CSS {{cssxref("border")}} est utilisée à la place.</dd>
- <dt>{{domxref("HTMLImageElement.complete")}} {{readonlyInline}}</dt>
- <dd>Retourne un {{domxref("Boolean")}} <em>(booléen)</em> qui est <code>true</code> <em>(vrai)</em> si le navigateur a fini de chercher l'image, que ce soit avec succès ou non. Il affiche aussi "true" si l'image n'a pas de valeur {{domxref("HTMLImageElement.src", "src")}} .</dd>
- <dt>{{domxref("HTMLImageElement.crossOrigin")}}</dt>
- <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères) </em> représentant le paramètre CORS défini pour cet élément image. Voir <a href="/fr/docs/Web/HTML/Reglages_des_attributs_CORS">Attributs de règlage du CORS</a> pour plus de détails.</dd>
- <dt>{{domxref("HTMLImageElement.currentSrc")}} {{readonlyInline}}{{experimental_inline}}</dt>
- <dd>Retourne une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> représentant l'URL de l'image courante affichée (qui peut changer, par exemple en réponse à une requête multimédia).</dd>
- <dt>{{domxref("HTMLImageElement.height")}}</dt>
- <dd>Est un <code>unsigned long</code> <em>(non signé long)</em> qui reflète l'attibut HTML {{htmlattrxref("height", "img")}} indiquant la hauteur du rendu de l'image en pixels CSS.</dd>
- <dt>{{domxref("HTMLImageElement.hspace")}} {{obsolete_inline}}</dt>
- <dd>Est un <code>long</code> représentant l'espace de chaque côté de l'image.</dd>
- <dt>{{domxref("HTMLImageElement.isMap")}}</dt>
- <dd>Est un {{domxref("Boolean")}} <em>(booléen)</em> qui reflète l'attribut HTML {{htmlattrxref("ismap", "img")}} indiquant que l'image fait partie d'une carte d'image côté serveur.</dd>
- <dt>{{domxref("HTMLImageElement.longDesc")}} {{obsolete_inline}}</dt>
- <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> représentant l'URL d'une longue description de l'image.</dd>
- <dt>{{domxref("HTMLImageElement.lowSrc")}} {{obsolete_inline}}</dt>
- <dd>Est une {{domxref("DOMString")}}  <em>(chaîne de caractères)</em> qui  fait référence à une copie de faible qualité (mais plus rapide à charger) de l'image.</dd>
- <dt>{{domxref("HTMLImageElement.name")}} {{obsolete_inline}}</dt>
- <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> représentant le nom de l'élément.</dd>
- <dt>{{domxref("HTMLImageElement.naturalHeight")}} {{readonlyInline}}</dt>
- <dd>Retourne un <code>unsigned long</code>  représentant la hauteur intrinsèque de l'image en pixels CSS, si elle est disponible ; sinon, 0 est affiché.</dd>
- <dt>{{domxref("HTMLImageElement.referrerPolicy")}} {{experimental_inline}}</dt>
- <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> qui reflète l'attribut HTML {{htmlattrxref("referrerpolicy", "img")}}  indiquant la référence à utiliser pour récupérer l'image.</dd>
- <dt>{{domxref("HTMLImageElement.src")}}</dt>
- <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> qui reflète l'attribut HTML  {{htmlattrxref("src", "img")}} contenant l'URL complète de l'image y compris l'URI de base.</dd>
- <dt>{{domxref("HTMLImageElement.sizes")}} {{experimental_inline}}</dt>
- <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> reflétant l'attribut HTML {{htmlattrxref("sizes", "img")}} <em>(taille)</em>.</dd>
- <dt>{{domxref("HTMLImageElement.srcset")}} {{experimental_inline}}</dt>
- <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> reflétant l'attribut HTML {{htmlattrxref("srcset", "img")}} , qui contient une liste d'images candidates, séparées par une virgule. Une image candidate est une URL suivie d'un <code>'w'</code>  avec la largeur de l'image ou d'un <code>'x'</code>  avec la densité en pixels.</dd>
- <dt>{{domxref("HTMLImageElement.useMap")}}</dt>
- <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> qui reflète l'attribut HTML {{htmlattrxref("usemap", "img")}} contenant une URL partielle d'un élément "map" <em>(carte)</em>.</dd>
- <dt>{{domxref("HTMLImageElement.vspace")}} {{obsolete_inline}}</dt>
- <dd>Est un <code>long</code> représentant l'espace au-dessus et en-dessous de l'image.</dd>
- <dt>{{domxref("HTMLImageElement.width")}}</dt>
- <dd>Est un <code>unsigned long</code> qui reflète l'attribut HTML {{htmlattrxref("width", "img")}} indiquant la largeur rendue de l'image en pixels CSS.</dd>
- <dt>{{domxref("HTMLImageElement.x")}} {{readonlyInline}}{{experimental_inline}}</dt>
- <dd>Retourne un <code>long</code>  représentant le décalage horizontal à partir de la couche la plus proche. Cette propriété imite un comportement ancien de Netscape 4.</dd>
- <dt>{{domxref("HTMLImageElement.y")}} {{readonlyInline}} {{experimental_inline}}</dt>
- <dd>Retourne un <code>long</code> représentant le décalage vertical à partir de la couche la plus proche. Cette propriété imite un comportement ancien de Netscape 4.</dd>
-</dl>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<p><em>Hérite les propriétés de son parent, {{domxref("HTMLElement")}}.</em></p>
-
-<dl>
- <dt>{{domxref("HTMLImageElement.Image()", "Image()")}}</dt>
- <dd>Le constructeur d'image, comprend deux propriétés  <code>unsigned</code>  et <code>long</code> , qui sont la largeur et la hauteur de la ressource, et crée une instance de  <code>HTMLImageElement</code> , non insérée dans une arborescence DOM.</dd>
-</dl>
-
-<h2 id="Erreurs">Erreurs</h2>
-
-<p>Si une erreur apparaît pendant un essai de chargement ou de rendu de l'image, et si un gestionnaire d'évènements {{htmlattrxref("onerror")}} a été configuré pour gérer les évènements {{event("error")}} , ce gestionnaire est appelé. Cela peut se produire dans un certain nombre de situations, y compris :</p>
-
-<ul>
- <li>L'attribut  {{htmlattrxref("src", "img")}} est vide ou <code>null</code>.</li>
- <li>L'URL spécifiée de <code>src</code>  est la même que l'URL de la page actuelle de l'utilisateur.</li>
- <li>L'image spécifiée est corrompue de telle manière qu'elle ne peut être chargée.</li>
- <li>Les métadonnées de l'image spécifiée sont corrompues empêchant de récupérer ses dimensions,  et aucune dimension n'est spécifiée dans les attributs de l'élément <code>&lt;img&gt;</code>.</li>
- <li>L'image spécifiée est dans un format non supporté par l'"{{Glossary("user agent")}}".</li>
-</ul>
-
-<h2 id="Exemple">Exemple</h2>
-
-<pre class="brush: js">var img1 = new Image(); //  Constructeur HTML5
+{{APIRef("HTML DOM")}}
+
+L'interface  **`HTMLImageElement`** fournit des propriétés et des méthodes spéciales pour manipuler la mise en page et la présentation des éléments {{HTMLElement("img")}} .
+
+## Propriétés
+
+_Hérite les propriétés de son parent, {{domxref ("HTMLElement")}}_
+
+- {{domxref("HTMLImageElement.align")}} {{obsolete_inline}}
+  - : Est une {{domxref("DOMString")}} _(chaîne de caractères)_ qui indique l'alignement de l'image en respectant le contexte environnant. Les valeurs possibles sont `"left"`_(gauche)_, `"right"`_(droite)_, `"justify"`_(justifié)_, et `"center"`_(centré) ._
+- {{domxref("HTMLImageElement.alt")}}
+  - : Est une {{domxref("DOMString")}} _(chaîne de caractères)_ qui reflète les attributs HTML {{htmlattrxref("alt", "img")}} , ceux-ci indiquant le recul du contexte de l'image.
+- {{domxref("HTMLImageElement.border")}} {{obsolete_inline}}
+  - : Est une {{domxref("DOMString")}} _(chaîne de caractères)_ qui est responsable de la largeur de la bordure entourant l'image. Il est maintenant déprécié et la propriété CSS {{cssxref("border")}} est utilisée à la place.
+- {{domxref("HTMLImageElement.complete")}} {{readonlyInline}}
+  - : Retourne un {{domxref("Boolean")}} _(booléen)_ qui est `true` _(vrai)_ si le navigateur a fini de chercher l'image, que ce soit avec succès ou non. Il affiche aussi "true" si l'image n'a pas de valeur {{domxref("HTMLImageElement.src", "src")}} .
+- {{domxref("HTMLImageElement.crossOrigin")}}
+  - : Est une {{domxref("DOMString")}} _(chaîne de caractères)_ représentant le paramètre CORS défini pour cet élément image. Voir [Attributs de règlage du CORS](/fr/docs/Web/HTML/Reglages_des_attributs_CORS) pour plus de détails.
+- {{domxref("HTMLImageElement.currentSrc")}} {{readonlyInline}}{{experimental_inline}}
+  - : Retourne une {{domxref("DOMString")}} *(chaîne de caractères)* représentant l'URL de l'image courante affichée (qui peut changer, par exemple en réponse à une requête multimédia).
+- {{domxref("HTMLImageElement.height")}}
+  - : Est un `unsigned long` _(non signé long)_ qui reflète l'attibut HTML {{htmlattrxref("height", "img")}} indiquant la hauteur du rendu de l'image en pixels CSS.
+- {{domxref("HTMLImageElement.hspace")}} {{obsolete_inline}}
+  - : Est un `long` représentant l'espace de chaque côté de l'image.
+- {{domxref("HTMLImageElement.isMap")}}
+  - : Est un {{domxref("Boolean")}} _(booléen)_ qui reflète l'attribut HTML {{htmlattrxref("ismap", "img")}} indiquant que l'image fait partie d'une carte d'image côté serveur.
+- {{domxref("HTMLImageElement.longDesc")}} {{obsolete_inline}}
+  - : Est une {{domxref("DOMString")}} *(chaîne de caractères)* représentant l'URL d'une longue description de l'image.
+- {{domxref("HTMLImageElement.lowSrc")}} {{obsolete_inline}}
+  - : Est une {{domxref("DOMString")}}  *(chaîne de caractères)* qui fait référence à une copie de faible qualité (mais plus rapide à charger) de l'image.
+- {{domxref("HTMLImageElement.name")}} {{obsolete_inline}}
+  - : Est une {{domxref("DOMString")}} *(chaîne de caractères)* représentant le nom de l'élément.
+- {{domxref("HTMLImageElement.naturalHeight")}} {{readonlyInline}}
+  - : Retourne un `unsigned long`  représentant la hauteur intrinsèque de l'image en pixels CSS, si elle est disponible ; sinon, 0 est affiché.
+- {{domxref("HTMLImageElement.referrerPolicy")}} {{experimental_inline}}
+  - : Est une {{domxref("DOMString")}} *(chaîne de caractères)* qui reflète l'attribut HTML {{htmlattrxref("referrerpolicy", "img")}}  indiquant la référence à utiliser pour récupérer l'image.
+- {{domxref("HTMLImageElement.src")}}
+  - : Est une {{domxref("DOMString")}} *(chaîne de caractères)* qui reflète l'attribut HTML  {{htmlattrxref("src", "img")}} contenant l'URL complète de l'image y compris l'URI de base.
+- {{domxref("HTMLImageElement.sizes")}} {{experimental_inline}}
+  - : Est une {{domxref("DOMString")}} *(chaîne de caractères)* reflétant l'attribut HTML {{htmlattrxref("sizes", "img")}} _(taille)_.
+- {{domxref("HTMLImageElement.srcset")}} {{experimental_inline}}
+  - : Est une {{domxref("DOMString")}} *(chaîne de caractères)* reflétant l'attribut HTML {{htmlattrxref("srcset", "img")}} , qui contient une liste d'images candidates, séparées par une virgule. Une image candidate est une URL suivie d'un `'w'`  avec la largeur de l'image ou d'un `'x'`  avec la densité en pixels.
+- {{domxref("HTMLImageElement.useMap")}}
+  - : Est une {{domxref("DOMString")}} *(chaîne de caractères)* qui reflète l'attribut HTML {{htmlattrxref("usemap", "img")}} contenant une URL partielle d'un élément "map" _(carte)_.
+- {{domxref("HTMLImageElement.vspace")}} {{obsolete_inline}}
+  - : Est un `long` représentant l'espace au-dessus et en-dessous de l'image.
+- {{domxref("HTMLImageElement.width")}}
+  - : Est un `unsigned long` qui reflète l'attribut HTML {{htmlattrxref("width", "img")}} indiquant la largeur rendue de l'image en pixels CSS.
+- {{domxref("HTMLImageElement.x")}} {{readonlyInline}}{{experimental_inline}}
+  - : Retourne un `long`  représentant le décalage horizontal à partir de la couche la plus proche. Cette propriété imite un comportement ancien de Netscape 4.
+- {{domxref("HTMLImageElement.y")}} {{readonlyInline}} {{experimental_inline}}
+  - : Retourne un `long` représentant le décalage vertical à partir de la couche la plus proche. Cette propriété imite un comportement ancien de Netscape 4.
+
+## Méthodes
+
+_Hérite les propriétés de son parent, {{domxref("HTMLElement")}}._
+
+- {{domxref("HTMLImageElement.Image()", "Image()")}}
+  - : Le constructeur d'image, comprend deux propriétés `unsigned`  et `long` , qui sont la largeur et la hauteur de la ressource, et crée une instance de `HTMLImageElement` , non insérée dans une arborescence DOM.
+
+## Erreurs
+
+Si une erreur apparaît pendant un essai de chargement ou de rendu de l'image, et si un gestionnaire d'évènements {{htmlattrxref("onerror")}} a été configuré pour gérer les évènements {{event("error")}} , ce gestionnaire est appelé. Cela peut se produire dans un certain nombre de situations, y compris :
+
+- L'attribut  {{htmlattrxref("src", "img")}} est vide ou `null`.
+- L'URL spécifiée de `src`  est la même que l'URL de la page actuelle de l'utilisateur.
+- L'image spécifiée est corrompue de telle manière qu'elle ne peut être chargée.
+- Les métadonnées de l'image spécifiée sont corrompues empêchant de récupérer ses dimensions,  et aucune dimension n'est spécifiée dans les attributs de l'élément `<img>`.
+- L'image spécifiée est dans un format non supporté par l'"{{Glossary("user agent")}}".
+
+## Exemple
+
+```js
+var img1 = new Image(); //  Constructeur HTML5
 img1.src = 'image1.png';
 img1.alt = 'alt';
 document.body.appendChild(img1);
@@ -92,58 +87,24 @@ img2.alt = 'alt text';
 document.body.appendChild(img2);
 
 // en utilisant la première image dans le document
-alert(document.images[0].src);</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}</td>
-   <td>{{Spec2('Referrer Policy')}}</td>
-   <td>Ajoute la propriété <code>referrerPolicy</code> .</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSSOM View", "#excensions-to-the-htmlimageelement-interface", "Extensions to HTMLImageElement")}}</td>
-   <td>{{Spec2('CSSOM View')}}</td>
-   <td>Ajoute les propriétés <code>x</code> et<code>y</code> .</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "embedded-content.html#the-img-element", "HTMLImageElement")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Les propriétés suivantes sont ajoutées : <code>srcset</code>, <code>currentSrc</code> et <code>sizes</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#the-img-element", "HTMLImageElement")}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Un constructeur (avec 2 paramètres facultatifs) est ajouté.<br>
-    Les propriétés suivantes sont maintenant obsolètes : <code>name</code>, <code>border</code>, <code>align</code>, <code>hspace</code>, <code>vspace</code>, et <code>longdesc</code>.<br>
-    Les propriétés suivantes sont maintenant <code>unsigned et long</code>, iau lieu de <code>long</code>: <code>height</code> et <code>width</code>.<br>
-    Les propriétés suivantes ont été ajoutées : <code>crossorigin</code>, <code>naturalWidth</code>, <code>naturalHeight</code> et <code>complete</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 HTML', 'html.html#ID-17701901', 'HTMLImgElement')}}</td>
-   <td>{{Spec2('DOM2 HTML')}}</td>
-   <td>La propriété <code>lowSrc</code> a été supprimée.<br>
-    La propriété est maintenant <code>long</code>, au lieu des <code>DOMString</code>: <code>height</code>, <code>width</code>, <code>hspace</code> et <code>vspace</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM1', 'level-one-html.html#ID-17701901', 'HTMLImgElement')}}</td>
-   <td>{{Spec2('DOM1')}}</td>
-   <td>définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.HTMLImageElement")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<p>L'élément HTML implémentant cette interface : {{HTMLElement("img")}}</p>
+alert(document.images[0].src);
+```
+
+## Spécifications
+
+| Spécification                                                                                                                                    | Statut                               | Commentaire                                                                                                                                                                                                                                                                                                                                                                                    |
+| ------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}         | {{Spec2('Referrer Policy')}} | Ajoute la propriété `referrerPolicy` .                                                                                                                                                                                                                                                                                                                                                         |
+| {{SpecName("CSSOM View", "#excensions-to-the-htmlimageelement-interface", "Extensions to HTMLImageElement")}} | {{Spec2('CSSOM View')}}     | Ajoute les propriétés `x` et`y` .                                                                                                                                                                                                                                                                                                                                                              |
+| {{SpecName('HTML WHATWG', "embedded-content.html#the-img-element", "HTMLImageElement")}}                             | {{Spec2('HTML WHATWG')}}     | Les propriétés suivantes sont ajoutées : `srcset`, `currentSrc` et `sizes`.                                                                                                                                                                                                                                                                                                                    |
+| {{SpecName('HTML5 W3C', "embedded-content-0.html#the-img-element", "HTMLImageElement")}}                             | {{Spec2('HTML5 W3C')}}         | Un constructeur (avec 2 paramètres facultatifs) est ajouté. Les propriétés suivantes sont maintenant obsolètes : `name`, `border`, `align`, `hspace`, `vspace`, et `longdesc`. Les propriétés suivantes sont maintenant `unsigned et long`, iau lieu de `long`: `height` et `width`. Les propriétés suivantes ont été ajoutées : `crossorigin`, `naturalWidth`, `naturalHeight` et `complete`. |
+| {{SpecName('DOM2 HTML', 'html.html#ID-17701901', 'HTMLImgElement')}}                                                     | {{Spec2('DOM2 HTML')}}         | La propriété `lowSrc` a été supprimée. La propriété est maintenant `long`, au lieu des `DOMString`: `height`, `width`, `hspace` et `vspace`.                                                                                                                                                                                                                                                   |
+| {{SpecName('DOM1', 'level-one-html.html#ID-17701901', 'HTMLImgElement')}}                                                 | {{Spec2('DOM1')}}             | définition initiale.                                                                                                                                                                                                                                                                                                                                                                           |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.HTMLImageElement")}}
+
+## Voir aussi
+
+L'élément HTML implémentant cette interface : {{HTMLElement("img")}}
diff --git a/files/fr/web/api/htmlinputelement/index.md b/files/fr/web/api/htmlinputelement/index.md
index 05a9d8bdd6..7240d27edb 100644
--- a/files/fr/web/api/htmlinputelement/index.md
+++ b/files/fr/web/api/htmlinputelement/index.md
@@ -11,416 +11,746 @@ tags:
   - TopicStub
 translation_of: Web/API/HTMLInputElement
 ---
-<div>{{ APIRef("HTML DOM") }}</div>
+{{ APIRef("HTML DOM") }}
 
-<p>The <strong><code>HTMLInputElement</code></strong> interface provides special properties and methods for manipulating the options, layout, and presentation of {{HtmlElement("input")}} elements.</p>
+The **`HTMLInputElement`** interface provides special properties and methods for manipulating the options, layout, and presentation of {{HtmlElement("input")}} elements.
 
-<p>{{InheritanceDiagram(600, 120)}}</p>
+{{InheritanceDiagram(600, 120)}}
 
-<h2 id="Properties">Properties</h2>
+## Properties
 
 <table class="standard-table">
- <caption>Properties related to the parent form</caption>
- <thead>
- </thead>
- <tbody>
-  <tr>
-   <td><code>form </code>{{readonlyInline}}</td>
-   <td><em>{{domxref("HTMLFormElement")}}<code> object</code>:</em> <strong>Returns</strong> a reference to the parent {{HtmlElement("form")}} element.</td>
-  </tr>
-  <tr>
-   <td><code>formAction</code></td>
-   <td><em><code>string</code>: </em><strong>Returns / Sets</strong> the element's {{ htmlattrxref("formaction", "input") }} attribute, containing the URI of a program that processes information submitted by the element. This overrides the {{ htmlattrxref("action", "form") }} attribute of the parent form.</td>
-  </tr>
-  <tr>
-   <td><code>formEncType</code></td>
-   <td><em><code>string</code>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("formenctype", "input") }} attribute, containing the type of content that is used to submit the form to the server. This overrides the {{ htmlattrxref("enctype", "form") }} attribute of the parent form.</td>
-  </tr>
-  <tr>
-   <td><code>formMethod</code></td>
-   <td><em><code>string</code>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("formmethod", "input") }} attribute, containing the HTTP method that the browser uses to submit the form. This overrides the {{ htmlattrxref("method", "form") }} attribute of the parent form.</td>
-  </tr>
-  <tr>
-   <td><code>formNoValidate</code></td>
-   <td><em>{{jsxref("Boolean")}}:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("formnovalidate", "input") }} attribute, indicating that the form is not to be validated when it is submitted. This overrides the {{ htmlattrxref("novalidate", "form") }} attribute of the parent form.</td>
-  </tr>
-  <tr>
-   <td><code>formTarget</code></td>
-   <td><em><code>string</code>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("formtarget", "input") }} attribute, containing a name or keyword indicating where to display the response that is received after submitting the form. This overrides the {{ htmlattrxref("target", "form") }} attribute of the parent form.</td>
-  </tr>
- </tbody>
+  <caption>
+    Properties related to the parent form
+  </caption>
+  <thead></thead>
+  <tbody>
+    <tr>
+      <td><code>form </code>{{readonlyInline}}</td>
+      <td>
+        <em>{{domxref("HTMLFormElement")}}<code> object</code>:</em>
+        <strong>Returns</strong> a reference to the parent
+        {{HtmlElement("form")}} element.
+      </td>
+    </tr>
+    <tr>
+      <td><code>formAction</code></td>
+      <td>
+        <em><code>string</code>: </em><strong>Returns / Sets</strong> the
+        element's {{ htmlattrxref("formaction", "input") }}
+        attribute, containing the URI of a program that processes information
+        submitted by the element. This overrides the
+        {{ htmlattrxref("action", "form") }} attribute of the parent
+        form.
+      </td>
+    </tr>
+    <tr>
+      <td><code>formEncType</code></td>
+      <td>
+        <em><code>string</code>:</em> <strong>Returns / Sets</strong> the
+        element's {{ htmlattrxref("formenctype", "input") }}
+        attribute, containing the type of content that is used to submit the
+        form to the server. This overrides the
+        {{ htmlattrxref("enctype", "form") }} attribute of the parent
+        form.
+      </td>
+    </tr>
+    <tr>
+      <td><code>formMethod</code></td>
+      <td>
+        <em><code>string</code>:</em> <strong>Returns / Sets</strong> the
+        element's {{ htmlattrxref("formmethod", "input") }}
+        attribute, containing the HTTP method that the browser uses to submit
+        the form. This overrides the
+        {{ htmlattrxref("method", "form") }} attribute of the parent
+        form.
+      </td>
+    </tr>
+    <tr>
+      <td><code>formNoValidate</code></td>
+      <td>
+        <em>{{jsxref("Boolean")}}:</em>
+        <strong>Returns / Sets</strong> the element's
+        {{ htmlattrxref("formnovalidate", "input") }} attribute,
+        indicating that the form is not to be validated when it is submitted.
+        This overrides the {{ htmlattrxref("novalidate", "form") }}
+        attribute of the parent form.
+      </td>
+    </tr>
+    <tr>
+      <td><code>formTarget</code></td>
+      <td>
+        <em><code>string</code>:</em> <strong>Returns / Sets</strong> the
+        element's {{ htmlattrxref("formtarget", "input") }}
+        attribute, containing a name or keyword indicating where to display the
+        response that is received after submitting the form. This overrides the
+        {{ htmlattrxref("target", "form") }} attribute of the parent
+        form.
+      </td>
+    </tr>
+  </tbody>
 </table>
 
 <table class="standard-table">
- <caption>Properties that apply to any type of input element that is not hidden</caption>
- <tbody>
-  <tr>
-   <td><code>name</code></td>
-   <td><em><code>string</code>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("name", "input") }} attribute, containing a name that identifies the element when submitting the form.</td>
-  </tr>
-  <tr>
-   <td><code>type</code></td>
-   <td><code><em>string</em></code>: <strong>Returns / Sets</strong> the element's {{ htmlattrxref("type", "input") }} attribute, indicating the type of control to display. See {{ htmlattrxref("type", "input") }} attribute of {{ HTMLElement("input") }} for possible values.</td>
-  </tr>
-  <tr>
-   <td><code>disabled</code></td>
-   <td><em>{{jsxref("Boolean")}}:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("disabled", "input") }} attribute, indicating that the control is not available for interaction. The input values will not be submitted with the form. See also {{ htmlattrxref("readOnly", "input") }}</td>
-  </tr>
-  <tr>
-   <td><code>autofocus</code></td>
-   <td><em>{{jsxref("Boolean")}}:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("autofocus", "input") }} attribute, which specifies that a form control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form element in a document can have the {{htmlattrxref("autofocus","input")}} attribute. It cannot be applied if the {{htmlattrxref("type","input")}} attribute is set to <code>hidden</code> (that is, you cannot automatically set focus to a hidden control).</td>
-  </tr>
-  <tr>
-   <td><code>required</code></td>
-   <td><em>{{jsxref("Boolean")}}:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("required", "input") }} attribute, indicating that the user must fill in a value before submitting a form.</td>
-  </tr>
-  <tr>
-   <td><code>value</code></td>
-   <td><code><em>string</em></code><em>:</em> <strong>Returns / Sets</strong> the current value of the control.
-    <div><p><strong>Note :</strong> If the user enters a value different from the value expected, this may return an empty string.</p></div>
-   </td>
-  </tr>
-  <tr>
-   <td><code>validity</code> {{readonlyInline}}</td>
-   <td><em>{{domxref("ValidityState")}}<code> object</code>:</em> <strong>Returns</strong> the element's current validity state.</td>
-  </tr>
-  <tr>
-   <td><code>validationMessage</code> {{readonlyInline}}</td>
-   <td><code><em>string</em></code><em>:</em> <strong>Returns</strong> a localized message that describes the validation constraints that the control does not satisfy (if any). This is the empty string if the control is not a candidate for constraint validation ({{htmlattrxref("willValidate","input")}} is false), or it satisfies its constraints. This value can be set by the <code>setCustomValidity</code> method.</td>
-  </tr>
-  <tr>
-   <td><code>willValidate </code>{{readonlyInline}}</td>
-   <td><em>{{jsxref("Boolean")}}:</em> <strong>Returns</strong> whether the element is a candidate for constraint validation. It is false if any conditions bar it from constraint validation, including: its <code>type</code> is <code>hidden</code>, <code>reset</code>, or <code>button</code>; it has a <a href="/en-US/docs/Web/HTML/Element/datalist">datalist</a> ancestor; its <code>disabled</code> property is <code>true</code>.</td>
-  </tr>
- </tbody>
+  <caption>
+    Properties that apply to any type of input element that is not hidden
+  </caption>
+  <tbody>
+    <tr>
+      <td><code>name</code></td>
+      <td>
+        <em><code>string</code>:</em> <strong>Returns / Sets</strong> the
+        element's {{ htmlattrxref("name", "input") }} attribute,
+        containing a name that identifies the element when submitting the form.
+      </td>
+    </tr>
+    <tr>
+      <td><code>type</code></td>
+      <td>
+        <code><em>string</em></code
+        >: <strong>Returns / Sets</strong> the element's
+        {{ htmlattrxref("type", "input") }} attribute, indicating
+        the type of control to display. See
+        {{ htmlattrxref("type", "input") }} attribute of
+        {{ HTMLElement("input") }} for possible values.
+      </td>
+    </tr>
+    <tr>
+      <td><code>disabled</code></td>
+      <td>
+        <em>{{jsxref("Boolean")}}:</em>
+        <strong>Returns / Sets</strong> the element's
+        {{ htmlattrxref("disabled", "input") }} attribute,
+        indicating that the control is not available for interaction. The input
+        values will not be submitted with the form. See also
+        {{ htmlattrxref("readOnly", "input") }}
+      </td>
+    </tr>
+    <tr>
+      <td><code>autofocus</code></td>
+      <td>
+        <em>{{jsxref("Boolean")}}:</em>
+        <strong>Returns / Sets</strong> the element's
+        {{ htmlattrxref("autofocus", "input") }} attribute, which
+        specifies that a form control should have input focus when the page
+        loads, unless the user overrides it, for example by typing in a
+        different control. Only one form element in a document can have the
+        {{htmlattrxref("autofocus","input")}} attribute. It cannot be
+        applied if the {{htmlattrxref("type","input")}} attribute is
+        set to <code>hidden</code> (that is, you cannot automatically set focus
+        to a hidden control).
+      </td>
+    </tr>
+    <tr>
+      <td><code>required</code></td>
+      <td>
+        <em>{{jsxref("Boolean")}}:</em>
+        <strong>Returns / Sets</strong> the element's
+        {{ htmlattrxref("required", "input") }} attribute,
+        indicating that the user must fill in a value before submitting a form.
+      </td>
+    </tr>
+    <tr>
+      <td><code>value</code></td>
+      <td>
+        <code><em>string</em></code
+        ><em>:</em> <strong>Returns / Sets</strong> the current value of the
+        control.
+        <div>
+          <p>
+            <strong>Note :</strong> If the user enters a value different from
+            the value expected, this may return an empty string.
+          </p>
+        </div>
+      </td>
+    </tr>
+    <tr>
+      <td><code>validity</code> {{readonlyInline}}</td>
+      <td>
+        <em>{{domxref("ValidityState")}}<code> object</code>:</em>
+        <strong>Returns</strong> the element's current validity state.
+      </td>
+    </tr>
+    <tr>
+      <td><code>validationMessage</code> {{readonlyInline}}</td>
+      <td>
+        <code><em>string</em></code
+        ><em>:</em> <strong>Returns</strong> a localized message that describes
+        the validation constraints that the control does not satisfy (if any).
+        This is the empty string if the control is not a candidate for
+        constraint validation
+        ({{htmlattrxref("willValidate","input")}} is false), or it
+        satisfies its constraints. This value can be set by the
+        <code>setCustomValidity</code> method.
+      </td>
+    </tr>
+    <tr>
+      <td><code>willValidate </code>{{readonlyInline}}</td>
+      <td>
+        <em>{{jsxref("Boolean")}}:</em> <strong>Returns</strong> whether
+        the element is a candidate for constraint validation. It is false if any
+        conditions bar it from constraint validation, including: its
+        <code>type</code> is <code>hidden</code>, <code>reset</code>, or
+        <code>button</code>; it has a
+        <a href="/en-US/docs/Web/HTML/Element/datalist">datalist</a> ancestor;
+        its <code>disabled</code> property is <code>true</code>.
+      </td>
+    </tr>
+  </tbody>
 </table>
 
 <table class="standard-table">
- <caption>Properties that apply only to elements of type <code>"checkbox"</code> or <code>"radio"</code></caption>
- <tbody>
-  <tr>
-   <td><code>checked</code></td>
-   <td><em>{{jsxref("Boolean")}}:</em> <strong>Returns / Sets</strong> the current state of the element when {{htmlattrxref("type","input")}} is <code>checkbox</code> or <code>radio</code>.</td>
-  </tr>
-  <tr>
-   <td><code>defaultChecked</code></td>
-   <td><em>{{jsxref("Boolean")}}:</em> <strong>Returns / Sets</strong> the default state of a radio button or checkbox as originally specified in HTML that created this object.</td>
-  </tr>
-  <tr>
-   <td><code>indeterminate</code></td>
-   <td><em>{{jsxref("Boolean")}}:</em> <strong>Returns</strong> whether the checkbox or radio button is in indeterminate state. For checkboxes, the effect is that the appearance of the checkbox is obscured/greyed in some way as to indicate its state is indeterminate (not checked but not unchecked). Does not affect the value of the <code>checked</code> attribute, and clicking the checkbox will set the value to false.</td>
-  </tr>
- </tbody>
+  <caption>
+    Properties that apply only to elements of type
+    <code>"checkbox"</code>
+    or
+    <code>"radio"</code>
+  </caption>
+  <tbody>
+    <tr>
+      <td><code>checked</code></td>
+      <td>
+        <em>{{jsxref("Boolean")}}:</em>
+        <strong>Returns / Sets</strong> the current state of the element when
+        {{htmlattrxref("type","input")}} is <code>checkbox</code> or
+        <code>radio</code>.
+      </td>
+    </tr>
+    <tr>
+      <td><code>defaultChecked</code></td>
+      <td>
+        <em>{{jsxref("Boolean")}}:</em>
+        <strong>Returns / Sets</strong> the default state of a radio button or
+        checkbox as originally specified in HTML that created this object.
+      </td>
+    </tr>
+    <tr>
+      <td><code>indeterminate</code></td>
+      <td>
+        <em>{{jsxref("Boolean")}}:</em> <strong>Returns</strong> whether
+        the checkbox or radio button is in indeterminate state. For checkboxes,
+        the effect is that the appearance of the checkbox is obscured/greyed in
+        some way as to indicate its state is indeterminate (not checked but not
+        unchecked). Does not affect the value of the
+        <code>checked</code> attribute, and clicking the checkbox will set the
+        value to false.
+      </td>
+    </tr>
+  </tbody>
 </table>
 
 <table class="standard-table">
- <caption>Properties that apply only to elements of type <code>"image"</code></caption>
- <tbody>
-  <tr>
-   <td><code>alt</code></td>
-   <td><em><code>string</code>: </em><strong>Returns / Sets</strong> the element's {{ htmlattrxref("alt", "input") }} attribute, containing alternative text to use when {{htmlattrxref("type","input")}} is <code>image.</code></td>
-  </tr>
-  <tr>
-   <td><code>height</code></td>
-   <td><em><code>string</code>: </em><strong>Returns / Sets</strong> the element's {{ htmlattrxref("height", "input") }} attribute, which defines the height of the image displayed for the button, if the value of {{htmlattrxref("type","input")}} is <code>image</code>.</td>
-  </tr>
-  <tr>
-   <td><code>src</code></td>
-   <td><code><em>string</em></code><em>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("src", "input") }} attribute, which specifies a URI for the location of an image to display on the graphical submit button, if the value of {{htmlattrxref("type","input")}} is <code>image</code>; otherwise it is ignored.</td>
-  </tr>
-  <tr>
-   <td><code>width</code></td>
-   <td><code><em>string</em></code><em>:</em> <strong>Returns / Sets</strong> the document's {{ htmlattrxref("width", "input") }} attribute, which defines the width of the image displayed for the button, if the value of {{htmlattrxref("type","input")}} is <code>image</code>.</td>
-  </tr>
- </tbody>
+  <caption>
+    Properties that apply only to elements of type
+    <code>"image"</code>
+  </caption>
+  <tbody>
+    <tr>
+      <td><code>alt</code></td>
+      <td>
+        <em><code>string</code>: </em><strong>Returns / Sets</strong> the
+        element's {{ htmlattrxref("alt", "input") }} attribute,
+        containing alternative text to use when
+        {{htmlattrxref("type","input")}} is <code>image.</code>
+      </td>
+    </tr>
+    <tr>
+      <td><code>height</code></td>
+      <td>
+        <em><code>string</code>: </em><strong>Returns / Sets</strong> the
+        element's {{ htmlattrxref("height", "input") }} attribute,
+        which defines the height of the image displayed for the button, if the
+        value of {{htmlattrxref("type","input")}} is
+        <code>image</code>.
+      </td>
+    </tr>
+    <tr>
+      <td><code>src</code></td>
+      <td>
+        <code><em>string</em></code
+        ><em>:</em> <strong>Returns / Sets</strong> the element's
+        {{ htmlattrxref("src", "input") }} attribute, which specifies
+        a URI for the location of an image to display on the graphical submit
+        button, if the value of {{htmlattrxref("type","input")}} is
+        <code>image</code>; otherwise it is ignored.
+      </td>
+    </tr>
+    <tr>
+      <td><code>width</code></td>
+      <td>
+        <code><em>string</em></code
+        ><em>:</em> <strong>Returns / Sets</strong> the document's
+        {{ htmlattrxref("width", "input") }} attribute, which
+        defines the width of the image displayed for the button, if the value of
+        {{htmlattrxref("type","input")}} is <code>image</code>.
+      </td>
+    </tr>
+  </tbody>
 </table>
 
 <table class="standard-table">
- <caption>Properties that apply only to elements of type <code>"file"</code></caption>
- <tbody>
-  <tr>
-   <td><code>accept</code></td>
-   <td><em><code>string</code>: </em><strong>Returns / Sets</strong> the element's {{ htmlattrxref("accept", "input") }} attribute, containing comma-separated list of file types accepted by the server when {{htmlattrxref("type","input")}} is <code>file</code>.</td>
-  </tr>
-  <tr>
-   <td><code>allowdirs</code> {{non-standard_inline}}</td>
-   <td><em>{{jsxref("Boolean")}}:</em> Part of the non-standard Directory Upload API; <strong>indicates</strong> whether or not to allow directories and files both to be selected in the file list. Implemented only in Firefox and is hidden behind a preference.</td>
-  </tr>
-  <tr>
-   <td><code>files</code></td>
-   <td><strong>Returns/accepts</strong> a {{domxref("FileList")}} object, which contains a list of {{domxref("File")}} objects representing the files selected for upload.</td>
-  </tr>
-  <tr>
-   <td>{{domxref("HTMLInputElement.webkitdirectory", "webkitdirectory")}} {{Non-standard_inline}}</td>
-   <td><em>{{jsxref("Boolean")}}:</em><strong> Returns</strong> the {{htmlattrxref("webkitdirectory", "input")}} attribute; if true, the file system picker interface only accepts directories instead of files.</td>
-  </tr>
-  <tr>
-   <td>{{domxref("HTMLInputElement.webkitEntries", "webkitEntries")}} {{Non-standard_inline}}</td>
-   <td><em>Array of {{domxref("FileSystemEntry")}} objects:</em> <strong>Describes</strong> the currently selected files or directories.</td>
-  </tr>
- </tbody>
+  <caption>
+    Properties that apply only to elements of type
+    <code>"file"</code>
+  </caption>
+  <tbody>
+    <tr>
+      <td><code>accept</code></td>
+      <td>
+        <em><code>string</code>: </em><strong>Returns / Sets</strong> the
+        element's {{ htmlattrxref("accept", "input") }} attribute,
+        containing comma-separated list of file types accepted by the server
+        when {{htmlattrxref("type","input")}} is <code>file</code>.
+      </td>
+    </tr>
+    <tr>
+      <td><code>allowdirs</code> {{non-standard_inline}}</td>
+      <td>
+        <em>{{jsxref("Boolean")}}:</em> Part of the non-standard
+        Directory Upload API; <strong>indicates</strong> whether or not to allow
+        directories and files both to be selected in the file list. Implemented
+        only in Firefox and is hidden behind a preference.
+      </td>
+    </tr>
+    <tr>
+      <td><code>files</code></td>
+      <td>
+        <strong>Returns/accepts</strong> a {{domxref("FileList")}}
+        object, which contains a list of {{domxref("File")}} objects
+        representing the files selected for upload.
+      </td>
+    </tr>
+    <tr>
+      <td>
+        {{domxref("HTMLInputElement.webkitdirectory", "webkitdirectory")}}
+        {{Non-standard_inline}}
+      </td>
+      <td>
+        <em>{{jsxref("Boolean")}}:</em><strong> Returns</strong> the
+        {{htmlattrxref("webkitdirectory", "input")}} attribute;
+        if true, the file system picker interface only accepts directories
+        instead of files.
+      </td>
+    </tr>
+    <tr>
+      <td>
+        {{domxref("HTMLInputElement.webkitEntries", "webkitEntries")}}
+        {{Non-standard_inline}}
+      </td>
+      <td>
+        <em>Array of {{domxref("FileSystemEntry")}} objects:</em>
+        <strong>Describes</strong> the currently selected files or directories.
+      </td>
+    </tr>
+  </tbody>
 </table>
 
 <table class="standard-table">
- <caption>Properties that apply only to <code>text/number</code>-containing or elements</caption>
- <tbody>
-  <tr>
-   <td><code>autocomplete</code></td>
-   <td><em><code>string</code>: </em><strong>Returns / Sets</strong> the element's {{htmlattrxref("autocomplete", "input")}} attribute, indicating whether the value of the control can be automatically completed by the browser. Ignored if the value of the {{htmlattrxref("type","input")}} attribute is <code>hidden</code>, <code>checkbox</code>, <code>radio</code>, <code>file</code>, or a button type (<code>button</code>, <code>submit</code>, <code>reset</code>, <code>image</code>). Possible values are:<br>
-    <code>"on"</code>: the browser can autocomplete the value using previously stored value<br>
-    <code>"off"</code>: the user must explicity enter a value</td>
-  </tr>
-  <tr>
-   <td><code>max</code></td>
-   <td><em><code>string</code>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("max", "input") }} attribute, containing the maximum (numeric or date-time) value for this item, which must not be less than its minimum ({{htmlattrxref("min","input")}} attribute) value.</td>
-  </tr>
-  <tr>
-   <td><code>maxLength</code></td>
-   <td><em><code>long</code>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("maxlength", "input") }} attribute, containing the <strong>maximum number of characters</strong> (in Unicode code points) that the value can have. (If you set this to a negative number, an exception will be thrown.)</td>
-  </tr>
-  <tr>
-   <td><code>min</code></td>
-   <td><em><code>string</code>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("min", "input") }} attribute, containing the minimum (numeric or date-time) value for this item, which must not be greater than its maximum ({{htmlattrxref("max","input")}} attribute) value.</td>
-  </tr>
-  <tr>
-   <td><code>minLength</code></td>
-   <td><em><code>long</code>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("minlength", "input") }} attribute, containing the <strong>minimum number of characters</strong> (in Unicode code points) that the value can have. (If you set this to a negative number, an exception will be thrown.)</td>
-  </tr>
-  <tr>
-   <td><code>pattern</code></td>
-   <td><em><code>string</code>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("pattern", "input") }} attribute, containing a <strong>regular expression</strong> that the control's value is checked against. Use the {{htmlattrxref("title","input")}} attribute to describe the pattern to help the user. This attribute applies when the value of the {{htmlattrxref("type","input")}} attribute is <code>text</code>, <code>search</code>, <code>tel</code>, <code>url</code> or <code>email</code>; otherwise it is ignored.</td>
-  </tr>
-  <tr>
-   <td><code>placeholder</code></td>
-   <td><em><code>string</code>: </em><strong>Returns / Sets </strong>the element's {{ htmlattrxref("placeholder", "input") }} attribute, containing a hint to the user of what can be entered in the control. The placeholder text must not contain carriage returns or line-feeds. This attribute applies when the value of the {{htmlattrxref("type","input")}} attribute is <code>text</code>, <code>search</code>, <code>tel</code>, <code>url</code> or <code>email</code>; otherwise it is ignored.</td>
-  </tr>
-  <tr>
-   <td><code>readOnly</code></td>
-   <td><em><code>boolean</code>:</em><strong> Returns / Sets</strong> the element's {{ htmlattrxref("readonly", "input") }} attribute, indicating that the user cannot modify the value of the control.<br>
-    {{HTMLVersionInline(5)}}This is ignored if the value of the {{htmlattrxref("type","input")}} attribute is <code>hidden</code>, <code>range</code>, <code>color</code>, <code>checkbox</code>, <code>radio</code>, <code>file</code>, or a button type.</td>
-  </tr>
-  <tr>
-   <td><code>selectionStart</code></td>
-   <td><em><code>unsigned long</code>:</em> <strong>Returns / Sets</strong> the beginning index of the selected text. When nothing is selected, this returns the position of the text input cursor (caret) inside of the {{HTMLElement("input")}} element.</td>
-  </tr>
-  <tr>
-   <td><code>selectionEnd</code></td>
-   <td><em><code>unsigned long</code>:</em> <strong>Returns / Sets </strong>the end index of the selected text. When there's no selection, this returns the offset of the character immediately following the current text input cursor position.</td>
-  </tr>
-  <tr>
-   <td><code>selectionDirection</code></td>
-   <td><em><code>string</code>:</em> <strong>Returns / Sets</strong> the direction in which selection occurred. Possible values are:<br>
-    <code>forward</code> if selection was performed in the start-to-end direction of the current locale<br>
-    <code>backward</code> for the opposite direction<br>
-    <code>none</code> if the direction is unknown</td>
-  </tr>
-  <tr>
-   <td><code>size</code></td>
-   <td><em><code>unsigned long</code>:</em> <strong>Returns / Sets </strong>the element's {{ htmlattrxref("size", "input") }} attribute, containing <strong>visual size of the control</strong>. This value is in pixels unless the value of {{htmlattrxref("type","input")}} is <code>text</code> or <code>password</code>, in which case, it is an integer number of characters. Applies only when {{htmlattrxref("type","input")}} is set to <code>text</code>, <code>search</code>, <code>tel</code>, <code>url</code>, <code>email</code>, or <code>password</code>; otherwise it is ignored.</td>
-  </tr>
- </tbody>
+  <caption>
+    Properties that apply only to
+    <code>text/number</code
+    >-containing or elements
+  </caption>
+  <tbody>
+    <tr>
+      <td><code>autocomplete</code></td>
+      <td>
+        <em><code>string</code>: </em><strong>Returns / Sets</strong> the
+        element's {{htmlattrxref("autocomplete", "input")}}
+        attribute, indicating whether the value of the control can be
+        automatically completed by the browser. Ignored if the value of the
+        {{htmlattrxref("type","input")}} attribute is
+        <code>hidden</code>, <code>checkbox</code>, <code>radio</code>,
+        <code>file</code>, or a button type (<code>button</code>,
+        <code>submit</code>, <code>reset</code>, <code>image</code>). Possible
+        values are:<br /><code>"on"</code>: the browser can autocomplete the
+        value using previously stored value<br /><code>"off"</code>: the user
+        must explicity enter a value
+      </td>
+    </tr>
+    <tr>
+      <td><code>max</code></td>
+      <td>
+        <em><code>string</code>:</em> <strong>Returns / Sets</strong> the
+        element's {{ htmlattrxref("max", "input") }} attribute,
+        containing the maximum (numeric or date-time) value for this item, which
+        must not be less than its minimum
+        ({{htmlattrxref("min","input")}} attribute) value.
+      </td>
+    </tr>
+    <tr>
+      <td><code>maxLength</code></td>
+      <td>
+        <em><code>long</code>:</em> <strong>Returns / Sets</strong> the
+        element's {{ htmlattrxref("maxlength", "input") }}
+        attribute, containing the
+        <strong>maximum number of characters</strong> (in Unicode code points)
+        that the value can have. (If you set this to a negative number, an
+        exception will be thrown.)
+      </td>
+    </tr>
+    <tr>
+      <td><code>min</code></td>
+      <td>
+        <em><code>string</code>:</em> <strong>Returns / Sets</strong> the
+        element's {{ htmlattrxref("min", "input") }} attribute,
+        containing the minimum (numeric or date-time) value for this item, which
+        must not be greater than its maximum
+        ({{htmlattrxref("max","input")}} attribute) value.
+      </td>
+    </tr>
+    <tr>
+      <td><code>minLength</code></td>
+      <td>
+        <em><code>long</code>:</em> <strong>Returns / Sets</strong> the
+        element's {{ htmlattrxref("minlength", "input") }}
+        attribute, containing the
+        <strong>minimum number of characters</strong> (in Unicode code points)
+        that the value can have. (If you set this to a negative number, an
+        exception will be thrown.)
+      </td>
+    </tr>
+    <tr>
+      <td><code>pattern</code></td>
+      <td>
+        <em><code>string</code>:</em> <strong>Returns / Sets</strong> the
+        element's {{ htmlattrxref("pattern", "input") }}
+        attribute, containing a <strong>regular expression</strong> that the
+        control's value is checked against. Use the
+        {{htmlattrxref("title","input")}} attribute to describe the
+        pattern to help the user. This attribute applies when the value of the
+        {{htmlattrxref("type","input")}} attribute is
+        <code>text</code>, <code>search</code>, <code>tel</code>,
+        <code>url</code> or <code>email</code>; otherwise it is ignored.
+      </td>
+    </tr>
+    <tr>
+      <td><code>placeholder</code></td>
+      <td>
+        <em><code>string</code>: </em><strong>Returns / Sets </strong>the
+        element's {{ htmlattrxref("placeholder", "input") }}
+        attribute, containing a hint to the user of what can be entered in the
+        control. The placeholder text must not contain carriage returns or
+        line-feeds. This attribute applies when the value of the
+        {{htmlattrxref("type","input")}} attribute is
+        <code>text</code>, <code>search</code>, <code>tel</code>,
+        <code>url</code> or <code>email</code>; otherwise it is ignored.
+      </td>
+    </tr>
+    <tr>
+      <td><code>readOnly</code></td>
+      <td>
+        <em><code>boolean</code>:</em><strong> Returns / Sets</strong> the
+        element's {{ htmlattrxref("readonly", "input") }}
+        attribute, indicating that the user cannot modify the value of the
+        control.<br />{{HTMLVersionInline(5)}}This is ignored if the
+        value of the {{htmlattrxref("type","input")}} attribute is
+        <code>hidden</code>, <code>range</code>, <code>color</code>,
+        <code>checkbox</code>, <code>radio</code>, <code>file</code>, or a
+        button type.
+      </td>
+    </tr>
+    <tr>
+      <td><code>selectionStart</code></td>
+      <td>
+        <em><code>unsigned long</code>:</em> <strong>Returns / Sets</strong> the
+        beginning index of the selected text. When nothing is selected, this
+        returns the position of the text input cursor (caret) inside of the
+        {{HTMLElement("input")}} element.
+      </td>
+    </tr>
+    <tr>
+      <td><code>selectionEnd</code></td>
+      <td>
+        <em><code>unsigned long</code>:</em> <strong>Returns / Sets </strong>the
+        end index of the selected text. When there's no selection, this returns
+        the offset of the character immediately following the current text input
+        cursor position.
+      </td>
+    </tr>
+    <tr>
+      <td><code>selectionDirection</code></td>
+      <td>
+        <em><code>string</code>:</em> <strong>Returns / Sets</strong> the
+        direction in which selection occurred. Possible values are:<br /><code
+          >forward</code
+        >
+        if selection was performed in the start-to-end direction of the current
+        locale<br /><code>backward</code> for the opposite direction<br /><code
+          >none</code
+        >
+        if the direction is unknown
+      </td>
+    </tr>
+    <tr>
+      <td><code>size</code></td>
+      <td>
+        <em><code>unsigned long</code>:</em> <strong>Returns / Sets </strong>the
+        element's {{ htmlattrxref("size", "input") }} attribute,
+        containing <strong>visual size of the control</strong>. This value is in
+        pixels unless the value of {{htmlattrxref("type","input")}}
+        is <code>text</code> or <code>password</code>, in which case, it is an
+        integer number of characters. Applies only when
+        {{htmlattrxref("type","input")}} is set to
+        <code>text</code>, <code>search</code>, <code>tel</code>,
+        <code>url</code>, <code>email</code>, or <code>password</code>;
+        otherwise it is ignored.
+      </td>
+    </tr>
+  </tbody>
 </table>
 
 <table class="standard-table">
- <caption>Properties not yet categorized</caption>
- <tbody>
-  <tr>
-   <td><code>defaultValue</code></td>
-   <td><em><code>string</code>:</em> <strong>Returns / Sets</strong> the default value as originally specified in the HTML that created this object.</td>
-  </tr>
-  <tr>
-   <td><code>dirName</code></td>
-   <td><em><code>string</code>:</em> <strong>Returns / Sets </strong>the directionality of the element.</td>
-  </tr>
-  <tr>
-   <td><code>accessKey</code></td>
-   <td><em><code>string</code>: </em><strong>Returns</strong> a string containing a single character that switches input focus to the control when pressed.</td>
-  </tr>
-  <tr>
-   <td><code>list</code> {{readonlyInline}}</td>
-   <td><em>{{domxref("HTMLElement")}}<code> object</code>:</em> <strong>Returns</strong> the element pointed by the {{ htmlattrxref("list", "input") }} attribute. The property may be <code>null</code> if no HTML element found in the same tree.</td>
-  </tr>
-  <tr>
-   <td><code>multiple</code></td>
-   <td><em>{{jsxref("Boolean")}}:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("multiple", "input") }} attribute, indicating whether more than one value is possible (e.g., multiple files).</td>
-  </tr>
-  <tr>
-   <td><code>files</code></td>
-   <td><em>{{domxref("FileList")}}<code> array</code>:</em> <strong>Returns</strong> the list of selected files.</td>
-  </tr>
-  <tr>
-   <td>{{domxref("HTMLInputElement.labels")}} {{readonlyInline}}</td>
-   <td><em>{{domxref("NodeList")}}<code> array</code>:</em> <strong>Returns</strong> a list of {{ HTMLElement("label") }} elements that are labels for this element.</td>
-  </tr>
-  <tr>
-   <td><code>step</code></td>
-   <td><code><em>string</em></code><em>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("step", "input") }} attribute, which works with<strong> </strong>{{htmlattrxref("min","input")}} and {{htmlattrxref("max","input")}} to limit the increments at which a numeric or date-time value can be set. It can be the string <code>any</code> or a positive floating point number. If this is not set to <code>any</code>, the control accepts only values at multiples of the step value greater than the minimum.</td>
-  </tr>
-  <tr>
-   <td><code>valueAsDate</code></td>
-   <td><em>{{jsxref("Date")}}<code> object</code>:</em> <strong>Returns / Sets</strong> the value of the element, interpreted as a date, or <code>null</code> if conversion is not possible.</td>
-  </tr>
-  <tr>
-   <td><code>valueAsNumber</code></td>
-   <td><em><code>double</code>:</em> <strong>Returns</strong> the value of the element, interpreted as one of the following, in order:
-    <ul>
-     <li>A time value</li>
-     <li>A number</li>
-     <li><code>NaN</code> if conversion is impossible</li>
-    </ul>
-   </td>
-  </tr>
-  <tr>
-   <td><code>autocapitalize</code> {{experimental_inline}}</td>
-   <td><code><em>string</em></code><em>:</em> <strong>Defines</strong> the capitalization behavior for user input. Valid values are <code>none</code>, <code>off</code>, <code>characters</code>, <code>words</code>, or <code>sentences</code>.</td>
-  </tr>
-  <tr>
-   <td><code>inputmode</code></td>
-   <td>Provides a hint to browsers as to the type of virtual keyboard configuration to use when editing this element or its contents.</td>
-  </tr>
- </tbody>
+  <caption>
+    Properties not yet categorized
+  </caption>
+  <tbody>
+    <tr>
+      <td><code>defaultValue</code></td>
+      <td>
+        <em><code>string</code>:</em> <strong>Returns / Sets</strong> the
+        default value as originally specified in the HTML that created this
+        object.
+      </td>
+    </tr>
+    <tr>
+      <td><code>dirName</code></td>
+      <td>
+        <em><code>string</code>:</em> <strong>Returns / Sets </strong>the
+        directionality of the element.
+      </td>
+    </tr>
+    <tr>
+      <td><code>accessKey</code></td>
+      <td>
+        <em><code>string</code>: </em><strong>Returns</strong> a string
+        containing a single character that switches input focus to the control
+        when pressed.
+      </td>
+    </tr>
+    <tr>
+      <td><code>list</code> {{readonlyInline}}</td>
+      <td>
+        <em>{{domxref("HTMLElement")}}<code> object</code>:</em>
+        <strong>Returns</strong> the element pointed by the
+        {{ htmlattrxref("list", "input") }} attribute. The property
+        may be <code>null</code> if no HTML element found in the same tree.
+      </td>
+    </tr>
+    <tr>
+      <td><code>multiple</code></td>
+      <td>
+        <em>{{jsxref("Boolean")}}:</em>
+        <strong>Returns / Sets</strong> the element's
+        {{ htmlattrxref("multiple", "input") }} attribute,
+        indicating whether more than one value is possible (e.g., multiple
+        files).
+      </td>
+    </tr>
+    <tr>
+      <td><code>files</code></td>
+      <td>
+        <em>{{domxref("FileList")}}<code> array</code>:</em>
+        <strong>Returns</strong> the list of selected files.
+      </td>
+    </tr>
+    <tr>
+      <td>
+        {{domxref("HTMLInputElement.labels")}}
+        {{readonlyInline}}
+      </td>
+      <td>
+        <em>{{domxref("NodeList")}}<code> array</code>:</em>
+        <strong>Returns</strong> a list of {{ HTMLElement("label") }}
+        elements that are labels for this element.
+      </td>
+    </tr>
+    <tr>
+      <td><code>step</code></td>
+      <td>
+        <code><em>string</em></code
+        ><em>:</em> <strong>Returns / Sets</strong> the element's
+        {{ htmlattrxref("step", "input") }} attribute, which works
+        with<strong> </strong>{{htmlattrxref("min","input")}} and
+        {{htmlattrxref("max","input")}} to limit the increments at
+        which a numeric or date-time value can be set. It can be the string
+        <code>any</code> or a positive floating point number. If this is not set
+        to <code>any</code>, the control accepts only values at multiples of the
+        step value greater than the minimum.
+      </td>
+    </tr>
+    <tr>
+      <td><code>valueAsDate</code></td>
+      <td>
+        <em>{{jsxref("Date")}}<code> object</code>:</em>
+        <strong>Returns / Sets</strong> the value of the element, interpreted as
+        a date, or <code>null</code> if conversion is not possible.
+      </td>
+    </tr>
+    <tr>
+      <td><code>valueAsNumber</code></td>
+      <td>
+        <em><code>double</code>:</em> <strong>Returns</strong> the value of the
+        element, interpreted as one of the following, in order:
+        <ul>
+          <li>A time value</li>
+          <li>A number</li>
+          <li><code>NaN</code> if conversion is impossible</li>
+        </ul>
+      </td>
+    </tr>
+    <tr>
+      <td><code>autocapitalize</code> {{experimental_inline}}</td>
+      <td>
+        <code><em>string</em></code
+        ><em>:</em> <strong>Defines</strong> the capitalization behavior for
+        user input. Valid values are <code>none</code>, <code>off</code>,
+        <code>characters</code>, <code>words</code>, or <code>sentences</code>.
+      </td>
+    </tr>
+    <tr>
+      <td><code>inputmode</code></td>
+      <td>
+        Provides a hint to browsers as to the type of virtual keyboard
+        configuration to use when editing this element or its contents.
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<dl>
- <dt>{{domxref("HTMLInputElement.align")}} {{obsolete_inline}}</dt>
- <dd><code><em>string</em></code><em>:</em> <strong>Represents</strong> the alignment of the element. <em>Use CSS instead.</em></dd>
- <dt>{{domxref("HTMLInputElement.useMap")}} {{ obsolete_inline }}</dt>
- <dd><code><em>string</em></code><em>:</em> <strong>Represents</strong> a client-side image map.</dd>
-</dl>
+- {{domxref("HTMLInputElement.align")}} {{obsolete_inline}}
+  - : `string`_:_ **Represents** the alignment of the element. _Use CSS instead._
+- {{domxref("HTMLInputElement.useMap")}} {{ obsolete_inline }}
+  - : `string`_:_ **Represents** a client-side image map.
 
-<h2 id="Methods">Methods</h2>
+## Methods
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <td>{{domxref("HTMLElement.blur()", "blur()")}}</td>
-   <td>Removes focus from the input element; keystrokes will subsequently go nowhere.</td>
-  </tr>
-  <tr>
-   <td>{{domxref("HTMLElement.click()", "click()")}}</td>
-   <td>Simulates a click on the input element.</td>
-  </tr>
-  <tr>
-   <td>{{domxref("HTMLElement.focus()", "focus()")}}</td>
-   <td>Focuses on the input element; keystrokes will subsequently go to this element.</td>
-  </tr>
-  <tr>
-   <td>{{domxref("HTMLInputElement.select()", "select()")}}</td>
-   <td>Selects all the text in the input element, and focuses it so the user can subsequently replace all of its content.</td>
-  </tr>
-  <tr>
-   <td>{{domxref("HTMLInputElement.setSelectionRange()", "setSelectionRange()")}}</td>
-   <td>Selects a range of text in the input element (but does not focus it).</td>
-  </tr>
-  <tr>
-   <td>{{domxref("HTMLInputElement.setRangeText()", "setRangeText()")}}</td>
-   <td>Replaces a range of text in the input element with new text.</td>
-  </tr>
-  <tr>
-   <td><code>setCustomValidity()</code></td>
-   <td>Sets a custom validity message for the element. If this message is not the empty string, then the element is suffering from a custom validity error, and does not validate.</td>
-  </tr>
-  <tr>
-   <td><code>checkValidity()</code></td>
-   <td>Returns a {{jsxref("Boolean")}} that is <code>false</code> if the element is a candidate for constraint validation, and it does not satisfy its constraints. In this case, it also fires an {{event("invalid")}} event at the element. It returns <code>true</code> if the element is not a candidate for constraint validation, or if it satisfies its constraints.</td>
-  </tr>
-  <tr>
-   <td><code>reportValidity()</code></td>
-   <td>Runs the <code>checkValidity()</code> method, and if it returns false (for an invalid input or no pattern attribute provided), then it reports to the user that the input is invalid in the same manner as if you submitted a form.</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <td>{{domxref("HTMLElement.blur()", "blur()")}}</td>
+      <td>
+        Removes focus from the input element; keystrokes will subsequently go
+        nowhere.
+      </td>
+    </tr>
+    <tr>
+      <td>{{domxref("HTMLElement.click()", "click()")}}</td>
+      <td>Simulates a click on the input element.</td>
+    </tr>
+    <tr>
+      <td>{{domxref("HTMLElement.focus()", "focus()")}}</td>
+      <td>
+        Focuses on the input element; keystrokes will subsequently go to this
+        element.
+      </td>
+    </tr>
+    <tr>
+      <td>
+        {{domxref("HTMLInputElement.select()", "select()")}}
+      </td>
+      <td>
+        Selects all the text in the input element, and focuses it so the user
+        can subsequently replace all of its content.
+      </td>
+    </tr>
+    <tr>
+      <td>
+        {{domxref("HTMLInputElement.setSelectionRange()", "setSelectionRange()")}}
+      </td>
+      <td>
+        Selects a range of text in the input element (but does not focus it).
+      </td>
+    </tr>
+    <tr>
+      <td>
+        {{domxref("HTMLInputElement.setRangeText()", "setRangeText()")}}
+      </td>
+      <td>Replaces a range of text in the input element with new text.</td>
+    </tr>
+    <tr>
+      <td><code>setCustomValidity()</code></td>
+      <td>
+        Sets a custom validity message for the element. If this message is not
+        the empty string, then the element is suffering from a custom validity
+        error, and does not validate.
+      </td>
+    </tr>
+    <tr>
+      <td><code>checkValidity()</code></td>
+      <td>
+        Returns a {{jsxref("Boolean")}} that is <code>false</code> if the
+        element is a candidate for constraint validation, and it does not
+        satisfy its constraints. In this case, it also fires an
+        {{event("invalid")}} event at the element. It returns
+        <code>true</code> if the element is not a candidate for constraint
+        validation, or if it satisfies its constraints.
+      </td>
+    </tr>
+    <tr>
+      <td><code>reportValidity()</code></td>
+      <td>
+        Runs the <code>checkValidity()</code> method, and if it returns false
+        (for an invalid input or no pattern attribute provided), then it reports
+        to the user that the input is invalid in the same manner as if you
+        submitted a form.
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<dl>
- <dt>{{domxref("HTMLInputElement.stepDown()")}}</dt>
- <dd>Decrements the {{htmlattrxref("value","input")}} by ({{htmlattrxref("step","input")}} * n), where n defaults to 1 if not specified. Throws an INVALID_STATE_ERR exception:
- <ul>
-  <li>if the method is not applicable to for the current {{htmlattrxref("type","input")}} value,</li>
-  <li>if the element has no {{htmlattrxref("step","input")}} value,</li>
-  <li>if the {{htmlattrxref("value","input")}} cannot be converted to a number,</li>
-  <li>if the resulting value is above the {{htmlattrxref("max","input")}} or below the {{htmlattrxref("min","input")}}.</li>
- </ul>
- </dd>
- <dt>{{domxref("HTMLInputElement.stepUp()")}}</dt>
- <dd>Increments the {{htmlattrxref("value","input")}} by ({{htmlattrxref("step","input")}} * n), where n defaults to 1 if not specified. Throws an INVALID_STATE_ERR exception:
- <ul>
-  <li>if the method is not applicable to for the current {{htmlattrxref("type","input")}} value.,</li>
-  <li>if the element has no {{htmlattrxref("step","input")}} value,</li>
-  <li>if the {{htmlattrxref("value","input")}} cannot be converted to a number,</li>
-  <li>if the resulting value is above the {{htmlattrxref("max","input")}} or below the {{htmlattrxref("min","input")}}.</li>
- </ul>
- </dd>
- <dt>{{domxref("HTMLInputElement.mozSetFileArray()")}} {{non-standard_inline}}</dt>
- <dd>Sets the files selected on the input to the given array of {{domxref("File")}} objects. This is an alternative to <code>mozSetFileNameArray()</code> which can be used in frame scripts: a chrome script can <a href="/en-US/docs/Extensions/Using_the_DOM_File_API_in_chrome_code">open files as File objects</a> and send them via <a href="/en-US/Firefox/Multiprocess_Firefox/The_message_manager">message manager</a>.</dd>
- <dt>{{domxref("HTMLInputElement.mozGetFileNameArray()")}} {{non-standard_inline}}</dt>
- <dd>Returns an array of all the file names from the input.</dd>
- <dt>{{domxref("HTMLInputElement.mozSetFileNameArray()")}} {{non-standard_inline}}</dt>
- <dd>Sets the filenames for the files selected on the input. Not for use in <a href="/en-US/Firefox/Multiprocess_Firefox/Limitations_of_frame_scripts">frame scripts</a>, because it accesses the file system.</dd>
-</dl>
+- {{domxref("HTMLInputElement.stepDown()")}}
 
-<h2 id="Events">Events</h2>
+  - : Decrements the {{htmlattrxref("value","input")}} by ({{htmlattrxref("step","input")}} \* n), where n defaults to 1 if not specified. Throws an INVALID_STATE_ERR exception:
 
-<p>Listen to these events using <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> or by assigning an event listener to the <code>on<em>eventname</em></code> property of this interface:</p>
+    - if the method is not applicable to for the current {{htmlattrxref("type","input")}} value,
+    - if the element has no {{htmlattrxref("step","input")}} value,
+    - if the {{htmlattrxref("value","input")}} cannot be converted to a number,
+    - if the resulting value is above the {{htmlattrxref("max","input")}} or below the {{htmlattrxref("min","input")}}.
 
-<dl>
- <dt><a href="/en-US/docs/Web/API/HTMLElement/input_event"><code>input</code></a></dt>
- <dd>Fires when the <code>value</code> of an {{HTMLElement("input")}}, {{HTMLElement("select")}}, or {{HTMLElement("textarea")}} element has been changed. Note that this is actually fired on the {{domxref("HTMLElement")}} interface and also applies to <code><a href="/en-US/docs/Web/HTML/Global_attributes/contenteditable">contenteditable</a></code> elements, but we've listed it here because it is most commonly used with form input elements.<br>
- Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/oninput">oninput</a></code> event handler property.</dd>
- <dt><code><a href="/en-US/docs/Web/API/HTMLElement/invalid_event">invalid</a></code></dt>
- <dd>Fired when an element does not satisfy its constraints during constraint validation.<br>
- Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/oninvalid">oninvalid</a></code> event handler property.</dd>
- <dt><code><a href="/en-US/docs/Web/API/HTMLInputElement/search_event">search</a></code></dt>
- <dd>Fired when a search is initiated on an {{HTMLElement("input")}} of <code>type="search"</code>.<br>
- Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onsearch">onsearch</a></code> event handler property.</dd>
-</dl>
+- {{domxref("HTMLInputElement.stepUp()")}}
 
-<h2 id="Specifications">Specifications</h2>
+  - : Increments the {{htmlattrxref("value","input")}} by ({{htmlattrxref("step","input")}} \* n), where n defaults to 1 if not specified. Throws an INVALID_STATE_ERR exception:
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "#htmlinputelement", "HTMLInputElement")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', "forms.html#the-input-element", "HTMLInputElement")}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Technically, the <code>tabindex</code> and <code>accesskey</code> properties, as well as the <code>blur()</code>, <code>click()</code>, and <code>focus()</code> methods, are now defined on {{domxref("HTMLElement")}}.<br>
-    The following properties are now obsolete: <code>align</code> and <code>useMap</code>.<br>
-    The following properties have been added: <code>autocomplete</code>, <code>autofocus</code>, <code>dirName</code>, <code>files</code>, <code>formAction</code>, <code>formEncType</code>, <code>formMethod</code>, <code>formNoValidate</code>, <code>formTarget</code>, <code>height</code>, <code>indeterminate</code>, <code>labels</code>, <code>list</code>, <code>max</code>, <code>min</code>, <code>multiple</code>, <code>pattern</code>, <code>placeholder</code>, <code>required</code>, <code>selectionDirection</code>, <code>selectionEnd</code>, <code>selectionStart</code>, <code>step</code>, <code>validationMessage</code>, <code>validity</code>, <code>valueAsDate</code>, <code>valueAsNumber</code>, <code>width</code>, and <code>willValidate</code>.<br>
-    The following methods have been added: <code>checkValidity()</code>, <code>setCustomValidity()</code>, <code>setSelectionRange()</code>, <code>stepUp()</code>, and <code>stepDown()</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 HTML', 'html.html#ID-6043025', 'HTMLInputElement')}}</td>
-   <td>{{Spec2('DOM2 HTML')}}</td>
-   <td>The <code>size</code> property is now an <code>unsigned long</code>. The <code>type</code> property must be entirely given in lowercase characters.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM1', 'level-one-html.html#ID-6043025', 'HTMLInputElement')}}</td>
-   <td>{{Spec2('DOM1')}}</td>
-   <td>Initial definition.</td>
-  </tr>
- </tbody>
-</table>
+    - if the method is not applicable to for the current {{htmlattrxref("type","input")}} value.,
+    - if the element has no {{htmlattrxref("step","input")}} value,
+    - if the {{htmlattrxref("value","input")}} cannot be converted to a number,
+    - if the resulting value is above the {{htmlattrxref("max","input")}} or below the {{htmlattrxref("min","input")}}.
+
+- {{domxref("HTMLInputElement.mozSetFileArray()")}} {{non-standard_inline}}
+  - : Sets the files selected on the input to the given array of {{domxref("File")}} objects. This is an alternative to `mozSetFileNameArray()` which can be used in frame scripts: a chrome script can [open files as File objects](/en-US/docs/Extensions/Using_the_DOM_File_API_in_chrome_code) and send them via [message manager](/en-US/Firefox/Multiprocess_Firefox/The_message_manager).
+- {{domxref("HTMLInputElement.mozGetFileNameArray()")}} {{non-standard_inline}}
+  - : Returns an array of all the file names from the input.
+- {{domxref("HTMLInputElement.mozSetFileNameArray()")}} {{non-standard_inline}}
+  - : Sets the filenames for the files selected on the input. Not for use in [frame scripts](/en-US/Firefox/Multiprocess_Firefox/Limitations_of_frame_scripts), because it accesses the file system.
+
+## Events
+
+Listen to these events using [`addEventListener()`](/en-US/docs/Web/API/EventTarget/addEventListener) or by assigning an event listener to the `oneventname` property of this interface:
+
+- [`input`](/en-US/docs/Web/API/HTMLElement/input_event)
+  - : Fires when the `value` of an {{HTMLElement("input")}}, {{HTMLElement("select")}}, or {{HTMLElement("textarea")}} element has been changed. Note that this is actually fired on the {{domxref("HTMLElement")}} interface and also applies to [`contenteditable`](/en-US/docs/Web/HTML/Global_attributes/contenteditable) elements, but we've listed it here because it is most commonly used with form input elements.
+    Also available via the [`oninput`](/en-US/docs/Web/API/GlobalEventHandlers/oninput) event handler property.
+- [`invalid`](/en-US/docs/Web/API/HTMLElement/invalid_event)
+  - : Fired when an element does not satisfy its constraints during constraint validation.
+    Also available via the [`oninvalid`](/en-US/docs/Web/API/GlobalEventHandlers/oninvalid) event handler property.
+- [`search`](/en-US/docs/Web/API/HTMLInputElement/search_event)
+  - : Fired when a search is initiated on an {{HTMLElement("input")}} of `type="search"`.
+    Also available via the [`onsearch`](/en-US/docs/Web/API/GlobalEventHandlers/onsearch) event handler property.
 
-<h2 id="Browser_compatibility">Browser compatibility</h2>
+## Specifications
 
-<div>
+| Specification                                                                                            | Status                           | Comment                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('HTML WHATWG', "#htmlinputelement", "HTMLInputElement")}}             | {{Spec2('HTML WHATWG')}} |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| {{SpecName('HTML5 W3C', "forms.html#the-input-element", "HTMLInputElement")}} | {{Spec2('HTML5 W3C')}}     | Technically, the `tabindex` and `accesskey` properties, as well as the `blur()`, `click()`, and `focus()` methods, are now defined on {{domxref("HTMLElement")}}. The following properties are now obsolete: `align` and `useMap`. The following properties have been added: `autocomplete`, `autofocus`, `dirName`, `files`, `formAction`, `formEncType`, `formMethod`, `formNoValidate`, `formTarget`, `height`, `indeterminate`, `labels`, `list`, `max`, `min`, `multiple`, `pattern`, `placeholder`, `required`, `selectionDirection`, `selectionEnd`, `selectionStart`, `step`, `validationMessage`, `validity`, `valueAsDate`, `valueAsNumber`, `width`, and `willValidate`. The following methods have been added: `checkValidity()`, `setCustomValidity()`, `setSelectionRange()`, `stepUp()`, and `stepDown()`. |
+| {{SpecName('DOM2 HTML', 'html.html#ID-6043025', 'HTMLInputElement')}}             | {{Spec2('DOM2 HTML')}}     | The `size` property is now an `unsigned long`. The `type` property must be entirely given in lowercase characters.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| {{SpecName('DOM1', 'level-one-html.html#ID-6043025', 'HTMLInputElement')}}     | {{Spec2('DOM1')}}         | Initial definition.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
 
+## Browser compatibility
 
-<p>{{Compat("api.HTMLInputElement")}}</p>
-</div>
+{{Compat("api.HTMLInputElement")}}
 
-<h2 id="See_also">See also</h2>
+## See also
 
-<ul>
- <li>HTML element implementing this interface: {{ HTMLElement("input") }}</li>
-</ul>
+- HTML element implementing this interface: {{ HTMLElement("input") }}
diff --git a/files/fr/web/api/htmlinputelement/labels/index.md b/files/fr/web/api/htmlinputelement/labels/index.md
index f6efa64dce..f2540f72cd 100644
--- a/files/fr/web/api/htmlinputelement/labels/index.md
+++ b/files/fr/web/api/htmlinputelement/labels/index.md
@@ -8,63 +8,48 @@ tags:
   - Étiquettes
 translation_of: Web/API/HTMLInputElement/labels
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p>La propriété en lecture seule <code><strong>HTMLInputElement.labels</strong></code> renvoie une {{domxref("NodeList")}} (<em>liste de noeuds</em>) des éléments {{HTMLElement("label")}} (<em>étiquette</em>) associés avec l'élément {{HTMLElement("input")}} (<em>entrée</em>).</p>
+La propriété en lecture seule **`HTMLInputElement.labels`** renvoie une {{domxref("NodeList")}} (_liste de noeuds_) des éléments {{HTMLElement("label")}} (_étiquette_) associés avec l'élément {{HTMLElement("input")}} (_entrée_).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var <var>labelElements</var> = <var>input</var>.labels;
-</pre>
+    var labelElements = input.labels;
 
-<h3 id="Valeur_retournée">Valeur retournée</h3>
+### Valeur retournée
 
-<p>Une {{domxref("NodeList")}} contenant les éléments <code>&lt;label&gt;</code> associés avec l'élément <code>&lt;input&gt;</code>.</p>
+Une {{domxref("NodeList")}} contenant les éléments `<label>` associés avec l'élément `<input>`.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;label id="label1" for="test"&gt;Label 1&lt;/label&gt;
-&lt;input id="test"/&gt;
-&lt;label id="label2" for="test"&gt;Label 2&lt;/label&gt;
-</pre>
+```html
+<label id="label1" for="test">Label 1</label>
+<input id="test"/>
+<label id="label2" for="test">Label 2</label>
+```
 
-<h3 id="JavaScript">JavaScript</h3>
+### JavaScript
 
-<pre class="brush: js">window.addEventListener("DOMContentLoaded", function() {
+```js
+window.addEventListener("DOMContentLoaded", function() {
   const input = document.getElementById("test");
-  for(var i = 0; i &lt; input.labels.length; i++) {
+  for(var i = 0; i < input.labels.length; i++) {
     console.log(input.labels[i].textContent); // "Label 1" et "Label 2"
   }
-});</pre>
+});
+```
 
-<p>{{EmbedLiveSample("Exemple", "100%", 30)}}</p>
+{{EmbedLiveSample("Exemple", "100%", 30)}}
 
-<h2 id="Spécifications">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("HTML WHATWG", "forms.html#dom-lfe-labels", "labels")}}</td>
-   <td>{{Spec2("HTML WHATWG")}}</td>
-   <td>Pas de changement.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML5 W3C", "forms.html#dom-lfe-labels", "labels")}}</td>
-   <td>{{Spec2("HTML5 W3C")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                            | Statut                           | Commentaire          |
+| ---------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName("HTML WHATWG", "forms.html#dom-lfe-labels", "labels")}} | {{Spec2("HTML WHATWG")}} | Pas de changement.   |
+| {{SpecName("HTML5 W3C", "forms.html#dom-lfe-labels", "labels")}}     | {{Spec2("HTML5 W3C")}}     | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.HTMLInputElement.labels")}}</p>
+{{Compat("api.HTMLInputElement.labels")}}
diff --git a/files/fr/web/api/htmlmediaelement/abort_event/index.md b/files/fr/web/api/htmlmediaelement/abort_event/index.md
index 2708b7193f..77cf2c3790 100644
--- a/files/fr/web/api/htmlmediaelement/abort_event/index.md
+++ b/files/fr/web/api/htmlmediaelement/abort_event/index.md
@@ -10,37 +10,40 @@ tags:
   - abort
 translation_of: Web/API/HTMLMediaElement/abort_event
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}
 
-<p>L'événement <strong><code>abort</code></strong> se déclenche si l'élément écouté ne s'est pas chargé complétement. Il est désactivé si le résultat obtenu est une erreur.</p>
+L'événement **`abort`** se déclenche si l'élément écouté ne s'est pas chargé complétement. Il est désactivé si le résultat obtenu est une erreur.
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row">Bubbles</th>
-   <td>No</td>
-  </tr>
-  <tr>
-   <th scope="row">Cancelable</th>
-   <td>No</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface</th>
-   <td>{{domxref("Event")}}</td>
-  </tr>
-  <tr>
-   <th scope="row">Event handler property</th>
-   <td>{{domxref("GlobalEventHandlers/onabort", "onabort")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Bubbles</th>
+      <td>No</td>
+    </tr>
+    <tr>
+      <th scope="row">Cancelable</th>
+      <td>No</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface</th>
+      <td>{{domxref("Event")}}</td>
+    </tr>
+    <tr>
+      <th scope="row">Event handler property</th>
+      <td>
+        {{domxref("GlobalEventHandlers/onabort", "onabort")}}
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: js">const video = document.querySelector('video');
+```js
+const video = document.querySelector('video');
 const videoSrc = 'https://path/to/video.webm';
 
-video.addEventListener('abort', () =&gt; {
+video.addEventListener('abort', () => {
   console.log(`Abort loading: ${videoSrc}`);
 });
 
@@ -48,40 +51,23 @@ const source = document.createElement('source');
 source.setAttribute('src', videoSrc);
 source.setAttribute('type', 'video/webm');
 
-video.appendChild(source);</pre>
+video.appendChild(source);
+```
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "media.html#event-media-abort")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#event-media-abort")}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
+## Spécifications
 
+| Specification                                                                                | Status                           |
+| -------------------------------------------------------------------------------------------- | -------------------------------- |
+| {{SpecName('HTML WHATWG', "media.html#event-media-abort")}}             | {{Spec2('HTML WHATWG')}} |
+| {{SpecName('HTML5 W3C', "embedded-content-0.html#event-media-abort")}} | {{Spec2('HTML5 W3C')}}     |
 
+## Compatibilité navigateurs
 
-<p>{{Compat("api.HTMLMediaElement.abort_event")}}</p>
+{{Compat("api.HTMLMediaElement.abort_event")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("HTMLAudioElement")}}</li>
- <li>{{domxref("HTMLVideoElement")}}</li>
- <li>{{HTMLElement("audio")}}</li>
- <li>{{HTMLElement("video")}}</li>
-</ul>
+- {{domxref("HTMLAudioElement")}}
+- {{domxref("HTMLVideoElement")}}
+- {{HTMLElement("audio")}}
+- {{HTMLElement("video")}}
diff --git a/files/fr/web/api/htmlmediaelement/canplay_event/index.md b/files/fr/web/api/htmlmediaelement/canplay_event/index.md
index 8c55a0b0ef..3c40a18ea7 100644
--- a/files/fr/web/api/htmlmediaelement/canplay_event/index.md
+++ b/files/fr/web/api/htmlmediaelement/canplay_event/index.md
@@ -3,78 +3,49 @@ title: 'HTMLMediaElement: canplay'
 slug: Web/API/HTMLMediaElement/canplay_event
 translation_of: Web/API/HTMLMediaElement/canplay_event
 ---
-<p>L'événement <code>canplay</code> est déclenché lorsque l'<a href="/fr/docs/Glossaire/User_agent">agent utilisateur</a> peut jouer le média, mais estime que trop peu de données ont été chargées pour le jouer jusqu'à la fin sans avoir à l'arrêter pour charger d'avantage de contenu dans la mémoire tampon (buffer).</p>
+L'événement `canplay` est déclenché lorsque l'[agent utilisateur](/fr/docs/Glossaire/User_agent) peut jouer le média, mais estime que trop peu de données ont été chargées pour le jouer jusqu'à la fin sans avoir à l'arrêter pour charger d'avantage de contenu dans la mémoire tampon (buffer).
 
-<h2 id="Informations_Générales">Informations Générales</h2>
+## Informations Générales
 
-<dl>
- <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
- <dd style="margin: 0 0 0 120px;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-canplay">HTML5 media</a></dd>
- <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
- <dd style="margin: 0 0 0 120px;">Event</dd>
- <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
- <dd style="margin: 0 0 0 120px;">Non</dd>
- <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
- <dd style="margin: 0 0 0 120px;">Non</dd>
- <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
- <dd style="margin: 0 0 0 120px;">Element</dd>
- <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
- <dd style="margin: 0 0 0 120px;">Aucune</dd>
-</dl>
+- Spécification
+  - : [HTML5 media](http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-canplay)
+- Interface
+  - : Event
+- Propagation
+  - : Non
+- Annulable
+  - : Non
+- Cible
+  - : Element
+- Action par défaut
+  - : Aucune
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Property</th>
-   <th scope="col">Type</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>target</code> {{readonlyInline}}</td>
-   <td>{{domxref("EventTarget")}}</td>
-   <td>The event target (the topmost target in the DOM tree).</td>
-  </tr>
-  <tr>
-   <td><code>type</code> {{readonlyInline}}</td>
-   <td>{{domxref("DOMString")}}</td>
-   <td>The type of event.</td>
-  </tr>
-  <tr>
-   <td><code>bubbles</code> {{readonlyInline}}</td>
-   <td>{{jsxref("Boolean")}}</td>
-   <td>Whether the event normally bubbles or not.</td>
-  </tr>
-  <tr>
-   <td><code>cancelable</code> {{readonlyInline}}</td>
-   <td>{{jsxref("Boolean")}}</td>
-   <td>Whether the event is cancellable or not.</td>
-  </tr>
- </tbody>
-</table>
+| Property                              | Type                                 | Description                                            |
+| ------------------------------------- | ------------------------------------ | ------------------------------------------------------ |
+| `target` {{readonlyInline}}     | {{domxref("EventTarget")}} | The event target (the topmost target in the DOM tree). |
+| `type` {{readonlyInline}}       | {{domxref("DOMString")}}     | The type of event.                                     |
+| `bubbles` {{readonlyInline}}    | {{jsxref("Boolean")}}         | Whether the event normally bubbles or not.             |
+| `cancelable` {{readonlyInline}} | {{jsxref("Boolean")}}         | Whether the event is cancellable or not.               |
 
-<h2 id="Evénements_liés">Evénements liés</h2>
+## Evénements liés
 
-<ul>
- <li>{{event("playing")}}</li>
- <li>{{event("waiting")}}</li>
- <li>{{event("seeking")}}</li>
- <li>{{event("seeked")}}</li>
- <li>{{event("ended")}}</li>
- <li>{{event("loadedmetadata")}}</li>
- <li>{{event("loadeddata")}}</li>
- <li>{{event("canplay")}}</li>
- <li>{{event("canplaythrough")}}</li>
- <li>{{event("durationchange")}}</li>
- <li>{{event("timeupdate")}}</li>
- <li>{{event("play")}}</li>
- <li>{{event("pause")}}</li>
- <li>{{event("ratechange")}}</li>
- <li>{{event("volumechange")}}</li>
- <li>{{event("suspend")}}</li>
- <li>{{event("emptied")}}</li>
- <li>{{event("stalled")}}</li>
-</ul>
+- {{event("playing")}}
+- {{event("waiting")}}
+- {{event("seeking")}}
+- {{event("seeked")}}
+- {{event("ended")}}
+- {{event("loadedmetadata")}}
+- {{event("loadeddata")}}
+- {{event("canplay")}}
+- {{event("canplaythrough")}}
+- {{event("durationchange")}}
+- {{event("timeupdate")}}
+- {{event("play")}}
+- {{event("pause")}}
+- {{event("ratechange")}}
+- {{event("volumechange")}}
+- {{event("suspend")}}
+- {{event("emptied")}}
+- {{event("stalled")}}
diff --git a/files/fr/web/api/htmlmediaelement/canplaythrough_event/index.md b/files/fr/web/api/htmlmediaelement/canplaythrough_event/index.md
index 4d19f00190..229addfcf3 100644
--- a/files/fr/web/api/htmlmediaelement/canplaythrough_event/index.md
+++ b/files/fr/web/api/htmlmediaelement/canplaythrough_event/index.md
@@ -3,78 +3,49 @@ title: 'HTMLMediaElement: canplaythrough'
 slug: Web/API/HTMLMediaElement/canplaythrough_event
 translation_of: Web/API/HTMLMediaElement/canplaythrough_event
 ---
-<p>L'événement <code><strong>canplaythrough</strong></code> est déclenché lorsque le user agent peut jouer le média et estime que suffisament de données ont été chargées pour le lire jusqu'au bout. (Sans s'arrêter afin de charger plus contenu en mémoire)</p>
+L'événement **`canplaythrough`** est déclenché lorsque le user agent peut jouer le média et estime que suffisament de données ont été chargées pour le lire jusqu'au bout. (Sans s'arrêter afin de charger plus contenu en mémoire)
 
-<h2 id="Informations_générales">Informations générales</h2>
+## Informations générales
 
-<dl>
- <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
- <dd style="margin: 0 0 0 120px;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-canplaythrough">HTML5 media</a></dd>
- <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
- <dd style="margin: 0 0 0 120px;">Event</dd>
- <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
- <dd style="margin: 0 0 0 120px;">Non</dd>
- <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
- <dd style="margin: 0 0 0 120px;">Non</dd>
- <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
- <dd style="margin: 0 0 0 120px;">Element</dd>
- <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
- <dd style="margin: 0 0 0 120px;">Aucune</dd>
-</dl>
+- Spécification
+  - : [HTML5 media](http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-canplaythrough)
+- Interface
+  - : Event
+- Propagation
+  - : Non
+- Annulable
+  - : Non
+- Cible
+  - : Element
+- Action par défaut
+  - : Aucune
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Property</th>
-   <th scope="col">Type</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>target</code> {{readonlyInline}}</td>
-   <td>{{domxref("EventTarget")}}</td>
-   <td>The event target (the topmost target in the DOM tree).</td>
-  </tr>
-  <tr>
-   <td><code>type</code> {{readonlyInline}}</td>
-   <td>{{domxref("DOMString")}}</td>
-   <td>The type of event.</td>
-  </tr>
-  <tr>
-   <td><code>bubbles</code> {{readonlyInline}}</td>
-   <td>{{jsxref("Boolean")}}</td>
-   <td>Whether the event normally bubbles or not.</td>
-  </tr>
-  <tr>
-   <td><code>cancelable</code> {{readonlyInline}}</td>
-   <td>{{jsxref("Boolean")}}</td>
-   <td>Whether the event is cancellable or not.</td>
-  </tr>
- </tbody>
-</table>
+| Property                              | Type                                 | Description                                            |
+| ------------------------------------- | ------------------------------------ | ------------------------------------------------------ |
+| `target` {{readonlyInline}}     | {{domxref("EventTarget")}} | The event target (the topmost target in the DOM tree). |
+| `type` {{readonlyInline}}       | {{domxref("DOMString")}}     | The type of event.                                     |
+| `bubbles` {{readonlyInline}}    | {{jsxref("Boolean")}}         | Whether the event normally bubbles or not.             |
+| `cancelable` {{readonlyInline}} | {{jsxref("Boolean")}}         | Whether the event is cancellable or not.               |
 
-<h2 id="Evénements_liés">Evénements liés</h2>
+## Evénements liés
 
-<ul>
- <li>{{event("playing")}}</li>
- <li>{{event("waiting")}}</li>
- <li>{{event("seeking")}}</li>
- <li>{{event("seeked")}}</li>
- <li>{{event("ended")}}</li>
- <li>{{event("loadedmetadata")}}</li>
- <li>{{event("loadeddata")}}</li>
- <li>{{event("canplay")}}</li>
- <li>{{event("canplaythrough")}}</li>
- <li>{{event("durationchange")}}</li>
- <li>{{event("timeupdate")}}</li>
- <li>{{event("play")}}</li>
- <li>{{event("pause")}}</li>
- <li>{{event("ratechange")}}</li>
- <li>{{event("volumechange")}}</li>
- <li>{{event("suspend")}}</li>
- <li>{{event("emptied")}}</li>
- <li>{{event("stalled")}}</li>
-</ul>
+- {{event("playing")}}
+- {{event("waiting")}}
+- {{event("seeking")}}
+- {{event("seeked")}}
+- {{event("ended")}}
+- {{event("loadedmetadata")}}
+- {{event("loadeddata")}}
+- {{event("canplay")}}
+- {{event("canplaythrough")}}
+- {{event("durationchange")}}
+- {{event("timeupdate")}}
+- {{event("play")}}
+- {{event("pause")}}
+- {{event("ratechange")}}
+- {{event("volumechange")}}
+- {{event("suspend")}}
+- {{event("emptied")}}
+- {{event("stalled")}}
diff --git a/files/fr/web/api/htmlmediaelement/capturestream/index.md b/files/fr/web/api/htmlmediaelement/capturestream/index.md
index 75a73c45f9..73ef52ce23 100644
--- a/files/fr/web/api/htmlmediaelement/capturestream/index.md
+++ b/files/fr/web/api/htmlmediaelement/capturestream/index.md
@@ -14,81 +14,63 @@ tags:
   - captureStream
 translation_of: Web/API/HTMLMediaElement/captureStream
 ---
-<div>{{APIRef("HTML Media Capture")}}</div>
+{{APIRef("HTML Media Capture")}}
 
-<p><strong><code>captureStream()</code></strong> est une méthode de l'interface {{domxref("HTMLMediaElement")}} retournant un objet {{domxref('MediaStream')}} qui diffuse en temps réel l'enregistrement d'un contenu obtenu dans un élément média.</p>
+**`captureStream()`** est une méthode de l'interface {{domxref("HTMLMediaElement")}} retournant un objet {{domxref('MediaStream')}} qui diffuse en temps réel l'enregistrement d'un contenu obtenu dans un élément média.
 
-<h2 id="Syntax">Syntax</h2>
+## Syntax
 
-<pre class="syntaxbox">var <em>mediaStream</em> = mediaElement.captureStream()</pre>
+    var mediaStream = mediaElement.captureStream()
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<p>Aucun.</p>
+Aucun.
 
-<h3 id="Retours">Retours</h3>
+### Retours
 
-<p>Un objet {{domxref('MediaStream')}} pouvant être utilisé en tant que source pour des données audio et/ou vidéo par d'autres média traitant du code, ou comme source pour <a href="/en-US/docs/Glossary/WebRTC">WebRTC</a>.</p>
+Un objet {{domxref('MediaStream')}} pouvant être utilisé en tant que source pour des données audio et/ou vidéo par d'autres média traitant du code, ou comme source pour [WebRTC](/en-US/docs/Glossary/WebRTC).
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Dans cet exemple, un écouteur d'événement est mise en place, permettant la capture du contenu d'un élément média avec l'ID <code>"playback"</code> dans un {{domxref("MediaStream")}} lors d'un clic sur un bouton de lancement. La flux peut être utilisée dans d'autres buts—comme une source de diffusion via WebRTC, vous permettant de partager des vidéos pré-enregistrées avec une autre personne lors d'un appel video.</p>
+Dans cet exemple, un écouteur d'événement est mise en place, permettant la capture du contenu d'un élément média avec l'ID `"playback"` dans un {{domxref("MediaStream")}} lors d'un clic sur un bouton de lancement. La flux peut être utilisée dans d'autres buts—comme une source de diffusion via WebRTC, vous permettant de partager des vidéos pré-enregistrées avec une autre personne lors d'un appel video.
 
-<pre class="brush: js">document.querySelector('.playAndRecord').addEventListener('click', function() {
+```js
+document.querySelector('.playAndRecord').addEventListener('click', function() {
   var playbackElement = document.getElementById("playback");
   var captureStream = playbackElement.captureStream();
   playbackElement.play();
 });
-</pre>
+```
 
-<p>Voir <a href="/en-US/docs/Web/API/MediaStream_Recording_API/Recording_a_media_element">Recording a media element</a> pour des exemples et explications plus détaillées et complexes.</p>
+Voir [Recording a media element](/en-US/docs/Web/API/MediaStream_Recording_API/Recording_a_media_element) pour des exemples et explications plus détaillées et complexes.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Media Capture DOM Elements','#widl-HTMLMediaElement-captureStream-MediaStream','captureStream()')}}</td>
-   <td>{{Spec2('Media Capture DOM Elements')}}</td>
-   <td>Déclaration initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                                        | Status                                               | Commentaire           |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- | --------------------- |
+| {{SpecName('Media Capture DOM Elements','#widl-HTMLMediaElement-captureStream-MediaStream','captureStream()')}} | {{Spec2('Media Capture DOM Elements')}} | Déclaration initiale. |
 
-<h2 id="Compatibilités">Compatibilités</h2>
+## Compatibilités
 
-<div>
+{{Compat("api.HTMLMediaElement.captureStream")}}
 
+### Firefox-notes spécifiques
 
-<p>{{Compat("api.HTMLMediaElement.captureStream")}}</p>
+Avant Firefox 51, vous ne pouviez pas utiliser `captureStream()` sur un élément média dont la source était, lui-même, un objet {{domxref("MediaStream")}} (comme un élément {{HTMLElement("video")}} présentant un flux reçu à travers un {{domxref("RTCPeerConnection")}}). Au commencement de  51, ça fonctionne. ce qui veut dire que vous pouvez capturer le flux d'un élément video et utiliser {{domxref("MediaRecorder")}} pour l'enregistrer. Voir {{bug(1259788)}} pour plus de détails.
 
-<h3 id="Firefox-notes_spécifiques">Firefox-notes spécifiques</h3>
-</div>
+Cependant, `captureStream()` reste préfixé `mozCaptureStream()` sur Firefox pour une bonne raison: il y a quelques etrangetés dans l'implémentation actuelle qui mérite d'être soulignées :
 
-<p>Avant Firefox 51, vous ne pouviez pas utiliser <code>captureStream()</code> sur un élément média dont la source était, lui-même, un objet {{domxref("MediaStream")}} (comme un élément {{HTMLElement("video")}} présentant un flux reçu à travers un {{domxref("RTCPeerConnection")}}). Au commencement de  51, ça fonctionne. ce qui veut dire que vous pouvez capturer le flux d'un élément video et utiliser {{domxref("MediaRecorder")}} pour l'enregistrer. Voir {{bug(1259788)}} pour plus de détails.</p>
+- Actuellement, l'implémentation de Firefox fonctionne uniquement (comme décrit dans les spécifications) quand la source de l'élément média est elle-même, donc une instance {{domxref("MediaStream")}}.
+- Si la source de l'élément média n'est pas un `MediaStream`, la sortie de cette méthode n'est pas compatible avec les spécifications, et si vous changez la source après avoir commencé la capture, la sortie de la capture du flux ne peut accepter les nouvelles données source suite à une incompatibilité, donc aucun  {{domxref("MediaStreamTrack")}}s sera ajouté de la nouvelle source `MediaStream` au flux capturé, résultant d'une sortie n'ayant pas capturé la source mise à jour.
+- Repasser la source en `MediaStream` ajoute des pistes au flux et fonctionne de nouveau comme prévu.
+- L'appel à `mozCaptureMediaStream()` sur un élément avec une source `MediaStream` retourne un flux qui contient uniquement les pistes jouées par un `MediaStream`.
+- Si vous appellez `mozCaptureMediaStream()` sur un élément média sans source, son mode de compatibilité va se baser sur la première source ayant été ajoutée; Par exemple, Si c'est un `MediaStream`, alors la capture du flux va seulement fonctionner avec une source MediaStream à partir de ce moment.
+- Ce comportement particulier va être supprimer un fois que le support des sources non-`MediaStream` aura atteint la spécification et que la méthode ne sera plus préfixée. Voir {{bug(1259788, "bug", 160)}} pour plus de détails.
 
-<p>Cependant, <code>captureStream()</code> reste préfixé <code>mozCaptureStream()</code> sur Firefox pour une bonne raison: il y a quelques etrangetés dans l'implémentation actuelle qui mérite d'être soulignées :</p>
+## Voir aussi
 
-<ul>
- <li>Actuellement, l'implémentation de Firefox fonctionne uniquement (comme décrit dans les spécifications) quand la source de l'élément média est elle-même, donc une instance {{domxref("MediaStream")}}.</li>
- <li>Si la source de l'élément média n'est pas un <code>MediaStream</code>, la sortie de cette méthode n'est pas compatible avec les spécifications, et si vous changez la source après avoir commencé la capture, la sortie de la capture du flux ne peut accepter les nouvelles données source suite à une incompatibilité, donc aucun  {{domxref("MediaStreamTrack")}}s sera ajouté de la nouvelle source <code>MediaStream</code> au flux capturé, résultant d'une sortie n'ayant pas capturé la source mise à jour.</li>
- <li>Repasser la source en <code>MediaStream</code> ajoute des pistes au flux et fonctionne de nouveau comme prévu.</li>
- <li>L'appel à <code>mozCaptureMediaStream()</code> sur un élément avec une source <code>MediaStream</code> retourne un flux qui contient uniquement les pistes jouées par un <code>MediaStream</code>.</li>
- <li>Si vous appellez <code>mozCaptureMediaStream()</code> sur un élément média sans source, son mode de compatibilité va se baser sur la première source ayant été ajoutée; Par exemple, Si c'est un <code>MediaStream</code>, alors la capture du flux va seulement fonctionner avec une source MediaStream à partir de ce moment.</li>
- <li>Ce comportement particulier va être supprimer un fois que le support des sources non-<code>MediaStream</code> aura atteint la spécification et que la méthode ne sera plus préfixée. Voir {{bug(1259788, "bug", 160)}} pour plus de détails.</li>
-</ul>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/API/MediaStream_Recording_API/Recording_a_media_element">Recording a media element</a></li>
- <li><a href="/en-US/docs/Web/API/MediaStream_Recording_API">MediaStream Recording API</a></li>
- <li>{{domxref("HTMLCanvasElement.captureStream()")}}</li>
- <li>{{domxref("MediaStream")}}</li>
- <li><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC API</a></li>
-</ul>
+- [Recording a media element](/en-US/docs/Web/API/MediaStream_Recording_API/Recording_a_media_element)
+- [MediaStream Recording API](/en-US/docs/Web/API/MediaStream_Recording_API)
+- {{domxref("HTMLCanvasElement.captureStream()")}}
+- {{domxref("MediaStream")}}
+- [WebRTC API](/en-US/docs/Web/API/WebRTC_API)
diff --git a/files/fr/web/api/htmlmediaelement/durationchange_event/index.md b/files/fr/web/api/htmlmediaelement/durationchange_event/index.md
index b49118ca25..8c5e5c3b8b 100644
--- a/files/fr/web/api/htmlmediaelement/durationchange_event/index.md
+++ b/files/fr/web/api/htmlmediaelement/durationchange_event/index.md
@@ -3,78 +3,49 @@ title: 'HTMLMediaElement: durationchange'
 slug: Web/API/HTMLMediaElement/durationchange_event
 translation_of: Web/API/HTMLMediaElement/durationchange_event
 ---
-<p>L'évènement <strong><code>durationchange</code> </strong>est déclenché quand l'attribut de durée est mis à jour.</p>
+L'évènement **`durationchange` **est déclenché quand l'attribut de durée est mis à jour.
 
-<h2 id="Informations_générales">Informations générales</h2>
+## Informations générales
 
-<dl>
- <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
- <dd style="margin: 0 0 0 120px;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-durationchange">HTML5 media</a></dd>
- <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
- <dd style="margin: 0 0 0 120px;">{{domxref("Event")}}</dd>
- <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
- <dd style="margin: 0 0 0 120px;">Non</dd>
- <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
- <dd style="margin: 0 0 0 120px;">Non</dd>
- <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
- <dd style="margin: 0 0 0 120px;">{{domxref("Element")}}</dd>
- <dt style="float: left; text-align: right; width: 120px;">Default Action</dt>
- <dd style="margin: 0 0 0 120px;">Aucune.</dd>
-</dl>
+- Spécification
+  - : [HTML5 media](http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-durationchange)
+- Interface
+  - : {{domxref("Event")}}
+- Propagation
+  - : Non
+- Annulable
+  - : Non
+- Cible
+  - : {{domxref("Element")}}
+- Default Action
+  - : Aucune.
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Property</th>
-   <th scope="col">Type</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>target</code> {{readonlyInline}}</td>
-   <td>{{domxref("EventTarget")}}</td>
-   <td>The event target (the topmost target in the DOM tree).</td>
-  </tr>
-  <tr>
-   <td><code>type</code> {{readonlyInline}}</td>
-   <td>{{domxref("DOMString")}}</td>
-   <td>The type of event.</td>
-  </tr>
-  <tr>
-   <td><code>bubbles</code> {{readonlyInline}}</td>
-   <td>{{jsxref("Boolean")}}</td>
-   <td>Whether the event normally bubbles or not.</td>
-  </tr>
-  <tr>
-   <td><code>cancelable</code> {{readonlyInline}}</td>
-   <td>{{jsxref("Boolean")}}</td>
-   <td>Whether the event is cancellable or not.</td>
-  </tr>
- </tbody>
-</table>
+| Property                              | Type                                 | Description                                            |
+| ------------------------------------- | ------------------------------------ | ------------------------------------------------------ |
+| `target` {{readonlyInline}}     | {{domxref("EventTarget")}} | The event target (the topmost target in the DOM tree). |
+| `type` {{readonlyInline}}       | {{domxref("DOMString")}}     | The type of event.                                     |
+| `bubbles` {{readonlyInline}}    | {{jsxref("Boolean")}}         | Whether the event normally bubbles or not.             |
+| `cancelable` {{readonlyInline}} | {{jsxref("Boolean")}}         | Whether the event is cancellable or not.               |
 
-<h2 id="Evénements_liés">Evénements liés</h2>
+## Evénements liés
 
-<ul>
- <li>{{event("playing")}}</li>
- <li>{{event("waiting")}}</li>
- <li>{{event("seeking")}}</li>
- <li>{{event("seeked")}}</li>
- <li>{{event("ended")}}</li>
- <li>{{event("loadedmetadata")}}</li>
- <li>{{event("loadeddata")}}</li>
- <li>{{event("canplay")}}</li>
- <li>{{event("canplaythrough")}}</li>
- <li>{{event("durationchange")}}</li>
- <li>{{event("timeupdate")}}</li>
- <li>{{event("play")}}</li>
- <li>{{event("pause")}}</li>
- <li>{{event("ratechange")}}</li>
- <li>{{event("volumechange")}}</li>
- <li>{{event("suspend")}}</li>
- <li>{{event("emptied")}}</li>
- <li>{{event("stalled")}}</li>
-</ul>
+- {{event("playing")}}
+- {{event("waiting")}}
+- {{event("seeking")}}
+- {{event("seeked")}}
+- {{event("ended")}}
+- {{event("loadedmetadata")}}
+- {{event("loadeddata")}}
+- {{event("canplay")}}
+- {{event("canplaythrough")}}
+- {{event("durationchange")}}
+- {{event("timeupdate")}}
+- {{event("play")}}
+- {{event("pause")}}
+- {{event("ratechange")}}
+- {{event("volumechange")}}
+- {{event("suspend")}}
+- {{event("emptied")}}
+- {{event("stalled")}}
diff --git a/files/fr/web/api/htmlmediaelement/emptied_event/index.md b/files/fr/web/api/htmlmediaelement/emptied_event/index.md
index 34243d5fcd..659bd77e4b 100644
--- a/files/fr/web/api/htmlmediaelement/emptied_event/index.md
+++ b/files/fr/web/api/htmlmediaelement/emptied_event/index.md
@@ -3,78 +3,49 @@ title: 'HTMLMediaElement: emptied'
 slug: Web/API/HTMLMediaElement/emptied_event
 translation_of: Web/API/HTMLMediaElement/emptied_event
 ---
-<p>L'événement <strong><code>emptied</code></strong> est déclenché lorsqu'un média est devenu vide. Par exemple, cet événement est envoyé si le média a déjà été chargé (complètement ou partiellement), et que la méthode <em>load() </em>est appelé pour le recharger.</p>
+L'événement **`emptied`** est déclenché lorsqu'un média est devenu vide. Par exemple, cet événement est envoyé si le média a déjà été chargé (complètement ou partiellement), et que la méthode _load()_ est appelé pour le recharger.
 
-<h2 id="Informations_générales">Informations générales</h2>
+## Informations générales
 
-<dl>
- <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
- <dd style="margin: 0 0 0 120px;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-emptied">HTML5 media</a></dd>
- <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
- <dd style="margin: 0 0 0 120px;">{{domxref("Event")}}</dd>
- <dt style="float: left; text-align: right; width: 120px;">propagation</dt>
- <dd style="margin: 0 0 0 120px;">Non</dd>
- <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
- <dd style="margin: 0 0 0 120px;">Non</dd>
- <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
- <dd style="margin: 0 0 0 120px;">{{domxref("Element")}}</dd>
- <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
- <dd style="margin: 0 0 0 120px;">Aucune</dd>
-</dl>
+- Spécification
+  - : [HTML5 media](http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-emptied)
+- Interface
+  - : {{domxref("Event")}}
+- propagation
+  - : Non
+- Annulable
+  - : Non
+- Cible
+  - : {{domxref("Element")}}
+- Action par défaut
+  - : Aucune
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Property</th>
-   <th scope="col">Type</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>target</code> {{readonlyInline}}</td>
-   <td>{{domxref("EventTarget")}}</td>
-   <td>The event target (the topmost target in the DOM tree).</td>
-  </tr>
-  <tr>
-   <td><code>type</code> {{readonlyInline}}</td>
-   <td>{{domxref("DOMString")}}</td>
-   <td>The type of event.</td>
-  </tr>
-  <tr>
-   <td><code>bubbles</code> {{readonlyInline}}</td>
-   <td>{{jsxref("Boolean")}}</td>
-   <td>Whether the event normally bubbles or not.</td>
-  </tr>
-  <tr>
-   <td><code>cancelable</code> {{readonlyInline}}</td>
-   <td>{{jsxref("Boolean")}}</td>
-   <td>Whether the event is cancellable or not.</td>
-  </tr>
- </tbody>
-</table>
+| Property                              | Type                                 | Description                                            |
+| ------------------------------------- | ------------------------------------ | ------------------------------------------------------ |
+| `target` {{readonlyInline}}     | {{domxref("EventTarget")}} | The event target (the topmost target in the DOM tree). |
+| `type` {{readonlyInline}}       | {{domxref("DOMString")}}     | The type of event.                                     |
+| `bubbles` {{readonlyInline}}    | {{jsxref("Boolean")}}         | Whether the event normally bubbles or not.             |
+| `cancelable` {{readonlyInline}} | {{jsxref("Boolean")}}         | Whether the event is cancellable or not.               |
 
-<h2 id="Evénements_liés">Evénements liés</h2>
+## Evénements liés
 
-<ul>
- <li>{{event("playing")}}</li>
- <li>{{event("waiting")}}</li>
- <li>{{event("seeking")}}</li>
- <li>{{event("seeked")}}</li>
- <li>{{event("ended")}}</li>
- <li>{{event("loadedmetadata")}}</li>
- <li>{{event("loadeddata")}}</li>
- <li>{{event("canplay")}}</li>
- <li>{{event("canplaythrough")}}</li>
- <li>{{event("durationchange")}}</li>
- <li>{{event("timeupdate")}}</li>
- <li>{{event("play")}}</li>
- <li>{{event("pause")}}</li>
- <li>{{event("ratechange")}}</li>
- <li>{{event("volumechange")}}</li>
- <li>{{event("suspend")}}</li>
- <li>{{event("emptied")}}</li>
- <li>{{event("stalled")}}</li>
-</ul>
+- {{event("playing")}}
+- {{event("waiting")}}
+- {{event("seeking")}}
+- {{event("seeked")}}
+- {{event("ended")}}
+- {{event("loadedmetadata")}}
+- {{event("loadeddata")}}
+- {{event("canplay")}}
+- {{event("canplaythrough")}}
+- {{event("durationchange")}}
+- {{event("timeupdate")}}
+- {{event("play")}}
+- {{event("pause")}}
+- {{event("ratechange")}}
+- {{event("volumechange")}}
+- {{event("suspend")}}
+- {{event("emptied")}}
+- {{event("stalled")}}
diff --git a/files/fr/web/api/htmlmediaelement/ended_event/index.md b/files/fr/web/api/htmlmediaelement/ended_event/index.md
index db59f0187f..638d957d1c 100644
--- a/files/fr/web/api/htmlmediaelement/ended_event/index.md
+++ b/files/fr/web/api/htmlmediaelement/ended_event/index.md
@@ -3,96 +3,61 @@ title: 'HTMLMediaElement: ended'
 slug: Web/API/HTMLMediaElement/ended_event
 translation_of: Web/API/HTMLMediaElement/ended_event
 ---
-<p>L'événement <strong>ended</strong> est déclenché lorsque la lecture ou le streaming s'est arrêté parce que la fin du média a été atteinte ou qu'aucune donnée n'est disponible.</p>
-
-<p>L'événement se produit dans deux contextes liés mais unique:</p>
-
-<ul>
- <li>Les éléments basés sur {{domxref("HTMLMediaElement")}} ({{HTMLElement("audio")}} et {{HTMLElement("video")}}) déclenchent <strong>ended</strong> lorsque la lecture du média atteint la fin.</li>
- <li>Les pistes de flux média, qui sont basées sur l'interface {{domxref("MediaStreamTrack")}}, déclenchent <strong><code>ended</code></strong> lorsque la source de la piste interrompt définitivement l'envoi de données sur le flux. Il y'a différentes manières d'y arriver:
-  <ul>
-   <li>il n'y a plus de données à envoyer.</li>
-   <li>L'utilisateur a révoqué les autorisations nécessaires pour que les données soient envoyées.</li>
-   <li>Le matériel générant les données source a été supprimé ou éjecté.</li>
-   <li>Un peer distant a définitivement cessé d'envoyer des données. La mise en pause des médias ne génère pas l'événement <strong>ended</strong>.</li>
-  </ul>
- </li>
-</ul>
-
-<h2 id="Informations_générales">Informations générales</h2>
-
-<dl>
- <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
- <dd style="margin: 0 0 0 120px;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-ended">HTML5 media</a> et <a href="https://www.w3.org/TR/mediacapture-streams/#event-mediastreamtrack-ended">Media Capture and Streams</a></dd>
- <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
- <dd style="margin: 0 0 0 120px;">{{domxref("Event")}}</dd>
- <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
- <dd style="margin: 0 0 0 120px;">Non</dd>
- <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
- <dd style="margin: 0 0 0 120px;">Non</dd>
- <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
- <dd style="margin: 0 0 0 120px;">{{domxref("Element")}}</dd>
- <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
- <dd style="margin: 0 0 0 120px;">Aucune</dd>
-</dl>
-
-<div class="note">
-<p><strong>Note :</strong> Bien que cet événement soit défini dans deux spécifications, à ce moment-là, les deux spécifient cet événement de manière identique, nous avons donc documenté comme si elles ne faisaient qu'une. Si à un moment donné, cela change, la documentation sera révisée.</p>
-</div>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Property</th>
-   <th scope="col">Type</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>target</code> {{readonlyInline}}</td>
-   <td>{{domxref("EventTarget")}}</td>
-   <td>The event target (the topmost target in the DOM tree).</td>
-  </tr>
-  <tr>
-   <td><code>type</code> {{readonlyInline}}</td>
-   <td>{{domxref("DOMString")}}</td>
-   <td>The type of event.</td>
-  </tr>
-  <tr>
-   <td><code>bubbles</code> {{readonlyInline}}</td>
-   <td>{{jsxref("Boolean")}}</td>
-   <td>Whether the event normally bubbles or not.</td>
-  </tr>
-  <tr>
-   <td><code>cancelable</code> {{readonlyInline}}</td>
-   <td>{{jsxref("Boolean")}}</td>
-   <td>Whether the event is cancellable or not.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Evénements_liés">Evénements liés</h2>
-
-<ul>
- <li>{{event("playing")}}</li>
- <li>{{event("waiting")}}</li>
- <li>{{event("seeking")}}</li>
- <li>{{event("seeked")}}</li>
- <li>{{event("ended")}}</li>
- <li>{{event("loadedmetadata")}}</li>
- <li>{{event("loadeddata")}}</li>
- <li>{{event("canplay")}}</li>
- <li>{{event("canplaythrough")}}</li>
- <li>{{event("durationchange")}}</li>
- <li>{{event("timeupdate")}}</li>
- <li>{{event("play")}}</li>
- <li>{{event("pause")}}</li>
- <li>{{event("ratechange")}}</li>
- <li>{{event("volumechange")}}</li>
- <li>{{event("suspend")}}</li>
- <li>{{event("emptied")}}</li>
- <li>{{event("stalled")}}</li>
-</ul>
+L'événement **ended** est déclenché lorsque la lecture ou le streaming s'est arrêté parce que la fin du média a été atteinte ou qu'aucune donnée n'est disponible.
+
+L'événement se produit dans deux contextes liés mais unique:
+
+- Les éléments basés sur {{domxref("HTMLMediaElement")}} ({{HTMLElement("audio")}} et {{HTMLElement("video")}}) déclenchent **ended** lorsque la lecture du média atteint la fin.
+- Les pistes de flux média, qui sont basées sur l'interface {{domxref("MediaStreamTrack")}}, déclenchent **`ended`** lorsque la source de la piste interrompt définitivement l'envoi de données sur le flux. Il y'a différentes manières d'y arriver:
+
+  - il n'y a plus de données à envoyer.
+  - L'utilisateur a révoqué les autorisations nécessaires pour que les données soient envoyées.
+  - Le matériel générant les données source a été supprimé ou éjecté.
+  - Un peer distant a définitivement cessé d'envoyer des données. La mise en pause des médias ne génère pas l'événement **ended**.
+
+## Informations générales
+
+- Spécification
+  - : [HTML5 media](http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-ended) et [Media Capture and Streams](https://www.w3.org/TR/mediacapture-streams/#event-mediastreamtrack-ended)
+- Interface
+  - : {{domxref("Event")}}
+- Propagation
+  - : Non
+- Annulable
+  - : Non
+- Cible
+  - : {{domxref("Element")}}
+- Action par défaut
+  - : Aucune
+
+> **Note :** Bien que cet événement soit défini dans deux spécifications, à ce moment-là, les deux spécifient cet événement de manière identique, nous avons donc documenté comme si elles ne faisaient qu'une. Si à un moment donné, cela change, la documentation sera révisée.
+
+## Propriétés
+
+| Property                              | Type                                 | Description                                            |
+| ------------------------------------- | ------------------------------------ | ------------------------------------------------------ |
+| `target` {{readonlyInline}}     | {{domxref("EventTarget")}} | The event target (the topmost target in the DOM tree). |
+| `type` {{readonlyInline}}       | {{domxref("DOMString")}}     | The type of event.                                     |
+| `bubbles` {{readonlyInline}}    | {{jsxref("Boolean")}}         | Whether the event normally bubbles or not.             |
+| `cancelable` {{readonlyInline}} | {{jsxref("Boolean")}}         | Whether the event is cancellable or not.               |
+
+## Evénements liés
+
+- {{event("playing")}}
+- {{event("waiting")}}
+- {{event("seeking")}}
+- {{event("seeked")}}
+- {{event("ended")}}
+- {{event("loadedmetadata")}}
+- {{event("loadeddata")}}
+- {{event("canplay")}}
+- {{event("canplaythrough")}}
+- {{event("durationchange")}}
+- {{event("timeupdate")}}
+- {{event("play")}}
+- {{event("pause")}}
+- {{event("ratechange")}}
+- {{event("volumechange")}}
+- {{event("suspend")}}
+- {{event("emptied")}}
+- {{event("stalled")}}
diff --git a/files/fr/web/api/htmlmediaelement/index.md b/files/fr/web/api/htmlmediaelement/index.md
index 86941892db..ae4bf10a8b 100644
--- a/files/fr/web/api/htmlmediaelement/index.md
+++ b/files/fr/web/api/htmlmediaelement/index.md
@@ -10,228 +10,186 @@ tags:
   - Video
 translation_of: Web/API/HTMLMediaElement
 ---
-<p>{{APIRef("HTML DOM")}}</p>
-
-<p>L'interface <strong><code>HTMLMediaElement</code></strong> ajoute à {{domxref("HTMLElement")}} les propriétés et les méthodes nécessaires pour prendre en charge les fonctionnalités de base liées aux médias qui sont communes aux vidéos et aux documents audios. {{domxref("HTMLVideoElement")}} et {{domxref("HTMLAudioElement")}} héritent de cette interface.</p>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<p><em>Cette interface hérite aussi des propriétés de ses ancêtres </em><em>{{domxref("HTMLElement")}}, {{domxref("Element")}}, {{domxref("Node")}} et {{domxref("EventTarget")}}.</em></p>
-
-<dl>
- <dt>{{domxref("HTMLMediaElement.audioTracks")}}</dt>
- <dd>est une {{domxref("AudioTrackList")}} qui liste les objets {{domxref("AudioTrack")}} (<em>pistes audio</em>) contenus dans l'élément.</dd>
- <dt>{{domxref("HTMLMediaElement.autoplay")}}</dt>
- <dd><p>est un {{jsxref("Boolean")}} qui reflète l'attribut HTML {{htmlattrxref("autoplay","video")}}, indiquant si la lecture doit commencer automatiquement dès que suffisamment de médias sont disponibles pour le faire sans interruption.</p>
- <div class="note">
- <p><strong>Note :</strong> Les sites qui lisent automatiquement l'audio (ou les vidéos avec une piste audio) peuvent être désagréables pour les utilisateurs, il faut donc l'éviter autant que possible. Si vous devez offrir la fonctionnalité de lecture automatique, vous devez la faire activer (par un utilisateur qui la lance expréssement). Cependant, cela peut être utile lors de la création d'éléments média dont la source sera définie ultérieurement, sous le contrôle de l'utilisateur.</p>
- </div>
- </dd>
- <dt>{{domxref("HTMLMediaElement.buffered")}}{{readonlyinline}}</dt>
- <dd>Renvoie un objet {{domxref("TimeRanges")}} qui indique les plages de la source du média que le navigateur a en mémoire tampon (le cas échéant) au moment de l'accès à la propriété <code>buffered</code>.</dd>
- <dt>{{domxref("HTMLMediaElement.controller")}}</dt>
- <dd>est un objet {{domxref("MediaController")}} qui représente le contrôleur du média assigné à l'élément, ou <code>null</code> si aucun n'est défini.</dd>
- <dt>{{domxref("HTMLMediaElement.controls")}}</dt>
- <dd>est un {{jsxref('Boolean')}} qui reflète l'attribut HTML {{htmlattrxref("controls","video")}}, indiquant quels éléments de contrôle de ressource de l'interface utilisateur doivent être affichés.</dd>
- <dt>{{domxref("HTMLMediaElement.controlsList")}} {{readonlyinline}}</dt>
- <dd>renvoie une {{domxref("DOMTokenList")}} qui aide l'agent utilisateur à sélectionner les contrôles à afficher sur l'élément du média chaque fois que l'agent utilisateur affiche son propre jeu de contrôles. La <code>DOMTokenList</code> prend une ou plusieurs des trois valeurs possibles : <code>nodownload</code>, <code>nofullscreen</code> et <code>noremoteplayback</code>.</dd>
- <dt>{{domxref("HTMLMediaElement.crossOrigin")}}</dt>
- <dd>est une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) indiquant les <a href="/fr/docs/Web/HTML/Reglages_des_attributs_CORS">règlages CORS</a> pour cet élément de média.</dd>
- <dt>{{domxref("HTMLMediaElement.currentSrc")}}{{readonlyinline}}</dt>
- <dd>Renvoie une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) avec l'URL absolue de la ressource de média choisie.</dd>
- <dt>{{domxref("HTMLMediaElement.currentTime")}}</dt>
- <dd>est un <code>double</code> indiquant le temps de lecture actuel en secondes. La définition de cette valeur recherche le média à la nouvelle heure.</dd>
- <dt>{{domxref("HTMLMediaElement.defaultMuted")}}</dt>
- <dd>est un {{jsxref('Boolean')}} qui reflète l'attribut HTML {{htmlattrxref("muted","video")}}, qui indique si la sortie audio de l'élément média doit être désactivée par défaut.</dd>
- <dt>{{domxref("HTMLMediaElement.defaultPlaybackRate")}}</dt>
- <dd>est un <code>double</code> indiquant le taux de lecture par défaut pour le média.</dd>
- <dt>{{domxref("HTMLMediaElement.disableRemotePlayback")}}</dt>
- <dd>est un {{jsxref('Boolean')}} qui définit ou retourne l'état de lecture à distance, indiquant si l'élément de média est autorisé à avoir une interface de lecture à distance.</dd>
- <dt>{{domxref("HTMLMediaElement.duration")}}{{readonlyinline}}</dt>
- <dd>renvoie un <code>double</code> indiquant la longueur du média en secondes, ou 0 si aucune donnée multimédia n'est disponible.</dd>
- <dt>{{domxref("HTMLMediaElement.ended")}}{{readonlyinline}}</dt>
- <dd>renvoie un {{jsxref('Boolean')}} qui indique si l'élément média est terminé.</dd>
- <dt>{{domxref("HTMLMediaElement.error")}}{{readonlyinline}}</dt>
- <dd>renvoie un objet {{domxref("MediaError")}} pour l'erreur la plus récente, ou <code>null</code> s'il n'y a pas eu d'erreur.</dd>
- <dt>{{domxref("HTMLMediaElement.loop")}}</dt>
- <dd>est un {{jsxref('Boolean')}} qui reflète l'attribut HTML {{htmlattrxref("loop","video")}} (<em>boucle</em>), lequel indique si l'élément média doit recommencer quand il arrive à la fin.</dd>
- <dt>{{domxref("HTMLMediaElement.mediaGroup")}}</dt>
- <dd>est une {{domxref("DOMString")}} qui reflète l'attribut HTML {{htmlattrxref("mediagroup","video")}}, lequel indique le nom du groupe d'éléments auquel il appartient. Un groupe d'éléments média partage un  {{domxref('MediaController')}} commun.</dd>
- <dt>{{domxref("HTMLMediaElement.mediaKeys")}}{{readonlyinline}} {{experimental_inline}}</dt>
- <dd>Renvoie un objet {{domxref("MediaKeys")}} ou <code>null</code>. <code>MediaKeys</code> est un ensemble de clés qu'un élément <code>HTMLMediaElement</code> associé peut utiliser pour déchiffrer les données du média pendant la lecture.</dd>
- <dt>{{domxref("HTMLMediaElement.mozAudioCaptured")}}{{readonlyinline}} {{non-standard_inline}}</dt>
- <dd>renvoie un {{jsxref('Boolean')}}. Lié à la capture de flux audio.</dd>
- <dt>{{domxref("HTMLMediaElement.mozFragmentEnd")}} {{non-standard_inline}}</dt>
- <dd>est un <code>double</code> qui donne accès à l'heure de fin du fragment si l'élément média a un fragment URI pour <code>currentSrc</code>, sinon il est égal à la durée du média.</dd>
- <dt>{{domxref("HTMLMediaElement.mozFrameBufferLength")}} {{non-standard_inline}} {{deprecated_inline}}</dt>
- <dd>
- <p>est un <code>unsigned long</code> qui indique le nombre d'échantillons qui seront renvoyés dans le "framebuffer" de chaque évènement <code>MozAudioAvailable</code>. Ce nombre est un total pour tous les canaux, et par défaut est défini par le nombre de canaux * 1024 (c'est-à-dire, 2 canaux * 1024 échantillons = total 2048).</p>
-
- <p>La propriété <code>mozFrameBufferLength</code> peut être définie à une nouvelle valeur pour une latence plus faible, de plus grandes quantités de données, etc. La taille donnée <em>doit</em> être un nombre compris entre 512 et 16384. L'utilisation d'autres tailles entraîne la levée d'une exception. Le meilleur moment pour définir une nouvelle longueur est après le lancement de l'évènement <a href="/en-US/docs/Web/Events/loadedmetadata">loadedmetadata</a>, lorsque l'information audio est connue, mais avant que l'audio ait commencé ou que les événements <code>MozAudioAvailable</code> aient commencé à se déclencher.</p>
- </dd>
- <dt>{{domxref("HTMLMediaElement.mozSampleRate")}}{{readonlyinline}} {{non-standard_inline}} {{deprecated_inline}}</dt>
- <dd>renvoie un <code>double</code> représentant le nombre d'échantillons par seconde. Par exemple, 44100 échantillons par seconde correspondent à la fréquence d'échantillonnage utilisée par les CD audio.</dd>
- <dt>{{domxref("HTMLMediaElement.muted")}}</dt>
- <dd>est un {{jsxref('Boolean')}} qui détermine si l'audio est coupé. <code>true</code> (<em>vrai</em>) si l'audio est coupé et <code>false</code> (<em>faux</em>) sinon.</dd>
- <dt>{{domxref("HTMLMediaElement.networkState")}}{{readonlyinline}}</dt>
- <dd>renvoie un <code>unsigned short</code> (énumération) indiquant l'état actuel de récupération du média sur le réseau.</dd>
- <dt>{{domxref("HTMLMediaElement.paused")}}{{readonlyinline}}</dt>
- <dd>renvoie un {{jsxref('Boolean')}} qui indique si l'élément média est en pause.</dd>
- <dt>{{domxref("HTMLMediaElement.playbackRate")}}</dt>
- <dd>est un <code>double</code> qui indique la vitesse à laquelle le média est lu.</dd>
- <dt>{{domxref("HTMLMediaElement.played")}}{{readonlyinline}}</dt>
- <dd>renvoie un objet {{domxref('TimeRanges')}} qui contient les plages de la source média que le navigateur a lu, le cas échéant.</dd>
- <dt>{{domxref("HTMLMediaElement.preload")}}</dt>
- <dd>est une {{domxref("DOMString")}} (<em>chaîne</em>) qui reflète l'attribut HTML {{htmlattrxref("preload","video")}}, indiquant quelles données doivent être préchargées, le cas échéant. Les valeurs possibles sont : <code>none</code>, <code>metadata</code>, <code>auto</code>.</dd>
- <dt>{{domxref("HTMLMediaElement.preservesPitch")}} {{non-standard_inline}}</dt>
- <dd>est un {{jsxref('Boolean')}} qui détermine si la hauteur du son sera préservée. S'il est défini à <code>false</code> (<em>faux</em>), la hauteur du son s'ajustera à la vitesse de l'audio. C'est implémenté avec préfixe dans Firefox (<code>mozPreservesPitch</code>) et WebKit (<code>webkitPreservesPitch</code>).</dd>
- <dt>{{domxref("HTMLMediaElement.readyState")}}{{readonlyinline}}</dt>
- <dd>Renvoie un <code>unsigned short</code> (énumération) indiquant l'état de préparation des médias.</dd>
- <dt>{{domxref("HTMLMediaElement.seekable")}}{{readonlyinline}}</dt>
- <dd>Renvoie un objet {{domxref('TimeRanges')}} qui contient les plages de temps que l'utilisateur peut rechercher, le cas échéant.</dd>
- <dt>{{domxref("HTMLMediaElement.seeking")}}{{readonlyinline}}</dt>
- <dd>Renvoie un {{jsxref('Boolean')}} qui indique si les médias sont en train de chercher une nouvelle position.</dd>
- <dt>{{domxref("HTMLMediaElement.sinkId")}}{{readonlyinline}} {{experimental_inline}}</dt>
- <dd>Renvoie une {{domxref("DOMString")}} (<em>chaîne</em>) qui est l'identifiant unique du périphérique audio de sortie, ou une chaîne vide s'il utilise l'agent utilisateur par défaut. Cet identifiant doit être l'une des valeurs <code>MediaDeviceInfo.deviceid</code> retournées par {{domxref("MediaDevices.enumeratedDevices()")}}, <code>id-multimedia</code> ou <code>id-communications</code>.</dd>
- <dt>{{domxref("HTMLMediaElement.src")}}</dt>
- <dd>est une {{domxref("DOMString")}} qui reflète l'attribut HTML {{htmlattrxref("src","video")}}, lequel contient l'URL d'une ressource média à utiliser.</dd>
- <dt>{{domxref("HTMLMediaElement.srcObject")}}</dt>
- <dd>est un {{domxref('MediaStream')}} représentant le média à lire ou qui a joué dans le <code>HTMLMediaElement</code> courant, ou <code>null</code> s'il n'est pas assigné.</dd>
- <dt>{{domxref("HTMLMediaElement.textTracks")}}{{readonlyinline}}</dt>
- <dd>Renvoie la liste d'objets {{domxref("TextTrack")}} (<em>piste de texte</em>) contenus dans l'élément.</dd>
- <dt>{{domxref("HTMLMediaElement.videoTracks")}}{{readonlyinline}}</dt>
- <dd><p>Renvoie la liste d'objets {{domxref("VideoTrack")}} (<em>pistes vidéo</em>) contenus dans l'élément.</p>
- <div class="note">
- <p><strong>Note :</strong> Gecko ne prend en charge que la lecture d'une seule piste et l'analyse des métadonnées des pistes n'est disponible que pour les médias avec le format de conteneur Ogg.</p>
- </div>
- </dd>
- <dt>{{domxref("HTMLMediaElement.volume")}}</dt>
- <dd>est un <code>double</code> indiquant le volume audio, de 0.0 (silence) à 1.0 (le plus fort).</dd>
-</dl>
-
-<h3 id="Gestionnaires_dévènements">Gestionnaires d'évènements</h3>
-
-<dl>
- <dt>{{domxref("HTMLMediaElement.onencrypted")}}</dt>
- <dd>définit le {{domxref('EventHandler')}} (<em>gestionnaire d'évènements</em>) appelé quand le média est encrypté.</dd>
- <dt>{{domxref("HTMLMediaElement.onwaitingforkey")}}</dt>
- <dd>définit le {{domxref('EventHandler')}} (<em>gestionnaire d'évènements</em>) appelé quand la lecture est bloquée en attente d'une clé de chiffrement.</dd>
-</dl>
-
-<h2 id="Attributs_obsolètes">Attributs obsolètes</h2>
-
-<p>Ces attributs sont obsolètes et ne doivent plus être utilisés, même si un navigateur les prend encore en charge.</p>
-
-<dl>
- <dt>{{domxref("HTMLMediaElement.initialTime")}} {{readonlyinline}} {{non-standard_inline}} {{obsolete_inline}}</dt>
- <dd>renvoie un <code>double</code> qui indique la position de lecture initiale en secondes.</dd>
- <dt>{{domxref("HTMLMediaElement.mozChannels")}} {{readonlyinline}} {{non-standard_inline}} {{deprecated_inline}}</dt>
- <dd>renvoie un <code>double</code> représentant le nombre de canaux dans la ressource audio (c'est-à-dire 2 pour stéréo).</dd>
-</dl>
-
-<h3 id="Gestionnaires_dévènements_obsolètes">Gestionnaires d'évènements obsolètes</h3>
-
-<dl>
- <dt>{{domxref("HTMLMediaElement.onmozinterruptbegin")}} {{non-standard_inline}} {{obsolete_inline}}</dt>
- <dd>définit le {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) appelé lorsque l'élément média est interrompu du fait du gestionnaire de canaux audio. C'était une spécificité de Firefox, implémentée pour Firefox OS et supprimée à partir de Firefox 55.</dd>
- <dt>{{domxref("HTMLMediaElement.onmozinterruptend")}} {{non-standard_inline}} {{obsolete_inline}}</dt>
- <dd>définit le {{event("Event_handlers", "event handler")}} (<em>gestionnaire d'évènements</em>) appelé lorsque l'interruption est terminée. C'était une spécificité de Firefox, implémentée pour Firefox OS et supprimée à partir de Firefox 55.</dd>
-</dl>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<p><em>Cette interface hérite aussi des méthodes de ses ancêtres {{domxref("HTMLElement")}}, {{domxref('Element')}}, {{domxref('Node')}} et {{domxref('EventTarget')}}.</em></p>
-
-<dl>
- <dt>{{domxref("HTMLMediaElement.addTextTrack()")}}</dt>
- <dd>Ajoute une piste de texte (telle qu'une piste pour les sous-titres) à un élément de média.</dd>
- <dt>{{domxref("HTMLMediaElement.captureStream()")}} {{experimental_inline}}</dt>
- <dd>Renvoie {{domxref("MediaStream")}}, capture un flux du contenu du média.</dd>
- <dt>{{domxref("HTMLMediaElement.canPlayType()")}}</dt>
- <dd>Détermine si le type de média spécifié peut être lu.</dd>
- <dt>{{domxref("HTMLMediaElement.fastSeek()")}}</dt>
- <dd>cherche directement à l'heure donnée.</dd>
- <dt>{{domxref("HTMLMediaElement.load()")}}</dt>
- <dd>Réinitialise l'élément média et redémarre la ressource. Tous les événements en attente sont ignorés. La quantité de données média récupérées est toujours affectée par l'attribut <code>preload</code>. Cette méthode peut être utile pour libérer des ressources après la suppression de tout attribut <code>src</code> et des descendants d'éléments <code>source</code>. Sinon, il est généralement inutile d'utiliser cette méthode, à moins que cela ne soit nécessaire pour réanalyser les enfants de l'élément <code>source</code> après des modifications dynamiques.</dd>
- <dt>{{domxref("HTMLMediaElement.mozCaptureStream()")}} {{non-standard_inline}}</dt>
- <dd>[enter description]</dd>
- <dt>{{domxref("HTMLMediaElement.mozCaptureStreamUntilEnded()")}} {{non-standard_inline}}</dt>
- <dd>[enter description]</dd>
- <dt>{{domxref("HTMLMediaElement.mozGetMetadata()")}} {{non-standard_inline}}</dt>
- <dd>Renvoie un {{jsxref('Object')}}, qui contient des propriétés représentant les métadonnées de la ressource média en cours de lecture, comme paires <code>{key: value}</code>. Une copie distincte des données est renvoyée chaque fois que la méthode est appelée. Cette méthode doit être appelée après le déclenchement de l'évènement <a href="/en-US/docs/Web/Events/loadedmetadata">loadedmetadata</a>.</dd>
- <dt>{{domxref("HTMLMediaElement.pause()")}}</dt>
- <dd>met en pause la lecture du média.</dd>
- <dt>{{domxref("HTMLMediaElement.play()")}}</dt>
- <dd>commence la lecture du média.</dd>
- <dt>{{domxref("HTMLMediaElement.seekToNextFrame()")}} {{non-standard_inline}} {{experimental_inline}}</dt>
- <dd>cherche l'image suivante dans les médias. Cette méthode expérimentale non standard permet de conduire manuellement la lecture et le rendu des médias à une vitesse personnalisée, ou de se déplacer dans le média image par image pour effectuer un filtrage ou d'autres opérations.</dd>
- <dt>{{domxref("HTMLMediaElement.setMediaKeys()")}} {{experimental_inline}}</dt>
- <dd>Renvoie {{jsxref("Promise")}}. Définit les {{domxref("MediaKeys")}}, clés à utiliser quand le média doit être décrypté pendant la lecture.</dd>
- <dt>{{domxref("HTMLMediaElement.setSinkId()")}} {{experimental_inline}}</dt>
- <dd>définit l'identifiant du périphérique audio à utiliser en sortie et renvoie un {{jsxref("Promise")}}. Cela fonctionne uniquement quand l'application est autorisée à utiliser l'appareil spécifié.</dd>
-</dl>
-
-<h2 id="Méthodes_obsolètes">Méthodes obsolètes</h2>
-
-<p>Ces méthodes sont obsolètes et ne doivent plus être utilisées, même si un navigateur les prend encore en charge.</p>
-
-<dl>
- <dt>{{domxref("HTMLMediaElement.mozLoadFrom()")}} {{non-standard_inline}} {{deprecated_inline}}</dt>
- <dd>Cette méthode, disponible seulement pour les implémentations Mozilla, charge les données d'un autre élément de média. Ce fonctionnement est similaire à <code>load()</code> excepté qu'à la place d'exécuter l'algorithme normal de sélection de la ressource, la source est simplement définie sur  <code>currentSrc</code> de l'autre élément. Ceci est optimisé pour que cet élément accède à toutes les données mises en cache et en mémoire tampon de l'autre élément ; en fait, les deux éléments partagent les données téléchargées, de sorte que les données téléchargées par l'un ou l'autre élément sont disponibles pour les deux.</dd>
-</dl>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "the-video-element.html#htmlmediaelement", "HTMLMediaElement")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Pas de changement de {{SpecName('HTML5 W3C')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement")}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('EME', '#introduction', 'Encrypted Media Extensions')}}</td>
-   <td>{{Spec2('EME')}}</td>
-   <td>Ajout de {{domxref("MediaKeys")}}, {{domxref("MediaEncryptedEvent")}}, et setMediaKeys.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('Media Capture','#htmlmediaelement-extensions','HTMLMediaElement')}}</td>
-   <td>{{Spec2('Media Capture')}}</td>
-   <td>Ajout de <code>sinkId</code>, <code>setSinkId()</code> et <code>captureStream()</code>.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-
-
-<p>{{Compat("api.HTMLMediaElement")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>References
-  <ul>
-   <li>Les éléments HTML {{HTMLElement("video")}} et {{HTMLElement("audio")}}.</li>
-   <li>Les interfaces {{domxref("HTMLVideoElement")}} et {{domxref("HTMLAudioElement")}}, dérivées de <code>HTMLMediaElement</code>.</li>
-  </ul>
- </li>
- <li>Articles
-  <ul>
-   <li><a href="/fr/Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video">Contenu audio et video</a></li>
-   <li><a href="/fr/docs/Web/HTML/Formats_pour_audio_video">Formats pris en charge par <code>audio</code> et <code>video</code></a></li>
-   <li><a href="/fr/docs/Web/API/Web_Audio_API">Web Audio API</a></li>
-  </ul>
- </li>
-</ul>
+{{APIRef("HTML DOM")}}
+
+L'interface **`HTMLMediaElement`** ajoute à {{domxref("HTMLElement")}} les propriétés et les méthodes nécessaires pour prendre en charge les fonctionnalités de base liées aux médias qui sont communes aux vidéos et aux documents audios. {{domxref("HTMLVideoElement")}} et {{domxref("HTMLAudioElement")}} héritent de cette interface.
+
+## Propriétés
+
+_Cette interface hérite aussi des propriétés de ses ancêtres_ _{{domxref("HTMLElement")}}, {{domxref("Element")}}, {{domxref("Node")}} et {{domxref("EventTarget")}}._
+
+- {{domxref("HTMLMediaElement.audioTracks")}}
+  - : est une {{domxref("AudioTrackList")}} qui liste les objets {{domxref("AudioTrack")}} (_pistes audio_) contenus dans l'élément.
+- {{domxref("HTMLMediaElement.autoplay")}}
+
+  - : est un {{jsxref("Boolean")}} qui reflète l'attribut HTML {{htmlattrxref("autoplay","video")}}, indiquant si la lecture doit commencer automatiquement dès que suffisamment de médias sont disponibles pour le faire sans interruption.
+
+    > **Note :** Les sites qui lisent automatiquement l'audio (ou les vidéos avec une piste audio) peuvent être désagréables pour les utilisateurs, il faut donc l'éviter autant que possible. Si vous devez offrir la fonctionnalité de lecture automatique, vous devez la faire activer (par un utilisateur qui la lance expréssement). Cependant, cela peut être utile lors de la création d'éléments média dont la source sera définie ultérieurement, sous le contrôle de l'utilisateur.
+
+- {{domxref("HTMLMediaElement.buffered")}}{{readonlyinline}}
+  - : Renvoie un objet {{domxref("TimeRanges")}} qui indique les plages de la source du média que le navigateur a en mémoire tampon (le cas échéant) au moment de l'accès à la propriété `buffered`.
+- {{domxref("HTMLMediaElement.controller")}}
+  - : est un objet {{domxref("MediaController")}} qui représente le contrôleur du média assigné à l'élément, ou `null` si aucun n'est défini.
+- {{domxref("HTMLMediaElement.controls")}}
+  - : est un {{jsxref('Boolean')}} qui reflète l'attribut HTML {{htmlattrxref("controls","video")}}, indiquant quels éléments de contrôle de ressource de l'interface utilisateur doivent être affichés.
+- {{domxref("HTMLMediaElement.controlsList")}} {{readonlyinline}}
+  - : renvoie une {{domxref("DOMTokenList")}} qui aide l'agent utilisateur à sélectionner les contrôles à afficher sur l'élément du média chaque fois que l'agent utilisateur affiche son propre jeu de contrôles. La `DOMTokenList` prend une ou plusieurs des trois valeurs possibles : `nodownload`, `nofullscreen` et `noremoteplayback`.
+- {{domxref("HTMLMediaElement.crossOrigin")}}
+  - : est une {{domxref("DOMString")}} (_chaîne de caractères_) indiquant les [règlages CORS](/fr/docs/Web/HTML/Reglages_des_attributs_CORS) pour cet élément de média.
+- {{domxref("HTMLMediaElement.currentSrc")}}{{readonlyinline}}
+  - : Renvoie une {{domxref("DOMString")}} (_chaîne de caractères_) avec l'URL absolue de la ressource de média choisie.
+- {{domxref("HTMLMediaElement.currentTime")}}
+  - : est un `double` indiquant le temps de lecture actuel en secondes. La définition de cette valeur recherche le média à la nouvelle heure.
+- {{domxref("HTMLMediaElement.defaultMuted")}}
+  - : est un {{jsxref('Boolean')}} qui reflète l'attribut HTML {{htmlattrxref("muted","video")}}, qui indique si la sortie audio de l'élément média doit être désactivée par défaut.
+- {{domxref("HTMLMediaElement.defaultPlaybackRate")}}
+  - : est un `double` indiquant le taux de lecture par défaut pour le média.
+- {{domxref("HTMLMediaElement.disableRemotePlayback")}}
+  - : est un {{jsxref('Boolean')}} qui définit ou retourne l'état de lecture à distance, indiquant si l'élément de média est autorisé à avoir une interface de lecture à distance.
+- {{domxref("HTMLMediaElement.duration")}}{{readonlyinline}}
+  - : renvoie un `double` indiquant la longueur du média en secondes, ou 0 si aucune donnée multimédia n'est disponible.
+- {{domxref("HTMLMediaElement.ended")}}{{readonlyinline}}
+  - : renvoie un {{jsxref('Boolean')}} qui indique si l'élément média est terminé.
+- {{domxref("HTMLMediaElement.error")}}{{readonlyinline}}
+  - : renvoie un objet {{domxref("MediaError")}} pour l'erreur la plus récente, ou `null` s'il n'y a pas eu d'erreur.
+- {{domxref("HTMLMediaElement.loop")}}
+  - : est un {{jsxref('Boolean')}} qui reflète l'attribut HTML {{htmlattrxref("loop","video")}} (_boucle_), lequel indique si l'élément média doit recommencer quand il arrive à la fin.
+- {{domxref("HTMLMediaElement.mediaGroup")}}
+  - : est une {{domxref("DOMString")}} qui reflète l'attribut HTML {{htmlattrxref("mediagroup","video")}}, lequel indique le nom du groupe d'éléments auquel il appartient. Un groupe d'éléments média partage un  {{domxref('MediaController')}} commun.
+- {{domxref("HTMLMediaElement.mediaKeys")}}{{readonlyinline}} {{experimental_inline}}
+  - : Renvoie un objet {{domxref("MediaKeys")}} ou `null`. `MediaKeys` est un ensemble de clés qu'un élément `HTMLMediaElement` associé peut utiliser pour déchiffrer les données du média pendant la lecture.
+- {{domxref("HTMLMediaElement.mozAudioCaptured")}}{{readonlyinline}} {{non-standard_inline}}
+  - : renvoie un {{jsxref('Boolean')}}. Lié à la capture de flux audio.
+- {{domxref("HTMLMediaElement.mozFragmentEnd")}} {{non-standard_inline}}
+  - : est un `double` qui donne accès à l'heure de fin du fragment si l'élément média a un fragment URI pour `currentSrc`, sinon il est égal à la durée du média.
+- {{domxref("HTMLMediaElement.mozFrameBufferLength")}} {{non-standard_inline}} {{deprecated_inline}}
+
+  - : est un `unsigned long` qui indique le nombre d'échantillons qui seront renvoyés dans le "framebuffer" de chaque évènement `MozAudioAvailable`. Ce nombre est un total pour tous les canaux, et par défaut est défini par le nombre de canaux \* 1024 (c'est-à-dire, 2 canaux \* 1024 échantillons = total 2048).
+
+    La propriété `mozFrameBufferLength` peut être définie à une nouvelle valeur pour une latence plus faible, de plus grandes quantités de données, etc. La taille donnée _doit_ être un nombre compris entre 512 et 16384. L'utilisation d'autres tailles entraîne la levée d'une exception. Le meilleur moment pour définir une nouvelle longueur est après le lancement de l'évènement [loadedmetadata](/en-US/docs/Web/Events/loadedmetadata), lorsque l'information audio est connue, mais avant que l'audio ait commencé ou que les événements `MozAudioAvailable` aient commencé à se déclencher.
+
+- {{domxref("HTMLMediaElement.mozSampleRate")}}{{readonlyinline}} {{non-standard_inline}} {{deprecated_inline}}
+  - : renvoie un `double` représentant le nombre d'échantillons par seconde. Par exemple, 44100 échantillons par seconde correspondent à la fréquence d'échantillonnage utilisée par les CD audio.
+- {{domxref("HTMLMediaElement.muted")}}
+  - : est un {{jsxref('Boolean')}} qui détermine si l'audio est coupé. `true` (_vrai_) si l'audio est coupé et `false` (_faux_) sinon.
+- {{domxref("HTMLMediaElement.networkState")}}{{readonlyinline}}
+  - : renvoie un `unsigned short` (énumération) indiquant l'état actuel de récupération du média sur le réseau.
+- {{domxref("HTMLMediaElement.paused")}}{{readonlyinline}}
+  - : renvoie un {{jsxref('Boolean')}} qui indique si l'élément média est en pause.
+- {{domxref("HTMLMediaElement.playbackRate")}}
+  - : est un `double` qui indique la vitesse à laquelle le média est lu.
+- {{domxref("HTMLMediaElement.played")}}{{readonlyinline}}
+  - : renvoie un objet {{domxref('TimeRanges')}} qui contient les plages de la source média que le navigateur a lu, le cas échéant.
+- {{domxref("HTMLMediaElement.preload")}}
+  - : est une {{domxref("DOMString")}} (_chaîne_) qui reflète l'attribut HTML {{htmlattrxref("preload","video")}}, indiquant quelles données doivent être préchargées, le cas échéant. Les valeurs possibles sont : `none`, `metadata`, `auto`.
+- {{domxref("HTMLMediaElement.preservesPitch")}} {{non-standard_inline}}
+  - : est un {{jsxref('Boolean')}} qui détermine si la hauteur du son sera préservée. S'il est défini à `false` (_faux_), la hauteur du son s'ajustera à la vitesse de l'audio. C'est implémenté avec préfixe dans Firefox (`mozPreservesPitch`) et WebKit (`webkitPreservesPitch`).
+- {{domxref("HTMLMediaElement.readyState")}}{{readonlyinline}}
+  - : Renvoie un `unsigned short` (énumération) indiquant l'état de préparation des médias.
+- {{domxref("HTMLMediaElement.seekable")}}{{readonlyinline}}
+  - : Renvoie un objet {{domxref('TimeRanges')}} qui contient les plages de temps que l'utilisateur peut rechercher, le cas échéant.
+- {{domxref("HTMLMediaElement.seeking")}}{{readonlyinline}}
+  - : Renvoie un {{jsxref('Boolean')}} qui indique si les médias sont en train de chercher une nouvelle position.
+- {{domxref("HTMLMediaElement.sinkId")}}{{readonlyinline}} {{experimental_inline}}
+  - : Renvoie une {{domxref("DOMString")}} (_chaîne_) qui est l'identifiant unique du périphérique audio de sortie, ou une chaîne vide s'il utilise l'agent utilisateur par défaut. Cet identifiant doit être l'une des valeurs `MediaDeviceInfo.deviceid` retournées par {{domxref("MediaDevices.enumeratedDevices()")}}, `id-multimedia` ou `id-communications`.
+- {{domxref("HTMLMediaElement.src")}}
+  - : est une {{domxref("DOMString")}} qui reflète l'attribut HTML {{htmlattrxref("src","video")}}, lequel contient l'URL d'une ressource média à utiliser.
+- {{domxref("HTMLMediaElement.srcObject")}}
+  - : est un {{domxref('MediaStream')}} représentant le média à lire ou qui a joué dans le `HTMLMediaElement` courant, ou `null` s'il n'est pas assigné.
+- {{domxref("HTMLMediaElement.textTracks")}}{{readonlyinline}}
+  - : Renvoie la liste d'objets {{domxref("TextTrack")}} (_piste de texte_) contenus dans l'élément.
+- {{domxref("HTMLMediaElement.videoTracks")}}{{readonlyinline}}
+
+  - : Renvoie la liste d'objets {{domxref("VideoTrack")}} (_pistes vidéo_) contenus dans l'élément.
+
+    > **Note :** Gecko ne prend en charge que la lecture d'une seule piste et l'analyse des métadonnées des pistes n'est disponible que pour les médias avec le format de conteneur Ogg.
+
+- {{domxref("HTMLMediaElement.volume")}}
+  - : est un `double` indiquant le volume audio, de 0.0 (silence) à 1.0 (le plus fort).
+
+### Gestionnaires d'évènements
+
+- {{domxref("HTMLMediaElement.onencrypted")}}
+  - : définit le {{domxref('EventHandler')}} (_gestionnaire d'évènements_) appelé quand le média est encrypté.
+- {{domxref("HTMLMediaElement.onwaitingforkey")}}
+  - : définit le {{domxref('EventHandler')}} (_gestionnaire d'évènements_) appelé quand la lecture est bloquée en attente d'une clé de chiffrement.
+
+## Attributs obsolètes
+
+Ces attributs sont obsolètes et ne doivent plus être utilisés, même si un navigateur les prend encore en charge.
+
+- {{domxref("HTMLMediaElement.initialTime")}} {{readonlyinline}} {{non-standard_inline}} {{obsolete_inline}}
+  - : renvoie un `double` qui indique la position de lecture initiale en secondes.
+- {{domxref("HTMLMediaElement.mozChannels")}} {{readonlyinline}} {{non-standard_inline}} {{deprecated_inline}}
+  - : renvoie un `double` représentant le nombre de canaux dans la ressource audio (c'est-à-dire 2 pour stéréo).
+
+### Gestionnaires d'évènements obsolètes
+
+- {{domxref("HTMLMediaElement.onmozinterruptbegin")}} {{non-standard_inline}} {{obsolete_inline}}
+  - : définit le {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) appelé lorsque l'élément média est interrompu du fait du gestionnaire de canaux audio. C'était une spécificité de Firefox, implémentée pour Firefox OS et supprimée à partir de Firefox 55.
+- {{domxref("HTMLMediaElement.onmozinterruptend")}} {{non-standard_inline}} {{obsolete_inline}}
+  - : définit le {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) appelé lorsque l'interruption est terminée. C'était une spécificité de Firefox, implémentée pour Firefox OS et supprimée à partir de Firefox 55.
+
+## Méthodes
+
+_Cette interface hérite aussi des méthodes de ses ancêtres {{domxref("HTMLElement")}}, {{domxref('Element')}}, {{domxref('Node')}} et {{domxref('EventTarget')}}._
+
+- {{domxref("HTMLMediaElement.addTextTrack()")}}
+  - : Ajoute une piste de texte (telle qu'une piste pour les sous-titres) à un élément de média.
+- {{domxref("HTMLMediaElement.captureStream()")}} {{experimental_inline}}
+  - : Renvoie {{domxref("MediaStream")}}, capture un flux du contenu du média.
+- {{domxref("HTMLMediaElement.canPlayType()")}}
+  - : Détermine si le type de média spécifié peut être lu.
+- {{domxref("HTMLMediaElement.fastSeek()")}}
+  - : cherche directement à l'heure donnée.
+- {{domxref("HTMLMediaElement.load()")}}
+  - : Réinitialise l'élément média et redémarre la ressource. Tous les événements en attente sont ignorés. La quantité de données média récupérées est toujours affectée par l'attribut `preload`. Cette méthode peut être utile pour libérer des ressources après la suppression de tout attribut `src` et des descendants d'éléments `source`. Sinon, il est généralement inutile d'utiliser cette méthode, à moins que cela ne soit nécessaire pour réanalyser les enfants de l'élément `source` après des modifications dynamiques.
+- {{domxref("HTMLMediaElement.mozCaptureStream()")}} {{non-standard_inline}}
+  - : \[enter description]
+- {{domxref("HTMLMediaElement.mozCaptureStreamUntilEnded()")}} {{non-standard_inline}}
+  - : \[enter description]
+- {{domxref("HTMLMediaElement.mozGetMetadata()")}} {{non-standard_inline}}
+  - : Renvoie un {{jsxref('Object')}}, qui contient des propriétés représentant les métadonnées de la ressource média en cours de lecture, comme paires `{key: value}`. Une copie distincte des données est renvoyée chaque fois que la méthode est appelée. Cette méthode doit être appelée après le déclenchement de l'évènement [loadedmetadata](/en-US/docs/Web/Events/loadedmetadata).
+- {{domxref("HTMLMediaElement.pause()")}}
+  - : met en pause la lecture du média.
+- {{domxref("HTMLMediaElement.play()")}}
+  - : commence la lecture du média.
+- {{domxref("HTMLMediaElement.seekToNextFrame()")}} {{non-standard_inline}} {{experimental_inline}}
+  - : cherche l'image suivante dans les médias. Cette méthode expérimentale non standard permet de conduire manuellement la lecture et le rendu des médias à une vitesse personnalisée, ou de se déplacer dans le média image par image pour effectuer un filtrage ou d'autres opérations.
+- {{domxref("HTMLMediaElement.setMediaKeys()")}} {{experimental_inline}}
+  - : Renvoie {{jsxref("Promise")}}. Définit les {{domxref("MediaKeys")}}, clés à utiliser quand le média doit être décrypté pendant la lecture.
+- {{domxref("HTMLMediaElement.setSinkId()")}} {{experimental_inline}}
+  - : définit l'identifiant du périphérique audio à utiliser en sortie et renvoie un {{jsxref("Promise")}}. Cela fonctionne uniquement quand l'application est autorisée à utiliser l'appareil spécifié.
+
+## Méthodes obsolètes
+
+Ces méthodes sont obsolètes et ne doivent plus être utilisées, même si un navigateur les prend encore en charge.
+
+- {{domxref("HTMLMediaElement.mozLoadFrom()")}} {{non-standard_inline}} {{deprecated_inline}}
+  - : Cette méthode, disponible seulement pour les implémentations Mozilla, charge les données d'un autre élément de média. Ce fonctionnement est similaire à `load()` excepté qu'à la place d'exécuter l'algorithme normal de sélection de la ressource, la source est simplement définie sur  `currentSrc` de l'autre élément. Ceci est optimisé pour que cet élément accède à toutes les données mises en cache et en mémoire tampon de l'autre élément ; en fait, les deux éléments partagent les données téléchargées, de sorte que les données téléchargées par l'un ou l'autre élément sont disponibles pour les deux.
+
+## Spécifications
+
+| Spécification                                                                                                            | Statut                               | Commentaire                                                                                               |
+| ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | --------------------------------------------------------------------------------------------------------- |
+| {{SpecName('HTML WHATWG', "the-video-element.html#htmlmediaelement", "HTMLMediaElement")}} | {{Spec2('HTML WHATWG')}}     | Pas de changement de {{SpecName('HTML5 W3C')}}                                                     |
+| {{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement")}} | {{Spec2('HTML5 W3C')}}         | Définition initiale.                                                                                      |
+| {{SpecName('EME', '#introduction', 'Encrypted Media Extensions')}}                                 | {{Spec2('EME')}}                 | Ajout de {{domxref("MediaKeys")}}, {{domxref("MediaEncryptedEvent")}}, et setMediaKeys. |
+| {{SpecName('Media Capture','#htmlmediaelement-extensions','HTMLMediaElement')}}                 | {{Spec2('Media Capture')}} | Ajout de `sinkId`, `setSinkId()` et `captureStream()`.                                                    |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.HTMLMediaElement")}}
+
+## Voir aussi
+
+- References
+
+  - Les éléments HTML {{HTMLElement("video")}} et {{HTMLElement("audio")}}.
+  - Les interfaces {{domxref("HTMLVideoElement")}} et {{domxref("HTMLAudioElement")}}, dérivées de `HTMLMediaElement`.
+
+- Articles
+
+  - [Contenu audio et video](/fr/Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video)
+  - [Formats pris en charge par `audio` et `video`](/fr/docs/Web/HTML/Formats_pour_audio_video)
+  - [Web Audio API](/fr/docs/Web/API/Web_Audio_API)
diff --git a/files/fr/web/api/htmlmediaelement/play/index.md b/files/fr/web/api/htmlmediaelement/play/index.md
index 67d72a2cc2..5ec797381e 100644
--- a/files/fr/web/api/htmlmediaelement/play/index.md
+++ b/files/fr/web/api/htmlmediaelement/play/index.md
@@ -13,74 +13,56 @@ tags:
   - play
 translation_of: Web/API/HTMLMediaElement/play
 ---
-<p>{{APIRef("HTML DOM")}} {{SeeCompatTable}}</p>
+{{APIRef("HTML DOM")}} {{SeeCompatTable}}
 
-<p>La méthode <strong><code>HTMLMediaElement.play()</code></strong> essaie de commencer la lecture du média et renvoie une {{jsxref("Promise")}} qui est résolue quand la lecture a commencé avec succès, et est rejetée si la lecture ne peut commencer pour n'importe quelle raison (comme, par exemple, une erreur de permission).</p>
+La méthode **`HTMLMediaElement.play()`** essaie de commencer la lecture du média et renvoie une {{jsxref("Promise")}} qui est résolue quand la lecture a commencé avec succès, et est rejetée si la lecture ne peut commencer pour n'importe quelle raison (comme, par exemple, une erreur de permission).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var <em>Promise</em> = <em>HTMLMediaElement</em>.play();</pre>
+    var Promise = HTMLMediaElement.play();
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<p>Aucun.</p>
+Aucun.
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Une {{jsxref("Promise")}} qui est résolue quand la lecture a commencé, ou rejetée si la lecture ne peut commencer.</p>
+Une {{jsxref("Promise")}} qui est résolue quand la lecture a commencé, ou rejetée si la lecture ne peut commencer.
 
-<h3 id="Exceptions">Exceptions</h3>
+### Exceptions
 
-<p>Le <em>gestionnaire de rejet</em> de la promesse est appelé avec un nom d'exception comme seul paramètre (contrairement aux exceptions traditionnelles). Les exceptions possibles incluent :</p>
+Le *gestionnaire de rejet* de la promesse est appelé avec un nom d'exception comme seul paramètre (contrairement aux exceptions traditionnelles). Les exceptions possibles incluent :
 
-<dl>
- <dt><code>NotAllowedError</code></dt>
- <dd>Le client (navigateur) ou système d'exploitation ne permet pas la lecture du média dans le contexte ou la situation actuelle. Ceci peut arriver, par exemple, si le navigateur oblige l'utilisateur à lancer manuellement le média en cliquant sur le bouton "play".</dd>
- <dt><code>NotSupportedError</code></dt>
- <dd>La source du média (qui peut être spécifié comme un {{domxref("MediaStream")}}, {{domxref("MediaSource")}}, {{domxref("Blob")}}, ou {{domxref("File")}}, par example) ne représente pas un format supporté.</dd>
-</dl>
+- `NotAllowedError`
+  - : Le client (navigateur) ou système d'exploitation ne permet pas la lecture du média dans le contexte ou la situation actuelle. Ceci peut arriver, par exemple, si le navigateur oblige l'utilisateur à lancer manuellement le média en cliquant sur le bouton "play".
+- `NotSupportedError`
+  - : La source du média (qui peut être spécifié comme un {{domxref("MediaStream")}}, {{domxref("MediaSource")}}, {{domxref("Blob")}}, ou {{domxref("File")}}, par example) ne représente pas un format supporté.
 
-<p>D'autres types d'exceptions peuvent survenir selon l'implémentation du navigateur, du lecteur de média, etc.</p>
+D'autres types d'exceptions peuvent survenir selon l'implémentation du navigateur, du lecteur de média, etc.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Cet exemple commence la lecture d'un élément <code>video</code> et met à jour une box avec un message de succès si la lecture a bien démarré et un message d'erreur si une erreur survient.</p>
+Cet exemple commence la lecture d'un élément `video` et met à jour une box avec un message de succès si la lecture a bien démarré et un message d'erreur si une erreur survient.
 
-<pre class="brush: js">let myVideo = document.getElementById("myVideoElement");
+```js
+let myVideo = document.getElementById("myVideoElement");
 
-myVideo.play().then(() =&gt; {
+myVideo.play().then(() => {
   document.getElementById("statusText").innerHTML = "Yay ! La vidéo est lancée !";
-}).catch((error) =&gt; {
+}).catch((error) => {
  document.getElementById("statusText").innerHTML = "Erreur: " + error;
 });
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th>Spécification</th>
-   <th>Statut</th>
-   <th>Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'embedded-content.html#dom-media-play', 'play()')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Définition initiale; living specification.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C','embedded-content-0.html#playing-the-media-resource','play()')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<div class="note">
-<p><strong>Note :</strong> Les versions WHATWG et W3C de la spécification diffèrent (depuis le 20 Avril 2016) par le fait que cette méthode renvoie respectivement une {{jsxref("Promise")}} ou rien du tout.</p>
-</div>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.HTMLMediaElement.play")}}</p>
+```
+
+## Spécifications
+
+| Spécification                                                                                                        | Statut                           | Commentaire                                |
+| -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------ |
+| {{SpecName('HTML WHATWG', 'embedded-content.html#dom-media-play', 'play()')}}             | {{Spec2('HTML WHATWG')}} | Définition initiale; living specification. |
+| {{SpecName('HTML5 W3C','embedded-content-0.html#playing-the-media-resource','play()')}} | {{Spec2('HTML5 W3C')}}     | Définition initiale.                       |
+
+> **Note :** Les versions WHATWG et W3C de la spécification diffèrent (depuis le 20 Avril 2016) par le fait que cette méthode renvoie respectivement une {{jsxref("Promise")}} ou rien du tout.
+
+## Compatibilité des navigateurs
+
+{{Compat("api.HTMLMediaElement.play")}}
diff --git a/files/fr/web/api/htmlmediaelement/volume/index.md b/files/fr/web/api/htmlmediaelement/volume/index.md
index 718b08a924..9f33840d7c 100644
--- a/files/fr/web/api/htmlmediaelement/volume/index.md
+++ b/files/fr/web/api/htmlmediaelement/volume/index.md
@@ -12,55 +12,36 @@ tags:
   - sound
 translation_of: Web/API/HTMLMediaElement/volume
 ---
-<p>{{APIRef("HTML DOM")}}</p>
+{{APIRef("HTML DOM")}}
 
-<p>La propriété <strong><code>HTMLMediaElement.volume</code></strong> définit le volume auquel le média doit être lu. </p>
+La propriété **`HTMLMediaElement.volume`** définit le volume auquel le média doit être lu.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var <em>volume</em> ​= <em>video</em>.volume; //1</pre>
+    var volume ​= video.volume; //1
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>Une valeur de type double (nombre à virgule) inclut entre 0 et 1, si elle vaut 0 le son est coupé et elle vaut 1 le son est le plus élevé possible.</p>
+Une valeur de type double (nombre à virgule) inclut entre 0 et 1, si elle vaut 0 le son est coupé et elle vaut 1 le son est le plus élevé possible.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre>var obj = document.createElement('audio');
-console.log(obj.volume); // 1
-obj.volume = 0.75;</pre>
+    var obj = document.createElement('audio');
+    console.log(obj.volume); // 1
+    obj.volume = 0.75;
 
-<h2 id="Specifications">Specifications</h2>
+## Specifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "#dom-media-volume", "HTMLMediaElement.volume")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement.volume")}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+| Specification                                                                                                                    | Statut                           | Commentaire |
+| -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- |
+| {{SpecName('HTML WHATWG', "#dom-media-volume", "HTMLMediaElement.volume")}}                             | {{Spec2('HTML WHATWG')}} |             |
+| {{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement.volume")}} | {{Spec2('HTML5 W3C')}}     |             |
 
-<h2 id="Compatibilité_navigateur">Compatibilité navigateur</h2>
+## Compatibilité navigateur
 
+{{Compat("api.HTMLMediaElement.volume")}}
 
+## Voir aussi
 
-<p>{{Compat("api.HTMLMediaElement.volume")}}</p>
-
-<h2 id="See_Also">Voir aussi</h2>
-
-<ul>
- <li>The interface defining it, {{domxref("HTMLMediaElement")}}.</li>
- <li>{{domxref("HTMLMediaElement.muted")}}</li>
-</ul>
+- The interface defining it, {{domxref("HTMLMediaElement")}}.
+- {{domxref("HTMLMediaElement.muted")}}
diff --git a/files/fr/web/api/htmloptionelement/index.md b/files/fr/web/api/htmloptionelement/index.md
index b1294570c6..659bee7a16 100644
--- a/files/fr/web/api/htmloptionelement/index.md
+++ b/files/fr/web/api/htmloptionelement/index.md
@@ -9,92 +9,117 @@ tags:
   - Reference
 translation_of: Web/API/HTMLOptionElement
 ---
-<div>{{APIRef("HTML DOM")}}</div>
+{{APIRef("HTML DOM")}}
 
-<p>L'interface <code>HTMLOptionElement</code> représente l'élément {{HTMLElement("option")}} et hérite de toutes les classes et méthodes de l'intreface {{domxref("HTMLElement")}} .</p>
+L'interface `HTMLOptionElement` représente l'élément {{HTMLElement("option")}} et hérite de toutes les classes et méthodes de l'intreface {{domxref("HTMLElement")}} .
 
-<h2 id="Properties"><em>Propriétés</em></h2>
+## _Propriétés_
+
+_hérite des propriétés de son parent, {{domxref("HTMLElement")}}._
 
-<p><em>hérite des propriétés de son parent, {{domxref("HTMLElement")}}.</em></p>
 <table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Nom</th>
-   <th scope="col">Type</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>defaultSelected</code></td>
-   <td>{{domxref("Boolean")}}</td>
-   <td>
-    <p>Contient la valeur initiale de l'attribut HTML {{htmlattrxref("selected", "option")}} ,indiquant si l'option est sélectionnée par défaut ou non.</p>
-   </td>
-  </tr>
-  <tr>
-   <td><code>disabled</code></td>
-   <td>{{domxref("Boolean")}}</td>
-   <td>
-    <p>Retourne la valeur de l'attribut HTML {{htmlattrxref("disabled", "option")}} , cet attribut indique que l'option ne peut pas être sélectionnée. Une option peut aussi être désactivée lorsqu'elle est fille d'un élément {{HTMLElement("optgroup")}} désactivé.</p>
-   </td>
-  </tr>
-  <tr>
-   <td><code>form</code>{{readonlyInline}}</td>
-   <td>{{domxref("HTMLFormElement")}}</td>
-   <td>
-    <p>Si l'option est une fille d'un élément {{HTMLElement("select")}}, cette propriété à la même valeur que l'attribut <code>form</code> de l'objet {{DomXref("HTMLSelectElement")}}</p>
-    <p>correspondant, sinon , sa valeur est <code>null</code>.</p>
-   </td>
-  </tr>
-  <tr>
-   <td><code>index</code>{{readonlyInline}}</td>
-   <td><code>long</code></td>
-   <td>
-    <p>La position de l'option dans la liste d'options à laquelle elle appartient, dans un ordre arborescent. Si l'option ne fait pas partie d'une liste d'options , comme dans le cas où elle appartient à l'élément {{HTMLElement("datalist")}} sa valeur est 0.</p>
-   </td>
-  </tr>
-  <tr>
-   <td><code>label</code></td>
-   <td>{{domxref("DOMString")}}</td>
-   <td>
-    <p>Reflète la valeur de l'attribut {{htmlattrxref("label", "option")}}, qui fourni un libellé à l'option. si cet attribut n'est pas spécifié, sa lecture retourne le text de l'élément en question.</p>
-   </td>
-  </tr>
-  <tr>
-   <td><code>selected</code></td>
-   <td>{{domxref("Boolean")}}</td>
-   <td>
-    <p>Indique si l'option est sélectionnée ou non .</p>
-   </td>
-  </tr>
-  <tr>
-   <td><code>text</code></td>
-   <td>{{domxref("DOMString")}}</td>
-   <td>
-    <p>Contient le contenu texte de l'élément.</p>
-   </td>
-  </tr>
-  <tr>
-   <td><code>value</code></td>
-   <td>{{domxref("DOMString")}}</td>
-   <td>
-    <p>Retourne la valeur de l'attribut HTML {{htmlattrxref("value", "option")}}, s'il existe, sinon la valeur de la propriété {{domxref("Node.textContent")}} est retournée.</p>
-   </td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th scope="col">Nom</th>
+      <th scope="col">Type</th>
+      <th scope="col">Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>defaultSelected</code></td>
+      <td>{{domxref("Boolean")}}</td>
+      <td>
+        <p>
+          Contient la valeur initiale de l'attribut HTML
+          {{htmlattrxref("selected", "option")}} ,indiquant si
+          l'option est sélectionnée par défaut ou non.
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td><code>disabled</code></td>
+      <td>{{domxref("Boolean")}}</td>
+      <td>
+        <p>
+          Retourne la valeur de l'attribut HTML
+          {{htmlattrxref("disabled", "option")}} , cet attribut
+          indique que l'option ne peut pas être sélectionnée. Une option peut
+          aussi être désactivée lorsqu'elle est fille d'un élément
+          {{HTMLElement("optgroup")}} désactivé.
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td><code>form</code>{{readonlyInline}}</td>
+      <td>{{domxref("HTMLFormElement")}}</td>
+      <td>
+        <p>
+          Si l'option est une fille d'un élément
+          {{HTMLElement("select")}}, cette propriété à la même valeur que
+          l'attribut <code>form</code> de l'objet
+          {{DomXref("HTMLSelectElement")}}
+        </p>
+        <p>correspondant, sinon , sa valeur est <code>null</code>.</p>
+      </td>
+    </tr>
+    <tr>
+      <td><code>index</code>{{readonlyInline}}</td>
+      <td><code>long</code></td>
+      <td>
+        <p>
+          La position de l'option dans la liste d'options à laquelle elle
+          appartient, dans un ordre arborescent. Si l'option ne fait pas partie
+          d'une liste d'options , comme dans le cas où elle appartient à
+          l'élément {{HTMLElement("datalist")}} sa valeur est 0.
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td><code>label</code></td>
+      <td>{{domxref("DOMString")}}</td>
+      <td>
+        <p>
+          Reflète la valeur de l'attribut
+          {{htmlattrxref("label", "option")}}, qui fourni un
+          libellé à l'option. si cet attribut n'est pas spécifié, sa lecture
+          retourne le text de l'élément en question.
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td><code>selected</code></td>
+      <td>{{domxref("Boolean")}}</td>
+      <td><p>Indique si l'option est sélectionnée ou non .</p></td>
+    </tr>
+    <tr>
+      <td><code>text</code></td>
+      <td>{{domxref("DOMString")}}</td>
+      <td><p>Contient le contenu texte de l'élément.</p></td>
+    </tr>
+    <tr>
+      <td><code>value</code></td>
+      <td>{{domxref("DOMString")}}</td>
+      <td>
+        <p>
+          Retourne la valeur de l'attribut HTML
+          {{htmlattrxref("value", "option")}}, s'il existe, sinon
+          la valeur de la propriété {{domxref("Node.textContent")}} est
+          retournée.
+        </p>
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Methods">Méthodes</h2>
+## Méthodes
 
-<p><em>Hérite des méthodes de son parent , {{domxref("HTMLElement")}}.</em></p>
+_Hérite des méthodes de son parent , {{domxref("HTMLElement")}}._
 
-<dl>
- <dt>{{domxref("HTMLOptionElement.Option()")}}</dt>
- <dd><p>C'est le constructeur créant l'objet <code>HTMLOptionElement</code> object. il accepte quatre valeurs : le texte à afficher , <code>text</code>, la valeur associée au texte , <code>value</code>, la valeur du <code>defaultSelected</code>, et la valeur du <code>selected</code>. les trois dernières sont optionnelles.</p></dd>
-</dl>
+- {{domxref("HTMLOptionElement.Option()")}}
+  - : C'est le constructeur créant l'objet `HTMLOptionElement` object. il accepte quatre valeurs : le texte à afficher , `text`, la valeur associée au texte , `value`, la valeur du `defaultSelected`, et la valeur du `selected`. les trois dernières sont optionnelles.
 
-<h2 id="Specifications">Spécifications</h2>
+## Spécifications
 
 <table class="standard-table">
   <thead>
@@ -106,41 +131,56 @@ translation_of: Web/API/HTMLOptionElement
   </thead>
   <tbody>
     <tr>
-      <td>{{SpecName('HTML WHATWG', "the-button-element.html#the-option-element", "HTMLOptionElement")}}</td>
+      <td>
+        {{SpecName('HTML WHATWG', "the-button-element.html#the-option-element", "HTMLOptionElement")}}
+      </td>
       <td>{{Spec2('HTML WHATWG')}}</td>
       <td>
         <p>pas de changement depuis la {{SpecName("HTML5 W3C")}}.</p>
       </td>
     </tr>
     <tr>
-      <td>{{SpecName('HTML5 W3C', "forms.html#the-option-element", "HTMLOptionElement")}}</td>
+      <td>
+        {{SpecName('HTML5 W3C', "forms.html#the-option-element", "HTMLOptionElement")}}
+      </td>
       <td>{{Spec2('HTML5 W3C')}}</td>
       <td>
-        <p>Le constructeur, <code>Option()</code>, a été ajouté. la propriété <code>form </code>peut avoir la valeur <code>null</code>.</p>
+        <p>
+          Le constructeur, <code>Option()</code>, a été ajouté. la propriété
+          <code>form </code>peut avoir la valeur <code>null</code>.
+        </p>
       </td>
     </tr>
     <tr>
-      <td>{{SpecName('DOM2 HTML', 'html.html#ID-70901257', 'HTMLOptionElement')}}</td>
+      <td>
+        {{SpecName('DOM2 HTML', 'html.html#ID-70901257', 'HTMLOptionElement')}}
+      </td>
       <td>{{Spec2('DOM2 HTML')}}</td>
       <td>
-        <p>Le sens de la propriété <code>selected a changé</code>: elle indique désormais si l'option est sélectionnée à l'instant , au lieu d'indiquer si elle a été initialement sélectionnée.</p>
-        <p>La propriété <code>defaultSelected</code> n'est plus en lecture seule</p>
+        <p>
+          Le sens de la propriété <code>selected a changé</code>: elle indique
+          désormais si l'option est sélectionnée à l'instant , au lieu
+          d'indiquer si elle a été initialement sélectionnée.
+        </p>
+        <p>
+          La propriété <code>defaultSelected</code> n'est plus en lecture seule
+        </p>
       </td>
     </tr>
     <tr>
-      <td>{{SpecName('DOM1', 'level-one-html.html#ID-70901257', 'HTMLOptionElement')}}</td>
+      <td>
+        {{SpecName('DOM1', 'level-one-html.html#ID-70901257', 'HTMLOptionElement')}}
+      </td>
       <td>{{Spec2('DOM1')}}</td>
       <td>La définition initiale .</td>
     </tr>
   </tbody>
 </table>
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.HTMLOptionElement")}}</p>
+{{Compat("api.HTMLOptionElement")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>L'élément HTML qui implémente cette interface : {{ HTMLElement("option") }}.</li>
-</ul>
+- L'élément HTML qui implémente cette interface : {{ HTMLElement("option") }}.
diff --git a/files/fr/web/api/htmloptionelement/option/index.md b/files/fr/web/api/htmloptionelement/option/index.md
index 975d2cc634..70ed813c2d 100644
--- a/files/fr/web/api/htmloptionelement/option/index.md
+++ b/files/fr/web/api/htmloptionelement/option/index.md
@@ -8,35 +8,34 @@ tags:
   - HTMLOptionElement
 translation_of: Web/API/HTMLOptionElement/Option
 ---
-<div>{{APIRef("HTML DOM")}}</div>
+{{APIRef("HTML DOM")}}
 
-<p>Le constructeur <strong><code>Option()</code></strong> permet de créer un nouvel objet {{domxref("HTMLOptionElement")}}.</p>
+Le constructeur **`Option()`** permet de créer un nouvel objet {{domxref("HTMLOptionElement")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var <em>o</em><em>ptionElementReference</em> = new Option(<em>text</em>, <em>value</em>, <em>defaultSelected</em>, <em>selected</em>);</pre>
+    var optionElementReference = new Option(text, value, defaultSelected, selected);
 
-<h3 id="Parameters">Parameters</h3>
+### Parameters
 
-<dl>
- <dt><code>text</code> {{optional_inline}}</dt>
- <dd>Une chaîne de caractères {{domxref("DOMString")}} représentant le contenu de l'élément, c'est-à-dire le texte affiché. Si cet argument n'est pas spécifié, c'est la chaîne vide qui sera utilisée.</dd>
- <dt><code>value</code> {{optional_inline}}</dt>
- <dd>Une chaîne de caractères {{domxref("DOMString")}} représentant la valeur de {{domxref("HTMLOptionElement")}}, c’est-à-dire l’attribut HTML <code>value</code> de l'élément {{htmlelement("option")}}. Si cet argument n'est pas fourni, ce sera la valeur de <code>text</code> qui sera reprise comme valeur (par exemple pour l'élément {{htmlelement("select")}} associé lorsque le formulaire est envoyé au serveur).</dd>
- <dt><code>defaultSelected</code> {{optional_inline}}</dt>
- <dd>Un {{domxref("Boolean")}} qui définit la valeur de l'attribut {{htmlattrxref("selected", "option")}}, c'est-à-dire que cette {{htmlelement("option")}} sera la valeur par défaut sélectionné dans l'élément {{htmlelement("select")}} lors du premier chargement de la page. S'il n'est pas spécifié, la valeur <code>false</code> sera utilisée par défaut.</dd>
- <dt><code>selected</code> {{optional_inline}}</dt>
- <dd>Un {{domxref("Boolean")}} qui définit l'état sélectionné de l'option, la valeur par défaut est <code>false</code> (non sélectionné). Si cet argument est absent et même si l'argument <code>defaultSelected</code> vaut <code>true</code>, l'option ne sera pas pas sélectionnée.</dd>
-</dl>
+- `text` {{optional_inline}}
+  - : Une chaîne de caractères {{domxref("DOMString")}} représentant le contenu de l'élément, c'est-à-dire le texte affiché. Si cet argument n'est pas spécifié, c'est la chaîne vide qui sera utilisée.
+- `value` {{optional_inline}}
+  - : Une chaîne de caractères {{domxref("DOMString")}} représentant la valeur de {{domxref("HTMLOptionElement")}}, c’est-à-dire l’attribut HTML `value` de l'élément {{htmlelement("option")}}. Si cet argument n'est pas fourni, ce sera la valeur de `text` qui sera reprise comme valeur (par exemple pour l'élément {{htmlelement("select")}} associé lorsque le formulaire est envoyé au serveur).
+- `defaultSelected` {{optional_inline}}
+  - : Un {{domxref("Boolean")}} qui définit la valeur de l'attribut {{htmlattrxref("selected", "option")}}, c'est-à-dire que cette {{htmlelement("option")}} sera la valeur par défaut sélectionné dans l'élément {{htmlelement("select")}} lors du premier chargement de la page. S'il n'est pas spécifié, la valeur `false` sera utilisée par défaut.
+- `selected` {{optional_inline}}
+  - : Un {{domxref("Boolean")}} qui définit l'état sélectionné de l'option, la valeur par défaut est `false` (non sélectionné). Si cet argument est absent et même si l'argument `defaultSelected` vaut `true`, l'option ne sera pas pas sélectionnée.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Ajouter_de_nouvelles_options">Ajouter de nouvelles options</h3>
+### Ajouter de nouvelles options
 
-<pre class="brush: js">/* Imaginons qu'on ait le code HTML suivant dans le document
-&lt;select id='s'&gt;
+```js
+/* Imaginons qu'on ait le code HTML suivant dans le document
+<select id='s'>
 
-&lt;/select&gt;
+</select>
 */
 
 var s = document.getElementById('s');
@@ -45,16 +44,17 @@ var options = [Quatre, Cinq, Six];
 options.forEach(function(element,key) {
     s[key] = new Option(element,key);
 });
-</pre>
+```
 
-<h3 id="Ajouter_des_options_avec_différents_paramètres">Ajouter des options avec différents paramètres</h3>
+### Ajouter des options avec différents paramètres
 
-<pre class="brush: js">/* Imaginons qu'ont ait le code HTML suivant dans le document
-&lt;select id="s"&gt;
-  &lt;option&gt;Premier&lt;/option&gt;
-  &lt;option&gt;Deuxième&lt;/option&gt;
-  &lt;option&gt;Troisième&lt;/option&gt;
-&lt;/select&gt;
+```js
+/* Imaginons qu'ont ait le code HTML suivant dans le document
+<select id="s">
+  <option>Premier</option>
+  <option>Deuxième</option>
+  <option>Troisième</option>
+</select>
 */
 
 var s = document.getElementById('s');
@@ -73,28 +73,16 @@ options.forEach(function(element, key) {
 });
 
 /* Résultat dans le DOM / HTML modifié :
-&lt;select id="s"&gt;
-  &lt;option value="0"&gt;zéro&lt;/option&gt;
-  &lt;option value="1" selected=""&gt;un&lt;/option&gt;
-  &lt;option value="2"&gt;deux&lt;/option&gt; // L'utilisateur verra cette option sélectionnée
-&lt;/select&gt;
-*/</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><a href="http://www.w3.org/TR/2012/WD-html5-20121025/the-option-element.html#dom-option">HTML5 La définition de Option dans cette spécification.</a></td>
-   <td>Recommendation</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+<select id="s">
+  <option value="0">zéro</option>
+  <option value="1" selected="">un</option>
+  <option value="2">deux</option> // L'utilisateur verra cette option sélectionnée
+</select>
+*/
+```
+
+## Spécifications
+
+| Spécification                                                                                                                             | État           | Commentaires |
+| ----------------------------------------------------------------------------------------------------------------------------------------- | -------------- | ------------ |
+| [HTML5 La définition de Option dans cette spécification.](http://www.w3.org/TR/2012/WD-html5-20121025/the-option-element.html#dom-option) | Recommendation |              |
diff --git a/files/fr/web/api/htmlquoteelement/index.md b/files/fr/web/api/htmlquoteelement/index.md
index e76d04bb47..895c6f3a19 100644
--- a/files/fr/web/api/htmlquoteelement/index.md
+++ b/files/fr/web/api/htmlquoteelement/index.md
@@ -6,25 +6,18 @@ tags:
   - Référence_du_DOM_Gecko
 translation_of: Web/API/HTMLQuoteElement
 ---
-<p>{{ ApiRef() }}</p>
-<h2 id="Interface_des_éléments_HTML_de_citation">Interface des éléments HTML de citation</h2>
-<p>Les objets DOM quote expose l'interface <a href="http://www.w3.org/TR/html5/grouping-content.html#htmlquoteelement"><code>HTMLQuoteElement</code></a> (ou {{ HTMLVersionInline(4) }} <a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-70319763"><code>HTMLQuoteElement</code></a>), qui fournissent plusieurs propriétés pour manipuler les éléments de citation (et viennent s'ajouter aux propriétés habituelles pour un objet de l'interface {{domxref("element")}}, disponibles par héritage).</p>
-<h2 id="Propriétés">Propriétés</h2>
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Nom</th>
-   <th scope="col">Type</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>cite</code></td>
-   <td>{{domxref("DOMString")}}</td>
-   <td>Reflète l'attribut HTML {{ htmlattrxref("cite", "blockquote") }} contenant l'URL de la source de la citation.</td>
-  </tr>
- </tbody>
-</table>
-<h2 id="Voir_également">Voir également</h2>
-<p>Cette interface est supportée par les deux éléments HTML {{ HTMLElement("blockquote") }} et {{ HTMLElement("q") }}.</p>
+{{ ApiRef() }}
+
+## Interface des éléments HTML de citation
+
+Les objets DOM quote expose l'interface [`HTMLQuoteElement`](http://www.w3.org/TR/html5/grouping-content.html#htmlquoteelement) (ou {{ HTMLVersionInline(4) }} [`HTMLQuoteElement`](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-70319763)), qui fournissent plusieurs propriétés pour manipuler les éléments de citation (et viennent s'ajouter aux propriétés habituelles pour un objet de l'interface {{domxref("element")}}, disponibles par héritage).
+
+## Propriétés
+
+| Nom    | Type                             | Description                                                                                                               |
+| ------ | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
+| `cite` | {{domxref("DOMString")}} | Reflète l'attribut HTML {{ htmlattrxref("cite", "blockquote") }} contenant l'URL de la source de la citation. |
+
+## Voir également
+
+Cette interface est supportée par les deux éléments HTML {{ HTMLElement("blockquote") }} et {{ HTMLElement("q") }}.
diff --git a/files/fr/web/api/htmlselectelement/index.md b/files/fr/web/api/htmlselectelement/index.md
index 9fae5fc68b..6198b66e37 100644
--- a/files/fr/web/api/htmlselectelement/index.md
+++ b/files/fr/web/api/htmlselectelement/index.md
@@ -3,97 +3,92 @@ title: HTMLSelectElement
 slug: Web/API/HTMLSelectElement
 translation_of: Web/API/HTMLSelectElement
 ---
-<div>{{ APIRef("HTML DOM") }}</div>
-
-<p>L'interface <code><strong>HTMLSelectElement</strong></code> représente un élément HTML {{HTMLElement("select")}}. Cet élément partage aussi toute les propriétés et méthodes des autres elements HTML via l'interface {{ domxref("HTMLElement") }}.</p>
-
-<p>{{InheritanceDiagram(600, 120)}}</p>
-
-<h2 id="Properties">Propriétés</h2>
-
-<p><em>Cette interface hérite des propriétés de {{domxref("HTMLElement")}}, de {{domxref("Element")}} et de {{domxref("Node")}}.</em></p>
-
-<dl>
-  <dt>{{domxref("HTMLSelectElement.autofocus")}}</dt>
-  <dd>Un {{jsxref("Boolean")}} reflétant l'attribut HTML {{htmlattrxref("autofocus", "select")}} qui indique si le contrôle doit bénéficier d'une priorité d'entrée au chargement de la page, à moins que l'utilisateur ne passe outre, par exemple en saisissant un autre contrôle. Cet attribut ne peut être spécifié que pour un seul élément associé à un formulaire dans un document.</dd>
-  <dt>{{domxref("HTMLSelectElement.disabled")}}</dt>
-  <dd>Un {{jsxref("Boolean")}} reflétant l'attribut {{htmlattrxref("disabled", "select")}} qui indique si le contrôle est désactivé. S'il est désactivé, il n'accepte pas les clics.</dd>
-  <dt>{{domxref("HTMLSelectElement.form")}} {{ReadOnlyInline}}</dt>
-  <dd>Un {{domxref("HTMLFormElement")}} référençant le formulaire auquel cet élément est associé. Si l'élément n'est pas associé à un élément {{HTMLElement("form")}}, il retourne <code>null</code>.</dd>
-  <dt>{{domxref("HTMLSelectElement.labels")}} {{ReadOnlyInline}}</dt>
-  <dd>Une {{domxref("NodeList")}} d'éléments {{HTMLElement("label")}} associés à l'élément.</dd>
-  <dt>{{domxref("HTMLSelectElement.length")}}</dt>
-  <dd>Un <code>unsigned long</code>, le nombre d'éléments {{HTMLElement("option")}} dans cet élément <code>select</code>.</dd>
-  <dt>{{domxref("HTMLSelectElement.multiple")}}</dt>
-  <dd>Un {{jsxref("Boolean")}} reflétant l'attribut {{htmlattrxref("multiple", "select")}} qui indique si plusieurs éléments peuvent être sélectionnés.</dd>
-  <dt>{{domxref("HTMLSelectElement.name")}}</dt>
-  <dd>Une chaîne de caratères {{domxref("DOMString")}} reflétant l'attribut HTML {{htmlattrxref("name", "select")}} contenant le nom de ce contrôle utilisé par les serveurs et les fonctions de recherche DOM.</dd>
-  <dt>{{domxref("HTMLSelectElement.options")}} {{ReadOnlyInline}}</dt>
-  <dd>Une {{domxref("HTMLOptionsCollection")}} représentant l'ensemble des {{HTMLElement("option")}} ({{domxref("HTMLOptionElement")}}) contenus par cet élément.</dd>
-  <dt>{{domxref("HTMLSelectElement.required")}}</dt>
-  <dd>Un {{jsxref("Boolean")}} reflétant l'attribut {{htmlattrxref("required", "select")}} qui indique si l'utilisateur doit sélectionner une valeur avant de soumettre le formulaire.</dd>
-  <dt>{{domxref("HTMLSelectElement.selectedIndex")}}</dt>
-  <dd>Un <code>long</code> reflétant l'indice du premier élément {{HTMLElement("option")}} sélectionné. La valeur <code>-1</code> indique qu'aucun élément n'est sélectionné.</dd>
-  <dt>{{domxref("HTMLSelectElement.selectedOptions")}} {{ReadOnlyInline}}</dt>
-  <dd>Une {{domxref("HTMLCollection")}} représentant l'ensemble des éléments {{HTMLElement("option")}} qui sont sélectionnés.</dd>
-  <dt>{{domxref("HTMLSelectElement.size")}}</dt>
-  <dd>Un <code>long</code> reflétant l'attribut {{htmlattrxref("size", "select")}} attribut HTML, qui contient le nombre d'éléments visibles dans le contrôle. La valeur par défaut est 1, sauf si <code>multiple</code> est <code>true</code>, auquel cas elle est de 4.</dd>
-  <dt>{{domxref("HTMLSelectElement.type")}} {{ReadOnlyInline}}</dt>
-  <dd>Une chaîne de caractères {{domxref("DOMString")}} représentant le type du contrôle de formulaire. Lorsque <code>multiple</code> est <code>true</code>, il renvoie <code>"select-multiple"</code> ; sinon, il renvoie <code>"select-one"</code>.</dd>
-  <dt>{{domxref("HTMLSelectElement.validationMessage")}} {{ReadOnlyInline}}</dt>
-  <dd>Une chaîne de caractères {{domxref("DOMString")}} représentant un message localisé qui décrit les contraintes de validation que le contrôle ne satisfait pas (le cas échéant). Cet attribut est la chaîne vide si le contrôle n'est pas un candidat à la validation des contraintes (<code>willValidate</code> est faux), ou s'il satisfait à ses contraintes.</dd>
-  <dt>{{domxref("HTMLSelectElement.validity")}} {{ReadOnlyInline}}</dt>
-  <dd>Un {{domxref("ValidityState")}} reflétant l'état de validité dans lequel se trouve ce contrôle.</dd>
-  <dt>{{domxref("HTMLSelectElement.value")}}</dt>
-  <dd>Une chapine de caractères {{domxref("DOMString")}} reflétant la valeur du contrôle de formulaire. Renvoie la propriété <code>value</code> du premier élément d'option sélectionné s'il y en a un, sinon la chaîne vide.</dd>
-  <dt>{{domxref("HTMLSelectElement.willValidate")}} {{ReadOnlyInline}}</dt>
-  <dd>Un {{jsxref("Boolean")}} qui indique si le bouton est un candidat à la validation des contraintes. Il vaut <code>false</code> si des conditions l'empêchent de bénéficier de la validation par contrainte.</dd>
-</dl>
-
-<h2 id="Methods">Méthodes</h2>
-
-<p><em>Cette interface hérite des méthodes de {{domxref("HTMLElement")}}, et de {{domxref("Element")}} et {{domxref("Node")}}.</em></p>
-
-<dl>
-  <dt>{{domxref("HTMLSelectElement.add()")}}</dt>
-  <dd>Ajoute un élément à la collection d'éléments <code>option</code> pour cet élément <code>select</code>.</dd>
-  <dt>{{domxref("HTMLSelectElement.blur()")}} {{obsolete_inline}}</dt>
-  <dd>Supprime le focus d'entrée de cet élément. <em>Cette méthode est maintenant mise en œuvre sur {{domxref("HTMLElement")}}.</em>.</dd>
-  <dt>{{domxref("HTMLSelectElement.checkValidity()")}}</dt>
-  <dd>Vérifie si l'élément a des contraintes et s'il les satisfait. Si l'élément ne respecte pas ses contraintes, le navigateur déclenche un événement {{domxref("HTMLInputElement/invalid_event", "invalid")}} annulable sur l'élément (et retourne <code>false</code>).</dd>
-  <dt>{{domxref("HTMLSelectElement.focus()")}} {{obsolete_inline}}</dt>
-  <dd>Donne le focus d'entrée à cet élément. <em>Cette méthode est maintenant mise en œuvre sur {{domxref("HTMLElement")}}</em>.</dd>
-  <dt>{{domxref("HTMLSelectElement.item()")}}</dt>
-  <dd>Obtient un élément de la collection d'options de l'élément {{HTMLElement("select")}}. Vous pouvez également accéder à un élément en spécifiant l'index entre des parenthèses ou des crochets de style tableau, sans appeler cette méthode explicitement.</dd>
-  <dt>{{domxref("HTMLSelectElement.namedItem()")}}</dt>
-  <dd>Obtient l'élément dans la collection d'options avec le nom spécifié. La chaîne de nom peut correspondre soit au <code>id</code>, soit à l'attribut <code>name</code> d'un nœud d'option. Vous pouvez également accéder à un élément en spécifiant le nom entre des crochets de style tableau ou des parenthèses, sans appeler cette méthode explicitement.</dd>
-  <dt>{{domxref("HTMLSelectElement.remove()")}}</dt>
-  <dd>Supprime l'élément à l'indice spécifié de la collection d'options pour cet élément <code>select</code>.</dd>
-  <dt>{{domxref("HTMLSelectElement.reportValidity()")}}</dt>
-  <dd>Cette méthode signale à l'utilisateur les problèmes liés aux contraintes sur l'élément, le cas échéant. S'il y a des problèmes, elle déclenche un événement {{domxref("HTMLInputElement/invalid_event", "invalid")}} annulable sur l'élément, et retourne <code>false</code> ; s'il n'y a pas de problèmes, elle retourne <code>true</code>.</dd>
-  <dt>{{domxref("HTMLSelectElement.setCustomValidity()")}}</dt>
-  <dd>Définit le message de validation personnalisé pour l'élément de sélection au message spécifié. Utilisez la chaîne vide pour indiquer que l'élément n'a <em>pas</em> d'erreur de validité personnalisée.</dd>
-</dl>
-
-<h2 id="Events">Événements</h2>
-
-<p>Écoutez ces événements en utilisant {{domxref("EventTarget/addEventListener", "addEventListener()")}} ou en affectant un écouteur d'événements à la propriété <code>on<em>eventname</em></code> de cette interface :</p>
-
-<dl>
-  <dt>Événement {{domxref("HTMLElement/input_event", "input")}}</dt>
-  <dd>S'active lorsque la <code>valeur</code> d'un élément {{HTMLElement("input")}}, {{HTMLElement("select")}} ou {{HTMLElement("textarea")}} a été modifiée.</dd>
-</dl>
-
-<h2 id="Example">Exemple</h2>
-
-<h3 id="Get_information_about_the_selected_option">Obtenir des informations sur l'option sélectionnée</h3>
-
-<pre class="brush: js">/* en supposant que nous ayons le HTML suivant
-&lt;select id='s'&gt;
-    &lt;option&gt;Premier&lt;/option&gt;
-    &lt;option selected&gt;Deuxième&lt;/option&gt;
-    &lt;option&gt;Troisième&lt;/option&gt;
-&lt;/select&gt;
+{{ APIRef("HTML DOM") }}
+
+L'interface **`HTMLSelectElement`** représente un élément HTML {{HTMLElement("select")}}. Cet élément partage aussi toute les propriétés et méthodes des autres elements HTML via l'interface {{ domxref("HTMLElement") }}.
+
+{{InheritanceDiagram(600, 120)}}
+
+## Propriétés
+
+_Cette interface hérite des propriétés de {{domxref("HTMLElement")}}, de {{domxref("Element")}} et de {{domxref("Node")}}._
+
+- {{domxref("HTMLSelectElement.autofocus")}}
+  - : Un {{jsxref("Boolean")}} reflétant l'attribut HTML {{htmlattrxref("autofocus", "select")}} qui indique si le contrôle doit bénéficier d'une priorité d'entrée au chargement de la page, à moins que l'utilisateur ne passe outre, par exemple en saisissant un autre contrôle. Cet attribut ne peut être spécifié que pour un seul élément associé à un formulaire dans un document.
+- {{domxref("HTMLSelectElement.disabled")}}
+  - : Un {{jsxref("Boolean")}} reflétant l'attribut {{htmlattrxref("disabled", "select")}} qui indique si le contrôle est désactivé. S'il est désactivé, il n'accepte pas les clics.
+- {{domxref("HTMLSelectElement.form")}} {{ReadOnlyInline}}
+  - : Un {{domxref("HTMLFormElement")}} référençant le formulaire auquel cet élément est associé. Si l'élément n'est pas associé à un élément {{HTMLElement("form")}}, il retourne `null`.
+- {{domxref("HTMLSelectElement.labels")}} {{ReadOnlyInline}}
+  - : Une {{domxref("NodeList")}} d'éléments {{HTMLElement("label")}} associés à l'élément.
+- {{domxref("HTMLSelectElement.length")}}
+  - : Un `unsigned long`, le nombre d'éléments {{HTMLElement("option")}} dans cet élément `select`.
+- {{domxref("HTMLSelectElement.multiple")}}
+  - : Un {{jsxref("Boolean")}} reflétant l'attribut {{htmlattrxref("multiple", "select")}} qui indique si plusieurs éléments peuvent être sélectionnés.
+- {{domxref("HTMLSelectElement.name")}}
+  - : Une chaîne de caratères {{domxref("DOMString")}} reflétant l'attribut HTML {{htmlattrxref("name", "select")}} contenant le nom de ce contrôle utilisé par les serveurs et les fonctions de recherche DOM.
+- {{domxref("HTMLSelectElement.options")}} {{ReadOnlyInline}}
+  - : Une {{domxref("HTMLOptionsCollection")}} représentant l'ensemble des {{HTMLElement("option")}} ({{domxref("HTMLOptionElement")}}) contenus par cet élément.
+- {{domxref("HTMLSelectElement.required")}}
+  - : Un {{jsxref("Boolean")}} reflétant l'attribut {{htmlattrxref("required", "select")}} qui indique si l'utilisateur doit sélectionner une valeur avant de soumettre le formulaire.
+- {{domxref("HTMLSelectElement.selectedIndex")}}
+  - : Un `long` reflétant l'indice du premier élément {{HTMLElement("option")}} sélectionné. La valeur `-1` indique qu'aucun élément n'est sélectionné.
+- {{domxref("HTMLSelectElement.selectedOptions")}} {{ReadOnlyInline}}
+  - : Une {{domxref("HTMLCollection")}} représentant l'ensemble des éléments {{HTMLElement("option")}} qui sont sélectionnés.
+- {{domxref("HTMLSelectElement.size")}}
+  - : Un `long` reflétant l'attribut {{htmlattrxref("size", "select")}} attribut HTML, qui contient le nombre d'éléments visibles dans le contrôle. La valeur par défaut est 1, sauf si `multiple` est `true`, auquel cas elle est de 4.
+- {{domxref("HTMLSelectElement.type")}} {{ReadOnlyInline}}
+  - : Une chaîne de caractères {{domxref("DOMString")}} représentant le type du contrôle de formulaire. Lorsque `multiple` est `true`, il renvoie `"select-multiple"` ; sinon, il renvoie `"select-one"`.
+- {{domxref("HTMLSelectElement.validationMessage")}} {{ReadOnlyInline}}
+  - : Une chaîne de caractères {{domxref("DOMString")}} représentant un message localisé qui décrit les contraintes de validation que le contrôle ne satisfait pas (le cas échéant). Cet attribut est la chaîne vide si le contrôle n'est pas un candidat à la validation des contraintes (`willValidate` est faux), ou s'il satisfait à ses contraintes.
+- {{domxref("HTMLSelectElement.validity")}} {{ReadOnlyInline}}
+  - : Un {{domxref("ValidityState")}} reflétant l'état de validité dans lequel se trouve ce contrôle.
+- {{domxref("HTMLSelectElement.value")}}
+  - : Une chapine de caractères {{domxref("DOMString")}} reflétant la valeur du contrôle de formulaire. Renvoie la propriété `value` du premier élément d'option sélectionné s'il y en a un, sinon la chaîne vide.
+- {{domxref("HTMLSelectElement.willValidate")}} {{ReadOnlyInline}}
+  - : Un {{jsxref("Boolean")}} qui indique si le bouton est un candidat à la validation des contraintes. Il vaut `false` si des conditions l'empêchent de bénéficier de la validation par contrainte.
+
+## Méthodes
+
+_Cette interface hérite des méthodes de {{domxref("HTMLElement")}}, et de {{domxref("Element")}} et {{domxref("Node")}}._
+
+- {{domxref("HTMLSelectElement.add()")}}
+  - : Ajoute un élément à la collection d'éléments `option` pour cet élément `select`.
+- {{domxref("HTMLSelectElement.blur()")}} {{obsolete_inline}}
+  - : Supprime le focus d'entrée de cet élément. _Cette méthode est maintenant mise en œuvre sur {{domxref("HTMLElement")}}._.
+- {{domxref("HTMLSelectElement.checkValidity()")}}
+  - : Vérifie si l'élément a des contraintes et s'il les satisfait. Si l'élément ne respecte pas ses contraintes, le navigateur déclenche un événement {{domxref("HTMLInputElement/invalid_event", "invalid")}} annulable sur l'élément (et retourne `false`).
+- {{domxref("HTMLSelectElement.focus()")}} {{obsolete_inline}}
+  - : Donne le focus d'entrée à cet élément. _Cette méthode est maintenant mise en œuvre sur {{domxref("HTMLElement")}}_.
+- {{domxref("HTMLSelectElement.item()")}}
+  - : Obtient un élément de la collection d'options de l'élément {{HTMLElement("select")}}. Vous pouvez également accéder à un élément en spécifiant l'index entre des parenthèses ou des crochets de style tableau, sans appeler cette méthode explicitement.
+- {{domxref("HTMLSelectElement.namedItem()")}}
+  - : Obtient l'élément dans la collection d'options avec le nom spécifié. La chaîne de nom peut correspondre soit au `id`, soit à l'attribut `name` d'un nœud d'option. Vous pouvez également accéder à un élément en spécifiant le nom entre des crochets de style tableau ou des parenthèses, sans appeler cette méthode explicitement.
+- {{domxref("HTMLSelectElement.remove()")}}
+  - : Supprime l'élément à l'indice spécifié de la collection d'options pour cet élément `select`.
+- {{domxref("HTMLSelectElement.reportValidity()")}}
+  - : Cette méthode signale à l'utilisateur les problèmes liés aux contraintes sur l'élément, le cas échéant. S'il y a des problèmes, elle déclenche un événement {{domxref("HTMLInputElement/invalid_event", "invalid")}} annulable sur l'élément, et retourne `false` ; s'il n'y a pas de problèmes, elle retourne `true`.
+- {{domxref("HTMLSelectElement.setCustomValidity()")}}
+  - : Définit le message de validation personnalisé pour l'élément de sélection au message spécifié. Utilisez la chaîne vide pour indiquer que l'élément n'a _pas_ d'erreur de validité personnalisée.
+
+## Événements
+
+Écoutez ces événements en utilisant {{domxref("EventTarget/addEventListener", "addEventListener()")}} ou en affectant un écouteur d'événements à la propriété `oneventname` de cette interface :
+
+- Événement {{domxref("HTMLElement/input_event", "input")}}
+  - : S'active lorsque la `valeur` d'un élément {{HTMLElement("input")}}, {{HTMLElement("select")}} ou {{HTMLElement("textarea")}} a été modifiée.
+
+## Exemple
+
+### Obtenir des informations sur l'option sélectionnée
+
+```js
+/* en supposant que nous ayons le HTML suivant
+<select id='s'>
+    <option>Premier</option>
+    <option selected>Deuxième</option>
+    <option>Troisième</option>
+</select>
 */
 
 const select = document.getElementById('s');
@@ -103,50 +98,23 @@ console.log(select.selectedIndex); // 1
 
 // retourne la valeur de l'option sélectionnée
 console.log(select.options[select.selectedIndex].value) // Deuxième
-</pre>
-
-<p>Une meilleure façon de suivre les modifications apportées à la sélection de l'utilisateur consiste à surveiller l'événement {{domxref("HTMLElement/change_event", "change")}} qui se produit sur le <code>&lt;select&gt;</code>. Cela vous indiquera quand la valeur change, et vous pourrez alors mettre à jour ce dont vous avez besoin. Voir <a href="/fr/docs/Web/API/HTMLElement/change_event#select_element">l'exemple fourni</a> dans la documentation de l'événement <code>change</code> pour plus de détails.</p>
-
-<h2 id="Specifications">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', '#htmlselectelement', 'HTMLSelectElement')}}</td>
-      <td>{{Spec2('HTML WHATWG')}}</td>
-      <td>Ajoute la propriété <code>autocomplete</code> et la méthode <code>reportValidity()</code>.</td>
-    </tr>
-    <tr>
-      <td>{{SpecName('HTML5 W3C', 'forms.html#htmlselectelement', 'HTMLSelectElement')}}</td>
-      <td>{{Spec2('HTML5 W3C')}}</td>
-      <td>Ajoute les propriétés <code>autofocus</code>, <code>form</code>, <code>required</code>, <code>labels</code>, <code>selectedOptions</code>, <code>willValidate</code>, <code>validity</code> et <code>validationMessage</code>. <br>La propriété <code>tabindex</code> et les méthodes <code>blur()</code> et <code>focus()</code> ont été déplacées vers {{domxref("HTMLElement")}}. <br>Les méthodes <code>item()</code>, <code>namedItem()</code>, <code>checkValidity()</code> et <code>setCustomValidity()</code>.</td>
-    </tr>
-    <tr>
-      <td>{{SpecName('DOM2 HTML', 'html.html#ID-94282980', 'HTMLSelectElement')}}</td>
-      <td>{{Spec2('DOM2 HTML')}}</td>
-      <td><code>options</code> retourne désormais un {{domxref("HTMLOptionsCollection")}}.<br> <code>length</code> retourne désormais un <code>unsigned long</code>.</td>
-    </tr>
-    <tr>
-      <td>{{SpecName('DOM1', 'level-one-html.html#ID-94282980', 'HTMLSelectElement')}}</td>
-      <td>{{Spec2('DOM1')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.HTMLSelectElement")}}</p>
-
-<h2 id="See_also">Voir aussi</h2>
-
-<ul>
-  <li>L'élément HTML {{HTMLElement("select")}}, qui implémente cette interface.</li>
-</ul>
+```
+
+Une meilleure façon de suivre les modifications apportées à la sélection de l'utilisateur consiste à surveiller l'événement {{domxref("HTMLElement/change_event", "change")}} qui se produit sur le `<select>`. Cela vous indiquera quand la valeur change, et vous pourrez alors mettre à jour ce dont vous avez besoin. Voir [l'exemple fourni](/fr/docs/Web/API/HTMLElement/change_event#select_element) dans la documentation de l'événement `change` pour plus de détails.
+
+## Spécifications
+
+| Spécification                                                                                            | Statut                           | Commentaire                                                                                                                                                                                                                                                                                                                                         |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('HTML WHATWG', '#htmlselectelement', 'HTMLSelectElement')}}             | {{Spec2('HTML WHATWG')}} | Ajoute la propriété `autocomplete` et la méthode `reportValidity()`.                                                                                                                                                                                                                                                                                |
+| {{SpecName('HTML5 W3C', 'forms.html#htmlselectelement', 'HTMLSelectElement')}} | {{Spec2('HTML5 W3C')}}     | Ajoute les propriétés `autofocus`, `form`, `required`, `labels`, `selectedOptions`, `willValidate`, `validity` et `validationMessage`. La propriété `tabindex` et les méthodes `blur()` et `focus()` ont été déplacées vers {{domxref("HTMLElement")}}. Les méthodes `item()`, `namedItem()`, `checkValidity()` et `setCustomValidity()`. |
+| {{SpecName('DOM2 HTML', 'html.html#ID-94282980', 'HTMLSelectElement')}}         | {{Spec2('DOM2 HTML')}}     | `options` retourne désormais un {{domxref("HTMLOptionsCollection")}}. `length` retourne désormais un `unsigned long`.                                                                                                                                                                                                                   |
+| {{SpecName('DOM1', 'level-one-html.html#ID-94282980', 'HTMLSelectElement')}}     | {{Spec2('DOM1')}}         | Définition initiale.                                                                                                                                                                                                                                                                                                                                |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.HTMLSelectElement")}}
+
+## Voir aussi
+
+- L'élément HTML {{HTMLElement("select")}}, qui implémente cette interface.
diff --git a/files/fr/web/api/htmlselectelement/remove/index.md b/files/fr/web/api/htmlselectelement/remove/index.md
index 71b6fd591e..eb93cdf43a 100644
--- a/files/fr/web/api/htmlselectelement/remove/index.md
+++ b/files/fr/web/api/htmlselectelement/remove/index.md
@@ -3,86 +3,59 @@ title: HTMLSelectElement.remove()
 slug: Web/API/HTMLSelectElement/remove
 translation_of: Web/API/HTMLSelectElement/remove
 ---
-<p>{{ APIRef("HTML DOM") }}</p>
+{{ APIRef("HTML DOM") }}
 
-<p>La méthode <code><strong>HTMLSelectElement.remove()</strong></code> enlève l'option à l'index choisi dans la liste des options de cet objet select.</p>
+La méthode **`HTMLSelectElement.remove()`** enlève l'option à l'index choisi dans la liste des options de cet objet select.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="eval">collection.remove(index);
-</pre>
+    collection.remove(index);
 
-<h3 id="Parameters">Paramètre</h3>
+### Paramètre
 
-<ul>
- <li><em>index est</em> un entier long définissant la position du {{ domxref("HTMLOptionElement") }} à enlever de la collection. Si rien n'est trouvé à cette position dans la liste, la méthode n'a aucun effet.</li>
-</ul>
+- _index est_ un entier long définissant la position du {{ domxref("HTMLOptionElement") }} à enlever de la collection. Si rien n'est trouvé à cette position dans la liste, la méthode n'a aucun effet.
 
-<dl>
-</dl>
+<!---->
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">var sel = document.getElementById("maListe");
+```js
+var sel = document.getElementById("maListe");
 sel.remove(1);
 
 /*
   Prend l'objet select existant suivant :
 
-  &lt;select id="maListe" name="maListe"&gt;
-    &lt;option value="1"&gt;Option: Value 1&lt;/option&gt;
-    &lt;option value="2"&gt;Option: Value 2&lt;/option&gt;
-    &lt;option value="3"&gt;Option: Value 3&lt;/option&gt;
-  &lt;/select&gt;
+  <select id="maListe" name="maListe">
+    <option value="1">Option: Value 1</option>
+    <option value="2">Option: Value 2</option>
+    <option value="3">Option: Value 3</option>
+  </select>
 
   Et le transforme en:
 
-  &lt;select id="maListe" name="maListe"&gt;
-    &lt;option value="1"&gt;Option: Value 1&lt;/option&gt;
-    &lt;option value="3"&gt;Option: Value 3&lt;/option&gt;
-  &lt;/select&gt;
+  <select id="maListe" name="maListe">
+    <option value="1">Option: Value 1</option>
+    <option value="3">Option: Value 3</option>
+  </select>
 */
- </pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', '#dom-select-remove', 'HTMLSelectElement.remove()')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'forms.html#dom-select-remove', 'HTMLSelectElement.remove()')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Is a snapshot of {{SpecName("HTML WHATWG")}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 HTML', 'html.html#ID-33404570', 'HTMLSelectElement.remove()')}}</td>
-   <td>{{Spec2('DOM2 HTML')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM1', 'level-one-html.html#ID-33404570', 'HTMLSelectElement.remove()')}}</td>
-   <td>{{Spec2('DOM1')}}</td>
-   <td>Initial definition.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.HTMLSelectElement.remove")}}</p>
-
-<h2 id="See_also">Voir aussi</h2>
-
-<ul>
- <li>{{ domxref("ChildNode.remove") }}, la méthode appelée quand remove est créé sans argument pour un {{ domxref("HTMLSelectElement") }}.</li>
- <li>{{domxref("HTMLSelectElement") }} qui possède cette méthode.</li>
-</ul>
+
+```
+
+## Spécifications
+
+| Spécification                                                                                                        | Status                           | Comment                                                |
+| -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------ |
+| {{SpecName('HTML WHATWG', '#dom-select-remove', 'HTMLSelectElement.remove()')}}             | {{Spec2('HTML WHATWG')}} |                                                        |
+| {{SpecName('HTML5 W3C', 'forms.html#dom-select-remove', 'HTMLSelectElement.remove()')}} | {{Spec2('HTML5 W3C')}}     | Is a snapshot of {{SpecName("HTML WHATWG")}}. |
+| {{SpecName('DOM2 HTML', 'html.html#ID-33404570', 'HTMLSelectElement.remove()')}}         | {{Spec2('DOM2 HTML')}}     |                                                        |
+| {{SpecName('DOM1', 'level-one-html.html#ID-33404570', 'HTMLSelectElement.remove()')}}     | {{Spec2('DOM1')}}         | Initial definition.                                    |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.HTMLSelectElement.remove")}}
+
+## Voir aussi
+
+- {{ domxref("ChildNode.remove") }}, la méthode appelée quand remove est créé sans argument pour un {{ domxref("HTMLSelectElement") }}.
+- {{domxref("HTMLSelectElement") }} qui possède cette méthode.
diff --git a/files/fr/web/api/htmlselectelement/selectedindex/index.md b/files/fr/web/api/htmlselectelement/selectedindex/index.md
index 4000816569..06ceeefc60 100644
--- a/files/fr/web/api/htmlselectelement/selectedindex/index.md
+++ b/files/fr/web/api/htmlselectelement/selectedindex/index.md
@@ -3,67 +3,54 @@ title: HTMLSelectElement.selectedIndex
 slug: Web/API/HTMLSelectElement/selectedIndex
 translation_of: Web/API/HTMLSelectElement/selectedIndex
 ---
-<div>{{APIRef("HTML DOM")}}</div>
+{{APIRef("HTML DOM")}}
 
-<p><code><strong>HTMLSelectElement.selectedIndex</strong></code> est un <code>long</code> qui représente l'index du premier élément sélectionné {{HTMLElement("option")}}. La valeur <code>-1</code> indique qu'aucun élément est sélectionné.</p>
+**`HTMLSelectElement.selectedIndex`** est un `long` qui représente l'index du premier élément sélectionné {{HTMLElement("option")}}. La valeur `-1` indique qu'aucun élément est sélectionné.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var <var>index</var> = <var>selectElem</var>.selectedIndex;
-<em>selectElem<code>.selectedIndex = </code>index;</em>
-</pre>
+    var index = selectElem.selectedIndex;
+    selectElem.selectedIndex = index;
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p id="p"&gt;selectedIndex: 0&lt;/p&gt;
+```html
+<p id="p">selectedIndex: 0</p>
 
-&lt;select id="select"&gt;
-  &lt;option selected&gt;Option A&lt;/option&gt;
-  &lt;option&gt;Option B&lt;/option&gt;
-  &lt;option&gt;Option C&lt;/option&gt;
-  &lt;option&gt;Option D&lt;/option&gt;
-  &lt;option&gt;Option E&lt;/option&gt;
-&lt;/select&gt;
-</pre>
+<select id="select">
+  <option selected>Option A</option>
+  <option>Option B</option>
+  <option>Option C</option>
+  <option>Option D</option>
+  <option>Option E</option>
+</select>
+```
 
-<h3 id="JavaScript">JavaScript</h3>
+### JavaScript
 
-<pre class="brush: js">var selectElem = document.getElementById('select');
+```js
+var selectElem = document.getElementById('select');
 var pElem = document.getElementById('p');
 
-// Quand une nouvelle &lt;option&gt; est selectionnée
+// Quand une nouvelle <option> est selectionnée
 selectElem.addEventListener('change', function() {
   var index = selectElem.selectedIndex;
-  // Rapporter cette donnée au &lt;p&gt;
+  // Rapporter cette donnée au <p>
   pElem.innerHTML = 'selectedIndex: ' + index;
-})</pre>
+})
+```
 
-<p>{{EmbedLiveSample("Exemple", "200px", "80px")}}</p>
+{{EmbedLiveSample("Exemple", "200px", "80px")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', '#dom-select-selectedindex', 'HTMLSelectElement')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Pas de changement depuis le snapshot précédent, {{SpecName("HTML5 W3C")}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'forms.html#dom-select-selectedindex', 'HTMLSelectElement')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Définition initiale, snapshot de {{SpecName("HTML WHATWG")}}.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                    | Statut                           | Commentaire                                                                       |
+| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | --------------------------------------------------------------------------------- |
+| {{SpecName('HTML WHATWG', '#dom-select-selectedindex', 'HTMLSelectElement')}}         | {{Spec2('HTML WHATWG')}} | Pas de changement depuis le snapshot précédent, {{SpecName("HTML5 W3C")}}. |
+| {{SpecName('HTML5 W3C', 'forms.html#dom-select-selectedindex', 'HTMLSelectElement')}} | {{Spec2('HTML5 W3C')}}     | Définition initiale, snapshot de {{SpecName("HTML WHATWG")}}.            |
 
-<h2 id="Compatibilité_entre_les_navigateurs">Compatibilité entre les navigateurs</h2>
+## Compatibilité entre les navigateurs
 
-<p>{{Compat("api.HTMLSelectElement.selectedIndex")}}</p>
+{{Compat("api.HTMLSelectElement.selectedIndex")}}
diff --git a/files/fr/web/api/htmlselectelement/setcustomvalidity/index.md b/files/fr/web/api/htmlselectelement/setcustomvalidity/index.md
index aa5cad6adc..fb449d6b3e 100644
--- a/files/fr/web/api/htmlselectelement/setcustomvalidity/index.md
+++ b/files/fr/web/api/htmlselectelement/setcustomvalidity/index.md
@@ -3,48 +3,31 @@ title: HTMLSelectElement.setCustomValidity()
 slug: Web/API/HTMLSelectElement/setCustomValidity
 translation_of: Web/API/HTMLSelectElement/setCustomValidity
 ---
-<div>{{ APIRef("HTML DOM") }}</div>
+{{ APIRef("HTML DOM") }}
 
-<p>La méthode <code><strong>HTMLSelectElement.setCustomValidity()</strong></code> définit le message de validation personnalisé de l'élément sélectionné avec le message renseigné. Utiliser une chaîne de caractère vide indique que l'élément <em>n'a pas</em> de message d'erreur de validation personnalisé.</p>
+La méthode **`HTMLSelectElement.setCustomValidity()`** définit le message de validation personnalisé de l'élément sélectionné avec le message renseigné. Utiliser une chaîne de caractère vide indique que l'élément _n'a pas_ de message d'erreur de validation personnalisé.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">ElmSelectionne.setCustomValidity(message);</pre>
+```js
+ElmSelectionne.setCustomValidity(message);
+```
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<ul>
- <li><em>message </em>est le {{domxref("DOMString")}} contenant le message d'erreur.</li>
-</ul>
+- *message* est le {{domxref("DOMString")}} contenant le message d'erreur.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', '#dom-cva-setcustomvalidity', 'HTMLSelectElement.setCustomValidity()')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Pas de changement depuis la dernière snapshot, {{SpecName('HTML5 W3C')}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'forms.html#dom-cva-setcustomvalidity', 'HTMLSelectElement.setCustomValidity()')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Définition initiale, snapshot de {{SpecName('HTML WHATWG')}}</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                                | Statut                           | Commentaire                                                                      |
+| -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------------------------------------------------------------------- |
+| {{SpecName('HTML WHATWG', '#dom-cva-setcustomvalidity', 'HTMLSelectElement.setCustomValidity()')}}         | {{Spec2('HTML WHATWG')}} | Pas de changement depuis la dernière snapshot, {{SpecName('HTML5 W3C')}}. |
+| {{SpecName('HTML5 W3C', 'forms.html#dom-cva-setcustomvalidity', 'HTMLSelectElement.setCustomValidity()')}} | {{Spec2('HTML5 W3C')}}     | Définition initiale, snapshot de {{SpecName('HTML WHATWG')}}            |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.HTMLSelectElement.setCustomValidity")}}</p>
+{{Compat("api.HTMLSelectElement.setCustomValidity")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li><a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">Validation du formulaire</a>.</li>
-</ul>
+- [Validation du formulaire](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation).
diff --git a/files/fr/web/api/htmlshadowelement/index.md b/files/fr/web/api/htmlshadowelement/index.md
index baaff80c85..bab0902a2a 100644
--- a/files/fr/web/api/htmlshadowelement/index.md
+++ b/files/fr/web/api/htmlshadowelement/index.md
@@ -9,36 +9,32 @@ tags:
   - Reference
 translation_of: Web/API/HTMLShadowElement
 ---
-<div>{{APIRef("Web Components")}}{{Deprecated_header}}</div>
+{{APIRef("Web Components")}}{{Deprecated_header}}
 
-<p>L'interface <code><strong>HTMLShadowElement</strong></code> représente un élement HTML {{HTMLElement("shadow")}}, utililisé dans le <a href="/fr/docs/Web/Web_Components/Shadow_DOM">Shadow DOM</a>.</p>
+L'interface **`HTMLShadowElement`** représente un élement HTML {{HTMLElement("shadow")}}, utililisé dans le [Shadow DOM](/fr/docs/Web/Web_Components/Shadow_DOM).
 
-<p>{{InheritanceDiagram(600, 120)}}</p>
+{{InheritanceDiagram(600, 120)}}
 
-<h2 id="Properties">Propriétés</h2>
+## Propriétés
 
-<p><em>Cette interface hérite des propriétés de {{domxref("HTMLElement")}}.</em></p>
+_Cette interface hérite des propriétés de {{domxref("HTMLElement")}}._
 
-<h2 id="Methods">Méthodes</h2>
+## Méthodes
 
-<p><em>Cette interface hérite des methodes de {{domxref("HTMLElement")}}.</em></p>
+_Cette interface hérite des methodes de {{domxref("HTMLElement")}}._
 
-<dl>
- <dt>{{domxref("HTMLContentElement.getDistributedNodes()")}}</dt>
- <dd>Retourne un {{domxref("NodeList")}} statique du {{glossary("distributed nodes")}} associé avec l'élément <code>&lt;content&gt;</code>.</dd>
-</dl>
+- {{domxref("HTMLContentElement.getDistributedNodes()")}}
+  - : Retourne un {{domxref("NodeList")}} statique du {{glossary("distributed nodes")}} associé avec l'élément `<content>`.
 
-<h2 id="Specifications">Spécifications</h2>
+## Spécifications
 
-<p>Cette fonctionnalité n'est plus définie par aucune spécification.</p>
+Cette fonctionnalité n'est plus définie par aucune spécification.
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.HTMLShadowElement")}}</p>
+{{Compat("api.HTMLShadowElement")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>L'élément HTML {{HTMLElement("shadow")}}, qui implémente cette interface.</li>
- <li><a href="/fr/docs/Web/Web_Components/Shadow_DOM">Shadow DOM</a></li>
-</ul>
+- L'élément HTML {{HTMLElement("shadow")}}, qui implémente cette interface.
+- [Shadow DOM](/fr/docs/Web/Web_Components/Shadow_DOM)
diff --git a/files/fr/web/api/htmlspanelement/index.md b/files/fr/web/api/htmlspanelement/index.md
index 1746f9c197..ed882eaf63 100644
--- a/files/fr/web/api/htmlspanelement/index.md
+++ b/files/fr/web/api/htmlspanelement/index.md
@@ -6,14 +6,12 @@ tags:
   - Référence_du_DOM_Gecko
 translation_of: Web/API/HTMLSpanElement
 ---
-<div>
- {{ ApiRef() }}</div>
-<p>L'élément DOM <code>span</code> supporte l'interface <code>HTMLSpanElement</code>, qui est dérivé de l'interface {{ domxref("HTMLElement") }}. Il ne supporte aucune propriété ou méthode additionnelle par rapport à <code>HTMLElement</code>.</p>
-<h2 id="Voir_également">Voir également</h2>
-<ul>
- <li>{{ HTMLElement("span") }}</li>
- <li>Spécification W3C de l'élément <a href="http://www.w3.org/TR/html4/struct/global.html#edef-SPAN">span</a></li>
- <li>Spécification DOM : <a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-58190037">interface <code>HTMLElement</code></a></li>
-</ul>
-<div>
-  </div>
+{{ ApiRef() }}
+
+L'élément DOM `span` supporte l'interface `HTMLSpanElement`, qui est dérivé de l'interface {{ domxref("HTMLElement") }}. Il ne supporte aucune propriété ou méthode additionnelle par rapport à `HTMLElement`.
+
+## Voir également
+
+- {{ HTMLElement("span") }}
+- Spécification W3C de l'élément [span](http://www.w3.org/TR/html4/struct/global.html#edef-SPAN)
+- Spécification DOM : [interface `HTMLElement`](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-58190037)
diff --git a/files/fr/web/api/htmlstyleelement/index.md b/files/fr/web/api/htmlstyleelement/index.md
index bd85fccb5e..87e7e4d49b 100644
--- a/files/fr/web/api/htmlstyleelement/index.md
+++ b/files/fr/web/api/htmlstyleelement/index.md
@@ -5,36 +5,44 @@ tags:
   - Référence_du_DOM_Gecko
 translation_of: Web/API/HTMLStyleElement
 ---
-<p>{{ ApiRef() }}</p>
-<h3 id="Notes">Notes</h3>
-<p>Consultez les pages suivantes pour plus d'informations sur certains des objets utilisés pour manipuler les propriétés CSS depuis le DOM :</p>
-<ul>
- <li><a href="fr/DOM/element.style">L'objet DOM element.style</a></li>
- <li><a href="fr/DOM/stylesheet">L'objet DOM stylesheet</a></li>
- <li><a href="fr/DOM/cssRule">L'objet DOM cssRule</a></li>
- <li><a href="fr/DOM/CSS">La liste des propriétés DOM CSS</a></li>
-</ul>
-<h3 id="Informations_.C3.A0_d.C3.A9placer_vers_d.27autres_pages">Informations à déplacer vers d'autres pages</h3>
-<p>L'objet basique <code>style</code> explose les interfaces <code>StyleSheet</code> et <code>CSSStyleSheet</code> de la spécification
- <i>
-  DOM Level 2 Style</i>
- . Ces interfaces contiennent des membres comme <code>insertRule</code>, <code>selectorText</code>, et <code>parentStyleSheet</code> permettant d'accéder et de manipuler les règles de style individuelles qui constituent une feuille de style CSS.</p>
-<p>Pour obtenir les objets <code>style</code> depuis un objet <code>document</code>, il est possible d'utiliser la propriété <code>document.styleSheets</code> et d'accéder aux objets individuels par un index (par exemple, <code>document.styleSheets{{ mediawiki.external(0) }}</code> est la première feuille de style définie pour le document, et ainsi de suite). Bien qu'il existe plusieurs syntaxes pour exprimer les feuilles de style d'un document, les navigateurs basés sur Mozilla gèrent uniquement CSS. Par conséquent, l'objet <code>style</code> récupéré depuis ce tableau implémente à la fois les interfaces StyleSheet et CSSStyleSheet.</p>
-<pre class="eval">var ss = document.styleSheets[1];
-ss.cssRules[0].style.backgroundColor="blue";
-</pre>
-<p>La liste des propriétés disponibles dans le DOM pour la propriété de style est donnée dans la <a href="fr/DOM/CSS">liste des propriétés DOM CSS</a>.</p>
-<p>La propriété <a href="fr/DOM/style">style</a> de l'élément peut également être utilisée pour obtenir et définir les styles d'un élément. Cependant, cette propriété renvoie uniquement les attributs de style qui ont été définis
- <i>
-  in-line</i>
- ou directement sur cet élément à l'aide de <code>element.style.propertyName</code> (par exemple <code>&lt;td style="background-color: lightblue"&gt;</code> renvoie la chaîne "background-color:lightblue", même si d'autres styles peuvent s'appliquer à l'élément depuis une feuille de style).</p>
-<p>De plus, lorsque cette propriété est définie sur un élément, elle écrase et efface tout style qui peut avoir été défini ailleurs pour cette propriété particulière de l'élément. Par exemple, définir la propriété <code>border</code> écrasera les réglages définis ailleurs pour la propriété <code>border</code> de cet élément dans la section <code>head</code> du document ou dans des feuilles de style externes. Cependant, cela n'affectera pas les autres déclarations de propriétés pour les styles de cet élément, comme <code>padding</code>, <code>margin</code> ou <code>font</code> par exemple.</p>
-<p>Pour changer le style d'un élément particulier, l'exemple suivant peut être adapté :</p>
-<pre class="brush: html">&lt;html&gt;
-&lt;head&gt;
-&lt;title&gt;exemple de style simple&lt;/title&gt;
-
-&lt;script type="text/javascript"&gt;
+{{ ApiRef() }}
+
+### Notes
+
+Consultez les pages suivantes pour plus d'informations sur certains des objets utilisés pour manipuler les propriétés CSS depuis le DOM :
+
+- [L'objet DOM element.style](fr/DOM/element.style)
+- [L'objet DOM stylesheet](fr/DOM/stylesheet)
+- [L'objet DOM cssRule](fr/DOM/cssRule)
+- [La liste des propriétés DOM CSS](fr/DOM/CSS)
+
+### Informations à déplacer vers d'autres pages
+
+L'objet basique `style` explose les interfaces `StyleSheet` et `CSSStyleSheet` de la spécification
+_DOM Level 2 Style_
+. Ces interfaces contiennent des membres comme `insertRule`, `selectorText`, et `parentStyleSheet` permettant d'accéder et de manipuler les règles de style individuelles qui constituent une feuille de style CSS.
+
+Pour obtenir les objets `style` depuis un objet `document`, il est possible d'utiliser la propriété `document.styleSheets` et d'accéder aux objets individuels par un index (par exemple, `document.styleSheets{{ mediawiki.external(0) }}` est la première feuille de style définie pour le document, et ainsi de suite). Bien qu'il existe plusieurs syntaxes pour exprimer les feuilles de style d'un document, les navigateurs basés sur Mozilla gèrent uniquement CSS. Par conséquent, l'objet `style` récupéré depuis ce tableau implémente à la fois les interfaces StyleSheet et CSSStyleSheet.
+
+    var ss = document.styleSheets[1];
+    ss.cssRules[0].style.backgroundColor="blue";
+
+La liste des propriétés disponibles dans le DOM pour la propriété de style est donnée dans la [liste des propriétés DOM CSS](fr/DOM/CSS).
+
+La propriété [style](fr/DOM/style) de l'élément peut également être utilisée pour obtenir et définir les styles d'un élément. Cependant, cette propriété renvoie uniquement les attributs de style qui ont été définis
+_in-line_
+ou directement sur cet élément à l'aide de `element.style.propertyName` (par exemple `<td style="background-color: lightblue">` renvoie la chaîne "background-color:lightblue", même si d'autres styles peuvent s'appliquer à l'élément depuis une feuille de style).
+
+De plus, lorsque cette propriété est définie sur un élément, elle écrase et efface tout style qui peut avoir été défini ailleurs pour cette propriété particulière de l'élément. Par exemple, définir la propriété `border` écrasera les réglages définis ailleurs pour la propriété `border` de cet élément dans la section `head` du document ou dans des feuilles de style externes. Cependant, cela n'affectera pas les autres déclarations de propriétés pour les styles de cet élément, comme `padding`, `margin` ou `font` par exemple.
+
+Pour changer le style d'un élément particulier, l'exemple suivant peut être adapté :
+
+```html
+<html>
+<head>
+<title>exemple de style simple</title>
+
+<script type="text/javascript">
 
 function alterStyle(elem) {
   elem.style.background = 'green';
@@ -44,68 +52,68 @@ function resetStyle(elemId) {
   elem = document.getElementById(elemId);
   elem.style.background = 'white';
 }
-&lt;/script&gt;
+</script>
 
-&lt;style type="text/css"&gt;
+<style type="text/css">
 #p1 {
  border: solid blue 2px;
 }
-&lt;/style&gt;
-&lt;/head&gt;
-
-&lt;body&gt;
-
-&lt;!-- passe une référence à l'objet de l'élément comme paramètre 'this'. --&gt;
-&lt;p id="p1" onclick="alterStyle(this)";&gt;
- Cliquez ici pour changer la couleur de fond. &lt;/p&gt;
-
-&lt;!-- passe l'id 'p1' d'un autre style de l'élément à modifier. --&gt;
-&lt;button onclick="resetStyle('p1');"&gt;Réinitialiser la couleur de fond&lt;/button&gt;
-
-&lt;/body&gt;
-&lt;/html&gt;
-</pre>
-<p>La méthode <code>getComputedStyle()</code> de l'objet <code>document.defaultView</code> renvoie tous les styles qui ont finalement été calculés pour un élément. Consultez l'<a href="fr/R%c3%a9f%c3%a9rence_du_DOM_Gecko/Exemples#Exemple_6_:_getComputedStyle">exemple 6 : getComputedStyle</a> dans le chapitre des exemples pour plus d'informations sur l'utilisation de cette méthode.</p>
-<h3 id="L.27objet_DOM_style">L'objet DOM style</h3>
-<p>L'objet <code>style</code> représente une règle de style individuelle. Contrairement aux règles individuelles disponibles depuis la collection <code><a href="fr/DOM/document.styleSheets">document.styleSheets</a></code>, on accède à l'objet depuis l'objet <code>document</code> ou depuis les éléments auxquels ce style est appliqué. Il représente les styles
- <i>
-  in-line</i>
- d'un élément particulier.</p>
-<p>Mais il y a plus important que les deux propriétés exposées ici, c'est l'utilisation de l'objet <code>style</code> pour définir des propriétés de style individuelles sur un élément :</p>
-<pre>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
-  "http://www.w3.org/TR/html4/loose.dtd"&gt;
-&lt;html&gt;
- &lt;head&gt;
-  &lt;title&gt;style Property Example&lt;/title&gt;
-  &lt;link rel="StyleSheet" href="example.css" type="text/css"&gt;
-  &lt;script type="text/javascript"&gt;
-    function stilo()
-    {
-      document.getElementById("d").style.color = "orange";
-    }
-  &lt;/script&gt;
- &lt;/head&gt;
-
- &lt;body&gt;
-  &lt;div id="d" class="thunder"&gt;Thunder&lt;/div&gt;
-  &lt;button onclick="stilo()"&gt;ss&lt;/button&gt;
- &lt;/body&gt;
-&lt;/html&gt;
-</pre>
-<p>Les attributs <b>media</b> et <b>type</b> du style peuvent être donnés ou non. Notez qu'il est également possible de changer les styles d'un élément en obtenant une référence vers cet élément et en utilisant ensuite sa méthode DOM <a href="fr/DOM/element.setAttribute">setAttribute()</a> pour spécifier à la fois la propriété CSS et sa valeur.</p>
-<pre class="eval">var el = document.getElementById("un-element");
-el.setAttribute("style", "background-color:darkblue;");
-</pre>
-<p><br>
- Soyez cependant conscient que <code>setAttribute</code> écrasera toute propriété de style qui pourrait déjà avoir été définie dans l'objet style de cet élément. Si l'élément « un-element » ci-dessus avait déjà un attribut indiquant par exemple <code>style="font-size: 18px"</code>, cette valeur serait supprimée par l'utilisation de <code>setAttribute</code>.</p>
-<h5 id="Propri.C3.A9t.C3.A9s">Propriétés</h5>
-<dl>
- <dt>
-  <a href="fr/DOM/style.media">style.media</a></dt>
- <dd>
-  spécifie le média de destination pour lequel l'information de style est prévue.</dd>
- <dt>
-  <a href="fr/DOM/style.type">style.type</a></dt>
- <dd>
-  renvoie le type de style appliqué par cette règle.</dd>
-</dl>
\ No newline at end of file
+</style>
+</head>
+
+<body>
+
+<!-- passe une référence à l'objet de l'élément comme paramètre 'this'. -->
+<p id="p1" onclick="alterStyle(this)";>
+ Cliquez ici pour changer la couleur de fond. </p>
+
+<!-- passe l'id 'p1' d'un autre style de l'élément à modifier. -->
+<button onclick="resetStyle('p1');">Réinitialiser la couleur de fond</button>
+
+</body>
+</html>
+```
+
+La méthode `getComputedStyle()` de l'objet `document.defaultView` renvoie tous les styles qui ont finalement été calculés pour un élément. Consultez l'[exemple 6 : getComputedStyle](fr/R%c3%a9f%c3%a9rence_du_DOM_Gecko/Exemples#Exemple_6_:_getComputedStyle) dans le chapitre des exemples pour plus d'informations sur l'utilisation de cette méthode.
+
+### L'objet DOM style
+
+L'objet `style` représente une règle de style individuelle. Contrairement aux règles individuelles disponibles depuis la collection [`document.styleSheets`](fr/DOM/document.styleSheets), on accède à l'objet depuis l'objet `document` ou depuis les éléments auxquels ce style est appliqué. Il représente les styles
+_in-line_
+d'un élément particulier.
+
+Mais il y a plus important que les deux propriétés exposées ici, c'est l'utilisation de l'objet `style` pour définir des propriétés de style individuelles sur un élément :
+
+    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+      "http://www.w3.org/TR/html4/loose.dtd">
+    <html>
+     <head>
+      <title>style Property Example</title>
+      <link rel="StyleSheet" href="example.css" type="text/css">
+      <script type="text/javascript">
+        function stilo()
+        {
+          document.getElementById("d").style.color = "orange";
+        }
+      </script>
+     </head>
+
+     <body>
+      <div id="d" class="thunder">Thunder</div>
+      <button onclick="stilo()">ss</button>
+     </body>
+    </html>
+
+Les attributs **media** et **type** du style peuvent être donnés ou non. Notez qu'il est également possible de changer les styles d'un élément en obtenant une référence vers cet élément et en utilisant ensuite sa méthode DOM [setAttribute()](fr/DOM/element.setAttribute) pour spécifier à la fois la propriété CSS et sa valeur.
+
+    var el = document.getElementById("un-element");
+    el.setAttribute("style", "background-color:darkblue;");
+
+Soyez cependant conscient que `setAttribute` écrasera toute propriété de style qui pourrait déjà avoir été définie dans l'objet style de cet élément. Si l'élément « un-element » ci-dessus avait déjà un attribut indiquant par exemple `style="font-size: 18px"`, cette valeur serait supprimée par l'utilisation de `setAttribute`.
+
+##### Propriétés
+
+- [style.media](fr/DOM/style.media)
+  - : spécifie le média de destination pour lequel l'information de style est prévue.
+- [style.type](fr/DOM/style.type)
+  - : renvoie le type de style appliqué par cette règle.
diff --git a/files/fr/web/api/htmltablecellelement/index.md b/files/fr/web/api/htmltablecellelement/index.md
index f3f3fdf60e..5e7f4bded8 100644
--- a/files/fr/web/api/htmltablecellelement/index.md
+++ b/files/fr/web/api/htmltablecellelement/index.md
@@ -8,89 +8,58 @@ tags:
   - Reference
 translation_of: Web/API/HTMLTableCellElement
 ---
-<div>
-<div>{{ APIRef("HTML DOM") }}</div>
-</div>
+{{ APIRef("HTML DOM") }}
 
-<p>L'interface <strong><code>HTMLTableCellElement</code></strong> expose des méthodes et des propriétés spécifiques (s'ajoutant à celles fournies par l'interface générique {{domxref("HTMLElement")}}, également disponibles par héritage) pour l'agencement et la gestion de l'apparence des cellules de tableau dans un document HTML, qu'il s'agisse de cellules d'entête ou de données.</p>
+L'interface **`HTMLTableCellElement`** expose des méthodes et des propriétés spécifiques (s'ajoutant à celles fournies par l'interface générique {{domxref("HTMLElement")}}, également disponibles par héritage) pour l'agencement et la gestion de l'apparence des cellules de tableau dans un document HTML, qu'il s'agisse de cellules d'entête ou de données.
 
-<h2 id="Properties">Propriétés</h2>
+## Propriétés
 
-<p><em>Hérite des propriétés de son parent, {{domxref("HTMLElement")}}.</em></p>
+_Hérite des propriétés de son parent, {{domxref("HTMLElement")}}._
 
-<dl>
- <dt>{{domxref("HTMLTableCellElement.colSpan")}}</dt>
- <dd>Renvoie un entier long positif (<code>unsigned</code> <code>long</code>) représentant le nombre de colonnes sur lesquelles doit s'étendre cette cellule. C'est une représentation de l'attribut {{htmlattrxref("colspan", "td")}}.</dd>
- <dt>{{domxref("HTMLTableCellElement.rowSpan")}}</dt>
- <dd>Renvoie un entier long positif (<code>unsigned</code> <code>long</code>) représentant le nombre de lignes sur lesquelles doit s'étendre cette cellule. C'est une représentation de l'attribut {{htmlattrxref("rowspan", "td")}}.</dd>
- <dt>{{domxref("HTMLTableCellElement.headers")}} {{readonlyInline}}</dt>
- <dd>Renvoie un objet {{domxref("DOMSettableTokenList")}} décrivant la liste des <code>id</code> des éléments {{HTMLElement("th")}} représentant les entêtes associés à la cellule. C'est une représentation de l'attribut {{htmlattrxref("headers", "td")}}.</dd>
- <dt>{{domxref("HTMLTableCellElement.cellIndex")}} {{readonlyInline}}</dt>
- <dd>Renvoie un entier long (<code>long</code>) représentant la position de la cellule dans la collection de cellules de l'élement {{HTMLElement("tr")}} auquel elle appartient. Cette propriété renvoie<code>-1</code> si la cellule n'appartient à aucun élément <code>&lt;tr&gt;.</code></dd>
- <dt>{{domxref("HTMLTableCellElement.align")}} {{obsolete_inline}}</dt>
- <dd>Renvoie un chaîne {{domxref("DOMString")}} contenant la valeur énumérée de l'attribut {{htmlattrxref("align", "td")}}. Cette propriété décrit l'alignement du contenu de la cellule compte tenu du contexte ; ses valeurs possibles sont <code>"left"</code>, <code>"right"</code>, et <code>"center"</code>.</dd>
- <dt>{{domxref("HTMLTableCellElement.bgColor")}} {{obsolete_inline}}</dt>
- <dd>Renvoie une chaîne {{domxref("DOMString")}} contenant la couleur de fond des cellules. C'est une représentation de l'attribut obsolète {{htmlattrxref("bgColor", "td")}}.</dd>
- <dt>{{domxref("HTMLTableCellElement.axis")}} {{obsolete_inline}}</dt>
- <dd>Renvoie une chaîne {{domxref("DOMString")}} contenant un nom regroupant des cellules de manière virtuelle. C'est une représentation de l'attribut obsolète {{htmlattrxref("axis", "td")}}.</dd>
- <dt>{{domxref("HTMLTableCellElement.height")}} {{obsolete_inline}}</dt>
- <dd>Renvoie une chaîne {{domxref("DOMString")}} contenant la valeur en pixels de la hauteur de l'empreinte de la cellule. C'est une représentation de l'attribut obsolète {{htmlattrxref("height", "td")}}.</dd>
- <dt>{{domxref("HTMLTableCellElement.width")}} {{obsolete_inline}}</dt>
- <dd>Renvoie une chaîne {{domxref("DOMString")}} contenant la valeur en pixels de la largeur de l'empreinte de la cellule. C'est une représentation de l'attribut obsolète {{htmlattrxref("width", "td")}}.</dd>
- <dt>{{domxref("HTMLTableCellElement.ch")}} {{obsolete_inline}}</dt>
- <dd>Renvoie une chaîne {{domxref("DOMString")}} contenant un unique caractère. Ce caractère est celui utilisé pour l'alignement de toutes les cellules d'une même colonne. Il représente l'attribut {{htmlattrxref("char", "td")}} et prend par défaut la valeur du séparateur décimal associé à la langue, par exemple <code>'.'</code> pour l'anglais, <code>ou ','</code> pour le français. Cette propriété était optionnelle et peu supportée.</dd>
- <dt>{{domxref("HTMLTableCellElement.chOff")}} {{obsolete_inline}}</dt>
- <dd>Renvoie une chaîne {{domxref("DOMString")}} contenant un entier indiquant le nombre de caractères devant être laissés à droite (pour les écritures de gauche à droite ; sinon à gauche pour les écritures de droite à gauche) du caractère défini par <code>HTMLTableCellElement.ch</code>. Cette propriété était optionnelle et peu supportée.</dd>
- <dt>{{domxref("HTMLTableCellElement.noWrap")}} {{obsolete_inline}}</dt>
- <dd>Renvoie un valeur booléenne {{domxref("Boolean")}} représentant l'attribut {{htmlattrxref("nowrap", "td")}} et indiquant si le contenu de la cellule peut être scindé en plusieurs lignes.</dd>
- <dt>{{domxref("HTMLTableCellElement.vAlign")}} {{obsolete_inline}}</dt>
- <dd>Renvoie une chaîne {{domxref("DOMString")}} contenant une valeur énumérée indiquant le type d'alignement vertical attendu du contenu de la cellule. Cette propriété représente l'attribut {{htmlattrxref("valign", "td")}} et peut prendre l'une des valeurs suivantes : <code>"top"</code>, <code>"middle"</code>, <code>"bottom"</code>, <code>ou "baseline"</code>.</dd>
-</dl>
+- {{domxref("HTMLTableCellElement.colSpan")}}
+  - : Renvoie un entier long positif (`unsigned` `long`) représentant le nombre de colonnes sur lesquelles doit s'étendre cette cellule. C'est une représentation de l'attribut {{htmlattrxref("colspan", "td")}}.
+- {{domxref("HTMLTableCellElement.rowSpan")}}
+  - : Renvoie un entier long positif (`unsigned` `long`) représentant le nombre de lignes sur lesquelles doit s'étendre cette cellule. C'est une représentation de l'attribut {{htmlattrxref("rowspan", "td")}}.
+- {{domxref("HTMLTableCellElement.headers")}} {{readonlyInline}}
+  - : Renvoie un objet {{domxref("DOMSettableTokenList")}} décrivant la liste des `id` des éléments {{HTMLElement("th")}} représentant les entêtes associés à la cellule. C'est une représentation de l'attribut {{htmlattrxref("headers", "td")}}.
+- {{domxref("HTMLTableCellElement.cellIndex")}} {{readonlyInline}}
+  - : Renvoie un entier long (`long`) représentant la position de la cellule dans la collection de cellules de l'élement {{HTMLElement("tr")}} auquel elle appartient. Cette propriété renvoie`-1` si la cellule n'appartient à aucun élément `<tr>.`
+- {{domxref("HTMLTableCellElement.align")}} {{obsolete_inline}}
+  - : Renvoie un chaîne {{domxref("DOMString")}} contenant la valeur énumérée de l'attribut {{htmlattrxref("align", "td")}}. Cette propriété décrit l'alignement du contenu de la cellule compte tenu du contexte ; ses valeurs possibles sont `"left"`, `"right"`, et `"center"`.
+- {{domxref("HTMLTableCellElement.bgColor")}} {{obsolete_inline}}
+  - : Renvoie une chaîne {{domxref("DOMString")}} contenant la couleur de fond des cellules. C'est une représentation de l'attribut obsolète {{htmlattrxref("bgColor", "td")}}.
+- {{domxref("HTMLTableCellElement.axis")}} {{obsolete_inline}}
+  - : Renvoie une chaîne {{domxref("DOMString")}} contenant un nom regroupant des cellules de manière virtuelle. C'est une représentation de l'attribut obsolète {{htmlattrxref("axis", "td")}}.
+- {{domxref("HTMLTableCellElement.height")}} {{obsolete_inline}}
+  - : Renvoie une chaîne {{domxref("DOMString")}} contenant la valeur en pixels de la hauteur de l'empreinte de la cellule. C'est une représentation de l'attribut obsolète {{htmlattrxref("height", "td")}}.
+- {{domxref("HTMLTableCellElement.width")}} {{obsolete_inline}}
+  - : Renvoie une chaîne {{domxref("DOMString")}} contenant la valeur en pixels de la largeur de l'empreinte de la cellule. C'est une représentation de l'attribut obsolète {{htmlattrxref("width", "td")}}.
+- {{domxref("HTMLTableCellElement.ch")}} {{obsolete_inline}}
+  - : Renvoie une chaîne {{domxref("DOMString")}} contenant un unique caractère. Ce caractère est celui utilisé pour l'alignement de toutes les cellules d'une même colonne. Il représente l'attribut {{htmlattrxref("char", "td")}} et prend par défaut la valeur du séparateur décimal associé à la langue, par exemple `'.'` pour l'anglais, `ou ','` pour le français. Cette propriété était optionnelle et peu supportée.
+- {{domxref("HTMLTableCellElement.chOff")}} {{obsolete_inline}}
+  - : Renvoie une chaîne {{domxref("DOMString")}} contenant un entier indiquant le nombre de caractères devant être laissés à droite (pour les écritures de gauche à droite ; sinon à gauche pour les écritures de droite à gauche) du caractère défini par `HTMLTableCellElement.ch`. Cette propriété était optionnelle et peu supportée.
+- {{domxref("HTMLTableCellElement.noWrap")}} {{obsolete_inline}}
+  - : Renvoie un valeur booléenne {{domxref("Boolean")}} représentant l'attribut {{htmlattrxref("nowrap", "td")}} et indiquant si le contenu de la cellule peut être scindé en plusieurs lignes.
+- {{domxref("HTMLTableCellElement.vAlign")}} {{obsolete_inline}}
+  - : Renvoie une chaîne {{domxref("DOMString")}} contenant une valeur énumérée indiquant le type d'alignement vertical attendu du contenu de la cellule. Cette propriété représente l'attribut {{htmlattrxref("valign", "td")}} et peut prendre l'une des valeurs suivantes : `"top"`, `"middle"`, `"bottom"`, `ou "baseline"`.
 
-<h2 id="Methods">Méthodes</h2>
+## Méthodes
 
-<p><em>Aucune méthode spécifique ; hérite des méthodes de son parent, {{domxref("HTMLElement")}}</em>.</p>
+_Aucune méthode spécifique ; hérite des méthodes de son parent, {{domxref("HTMLElement")}}_.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "tabular-data.html#htmltablecellelement", "HTMLTableCellElement")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Aucune modification depuis {{SpecName("HTML5 W3C")}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', "tabular-data.html#htmltablecellelement", "HTMLTableCellElement")}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Les propriétés suivantes sont devenues obsolètes : <code>align</code>, <code>axis</code>, <code>bgColor</code>, <code>height</code>, <code>width</code>, <code>ch</code>, <code>chOff</code>, <code>noWrap</code>, <code>et vAlign</code>.<br>
-    La propriété <code>headers</code> est maintenant en lecture seule et renvoie un objet {{domxref("DOMSettableTokenList")}} au lieu d'une simple chaîne {{domxref("DOMString")}}.<br>
-    Les propriétés <code>colspan</code> et <code>rowspan</code> renvoient maintenant des entiers long positifs (<code>unsigned long)</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 HTML', 'html.html#ID-82915075', 'HTMLTableCellElement')}}</td>
-   <td>{{Spec2('DOM2 HTML')}}</td>
-   <td>La propriété <code>cellIndex</code> est maintenant accessible en lecture seule.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM1', 'level-one-html.html#ID-82915075', 'HTMLTableCellElement')}}</td>
-   <td>{{Spec2('DOM1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                | Statut                           | Commentaire                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('HTML WHATWG', "tabular-data.html#htmltablecellelement", "HTMLTableCellElement")}} | {{Spec2('HTML WHATWG')}} | Aucune modification depuis {{SpecName("HTML5 W3C")}}.                                                                                                                                                                                                                                                                                                                                                                              |
+| {{SpecName('HTML5 W3C', "tabular-data.html#htmltablecellelement", "HTMLTableCellElement")}}     | {{Spec2('HTML5 W3C')}}     | Les propriétés suivantes sont devenues obsolètes : `align`, `axis`, `bgColor`, `height`, `width`, `ch`, `chOff`, `noWrap`, `et vAlign`. La propriété `headers` est maintenant en lecture seule et renvoie un objet {{domxref("DOMSettableTokenList")}} au lieu d'une simple chaîne {{domxref("DOMString")}}. Les propriétés `colspan` et `rowspan` renvoient maintenant des entiers long positifs (`unsigned long)`. |
+| {{SpecName('DOM2 HTML', 'html.html#ID-82915075', 'HTMLTableCellElement')}}                         | {{Spec2('DOM2 HTML')}}     | La propriété `cellIndex` est maintenant accessible en lecture seule.                                                                                                                                                                                                                                                                                                                                                                      |
+| {{SpecName('DOM1', 'level-one-html.html#ID-82915075', 'HTMLTableCellElement')}}                     | {{Spec2('DOM1')}}         | Définition initiale.                                                                                                                                                                                                                                                                                                                                                                                                                      |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.HTMLTableCellElement")}}</p>
+{{Compat("api.HTMLTableCellElement")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>Éléments HTML implémentant cette interface   : {{HTMLElement("th")}} et {{HTMLElement("td")}} par héritage via {{domxref("HTMLTableHeaderCellElement")}} et {{domxref("HTMLTableDataCellElement")}}.</li>
-</ul>
+- Éléments HTML implémentant cette interface   : {{HTMLElement("th")}} et {{HTMLElement("td")}} par héritage via {{domxref("HTMLTableHeaderCellElement")}} et {{domxref("HTMLTableDataCellElement")}}.
diff --git a/files/fr/web/api/htmltableelement/caption/index.md b/files/fr/web/api/htmltableelement/caption/index.md
index b7c559b5a8..68308f7596 100644
--- a/files/fr/web/api/htmltableelement/caption/index.md
+++ b/files/fr/web/api/htmltableelement/caption/index.md
@@ -5,21 +5,27 @@ tags:
   - Référence_du_DOM_Gecko
 translation_of: Web/API/HTMLTableElement/caption
 ---
-<p>{{ ApiRef() }}</p>
-<h3 id="R.C3.A9sum.C3.A9">Résumé</h3>
-<p><b>caption</b> renvoie la légende du tableau.</p>
-<h3 id="Syntaxe">Syntaxe</h3>
-<pre class="eval"><i>string</i> = table.caption
-</pre>
-<h3 id="Exemple">Exemple</h3>
-<pre class="eval">if (table.caption) {
-  // On peut alors faire quelque chose avec la légende du tableau
-}
-</pre>
-<h3 id="Notes">Notes</h3>
-<p>Cette propriété ne renvoie rien s'il n'y a aucune légende pour le tableau.</p>
-<h3 id="Sp.C3.A9cification">Spécification</h3>
-<ul>
- <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-14594520">DOM Level 2 HTML : caption</a> <small>(<a href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-14594520">traduction</a>)</small></li>
- <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-12035137">Interface HTMLTableCaptionElement</a> <small>(<a href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-12035137">traduction</a>)</small></li>
-</ul>
\ No newline at end of file
+{{ ApiRef() }}
+
+### Résumé
+
+**caption** renvoie la légende du tableau.
+
+### Syntaxe
+
+    string = table.caption
+
+### Exemple
+
+    if (table.caption) {
+      // On peut alors faire quelque chose avec la légende du tableau
+    }
+
+### Notes
+
+Cette propriété ne renvoie rien s'il n'y a aucune légende pour le tableau.
+
+### Spécification
+
+- [DOM Level 2 HTML : caption](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-14594520) ([traduction](http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-14594520))
+- [Interface HTMLTableCaptionElement](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-12035137) ([traduction](http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-12035137))
diff --git a/files/fr/web/api/htmltableelement/index.md b/files/fr/web/api/htmltableelement/index.md
index e14d2f1f47..a4bb7c3b3e 100644
--- a/files/fr/web/api/htmltableelement/index.md
+++ b/files/fr/web/api/htmltableelement/index.md
@@ -5,106 +5,63 @@ tags:
   - Référence_du_DOM_Gecko
 translation_of: Web/API/HTMLTableElement
 ---
-<div>
- {{ ApiRef() }}</div>
-<h2 id="Interface_de_l.27.C3.A9l.C3.A9ment_HTML_Table">Interface de l'élément HTML Table</h2>
-<p>Les objets <code>table</code> exposent l'interface <a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-64060425"><code>HTMLTableElement</code></a> <small>(<a href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-64060425">traduction</a>)</small>, qui fournit des propriétés et méthodes spécialisées (outre l'interface des objets <a href="/fr/docs/DOM/element">element</a> qu'ils acquièrent également par héritage) pour manipuler la disposition et la présentation des tableaux en HTML.</p>
-<h2 id="Propri.C3.A9t.C3.A9s">Propriétés</h2>
-<dl>
- <dt>
-  <a href="/fr/docs/DOM/table.caption">table.caption</a></dt>
- <dd>
-  <b>caption</b> renvoie la légende du tableau.</dd>
- <dt>
-  <a href="/fr/docs/DOM/table.tHead">table.tHead</a></dt>
- <dd>
-  <b>tHead</b> renvoie l'en-tête du tableau.</dd>
- <dt>
-  <a href="/fr/docs/DOM/table.tFoot">table.tFoot</a></dt>
- <dd>
-  <b>tFoot</b> renvoie le pied du tableau.</dd>
- <dt>
-  <a href="/fr/docs/DOM/table.rows">table.rows</a></dt>
- <dd>
-  <b>rows</b> renvoie les lignes du tableau.</dd>
- <dt>
-  <a href="/fr/docs/DOM/table.tBodies">table.tBodies</a></dt>
- <dd>
-  <b>tBodies</b> renvoie les corps du tableau.</dd>
-</dl>
-<dl>
- <dt>
-  <a href="/fr/docs/DOM/table.align">table.align</a> {{ Deprecated_inline() }}</dt>
- <dd>
-  <b>align</b> obtient ou définit l'alignement du tableau.</dd>
- <dt>
-  <a href="/fr/docs/DOM/table.bgColor">table.bgColor</a> {{ Deprecated_inline() }}</dt>
- <dd>
-  <b>bgColor</b> obtient ou définit la couleur de fond du tableau.</dd>
- <dt>
-  <a href="/fr/docs/DOM/table.border">table.border</a> {{ Deprecated_inline() }}</dt>
- <dd>
-  <b>border</b> obtient ou défini la bordure du tableau.</dd>
- <dt>
-  <a href="/fr/docs/DOM/table.cellPadding">table.cellPadding</a></dt>
- <dd>
-  <b>cellPadding</b> obtient ou définit les marges internes (
-  <i>
-   padding</i>
-  ) des cellules.</dd>
- <dt>
-  <a href="/fr/docs/DOM/table.cellSpacing">table.cellSpacing</a></dt>
- <dd>
-  <b>cellSpacing</b> obtient ou définit l'espace entre les cellules.</dd>
- <dt>
-  <a href="/fr/docs/DOM/table.frame">table.frame</a></dt>
- <dd>
-  <b>frame</b> spécifie les côtés du tableau ayant une bordure.</dd>
- <dt>
-  <a href="/fr/docs/DOM/table.rules">table.rules</a></dt>
- <dd>
-  <b>rules</b> spécifie les bordures intérieures visibles.</dd>
- <dt>
-  <a href="/fr/docs/DOM/table.summary">table.summary</a></dt>
- <dd>
-  <b>summary</b> obtient ou définit le résumé du tableau.</dd>
- <dt>
-  <a href="/fr/docs/DOM/table.width">table.width</a></dt>
- <dd>
-  <b>width</b> obtient ou définit la largeur du tableau.</dd>
-</dl>
-<h2 id="M.C3.A9thodes">Méthodes</h2>
-<dl>
- <dt>
-  <a href="/fr/docs/DOM/table.createTHead">table.createTHead</a></dt>
- <dd>
-  <b>createTHead</b> crée un en-tête de tableau.</dd>
- <dt>
-  <a href="/fr/docs/DOM/table.deleteTHead">table.deleteTHead</a></dt>
- <dd>
-  <b>deleteTHead</b> retire l'en-tête du tableau.</dd>
- <dt>
-  <a href="/fr/docs/DOM/table.createTFoot">table.createTFoot</a></dt>
- <dd>
-  <b>createTFoot</b> crée un pied de tableau.</dd>
- <dt>
-  <a href="/fr/docs/DOM/table.deleteTFoot">table.deleteTFoot</a></dt>
- <dd>
-  <b>deleteTFoot</b> retire un pied de tableau.</dd>
- <dt>
-  <a href="/fr/docs/DOM/table.createCaption">table.createCaption</a></dt>
- <dd>
-  <b>createCaption</b> crée une nouvelle légende pour le tableau.</dd>
- <dt>
-  <a href="/fr/docs/DOM/table.deleteCaption">table.deleteCaption</a></dt>
- <dd>
-  <b>deleteCaption</b> retire la légende d'un tableau.</dd>
- <dt>
-  <a href="/fr/docs/DOM/table.insertRow">table.insertRow</a></dt>
- <dd>
-  <b>insertRow</b> insère une nouvelle ligne.</dd>
- <dt>
-  <a href="/fr/docs/DOM/table.deleteRow">table.deleteRow</a></dt>
- <dd>
-  <b>deleteRow</b> retire une ligne.</dd>
-</dl>
+{{ ApiRef() }}
+
+## Interface de l'élément HTML Table
+
+Les objets `table` exposent l'interface [`HTMLTableElement`](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-64060425) ([traduction](http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-64060425)), qui fournit des propriétés et méthodes spécialisées (outre l'interface des objets [element](/fr/docs/DOM/element) qu'ils acquièrent également par héritage) pour manipuler la disposition et la présentation des tableaux en HTML.
+
+## Propriétés
+
+- [table.caption](/fr/docs/DOM/table.caption)
+  - : **caption** renvoie la légende du tableau.
+- [table.tHead](/fr/docs/DOM/table.tHead)
+  - : **tHead** renvoie l'en-tête du tableau.
+- [table.tFoot](/fr/docs/DOM/table.tFoot)
+  - : **tFoot** renvoie le pied du tableau.
+- [table.rows](/fr/docs/DOM/table.rows)
+  - : **rows** renvoie les lignes du tableau.
+- [table.tBodies](/fr/docs/DOM/table.tBodies)
+  - : **tBodies** renvoie les corps du tableau.
+
+<!---->
+
+- [table.align](/fr/docs/DOM/table.align) {{ Deprecated_inline() }}
+  - : **align** obtient ou définit l'alignement du tableau.
+- [table.bgColor](/fr/docs/DOM/table.bgColor) {{ Deprecated_inline() }}
+  - : **bgColor** obtient ou définit la couleur de fond du tableau.
+- [table.border](/fr/docs/DOM/table.border) {{ Deprecated_inline() }}
+  - : **border** obtient ou défini la bordure du tableau.
+- [table.cellPadding](/fr/docs/DOM/table.cellPadding)
+  - : **cellPadding** obtient ou définit les marges internes (
+    _padding_
+    ) des cellules.
+- [table.cellSpacing](/fr/docs/DOM/table.cellSpacing)
+  - : **cellSpacing** obtient ou définit l'espace entre les cellules.
+- [table.frame](/fr/docs/DOM/table.frame)
+  - : **frame** spécifie les côtés du tableau ayant une bordure.
+- [table.rules](/fr/docs/DOM/table.rules)
+  - : **rules** spécifie les bordures intérieures visibles.
+- [table.summary](/fr/docs/DOM/table.summary)
+  - : **summary** obtient ou définit le résumé du tableau.
+- [table.width](/fr/docs/DOM/table.width)
+  - : **width** obtient ou définit la largeur du tableau.
+
+## Méthodes
+
+- [table.createTHead](/fr/docs/DOM/table.createTHead)
+  - : **createTHead** crée un en-tête de tableau.
+- [table.deleteTHead](/fr/docs/DOM/table.deleteTHead)
+  - : **deleteTHead** retire l'en-tête du tableau.
+- [table.createTFoot](/fr/docs/DOM/table.createTFoot)
+  - : **createTFoot** crée un pied de tableau.
+- [table.deleteTFoot](/fr/docs/DOM/table.deleteTFoot)
+  - : **deleteTFoot** retire un pied de tableau.
+- [table.createCaption](/fr/docs/DOM/table.createCaption)
+  - : **createCaption** crée une nouvelle légende pour le tableau.
+- [table.deleteCaption](/fr/docs/DOM/table.deleteCaption)
+  - : **deleteCaption** retire la légende d'un tableau.
+- [table.insertRow](/fr/docs/DOM/table.insertRow)
+  - : **insertRow** insère une nouvelle ligne.
+- [table.deleteRow](/fr/docs/DOM/table.deleteRow)
+  - : **deleteRow** retire une ligne.
diff --git a/files/fr/web/api/htmltableelement/insertrow/index.md b/files/fr/web/api/htmltableelement/insertrow/index.md
index f07140adda..6309720d21 100644
--- a/files/fr/web/api/htmltableelement/insertrow/index.md
+++ b/files/fr/web/api/htmltableelement/insertrow/index.md
@@ -10,33 +10,29 @@ tags:
   - Reference
 translation_of: Web/API/HTMLTableElement/insertRow
 ---
-<div>
-<p>{{APIRef("HTML DOM")}}</p>
+{{APIRef("HTML DOM")}}
 
-<p>La méthode <strong><code>HTMLTableElement.insertRow()</code></strong> insère une nouvelle ligne dans la table et retourne une référence à la nouvelle ligne.</p>
-</div>
+La méthode **`HTMLTableElement.insertRow()`** insère une nouvelle ligne dans la table et retourne une référence à la nouvelle ligne.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var <em>ligne</em> = <em>HTMLTableElement</em>.insertRow(<em>optionnel indice = -1</em>);</pre>
+    var ligne = HTMLTableElement.insertRow(optionnel indice = -1);
 
-<ul>
- <li><a href="/en-US/docs/DOM/HTMLTableElement"><code>HTMLTableElement</code></a> est une référence à un élément table HTML.</li>
- <li><code>indice</code> est l'indice de ligne de la nouvelle ligne.</li>
- <li><code>ligne</code> reçoit la référence à la nouvelle ligne. Une référence à un <a href="/en-US/docs/Web/API/HTMLTableRowElement">HTMLTableRowElement</a>. Si l'indice est -1 ou est égal au nombre de lignes, la ligne est ajoutée comme dernière ligne. Si <code>indice</code> est plus grand que le nombre de lignes, une exception IndexSizeError sera générée. Si indice est omis, sa  valeur sera -1 par défaut.</li>
- <li>Si une table a plusieurs éléments <code>tbody</code>, par défaut, la nouvelle ligne est ajoutée dans le dernier <code>tbody</code>. Pour insérer la ligne dans un <code>tbody</code> particulier :<br>
-  <code>var <em>tbody_particulier</em></code><code>=document.getElementById(<em>id_tbody</em>);<br>
-  var <em>ligne</em>=tbody_particulier.</code><code>insertRow(<em>indice</em>)</code></li>
-</ul>
+- [`HTMLTableElement`](/en-US/docs/DOM/HTMLTableElement) est une référence à un élément table HTML.
+- `indice` est l'indice de ligne de la nouvelle ligne.
+- `ligne` reçoit la référence à la nouvelle ligne. Une référence à un [HTMLTableRowElement](/en-US/docs/Web/API/HTMLTableRowElement). Si l'indice est -1 ou est égal au nombre de lignes, la ligne est ajoutée comme dernière ligne. Si `indice` est plus grand que le nombre de lignes, une exception IndexSizeError sera générée. Si indice est omis, sa  valeur sera -1 par défaut.
+- Si une table a plusieurs éléments `tbody`, par défaut, la nouvelle ligne est ajoutée dans le dernier `tbody`. Pour insérer la ligne dans un `tbody` particulier :
+  ` var tbody_particulier``=document.getElementById(id_tbody); var ligne=tbody_particulier.``insertRow(indice) `
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush:html">&lt;table id="TableA"&gt;
-&lt;tr&gt;
-&lt;td&gt;Ancienne ligne supérieure&lt;/td&gt;
-&lt;/tr&gt;
-&lt;/table&gt;
-&lt;script type="text/javascript"&gt;
+```html
+<table id="TableA">
+<tr>
+<td>Ancienne ligne supérieure</td>
+</tr>
+</table>
+<script type="text/javascript">
 
 function ajouteLigne(tableID) {
   // Récupération d'une référence à la table
@@ -56,45 +52,25 @@ function ajouteLigne(tableID) {
 // Appelle ajouteLigne() avec l'ID d'une table
 ajouteLigne('TableA');
 
-&lt;/script&gt;</pre>
-
-<p>Pour être valide dans un document HTML, un élément TR doit avoir au moins un élément TD.</p>
-
-<p>Remarquez que <code>insertRow</code> insère directement la ligne dans la table et renvoie une référence à la nouvelle ligne. La ligne n'a pas besoin d'être ajoutée séparement comme cela aurait été le cas si <code><a href="/en-US/docs/DOM/document.createElement">document.createElement()</a></code> avait été utilisé pour créer un nouvel élement TR.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table>
- <tbody>
-  <tr>
-   <th>Spécification</th>
-   <th>Statut</th>
-   <th>Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML WHATWG", "tables.html#dom-table-insertrow", "HTMLTableElement.insertRow()")}}</td>
-   <td>{{Spec2("HTML WHATWG")}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName("DOM2 HTML", "html.html#ID-93995626", "HTMLTableElement.insertRow()")}}</td>
-   <td>{{Spec2("DOM2 HTML")}}</td>
-   <td>Spécifie plus en détail où la ligne est insérée.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("DOM1", "level-one-html.html#ID-39872903", "HTMLTableElement.insertRow()")}}</td>
-   <td>{{Spec2("DOM1")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+</script>
+```
+
+Pour être valide dans un document HTML, un élément TR doit avoir au moins un élément TD.
+
+Remarquez que `insertRow` insère directement la ligne dans la table et renvoie une référence à la nouvelle ligne. La ligne n'a pas besoin d'être ajoutée séparement comme cela aurait été le cas si [`document.createElement()`](/en-US/docs/DOM/document.createElement) avait été utilisé pour créer un nouvel élement TR.
+
+## Spécifications
+
+| Spécification                                                                                                                | Statut                           | Commentaire                                      |
+| ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------ |
+| {{SpecName("HTML WHATWG", "tables.html#dom-table-insertrow", "HTMLTableElement.insertRow()")}} | {{Spec2("HTML WHATWG")}} |                                                  |
+| {{SpecName("DOM2 HTML", "html.html#ID-93995626", "HTMLTableElement.insertRow()")}}                 | {{Spec2("DOM2 HTML")}}     | Spécifie plus en détail où la ligne est insérée. |
+| {{SpecName("DOM1", "level-one-html.html#ID-39872903", "HTMLTableElement.insertRow()")}}         | {{Spec2("DOM1")}}         | Définition initiale.                             |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.HTMLTableElement")}}</p>
+{{Compat("api.HTMLTableElement")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("HTMLTableRowElement.insertCell()")}}</li>
-</ul>
+- {{domxref("HTMLTableRowElement.insertCell()")}}
diff --git a/files/fr/web/api/htmltablerowelement/index.md b/files/fr/web/api/htmltablerowelement/index.md
index a382d43e45..5e810405a9 100644
--- a/files/fr/web/api/htmltablerowelement/index.md
+++ b/files/fr/web/api/htmltablerowelement/index.md
@@ -9,85 +9,55 @@ tags:
   - TopicStub
 translation_of: Web/API/HTMLTableRowElement
 ---
-<div>{{ APIRef("HTML DOM") }}</div>
+{{ APIRef("HTML DOM") }}
 
-<p>L'interface <strong><code>HTMLTableRowElement</code></strong> fournit des propriétés et des méthodes spéciales (au-delà de l'interface {{domxref("HTMLElement")}} dont elle dispose également par héritage) pour manipuler la mise en page et la présentation des lignes dans un tableau HTML.</p>
+L'interface **`HTMLTableRowElement`** fournit des propriétés et des méthodes spéciales (au-delà de l'interface {{domxref("HTMLElement")}} dont elle dispose également par héritage) pour manipuler la mise en page et la présentation des lignes dans un tableau HTML.
 
-<p>{{InheritanceDiagram(600, 120)}}</p>
+{{InheritanceDiagram(600, 120)}}
 
-<h2 id="Properties">Propriétés</h2>
+## Propriétés
 
-<p><em>Hérite des propriétés de son parent, {{domxref("HTMLElement")}}.</em></p>
+_Hérite des propriétés de son parent, {{domxref("HTMLElement")}}._
 
-<dl>
- <dt>{{domxref("HTMLTableRowElement.align")}} {{obsolete_inline}}</dt>
- <dd>Est un {{domxref("DOMString")}} contenant une valeur énumérée reflétant l'attribut {{htmlattrxref("align", "tr")}}. Il indique l'alignement du contenu de l'élément par rapport au contexte environnant. Les valeurs possibles sont <code>"left"</code>, <code>"right"</code>, et <code>"center"</code>.</dd>
- <dt>{{domxref("HTMLTableRowElement.bgColor")}} {{obsolete_inline}}</dt>
- <dd>Est un {{domxref("DOMString")}} contenant la couleur de fond des cellules. Il reflète l'attribut obsolète {{htmlattrxref("bgColor", "tr")}} attribute.</dd>
- <dt>{{domxref("HTMLTableRowElement.cells")}} {{readonlyInline}}</dt>
- <dd>Renvoie une {{domxref("HTMLCollection")}} en direct contenant les cellules de la ligne. La <code>HTMLCollection</code> est active et est automatiquement mise à jour lorsque des cellules sont ajoutées ou supprimées.</dd>
- <dt>{{domxref("HTMLTableRowElement.ch")}} {{obsolete_inline}}</dt>
- <dd>Est un {{domxref("DOMString")}} contenant un seul caractère. Ce caractère est celui sur lequel aligner toutes les cellules d'une colonne. Il reflète {{htmlattrxref("char", "tr")}} et par défaut les points décimaux associés à la langue, par exemple <code>'.'</code> pour l'anglais, ou <code>','</code> pour le français. Cette propriété était facultative et n'était pas très bien prise en charge.</dd>
- <dt>{{domxref("HTMLTableRowElement.chOff")}} {{obsolete_inline}}</dt>
- <dd>Est un {{domxref("DOMString")}} contenant un entier indiquant combien de caractère doivent être laissés à droite (pour les scripts de gauche à droite; ou à gauche pour les scripts de droite à gauche) du caractère défini par <code>HTMLTableRowElement.ch</code>. Cette propriété était facultative et n'était pas très bien prise en charge.</dd>
- <dt>{{domxref("HTMLTableRowElement.rowIndex")}} {{readonlyInline}}</dt>
- <dd>Renvoie une valeur <code>long</code> qui donne la position logique de la ligne dans la table entière. Si la ligne ne fait pas partie d'une table, renvoie <code>-1</code>.</dd>
- <dt>{{domxref("HTMLTableRowElement.sectionRowIndex")}} {{readonlyInline}}</dt>
- <dd>Renvoie une valeur <code>long</code> qui donne la position logique de la ligne dans la section de table à laquelle elle appartient. Si la ligne ne fait pas partie d'une section, renvoie <code>-1</code>.</dd>
- <dt>{{domxref("HTMLTableRowElement.vAlign")}} {{obsolete_inline}}</dt>
- <dd>Est un {{domxref("DOMString")}} représentant une valeur énumérée indiquant comment le contenu de la cellule doit être aligné verticalement. Il reflète l'attribut {{htmlattrxref("valign", "tr")}} et peut avoir l'une des valeurs suivantes : <code>"top"</code>, <code>"middle"</code>, <code>"bottom"</code>, ou <code>"baseline"</code>.</dd>
-</dl>
+- {{domxref("HTMLTableRowElement.align")}} {{obsolete_inline}}
+  - : Est un {{domxref("DOMString")}} contenant une valeur énumérée reflétant l'attribut {{htmlattrxref("align", "tr")}}. Il indique l'alignement du contenu de l'élément par rapport au contexte environnant. Les valeurs possibles sont `"left"`, `"right"`, et `"center"`.
+- {{domxref("HTMLTableRowElement.bgColor")}} {{obsolete_inline}}
+  - : Est un {{domxref("DOMString")}} contenant la couleur de fond des cellules. Il reflète l'attribut obsolète {{htmlattrxref("bgColor", "tr")}} attribute.
+- {{domxref("HTMLTableRowElement.cells")}} {{readonlyInline}}
+  - : Renvoie une {{domxref("HTMLCollection")}} en direct contenant les cellules de la ligne. La `HTMLCollection` est active et est automatiquement mise à jour lorsque des cellules sont ajoutées ou supprimées.
+- {{domxref("HTMLTableRowElement.ch")}} {{obsolete_inline}}
+  - : Est un {{domxref("DOMString")}} contenant un seul caractère. Ce caractère est celui sur lequel aligner toutes les cellules d'une colonne. Il reflète {{htmlattrxref("char", "tr")}} et par défaut les points décimaux associés à la langue, par exemple `'.'` pour l'anglais, ou `','` pour le français. Cette propriété était facultative et n'était pas très bien prise en charge.
+- {{domxref("HTMLTableRowElement.chOff")}} {{obsolete_inline}}
+  - : Est un {{domxref("DOMString")}} contenant un entier indiquant combien de caractère doivent être laissés à droite (pour les scripts de gauche à droite; ou à gauche pour les scripts de droite à gauche) du caractère défini par `HTMLTableRowElement.ch`. Cette propriété était facultative et n'était pas très bien prise en charge.
+- {{domxref("HTMLTableRowElement.rowIndex")}} {{readonlyInline}}
+  - : Renvoie une valeur `long` qui donne la position logique de la ligne dans la table entière. Si la ligne ne fait pas partie d'une table, renvoie `-1`.
+- {{domxref("HTMLTableRowElement.sectionRowIndex")}} {{readonlyInline}}
+  - : Renvoie une valeur `long` qui donne la position logique de la ligne dans la section de table à laquelle elle appartient. Si la ligne ne fait pas partie d'une section, renvoie `-1`.
+- {{domxref("HTMLTableRowElement.vAlign")}} {{obsolete_inline}}
+  - : Est un {{domxref("DOMString")}} représentant une valeur énumérée indiquant comment le contenu de la cellule doit être aligné verticalement. Il reflète l'attribut {{htmlattrxref("valign", "tr")}} et peut avoir l'une des valeurs suivantes : `"top"`, `"middle"`, `"bottom"`, ou `"baseline"`.
 
-<h2 id="Methods">Méthodes</h2>
+## Méthodes
 
-<p><em>Hérite des méthodes de son parent, {{domxref("HTMLElement")}}</em>.</p>
+_Hérite des méthodes de son parent, {{domxref("HTMLElement")}}_.
 
-<dl>
- <dt>{{domxref("HTMLTableRowElement.deleteCell()")}}</dt>
- <dd>Supprime la cellule à la position donnée dans la ligne. Si la position donnée est supérieure (ou égale car elle commence à zéro) au nombre de cellules dans la ligne, ou est inférieure à <code>0</code>, elle déclenche une {{domxref("DOMException")}} avec la valeur <code>IndexSizeError</code>.</dd>
- <dt>{{domxref("HTMLTableRowElement.insertCell()")}}</dt>
- <dd>Insère une nouvelle cellule juste avant la position donnée dans la ligne. Si la position donnée n'est pas donnée ou est <code>-1</code>, elle ajoute la cellule à la ligne. Si la position donnée est supérieure (ou égale car elle commence à zéro) au nombre de cellules dans la ligne, ou est inférieure à <code>-1</code>, elle déclenche une {{domxref("DOMException")}} avec la valeur <code>IndexSizeError</code>. Renvoie une référence à un <a href="/en-US/docs/Web/API/HTMLTableCellElement">HTMLTableCellElement [en-US]</a>.</dd>
-</dl>
+- {{domxref("HTMLTableRowElement.deleteCell()")}}
+  - : Supprime la cellule à la position donnée dans la ligne. Si la position donnée est supérieure (ou égale car elle commence à zéro) au nombre de cellules dans la ligne, ou est inférieure à `0`, elle déclenche une {{domxref("DOMException")}} avec la valeur `IndexSizeError`.
+- {{domxref("HTMLTableRowElement.insertCell()")}}
+  - : Insère une nouvelle cellule juste avant la position donnée dans la ligne. Si la position donnée n'est pas donnée ou est `-1`, elle ajoute la cellule à la ligne. Si la position donnée est supérieure (ou égale car elle commence à zéro) au nombre de cellules dans la ligne, ou est inférieure à `-1`, elle déclenche une {{domxref("DOMException")}} avec la valeur `IndexSizeError`. Renvoie une référence à un [HTMLTableCellElement \[en-US\]](/en-US/docs/Web/API/HTMLTableCellElement).
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commantaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "#htmltablerowelement", "HTMLTableRowElement")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', "tabular-data.html#the-tr-element", "HTMLTableRowElement")}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Le paramètre de <code>insertCell</code> est désormais facultatif et vaut par défaut <code>-1</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 HTML', 'html.html#ID-6986576', 'HTMLTableRowElement')}}</td>
-   <td>{{Spec2('DOM2 HTML')}}</td>
-   <td>Les propriétés <code>cells</code>, <code>rowIndex</code>, et <code>selectionRowIndex</code> sont désormais en lecture seule.<br>
-    Les méthodes <code>insertCell</code> et <code>deleteCell</code> peuvent déclencher des exceptions.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM1', 'level-one-html.html#ID-6986576', 'HTMLTableRowElement')}}</td>
-   <td>{{Spec2('DOM1')}}</td>
-   <td>Défintion initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                    | Statut                           | Commantaire                                                                                                                                                              |
+| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| {{SpecName('HTML WHATWG', "#htmltablerowelement", "HTMLTableRowElement")}}             | {{Spec2('HTML WHATWG')}} |                                                                                                                                                                          |
+| {{SpecName('HTML5 W3C', "tabular-data.html#the-tr-element", "HTMLTableRowElement")}} | {{Spec2('HTML5 W3C')}}     | Le paramètre de `insertCell` est désormais facultatif et vaut par défaut `-1`.                                                                                           |
+| {{SpecName('DOM2 HTML', 'html.html#ID-6986576', 'HTMLTableRowElement')}}                 | {{Spec2('DOM2 HTML')}}     | Les propriétés `cells`, `rowIndex`, et `selectionRowIndex` sont désormais en lecture seule. Les méthodes `insertCell` et `deleteCell` peuvent déclencher des exceptions. |
+| {{SpecName('DOM1', 'level-one-html.html#ID-6986576', 'HTMLTableRowElement')}}         | {{Spec2('DOM1')}}         | Défintion initiale.                                                                                                                                                      |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.HTMLTableRowElement")}}</p>
+{{Compat("api.HTMLTableRowElement")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>L'élément HTML implémentant cette interface : {{HTMLElement("tr")}}.</li>
-</ul>
+- L'élément HTML implémentant cette interface : {{HTMLElement("tr")}}.
diff --git a/files/fr/web/api/htmltablerowelement/insertcell/index.md b/files/fr/web/api/htmltablerowelement/insertcell/index.md
index 7b4ebb53b1..38ce65bf91 100644
--- a/files/fr/web/api/htmltablerowelement/insertcell/index.md
+++ b/files/fr/web/api/htmltablerowelement/insertcell/index.md
@@ -3,49 +3,47 @@ title: HTMLTableRowElement.insertCell()
 slug: Web/API/HTMLTableRowElement/insertCell
 translation_of: Web/API/HTMLTableRowElement/insertCell
 ---
-<div>{{APIRef("HTML DOM")}}</div>
+{{APIRef("HTML DOM")}}
 
-<p>La méthode <strong><code>HTMLTableRowElement.insertCell()</code></strong> insère une nouvelle cellule ({{HtmlElement("td")}}) dans une ligne de tableau ({{HtmlElement("tr")}}) et renvoie une référence sur cette cellule.</p>
+La méthode **`HTMLTableRowElement.insertCell()`** insère une nouvelle cellule ({{HtmlElement("td")}}) dans une ligne de tableau ({{HtmlElement("tr")}}) et renvoie une référence sur cette cellule.
 
-<div class="note">
-<p><strong>Note :</strong> <code>insertCell()</code> insère la cellule directement dans la ligne. La cellule n’a pas besoin d’être ajoutée séparément comme cela serait le cas si {{domxref("Document.createElement()")}} avait été utilisé pour créer le nouvel élément <code>&lt;td&gt;</code>.</p>
-</div>
+> **Note :** `insertCell()` insère la cellule directement dans la ligne. La cellule n’a pas besoin d’être ajoutée séparément comme cela serait le cas si {{domxref("Document.createElement()")}} avait été utilisé pour créer le nouvel élément `<td>`.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var <var>newCell</var> = <var>HTMLTableRowElement</var>.insertCell(<var>index</var>);
-</pre>
+    var newCell = HTMLTableRowElement.insertCell(index);
 
-<p>{{domxref("HTMLTableRowElement")}} est une référence sur un élément HTML {{HtmlElement("tr")}}.</p>
+{{domxref("HTMLTableRowElement")}} est une référence sur un élément HTML {{HtmlElement("tr")}}.
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>index</code> {{optional_inline}}</dt>
- <dd><code>index</code> est l’index de cellule de la nouvelle cellule. Si <code>index</code> est <code>-1</code> ou égal au nombre actuel de cellules, la nouvelle cellule est ajoutée à la fin la ligne. Si <code>index</code> est supérieur au nombre de cellules, une exception <code>IndexSizeError</code> sera levée. Si <code>index</code> est omis, la valeur sera <code>-1</code> par défaut.</dd>
-</dl>
+- `index` {{optional_inline}}
+  - : `index` est l’index de cellule de la nouvelle cellule. Si `index` est `-1` ou égal au nombre actuel de cellules, la nouvelle cellule est ajoutée à la fin la ligne. Si `index` est supérieur au nombre de cellules, une exception `IndexSizeError` sera levée. Si `index` est omis, la valeur sera `-1` par défaut.
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+### Valeur de retour
 
-<p><code>newCell</code> est une {{domxref("HTMLTableCellElement")}} qui fait référence à la nouvelle cellule.</p>
+`newCell` est une {{domxref("HTMLTableCellElement")}} qui fait référence à la nouvelle cellule.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Cet exemple utilise {{domxref("HTMLTableElement.insertRow()")}} pour ajouter une nouvelle ligne à une table.</p>
+Cet exemple utilise {{domxref("HTMLTableElement.insertRow()")}} pour ajouter une nouvelle ligne à une table.
 
-<p>Nous utilisons ensuite <code>insertCell(0)</code> pour insérer une nouvelle cellule dans la nouvelle ligne (pour être du HTML valide, un <code>&lt;tr&gt;</code> doit avoir au moins un élément <code>&lt;td&gt;</code>). Enfin, nous ajoutons du texte à la cellule en utilisant {{domxref("Document.createTextNode()")}} et {{domxref("Node.appendChild()")}}.</p>
+Nous utilisons ensuite `insertCell(0)` pour insérer une nouvelle cellule dans la nouvelle ligne (pour être du HTML valide, un `<tr>` doit avoir au moins un élément `<td>`). Enfin, nous ajoutons du texte à la cellule en utilisant {{domxref("Document.createTextNode()")}} et {{domxref("Node.appendChild()")}}.
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;table id="my-table"&gt;
-  &lt;tr&gt;&lt;td&gt;Row 1&lt;/td&gt;&lt;/tr&gt;
-  &lt;tr&gt;&lt;td&gt;Row 2&lt;/td&gt;&lt;/tr&gt;
-  &lt;tr&gt;&lt;td&gt;Row 3&lt;/td&gt;&lt;/tr&gt;
-&lt;/table&gt;</pre>
+```html
+<table id="my-table">
+  <tr><td>Row 1</td></tr>
+  <tr><td>Row 2</td></tr>
+  <tr><td>Row 3</td></tr>
+</table>
+```
 
-<h3 id="JavaScript">JavaScript</h3>
+### JavaScript
 
-<pre class="brush: js">function addRow(tableID) {
+```js
+function addRow(tableID) {
   // Obtient une référence sur la table
   let tableRef = document.getElementById(tableID);
 
@@ -61,43 +59,25 @@ translation_of: Web/API/HTMLTableRowElement/insertCell
 }
 
 // Appelle addRow() avec l’ID de la table
-addRow('my-table');</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Example")}}</p>
-
-<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", "tables.html#dom-tr-insertcell", "HTMLTableRowElement.insertCell()")}}</td>
-   <td>{{Spec2("HTML WHATWG")}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName("DOM2 HTML", "html.html#ID-68927016", "HTMLTableRowElement.insertCell()")}}</td>
-   <td>{{Spec2("DOM2 HTML")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+addRow('my-table');
+```
+
+### Résultat
+
+{{EmbedLiveSample("Example")}}
+
+## Spécifications
+
+| Spécification                                                                                                                    | Statut                           | Commentaire          |
+| -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName("HTML WHATWG", "tables.html#dom-tr-insertcell", "HTMLTableRowElement.insertCell()")}} | {{Spec2("HTML WHATWG")}} |                      |
+| {{SpecName("DOM2 HTML", "html.html#ID-68927016", "HTMLTableRowElement.insertCell()")}}             | {{Spec2("DOM2 HTML")}}     | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.HTMLTableRowElement.insertCell")}}</p>
+{{Compat("api.HTMLTableRowElement.insertCell")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("HTMLTableElement.insertRow()")}}</li>
- <li>L’élément HTML représentant les  cellules : {{domxref("HTMLTableCellElement")}}</li>
-</ul>
+- {{domxref("HTMLTableElement.insertRow()")}}
+- L’élément HTML représentant les  cellules : {{domxref("HTMLTableCellElement")}}
diff --git a/files/fr/web/api/htmltimeelement/datetime/index.md b/files/fr/web/api/htmltimeelement/datetime/index.md
index 48df191248..ec5ac4d13e 100644
--- a/files/fr/web/api/htmltimeelement/datetime/index.md
+++ b/files/fr/web/api/htmltimeelement/datetime/index.md
@@ -3,172 +3,176 @@ title: HTMLTimeElement.dateTime
 slug: Web/API/HTMLTimeElement/dateTime
 translation_of: Web/API/HTMLTimeElement/dateTime
 ---
-<div>{{ APIRef("HTML DOM") }}</div>
+{{ APIRef("HTML DOM") }}La propriété **`HTMLTimeElement`\*\***`.dateTime`\*\* est une {{domxref("DOMString")}} qui reflète l'attribut HTML {{ htmlattrxref("datetime", "time") }}, contenant une date et une heure interprétable par un ordinateur.
 
-<div>La propriété <code><strong>HTMLTimeElement</strong></code><strong><code>.dateTime</code></strong> est une {{domxref("DOMString")}} qui reflète l'attribut HTML {{ htmlattrxref("datetime", "time") }}, contenant une date et une heure interprétable par un ordinateur.</div>
-
-<p>Le format de la chaîne de caractères doit correspondre à l'une des micro-syntaxes HTML suivantes:</p>
+Le format de la chaîne de caractères doit correspondre à l'une des micro-syntaxes HTML suivantes:
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Microsyntaxe</th>
-   <th scope="col">Description</th>
-   <th scope="col">Exemples</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>Mois</td>
-   <td><em>AAAA</em><code>-</code><em>MM</em></td>
-   <td><code>2011-11</code>, <code>2013-05</code></td>
-  </tr>
-  <tr>
-   <td>
-    <p>Date</p>
-   </td>
-   <td><em><code>AAAA</code></em><code>-</code><em>MM</em><code>-</code><em>DD</em></td>
-   <td><code>1887-12-01</code></td>
-  </tr>
-  <tr>
-   <td>Date sans l'année</td>
-   <td><em>MM</em><code>-</code><em>DD</em></td>
-   <td><code>11-12</code></td>
-  </tr>
-  <tr>
-   <td>Heure</td>
-   <td><em>HH</em><code>:</code><em>MM</em><br>
-    <em>HH</em><code>:</code><em>MM</em><code>:</code><em>SS</em><br>
-    <em>HH</em><code>:</code><em>MM</em><code>:</code><em>SS</em><code>.</code><em>mmm</em></td>
-   <td><code>23:59</code><br>
-    <code>12:15:47</code><br>
-    <code>12:15:52.998</code></td>
-  </tr>
-  <tr>
-   <td>Date et heure locale</td>
-   <td><em>AAAA</em><code>-</code><em>MM</em><code>-</code><em>DD</em> <em>HH</em><code>:</code><em>MM</em><br>
-    <em>AAAA</em><code>-</code><em>MM</em><code>-</code><em>DD</em> <em>HH</em><code>:</code><em>MM</em><code>:</code><em>SS</em><br>
-    <em>AAAA</em><code>-</code><em>MM</em><code>-</code><em>DD</em> <em>HH</em><code>:</code><em>MM</em><code>:</code><em>SS<code>.</code><em>mmm</em></em><br>
-    <em>AAAA</em><code>-</code><em>MM</em><code>-</code><em>DD</em><code>T</code><em>HH</em><code>:</code><em>MM</em><br>
-    <em>AAAA</em><code>-</code><em>MM</em><code>-</code><em>DD</em><code>T</code><em>HH</em><code>:</code><em>MM</em><code>:</code><em>SS</em><br>
-    <em>AAAA</em><code>-</code><em>MM</em><code>-</code><em>DD</em><code>T</code><em>HH</em><code>:</code><em>MM</em><code>:</code><em>SS<code>.</code><em>mmm</em></em></td>
-   <td><code>2013-12-25 11:12<br>
-    1972-07-25 13:43:07<br>
-    1941-03-15 07:06:23.678<br>
-    2013-12-25T11:12<br>
-    1972-07-25T13:43:07<br>
-    1941-03-15T07:06:23.678</code></td>
-  </tr>
-  <tr>
-   <td>Décalage horaire</td>
-   <td><code>Z</code><br>
-    <code>+</code><em>HHMM<br>
-    <code>+</code></em><em>HH</em><code>:</code><em>MM</em><br>
-    <em><code>-</code><em>HHMM<br>
-    <code>-</code></em><em>HH</em><code>:</code><em>MM</em></em></td>
-   <td><code>Z<br>
-    +0200<br>
-    +04:30<br>
-    -0300<br>
-    -08:00</code></td>
-  </tr>
-  <tr>
-   <td>date et heure globale</td>
-   <td>
-    <p><em>N'importe quelle combinaison de date et d'heure locale suivie d'un décalage horaire</em></p>
-   </td>
-   <td><code>2013-12-25 11:12+0200<br>
-    1972-07-25 13:43:07+04:30<br>
-    1941-03-15 07:06:23.678Z<br>
-    2013-12-25T11:12-08:00</code></td>
-  </tr>
-  <tr>
-   <td>Semaine</td>
-   <td><em>AAAA</em><code>-W</code><em>WW</em></td>
-   <td><code>2013-W46</code></td>
-  </tr>
-  <tr>
-   <td>
-    <p>Quatre ou plus chiffres ASCII</p>
-   </td>
-   <td><em>AAAA</em></td>
-   <td><code>2013</code>, <code>0001</code></td>
-  </tr>
-  <tr>
-   <td>Durée</td>
-   <td><code>P</code><em>d</em><code>D</code><code>T</code><em>h</em><code>H</code><em>m</em><code>M</code><em>s</em><code>S</code><br>
-    <code>P</code><em>d</em><code>D</code><code>T</code><em>h</em><code>H</code><em>m</em><code>M</code><em>s</em><code>.</code>X<code>S</code><br>
-    <code>P</code><em>d</em><code>D</code><code>T</code><em>h</em><code>H</code><em>m</em><code>M</code><em>s</em><code>.</code>XX<code>S</code><br>
-    <code>P</code><em>d</em><code>D</code><code>T</code><em>h</em><code>H</code><em>m</em><code>M</code><em>s</em><code>.</code>XXX<code>S</code><br>
-    <code>P</code><code>T</code><em>h</em><code>H</code><em>m</em><code>M</code><em>s</em><code>S</code><br>
-    <code>P</code><code>T</code><em>h</em><code>H</code><em>m</em><code>M</code><em>s</em><code>.</code>X<code>S</code><br>
-    <code>P</code><code>T</code><em>h</em><code>H</code><em>m</em><code>M</code><em>s</em><code>.</code>XX<code>S</code><br>
-    <code>P</code><code>T</code><em>h</em><code>H</code><em>m</em><code>M</code><em>s</em><code>.</code>XXX<code>S</code><br>
-    <em>w</em><code>w </code><em>d</em><code>d </code><em>h</em><code>h </code><em>m</em><code>m </code><em>s</em><code>s</code></td>
-   <td><code>P12DT7H12M13S<br>
-    P12DT7H12M13.3S<br>
-    P12DT7H12M13.45S<br>
-    P12DT7H12M13.455S<br>
-    PT7H12M13S<br>
-    PT7H12M13.2S<br>
-    PT7H12M13.56S<br>
-    PT7H12M13.999S<br>
-    7d 5h 24m 13s</code></td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th scope="col">Microsyntaxe</th>
+      <th scope="col">Description</th>
+      <th scope="col">Exemples</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Mois</td>
+      <td><em>AAAA</em><code>-</code><em>MM</em></td>
+      <td><code>2011-11</code>, <code>2013-05</code></td>
+    </tr>
+    <tr>
+      <td><p>Date</p></td>
+      <td>
+        <em><code>AAAA</code></em
+        ><code>-</code><em>MM</em><code>-</code><em>DD</em>
+      </td>
+      <td><code>1887-12-01</code></td>
+    </tr>
+    <tr>
+      <td>Date sans l'année</td>
+      <td><em>MM</em><code>-</code><em>DD</em></td>
+      <td><code>11-12</code></td>
+    </tr>
+    <tr>
+      <td>Heure</td>
+      <td>
+        <em>HH</em><code>:</code><em>MM</em><br /><em>HH</em><code>:</code
+        ><em>MM</em><code>:</code><em>SS</em><br /><em>HH</em><code>:</code
+        ><em>MM</em><code>:</code><em>SS</em><code>.</code><em>mmm</em>
+      </td>
+      <td>
+        <code>23:59</code><br /><code>12:15:47</code><br /><code
+          >12:15:52.998</code
+        >
+      </td>
+    </tr>
+    <tr>
+      <td>Date et heure locale</td>
+      <td>
+        <em>AAAA</em><code>-</code><em>MM</em><code>-</code><em>DD</em>
+        <em>HH</em><code>:</code><em>MM</em><br /><em>AAAA</em><code>-</code
+        ><em>MM</em><code>-</code><em>DD</em> <em>HH</em><code>:</code
+        ><em>MM</em><code>:</code><em>SS</em><br /><em>AAAA</em><code>-</code
+        ><em>MM</em><code>-</code><em>DD</em> <em>HH</em><code>:</code
+        ><em>MM</em><code>:</code><em>SS<code>.</code><em>mmm</em></em
+        ><br /><em>AAAA</em><code>-</code><em>MM</em><code>-</code><em>DD</em
+        ><code>T</code><em>HH</em><code>:</code><em>MM</em><br /><em>AAAA</em
+        ><code>-</code><em>MM</em><code>-</code><em>DD</em><code>T</code
+        ><em>HH</em><code>:</code><em>MM</em><code>:</code><em>SS</em><br /><em
+          >AAAA</em
+        ><code>-</code><em>MM</em><code>-</code><em>DD</em><code>T</code
+        ><em>HH</em><code>:</code><em>MM</em><code>:</code
+        ><em>SS<code>.</code><em>mmm</em></em>
+      </td>
+      <td>
+        <code
+          >2013-12-25 11:12<br />1972-07-25 13:43:07<br />1941-03-15
+          07:06:23.678<br />2013-12-25T11:12<br />1972-07-25T13:43:07<br />1941-03-15T07:06:23.678</code
+        >
+      </td>
+    </tr>
+    <tr>
+      <td>Décalage horaire</td>
+      <td>
+        <code>Z</code><br /><code>+</code><em>HHMM<br /><code>+</code></em
+        ><em>HH</em><code>:</code><em>MM</em><br /><em
+          ><code>-</code><em>HHMM<br /><code>-</code></em
+          ><em>HH</em><code>:</code><em>MM</em></em
+        >
+      </td>
+      <td>
+        <code>Z<br />+0200<br />+04:30<br />-0300<br />-08:00</code>
+      </td>
+    </tr>
+    <tr>
+      <td>date et heure globale</td>
+      <td>
+        <p>
+          <em
+            >N'importe quelle combinaison de date et d'heure locale suivie d'un
+            décalage horaire</em
+          >
+        </p>
+      </td>
+      <td>
+        <code
+          >2013-12-25 11:12+0200<br />1972-07-25 13:43:07+04:30<br />1941-03-15
+          07:06:23.678Z<br />2013-12-25T11:12-08:00</code
+        >
+      </td>
+    </tr>
+    <tr>
+      <td>Semaine</td>
+      <td><em>AAAA</em><code>-W</code><em>WW</em></td>
+      <td><code>2013-W46</code></td>
+    </tr>
+    <tr>
+      <td><p>Quatre ou plus chiffres ASCII</p></td>
+      <td><em>AAAA</em></td>
+      <td><code>2013</code>, <code>0001</code></td>
+    </tr>
+    <tr>
+      <td>Durée</td>
+      <td>
+        <code>P</code><em>d</em><code>D</code><code>T</code><em>h</em
+        ><code>H</code><em>m</em><code>M</code><em>s</em><code>S</code
+        ><br /><code>P</code><em>d</em><code>D</code><code>T</code><em>h</em
+        ><code>H</code><em>m</em><code>M</code><em>s</em><code>.</code>X<code
+          >S</code
+        ><br /><code>P</code><em>d</em><code>D</code><code>T</code><em>h</em
+        ><code>H</code><em>m</em><code>M</code><em>s</em><code>.</code>XX<code
+          >S</code
+        ><br /><code>P</code><em>d</em><code>D</code><code>T</code><em>h</em
+        ><code>H</code><em>m</em><code>M</code><em>s</em><code>.</code>XXX<code
+          >S</code
+        ><br /><code>P</code><code>T</code><em>h</em><code>H</code><em>m</em
+        ><code>M</code><em>s</em><code>S</code><br /><code>P</code><code>T</code
+        ><em>h</em><code>H</code><em>m</em><code>M</code><em>s</em
+        ><code>.</code>X<code>S</code><br /><code>P</code><code>T</code
+        ><em>h</em><code>H</code><em>m</em><code>M</code><em>s</em
+        ><code>.</code>XX<code>S</code><br /><code>P</code><code>T</code
+        ><em>h</em><code>H</code><em>m</em><code>M</code><em>s</em
+        ><code>.</code>XXX<code>S</code><br /><em>w</em><code>w </code><em>d</em
+        ><code>d </code><em>h</em><code>h </code><em>m</em><code>m </code
+        ><em>s</em><code>s</code>
+      </td>
+      <td>
+        <code
+          >P12DT7H12M13S<br />P12DT7H12M13.3S<br />P12DT7H12M13.45S<br />P12DT7H12M13.455S<br />PT7H12M13S<br />PT7H12M13.2S<br />PT7H12M13.56S<br />PT7H12M13.999S<br />7d
+          5h 24m 13s</code
+        >
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>dateTimeString</em> = <em>timeElt</em>.dateTime;
-<em>timeElt.dateTime = </em><em>dateTimeString</em>
-</pre>
+    dateTimeString = timeElt.dateTime;
+    timeElt.dateTime = dateTimeString
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">// Supposons qu'il y ai un élément &lt;time id="t"&gt; dans le HTML
+```js
+// Supposons qu'il y ai un élément <time id="t"> dans le HTML
 
 var t = document.getElementById("t");
 t.dateTime = "6w 5h 34m 5s";
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "text-level-semantics.html#dom-time-datetime", "HTMLTimeElement")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Pas de changement depuis {{SpecName("HTML5.1")}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5.1', "text-level-semantics.html#dom-time-datetime", "HTMLTimeElement")}}</td>
-   <td>{{Spec2('HTML5.1')}}</td>
-   <td>Pas de changement depuis {{SpecName("HTML5 W3C")}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', "text-level-semantics.html#dom-time-datetime", "HTMLTimeElement")}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+```
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Spécifications
 
-<div>
+| Spécification                                                                                                                | Status                           | Commentaire                                                |
+| ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ---------------------------------------------------------- |
+| {{SpecName('HTML WHATWG', "text-level-semantics.html#dom-time-datetime", "HTMLTimeElement")}} | {{Spec2('HTML WHATWG')}} | Pas de changement depuis {{SpecName("HTML5.1")}}. |
+| {{SpecName('HTML5.1', "text-level-semantics.html#dom-time-datetime", "HTMLTimeElement")}}     | {{Spec2('HTML5.1')}}     | Pas de changement depuis {{SpecName("HTML5 W3C")}}. |
+| {{SpecName('HTML5 W3C', "text-level-semantics.html#dom-time-datetime", "HTMLTimeElement")}}     | {{Spec2('HTML5 W3C')}}     | Définition initiale                                        |
 
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.HTMLTimeElement.dateTime")}}</p>
-</div>
+{{Compat("api.HTMLTimeElement.dateTime")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>L'interface {{domxref("HTMLTimeElement")}} dont cette propriété appartient.</li>
-</ul>
+- L'interface {{domxref("HTMLTimeElement")}} dont cette propriété appartient.
diff --git a/files/fr/web/api/htmltimeelement/index.md b/files/fr/web/api/htmltimeelement/index.md
index aa3bf1b0c7..c583a99821 100644
--- a/files/fr/web/api/htmltimeelement/index.md
+++ b/files/fr/web/api/htmltimeelement/index.md
@@ -3,62 +3,35 @@ title: HTMLTimeElement
 slug: Web/API/HTMLTimeElement
 translation_of: Web/API/HTMLTimeElement
 ---
-<div>{{ APIRef("HTML DOM") }}</div>
+{{ APIRef("HTML DOM") }}
 
-<p>L'interface <strong><code>HTMLTimeElement</code></strong> fournit des propriétés spéciales (en plus de celles fournies en héritage par l'interface {{domxref("HTMLElement")}}) pour manipuler les éléments {{HTMLElement("time")}}.</p>
+L'interface **`HTMLTimeElement`** fournit des propriétés spéciales (en plus de celles fournies en héritage par l'interface {{domxref("HTMLElement")}}) pour manipuler les éléments {{HTMLElement("time")}}.
 
-<p>{{InheritanceDiagram(600, 120)}}</p>
+{{InheritanceDiagram(600, 120)}}
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<p><em>Hérite des propriétés de {{domxref("HTMLElement")}}.</em></p>
+_Hérite des propriétés de {{domxref("HTMLElement")}}._
 
-<dl>
- <dt>{{domxref("HTMLTimeElement.dateTime")}}</dt>
- <dd>C'est une {{domxref("DOMString")}} qui reflète l'attribut {{htmlattrxref("datetime", "time")}} de l'élément HTML correspondant, dans une forme interprétable par un ordinateur de la date et de l'heure.</dd>
-</dl>
+- {{domxref("HTMLTimeElement.dateTime")}}
+  - : C'est une {{domxref("DOMString")}} qui reflète l'attribut {{htmlattrxref("datetime", "time")}} de l'élément HTML correspondant, dans une forme interprétable par un ordinateur de la date et de l'heure.
 
-<h2 id="Méthodes">Méthodes</h2>
+## Méthodes
 
-<p><em>Pas de méthode spécifique, mais cette interface hérite des méthodes de {{domxref("HTMLElement")}}.</em></p>
+_Pas de méthode spécifique, mais cette interface hérite des méthodes de {{domxref("HTMLElement")}}._
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "#htmltimeelement", "HTMLTimeElement")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5.1', "text-level-semantics.html#the-time-element", "HTMLTimeElement")}}</td>
-   <td>{{Spec2('HTML5.1')}}</td>
-   <td>Pas de changement depuis {{SpecName("HTML5 W3C")}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', "text-level-semantics.html#the-time-element", "HTMLTimeElement")}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                            | Status                           | Commentaires                                               |
+| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ---------------------------------------------------------- |
+| {{SpecName('HTML WHATWG', "#htmltimeelement", "HTMLTimeElement")}}                                 | {{Spec2('HTML WHATWG')}} |                                                            |
+| {{SpecName('HTML5.1', "text-level-semantics.html#the-time-element", "HTMLTimeElement")}}     | {{Spec2('HTML5.1')}}     | Pas de changement depuis {{SpecName("HTML5 W3C")}}. |
+| {{SpecName('HTML5 W3C', "text-level-semantics.html#the-time-element", "HTMLTimeElement")}} | {{Spec2('HTML5 W3C')}}     | Définition initiale.                                       |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<div>
+{{Compat("api.HTMLTimeElement")}}
 
+## Voir aussi
 
-<p>{{Compat("api.HTMLTimeElement")}}</p>
-</div>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>L'élément HTML {{HTMLElement("time")}} implémentant cette interface.</li>
-</ul>
+- L'élément HTML {{HTMLElement("time")}} implémentant cette interface.
diff --git a/files/fr/web/api/htmlunknownelement/index.md b/files/fr/web/api/htmlunknownelement/index.md
index ce75a88677..5d240fe885 100644
--- a/files/fr/web/api/htmlunknownelement/index.md
+++ b/files/fr/web/api/htmlunknownelement/index.md
@@ -3,49 +3,32 @@ title: HTMLUnknownElement
 slug: Web/API/HTMLUnknownElement
 translation_of: Web/API/HTMLUnknownElement
 ---
-<div>{{APIRef("HTML DOM")}}</div>
+{{APIRef("HTML DOM")}}
 
-<p>L’interface <strong><code>HTMLUnknownElement</code></strong> représente un élément HTML invalide et dérive de l’interface {{DOMxRef("HTMLElement")}}, mais sans implémenter aucune propriété ou méthode additionnelle.</p>
+L’interface **`HTMLUnknownElement`** représente un élément HTML invalide et dérive de l’interface {{DOMxRef("HTMLElement")}}, mais sans implémenter aucune propriété ou méthode additionnelle.
 
-<p>{{InheritanceDiagram(600, 120)}}</p>
+{{InheritanceDiagram(600, 120)}}
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<p><em>Pas de propriété spécifique ; hérite des propriétés de son parent, {{DOMxRef("HTMLElement")}}.</em></p>
+_Pas de propriété spécifique ; hérite des propriétés de son parent, {{DOMxRef("HTMLElement")}}._
 
-<h2 id="Méthodes">Méthodes</h2>
+## Méthodes
 
-<p><em>Pas de méthode spécifique ; hérite des méthodes de son parent, {{DOMxRef("HTMLElement")}}.</em></p>
+_Pas de méthode spécifique ; hérite des méthodes de son parent, {{DOMxRef("HTMLElement")}}._
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML WHATWG", "elements.html#htmlunknownelement", "HTMLUnknownElement")}}</td>
-   <td>{{Spec2("HTML WHATWG")}}</td>
-   <td>Pas de changement depuis {{SpecName("HTML5 W3C")}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML5 W3C", "dom.html#htmlunknownelement", "HTMLUnknownElement")}}</td>
-   <td>{{Spec2("HTML5 W3C")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                    | Statut                           | Commentaire                                                |
+| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ---------------------------------------------------------- |
+| {{SpecName("HTML WHATWG", "elements.html#htmlunknownelement", "HTMLUnknownElement")}} | {{Spec2("HTML WHATWG")}} | Pas de changement depuis {{SpecName("HTML5 W3C")}}. |
+| {{SpecName("HTML5 W3C", "dom.html#htmlunknownelement", "HTMLUnknownElement")}}         | {{Spec2("HTML5 W3C")}}     | Définition initiale.                                       |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.HTMLUnknownElement")}}</p>
+{{Compat("api.HTMLUnknownElement")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>Les éléments HTML obsolètes ou non standard implémentant cette interface : {{HTMLElement("bgsound")}}, {{HTMLElement("blink")}}, {{HTMLElement("isindex")}}, {{HTMLElement("multicol")}}, {{HTMLElement("nextid")}}, {{HTMLElement("rb")}}, {{HTMLElement("spacer")}}</li>
- <li>{{DOMxRef("SVGUnknownElement")}}</li>
-</ul>
+- Les éléments HTML obsolètes ou non standard implémentant cette interface : {{HTMLElement("bgsound")}}, {{HTMLElement("blink")}}, {{HTMLElement("isindex")}}, {{HTMLElement("multicol")}}, {{HTMLElement("nextid")}}, {{HTMLElement("rb")}}, {{HTMLElement("spacer")}}
+- {{DOMxRef("SVGUnknownElement")}}
diff --git a/files/fr/web/api/htmlvideoelement/index.md b/files/fr/web/api/htmlvideoelement/index.md
index e146b86d4e..874ee77862 100644
--- a/files/fr/web/api/htmlvideoelement/index.md
+++ b/files/fr/web/api/htmlvideoelement/index.md
@@ -10,102 +10,81 @@ tags:
   - Video
 translation_of: Web/API/HTMLVideoElement
 ---
-<div>{{APIRef("HTML DOM")}}</div>
-
-<p><strong><code>L’interface HTMLVideoElement</code> </strong> fournit des propriétés et des méthodes spéciales pour manipuler des objets vidéo. Il hérite également des propriétés et des méthodes de {{domxref("HTMLMediaElement")}} et de {{domxref("HTMLElement")}}.</p>
-
-<p>La liste des <a href="/fr/docs/Web/Media/Formats">formats multimédias pris en charge</a> varie d’un navigateur à l’autre. Vous pouvez fournir votre vidéo dans un format unique que tous les navigateurs pertinents prennent en charge, ou fournir plusieurs sources vidéo dans des formats suffisamment différents couverts par les différents navigateurs que vous ciblez.</p>
-
-<p>{{InheritanceDiagram(600, 140)}}</p>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<p><em>Cette interface hérite des propriétés de ses interfaces ancêtres : </em><em>{{domxref("HTMLMediaElement")}} et </em><em>{{domxref("HTMLElement")}}.</em></p>
-
-<dl>
- <dt>{{domxref("HTMLVideoElement.height")}}</dt>
- <dd>Une chaîne de caractères {{domxref("DOMString")}} qui reflète la valeur de l'attribut HTML {{htmlattrxref("height", "video")}} indiquant la hauteur de la zone d'affichage, en pixels.</dd>
- <dt>{{domxref("HTMLVideoElement.poster")}}</dt>
- <dd>Une chaîne de caractères {{domxref("DOMString")}} qui reflète la valeur de l'attribut {{htmlattrxref("poster", "video")}} qui indique une image à afficher tant qu'aucune donnée vidéo n'est disponible.</dd>
- <dt>{{domxref("HTMLVideoElement.videoHeight")}} {{readonlyInline}}</dt>
- <dd>Un entier non signé qui indique la hauteur intrinsèque de la ressource, exprimée en pixels CSS, ou 0 tant que le média n'est pas disponible.</dd>
- <dt>{{domxref("HTMLVideoElement.videoWidth")}} {{readonlyInline}}</dt>
- <dd>Un entier non signé qui indique la largeur intrinsèque de la ressource, exprimée en pixels CSS, ou 0 tant que le média n'est pas disponible.</dd>
- <dt>{{domxref("HTMLVideoElement.width")}}</dt>
- <dd>Une chaîne de caractères {{domxref("DOMString")}} qui reflète la valeur de l'attribut HTML {{htmlattrxref("width", "video")}} indiquant la largeur de la zone d'affichage, en pixels.</dd>
-</dl>
-
-<h3 id="Propriétés_spécifiques_à_Gecko">Propriétés spécifiques à Gecko</h3>
-
-<dl>
- <dt>{{domxref("HTMLVideoElement.mozParsedFrames")}} {{Non-standard_Inline}}{{ReadOnlyInline}}</dt>
- <dd>Un entier non signé indiquant le nombre de <em>frames</em> qui ont été analysées (<em>parsed</em>) depuis la ressource média.</dd>
- <dt>{{domxref("HTMLVideoElement.mozDecodedFrames")}} {{Non-standard_Inline}}{{ReadOnlyInline}}</dt>
- <dd>Un entier non signé indiquant le nombre de <em>frames</em> qui ont été décodées en images.</dd>
- <dt>{{domxref("HTMLVideoElement.mozPresentedFrames")}} {{Non-standard_Inline}}{{ReadOnlyInline}}</dt>
- <dd>Un entier non signé indiquant le nombre de <em>frames</em> décodées qui ont été présentées au canal de rendu pour l'affichage.</dd>
- <dt>{{domxref("HTMLVideoElement.mozPaintedFrames")}} {{Non-standard_Inline}}{{ReadOnlyInline}}</dt>
- <dd>Un entier non signé indiquant le nombre de <em>frames</em> présentées et qui ont été affichées à l'écran.</dd>
- <dt>{{domxref("HTMLVideoElement.mozFrameDelay")}} {{Non-standard_Inline}}{{ReadOnlyInline}}</dt>
- <dd>Un double indiquant le retard, exprimé en secondes, pour l'affichage de la dernière <em>frame</em> affichée.</dd>
- <dt>{{domxref("HTMLVideoElement.mozHasAudio")}} {{Non-standard_Inline}}{{ReadOnlyInline}}</dt>
- <dd>Un booléen indiquant s'il y a de l'audio associé à cette vidéo.</dd>
-</dl>
-
-<h3 id="Propriétés_spécifiques_à_Microsoft">Propriétés spécifiques à Microsoft</h3>
-
-<dl>
- <dt>{{DOMxRef("HTMLVideoElement.msFrameStep()")}} {{Non-standard_Inline}}</dt>
- <dd>Permet d'avancer ou de reculer la vidéo d'une <em>frame</em>.</dd>
- <dt>{{DOMxRef("HTMLVideoElement.msHorizontalMirror")}} {{Non-standard_Inline}}</dt>
- <dd>Permet d'indiquer ou de définir si la vidéo est inversée horizontalement dans l'affichage.</dd>
- <dt>{{DOMxRef("HTMLVideoElement.msInsertVideoEffect()")}} {{Non-standard_Inline}}</dt>
- <dd>Ajoute l'effet vidéo indiqué dans le canal de rendu.</dd>
- <dt>{{DOMxRef("HTMLVideoElement.msIsLayoutOptimalForPlayback")}} {{Non-standard_Inline}}{{ReadOnlyInline}}</dt>
- <dd>Indique si la vidéo peut être affichée plus efficacement.</dd>
- <dt>{{DOMxRef("HTMLVideoElement.msIsStereo3D")}} {{Non-standard_Inline}}{{ReadOnlyInline}}</dt>
- <dd>Un booléen qui détermine si le système considère que la vidéo chargée est en stéréo 3D. La valeur <code>true</code> indique que la source est en stéro 3D.</dd>
- <dt>{{DOMxRef("HTMLVideoElement.msZoom")}} {{Non-standard_Inline}}</dt>
- <dd>Contrôle si le cadre de la vidéo est réduit pour s'inscrire dans la zone d'affichage de la vidéo (autrement dit : si la vidéo est zoomée/tronquée pour s'inscrire dans la zone correspondante).</dd>
-</dl>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<p><em>Hérite des méthodes de son parent {{domxref("HTMLMediaElement")}} et de son ancêtre {{domxref("HTMLElement")}}.</em></p>
-
-<dl>
- <dt>{{domxref("HTMLVideoElement.getVideoPlaybackQuality()")}} {{experimental_inline}}</dt>
- <dd>Cette méthode renvoie un objet {{domxref("VideoPlaybackQuality")}} contenant les métriques/statistiques sur la lecture actuelle avec des informations comme le nombre d'images sautées ou corrompues ainsi que le nombre total d'images.</dd>
-</dl>
-
-<h2 id="Évènements">Évènements</h2>
-
-<p><em>Hérite des méthodes de son parent {{domxref("HTMLMediaElement")}} et de son ancêtre {{domxref("HTMLElement")}}. </em>Pour écouter ces évènements, on utilisera <code><a href="/fr/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> ou on affectera un gestionnaire d'évènement avec la propriété <code>on&lt;NomEvenement&gt;</code> (ex. <code>onclick</code>) de l'interface.</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', "#htmlvideoelement", "HTMLVideoElement")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.HTMLVideoElement")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>L'élément HTML qui implémente cette interface {{HTMLElement("video")}}.</li>
- <li><a href="/fr/docs/Web/Media/Formats">Les formats médias pris en charge</a></li>
-</ul>
+{{APIRef("HTML DOM")}}
+
+**`L’interface HTMLVideoElement` **fournit des propriétés et des méthodes spéciales pour manipuler des objets vidéo. Il hérite également des propriétés et des méthodes de {{domxref("HTMLMediaElement")}} et de {{domxref("HTMLElement")}}.
+
+La liste des [formats multimédias pris en charge](/fr/docs/Web/Media/Formats) varie d’un navigateur à l’autre. Vous pouvez fournir votre vidéo dans un format unique que tous les navigateurs pertinents prennent en charge, ou fournir plusieurs sources vidéo dans des formats suffisamment différents couverts par les différents navigateurs que vous ciblez.
+
+{{InheritanceDiagram(600, 140)}}
+
+## Propriétés
+
+_Cette interface hérite des propriétés de ses interfaces ancêtres :_ _{{domxref("HTMLMediaElement")}} et_ _{{domxref("HTMLElement")}}._
+
+- {{domxref("HTMLVideoElement.height")}}
+  - : Une chaîne de caractères {{domxref("DOMString")}} qui reflète la valeur de l'attribut HTML {{htmlattrxref("height", "video")}} indiquant la hauteur de la zone d'affichage, en pixels.
+- {{domxref("HTMLVideoElement.poster")}}
+  - : Une chaîne de caractères {{domxref("DOMString")}} qui reflète la valeur de l'attribut {{htmlattrxref("poster", "video")}} qui indique une image à afficher tant qu'aucune donnée vidéo n'est disponible.
+- {{domxref("HTMLVideoElement.videoHeight")}} {{readonlyInline}}
+  - : Un entier non signé qui indique la hauteur intrinsèque de la ressource, exprimée en pixels CSS, ou 0 tant que le média n'est pas disponible.
+- {{domxref("HTMLVideoElement.videoWidth")}} {{readonlyInline}}
+  - : Un entier non signé qui indique la largeur intrinsèque de la ressource, exprimée en pixels CSS, ou 0 tant que le média n'est pas disponible.
+- {{domxref("HTMLVideoElement.width")}}
+  - : Une chaîne de caractères {{domxref("DOMString")}} qui reflète la valeur de l'attribut HTML {{htmlattrxref("width", "video")}} indiquant la largeur de la zone d'affichage, en pixels.
+
+### Propriétés spécifiques à Gecko
+
+- {{domxref("HTMLVideoElement.mozParsedFrames")}} {{Non-standard_Inline}}{{ReadOnlyInline}}
+  - : Un entier non signé indiquant le nombre de _frames_ qui ont été analysées (_parsed_) depuis la ressource média.
+- {{domxref("HTMLVideoElement.mozDecodedFrames")}} {{Non-standard_Inline}}{{ReadOnlyInline}}
+  - : Un entier non signé indiquant le nombre de _frames_ qui ont été décodées en images.
+- {{domxref("HTMLVideoElement.mozPresentedFrames")}} {{Non-standard_Inline}}{{ReadOnlyInline}}
+  - : Un entier non signé indiquant le nombre de _frames_ décodées qui ont été présentées au canal de rendu pour l'affichage.
+- {{domxref("HTMLVideoElement.mozPaintedFrames")}} {{Non-standard_Inline}}{{ReadOnlyInline}}
+  - : Un entier non signé indiquant le nombre de _frames_ présentées et qui ont été affichées à l'écran.
+- {{domxref("HTMLVideoElement.mozFrameDelay")}} {{Non-standard_Inline}}{{ReadOnlyInline}}
+  - : Un double indiquant le retard, exprimé en secondes, pour l'affichage de la dernière _frame_ affichée.
+- {{domxref("HTMLVideoElement.mozHasAudio")}} {{Non-standard_Inline}}{{ReadOnlyInline}}
+  - : Un booléen indiquant s'il y a de l'audio associé à cette vidéo.
+
+### Propriétés spécifiques à Microsoft
+
+- {{DOMxRef("HTMLVideoElement.msFrameStep()")}} {{Non-standard_Inline}}
+  - : Permet d'avancer ou de reculer la vidéo d'une _frame_.
+- {{DOMxRef("HTMLVideoElement.msHorizontalMirror")}} {{Non-standard_Inline}}
+  - : Permet d'indiquer ou de définir si la vidéo est inversée horizontalement dans l'affichage.
+- {{DOMxRef("HTMLVideoElement.msInsertVideoEffect()")}} {{Non-standard_Inline}}
+  - : Ajoute l'effet vidéo indiqué dans le canal de rendu.
+- {{DOMxRef("HTMLVideoElement.msIsLayoutOptimalForPlayback")}} {{Non-standard_Inline}}{{ReadOnlyInline}}
+  - : Indique si la vidéo peut être affichée plus efficacement.
+- {{DOMxRef("HTMLVideoElement.msIsStereo3D")}} {{Non-standard_Inline}}{{ReadOnlyInline}}
+  - : Un booléen qui détermine si le système considère que la vidéo chargée est en stéréo 3D. La valeur `true` indique que la source est en stéro 3D.
+- {{DOMxRef("HTMLVideoElement.msZoom")}} {{Non-standard_Inline}}
+  - : Contrôle si le cadre de la vidéo est réduit pour s'inscrire dans la zone d'affichage de la vidéo (autrement dit : si la vidéo est zoomée/tronquée pour s'inscrire dans la zone correspondante).
+
+## Méthodes
+
+_Hérite des méthodes de son parent {{domxref("HTMLMediaElement")}} et de son ancêtre {{domxref("HTMLElement")}}._
+
+- {{domxref("HTMLVideoElement.getVideoPlaybackQuality()")}} {{experimental_inline}}
+  - : Cette méthode renvoie un objet {{domxref("VideoPlaybackQuality")}} contenant les métriques/statistiques sur la lecture actuelle avec des informations comme le nombre d'images sautées ou corrompues ainsi que le nombre total d'images.
+
+## Évènements
+
+_Hérite des méthodes de son parent {{domxref("HTMLMediaElement")}} et de son ancêtre {{domxref("HTMLElement")}}._ Pour écouter ces évènements, on utilisera [`addEventListener()`](/fr/docs/Web/API/EventTarget/addEventListener) ou on affectera un gestionnaire d'évènement avec la propriété `on<NomEvenement>` (ex. `onclick`) de l'interface.
+
+## Spécifications
+
+| Spécification                                                                                | État                             | Commentaires |
+| -------------------------------------------------------------------------------------------- | -------------------------------- | ------------ |
+| {{SpecName('HTML WHATWG', "#htmlvideoelement", "HTMLVideoElement")}} | {{Spec2('HTML WHATWG')}} |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.HTMLVideoElement")}}
+
+## Voir aussi
+
+- L'élément HTML qui implémente cette interface {{HTMLElement("video")}}.
+- [Les formats médias pris en charge](/fr/docs/Web/Media/Formats)
diff --git a/files/fr/web/api/idbcursor/advance/index.md b/files/fr/web/api/idbcursor/advance/index.md
index d7740ad049..6b56ff6a70 100644
--- a/files/fr/web/api/idbcursor/advance/index.md
+++ b/files/fr/web/api/idbcursor/advance/index.md
@@ -8,61 +8,45 @@ tags:
   - Reference
 translation_of: Web/API/IDBCursor/advance
 ---
-<div>{{APIRef("IndexedDB")}}</div>
+{{APIRef("IndexedDB")}}
 
-<p>La méthode <strong><code>advance()</code></strong> de l'interface {{domxref("IDBCursor")}} définit le nombre d'itérations du curseur avec lequel celui-ci doit se déplacer vers l'avant.</p>
+La méthode **`advance()`** de l'interface {{domxref("IDBCursor")}} définit le nombre d'itérations du curseur avec lequel celui-ci doit se déplacer vers l'avant.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">cursor.advance(count);</pre>
+```js
+cursor.advance(count);
+```
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>count</code></dt>
- <dd>Le nombre d'itérations du curseur.</dd>
-</dl>
+- `count`
+  - : Le nombre d'itérations du curseur.
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Aucune.</p>
+Aucune.
 
-<h3 id="Exceptions">Exceptions</h3>
+### Exceptions
 
-<p>Cette méthode peut déclencher des exceptions  {{domxref("DOMException")}} :</p>
+Cette méthode peut déclencher des exceptions  {{domxref("DOMException")}} :
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Exception</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>TransactionInactiveError</code></td>
-   <td>Cette transaction IDBCursor est inactive.</td>
-  </tr>
-  <tr>
-   <td><code>TypeError</code></td>
-   <td>La valeur passée au paramètre <code>count</code> vaut zéro ou est négative.</td>
-  </tr>
-  <tr>
-   <td><code>InvalidStateError</code></td>
-   <td>Le curseur est en itération ou a itéré au-delà de la plage.</td>
-  </tr>
- </tbody>
-</table>
+| Exception                  | Description                                                      |
+| -------------------------- | ---------------------------------------------------------------- |
+| `TransactionInactiveError` | Cette transaction IDBCursor est inactive.                        |
+| `TypeError`                | La valeur passée au paramètre `count` vaut zéro ou est négative. |
+| `InvalidStateError`        | Le curseur est en itération ou a itéré au-delà de la plage.      |
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Dans ce petit morceau de code on fait une transaction, récupère un magasin d'objet, puis utilise un curseur pour itérer sur les enregistrements du magasin. Ici, on utilise <code>cursor.advance(2)</code> pour avancer de 2 cases à chaque fois, ce qui signifie que seule la moitié des résultats sera affichée. <code>advance()</code>fonctionne de façon similaire à {{domxref ("IDBCursor.continue")}} mais permet de sauter plusieurs enregistrements à la fois et pas uniquement d'accéder à l'enregistrement suivant.</p>
+Dans ce petit morceau de code on fait une transaction, récupère un magasin d'objet, puis utilise un curseur pour itérer sur les enregistrements du magasin. Ici, on utilise `cursor.advance(2)` pour avancer de 2 cases à chaque fois, ce qui signifie que seule la moitié des résultats sera affichée. `advance()`fonctionne de façon similaire à {{domxref ("IDBCursor.continue")}} mais permet de sauter plusieurs enregistrements à la fois et pas uniquement d'accéder à l'enregistrement suivant.
 
-<p>On notera également que, dans chaque itération de la boucle, on peut  récupérer les données de l'enregistrement en cours grâce à l'objet curseur via <code>curseur.value.foo</code>. Pour un exemple fonctionnel complet, voir <a href="https://github.com/mdn/IDBcursor-example/">notre exemple IDBCursor</a> (<a href="https://mdn.github.io/IDBcursor-example/">l'exemple en <em>live</em></a>).</p>
+On notera également que, dans chaque itération de la boucle, on peut  récupérer les données de l'enregistrement en cours grâce à l'objet curseur via `curseur.value.foo`. Pour un exemple fonctionnel complet, voir [notre exemple IDBCursor](https://github.com/mdn/IDBcursor-example/) ([l'exemple en _live_](https://mdn.github.io/IDBcursor-example/)).
 
-<pre class="brush: js">function advanceResult() {
+```js
+function advanceResult() {
   list.innerHTML = '';
   var transaction = db.transaction(['granListAlbum'], "readonly");
   var objectStore = transaction.objectStore('granListAlbum');
@@ -71,44 +55,32 @@ translation_of: Web/API/IDBCursor/advance
     var curseur = event.target.result;
     if(curseur) {
       var listItem = document.createElement('li');
-      listItem.innerHTML = '<strong>' + curseur.value.titreAlbum + '</strong>, ' + curseur.value.annee;
+      listItem.innerHTML = '' + curseur.value.titreAlbum + ', ' + curseur.value.annee;
       list.appendChild(listItem);
       curseur.advance(2);
     } else {
       console.log('moitié des resultats affichée');
     }
   };
-};</pre>
-
-<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('IndexedDB', '#widl-IDBCursor-advance-void-unsigned-long-count', 'advance()')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.IDBCursor.advance")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Manipuler IndexedDB</a></li>
- <li>Démarrer des transactions : {{domxref("IDBDatabase")}}</li>
- <li>Manipuler des transactions : {{domxref("IDBTransaction")}}</li>
- <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
- <li>Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}</li>
- <li>Manipuler des curseurs : {{domxref("IDBCursor")}}</li>
- <li>Exemple de référence pour IndexedDB : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a></li>
-</ul>
+};
+```
+
+## Spécifications
+
+| Spécification                                                                                                            | État                         | Commentaires |
+| ------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------ |
+| {{SpecName('IndexedDB', '#widl-IDBCursor-advance-void-unsigned-long-count', 'advance()')}} | {{Spec2('IndexedDB')}} |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.IDBCursor.advance")}}
+
+## Voir aussi
+
+- [Manipuler IndexedDB](/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB)
+- Démarrer des transactions : {{domxref("IDBDatabase")}}
+- Manipuler des transactions : {{domxref("IDBTransaction")}}
+- Définir un intervalle de clés : {{domxref("IDBKeyRange")}}
+- Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}
+- Manipuler des curseurs : {{domxref("IDBCursor")}}
+- Exemple de référence pour IndexedDB : [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages)
diff --git a/files/fr/web/api/idbcursor/continue/index.md b/files/fr/web/api/idbcursor/continue/index.md
index 843049a0e0..7792e063da 100644
--- a/files/fr/web/api/idbcursor/continue/index.md
+++ b/files/fr/web/api/idbcursor/continue/index.md
@@ -8,63 +8,71 @@ tags:
   - Reference
 translation_of: Web/API/IDBCursor/continue
 ---
-<div>{{APIRef("IndexedDB")}}</div>
+{{APIRef("IndexedDB")}}
 
-<p>La méthode <strong><code>continue()</code></strong> de l'interface {{domxref("IDBCursor")}} fait avancer le curseur jusqu'à la prochaine position qui corrrespond à une clé donnée si celle-ci est passée en paramètre, si aucune clé n'est indiquée, le curseur avancera à la position qui suit immédiatement la position actuelle (dans la direction de progression du curseur).</p>
+La méthode **`continue()`** de l'interface {{domxref("IDBCursor")}} fait avancer le curseur jusqu'à la prochaine position qui corrrespond à une clé donnée si celle-ci est passée en paramètre, si aucune clé n'est indiquée, le curseur avancera à la position qui suit immédiatement la position actuelle (dans la direction de progression du curseur).
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">curseur.continue(<em>cléOptionnelle</em>);</pre>
+```js
+curseur.continue(cléOptionnelle);
+```
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code><em>cléOptionnelle</em></code></dt>
- <dd>La clé sur laquelle se positionne le curseur.</dd>
-</dl>
+- `cléOptionnelle`
+  - : La clé sur laquelle se positionne le curseur.
 
-<h3 id="Exceptions">Exceptions</h3>
+### Exceptions
 
-<p>Cette méthode peut déclencher des exceptions  {{domxref("DOMException")}} de type :</p>
+Cette méthode peut déclencher des exceptions  {{domxref("DOMException")}} de type :
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Exception</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>TransactionInactiveError</code></td>
-   <td>La transaction de l'IDBCursor est inactive.</td>
-  </tr>
-  <tr>
-   <td><code>DataError</code></td>
-   <td>
-    <p>Le paramètre <code><em>cléOptionnelle</em></code> peut:</p>
-
-    <ul>
-     <li>Être invalide.</li>
-     <li>Être inférieur ou égal à la position de ce curseur et la direction du curseur <code>next</code> ou <code>nextunique</code>.</li>
-     <li>Être supérieur ou égal à la position de ce curseur et la direction de ce curseur <code>prev</code> ou <code>prevunique</code>.</li>
-    </ul>
-   </td>
-  </tr>
-  <tr>
-   <td><code>InvalidStateError</code></td>
-   <td>Le curseur est en itération ou il a itéré au-delà de la plage.</td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th scope="col">Exception</th>
+      <th scope="col">Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>TransactionInactiveError</code></td>
+      <td>La transaction de l'IDBCursor est inactive.</td>
+    </tr>
+    <tr>
+      <td><code>DataError</code></td>
+      <td>
+        <p>
+          Le paramètre <code><em>cléOptionnelle</em></code> peut:
+        </p>
+        <ul>
+          <li>Être invalide.</li>
+          <li>
+            Être inférieur ou égal à la position de ce curseur et la direction
+            du curseur <code>next</code> ou <code>nextunique</code>.
+          </li>
+          <li>
+            Être supérieur ou égal à la position de ce curseur et la direction
+            de ce curseur <code>prev</code> ou <code>prevunique</code>.
+          </li>
+        </ul>
+      </td>
+    </tr>
+    <tr>
+      <td><code>InvalidStateError</code></td>
+      <td>Le curseur est en itération ou il a itéré au-delà de la plage.</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Dans ce petit morceau de code, on fait une transaction, on récupère un magasin d'objet, puis on utilise un curseur afin d'itérer sur les enregistrements contenus dans le magasin. Il n'est pas nécessaire de sélectionner les données selon une clé, on peut simplement toutes les récupérer. On notera qu'à chaque itération de la boucle, on récupère les données correspondantes à l'enregistrement grâce au curseur sous la forme <code>curseur.value.toto</code>. Pour étudier un exemple de travail complet, voir <a href="https://github.com/mdn/IDBcursor-example/">notre exemple IDBCursor</a> (<a href="https://mdn.github.io/IDBcursor-example/">voir l'exemple live</a>).</p>
+Dans ce petit morceau de code, on fait une transaction, on récupère un magasin d'objet, puis on utilise un curseur afin d'itérer sur les enregistrements contenus dans le magasin. Il n'est pas nécessaire de sélectionner les données selon une clé, on peut simplement toutes les récupérer. On notera qu'à chaque itération de la boucle, on récupère les données correspondantes à l'enregistrement grâce au curseur sous la forme `curseur.value.toto`. Pour étudier un exemple de travail complet, voir [notre exemple IDBCursor](https://github.com/mdn/IDBcursor-example/) ([voir l'exemple live](https://mdn.github.io/IDBcursor-example/)).
 
-<pre class="brush: js">function afficheDonnee() {
+```js
+function afficheDonnee() {
   var transaction = db.transaction(['granListAlbum'], "readonly");
   var objectStore = transaction.objectStore('granListAlbum');
 
@@ -81,37 +89,24 @@ translation_of: Web/API/IDBCursor/continue
     }
   };
 };
-</pre>
+```
 
-<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('IndexedDB', '#widl-IDBCursor-continue-void-any-key', 'continue()')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                | État                         | Commentaires |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------ |
+| {{SpecName('IndexedDB', '#widl-IDBCursor-continue-void-any-key', 'continue()')}} | {{Spec2('IndexedDB')}} |              |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.IDBCursor.continue")}}</p>
+{{Compat("api.IDBCursor.continue")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Manipuler IndexedDB</a></li>
- <li>Démarrer des transactions : {{domxref("IDBDatabase")}}</li>
- <li>Manipuler des transactions : {{domxref("IDBTransaction")}}</li>
- <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
- <li>Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}</li>
- <li>Manipuler des curseurs : {{domxref("IDBCursor")}}</li>
- <li>Exemple de référence pour IndexedDB : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a></li>
-</ul>
+- [Manipuler IndexedDB](/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB)
+- Démarrer des transactions : {{domxref("IDBDatabase")}}
+- Manipuler des transactions : {{domxref("IDBTransaction")}}
+- Définir un intervalle de clés : {{domxref("IDBKeyRange")}}
+- Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}
+- Manipuler des curseurs : {{domxref("IDBCursor")}}
+- Exemple de référence pour IndexedDB : [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages)
diff --git a/files/fr/web/api/idbcursor/index.md b/files/fr/web/api/idbcursor/index.md
index a60210cbee..d471c41de2 100644
--- a/files/fr/web/api/idbcursor/index.md
+++ b/files/fr/web/api/idbcursor/index.md
@@ -8,95 +8,108 @@ tags:
   - Référence(2)
 translation_of: Web/API/IDBCursor
 ---
-<div>{{APIRef("IndexedDB")}}</div>
+{{APIRef("IndexedDB")}}
 
-<p>L'interface <strong><code>IDBCursor</code></strong> de l' <a href="/fr/docs/Web/API/API_IndexedDB">API IndexedDB</a> représente un <a href="/fr/docs/Web/API/API_IndexedDB/Basic_Concepts_Behind_IndexedDB#range">curseur</a> pour traverser ou itérer sur plusieurs enregistrements dans une base de données.</p>
+L'interface **`IDBCursor`** de l' [API IndexedDB](/fr/docs/Web/API/API_IndexedDB) représente un [curseur](/fr/docs/Web/API/API_IndexedDB/Basic_Concepts_Behind_IndexedDB#range) pour traverser ou itérer sur plusieurs enregistrements dans une base de données.
 
-<p>Le curseur possède une source qui indique l'index ou le magasin d'objets sur lequel il itère. Il est décrit par une position dans cet intervalle et par une direction dans laquelle il se déplace : dans l'ordre des clés d'enregistrement suivant le sens donné au curseur (montant ou descendant). Le curseur permet à une application de traiter de façon asynchrone tous les enregistrements de sa plage.</p>
+Le curseur possède une source qui indique l'index ou le magasin d'objets sur lequel il itère. Il est décrit par une position dans cet intervalle et par une direction dans laquelle il se déplace : dans l'ordre des clés d'enregistrement suivant le sens donné au curseur (montant ou descendant). Le curseur permet à une application de traiter de façon asynchrone tous les enregistrements de sa plage.
 
-<p>On peut avoir autant de curseurs qu'on souhaite en même temps. Ce sera toujours le même objet <code>IDBCursor</code> qui représentera un curseur donné. Les opérations sont effectuées à l’intérieur de l'index ou du magasin d'objet.</p>
+On peut avoir autant de curseurs qu'on souhaite en même temps. Ce sera toujours le même objet `IDBCursor` qui représentera un curseur donné. Les opérations sont effectuées à l’intérieur de l'index ou du magasin d'objet.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Méthodes">Méthodes</h2>
+## Méthodes
 
-<dl>
- <dt>{{domxref("IDBCursor.advance()")}}</dt>
- <dd>Définit le nombre d’itérations vers l'avant.</dd>
- <dt>{{domxref("IDBCursor.continue()")}}</dt>
- <dd>Avance le curseur sur la position suivante le long de sa direction, jusqu'à l'élément dont la clé correspond au paramètre (optionnel) passé à la fonction.</dd>
- <dt>{{domxref("IDBCursor.delete()")}}</dt>
- <dd>Retourne un objet {{domxref ("IDBRequest")}}, et, dans un thread séparé, supprime l'enregistrement à la position du curseur, sans changer la position du curseur. Ceci peut être utilisé pour supprimer des enregistrements spécifiques.</dd>
- <dt>{{domxref("IDBCursor.update()")}}</dt>
- <dd>Retourne un objet {{domxref("IDBRequest")}}, et, dans un thread séparé, met à jour la valeur à la position actuelle du curseur dans le magasin d'objets. Ceci peut être utilisé pour mettre à jour des enregistrements spécifiques.</dd>
-</dl>
+- {{domxref("IDBCursor.advance()")}}
+  - : Définit le nombre d’itérations vers l'avant.
+- {{domxref("IDBCursor.continue()")}}
+  - : Avance le curseur sur la position suivante le long de sa direction, jusqu'à l'élément dont la clé correspond au paramètre (optionnel) passé à la fonction.
+- {{domxref("IDBCursor.delete()")}}
+  - : Retourne un objet {{domxref ("IDBRequest")}}, et, dans un thread séparé, supprime l'enregistrement à la position du curseur, sans changer la position du curseur. Ceci peut être utilisé pour supprimer des enregistrements spécifiques.
+- {{domxref("IDBCursor.update()")}}
+  - : Retourne un objet {{domxref("IDBRequest")}}, et, dans un thread séparé, met à jour la valeur à la position actuelle du curseur dans le magasin d'objets. Ceci peut être utilisé pour mettre à jour des enregistrements spécifiques.
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<dl>
- <dt>{{domxref("IDBCursor.source")}} {{readonlyInline}}</dt>
- <dd>Renvoie le {{domxref("IDBObjectStore")}} ou {{domxref("IDBIndex")}} sur lequel le curseur itère. Cette fonction ne retourne jamais <code>null</code> et ne déclenche pas d’exception, même dans les cas ou le curseur est en train d'itérer, s'il a itéré en dehors la plage ou si la transaction n'est pas active.</dd>
- <dt>{{domxref("IDBCursor.direction")}} {{readonlyInline}}</dt>
- <dd>Renvoie la direction de parcours du curseur. Voir le paragraphe suivant, <a href="#constantes">Constantes</a>, pour les valeurs possibles.</dd>
- <dt>{{domxref("IDBCursor.key")}} {{readonlyInline}}</dt>
- <dd>Renvoie la clé de l'enregistrement à la position du curseur ou <code>undefined</code> si le curseur est en dehors de la plage. La clé peut être de n'importe quel type de données.</dd>
- <dt>{{domxref("IDBCursor.primaryKey")}} {{readonlyInline}}</dt>
- <dd>Renvoie la clé primaire effective actuelle du curseur ou <code>undefined</code> si le curseur est actuellement itéré ou a itéré en dehors de sa plage. La clé primaire du curseur peut être de tout type de données.</dd>
-</dl>
+- {{domxref("IDBCursor.source")}} {{readonlyInline}}
+  - : Renvoie le {{domxref("IDBObjectStore")}} ou {{domxref("IDBIndex")}} sur lequel le curseur itère. Cette fonction ne retourne jamais `null` et ne déclenche pas d’exception, même dans les cas ou le curseur est en train d'itérer, s'il a itéré en dehors la plage ou si la transaction n'est pas active.
+- {{domxref("IDBCursor.direction")}} {{readonlyInline}}
+  - : Renvoie la direction de parcours du curseur. Voir le paragraphe suivant, [Constantes](#constantes), pour les valeurs possibles.
+- {{domxref("IDBCursor.key")}} {{readonlyInline}}
+  - : Renvoie la clé de l'enregistrement à la position du curseur ou `undefined` si le curseur est en dehors de la plage. La clé peut être de n'importe quel type de données.
+- {{domxref("IDBCursor.primaryKey")}} {{readonlyInline}}
+  - : Renvoie la clé primaire effective actuelle du curseur ou `undefined` si le curseur est actuellement itéré ou a itéré en dehors de sa plage. La clé primaire du curseur peut être de tout type de données.
 
-<h2 id="Constantes">Constantes</h2>
+## Constantes
 
-<p>{{deprecated_header(13)}}</p>
+{{deprecated_header(13)}}
 
-<div class="warning">
-  <p><strong>Attention :</strong> Ces constantes ne sont plus disponibles - elles ont été retirées depuis Gecko 25. Les valeurs équivalentes en chaînes de caractères devraient être utilisées à la place (cf. {{bug(891944)}}).</p>
-</div>
+> **Attention :** Ces constantes ne sont plus disponibles - elles ont été retirées depuis Gecko 25. Les valeurs équivalentes en chaînes de caractères devraient être utilisées à la place (cf. {{bug(891944)}}).
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Constante</th>
-   <th scope="col">Valeur</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>NEXT</code></td>
-   <td>
-    <p><code>"next"</code></p>
-   </td>
-   <td>Le curseur indique tous les enregistrements, y compris les doublons. Il commence à la limite inférieure de la plage de clé et se déplace vers le haut (en itérant dans l'ordre des clés).</td>
-  </tr>
-  <tr>
-   <td><code>NEXTUNIQUE</code></td>
-   <td>
-    <p><code>"nextunique"</code></p>
-   </td>
-   <td>Le curseur indique tous les enregistrements, à l'exclusion des doublons. Si plusieurs enregistrements existent avec la même clé, seule la première itération est récupérée. Il commence à la limite inférieure de la plage de clé et se déplace vers le haut.</td>
-  </tr>
-  <tr>
-   <td><code>PREV</code></td>
-   <td>
-    <p><code>"prev"</code></p>
-   </td>
-   <td>Le curseur indique tous les enregistrements, y compris les doublons. Il commence à la limite supérieure de la plage de clé et se déplace vers le bas (en itérant dans l'ordre inverse des clés).</td>
-  </tr>
-  <tr>
-   <td><code>PREVUNIQUE</code></td>
-   <td>
-    <p><code>"prevunique"</code></p>
-   </td>
-   <td>Le curseur indique tous les enregistrements, à l'exclusion des doublons. Si plusieurs enregistrements existent avec la même clé, seule la première itération est récupéré. Il commence à la limite supérieure de la plage de clé et se déplace vers le bas.</td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th scope="col">Constante</th>
+      <th scope="col">Valeur</th>
+      <th scope="col">Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>NEXT</code></td>
+      <td>
+        <p><code>"next"</code></p>
+      </td>
+      <td>
+        Le curseur indique tous les enregistrements, y compris les doublons. Il
+        commence à la limite inférieure de la plage de clé et se déplace vers le
+        haut (en itérant dans l'ordre des clés).
+      </td>
+    </tr>
+    <tr>
+      <td><code>NEXTUNIQUE</code></td>
+      <td>
+        <p><code>"nextunique"</code></p>
+      </td>
+      <td>
+        Le curseur indique tous les enregistrements, à l'exclusion des doublons.
+        Si plusieurs enregistrements existent avec la même clé, seule la
+        première itération est récupérée. Il commence à la limite inférieure de
+        la plage de clé et se déplace vers le haut.
+      </td>
+    </tr>
+    <tr>
+      <td><code>PREV</code></td>
+      <td>
+        <p><code>"prev"</code></p>
+      </td>
+      <td>
+        Le curseur indique tous les enregistrements, y compris les doublons. Il
+        commence à la limite supérieure de la plage de clé et se déplace vers le
+        bas (en itérant dans l'ordre inverse des clés).
+      </td>
+    </tr>
+    <tr>
+      <td><code>PREVUNIQUE</code></td>
+      <td>
+        <p><code>"prevunique"</code></p>
+      </td>
+      <td>
+        Le curseur indique tous les enregistrements, à l'exclusion des doublons.
+        Si plusieurs enregistrements existent avec la même clé, seule la
+        première itération est récupéré. Il commence à la limite supérieure de
+        la plage de clé et se déplace vers le bas.
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Dans ce fragment simple, nous créons une transaction, récupérons un magasin d'objets, puis utilisons un curseur pour parcourir tous les enregistrements du magasin d'objets. Le curseur ne nous oblige pas à sélectionner les données basées sur une clé, nous pouvons simplement travailler sur tout les enregistrements. Notez également que dans chaque itération de la boucle, vous pouvez récupérer les données de l'enregistrement en cours sous l'objet curseur à l'aide <code>curseur.value.toto</code>. Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/IDBcursor-example/">exemple IDBCursor</a> (<a href="https://mdn.github.io/IDBcursor-example/">l'exemple en <em>live</em></a>).</p>
+Dans ce fragment simple, nous créons une transaction, récupérons un magasin d'objets, puis utilisons un curseur pour parcourir tous les enregistrements du magasin d'objets. Le curseur ne nous oblige pas à sélectionner les données basées sur une clé, nous pouvons simplement travailler sur tout les enregistrements. Notez également que dans chaque itération de la boucle, vous pouvez récupérer les données de l'enregistrement en cours sous l'objet curseur à l'aide `curseur.value.toto`. Pour un exemple de travail complet, voir notre [exemple IDBCursor](https://github.com/mdn/IDBcursor-example/) ([l'exemple en _live_](https://mdn.github.io/IDBcursor-example/)).
 
-<pre class="brush: js">function afficheDonnee() {
+```js
+function afficheDonnee() {
   var transaction = db.transaction(['grandListAlbum'], "readonly");
   var objectStore = transaction.objectStore('grandListAlbum');
 
@@ -112,37 +125,25 @@ translation_of: Web/API/IDBCursor
       console.log('Entrées tous affichés.');
     }
   };
-}</pre>
+}
+```
 
-<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('IndexedDB', '#idl-def-IDBCursor', 'cursor')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                | État                         | Commentaires |
+| ---------------------------------------------------------------------------- | ---------------------------- | ------------ |
+| {{SpecName('IndexedDB', '#idl-def-IDBCursor', 'cursor')}} | {{Spec2('IndexedDB')}} |              |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.IDBCursor")}}</p>
+{{Compat("api.IDBCursor")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Manipuler IndexedDB</a></li>
- <li>Démarrer des transactions : {{domxref("IDBDatabase")}}</li>
- <li>Manipuler des transactions : {{domxref("IDBTransaction")}}</li>
- <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
- <li>Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}</li>
- <li>Manipuler des curseurs: {{domxref("IDBCursor")}}</li>
- <li>Exemple de référence pour IndexedDB : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a></li>
-</ul>
+- [Manipuler IndexedDB](/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB)
+- Démarrer des transactions : {{domxref("IDBDatabase")}}
+- Manipuler des transactions : {{domxref("IDBTransaction")}}
+- Définir un intervalle de clés : {{domxref("IDBKeyRange")}}
+- Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}
+- Manipuler des curseurs: {{domxref("IDBCursor")}}
+- Exemple de référence pour IndexedDB : [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages)
diff --git a/files/fr/web/api/idbdatabase/close/index.md b/files/fr/web/api/idbdatabase/close/index.md
index 63f025584d..4da6941350 100644
--- a/files/fr/web/api/idbdatabase/close/index.md
+++ b/files/fr/web/api/idbdatabase/close/index.md
@@ -8,73 +8,64 @@ tags:
   - Reference
 translation_of: Web/API/IDBDatabase/close
 ---
-<div>{{APIRef("IndexedDB")}}</div>
+{{APIRef("IndexedDB")}}
 
-<p>La méthode <strong><code>close()</code></strong> de l'interface {{domxref("IDBDatabase")}} ferme de façon asynchrone la connexion à la base de donnée.</p>
+La méthode **`close()`** de l'interface {{domxref("IDBDatabase")}} ferme de façon asynchrone la connexion à la base de donnée.
 
-<p>La connexion sera fermée lorsque toutes les transactions liées à cette connexion seront terminées. En revanche, on ne pourra pas démarrer de nouvelles transactions sur la connexion une fois que cette méthode a été appelée. Les méthodes qui initialisent des transactions déclencheront une exception lorsque la fermeture est en cours.</p>
+La connexion sera fermée lorsque toutes les transactions liées à cette connexion seront terminées. En revanche, on ne pourra pas démarrer de nouvelles transactions sur la connexion une fois que cette méthode a été appelée. Les méthodes qui initialisent des transactions déclencheront une exception lorsque la fermeture est en cours.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">db.close();</pre>
+```js
+db.close();
+```
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Aucune.</p>
+Aucune.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">// ouverture de la connexion à la base de données toDoList
+```js
+// ouverture de la connexion à la base de données toDoList
   var DBOpenRequest = window.indexedDB.open("toDoList", 4);
 
   // deux gestionnaires d’événements effectuant les
   // opérations après que l'ouverture se soit bien
   // passée ou non.
   DBOpenRequest.onerror = function(event) {
-    note.innerHTML += '&lt;li&gt;Erreur lors du chargement de la base.&lt;/li&gt;';
+    note.innerHTML += '<li>Erreur lors du chargement de la base.</li>';
   };
 
   DBOpenRequest.onsuccess = function(event) {
-    note.innerHTML += '&lt;li&gt;Base chargée.&lt;/li&gt;';
+    note.innerHTML += '<li>Base chargée.</li>';
 
     // affecte la connexion à la variable db
     db = DBOpenRequest.result;
 
     // fermeture de la base de donnée.
     db.close();
-  }</pre>
-
-<h2 id="Spécification">Spécification</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('IndexedDB', '#widl-IDBDatabase-close-void', 'close()')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.IDBDatabase.close")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Manipuler IndexedDB</a></li>
- <li>Démarrer des transactions : {{domxref("IDBDatabase")}}</li>
- <li>Manipuler des transactions : {{domxref("IDBTransaction")}}</li>
- <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
- <li>Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}</li>
- <li>Manipuler des curseurs : {{domxref("IDBCursor")}}</li>
- <li>Exemple de référence pour IndexedDB : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a></li>
-</ul>
+  }
+```
+
+## Spécification
+
+| Spécification                                                                                | État                         | Commentaires |
+| -------------------------------------------------------------------------------------------- | ---------------------------- | ------------ |
+| {{SpecName('IndexedDB', '#widl-IDBDatabase-close-void', 'close()')}} | {{Spec2('IndexedDB')}} |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.IDBDatabase.close")}}
+
+## Voir aussi
+
+- [Manipuler IndexedDB](/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB)
+- Démarrer des transactions : {{domxref("IDBDatabase")}}
+- Manipuler des transactions : {{domxref("IDBTransaction")}}
+- Définir un intervalle de clés : {{domxref("IDBKeyRange")}}
+- Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}
+- Manipuler des curseurs : {{domxref("IDBCursor")}}
+- Exemple de référence pour IndexedDB : [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages)
diff --git a/files/fr/web/api/idbdatabase/createobjectstore/index.md b/files/fr/web/api/idbdatabase/createobjectstore/index.md
index 89948ee860..a829b7c64a 100644
--- a/files/fr/web/api/idbdatabase/createobjectstore/index.md
+++ b/files/fr/web/api/idbdatabase/createobjectstore/index.md
@@ -8,76 +8,57 @@ tags:
   - Reference
 translation_of: Web/API/IDBDatabase/createObjectStore
 ---
-<div>{{APIRef("IndexedDB")}}</div>
-
-<p>La méthode <strong><code>createObjectStore()</code></strong>, rattachée à l'interface {{domxref("IDBDatabase")}}, permet d'ajouter un magasin d’objet ou un index à la base de donnée et renvoie un accès vers celui-ci.</p>
-
-<p>Cette méthode utilise deux paramètres : le nom du magasin d'objets et un objet qui permettra de définir des propriétés optionnelles supplémentaires.</p>
-
-<p>Cette méthode ne peut être appelée que lors d'une transaction en mode <a href="/fr/docs/Web/API/IDBTransaction"><code>versionchange</code></a>.</p>
-
-<p>{{AvailableInWorkers}}</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="brush: js">var objectStore = db.createObjectStore(name, optionalParameters);
-</pre>
-
-<h2 id="Paramètres">Paramètres</h2>
-
-<dl>
- <dt><code>name</code></dt>
- <dd>Le nom du magasin d'objet à ajouter. Il est possible d'ajouter un magasin d’objet dont le nom est la chaîne vide (!).</dd>
- <dt><code>optionalParameters</code> {{optional_inline}}</dt>
- <dd>
- <p>Un objet qui permet de décrire plus finement le magasin d'objets avec ces propriétés :</p>
-
- <table class="standard-table">
-  <thead>
-   <tr>
-    <th scope="col">Propriété</th>
-    <th scope="col">Description</th>
-   </tr>
-  </thead>
-  <tbody>
-   <tr>
-    <td><code>keyPath</code></td>
-    <td>Le chemin de la clé utilisé par le magasin d'objet. Si ce paramètre est vide ou non spécifié, le magasin d'objets utilisera une clé externe. Le <code>keyPath</code> peut aussi être un tableau.</td>
-   </tr>
-   <tr>
-    <td><code>autoIncrement</code></td>
-    <td>Si <code>true</code>, le magasin d’objet implémentera un générateur de clé. La valeur par défaut est <code>false</code>.</td>
-   </tr>
-  </tbody>
- </table>
-
- <p>Les autres propriétés seront ignorés.</p>
- </dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<dl>
- <dt>{{domxref("IDBObjectStore")}}</dt>
- <dd>Le magasin d'objets qui vient d'être créé.</dd>
-</dl>
-
-<h2 id="Exceptions">Exceptions</h2>
-
-<dl>
- <dt><code>InvalidStateError</code></dt>
- <dd>Cette exception {{domxref("DOMException")}} est levée si la méthode n'est pas appelée lors d'une transaction en mode <code>versionchange</code>. Pour les anciens navigateurs basés sur WebKit, il faut d'abord appeler {{domxref("IDBVersionChangeRequest.setVersion")}}.</dd>
- <dt><code>TransactionInactiveError</code></dt>
- <dd>Cette exception {{domxref("DOMException")}} est levée si la méthode est appelée sur une base de données qui n'existe pas (elle a par exemple été effacée). Dans les versions antérieures à Firefox 41, ce dernier levait une erreur <code>InvalidStateError</code>, cela est désormais corrigé (cf. {{bug("1176165")}}).</dd>
- <dt><code>ConstraintError</code></dt>
- <dd>Un magasin d'objet portant le même nom (la casse est importante) existe déjà dans cette base de donnée.</dd>
- <dt><code>InvalidAccessError</code></dt>
- <dd>Si la valeur <code>autoIncrement</code> est à <code>true</code> et que le chemin de clé n'est pas renseigné ou est un tableau vide.</dd>
-</dl>
-
-<h2 id="Exemple">Exemple</h2>
-
-<pre class="brush: js"> // Ouverture de la base de données
+{{APIRef("IndexedDB")}}
+
+La méthode **`createObjectStore()`**, rattachée à l'interface {{domxref("IDBDatabase")}}, permet d'ajouter un magasin d’objet ou un index à la base de donnée et renvoie un accès vers celui-ci.
+
+Cette méthode utilise deux paramètres : le nom du magasin d'objets et un objet qui permettra de définir des propriétés optionnelles supplémentaires.
+
+Cette méthode ne peut être appelée que lors d'une transaction en mode [`versionchange`](/fr/docs/Web/API/IDBTransaction).
+
+{{AvailableInWorkers}}
+
+## Syntaxe
+
+```js
+var objectStore = db.createObjectStore(name, optionalParameters);
+```
+
+## Paramètres
+
+- `name`
+  - : Le nom du magasin d'objet à ajouter. Il est possible d'ajouter un magasin d’objet dont le nom est la chaîne vide (!).
+- `optionalParameters` {{optional_inline}}
+
+  - : Un objet qui permet de décrire plus finement le magasin d'objets avec ces propriétés :
+
+    | Propriété       | Description                                                                                                                                                                           |
+    | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+    | `keyPath`       | Le chemin de la clé utilisé par le magasin d'objet. Si ce paramètre est vide ou non spécifié, le magasin d'objets utilisera une clé externe. Le `keyPath` peut aussi être un tableau. |
+    | `autoIncrement` | Si `true`, le magasin d’objet implémentera un générateur de clé. La valeur par défaut est `false`.                                                                                    |
+
+    Les autres propriétés seront ignorés.
+
+### Valeur de retour
+
+- {{domxref("IDBObjectStore")}}
+  - : Le magasin d'objets qui vient d'être créé.
+
+## Exceptions
+
+- `InvalidStateError`
+  - : Cette exception {{domxref("DOMException")}} est levée si la méthode n'est pas appelée lors d'une transaction en mode `versionchange`. Pour les anciens navigateurs basés sur WebKit, il faut d'abord appeler {{domxref("IDBVersionChangeRequest.setVersion")}}.
+- `TransactionInactiveError`
+  - : Cette exception {{domxref("DOMException")}} est levée si la méthode est appelée sur une base de données qui n'existe pas (elle a par exemple été effacée). Dans les versions antérieures à Firefox 41, ce dernier levait une erreur `InvalidStateError`, cela est désormais corrigé (cf. {{bug("1176165")}}).
+- `ConstraintError`
+  - : Un magasin d'objet portant le même nom (la casse est importante) existe déjà dans cette base de donnée.
+- `InvalidAccessError`
+  - : Si la valeur `autoIncrement` est à `true` et que le chemin de clé n'est pas renseigné ou est un tableau vide.
+
+## Exemple
+
+```js
+ // Ouverture de la base de données
   var request = window.indexedDB.open("toDoList", 4);
 
   /* Gestionnaire d'événement qui intervient lors de la
@@ -91,7 +72,7 @@ translation_of: Web/API/IDBDatabase/createObjectStore
     var db = event.target.result;
 
     db.onerror = function(event) {
-      note.innerHTML += '&lt;li&gt;Erreur du chargement de la base de données.&lt;/li&gt;';
+      note.innerHTML += '<li>Erreur du chargement de la base de données.</li>';
     };
 
     // On ajoute un magasin d'objet à la base de données
@@ -108,39 +89,26 @@ translation_of: Web/API/IDBDatabase/createObjectStore
 
     objectStore.createIndex("notified", "notified", { unique: false });
 
-    note.innerHTML += '&lt;li&gt;Magasin d\'objet ajouté.&lt;/li&gt;';
+    note.innerHTML += '<li>Magasin d\'objet ajouté.</li>';
   };
-</pre>
-
-<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('IndexedDB', '#widl-IDBDatabase-createObjectStore-IDBObjectStore-DOMString-name-IDBObjectStoreParameters-optionalParameters', 'createObjectStore()')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.IDBDatabase.createObjectStore")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Manipuler IndexedDB</a></li>
- <li>Démarrer des transactions : {{domxref("IDBDatabase")}}</li>
- <li>Manipuler des transactions : {{domxref("IDBTransaction")}}</li>
- <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
- <li>Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}</li>
- <li>Manipuler des curseurs : {{domxref("IDBCursor")}}</li>
- <li>Exemple de référence pour IndexedDB : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a></li>
-</ul>
+```
+
+## Spécifications
+
+| Spécification                                                                                                                                                                                                            | État                         | Commentaires |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------ |
+| {{SpecName('IndexedDB', '#widl-IDBDatabase-createObjectStore-IDBObjectStore-DOMString-name-IDBObjectStoreParameters-optionalParameters', 'createObjectStore()')}} | {{Spec2('IndexedDB')}} |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.IDBDatabase.createObjectStore")}}
+
+## Voir aussi
+
+- [Manipuler IndexedDB](/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB)
+- Démarrer des transactions : {{domxref("IDBDatabase")}}
+- Manipuler des transactions : {{domxref("IDBTransaction")}}
+- Définir un intervalle de clés : {{domxref("IDBKeyRange")}}
+- Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}
+- Manipuler des curseurs : {{domxref("IDBCursor")}}
+- Exemple de référence pour IndexedDB : [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages)
diff --git a/files/fr/web/api/idbdatabase/deleteobjectstore/index.md b/files/fr/web/api/idbdatabase/deleteobjectstore/index.md
index 4b9907c1de..d3d72f60ca 100644
--- a/files/fr/web/api/idbdatabase/deleteobjectstore/index.md
+++ b/files/fr/web/api/idbdatabase/deleteobjectstore/index.md
@@ -8,61 +8,45 @@ tags:
   - Reference
 translation_of: Web/API/IDBDatabase/deleteObjectStore
 ---
-<div>{{APIRef("IndexedDB")}}</div>
+{{APIRef("IndexedDB")}}
 
-<p>La méthode <strong><code>deleteObjectStore()</code></strong> de l'interface {{domxref("IDBDatabase")}} supprime un magasin d'objet et ses index de la base de données.</p>
+La méthode **`deleteObjectStore()`** de l'interface {{domxref("IDBDatabase")}} supprime un magasin d'objet et ses index de la base de données.
 
-<p>Comme la méthode {{domxref("IDBDatabase.createObjectStore")}}, cette méthode doit être appelée <em>uniquement</em> lors d'une transaction en mode <a href="/fr/docs/Web/API/IDBTransaction"><code>versionchange</code></a>.</p>
+Comme la méthode {{domxref("IDBDatabase.createObjectStore")}}, cette méthode doit être appelée _uniquement_ lors d'une transaction en mode [`versionchange`](/fr/docs/Web/API/IDBTransaction).
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">dbInstance.deleteObjectStore(name);</pre>
+```js
+dbInstance.deleteObjectStore(name);
+```
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>name</code></dt>
- <dd>Le nom du magasin d'objet à supprimer.</dd>
-</dl>
+- `name`
+  - : Le nom du magasin d'objet à supprimer.
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Aucune.</p>
+Aucune.
 
-<h3 id="Exceptions">Exceptions</h3>
+### Exceptions
 
-<p>Cette méthode peut lever une {{domxref("DOMException")}} d'un de ces types suivants:</p>
+Cette méthode peut lever une {{domxref("DOMException")}} d'un de ces types suivants:
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Exception</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>InvalidStateError</code></td>
-   <td>Levée si la méthode n'est pas appelée lors d'une transaction en mode <code>versionchange</code>. Pour les anciens navigateurs basés sur WebKit, il faut d'abord appeler la méthode  {{domxref("IDBVersionChangeRequest.setVersion")}}.</td>
-  </tr>
-  <tr>
-   <td><code>TransactionInactiveError</code></td>
-   <td>Levée si la méthode est appelée sur une base de données qui n'existe pas (ex. elle a été effacée). Pour les versions antérieures à Firefox 41, ce dernier déclenchait une erreur <code>InvalidStateError</code>, cela est désormais corrigé (cf. {{bug("1176165")}}).</td>
-  </tr>
-  <tr>
-   <td><code>NotFoundError</code></td>
-   <td>Levée lors de la suppression d'un magasin d'objets qui n'existe pas. Les noms sont sensibles à la casse.</td>
-  </tr>
- </tbody>
-</table>
+| Exception                  | Description                                                                                                                                                                                                                                                      |
+| -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `InvalidStateError`        | Levée si la méthode n'est pas appelée lors d'une transaction en mode `versionchange`. Pour les anciens navigateurs basés sur WebKit, il faut d'abord appeler la méthode  {{domxref("IDBVersionChangeRequest.setVersion")}}.                       |
+| `TransactionInactiveError` | Levée si la méthode est appelée sur une base de données qui n'existe pas (ex. elle a été effacée). Pour les versions antérieures à Firefox 41, ce dernier déclenchait une erreur `InvalidStateError`, cela est désormais corrigé (cf. {{bug("1176165")}}). |
+| `NotFoundError`            | Levée lors de la suppression d'un magasin d'objets qui n'existe pas. Les noms sont sensibles à la casse.                                                                                                                                                         |
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans cet exemple, on ouvre une connexion à la base de données et dans le gestionnaire d'événements <code>onupdateneeded</code>, on ajoute un magasin d'objets en utilisant la méthode {{domxref("IDBDatabase.createObjectStore")}}. Enfin, on supprime ce magasin d'objets grâce à <code>deleteObjectStore()</code>.</p>
+Dans cet exemple, on ouvre une connexion à la base de données et dans le gestionnaire d'événements `onupdateneeded`, on ajoute un magasin d'objets en utilisant la méthode {{domxref("IDBDatabase.createObjectStore")}}. Enfin, on supprime ce magasin d'objets grâce à `deleteObjectStore()`.
 
-<pre class="brush: js;">  // Connexion à la base de données
+```js
+  // Connexion à la base de données
   var DBOpenRequest = window.indexedDB.open("toDoList", 4);
 
   /* Gestionnaire d'événements qui intervient lors de
@@ -75,7 +59,7 @@ translation_of: Web/API/IDBDatabase/deleteObjectStore
     var db = event.target.result;
 
     db.onerror = function(event) {
-      note.innerHTML += '&lt;li&gt;Erreur du chargement de la base de données.&lt;/li&gt;';
+      note.innerHTML += '<li>Erreur du chargement de la base de données.</li>';
     };
 
     // Ajoute un magasin d'objets à la base de données
@@ -92,48 +76,31 @@ translation_of: Web/API/IDBDatabase/deleteObjectStore
 
     objectStore.createIndex("notified", "notified", { unique: false });
 
-    note.innerHTML += '&lt;li&gt;Magasin d\'objets ajouté.&lt;/li&gt;';
+    note.innerHTML += '<li>Magasin d\'objets ajouté.</li>';
 
     // Supprime le magasin d'objets
 
     db.deleteObjectStore("toDoList");
   };
-</pre>
-
-<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('IndexedDB', '#widl-IDBDatabase-deleteObjectStore-void-DOMString-name', 'deleteObjectStore()')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName("IndexedDB 2", "#dom-idbdatabase-deleteobjectstore", "deleteObjectStore()")}}</td>
-   <td>{{Spec2("IndexedDB 2")}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.IDBDatabase.deleteObjectStore")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Manipuler IndexedDB</a></li>
- <li>Démarrer des transactions : {{domxref("IDBDatabase")}}</li>
- <li>Manipuler des transactions : {{domxref("IDBTransaction")}}</li>
- <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
- <li>Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}</li>
- <li>Manipuler des curseurs : {{domxref("IDBCursor")}}</li>
- <li>Exemple de référence pour IndexedDB : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a></li>
-</ul>
+```
+
+## Spécifications
+
+| Spécification                                                                                                                                    | État                             | Commentaires |
+| ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------ |
+| {{SpecName('IndexedDB', '#widl-IDBDatabase-deleteObjectStore-void-DOMString-name', 'deleteObjectStore()')}} | {{Spec2('IndexedDB')}}     |              |
+| {{SpecName("IndexedDB 2", "#dom-idbdatabase-deleteobjectstore", "deleteObjectStore()")}}                             | {{Spec2("IndexedDB 2")}} |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.IDBDatabase.deleteObjectStore")}}
+
+## Voir aussi
+
+- [Manipuler IndexedDB](/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB)
+- Démarrer des transactions : {{domxref("IDBDatabase")}}
+- Manipuler des transactions : {{domxref("IDBTransaction")}}
+- Définir un intervalle de clés : {{domxref("IDBKeyRange")}}
+- Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}
+- Manipuler des curseurs : {{domxref("IDBCursor")}}
+- Exemple de référence pour IndexedDB : [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages)
diff --git a/files/fr/web/api/idbdatabase/index.md b/files/fr/web/api/idbdatabase/index.md
index 9be924fb0b..99239a0809 100644
--- a/files/fr/web/api/idbdatabase/index.md
+++ b/files/fr/web/api/idbdatabase/index.md
@@ -8,69 +8,62 @@ tags:
   - Reference
 translation_of: Web/API/IDBDatabase
 ---
-<div>{{APIRef("IndexedDB")}}</div>
+{{APIRef("IndexedDB")}}
 
-<p>L'interface <strong><code>IDBDatabase</code></strong> de l'API IndexedDB fournit <a href="/fr/docs/Web/API/API_IndexedDB#Se_connecter_à_la_base_de_données">une connexion à la base de données</a>. On peut utiliser un objet <code>IDBDatabase</code> pour ouvrir une {{domxref("IDBTransaction","transaction")}} sur la base de données puis ajouter, éditer ou supprimer des enregistrements de cette base de données. Cette interface constitue le seul moyen d'accéder et de gérer les versions de la base de données.</p>
+L'interface **`IDBDatabase`** de l'API IndexedDB fournit [une connexion à la base de données](/fr/docs/Web/API/API_IndexedDB#Se_connecter_à_la_base_de_données). On peut utiliser un objet `IDBDatabase` pour ouvrir une {{domxref("IDBTransaction","transaction")}} sur la base de données puis ajouter, éditer ou supprimer des enregistrements de cette base de données. Cette interface constitue le seul moyen d'accéder et de gérer les versions de la base de données.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<div class="note">
-<p><strong>Note :</strong> Tout ce qui est fait dans une base de données indexée s'inscrit dans le contexte d'une transaction qui représente un interaction avec les données dans la base. Tout les objets de l'interface IndexedDB (incluant les accès aux magasins d'objets, indexes et curseurs) sont liés à une transaction en particulier. Aussi, on ne peut pas exécuter une commande, accéder aux données ou ouvrir quoi que ce soit, en dehors d'une transaction.</p>
-</div>
+> **Note :** Tout ce qui est fait dans une base de données indexée s'inscrit dans le contexte d'une transaction qui représente un interaction avec les données dans la base. Tout les objets de l'interface IndexedDB (incluant les accès aux magasins d'objets, indexes et curseurs) sont liés à une transaction en particulier. Aussi, on ne peut pas exécuter une commande, accéder aux données ou ouvrir quoi que ce soit, en dehors d'une transaction.
 
-<h2 id="Méthodes">Méthodes</h2>
+## Méthodes
 
-<p>Cet objet hérite de <a href="/fr/docs/Web/API/EventTarget">EventTarget</a>.</p>
+Cet objet hérite de [EventTarget](/fr/docs/Web/API/EventTarget).
 
-<dl>
- <dt>{{domxref("IDBDatabase.close()")}}</dt>
- <dd>Ferme de façon asynchrone la connexion à la base de données.</dd>
- <dt>{{domxref("IDBDatabase.createObjectStore()")}}</dt>
- <dd>Ajoute un magasin d’objet ou un index à la base de donnéeset le renvoie.</dd>
- <dt>{{domxref("IDBDatabase.deleteObjectStore()")}}</dt>
- <dd>À partir d'un nom donné, supprime un magasin d'objet et les index associés.</dd>
- <dt>{{domxref("IDBDatabase.transaction()")}}</dt>
- <dd>Renvoie une transaction sous la forme d'un objet {{domxref("IDBTransaction")}} sur lequel on peut appeler la méthode {{domxref("IDBTransaction.objectStore")}} afin d'accéder aux magasins d'objet de la base de données.</dd>
-</dl>
+- {{domxref("IDBDatabase.close()")}}
+  - : Ferme de façon asynchrone la connexion à la base de données.
+- {{domxref("IDBDatabase.createObjectStore()")}}
+  - : Ajoute un magasin d’objet ou un index à la base de donnéeset le renvoie.
+- {{domxref("IDBDatabase.deleteObjectStore()")}}
+  - : À partir d'un nom donné, supprime un magasin d'objet et les index associés.
+- {{domxref("IDBDatabase.transaction()")}}
+  - : Renvoie une transaction sous la forme d'un objet {{domxref("IDBTransaction")}} sur lequel on peut appeler la méthode {{domxref("IDBTransaction.objectStore")}} afin d'accéder aux magasins d'objet de la base de données.
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<dl>
- <dt>{{domxref("IDBDatabase.name")}} {{readonlyInline}}</dt>
- <dd>Une chaîne de caractères ({{domxref("DOMString")}}) qui contient le nom de la base de données connectée.</dd>
- <dt>{{domxref("IDBDatabase.version")}} {{readonlyInline}}</dt>
- <dd>Un <a href="/fr/docs/Mozilla/Projects/NSPR/Reference/Long_Long_(64-bit)_Integers">entier de 64 bits</a> qui indique la version de la base de données connectée. Quand une base de données est créée, cette propriété est une chaîne de caractère vide.</dd>
- <dt>{{domxref("IDBDatabase.objectStoreNames")}} {{readonlyInline}}</dt>
- <dd>Une liste de noms (sous la forme d'un objet {{domxref("DOMStringList")}} des magasins d'objets correspondants à la base de données connectée.</dd>
-</dl>
+- {{domxref("IDBDatabase.name")}} {{readonlyInline}}
+  - : Une chaîne de caractères ({{domxref("DOMString")}}) qui contient le nom de la base de données connectée.
+- {{domxref("IDBDatabase.version")}} {{readonlyInline}}
+  - : Un [entier de 64 bits](</fr/docs/Mozilla/Projects/NSPR/Reference/Long_Long_(64-bit)_Integers>) qui indique la version de la base de données connectée. Quand une base de données est créée, cette propriété est une chaîne de caractère vide.
+- {{domxref("IDBDatabase.objectStoreNames")}} {{readonlyInline}}
+  - : Une liste de noms (sous la forme d'un objet {{domxref("DOMStringList")}} des magasins d'objets correspondants à la base de données connectée.
 
-<h3 id="Gestionnaires_d'événements">Gestionnaires d'événements</h3>
+### Gestionnaires d'événements
 
-<dl>
- <dt>{{domxref("IDBDatabase.onabort")}}</dt>
- <dd>S'exécute au déclenchement de l'événement <code>abort</code> quand la tentative d’accès à la base de donnée est interrompue.</dd>
- <dt>{{domxref("IDBDatabase.onerror")}}</dt>
- <dd>S’exécute au déclenchement de l'événement <code>error</code> quand la connexion à la base de donnée échoue.</dd>
- <dt>{{domxref("IDBDatabase.onversionchange")}}</dt>
- <dd>S’exécute au déclenchement de l'événement <code>versionchange</code> quand la structure de la base de donnée change (l'événement {{domxref("IDBOpenDBRequest.onupgradeneeded")}} ou {{domxref("IDBFactory.deleteDatabase")}} à été demandé ailleurs (probablement dans une autre fenêtre ou onglet sur le même ordinateur). Cela est différent de la transaction correspondant à un changement de version (cf. {{domxref("IDBVersionChangeEvent")}}) mais les concepts sont liés.</dd>
-</dl>
+- {{domxref("IDBDatabase.onabort")}}
+  - : S'exécute au déclenchement de l'événement `abort` quand la tentative d’accès à la base de donnée est interrompue.
+- {{domxref("IDBDatabase.onerror")}}
+  - : S’exécute au déclenchement de l'événement `error` quand la connexion à la base de donnée échoue.
+- {{domxref("IDBDatabase.onversionchange")}}
+  - : S’exécute au déclenchement de l'événement `versionchange` quand la structure de la base de donnée change (l'événement {{domxref("IDBOpenDBRequest.onupgradeneeded")}} ou {{domxref("IDBFactory.deleteDatabase")}} à été demandé ailleurs (probablement dans une autre fenêtre ou onglet sur le même ordinateur). Cela est différent de la transaction correspondant à un changement de version (cf. {{domxref("IDBVersionChangeEvent")}}) mais les concepts sont liés.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans le fragment de code suivant, on ouvre une base de données de façon asynchrone avec {{domxref("IDBFactory")}} puis on gère les cas de succès et d'erreur avant de créer un nouveau magasin d'objet au cas où une mise à jour est nécessaire ({{domxref("IDBdatabase")}}). Pour étudier un exemple complet et fonctionnel, voir notre application <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">voir l'exemple <em>live</em></a>).</p>
+Dans le fragment de code suivant, on ouvre une base de données de façon asynchrone avec {{domxref("IDBFactory")}} puis on gère les cas de succès et d'erreur avant de créer un nouveau magasin d'objet au cas où une mise à jour est nécessaire ({{domxref("IDBdatabase")}}). Pour étudier un exemple complet et fonctionnel, voir notre application [To-do Notifications](https://github.com/mdn/to-do-notifications/) ([voir l'exemple _live_](https://mdn.github.io/to-do-notifications/)).
 
-<pre class="brush: js">// On ouvre la base de données
+```js
+// On ouvre la base de données
   var DBOpenRequest = window.indexedDB.open("toDoList", 4);
 
   // On ajoute les deux gestionnaires d'événements
   // qui agissent sur l'objet IDBDatabase object,
   // dans le cas où tout se passe bien ou non
   DBOpenRequest.onerror = function(event) {
-    note.innerHTML += '&lt;li&gt;Erreur lors du chargement de la base de données.&lt;/li&gt;';
+    note.innerHTML += '<li>Erreur lors du chargement de la base de données.</li>';
   };
 
   DBOpenRequest.onsuccess = function(event) {
-    note.innerHTML += '&lt;li&gt;Base de données initialisée.&lt;/li&gt;';
+    note.innerHTML += '<li>Base de données initialisée.</li>';
 
     // On enregistre le résultat de l'ouverture
     // dans la variable db (on l'utilisera plusieurs
@@ -93,7 +86,7 @@ translation_of: Web/API/IDBDatabase
     var db = event.target.result;
 
     db.onerror = function(event) {
-      note.innerHTML += '&lt;li&gt;Erreur lors du chargement de la base de données.&lt;/li&gt;';
+      note.innerHTML += '<li>Erreur lors du chargement de la base de données.</li>';
     };
 
     // On crée un magasin d'objet objectStore pour
@@ -112,42 +105,32 @@ translation_of: Web/API/IDBDatabase
 
     objectStore.createIndex("notified", "notified", { unique: false });
 
-    note.innerHTML += "&lt;li&gt;Magasin d'objets créé.&lt;/li&gt;";
-  };</pre>
-
-<p>La ligne qui suit permet d'ouvrir une transaction avec cette base de données afin de consulter le magasin d'objets et de manipuler les données qu'il contient..</p>
-
-<pre class="brush: js">var objectStore = db.transaction('toDoList').objectStore('toDoList'); </pre>
-
-<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('IndexedDB', '#idl-def-IDBDatabase', 'IDBDatabase')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.IDBDatabase")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Manipuler IndexedDB</a></li>
- <li>Démarrer des transactions : {{domxref("IDBDatabase")}}</li>
- <li>Manipuler des transactions : {{domxref("IDBTransaction")}}</li>
- <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
- <li>Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}</li>
- <li>Manipuler des curseurs : {{domxref("IDBCursor")}}</li>
- <li>Exemple de référence pour IndexedDB : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a></li>
-</ul>
+    note.innerHTML += "<li>Magasin d'objets créé.</li>";
+  };
+```
+
+La ligne qui suit permet d'ouvrir une transaction avec cette base de données afin de consulter le magasin d'objets et de manipuler les données qu'il contient..
+
+```js
+var objectStore = db.transaction('toDoList').objectStore('toDoList');
+```
+
+## Spécifications
+
+| Spécification                                                                        | État                         | Commentaires |
+| ------------------------------------------------------------------------------------ | ---------------------------- | ------------ |
+| {{SpecName('IndexedDB', '#idl-def-IDBDatabase', 'IDBDatabase')}} | {{Spec2('IndexedDB')}} |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.IDBDatabase")}}
+
+## Voir aussi
+
+- [Manipuler IndexedDB](/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB)
+- Démarrer des transactions : {{domxref("IDBDatabase")}}
+- Manipuler des transactions : {{domxref("IDBTransaction")}}
+- Définir un intervalle de clés : {{domxref("IDBKeyRange")}}
+- Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}
+- Manipuler des curseurs : {{domxref("IDBCursor")}}
+- Exemple de référence pour IndexedDB : [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages)
diff --git a/files/fr/web/api/idbdatabase/name/index.md b/files/fr/web/api/idbdatabase/name/index.md
index 635a6ae383..eb40259dab 100644
--- a/files/fr/web/api/idbdatabase/name/index.md
+++ b/files/fr/web/api/idbdatabase/name/index.md
@@ -8,25 +8,28 @@ tags:
   - Reference
 translation_of: Web/API/IDBDatabase/name
 ---
-<div>{{APIRef("IndexedDB")}}</div>
+{{APIRef("IndexedDB")}}
 
-<p>La propriété <strong><code>name</code></strong> de l'interface <code>IDBDatabase</code> est une chaîne de caractères, sous la forme d'un objet {{domxref("DOMString")}}, contenant le nom de la base de données connectée.</p>
+La propriété **`name`** de l'interface `IDBDatabase` est une chaîne de caractères, sous la forme d'un objet {{domxref("DOMString")}}, contenant le nom de la base de données connectée.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">db.name</pre>
+```js
+db.name
+```
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>Une chaîne de caractères {{domxref("DOMString")}} contenant le nom de la base de données connectée.</p>
+Une chaîne de caractères {{domxref("DOMString")}} contenant le nom de la base de données connectée.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Cet exemple affiche le nom de la base de données qui est ouverte. La connexion (l'objet {{domxref("IDBDatabase")}}) est affectée à la variable <code>db</code>, puis sa propriété <code>name</code> est affichée dans la console.</p>
+Cet exemple affiche le nom de la base de données qui est ouverte. La connexion (l'objet {{domxref("IDBDatabase")}}) est affectée à la variable `db`, puis sa propriété `name` est affichée dans la console.
 
-<pre class="brush: js">// Connexion à la base de données
+```js
+// Connexion à la base de données
 var DBOpenRequest = window.indexedDB.open("toDoList", 4);
 
 // Les deux gestionnaires d'événement activés pour
@@ -34,11 +37,11 @@ var DBOpenRequest = window.indexedDB.open("toDoList", 4);
 // correctement ou non.
 
 DBOpenRequest.onerror = function(event) {
-  note.innerHTML += '&lt;li&gt;Erreur au chargement de la base de données.&lt;/li&gt;';
+  note.innerHTML += '<li>Erreur au chargement de la base de données.</li>';
 };
 
 DBOpenRequest.onsuccess = function(event) {
-  note.innerHTML += '&lt;li&gt;Base de données initialisée.&lt;/li&gt;';
+  note.innerHTML += '<li>Base de données initialisée.</li>';
 
   // Affecte la connexion à la variable db.
   db = DBOpenRequest.result;
@@ -46,41 +49,27 @@ DBOpenRequest.onsuccess = function(event) {
   // Affiche le nom de la base de donnée (ici "toDoList")
   // dans la console.
   console.log(db.name);
-};</pre>
-
-<div class="note">
-  <p><strong>Note :</strong> Pour un exemple fonctionnel complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">voir l'exemple <em>live</em></a>).</p>
-</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('IndexedDB', '#widl-IDBDatabase-name', 'name')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.IDBDatabase.name")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Manipuler IndexedDB</a></li>
- <li>Démarrer des transactions : {{domxref("IDBDatabase")}}</li>
- <li>Manipuler des transactions : {{domxref("IDBTransaction")}}</li>
- <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
- <li>Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}</li>
- <li>Manipuler des curseurs : {{domxref("IDBCursor")}}</li>
- <li>Exemple de référence pour IndexedDB : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a></li>
-</ul>
+};
+```
+
+> **Note :** Pour un exemple fonctionnel complet, voir notre [To-do Notifications](https://github.com/mdn/to-do-notifications/) ([voir l'exemple _live_](https://mdn.github.io/to-do-notifications/)).
+
+## Spécifications
+
+| Spécification                                                                    | État                         | Commentaires |
+| -------------------------------------------------------------------------------- | ---------------------------- | ------------ |
+| {{SpecName('IndexedDB', '#widl-IDBDatabase-name', 'name')}} | {{Spec2('IndexedDB')}} |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.IDBDatabase.name")}}
+
+## Voir aussi
+
+- [Manipuler IndexedDB](/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB)
+- Démarrer des transactions : {{domxref("IDBDatabase")}}
+- Manipuler des transactions : {{domxref("IDBTransaction")}}
+- Définir un intervalle de clés : {{domxref("IDBKeyRange")}}
+- Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}
+- Manipuler des curseurs : {{domxref("IDBCursor")}}
+- Exemple de référence pour IndexedDB : [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages)
diff --git a/files/fr/web/api/idbdatabase/objectstorenames/index.md b/files/fr/web/api/idbdatabase/objectstorenames/index.md
index f9263bdf33..10b54b94f4 100644
--- a/files/fr/web/api/idbdatabase/objectstorenames/index.md
+++ b/files/fr/web/api/idbdatabase/objectstorenames/index.md
@@ -9,33 +9,36 @@ tags:
   - Reference
 translation_of: Web/API/IDBDatabase/objectStoreNames
 ---
-<div>{{APIRef("IndexedDB")}}</div>
+{{APIRef("IndexedDB")}}
 
-<p>La propriété <strong><code>objectStoreNames</code></strong>, rattachée à l'interface {{domxref("IDBDatabase")}}, est une liste de chaînes de caractères  ({{domxref("DOMStringList")}}) qui sont les noms des magasins d'objets ({{domxref("IDBObjectStore")}}) connectés à la base de données.</p>
+La propriété **`objectStoreNames`**, rattachée à l'interface {{domxref("IDBDatabase")}}, est une liste de chaînes de caractères  ({{domxref("DOMStringList")}}) qui sont les noms des magasins d'objets ({{domxref("IDBObjectStore")}}) connectés à la base de données.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">db.objectStoreNames</pre>
+```js
+db.objectStoreNames
+```
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>Une liste {{domxref("DOMStringList")}} des noms de magasins d'objets ({{domxref("IDBObjectStore")}}) connectés à la base de données.</p>
+Une liste {{domxref("DOMStringList")}} des noms de magasins d'objets ({{domxref("IDBObjectStore")}}) connectés à la base de données.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">// Connexion à la base de données
+```js
+// Connexion à la base de données
 var DBOpenRequest = window.indexedDB.open("toDoList", 4);
 
 // Les deux gestionnaires d’événements activés pour
 // gérer la réussite ou l'échec de le connexion.
 DBOpenRequest.onerror = function(event) {
-  note.innerHTML += '&lt;li&gt;Erreur de chargement de la base de données.&lt;/li&gt;';
+  note.innerHTML += '<li>Erreur de chargement de la base de données.</li>';
 };
 
 DBOpenRequest.onsuccess = function(event) {
-  note.innerHTML += '&lt;li&gt;Base de données initialisée.&lt;/li&gt;';
+  note.innerHTML += '<li>Base de données initialisée.</li>';
 
   // Affecte la connexion à la variable db.
   db = DBOpenRequest.result;
@@ -43,41 +46,27 @@ DBOpenRequest.onsuccess = function(event) {
   // Cette ligne affiche sur la console la liste des magasins
   // d'objets de la base de données
   console.log(db.objectStoreNames);
-};</pre>
-
-<div class="note">
-  <p><strong>Note :</strong>Pour un exemple fonctionnel complet, voir notre application de démo <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">l'exemple <em>live</em></a>).</p>
-</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('IndexedDB', '#widl-IDBDatabase-objectStoreNames', 'objectStoreNames')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.IDBDatabase.objectStoreNames")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Manipuler IndexedDB</a></li>
- <li>Démarrer des transactions : {{domxref("IDBDatabase")}}</li>
- <li>Manipuler des transactions : {{domxref("IDBTransaction")}}</li>
- <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
- <li>Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}</li>
- <li>Manipuler des curseurs : {{domxref("IDBCursor")}}</li>
- <li>Exemple de référence pour IndexedDB : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a></li>
-</ul>
+};
+```
+
+> **Note :**Pour un exemple fonctionnel complet, voir notre application de démo [To-do Notifications](https://github.com/mdn/to-do-notifications/) ([l'exemple _live_](https://mdn.github.io/to-do-notifications/)).
+
+## Spécifications
+
+| Spécification                                                                                                    | État                         | Commentaires |
+| ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------ |
+| {{SpecName('IndexedDB', '#widl-IDBDatabase-objectStoreNames', 'objectStoreNames')}} | {{Spec2('IndexedDB')}} |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.IDBDatabase.objectStoreNames")}}
+
+## Voir aussi
+
+- [Manipuler IndexedDB](/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB)
+- Démarrer des transactions : {{domxref("IDBDatabase")}}
+- Manipuler des transactions : {{domxref("IDBTransaction")}}
+- Définir un intervalle de clés : {{domxref("IDBKeyRange")}}
+- Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}
+- Manipuler des curseurs : {{domxref("IDBCursor")}}
+- Exemple de référence pour IndexedDB : [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages)
diff --git a/files/fr/web/api/idbdatabase/onabort/index.md b/files/fr/web/api/idbdatabase/onabort/index.md
index f47e7695e2..8f6a346a16 100644
--- a/files/fr/web/api/idbdatabase/onabort/index.md
+++ b/files/fr/web/api/idbdatabase/onabort/index.md
@@ -8,29 +8,32 @@ tags:
   - Reference
 translation_of: Web/API/IDBDatabase/onabort
 ---
-<div>{{APIRef("IndexedDB")}}</div>
+{{APIRef("IndexedDB")}}
 
-<p>Le gestionnaire d'événement <strong><code>onabort</code></strong>, rattaché à l'interface {{domxref("IDBDatabase")}}, s'exécute au déclenchement de l'événement <code>abort</code>, lorsque la tentative d’accès à la base de données est interrompue.</p>
+Le gestionnaire d'événement **`onabort`**, rattaché à l'interface {{domxref("IDBDatabase")}}, s'exécute au déclenchement de l'événement `abort`, lorsque la tentative d’accès à la base de données est interrompue.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">db.onabort = function() { ... }</pre>
+```js
+db.onabort = function() { ... }
+```
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Cette exemple illustre un gestionnaire d'événement {{domxref("IDBOpenDBRequest.onupgradeneeded")}} dans lequel on ajoute un magasin d'objet et les deux gestionnaires d'événement <code>onerror</code> et <code>onabort</code> pour gérer les cas d'échec.</p>
+Cette exemple illustre un gestionnaire d'événement {{domxref("IDBOpenDBRequest.onupgradeneeded")}} dans lequel on ajoute un magasin d'objet et les deux gestionnaires d'événement `onerror` et `onabort` pour gérer les cas d'échec.
 
-<pre class="brush: js">DBOpenRequest.onupgradeneeded = function(event) {
+```js
+DBOpenRequest.onupgradeneeded = function(event) {
   var db = event.target.result;
 
   db.onerror = function() {
-    note.innerHTML += '&lt;li&gt;Erreur du chargement de la base de données.&lt;/li&gt;';
+    note.innerHTML += '<li>Erreur du chargement de la base de données.</li>';
   };
 
   db.onabort = function() {
-    note.innerHTML += '&lt;li&gt;L\'ouverture de la connexion à été annulée !&lt;/li&gt;';
+    note.innerHTML += '<li>L\'ouverture de la connexion à été annulée !</li>';
   };
 
   // On ajoute un magasin d'objet à la base de données
@@ -47,38 +50,26 @@ translation_of: Web/API/IDBDatabase/onabort
 
   objectStore.createIndex("notified", "notified", { unique: false });
 
-  note.innerHTML += '&lt;li&gt;Le magasin d\'objets à été ajouté.&lt;/li&gt;';
-};</pre>
-
-<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('IndexedDB', '#widl-IDBDatabase-onabort', 'onabort')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_avec_les_navigateurs">Compatibilité avec les navigateurs</h2>
-
-<p>{{Compat("api.IDBDatabase.onabort")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Manipuler IndexedDB</a></li>
- <li>Démarrer des transactions : {{domxref("IDBDatabase")}}</li>
- <li>Manipuler des transactions : {{domxref("IDBTransaction")}}</li>
- <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
- <li>Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}</li>
- <li>Manipuler des curseurs : {{domxref("IDBCursor")}}</li>
- <li>Exemple de référence pour IndexedDB : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a></li>
-</ul>
+  note.innerHTML += '<li>Le magasin d\'objets à été ajouté.</li>';
+};
+```
+
+## Spécifications
+
+| Spécification                                                                            | État                         | Commentaires |
+| ---------------------------------------------------------------------------------------- | ---------------------------- | ------------ |
+| {{SpecName('IndexedDB', '#widl-IDBDatabase-onabort', 'onabort')}} | {{Spec2('IndexedDB')}} |              |
+
+## Compatibilité avec les navigateurs
+
+{{Compat("api.IDBDatabase.onabort")}}
+
+## Voir aussi
+
+- [Manipuler IndexedDB](/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB)
+- Démarrer des transactions : {{domxref("IDBDatabase")}}
+- Manipuler des transactions : {{domxref("IDBTransaction")}}
+- Définir un intervalle de clés : {{domxref("IDBKeyRange")}}
+- Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}
+- Manipuler des curseurs : {{domxref("IDBCursor")}}
+- Exemple de référence pour IndexedDB : [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages)
diff --git a/files/fr/web/api/idbdatabase/onerror/index.md b/files/fr/web/api/idbdatabase/onerror/index.md
index b8357dce06..e35322fb03 100644
--- a/files/fr/web/api/idbdatabase/onerror/index.md
+++ b/files/fr/web/api/idbdatabase/onerror/index.md
@@ -8,29 +8,32 @@ tags:
   - Reference
 translation_of: Web/API/IDBDatabase/onerror
 ---
-<div>{{APIRef("IndexedDB")}}</div>
+{{APIRef("IndexedDB")}}
 
-<p>Le gestionnaire d'événement <strong><code>onerror</code></strong>, rattaché à  l'interface <code>IDBDatabase</code>, s’exécute au déclenchement de l'événement <code>error</code> qui se produit lorsque la connexion à la base de donnée échoue.</p>
+Le gestionnaire d'événement **`onerror`**, rattaché à  l'interface `IDBDatabase`, s’exécute au déclenchement de l'événement `error` qui se produit lorsque la connexion à la base de donnée échoue.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">db.onerror = function() { ... }</pre>
+```js
+db.onerror = function() { ... }
+```
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Dans cet exemple, on illustre un gestionnaire d'événement {{domxref("IDBOpenDBRequest.onupgradeneeded")}} dans lequel on ajoute un magasin d'objet et les deux gestionnaires d'événements <code>onerror</code> et <code>onabort</code> afin de gérer les cas d'échec de la connexion.</p>
+Dans cet exemple, on illustre un gestionnaire d'événement {{domxref("IDBOpenDBRequest.onupgradeneeded")}} dans lequel on ajoute un magasin d'objet et les deux gestionnaires d'événements `onerror` et `onabort` afin de gérer les cas d'échec de la connexion.
 
-<pre class="brush: js">DBOpenRequest.onupgradeneeded = function(event) {
+```js
+DBOpenRequest.onupgradeneeded = function(event) {
   var db = event.target.result;
 
   db.onerror = function() {
-    note.innerHTML += '&lt;li&gt;Erreur du chargement de la base de données.&lt;/li&gt;';
+    note.innerHTML += '<li>Erreur du chargement de la base de données.</li>';
   };
 
   db.onabort = function() {
-    note.innerHTML += '&lt;li&gt;L\'ouverture de la connexion à été annulé!&lt;/li&gt;';
+    note.innerHTML += '<li>L\'ouverture de la connexion à été annulé!</li>';
   };
 
   // Ajoute un magasin d'objet à la base de données
@@ -47,38 +50,26 @@ translation_of: Web/API/IDBDatabase/onerror
 
   objectStore.createIndex("notified", "notified", { unique: false });
 
-  note.innerHTML += '&lt;li&gt;Le magasin d\'objets à été ajouté.&lt;/li&gt;';
-};</pre>
-
-<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('IndexedDB', '#widl-IDBDatabase-onerror', 'onerror')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.IDBDatabase.onerror")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Manipuler IndexedDB</a></li>
- <li>Démarrer des transactions : {{domxref("IDBDatabase")}}</li>
- <li>Manipuler des transactions : {{domxref("IDBTransaction")}}</li>
- <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
- <li>Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}</li>
- <li>Manipuler des curseurs : {{domxref("IDBCursor")}}</li>
- <li>Exemple de référence pour IndexedDB : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a></li>
-</ul>
+  note.innerHTML += '<li>Le magasin d\'objets à été ajouté.</li>';
+};
+```
+
+## Spécifications
+
+| Spécification                                                                            | État                         | Commentaires |
+| ---------------------------------------------------------------------------------------- | ---------------------------- | ------------ |
+| {{SpecName('IndexedDB', '#widl-IDBDatabase-onerror', 'onerror')}} | {{Spec2('IndexedDB')}} |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.IDBDatabase.onerror")}}
+
+## Voir aussi
+
+- [Manipuler IndexedDB](/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB)
+- Démarrer des transactions : {{domxref("IDBDatabase")}}
+- Manipuler des transactions : {{domxref("IDBTransaction")}}
+- Définir un intervalle de clés : {{domxref("IDBKeyRange")}}
+- Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}
+- Manipuler des curseurs : {{domxref("IDBCursor")}}
+- Exemple de référence pour IndexedDB : [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages)
diff --git a/files/fr/web/api/idbdatabase/onversionchange/index.md b/files/fr/web/api/idbdatabase/onversionchange/index.md
index 51741c0f7d..6cb138d0bc 100644
--- a/files/fr/web/api/idbdatabase/onversionchange/index.md
+++ b/files/fr/web/api/idbdatabase/onversionchange/index.md
@@ -8,31 +8,34 @@ tags:
   - Reference
 translation_of: Web/API/IDBDatabase/onversionchange
 ---
-<div>{{APIRef("IndexedDB")}}</div>
+{{APIRef("IndexedDB")}}
 
-<p>Le gestionnaire d'événement <strong><code>onversionchange</code></strong>, rattaché à l'interface {{domxref("IDBDatabase")}}, s’exécute au déclenchement de l'événement <code>versionchange</code> qui se produit lorsque la structure de la base de donnée change (l'événement {{domxref("IDBOpenDBRequest.onupgradeneeded")}} ou {{domxref("IDBFactory.deleteDatabase")}} a été demandé par ailleurs (probablement dans une autre fenêtre ou onglet sur le même ordinateur)).</p>
+Le gestionnaire d'événement **`onversionchange`**, rattaché à l'interface {{domxref("IDBDatabase")}}, s’exécute au déclenchement de l'événement `versionchange` qui se produit lorsque la structure de la base de donnée change (l'événement {{domxref("IDBOpenDBRequest.onupgradeneeded")}} ou {{domxref("IDBFactory.deleteDatabase")}} a été demandé par ailleurs (probablement dans une autre fenêtre ou onglet sur le même ordinateur)).
 
-<p>Cela n'est pas la même chose qu'une transaction <code>versionchange</code> (bien que les concepts soient apparentés).</p>
+Cela n'est pas la même chose qu'une transaction `versionchange` (bien que les concepts soient apparentés).
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">db.onversionchange = function() { ... }</pre>
+```js
+db.onversionchange = function() { ... }
+```
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Cette exemple illustre un gestionnaire d'événement {{domxref("IDBOpenDBRequest.onupgradeneeded")}} dans lequel on ajoute un magasin d'objets. Les deux gestionnaires d'événements <code>onerror</code> et <code>onabort</code> sont utilisés pour les cas d'échec. Le gestionnaire d'événement <code>onversionchange</code> est utilisé afin d'indiquer que la structure de la base de données a été modifiée.</p>
+Cette exemple illustre un gestionnaire d'événement {{domxref("IDBOpenDBRequest.onupgradeneeded")}} dans lequel on ajoute un magasin d'objets. Les deux gestionnaires d'événements `onerror` et `onabort` sont utilisés pour les cas d'échec. Le gestionnaire d'événement `onversionchange` est utilisé afin d'indiquer que la structure de la base de données a été modifiée.
 
-<pre class="brush: js">DBOpenRequest.onupgradeneeded = function(event) {
+```js
+DBOpenRequest.onupgradeneeded = function(event) {
   var db = event.target.result;
 
   db.onerror = function() {
-    note.innerHTML += '&lt;li&gt;Erreur du chargement de la base de données.&lt;/li&gt;';
+    note.innerHTML += '<li>Erreur du chargement de la base de données.</li>';
   };
 
   db.onabort = function() {
-    note.innerHTML += '&lt;li&gt;L\'ouverture de la connexion à été annulée !&lt;/li&gt;';
+    note.innerHTML += '<li>L\'ouverture de la connexion à été annulée !</li>';
   };
 
   // Ajoute un magasin d'objets à la base de données
@@ -49,42 +52,30 @@ translation_of: Web/API/IDBDatabase/onversionchange
 
   objectStore.createIndex("notified", "notified", { unique: false });
 
-  note.innerHTML += '&lt;li&gt;Le magasin d\'objet à été ajouté.&lt;/li&gt;';
+  note.innerHTML += '<li>Le magasin d\'objet à été ajouté.</li>';
 
   db.onversionchange = function(event) {
-    note.innerHTML += '&lt;li&gt;Des changements ont été appliqués sur la base de données. Vous devez réactualiser cette page ou la fermer et utiliser l\'autre version de cette application qui est ouverte.&lt;/li&gt;';
+    note.innerHTML += '<li>Des changements ont été appliqués sur la base de données. Vous devez réactualiser cette page ou la fermer et utiliser l\'autre version de cette application qui est ouverte.</li>';
   };
-};</pre>
-
-<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('IndexedDB', '#widl-IDBDatabase-onversionchange', 'onversionchange')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.IDBDatabase.onversionchange")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Manipuler IndexedDB</a></li>
- <li>Démarrer des transactions : {{domxref("IDBDatabase")}}</li>
- <li>Manipuler des transactions : {{domxref("IDBTransaction")}}</li>
- <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
- <li>Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}</li>
- <li>Manipuler des curseurs : {{domxref("IDBCursor")}}</li>
- <li>Exemple de référence pour IndexedDB : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a></li>
-</ul>
+};
+```
+
+## Spécifications
+
+| Spécification                                                                                                | État                         | Commentaires |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------ |
+| {{SpecName('IndexedDB', '#widl-IDBDatabase-onversionchange', 'onversionchange')}} | {{Spec2('IndexedDB')}} |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.IDBDatabase.onversionchange")}}
+
+## Voir aussi
+
+- [Manipuler IndexedDB](/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB)
+- Démarrer des transactions : {{domxref("IDBDatabase")}}
+- Manipuler des transactions : {{domxref("IDBTransaction")}}
+- Définir un intervalle de clés : {{domxref("IDBKeyRange")}}
+- Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}
+- Manipuler des curseurs : {{domxref("IDBCursor")}}
+- Exemple de référence pour IndexedDB : [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages)
diff --git a/files/fr/web/api/idbdatabase/transaction/index.md b/files/fr/web/api/idbdatabase/transaction/index.md
index 531edfbdb2..06fa78ba1b 100644
--- a/files/fr/web/api/idbdatabase/transaction/index.md
+++ b/files/fr/web/api/idbdatabase/transaction/index.md
@@ -3,93 +3,147 @@ title: IDBDatabase.transaction()
 slug: Web/API/IDBDatabase/transaction
 translation_of: Web/API/IDBDatabase/transaction
 ---
-<p>{{ APIRef("IndexedDB") }}</p>
-
-<div>
-<p>La méthode <strong><code>transaction</code></strong> de l'interface {{domxref("IDBDatabase")}} renvoie une {{domxref("IDBTransaction","transaction")}} sur laquelle on peut appeler la méthode {{domxref("IDBTransaction.objectStore")}} pour accéder aux magasins d'objets de la base de donnée.</p>
-</div>
-
-<p>{{AvailableInWorkers}}</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="brush: js">var transaction = db.transaction(storeNames, mode);</pre>
-
-<h2 id="Paramètres">Paramètres</h2>
-
-<dl>
- <dt>storeNames</dt>
- <dd><p>un tableau de noms de magasins d'objets entrant dans le cadre de cette transaction. Indique seulement les magasins d'objets dont on a besoin. Si l’on n’a besoin que d’un seul magasin d'objet, on peut simplement passer son nom. Les lignes suivantes sont équivalentes :</p>
- <pre class="brush: js">var transaction = db.transaction(['my-store-name']);
-var transaction = db.transaction('my-store-name');</pre>
- <p>Pour utiliser tous les magasins d'objets de la base de donnée, on peut appeler la methode {{domxref("IDBDatabase.objectStoreNames")}}:</p>
- <pre class="brush:js;">var transaction = db.transaction(db.objectStoreNames);</pre>
- <p>Passer un tableau vide lèvera une exception.</p></dd>
- <dt>mode {{optional_inline}}</dt>
- <dd><p>Le {{domxref("IDBTransactionMode","mode")}} d’{{domxref("IDBObjectStore","accès aux magasins d'objets")}} à la base de données (par default <code>readonly</code>):</p>
- <table class="standard-table">
-  <thead>
-   <tr>
-    <th scope="col">Valeur</th>
-    <th scope="col">Explication</th>
-   </tr>
-  </thead>
-  <tbody>
-   <tr>
-    <td><code>readonly</code></td>
-    <td>permet de prendre des objets dans les magasins d'objets, de lire les index et de faire des curseurs.</td>
-   </tr>
-   <tr>
-    <td><code>readwrite</code></td>
-    <td>Permet en plus de que l'on peut faire en readonly, d’ajouter et mettre à jour des objets dans les magasins d'objets.</td>
-   </tr>
-   <tr>
-    <td><code>versionchange</code></td>
-    <td>Permet toute les opérations, y compris celles qui suppriment ou ajoutent des {{domxref("IDBOjectStore","magasins d'objets")}} ou des {{domxref("IDBIndex","index")}}. Ce mode met à jour le numéro de version de la base de données, il se sert au début de {{domxref ("IDBDatabase.setVersion")}}. Les {{domxref("IDBTransaction","transactions")}} dans ce mode ne peuvent pas fonctionner en même temps que d'autres.</td>
-   </tr>
-   <tr>
-    <td><code>readwriteflush</code></td>
-    <td>
-     <p>Si vous devez vous assurer de l'efficacité d'une transaction pour une raison quelconque (par exemple, vous stockez des données critiques qui ne peuvent être recalculées plus tard), vous pouvez forcer l’enregistrement complet sur disque avant de déclencher l’événement <code>complete</code> en utilisant le mode <code>readwriteflush</code> (non standard) expérimental ( voir {{domxref("IDBDatabase.transaction")}} ). C'est expérimental, et ne peut être utilisé que si le <code> dom.indexedDB.experimental </code> pref est réglé sur <code> true </code> dans <code> about:config.</code></p>
-
-     <div class="note"><p><strong>Note :</strong> Depuis Firefox 40, les transactions IndexedDB diminuent en efficacité pour gagner en efficience (voir {{Bug ( "1112702")}}.) Auparavant, dans une transaction en <code><a href="#const_read_write">readwrite</a></code> l'événement complete était déclanché seulement lorsque toutes les données étaient écrites sur le disque. Maintenant l'événement <code>complete</code> est déclenché après que l'OS ai envoyé l'ordre d'écrire les données, mais potentiellement avant qu'elles aient été écrites sur le disque. L'événement <code>complete</code> peut ainsi se déclancher plus rapidement qu'auparavant, cependant, il existe une chance infime pour que l'ensemble de la transaction soit perdue si le système d'exploitation plante ou s'il y a une perte de courant avant que les données aient été écites sur le disque. Étant donné que ces événements catastrophiques sont rares la plupart des utilisateurs ne devraient pas avoir à s'en préoccuper davantage.</p></div>
-    </td>
-   </tr>
-  </tbody>
- </table>
- <p>Pour éviter des pertes de performance, n’utilisez le mode <code>readwrite</code> que si vous avez effectivement besoin d’écrire ou de mettre à jour des données sur la base.")}} Si on a besoin d’accéder à un magasin d'objets pour écrire ou mettre à jour des enregistrement, on utilise la sytaxe:</p>
- <pre class="brush:js">var transaction = db.transaction('monMagasin','readwrite');</pre>
- </dd>
-</dl>
-
-<h2 id="Renvoie">Renvoie</h2>
-
-<p>Une {{domxref("IDBTransaction","transaction")}}.</p>
-
-<h2 id="Exceptions">Exceptions</h2>
-
-<dl>
- <dt><code>InvalidStateError</code></dt>
- <dd>Cette {{domxref("DOMException","exception")}} est levée si la méthode <code>close()</code> a été appelée sur cette connexion à la base de donnée.</dd>
- <dt><code>NotFoundError</code></dt>
- <dd>Cette {{domxref("DOMException","exception")}} est levée si un magasin d'objets indiqué dans le paramètre <code>storeNames</code> n'existe pas ou plus.</dd>
- <dt><code>TypeError</code></dt>
- <dd>Cette {{domxref("DOMException","exception")}} est levée si la valeur du paramètre <code>mode</code> n'est pas valide.</dd>
- <dt><code>InvalidAccessError</code></dt>
- <dd>Cette {{domxref("DOMException","exception")}} est levée si la liste passée à <code>storeNames</code> est vide</dd>
-</dl>
-
-<h2 id="Exemple">Exemple</h2>
-
-<p>Dans cet exemple, on ouvre simplement une connexion à la base de donnée puis une transaction sur cette connexion.</p>
-
-<pre class="brush: js">var db;
+{{ APIRef("IndexedDB") }}
+
+La méthode **`transaction`** de l'interface {{domxref("IDBDatabase")}} renvoie une {{domxref("IDBTransaction","transaction")}} sur laquelle on peut appeler la méthode {{domxref("IDBTransaction.objectStore")}} pour accéder aux magasins d'objets de la base de donnée.
+
+{{AvailableInWorkers}}
+
+## Syntaxe
+
+```js
+var transaction = db.transaction(storeNames, mode);
+```
+
+## Paramètres
+
+- storeNames
+
+  - : un tableau de noms de magasins d'objets entrant dans le cadre de cette transaction. Indique seulement les magasins d'objets dont on a besoin. Si l’on n’a besoin que d’un seul magasin d'objet, on peut simplement passer son nom. Les lignes suivantes sont équivalentes :
+
+    ```js
+    var transaction = db.transaction(['my-store-name']);
+    var transaction = db.transaction('my-store-name');
+    ```
+
+    Pour utiliser tous les magasins d'objets de la base de donnée, on peut appeler la methode {{domxref("IDBDatabase.objectStoreNames")}}:
+
+    ```js
+    var transaction = db.transaction(db.objectStoreNames);
+    ```
+
+    Passer un tableau vide lèvera une exception.
+
+- mode {{optional_inline}}
+
+  - : Le {{domxref("IDBTransactionMode","mode")}} d’{{domxref("IDBObjectStore","accès aux magasins d'objets")}} à la base de données (par default `readonly`):
+
+    <table class="standard-table">
+      <thead>
+        <tr>
+          <th scope="col">Valeur</th>
+          <th scope="col">Explication</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td><code>readonly</code></td>
+          <td>
+            permet de prendre des objets dans les magasins d'objets, de lire les
+            index et de faire des curseurs.
+          </td>
+        </tr>
+        <tr>
+          <td><code>readwrite</code></td>
+          <td>
+            Permet en plus de que l'on peut faire en readonly, d’ajouter et mettre à
+            jour des objets dans les magasins d'objets.
+          </td>
+        </tr>
+        <tr>
+          <td><code>versionchange</code></td>
+          <td>
+            Permet toute les opérations, y compris celles qui suppriment ou ajoutent
+            des {{domxref("IDBOjectStore","magasins d'objets")}} ou
+            des {{domxref("IDBIndex","index")}}. Ce mode met à jour le
+            numéro de version de la base de données, il se sert au début de
+            {{domxref ("IDBDatabase.setVersion")}}. Les
+            {{domxref("IDBTransaction","transactions")}} dans ce
+            mode ne peuvent pas fonctionner en même temps que d'autres.
+          </td>
+        </tr>
+        <tr>
+          <td><code>readwriteflush</code></td>
+          <td>
+            <p>
+              Si vous devez vous assurer de l'efficacité d'une transaction pour une
+              raison quelconque (par exemple, vous stockez des données critiques qui
+              ne peuvent être recalculées plus tard), vous pouvez forcer
+              l’enregistrement complet sur disque avant de déclencher l’événement
+              <code>complete</code> en utilisant le mode
+              <code>readwriteflush</code> (non standard) expérimental ( voir
+              {{domxref("IDBDatabase.transaction")}} ). C'est
+              expérimental, et ne peut être utilisé que si le
+              <code>dom.indexedDB.experimental </code>pref est réglé sur
+              <code>true </code>dans <code>about:config.</code>
+            </p>
+            <div class="note">
+              <p>
+                <strong>Note :</strong> Depuis Firefox 40, les transactions
+                IndexedDB diminuent en efficacité pour gagner en efficience (voir
+                {{Bug ( "1112702")}}.) Auparavant, dans une transaction en
+                <code><a href="#const_read_write">readwrite</a></code> l'événement
+                complete était déclanché seulement lorsque toutes les données
+                étaient écrites sur le disque. Maintenant l'événement
+                <code>complete</code> est déclenché après que l'OS ai envoyé l'ordre
+                d'écrire les données, mais potentiellement avant qu'elles aient été
+                écrites sur le disque. L'événement <code>complete</code> peut ainsi
+                se déclancher plus rapidement qu'auparavant, cependant, il existe
+                une chance infime pour que l'ensemble de la transaction soit perdue
+                si le système d'exploitation plante ou s'il y a une perte de courant
+                avant que les données aient été écites sur le disque. Étant donné
+                que ces événements catastrophiques sont rares la plupart des
+                utilisateurs ne devraient pas avoir à s'en préoccuper davantage.
+              </p>
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+
+    Pour éviter des pertes de performance, n’utilisez le mode `readwrite` que si vous avez effectivement besoin d’écrire ou de mettre à jour des données sur la base.")}} Si on a besoin d’accéder à un magasin d'objets pour écrire ou mettre à jour des enregistrement, on utilise la sytaxe:
+
+    ```js
+    var transaction = db.transaction('monMagasin','readwrite');
+    ```
+
+## Renvoie
+
+Une {{domxref("IDBTransaction","transaction")}}.
+
+## Exceptions
+
+- `InvalidStateError`
+  - : Cette {{domxref("DOMException","exception")}} est levée si la méthode `close()` a été appelée sur cette connexion à la base de donnée.
+- `NotFoundError`
+  - : Cette {{domxref("DOMException","exception")}} est levée si un magasin d'objets indiqué dans le paramètre `storeNames` n'existe pas ou plus.
+- `TypeError`
+  - : Cette {{domxref("DOMException","exception")}} est levée si la valeur du paramètre `mode` n'est pas valide.
+- `InvalidAccessError`
+  - : Cette {{domxref("DOMException","exception")}} est levée si la liste passée à `storeNames` est vide
+
+## Exemple
+
+Dans cet exemple, on ouvre simplement une connexion à la base de donnée puis une transaction sur cette connexion.
+
+```js
+var db;
 
 // Connexion à la base de donnée
 var DBOpenRequest = window.indexedDB.open("toDoList", 4);
 
 DBOpenRequest.onsuccess = function(event) {
-  note.innerHTML += '&lt;li&gt;Base de donnée initialisée.&lt;/li&gt;';
+  note.innerHTML += '<li>Base de donnée initialisée.</li>';
 
   // affecte la connexion à la variable db
   db = DBOpenRequest.result;
@@ -104,49 +158,36 @@ var transaction = db.transaction(["toDoList"], "readwrite");
 
 // affiche le succès de l'ouverture de la transaction
 transaction.oncomplete = function(event) {
-  note.innerHTML += '&lt;li&gt;Fin de transaction: les modifications sur la base de donnée sont terminées.&lt;/li&gt;';
+  note.innerHTML += '<li>Fin de transaction: les modifications sur la base de donnée sont terminées.</li>';
 };
 
 transaction.onerror = function(event) {
-  note.innerHTML += '&lt;li&gt;La transaction n'a pas pu être initiée.&lt;/li&gt;';
+  note.innerHTML += '<li>La transaction n'a pas pu être initiée.</li>';
 };
 
 // On peut maintenant accéder au magasin d'objet
 var objectStore = transaction.objectStore("toDoList");
-// etc.</pre>
-
-<div class="note"><p><strong>Note :</strong>Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>).</p>
-</div>
-
-<h2 id="Spécification">Spécification</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('IndexedDB', '#widl-IDBDatabase-transaction-IDBTransaction-DOMString-sequence-DOMString--storeNames-IDBTransactionMode-mode', 'transaction()')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.IDBDatabase.transaction")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("IndexedDB_API.Using_IndexedDB","Utiliser IndexedDB")}}</li>
- <li>{{domxref("IDBDatabase","Débuter une connexion")}}</li>
- <li>{{domxref("IDBTransaction","Utilisé les transactions")}}</li>
- <li>{{domxref("IDBKeyRange","Définir l'intervalle des clés")}}</li>
- <li>{{domxref("IDBObjectStore","Accès aux magasins d'objets")}}</li>
- <li>{{domxref("IDBCursor","Utiliser les curseur")}}</li>
- <li>Exemple de référence: <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li>
-</ul>
+// etc.
+```
+
+> **Note :**Pour un exemple de travail complet, voir notre [To-do Notifications](https://github.com/mdn/to-do-notifications/) app ([view example live](http://mdn.github.io/to-do-notifications/)).
+
+## Spécification
+
+| Spécification                                                                                                                                                                                                    | Statut                       | Commentaire |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------- |
+| {{SpecName('IndexedDB', '#widl-IDBDatabase-transaction-IDBTransaction-DOMString-sequence-DOMString--storeNames-IDBTransactionMode-mode', 'transaction()')}} | {{Spec2('IndexedDB')}} |             |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.IDBDatabase.transaction")}}
+
+## Voir aussi
+
+- {{domxref("IndexedDB_API.Using_IndexedDB","Utiliser IndexedDB")}}
+- {{domxref("IDBDatabase","Débuter une connexion")}}
+- {{domxref("IDBTransaction","Utilisé les transactions")}}
+- {{domxref("IDBKeyRange","Définir l'intervalle des clés")}}
+- {{domxref("IDBObjectStore","Accès aux magasins d'objets")}}
+- {{domxref("IDBCursor","Utiliser les curseur")}}
+- Exemple de référence: [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages) ([view example live](http://mdn.github.io/to-do-notifications/).)
diff --git a/files/fr/web/api/idbdatabase/version/index.md b/files/fr/web/api/idbdatabase/version/index.md
index 81289060e2..33c35d6c53 100644
--- a/files/fr/web/api/idbdatabase/version/index.md
+++ b/files/fr/web/api/idbdatabase/version/index.md
@@ -9,69 +9,58 @@ tags:
   - Reference
 translation_of: Web/API/IDBDatabase/version
 ---
-<div>{{APIRef("IndexedDB")}}</div>
+{{APIRef("IndexedDB")}}
 
-<p>La propriété <strong><code>version</code></strong>, rattachée à l'interface {{domxref("IDBDatabase")}}, est un entier sur 64 bits qui contient la version de la base de données à laquelle on est connecté. Lors de la création initiale d'une base de données, cet attribut a la chaîne vide.</p>
+La propriété **`version`**, rattachée à l'interface {{domxref("IDBDatabase")}}, est un entier sur 64 bits qui contient la version de la base de données à laquelle on est connecté. Lors de la création initiale d'une base de données, cet attribut a la chaîne vide.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">db.version</pre>
+    db.version
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>Un entier qui contient la version de la base de données à laquelle on est connecté.</p>
+Un entier qui contient la version de la base de données à laquelle on est connecté.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: js">// On ouvre la base de données
+```js
+// On ouvre la base de données
 var DBOpenRequest = window.indexedDB.open("toDoList", 4);
 
 //  On déclare des gestionnaires d'évènements pour l'ouverture
 DBOpenRequest.onerror = function(event) {
-  note.innerHTML += '&lt;li&gt;Erreur lors du chargement de la base de données.&lt;/li&gt;';
+  note.innerHTML += '<li>Erreur lors du chargement de la base de données.</li>';
 };
 
 DBOpenRequest.onsuccess = function(event) {
-  note.innerHTML += '&lt;li&gt;Base de données initialisée.&lt;/li&gt;';
+  note.innerHTML += '<li>Base de données initialisée.</li>';
 
   // on stocke le résultat de l'ouverture si besoin de l'utiliser ensuite
   db = DBOpenRequest.result;
 
   // Cette ligne inscrira la version de la base dans la console : "4"
   console.log(db.version);
-};</pre>
-
-<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('IndexedDB', '#widl-IDBDatabase-version', 'version')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.IDBDatabase.version")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
- <li>Initier une connexion : {{domxref("IDBDatabase")}}</li>
- <li>Utiliser les transactions : {{domxref("IDBTransaction")}}</li>
- <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
- <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li>
- <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li>
- <li>Exemple de référence : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li>
-</ul>
+};
+```
+
+## Spécifications
+
+| Spécification                                                                            | État                         | Commentaires |
+| ---------------------------------------------------------------------------------------- | ---------------------------- | ------------ |
+| {{SpecName('IndexedDB', '#widl-IDBDatabase-version', 'version')}} | {{Spec2('IndexedDB')}} |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.IDBDatabase.version")}}
+
+## Voir aussi
+
+- [Utiliser IndexedDB](/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB)
+- Initier une connexion : {{domxref("IDBDatabase")}}
+- Utiliser les transactions : {{domxref("IDBTransaction")}}
+- Définir un intervalle de clés : {{domxref("IDBKeyRange")}}
+- Récupérer et modifier les données : {{domxref("IDBObjectStore")}}
+- Utiliser les curseurs {{domxref("IDBCursor")}}
+- Exemple de référence : [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages) ([exemple _live_](https://mdn.github.io/to-do-notifications/)).
diff --git a/files/fr/web/api/idbenvironment/index.md b/files/fr/web/api/idbenvironment/index.md
index ffe93f3b02..9630e9b598 100644
--- a/files/fr/web/api/idbenvironment/index.md
+++ b/files/fr/web/api/idbenvironment/index.md
@@ -8,71 +8,49 @@ tags:
   - Référence(2)
 translation_of: Web/API/IDBEnvironment
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}
 
-<div class="warning">
-<p><strong>Attention :</strong> À partir de Firefox 52, la propriété définie dans ce <em>mixin</em> a été déplacée vers {{domxref("WindowOrWorkerGlobalScope")}} et d'autres navigateurs implémenteront également cette décision. Voir {{domxref("WindowOrWorkerGlobalScope")}} pour des informations à jour.</p>
-</div>
+> **Attention :** À partir de Firefox 52, la propriété définie dans ce _mixin_ a été déplacée vers {{domxref("WindowOrWorkerGlobalScope")}} et d'autres navigateurs implémenteront également cette décision. Voir {{domxref("WindowOrWorkerGlobalScope")}} pour des informations à jour.
 
-<p>L'utilitaire <strong><code>IDBEnvironment</code></strong>, lié à l'interface <a href="/fr/docs/Web/API/API_IndexedDB">IndexedDB API</a>, contient la propriété <code>indexedDB</code> qui permet d'accéder aux fonctionnalités de l'API IndexedDB. C'est l'interface de haut niveau implémentée par les objets {{domxref("window")}} et {{domxref("Worker")}}.</p>
+L'utilitaire **`IDBEnvironment`**, lié à l'interface [IndexedDB API](/fr/docs/Web/API/API_IndexedDB), contient la propriété `indexedDB` qui permet d'accéder aux fonctionnalités de l'API IndexedDB. C'est l'interface de haut niveau implémentée par les objets {{domxref("window")}} et {{domxref("Worker")}}.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<dl>
- <dt>{{domxref("IDBEnvironment.indexedDB")}} {{readonlyInline}}</dt>
- <dd>Cette propriété fournit un mécanisme qui permet aux applications d'accéder à des bases de données de façon asynchrone. Elle contient un objet {{domxref("IDBFactory")}}.</dd>
-</dl>
+- {{domxref("IDBEnvironment.indexedDB")}} {{readonlyInline}}
+  - : Cette propriété fournit un mécanisme qui permet aux applications d'accéder à des bases de données de façon asynchrone. Elle contient un objet {{domxref("IDBFactory")}}.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Dans le fragment de code suivant, on crée une requête asynchrone sur une base de données et on utilise le gestionnaire d'évènements <code>onsuccess</code> de la requête :</p>
+Dans le fragment de code suivant, on crée une requête asynchrone sur une base de données et on utilise le gestionnaire d'évènements `onsuccess` de la requête :
 
-<pre class="brush: js">var db;
+```js
+var db;
 function openDB() {
  var DBOpenRequest = window.indexedDB.open("toDoList");
  DBOpenRequest.onsuccess = function(e) {
    db = DBOpenRequest.result;
  };
 }
-</pre>
+```
 
-<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('IndexedDB', '#idl-def-IDBEnvironment', 'IDBEnvironment')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                | État                         | Commentaires |
+| -------------------------------------------------------------------------------------------- | ---------------------------- | ------------ |
+| {{SpecName('IndexedDB', '#idl-def-IDBEnvironment', 'IDBEnvironment')}} | {{Spec2('IndexedDB')}} |              |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<div>
-<div>
+{{Compat("api.IDBEnvironment")}}
 
+## Voir aussi
 
-<p>{{Compat("api.IDBEnvironment")}}</p>
-</div>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-</div>
-
-<ul>
- <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
- <li>Initier une connexion : {{domxref("IDBDatabase")}}</li>
- <li>Utiliser les transactions : {{domxref("IDBTransaction")}}</li>
- <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
- <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li>
- <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li>
- <li>Exemple de référence : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li>
-</ul>
+- [Utiliser IndexedDB](/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB)
+- Initier une connexion : {{domxref("IDBDatabase")}}
+- Utiliser les transactions : {{domxref("IDBTransaction")}}
+- Définir un intervalle de clés : {{domxref("IDBKeyRange")}}
+- Récupérer et modifier les données : {{domxref("IDBObjectStore")}}
+- Utiliser les curseurs {{domxref("IDBCursor")}}
+- Exemple de référence : [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages) ([exemple _live_](https://mdn.github.io/to-do-notifications/)).
diff --git a/files/fr/web/api/idbfactory/cmp/index.md b/files/fr/web/api/idbfactory/cmp/index.md
index 0abf09e9d2..0ce4678d23 100644
--- a/files/fr/web/api/idbfactory/cmp/index.md
+++ b/files/fr/web/api/idbfactory/cmp/index.md
@@ -9,105 +9,68 @@ tags:
   - Reference
 translation_of: Web/API/IDBFactory/cmp
 ---
-<div>{{APIRef("IndexedDB")}}</div>
-
-<p>La méthode <strong><code>cmp()</code></strong> de l'interface {{domxref("IDBFactory")}} compare deux valeurs de clé et détermine si celles-ci sont égales et sinon, laquelle est la plus grande. Cette opération est utilisée pour l'enregistrement et le parcours des données.</p>
-
-<p>{{AvailableInWorkers}}</p>
-
-<div class="note"><p><strong>Note :</strong> Cette méthode ne doit pas être utilisée pour comparer des valeurs JavaScript. En effet, de nombreuses valeurs JavaScript ne sont pas des valeurs valides pour représenter des clés IndexedDB (les booléens et les objets par exemple), dans ces cas, elles peuvent être traitées comme des clés égales (ainsi IndexedDB ignore les tableaux ayant des propriétés non numériques et les considère comme des tableaux vides, de sorte que les éventuels tableaux non numériques seront considérés comme égaux). Une exception est levée si l'une des valeurs n'est pas une clé valide.</p></div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">var resultat = window.indexedDB.cmp(a, b);</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>a</code></dt>
- <dd>La première clé pour la comparaison.</dd>
- <dt><code>b</code></dt>
- <dd>La deuxième clé pour la comparaison.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un entier qui indique le résultat de la comparaison. Le tableau ci-dessous indique les valeurs possibles et leur signification :</p>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Valeur renvoyée</th>
-   <th scope="col">Description</th>
-  </tr>
-  <tr>
-   <td>-1</td>
-   <td>La clé 1 est plus petite que la clé 2.</td>
-  </tr>
-  <tr>
-   <td>0</td>
-   <td>Les deux clé sont égales.</td>
-  </tr>
-  <tr>
-   <td>1</td>
-   <td>La clé 1 est plus grande que la clé 2.</td>
-  </tr>
- </tbody>
-</table>
-
-<h3 id="Exceptions_levées">Exceptions levées</h3>
-
-<p>Cette méthode peut lever une exception {{domxref("DOMException")}} de type :</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Exception</th>
-   <th scope="col">Description</th>
-  </tr>
-  <tr>
-   <td><a href="/fr/docs/Web/API/DOMError"><code>DataError</code></a></td>
-   <td>L'une des clés fournies n'est pas valide.</td>
-  </tr>
- </thead>
-</table>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js;">var a = 1;
+{{APIRef("IndexedDB")}}
+
+La méthode **`cmp()`** de l'interface {{domxref("IDBFactory")}} compare deux valeurs de clé et détermine si celles-ci sont égales et sinon, laquelle est la plus grande. Cette opération est utilisée pour l'enregistrement et le parcours des données.
+
+{{AvailableInWorkers}}
+
+> **Note :** Cette méthode ne doit pas être utilisée pour comparer des valeurs JavaScript. En effet, de nombreuses valeurs JavaScript ne sont pas des valeurs valides pour représenter des clés IndexedDB (les booléens et les objets par exemple), dans ces cas, elles peuvent être traitées comme des clés égales (ainsi IndexedDB ignore les tableaux ayant des propriétés non numériques et les considère comme des tableaux vides, de sorte que les éventuels tableaux non numériques seront considérés comme égaux). Une exception est levée si l'une des valeurs n'est pas une clé valide.
+
+## Syntaxe
+
+    var resultat = window.indexedDB.cmp(a, b);
+
+### Paramètres
+
+- `a`
+  - : La première clé pour la comparaison.
+- `b`
+  - : La deuxième clé pour la comparaison.
+
+### Valeur de retour
+
+Un entier qui indique le résultat de la comparaison. Le tableau ci-dessous indique les valeurs possibles et leur signification :
+
+| Valeur renvoyée | Description                            |
+| --------------- | -------------------------------------- |
+| -1              | La clé 1 est plus petite que la clé 2. |
+| 0               | Les deux clé sont égales.              |
+| 1               | La clé 1 est plus grande que la clé 2. |
+
+### Exceptions levées
+
+Cette méthode peut lever une exception {{domxref("DOMException")}} de type :
+
+| Exception                                | Description                               |
+| ---------------------------------------- | ----------------------------------------- |
+| [`DataError`](/fr/docs/Web/API/DOMError) | L'une des clés fournies n'est pas valide. |
+
+## Exemples
+
+```js
+var a = 1;
 var b = 2;
 var result = window.indexedDB.cmp(a, b);
-console.log( "Résultat de la comparaison : " + result );</pre>
-
-<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('IndexedDB', '#widl-IDBFactory-cmp-short-any-first-any-second', 'cmp')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.IDBFactory.cmp")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
- <li>Initier une connexion : {{domxref("IDBDatabase")}}</li>
- <li>Utiliser les transactions : {{domxref("IDBTransaction")}}</li>
- <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
- <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li>
- <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li>
- <li>Exemple de référence : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li>
-</ul>
+console.log( "Résultat de la comparaison : " + result );
+```
+
+## Spécifications
+
+| Spécification                                                                                                    | État                         | Commentaires |
+| ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------ |
+| {{SpecName('IndexedDB', '#widl-IDBFactory-cmp-short-any-first-any-second', 'cmp')}} | {{Spec2('IndexedDB')}} |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.IDBFactory.cmp")}}
+
+## Voir aussi
+
+- [Utiliser IndexedDB](/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB)
+- Initier une connexion : {{domxref("IDBDatabase")}}
+- Utiliser les transactions : {{domxref("IDBTransaction")}}
+- Définir un intervalle de clés : {{domxref("IDBKeyRange")}}
+- Récupérer et modifier les données : {{domxref("IDBObjectStore")}}
+- Utiliser les curseurs {{domxref("IDBCursor")}}
+- Exemple de référence : [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages) ([exemple _live_](https://mdn.github.io/to-do-notifications/)).
diff --git a/files/fr/web/api/idbfactory/deletedatabase/index.md b/files/fr/web/api/idbfactory/deletedatabase/index.md
index a890a63166..45b1745eb8 100644
--- a/files/fr/web/api/idbfactory/deletedatabase/index.md
+++ b/files/fr/web/api/idbfactory/deletedatabase/index.md
@@ -8,44 +8,41 @@ tags:
   - Reference
 translation_of: Web/API/IDBFactory/deleteDatabase
 ---
-<div>{{APIRef("IndexedDB")}}</div>
+{{APIRef("IndexedDB")}}
 
-<p>La méthode <strong><code>deleteDatabase()</code></strong>, rattachée à l'interface {{domxref("IDBFactory")}}, permet de demander la suppression d'une base de données. La méthode renvoie immédiatement un objet {{domxref("IDBOpenDBRequest")}} puis effectue l'opération de suppression de façon asynchrone.</p>
+La méthode **`deleteDatabase()`**, rattachée à l'interface {{domxref("IDBFactory")}}, permet de demander la suppression d'une base de données. La méthode renvoie immédiatement un objet {{domxref("IDBOpenDBRequest")}} puis effectue l'opération de suppression de façon asynchrone.
 
-<p>Si la base de données est bien supprimée, un évènement <code>success</code> est déclenché sur l'objet <code>IDBOpenDBRequest</code> renvoyé et la propriété <code>result</code> vaut alors <code>undefined</code>. Si une erreur se produit lors de la suppression, ce sera un évènement <code>error</code> qui sera déclenché sur l'objet renvoyé par la méthode.</p>
+Si la base de données est bien supprimée, un évènement `success` est déclenché sur l'objet `IDBOpenDBRequest` renvoyé et la propriété `result` vaut alors `undefined`. Si une erreur se produit lors de la suppression, ce sera un évènement `error` qui sera déclenché sur l'objet renvoyé par la méthode.
 
-<div>
-<p>Lorsque la méthode <code>deleteDatabase()</code> est invoquée, toutes les autres connexions qui sont ouvertes sur cette base de données recevront un évènement <code><a href="/fr/docs/Web/Events/versionchange_indexedDB">versionchange</a></code>.</p>
-</div>
+Lorsque la méthode `deleteDatabase()` est invoquée, toutes les autres connexions qui sont ouvertes sur cette base de données recevront un évènement [`versionchange`](/fr/docs/Web/Events/versionchange_indexedDB).
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>La syntaxe actuellement standard est :</p>
+La syntaxe actuellement standard est :
 
-<pre class="syntaxbox">var <em>request</em> = <em>indexedDB</em>.deleteDatabase(<em>nom</em>);</pre>
+    var request = indexedDB.deleteDatabase(nom);
 
-<p>Une version expérimentale permet de gérer des options (cf. ci-après) :</p>
+Une version expérimentale permet de gérer des options (cf. ci-après) :
 
-<pre class="syntaxbox">var <em>request</em> = <em>indexedDB</em>.deleteDatabase(nom, options);</pre>
+    var request = indexedDB.deleteDatabase(nom, options);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>nom</code></dt>
- <dd>Le nom de la base de données qu'on souhaite supprimer. Tenter de supprimer une base de données qui n'existe pas ne déclenchera pas d'exception (contrairement à la tentative de suppression d'un magasin d'objets inexistant avec {{domxref("IDBDatabase.deleteObjectStore()")}} qui déclenchera bien une exception).</dd>
- <dt><code>options</code> {{NonStandardBadge}}</dt>
- <dd>Dans Gecko, à partir de <a href="/fr/Firefox/Releases/26">la version 26</a>, il est possible d'inclure un paramètre pour indiquer le stockage de la base. La valeur peut être <code>permanent</code> (la valeur par défaut) ou <code>temporary</code> si on souhaite supprimer une base de données qui fait partie d'une mémoire partagée.</dd>
-</dl>
+- `nom`
+  - : Le nom de la base de données qu'on souhaite supprimer. Tenter de supprimer une base de données qui n'existe pas ne déclenchera pas d'exception (contrairement à la tentative de suppression d'un magasin d'objets inexistant avec {{domxref("IDBDatabase.deleteObjectStore()")}} qui déclenchera bien une exception).
+- `options` {{NonStandardBadge}}
+  - : Dans Gecko, à partir de [la version 26](/fr/Firefox/Releases/26), il est possible d'inclure un paramètre pour indiquer le stockage de la base. La valeur peut être `permanent` (la valeur par défaut) ou `temporary` si on souhaite supprimer une base de données qui fait partie d'une mémoire partagée.
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Cette méthode renvoie un objet {{domxref("IDBOpenDBRequest")}} sur lequel seront déclenchés les évènements relatifs à la requête.</p>
+Cette méthode renvoie un objet {{domxref("IDBOpenDBRequest")}} sur lequel seront déclenchés les évènements relatifs à la requête.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: js">var DBDeleteRequest = window.indexedDB.deleteDatabase("toDoList");
+```js
+var DBDeleteRequest = window.indexedDB.deleteDatabase("toDoList");
 
 DBDeleteRequest.onerror = function(event) {
   console.log("Erreur lors de la suppression de la base");
@@ -56,42 +53,25 @@ DBDeleteRequest.onsuccess = function(event) {
 
   console.log(event.result); // undefined
 };
-</pre>
-
-<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('IndexedDB', '#widl-IDBFactory-deleteDatabase-IDBOpenDBRequest-DOMString-name', 'deleteDatabase()')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName("IndexedDB 2", "#dom-idbfactory-deletedatabase", "deleteDatabase()")}}</td>
-   <td>{{Spec2("IndexedDB 2")}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.IDBFactory.deleteDatabase")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Manipuler IndexedDB</a></li>
- <li>Démarrer des transactions : {{domxref("IDBDatabase")}}</li>
- <li>Manipuler des transactions : {{domxref("IDBTransaction")}}</li>
- <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
- <li>Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}</li>
- <li>Manipuler des curseurs : {{domxref("IDBCursor")}}</li>
- <li>Exemple de référence pour IndexedDB : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a></li>
-</ul>
+```
+
+## Spécifications
+
+| Spécification                                                                                                                                        | État                             | Commentaires |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ |
+| {{SpecName('IndexedDB', '#widl-IDBFactory-deleteDatabase-IDBOpenDBRequest-DOMString-name', 'deleteDatabase()')}} | {{Spec2('IndexedDB')}}     |              |
+| {{SpecName("IndexedDB 2", "#dom-idbfactory-deletedatabase", "deleteDatabase()")}}                                         | {{Spec2("IndexedDB 2")}} |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.IDBFactory.deleteDatabase")}}
+
+## Voir aussi
+
+- [Manipuler IndexedDB](/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB)
+- Démarrer des transactions : {{domxref("IDBDatabase")}}
+- Manipuler des transactions : {{domxref("IDBTransaction")}}
+- Définir un intervalle de clés : {{domxref("IDBKeyRange")}}
+- Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}
+- Manipuler des curseurs : {{domxref("IDBCursor")}}
+- Exemple de référence pour IndexedDB : [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages)
diff --git a/files/fr/web/api/idbfactory/index.md b/files/fr/web/api/idbfactory/index.md
index b424b0af20..fbcba34c21 100644
--- a/files/fr/web/api/idbfactory/index.md
+++ b/files/fr/web/api/idbfactory/index.md
@@ -3,30 +3,29 @@ title: IDBFactory
 slug: Web/API/IDBFactory
 translation_of: Web/API/IDBFactory
 ---
-<div>{{APIRef("IndexedDB")}}</div>
+{{APIRef("IndexedDB")}}
 
-<p>L'interface <strong><code>IDBFactory</code></strong> fait partie de l'<a href="/fr/docs/Web/API/API_IndexedDB">API IndexedDB</a> et permet aux applications d'accéder à des bases de données de façon asynchrone. L'objet qui implémente cette interface  est <code>window.indexedDB</code>. Autrement dit, on créera et on accèdera à une base de données (voire on la supprimera) directement via cet objet plutôt qu'en utilisant l'objet <code>IDBFactory</code>.</p>
+L'interface **`IDBFactory`** fait partie de l'[API IndexedDB](/fr/docs/Web/API/API_IndexedDB) et permet aux applications d'accéder à des bases de données de façon asynchrone. L'objet qui implémente cette interface  est `window.indexedDB`. Autrement dit, on créera et on accèdera à une base de données (voire on la supprimera) directement via cet objet plutôt qu'en utilisant l'objet `IDBFactory`.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Méthodes">Méthodes</h2>
+## Méthodes
 
-<dl>
- <dt>{{domxref("IDBFactory.open")}}</dt>
- <dd>Une méthode qui permet d'ouvrir une connexion à une base de données.</dd>
- <dt>{{domxref("IDBFactory.deleteDatabase")}}</dt>
- <dd>Une méthode qui permet de demander la suppression d'une base de données.</dd>
- <dt>{{domxref("IDBFactory.cmp")}}</dt>
- <dd>Une méthode qui compare deux clés et renvoie un résultat qui indique laquelle est la plus grande.</dd>
- <dt>{{domxref("IDBFactory.databases")}}</dt>
- <dd>Une méthode qui répertorie toutes les bases de données disponibles, y compris leurs noms et leurs versions.</dd>
-</dl>
+- {{domxref("IDBFactory.open")}}
+  - : Une méthode qui permet d'ouvrir une connexion à une base de données.
+- {{domxref("IDBFactory.deleteDatabase")}}
+  - : Une méthode qui permet de demander la suppression d'une base de données.
+- {{domxref("IDBFactory.cmp")}}
+  - : Une méthode qui compare deux clés et renvoie un résultat qui indique laquelle est la plus grande.
+- {{domxref("IDBFactory.databases")}}
+  - : Une méthode qui répertorie toutes les bases de données disponibles, y compris leurs noms et leurs versions.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans l'exemple qui suit, on effectue une requête sur une base de données et on gère les cas de succès et d'erreur. Vous pouvez consulter un exemple complet sur <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">notre application To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">voir l'exemple en <em>live</em></a>).</p>
+Dans l'exemple qui suit, on effectue une requête sur une base de données et on gère les cas de succès et d'erreur. Vous pouvez consulter un exemple complet sur [notre application To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages) ([voir l'exemple en _live_](https://mdn.github.io/to-do-notifications/)).
 
-<pre class="brush:js">var note = document.querySelector("ul");
+```js
+var note = document.querySelector("ul");
 
 // Dans la ligne suivante, inclure les préfixes des
 // implémentations à tester
@@ -48,58 +47,37 @@ var DBOpenRequest = window.indexedDB.open("toDoList", 4);
 // pour gérer le succès ou l'échec de l'ouverture
 // de la base de données
 DBOpenRequest.onerror = function(event) {
-  note.innerHTML += '&lt;li&gt;Erreur lors du chargement de la base.&lt;/li&gt;';
+  note.innerHTML += '<li>Erreur lors du chargement de la base.</li>';
 };
 
 DBOpenRequest.onsuccess = function(event) {
-  note.innerHTML += '&lt;li&gt;Base de données initialisée.&lt;/li&gt;';
+  note.innerHTML += '<li>Base de données initialisée.</li>';
 
   // store the result of opening the database in the db
   // variable. This is used a lot later on, for opening
   // transactions and suchlike.
   db = DBOpenRequest.result;
 };
-</pre>
-
-<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("IndexedDB", "#idl-def-IDBFactory", "IDBFactory")}}</td>
-   <td>{{Spec2("IndexedDB")}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName("IndexedDB 2", "#factory-interface", "IDBFactory")}}</td>
-   <td>{{Spec2("IndexedDB 2")}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName("IndexedDB 3", "#factory-interface", "IDBFactory")}}</td>
-   <td>{{Spec2("IndexedDB 3")}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.IDBFactory")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Manipuler IndexedDB</a></li>
- <li>Démarrer des transactions : {{domxref("IDBDatabase")}}</li>
- <li>Manipuler des transactions : {{domxref("IDBTransaction")}}</li>
- <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
- <li>Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}</li>
- <li>Manipuler des curseurs : {{domxref("IDBCursor")}}</li>
- <li>Exemple de référence pour IndexedDB : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a></li>
-</ul>
+```
+
+## Spécifications
+
+| Spécification                                                                        | État                             | Commentaires |
+| ------------------------------------------------------------------------------------ | -------------------------------- | ------------ |
+| {{SpecName("IndexedDB", "#idl-def-IDBFactory", "IDBFactory")}} | {{Spec2("IndexedDB")}}     |              |
+| {{SpecName("IndexedDB 2", "#factory-interface", "IDBFactory")}} | {{Spec2("IndexedDB 2")}} |              |
+| {{SpecName("IndexedDB 3", "#factory-interface", "IDBFactory")}} | {{Spec2("IndexedDB 3")}} |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.IDBFactory")}}
+
+## Voir aussi
+
+- [Manipuler IndexedDB](/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB)
+- Démarrer des transactions : {{domxref("IDBDatabase")}}
+- Manipuler des transactions : {{domxref("IDBTransaction")}}
+- Définir un intervalle de clés : {{domxref("IDBKeyRange")}}
+- Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}
+- Manipuler des curseurs : {{domxref("IDBCursor")}}
+- Exemple de référence pour IndexedDB : [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages)
diff --git a/files/fr/web/api/idbfactory/open/index.md b/files/fr/web/api/idbfactory/open/index.md
index 1bc014016e..04d42ffe9c 100644
--- a/files/fr/web/api/idbfactory/open/index.md
+++ b/files/fr/web/api/idbfactory/open/index.md
@@ -9,82 +9,66 @@ tags:
   - Reference
 translation_of: Web/API/IDBFactory/open
 ---
-<div>{{APIRef("IndexedDB")}}</div>
+{{APIRef("IndexedDB")}}
 
-<p>La méthode <strong><code>open()</code></strong> de l'interface {{domxref("IDBFactory")}} lance une requête pour ouvrir une <a href="/fr/docs/Web/API/API_IndexedDB#Se_connecter_à_la_base_de_données">connexion à une base de données</a>.</p>
+La méthode **`open()`** de l'interface {{domxref("IDBFactory")}} lance une requête pour ouvrir une [connexion à une base de données](/fr/docs/Web/API/API_IndexedDB#Se_connecter_à_la_base_de_données).
 
-<p>La méthode renvoie immédiatement un objet {{domxref("IDBOpenDBRequest")}} puis effectue l'opération d'ouverture de façon asynchrone. Si l'opération réussit, un évènement <code>success</code> sera éms sur l'objet <code>IDBOpenDBRequest</code> renvoyé par la méthode, et la propriété <code>result</code> de l'évènement aura la valeur de l'objet {{domxref("IDBDatabase")}} associé à la connexion.</p>
+La méthode renvoie immédiatement un objet {{domxref("IDBOpenDBRequest")}} puis effectue l'opération d'ouverture de façon asynchrone. Si l'opération réussit, un évènement `success` sera éms sur l'objet `IDBOpenDBRequest` renvoyé par la méthode, et la propriété `result` de l'évènement aura la valeur de l'objet {{domxref("IDBDatabase")}} associé à la connexion.
 
-<p>Si une erreur se produit lors de la connexion, un évènement <code>error</code> sera émis sur l'objet <code>IDBOpenDBRequest</code> renvoyé par la méthode.</p>
+Si une erreur se produit lors de la connexion, un évènement `error` sera émis sur l'objet `IDBOpenDBRequest` renvoyé par la méthode.
 
-<p>Cette méthode peut également émettre les évènements <code>upgradeneeded</code>, <code>blocked</code> ou <code>versionchange</code>.</p>
+Cette méthode peut également émettre les évènements `upgradeneeded`, `blocked` ou `versionchange`.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>La syntaxe standard est la suivante :</p>
+La syntaxe standard est la suivante :
 
-<pre class="syntaxbox">var <em>IDBOpenDBRequest</em> = <em>indexedDB</em>.open(<em>nom</em>);
-var <em>IDBOpenDBRequest</em> = <em>indexedDB</em>.open(<em>nom</em>, <em>version</em>);
-</pre>
+    var IDBOpenDBRequest = indexedDB.open(nom);
+    var IDBOpenDBRequest = indexedDB.open(nom, version);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>nom</code></dt>
- <dd>Le nom de la base de données qu'on souhaite ouvrir.</dd>
- <dt><code>version</code> {{optional_inline}}</dt>
- <dd>Paramètre optionnel qui représente la version de la base de données qu'on veut ouvrir. Si ce paramètre n'est pas fourni et que la base de données existe, une connexion sera ouverte sans changer la version de la base de données. Si ce paramètre n'est pas fourni est que la base de données n'existe pas, elle sera créée avec une version <code>1</code>.</dd>
-</dl>
+- `nom`
+  - : Le nom de la base de données qu'on souhaite ouvrir.
+- `version` {{optional_inline}}
+  - : Paramètre optionnel qui représente la version de la base de données qu'on veut ouvrir. Si ce paramètre n'est pas fourni et que la base de données existe, une connexion sera ouverte sans changer la version de la base de données. Si ce paramètre n'est pas fourni est que la base de données n'existe pas, elle sera créée avec une version `1`.
 
-<h4 id="Objet_options_expérimental_de_Gecko">Objet options expérimental de Gecko</h4>
+#### Objet options expérimental de Gecko
 
-<dl>
- <dt><code>options</code> (<code>version</code> et <code>storage</code>) {{optional_inline}} {{deprecated_inline}}</dt>
- <dd>Dans Gecko, à partir de <a href="/fr/Firefox/Releases/26">la version 26</a>, il est possible de passer en paramètre un objet <code>options</code> non standard, qui contienne le numéro de version de la base de données (équivalent donc au paramètre <code>version</code> définit ci-avant), et également une valeur <code>storage</code> qui décrit si on souhaite utiliser un stockage permanent (avec la valeur <code>persistent</code>) ou un stockage temporaire (avec la valeur <code>temporary</code>).
- <div class="warning">
-  <p><strong>Attention :</strong> l’attribut <code>storage</code> est déprécié et sera prochainement retiré de Gecko. Vous devriez utiliser {{domxref("StorageManager.persist()")}} à la place pour obtenir un stockage persistant.</p>
- </div>
- </dd>
-</dl>
+- `options` (`version` et `storage`) {{optional_inline}} {{deprecated_inline}}
 
-<div class="note">
-<p><strong>Note :</strong> Vous pouvez consulter l'article <a href="/fr/docs/Web/API/API_IndexedDB/Browser_storage_limits_and_eviction_criteria">les limites de stockage du navigateur et les critères d'éviction</a> pour en savoir plus sur les différents types de stockage disponibles et la façon dont Firefox gère les données côté client.</p>
-</div>
+  - : Dans Gecko, à partir de [la version 26](/fr/Firefox/Releases/26), il est possible de passer en paramètre un objet `options` non standard, qui contienne le numéro de version de la base de données (équivalent donc au paramètre `version` définit ci-avant), et également une valeur `storage` qui décrit si on souhaite utiliser un stockage permanent (avec la valeur `persistent`) ou un stockage temporaire (avec la valeur `temporary`).
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+    > **Attention :** l’attribut `storage` est déprécié et sera prochainement retiré de Gecko. Vous devriez utiliser {{domxref("StorageManager.persist()")}} à la place pour obtenir un stockage persistant.
 
-<p>Un objet {{domxref("IDBOpenDBRequest")}} sur lequel sont déclenchés les différents évènements liés à cette requête.</p>
+> **Note :** Vous pouvez consulter l'article [les limites de stockage du navigateur et les critères d'éviction](/fr/docs/Web/API/API_IndexedDB/Browser_storage_limits_and_eviction_criteria) pour en savoir plus sur les différents types de stockage disponibles et la façon dont Firefox gère les données côté client.
 
-<h3 id="Exceptions">Exceptions</h3>
+### Valeur de retour
 
-<p>Cette méthode peut lever une {{domxref("DOMException")}} de type suivant :</p>
+Un objet {{domxref("IDBOpenDBRequest")}} sur lequel sont déclenchés les différents évènements liés à cette requête.
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Exception</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>TypeError</code></td>
-   <td>La valeur de version est zéro ou un nombre négatif ou n’est pas un nombre.</td>
-  </tr>
- </tbody>
-</table>
+### Exceptions
 
-<h2 id="Exemples">Exemples</h2>
+Cette méthode peut lever une {{domxref("DOMException")}} de type suivant :
 
-<p>Voici un exemple d'ouverture de la base de données <code>toDoList</code> en utilisant la syntaxe standard et le paramètre <code>version</code> :</p>
+| Exception   | Description                                                                |
+| ----------- | -------------------------------------------------------------------------- |
+| `TypeError` | La valeur de version est zéro ou un nombre négatif ou n’est pas un nombre. |
 
-<pre class="brush: js">var request = window.indexedDB.open("toDoList", 4);</pre>
+## Exemples
 
-<p>Dans le fragment de code qui suit, on effectue une requête pour ouvrir une base de données et on inclut des gestionnaires d'évènements pour gérer la réussite ou l'échec de l'ouverture. Pour consulter un exemple fonctionnel complet, vous pouvez étudier notre application <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">cf. l'exemple <em>live</em></a>).</p>
+Voici un exemple d'ouverture de la base de données `toDoList` en utilisant la syntaxe standard et le paramètre `version` :
 
-<pre class="brush:js">var note = document.querySelector("ul");
+```js
+var request = window.indexedDB.open("toDoList", 4);
+```
+
+Dans le fragment de code qui suit, on effectue une requête pour ouvrir une base de données et on inclut des gestionnaires d'évènements pour gérer la réussite ou l'échec de l'ouverture. Pour consulter un exemple fonctionnel complet, vous pouvez étudier notre application [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages) ([cf. l'exemple _live_](https://mdn.github.io/to-do-notifications/)).
+
+```js
+var note = document.querySelector("ul");
 
 window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
 // NE PAS utiliser "var indexedDB = ..." si on n’est pas dans une fonction.
@@ -99,54 +83,37 @@ var DBOpenRequest = window.indexedDB.open("toDoList", 4);
 // On ajoute deux gestionnaires d'évènements
 // Le premier utilisé en cas d'échec
 DBOpenRequest.onerror = function(event) {
-  note.innerHTML += '&lt;li&gt;Erreur lors du chargement de la base.&lt;/li&gt;';
+  note.innerHTML += '<li>Erreur lors du chargement de la base.</li>';
 };
 
 // Et le second en cas de réussite
 DBOpenRequest.onsuccess = function(event) {
-  note.innerHTML += '&lt;li&gt;Base de données initialisée.&lt;/li&gt;';
+  note.innerHTML += '<li>Base de données initialisée.</li>';
 
   // On stocke le résultat de l'ouverture dans la
   // variable db qui sera utilisée par la suite
   // pour d'autres opérations
   db = DBOpenRequest.result;
 };
-</pre>
-
-<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('IndexedDB', '#widl-IDBFactory-open-IDBOpenDBRequest-DOMString-name-unsigned-long-long-version', 'open()')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName("IndexedDB 2", "#dom-idbfactory-open", "open()")}}</td>
-   <td>{{Spec2("IndexedDB 2")}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.IDBFactory.open")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
- <li>Démarrer des transactions : {{domxref("IDBDatabase")}}</li>
- <li>Manipuler des transactions : {{domxref("IDBTransaction")}}</li>
- <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
- <li>Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}</li>
- <li>Manipuler des curseurs : {{domxref("IDBCursor")}}</li>
- <li>Exemple de référence pour IndexedDB : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a></li>
-</ul>
+```
+
+## Spécifications
+
+| Spécification                                                                                                                                                    | État                             | Commentaires |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ |
+| {{SpecName('IndexedDB', '#widl-IDBFactory-open-IDBOpenDBRequest-DOMString-name-unsigned-long-long-version', 'open()')}} | {{Spec2('IndexedDB')}}     |              |
+| {{SpecName("IndexedDB 2", "#dom-idbfactory-open", "open()")}}                                                                                 | {{Spec2("IndexedDB 2")}} |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.IDBFactory.open")}}
+
+## Voir aussi
+
+- [Utiliser IndexedDB](/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB)
+- Démarrer des transactions : {{domxref("IDBDatabase")}}
+- Manipuler des transactions : {{domxref("IDBTransaction")}}
+- Définir un intervalle de clés : {{domxref("IDBKeyRange")}}
+- Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}
+- Manipuler des curseurs : {{domxref("IDBCursor")}}
+- Exemple de référence pour IndexedDB : [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages)
diff --git a/files/fr/web/api/idbindex/count/index.md b/files/fr/web/api/idbindex/count/index.md
index 82d71e4b0c..67259dd4f7 100644
--- a/files/fr/web/api/idbindex/count/index.md
+++ b/files/fr/web/api/idbindex/count/index.md
@@ -9,66 +9,65 @@ tags:
   - Reference
 translation_of: Web/API/IDBIndex/count
 ---
-<div>{{APIRef("IndexedDB")}}</div>
+{{APIRef("IndexedDB")}}
 
-<p>La méthode <strong><code>count()</code></strong>, rattachée à l'interface {{domxref("IDBIndex")}}, renvoie un objet {{domxref("IDBRequest")}} et, dans un <em>thread</em> séparé, renvoie le nombre d'enregistrements contenu dans un intervalle de clé.</p>
+La méthode **`count()`**, rattachée à l'interface {{domxref("IDBIndex")}}, renvoie un objet {{domxref("IDBRequest")}} et, dans un _thread_ séparé, renvoie le nombre d'enregistrements contenu dans un intervalle de clé.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var <em>request</em> = <em>monIndex</em>.count();
-var <em>request</em> = <em>monIndex</em>.count(<em>cle</em>);</pre>
+    var request = monIndex.count();
+    var request = monIndex.count(cle);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>cle</code> {{optional_inline}}</dt>
- <dd>La clé ou l'intervalle de clé qui définit les enregistrements qu'on souhaite compter.</dd>
-</dl>
+- `cle` {{optional_inline}}
+  - : La clé ou l'intervalle de clé qui définit les enregistrements qu'on souhaite compter.
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Un objet {{domxref("IDBRequest")}} sur lequel seront déclenchés les différents évènements relatifs à l'opération.</p>
+Un objet {{domxref("IDBRequest")}} sur lequel seront déclenchés les différents évènements relatifs à l'opération.
 
-<h3 id="Exceptions">Exceptions</h3>
+### Exceptions
 
-<p>Cette méthode peut déclencher différents types d'exceptions :</p>
+Cette méthode peut déclencher différents types d'exceptions :
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Exception</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>TransactionInactiveError</code></td>
-   <td>La transaction associée à cet index est inactive.</td>
-  </tr>
-  <tr>
-   <td><code>DataError</code></td>
-   <td>
-    <p>La clé ou l'intervalle de clé fourni possède une clé invalide.</p>
-   </td>
-  </tr>
-  <tr>
-   <td><code>InvalidStateError</code></td>
-   <td>L'index a été supprimé ou retiré.</td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th scope="col">Exception</th>
+      <th scope="col">Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>TransactionInactiveError</code></td>
+      <td>La transaction associée à cet index est inactive.</td>
+    </tr>
+    <tr>
+      <td><code>DataError</code></td>
+      <td>
+        <p>La clé ou l'intervalle de clé fourni possède une clé invalide.</p>
+      </td>
+    </tr>
+    <tr>
+      <td><code>InvalidStateError</code></td>
+      <td>L'index a été supprimé ou retiré.</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans l'exemple qui suit, on ouvre une transaction et un magasin d'objets puis on récupère l'index <code>lName</code> depuis une base de données de contacts. Ensuite, on ouvre un curseur simple sur cet index grâce à la méthode {{domxref("IDBIndex.openCursor")}} (ce qui fonctionne comme si on ouvrait un curseur sur le magasin d'objets avec {{domxref("IDBObjectStore.openCursor")}} sauf que les enregistrements sont ici triés selon l'index plutôt que selon la clé primaire).</p>
+Dans l'exemple qui suit, on ouvre une transaction et un magasin d'objets puis on récupère l'index `lName` depuis une base de données de contacts. Ensuite, on ouvre un curseur simple sur cet index grâce à la méthode {{domxref("IDBIndex.openCursor")}} (ce qui fonctionne comme si on ouvrait un curseur sur le magasin d'objets avec {{domxref("IDBObjectStore.openCursor")}} sauf que les enregistrements sont ici triés selon l'index plutôt que selon la clé primaire).
 
-<p><code>myIndex.count()</code> est alors utilisé afin de compter le nombre d'enregistrements dans l'index et le résultat de la requête est affiché dans la console au travers du gestionnaire d'évènements pour la réussite (<code>onsuccess</code>).</p>
+`myIndex.count()` est alors utilisé afin de compter le nombre d'enregistrements dans l'index et le résultat de la requête est affiché dans la console au travers du gestionnaire d'évènements pour la réussite (`onsuccess`).
 
-<p>Efin, on parcourt chaque enregistrement pour l'insérer dans un tableau HTML. Pour consulter un exemple fonctionnel complet, vous pouvez vous référer à notre dépôt <a href="https://github.com/mdn/IDBIndex-example">IDBIndex-example</a> (<a href="https://mdn.github.io/IDBIndex-example/">cf. la démonstration <em>live</em></a>).</p>
+Efin, on parcourt chaque enregistrement pour l'insérer dans un tableau HTML. Pour consulter un exemple fonctionnel complet, vous pouvez vous référer à notre dépôt [IDBIndex-example](https://github.com/mdn/IDBIndex-example) ([cf. la démonstration _live_](https://mdn.github.io/IDBIndex-example/)).
 
-<pre class="brush: js">function displayDataByIndex() {
+```js
+function displayDataByIndex() {
   tableEntry.innerHTML = '';
   var transaction = db.transaction(['contactsList'], 'readonly');
   var objectStore = transaction.objectStore('contactsList');
@@ -83,14 +82,14 @@ var <em>request</em> = <em>monIndex</em>.count(<em>cle</em>);</pre>
     var cursor = event.target.result;
     if(cursor) {
       var tableRow = document.createElement('tr');
-      tableRow.innerHTML =   '&lt;td&gt;' + cursor.value.id + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.lName + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.fName + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.jTitle + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.company + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.eMail + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.phone + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.age + '&lt;/td&gt;';
+      tableRow.innerHTML =   '<td>' + cursor.value.id + '</td>'
+                           + '<td>' + cursor.value.lName + '</td>'
+                           + '<td>' + cursor.value.fName + '</td>'
+                           + '<td>' + cursor.value.jTitle + '</td>'
+                           + '<td>' + cursor.value.company + '</td>'
+                           + '<td>' + cursor.value.eMail + '</td>'
+                           + '<td>' + cursor.value.phone + '</td>'
+                           + '<td>' + cursor.value.age + '</td>';
       tableEntry.appendChild(tableRow);
 
       cursor.continue();
@@ -98,45 +97,26 @@ var <em>request</em> = <em>monIndex</em>.count(<em>cle</em>);</pre>
       console.log('Éléments affichés.');
     }
   };
-};</pre>
+};
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<dl>
-</dl>
+| Spécification                                                                                            | État                             | Commentaires |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ |
+| {{SpecName('IndexedDB', '#widl-IDBIndex-count-IDBRequest-any-key', 'count()')}} | {{Spec2('IndexedDB')}}     |              |
+| {{SpecName("IndexedDB 2", "#dom-idbindex-count", "count()")}}                         | {{Spec2("IndexedDB 2")}} |              |
 
-<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('IndexedDB', '#widl-IDBIndex-count-IDBRequest-any-key', 'count()')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName("IndexedDB 2", "#dom-idbindex-count", "count()")}}</td>
-   <td>{{Spec2("IndexedDB 2")}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.IDBIndex.count")}}</p>
+{{Compat("api.IDBIndex.count")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Manipuler IndexedDB</a></li>
- <li>Démarrer des transactions : {{domxref("IDBDatabase")}}</li>
- <li>Manipuler des transactions : {{domxref("IDBTransaction")}}</li>
- <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
- <li>Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}</li>
- <li>Manipuler des curseurs : {{domxref("IDBCursor")}}</li>
- <li>Exemple de référence pour IndexedDB : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a></li>
-</ul>
+- [Manipuler IndexedDB](/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB)
+- Démarrer des transactions : {{domxref("IDBDatabase")}}
+- Manipuler des transactions : {{domxref("IDBTransaction")}}
+- Définir un intervalle de clés : {{domxref("IDBKeyRange")}}
+- Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}
+- Manipuler des curseurs : {{domxref("IDBCursor")}}
+- Exemple de référence pour IndexedDB : [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages)
diff --git a/files/fr/web/api/idbindex/get/index.md b/files/fr/web/api/idbindex/get/index.md
index f5cbe56570..0fa82fd05a 100644
--- a/files/fr/web/api/idbindex/get/index.md
+++ b/files/fr/web/api/idbindex/get/index.md
@@ -3,52 +3,47 @@ title: IDBIndex.get()
 slug: Web/API/IDBIndex/get
 translation_of: Web/API/IDBIndex/get
 ---
-<p>{{ APIRef("IndexedDB") }}</p>
+{{ APIRef("IndexedDB") }}
 
-<div>
-<p>La méthode <strong><code>get()</code></strong> de l'interface {{domxref("IDBIndex")}} fait une requête ({{domxref("IDBRequest")}}) pour renvoyer le premier enregistrement correspondant à la clé ou l'intervalle de clé {{domxref("IDBKeyRange","")}} du magasin d'objet suivant l'index.</p>
-</div>
+La méthode **`get()`** de l'interface {{domxref("IDBIndex")}} fait une requête ({{domxref("IDBRequest")}}) pour renvoyer le premier enregistrement correspondant à la clé ou l'intervalle de clé {{domxref("IDBKeyRange","")}} du magasin d'objet suivant l'index.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">var request = myIndex.get(key);</pre>
+```js
+var request = myIndex.get(key);
+```
 
-<h2 id="Paramètre">Paramètre</h2>
+## Paramètre
 
-<dl>
- <dt><code>key</code></dt>
- <dd>la clé ou l'intervalle de clé ({{domxref("IDBKeyRange")}}) de l'enregistrement dont on cherche la valeur.</dd>
-</dl>
+- `key`
+  - : la clé ou l'intervalle de clé ({{domxref("IDBKeyRange")}}) de l'enregistrement dont on cherche la valeur.
 
-<h2 id="Valeur_de_retour">Valeur de retour</h2>
+## Valeur de retour
 
-<dl>
- <dt>Une requête ({{domxref("IDBRequest")}})</dt>
- <dd>La propriété "result" ({{domxref("IDBRequest.result")}}) de cette requête renvoie en cas de succès le premier enregistrement correspondant à la clé ou à l'intervalle de clé. Le résultat contient l'enregistrement { key: la clé, value: un_clone_structuré_de_la_valeur }.</dd>
-</dl>
+- Une requête ({{domxref("IDBRequest")}})
+  - : La propriété "result" ({{domxref("IDBRequest.result")}}) de cette requête renvoie en cas de succès le premier enregistrement correspondant à la clé ou à l'intervalle de clé. Le résultat contient l'enregistrement { key: la clé, value: un_clone_structuré_de_la_valeur }.
 
-<h2 id="Exceptions">Exceptions</h2>
+## Exceptions
 
-<dl>
- <dt><code>TransactionInactiveError</code></dt>
- <dd>Cette exception ( {{domxref("DOMException")}}) est levée si la transaction ({{domxref("IDBTransaction")}}) dont dépend l'accès ({{domxref("IDBObjectStore")}}) au magasin d'objet de cet index est inactive.</dd>
- <dt><code>DataError</code></dt>
- <dd>Cette exception ({{domxref("DOMException")}}) est levée si la clé ou l'intervalle de clé ({{domxref("IDBKeyRange")}}) est invalide.</dd>
- <dt><code>InvalidStateError</code></dt>
- <dd>Cette exception ({{domxref("DOMException")}}) est levée si l'index à été supprimé.</dd>
-</dl>
+- `TransactionInactiveError`
+  - : Cette exception ( {{domxref("DOMException")}}) est levée si la transaction ({{domxref("IDBTransaction")}}) dont dépend l'accès ({{domxref("IDBObjectStore")}}) au magasin d'objet de cet index est inactive.
+- `DataError`
+  - : Cette exception ({{domxref("DOMException")}}) est levée si la clé ou l'intervalle de clé ({{domxref("IDBKeyRange")}}) est invalide.
+- `InvalidStateError`
+  - : Cette exception ({{domxref("DOMException")}}) est levée si l'index à été supprimé.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Dans l'exemple suivant on ouvre une transaction puis un magasin d'objet et enfin l'index <code>lName</code>.</p>
+Dans l'exemple suivant on ouvre une transaction puis un magasin d'objet et enfin l'index `lName`.
 
-<p>Le code <code>myIndex.get('Bungle')</code> renvoie une requête qui cherche sur l'index un enregistrement dont la clé <code>lName</code> est <code>Bungle</code>. En cas de sucés le résultat de la requête qui contient l'enregistrement est affiché sur la console.</p>
+Le code `myIndex.get('Bungle')` renvoie une requête qui cherche sur l'index un enregistrement dont la clé `lName` est `Bungle`. En cas de sucés le résultat de la requête qui contient l'enregistrement est affiché sur la console.
 
-<p>Finalement, on itère sur tous les enregistrements pour en insérer les données dans un tableau HTML. En utilisant la méthode {{domxref("IDBIndex.openCursor")}} qui travaille de la même façon que la méthode {{domxref("IDBObjectStore.openCursor")}} de l'accès ({{domxref("IDBObjectStore")}}) au magasin d'objet sauf que les enregistrements sont renvoyés dans l'ordre de l'index et non celui du magasin d'objet.</p>
+Finalement, on itère sur tous les enregistrements pour en insérer les données dans un tableau HTML. En utilisant la méthode {{domxref("IDBIndex.openCursor")}} qui travaille de la même façon que la méthode {{domxref("IDBObjectStore.openCursor")}} de l'accès ({{domxref("IDBObjectStore")}}) au magasin d'objet sauf que les enregistrements sont renvoyés dans l'ordre de l'index et non celui du magasin d'objet.
 
-<pre class="brush:js">function displayDataByIndex() {
+```js
+function displayDataByIndex() {
   tableEntry.innerHTML = '';
 
   //ouvre un transaction
@@ -70,14 +65,14 @@ translation_of: Web/API/IDBIndex/get
     var cursor = event.target.result;
     if(cursor) {
       var tableRow = document.createElement('tr');
-      tableRow.innerHTML =   '&lt;td&gt;' + cursor.value.id + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.lName + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.fName + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.jTitle + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.company + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.eMail + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.phone + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.age + '&lt;/td&gt;';
+      tableRow.innerHTML =   '<td>' + cursor.value.id + '</td>'
+                           + '<td>' + cursor.value.lName + '</td>'
+                           + '<td>' + cursor.value.fName + '</td>'
+                           + '<td>' + cursor.value.jTitle + '</td>'
+                           + '<td>' + cursor.value.company + '</td>'
+                           + '<td>' + cursor.value.eMail + '</td>'
+                           + '<td>' + cursor.value.phone + '</td>'
+                           + '<td>' + cursor.value.age + '</td>';
       tableEntry.appendChild(tableRow);
 
       cursor.continue();
@@ -85,39 +80,27 @@ translation_of: Web/API/IDBIndex/get
       console.log('Tous les enregistrements ont été affichés.');
     }
   };
-};</pre>
-
-<div class="note"><p><strong>Note :</strong> Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>).</p></div>
-
-<h2 id="Spécification">Spécification</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('IndexedDB', '#widl-IDBIndex-get-IDBRequest-any-key', 'get()')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité avec les navigateurs</h2>
-
-<p>{{Compat("api.IDBIndex.get")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("IndexedDB_API.Using_IndexedDB","Utiliser IndexedDB")}}</li>
- <li>{{domxref("IDBDatabase","Débuter une connexion")}}</li>
- <li>{{domxref("IDBTransaction","Utilisé les transactions")}}</li>
- <li>{{domxref("IDBKeyRange","Définir l'intervalle des clés")}}</li>
- <li>{{domxref("IDBObjectStore","Accès aux magasins d'objets")}}</li>
- <li>{{domxref("IDBCursor","Utiliser les curseur")}}</li>
- <li>Exemple de référence: <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li>
-</ul>
+};
+```
+
+> **Note :** Pour un exemple de travail complet, voir notre [To-do Notifications](https://github.com/mdn/to-do-notifications/) app ([view example live](http://mdn.github.io/to-do-notifications/)).
+
+## Spécification
+
+| Spécification                                                                                        | Ètat                         | Commentaires |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------- | ------------ |
+| {{SpecName('IndexedDB', '#widl-IDBIndex-get-IDBRequest-any-key', 'get()')}} | {{Spec2('IndexedDB')}} |              |
+
+## Compatibilité avec les navigateurs
+
+{{Compat("api.IDBIndex.get")}}
+
+## Voir aussi
+
+- {{domxref("IndexedDB_API.Using_IndexedDB","Utiliser IndexedDB")}}
+- {{domxref("IDBDatabase","Débuter une connexion")}}
+- {{domxref("IDBTransaction","Utilisé les transactions")}}
+- {{domxref("IDBKeyRange","Définir l'intervalle des clés")}}
+- {{domxref("IDBObjectStore","Accès aux magasins d'objets")}}
+- {{domxref("IDBCursor","Utiliser les curseur")}}
+- Exemple de référence: [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages) ([view example live](http://mdn.github.io/to-do-notifications/).)
diff --git a/files/fr/web/api/idbindex/getall/index.md b/files/fr/web/api/idbindex/getall/index.md
index f9ed6d0d8f..caa5d1d798 100644
--- a/files/fr/web/api/idbindex/getall/index.md
+++ b/files/fr/web/api/idbindex/getall/index.md
@@ -9,52 +9,45 @@ tags:
   - Reference
 translation_of: Web/API/IDBIndex/getAll
 ---
-<p>{{ APIRef("IndexedDB") }}</p>
+{{ APIRef("IndexedDB") }}
 
-<div>
-<p>La méthode <strong><code>getAll()</code></strong> de l'interface {{domxref("IDBIndex")}} fait une requête ({{domxref("IDBRequest")}}) qui renvoie un tableau ordonné suivant les clés, des clones structurés des enregistrements de l'index relié ({{domxref("IDBIndex")}}). On peut limiter le nombre d'enregistrements en les filtrant suivant leurs clés ou en paramétrant le compteur.</p>
-</div>
+La méthode **`getAll()`** de l'interface {{domxref("IDBIndex")}} fait une requête ({{domxref("IDBRequest")}}) qui renvoie un tableau ordonné suivant les clés, des clones structurés des enregistrements de l'index relié ({{domxref("IDBIndex")}}). On peut limiter le nombre d'enregistrements en les filtrant suivant leurs clés ou en paramétrant le compteur.
 
-<p>On peut comparer cette méthode avec une recherche par curseur. Effectivement, il est plus intéressant si l'on veut accéder aux enregistrements un par un d'utiliser un {{domxref("IDBCursor","curseur")}}, les clones structurés des valeurs seront faits un par un. Mais si l'on veut un tableau des clones structurés des valeurs il vaut mieux utiliser <code>getAll()</code>, le moteur Gecko fera les clones structurés en une seule fois.</p>
+On peut comparer cette méthode avec une recherche par curseur. Effectivement, il est plus intéressant si l'on veut accéder aux enregistrements un par un d'utiliser un {{domxref("IDBCursor","curseur")}}, les clones structurés des valeurs seront faits un par un. Mais si l'on veut un tableau des clones structurés des valeurs il vaut mieux utiliser `getAll()`, le moteur Gecko fera les clones structurés en une seule fois.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var getAllKeysRequest = IDBIndex.getAll();
-var getAllKeysRequest = IDBIndex.getAll(query);
-var getAllKeysRequest = IDBIndex.getAll(query, count);</pre>
+    var getAllKeysRequest = IDBIndex.getAll();
+    var getAllKeysRequest = IDBIndex.getAll(query);
+    var getAllKeysRequest = IDBIndex.getAll(query, count);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt>query {{optional_inline}}</dt>
- <dd>Une clé ou un intervalle de clé ({{domxref("IDBKeyRange")}}) <strong>pour filtrer</strong>, seules les valeurs des enregistrements correspondant sont renvoyées. Par défaut toutes les clones structurés des enregistrements de l'index relié sont renvoyés.</dd>
- <dt>count {{optional_inline}}</dt>
- <dd>Le nombre d'enregistrement <strong>maximum renvoyés</strong>. Un nombre décimal sera tronqué. Zéro annule le compteur et toutes les valeurs sont retournées.</dd>
-</dl>
+- query {{optional_inline}}
+  - : Une clé ou un intervalle de clé ({{domxref("IDBKeyRange")}}) **pour filtrer**, seules les valeurs des enregistrements correspondant sont renvoyées. Par défaut toutes les clones structurés des enregistrements de l'index relié sont renvoyés.
+- count {{optional_inline}}
+  - : Le nombre d'enregistrement **maximum renvoyés**. Un nombre décimal sera tronqué. Zéro annule le compteur et toutes les valeurs sont retournées.
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+### Valeur de retour
 
-<dl>
- <dt>{{domxref("IDBRequest")}}</dt>
- <dd>La propriété {{domxref("IDBRequest.result","result")}} de cette requête renvoie le tableau des clones structurés des enregistrements en cas de succès.</dd>
-</dl>
+- {{domxref("IDBRequest")}}
+  - : La propriété {{domxref("IDBRequest.result","result")}} de cette requête renvoie le tableau des clones structurés des enregistrements en cas de succès.
 
-<h3 id="Exceptions">Exceptions</h3>
+### Exceptions
 
-<dl>
- <dt><code>TransactionInactiveError</code></dt>
- <dd>Cette {{domxref("DOMException","exception")}} est levée si la transaction ({{domxref("IDBTransaction")}}) est inactive.</dd>
- <dt><code>DataError</code></dt>
- <dd>Cette exception ({{domxref("DOMException")}}) est levée si la clé ou l'intervalle de clé ({{domxref("IDBKeyRange")}}) est invalide.</dd>
- <dt><code>InvalidStateError</code></dt>
- <dd>Cette exception ({{domxref("DOMException")}}) est levée si l'index à été supprimé.</dd>
- <dt><code>TypeError</code></dt>
- <dd>Cette exception ({{domxref("DOMException")}}) est levée si le compteur n'est pas un nombre positif.</dd>
-</dl>
+- `TransactionInactiveError`
+  - : Cette {{domxref("DOMException","exception")}} est levée si la transaction ({{domxref("IDBTransaction")}}) est inactive.
+- `DataError`
+  - : Cette exception ({{domxref("DOMException")}}) est levée si la clé ou l'intervalle de clé ({{domxref("IDBKeyRange")}}) est invalide.
+- `InvalidStateError`
+  - : Cette exception ({{domxref("DOMException")}}) est levée si l'index à été supprimé.
+- `TypeError`
+  - : Cette exception ({{domxref("DOMException")}}) est levée si le compteur n'est pas un nombre positif.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: js">//on récupère l’accès à l'index
+```js
+//on récupère l’accès à l'index
 var myIndex = objectStore.index('index');
 //on fait une requête de recherche sur l'index
 var getAllKeyRequest = myIndex.getAllKeys();
@@ -63,39 +56,25 @@ getAllKeysRequest.onsuccess = function() {
   //on affiche le résultat sur la console
   //~= [{key:'a',value:un_clone_structuré},{key:'2',value:un_clone_structuré},...]
   console.log(getAllKeysRequest.result);
-}</pre>
-
-<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('IndexedDB2', '#dom-idbindex-getall', 'getAll()')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-
-
-<p>{{Compat("api.IDBIndex.getAll")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("IndexedDB_API.Using_IndexedDB","Utiliser IndexedDB")}}</li>
- <li>{{domxref("IDBDatabase","Débuter une connexion")}}</li>
- <li>{{domxref("IDBTransaction","Utilisé les transactions")}}</li>
- <li>{{domxref("IDBKeyRange","Définir l'intervalle des clés")}}</li>
- <li>{{domxref("IDBObjectStore","Accès aux magasins d'objets")}}</li>
- <li>{{domxref("IDBCursor","Utiliser les curseur")}}</li>
- <li>Exemple de référence: <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li>
-</ul>
+}
+```
+
+## Spécifications
+
+| Spécification                                                                        | État                         | Commentaires         |
+| ------------------------------------------------------------------------------------ | ---------------------------- | -------------------- |
+| {{SpecName('IndexedDB2', '#dom-idbindex-getall', 'getAll()')}} | {{Spec2('IndexedDB')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.IDBIndex.getAll")}}
+
+## Voir aussi
+
+- {{domxref("IndexedDB_API.Using_IndexedDB","Utiliser IndexedDB")}}
+- {{domxref("IDBDatabase","Débuter une connexion")}}
+- {{domxref("IDBTransaction","Utilisé les transactions")}}
+- {{domxref("IDBKeyRange","Définir l'intervalle des clés")}}
+- {{domxref("IDBObjectStore","Accès aux magasins d'objets")}}
+- {{domxref("IDBCursor","Utiliser les curseur")}}
+- Exemple de référence: [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages) ([view example live](http://mdn.github.io/to-do-notifications/).)
diff --git a/files/fr/web/api/idbindex/getallkeys/index.md b/files/fr/web/api/idbindex/getallkeys/index.md
index fd13fd5758..7d0796880d 100644
--- a/files/fr/web/api/idbindex/getallkeys/index.md
+++ b/files/fr/web/api/idbindex/getallkeys/index.md
@@ -9,94 +9,63 @@ tags:
   - Reference
 translation_of: Web/API/IDBIndex/getAllKeys
 ---
-<div>{{APIRef("IndexedDB")}}</div>
-
-<p>La méthode <strong><code>getAllKeys()</code></strong>, rattachée à l'interface {{domxref("IDBIndex")}}, permet de récupérer les clés de tous les objets contenus dans l'index et de les enregistrer dans la propriété <code>result</code> de l'objet renvoyé par la méthode.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">var getAllKeysRequest = <em>IDBIndex</em>.getAllKeys();
-var getAllKeysRequest = <em>IDBIndex</em>.getAllKeys(<em>requete</em>);
-var getAllKeysRequest = <em>IDBIndex</em>.getAllKeys(<em>requete</em>, <em>quantite</em>);</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>requete</code> {{optional_inline}}</dt>
- <dd>Une clé ou un intervalle de clé ({{domxref("IDBKeyRange")}}) qui identifie les clés qu'on souhaite récupérer. Si cette valeur vaut {{jsxref("null")}} ou est absente, le navigateur utilisera un intervalle de clé sans limite.</dd>
- <dt><code>quantite</code> {{optional_inline}}</dt>
- <dd>Le nombre d'enregistrements qu'on souhaite obtenir. Si cette quantité est supérieure au nombre d'enregistrements récupérés par la requête, le navigateur ne récupèrera que le premier élément. Si elle est négative ou supérieure à <code>2^32-1</code>, une exception {{jsxref("TypeError")}} sera levée.</dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un objet {{domxref("IDBRequest")}} sur lequel seront reçus les différents évènements rattachés à cette opération.</p>
-
-<h3 id="Exceptions">Exceptions</h3>
-
-<p>Cette méthode peut déclencher une des exceptions suivantes :</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Exception</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>TransactionInactiveError</code></td>
-   <td>La transaction pour cet index {{domxref("IDBIndex")}} est inactive.</td>
-  </tr>
-  <tr>
-   <td><code>InvalidStateError</code></td>
-   <td>L'index {{domxref("IDBIndex")}} a été supprimé ou déplacé.</td>
-  </tr>
-  <tr>
-   <td>{{jsxref("TypeError")}}</td>
-   <td>Le paramètre <code>quantite</code> n'est pas compris entre <code>0</code> et <code>2^32-1</code></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">var myIndex = objectStore.index('index');
+{{APIRef("IndexedDB")}}
+
+La méthode **`getAllKeys()`**, rattachée à l'interface {{domxref("IDBIndex")}}, permet de récupérer les clés de tous les objets contenus dans l'index et de les enregistrer dans la propriété `result` de l'objet renvoyé par la méthode.
+
+## Syntaxe
+
+    var getAllKeysRequest = IDBIndex.getAllKeys();
+    var getAllKeysRequest = IDBIndex.getAllKeys(requete);
+    var getAllKeysRequest = IDBIndex.getAllKeys(requete, quantite);
+
+### Paramètres
+
+- `requete` {{optional_inline}}
+  - : Une clé ou un intervalle de clé ({{domxref("IDBKeyRange")}}) qui identifie les clés qu'on souhaite récupérer. Si cette valeur vaut {{jsxref("null")}} ou est absente, le navigateur utilisera un intervalle de clé sans limite.
+- `quantite` {{optional_inline}}
+  - : Le nombre d'enregistrements qu'on souhaite obtenir. Si cette quantité est supérieure au nombre d'enregistrements récupérés par la requête, le navigateur ne récupèrera que le premier élément. Si elle est négative ou supérieure à `2^32-1`, une exception {{jsxref("TypeError")}} sera levée.
+
+### Valeur de retour
+
+Un objet {{domxref("IDBRequest")}} sur lequel seront reçus les différents évènements rattachés à cette opération.
+
+### Exceptions
+
+Cette méthode peut déclencher une des exceptions suivantes :
+
+| Exception                        | Description                                                                  |
+| -------------------------------- | ---------------------------------------------------------------------------- |
+| `TransactionInactiveError`       | La transaction pour cet index {{domxref("IDBIndex")}} est inactive. |
+| `InvalidStateError`              | L'index {{domxref("IDBIndex")}} a été supprimé ou déplacé.          |
+| {{jsxref("TypeError")}} | Le paramètre `quantite` n'est pas compris entre `0` et `2^32-1`              |
+
+## Exemples
+
+```js
+var myIndex = objectStore.index('index');
 var getAllKeyRequest = myIndex.getAllKeys();
 getAllKeysRequest.onsuccess = function() {
   console.log(getAllKeysRequest.result);
 }
-</pre>
-
-<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('IndexedDB 2', '#dom-idbindex-getallkeys', 'getAll()')}}</td>
-   <td>{{Spec2('IndexedDB 2')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.IDBIndex.getAllKeys")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
- <li>Initier une connexion : {{domxref("IDBDatabase")}}</li>
- <li>Utiliser les transactions : {{domxref("IDBTransaction")}}</li>
- <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
- <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li>
- <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li>
- <li>Exemple de référence : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li>
-</ul>
+```
+
+## Spécifications
+
+| Spécification                                                                            | État                             | Commentaires         |
+| ---------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName('IndexedDB 2', '#dom-idbindex-getallkeys', 'getAll()')}} | {{Spec2('IndexedDB 2')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.IDBIndex.getAllKeys")}}
+
+## Voir aussi
+
+- [Utiliser IndexedDB](/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB)
+- Initier une connexion : {{domxref("IDBDatabase")}}
+- Utiliser les transactions : {{domxref("IDBTransaction")}}
+- Définir un intervalle de clés : {{domxref("IDBKeyRange")}}
+- Récupérer et modifier les données : {{domxref("IDBObjectStore")}}
+- Utiliser les curseurs {{domxref("IDBCursor")}}
+- Exemple de référence : [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages) ([exemple _live_](https://mdn.github.io/to-do-notifications/)).
diff --git a/files/fr/web/api/idbindex/getkey/index.md b/files/fr/web/api/idbindex/getkey/index.md
index 828f700fb9..b64e69aaff 100644
--- a/files/fr/web/api/idbindex/getkey/index.md
+++ b/files/fr/web/api/idbindex/getkey/index.md
@@ -9,68 +9,74 @@ tags:
   - Reference
 translation_of: Web/API/IDBIndex/getKey
 ---
-<div>{{APIRef("IndexedDB")}}</div>
+{{APIRef("IndexedDB")}}
 
-<p>La méthode <strong><code>getKey()</code></strong>, rattachée à l'interface {{domxref("IDBIndex")}}, renvoie un objet {{domxref("IDBRequest")}} et, dans un <em>thread</em> séparé, récupère la clé associée ou la clé primaire si l'argument passé à la fonction est un intervalle {{domxref("IDBKeyRange")}}.</p>
+La méthode **`getKey()`**, rattachée à l'interface {{domxref("IDBIndex")}}, renvoie un objet {{domxref("IDBRequest")}} et, dans un _thread_ séparé, récupère la clé associée ou la clé primaire si l'argument passé à la fonction est un intervalle {{domxref("IDBKeyRange")}}.
 
-<p>Si la méthode trouve une clé, ce sera alors la propriété <code>result</code> de la requête renvoyée. Seule la clé primaire de l'enregistrement est renvoyée (pour obtenir l'ensemble de l'enregistrement, on utilisera {{domxref("IDBIndex.get")}}).</p>
+Si la méthode trouve une clé, ce sera alors la propriété `result` de la requête renvoyée. Seule la clé primaire de l'enregistrement est renvoyée (pour obtenir l'ensemble de l'enregistrement, on utilisera {{domxref("IDBIndex.get")}}).
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">var myIndex = objectStore.index('index');
-var request = myIndex.getKey(key);</pre>
+```js
+var myIndex = objectStore.index('index');
+var request = myIndex.getKey(key);
+```
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>key</code> {{optional_inline}}</dt>
- <dd>Une clé ou un intervalle {{domxref("IDBKeyRange")}} qui identifie l'enregistrement dont on souhaite obtenir la clé. Si la valeur vaut {{jsxref("null")}} ou si elle est absente, le navigateur utilisera un intervalle de clé sans limite.</dd>
-</dl>
+- `key` {{optional_inline}}
+  - : Une clé ou un intervalle {{domxref("IDBKeyRange")}} qui identifie l'enregistrement dont on souhaite obtenir la clé. Si la valeur vaut {{jsxref("null")}} ou si elle est absente, le navigateur utilisera un intervalle de clé sans limite.
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Un objet {{domxref("IDBRequest")}} qui recevra les différents évènements relatifs à l'opération qui est déclenchée.</p>
+Un objet {{domxref("IDBRequest")}} qui recevra les différents évènements relatifs à l'opération qui est déclenchée.
 
-<h3 id="Exceptions">Exceptions</h3>
+### Exceptions
 
-<p>Cette méthode peut déclencher une exception. Celle-ci peut avoir l'un des types suivants :</p>
+Cette méthode peut déclencher une exception. Celle-ci peut avoir l'un des types suivants :
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Exception</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>TransactionInactiveError</td>
-   <td>La transaction rattachée à cet <code>IDBIndex</code> est inactive.</td>
-  </tr>
-  <tr>
-   <td><code>DataError</code></td>
-   <td>
-    <p>La clé ou l'intervalle de clés qui est fourni contient une clé invalide.</p>
-   </td>
-  </tr>
-  <tr>
-   <td><code>InvalidStateError</code></td>
-   <td>L'index a été supprimé ou déplacé.</td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th scope="col">Exception</th>
+      <th scope="col">Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>TransactionInactiveError</td>
+      <td>
+        La transaction rattachée à cet <code>IDBIndex</code> est inactive.
+      </td>
+    </tr>
+    <tr>
+      <td><code>DataError</code></td>
+      <td>
+        <p>
+          La clé ou l'intervalle de clés qui est fourni contient une clé
+          invalide.
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td><code>InvalidStateError</code></td>
+      <td>L'index a été supprimé ou déplacé.</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans l'exemple qui suit, on ouvre une transaction et un magasin d'objets. Ensuite on récupère l'index <code>lName</code> sur cette base de donnée. On ouvre alors un curseur sur l'index grâce à la méthode {{domxref("IDBIndex.openCursor")}} (cela fonctionne de la même façon que {{domxref("IDBObjectStore.openCursor")}} sauf que les enregistrements sont triés selon l'index et pas selon la clé primaire).</p>
+Dans l'exemple qui suit, on ouvre une transaction et un magasin d'objets. Ensuite on récupère l'index `lName` sur cette base de donnée. On ouvre alors un curseur sur l'index grâce à la méthode {{domxref("IDBIndex.openCursor")}} (cela fonctionne de la même façon que {{domxref("IDBObjectStore.openCursor")}} sauf que les enregistrements sont triés selon l'index et pas selon la clé primaire).
 
-<p><code>myIndex.getKey('Bungle')</code> est ensuite utilisé afin d'obtenir la clé primaire de l'enregistrement pour lequel <code>lName</code> vaut <code>Bungle</code>. Le résultat de cette requête est imprimé dans la console lorsque la fonction de rappel (<em>callback</em>) de succès est déclenché.</p>
+`myIndex.getKey('Bungle')` est ensuite utilisé afin d'obtenir la clé primaire de l'enregistrement pour lequel `lName` vaut `Bungle`. Le résultat de cette requête est imprimé dans la console lorsque la fonction de rappel (_callback_) de succès est déclenché.
 
-<p>Enfin, on parcourt les enregistrements pour remplir un tableau HTML. Le dépôt <a href="https://github.com/mdn/IDBIndex-example">IDBIndex-example </a>contient un exemple complet (<a href="https://mdn.github.io/IDBIndex-example/">ainsi qu'une démonstration</a>).</p>
+Enfin, on parcourt les enregistrements pour remplir un tableau HTML. Le dépôt [IDBIndex-example ](https://github.com/mdn/IDBIndex-example)contient un exemple complet ([ainsi qu'une démonstration](https://mdn.github.io/IDBIndex-example/)).
 
-<pre class="brush: js">function displayDataByIndex() {
+```js
+function displayDataByIndex() {
   tableEntry.innerHTML = '';
   var transaction = db.transaction(['contactsList'], 'readonly');
   var objectStore = transaction.objectStore('contactsList');
@@ -84,14 +90,14 @@ var request = myIndex.getKey(key);</pre>
     var cursor = event.target.result;
     if(cursor) {
       var tableRow = document.createElement('tr');
-      tableRow.innerHTML =   '&lt;td&gt;' + cursor.value.id + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.lName + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.fName + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.jTitle + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.company + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.eMail + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.phone + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.age + '&lt;/td&gt;';
+      tableRow.innerHTML =   '<td>' + cursor.value.id + '</td>'
+                           + '<td>' + cursor.value.lName + '</td>'
+                           + '<td>' + cursor.value.fName + '</td>'
+                           + '<td>' + cursor.value.jTitle + '</td>'
+                           + '<td>' + cursor.value.company + '</td>'
+                           + '<td>' + cursor.value.eMail + '</td>'
+                           + '<td>' + cursor.value.phone + '</td>'
+                           + '<td>' + cursor.value.age + '</td>';
       tableEntry.appendChild(tableRow);
 
       cursor.continue();
@@ -99,37 +105,25 @@ var request = myIndex.getKey(key);</pre>
       console.log('Les éléments sont affichés.');
     }
   };
-};</pre>
+};
+```
 
-<h2 id="Spécification">Spécification</h2>
+## Spécification
 
-<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('IndexedDB', '#widl-IDBIndex-getKey-IDBRequest-any-key', 'getKey()')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                | État                         | Commentaires |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------ |
+| {{SpecName('IndexedDB', '#widl-IDBIndex-getKey-IDBRequest-any-key', 'getKey()')}} | {{Spec2('IndexedDB')}} |              |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.IDBIndex.getKey")}}</p>
+{{Compat("api.IDBIndex.getKey")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
- <li>Initier une connexion : {{domxref("IDBDatabase")}}</li>
- <li>Utiliser les transactions : {{domxref("IDBTransaction")}}</li>
- <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
- <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li>
- <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li>
- <li>L'exemple de référence : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">notifications de trucs à faire</a> (<a href="https://mdn.github.io/to-do-notifications/">voir la démonstration</a>)</li>
-</ul>
+- [Utiliser IndexedDB](/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB)
+- Initier une connexion : {{domxref("IDBDatabase")}}
+- Utiliser les transactions : {{domxref("IDBTransaction")}}
+- Définir un intervalle de clés : {{domxref("IDBKeyRange")}}
+- Récupérer et modifier les données : {{domxref("IDBObjectStore")}}
+- Utiliser les curseurs {{domxref("IDBCursor")}}
+- L'exemple de référence : [notifications de trucs à faire](https://github.com/mdn/to-do-notifications/tree/gh-pages) ([voir la démonstration](https://mdn.github.io/to-do-notifications/))
diff --git a/files/fr/web/api/idbindex/index.md b/files/fr/web/api/idbindex/index.md
index 57e72be398..61568c09d2 100644
--- a/files/fr/web/api/idbindex/index.md
+++ b/files/fr/web/api/idbindex/index.md
@@ -12,64 +12,60 @@ tags:
   - TopicStub
 translation_of: Web/API/IDBIndex
 ---
-<p>{{APIRef("IndexedDB")}}</p>
-
-<div>
-<p>L'interface <strong><code>IDBIndex</code></strong>de l'{{domxref("IndexedDB_API","API IndexedDB")}} est un accès à un index d'un magasins d'objet. Un index permet de trier les enregistrements d'un magasin d'objet sur une autre clé que la clé primaire.</p>
-
-<p>Un index contient des enregistrements persistent. Chaque enregistrement est composé d'une clé ( la valeur du chemin de clé) et d'une valeur (la clé primaire de l'enregistrement dans le magasin d'objet). Les enregistrements de l'index se mettent automatiquement à jour lorsque un enregistrement du magasin d'objet est ajouté , mise à jour ou supprimé. Chaque enregistrement de l'index ne peut référer qu'a un enregistrement du magasin d'objet. Un magasin d'objet peut avoir plusieurs index et lorsque le magasin d'objet change tout les index sont mis à jour automatiquement.</p>
-
-<p>On peut retrouver les enregistrement sur une partie des clés, voir {{domxref("IDBKeyRange","intervalle de clé")}}.</p>
-
-<p>{{AvailableInWorkers}}</p>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<p>Hérite de: <a href="/en/DOM/EventTarget">EventTarget</a></p>
-
-<dl>
- <dt>{{domxref("IDBIndex.count()")}}</dt>
- <dd>Fait un {{domxref("IDBRequest","requête")}} sur l'index. La requête compte le nombre d'enregistrements dans cet index ou sur l'{{domxref("IDBKeyRange","intervalle de clé")}} passé en paramètre.</dd>
- <dt>{{domxref("IDBIndex.get()")}}</dt>
- <dd>Fait une {{domxref("IDBRequest","requête")}} pour renvoyer le premier enregistrement correspondant à la clé ou l'{{domxref("IDBKeyRange","")}} du magasin d'objet suivant l'index.</dd>
- <dt>{{domxref("IDBIndex.getKey()")}}</dt>
- <dd>Fait une {{domxref("IDBRequest","requête")}} pour renvoyer la clé primaire correspondant à la clé ou à l'{{domxref("IDBKeyRange","intervalle de clé")}} de l'index. Si une clé est trouvé le résultat de la requête contiendra seulement la clé primaire de l'enregistrement et non l'enregistrement comme le fait {{domxref("IDBIndex.get")}}.</dd>
- <dt>{{domxref("IDBIndex.getAll()")}}</dt>
- <dd>Fait une {{domxref("IDBRequest","requête")}} qui renvoie un tableau ordonné suivant les clés, des clones structurés des enregistrements de l'{{domxref("IDBIndex","index relié")}}. On peut limité le nombre d'enregistrements en les filtrants suivant leurs clés ou en paramétrant le compteur.</dd>
- <dt>{{domxref("IDBIndex.getAllKeys()")}}</dt>
- <dd>Ferrais une {{domxref("IDBRequest","requête")}} qui renverrait la liste de toutes les clés des enregistrements de l'index. On pourrait limiter le nombre d'enregistrements en les filtrants suivant leurs clés ou en paramétrant le compteur.</dd>
- <dt>{{domxref("IDBIndex.openCursor()")}}</dt>
- <dd>Fait une {{domxref("IDBRequest","requête")}} récursive suivant un {{domxref("IDBCursorWithValue","curseur avec valeur")}} qui itère l'index {{domxref("IDBObjectStore","relié")}} sur l'{{domxref("IDBKeyRange","intervalle de clé")}} spécifié.</dd>
- <dt>{{domxref("IDBIndex.openKeyCursor()")}}</dt>
- <dd>Fait une {{domxref("IDBRequest","requête")}} récursive suivant un {{domxref("IDBCursor","curseur")}} qui itère l'index {{domxref("IDBObjectStore","relié")}} sur l'{{domxref("IDBKeyRange","intervalle de clé")}} spécifié.</dd>
-</dl>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<dl>
- <dt>{{domxref("IDBIndex.isAutoLocale")}} {{readonlyInline}} {{ Non-Standard_inline() }}</dt>
- <dd>Renvoie un {{domxref("Boolean","booléen")}} indiquant si la valeur de <code>locale</code> à été paramétré sur <code>auto</code> lors de la mise en place de l'index (voir les paramètres <code>{{domxref("IDBObjectStore.createIndex")}}</code>).</dd>
- <dt>{{domxref("IDBIndex.locale")}} {{readonlyInline}} {{ Non-Standard_inline() }}</dt>
- <dd>Renvoie la localisation de l'index (par exemple fr, ou <code>en-US</code>) <code>si la localisation à été spécifie lors de la mise en place de l'index</code> (voir les paramètres {{domxref("IDBObjectStore.createIndex")}}).</dd>
- <dt>{{domxref("IDBIndex.name")}} {{readonlyInline}}</dt>
- <dd>Renvoie le nom de l'index.</dd>
- <dt>{{domxref("IDBIndex.objectStore")}} {{readonlyInline}}</dt>
- <dd>Renvoie un {{domxref("IDBObjectStore","accès au magasin d'objet")}} que référence l'index.</dd>
- <dt>{{domxref("IDBIndex.keyPath")}} {{readonlyInline}}</dt>
- <dd>Renvoie le chemin de clé de l'index. Si l'index n'est pas <a href="/fr/IndexedDB/Index#gloss_auto-populated">automatiquement mise à jour</a> la propriété vaux <code>null</code>.</dd>
- <dt>{{domxref("IDBIndex.multiEntry")}} {{readonlyInline}}</dt>
- <dd>Renvoie un {{domxref("Boolean","booléen")}} qui indique comment l'index gère le chemin de clé si c'est un tableau.</dd>
- <dt>{{domxref("IDBIndex.unique")}} {{readonlyInline}}</dt>
- <dd>Renvoie un {{domxref("Boolean","booléen")}} qui indique l'index interdit la duplication d'enregistrement sur sa clé.</dd>
-</dl>
-
-<h2 id="Exemple">Exemple</h2>
-
-<p>Dans l'exemple suivant on ouvre une transaction puis un magasin d'objet et enfin l'index <code>lName</code>.</p>
-
-<p>Finalement, On itère sur tous les enregistrements pour en insérer les données dans un tableau HTML. En utilisant la méthode {{domxref("IDBIndex.openCursor")}} qui travaille de la même façon que la méthode {{domxref("IDBObjectStore.openCursor")}} de l'{{domxref("IDBObjectStore","accès")}} au magasin d'objet sauf que les enregistrements sont renvoyés dans l'ordre de l'index et non celui du magasin d'objet.</p>
-
-<pre class="brush:js">function displayDataByIndex() {
+{{APIRef("IndexedDB")}}
+
+L'interface **`IDBIndex`**de l'{{domxref("IndexedDB_API","API IndexedDB")}} est un accès à un index d'un magasins d'objet. Un index permet de trier les enregistrements d'un magasin d'objet sur une autre clé que la clé primaire.
+
+Un index contient des enregistrements persistent. Chaque enregistrement est composé d'une clé ( la valeur du chemin de clé) et d'une valeur (la clé primaire de l'enregistrement dans le magasin d'objet). Les enregistrements de l'index se mettent automatiquement à jour lorsque un enregistrement du magasin d'objet est ajouté , mise à jour ou supprimé. Chaque enregistrement de l'index ne peut référer qu'a un enregistrement du magasin d'objet. Un magasin d'objet peut avoir plusieurs index et lorsque le magasin d'objet change tout les index sont mis à jour automatiquement.
+
+On peut retrouver les enregistrement sur une partie des clés, voir {{domxref("IDBKeyRange","intervalle de clé")}}.
+
+{{AvailableInWorkers}}
+
+## Méthodes
+
+Hérite de: [EventTarget](/en/DOM/EventTarget)
+
+- {{domxref("IDBIndex.count()")}}
+  - : Fait un {{domxref("IDBRequest","requête")}} sur l'index. La requête compte le nombre d'enregistrements dans cet index ou sur l'{{domxref("IDBKeyRange","intervalle de clé")}} passé en paramètre.
+- {{domxref("IDBIndex.get()")}}
+  - : Fait une {{domxref("IDBRequest","requête")}} pour renvoyer le premier enregistrement correspondant à la clé ou l'{{domxref("IDBKeyRange","")}} du magasin d'objet suivant l'index.
+- {{domxref("IDBIndex.getKey()")}}
+  - : Fait une {{domxref("IDBRequest","requête")}} pour renvoyer la clé primaire correspondant à la clé ou à l'{{domxref("IDBKeyRange","intervalle de clé")}} de l'index. Si une clé est trouvé le résultat de la requête contiendra seulement la clé primaire de l'enregistrement et non l'enregistrement comme le fait {{domxref("IDBIndex.get")}}.
+- {{domxref("IDBIndex.getAll()")}}
+  - : Fait une {{domxref("IDBRequest","requête")}} qui renvoie un tableau ordonné suivant les clés, des clones structurés des enregistrements de l'{{domxref("IDBIndex","index relié")}}. On peut limité le nombre d'enregistrements en les filtrants suivant leurs clés ou en paramétrant le compteur.
+- {{domxref("IDBIndex.getAllKeys()")}}
+  - : Ferrais une {{domxref("IDBRequest","requête")}} qui renverrait la liste de toutes les clés des enregistrements de l'index. On pourrait limiter le nombre d'enregistrements en les filtrants suivant leurs clés ou en paramétrant le compteur.
+- {{domxref("IDBIndex.openCursor()")}}
+  - : Fait une {{domxref("IDBRequest","requête")}} récursive suivant un {{domxref("IDBCursorWithValue","curseur avec valeur")}} qui itère l'index {{domxref("IDBObjectStore","relié")}} sur l'{{domxref("IDBKeyRange","intervalle de clé")}} spécifié.
+- {{domxref("IDBIndex.openKeyCursor()")}}
+  - : Fait une {{domxref("IDBRequest","requête")}} récursive suivant un {{domxref("IDBCursor","curseur")}} qui itère l'index {{domxref("IDBObjectStore","relié")}} sur l'{{domxref("IDBKeyRange","intervalle de clé")}} spécifié.
+
+## Propriétés
+
+- {{domxref("IDBIndex.isAutoLocale")}} {{readonlyInline}} {{ Non-Standard_inline() }}
+  - : Renvoie un {{domxref("Boolean","booléen")}} indiquant si la valeur de `locale` à été paramétré sur `auto` lors de la mise en place de l'index (voir les paramètres `{{domxref("IDBObjectStore.createIndex")}}`).
+- {{domxref("IDBIndex.locale")}} {{readonlyInline}} {{ Non-Standard_inline() }}
+  - : Renvoie la localisation de l'index (par exemple fr, ou `en-US`) `si la localisation à été spécifie lors de la mise en place de l'index` (voir les paramètres {{domxref("IDBObjectStore.createIndex")}}).
+- {{domxref("IDBIndex.name")}} {{readonlyInline}}
+  - : Renvoie le nom de l'index.
+- {{domxref("IDBIndex.objectStore")}} {{readonlyInline}}
+  - : Renvoie un {{domxref("IDBObjectStore","accès au magasin d'objet")}} que référence l'index.
+- {{domxref("IDBIndex.keyPath")}} {{readonlyInline}}
+  - : Renvoie le chemin de clé de l'index. Si l'index n'est pas [automatiquement mise à jour](/fr/IndexedDB/Index#gloss_auto-populated) la propriété vaux `null`.
+- {{domxref("IDBIndex.multiEntry")}} {{readonlyInline}}
+  - : Renvoie un {{domxref("Boolean","booléen")}} qui indique comment l'index gère le chemin de clé si c'est un tableau.
+- {{domxref("IDBIndex.unique")}} {{readonlyInline}}
+  - : Renvoie un {{domxref("Boolean","booléen")}} qui indique l'index interdit la duplication d'enregistrement sur sa clé.
+
+## Exemple
+
+Dans l'exemple suivant on ouvre une transaction puis un magasin d'objet et enfin l'index `lName`.
+
+Finalement, On itère sur tous les enregistrements pour en insérer les données dans un tableau HTML. En utilisant la méthode {{domxref("IDBIndex.openCursor")}} qui travaille de la même façon que la méthode {{domxref("IDBObjectStore.openCursor")}} de l'{{domxref("IDBObjectStore","accès")}} au magasin d'objet sauf que les enregistrements sont renvoyés dans l'ordre de l'index et non celui du magasin d'objet.
+
+```js
+function displayDataByIndex() {
   tableEntry.innerHTML = '';
 
   //ouvre un transaction
@@ -86,14 +82,14 @@ translation_of: Web/API/IDBIndex
     var cursor = request.result;
     if(cursor) {
       var tableRow = document.createElement('tr');
-      tableRow.innerHTML =   '&lt;td&gt;' + cursor.value.id + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.lName + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.fName + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.jTitle + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.company + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.eMail + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.phone + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.age + '&lt;/td&gt;';
+      tableRow.innerHTML =   '<td>' + cursor.value.id + '</td>'
+                           + '<td>' + cursor.value.lName + '</td>'
+                           + '<td>' + cursor.value.fName + '</td>'
+                           + '<td>' + cursor.value.jTitle + '</td>'
+                           + '<td>' + cursor.value.company + '</td>'
+                           + '<td>' + cursor.value.eMail + '</td>'
+                           + '<td>' + cursor.value.phone + '</td>'
+                           + '<td>' + cursor.value.age + '</td>';
       tableEntry.appendChild(tableRow);
 
       cursor.continue();
@@ -101,40 +97,27 @@ translation_of: Web/API/IDBIndex
       console.log('Tous les enregistrements ont été affichés.');
     }
   };
-};</pre>
-
-<div class="note"><p><strong>Note :</strong> Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>).</p></div>
-
-<h2 id="Spécification">Spécification</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('IndexedDB', '#idl-def-IDBIndex', 'IDBIndex')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité avec les navigateurs</h2>
-
-<p>{{Compat("api.IDBIndex")}}</p>
-
-<h2 id="See_also">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("IndexedDB_API.Using_IndexedDB","Utiliser IndexedDB")}}</li>
- <li>{{domxref("IDBDatabase","Débuter une connexion")}}</li>
- <li>{{domxref("IDBTransaction","Utilisé les transactions")}}</li>
- <li>{{domxref("IDBKeyRange","Définir l'intervalle des clés")}}</li>
- <li>{{domxref("IDBObjectStore","Accès aux magasins d'objets")}}</li>
- <li>{{domxref("IDBCursor","Utiliser les curseur")}}</li>
- <li>Exemple de référence: <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="http://mdn.github.io/to-do-notifications/">voir l'exemple en direct</a>.)</li>
-</ul>
-</div>
+};
+```
+
+> **Note :** Pour un exemple de travail complet, voir notre [To-do Notifications](https://github.com/mdn/to-do-notifications/) app ([view example live](http://mdn.github.io/to-do-notifications/)).
+
+## Spécification
+
+| Spécification                                                                | Statut                       | Commentaire |
+| ---------------------------------------------------------------------------- | ---------------------------- | ----------- |
+| {{SpecName('IndexedDB', '#idl-def-IDBIndex', 'IDBIndex')}} | {{Spec2('IndexedDB')}} |             |
+
+## Compatibilité avec les navigateurs
+
+{{Compat("api.IDBIndex")}}
+
+## Voir aussi
+
+- {{domxref("IndexedDB_API.Using_IndexedDB","Utiliser IndexedDB")}}
+- {{domxref("IDBDatabase","Débuter une connexion")}}
+- {{domxref("IDBTransaction","Utilisé les transactions")}}
+- {{domxref("IDBKeyRange","Définir l'intervalle des clés")}}
+- {{domxref("IDBObjectStore","Accès aux magasins d'objets")}}
+- {{domxref("IDBCursor","Utiliser les curseur")}}
+- Exemple de référence: [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages) ([voir l'exemple en direct](http://mdn.github.io/to-do-notifications/).)
diff --git a/files/fr/web/api/idbindex/isautolocale/index.md b/files/fr/web/api/idbindex/isautolocale/index.md
index 70a7c7ea4a..35f878e495 100644
--- a/files/fr/web/api/idbindex/isautolocale/index.md
+++ b/files/fr/web/api/idbindex/isautolocale/index.md
@@ -10,26 +10,27 @@ tags:
   - Reference
 translation_of: Web/API/IDBIndex/isAutoLocale
 ---
-<div>{{APIRef("IndexedDB")}}{{SeeCompatTable}}</div>
+{{APIRef("IndexedDB")}}{{SeeCompatTable}}
 
-<p>La propriété en lecture seule <strong><code>isAutoLocale</code></strong>, rattachée à l'interface {{domxref("IDBIndex")}}, est un booléen qui indique si la valeur <code>locale</code> de l'index vaut <code>auto</code> (cf. <a href="/fr/docs/Web/API/IDBObjectStore/createIndex#Paramètres">les paramètres optionnels de <code>createIndex()</code></a>).</p>
+La propriété en lecture seule **`isAutoLocale`**, rattachée à l'interface {{domxref("IDBIndex")}}, est un booléen qui indique si la valeur `locale` de l'index vaut `auto` (cf. [les paramètres optionnels de `createIndex()`](/fr/docs/Web/API/IDBObjectStore/createIndex#Paramètres)).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var monIndex = objectStore.index('index');
-console.log(monIndex.isAutoLocale);</pre>
+    var monIndex = objectStore.index('index');
+    console.log(monIndex.isAutoLocale);
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>Un booléen.</p>
+Un booléen.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans l'exemple suivant, on ouvre une transaction et un magasin d'objet puis on récupère l'index <code>lName</code> depuis une base de données de contact. Ensuite, on ouvre un curseur simple sur l'index grâce à la méthode {{domxref("IDBIndex.openCursor")}} — cela fonctionne comme si on avait directement ouvert un curseur sur un magasin d'objet avec {{domxref("IDBObjectStore.openCursor")}} mais ici les enregistrements sont triés selon l'index et pas selon la clé primaire.</p>
+Dans l'exemple suivant, on ouvre une transaction et un magasin d'objet puis on récupère l'index `lName` depuis une base de données de contact. Ensuite, on ouvre un curseur simple sur l'index grâce à la méthode {{domxref("IDBIndex.openCursor")}} — cela fonctionne comme si on avait directement ouvert un curseur sur un magasin d'objet avec {{domxref("IDBObjectStore.openCursor")}} mais ici les enregistrements sont triés selon l'index et pas selon la clé primaire.
 
-<p>La valeur <code>isAutoLocale</code> est affichée dans la console.</p>
+La valeur `isAutoLocale` est affichée dans la console.
 
-<pre class="brush:js">function displayDataByIndex() {
+```js
+function displayDataByIndex() {
   tableEntry.innerHTML = '';
   var transaction = db.transaction(['contactsList'], 'readonly');
   var objectStore = transaction.objectStore('contactsList');
@@ -41,14 +42,14 @@ console.log(monIndex.isAutoLocale);</pre>
     var cursor = event.target.result;
     if(cursor) {
       var tableRow = document.createElement('tr');
-      tableRow.innerHTML =   '&lt;td&gt;' + cursor.value.id + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.lName + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.fName + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.jTitle + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.company + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.eMail + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.phone + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.age + '&lt;/td&gt;';
+      tableRow.innerHTML =   '<td>' + cursor.value.id + '</td>'
+                           + '<td>' + cursor.value.lName + '</td>'
+                           + '<td>' + cursor.value.fName + '</td>'
+                           + '<td>' + cursor.value.jTitle + '</td>'
+                           + '<td>' + cursor.value.company + '</td>'
+                           + '<td>' + cursor.value.eMail + '</td>'
+                           + '<td>' + cursor.value.phone + '</td>'
+                           + '<td>' + cursor.value.age + '</td>';
       tableEntry.appendChild(tableRow);
 
       cursor.continue();
@@ -56,24 +57,23 @@ console.log(monIndex.isAutoLocale);</pre>
       console.log('Les éléments ont été affichés.');
     }
   };
-};</pre>
+};
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Actuellement, cette propriété ne fait partie d'aucune spécification.</p>
+Actuellement, cette propriété ne fait partie d'aucune spécification.
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.IDBIndex.isAutoLocale")}}</p>
+{{Compat("api.IDBIndex.isAutoLocale")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
- <li>Initier une connexion : {{domxref("IDBDatabase")}}</li>
- <li>Utiliser les transactions : {{domxref("IDBTransaction")}}</li>
- <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
- <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li>
- <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li>
- <li>Exemple de référence : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li>
-</ul>
+- [Utiliser IndexedDB](/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB)
+- Initier une connexion : {{domxref("IDBDatabase")}}
+- Utiliser les transactions : {{domxref("IDBTransaction")}}
+- Définir un intervalle de clés : {{domxref("IDBKeyRange")}}
+- Récupérer et modifier les données : {{domxref("IDBObjectStore")}}
+- Utiliser les curseurs {{domxref("IDBCursor")}}
+- Exemple de référence : [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages) ([exemple _live_](https://mdn.github.io/to-do-notifications/)).
diff --git a/files/fr/web/api/idbindex/keypath/index.md b/files/fr/web/api/idbindex/keypath/index.md
index 551f9f0b73..13379463fa 100644
--- a/files/fr/web/api/idbindex/keypath/index.md
+++ b/files/fr/web/api/idbindex/keypath/index.md
@@ -3,31 +3,32 @@ title: IDBIndex.keyPath
 slug: Web/API/IDBIndex/keyPath
 translation_of: Web/API/IDBIndex/keyPath
 ---
-<p>{{ APIRef("IndexedDB") }}</p>
+{{ APIRef("IndexedDB") }}
 
-<div>
-<p>La propriété <strong><code>keyPath</code></strong> de l'interface {{domxref("IDBIndex")}} renvoie le <a href="/fr/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB#gloss_keypath">chemin de clé</a> de l'index. Si l'index n'est pas <a href="/fr/IndexedDB/Index#gloss_auto-populated">automatiquement mise à jour</a> la propriété vaux <code>null</code>.</p>
+La propriété **`keyPath`** de l'interface {{domxref("IDBIndex")}} renvoie le [chemin de clé](/fr/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB#gloss_keypath) de l'index. Si l'index n'est pas [automatiquement mise à jour](/fr/IndexedDB/Index#gloss_auto-populated) la propriété vaux `null`.
 
-<p>{{AvailableInWorkers}}</p>
-</div>
+{{AvailableInWorkers}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">var keyPath = myIndex.keyPath</pre>
+```js
+var keyPath = myIndex.keyPath
+```
 
-<h2 id="Valeur">Valeur</h2>
+## Valeur
 
-<p>Tous types de valeur pouvant être utilisés comme chemin de clé.</p>
+Tous types de valeur pouvant être utilisés comme chemin de clé.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Dans l'exemple suivant on ouvre une transaction puis un magasin d'objet et enfin l'index <code>lName</code>.</p>
+Dans l'exemple suivant on ouvre une transaction puis un magasin d'objet et enfin l'index `lName`.
 
-<p>Le chemin de clé de l'index est affiché sur la console (ici: <code>lName</code>).</p>
+Le chemin de clé de l'index est affiché sur la console (ici: `lName`).
 
-<p>Finalement, On itère sur tous les enregistrements pour en insérer les données dans un tableau HTML. En utilisant la méthode {{domxref("IDBIndex.openCursor")}} qui travaille de la même façon que la méthode {{domxref("IDBObjectStore.openCursor")}} de l'{{domxref("IDBObjectStore","accès")}} au magasin d'objet sauf que les enregistrements sont renvoyés dans l'ordre de l'index et non celui du magasin d'objet.</p>
+Finalement, On itère sur tous les enregistrements pour en insérer les données dans un tableau HTML. En utilisant la méthode {{domxref("IDBIndex.openCursor")}} qui travaille de la même façon que la méthode {{domxref("IDBObjectStore.openCursor")}} de l'{{domxref("IDBObjectStore","accès")}} au magasin d'objet sauf que les enregistrements sont renvoyés dans l'ordre de l'index et non celui du magasin d'objet.
 
-<pre class="brush:js">function displayDataByIndex() {
+```js
+function displayDataByIndex() {
   tableEntry.innerHTML = '';
 
   //ouvre un transaction
@@ -45,14 +46,14 @@ translation_of: Web/API/IDBIndex/keyPath
     var cursor = event.target.result;
     if(cursor) {
       var tableRow = document.createElement('tr');
-      tableRow.innerHTML =   '&lt;td&gt;' + cursor.value.id + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.lName + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.fName + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.jTitle + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.company + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.eMail + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.phone + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.age + '&lt;/td&gt;';
+      tableRow.innerHTML =   '<td>' + cursor.value.id + '</td>'
+                           + '<td>' + cursor.value.lName + '</td>'
+                           + '<td>' + cursor.value.fName + '</td>'
+                           + '<td>' + cursor.value.jTitle + '</td>'
+                           + '<td>' + cursor.value.company + '</td>'
+                           + '<td>' + cursor.value.eMail + '</td>'
+                           + '<td>' + cursor.value.phone + '</td>'
+                           + '<td>' + cursor.value.age + '</td>';
       tableEntry.appendChild(tableRow);
 
       cursor.continue();
@@ -60,39 +61,27 @@ translation_of: Web/API/IDBIndex/keyPath
       console.log('Tous les enregistrements ont été affichés.');
     }
   };
-};</pre>
-
-<div class="note"><p><strong>Note :</strong> Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>).</p></div>
-
-<h2 id="Spécification">Spécification</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('IndexedDB', '#widl-IDBIndex-keyPath', 'keyPath')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.IDBIndex.keyPath")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("IndexedDB_API.Using_IndexedDB","Utiliser IndexedDB")}}</li>
- <li>{{domxref("IDBDatabase","Débuter une connexion")}}</li>
- <li>{{domxref("IDBTransaction","Utilisé les transactions")}}</li>
- <li>{{domxref("IDBKeyRange","Définir l'intervalle des clés")}}</li>
- <li>{{domxref("IDBObjectStore","Accès aux magasins d'objets")}}</li>
- <li>{{domxref("IDBCursor","Utiliser les curseur")}}</li>
- <li>Exemple de référence: <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li>
-</ul>
+};
+```
+
+> **Note :** Pour un exemple de travail complet, voir notre [To-do Notifications](https://github.com/mdn/to-do-notifications/) app ([view example live](http://mdn.github.io/to-do-notifications/)).
+
+## Spécification
+
+| Spécification                                                                        | Statut                       | Commentaire |
+| ------------------------------------------------------------------------------------ | ---------------------------- | ----------- |
+| {{SpecName('IndexedDB', '#widl-IDBIndex-keyPath', 'keyPath')}} | {{Spec2('IndexedDB')}} |             |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.IDBIndex.keyPath")}}
+
+## Voir aussi
+
+- {{domxref("IndexedDB_API.Using_IndexedDB","Utiliser IndexedDB")}}
+- {{domxref("IDBDatabase","Débuter une connexion")}}
+- {{domxref("IDBTransaction","Utilisé les transactions")}}
+- {{domxref("IDBKeyRange","Définir l'intervalle des clés")}}
+- {{domxref("IDBObjectStore","Accès aux magasins d'objets")}}
+- {{domxref("IDBCursor","Utiliser les curseur")}}
+- Exemple de référence: [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages) ([view example live](http://mdn.github.io/to-do-notifications/).)
diff --git a/files/fr/web/api/idbindex/locale/index.md b/files/fr/web/api/idbindex/locale/index.md
index 6f91a28888..36aae421b9 100644
--- a/files/fr/web/api/idbindex/locale/index.md
+++ b/files/fr/web/api/idbindex/locale/index.md
@@ -3,29 +3,32 @@ title: IDBIndex.locale
 slug: Web/API/IDBIndex/locale
 translation_of: Web/API/IDBIndex/locale
 ---
-<div>{{APIRef("IndexedDB")}}{{SeeCompatTable}}</div>
+{{APIRef("IndexedDB")}}{{SeeCompatTable}}
 
-<p>La propriété <strong><code>locale</code></strong> de l'interface {{domxref("IDBIndex")}} renvoie la localisation de l'index (par exemple fr, ou <code>en-US</code>) <code>si la localisation à été spécifie lors de la mise en place de l'index</code> (voir les paramètres {{domxref("IDBObjectStore.createIndex")}}).</p>
+La propriété **`locale`** de l'interface {{domxref("IDBIndex")}} renvoie la localisation de l'index (par exemple fr, ou `en-US`) `si la localisation à été spécifie lors de la mise en place de l'index` (voir les paramètres {{domxref("IDBObjectStore.createIndex")}}).
 
-<p>{{note("Cette propriété renvoie la localisation utilisé par l'index. En d'autres termes, elle ne renverras jamais 'auto'.")}}</p>
+{{note("Cette propriété renvoie la localisation utilisé par l'index. En d'autres termes, elle ne renverras jamais 'auto'.")}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">var indexLocalisation = myIndex.locale;</pre>
+```js
+var indexLocalisation = myIndex.locale;
+```
 
-<h2 id="Valeur">Valeur</h2>
+## Valeur
 
-<p>Une {{domxref("DOMString","chaîne de caractère")}} représentant la localisation courante de l'index.</p>
+Une {{domxref("DOMString","chaîne de caractère")}} représentant la localisation courante de l'index.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Dans l'exemple suivant on ouvre une transaction puis un magasin d'objet et enfin l'index <code>lName</code>.</p>
+Dans l'exemple suivant on ouvre une transaction puis un magasin d'objet et enfin l'index `lName`.
 
-<p>La valeur de la propriété <code>Locale</code> est affichée sur la console.</p>
+La valeur de la propriété `Locale` est affichée sur la console.
 
-<p>Finalement, On itère sur tous les enregistrements pour en insérer les données dans un tableau HTML. En utilisant la méthode {{domxref("IDBIndex.openCursor")}} qui travaille de la même façon que la méthode {{domxref("IDBObjectStore.openCursor")}} de l'{{domxref("IDBObjectStore","accès")}} au magasin d'objet sauf que les enregistrements sont renvoyés dans l'ordre de l'index et non celui du magasin d'objet.</p>
+Finalement, On itère sur tous les enregistrements pour en insérer les données dans un tableau HTML. En utilisant la méthode {{domxref("IDBIndex.openCursor")}} qui travaille de la même façon que la méthode {{domxref("IDBObjectStore.openCursor")}} de l'{{domxref("IDBObjectStore","accès")}} au magasin d'objet sauf que les enregistrements sont renvoyés dans l'ordre de l'index et non celui du magasin d'objet.
 
-<pre class="brush:js">function displayDataByIndex() {
+```js
+function displayDataByIndex() {
   tableEntry.innerHTML = '';
 
   //ouvre un transaction
@@ -43,14 +46,14 @@ translation_of: Web/API/IDBIndex/locale
     var cursor = event.target.result;
     if(cursor) {
       var tableRow = document.createElement('tr');
-      tableRow.innerHTML =   '&lt;td&gt;' + cursor.value.id + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.lName + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.fName + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.jTitle + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.company + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.eMail + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.phone + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.age + '&lt;/td&gt;';
+      tableRow.innerHTML =   '<td>' + cursor.value.id + '</td>'
+                           + '<td>' + cursor.value.lName + '</td>'
+                           + '<td>' + cursor.value.fName + '</td>'
+                           + '<td>' + cursor.value.jTitle + '</td>'
+                           + '<td>' + cursor.value.company + '</td>'
+                           + '<td>' + cursor.value.eMail + '</td>'
+                           + '<td>' + cursor.value.phone + '</td>'
+                           + '<td>' + cursor.value.age + '</td>';
       tableEntry.appendChild(tableRow);
 
       cursor.continue();
@@ -58,26 +61,25 @@ translation_of: Web/API/IDBIndex/locale
       console.log('Tous les enregistrements ont été affichés.');
     }
   };
-};</pre>
+};
+```
 
-<div class="note"><p><strong>Note :</strong> Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>).</p></div>
+> **Note :** Pour un exemple de travail complet, voir notre [To-do Notifications](https://github.com/mdn/to-do-notifications/) app ([view example live](http://mdn.github.io/to-do-notifications/)).
 
-<h2 id="Spécification">Spécification</h2>
+## Spécification
 
-<p>Ne fait actuellement partie d'aucune spécification.</p>
+Ne fait actuellement partie d'aucune spécification.
 
-<h2 id="Compatibilité_avec_les_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.IDBIndex.locale")}}</p>
+{{Compat("api.IDBIndex.locale")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("IndexedDB_API.Using_IndexedDB","Utiliser IndexedDB")}}</li>
- <li>{{domxref("IDBDatabase","Débuter une connexion")}}</li>
- <li>{{domxref("IDBTransaction","Utilisé les transactions")}}</li>
- <li>{{domxref("IDBKeyRange","Définir l'intervalle des clés")}}</li>
- <li>{{domxref("IDBObjectStore","Accès aux magasins d'objets")}}</li>
- <li>{{domxref("IDBCursor","Utiliser les curseur")}}</li>
- <li>Exemple de référence: <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li>
-</ul>
+- {{domxref("IndexedDB_API.Using_IndexedDB","Utiliser IndexedDB")}}
+- {{domxref("IDBDatabase","Débuter une connexion")}}
+- {{domxref("IDBTransaction","Utilisé les transactions")}}
+- {{domxref("IDBKeyRange","Définir l'intervalle des clés")}}
+- {{domxref("IDBObjectStore","Accès aux magasins d'objets")}}
+- {{domxref("IDBCursor","Utiliser les curseur")}}
+- Exemple de référence: [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages) ([view example live](http://mdn.github.io/to-do-notifications/).)
diff --git a/files/fr/web/api/idbindex/multientry/index.md b/files/fr/web/api/idbindex/multientry/index.md
index 730a9f074a..30665f1d02 100644
--- a/files/fr/web/api/idbindex/multientry/index.md
+++ b/files/fr/web/api/idbindex/multientry/index.md
@@ -9,32 +9,33 @@ tags:
   - Reference
 translation_of: Web/API/IDBIndex/multiEntry
 ---
-<div>{{APIRef("IndexedDB")}}</div>
+{{APIRef("IndexedDB")}}
 
-<p>La propriété <strong><code>multiEntry</code></strong>, rattachée à l'interface {{domxref("IDBIndex")}}, est un booléen qui indique le comportement de l'index lorsque le résultat de l'évaluation d'un chemin de clé renvoie un tableau.</p>
+La propriété **`multiEntry`**, rattachée à l'interface {{domxref("IDBIndex")}}, est un booléen qui indique le comportement de l'index lorsque le résultat de l'évaluation d'un chemin de clé renvoie un tableau.
 
-<p>Ce comportement est paramétré au moment où l'index est créé avec la méthode {{domxref("IDBObjectStore.createIndex")}}. Cette méthode permet d'utiliser un paramètre facultatif <code>options</code> pour définir la propriété <code>multiEntry</code> avec <code>true</code>/<code>false</code>.</p>
+Ce comportement est paramétré au moment où l'index est créé avec la méthode {{domxref("IDBObjectStore.createIndex")}}. Cette méthode permet d'utiliser un paramètre facultatif `options` pour définir la propriété `multiEntry` avec `true`/`false`.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var monIndex = objectStore.index('index');
-console.log(monIndex.multiEntry);</pre>
+    var monIndex = objectStore.index('index');
+    console.log(monIndex.multiEntry);
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>Un booléen. S'il vaut <code>true</code>, cela signifie qu'il y a autant d'enregistrement que de valeurs dans le tableau renvoyé lors de l'évaluation du chemin (les clés des enregistrements sont les valeurs du tableau). S'il vaut <code>false</code>, cela signifie qu'il n'y aura qu'un seul enregistrement ajouté et que la clé sera le tableau.</p>
+Un booléen. S'il vaut `true`, cela signifie qu'il y a autant d'enregistrement que de valeurs dans le tableau renvoyé lors de l'évaluation du chemin (les clés des enregistrements sont les valeurs du tableau). S'il vaut `false`, cela signifie qu'il n'y aura qu'un seul enregistrement ajouté et que la clé sera le tableau.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans l'exemple qui suit, on ouvre une transaction sur un magasin d'objets et on récupère l'index <code>lName</code> depuis la base de données des contacts. Ensuite, on ouvre un curseur simple sur l'index grâce à la méthode {{domxref("IDBIndex.openCursor")}} (cela fonctionne comme si on avait directement ouvert un curseur sur le magasin d'objets avec {{domxref("IDBObjectStore.openCursor")}} mais les enregistrements sont ici renvoyés en étant triés selon l'index et non selon la clé primaire.</p>
+Dans l'exemple qui suit, on ouvre une transaction sur un magasin d'objets et on récupère l'index `lName` depuis la base de données des contacts. Ensuite, on ouvre un curseur simple sur l'index grâce à la méthode {{domxref("IDBIndex.openCursor")}} (cela fonctionne comme si on avait directement ouvert un curseur sur le magasin d'objets avec {{domxref("IDBObjectStore.openCursor")}} mais les enregistrements sont ici renvoyés en étant triés selon l'index et non selon la clé primaire.
 
-<p>La propriété <code>multiEntry</code> est affichée dans la console. Dans cet exemple, elle a la valeur <code>false</code>.</p>
+La propriété `multiEntry` est affichée dans la console. Dans cet exemple, elle a la valeur `false`.
 
-<p>Enfin, on parcourt chacun des enregistrements pour insérer les données dans un tableau HTML. Pour consulter un exemple complet, vous pouvez vous référer à <a href="https://github.com/mdn/IDBIndex-example">notre dépôt IDBIndex-example</a> (<a href="https://mdn.github.io/IDBIndex-example/">voir également la démo <em>live</em></a>).</p>
+Enfin, on parcourt chacun des enregistrements pour insérer les données dans un tableau HTML. Pour consulter un exemple complet, vous pouvez vous référer à [notre dépôt IDBIndex-example](https://github.com/mdn/IDBIndex-example) ([voir également la démo _live_](https://mdn.github.io/IDBIndex-example/)).
 
-<pre class="brush: js">function displayDataByIndex() {
+```js
+function displayDataByIndex() {
   tableEntry.innerHTML = '';
   var transaction = db.transaction(['contactsList'], 'readonly');
   var objectStore = transaction.objectStore('contactsList');
@@ -46,14 +47,14 @@ console.log(monIndex.multiEntry);</pre>
     var cursor = event.target.result;
     if(cursor) {
       var tableRow = document.createElement('tr');
-      tableRow.innerHTML =   '&lt;td&gt;' + cursor.value.id + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.lName + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.fName + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.jTitle + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.company + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.eMail + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.phone + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.age + '&lt;/td&gt;';
+      tableRow.innerHTML =   '<td>' + cursor.value.id + '</td>'
+                           + '<td>' + cursor.value.lName + '</td>'
+                           + '<td>' + cursor.value.fName + '</td>'
+                           + '<td>' + cursor.value.jTitle + '</td>'
+                           + '<td>' + cursor.value.company + '</td>'
+                           + '<td>' + cursor.value.eMail + '</td>'
+                           + '<td>' + cursor.value.phone + '</td>'
+                           + '<td>' + cursor.value.age + '</td>';
       tableEntry.appendChild(tableRow);
 
       cursor.continue();
@@ -61,37 +62,25 @@ console.log(monIndex.multiEntry);</pre>
       console.log('Les éléments ont été affichés.');
     }
   };
-};</pre>
-
-<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('IndexedDB', '#widl-IDBIndex-multiEntry', 'multiEntry')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.IDBIndex.multiEntry")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
- <li>Initier une connexion : {{domxref("IDBDatabase")}}</li>
- <li>Utiliser les transactions : {{domxref("IDBTransaction")}}</li>
- <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
- <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li>
- <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li>
- <li>Exemple de référence : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li>
-</ul>
+};
+```
+
+## Spécifications
+
+| Spécification                                                                                | État                         | Commentaires |
+| -------------------------------------------------------------------------------------------- | ---------------------------- | ------------ |
+| {{SpecName('IndexedDB', '#widl-IDBIndex-multiEntry', 'multiEntry')}} | {{Spec2('IndexedDB')}} |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.IDBIndex.multiEntry")}}
+
+## Voir aussi
+
+- [Utiliser IndexedDB](/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB)
+- Initier une connexion : {{domxref("IDBDatabase")}}
+- Utiliser les transactions : {{domxref("IDBTransaction")}}
+- Définir un intervalle de clés : {{domxref("IDBKeyRange")}}
+- Récupérer et modifier les données : {{domxref("IDBObjectStore")}}
+- Utiliser les curseurs {{domxref("IDBCursor")}}
+- Exemple de référence : [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages) ([exemple _live_](https://mdn.github.io/to-do-notifications/)).
diff --git a/files/fr/web/api/idbindex/name/index.md b/files/fr/web/api/idbindex/name/index.md
index 1211cc937e..62d6b5ca7f 100644
--- a/files/fr/web/api/idbindex/name/index.md
+++ b/files/fr/web/api/idbindex/name/index.md
@@ -9,43 +9,42 @@ tags:
   - Reference
 translation_of: Web/API/IDBIndex/name
 ---
-<div>{{APIRef("IndexedDB")}}</div>
+{{APIRef("IndexedDB")}}
 
-<p>La propriété <strong><code>name</code></strong>, rattachée à l'interface {{domxref("IDBIndex")}}, contient une chaîne de caractères qui permet de désigner l'index courant.</p>
+La propriété **`name`**, rattachée à l'interface {{domxref("IDBIndex")}}, contient une chaîne de caractères qui permet de désigner l'index courant.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var <em>indexName</em> = <em>IDBIndex</em>.name;
-<em>IDBIndex</em>.name = <em>indexName</em>;</pre>
+    var indexName = IDBIndex.name;
+    IDBIndex.name = indexName;
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>Une chaîne de caractères qui fournit le nom à l'index.</p>
+Une chaîne de caractères qui fournit le nom à l'index.
 
-<h3 id="Exceptions">Exceptions</h3>
+### Exceptions
 
-<p>Différentes exceptions peuvent être déclenchées lorsqu'on souhaite modifier le nom d'un index.</p>
+Différentes exceptions peuvent être déclenchées lorsqu'on souhaite modifier le nom d'un index.
 
-<dl>
- <dt><code>InvalidStateError</code></dt>
- <dd>L'index ou le magasin d'objets a été supprimé ou la transaction courante n'est pas une transaction de montée de niveau. Le renommage des index est uniquement possible lors des transactions de montée de niveau (c'est-à-dire quand le mode de la transaction est <code>"versionchange"</code>).</dd>
- <dt><code>TransactionInactiveError</code></dt>
- <dd>La transaction courante n'est pas active.</dd>
- <dt><code>ConstraintError</code></dt>
- <dd>Il existe déjà un index avec ce nom.</dd>
-</dl>
+- `InvalidStateError`
+  - : L'index ou le magasin d'objets a été supprimé ou la transaction courante n'est pas une transaction de montée de niveau. Le renommage des index est uniquement possible lors des transactions de montée de niveau (c'est-à-dire quand le mode de la transaction est `"versionchange"`).
+- `TransactionInactiveError`
+  - : La transaction courante n'est pas active.
+- `ConstraintError`
+  - : Il existe déjà un index avec ce nom.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans l'exemple qui suit, on ouvre une transaction sur un magasin d'objets pour lequel on récupère l'index <code>lName</code>. Ensuite, on ouvre un curseur sur cet index avec la méthode {{domxref("IDBIndex.openCursor()")}} (celle-ci fonctionne comme la méthode {{domxref("IDBObjectStore.openCursor", "openCursor()")}} qui s'utilise sur les magasins d'objets mais ici, les enregistrements sont triés selon l'index et pas selon la clé primaire).</p>
+Dans l'exemple qui suit, on ouvre une transaction sur un magasin d'objets pour lequel on récupère l'index `lName`. Ensuite, on ouvre un curseur sur cet index avec la méthode {{domxref("IDBIndex.openCursor()")}} (celle-ci fonctionne comme la méthode {{domxref("IDBObjectStore.openCursor", "openCursor()")}} qui s'utilise sur les magasins d'objets mais ici, les enregistrements sont triés selon l'index et pas selon la clé primaire).
 
-<p>Le nom de l'index est affiché dans la console grâce à la propriété (ici, le nom sera <code>"lName"</code>).</p>
+Le nom de l'index est affiché dans la console grâce à la propriété (ici, le nom sera `"lName"`).
 
-<p>Enfin, on parcourt chacun des enregistrements et on ajoute les données dans un tableau HTML.</p>
+Enfin, on parcourt chacun des enregistrements et on ajoute les données dans un tableau HTML.
 
-<pre class="brush: js">function displayDataByIndex() {
+```js
+function displayDataByIndex() {
   tableEntry.innerHTML = '';
   var transaction = db.transaction(['contactsList'], 'readonly');
   var objectStore = transaction.objectStore('contactsList');
@@ -57,14 +56,14 @@ translation_of: Web/API/IDBIndex/name
     var cursor = event.target.result;
     if(cursor) {
       var tableRow = document.createElement('tr');
-      tableRow.innerHTML =   '&lt;td&gt;' + cursor.value.id + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.lName + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.fName + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.jTitle + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.company + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.eMail + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.phone + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.age + '&lt;/td&gt;';
+      tableRow.innerHTML =   '<td>' + cursor.value.id + '</td>'
+                           + '<td>' + cursor.value.lName + '</td>'
+                           + '<td>' + cursor.value.fName + '</td>'
+                           + '<td>' + cursor.value.jTitle + '</td>'
+                           + '<td>' + cursor.value.company + '</td>'
+                           + '<td>' + cursor.value.eMail + '</td>'
+                           + '<td>' + cursor.value.phone + '</td>'
+                           + '<td>' + cursor.value.age + '</td>';
       tableEntry.appendChild(tableRow);
 
       cursor.continue();
@@ -72,41 +71,27 @@ translation_of: Web/API/IDBIndex/name
       console.log('Les éléments sont affichés.');
     }
   };
-};</pre>
-
-<div class="note">
-<p><strong>Note :</strong> pour un exemple fonctionnel complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">application To-do</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple</a>).</p>
-</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('IndexedDB', '#widl-IDBIndex-name', 'name')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.IDBIndex.name")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
- <li>Initier une connexion : {{domxref("IDBDatabase")}}</li>
- <li>Utiliser les transactions : {{domxref("IDBTransaction")}}</li>
- <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
- <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li>
- <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li>
- <li>Exemple de référence : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li>
-</ul>
+};
+```
+
+> **Note :** pour un exemple fonctionnel complet, voir notre [application To-do](https://github.com/mdn/to-do-notifications/) ([exemple](https://mdn.github.io/to-do-notifications/)).
+
+## Spécifications
+
+| Spécification                                                                | État                         | Commentaires |
+| ---------------------------------------------------------------------------- | ---------------------------- | ------------ |
+| {{SpecName('IndexedDB', '#widl-IDBIndex-name', 'name')}} | {{Spec2('IndexedDB')}} |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.IDBIndex.name")}}
+
+## Voir aussi
+
+- [Utiliser IndexedDB](/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB)
+- Initier une connexion : {{domxref("IDBDatabase")}}
+- Utiliser les transactions : {{domxref("IDBTransaction")}}
+- Définir un intervalle de clés : {{domxref("IDBKeyRange")}}
+- Récupérer et modifier les données : {{domxref("IDBObjectStore")}}
+- Utiliser les curseurs {{domxref("IDBCursor")}}
+- Exemple de référence : [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages) ([exemple _live_](https://mdn.github.io/to-do-notifications/)).
diff --git a/files/fr/web/api/idbindex/objectstore/index.md b/files/fr/web/api/idbindex/objectstore/index.md
index 72f83bc88e..3ca57791da 100644
--- a/files/fr/web/api/idbindex/objectstore/index.md
+++ b/files/fr/web/api/idbindex/objectstore/index.md
@@ -3,33 +3,34 @@ title: IDBIndex.objectStore
 slug: Web/API/IDBIndex/objectStore
 translation_of: Web/API/IDBIndex/objectStore
 ---
-<p>{{ APIRef("IndexedDB") }}</p>
+{{ APIRef("IndexedDB") }}
 
-<div>
-<p>La propriètè <strong><code>objectStore</code></strong> de l'interface {{domxref("IDBIndex")}} renvoie un accès au magasin d'objet que référence l'index.</p>
+La propriètè **`objectStore`** de l'interface {{domxref("IDBIndex")}} renvoie un accès au magasin d'objet que référence l'index.
 
-<p>{{AvailableInWorkers}}</p>
-</div>
+{{AvailableInWorkers}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">var indexObjectStore = myIndex.objectStore;</pre>
+```js
+var indexObjectStore = myIndex.objectStore;
+```
 
-<h2 id="Valeur">Valeur</h2>
+## Valeur
 
-<p>Un {{ domxref("IDBObjectStore","accès au magasin d'objet") }}.</p>
+Un {{ domxref("IDBObjectStore","accès au magasin d'objet") }}.
 
-<h2 id="Example">Example</h2>
+## Example
 
-<p>Dans l'exemple suivant on ouvre une transaction puis un magasin d'objet et enfin l'index <code>lName</code>.</p>
+Dans l'exemple suivant on ouvre une transaction puis un magasin d'objet et enfin l'index `lName`.
 
-<p>Le magasin d'objet référencé par l'index est afficher sur la console, quelque chose ressemblant à:</p>
+Le magasin d'objet référencé par l'index est afficher sur la console, quelque chose ressemblant à:
 
-<pre>IDBObjectStore { name: "contactsList", keyPath: "id", indexNames: DOMStringList[7], transaction: IDBTransaction, autoIncrement: false }</pre>
+    IDBObjectStore { name: "contactsList", keyPath: "id", indexNames: DOMStringList[7], transaction: IDBTransaction, autoIncrement: false }
 
-<p>Finalement, On itère sur tous les enregistrements pour en insérer les données dans un tableau HTML. En utilisant la méthode {{domxref("IDBIndex.openCursor")}} qui travaille de la même façon que la méthode {{domxref("IDBObjectStore.openCursor")}} de l'{{domxref("IDBObjectStore","accès")}} au magasin d'objet sauf que les enregistrements sont renvoyés dans l'ordre de l'index et non celui du magasin d'objet.</p>
+Finalement, On itère sur tous les enregistrements pour en insérer les données dans un tableau HTML. En utilisant la méthode {{domxref("IDBIndex.openCursor")}} qui travaille de la même façon que la méthode {{domxref("IDBObjectStore.openCursor")}} de l'{{domxref("IDBObjectStore","accès")}} au magasin d'objet sauf que les enregistrements sont renvoyés dans l'ordre de l'index et non celui du magasin d'objet.
 
-<pre class="brush:js">function displayDataByIndex() {
+```js
+function displayDataByIndex() {
   tableEntry.innerHTML = '';
 
   //ouvre un transaction
@@ -47,14 +48,14 @@ translation_of: Web/API/IDBIndex/objectStore
     var cursor = event.target.result;
     if(cursor) {
       var tableRow = document.createElement('tr');
-      tableRow.innerHTML =   '&lt;td&gt;' + cursor.value.id + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.lName + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.fName + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.jTitle + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.company + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.eMail + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.phone + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.age + '&lt;/td&gt;';
+      tableRow.innerHTML =   '<td>' + cursor.value.id + '</td>'
+                           + '<td>' + cursor.value.lName + '</td>'
+                           + '<td>' + cursor.value.fName + '</td>'
+                           + '<td>' + cursor.value.jTitle + '</td>'
+                           + '<td>' + cursor.value.company + '</td>'
+                           + '<td>' + cursor.value.eMail + '</td>'
+                           + '<td>' + cursor.value.phone + '</td>'
+                           + '<td>' + cursor.value.age + '</td>';
       tableEntry.appendChild(tableRow);
 
       cursor.continue();
@@ -62,39 +63,27 @@ translation_of: Web/API/IDBIndex/objectStore
       console.log('Tous les enregistrements ont été affichés.');
     }
   };
-};</pre>
-
-<div class="note"><p><strong>Note :</strong> Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>).</p></div>
-
-<h2 id="Spécification">Spécification</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('IndexedDB', '#widl-IDBIndex-objectStore', 'objectStore')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.IDBIndex.objectStore")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("IndexedDB_API.Using_IndexedDB","Utiliser IndexedDB")}}</li>
- <li>{{domxref("IDBDatabase","Débuter une connexion")}}</li>
- <li>{{domxref("IDBTransaction","Utilisé les transactions")}}</li>
- <li>{{domxref("IDBKeyRange","Définir l'intervalle des clés")}}</li>
- <li>{{domxref("IDBObjectStore","Accès aux magasins d'objets")}}</li>
- <li>{{domxref("IDBCursor","Utiliser les curseur")}}</li>
- <li>Exemple de référence: <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li>
-</ul>
+};
+```
+
+> **Note :** Pour un exemple de travail complet, voir notre [To-do Notifications](https://github.com/mdn/to-do-notifications/) app ([view example live](http://mdn.github.io/to-do-notifications/)).
+
+## Spécification
+
+| Spécification                                                                                | Statut                       | Commentaire |
+| -------------------------------------------------------------------------------------------- | ---------------------------- | ----------- |
+| {{SpecName('IndexedDB', '#widl-IDBIndex-objectStore', 'objectStore')}} | {{Spec2('IndexedDB')}} |             |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.IDBIndex.objectStore")}}
+
+## Voir aussi
+
+- {{domxref("IndexedDB_API.Using_IndexedDB","Utiliser IndexedDB")}}
+- {{domxref("IDBDatabase","Débuter une connexion")}}
+- {{domxref("IDBTransaction","Utilisé les transactions")}}
+- {{domxref("IDBKeyRange","Définir l'intervalle des clés")}}
+- {{domxref("IDBObjectStore","Accès aux magasins d'objets")}}
+- {{domxref("IDBCursor","Utiliser les curseur")}}
+- Exemple de référence: [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages) ([view example live](http://mdn.github.io/to-do-notifications/).)
diff --git a/files/fr/web/api/idbindex/opencursor/index.md b/files/fr/web/api/idbindex/opencursor/index.md
index 8e0dff9573..7216e38d94 100644
--- a/files/fr/web/api/idbindex/opencursor/index.md
+++ b/files/fr/web/api/idbindex/opencursor/index.md
@@ -10,81 +10,76 @@ tags:
   - openCursor
 translation_of: Web/API/IDBIndex/openCursor
 ---
-<div>{{APIRef("IndexedDB")}}</div>
+{{APIRef("IndexedDB")}}
 
-<p>La méthode <strong><code>openCursor()</code></strong> de l'interface {{domxref("IDBIndex")}} renvoie un objet {{domxref("IDBRequest")}} et, dans un <em>thread</em> séparé, crée <a href="/fr/docs/Web/API/IDBCursor">un curseur</a> sur l'intervalle de clé fourni en argument.</p>
+La méthode **`openCursor()`** de l'interface {{domxref("IDBIndex")}} renvoie un objet {{domxref("IDBRequest")}} et, dans un _thread_ séparé, crée [un curseur](/fr/docs/Web/API/IDBCursor) sur l'intervalle de clé fourni en argument.
 
-<p>La méthode la positionne le curseur de façon approprié, selon la direction indiquée :</p>
+La méthode la positionne le curseur de façon approprié, selon la direction indiquée :
 
-<ul>
- <li>Si aucun intervalle de clé n'est spécifié ou qu'il vaut {{jsxref("null")}}, l'intervalle résultant contiendra l'ensemble des enregistrements</li>
- <li>L'évènement <code>success</code> est toujours déclenché :
-  <ul>
-   <li>Si un enregistrement est trouvé la propriété <code>result</code> de l'évènement contient le nouvel objet {{domxref("IDBCursor")}} et la valeur (<code>value</code>) de ce curseur est un clône de la valeur référencée</li>
-   <li>Si aucun enregistrement n'est trouvé la propriété <code>result</code> de l'évènement vaudra <code>null</code>.</li>
-  </ul>
- </li>
-</ul>
+- Si aucun intervalle de clé n'est spécifié ou qu'il vaut {{jsxref("null")}}, l'intervalle résultant contiendra l'ensemble des enregistrements
+- L'évènement `success` est toujours déclenché :
 
-<p>{{AvailableInWorkers}}</p>
+  - Si un enregistrement est trouvé la propriété `result` de l'évènement contient le nouvel objet {{domxref("IDBCursor")}} et la valeur (`value`) de ce curseur est un clône de la valeur référencée
+  - Si aucun enregistrement n'est trouvé la propriété `result` de l'évènement vaudra `null`.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+{{AvailableInWorkers}}
 
-<pre class="syntaxbox">var request = myIndex.openCursor(keyRange,direction);</pre>
+## Syntaxe
 
-<h3 id="Paramètres">Paramètres</h3>
+    var request = myIndex.openCursor(keyRange,direction);
 
-<dl>
- <dt><code>keyRange</code> {{optional_inline}}</dt>
- <dd>L'intervalle de clé ({{domxref("IDBKeyRange")}}) sur lequel se déplace le curseur. Si aucun argument n'est passé, la valeur par défaut sera un intervalle qui englobe tous les enregistrements du magasin d'objets.</dd>
- <dt><code>direction</code> {{optional_inline}}</dt>
- <dd>La direction dans laquelle se déplace le curseur (la propriété <code>direction</code> de l'objet {{domxref("IDBCursor.direction")}}). La valeur par défaut est <code>"next"</code>.</dd>
-</dl>
+### Paramètres
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+- `keyRange` {{optional_inline}}
+  - : L'intervalle de clé ({{domxref("IDBKeyRange")}}) sur lequel se déplace le curseur. Si aucun argument n'est passé, la valeur par défaut sera un intervalle qui englobe tous les enregistrements du magasin d'objets.
+- `direction` {{optional_inline}}
+  - : La direction dans laquelle se déplace le curseur (la propriété `direction` de l'objet {{domxref("IDBCursor.direction")}}). La valeur par défaut est `"next"`.
 
-<p>Un objet {{domxref("IDBRequest")}} sur lequel les évènements associés à l'opération seront déclenchés.</p>
+### Valeur de retour
 
-<h3 id="Exceptions">Exceptions</h3>
+Un objet {{domxref("IDBRequest")}} sur lequel les évènements associés à l'opération seront déclenchés.
 
-<p>Cette méthode peut déclencher une {{domxref("DOMException")}} dont le type peut être l'un des suivant :</p>
+### Exceptions
+
+Cette méthode peut déclencher une {{domxref("DOMException")}} dont le type peut être l'un des suivant :
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Type d'exception</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>TransactionInactiveError</td>
-   <td>La transaction pour cet index est inactive.</td>
-  </tr>
-  <tr>
-   <td><code>TypeError</code></td>
-   <td>La valeur du paramètre pour la direction est invalide.</td>
-  </tr>
-  <tr>
-   <td>DataError</td>
-   <td>
-    <p>La clé ou l'intervalle de clé fourni contient une clé invalide.</p>
-   </td>
-  </tr>
-  <tr>
-   <td><code>InvalidStateError</code></td>
-   <td>L'index a été supprimé ou déplacé.</td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th scope="col">Type d'exception</th>
+      <th scope="col">Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>TransactionInactiveError</td>
+      <td>La transaction pour cet index est inactive.</td>
+    </tr>
+    <tr>
+      <td><code>TypeError</code></td>
+      <td>La valeur du paramètre pour la direction est invalide.</td>
+    </tr>
+    <tr>
+      <td>DataError</td>
+      <td>
+        <p>La clé ou l'intervalle de clé fourni contient une clé invalide.</p>
+      </td>
+    </tr>
+    <tr>
+      <td><code>InvalidStateError</code></td>
+      <td>L'index a été supprimé ou déplacé.</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Dans l'exemple suivant, on ouvre une transaction puis un magasin d'objet et enfin l'index <code>lName</code>.</p>
+Dans l'exemple suivant, on ouvre une transaction puis un magasin d'objet et enfin l'index `lName`.
 
-<p>Ensuite, on parcourt les enregistrements pour insérer les données dans un tableau HTML. En utilisant la méthode {{domxref("IDBIndex.openCursor")}} qui travaille de la même façon que la méthode {{domxref("IDBObjectStore.openCursor")}} de l'{{domxref("IDBObjectStore","accès")}} au magasin d'objet sauf que les enregistrements sont renvoyés dans l'ordre de l'index et non celui du magasin d'objet.</p>
+Ensuite, on parcourt les enregistrements pour insérer les données dans un tableau HTML. En utilisant la méthode {{domxref("IDBIndex.openCursor")}} qui travaille de la même façon que la méthode {{domxref("IDBObjectStore.openCursor")}} de l'{{domxref("IDBObjectStore","accès")}} au magasin d'objet sauf que les enregistrements sont renvoyés dans l'ordre de l'index et non celui du magasin d'objet.
 
-<pre class="brush:js">function displayDataByIndex() {
+```js
+function displayDataByIndex() {
   tableEntry.innerHTML = '';
 
   //ouvre un transaction
@@ -101,14 +96,14 @@ translation_of: Web/API/IDBIndex/openCursor
     var cursor = request.result;
     if(cursor) {
       var tableRow = document.createElement('tr');
-      tableRow.innerHTML =   '&lt;td&gt;' + cursor.value.id + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.lName + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.fName + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.jTitle + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.company + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.eMail + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.phone + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.age + '&lt;/td&gt;';
+      tableRow.innerHTML =   '<td>' + cursor.value.id + '</td>'
+                           + '<td>' + cursor.value.lName + '</td>'
+                           + '<td>' + cursor.value.fName + '</td>'
+                           + '<td>' + cursor.value.jTitle + '</td>'
+                           + '<td>' + cursor.value.company + '</td>'
+                           + '<td>' + cursor.value.eMail + '</td>'
+                           + '<td>' + cursor.value.phone + '</td>'
+                           + '<td>' + cursor.value.age + '</td>';
       tableEntry.appendChild(tableRow);
 
       cursor.continue();
@@ -116,41 +111,27 @@ translation_of: Web/API/IDBIndex/openCursor
       console.log('Tous les enregistrements ont été affichés.');
     }
   };
-};</pre>
+};
+```
 
-<div class="note">
-  <p><strong>Note :</strong> pour un exemple fonctionnel complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">application To-do</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple</a>).</p>
-</div>
+> **Note :** pour un exemple fonctionnel complet, voir notre [application To-do](https://github.com/mdn/to-do-notifications/) ([exemple](https://mdn.github.io/to-do-notifications/)).
 
-<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('IndexedDB', '#widl-IDBIndex-openCursor-IDBRequest-any-range-IDBCursorDirection-direction', 'openCursor()')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                                                    | État                         | Commentaires |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------ |
+| {{SpecName('IndexedDB', '#widl-IDBIndex-openCursor-IDBRequest-any-range-IDBCursorDirection-direction', 'openCursor()')}} | {{Spec2('IndexedDB')}} |              |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.IDBIndex.openCursor")}}</p>
+{{Compat("api.IDBIndex.openCursor")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
- <li>Initier une connexion : {{domxref("IDBDatabase")}}</li>
- <li>Utiliser les transactions : {{domxref("IDBTransaction")}}</li>
- <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
- <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li>
- <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li>
- <li>Exemple de référence : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li>
-</ul>
+- [Utiliser IndexedDB](/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB)
+- Initier une connexion : {{domxref("IDBDatabase")}}
+- Utiliser les transactions : {{domxref("IDBTransaction")}}
+- Définir un intervalle de clés : {{domxref("IDBKeyRange")}}
+- Récupérer et modifier les données : {{domxref("IDBObjectStore")}}
+- Utiliser les curseurs {{domxref("IDBCursor")}}
+- Exemple de référence : [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages) ([exemple _live_](https://mdn.github.io/to-do-notifications/)).
diff --git a/files/fr/web/api/idbindex/openkeycursor/index.md b/files/fr/web/api/idbindex/openkeycursor/index.md
index a52f7c4e8e..9e5e8a9114 100644
--- a/files/fr/web/api/idbindex/openkeycursor/index.md
+++ b/files/fr/web/api/idbindex/openkeycursor/index.md
@@ -10,78 +10,80 @@ tags:
   - openKeyCursor
 translation_of: Web/API/IDBIndex/openKeyCursor
 ---
-<div>{{APIRef("IndexedDB")}}</div>
+{{APIRef("IndexedDB")}}
 
-<p>La méthode <strong><code>openKeyCursor()</code></strong> de {{domxref("IDBIndex")}} renvoie un objet {{domxref("IDBRequest")}} et, dans un <em>thread</em> séparé, crée un curseur sur l'intervalle de clé passé en argument pour l'index courant.</p>
+La méthode **`openKeyCursor()`** de {{domxref("IDBIndex")}} renvoie un objet {{domxref("IDBRequest")}} et, dans un _thread_ séparé, crée un curseur sur l'intervalle de clé passé en argument pour l'index courant.
 
-<p>Cette méthode positionne le curseur sur la clé appropriée, dans la direction indiquée :</p>
+Cette méthode positionne le curseur sur la clé appropriée, dans la direction indiquée :
 
-<ul>
- <li>si l'intervalle de clé n'est pas défini ou s'il est nul, l'intervalle englobera l'ensemble des clés</li>
- <li>si au moins une clé correspond à l'intervalle de clés, un évènement <code>success</code> est déclenché pour la requête qui est renvoyée. La propriété <code>result</code> de cet évènement contiendra un objet {{domxref("IDBCursor")}} dont la propriété <code>value</code> correspond à l'enregistrement qui a été traduit.</li>
- <li>Si aucun intervalle ne correspond à l'intervalle indiqué, un évènement <code>error</code> est déclenché pour la requête.</li>
-</ul>
+- si l'intervalle de clé n'est pas défini ou s'il est nul, l'intervalle englobera l'ensemble des clés
+- si au moins une clé correspond à l'intervalle de clés, un évènement `success` est déclenché pour la requête qui est renvoyée. La propriété `result` de cet évènement contiendra un objet {{domxref("IDBCursor")}} dont la propriété `value` correspond à l'enregistrement qui a été traduit.
+- Si aucun intervalle ne correspond à l'intervalle indiqué, un évènement `error` est déclenché pour la requête.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var monIndex = objectStore.index("index");
-var request = monIndex.openKeyCursor(keyRange,direction);</pre>
+    var monIndex = objectStore.index("index");
+    var request = monIndex.openKeyCursor(keyRange,direction);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>keyRange</code> {{optional_inline}}</dt>
- <dd>L'{{domxref("IDBKeyRange","intervalle de clé")}} sur lequel se déplace le curseur. On peut passer un clé seule qui sera alors considéré comme une {{domxref("IDBKeyRange.only","intervalle seule")}}. Par défaut le curseur se déplace sur l'ensemble des clés de l'index.</dd>
- <dt><code>direction</code> {{optional_inline}}</dt>
- <dd>La {{domxref("IDBCursor.direction","direction")}} du {{domxref("IDBCursor","curseur")}} qui défini le sens d'itération. par défaut "next".</dd>
-</dl>
+- `keyRange` {{optional_inline}}
+  - : L'{{domxref("IDBKeyRange","intervalle de clé")}} sur lequel se déplace le curseur. On peut passer un clé seule qui sera alors considéré comme une {{domxref("IDBKeyRange.only","intervalle seule")}}. Par défaut le curseur se déplace sur l'ensemble des clés de l'index.
+- `direction` {{optional_inline}}
+  - : La {{domxref("IDBCursor.direction","direction")}} du {{domxref("IDBCursor","curseur")}} qui défini le sens d'itération. par défaut "next".
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Un objet {{domxref("IDBRequest")}} sur lequel on peut écouter les évènements associés à l'opération lancée par la méthode.</p>
+Un objet {{domxref("IDBRequest")}} sur lequel on peut écouter les évènements associés à l'opération lancée par la méthode.
 
-<h3 id="Exceptions">Exceptions</h3>
+### Exceptions
 
-<p>Cette méthode peut lever une exception :</p>
+Cette méthode peut lever une exception :
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Type d'exception</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>TransactionInactiveError</td>
-   <td>La transaction pour cet index {{domxref("IDBIndex")}} est inactive.</td>
-  </tr>
-  <tr>
-   <td><code>TypeError</code></td>
-   <td>La valeur du paramètre pour la direction est invalide.</td>
-  </tr>
-  <tr>
-   <td><code>DataError</code></td>
-   <td>
-    <p>La clé ou l'intervalle de clé fourni contient une clé invalide.</p>
-   </td>
-  </tr>
-  <tr>
-   <td><code>InvalidStateError</code></td>
-   <td>L'index {{domxref("IDBIndex")}} a été supprimé ou déplacé.</td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th scope="col">Type d'exception</th>
+      <th scope="col">Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>TransactionInactiveError</td>
+      <td>
+        La transaction pour cet index {{domxref("IDBIndex")}} est
+        inactive.
+      </td>
+    </tr>
+    <tr>
+      <td><code>TypeError</code></td>
+      <td>La valeur du paramètre pour la direction est invalide.</td>
+    </tr>
+    <tr>
+      <td><code>DataError</code></td>
+      <td>
+        <p>La clé ou l'intervalle de clé fourni contient une clé invalide.</p>
+      </td>
+    </tr>
+    <tr>
+      <td><code>InvalidStateError</code></td>
+      <td>
+        L'index {{domxref("IDBIndex")}} a été supprimé ou déplacé.
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Dans l'exemple suivant on ouvre une transaction puis un magasin d'objet et enfin l'index <code>lName</code>.</p>
+Dans l'exemple suivant on ouvre une transaction puis un magasin d'objet et enfin l'index `lName`.
 
-<p>Ensuite, on itère sur l'ensemble des enregistrements pour en insérer leur clé dans un tableau HTML. En utilisant la méthode {{domxref("IDBIndex.openKeyCursor")}} qui travaille de la même façon que la méthode {{domxref("IDBObjectStore.openKeyCursor")}} de l'{{domxref("IDBObjectStore","accès")}} au magasin d'objet sauf que les enregistrements sont renvoyés dans l'ordre de l'index et non celui du magasin d'objet.</p>
+Ensuite, on itère sur l'ensemble des enregistrements pour en insérer leur clé dans un tableau HTML. En utilisant la méthode {{domxref("IDBIndex.openKeyCursor")}} qui travaille de la même façon que la méthode {{domxref("IDBObjectStore.openKeyCursor")}} de l'{{domxref("IDBObjectStore","accès")}} au magasin d'objet sauf que les enregistrements sont renvoyés dans l'ordre de l'index et non celui du magasin d'objet.
 
-<pre class="brush:js">function displayDataByIndex() {
+```js
+function displayDataByIndex() {
   tableEntry.innerHTML = '';
 
   //ouvre un transaction
@@ -103,7 +105,7 @@ var request = monIndex.openKeyCursor(keyRange,direction);</pre>
       // il n'y as pas de cursor.value contrairement à openCursor()
 
       var tableRow = document.createElement('tr');
-      tableRow.innerHTML =   '&lt;td&gt;' + cursor.key + '&lt;/td&gt;'
+      tableRow.innerHTML =   '<td>' + cursor.key + '</td>'
       tableEntry.appendChild(tableRow);
 
       //on relance la requête pour la position suivante du curseur
@@ -112,40 +114,26 @@ var request = monIndex.openKeyCursor(keyRange,direction);</pre>
       console.log('Toutes les clé ont été affichés.');
     }
   };
-};</pre>
+};
+```
 
-<div class="note">
-  <p><strong>Note :</strong> pour un exemple fonctionnel complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">application To-do</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple</a>).</p>
-</div>
+> **Note :** pour un exemple fonctionnel complet, voir notre [application To-do](https://github.com/mdn/to-do-notifications/) ([exemple](https://mdn.github.io/to-do-notifications/)).
 
-<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('IndexedDB', '#widl-IDBIndex-openKeyCursor-IDBRequest-any-range-IDBCursorDirection-direction', 'openKeyCursor()')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                                                            | État                         | Commentaires |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------ |
+| {{SpecName('IndexedDB', '#widl-IDBIndex-openKeyCursor-IDBRequest-any-range-IDBCursorDirection-direction', 'openKeyCursor()')}} | {{Spec2('IndexedDB')}} |              |
 
-<h2 id="Browser_compatibility">Browser compatibility</h2>
+## Browser compatibility
 
-<p>{{Compat("api.IDBIndex.openKeyCursor")}}</p>
+{{Compat("api.IDBIndex.openKeyCursor")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
- <li>Initier une connexion : {{domxref("IDBDatabase")}}</li>
- <li>Utiliser les transactions : {{domxref("IDBTransaction")}}</li>
- <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
- <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li>
- <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li>
-</ul>
+- [Utiliser IndexedDB](/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB)
+- Initier une connexion : {{domxref("IDBDatabase")}}
+- Utiliser les transactions : {{domxref("IDBTransaction")}}
+- Définir un intervalle de clés : {{domxref("IDBKeyRange")}}
+- Récupérer et modifier les données : {{domxref("IDBObjectStore")}}
+- Utiliser les curseurs {{domxref("IDBCursor")}}
diff --git a/files/fr/web/api/idbindex/unique/index.md b/files/fr/web/api/idbindex/unique/index.md
index 4e199912a4..5914f7aab3 100644
--- a/files/fr/web/api/idbindex/unique/index.md
+++ b/files/fr/web/api/idbindex/unique/index.md
@@ -9,31 +9,32 @@ tags:
   - Reference
 translation_of: Web/API/IDBIndex/unique
 ---
-<div>{{APIRef("IndexedDB")}}</div>
+{{APIRef("IndexedDB")}}
 
-<p>La propriété <strong><code>unique</code></strong>, rattachée à l'interface <code>IDBIndex</code>, est un booléen qui indique si l'index utilisé permet d'avoir des clés dupliquées.</p>
+La propriété **`unique`**, rattachée à l'interface `IDBIndex`, est un booléen qui indique si l'index utilisé permet d'avoir des clés dupliquées.
 
-<p>Cette caractéristique est décidée lors de la création de l'index, avec la méthode {{domxref("IDBObjectStore.createIndex")}}. Cette méthode prend un paramètre optionnel, <code>unique</code>, qui, s'il vaut <code>true</code>, indique que l'index ne permettra pas d'avoir de clés dupliquées.</p>
+Cette caractéristique est décidée lors de la création de l'index, avec la méthode {{domxref("IDBObjectStore.createIndex")}}. Cette méthode prend un paramètre optionnel, `unique`, qui, s'il vaut `true`, indique que l'index ne permettra pas d'avoir de clés dupliquées.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var myIndex = objectStore.index('index');</pre>
+    var myIndex = objectStore.index('index');
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>Un booléen qui vaut <code>true</code> si l'index permet d'avoir des valeurs dupliquées pour une même clé ou <code>false</code> s'il n'est pas possible d'avoir de clés dupliquées.</p>
+Un booléen qui vaut `true` si l'index permet d'avoir des valeurs dupliquées pour une même clé ou `false` s'il n'est pas possible d'avoir de clés dupliquées.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans l'exemple suivant, on ouvre une transaction en lecture sur un magasin d'objets puis on récupère l'index <code>lName</code>. On ouvre alors un curseur sur l'index grâce à {{domxref("IDBIndex.openCursor")}} (cela fonctionne de façon analogue à l'ouverture d'un curseur sur le magasin d'objets avec {{domxref("IDBObjectStore.openCursor")}} sauf qu'ici, les enregistrements sont triés selon l'index et pas selon la clé primaire.</p>
+Dans l'exemple suivant, on ouvre une transaction en lecture sur un magasin d'objets puis on récupère l'index `lName`. On ouvre alors un curseur sur l'index grâce à {{domxref("IDBIndex.openCursor")}} (cela fonctionne de façon analogue à l'ouverture d'un curseur sur le magasin d'objets avec {{domxref("IDBObjectStore.openCursor")}} sauf qu'ici, les enregistrements sont triés selon l'index et pas selon la clé primaire.
 
-<p>On affiche le caractère unique des clé dans la console (ici, on voit que la propriété vaut <code>false</code>).</p>
+On affiche le caractère unique des clé dans la console (ici, on voit que la propriété vaut `false`).
 
-<p>Enfin, on parcourt chaque enregistrement et on insère les données dans le tableau HTML (pour voir un exemple complet, consulter <a href="https://github.com/mdn/IDBIndex-example">notre dépôt IDBIndex-example</a> (<a href="https://mdn.github.io/IDBIndex-example/">voir la démonstration <em>live</em></a>).</p>
+Enfin, on parcourt chaque enregistrement et on insère les données dans le tableau HTML (pour voir un exemple complet, consulter [notre dépôt IDBIndex-example](https://github.com/mdn/IDBIndex-example) ([voir la démonstration _live_](https://mdn.github.io/IDBIndex-example/)).
 
-<pre class="brush: js">function displayDataByIndex() {
+```js
+function displayDataByIndex() {
   tableEntry.innerHTML = '';
   var transaction = db.transaction(['contactsList'], 'readonly');
   var objectStore = transaction.objectStore('contactsList');
@@ -45,14 +46,14 @@ translation_of: Web/API/IDBIndex/unique
     var cursor = event.target.result;
     if(cursor) {
       var tableRow = document.createElement('tr');
-      tableRow.innerHTML =   '&lt;td&gt;' + cursor.value.id + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.lName + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.fName + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.jTitle + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.company + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.eMail + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.phone + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.age + '&lt;/td&gt;';
+      tableRow.innerHTML =   '<td>' + cursor.value.id + '</td>'
+                           + '<td>' + cursor.value.lName + '</td>'
+                           + '<td>' + cursor.value.fName + '</td>'
+                           + '<td>' + cursor.value.jTitle + '</td>'
+                           + '<td>' + cursor.value.company + '</td>'
+                           + '<td>' + cursor.value.eMail + '</td>'
+                           + '<td>' + cursor.value.phone + '</td>'
+                           + '<td>' + cursor.value.age + '</td>';
       tableEntry.appendChild(tableRow);
 
       cursor.continue();
@@ -60,37 +61,25 @@ translation_of: Web/API/IDBIndex/unique
       console.log('Les éléments sont affichés.');
     }
   };
-};</pre>
-
-<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('IndexedDB', '#widl-IDBIndex-unique', 'unique')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.IDBIndex.unique")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
- <li>Initier une connexion : {{domxref("IDBDatabase")}}</li>
- <li>Utiliser les transactions : {{domxref("IDBTransaction")}}</li>
- <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
- <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li>
- <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li>
- <li>Exemple de référence : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li>
-</ul>
+};
+```
+
+## Spécifications
+
+| Spécification                                                                    | État                         | Commentaires |
+| -------------------------------------------------------------------------------- | ---------------------------- | ------------ |
+| {{SpecName('IndexedDB', '#widl-IDBIndex-unique', 'unique')}} | {{Spec2('IndexedDB')}} |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.IDBIndex.unique")}}
+
+## Voir aussi
+
+- [Utiliser IndexedDB](/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB)
+- Initier une connexion : {{domxref("IDBDatabase")}}
+- Utiliser les transactions : {{domxref("IDBTransaction")}}
+- Définir un intervalle de clés : {{domxref("IDBKeyRange")}}
+- Récupérer et modifier les données : {{domxref("IDBObjectStore")}}
+- Utiliser les curseurs {{domxref("IDBCursor")}}
+- Exemple de référence : [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages) ([exemple _live_](https://mdn.github.io/to-do-notifications/)).
diff --git a/files/fr/web/api/idbkeyrange/bound/index.md b/files/fr/web/api/idbkeyrange/bound/index.md
index e235d21a8c..36f8f75635 100644
--- a/files/fr/web/api/idbkeyrange/bound/index.md
+++ b/files/fr/web/api/idbkeyrange/bound/index.md
@@ -9,53 +9,51 @@ tags:
   - Reference
 translation_of: Web/API/IDBKeyRange/bound
 ---
-<div>{{APIRef("IndexedDB")}}</div>
+{{APIRef("IndexedDB")}}
 
-<p>La méthode <strong><code>bound()</code></strong>, rattachée à l'interface {{domxref("IDBKeyRange")}}, renvoie un intervalle de clé délimité par une borne inférieure et une borne supérieure.</p>
+La méthode **`bound()`**, rattachée à l'interface {{domxref("IDBKeyRange")}}, renvoie un intervalle de clé délimité par une borne inférieure et une borne supérieure.
 
-<p>L'intervalle peut être ouvert (les limites sont exclues) ou fermé (les limites sont incluses). Par défaut, l'intervalle est fermé.</p>
+L'intervalle peut être ouvert (les limites sont exclues) ou fermé (les limites sont incluses). Par défaut, l'intervalle est fermé.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">myKeyRange = IDBKeyRange.bound(lower, upper, lowerOpen, upperOpen);</pre>
+```js
+myKeyRange = IDBKeyRange.bound(lower, upper, lowerOpen, upperOpen);
+```
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>lower</code></dt>
- <dd>La limite inférieure de l'intervalle.</dd>
- <dt><code>upper</code></dt>
- <dd>La limite supérieure de l'intervalle.</dd>
- <dt><code>lowerOpen</code> {{optional_inline}}</dt>
- <dd>Si cette valeur vaut <code>false</code> (la valeur par defaut), l'intervalle contient la limite inférieure.</dd>
- <dt><code>upperOpen</code> {{optional_inline}}</dt>
- <dd>Si cette valeur vaut <code>false</code> (la valeur par défaut), l'intervalle contient la limite supérieure.</dd>
-</dl>
+- `lower`
+  - : La limite inférieure de l'intervalle.
+- `upper`
+  - : La limite supérieure de l'intervalle.
+- `lowerOpen` {{optional_inline}}
+  - : Si cette valeur vaut `false` (la valeur par defaut), l'intervalle contient la limite inférieure.
+- `upperOpen` {{optional_inline}}
+  - : Si cette valeur vaut `false` (la valeur par défaut), l'intervalle contient la limite supérieure.
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Un objet {{domxref("IDBKeyRange")}} qui représente l'intervalle de clé.</p>
+Un objet {{domxref("IDBKeyRange")}} qui représente l'intervalle de clé.
 
-<h3 id="Exceptions">Exceptions</h3>
+### Exceptions
 
-<dl>
- <dt><code>DataError</code></dt>
- <dd>Cette exception {{domxref("DOMException")}} est levée si :
- <ul>
-  <li>Une des limites passé n'est pas valide.</li>
-  <li>La limite inférieur est supèrieur à la limite supérieur.</li>
-  <li>Les limites correspondent et l'intervalle est ouvert.</li>
- </ul>
- </dd>
-</dl>
+- `DataError`
 
-<h2 id="Exemples">Exemples</h2>
+  - : Cette exception {{domxref("DOMException")}} est levée si :
 
-<p>Dans l'exemple qui suit, on illustre comment créer un intervalle de clé. On déclare <code>keyRangeValue = IDBKeyRange.bound("A", "F");</code> ce qui représente un intervalle entre "A" et "F". Ensuite, on ouvre une transaction grâce à un objet {{domxref("IDBTransaction")}} puis on ouvre un magasin d'objets et on ouvre un curseur avec la méthode {{domxref("IDBObjectStore.openCursor")}} pour lequel on indique <code>keyRangeValue</code> comme intervalle de clé correspondant. Cela signifie que le curseur ne parcourera que les enregistrements dont les clés sont contenues dans cet intervalle. L'intervalle contient bien les valeurs "A" et "F" car les bornes sont incluses. Si on avait utilisé <code>IDBKeyRange.bound("A", "F", true, true);</code>, l'intervalle n'aurait pas inclus "A" et "F" mais uniquement les valeurs intermédiaires.</p>
+    - Une des limites passé n'est pas valide.
+    - La limite inférieur est supèrieur à la limite supérieur.
+    - Les limites correspondent et l'intervalle est ouvert.
 
-<pre class="brush: js">function displayData() {
+## Exemples
+
+Dans l'exemple qui suit, on illustre comment créer un intervalle de clé. On déclare `keyRangeValue = IDBKeyRange.bound("A", "F");` ce qui représente un intervalle entre "A" et "F". Ensuite, on ouvre une transaction grâce à un objet {{domxref("IDBTransaction")}} puis on ouvre un magasin d'objets et on ouvre un curseur avec la méthode {{domxref("IDBObjectStore.openCursor")}} pour lequel on indique `keyRangeValue` comme intervalle de clé correspondant. Cela signifie que le curseur ne parcourera que les enregistrements dont les clés sont contenues dans cet intervalle. L'intervalle contient bien les valeurs "A" et "F" car les bornes sont incluses. Si on avait utilisé `IDBKeyRange.bound("A", "F", true, true);`, l'intervalle n'aurait pas inclus "A" et "F" mais uniquement les valeurs intermédiaires.
+
+```js
+function displayData() {
   var keyRangeValue = IDBKeyRange.bound("A", "F");
 
   var transaction = db.transaction(['fThings'], 'readonly');
@@ -65,7 +63,7 @@ translation_of: Web/API/IDBKeyRange/bound
     var cursor = event.target.result;
       if(cursor) {
         var listItem = document.createElement('li');
-        listItem.innerHTML = '&lt;strong&gt;' + cursor.value.fThing + '&lt;/strong&gt;, ' + cursor.value.fRating;
+        listItem.innerHTML = '<strong>' + cursor.value.fThing + '</strong>, ' + cursor.value.fRating;
         list.appendChild(listItem);
 
         cursor.continue();
@@ -73,43 +71,27 @@ translation_of: Web/API/IDBKeyRange/bound
         console.log('Les éléments ont été affichés.');
       }
     };
-  };</pre>
-
-<div class="note">
-<p><strong>Note :</strong> Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter <a href="https://github.com/mdn/IDBKeyRange-example">le dépôt GitHub IDBKeyRange-example</a> (<a href="https://mdn.github.io/IDBKeyRange-example/">ainsi que la démonstration associée</a>).</p>
-</div>
-
-<h2 id="Spécification">Spécification</h2>
-
-<div>
-<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('IndexedDB', '#widl-IDBKeyRange-bound-IDBKeyRange-any-lower-any-upper-boolean-lowerOpen-boolean-upperOpen', 'bound()')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.IDBKeyRange.bound")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
- <li>Initier une connexion : {{domxref("IDBDatabase")}}</li>
- <li>Utiliser les transactions : {{domxref("IDBTransaction")}}</li>
- <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
- <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li>
- <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li>
- <li>Exemple de référence : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li>
-</ul>
+  };
+```
+
+> **Note :** Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter [le dépôt GitHub IDBKeyRange-example](https://github.com/mdn/IDBKeyRange-example) ([ainsi que la démonstration associée](https://mdn.github.io/IDBKeyRange-example/)).
+
+## Spécification
+
+| Spécification                                                                                                                                                                    | État                         | Commentaires |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------ |
+| {{SpecName('IndexedDB', '#widl-IDBKeyRange-bound-IDBKeyRange-any-lower-any-upper-boolean-lowerOpen-boolean-upperOpen', 'bound()')}} | {{Spec2('IndexedDB')}} |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.IDBKeyRange.bound")}}
+
+## Voir aussi
+
+- [Utiliser IndexedDB](/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB)
+- Initier une connexion : {{domxref("IDBDatabase")}}
+- Utiliser les transactions : {{domxref("IDBTransaction")}}
+- Définir un intervalle de clés : {{domxref("IDBKeyRange")}}
+- Récupérer et modifier les données : {{domxref("IDBObjectStore")}}
+- Utiliser les curseurs {{domxref("IDBCursor")}}
+- Exemple de référence : [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages) ([exemple _live_](https://mdn.github.io/to-do-notifications/)).
diff --git a/files/fr/web/api/idbkeyrange/includes/index.md b/files/fr/web/api/idbkeyrange/includes/index.md
index 911a8c044b..dbef422d06 100644
--- a/files/fr/web/api/idbkeyrange/includes/index.md
+++ b/files/fr/web/api/idbkeyrange/includes/index.md
@@ -9,93 +9,80 @@ tags:
   - Reference
 translation_of: Web/API/IDBKeyRange/includes
 ---
-<div>{{APIRef("IndexedDB")}}</div>
+{{APIRef("IndexedDB")}}
 
-<p>La méthode <code><strong>includes()</strong></code>, rattachée à l'interface {{domxref("IDBKeyRange")}}, renvoie un booléen si la clé est contenue dans un intervalle de clé.</p>
+La méthode **`includes()`**, rattachée à l'interface {{domxref("IDBKeyRange")}}, renvoie un booléen si la clé est contenue dans un intervalle de clé.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">myIncludesResult = myKeyRange.includes('A');</pre>
+```js
+myIncludesResult = myKeyRange.includes('A');
+```
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>key</code></dt>
- <dd>La clé dont on souhaite savoir si elle est dans l'intervalle.</dd>
-</dl>
+- `key`
+  - : La clé dont on souhaite savoir si elle est dans l'intervalle.
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Un booléen.</p>
+Un booléen.
 
-<h3 id="Exceptions">Exceptions</h3>
+### Exceptions
 
-<p>Cette méthode peut lever une exception {{domxref("DOMException")}} de type {{domxref("DataError")}} lorsque la clé fournie n'est pas une clé valide.</p>
+Cette méthode peut lever une exception {{domxref("DOMException")}} de type {{domxref("DataError")}} lorsque la clé fournie n'est pas une clé valide.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: js">var keyRangeValue = IDBKeyRange.bound('A', 'K', false, false);
+```js
+var keyRangeValue = IDBKeyRange.bound('A', 'K', false, false);
 
 var monResultat = keyRangeValue.includes('F');
 // Renvoie true
 
 var monResultat = keyRangeValue.includes('W');
 // Renvoie false
-</pre>
+```
 
-<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
+## Prothèse d'émulation (_polyfill_)
 
-<p>La méhode <code>includes()</code> a été ajoutée à partir de la deuxième édition de la spécification d'Indexed DB. Pour les navigateurs qui ne prennent pas en charge cette fonctionnalité, on peut utiliser la prothèse suivante.</p>
+La méhode `includes()` a été ajoutée à partir de la deuxième édition de la spécification d'Indexed DB. Pour les navigateurs qui ne prennent pas en charge cette fonctionnalité, on peut utiliser la prothèse suivante.
 
-<pre class="brush: js">IDBKeyRange.prototype.includes = IDBKeyRange.prototype.includes || function(key) {
+```js
+IDBKeyRange.prototype.includes = IDBKeyRange.prototype.includes || function(key) {
   var r = this, c;
   if (r.lower !== undefined) {
     c = indexedDB.cmp(key, r.lower);
-    if (r.lowerOpen &amp;&amp; c &lt;= 0) return false;
-    if (!r.lowerOpen &amp;&amp; c &lt; 0) return false;
+    if (r.lowerOpen && c <= 0) return false;
+    if (!r.lowerOpen && c < 0) return false;
   }
   if (r.upper !== undefined) {
     c = indexedDB.cmp(key, r.upper);
-    if (r.upperOpen &amp;&amp; c &gt;= 0) return false;
-    if (!r.upperOpen &amp;&amp; c &gt; 0) return false;
+    if (r.upperOpen && c >= 0) return false;
+    if (!r.upperOpen && c > 0) return false;
   }
   return true;
 };
-</pre>
-
-<h2 id="Specifications">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('IndexedDB 2', '#dom-idbkeyrange-includes', 'includes()')}}</td>
-      <td>{{Spec2('IndexedDB')}}</td>
-      <td> </td>
-    </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.IDBKeyRange.includes")}}</p>
-
-<h2 id="See_also">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
- <li>Initier une connexion : {{domxref("IDBDatabase")}}</li>
- <li>Utiliser les transactions : {{domxref("IDBTransaction")}}</li>
- <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
- <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li>
- <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li>
- <li>Exemple de référence : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li>
-</ul>
+```
+
+## Spécifications
+
+| Spécification                                                                                | Statut                       | Commentaire |
+| -------------------------------------------------------------------------------------------- | ---------------------------- | ----------- |
+| {{SpecName('IndexedDB 2', '#dom-idbkeyrange-includes', 'includes()')}} | {{Spec2('IndexedDB')}} |             |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.IDBKeyRange.includes")}}
+
+## Voir aussi
+
+- [Utiliser IndexedDB](/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB)
+- Initier une connexion : {{domxref("IDBDatabase")}}
+- Utiliser les transactions : {{domxref("IDBTransaction")}}
+- Définir un intervalle de clés : {{domxref("IDBKeyRange")}}
+- Récupérer et modifier les données : {{domxref("IDBObjectStore")}}
+- Utiliser les curseurs {{domxref("IDBCursor")}}
+- Exemple de référence : [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages) ([exemple _live_](https://mdn.github.io/to-do-notifications/)).
diff --git a/files/fr/web/api/idbkeyrange/index.md b/files/fr/web/api/idbkeyrange/index.md
index 9962a1488a..47d0cde0fd 100644
--- a/files/fr/web/api/idbkeyrange/index.md
+++ b/files/fr/web/api/idbkeyrange/index.md
@@ -12,125 +12,77 @@ tags:
   - TopicStub
 translation_of: Web/API/IDBKeyRange
 ---
-<div>{{APIRef("IndexedDB")}}</div>
-
-<p>L'interface <strong><code>IDBKeyRange</code></strong> de l'API <a href="/fr/docs/Web/API/API_IndexedDB">IndexedDB</a> représente un intervalle continue sur un type de donnée utilisé pour représenter des clés. Les enregistrements peuvent être récupérés depuis des objets {{domxref("IDBObjectStore")}} et {{domxref("IDBIndex")}} grâce à des clés ou à des intervalles de clé. Il est possible de préciser les bornes inférieure et supérieure de l'intervalle. Si les clés sont des chaînes de caractères, on pourrait ainsi parcourir l'ensemble des valeurs pour l'intervalle A–Z.</p>
-
-<p>Un intervalle de clé peut être une seule valeur ou un intervalle avec des bornes inférieure et supérieure. Si l'intervalle possède ces deux bornes, il est dit borné. S'il n'a aucune borne, il est non-borné. Un intervalle de clé borné peut être ouvert (les bornes sont exclues) ou fermé (les bornes sont inclues). Pour récupérer les différentes clés d'un intervalle donné, on peut utiliser les fragments de code suivants :</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Intervalle</th>
-   <th scope="col">Code</th>
-  </tr>
-  <tr>
-   <td>Toutes les clés ≤ <strong>x</strong></td>
-   <td>{{domxref("IDBKeyRange.upperBound")}}<code>(<strong>x</strong>)</code></td>
-  </tr>
-  <tr>
-   <td>Toutes les clés &lt; <strong>x</strong></td>
-   <td>{{domxref("IDBKeyRange.upperBound")}}<code>(<strong>x</strong>, true) </code></td>
-  </tr>
-  <tr>
-   <td>Toutes les clés ≥<strong> y</strong></td>
-   <td>{{domxref("IDBKeyRange.lowerBound")}}<code>(<strong>y</strong>)</code></td>
-  </tr>
-  <tr>
-   <td>Toutes les clés &gt;<strong> y</strong></td>
-   <td>{{domxref("IDBKeyRange.lowerBound")}}<code>(<strong>y</strong>, true)</code></td>
-  </tr>
-  <tr>
-   <td>Toutes les clés ≥ <strong>x</strong> &amp;&amp; ≤ <strong>y</strong></td>
-   <td>{{domxref("IDBKeyRange.bound")}}<code>(<strong>x</strong>, <strong>y</strong>)</code></td>
-  </tr>
-  <tr>
-   <td>Toutes les clés &gt; <strong>x</strong> &amp;&amp;&lt; <strong>y</strong></td>
-   <td>{{domxref("IDBKeyRange.bound")}}<code>(<strong>x</strong>, <strong>y</strong>, true, true)</code></td>
-  </tr>
-  <tr>
-   <td>Toutes les clés &gt; <strong>x</strong> &amp;&amp; ≤ <strong>y</strong></td>
-   <td>{{domxref("IDBKeyRange.bound")}}<code>(<strong>x</strong>, <strong>y</strong>, true, false)</code></td>
-  </tr>
-  <tr>
-   <td>Toutes les clés ≥ <strong>x</strong> &amp;&amp;&lt; <strong>y</strong></td>
-   <td>{{domxref("IDBKeyRange.bound")}}<code>(<strong>x</strong>, <strong>y</strong>, false, true)</code></td>
-  </tr>
-  <tr>
-   <td>La clé = <strong>z</strong></td>
-   <td>{{domxref("IDBKeyRange.only")}}<code>(<strong>z</strong>)</code></td>
-  </tr>
- </thead>
-</table>
-
-<p>Une clé est contenue dans un intervalle de clé lorsque les conditions suivantes sont réunies :</p>
-
-<ul>
- <li>La borne inférieure de l'intervalle de clé est :
-  <ul>
-   <li><code>undefined</code></li>
-   <li>Inférieure à la valeur de la clé</li>
-   <li>Égal à la valeur de la clé si <code>lowerOpen</code> est <code>false</code> (l'intervalle est fermé à gauche)</li>
-  </ul>
- </li>
- <li>La borne supérieure de l'intervalle de clé est :
-  <ul>
-   <li><code>undefined</code></li>
-   <li>Supérieure à la valeur de la clé</li>
-   <li>Égal à la valeur de la clé si <code>upperOpen</code> vaut <code>false</code> (l'intervalle est fermé à droite)</li>
-  </ul>
- </li>
-</ul>
-
-<p>{{AvailableInWorkers}}</p>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<dl>
- <dt>{{domxref("IDBKeyRange.lower")}} {{readonlyInline}}</dt>
- <dd>Cette propriété fournit la borne inférieure de l'intervalle de clé.</dd>
- <dt>{{domxref("IDBKeyRange.upper")}} {{readonlyInline}}</dt>
- <dd>Cette propriété fournit la borne supérieure de l'intervalle de clé.</dd>
- <dt>{{domxref("IDBKeyRange.lowerOpen")}} {{readonlyInline}}</dt>
- <dd>Cette méthode renvoie <code>false</code> si la borne inférieure est contenue dans l'intervalle de clé (autrement dit elle permet de vérifier si l'intervalle est ouvert à gauche).</dd>
- <dt>{{domxref("IDBKeyRange.upperOpen")}} {{readonlyInline}}</dt>
- <dd>Cette méthode renvoie <code>false</code> si la borne supérieure est contenue dans l'intervalle de clé (autrement dit elle permet de vérifier si l'intervalle est ouvert à droite).</dd>
-</dl>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<h3 id="Méthodes_statiques">Méthodes statiques</h3>
-
-<dl>
- <dt>{{domxref("IDBKeyRange.bound()")}}</dt>
- <dd>Cette méthode permet de créer un nouvel intervalle de clé avec une borne inférieure et une borne supérieure.</dd>
- <dt>{{domxref("IDBKeyRange.only()")}}</dt>
- <dd>Cette méthode crée un nouvel intervalle de clé qui ne contient qu'une valeur.</dd>
- <dt>{{domxref("IDBKeyRange.lowerBound()")}}</dt>
- <dd>Cette méthode crée un nouvel intervalle de clé avec une borne inférieure.</dd>
- <dt>{{domxref("IDBKeyRange.upperBound()")}}</dt>
- <dd>Cette méthode crée un nouvel intervalle de clé avec une borne supérieure.</dd>
-</dl>
-
-<h3 id="Méthodes_des_instances">Méthodes des instances</h3>
-
-
-
-<dl>
- <dt>{{domxref("IDBKeyRange.includes()")}}</dt>
- <dd>Cette méthode renvoie un booléen qui indique si la clé passée en argument est contenue dans l'intervalle de clé.</dd>
-</dl>
-
-
-
-<dl>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Dans l'exemple qui suit, on montre comment utiliser un intervalle de clé. Ici, on déclare un objet <code>keyRangeValue</code> qui représente un intervalle pour les valeurs entre "A" et "F". On ouvre une transaction grâce à {{domxref("IDBTransaction")}}, on ouvre également un magasin d'objets puis un curseur avec la méthode {{domxref("IDBObjectStore.openCursor")}} pour lequel on indique que <code>keyRangeValue</code> est l'intervalle de clé à considérer. Cela signifie que le curseur récupèrera uniquement les enregistrements pour lesquels les clés sont contenues dans cet intervalle. Cet intervalle est fermé, il inclut les valeur "A" and "F" (on n'a pas indiqué que ces bornes étaient ouvertes). Si on avait utilisé <code>IDBKeyRange.bound("A", "F", true, true);</code>, l'intervalle serait ouvert et ne contiendrait pas "A" ou "F" mais uniquement les valeurs intermédiaires.</p>
-
-<pre class="brush: js">function displayData() {
+{{APIRef("IndexedDB")}}
+
+L'interface **`IDBKeyRange`** de l'API [IndexedDB](/fr/docs/Web/API/API_IndexedDB) représente un intervalle continue sur un type de donnée utilisé pour représenter des clés. Les enregistrements peuvent être récupérés depuis des objets {{domxref("IDBObjectStore")}} et {{domxref("IDBIndex")}} grâce à des clés ou à des intervalles de clé. Il est possible de préciser les bornes inférieure et supérieure de l'intervalle. Si les clés sont des chaînes de caractères, on pourrait ainsi parcourir l'ensemble des valeurs pour l'intervalle A–Z.
+
+Un intervalle de clé peut être une seule valeur ou un intervalle avec des bornes inférieure et supérieure. Si l'intervalle possède ces deux bornes, il est dit borné. S'il n'a aucune borne, il est non-borné. Un intervalle de clé borné peut être ouvert (les bornes sont exclues) ou fermé (les bornes sont inclues). Pour récupérer les différentes clés d'un intervalle donné, on peut utiliser les fragments de code suivants :
+
+| Intervalle                         | Code                                                              |
+| ---------------------------------- | ----------------------------------------------------------------- |
+| Toutes les clés ≤ **x**            | {{domxref("IDBKeyRange.upperBound")}}`(x)`             |
+| Toutes les clés < **x**            | {{domxref("IDBKeyRange.upperBound")}}`(x, true)`       |
+| Toutes les clés ≥ **y**            | {{domxref("IDBKeyRange.lowerBound")}}`(y)`             |
+| Toutes les clés > **y**            | {{domxref("IDBKeyRange.lowerBound")}}`(y, true)`       |
+| Toutes les clés ≥ **x** && ≤ **y** | {{domxref("IDBKeyRange.bound")}}`(x, y)`              |
+| Toutes les clés > **x** &&< **y**  | {{domxref("IDBKeyRange.bound")}}`(x, y, true, true)`  |
+| Toutes les clés > **x** && ≤ **y** | {{domxref("IDBKeyRange.bound")}}`(x, y, true, false)` |
+| Toutes les clés ≥ **x** &&< **y**  | {{domxref("IDBKeyRange.bound")}}`(x, y, false, true)` |
+| La clé = **z**                     | {{domxref("IDBKeyRange.only")}}`(z)`                     |
+
+Une clé est contenue dans un intervalle de clé lorsque les conditions suivantes sont réunies :
+
+- La borne inférieure de l'intervalle de clé est :
+
+  - `undefined`
+  - Inférieure à la valeur de la clé
+  - Égal à la valeur de la clé si `lowerOpen` est `false` (l'intervalle est fermé à gauche)
+
+- La borne supérieure de l'intervalle de clé est :
+
+  - `undefined`
+  - Supérieure à la valeur de la clé
+  - Égal à la valeur de la clé si `upperOpen` vaut `false` (l'intervalle est fermé à droite)
+
+{{AvailableInWorkers}}
+
+## Propriétés
+
+- {{domxref("IDBKeyRange.lower")}} {{readonlyInline}}
+  - : Cette propriété fournit la borne inférieure de l'intervalle de clé.
+- {{domxref("IDBKeyRange.upper")}} {{readonlyInline}}
+  - : Cette propriété fournit la borne supérieure de l'intervalle de clé.
+- {{domxref("IDBKeyRange.lowerOpen")}} {{readonlyInline}}
+  - : Cette méthode renvoie `false` si la borne inférieure est contenue dans l'intervalle de clé (autrement dit elle permet de vérifier si l'intervalle est ouvert à gauche).
+- {{domxref("IDBKeyRange.upperOpen")}} {{readonlyInline}}
+  - : Cette méthode renvoie `false` si la borne supérieure est contenue dans l'intervalle de clé (autrement dit elle permet de vérifier si l'intervalle est ouvert à droite).
+
+## Méthodes
+
+### Méthodes statiques
+
+- {{domxref("IDBKeyRange.bound()")}}
+  - : Cette méthode permet de créer un nouvel intervalle de clé avec une borne inférieure et une borne supérieure.
+- {{domxref("IDBKeyRange.only()")}}
+  - : Cette méthode crée un nouvel intervalle de clé qui ne contient qu'une valeur.
+- {{domxref("IDBKeyRange.lowerBound()")}}
+  - : Cette méthode crée un nouvel intervalle de clé avec une borne inférieure.
+- {{domxref("IDBKeyRange.upperBound()")}}
+  - : Cette méthode crée un nouvel intervalle de clé avec une borne supérieure.
+
+### Méthodes des instances
+
+- {{domxref("IDBKeyRange.includes()")}}
+  - : Cette méthode renvoie un booléen qui indique si la clé passée en argument est contenue dans l'intervalle de clé.
+
+<!---->
+
+## Exemples
+
+Dans l'exemple qui suit, on montre comment utiliser un intervalle de clé. Ici, on déclare un objet `keyRangeValue` qui représente un intervalle pour les valeurs entre "A" et "F". On ouvre une transaction grâce à {{domxref("IDBTransaction")}}, on ouvre également un magasin d'objets puis un curseur avec la méthode {{domxref("IDBObjectStore.openCursor")}} pour lequel on indique que `keyRangeValue` est l'intervalle de clé à considérer. Cela signifie que le curseur récupèrera uniquement les enregistrements pour lesquels les clés sont contenues dans cet intervalle. Cet intervalle est fermé, il inclut les valeur "A" and "F" (on n'a pas indiqué que ces bornes étaient ouvertes). Si on avait utilisé `IDBKeyRange.bound("A", "F", true, true);`, l'intervalle serait ouvert et ne contiendrait pas "A" ou "F" mais uniquement les valeurs intermédiaires.
+
+```js
+function displayData() {
   var keyRangeValue = IDBKeyRange.bound("A", "F");
 
   var transaction = db.transaction(['fThings'], 'readonly');
@@ -140,7 +92,7 @@ translation_of: Web/API/IDBKeyRange
     var cursor = event.target.result;
       if(cursor) {
         var listItem = document.createElement('li');
-        listItem.innerHTML = '&lt;strong&gt;' + cursor.value.fThing + '&lt;/strong&gt;, ' + cursor.value.fRating;
+        listItem.innerHTML = '<strong>' + cursor.value.fThing + '</strong>, ' + cursor.value.fRating;
         list.appendChild(listItem);
 
         cursor.continue();
@@ -148,48 +100,28 @@ translation_of: Web/API/IDBKeyRange
         console.log('Les éléments ont été affichés.');
       }
     };
-  };</pre>
-
-<div class="note">
-<p><strong>Note :</strong> Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter <a href="https://github.com/mdn/IDBKeyRange-example">le dépôt GitHub IDBKeyRange-example</a> (<a href="https://mdn.github.io/IDBKeyRange-example/">ainsi que la démonstration associée</a>).</p>
-</div>
-
-<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('IndexedDB', '#idl-def-IDBKeyRange', 'IDBKeyRange')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('IndexedDB 2', '#keyrange', 'IDBKeyRange')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td>Ajout de <code>includes()</code>.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.IDBKeyRange")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
- <li>Initier une connexion : {{domxref("IDBDatabase")}}</li>
- <li>Utiliser les transactions : {{domxref("IDBTransaction")}}</li>
- <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
- <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li>
- <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li>
- <li>Exemple de référence : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li>
-</ul>
+  };
+```
+
+> **Note :** Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter [le dépôt GitHub IDBKeyRange-example](https://github.com/mdn/IDBKeyRange-example) ([ainsi que la démonstration associée](https://mdn.github.io/IDBKeyRange-example/)).
+
+## Spécifications
+
+| Spécification                                                                        | État                         | Commentaires           |
+| ------------------------------------------------------------------------------------ | ---------------------------- | ---------------------- |
+| {{SpecName('IndexedDB', '#idl-def-IDBKeyRange', 'IDBKeyRange')}} | {{Spec2('IndexedDB')}} | Définition initiale.   |
+| {{SpecName('IndexedDB 2', '#keyrange', 'IDBKeyRange')}}             | {{Spec2('IndexedDB')}} | Ajout de `includes()`. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.IDBKeyRange")}}
+
+## Voir aussi
+
+- [Utiliser IndexedDB](/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB)
+- Initier une connexion : {{domxref("IDBDatabase")}}
+- Utiliser les transactions : {{domxref("IDBTransaction")}}
+- Définir un intervalle de clés : {{domxref("IDBKeyRange")}}
+- Récupérer et modifier les données : {{domxref("IDBObjectStore")}}
+- Utiliser les curseurs {{domxref("IDBCursor")}}
+- Exemple de référence : [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages) ([exemple _live_](https://mdn.github.io/to-do-notifications/)).
diff --git a/files/fr/web/api/idbkeyrange/lower/index.md b/files/fr/web/api/idbkeyrange/lower/index.md
index 228da25525..0e1d98cfc8 100644
--- a/files/fr/web/api/idbkeyrange/lower/index.md
+++ b/files/fr/web/api/idbkeyrange/lower/index.md
@@ -9,27 +9,30 @@ tags:
   - Reference
 translation_of: Web/API/IDBKeyRange/lower
 ---
-<div>{{APIRef("IndexedDB")}}</div>
+{{APIRef("IndexedDB")}}
 
-<p>La propriété <strong><code>lower</code></strong>, rattachée à l'interface {{domxref("IDBKeyRange")}}, renvoie la borne inférieure de l'intervalle de clé.</p>
+La propriété **`lower`**, rattachée à l'interface {{domxref("IDBKeyRange")}}, renvoie la borne inférieure de l'intervalle de clé.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">monIntervalle.lower;</pre>
+```js
+monIntervalle.lower;
+```
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>La borne inférieure de l'intervalle de clé (qui peut être d'un type quelconque).</p>
+La borne inférieure de l'intervalle de clé (qui peut être d'un type quelconque).
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans l'exemple qui suit, on voit comment utiliser un intervalle de clé. On déclare <code>keyRangeValue = IDBKeyRange.upperBound("F", "W", true, true);</code> — ce qui correspond à intervalle qui inclut tout ce qui se trouve entre "F" et "W" mais pas ces valeurs (l'intervalle est « ouvert »). Ensuite, on ouvre une transaction grâce à {{domxref("IDBTransaction")}}, un magasin d'objet et un curseur grâce à {{domxref("IDBObjectStore.openCursor")}} pour lequel on déclare que <code>keyRangeValue</code> est l'intervalle de clé optionnel.</p>
+Dans l'exemple qui suit, on voit comment utiliser un intervalle de clé. On déclare `keyRangeValue = IDBKeyRange.upperBound("F", "W", true, true);` — ce qui correspond à intervalle qui inclut tout ce qui se trouve entre "F" et "W" mais pas ces valeurs (l'intervalle est « ouvert »). Ensuite, on ouvre une transaction grâce à {{domxref("IDBTransaction")}}, un magasin d'objet et un curseur grâce à {{domxref("IDBObjectStore.openCursor")}} pour lequel on déclare que `keyRangeValue` est l'intervalle de clé optionnel.
 
-<p>Après avoir déclaré l'intervalle de clé, on affiche la valeur de la propriété <code>lower</code> dans la console (ce qui doit donner "F").</p>
+Après avoir déclaré l'intervalle de clé, on affiche la valeur de la propriété `lower` dans la console (ce qui doit donner "F").
 
-<pre class="brush: js">function displayData() {
+```js
+function displayData() {
   var keyRangeValue = IDBKeyRange.bound("F", "W", true, true);
   console.log(keyRangeValue.lower);
 
@@ -40,7 +43,7 @@ translation_of: Web/API/IDBKeyRange/lower
     var cursor = event.target.result;
       if(cursor) {
         var listItem = document.createElement('li');
-        listItem.innerHTML = '&lt;strong&gt;' + cursor.value.fThing + '&lt;/strong&gt;, ' + cursor.value.fRating;
+        listItem.innerHTML = '<strong>' + cursor.value.fThing + '</strong>, ' + cursor.value.fRating;
         list.appendChild(listItem);
 
         cursor.continue();
@@ -48,41 +51,27 @@ translation_of: Web/API/IDBKeyRange/lower
         console.log('Les éléments ont été affichés.');
       }
     };
-  };</pre>
-
-<div class="note">
-<p><strong>Note :</strong> Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter <a href="https://github.com/mdn/IDBKeyRange-example">le dépôt GitHub IDBKeyRange-example</a> (<a href="https://mdn.github.io/IDBKeyRange-example/">ainsi que la démonstration associée</a>).</p>
-</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('IndexedDB', '#widl-IDBKeyRange-lower', 'lower')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.IDBKeyRange.lower")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
- <li>Initier une connexion : {{domxref("IDBDatabase")}}</li>
- <li>Utiliser les transactions : {{domxref("IDBTransaction")}}</li>
- <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
- <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li>
- <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li>
- <li>Exemple de référence : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li>
-</ul>
+  };
+```
+
+> **Note :** Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter [le dépôt GitHub IDBKeyRange-example](https://github.com/mdn/IDBKeyRange-example) ([ainsi que la démonstration associée](https://mdn.github.io/IDBKeyRange-example/)).
+
+## Spécifications
+
+| Spécification                                                                    | État                         | Commentaires |
+| -------------------------------------------------------------------------------- | ---------------------------- | ------------ |
+| {{SpecName('IndexedDB', '#widl-IDBKeyRange-lower', 'lower')}} | {{Spec2('IndexedDB')}} |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.IDBKeyRange.lower")}}
+
+## Voir aussi
+
+- [Utiliser IndexedDB](/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB)
+- Initier une connexion : {{domxref("IDBDatabase")}}
+- Utiliser les transactions : {{domxref("IDBTransaction")}}
+- Définir un intervalle de clés : {{domxref("IDBKeyRange")}}
+- Récupérer et modifier les données : {{domxref("IDBObjectStore")}}
+- Utiliser les curseurs {{domxref("IDBCursor")}}
+- Exemple de référence : [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages) ([exemple _live_](https://mdn.github.io/to-do-notifications/)).
diff --git a/files/fr/web/api/idbkeyrange/lowerbound/index.md b/files/fr/web/api/idbkeyrange/lowerbound/index.md
index 3175f20150..43945e77cf 100644
--- a/files/fr/web/api/idbkeyrange/lowerbound/index.md
+++ b/files/fr/web/api/idbkeyrange/lowerbound/index.md
@@ -8,43 +8,44 @@ tags:
   - Reference
 translation_of: Web/API/IDBKeyRange/lowerBound
 ---
-<div>{{APIRef("IndexedDB")}}</div>
+{{APIRef("IndexedDB")}}
 
-<p>La méthode <strong><code>lowerBound()</code></strong>, rattachée à l'interface  {{domxref("IDBKeyRange")}}, crée un intervalle de clé avec une borne inférieure.</p>
+La méthode **`lowerBound()`**, rattachée à l'interface  {{domxref("IDBKeyRange")}}, crée un intervalle de clé avec une borne inférieure.
 
-<p>Par défaut, la borne est inclue dans l'intervalle (autrement dit, il est fermé à gauche).</p>
+Par défaut, la borne est inclue dans l'intervalle (autrement dit, il est fermé à gauche).
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">IDBKeyRange.lowerBound(borne);
-IDBKeyRange.lowerBound(borne, ouvert);</pre>
+```js
+IDBKeyRange.lowerBound(borne);
+IDBKeyRange.lowerBound(borne, ouvert);
+```
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>borne</code></dt>
- <dd>La valeur de la borne inférieure pour l'intervalle.</dd>
- <dt><code>ouvert {{optional_inline}}</code></dt>
- <dd>Ce booléen indique si l'intervalle est ouvert à gauche (autrement dit, s'il vaut <code>false</code> la borne est inclue et s'il vaut <code>true</code> la borne n'est pas inclue dans l'intervalle).</dd>
-</dl>
+- `borne`
+  - : La valeur de la borne inférieure pour l'intervalle.
+- `ouvert {{optional_inline}}`
+  - : Ce booléen indique si l'intervalle est ouvert à gauche (autrement dit, s'il vaut `false` la borne est inclue et s'il vaut `true` la borne n'est pas inclue dans l'intervalle).
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Un objet {{domxref("IDBKeyRange")}} qui correspond à l'intervalle de clé créé.</p>
+Un objet {{domxref("IDBKeyRange")}} qui correspond à l'intervalle de clé créé.
 
-<h3 id="Exceptions">Exceptions</h3>
+### Exceptions
 
-<p>Cette méthode peut lever une exception {{domxref("DOMException")}} de type <code>DataError</code> lorsque la valeur passée en paramètre n'est pas une clé valide.</p>
+Cette méthode peut lever une exception {{domxref("DOMException")}} de type `DataError` lorsque la valeur passée en paramètre n'est pas une clé valide.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans l'exemple qui suit, on illustre comment créer un intervalle de clé avec une borne inférieure, on utilise <code>keyRangeValue = IDBKeyRange.lowerBound("F", false);</code> — cela permet de créer un intervalle qui contient "F" et les valeurs inférieures. On ouvre ensuite une transaction grâce à {{domxref("IDBTransaction")}}) puis un magasin d'objet et un curseur avec la méthode {{domxref("IDBObjectStore.openCursor")}} à laquelle on associe l'intervalle de clé <code>keyRangeValue</code>.</p>
+Dans l'exemple qui suit, on illustre comment créer un intervalle de clé avec une borne inférieure, on utilise `keyRangeValue = IDBKeyRange.lowerBound("F", false);` — cela permet de créer un intervalle qui contient "F" et les valeurs inférieures. On ouvre ensuite une transaction grâce à {{domxref("IDBTransaction")}}) puis un magasin d'objet et un curseur avec la méthode {{domxref("IDBObjectStore.openCursor")}} à laquelle on associe l'intervalle de clé `keyRangeValue`.
 
-<p>Si on a avait utilisé <code>IDBKeyRange.lowerBound("F", true);</code>, "F" n'aurait pas fait partie de l'intervalle.</p>
+Si on a avait utilisé `IDBKeyRange.lowerBound("F", true);`, "F" n'aurait pas fait partie de l'intervalle.
 
-<pre class="brush: js">function displayData() {
+```js
+function displayData() {
   var keyRangeValue = IDBKeyRange.lowerBound("F");
 
   var transaction = db.transaction(['fThings'], 'readonly');
@@ -54,7 +55,7 @@ IDBKeyRange.lowerBound(borne, ouvert);</pre>
     var cursor = event.target.result;
       if(cursor) {
         var listItem = document.createElement('li');
-        listItem.innerHTML = '&lt;strong&gt;' + cursor.value.fThing + '&lt;/strong&gt;, ' + cursor.value.fRating;
+        listItem.innerHTML = '<strong>' + cursor.value.fThing + '</strong>, ' + cursor.value.fRating;
         list.appendChild(listItem);
 
         cursor.continue();
@@ -62,41 +63,27 @@ IDBKeyRange.lowerBound(borne, ouvert);</pre>
         console.log('Les éléments sont affichés.');
       }
     };
-  };</pre>
-
-<div class="note">
-<p><strong>Note :</strong> Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter <a href="https://github.com/mdn/IDBKeyRange-example">le dépôt GitHub IDBKeyRange-example</a> (<a href="https://mdn.github.io/IDBKeyRange-example/">ainsi que la démonstration associée</a>).</p>
-</div>
-
-<h2 id="Spécification">Spécification</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('IndexedDB', '#widl-IDBKeyRange-lowerBound-IDBKeyRange-any-lower-boolean-open', 'lowerBound()')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.IDBKeyRange.lowerBound")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
- <li>Initier une connexion : {{domxref("IDBDatabase")}}</li>
- <li>Utiliser les transactions : {{domxref("IDBTransaction")}}</li>
- <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
- <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li>
- <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li>
- <li>Exemple de référence : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li>
-</ul>
+  };
+```
+
+> **Note :** Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter [le dépôt GitHub IDBKeyRange-example](https://github.com/mdn/IDBKeyRange-example) ([ainsi que la démonstration associée](https://mdn.github.io/IDBKeyRange-example/)).
+
+## Spécification
+
+| Spécification                                                                                                                                    | État                         | Commentaires |
+| ------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------ |
+| {{SpecName('IndexedDB', '#widl-IDBKeyRange-lowerBound-IDBKeyRange-any-lower-boolean-open', 'lowerBound()')}} | {{Spec2('IndexedDB')}} |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.IDBKeyRange.lowerBound")}}
+
+## Voir aussi
+
+- [Utiliser IndexedDB](/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB)
+- Initier une connexion : {{domxref("IDBDatabase")}}
+- Utiliser les transactions : {{domxref("IDBTransaction")}}
+- Définir un intervalle de clés : {{domxref("IDBKeyRange")}}
+- Récupérer et modifier les données : {{domxref("IDBObjectStore")}}
+- Utiliser les curseurs {{domxref("IDBCursor")}}
+- Exemple de référence : [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages) ([exemple _live_](https://mdn.github.io/to-do-notifications/)).
diff --git a/files/fr/web/api/idbkeyrange/loweropen/index.md b/files/fr/web/api/idbkeyrange/loweropen/index.md
index e81e42a0d3..cccd9f002a 100644
--- a/files/fr/web/api/idbkeyrange/loweropen/index.md
+++ b/files/fr/web/api/idbkeyrange/loweropen/index.md
@@ -9,27 +9,30 @@ tags:
   - Reference
 translation_of: Web/API/IDBKeyRange/lowerOpen
 ---
-<div>{{APIRef("IndexedDB")}}</div>
+{{APIRef("IndexedDB")}}
 
-<p>La propriété <strong><code>lowerOpen</code></strong>, rattachée à l'interface {{domxref("IDBKeyRange")}}, renvoie un booléen qui inidque si l'intervalle est ouvert pour la borne inférieure (autrement dit, le booléen est vrai lorsque la borne n'est pas incluse et est faux sinon).</p>
+La propriété **`lowerOpen`**, rattachée à l'interface {{domxref("IDBKeyRange")}}, renvoie un booléen qui inidque si l'intervalle est ouvert pour la borne inférieure (autrement dit, le booléen est vrai lorsque la borne n'est pas incluse et est faux sinon).
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">myKeyRange.lowerOpen;</pre>
+```js
+myKeyRange.lowerOpen;
+```
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>Un booléen qui indique si l'intervalle est ouvert pour la borne inférieure (<code>true</code> si c'est le cas (la borne n'est pas incluse), <code>false</code> sinon).</p>
+Un booléen qui indique si l'intervalle est ouvert pour la borne inférieure (`true` si c'est le cas (la borne n'est pas incluse), `false` sinon).
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans l'exemple qui suit, on voit comment utiliser un intervalle de clé. On déclare <code>keyRangeValue = IDBKeyRange.upperBound("F", "W", true, true);</code> — c'est-à-dire un intervalle qui inclue tout ce qui se trouve entre "F" et "W" mais qui n'inclue pas ces bornes (l'intervalle est « ouvert »). Ensuite, on ouvre une transaction grâce à {{domxref("IDBTransaction")}} puis on ouvre un magasin d'objet et un curseur grâce à {{domxref("IDBObjectStore.openCursor")}}. La valeur <code>keyRangeValue</code> est utilisée comme intervalle de clé pour ce curseur.</p>
+Dans l'exemple qui suit, on voit comment utiliser un intervalle de clé. On déclare `keyRangeValue = IDBKeyRange.upperBound("F", "W", true, true);` — c'est-à-dire un intervalle qui inclue tout ce qui se trouve entre "F" et "W" mais qui n'inclue pas ces bornes (l'intervalle est « ouvert »). Ensuite, on ouvre une transaction grâce à {{domxref("IDBTransaction")}} puis on ouvre un magasin d'objet et un curseur grâce à {{domxref("IDBObjectStore.openCursor")}}. La valeur `keyRangeValue` est utilisée comme intervalle de clé pour ce curseur.
 
-<p>Après avoir déclaré l'intervalle de clé, on affiche la valeur de la propriété <code>lowerOpen</code> dans la console. Ici, la valeur de la propriété est <code>true</code> car l'intervalle est ouvert pour la borne supérieure et la borne inférieure qui ne sont donc pas comprises dans l'intervalle.</p>
+Après avoir déclaré l'intervalle de clé, on affiche la valeur de la propriété `lowerOpen` dans la console. Ici, la valeur de la propriété est `true` car l'intervalle est ouvert pour la borne supérieure et la borne inférieure qui ne sont donc pas comprises dans l'intervalle.
 
-<pre class="brush: js">function displayData() {
+```js
+function displayData() {
   var keyRangeValue = IDBKeyRange.bound("F", "W", true, true);
   console.log(keyRangeValue.lowerOpen);
 
@@ -40,7 +43,7 @@ translation_of: Web/API/IDBKeyRange/lowerOpen
     var cursor = event.target.result;
       if(cursor) {
         var listItem = document.createElement('li');
-        listItem.innerHTML = '&lt;strong&gt;' + cursor.value.fThing + '&lt;/strong&gt;, ' + cursor.value.fRating;
+        listItem.innerHTML = '<strong>' + cursor.value.fThing + '</strong>, ' + cursor.value.fRating;
         list.appendChild(listItem);
 
         cursor.continue();
@@ -48,41 +51,27 @@ translation_of: Web/API/IDBKeyRange/lowerOpen
         console.log('Les éléments ont été affichés.');
       }
     };
-  };</pre>
-
-<div class="note">
-<p><strong>Note :</strong> Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter <a href="https://github.com/mdn/IDBKeyRange-example">le dépôt GitHub IDBKeyRange-example</a> (<a href="https://mdn.github.io/IDBKeyRange-example/">ainsi que la démonstration associée</a>).</p>
-</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('IndexedDB', '#widl-IDBKeyRange-lowerOpen', 'lowerOpen')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.IDBKeyRange.lowerOpen")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
- <li>Initier une connexion : {{domxref("IDBDatabase")}}</li>
- <li>Utiliser les transactions : {{domxref("IDBTransaction")}}</li>
- <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
- <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li>
- <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li>
- <li>Exemple de référence : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li>
-</ul>
+  };
+```
+
+> **Note :** Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter [le dépôt GitHub IDBKeyRange-example](https://github.com/mdn/IDBKeyRange-example) ([ainsi que la démonstration associée](https://mdn.github.io/IDBKeyRange-example/)).
+
+## Spécifications
+
+| Spécification                                                                                | État                         | Commentaires |
+| -------------------------------------------------------------------------------------------- | ---------------------------- | ------------ |
+| {{SpecName('IndexedDB', '#widl-IDBKeyRange-lowerOpen', 'lowerOpen')}} | {{Spec2('IndexedDB')}} |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.IDBKeyRange.lowerOpen")}}
+
+## Voir aussi
+
+- [Utiliser IndexedDB](/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB)
+- Initier une connexion : {{domxref("IDBDatabase")}}
+- Utiliser les transactions : {{domxref("IDBTransaction")}}
+- Définir un intervalle de clés : {{domxref("IDBKeyRange")}}
+- Récupérer et modifier les données : {{domxref("IDBObjectStore")}}
+- Utiliser les curseurs {{domxref("IDBCursor")}}
+- Exemple de référence : [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages) ([exemple _live_](https://mdn.github.io/to-do-notifications/)).
diff --git a/files/fr/web/api/idbkeyrange/only/index.md b/files/fr/web/api/idbkeyrange/only/index.md
index dc2ed37fac..574f4d7482 100644
--- a/files/fr/web/api/idbkeyrange/only/index.md
+++ b/files/fr/web/api/idbkeyrange/only/index.md
@@ -9,36 +9,37 @@ tags:
   - Reference
 translation_of: Web/API/IDBKeyRange/only
 ---
-<div>{{APIRef("IndexedDB")}}</div>
+{{APIRef("IndexedDB")}}
 
-<p>La méthode <strong><code>only()</code></strong>, rattachée à l'interface {{domxref("IDBKeyRange")}}, permet de créer un nouvel intervalle de clé qui ne contient qu'une valeur.</p>
+La méthode **`only()`**, rattachée à l'interface {{domxref("IDBKeyRange")}}, permet de créer un nouvel intervalle de clé qui ne contient qu'une valeur.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">myKeyRange = IDBKeyRange.only(valeur);</pre>
+```js
+myKeyRange = IDBKeyRange.only(valeur);
+```
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>valeur</code></dt>
- <dd>La valeur dans l'intervalle de clé.</dd>
-</dl>
+- `valeur`
+  - : La valeur dans l'intervalle de clé.
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+### Valeur de retour
 
-<p>L'objet {{domxref("IDBKeyRange")}} correspondant à l'intervalle de clé qui vient d'être créé.</p>
+L'objet {{domxref("IDBKeyRange")}} correspondant à l'intervalle de clé qui vient d'être créé.
 
-<h3 id="Exceptions">Exceptions</h3>
+### Exceptions
 
-<p>Cette méthode peut déclencher une exception {{domxref("DOMException")}} du type <code>DataError</code> lorsque la valeur passée en argument n'est pas une clé valide.</p>
+Cette méthode peut déclencher une exception {{domxref("DOMException")}} du type `DataError` lorsque la valeur passée en argument n'est pas une clé valide.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans l'exemple qui suit, on illustre comment utiliser un intervalle de clé qui ne contient qu'une seule clé. On déclare un intervalle qui ne contient que la valeur "A" avec <code>keyRangeValue = IDBKeyRange.only("A");</code> Ensuite, on ouvre une transaction grâce à {{domxref("IDBTransaction")}} puis un magasin d'objets et un curseur grâce à la méthode {{domxref("IDBObjectStore.openCursor")}} pour laquelle on passe <code>keyRangeValue</code> en argument. Cela signifie que le curseur permettra uniquement de récupérer les enregistrements dont la clé vaut "A".</p>
+Dans l'exemple qui suit, on illustre comment utiliser un intervalle de clé qui ne contient qu'une seule clé. On déclare un intervalle qui ne contient que la valeur "A" avec `keyRangeValue = IDBKeyRange.only("A");` Ensuite, on ouvre une transaction grâce à {{domxref("IDBTransaction")}} puis un magasin d'objets et un curseur grâce à la méthode {{domxref("IDBObjectStore.openCursor")}} pour laquelle on passe `keyRangeValue` en argument. Cela signifie que le curseur permettra uniquement de récupérer les enregistrements dont la clé vaut "A".
 
-<pre class="brush: js">function displayData() {
+```js
+function displayData() {
   var keyRangeValue = IDBKeyRange.only("A");
 
   var transaction = db.transaction(['fThings'], 'readonly');
@@ -48,7 +49,7 @@ translation_of: Web/API/IDBKeyRange/only
     var cursor = event.target.result;
       if(cursor) {
         var listItem = document.createElement('li');
-        listItem.innerHTML = '&lt;strong&gt;' + cursor.value.fThing + '&lt;/strong&gt;, ' + cursor.value.fRating;
+        listItem.innerHTML = '<strong>' + cursor.value.fThing + '</strong>, ' + cursor.value.fRating;
         list.appendChild(listItem);
 
         cursor.continue();
@@ -56,41 +57,27 @@ translation_of: Web/API/IDBKeyRange/only
         console.log('Les éléments sont affichés.');
       }
     };
-  };</pre>
-
-<div class="note">
-<p><strong>Note :</strong> Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter <a href="https://github.com/mdn/IDBKeyRange-example">le dépôt GitHub IDBKeyRange-example</a> (<a href="https://mdn.github.io/IDBKeyRange-example/">ainsi que la démonstration associée</a>).</p>
-</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('IndexedDB', '#widl-IDBKeyRange-only-IDBKeyRange-any-value', 'only')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.IDBKeyRange.only")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
- <li>Initier une connexion : {{domxref("IDBDatabase")}}</li>
- <li>Utiliser les transactions : {{domxref("IDBTransaction")}}</li>
- <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
- <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li>
- <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li>
- <li>Exemple de référence : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li>
-</ul>
+  };
+```
+
+> **Note :** Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter [le dépôt GitHub IDBKeyRange-example](https://github.com/mdn/IDBKeyRange-example) ([ainsi que la démonstration associée](https://mdn.github.io/IDBKeyRange-example/)).
+
+## Spécifications
+
+| Spécification                                                                                                | État                         | Commentaires |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------ |
+| {{SpecName('IndexedDB', '#widl-IDBKeyRange-only-IDBKeyRange-any-value', 'only')}} | {{Spec2('IndexedDB')}} |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.IDBKeyRange.only")}}
+
+## Voir aussi
+
+- [Utiliser IndexedDB](/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB)
+- Initier une connexion : {{domxref("IDBDatabase")}}
+- Utiliser les transactions : {{domxref("IDBTransaction")}}
+- Définir un intervalle de clés : {{domxref("IDBKeyRange")}}
+- Récupérer et modifier les données : {{domxref("IDBObjectStore")}}
+- Utiliser les curseurs {{domxref("IDBCursor")}}
+- Exemple de référence : [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages) ([exemple _live_](https://mdn.github.io/to-do-notifications/)).
diff --git a/files/fr/web/api/idbkeyrange/upper/index.md b/files/fr/web/api/idbkeyrange/upper/index.md
index 74b9545f8e..52fb657e00 100644
--- a/files/fr/web/api/idbkeyrange/upper/index.md
+++ b/files/fr/web/api/idbkeyrange/upper/index.md
@@ -9,27 +9,30 @@ tags:
   - Reference
 translation_of: Web/API/IDBKeyRange/upper
 ---
-<div>{{APIRef("IndexedDB")}}</div>
+{{APIRef("IndexedDB")}}
 
-<p>La propriété <strong><code>upper</code></strong>, rattachée à l'interface {{domxref("IDBKeyRange")}}, renvoie la borne supérieure de l'intervalle de clé.</p>
+La propriété **`upper`**, rattachée à l'interface {{domxref("IDBKeyRange")}}, renvoie la borne supérieure de l'intervalle de clé.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">monIntervalle.upper;</pre>
+```js
+monIntervalle.upper;
+```
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>La borne supérieure de l'intervalle de clé (qui peut être d'un type quelconque).</p>
+La borne supérieure de l'intervalle de clé (qui peut être d'un type quelconque).
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans l'exemple qui suit, on voit comment utiliser un intervalle de clé. On déclare <code>keyRangeValue = IDBKeyRange.upperBound("F", "W", true, true);</code> — ce qui correspond à intervalle qui inclut tout ce qui se trouve entre "F" et "W" mais pas ces valeurs (l'intervalle est « ouvert »). Ensuite, on ouvre une transaction grâce à {{domxref("IDBTransaction")}}, un magasin d'objet et un curseur grâce à {{domxref("IDBObjectStore.openCursor")}} pour lequel on déclare que <code>keyRangeValue</code> est l'intervalle de clé optionnel.</p>
+Dans l'exemple qui suit, on voit comment utiliser un intervalle de clé. On déclare `keyRangeValue = IDBKeyRange.upperBound("F", "W", true, true);` — ce qui correspond à intervalle qui inclut tout ce qui se trouve entre "F" et "W" mais pas ces valeurs (l'intervalle est « ouvert »). Ensuite, on ouvre une transaction grâce à {{domxref("IDBTransaction")}}, un magasin d'objet et un curseur grâce à {{domxref("IDBObjectStore.openCursor")}} pour lequel on déclare que `keyRangeValue` est l'intervalle de clé optionnel.
 
-<p>Après avoir déclaré l'intervalle de clé, on affiche la valeur de la propriété <code>upper</code> dans la console (ce qui doit donner "W").</p>
+Après avoir déclaré l'intervalle de clé, on affiche la valeur de la propriété `upper` dans la console (ce qui doit donner "W").
 
-<pre class="brush: js">function displayData() {
+```js
+function displayData() {
   var keyRangeValue = IDBKeyRange.bound("F", "W", true, true);
   console.log(keyRangeValue.upper);
 
@@ -40,7 +43,7 @@ translation_of: Web/API/IDBKeyRange/upper
     var cursor = event.target.result;
       if(cursor) {
         var listItem = document.createElement('li');
-        listItem.innerHTML = '&lt;strong&gt;' + cursor.value.fThing + '&lt;/strong&gt;, ' + cursor.value.fRating;
+        listItem.innerHTML = '<strong>' + cursor.value.fThing + '</strong>, ' + cursor.value.fRating;
         list.appendChild(listItem);
 
         cursor.continue();
@@ -48,41 +51,27 @@ translation_of: Web/API/IDBKeyRange/upper
         console.log('Les éléments ont été affichés.');
       }
     };
-  };</pre>
-
-<div class="note">
-<p><strong>Note :</strong> Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter <a href="https://github.com/mdn/IDBKeyRange-example">le dépôt GitHub IDBKeyRange-example</a> (<a href="https://mdn.github.io/IDBKeyRange-example/">ainsi que la démonstration associée</a>).</p>
-</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('IndexedDB', '#widl-IDBKeyRange-upper', 'upper')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.IDBKeyRange.upper")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
- <li>Initier une connexion : {{domxref("IDBDatabase")}}</li>
- <li>Utiliser les transactions : {{domxref("IDBTransaction")}}</li>
- <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
- <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li>
- <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li>
- <li>Exemple de référence : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li>
-</ul>
+  };
+```
+
+> **Note :** Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter [le dépôt GitHub IDBKeyRange-example](https://github.com/mdn/IDBKeyRange-example) ([ainsi que la démonstration associée](https://mdn.github.io/IDBKeyRange-example/)).
+
+## Spécifications
+
+| Spécification                                                                    | État                         | Commentaires |
+| -------------------------------------------------------------------------------- | ---------------------------- | ------------ |
+| {{SpecName('IndexedDB', '#widl-IDBKeyRange-upper', 'upper')}} | {{Spec2('IndexedDB')}} |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.IDBKeyRange.upper")}}
+
+## Voir aussi
+
+- [Utiliser IndexedDB](/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB)
+- Initier une connexion : {{domxref("IDBDatabase")}}
+- Utiliser les transactions : {{domxref("IDBTransaction")}}
+- Définir un intervalle de clés : {{domxref("IDBKeyRange")}}
+- Récupérer et modifier les données : {{domxref("IDBObjectStore")}}
+- Utiliser les curseurs {{domxref("IDBCursor")}}
+- Exemple de référence : [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages) ([exemple _live_](https://mdn.github.io/to-do-notifications/)).
diff --git a/files/fr/web/api/idbkeyrange/upperbound/index.md b/files/fr/web/api/idbkeyrange/upperbound/index.md
index 6adcc4fe8b..fc8c458d23 100644
--- a/files/fr/web/api/idbkeyrange/upperbound/index.md
+++ b/files/fr/web/api/idbkeyrange/upperbound/index.md
@@ -9,43 +9,44 @@ tags:
   - Reference
 translation_of: Web/API/IDBKeyRange/upperBound
 ---
-<div>{{APIRef("IndexedDB")}}</div>
+{{APIRef("IndexedDB")}}
 
-<p>La méthode <strong><code>upperBound()</code></strong>, rattachée à l'interface  {{domxref("IDBKeyRange")}}, crée un intervalle de clé avec une borne supérieure.</p>
+La méthode **`upperBound()`**, rattachée à l'interface  {{domxref("IDBKeyRange")}}, crée un intervalle de clé avec une borne supérieure.
 
-<p>Par défaut, la borne est inclue dans l'intervalle (autrement dit, il est fermé à droite).</p>
+Par défaut, la borne est inclue dans l'intervalle (autrement dit, il est fermé à droite).
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">IDBKeyRange.upperBound(borne);
-IDBKeyRange.upperBound(borne, ouvert);</pre>
+```js
+IDBKeyRange.upperBound(borne);
+IDBKeyRange.upperBound(borne, ouvert);
+```
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>borne</code></dt>
- <dd>La valeur de la borne supérieure pour l'intervalle.</dd>
- <dt><code>ouvert {{optional_inline}}</code></dt>
- <dd>Ce booléen indique si l'intervalle est ouvert à droite (autrement dit, s'il vaut <code>false</code> la borne est inclue et s'il vaut <code>true</code> la borne n'est pas inclue dans l'intervalle).</dd>
-</dl>
+- `borne`
+  - : La valeur de la borne supérieure pour l'intervalle.
+- `ouvert {{optional_inline}}`
+  - : Ce booléen indique si l'intervalle est ouvert à droite (autrement dit, s'il vaut `false` la borne est inclue et s'il vaut `true` la borne n'est pas inclue dans l'intervalle).
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Un objet {{domxref("IDBKeyRange")}} qui correspond à l'intervalle de clé créé.</p>
+Un objet {{domxref("IDBKeyRange")}} qui correspond à l'intervalle de clé créé.
 
-<h3 id="Exceptions">Exceptions</h3>
+### Exceptions
 
-<p>Cette méthode peut lever une exception {{domxref("DOMException")}} de type <code>DataError</code> lorsque la valeur passée en paramètre n'est pas une clé valide.</p>
+Cette méthode peut lever une exception {{domxref("DOMException")}} de type `DataError` lorsque la valeur passée en paramètre n'est pas une clé valide.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans l'exemple qui suit, on illustre comment créer un intervalle de clé avec une borne supérieure, on utilise <code>keyRangeValue = IDBKeyRange.upperBound("F");</code> — cela permet de créer un intervalle qui contient "F" et les valeurs inférieures. On ouvre ensuite une transaction grâce à {{domxref("IDBTransaction")}}) puis un magasin d'objet et un curseur avec la méthode {{domxref("IDBObjectStore.openCursor")}} à laquelle on associe l'intervalle de clé <code>keyRangeValue</code>.</p>
+Dans l'exemple qui suit, on illustre comment créer un intervalle de clé avec une borne supérieure, on utilise `keyRangeValue = IDBKeyRange.upperBound("F");` — cela permet de créer un intervalle qui contient "F" et les valeurs inférieures. On ouvre ensuite une transaction grâce à {{domxref("IDBTransaction")}}) puis un magasin d'objet et un curseur avec la méthode {{domxref("IDBObjectStore.openCursor")}} à laquelle on associe l'intervalle de clé `keyRangeValue`.
 
-<p>Si on a avait utilisé <code>IDBKeyRange.upperBound("F", true);</code>, "F" n'aurait pas fait partie de l'intervalle.</p>
+Si on a avait utilisé `IDBKeyRange.upperBound("F", true);`, "F" n'aurait pas fait partie de l'intervalle.
 
-<pre class="brush: js">function displayData() {
+```js
+function displayData() {
   var keyRangeValue = IDBKeyRange.upperBound("F");
 
   var transaction = db.transaction(['fThings'], 'readonly');
@@ -55,7 +56,7 @@ IDBKeyRange.upperBound(borne, ouvert);</pre>
     var cursor = event.target.result;
       if(cursor) {
         var listItem = document.createElement('li');
-        listItem.innerHTML = '&lt;strong&gt;' + cursor.value.fThing + '&lt;/strong&gt;, ' + cursor.value.fRating;
+        listItem.innerHTML = '<strong>' + cursor.value.fThing + '</strong>, ' + cursor.value.fRating;
         list.appendChild(listItem);
 
         cursor.continue();
@@ -63,41 +64,27 @@ IDBKeyRange.upperBound(borne, ouvert);</pre>
         console.log('Les éléments sont affichés.');
       }
     };
-  };</pre>
-
-<div class="note">
-<p><strong>Note :</strong> Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter <a href="https://github.com/mdn/IDBKeyRange-example">le dépôt GitHub IDBKeyRange-example</a> (<a href="https://mdn.github.io/IDBKeyRange-example/">ainsi que la démonstration associée</a>).</p>
-</div>
-
-<h2 id="Spécification">Spécification</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('IndexedDB', '#widl-IDBKeyRange-upperBound-IDBKeyRange-any-upper-boolean-open', 'upperBound()')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.IDBKeyRange.upperBound")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
- <li>Initier une connexion : {{domxref("IDBDatabase")}}</li>
- <li>Utiliser les transactions : {{domxref("IDBTransaction")}}</li>
- <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
- <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li>
- <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li>
- <li>Exemple de référence : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li>
-</ul>
+  };
+```
+
+> **Note :** Pour un exemple complet qui utilise les intervalles de clé, vous pouvez consulter [le dépôt GitHub IDBKeyRange-example](https://github.com/mdn/IDBKeyRange-example) ([ainsi que la démonstration associée](https://mdn.github.io/IDBKeyRange-example/)).
+
+## Spécification
+
+| Spécification                                                                                                                                    | État                         | Commentaires |
+| ------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------ |
+| {{SpecName('IndexedDB', '#widl-IDBKeyRange-upperBound-IDBKeyRange-any-upper-boolean-open', 'upperBound()')}} | {{Spec2('IndexedDB')}} |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.IDBKeyRange.upperBound")}}
+
+## Voir aussi
+
+- [Utiliser IndexedDB](/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB)
+- Initier une connexion : {{domxref("IDBDatabase")}}
+- Utiliser les transactions : {{domxref("IDBTransaction")}}
+- Définir un intervalle de clés : {{domxref("IDBKeyRange")}}
+- Récupérer et modifier les données : {{domxref("IDBObjectStore")}}
+- Utiliser les curseurs {{domxref("IDBCursor")}}
+- Exemple de référence : [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages) ([exemple _live_](https://mdn.github.io/to-do-notifications/)).
diff --git a/files/fr/web/api/idbkeyrange/upperopen/index.md b/files/fr/web/api/idbkeyrange/upperopen/index.md
index be0068210d..48723184ae 100644
--- a/files/fr/web/api/idbkeyrange/upperopen/index.md
+++ b/files/fr/web/api/idbkeyrange/upperopen/index.md
@@ -3,32 +3,33 @@ title: IDBKeyRange.upperOpen
 slug: Web/API/IDBKeyRange/upperOpen
 translation_of: Web/API/IDBKeyRange/upperOpen
 ---
-<p>{{ APIRef("IndexedDB") }}</p>
+{{ APIRef("IndexedDB") }}
 
-<p>La propriété <strong><code>upperOpen</code></strong> de l'interface {{domxref("IDBKeyRange")}} renvoie un booléen indiquant si la valeur de la limite supérieure est incluse dans l'{{domxref("IDBKeyRange","intervalle de clé")}}.</p>
+La propriété **`upperOpen`** de l'interface {{domxref("IDBKeyRange")}} renvoie un booléen indiquant si la valeur de la limite supérieure est incluse dans l'{{domxref("IDBKeyRange","intervalle de clé")}}.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">myKeyRange.upperOpen;</pre>
+```js
+myKeyRange.upperOpen;
+```
 
-<h2 id="Value">Value</h2>
+## Value
 
-<dl>
- <dt>true</dt>
- <dd>La valeur de la limite supérieure n'est pas incluse dans l'intervalle.</dd>
- <dt>false</dt>
- <dd>La valeur de la limite supérieure est incluse dans l'intervalle.</dd>
-</dl>
+- true
+  - : La valeur de la limite supérieure n'est pas incluse dans l'intervalle.
+- false
+  - : La valeur de la limite supérieure est incluse dans l'intervalle.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Dans l'exemple suivant, on récupère l'{{domxref("IDBKeyRange","intervalle de clé")}} entre "F" et "W". Puis on ouvre une {{domxref("IDBTransaction","transaction")}} sur la connexion pour avoir l’{{domxref("IDBObjectStore","accès")}} au magasin d'objets 'fThings'. On met en place un {{domxref("IDBCursor","curseur")}} sur l'intervalle pour afficher dans une liste les valeurs des propriétés fThing et fRating des objets trouvés.</p>
+Dans l'exemple suivant, on récupère l'{{domxref("IDBKeyRange","intervalle de clé")}} entre "F" et "W". Puis on ouvre une {{domxref("IDBTransaction","transaction")}} sur la connexion pour avoir l’{{domxref("IDBObjectStore","accès")}} au magasin d'objets 'fThings'. On met en place un {{domxref("IDBCursor","curseur")}} sur l'intervalle pour afficher dans une liste les valeurs des propriétés fThing et fRating des objets trouvés.
 
-<p>La propriété <strong><code>upperOpen</code></strong> sert ici à afficher sur la console le booléen indiquant si la valeur de la limite supérieure est comprise dans l'intervalle.</p>
+La propriété **`upperOpen`** sert ici à afficher sur la console le booléen indiquant si la valeur de la limite supérieure est comprise dans l'intervalle.
 
-<pre class="brush: js">function displayData() {
+```js
+function displayData() {
   var keyRangeValue = IDBKeyRange.bound("F", "W", true, true);
   console.log(keyRangeValue.upperOpen);
 
@@ -39,7 +40,7 @@ translation_of: Web/API/IDBKeyRange/upperOpen
     var cursor = event.target.result;
       if(cursor) {
         var listItem = document.createElement('li');
-        listItem.innerHTML = '&lt;strong&gt;' + cursor.value.fThing + '&lt;/strong&gt;, ' + cursor.value.fRating;
+        listItem.innerHTML = '<strong>' + cursor.value.fThing + '</strong>, ' + cursor.value.fRating;
         list.appendChild(listItem);
 
         cursor.continue();
@@ -47,37 +48,25 @@ translation_of: Web/API/IDBKeyRange/upperOpen
         console.log('Entries all displayed.');
       }
     };
-  };</pre>
-
-<h2 id="Spécification">Spécification</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('IndexedDB', '#widl-IDBKeyRange-upperOpen', 'upperOpen')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité avec les navigateurs</h2>
-
-<p>{{Compat("api.IDBKeyRange.upperOpen")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("IndexedDB_API.Using_IndexedDB","Utiliser IndexedDB")}}</li>
- <li>{{domxref("IDBDatabase","Débuter une connexion")}}</li>
- <li>{{domxref("IDBTransaction","Utilisé les transactions")}}</li>
- <li>{{domxref("IDBKeyRange","Définir l'intervalle des clés")}}</li>
- <li>{{domxref("IDBObjectStore","Accès aux magasins d'objets")}}</li>
- <li>{{domxref("IDBCursor","Utiliser les curseur")}}</li>
- <li>Exemple de référence: <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li>
-</ul>
+  };
+```
+
+## Spécification
+
+| Spécification                                                                                | Statut                       | Commentaire |
+| -------------------------------------------------------------------------------------------- | ---------------------------- | ----------- |
+| {{SpecName('IndexedDB', '#widl-IDBKeyRange-upperOpen', 'upperOpen')}} | {{Spec2('IndexedDB')}} |             |
+
+## Compatibilité avec les navigateurs
+
+{{Compat("api.IDBKeyRange.upperOpen")}}
+
+## Voir aussi
+
+- {{domxref("IndexedDB_API.Using_IndexedDB","Utiliser IndexedDB")}}
+- {{domxref("IDBDatabase","Débuter une connexion")}}
+- {{domxref("IDBTransaction","Utilisé les transactions")}}
+- {{domxref("IDBKeyRange","Définir l'intervalle des clés")}}
+- {{domxref("IDBObjectStore","Accès aux magasins d'objets")}}
+- {{domxref("IDBCursor","Utiliser les curseur")}}
+- Exemple de référence: [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages) ([view example live](http://mdn.github.io/to-do-notifications/).)
diff --git a/files/fr/web/api/idbobjectstore/add/index.md b/files/fr/web/api/idbobjectstore/add/index.md
index 8aadd297b3..22877034f9 100644
--- a/files/fr/web/api/idbobjectstore/add/index.md
+++ b/files/fr/web/api/idbobjectstore/add/index.md
@@ -3,86 +3,108 @@ title: IDBObjectStore.add()
 slug: Web/API/IDBObjectStore/add
 translation_of: Web/API/IDBObjectStore/add
 ---
-<div>{{APIRef("IndexedDB")}}</div>
+{{APIRef("IndexedDB")}}
 
-<p>La méthode <strong><code>add()</code></strong>, rattachée à l'interface {{domxref("IDBObjectStore")}}, renvoie un objet {{domxref("IDBRequest")}} et, dans un <em>thread</em> séparé, crée un <a href="https://www.whatwg.org/specs/web-apps/current-work/multipage/common-dom-interfaces.html#structured-clone">clone structurel</a> de la valeur et stocke la valeur clonée dans le magasin d'objet. Cette méthode permet d'ajouter de nouveaux enregistrements dans un magasin d'objet.</p>
+La méthode **`add()`**, rattachée à l'interface {{domxref("IDBObjectStore")}}, renvoie un objet {{domxref("IDBRequest")}} et, dans un _thread_ séparé, crée un [clone structurel](https://www.whatwg.org/specs/web-apps/current-work/multipage/common-dom-interfaces.html#structured-clone) de la valeur et stocke la valeur clonée dans le magasin d'objet. Cette méthode permet d'ajouter de nouveaux enregistrements dans un magasin d'objet.
 
-<p>Afin de déterminer si l'opération <code>add</code> s'est effectuée correctement, on pourra écouter l'évènement <code>complete</code> de la transaction et l'évènement <code>success</code> de la requête <code>IDBObjectStore.add</code> car la transaction peut échouer après le déclenchement de l'évènement <code>success</code>. Autremnt dit, l'évènement <code>success</code> est uniquement déclenché au moment où la transaction a été mise dans la file.</p>
+Afin de déterminer si l'opération `add` s'est effectuée correctement, on pourra écouter l'évènement `complete` de la transaction et l'évènement `success` de la requête `IDBObjectStore.add` car la transaction peut échouer après le déclenchement de l'évènement `success`. Autremnt dit, l'évènement `success` est uniquement déclenché au moment où la transaction a été mise dans la file.
 
-<p>La méthode <code>add</code> ne permet que d'insérer des objets. Si un enregistrement existe déjà dans le magasin d'objet pour la clé fournie en argument, un évènement <code>ConstrainError</code> sera déclenché via l'objet {{domxref("IDBRequest")}}. Si on souhaite mettre à jour des enregistrements existants, on utilisera plutôt la méthode {{domxref("IDBObjectStore.put")}}.</p>
+La méthode `add` ne permet que d'insérer des objets. Si un enregistrement existe déjà dans le magasin d'objet pour la clé fournie en argument, un évènement `ConstrainError` sera déclenché via l'objet {{domxref("IDBRequest")}}. Si on souhaite mettre à jour des enregistrements existants, on utilisera plutôt la méthode {{domxref("IDBObjectStore.put")}}.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">var request = objectStore.add(valeur, clé);</pre>
+```js
+var request = objectStore.add(valeur, clé);
+```
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>valeur</code></dt>
- <dd>La valeur à ajouter au magasin.</dd>
- <dt><code>clé</code></dt>
- <dd>La clé qu'on souhaite utiliser pour identifier l'enregistrement. Si elle n'est pas indiquée, la valeur par défaut sera <code>null</code>.</dd>
-</dl>
+- `valeur`
+  - : La valeur à ajouter au magasin.
+- `clé`
+  - : La clé qu'on souhaite utiliser pour identifier l'enregistrement. Si elle n'est pas indiquée, la valeur par défaut sera `null`.
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Un objet {{domxref("IDBRequest")}} qui émettra les différents évènements relatifs à l'opération.</p>
+Un objet {{domxref("IDBRequest")}} qui émettra les différents évènements relatifs à l'opération.
 
-<h3 id="Exceptions">Exceptions</h3>
+### Exceptions
 
-<p>Cette méthode peut lever une exception {{domxref("DOMException")}} ayant l'un des types suivants :</p>
+Cette méthode peut lever une exception {{domxref("DOMException")}} ayant l'un des types suivants :
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Exception</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>ReadOnlyError</code></td>
-   <td>La transaction associée à cette opération est en lecture seule.</td>
-  </tr>
-  <tr>
-   <td><code>TransactionInactiveError</code></td>
-   <td>La transaction pour cet objet  {{domxref("IDBObjectStore")}} est inactive.</td>
-  </tr>
-  <tr>
-   <td><code>DataError</code></td>
-   <td>
-    <p>Un des conditions suivantes est vérifiée :</p>
-
-    <ul>
-     <li>Le magasin d'objet utilise des clés en ligne ou possède un générateur de clés et une clé a été fournie dans la fonction.</li>
-     <li>Le magasin d'objet utilise des clés hors lignes et et n'a pas de générateur de clés et aucune clé n'a été fournie dans la fonction.</li>
-     <li>Le magasin d'objet utilise des clés en ligne mais ne possède pas de générateur de clés et le chemin de clé utilisé par le magasin ne pointe pas vers une clé valide.</li>
-     <li>La clé a été fournie à la fonction mais ce paramètre n'est pas une clé valide.</li>
-    </ul>
-   </td>
-  </tr>
-  <tr>
-   <td><code>InvalidStateError</code></td>
-   <td>L'objet {{domxref("IDBObjectStore")}} a été supprimé ou déplacé.</td>
-  </tr>
-  <tr>
-   <td><code>DataCloneError</code></td>
-   <td>La donnée qui devait être enregistrée n'a pas pu être clonée par l'algorithme de clonage interne.</td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th scope="col">Exception</th>
+      <th scope="col">Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>ReadOnlyError</code></td>
+      <td>La transaction associée à cette opération est en lecture seule.</td>
+    </tr>
+    <tr>
+      <td><code>TransactionInactiveError</code></td>
+      <td>
+        La transaction pour cet objet  {{domxref("IDBObjectStore")}}
+        est inactive.
+      </td>
+    </tr>
+    <tr>
+      <td><code>DataError</code></td>
+      <td>
+        <p>Un des conditions suivantes est vérifiée :</p>
+        <ul>
+          <li>
+            Le magasin d'objet utilise des clés en ligne ou possède un
+            générateur de clés et une clé a été fournie dans la fonction.
+          </li>
+          <li>
+            Le magasin d'objet utilise des clés hors lignes et et n'a pas de
+            générateur de clés et aucune clé n'a été fournie dans la fonction.
+          </li>
+          <li>
+            Le magasin d'objet utilise des clés en ligne mais ne possède pas de
+            générateur de clés et le chemin de clé utilisé par le magasin ne
+            pointe pas vers une clé valide.
+          </li>
+          <li>
+            La clé a été fournie à la fonction mais ce paramètre n'est pas une
+            clé valide.
+          </li>
+        </ul>
+      </td>
+    </tr>
+    <tr>
+      <td><code>InvalidStateError</code></td>
+      <td>
+        L'objet {{domxref("IDBObjectStore")}} a été supprimé ou
+        déplacé.
+      </td>
+    </tr>
+    <tr>
+      <td><code>DataCloneError</code></td>
+      <td>
+        La donnée qui devait être enregistrée n'a pas pu être clonée par
+        l'algorithme de clonage interne.
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans le fragment de code suivant, on ouvre une transaction en lecture/écriture vers la base de données et on ajoute des données au magasin d'objet grâce à la méthode <code>add()</code>. On notera également les fonctions rattachées à la transaction qui sont utilisées comme gestionnaires d'évènement et qui permettent de savoir si la transaction a réussi ou échoué.</p>
+Dans le fragment de code suivant, on ouvre une transaction en lecture/écriture vers la base de données et on ajoute des données au magasin d'objet grâce à la méthode `add()`. On notera également les fonctions rattachées à la transaction qui sont utilisées comme gestionnaires d'évènement et qui permettent de savoir si la transaction a réussi ou échoué.
 
-<pre class="brush: js">// On ouvre la base de données
+```js
+// On ouvre la base de données
 var DBOpenRequest = window.indexedDB.open("toDoList", 4);
 
 DBOpenRequest.onsuccess = function(event) {
-  note.innerHTML += '&lt;li&gt;Database initialisée.&lt;/li&gt;';
+  note.innerHTML += '<li>Database initialisée.</li>';
 
   // On enregistre le résultat dans la variable db
   // afin de l'utiliser par la suite
@@ -105,12 +127,12 @@ function addData() {
   // On indique si la transaction s'est déroulées
   // sans problème
   transaction.oncomplete = function(event) {
-    note.innerHTML += '&lt;li&gt;Transaction terminée : modification effectuée.&lt;/li&gt;';
+    note.innerHTML += '<li>Transaction terminée : modification effectuée.</li>';
   };
 
 
   transaction.onerror = function(event) {
-    note.innerHTML += '&lt;li&gt;Ouverture de la transaction impossible : les objets dupliqués ne sont pas autorisés.&lt;/li&gt;';
+    note.innerHTML += '<li>Ouverture de la transaction impossible : les objets dupliqués ne sont pas autorisés.</li>';
   };
 
   // On crée un magasin d'objets pour la transaction
@@ -121,43 +143,29 @@ function addData() {
 
   objectStoreRequest.onsuccess = function(event) {
     // On indique la réussite de l'insertion
-    note.innerHTML += '&lt;li&gt;Nouvel objet ajouté dans la base de données.&lt;/li&gt;';
+    note.innerHTML += '<li>Nouvel objet ajouté dans la base de données.</li>';
   };
-};</pre>
+};
+```
 
-<div class="note">
-<p><strong>Note :</strong> pour un exemple fonctionnel complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">application To-do</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple</a>).</p>
-</div>
+> **Note :** pour un exemple fonctionnel complet, voir notre [application To-do](https://github.com/mdn/to-do-notifications/) ([exemple](https://mdn.github.io/to-do-notifications/)).
 
-<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('IndexedDB', '#widl-IDBObjectStore-add-IDBRequest-any-value-any-key', 'add()')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                            | État                         | Commentaires |
+| ------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------ |
+| {{SpecName('IndexedDB', '#widl-IDBObjectStore-add-IDBRequest-any-value-any-key', 'add()')}} | {{Spec2('IndexedDB')}} |              |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.IDBObjectStore.add")}}</p>
+{{Compat("api.IDBObjectStore.add")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
- <li>Initier une connexion : {{domxref("IDBDatabase")}}</li>
- <li>Utiliser les transactions : {{domxref("IDBTransaction")}}</li>
- <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
- <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li>
- <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li>
- <li>Exemple de référence : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li>
-</ul>
+- [Utiliser IndexedDB](/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB)
+- Initier une connexion : {{domxref("IDBDatabase")}}
+- Utiliser les transactions : {{domxref("IDBTransaction")}}
+- Définir un intervalle de clés : {{domxref("IDBKeyRange")}}
+- Récupérer et modifier les données : {{domxref("IDBObjectStore")}}
+- Utiliser les curseurs {{domxref("IDBCursor")}}
+- Exemple de référence : [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages) ([exemple _live_](https://mdn.github.io/to-do-notifications/)).
diff --git a/files/fr/web/api/idbobjectstore/autoincrement/index.md b/files/fr/web/api/idbobjectstore/autoincrement/index.md
index 58aebe2096..edaf50bab0 100644
--- a/files/fr/web/api/idbobjectstore/autoincrement/index.md
+++ b/files/fr/web/api/idbobjectstore/autoincrement/index.md
@@ -3,38 +3,35 @@ title: IDBObjectStore.autoIncrement
 slug: Web/API/IDBObjectStore/autoIncrement
 translation_of: Web/API/IDBObjectStore/autoIncrement
 ---
-<p>{{ APIRef("IndexedDB") }}</p>
+{{ APIRef("IndexedDB") }}
 
-<p>La propriété <strong><code>autoIncrement</code></strong> de l'interface {{domxref("IDBObjectStore")}} renvoie la position du drapeau d’incrémentation automatique du magasin d'objet {{domxref("IDBObjectStore","relié")}}.</p>
+La propriété **`autoIncrement`** de l'interface {{domxref("IDBObjectStore")}} renvoie la position du drapeau d’incrémentation automatique du magasin d'objet {{domxref("IDBObjectStore","relié")}}.
 
-<div class="note">
-  <p><strong>Note :</strong> Chaque magasin d'objets à son conteur d’incrémentation automatique.</p>
-</div>
+> **Note :** Chaque magasin d'objets à son conteur d’incrémentation automatique.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre>var myAutoIncrement = objectStore.autoIncrement;</pre>
+    var myAutoIncrement = objectStore.autoIncrement;
 
-<h2 id="Valeur">Valeur</h2>
+## Valeur
 
-<p>Un {{domxref("Boolean","booléen")}} .</p>
+Un {{domxref("Boolean","booléen")}} .
 
-<dl>
- <dt><code>true</code></dt>
- <dd>Le magasin d'objet relié s’incrémente automatiquement.</dd>
- <dt><code>false</code></dt>
- <dd>Le magasin d'objet relié ne s’incrémente pas automatiquement.</dd>
-</dl>
+- `true`
+  - : Le magasin d'objet relié s’incrémente automatiquement.
+- `false`
+  - : Le magasin d'objet relié ne s’incrémente pas automatiquement.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Dans le code suivant, on ouvre une {{domxref("IDBDatabase","connexion")}} à la base de donnée. Sur cette connexion on démarre une {{domxref("IDBTransaction","transaction")}} en lecture/écriture pour avoir un {{domxref("IDBObjectStore","accès")}} au magasin d'objet <code>"toDoList"</code> dans lequel on {{domxref("IDBObjectStore.add","ajoute")}} un enregistrement.</p>
+Dans le code suivant, on ouvre une {{domxref("IDBDatabase","connexion")}} à la base de donnée. Sur cette connexion on démarre une {{domxref("IDBTransaction","transaction")}} en lecture/écriture pour avoir un {{domxref("IDBObjectStore","accès")}} au magasin d'objet `"toDoList"` dans lequel on {{domxref("IDBObjectStore.add","ajoute")}} un enregistrement.
 
-<p>La propriété <strong><code>autoIncrement</code></strong> de l'accès au magasin d'objet sert à affiché la position du drapeau d’incrémentation automatique de ce magasin d'objet sur la console.</p>
+La propriété **`autoIncrement`** de l'accès au magasin d'objet sert à affiché la position du drapeau d’incrémentation automatique de ce magasin d'objet sur la console.
 
-<pre class="brush: js">//Connexion à la base de données
+```js
+//Connexion à la base de données
 var DBOpenRequest = window.indexedDB.open("toDoList", 4);
 
 DBOpenRequest.onsuccess = function(event) {
@@ -55,61 +52,47 @@ function addData() {
 
 	// en cas de succès de l'ouverture de la transaction
 	transaction.oncomplete = function(event) {
-		note.innerHTML += '&lt;li&gt;Transaction complété : modification de la base de données terminée.&lt;/li&gt;';
+		note.innerHTML += '<li>Transaction complété : modification de la base de données terminée.</li>';
 	};
 	// en  cas d'échec de l'ouverture de la transaction
 	transaction.onerror = function(event) {
-		note.innerHTML += '&lt;li&gt;L\'erreur: "' + transaction.error +'" c\'est produite échec de la transaction.&lt;/li&gt;';
+		note.innerHTML += '<li>L\'erreur: "' + transaction.error +'" c\'est produite échec de la transaction.</li>';
 	};
 
 	// ouvre l'accès au un magasin "toDoList" de la transaction
 	var objectStore = transaction.objectStore("toDoList");
 
-//-&gt;Affiche la position du drapeau d’incrémentation automatique
+//->Affiche la position du drapeau d’incrémentation automatique
     console.log(objectStore.autoIncrement);
 
 	// Ajoute un enregistrement
 	var objectStoreRequest = objectStore.add(newItem[0]);
 	objectStoreRequest.onsuccess = function(event) {
 		// signale l'ajout de l'enregistrement
-		note.innerHTML += '&lt;li&gt;Enregistrement ajouté.&lt;/li&gt;';
+		note.innerHTML += '<li>Enregistrement ajouté.</li>';
 	};
  };
- </pre>
-
-<div class="note">
-  <p><strong>Note :</strong> Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>).</p>
-</div>
-
-<h2 id="Spécification">Spécification</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('IndexedDB', '#widl-IDBObjectStore-autoIncrement', 'autoIncrement')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité avec les navigateurs</h2>
-
-<p>{{Compat("api.IDBObjectStore.autoIncrement")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("IndexedDB_API.Using_IndexedDB","Utiliser IndexedDB")}}</li>
- <li>{{domxref("IDBDatabase","Débuter une connexion")}}</li>
- <li>{{domxref("IDBTransaction","Utilisé les transactions")}}</li>
- <li>{{domxref("IDBKeyRange","Définir l'intervalle des clés")}}</li>
- <li>{{domxref("IDBObjectStore","Accès aux magasins d'objets")}}</li>
- <li>{{domxref("IDBCursor","Utiliser les curseur")}}</li>
- <li>Exemple de référence: <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li>
-</ul>
+
+```
+
+> **Note :** Pour un exemple de travail complet, voir notre [To-do Notifications](https://github.com/mdn/to-do-notifications/) app ([view example live](http://mdn.github.io/to-do-notifications/)).
+
+## Spécification
+
+| Spécification                                                                                                | Statut                       | Commentaire |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------- |
+| {{SpecName('IndexedDB', '#widl-IDBObjectStore-autoIncrement', 'autoIncrement')}} | {{Spec2('IndexedDB')}} |             |
+
+## Compatibilité avec les navigateurs
+
+{{Compat("api.IDBObjectStore.autoIncrement")}}
+
+## Voir aussi
+
+- {{domxref("IndexedDB_API.Using_IndexedDB","Utiliser IndexedDB")}}
+- {{domxref("IDBDatabase","Débuter une connexion")}}
+- {{domxref("IDBTransaction","Utilisé les transactions")}}
+- {{domxref("IDBKeyRange","Définir l'intervalle des clés")}}
+- {{domxref("IDBObjectStore","Accès aux magasins d'objets")}}
+- {{domxref("IDBCursor","Utiliser les curseur")}}
+- Exemple de référence: [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages) ([view example live](http://mdn.github.io/to-do-notifications/).)
diff --git a/files/fr/web/api/idbobjectstore/clear/index.md b/files/fr/web/api/idbobjectstore/clear/index.md
index 7a46763b74..0b373c0cd6 100644
--- a/files/fr/web/api/idbobjectstore/clear/index.md
+++ b/files/fr/web/api/idbobjectstore/clear/index.md
@@ -3,46 +3,45 @@ title: IDBObjectStore.clear()
 slug: Web/API/IDBObjectStore/clear
 translation_of: Web/API/IDBObjectStore/clear
 ---
-<p>{{ APIRef("IndexedDB") }}</p>
+{{ APIRef("IndexedDB") }}
 
-<p>La méthode <strong><code>clear()</code></strong> de l'interface {{domxref("IDBObjectStore")}} fait une {{domxref("IDBRequest","requête")}} pour vider le magasin d'objet {{domxref("IDBObjectStore","relié")}}.</p>
+La méthode **`clear()`** de l'interface {{domxref("IDBObjectStore")}} fait une {{domxref("IDBRequest","requête")}} pour vider le magasin d'objet {{domxref("IDBObjectStore","relié")}}.
 
-<p>Vider un magasin d'objet consiste à supprimer tous les enregistrements et les entrées des index de ce magasin d'objet.</p>
+Vider un magasin d'objet consiste à supprimer tous les enregistrements et les entrées des index de ce magasin d'objet.
 
-<div class="note">
-<p><strong>Note :</strong> La méthode clear() ne remet pas à zero le compteur du génerateur de clé s'il y en à un.</p>
-</div>
+> **Note :** La méthode clear() ne remet pas à zero le compteur du génerateur de clé s'il y en à un.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">var request = objectStore.clear();</pre>
+```js
+var request = objectStore.clear();
+```
 
-<h2 id="Renvoie">Renvoie</h2>
+## Renvoie
 
-<p>Une {{domxref("IDBRequest","requête")}}.</p>
+Une {{domxref("IDBRequest","requête")}}.
 
-<h2 id="Exceptions">Exceptions</h2>
+## Exceptions
 
-<dl>
- <dt><code>ReadOnlyError</code></dt>
- <dd>Cette {{domxref("DOMException","exception")}} est levé si la transaction associé à cette requête est en {{domxref("IDBTransaction.mode","mode")}} lecture seule.</dd>
- <dt><code>TransactionInactiveError</code></dt>
- <dd>Cette {{domxref("DOMException","exception")}} est levé si la {{domxref("IDBTransaction","transaction")}} de l'{{domxref("IDBObjectStore","accès")}} au magasin d’objet est inactive.</dd>
-</dl>
+- `ReadOnlyError`
+  - : Cette {{domxref("DOMException","exception")}} est levé si la transaction associé à cette requête est en {{domxref("IDBTransaction.mode","mode")}} lecture seule.
+- `TransactionInactiveError`
+  - : Cette {{domxref("DOMException","exception")}} est levé si la {{domxref("IDBTransaction","transaction")}} de l'{{domxref("IDBObjectStore","accès")}} au magasin d’objet est inactive.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Dans le code suivant, on ouvre une {{domxref("IDBDatabase","connexion")}} à la base de donnée. Sur cette connexion on démarre une {{domxref("IDBTransaction","transaction")}} en lecture/écriture pour avoir un {{domxref("IDBObjectStore","accès")}} au magasin d'objet <code>"toDoList"</code> et le {{domxref("IDBObjectStore.clear","vider")}}</p>
+Dans le code suivant, on ouvre une {{domxref("IDBDatabase","connexion")}} à la base de donnée. Sur cette connexion on démarre une {{domxref("IDBTransaction","transaction")}} en lecture/écriture pour avoir un {{domxref("IDBObjectStore","accès")}} au magasin d'objet `"toDoList"` et le {{domxref("IDBObjectStore.clear","vider")}}
 
-<p>La méthode <strong><code>clear()</code></strong> de l'accès au magasin d'objet fait une {{domxref("IDBRequest","requête")}} pour vider le magasin d'objet <code>toDoList</code>.</p>
+La méthode **`clear()`** de l'accès au magasin d'objet fait une {{domxref("IDBRequest","requête")}} pour vider le magasin d'objet `toDoList`.
 
-<pre class="brush: js">//Connexion à la base de données
+```js
+//Connexion à la base de données
 var DBOpenRequest = window.indexedDB.open("toDoList", 4);
 
 DBOpenRequest.onsuccess = function(event) {
-	note.innerHTML += '&lt;li&gt;Connexion établie.&lt;/li&gt;';
+	note.innerHTML += '<li>Connexion établie.</li>';
 
 	//Affecte la connexion à la variable db.
 	db = DBOpenRequest.result;
@@ -57,12 +56,12 @@ function clearData() {
 
   // en cas de succès de l'ouverture de la transaction
   transaction.oncomplete = function(event) {
-	note.innerHTML += '&lt;li&gt;Transaction complété : modification de la base de données terminée.&lt;/li&gt;';
+	note.innerHTML += '<li>Transaction complété : modification de la base de données terminée.</li>';
   };
 
   // en cas d'échec de l'ouverture de la transaction
   transaction.onerror = function(event) {
-     note.innerHTML += '&lt;li&gt;Transaction en échec à cause de l\'erreur : ' + transaction.error + '&lt;/li&gt;';
+     note.innerHTML += '<li>Transaction en échec à cause de l\'erreur : ' + transaction.error + '</li>';
   };
 
   // ouvre l'accès au un magasin "toDoList" de la transaction
@@ -73,44 +72,29 @@ function clearData() {
 
   objectStoreRequest.onsuccess = function(event) {
   // rapporte le succès du nettoyage
-  note.innerHTML += '&lt;li&gt;Enregistrements effacées.&lt;/li&gt;';
+  note.innerHTML += '<li>Enregistrements effacées.</li>';
   };
 };
-</pre>
-
-<div class="note">
-  <p><strong>Note :</strong> Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>).</p>
-</div>
-
-<h2 id="Spécification">Spécification</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('IndexedDB', '#widl-IDBObjectStore-clear-IDBRequest', 'clear()')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité avec les navigateurs</h2>
-
-<p>{{Compat("api.IDBObjectStore.clear")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("IndexedDB_API.Using_IndexedDB","Utiliser IndexedDB")}}</li>
- <li>{{domxref("IDBDatabase","Débuter une connexion")}}</li>
- <li>{{domxref("IDBTransaction","Utilisé les transactions")}}</li>
- <li>{{domxref("IDBKeyRange","Définir l'intervalle des clés")}}</li>
- <li>{{domxref("IDBObjectStore","Accès aux magasins d'objets")}}</li>
- <li>{{domxref("IDBCursor","Utiliser les curseur")}}</li>
- <li>Exemple de référence: <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li>
-</ul>
+```
+
+> **Note :** Pour un exemple de travail complet, voir notre [To-do Notifications](https://github.com/mdn/to-do-notifications/) app ([view example live](http://mdn.github.io/to-do-notifications/)).
+
+## Spécification
+
+| Spécification                                                                                            | Statut                       | Commentaire |
+| -------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------- |
+| {{SpecName('IndexedDB', '#widl-IDBObjectStore-clear-IDBRequest', 'clear()')}} | {{Spec2('IndexedDB')}} |             |
+
+## Compatibilité avec les navigateurs
+
+{{Compat("api.IDBObjectStore.clear")}}
+
+## Voir aussi
+
+- {{domxref("IndexedDB_API.Using_IndexedDB","Utiliser IndexedDB")}}
+- {{domxref("IDBDatabase","Débuter une connexion")}}
+- {{domxref("IDBTransaction","Utilisé les transactions")}}
+- {{domxref("IDBKeyRange","Définir l'intervalle des clés")}}
+- {{domxref("IDBObjectStore","Accès aux magasins d'objets")}}
+- {{domxref("IDBCursor","Utiliser les curseur")}}
+- Exemple de référence: [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages) ([view example live](http://mdn.github.io/to-do-notifications/).)
diff --git a/files/fr/web/api/idbobjectstore/count/index.md b/files/fr/web/api/idbobjectstore/count/index.md
index 929daad96b..bdbb5e7ebb 100644
--- a/files/fr/web/api/idbobjectstore/count/index.md
+++ b/files/fr/web/api/idbobjectstore/count/index.md
@@ -9,96 +9,65 @@ tags:
   - Reference
 translation_of: Web/API/IDBObjectStore/count
 ---
-<div>{{APIRef("IndexedDB")}}</div>
+{{APIRef("IndexedDB")}}
 
-<p>La méthode <strong><code>count()</code></strong>, rattachée à l'interface {{domxref("IDBObjectStore")}}, renvoie un objet {{domxref("IDBRequest")}} et, dans un <em>thread</em> séparé, renvoie le nombre d'enregistrements qui correspondent à la clé ou à l'intervalle de clé ({{domxref("IDBKeyRange")}}) passé en argument. Si aucun argument n'est fourni, la méthode renvoie le nombre total d'enregistrements contenus dans le magasin d'objets.</p>
+La méthode **`count()`**, rattachée à l'interface {{domxref("IDBObjectStore")}}, renvoie un objet {{domxref("IDBRequest")}} et, dans un _thread_ séparé, renvoie le nombre d'enregistrements qui correspondent à la clé ou à l'intervalle de clé ({{domxref("IDBKeyRange")}}) passé en argument. Si aucun argument n'est fourni, la méthode renvoie le nombre total d'enregistrements contenus dans le magasin d'objets.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var requete = ObjectStore.count(optionalKeyRange);</pre>
+    var requete = ObjectStore.count(optionalKeyRange);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>optionalKeyRange</code></dt>
- <dd>Une clé ou un intervalle de clé ({{domxref("IDBKeyRange")}}) qui indique le critère de comptage des enregistrements.</dd>
-</dl>
+- `optionalKeyRange`
+  - : Une clé ou un intervalle de clé ({{domxref("IDBKeyRange")}}) qui indique le critère de comptage des enregistrements.
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Un objet {{domxref("IDBRequest")}} sur lequel seront déclenchés les différents évènements relatifs à l'opération.</p>
+Un objet {{domxref("IDBRequest")}} sur lequel seront déclenchés les différents évènements relatifs à l'opération.
 
-<h3 id="Exceptions">Exceptions</h3>
+### Exceptions
 
-<p>Cette méthode peut déclencher une exception {{domxref("DOMException")}} ayant un des types suivants :</p>
+Cette méthode peut déclencher une exception {{domxref("DOMException")}} ayant un des types suivants :
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Exception</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>InvalidStateError</code></td>
-   <td>L'objet {{domxref("IDBObjectStore")}} a été supprimé.</td>
-  </tr>
-  <tr>
-   <td><code>TransactionInactiveError</code></td>
-   <td>La transaction associée à l'objet {{domxref("IDBObjectStore")}} est inactive.</td>
-  </tr>
-  <tr>
-   <td><code>DataError</code></td>
-   <td>La clé ou l'intervalle de clé passé en argument est invalide.</td>
-  </tr>
- </tbody>
-</table>
+| Exception                  | Description                                                                              |
+| -------------------------- | ---------------------------------------------------------------------------------------- |
+| `InvalidStateError`        | L'objet {{domxref("IDBObjectStore")}} a été supprimé.                         |
+| `TransactionInactiveError` | La transaction associée à l'objet {{domxref("IDBObjectStore")}} est inactive. |
+| `DataError`                | La clé ou l'intervalle de clé passé en argument est invalide.                            |
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans ce fragment de code, on crée une transaction, on récupère un magasin d'objets puis on compte le nombre d'enregistrements contenus dans ce magasin grâce à la méthode <code>count()</code>. Lorsque l'évènement associé au succès de l'opération est déclenché, on inscrit le résultat dans la console.</p>
+Dans ce fragment de code, on crée une transaction, on récupère un magasin d'objets puis on compte le nombre d'enregistrements contenus dans ce magasin grâce à la méthode `count()`. Lorsque l'évènement associé au succès de l'opération est déclenché, on inscrit le résultat dans la console.
 
-<pre class="brush: js">var transaction = db.transaction(['fThings'], 'readonly');
+```js
+var transaction = db.transaction(['fThings'], 'readonly');
 var objectStore = transaction.objectStore('fThings');
 
 var countRequest = objectStore.count();
 countRequest.onsuccess = function() {
   console.log(countRequest.result);
 }
-</pre>
-
-<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('IndexedDB', '#widl-IDBObjectStore-count-IDBRequest-any-key', 'count()')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.IDBObjectStore.count")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
- <li>Initier une connexion : {{domxref("IDBDatabase")}}</li>
- <li>Utiliser les transactions : {{domxref("IDBTransaction")}}</li>
- <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
- <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li>
- <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li>
- <li>Exemple de référence : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li>
-</ul>
+```
+
+## Spécifications
+
+| Spécification                                                                                                    | État                         | Commentaires |
+| ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------ |
+| {{SpecName('IndexedDB', '#widl-IDBObjectStore-count-IDBRequest-any-key', 'count()')}} | {{Spec2('IndexedDB')}} |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.IDBObjectStore.count")}}
+
+## Voir aussi
+
+- [Utiliser IndexedDB](/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB)
+- Initier une connexion : {{domxref("IDBDatabase")}}
+- Utiliser les transactions : {{domxref("IDBTransaction")}}
+- Définir un intervalle de clés : {{domxref("IDBKeyRange")}}
+- Récupérer et modifier les données : {{domxref("IDBObjectStore")}}
+- Utiliser les curseurs {{domxref("IDBCursor")}}
+- Exemple de référence : [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages) ([exemple _live_](https://mdn.github.io/to-do-notifications/)).
diff --git a/files/fr/web/api/idbobjectstore/createindex/index.md b/files/fr/web/api/idbobjectstore/createindex/index.md
index 64b80ef538..e5d27186b5 100644
--- a/files/fr/web/api/idbobjectstore/createindex/index.md
+++ b/files/fr/web/api/idbobjectstore/createindex/index.md
@@ -3,100 +3,116 @@ title: IDBObjectStore.createIndex()
 slug: Web/API/IDBObjectStore/createIndex
 translation_of: Web/API/IDBObjectStore/createIndex
 ---
-<p>{{ APIRef("IndexedDB") }}</p>
-
-<p>La méthode <strong><code>createIndex()</code></strong> de l'interface {{domxref("IDBObjectStore")}} met en place sur le magasin d'objet {{domxref("IDBObjectStore","relié")}} un nouvel index et en renvoie l'{{domxref("IDBIndex","accès")}}.</p>
-
-<div class="note">
-<p><strong>Note :</strong> Cette méthode ne peut être appelé que si la transaction de l'accès au magasin d'objet est en mode VersionChange.</p>
-</div>
-
-<p>{{AvailableInWorkers}}</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="brush: js">objectStore.createIndex(nomIndex, nomCle, parametresIndexOptionnel);</pre>
-
-<h2 id="Paramètres">Paramètres</h2>
-
-<dl>
- <dt>nomIndex</dt>
- <dd>Le nom de l'index que l'on veut ajouter. Il est possible d'ajouter un index avec un nom vide.</dd>
- <dt>nomCle</dt>
- <dd>Le nom de clé qu'utilise l'index. Il est possible d'ajouter un index sans nom de clé.</dd>
- <dt>parametresIndexOptionnel {{optional_inline}}</dt>
- <dd>
- <p>Un objet optionnel pouvant inclure une ou plusieurs des propriétés suivantes:</p>
-
- <table class="standard-table">
-  <thead>
-   <tr>
-    <th scope="col">Propriété</th>
-    <th scope="col">Description</th>
-   </tr>
-  </thead>
-  <tbody>
-   <tr>
-    <td><code>unique</code></td>
-    <td>Si true, l'index empêcheras la duplication d'une clé.</td>
-   </tr>
-   <tr>
-    <td><code>multiEntry</code></td>
-    <td>Si true, l'index ajoutera une entrée pour chaque élément de tableau quand le nom de clé de clé est résolue. Si false, il ajoutera un seule entrée contenant le tableau.</td>
-   </tr>
-   <tr>
-    <td><code>locale</code></td>
-    <td>
-     <p>Actuellement uniquement dans Firefox 43+ , cela vous permet de spécifier des paramètres de localisation pour l'index. Toutes les opérations de tri effectuées sur les données via des intervalle de clé obéirons aux règles locales de tri (voir <a href="/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB#Locale-aware_sorting">trie dans localisation courante</a>, en). Vous pouvez spécifier sa valeur de trois façons différentes:</p>
-
-     <ul>
-      <li><code>string</code>: une chaîne de caractère contenant le code de la localisation , par exemple 'fr' ou <code>'en-US'</code>.</li>
-      <li><code>auto</code>: La localisation par défaut est utilisé (peut être régler par l'utilisateur).</li>
-      <li><code>null or undefined</code>: Les règles de tri par défaut de javaScript seront utilisées.</li>
-     </ul>
-    </td>
-   </tr>
-  </tbody>
- </table>
- </dd>
-</dl>
-
-<h2 id="Renvoie">Renvoie</h2>
-
-<p>L'{{domxref("IDBIndex","accès")}} au nouvel index.</p>
-
-<h2 id="Exceptions">Exceptions</h2>
-
-<dl>
- <dt><code>InvalidStateError</code></dt>
- <dd>Cette {{domxref("DOMException","exeption")}} si la {{domxref("IDBTransaction","transaction")}} dont dépend cet {{domxref("IDBObjectStore","accès")}} au magasin d'objet n'est pas en {{domxref("IDBTransaction.mode","mode")}} <code>versionchange</code>.</dd>
- <dt><code>TransactionInactiveError</code></dt>
- <dd>Cette {{domxref("DOMException","exeption")}} si la {{domxref("IDBTransaction","transaction")}} de l'{{domxref("IDBObjectStore","accès")}} au magasin d’objet est inactive.
- <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176165">bug 1176165</a> ).
- </dd>
- <dt><code>ConstraintError</code></dt>
- <dd>Cette {{domxref("DOMException","exeption")}} si un index avec le même nom (case sensible) existe déjà sur le magasin d'objet.</dd>
-</dl>
-
-<h2 id="Exemple">Exemple</h2>
-
-<p>Dans l'exemple suivant on peut voir le gestionnaire d'événement {{domxref("IDBOpenDBRequest.onupgradeneeded","<code>onupgradeneeded</code>")}} être utilisé pour mètre à jour la structure de la base de donnée quand un numéro de version supérieur est chargé.</p>
-
-<p>Des méthode <strong><code>createIndex()</code></strong> sont utilisées pour mètre en place différents index sur le magasin d'objet <code>toDoList</code>.</p>
-
-<pre class="brush: js">var db;
+{{ APIRef("IndexedDB") }}
+
+La méthode **`createIndex()`** de l'interface {{domxref("IDBObjectStore")}} met en place sur le magasin d'objet {{domxref("IDBObjectStore","relié")}} un nouvel index et en renvoie l'{{domxref("IDBIndex","accès")}}.
+
+> **Note :** Cette méthode ne peut être appelé que si la transaction de l'accès au magasin d'objet est en mode VersionChange.
+
+{{AvailableInWorkers}}
+
+## Syntaxe
+
+```js
+objectStore.createIndex(nomIndex, nomCle, parametresIndexOptionnel);
+```
+
+## Paramètres
+
+- nomIndex
+  - : Le nom de l'index que l'on veut ajouter. Il est possible d'ajouter un index avec un nom vide.
+- nomCle
+  - : Le nom de clé qu'utilise l'index. Il est possible d'ajouter un index sans nom de clé.
+- parametresIndexOptionnel {{optional_inline}}
+
+  - : Un objet optionnel pouvant inclure une ou plusieurs des propriétés suivantes:
+
+    <table class="standard-table">
+      <thead>
+        <tr>
+          <th scope="col">Propriété</th>
+          <th scope="col">Description</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td><code>unique</code></td>
+          <td>Si true, l'index empêcheras la duplication d'une clé.</td>
+        </tr>
+        <tr>
+          <td><code>multiEntry</code></td>
+          <td>
+            Si true, l'index ajoutera une entrée pour chaque élément de tableau
+            quand le nom de clé de clé est résolue. Si false, il ajoutera un seule
+            entrée contenant le tableau.
+          </td>
+        </tr>
+        <tr>
+          <td><code>locale</code></td>
+          <td>
+            <p>
+              Actuellement uniquement dans Firefox 43+ , cela vous permet de
+              spécifier des paramètres de localisation pour l'index. Toutes les
+              opérations de tri effectuées sur les données via des intervalle de clé
+              obéirons aux règles locales de tri (voir
+              <a
+                href="/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB#Locale-aware_sorting"
+                >trie dans localisation courante</a
+              >, en). Vous pouvez spécifier sa valeur de trois façons différentes:
+            </p>
+            <ul>
+              <li>
+                <code>string</code>: une chaîne de caractère contenant le code de la
+                localisation , par exemple 'fr' ou <code>'en-US'</code>.
+              </li>
+              <li>
+                <code>auto</code>: La localisation par défaut est utilisé (peut être
+                régler par l'utilisateur).
+              </li>
+              <li>
+                <code>null or undefined</code>: Les règles de tri par défaut de
+                javaScript seront utilisées.
+              </li>
+            </ul>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+
+## Renvoie
+
+L'{{domxref("IDBIndex","accès")}} au nouvel index.
+
+## Exceptions
+
+- `InvalidStateError`
+  - : Cette {{domxref("DOMException","exeption")}} si la {{domxref("IDBTransaction","transaction")}} dont dépend cet {{domxref("IDBObjectStore","accès")}} au magasin d'objet n'est pas en {{domxref("IDBTransaction.mode","mode")}} `versionchange`.
+- `TransactionInactiveError`
+  - : Cette {{domxref("DOMException","exeption")}} si la {{domxref("IDBTransaction","transaction")}} de l'{{domxref("IDBObjectStore","accès")}} au magasin d’objet est inactive.
+    [bug 1176165](https://bugzilla.mozilla.org/show_bug.cgi?id=1176165) ).
+- `ConstraintError`
+  - : Cette {{domxref("DOMException","exeption")}} si un index avec le même nom (case sensible) existe déjà sur le magasin d'objet.
+
+## Exemple
+
+Dans l'exemple suivant on peut voir le gestionnaire d'événement {{domxref("IDBOpenDBRequest.onupgradeneeded","<code>onupgradeneeded</code>")}} être utilisé pour mètre à jour la structure de la base de donnée quand un numéro de version supérieur est chargé.
+
+Des méthode **`createIndex()`** sont utilisées pour mètre en place différents index sur le magasin d'objet `toDoList`.
+
+```js
+var db;
 
 // Requête d'ouverture de la base de données "toDoList"
 var DBOpenRequest = window.indexedDB.open("toDoList", 4);
 
 // Gère  l'échec de l'ouverture de la base
 DBOpenRequest.onerror = function(event) {
-  note.innerHTML += '&lt;li&gt;La base de donnée n\'as pas peut être ouverte.&lt;/li&gt;';
+  note.innerHTML += '<li>La base de donnée n\'as pas peut être ouverte.</li>';
 };
 
 // Gère le succès de l'ouverture de la base
 DBOpenRequest.onsuccess = function(event) {
-  note.innerHTML += '&lt;li&gt;La base de données est ouverte.&lt;/li&gt;';
+  note.innerHTML += '<li>La base de données est ouverte.</li>';
 
   //La connexion est affcté à la variable db.
   db = request.result;
@@ -112,7 +128,7 @@ DBOpenRequest.onupgradeneeded = function(event) {
   var db = event.target.result;
 
   db.onerror = function(event) {
-    note.innerHTML += '&lt;li&gt;Erreur de chargement de la base de données.&lt;/li&gt;';
+    note.innerHTML += '<li>Erreur de chargement de la base de données.</li>';
   };
 
   // L'Accès au magasin d'objet "toDoList" de la base de donnée
@@ -126,41 +142,26 @@ DBOpenRequest.onupgradeneeded = function(event) {
   objectStore.createIndex("annee", "year", { unique: false });
   objectStore.createIndex("notifiee", "notified", { unique: false });
 };
-</pre>
-
-<div class="note">
-  <p><strong>Note :</strong> Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>).</p>
-</div>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('IndexedDB', '#widl-IDBObjectStore-createIndex-IDBIndex-DOMString-name-DOMString-sequence-DOMString--keyPath-IDBIndexParameters-optionalParameters', 'createIndex()')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité avec les navigateurs</h2>
-
-<p>{{Compat("api.IDBObjectStore.createIndex")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("IndexedDB_API.Using_IndexedDB","Utiliser IndexedDB")}}</li>
- <li>{{domxref("IDBDatabase","Débuter une connexion")}}</li>
- <li>{{domxref("IDBTransaction","Utilisé les transactions")}}</li>
- <li>{{domxref("IDBKeyRange","Définir l'intervalle des clés")}}</li>
- <li>{{domxref("IDBObjectStore","Accès aux magasins d'objets")}}</li>
- <li>{{domxref("IDBCursor","Utiliser les curseur")}}</li>
- <li>Exemple de référence: <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li>
-</ul>
+```
+
+> **Note :** Pour un exemple de travail complet, voir notre [To-do Notifications](https://github.com/mdn/to-do-notifications/) app ([view example live](http://mdn.github.io/to-do-notifications/)).
+
+## Spécifications
+
+| Spécification                                                                                                                                                                                                                                | Statut                       | Commentaire |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------- |
+| {{SpecName('IndexedDB', '#widl-IDBObjectStore-createIndex-IDBIndex-DOMString-name-DOMString-sequence-DOMString--keyPath-IDBIndexParameters-optionalParameters', 'createIndex()')}} | {{Spec2('IndexedDB')}} |             |
+
+## Compatibilité avec les navigateurs
+
+{{Compat("api.IDBObjectStore.createIndex")}}
+
+## Voir aussi
+
+- {{domxref("IndexedDB_API.Using_IndexedDB","Utiliser IndexedDB")}}
+- {{domxref("IDBDatabase","Débuter une connexion")}}
+- {{domxref("IDBTransaction","Utilisé les transactions")}}
+- {{domxref("IDBKeyRange","Définir l'intervalle des clés")}}
+- {{domxref("IDBObjectStore","Accès aux magasins d'objets")}}
+- {{domxref("IDBCursor","Utiliser les curseur")}}
+- Exemple de référence: [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages) ([view example live](http://mdn.github.io/to-do-notifications/).)
diff --git a/files/fr/web/api/idbobjectstore/delete/index.md b/files/fr/web/api/idbobjectstore/delete/index.md
index 66ebf75c18..f79aca9cd7 100644
--- a/files/fr/web/api/idbobjectstore/delete/index.md
+++ b/files/fr/web/api/idbobjectstore/delete/index.md
@@ -8,69 +8,50 @@ tags:
   - Reference
 translation_of: Web/API/IDBObjectStore/delete
 ---
-<div>{{APIRef("IndexedDB")}}</div>
+{{APIRef("IndexedDB")}}
 
-<p>La méthode <strong><code>delete()</code></strong>, rattachée à l'interface {{domxref("IDBObjectStore")}}, renvoie un objet {{domxref("IDBRequest")}} et, dans un <em>thread</em> séparé, supprime le ou les enregistrements concernés.</p>
+La méthode **`delete()`**, rattachée à l'interface {{domxref("IDBObjectStore")}}, renvoie un objet {{domxref("IDBRequest")}} et, dans un _thread_ séparé, supprime le ou les enregistrements concernés.
 
-<p>Cette méthode prend une clé ou un objet {{domxref("IDBKeyRange")}} en argument ce qui permet de supprimer un ou plusieurs enregistrements. Si on souhaite supprimer l'ensemble des enregistrements d'un magasin de données, on utilisera plutôt la méthode {{domxref("IDBObjectStore.clear")}}.</p>
+Cette méthode prend une clé ou un objet {{domxref("IDBKeyRange")}} en argument ce qui permet de supprimer un ou plusieurs enregistrements. Si on souhaite supprimer l'ensemble des enregistrements d'un magasin de données, on utilisera plutôt la méthode {{domxref("IDBObjectStore.clear")}}.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">var request = objectStore.delete(keyOrKeyRange);</pre>
+```js
+var request = objectStore.delete(keyOrKeyRange);
+```
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>keyOrKeyRange</code></dt>
- <dd>La clé de l'enregistrement qu'on souhaite supprimer ou un objet {{domxref("IDBKeyRange")}} qui indique l'intervalle de clés à supprimer.</dd>
-</dl>
+- `keyOrKeyRange`
+  - : La clé de l'enregistrement qu'on souhaite supprimer ou un objet {{domxref("IDBKeyRange")}} qui indique l'intervalle de clés à supprimer.
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Un objet {{domxref("IDBRequest")}} qui recevra les évènements relatifs à cette opération. <code>request.result</code> vaut {{jsxref("undefined")}}.</p>
+Un objet {{domxref("IDBRequest")}} qui recevra les évènements relatifs à cette opération. `request.result` vaut {{jsxref("undefined")}}.
 
-<h3 id="Exceptions">Exceptions</h3>
+### Exceptions
 
-<p>Cette méthode peut lever une des exceptions suivantes :</p>
+Cette méthode peut lever une des exceptions suivantes :
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Exception</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>TransactionInactiveError</code></td>
-   <td>La transaction associée au curseur <code>IDBCursor</code> est inactive.</td>
-  </tr>
-  <tr>
-   <td><code>ReadOnlyError</code></td>
-   <td>La transaction est uniquement en lecture seule.</td>
-  </tr>
-  <tr>
-   <td><code>InvalidStateError</code></td>
-   <td>Le curseur créé avec {{domxref("IDBindex.openKeyCursor")}}, est en train d'être parcouru ou a été parcouru après sa fin.</td>
-  </tr>
-  <tr>
-   <td><code>DataError</code></td>
-   <td>La clé ou l'intervalle de clés n'est pas valide.</td>
-  </tr>
- </tbody>
-</table>
+| Exception                  | Description                                                                                                                         |
+| -------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
+| `TransactionInactiveError` | La transaction associée au curseur `IDBCursor` est inactive.                                                                        |
+| `ReadOnlyError`            | La transaction est uniquement en lecture seule.                                                                                     |
+| `InvalidStateError`        | Le curseur créé avec {{domxref("IDBindex.openKeyCursor")}}, est en train d'être parcouru ou a été parcouru après sa fin. |
+| `DataError`                | La clé ou l'intervalle de clés n'est pas valide.                                                                                    |
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans l'exemple qui suit, on ouvre une transaction en lecture/écriture et on supprime un enregistrement donné grâce à <code>delete()</code>. Pour un exemple complet, voir l'application <a href="https://github.com/mdn/to-do-notifications/">Notifications To-do</a> (<a href="https://mdn.github.io/to-do-notifications/">démonstration</a>).</p>
+Dans l'exemple qui suit, on ouvre une transaction en lecture/écriture et on supprime un enregistrement donné grâce à `delete()`. Pour un exemple complet, voir l'application [Notifications To-do](https://github.com/mdn/to-do-notifications/) ([démonstration](https://mdn.github.io/to-do-notifications/)).
 
-<pre class="brush: js">// On ouvre l'accès à la base de données
+```js
+// On ouvre l'accès à la base de données
 var DBOpenRequest = window.indexedDB.open("toDoList", 4);
 
 DBOpenRequest.onsuccess = function(event) {
-  note.innerHTML += '&lt;li&gt;Initialisation de la base&lt;/li&gt;';
+  note.innerHTML += '<li>Initialisation de la base</li>';
 
   // On enregistre le résultat de l'ouverture
   // dans la variable db.
@@ -88,12 +69,12 @@ function deleteData() {
 
   // On indique le succès de la transaction
   transaction.oncomplete = function(event) {
-    note.innerHTML += '&lt;li&gt;Transaction terminée : modification de la base terminée.&lt;/li&gt;';
+    note.innerHTML += '<li>Transaction terminée : modification de la base terminée.</li>';
   };
 
 
   transaction.onerror = function(event) {
-    note.innerHTML += '&lt;li&gt;Transaction interrompue suite à l\'erreur : ' + transaction.error + '&lt;/li&gt;';
+    note.innerHTML += '<li>Transaction interrompue suite à l\'erreur : ' + transaction.error + '</li>';
   };
 
   // On crée un magasin d'objets pour la transaction
@@ -104,39 +85,27 @@ function deleteData() {
 
   objectStoreRequest.onsuccess = function(event) {
     // On indique le succès de l'opération
-    note.innerHTML += '&lt;li&gt;Enregistremnt supprimé.&lt;/li&gt;';
+    note.innerHTML += '<li>Enregistremnt supprimé.</li>';
   };
-};</pre>
-
-<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('IndexedDB', '#widl-IDBObjectStore-delete-IDBRequest-any-key', 'delete()')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.IDBObjectStore.delete")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
- <li>Initier une connexion : {{domxref("IDBDatabase")}}</li>
- <li>Utiliser les transactions : {{domxref("IDBTransaction")}}</li>
- <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
- <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li>
- <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li>
- <li>L'exemple de référence : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">notifications de trucs à faire</a> (<a href="https://mdn.github.io/to-do-notifications/">voir la démonstration</a>)</li>
-</ul>
+};
+```
+
+## Spécifications
+
+| Spécification                                                                                                        | État                         | Commentaires |
+| -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------ |
+| {{SpecName('IndexedDB', '#widl-IDBObjectStore-delete-IDBRequest-any-key', 'delete()')}} | {{Spec2('IndexedDB')}} |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.IDBObjectStore.delete")}}
+
+## Voir aussi
+
+- [Utiliser IndexedDB](/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB)
+- Initier une connexion : {{domxref("IDBDatabase")}}
+- Utiliser les transactions : {{domxref("IDBTransaction")}}
+- Définir un intervalle de clés : {{domxref("IDBKeyRange")}}
+- Récupérer et modifier les données : {{domxref("IDBObjectStore")}}
+- Utiliser les curseurs {{domxref("IDBCursor")}}
+- L'exemple de référence : [notifications de trucs à faire](https://github.com/mdn/to-do-notifications/tree/gh-pages) ([voir la démonstration](https://mdn.github.io/to-do-notifications/))
diff --git a/files/fr/web/api/idbobjectstore/deleteindex/index.md b/files/fr/web/api/idbobjectstore/deleteindex/index.md
index 6c01a8ab42..9f493d0d3a 100644
--- a/files/fr/web/api/idbobjectstore/deleteindex/index.md
+++ b/files/fr/web/api/idbobjectstore/deleteindex/index.md
@@ -3,63 +3,59 @@ title: IDBObjectStore.deleteIndex()
 slug: Web/API/IDBObjectStore/deleteIndex
 translation_of: Web/API/IDBObjectStore/deleteIndex
 ---
-<p>{{ APIRef("IndexedDB") }}</p>
+{{ APIRef("IndexedDB") }}
 
-<p>La méthode <strong><code>deleteIndex()</code></strong> de l'interface {{domxref("IDBObjectStore")}} supprime l'index dont le nom est passé en paramètre, du magasin d'objet relié ({{domxref("IDBObjectStore")}}).</p>
+La méthode **`deleteIndex()`** de l'interface {{domxref("IDBObjectStore")}} supprime l'index dont le nom est passé en paramètre, du magasin d'objet relié ({{domxref("IDBObjectStore")}}).
 
-<div class="note">
-<p><strong>Note :</strong> Cette méthode ne peut être appelée que si la transaction ({{domxref("IDBTransaction")}}) de l'accès ({{domxref("IDBObjectStore")}}) au magasin d'objet est en mode ({{domxref("IDBTransaction.mode")}}) <strong><a href="/fr/docs/Web/API/IDBTransaction/mode#versionchange">versionchange</a></strong>. Les propriétés<strong> indexNames ({{domxref("IDBObjectStore.indexNames")}}) </strong>des accès au magasin d'object seront aussi mises à jour.</p>
-</div>
+> **Note :** Cette méthode ne peut être appelée que si la transaction ({{domxref("IDBTransaction")}}) de l'accès ({{domxref("IDBObjectStore")}}) au magasin d'objet est en mode ({{domxref("IDBTransaction.mode")}}) **[versionchange](/fr/docs/Web/API/IDBTransaction/mode#versionchange)**. Les propriétés **indexNames ({{domxref("IDBObjectStore.indexNames")}})** des accès au magasin d'object seront aussi mises à jour.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">objectStore.deleteIndex(nomIndex);</pre>
+```js
+objectStore.deleteIndex(nomIndex);
+```
 
-<h3 id="Paramètre">Paramètre</h3>
+### Paramètre
 
-<dl>
- <dt>nomIndex</dt>
- <dd>Le nom de l'index à supprimer.</dd>
-</dl>
+- nomIndex
+  - : Le nom de l'index à supprimer.
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Void.</p>
+Void.
 
-<h3 id="Exceptions">Exceptions</h3>
+### Exceptions
 
-<dl>
- <dt><code>InvalidStateError</code></dt>
- <dd>Cette exception ({{domxref("DOMException")}}) est levée si la transaction ({{domxref("IDBTransaction")}}) dont dépend cet accès ({{domxref("IDBObjectStore")}}) au magasin d'objet n'est pas en mode ({{domxref("IDBTransaction.mode")}}) <a href="/fr/docs/Web/API/IDBTransaction/mode#versionchange"><code>versionchange</code></a>.</dd>
- <dt><code>TransactionInactiveError</code></dt>
- <dd><p>Cette exception ({{domxref("DOMException")}}) est levée si la transaction ({{domxref("IDBTransaction")}}) de l'accès ({{domxref("IDBObjectStore")}}) au magasin d’objet est inactive.
- <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176165">bug 1176165</a>).</p>
- </dd>
- <dt><code>NotFoundError</code></dt>
- <dd>Cette exception ({{domxref("DOMException")}}) est levée si l'index avec le nom (case sensible) demandé n'existe pas sur le magasin d'objet.</dd>
-</dl>
+- `InvalidStateError`
+  - : Cette exception ({{domxref("DOMException")}}) est levée si la transaction ({{domxref("IDBTransaction")}}) dont dépend cet accès ({{domxref("IDBObjectStore")}}) au magasin d'objet n'est pas en mode ({{domxref("IDBTransaction.mode")}}) [`versionchange`](/fr/docs/Web/API/IDBTransaction/mode#versionchange).
+- `TransactionInactiveError`
+  - : Cette exception ({{domxref("DOMException")}}) est levée si la transaction ({{domxref("IDBTransaction")}}) de l'accès ({{domxref("IDBObjectStore")}}) au magasin d’objet est inactive.
+    [bug 1176165](https://bugzilla.mozilla.org/show_bug.cgi?id=1176165)).
+- `NotFoundError`
+  - : Cette exception ({{domxref("DOMException")}}) est levée si l'index avec le nom (case sensible) demandé n'existe pas sur le magasin d'objet.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Dans l'exemple suivant on peut voir le gestionnaire d'événement {{domxref("IDBOpenDBRequest.onupgradeneeded","<code>onupgradeneeded</code>")}} être utilisé pour mettre à jour la structure de la base de données quand un numéro de version supérieure est chargé.</p>
+Dans l'exemple suivant on peut voir le gestionnaire d'événement {{domxref("IDBOpenDBRequest.onupgradeneeded","<code>onupgradeneeded</code>")}} être utilisé pour mettre à jour la structure de la base de données quand un numéro de version supérieure est chargé.
 
-<p>Des méthode <strong><code>deleteIndex()</code></strong> sont utilisées pour supprimer d'anciens index du magasin d'objet <code>toDoList</code>.</p>
+Des méthode **`deleteIndex()`** sont utilisées pour supprimer d'anciens index du magasin d'objet `toDoList`.
 
-<pre class="brush: js">var db;
+```js
+var db;
 
 // Requête d'ouverture de la base de données "toDoList"
 var DBOpenRequest = window.indexedDB.open("toDoList", 4);
 
 // Gère  l'échec de l'ouverture de la base
 DBOpenRequest.onerror = function(event) {
-  note.innerHTML += '&lt;li&gt;La base de donnée n\'as pas peut être ouverte.&lt;/li&gt;';
+  note.innerHTML += '<li>La base de donnée n\'as pas peut être ouverte.</li>';
 };
 
 // Gère le succès de l'ouverture de la base
 DBOpenRequest.onsuccess = function(event) {
-  note.innerHTML += '&lt;li&gt;La base de données est ouverte.&lt;/li&gt;';
+  note.innerHTML += '<li>La base de données est ouverte.</li>';
 
   //
   db = request.result;
@@ -74,7 +70,7 @@ DBOpenRequest.onsuccess = function(event) {
 DBOpenRequest.onupgradeneeded = function(event) {
 
   db.onerror = function(event) {
-    note.innerHTML += '&lt;li&gt;Erreur de chargement de la base de données.&lt;/li&gt;';
+    note.innerHTML += '<li>Erreur de chargement de la base de données.</li>';
   };
 
   // L'Accès au magasin d'objet "toDoList" de la base de données
@@ -92,41 +88,26 @@ DBOpenRequest.onupgradeneeded = function(event) {
   objectStore.deleteIndex("secondes");
   objectStore.deleteIndex("contact");
 };
-</pre>
-
-<div class="note">
-  <p><strong>Note :</strong> Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>).</p>
-</div>
-
-<h2 id="Spécification">Spécification</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('IndexedDB', '#widl-IDBObjectStore-deleteIndex-void-DOMString-indexName', 'deleteIndex()')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité avec les navigateurs</h2>
-
-<p>{{Compat("api.IDBObjectStore.deleteIndex")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("IndexedDB_API.Using_IndexedDB","Utiliser IndexedDB")}}</li>
- <li>{{domxref("IDBDatabase","Débuter une connexion")}}</li>
- <li>{{domxref("IDBTransaction","Utilisé les transactions")}}</li>
- <li>{{domxref("IDBKeyRange","Définir l'intervalle des clés")}}</li>
- <li>{{domxref("IDBObjectStore","Accès aux magasins d'objets")}}</li>
- <li>{{domxref("IDBCursor","Utiliser les curseur")}}</li>
- <li>Exemple de référence: <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li>
-</ul>
+```
+
+> **Note :** Pour un exemple de travail complet, voir notre [To-do Notifications](https://github.com/mdn/to-do-notifications/) app ([view example live](http://mdn.github.io/to-do-notifications/)).
+
+## Spécification
+
+| Spécification                                                                                                                            | État                         | Commentaires |
+| ---------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------ |
+| {{SpecName('IndexedDB', '#widl-IDBObjectStore-deleteIndex-void-DOMString-indexName', 'deleteIndex()')}} | {{Spec2('IndexedDB')}} |              |
+
+## Compatibilité avec les navigateurs
+
+{{Compat("api.IDBObjectStore.deleteIndex")}}
+
+## Voir aussi
+
+- {{domxref("IndexedDB_API.Using_IndexedDB","Utiliser IndexedDB")}}
+- {{domxref("IDBDatabase","Débuter une connexion")}}
+- {{domxref("IDBTransaction","Utilisé les transactions")}}
+- {{domxref("IDBKeyRange","Définir l'intervalle des clés")}}
+- {{domxref("IDBObjectStore","Accès aux magasins d'objets")}}
+- {{domxref("IDBCursor","Utiliser les curseur")}}
+- Exemple de référence: [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages) ([view example live](http://mdn.github.io/to-do-notifications/).)
diff --git a/files/fr/web/api/idbobjectstore/get/index.md b/files/fr/web/api/idbobjectstore/get/index.md
index 28850ce536..0432355d73 100644
--- a/files/fr/web/api/idbobjectstore/get/index.md
+++ b/files/fr/web/api/idbobjectstore/get/index.md
@@ -3,57 +3,52 @@ title: IDBObjectStore.get()
 slug: Web/API/IDBObjectStore/get
 translation_of: Web/API/IDBObjectStore/get
 ---
-<p>{{ APIRef("IndexedDB") }}</p>
+{{ APIRef("IndexedDB") }}
 
-<div>
-<p>La méthode <strong><code>get()</code></strong> de l'interface {{domxref("IDBObjectStore")}} fait une {{domxref("IDBRequest","requête")}} pour renvoyer la valeur d'un enregistrement du magasin d'objet {{domxref("IDBObjectStore","relié")}}.</p>
-</div>
+La méthode **`get()`** de l'interface {{domxref("IDBObjectStore")}} fait une {{domxref("IDBRequest","requête")}} pour renvoyer la valeur d'un enregistrement du magasin d'objet {{domxref("IDBObjectStore","relié")}}.
 
-<p>{{Note("Si plusieurs enregistrements peuvent être sélectionnés la valeur du premier enregistrement rencontré (dont la valeur n'est pas <code>undefined</code>) sera renvoyée.")}} {{Note("On ne peut pas savoir s'il y a correspondance mais que l(es) enregistrement(s) a/ont des valeurs non définie (<code>undefined</code>) ou s'ils n'y as pas de correspondance par cette méthode. On peut utulisé la methode getAllKeys pour retrouvé la ou les clés du ou des enregistrements qui n'ont pas de valeur défini (valeur = <code>undefined</code>).")}}</p>
+{{Note("Si plusieurs enregistrements peuvent être sélectionnés la valeur du premier enregistrement rencontré (dont la valeur n'est pas <code>undefined</code>) sera renvoyée.")}} {{Note("On ne peut pas savoir s'il y a correspondance mais que l(es) enregistrement(s) a/ont des valeurs non définie (<code>undefined</code>) ou s'ils n'y as pas de correspondance par cette méthode. On peut utulisé la methode getAllKeys pour retrouvé la ou les clés du ou des enregistrements qui n'ont pas de valeur défini (valeur = <code>undefined</code>).")}}
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">var request = objectStore.get(cle);</pre>
+```js
+var request = objectStore.get(cle);
+```
 
-<h2 id="Paramètre">Paramètre</h2>
+## Paramètre
 
-<dl>
- <dt><code>cle</code></dt>
- <dd>la clé ou l'{{domxref("IDBKeyRange","intervalle de clé")}} de l'enregistrement dont on cherche la valeur.</dd>
-</dl>
+- `cle`
+  - : la clé ou l'{{domxref("IDBKeyRange","intervalle de clé")}} de l'enregistrement dont on cherche la valeur.
 
-<h2 id="Renvoie">Renvoie</h2>
+## Renvoie
 
-<dl>
- <dt>Une {{domxref("IDBRequest","requête")}}</dt>
- <dd>La propriété {{domxref("IDBRequest.result","result")}} de cette requête renvoie en cas de succès,  un clone structuré de la valeur de l'enregistrement correspondant à la clé ou du premier correspondant à l'intervalle de clé.</dd>
-</dl>
+- Une {{domxref("IDBRequest","requête")}}
+  - : La propriété {{domxref("IDBRequest.result","result")}} de cette requête renvoie en cas de succès,  un clone structuré de la valeur de l'enregistrement correspondant à la clé ou du premier correspondant à l'intervalle de clé.
 
-<h2 id="Exceptions">Exceptions</h2>
+## Exceptions
 
-<dl>
- <dt><code>TransactionInactiveError</code></dt>
- <dd>Cette {{domxref("DOMException","exception")}} est levé si la {{domxref("IDBTransaction","transaction")}} dont dépend cet {{domxref("IDBObjectStore","accès")}} au magasin d'objet est inactive.</dd>
- <dt><code>DataError</code></dt>
- <dd>Cette {{domxref("DOMException","exception")}} est levé si la clé ou l'{{domxref("IDBKeyRange","intervalle de clé")}} est invalide.</dd>
- <dt><code>InvalidStateError</code></dt>
- <dd>Cette {{domxref("DOMException","exception")}} est levé si le magasin d'objet à été supprimé.</dd>
-</dl>
+- `TransactionInactiveError`
+  - : Cette {{domxref("DOMException","exception")}} est levé si la {{domxref("IDBTransaction","transaction")}} dont dépend cet {{domxref("IDBObjectStore","accès")}} au magasin d'objet est inactive.
+- `DataError`
+  - : Cette {{domxref("DOMException","exception")}} est levé si la clé ou l'{{domxref("IDBKeyRange","intervalle de clé")}} est invalide.
+- `InvalidStateError`
+  - : Cette {{domxref("DOMException","exception")}} est levé si le magasin d'objet à été supprimé.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Dans le code suivant , on ouvre une {{domxref("IDBTransaction","transaction")}} sur la {{domxref("IDBDatabase","connexion")}} à la base de données, pour avoir l'{{domxref("IDBObjectStore","accès")}} au magasin d'objet dans lequel on veut retrouver la valeur d'un enregistrement.</p>
+Dans le code suivant , on ouvre une {{domxref("IDBTransaction","transaction")}} sur la {{domxref("IDBDatabase","connexion")}} à la base de données, pour avoir l'{{domxref("IDBObjectStore","accès")}} au magasin d'objet dans lequel on veut retrouver la valeur d'un enregistrement.
 
-<p>La méthode <strong><code>get() </code></strong>sert à retrouver la valeur de l'enregistrement dont la clé est <code><em>Walk dog</em></code> dans magasin d'objets <em><code>toDoList</code></em></p>
+La méthode **`get() `**sert à retrouver la valeur de l'enregistrement dont la clé est `Walk dog` dans magasin d'objets _`toDoList`_
 
-<pre class="brush: js">// ouvre la connexion à la base de données
+```js
+// ouvre la connexion à la base de données
 var DBOpenRequest = window.indexedDB.open("toDoList", 4);
 
 // Gère l'ouverture de la connexion
 DBOpenRequest.onsuccess = function() {
-  note.innerHTML += '&lt;li&gt;Database initialised.&lt;/li&gt;';
+  note.innerHTML += '<li>Database initialised.</li>';
 
   // enregistre la connexion dans la variable db
   db = DBOpenRequest.result;
@@ -68,12 +63,12 @@ function deleteData() {
 
   // affiche le succès de la transaction.
   transaction.oncomplete = function() {
-    note.innerHTML += '&lt;li&gt;Transaction effectuée: fin de la modification de la base de données.&lt;/li&gt;';
+    note.innerHTML += '<li>Transaction effectuée: fin de la modification de la base de données.</li>';
   };
 
   // affiche la cause de l’échec de la transaction.
   transaction.onerror = function() {
-    note.innerHTML += '&lt;li&gt;Échec de la transaction: ' + transaction.error + ' la base de données n\'a pas été modifié&lt;/li&gt;';
+    note.innerHTML += '<li>Échec de la transaction: ' + transaction.error + ' la base de données n\'a pas été modifié</li>';
   };
 
   // ouvre un accès au magasin d'objet toDoList
@@ -84,47 +79,32 @@ function deleteData() {
 
   objectStoreRequest.onsuccess = function() {
     //Affiche le succès de la requête
-    note.innerHTML += '&lt;li&gt;Enregistrement retrouvé.&lt;/li&gt;';
+    note.innerHTML += '<li>Enregistrement retrouvé.</li>';
 
     //affecte la valeur de l'enregistrement à la variable
     var myRecord = objectStoreRequest.result;
   };
 };
-</pre>
-
-<div class="note">
-  <p><strong>Note :</strong> Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>).</p>
-</div>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('IndexedDB', '#widl-IDBObjectStore-get-IDBRequest-any-key', 'get()')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.IDBObjectStore.get")}}</p>
-
-<h2 id="See_also">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("IndexedDB_API.Using_IndexedDB","Utiliser IndexedDB")}}</li>
- <li>{{domxref("IDBDatabase","Débuter une connexion")}}</li>
- <li>{{domxref("IDBTransaction","Utilisé les transactions")}}</li>
- <li>{{domxref("IDBKeyRange","Définir l'intervalle des clés")}}</li>
- <li>{{domxref("IDBObjectStore","Accès aux magasins d'objets")}}</li>
- <li>{{domxref("IDBCursor","Utiliser les curseur")}}</li>
- <li>Exemple de référence: <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li>
-</ul>
+```
+
+> **Note :** Pour un exemple de travail complet, voir notre [To-do Notifications](https://github.com/mdn/to-do-notifications/) app ([view example live](http://mdn.github.io/to-do-notifications/)).
+
+## Spécifications
+
+| Spécification                                                                                                | Statut                       | Commentaire |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------- |
+| {{SpecName('IndexedDB', '#widl-IDBObjectStore-get-IDBRequest-any-key', 'get()')}} | {{Spec2('IndexedDB')}} |             |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.IDBObjectStore.get")}}
+
+## Voir aussi
+
+- {{domxref("IndexedDB_API.Using_IndexedDB","Utiliser IndexedDB")}}
+- {{domxref("IDBDatabase","Débuter une connexion")}}
+- {{domxref("IDBTransaction","Utilisé les transactions")}}
+- {{domxref("IDBKeyRange","Définir l'intervalle des clés")}}
+- {{domxref("IDBObjectStore","Accès aux magasins d'objets")}}
+- {{domxref("IDBCursor","Utiliser les curseur")}}
+- Exemple de référence: [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages) ([view example live](http://mdn.github.io/to-do-notifications/).)
diff --git a/files/fr/web/api/idbobjectstore/getall/index.md b/files/fr/web/api/idbobjectstore/getall/index.md
index 5906c43e57..7749e9a1a7 100644
--- a/files/fr/web/api/idbobjectstore/getall/index.md
+++ b/files/fr/web/api/idbobjectstore/getall/index.md
@@ -3,74 +3,55 @@ title: IDBObjectStore.getAll()
 slug: Web/API/IDBObjectStore/getAll
 translation_of: Web/API/IDBObjectStore/getAll
 ---
-<p>{{ APIRef("IndexedDB") }}</p>
-
-<p>La méthode <strong><code>getAll()</code></strong> de l'interface {{domxref("IDBObjectStore")}} fait une {{domxref("IDBRequest","requête")}} qui renvoie un tableau ordonné suivant les clés, des valeurs de tous les enregistrements du magasin d'objet {{domxref("IDBObjectStore","relié")}}. On peut limité le nombre d'enregistrements en les filtrants suivant leurs clés ou en paramétrant le compteur.</p>
-
-<p>{{ Note("Cette méthode renverras un tableau vide si aucun enregistrement ne correspond. Si la valeur est undefined elle prendra une case du tableau.") }}</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">var request = objectStore.getAll(query, count);</pre>
-
-<h2 id="Paramètres">Paramètres</h2>
-
-<dl>
- <dt>query {{optional_inline}}</dt>
- <dd>Une clé ou l'{{domxref("IDBKeyRange","intervalle de clé")}} <strong>pour filtrer</strong>, seule les valeurs des enregistrements correspondant sont renvoyées. Par défaut toutes les valeurs des enregistrements du magasin d'objet sont renvoyées.</dd>
- <dt>count {{optional_inline}}</dt>
- <dd>Le nombre de valeurs d'enregistrement <strong>maximum renvoyées</strong>. Un nombre décimal sera tronqué. Zéro annule le compteur et toutes les valeurs sont retournées.</dd>
-</dl>
-
-<h2 id="Renvoie">Renvoie</h2>
-
-<dl>
- <dt>Une {{domxref("IDBRequest","requête")}}</dt>
- <dd>La propriété {{domxref("IDBRequest.result","result")}} de cette requête renvoie le tableau des valeurs des enregistrements en cas de succès.</dd>
-</dl>
-
-<h2 id="Exceptions">Exceptions</h2>
-
-<dl>
- <dt><code>TransactionInactiveError</code></dt>
- <dd>Cette {{domxref("DOMException","exception")}} est levée si la {{domxref("IDBTransaction","transaction")}} est inactive.</dd>
- <dt><code>DataError</code></dt>
- <dd>Cette {{domxref("DOMException","exception")}} est levée si la clé où l'{{domxref("IDBKeyRange","intervalle de clé")}} est invalide.</dd>
- <dt><code>InvalidStateError</code></dt>
- <dd>Cette {{domxref("DOMException","exception")}} est levée si le magasin d'objets a été supprimé.</dd>
- <dt><code>TypeError</code></dt>
- <dd>Cette {{domxref("DOMException","exception")}} est levée si le compteur n'est pas un nombre positif.</dd>
-</dl>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('IndexedDB2', '#dom-idbobjectstore-getall', 'getAll()')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.IDBObjectStore.getAll")}}</p>
-
-<h2 id="See_also">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("IndexedDB_API.Using_IndexedDB","Utiliser IndexedDB")}}</li>
- <li>{{domxref("IDBDatabase","Débuter une connexion")}}</li>
- <li>{{domxref("IDBTransaction","Utiliser les transactions")}}</li>
- <li>{{domxref("IDBKeyRange","Définir l'intervalle des clés")}}</li>
- <li>{{domxref("IDBObjectStore","Accès aux magasins d'objets")}}</li>
- <li>{{domxref("IDBCursor","Utiliser les curseurs")}}</li>
- <li>Exemple de référence: <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li>
-</ul>
+{{ APIRef("IndexedDB") }}
+
+La méthode **`getAll()`** de l'interface {{domxref("IDBObjectStore")}} fait une {{domxref("IDBRequest","requête")}} qui renvoie un tableau ordonné suivant les clés, des valeurs de tous les enregistrements du magasin d'objet {{domxref("IDBObjectStore","relié")}}. On peut limité le nombre d'enregistrements en les filtrants suivant leurs clés ou en paramétrant le compteur.
+
+{{ Note("Cette méthode renverras un tableau vide si aucun enregistrement ne correspond. Si la valeur est undefined elle prendra une case du tableau.") }}
+
+## Syntaxe
+
+    var request = objectStore.getAll(query, count);
+
+## Paramètres
+
+- query {{optional_inline}}
+  - : Une clé ou l'{{domxref("IDBKeyRange","intervalle de clé")}} **pour filtrer**, seule les valeurs des enregistrements correspondant sont renvoyées. Par défaut toutes les valeurs des enregistrements du magasin d'objet sont renvoyées.
+- count {{optional_inline}}
+  - : Le nombre de valeurs d'enregistrement **maximum renvoyées**. Un nombre décimal sera tronqué. Zéro annule le compteur et toutes les valeurs sont retournées.
+
+## Renvoie
+
+- Une {{domxref("IDBRequest","requête")}}
+  - : La propriété {{domxref("IDBRequest.result","result")}} de cette requête renvoie le tableau des valeurs des enregistrements en cas de succès.
+
+## Exceptions
+
+- `TransactionInactiveError`
+  - : Cette {{domxref("DOMException","exception")}} est levée si la {{domxref("IDBTransaction","transaction")}} est inactive.
+- `DataError`
+  - : Cette {{domxref("DOMException","exception")}} est levée si la clé où l'{{domxref("IDBKeyRange","intervalle de clé")}} est invalide.
+- `InvalidStateError`
+  - : Cette {{domxref("DOMException","exception")}} est levée si le magasin d'objets a été supprimé.
+- `TypeError`
+  - : Cette {{domxref("DOMException","exception")}} est levée si le compteur n'est pas un nombre positif.
+
+## Spécifications
+
+| Spécification                                                                                | Statut                       | Commentaire |
+| -------------------------------------------------------------------------------------------- | ---------------------------- | ----------- |
+| {{SpecName('IndexedDB2', '#dom-idbobjectstore-getall', 'getAll()')}} | {{Spec2('IndexedDB')}} |             |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.IDBObjectStore.getAll")}}
+
+## Voir aussi
+
+- {{domxref("IndexedDB_API.Using_IndexedDB","Utiliser IndexedDB")}}
+- {{domxref("IDBDatabase","Débuter une connexion")}}
+- {{domxref("IDBTransaction","Utiliser les transactions")}}
+- {{domxref("IDBKeyRange","Définir l'intervalle des clés")}}
+- {{domxref("IDBObjectStore","Accès aux magasins d'objets")}}
+- {{domxref("IDBCursor","Utiliser les curseurs")}}
+- Exemple de référence: [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages) ([view example live](http://mdn.github.io/to-do-notifications/).)
diff --git a/files/fr/web/api/idbobjectstore/getallkeys/index.md b/files/fr/web/api/idbobjectstore/getallkeys/index.md
index 88032f4682..df2f4b69ce 100644
--- a/files/fr/web/api/idbobjectstore/getallkeys/index.md
+++ b/files/fr/web/api/idbobjectstore/getallkeys/index.md
@@ -9,98 +9,90 @@ tags:
   - Référence(2)
 translation_of: Web/API/IDBObjectStore/getAllKeys
 ---
-<div>{{APIRef("IndexedDB")}}</div>
+{{APIRef("IndexedDB")}}
 
-<p>La méthode <strong><code>getAllKeys()</code></strong>, rattachée à l'interface {{domxref("IDBObjectStore")}}, renvoie un objet  {{domxref("IDBRequest")}} qui permet de récupérer l'ensemble des clés pour les objets qui correspondent au critère passé en argument (ou les clés de tous les objets du magasin si aucun paramètre n'est fourni).</p>
+La méthode **`getAllKeys()`**, rattachée à l'interface {{domxref("IDBObjectStore")}}, renvoie un objet  {{domxref("IDBRequest")}} qui permet de récupérer l'ensemble des clés pour les objets qui correspondent au critère passé en argument (ou les clés de tous les objets du magasin si aucun paramètre n'est fourni).
 
-<p>Si une valeur est trouvée, un clone structurelle sera créé et fourni comme résultat pour la requête.</p>
+Si une valeur est trouvée, un clone structurelle sera créé et fourni comme résultat pour la requête.
 
-<p>Cette méthode produira le même résultat pour :</p>
+Cette méthode produira le même résultat pour :
 
-<ul>
- <li>un enregistrement qui n'existe pas dans la base de données</li>
- <li>un enregistrement qui possède une valeur indéfinie</li>
-</ul>
+- un enregistrement qui n'existe pas dans la base de données
+- un enregistrement qui possède une valeur indéfinie
 
-<p>Pour différencier ces deux situations, on peut appeler la méthode {{domxref("IDBObjectStore.openCursor","openCursor()")}} avec la même clé. Cette méthode fournit un curseur si l'enregistrement existe et ne fournit aucun curseur s'il n'y a pas d'enregistrement.</p>
+Pour différencier ces deux situations, on peut appeler la méthode {{domxref("IDBObjectStore.openCursor","openCursor()")}} avec la même clé. Cette méthode fournit un curseur si l'enregistrement existe et ne fournit aucun curseur s'il n'y a pas d'enregistrement.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var request = <em>objectStore</em>.getAllKeys();
-var request = <em>objectStore</em>.getAllKeys(<em>query</em>);
-var request = <em>objectStore</em>.getAllKeys(<em>query</em>, <em>count</em>);</pre>
+    var request = objectStore.getAllKeys();
+    var request = objectStore.getAllKeys(query);
+    var request = objectStore.getAllKeys(query, count);
 
-<h3 id="Parameters">Parameters</h3>
+### Parameters
 
-<dl>
- <dt><code>query</code> {{optional_inline}}</dt>
- <dd>Une valeur qui est (ou se résoud) en un intervalle de clés ({{domxref("IDBKeyRange")}}).</dd>
- <dt><code>count</code> {{optional_inline}}</dt>
- <dd>Une valeur qui définit le nombre de valeurs à renvoyer si plusieurs correspondent. Cette valeur doit être supérieure à  <code>0</code> ou inférieure <code>à 2^32-1</code>, sinon une exception {{jsxref("TypeError")}} sera levée.</dd>
-</dl>
+- `query` {{optional_inline}}
+  - : Une valeur qui est (ou se résoud) en un intervalle de clés ({{domxref("IDBKeyRange")}}).
+- `count` {{optional_inline}}
+  - : Une valeur qui définit le nombre de valeurs à renvoyer si plusieurs correspondent. Cette valeur doit être supérieure à  `0` ou inférieure `à 2^32-1`, sinon une exception {{jsxref("TypeError")}} sera levée.
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Un objet {{domxref("IDBRequest")}} pour lequel seront déclenchés les différents évènements relatifs à l'opération.</p>
+Un objet {{domxref("IDBRequest")}} pour lequel seront déclenchés les différents évènements relatifs à l'opération.
 
-<h3 id="Exceptions">Exceptions</h3>
+### Exceptions
 
-<p>Cette méthode peut déclencher une exception {{domxref("DOMException")}} ayant le type suivant :</p>
+Cette méthode peut déclencher une exception {{domxref("DOMException")}} ayant le type suivant :
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Exception</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>TransactionInactiveError</code></td>
-   <td>Le magasin d'objets ({{domxref("IDBObjectStore")}}) associé à la transaction est inactif.</td>
-  </tr>
-  <tr>
-   <td><code>DataError</code></td>
-   <td>
-    <p>La clé ou l'intervalle de clé fourni contient une clé invalide ou est nul.</p>
-   </td>
-  </tr>
-  <tr>
-   <td><code>InvalidStateError</code></td>
-   <td>Le magasin d'objets ({{domxref("IDBObjectStore")}}) a été supprimé ou retiré.</td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th scope="col">Exception</th>
+      <th scope="col">Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>TransactionInactiveError</code></td>
+      <td>
+        Le magasin d'objets ({{domxref("IDBObjectStore")}}) associé à
+        la transaction est inactif.
+      </td>
+    </tr>
+    <tr>
+      <td><code>DataError</code></td>
+      <td>
+        <p>
+          La clé ou l'intervalle de clé fourni contient une clé invalide ou est
+          nul.
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td><code>InvalidStateError</code></td>
+      <td>
+        Le magasin d'objets ({{domxref("IDBObjectStore")}}) a été
+        supprimé ou retiré.
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<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('IndexedDB 2', '#dom-idbobjectstore-getallkeys', 'getAll()')}}</td>
-   <td>{{Spec2('IndexedDB w')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                    | État                             | Commentaires         |
+| ------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName('IndexedDB 2', '#dom-idbobjectstore-getallkeys', 'getAll()')}} | {{Spec2('IndexedDB w')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.IDBObjectStore.getAllKeys")}}</p>
+{{Compat("api.IDBObjectStore.getAllKeys")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
- <li>Initier une connexion : {{domxref("IDBDatabase")}}</li>
- <li>Utiliser les transactions : {{domxref("IDBTransaction")}}</li>
- <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
- <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li>
- <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li>
- <li>Exemple de référence : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li>
-</ul>
+- [Utiliser IndexedDB](/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB)
+- Initier une connexion : {{domxref("IDBDatabase")}}
+- Utiliser les transactions : {{domxref("IDBTransaction")}}
+- Définir un intervalle de clés : {{domxref("IDBKeyRange")}}
+- Récupérer et modifier les données : {{domxref("IDBObjectStore")}}
+- Utiliser les curseurs {{domxref("IDBCursor")}}
+- Exemple de référence : [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages) ([exemple _live_](https://mdn.github.io/to-do-notifications/)).
diff --git a/files/fr/web/api/idbobjectstore/getkey/index.md b/files/fr/web/api/idbobjectstore/getkey/index.md
index 84581d2293..a9afc0378f 100644
--- a/files/fr/web/api/idbobjectstore/getkey/index.md
+++ b/files/fr/web/api/idbobjectstore/getkey/index.md
@@ -11,60 +11,42 @@ tags:
   - Web API
 translation_of: Web/API/IDBObjectStore/getKey
 ---
-<p>{{APIRef("IndexedDB")}}</p>
+{{APIRef("IndexedDB")}}
 
-<p>La méthode <strong><code>getKey()</code></strong> de l'interface {{domxref("IDBObjectStore")}} retourne un objet {{domxref("IDBRequest")}}, et, dans un <em>thread</em> séparé, retourne la clé sélectionnée par la requête spécifiée. Cela permet de retrouver un enregistrement spécifique depuis un espace de stockage déterminé.</p>
+La méthode **`getKey()`** de l'interface {{domxref("IDBObjectStore")}} retourne un objet {{domxref("IDBRequest")}}, et, dans un _thread_ séparé, retourne la clé sélectionnée par la requête spécifiée. Cela permet de retrouver un enregistrement spécifique depuis un espace de stockage déterminé.
 
-<p>Si la clé a bien été retrouvée, alors un clone structuré (une copie conforme) sera créée et servira comme résultat à l'objet de requête.</p>
+Si la clé a bien été retrouvée, alors un clone structuré (une copie conforme) sera créée et servira comme résultat à l'objet de requête.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">let <var>request</var> = <var>objectStore</var>.getKey(<var>key</var>);</pre>
+    let request = objectStore.getKey(key);
 
-<h3 id="Parameters">Paramètres</h3>
+### Paramètres
 
-<dl>
-  <dt><em>key</em></dt>
-  <dd>La clé ou l'intervale de clé qui identifie l'enregistrement à retrouver.</dd>
-</dl>
+- _key_
+  - : La clé ou l'intervale de clé qui identifie l'enregistrement à retrouver.
 
-<h3 id="Return_Value">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Un objet {{domxref("IDBRequest")}} sur lequel les événements ultérieurs liés à cette opération sont déclenchés.</p>
+Un objet {{domxref("IDBRequest")}} sur lequel les événements ultérieurs liés à cette opération sont déclenchés.
 
-<h3 id="Exceptions">Exceptions</h3>
+### Exceptions
 
-<p>Cette méthode peut provoquer une {{domxref("DOMException")}} de l'un des types suivants :</p>
+Cette méthode peut provoquer une {{domxref("DOMException")}} de l'un des types suivants :
 
-<table class="standard-table">
-  <thead>
-    <tr>
-      <th scope="col">Exception</th>
-      <th scope="col">Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>TransactionInactiveError</code></td>
-      <td>La transaction de ce {{domxref("IDBObjectStore")}} est inactive.</td>
-    </tr>
-    <tr>
-      <td><code>DataError</code></td>
-      <td>La clé ou la plage de clés fournie contient une clé invalide.</td>
-    </tr>
-    <tr>
-      <td><code>InvalidStateError</code></td>
-      <td>Le {{domxref("IDBObjectStore")}} a été supprimé ou retiré.</td>
-    </tr>
-  </tbody>
-</table>
+| Exception                  | Description                                                                 |
+| -------------------------- | --------------------------------------------------------------------------- |
+| `TransactionInactiveError` | La transaction de ce {{domxref("IDBObjectStore")}} est inactive. |
+| `DataError`                | La clé ou la plage de clés fournie contient une clé invalide.               |
+| `InvalidStateError`        | Le {{domxref("IDBObjectStore")}} a été supprimé ou retiré.       |
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">let openRequest = indexedDB.open("telemetry");
-openRequest.onsuccess = (event) =&gt; {
+```js
+let openRequest = indexedDB.open("telemetry");
+openRequest.onsuccess = (event) => {
   let db = event.target.result;
   let store = db.transaction("netlogs").objectStore("netlogs");
 
@@ -72,43 +54,29 @@ openRequest.onsuccess = (event) =&gt; {
   let yesterday = new Date(today);
   yesterday.setDate(today.getDate() - 1);
   let request = store.getKey(IDBKeyRange(yesterday, today));
-  request.onsuccess = (event) =&gt; {
+  request.onsuccess = (event) => {
     let when = event.target.result;
     alert("La 1ère activité des dernières 24 heures s'est produite à " + when);
   };
-};</pre>
-
-<h2 id="Specifications">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('IndexedDB 2', '#dom-idbobjectstore-getkey', 'getKey()')}}</td>
-      <td>{{Spec2('IndexedDB 2')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.IDBObjectStore.getKey")}}</p>
-
-<h2 id="See_also">Voir aussi</h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/API/IndexedDB_API/Using_IndexedDB">Utiliser IndexedDB</a></li>
-  <li>Transactions de départ : {{domxref("IDBDatabase")}}</li>
-  <li>Utilisation des transactions : {{domxref("IDBTransaction")}}</li>
-  <li>Réglage d'une fourchette de clés : {{domxref("IDBKeyRange")}}</li>
-  <li>Récupération et modification de vos données : {{domxref("IDBObjectStore")}}</li>
-  <li>Utilisation des curseurs : {{domxref("IDBCursor")}}</li>
-  <li>Exemple de référence : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">Notifications des tâches</a> (<a href="https://mdn.github.io/to-do-notifications/">voir l'exemple en direct</a>.)</li>
-</ul>
+};
+```
+
+## Spécifications
+
+| Spécification                                                                                | Statut                           | Commentaire          |
+| -------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName('IndexedDB 2', '#dom-idbobjectstore-getkey', 'getKey()')}} | {{Spec2('IndexedDB 2')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.IDBObjectStore.getKey")}}
+
+## Voir aussi
+
+- [Utiliser IndexedDB](/fr/docs/Web/API/IndexedDB_API/Using_IndexedDB)
+- Transactions de départ : {{domxref("IDBDatabase")}}
+- Utilisation des transactions : {{domxref("IDBTransaction")}}
+- Réglage d'une fourchette de clés : {{domxref("IDBKeyRange")}}
+- Récupération et modification de vos données : {{domxref("IDBObjectStore")}}
+- Utilisation des curseurs : {{domxref("IDBCursor")}}
+- Exemple de référence : [Notifications des tâches](https://github.com/mdn/to-do-notifications/tree/gh-pages) ([voir l'exemple en direct](https://mdn.github.io/to-do-notifications/).)
diff --git a/files/fr/web/api/idbobjectstore/index.md b/files/fr/web/api/idbobjectstore/index.md
index 2f048f7b9e..e1925953f3 100644
--- a/files/fr/web/api/idbobjectstore/index.md
+++ b/files/fr/web/api/idbobjectstore/index.md
@@ -3,75 +3,71 @@ title: IDBObjectStore
 slug: Web/API/IDBObjectStore
 translation_of: Web/API/IDBObjectStore
 ---
-<p>{{APIRef("IndexedDB")}}</p>
-
-<p>L'interface <strong><code>IDBObjectStore</code></strong> de l'{{domxref("IndexedDB_API","API IndexedDB")}} est un accès aux magasins d'objet de la base de données.</p>
-
-<p>Le magasin d'objet emmagasine des enregistrements. Chaque enregistrement est constitué d'un couple clé/valeur. Chaque valeurs est indexée sur sa clé. Les clés sont triées pour former l'index primaire du magasin. Ce qui permet un accès rapide et ordonnée aux valeurs.</p>
-
-<p>Le magasin d'objet peut en plus de l'index primaire avoir des index qui ordonnent les enregistrements sur d'autres clés. Ces index se mettent automatiquement à jour dans la plupart des cas et permettent de mettre des contraintes d’unicités pour d'autres clés que la clé primaire du magasin d'objet.</p>
-
-<p>{{AvailableInWorkers}}</p>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<dl>
- <dt>{{domxref("IDBObjectStore.add()")}}</dt>
- <dd>Une {{domxref("IDBRequest","requête")}} pour ajouter un enregistrement au magasin d'objet relié, un <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-dom-interfaces.html#structured-clone">clone structuré</a> de la valeur passé en paramètre et sa clé .</dd>
- <dt>{{domxref("IDBObjectStore.clear()")}}</dt>
- <dd>Une {{domxref("IDBRequest","requête")}} pour vider le magasin d'objet relié.</dd>
- <dt>{{domxref("IDBObjectStore.delete()")}}</dt>
- <dd>Une {{domxref("IDBRequest","requête")}} de suppression d'enregistrement(s) du magasin d'objet relié.</dd>
- <dt>{{domxref("IDBObjectStore.get()")}}</dt>
- <dd>Une {{domxref("IDBRequest","requête")}} pour renvoyer la valeur d'un enregistrement du magasin d'objet relié.</dd>
- <dt>{{domxref("IDBObjectStore.getAll()")}}</dt>
- <dd>Une {{domxref("IDBRequest","requête")}} qui renvoie un tableau ordonné suivant les clés, des valeurs de tous les enregistrements du magasin d'objet relié. On peut limité le nombre d'enregistrements en les filtrants suivant leurs clés ou en paramétrant le compteur.</dd>
- <dt>{{domxref("IDBObjectStore.getAllKeys()")}}</dt>
- <dd>Une {{domxref("IDBRequest","requête")}} qui renvoie la liste de toutes les clés des enregistrements du magasin d'objet. On peut limité le nombre d'enregistrements en les filtrants suivant leurs clés ou en paramétrant le compteur.</dd>
- <dt>{{domxref("IDBObjectStore.createIndex()")}}</dt>
- <dd>Met en place sur le magasin d'objet relié, un nouvel index et en renvoie l'{{domxref("IDBIndex","accès")}}.</dd>
- <dt>{{domxref("IDBObjectStore.deleteIndex()")}}</dt>
- <dd>Supprime l'index dont le nom est passé en paramètre, du magasin d'objet relié.</dd>
- <dt>{{domxref("IDBObjectStore.index()")}}</dt>
- <dd>L'{{domxref("IDBIndex","accès")}} à l'index dont le nom est passé en paramètre du magasin d'objet relié.</dd>
- <dt>{{domxref("IDBObjectStore.put()")}}</dt>
- <dd>Une {{domxref("IDBRequest","requête")}} pour ajouter ou mettre à jour un enregistrement du magasin d'objet relié, un <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-dom-interfaces.html#structured-clone">clone structuré</a> de la valeur passée en paramètre et sa clé.</dd>
- <dt>{{domxref("IDBObjectStore.openCursor()")}}</dt>
- <dd>Une {{domxref("IDBRequest","requête")}} récursive suivant un {{domxref("IDBCursorWithValue","curseur avec valeur")}} qui itère le magasin d'objet relié.</dd>
- <dt>{{domxref("IDBObjectStore.openKeyCursor()")}}</dt>
- <dd>Une {{domxref("IDBRequest","requête")}} récursive suivant un {{domxref("IDBCursor","curseur")}} qui itère le magasin d'objet relié.</dd>
- <dt>{{domxref("IDBObjectStore.count()")}}</dt>
- <dd>Une {{domxref("IDBRequest","requête")}} au magasin d'objet relié. La requête compte le nombre d'enregistrements dans ce magasin d'objet ou sur l'{{domxref("IDBKeyRange","intervalle de clé")}} passé en paramètre.</dd>
-</dl>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<dl>
- <dt>{{domxref("IDBObjectStore.indexNames")}} {{readonlyInline}}</dt>
- <dd>La liste des noms d'index du magasin d'objet relié.</dd>
- <dt>{{domxref("IDBObjectStore.keyPath")}} {{readonlyInline}}</dt>
- <dd>Le <a href="/fr/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB#gloss_keypath">nom de la clé</a> du magasin d'objets relié.</dd>
- <dt>{{domxref("IDBObjectStore.name")}} {{readonlyInline}}</dt>
- <dd>Le nom du magasin d'objet relié.</dd>
- <dt>{{domxref("IDBObjectStore.transaction")}} {{readonlyInline}}</dt>
- <dd>La {{domxref("IDBTransaction","transaction")}} à laquelle l'accès du magasin d'objet appartient.</dd>
- <dt>{{domxref("IDBObjectStore.autoIncrement")}} {{readonlyInline}}</dt>
- <dd>La position du drapeau d’incrémentation automatique du magasin d'objet relié.</dd>
-</dl>
-
-<dl>
-</dl>
-
-<h2 id="Exemple">Exemple</h2>
-
-<p>Cet exemple montre différents usages de l'accès au magasin d'objet. On met à jour la structure de donnée avec {{domxref("IDBObjectStore.createIndex")}} dans un gestionnaire d'événement <code>onupgradeneeded</code>. On ajoute un nouvel enregistrement avec {{domxref("IDBObjectStore.add")}}.</p>
-
-<pre class="brush: js">// connexion à la base de données
+{{APIRef("IndexedDB")}}
+
+L'interface **`IDBObjectStore`** de l'{{domxref("IndexedDB_API","API IndexedDB")}} est un accès aux magasins d'objet de la base de données.
+
+Le magasin d'objet emmagasine des enregistrements. Chaque enregistrement est constitué d'un couple clé/valeur. Chaque valeurs est indexée sur sa clé. Les clés sont triées pour former l'index primaire du magasin. Ce qui permet un accès rapide et ordonnée aux valeurs.
+
+Le magasin d'objet peut en plus de l'index primaire avoir des index qui ordonnent les enregistrements sur d'autres clés. Ces index se mettent automatiquement à jour dans la plupart des cas et permettent de mettre des contraintes d’unicités pour d'autres clés que la clé primaire du magasin d'objet.
+
+{{AvailableInWorkers}}
+
+## Méthodes
+
+- {{domxref("IDBObjectStore.add()")}}
+  - : Une {{domxref("IDBRequest","requête")}} pour ajouter un enregistrement au magasin d'objet relié, un [clone structuré](http://www.whatwg.org/specs/web-apps/current-work/multipage/common-dom-interfaces.html#structured-clone) de la valeur passé en paramètre et sa clé .
+- {{domxref("IDBObjectStore.clear()")}}
+  - : Une {{domxref("IDBRequest","requête")}} pour vider le magasin d'objet relié.
+- {{domxref("IDBObjectStore.delete()")}}
+  - : Une {{domxref("IDBRequest","requête")}} de suppression d'enregistrement(s) du magasin d'objet relié.
+- {{domxref("IDBObjectStore.get()")}}
+  - : Une {{domxref("IDBRequest","requête")}} pour renvoyer la valeur d'un enregistrement du magasin d'objet relié.
+- {{domxref("IDBObjectStore.getAll()")}}
+  - : Une {{domxref("IDBRequest","requête")}} qui renvoie un tableau ordonné suivant les clés, des valeurs de tous les enregistrements du magasin d'objet relié. On peut limité le nombre d'enregistrements en les filtrants suivant leurs clés ou en paramétrant le compteur.
+- {{domxref("IDBObjectStore.getAllKeys()")}}
+  - : Une {{domxref("IDBRequest","requête")}} qui renvoie la liste de toutes les clés des enregistrements du magasin d'objet. On peut limité le nombre d'enregistrements en les filtrants suivant leurs clés ou en paramétrant le compteur.
+- {{domxref("IDBObjectStore.createIndex()")}}
+  - : Met en place sur le magasin d'objet relié, un nouvel index et en renvoie l'{{domxref("IDBIndex","accès")}}.
+- {{domxref("IDBObjectStore.deleteIndex()")}}
+  - : Supprime l'index dont le nom est passé en paramètre, du magasin d'objet relié.
+- {{domxref("IDBObjectStore.index()")}}
+  - : L'{{domxref("IDBIndex","accès")}} à l'index dont le nom est passé en paramètre du magasin d'objet relié.
+- {{domxref("IDBObjectStore.put()")}}
+  - : Une {{domxref("IDBRequest","requête")}} pour ajouter ou mettre à jour un enregistrement du magasin d'objet relié, un [clone structuré](http://www.whatwg.org/specs/web-apps/current-work/multipage/common-dom-interfaces.html#structured-clone) de la valeur passée en paramètre et sa clé.
+- {{domxref("IDBObjectStore.openCursor()")}}
+  - : Une {{domxref("IDBRequest","requête")}} récursive suivant un {{domxref("IDBCursorWithValue","curseur avec valeur")}} qui itère le magasin d'objet relié.
+- {{domxref("IDBObjectStore.openKeyCursor()")}}
+  - : Une {{domxref("IDBRequest","requête")}} récursive suivant un {{domxref("IDBCursor","curseur")}} qui itère le magasin d'objet relié.
+- {{domxref("IDBObjectStore.count()")}}
+  - : Une {{domxref("IDBRequest","requête")}} au magasin d'objet relié. La requête compte le nombre d'enregistrements dans ce magasin d'objet ou sur l'{{domxref("IDBKeyRange","intervalle de clé")}} passé en paramètre.
+
+## Propriétés
+
+- {{domxref("IDBObjectStore.indexNames")}} {{readonlyInline}}
+  - : La liste des noms d'index du magasin d'objet relié.
+- {{domxref("IDBObjectStore.keyPath")}} {{readonlyInline}}
+  - : Le [nom de la clé](/fr/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB#gloss_keypath) du magasin d'objets relié.
+- {{domxref("IDBObjectStore.name")}} {{readonlyInline}}
+  - : Le nom du magasin d'objet relié.
+- {{domxref("IDBObjectStore.transaction")}} {{readonlyInline}}
+  - : La {{domxref("IDBTransaction","transaction")}} à laquelle l'accès du magasin d'objet appartient.
+- {{domxref("IDBObjectStore.autoIncrement")}} {{readonlyInline}}
+  - : La position du drapeau d’incrémentation automatique du magasin d'objet relié.
+
+<!---->
+
+## Exemple
+
+Cet exemple montre différents usages de l'accès au magasin d'objet. On met à jour la structure de donnée avec {{domxref("IDBObjectStore.createIndex")}} dans un gestionnaire d'événement `onupgradeneeded`. On ajoute un nouvel enregistrement avec {{domxref("IDBObjectStore.add")}}.
+
+```js
+// connexion à la base de données
 var DBOpenRequest = window.indexedDB.open("toDoList", 4);
 
 // gère le succès de la connexion
 DBOpenRequest.onsuccess = function(event) {
-  note.innerHTML += '&lt;li&gt;Connexion ouverte.&lt;/li&gt;';
+  note.innerHTML += '<li>Connexion ouverte.</li>';
 
   //affect la connexion à la variable db.
   db = DBOpenRequest.result;
@@ -84,7 +80,7 @@ DBOpenRequest.onupgradeneeded = function(event) {
   var db = event.target.result;
 
   db.onerror = function(event) {
-    note.innerHTML += '&lt;li&gt;Erreur de chargement de la base.&lt;/li&gt;';
+    note.innerHTML += '<li>Erreur de chargement de la base.</li>';
   };
 
   // Ajoute un magasin d'objets à la base de données
@@ -100,7 +96,7 @@ DBOpenRequest.onupgradeneeded = function(event) {
 
   objectStore.createIndex("notified", "notified", { unique: false });
 
-  note.innerHTML += '&lt;li&gt;Le magasin d\'objet est ajouté.&lt;/li&gt;';
+  note.innerHTML += '<li>Le magasin d\'objet est ajouté.</li>';
 };
 
 // Un nouvel enregistrement à ajouter
@@ -113,11 +109,11 @@ var transaction = db.transaction(["toDoList"], "readwrite");
 
 // affiche le succès de la transaction
 transaction.oncomplete = function(event) {
-  note.innerHTML += '&lt;li&gt;La transaction à été effectuée.&lt;/li&gt;';
+  note.innerHTML += '<li>La transaction à été effectuée.</li>';
 };
 
 transaction.onerror = function(event) {
-  note.innerHTML += '&lt;li&gt;La transaction n\'as pue aboutir.&lt;/li&gt;';
+  note.innerHTML += '<li>La transaction n\'as pue aboutir.</li>';
 };
 
 // Un accès à toDoList pour la transaction
@@ -127,41 +123,27 @@ var objectStoreRequest = objectStore.add(newItem[0]);
 
 //l'enregistrement c'est bien passé.
 objectStoreRequest.onsuccess = function(event) {
-  note.innerHTML += '&lt;li&gt;L\'enregistrement à été ajouté au magasin d\'objet.&lt;/li&gt;';
-}</pre>
-
-<div class="note">
-  <p><strong>Note :</strong> Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>).</p>
-</div>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('IndexedDB', '#idl-def-IDBObjectStore', 'IDBObjectStore')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.IDBObjectStore")}}</p>
-
-<h2 id="See_also">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("IndexedDB_API.Using_IndexedDB","Utiliser IndexedDB")}}</li>
- <li>{{domxref("IDBDatabase","Débuter une connexion")}}</li>
- <li>{{domxref("IDBTransaction","Utilisé les transactions")}}</li>
- <li>{{domxref("IDBKeyRange","Définir l'intervalle des clés")}}</li>
- <li>{{domxref("IDBCursor","Utiliser les curseur")}}</li>
- <li>Exemple de référence: <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li>
-</ul>
+  note.innerHTML += '<li>L\'enregistrement à été ajouté au magasin d\'objet.</li>';
+}
+```
+
+> **Note :** Pour un exemple de travail complet, voir notre [To-do Notifications](https://github.com/mdn/to-do-notifications/) app ([view example live](http://mdn.github.io/to-do-notifications/)).
+
+## Spécifications
+
+| Spécification                                                                                | Statut                       | Commentaire |
+| -------------------------------------------------------------------------------------------- | ---------------------------- | ----------- |
+| {{SpecName('IndexedDB', '#idl-def-IDBObjectStore', 'IDBObjectStore')}} | {{Spec2('IndexedDB')}} |             |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.IDBObjectStore")}}
+
+## Voir aussi
+
+- {{domxref("IndexedDB_API.Using_IndexedDB","Utiliser IndexedDB")}}
+- {{domxref("IDBDatabase","Débuter une connexion")}}
+- {{domxref("IDBTransaction","Utilisé les transactions")}}
+- {{domxref("IDBKeyRange","Définir l'intervalle des clés")}}
+- {{domxref("IDBCursor","Utiliser les curseur")}}
+- Exemple de référence: [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages) ([view example live](http://mdn.github.io/to-do-notifications/).)
diff --git a/files/fr/web/api/idbobjectstore/index/index.md b/files/fr/web/api/idbobjectstore/index/index.md
index f0cef79029..2e677c3bae 100644
--- a/files/fr/web/api/idbobjectstore/index/index.md
+++ b/files/fr/web/api/idbobjectstore/index/index.md
@@ -9,57 +9,44 @@ tags:
   - Reference
 translation_of: Web/API/IDBObjectStore/index
 ---
-<div>{{APIRef("IndexedDB")}}</div>
+{{APIRef("IndexedDB")}}
 
-<p>La méthode <strong><code>index()</code></strong>, rattachée à l'interface {{domxref("IDBObjectStore")}}, permet d'ouvrir un index sur le magasin d'objet courant pour, par exemple, renvoyer une liste d'enregistrements triés par cet index grâce à un curseur.</p>
+La méthode **`index()`**, rattachée à l'interface {{domxref("IDBObjectStore")}}, permet d'ouvrir un index sur le magasin d'objet courant pour, par exemple, renvoyer une liste d'enregistrements triés par cet index grâce à un curseur.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">objectStore.index(nomIndex);</pre>
+```js
+objectStore.index(nomIndex);
+```
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>nomIndex</code></dt>
- <dd>Le nom de l'index qu'on souhaite ouvrir.</dd>
-</dl>
+- `nomIndex`
+  - : Le nom de l'index qu'on souhaite ouvrir.
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Un objet {{domxref("IDBIndex")}} qui permet d'accéder à l'index.</p>
+Un objet {{domxref("IDBIndex")}} qui permet d'accéder à l'index.
 
-<h3 id="Exceptions">Exceptions</h3>
+### Exceptions
 
-<p>Cette méthode peut déclencher une exception {{domxref("DOMException")}} ayant l'un des types suivants :</p>
+Cette méthode peut déclencher une exception {{domxref("DOMException")}} ayant l'un des types suivants :
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Exception</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>InvalidStateError</code></td>
-   <td>L'objet correspondant au magasin d'objet a été supprimé ou la transaction a été clôturée.</td>
-  </tr>
-  <tr>
-   <td><code>NotFoundError</code></td>
-   <td>Il n'existe pas d'index pour ce nom dans la base de données (la recherche est sensible à la casse).</td>
-  </tr>
- </tbody>
-</table>
+| Exception           | Description                                                                                         |
+| ------------------- | --------------------------------------------------------------------------------------------------- |
+| `InvalidStateError` | L'objet correspondant au magasin d'objet a été supprimé ou la transaction a été clôturée.           |
+| `NotFoundError`     | Il n'existe pas d'index pour ce nom dans la base de données (la recherche est sensible à la casse). |
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans l'exemple qui suit, on ouvre une transaction sur un magasin d'objet et on accède à l'index <code>lName</code> de la base de données. Ensuite, on ouvre un curseur sur l'index grâce à la méthode {{domxref("IDBIndex.openCursor")}} — cela fonctionne de la même façon que d'ouvrir un curseur à même le magasin d'objet grâce à {{domxref("IDBObjectStore.openCursor")}} sauf que, cette fois, les enregistrements sont renvoyés triés selon l'index et non selon la clé primaire.</p>
+Dans l'exemple qui suit, on ouvre une transaction sur un magasin d'objet et on accède à l'index `lName` de la base de données. Ensuite, on ouvre un curseur sur l'index grâce à la méthode {{domxref("IDBIndex.openCursor")}} — cela fonctionne de la même façon que d'ouvrir un curseur à même le magasin d'objet grâce à {{domxref("IDBObjectStore.openCursor")}} sauf que, cette fois, les enregistrements sont renvoyés triés selon l'index et non selon la clé primaire.
 
-<p>Enfin, on parcourt chaque enregistrement pour l'ajouter dans un tableau HTML.</p>
+Enfin, on parcourt chaque enregistrement pour l'ajouter dans un tableau HTML.
 
-<pre class="brush: js">function displayDataByIndex() {
+```js
+function displayDataByIndex() {
   tableEntry.innerHTML = '';
   var transaction = db.transaction(['contactsList'], 'readonly');
   var objectStore = transaction.objectStore('contactsList');
@@ -69,14 +56,14 @@ translation_of: Web/API/IDBObjectStore/index
     var cursor = event.target.result;
     if(cursor) {
       var tableRow = document.createElement('tr');
-      tableRow.innerHTML =   '&lt;td&gt;' + cursor.value.id + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.lName + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.fName + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.jTitle + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.company + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.eMail + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.phone + '&lt;/td&gt;'
-                           + '&lt;td&gt;' + cursor.value.age + '&lt;/td&gt;';
+      tableRow.innerHTML =   '<td>' + cursor.value.id + '</td>'
+                           + '<td>' + cursor.value.lName + '</td>'
+                           + '<td>' + cursor.value.fName + '</td>'
+                           + '<td>' + cursor.value.jTitle + '</td>'
+                           + '<td>' + cursor.value.company + '</td>'
+                           + '<td>' + cursor.value.eMail + '</td>'
+                           + '<td>' + cursor.value.phone + '</td>'
+                           + '<td>' + cursor.value.age + '</td>';
       tableEntry.appendChild(tableRow);
 
       cursor.continue();
@@ -84,41 +71,27 @@ translation_of: Web/API/IDBObjectStore/index
       console.log('Éléments affichés.');
     }
   };
-};</pre>
-
-<div class="note">
-<p><strong>Note :</strong> pour un exemple fonctionnel complet, voir notre <a href="https://github.com/mdn/IDBIndex-example">exemple sur GitHub</a> (<a href="https://mdn.github.io/IDBIndex-example/">la démonstration associée</a>).</p>
-</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('IndexedDB', '#widl-IDBObjectStore-index-IDBIndex-DOMString-name', 'index()')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.IDBObjectStore.index")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
- <li>Initier une connexion : {{domxref("IDBDatabase")}}</li>
- <li>Utiliser les transactions : {{domxref("IDBTransaction")}}</li>
- <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
- <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li>
- <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li>
- <li>Exemple de référence : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li>
-</ul>
+};
+```
+
+> **Note :** pour un exemple fonctionnel complet, voir notre [exemple sur GitHub](https://github.com/mdn/IDBIndex-example) ([la démonstration associée](https://mdn.github.io/IDBIndex-example/)).
+
+## Spécifications
+
+| Spécification                                                                                                            | État                         | Commentaires |
+| ------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------ |
+| {{SpecName('IndexedDB', '#widl-IDBObjectStore-index-IDBIndex-DOMString-name', 'index()')}} | {{Spec2('IndexedDB')}} |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.IDBObjectStore.index")}}
+
+## Voir aussi
+
+- [Utiliser IndexedDB](/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB)
+- Initier une connexion : {{domxref("IDBDatabase")}}
+- Utiliser les transactions : {{domxref("IDBTransaction")}}
+- Définir un intervalle de clés : {{domxref("IDBKeyRange")}}
+- Récupérer et modifier les données : {{domxref("IDBObjectStore")}}
+- Utiliser les curseurs {{domxref("IDBCursor")}}
+- Exemple de référence : [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages) ([exemple _live_](https://mdn.github.io/to-do-notifications/)).
diff --git a/files/fr/web/api/idbobjectstore/indexnames/index.md b/files/fr/web/api/idbobjectstore/indexnames/index.md
index 96cfe6186a..f46c3122ca 100644
--- a/files/fr/web/api/idbobjectstore/indexnames/index.md
+++ b/files/fr/web/api/idbobjectstore/indexnames/index.md
@@ -9,29 +9,30 @@ tags:
   - Reference
 translation_of: Web/API/IDBObjectStore/indexNames
 ---
-<div>{{APIRef("IndexedDB")}}</div>
+{{APIRef("IndexedDB")}}
 
-<p>La propriété <strong><code>indexNames</code></strong>, rattachée à l'interface {{domxref("IDBObjectStore")}}, renvoie la liste des noms des index pour les objets du magasin d'objets courant.</p>
+La propriété **`indexNames`**, rattachée à l'interface {{domxref("IDBObjectStore")}}, renvoie la liste des noms des index pour les objets du magasin d'objets courant.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var myindexNames = objectStore.indexNames;</pre>
+    var myindexNames = objectStore.indexNames;
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>Une liste {{domxref("DOMStringList")}}.</p>
+Une liste {{domxref("DOMStringList")}}.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans l'exemple suivant, on initialise une transaction de lecture/écriture sur une base de données en ajoutant des données dans un magasin d'objets via la méthode <code>add()</code>. Une fois l'objet créé, on affiche <code>objectStore.indexNames</code> en sortie de la console. Pour un exemple complet et fonctionnel, vous pouvez utiliser notre application <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">tester la démo</a>).</p>
+Dans l'exemple suivant, on initialise une transaction de lecture/écriture sur une base de données en ajoutant des données dans un magasin d'objets via la méthode `add()`. Une fois l'objet créé, on affiche `objectStore.indexNames` en sortie de la console. Pour un exemple complet et fonctionnel, vous pouvez utiliser notre application [To-do Notifications](https://github.com/mdn/to-do-notifications/) ([tester la démo](https://mdn.github.io/to-do-notifications/)).
 
-<pre class="brush: js">// On commence par ouvrir la base de données
+```js
+// On commence par ouvrir la base de données
 var DBOpenRequest = window.indexedDB.open("toDoList", 4);
 
 DBOpenRequest.onsuccess = function(event) {
-  note.innerHTML += '&lt;li&gt;Base de données initialisée.&lt;/li&gt;';
+  note.innerHTML += '<li>Base de données initialisée.</li>';
 
   // On enregistre le résultat de l'ouverture
   // dans la variable db afin de l'utiliser
@@ -55,12 +56,12 @@ function addData() {
 
   // On indique le succès de la transaction
   transaction.oncomplete = function(event) {
-    note.innerHTML += '&lt;li&gt;Transaction terminée : modification finie.&lt;/li&gt;';
+    note.innerHTML += '<li>Transaction terminée : modification finie.</li>';
   };
 
 
   transaction.onerror = function(event) {
-    note.innerHTML += '&lt;li&gt;Transaction non-ouverte à cause d'une erreur. Les doublons ne sont pas autorisés.&lt;/li&gt;';
+    note.innerHTML += '<li>Transaction non-ouverte à cause d'une erreur. Les doublons ne sont pas autorisés.</li>';
   };
 
   // On crée un magasin d'objet pour la transaction
@@ -74,39 +75,27 @@ function addData() {
   objectStoreRequest.onsuccess = function(event) {
     // On indique le succès de l'ajout de l'objet
     // dans la base de données
-    note.innerHTML += '&lt;li&gt;Un nouvel élément a été ajouté dans la base de données.&lt;/li&gt;';
+    note.innerHTML += '<li>Un nouvel élément a été ajouté dans la base de données.</li>';
   };
-};</pre>
-
-<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('IndexedDB', '#widl-IDBObjectStore-indexNames', 'indexNames')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.IDBObjectStore.indexNames")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
- <li>Initier une connexion : {{domxref("IDBDatabase")}}</li>
- <li>Utiliser les transactions : {{domxref("IDBTransaction")}}</li>
- <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
- <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li>
- <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li>
- <li>Exemple de référence : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li>
-</ul>
+};
+```
+
+## Spécifications
+
+| Spécification                                                                                        | État                         | Commentaires |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------- | ------------ |
+| {{SpecName('IndexedDB', '#widl-IDBObjectStore-indexNames', 'indexNames')}} | {{Spec2('IndexedDB')}} |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.IDBObjectStore.indexNames")}}
+
+## Voir aussi
+
+- [Utiliser IndexedDB](/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB)
+- Initier une connexion : {{domxref("IDBDatabase")}}
+- Utiliser les transactions : {{domxref("IDBTransaction")}}
+- Définir un intervalle de clés : {{domxref("IDBKeyRange")}}
+- Récupérer et modifier les données : {{domxref("IDBObjectStore")}}
+- Utiliser les curseurs {{domxref("IDBCursor")}}
+- Exemple de référence : [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages) ([exemple _live_](https://mdn.github.io/to-do-notifications/)).
diff --git a/files/fr/web/api/idbobjectstore/keypath/index.md b/files/fr/web/api/idbobjectstore/keypath/index.md
index cca4866bd8..703e7690d6 100644
--- a/files/fr/web/api/idbobjectstore/keypath/index.md
+++ b/files/fr/web/api/idbobjectstore/keypath/index.md
@@ -10,31 +10,32 @@ tags:
   - keyPath
 translation_of: Web/API/IDBObjectStore/keyPath
 ---
-<div>{{APIRef("IndexedDB")}}</div>
+{{APIRef("IndexedDB")}}
 
-<p>La propriété <strong><code>keyPath</code></strong> de l'interface {{domxref("IDBObjectStore")}} renvoie le <a href="/fr/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB#gloss_keypath">chemin de la clé</a> de ce magasin d'objet.</p>
+La propriété **`keyPath`** de l'interface {{domxref("IDBObjectStore")}} renvoie le [chemin de la clé](/fr/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB#gloss_keypath) de ce magasin d'objet.
 
-<p>Si cette propriété vaut <code>null</code> l'application doit fournir une clé pour chaque opération de modification.</p>
+Si cette propriété vaut `null` l'application doit fournir une clé pour chaque opération de modification.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var mykeyPath = objectStore.keyPath;</pre>
+    var mykeyPath = objectStore.keyPath;
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>N'importe quel type de valeur.</p>
+N'importe quel type de valeur.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Dans l'exemple suivant, on initialise une transaction de lecture/écriture sur une base de données en ajoutant des données dans un magasin d'objets via la méthode <code>add()</code>. Une fois l'objet créé, on affiche <code>objectStore.keyPath</code> en sortie de la console. Pour un exemple complet et fonctionnel, vous pouvez utiliser notre application <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">tester la démo</a>).</p>
+Dans l'exemple suivant, on initialise une transaction de lecture/écriture sur une base de données en ajoutant des données dans un magasin d'objets via la méthode `add()`. Une fois l'objet créé, on affiche `objectStore.keyPath` en sortie de la console. Pour un exemple complet et fonctionnel, vous pouvez utiliser notre application [To-do Notifications](https://github.com/mdn/to-do-notifications/) ([tester la démo](https://mdn.github.io/to-do-notifications/)).
 
-<pre class="brush: js">// On commence par ouvrir la base de données
+```js
+// On commence par ouvrir la base de données
 var DBOpenRequest = window.indexedDB.open("toDoList", 4);
 
 DBOpenRequest.onsuccess = function(event) {
-  note.innerHTML += '&lt;li&gt;Initialisation de la base.&lt;/li&gt;';
+  note.innerHTML += '<li>Initialisation de la base.</li>';
 
   // On enregistre le résultat de l'ouverture
   // dans la variable db afin de l'utiliser
@@ -58,11 +59,11 @@ function addData() {
 
   // On indique le succès de la transaction
   transaction.oncomplete = function(event) {
-    note.innerHTML += '&lt;li&gt;Transaction terminée : modification finie.&lt;/li&gt;';
+    note.innerHTML += '<li>Transaction terminée : modification finie.</li>';
   };
 
   transaction.onerror = function(event) {
-    note.innerHTML += '&lt;li&gt;Transaction non-ouverte à cause d'une erreur. Les doublons ne sont pas autorisés.&lt;/li&gt;';
+    note.innerHTML += '<li>Transaction non-ouverte à cause d'une erreur. Les doublons ne sont pas autorisés.</li>';
   };
 
   // On crée un magasin d'objet pour la transaction
@@ -76,39 +77,27 @@ function addData() {
   objectStoreRequest.onsuccess = function(event) {
     // On indique le succès de l'ajout de l'objet
     // dans la base de données
-    note.innerHTML += '&lt;li&gt;Un nouvel élément a été ajouté dans la base de données.&lt;/li&gt;';
+    note.innerHTML += '<li>Un nouvel élément a été ajouté dans la base de données.</li>';
   };
-};</pre>
-
-<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('IndexedDB', '#widl-IDBObjectStore-keyPath', 'keyPath')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.IDBObjectStore.keyPath")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
- <li>Initier une connexion : {{domxref("IDBDatabase")}}</li>
- <li>Utiliser les transactions : {{domxref("IDBTransaction")}}</li>
- <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
- <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li>
- <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li>
- <li>Exemple de référence : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li>
-</ul>
+};
+```
+
+## Spécifications
+
+| Spécification                                                                                | État                         | Commentaires |
+| -------------------------------------------------------------------------------------------- | ---------------------------- | ------------ |
+| {{SpecName('IndexedDB', '#widl-IDBObjectStore-keyPath', 'keyPath')}} | {{Spec2('IndexedDB')}} |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.IDBObjectStore.keyPath")}}
+
+## Voir aussi
+
+- [Utiliser IndexedDB](/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB)
+- Initier une connexion : {{domxref("IDBDatabase")}}
+- Utiliser les transactions : {{domxref("IDBTransaction")}}
+- Définir un intervalle de clés : {{domxref("IDBKeyRange")}}
+- Récupérer et modifier les données : {{domxref("IDBObjectStore")}}
+- Utiliser les curseurs {{domxref("IDBCursor")}}
+- Exemple de référence : [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages) ([exemple _live_](https://mdn.github.io/to-do-notifications/)).
diff --git a/files/fr/web/api/idbobjectstore/name/index.md b/files/fr/web/api/idbobjectstore/name/index.md
index 214f9ce32a..982fb83d19 100644
--- a/files/fr/web/api/idbobjectstore/name/index.md
+++ b/files/fr/web/api/idbobjectstore/name/index.md
@@ -9,43 +9,42 @@ tags:
   - Reference
 translation_of: Web/API/IDBObjectStore/name
 ---
-<div>{{APIRef("IndexedDB")}}</div>
+{{APIRef("IndexedDB")}}
 
-<p>La propriété <strong><code>name</code></strong>, rattachée à l'interface {{domxref("IDBObjectStore")}}, indique le nom du magasin d'objets courant.</p>
+La propriété **`name`**, rattachée à l'interface {{domxref("IDBObjectStore")}}, indique le nom du magasin d'objets courant.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var <em>nomDuMagasin</em> = <em>IDBObjectStore</em>.name;
-<em>IDBObjectStore</em>.name = <em>nouveauNom</em>;</pre>
+    var nomDuMagasin = IDBObjectStore.name;
+    IDBObjectStore.name = nouveauNom;
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>Une chaîne de caractères qui contient le nom du magasin d'objet.</p>
+Une chaîne de caractères qui contient le nom du magasin d'objet.
 
-<h3 id="Exceptions">Exceptions</h3>
+### Exceptions
 
-<p>Plusieurs exceptions peuvent être levées lorsqu'on tente de modifier le nom d'un magasin d'objets.</p>
+Plusieurs exceptions peuvent être levées lorsqu'on tente de modifier le nom d'un magasin d'objets.
 
-<dl>
- <dt><code>InvalidStateError</code></dt>
- <dd>Le magasin d'objets a été supprimé ou la transaction courante n'est pas une transaction de mise à jour : il est uniquemnet possible d'opérer un renommage lorsque le mode de la transaction est <code>"versionchange"</code>.</dd>
- <dt><code>TransactionInactiveError</code></dt>
- <dd>La transaction actuelle est inactive.</dd>
- <dt><code>ConstraintError</code></dt>
- <dd>Un magasin d'objets utilise déjà le nom qu'on souhaite employer.</dd>
-</dl>
+- `InvalidStateError`
+  - : Le magasin d'objets a été supprimé ou la transaction courante n'est pas une transaction de mise à jour : il est uniquemnet possible d'opérer un renommage lorsque le mode de la transaction est `"versionchange"`.
+- `TransactionInactiveError`
+  - : La transaction actuelle est inactive.
+- `ConstraintError`
+  - : Un magasin d'objets utilise déjà le nom qu'on souhaite employer.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans le fragment de code qui suit, on ouvre une transaction en lecture/écriture pour la base de données et on ajoute des données au magasin d'objets grâce à la méthode <code>add()</code>. Une fois que le magasin d'objets a été créé, on inscrit la valeur de <code>objectStore.name</code> dans la console. Pour un exemple complet, voir notre application <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> (cf. également <a href="https://mdn.github.io/to-do-notifications/">la démonstration <em>live</em></a>).</p>
+Dans le fragment de code qui suit, on ouvre une transaction en lecture/écriture pour la base de données et on ajoute des données au magasin d'objets grâce à la méthode `add()`. Une fois que le magasin d'objets a été créé, on inscrit la valeur de `objectStore.name` dans la console. Pour un exemple complet, voir notre application [To-do Notifications](https://github.com/mdn/to-do-notifications/) (cf. également [la démonstration _live_](https://mdn.github.io/to-do-notifications/)).
 
-<pre class="brush: js">// On ouvre la base de données
+```js
+// On ouvre la base de données
 var DBOpenRequest = window.indexedDB.open("toDoList", 4);
 
 DBOpenRequest.onsuccess = function(event) {
-  note.innerHTML += '&lt;li&gt;Initialisation de la base de données&lt;/li&gt;';
+  note.innerHTML += '<li>Initialisation de la base de données</li>';
 
   // On enregistre le résultat de l'ouverture dans la variable
   // db afin de l'utiliser ensuite.
@@ -66,11 +65,11 @@ function addData() {
 
   // On gère le cas où la transaction est effectuée correctement
   transaction.oncomplete = function(event) {
-    note.innerHTML += '&lt;li&gt;Transaction terminée : modification appliquée.&lt;/li&gt;';
+    note.innerHTML += '<li>Transaction terminée : modification appliquée.</li>';
   };
 
   transaction.onerror = function(event) {
-    note.innerHTML += '&lt;li&gt;Transaction non ouverte. Les doublons sont interdits.&lt;/li&gt;';
+    note.innerHTML += '<li>Transaction non ouverte. Les doublons sont interdits.</li>';
   };
 
   // On crée un magasin d'objets pour la transaction
@@ -82,39 +81,27 @@ function addData() {
 
   objectStoreRequest.onsuccess = function(event) {
     // On rapporte la réussite de l'ajout de l'objet en base
-    note.innerHTML += '&lt;li&gt;Nouvel élément ajouté dans la base de données.&lt;/li&gt;';
+    note.innerHTML += '<li>Nouvel élément ajouté dans la base de données.</li>';
   };
-};</pre>
-
-<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('IndexedDB', '#widl-IDBObjectStore-name', 'name')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.IDBObjectStore.name")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
- <li>Initier une connexion : {{domxref("IDBDatabase")}}</li>
- <li>Utiliser les transactions : {{domxref("IDBTransaction")}}</li>
- <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
- <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li>
- <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li>
- <li>Exemple de référence : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li>
-</ul>
+};
+```
+
+## Spécifications
+
+| Spécification                                                                        | État                         | Commentaires |
+| ------------------------------------------------------------------------------------ | ---------------------------- | ------------ |
+| {{SpecName('IndexedDB', '#widl-IDBObjectStore-name', 'name')}} | {{Spec2('IndexedDB')}} |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.IDBObjectStore.name")}}
+
+## Voir aussi
+
+- [Utiliser IndexedDB](/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB)
+- Initier une connexion : {{domxref("IDBDatabase")}}
+- Utiliser les transactions : {{domxref("IDBTransaction")}}
+- Définir un intervalle de clés : {{domxref("IDBKeyRange")}}
+- Récupérer et modifier les données : {{domxref("IDBObjectStore")}}
+- Utiliser les curseurs {{domxref("IDBCursor")}}
+- Exemple de référence : [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages) ([exemple _live_](https://mdn.github.io/to-do-notifications/)).
diff --git a/files/fr/web/api/idbobjectstore/opencursor/index.md b/files/fr/web/api/idbobjectstore/opencursor/index.md
index 6e19a926d8..0b96ddad30 100644
--- a/files/fr/web/api/idbobjectstore/opencursor/index.md
+++ b/files/fr/web/api/idbobjectstore/opencursor/index.md
@@ -9,63 +9,45 @@ tags:
   - Reference
 translation_of: Web/API/IDBObjectStore/openCursor
 ---
-<div>{{APIRef("IndexedDB")}}</div>
+{{APIRef("IndexedDB")}}
 
-<p>La méthode <strong><code>openCursor()</code></strong>, rattachée à l'interface {{domxref("IDBObjectStore")}}, renvoie un objet {{domxref("IDBRequest")}} et, dans un <em>thread</em> séparé, renvoie un nouvel objet {{domxref("IDBCursorWithValue")}} qu'on peut utiliser pour parcourir un magasin d'objets avec un curseur.</p>
+La méthode **`openCursor()`**, rattachée à l'interface {{domxref("IDBObjectStore")}}, renvoie un objet {{domxref("IDBRequest")}} et, dans un _thread_ séparé, renvoie un nouvel objet {{domxref("IDBCursorWithValue")}} qu'on peut utiliser pour parcourir un magasin d'objets avec un curseur.
 
-<p>Afin de déterminer si l'opération s'est déroulée correctement, on pourra surveiller l'évènement <code>success</code>.</p>
+Afin de déterminer si l'opération s'est déroulée correctement, on pourra surveiller l'évènement `success`.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var requete = ObjectStore.openCursor(optionalKeyRange, optionalDirection);</pre>
+    var requete = ObjectStore.openCursor(optionalKeyRange, optionalDirection);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>range</code> {{optional_inline}}</dt>
- <dd>Une clé ou un intervalle de clés ({{domxref("IDBKeyRange")}}) qu'on souhaite parcourir. Si une seule clé est passée en argument, l'intervalle utilisé pour le curseur sera restreint à cette seule clé. Si aucune valeur n'est passée pour cet argument, l'intervalle utilisé pour le curseur englobera tous les enregistrements du magasin d'objets.</dd>
- <dt><code>direction</code> {{optional_inline}}</dt>
- <dd>Un objet {{domxref("IDBCursorDirection")}} qui indique la direction de parcours du curseur. La valeur par défaut est <code>"next"</code>.</dd>
-</dl>
+- `range` {{optional_inline}}
+  - : Une clé ou un intervalle de clés ({{domxref("IDBKeyRange")}}) qu'on souhaite parcourir. Si une seule clé est passée en argument, l'intervalle utilisé pour le curseur sera restreint à cette seule clé. Si aucune valeur n'est passée pour cet argument, l'intervalle utilisé pour le curseur englobera tous les enregistrements du magasin d'objets.
+- `direction` {{optional_inline}}
+  - : Un objet {{domxref("IDBCursorDirection")}} qui indique la direction de parcours du curseur. La valeur par défaut est `"next"`.
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Un objet {{domxref("IDBRequest")}} sur lequel seront déclenchés les évènements relatifs à l'opération.</p>
+Un objet {{domxref("IDBRequest")}} sur lequel seront déclenchés les évènements relatifs à l'opération.
 
-<h3 id="Exceptions">Exceptions</h3>
+### Exceptions
 
-<p>Cette méthode peut déclencher une exception {{domxref("DOMException")}} ayant l'un des types suivants :</p>
+Cette méthode peut déclencher une exception {{domxref("DOMException")}} ayant l'un des types suivants :
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Exception</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>InvalidStateError</code></td>
-   <td>L'objet {{domxref("IDBObjectStore")}} ou l'objet {{domxref("IDBIndex")}} a été supprimé.</td>
-  </tr>
-  <tr>
-   <td><code>TransactionInactiveError</code></td>
-   <td>La transaction rattachée au magasin d'objets ({{domxref("IDBObjectStore")}}) est inactive.</td>
-  </tr>
-  <tr>
-   <td><code>DataError</code></td>
-   <td>La clé ou l'intervalle de clés indiqué est invalide.</td>
-  </tr>
- </tbody>
-</table>
+| Exception                  | Description                                                                                                  |
+| -------------------------- | ------------------------------------------------------------------------------------------------------------ |
+| `InvalidStateError`        | L'objet {{domxref("IDBObjectStore")}} ou l'objet {{domxref("IDBIndex")}} a été supprimé. |
+| `TransactionInactiveError` | La transaction rattachée au magasin d'objets ({{domxref("IDBObjectStore")}}) est inactive.        |
+| `DataError`                | La clé ou l'intervalle de clés indiqué est invalide.                                                         |
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans ce fragment de code, on crée une transaction, on ouvre le magasin d'objets souhaité puis on place un curseur pour parcourir tous les enregistrements du magasin d'objets :</p>
+Dans ce fragment de code, on crée une transaction, on ouvre le magasin d'objets souhaité puis on place un curseur pour parcourir tous les enregistrements du magasin d'objets :
 
-<pre class="brush: js">var transaction = db.transaction("name", "readonly");
+```js
+var transaction = db.transaction("name", "readonly");
 var objectStore = transaction.objectStore("name");
 var request = objectStore.openCursor();
 request.onsuccess = function(event) {
@@ -78,37 +60,24 @@ request.onsuccess = function(event) {
     // il n'y a plus de résultats
   }
 };
-</pre>
-
-<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('IndexedDB', '#widl-IDBIndex-openCursor-IDBRequest-any-range-IDBCursorDirection-direction', 'openCursor')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.IDBObjectStore.openCursor")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
- <li>Initier une connexion : {{domxref("IDBDatabase")}}</li>
- <li>Utiliser les transactions : {{domxref("IDBTransaction")}}</li>
- <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
- <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li>
- <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li>
- <li>Exemple de référence : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li>
-</ul>
+```
+
+## Spécifications
+
+| Spécification                                                                                                                                                | État                         | Commentaires |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------ |
+| {{SpecName('IndexedDB', '#widl-IDBIndex-openCursor-IDBRequest-any-range-IDBCursorDirection-direction', 'openCursor')}} | {{Spec2('IndexedDB')}} |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.IDBObjectStore.openCursor")}}
+
+## Voir aussi
+
+- [Utiliser IndexedDB](/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB)
+- Initier une connexion : {{domxref("IDBDatabase")}}
+- Utiliser les transactions : {{domxref("IDBTransaction")}}
+- Définir un intervalle de clés : {{domxref("IDBKeyRange")}}
+- Récupérer et modifier les données : {{domxref("IDBObjectStore")}}
+- Utiliser les curseurs {{domxref("IDBCursor")}}
+- Exemple de référence : [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages) ([exemple _live_](https://mdn.github.io/to-do-notifications/)).
diff --git a/files/fr/web/api/idbobjectstore/openkeycursor/index.md b/files/fr/web/api/idbobjectstore/openkeycursor/index.md
index a7270562d0..230f9d0454 100644
--- a/files/fr/web/api/idbobjectstore/openkeycursor/index.md
+++ b/files/fr/web/api/idbobjectstore/openkeycursor/index.md
@@ -9,61 +9,43 @@ tags:
   - Reference
 translation_of: Web/API/IDBObjectStore/openKeyCursor
 ---
-<div>{{APIRef("IndexedDB")}}</div>
+{{APIRef("IndexedDB")}}
 
-<p>La méthode <strong><code>openKeyCursor()</code></strong>, rattachée à l'interface {{domxref("IDBObjectStore")}}, renvoie un objet {{domxref("IDBRequest")}} dont le résultat sera un curseur ({{domxref("IDBCursor")}}) qui pourra être utilisé afin de parcourir les enregistrements correspondants. Cette méthode est utilisée afin de parcourir les clés d'un magasin d'objets grâce à un curseur.</p>
+La méthode **`openKeyCursor()`**, rattachée à l'interface {{domxref("IDBObjectStore")}}, renvoie un objet {{domxref("IDBRequest")}} dont le résultat sera un curseur ({{domxref("IDBCursor")}}) qui pourra être utilisé afin de parcourir les enregistrements correspondants. Cette méthode est utilisée afin de parcourir les clés d'un magasin d'objets grâce à un curseur.
 
-<p>Afin de déterminer si le curseur a bien été ajouté, on pourra écouter l'évènement <code>success</code> sur le résultat de la méthode.</p>
+Afin de déterminer si le curseur a bien été ajouté, on pourra écouter l'évènement `success` sur le résultat de la méthode.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var <em>requete</em> = <em>objectStore</em>.openKeyCursor(<em>optionalKeyRange</em>, <em>optionalDirection</em>);</pre>
+    var requete = objectStore.openKeyCursor(optionalKeyRange, optionalDirection);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>optionalKeyRange</code></dt>
- <dd>L'intervalle de clés qu'on souhaite parcourir. Si une seule clé est fournie, l'intervalle constitué ne contiendra que cette clé. Si aucune valeur n'est passée en argument, le curseur produit parcourera tous les enregistrements du magasin d'objets.</dd>
- <dt><code>optionalDirection</code></dt>
- <dd>Un objet {{domxref("IDBCursorDirection")}} qui indique la direction dans laquelle le curseur doit parcourir les évènements. La valeur par défaut est <code>"next"</code>.</dd>
-</dl>
+- `optionalKeyRange`
+  - : L'intervalle de clés qu'on souhaite parcourir. Si une seule clé est fournie, l'intervalle constitué ne contiendra que cette clé. Si aucune valeur n'est passée en argument, le curseur produit parcourera tous les enregistrements du magasin d'objets.
+- `optionalDirection`
+  - : Un objet {{domxref("IDBCursorDirection")}} qui indique la direction dans laquelle le curseur doit parcourir les évènements. La valeur par défaut est `"next"`.
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Un objet {{domxref("IDBRequest")}} sur lequel seront déclenchés les différents évènements relatifs à cette opération.</p>
+Un objet {{domxref("IDBRequest")}} sur lequel seront déclenchés les différents évènements relatifs à cette opération.
 
-<h3 id="Exceptions">Exceptions</h3>
+### Exceptions
 
-<p>Cette méthode peut déclencher une exception {{domxref("DOMException")}} ayant l'un des types suivants :</p>
+Cette méthode peut déclencher une exception {{domxref("DOMException")}} ayant l'un des types suivants :
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Exception</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>InvalidStateError</code></td>
-   <td>Le magasin d'objets ({{domxref("IDBObjectStore")}} ou l'index ({{domxref("IDBIndex")}}) a été supprimé.</td>
-  </tr>
-  <tr>
-   <td><code>TransactionInactiveError</code></td>
-   <td>La transaction associée au magasin d'objet ({{domxref("IDBObjectStore")}}) est inactive.</td>
-  </tr>
-  <tr>
-   <td><code>DataError</code></td>
-   <td>La clé ou l'intervalle de clés indiqué est invalide.</td>
-  </tr>
- </tbody>
-</table>
+| Exception                  | Description                                                                                                                 |
+| -------------------------- | --------------------------------------------------------------------------------------------------------------------------- |
+| `InvalidStateError`        | Le magasin d'objets ({{domxref("IDBObjectStore")}} ou l'index ({{domxref("IDBIndex")}}) a été supprimé. |
+| `TransactionInactiveError` | La transaction associée au magasin d'objet ({{domxref("IDBObjectStore")}}) est inactive.                         |
+| `DataError`                | La clé ou l'intervalle de clés indiqué est invalide.                                                                        |
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans le fragment de code suivant, on crée une transaction, on l'utilise sur un magasin d'objets donné puis on utilise le curseur pour parcourir tous les enregistrements du magasin d'objets :</p>
+Dans le fragment de code suivant, on crée une transaction, on l'utilise sur un magasin d'objets donné puis on utilise le curseur pour parcourir tous les enregistrements du magasin d'objets :
 
-<pre class="brush: js">var transaction = db.transaction("name", "readonly");
+```js
+var transaction = db.transaction("name", "readonly");
 var objectStore = transaction.objectStore("name");
 var request = objectStore.openKeyCursor();
 request.onsuccess = function(event) {
@@ -75,37 +57,25 @@ request.onsuccess = function(event) {
   } else {
     // Il n'y a plus d'autres résultats
   }
-};</pre>
-
-<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('IndexedDB2', '#dom-idbobjectstore-openkeycursor', 'openKeyCursor')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.IDBObjectStore.openKeyCursor")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
- <li>Initier une connexion : {{domxref("IDBDatabase")}}</li>
- <li>Utiliser les transactions : {{domxref("IDBTransaction")}}</li>
- <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
- <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li>
- <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li>
- <li>Exemple de référence : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li>
-</ul>
+};
+```
+
+## Spécifications
+
+| Spécification                                                                                                | État                         | Commentaires |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------ |
+| {{SpecName('IndexedDB2', '#dom-idbobjectstore-openkeycursor', 'openKeyCursor')}} | {{Spec2('IndexedDB')}} |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.IDBObjectStore.openKeyCursor")}}
+
+## Voir aussi
+
+- [Utiliser IndexedDB](/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB)
+- Initier une connexion : {{domxref("IDBDatabase")}}
+- Utiliser les transactions : {{domxref("IDBTransaction")}}
+- Définir un intervalle de clés : {{domxref("IDBKeyRange")}}
+- Récupérer et modifier les données : {{domxref("IDBObjectStore")}}
+- Utiliser les curseurs {{domxref("IDBCursor")}}
+- Exemple de référence : [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages) ([exemple _live_](https://mdn.github.io/to-do-notifications/)).
diff --git a/files/fr/web/api/idbobjectstore/put/index.md b/files/fr/web/api/idbobjectstore/put/index.md
index f4c51928b1..08ad1bc6a4 100644
--- a/files/fr/web/api/idbobjectstore/put/index.md
+++ b/files/fr/web/api/idbobjectstore/put/index.md
@@ -9,83 +9,110 @@ tags:
   - Reference
 translation_of: Web/API/IDBObjectStore/put
 ---
-<div>{{APIRef("IndexedDB")}}</div>
+{{APIRef("IndexedDB")}}
 
-<p>La méthode <strong><code>put()</code></strong>, rattachée à l'interface {{domxref("IDBObjectStore")}}, renvoie un objet {{domxref("IDBRequest")}} et, dans un autre <em>thread</em>, crée <a href="https://www.whatwg.org/specs/web-apps/current-work/multipage/common-dom-interfaces.html#structured-clone">un clone structuré</a> de la valeur puis enregistre ce clone dans le magasin d'objet. Cette méthode permet ainsi d'ajouter de nouveaux enregistrements ou de mettre à jour des enregistrements existants dans un magasin d'objet lorsque la transaction est en mode <code>readwrite</code> (lecture-écriture)</p>
+La méthode **`put()`**, rattachée à l'interface {{domxref("IDBObjectStore")}}, renvoie un objet {{domxref("IDBRequest")}} et, dans un autre _thread_, crée [un clone structuré](https://www.whatwg.org/specs/web-apps/current-work/multipage/common-dom-interfaces.html#structured-clone) de la valeur puis enregistre ce clone dans le magasin d'objet. Cette méthode permet ainsi d'ajouter de nouveaux enregistrements ou de mettre à jour des enregistrements existants dans un magasin d'objet lorsque la transaction est en mode `readwrite` (lecture-écriture)
 
-<p>Si l'enregistrement est stocké avec succès, un évènement de succès sera déclenché sur la requête renvoyée par la méthode. La propriété <code>result</code> de cette requête contiendra la clé de l'enregistrement créé ou mis à jour. La propriété <code>transaction</code> de cette requête sera la transaction dans laquelle le magasin d'objet est ouvert.</p>
+Si l'enregistrement est stocké avec succès, un évènement de succès sera déclenché sur la requête renvoyée par la méthode. La propriété `result` de cette requête contiendra la clé de l'enregistrement créé ou mis à jour. La propriété `transaction` de cette requête sera la transaction dans laquelle le magasin d'objet est ouvert.
 
-<p>La méthode <code>put()</code> permet d'ajouter ou de mettre à jour. Si on souhaite uniquement insérer, on utilisera plutôt {{domxref("IDBObjectStore.add")}}.</p>
+La méthode `put()` permet d'ajouter ou de mettre à jour. Si on souhaite uniquement insérer, on utilisera plutôt {{domxref("IDBObjectStore.add")}}.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var request = objectStore.put(monElement);
-var request = objectStore.put(monElement, cleOptionnelle);</pre>
+    var request = objectStore.put(monElement);
+    var request = objectStore.put(monElement, cleOptionnelle);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>monElement</code></dt>
- <dd>La valeur qu'on souhaite enregistrer.</dd>
- <dt><code>cleOptionnelle</code> {{optional_inline}}</dt>
- <dd>La clé qu'on souhaite utiliser pour identifier l'enregistrement. Si cet argument est absent, la valeur par défaut sera {{jsxref("null")}}.</dd>
-</dl>
+- `monElement`
+  - : La valeur qu'on souhaite enregistrer.
+- `cleOptionnelle` {{optional_inline}}
+  - : La clé qu'on souhaite utiliser pour identifier l'enregistrement. Si cet argument est absent, la valeur par défaut sera {{jsxref("null")}}.
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Un objet {{domxref("IDBRequest")}} qui recevra les évènements qui seront déclenchés suite à cette opération.</p>
+Un objet {{domxref("IDBRequest")}} qui recevra les évènements qui seront déclenchés suite à cette opération.
 
-<h3 id="Exceptions">Exceptions</h3>
+### Exceptions
 
-<p>Cette méthode peut lever une de ces exceptions {{domxref("DOMException")}} :</p>
+Cette méthode peut lever une de ces exceptions {{domxref("DOMException")}} :
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Exception</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>ReadOnlyError</code></td>
-   <td>La transaction associée à l'opération est uniquement <a href="/fr/docs/Web/API/IDBTransaction#Constantes">dans un mode de lecture seule</a>.</td>
-  </tr>
-  <tr>
-   <td><code>TransactionInactiveError</code></td>
-   <td>La transaction rattachée à l'objet {{domxref("IDBObjectStore")}} est inactive.</td>
-  </tr>
-  <tr>
-   <td><code>DataError</code></td>
-   <td>
-    <p>L'une de ces conditions est vérifiée :</p>
-
-    <ul>
-     <li>Le magasin d'objet utilise des clés en ligne (<em>in-line keys</em>) ou dispose d'un générateur de clés et le paramètre pour la clé a été utilisé.</li>
-     <li>Le magasin d'objet utilise des clés en ligne (<em>in-line keys</em>), ne  dispose pas d'un générateur de clés et le paramètre pour la clé n'a pas été utilisé.</li>
-     <li>Le magasin d'objet utilise des clés en ligne (<em>in-line keys</em>), ne  dispose pas d'un générateur de clés et le chemin de clé du magasin d'objet ne déclenche pas une clé valide.</li>
-     <li>Le paramètre pour la clé a été fourni mais la valeur n'est pas une clé valide.</li>
-    </ul>
-   </td>
-  </tr>
-  <tr>
-   <td><code>InvalidStateError</code></td>
-   <td>L'objet {{domxref("IDBObjectStore")}} a été supprimé ou déplacé.</td>
-  </tr>
-  <tr>
-   <td><code>DataCloneError</code></td>
-   <td>Les données à enregistrer n'ont pas pu être clonées par l'algorithme interne.</td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th scope="col">Exception</th>
+      <th scope="col">Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>ReadOnlyError</code></td>
+      <td>
+        La transaction associée à l'opération est uniquement
+        <a href="/fr/docs/Web/API/IDBTransaction#Constantes"
+          >dans un mode de lecture seule</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <td><code>TransactionInactiveError</code></td>
+      <td>
+        La transaction rattachée à l'objet
+        {{domxref("IDBObjectStore")}} est inactive.
+      </td>
+    </tr>
+    <tr>
+      <td><code>DataError</code></td>
+      <td>
+        <p>L'une de ces conditions est vérifiée :</p>
+        <ul>
+          <li>
+            Le magasin d'objet utilise des clés en ligne (<em>in-line keys</em>)
+            ou dispose d'un générateur de clés et le paramètre pour la clé a été
+            utilisé.
+          </li>
+          <li>
+            Le magasin d'objet utilise des clés en ligne (<em>in-line keys</em
+            >), ne  dispose pas d'un générateur de clés et le paramètre pour la
+            clé n'a pas été utilisé.
+          </li>
+          <li>
+            Le magasin d'objet utilise des clés en ligne (<em>in-line keys</em
+            >), ne  dispose pas d'un générateur de clés et le chemin de clé du
+            magasin d'objet ne déclenche pas une clé valide.
+          </li>
+          <li>
+            Le paramètre pour la clé a été fourni mais la valeur n'est pas une
+            clé valide.
+          </li>
+        </ul>
+      </td>
+    </tr>
+    <tr>
+      <td><code>InvalidStateError</code></td>
+      <td>
+        L'objet {{domxref("IDBObjectStore")}} a été supprimé ou
+        déplacé.
+      </td>
+    </tr>
+    <tr>
+      <td><code>DataCloneError</code></td>
+      <td>
+        Les données à enregistrer n'ont pas pu être clonées par l'algorithme
+        interne.
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans l'exemple suivant, on effectue une requête pour obtenir l'enregistrement correspondant à un titre donné. Lorsque cette requête est réussie, on récupère l'enregistrement via la fonction <code>onsuccess</code>. Ensuite, on met à jour une des propriétés de l'enregistrement et on enregistre la valeur mise à jour dans le magasin d'objet avec une autre requête et <code>put()</code>.</p>
+Dans l'exemple suivant, on effectue une requête pour obtenir l'enregistrement correspondant à un titre donné. Lorsque cette requête est réussie, on récupère l'enregistrement via la fonction `onsuccess`. Ensuite, on met à jour une des propriétés de l'enregistrement et on enregistre la valeur mise à jour dans le magasin d'objet avec une autre requête et `put()`.
 
-<pre class="brush: js">var title = "Walk dog";
+```js
+var title = "Walk dog";
 
 // On ouvre une transaction
 var objectStore = db.transaction(['toDoList'], "readwrite").objectStore('toDoList');
@@ -114,37 +141,25 @@ objectStoreTitleRequest.onsuccess = function() {
   updateTitleRequest.onsuccess = function() {
     displayData();
   };
-};</pre>
+};
+```
 
-<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('IndexedDB', '#widl-IDBObjectStore-put-IDBRequest-any-value-any-key', 'put()')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                            | État                         | Commentaires |
+| ------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------ |
+| {{SpecName('IndexedDB', '#widl-IDBObjectStore-put-IDBRequest-any-value-any-key', 'put()')}} | {{Spec2('IndexedDB')}} |              |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.IDBObjectStore.put")}}</p>
+{{Compat("api.IDBObjectStore.put")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
- <li>Initier une connexion : {{domxref("IDBDatabase")}}</li>
- <li>Utiliser les transactions : {{domxref("IDBTransaction")}}</li>
- <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
- <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li>
- <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li>
- <li>Exemple de référence : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li>
-</ul>
+- [Utiliser IndexedDB](/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB)
+- Initier une connexion : {{domxref("IDBDatabase")}}
+- Utiliser les transactions : {{domxref("IDBTransaction")}}
+- Définir un intervalle de clés : {{domxref("IDBKeyRange")}}
+- Récupérer et modifier les données : {{domxref("IDBObjectStore")}}
+- Utiliser les curseurs {{domxref("IDBCursor")}}
+- Exemple de référence : [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages) ([exemple _live_](https://mdn.github.io/to-do-notifications/)).
diff --git a/files/fr/web/api/idbobjectstore/transaction/index.md b/files/fr/web/api/idbobjectstore/transaction/index.md
index 92c8a187db..75af9a1542 100644
--- a/files/fr/web/api/idbobjectstore/transaction/index.md
+++ b/files/fr/web/api/idbobjectstore/transaction/index.md
@@ -3,33 +3,34 @@ title: IDBObjectStore.transaction
 slug: Web/API/IDBObjectStore/transaction
 translation_of: Web/API/IDBObjectStore/transaction
 ---
-<p>{{ APIRef("IndexedDB") }}</p>
+{{ APIRef("IndexedDB") }}
 
-<div>
-<p>La propriété <strong><code>transaction</code></strong> de l'interface {{domxref("IDBObjectStore")}} renvoie la {{domxref("IDBTransaction","transaction")}} à laquelle l'{{domxref("IDBObjectStore","accès")}} du magasin d'objet appartient.</p>
+La propriété **`transaction`** de l'interface {{domxref("IDBObjectStore")}} renvoie la {{domxref("IDBTransaction","transaction")}} à laquelle l'{{domxref("IDBObjectStore","accès")}} du magasin d'objet appartient.
 
-<p>{{AvailableInWorkers}}</p>
-</div>
+{{AvailableInWorkers}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">var myTransaction = objectStore.transaction;</pre>
+```js
+var myTransaction = objectStore.transaction;
+```
 
-<h2 id="Valeur">Valeur</h2>
+## Valeur
 
-<p>Une {{domxref("IDBTransaction","transaction")}}.</p>
+Une {{domxref("IDBTransaction","transaction")}}.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Dans le code suivant, on ouvre une {{domxref("IDBDatabase","connexion")}} à la base de donnée. Sur cette connexion on démarre une {{domxref("IDBTransaction","transaction")}} en lecture/écriture pour avoir un {{domxref("IDBObjectStore","accès")}} au magasin d'objet <code>"toDoList"</code> dans lequel on {{domxref("IDBObjectStore.add","ajoute")}} un enregistrement.</p>
+Dans le code suivant, on ouvre une {{domxref("IDBDatabase","connexion")}} à la base de donnée. Sur cette connexion on démarre une {{domxref("IDBTransaction","transaction")}} en lecture/écriture pour avoir un {{domxref("IDBObjectStore","accès")}} au magasin d'objet `"toDoList"` dans lequel on {{domxref("IDBObjectStore.add","ajoute")}} un enregistrement.
 
-<p>La propriété <strong><code>transaction</code></strong> affiche la transaction à laquelle l'accès du magasin d'objet appartient.</p>
+La propriété **`transaction`** affiche la transaction à laquelle l'accès du magasin d'objet appartient.
 
-<pre class="brush: js">//Connexion à la base de données
+```js
+//Connexion à la base de données
 var DBOpenRequest = window.indexedDB.open("toDoList", 4);
 
 DBOpenRequest.onsuccess = function(event) {
-	note.innerHTML += '&lt;li&gt;Connexion établie.&lt;/li&gt;';
+	note.innerHTML += '<li>Connexion établie.</li>';
 
 	//Affecte la connexion à la variable db.
 	db = DBOpenRequest.result;
@@ -46,61 +47,47 @@ function addData() {
 
 	// en cas de succès de l'ouverture de la transaction
 	transaction.oncomplete = function(event) {
-		note.innerHTML += '&lt;li&gt;Transaction complété : modification de la base de données terminée.&lt;/li&gt;';
+		note.innerHTML += '<li>Transaction complété : modification de la base de données terminée.</li>';
 	};
 	// en  cas d'échec de l'ouverture de la transaction
 	transaction.onerror = function(event) {
-		note.innerHTML += '&lt;li&gt;L\'erreur: "' + transaction.error +'" c\'est produite échec de la transaction.&lt;/li&gt;';
+		note.innerHTML += '<li>L\'erreur: "' + transaction.error +'" c\'est produite échec de la transaction.</li>';
 	};
 
 	// ouvre l'accès au un magasin "toDoList" de la transaction
 	var objectStore = transaction.objectStore("toDoList");
 
-//-&gt;Affiche la transaction de l'accès du magasin d'objet
+//->Affiche la transaction de l'accès du magasin d'objet
     console.log(objectStore.transaction);
 
 	// Ajoute un enregistrement
 	var objectStoreRequest = objectStore.add(newItem[0]);
 	objectStoreRequest.onsuccess = function(event) {
 		// signale l'ajout de l'enregistrement
-		note.innerHTML += '&lt;li&gt;Enregistrement ajouté.&lt;/li&gt;';
+		note.innerHTML += '<li>Enregistrement ajouté.</li>';
 	};
  };
- </pre>
-
-<div class="note">
-  <p><strong>Note :</strong> Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>).</p>
-</div>
-
-<h2 id="Spécification">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('IndexedDB', '#widl-IDBObjectStore-transaction', 'transaction')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.IDBObjectStore.transaction")}}</p>
-
-<h2 id="See_also">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("IndexedDB_API.Using_IndexedDB","Utiliser IndexedDB")}}</li>
- <li>{{domxref("IDBDatabase","Débuter une connexion")}}</li>
- <li>{{domxref("IDBTransaction","Utilisé les transactions")}}</li>
- <li>{{domxref("IDBKeyRange","Définir l'intervalle des clés")}}</li>
- <li>{{domxref("IDBObjectStore","Accès aux magasins d'objets")}}</li>
- <li>{{domxref("IDBCursor","Utiliser les curseur")}}</li>
- <li>Exemple de référence: <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li>
-</ul>
+
+```
+
+> **Note :** Pour un exemple de travail complet, voir notre [To-do Notifications](https://github.com/mdn/to-do-notifications/) app ([view example live](http://mdn.github.io/to-do-notifications/)).
+
+## Spécifications
+
+| Spécification                                                                                        | Statut                       | Commentaire |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------- | ----------- |
+| {{SpecName('IndexedDB', '#widl-IDBObjectStore-transaction', 'transaction')}} | {{Spec2('IndexedDB')}} |             |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.IDBObjectStore.transaction")}}
+
+## Voir aussi
+
+- {{domxref("IndexedDB_API.Using_IndexedDB","Utiliser IndexedDB")}}
+- {{domxref("IDBDatabase","Débuter une connexion")}}
+- {{domxref("IDBTransaction","Utilisé les transactions")}}
+- {{domxref("IDBKeyRange","Définir l'intervalle des clés")}}
+- {{domxref("IDBObjectStore","Accès aux magasins d'objets")}}
+- {{domxref("IDBCursor","Utiliser les curseur")}}
+- Exemple de référence: [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages) ([view example live](http://mdn.github.io/to-do-notifications/).)
diff --git a/files/fr/web/api/idbopendbrequest/blocked_event/index.md b/files/fr/web/api/idbopendbrequest/blocked_event/index.md
index 6789721695..0e21967b84 100644
--- a/files/fr/web/api/idbopendbrequest/blocked_event/index.md
+++ b/files/fr/web/api/idbopendbrequest/blocked_event/index.md
@@ -4,72 +4,38 @@ slug: Web/API/IDBOpenDBRequest/blocked_event
 translation_of: Web/API/IDBOpenDBRequest/blocked_event
 original_slug: Web/API/IDBRequest/blocked_event
 ---
-<p>Le handler <strong>blocked</strong> est exécuté lorsque l'ouverture d'une connexion à une base de données bloque une transaction <em>versionchange</em> sur celle-ci.</p>
+Le handler **blocked** est exécuté lorsque l'ouverture d'une connexion à une base de données bloque une transaction _versionchange_ sur celle-ci.
 
-<h2 id="Informations_générales">Informations générales</h2>
+## Informations générales
 
-<dl>
- <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
- <dd style="margin: 0 0 0 120px;"><a href="http://www.w3.org/TR/IndexedDB/#request-api">IndexedDB</a></dd>
- <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
- <dd style="margin: 0 0 0 120px;">IDBVersionChangeEvent</dd>
- <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
- <dd style="margin: 0 0 0 120px;">Non</dd>
- <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
- <dd style="margin: 0 0 0 120px;">Non</dd>
- <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
- <dd style="margin: 0 0 0 120px;">IDBRequest</dd>
- <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
- <dd style="margin: 0 0 0 120px;">Aucune</dd>
-</dl>
+- Spécification
+  - : [IndexedDB](http://www.w3.org/TR/IndexedDB/#request-api)
+- Interface
+  - : IDBVersionChangeEvent
+- Propagation
+  - : Non
+- Annulable
+  - : Non
+- Cible
+  - : IDBRequest
+- Action par défaut
+  - : Aucune
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Property</th>
-   <th scope="col">Type</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>target</code> {{readonlyInline}}</td>
-   <td>{{domxref("EventTarget")}}</td>
-   <td>The request concerned by this event.</td>
-  </tr>
-  <tr>
-   <td><code>type</code> {{readonlyInline}}</td>
-   <td>{{domxref("DOMString")}}</td>
-   <td>The type of event.</td>
-  </tr>
-  <tr>
-   <td><code>bubbles</code> {{readonlyInline}}</td>
-   <td>{{jsxref("Boolean")}}</td>
-   <td>Whether the event normally bubbles or not.</td>
-  </tr>
-  <tr>
-   <td><code>cancelable</code> {{readonlyInline}}</td>
-   <td>{{jsxref("Boolean")}}</td>
-   <td>Whether the event is cancellable or not.</td>
-  </tr>
-  <tr>
-   <td><code>newVersion</code> {{readonlyInline}}</td>
-   <td>unsigned long (int)</td>
-   <td>The new version of the database.</td>
-  </tr>
-  <tr>
-   <td><code>oldVersion</code> {{readonlyInline}}</td>
-   <td>unsigned long (int)</td>
-   <td>The old version of the database.</td>
-  </tr>
- </tbody>
-</table>
+| Property                              | Type                                 | Description                                |
+| ------------------------------------- | ------------------------------------ | ------------------------------------------ |
+| `target` {{readonlyInline}}     | {{domxref("EventTarget")}} | The request concerned by this event.       |
+| `type` {{readonlyInline}}       | {{domxref("DOMString")}}     | The type of event.                         |
+| `bubbles` {{readonlyInline}}    | {{jsxref("Boolean")}}         | Whether the event normally bubbles or not. |
+| `cancelable` {{readonlyInline}} | {{jsxref("Boolean")}}         | Whether the event is cancellable or not.   |
+| `newVersion` {{readonlyInline}} | unsigned long (int)                  | The new version of the database.           |
+| `oldVersion` {{readonlyInline}} | unsigned long (int)                  | The old version of the database.           |
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush:js">var req1 = indexedDB.open("addressbook", 3);
+```js
+var req1 = indexedDB.open("addressbook", 3);
 
 req1.onsuccess = function( event ) {
   var addressbookDB = event.target.result;
@@ -82,22 +48,19 @@ req1.onsuccess = function( event ) {
     console.log(e)
   };
 
-};</pre>
+};
+```
 
-<h2 id="Evénements_liés">Evénements liés</h2>
+## Evénements liés
 
-<ul>
- <li>{{event("success")}}</li>
- <li>{{event("error")}}</li>
- <li>{{event("abort")}}</li>
- <li>{{event("complete")}}</li>
- <li>{{event("upgradeneeded")}}</li>
- <li>{{event("blocked")}}</li>
- <li>{{event("versionchange")}}</li>
-</ul>
+- {{event("success")}}
+- {{event("error")}}
+- {{event("abort")}}
+- {{event("complete")}}
+- {{event("upgradeneeded")}}
+- {{event("blocked")}}
+- {{event("versionchange")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/IndexedDB/Using_IndexedDB">Utilisation d'IndexedDB</a></li>
-</ul>
+- [Utilisation d'IndexedDB](/fr/docs/IndexedDB/Using_IndexedDB)
diff --git a/files/fr/web/api/idbopendbrequest/index.md b/files/fr/web/api/idbopendbrequest/index.md
index 2cbb5b3c7e..8cdf9c4579 100644
--- a/files/fr/web/api/idbopendbrequest/index.md
+++ b/files/fr/web/api/idbopendbrequest/index.md
@@ -11,48 +11,45 @@ tags:
   - Stockage
 translation_of: Web/API/IDBOpenDBRequest
 ---
-<p>{{APIRef("IndexedDB")}}</p>
+{{APIRef("IndexedDB")}}
 
-<div>
-<p>L'interface <strong><code>IDBOpenDBRequest</code></strong> de l'API IndexedDB donne un accès aux résultats des requêtes permettant d'ouvrir ou  de supprimer des bases de donnée (Effectuée via {{domxref("IDBFactory.open")}} et {{domxref("IDBFactory.deleteDatabase")}}).</p>
-</div>
+L'interface **`IDBOpenDBRequest`** de l'API IndexedDB donne un accès aux résultats des requêtes permettant d'ouvrir ou  de supprimer des bases de donnée (Effectuée via {{domxref("IDBFactory.open")}} et {{domxref("IDBFactory.deleteDatabase")}}).
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<p>{{InheritanceDiagram}}</p>
+{{InheritanceDiagram}}
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<p><em>Hérite  des méthodes de ses parents {{domxref("IDBRequest")}} et {{domxref("EventTarget")}}</em>.</p>
+_Hérite  des méthodes de ses parents {{domxref("IDBRequest")}} et {{domxref("EventTarget")}}_.
 
-<h3 id="Évènements">Évènements</h3>
+### Évènements
 
-<dl>
- <dt>{{domxref("IDBOpenDBRequest.onblocked")}}</dt>
- <dd>Le gestionnaire d'événements pour événement bloqué . Cet événement est lancé lorsqu' un événement  <code>upgradeneeded </code>doit être déclenché en raison d'un changement de version, mais que la base de données est toujours en cours d'utilisation (c'est-à-dire, non fermée) quelque part, même après l'envoi de l'évènement <code>versionchange</code> .</dd>
- <dt>{{domxref("IDBOpenDBRequest.onupgradeneeded")}}</dt>
- <dd>Le gestionnaire d'évènement pour évènement <code>upgradeneeded</code> <em>(mise-à-jour nécessaire)</em>, lancé quand une base de données d'une version supérieure à celle de la base de données existante est chargé.</dd>
-</dl>
+- {{domxref("IDBOpenDBRequest.onblocked")}}
+  - : Le gestionnaire d'événements pour événement bloqué . Cet événement est lancé lorsqu' un événement  `upgradeneeded `doit être déclenché en raison d'un changement de version, mais que la base de données est toujours en cours d'utilisation (c'est-à-dire, non fermée) quelque part, même après l'envoi de l'évènement `versionchange` .
+- {{domxref("IDBOpenDBRequest.onupgradeneeded")}}
+  - : Le gestionnaire d'évènement pour évènement `upgradeneeded` _(mise-à-jour nécessaire)_, lancé quand une base de données d'une version supérieure à celle de la base de données existante est chargé.
 
-<h2 id="Méthodes">Méthodes</h2>
+## Méthodes
 
-<p><em>Pas de méthodes, mais hérite des méthodes de ses parents {{domxref("IDBRequest")}} et {{domxref("EventTarget")}}.</em></p>
+_Pas de méthodes, mais hérite des méthodes de ses parents {{domxref("IDBRequest")}} et {{domxref("EventTarget")}}._
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Dans l'exemple ci-dessous,  le gestionnaire <code>onupgradeneeded</code> est utilisé pour mettre à jour la structure de la base de données, si une base plus récente est chargée. Pour voir un exemple complet, référez-vous à notre application <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="http://mdn.github.io/to-do-notifications/">voir cet exemple réel</a>)</p>
+Dans l'exemple ci-dessous,  le gestionnaire `onupgradeneeded` est utilisé pour mettre à jour la structure de la base de données, si une base plus récente est chargée. Pour voir un exemple complet, référez-vous à notre application [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages) ([voir cet exemple réel](http://mdn.github.io/to-do-notifications/))
 
-<pre class="brush: js">var db;
+```js
+var db;
 
 // Ouvre la base de données.
 var DBOpenRequest = window.indexedDB.open("toDoList", 4);
 
 // Ces gestionnaires d'évènements agissent sur la base de données en cours d'ouverture.
-  note.innerHTML += '&lt;li&gt;Error loading database.&lt;/li&gt;';
+  note.innerHTML += '<li>Error loading database.</li>';
 };
 
 DBOpenRequest.onsuccess = function(event) {
-  note.innerHTML += '&lt;li&gt;Database initialised.&lt;/li&gt;';
+  note.innerHTML += '<li>Database initialised.</li>';
 
   // stocke le résultat de l'ouverture de la base de données dans la variable db .
   // Ceci est beaucoup moins utilisé.
@@ -72,7 +69,7 @@ DBOpenRequest.onupgradeneeded = function(event) {
   var db = this.result;
 
   db.onerror = function(event) {
-    note.innerHTML += '&lt;li&gt;Error loading database.&lt;/li&gt;';
+    note.innerHTML += '<li>Error loading database.</li>';
   };
 
   // Crée un objet de stockage pour cette base de données.
@@ -86,42 +83,26 @@ DBOpenRequest.onupgradeneeded = function(event) {
   objectStore.createIndex("month", "month", { unique: false });
   objectStore.createIndex("year", "year", { unique: false });
   objectStore.createIndex("notified", "notified", { unique: false });
-};</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('IndexedDB', '#idl-def-IDBOpenDBRequest', 'IDBOpenDBRequest')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td>Définition initiale</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("IndexedDB 2", "#idbopendbrequest", "IDBOpenDBRequest")}}</td>
-   <td>{{Spec2("IndexedDB 2")}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.IDBOpenDBRequest")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
- <li>Démarrage de transactions : {{domxref("IDBDatabase")}}</li>
- <li>Utilisation de transactions : {{domxref("IDBTransaction")}}</li>
- <li>Définition un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
- <li>Récupération et modification des données : {{domxref("IDBObjectStore")}}</li>
- <li>Utilisation de curseurs : {{domxref("IDBCursor")}}</li>
- <li>Exemple de référence : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li>
-</ul>
+};
+```
+
+## Spécifications
+
+| Spécification                                                                                        | Statut                           | Commentaire         |
+| ---------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- |
+| {{SpecName('IndexedDB', '#idl-def-IDBOpenDBRequest', 'IDBOpenDBRequest')}} | {{Spec2('IndexedDB')}}     | Définition initiale |
+| {{SpecName("IndexedDB 2", "#idbopendbrequest", "IDBOpenDBRequest")}}         | {{Spec2("IndexedDB 2")}} |                     |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.IDBOpenDBRequest")}}
+
+## Voir aussi
+
+- [Utiliser IndexedDB](/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB)
+- Démarrage de transactions : {{domxref("IDBDatabase")}}
+- Utilisation de transactions : {{domxref("IDBTransaction")}}
+- Définition un intervalle de clés : {{domxref("IDBKeyRange")}}
+- Récupération et modification des données : {{domxref("IDBObjectStore")}}
+- Utilisation de curseurs : {{domxref("IDBCursor")}}
+- Exemple de référence : [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages) ([view example live](http://mdn.github.io/to-do-notifications/).)
diff --git a/files/fr/web/api/idbrequest/error/index.md b/files/fr/web/api/idbrequest/error/index.md
index 1604f594ad..95598e8927 100644
--- a/files/fr/web/api/idbrequest/error/index.md
+++ b/files/fr/web/api/idbrequest/error/index.md
@@ -10,64 +10,39 @@ tags:
   - Reference
 translation_of: Web/API/IDBRequest/error
 ---
-<div>{{APIRef("IndexedDB")}}</div>
-
-<p>La propriété <strong><code>error</code></strong> de l'interface {{domxref("IDBRequest")}} renvoie l'erreur associée lorsque la requête est un échec.</p>
-
-<p>{{AvailableInWorkers}}</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">var myError = request.error;</pre>
-
-<h3 id="Valeur">Valeur</h3>
-
-<p>Une erreur {{domxref("DOMError")}} qui contient l'erreur pertinente. Pour Chrome 48 et les versions ultérieures, cette propriété est une {{domxref("DOMException")}} car <code>DOMError</code> a été retiré du standard pour le DOM. Les codes d'erreurs suivants sont utilisés selon les conditions d'erreur :</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Erreur</th>
-   <th scope="col">Explication</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>AbortError</code></td>
-   <td>Si on annule la transaction en cours, toutes les requêtes en cours reçoivent cette erreur.</td>
-  </tr>
-  <tr>
-   <td><code>ConstraintError</code></td>
-   <td>Erreur obtenue lorsqu'on tente d'insérer des données qui ne respectent pas une contrainte. C'est un type d'exception utilisé lorsqu'on crée des magasins d'objet et des index. On aura cette erreur lorsqu'on essaiera par exemple d'ajouter une clé qui existe déjà dans l'enregistrement.</td>
-  </tr>
-  <tr>
-   <td><code>QuotaExceededError</code></td>
-   <td>Erreur obtenue lorsque atteint le quota d'espace disque et que l'utilisateur refuse de céder plus d'espace mémoire.</td>
-  </tr>
-  <tr>
-   <td><code>UnknownError</code></td>
-   <td>Erreur obtenue lorsque l'opération a échoué pour des raisons qui ne sont pas propres à la base de données (par exemple une erreur d'écriture sur le disque).</td>
-  </tr>
-  <tr>
-   <td><code>NoError</code></td>
-   <td>Valeur utilisée lorsque la requête est réussie.</td>
-  </tr>
-  <tr>
-   <td><code>VersionError</code></td>
-   <td>Erreur obtenue lorsqu'on essaye d'ouvrir une base de données avec une version inférieure à celle dont elle dispose déjà.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>En plus des codes d'erreur envoyés à l'objet {{domxref("IDBRequest")}}, les opérations asynchrones peuvent également déclencher des exceptions. La liste décrit les problèmes qui peuvent se produire lorsque la requête est en cours d'exécution mais d'autres problèmes peuvent apparaître lors de la construction de la requête. Ainsi, si la requête a échoué et que le résultat n'est pas disponible, l'exception <code>InvalidStateError </code>sera levée.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Dans l'exemple qui suit, on effectue une requête sur le titre de l'enregistrement. Le gestionnaire d'évèvenement <code>onsuccess</code> traite l'enregistrement obtenu depuis le magasin d'objet ({{domxref("IDBObjectStore")}}) et qui est disponible via <code>objectStoreTitleRequest.result</code>. Le gestionnaire met ensuite à jour une propriété de l'enregistrement puis replace l'enregistrement mis à jour dans le magasin d'objet.</p>
-
-<p>On dispose également d'une fonction <code>onerror</code> qui permet d'indiquer l'erreur qui s'est produite si la requêté échoue. Pour consulter un exemple complet, voir <a href="https://github.com/mdn/to-do-notifications/">l'application de notifications To-do</a> (cf. <a href="https://mdn.github.io/to-do-notifications/">la démonstration <em>live</em></a>).</p>
-
-<pre class="brush: js">var title = "Walk dog";
+{{APIRef("IndexedDB")}}
+
+La propriété **`error`** de l'interface {{domxref("IDBRequest")}} renvoie l'erreur associée lorsque la requête est un échec.
+
+{{AvailableInWorkers}}
+
+## Syntaxe
+
+    var myError = request.error;
+
+### Valeur
+
+Une erreur {{domxref("DOMError")}} qui contient l'erreur pertinente. Pour Chrome 48 et les versions ultérieures, cette propriété est une {{domxref("DOMException")}} car `DOMError` a été retiré du standard pour le DOM. Les codes d'erreurs suivants sont utilisés selon les conditions d'erreur :
+
+| Erreur               | Explication                                                                                                                                                                                                                                                                                 |
+| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `AbortError`         | Si on annule la transaction en cours, toutes les requêtes en cours reçoivent cette erreur.                                                                                                                                                                                                  |
+| `ConstraintError`    | Erreur obtenue lorsqu'on tente d'insérer des données qui ne respectent pas une contrainte. C'est un type d'exception utilisé lorsqu'on crée des magasins d'objet et des index. On aura cette erreur lorsqu'on essaiera par exemple d'ajouter une clé qui existe déjà dans l'enregistrement. |
+| `QuotaExceededError` | Erreur obtenue lorsque atteint le quota d'espace disque et que l'utilisateur refuse de céder plus d'espace mémoire.                                                                                                                                                                         |
+| `UnknownError`       | Erreur obtenue lorsque l'opération a échoué pour des raisons qui ne sont pas propres à la base de données (par exemple une erreur d'écriture sur le disque).                                                                                                                                |
+| `NoError`            | Valeur utilisée lorsque la requête est réussie.                                                                                                                                                                                                                                             |
+| `VersionError`       | Erreur obtenue lorsqu'on essaye d'ouvrir une base de données avec une version inférieure à celle dont elle dispose déjà.                                                                                                                                                                    |
+
+En plus des codes d'erreur envoyés à l'objet {{domxref("IDBRequest")}}, les opérations asynchrones peuvent également déclencher des exceptions. La liste décrit les problèmes qui peuvent se produire lorsque la requête est en cours d'exécution mais d'autres problèmes peuvent apparaître lors de la construction de la requête. Ainsi, si la requête a échoué et que le résultat n'est pas disponible, l'exception `InvalidStateError `sera levée.
+
+## Exemples
+
+Dans l'exemple qui suit, on effectue une requête sur le titre de l'enregistrement. Le gestionnaire d'évèvenement `onsuccess` traite l'enregistrement obtenu depuis le magasin d'objet ({{domxref("IDBObjectStore")}}) et qui est disponible via `objectStoreTitleRequest.result`. Le gestionnaire met ensuite à jour une propriété de l'enregistrement puis replace l'enregistrement mis à jour dans le magasin d'objet.
+
+On dispose également d'une fonction `onerror` qui permet d'indiquer l'erreur qui s'est produite si la requêté échoue. Pour consulter un exemple complet, voir [l'application de notifications To-do](https://github.com/mdn/to-do-notifications/) (cf. [la démonstration _live_](https://mdn.github.io/to-do-notifications/)).
+
+```js
+var title = "Walk dog";
 
 // On ouvre une transaction
 var objectStore = db.transaction(['toDoList'], "readwrite").objectStore('toDoList');
@@ -98,37 +73,25 @@ objectStoreTitleRequest.onerror = function() {
   // S'il se produit une erreur pendant la requête
   // on l'enregistre
   console.log("Il y a eu une erreur pour la récupération des données : " + objectStoreTitleRequest.error);
-};</pre>
-
-<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('IndexedDB', '#widl-IDBRequest-error', 'error')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.IDBRequest.error")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
- <li>Initier une connexion : {{domxref("IDBDatabase")}}</li>
- <li>Utiliser les transactions : {{domxref("IDBTransaction")}}</li>
- <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
- <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li>
- <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li>
- <li>Exemple de référence : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li>
-</ul>
+};
+```
+
+## Spécifications
+
+| Spécification                                                                    | État                         | Commentaires |
+| -------------------------------------------------------------------------------- | ---------------------------- | ------------ |
+| {{SpecName('IndexedDB', '#widl-IDBRequest-error', 'error')}} | {{Spec2('IndexedDB')}} |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.IDBRequest.error")}}
+
+## Voir aussi
+
+- [Utiliser IndexedDB](/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB)
+- Initier une connexion : {{domxref("IDBDatabase")}}
+- Utiliser les transactions : {{domxref("IDBTransaction")}}
+- Définir un intervalle de clés : {{domxref("IDBKeyRange")}}
+- Récupérer et modifier les données : {{domxref("IDBObjectStore")}}
+- Utiliser les curseurs {{domxref("IDBCursor")}}
+- Exemple de référence : [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages) ([exemple _live_](https://mdn.github.io/to-do-notifications/)).
diff --git a/files/fr/web/api/idbrequest/index.md b/files/fr/web/api/idbrequest/index.md
index dac0d4018c..ef33447c2f 100644
--- a/files/fr/web/api/idbrequest/index.md
+++ b/files/fr/web/api/idbrequest/index.md
@@ -12,59 +12,56 @@ tags:
   - TopicStub
 translation_of: Web/API/IDBRequest
 ---
-<p>{{APIRef("IndexedDB")}}</p>
+{{APIRef("IndexedDB")}}
 
-<p>L'interface <strong><code>IDBRequest</code></strong> de l'API IndexedDB donne accès par ses gestionnaires d'événements aux résultats des requêtes asynchrones sur la base de données, les magasins d'objets ou les index. Chaque opération d'écriture ou lecture sur la base de données utilise une requête.</p>
+L'interface **`IDBRequest`** de l'API IndexedDB donne accès par ses gestionnaires d'événements aux résultats des requêtes asynchrones sur la base de données, les magasins d'objets ou les index. Chaque opération d'écriture ou lecture sur la base de données utilise une requête.
 
-<p>Cet objet <strong><code>IDBRequest</code></strong> ne contient aucune information sur le résultat de l'opération, mais dès qu'une information est disponible un événement est déclenché. L'objet <strong><code>IDBRequest</code></strong> utilise ses gestionnaires d'événements pour le capter et mettre l'information à disposition.</p>
+Cet objet **`IDBRequest`** ne contient aucune information sur le résultat de l'opération, mais dès qu'une information est disponible un événement est déclenché. L'objet **`IDBRequest`** utilise ses gestionnaires d'événements pour le capter et mettre l'information à disposition.
 
-<p>Toute les opération asynchrone retourne immédiatement une instance <strong><code>IDBRequest</code></strong> avec une propriété <code>readyState</code> défini à <code>'pending'</code> qui passe à  <code>'done'</code> lorsque la requête réussie ou échoue. Quand l'état passe à <code>done</code>, chaque requête retourne <code>result</code> et <code>error</code>, et un évènement est envoyé sur la requête. Quand l'état est sur <code>pending</code>, chaque accès à <code>result</code> ou <code>error</code> lève une exception <code>InvalidStateError</code>.</p>
+Toute les opération asynchrone retourne immédiatement une instance **`IDBRequest`** avec une propriété `readyState` défini à `'pending'` qui passe à  `'done'` lorsque la requête réussie ou échoue. Quand l'état passe à `done`, chaque requête retourne `result` et `error`, et un évènement est envoyé sur la requête. Quand l'état est sur `pending`, chaque accès à `result` ou `error` lève une exception `InvalidStateError`.
 
-<p>Pour faire simple, chaque méthode asynchrome retourne un objet de requête. Si l'opération réussi, le résultat est disponible dans la propriété <code>result</code> et un évènement <code>success</code> est lancé ({{domxref("IDBRequest.onsuccess")}}). Si une erreur est rencontrée, une exeption est disponible dans la propriété <code>error</code> et un évènement <code>error</code> est lancé ({{domxref("IDBRequest.onerror")}}).</p>
+Pour faire simple, chaque méthode asynchrome retourne un objet de requête. Si l'opération réussi, le résultat est disponible dans la propriété `result` et un évènement `success` est lancé ({{domxref("IDBRequest.onsuccess")}}). Si une erreur est rencontrée, une exeption est disponible dans la propriété `error` et un évènement `error` est lancé ({{domxref("IDBRequest.onerror")}}).
 
-<p>L'interface {{domxref("IDBOpenDBRequest")}} est dérivé de <code>IDBRequest</code>.</p>
+L'interface {{domxref("IDBOpenDBRequest")}} est dérivé de `IDBRequest`.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<p>{{InheritanceDiagram}}</p>
+{{InheritanceDiagram}}
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<p><em>Hérite des propriétés de {{domxref("EventTarget")}}.</em></p>
+_Hérite des propriétés de {{domxref("EventTarget")}}._
 
-<dl>
- <dt>{{domxref("IDBRequest.result","result")}} {{readonlyInline}}</dt>
- <dd>La propriété <strong><code>result</code></strong> de l'interface <strong><code>IDBRequest</code></strong> renvoie le résultat de la requête. Si la requête est en cours, échoue ou que le résultat n'est pas disponible, l'exception <code>InvalidStateError</code> est levée.</dd>
- <dt>{{domxref("IDBRequest.error","error")}} {{readonlyInline}}</dt>
- <dd>La propriété <strong><code>error</code></strong> de l'interface <strong><code>IDBRequest</code></strong> indique le code de l'erreur survenue durant le traitement de la requête. Si la requête est en cours l'exception <code>InvalidStateError</code> est levée.</dd>
- <dt>{{domxref("IDBRequest.source","source")}} {{readonlyInline}}</dt>
- <dd>La propriété <strong><code>source</code></strong> de l'interface <strong><code>IDBRequest</code></strong> renvoie la source de la requête, tel qu'un {{domxref("IDBIndex","index")}}, un {{domxref("IDBObjectStore","magasin d'ojets")}} ou <code>null</code> s'il n'y a pas de source (lors de l'appel {{domxref("indexedDB.open")}} par exemple).</dd>
- <dt>{{domxref("IDBRequest.transaction","transaction")}} {{readonlyInline}}</dt>
- <dd>La propriété <strong><code>transaction</code></strong> de l'interface <strong><code>IDBRequest</code></strong> renvoie la {{domxref("IDBTransaction","transaction")}} dans laquelle on fait la requête. La propriété peut renvoyer <code>null</code> si requête se fait sans transaction, comme un objet IDBRequest renvoyé par {{domxref("IDBFactory.open")}} dans ce cas on est juste connecté à la base de données.</dd>
- <dt>{{domxref("IDBRequest.readyState","readyState")}} {{readonlyInline}}</dt>
- <dd>La propriété <strong><code>readyState</code></strong> de l'interface <strong><code>IDBRequest</code></strong> renvoie l'état de la requête. Chaque requête débute avec un statut <code>pending</code> et passe au statut <code>done</code> quand la requête réussie ou échoue.</dd>
-</dl>
+- {{domxref("IDBRequest.result","result")}} {{readonlyInline}}
+  - : La propriété **`result`** de l'interface **`IDBRequest`** renvoie le résultat de la requête. Si la requête est en cours, échoue ou que le résultat n'est pas disponible, l'exception `InvalidStateError` est levée.
+- {{domxref("IDBRequest.error","error")}} {{readonlyInline}}
+  - : La propriété **`error`** de l'interface **`IDBRequest`** indique le code de l'erreur survenue durant le traitement de la requête. Si la requête est en cours l'exception `InvalidStateError` est levée.
+- {{domxref("IDBRequest.source","source")}} {{readonlyInline}}
+  - : La propriété **`source`** de l'interface **`IDBRequest`** renvoie la source de la requête, tel qu'un {{domxref("IDBIndex","index")}}, un {{domxref("IDBObjectStore","magasin d'ojets")}} ou `null` s'il n'y a pas de source (lors de l'appel {{domxref("indexedDB.open")}} par exemple).
+- {{domxref("IDBRequest.transaction","transaction")}} {{readonlyInline}}
+  - : La propriété **`transaction`** de l'interface **`IDBRequest`** renvoie la {{domxref("IDBTransaction","transaction")}} dans laquelle on fait la requête. La propriété peut renvoyer `null` si requête se fait sans transaction, comme un objet IDBRequest renvoyé par {{domxref("IDBFactory.open")}} dans ce cas on est juste connecté à la base de données.
+- {{domxref("IDBRequest.readyState","readyState")}} {{readonlyInline}}
+  - : La propriété **`readyState`** de l'interface **`IDBRequest`** renvoie l'état de la requête. Chaque requête débute avec un statut `pending` et passe au statut `done` quand la requête réussie ou échoue.
 
-<h2 id="Méthodes">Méthodes</h2>
+## Méthodes
 
-<p><em>Pas de méthodes spécifiques, mais hérite des méthodes de {{domxref("EventTarget")}}.</em></p>
+_Pas de méthodes spécifiques, mais hérite des méthodes de {{domxref("EventTarget")}}._
 
-<h2 id="Gestionnaire_dévénement">Gestionnaire d'événement</h2>
+## Gestionnaire d'événement
 
-<p>On peut écouter les évènement avec <code>addEventListener()</code> ou bien en assignant un gestionnaire d'évènement à la propriété <code>on<em>eventname</em></code> de cette interface.</p>
+On peut écouter les évènement avec `addEventListener()` ou bien en assignant un gestionnaire d'évènement à la propriété `oneventname` de cette interface.
 
-<dl>
- <dt>{{domxref("IDBRequest.onerror","onerror")}}</dt>
- <dd>Le gestionnaire d'événement <strong><code>onerror</code></strong> de l'interface <strong><code>IDBRequest</code></strong> capte l'événement <code><a href="/en-US/docs/Web/Events/error">error</a></code>, déclenché quand une requête renvoie une erreur.</dd>
- <dt>{{domxref("IDBRequest.onsuccess","onsuccess")}}</dt>
- <dd>Le gestionnaire d'événement <strong><code>onsuccess</code></strong> de l'interface <strong><code>IDBRequest</code></strong> capte l'événement <code><a href="/en-US/docs/Web/Events/success">success</a></code>, déclenché quand la requête réussie.</dd>
-</dl>
+- {{domxref("IDBRequest.onerror","onerror")}}
+  - : Le gestionnaire d'événement **`onerror`** de l'interface **`IDBRequest`** capte l'événement [`error`](/en-US/docs/Web/Events/error), déclenché quand une requête renvoie une erreur.
+- {{domxref("IDBRequest.onsuccess","onsuccess")}}
+  - : Le gestionnaire d'événement **`onsuccess`** de l'interface **`IDBRequest`** capte l'événement [`success`](/en-US/docs/Web/Events/success), déclenché quand la requête réussie.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Dans l'exemple suivant, on ouvre une base de données et on fait une requête. Les gestionnaires d'événement <code>{{domxref("IDBRequest.onsuccess","onsuccess")}}</code> et <code>{{domxref("IDBRequest","onerror")}}</code> sont inclus. Pour un exemple de travail complet, voir notre application <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> (<a href="http://mdn.github.io/to-do-notifications/">voir l'exemple en direct</a>).</p>
+Dans l'exemple suivant, on ouvre une base de données et on fait une requête. Les gestionnaires d'événement `{{domxref("IDBRequest.onsuccess","onsuccess")}}` et `{{domxref("IDBRequest","onerror")}}` sont inclus. Pour un exemple de travail complet, voir notre application [To-do Notifications](https://github.com/mdn/to-do-notifications/) ([voir l'exemple en direct](http://mdn.github.io/to-do-notifications/)).
 
-<pre class="brush: js">var db;
+```js
+var db;
 
 // Ouvre une base de données.
 var DBOpenRequest = window.indexedDB.open("toDoList", 4);
@@ -72,58 +69,34 @@ var DBOpenRequest = window.indexedDB.open("toDoList", 4);
 // Ces deux gestionnaires d'événement interviennent quand la dase de
 // de données s'ouvre ou non.
 DBOpenRequest.onerror = function(event) {
-  note.innerHTML += '&lt;li&gt;Error loading database.&lt;/li&gt;';
+  note.innerHTML += '<li>Error loading database.</li>';
 };
 
 DBOpenRequest.onsuccess = function(event) {
-  note.innerHTML += '&lt;li&gt;Database initialised.&lt;/li&gt;';
+  note.innerHTML += '<li>Database initialised.</li>';
 
   // Affecte le resutat de l'ouverture à la variable.
   db = DBOpenRequest.result;
-};</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('IndexedDB', '#idbrequest', 'IDBRequest')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("IndexedDB 2", "#request-api", "IDBRequest")}}</td>
-   <td>{{Spec2("IndexedDB 2")}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité avec les navigateurs</h2>
-
-<div>
-<div>
-<div>
-
-
-<p>{{Compat("api.IDBRequest")}}</p>
-</div>
-</div>
-</div>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/IndexedDB_API/Using_IndexedDB">Utiliser IndexedDB</a></li>
- <li>Démarrer une transaction: {{domxref("IDBDatabase")}}</li>
- <li>Utiliser les transactions: {{domxref("IDBTransaction")}}</li>
- <li>Définir un intervalle de clés: {{domxref("IDBKeyRange")}}</li>
- <li>Récupérer et modifier vos données: {{domxref("IDBObjectStore")}}</li>
- <li>utiliser les curseurs: {{domxref("IDBCursor")}}</li>
- <li>Exemple de référence: <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li>
-</ul>
+};
+```
+
+## Spécifications
+
+| Spécification                                                                | Statut                           | Commentaire          |
+| ---------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName('IndexedDB', '#idbrequest', 'IDBRequest')}}     | {{Spec2('IndexedDB')}}     | Définition initiale. |
+| {{SpecName("IndexedDB 2", "#request-api", "IDBRequest")}} | {{Spec2("IndexedDB 2")}} |                      |
+
+## Compatibilité avec les navigateurs
+
+{{Compat("api.IDBRequest")}}
+
+## Voir aussi
+
+- [Utiliser IndexedDB](/fr/docs/Web/API/IndexedDB_API/Using_IndexedDB)
+- Démarrer une transaction: {{domxref("IDBDatabase")}}
+- Utiliser les transactions: {{domxref("IDBTransaction")}}
+- Définir un intervalle de clés: {{domxref("IDBKeyRange")}}
+- Récupérer et modifier vos données: {{domxref("IDBObjectStore")}}
+- utiliser les curseurs: {{domxref("IDBCursor")}}
+- Exemple de référence: [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages) ([view example live](http://mdn.github.io/to-do-notifications/).)
diff --git a/files/fr/web/api/idbrequest/onerror/index.md b/files/fr/web/api/idbrequest/onerror/index.md
index dc57020d05..edad1a851e 100644
--- a/files/fr/web/api/idbrequest/onerror/index.md
+++ b/files/fr/web/api/idbrequest/onerror/index.md
@@ -3,82 +3,70 @@ title: IDBRequest.onerror
 slug: Web/API/IDBRequest/onerror
 translation_of: Web/API/IDBRequest/onerror
 ---
-<p>{{ APIRef("IndexedDB") }}</p>
+{{ APIRef("IndexedDB") }}
 
-<p>le gestionnaire d'événement <strong><code>onerror</code></strong> de l'interface {{domxref("IDBRequest")}} capte l'événement <code><a href="/en-US/docs/Web/Events/error">error</a></code>, déclenché quand une requête renvoie une erreur.</p>
+le gestionnaire d'événement **`onerror`** de l'interface {{domxref("IDBRequest")}} capte l'événement [`error`](/en-US/docs/Web/Events/error), déclenché quand une requête renvoie une erreur.
 
-<p>Le gestionnaire d'événement reçoit l'événement <a href="/en-US/docs/Web/Events/error">error</a> avec le type="error" en paramètre.</p>
+Le gestionnaire d'événement reçoit l'événement [error](/en-US/docs/Web/Events/error) avec le type="error" en paramètre.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">request.onerror = function( event ) { ... };</pre>
+```js
+request.onerror = function( event ) { ... };
+```
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>L'exemple suivant demande un titre d'enregistrement donné, <code>onsuccess</code> obtient l'enregistrement associé au {{domxref("IDBObjectStore","magasin d'objets")}} (mis à disposition en tant que <code>objectStoreTitleRequest.result</code>), on met à jour une propriété de l'enregistrement, puis le sauve dans le magasin d'objets. En bas le gestionnaire d'événement <code>onerror</code> affiche le code d'erreur si la {{domxref("IDBRequest","requête")}} échoue. Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>).</p>
+L'exemple suivant demande un titre d'enregistrement donné, `onsuccess` obtient l'enregistrement associé au {{domxref("IDBObjectStore","magasin d'objets")}} (mis à disposition en tant que `objectStoreTitleRequest.result`), on met à jour une propriété de l'enregistrement, puis le sauve dans le magasin d'objets. En bas le gestionnaire d'événement `onerror` affiche le code d'erreur si la {{domxref("IDBRequest","requête")}} échoue. Pour un exemple de travail complet, voir notre [To-do Notifications](https://github.com/mdn/to-do-notifications/) app ([view example live](http://mdn.github.io/to-do-notifications/)).
 
-<pre>var title = "Walk dog";
+    var title = "Walk dog";
 
-// Ouvrez une transaction comme d'habitude
-var objectStore = db.transaction(['toDoList'], "readwrite").objectStore('toDoList');
+    // Ouvrez une transaction comme d'habitude
+    var objectStore = db.transaction(['toDoList'], "readwrite").objectStore('toDoList');
 
-// Obtenez l'objet toDoList qui a ce titre
-var objectStoreTitleRequest = objectStore.get(title);
+    // Obtenez l'objet toDoList qui a ce titre
+    var objectStoreTitleRequest = objectStore.get(title);
 
-objectStoreTitleRequest.onsuccess = function() {
-  // Prenez l'objet de données renvoyé comme résultat
-  var data = objectStoreTitleRequest.result;
+    objectStoreTitleRequest.onsuccess = function() {
+      // Prenez l'objet de données renvoyé comme résultat
+      var data = objectStoreTitleRequest.result;
 
-  // Mettre à jour la valeur notified de l'objet à "yes"
-  data.notified = "yes";
+      // Mettre à jour la valeur notified de l'objet à "yes"
+      data.notified = "yes";
 
-  // Créer une autre requête qui insère le nouvelle élément dans la base de données
-  var updateTitleRequest = objectStore.put(data);
+      // Créer une autre requête qui insère le nouvelle élément dans la base de données
+      var updateTitleRequest = objectStore.put(data);
 
-  // Lorsque cette requête réussit, appelle de la fonction displayData() pour mettre à jour l'affichage
-  updateTitleRequest.onsuccess = function() {
-    displayData();
-  };
-};
+      // Lorsque cette requête réussit, appelle de la fonction displayData() pour mettre à jour l'affichage
+      updateTitleRequest.onsuccess = function() {
+        displayData();
+      };
+    };
 
-objectStoreTitleRequest.onerror = function() {
-  // Si une erreur se produit à la demande, on l'affiche
-  console.log("Il y a eu une erreur dans la récupération des données: " + objectStoreTitleRequest.error);
-};
-</pre>
+    objectStoreTitleRequest.onerror = function() {
+      // Si une erreur se produit à la demande, on l'affiche
+      console.log("Il y a eu une erreur dans la récupération des données: " + objectStoreTitleRequest.error);
+    };
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('IndexedDB', '#widl-IDBRequest-onerror', 'onerror')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                        | Statut                       | Commentaire |
+| ------------------------------------------------------------------------------------ | ---------------------------- | ----------- |
+| {{SpecName('IndexedDB', '#widl-IDBRequest-onerror', 'onerror')}} | {{Spec2('IndexedDB')}} |             |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.IDBRequest.onerror")}}</p>
+{{Compat("api.IDBRequest.onerror")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB">Using IndexedDB</a></li>
- <li><a href="/en-US/docs/Web/Events/error">Error Event</a></li>
- <li>Starting transactions: {{domxref("IDBDatabase")}}</li>
- <li>Using transactions: {{domxref("IDBTransaction")}}</li>
- <li>Setting a range of keys: {{domxref("IDBKeyRange")}}</li>
- <li>Retrieving and making changes to your data: {{domxref("IDBObjectStore")}}</li>
- <li>Using cursors: {{domxref("IDBCursor")}}</li>
- <li>Reference example: <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li>
-</ul>
+- [Using IndexedDB](/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB)
+- [Error Event](/en-US/docs/Web/Events/error)
+- Starting transactions: {{domxref("IDBDatabase")}}
+- Using transactions: {{domxref("IDBTransaction")}}
+- Setting a range of keys: {{domxref("IDBKeyRange")}}
+- Retrieving and making changes to your data: {{domxref("IDBObjectStore")}}
+- Using cursors: {{domxref("IDBCursor")}}
+- Reference example: [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages) ([view example live](http://mdn.github.io/to-do-notifications/).)
diff --git a/files/fr/web/api/idbrequest/onsuccess/index.md b/files/fr/web/api/idbrequest/onsuccess/index.md
index a13ed4c5e7..201d7b58cf 100644
--- a/files/fr/web/api/idbrequest/onsuccess/index.md
+++ b/files/fr/web/api/idbrequest/onsuccess/index.md
@@ -3,84 +3,70 @@ title: IDBRequest.onsuccess
 slug: Web/API/IDBRequest/onsuccess
 translation_of: Web/API/IDBRequest/onsuccess
 ---
-<p>{{ APIRef("IndexedDB") }}</p>
+{{ APIRef("IndexedDB") }}
 
+Le gestionnaire d'événement **`onsuccess`** de l'interface {{domxref("IDBRequest")}} capte l'événement [`success`](/en-US/docs/Web/Events/success), déclenché quand la requête réussie.
 
-<p>Le gestionnaire d'événement <strong><code>onsuccess</code></strong> de l'interface {{domxref("IDBRequest")}} capte l'événement <code><a href="/en-US/docs/Web/Events/success">success</a></code>, déclenché quand la requête réussie.</p>
+Le gestionnaire d'événement un événement [success](/en-US/docs/Web/Events/success) avec le type="success" en paramètre.
 
-<p>Le gestionnaire d'événement un événement <a href="/en-US/docs/Web/Events/success">success</a> avec le type="success" en paramètre.</p>
+{{AvailableInWorkers}}
 
-<p>{{AvailableInWorkers}}</p>
+## Syntaxe
 
+```js
+request.onsuccess = function( event ) { ... };
+```
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Exemple
 
-<pre class="brush: js">request.onsuccess = function( event ) { ... };</pre>
+L'exemple suivant demande un titre d'enregistrement donné, `onsuccess` obtient l'enregistrement associé de {{domxref("IDBObjectStore")}} (mis à disposition en tant que `objectStoreTitleRequest.result`), on met à jour une propriété de l'enregistrement, puis le sauve dans le magasin d'objets. En bas le gestionnaire d'événement `onerror` affiche le code d'erreur si la requête échoue. Pour un exemple de travail complet, voir notre [To-do Notifications](https://github.com/mdn/to-do-notifications/) app ([view example live](http://mdn.github.io/to-do-notifications/)).
 
-<h2 id="Exemple">Exemple</h2>
+    var title = "Walk dog";
 
-<p>L'exemple suivant demande un titre d'enregistrement donné, <code>onsuccess</code> obtient l'enregistrement associé de {{domxref("IDBObjectStore")}} (mis à disposition en tant que <code>objectStoreTitleRequest.result</code>), on met à jour une propriété de l'enregistrement, puis le sauve dans le magasin d'objets. En bas le gestionnaire d'événement <code>onerror</code> affiche le code d'erreur si la requête échoue. Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>).</p>
+    // Ouvrez une transaction comme d'habitude
+    var objectStore = db.transaction(['toDoList'], "readwrite").objectStore('toDoList');
 
-<pre>var title = "Walk dog";
+    // Obtenez l'objet toDoList qui a ce titre
+    var objectStoreTitleRequest = objectStore.get(title);
 
-// Ouvrez une transaction comme d'habitude
-var objectStore = db.transaction(['toDoList'], "readwrite").objectStore('toDoList');
+    objectStoreTitleRequest.onsuccess = function() {
+      // Prenez l'objet de données renvoyé comme résultat
+      var data = objectStoreTitleRequest.result;
 
-// Obtenez l'objet toDoList qui a ce titre
-var objectStoreTitleRequest = objectStore.get(title);
+      // Mettre à jour la valeur notified de l'objet à "yes"
+      data.notified = "yes";
 
-objectStoreTitleRequest.onsuccess = function() {
-  // Prenez l'objet de données renvoyé comme résultat
-  var data = objectStoreTitleRequest.result;
+      // Créer une autre requête qui insère le nouvelle élément dans la base de données
+      var updateTitleRequest = objectStore.put(data);
 
-  // Mettre à jour la valeur notified de l'objet à "yes"
-  data.notified = "yes";
+      // Lorsque cette requête réussit, appelle de la fonction displayData() pour mettre à jour l'affichage
+      updateTitleRequest.onsuccess = function() {
+        displayData();
+      };
+    };
 
-  // Créer une autre requête qui insère le nouvelle élément dans la base de données
-  var updateTitleRequest = objectStore.put(data);
+    objectStoreTitleRequest.onerror = function() {
+      // Si une erreur se produit à la demande, on l'affiche
+      console.log("Il y a eu une erreur dans la récupération des données: " + objectStoreTitleRequest.error);
+    };
 
-  // Lorsque cette requête réussit, appelle de la fonction displayData() pour mettre à jour l'affichage
-  updateTitleRequest.onsuccess = function() {
-    displayData();
-  };
-};
+## Spécifications
 
-objectStoreTitleRequest.onerror = function() {
-  // Si une erreur se produit à la demande, on l'affiche
-  console.log("Il y a eu une erreur dans la récupération des données: " + objectStoreTitleRequest.error);
-};
-</pre>
+| Spécification                                                                                | Statut                       | Commentaire |
+| -------------------------------------------------------------------------------------------- | ---------------------------- | ----------- |
+| {{SpecName('IndexedDB', '#widl-IDBRequest-onsuccess', 'onsuccess')}} | {{Spec2('IndexedDB')}} |             |
 
-<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">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('IndexedDB', '#widl-IDBRequest-onsuccess', 'onsuccess')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+{{Compat("api.IDBRequest.onsuccess")}}
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Voir aussi
 
-<p>{{Compat("api.IDBRequest.onsuccess")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB">Using IndexedDB</a></li>
- <li><a href="/en-US/docs/Web/Events/success">Success Event</a></li>
- <li>Starting transactions: {{domxref("IDBDatabase")}}</li>
- <li>Using transactions: {{domxref("IDBTransaction")}}</li>
- <li>Setting a range of keys: {{domxref("IDBKeyRange")}}</li>
- <li>Retrieving and making changes to your data: {{domxref("IDBObjectStore")}}</li>
- <li>Using cursors: {{domxref("IDBCursor")}}</li>
- <li>Reference example: <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li>
-</ul>
+- [Using IndexedDB](/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB)
+- [Success Event](/en-US/docs/Web/Events/success)
+- Starting transactions: {{domxref("IDBDatabase")}}
+- Using transactions: {{domxref("IDBTransaction")}}
+- Setting a range of keys: {{domxref("IDBKeyRange")}}
+- Retrieving and making changes to your data: {{domxref("IDBObjectStore")}}
+- Using cursors: {{domxref("IDBCursor")}}
+- Reference example: [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages) ([view example live](http://mdn.github.io/to-do-notifications/).)
diff --git a/files/fr/web/api/idbrequest/readystate/index.md b/files/fr/web/api/idbrequest/readystate/index.md
index 2a91b7552e..710868b47b 100644
--- a/files/fr/web/api/idbrequest/readystate/index.md
+++ b/files/fr/web/api/idbrequest/readystate/index.md
@@ -9,27 +9,28 @@ tags:
   - Reference
 translation_of: Web/API/IDBRequest/readyState
 ---
-<div>{{APIRef("IndexedDB")}}</div>
+{{APIRef("IndexedDB")}}
 
-<p>La propriété <strong><code>readyState</code></strong>, rattachée à l'interface {{domxref("IDBRequest")}}, est une propriété en lecture seule qui indique l'état de la requête.</p>
+La propriété **`readyState`**, rattachée à l'interface {{domxref("IDBRequest")}}, est une propriété en lecture seule qui indique l'état de la requête.
 
-<p>Chaque requête démarre avec l'état <code>pending</code> (c'est-à-dire en attente). Cet état vaut ensuite <code>done</code> (fini) lorsque la requête est terminée (en cas de réussite de l'opération comme en cas d'échec).</p>
+Chaque requête démarre avec l'état `pending` (c'est-à-dire en attente). Cet état vaut ensuite `done` (fini) lorsque la requête est terminée (en cas de réussite de l'opération comme en cas d'échec).
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var <em>currentReadyState</em> = <em>request</em>.readyState;</pre>
+    var currentReadyState = request.readyState;
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>La valeur {{domxref("IDBRequestReadyState")}} de la requête, qui peut être l'un de deux valeurs. <code>pending</code> lorsque la requête est en attente, <code>done</code> lorsque celle-ci est finie.</p>
+La valeur {{domxref("IDBRequestReadyState")}} de la requête, qui peut être l'un de deux valeurs. `pending` lorsque la requête est en attente, `done` lorsque celle-ci est finie.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans l'exemple qui suit, on effectue une requête sur un enregistrement avec un titre donné et on recupère l'enregistrement associé grâce au gestionnaire d'évènement <code>onsuccess</code> à partir du magasin d'objets {{domxref("IDBObjectStore")}}. Ensuite, on met à jour une des propriétés de cet enregistrement et on replace cet objet mis à jour dans le magasin d'objets via une autre requête. La valeur de la propriété <code>readyState</code> pour la deuxième requête est affichée dans la console. Pour consulter un exemple fonctionnel complet, vous pouvez vous référer à notre appliction <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">cf. également l'exemple <em>live</em></a>).</p>
+Dans l'exemple qui suit, on effectue une requête sur un enregistrement avec un titre donné et on recupère l'enregistrement associé grâce au gestionnaire d'évènement `onsuccess` à partir du magasin d'objets {{domxref("IDBObjectStore")}}. Ensuite, on met à jour une des propriétés de cet enregistrement et on replace cet objet mis à jour dans le magasin d'objets via une autre requête. La valeur de la propriété `readyState` pour la deuxième requête est affichée dans la console. Pour consulter un exemple fonctionnel complet, vous pouvez vous référer à notre appliction [To-do Notifications](https://github.com/mdn/to-do-notifications/) ([cf. également l'exemple _live_](https://mdn.github.io/to-do-notifications/)).
 
-<pre class="brush: js">var title = "Walk dog";
+```js
+var title = "Walk dog";
 
 // On ouvre une transaction
 var objectStore = db.transaction(['toDoList'], "readwrite").objectStore('toDoList');
@@ -58,42 +59,26 @@ objectStoreTitleRequest.onsuccess = function() {
   updateTitleRequest.onsuccess = function() {
     displayData();
   };
-};</pre>
-
-<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('IndexedDB', '#widl-IDBRequest-readyState', 'readyState')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName("IndexedDB 2", "#dom-idbrequest-readystate", "readyState")}}</td>
-   <td>{{Spec2("IndexedDB 2")}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.IDBRequest.readyState")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Manipuler IndexedDB</a></li>
- <li>Démarrer des transactions : {{domxref("IDBDatabase")}}</li>
- <li>Manipuler des transactions : {{domxref("IDBTransaction")}}</li>
- <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
- <li>Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}</li>
- <li>Manipuler des curseurs : {{domxref("IDBCursor")}}</li>
- <li>Exemple de référence pour IndexedDB : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a></li>
-</ul>
+};
+```
+
+## Spécifications
+
+| Spécification                                                                                    | État                             | Commentaires |
+| ------------------------------------------------------------------------------------------------ | -------------------------------- | ------------ |
+| {{SpecName('IndexedDB', '#widl-IDBRequest-readyState', 'readyState')}}     | {{Spec2('IndexedDB')}}     |              |
+| {{SpecName("IndexedDB 2", "#dom-idbrequest-readystate", "readyState")}} | {{Spec2("IndexedDB 2")}} |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.IDBRequest.readyState")}}
+
+## Voir aussi
+
+- [Manipuler IndexedDB](/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB)
+- Démarrer des transactions : {{domxref("IDBDatabase")}}
+- Manipuler des transactions : {{domxref("IDBTransaction")}}
+- Définir un intervalle de clés : {{domxref("IDBKeyRange")}}
+- Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}
+- Manipuler des curseurs : {{domxref("IDBCursor")}}
+- Exemple de référence pour IndexedDB : [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages)
diff --git a/files/fr/web/api/idbrequest/result/index.md b/files/fr/web/api/idbrequest/result/index.md
index 066ba37fa7..69b9d13094 100644
--- a/files/fr/web/api/idbrequest/result/index.md
+++ b/files/fr/web/api/idbrequest/result/index.md
@@ -4,29 +4,27 @@ slug: Web/API/IDBRequest/result
 translation_of: Web/API/IDBRequest/result
 browser-compat: api.IDBRequest.result
 ---
-<div>{{APIRef("IndexedDB")}}</div>
+{{APIRef("IndexedDB")}}
 
-<p>La propriété <strong><code>result</code></strong>, rattachée à l'interface <a href="/fr/docs/Web/API/IDBRequest"><code>IDBRequest</code></a>, renvoie le résultat de la requête. Si la requête échoue et que le résultat n'est pas disponible, une exception <code>InvalidStateError</code> sera levée.</p>
+La propriété **`result`**, rattachée à l'interface [`IDBRequest`](/fr/docs/Web/API/IDBRequest), renvoie le résultat de la requête. Si la requête échoue et que le résultat n'est pas disponible, une exception `InvalidStateError` sera levée.
 
-<div class="note">
-  <p><strong>Note :</strong> Cette fonctionnalité est disponible via les <a href="/fr/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
-</div>
+> **Note :** Cette fonctionnalité est disponible via les [Web Workers](/fr/docs/Web/API/Web_Workers_API).
 
-<h2 id="syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">
+```js
 let resultat = request.result;
-</pre>
+```
 
-<h3 id="value">Valeur</h3>
+### Valeur
 
-<p>La valeur du résultat de la requête (le type dépend des objets du magasin d'objets).</p>
+La valeur du résultat de la requête (le type dépend des objets du magasin d'objets).
 
-<h2 id="example">Exemple</h2>
+## Exemple
 
-<p>Dans l'exemple qui suit, on souhaite récupérer l'enregistrement qui correspond à un titre donné. Le gestionnaire d'évènements <code>onsuccess</code> permet de récupérer l'enregistrement contenu dans le magasin d'objet (<a href="/fr/docs/Web/API/IDBObjectStore"><code>IDBObjectStore</code></a>) (via <code>objectStoreTitleRequest.result</code>). Ensuite, on met à jour une propriété de cet enregistrement et on replace cet enregistrement dans le magasin d'objet. Pour un exemple fonctionnel complet, voir <a href="https://github.com/mdn/to-do-notifications/">l'application To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">voir l'exemple <i>live</i></a>).</p>
+Dans l'exemple qui suit, on souhaite récupérer l'enregistrement qui correspond à un titre donné. Le gestionnaire d'évènements `onsuccess` permet de récupérer l'enregistrement contenu dans le magasin d'objet ([`IDBObjectStore`](/fr/docs/Web/API/IDBObjectStore)) (via `objectStoreTitleRequest.result`). Ensuite, on met à jour une propriété de cet enregistrement et on replace cet enregistrement dans le magasin d'objet. Pour un exemple fonctionnel complet, voir [l'application To-do Notifications](https://github.com/mdn/to-do-notifications/) ([voir l'exemple _live_](https://mdn.github.io/to-do-notifications/)).
 
-<pre class="brush: js;">
+```js
 let title = "Promener le chien";
 
 // On ouvre une transaction en lecture/écriture
@@ -49,24 +47,23 @@ objectStoreTitleRequest.onsuccess = function() {
   updateTitleRequest.onsuccess = function() {
     displayData();
   };
-};</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="/fr/docs/Web/API/IndexedDB_API/Using_IndexedDB">Utiliser IndexedDB</a></li>
- <li>Initier une transaction : <a href="/fr/docs/Web/API/IDBDatabase"><code>IDBDatabase</code></a></li>
- <li>Utiliser les transactions : <a href="/fr/docs/Web/API/IDBTransaction"><code>IDBTransaction</code></a></li>
- <li>Définir un intervalle de clés : <a href="/fr/docs/Web/API/IDBKeyRange"><code>IDBKeyRange</code></a></li>
- <li>Récupérer et modifier les données : <a href="/fr/docs/Web/API/IDBObjectStore"><code>IDBObjectStore</code></a></li>
- <li>Utiliser les curseurs : <a href="/fr/docs/Web/API/IDBCursor"><code>IDBCursor</code></a></li>
- <li>Exemple de référence : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <i>live</i></a>).</li>
-</ul>
+- [Utiliser IndexedDB](/fr/docs/Web/API/IndexedDB_API/Using_IndexedDB)
+- Initier une transaction : [`IDBDatabase`](/fr/docs/Web/API/IDBDatabase)
+- Utiliser les transactions : [`IDBTransaction`](/fr/docs/Web/API/IDBTransaction)
+- Définir un intervalle de clés : [`IDBKeyRange`](/fr/docs/Web/API/IDBKeyRange)
+- Récupérer et modifier les données : [`IDBObjectStore`](/fr/docs/Web/API/IDBObjectStore)
+- Utiliser les curseurs : [`IDBCursor`](/fr/docs/Web/API/IDBCursor)
+- Exemple de référence : [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages) ([exemple _live_](https://mdn.github.io/to-do-notifications/)).
diff --git a/files/fr/web/api/idbrequest/source/index.md b/files/fr/web/api/idbrequest/source/index.md
index 8a03050021..68ea7bf33d 100644
--- a/files/fr/web/api/idbrequest/source/index.md
+++ b/files/fr/web/api/idbrequest/source/index.md
@@ -9,28 +9,28 @@ tags:
   - Reference
 translation_of: Web/API/IDBRequest/source
 ---
-<div>{{APIRef("IndexedDB")}}</div>
+{{APIRef("IndexedDB")}}
 
-<p>La propriété <strong><code>source</code></strong> est une propriété en lecture seule, rattachée à l'interface {{domxref("IDBRequest")}}, et qui indique la source de la requête (c'est-à-dire l'index ou le magasin d'objets utilisé). Si aucune source n'existe (par exemple car on a appelé {{domxref("indexedDB.open")}}), la propriété vaut <code>null</code>.</p>
+La propriété **`source`** est une propriété en lecture seule, rattachée à l'interface {{domxref("IDBRequest")}}, et qui indique la source de la requête (c'est-à-dire l'index ou le magasin d'objets utilisé). Si aucune source n'existe (par exemple car on a appelé {{domxref("indexedDB.open")}}), la propriété vaut `null`.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var <em>IDBIndex</em> = <em>request</em>.source;
-var <em>IDBCursor</em> = <em>request</em>.source;
-var <em>IDBObjectStore</em> = <em>request</em>.source;
-</pre>
+    var IDBIndex = request.source;
+    var IDBCursor = request.source;
+    var IDBObjectStore = request.source;
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>Un objet qui représente la source de la requête. Ce peut être un objet {{domxref("IDBIndex")}}, {{domxref("IDBObjectStore")}} ou un objet  {{domxref("IDBCursor")}}.</p>
+Un objet qui représente la source de la requête. Ce peut être un objet {{domxref("IDBIndex")}}, {{domxref("IDBObjectStore")}} ou un objet  {{domxref("IDBCursor")}}.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans l'exemple qui suit, on récupère un enregistrement avec un titre donné depuis un magasin d'objets. Ensuite, on met à jour une des propriétés de cet enregistrement et on met à jour le magasin d'objets en insérant cet objet modifié. Lors de cette deuxième requête, on affiche la source dans la console. Pour consulter un exemple fonctionnel complet, vous pouvez vous référer à notre application <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">cf. l'exemple <em>live</em></a>).</p>
+Dans l'exemple qui suit, on récupère un enregistrement avec un titre donné depuis un magasin d'objets. Ensuite, on met à jour une des propriétés de cet enregistrement et on met à jour le magasin d'objets en insérant cet objet modifié. Lors de cette deuxième requête, on affiche la source dans la console. Pour consulter un exemple fonctionnel complet, vous pouvez vous référer à notre application [To-do Notifications](https://github.com/mdn/to-do-notifications/) ([cf. l'exemple _live_](https://mdn.github.io/to-do-notifications/)).
 
-<pre class="brush: js">var title = "Walk dog";
+```js
+var title = "Walk dog";
 
 // On ouvre une transaction
 var objectStore = db.transaction(['toDoList'], "readwrite").objectStore('toDoList');
@@ -61,42 +61,25 @@ objectStoreTitleRequest.onsuccess = function() {
   // l'affichage
   updateTitleRequest.onsuccess = function() { displayData(); };
 };
-</pre>
-
-<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('IndexedDB', '#widl-IDBRequest-source', 'source')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName("IndexedDB 2", "#dom-idbrequest-source", "source")}}</td>
-   <td>{{Spec2("IndexedDB 2")}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.IDBRequest.source")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Manipuler IndexedDB</a></li>
- <li>Démarrer des transactions : {{domxref("IDBDatabase")}}</li>
- <li>Manipuler des transactions : {{domxref("IDBTransaction")}}</li>
- <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
- <li>Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}</li>
- <li>Manipuler des curseurs : {{domxref("IDBCursor")}}</li>
- <li>Exemple de référence pour IndexedDB : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a></li>
-</ul>
+```
+
+## Spécifications
+
+| Spécification                                                                        | État                             | Commentaires |
+| ------------------------------------------------------------------------------------ | -------------------------------- | ------------ |
+| {{SpecName('IndexedDB', '#widl-IDBRequest-source', 'source')}} | {{Spec2('IndexedDB')}}     |              |
+| {{SpecName("IndexedDB 2", "#dom-idbrequest-source", "source")}} | {{Spec2("IndexedDB 2")}} |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.IDBRequest.source")}}
+
+## Voir aussi
+
+- [Manipuler IndexedDB](/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB)
+- Démarrer des transactions : {{domxref("IDBDatabase")}}
+- Manipuler des transactions : {{domxref("IDBTransaction")}}
+- Définir un intervalle de clés : {{domxref("IDBKeyRange")}}
+- Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}
+- Manipuler des curseurs : {{domxref("IDBCursor")}}
+- Exemple de référence pour IndexedDB : [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages)
diff --git a/files/fr/web/api/idbrequest/transaction/index.md b/files/fr/web/api/idbrequest/transaction/index.md
index a81f6d0774..1bbf05d769 100644
--- a/files/fr/web/api/idbrequest/transaction/index.md
+++ b/files/fr/web/api/idbrequest/transaction/index.md
@@ -3,29 +3,30 @@ title: IDBRequest.transaction
 slug: Web/API/IDBRequest/transaction
 translation_of: Web/API/IDBRequest/transaction
 ---
-<p>{{ APIRef("IndexedDB") }}</p>
+{{ APIRef("IndexedDB") }}
 
-<p>La propriété <strong><code>transaction</code></strong> de l'interface IDBRequest renvoie la {{domxref("IDBTransaction","transaction")}} dans laquelle on fait la requête.La propriètè peut renvoiyer <code>null</code> si requête se fait sans transaction, comme un objet IDBRequest renvoyé par {{domxref("IDBFactory.open")}} dans ce cas on est juste connecté à la base de données.</p>
+La propriété **`transaction`** de l'interface IDBRequest renvoie la {{domxref("IDBTransaction","transaction")}} dans laquelle on fait la requête.La propriètè peut renvoiyer `null` si requête se fait sans transaction, comme un objet IDBRequest renvoyé par {{domxref("IDBFactory.open")}} dans ce cas on est juste connecté à la base de données.
 
-<div class="note">
-  <p><strong>Note :</strong> Durant la gestion d'un événement {{domxref("IDBOpenDBRequest.onupgradeneeded", "upgradeneeded")}} qui met à jour la version de la base de données, la propriété <strong><code>transaction</code></strong> doit être une {{domxref("IDBTransaction","transaction")}} ouverte en {{domxref("IDBTransaction.mode", "mode")}} <code>"versionchange"</code>, on peut alors accéder aux {{domxref("IDBObjectStore","magasins d'objets")}} et {{domxref("IDBIndex","index")}} ou annulé la mise à niveau. Après quoi, la propriété <strong><code>transaction</code></strong> renverra encore <code>null</code>.</p>
-</div>
+> **Note :** Durant la gestion d'un événement {{domxref("IDBOpenDBRequest.onupgradeneeded", "upgradeneeded")}} qui met à jour la version de la base de données, la propriété **`transaction`** doit être une {{domxref("IDBTransaction","transaction")}} ouverte en {{domxref("IDBTransaction.mode", "mode")}} `"versionchange"`, on peut alors accéder aux {{domxref("IDBObjectStore","magasins d'objets")}} et {{domxref("IDBIndex","index")}} ou annulé la mise à niveau. Après quoi, la propriété **`transaction`** renverra encore `null`.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">var myTransaction = request.transaction;</pre>
+```js
+var myTransaction = request.transaction;
+```
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>Une {{domxref("IDBTransaction","transaction")}}.</p>
+Une {{domxref("IDBTransaction","transaction")}}.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>L'exemple suivant demande un titre d'enregistrement donné, <code>onsuccess</code> obtient l'enregistrement associé du {{domxref("IDBObjectStore","magasin d'objects")}} (mis à disposition en tant que <code>objectStoreTitleRequest.result</code>), on met à jour une propriété de l'enregistrement, puis le sauve dans le magasin d'objects. La {{domxref("IDBTransaction","transaction")}} à l'origine de la deuxième {{domxref("IBBRequest","requête")}} est affichée sur la console du développeur (Ps, les deux requêtes proviennent de la même transaction). En bas est une fonction onerror qui affiche le code d'erreur si la requête échoue. Pour un exemple de travail complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> app (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>).</p>
+L'exemple suivant demande un titre d'enregistrement donné, `onsuccess` obtient l'enregistrement associé du {{domxref("IDBObjectStore","magasin d'objects")}} (mis à disposition en tant que `objectStoreTitleRequest.result`), on met à jour une propriété de l'enregistrement, puis le sauve dans le magasin d'objects. La {{domxref("IDBTransaction","transaction")}} à l'origine de la deuxième {{domxref("IBBRequest","requête")}} est affichée sur la console du développeur (Ps, les deux requêtes proviennent de la même transaction). En bas est une fonction onerror qui affiche le code d'erreur si la requête échoue. Pour un exemple de travail complet, voir notre [To-do Notifications](https://github.com/mdn/to-do-notifications/) app ([view example live](http://mdn.github.io/to-do-notifications/)).
 
-<pre class="brush: js">var title = "Walk dog";
+```js
+var title = "Walk dog";
 
 // Ouvrez une transaction comme d'habitude
 var objectStore = db.transaction(['toDoList'], "readwrite").objectStore('toDoList');
@@ -55,21 +56,22 @@ objectStoreTitleRequest.onerror = function() {
   // Si une erreur pendant la requête, on l'affiche
   console.log("Il y a eu une erreur dans la récupération des données: " + objectStoreTitleRequest.error);
 };
-</pre>
+```
 
-<p>Cet exemple montre comment la propriété <strong><code>transaction</code></strong> peut être utilisé pendant une mise à niveau de version pour accéder à des {{domxref("IDBObjectStore","magasins d'objects")}} existants: ​</p>
+Cet exemple montre comment la propriété **`transaction`** peut être utilisé pendant une mise à niveau de version pour accéder à des {{domxref("IDBObjectStore","magasins d'objects")}} existants: ​
 
-<pre class="brush: js">var openRequest = indexedDB.open('db', 2);
+```js
+var openRequest = indexedDB.open('db', 2);
 console.log(openRequest.transaction); // Affiche "null".
 
 openRequest.onupgradeneeded = function(event) {
   console.log(openRequest.transaction.mode); // Affiche "versionchange".
   var db = openRequest.result;
-  if (event.oldVersion &lt; 1) {
+  if (event.oldVersion < 1) {
     // Nouvelle base de données, créer un magasin d'objets "livres".
     db.createObjectStore('books');
   }
-  if (event.oldVersion &lt; 2) {
+  if (event.oldVersion < 2) {
     // Mise à niveau de la base de données v1: ajoute un index sur "title" pour stocker les livres.
     var bookStore = openRequest.transaction.objectStore('books');
     bookStore.createIndex('by_title', 'title');
@@ -79,37 +81,24 @@ openRequest.onupgradeneeded = function(event) {
 openRequest.onsuccess = function() {
   console.log(openRequest.transaction); // Affiche "null".
 };
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('IndexedDB', '#widl-IDBRequest-transaction', 'transaction')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.IDBRequest.transaction")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB">Using IndexedDB</a></li>
- <li>Starting transactions: {{domxref("IDBDatabase")}}</li>
- <li>Using transactions: {{domxref("IDBTransaction")}}</li>
- <li>Setting a range of keys: {{domxref("IDBKeyRange")}}</li>
- <li>Retrieving and making changes to your data: {{domxref("IDBObjectStore")}}</li>
- <li>Using cursors: {{domxref("IDBCursor")}}</li>
- <li>Reference example: <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li>
-</ul>
+```
+
+## Spécifications
+
+| Spécification                                                                                    | Statut                       | Commentaire |
+| ------------------------------------------------------------------------------------------------ | ---------------------------- | ----------- |
+| {{SpecName('IndexedDB', '#widl-IDBRequest-transaction', 'transaction')}} | {{Spec2('IndexedDB')}} |             |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.IDBRequest.transaction")}}
+
+## Voir aussi
+
+- [Using IndexedDB](/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB)
+- Starting transactions: {{domxref("IDBDatabase")}}
+- Using transactions: {{domxref("IDBTransaction")}}
+- Setting a range of keys: {{domxref("IDBKeyRange")}}
+- Retrieving and making changes to your data: {{domxref("IDBObjectStore")}}
+- Using cursors: {{domxref("IDBCursor")}}
+- Reference example: [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages) ([view example live](http://mdn.github.io/to-do-notifications/).)
diff --git a/files/fr/web/api/idbtransaction/abort/index.md b/files/fr/web/api/idbtransaction/abort/index.md
index a7baf8d966..53a6dbd6aa 100644
--- a/files/fr/web/api/idbtransaction/abort/index.md
+++ b/files/fr/web/api/idbtransaction/abort/index.md
@@ -9,35 +9,36 @@ tags:
   - Reference
 translation_of: Web/API/IDBTransaction/abort
 ---
-<div>{{APIRef("IndexedDB")}}</div>
+{{APIRef("IndexedDB")}}
 
-<p>La méthode <strong><code>abort()</code></strong>, rattachée à l'interface {{domxref("IDBTransaction")}}, permet d'annuler les modifications apportées aux objets de la base de données pendant la transaction courante.</p>
+La méthode **`abort()`**, rattachée à l'interface {{domxref("IDBTransaction")}}, permet d'annuler les modifications apportées aux objets de la base de données pendant la transaction courante.
 
-<p>Tous les objets {{domxref("IDBRequest")}} créés pendant cette transaction verront leur attribut {{domxref("IDBRequest.error")}} prendre la valeur <code>AbortError</code>.</p>
+Tous les objets {{domxref("IDBRequest")}} créés pendant cette transaction verront leur attribut {{domxref("IDBRequest.error")}} prendre la valeur `AbortError`.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">transaction.abort();</pre>
+    transaction.abort();
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Aucune.</p>
+Aucune.
 
-<h3 id="Exceptions">Exceptions</h3>
+### Exceptions
 
-<p>Cette méthode peut déclencher une exception {{domxref("DOMException")}} du type <code>InvalidStateError</code> lorsque la transaction a été validée ou qu'elle a déjà été annulée.</p>
+Cette méthode peut déclencher une exception {{domxref("DOMException")}} du type `InvalidStateError` lorsque la transaction a été validée ou qu'elle a déjà été annulée.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans le fragment de code suivant, on ouvre une transaction en lecture/écriture sur la base de données et on ajoute des données au magasin d'objets. On dispose également de fonctions attachées aux gestionnaires d'évènements de la transaction pour gérer la réussite ou l'échec des opérations. Ensuite, on annule les opérations de la transaction grâce à <code>abort()</code>. Pour un exemple complet, vous pouvez consulter <a href="https://github.com/mdn/to-do-notifications/">notre application de notifications To-do</a> (cf. <a href="https://mdn.github.io/to-do-notifications/">la démonstration <em>live</em></a>).</p>
+Dans le fragment de code suivant, on ouvre une transaction en lecture/écriture sur la base de données et on ajoute des données au magasin d'objets. On dispose également de fonctions attachées aux gestionnaires d'évènements de la transaction pour gérer la réussite ou l'échec des opérations. Ensuite, on annule les opérations de la transaction grâce à `abort()`. Pour un exemple complet, vous pouvez consulter [notre application de notifications To-do](https://github.com/mdn/to-do-notifications/) (cf. [la démonstration _live_](https://mdn.github.io/to-do-notifications/)).
 
-<pre class="brush: js">// On ouvre la base de données
+```js
+// On ouvre la base de données
 var DBOpenRequest = window.indexedDB.open("toDoList", 4);
 
 DBOpenRequest.onsuccess = function(event) {
-  note.innerHTML += '&lt;li&gt;Initialisation de la base.&lt;/li&gt;';
+  note.innerHTML += '<li>Initialisation de la base.</li>';
 
   // On enregistre le résultat de l'ouverture dans la
   // variable db afin de l'utiliser ensuite
@@ -59,12 +60,12 @@ function addData() {
 
   // On gère la réussite de la transaction
   transaction.oncomplete = function(event) {
-    note.innerHTML += '&lt;li&gt;Transaction terminée : modifications appliquées.&lt;/li&gt;';
+    note.innerHTML += '<li>Transaction terminée : modifications appliquées.</li>';
   };
 
 
   transaction.onerror = function(event) {
-    note.innerHTML += '&lt;li&gt;Transaction non ouverte à cause d'une erreur.&lt;/li&gt;';
+    note.innerHTML += '<li>Transaction non ouverte à cause d'une erreur.</li>';
   };
 
   // On crée le magasin d'objet pour la transaction
@@ -76,42 +77,30 @@ function addData() {
   objectStoreRequest.onsuccess = function(event) {
     // On gère la réussite de l'ajout de l'élément dans
     // la base de données
-    note.innerHTML += '&lt;li&gt;Nouvel objet ajouté dans la base de données.&lt;/li&gt;';
+    note.innerHTML += '<li>Nouvel objet ajouté dans la base de données.</li>';
   };
 
   // On annule la transaction en cours
   transaction.abort();
-};</pre>
-
-<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('IndexedDB', '#widl-IDBTransaction-abort-void', 'abort')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.IDBTransaction.abort")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
- <li>Initier une connexion : {{domxref("IDBDatabase")}}</li>
- <li>Utiliser les transactions : {{domxref("IDBTransaction")}}</li>
- <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
- <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li>
- <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li>
- <li>Exemple de référence : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li>
-</ul>
+};
+```
+
+## Spécifications
+
+| Spécification                                                                                | État                         | Commentaires |
+| -------------------------------------------------------------------------------------------- | ---------------------------- | ------------ |
+| {{SpecName('IndexedDB', '#widl-IDBTransaction-abort-void', 'abort')}} | {{Spec2('IndexedDB')}} |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.IDBTransaction.abort")}}
+
+## Voir aussi
+
+- [Utiliser IndexedDB](/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB)
+- Initier une connexion : {{domxref("IDBDatabase")}}
+- Utiliser les transactions : {{domxref("IDBTransaction")}}
+- Définir un intervalle de clés : {{domxref("IDBKeyRange")}}
+- Récupérer et modifier les données : {{domxref("IDBObjectStore")}}
+- Utiliser les curseurs {{domxref("IDBCursor")}}
+- Exemple de référence : [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages) ([exemple _live_](https://mdn.github.io/to-do-notifications/)).
diff --git a/files/fr/web/api/idbtransaction/abort_event/index.md b/files/fr/web/api/idbtransaction/abort_event/index.md
index 86a1413564..3dd7de8890 100644
--- a/files/fr/web/api/idbtransaction/abort_event/index.md
+++ b/files/fr/web/api/idbtransaction/abort_event/index.md
@@ -3,73 +3,42 @@ title: abort
 slug: Web/API/IDBTransaction/abort_event
 translation_of: Web/API/IDBTransaction/abort_event
 ---
-<p>Le gestionnaire<strong> </strong>d'arrêt est exécuté lorsqu'une transaction a été interrompue.</p>
-
-<h2 id="Informations_générales">Informations générales</h2>
-
-<dl>
- <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
- <dd style="margin: 0 0 0 120px;"><a href="http://www.w3.org/TR/IndexedDB/#request-api">IndexedDB</a></dd>
- <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
- <dd style="margin: 0 0 0 120px;">Event</dd>
- <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
- <dd style="margin: 0 0 0 120px;">Oui</dd>
- <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
- <dd style="margin: 0 0 0 120px;">Non</dd>
- <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
- <dd style="margin: 0 0 0 120px;">IDBTransaction</dd>
- <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
- <dd style="margin: 0 0 0 120px;">Aucune</dd>
-</dl>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Property</th>
-   <th scope="col">Type</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>target</code> {{readonlyInline}}</td>
-   <td>{{domxref("EventTarget")}}</td>
-   <td>The event target (the topmost target in the DOM tree).</td>
-  </tr>
-  <tr>
-   <td><code>type</code> {{readonlyInline}}</td>
-   <td>{{domxref("DOMString")}}</td>
-   <td>The type of event.</td>
-  </tr>
-  <tr>
-   <td><code>bubbles</code> {{readonlyInline}}</td>
-   <td>{{jsxref("Boolean")}}</td>
-   <td>Whether the event normally bubbles or not.</td>
-  </tr>
-  <tr>
-   <td><code>cancelable</code> {{readonlyInline}}</td>
-   <td>{{jsxref("Boolean")}}</td>
-   <td>Whether the event is cancellable or not.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Evénements_liés">Evénements liés</h2>
-
-<ul>
- <li>{{event("success")}}</li>
- <li>{{event("error")}}</li>
- <li>{{event("abort")}}</li>
- <li>{{event("complete")}}</li>
- <li>{{event("upgradeneeded")}}</li>
- <li>{{event("blocked")}}</li>
- <li>{{event("versionchange")}}</li>
-</ul>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/IndexedDB/Using_IndexedDB">Utilisation d'IndexedDB</a></li>
-</ul>
+Le gestionnaire\*\* \*\*d'arrêt est exécuté lorsqu'une transaction a été interrompue.
+
+## Informations générales
+
+- Spécification
+  - : [IndexedDB](http://www.w3.org/TR/IndexedDB/#request-api)
+- Interface
+  - : Event
+- Propagation
+  - : Oui
+- Annulable
+  - : Non
+- Cible
+  - : IDBTransaction
+- Action par défaut
+  - : Aucune
+
+## Propriétés
+
+| Property                              | Type                                 | Description                                            |
+| ------------------------------------- | ------------------------------------ | ------------------------------------------------------ |
+| `target` {{readonlyInline}}     | {{domxref("EventTarget")}} | The event target (the topmost target in the DOM tree). |
+| `type` {{readonlyInline}}       | {{domxref("DOMString")}}     | The type of event.                                     |
+| `bubbles` {{readonlyInline}}    | {{jsxref("Boolean")}}         | Whether the event normally bubbles or not.             |
+| `cancelable` {{readonlyInline}} | {{jsxref("Boolean")}}         | Whether the event is cancellable or not.               |
+
+## Evénements liés
+
+- {{event("success")}}
+- {{event("error")}}
+- {{event("abort")}}
+- {{event("complete")}}
+- {{event("upgradeneeded")}}
+- {{event("blocked")}}
+- {{event("versionchange")}}
+
+## Voir aussi
+
+- [Utilisation d'IndexedDB](/fr/docs/IndexedDB/Using_IndexedDB)
diff --git a/files/fr/web/api/idbtransaction/complete_event/index.md b/files/fr/web/api/idbtransaction/complete_event/index.md
index ed134208b2..b2e2e57023 100644
--- a/files/fr/web/api/idbtransaction/complete_event/index.md
+++ b/files/fr/web/api/idbtransaction/complete_event/index.md
@@ -3,62 +3,36 @@ title: complete
 slug: Web/API/IDBTransaction/complete_event
 translation_of: Web/API/IDBTransaction/complete_event
 ---
-<p>Le gestionnaire <strong>complete</strong> est exécuté lorsqu'une transaction est complétée avec succès.</p>
+Le gestionnaire **complete** est exécuté lorsqu'une transaction est complétée avec succès.
 
-<h2 id="Informations_générales">Informations générales</h2>
+## Informations générales
 
-<dl>
- <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
- <dd style="margin: 0 0 0 120px;"><a href="http://www.w3.org/TR/IndexedDB/#request-api">IndexedDB</a></dd>
- <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
- <dd style="margin: 0 0 0 120px;">Event</dd>
- <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
- <dd style="margin: 0 0 0 120px;">Non</dd>
- <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
- <dd style="margin: 0 0 0 120px;">Non</dd>
- <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
- <dd style="margin: 0 0 0 120px;">IDBTransaction</dd>
- <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
- <dd style="margin: 0 0 0 120px;">Aucune</dd>
-</dl>
+- Spécification
+  - : [IndexedDB](http://www.w3.org/TR/IndexedDB/#request-api)
+- Interface
+  - : Event
+- Propagation
+  - : Non
+- Annulable
+  - : Non
+- Cible
+  - : IDBTransaction
+- Action par défaut
+  - : Aucune
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Property</th>
-   <th scope="col">Type</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>target</code> {{readonlyInline}}</td>
-   <td>{{domxref("EventTarget")}}</td>
-   <td>The event target (the topmost target in the DOM tree).</td>
-  </tr>
-  <tr>
-   <td><code>type</code> {{readonlyInline}}</td>
-   <td>{{domxref("DOMString")}}</td>
-   <td>The type of event.</td>
-  </tr>
-  <tr>
-   <td><code>bubbles</code> {{readonlyInline}}</td>
-   <td>{{jsxref("Boolean")}}</td>
-   <td>Whether the event normally bubbles or not.</td>
-  </tr>
-  <tr>
-   <td><code>cancelable</code> {{readonlyInline}}</td>
-   <td>{{jsxref("Boolean")}}</td>
-   <td>Whether the event is cancellable or not.</td>
-  </tr>
- </tbody>
-</table>
+| Property                              | Type                                 | Description                                            |
+| ------------------------------------- | ------------------------------------ | ------------------------------------------------------ |
+| `target` {{readonlyInline}}     | {{domxref("EventTarget")}} | The event target (the topmost target in the DOM tree). |
+| `type` {{readonlyInline}}       | {{domxref("DOMString")}}     | The type of event.                                     |
+| `bubbles` {{readonlyInline}}    | {{jsxref("Boolean")}}         | Whether the event normally bubbles or not.             |
+| `cancelable` {{readonlyInline}} | {{jsxref("Boolean")}}         | Whether the event is cancellable or not.               |
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush:js;">var transaction = db.transaction(["customers"], IDBTransaction.versionchange);
+```js
+var transaction = db.transaction(["customers"], IDBTransaction.versionchange);
 
 transaction.oncomplete = function( event ) {
   ...
@@ -68,22 +42,18 @@ transaction.oncomplete = function( event ) {
 transaction.addEventListener("complete", function( event ) {
   ...
 });
-</pre>
+```
 
-<h2 id="Evénements_liés">Evénements liés</h2>
+## Evénements liés
 
-<ul>
- <li>{{event("success")}}</li>
- <li>{{event("error")}}</li>
- <li>{{event("abort")}}</li>
- <li>{{event("complete")}}</li>
- <li>{{event("upgradeneeded")}}</li>
- <li>{{event("blocked")}}</li>
- <li>{{event("versionchange")}}</li>
-</ul>
+- {{event("success")}}
+- {{event("error")}}
+- {{event("abort")}}
+- {{event("complete")}}
+- {{event("upgradeneeded")}}
+- {{event("blocked")}}
+- {{event("versionchange")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/IndexedDB/Using_IndexedDB">Utilisation d'indexedDB</a></li>
-</ul>
+- [Utilisation d'indexedDB](/fr/docs/IndexedDB/Using_IndexedDB)
diff --git a/files/fr/web/api/idbtransaction/db/index.md b/files/fr/web/api/idbtransaction/db/index.md
index a193d733ca..3032ed9c36 100644
--- a/files/fr/web/api/idbtransaction/db/index.md
+++ b/files/fr/web/api/idbtransaction/db/index.md
@@ -9,27 +9,28 @@ tags:
   - Reference
 translation_of: Web/API/IDBTransaction/db
 ---
-<div>{{APIRef("IndexedDB")}}</div>
+{{APIRef("IndexedDB")}}
 
-<p>La propriété <strong><code>db</code></strong> de l'interface {{domxref("IDBTransaction")}} renvoie la {{domxref("IDBDatabase","connexion","",1)}} à la base de donnée associée à la {{domxref("IDBTransaction","transaction","",1)}}.</p>
+La propriété **`db`** de l'interface {{domxref("IDBTransaction")}} renvoie la {{domxref("IDBDatabase","connexion","",1)}} à la base de donnée associée à la {{domxref("IDBTransaction","transaction","",1)}}.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var myDatabase = transaction.db;</pre>
+    var myDatabase = transaction.db;
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>Une {{domxref("IDBDatabase","connexion","",1)}} à la base de données sous la forme d'un objet <code>IDBDatabase</code>.</p>
+Une {{domxref("IDBDatabase","connexion","",1)}} à la base de données sous la forme d'un objet `IDBDatabase`.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans le fragment de code suivant, on ouvre une {{domxref("IDBDatabase","connexion","",1)}} à la base de donnée. Sur cette connexion on démarre une {{domxref("IDBTransaction","transaction","",1)}} en lecture/écriture pour {{domxref("IDBObjectStore","accéder au magasin d'objet","",1)}}  <code>"toDoList"</code> et y {{domxref("IDBObjectStore.add","ajouter","",1)}} un enregistrement. Notez également les gestionnaires d'événements {{domxref("IDBTransaction.oncomplete","oncomplete")}} et {{domxref("IDBTransaction.onerror","onerror")}} de la transaction qui affichent sur la page le résultat de la transaction.</p>
+Dans le fragment de code suivant, on ouvre une {{domxref("IDBDatabase","connexion","",1)}} à la base de donnée. Sur cette connexion on démarre une {{domxref("IDBTransaction","transaction","",1)}} en lecture/écriture pour {{domxref("IDBObjectStore","accéder au magasin d'objet","",1)}}  `"toDoList"` et y {{domxref("IDBObjectStore.add","ajouter","",1)}} un enregistrement. Notez également les gestionnaires d'événements {{domxref("IDBTransaction.oncomplete","oncomplete")}} et {{domxref("IDBTransaction.onerror","onerror")}} de la transaction qui affichent sur la page le résultat de la transaction.
 
-<p>À la fin, la méthode <strong><code>db</code></strong> sert à renvoyer la connexion à la base de données associée à la transaction.</p>
+À la fin, la méthode **`db`** sert à renvoyer la connexion à la base de données associée à la transaction.
 
-<pre class="brush: js">//Connexion à la base de données
+```js
+//Connexion à la base de données
 var DBOpenRequest = window.indexedDB.open("toDoList", 4);
 
 DBOpenRequest.onsuccess = function(event) {
@@ -52,11 +53,11 @@ function addData() {
 
   // En cas de succès de l'ouverture de la transaction
   transaction.oncomplete = function(event) {
-    note.innerHTML += '&lt;li&gt;Transaction complété : modification de la base de données terminée.&lt;/li&gt;';
+    note.innerHTML += '<li>Transaction complété : modification de la base de données terminée.</li>';
   };
   // En  cas d'échec de l'ouverture de la transaction
   transaction.onerror = function(event) {
-    note.innerHTML += '&lt;li&gt;Erreur transaction non ouverte, doublons interdits.&lt;/li&gt;';
+    note.innerHTML += '<li>Erreur transaction non ouverte, doublons interdits.</li>';
   };
 
   // Ouvrir l'accès au un magasin "toDoList" de la transaction
@@ -66,47 +67,33 @@ function addData() {
   var objectStoreRequest = objectStore.add(newItem[0]);
   objectStoreRequest.onsuccess = function(event) {
     // Signaler l'ajout de l'enregistrement
-    note.innerHTML += '&lt;li&gt;Enregistrement ajouté.&lt;/li&gt;';
+    note.innerHTML += '<li>Enregistrement ajouté.</li>';
   };
   // Renvoyer la connexion à la base de donnée
   //associée à cette transaction.
   transaction.db;
 };
- </pre>
-
-<div class="note">
-  <p><strong>Note :</strong> pour un exemple fonctionnel complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">application To-do</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple</a>).</p>
-</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('IndexedDB', '#widl-IDBTransaction-db', 'db')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.IDBTransaction.db")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
- <li>Initier une connexion : {{domxref("IDBDatabase")}}</li>
- <li>Utiliser les transactions : {{domxref("IDBTransaction")}}</li>
- <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
- <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li>
- <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li>
- <li>Exemple de référence : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li>
-</ul>
+
+```
+
+> **Note :** pour un exemple fonctionnel complet, voir notre [application To-do](https://github.com/mdn/to-do-notifications/) ([exemple](https://mdn.github.io/to-do-notifications/)).
+
+## Spécifications
+
+| Spécification                                                                | État                         | Commentaires |
+| ---------------------------------------------------------------------------- | ---------------------------- | ------------ |
+| {{SpecName('IndexedDB', '#widl-IDBTransaction-db', 'db')}} | {{Spec2('IndexedDB')}} |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.IDBTransaction.db")}}
+
+## Voir aussi
+
+- [Utiliser IndexedDB](/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB)
+- Initier une connexion : {{domxref("IDBDatabase")}}
+- Utiliser les transactions : {{domxref("IDBTransaction")}}
+- Définir un intervalle de clés : {{domxref("IDBKeyRange")}}
+- Récupérer et modifier les données : {{domxref("IDBObjectStore")}}
+- Utiliser les curseurs {{domxref("IDBCursor")}}
+- Exemple de référence : [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages) ([exemple _live_](https://mdn.github.io/to-do-notifications/)).
diff --git a/files/fr/web/api/idbtransaction/error/index.md b/files/fr/web/api/idbtransaction/error/index.md
index ccbd3c3252..9684817483 100644
--- a/files/fr/web/api/idbtransaction/error/index.md
+++ b/files/fr/web/api/idbtransaction/error/index.md
@@ -10,37 +10,36 @@ tags:
   - Reference
 translation_of: Web/API/IDBTransaction/error
 ---
-<div>{{APIRef("IndexedDB")}}</div>
+{{APIRef("IndexedDB")}}
 
-<p>La propriété <strong><code>IDBTransaction.error</code></strong> de l'interface {{domxref("IDBTransaction")}} renvoie un type d'erreur lorsque la {{domxref("IDBTransaction","transaction","",1)}} échoue.</p>
+La propriété **`IDBTransaction.error`** de l'interface {{domxref("IDBTransaction")}} renvoie un type d'erreur lorsque la {{domxref("IDBTransaction","transaction","",1)}} échoue.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var myError = transaction.error;</pre>
+    var myError = transaction.error;
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>L'{{domxref("DOMError","erreur","",1)}} correspondante qui est un objet <code>DOMError</code>. Il y a différents types d'erreurs possibles : l'erreur obtenue peut ainsi faire référence à l'objet de la requête qui l'a déclenchée ou à un échec de la transaction (par exemple <code> QuotaExceededError</code> ou <code> UnknownError</code>).</p>
+L'{{domxref("DOMError","erreur","",1)}} correspondante qui est un objet `DOMError`. Il y a différents types d'erreurs possibles : l'erreur obtenue peut ainsi faire référence à l'objet de la requête qui l'a déclenchée ou à un échec de la transaction (par exemple `QuotaExceededError` ou `UnknownError`).
 
-<p>Cette propriété vaut <code>null</code> si la transaction n'est pas terminée ou qu'elle est terminée avec succès ou qu'elle a été annulée avec la méthode {{domxref("IDBTransaction.abort","abort")}}.</p>
+Cette propriété vaut `null` si la transaction n'est pas terminée ou qu'elle est terminée avec succès ou qu'elle a été annulée avec la méthode {{domxref("IDBTransaction.abort","abort")}}.
 
-<div class="note">
-  <p><strong>Note :</strong> Dans Chrome 48+ cette propriété renvoie une exception {{domxref ("DOMException")}} parce que le type {{domxref("DOMError")}} a été retiré de la norme DOM.</p>
-</div>
+> **Note :** Dans Chrome 48+ cette propriété renvoie une exception {{domxref ("DOMException")}} parce que le type {{domxref("DOMError")}} a été retiré de la norme DOM.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans le fragment de code suivant, on ouvre une {{domxref("IDBDatabase","connexion","",1)}} à la base de donnée. Sur cette connexion on démarre une {{domxref("IDBTransaction","transaction","",1)}} en lecture/écriture pour {{domxref("IDBObjectStore","accéder au magasin d'objet","",1)}}  <code>"toDoList"</code> et y {{domxref("IDBObjectStore.add","ajouter","",1)}} un enregistrement. Notez également les gestionnaires d'événements {{domxref("IDBTransaction.oncomplete","oncomplete")}} et {{domxref("IDBTransaction.onerror","onerror")}} de la transaction qui affichent sur la page le résultat de la transaction.</p>
+Dans le fragment de code suivant, on ouvre une {{domxref("IDBDatabase","connexion","",1)}} à la base de donnée. Sur cette connexion on démarre une {{domxref("IDBTransaction","transaction","",1)}} en lecture/écriture pour {{domxref("IDBObjectStore","accéder au magasin d'objet","",1)}}  `"toDoList"` et y {{domxref("IDBObjectStore.add","ajouter","",1)}} un enregistrement. Notez également les gestionnaires d'événements {{domxref("IDBTransaction.oncomplete","oncomplete")}} et {{domxref("IDBTransaction.onerror","onerror")}} de la transaction qui affichent sur la page le résultat de la transaction.
 
-<p>La propriété <strong><code>error</code></strong> sert dans le bloc <code>transaction.onerror = function(event) {...}</code> afin d'afficher le type d'erreur qui est survenue.</p>
+La propriété **`error`** sert dans le bloc `transaction.onerror = function(event) {...}` afin d'afficher le type d'erreur qui est survenue.
 
-<pre class="brush: js">//Connexion à la base de données
+```js
+//Connexion à la base de données
 var DBOpenRequest = window.indexedDB.open("toDoList", 4);
 
 DBOpenRequest.onsuccess = function(event) {
-  note.innerHTML += '&lt;li&gt;Connexion établie.&lt;/li&gt;';
+  note.innerHTML += '<li>Connexion établie.</li>';
 
   //Affecter la connexion à la variable db.
   db = DBOpenRequest.result;
@@ -60,11 +59,11 @@ function addData() {
 
   // En cas de succès de l'ouverture de la transaction
   transaction.oncomplete = function(event) {
-    note.innerHTML += '&lt;li&gt;Transaction terminée : modification de la base de données terminée.&lt;/li&gt;';
+    note.innerHTML += '<li>Transaction terminée : modification de la base de données terminée.</li>';
   };
   // En  cas d'échec de l'ouverture de la transaction
   transaction.onerror = function(event) {
-    note.innerHTML += '&lt;li&gt;L\'erreur: "' + transaction.error +'" s\'est produite, échec de la transaction.&lt;/li&gt;';
+    note.innerHTML += '<li>L\'erreur: "' + transaction.error +'" s\'est produite, échec de la transaction.</li>';
   };
 
   // Ouvrir l'accès au un magasin "toDoList" de la transaction
@@ -74,44 +73,30 @@ function addData() {
   var objectStoreRequest = objectStore.add(newItem[0]);
   objectStoreRequest.onsuccess = function(event) {
     // Signaler l'ajout de l'enregistrement
-    note.innerHTML += '&lt;li&gt;Enregistrement ajouté.&lt;/li&gt;';
+    note.innerHTML += '<li>Enregistrement ajouté.</li>';
   };
  };
- </pre>
-
-<div class="note">
-  <p><strong>Note :</strong> pour un exemple fonctionnel complet, voir notre <a href="https://github.com/mdn/to-do-notifications/">application To-do</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple</a>).</p>
-</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('IndexedDB', '#transaction', 'IDBTransaction')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.IDBTransaction.error")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
- <li>Initier une connexion : {{domxref("IDBDatabase")}}</li>
- <li>Utiliser les transactions : {{domxref("IDBTransaction")}}</li>
- <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
- <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li>
- <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li>
- <li>Exemple de référence : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li>
-</ul>
+
+```
+
+> **Note :** pour un exemple fonctionnel complet, voir notre [application To-do](https://github.com/mdn/to-do-notifications/) ([exemple](https://mdn.github.io/to-do-notifications/)).
+
+## Spécifications
+
+| Spécification                                                                    | État                         | Commentaires |
+| -------------------------------------------------------------------------------- | ---------------------------- | ------------ |
+| {{SpecName('IndexedDB', '#transaction', 'IDBTransaction')}} | {{Spec2('IndexedDB')}} |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.IDBTransaction.error")}}
+
+## Voir aussi
+
+- [Utiliser IndexedDB](/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB)
+- Initier une connexion : {{domxref("IDBDatabase")}}
+- Utiliser les transactions : {{domxref("IDBTransaction")}}
+- Définir un intervalle de clés : {{domxref("IDBKeyRange")}}
+- Récupérer et modifier les données : {{domxref("IDBObjectStore")}}
+- Utiliser les curseurs {{domxref("IDBCursor")}}
+- Exemple de référence : [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages) ([exemple _live_](https://mdn.github.io/to-do-notifications/)).
diff --git a/files/fr/web/api/idbtransaction/index.md b/files/fr/web/api/idbtransaction/index.md
index b856029dee..7fc9a104d3 100644
--- a/files/fr/web/api/idbtransaction/index.md
+++ b/files/fr/web/api/idbtransaction/index.md
@@ -9,107 +9,113 @@ tags:
   - Reference
 translation_of: Web/API/IDBTransaction
 ---
-<div>{{APIRef("IndexedDB")}}</div>
+{{APIRef("IndexedDB")}}
 
-<p>L'interface <strong><code>IDBTransaction</code></strong> de l'<a href="/fr/docs/Web/API/API_IndexedDB">API IndexedDB</a> fournit une transaction statique asynchrone vers une base de données grâce à des attributs de gestion d'évènementns. Toutes les opérations de lecture et d'écriture de données sont effectuées au sein de transaction. Il est possible d'utiliser {{domxref("IDBDatabase")}} afin d'initier des transactions puis {{domxref("IDBTransaction")}} afin de paramétrer le mode de la transaction (c'est-à-dire s'il est en lecture seule ou en lecture/écriture) et d'accéder à un objet {{domxref("IDBObjectStore")}} pour réaliser une requête. On peut également utiliser <code>IDBTransaction</code> pour interrompre une requête.</p>
+L'interface **`IDBTransaction`** de l'[API IndexedDB](/fr/docs/Web/API/API_IndexedDB) fournit une transaction statique asynchrone vers une base de données grâce à des attributs de gestion d'évènementns. Toutes les opérations de lecture et d'écriture de données sont effectuées au sein de transaction. Il est possible d'utiliser {{domxref("IDBDatabase")}} afin d'initier des transactions puis {{domxref("IDBTransaction")}} afin de paramétrer le mode de la transaction (c'est-à-dire s'il est en lecture seule ou en lecture/écriture) et d'accéder à un objet {{domxref("IDBObjectStore")}} pour réaliser une requête. On peut également utiliser `IDBTransaction` pour interrompre une requête.
 
-<p>S'il vous garantir une certaine longévité (par exemple si on utilise des données critiques qui ne peuvent pas être recalculées par la suite), il est possible d'écrire le contenu de la transaction sur le disque avant la diffusion de l'évènement <code>complete</code> grâce au mode expérimental non-standard <code>readwriteflush</code> (cf. {{domxref("IDBDatabase.transaction")}}).</p>
+S'il vous garantir une certaine longévité (par exemple si on utilise des données critiques qui ne peuvent pas être recalculées par la suite), il est possible d'écrire le contenu de la transaction sur le disque avant la diffusion de l'évènement `complete` grâce au mode expérimental non-standard `readwriteflush` (cf. {{domxref("IDBDatabase.transaction")}}).
 
-<p>On notera qu'une transaction commence dès sa création et pas lorsque la première requête est lancée. Par exemple :</p>
+On notera qu'une transaction commence dès sa création et pas lorsque la première requête est lancée. Par exemple :
 
-<pre class="brush: js">var trans1 = db.transaction("toto", "readwrite");
+```js
+var trans1 = db.transaction("toto", "readwrite");
 var trans2 = db.transaction("toto", "readwrite");
 trans2.put("2", "clé");
 trans1.put("1", "clé");
-</pre>
+```
 
-<p>Une fois que le code est exécuté, le magasin d'objet contiendra la valeur "2" car la transaction est lancée après la transaction <code>trans1</code>.</p>
+Une fois que le code est exécuté, le magasin d'objet contiendra la valeur "2" car la transaction est lancée après la transaction `trans1`.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Méthodes">Méthodes</h2>
+## Méthodes
 
-<p>Cette interface hérite de {{domxref("EventTarget")}}.</p>
+Cette interface hérite de {{domxref("EventTarget")}}.
 
-<dl>
- <dt>{{domxref("IDBTransaction.abort")}}</dt>
- <dd>Cette méthode annule les modifications apportées aux objets associés à cette transaction. Si la transaction a déjà été interrompue ou est terminée, cette méthode déclenchera un évènement d'erreur.</dd>
- <dt>{{domxref("IDBTransaction.objectStore")}}</dt>
- <dd>Cette méthode renvoie un objet {{domxref("IDBObjectStore")}} qui représente le magasin d'objet associé à cette transaction.</dd>
-</dl>
+- {{domxref("IDBTransaction.abort")}}
+  - : Cette méthode annule les modifications apportées aux objets associés à cette transaction. Si la transaction a déjà été interrompue ou est terminée, cette méthode déclenchera un évènement d'erreur.
+- {{domxref("IDBTransaction.objectStore")}}
+  - : Cette méthode renvoie un objet {{domxref("IDBObjectStore")}} qui représente le magasin d'objet associé à cette transaction.
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<dl>
- <dt>{{domxref("IDBTransaction.db")}} {{readonlyInline}}</dt>
- <dd>La connexion à la base de données associée à cette transaction.</dd>
- <dt>{{domxref("IDBTransaction.mode")}} {{readonlyInline}}</dt>
- <dd>Le mode de la transaction qui définit la façon dont on accède/modifie les données. Les différentes valeurs sont définies ci-après dans la section Constante. Par défaut, la valeur est <code>readonly</code>.</dd>
- <dt>{{domxref("IDBTransaction.objectStoreNames")}} {{readonlyinline}}</dt>
- <dd>Cette propriété est une liste ({{domxref("DOMStringList")}}) des noms des objets {{domxref("IDBObjectStore")}}.</dd>
- <dt>{{domxref("IDBTransaction.error")}} {{readonlyInline}}</dt>
- <dd>Cette propriété renvoie le type de l'erreur qui se produit lorsque la transaction infructueuse. Cette propriété vaut <code>null</code> si la transaction n'est pas finie, est finie et validée correctement ou a été cloturée avec la fonction{{domxref("IDBTransaction.abort")}}.</dd>
-</dl>
+- {{domxref("IDBTransaction.db")}} {{readonlyInline}}
+  - : La connexion à la base de données associée à cette transaction.
+- {{domxref("IDBTransaction.mode")}} {{readonlyInline}}
+  - : Le mode de la transaction qui définit la façon dont on accède/modifie les données. Les différentes valeurs sont définies ci-après dans la section Constante. Par défaut, la valeur est `readonly`.
+- {{domxref("IDBTransaction.objectStoreNames")}} {{readonlyinline}}
+  - : Cette propriété est une liste ({{domxref("DOMStringList")}}) des noms des objets {{domxref("IDBObjectStore")}}.
+- {{domxref("IDBTransaction.error")}} {{readonlyInline}}
+  - : Cette propriété renvoie le type de l'erreur qui se produit lorsque la transaction infructueuse. Cette propriété vaut `null` si la transaction n'est pas finie, est finie et validée correctement ou a été cloturée avec la fonction{{domxref("IDBTransaction.abort")}}.
 
-<h3 id="Gestionnaires_d'évènements">Gestionnaires d'évènements</h3>
+### Gestionnaires d'évènements
 
-<dl>
- <dt>{{domxref("IDBTransaction.onabort")}} {{readonlyInline}}</dt>
- <dd>Ce gestionnaire permet de gérer l'évènement <code>abort</code> qui est déclenché lorsque la transaction a été interrompue.</dd>
- <dt>{{domxref("IDBTransaction.oncomplete")}} {{readonlyInline}}</dt>
- <dd>Ce gestionnaire permet de gérer l'évènement <code>complete</code> qui est  déclenché lorsque la transaction se finit correctement.</dd>
- <dt>{{domxref("IDBTransaction.onerror")}} {{readonlyInline}}</dt>
- <dd>Ce gestionnaire permet de gérer l'évènement <code>error</code> qui est déclenché lorsqu'une erreur empêche la transaction de se finir correctement.</dd>
-</dl>
+- {{domxref("IDBTransaction.onabort")}} {{readonlyInline}}
+  - : Ce gestionnaire permet de gérer l'évènement `abort` qui est déclenché lorsque la transaction a été interrompue.
+- {{domxref("IDBTransaction.oncomplete")}} {{readonlyInline}}
+  - : Ce gestionnaire permet de gérer l'évènement `complete` qui est  déclenché lorsque la transaction se finit correctement.
+- {{domxref("IDBTransaction.onerror")}} {{readonlyInline}}
+  - : Ce gestionnaire permet de gérer l'évènement `error` qui est déclenché lorsqu'une erreur empêche la transaction de se finir correctement.
 
-<h2 id="Les_différents_modes">Les différents modes</h2>
+## Les différents modes
 
-<p>Une transaction peut s'effectuer dans l'un de ces modes :</p>
+Une transaction peut s'effectuer dans l'un de ces modes :
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Valeur</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>
-    <p>"readonly"</p>
-
-    <p>(0 dans Chrome)</p>
-   </td>
-   <td>Ce mode permet de lire les données mais pas de les modifier.</td>
-  </tr>
-  <tr>
-   <td>
-    <p>"readwrite"</p>
-
-    <p>(1 dans Chrome)</p>
-   </td>
-   <td>Ce mode permet de lire, d'écrire et de modifier les données du magasin d'objets.</td>
-  </tr>
-  <tr>
-   <td>
-    <p>"versionchange"</p>
-
-    <p>(2 dans Chrome)</p>
-   </td>
-   <td>Ce mode permet d'effectuer toutes les opérations, y compris l'ajout ou la suppression de magasins d'objets et d'index. Ce mode doit être utilisé pour mettre à jour le numéro de version utilisé par les transactions démarées avec la méthode <a href="/fr/docs/Web/API/IDBDatabase"><code>setVersion()</code></a> de <code><a href="/fr/docs/Web/API/IDBDatabase">IDBDatabase</a></code>. Les transactions lancées dans ce mode ne peuvent pas être lancées en même temps que d'autres transactions. Ces transactions sont parfois qualifiées comme « transactions de mise à jour ».</td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th scope="col">Valeur</th>
+      <th scope="col">Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        <p>"readonly"</p>
+        <p>(0 dans Chrome)</p>
+      </td>
+      <td>Ce mode permet de lire les données mais pas de les modifier.</td>
+    </tr>
+    <tr>
+      <td>
+        <p>"readwrite"</p>
+        <p>(1 dans Chrome)</p>
+      </td>
+      <td>
+        Ce mode permet de lire, d'écrire et de modifier les données du magasin
+        d'objets.
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <p>"versionchange"</p>
+        <p>(2 dans Chrome)</p>
+      </td>
+      <td>
+        Ce mode permet d'effectuer toutes les opérations, y compris l'ajout ou
+        la suppression de magasins d'objets et d'index. Ce mode doit être
+        utilisé pour mettre à jour le numéro de version utilisé par les
+        transactions démarées avec la méthode
+        <a href="/fr/docs/Web/API/IDBDatabase"><code>setVersion()</code></a> de
+        <code><a href="/fr/docs/Web/API/IDBDatabase">IDBDatabase</a></code
+        >. Les transactions lancées dans ce mode ne peuvent pas être lancées en
+        même temps que d'autres transactions. Ces transactions sont parfois
+        qualifiées comme « transactions de mise à jour ».
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans l'exemple qui suit, on ouvre une transaction en lecture/écriture sur la base de données et on ajoute des données dans le magasin d'objet. On notera également l'utilisation des gestionnaires d'évènements attachés à la transaction qui permettent d'indiquer la réussite ou l'échec de l'ouverture de la transaction. Pour un exemple complet, voir <a href="https://github.com/mdn/to-do-notifications/">l'application de notifications To-do</a> (<a href="https://mdn.github.io/to-do-notifications/">voir également la démonstration <em>live</em></a>)</p>
+Dans l'exemple qui suit, on ouvre une transaction en lecture/écriture sur la base de données et on ajoute des données dans le magasin d'objet. On notera également l'utilisation des gestionnaires d'évènements attachés à la transaction qui permettent d'indiquer la réussite ou l'échec de l'ouverture de la transaction. Pour un exemple complet, voir [l'application de notifications To-do](https://github.com/mdn/to-do-notifications/) ([voir également la démonstration _live_](https://mdn.github.io/to-do-notifications/))
 
-<pre class="brush: js">// On commence par ouvrir la base de données
+```js
+// On commence par ouvrir la base de données
 var DBOpenRequest = window.indexedDB.open("toDoList", 4);
 
 DBOpenRequest.onsuccess = function(event) {
-  note.innerHTML += '&lt;li&gt;Initialisation de la base.&lt;/li&gt;';
+  note.innerHTML += '<li>Initialisation de la base.</li>';
 
   // On enregistre le résultat de l'ouverture
   // dans la variable db afin de l'utiliser
@@ -133,12 +139,12 @@ function addData() {
 
   // On indique le succès de la transaction
   transaction.oncomplete = function(event) {
-    note.innerHTML += '&lt;li&gt;Transaction terminée : modification finie.&lt;/li&gt;';
+    note.innerHTML += '<li>Transaction terminée : modification finie.</li>';
   };
 
 
   transaction.onerror = function(event) {
-    note.innerHTML += '&lt;li&gt;Transaction non-ouverte à cause d'une erreur. Les doublons ne sont pas autorisés.&lt;/li&gt;';
+    note.innerHTML += '<li>Transaction non-ouverte à cause d'une erreur. Les doublons ne sont pas autorisés.</li>';
   };
 
   // On crée un magasin d'objet pour la transaction
@@ -150,39 +156,27 @@ function addData() {
   objectStoreRequest.onsuccess = function(event) {
     // On indique le succès de l'ajout de l'objet
     // dans la base de données
-    note.innerHTML += '&lt;li&gt;Un nouvel élément a été ajouté dans la base de données.&lt;/li&gt;';
+    note.innerHTML += '<li>Un nouvel élément a été ajouté dans la base de données.</li>';
   };
-};</pre>
+};
+```
 
-<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('IndexedDB', '#transaction', 'IDBTransaction')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                    | État                         | Commentaires        |
+| -------------------------------------------------------------------------------- | ---------------------------- | ------------------- |
+| {{SpecName('IndexedDB', '#transaction', 'IDBTransaction')}} | {{Spec2('IndexedDB')}} | Définition initiale |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.IDBTransaction")}}</p>
+{{Compat("api.IDBTransaction")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
- <li>Initier une connexion : {{domxref("IDBDatabase")}}</li>
- <li>Utiliser les transactions : {{domxref("IDBTransaction")}}</li>
- <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
- <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li>
- <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li>
- <li>Exemple de référence : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li>
-</ul>
+- [Utiliser IndexedDB](/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB)
+- Initier une connexion : {{domxref("IDBDatabase")}}
+- Utiliser les transactions : {{domxref("IDBTransaction")}}
+- Définir un intervalle de clés : {{domxref("IDBKeyRange")}}
+- Récupérer et modifier les données : {{domxref("IDBObjectStore")}}
+- Utiliser les curseurs {{domxref("IDBCursor")}}
+- Exemple de référence : [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages) ([exemple _live_](https://mdn.github.io/to-do-notifications/)).
diff --git a/files/fr/web/api/idbtransaction/mode/index.md b/files/fr/web/api/idbtransaction/mode/index.md
index 2cc9c693bc..82da774e36 100644
--- a/files/fr/web/api/idbtransaction/mode/index.md
+++ b/files/fr/web/api/idbtransaction/mode/index.md
@@ -9,52 +9,36 @@ tags:
   - Reference
 translation_of: Web/API/IDBTransaction/mode
 ---
-<div>{{APIRef("IndexedDB")}}</div>
+{{APIRef("IndexedDB")}}
 
-<p>La propriété <strong><code>mode</code></strong> de l'interface {{domxref("IDBTransaction")}} renvoie le mode d'accès aux données des magasins d'objet pendant la transaction (autrement dit, s'agit-il d'une transaction en lecture seule ou d'un accès en écriture ?). La valeur par défaut est <code>readonly</code>.</p>
+La propriété **`mode`** de l'interface {{domxref("IDBTransaction")}} renvoie le mode d'accès aux données des magasins d'objet pendant la transaction (autrement dit, s'agit-il d'une transaction en lecture seule ou d'un accès en écriture ?). La valeur par défaut est `readonly`.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var <em>modeCourant</em> = <em>IDBTransaction</em>.mode;</pre>
+    var modeCourant = IDBTransaction.mode;
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>Un objet {{domxref("IDBTransactionMode")}} qui définit le mode d'accès aux données des magasins d'objet :</p>
+Un objet {{domxref("IDBTransactionMode")}} qui définit le mode d'accès aux données des magasins d'objet :
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Valeur</th>
-   <th scope="col">Signification</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>readonly</code></td>
-   <td>Lecture seule : on peut lire (consulter) les données mais on ne peut pas les modifier.</td>
-  </tr>
-  <tr>
-   <td><code>readwrite</code></td>
-   <td>Lecture et écriture : on peut lire et écrire (modifier) des données dans les magasins d'objet.</td>
-  </tr>
-  <tr>
-   <td><code>versionchange</code></td>
-   <td>Toutes les opérations peuvent être effectuées, y compris celles qui suppriment ou créent des magasins d'objets et des index. Ce mode doit être utilisé lorsqu'on souhaite mettre à jour le numéro de version pour les transactions qui démarrent avec {{domxref("IDBDatabase.setVersion()")}}. Les transactions effectuées dans ce mode ne peuvent pas être exécutées de façon concurrente avec les autres transactions. Les transactions effectuées dans ce mode sont parfois appelées transactions de mise à jour (<em>upgrade transactions</em>).</td>
-  </tr>
- </tbody>
-</table>
+| Valeur          | Signification                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `readonly`      | Lecture seule : on peut lire (consulter) les données mais on ne peut pas les modifier.                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| `readwrite`     | Lecture et écriture : on peut lire et écrire (modifier) des données dans les magasins d'objet.                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| `versionchange` | Toutes les opérations peuvent être effectuées, y compris celles qui suppriment ou créent des magasins d'objets et des index. Ce mode doit être utilisé lorsqu'on souhaite mettre à jour le numéro de version pour les transactions qui démarrent avec {{domxref("IDBDatabase.setVersion()")}}. Les transactions effectuées dans ce mode ne peuvent pas être exécutées de façon concurrente avec les autres transactions. Les transactions effectuées dans ce mode sont parfois appelées transactions de mise à jour (_upgrade transactions_). |
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans le fragment de code suivant, on ouvre une transaction en lecture/écriture sur la base de données et on ajoute des données au magasin d'objets. On notera que les fonctions attachées aux gestionnaires d'évènement de la transaction permettent de rapporter des informations en cas de succès ou d'échec de la transaction. Enfin, on affiche le mode de la transaction dans la console grâce à la propriété <code>mode</code>. Pour un exemple complet, se référer à l'<a href="https://github.com/mdn/to-do-notifications/">exemple d'application To-do</a> (cf. <a href="https://mdn.github.io/to-do-notifications/">la démonstration</a>).</p>
+Dans le fragment de code suivant, on ouvre une transaction en lecture/écriture sur la base de données et on ajoute des données au magasin d'objets. On notera que les fonctions attachées aux gestionnaires d'évènement de la transaction permettent de rapporter des informations en cas de succès ou d'échec de la transaction. Enfin, on affiche le mode de la transaction dans la console grâce à la propriété `mode`. Pour un exemple complet, se référer à l'[exemple d'application To-do](https://github.com/mdn/to-do-notifications/) (cf. [la démonstration](https://mdn.github.io/to-do-notifications/)).
 
-<pre class="brush: js">// On ouvre la base de données
+```js
+// On ouvre la base de données
 var DBOpenRequest = window.indexedDB.open("toDoList", 4);
 
 DBOpenRequest.onsuccess = function(event) {
-  note.innerHTML += '&lt;li&gt;Initialisation de la base de données.&lt;/li&gt;';
+  note.innerHTML += '<li>Initialisation de la base de données.</li>';
 
   // On enregistre le résultat de l'ouverture dans la variable
   // db utilisée ensuite.
@@ -76,11 +60,11 @@ function addData() {
 
   // On gère le succès ou l'échec de la transaction
   transaction.oncomplete = function(event) {
-    note.innerHTML += '&lt;li&gt;Transaction terminée : modifications appliquées.&lt;/li&gt;';
+    note.innerHTML += '<li>Transaction terminée : modifications appliquées.</li>';
   };
 
   transaction.onerror = function(event) {
-    note.innerHTML += '&lt;li&gt;Transaction non-ouverte à cause d'une erreur (duplication d'objet interdite).&lt;/li&gt;';
+    note.innerHTML += '<li>Transaction non-ouverte à cause d'une erreur (duplication d'objet interdite).</li>';
   };
 
   // On crée un magasin d'objets pour la transaction
@@ -92,43 +76,31 @@ function addData() {
   objectStoreRequest.onsuccess = function(event) {
     // On indique le succès de l'opération pour ajouter
     // l'objet dans la base de données
-    note.innerHTML += '&lt;li&gt;Nouvel objet ajouté à la base de données.&lt;/li&gt;';
+    note.innerHTML += '<li>Nouvel objet ajouté à la base de données.</li>';
   };
 
   // On renvoie le mode de la transaction qui était ouverte
   // (ce devrait être "readwrite")
   transaction.mode;
-};</pre>
-
-<h2 id="Spécification">Spécification</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('IndexedDB', '#widl-IDBTransaction-mode', 'mode')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.IDBTransaction.mode")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
- <li>Initier une connexion : {{domxref("IDBDatabase")}}</li>
- <li>Utiliser les transactions : {{domxref("IDBTransaction")}}</li>
- <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
- <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li>
- <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li>
- <li>Exemple de référence : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li>
-</ul>
+};
+```
+
+## Spécification
+
+| Spécification                                                                        | État                         | Commentaires |
+| ------------------------------------------------------------------------------------ | ---------------------------- | ------------ |
+| {{SpecName('IndexedDB', '#widl-IDBTransaction-mode', 'mode')}} | {{Spec2('IndexedDB')}} |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.IDBTransaction.mode")}}
+
+## Voir aussi
+
+- [Utiliser IndexedDB](/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB)
+- Initier une connexion : {{domxref("IDBDatabase")}}
+- Utiliser les transactions : {{domxref("IDBTransaction")}}
+- Définir un intervalle de clés : {{domxref("IDBKeyRange")}}
+- Récupérer et modifier les données : {{domxref("IDBObjectStore")}}
+- Utiliser les curseurs {{domxref("IDBCursor")}}
+- Exemple de référence : [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages) ([exemple _live_](https://mdn.github.io/to-do-notifications/)).
diff --git a/files/fr/web/api/idbtransaction/objectstore/index.md b/files/fr/web/api/idbtransaction/objectstore/index.md
index 61fa2e0d56..2ccc74eb6c 100644
--- a/files/fr/web/api/idbtransaction/objectstore/index.md
+++ b/files/fr/web/api/idbtransaction/objectstore/index.md
@@ -8,49 +8,48 @@ tags:
   - Reference
 translation_of: Web/API/IDBTransaction/objectStore
 ---
-<div>{{APIRef("IndexedDB")}}</div>
+{{APIRef("IndexedDB")}}
 
-<p>La méthode <strong><code>objectStore()</code></strong>, rattachée à l'interface {{domxref("IDBTransaction")}}, renvoie l'accès à un des magasins d'objets liés à la transation sous la forme d'un objet {{domxref("IDBObjectStore")}}.</p>
+La méthode **`objectStore()`**, rattachée à l'interface {{domxref("IDBTransaction")}}, renvoie l'accès à un des magasins d'objets liés à la transation sous la forme d'un objet {{domxref("IDBObjectStore")}}.
 
-<p>Si cette méthode est appelée plusieurs fois sur la même transaction et avec le même nom de magasin, elle renverra la même instance de  {{domxref("IDBObjectStore")}}. Si cette méthode est appelée sur une autre transaction, elle renverra une instance différente.</p>
+Si cette méthode est appelée plusieurs fois sur la même transaction et avec le même nom de magasin, elle renverra la même instance de  {{domxref("IDBObjectStore")}}. Si cette méthode est appelée sur une autre transaction, elle renverra une instance différente.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">var objectStore = transaction.objectStore(nom);</pre>
+```js
+var objectStore = transaction.objectStore(nom);
+```
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>nom</code></dt>
- <dd>Le nom du magasin d'objets auquel on veut accéder.</dd>
-</dl>
+- `nom`
+  - : Le nom du magasin d'objets auquel on veut accéder.
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Un objet {{domxref("IDBObjectStore")}} qui permet d'accéder au magasin d'objets.</p>
+Un objet {{domxref("IDBObjectStore")}} qui permet d'accéder au magasin d'objets.
 
-<h2 id="Exceptions">Exceptions</h2>
+## Exceptions
 
-<dl>
- <dt><code>NotFoundError</code></dt>
- <dd>Cette exception {{domxref("DOMException")}} est levée si le magasin d'objets demandé n'a pas été trouvé sur la transaction.</dd>
- <dt><code>InvalidStateError</code></dt>
- <dd>Cette exception {{domxref("DOMException")}} est levée si la transaction est terminée ou si la demande a été faite sur un objet source qui a été supprimé ou retiré.</dd>
-</dl>
+- `NotFoundError`
+  - : Cette exception {{domxref("DOMException")}} est levée si le magasin d'objets demandé n'a pas été trouvé sur la transaction.
+- `InvalidStateError`
+  - : Cette exception {{domxref("DOMException")}} est levée si la transaction est terminée ou si la demande a été faite sur un objet source qui a été supprimé ou retiré.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Dans le code qui suit, on ouvre une connexion à la base de données. Sur cette connexion, on démarre une transaction (cf.  {{domxref("IDBTransaction")}}) en lecture/écriture afin d'accéder au magasin d'objets <code>"toDoList"</code> pour y ajouter un enregistrement (via la méthode {{domxref("IDBObjectStore.add")}}). On notera également l'utilisation des gestionnaires d'événement {{domxref("IDBTransaction.oncomplete")}} et {{domxref("IDBTransaction.onerror")}} de la transaction qui permettent d'afficher la résultat de la transaction sur la page.</p>
+Dans le code qui suit, on ouvre une connexion à la base de données. Sur cette connexion, on démarre une transaction (cf.  {{domxref("IDBTransaction")}}) en lecture/écriture afin d'accéder au magasin d'objets `"toDoList"` pour y ajouter un enregistrement (via la méthode {{domxref("IDBObjectStore.add")}}). On notera également l'utilisation des gestionnaires d'événement {{domxref("IDBTransaction.oncomplete")}} et {{domxref("IDBTransaction.onerror")}} de la transaction qui permettent d'afficher la résultat de la transaction sur la page.
 
-<p>La méthode <strong><code>objectStore()</code></strong> permet d'accéder au magasin d'objets <code>"toDoList"</code>.</p>
+La méthode **`objectStore()`** permet d'accéder au magasin d'objets `"toDoList"`.
 
-<pre class="brush: js">// Connexion à la base de données
+```js
+// Connexion à la base de données
 var DBOpenRequest = window.indexedDB.open("toDoList", 4);
 
 DBOpenRequest.onsuccess = function(event) {
-  note.innerHTML += '&lt;li&gt;Connexion établie.&lt;/li&gt;';
+  note.innerHTML += '<li>Connexion établie.</li>';
 
   // On affecte la connexion à la variable db.
   db = DBOpenRequest.result;
@@ -71,13 +70,13 @@ function addData() {
   // On utilise oncomplete en cas de succès de
   // l'ouverture de la transaction
   transaction.oncomplete = function(event) {
-    note.innerHTML += '&lt;li&gt;Transaction terminée : modification de la base de données OK.&lt;/li&gt;';
+    note.innerHTML += '<li>Transaction terminée : modification de la base de données OK.</li>';
   };
 
   // En cas d'échec de l'ouverture, on utilisera
   // le gestionnaire onerror
   transaction.onerror = function(event) {
-    note.innerHTML += '&lt;li&gt;L\'erreur: "' + transaction.error +'" s\'est produite, échec de la transaction.&lt;/li&gt;';
+    note.innerHTML += '<li>L\'erreur: "' + transaction.error +'" s\'est produite, échec de la transaction.</li>';
   };
 
   // On ouvre un magasin d'objets sur la transaction
@@ -88,44 +87,29 @@ function addData() {
   var objectStoreRequest = objectStore.add(newItem[0]);
   objectStoreRequest.onsuccess = function(event) {
     // et on signale l'ajout de l'enregistrement
-    note.innerHTML += '&lt;li&gt;Enregistrement ajouté.&lt;/li&gt;';
+    note.innerHTML += '<li>Enregistrement ajouté.</li>';
   };
 };
-</pre>
-
-<div class="note">
-  <p><strong>Note :</strong> Pour un exemple fonctionnel complet, voir notre application <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">l'exemple <em>live</em> est disponible ici</a>).</p>
-</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('IndexedDB', '#widl-IDBTransaction-objectStore-IDBObjectStore-DOMString-name', 'objectStore()')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.IDBTransaction.objectStore")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Manipuler IndexedDB</a></li>
- <li>Démarrer des transactions : {{domxref("IDBDatabase")}}</li>
- <li>Manipuler des transactions : {{domxref("IDBTransaction")}}</li>
- <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
- <li>Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}</li>
- <li>Manipuler des curseurs : {{domxref("IDBCursor")}}</li>
- <li>Exemple de référence pour IndexedDB : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a></li>
-</ul>
+```
+
+> **Note :** Pour un exemple fonctionnel complet, voir notre application [To-do Notifications](https://github.com/mdn/to-do-notifications/) ([l'exemple _live_ est disponible ici](https://mdn.github.io/to-do-notifications/)).
+
+## Spécifications
+
+| Spécification                                                                                                                                    | État                         | Commentaires |
+| ------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------ |
+| {{SpecName('IndexedDB', '#widl-IDBTransaction-objectStore-IDBObjectStore-DOMString-name', 'objectStore()')}} | {{Spec2('IndexedDB')}} |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.IDBTransaction.objectStore")}}
+
+## Voir aussi
+
+- [Manipuler IndexedDB](/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB)
+- Démarrer des transactions : {{domxref("IDBDatabase")}}
+- Manipuler des transactions : {{domxref("IDBTransaction")}}
+- Définir un intervalle de clés : {{domxref("IDBKeyRange")}}
+- Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}
+- Manipuler des curseurs : {{domxref("IDBCursor")}}
+- Exemple de référence pour IndexedDB : [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages)
diff --git a/files/fr/web/api/idbtransaction/objectstorenames/index.md b/files/fr/web/api/idbtransaction/objectstorenames/index.md
index 9c707e100a..6525fd7eb3 100644
--- a/files/fr/web/api/idbtransaction/objectstorenames/index.md
+++ b/files/fr/web/api/idbtransaction/objectstorenames/index.md
@@ -8,47 +8,34 @@ tags:
   - Reference
 translation_of: Web/API/IDBTransaction/ObjectStoreNames
 ---
-<div>{{APIRef("IndexedDB")}}{{SeeCompatTable}}</div>
+{{APIRef("IndexedDB")}}{{SeeCompatTable}}
 
-<p>La propriété <strong><code>objectStoreNames</code></strong> de l'interface {{domxref("IDBTransaction")}} renvoie la {{domxref("DOMStringList","liste")}} des noms des magasins d'objets de la {{domxref("IDBTransaction","transaction")}} .</p>
+La propriété **`objectStoreNames`** de l'interface {{domxref("IDBTransaction")}} renvoie la {{domxref("DOMStringList","liste")}} des noms des magasins d'objets de la {{domxref("IDBTransaction","transaction")}} .
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var maBaseDeDonnees = transactionObj.objectStoreNames;</pre>
+    var maBaseDeDonnees = transactionObj.objectStoreNames;
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Une liste {{domxref("DOMStringList")}} contenant les noms des magasins d'objets liés à la transaction ({{domxref("IDBTransaction")}}).</p>
+Une liste {{domxref("DOMStringList")}} contenant les noms des magasins d'objets liés à la transaction ({{domxref("IDBTransaction")}}).
 
-<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('IndexedDB2', '#dom-idbtransaction-objectstorenames', 'db')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                    | État                         | Commentaires |
+| ------------------------------------------------------------------------------------------------ | ---------------------------- | ------------ |
+| {{SpecName('IndexedDB2', '#dom-idbtransaction-objectstorenames', 'db')}} | {{Spec2('IndexedDB')}} |              |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.IDBTransaction.objectStoreNames")}}</p>
+{{Compat("api.IDBTransaction.objectStoreNames")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Manipuler IndexedDB</a></li>
- <li>Démarrer des transactions : {{domxref("IDBDatabase")}}</li>
- <li>Manipuler des transactions : {{domxref("IDBTransaction")}}</li>
- <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
- <li>Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}</li>
- <li>Manipuler des curseurs : {{domxref("IDBCursor")}}</li>
- <li>Exemple de référence pour IndexedDB : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a></li>
-</ul>
+- [Manipuler IndexedDB](/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB)
+- Démarrer des transactions : {{domxref("IDBDatabase")}}
+- Manipuler des transactions : {{domxref("IDBTransaction")}}
+- Définir un intervalle de clés : {{domxref("IDBKeyRange")}}
+- Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}
+- Manipuler des curseurs : {{domxref("IDBCursor")}}
+- Exemple de référence pour IndexedDB : [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages)
diff --git a/files/fr/web/api/idbtransaction/onabort/index.md b/files/fr/web/api/idbtransaction/onabort/index.md
index 22ae924a6f..6275cd3135 100644
--- a/files/fr/web/api/idbtransaction/onabort/index.md
+++ b/files/fr/web/api/idbtransaction/onabort/index.md
@@ -8,27 +8,30 @@ tags:
   - Reference
 translation_of: Web/API/IDBTransaction/onabort
 ---
-<div>{{APIRef("IndexedDB")}}</div>
+{{APIRef("IndexedDB")}}
 
-<p>Le gestionnaire d'événement <strong><code>onabort</code></strong>, rattaché à l'interface {{domxref("IDBTransaction")}}, s'exécute au déclenchement d'un événement <code><a href="/fr/docs/Web/Events/abort">abort</a></code>, lorsque la transaction a été annulée avec la méthode {{domxref("IDBTransaction.abort")}}.</p>
+Le gestionnaire d'événement **`onabort`**, rattaché à l'interface {{domxref("IDBTransaction")}}, s'exécute au déclenchement d'un événement [`abort`](/fr/docs/Web/Events/abort), lorsque la transaction a été annulée avec la méthode {{domxref("IDBTransaction.abort")}}.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">transaction.onabort = function() { ... };</pre>
+```js
+transaction.onabort = function() { ... };
+```
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Dans le code suivant, on ouvre une connexion à la base de données. Sur cette connexion, on démarre une transaction avec {{domxref("IDBTransaction")}} en lecture/écriture pour accéder au magasin d'objets intitulé <code>"toDoList"</code> et y ajouter un enregistrement (grâce à la méthode {{domxref("IDBObjectStore.add")}}). On notera également l'utilisation des gestionnaires d'événement {{domxref("IDBTransaction.oncomplete")}} et {{domxref("IDBTransaction.onerror")}} qui affichent le résultat de la transaction sur la page.</p>
+Dans le code suivant, on ouvre une connexion à la base de données. Sur cette connexion, on démarre une transaction avec {{domxref("IDBTransaction")}} en lecture/écriture pour accéder au magasin d'objets intitulé `"toDoList"` et y ajouter un enregistrement (grâce à la méthode {{domxref("IDBObjectStore.add")}}). On notera également l'utilisation des gestionnaires d'événement {{domxref("IDBTransaction.oncomplete")}} et {{domxref("IDBTransaction.onerror")}} qui affichent le résultat de la transaction sur la page.
 
-<p>On voit ici le gestionnaire d'événement <strong><code>onabort</code></strong> qui est utilisé pour afficher un message sur la console du développeur.</p>
+On voit ici le gestionnaire d'événement **`onabort`** qui est utilisé pour afficher un message sur la console du développeur.
 
-<pre class="brush: js">// Connexion à la base de données
+```js
+// Connexion à la base de données
 var DBOpenRequest = window.indexedDB.open("toDoList", 4);
 
 DBOpenRequest.onsuccess = function(event) {
-  note.innerHTML += '&lt;li&gt;Connexion établie.&lt;/li&gt;';
+  note.innerHTML += '<li>Connexion établie.</li>';
 
   // On affecte la connexion à la variable db.
   db = DBOpenRequest.result;
@@ -49,13 +52,13 @@ function addData() {
   // On utilise oncomplete en cas de succès de
   // l'ouverture de la transaction
   transaction.oncomplete = function(event) {
-    note.innerHTML += '&lt;li&gt;Transaction terminée : modification de la base de données OK.&lt;/li&gt;';
+    note.innerHTML += '<li>Transaction terminée : modification de la base de données OK.</li>';
   };
 
   // En cas d'échec de l'ouverture, ce sera
   // le gestionnaire onerror qui interviendra
   transaction.onerror = function(event) {
-    note.innerHTML += '&lt;li&gt;L\'erreur: "' + transaction.error +'" s\'est produite, échec de la transaction.&lt;/li&gt;';
+    note.innerHTML += '<li>L\'erreur: "' + transaction.error +'" s\'est produite, échec de la transaction.</li>';
   };
 
   // On ouvre l'accès au un magasin "toDoList"
@@ -66,7 +69,7 @@ function addData() {
   var objectStoreRequest = objectStore.add(newItem[0]);
   objectStoreRequest.onsuccess = function(event) {
     // On signale l'ajout de l'enregistrement
-    note.innerHTML += '&lt;li&gt;Enregistrement ajouté.&lt;/li&gt;';
+    note.innerHTML += '<li>Enregistrement ajouté.</li>';
   };
 
   transaction.onabort = function() {
@@ -77,41 +80,27 @@ function addData() {
 
   // On abandonne la transaction qu'on vient de faire
   transaction.abort();
-};</pre>
-
-<div class="note">
-  <p><strong>Note :</strong> Pour un exemple fonctionnel complet, voir notre application <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em> disponible</a>).</p>
-</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('IndexedDB', '#widl-IDBTransaction-onabort', 'onabort')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.IDBTransaction.onabort")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Manipuler IndexedDB</a></li>
- <li>Démarrer des transactions : {{domxref("IDBDatabase")}}</li>
- <li>Manipuler des transactions : {{domxref("IDBTransaction")}}</li>
- <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
- <li>Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}</li>
- <li>Manipuler des curseurs : {{domxref("IDBCursor")}}</li>
- <li>Exemple de référence pour IndexedDB : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a></li>
-</ul>
+};
+```
+
+> **Note :** Pour un exemple fonctionnel complet, voir notre application [To-do Notifications](https://github.com/mdn/to-do-notifications/) ([exemple _live_ disponible](https://mdn.github.io/to-do-notifications/)).
+
+## Spécifications
+
+| Spécification                                                                                | État                         | Commentaires |
+| -------------------------------------------------------------------------------------------- | ---------------------------- | ------------ |
+| {{SpecName('IndexedDB', '#widl-IDBTransaction-onabort', 'onabort')}} | {{Spec2('IndexedDB')}} |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.IDBTransaction.onabort")}}
+
+## Voir aussi
+
+- [Manipuler IndexedDB](/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB)
+- Démarrer des transactions : {{domxref("IDBDatabase")}}
+- Manipuler des transactions : {{domxref("IDBTransaction")}}
+- Définir un intervalle de clés : {{domxref("IDBKeyRange")}}
+- Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}
+- Manipuler des curseurs : {{domxref("IDBCursor")}}
+- Exemple de référence pour IndexedDB : [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages)
diff --git a/files/fr/web/api/idbtransaction/oncomplete/index.md b/files/fr/web/api/idbtransaction/oncomplete/index.md
index 2c92b816b8..c5d970cdf0 100644
--- a/files/fr/web/api/idbtransaction/oncomplete/index.md
+++ b/files/fr/web/api/idbtransaction/oncomplete/index.md
@@ -8,109 +8,94 @@ tags:
   - Reference
 translation_of: Web/API/IDBTransaction/oncomplete
 ---
-<div>{{ APIRef("IndexedDB") }}</div>
-
-<p>Le gestionnaire d'événement <strong><code>oncomplete</code></strong>, rattaché à l'interface {{domxref("IDBTransaction")}}, s'exécute au déclenchement d'un événement <code><a href="/fr/docs/Web/Events/complete">complete</a></code> lorsque la transaction se termine avec succès.</p>
-
-<div class="note">
-<p><strong>Note :</strong> Depuis Firefox 40, les transactions IndexedDB diminuent en efficacité pour gagner en efficience (voir {{Bug ( "1112702")}}). Auparavant, dans une transaction en <code><a href="#const_read_write">readwrite</a></code>, l'événement <code>complete</code> était déclenché seulement lorsque toutes les données étaient écrites sur le disque. Maintenant, l'événement <code>complete</code> est déclenché après que l'OS ai envoyé l'ordre d'écrire les données, mais potentiellement avant qu'elles aient été écrites sur le disque. L'événement <code>complete</code> peut ainsi être déclenché plus rapidement qu'auparavant. Cependant, il existe une chance infime pour que l'ensemble de la transaction soit perdue si le système d'exploitation plante ou s'il y a une perte de courant avant que les données aient été écrites sur le disque. Étant donné que ces événements catastrophiques sont rares, la plupart des utilisateurs ne devraient pas avoir à s'en préoccuper davantage.</p>
-
-<div class="warning">
-  <p><strong>Attention :</strong> Si vous devez vous assurer de l'efficacité d'une transaction pour une raison quelconque (par exemple, vous stockez des données critiques qui ne peuvent être recalculé plus tard), vous pouvez forcer l'enregistrement complet sur disque avant de déclencher l'événement <code>complete</code> en utilisant le mode <code>readwriteflush</code> (non-standard) expérimental (cf. {{domxref("IDBDatabase.transaction")}} ). Ce mode expérimentale ne peut être utilisé que si la préférence<code> dom.indexedDB.experimental </code> pref est réglée sur <code> true</code> dans <code> about: config</code>.</p>
-</div>
-
-<p>{{AvailableInWorkers}}</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="brush: js">transaction.oncomplete = function() { ... };</pre>
-
-<h2 id="Exemple">Exemple</h2>
-
-<p>Dans le code suivant, on ouvre une connexion à la base de donnée. Ensuite, sur cette connexion, on démarre une transaction (avec  {{domxref("IDBTransaction")}}) en lecture/écriture pour accéder au magasin d'objet <code>"toDoList"</code> et y ajouter un enregistrement grâce à la méthode {{domxref("IDBObjectStore.add")}}. On notera également la façon dont le gestionnaire d'événement {{domxref("IDBTransaction.onerror")}} est utilisé dans la transaction.</p>
-
-<p>Le gestionnaires d'événement <strong><code>oncomplete</code></strong> de la transaction permet d'afficher un message de succès sur la page.</p>
-
-<pre class="brush: js">// Connexion à la base de données
-var DBOpenRequest = window.indexedDB.open("toDoList", 4);
-
-DBOpenRequest.onsuccess = function(event) {
-  note.innerHTML += '&lt;li&gt;Connexion établie.&lt;/li&gt;';
-
-  // Affectation de la connexion à la variable db.
-  db = DBOpenRequest.result;
-
-  // Exécution de la fonction addData () pour
-  // stocker des données dans la base
-  addData();
-};
-
-function addData() {
-  // Voici un nouvel objet prêt à être emmagasiné
-  newItem = [ { taskTitle: "Walk dog", hours: 19, minutes: 30, day: 24, month: "December", year: 2013, notified: "no" } ];
-
-  // On ouvre une transaction en lecture/écriture
-  // prête au traitement des données sur la connexion
-  var transaction = db.transaction(["toDoList"], "readwrite");
-
-  // Voici le gestionnaire utilisé en cas de succès
-  // de l'ouverture de la transaction
-  transaction.oncomplete = function(event) {
-    note.innerHTML += '&lt;li&gt;Transaction terminée : modification de la base de données OK.&lt;/li&gt;';
-  };
-
-  // Et celui utilisé en cas d'échec de
-  // l'ouverture de la transaction
-  transaction.onerror = function(event) {
-    note.innerHTML += '&lt;li&gt;L\'erreur: "' + transaction.error +'" s\'est produite, échec de la transaction.&lt;/li&gt;';
-  };
-
-  // Puis, on ouvre l'accès au un magasin "toDoList"
-  // de la transaction
-  var objectStore = transaction.objectStore("toDoList");
-
-  // Enfin on ajoute l'enregistrement
-  var objectStoreRequest = objectStore.add(newItem[0]);
-  objectStoreRequest.onsuccess = function(event) {
-    // Et on signale l'ajout de l'enregistrement
-    note.innerHTML += '&lt;li&gt;Enregistrement ajouté.&lt;/li&gt;';
-  };
- };
-</pre>
-
-<div class="note">
-  <p><strong>Note :</strong>Pour un exemple de travail complet, voir notre application <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em> disponible</a>).</p>
-</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('IndexedDB', '#widl-IDBTransaction-oncomplete', 'oncomplete')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des  navigateurs</h2>
-
-<p>{{Compat("api.IDBTransaction.oncomplete")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Manipuler IndexedDB</a></li>
- <li>Démarrer des transactions : {{domxref("IDBDatabase")}}</li>
- <li>Manipuler des transactions : {{domxref("IDBTransaction")}}</li>
- <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
- <li>Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}</li>
- <li>Manipuler des curseurs : {{domxref("IDBCursor")}}</li>
- <li>Exemple de référence pour IndexedDB : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a></li>
-</ul>
+{{ APIRef("IndexedDB") }}
+
+Le gestionnaire d'événement **`oncomplete`**, rattaché à l'interface {{domxref("IDBTransaction")}}, s'exécute au déclenchement d'un événement [`complete`](/fr/docs/Web/Events/complete) lorsque la transaction se termine avec succès.
+
+> **Note :** Depuis Firefox 40, les transactions IndexedDB diminuent en efficacité pour gagner en efficience (voir {{Bug ( "1112702")}}). Auparavant, dans une transaction en [`readwrite`](#const_read_write), l'événement `complete` était déclenché seulement lorsque toutes les données étaient écrites sur le disque. Maintenant, l'événement `complete` est déclenché après que l'OS ai envoyé l'ordre d'écrire les données, mais potentiellement avant qu'elles aient été écrites sur le disque. L'événement `complete` peut ainsi être déclenché plus rapidement qu'auparavant. Cependant, il existe une chance infime pour que l'ensemble de la transaction soit perdue si le système d'exploitation plante ou s'il y a une perte de courant avant que les données aient été écrites sur le disque. Étant donné que ces événements catastrophiques sont rares, la plupart des utilisateurs ne devraient pas avoir à s'en préoccuper davantage.
+>
+> > **Attention :** Si vous devez vous assurer de l'efficacité d'une transaction pour une raison quelconque (par exemple, vous stockez des données critiques qui ne peuvent être recalculé plus tard), vous pouvez forcer l'enregistrement complet sur disque avant de déclencher l'événement `complete` en utilisant le mode `readwriteflush` (non-standard) expérimental (cf. {{domxref("IDBDatabase.transaction")}} ). Ce mode expérimentale ne peut être utilisé que si la préférence` dom.indexedDB.experimental `pref est réglée sur `true` dans `about: config`.
+>
+> {{AvailableInWorkers}}
+>
+> ## Syntaxe
+>
+> ```js
+> transaction.oncomplete = function() { ... };
+> ```
+>
+> ## Exemple
+>
+> Dans le code suivant, on ouvre une connexion à la base de donnée. Ensuite, sur cette connexion, on démarre une transaction (avec  {{domxref("IDBTransaction")}}) en lecture/écriture pour accéder au magasin d'objet `"toDoList"` et y ajouter un enregistrement grâce à la méthode {{domxref("IDBObjectStore.add")}}. On notera également la façon dont le gestionnaire d'événement {{domxref("IDBTransaction.onerror")}} est utilisé dans la transaction.
+>
+> Le gestionnaires d'événement **`oncomplete`** de la transaction permet d'afficher un message de succès sur la page.
+>
+> ```js
+> // Connexion à la base de données
+> var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+>
+> DBOpenRequest.onsuccess = function(event) {
+>   note.innerHTML += '<li>Connexion établie.</li>';
+>
+>   // Affectation de la connexion à la variable db.
+>   db = DBOpenRequest.result;
+>
+>   // Exécution de la fonction addData () pour
+>   // stocker des données dans la base
+>   addData();
+> };
+>
+> function addData() {
+>   // Voici un nouvel objet prêt à être emmagasiné
+>   newItem = [ { taskTitle: "Walk dog", hours: 19, minutes: 30, day: 24, month: "December", year: 2013, notified: "no" } ];
+>
+>   // On ouvre une transaction en lecture/écriture
+>   // prête au traitement des données sur la connexion
+>   var transaction = db.transaction(["toDoList"], "readwrite");
+>
+>   // Voici le gestionnaire utilisé en cas de succès
+>   // de l'ouverture de la transaction
+>   transaction.oncomplete = function(event) {
+>     note.innerHTML += '<li>Transaction terminée : modification de la base de données OK.</li>';
+>   };
+>
+>   // Et celui utilisé en cas d'échec de
+>   // l'ouverture de la transaction
+>   transaction.onerror = function(event) {
+>     note.innerHTML += '<li>L\'erreur: "' + transaction.error +'" s\'est produite, échec de la transaction.</li>';
+>   };
+>
+>   // Puis, on ouvre l'accès au un magasin "toDoList"
+>   // de la transaction
+>   var objectStore = transaction.objectStore("toDoList");
+>
+>   // Enfin on ajoute l'enregistrement
+>   var objectStoreRequest = objectStore.add(newItem[0]);
+>   objectStoreRequest.onsuccess = function(event) {
+>     // Et on signale l'ajout de l'enregistrement
+>     note.innerHTML += '<li>Enregistrement ajouté.</li>';
+>   };
+>  };
+> ```
+>
+> > **Note :**Pour un exemple de travail complet, voir notre application [To-do Notifications](https://github.com/mdn/to-do-notifications/) ([exemple _live_ disponible](https://mdn.github.io/to-do-notifications/)).
+>
+> ## Spécifications
+>
+> | Spécification                                                                                        | État                         | Commentaires |
+> | ---------------------------------------------------------------------------------------------------- | ---------------------------- | ------------ |
+> | {{SpecName('IndexedDB', '#widl-IDBTransaction-oncomplete', 'oncomplete')}} | {{Spec2('IndexedDB')}} |              |
+>
+> ## Compatibilité des  navigateurs
+>
+> {{Compat("api.IDBTransaction.oncomplete")}}
+>
+> ## Voir aussi
+>
+> - [Manipuler IndexedDB](/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB)
+> - Démarrer des transactions : {{domxref("IDBDatabase")}}
+> - Manipuler des transactions : {{domxref("IDBTransaction")}}
+> - Définir un intervalle de clés : {{domxref("IDBKeyRange")}}
+> - Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}
+> - Manipuler des curseurs : {{domxref("IDBCursor")}}
+> - Exemple de référence pour IndexedDB : [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages)
diff --git a/files/fr/web/api/idbtransaction/onerror/index.md b/files/fr/web/api/idbtransaction/onerror/index.md
index d37965f979..aeeb364fbf 100644
--- a/files/fr/web/api/idbtransaction/onerror/index.md
+++ b/files/fr/web/api/idbtransaction/onerror/index.md
@@ -8,27 +8,30 @@ tags:
   - Reference
 translation_of: Web/API/IDBTransaction/onerror
 ---
-<div>{{APIRef("IndexedDB")}}</div>
+{{APIRef("IndexedDB")}}
 
-<p>Le gestionnaire d'événement <strong><code>onerror</code></strong>, rattaché à l'interface {{domxref("IDBTransaction")}}, s'exécute au déclenchement d'un événement <code><a href="/fr/docs/Web/Events/error">error</a></code> lorsque la transaction échoue.</p>
+Le gestionnaire d'événement **`onerror`**, rattaché à l'interface {{domxref("IDBTransaction")}}, s'exécute au déclenchement d'un événement [`error`](/fr/docs/Web/Events/error) lorsque la transaction échoue.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">transaction.onerror = function() { ... };</pre>
+```js
+transaction.onerror = function() { ... };
+```
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Dans le code suivant, on commence par ouvrir une connexion à la base de donnée. Grâce à cette connexion, on initialise une transaction en lecture/écriture grâce à <code>IDBTransaction</code> pour accéder au magasin d'objets intitulé <code>toDoList</code> et y ajouter un enregistrement via la méthode  {{domxref("IDBObjectStore.add")}}. On notera également l'utilisation du gestionnaire d'événements {{domxref("IDBTransaction.oncomplete")}}.</p>
+Dans le code suivant, on commence par ouvrir une connexion à la base de donnée. Grâce à cette connexion, on initialise une transaction en lecture/écriture grâce à `IDBTransaction` pour accéder au magasin d'objets intitulé `toDoList` et y ajouter un enregistrement via la méthode  {{domxref("IDBObjectStore.add")}}. On notera également l'utilisation du gestionnaire d'événements {{domxref("IDBTransaction.oncomplete")}}.
 
-<p>Le gestionnaire d'événement <strong><code>onerror</code></strong> de la transaction affiche le code d'erreur de la propriété propriété {{domxref("IDBTransaction.error","error")}} sur la page.</p>
+Le gestionnaire d'événement **`onerror`** de la transaction affiche le code d'erreur de la propriété propriété {{domxref("IDBTransaction.error","error")}} sur la page.
 
-<pre class="brush: js">// Connexion à la base de données
+```js
+// Connexion à la base de données
 var DBOpenRequest = window.indexedDB.open("toDoList", 4);
 
 DBOpenRequest.onsuccess = function(event) {
-	note.innerHTML += '&lt;li&gt;Connexion établie.&lt;/li&gt;';
+	note.innerHTML += '<li>Connexion établie.</li>';
 
 	// On affecte la connexion à la variable db.
 	db = DBOpenRequest.result;
@@ -48,12 +51,12 @@ function addData() {
 	// En cas de succès de l'ouverture de la transaction
     // on utilise ce gestionnaire
 	transaction.oncomplete = function(event) {
-		note.innerHTML += '&lt;li&gt;Transaction terminée : modification de la base de données OK.&lt;/li&gt;';
+		note.innerHTML += '<li>Transaction terminée : modification de la base de données OK.</li>';
 	};
 	// En  cas d'échec de l'ouverture de la transaction
     // on utilisera ce gestionnaire
 	transaction.onerror = function(event) {
-		note.innerHTML += '&lt;li&gt;L\'erreur: "' + transaction.error +'" s\'est produite, échec de la transaction.&lt;/li&gt;';
+		note.innerHTML += '<li>L\'erreur: "' + transaction.error +'" s\'est produite, échec de la transaction.</li>';
 	};
 
 	// On ouvre l'accès au magasin "toDoList" de la transaction
@@ -63,44 +66,30 @@ function addData() {
 	var objectStoreRequest = objectStore.add(newItem[0]);
 	objectStoreRequest.onsuccess = function(event) {
 		// On signale l'ajout de l'enregistrement
-		note.innerHTML += '&lt;li&gt;Enregistrement ajouté.&lt;/li&gt;';
+		note.innerHTML += '<li>Enregistrement ajouté.</li>';
 	};
  };
- </pre>
-
-<div class="note">
-  <p><strong>Note :</strong> Pour un exemple de travail complet, voir l'application <a href="https://github.com/mdn/to-do-notifications/">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em> disponible ici</a>).</p>
-</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('IndexedDB', '#widl-IDBTransaction-ononerror', 'onerror')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.IDBTransaction.onerror")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Manipuler IndexedDB</a></li>
- <li>Démarrer des transactions : {{domxref("IDBDatabase")}}</li>
- <li>Manipuler des transactions : {{domxref("IDBTransaction")}}</li>
- <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
- <li>Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}</li>
- <li>Manipuler des curseurs : {{domxref("IDBCursor")}}</li>
- <li>Exemple de référence pour IndexedDB : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a></li>
-</ul>
+
+```
+
+> **Note :** Pour un exemple de travail complet, voir l'application [To-do Notifications](https://github.com/mdn/to-do-notifications/) ([exemple _live_ disponible ici](https://mdn.github.io/to-do-notifications/)).
+
+## Spécifications
+
+| Spécification                                                                                | État                         | Commentaires |
+| -------------------------------------------------------------------------------------------- | ---------------------------- | ------------ |
+| {{SpecName('IndexedDB', '#widl-IDBTransaction-ononerror', 'onerror')}} | {{Spec2('IndexedDB')}} |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.IDBTransaction.onerror")}}
+
+## Voir aussi
+
+- [Manipuler IndexedDB](/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB)
+- Démarrer des transactions : {{domxref("IDBDatabase")}}
+- Manipuler des transactions : {{domxref("IDBTransaction")}}
+- Définir un intervalle de clés : {{domxref("IDBKeyRange")}}
+- Récupérer des données et les modifier : {{domxref("IDBObjectStore")}}
+- Manipuler des curseurs : {{domxref("IDBCursor")}}
+- Exemple de référence pour IndexedDB : [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages)
diff --git a/files/fr/web/api/imagedata/data/index.md b/files/fr/web/api/imagedata/data/index.md
index 93967d5b3a..58ac32657f 100644
--- a/files/fr/web/api/imagedata/data/index.md
+++ b/files/fr/web/api/imagedata/data/index.md
@@ -3,47 +3,32 @@ title: ImageData.data
 slug: Web/API/ImageData/data
 translation_of: Web/API/ImageData/data
 ---
-<p>{{APIRef("Canvas API")}}</p>
+{{APIRef("Canvas API")}}
 
-<p>La propriété en lecteur seul <code>ImageData.data</code> retourne un {{jsxref("Uint8ClampedArray")}}. Il représente un tableau unidirectionnel contenant les données sous forme d'entiers inclus entre 0 et 255 dans l'ordre RGBA comme ceci : <code>[r1,g1,b1,a1,…,rn;gn;bn;an]</code>.</p>
+La propriété en lecteur seul `ImageData.data` retourne un {{jsxref("Uint8ClampedArray")}}. Il représente un tableau unidirectionnel contenant les données sous forme d'entiers inclus entre 0 et 255 dans l'ordre RGBA comme ceci : `[r1,g1,b1,a1,…,rn;gn;bn;an]`.
 
-<h2 id="Syntax">Syntax</h2>
+## Syntax
 
-<pre class="syntaxbox"><em>imagedata</em>.data
-</pre>
+    imagedata.data
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">var imagedata = new ImageData(100, 100);
+```js
+var imagedata = new ImageData(100, 100);
 imagedata.data; // Uint8ClampedArray[40000]
-</pre>
+```
 
-<h2 id="Specification">Specification</h2>
+## Specification
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'scripting.html#dom-imagedata-data', 'ImageData.data')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Specification                                                                                                | Status                           | Comment |
+| ------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------- |
+| {{SpecName('HTML WHATWG', 'scripting.html#dom-imagedata-data', 'ImageData.data')}} | {{Spec2('HTML WHATWG')}} |         |
 
-<h2 id="Browser_compatibility">Browser compatibility</h2>
+## Browser compatibility
 
+{{Compat("api.ImageData.data")}}
 
+## See also
 
-<p>{{Compat("api.ImageData.data")}}</p>
-
-<h2 id="See_also">See also</h2>
-
-<ul>
- <li>{{domxref("ImageData.height")}}</li>
- <li>{{domxref("ImageData.width")}}</li>
-</ul>
+- {{domxref("ImageData.height")}}
+- {{domxref("ImageData.width")}}
diff --git a/files/fr/web/api/imagedata/index.md b/files/fr/web/api/imagedata/index.md
index 3ca90fa8b0..d87083c7a8 100644
--- a/files/fr/web/api/imagedata/index.md
+++ b/files/fr/web/api/imagedata/index.md
@@ -9,54 +9,35 @@ tags:
   - JavaScript
 translation_of: Web/API/ImageData
 ---
-<p>{{APIRef("Canvas API")}}</p>
-
-<p>L'interface <code><strong>ImageData</strong></code> représente les données des pixels au sein d'une certaine zone dans un élément {{HTMLElement("canvas")}}. Elle est définie par les méthodes des constructeurs ou créateurs d'objet {{domxref("ImageData.ImageData", "ImageData()")}}  sur l'objet {{domxref("CanvasRenderingContext2D")}} associé à canevas,  {{domxref("CanvasRenderingContext2D.createImageData", "createImageData()")}} et  {{domxref("CanvasRenderingContext2D.getImageData", "getImageData()")}}. Elle peut être également utilisée pour redéfinir une partie du canevas en utilisant {{domxref("CanvasRenderingContext2D.putImageData", "putImageData()")}}.</p>
-
-<h2 id="Constructeurs">Constructeurs</h2>
-
-<dl>
- <dt>{{domxref("ImageData.ImageData", "ImageData()")}} {{experimental_inline}}</dt>
- <dd>Crée un objet ImageData à partir d'un {{jsxref ("Uint8ClampedArray")}} donné et la taille de l'image qu'il contient. Si aucun tableau n'est donné, il crée une image d'un rectangle noir. Notez que c'est la façon la plus courante de créer un tel objet dans les "Workers" car {{domxref ("CanvasRenderingContext2D.createImageData", "createImageData ()")}} n'y est pas disponible.</dd>
-</dl>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<dl>
- <dt>{{domxref("ImageData.data")}}</dt>
- <dd>Un {{domxref("Uint8ClampedArray")}} représentant un tableau à une seule dimension contenant les données des pixels sous format RVBA, chaque valeur comprise entre <code>0</code> et <code>255</code> (inclus).</dd>
- <dt>{{domxref("ImageData.height")}} {{readonlyInline}}</dt>
- <dd>Un <code>unsigned</code> <code>long</code> représentant la hauteur effective, en pixels, de l'objet <code>ImageData</code>.</dd>
- <dt>{{domxref("ImageData.width")}} {{readonlyInline}}</dt>
- <dd>Un <code>unsigned</code> <code>long</code> représentant la largeur effective, en pixels, de l'objet <code>ImageData</code>.</dd>
-</dl>
-
-<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', "the-canvas-element.html#imagedata", "ImageData")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.ImageData")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("CanvasRenderingContext2D")}}.</li>
- <li>L'élément {{HTMLElement("canvas")}} et l'interface associée, {{domxref("HTMLCanvasElement")}}.</li>
-</ul>
+{{APIRef("Canvas API")}}
+
+L'interface **`ImageData`** représente les données des pixels au sein d'une certaine zone dans un élément {{HTMLElement("canvas")}}. Elle est définie par les méthodes des constructeurs ou créateurs d'objet {{domxref("ImageData.ImageData", "ImageData()")}}  sur l'objet {{domxref("CanvasRenderingContext2D")}} associé à canevas,  {{domxref("CanvasRenderingContext2D.createImageData", "createImageData()")}} et  {{domxref("CanvasRenderingContext2D.getImageData", "getImageData()")}}. Elle peut être également utilisée pour redéfinir une partie du canevas en utilisant {{domxref("CanvasRenderingContext2D.putImageData", "putImageData()")}}.
+
+## Constructeurs
+
+- {{domxref("ImageData.ImageData", "ImageData()")}} {{experimental_inline}}
+  - : Crée un objet ImageData à partir d'un {{jsxref ("Uint8ClampedArray")}} donné et la taille de l'image qu'il contient. Si aucun tableau n'est donné, il crée une image d'un rectangle noir. Notez que c'est la façon la plus courante de créer un tel objet dans les "Workers" car {{domxref ("CanvasRenderingContext2D.createImageData", "createImageData ()")}} n'y est pas disponible.
+
+## Propriétés
+
+- {{domxref("ImageData.data")}}
+  - : Un {{domxref("Uint8ClampedArray")}} représentant un tableau à une seule dimension contenant les données des pixels sous format RVBA, chaque valeur comprise entre `0` et `255` (inclus).
+- {{domxref("ImageData.height")}} {{readonlyInline}}
+  - : Un `unsigned` `long` représentant la hauteur effective, en pixels, de l'objet `ImageData`.
+- {{domxref("ImageData.width")}} {{readonlyInline}}
+  - : Un `unsigned` `long` représentant la largeur effective, en pixels, de l'objet `ImageData`.
+
+## Spécifications
+
+| Spécification                                                                                            | Statut                           | Commentaire |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- |
+| {{SpecName('HTML WHATWG', "the-canvas-element.html#imagedata", "ImageData")}} | {{Spec2('HTML WHATWG')}} |             |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.ImageData")}}
+
+## Voir aussi
+
+- {{domxref("CanvasRenderingContext2D")}}.
+- L'élément {{HTMLElement("canvas")}} et l'interface associée, {{domxref("HTMLCanvasElement")}}.
diff --git a/files/fr/web/api/index.md b/files/fr/web/api/index.md
index a66d8b6b9f..dd3ccbf680 100644
--- a/files/fr/web/api/index.md
+++ b/files/fr/web/api/index.md
@@ -10,24 +10,22 @@ tags:
   - Web
 translation_of: Web/API
 ---
-<p>Quand vous codez en JavaScript pour le web, il y a un grand nombre d'API disponibles. La liste ci-dessous énumère toutes les interfaces (types et objets) que vous pouvez appeler quand vous développez votre application web ou votre site.</p>
+Quand vous codez en JavaScript pour le web, il y a un grand nombre d'API disponibles. La liste ci-dessous énumère toutes les interfaces (types et objets) que vous pouvez appeler quand vous développez votre application web ou votre site.
 
-<p>Les APIs Web sont habituellement utilisés avec le JavaScript, bien que cela ne devrait pas toujours être le cas.</p>
+Les APIs Web sont habituellement utilisés avec le JavaScript, bien que cela ne devrait pas toujours être le cas.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Voici une liste de toutes les APIs disponibles.</p>
+Voici une liste de toutes les APIs disponibles.
 
-<div>{{ListGroups}}</div>
+{{ListGroups}}
 
-<h2 id="Interfaces">Interfaces</h2>
+## Interfaces
 
-<p>Voici une liste de toutes les interfaces (c'est à dire, les types d'objets) disponibles.</p>
+Voici une liste de toutes les interfaces (c'est à dire, les types d'objets) disponibles.
 
-<div>{{APIListAlpha}}</div>
+{{APIListAlpha}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/en-US/docs/Web/Events">Web API event reference</a></li>
-</ul>
+- [Web API event reference](/en-US/docs/Web/Events)
diff --git a/files/fr/web/api/indexeddb/index.md b/files/fr/web/api/indexeddb/index.md
index 78d82dae7a..c273594ef8 100644
--- a/files/fr/web/api/indexeddb/index.md
+++ b/files/fr/web/api/indexeddb/index.md
@@ -10,68 +10,47 @@ tags:
 translation_of: Web/API/WindowOrWorkerGlobalScope/indexedDB
 original_slug: Web/API/WindowOrWorkerGlobalScope/indexedDB
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}
 
-<p>La propriété <strong><code>indexedDB</code></strong> en lecture seule, rattachée au <em>mixin</em> {{domxref("WindowOrWorkerGlobalScope")}} fournit un mécanisme qui permet aux applications d'accéder aux bases de données indexées de façon asynchrone.</p>
+La propriété **`indexedDB`** en lecture seule, rattachée au _mixin_ {{domxref("WindowOrWorkerGlobalScope")}} fournit un mécanisme qui permet aux applications d'accéder aux bases de données indexées de façon asynchrone.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var <em>IDBFactory</em> = self.indexedDB;</pre>
+    var IDBFactory = self.indexedDB;
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Un objet {{domxref("IDBFactory")}}.</p>
+Un objet {{domxref("IDBFactory")}}.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: js">var db;
+```js
+var db;
 function openDB() {
  var DBOpenRequest = window.indexedDB.open('toDoList');
  DBOpenRequest.onsuccess = function(e) {
    db = DBOpenRequest.result;
  }
-}</pre>
+}
+```
 
-<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('IndexedDB 2', '#dom-windoworworkerglobalscope-indexeddb', 'indexedDB')}}</td>
-   <td>{{Spec2('IndexedDB 2')}}</td>
-   <td>Rattachement partiel à <code>WindowOrWorkerGlobalScope</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('IndexedDB', '#widl-IDBEnvironment-indexedDB', 'indexedDB')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                    | État                             | Commentaires                                        |
+| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | --------------------------------------------------- |
+| {{SpecName('IndexedDB 2', '#dom-windoworworkerglobalscope-indexeddb', 'indexedDB')}} | {{Spec2('IndexedDB 2')}} | Rattachement partiel à `WindowOrWorkerGlobalScope`. |
+| {{SpecName('IndexedDB', '#widl-IDBEnvironment-indexedDB', 'indexedDB')}}                 | {{Spec2('IndexedDB')}}     | Définition initiale.                                |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<div>
-<div>
+{{Compat("api.WindowOrWorkerGlobalScope.indexedDB")}}
 
+## Voir aussi
 
-<p>{{Compat("api.WindowOrWorkerGlobalScope.indexedDB")}}</p>
-</div>
-</div>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></li>
- <li>Initier une connexion : {{domxref("IDBDatabase")}}</li>
- <li>Utiliser les transactions : {{domxref("IDBTransaction")}}</li>
- <li>Définir un intervalle de clés : {{domxref("IDBKeyRange")}}</li>
- <li>Récupérer et modifier les données : {{domxref("IDBObjectStore")}}</li>
- <li>Utiliser les curseurs {{domxref("IDBCursor")}}</li>
- <li>Exemple de référence : <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">exemple <em>live</em></a>).</li>
-</ul>
+- [Utiliser IndexedDB](/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB)
+- Initier une connexion : {{domxref("IDBDatabase")}}
+- Utiliser les transactions : {{domxref("IDBTransaction")}}
+- Définir un intervalle de clés : {{domxref("IDBKeyRange")}}
+- Récupérer et modifier les données : {{domxref("IDBObjectStore")}}
+- Utiliser les curseurs {{domxref("IDBCursor")}}
+- Exemple de référence : [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages) ([exemple _live_](https://mdn.github.io/to-do-notifications/)).
diff --git a/files/fr/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.md b/files/fr/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.md
index ced83206f0..14a14e6bad 100644
--- a/files/fr/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.md
+++ b/files/fr/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.md
@@ -11,130 +11,102 @@ tags:
 translation_of: Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria
 original_slug: Web/API/API_IndexedDB/Browser_storage_limits_and_eviction_criteria
 ---
-<div>{{DefaultAPISidebar("IndexedDB")}}</div>
+{{DefaultAPISidebar("IndexedDB")}}
 
-<div class="note">
-<p><strong>Note :</strong> Il existe un certain nombre de technologies Web qui stockent des données d'un type ou d'un autre du côté client (c'est-à-dire sur le disque local). Le processus par lequel le navigateur calcule l'espace alloué au stockage de données Web et les données à supprimer quand la limite est atteinte n'est pas simple et diffère d'un navigateur à l'autre. Cet article tente d'expliquer comment tout cela fonctionne.</p>
-</div>
+> **Note :** Il existe un certain nombre de technologies Web qui stockent des données d'un type ou d'un autre du côté client (c'est-à-dire sur le disque local). Le processus par lequel le navigateur calcule l'espace alloué au stockage de données Web et les données à supprimer quand la limite est atteinte n'est pas simple et diffère d'un navigateur à l'autre. Cet article tente d'expliquer comment tout cela fonctionne.
 
-<div class="note">
-<p><strong>Note :</strong> Les informations ci-dessous devraient être assez précises pour la plupart des navigateurs modernes, mais les spécificités du navigateur sont évoquées quand elles sont connues. Opera et Chrome devraient se comporter de la même manière dans tous les cas. Mais <a href="http://www.opera.com/mobile/mini">Opera Mini</a> (encore basé sur presto du côté serveur) ne stocke aucune donnée sur le client.</p>
-</div>
+> **Note :** Les informations ci-dessous devraient être assez précises pour la plupart des navigateurs modernes, mais les spécificités du navigateur sont évoquées quand elles sont connues. Opera et Chrome devraient se comporter de la même manière dans tous les cas. Mais [Opera Mini](http://www.opera.com/mobile/mini) (encore basé sur presto du côté serveur) ne stocke aucune donnée sur le client.
 
-<h2 id="Les_différents_types_de_stockage_des_données">Les différents types de stockage des données</h2>
+## Les différents types de stockage des données
 
-<p>Même dans le même navigateur, en utilisant la même méthode de stockage, il existe différentes classes de stockage de données à comprendre. Cette section traite des différents types que vous pouvez trouver dans différents navigateurs.</p>
+Même dans le même navigateur, en utilisant la même méthode de stockage, il existe différentes classes de stockage de données à comprendre. Cette section traite des différents types que vous pouvez trouver dans différents navigateurs.
 
-<p>Généralement, les deux principaux types de stockage sont les suivants :</p>
+Généralement, les deux principaux types de stockage sont les suivants :
 
-<ul>
- <li>Persistant : ce sont des données qui doivent être conservées pendant une longue période. Elles ne seront évincéés que si l'utilisateur le choisit (par exemple, dans Firefox, il existe un bouton "nettoyer stockage" dans la boîte de dialogue d'informations sur la page pour chaque page).</li>
- <li>Temporaire : il s'agit de données qui n'ont pas besoin de persister très longtemps. Elles seront évacuées en-dessous d'un minimum d'utilisation ({{anch("LRU policy")}}) lorsque les limites de stockage sont atteintes.</li>
-</ul>
+- Persistant : ce sont des données qui doivent être conservées pendant une longue période. Elles ne seront évincéés que si l'utilisateur le choisit (par exemple, dans Firefox, il existe un bouton "nettoyer stockage" dans la boîte de dialogue d'informations sur la page pour chaque page).
+- Temporaire : il s'agit de données qui n'ont pas besoin de persister très longtemps. Elles seront évacuées en-dessous d'un minimum d'utilisation ({{anch("LRU policy")}}) lorsque les limites de stockage sont atteintes.
 
-<p>Par défaut, le stockage temporaire sera utilisé dans la plupart des contextes d'utilisation (par exemple, des applications Web standard) et le persistant pour les applications installées (par exemple, les applications Firefox installées sur le système d'exploitation Firefox OS / Firefox de bureau, les applications Chrome).</p>
+Par défaut, le stockage temporaire sera utilisé dans la plupart des contextes d'utilisation (par exemple, des applications Web standard) et le persistant pour les applications installées (par exemple, les applications Firefox installées sur le système d'exploitation Firefox OS / Firefox de bureau, les applications Chrome).
 
-<h3 id="Spécificités_de_Firefox">Spécificités de Firefox</h3>
+### Spécificités de Firefox
 
-<p>Dans Firefox, vous pouvez choisir le type de stockage que vous souhaitez utiliser en incluant une option propriétaire — <code>storage</code> — lorsque vous créez une base de données IndexedDB en utilisant {{domxref ("IDBFactory.open ()", "open ()")}} :</p>
+Dans Firefox, vous pouvez choisir le type de stockage que vous souhaitez utiliser en incluant une option propriétaire — `storage` — lorsque vous créez une base de données IndexedDB en utilisant {{domxref ("IDBFactory.open ()", "open ()")}} :
 
-<ul>
- <li>
-  <pre class="brush: js"><code>var request = indexedDB.open("myDatabase", { version: 1, storage: "persistent" });</code></pre>
- </li>
- <li>
-  <pre class="brush: js"><code>var request = indexedDB.open("myDatabase", { version: 1, storage: "temporary" });</code></pre>
- </li>
-</ul>
+- ```js
+  var request = indexedDB.open("myDatabase", { version: 1, storage: "persistent" });
+  ```
+- ```js
+  var request = indexedDB.open("myDatabase", { version: 1, storage: "temporary" });
+  ```
 
-<p>Dans Firefox, quand le stockage persistant est choisi, l'utilisateur reçoit une fenêtre de dialogue d'interface utilisateur pour l'avertir que ces données persisteront et lui demander s'il en est satisfait.</p>
+Dans Firefox, quand le stockage persistant est choisi, l'utilisateur reçoit une fenêtre de dialogue d'interface utilisateur pour l'avertir que ces données persisteront et lui demander s'il en est satisfait.
 
-<p>Les données de stockage temporaire ne provoquent aucune fenêtre de dialogue vers l'utilisateur, mais il y a des {{anch("Limites de stockage")}}.</p>
+Les données de stockage temporaire ne provoquent aucune fenêtre de dialogue vers l'utilisateur, mais il y a des {{anch("Limites de stockage")}}.
 
-<h3 id="Default_storage_dans_Firefox_(stockage_par_défaut)">"Default storage" dans Firefox <em>(stockage par défaut)</em></h3>
+### "Default storage" dans Firefox _(stockage par défaut)_
 
-<p>C'est le troisième type de stockage à envisager dans Firefox — "Default storage" <em>(stockage par défaut)</em>.  C'est une option par défaut, utilisée quand vous ne spécifiez pas le paramètre <code>storage</code>  vu ci-dessus. Les données du stockage par défaut se comportent différemment selon les circonstances : assimilées aux données d'un stockage persistant pour les applications installées de Firefox OS, ou d'un stockage temporaire pour tout autre type d'utilisation.</p>
+C'est le troisième type de stockage à envisager dans Firefox — "Default storage" _(stockage par défaut)_.  C'est une option par défaut, utilisée quand vous ne spécifiez pas le paramètre `storage`  vu ci-dessus. Les données du stockage par défaut se comportent différemment selon les circonstances : assimilées aux données d'un stockage persistant pour les applications installées de Firefox OS, ou d'un stockage temporaire pour tout autre type d'utilisation.
 
-<h2 id="Où_sont_stockées_les_données">Où sont stockées les données ?</h2>
+## Où sont stockées les données ?
 
-<p>Chaque type de stockage représente un référentiel distinct, voici la cartographie réelle des répertoires sous le profil Firefox d'un utilisateur (d'autres navigateurs peuvent différer légèrement) :</p>
+Chaque type de stockage représente un référentiel distinct, voici la cartographie réelle des répertoires sous le profil Firefox d'un utilisateur (d'autres navigateurs peuvent différer légèrement) :
 
-<ul>
- <li><code>&lt;profile&gt;/storage</code> — le principal, le plus haut niveau de répertoire pour le stockage maintenu par le " quota manager " <em>(manager de quotas)</em> (voir ci-dessous).</li>
- <li><code>&lt;profile&gt;/storage/permanent</code> — répertoire de stockage des données persistantes.</li>
- <li><code>&lt;profile&gt;/storage/temporary</code> — répertoire de stockage des données temporaires.</li>
- <li><code>&lt;profile&gt;/storage/default</code> — répertoire de stockage des données par défaut.</li>
-</ul>
+- `<profile>/storage` — le principal, le plus haut niveau de répertoire pour le stockage maintenu par le " quota manager " _(manager de quotas)_ (voir ci-dessous).
+- `<profile>/storage/permanent` — répertoire de stockage des données persistantes.
+- `<profile>/storage/temporary` — répertoire de stockage des données temporaires.
+- `<profile>/storage/default` — répertoire de stockage des données par défaut.
 
-<div class="note">
-<p><strong>Note :</strong> Depuis l'introduction de l' <a href="/en-US/docs/Web/API/Storage_API">API Storage</a> , le dossier "permanent" peut être considéré comme obsolète, il n'est plus utilisé que pour les bases de données de type persistant IndexedDB. Peu importe le mode, "best-effort"<em> (meilleur effort)</em> ou "persistant", les données sont stockées sous <code>&lt;profile&gt;/storage/default</code>.</p>
-</div>
+> **Note :** Depuis l'introduction de l' [API Storage](/en-US/docs/Web/API/Storage_API) , le dossier "permanent" peut être considéré comme obsolète, il n'est plus utilisé que pour les bases de données de type persistant IndexedDB. Peu importe le mode, "best-effort" _(meilleur effort)_ ou "persistant", les données sont stockées sous `<profile>/storage/default`.
 
-<div class="note">
-<p><strong>Note :</strong> Dans Firefox, vous pouvez trouver votre dossier profil en entrant : <code>support</code> dans la barre d'URL et en appuyant sur le bouton <em>Show in..</em>. <em>(</em><em>Afficher dans ...)</em> (par exemple, <em>"Show in Finder"</em> sur Mac OS X) à côté du titre <em>"Profile Folder" (</em><em>dossier de profil)</em> .</p>
-</div>
+> **Note :** Dans Firefox, vous pouvez trouver votre dossier profil en entrant : `support` dans la barre d'URL et en appuyant sur le bouton _Show in.._. _(\*\*Afficher dans ...)_ (par exemple, _"Show in Finder"_ sur Mac OS X) à côté du titre _"Profile Folder" (\*\*dossier de profil)_ .
 
-<div class="note">
-<p><strong>Note :</strong> Si vous regardez dans votre profil les répertoires de données stockées, vous pouvez voir un quatrième dossier : <code>persistent</code> . À la base, le dossier <code>persistent</code> a été renommé <code>permanent,</code> il y a quelques temps, pour faciliter les mises à niveau / migrations.</p>
-</div>
+> **Note :** Si vous regardez dans votre profil les répertoires de données stockées, vous pouvez voir un quatrième dossier : `persistent` . À la base, le dossier `persistent` a été renommé `permanent,` il y a quelques temps, pour faciliter les mises à niveau / migrations.
 
-<div class="note">
-<p><strong>Note :</strong> Les utilisateurs ne doivent pas ajouter leurs propres répertoires ou fichiers sous <code>&lt;profile&gt;/storage</code> . Cela entraînerait l'échec de l'initialisation du stockage ; par exemple {{domxref ("IDBFactory.open ()", "open ()")}} déclencherait un événement d'erreur.</p>
-</div>
+> **Note :** Les utilisateurs ne doivent pas ajouter leurs propres répertoires ou fichiers sous `<profile>/storage` . Cela entraînerait l'échec de l'initialisation du stockage ; par exemple {{domxref ("IDBFactory.open ()", "open ()")}} déclencherait un événement d'erreur.
 
-<h2 id="Limites_de_stockage">Limites de stockage</h2>
+## Limites de stockage
 
-<p>L'espace de stockage maximal du navigateur est dynamique  — il est basé sur la taille de votre disque dur. La limite globale est calculée sur la base de 50% de l'espace disque libre. Dans Firefox, un outil interne du navigateur appelé " Quota Manager " <em>(gestionnaire de quotas)</em> surveille la quantité d'espace disque utilisée par chaque origine et supprime les données si nécessaire.</p>
+L'espace de stockage maximal du navigateur est dynamique  — il est basé sur la taille de votre disque dur. La limite globale est calculée sur la base de 50% de l'espace disque libre. Dans Firefox, un outil interne du navigateur appelé " Quota Manager " _(gestionnaire de quotas)_ surveille la quantité d'espace disque utilisée par chaque origine et supprime les données si nécessaire.
 
-<p>Donc, si votre disque dur est de 500 Go, le stockage total d'un navigateur est de 250 Go. S'il est dépassé, une procédure appelée <strong>"origin eviction"</strong> <em>(</em><em>éviction d'origine)</em> entre en jeu, en supprimant la valeur totale de l'origine jusqu'à ramener le niveau de stockage en-dessous de la limite. La suppression d'une base de données d'origine peut entraîner des problèmes d'incohérence.</p>
+Donc, si votre disque dur est de 500 Go, le stockage total d'un navigateur est de 250 Go. S'il est dépassé, une procédure appelée **"origin eviction"** _(\*\*éviction d'origine)_ entre en jeu, en supprimant la valeur totale de l'origine jusqu'à ramener le niveau de stockage en-dessous de la limite. La suppression d'une base de données d'origine peut entraîner des problèmes d'incohérence.
 
-<p>Il y a aussi une autre limite appelée <strong>group limit</strong> — ceci est défini comme 20% de la limite globale. Chaque origine fait partie d'un groupe (groupe d'origines). Il existe un groupe pour chaque domaine eTLD + 1.</p>
+Il y a aussi une autre limite appelée **group limit** — ceci est défini comme 20% de la limite globale. Chaque origine fait partie d'un groupe (groupe d'origines). Il existe un groupe pour chaque domaine eTLD + 1.
 
-<p>Par exemple :</p>
+Par exemple :
 
-<ul>
- <li><code>mozilla.org</code> — groupe1, origine1</li>
- <li><code>www.mozilla.org</code> — groupe1, origine2</li>
- <li><code>joe.blogs.mozilla.org</code> — groupe1, origine3</li>
- <li><code>firefox.com</code> — groupe2, origine4</li>
-</ul>
+- `mozilla.org` — groupe1, origine1
+- `www.mozilla.org` — groupe1, origine2
+- `joe.blogs.mozilla.org` — groupe1, origine3
+- `firefox.com` — groupe2, origine4
 
-<p>Ces groupes, <code>mozilla.org</code>, <code>www.mozilla.org</code>, et <code>joe.blogs.mozilla.org</code> peuvent utiliser globalement un maximum de 20% de la limite globale. <code>firefox.com</code> a un maximum distinct de 20%.</p>
+Ces groupes, `mozilla.org`, `www.mozilla.org`, et `joe.blogs.mozilla.org` peuvent utiliser globalement un maximum de 20% de la limite globale. `firefox.com` a un maximum distinct de 20%.
 
-<p>Les deux limites reagissent différemment quand la limite est atteinte :</p>
+Les deux limites reagissent différemment quand la limite est atteinte :
 
-<ul>
- <li>La limite de groupe est également appelée «limite dure»: elle ne déclenche pas l'éviction d'origine.</li>
- <li>La limite globale est une «limite douce» car il est possible que certains espaces soient libérés et que l'opération puisse se poursuivre.</li>
-</ul>
+- La limite de groupe est également appelée «limite dure»: elle ne déclenche pas l'éviction d'origine.
+- La limite globale est une «limite douce» car il est possible que certains espaces soient libérés et que l'opération puisse se poursuivre.
 
-<div class="note">
-<p><strong>Note :</strong> Si la limite de groupe est dépassée, ou si l'éviction d'origine ne crée pas assez d'espace libre, le navigateur lance  <code>QuotaExceededError</code>.</p>
-</div>
+> **Note :** Si la limite de groupe est dépassée, ou si l'éviction d'origine ne crée pas assez d'espace libre, le navigateur lance  `QuotaExceededError`.
 
-<h2 id="Politique_LRU">Politique LRU</h2>
+## Politique LRU
 
-<p>Lorsque l'espace disque disponible est rempli, le gestionnaire de quotas commence à effacer les données sur la base de la politique LRU — l'origine la moins utilisée sera d'abord supprimée, puis la suivante, jusqu'à ce que le navigateur ne dépasse plus la limite.</p>
+Lorsque l'espace disque disponible est rempli, le gestionnaire de quotas commence à effacer les données sur la base de la politique LRU — l'origine la moins utilisée sera d'abord supprimée, puis la suivante, jusqu'à ce que le navigateur ne dépasse plus la limite.
 
-<p>Nous traçons le "dernier temps d'accès" pour chaque origine utilisant le stockage temporaire. Une fois que la limite globale du stockage temporaire est atteinte, nous essayons de trouver toutes les origines actuellement inutilisées (c'est-à-dire, sans onglets ou applications ouverts qui conservent des bases de données ouvertes). Celles-ci sont ensuite triées sur le dernier accès. Les origines les moins récemment utilisées sont ensuite supprimées jusqu'à ce qu'il y ait suffisamment d'espace pour répondre à la demande qui a déclenché cette éviction d'origine.</p>
+Nous traçons le "dernier temps d'accès" pour chaque origine utilisant le stockage temporaire. Une fois que la limite globale du stockage temporaire est atteinte, nous essayons de trouver toutes les origines actuellement inutilisées (c'est-à-dire, sans onglets ou applications ouverts qui conservent des bases de données ouvertes). Celles-ci sont ensuite triées sur le dernier accès. Les origines les moins récemment utilisées sont ensuite supprimées jusqu'à ce qu'il y ait suffisamment d'espace pour répondre à la demande qui a déclenché cette éviction d'origine.
 
-<h2 id="Quelles_technologies_utilisent_le_stockage_de_données_du_navigateur">Quelles technologies utilisent le stockage de données du navigateur ?</h2>
+## Quelles technologies utilisent le stockage de données du navigateur ?
 
-<p>Dans Firefox, les technologies suivantes utilisent le stockage de données du navigateur pour stocker des données au besoin. Nous les qualifions de "quota clients" dans ce contexte :</p>
+Dans Firefox, les technologies suivantes utilisent le stockage de données du navigateur pour stocker des données au besoin. Nous les qualifions de "quota clients" dans ce contexte :
 
-<ul>
- <li><a href="/fr/docs/Web/API/API_IndexedDB">IndexedDB</a></li>
- <li><a href="http://asmjs.org/">asm.js</a> caching</li>
- <li><a href="/fr/docs/Web/API/Cache">Cache API</a></li>
-</ul>
+- [IndexedDB](/fr/docs/Web/API/API_IndexedDB)
+- [asm.js](http://asmjs.org/) caching
+- [Cache API](/fr/docs/Web/API/Cache)
 
-<p>Le «dernier temps d'accès» des origines est mis à jour lorsque l'un de ces éléments est activé / désactivé. L'éviction d'origine supprimera les données pour tous ces "quota clients".</p>
+Le «dernier temps d'accès» des origines est mis à jour lorsque l'un de ces éléments est activé / désactivé. L'éviction d'origine supprimera les données pour tous ces "quota clients".
 
-<p>Dans Chrome / Opera, l'API " Quota Management" gère les quotas pour <a href="/en-US/docs/Web/HTML/Using_the_application_cache">AppCache</a>, <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a>, WebSQL et <a href="/en-US/docs/Web/API/File_System_API">File System API</a>.</p>
+Dans Chrome / Opera, l'API " Quota Management" gère les quotas pour [AppCache](/en-US/docs/Web/HTML/Using_the_application_cache), [IndexedDB](/en-US/docs/Web/API/IndexedDB_API), WebSQL et [File System API](/en-US/docs/Web/API/File_System_API).
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="http://www.html5rocks.com/en/tutorials/offline/quota-research/">Working with quota on mobile browsers</a>, de<a href="http://blog.agektmr.com"> Eiji Kitamura.</a> Une analyse détaillée du stockage côté client sur les navigateurs mobiles.</li>
- <li><a href="https://developers.google.com/web/updates/2011/11/Quota-Management-API-Fast-Facts">Quota Management API : Fast Facts</a>, de<a href="http://blog.agektmr.com"> Eiji Kitamura.</a> Un regard sur l'API Quota Management dans Chrome / Blink (qui devrait également inclure Opera aussi.)</li>
-</ul>
+- [Working with quota on mobile browsers](http://www.html5rocks.com/en/tutorials/offline/quota-research/), de[ Eiji Kitamura.](http://blog.agektmr.com) Une analyse détaillée du stockage côté client sur les navigateurs mobiles.
+- [Quota Management API : Fast Facts](https://developers.google.com/web/updates/2011/11/Quota-Management-API-Fast-Facts), de[ Eiji Kitamura.](http://blog.agektmr.com) Un regard sur l'API Quota Management dans Chrome / Blink (qui devrait également inclure Opera aussi.)
diff --git a/files/fr/web/api/indexeddb_api/index.md b/files/fr/web/api/indexeddb_api/index.md
index 01e9cdf503..bad7ab954f 100644
--- a/files/fr/web/api/indexeddb_api/index.md
+++ b/files/fr/web/api/indexeddb_api/index.md
@@ -10,147 +10,114 @@ tags:
 translation_of: Web/API/IndexedDB_API
 original_slug: Web/API/API_IndexedDB
 ---
-<p>{{DefaultAPISidebar("IndexedDB")}}</p>
-
-<p>IndexedDB est une API de bas niveau qui permet le stockage côté client de quantités importantes de données structurées, incluant des fichiers/blobs. Cette API utilise des index afin de permettre des recherches performantes sur ces données. Alors que <a href="/fr/docs/Web/API/Web_Storage_API">Web Storage</a> est utile pour stocker de petites quantités de données, il est moins utile pour stocker de grandes quantités de données structurées. IndexedDB fournit une solution. Cette page est le point d'entrée pour tout ce qui concerne IndexedDB sur MDN - vous y trouverez les liens vers la référence complète de l'API et les guides d'utilisation, le support par les navigateurs, et quelques explications des concepts clés.</p>
-
-<p>{{AvailableInWorkers}}</p>
-
-<div class="note">
-<p><strong>Note :</strong> L'API IndexedDB est puissante, mais elle peut sembler trop compliquée dans les cas simples. Si vous préferez une API plus simple, essayez des librairies comme <a href="https://localforage.github.io/localForage/">localForage</a>, <a href="http://www.dexie.org/">dexie.js</a>, <a href="https://github.com/erikolson186/zangodb">ZangoDB</a>, <a href="https://pouchdb.com/">PouchDB</a>, <a href="https://www.npmjs.com/package/idb">idb</a>, <a href="https://www.npmjs.com/package/idb-keyval">idb-keyval</a>, <a href="http://jsstore.net/">JsStore</a> et <a href="https://github.com/google/lovefield">lovefield</a> qui offrent de nombreux avantages aux développeurs de IndexedDB.</p>
-</div>
-
-<h2 id="Concepts_clés_et_utilisation">Concepts clés et utilisation</h2>
-
-<p>IndexedDB est un système de gestion de base de données transactionnel, similaire à un SGBD relationnel basé sur SQL. Cependant contrairement aux SGBD relationnels, qui utilisent des tables avec des colonnes fixes, IndexedDB est une base de données orientée objet basée sur JavaScript. IndexedDB vous permet de stocker et de récupérer des objets qui sont indexés avec une <strong>clef</strong>; tout objet supporté par <a href="/fr/docs/Web/API/Web_Workers_API/algorithme_clonage_structure">l'algorithme de clônage structuré</a> peut être stocké. Vous devez spécifier le schéma de la base de données, ouvrir une connexion à votre base de données, puis récupérer et mettre à jour des données dans une série de <strong>transactions</strong>.</p>
-
-<ul>
- <li>Plus d'informations sur les <a href="/fr/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB">concepts derrière IndexedDB</a>.</li>
- <li>Apprenez à utiliser IndexedDB de manière asynchrone à partir des principes fondamentaux grâce à notre guide <a href="/fr/docs/IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a>.</li>
- <li>Combinez IndexedDB pour le stockage des données en mode déconnecté avec les Service Workers pour stocker des assets en mode déconnecté, comme précisé dans <a href="/fr/docs/Web/Progressive_web_apps/Offline_Service_workers">Faire fonctionner les PWAs en mode déconnecté grâce aux Service workers</a>.</li>
-</ul>
-
-<div class="note">
-<p><strong>Note :</strong> Comme la plupart des solutions de stockage en ligne, IndexedDB suit la politique <a href="http://www.w3.org/Security/wiki/Same_Origin_Policy">same-origin policy</a>. Alors même que vous pouvez accèder à des données stockées au sein d'un domaine, vous ne pouvez pas accéder à des données sur plusieurs domaines.</p>
-</div>
-
-<h3 id="Synchrone_et_asynchrone">Synchrone et asynchrone</h3>
-
-<p>Les opérations effectuées par IndexedDB sont réalisées de manière asynchrone, afin de ne pas bloquer l'application. IndexedDB comprend à la fois une API asynchrone et une API synchrone. L'API synchrone était à l'origine uniquement destinée pour un usage avec les <a href="/fr/docs/Utilisation_des_web_workers">Web workers</a>, mais elle a été retirée de la spécification parce qu'il était difficile de savoir si elle était nécessaire. Cependant l'API synchrone pourrait être ré-integrée si il y a une demande suffisante de la part des développeurs web.</p>
-
-<h3 id="Limites_de_stockage_et_critères_déviction">Limites de stockage et critères d'éviction</h3>
-
-<p>Il y a un certain nombre de technologies web pour stocker différents types de données côté client (par exemple sur votre disque local). IndexedDB est la plus couramment citée. Le processus par lequel le navigateur calcule combien d'espace il doit allouer aux données web, et ce qu'il doit supprimer quand la limite est atteinte, n'est pas simple et varie entre les différents navigateurs.<a href="/fr/docs/IndexedDB/Browser_storage_limits_and_eviction_criteria"> L'article "limites de stockage des navigateurs et critères d'éviction"</a> tente d'expliquer ce fonctionnement, au moins pour le cas de Firefox.</p>
-
-<h2 id="Interfaces">Interfaces</h2>
-
-<p>Pour accèder à une base de données, il faut apeller <a href="/fr/docs/Web/API/IDBFactory.open"><code>open()</code></a> sur l'attribut <a href="/fr/docs/Web/API/IDBEnvironment.indexedDB"><code>indexedDB</code></a> d'un objet <a href="/fr/docs/DOM/window">window</a>. Cette méthode retourne un objet {{domxref("IDBRequest")}}; Les opérations asynchrones communiquent avec l'application appelante en déclenchant des évènements sur les objets {{domxref("IDBRequest")}}.</p>
-
-<h3 id="Se_connecter_à_la_base_de_données">Se connecter à la base de données</h3>
-
-<dl>
- <dt>{{domxref("IDBEnvironment")}}</dt>
- <dd>Fournit un accès aux fonctionnalités d'IndexedDB. Implémenté par les objets {{domxref("window")}} et {{domxref("worker")}}.</dd>
- <dt>{{domxref("IDBFactory")}}</dt>
- <dd>Fournit un accès à la base de données.C'est l'interface implémentée par l'objet global <a href="/fr/docs/Web/API/IDBEnvironment.indexedDB"><code>indexedDB</code></a> et c'est donc le point d'entrée de l'API.</dd>
- <dt>{{domxref("IDBOpenDBRequest")}}</dt>
- <dd>Représente une requête d'ouverture de la base de données.</dd>
- <dt>{{domxref("IDBDatabase")}}</dt>
- <dd>Représente une connexion à la base de données. C'est le seul moyen d'obtenir une transaction sur la base de données.</dd>
-</dl>
-
-<h3 id="Récupérer_et_modifier_les_données">Récupérer et modifier les données</h3>
-
-<dl>
- <dt>{{domxref("IDBTransaction")}}</dt>
- <dd>Représente une transaction. Vous créez une transaction sur la base de données, spécifiez la portée (comme à quel magasin d'objets vous souhaitez accèder), et déterminez le type d'accès désiré (lecture seule ou lecture et écriture).</dd>
- <dt>{{domxref("IDBRequest")}}</dt>
- <dd>Interface générique qui récupère les requêtes à la base de données et fournit un accès aux résultats.</dd>
- <dt>{{domxref("IDBObjectStore")}}</dt>
- <dd>Représente un magasin d'objets qui permet l'accès à un ensemble de données d'une base de données IndexedDB, recherché par clé primaire.</dd>
- <dt>{{domxref("IDBIndex")}}</dt>
- <dd>Permet aussi d'accèder à un sous-ensemble de données d'une base IndexedDB mais utilise un index pour récupérer les enregistrements, au lieu d'une clé primaire. C'est parfois plus rapide qu'un usage de {{domxref("IDBObjectStore")}}.</dd>
- <dt>{{domxref("IDBCursor")}}</dt>
- <dd>Itérateur sur les magasins d'objets et les index.</dd>
- <dt>{{domxref("IDBCursorWithValue")}}</dt>
- <dd>Itérateur sur les magasins d'objets et les index et retourne la valeur courante du curseur.</dd>
- <dt>{{domxref("IDBKeyRange")}}</dt>
- <dd>Définit une portée de valeurs qui peut être utilisée pour récupérer des données de la base de données dans une certaine portée.</dd>
- <dt>{{domxref("IDBLocaleAwareKeyRange")}} {{Non-standard_inline}}</dt>
- <dd>Définit une portée de valeurs qui peut être utilisée pour récupérer des données de la base de données dans une certaine portée, triées en fonction des règles de la localisation spécifiée pour un certain index (voir <a href="/fr/docs/Web/API/IDBObjectStore/createIndex#Parameters"><code>createIndex()</code>'s optionalParameters</a>).</dd>
-</dl>
-
-<h3 id="Interfaces_dévénements_personnalisés">Interfaces d'événements personnalisés</h3>
-
-<p>Cette spécification provoque des évènements avec les interfaces personnalisées suivantes:</p>
-
-<dl>
- <dt>{{domxref("IDBVersionChangeEvent")}}</dt>
- <dd><code>L'interface IDBVersionChangeEvent</code> indique que la version de la base de données à changé, résultat de la fonction de saisie d'un évènement  {{domxref("IDBOpenDBRequest.onupgradeneeded")}}.</dd>
-</dl>
-
-<h3 id="Interfaces_obsolètes">Interfaces obsolètes</h3>
-
-<p>Une précedente version des spécifications a défini ces interfaces, désormais supprimées. Elles sont toujours documentées dans le cas où vous avez besoin de mettre à jour du code déja écrit :</p>
-
-<dl>
- <dt>{{domxref("IDBVersionChangeRequest")}} {{obsolete_inline}}</dt>
- <dd>Représente une requête de changement de version de la base de données. Le moyen pour changer de version de la base de données a désormais changé (avec un appel de {{domxref("IDBFactory.open")}} sans aussi appeler {{domxref("IDBDatabase.setVersion")}}), et l'interface  {{domxref("IDBOpenDBRequest")}} a désormais la fonction de l'ancienne (supprimée) {{domxref("IDBVersionChangeRequest")}}.</dd>
- <dt>{{domxref("IDBDatabaseException")}}  {{obsolete_inline}}</dt>
- <dd>Représente une exception (erreur) qui peut survenir durant les opérations sur la base de données.</dd>
- <dt>{{domxref("IDBTransactionSync")}} {{obsolete_inline}}</dt>
- <dd>Version synchrone de {{domxref("IDBTransaction")}}.</dd>
- <dt>{{domxref("IDBObjectStoreSync")}} {{obsolete_inline}}</dt>
- <dd>Version synchrone de {{domxref("IDBObjectStore")}}.</dd>
- <dt>{{domxref("IDBIndexSync")}} {{obsolete_inline}}</dt>
- <dd>Version synchrone de  {{domxref("IDBIndex")}}.</dd>
- <dt>{{domxref("IDBFactorySync")}} {{obsolete_inline}}</dt>
- <dd>Version synchrone de {{domxref("IDBFactory")}}.</dd>
- <dt>{{domxref("IDBEnvironmentSync")}} {{obsolete_inline}}</dt>
- <dd>Version synchrone de {{domxref("IDBEnvironment")}}.</dd>
- <dt>{{domxref("IDBDatabaseSync")}} {{obsolete_inline}}</dt>
- <dd>Version synchrone de {{domxref("IDBDatabase")}}.</dd>
- <dt>{{domxref("IDBCursorSync")}} {{obsolete_inline}}</dt>
- <dd>Version synchrone de {{domxref("IDBCursor")}}.</dd>
-</dl>
-
-<h2 id="Example">Exemples</h2>
-
-<ul>
- <li><a href="http://marco-c.github.io/eLibri/">eLibri:</a> Une application puissante de bibliothèque et de lecteur de livres électroniques, écrit par Marco Castelluccio, gagnant du <em>DevDerby IndexedDB</em> de Mozilla.</li>
- <li><a href="https://github.com/chrisdavidmills/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="http://mdn.github.io/to-do-notifications/">voir la démonstration en ligne</a>): L'application de référence pour les exemples de la documentation.</li>
- <li><a href="http://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/">Stocker des images et des fichiers dans IndexedDB</a></li>
-</ul>
-
-<h2 id="Browser_compatibility">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('IndexedDB')}}</td>
-   <td>{{Spec2('IndexedDB')}}</td>
-   <td>Définition initiale</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("IndexedDB 2")}}</td>
-   <td>{{Spec2("IndexedDB 2")}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="https://localforage.github.io/localForage/">localForage</a>: Un <em>Polyfill</em> fournissant une syntaxe clé-valeurs simple pour un stockage côté client; il utilise IndexedDB en arrière plan, mais se retourne d'abord sur WebSQL puis sur localStorage pour les navigateurs qui ne supportent pas IndexedDB.</li>
- <li><a href="http://www.dexie.org/">dexie.js</a> : Un <em>wrapper </em>pour IndexedDB qui permet un développement plus rapide avec une syntaxe simple.</li>
- <li><a href="https://github.com/erikolson186/zangodb">ZangoDB </a>: Une interface MongoDB-like pour indexedDB qui prend en charge la plupart des fonctionnalités familières de filtrage, projection, tri, mise à jour et agrégation de MongoDB.</li>
- <li><a href="http://jsstore.net/">JsStore </a>: Un contenu indexedDB avec SQL comme syntaxe.</li>
- <li><a href="https://github.com/mWater/minimongo">MiniMongo</a></li>
- <li><a href="https://pouchdb.com">PouchDB</a></li>
-</ul>
+{{DefaultAPISidebar("IndexedDB")}}
+
+IndexedDB est une API de bas niveau qui permet le stockage côté client de quantités importantes de données structurées, incluant des fichiers/blobs. Cette API utilise des index afin de permettre des recherches performantes sur ces données. Alors que [Web Storage](/fr/docs/Web/API/Web_Storage_API) est utile pour stocker de petites quantités de données, il est moins utile pour stocker de grandes quantités de données structurées. IndexedDB fournit une solution. Cette page est le point d'entrée pour tout ce qui concerne IndexedDB sur MDN - vous y trouverez les liens vers la référence complète de l'API et les guides d'utilisation, le support par les navigateurs, et quelques explications des concepts clés.
+
+{{AvailableInWorkers}}
+
+> **Note :** L'API IndexedDB est puissante, mais elle peut sembler trop compliquée dans les cas simples. Si vous préferez une API plus simple, essayez des librairies comme [localForage](https://localforage.github.io/localForage/), [dexie.js](http://www.dexie.org/), [ZangoDB](https://github.com/erikolson186/zangodb), [PouchDB](https://pouchdb.com/), [idb](https://www.npmjs.com/package/idb), [idb-keyval](https://www.npmjs.com/package/idb-keyval), [JsStore](http://jsstore.net/) et [lovefield](https://github.com/google/lovefield) qui offrent de nombreux avantages aux développeurs de IndexedDB.
+
+## Concepts clés et utilisation
+
+IndexedDB est un système de gestion de base de données transactionnel, similaire à un SGBD relationnel basé sur SQL. Cependant contrairement aux SGBD relationnels, qui utilisent des tables avec des colonnes fixes, IndexedDB est une base de données orientée objet basée sur JavaScript. IndexedDB vous permet de stocker et de récupérer des objets qui sont indexés avec une **clef**; tout objet supporté par [l'algorithme de clônage structuré](/fr/docs/Web/API/Web_Workers_API/algorithme_clonage_structure) peut être stocké. Vous devez spécifier le schéma de la base de données, ouvrir une connexion à votre base de données, puis récupérer et mettre à jour des données dans une série de **transactions**.
+
+- Plus d'informations sur les [concepts derrière IndexedDB](/fr/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB).
+- Apprenez à utiliser IndexedDB de manière asynchrone à partir des principes fondamentaux grâce à notre guide [Utiliser IndexedDB](/fr/docs/IndexedDB/Using_IndexedDB).
+- Combinez IndexedDB pour le stockage des données en mode déconnecté avec les Service Workers pour stocker des assets en mode déconnecté, comme précisé dans [Faire fonctionner les PWAs en mode déconnecté grâce aux Service workers](/fr/docs/Web/Progressive_web_apps/Offline_Service_workers).
+
+> **Note :** Comme la plupart des solutions de stockage en ligne, IndexedDB suit la politique [same-origin policy](http://www.w3.org/Security/wiki/Same_Origin_Policy). Alors même que vous pouvez accèder à des données stockées au sein d'un domaine, vous ne pouvez pas accéder à des données sur plusieurs domaines.
+
+### Synchrone et asynchrone
+
+Les opérations effectuées par IndexedDB sont réalisées de manière asynchrone, afin de ne pas bloquer l'application. IndexedDB comprend à la fois une API asynchrone et une API synchrone. L'API synchrone était à l'origine uniquement destinée pour un usage avec les [Web workers](/fr/docs/Utilisation_des_web_workers), mais elle a été retirée de la spécification parce qu'il était difficile de savoir si elle était nécessaire. Cependant l'API synchrone pourrait être ré-integrée si il y a une demande suffisante de la part des développeurs web.
+
+### Limites de stockage et critères d'éviction
+
+Il y a un certain nombre de technologies web pour stocker différents types de données côté client (par exemple sur votre disque local). IndexedDB est la plus couramment citée. Le processus par lequel le navigateur calcule combien d'espace il doit allouer aux données web, et ce qu'il doit supprimer quand la limite est atteinte, n'est pas simple et varie entre les différents navigateurs.[ L'article "limites de stockage des navigateurs et critères d'éviction"](/fr/docs/IndexedDB/Browser_storage_limits_and_eviction_criteria) tente d'expliquer ce fonctionnement, au moins pour le cas de Firefox.
+
+## Interfaces
+
+Pour accèder à une base de données, il faut apeller [`open()`](/fr/docs/Web/API/IDBFactory.open) sur l'attribut [`indexedDB`](/fr/docs/Web/API/IDBEnvironment.indexedDB) d'un objet [window](/fr/docs/DOM/window). Cette méthode retourne un objet {{domxref("IDBRequest")}}; Les opérations asynchrones communiquent avec l'application appelante en déclenchant des évènements sur les objets {{domxref("IDBRequest")}}.
+
+### Se connecter à la base de données
+
+- {{domxref("IDBEnvironment")}}
+  - : Fournit un accès aux fonctionnalités d'IndexedDB. Implémenté par les objets {{domxref("window")}} et {{domxref("worker")}}.
+- {{domxref("IDBFactory")}}
+  - : Fournit un accès à la base de données.C'est l'interface implémentée par l'objet global [`indexedDB`](/fr/docs/Web/API/IDBEnvironment.indexedDB) et c'est donc le point d'entrée de l'API.
+- {{domxref("IDBOpenDBRequest")}}
+  - : Représente une requête d'ouverture de la base de données.
+- {{domxref("IDBDatabase")}}
+  - : Représente une connexion à la base de données. C'est le seul moyen d'obtenir une transaction sur la base de données.
+
+### Récupérer et modifier les données
+
+- {{domxref("IDBTransaction")}}
+  - : Représente une transaction. Vous créez une transaction sur la base de données, spécifiez la portée (comme à quel magasin d'objets vous souhaitez accèder), et déterminez le type d'accès désiré (lecture seule ou lecture et écriture).
+- {{domxref("IDBRequest")}}
+  - : Interface générique qui récupère les requêtes à la base de données et fournit un accès aux résultats.
+- {{domxref("IDBObjectStore")}}
+  - : Représente un magasin d'objets qui permet l'accès à un ensemble de données d'une base de données IndexedDB, recherché par clé primaire.
+- {{domxref("IDBIndex")}}
+  - : Permet aussi d'accèder à un sous-ensemble de données d'une base IndexedDB mais utilise un index pour récupérer les enregistrements, au lieu d'une clé primaire. C'est parfois plus rapide qu'un usage de {{domxref("IDBObjectStore")}}.
+- {{domxref("IDBCursor")}}
+  - : Itérateur sur les magasins d'objets et les index.
+- {{domxref("IDBCursorWithValue")}}
+  - : Itérateur sur les magasins d'objets et les index et retourne la valeur courante du curseur.
+- {{domxref("IDBKeyRange")}}
+  - : Définit une portée de valeurs qui peut être utilisée pour récupérer des données de la base de données dans une certaine portée.
+- {{domxref("IDBLocaleAwareKeyRange")}} {{Non-standard_inline}}
+  - : Définit une portée de valeurs qui peut être utilisée pour récupérer des données de la base de données dans une certaine portée, triées en fonction des règles de la localisation spécifiée pour un certain index (voir [`createIndex()`'s optionalParameters](/fr/docs/Web/API/IDBObjectStore/createIndex#Parameters)).
+
+### Interfaces d'événements personnalisés
+
+Cette spécification provoque des évènements avec les interfaces personnalisées suivantes:
+
+- {{domxref("IDBVersionChangeEvent")}}
+  - : `L'interface IDBVersionChangeEvent` indique que la version de la base de données à changé, résultat de la fonction de saisie d'un évènement  {{domxref("IDBOpenDBRequest.onupgradeneeded")}}.
+
+### Interfaces obsolètes
+
+Une précedente version des spécifications a défini ces interfaces, désormais supprimées. Elles sont toujours documentées dans le cas où vous avez besoin de mettre à jour du code déja écrit :
+
+- {{domxref("IDBVersionChangeRequest")}} {{obsolete_inline}}
+  - : Représente une requête de changement de version de la base de données. Le moyen pour changer de version de la base de données a désormais changé (avec un appel de {{domxref("IDBFactory.open")}} sans aussi appeler {{domxref("IDBDatabase.setVersion")}}), et l'interface  {{domxref("IDBOpenDBRequest")}} a désormais la fonction de l'ancienne (supprimée) {{domxref("IDBVersionChangeRequest")}}.
+- {{domxref("IDBDatabaseException")}}  {{obsolete_inline}}
+  - : Représente une exception (erreur) qui peut survenir durant les opérations sur la base de données.
+- {{domxref("IDBTransactionSync")}} {{obsolete_inline}}
+  - : Version synchrone de {{domxref("IDBTransaction")}}.
+- {{domxref("IDBObjectStoreSync")}} {{obsolete_inline}}
+  - : Version synchrone de {{domxref("IDBObjectStore")}}.
+- {{domxref("IDBIndexSync")}} {{obsolete_inline}}
+  - : Version synchrone de  {{domxref("IDBIndex")}}.
+- {{domxref("IDBFactorySync")}} {{obsolete_inline}}
+  - : Version synchrone de {{domxref("IDBFactory")}}.
+- {{domxref("IDBEnvironmentSync")}} {{obsolete_inline}}
+  - : Version synchrone de {{domxref("IDBEnvironment")}}.
+- {{domxref("IDBDatabaseSync")}} {{obsolete_inline}}
+  - : Version synchrone de {{domxref("IDBDatabase")}}.
+- {{domxref("IDBCursorSync")}} {{obsolete_inline}}
+  - : Version synchrone de {{domxref("IDBCursor")}}.
+
+## Exemples
+
+- [eLibri:](http://marco-c.github.io/eLibri/) Une application puissante de bibliothèque et de lecteur de livres électroniques, écrit par Marco Castelluccio, gagnant du _DevDerby IndexedDB_ de Mozilla.
+- [To-do Notifications](https://github.com/chrisdavidmills/to-do-notifications/tree/gh-pages) ([voir la démonstration en ligne](http://mdn.github.io/to-do-notifications/)): L'application de référence pour les exemples de la documentation.
+- [Stocker des images et des fichiers dans IndexedDB](http://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/)
+
+## Spécifications
+
+| Spécification                        | Statut                           | Commentaire         |
+| ------------------------------------ | -------------------------------- | ------------------- |
+| {{SpecName('IndexedDB')}}     | {{Spec2('IndexedDB')}}     | Définition initiale |
+| {{SpecName("IndexedDB 2")}} | {{Spec2("IndexedDB 2")}} |                     |
+
+## Voir aussi
+
+- [localForage](https://localforage.github.io/localForage/): Un _Polyfill_ fournissant une syntaxe clé-valeurs simple pour un stockage côté client; il utilise IndexedDB en arrière plan, mais se retourne d'abord sur WebSQL puis sur localStorage pour les navigateurs qui ne supportent pas IndexedDB.
+- [dexie.js](http://www.dexie.org/) : Un _wrapper_ pour IndexedDB qui permet un développement plus rapide avec une syntaxe simple.
+- [ZangoDB ](https://github.com/erikolson186/zangodb): Une interface MongoDB-like pour indexedDB qui prend en charge la plupart des fonctionnalités familières de filtrage, projection, tri, mise à jour et agrégation de MongoDB.
+- [JsStore ](http://jsstore.net/): Un contenu indexedDB avec SQL comme syntaxe.
+- [MiniMongo](https://github.com/mWater/minimongo)
+- [PouchDB](https://pouchdb.com)
diff --git a/files/fr/web/api/indexeddb_api/using_indexeddb/index.md b/files/fr/web/api/indexeddb_api/using_indexeddb/index.md
index 39097580d4..c51576ca60 100644
--- a/files/fr/web/api/indexeddb_api/using_indexeddb/index.md
+++ b/files/fr/web/api/indexeddb_api/using_indexeddb/index.md
@@ -11,94 +11,93 @@ tags:
 translation_of: Web/API/IndexedDB_API/Using_IndexedDB
 original_slug: Web/API/API_IndexedDB/Using_IndexedDB
 ---
-<p>IndexedDB est un moyen de stocker des données de manière persistante dans un navigateur. Cela vous laisse créer des applications web avec de riches possibilités de requêtes indépendamment de la disponibilité du réseau puisque vos applications peuvent fonctionner en ligne ou hors-ligne.</p>
+IndexedDB est un moyen de stocker des données de manière persistante dans un navigateur. Cela vous laisse créer des applications web avec de riches possibilités de requêtes indépendamment de la disponibilité du réseau puisque vos applications peuvent fonctionner en ligne ou hors-ligne.
 
-<h2 id="À_propos_de_ce_document">À propos de ce document</h2>
+## À propos de ce document
 
-<p>Ce tutoriel vous guide à travers l'utilisation de l'API asynchrone de IndexedDB. Si vous n'êtes pas familier avec le principe de IndexedDB, vous devriez d'abord lire <a href="/fr/docs/Web/API/Indexeddb_API/Basic_Concepts_Behind_IndexedDB">les concepts basiques d'IndexedDB</a>.</p>
+Ce tutoriel vous guide à travers l'utilisation de l'API asynchrone de IndexedDB. Si vous n'êtes pas familier avec le principe de IndexedDB, vous devriez d'abord lire [les concepts basiques d'IndexedDB](/fr/docs/Web/API/Indexeddb_API/Basic_Concepts_Behind_IndexedDB).
 
-<p>Pour la documentation de référence sur l'API d'IndexedDB, voyez l'article <a href="/fr/docs/Web/API/Indexeddb_API">IndexedDB</a> et ses sous-parties, qui détaille les types d'objets utilisés par IndexedDB, ainsi que les méthodes sur l'API asynchrone (l'API synchrone a été retirée de la spécification).</p>
+Pour la documentation de référence sur l'API d'IndexedDB, voyez l'article [IndexedDB](/fr/docs/Web/API/Indexeddb_API) et ses sous-parties, qui détaille les types d'objets utilisés par IndexedDB, ainsi que les méthodes sur l'API asynchrone (l'API synchrone a été retirée de la spécification).
 
-<h2 id="pattern">Modèle de base</h2>
+## Modèle de base
 
-<p>Le modèle de base qu'IndexedDB utilise est le suivant :</p>
+Le modèle de base qu'IndexedDB utilise est le suivant :
 
-<ol>
- <li>Ouvrir une base de données.</li>
- <li>Créer un objet de stockage dans la base de données. </li>
- <li>Démarrer une transaction, et faire des requêtes pour faire quelques opérations sur des bases de données, comme ajouter, ou récupérer des données.</li>
- <li>
-  <div>Attendre que l'exécution soit terminée, en écoutant le bon type d'événement DOM.</div>
- </li>
- <li>
-  <div>Faire quelque chose avec les résultats (qui peuvent être trouvés dans l'objet de la requête).</div>
- </li>
-</ol>
+1.  Ouvrir une base de données.
+2.  Créer un objet de stockage dans la base de données.
+3.  Démarrer une transaction, et faire des requêtes pour faire quelques opérations sur des bases de données, comme ajouter, ou récupérer des données.
+4.  Attendre que l'exécution soit terminée, en écoutant le bon type d'événement DOM.
+5.  Faire quelque chose avec les résultats (qui peuvent être trouvés dans l'objet de la requête).
 
-<p>Maintenant que nous avons ces grands concepts en poche, nous pouvons voir des choses plus concrètes.</p>
+Maintenant que nous avons ces grands concepts en poche, nous pouvons voir des choses plus concrètes.
 
-<h2 id="open">Créer et structurer l'objet de stockage</h2>
+## Créer et structurer l'objet de stockage
 
-<p>Étant donné que la spécification évolue encore, les implémentations actuelles de IndexedDB se cachent sous les préfixes du navigateur. Les fournisseurs de navigateurs peuvent avoir des implémentations différentes de l'API IndexedDB standard jusqu'à ce que la spécification se soit solidifiée. Mais une fois qu'un consensus est atteint sur la norme, les fournisseurs l'implémentent sans les balises de préfixe. Actuellement, certaines implémentations ont supprimé le préfixe : Internet Explorer 10, Firefox 16, Chrome 24. Lorsqu'ils utilisent un préfixe, les navigateurs basés sur Gecko utilisent le préfixe  <code>moz</code>, tandis que les navigateurs WebKit utilisent le préfixe  <code>webkit</code>.</p>
+Étant donné que la spécification évolue encore, les implémentations actuelles de IndexedDB se cachent sous les préfixes du navigateur. Les fournisseurs de navigateurs peuvent avoir des implémentations différentes de l'API IndexedDB standard jusqu'à ce que la spécification se soit solidifiée. Mais une fois qu'un consensus est atteint sur la norme, les fournisseurs l'implémentent sans les balises de préfixe. Actuellement, certaines implémentations ont supprimé le préfixe : Internet Explorer 10, Firefox 16, Chrome 24. Lorsqu'ils utilisent un préfixe, les navigateurs basés sur Gecko utilisent le préfixe `moz`, tandis que les navigateurs WebKit utilisent le préfixe `webkit`.
 
-<h3 id="Utiliser_une_version_expérimentale_dIndexedDB">Utiliser une version expérimentale d'IndexedDB</h3>
+### Utiliser une version expérimentale d'IndexedDB
 
-<p>Au cas où vous souhaiteriez tester votre code dans des navigateurs qui utilisent toujours un préfixe, vous pouvez utiliser le code suivant :  </p>
+Au cas où vous souhaiteriez tester votre code dans des navigateurs qui utilisent toujours un préfixe, vous pouvez utiliser le code suivant :
 
-<pre class="brush: js">// Sur la ligne suivante, vous devez inclure les préfixes des implémentations que vous souhaitez tester.
+```js
+// Sur la ligne suivante, vous devez inclure les préfixes des implémentations que vous souhaitez tester.
 window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
 // N'UTILISEZ PAS "var indexedDB = ..." si vous n'êtes pas dans une fonction.
 // De plus, vous pourriez avoir besoin de réferences à des objets window.IDB*:
 window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
 window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange
-// (Mozilla n'a jamais préfixé ces objets, donc nous n'avons pas besoin de window.mozIDB*)</pre>
+// (Mozilla n'a jamais préfixé ces objets, donc nous n'avons pas besoin de window.mozIDB*)
+```
 
-<p>Faites attention aux implémentations qui utilisent un préfixe ; elles peuvent être boguées, incomplètes, voire suivre une ancienne version de la spécification. Il n'est donc pas recommandé d'utiliser en production. Il serait préférable de ne pas supporter ces navigateurs :</p>
+Faites attention aux implémentations qui utilisent un préfixe ; elles peuvent être boguées, incomplètes, voire suivre une ancienne version de la spécification. Il n'est donc pas recommandé d'utiliser en production. Il serait préférable de ne pas supporter ces navigateurs :
 
-<pre class="brush: js">if (!window.indexedDB) {
+```js
+if (!window.indexedDB) {
     window.alert("Votre navigateur ne supporte pas une version stable d'IndexedDB. Quelques fonctionnalités ne seront pas disponibles.")
 }
-</pre>
+```
 
-<h3 id="Ouvrir_une_base_de_données">Ouvrir une base de données</h3>
+### Ouvrir une base de données
 
-<p>On commence l'ensemble du processus comme ceci :</p>
+On commence l'ensemble du processus comme ceci :
 
-<pre class="brush: js">// Ouvrons notre première base
+```js
+// Ouvrons notre première base
 var request = window.indexedDB.open("MyTestDatabase", 3);
-</pre>
+```
 
-<p>Vous avez vu ? Ouvrir une base de données est comme n'importe quelle autre opération — vous avez juste à le "demander".</p>
+Vous avez vu ? Ouvrir une base de données est comme n'importe quelle autre opération — vous avez juste à le "demander".
 
-<p>La requête "open" n'ouvre pas la base de données ni ne démarre une transaction aussitôt. L'appel de la fonction <code>open()</code> retourne un objet <a href="/en-US/docs/IndexedDB/IDBOpenDBRequest"><code>IDBOpenDBRequest</code></a> avec un résultat  (success) ou une valeur d'erreur qui permet de la gérer comme un évènement. La plupart des autres fonctions asynchrones dans IndexedDB fonctionnent de la même façon ; Elles retournent un objet <a href="/en-US/docs/IndexedDB/IDBRequest"><code>IDBRequest</code></a> avec le résultat ou une erreur. Le résultat de la fonction "open" est une instance de <code><a href="/en-US/docs/IndexedDB/IDBDatabase">IDBDatabase</a></code>.</p>
+La requête "open" n'ouvre pas la base de données ni ne démarre une transaction aussitôt. L'appel de la fonction `open()` retourne un objet [`IDBOpenDBRequest`](/en-US/docs/IndexedDB/IDBOpenDBRequest) avec un résultat  (success) ou une valeur d'erreur qui permet de la gérer comme un évènement. La plupart des autres fonctions asynchrones dans IndexedDB fonctionnent de la même façon ; Elles retournent un objet [`IDBRequest`](/en-US/docs/IndexedDB/IDBRequest) avec le résultat ou une erreur. Le résultat de la fonction "open" est une instance de [`IDBDatabase`](/en-US/docs/IndexedDB/IDBDatabase).
 
-<p>Le second paramètre de la méthode open est la version de la base de données. La version de la base détermine le schéma de celle-ci — Les objets stockés dans la base de données et leur structure. Si la base de données n'existe pas déjà, elle est créée via l'opération <code>open()</code>, puis, un événement <code>onupgradeneeded</code> est déclenché et vous créez le schéma de la base dans le gestionnaire pour cet événement. Si la base de données existe, mais que vous spécifiez un numéro de version plus élevé, un événement <code>onupgradeneeded</code> est déclenché  immédiatement, vous permettant de mettre à jour le schéma dans son gestionnaire – plus d'informations dans <a href="#Updating_the_version_of_the_database">Updating the version of the database</a> plus bas et la page référence {{ domxref("IDBFactory.open") }}.</p>
+Le second paramètre de la méthode open est la version de la base de données. La version de la base détermine le schéma de celle-ci — Les objets stockés dans la base de données et leur structure. Si la base de données n'existe pas déjà, elle est créée via l'opération `open()`, puis, un événement `onupgradeneeded` est déclenché et vous créez le schéma de la base dans le gestionnaire pour cet événement. Si la base de données existe, mais que vous spécifiez un numéro de version plus élevé, un événement `onupgradeneeded` est déclenché  immédiatement, vous permettant de mettre à jour le schéma dans son gestionnaire – plus d'informations dans [Updating the version of the database](#Updating_the_version_of_the_database) plus bas et la page référence {{ domxref("IDBFactory.open") }}.
 
-<div class="warning">
-<p><strong>Attention :</strong> Le numéro de version est un nombre "<code>unsigned long long</code>" ce qui signifie qu'il peut s'agir d'un entier très grand. Cela veut également dire que vous ne pouvez pas utiliser de réél, sinon, il sera converti au nombre entier le plus proche (inférieur) et la transaction peut ne pas démarrer ou ne pas déclencher l'événement <code>upgradeneeded</code>. Par exemple, n'utilisez pas 2.4 comme un numéro de version :<br>
- <code>var request = indexedDB.open("MyTestDatabase", 2.4); // Ne faites pas ça, même si la version sera arrondie à 2</code></p>
-</div>
+> **Attention :** Le numéro de version est un nombre "`unsigned long long`" ce qui signifie qu'il peut s'agir d'un entier très grand. Cela veut également dire que vous ne pouvez pas utiliser de réél, sinon, il sera converti au nombre entier le plus proche (inférieur) et la transaction peut ne pas démarrer ou ne pas déclencher l'événement `upgradeneeded`. Par exemple, n'utilisez pas 2.4 comme un numéro de version :
+> `var request = indexedDB.open("MyTestDatabase", 2.4); // Ne faites pas ça, même si la version sera arrondie à 2`
 
-<h4 id="Générer_des_gestionnaires">Générer des gestionnaires</h4>
+#### Générer des gestionnaires
 
-<p>La première chose que vous ferez avec la plupart des requêtes que vous générerez sera d'ajouter des gestionnaires de succès ou d'erreurs :</p>
+La première chose que vous ferez avec la plupart des requêtes que vous générerez sera d'ajouter des gestionnaires de succès ou d'erreurs :
 
-<pre class="brush: js">request.onerror = function(event) {
+```js
+request.onerror = function(event) {
   // Faire quelque chose avec request.errorCode !
 };
 request.onsuccess = function(event) {
   // Faire quelque chose avec request.result !
-};</pre>
+};
+```
 
-<p>Laquelle de ces deux fonctions, <code>onsuccess()</code> or <code>onerror()</code>, sera appelée ? Si tout se passe bien, un évènement success (qui est un évènement DOM dont la propriété <code>type</code> est à <code>"success"</code>) est déclenché avec <code>request</code> comme cible. Une fois déclenché, la fonction <code>onsuccess()</code> de <code>request</code> est lancée avec l'évènement success comme argument. S’il y avait un quelconque problème, un évènement erreur (qui est un évènement DOM dont la propriété <code>type</code> est définie à <code>"error"</code>) est lancée dans <code>request</code>. Cela déclenche la fonction <code><code>onerror()</code></code> avec l'évènement d'erreur comme argument.</p>
+Laquelle de ces deux fonctions, `onsuccess()` or `onerror()`, sera appelée ? Si tout se passe bien, un évènement success (qui est un évènement DOM dont la propriété `type` est à `"success"`) est déclenché avec `request` comme cible. Une fois déclenché, la fonction `onsuccess()` de `request` est lancée avec l'évènement success comme argument. S’il y avait un quelconque problème, un évènement erreur (qui est un évènement DOM dont la propriété `type` est définie à `"error"`) est lancée dans `request`. Cela déclenche la fonction `onerror()` avec l'évènement d'erreur comme argument.
 
-<p>L'API IndexedDB est conçue pour minimiser le recours à la gestion des erreurs, donc vous ne serez pas amené à voir beaucoup d'évènements erreurs (du moins, pas tant que vous utilisez l'API !). Cependant, dans le cas d'une ouverture de base de données, il y a quelques conditions qui génèrent des évènements d'erreurs. Le problème le plus courant est que l'utilisateur a décidé d'interdire l'accès à la création de base de données. Un des principaux objectifs d’IndexedDB est de permettre un stockage important de données pour l'utilisation hors-ligne. (Pour en savoir plus sur la capacité de stockage de chaque navigateur, voyez <a href="/en/IndexedDB#Storage_limits">Storage limits</a>).</p>
+L'API IndexedDB est conçue pour minimiser le recours à la gestion des erreurs, donc vous ne serez pas amené à voir beaucoup d'évènements erreurs (du moins, pas tant que vous utilisez l'API !). Cependant, dans le cas d'une ouverture de base de données, il y a quelques conditions qui génèrent des évènements d'erreurs. Le problème le plus courant est que l'utilisateur a décidé d'interdire l'accès à la création de base de données. Un des principaux objectifs d’IndexedDB est de permettre un stockage important de données pour l'utilisation hors-ligne. (Pour en savoir plus sur la capacité de stockage de chaque navigateur, voyez [Storage limits](/en/IndexedDB#Storage_limits)).
 
-<p>Évidemment, les navigateurs ne peuvent permettre qu'une publicité en ligne ou un site malicieux pollue votre ordinateur, donc ils informent l’utilisateur la première fois qu'une application web tente d'ouvrir un espace de stockage IndexedDB. L'utilisateur peut choisir de permettre ou refuser l'accès. En ce qui concerne l’utilisation d’IndexedDB en mode privé, les données restent en mémoire jusqu’à ce que la session privée soit close (Navigation privée pour Firefox et mode Incognito pour Chrome, mais dans Firefox, cela <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=781982">n'est pas encore implémenté</a> depuis novembre 2015, aussi vous ne pouvez pas utiliser IndexedDB dans le mode privé de Firefo du tout).</p>
+Évidemment, les navigateurs ne peuvent permettre qu'une publicité en ligne ou un site malicieux pollue votre ordinateur, donc ils informent l’utilisateur la première fois qu'une application web tente d'ouvrir un espace de stockage IndexedDB. L'utilisateur peut choisir de permettre ou refuser l'accès. En ce qui concerne l’utilisation d’IndexedDB en mode privé, les données restent en mémoire jusqu’à ce que la session privée soit close (Navigation privée pour Firefox et mode Incognito pour Chrome, mais dans Firefox, cela [n'est pas encore implémenté](https://bugzilla.mozilla.org/show_bug.cgi?id=781982) depuis novembre 2015, aussi vous ne pouvez pas utiliser IndexedDB dans le mode privé de Firefo du tout).
 
-<p>Maintenant, en admettant qu’un utilisateur ait accepté la création d'une base, et que vous receviez un évènement "success" qui déclenche le callback <em>(rappel)</em> "success" ; que se passe-il après ? La requête a génèré un appel à <code>indexedDB.open()</code>, donc <code>request.result</code> est une instance de <code>IDBDatabase</code>, et vous voulez garder en mémoire cela pour plus tard. Votre code devrait ressembler à ceci :</p>
+Maintenant, en admettant qu’un utilisateur ait accepté la création d'une base, et que vous receviez un évènement "success" qui déclenche le callback _(rappel)_ "success" ; que se passe-il après ? La requête a génèré un appel à `indexedDB.open()`, donc `request.result` est une instance de `IDBDatabase`, et vous voulez garder en mémoire cela pour plus tard. Votre code devrait ressembler à ceci :
 
-<pre class="brush: js">var db;
+```js
+var db;
 var request = indexedDB.open("MyTestDatabase");
 request.onerror = function(event) {
   alert("Pourquoi ne permettez-vous pas à ma web app d'utiliser IndexedDB?!");
@@ -106,95 +105,76 @@ request.onerror = function(event) {
 request.onsuccess = function(event) {
   db = event.target.result;
 };
-</pre>
+```
 
-<h4 id="Gérer_les_erreurs">Gérer les erreurs</h4>
+#### Gérer les erreurs
 
-<p>Comme mentionné ci-dessus, les évènements d’erreur génèrent des info-bulles. Ils  sont rattachés à la requête qui a généré l’erreur, puis la bulle de l'évènement est transmis à la transaction, et enfin à l'objet de la base de données. Si vous souhaitez éviter d'ajouter un gestionnaire d'erreurs à chaque requête, vous pouvez en ajouter un unique à l'objet de la base de donnée, de cette manière :</p>
+Comme mentionné ci-dessus, les évènements d’erreur génèrent des info-bulles. Ils  sont rattachés à la requête qui a généré l’erreur, puis la bulle de l'évènement est transmis à la transaction, et enfin à l'objet de la base de données. Si vous souhaitez éviter d'ajouter un gestionnaire d'erreurs à chaque requête, vous pouvez en ajouter un unique à l'objet de la base de donnée, de cette manière :
 
-<pre class="brush: js">db.onerror = function(event) {
+```js
+db.onerror = function(event) {
   // Gestionnaire d'erreur générique pour toutes les erreurs de requêtes de cette base
   alert("Database error: " + event.target.errorCode);
 };
-</pre>
+```
 
-<p>Une des erreurs courantes possibles lorsqu'on ouvre une base de données, c'est <code>VER_ERR</code>. Celle-ci indique que la version de la base de données stockée sur le disque est <em>supérieure </em>à la version que vous êtes en train d'essayer d'ouvrir. C'est un cas qui doit toujours être pris en considération par le gestionnaire d'erreurs.</p>
+Une des erreurs courantes possibles lorsqu'on ouvre une base de données, c'est `VER_ERR`. Celle-ci indique que la version de la base de données stockée sur le disque est _supérieure_ à la version que vous êtes en train d'essayer d'ouvrir. C'est un cas qui doit toujours être pris en considération par le gestionnaire d'erreurs.
 
-<h3 id="Créer_ou_mettre_à_jour_une_version_de_base_de_données">Créer ou mettre à jour une version de base de données</h3>
+### Créer ou mettre à jour une version de base de données
 
-<p>Lorsque vous créez une nouvelle base de données, ou que vous augmentez le numéro de version d'une base existante (en spécifiant un numéro de version supérieur à celui que vous aviez auparavant, lors de {{ anch("Ouvrir une base de données") }}), l'évènement <code>onupgradeneeded</code> sera déclenché et un objet <code>IDBVersionChangeEvent</code> sera passé à un évènement <code>onversionchange</code> dans <code>request.result</code> (la variable <code>db</code> dans l'exemple). Dans le gestionnaire d’évènement <code>upgradeneeded</code>, vous devez créer les objets de stockage requis pour cette version de base :</p>
+Lorsque vous créez une nouvelle base de données, ou que vous augmentez le numéro de version d'une base existante (en spécifiant un numéro de version supérieur à celui que vous aviez auparavant, lors de {{ anch("Ouvrir une base de données") }}), l'évènement `onupgradeneeded` sera déclenché et un objet `IDBVersionChangeEvent` sera passé à un évènement `onversionchange` dans `request.result` (la variable `db` dans l'exemple). Dans le gestionnaire d’évènement `upgradeneeded`, vous devez créer les objets de stockage requis pour cette version de base :
 
-<pre class="brush:js;">// Cet évènement est seulement implémenté dans des navigateurs récents
+```js
+// Cet évènement est seulement implémenté dans des navigateurs récents
 request.onupgradeneeded = function(event) {
   var db = event.target.result;
 
   // Crée un objet de stockage pour cette base de données
   var objectStore = db.createObjectStore("name", { keyPath: "myKey" });
-};</pre>
-
-<p>Dans ce cas, la base de données disposera aussitôt des objets de stockage de la version précédente de la base, donc vous n’aurez pas à créer de nouveau ces objets de stockage. Vous aurez seulement besoin de créer de nouveaux objets de stockage, ou d'en supprimer de la version précédente si vous n'en avez plus besoin. Si vous avez besoin de changer un objet de stockage existant  (par exemple, pour changer la <code>keyPath</code>), alors vous devez supprimer l’ancien objet de stockage et le créer à nouveau avec les nouveaux paramètres. Notez que ceci supprimera les informations dans l'objet de stockage ! Si vous avez besoin de sauvegarder ces informations, vous devez les lire et les sauvegarder quelque part avant de mettre à jour la base de données.</p>
-
-<p>Essayer de créer un objet de stockage avec un nom déjà existant (ou essayer de supprimer un objet de stockage avec un nom qui n'existe pas encore) renverra une erreur. </p>
-
-<p>Si l'évènement <code>onupgradeneeded</code> quitte avec succès, le gestionnaire <code>onsuccess</code> de la requête d'ouverture de la base de données sera déclenché. </p>
-
-<p>Blink/Webkit supporte la version courante de la spécification, telle que livrée dans Chrome 23+ et Opera 17+ ; IE10+ également. Les autres implémentations plus anciennes ne prennent pas en charge <code>indexedDB.open(name, version).onupgradeneeded</code>. Pour plus d'informations sur la mise à jour de version de base de données sur les anciens Webkit/Blink, référez vous à <a href="/en/IndexedDB/IDBDatabase#setVersion%28%29_.0A.0ADeprecated">IDBDatabase reference article</a>.</p>
-
-<h3 id="Structurer_la_base_de_données">Structurer la base de données</h3>
-
-<p>Maintenant, structurons la base de données. IndexedDB utilise des objets de stockage plutôt que des tableaux, et une seule base de données peut contenir un nombre quelconque d'objets de stockage. Chaque fois qu'une valeur est stockée dans un objet de stockage, elle est associée à une clé. Il y a différentes manières pour une clé d'être définie, selon que l'objet de stockage utilise un <a href="/en/IndexedDB#gloss_key_path">key path</a> <em>(chemin de clé)</em> ou un <a href="/en/IndexedDB#gloss_key_generator">key generator</a> <em>(générateur de clé)</em>.</p>
-
-<p>Le tableau suivant montre les différentes manières d'attribuer des clés.</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Key Path <em>chemin de clé </em>(<code>keyPath</code>)</th>
-   <th scope="col">Key Generator <em>générateur de clé </em>(<code>autoIncrement</code>)</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>Non</td>
-   <td>Non</td>
-   <td>L'objet de stockage peut contenir n'importe quel type de valeur, même des valeurs primitives comme des nombres ou des chaînes de caractères. Vous devez fournir un argument clé séparé chaque fois que vous souhaitez ajouter une nouvelle valeur.</td>
-  </tr>
-  <tr>
-   <td>Oui</td>
-   <td>Non</td>
-   <td>L'objet de stockage peut contenir des objets JavaScript. Les objets doivent avoir une propriété qui a le même nom que le key path.</td>
-  </tr>
-  <tr>
-   <td>Non</td>
-   <td>Oui</td>
-   <td>L'objet de stockage peut contenir n'importe quel type de valeur. La clé est générée pour vous automatiquement, ou vous pouvez fournir un argument  clé séparé si vous voulez utiliser une clé spécifique.</td>
-  </tr>
-  <tr>
-   <td>Oui</td>
-   <td>Oui</td>
-   <td>L'objet de stockage peut contenir des objets JavaScript. Normalement, une clé est générée, et sa valeur est stockée dans l'objet dans une propriété avec le même nom que le key path. Cependant, si une telle propriété existe, sa valeur est utilisée en tant que clé, plutôt que la génération d'une nouvelle clé.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>Vous pouvez aussi créer des index sur un objet de stockage, à condition que l'objet de stockage contienne des objets, et non des primitives. Un index vous permet de consulter les valeurs stockées dans un objet de stockage en utilisant la valeur d'une propriété de l'objet stocké, plutôt que la clé de l'objet.</p>
-
-<p>En outre, les index ont la capacité d'appliquer des contraintes simples sur les données stockées. En paramétrant l'option <code>unique</code> lorsque l'on crée un index, ce dernier fait que deux objets ne peuvent être enregistrés en ayant la même valeur pour le chemin de clé de l'index. Par exemple, si vous avez un objet de stockage qui contient un ensemble de personnes, et que vous voulez vous assurer que deux personnes n’aient pas la même adresse de courriel, vous pouvez utiliser un index avec le paramètre <code>unique</code> à <code>true</code>.</p>
-
-<p>Cela peut sembler confus, mais ce simple exemple devrait illustrer ces concepts. D'abord, nous définissons quelques données client à utiliser dans notre exemple :</p>
-
-<pre class="brush: js">// Voici à quoi ressemblent nos données client.
+};
+```
+
+Dans ce cas, la base de données disposera aussitôt des objets de stockage de la version précédente de la base, donc vous n’aurez pas à créer de nouveau ces objets de stockage. Vous aurez seulement besoin de créer de nouveaux objets de stockage, ou d'en supprimer de la version précédente si vous n'en avez plus besoin. Si vous avez besoin de changer un objet de stockage existant  (par exemple, pour changer la `keyPath`), alors vous devez supprimer l’ancien objet de stockage et le créer à nouveau avec les nouveaux paramètres. Notez que ceci supprimera les informations dans l'objet de stockage ! Si vous avez besoin de sauvegarder ces informations, vous devez les lire et les sauvegarder quelque part avant de mettre à jour la base de données.
+
+Essayer de créer un objet de stockage avec un nom déjà existant (ou essayer de supprimer un objet de stockage avec un nom qui n'existe pas encore) renverra une erreur.
+
+Si l'évènement `onupgradeneeded` quitte avec succès, le gestionnaire `onsuccess` de la requête d'ouverture de la base de données sera déclenché.
+
+Blink/Webkit supporte la version courante de la spécification, telle que livrée dans Chrome 23+ et Opera 17+ ; IE10+ également. Les autres implémentations plus anciennes ne prennent pas en charge `indexedDB.open(name, version).onupgradeneeded`. Pour plus d'informations sur la mise à jour de version de base de données sur les anciens Webkit/Blink, référez vous à [IDBDatabase reference article](/en/IndexedDB/IDBDatabase#setVersion%28%29_.0A.0ADeprecated).
+
+### Structurer la base de données
+
+Maintenant, structurons la base de données. IndexedDB utilise des objets de stockage plutôt que des tableaux, et une seule base de données peut contenir un nombre quelconque d'objets de stockage. Chaque fois qu'une valeur est stockée dans un objet de stockage, elle est associée à une clé. Il y a différentes manières pour une clé d'être définie, selon que l'objet de stockage utilise un [key path](/en/IndexedDB#gloss_key_path) _(chemin de clé)_ ou un [key generator](/en/IndexedDB#gloss_key_generator) _(générateur de clé)_.
+
+Le tableau suivant montre les différentes manières d'attribuer des clés.
+
+| Key Path _chemin de clé_ (`keyPath`) | Key Generator _générateur de clé_ (`autoIncrement`) | Description                                                                                                                                                                                                                                                                                                          |
+| ------------------------------------ | --------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Non                                  | Non                                                 | L'objet de stockage peut contenir n'importe quel type de valeur, même des valeurs primitives comme des nombres ou des chaînes de caractères. Vous devez fournir un argument clé séparé chaque fois que vous souhaitez ajouter une nouvelle valeur.                                                                   |
+| Oui                                  | Non                                                 | L'objet de stockage peut contenir des objets JavaScript. Les objets doivent avoir une propriété qui a le même nom que le key path.                                                                                                                                                                                   |
+| Non                                  | Oui                                                 | L'objet de stockage peut contenir n'importe quel type de valeur. La clé est générée pour vous automatiquement, ou vous pouvez fournir un argument  clé séparé si vous voulez utiliser une clé spécifique.                                                                                                            |
+| Oui                                  | Oui                                                 | L'objet de stockage peut contenir des objets JavaScript. Normalement, une clé est générée, et sa valeur est stockée dans l'objet dans une propriété avec le même nom que le key path. Cependant, si une telle propriété existe, sa valeur est utilisée en tant que clé, plutôt que la génération d'une nouvelle clé. |
+
+Vous pouvez aussi créer des index sur un objet de stockage, à condition que l'objet de stockage contienne des objets, et non des primitives. Un index vous permet de consulter les valeurs stockées dans un objet de stockage en utilisant la valeur d'une propriété de l'objet stocké, plutôt que la clé de l'objet.
+
+En outre, les index ont la capacité d'appliquer des contraintes simples sur les données stockées. En paramétrant l'option `unique` lorsque l'on crée un index, ce dernier fait que deux objets ne peuvent être enregistrés en ayant la même valeur pour le chemin de clé de l'index. Par exemple, si vous avez un objet de stockage qui contient un ensemble de personnes, et que vous voulez vous assurer que deux personnes n’aient pas la même adresse de courriel, vous pouvez utiliser un index avec le paramètre `unique` à `true`.
+
+Cela peut sembler confus, mais ce simple exemple devrait illustrer ces concepts. D'abord, nous définissons quelques données client à utiliser dans notre exemple :
+
+```js
+// Voici à quoi ressemblent nos données client.
 const customerData = [
   { ssn: "444-44-4444", name: "Bill", age: 35, email: "bill@company.com" },
   { ssn: "555-55-5555", name: "Donna", age: 32, email: "donna@home.org" }
-];</pre>
+];
+```
 
-<p>Bien sûr, vous n'utiliseriez pas le numéro de sécurité sociale comme clé primaire dans une table clients parce que tout le monde n'a pas de numéro de sécurité sociale, et vous pourriez stocker leur date de naissance au lieu de leur âge, mais laissons ces choix non pertinents pour des raisons de commodité et continuons.</p>
+Bien sûr, vous n'utiliseriez pas le numéro de sécurité sociale comme clé primaire dans une table clients parce que tout le monde n'a pas de numéro de sécurité sociale, et vous pourriez stocker leur date de naissance au lieu de leur âge, mais laissons ces choix non pertinents pour des raisons de commodité et continuons.
 
-<p>Maintenant, voyons la création d'une base de données pour stocker ces données :</p>
+Maintenant, voyons la création d'une base de données pour stocker ces données :
 
-<pre class="brush: js">const dbName = "the_name";
+```js
+const dbName = "the_name";
 
 var request = indexedDB.open(dbName, 2);
 
@@ -226,27 +206,27 @@ request.onupgradeneeded = function(event) {
       customerObjectStore.add(customerData[i]);
     }
   }
-};</pre>
-
-<div>Comme indiqué précédemment, <code>onupgradeneeded</code> est le seul endroit où vous pouvez modifier la structure de la base de données. Dans cette méthode, vous pouvez créer et supprimer des objets de stockage, construire et supprimer des index.</div>
+};
+```
 
-<div></div>
+Comme indiqué précédemment, `onupgradeneeded` est le seul endroit où vous pouvez modifier la structure de la base de données. Dans cette méthode, vous pouvez créer et supprimer des objets de stockage, construire et supprimer des index.
 
-<p>Les objets de stockage sont créés avec un simple appel à <code>createObjectStore()</code>. La méthode prend le nom du stockage et un paramètre de type objet. Même si les paramètres sont optionnels, ils vous laissent définir d'importantes propriétés et redéfinir le type d'un objet de stockage que vous voulez créer. Dans notre cas, nous avons demandé un objet de stockage nommé "customers" et défini un <code>keyPath</code>, qui est la propriété rendant unique un objet individuel dans le stockage. Cette propriété dans l'exemple est "ssn" puisqu'un numéro de sécurité sociale est garanti unique. "ssn" doit être présent sur chaque objet stocké dans <code>objectStore</code>.</p>
+Les objets de stockage sont créés avec un simple appel à `createObjectStore()`. La méthode prend le nom du stockage et un paramètre de type objet. Même si les paramètres sont optionnels, ils vous laissent définir d'importantes propriétés et redéfinir le type d'un objet de stockage que vous voulez créer. Dans notre cas, nous avons demandé un objet de stockage nommé "customers" et défini un `keyPath`, qui est la propriété rendant unique un objet individuel dans le stockage. Cette propriété dans l'exemple est "ssn" puisqu'un numéro de sécurité sociale est garanti unique. "ssn" doit être présent sur chaque objet stocké dans `objectStore`.
 
-<p>Nous avons aussi demandé un index nommé "name" qui examine la propriété <code>name</code> dans les objets stockés. Comme avec<code> createObjectStore()</code>, <code>createIndex()</code> prend un paramètre de type objet facultatif (<code>options</code>) qui définit le type d’index à créer. Ajouter des objets qui n’auront pas de propriété <code>name</code> fonctionnera, mais ces objets n'apparaîtront pas dans l'index "name".</p>
+Nous avons aussi demandé un index nommé "name" qui examine la propriété `name` dans les objets stockés. Comme avec` createObjectStore()`, `createIndex()` prend un paramètre de type objet facultatif (`options`) qui définit le type d’index à créer. Ajouter des objets qui n’auront pas de propriété `name` fonctionnera, mais ces objets n'apparaîtront pas dans l'index "name".
 
-<p>Nous pouvons récupérer les objets client stockés, en utilisant directement leur <code>ssn</code> dans l'objet de stockage, ou en utilisant leur nom via l’index <code>name</code>. Pour en savoir plus sur ce fonctionnement, se référer à la section <a href="/en/IndexedDB/Using_IndexedDB#Using_an_index">utiliser un index</a>.</p>
+Nous pouvons récupérer les objets client stockés, en utilisant directement leur `ssn` dans l'objet de stockage, ou en utilisant leur nom via l’index `name`. Pour en savoir plus sur ce fonctionnement, se référer à la section [utiliser un index](/en/IndexedDB/Using_IndexedDB#Using_an_index).
 
-<h3 id="Utiliser_le_générateur_de_clés">Utiliser le générateur de clés</h3>
+### Utiliser le générateur de clés
 
-<p>Paramétrer un marqueur <code>autoIncrement</code> lorsque l'on crée un objet de stockage activera le générateur de clés pour cet objet de stockage. Par défault, ce marqueur n'est pas défini.</p>
+Paramétrer un marqueur `autoIncrement` lorsque l'on crée un objet de stockage activera le générateur de clés pour cet objet de stockage. Par défault, ce marqueur n'est pas défini.
 
-<p>Avec la générateur de clés, une clé sera générée automatiquement lorsque vous ajoutez une valeur dans un objet de stockage. Le compteur initial pour la génération de clés est toujours défini à 1 lorsque l'objet de stockage est créé pour la première fois. Fondamentalement, une nouvelle clé auto-générée sera incrémentée de 1 par rapport à la précédente. Le nombre courant d'un générateur de clé ne décroit jamais, à moins qu'un résultat d'opération sur la base soit annulé, par exemple, l'abandon d'une transaction sur la base. En conséquence, supprimer un enregistrement, voire l'ensemble des enregistrements d'un objet de stockage n'affecte jamais le générateur de clés d'un objet de stockage.</p>
+Avec la générateur de clés, une clé sera générée automatiquement lorsque vous ajoutez une valeur dans un objet de stockage. Le compteur initial pour la génération de clés est toujours défini à 1 lorsque l'objet de stockage est créé pour la première fois. Fondamentalement, une nouvelle clé auto-générée sera incrémentée de 1 par rapport à la précédente. Le nombre courant d'un générateur de clé ne décroit jamais, à moins qu'un résultat d'opération sur la base soit annulé, par exemple, l'abandon d'une transaction sur la base. En conséquence, supprimer un enregistrement, voire l'ensemble des enregistrements d'un objet de stockage n'affecte jamais le générateur de clés d'un objet de stockage.
 
-<p>Nous pouvons créer un autre objet de stockage avec un générateur de clés comme ci-dessous :</p>
+Nous pouvons créer un autre objet de stockage avec un générateur de clés comme ci-dessous :
 
-<pre class="brush: js">// Ouverture d'indexedDB.
+```js
+// Ouverture d'indexedDB.
 var request = indexedDB.open(dbName, 3);
 
 request.onupgradeneeded = function (event) {
@@ -258,52 +238,52 @@ request.onupgradeneeded = function (event) {
 
     // Puisque l'objet "names" a un générateur de clés, la clé pour la valeur name est générée automatiquement.
     // Les enregistrements ajoutés ressembleront à ceci :
-    // key : 1 =&gt; value : "Bill"
-    // key : 2 =&gt; value : "Donna"
+    // key : 1 => value : "Bill"
+    // key : 2 => value : "Donna"
     for (var i in customerData) {
         objStore.add(customerData[i].name);
     }
-}</pre>
+}
+```
 
-<p>Pour plus de détails sur le générateur de clés, voyez <a href="http://www.w3.org/TR/IndexedDB/#key-generator-concept">"W3C Key Generators"</a>.</p>
+Pour plus de détails sur le générateur de clés, voyez ["W3C Key Generators"](http://www.w3.org/TR/IndexedDB/#key-generator-concept).
 
-<h2 id="Ajouter_récupérer_et_supprimer_des_données">Ajouter, récupérer et supprimer des données</h2>
+## Ajouter, récupérer et supprimer des données
 
-<p>Avant de faire quoi que ce soit avec votre nouvelle base de données, vous aurez besoin de démarrer une transaction. Les transactions viennent de l'objet base de données, et vous devez spécifier sur quel objet vous souhaitez faire pointer la transaction. Une fois dans la transaction, vous pouvez accéder à l'objet de stockage qui contient vos données et faire vos requêtes. Puis, vous devez décider si vous allez appliquer des changements à la base de données, ou si vous avez juste besoin de la lire. Les transactions disposent de trois modes disponibles: <code>readonly</code> <em>(lecture seule)</em>, <code>readwrite</code> <em>(lecture/écriture)</em>, et <code>versionchange</code> <em>(changement de version)</em>.</p>
+Avant de faire quoi que ce soit avec votre nouvelle base de données, vous aurez besoin de démarrer une transaction. Les transactions viennent de l'objet base de données, et vous devez spécifier sur quel objet vous souhaitez faire pointer la transaction. Une fois dans la transaction, vous pouvez accéder à l'objet de stockage qui contient vos données et faire vos requêtes. Puis, vous devez décider si vous allez appliquer des changements à la base de données, ou si vous avez juste besoin de la lire. Les transactions disposent de trois modes disponibles: `readonly` _(lecture seule)_, `readwrite` _(lecture/écriture)_, et `versionchange` _(changement de version)_.
 
-<p>Pour changer le "schéma" ou la structure de la base de données — qui implique de créer ou supprimer des objets de stockage ou des index — la transaction doit être en mode <code>versionchange</code>. Cette transaction est ouverte en appelant la méthode {{domxref("IDBFactory.open")}}  avec une <code>version</code> spécifiée. (Dans les navigateurs WebKit, qui n'ont pas implémenté la dernière spécification, la méthode {{domxref("IDBFactory.open")}} prend seulement un paramètre, le <code>nom</code> de la base de données ; Vous devez donc appeler {{domxref("IDBVersionChangeRequest.setVersion")}} pour établir la transaction <code>versionchange</code>.)</p>
+Pour changer le "schéma" ou la structure de la base de données — qui implique de créer ou supprimer des objets de stockage ou des index — la transaction doit être en mode `versionchange`. Cette transaction est ouverte en appelant la méthode {{domxref("IDBFactory.open")}}  avec une `version` spécifiée. (Dans les navigateurs WebKit, qui n'ont pas implémenté la dernière spécification, la méthode {{domxref("IDBFactory.open")}} prend seulement un paramètre, le `nom` de la base de données ; Vous devez donc appeler {{domxref("IDBVersionChangeRequest.setVersion")}} pour établir la transaction `versionchange`.)
 
-<p>Pour lire les enregistrements d'un objet de stockage existant, la transaction peut être en mode <code>readonly</code>ou <code>readwrite</code>. Pour appliquer des changements à un objet de stockage existant, la transaction doit être en mode <code>readwrite</code>. Vous démarrez ces transactions avec {{domxref("IDBDatabase.transaction")}}. La méthode accepte deux paramètres : les <code>storeNames</code> (la portée, définie comme un tableau des objets de stockage auxquels vous souhaitez accéder) et le <code>mode</code> (<code>readonly</code> ou <code>readwrite</code>) pour la transaction. La méthode retourne un objet de transaction contenant la méthode {{domxref("IDBIndex.objectStore")}}, que vous utilisez pour accéder à votre objet de stockage. Par défaut, lorsqu'aucun mode n'est spécifié, les transactions démarrent en mode <code>readonly</code>.</p>
+Pour lire les enregistrements d'un objet de stockage existant, la transaction peut être en mode `readonly`ou `readwrite`. Pour appliquer des changements à un objet de stockage existant, la transaction doit être en mode `readwrite`. Vous démarrez ces transactions avec {{domxref("IDBDatabase.transaction")}}. La méthode accepte deux paramètres : les `storeNames` (la portée, définie comme un tableau des objets de stockage auxquels vous souhaitez accéder) et le `mode` (`readonly` ou `readwrite`) pour la transaction. La méthode retourne un objet de transaction contenant la méthode {{domxref("IDBIndex.objectStore")}}, que vous utilisez pour accéder à votre objet de stockage. Par défaut, lorsqu'aucun mode n'est spécifié, les transactions démarrent en mode `readonly`.
 
-<div class="note">
-<p><strong>Note :</strong> À partir de Firefox 40, les transactions IndexedDB ont des garanties de durabilité relachées afin d'augmenter les performances (voir {{Bug("1112702")}}.) Auparavant, lors d'une transaction <code>readwrite</code> {{domxref("IDBTransaction.oncomplete")}} était déclenché seulement lorsque les données étaient garanties pour une écriture sur le disque. Dans Firefox 40+ l'évènement <code>complete</code> est déclenché une fois que l'OS a autorisé l'écriture de données, mais potentiellement avant que les données soient réellement écrites sur le disque. L'évènement <code>complete</code> peut ainsi être livré plus vite qu'avant, cependant, il existe un petit risque que l'ensemble de la transaction soit perdu si l'OS s'effondre ou si un problème électrique survient avant que les données soient écrites. Comme de tels évènements catastrophiques sont rares, la plupart des utilisateurs n'ont pas à s'en soucier. Si vous devez vous assurer de la durabilité pour quelconque raison que ce soit (par exemple, vous stockez des données critiques qui ne peuvent être recalculées plus tard) vous pouvez forcer une transaction à écrire sur le disque avant que l'évènement <code>complete</code> ne soit délivré en créant une transaction utilisant un mode expérimental (non-standard) <code>readwriteflush</code>  (se référer à {{domxref("IDBDatabase.transaction")}}.</p>
-</div>
+> **Note :** À partir de Firefox 40, les transactions IndexedDB ont des garanties de durabilité relachées afin d'augmenter les performances (voir {{Bug("1112702")}}.) Auparavant, lors d'une transaction `readwrite` {{domxref("IDBTransaction.oncomplete")}} était déclenché seulement lorsque les données étaient garanties pour une écriture sur le disque. Dans Firefox 40+ l'évènement `complete` est déclenché une fois que l'OS a autorisé l'écriture de données, mais potentiellement avant que les données soient réellement écrites sur le disque. L'évènement `complete` peut ainsi être livré plus vite qu'avant, cependant, il existe un petit risque que l'ensemble de la transaction soit perdu si l'OS s'effondre ou si un problème électrique survient avant que les données soient écrites. Comme de tels évènements catastrophiques sont rares, la plupart des utilisateurs n'ont pas à s'en soucier. Si vous devez vous assurer de la durabilité pour quelconque raison que ce soit (par exemple, vous stockez des données critiques qui ne peuvent être recalculées plus tard) vous pouvez forcer une transaction à écrire sur le disque avant que l'évènement `complete` ne soit délivré en créant une transaction utilisant un mode expérimental (non-standard) `readwriteflush`  (se référer à {{domxref("IDBDatabase.transaction")}}.
 
-<p>Vous pouvez accélérer l'accès à vos données en utilisant le bon mode et la bonne portée dans la transaction. Voici deux astuces :</p>
+Vous pouvez accélérer l'accès à vos données en utilisant le bon mode et la bonne portée dans la transaction. Voici deux astuces :
 
-<ul>
- <li>Lorsque vous définissez la portée, spécifiez uniquement les objets de stockage dont vous avez besoin. De cette manière, vous pouvez exécuter plusieurs transactions simultanément sans qu'elles se chevauchent.</li>
- <li>Spécifier le mode <code>readwrite</code> pour une transaction seulement lorsque c'est nécessaire. Vous pouvez exécuter simulaténement plusieurs transactions <code>readonly</code> avec chevauchements, mais vous ne pouvez avoir qu'une seule transaction <code>readwrite</code> dans un objet de stockage. Pour en savoir plus, regardez la définition des <dfn><a href="/en-US/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB#Database">transactions</a></dfn> dans l'article des <a href="/en-US/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB">concepts de base</a>.</li>
-</ul>
+- Lorsque vous définissez la portée, spécifiez uniquement les objets de stockage dont vous avez besoin. De cette manière, vous pouvez exécuter plusieurs transactions simultanément sans qu'elles se chevauchent.
+- Spécifier le mode `readwrite` pour une transaction seulement lorsque c'est nécessaire. Vous pouvez exécuter simulaténement plusieurs transactions `readonly` avec chevauchements, mais vous ne pouvez avoir qu'une seule transaction `readwrite` dans un objet de stockage. Pour en savoir plus, regardez la définition des _[transactions](/en-US/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB#Database)_ dans l'article des [concepts de base](/en-US/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB).
 
-<h3 id="Ajouter_des_données_dans_la_base_de_données">Ajouter des données dans la base de données</h3>
+### Ajouter des données dans la base de données
 
-<p>Si vous venez juste de créer une base de données, alors vous souhaitez probablement écrire dedans. Voici comment ça se passe :</p>
+Si vous venez juste de créer une base de données, alors vous souhaitez probablement écrire dedans. Voici comment ça se passe :
 
-<pre class="brush:js;">var transaction = db.transaction(["customers"], "readwrite");
+```js
+var transaction = db.transaction(["customers"], "readwrite");
 // Note: Les anciennes implémentations utilisent la constante dépréciée IDBTransaction.READ_WRITE au lieu de "readwrite".
 // Au cas où vous souhaitiez mettre en oeuvre ces implémentations, vous pouvez écrire :
-// var transaction = db.transaction(["customers"], IDBTransaction.READ_WRITE);</pre>
+// var transaction = db.transaction(["customers"], IDBTransaction.READ_WRITE);
+```
 
-<p>La fonction <code>transaction()</code> prend deux arguments (bien que l'un d'eux soit facultatif) et retourne un objet transaction. Le premier argument est une liste d'objets de stockage que la transaction va traiter. Vous pouvez passer un tableau vide si vous voulez que la transaction traite l'ensemble des objets de stockage, mais ne le faites pas, parce que la spécification indique qu'un tableau vide devrait générer une InvalidAccessError. Si vous ne spécifiez rien pour le deuxième argument, vous démarrerez une transaction "read-only" <em>(lecture seule)</em> . Si vous souhaitez aussi écrire, vous devrez passer l'option <code>"readwrite"</code> <em>(lecture/écriture)</em>.</p>
+La fonction `transaction()` prend deux arguments (bien que l'un d'eux soit facultatif) et retourne un objet transaction. Le premier argument est une liste d'objets de stockage que la transaction va traiter. Vous pouvez passer un tableau vide si vous voulez que la transaction traite l'ensemble des objets de stockage, mais ne le faites pas, parce que la spécification indique qu'un tableau vide devrait générer une InvalidAccessError. Si vous ne spécifiez rien pour le deuxième argument, vous démarrerez une transaction "read-only" _(lecture seule)_ . Si vous souhaitez aussi écrire, vous devrez passer l'option `"readwrite"` _(lecture/écriture)_.
 
-<p>Maintenant que vous avez une transaction, vous devez comprendre sa durée de vie. Les transactions sont étroitement liées à la boucle de l'évènement. Si vous établissez une transaction et si vous sortez de la boucle d'évènements sans l'utiliser, alors la transaction deviendra inactive. La seule manière de garder la transaction active est d'y insérer une requête. Lorsque la requête est terminée, vous obtenez un évènement DOM, et en supposant que la requête ait réussi, vous avez une autre opportunité d'étendre la transaction durant ce "callback" <em>(rappel)</em>. Si vous sortez de la boucle d'évènements sans étendre la transaction, alors elle devient inactive, etc… Tant qu'il reste des demandes en attente, la transaction reste active. La durée de vie des transactions est vraiment très simple, mais cela peut prendre un peu de temps de la maîtriser. Quelques exemples supplémentaires aideront. Si vous commencez à voir des codes d'erreur <code>TRANSACTION_INACTIVE_ERR</code>, alors vous avez raté quelque chose.</p>
+Maintenant que vous avez une transaction, vous devez comprendre sa durée de vie. Les transactions sont étroitement liées à la boucle de l'évènement. Si vous établissez une transaction et si vous sortez de la boucle d'évènements sans l'utiliser, alors la transaction deviendra inactive. La seule manière de garder la transaction active est d'y insérer une requête. Lorsque la requête est terminée, vous obtenez un évènement DOM, et en supposant que la requête ait réussi, vous avez une autre opportunité d'étendre la transaction durant ce "callback" _(rappel)_. Si vous sortez de la boucle d'évènements sans étendre la transaction, alors elle devient inactive, etc… Tant qu'il reste des demandes en attente, la transaction reste active. La durée de vie des transactions est vraiment très simple, mais cela peut prendre un peu de temps de la maîtriser. Quelques exemples supplémentaires aideront. Si vous commencez à voir des codes d'erreur `TRANSACTION_INACTIVE_ERR`, alors vous avez raté quelque chose.
 
-<p>Les transactions peuvent recevoir des évènements DOM de trois types : <code>error</code> <em>(erreur)</em>, <code>abort</code> <em>(abandonnée)</em> et <code>complete</code> <em>(terminée)</em>. Nous avons déjà parlé du fait que les <code>error</code> créent des bulles, ainsi une transaction peut recevoir des évènements d'erreur venant de n'importe quelle requête l'ayant généré. Un point plus subtil ici, c'est que le comportement par défaut d'une erreur est d'abandonner la transaction là où elle a eu lieu. A moins que vous gériez l’erreur en appelant d'abord <code>stopPropagation()</code> sur l’évènement erreur, puis que vous fassiez quelque chose d'autre, la transaction complète sera annulée. Cette conception vous oblige à réfléchir et gérer les erreurs, mais vous pouvez toujours ajouter un gestionnaire d'erreurs "fourre-tout" à la base de données si la gestion d'erreurs fines est trop lourde. Si vous ne gérez pas un évènement d'erreur, ou si vous appelez <code>abort()</code> sur la transaction, alors la transaction est annulée et un évènement <code>abort</code> est lancé sur la transaction. Sinon, une fois que toutes les demandes en instance sont terminées, vous recevez un évènement <code>complete</code>. Si vous faites beaucoup d'opérations sur les bases de données, alors suivre la transaction plutôt que les requêtes individuelles, peut certainement vous aider.</p>
+Les transactions peuvent recevoir des évènements DOM de trois types : `error` _(erreur)_, `abort` _(abandonnée)_ et `complete` _(terminée)_. Nous avons déjà parlé du fait que les `error` créent des bulles, ainsi une transaction peut recevoir des évènements d'erreur venant de n'importe quelle requête l'ayant généré. Un point plus subtil ici, c'est que le comportement par défaut d'une erreur est d'abandonner la transaction là où elle a eu lieu. A moins que vous gériez l’erreur en appelant d'abord `stopPropagation()` sur l’évènement erreur, puis que vous fassiez quelque chose d'autre, la transaction complète sera annulée. Cette conception vous oblige à réfléchir et gérer les erreurs, mais vous pouvez toujours ajouter un gestionnaire d'erreurs "fourre-tout" à la base de données si la gestion d'erreurs fines est trop lourde. Si vous ne gérez pas un évènement d'erreur, ou si vous appelez `abort()` sur la transaction, alors la transaction est annulée et un évènement `abort` est lancé sur la transaction. Sinon, une fois que toutes les demandes en instance sont terminées, vous recevez un évènement `complete`. Si vous faites beaucoup d'opérations sur les bases de données, alors suivre la transaction plutôt que les requêtes individuelles, peut certainement vous aider.
 
-<p>Maintenant que vous avons une transaction, nous avons besoin de récupérer l'objet de stockage de celle-ci. Les transactions vous permettent seulement d'avoir l'objet de stockage que vous avez spécifié lors de la création de la transaction. Puis, vous pouvez ajouter toutes les données dont vous avez besoin.</p>
+Maintenant que vous avons une transaction, nous avons besoin de récupérer l'objet de stockage de celle-ci. Les transactions vous permettent seulement d'avoir l'objet de stockage que vous avez spécifié lors de la création de la transaction. Puis, vous pouvez ajouter toutes les données dont vous avez besoin.
 
-<pre class="brush: js">// Faire quelque chose lorsque toutes les données sont ajoutées à la base de données.
+```js
+// Faire quelque chose lorsque toutes les données sont ajoutées à la base de données.
 transaction.oncomplete = function(event) {
   alert("All done!");
 };
@@ -318,28 +298,30 @@ for (var i in customerData) {
   request.onsuccess = function(event) {
     // event.target.result == customerData[i].ssn;
   };
-}</pre>
-
-<div>La méthode <code>result</code> d’une requête venant d'un appel à <code>add()</code> est la clé de la valeur qui vient d'être ajoutée. Dans ce cas, ce devrait être équivalent à la propriété <code>ssn</code> de l'objet qui vient d'être ajouté, puisque l'objet de stockage utilise la propriété <code>ssn</code> pour le key path. Notez que la fonction <code>add()</code> requiert qu'aucun objet déjà présent dans la base ait la même clé. Si vous essayez de modifier une entrée existante, ou si vous ne vous en occupez pas, vous pouvez utiliser la fonction <code>put()</code>, comme montré plus loin dans la section {{ anch("Updating an entry in the database") }}.</div>
+}
+```
 
-<div></div>
+La méthode `result` d’une requête venant d'un appel à `add()` est la clé de la valeur qui vient d'être ajoutée. Dans ce cas, ce devrait être équivalent à la propriété `ssn` de l'objet qui vient d'être ajouté, puisque l'objet de stockage utilise la propriété `ssn` pour le key path. Notez que la fonction `add()` requiert qu'aucun objet déjà présent dans la base ait la même clé. Si vous essayez de modifier une entrée existante, ou si vous ne vous en occupez pas, vous pouvez utiliser la fonction `put()`, comme montré plus loin dans la section {{ anch("Updating an entry in the database") }}.
 
-<h3 id="Supprimer_des_données_dans_la_base_de_données">Supprimer des données dans la base de données</h3>
+### Supprimer des données dans la base de données
 
-<p>Supprimer des données est très similaire :</p>
+Supprimer des données est très similaire :
 
-<pre class="brush: js">var request = db.transaction(["customers"], "readwrite")
+```js
+var request = db.transaction(["customers"], "readwrite")
                 .objectStore("customers")
                 .delete("444-44-4444");
 request.onsuccess = function(event) {
   // c'est supprimé !
-};</pre>
+};
+```
 
-<h3 id="Récupérer_des_données_de_la_base_de_données">Récupérer des données de la base de données</h3>
+### Récupérer des données de la base de données
 
-<p>Maintenant que la base de données dispose de quelques informations, vous pouvez les récupérer de plusieurs façons. D'abord, la plus simple <code>get()</code>. Vous devez fournir une clé pour récupérer la valeur, comme ceci :</p>
+Maintenant que la base de données dispose de quelques informations, vous pouvez les récupérer de plusieurs façons. D'abord, la plus simple `get()`. Vous devez fournir une clé pour récupérer la valeur, comme ceci :
 
-<pre class="brush: js">var transaction = db.transaction(["customers"]);
+```js
+var transaction = db.transaction(["customers"]);
 var objectStore = transaction.objectStore("customers");
 var request = objectStore.get("444-44-4444");
 request.onerror = function(event) {
@@ -348,30 +330,30 @@ request.onerror = function(event) {
 request.onsuccess = function(event) {
   // Faire quelque chose avec request.result !
   alert("Name for SSN 444-44-4444 is " + request.result.name);
-};</pre>
+};
+```
 
-<p>Ça fait beaucoup de code pour une "simple" récupération. Voici comment le raccourcir un peu, en supposant que vous gériez les erreurs au niveau de la base de données :</p>
+Ça fait beaucoup de code pour une "simple" récupération. Voici comment le raccourcir un peu, en supposant que vous gériez les erreurs au niveau de la base de données :
 
-<pre class="brush: js">db.transaction("customers").objectStore("customers").get("444-44-4444").onsuccess = function(event) {
+```js
+db.transaction("customers").objectStore("customers").get("444-44-4444").onsuccess = function(event) {
   alert("Name for SSN 444-44-4444 is " + event.target.result.name);
-};</pre>
-
-<div>Vous voyez comment ça fonctionne ? Comme il n'y a qu'un seul objet de stockage, vous pouvez éviter de passer une liste d'objets dont vous avez besoin dans votre transaction, et juste passer le nom comme une chaîne de caractères. Aussi, nous faisons seulement une lecture de la base, donc nous n'avons pas besoin d'une transaction <code>"readwrite"</code>. Appeler une <code>transaction()</code> sans spécifier de mode nous donne une transaction <code>"readonly"</code>. Une autre subtilité ici est que nous n'enregistrons pas l'objet de notre requête dans une variable. Comme l’évènement DOM a la requête comme cible, vous pouvez utiliser l'évènement pour récupérer la propriété <code>result</code>.</div>
+};
+```
 
-<div></div>
+Vous voyez comment ça fonctionne ? Comme il n'y a qu'un seul objet de stockage, vous pouvez éviter de passer une liste d'objets dont vous avez besoin dans votre transaction, et juste passer le nom comme une chaîne de caractères. Aussi, nous faisons seulement une lecture de la base, donc nous n'avons pas besoin d'une transaction `"readwrite"`. Appeler une `transaction()` sans spécifier de mode nous donne une transaction `"readonly"`. Une autre subtilité ici est que nous n'enregistrons pas l'objet de notre requête dans une variable. Comme l’évènement DOM a la requête comme cible, vous pouvez utiliser l'évènement pour récupérer la propriété `result`.
 
-<p>Vous pouvez accélérer l’accès à vos données  en limitant la portée et le mode de la transaction. Voici deux astuces :</p>
+Vous pouvez accélérer l’accès à vos données  en limitant la portée et le mode de la transaction. Voici deux astuces :
 
-<ul>
- <li>Lors de la définition de la <a href="/fr/docs/IndexedDB/Using_IndexedDB$edit#scope">scope</a> <em>(portée)</em>, spécifiez seulement l’objet de stockage dont vous avez besoin. De cette manière, vous pouvez avoir de multiples opérations simultanées sans qu’elles se chevauchent.</li>
- <li>Spécifier une transaction en mode readwrite uniquement lorsque c’est nécessaire. Vous pouvez avoir de multiples opérations simultanées en lecture seule, mais vous ne pouvez avoir qu’une transaction "readwrite" <em>(lecture/écriture)</em> sur un objet de stockage. Pour en savoir plus, voir la définition relative aux <a href="/en-US/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB#gloss_transaction">transactions in the Basic Concepts article</a>.</li>
-</ul>
+- Lors de la définition de la [scope](/fr/docs/IndexedDB/Using_IndexedDB$edit#scope) _(portée)_, spécifiez seulement l’objet de stockage dont vous avez besoin. De cette manière, vous pouvez avoir de multiples opérations simultanées sans qu’elles se chevauchent.
+- Spécifier une transaction en mode readwrite uniquement lorsque c’est nécessaire. Vous pouvez avoir de multiples opérations simultanées en lecture seule, mais vous ne pouvez avoir qu’une transaction "readwrite" _(lecture/écriture)_ sur un objet de stockage. Pour en savoir plus, voir la définition relative aux [transactions in the Basic Concepts article](/en-US/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB#gloss_transaction).
 
-<h3 id="Mettre_à_jour_une_entrée_dans_la_base_de_données">Mettre à jour une entrée dans la base de données</h3>
+### Mettre à jour une entrée dans la base de données
 
-<p>Maintenant que nous avons récupéréré quelques données, les mettre à jour et en insérer est assez simple. Mettons à jour l’exemple précédent :</p>
+Maintenant que nous avons récupéréré quelques données, les mettre à jour et en insérer est assez simple. Mettons à jour l’exemple précédent :
 
-<pre class="brush: js">var objectStore = db.transaction(["customers"], "readwrite").objectStore("customers");
+```js
+var objectStore = db.transaction(["customers"], "readwrite").objectStore("customers");
 var request = objectStore.get("444-44-4444");
 request.onerror = function(event) {
   // Gestion des erreurs!
@@ -391,19 +373,19 @@ request.onsuccess = function(event) {
    requestUpdate.onsuccess = function(event) {
      // Succès - la donnée est mise à jour !
    };
-};</pre>
+};
+```
 
-<div>Ici, nous avons créé une variable <code>objectStore</code> et nous avons recherché un enregistrement d’un client, identifié par la valeur ssn (<code>444-44-4444</code>). Nous avons ensuite mis le résultat dans une variable (<code>data</code>), mis à jour la propriété <code>age</code> de cet objet, puis créé une deuxième requête (<code>requestUpdate</code>) pour mettre l'enregistrement du client dans l'<code>objectStore</code>, en écrasant la valeur précédente.</div>
+Ici, nous avons créé une variable `objectStore` et nous avons recherché un enregistrement d’un client, identifié par la valeur ssn (`444-44-4444`). Nous avons ensuite mis le résultat dans une variable (`data`), mis à jour la propriété `age` de cet objet, puis créé une deuxième requête (`requestUpdate`) pour mettre l'enregistrement du client dans l'`objectStore`, en écrasant la valeur précédente.
 
-<div class="note">
-<p><strong>Note :</strong> dans ce cas, nous avons eu à spécifier une transaction <code>readwrite</code> puisque nous voulions écrire dans la base, et pas seulement la lire.</p>
-</div>
+> **Note :** dans ce cas, nous avons eu à spécifier une transaction `readwrite` puisque nous voulions écrire dans la base, et pas seulement la lire.
 
-<h3 id="Utiliser_un_curseur">Utiliser un curseur</h3>
+### Utiliser un curseur
 
-<p>Utiliser <code>get()</code> nécessite de connaître la clé que vous souhaitez récupérer. Si vous voulez parcourir toutes les valeurs de l’objet de stockage, alors vous devez utiliser un curseur. Voici comment ça marche :</p>
+Utiliser `get()` nécessite de connaître la clé que vous souhaitez récupérer. Si vous voulez parcourir toutes les valeurs de l’objet de stockage, alors vous devez utiliser un curseur. Voici comment ça marche :
 
-<pre class="brush: js">var objectStore = db.transaction("customers").objectStore("customers");
+```js
+var objectStore = db.transaction("customers").objectStore("customers");
 
 objectStore.openCursor().onsuccess = function(event) {
   var cursor = event.target.result;
@@ -414,13 +396,15 @@ objectStore.openCursor().onsuccess = function(event) {
   else {
     alert("No more entries!");
   }
-};</pre>
+};
+```
 
-<p>La fonction <code>openCursor()</code> prend en compte plusieurs arguments. En premier, vous pouvez spécifier une plage de résultats à récupérer en utilisant un objet  "key range" que nous allons voir dans une minute. En deuxième, vous pouvez spécifier la direction vers laquelle vous souhaitez itérer. Dans l’exemple ci-dessus, nous avons itéré tous les objets dans l’ordre ascendant. Le "callback" <em>(rappel)</em> de réussite pour les curseurs est un peu spécial. L'objet cursor lui-même est le <code>result</code> <em>(résutat)</em> de la requête (au-dessus, nous utilisons le raccourci <code>event.target.result</code>). Puis la clé et valeur courante peuvent être trouvées dans les propriétés <code>key</code><em>(clé)</em>  et <code>value</code> <em>(valeur)</em> de l’objet cursor. Si vous souhaitez continuer, vous devez appeler <code>continue()</code> sur le curseur. Lorsque vous avez atteint la fin des données (ou s’il n’y a plus d’entrées qui correspondent à votre requête <code>openCursor()</code> ) , vous aurez toujours votre callback  success, mais la propriété <code>result</code> sera <code>undefined</code>.</p>
+La fonction `openCursor()` prend en compte plusieurs arguments. En premier, vous pouvez spécifier une plage de résultats à récupérer en utilisant un objet  "key range" que nous allons voir dans une minute. En deuxième, vous pouvez spécifier la direction vers laquelle vous souhaitez itérer. Dans l’exemple ci-dessus, nous avons itéré tous les objets dans l’ordre ascendant. Le "callback" _(rappel)_ de réussite pour les curseurs est un peu spécial. L'objet cursor lui-même est le `result` _(résutat)_ de la requête (au-dessus, nous utilisons le raccourci `event.target.result`). Puis la clé et valeur courante peuvent être trouvées dans les propriétés `key`*(clé)*  et `value` _(valeur)_ de l’objet cursor. Si vous souhaitez continuer, vous devez appeler `continue()` sur le curseur. Lorsque vous avez atteint la fin des données (ou s’il n’y a plus d’entrées qui correspondent à votre requête `openCursor()` ) , vous aurez toujours votre callback  success, mais la propriété `result` sera `undefined`.
 
-<p>Une utilisation classique avec les curseurs est de récupérer tous les objets dans un objet de stockage et de les mettre dans un tableau, comme ceci :</p>
+Une utilisation classique avec les curseurs est de récupérer tous les objets dans un objet de stockage et de les mettre dans un tableau, comme ceci :
 
-<pre class="brush: js">var customers = [];
+```js
+var customers = [];
 
 objectStore.openCursor().onsuccess = function(event) {
   var cursor = event.target.result;
@@ -431,23 +415,25 @@ objectStore.openCursor().onsuccess = function(event) {
   else {
     alert("Got all customers: " + customers);
   }
-};</pre>
-
-<div class="note">
-<p><strong>Note :</strong> Mozilla a aussi implémenté <code>getAll()</code> pour gérer ce cas (et <code>getAllKeys()</code>, qui est actuellement caché derrière la préférence <code>dom.indexedDB.experimental</code>  dans about:config) . ceux-ci ne font pas partie d' IndexedDB standard, et peuvent disparaître dans le futur. Nous les avons inclus partceque nous pensons qu'ils sont utiles. Le code suivant fait exactement la même chose que ci-dessus :</p>
-
-<pre class="brush: js">objectStore.getAll().onsuccess = function(event) {
-  alert("Got all customers: " + event.target.result);
-};</pre>
+};
+```
 
-<p>Il y a un coût de performance associé avec la recherche de la propriété <code>value</code> du curseur, parce que l'objet est créé paresseusement. Quand vous utilisez <code>getAll()</code> par exemple, Gecko doit créer tous les objets à la fois. Si vous êtes seulement intéressé par la lecture de chaque clé, pour l'instance, il est beaucoup plus efficace d'utiliser un curseur que <code>getAll()</code>. Si vous essayez d'obtenir un tableau de tous les objets d'un objet de stockage, utilisez <code>getAll()</code>.</p>
-</div>
+> **Note :** Mozilla a aussi implémenté `getAll()` pour gérer ce cas (et `getAllKeys()`, qui est actuellement caché derrière la préférence `dom.indexedDB.experimental`  dans about:config) . ceux-ci ne font pas partie d' IndexedDB standard, et peuvent disparaître dans le futur. Nous les avons inclus partceque nous pensons qu'ils sont utiles. Le code suivant fait exactement la même chose que ci-dessus :
+>
+> ```js
+> objectStore.getAll().onsuccess = function(event) {
+>   alert("Got all customers: " + event.target.result);
+> };
+> ```
+>
+> Il y a un coût de performance associé avec la recherche de la propriété `value` du curseur, parce que l'objet est créé paresseusement. Quand vous utilisez `getAll()` par exemple, Gecko doit créer tous les objets à la fois. Si vous êtes seulement intéressé par la lecture de chaque clé, pour l'instance, il est beaucoup plus efficace d'utiliser un curseur que `getAll()`. Si vous essayez d'obtenir un tableau de tous les objets d'un objet de stockage, utilisez `getAll()`.
 
-<h3 id="Utiliser_un_index">Utiliser un index</h3>
+### Utiliser un index
 
-<p>Le stockage des données des clients utilisant le SSN comme clé est logique puisque le SSN identifie un individu unique. (Que ce soit une bonne idée pour la vie privée est une question différente, et en dehors du champ de cet article). Si vous devez rechercher un client par son nom, vous devrez toutefois faire itérer sur toutes les clés SSN dans la base de données jusqu'à ce que vous trouviez la bonne. La recherche de cette manière serait très lente, alors, vous pouvez utiliser un index.</p>
+Le stockage des données des clients utilisant le SSN comme clé est logique puisque le SSN identifie un individu unique. (Que ce soit une bonne idée pour la vie privée est une question différente, et en dehors du champ de cet article). Si vous devez rechercher un client par son nom, vous devrez toutefois faire itérer sur toutes les clés SSN dans la base de données jusqu'à ce que vous trouviez la bonne. La recherche de cette manière serait très lente, alors, vous pouvez utiliser un index.
 
-<pre class="brush: js line-numbers">// D'abord, assurez-vous de créer un index dans request.onupgradeneeded:
+```js
+// D'abord, assurez-vous de créer un index dans request.onupgradeneeded:
 // objectStore.createIndex("name", "name");
 // Autrement, vous obtiendrez une DOMException.
 
@@ -455,13 +441,15 @@ var index = objectStore.index("name");
 
 index.get("Donna").onsuccess = function(event) {
   alert("Donna's SSN is " + event.target.result.ssn);
-};</pre>
+};
+```
 
-<p>Le "name" du curseur n'est pas unique, donc il pourrait y avoir plus d'une entrée avec le <code>name</code> attribué à  <code>"Donna"</code>. Dans ce cas, vous obtenez toujours celui qui a la valeur clé la plus basse .</p>
+Le "name" du curseur n'est pas unique, donc il pourrait y avoir plus d'une entrée avec le `name` attribué à  `"Donna"`. Dans ce cas, vous obtenez toujours celui qui a la valeur clé la plus basse .
 
-<p>Si vous avez besoin d'accèder à toutes les entrées avec un <code>name</code> donné, vous pouvez utiliser un curseur. Vous pouvez ouvrir deux types différents de curseurs sur les index. Un curseur normal situe la propriété index de l'objet dans l'objet de stockage. Un curseur de clés situe la propriété index des clés utilisées pour stocker l'objet dans l'objet de stockage. Les différences sont illustrées ici :</p>
+Si vous avez besoin d'accèder à toutes les entrées avec un `name` donné, vous pouvez utiliser un curseur. Vous pouvez ouvrir deux types différents de curseurs sur les index. Un curseur normal situe la propriété index de l'objet dans l'objet de stockage. Un curseur de clés situe la propriété index des clés utilisées pour stocker l'objet dans l'objet de stockage. Les différences sont illustrées ici :
 
-<pre class="brush: js">// Utilisation d'un curseur normal pour saisir tous les enregistrements des objets client
+```js
+// Utilisation d'un curseur normal pour saisir tous les enregistrements des objets client
 index.openCursor().onsuccess = function(event) {
   var cursor = event.target.result;
   if (cursor) {
@@ -480,13 +468,15 @@ index.openKeyCursor().onsuccess = function(event) {
     alert("Name: " + cursor.key + ", SSN: " + cursor.value);
     cursor.continue();
   }
-};</pre>
+};
+```
 
-<h3 id="Spécifier_lintervalle_et_la_direction_du_curseur">Spécifier l'intervalle et la direction du curseur</h3>
+### Spécifier l'intervalle et la direction du curseur
 
-<p>Si vous souhaitez limiter l'intervalle de valeurs que vous voyez dans un curseur, vous pouvez utiliser un objet <code>IDBKeyRange</code> et le donner comme premier argument à <code>openCursor()</code> ou <code>openKeyCursor()</code> . Vous pouvez créer un intervalle de clés qui n'autorise qu'une seule clé, ou qui a des limites inférieure et supérieure, ou qui a des bornes inférieure et supérieure. La limite peut être "closed" <em>(fermée)</em> (c'est-à-dire que l'intervalle de clés comprend les valeurs données) ou "open" <em>(ouverte)</em> (c'est-à-dire que la plage de clés n'inclut pas les valeurs données. Voici comment cela fonctionne :</p>
+Si vous souhaitez limiter l'intervalle de valeurs que vous voyez dans un curseur, vous pouvez utiliser un objet `IDBKeyRange` et le donner comme premier argument à `openCursor()` ou `openKeyCursor()` . Vous pouvez créer un intervalle de clés qui n'autorise qu'une seule clé, ou qui a des limites inférieure et supérieure, ou qui a des bornes inférieure et supérieure. La limite peut être "closed" _(fermée)_ (c'est-à-dire que l'intervalle de clés comprend les valeurs données) ou "open" _(ouverte)_ (c'est-à-dire que la plage de clés n'inclut pas les valeurs données. Voici comment cela fonctionne :
 
-<pre class="brush: js">// Correspond seulement à "Donna"
+```js
+// Correspond seulement à "Donna"
 var singleKeyRange = IDBKeyRange.only("Donna");
 
 // Correspond à n'importe quoi contenant "Bill", y compris "Bill"
@@ -508,48 +498,56 @@ index.openCursor(boundKeyRange).onsuccess = function(event) {
     // Faire quelque chose avec la sélection.
     cursor.continue();
   }
-};</pre>
+};
+```
 
-<p>Parfois, vous voudrez peut-être itérer dans l'ordre décroissant plutôt que dans l'ordre croissant (la direction par défaut pour tous les curseurs). Le changement de direction est réalisé en passant <code>prev</code>  à la fonction  <code>openCursor()</code>  antérieure comme second argument :</p>
+Parfois, vous voudrez peut-être itérer dans l'ordre décroissant plutôt que dans l'ordre croissant (la direction par défaut pour tous les curseurs). Le changement de direction est réalisé en passant `prev` à la fonction `openCursor()` antérieure comme second argument :
 
-<pre class="brush: js">objectStore.openCursor(boundKeyRange, "prev").onsuccess = function(event) {
+```js
+objectStore.openCursor(boundKeyRange, "prev").onsuccess = function(event) {
   var cursor = event.target.result;
   if (cursor) {
     // Faire quelque chose avec les entrées.
     cursor.continue();
   }
-};</pre>
+};
+```
 
-<p>Si vous souhaitez simplement spécifier un changement de direction, mais ne pas limiter les résultats, vous pouvez simplement passer "null" comme premier argument :</p>
+Si vous souhaitez simplement spécifier un changement de direction, mais ne pas limiter les résultats, vous pouvez simplement passer "null" comme premier argument :
 
-<pre class="brush: js">objectStore.openCursor(null, "prev").onsuccess = function(event) {
+```js
+objectStore.openCursor(null, "prev").onsuccess = function(event) {
   var cursor = event.target.result;
   if (cursor) {
     // Faire quelque chose avec les entrées.
     cursor.continue();
   }
-};</pre>
+};
+```
 
-<p>Étant donné que l'index "name" n'est pas unique, il peut y avoir plusieurs entrées où le  <code>name</code>  est le même. Notez qu'une telle situation ne peut pas se produire avec les objets stockés car la clé doit toujours être unique. Si vous souhaitez filtrer les doublons pendant l'itération du curseur sur les index, vous pouvez passer  <code>nextunique</code>  (ou  <code>prevunique</code>  si vous revenez en arrière) comme paramètre de direction. Lorsque nextunique ou prevunique sont utilisés, l'entrée avec la clé la plus basse est toujours celle retournée.</p>
+Étant donné que l'index "name" n'est pas unique, il peut y avoir plusieurs entrées où le `name` est le même. Notez qu'une telle situation ne peut pas se produire avec les objets stockés car la clé doit toujours être unique. Si vous souhaitez filtrer les doublons pendant l'itération du curseur sur les index, vous pouvez passer `nextunique` (ou `prevunique` si vous revenez en arrière) comme paramètre de direction. Lorsque nextunique ou prevunique sont utilisés, l'entrée avec la clé la plus basse est toujours celle retournée.
 
-<pre class="brush: js">index.openKeyCursor(null, "nextunique").onsuccess = function(event) {
+```js
+index.openKeyCursor(null, "nextunique").onsuccess = function(event) {
   var cursor = event.target.result;
   if (cursor) {
     // Faire quelque chose avec les entrées.
     cursor.continue();
   }
-};</pre>
+};
+```
 
-<p>Voyez "<a href="/en-US/docs/Web/API/IDBCursor?redirectlocale=en-US&amp;redirectslug=IndexedDB%2FIDBCursor#Constants">IDBCursor Constants</a>" pour les arguments de direction valides.</p>
+Voyez "[IDBCursor Constants](/en-US/docs/Web/API/IDBCursor?redirectlocale=en-US&redirectslug=IndexedDB%2FIDBCursor#Constants)" pour les arguments de direction valides.
 
-<h2 id="La_version_change_alors_quune_application_Web_est_ouverte_dans_un_autre_onglet">La version change alors qu'une application Web est ouverte dans un autre onglet</h2>
+## La version change alors qu'une application Web est ouverte dans un autre onglet
 
-<p>Lorsque votre application Web change de telle sorte qu'une modification de version est nécessaire pour votre base de données, vous devez considérer ce qui se passe si l'utilisateur a l'ancienne version de votre application ouverte dans un onglet, puis charge la nouvelle version de votre application dans une autre . Lorsque vous appelez  <code>open()</code>  avec une version plus grande que la version actuelle de la base de données, toutes les autres bases de données ouvertes doivent reconnaître explicitement la demande avant de commencer à modifier la base de données (un événement  <code>onblocked</code>  <em>(bloqué)</em> est déclenché jusqu'à ce qu'elles soient fermées ou rechargées). Voici comment cela fonctionne :</p>
+Lorsque votre application Web change de telle sorte qu'une modification de version est nécessaire pour votre base de données, vous devez considérer ce qui se passe si l'utilisateur a l'ancienne version de votre application ouverte dans un onglet, puis charge la nouvelle version de votre application dans une autre . Lorsque vous appelez `open()` avec une version plus grande que la version actuelle de la base de données, toutes les autres bases de données ouvertes doivent reconnaître explicitement la demande avant de commencer à modifier la base de données (un événement `onblocked`  _(bloqué)_ est déclenché jusqu'à ce qu'elles soient fermées ou rechargées). Voici comment cela fonctionne :
 
-<pre class="brush: js">var openReq = mozIndexedDB.open("MyTestDatabase", 2);
+```js
+var openReq = mozIndexedDB.open("MyTestDatabase", 2);
 
 openReq.onblocked = function(event) {
-  //  Si un autre onglet est chargé avec la base de données, il doit être fermé 
+  //  Si un autre onglet est chargé avec la base de données, il doit être fermé
   // avant que nous puissions continuer.
   alert("Veuillez fermer tous les ongles ouverts sur ce site!");
 };
@@ -567,9 +565,9 @@ openReq.onsuccess = function(event) {
 }
 
 function useDatabase(db) {
-  // Assurez-vous d'ajouter un gestionnaire pour être averti si une autre page demande 
-  // un changement de version. Nous devons fermer la base de données. 
-  // Cela permet à l'autre page de mettre à niveau la base de données. 
+  // Assurez-vous d'ajouter un gestionnaire pour être averti si une autre page demande
+  // un changement de version. Nous devons fermer la base de données.
+  // Cela permet à l'autre page de mettre à niveau la base de données.
   //  Si vous ne le faites pas, la mise à niveau ne se produira que lorsque l'utilisateur fermera l'onglet .
   db.onversionchange = function(event) {
     db.close();
@@ -577,200 +575,198 @@ function useDatabase(db) {
   };
 
   //  Faire quelque chose avec la base de données .
-}</pre>
+}
+```
 
-<p>Vous devriez également écouter les erreurs  <code>VersionError</code>  pour gérer le cas où les applications déjà ouvertes déclencheraient un code conduisant à une nouvelle tentative d'ouverture de la base de données, mais en utilisant une version désuète.</p>
+Vous devriez également écouter les erreurs `VersionError` pour gérer le cas où les applications déjà ouvertes déclencheraient un code conduisant à une nouvelle tentative d'ouverture de la base de données, mais en utilisant une version désuète.
 
-<h2 id="Sécurité">Sécurité</h2>
+## Sécurité
 
-<p>IndexedDB utilise le principe " same-origin " <em>(même origine)</em>, ce qui signifie qu'il relie le stockage à l'origine du site qui le crée (généralement, c'est le domaine ou le sous-domaine du site), de sorte qu'il ne peut être consulté par aucune autre origine.</p>
+IndexedDB utilise le principe " same-origin " _(même origine)_, ce qui signifie qu'il relie le stockage à l'origine du site qui le crée (généralement, c'est le domaine ou le sous-domaine du site), de sorte qu'il ne peut être consulté par aucune autre origine.
 
-<p>Le contenu de la fenêtre de tiers (par exemple le contenu de {{htmlelement("iframe")}}) peut accèder à IndexedDB pour l'origine dans laquelle il est intégré, à moins que le navigateur ne soit configuré pour <a href="https://support.mozilla.org/en-US/kb/disable-third-party-cookies">ne jamais accepter de cookies tiers</a> (voir le {{bug("1147821")}}).</p>
+Le contenu de la fenêtre de tiers (par exemple le contenu de {{htmlelement("iframe")}}) peut accèder à IndexedDB pour l'origine dans laquelle il est intégré, à moins que le navigateur ne soit configuré pour [ne jamais accepter de cookies tiers](https://support.mozilla.org/en-US/kb/disable-third-party-cookies) (voir le {{bug("1147821")}}).
 
-<h2 id="Avertissement_concernant_larrêt_du_navigateur">Avertissement concernant l'arrêt du navigateur</h2>
+## Avertissement concernant l'arrêt du navigateur
 
-<p>Lorsque le navigateur s'arrête (parce que l'utilisateur a choisi l'option Quit ou Exit), le disque contenant la base de données est supprimé de manière inattendue ou les permissions sont perdues dans le magasin de base de données, les choses suivantes se produisent :</p>
+Lorsque le navigateur s'arrête (parce que l'utilisateur a choisi l'option Quit ou Exit), le disque contenant la base de données est supprimé de manière inattendue ou les permissions sont perdues dans le magasin de base de données, les choses suivantes se produisent :
 
-<ol>
- <li>Chaque transaction sur chaque base de données affectée (ou toutes les bases de données ouvertes, dans le cas de l'arrêt du navigateur) est interrompue avec un  <code>AbortError</code>. L'effet est le même que si {{domxref("IDBTransaction.abort()")}} est appelé sur chaque transaction.</li>
- <li>Une fois toutes les transactions terminées, la connexion à la base de données est fermée .</li>
- <li>Enfin, l'objet {{domxref("IDBDatabase")}} représentant la connexion à la base de données reçoit un évènement {{event("close")}} . Vous pouvez utiliser un gestionnaire d'évènements  {{domxref("IDBDatabase.onclose")}} pour écouter ces évènements, afin de savoir quand une base de données est fermée de façon inattendue .</li>
-</ol>
+1.  Chaque transaction sur chaque base de données affectée (ou toutes les bases de données ouvertes, dans le cas de l'arrêt du navigateur) est interrompue avec un `AbortError`. L'effet est le même que si {{domxref("IDBTransaction.abort()")}} est appelé sur chaque transaction.
+2.  Une fois toutes les transactions terminées, la connexion à la base de données est fermée .
+3.  Enfin, l'objet {{domxref("IDBDatabase")}} représentant la connexion à la base de données reçoit un évènement {{event("close")}} . Vous pouvez utiliser un gestionnaire d'évènements  {{domxref("IDBDatabase.onclose")}} pour écouter ces évènements, afin de savoir quand une base de données est fermée de façon inattendue .
 
-<p>Le comportement décrit ci-dessus est nouveau et n'est disponible que pour les versions de navigateur suivantes : Firefox 50, Google Chrome 31 (approximativement).</p>
+Le comportement décrit ci-dessus est nouveau et n'est disponible que pour les versions de navigateur suivantes : Firefox 50, Google Chrome 31 (approximativement).
 
-<p>Avant ces versions de navigateurs, les transactions étaient interrompues silencieusement et aucun événement {{event ("close")}} n'était déclenché, donc il n'y avait aucun moyen de détecter une fermeture de base de données inattendue.</p>
+Avant ces versions de navigateurs, les transactions étaient interrompues silencieusement et aucun événement {{event ("close")}} n'était déclenché, donc il n'y avait aucun moyen de détecter une fermeture de base de données inattendue.
 
-<p>Étant donné que l'utilisateur peut quitter le navigateur à tout moment, cela signifie que vous ne pouvez pas compter sur une transaction particulière à compléter, et sur les navigateurs plus anciens, vous n'êtes même pas informé quand elles ne sont pas terminées. Il y a plusieurs conséquences à ce comportement.</p>
+Étant donné que l'utilisateur peut quitter le navigateur à tout moment, cela signifie que vous ne pouvez pas compter sur une transaction particulière à compléter, et sur les navigateurs plus anciens, vous n'êtes même pas informé quand elles ne sont pas terminées. Il y a plusieurs conséquences à ce comportement.
 
-<p>Tout d'abord, vous devez vous occuper de toujours laisser votre base de données dans un état cohérent à la fin de chaque transaction. Par exemple, supposons que vous utilisiez IndexedDB pour stocker une liste d'éléments que l'utilisateur est autorisé à éditer. Vous enregistrez la liste après l'édition en effaçant l'objet de stockage puis en écrivant la nouvelle liste. Si vous effacez l'objet de stockage dans une transaction et que vous écrivez la nouvelle liste dans une autre transaction, il existe un danger : si le navigateur se ferme après l'effacement mais avant l'écriture, votre base de données est  vide. Pour éviter cela, vous devez combiner l'effacement et l'écriture en une seule transaction.</p>
+Tout d'abord, vous devez vous occuper de toujours laisser votre base de données dans un état cohérent à la fin de chaque transaction. Par exemple, supposons que vous utilisiez IndexedDB pour stocker une liste d'éléments que l'utilisateur est autorisé à éditer. Vous enregistrez la liste après l'édition en effaçant l'objet de stockage puis en écrivant la nouvelle liste. Si vous effacez l'objet de stockage dans une transaction et que vous écrivez la nouvelle liste dans une autre transaction, il existe un danger : si le navigateur se ferme après l'effacement mais avant l'écriture, votre base de données est  vide. Pour éviter cela, vous devez combiner l'effacement et l'écriture en une seule transaction.
 
-<p>Ensuite, vous ne devez jamais lier les transactions de base de données pour les événements  unload <em>(déchargement</em>). Si l'événement  unload est déclenché par la fermeture du navigateur, toutes les transactions créées dans le gestionnaire d'événements unload ne seront jamais terminées. Une approche intuitive, pour le maintien de certaines informations dans les sessions du navigateur, est de le lire à partir de la base de données, lorsque le navigateur (ou une page particulière) est ouvert, le mettre à jour à mesure que l'utilisateur interagit avec le navigateur, puis l'enregistrer dans la base de données lorsque le navigateur ( ou page) se ferme. Cependant, cela ne fonctionne pas. Les transactions de la base de données sont créées dans le gestionnaire d'événements unload, mais comme elles sont asynchrones, elles sont interrompues avant qu'elles puissent s'exécuter.</p>
+Ensuite, vous ne devez jamais lier les transactions de base de données pour les événements unload _(déchargement_). Si l'événement unload est déclenché par la fermeture du navigateur, toutes les transactions créées dans le gestionnaire d'événements unload ne seront jamais terminées. Une approche intuitive, pour le maintien de certaines informations dans les sessions du navigateur, est de le lire à partir de la base de données, lorsque le navigateur (ou une page particulière) est ouvert, le mettre à jour à mesure que l'utilisateur interagit avec le navigateur, puis l'enregistrer dans la base de données lorsque le navigateur ( ou page) se ferme. Cependant, cela ne fonctionne pas. Les transactions de la base de données sont créées dans le gestionnaire d'événements unload, mais comme elles sont asynchrones, elles sont interrompues avant qu'elles puissent s'exécuter.
 
-<p>En fait, il n'y a aucun moyen de garantir que les transactions IndexedDB seront terminées, même avec un arrêt normal du navigateur. Voir {{bug (870645)}}. Comme solution de rechange pour cette notification d'arrêt normal, vous pouvez suivre vos transactions et ajouter un événement  <code>beforeunload</code>  pour avertir l'utilisateur si des transactions ne sont pas encore terminées au moment du déchargement.</p>
+En fait, il n'y a aucun moyen de garantir que les transactions IndexedDB seront terminées, même avec un arrêt normal du navigateur. Voir {{bug (870645)}}. Comme solution de rechange pour cette notification d'arrêt normal, vous pouvez suivre vos transactions et ajouter un événement `beforeunload` pour avertir l'utilisateur si des transactions ne sont pas encore terminées au moment du déchargement.
 
-<p>Au-moins, avec l'ajout des notifications d'annulation et {{domxref ("IDBDatabase.onclose")}}, vous pouvez savoir quand cela s'est produit.</p>
+Au-moins, avec l'ajout des notifications d'annulation et {{domxref ("IDBDatabase.onclose")}}, vous pouvez savoir quand cela s'est produit.
 
-<h2 id="Le_tri_et_les_langues">Le tri et les langues</h2>
+## Le tri et les langues
 
-<p>Mozilla a implémenté la capacité d'effectuer un tri des données IndexedDB localisées sur Firefox 43+. Par défaut, IndexedDB n'a pas pris en charge l'internationalisation des chaînes de tri, et était trié comme s'il s'agissait d'un texte anglais. Par exemple, "b", "á", "z", "a" devaient être triés comme suit :</p>
+Mozilla a implémenté la capacité d'effectuer un tri des données IndexedDB localisées sur Firefox 43+. Par défaut, IndexedDB n'a pas pris en charge l'internationalisation des chaînes de tri, et était trié comme s'il s'agissait d'un texte anglais. Par exemple, "b", "á", "z", "a" devaient être triés comme suit :
 
-<ul>
- <li>a</li>
- <li>b</li>
- <li>z</li>
- <li>á</li>
-</ul>
+- a
+- b
+- z
+- á
 
-<p>ce qui n'est évidemment pas la façon dont les utilisateurs souhaitent que leurs données soient triées - Aaron et Áaron, par exemple, doivent aller l'un à côté de l'autre dans une liste de contacts. L'obtention d'un tri international approprié exige donc que l'ensemble des données soit appelé dans la mémoire et que le tri soit exécuté par le JavaScript côté client, ce qui n'est pas très efficace.</p>
+ce qui n'est évidemment pas la façon dont les utilisateurs souhaitent que leurs données soient triées - Aaron et Áaron, par exemple, doivent aller l'un à côté de l'autre dans une liste de contacts. L'obtention d'un tri international approprié exige donc que l'ensemble des données soit appelé dans la mémoire et que le tri soit exécuté par le JavaScript côté client, ce qui n'est pas très efficace.
 
-<p>Cette nouvelle fonctionnalité permet aux développeurs de spécifier une "locale" <em>(langue)</em> lors de la création d'un index en utilisant  {{domxref("IDBObjectStore.createIndex()")}}  (vérifiez ses paramètres). Dans ce cas, lorsqu'un curseur est utilisé pour itérer sur l'ensemble de données , et si vous souhaitez spécifier un tri local, vous pouvez utiliser un {{domxref ("IDBLocaleAwareKeyRange")}}.</p>
+Cette nouvelle fonctionnalité permet aux développeurs de spécifier une "locale" _(langue)_ lors de la création d'un index en utilisant {{domxref("IDBObjectStore.createIndex()")}} (vérifiez ses paramètres). Dans ce cas, lorsqu'un curseur est utilisé pour itérer sur l'ensemble de données , et si vous souhaitez spécifier un tri local, vous pouvez utiliser un {{domxref ("IDBLocaleAwareKeyRange")}}.
 
-<p>{{domxref("IDBIndex")}} a également eu de nouvelles propriétés qui lui ont été ajoutées pour spécifier la langue : <code>locale</code> (retourne la langue si elle est spécifiée, ou null sinon) et <code>isAutoLocale</code> (retourne <code>true</code><em> (vrai)</em> si l'index a été créé avec une "locale auto", ce qui signifie que la langue par défaut de la plate-forme est utilisée, sinon <code>false</code>).</p>
+{{domxref("IDBIndex")}} a également eu de nouvelles propriétés qui lui ont été ajoutées pour spécifier la langue : `locale` (retourne la langue si elle est spécifiée, ou null sinon) et `isAutoLocale` (retourne `true` _(vrai)_ si l'index a été créé avec une "locale auto", ce qui signifie que la langue par défaut de la plate-forme est utilisée, sinon `false`).
 
-<div class="note">
-<p><strong>Note :</strong> Cette fonctionnalité est couramment cachée derrière une marque (flag) — pour l'activer et l'expérimenter, aller à about:config et activez <code>dom.indexedDB.experimental</code>.</p>
-</div>
+> **Note :** Cette fonctionnalité est couramment cachée derrière une marque (flag) — pour l'activer et l'expérimenter, aller à about:config et activez `dom.indexedDB.experimental`.
 
-<h2 id="Full_IndexedDB_example">Exemple complet d'IndexedDB</h2>
+## Exemple complet d'IndexedDB
 
-<h3 id="HTML_Content">HTML Content</h3>
+### HTML Content
 
-<pre class="brush: html">&lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;
+```html
+<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
 
-    &lt;h1&gt;IndexedDB Demo: storing blobs, e-publication example&lt;/h1&gt;
-    &lt;div class="note"&gt;
-      &lt;p&gt;
+    <h1>IndexedDB Demo: storing blobs, e-publication example</h1>
+    <div class="note">
+      <p>
         Works and tested with:
-      &lt;/p&gt;
-      &lt;div id="compat"&gt;
-      &lt;/div&gt;
-    &lt;/div&gt;
-
-    &lt;div id="msg"&gt;
-    &lt;/div&gt;
-
-    &lt;form id="register-form"&gt;
-      &lt;table&gt;
-        &lt;tbody&gt;
-          &lt;tr&gt;
-            &lt;td&gt;
-              &lt;label for="pub-title" class="required"&gt;
+      </p>
+      <div id="compat">
+      </div>
+    </div>
+
+    <div id="msg">
+    </div>
+
+    <form id="register-form">
+      <table>
+        <tbody>
+          <tr>
+            <td>
+              <label for="pub-title" class="required">
                 Title:
-              &lt;/label&gt;
-            &lt;/td&gt;
-            &lt;td&gt;
-              &lt;input type="text" id="pub-title" name="pub-title" /&gt;
-            &lt;/td&gt;
-          &lt;/tr&gt;
-          &lt;tr&gt;
-            &lt;td&gt;
-              &lt;label for="pub-biblioid" class="required"&gt;
-                Bibliographic ID:&lt;br/&gt;
-                &lt;span class="note"&gt;(ISBN, ISSN, etc.)&lt;/span&gt;
-              &lt;/label&gt;
-            &lt;/td&gt;
-            &lt;td&gt;
-              &lt;input type="text" id="pub-biblioid" name="pub-biblioid"/&gt;
-            &lt;/td&gt;
-          &lt;/tr&gt;
-          &lt;tr&gt;
-            &lt;td&gt;
-              &lt;label for="pub-year"&gt;
+              </label>
+            </td>
+            <td>
+              <input type="text" id="pub-title" name="pub-title" />
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <label for="pub-biblioid" class="required">
+                Bibliographic ID:<br/>
+                <span class="note">(ISBN, ISSN, etc.)</span>
+              </label>
+            </td>
+            <td>
+              <input type="text" id="pub-biblioid" name="pub-biblioid"/>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <label for="pub-year">
                 Year:
-              &lt;/label&gt;
-            &lt;/td&gt;
-            &lt;td&gt;
-              &lt;input type="number" id="pub-year" name="pub-year" /&gt;
-            &lt;/td&gt;
-          &lt;/tr&gt;
-        &lt;/tbody&gt;
-        &lt;tbody&gt;
-          &lt;tr&gt;
-            &lt;td&gt;
-              &lt;label for="pub-file"&gt;
+              </label>
+            </td>
+            <td>
+              <input type="number" id="pub-year" name="pub-year" />
+            </td>
+          </tr>
+        </tbody>
+        <tbody>
+          <tr>
+            <td>
+              <label for="pub-file">
                 File image:
-              &lt;/label&gt;
-            &lt;/td&gt;
-            &lt;td&gt;
-              &lt;input type="file" id="pub-file"/&gt;
-            &lt;/td&gt;
-          &lt;/tr&gt;
-          &lt;tr&gt;
-            &lt;td&gt;
-              &lt;label for="pub-file-url"&gt;
-                Online-file image URL:&lt;br/&gt;
-                &lt;span class="note"&gt;(same origin URL)&lt;/span&gt;
-              &lt;/label&gt;
-            &lt;/td&gt;
-            &lt;td&gt;
-              &lt;input type="text" id="pub-file-url" name="pub-file-url"/&gt;
-            &lt;/td&gt;
-          &lt;/tr&gt;
-        &lt;/tbody&gt;
-      &lt;/table&gt;
-
-      &lt;div class="button-pane"&gt;
-        &lt;input type="button" id="add-button" value="Add Publication" /&gt;
-        &lt;input type="reset" id="register-form-reset"/&gt;
-      &lt;/div&gt;
-    &lt;/form&gt;
-
-    &lt;form id="delete-form"&gt;
-      &lt;table&gt;
-        &lt;tbody&gt;
-          &lt;tr&gt;
-            &lt;td&gt;
-              &lt;label for="pub-biblioid-to-delete"&gt;
-                Bibliographic ID:&lt;br/&gt;
-                &lt;span class="note"&gt;(ISBN, ISSN, etc.)&lt;/span&gt;
-              &lt;/label&gt;
-            &lt;/td&gt;
-            &lt;td&gt;
-              &lt;input type="text" id="pub-biblioid-to-delete"
-                     name="pub-biblioid-to-delete" /&gt;
-            &lt;/td&gt;
-          &lt;/tr&gt;
-          &lt;tr&gt;
-            &lt;td&gt;
-              &lt;label for="key-to-delete"&gt;
-                Key:&lt;br/&gt;
-                &lt;span class="note"&gt;(for example 1, 2, 3, etc.)&lt;/span&gt;
-              &lt;/label&gt;
-            &lt;/td&gt;
-            &lt;td&gt;
-              &lt;input type="text" id="key-to-delete"
-                     name="key-to-delete" /&gt;
-            &lt;/td&gt;
-          &lt;/tr&gt;
-        &lt;/tbody&gt;
-      &lt;/table&gt;
-      &lt;div class="button-pane"&gt;
-        &lt;input type="button" id="delete-button" value="Delete Publication" /&gt;
-        &lt;input type="button" id="clear-store-button"
-               value="Clear the whole store" class="destructive" /&gt;
-      &lt;/div&gt;
-    &lt;/form&gt;
-
-    &lt;form id="search-form"&gt;
-      &lt;div class="button-pane"&gt;
-        &lt;input type="button" id="search-list-button"
-               value="List database content" /&gt;
-      &lt;/div&gt;
-    &lt;/form&gt;
-
-    &lt;div&gt;
-      &lt;div id="pub-msg"&gt;
-      &lt;/div&gt;
-      &lt;div id="pub-viewer"&gt;
-      &lt;/div&gt;
-      &lt;ul id="pub-list"&gt;
-      &lt;/ul&gt;
-    &lt;/div&gt;</pre>
-
-<h3 id="CSS_Content">CSS Content</h3>
-
-<pre class="brush: css">body {
+              </label>
+            </td>
+            <td>
+              <input type="file" id="pub-file"/>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <label for="pub-file-url">
+                Online-file image URL:<br/>
+                <span class="note">(same origin URL)</span>
+              </label>
+            </td>
+            <td>
+              <input type="text" id="pub-file-url" name="pub-file-url"/>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+
+      <div class="button-pane">
+        <input type="button" id="add-button" value="Add Publication" />
+        <input type="reset" id="register-form-reset"/>
+      </div>
+    </form>
+
+    <form id="delete-form">
+      <table>
+        <tbody>
+          <tr>
+            <td>
+              <label for="pub-biblioid-to-delete">
+                Bibliographic ID:<br/>
+                <span class="note">(ISBN, ISSN, etc.)</span>
+              </label>
+            </td>
+            <td>
+              <input type="text" id="pub-biblioid-to-delete"
+                     name="pub-biblioid-to-delete" />
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <label for="key-to-delete">
+                Key:<br/>
+                <span class="note">(for example 1, 2, 3, etc.)</span>
+              </label>
+            </td>
+            <td>
+              <input type="text" id="key-to-delete"
+                     name="key-to-delete" />
+            </td>
+          </tr>
+        </tbody>
+      </table>
+      <div class="button-pane">
+        <input type="button" id="delete-button" value="Delete Publication" />
+        <input type="button" id="clear-store-button"
+               value="Clear the whole store" class="destructive" />
+      </div>
+    </form>
+
+    <form id="search-form">
+      <div class="button-pane">
+        <input type="button" id="search-list-button"
+               value="List database content" />
+      </div>
+    </form>
+
+    <div>
+      <div id="pub-msg">
+      </div>
+      <div id="pub-viewer">
+      </div>
+      <ul id="pub-list">
+      </ul>
+    </div>
+```
+
+### CSS Content
+
+```css
+body {
   font-size: 0.8em;
   font-family: Sans-Serif;
 }
@@ -854,25 +850,27 @@ input {
 }
 .destructive:active {
   background-color: red;
-}</pre>
+}
+```
 
-<h3 id="JavaScript_Content">JavaScript Content</h3>
+### JavaScript Content
 
-<pre class="brush: js">(function () {
+```js
+(function () {
   var COMPAT_ENVS = [
-    ['Firefox', "&gt;= 16.0"],
+    ['Firefox', ">= 16.0"],
     ['Google Chrome',
-     "&gt;= 24.0 (you may need to get Google Chrome Canary), NO Blob storage support"]
+     ">= 24.0 (you may need to get Google Chrome Canary), NO Blob storage support"]
   ];
   var compat = $('#compat');
   compat.empty();
-  compat.append('&lt;ul id="compat-list"&gt;&lt;/ul&gt;');
+  compat.append('<ul id="compat-list"></ul>');
   COMPAT_ENVS.forEach(function(val, idx, array) {
-    $('#compat-list').append('&lt;li&gt;' + val[0] + ': ' + val[1] + '&lt;/li&gt;');
+    $('#compat-list').append('<li>' + val[0] + ': ' + val[1] + '</li>');
   });
 
   const DB_NAME = 'mdn-demo-indexeddb-epublications';
-  const DB_VERSION = 1; //  Utilisez un "long long" pour cette valeur (ne pas utiliser un flottant (float)) 
+  const DB_VERSION = 1; //  Utilisez un "long long" pour cette valeur (ne pas utiliser un flottant (float))
   const DB_STORE_NAME = 'publications';
 
   var db;
@@ -884,7 +882,7 @@ input {
     console.log("openDb ...");
     var req = indexedDB.open(DB_NAME, DB_VERSION);
     req.onsuccess = function (evt) {
-      //  Le mieux utiliser "this" que "req" pour obtenir le résultat et éviter  
+      //  Le mieux utiliser "this" que "req" pour obtenir le résultat et éviter
       // les problèmes avec "garbage collection".
       // db = req.result;
       db = this.result;
@@ -906,8 +904,8 @@ input {
   }
 
   /**
-   * @paramètre {string}<em>(chaîne de caractères)</em> store_name
-   * @paramètre {string}<em>(chaîne de caractères)</em> mode either "readonly" ou "readwrite"
+   * @paramètre {string}(chaîne de caractères) store_name
+   * @paramètre {string}(chaîne de caractères) mode either "readonly" ou "readwrite"
    */
   function getObjectStore(store_name, mode) {
     var tx = db.transaction(store_name, mode);
@@ -949,18 +947,18 @@ input {
     pub_msg.empty();
     var pub_list = $('#pub-list');
     pub_list.empty();
-    //  Réinitialisation de l'iframe afin qu'il n'indique pas le contenu précédent 
+    //  Réinitialisation de l'iframe afin qu'il n'indique pas le contenu précédent
     newViewerFrame();
 
     var req;
     req = store.count();
-    // Les requêtes sont exécutées dans l'ordre où elles ont été faites en-dehors de la 
-    // transaction,  et leurs résultats sont retournés dans le même ordre. 
-    // Ainsi, le texte du compteur ci-dessous sera affiché avant la liste de pub actuelle 
+    // Les requêtes sont exécutées dans l'ordre où elles ont été faites en-dehors de la
+    // transaction,  et leurs résultats sont retournés dans le même ordre.
+    // Ainsi, le texte du compteur ci-dessous sera affiché avant la liste de pub actuelle
     // (ce n'est pas algorithmiquement important dans ce cas) .
     req.onsuccess = function(evt) {
-      pub_msg.append('&lt;p&gt;There are &lt;strong&gt;' + evt.target.result +
-                     '&lt;/strong&gt; record(s) in the object store.&lt;/p&gt;');
+      pub_msg.append('<p>There are <strong>' + evt.target.result +
+                     '</strong> record(s) in the object store.</p>');
     };
     req.onerror = function(evt) {
       console.error("add error", this.error);
@@ -972,23 +970,23 @@ input {
     req.onsuccess = function(evt) {
       var cursor = evt.target.result;
 
-      //  Si le curseur pointe vers quelque chose, demandez les données 
+      //  Si le curseur pointe vers quelque chose, demandez les données
       if (cursor) {
         console.log("displayPubList cursor:", cursor);
         req = store.get(cursor.key);
         req.onsuccess = function (evt) {
           var value = evt.target.result;
-          var list_item = $('&lt;li&gt;' +
+          var list_item = $('<li>' +
                             '[' + cursor.key + '] ' +
                             '(biblioid: ' + value.biblioid + ') ' +
                             value.title +
-                            '&lt;/li&gt;');
+                            '</li>');
           if (value.year != null)
             list_item.append(' - ' + value.year);
 
-          if (value.hasOwnProperty('blob') &amp;&amp;
+          if (value.hasOwnProperty('blob') &&
               typeof value.blob != 'undefined') {
-            var link = $('&lt;a href="' + cursor.key + '"&gt;File&lt;/a&gt;');
+            var link = $('<a href="' + cursor.key + '">File</a>');
             link.on('click', function() { return false; });
             link.on('mouseenter', function(evt) {
                       setInViewer(evt.target.getAttribute('href')); });
@@ -1014,7 +1012,7 @@ input {
   function newViewerFrame() {
     var viewer = $('#pub-viewer');
     viewer.empty();
-    var iframe = $('&lt;iframe /&gt;');
+    var iframe = $('<iframe />');
     viewer.append(iframe);
     return iframe;
   }
@@ -1032,8 +1030,8 @@ input {
       console.log("setInViewer blob:", blob);
       var iframe = newViewerFrame();
 
-      // Il n'est pas possible de définir un lien direct vers 
-      // le blob pour fournir un moyen de le télécharger directement. 
+      // Il n'est pas possible de définir un lien direct vers
+      // le blob pour fournir un moyen de le télécharger directement.
       if (blob.type == 'text/html') {
         var reader = new FileReader();
         reader.onload = (function(evt) {
@@ -1046,7 +1044,7 @@ input {
       } else if (blob.type.indexOf('image/') == 0) {
         iframe.load(function() {
           var img_id = 'image-' + key;
-          var img = $('&lt;img id="' + img_id + '"/&gt;');
+          var img = $('<img id="' + img_id + '"/>');
           $(this).contents().find('body').html(img);
           var obj_url = window.URL.createObjectURL(blob);
           $(this).contents().find('#' + img_id).attr('src', obj_url);
@@ -1070,10 +1068,10 @@ input {
   }
 
   /**
-   * @paramètre {string} <em>(chaîne de caractères)</em> biblioid <em>(identifiant bibliothèque)</em>
-   * @paramètre {string} <em>(chaîne de caractères) </em>title <em>(titre)</em>
-   * @paramètre {number} <em>(nombre)</em> year <em>(année)</em>
-   * @paramètre {string} <em>(chaîne de caractères) </em>url : l'URL de l'image à télécharger et stocker sur le pc
+   * @paramètre {string} (chaîne de caractères) biblioid (identifiant bibliothèque)
+   * @paramètre {string} (chaîne de caractères) title (titre)
+   * @paramètre {number} (nombre) year (année)
+   * @paramètre {string} (chaîne de caractères) url : l'URL de l'image à télécharger et stocker sur le pc
    *   IndexedDB database. La ressource derrière cette URL assujettie à
    *   "Same origin policy", donc pour que cette méthode fonctionne, l'URL doit venir de
    *   la même origine que le site web/l'application sur lequel le code est déployé.
@@ -1083,7 +1081,7 @@ input {
 
     var xhr = new XMLHttpRequest();
     xhr.open('GET', url, true);
-    //  Définir le type de réponse recherché à "blob<code>"</code> 
+    //  Définir le type de réponse recherché à "blob"
     // http://www.w3.org/TR/XMLHttpRequest2/#the-response-attribute
     xhr.responseType = 'blob';
     xhr.onload = function (evt) {
@@ -1099,7 +1097,7 @@ input {
                          };
     xhr.send();
 
-    // Nous ne pouvons pas utiliser jQuery ici car, à partir de jQuery 1.8.3<code>,</code> 
+    // Nous ne pouvons pas utiliser jQuery ici car, à partir de jQuery 1.8.3,
     // le nouveau "blob" responseType n'est pas géré.
     // http://bugs.jquery.com/ticket/11461
     // http://bugs.jquery.com/ticket/7248
@@ -1120,9 +1118,9 @@ input {
   }
 
   /**
-   * @paramètre {string} <em>(chaîne de caractères)</em> biblioid <em>(identifiant bibliothèque)</em>
-   * @paramètre {string} <em>(chaîne de caractères) </em>title <em>(titre)</em>
-   * @paramètre {number} <em>(nombre)</em> year <em>(année)</em>
+   * @paramètre {string} (chaîne de caractères) biblioid (identifiant bibliothèque)
+   * @paramètre {string} (chaîne de caractères) title (titre)
+   * @paramètre {number} (nombre) year (année)
    * @paramètre {Blob=} blob
    */
   function addPublication(biblioid, title, year, blob) {
@@ -1153,7 +1151,7 @@ input {
   }
 
   /**
-   * @paramètre {string} <em>(chaîne de caractères)</em> biblioid <em>(identifiant bibliothèque)</em>
+   * @paramètre {string} (chaîne de caractères) biblioid (identifiant bibliothèque)
    */
   function deletePublicationFromBib(biblioid) {
     console.log("deletePublication:", arguments);
@@ -1172,8 +1170,8 @@ input {
   }
 
   /**
-   * @paramètre {number} <em>(nombre)</em> key <em>(clé)</em>
-   * @paramètre {IDBObjectStore=} store <em>(objet de stockage)</em>
+   * @paramètre {number} (nombre) key (clé)
+   * @paramètre {IDBObjectStore=} store (objet de stockage)
    */
   function deletePublication(key, store) {
     console.log("deletePublication:", arguments);
@@ -1183,7 +1181,7 @@ input {
 
     // Selon les spécifications http://www.w3.org/TR/IndexedDB/#object-store-deletion-operation
     // le résultat de l'objet de stockage, l'algorithme de l'opération de suppression est
-    // "undefined" (<em>indéfini</em>), donc il n'est pas possible de savoir si certains enregistrements
+    // "undefined" (indéfini), donc il n'est pas possible de savoir si certains enregistrements
     // ont été effectivement supprimés en lisant le résultat de la requête.
     var req = store.get(key);
     req.onsuccess = function(evt) {
@@ -1193,8 +1191,8 @@ input {
         displayActionFailure("No matching record found");
         return;
       }
-      // Attention:  La même clé utilisée pour la création doit être transmise pour 
-      // la suppression.  Si la clé était un nombre pour la création, elle <code>doit</code>
+      // Attention:  La même clé utilisée pour la création doit être transmise pour
+      // la suppression.  Si la clé était un nombre pour la création, elle doit
       // être un nombre pour la suppression.
       req = store.delete(key);
       req.onsuccess = function(evt) {
@@ -1216,11 +1214,11 @@ input {
 
   function displayActionSuccess(msg) {
     msg = typeof msg != 'undefined' ? "Success: " + msg : "Success";
-    $('#msg').html('&lt;span class="action-success"&gt;' + msg + '&lt;/span&gt;');
+    $('#msg').html('<span class="action-success">' + msg + '</span>');
   }
   function displayActionFailure(msg) {
     msg = typeof msg != 'undefined' ? "Failure: " + msg : "Failure";
-    $('#msg').html('&lt;span class="action-failure"&gt;' + msg + '&lt;/span&gt;');
+    $('#msg').html('<span class="action-failure">' + msg + '</span>');
   }
   function resetActionStatus() {
     console.log("resetActionStatus ...");
@@ -1259,7 +1257,7 @@ input {
       var selected_file = file_input.get(0).files[0];
       console.log("selected_file:", selected_file);
       // Garder une référence sur la façon de réinitialiser l'entrée du fichier dans l'interface
-      // utilisateur une fois que nous<code> avons sa valeur</code>, mais au lieu de faire cela nous utiliserons
+      // utilisateur une fois que nous avons sa valeur, mais au lieu de faire cela nous utiliserons
       // plutôt un type "reset" entré dans le formulaire HTML .
       // file_input.val(null);
       var file_url = $('#pub-file-url').val();
@@ -1305,34 +1303,29 @@ input {
   openDb();
   addEventListeners();
 
-})(); // Immediately-Invoked Function Expression (IIFE)</pre>
+})(); // Immediately-Invoked Function Expression (IIFE)
+```
 
-<p>{{ LiveSampleLink('Full_IndexedDB_example', "Test the online live demo") }}</p>
+{{ LiveSampleLink('Full_IndexedDB_example', "Test the online live demo") }}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<p>Référence :</p>
+Référence :
 
-<ul>
- <li><a href="/en/IndexedDB">IndexedDB API Reference</a></li>
- <li><a href="http://www.w3.org/TR/IndexedDB/">Indexed Database API Specification</a></li>
- <li><a href="/en-US/docs/IndexedDB/Using_IndexedDB_in_chrome">Using IndexedDB in chrome</a></li>
- <li><a href="/en-US/docs/Web/API/IndexedDB_API/Using_JavaScript_Generators_in_Firefox">Using JavaScript generators in Firefox</a></li>
- <li>IndexedDB <a href="https://mxr.mozilla.org/mozilla-central/find?text=&amp;string=dom%2FindexedDB%2F.*%5C.idl&amp;regexp=1">interface files</a> dans le code source de Firefox</li>
-</ul>
+- [IndexedDB API Reference](/en/IndexedDB)
+- [Indexed Database API Specification](http://www.w3.org/TR/IndexedDB/)
+- [Using IndexedDB in chrome](/en-US/docs/IndexedDB/Using_IndexedDB_in_chrome)
+- [Using JavaScript generators in Firefox](/en-US/docs/Web/API/IndexedDB_API/Using_JavaScript_Generators_in_Firefox)
+- IndexedDB [interface files](https://mxr.mozilla.org/mozilla-central/find?text=&string=dom%2FindexedDB%2F.*%5C.idl&regexp=1) dans le code source de Firefox
 
-<p>Tutoriels :</p>
+Tutoriels :
 
-<ul>
- <li><a href="http://www.html5rocks.com/en/tutorials/indexeddb/uidatabinding/">Databinding UI Elements with IndexedDB</a></li>
- <li><a href="http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx">IndexedDB — The Store in Your Browser</a></li>
-</ul>
+- [Databinding UI Elements with IndexedDB](http://www.html5rocks.com/en/tutorials/indexeddb/uidatabinding/)
+- [IndexedDB — The Store in Your Browser](http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx)
 
-<p>Bibliothèques :</p>
+Bibliothèques :
 
-<ul>
- <li><a href="http://mozilla.github.io/localForage/">localForage </a>: Un Polyfill qui fournit un nom simple : la syntaxe de valeur pour le stockage de données côté client, qui utilise IndexedDB en arrière-plan, mais retourne à WebSQL puis à localStorage pour les navigateurs qui ne prennent pas en charge IndexedDB.</li>
- <li><a href="http://www.dexie.org/">dexie.js </a>: Une enveloppe pour IndexedDB qui permet un développement de code beaucoup plus rapide grâce à une syntaxe simple et agréable.</li>
- <li><a href="https://github.com/erikolson186/zangodb">ZangoDB </a>: Un MongoDB-like interface pour IndexedDB qui prend en charge la plupart des fonctionnalités familières de filtrage, projection, tri, mise à jour et agrégation de  MongoDB.</li>
- <li><a href="http://jsstore.net/">JsStore</a> : Une enveloppe d'IndexedDB simple et avancée ayant une syntaxe SQL.</li>
-</ul>
+- [localForage ](http://mozilla.github.io/localForage/): Un Polyfill qui fournit un nom simple : la syntaxe de valeur pour le stockage de données côté client, qui utilise IndexedDB en arrière-plan, mais retourne à WebSQL puis à localStorage pour les navigateurs qui ne prennent pas en charge IndexedDB.
+- [dexie.js ](http://www.dexie.org/): Une enveloppe pour IndexedDB qui permet un développement de code beaucoup plus rapide grâce à une syntaxe simple et agréable.
+- [ZangoDB ](https://github.com/erikolson186/zangodb): Un MongoDB-like interface pour IndexedDB qui prend en charge la plupart des fonctionnalités familières de filtrage, projection, tri, mise à jour et agrégation de MongoDB.
+- [JsStore](http://jsstore.net/) : Une enveloppe d'IndexedDB simple et avancée ayant une syntaxe SQL.
diff --git a/files/fr/web/api/inputevent/index.md b/files/fr/web/api/inputevent/index.md
index 1f33085e17..00298a04e0 100644
--- a/files/fr/web/api/inputevent/index.md
+++ b/files/fr/web/api/inputevent/index.md
@@ -3,69 +3,48 @@ title: InputEvent
 slug: Web/API/InputEvent
 translation_of: Web/API/InputEvent
 ---
-<div>{{APIRef("DOM Events")}} {{SeeCompatTable}}</div>
+{{APIRef("DOM Events")}} {{SeeCompatTable}}
 
-<p>L’interface <strong><code>InputEvent</code></strong> représente un évènement notifiant la modification d’un contenu éditable.</p>
+L’interface **`InputEvent`** représente un évènement notifiant la modification d’un contenu éditable.
 
-<p>{{InheritanceDiagram}}</p>
+{{InheritanceDiagram}}
 
-<h2 id="Constructeur">Constructeur</h2>
+## Constructeur
 
-<dl>
- <dt>{{domxref("InputEvent.InputEvent", "InputEvent()")}}</dt>
- <dd>Crée un objet <code>InputEvent</code>.</dd>
-</dl>
+- {{domxref("InputEvent.InputEvent", "InputEvent()")}}
+  - : Crée un objet `InputEvent`.
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<p><em>Cette interface hérite des propriétés de ses <em>parents, {{domxref("UIEvent")}} et {{domxref("Event")}}.</em></em></p>
+*Cette interface hérite des propriétés de ses *parents, {{domxref("UIEvent")}} et {{domxref("Event")}}.\*\*
 
-<dl>
- <dt>{{domxref("InputEvent.data")}}{{readOnlyInline}}</dt>
- <dd>Retourne une {{domxref("DOMString")}} avec les caractères insérést. Cela peut être une chaîne vide si la modification n’insère pas de texte (comme la suppression de caractères, par exemple).</dd>
- <dt>{{domxref("InputEvent.dataTransfer")}}{{readonlyinline}}</dt>
- <dd>Retourne un objet {{domxref("DataTransfer")}} contenant des informations sur des données de texte riche (<em>richtext</em>) ou brut (<em>plaintext</em>) étant ajoutées ou supprimées du contenu éditable.</dd>
- <dt>{{domxref("InputEvent.inputType")}}{{readonlyinline}}</dt>
- <dd>Retourne le type de modification du le contenu éditable tel que, par exemple, l’insertion, la suppression ou le formatage de texte. Voir la page de la propriété pour une liste complète des types de modification.</dd>
- <dt>{{domxref("InputEvent.isComposing")}}{{readOnlyInline}}</dt>
- <dd>Retourne une valeur {{jsxref("Boolean", "booléenne")}} indiquant si l’évènement est émis après {{event("compositionstart")}} et avant {{event("compositionend")}}.</dd>
-</dl>
+- {{domxref("InputEvent.data")}}{{readOnlyInline}}
+  - : Retourne une {{domxref("DOMString")}} avec les caractères insérést. Cela peut être une chaîne vide si la modification n’insère pas de texte (comme la suppression de caractères, par exemple).
+- {{domxref("InputEvent.dataTransfer")}}{{readonlyinline}}
+  - : Retourne un objet {{domxref("DataTransfer")}} contenant des informations sur des données de texte riche (_richtext_) ou brut (_plaintext_) étant ajoutées ou supprimées du contenu éditable.
+- {{domxref("InputEvent.inputType")}}{{readonlyinline}}
+  - : Retourne le type de modification du le contenu éditable tel que, par exemple, l’insertion, la suppression ou le formatage de texte. Voir la page de la propriété pour une liste complète des types de modification.
+- {{domxref("InputEvent.isComposing")}}{{readOnlyInline}}
+  - : Retourne une valeur {{jsxref("Boolean", "booléenne")}} indiquant si l’évènement est émis après {{event("compositionstart")}} et avant {{event("compositionend")}}.
 
-<h2 id="Méthodes">Méthodes</h2>
+## Méthodes
 
-<p><em>Cette interface <em>hérite des méthodes de ses parents, {{domxref("UIEvent")}} et {{domxref("Event")}}.</em></em></p>
+*Cette interface *hérite des méthodes de ses parents, {{domxref("UIEvent")}} et {{domxref("Event")}}.\*\*
 
-<dl>
- <dt>{{domxref('InputEvent.getTargetRanges()')}}</dt>
- <dd>Retourne un tableau de {{domxref("Range", "ranges")}} statiques qui seront affectés par une modification du DOM si l’évènement input n’est pas annulé.</dd>
-</dl>
+- {{domxref('InputEvent.getTargetRanges()')}}
+  - : Retourne un tableau de {{domxref("Range", "ranges")}} statiques qui seront affectés par une modification du DOM si l’évènement input n’est pas annulé.
 
-<h2 id="Spécifications">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('InputEvents2','#interface-InputEvent','InputEvent')}}</td>
-   <td>{{Spec2('InputEvents2')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                            | Statut                           | Commentaire          |
+| ---------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName('InputEvents2','#interface-InputEvent','InputEvent')}} | {{Spec2('InputEvents2')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.InputEvent")}}</p>
+{{Compat("api.InputEvent")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{ event("beforeinput") }}</li>
- <li><a href="/docs/Web/API/InputEvent/input_event">l’évènement <code>input</code></a></li>
-</ul>
+- {{ event("beforeinput") }}
+- [l’évènement `input`](/docs/Web/API/InputEvent/input_event)
diff --git a/files/fr/web/api/intersection_observer_api/index.md b/files/fr/web/api/intersection_observer_api/index.md
index 3343785331..1b1d75b7d3 100644
--- a/files/fr/web/api/intersection_observer_api/index.md
+++ b/files/fr/web/api/intersection_observer_api/index.md
@@ -8,73 +8,73 @@ tags:
   - Web
 translation_of: Web/API/Intersection_Observer_API
 ---
-<div>{{SeeCompatTable}}{{DefaultAPISidebar("Intersection Observer API")}}</div>
+{{SeeCompatTable}}{{DefaultAPISidebar("Intersection Observer API")}}
 
-<p>L'API <em>Intersection Observer</em> permet d'observer de manière asynchrone l'évolution de l'intersection d'un élément cible avec un élément ancêtre ou avec la zone d'affichage d'un document de niveau supérieur.</p>
+L'API _Intersection Observer_ permet d'observer de manière asynchrone l'évolution de l'intersection d'un élément cible avec un élément ancêtre ou avec la zone d'affichage d'un document de niveau supérieur.
 
-<p>Historiquement, détecter la visibilité d'un élément, ou la visibilité relative de deux éléments l'un par rapport à l'autre, a été une tache difficile, résolue de manière peu rigoureuse et pouvant nuire à la fluidité de la page consultée. Malheureusement, avec la maturation de la toile, ce genre d'information se révèle de plus en plus nécessaire. La donnée de l'intersection est requise pour de nombreuses raisons, telles que:</p>
+Historiquement, détecter la visibilité d'un élément, ou la visibilité relative de deux éléments l'un par rapport à l'autre, a été une tache difficile, résolue de manière peu rigoureuse et pouvant nuire à la fluidité de la page consultée. Malheureusement, avec la maturation de la toile, ce genre d'information se révèle de plus en plus nécessaire. La donnée de l'intersection est requise pour de nombreuses raisons, telles que:
 
-<ul>
- <li>Le chargement paresseux d'images ou d'autres types de contenus au fur et à mesure que la page défile.</li>
- <li>L'implantation de « défilement infini », où de plus en plus de contenu est chargé tandis que l'utilisateur défile, afin qu'il n'ait pas à changer de page.</li>
- <li>Le signalement de la visibilité pour les publicités afin de calculer les revenus publicitaires.</li>
- <li>La décision d'exécuter ou non une tâche ou une animation selon que l'utilisateur va en voir le résultat ou non.</li>
-</ul>
+- Le chargement paresseux d'images ou d'autres types de contenus au fur et à mesure que la page défile.
+- L'implantation de « défilement infini », où de plus en plus de contenu est chargé tandis que l'utilisateur défile, afin qu'il n'ait pas à changer de page.
+- Le signalement de la visibilité pour les publicités afin de calculer les revenus publicitaires.
+- La décision d'exécuter ou non une tâche ou une animation selon que l'utilisateur va en voir le résultat ou non.
 
-<p>De par le passé, l'implantation de la détection d'intersection impliquait des gestionnaires d'évènements et des boucles appelant des méthodes telles que {{domxref("Element.getBoundingClientRect()")}} afin de générer les informations nécessaires pour chaque élément concerné. Comme la totalité du code est exécuté dans le <em>thread</em> principal, même une seule de ces boucles peut causer des problèmes de performance. Si un site est rempli de ces tests, les choses peuvent vite devenir très moches.</p>
+De par le passé, l'implantation de la détection d'intersection impliquait des gestionnaires d'évènements et des boucles appelant des méthodes telles que {{domxref("Element.getBoundingClientRect()")}} afin de générer les informations nécessaires pour chaque élément concerné. Comme la totalité du code est exécuté dans le _thread_ principal, même une seule de ces boucles peut causer des problèmes de performance. Si un site est rempli de ces tests, les choses peuvent vite devenir très moches.
 
-<p>Prenons une page qui utilise un défilement infini. Mettons qu'elle utilise une bibliothèque fournie par un éditeur afin de gérer les publicités placées périodiquement le long de la page, qu'elle a des graphiques animés ici et là, et qu'elle utilise une bibliothèque personnalisée pour dessiner des cases de notifications et ce genre de choses. Chacune de ces choses a ses propres procédures de détection d'intersection, toutes exécutées dans le <em>thread</em> principal. L'auteur du site ne le réalise peut-être même pas, puisqu'il utilise deux bibliothèques dont il ne connaît pas forcément les détails de fonctionnement. Quand l'utilisateur navigue sur la page, ces procédures de détection d'intersection réagissent constamment pendant l'exécution du code de défilement, rendant l'expérience frustrante pour l'utilisateur vis-à-vis de son navigateur, du site Internet et de son ordinateur.</p>
+Prenons une page qui utilise un défilement infini. Mettons qu'elle utilise une bibliothèque fournie par un éditeur afin de gérer les publicités placées périodiquement le long de la page, qu'elle a des graphiques animés ici et là, et qu'elle utilise une bibliothèque personnalisée pour dessiner des cases de notifications et ce genre de choses. Chacune de ces choses a ses propres procédures de détection d'intersection, toutes exécutées dans le _thread_ principal. L'auteur du site ne le réalise peut-être même pas, puisqu'il utilise deux bibliothèques dont il ne connaît pas forcément les détails de fonctionnement. Quand l'utilisateur navigue sur la page, ces procédures de détection d'intersection réagissent constamment pendant l'exécution du code de défilement, rendant l'expérience frustrante pour l'utilisateur vis-à-vis de son navigateur, du site Internet et de son ordinateur.
 
-<p>L'API <em>Intersection Observer</em> permet d'intégrer une fonction <em>callback</em> qui est exécutée quand un élément qu'on souhaite surveiller entre ou sort d'un autre élément (ou du <em>viewport</em> (zone d'affichage)), ou quand la taille de leur intersection varie d'une quantité prédéterminée. Ainsi, les sites n'ont plus besoin de faire quoi que ce soit sur le <em>thread</em> principal pour surveiller ce genre d'intersection d'éléments, et le navigateur est libre de gérer la détection d'intersection comme bon lui semble.</p>
+L'API _Intersection Observer_ permet d'intégrer une fonction _callback_ qui est exécutée quand un élément qu'on souhaite surveiller entre ou sort d'un autre élément (ou du _viewport_ (zone d'affichage)), ou quand la taille de leur intersection varie d'une quantité prédéterminée. Ainsi, les sites n'ont plus besoin de faire quoi que ce soit sur le _thread_ principal pour surveiller ce genre d'intersection d'éléments, et le navigateur est libre de gérer la détection d'intersection comme bon lui semble.
 
-<p>Il y a une chose sur laquelle l'API <em>Intersection Observer</em> ne peut pas vous renseigner : le nombre de pixels qui intersectent, ou bien desquels il s'agit précisément; par contre elle permet d'ordonner des actions souvent utiles telles que « si ils s'intersectent de plus de N%, alors faire ceci ».</p>
+Il y a une chose sur laquelle l'API _Intersection Observer_ ne peut pas vous renseigner : le nombre de pixels qui intersectent, ou bien desquels il s'agit précisément; par contre elle permet d'ordonner des actions souvent utiles telles que « si ils s'intersectent de plus de N%, alors faire ceci ».
 
-<h2 id="Concepts_et_utilisation_de_l'observateur_d'intersections">Concepts et utilisation de l'observateur d'intersections</h2>
+## Concepts et utilisation de l'observateur d'intersections
 
-<p>L'API <em>Intersection Observer</em> permet de mettre en place une fonction <em>callback</em> qui est appelée quand un élément, appelé la <strong>cible</strong>, intersecte ou bien le <em>viewport</em> (la zone d'affichage) ou bien un élément prédéfini ; dans le cadre de cette API, nous l’appellerons <strong>l'élément racine</strong> ou <strong>la racine</strong>. Typiquement, on voudra observer les variations de l'intersection par rapport à la zone d'affichage du document (ce qui est fait en passant l'argument <code>null</code> au moment de désigner l'élément racine). Que vous utilisiez la zone d'affichage ou un autre élément comme racine, l'API fonctionne de la même façon, en exécutant une fonction <em>callback</em>, fournie au préalable, lorsque la visibilité de l'élément cible change de telle sorte qu'il atteint la quantité voulue d'intersection avec l'élément racine.</p>
+L'API _Intersection Observer_ permet de mettre en place une fonction _callback_ qui est appelée quand un élément, appelé la **cible**, intersecte ou bien le _viewport_ (la zone d'affichage) ou bien un élément prédéfini ; dans le cadre de cette API, nous l’appellerons **l'élément racine** ou **la racine**. Typiquement, on voudra observer les variations de l'intersection par rapport à la zone d'affichage du document (ce qui est fait en passant l'argument `null` au moment de désigner l'élément racine). Que vous utilisiez la zone d'affichage ou un autre élément comme racine, l'API fonctionne de la même façon, en exécutant une fonction _callback_, fournie au préalable, lorsque la visibilité de l'élément cible change de telle sorte qu'il atteint la quantité voulue d'intersection avec l'élément racine.
 
-<p>Le degré d'intersection entre l'élément cible et sa racine est le <strong>ratio d'intersection</strong>. C'est une représentation du pourcentage de l'élément cible qui est visible, exprimée sous la forme d'un nombre compris entre 0.0 et 1.0.</p>
+Le degré d'intersection entre l'élément cible et sa racine est le **ratio d'intersection**. C'est une représentation du pourcentage de l'élément cible qui est visible, exprimée sous la forme d'un nombre compris entre 0.0 et 1.0.
 
-<h3 id="Création_d'un_observateur_d'intersection">Création d'un observateur d'intersection</h3>
+### Création d'un observateur d'intersection
 
-<p>Créez l'observateur d'intersection en appelant son constructeur et en lui passant la référence d'une fonction <em>callback</em>. Cette fonction sera exécutée quand un palier est franchi dans un sens ou dans un autre :</p>
+Créez l'observateur d'intersection en appelant son constructeur et en lui passant la référence d'une fonction _callback_. Cette fonction sera exécutée quand un palier est franchi dans un sens ou dans un autre :
 
-<pre class="brush: js">var options = {
+```js
+var options = {
   root: document.querySelector('#scrollArea'),
   rootMargin: '0px',
   threshold: 1.0
 }
 
-var observer = new IntersectionObserver(callback, options);</pre>
+var observer = new IntersectionObserver(callback, options);
+```
 
-<p>Un palier de 1.0 signifie que lorsque 100% de la cible est visible dans l'élément désigné par l'option <code>root</code> (l'élément racine), la fonction <em>callback</em> est invoquée.</p>
+Un palier de 1.0 signifie que lorsque 100% de la cible est visible dans l'élément désigné par l'option `root` (l'élément racine), la fonction _callback_ est invoquée.
 
-<h4 id="Options_de_l'observateur_d'intersection">Options de l'observateur d'intersection</h4>
+#### Options de l'observateur d'intersection
 
-<p>L'objet <code>options</code> qui est passé dans le constructeur  {{domxref("IntersectionObserver.IntersectionObserver", "IntersectionObserver()")}} permet de contrôler les circonstances selon lesquelles la fonction <em>callback</em> de l'observateur est invoquée. Il possède les champs suivants :</p>
+L'objet `options` qui est passé dans le constructeur  {{domxref("IntersectionObserver.IntersectionObserver", "IntersectionObserver()")}} permet de contrôler les circonstances selon lesquelles la fonction _callback_ de l'observateur est invoquée. Il possède les champs suivants :
 
-<dl>
- <dt><code>root</code></dt>
- <dd>L'élément qui est utilisé comme zone d'affichage au moment d'évaluer la visibilité de la cible. Il doit être un ancêtre de la cible. S'il n'est pas spécifié ou s'il prend la valeur <code>null</code>, sa valeur par défaut est la zone d'affichage (le <em>viewport</em>) du navigateur.</dd>
- <dt><code>rootMargin</code></dt>
- <dd>La marge autour de la racine. Peut prendre des valeurs similaires à la propriété CSS {{cssxref("margin")}} par exemple "<code>10px 20px 30px 40px"</code> (top, right, bottom, left). Si l'élément <code>root</code> a été spécifié, les valeurs peuvent être exprimées en pourcentages. Cet ensemble de valeur sert à agrandir ou à réduire chaque coté du cadre délimitant l'élément racine avant d'évaluer les intersections. Par défaut, toutes les valeurs prennent la valeur zéro.</dd>
- <dt><code>threshold</code></dt>
- <dd>Soit un nombre, soit un tableau de nombre qui indique à quel pourcentage de la visibilité de la cible la fonction <em>callback</em> de la cible doit être exécuté. Si vous souhaitez seulement détecter quand la visibilité franchit la barre des 50%, vous pouvez entrer la valeur 0.5. Si vous voulez que le <em>callback</em> soit exécuté chaque fois que la visibilité varie de 25% de plus, il faudra spécifier le tableau [0, 0.25, 0.5, 0.75, 1]. La valeur par défaut est 0 (ce qui signifie que dés qu'un seul pixel sera visible, la fonction <em>callback</em> sera exécutée). Une valeur de 1.0 signifie que le palier n'est considéré comme franchi qu'une fois que tous les pixels sont visibles.</dd>
-</dl>
+- `root`
+  - : L'élément qui est utilisé comme zone d'affichage au moment d'évaluer la visibilité de la cible. Il doit être un ancêtre de la cible. S'il n'est pas spécifié ou s'il prend la valeur `null`, sa valeur par défaut est la zone d'affichage (le _viewport_) du navigateur.
+- `rootMargin`
+  - : La marge autour de la racine. Peut prendre des valeurs similaires à la propriété CSS {{cssxref("margin")}} par exemple "`10px 20px 30px 40px"` (top, right, bottom, left). Si l'élément `root` a été spécifié, les valeurs peuvent être exprimées en pourcentages. Cet ensemble de valeur sert à agrandir ou à réduire chaque coté du cadre délimitant l'élément racine avant d'évaluer les intersections. Par défaut, toutes les valeurs prennent la valeur zéro.
+- `threshold`
+  - : Soit un nombre, soit un tableau de nombre qui indique à quel pourcentage de la visibilité de la cible la fonction _callback_ de la cible doit être exécuté. Si vous souhaitez seulement détecter quand la visibilité franchit la barre des 50%, vous pouvez entrer la valeur 0.5. Si vous voulez que le _callback_ soit exécuté chaque fois que la visibilité varie de 25% de plus, il faudra spécifier le tableau \[0, 0.25, 0.5, 0.75, 1]. La valeur par défaut est 0 (ce qui signifie que dés qu'un seul pixel sera visible, la fonction _callback_ sera exécutée). Une valeur de 1.0 signifie que le palier n'est considéré comme franchi qu'une fois que tous les pixels sont visibles.
 
-<h4 id="Choisir_un_élément_à_observer">Choisir un élément à observer</h4>
+#### Choisir un élément à observer
 
-<p>Une fois l'observateur créé, il faut lui donner un élément cible à observer :</p>
+Une fois l'observateur créé, il faut lui donner un élément cible à observer :
 
-<pre class="brush: js">var target = document.querySelector('#listItem');
+```js
+var target = document.querySelector('#listItem');
 observer.observe(target);
-</pre>
+```
 
-<p>Lorsque la cible franchit un palier spécifié indiqué dans l'objet <code>IntersectionObserver</code>, la fonction <em>callback</em> est appelée. Le <em>callback</em> reçoit une liste d'objets {{domxref("IntersectionObserverEntry")}} ainsi que l'observateur :</p>
+Lorsque la cible franchit un palier spécifié indiqué dans l'objet `IntersectionObserver`, la fonction _callback_ est appelée. Le _callback_ reçoit une liste d'objets {{domxref("IntersectionObserverEntry")}} ainsi que l'observateur :
 
-<pre class="brush: js">var callback = function(entries, observer) {
-  entries.forEach(entry =&gt; {
-    // chaque élément de <em>entries</em> correspond à une variation
+```js
+var callback = function(entries, observer) {
+  entries.forEach(entry => {
+    // chaque élément de entries correspond à une variation
     // d'intersection pour un des éléments cible:
     //   entry.boundingClientRect
     //   entry.intersectionRatio
@@ -85,58 +85,59 @@ observer.observe(target);
     //   entry.time
   });
 };
-</pre>
+```
 
-<p>Soyez attentif au fait que la fonction <em>callback</em> est exécutée dans le <em>thread</em> principal. Elle devrait être exécutée aussi rapidement que possible ; si une opération prenant du temps a besoin d'être effectuée, utilisez {{domxref("Window.requestIdleCallback()")}}.</p>
+Soyez attentif au fait que la fonction _callback_ est exécutée dans le _thread_ principal. Elle devrait être exécutée aussi rapidement que possible ; si une opération prenant du temps a besoin d'être effectuée, utilisez {{domxref("Window.requestIdleCallback()")}}.
 
-<p>De plus, remarquez que si vous avez spécifié l'option <code>root</code>, la cible doit être un descendant de l'élément <code>root</code>.</p>
+De plus, remarquez que si vous avez spécifié l'option `root`, la cible doit être un descendant de l'élément `root`.
 
-<h3 id="Comment_est_calculée_l'intersection">Comment est calculée l'intersection</h3>
+### Comment est calculée l'intersection
 
-<p>Toutes les régions envisagées par l'API <em>Intersection Observer</em> sont des rectangles; les éléments de forme irrégulière sont assimilées au plus petit rectangle qui contient l'élément en question tout entier. De même, si la partie visible d'un élément n'est pas rectangulaire, le rectangle d'intersection de l'élément sera le plus petit rectangle qui contient toute la partie visible de l'élément.</p>
+Toutes les régions envisagées par l'API _Intersection Observer_ sont des rectangles; les éléments de forme irrégulière sont assimilées au plus petit rectangle qui contient l'élément en question tout entier. De même, si la partie visible d'un élément n'est pas rectangulaire, le rectangle d'intersection de l'élément sera le plus petit rectangle qui contient toute la partie visible de l'élément.
 
-<p>Il est utile de comprendre comment les différentes propriétés fournies par {{domxref("IntersectionObserverEntry")}} décrivent une intersection.</p>
+Il est utile de comprendre comment les différentes propriétés fournies par {{domxref("IntersectionObserverEntry")}} décrivent une intersection.
 
-<h4 id="La_racine_de_l'intersection_et_la_marge_de_la_racine">La racine de l'intersection et la marge de la racine</h4>
+#### La racine de l'intersection et la marge de la racine
 
-<p>Avant de pouvoir étudier l'intersection d'un élément avec un conteneur, nous devons savoir quel est ce conteneur. Ce conteneur est <strong>la racine de l'intersection</strong>, ou <strong>élément racine</strong>. Ce peut être soit un élément du document qui est un ancêtre de l'élément à observer, ou <code>null</code> si l'on souhaite utiliser la zone d'affichage (<em>viewport</em>) du document comme conteneur.</p>
+Avant de pouvoir étudier l'intersection d'un élément avec un conteneur, nous devons savoir quel est ce conteneur. Ce conteneur est **la racine de l'intersection**, ou **élément racine**. Ce peut être soit un élément du document qui est un ancêtre de l'élément à observer, ou `null` si l'on souhaite utiliser la zone d'affichage (_viewport_) du document comme conteneur.
 
-<p>Le rectangle utilisé pour délimiter la racine de l'intersection peut être ajusté en ajustant la <strong>marge de la racine</strong>, c'est-à-dire le champ <code>rootMargin</code>, lors de la création de {{domxref("IntersectionObserver")}}. La valeur de <code>rootMargin</code> définit le décalage ajouté à chaque coté du cadre délimitant la racine de l'intersection pour créer le cadre final de la racine de l'intersection (accessible via {{domxref("IntersectionObserverEntry.rootBounds")}} quand la fonction <em>callback</em> est exécutée).</p>
+Le rectangle utilisé pour délimiter la racine de l'intersection peut être ajusté en ajustant la **marge de la racine**, c'est-à-dire le champ `rootMargin`, lors de la création de {{domxref("IntersectionObserver")}}. La valeur de `rootMargin` définit le décalage ajouté à chaque coté du cadre délimitant la racine de l'intersection pour créer le cadre final de la racine de l'intersection (accessible via {{domxref("IntersectionObserverEntry.rootBounds")}} quand la fonction _callback_ est exécutée).
 
-<h4 id="Paliers">Paliers</h4>
+#### Paliers
 
-<p>Plutôt que de rapporter le moindre changement de variation de la visibilité d'un élément, l'API Intersection Observer utilise des <strong>paliers</strong>. Lors de la création d'un observateur, vous pouvez fournir une ou plusieurs valeurs numériques qui représentent des pourcentages de visibilité de l'élément cible. Dans ce cas, l'API ne rapportent que les changements de visibilité qui franchissent ces paliers.</p>
+Plutôt que de rapporter le moindre changement de variation de la visibilité d'un élément, l'API Intersection Observer utilise des **paliers**. Lors de la création d'un observateur, vous pouvez fournir une ou plusieurs valeurs numériques qui représentent des pourcentages de visibilité de l'élément cible. Dans ce cas, l'API ne rapportent que les changements de visibilité qui franchissent ces paliers.
 
-<p>Par exemple, si vous voulez être informé à chaque fois que la visibilité d'une cible passe au dessus ou en dessous de chaque multiple de 25%, il faudra fournir le tableau [0, 0.25, 0.5, 0.75, 1] comme liste de paliers lors de la création de l'observateur. Vous pouvez préciser dans quelle direction a changé la visibilité (c'est-à-dire, si l'élément est devenu plus ou moins visible) en lisant la valeur de la propriété {{domxref("IntersectionObserverEntry.isIntersecting", "isIntersecting")}} du  {{domxref("IntersectionObserverEntry")}} passé dans la fonction <code>callback</code> lors du changement de visibilité. Si <code>isIntersecting</code> est <code>true</code>, l'élément cible est devenu au moins aussi visible quand le palier a été franchi. Si elle vaut <code>false</code>, la cible n'est plus aussi visible que le palier spécifié.</p>
+Par exemple, si vous voulez être informé à chaque fois que la visibilité d'une cible passe au dessus ou en dessous de chaque multiple de 25%, il faudra fournir le tableau \[0, 0.25, 0.5, 0.75, 1] comme liste de paliers lors de la création de l'observateur. Vous pouvez préciser dans quelle direction a changé la visibilité (c'est-à-dire, si l'élément est devenu plus ou moins visible) en lisant la valeur de la propriété {{domxref("IntersectionObserverEntry.isIntersecting", "isIntersecting")}} du  {{domxref("IntersectionObserverEntry")}} passé dans la fonction `callback` lors du changement de visibilité. Si `isIntersecting` est `true`, l'élément cible est devenu au moins aussi visible quand le palier a été franchi. Si elle vaut `false`, la cible n'est plus aussi visible que le palier spécifié.
 
-<p>Pour mieux comprendre comment fonctionnent les paliers, faites défiler la boîte ci-dessous. A l'intérieur, chacune des boîtes colorées affiche son pourcentage de visibilité sur chacun de ses quatre coins, de telle sorte que l'on peut voir ces ratios changer tandis que le conteneur défile. Chaque boîte a un ensemble différent de paliers :</p>
+Pour mieux comprendre comment fonctionnent les paliers, faites défiler la boîte ci-dessous. A l'intérieur, chacune des boîtes colorées affiche son pourcentage de visibilité sur chacun de ses quatre coins, de telle sorte que l'on peut voir ces ratios changer tandis que le conteneur défile. Chaque boîte a un ensemble différent de paliers :
 
-<ul>
- <li>La première boîte a un palier pour chaque point de pourcentage de visibilité; c'est à dire que le tableau {{domxref("IntersectionObserver.thresholds")}} est <code>[0.00, 0.01, 0.02, ..., 0.99, 1.00]</code>.</li>
- <li>La deuxième boîte a un unique palier, à 50%.</li>
- <li>La troisième boîte a des paliers tous les 10% de visibilité (0%, 10%, 20%, etc.).</li>
- <li>La dernière boîte a des paliers tous les 25%.</li>
-</ul>
+- La première boîte a un palier pour chaque point de pourcentage de visibilité; c'est à dire que le tableau {{domxref("IntersectionObserver.thresholds")}} est `[0.00, 0.01, 0.02, ..., 0.99, 1.00]`.
+- La deuxième boîte a un unique palier, à 50%.
+- La troisième boîte a des paliers tous les 10% de visibilité (0%, 10%, 20%, etc.).
+- La dernière boîte a des paliers tous les 25%.
 
-<h5 id="exemple_de_seuil">Exemple de seuil</h5>
+##### Exemple de seuil
 
-<pre class="brush: html hidden">&lt;template id="boxTemplate"&gt;
-  &lt;div class="sampleBox"&gt;
-    &lt;div class="label topLeft"&gt;&lt;/div&gt;
-    &lt;div class="label topRight"&gt;&lt;/div&gt;
-    &lt;div class="label bottomLeft"&gt;&lt;/div&gt;
-    &lt;div class="label bottomRight"&gt;&lt;/div&gt;
-  &lt;/div&gt;
-&lt;/template&gt;
+```html hidden
+<template id="boxTemplate">
+  <div class="sampleBox">
+    <div class="label topLeft"></div>
+    <div class="label topRight"></div>
+    <div class="label bottomLeft"></div>
+    <div class="label bottomRight"></div>
+  </div>
+</template>
 
-&lt;main&gt;
-  &lt;div class="contents"&gt;
-    &lt;div class="wrapper"&gt;
-    &lt;/div&gt;
-  &lt;/div&gt;
-&lt;/main&gt;</pre>
+<main>
+  <div class="contents">
+    <div class="wrapper">
+    </div>
+  </div>
+</main>
+```
 
-<pre class="brush: css hidden">.contents {
+```css hidden
+.contents {
   position: absolute;
   width: 700px;
   height: 1725px;
@@ -204,9 +205,10 @@ observer.observe(target);
   bottom: 2px;
   right: 2px;
 }
-</pre>
+```
 
-<pre class="brush: js hidden">let observers = [];
+```js hidden
+let observers = [];
 
 startup();
 
@@ -233,13 +235,13 @@ function startup() {
     [0, 0.25, 0.5, 0.75, 1.0]
   ];
 
-  for (let i=0; i&lt;=1.0; i+= 0.1) {
+  for (let i=0; i<=1.0; i+= 0.1) {
     thresholdSets[0].push(i);
   }
 
   // Add each box, creating a new observer for each
 
-  for (let i=0; i&lt;4; i++) {
+  for (let i=0; i<4; i++) {
     let template = document.querySelector("#boxTemplate").content.cloneNode(true);
     let boxID = "box" + (i+1);
     template.querySelector(".sampleBox").id = boxID;
@@ -272,38 +274,39 @@ function intersectionCallback(entries) {
     box.querySelector(".bottomRight").innerHTML = visiblePct;
   });
 }
-</pre>
+```
 
-<p>{{EmbedLiveSample("exemple_de_seuil", 500, 500)}}</p>
+{{EmbedLiveSample("exemple_de_seuil", 500, 500)}}
 
-<h2 id="Interfaces">Interfaces</h2>
+## Interfaces
 
-<dl>
- <dt>{{domxref("IntersectionObserver")}}</dt>
- <dd>L'interface principale pour l'API Intersection Observer. Elle fournit des méthodes pour créer et manipuler un observateur qui peut observer n'importe quel nombre d'éléments cibles pour une même configuration d'intersection. Chaque observateur peut observer de manière asynchrone les évolutions de l'intersection entre un ou plusieurs éléments cibles et un élément ancêtre partagé, ou avec le {{Glossary('viewport')}} de leur {{domxref("Document")}} de niveau supérieur. L'ancêtre ou le <em>viewport</em> est désigné par le terme <strong>racine</strong>.</dd>
- <dt>{{domxref("IntersectionObserverEntry")}}</dt>
- <dd>Cette interface décrit l'intersection d'un élément cible spécifique avec la racine de l'observateur à un moment donné. Les objets de ce type ne peuvent être obtenus que de deux façons : comme entrée du callback de votre <code>IntersectionObserver</code>, ou en appelant {{domxref("IntersectionObserver.takeRecords()")}}.</dd>
-</dl>
+- {{domxref("IntersectionObserver")}}
+  - : L'interface principale pour l'API Intersection Observer. Elle fournit des méthodes pour créer et manipuler un observateur qui peut observer n'importe quel nombre d'éléments cibles pour une même configuration d'intersection. Chaque observateur peut observer de manière asynchrone les évolutions de l'intersection entre un ou plusieurs éléments cibles et un élément ancêtre partagé, ou avec le {{Glossary('viewport')}} de leur {{domxref("Document")}} de niveau supérieur. L'ancêtre ou le _viewport_ est désigné par le terme **racine**.
+- {{domxref("IntersectionObserverEntry")}}
+  - : Cette interface décrit l'intersection d'un élément cible spécifique avec la racine de l'observateur à un moment donné. Les objets de ce type ne peuvent être obtenus que de deux façons : comme entrée du callback de votre `IntersectionObserver`, ou en appelant {{domxref("IntersectionObserver.takeRecords()")}}.
 
-<h2 id="Un_exemple_simple">Un exemple simple</h2>
+## Un exemple simple
 
-<p>Cet exemple simple va faire changer la couleur et la transparence d'un élément cible à mesure qu'il devient plus ou moins visible. Sur la page <em><a href="/fr/docs/Web/API/Intersection_Observer_API/Timing_element_visibility">Timing element visibility with the Intersection Observer API</a></em>, vous pourrez trouver un exemple plus développé montrant comment chronométrer le temps durant lequel un élément (par exemple, une publicité) a été visible à l'écran, et comment réagir à cette information en enregistrant des statistiques ou en mettant à jour des éléments.</p>
+Cet exemple simple va faire changer la couleur et la transparence d'un élément cible à mesure qu'il devient plus ou moins visible. Sur la page _[Timing element visibility with the Intersection Observer API](/fr/docs/Web/API/Intersection_Observer_API/Timing_element_visibility)_, vous pourrez trouver un exemple plus développé montrant comment chronométrer le temps durant lequel un élément (par exemple, une publicité) a été visible à l'écran, et comment réagir à cette information en enregistrant des statistiques ou en mettant à jour des éléments.
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<p>Le code HTML de cet exemple est très court. L'élément principal est la boîte que nous allons cibler (avec l'ingénieuse dénomination <code>"box"</code>) et certains contenus dans la boîte.</p>
+Le code HTML de cet exemple est très court. L'élément principal est la boîte que nous allons cibler (avec l'ingénieuse dénomination `"box"`) et certains contenus dans la boîte.
 
-<pre class="brush: html">&lt;div id="box"&gt;
-  &lt;div class="vertical"&gt;
-    Bienvenue dans &lt;strong&gt;La Boîte !&lt;/strong&gt;
-  &lt;/div&gt;
-&lt;/div&gt;</pre>
+```html
+<div id="box">
+  <div class="vertical">
+    Bienvenue dans <strong>La Boîte !</strong>
+  </div>
+</div>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<p>Le CSS n'est pas extrêmement important dans le cadre de cet exemple ; il met en place l'élément et établit que les attributs {{cssxref("background-color")}} et {{cssxref("border")}} peuvent participer à des <a href="/fr/docs/Web/CSS/CSS_Transitions">transitions CSS</a>. Nous utiliserons ces transitions pour faire évoluer l'élément de telle sorte qu'il devienne plus ou moins obscur.</p>
+Le CSS n'est pas extrêmement important dans le cadre de cet exemple ; il met en place l'élément et établit que les attributs {{cssxref("background-color")}} et {{cssxref("border")}} peuvent participer à des [transitions CSS](/fr/docs/Web/CSS/CSS_Transitions). Nous utiliserons ces transitions pour faire évoluer l'élément de telle sorte qu'il devienne plus ou moins obscur.
 
-<pre class="brush: css">#box {
+```css
+#box {
   background-color: rgba(40, 40, 190, 255);
   border: 4px solid rgb(20, 20, 120);
   transition: background-color 1s, border 1s;
@@ -327,17 +330,19 @@ function intersectionCallback(entries) {
   border: 4px solid rgb(20, 20, 120);
   text-align: center;
   padding: 20px;
-}</pre>
+}
+```
 
-<h3 id="JavaScript">JavaScript</h3>
+### JavaScript
 
-<p>Enfin, jetons un œil au code JavaScript qui utilise l'API <em>Intersection Observer</em>.</p>
+Enfin, jetons un œil au code JavaScript qui utilise l'API _Intersection Observer_.
 
-<h4 id="Préparation">Préparation</h4>
+#### Préparation
 
-<p>Premièrement, nous devons préparer des variables et installer l'observateur.</p>
+Premièrement, nous devons préparer des variables et installer l'observateur.
 
-<pre class="brush: js">var numSteps = 20.0;
+```js
+var numSteps = 20.0;
 
 var boxElement;
 var prevRatio = 0.0;
@@ -350,28 +355,28 @@ window.addEventListener("load", function(event) {
   boxElement = document.querySelector("#box");
 
   createObserver();
-}, false);</pre>
+}, false);
+```
 
-<p>Les constantes et variables que nous préparons sont :</p>
+Les constantes et variables que nous préparons sont :
 
-<dl>
- <dt><code>numSteps</code></dt>
- <dd>Une constante qui indique combien de paliers nous voulons avoir entre les ratios de visibilité de 0.0 et de 1.0.</dd>
- <dt><code>prevRatio</code></dt>
- <dd>Cette variable sera utilisée pour mémoriser quel était le ratio de visibilité la dernière fois qu'un palier a été franchi ; ce qui nous permettra de savoir si l'élément est en train de devenir plus ou moins visible.</dd>
- <dt><code>increasingColor</code></dt>
- <dd>Une chaîne de caractères définissant une couleur que nous appliquerons à l'élément cible quand le ratio de visibilité augmente. Le mot "ratio" dans cette chaîne de caractères sera remplacé par la ratio de visibilité de la cible actuelle, de telle sorte que l'élément, en plus de changer de couleur, deviendra de plus en plus opaque à mesure qu'il deviendra obscur.</dd>
- <dt><code>decreasingColor</code></dt>
- <dd>De même, il s'agit d'une chaîne de caractères qui définit une couleur que nous appliquerons lorsque le ratio de visibilité diminue.</dd>
-</dl>
+- `numSteps`
+  - : Une constante qui indique combien de paliers nous voulons avoir entre les ratios de visibilité de 0.0 et de 1.0.
+- `prevRatio`
+  - : Cette variable sera utilisée pour mémoriser quel était le ratio de visibilité la dernière fois qu'un palier a été franchi ; ce qui nous permettra de savoir si l'élément est en train de devenir plus ou moins visible.
+- `increasingColor`
+  - : Une chaîne de caractères définissant une couleur que nous appliquerons à l'élément cible quand le ratio de visibilité augmente. Le mot "ratio" dans cette chaîne de caractères sera remplacé par la ratio de visibilité de la cible actuelle, de telle sorte que l'élément, en plus de changer de couleur, deviendra de plus en plus opaque à mesure qu'il deviendra obscur.
+- `decreasingColor`
+  - : De même, il s'agit d'une chaîne de caractères qui définit une couleur que nous appliquerons lorsque le ratio de visibilité diminue.
 
-<p>On appelle {{domxref("EventTarget.addEventListener", "Window.addEventListener()")}} pour commencer à écouter l'évènement {{event("load")}} ; une fois que la page a finit de charger, on obtient une référence de l'élément avec l'identifiant <code>"box"</code> grâce à {{domxref("Document.querySelector", "querySelector()")}}, puis on appelle la méthode <code>createObserver()</code> que l'on va définir un peu plus tard pour gérer la création et l'installation de l'observateur d'intersection.</p>
+On appelle {{domxref("EventTarget.addEventListener", "Window.addEventListener()")}} pour commencer à écouter l'évènement {{event("load")}} ; une fois que la page a finit de charger, on obtient une référence de l'élément avec l'identifiant `"box"` grâce à {{domxref("Document.querySelector", "querySelector()")}}, puis on appelle la méthode `createObserver()` que l'on va définir un peu plus tard pour gérer la création et l'installation de l'observateur d'intersection.
 
-<h4 id="Création_de_l'observateur_d'intersection">Création de l'observateur d'intersection</h4>
+#### Création de l'observateur d'intersection
 
-<p>La méthode <code>createObserver()</code> est appelée une fois que le chargement de la page est terminé afin de gérer la création du nouveau {{domxref("IntersectionObserver")}} et de commencer le processus d'observation de l'élément cible.</p>
+La méthode `createObserver()` est appelée une fois que le chargement de la page est terminé afin de gérer la création du nouveau {{domxref("IntersectionObserver")}} et de commencer le processus d'observation de l'élément cible.
 
-<pre class="brush: js">function createObserver() {
+```js
+function createObserver() {
   var observer;
 
   var options = {
@@ -382,114 +387,118 @@ window.addEventListener("load", function(event) {
 
   observer = new IntersectionObserver(handleIntersect, options);
   observer.observe(boxElement);
-}</pre>
+}
+```
 
-<p>On commence par définir un objet <code>options</code> contenant les paramètres pour l'observateur. On voudra observer les évolutions de la visibilité de l'élément cible relativement au <em>viewport</em>, on initialise donc <code>root</code> avec <code>null</code>. Nous n'avons pas besoin de marge, donc l'espace de marge, <code>rootMargin</code>, est initialisé à <code>"0px"</code>. Ainsi, l'observateur surveillera les variations de l'intersection entre les frontières de l'élément cible et ceux du <em>viewport</em>, sans aucun espace ajouté ou ôté.</p>
+On commence par définir un objet `options` contenant les paramètres pour l'observateur. On voudra observer les évolutions de la visibilité de l'élément cible relativement au _viewport_, on initialise donc `root` avec `null`. Nous n'avons pas besoin de marge, donc l'espace de marge, `rootMargin`, est initialisé à `"0px"`. Ainsi, l'observateur surveillera les variations de l'intersection entre les frontières de l'élément cible et ceux du _viewport_, sans aucun espace ajouté ou ôté.
 
-<p>La liste de paliers de ratio de visibilité, <code>threshold</code>, est construite par la fonction <code>buildThresholdList()</code>. La liste de paliers est construite mécaniquement dans cet exemple car il y en a un certain nombre, et que ce nombre a vocation à être ajustable.</p>
+La liste de paliers de ratio de visibilité, `threshold`, est construite par la fonction `buildThresholdList()`. La liste de paliers est construite mécaniquement dans cet exemple car il y en a un certain nombre, et que ce nombre a vocation à être ajustable.
 
-<p>Une fois que <code>options</code> est prêt, nous pouvons créer le nouvel observateur, en appelant le constructeur {{domxref("IntersectionObserver.IntersectionObserver", "IntersectionObserver()")}} , en précisant une fonction <em>callback</em> à appeler quand l'intersection franchit l'un de nos paliers, <code>handleIntersect()</code>, et notre ensemble d'options. On appelle alors {{domxref("IntersectionObserver.observe", "observe()")}} sur l'observateur retourné, afin de le passer à l'élément qui sera notre cible</p>
+Une fois que `options` est prêt, nous pouvons créer le nouvel observateur, en appelant le constructeur {{domxref("IntersectionObserver.IntersectionObserver", "IntersectionObserver()")}} , en précisant une fonction _callback_ à appeler quand l'intersection franchit l'un de nos paliers, `handleIntersect()`, et notre ensemble d'options. On appelle alors {{domxref("IntersectionObserver.observe", "observe()")}} sur l'observateur retourné, afin de le passer à l'élément qui sera notre cible
 
-<p>On pourrait également choisir de surveiller l'évolution de la visibilité de l'intersection de plusieurs éléments par rapport au <em>viewport</em> en appelant <code>observer.observe()</code>pour chacun de ces éléments.</p>
+On pourrait également choisir de surveiller l'évolution de la visibilité de l'intersection de plusieurs éléments par rapport au _viewport_ en appelant `observer.observe()`pour chacun de ces éléments.
 
-<h4 id="Construction_du_tableau_de_paliers_de_ratios">Construction du tableau de paliers de ratios</h4>
+#### Construction du tableau de paliers de ratios
 
-<p>La fonction<code>buildThresholdList()</code>, qui construit la liste de paliers, ressemble à ceci :</p>
+La fonction`buildThresholdList()`, qui construit la liste de paliers, ressemble à ceci :
 
-<pre class="brush: js">function buildThresholdList() {
+```js
+function buildThresholdList() {
   var thresholds = [];
 
-  for (var i=1.0; i&lt;=numSteps; i++) {
+  for (var i=1.0; i<=numSteps; i++) {
     var ratio = i/numSteps;
     thresholds.push(ratio);
   }
 
   thresholds.push(0);
   return thresholds;
-}</pre>
+}
+```
 
-<p>Cela construit la tableau de paliers (chacun de ces paliers étant un ratio compris entre 0.0 et 1.0, ajouté en poussant la valeur<code>i/numSteps</code>dans le tableau <code>thresholds</code> pour chaque entier <code>i</code> entre 1 et <code>numSteps</code>). On pousse également 0 pour inclure cette valeur. Le résultat, dans le cas où<code>numSteps</code>a sa valeur par défaut, est la liste de paliers suivante :</p>
+Cela construit la tableau de paliers (chacun de ces paliers étant un ratio compris entre 0.0 et 1.0, ajouté en poussant la valeur`i/numSteps`dans le tableau `thresholds` pour chaque entier `i` entre 1 et `numSteps`). On pousse également 0 pour inclure cette valeur. Le résultat, dans le cas où`numSteps`a sa valeur par défaut, est la liste de paliers suivante :
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th>#</th>
-   <th>Ratio</th>
-   <th>#</th>
-   <th>Ratio</th>
-  </tr>
-  <tr>
-   <th>1</th>
-   <td>0.05</td>
-   <th>11</th>
-   <td>0.55</td>
-  </tr>
-  <tr>
-   <th>2</th>
-   <td>0.1</td>
-   <th>12</th>
-   <td>0.6</td>
-  </tr>
-  <tr>
-   <th>3</th>
-   <td>0.15</td>
-   <th>13</th>
-   <td>0.65</td>
-  </tr>
-  <tr>
-   <th>4</th>
-   <td>0.2</td>
-   <th>14</th>
-   <td>0.7</td>
-  </tr>
-  <tr>
-   <th>5</th>
-   <td>0.25</td>
-   <th>15</th>
-   <td>0.75</td>
-  </tr>
-  <tr>
-   <th>6</th>
-   <td>0.3</td>
-   <th>16</th>
-   <td>0.8</td>
-  </tr>
-  <tr>
-   <th>7</th>
-   <td>0.35</td>
-   <th>17</th>
-   <td>0.85</td>
-  </tr>
-  <tr>
-   <th>8</th>
-   <td>0.4</td>
-   <th>18</th>
-   <td>0.9</td>
-  </tr>
-  <tr>
-   <th>9</th>
-   <td>0.45</td>
-   <th>19</th>
-   <td>0.95</td>
-  </tr>
-  <tr>
-   <th>10</th>
-   <td>0.5</td>
-   <th>20</th>
-   <td>1.0</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th>#</th>
+      <th>Ratio</th>
+      <th>#</th>
+      <th>Ratio</th>
+    </tr>
+    <tr>
+      <th>1</th>
+      <td>0.05</td>
+      <th>11</th>
+      <td>0.55</td>
+    </tr>
+    <tr>
+      <th>2</th>
+      <td>0.1</td>
+      <th>12</th>
+      <td>0.6</td>
+    </tr>
+    <tr>
+      <th>3</th>
+      <td>0.15</td>
+      <th>13</th>
+      <td>0.65</td>
+    </tr>
+    <tr>
+      <th>4</th>
+      <td>0.2</td>
+      <th>14</th>
+      <td>0.7</td>
+    </tr>
+    <tr>
+      <th>5</th>
+      <td>0.25</td>
+      <th>15</th>
+      <td>0.75</td>
+    </tr>
+    <tr>
+      <th>6</th>
+      <td>0.3</td>
+      <th>16</th>
+      <td>0.8</td>
+    </tr>
+    <tr>
+      <th>7</th>
+      <td>0.35</td>
+      <th>17</th>
+      <td>0.85</td>
+    </tr>
+    <tr>
+      <th>8</th>
+      <td>0.4</td>
+      <th>18</th>
+      <td>0.9</td>
+    </tr>
+    <tr>
+      <th>9</th>
+      <td>0.45</td>
+      <th>19</th>
+      <td>0.95</td>
+    </tr>
+    <tr>
+      <th>10</th>
+      <td>0.5</td>
+      <th>20</th>
+      <td>1.0</td>
+    </tr>
+  </tbody>
 </table>
 
-<p>Bien sur, on pourrait coder en dur le tableau de paliers dans notre code, et c'est souvent ce que vous ferez. Cependant, cet exemple laisse un peu de place pour plus de configuration afin d'ajuster la granularité, par exemple.</p>
+Bien sur, on pourrait coder en dur le tableau de paliers dans notre code, et c'est souvent ce que vous ferez. Cependant, cet exemple laisse un peu de place pour plus de configuration afin d'ajuster la granularité, par exemple.
 
-<h4 id="Gérer_les_évolutions_de_l'intersection">Gérer les évolutions de l'intersection</h4>
+#### Gérer les évolutions de l'intersection
 
-<p>Quand le navigateur détecte que l'élément cible (dans notre cas, celui avec l'identifiant <code>"box"</code>) a été révélé ou caché de tel sorte que son ratio de visibilité franchit l'un des paliers de notre liste, il appelle la fonction <code>handleIntersect()</code>:</p>
+Quand le navigateur détecte que l'élément cible (dans notre cas, celui avec l'identifiant `"box"`) a été révélé ou caché de tel sorte que son ratio de visibilité franchit l'un des paliers de notre liste, il appelle la fonction `handleIntersect()`:
 
-<pre class="brush: js">function handleIntersect(entries, observer) {
+```js
+function handleIntersect(entries, observer) {
   entries.forEach(function(entry) {
-    if (entry.intersectionRatio &gt; prevRatio) {
+    if (entry.intersectionRatio > prevRatio) {
       entry.target.style.backgroundColor = increasingColor.replace("ratio", entry.intersectionRatio);
     } else {
       entry.target.style.backgroundColor = decreasingColor.replace("ratio", entry.intersectionRatio);
@@ -497,47 +506,35 @@ window.addEventListener("load", function(event) {
 
     prevRatio = entry.intersectionRatio;
   });
-}</pre>
+}
+```
 
-<p>Pour chaque {{domxref("IntersectionObserverEntry")}} dans la liste <code>entries</code>, on cherche si le {{domxref("IntersectionObserverEntry.intersectionRatio", "intersectionRatio")}} de l'entrée augmente; si c'est le cas, on donne à la propriété CSS {{cssxref("background-color")}} de la cible la valeur <code>increasingColor</code> (pour rappel, c'est la chaîne de caractères <code>"rgba(40, 40, 190, ratio)"</code>), et on remplace le mot "ratio" avec le <code>intersectionRatio</code> de l'entrée. Le résultat : non seulement la couleur change, mais la transparence de l'élément change aussi. Quand le ratio d'intersection diminue, l'alpha de la couleur de fond diminue de même, et l'élément devient plus transparent.</p>
+Pour chaque {{domxref("IntersectionObserverEntry")}} dans la liste `entries`, on cherche si le {{domxref("IntersectionObserverEntry.intersectionRatio", "intersectionRatio")}} de l'entrée augmente; si c'est le cas, on donne à la propriété CSS {{cssxref("background-color")}} de la cible la valeur `increasingColor` (pour rappel, c'est la chaîne de caractères `"rgba(40, 40, 190, ratio)"`), et on remplace le mot "ratio" avec le `intersectionRatio` de l'entrée. Le résultat : non seulement la couleur change, mais la transparence de l'élément change aussi. Quand le ratio d'intersection diminue, l'alpha de la couleur de fond diminue de même, et l'élément devient plus transparent.
 
-<p>De même, si le <code>intersectionRatio</code> augmente, on utilise la chaîne de caractères <code>decreasingColor</code> et on y remplace le mot "ratio" avec <code>intersectionRatio</code> avant d'assigner le <code>background-color</code> de l'élément cible.</p>
+De même, si le `intersectionRatio` augmente, on utilise la chaîne de caractères `decreasingColor` et on y remplace le mot "ratio" avec `intersectionRatio` avant d'assigner le `background-color` de l'élément cible.
 
-<p>Enfin, afin de surveiller si le ratio d'intersection augmente ou diminue, on garde en mémoire le ratio actuel dans la variable <code>prevRatio</code>.</p>
+Enfin, afin de surveiller si le ratio d'intersection augmente ou diminue, on garde en mémoire le ratio actuel dans la variable `prevRatio`.
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>Vous pouvez retrouver le résultat ci-dessous. Déroulez cette page vers le haut ou vers le bas et observez comment l'apparence de la boîte change au fur et à mesure.</p>
+Vous pouvez retrouver le résultat ci-dessous. Déroulez cette page vers le haut ou vers le bas et observez comment l'apparence de la boîte change au fur et à mesure.
 
-<p>{{EmbedLiveSample('Un_exemple_simple', 400, 400)}}</p>
+{{EmbedLiveSample('Un_exemple_simple', 400, 400)}}
 
-<p>Vous pouvez consulter un exemple encore plus détaillé sur l'article <em><a href="/fr/docs/Web/API/Intersection_Observer_API/Timing_element_visibility">Timing element visibility with the Intersection Observer API</a></em>.</p>
+Vous pouvez consulter un exemple encore plus détaillé sur l'article _[Timing element visibility with the Intersection Observer API](/fr/docs/Web/API/Intersection_Observer_API/Timing_element_visibility)_.
 
-<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">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('IntersectionObserver')}}</td>
-   <td>{{Spec2('IntersectionObserver')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                    | État                                         | Commentaire          |
+| ------------------------------------------------ | -------------------------------------------- | -------------------- |
+| {{SpecName('IntersectionObserver')}} | {{Spec2('IntersectionObserver')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.IntersectionObserver")}}</p>
+{{Compat("api.IntersectionObserver")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="https://github.com/WICG/IntersectionObserver/tree/gh-pages/polyfill">Une prothèse (<em>polyfill</em>) pour l'API <em>Intersection Observer</em></a></li>
- <li><em><a href="/fr/docs/Web/API/Intersection_Observer_API/Timing_element_visibility">Timing element visibility with the Intersection Observer API</a></em></li>
- <li>{{domxref("IntersectionObserver")}} et {{domxref("IntersectionObserverEntry")}}</li>
-</ul>
+- [Une prothèse (_polyfill_) pour l'API _Intersection Observer_](https://github.com/WICG/IntersectionObserver/tree/gh-pages/polyfill)
+- _[Timing element visibility with the Intersection Observer API](/fr/docs/Web/API/Intersection_Observer_API/Timing_element_visibility)_
+- {{domxref("IntersectionObserver")}} et {{domxref("IntersectionObserverEntry")}}
diff --git a/files/fr/web/api/intersectionobserver/disconnect/index.md b/files/fr/web/api/intersectionobserver/disconnect/index.md
index b2d7220fc3..253e8d9a5f 100644
--- a/files/fr/web/api/intersectionobserver/disconnect/index.md
+++ b/files/fr/web/api/intersectionobserver/disconnect/index.md
@@ -11,50 +11,33 @@ tags:
   - Reference
 translation_of: Web/API/IntersectionObserver/disconnect
 ---
-<div>{{APIRef("Intersection Observer API")}}</div>
+{{APIRef("Intersection Observer API")}}
 
-<p>La méthode <code><strong>disconnect()</strong></code>, rattachée à l'interface <a href="/fr/docs/Web/API/IntersectionObserver"><code>IntersectionObserver</code></a>, arrête l'observation des changements de visibilité de l'ensemble des éléments cibles.</p>
+La méthode **`disconnect()`**, rattachée à l'interface [`IntersectionObserver`](/fr/docs/Web/API/IntersectionObserver), arrête l'observation des changements de visibilité de l'ensemble des éléments cibles.
 
-<h2 id="syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var>intersectionObserver</var>.disconnect();</pre>
+    intersectionObserver.disconnect();
 
-<h3 id="parameters">Paramètres</h3>
+### Paramètres
 
-<p>Aucun.</p>
+Aucun.
 
-<h3 id="return_value">Valeur de retour</h3>
+### Valeur de retour
 
-<p><code>undefined</code>.</p>
+`undefined`.
 
-<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('IntersectionObserver','#dom-intersectionobserver-disconnect','IntersectionObserver.disconnect()')}}
-      </td>
-      <td>{{Spec2('IntersectionObserver')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                                                                        | Statut                                       | Commentaire          |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------- |
+| {{SpecName('IntersectionObserver','#dom-intersectionobserver-disconnect','IntersectionObserver.disconnect()')}} | {{Spec2('IntersectionObserver')}} | Définition initiale. |
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.IntersectionObserver.disconnect")}}</p>
+{{Compat("api.IntersectionObserver.disconnect")}}
 
-<h2 id="see_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li><a href="/fr/docs/Web/API/IntersectionObserver/observe"><code>observe()</code></a></li>
-  <li><a href="/fr/docs/Web/API/IntersectionObserver/unobserve"><code>unobserve()</code></a></li>
-</ul>
+- [`observe()`](/fr/docs/Web/API/IntersectionObserver/observe)
+- [`unobserve()`](/fr/docs/Web/API/IntersectionObserver/unobserve)
diff --git a/files/fr/web/api/intersectionobserver/index.md b/files/fr/web/api/intersectionobserver/index.md
index cd9eb647cd..4c4e1de213 100644
--- a/files/fr/web/api/intersectionobserver/index.md
+++ b/files/fr/web/api/intersectionobserver/index.md
@@ -10,83 +10,64 @@ tags:
   - observers
 translation_of: Web/API/IntersectionObserver
 ---
-<div>{{APIRef("Intersection Observer API")}}</div>
+{{APIRef("Intersection Observer API")}}
 
-<p>L'interface <code><strong>IntersectionObserver</strong></code> de l'<a href="/fr/docs/Web/API/Intersection_Observer_API">API <i>Intersection Observer</i></a> fournit un moyen d'observer de manière asynchrone les changements d'intersection d'un élément cible avec un élément ancêtre ou avec la fenêtre du document (<a href="/fr/docs/Glossary/Viewport"><i>viewport</i></a>). L'ancêtre ou la fenêtre du document est alors appelé racine dans ce contexte.</p>
+L'interface **`IntersectionObserver`** de l'[API _Intersection Observer_](/fr/docs/Web/API/Intersection_Observer_API) fournit un moyen d'observer de manière asynchrone les changements d'intersection d'un élément cible avec un élément ancêtre ou avec la fenêtre du document ([_viewport_](/fr/docs/Glossary/Viewport)). L'ancêtre ou la fenêtre du document est alors appelé racine dans ce contexte.
 
-<p>Lorsqu'un objet implémentant <code>IntersectionObserver</code> est créé, il est configuré pour surveiller des ratios donnés de visibilité au sein de la racine. La configuration ne peut être changée après initialisation de l'<code>IntersectionObserver</code>. Ainsi un certain observateur ne sera utile que pour surveiller certains changements spécifiques de visibilité ; toutefois, on peut observer de multiples éléments avec un unique observateur.</p>
+Lorsqu'un objet implémentant `IntersectionObserver` est créé, il est configuré pour surveiller des ratios donnés de visibilité au sein de la racine. La configuration ne peut être changée après initialisation de l'`IntersectionObserver`. Ainsi un certain observateur ne sera utile que pour surveiller certains changements spécifiques de visibilité ; toutefois, on peut observer de multiples éléments avec un unique observateur.
 
-<h2 id="constructor">Constructeur</h2>
+## Constructeur
 
-<dl>
- <dt><a href="/fr/docs/Web/API/IntersectionObserver/IntersectionObserver"><code>IntersectionObserver.IntersectionObserver()</code></a> {{Experimental_inline}}</dt>
- <dd>Crée un nouvel objet <code>IntersectionObserver</code> qui exécutera une fonction de rappel lorsqu'il détectera que la visibilité de l'élément cible a franchi un ou plusieurs seuils.</dd>
-</dl>
+- [`IntersectionObserver.IntersectionObserver()`](/fr/docs/Web/API/IntersectionObserver/IntersectionObserver) {{Experimental_inline}}
+  - : Crée un nouvel objet `IntersectionObserver` qui exécutera une fonction de rappel lorsqu'il détectera que la visibilité de l'élément cible a franchi un ou plusieurs seuils.
 
-<h2 id="properties">Propriétés</h2>
+## Propriétés
 
-<dl>
- <dt><a href="/fr/docs/Web/API/IntersectionObserver/root"><code>IntersectionObserver.root</code></a> {{readonlyinline}} {{Experimental_inline}}</dt>
- <dd>L'<a href="/fr/docs/Web/API/Element">élément</a> ou le <a href="/fr/docs/Web/API/Document">document</a> dont les limites sont utilisées comme boîte englobante pour le test de l'intersection. Si aucune racine n'est passée au constructeur ou que sa valeur est <code>null</code>, c'est la zone d'affichage (<i>viewport</i>) de plus haut niveau qui est utilisée.</dd>
- <dt><a href="/fr/docs/Web/API/IntersectionObserver/rootMargin"><code>IntersectionObserver.rootMargin</code></a> {{readonlyinline}} {{Experimental_inline}}</dt>
- <dd>Un rectangle de décalage appliqué à <a href="/fr/docs/Glossary/bounding_box">la boîte englobante</a> de la racine lors du calcul des intersections. La zone de la racine est ainsi réduite ou étendue pour les calculs. La valeur renvoyée par cette propriété peut différer de celle spécifiée lors de l'appel du constructeur, car elle peut être modifiée pour répondre aux exigences internes. Chaque décalage peut être exprimé en pixels (px) ou en pourcentage (%). La valeur par défaut est <code>"0px 0px 0px 0px"</code>.</dd>
- <dt><a href="/fr/docs/Web/API/IntersectionObserver/thresholds"><code>IntersectionObserver.thresholds</code></a> {{readonlyinline}} {{Experimental_inline}}</dt>
- <dd>Une liste de seuils, triée par ordre numérique croissant, où chaque seuil est un rapport de la surface d'intersection à la surface de la zone de délimitation de l'élément observé. Les notifications pour une cible sont émises dès lors qu'un seuil au moins est franchi pour cette cible. Si aucune valeur n'est donnée, 0 est utilisé comme seuil par défaut.</dd>
-</dl>
+- [`IntersectionObserver.root`](/fr/docs/Web/API/IntersectionObserver/root) {{readonlyinline}} {{Experimental_inline}}
+  - : L'[élément](/fr/docs/Web/API/Element) ou le [document](/fr/docs/Web/API/Document) dont les limites sont utilisées comme boîte englobante pour le test de l'intersection. Si aucune racine n'est passée au constructeur ou que sa valeur est `null`, c'est la zone d'affichage (_viewport_) de plus haut niveau qui est utilisée.
+- [`IntersectionObserver.rootMargin`](/fr/docs/Web/API/IntersectionObserver/rootMargin) {{readonlyinline}} {{Experimental_inline}}
+  - : Un rectangle de décalage appliqué à [la boîte englobante](/fr/docs/Glossary/bounding_box) de la racine lors du calcul des intersections. La zone de la racine est ainsi réduite ou étendue pour les calculs. La valeur renvoyée par cette propriété peut différer de celle spécifiée lors de l'appel du constructeur, car elle peut être modifiée pour répondre aux exigences internes. Chaque décalage peut être exprimé en pixels (px) ou en pourcentage (%). La valeur par défaut est `"0px 0px 0px 0px"`.
+- [`IntersectionObserver.thresholds`](/fr/docs/Web/API/IntersectionObserver/thresholds) {{readonlyinline}} {{Experimental_inline}}
+  - : Une liste de seuils, triée par ordre numérique croissant, où chaque seuil est un rapport de la surface d'intersection à la surface de la zone de délimitation de l'élément observé. Les notifications pour une cible sont émises dès lors qu'un seuil au moins est franchi pour cette cible. Si aucune valeur n'est donnée, 0 est utilisé comme seuil par défaut.
 
-<h2 id="methods">Méthodes</h2>
+## Méthodes
 
-<dl>
- <dt><a href="/fr/docs/Web/API/IntersectionObserver/disconnect"><code>IntersectionObserver.disconnect()</code></a> {{Experimental_inline}}</dt>
- <dd>Indique à l'objet <code>IntersectionObserver</code> de ne plus observer aucune cible.</dd>
- <dt><a href="/fr/docs/Web/API/IntersectionObserver/observe"><code>IntersectionObserver.observe()</code></a> {{Experimental_inline}}</dt>
- <dd>Indique à l'objet <code>IntersectionObserver</code> un nouvel élément à observer.</dd>
- <dt><a href="/fr/docs/Web/API/IntersectionObserver/takeRecords"><code>IntersectionObserver.takeRecords()</code></a> {{Experimental_inline}}</dt>
- <dd>Retourne un tableau d'objets <a href="/fr/docs/Web/API/IntersectionObserverEntry"><code>IntersectionObserverEntry</code></a> pour toutes les cibles observées et cesse de surveiller chacune d'elles.</dd>
- <dt><a href="/fr/docs/Web/API/IntersectionObserver/unobserve"><code>IntersectionObserver.unobserve()</code></a> {{Experimental_inline}}</dt>
- <dd>Indique à l'objet <code>IntersectionObserver</code> de cesser d'observer un élément cible particuler.</dd>
-</dl>
+- [`IntersectionObserver.disconnect()`](/fr/docs/Web/API/IntersectionObserver/disconnect) {{Experimental_inline}}
+  - : Indique à l'objet `IntersectionObserver` de ne plus observer aucune cible.
+- [`IntersectionObserver.observe()`](/fr/docs/Web/API/IntersectionObserver/observe) {{Experimental_inline}}
+  - : Indique à l'objet `IntersectionObserver` un nouvel élément à observer.
+- [`IntersectionObserver.takeRecords()`](/fr/docs/Web/API/IntersectionObserver/takeRecords) {{Experimental_inline}}
+  - : Retourne un tableau d'objets [`IntersectionObserverEntry`](/fr/docs/Web/API/IntersectionObserverEntry) pour toutes les cibles observées et cesse de surveiller chacune d'elles.
+- [`IntersectionObserver.unobserve()`](/fr/docs/Web/API/IntersectionObserver/unobserve) {{Experimental_inline}}
+  - : Indique à l'objet `IntersectionObserver` de cesser d'observer un élément cible particuler.
 
-<h2 id="example">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">var intersectionObserver = new IntersectionObserver(function(entries) {
+```js
+var intersectionObserver = new IntersectionObserver(function(entries) {
   // Si intersectionRatio vaut 0 ou moins, la cible
   // est hors de vue et rien n'est alors fait
-  if (entries[0].intersectionRatio &lt;= 0) return;
+  if (entries[0].intersectionRatio <= 0) return;
 
   loadItems(10);
   console.log('Nouveaux éléments chargés');
 });
 // début de l'observation
-intersectionObserver.observe(document.querySelector('.scrollerFooter'));</pre>
-
-<h2 id="specifications">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('IntersectionObserver')}}</td>
-      <td>{{Spec2('IntersectionObserver')}}</td>
-      <td></td>
-    </tr>
-  </tbody>
-</table>
-
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.IntersectionObserver")}}</p>
-
-<h2 id="see_also">Voir aussi</h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/API/MutationObserver"><code>MutationObserver</code></a></li>
-  <li><a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a></li>
-  <li><a href="/fr/docs/Web/API/ResizeObserver"><code>ResizeObserver</code></a></li>
-</ul>
+intersectionObserver.observe(document.querySelector('.scrollerFooter'));
+```
+
+## Spécifications
+
+| Spécification                                    | Statut                                       | Commentaire |
+| ------------------------------------------------ | -------------------------------------------- | ----------- |
+| {{SpecName('IntersectionObserver')}} | {{Spec2('IntersectionObserver')}} |             |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.IntersectionObserver")}}
+
+## Voir aussi
+
+- [`MutationObserver`](/fr/docs/Web/API/MutationObserver)
+- [`PerformanceObserver`](/fr/docs/Web/API/PerformanceObserver)
+- [`ResizeObserver`](/fr/docs/Web/API/ResizeObserver)
diff --git a/files/fr/web/api/intersectionobserver/intersectionobserver/index.md b/files/fr/web/api/intersectionobserver/intersectionobserver/index.md
index 4d90eff28d..e6089dc86f 100644
--- a/files/fr/web/api/intersectionobserver/intersectionobserver/index.md
+++ b/files/fr/web/api/intersectionobserver/intersectionobserver/index.md
@@ -11,79 +11,63 @@ tags:
   - Visible
 translation_of: Web/API/IntersectionObserver/IntersectionObserver
 ---
-<div>{{APIRef("Intersection Observer API")}}</div>
+{{APIRef("Intersection Observer API")}}
 
-<p>Le constructeur <strong><code>IntersectionObserver()</code></strong> crée et retourne un nouvel objet <a href="/fr/docs/Web/API/IntersectionObserver"><code>IntersectionObserver</code></a>. Les marges appliquées à la zone racine (indiquée dans l'objet <code>options</code> via la propriété <code>rootMargin</code>, voir ci-après) sont vérifiées pour s'assurer de la validité de leur syntaxe. Il en va de même pour les seuils (propriété <code>thresholds</code> d'<code>options</code>) dont l'intervalle de validité (entre 0.0 et 1.0 inclus) et l'ordre (qui doit être croissant) sont vérifiés. Si la liste des seuils est vide, sa valeur par défaut est [0.0].</p>
+Le constructeur **`IntersectionObserver()`** crée et retourne un nouvel objet [`IntersectionObserver`](/fr/docs/Web/API/IntersectionObserver). Les marges appliquées à la zone racine (indiquée dans l'objet `options` via la propriété `rootMargin`, voir ci-après) sont vérifiées pour s'assurer de la validité de leur syntaxe. Il en va de même pour les seuils (propriété `thresholds` d'`options`) dont l'intervalle de validité (entre 0.0 et 1.0 inclus) et l'ordre (qui doit être croissant) sont vérifiés. Si la liste des seuils est vide, sa valeur par défaut est \[0.0].
 
-<h2 id="syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">let <var>observer</var> = new IntersectionObserver(<var>callback</var>[, <var>options</var>]);</pre>
+    let observer = new IntersectionObserver(callback[, options]);
 
-<h3 id="parameters">Paramètres</h3>
+### Paramètres
 
-<dl>
-  <dt><code>callback</code></dt>
-  <dd>Une fonction appelée lorsque la proportion de l'élément qui est visible franchit un seuil. La fonction de rappel reçoit en entrée deux paramètres :
-    <dl>
-      <dt><code>entries</code></dt>
-      <dd>Une liste d'objets <a href="/fr/docs/Web/API/IntersectionObserverEntry"><code>IntersectionObserverEntry</code></a>, chacun représentant un seuil franchi, que ce soit en passant au-dessus ou en dessous du pourcentage spécifié par le seuil.</dd>
-      <dt><code>observateur</code></dt>
-      <dd>L'objet <a href="/fr/docs/Web/API/IntersectionObserver"><code>IntersectionObserver</code></a> pour lequel la fonction de rappel est invoquée.</dd>
-    </dl>
-  </dd>
-  <dt><code>options</code> {{optional_inline}}</dt>
-  <dd>Un objet optionnel qui paramètre l'observateur. Si <code>options</code> n'est pas spécifié, l'observateur utilise la fenêtre du document comme racine, sans appliquer de marge, et avec un seuil de 0% (signifiant que le moindre changement d'un pixel suffira à déclencher la fonction de rappel). Les propriétés suivantes peuvent être utilisées pour la configuration :
-    <dl>
-      <dt><code>root</code></dt>
-      <dd>Un objet <a href="/fr/docs/Web/API/Element"><code>Element</code></a> ou <a href="/fr/docs/Web/API/Document"><code>Document</code></a> qui est un ancêtre de l'élément observé et dont la boîte englobante sera considérée comme la zone d'affichage (<i>viewport</i>). Toute portion de l'élément cible qui n'est pas visible dans la zone couverte par cette zone englobant n'est pas considérée visible.</dd>
-      <dt><code>rootMargin</code></dt>
-      <dd>Une chaîne de caractères spécifiant un ensemble de décalages à ajouter à la zone englobante pour le calcul des intersections. La zone effective utilisées pour les calculs peut ainsi être réduite ou étendue. La syntaxe est proche de celle utilisée pour la propriété CSS <a href="/fr/docs/Web/CSS/margin"><code>margin</code></a>. Voir <a href="/fr/docs/Web/API/Intersection_Observer_API">L'élément racine et sa marge externe</a> pour plus d'informations sur le fonctionnement des marges et la syntaxe. Sa valeur par défaut est <code>"0px 0px 0px 0px"</code>.</dd>
-      <dt><code>threshold</code></dt>
-      <dd>Un nombre ou un tableau de nombres entre 0.0 et 1.0 (inclus), spécifiant des seuils définis comme ratios de la part visible d'un élément cible observé par rapport à sa surface totale. Une valeur de 0.0 signifie que tout pixel visible de l'élément le rend visible et 1.0 que l'entièreté de l'élément doit être visible. Voir <a href="/fr/docs/Web/API/Intersection_Observer_API#Thresholds">cette section sur les seuils</a> pour une description plus approfondie de l'usage des seuils d'intersection. Le seuil par défaut est 0.0.</dd>
-    </dl>
-  </dd>
-</dl>
+- `callback`
 
-<h3 id="return_value">Valeur de retour</h3>
+  - : Une fonction appelée lorsque la proportion de l'élément qui est visible franchit un seuil. La fonction de rappel reçoit en entrée deux paramètres :
 
-<p>Un nouvel objet <a href="/fr/docs/Web/API/IntersectionObserver"><code>IntersectionObserver</code></a> pouvant être utilisé pour observer la visibilité d'un élément cible au sein de la racine indiquée, pour le franchissement des seuils de visibilité spécifiés. Il faudra appeler la méthode <a href="/fr/docs/Web/API/IntersectionObserver/observe"><code>observe()</code></a> de l'objet pour commencer à observer effectivement les changements de visibilité d'un élément cible.</p>
+    - `entries`
+      - : Une liste d'objets [`IntersectionObserverEntry`](/fr/docs/Web/API/IntersectionObserverEntry), chacun représentant un seuil franchi, que ce soit en passant au-dessus ou en dessous du pourcentage spécifié par le seuil.
+    - `observateur`
+      - : L'objet [`IntersectionObserver`](/fr/docs/Web/API/IntersectionObserver) pour lequel la fonction de rappel est invoquée.
 
-<h3 id="exceptions">Exceptions</h3>
+- `options` {{optional_inline}}
 
-<dl>
-  <dt><code>SyntaxError</code></dt>
-  <dd>La propriété <code>rootMargin</code> de l'argument <code>options</code> est invalide.</dd>
-  <dt><code>RangeError</code></dt>
-  <dd>Une ou plusieurs des valeurs de <code>threshold</code> (portée par l'argument <code>options</code>) est en dehors de l'intervalle allant de 0.0 à 1.0.</dd>
-</dl>
+  - : Un objet optionnel qui paramètre l'observateur. Si `options` n'est pas spécifié, l'observateur utilise la fenêtre du document comme racine, sans appliquer de marge, et avec un seuil de 0% (signifiant que le moindre changement d'un pixel suffira à déclencher la fonction de rappel). Les propriétés suivantes peuvent être utilisées pour la configuration :
 
-<h2 id="example">Exemple</h2>
+    - `root`
+      - : Un objet [`Element`](/fr/docs/Web/API/Element) ou [`Document`](/fr/docs/Web/API/Document) qui est un ancêtre de l'élément observé et dont la boîte englobante sera considérée comme la zone d'affichage (_viewport_). Toute portion de l'élément cible qui n'est pas visible dans la zone couverte par cette zone englobant n'est pas considérée visible.
+    - `rootMargin`
+      - : Une chaîne de caractères spécifiant un ensemble de décalages à ajouter à la zone englobante pour le calcul des intersections. La zone effective utilisées pour les calculs peut ainsi être réduite ou étendue. La syntaxe est proche de celle utilisée pour la propriété CSS [`margin`](/fr/docs/Web/CSS/margin). Voir [L'élément racine et sa marge externe](/fr/docs/Web/API/Intersection_Observer_API) pour plus d'informations sur le fonctionnement des marges et la syntaxe. Sa valeur par défaut est `"0px 0px 0px 0px"`.
+    - `threshold`
+      - : Un nombre ou un tableau de nombres entre 0.0 et 1.0 (inclus), spécifiant des seuils définis comme ratios de la part visible d'un élément cible observé par rapport à sa surface totale. Une valeur de 0.0 signifie que tout pixel visible de l'élément le rend visible et 1.0 que l'entièreté de l'élément doit être visible. Voir [cette section sur les seuils](/fr/docs/Web/API/Intersection_Observer_API#Thresholds) pour une description plus approfondie de l'usage des seuils d'intersection. Le seuil par défaut est 0.0.
 
-<p>Cet exemple crée un nouvel observateur d'intersection qui appelle la fonction <code>myObserverCallback</code> chaque fois que la zone visible de l'élément observé change d'au moins 10%.</p>
+### Valeur de retour
 
-<pre class="brush: js">let observer = new IntersectionObserver(myObserverCallback, {
+Un nouvel objet [`IntersectionObserver`](/fr/docs/Web/API/IntersectionObserver) pouvant être utilisé pour observer la visibilité d'un élément cible au sein de la racine indiquée, pour le franchissement des seuils de visibilité spécifiés. Il faudra appeler la méthode [`observe()`](/fr/docs/Web/API/IntersectionObserver/observe) de l'objet pour commencer à observer effectivement les changements de visibilité d'un élément cible.
+
+### Exceptions
+
+- `SyntaxError`
+  - : La propriété `rootMargin` de l'argument `options` est invalide.
+- `RangeError`
+  - : Une ou plusieurs des valeurs de `threshold` (portée par l'argument `options`) est en dehors de l'intervalle allant de 0.0 à 1.0.
+
+## Exemple
+
+Cet exemple crée un nouvel observateur d'intersection qui appelle la fonction `myObserverCallback` chaque fois que la zone visible de l'élément observé change d'au moins 10%.
+
+```js
+let observer = new IntersectionObserver(myObserverCallback, {
   threshold: 0.1
-});</pre>
-
-<h2 id="specifications">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('IntersectionObserver','#dom-intersectionobserver-intersectionobserver','IntersectionObserver constructor')}}</td>
-      <td>{{Spec2('IntersectionObserver')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
-
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.IntersectionObserver.IntersectionObserver")}}</p>
+});
+```
+
+## Spécifications
+
+| Spécification                                                                                                                                                    | Statut                                       | Commentaire          |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------- |
+| {{SpecName('IntersectionObserver','#dom-intersectionobserver-intersectionobserver','IntersectionObserver constructor')}} | {{Spec2('IntersectionObserver')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.IntersectionObserver.IntersectionObserver")}}
diff --git a/files/fr/web/api/intersectionobserver/observe/index.md b/files/fr/web/api/intersectionobserver/observe/index.md
index 7fc8411cbb..c38e896027 100644
--- a/files/fr/web/api/intersectionobserver/observe/index.md
+++ b/files/fr/web/api/intersectionobserver/observe/index.md
@@ -11,53 +11,35 @@ tags:
   - observe
 translation_of: Web/API/IntersectionObserver/observe
 ---
-<div>{{APIRef("Intersection Observer API")}}{{SeeCompatTable}}</div>
+{{APIRef("Intersection Observer API")}}{{SeeCompatTable}}
 
-<p>La méthode <code><strong>observe()</strong></code> de l'interface <a href="/fr/docs/Web/API/IntersectionObserver"><code>IntersectionObserver</code></a> ajoute un élément à l'ensemble des éléments cibles étant observés par l'<code>IntersectionObserver</code>. Un observateur possède un ensemble de seuils d'intersection et une racine, mais peut observer plusieurs éléments cibles en surveillant leurs changements de visibilité indépendamment. Pour cesser d'observer un élément, il faut appeler la méthode <a href="/fr/docs/Web/API/IntersectionObserver/unobserve"><code>IntersectionObserver.unobserve()</code></a>.</p>
+La méthode **`observe()`** de l'interface [`IntersectionObserver`](/fr/docs/Web/API/IntersectionObserver) ajoute un élément à l'ensemble des éléments cibles étant observés par l'`IntersectionObserver`. Un observateur possède un ensemble de seuils d'intersection et une racine, mais peut observer plusieurs éléments cibles en surveillant leurs changements de visibilité indépendamment. Pour cesser d'observer un élément, il faut appeler la méthode [`IntersectionObserver.unobserve()`](/fr/docs/Web/API/IntersectionObserver/unobserve).
 
-<p>Lorsque la visibilité d'un élément cible franchit l'un des seuils d'intersection de l'observateur (tel que listé dans <a href="/fr/docs/Web/API/IntersectionObserver/thresholds"><code>IntersectionObserver.thresholds</code></a>, la fonction de rappel de l'observateur est executée avec comme argument un objet <a href="/fr/docs/Web/API/IntersectionObserverEntry"><code>IntersectionObserverEntry</code></a> représentant le changement d'intersection qui a été observé. À noter que cette conception permet à de multiples changements d'intersection d'éléments différents d'être traités par un unique appel à la fonction de rappel au moyen d'un tableau d'objets <code>IntersectionObserverEntry</code>.</p>
+Lorsque la visibilité d'un élément cible franchit l'un des seuils d'intersection de l'observateur (tel que listé dans [`IntersectionObserver.thresholds`](/fr/docs/Web/API/IntersectionObserver/thresholds), la fonction de rappel de l'observateur est executée avec comme argument un objet [`IntersectionObserverEntry`](/fr/docs/Web/API/IntersectionObserverEntry) représentant le changement d'intersection qui a été observé. À noter que cette conception permet à de multiples changements d'intersection d'éléments différents d'être traités par un unique appel à la fonction de rappel au moyen d'un tableau d'objets `IntersectionObserverEntry`.
 
-<h2 id="syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var>IntersectionObserver</var>.observe(<var>targetElement</var>);</pre>
+    IntersectionObserver.observe(targetElement);
 
-<h3 id="parameters">Paramètres</h3>
+### Paramètres
 
-<dl>
-  <dt><code>targetElement</code></dt>
-  <dd>Un <a href="/fr/docs/Web/API/Element">élément</a> dont on souhaite observer les changements de visibilité dans la racine. Cet élément doit nécessairement être un descendant de l'élément racine (ou contenu dans le document courant si la racine est la fenêtre du document).</dd>
-</dl>
+- `targetElement`
+  - : Un [élément](/fr/docs/Web/API/Element) dont on souhaite observer les changements de visibilité dans la racine. Cet élément doit nécessairement être un descendant de l'élément racine (ou contenu dans le document courant si la racine est la fenêtre du document).
 
-<h3 id="return_value">Valeur de retour</h3>
+### Valeur de retour
 
-<p><code>undefined</code>.</p>
+`undefined`.
 
-<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('IntersectionObserver','#dom-intersectionobserver-observe','IntersectionObserver.observe()')}}</td>
-      <td>{{Spec2('IntersectionObserver')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                                | Statut                                       | Commentaire          |
+| -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------- |
+| {{SpecName('IntersectionObserver','#dom-intersectionobserver-observe','IntersectionObserver.observe()')}} | {{Spec2('IntersectionObserver')}} | Définition initiale. |
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.IntersectionObserver.observe")}}</p>
+{{Compat("api.IntersectionObserver.observe")}}
 
+## Voir aussi
 
-<h2 id="see_also">Voir aussi</h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/API/IntersectionObserver/unobserve"><code>IntersectionObserver.unobserve()</code></a></li>
-</ul>
+- [`IntersectionObserver.unobserve()`](/fr/docs/Web/API/IntersectionObserver/unobserve)
diff --git a/files/fr/web/api/intersectionobserver/root/index.md b/files/fr/web/api/intersectionobserver/root/index.md
index 3778b82c7f..bc4d737cea 100644
--- a/files/fr/web/api/intersectionobserver/root/index.md
+++ b/files/fr/web/api/intersectionobserver/root/index.md
@@ -11,51 +11,38 @@ tags:
   - root
 translation_of: Web/API/IntersectionObserver/root
 ---
-<div>{{APIRef("Intersection Observer API")}}</div>
+{{APIRef("Intersection Observer API")}}
 
-<p>La propriété en lecture seule <strong><code>root</code></strong> de l'interface <a href="/fr/docs/Web/API/IntersectionObserver"><code>IntersectionObserver</code></a> identifie l'<a href="/fr/docs/Web/API/Element"><code>Element</code></a> ou le <a href="/fr/docs/Web/API/Document"><code>Document</code></a> dont les bornes sont considérées comme la zone englobante (<i>bounding box</i>) de la zone d'affichage (<i>viewport</i>) au sein de laquelle les intersections avec la cible sont observées. Si <code>root</code> vaut <code>null</code>, ce sont les limites de la zone d'affichage (<i>viewport</i>) courantes qui sont utilisées.</p>
+La propriété en lecture seule **`root`** de l'interface [`IntersectionObserver`](/fr/docs/Web/API/IntersectionObserver) identifie l'[`Element`](/fr/docs/Web/API/Element) ou le [`Document`](/fr/docs/Web/API/Document) dont les bornes sont considérées comme la zone englobante (_bounding box_) de la zone d'affichage (_viewport_) au sein de laquelle les intersections avec la cible sont observées. Si `root` vaut `null`, ce sont les limites de la zone d'affichage (_viewport_) courantes qui sont utilisées.
 
-<h2 id="syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var>root</var> = IntersectionObserver.root;</pre>
+    root = IntersectionObserver.root;
 
-<h3 id="value">Valeur</h3>
+### Valeur
 
-<p>Un objet <a href="/fr/docs/Web/API/Element"><code>Element</code></a> ou <a href="/fr/docs/Web/API/Document"><code>Document</code></a> dont la boîte englobante est utilisée pour définir les limites de la zone de visibilité utilisée pour déterminer la proportion de l'élément cible qui est visible. L'intersection de ce rectangle délimiteur, décalé par toute marge spécifiée au moyen des options passées au constructeur de l'<a href="/fr/docs/Web/API/IntersectionObserver/IntersectionObserver"><code>IntersectionObserver()</code></a> (voir <code>options.rootMargin</code>), les limites de la zone recouverte par l'élément cible, moins les limites de la zone recouverte par chaque élément ou autre objet chevauchant l'élément cible, est considéré comme la partie visible de l'élément.</p>
+Un objet [`Element`](/fr/docs/Web/API/Element) ou [`Document`](/fr/docs/Web/API/Document) dont la boîte englobante est utilisée pour définir les limites de la zone de visibilité utilisée pour déterminer la proportion de l'élément cible qui est visible. L'intersection de ce rectangle délimiteur, décalé par toute marge spécifiée au moyen des options passées au constructeur de l'[`IntersectionObserver()`](/fr/docs/Web/API/IntersectionObserver/IntersectionObserver) (voir `options.rootMargin`), les limites de la zone recouverte par l'élément cible, moins les limites de la zone recouverte par chaque élément ou autre objet chevauchant l'élément cible, est considéré comme la partie visible de l'élément.
 
-<p>Si <code>root</code> vaut <code>null</code>, ce sera le document parent qui sera considéré comme racine et la zone d'intersection sera la zone d'affichage (<i>viewport</i>).</p>
+Si `root` vaut `null`, ce sera le document parent qui sera considéré comme racine et la zone d'intersection sera la zone d'affichage (_viewport_).
 
-<h2 id="example">Exemple</h2>
+## Exemple
 
-<p>Cet exemple définit la propriété <a href="/fr/docs/Web/CSS/border"><code>border</code></a> de l'élément racine de l'observateur d'intersection comme une ligne verte moyenne de 2 pixels grâce aux propriétés exposées par CSSOM.</p>
+Cet exemple définit la propriété [`border`](/fr/docs/Web/CSS/border) de l'élément racine de l'observateur d'intersection comme une ligne verte moyenne de 2 pixels grâce aux propriétés exposées par CSSOM.
 
-<pre class="brush: js">observer.root.style.border = "2px solid #44aa44";</pre>
+```js
+observer.root.style.border = "2px solid #44aa44";
+```
 
-<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('IntersectionObserver', '#dom-intersectionobserver-root', 'IntersectionObserver')}}</td>
-      <td>{{Spec2('IntersectionObserver')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                                                | Statut                                       | Commentaire          |
+| ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------- |
+| {{SpecName('IntersectionObserver', '#dom-intersectionobserver-root', 'IntersectionObserver')}} | {{Spec2('IntersectionObserver')}} | Définition initiale. |
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.IntersectionObserver.root")}}</p>
+{{Compat("api.IntersectionObserver.root")}}
 
-<h2 id="see_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li><a href="/fr/docs/Web/API/Intersection_Observer_API/Timing_element_visibility">Mesurer la visibilité d'un élément dans le temps l'API <i>Intersection Observer</i></a></li>
-</ul>
+- [Mesurer la visibilité d'un élément dans le temps l'API _Intersection Observer_](/fr/docs/Web/API/Intersection_Observer_API/Timing_element_visibility)
diff --git a/files/fr/web/api/intersectionobserver/rootmargin/index.md b/files/fr/web/api/intersectionobserver/rootmargin/index.md
index 87e13a1306..a8c5ba7dac 100644
--- a/files/fr/web/api/intersectionobserver/rootmargin/index.md
+++ b/files/fr/web/api/intersectionobserver/rootmargin/index.md
@@ -11,43 +11,30 @@ tags:
   - rootMargin
 translation_of: Web/API/IntersectionObserver/rootMargin
 ---
-<div>{{APIRef("Intersection Observer API")}}{{SeeCompatTable}}</div>
+{{APIRef("Intersection Observer API")}}{{SeeCompatTable}}
 
-<p>La propriété <strong><code>rootMargin</code></strong> est une propriété en lecture seule de l'interface <a href="/fr/docs/Web/API/IntersectionObserver"><code>IntersectionObserver</code></a>. C'est une chaîne de caractères avec une syntaxe similaire à celle de la propriété CSS <a href="/fr/docs/Web/CSS/margin"><code>margin</code></a>. Chaque côté de la zone rectangulaire représentée par <code>rootMargin</code> est ajouté au côté correspondant de la boîte englobante de la <a href="/fr/docs/Web/API/IntersectionObserver/root">racine</a> de l'élément avant que le test d'intersection soit effectué. Cela permet, par exemple, d'ajuster les limites vers l'extérieur afin que l'élément cible soit considéré comme entièrement visible même si un certain nombre de pixels en largeur ou en hauteur sont rognés, ou encore pour traiter la cible comme partiellement masquée si une bordure est trop proche de celle de la boîte englobante de l'élément racine.</p>
+La propriété **`rootMargin`** est une propriété en lecture seule de l'interface [`IntersectionObserver`](/fr/docs/Web/API/IntersectionObserver). C'est une chaîne de caractères avec une syntaxe similaire à celle de la propriété CSS [`margin`](/fr/docs/Web/CSS/margin). Chaque côté de la zone rectangulaire représentée par `rootMargin` est ajouté au côté correspondant de la boîte englobante de la [racine](/fr/docs/Web/API/IntersectionObserver/root) de l'élément avant que le test d'intersection soit effectué. Cela permet, par exemple, d'ajuster les limites vers l'extérieur afin que l'élément cible soit considéré comme entièrement visible même si un certain nombre de pixels en largeur ou en hauteur sont rognés, ou encore pour traiter la cible comme partiellement masquée si une bordure est trop proche de celle de la boîte englobante de l'élément racine.
 
-<p>Voir <a href="/fr/docs/Web/API/Intersection_Observer_API">la section sur l'élément racine et sa marge externe</a> pour une explication plus approfondie à propos de la marge externe de l'élément racine et son fonctionnement.</p>
+Voir [la section sur l'élément racine et sa marge externe](/fr/docs/Web/API/Intersection_Observer_API) pour une explication plus approfondie à propos de la marge externe de l'élément racine et son fonctionnement.
 
-<h2 id="syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var>marginString</var> = IntersectionObserver.rootMargin;</pre>
+    marginString = IntersectionObserver.rootMargin;
 
-<h3 id="value">Valeur</h3>
+### Valeur
 
-<p>Une chaîne de caractères, formatée d'une manière similaire à la valeur de la propriété CSS <a href="/fr/docs/Web/CSS/margin"><code>margin</code></a>, contenant les décalages pour un ou plusieurs côtés de la boîte englobante de l'élément racine. Ces décalages sont ajoutés aux valeurs correspondantes de la boîte englobante de l'élément racine avant le calcul de l'intersection entre la zone rectangulaire résultante et celle couverte par l'élément cible.</p>
+Une chaîne de caractères, formatée d'une manière similaire à la valeur de la propriété CSS [`margin`](/fr/docs/Web/CSS/margin), contenant les décalages pour un ou plusieurs côtés de la boîte englobante de l'élément racine. Ces décalages sont ajoutés aux valeurs correspondantes de la boîte englobante de l'élément racine avant le calcul de l'intersection entre la zone rectangulaire résultante et celle couverte par l'élément cible.
 
-<p>La chaîne de caractères renvoyée par cette propriété peut ne pas correspondre à celle spécifiée lors de l'initialisation de l'<a href="/fr/docs/Web/API/IntersectionObserver"><code>IntersectionObserver</code></a>. Le navigateur a la possibilité de modifier la valeur.</p>
+La chaîne de caractères renvoyée par cette propriété peut ne pas correspondre à celle spécifiée lors de l'initialisation de l'[`IntersectionObserver`](/fr/docs/Web/API/IntersectionObserver). Le navigateur a la possibilité de modifier la valeur.
 
-<p>Si <code>rootMargin</code> n'est pas spécifiée à l'initialisation de l'objet, sa valeur par défaut vaudra <code>"0px 0px 0px 0px"</code>, signifiant que l'intersection sera calculée entre les limites non modifiées de l'élément racine et celles de l'élément cible. <a href="/fr/docs/Web/API/Intersection_Observer_API">La section sur l'élément racine et sa marge externe</a> décrit avec plus de détails comment <code>rootMargin</code> est utilisée.</p>
+Si `rootMargin` n'est pas spécifiée à l'initialisation de l'objet, sa valeur par défaut vaudra `"0px 0px 0px 0px"`, signifiant que l'intersection sera calculée entre les limites non modifiées de l'élément racine et celles de l'élément cible. [La section sur l'élément racine et sa marge externe](/fr/docs/Web/API/Intersection_Observer_API) décrit avec plus de détails comment `rootMargin` est utilisée.
 
-<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('IntersectionObserver', '#dom-intersectionobserver-rootMargin', 'IntersectionObserver.rootMargin')}}</td>
-      <td>{{Spec2('IntersectionObserver')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                                                                        | Statut                                       | Commentaire          |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------- |
+| {{SpecName('IntersectionObserver', '#dom-intersectionobserver-rootMargin', 'IntersectionObserver.rootMargin')}} | {{Spec2('IntersectionObserver')}} | Définition initiale. |
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.IntersectionObserver.rootMargin")}}</p>
+{{Compat("api.IntersectionObserver.rootMargin")}}
diff --git a/files/fr/web/api/intersectionobserver/takerecords/index.md b/files/fr/web/api/intersectionobserver/takerecords/index.md
index ceb2a5db1e..0e04aefea1 100644
--- a/files/fr/web/api/intersectionobserver/takerecords/index.md
+++ b/files/fr/web/api/intersectionobserver/takerecords/index.md
@@ -12,53 +12,34 @@ tags:
   - takeRecords
 translation_of: Web/API/IntersectionObserver/takeRecords
 ---
-<div>{{APIRef("Intersection Observer API")}}</div>
+{{APIRef("Intersection Observer API")}}
 
-<p>La méthode <code><strong>takeRecords()</strong></code> de l'interface <a href="/fr/docs/Web/API/IntersectionObserver"><code>IntersectionObserver</code></a> renvoie un tableau d'objets <a href="/fr/docs/Web/API/IntersectionObserverEntry"><code>IntersectionObserverEntry</code></a>, un pour chaque élément ciblé qui a subi un changement d'intersection depuis la dernière vérification des intersections, soit explicitement par un appel à cette méthode, soit implicitement par un appel automatique à la fonction de rappel de l'observateur.</p>
+La méthode **`takeRecords()`** de l'interface [`IntersectionObserver`](/fr/docs/Web/API/IntersectionObserver) renvoie un tableau d'objets [`IntersectionObserverEntry`](/fr/docs/Web/API/IntersectionObserverEntry), un pour chaque élément ciblé qui a subi un changement d'intersection depuis la dernière vérification des intersections, soit explicitement par un appel à cette méthode, soit implicitement par un appel automatique à la fonction de rappel de l'observateur.
 
-<div class="note">
-  <p><strong>Note :</strong> Si vous utilisez la fonction de rappel pour surveiller ces changements, vous n'avez pas besoin d'appeler cette méthode. L'appel de cette méthode efface la liste des intersections en attente, de sorte que la fonction de rappel ne sera pas exécutée.</p>
-</div>
+> **Note :** Si vous utilisez la fonction de rappel pour surveiller ces changements, vous n'avez pas besoin d'appeler cette méthode. L'appel de cette méthode efface la liste des intersections en attente, de sorte que la fonction de rappel ne sera pas exécutée.
 
-<h2 id="syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var>intersectionObserverEntries</var> = <var>intersectionObserver</var>.takeRecords();</pre>
+    intersectionObserverEntries = intersectionObserver.takeRecords();
 
-<h3 id="parameters">Paramètres</h3>
+### Paramètres
 
-<p>Aucun.</p>
+Aucun.
 
-<h3 id="return_value">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Un tableau d'objets <a href="/fr/docs/Web/API/IntersectionObserverEntry"><code>IntersectionObserverEntry</code></a>, un pour chaque élément cible dont l'intersection avec la racine a changé depuis la dernière vérification des intersections.</p>
+Un tableau d'objets [`IntersectionObserverEntry`](/fr/docs/Web/API/IntersectionObserverEntry), un pour chaque élément cible dont l'intersection avec la racine a changé depuis la dernière vérification des intersections.
 
-<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('IntersectionObserver','#dom-intersectionobserver-takerecords','IntersectionObserver.takeRecords()')}}
-      </td>
-      <td>{{Spec2('IntersectionObserver')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                                                                            | Statut                                       | Commentaire          |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------- |
+| {{SpecName('IntersectionObserver','#dom-intersectionobserver-takerecords','IntersectionObserver.takeRecords()')}} | {{Spec2('IntersectionObserver')}} | Définition initiale. |
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.IntersectionObserver.takeRecords")}}</p>
+{{Compat("api.IntersectionObserver.takeRecords")}}
 
-<h2 id="see_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li><a href="/en-US/docs/Web/API/Intersection_Observer_API">L'API <i>Intersection Observer</i></a></li>
-</ul>
+- [L'API _Intersection Observer_](/en-US/docs/Web/API/Intersection_Observer_API)
diff --git a/files/fr/web/api/intersectionobserver/thresholds/index.md b/files/fr/web/api/intersectionobserver/thresholds/index.md
index 1ecebadf18..295a53060c 100644
--- a/files/fr/web/api/intersectionobserver/thresholds/index.md
+++ b/files/fr/web/api/intersectionobserver/thresholds/index.md
@@ -12,45 +12,30 @@ tags:
   - Reference
 translation_of: Web/API/IntersectionObserver/thresholds
 ---
-<div>{{APIRef("Intersection Observer API")}}</div>
+{{APIRef("Intersection Observer API")}}
 
-<p>La propriété en lecture seule <strong><code>thresholds</code></strong> de l'interface <a href="/fr/docs/Web/API/IntersectionObserver"><code>IntersectionObserver</code></a> retourne la liste des seuils d'intersection spécifiés lors de l'instanciation avec <a href="/fr/docs/Web/API/IntersectionObserver/IntersectionObserver"><code>IntersectionObserver()</code></a>. Si un seul seuil a été fourni lors de l'instanciation de l'objet, cette propriété sera un tableau contenant cette unique valeur numérique.</p>
+La propriété en lecture seule **`thresholds`** de l'interface [`IntersectionObserver`](/fr/docs/Web/API/IntersectionObserver) retourne la liste des seuils d'intersection spécifiés lors de l'instanciation avec [`IntersectionObserver()`](/fr/docs/Web/API/IntersectionObserver/IntersectionObserver). Si un seul seuil a été fourni lors de l'instanciation de l'objet, cette propriété sera un tableau contenant cette unique valeur numérique.
 
-<p>Voir <a href="/fr/docs/Web/API/Intersection_Observer_API#Thresholds">la section sur les seuils</a> pour apprendre comment fonctionnent les seuils d'intersection.</p>
+Voir [la section sur les seuils](/fr/docs/Web/API/Intersection_Observer_API#Thresholds) pour apprendre comment fonctionnent les seuils d'intersection.
 
-<h2 id="syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var>thresholds</var> = IntersectionObserver.thresholds;</pre>
+    thresholds = IntersectionObserver.thresholds;
 
-<h3 id="value">Valeur</h3>
+### Valeur
 
-<p>Un tableau de seuils d'intersection, spécifiés lors de l'instanciation via <code>options.threshold</code>. Si un seul seuil a été fourni, sans être donné dans un tableau (avec une valeur numérique « brute » donc), la valeur de la propriété sera un tableau contenant cette unique valeur. Quel qu'ait été l'ordre du tableau fourni à l'origine, celui fournit par <code>thresholds</code> sera trié par ordre croissant.</p>
+Un tableau de seuils d'intersection, spécifiés lors de l'instanciation via `options.threshold`. Si un seul seuil a été fourni, sans être donné dans un tableau (avec une valeur numérique « brute » donc), la valeur de la propriété sera un tableau contenant cette unique valeur. Quel qu'ait été l'ordre du tableau fourni à l'origine, celui fournit par `thresholds` sera trié par ordre croissant.
 
-<p>Si aucune option <code>threshold</code> n'est fournie lors de l'instanciation avec <code>IntersectionObserver()</code>, la valeur par défaut de <code>thresholds</code> est définie à <code>[0]</code>.</p>
+Si aucune option `threshold` n'est fournie lors de l'instanciation avec `IntersectionObserver()`, la valeur par défaut de `thresholds` est définie à `[0]`.
 
-<div class="warning">
-  <p><strong>Attention :</strong> Bien que l'objet d'<code>options</code> qu'on peut spécifier à la création d'un <a href="/fr/docs/Web/API/IntersectionObserver"><code>IntersectionObserver</code></a> possède une propriété champ nommée <a href="/fr/docs/Web/API/IntersectionObserver/IntersectionObserver"><code>threshold</code></a>, cette propriété-ci s'appelle <code>thresholds</code> (avec un « s » supplémentaire donc). <em>Cela peut porter à confusion</em>. Si vous utilisez <code>thresholds</code> par erreur comme nom pour la propriété de l'objet <code>options</code>, le tableau porté par <code>thresholds</code> va se retrouver égal à <code>[0.0]</code>, ce qui n'est probablement pas ce à quoi vous vous attendiez. Le déboguage n'en sera que plus chaotique.</p>
-</div>
+> **Attention :** Bien que l'objet d'`options` qu'on peut spécifier à la création d'un [`IntersectionObserver`](/fr/docs/Web/API/IntersectionObserver) possède une propriété champ nommée [`threshold`](/fr/docs/Web/API/IntersectionObserver/IntersectionObserver), cette propriété-ci s'appelle `thresholds` (avec un « s » supplémentaire donc). _Cela peut porter à confusion_. Si vous utilisez `thresholds` par erreur comme nom pour la propriété de l'objet `options`, le tableau porté par `thresholds` va se retrouver égal à `[0.0]`, ce qui n'est probablement pas ce à quoi vous vous attendiez. Le déboguage n'en sera que plus chaotique.
 
-<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('IntersectionObserver', '#dom-intersectionobserver-thresholds', 'IntersectionObserver.thresholds')}}</td>
-      <td>{{Spec2('IntersectionObserver')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                                                                        | Statut                                       | Commentaire          |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------- |
+| {{SpecName('IntersectionObserver', '#dom-intersectionobserver-thresholds', 'IntersectionObserver.thresholds')}} | {{Spec2('IntersectionObserver')}} | Définition initiale. |
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.IntersectionObserver.thresholds")}}</p>
+{{Compat("api.IntersectionObserver.thresholds")}}
diff --git a/files/fr/web/api/intersectionobserver/unobserve/index.md b/files/fr/web/api/intersectionobserver/unobserve/index.md
index c307d129e3..1437a9de7b 100644
--- a/files/fr/web/api/intersectionobserver/unobserve/index.md
+++ b/files/fr/web/api/intersectionobserver/unobserve/index.md
@@ -11,62 +11,47 @@ tags:
   - unobserve
 translation_of: Web/API/IntersectionObserver/unobserve
 ---
-<div>{{APIRef("Intersection Observer API")}}</div>
+{{APIRef("Intersection Observer API")}}
 
-<p>La méthode <code><strong>unobserve()</strong></code> de l'interface <a href="/fr/docs/Web/API/IntersectionObserver"><code>IntersectionObserver</code></a> indique à l'objet <code>IntersectionObserver</code> courant de cesser d'observer l'élément cible spécifié.</p>
+La méthode **`unobserve()`** de l'interface [`IntersectionObserver`](/fr/docs/Web/API/IntersectionObserver) indique à l'objet `IntersectionObserver` courant de cesser d'observer l'élément cible spécifié.
 
-<h2 id="syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var>IntersectionObserver</var>.unobserve(<var>target</var>);</pre>
+    IntersectionObserver.unobserve(target);
 
-<h3 id="parameters">Paramètres</h3>
+### Paramètres
 
-<dl>
-  <dt><code>target</code></dt>
-  <dd>L'<a href="/fr/docs/Web/API/Element"><code>élément</code></a> à cesser d'observer. Si l'élément spécifié n'est pas en cours d'observation, cette méthode ne fait rien et ne lève pas d'exception.</dd>
-</dl>
+- `target`
+  - : L'[`élément`](/fr/docs/Web/API/Element) à cesser d'observer. Si l'élément spécifié n'est pas en cours d'observation, cette méthode ne fait rien et ne lève pas d'exception.
 
-<h3 id="return_value">Valeur de retour</h3>
+### Valeur de retour
 
-<p><code>undefined</code>.</p>
+`undefined`.
 
-<h2 id="example">Exemple</h2>
+## Exemple
 
-<p>Ce fragment de code illustre la création d'un observateur, l'ajout d'un élément sous observation puis l'arrêt de cette d'observation.</p>
+Ce fragment de code illustre la création d'un observateur, l'ajout d'un élément sous observation puis l'arrêt de cette d'observation.
 
-<pre class="brush: js">let observer = new IntersectionObserver(callback);
+```js
+let observer = new IntersectionObserver(callback);
 observer.observe(document.getElementById("elementAObserver"));
 
 /* ... */
 
-observer.unobserve(document.getElementById("elementAObserver"));</pre>
-
-<h2 id="specifications">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('IntersectionObserver','#dom-intersectionobserver-unobserve','IntersectionObserver.unobserve()')}}</td>
-      <td>{{Spec2('IntersectionObserver')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
-
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.IntersectionObserver.unobserve")}}</p>
-
-<h2 id="see_also">Voir aussi</h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/API/Intersection_Observer_API">L'API <i>Intersection Observer</i></a></li>
-  <li><a href="/fr/docs/Web/API/IntersectionObserver/observe"><code>IntersectionObserver.observe()</code></a></li>
-</ul>
+observer.unobserve(document.getElementById("elementAObserver"));
+```
+
+## Spécifications
+
+| Spécification                                                                                                                                    | Statut                                       | Commentaire          |
+| ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------- | -------------------- |
+| {{SpecName('IntersectionObserver','#dom-intersectionobserver-unobserve','IntersectionObserver.unobserve()')}} | {{Spec2('IntersectionObserver')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.IntersectionObserver.unobserve")}}
+
+## Voir aussi
+
+- [L'API _Intersection Observer_](/fr/docs/Web/API/Intersection_Observer_API)
+- [`IntersectionObserver.observe()`](/fr/docs/Web/API/IntersectionObserver/observe)
diff --git a/files/fr/web/api/intersectionobserverentry/index.md b/files/fr/web/api/intersectionobserverentry/index.md
index 9b5b7a250e..cb495920d8 100644
--- a/files/fr/web/api/intersectionobserverentry/index.md
+++ b/files/fr/web/api/intersectionobserverentry/index.md
@@ -9,52 +9,39 @@ tags:
   - IntersectionObserverEntry
 translation_of: Web/API/IntersectionObserverEntry
 ---
-<div>{{SeeCompatTable}}{{APIRef("Intersection Observer API")}}</div>
-
-<p>L'interface <code><strong>IntersectionObserverEntry</strong></code> de l'<a href="/en-US/docs/Web/API/Intersection_Observer_API">API Intersection Observer</a> décrit l'intersection entre l'élément cible et son conteneur (appelé racine) à un moment spécifique de transition.</p>
-
-<p> Les instances de <code>IntersectionObserverEntry</code> sont délivrées à une fonction de rappel de l'{{domxref("IntersectionObserver")}} en tant que paramètres <code>entries</code> ; autrement, ces objets ne peuvent être obtenus qu'en appelant {{domxref("IntersectionObserver.takeRecords()")}}.</p>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<dl>
- <dt>{{domxref("IntersectionObserverEntry.boundingClientRect")}} {{readonlyinline}}</dt>
- <dd>Retourne les limites de la zone couverte par l'élément cible comme {{domxref("DOMRectReadOnly")}}. Ces limites sont calculées comme décrit dans la documentation pour {{domxref("Element.getBoundingClientRect()")}}.</dd>
- <dt>{{domxref("IntersectionObserverEntry.intersectionRatio")}} {{readonlyinline}}</dt>
- <dd>Retourne le ratio de l'<code>intersectionRect</code> au <code>boundingClientRect</code>.</dd>
- <dt>{{domxref("IntersectionObserverEntry.intersectionRect")}} {{readonlyinline}}</dt>
- <dd>Retourne un {{domxref("DOMRectReadOnly")}} représentant la partie visible de l'élément cible.</dd>
- <dt>{{domxref("IntersectionObserverEntry.isIntersecting")}} {{ReadOnlyInline}}</dt>
- <dd>Retourne une valeur booléenne valant <code>true</code> si l'élément cible s'entrecoupe avec la zone d'intersection de l'élément racine. S'il vaut <code>true</code>, alors <code>IntersectionObserverEntry</code> décrit une transition vers un état d'intersection ;  S'il vaut <code>false</code>, alors la transition se fait d'un état d'intersection à un état de non-intersection.</dd>
- <dt>{{domxref("IntersectionObserverEntry.rootBounds")}} {{readonlyinline}}</dt>
- <dd>Retourne un {{domxref("DOMRectReadOnly")}} pour la zone d'intersection de l'élément racine.</dd>
- <dt>{{domxref("IntersectionObserverEntry.target")}} {{ReadOnlyInline}}</dt>
- <dd>L'{{domxref("Element")}} dont l'intersection avec la racine a changé d'état.</dd>
- <dt>{{domxref("IntersectionObserverEntry.time")}} {{readonlyinline}}</dt>
- <dd>Un {{domxref("DOMHighResTimeStamp")}} indiquant l'instant auquel l'intersection a été enregistrée, relative au <a href="/en-US/docs/Web/API/DOMHighResTimeStamp#The_time_origin">temps originel</a> de l'<code>IntersectionObserver</code>.</dd>
-</dl>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<p><em>Cette interface n'a pas de méthode.</em></p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('IntersectionObserver','#intersection-observer-entry','IntersectionObserverEntry')}}</td>
-   <td>{{Spec2('IntersectionObserver')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.IntersectionObserverEntry")}}</p>
+{{SeeCompatTable}}{{APIRef("Intersection Observer API")}}
+
+L'interface **`IntersectionObserverEntry`** de l'[API Intersection Observer](/en-US/docs/Web/API/Intersection_Observer_API) décrit l'intersection entre l'élément cible et son conteneur (appelé racine) à un moment spécifique de transition.
+
+Les instances de `IntersectionObserverEntry` sont délivrées à une fonction de rappel de l'{{domxref("IntersectionObserver")}} en tant que paramètres `entries` ; autrement, ces objets ne peuvent être obtenus qu'en appelant {{domxref("IntersectionObserver.takeRecords()")}}.
+
+## Propriétés
+
+- {{domxref("IntersectionObserverEntry.boundingClientRect")}} {{readonlyinline}}
+  - : Retourne les limites de la zone couverte par l'élément cible comme {{domxref("DOMRectReadOnly")}}. Ces limites sont calculées comme décrit dans la documentation pour {{domxref("Element.getBoundingClientRect()")}}.
+- {{domxref("IntersectionObserverEntry.intersectionRatio")}} {{readonlyinline}}
+  - : Retourne le ratio de l'`intersectionRect` au `boundingClientRect`.
+- {{domxref("IntersectionObserverEntry.intersectionRect")}} {{readonlyinline}}
+  - : Retourne un {{domxref("DOMRectReadOnly")}} représentant la partie visible de l'élément cible.
+- {{domxref("IntersectionObserverEntry.isIntersecting")}} {{ReadOnlyInline}}
+  - : Retourne une valeur booléenne valant `true` si l'élément cible s'entrecoupe avec la zone d'intersection de l'élément racine. S'il vaut `true`, alors `IntersectionObserverEntry` décrit une transition vers un état d'intersection ;  S'il vaut `false`, alors la transition se fait d'un état d'intersection à un état de non-intersection.
+- {{domxref("IntersectionObserverEntry.rootBounds")}} {{readonlyinline}}
+  - : Retourne un {{domxref("DOMRectReadOnly")}} pour la zone d'intersection de l'élément racine.
+- {{domxref("IntersectionObserverEntry.target")}} {{ReadOnlyInline}}
+  - : L'{{domxref("Element")}} dont l'intersection avec la racine a changé d'état.
+- {{domxref("IntersectionObserverEntry.time")}} {{readonlyinline}}
+  - : Un {{domxref("DOMHighResTimeStamp")}} indiquant l'instant auquel l'intersection a été enregistrée, relative au [temps originel](/en-US/docs/Web/API/DOMHighResTimeStamp#The_time_origin) de l'`IntersectionObserver`.
+
+## Méthodes
+
+_Cette interface n'a pas de méthode._
+
+## Spécifications
+
+| Spécification                                                                                                                    | Statut                                       | Commentaire         |
+| -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | ------------------- |
+| {{SpecName('IntersectionObserver','#intersection-observer-entry','IntersectionObserverEntry')}} | {{Spec2('IntersectionObserver')}} | Définition initiale |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.IntersectionObserverEntry")}}
diff --git a/files/fr/web/api/intersectionobserverentry/target/index.md b/files/fr/web/api/intersectionobserverentry/target/index.md
index 7ac31d8a3c..028dfae968 100644
--- a/files/fr/web/api/intersectionobserverentry/target/index.md
+++ b/files/fr/web/api/intersectionobserverentry/target/index.md
@@ -9,50 +9,40 @@ tags:
   - target
 translation_of: Web/API/IntersectionObserverEntry/target
 ---
-<div>{{APIRef("Intersection Observer API")}}{{SeeCompatTable}}</div>
+{{APIRef("Intersection Observer API")}}{{SeeCompatTable}}
 
-<p>La propriété en lecture seule <strong><code>target</code></strong> de l'interface {{domxref("IntersectionObserverEntry")}} indique quel {{domxref("Element")}} ciblé a changé sa proportion d'intersection avec l'élément racine.</p>
+La propriété en lecture seule **`target`** de l'interface {{domxref("IntersectionObserverEntry")}} indique quel {{domxref("Element")}} ciblé a changé sa proportion d'intersection avec l'élément racine.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var><code>var <em>target</em> = </code>IntersectionObserverEntry</var>.target;
-</pre>
+    var target = IntersectionObserverEntry.target;
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>La propriété <code>target</code> de l'<code>IntersectionObserverEntry</code> spécifie quel {{domxref("Element")}} précédemment ciblé par l'appel à {{domxref("IntersectionObserver.observe()")}} dont l'intersection avec la racine a changé.</p>
+La propriété `target` de l'`IntersectionObserverEntry` spécifie quel {{domxref("Element")}} précédemment ciblé par l'appel à {{domxref("IntersectionObserver.observe()")}} dont l'intersection avec la racine a changé.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Dans cet exemple, la valeur de la propriété CSS {{cssxref("opacity")}} de chaque élément cible vaut son {{domxref("IntersectionObserverEntry.intersectionRatio", "intersectionRatio")}}.</p>
+Dans cet exemple, la valeur de la propriété CSS {{cssxref("opacity")}} de chaque élément cible vaut son {{domxref("IntersectionObserverEntry.intersectionRatio", "intersectionRatio")}}.
 
-<pre class="brush: js">function intersectionCallback(entries) {
+```js
+function intersectionCallback(entries) {
   entries.forEach(function(entry) {
     entry.target.opacity = entry.intersectionRatio;
   });
-}</pre>
+}
+```
 
-<p>Ainsi, l'élément devient visible seulement lorsqu'il est entièrement visible, c'est-à-dire que la zone qu'il couvre est contenue dans celle de la racine. Autrement, son opacité diminue graduellement avec sa proportion d'intersection avec son élément racine.</p>
+Ainsi, l'élément devient visible seulement lorsqu'il est entièrement visible, c'est-à-dire que la zone qu'il couvre est contenue dans celle de la racine. Autrement, son opacité diminue graduellement avec sa proportion d'intersection avec son élément racine.
 
-<p>Pour voir un exemple plus concret, vous pouvez vous renseigner sur l'{{SectionOnPage("/en-US/docs/Web/API/Intersection_Observer_API/Timing_element_visibility", "Handling intersection changes")}}.</p>
+Pour voir un exemple plus concret, vous pouvez vous renseigner sur l'{{SectionOnPage("/en-US/docs/Web/API/Intersection_Observer_API/Timing_element_visibility", "Handling intersection changes")}}.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('IntersectionObserver', '#dom-intersectionobserverentry-target', 'IntersectionObserverEntry.target')}}</td>
-   <td>{{Spec2('IntersectionObserver')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                                            | Statut                                       | Commentaire         |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | ------------------- |
+| {{SpecName('IntersectionObserver', '#dom-intersectionobserverentry-target', 'IntersectionObserverEntry.target')}} | {{Spec2('IntersectionObserver')}} | Définition initiale |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.IntersectionObserverEntry.target")}}</p>
+{{Compat("api.IntersectionObserverEntry.target")}}
diff --git a/files/fr/web/api/issecurecontext/index.md b/files/fr/web/api/issecurecontext/index.md
index be1a06cc17..91c1fa1ae2 100644
--- a/files/fr/web/api/issecurecontext/index.md
+++ b/files/fr/web/api/issecurecontext/index.md
@@ -4,44 +4,28 @@ slug: Web/API/isSecureContext
 translation_of: Web/API/WindowOrWorkerGlobalScope/isSecureContext
 original_slug: Web/API/WindowOrWorkerGlobalScope/isSecureContext
 ---
-<p>{{APIRef()}}{{SeeCompatTable}}</p>
+{{APIRef()}}{{SeeCompatTable}}
 
-<p>La propriété <code><strong>isSecureContext</strong></code> de l'interface {{domxref("WindowOrWorkerGlobalScope")}} retourne un booleen indiquant si le contexte actuel est sécurisé (<code>true</code>) ou pas (<code>false</code>).</p>
+La propriété **`isSecureContext`** de l'interface {{domxref("WindowOrWorkerGlobalScope")}} retourne un booleen indiquant si le contexte actuel est sécurisé (`true`) ou pas (`false`).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var <em>isItSecure</em> = self.isSecureContext; // ou simplement isSecureContext
-</pre>
+    var isItSecure = self.isSecureContext; // ou simplement isSecureContext
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>Un {{domxref("Boolean")}}.</p>
+Un {{domxref("Boolean")}}.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécifications</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Secure Contexts', '#dom-windoworworkerglobalscope-issecurecontext', 'WindowOrWorkerGlobalScope.isSecureContext')}}</td>
-   <td>{{Spec2('Secure Contexts')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécifications                                                                                                                                                           | Statut                               | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- |
+| {{SpecName('Secure Contexts', '#dom-windoworworkerglobalscope-issecurecontext', 'WindowOrWorkerGlobalScope.isSecureContext')}} | {{Spec2('Secure Contexts')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
+{{Compat("api.WindowOrWorkerGlobalScope.isSecureContext")}}
 
+## Voir aussi
 
-<p>{{Compat("api.WindowOrWorkerGlobalScope.isSecureContext")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/Security/Secure_Contexts">Secure contexts</a></li>
-</ul>
+- [Secure contexts](/en-US/docs/Web/Security/Secure_Contexts)
diff --git a/files/fr/web/api/keyboardevent/charcode/index.md b/files/fr/web/api/keyboardevent/charcode/index.md
index b9a1ef84b0..cb835f805e 100644
--- a/files/fr/web/api/keyboardevent/charcode/index.md
+++ b/files/fr/web/api/keyboardevent/charcode/index.md
@@ -11,32 +11,28 @@ tags:
   - évènements
 translation_of: Web/API/KeyboardEvent/charCode
 ---
-<p>{{ ApiRef("DOM Events") }}{{non-standard_header}}{{deprecated_header}}</p>
+{{ ApiRef("DOM Events") }}{{non-standard_header}}{{deprecated_header}}
 
-<p>La propriété en lecture seule {{domxref("KeyboardEvent.charCode")}} retourne la valeur Unicode d'une touche caractère pressée pendant un évènement {{ domxref("element.onkeypress", "keypress") }}.</p>
+La propriété en lecture seule {{domxref("KeyboardEvent.charCode")}} retourne la valeur Unicode d'une touche caractère pressée pendant un évènement {{ domxref("element.onkeypress", "keypress") }}.
 
-<p>Pour des constantes équivalant ces codes numériques, voir {{ domxref("KeyboardEvent", "KeyEvent") }}.</p>
+Pour des constantes équivalant ces codes numériques, voir {{ domxref("KeyboardEvent", "KeyEvent") }}.
 
-<div class="note">
-<p><strong>Note :</strong> N'utilisez plus cette propriété, elle est dépréciée. Utilisez plutôt {{domxref("KeyboardEvent.key")}}.</p>
-</div>
+> **Note :** N'utilisez plus cette propriété, elle est dépréciée. Utilisez plutôt {{domxref("KeyboardEvent.key")}}.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>var value</em> = <em>event</em>.charCode;
-</pre>
+    var value = event.charCode;
 
-<ul>
- <li><em><code>value</code></em> est la valeur Unicode du caractère associé à la touche pressée.</li>
-</ul>
+- _`value`_ est la valeur Unicode du caractère associé à la touche pressée.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush: html">&lt;html&gt;
-  &lt;head&gt;
-    &lt;title&gt;Exemple charCode&lt;/title&gt;
+```html
+<html>
+  <head>
+    <title>Exemple charCode</title>
 
-    &lt;script type="text/javascript"&gt;
+    <script type="text/javascript">
 
       function AfficherCaractere(e)
       {
@@ -47,48 +43,35 @@ translation_of: Web/API/KeyboardEvent/charCode
         );
       }
 
-    &lt;/script&gt;
-  &lt;/head&gt;
+    </script>
+  </head>
 
-  &lt;body onkeypress="AfficherCaractere(event);"&gt;
-    &lt;p&gt;Tapez une touche caractère de votre clavier (a,b,c...)&lt;/p&gt;
-  &lt;/body&gt;
-&lt;/html&gt;
-</pre>
+  <body onkeypress="AfficherCaractere(event);">
+    <p>Tapez une touche caractère de votre clavier (a,b,c...)</p>
+  </body>
+</html>
+```
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p>Après un évènement {{ domxref("element.onkeypress", "keypress") }}, la valeur Unicode de la touche pressée est stockée dans l'une ou l'autre des propriétés <code>{{ domxref("event.keyCode", "keyCode") }}</code> et <code>charCode</code>, jamais les deux à la fois. Si la touche pressée génère un caractère (ex. 'a'), <code>charCode</code> prend la valeur du code de ce caractère, en respectant la casse. (i.e. <code>charCode</code> tient compte d'une touche Maj. enfoncée). Sinon, le code est stocké dans <code>keyCode</code>.</p>
+Après un évènement {{ domxref("element.onkeypress", "keypress") }}, la valeur Unicode de la touche pressée est stockée dans l'une ou l'autre des propriétés `{{ domxref("event.keyCode", "keyCode") }}` et `charCode`, jamais les deux à la fois. Si la touche pressée génère un caractère (ex. 'a'), `charCode` prend la valeur du code de ce caractère, en respectant la casse. (i.e. `charCode` tient compte d'une touche Maj. enfoncée). Sinon, le code est stocké dans `keyCode`.
 
-<p>Quand une ou plusieurs touche modificatrices sont pressées, il y a quelques règles complexes pour <code>charCode</code>, jetez un oeil à <a href="/en/Gecko_Keypress_Event">Gecko Keypress Event</a> (en anglais) pour le détail.</p>
+Quand une ou plusieurs touche modificatrices sont pressées, il y a quelques règles complexes pour `charCode`, jetez un oeil à [Gecko Keypress Event](/en/Gecko_Keypress_Event) (en anglais) pour le détail.
 
-<p><code>charCode</code> n'est jamais défini lors d'évènements {{ domxref("element.onkeydown", "keydown") }} et {{ domxref("element.onkeyup", "keyup") }}. Dans ces cas, <code>keyCode</code> is set instead.</p>
+`charCode` n'est jamais défini lors d'évènements {{ domxref("element.onkeydown", "keydown") }} et {{ domxref("element.onkeyup", "keyup") }}. Dans ces cas, `keyCode` is set instead.
 
-<p>Pour obtenir le code de la touche qu'il soit stocké dans <code>keyCode</code> ou <code>charCode</code>, requêtez la propriété {{ domxref("event.which", "which") }}.</p>
+Pour obtenir le code de la touche qu'il soit stocké dans `keyCode` ou `charCode`, requêtez la propriété {{ domxref("event.which", "which") }}.
 
-<p>Les caractères entrés via IME ne s'enregistrent pas sous <code>keyCode</code> ou <code>charCode</code>. Actually with the Chinese IME I'm using, entering the IME results in a keypress event with keyCode = 229 and no other key events fire until the IME exits (which may happen after multiple characters are inputted). I'm not sure if other IME's work this way.</p>
+Les caractères entrés via IME ne s'enregistrent pas sous `keyCode` ou `charCode`. Actually with the Chinese IME I'm using, entering the IME results in a keypress event with keyCode = 229 and no other key events fire until the IME exits (which may happen after multiple characters are inputted). I'm not sure if other IME's work this way.
 
-<p>Pour une liste de valeurs de <code>charCode</code> associées à leurs touches, lancez l'exemple dans <a href="/en/Gecko_DOM_Reference/Examples#Example_7:_Displaying_Event_Object_Constants">Gecko DOM Reference:Examples #Example 7: Displaying Event Object Constants</a> (en anglais) et regardez le tableau HTML résultant.</p>
+Pour une liste de valeurs de `charCode` associées à leurs touches, lancez l'exemple dans [Gecko DOM Reference:Examples #Example 7: Displaying Event Object Constants](/en/Gecko_DOM_Reference/Examples#Example_7:_Displaying_Event_Object_Constants) (en anglais) et regardez le tableau HTML résultant.
 
-<h2 id="Specifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification (en anglais)</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('DOM3 Events','#widl-KeyboardEvent-charCode','KeyboardEvent.charCode')}}</td>
-   <td>{{Spec2('DOM3 Events')}}</td>
-   <td>Définition initiale; Déprécié</td>
-  </tr>
- </tbody>
-</table>
+| Spécification (en anglais)                                                                                       | Statut                           | Commentaire                   |
+| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------------- |
+| {{SpecName('DOM3 Events','#widl-KeyboardEvent-charCode','KeyboardEvent.charCode')}} | {{Spec2('DOM3 Events')}} | Définition initiale; Déprécié |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.KeyboardEvent.charCode")}}</p>
\ No newline at end of file
+{{Compat("api.KeyboardEvent.charCode")}}
diff --git a/files/fr/web/api/keyboardevent/code/index.md b/files/fr/web/api/keyboardevent/code/index.md
index d9d70d3e19..a0a0e9c050 100644
--- a/files/fr/web/api/keyboardevent/code/index.md
+++ b/files/fr/web/api/keyboardevent/code/index.md
@@ -10,76 +10,83 @@ tags:
   - Reference
 translation_of: Web/API/KeyboardEvent/code
 ---
-<div>{{APIRef("DOM Events")}}</div>
+{{APIRef("DOM Events")}}
 
-<p>La propriété <strong><code>KeyboardEvent.code</code></strong> représente une touche physique du clavier (contrairement au caractère généré par celle-ci). En d'autres termes, cette propriété retourne une valeur qui n'est pas modifiée par la disposition du clavier ou l'état des touches de modification.</p>
+La propriété **`KeyboardEvent.code`** représente une touche physique du clavier (contrairement au caractère généré par celle-ci). En d'autres termes, cette propriété retourne une valeur qui n'est pas modifiée par la disposition du clavier ou l'état des touches de modification.
 
-<p>Si le clavier n'est pas physique, la valeur retournée sera définie par le navigateur pour être le plus proche possible des valeurs retournées par un clavier physique afin de maximiser la compatibilité entre un clavier physique et virtuel.</p>
+Si le clavier n'est pas physique, la valeur retournée sera définie par le navigateur pour être le plus proche possible des valeurs retournées par un clavier physique afin de maximiser la compatibilité entre un clavier physique et virtuel.
 
-<p>Cette propriété est utile quand vous souhaitez manipuler les clés en fonction de leur position physique sur le clavier et non les caractères associés au clés (par exemple pour les touches de déplacement d'un jeu vidéo). Attention toutefois, on ne pourra pas utiliser la valeur fournie par <code>KeyboardEvent.code</code> afin de déterminer le caractère utilisé sur le clavier.</p>
+Cette propriété est utile quand vous souhaitez manipuler les clés en fonction de leur position physique sur le clavier et non les caractères associés au clés (par exemple pour les touches de déplacement d'un jeu vidéo). Attention toutefois, on ne pourra pas utiliser la valeur fournie par `KeyboardEvent.code` afin de déterminer le caractère utilisé sur le clavier.
 
-<p>Par exemple, le <code>code</code> retourné est <code>"KeyQ"</code> pour le caractère "<kbd>q</kbd>" sur un clavier QWERTY, mais le même <code>code</code> représente le caractère "<kbd>'</kbd>"  sur un clavier Dvorak, et le caractère "<kbd>a</kbd>" sur un clavier AZERTY. Cela rend impossible l'utilisation du <code>code</code> pour déterminer le code d'une clé destiné aux utilisateurs s'ils n'utilisent pas une disposition de clavier anticipé.</p>
+Par exemple, le `code` retourné est `"KeyQ"` pour le caractère "<kbd>q</kbd>" sur un clavier QWERTY, mais le même `code` représente le caractère "<kbd>'</kbd>"  sur un clavier Dvorak, et le caractère "<kbd>a</kbd>" sur un clavier AZERTY. Cela rend impossible l'utilisation du `code` pour déterminer le code d'une clé destiné aux utilisateurs s'ils n'utilisent pas une disposition de clavier anticipé.
 
-<p>Pour déterminer quel caractère correspond à un <code>key event</code>, utilisez plutôt la propriété {{domxref("KeyboardEvent.key")}}.</p>
+Pour déterminer quel caractère correspond à un `key event`, utilisez plutôt la propriété {{domxref("KeyboardEvent.key")}}.
 
-<h2 id="Valeurs_des_codes">Valeurs des codes</h2>
+## Valeurs des codes
 
-<p>Les valeurs de code pour Windows, Linux et macOS figurent dans la liste de la <a href="/fr/docs/Web/API/KeyboardEvent/code/code_values">KeyboardEvent: code values</a>.</p>
+Les valeurs de code pour Windows, Linux et macOS figurent dans la liste de la [KeyboardEvent: code values](/fr/docs/Web/API/KeyboardEvent/code/code_values).
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Pratiquer_KeyboardEvent">Pratiquer <code>KeyboardEvent</code></h3>
+### Pratiquer `KeyboardEvent`
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;p&gt;
+```html
+<p>
    Appuyez sur une touche du clavier pour voir quelle valeur clé de
    KeyboardEvent correspond à chaque événement
-&lt;/p&gt;
-&lt;div id="output"&gt;
-&lt;/div&gt;
-</pre>
+</p>
+<div id="output">
+</div>
+```
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">#output {
+```css
+#output {
   font-family: Arial, Helvetica, sans-serif;
   border: 1px solid black;
-}</pre>
+}
+```
 
-<h4 id="JavaScript">JavaScript</h4>
+#### JavaScript
 
-<pre class="brush: js">window.addEventListener("keydown", function(event) {
+```js
+window.addEventListener("keydown", function(event) {
   let str = "KeyboardEvent: key='" + event.key + "' | code='" +
             event.code + "'";
   let el = document.createElement("span");
-  el.innerHTML = str + "&lt;br/&gt;";
+  el.innerHTML = str + "<br/>";
 
   document.getElementById("output").appendChild(el);
-}, true);</pre>
+}, true);
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>Pour essayer ce code, cliquez sur le lien ci-dessous:</p>
+Pour essayer ce code, cliquez sur le lien ci-dessous:
 
-<p>{{EmbedLiveSample('Pratiquer_KeyboardEvent', 600, 300) }}</p>
+{{EmbedLiveSample('Pratiquer_KeyboardEvent', 600, 300) }}
 
-<h3 id="Gérer_les_événements_de_clavier_dans_un_jeu">Gérer les événements de clavier dans un jeu</h3>
+### Gérer les événements de clavier dans un jeu
 
-<p>Cet exemple établit un écouteur d'événements pour l'événement {{event("keydown")}}  qui gère la saisie au clavier pour un jeu qui utilise la disposition de clavier typique "ZQSD" pour se déplacer en avant, à gauche, en arrière et à droite. Cela utilisera les quatre mêmes touches physiquement, quels que soient les caractères correspondants, par exemple si l'utilisateur utilise un clavier QWERTY.</p>
+Cet exemple établit un écouteur d'événements pour l'événement {{event("keydown")}}  qui gère la saisie au clavier pour un jeu qui utilise la disposition de clavier typique "ZQSD" pour se déplacer en avant, à gauche, en arrière et à droite. Cela utilisera les quatre mêmes touches physiquement, quels que soient les caractères correspondants, par exemple si l'utilisateur utilise un clavier QWERTY.
 
-<h4 id="HTML_2">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;p&gt;Appuyez sur les touches ZQSD (WASP sur QWERTY) pour bouger et pour vous diriger&lt;/p&gt;
-&lt;svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="world"&gt;
-  &lt;polygon id="spaceship" points="15,0 0,30 30,30"/&gt;
-&lt;/svg&gt;
-&lt;script&gt;refresh();&lt;/script&gt;
-</pre>
+```html
+<p>Appuyez sur les touches ZQSD (WASP sur QWERTY) pour bouger et pour vous diriger</p>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="world">
+  <polygon id="spaceship" points="15,0 0,30 30,30"/>
+</svg>
+<script>refresh();</script>
+```
 
-<h4 id="CSS_2">CSS</h4>
+#### CSS
 
-<pre class="brush: css">.world {
+```css
+.world {
   margin: 0px;
   padding: 0px;
   background-color: black;
@@ -91,13 +98,15 @@ translation_of: Web/API/KeyboardEvent/code
   fill: orange;
   stroke: red;
   stroke-width: 2px;
-}</pre>
+}
+```
 
-<h4 id="JavaScript_2">JavaScript</h4>
+#### JavaScript
 
-<p>La première section du code JavaScript établit certaines variables que nous allons utiliser. <code>shipSize</code> contient la taille du vaisseau dans lequel le joueur se déplace, pour plus de commodité. <code>position</code> est utilisé pour suivre la position du vaisseau sur le terrain de jeu. <code>moveRate</code> et <code>turnRate</code> sont le nombre de pixels en avant et en arrière chaque fois que vous appuyez sur une touche pour déplacer le vaisseau et le nombre de degrés de rotation que les commandes de direction gauche et droite appliquent à chaque frappe. <code>angle</code> est la quantité actuelle de rotation appliquée au vaisseau, en degrés; il commence à 0 ° (pointant tout droit). Enfin, <code>spaceship</code> est défini pour faire référence à l'élément portant l'ID "spaceship", qui est le polygone SVG représentant le vaisseau que le joueur contrôle.</p>
+La première section du code JavaScript établit certaines variables que nous allons utiliser. `shipSize` contient la taille du vaisseau dans lequel le joueur se déplace, pour plus de commodité. `position` est utilisé pour suivre la position du vaisseau sur le terrain de jeu. `moveRate` et `turnRate` sont le nombre de pixels en avant et en arrière chaque fois que vous appuyez sur une touche pour déplacer le vaisseau et le nombre de degrés de rotation que les commandes de direction gauche et droite appliquent à chaque frappe. `angle` est la quantité actuelle de rotation appliquée au vaisseau, en degrés; il commence à 0 ° (pointant tout droit). Enfin, `spaceship` est défini pour faire référence à l'élément portant l'ID "spaceship", qui est le polygone SVG représentant le vaisseau que le joueur contrôle.
 
-<pre class="brush: js">let shipSize = {
+```js
+let shipSize = {
   width: 30,
   height: 30
 };
@@ -113,43 +122,46 @@ let turnRate = 5;
 let angle = 0;
 
 let spaceship = document.getElementById("spaceship");
-</pre>
+```
 
-<p>Vient ensuite la fonction <code>updatePosition()</code>. Cette fonction prend en entrée la distance à laquelle le vaisseau doit être déplacé, où positif est un mouvement en avant et négatif est un mouvement en arrière. Cette fonction calcule la nouvelle position du vaisseau en fonction de la distance parcourue et de la direction actuelle du vaisseau. Il veille également à ce que le vaisseau franchisse les limites du terrain de jeu au lieu de disparaître.</p>
+Vient ensuite la fonction `updatePosition()`. Cette fonction prend en entrée la distance à laquelle le vaisseau doit être déplacé, où positif est un mouvement en avant et négatif est un mouvement en arrière. Cette fonction calcule la nouvelle position du vaisseau en fonction de la distance parcourue et de la direction actuelle du vaisseau. Il veille également à ce que le vaisseau franchisse les limites du terrain de jeu au lieu de disparaître.
 
-<pre class="brush: js">function updatePosition(offset) {
+```js
+function updatePosition(offset) {
   let rad = angle * (Math.PI/180);
   position.x += (Math.sin(rad) * offset);
   position.y -= (Math.cos(rad) * offset);
 
-  if (position.x &lt; 0) {
+  if (position.x < 0) {
     position.x = 399;
-  } else if (position.x &gt; 399) {
+  } else if (position.x > 399) {
     position.x = 0;
   }
 
-  if (position.y &lt; 0) {
+  if (position.y < 0) {
     position.y = 399;
-  } else if (position.y &gt; 399) {
+  } else if (position.y > 399) {
     position.y = 0;
   }
 }
-</pre>
+```
 
-<p>La fonction <code>refresh()</code> gère l'application de la rotation et de la position à l'aide d'un <a href="/en-US/docs/Web/SVG/Attribute/transform">SVG transform</a>.</p>
+La fonction `refresh()` gère l'application de la rotation et de la position à l'aide d'un [SVG transform](/en-US/docs/Web/SVG/Attribute/transform).
 
-<pre class="brush: js">function refresh() {
+```js
+function refresh() {
   let x = position.x - (shipSize.width/2);
   let y = position.y - (shipSize.height/2);
   let transform = "translate(" + x + " " + y + ") rotate(" + angle + " 15 15) ";
 
   spaceship.setAttribute("transform", transform);
 }
-</pre>
+```
 
-<p>Enfin, la méthode <code>addEventListener()</code> est utilisée pour commencer à écouter les événements {{event ("keydown")}}, en mettant à jour chaque touche en mettant à jour la position et l’angle de rotation du vaisseau, puis en appelant la méthode <code>refresh()</code> pour tracer le navire dans sa nouvelle position et son nouvel angle.</p>
+Enfin, la méthode `addEventListener()` est utilisée pour commencer à écouter les événements {{event ("keydown")}}, en mettant à jour chaque touche en mettant à jour la position et l’angle de rotation du vaisseau, puis en appelant la méthode `refresh()` pour tracer le navire dans sa nouvelle position et son nouvel angle.
 
-<pre class="brush: js">window.addEventListener("keydown", function(event) {
+```js
+window.addEventListener("keydown", function(event) {
   if (event.preventDefaulted) {
     return; // Do nothing if event already handled
   }
@@ -181,33 +193,23 @@ let spaceship = document.getElementById("spaceship");
 
   // Consume the event so it doesn't get handled twice
   event.preventDefault();
-}, true);</pre>
+}, true);
+```
 
-<h4 id="Résultat_2">Résultat</h4>
+#### Résultat
 
-<p>Pour essayer le code ci-dessus, cliquez sur le bouton ci-dessous:</p>
+Pour essayer le code ci-dessus, cliquez sur le bouton ci-dessous:
 
-<p>{{EmbedLiveSample("Handle_keyboard_events_in_a_game", 420, 460)}}</p>
+{{EmbedLiveSample("Handle_keyboard_events_in_a_game", 420, 460)}}
 
-<p>Ce code peut être amélioré de plusieurs manières. La plupart des jeux réels surveillent les événements {{event("keydown")}}, démarrent le mouvement lorsque cela se produit et stoppent le mouvement lorsque l'événement {{event("keyup")}} se produit, au lieu de compter sur des répétitions de touches. Cela permettrait des mouvements plus fluides et plus rapides, mais permettrait également au joueur de bouger et de diriger en même temps. Des transitions ou des animations peuvent également être utilisées pour rendre le mouvement du navire plus fluide. Pour permettre cela, il ne faudrait pas utiliser de <code>switch</code>, ni de <code>else if</code>.ff</p>
+Ce code peut être amélioré de plusieurs manières. La plupart des jeux réels surveillent les événements {{event("keydown")}}, démarrent le mouvement lorsque cela se produit et stoppent le mouvement lorsque l'événement {{event("keyup")}} se produit, au lieu de compter sur des répétitions de touches. Cela permettrait des mouvements plus fluides et plus rapides, mais permettrait également au joueur de bouger et de diriger en même temps. Des transitions ou des animations peuvent également être utilisées pour rendre le mouvement du navire plus fluide. Pour permettre cela, il ne faudrait pas utiliser de `switch`, ni de `else if`.ff
 
-<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('UI Events', '#dom-keyboardevent-code', 'KeyboardEvent.code')}}</td>
-   <td>{{Spec2('UI Events')}}</td>
-   <td>Définition initiale, inclut les <a href="https://w3c.github.io/uievents-code/">valeurs de code</a>.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                        | État                         | Commentaires                                                                             |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------- | ---------------------------------------------------------------------------------------- |
+| {{SpecName('UI Events', '#dom-keyboardevent-code', 'KeyboardEvent.code')}} | {{Spec2('UI Events')}} | Définition initiale, inclut les [valeurs de code](https://w3c.github.io/uievents-code/). |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.KeyboardEvent.code")}}</p>
+{{Compat("api.KeyboardEvent.code")}}
diff --git a/files/fr/web/api/keyboardevent/index.md b/files/fr/web/api/keyboardevent/index.md
index 24967d7f68..23eeae15dd 100644
--- a/files/fr/web/api/keyboardevent/index.md
+++ b/files/fr/web/api/keyboardevent/index.md
@@ -10,170 +10,213 @@ tags:
   - évènements
 translation_of: Web/API/KeyboardEvent
 ---
-<div>{{APIRef("DOM Events")}}</div>
-
-<p>Les objets <strong><code>KeyboardEvent</code></strong> décrivent l'interaction d'un utilisateur avec le clavier. Chaque événement décrit une touche ; le type d'événement (<code>keydown</code>, <code>keypress</code>, ou <code>keyup</code>) identifie quel type d'activité a été effectué.</p>
-
-<div class="note">
-  <p><strong>Note :</strong> <code>KeyboardEvent</code> indique exactement ce qui est en train de se passer sur une touche. Lorsque vous devez gérer une saisie de texte, utilisez l'événement <code>input</code> HTML5 à la place. Par exemple, si un utilisateur saisit du texte à partir d'un système d'écriture à la main comme une tablette PC, les événements touche peuvent ne pas être déclenchés.</p>
-</div>
-
-<h2 id="Constructeur">Constructeur</h2>
-
-<dl>
- <dt>{{domxref("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}</dt>
- <dd>Crée un objet <code>KeyboardEvent</code>.</dd>
-</dl>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<p><em>Cette interface hérite également des méthodes de ses parents, {{domxref("UIEvent")}} et {{domxref("Event")}}.</em></p>
-
-<dl>
- <dt>{{domxref("KeyboardEvent.getModifierState()")}}</dt>
- <dd>Retourne un {{jsxref("Boolean")}} indiquant si une touche modifcatrice, telle que <kbd>Alt</kbd>, <kbd>Shift</kbd>, <kbd>Ctrl</kbd>, ou <kbd>Meta</kbd>, était pressée quand l'évènement a été créé.</dd>
- <dt>{{domxref("KeyboardEvent.initKeyEvent()")}}{{deprecated_inline}}</dt>
- <dd>Initialise un objet <code>KeyboardEvent</code>. Ceci a été implémenté seulement par Gecko (d'autres utilisaient {{domxref ("KeyboardEvent.initKeyboardEvent()")}}) et ne devrait plus être utilisé. La manière moderne standard consiste à utiliser le constructeur {{domxref ("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}.</dd>
- <dt>{{domxref("KeyboardEvent.initKeyboardEvent()")}}{{deprecated_inline}}</dt>
- <dd>Initialise un objet <code>KeyboardEvent</code>. Cela n'a jamais été implémenté par Gecko (qui utilisait {{domxref ("KeyboardEvent.initKeyEvent()")}}) et ne devrait plus être utilisé. La manière moderne standard consiste à utiliser le constructeur {{domxref ("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}.</dd>
-</dl>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<p><em>Cette interface hérite également des propriétés de ses parents, {{domxref("UIEvent")}} et {{domxref("Event")}}.</em></p>
-
-<dl>
- <dt>{{domxref("KeyboardEvent.altKey")}} {{Readonlyinline}}</dt>
- <dd>Returne un {{jsxref("Boolean")}} qui est <code>true</code> si la touche <kbd>Alt</kbd> (<kbd>Option</kbd> ou <kbd>⌥</kbd> sous OS X) était active quand l'évènement touche a été généré.</dd>
- <dt>{{domxref("KeyboardEvent.char")}} {{Non-standard_inline}}{{Deprecated_inline}}{{Readonlyinline}}</dt>
- <dd><p>Renvoie une {{domxref("DOMString")}} représentant la valeur de caractère de la touche. Si la touche correspond à un caractère imprimable, cette valeur est une chaîne Unicode non vide contenant ce caractère. Si la touche n'a pas de représentation imprimable, il s'agit d'une chaîne vide.</p>
- <div class="note">
- <p><strong>Note :</strong> si la touche est utilisée comme une macro insérant plusieurs caractères, la valeur de cet attribut est la chaîne entière, pas seulement le premier caractère.</p>
- </div>
- <div class="warning">
- <p><strong>Attention :</strong> cela a été supprimé des DOM Level 3 Events. C'est pris en charge uniquement sur IE9 + et Microsoft Edge.</p>
- </div>
- </dd>
- <dt>{{domxref("KeyboardEvent.charCode")}} {{Deprecated_inline}}{{Readonlyinline}}</dt>
- <dd><p>Retourne un {{jsxref ("Number")}} représentant le numéro de référence Unicode de la touche ; cet attribut est utilisé uniquement par l'événement <code>keypress</code>. Pour les touches dont l'attribut <code>char</code> contient plusieurs caractères, il s'agit de la valeur Unicode du premier caractère de cet attribut. Dans Firefox 26, cela retourne des codes pour les caractères imprimables.</p>
- <div class="warning">
- <p><strong>Attention :</strong> cet attribut est obsolète : vous devriez utiliser {{domxref("KeyboardEvent.key")}} à la place, si disponible.</p>
- </div>
- </dd>
- <dt>{{domxref("KeyboardEvent.code")}} {{Readonlyinline}}</dt>
- <dd>Retourne une {{domxref ("DOMString")}} avec la valeur du code de la touche représentée par l'événement.</dd>
- <dt>{{domxref("KeyboardEvent.ctrlKey")}} {{Readonlyinline}}</dt>
- <dd>Retourne un {{jsxref ("Boolean")}} qui est <code>true</code> si la touche <kbd>Ctrl</kbd> était active lorsque l'événement touche a été généré.</dd>
- <dt>{{domxref("KeyboardEvent.isComposing")}} {{Readonlyinline}}</dt>
- <dd>Renvoie un {{jsxref ("Boolean")}} qui est <code>true</code> si l'événement est déclenché après <code>compositionstart</code> et avant <code>compositionend</code>.</dd>
- <dt>{{domxref("KeyboardEvent.key")}} {{Readonlyinline}}</dt>
- <dd>Retourne une {{domxref ("DOMString")}} représentant la valeur de touche de la touche représentée par l'événement.</dd>
- <dt>{{domxref("KeyboardEvent.keyCode")}} {{deprecated_inline}}{{Readonlyinline}}</dt>
- <dd><p>Retourne un {{jsxref("Number")}} représentant un code numérique dépendant du système et de l'implémentation, identifiant la valeur non modifiée de la touche pressée.</p>
- <div class="warning"><p><strong>Attention :</strong> cet attribut est obsolète. vous devriez utiliser {{domxref("KeyboardEvent.key")}} à la place, si disponible.</p></div>
- </dd>
- <dt>{{domxref("KeyboardEvent.keyIdentifier")}} {{Non-standard_inline}}{{deprecated_inline}}{{Readonlyinline}}</dt>
- <dd>Cette propriété n'est pas standard et a été abandonnée en faveur de {{domxref("KeyboardEvent.key")}}. Elle faisait partie d'une ancienne version de DOM Level 3 Events.</dd>
- <dt>{{domxref("KeyboardEvent.keyLocation")}} {{Non-standard_inline}}{{deprecated_inline}}{{Readonlyinline}}</dt>
- <dd>C'est un alias obsolète non standard pour {{domxref("KeyboardEvent.location")}}. Il faisait partie d'une ancienne version de DOM Level 3 Events.</dd>
- <dt>{{domxref("KeyboardEvent.locale")}} {{Readonlyinline}}</dt>
- <dd><p>Retourne une {{domxref("DOMString")}} représentant une chaîne de paramètres régionaux indiquant les paramètres régionaux pour lesquels le clavier est configuré. Cela peut être une chaîne vide si le navigateur ou l'appareil ne connaît pas les paramètres régionaux du clavier.</p>
- <div class="note"><p><strong>Note :</strong> cela ne décrit pas les paramètres régionaux des données entrées. Un utilisateur peut utiliser une disposition du clavier donnée, tout en saisissant du texte dans une autre langue.</p></div>
- </dd>
- <dt>{{domxref("KeyboardEvent.location")}}{{Readonlyinline}}</dt>
- <dd>Retourne un {{jsxref ("Number")}} représentant l'emplacement de la touche du clavier ou tout autre dispositif d'entrée.</dd>
- <dt>{{domxref("KeyboardEvent.metaKey")}} {{Readonlyinline}}</dt>
- <dd>Retourne un {{jsxref("Boolean")}} qui est <code>true</code> si la touche <kbd>Meta</kbd> (sur les claviers Mac, la touche <kbd>⌘ Command</kbd> ; sur les claviers Windows, la touche Windows (<kbd>⊞</kbd>)) était active quand l'évènement touche a été généré.</dd>
- <dt>{{domxref("KeyboardEvent.repeat")}} {{Readonlyinline}}</dt>
- <dd>Retourne un {{jsxref("Booléen")}} qui est <code>true</code> si la touche est maintenue enfoncée de telle sorte qu'elle se répète automatiquement.</dd>
- <dt>{{domxref("KeyboardEvent.shiftKey")}} {{Readonlyinline}}</dt>
- <dd>Retourne un {{jsxref("Boolean")}} qui est <code>true</code> si la touche <kbd>Shift</kbd> était active quand l'évènement touche a été généré.</dd>
- <dt>{{domxref("KeyboardEvent.which")}} {{deprecated_inline}}{{Readonlyinline}}</dt>
- <dd><p>Retourne un {{jsxref("Number")}} représentant un code numérique dépendant du système et de l'implémentation, identifiant la valeur non modifiée de la touche pressée ; c'est généralement le même que <code>keyCode</code>.</p>
- <div class="warning"><p><strong>Attention :</strong> cet attribut est obsolète ; vous devriez utiliser {{domxref("KeyboardEvent.key")}} à la place, si disponible.</p></div>
- </dd>
-</dl>
-
-<h2 id="Notes">Notes</h2>
-
-<p>Les événements existants sont <code>keydown</code>, <code>keypress</code> et <code>keyup</code>. Pour la plupart des touches, Gecko génère une suite d'événements touche comme suit :</p>
-
-<ol>
- <li>lorsque la touche est d'abord enfoncée, l'événement <code>keydown</code> est envoyé ;</li>
- <li>si la touche n'est pas une touche de modification, l'événement <code>keypress</code> est envoyé ;</li>
- <li>lorsque l'utilisateur relâche la touche, l'événement <code>keyup</code> est envoyé.</li>
-</ol>
-
-<h3 id="Cas_particuliers">Cas particuliers</h3>
-
-<p>Certaines touches inversent l'état d'un voyant lumineux ; celles-ci comprennent des touches telles que Caps Lock, Num Lock et Scroll Lock. Sous Windows et Linux, ces touches génèrent uniquement les événements <code>keydown</code> et <code>keyup</code>.</p>
-
-<div class="note">
-<p><strong>Note :</strong> Sous Linux, Firefox 12 et les versions antérieures ont également envoyé l'événement <code>keypress</code> pour ces touches.</p>
-</div>
-
-<p>Cependant, une limitation du modèle d'événement Mac OS X fait que Caps Lock ne génère que l'événement <code>keydown</code>. Num Lock était supporté sur certains modèles d'ordinateurs portables plus anciens (modèles 2007 et plus anciens), mais depuis lors, Mac OS X n'a pas supporté Num Lock même sur les claviers externes. Sur les MacBooks plus anciens avec une touche Num Lock, cette touche ne génère aucun événement touche. Gecko supporte la touche Scroll Lock si un clavier externe ayant une touche F14 est connecté. Dans certaines anciennes versions de Firefox, cette touche générait un événement <code>keypress</code> ; ce comportement incohérent était le {{bug(602812)}}.</p>
-
-<h3 id="Gestion_de_l'auto-répétition">Gestion de l'auto-répétition</h3>
-
-<p>Lorsqu'une touche est maintenue enfoncée, elle commence à se répéter automatiquement. Cela a pour résultat qu'une suite d'événements similaire à ce qui suit est générée :</p>
-
-<ol>
- <li><code>keydown</code></li>
- <li><code>keypress</code></li>
- <li><code>keydown</code></li>
- <li><code>keypress</code></li>
- <li>&lt;&lt; répétition jusqu'à ce que l'utilisateur relâche la touche &gt;&gt;</li>
- <li><code>keyup</code></li>
-</ol>
-
-<p>C'est ce que la spécification DOM Niveau 3 dit qu'il devrait se produire. Cependant, il y a quelques mises en garde, comme décrit ci-dessous.</p>
-
-<p> </p>
-
-<h4 id="Auto-répétition_sur_certains_environnements_GTK_tels_que_Ubuntu_9.4">Auto-répétition sur certains environnements GTK tels que Ubuntu 9.4</h4>
-
-<p>Dans certains environnements basés sur GTK, l'auto-répétition génère automatiquement un événement natif lors de la répétition automatique, et Gecko n'a aucun moyen de connaître la différence entre une suite répétée de touches et une répétition automatique. Sur ces plateformes, une touche auto-répétée génère donc la suite d'événements suivante :</p>
-
-<ol>
- <li><code>keydown</code></li>
- <li><code>keypress</code></li>
- <li><code>keyup</code></li>
- <li><code>keydown</code></li>
- <li><code>keypress</code></li>
- <li><code>keyup</code></li>
- <li>&lt;&lt; répétition jusqu'à ce que l'utilisateur relâche la touche &gt;&gt;</li>
- <li><code>keyup</code></li>
-</ol>
-
-<p>Dans ces environnements, malheureusement, il n'y a aucun moyen pour que le contenu Web puisse faire la différence entre les touches répétées automatiquement et les touches qui sont simplement pressées à plusieurs reprises.</p>
-
-<h4 id="Gestion_de_l'auto-répétition_avant_Gecko_5.0">Gestion de l'auto-répétition avant Gecko 5.0</h4>
-
-<p>Avant Gecko 5.0 {{geckoRelease('5.0')}}, la gestion du clavier était moins cohérente entre les plates-formes.</p>
-
-<dl>
- <dt>Windows</dt>
- <dd>Le comportement de la répétition automatique est le même que dans Gecko 4.0 et ultérieur.</dd>
- <dt>Mac</dt>
- <dd>Après l'événement keydown initial, seuls les événements keypress sont envoyés jusqu'à ce que l'événement keyup se produise ; les événements de clavier intermédiaires ne sont pas envoyés.</dd>
- <dt>Linux</dt>
- <dd>Le comportement de l'événement dépend de la plate-forme particulière. Il se comportera comme Windows ou Mac suivant ce que fait le modèle d'événement natif.</dd>
-</dl>
-
-<div class="note">
-  <p><strong>Note :</strong> le déclenchement manuel d'un événement ne génère <em>pas</em> l'action par défaut associée à cet événement. Par exemple, le déclenchement manuel d'un événement touche n'entraîne pas l'apparition de cette lettre dans une zone de saisie de texte ayant la focalisation. Dans le cas des événements de l'interface utilisateur, cela est important pour des raisons de sécurité, car cela empêche les scripts de simuler les actions de l'utilisateur interagissant avec le navigateur lui-même.</p>
-</div>
-
-<h2 id="Exemple">Exemple</h2>
-
-<pre class="brush: html">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-&lt;head&gt;
-&lt;script&gt;
+{{APIRef("DOM Events")}}
+
+Les objets **`KeyboardEvent`** décrivent l'interaction d'un utilisateur avec le clavier. Chaque événement décrit une touche ; le type d'événement (`keydown`, `keypress`, ou `keyup`) identifie quel type d'activité a été effectué.
+
+> **Note :** `KeyboardEvent` indique exactement ce qui est en train de se passer sur une touche. Lorsque vous devez gérer une saisie de texte, utilisez l'événement `input` HTML5 à la place. Par exemple, si un utilisateur saisit du texte à partir d'un système d'écriture à la main comme une tablette PC, les événements touche peuvent ne pas être déclenchés.
+
+## Constructeur
+
+- {{domxref("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}
+  - : Crée un objet `KeyboardEvent`.
+
+## Méthodes
+
+_Cette interface hérite également des méthodes de ses parents, {{domxref("UIEvent")}} et {{domxref("Event")}}._
+
+- {{domxref("KeyboardEvent.getModifierState()")}}
+
+  - : Retourne un {{jsxref("Boolean")}} indiquant si une touche modifcatrice, telle que
+
+    <kbd>Alt</kbd>
+
+    ,
+
+    <kbd>Shift</kbd>
+
+    ,
+
+    <kbd>Ctrl</kbd>
+
+    , ou
+
+    <kbd>Meta</kbd>
+
+    , était pressée quand l'évènement a été créé.
+
+- {{domxref("KeyboardEvent.initKeyEvent()")}}{{deprecated_inline}}
+  - : Initialise un objet `KeyboardEvent`. Ceci a été implémenté seulement par Gecko (d'autres utilisaient {{domxref ("KeyboardEvent.initKeyboardEvent()")}}) et ne devrait plus être utilisé. La manière moderne standard consiste à utiliser le constructeur {{domxref ("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}.
+- {{domxref("KeyboardEvent.initKeyboardEvent()")}}{{deprecated_inline}}
+  - : Initialise un objet `KeyboardEvent`. Cela n'a jamais été implémenté par Gecko (qui utilisait {{domxref ("KeyboardEvent.initKeyEvent()")}}) et ne devrait plus être utilisé. La manière moderne standard consiste à utiliser le constructeur {{domxref ("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}.
+
+## Propriétés
+
+_Cette interface hérite également des propriétés de ses parents, {{domxref("UIEvent")}} et {{domxref("Event")}}._
+
+- {{domxref("KeyboardEvent.altKey")}} {{Readonlyinline}}
+
+  - : Returne un {{jsxref("Boolean")}} qui est `true` si la touche
+
+    <kbd>Alt</kbd>
+
+    (
+
+    <kbd>Option</kbd>
+
+    ou
+
+    <kbd>⌥</kbd>
+
+    sous OS X) était active quand l'évènement touche a été généré.
+
+- {{domxref("KeyboardEvent.char")}} {{Non-standard_inline}}{{Deprecated_inline}}{{Readonlyinline}}
+
+  - : Renvoie une {{domxref("DOMString")}} représentant la valeur de caractère de la touche. Si la touche correspond à un caractère imprimable, cette valeur est une chaîne Unicode non vide contenant ce caractère. Si la touche n'a pas de représentation imprimable, il s'agit d'une chaîne vide.
+
+    > **Note :** si la touche est utilisée comme une macro insérant plusieurs caractères, la valeur de cet attribut est la chaîne entière, pas seulement le premier caractère.
+
+    > **Attention :** cela a été supprimé des DOM Level 3 Events. C'est pris en charge uniquement sur IE9 + et Microsoft Edge.
+
+- {{domxref("KeyboardEvent.charCode")}} {{Deprecated_inline}}{{Readonlyinline}}
+
+  - : Retourne un {{jsxref ("Number")}} représentant le numéro de référence Unicode de la touche ; cet attribut est utilisé uniquement par l'événement `keypress`. Pour les touches dont l'attribut `char` contient plusieurs caractères, il s'agit de la valeur Unicode du premier caractère de cet attribut. Dans Firefox 26, cela retourne des codes pour les caractères imprimables.
+
+    > **Attention :** cet attribut est obsolète : vous devriez utiliser {{domxref("KeyboardEvent.key")}} à la place, si disponible.
+
+- {{domxref("KeyboardEvent.code")}} {{Readonlyinline}}
+  - : Retourne une {{domxref ("DOMString")}} avec la valeur du code de la touche représentée par l'événement.
+- {{domxref("KeyboardEvent.ctrlKey")}} {{Readonlyinline}}
+
+  - : Retourne un {{jsxref ("Boolean")}} qui est `true` si la touche
+
+    <kbd>Ctrl</kbd>
+
+    était active lorsque l'événement touche a été généré.
+
+- {{domxref("KeyboardEvent.isComposing")}} {{Readonlyinline}}
+  - : Renvoie un {{jsxref ("Boolean")}} qui est `true` si l'événement est déclenché après `compositionstart` et avant `compositionend`.
+- {{domxref("KeyboardEvent.key")}} {{Readonlyinline}}
+  - : Retourne une {{domxref ("DOMString")}} représentant la valeur de touche de la touche représentée par l'événement.
+- {{domxref("KeyboardEvent.keyCode")}} {{deprecated_inline}}{{Readonlyinline}}
+
+  - : Retourne un {{jsxref("Number")}} représentant un code numérique dépendant du système et de l'implémentation, identifiant la valeur non modifiée de la touche pressée.
+
+    > **Attention :** cet attribut est obsolète. vous devriez utiliser {{domxref("KeyboardEvent.key")}} à la place, si disponible.
+
+- {{domxref("KeyboardEvent.keyIdentifier")}} {{Non-standard_inline}}{{deprecated_inline}}{{Readonlyinline}}
+  - : Cette propriété n'est pas standard et a été abandonnée en faveur de {{domxref("KeyboardEvent.key")}}. Elle faisait partie d'une ancienne version de DOM Level 3 Events.
+- {{domxref("KeyboardEvent.keyLocation")}} {{Non-standard_inline}}{{deprecated_inline}}{{Readonlyinline}}
+  - : C'est un alias obsolète non standard pour {{domxref("KeyboardEvent.location")}}. Il faisait partie d'une ancienne version de DOM Level 3 Events.
+- {{domxref("KeyboardEvent.locale")}} {{Readonlyinline}}
+
+  - : Retourne une {{domxref("DOMString")}} représentant une chaîne de paramètres régionaux indiquant les paramètres régionaux pour lesquels le clavier est configuré. Cela peut être une chaîne vide si le navigateur ou l'appareil ne connaît pas les paramètres régionaux du clavier.
+
+    > **Note :** cela ne décrit pas les paramètres régionaux des données entrées. Un utilisateur peut utiliser une disposition du clavier donnée, tout en saisissant du texte dans une autre langue.
+
+- {{domxref("KeyboardEvent.location")}}{{Readonlyinline}}
+  - : Retourne un {{jsxref ("Number")}} représentant l'emplacement de la touche du clavier ou tout autre dispositif d'entrée.
+- {{domxref("KeyboardEvent.metaKey")}} {{Readonlyinline}}
+
+  - : Retourne un {{jsxref("Boolean")}} qui est `true` si la touche
+
+    <kbd>Meta</kbd>
+
+    (sur les claviers Mac, la touche
+
+    <kbd>⌘ Command</kbd>
+
+    ; sur les claviers Windows, la touche Windows (
+
+    <kbd>⊞</kbd>
+
+    )) était active quand l'évènement touche a été généré.
+
+- {{domxref("KeyboardEvent.repeat")}} {{Readonlyinline}}
+  - : Retourne un {{jsxref("Booléen")}} qui est `true` si la touche est maintenue enfoncée de telle sorte qu'elle se répète automatiquement.
+- {{domxref("KeyboardEvent.shiftKey")}} {{Readonlyinline}}
+
+  - : Retourne un {{jsxref("Boolean")}} qui est `true` si la touche
+
+    <kbd>Shift</kbd>
+
+    était active quand l'évènement touche a été généré.
+
+- {{domxref("KeyboardEvent.which")}} {{deprecated_inline}}{{Readonlyinline}}
+
+  - : Retourne un {{jsxref("Number")}} représentant un code numérique dépendant du système et de l'implémentation, identifiant la valeur non modifiée de la touche pressée ; c'est généralement le même que `keyCode`.
+
+    > **Attention :** cet attribut est obsolète ; vous devriez utiliser {{domxref("KeyboardEvent.key")}} à la place, si disponible.
+
+## Notes
+
+Les événements existants sont `keydown`, `keypress` et `keyup`. Pour la plupart des touches, Gecko génère une suite d'événements touche comme suit :
+
+1.  lorsque la touche est d'abord enfoncée, l'événement `keydown` est envoyé ;
+2.  si la touche n'est pas une touche de modification, l'événement `keypress` est envoyé ;
+3.  lorsque l'utilisateur relâche la touche, l'événement `keyup` est envoyé.
+
+### Cas particuliers
+
+Certaines touches inversent l'état d'un voyant lumineux ; celles-ci comprennent des touches telles que Caps Lock, Num Lock et Scroll Lock. Sous Windows et Linux, ces touches génèrent uniquement les événements `keydown` et `keyup`.
+
+> **Note :** Sous Linux, Firefox 12 et les versions antérieures ont également envoyé l'événement `keypress` pour ces touches.
+
+Cependant, une limitation du modèle d'événement Mac OS X fait que Caps Lock ne génère que l'événement `keydown`. Num Lock était supporté sur certains modèles d'ordinateurs portables plus anciens (modèles 2007 et plus anciens), mais depuis lors, Mac OS X n'a pas supporté Num Lock même sur les claviers externes. Sur les MacBooks plus anciens avec une touche Num Lock, cette touche ne génère aucun événement touche. Gecko supporte la touche Scroll Lock si un clavier externe ayant une touche F14 est connecté. Dans certaines anciennes versions de Firefox, cette touche générait un événement `keypress` ; ce comportement incohérent était le {{bug(602812)}}.
+
+### Gestion de l'auto-répétition
+
+Lorsqu'une touche est maintenue enfoncée, elle commence à se répéter automatiquement. Cela a pour résultat qu'une suite d'événements similaire à ce qui suit est générée :
+
+1.  `keydown`
+2.  `keypress`
+3.  `keydown`
+4.  `keypress`
+5.  << répétition jusqu'à ce que l'utilisateur relâche la touche >>
+6.  `keyup`
+
+C'est ce que la spécification DOM Niveau 3 dit qu'il devrait se produire. Cependant, il y a quelques mises en garde, comme décrit ci-dessous.
+
+
+
+#### Auto-répétition sur certains environnements GTK tels que Ubuntu 9.4
+
+Dans certains environnements basés sur GTK, l'auto-répétition génère automatiquement un événement natif lors de la répétition automatique, et Gecko n'a aucun moyen de connaître la différence entre une suite répétée de touches et une répétition automatique. Sur ces plateformes, une touche auto-répétée génère donc la suite d'événements suivante :
+
+1.  `keydown`
+2.  `keypress`
+3.  `keyup`
+4.  `keydown`
+5.  `keypress`
+6.  `keyup`
+7.  << répétition jusqu'à ce que l'utilisateur relâche la touche >>
+8.  `keyup`
+
+Dans ces environnements, malheureusement, il n'y a aucun moyen pour que le contenu Web puisse faire la différence entre les touches répétées automatiquement et les touches qui sont simplement pressées à plusieurs reprises.
+
+#### Gestion de l'auto-répétition avant Gecko 5.0
+
+Avant Gecko 5.0 {{geckoRelease('5.0')}}, la gestion du clavier était moins cohérente entre les plates-formes.
+
+- Windows
+  - : Le comportement de la répétition automatique est le même que dans Gecko 4.0 et ultérieur.
+- Mac
+  - : Après l'événement keydown initial, seuls les événements keypress sont envoyés jusqu'à ce que l'événement keyup se produise ; les événements de clavier intermédiaires ne sont pas envoyés.
+- Linux
+  - : Le comportement de l'événement dépend de la plate-forme particulière. Il se comportera comme Windows ou Mac suivant ce que fait le modèle d'événement natif.
+
+> **Note :** le déclenchement manuel d'un événement ne génère _pas_ l'action par défaut associée à cet événement. Par exemple, le déclenchement manuel d'un événement touche n'entraîne pas l'apparition de cette lettre dans une zone de saisie de texte ayant la focalisation. Dans le cas des événements de l'interface utilisateur, cela est important pour des raisons de sécurité, car cela empêche les scripts de simuler les actions de l'utilisateur interagissant avec le navigateur lui-même.
+
+## Exemple
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+<script>
 'use strict';
 
-document.addEventListener('keydown', (event) =&gt; {
+document.addEventListener('keydown', (event) => {
   const nomTouche = event.key;
 
   if (nomTouche === 'Control') {
@@ -190,7 +233,7 @@ document.addEventListener('keydown', (event) =&gt; {
   }
 }, false);
 
-document.addEventListener('keyup', (event) =&gt; {
+document.addEventListener('keyup', (event) => {
   const nomTouche = event.key;
 
   // Dès que l'utilisateur relâche la touche Ctrl, la touche n'est plus active.
@@ -200,43 +243,28 @@ document.addEventListener('keyup', (event) =&gt; {
   }
 }, false);
 
-&lt;/script&gt;
-&lt;/head&gt;
-
-&lt;body&gt;
-&lt;/body&gt;
-&lt;/html&gt;
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
+</script>
+</head>
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('UI Events', '#interface-keyboardevent', 'KeyboardEvent')}}</td>
-   <td>{{Spec2('UI Events')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+<body>
+</body>
+</html>
+```
 
-<p>La spécification d'interface <code>KeyboardEvent</code> est passée par de nombreuses versions préliminaires, d'abord sous DOM Events Level 2 où elle a été supprimée du fait qu'aucun consensus n'avait émergé, puis sous DOM Events Level 3. Cela conduit à l'implémentation de méthodes d'initialisation non standard, la version ancienne DOM Events Level 2, {{domxref("KeyboardEvent.initKeyEvent()")}} par les navigateurs Gecko et la version prémiminaire DOM Events Level 3, {{domxref("KeyboardEvent.initKeyboardEvent()")}} par d'autres navigateurs. Tous deux ont été remplacés par l'utilisation moderne d'un constructeur : {{domxref ("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}.</p>
+## Spécifications
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+| Spécification                                                                                | Statut                       | Commentaire |
+| -------------------------------------------------------------------------------------------- | ---------------------------- | ----------- |
+| {{SpecName('UI Events', '#interface-keyboardevent', 'KeyboardEvent')}} | {{Spec2('UI Events')}} |             |
 
+La spécification d'interface `KeyboardEvent` est passée par de nombreuses versions préliminaires, d'abord sous DOM Events Level 2 où elle a été supprimée du fait qu'aucun consensus n'avait émergé, puis sous DOM Events Level 3. Cela conduit à l'implémentation de méthodes d'initialisation non standard, la version ancienne DOM Events Level 2, {{domxref("KeyboardEvent.initKeyEvent()")}} par les navigateurs Gecko et la version prémiminaire DOM Events Level 3, {{domxref("KeyboardEvent.initKeyboardEvent()")}} par d'autres navigateurs. Tous deux ont été remplacés par l'utilisation moderne d'un constructeur : {{domxref ("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}.
 
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.KeyboardEvent")}}</p>
+{{Compat("api.KeyboardEvent")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("KeyboardEvent.code")}}.</li>
- <li>{{domxref("KeyboardEvent.key")}}.</li>
- <li>{{domxref("KeyboardEvent.getModifierState")}}</li>
-</ul>
+- {{domxref("KeyboardEvent.code")}}.
+- {{domxref("KeyboardEvent.key")}}.
+- {{domxref("KeyboardEvent.getModifierState")}}
diff --git a/files/fr/web/api/keyboardevent/key/index.md b/files/fr/web/api/keyboardevent/key/index.md
index bfd9846960..46dff733e1 100644
--- a/files/fr/web/api/keyboardevent/key/index.md
+++ b/files/fr/web/api/keyboardevent/key/index.md
@@ -11,74 +11,94 @@ tags:
   - UI Events
 translation_of: Web/API/KeyboardEvent/key
 ---
-<p>{{APIRef("DOM Events")}}</p>
+{{APIRef("DOM Events")}}
 
-<p>La propriété en lecture seule de <code>key</code> de l'interface {{domxref("KeyboardEvent")}} retourne la valeur d’une ou plusieurs touches pressées par l’utilisateur, tout en tenant compte de l'état des touches de modification telles que la touche <kbd>Shift</kbd> (<em>majuscules</em>) ainsi que les paramètres régionaux des clavier et mise en page. Ce peut être l’une des valeurs suivantes :</p>
+La propriété en lecture seule de `key` de l'interface {{domxref("KeyboardEvent")}} retourne la valeur d’une ou plusieurs touches pressées par l’utilisateur, tout en tenant compte de l'état des touches de modification telles que la touche <kbd>Shift</kbd> (_majuscules_) ainsi que les paramètres régionaux des clavier et mise en page. Ce peut être l’une des valeurs suivantes :
 
-<h4 id="Valeurs_des_touches">Valeurs des touches</h4>
+#### Valeurs des touches
 
-<p>Voir une liste complète des <a href="/fr/docs/Web/API/KeyboardEvent/key/Key_Values">valeurs de touches</a></p>
+Voir une liste complète des [valeurs de touches](/fr/docs/Web/API/KeyboardEvent/key/Key_Values)
 
-<ul>
- <li>
-  <p>Si la valeur a une représentation d’impression, ce sera une chaîne de caractères Unicode non vide</p>
- </li>
- <li>Si la valeur est une touche de contrôle, une des <a href="#Key_values">valeurs de touches pré-définies</a>.</li>
- <li>Si l’<code>KeyboardEvent</code> est causé par l’appui sur une touche morte, la valeur de la touche sera "<code>Dead</code>".</li>
- <li>Certaines touches de clavier spécialisées (telles que les touches étendues de contrôle des médias sur les claviers multimédias) ne génèrent pas de codes de touches sous Windows ; à la place, ils déclenchent les événements <code>WM_APPCOMMAND</code>. Ces événements sont connectés aux événements de clavier DOM et sont répertoriés parmi les «codes de touche virtuelle» pour Windows, même s'ils ne sont pas réellement des codes de touche.</li>
- <li>Si la valeur ne peut être identifiée, '<code>Unidentified</code>' sera retourné.</li>
-</ul>
+- Si la valeur a une représentation d’impression, ce sera une chaîne de caractères Unicode non vide
+- Si la valeur est une touche de contrôle, une des [valeurs de touches pré-définies](#Key_values).
+- Si l’`KeyboardEvent` est causé par l’appui sur une touche morte, la valeur de la touche sera "`Dead`".
+- Certaines touches de clavier spécialisées (telles que les touches étendues de contrôle des médias sur les claviers multimédias) ne génèrent pas de codes de touches sous Windows ; à la place, ils déclenchent les événements `WM_APPCOMMAND`. Ces événements sont connectés aux événements de clavier DOM et sont répertoriés parmi les «codes de touche virtuelle» pour Windows, même s'ils ne sont pas réellement des codes de touche.
+- Si la valeur ne peut être identifiée, '`Unidentified`' sera retourné.
 
-<h2 id="Séquence_KeyboardEvent">Séquence KeyboardEvent</h2>
+## Séquence KeyboardEvent
 
-<p>Les événements <code>KeyboardEvents</code> sont déclenchés selon une séquence prédéterminée, et la compréhension de ces éléments contribuera à comprendre la valeur de la propriété <code>key</code> pour un événement <code>KeyboardEvent</code> particulier. Pour une touche donnée, la séquence de KeyboardEvents est la suivante, en supposant que {{domxref ("Event.preventDefault")}} n'est pas appelée :</p>
+Les événements `KeyboardEvents` sont déclenchés selon une séquence prédéterminée, et la compréhension de ces éléments contribuera à comprendre la valeur de la propriété `key` pour un événement `KeyboardEvent` particulier. Pour une touche donnée, la séquence de KeyboardEvents est la suivante, en supposant que {{domxref ("Event.preventDefault")}} n'est pas appelée :
 
-<ol>
- <li>Un événement {{domxref("Element/keydown_event", "keydown")}} (<em>touche abaissée</em>) est d'abord déclenché. Si la touche est maintenue enfoncée et que la touche est une touche de caractère, l'événement continue d'être émis dans un intervalle dépendant de l'implémentation de la plateforme, et la propriété en lecture seule {{domxref ("KeyboardEvent.repeat")}} est définie sur <code>true</code> (<em>vrai</em>).</li>
- <li>Si la touche est une touche de caractère qui entraînerait l'insertion d'un caractère dans {{HTMLElement ("entrée")}}, {{HTMLElement ("textarea")}} ou un élément dont {{domxref ("HTMLElement. contentEditable ")}} a la valeur <code>true</code>, les types d'événements {{domxref("HTMLElement/beforeinput_event", "beforeinput")}} et {{domxref("HTMLElement/input_event", "input")}} sont déclenchés dans cet ordre. Notez que d'autres implémentations peuvent déclencher l'événement {{event ("keypress")}} si elles sont prises en charge. Les événements seront déclenchés à plusieurs reprises tant que la touche est maintenue enfoncée.</li>
- <li>Un évènement {{domxref("Element/keyup_event", "keyup")}} est déclenché une fois la touche relachée. Ceci complète le processus.</li>
-</ol>
+1.  Un événement {{domxref("Element/keydown_event", "keydown")}} (_touche abaissée_) est d'abord déclenché. Si la touche est maintenue enfoncée et que la touche est une touche de caractère, l'événement continue d'être émis dans un intervalle dépendant de l'implémentation de la plateforme, et la propriété en lecture seule {{domxref ("KeyboardEvent.repeat")}} est définie sur `true` (_vrai_).
+2.  Si la touche est une touche de caractère qui entraînerait l'insertion d'un caractère dans {{HTMLElement ("entrée")}}, {{HTMLElement ("textarea")}} ou un élément dont {{domxref ("HTMLElement. contentEditable ")}} a la valeur `true`, les types d'événements {{domxref("HTMLElement/beforeinput_event", "beforeinput")}} et {{domxref("HTMLElement/input_event", "input")}} sont déclenchés dans cet ordre. Notez que d'autres implémentations peuvent déclencher l'événement {{event ("keypress")}} si elles sont prises en charge. Les événements seront déclenchés à plusieurs reprises tant que la touche est maintenue enfoncée.
+3.  Un évènement {{domxref("Element/keyup_event", "keyup")}} est déclenché une fois la touche relachée. Ceci complète le processus.
 
-<p>Dans les étapes 1 et 3, l'attribut <code>KeyboardEent.key</code> est défini et est déclaré à une valeur appropriée en fonction des règles définies.</p>
+Dans les étapes 1 et 3, l'attribut `KeyboardEent.key` est défini et est déclaré à une valeur appropriée en fonction des règles définies.
 
-<h2 id="Exemple_de_séquence_KeyboardEvent">Exemple de séquence KeyboardEvent</h2>
+## Exemple de séquence KeyboardEvent
 
-<p>Considérez la séquence d'événements générée lorsque nous interagissons avec la touche <kbd>Shift</kbd> et la touche <kbd>2</kbd> en utilisant un clavier américain et un clavier britannique.</p>
+Considérez la séquence d'événements générée lorsque nous interagissons avec la touche <kbd>Shift</kbd> et la touche <kbd>2</kbd> en utilisant un clavier américain et un clavier britannique.
 
-<p>Essayez d'expérimenter en utilisant les deux cas de test suivants :</p>
+Essayez d'expérimenter en utilisant les deux cas de test suivants :
 
-<ol>
- <li>Maintenez la touche <kbd>shift</kbd> enfoncée, puis appuyez sur <kbd>2</kbd> et relâchez-la. Ensuite, relâchez la touche <kbd>shift</kbd>.</li>
- <li>Maintenez la touche <code>shift</code> enfoncée, puis appuyez sur <kbd>2</kbd>. Relâchez la touche <kbd>shift</kbd>. Finalement, relâchez la touche <kbd>2</kbd>.</li>
-</ol>
+1.  Maintenez la touche
 
-<h3 id="HTML">HTML</h3>
+    <kbd>shift</kbd>
 
-<pre class="brush: html">&lt;div class="fx"&gt;
-  &lt;div&gt;
-    &lt;textarea rows="5" name="test-target" id="test-target"&gt;&lt;/textarea&gt;
-    &lt;button type="button" name="btn-clear-console" id="btn-clear-console"&gt;clear console&lt;/button&gt;
-  &lt;/div&gt;
-  &lt;div class="flex"&gt;
-    &lt;div id="console-log"&gt;&lt;/div&gt;
-  &lt;/div&gt;
-&lt;/div&gt;</pre>
+    enfoncée, puis appuyez sur
 
-<h3 id="CSS">CSS</h3>
+    <kbd>2</kbd>
 
-<pre class="brush: css">.fx {
+    et relâchez-la. Ensuite, relâchez la touche
+
+    <kbd>shift</kbd>
+
+    .
+
+2.  Maintenez la touche `shift` enfoncée, puis appuyez sur
+
+    <kbd>2</kbd>
+
+    . Relâchez la touche
+
+    <kbd>shift</kbd>
+
+    . Finalement, relâchez la touche
+
+    <kbd>2</kbd>
+
+    .
+
+### HTML
+
+```html
+<div class="fx">
+  <div>
+    <textarea rows="5" name="test-target" id="test-target"></textarea>
+    <button type="button" name="btn-clear-console" id="btn-clear-console">clear console</button>
+  </div>
+  <div class="flex">
+    <div id="console-log"></div>
+  </div>
+</div>
+```
+
+### CSS
+
+```css
+.fx {
   -webkit-display: flex;
   display: flex;
   margin-left: -20px;
   margin-right: -20px;
 }
 
-.fx &gt; div {
+.fx > div {
   padding-left: 20px;
   padding-right: 20px;
 }
 
-.fx &gt; div:first-child {
+.fx > div:first-child {
    width: 30%;
 }
 
@@ -91,11 +111,13 @@ translation_of: Web/API/KeyboardEvent/key
   display: block;
   width: 100%;
   margin-bottom: 10px;
-}</pre>
+}
+```
 
-<h3 id="JavaScript">JavaScript</h3>
+### JavaScript
 
-<pre class="brush: js">let textarea = document.getElementById('test-target'),
+```js
+let textarea = document.getElementById('test-target'),
 consoleLog = document.getElementById('console-log'),
 btnClearConsole = document.getElementById('btn-clear-console');
 
@@ -105,66 +127,66 @@ function logMessage(message) {
   consoleLog.appendChild(p);
 }
 
-textarea.addEventListener('keydown', (e) =&gt; {
+textarea.addEventListener('keydown', (e) => {
   if (!e.repeat)
     logMessage(`first keydown event. key property value is "${e.key}"`);
   else
     logMessage(`keydown event repeats. key property value is "${e.key}"`);
 });
 
-textarea.addEventListener('beforeinput', (e) =&gt; {
+textarea.addEventListener('beforeinput', (e) => {
   logMessage(`beforeinput event. you are about inputing "${e.data}"`);
 });
 
-textarea.addEventListener('input', (e) =&gt; {
+textarea.addEventListener('input', (e) => {
   logMessage(`input event. you have just inputed "${e.data}"`);
 });
 
-textarea.addEventListener('keyup', (e) =&gt; {
+textarea.addEventListener('keyup', (e) => {
   logMessage(`keyup event. key property value is "${e.key}"`);
 });
 
-btnClearConsole.addEventListener('click', (e) =&gt; {
+btnClearConsole.addEventListener('click', (e) => {
   let child = consoleLog.firstChild;
   while (child) {
    consoleLog.removeChild(child);
    child = consoleLog.firstChild;
   }
-});</pre>
+});
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample('Exemple_de_séquence_KeyboardEvent')}}</p>
+{{EmbedLiveSample('Exemple_de_séquence_KeyboardEvent')}}
 
-<div class="blockIndicator note">
-<p><strong>Note :</strong> Sur les navigateurs qui n'implémentent pas complètement l'interface {{domxref("InputEvent")}} qui est utilisée pour les événements {{domxref("HTMLElement/beforeinput_event", "beforeinput")}} et {{domxref("HTMLElement/input_event", "input")}}, vous pouvez obtenir une réponse incorrecte sur ces lignes du journal de sortie.</p>
-</div>
+> **Note :** Sur les navigateurs qui n'implémentent pas complètement l'interface {{domxref("InputEvent")}} qui est utilisée pour les événements {{domxref("HTMLElement/beforeinput_event", "beforeinput")}} et {{domxref("HTMLElement/input_event", "input")}}, vous pouvez obtenir une réponse incorrecte sur ces lignes du journal de sortie.
 
-<h3 id="Cas_1">Cas 1</h3>
+### Cas 1
 
-<p>Lorsque la touche Maj (<em>shift</em>) est enfoncée, un événement {{domxref("Element/keydown_event", "keydown")}} est d'abord déclenché et la valeur de la propriété <code>key</code> est définie sur la chaîne <code>"Shift"</code>. Comme nous gardons cette touche enfoncée, l'événement {{event ("keydown")}} est continu et ne se répéte pas car la touche Maj ne produit pas de caractère.</p>
+Lorsque la touche Maj (_shift_) est enfoncée, un événement {{domxref("Element/keydown_event", "keydown")}} est d'abord déclenché et la valeur de la propriété `key` est définie sur la chaîne `"Shift"`. Comme nous gardons cette touche enfoncée, l'événement {{event ("keydown")}} est continu et ne se répéte pas car la touche Maj ne produit pas de caractère.
 
-<p>Lorsque la <code>key 2</code> est enfoncée, un autre événement {{domxref("Element/keydown_event", "keydown")}} est déclenché pour cette nouvelle touche, et la valeur de la propriété <code>key</code> pour l'événement est définie sur la chaîne <code>"@"</code> pour le clavier de type américain et <code>"""</code> pour le clavier de type britannique, à cause de la touche de changement de modificateur active. Les événements {{domxref("HTMLElement/beforeinput_event", "beforeinput")}} et {{domxref("HTMLElement/input_event", "input")}} sont déclenchés ensuite parce qu'une touche de caractère a été activée.</p>
+Lorsque la `key 2` est enfoncée, un autre événement {{domxref("Element/keydown_event", "keydown")}} est déclenché pour cette nouvelle touche, et la valeur de la propriété `key` pour l'événement est définie sur la chaîne `"@"` pour le clavier de type américain et `"""` pour le clavier de type britannique, à cause de la touche de changement de modificateur active. Les événements {{domxref("HTMLElement/beforeinput_event", "beforeinput")}} et {{domxref("HTMLElement/input_event", "input")}} sont déclenchés ensuite parce qu'une touche de caractère a été activée.
 
-<p>Lorsque nous relâchons la <code>key 2</code>, un événement {{domxref("Element/keyup_event", "keyup")}} est déclenché et la propriété <code>key</code> conserve les valeurs de chaîne <code>"@"</code> et <code>"""</code> pour les différents claviers respectivement.</p>
+Lorsque nous relâchons la `key 2`, un événement {{domxref("Element/keyup_event", "keyup")}} est déclenché et la propriété `key` conserve les valeurs de chaîne `"@"` et `"""` pour les différents claviers respectivement.
 
-<p>Lorsque nous relâchons enfin la touche <code>shift</code>, un autre événement {{domxref("Element/keyup_event", "keyup")}} est déclenché pour elle, et la valeur de l'attribut de la touche reste <code>"Shift"</code>.</p>
+Lorsque nous relâchons enfin la touche `shift`, un autre événement {{domxref("Element/keyup_event", "keyup")}} est déclenché pour elle, et la valeur de l'attribut de la touche reste `"Shift"`.
 
-<h3 id="Cas_2">Cas 2</h3>
+### Cas 2
 
-<p>Lorsque la touche Maj est enfoncée, un événement {{domxref("Element/keydown_event", "keydown")}} est d'abord déclenché et la valeur de la propriété <code>key</code> est définie sur la chaîne "Shift". Comme nous maintenons cette touche enfoncée, l'événement {{domxref("Element/keydown_event", "keydown")}} est continu et ne se répéte pas car la touche Maj ne produit pas de caractère.</p>
+Lorsque la touche Maj est enfoncée, un événement {{domxref("Element/keydown_event", "keydown")}} est d'abord déclenché et la valeur de la propriété `key` est définie sur la chaîne "Shift". Comme nous maintenons cette touche enfoncée, l'événement {{domxref("Element/keydown_event", "keydown")}} est continu et ne se répéte pas car la touche Maj ne produit pas de caractère.
 
-<p>Lorsque la <code>key 2</code> est enfoncée, un autre événement {{domxref("Element/keydown_event", "keydown")}} est déclenché pour cette nouvelle touche, et la valeur de la propriété <code>key</code> pour l'événement est définie sur la chaîne <code>"@"</code> pour le clavier de type américain et <code>"""</code> pour le clavier de type britanique, à cause de la touche de changement de modificateur active. Les événements {{domxref("HTMLElement/beforeinput_event", "beforeinput")}} et {{domxref("HTMLElement/input_event", "input")}} sont déclenchés ensuite parce qu'une touche de caractère a été activée. Comme nous maintenons la touche enfoncée, l'événement {{domxref("Element/keydown_event", "keydown")}} continue à se déclencher à plusieurs reprises et la propriété {{domxref ("KeyboardEvent.repeat")}} est définie sur <code>true</code>. Les évènements {{domxref("HTMLElement/beforeinput_event", "beforeinput")}} et {{domxref("HTMLElement/input_event", "input")}} sont également déclenchés.</p>
+Lorsque la `key 2` est enfoncée, un autre événement {{domxref("Element/keydown_event", "keydown")}} est déclenché pour cette nouvelle touche, et la valeur de la propriété `key` pour l'événement est définie sur la chaîne `"@"` pour le clavier de type américain et `"""` pour le clavier de type britanique, à cause de la touche de changement de modificateur active. Les événements {{domxref("HTMLElement/beforeinput_event", "beforeinput")}} et {{domxref("HTMLElement/input_event", "input")}} sont déclenchés ensuite parce qu'une touche de caractère a été activée. Comme nous maintenons la touche enfoncée, l'événement {{domxref("Element/keydown_event", "keydown")}} continue à se déclencher à plusieurs reprises et la propriété {{domxref ("KeyboardEvent.repeat")}} est définie sur `true`. Les évènements {{domxref("HTMLElement/beforeinput_event", "beforeinput")}} et {{domxref("HTMLElement/input_event", "input")}} sont également déclenchés.
 
-<p>Lorsque nous relâchons la touche <code>shift</code>, un événement {{domxref("Element/keyup_event", "keyup")}} est déclenché et la valeur de l'attribut clé reste "Shift". À ce stade, notez que la valeur de la propriété <code>key</code> pour l'événement de répétition du clavier de la touche <code>key 2</code> est désormais "2" car la touche de modification du sélecteur n'est plus active. Il en va de même pour la propriété {{domxref("HTMLElement/beforeinput_event", "beforeinput")}} des événements {{domxref("HTMLElement/input_event", "input")}} et {{event ("input")}}.</p>
+Lorsque nous relâchons la touche `shift`, un événement {{domxref("Element/keyup_event", "keyup")}} est déclenché et la valeur de l'attribut clé reste "Shift". À ce stade, notez que la valeur de la propriété `key` pour l'événement de répétition du clavier de la touche `key 2` est désormais "2" car la touche de modification du sélecteur n'est plus active. Il en va de même pour la propriété {{domxref("HTMLElement/beforeinput_event", "beforeinput")}} des événements {{domxref("HTMLElement/input_event", "input")}} et {{event ("input")}}.
 
-<p>Lorsque nous relâchons enfin la touche <code>key 2</code>, un événement {{domxref("Element/keyup_event", "keyup")}} est déclenché mais la propriété <code>key</code> est définie sur la valeur de chaîne <code>"2"</code> pour les deux configurations de clavier car la touche de modification <code>shift</code> n'est plus active.</p>
+Lorsque nous relâchons enfin la touche `key 2`, un événement {{domxref("Element/keyup_event", "keyup")}} est déclenché mais la propriété `key` est définie sur la valeur de chaîne `"2"` pour les deux configurations de clavier car la touche de modification `shift` n'est plus active.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Cet exemple utilise {{domxref("EventTarget.addEventListener()")}} pour écouter les événements  {{domxref("Element/keydown_event", "keydown")}} . Quand ils se produisent, la valeur de la touche est vérifiée pour voir si c'est l'une des touches qui intéressent le code, et si c'est le cas, elle est traitée (éventuellement en pilotant un vaisseau spatial, peut-être en changeant la cellule sélectionnée dans une feuille de calcul).</p>
+Cet exemple utilise {{domxref("EventTarget.addEventListener()")}} pour écouter les événements {{domxref("Element/keydown_event", "keydown")}} . Quand ils se produisent, la valeur de la touche est vérifiée pour voir si c'est l'une des touches qui intéressent le code, et si c'est le cas, elle est traitée (éventuellement en pilotant un vaisseau spatial, peut-être en changeant la cellule sélectionnée dans une feuille de calcul).
 
-<pre class="brush: js">window.addEventListener("keydown", function (event) {
+```js
+window.addEventListener("keydown", function (event) {
   if (event.defaultPrevented) {
     return; // Ne devrait rien faire si l'événement de la touche était déjà consommé.
   }
@@ -185,7 +207,7 @@ btnClearConsole.addEventListener('click', (e) =&gt; {
     case "Enter":
       // Faire quelque chose pour les touches "enter" ou "return" pressées.
       break;
-    case "<code>Escape</code>":
+    case "Escape":
       // Faire quelque chose pour la touche "esc" pressée.
       break;
     default:
@@ -195,25 +217,14 @@ btnClearConsole.addEventListener('click', (e) =&gt; {
   // Annuler l'action par défaut pour éviter qu'elle ne soit traitée deux fois.
   event.preventDefault();
 }, true);
-</pre>
-
-<h2 id="Spécification">Spécification</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM3 Events', '#widl-KeyboardEvent-key', 'KeyboardEvent.key')}}</td>
-   <td>{{Spec2('DOM3 Events')}}</td>
-   <td>Définition initiale, incluant les valeurs de touches.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.KeyboardEvent.key")}}</p>
\ No newline at end of file
+```
+
+## Spécification
+
+| Spécification                                                                                        | Statut                           | Commentaire                                           |
+| ---------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------------- |
+| {{SpecName('DOM3 Events', '#widl-KeyboardEvent-key', 'KeyboardEvent.key')}} | {{Spec2('DOM3 Events')}} | Définition initiale, incluant les valeurs de touches. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.KeyboardEvent.key")}}
diff --git a/files/fr/web/api/keyboardevent/key/key_values/index.md b/files/fr/web/api/keyboardevent/key/key_values/index.md
index 07c8ba499c..4dd52f5ff7 100644
--- a/files/fr/web/api/keyboardevent/key/key_values/index.md
+++ b/files/fr/web/api/keyboardevent/key/key_values/index.md
@@ -3,3635 +3,4614 @@ title: Key Values
 slug: Web/API/KeyboardEvent/key/Key_Values
 translation_of: Web/API/KeyboardEvent/key/Key_Values
 ---
-<p>Les tableaux ci-dessous énumèrent les valeurs clés standard dans différentes catégories de clés, avec une explication de l'utilisation habituelle de la clé. Les codes de clés virtuels correspondants pour les plateformes communes sont inclus lorsqu'ils sont disponibles.</p>
+Les tableaux ci-dessous énumèrent les valeurs clés standard dans différentes catégories de clés, avec une explication de l'utilisation habituelle de la clé. Les codes de clés virtuels correspondants pour les plateformes communes sont inclus lorsqu'ils sont disponibles.
 
-<p>Apprenez à utiliser ces valeurs clés en JavaScript en utilisant <a href="/fr/docs/Web/API/KeyboardEvent/key">KeyboardEvent.key</a></p>
+Apprenez à utiliser ces valeurs clés en JavaScript en utilisant [KeyboardEvent.key](/fr/docs/Web/API/KeyboardEvent/key)
 
-<p><a href="#Special_values">Special Values </a>| <a href="#Modifier_keys">Modifier Keys</a> | <a href="#Whitespace_keys">Whitespace Keys</a> | <a href="#Navigation_keys">Navigation Keys</a> | <a href="#Editing_keys">Editing Keys</a> | <a href="#UI_keys">UI Keys</a> | <a href="#Device_keys">Device Keys</a> | <a href="#IME_and_composition_keys">IME and Composition Keys</a> | <a href="#Function_keys">Function Keys</a> | <a href="#Phone_keys">Phone Keys</a> | <a href="#Multimedia_keys">Multimedia Keys</a> | <a href="#Audio_control_keys">Audio Control Keys</a> | <a href="#TV_control_keys">TV Control Keys</a> | <a href="#Media_controller_keys">Media Controller Keys</a> | <a href="#Speech_recognition_keys">Speech Recognition Keys</a> | <a href="#Document_keys">Document Keys</a> | <a href="#Application_selector_keys">Application Selector Keys</a> | <a href="#Browser_control_keys">Browser Control Keys</a> | <a href="#Numeric_keypad_keys">Numeric Keypad Keys</a></p>
+[Special Values ](#Special_values)| [Modifier Keys](#Modifier_keys) | [Whitespace Keys](#Whitespace_keys) | [Navigation Keys](#Navigation_keys) | [Editing Keys](#Editing_keys) | [UI Keys](#UI_keys) | [Device Keys](#Device_keys) | [IME and Composition Keys](#IME_and_composition_keys) | [Function Keys](#Function_keys) | [Phone Keys](#Phone_keys) | [Multimedia Keys](#Multimedia_keys) | [Audio Control Keys](#Audio_control_keys) | [TV Control Keys](#TV_control_keys) | [Media Controller Keys](#Media_controller_keys) | [Speech Recognition Keys](#Speech_recognition_keys) | [Document Keys](#Document_keys) | [Application Selector Keys](#Application_selector_keys) | [Browser Control Keys](#Browser_control_keys) | [Numeric Keypad Keys](#Numeric_keypad_keys)
 
-<h2 id="Valeurs_spéciales">Valeurs spéciales</h2>
+## Valeurs spéciales
 
-<p>Les valeurs de <code>key</code> qui ont une signification particulière autre que l'identification d'une clé ou d'un caractère spécifique.</p>
+Les valeurs de `key` qui ont une signification particulière autre que l'identification d'une clé ou d'un caractère spécifique.
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th rowspan="2" scope="col"><code>KeyboardEvent.key</code> Valeur</th>
-   <th rowspan="2" scope="col">Description</th>
-   <th colspan="4" scope="col">Code clé virtuel</th>
-  </tr>
-  <tr>
-   <th scope="col">Windows</th>
-   <th scope="col">Mac</th>
-   <th scope="col">Linux</th>
-   <th scope="col">Android</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>"Unidentified"</code></td>
-   <td>L'agent utilisateur n'a pas été en mesure de faire correspondre le code virtuel de l'événement à une valeur clé spécifique. Cela peut être dû à des contraintes matérielles ou logicielles, ou à des contraintes liées à la plate-forme sur laquelle l'agent utilisateur fonctionne.</td>
-   <td><em>varie</em></td>
-   <td><em>varie</em></td>
-   <td><em>varie</em></td>
-   <td><em>varie</em></td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th rowspan="2" scope="col"><code>KeyboardEvent.key</code> Valeur</th>
+      <th rowspan="2" scope="col">Description</th>
+      <th colspan="4" scope="col">Code clé virtuel</th>
+    </tr>
+    <tr>
+      <th scope="col">Windows</th>
+      <th scope="col">Mac</th>
+      <th scope="col">Linux</th>
+      <th scope="col">Android</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>"Unidentified"</code></td>
+      <td>
+        L'agent utilisateur n'a pas été en mesure de faire correspondre le code
+        virtuel de l'événement à une valeur clé spécifique. Cela peut être dû à
+        des contraintes matérielles ou logicielles, ou à des contraintes liées à
+        la plate-forme sur laquelle l'agent utilisateur fonctionne.
+      </td>
+      <td><em>varie</em></td>
+      <td><em>varie</em></td>
+      <td><em>varie</em></td>
+      <td><em>varie</em></td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Modifier_keys">Modifier keys</h2>
+## Modifier keys
 
-<p>Modifiers are special keys which are used to generate special characters or cause special actions when used in combination with other keys. Examples include the <kbd>Shift</kbd> and <kbd>Control</kbd> keys, and lock keys such as <kbd>Caps Lock</kbd> and <kbd>NumLock</kbd>.</p>
+Modifiers are special keys which are used to generate special characters or cause special actions when used in combination with other keys. Examples include the <kbd>Shift</kbd> and <kbd>Control</kbd> keys, and lock keys such as <kbd>Caps Lock</kbd> and <kbd>NumLock</kbd>.
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th rowspan="2" scope="col"><code>KeyboardEvent.key</code> Value</th>
-   <th rowspan="2" scope="col">Description</th>
-   <th colspan="4" scope="col">Virtual Keycode</th>
-  </tr>
-  <tr>
-   <th scope="col">Windows</th>
-   <th scope="col">Mac</th>
-   <th scope="col">Linux</th>
-   <th scope="col">Android</th>
-  </tr>
-  <tr>
-   <td><code>"Alt"</code> [5]</td>
-   <td>The <kbd>Alt</kbd> (Alternative) key.</td>
-   <td><code>VK_MENU</code> (0x12)<br>
-    <code>VK_LMENU</code> (0xA4)<br>
-    <code>VK_RMENU</code> (0xA5)</td>
-   <td><code>kVK_Option</code> (0x3A)<br>
-    <code>kVK_RightOption</code> (0x3D)</td>
-   <td><code>GDK_KEY_Alt_L</code> (0xFFE9)<br>
-    <code>GDK_KEY_Alt_R</code> (0xFFEA)<br>
-    <code>Qt::Key_Alt</code> (0x01000023)</td>
-   <td><code>KEYCODE_ALT_LEFT</code> (57)<br>
-    <code>KEYCODE_ALT_RIGHT</code> (58)</td>
-  </tr>
-  <tr>
-   <td><code>"AltGraph"</code> [5]</td>
-   <td>The <kbd>AltGr</kbd> or <kbd>AltGraph</kbd> (Alternate Graphics) key. Enables the ISO Level 3 shift modifier (where <kbd>Shift</kbd> is the level 2 modifier).</td>
-   <td></td>
-   <td></td>
-   <td><code>GDK_KEY_Mode_switch</code> (0xFF7E)<br>
-    <code>GDK_KEY_ISO_Level3_Shift</code> (0xFE03)<br>
-    <code>GDK_KEY_ISO_Level3_Latch</code> (0xFE04)<br>
-    <code>GDK_KEY_ISO_Level3_Lock</code> (0xFE05)<br>
-    <code>GDK_KEY_ISO_Level5_Shift</code> (0xFE11)<br>
-    <code>GDK_KEY_ISO_Level5_Latch</code> (0xFE12)<br>
-    <code>GDK_KEY_ISO_Level5_Lock</code> (0xFE13)<br>
-    <code>Qt::Key_AltGr</code> (0x01001103<br>
-    <code>Qt::Key_Mode_switch</code> (0x0100117E)</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"CapsLock"</code></td>
-   <td>The <kbd>Caps Lock</kbd> key. Toggles the capital character lock on and off for subsequent input.</td>
-   <td><code>VK_CAPITAL</code> (0x14)</td>
-   <td><code>kVK_CapsLock</code> (0x39)</td>
-   <td><code>GDK_KEY_Caps_Lock</code> (0xFFE5)<br>
-    <code>Qt::Key_CapsLock</code> (0x01000024)</td>
-   <td><code>KEYCODE_CAPS_LOCK</code> (115)</td>
-  </tr>
-  <tr>
-   <td><code>"Control"</code></td>
-   <td>The <kbd>Control</kbd>, <kbd>Ctrl</kbd>, or <kbd>Ctl</kbd> key. Allows typing control characters.</td>
-   <td><code>VK_CONTROL</code> (0x11)<br>
-    <code>VK_LCONTROL</code> (0xA2)<br>
-    <code>VK_RCONTROL</code> (0xA3)</td>
-   <td><code>kVK_Control</code> (0x3B)<br>
-    <code>kVK_RightControl</code> (0x3E)</td>
-   <td><code>GDK_KEY_Control_L</code> (0xFFE3)<br>
-    <code>GDK_KEY_Control_R</code> (0xFFE4)<br>
-    <code>Qt::Key_Control</code> (0x01000021)</td>
-   <td><code>KEYCODE_CTRL_LEFT</code> (113)<br>
-    <code>KEYCODE_CTRL_RIGHT</code> (114)</td>
-  </tr>
-  <tr>
-   <td><code>"Fn"</code></td>
-   <td>The <kbd>Fn</kbd> (Function modifier) key. Used to allow generating function key (<kbd>F1</kbd>-<kbd>F15</kbd>, for instance) characters on keyboards without a dedicated function key area. Often handled in hardware so that events aren't generated for this key.</td>
-   <td></td>
-   <td><code>kVK_Function</code> (0x3F)</td>
-   <td></td>
-   <td><code>KEYCODE_FUNCTION</code> (119)</td>
-  </tr>
-  <tr>
-   <td><code>"FnLock"</code></td>
-   <td>The <kbd>FnLock</kbd> or <kbd>F-Lock</kbd> (Function Lock) key.Toggles the function key mode described by "Fn" on and off. Often handled in hardware so that events aren't generated for this key.</td>
-   <td></td>
-   <td></td>
-   <td></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"Hyper"</code> [4]</td>
-   <td>The <kbd>Hyper</kbd> key.</td>
-   <td></td>
-   <td></td>
-   <td><code>GDK_KEY_Hyper_L</code> (0xFFED)<br>
-    <code>GDK_KEY_Hyper_R</code> (0xFFEE)<br>
-    <code>Qt::Key_Hyper_L</code> (0x01000056)<br>
-    <code>Qt::Key_Hyper_R</code> (0x01000057)</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"Meta"</code> [1]</td>
-   <td>The <kbd>Meta</kbd> key. Allows issuing special command inputs. This is the <kbd>Windows</kbd> logo key, or the <kbd>Command</kbd> or <kbd>⌘</kbd> key on Mac keyboards.</td>
-   <td><code>VK_LWIN</code> (0x5B)<br>
-    <code>VK_RWIN</code> (0x5C)</td>
-   <td><code>kVK_Command</code> (0x37)<br>
-    <code>kVK_RightCommand</code> (0x36)</td>
-   <td><code>GDK_KEY_Meta_L</code> (0xFFE7)<br>
-    <code>GDK_KEY_Meta_R</code> (0xFFE8)<br>
-    <code>Qt::Key_Meta</code> (0x01000022)</td>
-   <td><code>KEYCODE_META_LEFT</code> (117)<br>
-    <code>KEYCODE_META_RIGHT</code> (118)</td>
-  </tr>
-  <tr>
-   <td><code>"NumLock"</code></td>
-   <td>The <kbd>NumLock</kbd> (Number Lock) key. Toggles the numeric keypad between number entry some other mode (often directional arrows).</td>
-   <td><code>VK_NUMLOCK</code> (0x90)</td>
-   <td></td>
-   <td><code>GDK_KEY_Num_Lock</code> (0xFF7F)<br>
-    <code>Qt::Key_NumLock</code> (0x01000025)</td>
-   <td><code>KEYCODE_NUM_LOCK</code> (143)</td>
-  </tr>
-  <tr>
-   <td><code>"ScrollLock"</code> [2]</td>
-   <td>The <kbd>Scroll Lock</kbd> key. Toggles beteen scrolling and cursor movement modes.</td>
-   <td><code>VK_SCROLL</code> (0x91)</td>
-   <td></td>
-   <td><code>GDK_KEY_Scroll_Lock</code> (0xFF14)<br>
-    <code>Qt::Key_ScrollLock</code> (0x01000026)</td>
-   <td><code>KEYCODE_SCROLL_LOCK</code> (116)</td>
-  </tr>
-  <tr>
-   <td><code>"Shift"</code></td>
-   <td>The <kbd>Shift</kbd> key. Modifies keystrokes to allow typing upper (or other) case letters, and to support typing punctuation and other special characters.</td>
-   <td><code>VK_SHIFT</code> (0x10)<br>
-    <code>VK_LSHIFT</code> (0xA0)<br>
-    <code>VK_RSHIFT</code> (0xA1)</td>
-   <td><code>kVK_Shift</code> (0x38)<br>
-    <code>kVK_RightShift</code> (0x3C)</td>
-   <td><code>GDK_KEY_Shift_L</code> (0xFFE1)<br>
-    <code>GDK_KEY_Shift_R</code> (0xFFE2)<br>
-    <code>Qt::Key_Shift</code> (0x01000020)</td>
-   <td><code>KEYCODE_SHIFT_LEFT</code> (59)<br>
-    <code>KEYCODE_SHIFT_RIGHT</code> (60)</td>
-  </tr>
-  <tr>
-   <td><code>"Super"</code> [4]</td>
-   <td>The <kbd>Super</kbd> key.</td>
-   <td></td>
-   <td></td>
-   <td><code>GDK_KEY_Super_L</code> (0xFFEB)<br>
-    <code>GDK_KEY_Super_R</code> (0xFFEC)<br>
-    <code>Qt::Key_Super_L</code> (0x01000053)<br>
-    <code>Qt::Key_Super_R</code> (0x01000054)</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"Symbol"</code></td>
-   <td>The <kbd>Symbol</kbd> modifier key (found on certain virtual keyboards).</td>
-   <td></td>
-   <td></td>
-   <td></td>
-   <td><code>KEYCODE_SYM</code> (63) [3]</td>
-  </tr>
-  <tr>
-   <td><code>"SymbolLock"</code></td>
-   <td>The <kbd>Symbol Lock</kbd> key.</td>
-   <td></td>
-   <td></td>
-   <td></td>
-   <td></td>
-  </tr>
- </thead>
+  <thead>
+    <tr>
+      <th rowspan="2" scope="col"><code>KeyboardEvent.key</code> Value</th>
+      <th rowspan="2" scope="col">Description</th>
+      <th colspan="4" scope="col">Virtual Keycode</th>
+    </tr>
+    <tr>
+      <th scope="col">Windows</th>
+      <th scope="col">Mac</th>
+      <th scope="col">Linux</th>
+      <th scope="col">Android</th>
+    </tr>
+    <tr>
+      <td><code>"Alt"</code> [5]</td>
+      <td>The <kbd>Alt</kbd> (Alternative) key.</td>
+      <td>
+        <code>VK_MENU</code> (0x12)<br /><code>VK_LMENU</code> (0xA4)<br /><code
+          >VK_RMENU</code
+        >
+        (0xA5)
+      </td>
+      <td>
+        <code>kVK_Option</code> (0x3A)<br /><code>kVK_RightOption</code> (0x3D)
+      </td>
+      <td>
+        <code>GDK_KEY_Alt_L</code> (0xFFE9)<br /><code>GDK_KEY_Alt_R</code>
+        (0xFFEA)<br /><code>Qt::Key_Alt</code> (0x01000023)
+      </td>
+      <td>
+        <code>KEYCODE_ALT_LEFT</code> (57)<br /><code>KEYCODE_ALT_RIGHT</code>
+        (58)
+      </td>
+    </tr>
+    <tr>
+      <td><code>"AltGraph"</code> [5]</td>
+      <td>
+        The <kbd>AltGr</kbd> or <kbd>AltGraph</kbd> (Alternate Graphics) key.
+        Enables the ISO Level 3 shift modifier (where <kbd>Shift</kbd> is the
+        level 2 modifier).
+      </td>
+      <td></td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_Mode_switch</code> (0xFF7E)<br /><code
+          >GDK_KEY_ISO_Level3_Shift</code
+        >
+        (0xFE03)<br /><code>GDK_KEY_ISO_Level3_Latch</code> (0xFE04)<br /><code
+          >GDK_KEY_ISO_Level3_Lock</code
+        >
+        (0xFE05)<br /><code>GDK_KEY_ISO_Level5_Shift</code> (0xFE11)<br /><code
+          >GDK_KEY_ISO_Level5_Latch</code
+        >
+        (0xFE12)<br /><code>GDK_KEY_ISO_Level5_Lock</code> (0xFE13)<br /><code
+          >Qt::Key_AltGr</code
+        >
+        (0x01001103<br /><code>Qt::Key_Mode_switch</code> (0x0100117E)
+      </td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"CapsLock"</code></td>
+      <td>
+        The <kbd>Caps Lock</kbd> key. Toggles the capital character lock on and
+        off for subsequent input.
+      </td>
+      <td><code>VK_CAPITAL</code> (0x14)</td>
+      <td><code>kVK_CapsLock</code> (0x39)</td>
+      <td>
+        <code>GDK_KEY_Caps_Lock</code> (0xFFE5)<br /><code
+          >Qt::Key_CapsLock</code
+        >
+        (0x01000024)
+      </td>
+      <td><code>KEYCODE_CAPS_LOCK</code> (115)</td>
+    </tr>
+    <tr>
+      <td><code>"Control"</code></td>
+      <td>
+        The <kbd>Control</kbd>, <kbd>Ctrl</kbd>, or <kbd>Ctl</kbd> key. Allows
+        typing control characters.
+      </td>
+      <td>
+        <code>VK_CONTROL</code> (0x11)<br /><code>VK_LCONTROL</code>
+        (0xA2)<br /><code>VK_RCONTROL</code> (0xA3)
+      </td>
+      <td>
+        <code>kVK_Control</code> (0x3B)<br /><code>kVK_RightControl</code>
+        (0x3E)
+      </td>
+      <td>
+        <code>GDK_KEY_Control_L</code> (0xFFE3)<br /><code
+          >GDK_KEY_Control_R</code
+        >
+        (0xFFE4)<br /><code>Qt::Key_Control</code> (0x01000021)
+      </td>
+      <td>
+        <code>KEYCODE_CTRL_LEFT</code> (113)<br /><code
+          >KEYCODE_CTRL_RIGHT</code
+        >
+        (114)
+      </td>
+    </tr>
+    <tr>
+      <td><code>"Fn"</code></td>
+      <td>
+        The <kbd>Fn</kbd> (Function modifier) key. Used to allow generating
+        function key (<kbd>F1</kbd>-<kbd>F15</kbd>, for instance) characters on
+        keyboards without a dedicated function key area. Often handled in
+        hardware so that events aren't generated for this key.
+      </td>
+      <td></td>
+      <td><code>kVK_Function</code> (0x3F)</td>
+      <td></td>
+      <td><code>KEYCODE_FUNCTION</code> (119)</td>
+    </tr>
+    <tr>
+      <td><code>"FnLock"</code></td>
+      <td>
+        The <kbd>FnLock</kbd> or <kbd>F-Lock</kbd> (Function Lock) key.Toggles
+        the function key mode described by "Fn" on and off. Often handled in
+        hardware so that events aren't generated for this key.
+      </td>
+      <td></td>
+      <td></td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"Hyper"</code> [4]</td>
+      <td>The <kbd>Hyper</kbd> key.</td>
+      <td></td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_Hyper_L</code> (0xFFED)<br /><code>GDK_KEY_Hyper_R</code>
+        (0xFFEE)<br /><code>Qt::Key_Hyper_L</code> (0x01000056)<br /><code
+          >Qt::Key_Hyper_R</code
+        >
+        (0x01000057)
+      </td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"Meta"</code> [1]</td>
+      <td>
+        The <kbd>Meta</kbd> key. Allows issuing special command inputs. This is
+        the <kbd>Windows</kbd> logo key, or the <kbd>Command</kbd> or
+        <kbd>⌘</kbd> key on Mac keyboards.
+      </td>
+      <td><code>VK_LWIN</code> (0x5B)<br /><code>VK_RWIN</code> (0x5C)</td>
+      <td>
+        <code>kVK_Command</code> (0x37)<br /><code>kVK_RightCommand</code>
+        (0x36)
+      </td>
+      <td>
+        <code>GDK_KEY_Meta_L</code> (0xFFE7)<br /><code>GDK_KEY_Meta_R</code>
+        (0xFFE8)<br /><code>Qt::Key_Meta</code> (0x01000022)
+      </td>
+      <td>
+        <code>KEYCODE_META_LEFT</code> (117)<br /><code
+          >KEYCODE_META_RIGHT</code
+        >
+        (118)
+      </td>
+    </tr>
+    <tr>
+      <td><code>"NumLock"</code></td>
+      <td>
+        The <kbd>NumLock</kbd> (Number Lock) key. Toggles the numeric keypad
+        between number entry some other mode (often directional arrows).
+      </td>
+      <td><code>VK_NUMLOCK</code> (0x90)</td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_Num_Lock</code> (0xFF7F)<br /><code>Qt::Key_NumLock</code>
+        (0x01000025)
+      </td>
+      <td><code>KEYCODE_NUM_LOCK</code> (143)</td>
+    </tr>
+    <tr>
+      <td><code>"ScrollLock"</code> [2]</td>
+      <td>
+        The <kbd>Scroll Lock</kbd> key. Toggles beteen scrolling and cursor
+        movement modes.
+      </td>
+      <td><code>VK_SCROLL</code> (0x91)</td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_Scroll_Lock</code> (0xFF14)<br /><code
+          >Qt::Key_ScrollLock</code
+        >
+        (0x01000026)
+      </td>
+      <td><code>KEYCODE_SCROLL_LOCK</code> (116)</td>
+    </tr>
+    <tr>
+      <td><code>"Shift"</code></td>
+      <td>
+        The <kbd>Shift</kbd> key. Modifies keystrokes to allow typing upper (or
+        other) case letters, and to support typing punctuation and other special
+        characters.
+      </td>
+      <td>
+        <code>VK_SHIFT</code> (0x10)<br /><code>VK_LSHIFT</code>
+        (0xA0)<br /><code>VK_RSHIFT</code> (0xA1)
+      </td>
+      <td>
+        <code>kVK_Shift</code> (0x38)<br /><code>kVK_RightShift</code> (0x3C)
+      </td>
+      <td>
+        <code>GDK_KEY_Shift_L</code> (0xFFE1)<br /><code>GDK_KEY_Shift_R</code>
+        (0xFFE2)<br /><code>Qt::Key_Shift</code> (0x01000020)
+      </td>
+      <td>
+        <code>KEYCODE_SHIFT_LEFT</code> (59)<br /><code
+          >KEYCODE_SHIFT_RIGHT</code
+        >
+        (60)
+      </td>
+    </tr>
+    <tr>
+      <td><code>"Super"</code> [4]</td>
+      <td>The <kbd>Super</kbd> key.</td>
+      <td></td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_Super_L</code> (0xFFEB)<br /><code>GDK_KEY_Super_R</code>
+        (0xFFEC)<br /><code>Qt::Key_Super_L</code> (0x01000053)<br /><code
+          >Qt::Key_Super_R</code
+        >
+        (0x01000054)
+      </td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"Symbol"</code></td>
+      <td>
+        The <kbd>Symbol</kbd> modifier key (found on certain virtual keyboards).
+      </td>
+      <td></td>
+      <td></td>
+      <td></td>
+      <td><code>KEYCODE_SYM</code> (63) [3]</td>
+    </tr>
+    <tr>
+      <td><code>"SymbolLock"</code></td>
+      <td>The <kbd>Symbol Lock</kbd> key.</td>
+      <td></td>
+      <td></td>
+      <td></td>
+      <td></td>
+    </tr>
+  </thead>
 </table>
 
-<p>[1] In Internet Explorer (tested on release 9 and 11), as well as in all versions of Firefox, the <kbd>Windows</kbd> key is reported as <code>"OS"</code> instead of as <code>"Meta"</code>. This will be changed in Firefox per {{bug(1232918)}}. Until that's fixed, these keys are returned as <code>"OS"</code> by Firefox: <code>VK_LWIN</code> (0x5B) and <code>VK_RWIN</code> (0x5C) on Windows, and <code><code>GDK_KEY_Super_L</code> (0xFFEB)</code>, <code><code>GDK_KEY_Super_R</code> (0xFFEC)</code>, <code><code>GDK_KEY_Hyper_L</code> (0xFFED)</code>, and <code><code>GDK_KEY_Hyper_R</code> (0xFFEE)</code> on Linux.</p>
+\[1] In Internet Explorer (tested on release 9 and 11), as well as in all versions of Firefox, the <kbd>Windows</kbd> key is reported as `"OS"` instead of as `"Meta"`. This will be changed in Firefox per {{bug(1232918)}}. Until that's fixed, these keys are returned as `"OS"` by Firefox: `VK_LWIN` (0x5B) and `VK_RWIN` (0x5C) on Windows, and `GDK_KEY_Super_L (0xFFEB)`, `GDK_KEY_Super_R (0xFFEC)`, `GDK_KEY_Hyper_L (0xFFED)`, and `GDK_KEY_Hyper_R (0xFFEE)` on Linux.
 
-<p>[2] Internet Explorer (tested on release 9 and 11) reports <code>"Scroll"</code> instead of <code>"ScrollLock"</code> for the <kbd>Scroll Lock</kbd> key.</p>
+\[2] Internet Explorer (tested on release 9 and 11) reports `"Scroll"` instead of `"ScrollLock"` for the <kbd>Scroll Lock</kbd> key.
 
-<p>[3] Firefox did not add support for the <kbd>Symbol</kbd> key until Firefox 37.</p>
+\[3] Firefox did not add support for the <kbd>Symbol</kbd> key until Firefox 37.
 
-<p>[4] Firefox generates the key value <code>"OS</code>" for the <kbd>Super</kbd> and <kbd>Hyper</kbd> keys, instead of <code>"Super"</code> and <code>"Hyper"</code>.</p>
+\[4] Firefox generates the key value `"OS`" for the <kbd>Super</kbd> and <kbd>Hyper</kbd> keys, instead of `"Super"` and `"Hyper"`.
 
-<p>[5] Chrome 67 and Firefox 63 now correctly interpret the right <kbd>Alt</kbd> key for keyboard layouts which map that key to <kbd>AltGr</kbd>. See Firefox bug {{bug(900750)}} and <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=25503">Chrome bug 25503</a> for further details.</p>
+\[5] Chrome 67 and Firefox 63 now correctly interpret the right <kbd>Alt</kbd> key for keyboard layouts which map that key to <kbd>AltGr</kbd>. See Firefox bug {{bug(900750)}} and [Chrome bug 25503](https://bugs.chromium.org/p/chromium/issues/detail?id=25503) for further details.
 
-<h2 id="Whitespace_keys">Whitespace keys</h2>
+## Whitespace keys
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th rowspan="2" scope="col"><code>KeyboardEvent.key</code> Value</th>
-   <th rowspan="2" scope="col">Description</th>
-   <th colspan="4" scope="col">Virtual Keycode</th>
-  </tr>
-  <tr>
-   <th scope="col">Windows</th>
-   <th scope="col">Mac</th>
-   <th scope="col">Linux</th>
-   <th scope="col">Android</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>"Enter"</code></td>
-   <td>The <kbd>Enter</kbd> or <kbd>↵</kbd> key (sometimes labeled <kbd>Return</kbd>).</td>
-   <td><code>VK_RETURN</code> (0x0D)</td>
-   <td><code>kVK_Return</code> (0x24)<br>
-    <code>kVK_ANSI_KeypadEnter</code> (0x4C)<br>
-    <code>kVK_Powerbook_KeypadEnter</code> (0x34)</td>
-   <td><code><code>GDK_KEY_Return</code> (0xFF0D)</code><br>
-    <code><code>GDK_KEY_KP_Enter</code> (0xFF8D)</code><br>
-    <code><code>GDK_KEY_ISO_Enter</code> (0xFE34)</code><br>
-    <code><code>GDK_KEY_3270_Enter</code> (0xFD1E)</code><br>
-    <code>Qt::Key_Return</code> (0x01000004)<br>
-    <code>Qt::Key_Enter</code> (0x01000005)</td>
-   <td><code>KEYCODE_ENTER</code> (66)<br>
-    <code>KEYCODE_NUMPAD_ENTER</code> (160)<br>
-    <code>KEYCODE_DPAD_CENTER</code> (23)</td>
-  </tr>
-  <tr>
-   <td><code>"Tab"</code></td>
-   <td>The Horizontal Tab key, <kbd>Tab</kbd>.</td>
-   <td><code>VK_TAB</code> (0x09)</td>
-   <td><code>kVK_Tab</code> (0x30)</td>
-   <td><code><code>GDK_KEY_Tab</code> (0xFF09)</code><br>
-    <code><code>GDK_KEY_KP_Tab</code> (0xFF89)<br>
-    GDK_KEY_ISO_Left_Tab</code> (0xFE20)<br>
-    <code>Qt::Key_Tab</code> (0x01000001)</td>
-   <td><code>KEYCODE_TAB</code> (61)</td>
-  </tr>
-  <tr>
-   <td><code>" "</code> [1]</td>
-   <td>The space key, <kbd>Space Bar</kbd>.</td>
-   <td><code>VK_SPACE</code> (0x20)</td>
-   <td><code>kVK_Space</code> (0x31)</td>
-   <td>
-    <p><code>GDK_KEY_space</code> (0x20)<br>
-     <code>GDK_KEY_KP_Space</code> (0xFF80)<br>
-     <code>Qt::Key_Space</code> (0x20)</p>
-   </td>
-   <td><code>KEYCODE_SPACE</code> (62)</td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th rowspan="2" scope="col"><code>KeyboardEvent.key</code> Value</th>
+      <th rowspan="2" scope="col">Description</th>
+      <th colspan="4" scope="col">Virtual Keycode</th>
+    </tr>
+    <tr>
+      <th scope="col">Windows</th>
+      <th scope="col">Mac</th>
+      <th scope="col">Linux</th>
+      <th scope="col">Android</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>"Enter"</code></td>
+      <td>
+        The <kbd>Enter</kbd> or <kbd>↵</kbd> key (sometimes labeled
+        <kbd>Return</kbd>).
+      </td>
+      <td><code>VK_RETURN</code> (0x0D)</td>
+      <td>
+        <code>kVK_Return</code> (0x24)<br /><code>kVK_ANSI_KeypadEnter</code>
+        (0x4C)<br /><code>kVK_Powerbook_KeypadEnter</code> (0x34)
+      </td>
+      <td>
+        <code><code>GDK_KEY_Return</code> (0xFF0D)</code><br /><code
+          ><code>GDK_KEY_KP_Enter</code> (0xFF8D)</code
+        ><br /><code><code>GDK_KEY_ISO_Enter</code> (0xFE34)</code><br /><code
+          ><code>GDK_KEY_3270_Enter</code> (0xFD1E)</code
+        ><br /><code>Qt::Key_Return</code> (0x01000004)<br /><code
+          >Qt::Key_Enter</code
+        >
+        (0x01000005)
+      </td>
+      <td>
+        <code>KEYCODE_ENTER</code> (66)<br /><code>KEYCODE_NUMPAD_ENTER</code>
+        (160)<br /><code>KEYCODE_DPAD_CENTER</code> (23)
+      </td>
+    </tr>
+    <tr>
+      <td><code>"Tab"</code></td>
+      <td>The Horizontal Tab key, <kbd>Tab</kbd>.</td>
+      <td><code>VK_TAB</code> (0x09)</td>
+      <td><code>kVK_Tab</code> (0x30)</td>
+      <td>
+        <code><code>GDK_KEY_Tab</code> (0xFF09)</code><br /><code
+          ><code>GDK_KEY_KP_Tab</code> (0xFF89)<br />GDK_KEY_ISO_Left_Tab</code
+        >
+        (0xFE20)<br /><code>Qt::Key_Tab</code> (0x01000001)
+      </td>
+      <td><code>KEYCODE_TAB</code> (61)</td>
+    </tr>
+    <tr>
+      <td><code>" "</code> [1]</td>
+      <td>The space key, <kbd>Space Bar</kbd>.</td>
+      <td><code>VK_SPACE</code> (0x20)</td>
+      <td><code>kVK_Space</code> (0x31)</td>
+      <td>
+        <p>
+          <code>GDK_KEY_space</code> (0x20)<br /><code>GDK_KEY_KP_Space</code>
+          (0xFF80)<br /><code>Qt::Key_Space</code> (0x20)
+        </p>
+      </td>
+      <td><code>KEYCODE_SPACE</code> (62)</td>
+    </tr>
+  </tbody>
 </table>
 
-<p>[1] Older browsers may return "Spacebar" instead of " " for the <kbd>Space Bar</kbd> key. Firefox did so until version 37, as did Internet Explorer 9, 10, and 11.</p>
+\[1] Older browsers may return "Spacebar" instead of " " for the <kbd>Space Bar</kbd> key. Firefox did so until version 37, as did Internet Explorer 9, 10, and 11.
 
-<h2 id="Navigation_keys">Navigation keys</h2>
+## Navigation keys
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th rowspan="2" scope="col"><code>KeyboardEvent.key</code> Value</th>
-   <th rowspan="2" scope="col">Description</th>
-   <th colspan="4" scope="col">Virtual Keycode</th>
-  </tr>
-  <tr>
-   <th scope="col">Windows</th>
-   <th scope="col">Mac</th>
-   <th scope="col">Linux</th>
-   <th scope="col">Android</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>"ArrowDown"</code> [1]</td>
-   <td>The down arrow key.</td>
-   <td><code>VK_DOWN</code> (0x28)</td>
-   <td><code>kVK_DownArrow</code> (0x7D)</td>
-   <td><code>GDK_KEY_Down</code> (0xFF54)<br>
-    <code>GDK_KEY_KP_Down</code> (0xFF99)<br>
-    <code>Qt::Key_Down</code> (0x01000015)</td>
-   <td><code>KEYCODE_DPAD_DOWN</code> (20)</td>
-  </tr>
-  <tr>
-   <td><code>"ArrowLeft"</code> [1]</td>
-   <td>The left arrow key.</td>
-   <td><code>VK_LEFT</code> (0x25)</td>
-   <td><code>kVK_LeftArrow</code> (0x7B)</td>
-   <td><code>GDK_KEY_Left</code> (0xFF51)<br>
-    <code>GDK_KEY_KP_Left</code> (0xFF96)<br>
-    <code>Qt::Key_Left</code> (0x01000012)</td>
-   <td><code>KEYCODE_DPAD_LEFT</code> (21)</td>
-  </tr>
-  <tr>
-   <td><code>"ArrowRight"</code> [1]</td>
-   <td>The right arrow key.</td>
-   <td><code>VK_RIGHT</code> (0x27)</td>
-   <td><code>kVK_RightArrow</code> (0x7C)</td>
-   <td><code>GDK_KEY_Right</code> (0xFF53)<br>
-    <code>GDK_KEY_KP_Right</code> (0xFF98)<br>
-    <code>Qt::Key_Right</code> (0x01000014)</td>
-   <td><code>KEYCODE_DPAD_RIGHT</code> (22)</td>
-  </tr>
-  <tr>
-   <td><code>"ArrowUp"</code> [1]</td>
-   <td>The up arrow key.</td>
-   <td><code>VK_UP</code><code> (0x26)</code></td>
-   <td><code>kVK_UpArrow</code> (0x7E)</td>
-   <td><code>GDK_KEY_Up</code> (0xFF52)<br>
-    <code>GDK_KEY_KP_Up</code> (0xFF97)<br>
-    <code>Qt::Key_Up</code> (0x01000013)</td>
-   <td><code>KEYCODE_DPAD_UP</code> (19)</td>
-  </tr>
-  <tr>
-   <td><code>"End"</code></td>
-   <td>The <kbd>End</kbd> key. Moves to the end of content.</td>
-   <td><code>VK_END</code> (0x23)</td>
-   <td><code>kVK_End</code> (0x77)</td>
-   <td><code>GDK_KEY_End</code> (0xFF57)<br>
-    <code>GDK_KEY_KP_End</code> (0xFF9C)<br>
-    <code>Qt::Key_End</code> (0x01000011)</td>
-   <td><code>KEYCODE_MOVE_END</code> (123)</td>
-  </tr>
-  <tr>
-   <td><code>"Home"</code></td>
-   <td>The <kbd>Home</kbd> key. Moves to the start of content.</td>
-   <td><code>VK_HOME</code> (0x24)</td>
-   <td><code>kVK_Home</code> (0x73)</td>
-   <td><code>GDK_KEY_Home</code> (0xFF50)<br>
-    <code>GDK_KEY_KP_Home</code> (0xFF95)<br>
-    <code>Qt::Key_Home</code> (0x01000010)</td>
-   <td><code>KEYCODE_MOVE_HOME</code> (122)</td>
-  </tr>
-  <tr>
-   <td><code>"PageDown"</code></td>
-   <td>The <kbd>Page Down</kbd> (or <kbd>PgDn</kbd>) key. Scrolls down or displays the next page of content.</td>
-   <td><code>VK_NEXT</code> (0x22)</td>
-   <td><code>kVK_PageDown</code><code> (0x79)</code></td>
-   <td><code>GDK_KEY_Page_Down</code> (0xFF56)<br>
-    <code>GDK_KEY_KP_Page_Down</code> (0xFF9B)<br>
-    <code>Qt::Key_PageDown</code> (0x01000017)</td>
-   <td><code>KEYCODE_PAGE_DOWN</code> (93)</td>
-  </tr>
-  <tr>
-   <td><code>"PageUp"</code></td>
-   <td>The <kbd>Page Up</kbd> (or <kbd>PgUp</kbd>) key. Scrolls up or displays the previous page of content.</td>
-   <td><code>VK_PRIOR</code> (0x21)</td>
-   <td><code>kVK_PageUp</code> (0x74)</td>
-   <td><code>GDK_KEY_Page_Up</code> (0xFF55)<br>
-    <code>GDK_KEY_KP_Page_Up</code> (0xFF9A)<br>
-    <code>Qt::Key_PageUp</code> (0x01000016)</td>
-   <td><code>KEYCODE_PAGE_UP</code> (92)</td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th rowspan="2" scope="col"><code>KeyboardEvent.key</code> Value</th>
+      <th rowspan="2" scope="col">Description</th>
+      <th colspan="4" scope="col">Virtual Keycode</th>
+    </tr>
+    <tr>
+      <th scope="col">Windows</th>
+      <th scope="col">Mac</th>
+      <th scope="col">Linux</th>
+      <th scope="col">Android</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>"ArrowDown"</code> [1]</td>
+      <td>The down arrow key.</td>
+      <td><code>VK_DOWN</code> (0x28)</td>
+      <td><code>kVK_DownArrow</code> (0x7D)</td>
+      <td>
+        <code>GDK_KEY_Down</code> (0xFF54)<br /><code>GDK_KEY_KP_Down</code>
+        (0xFF99)<br /><code>Qt::Key_Down</code> (0x01000015)
+      </td>
+      <td><code>KEYCODE_DPAD_DOWN</code> (20)</td>
+    </tr>
+    <tr>
+      <td><code>"ArrowLeft"</code> [1]</td>
+      <td>The left arrow key.</td>
+      <td><code>VK_LEFT</code> (0x25)</td>
+      <td><code>kVK_LeftArrow</code> (0x7B)</td>
+      <td>
+        <code>GDK_KEY_Left</code> (0xFF51)<br /><code>GDK_KEY_KP_Left</code>
+        (0xFF96)<br /><code>Qt::Key_Left</code> (0x01000012)
+      </td>
+      <td><code>KEYCODE_DPAD_LEFT</code> (21)</td>
+    </tr>
+    <tr>
+      <td><code>"ArrowRight"</code> [1]</td>
+      <td>The right arrow key.</td>
+      <td><code>VK_RIGHT</code> (0x27)</td>
+      <td><code>kVK_RightArrow</code> (0x7C)</td>
+      <td>
+        <code>GDK_KEY_Right</code> (0xFF53)<br /><code>GDK_KEY_KP_Right</code>
+        (0xFF98)<br /><code>Qt::Key_Right</code> (0x01000014)
+      </td>
+      <td><code>KEYCODE_DPAD_RIGHT</code> (22)</td>
+    </tr>
+    <tr>
+      <td><code>"ArrowUp"</code> [1]</td>
+      <td>The up arrow key.</td>
+      <td><code>VK_UP</code><code> (0x26)</code></td>
+      <td><code>kVK_UpArrow</code> (0x7E)</td>
+      <td>
+        <code>GDK_KEY_Up</code> (0xFF52)<br /><code>GDK_KEY_KP_Up</code>
+        (0xFF97)<br /><code>Qt::Key_Up</code> (0x01000013)
+      </td>
+      <td><code>KEYCODE_DPAD_UP</code> (19)</td>
+    </tr>
+    <tr>
+      <td><code>"End"</code></td>
+      <td>The <kbd>End</kbd> key. Moves to the end of content.</td>
+      <td><code>VK_END</code> (0x23)</td>
+      <td><code>kVK_End</code> (0x77)</td>
+      <td>
+        <code>GDK_KEY_End</code> (0xFF57)<br /><code>GDK_KEY_KP_End</code>
+        (0xFF9C)<br /><code>Qt::Key_End</code> (0x01000011)
+      </td>
+      <td><code>KEYCODE_MOVE_END</code> (123)</td>
+    </tr>
+    <tr>
+      <td><code>"Home"</code></td>
+      <td>The <kbd>Home</kbd> key. Moves to the start of content.</td>
+      <td><code>VK_HOME</code> (0x24)</td>
+      <td><code>kVK_Home</code> (0x73)</td>
+      <td>
+        <code>GDK_KEY_Home</code> (0xFF50)<br /><code>GDK_KEY_KP_Home</code>
+        (0xFF95)<br /><code>Qt::Key_Home</code> (0x01000010)
+      </td>
+      <td><code>KEYCODE_MOVE_HOME</code> (122)</td>
+    </tr>
+    <tr>
+      <td><code>"PageDown"</code></td>
+      <td>
+        The <kbd>Page Down</kbd> (or <kbd>PgDn</kbd>) key. Scrolls down or
+        displays the next page of content.
+      </td>
+      <td><code>VK_NEXT</code> (0x22)</td>
+      <td><code>kVK_PageDown</code><code> (0x79)</code></td>
+      <td>
+        <code>GDK_KEY_Page_Down</code> (0xFF56)<br /><code
+          >GDK_KEY_KP_Page_Down</code
+        >
+        (0xFF9B)<br /><code>Qt::Key_PageDown</code> (0x01000017)
+      </td>
+      <td><code>KEYCODE_PAGE_DOWN</code> (93)</td>
+    </tr>
+    <tr>
+      <td><code>"PageUp"</code></td>
+      <td>
+        The <kbd>Page Up</kbd> (or <kbd>PgUp</kbd>) key. Scrolls up or displays
+        the previous page of content.
+      </td>
+      <td><code>VK_PRIOR</code> (0x21)</td>
+      <td><code>kVK_PageUp</code> (0x74)</td>
+      <td>
+        <code>GDK_KEY_Page_Up</code> (0xFF55)<br /><code
+          >GDK_KEY_KP_Page_Up</code
+        >
+        (0xFF9A)<br /><code>Qt::Key_PageUp</code> (0x01000016)
+      </td>
+      <td><code>KEYCODE_PAGE_UP</code> (92)</td>
+    </tr>
+  </tbody>
 </table>
 
-<p>[1] Internet Explorer, Edge (16 and earlier), and Firefox (36 and earlier) use "Left", "Right", "Up", and "Down" instead of "ArrowLeft", "ArrowRight", "ArrowUp", and "ArrowDown".</p>
+\[1] Internet Explorer, Edge (16 and earlier), and Firefox (36 and earlier) use "Left", "Right", "Up", and "Down" instead of "ArrowLeft", "ArrowRight", "ArrowUp", and "ArrowDown".
 
-<h2 id="Editing_keys">Editing keys</h2>
+## Editing keys
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th rowspan="2" scope="col"><code>KeyboardEvent.key</code> Value</th>
-   <th rowspan="2" scope="col">Description</th>
-   <th colspan="4" scope="col">Virtual Keycode</th>
-  </tr>
-  <tr>
-   <th scope="col">Windows</th>
-   <th scope="col">Mac</th>
-   <th scope="col">Linux</th>
-   <th scope="col">Android</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>"Backspace"</code></td>
-   <td>The <kbd>Backspace</kbd> key. This key is labeled <kbd>Delete</kbd> on Mac keyboards.</td>
-   <td><code>VK_BACK</code> (0x08)</td>
-   <td><code>kVK_Delete</code> (0x33)</td>
-   <td><code>GDK_KEY_BackSpace</code> (0xFF08)<br>
-    <code>Qt::Key_Backspace</code> (0x01000003)</td>
-   <td><code>KEYCODE_DEL</code> (67)</td>
-  </tr>
-  <tr>
-   <td><code>"Clear"</code></td>
-   <td>The <kbd>Clear</kbd> key. Removes the currently selected input.</td>
-   <td><code>VK_CLEAR</code> (0x0C)<br>
-    <code>VK_OEM_CLEAR</code> (0xFE)</td>
-   <td><code>kVK_ANSI_KeypadClear</code> (0x47)</td>
-   <td><code>GDK_KEY_Clear</code> (0xFF0B)<br>
-    <code>Qt::Key_Clear</code> (0x0100000B)</td>
-   <td><code>KEYCODE_CLEAR</code> (28)</td>
-  </tr>
-  <tr>
-   <td><code>"Copy"</code></td>
-   <td>The <kbd>Copy</kbd> key (on certain extended keyboards).</td>
-   <td><code>APPCOMMAND_COPY</code></td>
-   <td></td>
-   <td><code>GDK_KEY_Copy</code> (0x1008FF57)<br>
-    <code>Qt::Key_Copy</code> (0x010000CF)</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"CrSel"</code> [3]</td>
-   <td>The Cursor Select key, <kbd>CrSel</kbd>.</td>
-   <td><code>VK_CRSEL</code> (0xF7)</td>
-   <td></td>
-   <td><code>GDK_KEY_3270_CursorSelect</code> (0xFD1C)</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"Cut"</code></td>
-   <td>The <kbd>Cut</kbd> key (on certain extended keyboards).</td>
-   <td><code>APPCOMMAND_CUT</code></td>
-   <td></td>
-   <td><code>GDK_KEY_Cut</code> (0x1008FF58)<br>
-    <code>Qt::Key_Cut</code> (0x010000D0)</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"Delete"</code> [2]</td>
-   <td>The Delete key, <kbd>Del</kbd>.</td>
-   <td><code>VK_DELETE</code> (0x2E)</td>
-   <td><code>kVK_ForwardDelete</code> (0x75) [1]</td>
-   <td><code>GDK_KEY_Delete</code> (0xFFFF)<br>
-    <code>GDK_KEY_KP_Delete</code> (0xFF9F)<br>
-    <code>Qt::Key_Delete</code> (0x01000007)</td>
-   <td><code>KEYCODE_FORWARD_DEL</code> (112)</td>
-  </tr>
-  <tr>
-   <td><code>"EraseEof"</code></td>
-   <td>Erase to End of Field. Deletes all characters from the current cursor position to the end of the current field.</td>
-   <td><code>VK_EREOF</code> (0xF9)</td>
-   <td></td>
-   <td><code>GDK_KEY_3270_ExSelect</code> (0xFD1B)</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"ExSel"</code> [4]</td>
-   <td>The <kbd>ExSel</kbd> (Extend Selection) key.</td>
-   <td><code>VK_EXSEL</code> (0xF8)</td>
-   <td></td>
-   <td><code>GDK_KEY_3270_ExSelect</code> (0xFD1B)</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"Insert"</code></td>
-   <td>The Insert key, <kbd>Ins</kbd>. Toggles  between inserting and overwriting text.</td>
-   <td><code>VK_INSERT</code> (0x2D)</td>
-   <td></td>
-   <td><code>GDK_KEY_Insert</code> (0xFF63)<br>
-    <code>GDK_KEY_KP_Insert</code> (0xFF9E)<br>
-    <code>Qt::Key_Insert</code> (0x01000006)</td>
-   <td><code>KEYCODE_INSERT</code> (124)</td>
-  </tr>
-  <tr>
-   <td><code>"Paste"</code></td>
-   <td>Paste from the clipboard.</td>
-   <td><code>APPCOMMAND_PASTE</code></td>
-   <td></td>
-   <td><code>GDK_KEY_Paste</code> (0x1008FF6D)<br>
-    <code>Qt::Key_Paste</code> (0x010000E2)</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"Redo"</code></td>
-   <td>Redo the last action.</td>
-   <td><code>APPCOMMAND_REDO</code></td>
-   <td></td>
-   <td><code>GDK_KEY_Redo</code> (0xFF66)</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"Undo"</code></td>
-   <td>Undo the last action.</td>
-   <td><code>APPCOMMAND_UNDO</code></td>
-   <td></td>
-   <td><code>GDK_KEY_Undo</code> (0xFF65)</td>
-   <td></td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th rowspan="2" scope="col"><code>KeyboardEvent.key</code> Value</th>
+      <th rowspan="2" scope="col">Description</th>
+      <th colspan="4" scope="col">Virtual Keycode</th>
+    </tr>
+    <tr>
+      <th scope="col">Windows</th>
+      <th scope="col">Mac</th>
+      <th scope="col">Linux</th>
+      <th scope="col">Android</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>"Backspace"</code></td>
+      <td>
+        The <kbd>Backspace</kbd> key. This key is labeled <kbd>Delete</kbd> on
+        Mac keyboards.
+      </td>
+      <td><code>VK_BACK</code> (0x08)</td>
+      <td><code>kVK_Delete</code> (0x33)</td>
+      <td>
+        <code>GDK_KEY_BackSpace</code> (0xFF08)<br /><code
+          >Qt::Key_Backspace</code
+        >
+        (0x01000003)
+      </td>
+      <td><code>KEYCODE_DEL</code> (67)</td>
+    </tr>
+    <tr>
+      <td><code>"Clear"</code></td>
+      <td>The <kbd>Clear</kbd> key. Removes the currently selected input.</td>
+      <td>
+        <code>VK_CLEAR</code> (0x0C)<br /><code>VK_OEM_CLEAR</code> (0xFE)
+      </td>
+      <td><code>kVK_ANSI_KeypadClear</code> (0x47)</td>
+      <td>
+        <code>GDK_KEY_Clear</code> (0xFF0B)<br /><code>Qt::Key_Clear</code>
+        (0x0100000B)
+      </td>
+      <td><code>KEYCODE_CLEAR</code> (28)</td>
+    </tr>
+    <tr>
+      <td><code>"Copy"</code></td>
+      <td>The <kbd>Copy</kbd> key (on certain extended keyboards).</td>
+      <td><code>APPCOMMAND_COPY</code></td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_Copy</code> (0x1008FF57)<br /><code>Qt::Key_Copy</code>
+        (0x010000CF)
+      </td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"CrSel"</code> [3]</td>
+      <td>The Cursor Select key, <kbd>CrSel</kbd>.</td>
+      <td><code>VK_CRSEL</code> (0xF7)</td>
+      <td></td>
+      <td><code>GDK_KEY_3270_CursorSelect</code> (0xFD1C)</td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"Cut"</code></td>
+      <td>The <kbd>Cut</kbd> key (on certain extended keyboards).</td>
+      <td><code>APPCOMMAND_CUT</code></td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_Cut</code> (0x1008FF58)<br /><code>Qt::Key_Cut</code>
+        (0x010000D0)
+      </td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"Delete"</code> [2]</td>
+      <td>The Delete key, <kbd>Del</kbd>.</td>
+      <td><code>VK_DELETE</code> (0x2E)</td>
+      <td><code>kVK_ForwardDelete</code> (0x75) [1]</td>
+      <td>
+        <code>GDK_KEY_Delete</code> (0xFFFF)<br /><code>GDK_KEY_KP_Delete</code>
+        (0xFF9F)<br /><code>Qt::Key_Delete</code> (0x01000007)
+      </td>
+      <td><code>KEYCODE_FORWARD_DEL</code> (112)</td>
+    </tr>
+    <tr>
+      <td><code>"EraseEof"</code></td>
+      <td>
+        Erase to End of Field. Deletes all characters from the current cursor
+        position to the end of the current field.
+      </td>
+      <td><code>VK_EREOF</code> (0xF9)</td>
+      <td></td>
+      <td><code>GDK_KEY_3270_ExSelect</code> (0xFD1B)</td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"ExSel"</code> [4]</td>
+      <td>The <kbd>ExSel</kbd> (Extend Selection) key.</td>
+      <td><code>VK_EXSEL</code> (0xF8)</td>
+      <td></td>
+      <td><code>GDK_KEY_3270_ExSelect</code> (0xFD1B)</td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"Insert"</code></td>
+      <td>
+        The Insert key, <kbd>Ins</kbd>. Toggles  between inserting and
+        overwriting text.
+      </td>
+      <td><code>VK_INSERT</code> (0x2D)</td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_Insert</code> (0xFF63)<br /><code>GDK_KEY_KP_Insert</code>
+        (0xFF9E)<br /><code>Qt::Key_Insert</code> (0x01000006)
+      </td>
+      <td><code>KEYCODE_INSERT</code> (124)</td>
+    </tr>
+    <tr>
+      <td><code>"Paste"</code></td>
+      <td>Paste from the clipboard.</td>
+      <td><code>APPCOMMAND_PASTE</code></td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_Paste</code> (0x1008FF6D)<br /><code>Qt::Key_Paste</code>
+        (0x010000E2)
+      </td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"Redo"</code></td>
+      <td>Redo the last action.</td>
+      <td><code>APPCOMMAND_REDO</code></td>
+      <td></td>
+      <td><code>GDK_KEY_Redo</code> (0xFF66)</td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"Undo"</code></td>
+      <td>Undo the last action.</td>
+      <td><code>APPCOMMAND_UNDO</code></td>
+      <td></td>
+      <td><code>GDK_KEY_Undo</code> (0xFF65)</td>
+      <td></td>
+    </tr>
+  </tbody>
 </table>
 
-<p>[1] On keyboards without a dedicated <kbd>Del</kbd> key, the Mac generates the <code>"Delete"</code> value when <kbd>Fn</kbd> is pressed in tandem with <kbd>Delete</kbd> (which is <kbd>Backspace</kbd> on other platforms).</p>
+\[1] On keyboards without a dedicated <kbd>Del</kbd> key, the Mac generates the `"Delete"` value when <kbd>Fn</kbd> is pressed in tandem with <kbd>Delete</kbd> (which is <kbd>Backspace</kbd> on other platforms).
 
-<p>[2] Internet Explorer (tested on release 9 and 11) and Firefox 36 and earlier use "Del" instead of "Delete" for the <kbd>Del</kbd> key.</p>
+\[2] Internet Explorer (tested on release 9 and 11) and Firefox 36 and earlier use "Del" instead of "Delete" for the <kbd>Del</kbd> key.
 
-<p>[3] Internet Explorer (tested on release 9 and 11) and Firefox 36 and earlier generate the value <code>"Crsel"</code> instead of <code>"CrSel"</code> when the <kbd>CrSel</kbd> key is pressed.</p>
+\[3] Internet Explorer (tested on release 9 and 11) and Firefox 36 and earlier generate the value `"Crsel"` instead of `"CrSel"` when the <kbd>CrSel</kbd> key is pressed.
 
-<p>[4] Internet Explorer (tested on release 9 and 11) and Firefox 36 and earlier generate the value <code>"Exsel"</code> instead of <code>"ExSel"</code> when the <kbd>ExSel</kbd> key is pressed.</p>
+\[4] Internet Explorer (tested on release 9 and 11) and Firefox 36 and earlier generate the value `"Exsel"` instead of `"ExSel"` when the <kbd>ExSel</kbd> key is pressed.
 
-<h2 id="UI_keys">UI keys</h2>
+## UI keys
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th rowspan="2" scope="col"><code>KeyboardEvent.key</code> Value</th>
-   <th rowspan="2" scope="col">Description</th>
-   <th colspan="4" scope="col">Virtual Keycode</th>
-  </tr>
-  <tr>
-   <th scope="col">Windows</th>
-   <th scope="col">Mac</th>
-   <th scope="col">Linux</th>
-   <th scope="col">Android</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>"Accept"</code></td>
-   <td>The <kbd>Accept</kbd>, <kbd>Commit</kbd>, or <kbd>OK</kbd> key or button. Accepts the currently selected option or input method sequence conversion.</td>
-   <td><code>VK_ACCEPT</code> (0x1E)</td>
-   <td></td>
-   <td></td>
-   <td><code>KEYCODE_DPAD_CENTER</code> (23)</td>
-  </tr>
-  <tr>
-   <td><code>"Again"</code></td>
-   <td>The <kbd>Again</kbd> key. Redoes or repeats a previous action.</td>
-   <td></td>
-   <td></td>
-   <td><code>GDK_KEY_Redo</code> (0xFF66)</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"Attn"</code> [4]</td>
-   <td>The <kbd>Attn</kbd> (Attention) key.</td>
-   <td><code>VK_OEM_ATTN</code> (0xF0)</td>
-   <td></td>
-   <td><code>GDK_KEY_3270_Attn</code> (0xFD0E)</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"Cancel"</code> [1]</td>
-   <td>The <kbd>Cancel</kbd> key.</td>
-   <td></td>
-   <td></td>
-   <td><code>GDK_KEY_Cancel</code> (0xFF69)</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"ContextMenu"</code> [3]</td>
-   <td>Shows the context menu. Typically found between the <kbd>Windows</kbd> (or <kbd>OS</kbd>) key and the <kbd>Control</kbd> key on the right side of the keyboard.</td>
-   <td><code>VK_APPS</code> (0x5D)</td>
-   <td><code>kVK_PC_ContextMenu</code> (0x6E)</td>
-   <td><code>GDK_KEY_Menu</code> (0xFF67)<br>
-    <code>Qt::Key_Menu</code> (0x01000055)</td>
-   <td><code>KEYCODE_MENU</code> (82)</td>
-  </tr>
-  <tr>
-   <td><code>"Escape"</code> [2]</td>
-   <td>The <kbd>Esc</kbd> (Escape) key. Typically used as an exit, cancel, or "escape this operation" button. Historically, the Escape character was used to signal the start of a special control sequence of characters called an "escape sequence."</td>
-   <td><code>VK_ESCAPE</code> (0x1B)</td>
-   <td><code>kVK_Escape</code> (0x35)</td>
-   <td><code>GDK_KEY_Escape</code> (0xFF1B)<br>
-    <code>Qt::Key_Escape</code> (0x01000000)</td>
-   <td><code>KEYCODE_ESCAPE</code> (111)</td>
-  </tr>
-  <tr>
-   <td><code>"Execute"</code></td>
-   <td>The <kbd>Execute</kbd> key.</td>
-   <td><code>VK_EXECUTE</code> (0x2B)</td>
-   <td></td>
-   <td><code>Qt::Key_Execute</code> (0x01020003)</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"Find"</code></td>
-   <td>The <kbd>Find</kbd> key. Opens an interface (typically a dialog box) for performing a find/search operation.</td>
-   <td><code>APPCOMMAND_FIND</code></td>
-   <td></td>
-   <td><code>GDK_KEY_Find</code> (0xFF68)</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"Finish"</code> [5]</td>
-   <td>The <kbd>Finish</kbd> key.</td>
-   <td><code>VK_OEM_FINISH</code> (0xF1)</td>
-   <td></td>
-   <td></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"Help"</code></td>
-   <td>The <kbd>Help</kbd> key. Opens or toggles the display of help information.</td>
-   <td><code>VK_HELP</code> (0x2F)<br>
-    <code>APPCOMMAND_HELP</code></td>
-   <td><code>kVK_Help</code> (0x72)</td>
-   <td><code>GDK_KEY_Help</code> (0xFF6A)<br>
-    <code>Qt::Key_Help</code> (0x01000058)</td>
-   <td><code>KEYCODE_HELP</code> (259)</td>
-  </tr>
-  <tr>
-   <td><code>"Pause"</code></td>
-   <td>The <kbd>Pause</kbd> key. Pauses the current application or state, if applicable.
-    <div class="note"><p><strong>Note :</strong> This shouldn't be confused with the <code>"MediaPause"</code> key value, which is used for media controllers, rather than to control applications and processes.</p></div>
-   </td>
-   <td><code>VK_PAUSE</code> (0x13)</td>
-   <td></td>
-   <td><code>GDK_KEY_Pause</code> (0xFF13)<br>
-    <code>GDK_KEY_Break</code> (0xFF6B)<br>
-    <code>Qt::Key_Pause</code> (0x01000008)</td>
-   <td><code>KEYCODE_BREAK</code> (121)</td>
-  </tr>
-  <tr>
-   <td><code>"Play"</code></td>
-   <td>The <kbd>Play</kbd> key. Resumes a previously paused application, if applicable.
-    <div class="note"><p><strong>Note :</strong> This shouldn't be confused with the <code>"MediaPlay"</code> key value, which is used for media controllers, rather than to control applications and processes.</p></div>
-   </td>
-   <td><code>VK_PLAY</code> (0xFA)</td>
-   <td></td>
-   <td><code>GDK_KEY_3270_Play</code> (0xFD16)<br>
-    <code>Qt::Key_Play</code> (0x01020005)</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"Props"</code></td>
-   <td>The <kbd>Props</kbd> (Properties) key.</td>
-   <td></td>
-   <td></td>
-   <td></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"Select"</code></td>
-   <td>The <kbd>Select</kbd> key.</td>
-   <td><code>VK_SELECT</code> (0x29)</td>
-   <td></td>
-   <td><code>GDK_KEY_Select</code> (0xFF60)</td>
-   <td><code>KEYCODE_BUTTON_SELECT</code> (109)</td>
-  </tr>
-  <tr>
-   <td><code>"ZoomIn"</code> [6]</td>
-   <td>The <kbd>ZoomIn</kbd> key.</td>
-   <td></td>
-   <td></td>
-   <td><code>GDK_KEY_ZoomIn</code> (0x1008FF8B)<br>
-    <code>Qt::Key_ZoomIn</code> (0x010000F6)</td>
-   <td><code>KEYCODE_ZOOM_IN</code> (168)</td>
-  </tr>
-  <tr>
-   <td><code>"ZoomOut"</code> [6]</td>
-   <td>The <kbd>ZoomOut</kbd> key.</td>
-   <td></td>
-   <td></td>
-   <td><code>GDK_KEY_ZoomOut</code> (0x1008FF8C)<br>
-    <code>Qt::Key_ZoomOut</code> (0x010000F7)</td>
-   <td><code>KEYCODE_ZOOM_OUT</code> (169)</td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th rowspan="2" scope="col"><code>KeyboardEvent.key</code> Value</th>
+      <th rowspan="2" scope="col">Description</th>
+      <th colspan="4" scope="col">Virtual Keycode</th>
+    </tr>
+    <tr>
+      <th scope="col">Windows</th>
+      <th scope="col">Mac</th>
+      <th scope="col">Linux</th>
+      <th scope="col">Android</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>"Accept"</code></td>
+      <td>
+        The <kbd>Accept</kbd>, <kbd>Commit</kbd>, or <kbd>OK</kbd> key or
+        button. Accepts the currently selected option or input method sequence
+        conversion.
+      </td>
+      <td><code>VK_ACCEPT</code> (0x1E)</td>
+      <td></td>
+      <td></td>
+      <td><code>KEYCODE_DPAD_CENTER</code> (23)</td>
+    </tr>
+    <tr>
+      <td><code>"Again"</code></td>
+      <td>The <kbd>Again</kbd> key. Redoes or repeats a previous action.</td>
+      <td></td>
+      <td></td>
+      <td><code>GDK_KEY_Redo</code> (0xFF66)</td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"Attn"</code> [4]</td>
+      <td>The <kbd>Attn</kbd> (Attention) key.</td>
+      <td><code>VK_OEM_ATTN</code> (0xF0)</td>
+      <td></td>
+      <td><code>GDK_KEY_3270_Attn</code> (0xFD0E)</td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"Cancel"</code> [1]</td>
+      <td>The <kbd>Cancel</kbd> key.</td>
+      <td></td>
+      <td></td>
+      <td><code>GDK_KEY_Cancel</code> (0xFF69)</td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"ContextMenu"</code> [3]</td>
+      <td>
+        Shows the context menu. Typically found between the
+        <kbd>Windows</kbd> (or <kbd>OS</kbd>) key and the <kbd>Control</kbd> key
+        on the right side of the keyboard.
+      </td>
+      <td><code>VK_APPS</code> (0x5D)</td>
+      <td><code>kVK_PC_ContextMenu</code> (0x6E)</td>
+      <td>
+        <code>GDK_KEY_Menu</code> (0xFF67)<br /><code>Qt::Key_Menu</code>
+        (0x01000055)
+      </td>
+      <td><code>KEYCODE_MENU</code> (82)</td>
+    </tr>
+    <tr>
+      <td><code>"Escape"</code> [2]</td>
+      <td>
+        The <kbd>Esc</kbd> (Escape) key. Typically used as an exit, cancel, or
+        "escape this operation" button. Historically, the Escape character was
+        used to signal the start of a special control sequence of characters
+        called an "escape sequence."
+      </td>
+      <td><code>VK_ESCAPE</code> (0x1B)</td>
+      <td><code>kVK_Escape</code> (0x35)</td>
+      <td>
+        <code>GDK_KEY_Escape</code> (0xFF1B)<br /><code>Qt::Key_Escape</code>
+        (0x01000000)
+      </td>
+      <td><code>KEYCODE_ESCAPE</code> (111)</td>
+    </tr>
+    <tr>
+      <td><code>"Execute"</code></td>
+      <td>The <kbd>Execute</kbd> key.</td>
+      <td><code>VK_EXECUTE</code> (0x2B)</td>
+      <td></td>
+      <td><code>Qt::Key_Execute</code> (0x01020003)</td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"Find"</code></td>
+      <td>
+        The <kbd>Find</kbd> key. Opens an interface (typically a dialog box) for
+        performing a find/search operation.
+      </td>
+      <td><code>APPCOMMAND_FIND</code></td>
+      <td></td>
+      <td><code>GDK_KEY_Find</code> (0xFF68)</td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"Finish"</code> [5]</td>
+      <td>The <kbd>Finish</kbd> key.</td>
+      <td><code>VK_OEM_FINISH</code> (0xF1)</td>
+      <td></td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"Help"</code></td>
+      <td>
+        The <kbd>Help</kbd> key. Opens or toggles the display of help
+        information.
+      </td>
+      <td><code>VK_HELP</code> (0x2F)<br /><code>APPCOMMAND_HELP</code></td>
+      <td><code>kVK_Help</code> (0x72)</td>
+      <td>
+        <code>GDK_KEY_Help</code> (0xFF6A)<br /><code>Qt::Key_Help</code>
+        (0x01000058)
+      </td>
+      <td><code>KEYCODE_HELP</code> (259)</td>
+    </tr>
+    <tr>
+      <td><code>"Pause"</code></td>
+      <td>
+        The <kbd>Pause</kbd> key. Pauses the current application or state, if
+        applicable.
+        <div class="note">
+          <p>
+            <strong>Note :</strong> This shouldn't be confused with the
+            <code>"MediaPause"</code> key value, which is used for media
+            controllers, rather than to control applications and processes.
+          </p>
+        </div>
+      </td>
+      <td><code>VK_PAUSE</code> (0x13)</td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_Pause</code> (0xFF13)<br /><code>GDK_KEY_Break</code>
+        (0xFF6B)<br /><code>Qt::Key_Pause</code> (0x01000008)
+      </td>
+      <td><code>KEYCODE_BREAK</code> (121)</td>
+    </tr>
+    <tr>
+      <td><code>"Play"</code></td>
+      <td>
+        The <kbd>Play</kbd> key. Resumes a previously paused application, if
+        applicable.
+        <div class="note">
+          <p>
+            <strong>Note :</strong> This shouldn't be confused with the
+            <code>"MediaPlay"</code> key value, which is used for media
+            controllers, rather than to control applications and processes.
+          </p>
+        </div>
+      </td>
+      <td><code>VK_PLAY</code> (0xFA)</td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_3270_Play</code> (0xFD16)<br /><code>Qt::Key_Play</code>
+        (0x01020005)
+      </td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"Props"</code></td>
+      <td>The <kbd>Props</kbd> (Properties) key.</td>
+      <td></td>
+      <td></td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"Select"</code></td>
+      <td>The <kbd>Select</kbd> key.</td>
+      <td><code>VK_SELECT</code> (0x29)</td>
+      <td></td>
+      <td><code>GDK_KEY_Select</code> (0xFF60)</td>
+      <td><code>KEYCODE_BUTTON_SELECT</code> (109)</td>
+    </tr>
+    <tr>
+      <td><code>"ZoomIn"</code> [6]</td>
+      <td>The <kbd>ZoomIn</kbd> key.</td>
+      <td></td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_ZoomIn</code> (0x1008FF8B)<br /><code
+          >Qt::Key_ZoomIn</code
+        >
+        (0x010000F6)
+      </td>
+      <td><code>KEYCODE_ZOOM_IN</code> (168)</td>
+    </tr>
+    <tr>
+      <td><code>"ZoomOut"</code> [6]</td>
+      <td>The <kbd>ZoomOut</kbd> key.</td>
+      <td></td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_ZoomOut</code> (0x1008FF8C)<br /><code
+          >Qt::Key_ZoomOut</code
+        >
+        (0x010000F7)
+      </td>
+      <td><code>KEYCODE_ZOOM_OUT</code> (169)</td>
+    </tr>
+  </tbody>
 </table>
 
-<p>[1] In Google Chrome 52, the <kbd>Cancel</kbd> key incorrectly returns the key code <code>"Pause"</code>. This is fixed in Chrome 53. See <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=612749">Chrome bug 612749</a> for details.</p>
+\[1] In Google Chrome 52, the <kbd>Cancel</kbd> key incorrectly returns the key code `"Pause"`. This is fixed in Chrome 53. See [Chrome bug 612749](https://bugs.chromium.org/p/chromium/issues/detail?id=612749) for details.
 
-<p>[2] In Internet Explorer (tested on release 9 and 11) and Firefox 36 and earlier, the <kbd>Esc</kbd> key returns <code>"Esc"</code> instead of <code>"Escape"</code>.</p>
+\[2] In Internet Explorer (tested on release 9 and 11) and Firefox 36 and earlier, the <kbd>Esc</kbd> key returns `"Esc"` instead of `"Escape"`.
 
-<p>[3] Internet Explorer (tested on release 9 and 11) and Firefox 36 and earlier report <code>"Apps"</code> instead of <code>"ContextMenu"</code> for the context menu key.</p>
+\[3] Internet Explorer (tested on release 9 and 11) and Firefox 36 and earlier report `"Apps"` instead of `"ContextMenu"` for the context menu key.
 
-<p>[4] The <kbd>Attn</kbd> key generates the key code <code>"Unidentified"</code> on Internet Explorer (tested on release 9 and 11). Firefox and Google Chrome report the same, unless the Japanese keyboard layout is in effect, in which case it generates <code>"KanaMode"</code> instead.</p>
+\[4] The <kbd>Attn</kbd> key generates the key code `"Unidentified"` on Internet Explorer (tested on release 9 and 11). Firefox and Google Chrome report the same, unless the Japanese keyboard layout is in effect, in which case it generates `"KanaMode"` instead.
 
-<p>[5] The <kbd>Finish</kbd> key gemerates the key code <code>"Unidentified"</code> on Internet Explorer (tested on release 9 and 11). Firefox reports the same, unless the Japanese keyboard layout is in effect, in which case it generates <code>"Katakana"</code> instead.</p>
+\[5] The <kbd>Finish</kbd> key gemerates the key code `"Unidentified"` on Internet Explorer (tested on release 9 and 11). Firefox reports the same, unless the Japanese keyboard layout is in effect, in which case it generates `"Katakana"` instead.
 
-<p>[6] Firefox didn't support the <code>"ZoomIn"</code> and <code>"ZoomOut"</code> keys until Firefox 37.</p>
+\[6] Firefox didn't support the `"ZoomIn"` and `"ZoomOut"` keys until Firefox 37.
 
-<h2 id="Device_keys">Device keys</h2>
+## Device keys
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th rowspan="2" scope="col"><code>KeyboardEvent.key</code> Value</th>
-   <th rowspan="2" scope="col">Description</th>
-   <th colspan="4" scope="col">Virtual Keycode</th>
-  </tr>
-  <tr>
-   <th scope="col">Windows</th>
-   <th scope="col">Mac</th>
-   <th scope="col">Linux</th>
-   <th scope="col">Android</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>"BrightnessDown"</code></td>
-   <td>The Brightness Down key. Typically used to reduce the brightness of the display.</td>
-   <td></td>
-   <td></td>
-   <td><code>GDK_KEY_MonBrightnessDown</code> (0x1008FF03)<br>
-    <code>Qt::Key_MonBrightnessDown</code> (0x010000B3)</td>
-   <td><code>KEYCODE_BRIGHTNESS_DOWN</code> (220)</td>
-  </tr>
-  <tr>
-   <td><code>"BrightnessUp"</code></td>
-   <td>The Brightness Up key. Typically increases the brightness of the display.</td>
-   <td></td>
-   <td></td>
-   <td><code>GDK_KEY_MonBrightnessUp</code> (0x1008FF02)<br>
-    <code>Qt::Key_MonBrightnessUp</code> (0x010000B2)</td>
-   <td><code>KEYCODE_BRIGHTNESS_UP</code> (221)</td>
-  </tr>
-  <tr>
-   <td><code>"Eject"</code></td>
-   <td>The <kbd>Eject</kbd> key. Ejects removable media (or toggles an optical storage device tray open and closed).</td>
-   <td></td>
-   <td></td>
-   <td><code>GDK_KEY_Eject</code> (0x1008FF2C)<br>
-    <code>Qt::Key_Eject</code> (0x010000B9)</td>
-   <td><code>KEYCODE_MEDIA_EJECT</code> (129)</td>
-  </tr>
-  <tr>
-   <td><code>"LogOff"</code> [2]</td>
-   <td>The <kbd>LogOff</kbd> key.</td>
-   <td></td>
-   <td></td>
-   <td><code>GDK_KEY_LogOff</code> (0x1008FF61)<br>
-    <code>Qt::Key_LogOff</code> (0x010000D9)</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"Power"</code></td>
-   <td>The <kbd>Power</kbd> button or key, to toggle power on and off.
-    <div class="note"><p><strong>Note :</strong> Not all systems pass this key through to to the user agent.</p></div>
-   </td>
-   <td></td>
-   <td></td>
-   <td></td>
-   <td><code>KEYCODE_POWER</code> (26)</td>
-  </tr>
-  <tr>
-   <td><code>"PowerOff"</code></td>
-   <td>The <kbd>PowerOff</kbd> or <kbd>PowerDown</kbd> key. Shuts off the system.</td>
-   <td></td>
-   <td></td>
-   <td><code>GDK_KEY_PowerDown</code> (0x1008FF21)<br>
-    <code>GDK_KEY_PowerOff</code> (0x1008FF2A)<br>
-    <code>Qt::Key_PowerDown</code> (0x0100010B)<br>
-    <code>Qt::Key_PowerOff</code> (0x010000B7)</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"PrintScreen"</code></td>
-   <td>The <kbd>PrintScreen</kbd> or <kbd>PrtScr</kbd> key. Sometimes <kbd>SnapShot</kbd>. Captures the screen and prints it or saves it to disk.</td>
-   <td><code>VK_SNAPSHOT</code> (0x2C)</td>
-   <td></td>
-   <td><code>GDK_KEY_3270_PrintScreen</code> (0xFD1D)<br>
-    <code>GDK_KEY_Print</code> (0xFF61)<br>
-    <code>GDK_KEY_Sys_Req</code> (0xFF15)<br>
-    <code>Qt::Key_Print</code> (0x01000009)<br>
-    <code>Qt::Key_SysReq</code> (0x0100000A)</td>
-   <td><code>KEYCODE_SYSRQ</code> (120)</td>
-  </tr>
-  <tr>
-   <td><code>"Hibernate"</code> [2]</td>
-   <td>The <kbd>Hibernate</kbd> key. This saves the state of the computer to disk and then shuts down; the computer can be returned to its previous state by restoring the saved state information.</td>
-   <td></td>
-   <td></td>
-   <td><code>GDK_KEY_Hibernate</code> (0x1008FFA8)<br>
-    <code>Qt::Key_Hibernate</code> (0x01000108)</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"Standby"</code> [1]</td>
-   <td>The <kbd>Standby</kbd> key; also known as <kbd>Suspend</kbd> or <kbd>Sleep</kbd>. This turns off the display and puts the computer in a low power consumption mode, without completely powering off.</td>
-   <td><code>VK_SLEEP</code> (0x5F)</td>
-   <td></td>
-   <td><code>GDK_KEY_Standby</code> (0x1008FF10)<br>
-    <code>GDK_KEY_Suspend</code> (0x1008FFA7)<br>
-    <code>GDK_KEY_Sleep</code> (0x1008FF2F)<br>
-    <code>Qt::Key_Standby</code> (0x01000093)<br>
-    <code>Qt::Key_Suspend</code> (0x0100010C)<br>
-    <code>Qt::Key_Sleep</code> (0x01020004)</td>
-   <td><code>KEYCODE_SLEEP</code> (223)</td>
-  </tr>
-  <tr>
-   <td><code>"WakeUp"</code> [2]</td>
-   <td>The <kbd>WakeUp</kbd> key; used to wake the computer from the hibernation or standby modes.</td>
-   <td></td>
-   <td></td>
-   <td><code>GDK_KEY_WakeUp</code> (0x1008FF2B)<br>
-    <code>Qt::Key_WakeUp</code> (0x010000B8)</td>
-   <td><code>KEYCODE_WAKEUP</code> (224)</td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th rowspan="2" scope="col"><code>KeyboardEvent.key</code> Value</th>
+      <th rowspan="2" scope="col">Description</th>
+      <th colspan="4" scope="col">Virtual Keycode</th>
+    </tr>
+    <tr>
+      <th scope="col">Windows</th>
+      <th scope="col">Mac</th>
+      <th scope="col">Linux</th>
+      <th scope="col">Android</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>"BrightnessDown"</code></td>
+      <td>
+        The Brightness Down key. Typically used to reduce the brightness of the
+        display.
+      </td>
+      <td></td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_MonBrightnessDown</code> (0x1008FF03)<br /><code
+          >Qt::Key_MonBrightnessDown</code
+        >
+        (0x010000B3)
+      </td>
+      <td><code>KEYCODE_BRIGHTNESS_DOWN</code> (220)</td>
+    </tr>
+    <tr>
+      <td><code>"BrightnessUp"</code></td>
+      <td>
+        The Brightness Up key. Typically increases the brightness of the
+        display.
+      </td>
+      <td></td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_MonBrightnessUp</code> (0x1008FF02)<br /><code
+          >Qt::Key_MonBrightnessUp</code
+        >
+        (0x010000B2)
+      </td>
+      <td><code>KEYCODE_BRIGHTNESS_UP</code> (221)</td>
+    </tr>
+    <tr>
+      <td><code>"Eject"</code></td>
+      <td>
+        The <kbd>Eject</kbd> key. Ejects removable media (or toggles an optical
+        storage device tray open and closed).
+      </td>
+      <td></td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_Eject</code> (0x1008FF2C)<br /><code>Qt::Key_Eject</code>
+        (0x010000B9)
+      </td>
+      <td><code>KEYCODE_MEDIA_EJECT</code> (129)</td>
+    </tr>
+    <tr>
+      <td><code>"LogOff"</code> [2]</td>
+      <td>The <kbd>LogOff</kbd> key.</td>
+      <td></td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_LogOff</code> (0x1008FF61)<br /><code
+          >Qt::Key_LogOff</code
+        >
+        (0x010000D9)
+      </td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"Power"</code></td>
+      <td>
+        The <kbd>Power</kbd> button or key, to toggle power on and off.
+        <div class="note">
+          <p>
+            <strong>Note :</strong> Not all systems pass this key through to to
+            the user agent.
+          </p>
+        </div>
+      </td>
+      <td></td>
+      <td></td>
+      <td></td>
+      <td><code>KEYCODE_POWER</code> (26)</td>
+    </tr>
+    <tr>
+      <td><code>"PowerOff"</code></td>
+      <td>
+        The <kbd>PowerOff</kbd> or <kbd>PowerDown</kbd> key. Shuts off the
+        system.
+      </td>
+      <td></td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_PowerDown</code> (0x1008FF21)<br /><code
+          >GDK_KEY_PowerOff</code
+        >
+        (0x1008FF2A)<br /><code>Qt::Key_PowerDown</code> (0x0100010B)<br /><code
+          >Qt::Key_PowerOff</code
+        >
+        (0x010000B7)
+      </td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"PrintScreen"</code></td>
+      <td>
+        The <kbd>PrintScreen</kbd> or <kbd>PrtScr</kbd> key. Sometimes
+        <kbd>SnapShot</kbd>. Captures the screen and prints it or saves it to
+        disk.
+      </td>
+      <td><code>VK_SNAPSHOT</code> (0x2C)</td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_3270_PrintScreen</code> (0xFD1D)<br /><code
+          >GDK_KEY_Print</code
+        >
+        (0xFF61)<br /><code>GDK_KEY_Sys_Req</code> (0xFF15)<br /><code
+          >Qt::Key_Print</code
+        >
+        (0x01000009)<br /><code>Qt::Key_SysReq</code> (0x0100000A)
+      </td>
+      <td><code>KEYCODE_SYSRQ</code> (120)</td>
+    </tr>
+    <tr>
+      <td><code>"Hibernate"</code> [2]</td>
+      <td>
+        The <kbd>Hibernate</kbd> key. This saves the state of the computer to
+        disk and then shuts down; the computer can be returned to its previous
+        state by restoring the saved state information.
+      </td>
+      <td></td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_Hibernate</code> (0x1008FFA8)<br /><code
+          >Qt::Key_Hibernate</code
+        >
+        (0x01000108)
+      </td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"Standby"</code> [1]</td>
+      <td>
+        The <kbd>Standby</kbd> key; also known as <kbd>Suspend</kbd> or
+        <kbd>Sleep</kbd>. This turns off the display and puts the computer in a
+        low power consumption mode, without completely powering off.
+      </td>
+      <td><code>VK_SLEEP</code> (0x5F)</td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_Standby</code> (0x1008FF10)<br /><code
+          >GDK_KEY_Suspend</code
+        >
+        (0x1008FFA7)<br /><code>GDK_KEY_Sleep</code> (0x1008FF2F)<br /><code
+          >Qt::Key_Standby</code
+        >
+        (0x01000093)<br /><code>Qt::Key_Suspend</code> (0x0100010C)<br /><code
+          >Qt::Key_Sleep</code
+        >
+        (0x01020004)
+      </td>
+      <td><code>KEYCODE_SLEEP</code> (223)</td>
+    </tr>
+    <tr>
+      <td><code>"WakeUp"</code> [2]</td>
+      <td>
+        The <kbd>WakeUp</kbd> key; used to wake the computer from the
+        hibernation or standby modes.
+      </td>
+      <td></td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_WakeUp</code> (0x1008FF2B)<br /><code
+          >Qt::Key_WakeUp</code
+        >
+        (0x010000B8)
+      </td>
+      <td><code>KEYCODE_WAKEUP</code> (224)</td>
+    </tr>
+  </tbody>
 </table>
 
-<p>[1] The <kbd>Standby</kbd> key is not supported by Internet Explorer (tested on release 9 and 11) and Firefox 36 and earlier, so it is reported as <code>"Unidentified"</code>.</p>
+\[1] The <kbd>Standby</kbd> key is not supported by Internet Explorer (tested on release 9 and 11) and Firefox 36 and earlier, so it is reported as `"Unidentified"`.
 
-<p>[2] Prior to Firefox 37, this key generated the value <code>"Unidentified"</code>.</p>
+\[2] Prior to Firefox 37, this key generated the value `"Unidentified"`.
 
-<h2 id="IME_and_composition_keys">IME and composition keys</h2>
+## IME and composition keys
 
-<p>Keys used when using an Input Method Editor (IME) to input text which can't readily be entered by simple keypresses, such as text in languages such as those which have more graphemes than there are character entry keys on the keyboard; common examples include Chinese, Japanese, Korean, and Hindi.</p>
+Keys used when using an Input Method Editor (IME) to input text which can't readily be entered by simple keypresses, such as text in languages such as those which have more graphemes than there are character entry keys on the keyboard; common examples include Chinese, Japanese, Korean, and Hindi.
 
-<p>Some keys are common across multiple languages, while others exist only on keyboards targeting specific languages. In addition, not all keyboards have all of these keys.</p>
+Some keys are common across multiple languages, while others exist only on keyboards targeting specific languages. In addition, not all keyboards have all of these keys.
 
-<h4 id="Common_IME_keys">Common IME keys</h4>
+#### Common IME keys
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th rowspan="2" scope="col"><code>KeyboardEvent.key</code> Value</th>
-   <th rowspan="2" scope="col">Description</th>
-   <th colspan="4" scope="col">Virtual Keycode</th>
-  </tr>
-  <tr>
-   <th scope="col">Windows</th>
-   <th scope="col">Mac</th>
-   <th scope="col">Linux</th>
-   <th scope="col">Android</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>"AllCandidates"</code></td>
-   <td>The <kbd>All Candidates</kbd> key, which starts multi-candidate mode, in which multiple candidates are displayed for the ongoing input.</td>
-   <td></td>
-   <td></td>
-   <td><code>GDK_KEY_MultipleCandidate</code> (0xFF3D<br>
-    <code>Qt::Key_MultipleCandidate</code> (0x0100113D)</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"Alphanumeric"</code></td>
-   <td>The <kbd>Alphanumeric</kbd> key.</td>
-   <td><code>VK_OEM_ATTN</code> (0xF0)</td>
-   <td></td>
-   <td><code>GDK_KEY_Eisu_Shift</code> (0xFF2F)<br>
-    <code>GDK_KEY_Eisu_toggle</code> (0xFF30)<br>
-    <code>Qt::Key_Eisu_Shift</code> (0x0100112f)<br>
-    <code>Qt::Key_Eisu_toggle</code> (0x01001130)</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"CodeInput"</code></td>
-   <td>The <kbd>Code Input</kbd> key, which enables code input mode, which lets the user enter characters by typing their code points (their Unicode character numbers, typically).</td>
-   <td></td>
-   <td></td>
-   <td><code>GDK_KEY_Codeinput</code> (0xFF37)<br>
-    <code>Qt::Key_Codeinput</code> (0x01001137)</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"Compose"</code></td>
-   <td>The <kbd>Compose</kbd> key.</td>
-   <td></td>
-   <td></td>
-   <td><code>GDK_KEY_Multi_key</code> (0xFF20) [1]<br>
-    <code>Qt::Key_Multi_key</code> (0x01001120)</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"Convert"</code> [4]</td>
-   <td>The <kbd>Convert</kbd> key, which instructs the IME to convert the current input method sequence into the resulting character.</td>
-   <td><code>VK_CONVERT</code> (0x1C)</td>
-   <td></td>
-   <td><code>GDK_KEY_Henkan</code> (0xFF23)<br>
-    <code>Qt::Key_Henkan</code> (0x01001123)</td>
-   <td><code>KEYCODE_HENKAN</code> (214)</td>
-  </tr>
-  <tr>
-   <td><code>"Dead"</code></td>
-   <td>A dead "combining" key; that is, a key which is used in tandem with other keys to generate accented and other modified characters. If pressed by itself, it doesn't generate a character. If you wish to identify which specific dead key was pressed (in cases where more than one exists), you can do so by examining the {{domxref("KeyboardEvent")}}'s associated {{event("compositionupdate")}} event's  {{domxref("CompositionEvent.data", "data")}} property.</td>
-   <td></td>
-   <td></td>
-   <td>See {{anch("Dead keycodes for Linux")}} below</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"FinalMode"</code></td>
-   <td>The <kbd>Final</kbd> (Final Mode) key is used on some Asian keyboards to enter final mode when using IMEs.</td>
-   <td><code>VK_FINAL</code> (0x18)</td>
-   <td></td>
-   <td></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"GroupFirst"</code></td>
-   <td>Switches to the first character group on an <a href="https://en.wikipedia.org/wiki/ISO/IEC_9995">ISO/IEC 9995 keyboard</a>. Each key may have multiple groups of characters, each in its own column. Pressing this key instructs the device to interpret keypresses as coming from the first column on subsequent keystrokes.</td>
-   <td></td>
-   <td></td>
-   <td><code>GDK_KEY_ISO_First_Group</code> (0xFE0C)</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"GroupLast"</code></td>
-   <td>Switches to the last character group on an <a href="https://en.wikipedia.org/wiki/ISO/IEC_9995">ISO/IEC 9995 keyboard</a>.</td>
-   <td></td>
-   <td></td>
-   <td><code>GDK_KEY_ISO_Last_Group</code> (0xFE0E)</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"GroupNext"</code> [4]</td>
-   <td>Switches to the next character group on an <a href="https://en.wikipedia.org/wiki/ISO/IEC_9995">ISO/IEC 9995 keyboard</a>.</td>
-   <td></td>
-   <td></td>
-   <td><code>GDK_KEY_ISO_Next_Group</code> (0xFE08)</td>
-   <td><code>KEYCODE_LANGUAGE_SWITCH</code> (204)</td>
-  </tr>
-  <tr>
-   <td><code>"GroupPrevious"</code></td>
-   <td>Switches to the previous character group on an <a href="https://en.wikipedia.org/wiki/ISO/IEC_9995">ISO/IEC 9995 keyboard</a>.</td>
-   <td></td>
-   <td></td>
-   <td><code>GDK_KEY_ISO_Prev_Group</code> (0xFE0A)</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"ModeChange"</code> [5]</td>
-   <td>The Mode Change key. Toggles or cycles among input modes of IMEs.</td>
-   <td><code>VK_MODECHANGE</code> (0x1F)</td>
-   <td></td>
-   <td><code>GDK_KEY_Mode_switch</code> (0xFF7E)<br>
-    <code>GDK_KEY_script_switch</code> (0xFF7E)<br>
-    <code>Qt::Key_Mode_switch</code> (0x0100117E)</td>
-   <td><code>KEYCODE_SWITCH_CHARSET</code> (95)</td>
-  </tr>
-  <tr>
-   <td><code>"NextCandidate"</code></td>
-   <td>The Next Candidate function key. Selects the next possible match for the ongoing input.</td>
-   <td></td>
-   <td></td>
-   <td></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"NonConvert"</code> [2]</td>
-   <td>The <kbd>NonConvert</kbd> ("Don't convert") key. This accepts the current input method sequence without running conversion when using an IME.</td>
-   <td><code>VK_NONCONVERT</code> (0x1D)</td>
-   <td></td>
-   <td><code>GDK_KEY_Muhenkan</code> (0xFF22)<br>
-    <code>Qt::Key_Muhenkan</code> (0x01001122)<br>
-     </td>
-   <td><code>KEYCODE_MUHENKAN</code> (213)</td>
-  </tr>
-  <tr>
-   <td><code>"PreviousCandidate"</code></td>
-   <td>The Previous Candidate key. Selects the previous possible match for the ongoing input.</td>
-   <td></td>
-   <td></td>
-   <td><code>GDK_KEY_PreviousCandidate</code> (0xFF3E)<br>
-    <code>Qt::Key_PreviousCandidate</code> (0x0100113E)</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"Process"</code> [3]</td>
-   <td>The <kbd>Process</kbd> key. Instructs the IME to process the conversion.</td>
-   <td><code>VK_PROCESSKEY</code> (0xE5)</td>
-   <td></td>
-   <td></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"SingleCandidate"</code> [4]</td>
-   <td>The Single Candidate key. Enables single candidate mode (as opposed to multi-candidate mode); in this mode, only one candidate is displayed at a time.</td>
-   <td></td>
-   <td></td>
-   <td><code>GDK_KEY_SingleCandidate</code> (0xFF3C)<br>
-    <code>Qt::Key_SingleCandidate</code> (0x0100113C)</td>
-   <td></td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th rowspan="2" scope="col"><code>KeyboardEvent.key</code> Value</th>
+      <th rowspan="2" scope="col">Description</th>
+      <th colspan="4" scope="col">Virtual Keycode</th>
+    </tr>
+    <tr>
+      <th scope="col">Windows</th>
+      <th scope="col">Mac</th>
+      <th scope="col">Linux</th>
+      <th scope="col">Android</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>"AllCandidates"</code></td>
+      <td>
+        The <kbd>All Candidates</kbd> key, which starts multi-candidate mode, in
+        which multiple candidates are displayed for the ongoing input.
+      </td>
+      <td></td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_MultipleCandidate</code> (0xFF3D<br /><code
+          >Qt::Key_MultipleCandidate</code
+        >
+        (0x0100113D)
+      </td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"Alphanumeric"</code></td>
+      <td>The <kbd>Alphanumeric</kbd> key.</td>
+      <td><code>VK_OEM_ATTN</code> (0xF0)</td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_Eisu_Shift</code> (0xFF2F)<br /><code
+          >GDK_KEY_Eisu_toggle</code
+        >
+        (0xFF30)<br /><code>Qt::Key_Eisu_Shift</code> (0x0100112f)<br /><code
+          >Qt::Key_Eisu_toggle</code
+        >
+        (0x01001130)
+      </td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"CodeInput"</code></td>
+      <td>
+        The <kbd>Code Input</kbd> key, which enables code input mode, which lets
+        the user enter characters by typing their code points (their Unicode
+        character numbers, typically).
+      </td>
+      <td></td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_Codeinput</code> (0xFF37)<br /><code
+          >Qt::Key_Codeinput</code
+        >
+        (0x01001137)
+      </td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"Compose"</code></td>
+      <td>The <kbd>Compose</kbd> key.</td>
+      <td></td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_Multi_key</code> (0xFF20) [1]<br /><code
+          >Qt::Key_Multi_key</code
+        >
+        (0x01001120)
+      </td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"Convert"</code> [4]</td>
+      <td>
+        The <kbd>Convert</kbd> key, which instructs the IME to convert the
+        current input method sequence into the resulting character.
+      </td>
+      <td><code>VK_CONVERT</code> (0x1C)</td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_Henkan</code> (0xFF23)<br /><code>Qt::Key_Henkan</code>
+        (0x01001123)
+      </td>
+      <td><code>KEYCODE_HENKAN</code> (214)</td>
+    </tr>
+    <tr>
+      <td><code>"Dead"</code></td>
+      <td>
+        A dead "combining" key; that is, a key which is used in tandem with
+        other keys to generate accented and other modified characters. If
+        pressed by itself, it doesn't generate a character. If you wish to
+        identify which specific dead key was pressed (in cases where more than
+        one exists), you can do so by examining the
+        {{domxref("KeyboardEvent")}}'s associated
+        {{event("compositionupdate")}} event's 
+        {{domxref("CompositionEvent.data", "data")}} property.
+      </td>
+      <td></td>
+      <td></td>
+      <td>See {{anch("Dead keycodes for Linux")}} below</td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"FinalMode"</code></td>
+      <td>
+        The <kbd>Final</kbd> (Final Mode) key is used on some Asian keyboards to
+        enter final mode when using IMEs.
+      </td>
+      <td><code>VK_FINAL</code> (0x18)</td>
+      <td></td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"GroupFirst"</code></td>
+      <td>
+        Switches to the first character group on an
+        <a href="https://en.wikipedia.org/wiki/ISO/IEC_9995"
+          >ISO/IEC 9995 keyboard</a
+        >. Each key may have multiple groups of characters, each in its own
+        column. Pressing this key instructs the device to interpret keypresses
+        as coming from the first column on subsequent keystrokes.
+      </td>
+      <td></td>
+      <td></td>
+      <td><code>GDK_KEY_ISO_First_Group</code> (0xFE0C)</td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"GroupLast"</code></td>
+      <td>
+        Switches to the last character group on an
+        <a href="https://en.wikipedia.org/wiki/ISO/IEC_9995"
+          >ISO/IEC 9995 keyboard</a
+        >.
+      </td>
+      <td></td>
+      <td></td>
+      <td><code>GDK_KEY_ISO_Last_Group</code> (0xFE0E)</td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"GroupNext"</code> [4]</td>
+      <td>
+        Switches to the next character group on an
+        <a href="https://en.wikipedia.org/wiki/ISO/IEC_9995"
+          >ISO/IEC 9995 keyboard</a
+        >.
+      </td>
+      <td></td>
+      <td></td>
+      <td><code>GDK_KEY_ISO_Next_Group</code> (0xFE08)</td>
+      <td><code>KEYCODE_LANGUAGE_SWITCH</code> (204)</td>
+    </tr>
+    <tr>
+      <td><code>"GroupPrevious"</code></td>
+      <td>
+        Switches to the previous character group on an
+        <a href="https://en.wikipedia.org/wiki/ISO/IEC_9995"
+          >ISO/IEC 9995 keyboard</a
+        >.
+      </td>
+      <td></td>
+      <td></td>
+      <td><code>GDK_KEY_ISO_Prev_Group</code> (0xFE0A)</td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"ModeChange"</code> [5]</td>
+      <td>The Mode Change key. Toggles or cycles among input modes of IMEs.</td>
+      <td><code>VK_MODECHANGE</code> (0x1F)</td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_Mode_switch</code> (0xFF7E)<br /><code
+          >GDK_KEY_script_switch</code
+        >
+        (0xFF7E)<br /><code>Qt::Key_Mode_switch</code> (0x0100117E)
+      </td>
+      <td><code>KEYCODE_SWITCH_CHARSET</code> (95)</td>
+    </tr>
+    <tr>
+      <td><code>"NextCandidate"</code></td>
+      <td>
+        The Next Candidate function key. Selects the next possible match for the
+        ongoing input.
+      </td>
+      <td></td>
+      <td></td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"NonConvert"</code> [2]</td>
+      <td>
+        The <kbd>NonConvert</kbd> ("Don't convert") key. This accepts the
+        current input method sequence without running conversion when using an
+        IME.
+      </td>
+      <td><code>VK_NONCONVERT</code> (0x1D)</td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_Muhenkan</code> (0xFF22)<br /><code
+          >Qt::Key_Muhenkan</code
+        >
+        (0x01001122)<br /> 
+      </td>
+      <td><code>KEYCODE_MUHENKAN</code> (213)</td>
+    </tr>
+    <tr>
+      <td><code>"PreviousCandidate"</code></td>
+      <td>
+        The Previous Candidate key. Selects the previous possible match for the
+        ongoing input.
+      </td>
+      <td></td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_PreviousCandidate</code> (0xFF3E)<br /><code
+          >Qt::Key_PreviousCandidate</code
+        >
+        (0x0100113E)
+      </td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"Process"</code> [3]</td>
+      <td>
+        The <kbd>Process</kbd> key. Instructs the IME to process the conversion.
+      </td>
+      <td><code>VK_PROCESSKEY</code> (0xE5)</td>
+      <td></td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"SingleCandidate"</code> [4]</td>
+      <td>
+        The Single Candidate key. Enables single candidate mode (as opposed to
+        multi-candidate mode); in this mode, only one candidate is displayed at
+        a time.
+      </td>
+      <td></td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_SingleCandidate</code> (0xFF3C)<br /><code
+          >Qt::Key_SingleCandidate</code
+        >
+        (0x0100113C)
+      </td>
+      <td></td>
+    </tr>
+  </tbody>
 </table>
 
-<p>[1] On the <em>X Window System</em>, the <kbd>Compose</kbd> key is called the <kbd>Multi</kbd> key.</p>
+\[1] On the _X Window System_, the <kbd>Compose</kbd> key is called the <kbd>Multi</kbd> key.
 
-<p>[2] The <kbd>NonConvert</kbd> key is reported as <code>"Nonconvert"</code> instead of the correct <code>"NonConvert"</code> by Internet Explorer (tested on release 9 and 11) and Firefox versions 36 and earlier.</p>
+\[2] The <kbd>NonConvert</kbd> key is reported as `"Nonconvert"` instead of the correct `"NonConvert"` by Internet Explorer (tested on release 9 and 11) and Firefox versions 36 and earlier.
 
-<p>[3] The <kbd>Process</kbd> key currently returns <code>"Unidentified"</code> in Firefox and Internet Explorer. Google Chrome returns the value of the key as if IME were not in use.</p>
+\[3] The <kbd>Process</kbd> key currently returns `"Unidentified"` in Firefox and Internet Explorer. Google Chrome returns the value of the key as if IME were not in use.
 
-<p>[4] Prior to Firefox 37, these keys were <code>"Unidentified"</code>.</p>
+\[4] Prior to Firefox 37, these keys were `"Unidentified"`.
 
-<p>[5] Firefox generates the key value <code>"AltGraph"</code> instead of <code>"ModeChange"</code>.</p>
+\[5] Firefox generates the key value `"AltGraph"` instead of `"ModeChange"`.
 
-<h3 id="Korean_keyboards_only">Korean keyboards only</h3>
+### Korean keyboards only
 
-<p>These keys are only available on Korean keyboards. There are other keys defined by various platforms for Korean keyboards, but these are the most common and are the ones identified by the UI Events specification.</p>
+These keys are only available on Korean keyboards. There are other keys defined by various platforms for Korean keyboards, but these are the most common and are the ones identified by the UI Events specification.
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th rowspan="2" scope="col"><code>KeyboardEvent.key</code> Value</th>
-   <th rowspan="2" scope="col">Description</th>
-   <th colspan="4" scope="col">Virtual Keycode</th>
-  </tr>
-  <tr>
-   <th scope="col">Windows</th>
-   <th scope="col">Mac</th>
-   <th scope="col">Linux</th>
-   <th scope="col">Android</th>
-  </tr>
-  <tr>
-   <td><code>"HangulMode"</code></td>
-   <td>The <kbd>Hangul</kbd> (Korean character set) mode key, which toggles between Hangul and English entry modes.</td>
-   <td><code>VK_HANGUL</code> (0x15) [1]</td>
-   <td></td>
-   <td><code>GDK_KEY_Hangul</code> (0xFF31)<br>
-    <code>Qt::Key_Hangul</code> (0x01001131)</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"HanjaMode"</code></td>
-   <td>Selects the Hanja mode, for converting Hangul characters to the more specific Hanja characters.</td>
-   <td><code>VK_HANJA</code> (0x19) [1]</td>
-   <td></td>
-   <td><code>GDK_KEY_Hangul_Hanja</code> (0xFF34)<br>
-    <code>Qt::Key_Hangul_Hanja</code> (0x01001134)</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"JunjaMode"</code></td>
-   <td>Selects the Junja mode, in which Korean is represented using single-byte Latin characters.</td>
-   <td><code>VK_JUNJA</code> (0x17)</td>
-   <td></td>
-   <td><code>GDK_KEY_Hangul_Jeonja</code> (0xFF38)<br>
-    <code>Qt::Key_Hangul_Jeonja</code> (0x01001138)</td>
-   <td></td>
-  </tr>
- </thead>
+  <thead>
+    <tr>
+      <th rowspan="2" scope="col"><code>KeyboardEvent.key</code> Value</th>
+      <th rowspan="2" scope="col">Description</th>
+      <th colspan="4" scope="col">Virtual Keycode</th>
+    </tr>
+    <tr>
+      <th scope="col">Windows</th>
+      <th scope="col">Mac</th>
+      <th scope="col">Linux</th>
+      <th scope="col">Android</th>
+    </tr>
+    <tr>
+      <td><code>"HangulMode"</code></td>
+      <td>
+        The <kbd>Hangul</kbd> (Korean character set) mode key, which toggles
+        between Hangul and English entry modes.
+      </td>
+      <td><code>VK_HANGUL</code> (0x15) [1]</td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_Hangul</code> (0xFF31)<br /><code>Qt::Key_Hangul</code>
+        (0x01001131)
+      </td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"HanjaMode"</code></td>
+      <td>
+        Selects the Hanja mode, for converting Hangul characters to the more
+        specific Hanja characters.
+      </td>
+      <td><code>VK_HANJA</code> (0x19) [1]</td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_Hangul_Hanja</code> (0xFF34)<br /><code
+          >Qt::Key_Hangul_Hanja</code
+        >
+        (0x01001134)
+      </td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"JunjaMode"</code></td>
+      <td>
+        Selects the Junja mode, in which Korean is represented using single-byte
+        Latin characters.
+      </td>
+      <td><code>VK_JUNJA</code> (0x17)</td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_Hangul_Jeonja</code> (0xFF38)<br /><code
+          >Qt::Key_Hangul_Jeonja</code
+        >
+        (0x01001138)
+      </td>
+      <td></td>
+    </tr>
+  </thead>
 </table>
 
-<p>[1] <code>VK_HANGUL</code> and <code>VK_KANA</code> share the same numeric key value on Windows, as do <code>VK_HANJA</code> and <code>VK_KANJI</code>.</p>
+\[1] `VK_HANGUL` and `VK_KANA` share the same numeric key value on Windows, as do `VK_HANJA` and `VK_KANJI`.
 
-<h3 id="Japanese_keyboards_only">Japanese keyboards only</h3>
+### Japanese keyboards only
 
-<p>These keys are only available on Japanese keyboards.</p>
+These keys are only available on Japanese keyboards.
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th rowspan="2" scope="col"><code>KeyboardEvent.key</code> Value</th>
-   <th rowspan="2" scope="col">Description</th>
-   <th colspan="4" scope="col">Virtual Keycode</th>
-  </tr>
-  <tr>
-   <th scope="col">Windows</th>
-   <th scope="col">Mac</th>
-   <th scope="col">Linux</th>
-   <th scope="col">Android</th>
-  </tr>
-  <tr>
-   <td><code>"Eisu"</code> [1]</td>
-   <td>The <kbd>Eisu</kbd> key. This key's purpose is defined by the IME, but may be used to close the IME.</td>
-   <td></td>
-   <td><code>kVK_JIS_Eisu</code> (0x66)</td>
-   <td><code>GDK_KEY_Eisu_toggle</code> (0xFF2F)<br>
-    <code>Qt::Key_Eisu_toggle</code> (0x01001130)</td>
-   <td><code>KEYCODE_EISU</code> (212)</td>
-  </tr>
-  <tr>
-   <td><code>"Hankaku"</code> [3]</td>
-   <td>The <kbd>Hankaku</kbd> (half-width characters) key.</td>
-   <td><code>VK_OEM_AUTO</code> (0xF3)</td>
-   <td></td>
-   <td><code>GDK_KEY_Hankaku</code> (0xFF29)<br>
-    <code>Qt::Key_Hankaku</code> (0x01001129)</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"Hiragana"</code></td>
-   <td>The <kbd>Hiragana</kbd> key; selects Kana characters mode.</td>
-   <td><code>VK_OEM_COPY</code> (0xF2)</td>
-   <td></td>
-   <td><code>GDK_KEY_Hiragana</code> (0xFF25)<br>
-    <code>Qt::Key_Hiragana</code> (0x01001125)</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"HiraganaKatakana"</code> [6]</td>
-   <td>Toggles between the Hiragana and Katakana writing systems.</td>
-   <td></td>
-   <td></td>
-   <td><code>GDK_KEY_Hiragana_Katakana</code> (0xFF27)<br>
-    <code>Qt::Key_Hiragana_Katakana</code> (0x01001127)</td>
-   <td><code>KEYCODE_KATAKANA_HIRAGANA</code> (215)</td>
-  </tr>
-  <tr>
-   <td><code>"KanaMode"</code></td>
-   <td>The <kbd>Kana Mode</kbd> (Kana Lock) key.</td>
-   <td><code>VK_KANA</code> (0x15) [2]<br>
-    <code>VK_ATTN</code> (0xF6)</td>
-   <td></td>
-   <td><code>GDK_KEY_Kana_Lock</code> (0xFF2D)<br>
-    <code>GDK_KEY_Kana_Shift</code> (0xFF2E)<br>
-    <code>Qt::Key_Kana_Lock</code> (0x0100112D)<br>
-    <code>Qt::Key_Kana_Shift</code> (0x0100112E)</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"KanjiMode"</code></td>
-   <td>The <kbd>Kanji Mode</kbd> key. Enables entering Japanese text using the ideographic characters of Chinese origin.</td>
-   <td><code>VK_KANJI</code> [2]</td>
-   <td><code>kVK_JIS_Kana</code> (0x68)</td>
-   <td><code>GDK_KEY_Kanji</code> (0xFF21)<br>
-    <code>Qt::Key_Kanji</code> (0x01001121)</td>
-   <td><code>KEYCODE_KANA</code> (218)</td>
-  </tr>
-  <tr>
-   <td><code>"Katakana"</code></td>
-   <td>The <kbd>Katakana</kbd> key.</td>
-   <td><code>VK_OEM_FINISH</code> (0xF1)</td>
-   <td></td>
-   <td><code>GDK_KEY_Katakana</code> (0xFF26)<br>
-    <code>Qt::Key_Katakana</code> (0x01001126)</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"Romaji"</code> [5]</td>
-   <td>The <kbd>Romaji</kbd> key; selects the Roman character set.</td>
-   <td><code>VK_OEM_BACKTAB</code> (0xF5)</td>
-   <td></td>
-   <td><code>GDK_KEY_Romaji</code> (0xFF24)<br>
-    <code>Qt::Key_Romaji</code> (0x01001124)</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"Zenkaku"</code> [4]</td>
-   <td>The <kbd>Zenkaku</kbd> (full width) characters key.</td>
-   <td><code>VK_OEM_ENLW</code> (0xF4)</td>
-   <td></td>
-   <td><code>GDK_KEY_Zenkaku</code> (0xFF28)<br>
-    <code>Qt::Key_Zenkaku</code> (0x01001128)</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"ZenkakuHanaku"</code> [6]</td>
-   <td>The <kbd>Zenkaku/Hankaku</kbd> (full width/half width) toggle key.</td>
-   <td></td>
-   <td></td>
-   <td><code>GDK_KEY_Zenkaku_Hankaku</code> (0xFF2A)<br>
-    <code>Qt::Zenkaku_Hankaku</code> (0x0100112A)</td>
-   <td>
-    <p><code>KEYCODE_ZENKAKU_HANKAKU</code> (211)</p>
-   </td>
-  </tr>
- </thead>
+  <thead>
+    <tr>
+      <th rowspan="2" scope="col"><code>KeyboardEvent.key</code> Value</th>
+      <th rowspan="2" scope="col">Description</th>
+      <th colspan="4" scope="col">Virtual Keycode</th>
+    </tr>
+    <tr>
+      <th scope="col">Windows</th>
+      <th scope="col">Mac</th>
+      <th scope="col">Linux</th>
+      <th scope="col">Android</th>
+    </tr>
+    <tr>
+      <td><code>"Eisu"</code> [1]</td>
+      <td>
+        The <kbd>Eisu</kbd> key. This key's purpose is defined by the IME, but
+        may be used to close the IME.
+      </td>
+      <td></td>
+      <td><code>kVK_JIS_Eisu</code> (0x66)</td>
+      <td>
+        <code>GDK_KEY_Eisu_toggle</code> (0xFF2F)<br /><code
+          >Qt::Key_Eisu_toggle</code
+        >
+        (0x01001130)
+      </td>
+      <td><code>KEYCODE_EISU</code> (212)</td>
+    </tr>
+    <tr>
+      <td><code>"Hankaku"</code> [3]</td>
+      <td>The <kbd>Hankaku</kbd> (half-width characters) key.</td>
+      <td><code>VK_OEM_AUTO</code> (0xF3)</td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_Hankaku</code> (0xFF29)<br /><code>Qt::Key_Hankaku</code>
+        (0x01001129)
+      </td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"Hiragana"</code></td>
+      <td>The <kbd>Hiragana</kbd> key; selects Kana characters mode.</td>
+      <td><code>VK_OEM_COPY</code> (0xF2)</td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_Hiragana</code> (0xFF25)<br /><code
+          >Qt::Key_Hiragana</code
+        >
+        (0x01001125)
+      </td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"HiraganaKatakana"</code> [6]</td>
+      <td>Toggles between the Hiragana and Katakana writing systems.</td>
+      <td></td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_Hiragana_Katakana</code> (0xFF27)<br /><code
+          >Qt::Key_Hiragana_Katakana</code
+        >
+        (0x01001127)
+      </td>
+      <td><code>KEYCODE_KATAKANA_HIRAGANA</code> (215)</td>
+    </tr>
+    <tr>
+      <td><code>"KanaMode"</code></td>
+      <td>The <kbd>Kana Mode</kbd> (Kana Lock) key.</td>
+      <td><code>VK_KANA</code> (0x15) [2]<br /><code>VK_ATTN</code> (0xF6)</td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_Kana_Lock</code> (0xFF2D)<br /><code
+          >GDK_KEY_Kana_Shift</code
+        >
+        (0xFF2E)<br /><code>Qt::Key_Kana_Lock</code> (0x0100112D)<br /><code
+          >Qt::Key_Kana_Shift</code
+        >
+        (0x0100112E)
+      </td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"KanjiMode"</code></td>
+      <td>
+        The <kbd>Kanji Mode</kbd> key. Enables entering Japanese text using the
+        ideographic characters of Chinese origin.
+      </td>
+      <td><code>VK_KANJI</code> [2]</td>
+      <td><code>kVK_JIS_Kana</code> (0x68)</td>
+      <td>
+        <code>GDK_KEY_Kanji</code> (0xFF21)<br /><code>Qt::Key_Kanji</code>
+        (0x01001121)
+      </td>
+      <td><code>KEYCODE_KANA</code> (218)</td>
+    </tr>
+    <tr>
+      <td><code>"Katakana"</code></td>
+      <td>The <kbd>Katakana</kbd> key.</td>
+      <td><code>VK_OEM_FINISH</code> (0xF1)</td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_Katakana</code> (0xFF26)<br /><code
+          >Qt::Key_Katakana</code
+        >
+        (0x01001126)
+      </td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"Romaji"</code> [5]</td>
+      <td>The <kbd>Romaji</kbd> key; selects the Roman character set.</td>
+      <td><code>VK_OEM_BACKTAB</code> (0xF5)</td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_Romaji</code> (0xFF24)<br /><code>Qt::Key_Romaji</code>
+        (0x01001124)
+      </td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"Zenkaku"</code> [4]</td>
+      <td>The <kbd>Zenkaku</kbd> (full width) characters key.</td>
+      <td><code>VK_OEM_ENLW</code> (0xF4)</td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_Zenkaku</code> (0xFF28)<br /><code>Qt::Key_Zenkaku</code>
+        (0x01001128)
+      </td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"ZenkakuHanaku"</code> [6]</td>
+      <td>
+        The <kbd>Zenkaku/Hankaku</kbd> (full width/half width) toggle key.
+      </td>
+      <td></td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_Zenkaku_Hankaku</code> (0xFF2A)<br /><code
+          >Qt::Zenkaku_Hankaku</code
+        >
+        (0x0100112A)
+      </td>
+      <td>
+        <p><code>KEYCODE_ZENKAKU_HANKAKU</code> (211)</p>
+      </td>
+    </tr>
+  </thead>
 </table>
 
-<p>[1] Prior to Firefox 37, the <kbd>Eisu</kbd> key was mapped to <code>"RomanCharacters"</code> by mistake.</p>
+\[1] Prior to Firefox 37, the <kbd>Eisu</kbd> key was mapped to `"RomanCharacters"` by mistake.
 
-<p>[2] <code>VK_HANGUL</code> and <code>VK_KANA</code> share the same numeric key value on Windows, as do <code>VK_HANJA</code> and <code>VK_KANJI</code>.</p>
+\[2] `VK_HANGUL` and `VK_KANA` share the same numeric key value on Windows, as do `VK_HANJA` and `VK_KANJI`.
 
-<p>[3] Prior to Firefox 37, the <kbd>Hankaku</kbd> (half-width) key generated the key value <code>"HalfWidth"</code> on Firefox. Also, this key generates the value <code>"Unidentified"</code> on Internet Explorer (tested on release 9 and 11).</p>
+\[3] Prior to Firefox 37, the <kbd>Hankaku</kbd> (half-width) key generated the key value `"HalfWidth"` on Firefox. Also, this key generates the value `"Unidentified"` on Internet Explorer (tested on release 9 and 11).
 
-<p>[4] Internet Explorer (tested on release 9 and 11) reports <code>"Unidentified"</code> for the <kbd>Zenkaku</kbd> key; Firefox 36 and earlier identify this key as <code>"FullWidth"</code> on Japanese keyboard layouts and <code>"Unidentified"</code> on all other keyboard layouts. Firefox 37 and later, and all versions of Google Chrome, correctly return <code>"Zenkaku"</code>.</p>
+\[4] Internet Explorer (tested on release 9 and 11) reports `"Unidentified"` for the <kbd>Zenkaku</kbd> key; Firefox 36 and earlier identify this key as `"FullWidth"` on Japanese keyboard layouts and `"Unidentified"` on all other keyboard layouts. Firefox 37 and later, and all versions of Google Chrome, correctly return `"Zenkaku"`.
 
-<p>[5] <code>"Unidentified"</code> in Internet Explorer (tested on release 9 and 11). Firefox 36 and earlier identify the <kbd>Romaji</kbd> key as <code>"RomanCharacters"</code> on Japanese keyboards and <code>"Unidentified"</code> for other keyboards; this is corrected to return <code>"Romaji"</code> in Firefox 37 and later.</p>
+\[5] `"Unidentified"` in Internet Explorer (tested on release 9 and 11). Firefox 36 and earlier identify the <kbd>Romaji</kbd> key as `"RomanCharacters"` on Japanese keyboards and `"Unidentified"` for other keyboards; this is corrected to return `"Romaji"` in Firefox 37 and later.
 
-<p>[6] This key is reported as <code>"Unidentified"</code> prior to Firefox 37.</p>
+\[6] This key is reported as `"Unidentified"` prior to Firefox 37.
 
-<h3 id="Dead_keycodes_for_Linux">Dead keycodes for Linux</h3>
+### Dead keycodes for Linux
 
-<p>Linux generates accented characters using special <strong>dead keys</strong>; these are keys which are pressed in combination with character keys to generate accented forms of those characters. You can identify which specific dead key was used (if more than one exists) by examining the  {{domxref("KeyboardEvent")}}'s associated {{event("compositionupdate")}} event's  {{domxref("CompositionEvent.data", "data")}} property.</p>
+Linux generates accented characters using special **dead keys**; these are keys which are pressed in combination with character keys to generate accented forms of those characters. You can identify which specific dead key was used (if more than one exists) by examining the  {{domxref("KeyboardEvent")}}'s associated {{event("compositionupdate")}} event's  {{domxref("CompositionEvent.data", "data")}} property.
 
-<p>You can find a table of the dead keys and the characters they can be used with to generate accented or otherwise special characters on Linux using GTK</p>
+You can find a table of the dead keys and the characters they can be used with to generate accented or otherwise special characters on Linux using GTK
 
-<p>The value of {{domxref("CompositionEvent.data", "data")}} will be one of the following:</p>
+The value of {{domxref("CompositionEvent.data", "data")}} will be one of the following:
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <td><strong><code>CompositionEvent.data</code></strong> value</td>
-   <td>Symbol</td>
-   <td>Comments</td>
-  </tr>
-  <tr>
-   <td><code>GDK_KEY_dead_grave</code> (0xFE50)<br>
-    <code>Qt::Key_Dead_Grave</code> (0x01001250)</td>
-   <td>`</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>GDK_KEY_dead_acute</code> (0xFE51)<br>
-    <code>Qt::Key_Dead_Acute</code> (0x01001251)</td>
-   <td>´</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>GDK_KEY_dead_circumflex</code> (0xFE52)<br>
-    <code>Qt::Key_Dead_Circumflex</code> (0x01001252)</td>
-   <td>ˆ</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>GDK_KEY_dead_tilde</code> (0xFE53)<br>
-    <code>Qt::Key_Dead_Tilde</code> (0x01001253)</td>
-   <td>˜</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>GDK_KEY_dead_perispomeni</code> (0xFE53)</td>
-   <td> ͂</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>GDK_KEY_dead_macron</code> (0xFE54)<br>
-    <code>Qt::Key_Dead_Macron</code> (0x01001254)</td>
-   <td>¯</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>GDK_KEY_dead_breve</code> (0xFE55)<br>
-    <code>Qt::Key_Dead_Breve</code> (0x01001255)</td>
-   <td>˘</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>GDK_KEY_dead_abovedot</code> (0xFE56)<br>
-    <code>Qt::Key_Dead_Abovedot</code> (0x01001256)</td>
-   <td>˙</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>GDK_KEY_dead_diaeresis</code> (0xFE57)<br>
-    <code>Qt::Key_Dead_Diaeresis</code> (0x01001257)</td>
-   <td>¨</td>
-   <td>Also called an umlaut.</td>
-  </tr>
-  <tr>
-   <td><code>GDK_KEY_dead_abovering</code> (0xFE58)<br>
-    <code>Qt::Key_Dead_Abovering</code> (0x01001258)</td>
-   <td>˚</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>GDK_KEY_dead_doubleacute</code> (0xFE59)<br>
-    <code>Qt::Key_Dead_Doubleacute</code> (0x01001259)</td>
-   <td>˝</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>GDK_KEY_dead_caron</code> (0xFE5A)<br>
-    <code>Qt::Key_Dead_Caron</code> (0x0100125A)</td>
-   <td>ˇ</td>
-   <td>Also called a háček; used in Czech among other languages.</td>
-  </tr>
-  <tr>
-   <td><code>GDK_KEY_dead_cedilla</code> (0xFE5B)<br>
-    <code>Qt::Key_Dead_Cedilla</code> (0x0100125B)</td>
-   <td>¸</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>GDK_KEY_dead_ogonek</code> (0xFE5C)<br>
-    <code>Qt::Key_Dead_Ogonek</code> (0x0100125C)</td>
-   <td>˛</td>
-   <td>Also called a nosinė; used in Polish and Old Irish.</td>
-  </tr>
-  <tr>
-   <td><code>GDK_KEY_dead_iota</code> (0xFE5D)<br>
-    <code>Qt::Key_Dead_Iota</code> (0x0100125D)</td>
-   <td> ͅ</td>
-   <td>Iota subscript.</td>
-  </tr>
-  <tr>
-   <td><code>GDK_KEY_dead_voiced_sound</code> (0xFE5E)<br>
-    <code>Qt::Key_Dead_Voiced_Sound</code> (0x0100125E)</td>
-   <td>゙</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>GDK_KEY_dead_semivoiced_sound</code> (0xFE5F)<br>
-    <code>Qt::Key_Dead_Semivoiced_Sound</code> (0x0100125F)</td>
-   <td>゚</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>GDK_KEY_dead_belowdot</code> (0xFE60)<br>
-    <code>Qt::Key_Dead_Belowdot</code> (0x01001260)</td>
-   <td>̣̣</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>GDK_KEY_dead_hook</code> (0xFE61)<br>
-    <code>Qt::Key_Dead_Hook</code> (0x01001261)</td>
-   <td>  ̡</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>GDK_KEY_dead_horn</code> (0xFE62)<br>
-    <code>Qt::Key_Dead_Horn</code> (0x01001262)</td>
-   <td> ̛</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>GDK_KEY_dead_stroke</code> (0xFE63)</td>
-   <td> ̶̶</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>GDK_KEY_dead_abovecomma</code> (0xFE64)</td>
-   <td> ̓̓</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>GDK_KEY_dead_psili</code> (0xFE64)</td>
-   <td> ᾿</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>GDK_KEY_dead_abovereversedcomma</code> (0xFE65)</td>
-   <td>ʽ</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>GDK_KEY_dead_dasia</code> (0xFE65)</td>
-   <td>῾</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>GDK_KEY_dead_doublegrave</code> (0xFE66)</td>
-   <td> ̏</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>GDK_KEY_dead_belowring</code> (0xFE67)</td>
-   <td>˳</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>GDK_KEY_dead_belowmacron</code> (0xFE68)</td>
-   <td> ̱</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>GDK_KEY_dead_belowcircumflex</code> (0xFE69)</td>
-   <td>ꞈ</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>GDK_KEY_dead_belowtilde</code> (0xFE6A)</td>
-   <td>̰</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>GDK_KEY_dead_belowbreve</code> (0xFE6B)</td>
-   <td>̮</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>GDK_KEY_dead_belowdiaeresis</code> (0xFE6C)</td>
-   <td> ̤</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>GDK_KEY_dead_invertedbreve</code> (0xFE6D)</td>
-   <td>̯</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>GDK_KEY_dead_belowcomma</code> (0xFE6E)</td>
-   <td>̦</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>GDK_KEY_dead_currency</code> (0xFE6F)</td>
-   <td></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>GDK_KEY_dead_a</code> (0xFE80)</td>
-   <td></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>GDK_KEY_dead_A</code> (0xFE81)</td>
-   <td></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>GDK_KEY_dead_e</code> (0xFE82)</td>
-   <td></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>GDK_KEY_dead_E</code> (0xFE83)</td>
-   <td></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>GDK_KEY_dead_i</code> (0xFE84)</td>
-   <td></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>GDK_KEY_dead_I</code> (0xFE85)</td>
-   <td></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>GDK_KEY_dead_o</code> (0xFE86)</td>
-   <td></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>GDK_KEY_dead_O</code> (0xFE87)</td>
-   <td></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>GDK_KEY_dead_u</code> (0xFE88)</td>
-   <td></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>GDK_KEY_dead_U</code> (0xFE89)</td>
-   <td></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>GDK_KEY_dead_small_schwa</code> (0xFE8A)</td>
-   <td>ə</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>GDK_KEY_dead_capital_schwa</code> (0xFE8B)</td>
-   <td>Ə</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>GDK_KEY_dead_greek</code> (0xFE8C)</td>
-   <td></td>
-   <td></td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <td>
+        <strong><code>CompositionEvent.data</code></strong> value
+      </td>
+      <td>Symbol</td>
+      <td>Comments</td>
+    </tr>
+    <tr>
+      <td>
+        <code>GDK_KEY_dead_grave</code> (0xFE50)<br /><code
+          >Qt::Key_Dead_Grave</code
+        >
+        (0x01001250)
+      </td>
+      <td>`</td>
+      <td></td>
+    </tr>
+    <tr>
+      <td>
+        <code>GDK_KEY_dead_acute</code> (0xFE51)<br /><code
+          >Qt::Key_Dead_Acute</code
+        >
+        (0x01001251)
+      </td>
+      <td>´</td>
+      <td></td>
+    </tr>
+    <tr>
+      <td>
+        <code>GDK_KEY_dead_circumflex</code> (0xFE52)<br /><code
+          >Qt::Key_Dead_Circumflex</code
+        >
+        (0x01001252)
+      </td>
+      <td>ˆ</td>
+      <td></td>
+    </tr>
+    <tr>
+      <td>
+        <code>GDK_KEY_dead_tilde</code> (0xFE53)<br /><code
+          >Qt::Key_Dead_Tilde</code
+        >
+        (0x01001253)
+      </td>
+      <td>˜</td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>GDK_KEY_dead_perispomeni</code> (0xFE53)</td>
+      <td> ͂</td>
+      <td></td>
+    </tr>
+    <tr>
+      <td>
+        <code>GDK_KEY_dead_macron</code> (0xFE54)<br /><code
+          >Qt::Key_Dead_Macron</code
+        >
+        (0x01001254)
+      </td>
+      <td>¯</td>
+      <td></td>
+    </tr>
+    <tr>
+      <td>
+        <code>GDK_KEY_dead_breve</code> (0xFE55)<br /><code
+          >Qt::Key_Dead_Breve</code
+        >
+        (0x01001255)
+      </td>
+      <td>˘</td>
+      <td></td>
+    </tr>
+    <tr>
+      <td>
+        <code>GDK_KEY_dead_abovedot</code> (0xFE56)<br /><code
+          >Qt::Key_Dead_Abovedot</code
+        >
+        (0x01001256)
+      </td>
+      <td>˙</td>
+      <td></td>
+    </tr>
+    <tr>
+      <td>
+        <code>GDK_KEY_dead_diaeresis</code> (0xFE57)<br /><code
+          >Qt::Key_Dead_Diaeresis</code
+        >
+        (0x01001257)
+      </td>
+      <td>¨</td>
+      <td>Also called an umlaut.</td>
+    </tr>
+    <tr>
+      <td>
+        <code>GDK_KEY_dead_abovering</code> (0xFE58)<br /><code
+          >Qt::Key_Dead_Abovering</code
+        >
+        (0x01001258)
+      </td>
+      <td>˚</td>
+      <td></td>
+    </tr>
+    <tr>
+      <td>
+        <code>GDK_KEY_dead_doubleacute</code> (0xFE59)<br /><code
+          >Qt::Key_Dead_Doubleacute</code
+        >
+        (0x01001259)
+      </td>
+      <td>˝</td>
+      <td></td>
+    </tr>
+    <tr>
+      <td>
+        <code>GDK_KEY_dead_caron</code> (0xFE5A)<br /><code
+          >Qt::Key_Dead_Caron</code
+        >
+        (0x0100125A)
+      </td>
+      <td>ˇ</td>
+      <td>Also called a háček; used in Czech among other languages.</td>
+    </tr>
+    <tr>
+      <td>
+        <code>GDK_KEY_dead_cedilla</code> (0xFE5B)<br /><code
+          >Qt::Key_Dead_Cedilla</code
+        >
+        (0x0100125B)
+      </td>
+      <td>¸</td>
+      <td></td>
+    </tr>
+    <tr>
+      <td>
+        <code>GDK_KEY_dead_ogonek</code> (0xFE5C)<br /><code
+          >Qt::Key_Dead_Ogonek</code
+        >
+        (0x0100125C)
+      </td>
+      <td>˛</td>
+      <td>Also called a nosinė; used in Polish and Old Irish.</td>
+    </tr>
+    <tr>
+      <td>
+        <code>GDK_KEY_dead_iota</code> (0xFE5D)<br /><code
+          >Qt::Key_Dead_Iota</code
+        >
+        (0x0100125D)
+      </td>
+      <td> ͅ</td>
+      <td>Iota subscript.</td>
+    </tr>
+    <tr>
+      <td>
+        <code>GDK_KEY_dead_voiced_sound</code> (0xFE5E)<br /><code
+          >Qt::Key_Dead_Voiced_Sound</code
+        >
+        (0x0100125E)
+      </td>
+      <td>゙</td>
+      <td></td>
+    </tr>
+    <tr>
+      <td>
+        <code>GDK_KEY_dead_semivoiced_sound</code> (0xFE5F)<br /><code
+          >Qt::Key_Dead_Semivoiced_Sound</code
+        >
+        (0x0100125F)
+      </td>
+      <td>゚</td>
+      <td></td>
+    </tr>
+    <tr>
+      <td>
+        <code>GDK_KEY_dead_belowdot</code> (0xFE60)<br /><code
+          >Qt::Key_Dead_Belowdot</code
+        >
+        (0x01001260)
+      </td>
+      <td>̣̣</td>
+      <td></td>
+    </tr>
+    <tr>
+      <td>
+        <code>GDK_KEY_dead_hook</code> (0xFE61)<br /><code
+          >Qt::Key_Dead_Hook</code
+        >
+        (0x01001261)
+      </td>
+      <td>  ̡</td>
+      <td></td>
+    </tr>
+    <tr>
+      <td>
+        <code>GDK_KEY_dead_horn</code> (0xFE62)<br /><code
+          >Qt::Key_Dead_Horn</code
+        >
+        (0x01001262)
+      </td>
+      <td> ̛</td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>GDK_KEY_dead_stroke</code> (0xFE63)</td>
+      <td> ̶̶</td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>GDK_KEY_dead_abovecomma</code> (0xFE64)</td>
+      <td> ̓̓</td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>GDK_KEY_dead_psili</code> (0xFE64)</td>
+      <td> ᾿</td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>GDK_KEY_dead_abovereversedcomma</code> (0xFE65)</td>
+      <td>ʽ</td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>GDK_KEY_dead_dasia</code> (0xFE65)</td>
+      <td>῾</td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>GDK_KEY_dead_doublegrave</code> (0xFE66)</td>
+      <td> ̏</td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>GDK_KEY_dead_belowring</code> (0xFE67)</td>
+      <td>˳</td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>GDK_KEY_dead_belowmacron</code> (0xFE68)</td>
+      <td> ̱</td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>GDK_KEY_dead_belowcircumflex</code> (0xFE69)</td>
+      <td>ꞈ</td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>GDK_KEY_dead_belowtilde</code> (0xFE6A)</td>
+      <td>̰</td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>GDK_KEY_dead_belowbreve</code> (0xFE6B)</td>
+      <td>̮</td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>GDK_KEY_dead_belowdiaeresis</code> (0xFE6C)</td>
+      <td> ̤</td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>GDK_KEY_dead_invertedbreve</code> (0xFE6D)</td>
+      <td>̯</td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>GDK_KEY_dead_belowcomma</code> (0xFE6E)</td>
+      <td>̦</td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>GDK_KEY_dead_currency</code> (0xFE6F)</td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>GDK_KEY_dead_a</code> (0xFE80)</td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>GDK_KEY_dead_A</code> (0xFE81)</td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>GDK_KEY_dead_e</code> (0xFE82)</td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>GDK_KEY_dead_E</code> (0xFE83)</td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>GDK_KEY_dead_i</code> (0xFE84)</td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>GDK_KEY_dead_I</code> (0xFE85)</td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>GDK_KEY_dead_o</code> (0xFE86)</td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>GDK_KEY_dead_O</code> (0xFE87)</td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>GDK_KEY_dead_u</code> (0xFE88)</td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>GDK_KEY_dead_U</code> (0xFE89)</td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>GDK_KEY_dead_small_schwa</code> (0xFE8A)</td>
+      <td>ə</td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>GDK_KEY_dead_capital_schwa</code> (0xFE8B)</td>
+      <td>Ə</td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>GDK_KEY_dead_greek</code> (0xFE8C)</td>
+      <td></td>
+      <td></td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Function_keys">Function keys</h2>
+## Function keys
 
-<p>While various platforms support different numbers of the general-purpose function keys, such as <kbd>F1</kbd>-<kbd>F12</kbd> (or <kbd>F1</kbd>-<kbd>F10</kbd>, or <kbd>F1</kbd>-<kbd>F15</kbd>, or...), the first few are specifically defined as follows. If more function keys are available, their names continue the pattern here by continuing to increment the numeric portion of each key's name, so that, for example, <code>"F24"</code> is a valid key value.</p>
+While various platforms support different numbers of the general-purpose function keys, such as <kbd>F1</kbd>-<kbd>F12</kbd> (or <kbd>F1</kbd>-<kbd>F10</kbd>, or <kbd>F1</kbd>-<kbd>F15</kbd>, or...), the first few are specifically defined as follows. If more function keys are available, their names continue the pattern here by continuing to increment the numeric portion of each key's name, so that, for example, `"F24"` is a valid key value.
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th rowspan="2" scope="col"><code>KeyboardEvent.key</code> value</th>
-   <th rowspan="2" scope="col">Description</th>
-   <th colspan="4" scope="col">Virtual Keycode</th>
-  </tr>
-  <tr>
-   <th scope="col">Windows</th>
-   <th scope="col">Mac</th>
-   <th scope="col">Linux</th>
-   <th scope="col">Android</th>
-  </tr>
-  <tr>
-   <td><code>"F1"</code></td>
-   <td>The first general-purpose function key, <kbd>F1</kbd>.</td>
-   <td><code>VK_F1</code> (0x70)</td>
-   <td><code>kVK_F1</code> (0x7A)</td>
-   <td><code>GDK_KEY_F1</code> (0xFFBE)<br>
-    <code>GDK_KEY_KP_F1</code> (0xFF91)<br>
-    <code>Qt::Key_F1</code> (0x01000030)</td>
-   <td><code>KEYCODE_F1</code> (131)</td>
-  </tr>
-  <tr>
-   <td><code>"F2"</code></td>
-   <td>The <kbd>F2</kbd> key.</td>
-   <td><code>VK_F2</code> (0x71)</td>
-   <td><code>kVK_F2</code> (0x78)</td>
-   <td><code>GDK_KEY_F2</code> (0xFFBF)<br>
-    <code>GDK_KEY_KP_F2</code> (0xFF92)<br>
-    <code>Qt::Key_F2</code> (0x01000031)</td>
-   <td><code>KEYCODE_F2</code> (132)</td>
-  </tr>
-  <tr>
-   <td><code>"F3"</code></td>
-   <td>The <kbd>F3</kbd> key.</td>
-   <td><code>VK_F3</code> (0x72)</td>
-   <td><code>kVK_F3</code> (0x63)</td>
-   <td><code>GDK_KEY_F3</code> (0xFFC0)<br>
-    <code>GDK_KEY_KP_F3</code> (0xFF93)<br>
-    <code>Qt::Key_F3</code> (0x01000032)</td>
-   <td><code>KEYCODE_F3</code> (133)</td>
-  </tr>
-  <tr>
-   <td><code>"F4"</code></td>
-   <td>The <kbd>F4</kbd> key.</td>
-   <td><code>VK_F4</code> (0x73)</td>
-   <td><code>kVK_F4</code> (0x76)</td>
-   <td><code>GDK_KEY_F4</code> (0xFFC1)<br>
-    <code>GDK_KEY_KP_F4</code> (0xFF94)<br>
-    <code>Qt::Key_F4</code> (0x01000033)</td>
-   <td><code>KEYCODE_F4</code> (134)</td>
-  </tr>
-  <tr>
-   <td><code>"F5"</code></td>
-   <td>The <kbd>F5</kbd> key.</td>
-   <td><code>VK_F5</code> (0x74)</td>
-   <td><code>kVK_F5</code> (0x60)</td>
-   <td><code>GDK_KEY_F5</code> (0xFFC2)<br>
-    <code>Qt::Key_F5</code> (0x01000034)</td>
-   <td><code>KEYCODE_F5</code> (135)</td>
-  </tr>
-  <tr>
-   <td><code>"F6"</code></td>
-   <td>The <kbd>F6</kbd> key.</td>
-   <td><code>VK_F6</code> (0x75)</td>
-   <td><code>kVK_F6</code> (0x61)</td>
-   <td><code>GDK_KEY_F6</code> (0xFFC3)<br>
-    <code>Qt::Key_F6</code> (0x01000035)</td>
-   <td><code>KEYCODE_F6</code> (136)</td>
-  </tr>
-  <tr>
-   <td><code>"F7"</code></td>
-   <td>The <kbd>F7</kbd> key.</td>
-   <td><code>VK_F7</code> (0x76)</td>
-   <td><code>kVK_F7</code> (0x62)</td>
-   <td><code>GDK_KEY_F7</code> (0xFFC4)<br>
-    <code>Qt::Key_F7</code> (0x01000036)</td>
-   <td><code>KEYCODE_F7</code> (137)</td>
-  </tr>
-  <tr>
-   <td><code>"F8"</code></td>
-   <td>The <kbd>F8</kbd> key.</td>
-   <td><code>VK_F8</code> (0x77)</td>
-   <td><code>kVK_F8</code> (0x64)</td>
-   <td><code>GDK_KEY_F8</code> (0xFFC5)<br>
-    <code>Qt::Key_F8</code> (0x01000037)</td>
-   <td><code>KEYCODE_F8</code> (138)</td>
-  </tr>
-  <tr>
-   <td><code>"F9"</code></td>
-   <td>The <kbd>F9</kbd> key.</td>
-   <td><code>VK_F9</code> (0x78)</td>
-   <td><code>kVK_F9</code> (0x65)</td>
-   <td><code>GDK_KEY_F9</code> (0xFFC6)<br>
-    <code>Qt::Key_F9</code> (0x01000038)</td>
-   <td><code>KEYCODE_F9</code> (139)</td>
-  </tr>
-  <tr>
-   <td><code>"F10"</code></td>
-   <td>The <kbd>F10</kbd> key.</td>
-   <td><code>VK_F10</code> (0x79)</td>
-   <td><code>kVK_F10</code> (0x6D)</td>
-   <td><code>GDK_KEY_F10</code> (0xFFC7)<br>
-    <code>Qt::Key_F10</code> (0x01000039)</td>
-   <td><code>KEYCODE_F10</code> (140)</td>
-  </tr>
-  <tr>
-   <td><code>"F11"</code></td>
-   <td>The <kbd>F11</kbd> key.</td>
-   <td><code>VK_F11</code> (0x7A)</td>
-   <td><code>kVK_F11</code> (0x67)</td>
-   <td><code>GDK_KEY_F11</code> (0xFFC8)<br>
-    <code>Qt::Key_F11</code> (0x0100003A)</td>
-   <td><code>KEYCODE_F11</code> (141)</td>
-  </tr>
-  <tr>
-   <td><code>"F12"</code></td>
-   <td>The <kbd>F12</kbd> key.</td>
-   <td><code>VK_F12</code> (0x7B)</td>
-   <td><code>kVK_F12</code> (0x6F)</td>
-   <td><code>GDK_KEY_F12</code> (0xFFC9)<br>
-    <code>Qt::Key_F12</code> (0x0100003B)</td>
-   <td><code>KEYCODE_F12</code> (142)</td>
-  </tr>
-  <tr>
-   <td><code>"F13"</code></td>
-   <td>The <kbd>F13</kbd> key.</td>
-   <td><code>VK_F13</code> (0x7C)</td>
-   <td><code>kVK_F13</code> (0x69)</td>
-   <td><code>GDK_KEY_F13</code> (0xFFCA)<br>
-    <code>Qt::Key_F13</code> (0x0100003C)</td>
-   <td><code>KEYCODE_F13</code></td>
-  </tr>
-  <tr>
-   <td><code>"F14"</code></td>
-   <td>The <kbd>F14</kbd> key.</td>
-   <td><code>VK_F14</code> (0x7D)</td>
-   <td><code>kVK_F14</code> (0x6B)</td>
-   <td><code>GDK_KEY_F14</code> (0xFFCB)<br>
-    <code>Qt::Key_F1</code>4 (0x0100003D)</td>
-   <td><code>KEYCODE_F14</code></td>
-  </tr>
-  <tr>
-   <td><code>"F15"</code></td>
-   <td>The <kbd>F15</kbd> key.</td>
-   <td><code>VK_F15</code> (0x7E)</td>
-   <td><code>kVK_F15</code> (0x71)</td>
-   <td><code>GDK_KEY_F15</code> (0xFFCC)<br>
-    <code>Qt::Key_F1</code>5 (0x0100003E)</td>
-   <td><code>KEYCODE_F15</code></td>
-  </tr>
-  <tr>
-   <td><code>"F16"</code></td>
-   <td>The <kbd>F16</kbd> key.</td>
-   <td><code>VK_F16</code> (0x7F)</td>
-   <td><code>kVK_F16</code> (0x6A)</td>
-   <td><code>GDK_KEY_F16</code> (0xFFCD)<br>
-    <code>Qt::Key_F1</code>6 (0x0100003F)</td>
-   <td><code>KEYCODE_F16</code></td>
-  </tr>
-  <tr>
-   <td><code>"F17"</code></td>
-   <td>The <kbd>F17</kbd> key.</td>
-   <td><code>VK_F17</code> (0x80)</td>
-   <td><code>kVK_F17</code> (0x40)</td>
-   <td><code>GDK_KEY_F17</code> (0xFFCE)<br>
-    <code>Qt::Key_F1</code>7 (0x01000040)</td>
-   <td><code>KEYCODE_F17</code></td>
-  </tr>
-  <tr>
-   <td><code>"F18"</code></td>
-   <td>The <kbd>F18</kbd> key.</td>
-   <td><code>VK_F18</code> (0x81)</td>
-   <td><code>kVK_F18</code> (0x4F)</td>
-   <td><code>GDK_KEY_F18</code> (0xFFCF)<br>
-    <code>Qt::Key_F1</code>8 (0x01000041)</td>
-   <td><code>KEYCODE_F18</code></td>
-  </tr>
-  <tr>
-   <td><code>"F19"</code></td>
-   <td>The <kbd>F19</kbd> key.</td>
-   <td><code>VK_F19</code> (0x82)</td>
-   <td><code>kVK_F19</code> (0x50)</td>
-   <td><code>GDK_KEY_F19</code> (0xFFD0)<br>
-    <code>Qt::Key_F1</code>9 (0x01000042)</td>
-   <td><code>KEYCODE_F19</code></td>
-  </tr>
-  <tr>
-   <td><code>"F20"</code></td>
-   <td>The <kbd>F20</kbd> key.</td>
-   <td><code>VK_F20</code> (0x83)</td>
-   <td><code>kVK_F20</code> (0x5A)</td>
-   <td><code>GDK_KEY_F20</code> (0xFFD1)<br>
-    <code>Qt::Key_F20</code> (0x01000043)</td>
-   <td><code>KEYCODE_F20</code></td>
-  </tr>
-  <tr>
-   <td><code>"Soft1"</code></td>
-   <td>The first general-purpose virtual function key.</td>
-   <td></td>
-   <td></td>
-   <td><code>Qt::Key_Context1</code> (0x01100000)</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"Soft2"</code></td>
-   <td>The second general-purpose virtual function key.</td>
-   <td></td>
-   <td></td>
-   <td><code>Qt::Key_Context2</code> (0x01100001)</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"Soft3"</code></td>
-   <td>The third general-purpose virtual function key.</td>
-   <td></td>
-   <td></td>
-   <td><code>Qt::Key_Context3</code> (0x01100002)</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"Soft4"</code></td>
-   <td>The fourth general-purpose virtual function key.</td>
-   <td></td>
-   <td></td>
-   <td><code>Qt::Key_Context4</code> (0x01100003)</td>
-   <td></td>
-  </tr>
- </thead>
+  <thead>
+    <tr>
+      <th rowspan="2" scope="col"><code>KeyboardEvent.key</code> value</th>
+      <th rowspan="2" scope="col">Description</th>
+      <th colspan="4" scope="col">Virtual Keycode</th>
+    </tr>
+    <tr>
+      <th scope="col">Windows</th>
+      <th scope="col">Mac</th>
+      <th scope="col">Linux</th>
+      <th scope="col">Android</th>
+    </tr>
+    <tr>
+      <td><code>"F1"</code></td>
+      <td>The first general-purpose function key, <kbd>F1</kbd>.</td>
+      <td><code>VK_F1</code> (0x70)</td>
+      <td><code>kVK_F1</code> (0x7A)</td>
+      <td>
+        <code>GDK_KEY_F1</code> (0xFFBE)<br /><code>GDK_KEY_KP_F1</code>
+        (0xFF91)<br /><code>Qt::Key_F1</code> (0x01000030)
+      </td>
+      <td><code>KEYCODE_F1</code> (131)</td>
+    </tr>
+    <tr>
+      <td><code>"F2"</code></td>
+      <td>The <kbd>F2</kbd> key.</td>
+      <td><code>VK_F2</code> (0x71)</td>
+      <td><code>kVK_F2</code> (0x78)</td>
+      <td>
+        <code>GDK_KEY_F2</code> (0xFFBF)<br /><code>GDK_KEY_KP_F2</code>
+        (0xFF92)<br /><code>Qt::Key_F2</code> (0x01000031)
+      </td>
+      <td><code>KEYCODE_F2</code> (132)</td>
+    </tr>
+    <tr>
+      <td><code>"F3"</code></td>
+      <td>The <kbd>F3</kbd> key.</td>
+      <td><code>VK_F3</code> (0x72)</td>
+      <td><code>kVK_F3</code> (0x63)</td>
+      <td>
+        <code>GDK_KEY_F3</code> (0xFFC0)<br /><code>GDK_KEY_KP_F3</code>
+        (0xFF93)<br /><code>Qt::Key_F3</code> (0x01000032)
+      </td>
+      <td><code>KEYCODE_F3</code> (133)</td>
+    </tr>
+    <tr>
+      <td><code>"F4"</code></td>
+      <td>The <kbd>F4</kbd> key.</td>
+      <td><code>VK_F4</code> (0x73)</td>
+      <td><code>kVK_F4</code> (0x76)</td>
+      <td>
+        <code>GDK_KEY_F4</code> (0xFFC1)<br /><code>GDK_KEY_KP_F4</code>
+        (0xFF94)<br /><code>Qt::Key_F4</code> (0x01000033)
+      </td>
+      <td><code>KEYCODE_F4</code> (134)</td>
+    </tr>
+    <tr>
+      <td><code>"F5"</code></td>
+      <td>The <kbd>F5</kbd> key.</td>
+      <td><code>VK_F5</code> (0x74)</td>
+      <td><code>kVK_F5</code> (0x60)</td>
+      <td>
+        <code>GDK_KEY_F5</code> (0xFFC2)<br /><code>Qt::Key_F5</code>
+        (0x01000034)
+      </td>
+      <td><code>KEYCODE_F5</code> (135)</td>
+    </tr>
+    <tr>
+      <td><code>"F6"</code></td>
+      <td>The <kbd>F6</kbd> key.</td>
+      <td><code>VK_F6</code> (0x75)</td>
+      <td><code>kVK_F6</code> (0x61)</td>
+      <td>
+        <code>GDK_KEY_F6</code> (0xFFC3)<br /><code>Qt::Key_F6</code>
+        (0x01000035)
+      </td>
+      <td><code>KEYCODE_F6</code> (136)</td>
+    </tr>
+    <tr>
+      <td><code>"F7"</code></td>
+      <td>The <kbd>F7</kbd> key.</td>
+      <td><code>VK_F7</code> (0x76)</td>
+      <td><code>kVK_F7</code> (0x62)</td>
+      <td>
+        <code>GDK_KEY_F7</code> (0xFFC4)<br /><code>Qt::Key_F7</code>
+        (0x01000036)
+      </td>
+      <td><code>KEYCODE_F7</code> (137)</td>
+    </tr>
+    <tr>
+      <td><code>"F8"</code></td>
+      <td>The <kbd>F8</kbd> key.</td>
+      <td><code>VK_F8</code> (0x77)</td>
+      <td><code>kVK_F8</code> (0x64)</td>
+      <td>
+        <code>GDK_KEY_F8</code> (0xFFC5)<br /><code>Qt::Key_F8</code>
+        (0x01000037)
+      </td>
+      <td><code>KEYCODE_F8</code> (138)</td>
+    </tr>
+    <tr>
+      <td><code>"F9"</code></td>
+      <td>The <kbd>F9</kbd> key.</td>
+      <td><code>VK_F9</code> (0x78)</td>
+      <td><code>kVK_F9</code> (0x65)</td>
+      <td>
+        <code>GDK_KEY_F9</code> (0xFFC6)<br /><code>Qt::Key_F9</code>
+        (0x01000038)
+      </td>
+      <td><code>KEYCODE_F9</code> (139)</td>
+    </tr>
+    <tr>
+      <td><code>"F10"</code></td>
+      <td>The <kbd>F10</kbd> key.</td>
+      <td><code>VK_F10</code> (0x79)</td>
+      <td><code>kVK_F10</code> (0x6D)</td>
+      <td>
+        <code>GDK_KEY_F10</code> (0xFFC7)<br /><code>Qt::Key_F10</code>
+        (0x01000039)
+      </td>
+      <td><code>KEYCODE_F10</code> (140)</td>
+    </tr>
+    <tr>
+      <td><code>"F11"</code></td>
+      <td>The <kbd>F11</kbd> key.</td>
+      <td><code>VK_F11</code> (0x7A)</td>
+      <td><code>kVK_F11</code> (0x67)</td>
+      <td>
+        <code>GDK_KEY_F11</code> (0xFFC8)<br /><code>Qt::Key_F11</code>
+        (0x0100003A)
+      </td>
+      <td><code>KEYCODE_F11</code> (141)</td>
+    </tr>
+    <tr>
+      <td><code>"F12"</code></td>
+      <td>The <kbd>F12</kbd> key.</td>
+      <td><code>VK_F12</code> (0x7B)</td>
+      <td><code>kVK_F12</code> (0x6F)</td>
+      <td>
+        <code>GDK_KEY_F12</code> (0xFFC9)<br /><code>Qt::Key_F12</code>
+        (0x0100003B)
+      </td>
+      <td><code>KEYCODE_F12</code> (142)</td>
+    </tr>
+    <tr>
+      <td><code>"F13"</code></td>
+      <td>The <kbd>F13</kbd> key.</td>
+      <td><code>VK_F13</code> (0x7C)</td>
+      <td><code>kVK_F13</code> (0x69)</td>
+      <td>
+        <code>GDK_KEY_F13</code> (0xFFCA)<br /><code>Qt::Key_F13</code>
+        (0x0100003C)
+      </td>
+      <td><code>KEYCODE_F13</code></td>
+    </tr>
+    <tr>
+      <td><code>"F14"</code></td>
+      <td>The <kbd>F14</kbd> key.</td>
+      <td><code>VK_F14</code> (0x7D)</td>
+      <td><code>kVK_F14</code> (0x6B)</td>
+      <td>
+        <code>GDK_KEY_F14</code> (0xFFCB)<br /><code>Qt::Key_F1</code>4
+        (0x0100003D)
+      </td>
+      <td><code>KEYCODE_F14</code></td>
+    </tr>
+    <tr>
+      <td><code>"F15"</code></td>
+      <td>The <kbd>F15</kbd> key.</td>
+      <td><code>VK_F15</code> (0x7E)</td>
+      <td><code>kVK_F15</code> (0x71)</td>
+      <td>
+        <code>GDK_KEY_F15</code> (0xFFCC)<br /><code>Qt::Key_F1</code>5
+        (0x0100003E)
+      </td>
+      <td><code>KEYCODE_F15</code></td>
+    </tr>
+    <tr>
+      <td><code>"F16"</code></td>
+      <td>The <kbd>F16</kbd> key.</td>
+      <td><code>VK_F16</code> (0x7F)</td>
+      <td><code>kVK_F16</code> (0x6A)</td>
+      <td>
+        <code>GDK_KEY_F16</code> (0xFFCD)<br /><code>Qt::Key_F1</code>6
+        (0x0100003F)
+      </td>
+      <td><code>KEYCODE_F16</code></td>
+    </tr>
+    <tr>
+      <td><code>"F17"</code></td>
+      <td>The <kbd>F17</kbd> key.</td>
+      <td><code>VK_F17</code> (0x80)</td>
+      <td><code>kVK_F17</code> (0x40)</td>
+      <td>
+        <code>GDK_KEY_F17</code> (0xFFCE)<br /><code>Qt::Key_F1</code>7
+        (0x01000040)
+      </td>
+      <td><code>KEYCODE_F17</code></td>
+    </tr>
+    <tr>
+      <td><code>"F18"</code></td>
+      <td>The <kbd>F18</kbd> key.</td>
+      <td><code>VK_F18</code> (0x81)</td>
+      <td><code>kVK_F18</code> (0x4F)</td>
+      <td>
+        <code>GDK_KEY_F18</code> (0xFFCF)<br /><code>Qt::Key_F1</code>8
+        (0x01000041)
+      </td>
+      <td><code>KEYCODE_F18</code></td>
+    </tr>
+    <tr>
+      <td><code>"F19"</code></td>
+      <td>The <kbd>F19</kbd> key.</td>
+      <td><code>VK_F19</code> (0x82)</td>
+      <td><code>kVK_F19</code> (0x50)</td>
+      <td>
+        <code>GDK_KEY_F19</code> (0xFFD0)<br /><code>Qt::Key_F1</code>9
+        (0x01000042)
+      </td>
+      <td><code>KEYCODE_F19</code></td>
+    </tr>
+    <tr>
+      <td><code>"F20"</code></td>
+      <td>The <kbd>F20</kbd> key.</td>
+      <td><code>VK_F20</code> (0x83)</td>
+      <td><code>kVK_F20</code> (0x5A)</td>
+      <td>
+        <code>GDK_KEY_F20</code> (0xFFD1)<br /><code>Qt::Key_F20</code>
+        (0x01000043)
+      </td>
+      <td><code>KEYCODE_F20</code></td>
+    </tr>
+    <tr>
+      <td><code>"Soft1"</code></td>
+      <td>The first general-purpose virtual function key.</td>
+      <td></td>
+      <td></td>
+      <td><code>Qt::Key_Context1</code> (0x01100000)</td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"Soft2"</code></td>
+      <td>The second general-purpose virtual function key.</td>
+      <td></td>
+      <td></td>
+      <td><code>Qt::Key_Context2</code> (0x01100001)</td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"Soft3"</code></td>
+      <td>The third general-purpose virtual function key.</td>
+      <td></td>
+      <td></td>
+      <td><code>Qt::Key_Context3</code> (0x01100002)</td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"Soft4"</code></td>
+      <td>The fourth general-purpose virtual function key.</td>
+      <td></td>
+      <td></td>
+      <td><code>Qt::Key_Context4</code> (0x01100003)</td>
+      <td></td>
+    </tr>
+  </thead>
 </table>
 
-<h2 id="Phone_keys">Phone keys</h2>
+## Phone keys
 
-<p>These keys represent buttons which commonly exist on modern smartphones.</p>
+These keys represent buttons which commonly exist on modern smartphones.
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th rowspan="2" scope="col"><code>KeyboardEvent.key</code> Value</th>
-   <th rowspan="2" scope="col">Description</th>
-   <th colspan="4" scope="col">Virtual Keycode</th>
-  </tr>
-  <tr>
-   <th scope="col">Windows</th>
-   <th scope="col">Mac</th>
-   <th scope="col">Linux</th>
-   <th scope="col">Android</th>
-  </tr>
-  <tr>
-   <td><code>"AppSwitch"</code></td>
-   <td>Presents a list of recently-used applications which lets the user change apps quickly.</td>
-   <td></td>
-   <td></td>
-   <td></td>
-   <td><code>KEYCODE_APP_SWITCH</code> (181)</td>
-  </tr>
-  <tr>
-   <td><code>"Call"</code></td>
-   <td>The <kbd>Call</kbd> key; dials the number which has been entered.</td>
-   <td></td>
-   <td></td>
-   <td><code>Qt::Key_Call</code> (0x01100004)</td>
-   <td><code>KEYCODE_CALL</code> (5)</td>
-  </tr>
-  <tr>
-   <td><code>"Camera"</code></td>
-   <td>The <kbd>Camera</kbd> key; activates the camera.</td>
-   <td></td>
-   <td></td>
-   <td><code>Qt::Key_Camera</code> (0x01100020)</td>
-   <td><code>KEYCODE_CAMERA</code> (27)</td>
-  </tr>
-  <tr>
-   <td><code>"CameraFocus"</code></td>
-   <td>The <kbd>Focus</kbd> key; focuses the camera.</td>
-   <td></td>
-   <td></td>
-   <td><code>Qt::Key_CameraFocus</code> (0x01100021)</td>
-   <td><code>KEYCODE_FOCUS</code> (80)</td>
-  </tr>
-  <tr>
-   <td><code>"EndCall"</code></td>
-   <td>The <kbd>End Call</kbd> or <kbd>Hang Up</kbd> button.</td>
-   <td></td>
-   <td></td>
-   <td><code>Qt::Key_Hangup</code> (0x01100005)</td>
-   <td><code>KEYCODE_ENDCALL</code> (6)</td>
-  </tr>
-  <tr>
-   <td><code>"GoBack"</code></td>
-   <td>The <kbd>Back</kbd> button.</td>
-   <td></td>
-   <td></td>
-   <td></td>
-   <td><code>KEYCODE_BACK</code> (4)</td>
-  </tr>
-  <tr>
-   <td><code>"GoHome"</code> [1]</td>
-   <td>The <kbd>Home</kbd> button, which takes the user to the phone's main screen (usually an application launcher).</td>
-   <td></td>
-   <td></td>
-   <td></td>
-   <td><code>KEYCODE_HOME</code> (3)</td>
-  </tr>
-  <tr>
-   <td><code>"HeadsetHook"</code></td>
-   <td>The <kbd>Headset Hook</kbd> key. This is typically actually a button on the headset which is used to hang up calls and play or pause media.</td>
-   <td></td>
-   <td></td>
-   <td><code>Qt::Key_ToggleCallHangup</code> (0x01100007)</td>
-   <td><code>KEYCODE_HEADSETHOOK</code> (79)</td>
-  </tr>
-  <tr>
-   <td><code>"LastNumberRedial"</code></td>
-   <td>The <kbd>Redial</kbd> button, which redials the last-called number.</td>
-   <td></td>
-   <td></td>
-   <td><code>Qt::Key_LastNumberRedial</code> (0x01100009)</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"Notification"</code></td>
-   <td>The <kbd>Notification</kbd> key.</td>
-   <td></td>
-   <td></td>
-   <td></td>
-   <td><code>KEYCODE_NOTIFICATION</code> (83)</td>
-  </tr>
-  <tr>
-   <td><code>"MannerMode"</code></td>
-   <td>A button which cycles among the notification modes: silent, vibrate, ring, and so forth.</td>
-   <td></td>
-   <td></td>
-   <td></td>
-   <td><code>KEYCODE_MANNER_MODE</code> (205)</td>
-  </tr>
-  <tr>
-   <td><code>"VoiceDial"</code></td>
-   <td>The <kbd>Voice Dial</kbd> key. Initiates voice dialing.</td>
-   <td></td>
-   <td></td>
-   <td><code>Qt::Key_VoiceDial</code> (0x01100008)</td>
-   <td><code>KEYCODE_VOICE_ASSIST</code> (231)</td>
-  </tr>
- </thead>
+  <thead>
+    <tr>
+      <th rowspan="2" scope="col"><code>KeyboardEvent.key</code> Value</th>
+      <th rowspan="2" scope="col">Description</th>
+      <th colspan="4" scope="col">Virtual Keycode</th>
+    </tr>
+    <tr>
+      <th scope="col">Windows</th>
+      <th scope="col">Mac</th>
+      <th scope="col">Linux</th>
+      <th scope="col">Android</th>
+    </tr>
+    <tr>
+      <td><code>"AppSwitch"</code></td>
+      <td>
+        Presents a list of recently-used applications which lets the user change
+        apps quickly.
+      </td>
+      <td></td>
+      <td></td>
+      <td></td>
+      <td><code>KEYCODE_APP_SWITCH</code> (181)</td>
+    </tr>
+    <tr>
+      <td><code>"Call"</code></td>
+      <td>The <kbd>Call</kbd> key; dials the number which has been entered.</td>
+      <td></td>
+      <td></td>
+      <td><code>Qt::Key_Call</code> (0x01100004)</td>
+      <td><code>KEYCODE_CALL</code> (5)</td>
+    </tr>
+    <tr>
+      <td><code>"Camera"</code></td>
+      <td>The <kbd>Camera</kbd> key; activates the camera.</td>
+      <td></td>
+      <td></td>
+      <td><code>Qt::Key_Camera</code> (0x01100020)</td>
+      <td><code>KEYCODE_CAMERA</code> (27)</td>
+    </tr>
+    <tr>
+      <td><code>"CameraFocus"</code></td>
+      <td>The <kbd>Focus</kbd> key; focuses the camera.</td>
+      <td></td>
+      <td></td>
+      <td><code>Qt::Key_CameraFocus</code> (0x01100021)</td>
+      <td><code>KEYCODE_FOCUS</code> (80)</td>
+    </tr>
+    <tr>
+      <td><code>"EndCall"</code></td>
+      <td>The <kbd>End Call</kbd> or <kbd>Hang Up</kbd> button.</td>
+      <td></td>
+      <td></td>
+      <td><code>Qt::Key_Hangup</code> (0x01100005)</td>
+      <td><code>KEYCODE_ENDCALL</code> (6)</td>
+    </tr>
+    <tr>
+      <td><code>"GoBack"</code></td>
+      <td>The <kbd>Back</kbd> button.</td>
+      <td></td>
+      <td></td>
+      <td></td>
+      <td><code>KEYCODE_BACK</code> (4)</td>
+    </tr>
+    <tr>
+      <td><code>"GoHome"</code> [1]</td>
+      <td>
+        The <kbd>Home</kbd> button, which takes the user to the phone's main
+        screen (usually an application launcher).
+      </td>
+      <td></td>
+      <td></td>
+      <td></td>
+      <td><code>KEYCODE_HOME</code> (3)</td>
+    </tr>
+    <tr>
+      <td><code>"HeadsetHook"</code></td>
+      <td>
+        The <kbd>Headset Hook</kbd> key. This is typically actually a button on
+        the headset which is used to hang up calls and play or pause media.
+      </td>
+      <td></td>
+      <td></td>
+      <td><code>Qt::Key_ToggleCallHangup</code> (0x01100007)</td>
+      <td><code>KEYCODE_HEADSETHOOK</code> (79)</td>
+    </tr>
+    <tr>
+      <td><code>"LastNumberRedial"</code></td>
+      <td>
+        The <kbd>Redial</kbd> button, which redials the last-called number.
+      </td>
+      <td></td>
+      <td></td>
+      <td><code>Qt::Key_LastNumberRedial</code> (0x01100009)</td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"Notification"</code></td>
+      <td>The <kbd>Notification</kbd> key.</td>
+      <td></td>
+      <td></td>
+      <td></td>
+      <td><code>KEYCODE_NOTIFICATION</code> (83)</td>
+    </tr>
+    <tr>
+      <td><code>"MannerMode"</code></td>
+      <td>
+        A button which cycles among the notification modes: silent, vibrate,
+        ring, and so forth.
+      </td>
+      <td></td>
+      <td></td>
+      <td></td>
+      <td><code>KEYCODE_MANNER_MODE</code> (205)</td>
+    </tr>
+    <tr>
+      <td><code>"VoiceDial"</code></td>
+      <td>The <kbd>Voice Dial</kbd> key. Initiates voice dialing.</td>
+      <td></td>
+      <td></td>
+      <td><code>Qt::Key_VoiceDial</code> (0x01100008)</td>
+      <td><code>KEYCODE_VOICE_ASSIST</code> (231)</td>
+    </tr>
+  </thead>
 </table>
 
-<p>[1] Prior to Firefox 37, the Home button generated a key code of <code>"Exit"</code>. Starting in Firefox 37, the button generates the key code <code>"MozHomeScreen"</code>.</p>
+\[1] Prior to Firefox 37, the Home button generated a key code of `"Exit"`. Starting in Firefox 37, the button generates the key code `"MozHomeScreen"`.
 
-<h2 id="Multimedia_keys">Multimedia keys</h2>
+## Multimedia keys
 
-<p>The multimedia keys are extra buttons or keys for controlling media devices, found on some keyboards.</p>
+The multimedia keys are extra buttons or keys for controlling media devices, found on some keyboards.
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th rowspan="2" scope="col"><code>KeyboardEvent.key</code> Value</th>
-   <th rowspan="2" scope="col">Description</th>
-   <th colspan="4" scope="col">Virtual Keycode</th>
-  </tr>
-  <tr>
-   <th scope="col">Windows</th>
-   <th scope="col">Mac</th>
-   <th scope="col">Linux</th>
-   <th scope="col">Android</th>
-  </tr>
-  <tr>
-   <td><code>"ChannelDown"</code></td>
-   <td>Switches to the previous channel.</td>
-   <td><code>APPCOMMAND_MEDIA_CHANNEL_DOWN</code></td>
-   <td></td>
-   <td><code>Qt::Key_ChannelDown</code> (0x01000119)</td>
-   <td><code>KEYCODE_CHANNEL_DOWN</code> (167)</td>
-  </tr>
-  <tr>
-   <td><code>"ChannelUp"</code></td>
-   <td>Switches to the next channel.</td>
-   <td><code>APPCOMMAND_MEDIA_CHANNEL_UP</code></td>
-   <td></td>
-   <td><code>Qt::Key_ChannelUp</code> (0x01000118)</td>
-   <td><code>KEYCODE_CHANNEL_UP</code> (166)</td>
-  </tr>
-  <tr>
-   <td><code>"MediaFastForward"</code> [2]</td>
-   <td>Starts, continues, or increases the speed of fast forwarding the media.</td>
-   <td><code>APPCOMMAND_MEDIA_FAST_FORWARD</code></td>
-   <td></td>
-   <td><code>GDK_KEY_AudioForward (0x1008FF97)<br>
-    Qt:Key_AudioForward</code> (0x01000102)</td>
-   <td><code>KEYCODE_MEDIA_FAST_FORWARD</code> (90)</td>
-  </tr>
-  <tr>
-   <td><code>"MediaPause"</code></td>
-   <td>Pauses the currently playing media. Some older applications use simply "Pause" but this is not correct.</td>
-   <td><code>APPCOMMAND_MEDIA_PAUSE</code></td>
-   <td></td>
-   <td><code>GDK_KEY_AudioPause</code> (0x1008FF31)<br>
-    <code>Qt::Key_MediaPause</code> (0x1000085)</td>
-   <td><code>KEYCODE_MEDIA_PAUSE</code> (127)</td>
-  </tr>
-  <tr>
-   <td><code>"MediaPlay"</code></td>
-   <td>Starts or continues playing media at normal speed, if not already doing so. Has no effect otherwise.</td>
-   <td><code>APPCOMMAND_MEDIA_PLAY</code></td>
-   <td></td>
-   <td><code>GDK_KEY_AudioPlay</code> (0x1008FF14)</td>
-   <td><code>KEYCODE_MEDIA_PLAY</code><code> (126)</code></td>
-  </tr>
-  <tr>
-   <td><code>"MediaPlayPause"</code></td>
-   <td>Toggles between playing and pausing the current media.</td>
-   <td><code>VK_MEDIA_PLAY_PAUSE</code> (0xB3)<br>
-    <code>APPCOMMAND_MEDIA_PLAY_PAUSE</code></td>
-   <td></td>
-   <td><code>Qt::Key_MediaTogglePlayPause</code> (0x1000086)</td>
-   <td><code>KEYCODE_MEDIA_PLAY_PAUSE</code> (85)</td>
-  </tr>
-  <tr>
-   <td><code>"MediaRecord"</code></td>
-   <td>Starts or resumes recording media.</td>
-   <td><code>APPCOMMAND_MEDIA_RECORD</code></td>
-   <td></td>
-   <td><code>GDK_KEY_AudioRecord</code> (0x1008FF1C)<br>
-    <code>Qt::Key_MediaRecord</code> (0x01000084)</td>
-   <td><code>KEYCODE_MEDIA_RECORD</code><code> (130)</code></td>
-  </tr>
-  <tr>
-   <td><code>"MediaRewind"</code></td>
-   <td>Starts, continues, or increases the speed of rewinding the media.</td>
-   <td><code>APPCOMMAND_MEDIA_REWIND</code></td>
-   <td></td>
-   <td><code>GDK_KEY_AudioRewind</code> (0x1008FF3E)<br>
-    <code>Qt::Key_AudioRewind</code> (0x010000C5)</td>
-   <td><code>KEYCODE_MEDIA_REWIND</code><code> (89)</code></td>
-  </tr>
-  <tr>
-   <td><code>"MediaStop"</code></td>
-   <td>Stops the current media activity (such as playing, recording, pausing, forwarding, or rewinding). Has no effect if the media is currently stopped already.</td>
-   <td><code>VK_MEDIA_STOP</code> (0xB2)<br>
-    <code>APPCOMMAND_MEDIA_STOP</code></td>
-   <td></td>
-   <td><code>GDK_KEY_AudioStop</code> (0x1008FF15)<br>
-    <code>Qt::Key_MediaStop</code> (0x01000081)</td>
-   <td><code>KEYCODE_MEDIA_STOP</code> (86)</td>
-  </tr>
-  <tr>
-   <td><code>"MediaTrackNext"</code> [1]</td>
-   <td>Seeks to the next media or program track.</td>
-   <td><code>VK_MEDIA_NEXT_TRACK</code> (0xB0)<br>
-    <code>APPCOMMAND_MEDIA_NEXTTRACK</code></td>
-   <td></td>
-   <td><code>GDK_KEY_AudioNext</code> (0x1008FF17)<br>
-    <code>Qt::Key_MediaNext</code> (0x01000083)</td>
-   <td><code>KEYCODE_MEDIA_NEXT</code> (87)</td>
-  </tr>
-  <tr>
-   <td><code>"MediaTrackPrevious"</code> [1]</td>
-   <td>Seeks to the previous media or program track.</td>
-   <td><code>VK_MEDIA_PREV_TRACK</code> (0xB1)<br>
-    <code>APPCOMMAND_MEDIA_PREVIOUSTRACK</code></td>
-   <td></td>
-   <td><code>GDK_KEY_AudioPrev</code> (0x1008FF16)<br>
-    <code>Qt::Key_MediaPrevious</code> (0x01000082)</td>
-   <td><code>KEYCODE_MEDIA_PREVIOUS</code> (88)</td>
-  </tr>
- </thead>
+  <thead>
+    <tr>
+      <th rowspan="2" scope="col"><code>KeyboardEvent.key</code> Value</th>
+      <th rowspan="2" scope="col">Description</th>
+      <th colspan="4" scope="col">Virtual Keycode</th>
+    </tr>
+    <tr>
+      <th scope="col">Windows</th>
+      <th scope="col">Mac</th>
+      <th scope="col">Linux</th>
+      <th scope="col">Android</th>
+    </tr>
+    <tr>
+      <td><code>"ChannelDown"</code></td>
+      <td>Switches to the previous channel.</td>
+      <td><code>APPCOMMAND_MEDIA_CHANNEL_DOWN</code></td>
+      <td></td>
+      <td><code>Qt::Key_ChannelDown</code> (0x01000119)</td>
+      <td><code>KEYCODE_CHANNEL_DOWN</code> (167)</td>
+    </tr>
+    <tr>
+      <td><code>"ChannelUp"</code></td>
+      <td>Switches to the next channel.</td>
+      <td><code>APPCOMMAND_MEDIA_CHANNEL_UP</code></td>
+      <td></td>
+      <td><code>Qt::Key_ChannelUp</code> (0x01000118)</td>
+      <td><code>KEYCODE_CHANNEL_UP</code> (166)</td>
+    </tr>
+    <tr>
+      <td><code>"MediaFastForward"</code> [2]</td>
+      <td>
+        Starts, continues, or increases the speed of fast forwarding the media.
+      </td>
+      <td><code>APPCOMMAND_MEDIA_FAST_FORWARD</code></td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_AudioForward (0x1008FF97)<br />Qt:Key_AudioForward</code>
+        (0x01000102)
+      </td>
+      <td><code>KEYCODE_MEDIA_FAST_FORWARD</code> (90)</td>
+    </tr>
+    <tr>
+      <td><code>"MediaPause"</code></td>
+      <td>
+        Pauses the currently playing media. Some older applications use simply
+        "Pause" but this is not correct.
+      </td>
+      <td><code>APPCOMMAND_MEDIA_PAUSE</code></td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_AudioPause</code> (0x1008FF31)<br /><code
+          >Qt::Key_MediaPause</code
+        >
+        (0x1000085)
+      </td>
+      <td><code>KEYCODE_MEDIA_PAUSE</code> (127)</td>
+    </tr>
+    <tr>
+      <td><code>"MediaPlay"</code></td>
+      <td>
+        Starts or continues playing media at normal speed, if not already doing
+        so. Has no effect otherwise.
+      </td>
+      <td><code>APPCOMMAND_MEDIA_PLAY</code></td>
+      <td></td>
+      <td><code>GDK_KEY_AudioPlay</code> (0x1008FF14)</td>
+      <td><code>KEYCODE_MEDIA_PLAY</code><code> (126)</code></td>
+    </tr>
+    <tr>
+      <td><code>"MediaPlayPause"</code></td>
+      <td>Toggles between playing and pausing the current media.</td>
+      <td>
+        <code>VK_MEDIA_PLAY_PAUSE</code> (0xB3)<br /><code
+          >APPCOMMAND_MEDIA_PLAY_PAUSE</code
+        >
+      </td>
+      <td></td>
+      <td><code>Qt::Key_MediaTogglePlayPause</code> (0x1000086)</td>
+      <td><code>KEYCODE_MEDIA_PLAY_PAUSE</code> (85)</td>
+    </tr>
+    <tr>
+      <td><code>"MediaRecord"</code></td>
+      <td>Starts or resumes recording media.</td>
+      <td><code>APPCOMMAND_MEDIA_RECORD</code></td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_AudioRecord</code> (0x1008FF1C)<br /><code
+          >Qt::Key_MediaRecord</code
+        >
+        (0x01000084)
+      </td>
+      <td><code>KEYCODE_MEDIA_RECORD</code><code> (130)</code></td>
+    </tr>
+    <tr>
+      <td><code>"MediaRewind"</code></td>
+      <td>Starts, continues, or increases the speed of rewinding the media.</td>
+      <td><code>APPCOMMAND_MEDIA_REWIND</code></td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_AudioRewind</code> (0x1008FF3E)<br /><code
+          >Qt::Key_AudioRewind</code
+        >
+        (0x010000C5)
+      </td>
+      <td><code>KEYCODE_MEDIA_REWIND</code><code> (89)</code></td>
+    </tr>
+    <tr>
+      <td><code>"MediaStop"</code></td>
+      <td>
+        Stops the current media activity (such as playing, recording, pausing,
+        forwarding, or rewinding). Has no effect if the media is currently
+        stopped already.
+      </td>
+      <td>
+        <code>VK_MEDIA_STOP</code> (0xB2)<br /><code
+          >APPCOMMAND_MEDIA_STOP</code
+        >
+      </td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_AudioStop</code> (0x1008FF15)<br /><code
+          >Qt::Key_MediaStop</code
+        >
+        (0x01000081)
+      </td>
+      <td><code>KEYCODE_MEDIA_STOP</code> (86)</td>
+    </tr>
+    <tr>
+      <td><code>"MediaTrackNext"</code> [1]</td>
+      <td>Seeks to the next media or program track.</td>
+      <td>
+        <code>VK_MEDIA_NEXT_TRACK</code> (0xB0)<br /><code
+          >APPCOMMAND_MEDIA_NEXTTRACK</code
+        >
+      </td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_AudioNext</code> (0x1008FF17)<br /><code
+          >Qt::Key_MediaNext</code
+        >
+        (0x01000083)
+      </td>
+      <td><code>KEYCODE_MEDIA_NEXT</code> (87)</td>
+    </tr>
+    <tr>
+      <td><code>"MediaTrackPrevious"</code> [1]</td>
+      <td>Seeks to the previous media or program track.</td>
+      <td>
+        <code>VK_MEDIA_PREV_TRACK</code> (0xB1)<br /><code
+          >APPCOMMAND_MEDIA_PREVIOUSTRACK</code
+        >
+      </td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_AudioPrev</code> (0x1008FF16)<br /><code
+          >Qt::Key_MediaPrevious</code
+        >
+        (0x01000082)
+      </td>
+      <td><code>KEYCODE_MEDIA_PREVIOUS</code> (88)</td>
+    </tr>
+  </thead>
 </table>
 
-<p>[1] Internet Explorer, Edge, and Firefox (36 and earlier) use <code>"MediaNextTrack"</code> and <code>"MediaPreviousTrack"</code> instead of <code>"MediaTrackNext"</code> and <code>"MediaTrackPrevious"</code>.</p>
+\[1] Internet Explorer, Edge, and Firefox (36 and earlier) use `"MediaNextTrack"` and `"MediaPreviousTrack"` instead of `"MediaTrackNext"` and `"MediaTrackPrevious"`.
 
-<p>[2] Prior to Firefox 37, Firefox generated the key code <code>"FastFwd"</code> on some platforms and <code>"Unidentified"</code> on others instead of <code>"MediaFastForward"</code>.</p>
+\[2] Prior to Firefox 37, Firefox generated the key code `"FastFwd"` on some platforms and `"Unidentified"` on others instead of `"MediaFastForward"`.
 
-<h2 id="Audio_control_keys">Audio control keys</h2>
+## Audio control keys
 
-<p>These media keys are used specifically for controlling audio.</p>
+These media keys are used specifically for controlling audio.
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th rowspan="2" scope="col"><code>KeyboardEvent.key</code> Value</th>
-   <th rowspan="2" scope="col">Description</th>
-   <th colspan="4" scope="col">Virtual Keycode</th>
-  </tr>
-  <tr>
-   <th scope="col">Windows</th>
-   <th scope="col">Mac</th>
-   <th scope="col">Linux</th>
-   <th scope="col">Android</th>
-  </tr>
-  <tr>
-   <td><code>"AudioBalanceLeft"</code></td>
-   <td>Adjusts audio balance toward the left.</td>
-   <td><code>VK_AUDIO_BALANCE_LEFT</code></td>
-   <td></td>
-   <td></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"AudioBalanceRight"</code></td>
-   <td>Adjusts audio balance twoard the right.</td>
-   <td><code>VK_AUDIO_BALANCE_RIGHT</code></td>
-   <td></td>
-   <td></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"AudioBassDown"</code></td>
-   <td>Decreases the amount of bass.</td>
-   <td><code>APPCOMMAND_BASS_DOWN</code></td>
-   <td></td>
-   <td></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"AudioBassBoostDown"</code></td>
-   <td>Reduces bass boosting or cycles downward through bass boost modes or states.</td>
-   <td><code>VK_BASS_BOOST_DOWN</code></td>
-   <td></td>
-   <td></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"AudioBassBoostToggle"</code></td>
-   <td>Toggles bass boosting on and off.</td>
-   <td><code>APPCOMMAND_BASS_BOOST</code></td>
-   <td></td>
-   <td></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"AudioBassBoostUp"</code></td>
-   <td>Increases the amoung of bass boosting, or cycles upward through a set of bass boost modes or states.</td>
-   <td><code>VK_BASS_BOOST_UP</code></td>
-   <td></td>
-   <td></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"AudioBassUp"</code></td>
-   <td>Increases the amount of bass.</td>
-   <td><code>APPCOMMAND_BASS_UP</code></td>
-   <td></td>
-   <td></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"AudioFaderFront"</code></td>
-   <td>Adjusts the audio fader toward the front.</td>
-   <td><code>VK_FADER_FRONT</code></td>
-   <td></td>
-   <td></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"AudioFaderRear"</code></td>
-   <td>Adjustts the audio fader toward the rear.</td>
-   <td><code>VK_FADER_REAR</code></td>
-   <td></td>
-   <td></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"AudioSurroundModeNext"</code></td>
-   <td>Selects the next available surround sound mode.</td>
-   <td><code>VK_SURROUND_MODE_NEXT</code></td>
-   <td></td>
-   <td></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"AudioTrebleDown"</code></td>
-   <td>Decreases the amount of treble.</td>
-   <td><code>APPCOMMAND_TREBLE_DOWN</code></td>
-   <td></td>
-   <td></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"AudioTrebleUp"</code></td>
-   <td>Increases the amount of treble.</td>
-   <td><code>APPCOMMAND_TREBLE_UP</code></td>
-   <td></td>
-   <td></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"AudioVolumeDown" [1]</code></td>
-   <td>Decreases the audio volume.</td>
-   <td><code>VK_VOLUME_DOWN</code> (0xAE)<br>
-    <code>APPCOMMAND_VOLUME_DOWN</code></td>
-   <td><code>kVK_VolumeDown</code> (0x49)</td>
-   <td><code>GDK_KEY_AudioLowerVolume</code> (0x1008FF11)<br>
-    <code>Qt::Key_VolumeDown</code> (0x01000070)</td>
-   <td><code>KEYCODE_VOLUME_DOWN</code> (25)</td>
-  </tr>
-  <tr>
-   <td><code>"AudioVolumeMute" [1]</code></td>
-   <td>Mutes the audio.</td>
-   <td><code>VK_VOLUME_MUTE</code> (0xAD)<br>
-    <code>APPCOMMAND_VOLUME_MUTE</code></td>
-   <td><code>kVK_Mute</code> (0x4A)</td>
-   <td><code>GDK_KEY_AudioMute</code> (0x1008FF12)<br>
-    <code>Qt::Key_VolumeMute</code> (0x01000071)</td>
-   <td><code>KEYCODE_VOLUME_MUTE</code> (164)</td>
-  </tr>
-  <tr>
-   <td><code>"AudioVolumeUp" [1]</code></td>
-   <td>Increases the audio volume.</td>
-   <td><code>VK_VOLUME_UP</code> (0xAF)<br>
-    <code>APPCOMMAND_VOLUME_UP</code></td>
-   <td><code>kVK_VolumeUp</code> (0x48)</td>
-   <td><code>GDK_KEY_AudioRaiseVolume</code> (0x1008FF13)<br>
-    <code>Qt::Key_VolumeUp</code> (0x01000072)</td>
-   <td><code>KEYCODE_VOLUME_UP</code> (24)</td>
-  </tr>
-  <tr>
-   <td><code>"MicrophoneToggle"</code></td>
-   <td>Toggles the microphone on and off.</td>
-   <td><code>APPCOMMAND_MIC_ON_OFF_TOGGLE</code></td>
-   <td></td>
-   <td></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"MicrophoneVolumeDown"</code></td>
-   <td>Decreases the microphone's input volume.</td>
-   <td><code>APPCOMMAND_MICROPHONE_VOLUME_DOWN</code></td>
-   <td></td>
-   <td><code>Qt::Key_MicVolumeDown</code> (0x0100011E)</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"MicrophoneVolumeMute"</code></td>
-   <td>Mutes the microphone input.</td>
-   <td><code>APPCOMMAND_MICROPHONE_VOLUME_MUTE</code></td>
-   <td></td>
-   <td><code>GDK_KEY_AudioMicMute</code> (0x1008FFB2)<br>
-    <code>Qt::Key_MicMute</code> (0x01000113)</td>
-   <td><code>KEYCODE_MUTE</code> (91)</td>
-  </tr>
-  <tr>
-   <td><code>"MicrophoneVolumeUp"</code></td>
-   <td>Increases the microphone's input volume.</td>
-   <td><code>APPCOMMAND_MICROPHONE_VOLUME_UP</code></td>
-   <td></td>
-   <td><code>Qt::Key_MicVolumeUp</code> (0x0100011D)</td>
-   <td></td>
-  </tr>
- </thead>
+  <thead>
+    <tr>
+      <th rowspan="2" scope="col"><code>KeyboardEvent.key</code> Value</th>
+      <th rowspan="2" scope="col">Description</th>
+      <th colspan="4" scope="col">Virtual Keycode</th>
+    </tr>
+    <tr>
+      <th scope="col">Windows</th>
+      <th scope="col">Mac</th>
+      <th scope="col">Linux</th>
+      <th scope="col">Android</th>
+    </tr>
+    <tr>
+      <td><code>"AudioBalanceLeft"</code></td>
+      <td>Adjusts audio balance toward the left.</td>
+      <td><code>VK_AUDIO_BALANCE_LEFT</code></td>
+      <td></td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"AudioBalanceRight"</code></td>
+      <td>Adjusts audio balance twoard the right.</td>
+      <td><code>VK_AUDIO_BALANCE_RIGHT</code></td>
+      <td></td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"AudioBassDown"</code></td>
+      <td>Decreases the amount of bass.</td>
+      <td><code>APPCOMMAND_BASS_DOWN</code></td>
+      <td></td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"AudioBassBoostDown"</code></td>
+      <td>
+        Reduces bass boosting or cycles downward through bass boost modes or
+        states.
+      </td>
+      <td><code>VK_BASS_BOOST_DOWN</code></td>
+      <td></td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"AudioBassBoostToggle"</code></td>
+      <td>Toggles bass boosting on and off.</td>
+      <td><code>APPCOMMAND_BASS_BOOST</code></td>
+      <td></td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"AudioBassBoostUp"</code></td>
+      <td>
+        Increases the amoung of bass boosting, or cycles upward through a set of
+        bass boost modes or states.
+      </td>
+      <td><code>VK_BASS_BOOST_UP</code></td>
+      <td></td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"AudioBassUp"</code></td>
+      <td>Increases the amount of bass.</td>
+      <td><code>APPCOMMAND_BASS_UP</code></td>
+      <td></td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"AudioFaderFront"</code></td>
+      <td>Adjusts the audio fader toward the front.</td>
+      <td><code>VK_FADER_FRONT</code></td>
+      <td></td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"AudioFaderRear"</code></td>
+      <td>Adjustts the audio fader toward the rear.</td>
+      <td><code>VK_FADER_REAR</code></td>
+      <td></td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"AudioSurroundModeNext"</code></td>
+      <td>Selects the next available surround sound mode.</td>
+      <td><code>VK_SURROUND_MODE_NEXT</code></td>
+      <td></td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"AudioTrebleDown"</code></td>
+      <td>Decreases the amount of treble.</td>
+      <td><code>APPCOMMAND_TREBLE_DOWN</code></td>
+      <td></td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"AudioTrebleUp"</code></td>
+      <td>Increases the amount of treble.</td>
+      <td><code>APPCOMMAND_TREBLE_UP</code></td>
+      <td></td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"AudioVolumeDown" [1]</code></td>
+      <td>Decreases the audio volume.</td>
+      <td>
+        <code>VK_VOLUME_DOWN</code> (0xAE)<br /><code
+          >APPCOMMAND_VOLUME_DOWN</code
+        >
+      </td>
+      <td><code>kVK_VolumeDown</code> (0x49)</td>
+      <td>
+        <code>GDK_KEY_AudioLowerVolume</code> (0x1008FF11)<br /><code
+          >Qt::Key_VolumeDown</code
+        >
+        (0x01000070)
+      </td>
+      <td><code>KEYCODE_VOLUME_DOWN</code> (25)</td>
+    </tr>
+    <tr>
+      <td><code>"AudioVolumeMute" [1]</code></td>
+      <td>Mutes the audio.</td>
+      <td>
+        <code>VK_VOLUME_MUTE</code> (0xAD)<br /><code
+          >APPCOMMAND_VOLUME_MUTE</code
+        >
+      </td>
+      <td><code>kVK_Mute</code> (0x4A)</td>
+      <td>
+        <code>GDK_KEY_AudioMute</code> (0x1008FF12)<br /><code
+          >Qt::Key_VolumeMute</code
+        >
+        (0x01000071)
+      </td>
+      <td><code>KEYCODE_VOLUME_MUTE</code> (164)</td>
+    </tr>
+    <tr>
+      <td><code>"AudioVolumeUp" [1]</code></td>
+      <td>Increases the audio volume.</td>
+      <td>
+        <code>VK_VOLUME_UP</code> (0xAF)<br /><code>APPCOMMAND_VOLUME_UP</code>
+      </td>
+      <td><code>kVK_VolumeUp</code> (0x48)</td>
+      <td>
+        <code>GDK_KEY_AudioRaiseVolume</code> (0x1008FF13)<br /><code
+          >Qt::Key_VolumeUp</code
+        >
+        (0x01000072)
+      </td>
+      <td><code>KEYCODE_VOLUME_UP</code> (24)</td>
+    </tr>
+    <tr>
+      <td><code>"MicrophoneToggle"</code></td>
+      <td>Toggles the microphone on and off.</td>
+      <td><code>APPCOMMAND_MIC_ON_OFF_TOGGLE</code></td>
+      <td></td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"MicrophoneVolumeDown"</code></td>
+      <td>Decreases the microphone's input volume.</td>
+      <td><code>APPCOMMAND_MICROPHONE_VOLUME_DOWN</code></td>
+      <td></td>
+      <td><code>Qt::Key_MicVolumeDown</code> (0x0100011E)</td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"MicrophoneVolumeMute"</code></td>
+      <td>Mutes the microphone input.</td>
+      <td><code>APPCOMMAND_MICROPHONE_VOLUME_MUTE</code></td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_AudioMicMute</code> (0x1008FFB2)<br /><code
+          >Qt::Key_MicMute</code
+        >
+        (0x01000113)
+      </td>
+      <td><code>KEYCODE_MUTE</code> (91)</td>
+    </tr>
+    <tr>
+      <td><code>"MicrophoneVolumeUp"</code></td>
+      <td>Increases the microphone's input volume.</td>
+      <td><code>APPCOMMAND_MICROPHONE_VOLUME_UP</code></td>
+      <td></td>
+      <td><code>Qt::Key_MicVolumeUp</code> (0x0100011D)</td>
+      <td></td>
+    </tr>
+  </thead>
 </table>
 
-<p>[1] Internet Explorer, Edge, and Firefox (48 and earlier) use <code>"VolumeUp"</code>, <code>"VolumeDown"</code>, and <code>"VolumeMute"</code> instead of <code>"AudioVolumeUp"</code>, <code>"AudioVolumeDown"</code>, and <code>"AudioVolumeMute"</code>. In Firefox 49 they were updated to match the latest specification. The old names are still used on <a href="/en-US/docs/Mozilla/B2G_OS">Boot to Gecko</a>.</p>
+\[1] Internet Explorer, Edge, and Firefox (48 and earlier) use `"VolumeUp"`, `"VolumeDown"`, and `"VolumeMute"` instead of `"AudioVolumeUp"`, `"AudioVolumeDown"`, and `"AudioVolumeMute"`. In Firefox 49 they were updated to match the latest specification. The old names are still used on [Boot to Gecko](/en-US/docs/Mozilla/B2G_OS).
 
-<h2 id="TV_control_keys">TV control keys</h2>
+## TV control keys
 
-<p>These key values represent buttons or keys present on television devices, or computers or phones which have TV support.</p>
+These key values represent buttons or keys present on television devices, or computers or phones which have TV support.
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th rowspan="2" scope="col"><code>KeyboardEvent.key</code> Value</th>
-   <th rowspan="2" scope="col">Description</th>
-   <th colspan="4" scope="col">Virtual Keycode</th>
-  </tr>
-  <tr>
-   <th scope="col">Windows</th>
-   <th scope="col">Mac</th>
-   <th scope="col">Linux</th>
-   <th scope="col">Android</th>
-  </tr>
-  <tr>
-   <td><code>"TV"</code> [1]</td>
-   <td>Switches into TV viewing mode.</td>
-   <td></td>
-   <td></td>
-   <td></td>
-   <td><code>KEYCODE_TV</code> (170)</td>
-  </tr>
-  <tr>
-   <td><code>"TV3DMode"</code></td>
-   <td>Toggles 3D TV mode on and off.</td>
-   <td></td>
-   <td></td>
-   <td></td>
-   <td><code>KEYCODE_3D_MODE</code> (206)</td>
-  </tr>
-  <tr>
-   <td><code>"TVAntennaCable"</code></td>
-   <td>Toggles between antenna and cable inputs.</td>
-   <td></td>
-   <td></td>
-   <td></td>
-   <td><code>KEYCODE_TV_ANTENNA_CABLE</code> (242)</td>
-  </tr>
-  <tr>
-   <td><code>"TVAudioDescription"</code></td>
-   <td>Toggles audio description mode on and off.</td>
-   <td></td>
-   <td></td>
-   <td></td>
-   <td><code>KEYCODE_TV_AUDIO_DESCRIPTION</code> (252)</td>
-  </tr>
-  <tr>
-   <td><code>"TVAudioDescriptionMixDown"</code></td>
-   <td>Decreases trhe audio description's mixing volume; reduces the volume of the audio descriptions relative to the program sound.</td>
-   <td></td>
-   <td></td>
-   <td></td>
-   <td><code>KEYCODE_TV_AUDIO_DESCRIPTION_MIX_DOWN</code> (254)</td>
-  </tr>
-  <tr>
-   <td><code>"TVAudioDescriptionMixUp"</code></td>
-   <td>Increases the audio description's mixing volume; increases the volume of the audio descriptions relative to the program sound.</td>
-   <td></td>
-   <td></td>
-   <td></td>
-   <td><code>KEYCODE_TV_AUDIO_DESCRIPTION_MIX_UP</code> (253)</td>
-  </tr>
-  <tr>
-   <td><code>"TVContentsMenu"</code></td>
-   <td>Displays or hides the media contents available for playback (this may be a channel guide showing the currently airing programs, or a list of media files to play).</td>
-   <td></td>
-   <td></td>
-   <td></td>
-   <td><code>KEYCODE_TV_CONTENTS_MENU</code> (256)</td>
-  </tr>
-  <tr>
-   <td><code>"TVDataService"</code></td>
-   <td>Displays or hides the TV's data service menu.</td>
-   <td></td>
-   <td></td>
-   <td></td>
-   <td><code>KEYCODE_TV_DATA_SERVICE</code> (230)</td>
-  </tr>
-  <tr>
-   <td><code>"TVInput"</code> [2]</td>
-   <td>Cycles the input mode on an external TV.</td>
-   <td></td>
-   <td></td>
-   <td></td>
-   <td><code>KEYCODE_TV_INPUT</code> (178)</td>
-  </tr>
-  <tr>
-   <td><code>"TVInputComponent1"</code></td>
-   <td>Switches to the input "Component 1."</td>
-   <td></td>
-   <td></td>
-   <td></td>
-   <td><code>KEYCODE_TV_INPUT_COMPONENT_1</code> (249)</td>
-  </tr>
-  <tr>
-   <td><code>"TVInputComponent2"</code></td>
-   <td>Switches to the input "Component 2."</td>
-   <td></td>
-   <td></td>
-   <td></td>
-   <td><code>KEYCODE_TV_INPUT_COMPONENT_2</code> (250)</td>
-  </tr>
-  <tr>
-   <td><code>"TVInputComposite1"</code></td>
-   <td>Switches to the input "Composite 1."</td>
-   <td></td>
-   <td></td>
-   <td></td>
-   <td><code>KEYCODE_TV_INPUT_COMPOSITE_1</code> (247)</td>
-  </tr>
-  <tr>
-   <td><code>"TVInputComposite2"</code></td>
-   <td>Switches to the input "Composite 2."</td>
-   <td></td>
-   <td></td>
-   <td></td>
-   <td><code>KEYCODE_TV_INPUT_COMPOSITE_2</code> (248)</td>
-  </tr>
-  <tr>
-   <td><code>"TVInputHDMI1"</code></td>
-   <td>Switches to the input "HDMI 1."</td>
-   <td></td>
-   <td></td>
-   <td></td>
-   <td><code>KEYCODE_TV_INPUT_HDMI_1</code> (243)</td>
-  </tr>
-  <tr>
-   <td><code>"TVInputHDMI2"</code></td>
-   <td>Switches to the input "HDMI 2."</td>
-   <td></td>
-   <td></td>
-   <td></td>
-   <td><code>KEYCODE_TV_INPUT_HDMI_2</code> (244)</td>
-  </tr>
-  <tr>
-   <td><code>"TVInputHDMI3"</code></td>
-   <td>Switches to the input "HDMI 3."</td>
-   <td></td>
-   <td></td>
-   <td></td>
-   <td><code>KEYCODE_TV_INPUT_HDMI_3</code> (245)</td>
-  </tr>
-  <tr>
-   <td><code>"TVInputHDMI4"</code></td>
-   <td>Switches to the input "HDMI 4."</td>
-   <td></td>
-   <td></td>
-   <td></td>
-   <td><code>KEYCODE_TV_INPUT_HDMI_4</code> (246)</td>
-  </tr>
-  <tr>
-   <td><code>"TVInputVGA1"</code></td>
-   <td>Switches to the input "VGA 1."</td>
-   <td></td>
-   <td></td>
-   <td></td>
-   <td><code>KEYCODE_TV_INPUT_VGA_1</code> (251)</td>
-  </tr>
-  <tr>
-   <td><code>"TVMediaContext"</code></td>
-   <td>The Media Context menu key.</td>
-   <td></td>
-   <td></td>
-   <td></td>
-   <td><code>KEYCODE_TV_MEDIA_CONTEXT_MENU</code> (257)</td>
-  </tr>
-  <tr>
-   <td><code>"TVNetwork"</code></td>
-   <td>Toggle the TV's network connection on and off.</td>
-   <td></td>
-   <td></td>
-   <td></td>
-   <td><code>KEYCODE_TV_NETWORK</code> (241)</td>
-  </tr>
-  <tr>
-   <td><code>"TVNumberEntry"</code></td>
-   <td>Put the TV into number entry mode.</td>
-   <td></td>
-   <td></td>
-   <td></td>
-   <td><code>KEYCODE_TV_NUMBER_ENTRY</code> (234)</td>
-  </tr>
-  <tr>
-   <td><code>"TVPower"</code> [2]</td>
-   <td>The device's power button.</td>
-   <td></td>
-   <td></td>
-   <td></td>
-   <td><code>KEYCODE_TV_POWER</code> (177)</td>
-  </tr>
-  <tr>
-   <td><code>"TVRadioService"</code></td>
-   <td>Radio button.</td>
-   <td></td>
-   <td></td>
-   <td></td>
-   <td><code>KEYCODE_TV_RADIO_SERVICE</code> (232)</td>
-  </tr>
-  <tr>
-   <td><code>"TVSatellite"</code></td>
-   <td>Satellite button.</td>
-   <td></td>
-   <td></td>
-   <td></td>
-   <td><code>KEYCODE_TV_SATELLITE</code> (237)</td>
-  </tr>
-  <tr>
-   <td><code>"TVSatelliteBS"</code></td>
-   <td>Broadcast Satellite button.</td>
-   <td></td>
-   <td></td>
-   <td></td>
-   <td><code>KEYCODE_TV_SATELLITE_BS</code> (238)</td>
-  </tr>
-  <tr>
-   <td><code>"TVSatelliteCS"</code></td>
-   <td>Communication Satellite button.</td>
-   <td></td>
-   <td></td>
-   <td></td>
-   <td><code>KEYCODE_TV_SATELLITE_CS</code> (239)</td>
-  </tr>
-  <tr>
-   <td><code>"TVSatelliteToggle"</code></td>
-   <td>Toggles among available satellites.</td>
-   <td></td>
-   <td></td>
-   <td></td>
-   <td><code>KEYCODE_TV_SATELLITE_SERVICE</code> (240)</td>
-  </tr>
-  <tr>
-   <td><code>"TVTerrestrialAnalog"</code></td>
-   <td>Selects analog terrestrial television service (analog cable or antenna reception).</td>
-   <td></td>
-   <td></td>
-   <td></td>
-   <td><code>KEYCODE_TV_TERRESTRIAL_ANALOG</code> (235)</td>
-  </tr>
-  <tr>
-   <td><code>"TVTerrestrialDigital"</code></td>
-   <td>Selects digital terrestrial television service (digital cable or antenna receiption).</td>
-   <td></td>
-   <td></td>
-   <td></td>
-   <td><code>KEYCODE_TV_TERRESTRIAL_DIGITAL</code> (236)</td>
-  </tr>
-  <tr>
-   <td><code>"TVTimer"</code></td>
-   <td>Timer programming button.</td>
-   <td></td>
-   <td></td>
-   <td></td>
-   <td><code>KEYCODE_TV_TIMER_PROGRAMMING</code> (258)</td>
-  </tr>
- </thead>
+  <thead>
+    <tr>
+      <th rowspan="2" scope="col"><code>KeyboardEvent.key</code> Value</th>
+      <th rowspan="2" scope="col">Description</th>
+      <th colspan="4" scope="col">Virtual Keycode</th>
+    </tr>
+    <tr>
+      <th scope="col">Windows</th>
+      <th scope="col">Mac</th>
+      <th scope="col">Linux</th>
+      <th scope="col">Android</th>
+    </tr>
+    <tr>
+      <td><code>"TV"</code> [1]</td>
+      <td>Switches into TV viewing mode.</td>
+      <td></td>
+      <td></td>
+      <td></td>
+      <td><code>KEYCODE_TV</code> (170)</td>
+    </tr>
+    <tr>
+      <td><code>"TV3DMode"</code></td>
+      <td>Toggles 3D TV mode on and off.</td>
+      <td></td>
+      <td></td>
+      <td></td>
+      <td><code>KEYCODE_3D_MODE</code> (206)</td>
+    </tr>
+    <tr>
+      <td><code>"TVAntennaCable"</code></td>
+      <td>Toggles between antenna and cable inputs.</td>
+      <td></td>
+      <td></td>
+      <td></td>
+      <td><code>KEYCODE_TV_ANTENNA_CABLE</code> (242)</td>
+    </tr>
+    <tr>
+      <td><code>"TVAudioDescription"</code></td>
+      <td>Toggles audio description mode on and off.</td>
+      <td></td>
+      <td></td>
+      <td></td>
+      <td><code>KEYCODE_TV_AUDIO_DESCRIPTION</code> (252)</td>
+    </tr>
+    <tr>
+      <td><code>"TVAudioDescriptionMixDown"</code></td>
+      <td>
+        Decreases trhe audio description's mixing volume; reduces the volume of
+        the audio descriptions relative to the program sound.
+      </td>
+      <td></td>
+      <td></td>
+      <td></td>
+      <td><code>KEYCODE_TV_AUDIO_DESCRIPTION_MIX_DOWN</code> (254)</td>
+    </tr>
+    <tr>
+      <td><code>"TVAudioDescriptionMixUp"</code></td>
+      <td>
+        Increases the audio description's mixing volume; increases the volume of
+        the audio descriptions relative to the program sound.
+      </td>
+      <td></td>
+      <td></td>
+      <td></td>
+      <td><code>KEYCODE_TV_AUDIO_DESCRIPTION_MIX_UP</code> (253)</td>
+    </tr>
+    <tr>
+      <td><code>"TVContentsMenu"</code></td>
+      <td>
+        Displays or hides the media contents available for playback (this may be
+        a channel guide showing the currently airing programs, or a list of
+        media files to play).
+      </td>
+      <td></td>
+      <td></td>
+      <td></td>
+      <td><code>KEYCODE_TV_CONTENTS_MENU</code> (256)</td>
+    </tr>
+    <tr>
+      <td><code>"TVDataService"</code></td>
+      <td>Displays or hides the TV's data service menu.</td>
+      <td></td>
+      <td></td>
+      <td></td>
+      <td><code>KEYCODE_TV_DATA_SERVICE</code> (230)</td>
+    </tr>
+    <tr>
+      <td><code>"TVInput"</code> [2]</td>
+      <td>Cycles the input mode on an external TV.</td>
+      <td></td>
+      <td></td>
+      <td></td>
+      <td><code>KEYCODE_TV_INPUT</code> (178)</td>
+    </tr>
+    <tr>
+      <td><code>"TVInputComponent1"</code></td>
+      <td>Switches to the input "Component 1."</td>
+      <td></td>
+      <td></td>
+      <td></td>
+      <td><code>KEYCODE_TV_INPUT_COMPONENT_1</code> (249)</td>
+    </tr>
+    <tr>
+      <td><code>"TVInputComponent2"</code></td>
+      <td>Switches to the input "Component 2."</td>
+      <td></td>
+      <td></td>
+      <td></td>
+      <td><code>KEYCODE_TV_INPUT_COMPONENT_2</code> (250)</td>
+    </tr>
+    <tr>
+      <td><code>"TVInputComposite1"</code></td>
+      <td>Switches to the input "Composite 1."</td>
+      <td></td>
+      <td></td>
+      <td></td>
+      <td><code>KEYCODE_TV_INPUT_COMPOSITE_1</code> (247)</td>
+    </tr>
+    <tr>
+      <td><code>"TVInputComposite2"</code></td>
+      <td>Switches to the input "Composite 2."</td>
+      <td></td>
+      <td></td>
+      <td></td>
+      <td><code>KEYCODE_TV_INPUT_COMPOSITE_2</code> (248)</td>
+    </tr>
+    <tr>
+      <td><code>"TVInputHDMI1"</code></td>
+      <td>Switches to the input "HDMI 1."</td>
+      <td></td>
+      <td></td>
+      <td></td>
+      <td><code>KEYCODE_TV_INPUT_HDMI_1</code> (243)</td>
+    </tr>
+    <tr>
+      <td><code>"TVInputHDMI2"</code></td>
+      <td>Switches to the input "HDMI 2."</td>
+      <td></td>
+      <td></td>
+      <td></td>
+      <td><code>KEYCODE_TV_INPUT_HDMI_2</code> (244)</td>
+    </tr>
+    <tr>
+      <td><code>"TVInputHDMI3"</code></td>
+      <td>Switches to the input "HDMI 3."</td>
+      <td></td>
+      <td></td>
+      <td></td>
+      <td><code>KEYCODE_TV_INPUT_HDMI_3</code> (245)</td>
+    </tr>
+    <tr>
+      <td><code>"TVInputHDMI4"</code></td>
+      <td>Switches to the input "HDMI 4."</td>
+      <td></td>
+      <td></td>
+      <td></td>
+      <td><code>KEYCODE_TV_INPUT_HDMI_4</code> (246)</td>
+    </tr>
+    <tr>
+      <td><code>"TVInputVGA1"</code></td>
+      <td>Switches to the input "VGA 1."</td>
+      <td></td>
+      <td></td>
+      <td></td>
+      <td><code>KEYCODE_TV_INPUT_VGA_1</code> (251)</td>
+    </tr>
+    <tr>
+      <td><code>"TVMediaContext"</code></td>
+      <td>The Media Context menu key.</td>
+      <td></td>
+      <td></td>
+      <td></td>
+      <td><code>KEYCODE_TV_MEDIA_CONTEXT_MENU</code> (257)</td>
+    </tr>
+    <tr>
+      <td><code>"TVNetwork"</code></td>
+      <td>Toggle the TV's network connection on and off.</td>
+      <td></td>
+      <td></td>
+      <td></td>
+      <td><code>KEYCODE_TV_NETWORK</code> (241)</td>
+    </tr>
+    <tr>
+      <td><code>"TVNumberEntry"</code></td>
+      <td>Put the TV into number entry mode.</td>
+      <td></td>
+      <td></td>
+      <td></td>
+      <td><code>KEYCODE_TV_NUMBER_ENTRY</code> (234)</td>
+    </tr>
+    <tr>
+      <td><code>"TVPower"</code> [2]</td>
+      <td>The device's power button.</td>
+      <td></td>
+      <td></td>
+      <td></td>
+      <td><code>KEYCODE_TV_POWER</code> (177)</td>
+    </tr>
+    <tr>
+      <td><code>"TVRadioService"</code></td>
+      <td>Radio button.</td>
+      <td></td>
+      <td></td>
+      <td></td>
+      <td><code>KEYCODE_TV_RADIO_SERVICE</code> (232)</td>
+    </tr>
+    <tr>
+      <td><code>"TVSatellite"</code></td>
+      <td>Satellite button.</td>
+      <td></td>
+      <td></td>
+      <td></td>
+      <td><code>KEYCODE_TV_SATELLITE</code> (237)</td>
+    </tr>
+    <tr>
+      <td><code>"TVSatelliteBS"</code></td>
+      <td>Broadcast Satellite button.</td>
+      <td></td>
+      <td></td>
+      <td></td>
+      <td><code>KEYCODE_TV_SATELLITE_BS</code> (238)</td>
+    </tr>
+    <tr>
+      <td><code>"TVSatelliteCS"</code></td>
+      <td>Communication Satellite button.</td>
+      <td></td>
+      <td></td>
+      <td></td>
+      <td><code>KEYCODE_TV_SATELLITE_CS</code> (239)</td>
+    </tr>
+    <tr>
+      <td><code>"TVSatelliteToggle"</code></td>
+      <td>Toggles among available satellites.</td>
+      <td></td>
+      <td></td>
+      <td></td>
+      <td><code>KEYCODE_TV_SATELLITE_SERVICE</code> (240)</td>
+    </tr>
+    <tr>
+      <td><code>"TVTerrestrialAnalog"</code></td>
+      <td>
+        Selects analog terrestrial television service (analog cable or antenna
+        reception).
+      </td>
+      <td></td>
+      <td></td>
+      <td></td>
+      <td><code>KEYCODE_TV_TERRESTRIAL_ANALOG</code> (235)</td>
+    </tr>
+    <tr>
+      <td><code>"TVTerrestrialDigital"</code></td>
+      <td>
+        Selects digital terrestrial television service (digital cable or antenna
+        receiption).
+      </td>
+      <td></td>
+      <td></td>
+      <td></td>
+      <td><code>KEYCODE_TV_TERRESTRIAL_DIGITAL</code> (236)</td>
+    </tr>
+    <tr>
+      <td><code>"TVTimer"</code></td>
+      <td>Timer programming button.</td>
+      <td></td>
+      <td></td>
+      <td></td>
+      <td><code>KEYCODE_TV_TIMER_PROGRAMMING</code> (258)</td>
+    </tr>
+  </thead>
 </table>
 
-<p>[1] Firefox added proper support for the <code>"TV"</code> key in Firefox 37; before that, this key generated the key code <code>"Live"</code>.</p>
+\[1] Firefox added proper support for the `"TV"` key in Firefox 37; before that, this key generated the key code `"Live"`.
 
-<p>[2] These keys were <code>"Unidentified"</code> until Firefox 37.</p>
+\[2] These keys were `"Unidentified"` until Firefox 37.
 
-<h2 id="Media_controller_keys">Media controller keys</h2>
+## Media controller keys
 
-<p>Because modern remote controls for media devices often include buttons beyond the basic controls covered elsewhere in this document, key values are defined for a broad array of these additional buttons.</p>
+Because modern remote controls for media devices often include buttons beyond the basic controls covered elsewhere in this document, key values are defined for a broad array of these additional buttons.
 
-<p>The values below are derived in part form a number of consumer electronics technical specifications:</p>
+The values below are derived in part form a number of consumer electronics technical specifications:
 
-<ul>
- <li><a href="http://atsc.org/standard/a100-dtv-application-software-environment-level-1-dase-1/">DTV Application Software Environment</a> (part of the {{interwiki("wikipedia", "ATSC")}} specification)</li>
- <li><a href="http://www.cablelabs.com/specifications/OC-SP-OCAP1.1.3-100603.pdf">Open Cable Application Platform 1.1.3</a></li>
- <li><a href="http://www.ce.org/Standards/Standard-Listings/R7-Home-Network-Committee/CEA-2014-B-(ANSI%29.aspx">ANSI/CEA-2014-B</a>: Web-based Protocol and Framework for Remote User Interface on UPnP™ Networks and the Internet</li>
- <li><a href="http://developer.android.com/reference/android/view/KeyEvent.html">Android KeyEvent key code values</a></li>
-</ul>
+- [DTV Application Software Environment](http://atsc.org/standard/a100-dtv-application-software-environment-level-1-dase-1/) (part of the {{interwiki("wikipedia", "ATSC")}} specification)
+- [Open Cable Application Platform 1.1.3](http://www.cablelabs.com/specifications/OC-SP-OCAP1.1.3-100603.pdf)
+- [ANSI/CEA-2014-B](http://www.ce.org/Standards/Standard-Listings/R7-Home-Network-Committee/CEA-2014-B-(ANSI%29.aspx): Web-based Protocol and Framework for Remote User Interface on UPnP™ Networks and the Internet
+- [Android KeyEvent key code values](http://developer.android.com/reference/android/view/KeyEvent.html)
 
-<div class="note">
-<p><strong>Note :</strong> Remote controls typically include keys whose values are already defined elsewhere, such as under {{anch("Multimedia keys")}} or {{anch("Audio control keys")}}. Those keys' values will match what's documented in those tables.</p>
-</div>
+> **Note :** Remote controls typically include keys whose values are already defined elsewhere, such as under {{anch("Multimedia keys")}} or {{anch("Audio control keys")}}. Those keys' values will match what's documented in those tables.
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th rowspan="2" scope="col"><code>KeyboardEvent.key</code> Value</th>
-   <th rowspan="2" scope="col">Description</th>
-   <th colspan="4" scope="col">Virtual Keycode</th>
-  </tr>
-  <tr>
-   <th scope="col">Windows</th>
-   <th scope="col">Mac</th>
-   <th scope="col">Linux</th>
-   <th scope="col">Android</th>
-  </tr>
-  <tr>
-   <td><code>"AVRInput"</code> [3]</td>
-   <td>Changes the input mode on an external audio/video receiver (AVR) unit.</td>
-   <td></td>
-   <td></td>
-   <td></td>
-   <td><code>KEYCODE_AVR_INPUT</code> (182)</td>
-  </tr>
-  <tr>
-   <td><code>"AVRPower"</code> [3]</td>
-   <td>Toggles the power on an external AVR unit.</td>
-   <td></td>
-   <td></td>
-   <td></td>
-   <td><code>KEYCODE_AVR_POWER</code> (181)</td>
-  </tr>
-  <tr>
-   <td><code>"ColorF0Red"</code> [3]</td>
-   <td>General-purpose media function key, color-coded red; this has index 0 among the colored keys.</td>
-   <td><code>VK_COLORED_KEY_0</code></td>
-   <td></td>
-   <td></td>
-   <td><code>KEYCODE_PROG_RED</code> (183)</td>
-  </tr>
-  <tr>
-   <td><code>"ColorF1Green"</code> [3]</td>
-   <td>General-purpose media funciton key, color-coded green; this has index 1 among the colored keys.</td>
-   <td><code>VK_COLORED_KEY_1</code></td>
-   <td></td>
-   <td></td>
-   <td><code>KEYCODE_PROG_GREEN</code> (184)</td>
-  </tr>
-  <tr>
-   <td><code>"ColorF2Yellow"</code> [3]</td>
-   <td>General-purpose media funciton key, color-coded yellow; this has index 2 among the colored keys.</td>
-   <td><code>VK_COLORED_KEY_2</code></td>
-   <td></td>
-   <td></td>
-   <td><code>KEYCODE_PROG_YELLOW</code> (185)</td>
-  </tr>
-  <tr>
-   <td><code>"ColorF3Blue"</code> [3]</td>
-   <td>General-purpose media funciton key, color-coded blue; this has index 3 among the colored keys.</td>
-   <td><code>VK_COLORED_KEY_3</code></td>
-   <td></td>
-   <td></td>
-   <td><code>KEYCODE_PROG_BLUE</code> (186)</td>
-  </tr>
-  <tr>
-   <td><code>"ColorF4Grey"</code></td>
-   <td>General-purpose media funciton key, color-coded grey; this has index 4 among the colored keys.</td>
-   <td><code>VK_COLORED_KEY_4</code></td>
-   <td></td>
-   <td></td>
-   <td><code>KEYCODE_PROG_GREY</code></td>
-  </tr>
-  <tr>
-   <td><code>"ColorF5Brown"</code></td>
-   <td>General-purpose media funciton key, color-coded brown; this has index 5 among the colored keys.</td>
-   <td><code>VK_COLORED_KEY_5</code></td>
-   <td></td>
-   <td></td>
-   <td><code>KEYCODE_PROG_BROWN</code></td>
-  </tr>
-  <tr>
-   <td><code>"ClosedCaptionToggle"</code></td>
-   <td>Toggles closed captioning on and off.</td>
-   <td><code>VK_CC</code></td>
-   <td></td>
-   <td></td>
-   <td><code>KEYCODE_CAPTIONS</code> (175)</td>
-  </tr>
-  <tr>
-   <td><code>"Dimmer"</code></td>
-   <td>Adjusts the brightness of the device by toggling between two brightness levels <em>or</em> by cycling among multiple brightness levels.</td>
-   <td><code>VK_DIMMER</code></td>
-   <td></td>
-   <td><code>GDK_KEY_BrightnessAdjust</code> (0x1008FF3B)</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"DisplaySwap"</code></td>
-   <td>Cycles among video sources.</td>
-   <td><code>VK_DISPLAY_SWAP</code></td>
-   <td></td>
-   <td></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"DVR"</code></td>
-   <td>Switches the input source to the Digital Video Recorder (DVR).</td>
-   <td></td>
-   <td></td>
-   <td></td>
-   <td><code>KEYCODE_DVR</code> (173)</td>
-  </tr>
-  <tr>
-   <td><code>"Exit"</code></td>
-   <td>The Exit button, which exits the curreent application or menu.</td>
-   <td><code>VK_EXIT</code></td>
-   <td></td>
-   <td><code>Qt::Key_Exit</code> (0x0102000a)</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"FavoriteClear0"</code></td>
-   <td>Clears the program or content stored in the first favorites list slot.</td>
-   <td><code>VK_CLEAR_FAVORITE_0</code></td>
-   <td></td>
-   <td></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"FavoriteClear1"</code></td>
-   <td>Clears the program or content stored in the second favorites list slot.</td>
-   <td><code>VK_CLEAR_FAVORITE_1</code></td>
-   <td></td>
-   <td></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"FavoriteClear2"</code></td>
-   <td>Clears the program or content stored in the third favorites list slot.</td>
-   <td><code>VK_CLEAR_FAVORITE_2</code></td>
-   <td></td>
-   <td></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"FavoriteClear3"</code></td>
-   <td>Clears the program or content stored in the fourth favorites list slot.</td>
-   <td><code>VK_CLEAR_FAVORITE_3</code></td>
-   <td></td>
-   <td></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"FavoriteRecall0"</code></td>
-   <td>Selects (recalls) the program or content stored in the first favorites list slot.</td>
-   <td><code>VK_RECALL_FAVORITE_0</code></td>
-   <td></td>
-   <td></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"FavoriteRecall1"</code></td>
-   <td>Selects (recalls) the program or content stored in the second favorites list slot.</td>
-   <td><code>VK_RECALL_FAVORITE_1</code></td>
-   <td></td>
-   <td></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"FavoriteRecall2"</code></td>
-   <td>Selects (recalls) the program or content stored in the third favorites list slot.</td>
-   <td><code>VK_RECALL_FAVORITE_2</code></td>
-   <td></td>
-   <td></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"FavoriteRecall3"</code></td>
-   <td>Selects (recalls) the program or content stored in the fourth favorites list slot.</td>
-   <td><code>VK_RECALL_FAVORITE_3</code></td>
-   <td></td>
-   <td></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"FavoriteStore0"</code></td>
-   <td>Stores the current program or content into the first favorites list slot.</td>
-   <td><code>VK_STORE_FAVORITE_0</code></td>
-   <td></td>
-   <td></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"FavoriteStore1"</code></td>
-   <td>Stores the current program or content into the second favorites list slot.</td>
-   <td><code>VK_STORE_FAVORITE_1</code></td>
-   <td></td>
-   <td></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"FavoriteStore2"</code></td>
-   <td>Stores the current program or content into the third favorites list slot.</td>
-   <td><code>VK_STORE_FAVORITE_2</code></td>
-   <td></td>
-   <td></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"FavoriteStore3"</code></td>
-   <td>Stores the current program or content into the fourth favorites list slot.</td>
-   <td><code>VK_STORE_FAVORITE_3</code></td>
-   <td></td>
-   <td></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"Guide"</code></td>
-   <td>Toggles the display of the program or content guide.</td>
-   <td><code>VK_GUIDE</code></td>
-   <td></td>
-   <td><code>Qt::Key_Guide</code> (0x0100011A)</td>
-   <td><code>KEYCODE_GUIDE</code> (172)</td>
-  </tr>
-  <tr>
-   <td><code>"GuideNextDay"</code></td>
-   <td>If the guide is currently displayed, this button tells the guide to display the next day's content.</td>
-   <td><code>VK_NEXT_DAY</code></td>
-   <td></td>
-   <td></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"GuidePreviousDay"</code></td>
-   <td>If the guide is currently displayed, this button tells the guide to display the previous day's content.</td>
-   <td><code>VK_PREV_DAY</code></td>
-   <td></td>
-   <td></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"Info"</code></td>
-   <td>Toggles the display of information about the currently selected content, program, or media.</td>
-   <td><code>VK_INFO</code></td>
-   <td></td>
-   <td><code>Qt::Key_Info</code> (0x0100011B)</td>
-   <td><code>KEYCODE_INFO</code> (165)</td>
-  </tr>
-  <tr>
-   <td><code>"InstantReplay"</code></td>
-   <td>Tellls the device to perform an instant replay (typically some form of jumping back a short amount of time then playing it again, possibly but not usually in slow motion).</td>
-   <td><code>VK_INSTANT_REPLAY</code></td>
-   <td></td>
-   <td></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"Link"</code></td>
-   <td>Opens content liniked to the current program, if available and possible.</td>
-   <td><code>VK_LINK</code></td>
-   <td></td>
-   <td></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"ListProgram"</code></td>
-   <td>Lists the current program.</td>
-   <td><code>VK_LIST</code></td>
-   <td></td>
-   <td></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"LiveContent"</code></td>
-   <td>Toggles a display listing currently available live content or programs.</td>
-   <td><code>VK_LIVE</code></td>
-   <td></td>
-   <td></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"Lock"</code></td>
-   <td>Locks or unlocks the currently selected content or pgoram.</td>
-   <td><code>VK_LOCK</code></td>
-   <td></td>
-   <td></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"MediaApps"</code></td>
-   <td>Presents a list of media applications, such as photo viewers, audio and video players, and games. [1]</td>
-   <td><code>VK_APPS</code></td>
-   <td></td>
-   <td></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"MediaAudioTrack"</code></td>
-   <td>The Audio Track key.</td>
-   <td></td>
-   <td></td>
-   <td>GDK_KEY_AudioCycleTrack (0x1008FF9B)<br>
-    <code>Qt::Key_AudioCycleTrack</code> (0x01000106)</td>
-   <td><code>KEYCODE_MEDIA_AUDIO_TRACK</code> (222)</td>
-  </tr>
-  <tr>
-   <td><code>"MediaLast"</code></td>
-   <td>Jumps back to the last-viewed content, program, or other media.</td>
-   <td><code>VK_LAST</code></td>
-   <td></td>
-   <td><code>Qt::Key_MediaLast</code> (0x0100FFFF)</td>
-   <td><code>KEYCODE_LAST_CHANNEL</code> (229)</td>
-  </tr>
-  <tr>
-   <td><code>"MediaSkipBackward"</code></td>
-   <td>Skips backward to the previous content or program.</td>
-   <td></td>
-   <td></td>
-   <td></td>
-   <td><code>KEYCODE_MEDIA_SKIP_BACKWARD</code></td>
-  </tr>
-  <tr>
-   <td><code>"MediaSkipForward"</code></td>
-   <td>Skips forward to the next content or program.</td>
-   <td><code>VK_SKIP</code></td>
-   <td></td>
-   <td></td>
-   <td><code>KEYCODE_MEDIA_SKIP_FORWARD</code></td>
-  </tr>
-  <tr>
-   <td><code>"MediaStepBackward"</code></td>
-   <td>Steps backward to the previous content or program.</td>
-   <td></td>
-   <td></td>
-   <td></td>
-   <td><code>KEYCODE_MEDIA_STEP_BACKWARD</code></td>
-  </tr>
-  <tr>
-   <td><code>"MediaStepForward"</code></td>
-   <td>Steps forward to the next content or program.</td>
-   <td></td>
-   <td></td>
-   <td></td>
-   <td><code>KEYCODE_MEDIA_SKIP_FORWARD</code></td>
-  </tr>
-  <tr>
-   <td><code>"MediaTopMenu"</code></td>
-   <td>Top Menu button; opens the media's main menu, such as on a DVD or Blu-Ray disc.</td>
-   <td></td>
-   <td></td>
-   <td><code>Qt::Key_TopMenu</code> (0x0100010A)</td>
-   <td><code>KEYCODE_MEDIA_TOP_MENU</code></td>
-  </tr>
-  <tr>
-   <td><code>"NavigateIn"</code></td>
-   <td>Navigates into a submenu or option.</td>
-   <td></td>
-   <td></td>
-   <td></td>
-   <td><code>KEYCODE_NAVIGATE_IN</code></td>
-  </tr>
-  <tr>
-   <td><code>"NavigateNext"</code></td>
-   <td>Navigates to the next item.</td>
-   <td></td>
-   <td></td>
-   <td></td>
-   <td><code>KEYCODE_NAVIGATE_NEXT</code></td>
-  </tr>
-  <tr>
-   <td><code>"NavigateOut"</code></td>
-   <td>Navigates out of the current screen or menu.</td>
-   <td></td>
-   <td></td>
-   <td></td>
-   <td><code>KEYCODE_NAVIGATE_OUT</code></td>
-  </tr>
-  <tr>
-   <td><code>"NavigatePrevious"</code></td>
-   <td>Navigates to the previous item.</td>
-   <td></td>
-   <td></td>
-   <td></td>
-   <td><code>KEYCODE_NAVIGATE_PREVIOUS</code></td>
-  </tr>
-  <tr>
-   <td><code>"NextFavoriteChannel"</code></td>
-   <td>Cycles to the next channel in the favorites list.</td>
-   <td><code>VK_NEXT_FAVORITE_CHANNEL</code></td>
-   <td></td>
-   <td></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"NextUserProfile"</code></td>
-   <td>Cycles to the next saved user profile, if this feature is supported and multiple profiles exist.</td>
-   <td><code>VK_USER</code></td>
-   <td></td>
-   <td></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"OnDemand"</code></td>
-   <td>Opens the user interface for selecting on demand content or programs to watch.</td>
-   <td><code>VK_ON_DEMAND</code></td>
-   <td></td>
-   <td></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"Pairing"</code></td>
-   <td>Starts the process of pairing the remote with a device to be controlled.</td>
-   <td></td>
-   <td></td>
-   <td></td>
-   <td><code>KEYCODE_PAIRING</code> (225)</td>
-  </tr>
-  <tr>
-   <td><code>"PinPDown"</code></td>
-   <td>A button to move the picture-in-picture view downward.</td>
-   <td><code>VK_PINP_DOWN</code></td>
-   <td></td>
-   <td></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"PinPMove"</code></td>
-   <td>A button to control moving the picture-in-picture view.</td>
-   <td><code>VK_PINP_MOVE</code></td>
-   <td></td>
-   <td></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"PinPToggle"</code></td>
-   <td>Toggles display of th epicture-in-picture view on and off.</td>
-   <td><code>VK_PINP_TOGGLE</code></td>
-   <td></td>
-   <td></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"PinPUp"</code></td>
-   <td>A button to move the picture-in-picture view upward.</td>
-   <td><code>VK_PINP_UP</code></td>
-   <td></td>
-   <td></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"PlaySpeedDown"</code></td>
-   <td>Decreases the media playback rate.</td>
-   <td><code>VK_PLAY_SPEED_DOWN</code></td>
-   <td></td>
-   <td></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"PlaySpeedReset"</code></td>
-   <td>Returns the media playback rate to normal.</td>
-   <td><code>VK_PLAY_SPEED_RESET</code></td>
-   <td></td>
-   <td></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"PlaySpeedUp"</code></td>
-   <td>Increases the media playback rate.</td>
-   <td><code>VK_PLAY_SPEED_UP</code></td>
-   <td></td>
-   <td></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"RandomToggle"</code></td>
-   <td>Toggles random media (also known as "shuffle mode") on and off.</td>
-   <td><code>VK_RANDOM_TOGGLE</code></td>
-   <td></td>
-   <td><code>GDK_KEY_AudioRandomPlay</code> (0x1008FF99)</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"RcLowBattery"</code></td>
-   <td>A code sent when the remote control's battery is low. This doesn't actually correspond to a physical key at all.</td>
-   <td><code>VK_RC_LOW_BATTERY</code></td>
-   <td></td>
-   <td></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"RecordSpeedNext"</code></td>
-   <td>Cycles among the available media recording speeds.</td>
-   <td><code>VK_RECORD_SPEED_NEXT</code></td>
-   <td></td>
-   <td></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"RfBypass"</code></td>
-   <td>Toggles radio frequency (RF) input bypass mode on and off. RF bypass mode passes RF input directly to the RF output without any processing or filtering.</td>
-   <td><code>VK_RF_BYPASS</code></td>
-   <td></td>
-   <td></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"ScanChannelsToggle"</code></td>
-   <td>Toggles the channel scan mode on and off; this is a mode which flips through channels automatically until the user stops the scan.</td>
-   <td><code>VK_SCAN_CHANNELS_TOGGLE</code></td>
-   <td></td>
-   <td></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"ScreenModeNext"</code></td>
-   <td>Cycles through the available screen display modes.</td>
-   <td><code>VK_SCREEN_MODE_NEXT</code></td>
-   <td></td>
-   <td></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"Settings"</code></td>
-   <td>Toggles display of the device's settings screen on and off.</td>
-   <td><code>VK_SETTINGS</code></td>
-   <td></td>
-   <td><code>Qt::Key_Settings</code> (0x0100011C)</td>
-   <td><code>KEYCODE_SETTINGS</code></td>
-  </tr>
-  <tr>
-   <td><code>"SplitScreenToggle"</code></td>
-   <td>Toggles split screen display mode on and off.</td>
-   <td><code>VK_SPLIT_SCREEN_TOGGLE</code></td>
-   <td></td>
-   <td><code>GDK_KEY_SplitScreen (</code>0x1008FF7D)<br>
-    <code>Qt::Key_SplitScreen</code> (0x010000ED)</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"STBInput"</code> [3]</td>
-   <td>Cycles among input modes on an external set-top box (STB).</td>
-   <td></td>
-   <td></td>
-   <td></td>
-   <td><code>KEYCODE_STB_INPUT</code> (180)</td>
-  </tr>
-  <tr>
-   <td><code>"STBPower"</code> [3]</td>
-   <td>Toggles on and off an external STB.</td>
-   <td></td>
-   <td></td>
-   <td></td>
-   <td><code>KEYCODE_STB_POWER</code> (179)</td>
-  </tr>
-  <tr>
-   <td><code>"Subtitle"</code></td>
-   <td>Toggles the display of subtitles on and off if they're available.</td>
-   <td><code>VK_SUBTITLE</code></td>
-   <td></td>
-   <td><code>GDK_KEY_Subtitle</code> (0x1008FF9A)</td>
-   <td><code>KEYCODE_CAPTIONS</code> (175)</td>
-  </tr>
-  <tr>
-   <td><code>"Teletext"</code></td>
-   <td>Toggles display of {{interwiki("wikipedia", "teletext")}}, if available.</td>
-   <td><code>VK_TELETEXT</code></td>
-   <td></td>
-   <td></td>
-   <td><code>KEYCODE_TV_TELETEXT</code> (233)</td>
-  </tr>
-  <tr>
-   <td><code>"VideoModeNext"</code> [3]</td>
-   <td>Cycles through the available video modes.</td>
-   <td><code>VK_VIDEO_MODE_NEXT</code></td>
-   <td></td>
-   <td><code>GDK_KEY_Next_VMode</code> (0x1008FE22)</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"Wink"</code></td>
-   <td>Causes the device to identify itself in some fashion, such as by flashing a light, briefly changing the brightness of indicator lights, or emitting a tone.</td>
-   <td><code>VK_WINK</code></td>
-   <td></td>
-   <td></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"ZoomToggle"</code> [2]</td>
-   <td>Toggles between full-screen and scaled content display, or otherwise change the magnification level.</td>
-   <td><code>VK_ZOOM</code> (0xFB)</td>
-   <td></td>
-   <td><code>Qt::Key_Zoom</code> (0x01020006)</td>
-   <td><code>KEYCODE_TV_ZOOM_MODE</code> (255)</td>
-  </tr>
- </thead>
+  <thead>
+    <tr>
+      <th rowspan="2" scope="col"><code>KeyboardEvent.key</code> Value</th>
+      <th rowspan="2" scope="col">Description</th>
+      <th colspan="4" scope="col">Virtual Keycode</th>
+    </tr>
+    <tr>
+      <th scope="col">Windows</th>
+      <th scope="col">Mac</th>
+      <th scope="col">Linux</th>
+      <th scope="col">Android</th>
+    </tr>
+    <tr>
+      <td><code>"AVRInput"</code> [3]</td>
+      <td>
+        Changes the input mode on an external audio/video receiver (AVR) unit.
+      </td>
+      <td></td>
+      <td></td>
+      <td></td>
+      <td><code>KEYCODE_AVR_INPUT</code> (182)</td>
+    </tr>
+    <tr>
+      <td><code>"AVRPower"</code> [3]</td>
+      <td>Toggles the power on an external AVR unit.</td>
+      <td></td>
+      <td></td>
+      <td></td>
+      <td><code>KEYCODE_AVR_POWER</code> (181)</td>
+    </tr>
+    <tr>
+      <td><code>"ColorF0Red"</code> [3]</td>
+      <td>
+        General-purpose media function key, color-coded red; this has index 0
+        among the colored keys.
+      </td>
+      <td><code>VK_COLORED_KEY_0</code></td>
+      <td></td>
+      <td></td>
+      <td><code>KEYCODE_PROG_RED</code> (183)</td>
+    </tr>
+    <tr>
+      <td><code>"ColorF1Green"</code> [3]</td>
+      <td>
+        General-purpose media funciton key, color-coded green; this has index 1
+        among the colored keys.
+      </td>
+      <td><code>VK_COLORED_KEY_1</code></td>
+      <td></td>
+      <td></td>
+      <td><code>KEYCODE_PROG_GREEN</code> (184)</td>
+    </tr>
+    <tr>
+      <td><code>"ColorF2Yellow"</code> [3]</td>
+      <td>
+        General-purpose media funciton key, color-coded yellow; this has index 2
+        among the colored keys.
+      </td>
+      <td><code>VK_COLORED_KEY_2</code></td>
+      <td></td>
+      <td></td>
+      <td><code>KEYCODE_PROG_YELLOW</code> (185)</td>
+    </tr>
+    <tr>
+      <td><code>"ColorF3Blue"</code> [3]</td>
+      <td>
+        General-purpose media funciton key, color-coded blue; this has index 3
+        among the colored keys.
+      </td>
+      <td><code>VK_COLORED_KEY_3</code></td>
+      <td></td>
+      <td></td>
+      <td><code>KEYCODE_PROG_BLUE</code> (186)</td>
+    </tr>
+    <tr>
+      <td><code>"ColorF4Grey"</code></td>
+      <td>
+        General-purpose media funciton key, color-coded grey; this has index 4
+        among the colored keys.
+      </td>
+      <td><code>VK_COLORED_KEY_4</code></td>
+      <td></td>
+      <td></td>
+      <td><code>KEYCODE_PROG_GREY</code></td>
+    </tr>
+    <tr>
+      <td><code>"ColorF5Brown"</code></td>
+      <td>
+        General-purpose media funciton key, color-coded brown; this has index 5
+        among the colored keys.
+      </td>
+      <td><code>VK_COLORED_KEY_5</code></td>
+      <td></td>
+      <td></td>
+      <td><code>KEYCODE_PROG_BROWN</code></td>
+    </tr>
+    <tr>
+      <td><code>"ClosedCaptionToggle"</code></td>
+      <td>Toggles closed captioning on and off.</td>
+      <td><code>VK_CC</code></td>
+      <td></td>
+      <td></td>
+      <td><code>KEYCODE_CAPTIONS</code> (175)</td>
+    </tr>
+    <tr>
+      <td><code>"Dimmer"</code></td>
+      <td>
+        Adjusts the brightness of the device by toggling between two brightness
+        levels <em>or</em> by cycling among multiple brightness levels.
+      </td>
+      <td><code>VK_DIMMER</code></td>
+      <td></td>
+      <td><code>GDK_KEY_BrightnessAdjust</code> (0x1008FF3B)</td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"DisplaySwap"</code></td>
+      <td>Cycles among video sources.</td>
+      <td><code>VK_DISPLAY_SWAP</code></td>
+      <td></td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"DVR"</code></td>
+      <td>Switches the input source to the Digital Video Recorder (DVR).</td>
+      <td></td>
+      <td></td>
+      <td></td>
+      <td><code>KEYCODE_DVR</code> (173)</td>
+    </tr>
+    <tr>
+      <td><code>"Exit"</code></td>
+      <td>The Exit button, which exits the curreent application or menu.</td>
+      <td><code>VK_EXIT</code></td>
+      <td></td>
+      <td><code>Qt::Key_Exit</code> (0x0102000a)</td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"FavoriteClear0"</code></td>
+      <td>
+        Clears the program or content stored in the first favorites list slot.
+      </td>
+      <td><code>VK_CLEAR_FAVORITE_0</code></td>
+      <td></td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"FavoriteClear1"</code></td>
+      <td>
+        Clears the program or content stored in the second favorites list slot.
+      </td>
+      <td><code>VK_CLEAR_FAVORITE_1</code></td>
+      <td></td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"FavoriteClear2"</code></td>
+      <td>
+        Clears the program or content stored in the third favorites list slot.
+      </td>
+      <td><code>VK_CLEAR_FAVORITE_2</code></td>
+      <td></td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"FavoriteClear3"</code></td>
+      <td>
+        Clears the program or content stored in the fourth favorites list slot.
+      </td>
+      <td><code>VK_CLEAR_FAVORITE_3</code></td>
+      <td></td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"FavoriteRecall0"</code></td>
+      <td>
+        Selects (recalls) the program or content stored in the first favorites
+        list slot.
+      </td>
+      <td><code>VK_RECALL_FAVORITE_0</code></td>
+      <td></td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"FavoriteRecall1"</code></td>
+      <td>
+        Selects (recalls) the program or content stored in the second favorites
+        list slot.
+      </td>
+      <td><code>VK_RECALL_FAVORITE_1</code></td>
+      <td></td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"FavoriteRecall2"</code></td>
+      <td>
+        Selects (recalls) the program or content stored in the third favorites
+        list slot.
+      </td>
+      <td><code>VK_RECALL_FAVORITE_2</code></td>
+      <td></td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"FavoriteRecall3"</code></td>
+      <td>
+        Selects (recalls) the program or content stored in the fourth favorites
+        list slot.
+      </td>
+      <td><code>VK_RECALL_FAVORITE_3</code></td>
+      <td></td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"FavoriteStore0"</code></td>
+      <td>
+        Stores the current program or content into the first favorites list
+        slot.
+      </td>
+      <td><code>VK_STORE_FAVORITE_0</code></td>
+      <td></td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"FavoriteStore1"</code></td>
+      <td>
+        Stores the current program or content into the second favorites list
+        slot.
+      </td>
+      <td><code>VK_STORE_FAVORITE_1</code></td>
+      <td></td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"FavoriteStore2"</code></td>
+      <td>
+        Stores the current program or content into the third favorites list
+        slot.
+      </td>
+      <td><code>VK_STORE_FAVORITE_2</code></td>
+      <td></td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"FavoriteStore3"</code></td>
+      <td>
+        Stores the current program or content into the fourth favorites list
+        slot.
+      </td>
+      <td><code>VK_STORE_FAVORITE_3</code></td>
+      <td></td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"Guide"</code></td>
+      <td>Toggles the display of the program or content guide.</td>
+      <td><code>VK_GUIDE</code></td>
+      <td></td>
+      <td><code>Qt::Key_Guide</code> (0x0100011A)</td>
+      <td><code>KEYCODE_GUIDE</code> (172)</td>
+    </tr>
+    <tr>
+      <td><code>"GuideNextDay"</code></td>
+      <td>
+        If the guide is currently displayed, this button tells the guide to
+        display the next day's content.
+      </td>
+      <td><code>VK_NEXT_DAY</code></td>
+      <td></td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"GuidePreviousDay"</code></td>
+      <td>
+        If the guide is currently displayed, this button tells the guide to
+        display the previous day's content.
+      </td>
+      <td><code>VK_PREV_DAY</code></td>
+      <td></td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"Info"</code></td>
+      <td>
+        Toggles the display of information about the currently selected content,
+        program, or media.
+      </td>
+      <td><code>VK_INFO</code></td>
+      <td></td>
+      <td><code>Qt::Key_Info</code> (0x0100011B)</td>
+      <td><code>KEYCODE_INFO</code> (165)</td>
+    </tr>
+    <tr>
+      <td><code>"InstantReplay"</code></td>
+      <td>
+        Tellls the device to perform an instant replay (typically some form of
+        jumping back a short amount of time then playing it again, possibly but
+        not usually in slow motion).
+      </td>
+      <td><code>VK_INSTANT_REPLAY</code></td>
+      <td></td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"Link"</code></td>
+      <td>
+        Opens content liniked to the current program, if available and possible.
+      </td>
+      <td><code>VK_LINK</code></td>
+      <td></td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"ListProgram"</code></td>
+      <td>Lists the current program.</td>
+      <td><code>VK_LIST</code></td>
+      <td></td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"LiveContent"</code></td>
+      <td>
+        Toggles a display listing currently available live content or programs.
+      </td>
+      <td><code>VK_LIVE</code></td>
+      <td></td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"Lock"</code></td>
+      <td>Locks or unlocks the currently selected content or pgoram.</td>
+      <td><code>VK_LOCK</code></td>
+      <td></td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"MediaApps"</code></td>
+      <td>
+        Presents a list of media applications, such as photo viewers, audio and
+        video players, and games. [1]
+      </td>
+      <td><code>VK_APPS</code></td>
+      <td></td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"MediaAudioTrack"</code></td>
+      <td>The Audio Track key.</td>
+      <td></td>
+      <td></td>
+      <td>
+        GDK_KEY_AudioCycleTrack (0x1008FF9B)<br /><code
+          >Qt::Key_AudioCycleTrack</code
+        >
+        (0x01000106)
+      </td>
+      <td><code>KEYCODE_MEDIA_AUDIO_TRACK</code> (222)</td>
+    </tr>
+    <tr>
+      <td><code>"MediaLast"</code></td>
+      <td>Jumps back to the last-viewed content, program, or other media.</td>
+      <td><code>VK_LAST</code></td>
+      <td></td>
+      <td><code>Qt::Key_MediaLast</code> (0x0100FFFF)</td>
+      <td><code>KEYCODE_LAST_CHANNEL</code> (229)</td>
+    </tr>
+    <tr>
+      <td><code>"MediaSkipBackward"</code></td>
+      <td>Skips backward to the previous content or program.</td>
+      <td></td>
+      <td></td>
+      <td></td>
+      <td><code>KEYCODE_MEDIA_SKIP_BACKWARD</code></td>
+    </tr>
+    <tr>
+      <td><code>"MediaSkipForward"</code></td>
+      <td>Skips forward to the next content or program.</td>
+      <td><code>VK_SKIP</code></td>
+      <td></td>
+      <td></td>
+      <td><code>KEYCODE_MEDIA_SKIP_FORWARD</code></td>
+    </tr>
+    <tr>
+      <td><code>"MediaStepBackward"</code></td>
+      <td>Steps backward to the previous content or program.</td>
+      <td></td>
+      <td></td>
+      <td></td>
+      <td><code>KEYCODE_MEDIA_STEP_BACKWARD</code></td>
+    </tr>
+    <tr>
+      <td><code>"MediaStepForward"</code></td>
+      <td>Steps forward to the next content or program.</td>
+      <td></td>
+      <td></td>
+      <td></td>
+      <td><code>KEYCODE_MEDIA_SKIP_FORWARD</code></td>
+    </tr>
+    <tr>
+      <td><code>"MediaTopMenu"</code></td>
+      <td>
+        Top Menu button; opens the media's main menu, such as on a DVD or
+        Blu-Ray disc.
+      </td>
+      <td></td>
+      <td></td>
+      <td><code>Qt::Key_TopMenu</code> (0x0100010A)</td>
+      <td><code>KEYCODE_MEDIA_TOP_MENU</code></td>
+    </tr>
+    <tr>
+      <td><code>"NavigateIn"</code></td>
+      <td>Navigates into a submenu or option.</td>
+      <td></td>
+      <td></td>
+      <td></td>
+      <td><code>KEYCODE_NAVIGATE_IN</code></td>
+    </tr>
+    <tr>
+      <td><code>"NavigateNext"</code></td>
+      <td>Navigates to the next item.</td>
+      <td></td>
+      <td></td>
+      <td></td>
+      <td><code>KEYCODE_NAVIGATE_NEXT</code></td>
+    </tr>
+    <tr>
+      <td><code>"NavigateOut"</code></td>
+      <td>Navigates out of the current screen or menu.</td>
+      <td></td>
+      <td></td>
+      <td></td>
+      <td><code>KEYCODE_NAVIGATE_OUT</code></td>
+    </tr>
+    <tr>
+      <td><code>"NavigatePrevious"</code></td>
+      <td>Navigates to the previous item.</td>
+      <td></td>
+      <td></td>
+      <td></td>
+      <td><code>KEYCODE_NAVIGATE_PREVIOUS</code></td>
+    </tr>
+    <tr>
+      <td><code>"NextFavoriteChannel"</code></td>
+      <td>Cycles to the next channel in the favorites list.</td>
+      <td><code>VK_NEXT_FAVORITE_CHANNEL</code></td>
+      <td></td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"NextUserProfile"</code></td>
+      <td>
+        Cycles to the next saved user profile, if this feature is supported and
+        multiple profiles exist.
+      </td>
+      <td><code>VK_USER</code></td>
+      <td></td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"OnDemand"</code></td>
+      <td>
+        Opens the user interface for selecting on demand content or programs to
+        watch.
+      </td>
+      <td><code>VK_ON_DEMAND</code></td>
+      <td></td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"Pairing"</code></td>
+      <td>
+        Starts the process of pairing the remote with a device to be controlled.
+      </td>
+      <td></td>
+      <td></td>
+      <td></td>
+      <td><code>KEYCODE_PAIRING</code> (225)</td>
+    </tr>
+    <tr>
+      <td><code>"PinPDown"</code></td>
+      <td>A button to move the picture-in-picture view downward.</td>
+      <td><code>VK_PINP_DOWN</code></td>
+      <td></td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"PinPMove"</code></td>
+      <td>A button to control moving the picture-in-picture view.</td>
+      <td><code>VK_PINP_MOVE</code></td>
+      <td></td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"PinPToggle"</code></td>
+      <td>Toggles display of th epicture-in-picture view on and off.</td>
+      <td><code>VK_PINP_TOGGLE</code></td>
+      <td></td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"PinPUp"</code></td>
+      <td>A button to move the picture-in-picture view upward.</td>
+      <td><code>VK_PINP_UP</code></td>
+      <td></td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"PlaySpeedDown"</code></td>
+      <td>Decreases the media playback rate.</td>
+      <td><code>VK_PLAY_SPEED_DOWN</code></td>
+      <td></td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"PlaySpeedReset"</code></td>
+      <td>Returns the media playback rate to normal.</td>
+      <td><code>VK_PLAY_SPEED_RESET</code></td>
+      <td></td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"PlaySpeedUp"</code></td>
+      <td>Increases the media playback rate.</td>
+      <td><code>VK_PLAY_SPEED_UP</code></td>
+      <td></td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"RandomToggle"</code></td>
+      <td>Toggles random media (also known as "shuffle mode") on and off.</td>
+      <td><code>VK_RANDOM_TOGGLE</code></td>
+      <td></td>
+      <td><code>GDK_KEY_AudioRandomPlay</code> (0x1008FF99)</td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"RcLowBattery"</code></td>
+      <td>
+        A code sent when the remote control's battery is low. This doesn't
+        actually correspond to a physical key at all.
+      </td>
+      <td><code>VK_RC_LOW_BATTERY</code></td>
+      <td></td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"RecordSpeedNext"</code></td>
+      <td>Cycles among the available media recording speeds.</td>
+      <td><code>VK_RECORD_SPEED_NEXT</code></td>
+      <td></td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"RfBypass"</code></td>
+      <td>
+        Toggles radio frequency (RF) input bypass mode on and off. RF bypass
+        mode passes RF input directly to the RF output without any processing or
+        filtering.
+      </td>
+      <td><code>VK_RF_BYPASS</code></td>
+      <td></td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"ScanChannelsToggle"</code></td>
+      <td>
+        Toggles the channel scan mode on and off; this is a mode which flips
+        through channels automatically until the user stops the scan.
+      </td>
+      <td><code>VK_SCAN_CHANNELS_TOGGLE</code></td>
+      <td></td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"ScreenModeNext"</code></td>
+      <td>Cycles through the available screen display modes.</td>
+      <td><code>VK_SCREEN_MODE_NEXT</code></td>
+      <td></td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"Settings"</code></td>
+      <td>Toggles display of the device's settings screen on and off.</td>
+      <td><code>VK_SETTINGS</code></td>
+      <td></td>
+      <td><code>Qt::Key_Settings</code> (0x0100011C)</td>
+      <td><code>KEYCODE_SETTINGS</code></td>
+    </tr>
+    <tr>
+      <td><code>"SplitScreenToggle"</code></td>
+      <td>Toggles split screen display mode on and off.</td>
+      <td><code>VK_SPLIT_SCREEN_TOGGLE</code></td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_SplitScreen (</code>0x1008FF7D)<br /><code
+          >Qt::Key_SplitScreen</code
+        >
+        (0x010000ED)
+      </td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"STBInput"</code> [3]</td>
+      <td>Cycles among input modes on an external set-top box (STB).</td>
+      <td></td>
+      <td></td>
+      <td></td>
+      <td><code>KEYCODE_STB_INPUT</code> (180)</td>
+    </tr>
+    <tr>
+      <td><code>"STBPower"</code> [3]</td>
+      <td>Toggles on and off an external STB.</td>
+      <td></td>
+      <td></td>
+      <td></td>
+      <td><code>KEYCODE_STB_POWER</code> (179)</td>
+    </tr>
+    <tr>
+      <td><code>"Subtitle"</code></td>
+      <td>Toggles the display of subtitles on and off if they're available.</td>
+      <td><code>VK_SUBTITLE</code></td>
+      <td></td>
+      <td><code>GDK_KEY_Subtitle</code> (0x1008FF9A)</td>
+      <td><code>KEYCODE_CAPTIONS</code> (175)</td>
+    </tr>
+    <tr>
+      <td><code>"Teletext"</code></td>
+      <td>
+        Toggles display of {{interwiki("wikipedia", "teletext")}},
+        if available.
+      </td>
+      <td><code>VK_TELETEXT</code></td>
+      <td></td>
+      <td></td>
+      <td><code>KEYCODE_TV_TELETEXT</code> (233)</td>
+    </tr>
+    <tr>
+      <td><code>"VideoModeNext"</code> [3]</td>
+      <td>Cycles through the available video modes.</td>
+      <td><code>VK_VIDEO_MODE_NEXT</code></td>
+      <td></td>
+      <td><code>GDK_KEY_Next_VMode</code> (0x1008FE22)</td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"Wink"</code></td>
+      <td>
+        Causes the device to identify itself in some fashion, such as by
+        flashing a light, briefly changing the brightness of indicator lights,
+        or emitting a tone.
+      </td>
+      <td><code>VK_WINK</code></td>
+      <td></td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"ZoomToggle"</code> [2]</td>
+      <td>
+        Toggles between full-screen and scaled content display, or otherwise
+        change the magnification level.
+      </td>
+      <td><code>VK_ZOOM</code> (0xFB)</td>
+      <td></td>
+      <td><code>Qt::Key_Zoom</code> (0x01020006)</td>
+      <td><code>KEYCODE_TV_ZOOM_MODE</code> (255)</td>
+    </tr>
+  </thead>
 </table>
 
-<p>[1] Don't confuse the media controller <code>VK_APPS</code> key with the Windows <code>VK_APPS</code> key, which is also known as <code>VK_CONTEXT_MENU</code>. That key is encoded as <code>"ContextMenu"</code>.</p>
+\[1] Don't confuse the media controller `VK_APPS` key with the Windows `VK_APPS` key, which is also known as `VK_CONTEXT_MENU`. That key is encoded as `"ContextMenu"`.
 
-<p>[2] Internet Explorer (tested on release 9 and 11) and Firefox 36 and earlier identify the zoom toggle button as <code>"Zoom"</code>. Firefox 37 corrects this to <code>"ZoomToggle"</code>.</p>
+\[2] Internet Explorer (tested on release 9 and 11) and Firefox 36 and earlier identify the zoom toggle button as `"Zoom"`. Firefox 37 corrects this to `"ZoomToggle"`.
 
-<p>[3] These keys were <code>"Unidentified"</code> until Firefox 37.</p>
+\[3] These keys were `"Unidentified"` until Firefox 37.
 
-<h2 id="Speech_recognition_keys">Speech recognition keys</h2>
+## Speech recognition keys
 
-<p>These special multimedia keys are used to control speech recognition features.</p>
+These special multimedia keys are used to control speech recognition features.
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th rowspan="2" scope="col"><code>KeyboardEvent.key</code> Value</th>
-   <th rowspan="2" scope="col">Description</th>
-   <th colspan="4" scope="col">Virtual Keycode</th>
-  </tr>
-  <tr>
-   <th scope="col">Windows</th>
-   <th scope="col">Mac</th>
-   <th scope="col">Linux</th>
-   <th scope="col">Android</th>
-  </tr>
-  <tr>
-   <td><code>"SpeechCorrectionList"</code> [1]</td>
-   <td>Presents a list of possible corrections for a word which was incorrectly identified.</td>
-   <td><code>APPCOMMAND_CORRECTION_LIST</code></td>
-   <td></td>
-   <td></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"SpeechInputToggle"</code> [2]</td>
-   <td>Toggles between dictation mode and command/control mode. This lets the speech engine know whether to interpret spoken words as input text or as commands.</td>
-   <td><code>APPCOMMAND_DICTATE_OR_COMMAND_CONTROL_TOGGLE</code></td>
-   <td></td>
-   <td></td>
-   <td></td>
-  </tr>
- </thead>
+  <thead>
+    <tr>
+      <th rowspan="2" scope="col"><code>KeyboardEvent.key</code> Value</th>
+      <th rowspan="2" scope="col">Description</th>
+      <th colspan="4" scope="col">Virtual Keycode</th>
+    </tr>
+    <tr>
+      <th scope="col">Windows</th>
+      <th scope="col">Mac</th>
+      <th scope="col">Linux</th>
+      <th scope="col">Android</th>
+    </tr>
+    <tr>
+      <td><code>"SpeechCorrectionList"</code> [1]</td>
+      <td>
+        Presents a list of possible corrections for a word which was incorrectly
+        identified.
+      </td>
+      <td><code>APPCOMMAND_CORRECTION_LIST</code></td>
+      <td></td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"SpeechInputToggle"</code> [2]</td>
+      <td>
+        Toggles between dictation mode and command/control mode. This lets the
+        speech engine know whether to interpret spoken words as input text or as
+        commands.
+      </td>
+      <td><code>APPCOMMAND_DICTATE_OR_COMMAND_CONTROL_TOGGLE</code></td>
+      <td></td>
+      <td></td>
+      <td></td>
+    </tr>
+  </thead>
 </table>
 
-<p>[1] The <code>APPCOMMAND_CORRECTION_LIST</code> command on Windows generates <code>"Unidentified"</code> on Firefox.</p>
+\[1] The `APPCOMMAND_CORRECTION_LIST` command on Windows generates `"Unidentified"` on Firefox.
 
-<p>[2] The <code>APPCOMMAND_DICTATE_OR_COMMAND_CONTROL_TOGGLE</code> command on Windows generates <code>"Unidentified"</code> on Firefox.</p>
+\[2] The `APPCOMMAND_DICTATE_OR_COMMAND_CONTROL_TOGGLE` command on Windows generates `"Unidentified"` on Firefox.
 
-<h2 id="Document_keys">Document keys</h2>
+## Document keys
 
-<p>These keys control documents. In the specification, they're included in other sets of keys, such as the media keys, but they make more sense when considered to be their own category.</p>
+These keys control documents. In the specification, they're included in other sets of keys, such as the media keys, but they make more sense when considered to be their own category.
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th rowspan="2" scope="col"><code>KeyboardEvent.key</code> Value</th>
-   <th rowspan="2" scope="col">Description</th>
-   <th colspan="4" scope="col">Virtual Keycode</th>
-  </tr>
-  <tr>
-   <th scope="col">Windows</th>
-   <th scope="col">Mac</th>
-   <th scope="col">Linux</th>
-   <th scope="col">Android</th>
-  </tr>
-  <tr>
-   <td><code>"Close"</code> [1]</td>
-   <td>Closes the current document or message. Must not exit the application.</td>
-   <td><code>APPCOMMAND_CLOSE</code></td>
-   <td></td>
-   <td><code>GDK_KEY_Close</code> (0x1008FF56)<br>
-    <code>Qt::Key_Close</code> (0x010000CE)</td>
-   <td><code>KEYCODE_MEDIA_CLOSE</code> (128)</td>
-  </tr>
-  <tr>
-   <td><code>"New"</code> [1]</td>
-   <td>Creates a new document or message.</td>
-   <td><code>APPCOMMAND_NEW</code></td>
-   <td></td>
-   <td><code>GDK_KEY_New</code> (0x1008FF68)<br>
-    <code>Qt::Key_New</code> (0x01000120)</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"Open"</code> [1]</td>
-   <td>Opens an existing document or message.</td>
-   <td><code>APPCOMMAND_OPEN</code></td>
-   <td></td>
-   <td><code>GDK_KEY_Open</code> (0x1008FF6B)<br>
-    <code>Qt::Key_Open</code> (0x01000121)</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"Print"</code></td>
-   <td>Prints the current document or message.</td>
-   <td><code>APPCOMMAND_PRINT</code></td>
-   <td></td>
-   <td><code>GDK_KEY_Print</code> (0xFF61)<br>
-    <code>Qt::Print</code> (0x01000009)</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"Save"</code> [1]</td>
-   <td>Saves the current document or message.</td>
-   <td><code>APPCOMMAND_SAVE</code></td>
-   <td></td>
-   <td><code>GDK_KEY_Save</code> (0x1008FF77)<br>
-    <code>Qt::Key_Save</code> (0x010000EA)</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"SpellCheck"</code> [1]</td>
-   <td>Starts spell checking the current document.</td>
-   <td><code>APPCOMMAND_SPELL_CHECK</code></td>
-   <td></td>
-   <td><code>GDK_KEY_Spell</code> (0x1008FF7C)<br>
-    <code>Qt::Key_Spell</code> (0x010000EC)</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"MailForward"</code> [1]</td>
-   <td>Opens the user interface to forward a message.</td>
-   <td><code>APPCOMMAND_FORWARD_MAIL</code></td>
-   <td></td>
-   <td><code>GDK_KEY_MailForward</code> (0x1008FF90)<br>
-    <code>Qt::Key_MailForward</code> (0x010000FB)</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"MailReply"</code> [1]</td>
-   <td>Opens the user interface to reply to a message.</td>
-   <td><code>APPCOMMAND_REPLY_TO_MAIL</code></td>
-   <td></td>
-   <td><code>GDK_KEY_Reply</code> (0x1008FF72)<br>
-    <code>Qt::Key_Reply</code> (0x010000E5)</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"MailSend"</code> [1]</td>
-   <td>Sends the current message.</td>
-   <td><code>APPCOMMAND_SEND_MAIL</code></td>
-   <td></td>
-   <td><code>GDK_KEY_Send</code> (0x1008FF7B)<br>
-    <code>Qt::Key_Send</code> (0x010000EB)</td>
-   <td></td>
-  </tr>
- </thead>
+  <thead>
+    <tr>
+      <th rowspan="2" scope="col"><code>KeyboardEvent.key</code> Value</th>
+      <th rowspan="2" scope="col">Description</th>
+      <th colspan="4" scope="col">Virtual Keycode</th>
+    </tr>
+    <tr>
+      <th scope="col">Windows</th>
+      <th scope="col">Mac</th>
+      <th scope="col">Linux</th>
+      <th scope="col">Android</th>
+    </tr>
+    <tr>
+      <td><code>"Close"</code> [1]</td>
+      <td>
+        Closes the current document or message. Must not exit the application.
+      </td>
+      <td><code>APPCOMMAND_CLOSE</code></td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_Close</code> (0x1008FF56)<br /><code>Qt::Key_Close</code>
+        (0x010000CE)
+      </td>
+      <td><code>KEYCODE_MEDIA_CLOSE</code> (128)</td>
+    </tr>
+    <tr>
+      <td><code>"New"</code> [1]</td>
+      <td>Creates a new document or message.</td>
+      <td><code>APPCOMMAND_NEW</code></td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_New</code> (0x1008FF68)<br /><code>Qt::Key_New</code>
+        (0x01000120)
+      </td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"Open"</code> [1]</td>
+      <td>Opens an existing document or message.</td>
+      <td><code>APPCOMMAND_OPEN</code></td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_Open</code> (0x1008FF6B)<br /><code>Qt::Key_Open</code>
+        (0x01000121)
+      </td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"Print"</code></td>
+      <td>Prints the current document or message.</td>
+      <td><code>APPCOMMAND_PRINT</code></td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_Print</code> (0xFF61)<br /><code>Qt::Print</code>
+        (0x01000009)
+      </td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"Save"</code> [1]</td>
+      <td>Saves the current document or message.</td>
+      <td><code>APPCOMMAND_SAVE</code></td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_Save</code> (0x1008FF77)<br /><code>Qt::Key_Save</code>
+        (0x010000EA)
+      </td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"SpellCheck"</code> [1]</td>
+      <td>Starts spell checking the current document.</td>
+      <td><code>APPCOMMAND_SPELL_CHECK</code></td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_Spell</code> (0x1008FF7C)<br /><code>Qt::Key_Spell</code>
+        (0x010000EC)
+      </td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"MailForward"</code> [1]</td>
+      <td>Opens the user interface to forward a message.</td>
+      <td><code>APPCOMMAND_FORWARD_MAIL</code></td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_MailForward</code> (0x1008FF90)<br /><code
+          >Qt::Key_MailForward</code
+        >
+        (0x010000FB)
+      </td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"MailReply"</code> [1]</td>
+      <td>Opens the user interface to reply to a message.</td>
+      <td><code>APPCOMMAND_REPLY_TO_MAIL</code></td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_Reply</code> (0x1008FF72)<br /><code>Qt::Key_Reply</code>
+        (0x010000E5)
+      </td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"MailSend"</code> [1]</td>
+      <td>Sends the current message.</td>
+      <td><code>APPCOMMAND_SEND_MAIL</code></td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_Send</code> (0x1008FF7B)<br /><code>Qt::Key_Send</code>
+        (0x010000EB)
+      </td>
+      <td></td>
+    </tr>
+  </thead>
 </table>
 
-<p>[1] Prior to Firefox 37, this key generated the key value <code>"Unidentified"</code>.</p>
+\[1] Prior to Firefox 37, this key generated the key value `"Unidentified"`.
 
-<h2 id="Application_selector_keys">Application selector keys</h2>
+## Application selector keys
 
-<p>Some keyboards offer special keys for launching or switching to certain common applications. Key values for those are listed here.</p>
+Some keyboards offer special keys for launching or switching to certain common applications. Key values for those are listed here.
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th rowspan="2" scope="col"><code>KeyboardEvent.key</code> Value</th>
-   <th rowspan="2" scope="col">Description</th>
-   <th colspan="4" scope="col">Virtual Keycode</th>
-  </tr>
-  <tr>
-   <th scope="col">Windows</th>
-   <th scope="col">Mac</th>
-   <th scope="col">Linux</th>
-   <th scope="col">Android</th>
-  </tr>
-  <tr>
-   <td><code>"LaunchCalculator"</code> [5]</td>
-   <td>The <kbd>Calculator</kbd> key, often labeled with an icon. This is often used as a generic application launcher key (<code>APPCOMMAND_LAUNCH_APP2</code>).</td>
-   <td><code>APPCOMMAND_LAUNCH_APP2</code></td>
-   <td></td>
-   <td><code>GDK_KEY_Calculator</code> (0x1008FF1D)<br>
-    <code>Qt::Key_Calculator</code> (0x010000CB)</td>
-   <td><code>KEYCODE_CALCULATOR</code> (210)</td>
-  </tr>
-  <tr>
-   <td><code>"LaunchCalendar"</code> [5]</td>
-   <td>The <kbd>Calendar</kbd> key, often labeled with an icon.</td>
-   <td></td>
-   <td></td>
-   <td><code>GDK_KEY_Calendar</code> (0x1008FF20)<br>
-    <code>Qt::Key_Calendar</code> (0x010000E4)</td>
-   <td><code>KEYCODE_CALENDAR</code> (208)</td>
-  </tr>
-  <tr>
-   <td><code>"LaunchContacts"</code></td>
-   <td>The <kbd>Contacts</kbd> key.</td>
-   <td></td>
-   <td></td>
-   <td></td>
-   <td><code>KEYCODE_CONTACTS</code> (207)</td>
-  </tr>
-  <tr>
-   <td><code>"LaunchMail"</code></td>
-   <td>The <kbd>Mail</kbd> key. This is often displayed with an icon.</td>
-   <td><code>VK_LAUNCH_MAIL</code> (0xB4)<br>
-    <code>APPCOMMAND_LAUNCH_MAIL</code></td>
-   <td></td>
-   <td><code>GDK_KEY_Mail</code> (0x1008FF19)<br>
-    <code>Qt::Key_LaunchMail</code> (0x010000A0)</td>
-   <td><code>KEYCODE_ENVELOPE</code> (65)</td>
-  </tr>
-  <tr>
-   <td><code>"LaunchMediaPlayer"</code> [1]</td>
-   <td>The <kbd>Media Player</kbd> key.</td>
-   <td><code>VK_LAUNCH_MEDIA_SELECT</code> (0xB5)<br>
-    <code>APPCOMMAND_LAUNCH_MEDIA_SELECT</code></td>
-   <td></td>
-   <td><code>GDK_KEY_CD</code> (0x1008FF53)<br>
-    <code>GDK_KEY_Video</code> (0x1008FF87)<br>
-    <code>GDK_KEY_AudioMedia</code> (0x1008FF32)<br>
-    <code>Qt::Key_LaunchMedia</code> (0x010000A1)</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"LaunchMusicPlayer"</code> [5]</td>
-   <td>The <kbd>Music Player</kbd> key, often labeled with an icon.</td>
-   <td></td>
-   <td></td>
-   <td><code>GDK_KEY_Music</code> (0x1008FF92)<br>
-    <code>Qt::Key_Music</code> (0x010000FD)</td>
-   <td><code>KEYCODE_MUSIC</code> (209)</td>
-  </tr>
-  <tr>
-   <td><code>"LaunchMyComputer"</code> [5]</td>
-   <td>The <kbd>My Computer</kbd> key on Windows keyboards. This is often used as a generic application launcher key (<code>APPCOMMAND_LAUNCH_APP1</code>).</td>
-   <td><code>APPCOMMAND_LAUNCH_APP1</code></td>
-   <td></td>
-   <td><code>GDK_KEY_MyComputer</code> (0x1008FF33)<br>
-    <code>GDK_KEY_Explorer</code> (0x1008FF5D)</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"LaunchPhone"</code></td>
-   <td>The <kbd>Phone</kbd> key, to open the phone dialer application if one is present.</td>
-   <td></td>
-   <td></td>
-   <td><code>GDK_KEY_Phone</code> (0x1008FF6E)<br>
-    <code>Qt::Key_Phone</code> (0x010000E3)</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"LaunchScreenSaver"</code> [5]</td>
-   <td>The <kbd>Screen Saver</kbd> key.</td>
-   <td></td>
-   <td></td>
-   <td><code>GDK_KEY_ScreenSaver</code> (0x1008FF2D)<br>
-    <code>Qt::Key_ScreenSaver</code> (0x010000BA)</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"LaunchSpreadsheet"</code> [4]</td>
-   <td>The <kbd>Spreadsheet</kbd> key. This key may be labeled with an icon.</td>
-   <td></td>
-   <td></td>
-   <td><code>GDK_KEY_Excel</code> (0x1008FF5C)<br>
-    <code>Qt::Key_Excel</code> (0x010000D4)</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"LaunchWebBrowser"</code> [4]</td>
-   <td>The <kbd>Web Browser</kbd> key. This key is frequently labeled with an icon.</td>
-   <td></td>
-   <td></td>
-   <td><code>GDK_KEY_WWW</code> (0x1008FF2E)<br>
-    <code>Qt::Key_WWW</code> (0x010000BB)</td>
-   <td><code>KEYCODE_EXPLORER</code> (64)</td>
-  </tr>
-  <tr>
-   <td><code>"LaunchWebCam"</code> [5]</td>
-   <td>The <kbd>WebCam</kbd> key. Opens the webcam application.</td>
-   <td></td>
-   <td></td>
-   <td><code>GDK_KEY_WebCam</code> (0x1008FF8F)<br>
-    <code>Qt::Key_WebCam</code> (0x010000FA)</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"LaunchWordProcessor"</code> [5]</td>
-   <td>The <kbd>Word Processor</kbd> key. This may be an icon of a specific word processor application, or a generic document icon.</td>
-   <td></td>
-   <td></td>
-   <td><code>GDK_KEY_Word</code> (0x1008FF89)<br>
-    <code>Qt::Key_Word</code> (0x010000F4)</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"LaunchApplication1"</code> [2]</td>
-   <td>The first generic application launcher button.</td>
-   <td><code>VK_LAUNCH_APP1</code> (0xB6)<br>
-    <code>APPCOMMAND_LAUNCH_APP1</code></td>
-   <td></td>
-   <td><code>GDK_KEY_Launch0</code> (0x1008FF40)<br>
-    <code>Qt::Key_Launch0</code> (0x010000A2)</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"LaunchApplication2"</code> [3]</td>
-   <td>The second generic application launcher button.</td>
-   <td><code>VK_LAUNCH_APP2</code> (0xB7)<br>
-    <code>APPCOMMAND_LAUNCH_APP2</code></td>
-   <td></td>
-   <td><code>GDK_KEY_Launch1</code> (0x1008FF41)<br>
-    <code>Qt::Key_Launch1</code> (0x010000A3)</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"LaunchApplication3"</code></td>
-   <td>The third generic application launcher button.</td>
-   <td></td>
-   <td></td>
-   <td><code>GDK_KEY_Launch2</code> (0x1008FF42)<br>
-    <code>Qt::Key_Launch2</code> (0x010000A4)</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"LaunchApplication4"</code></td>
-   <td>The fourth generic application launcher button.</td>
-   <td></td>
-   <td></td>
-   <td><code>GDK_KEY_Launch3</code> (0x1008FF43)<br>
-    <code>Qt::Key_Launch3</code> (0x010000A5)</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"LaunchApplication5"</code></td>
-   <td>The fifth generic application launcher button.</td>
-   <td></td>
-   <td></td>
-   <td><code>GDK_KEY_Launch4</code> (0x1008FF44)<br>
-    <code>Qt::Key_Launch4</code> (0x010000A6)</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"LaunchApplication6"</code></td>
-   <td>The sixth generic application launcher button.</td>
-   <td></td>
-   <td></td>
-   <td><code>GDK_KEY_Launch5</code> (0x1008FF45)<br>
-    <code>Qt::Key_Launch5</code> (0x010000A7)</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"LaunchApplication7"</code></td>
-   <td>The seventh generic application launcher button.</td>
-   <td></td>
-   <td></td>
-   <td><code>GDK_KEY_Launch6</code> (0x1008FF46)<br>
-    <code>Qt::Key_Launch6</code> (0x010000A8)</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"LaunchApplication8"</code></td>
-   <td>The eighth generic application launcher button.</td>
-   <td></td>
-   <td></td>
-   <td><code>GDK_KEY_Launch7</code> (0x1008FF47)<br>
-    <code>Qt::Key_Launch7</code> (0x010000A9)</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"LaunchApplication9"</code></td>
-   <td>The ninth generic application launcher button.</td>
-   <td></td>
-   <td></td>
-   <td><code>GDK_KEY_Launch8</code> (0x1008FF48)<br>
-    <code>Qt::Key_Launch8</code> (0x010000AA)</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"LaunchApplication10"</code></td>
-   <td>The 10th generic application launcher button.</td>
-   <td></td>
-   <td></td>
-   <td><code>GDK_KEY_Launch9</code> (0x1008FF49)<br>
-    <code>Qt::Key_Launch9</code> (0x010000AB)</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"LaunchApplication11"</code></td>
-   <td>The 11th generic application launcher button.</td>
-   <td></td>
-   <td></td>
-   <td><code>GDK_KEY_LaunchA</code> (0x1008FF4A)<br>
-    <code>Qt::Key_LaunchA</code> (0x010000AC)</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"LaunchApplication12"</code></td>
-   <td>The 12th generic application launcher button.</td>
-   <td></td>
-   <td></td>
-   <td><code>GDK_KEY_LaunchB</code> (0x1008FF4B)<br>
-    <code>Qt::Key_LaunchB</code> (0x010000AD)</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"LaunchApplication13"</code></td>
-   <td>The 13th generic application launcher button.</td>
-   <td></td>
-   <td></td>
-   <td><code>GDK_KEY_LaunchC</code> (0x1008FF4C)<br>
-    <code>Qt::Key_LaunchC</code> (0x010000AE)</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"LaunchApplication14"</code></td>
-   <td>The 14th generic application launcher button.</td>
-   <td></td>
-   <td></td>
-   <td><code>GDK_KEY_LaunchD</code> (0x1008FF4D)<br>
-    <code>Qt::Key_LaunchD</code> (0x010000AF)</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"LaunchApplication15"</code></td>
-   <td>The 15th generic application launcher button.</td>
-   <td></td>
-   <td></td>
-   <td><code>GDK_KEY_LaunchE</code> (0x1008FF4E)<br>
-    <code>Qt::Key_LaunchE</code> (0x010000B0)</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"LaunchApplication16"</code></td>
-   <td>The 16th generic application launcher button.</td>
-   <td></td>
-   <td></td>
-   <td><code>GDK_KEY_LaunchF</code> (0x1008FF4F)<br>
-    <code>Qt::Key_LaunchF</code> (0x010000B1)</td>
-   <td></td>
-  </tr>
- </thead>
+  <thead>
+    <tr>
+      <th rowspan="2" scope="col"><code>KeyboardEvent.key</code> Value</th>
+      <th rowspan="2" scope="col">Description</th>
+      <th colspan="4" scope="col">Virtual Keycode</th>
+    </tr>
+    <tr>
+      <th scope="col">Windows</th>
+      <th scope="col">Mac</th>
+      <th scope="col">Linux</th>
+      <th scope="col">Android</th>
+    </tr>
+    <tr>
+      <td><code>"LaunchCalculator"</code> [5]</td>
+      <td>
+        The <kbd>Calculator</kbd> key, often labeled with an icon. This is often
+        used as a generic application launcher key
+        (<code>APPCOMMAND_LAUNCH_APP2</code>).
+      </td>
+      <td><code>APPCOMMAND_LAUNCH_APP2</code></td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_Calculator</code> (0x1008FF1D)<br /><code
+          >Qt::Key_Calculator</code
+        >
+        (0x010000CB)
+      </td>
+      <td><code>KEYCODE_CALCULATOR</code> (210)</td>
+    </tr>
+    <tr>
+      <td><code>"LaunchCalendar"</code> [5]</td>
+      <td>The <kbd>Calendar</kbd> key, often labeled with an icon.</td>
+      <td></td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_Calendar</code> (0x1008FF20)<br /><code
+          >Qt::Key_Calendar</code
+        >
+        (0x010000E4)
+      </td>
+      <td><code>KEYCODE_CALENDAR</code> (208)</td>
+    </tr>
+    <tr>
+      <td><code>"LaunchContacts"</code></td>
+      <td>The <kbd>Contacts</kbd> key.</td>
+      <td></td>
+      <td></td>
+      <td></td>
+      <td><code>KEYCODE_CONTACTS</code> (207)</td>
+    </tr>
+    <tr>
+      <td><code>"LaunchMail"</code></td>
+      <td>The <kbd>Mail</kbd> key. This is often displayed with an icon.</td>
+      <td>
+        <code>VK_LAUNCH_MAIL</code> (0xB4)<br /><code
+          >APPCOMMAND_LAUNCH_MAIL</code
+        >
+      </td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_Mail</code> (0x1008FF19)<br /><code
+          >Qt::Key_LaunchMail</code
+        >
+        (0x010000A0)
+      </td>
+      <td><code>KEYCODE_ENVELOPE</code> (65)</td>
+    </tr>
+    <tr>
+      <td><code>"LaunchMediaPlayer"</code> [1]</td>
+      <td>The <kbd>Media Player</kbd> key.</td>
+      <td>
+        <code>VK_LAUNCH_MEDIA_SELECT</code> (0xB5)<br /><code
+          >APPCOMMAND_LAUNCH_MEDIA_SELECT</code
+        >
+      </td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_CD</code> (0x1008FF53)<br /><code>GDK_KEY_Video</code>
+        (0x1008FF87)<br /><code>GDK_KEY_AudioMedia</code>
+        (0x1008FF32)<br /><code>Qt::Key_LaunchMedia</code> (0x010000A1)
+      </td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"LaunchMusicPlayer"</code> [5]</td>
+      <td>The <kbd>Music Player</kbd> key, often labeled with an icon.</td>
+      <td></td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_Music</code> (0x1008FF92)<br /><code>Qt::Key_Music</code>
+        (0x010000FD)
+      </td>
+      <td><code>KEYCODE_MUSIC</code> (209)</td>
+    </tr>
+    <tr>
+      <td><code>"LaunchMyComputer"</code> [5]</td>
+      <td>
+        The <kbd>My Computer</kbd> key on Windows keyboards. This is often used
+        as a generic application launcher key
+        (<code>APPCOMMAND_LAUNCH_APP1</code>).
+      </td>
+      <td><code>APPCOMMAND_LAUNCH_APP1</code></td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_MyComputer</code> (0x1008FF33)<br /><code
+          >GDK_KEY_Explorer</code
+        >
+        (0x1008FF5D)
+      </td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"LaunchPhone"</code></td>
+      <td>
+        The <kbd>Phone</kbd> key, to open the phone dialer application if one is
+        present.
+      </td>
+      <td></td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_Phone</code> (0x1008FF6E)<br /><code>Qt::Key_Phone</code>
+        (0x010000E3)
+      </td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"LaunchScreenSaver"</code> [5]</td>
+      <td>The <kbd>Screen Saver</kbd> key.</td>
+      <td></td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_ScreenSaver</code> (0x1008FF2D)<br /><code
+          >Qt::Key_ScreenSaver</code
+        >
+        (0x010000BA)
+      </td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"LaunchSpreadsheet"</code> [4]</td>
+      <td>
+        The <kbd>Spreadsheet</kbd> key. This key may be labeled with an icon.
+      </td>
+      <td></td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_Excel</code> (0x1008FF5C)<br /><code>Qt::Key_Excel</code>
+        (0x010000D4)
+      </td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"LaunchWebBrowser"</code> [4]</td>
+      <td>
+        The <kbd>Web Browser</kbd> key. This key is frequently labeled with an
+        icon.
+      </td>
+      <td></td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_WWW</code> (0x1008FF2E)<br /><code>Qt::Key_WWW</code>
+        (0x010000BB)
+      </td>
+      <td><code>KEYCODE_EXPLORER</code> (64)</td>
+    </tr>
+    <tr>
+      <td><code>"LaunchWebCam"</code> [5]</td>
+      <td>The <kbd>WebCam</kbd> key. Opens the webcam application.</td>
+      <td></td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_WebCam</code> (0x1008FF8F)<br /><code
+          >Qt::Key_WebCam</code
+        >
+        (0x010000FA)
+      </td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"LaunchWordProcessor"</code> [5]</td>
+      <td>
+        The <kbd>Word Processor</kbd> key. This may be an icon of a specific
+        word processor application, or a generic document icon.
+      </td>
+      <td></td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_Word</code> (0x1008FF89)<br /><code>Qt::Key_Word</code>
+        (0x010000F4)
+      </td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"LaunchApplication1"</code> [2]</td>
+      <td>The first generic application launcher button.</td>
+      <td>
+        <code>VK_LAUNCH_APP1</code> (0xB6)<br /><code
+          >APPCOMMAND_LAUNCH_APP1</code
+        >
+      </td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_Launch0</code> (0x1008FF40)<br /><code
+          >Qt::Key_Launch0</code
+        >
+        (0x010000A2)
+      </td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"LaunchApplication2"</code> [3]</td>
+      <td>The second generic application launcher button.</td>
+      <td>
+        <code>VK_LAUNCH_APP2</code> (0xB7)<br /><code
+          >APPCOMMAND_LAUNCH_APP2</code
+        >
+      </td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_Launch1</code> (0x1008FF41)<br /><code
+          >Qt::Key_Launch1</code
+        >
+        (0x010000A3)
+      </td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"LaunchApplication3"</code></td>
+      <td>The third generic application launcher button.</td>
+      <td></td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_Launch2</code> (0x1008FF42)<br /><code
+          >Qt::Key_Launch2</code
+        >
+        (0x010000A4)
+      </td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"LaunchApplication4"</code></td>
+      <td>The fourth generic application launcher button.</td>
+      <td></td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_Launch3</code> (0x1008FF43)<br /><code
+          >Qt::Key_Launch3</code
+        >
+        (0x010000A5)
+      </td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"LaunchApplication5"</code></td>
+      <td>The fifth generic application launcher button.</td>
+      <td></td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_Launch4</code> (0x1008FF44)<br /><code
+          >Qt::Key_Launch4</code
+        >
+        (0x010000A6)
+      </td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"LaunchApplication6"</code></td>
+      <td>The sixth generic application launcher button.</td>
+      <td></td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_Launch5</code> (0x1008FF45)<br /><code
+          >Qt::Key_Launch5</code
+        >
+        (0x010000A7)
+      </td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"LaunchApplication7"</code></td>
+      <td>The seventh generic application launcher button.</td>
+      <td></td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_Launch6</code> (0x1008FF46)<br /><code
+          >Qt::Key_Launch6</code
+        >
+        (0x010000A8)
+      </td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"LaunchApplication8"</code></td>
+      <td>The eighth generic application launcher button.</td>
+      <td></td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_Launch7</code> (0x1008FF47)<br /><code
+          >Qt::Key_Launch7</code
+        >
+        (0x010000A9)
+      </td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"LaunchApplication9"</code></td>
+      <td>The ninth generic application launcher button.</td>
+      <td></td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_Launch8</code> (0x1008FF48)<br /><code
+          >Qt::Key_Launch8</code
+        >
+        (0x010000AA)
+      </td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"LaunchApplication10"</code></td>
+      <td>The 10th generic application launcher button.</td>
+      <td></td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_Launch9</code> (0x1008FF49)<br /><code
+          >Qt::Key_Launch9</code
+        >
+        (0x010000AB)
+      </td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"LaunchApplication11"</code></td>
+      <td>The 11th generic application launcher button.</td>
+      <td></td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_LaunchA</code> (0x1008FF4A)<br /><code
+          >Qt::Key_LaunchA</code
+        >
+        (0x010000AC)
+      </td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"LaunchApplication12"</code></td>
+      <td>The 12th generic application launcher button.</td>
+      <td></td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_LaunchB</code> (0x1008FF4B)<br /><code
+          >Qt::Key_LaunchB</code
+        >
+        (0x010000AD)
+      </td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"LaunchApplication13"</code></td>
+      <td>The 13th generic application launcher button.</td>
+      <td></td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_LaunchC</code> (0x1008FF4C)<br /><code
+          >Qt::Key_LaunchC</code
+        >
+        (0x010000AE)
+      </td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"LaunchApplication14"</code></td>
+      <td>The 14th generic application launcher button.</td>
+      <td></td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_LaunchD</code> (0x1008FF4D)<br /><code
+          >Qt::Key_LaunchD</code
+        >
+        (0x010000AF)
+      </td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"LaunchApplication15"</code></td>
+      <td>The 15th generic application launcher button.</td>
+      <td></td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_LaunchE</code> (0x1008FF4E)<br /><code
+          >Qt::Key_LaunchE</code
+        >
+        (0x010000B0)
+      </td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"LaunchApplication16"</code></td>
+      <td>The 16th generic application launcher button.</td>
+      <td></td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_LaunchF</code> (0x1008FF4F)<br /><code
+          >Qt::Key_LaunchF</code
+        >
+        (0x010000B1)
+      </td>
+      <td></td>
+    </tr>
+  </thead>
 </table>
 
-<p>[1] Internet Explorer, Edge, and Firefox (36 and earlier) use <code>"SelectMedia"</code> instead of <code>"LaunchMediaPlayer"</code>. Firefox 37 through Firefox 48 use <code>"MediaSelect"</code>. Firefox 49 has been updated to match the latest specification, and to return <code>"LaunchMediaPlayer"</code>.</p>
+\[1] Internet Explorer, Edge, and Firefox (36 and earlier) use `"SelectMedia"` instead of `"LaunchMediaPlayer"`. Firefox 37 through Firefox 48 use `"MediaSelect"`. Firefox 49 has been updated to match the latest specification, and to return `"LaunchMediaPlayer"`.
 
-<p>[2] Google Chrome 57 and earlier returned <code>"LaunchMyComputer"</code> instead of <code>"LaunchApplication1"</code>. See <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=612743">Chrome Bug 612743</a> for more information.</p>
+\[2] Google Chrome 57 and earlier returned `"LaunchMyComputer"` instead of `"LaunchApplication1"`. See [Chrome Bug 612743](https://bugs.chromium.org/p/chromium/issues/detail?id=612743) for more information.
 
-<p>[3] Google Chrome 57 and earlier returned <code>"LaunchCalculator"</code> instead of <code>"LaunchApplication2"</code>. See <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=612743">Chrome Bug 612743</a> for more information.</p>
+\[3] Google Chrome 57 and earlier returned `"LaunchCalculator"` instead of `"LaunchApplication2"`. See [Chrome Bug 612743](https://bugs.chromium.org/p/chromium/issues/detail?id=612743) for more information.
 
-<p>[4] Prior to Firefox 37, Firefox returned the key code <code>"LaunchApplication1"</code> instead of "<code>LaunchWebBrowser"</code> for the Web browser key.</p>
+\[4] Prior to Firefox 37, Firefox returned the key code `"LaunchApplication1"` instead of "`LaunchWebBrowser"` for the Web browser key.
 
-<p>[5] Firefox introduced support for this key in Firefox 37; prior to that, this key was reported as <code>"Unidentified"</code>.</p>
+\[5] Firefox introduced support for this key in Firefox 37; prior to that, this key was reported as `"Unidentified"`.
 
-<h2 id="Browser_control_keys">Browser control keys</h2>
+## Browser control keys
 
-<p>Some keyboards include special keys for controlling Web browsers. Those keys follow.</p>
+Some keyboards include special keys for controlling Web browsers. Those keys follow.
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th rowspan="2" scope="col"><code>KeyboardEvent.key</code> Value</th>
-   <th rowspan="2" scope="col">Description</th>
-   <th colspan="4" scope="col">Virtual Keycode</th>
-  </tr>
-  <tr>
-   <th scope="col">Windows</th>
-   <th scope="col">Mac</th>
-   <th scope="col">Linux</th>
-   <th scope="col">Android</th>
-  </tr>
-  <tr>
-   <td><code>"BrowserBack"</code></td>
-   <td>Navigates to the previous content or page in the current Web view's history.</td>
-   <td><code>VK_BROWSER_BACK</code> (0xA6)<br>
-    <code>APPCOMMAND_BROWSER_BACKWARD</code></td>
-   <td></td>
-   <td><code>GDK_KEY_Back</code> (0x1008FF26)<br>
-    <code>Qt::Key_Back</code> (0x01000061)</td>
-   <td><code>KEYCODE_BACK</code> (4)</td>
-  </tr>
-  <tr>
-   <td><code>"BrowserFavorites"</code> [1]</td>
-   <td>Opens the user's list of bookmarks/favorites.</td>
-   <td><code>VK_BROWSER_FAVORITES</code> (0xAB)<br>
-    <code>APPCOMMAND_BROWSER_FAVORITES</code></td>
-   <td></td>
-   <td><code>GDK_KEY_Favorites</code> (0x1008FF30)<br>
-    <code>GDK_KEY_MySites</code> (0x1008FF67)<br>
-    <code>Qt::Favorites</code> (0x01000091)</td>
-   <td><code>KEYCODE_BOOKMARK</code> (174)</td>
-  </tr>
-  <tr>
-   <td><code>"BrowserForward"</code></td>
-   <td>Navigates to the next content or page in the current Web view's history.</td>
-   <td><code>VK_BROWSER_FORWARD</code> (0xA7)<br>
-    <code>APPCOMMAND_BROWSER_FORWARD</code></td>
-   <td></td>
-   <td><code>GDK_KEY_Forward</code> (0x1008FF27)<br>
-    <code>Qt::Key_Forward</code> (0x01000062)</td>
-   <td><code>KEYCODE_FORWARD</code> (125)</td>
-  </tr>
-  <tr>
-   <td><code>"BrowserHome"</code></td>
-   <td>Navigates to the user's preferred home page.</td>
-   <td><code>VK_BROWSER_HOME</code> (0xAC)<br>
-    <code>APPCOMMAND_BROWSER_HOME</code></td>
-   <td></td>
-   <td><code>GDK_KEY_HomePage</code> (0x1008FF18)<br>
-    <code>Qt::Key_HomePage</code> (0x01000090)</td>
-   <td><code>KEYCODE_HOME</code> (3)</td>
-  </tr>
-  <tr>
-   <td><code>"BrowserRefresh"</code></td>
-   <td>Refreshes the current page or contentl.</td>
-   <td><code>VK_BROWSER_REFRESH</code> (0xA8)<br>
-    <code>APPCOMMAND_BROWSER_REFRESH</code></td>
-   <td></td>
-   <td><code>GDK_KEY_Refresh</code> (0x1008FF29)<br>
-    <code>GDK_KEY_Reload</code> (0x1008FF73)</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"BrowserSearch"</code></td>
-   <td>Activates the user's preferred search engine or the search interface within their browser.</td>
-   <td><code>VK_BROWSER_SEARCH</code> (0xAA)<br>
-    <code>APPCOMMAND_BROWSER_SEARCH</code></td>
-   <td></td>
-   <td><code>GDK_KEY_Search</code> (0x1008FF1B)<br>
-    <code>Qt::Key_Search</code> (0x01000092)</td>
-   <td><code>KEYCODE_SEARCH</code> (84)</td>
-  </tr>
-  <tr>
-   <td><code>"BrowserStop"</code></td>
-   <td>Stops loading the currently displayed Web view or content.</td>
-   <td><code>VK_BROWSER_STOP</code> (0xA9)<br>
-    <code>APPCOMMAND_BROWSER_STOP</code></td>
-   <td></td>
-   <td><code>GDK_KEY_Stop</code> (0x1008FF28)<br>
-    <code>Qt::Key_Search</code> (0x01000063)</td>
-   <td></td>
-  </tr>
- </thead>
+  <thead>
+    <tr>
+      <th rowspan="2" scope="col"><code>KeyboardEvent.key</code> Value</th>
+      <th rowspan="2" scope="col">Description</th>
+      <th colspan="4" scope="col">Virtual Keycode</th>
+    </tr>
+    <tr>
+      <th scope="col">Windows</th>
+      <th scope="col">Mac</th>
+      <th scope="col">Linux</th>
+      <th scope="col">Android</th>
+    </tr>
+    <tr>
+      <td><code>"BrowserBack"</code></td>
+      <td>
+        Navigates to the previous content or page in the current Web view's
+        history.
+      </td>
+      <td>
+        <code>VK_BROWSER_BACK</code> (0xA6)<br /><code
+          >APPCOMMAND_BROWSER_BACKWARD</code
+        >
+      </td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_Back</code> (0x1008FF26)<br /><code>Qt::Key_Back</code>
+        (0x01000061)
+      </td>
+      <td><code>KEYCODE_BACK</code> (4)</td>
+    </tr>
+    <tr>
+      <td><code>"BrowserFavorites"</code> [1]</td>
+      <td>Opens the user's list of bookmarks/favorites.</td>
+      <td>
+        <code>VK_BROWSER_FAVORITES</code> (0xAB)<br /><code
+          >APPCOMMAND_BROWSER_FAVORITES</code
+        >
+      </td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_Favorites</code> (0x1008FF30)<br /><code
+          >GDK_KEY_MySites</code
+        >
+        (0x1008FF67)<br /><code>Qt::Favorites</code> (0x01000091)
+      </td>
+      <td><code>KEYCODE_BOOKMARK</code> (174)</td>
+    </tr>
+    <tr>
+      <td><code>"BrowserForward"</code></td>
+      <td>
+        Navigates to the next content or page in the current Web view's history.
+      </td>
+      <td>
+        <code>VK_BROWSER_FORWARD</code> (0xA7)<br /><code
+          >APPCOMMAND_BROWSER_FORWARD</code
+        >
+      </td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_Forward</code> (0x1008FF27)<br /><code
+          >Qt::Key_Forward</code
+        >
+        (0x01000062)
+      </td>
+      <td><code>KEYCODE_FORWARD</code> (125)</td>
+    </tr>
+    <tr>
+      <td><code>"BrowserHome"</code></td>
+      <td>Navigates to the user's preferred home page.</td>
+      <td>
+        <code>VK_BROWSER_HOME</code> (0xAC)<br /><code
+          >APPCOMMAND_BROWSER_HOME</code
+        >
+      </td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_HomePage</code> (0x1008FF18)<br /><code
+          >Qt::Key_HomePage</code
+        >
+        (0x01000090)
+      </td>
+      <td><code>KEYCODE_HOME</code> (3)</td>
+    </tr>
+    <tr>
+      <td><code>"BrowserRefresh"</code></td>
+      <td>Refreshes the current page or contentl.</td>
+      <td>
+        <code>VK_BROWSER_REFRESH</code> (0xA8)<br /><code
+          >APPCOMMAND_BROWSER_REFRESH</code
+        >
+      </td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_Refresh</code> (0x1008FF29)<br /><code
+          >GDK_KEY_Reload</code
+        >
+        (0x1008FF73)
+      </td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"BrowserSearch"</code></td>
+      <td>
+        Activates the user's preferred search engine or the search interface
+        within their browser.
+      </td>
+      <td>
+        <code>VK_BROWSER_SEARCH</code> (0xAA)<br /><code
+          >APPCOMMAND_BROWSER_SEARCH</code
+        >
+      </td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_Search</code> (0x1008FF1B)<br /><code
+          >Qt::Key_Search</code
+        >
+        (0x01000092)
+      </td>
+      <td><code>KEYCODE_SEARCH</code> (84)</td>
+    </tr>
+    <tr>
+      <td><code>"BrowserStop"</code></td>
+      <td>Stops loading the currently displayed Web view or content.</td>
+      <td>
+        <code>VK_BROWSER_STOP</code> (0xA9)<br /><code
+          >APPCOMMAND_BROWSER_STOP</code
+        >
+      </td>
+      <td></td>
+      <td>
+        <code>GDK_KEY_Stop</code> (0x1008FF28)<br /><code>Qt::Key_Search</code>
+        (0x01000063)
+      </td>
+      <td></td>
+    </tr>
+  </thead>
 </table>
 
-<p>[1] Prior to Firefox 37, this key's value was reported as <code>"Unidentified"</code>.</p>
+\[1] Prior to Firefox 37, this key's value was reported as `"Unidentified"`.
 
-<h2 id="Numeric_keypad_keys">Numeric keypad keys</h2>
+## Numeric keypad keys
 
-<p>These keys are found on the keyboard's numeric keypad. However, not all are present on every keyboard. Although typical numeric keypads have numeric keys from <kbd>0</kbd> to <kbd>9</kbd> (encoded as <code>"0"</code> through <code>"9"</code>), some multimedia keyboards include additional number keys for higher numbers.</p>
+These keys are found on the keyboard's numeric keypad. However, not all are present on every keyboard. Although typical numeric keypads have numeric keys from <kbd>0</kbd> to <kbd>9</kbd> (encoded as `"0"` through `"9"`), some multimedia keyboards include additional number keys for higher numbers.
 
-<div class="note">
-<p><strong>Note :</strong>The <kbd>10</kbd> key, if present, generates events with the <code>key</code> value of <code>"0"</code>.</p>
-</div>
+> **Note :**The <kbd>10</kbd> key, if present, generates events with the `key` value of `"0"`.
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th rowspan="2" scope="col"><code>KeyboardEvent.key</code> Value</th>
-   <th rowspan="2" scope="col">Description</th>
-   <th colspan="4" scope="col">Virtual Keycode</th>
-  </tr>
-  <tr>
-   <th scope="col">Windows</th>
-   <th scope="col">Mac</th>
-   <th scope="col">Linux</th>
-   <th scope="col">Android</th>
-  </tr>
-  <tr>
-   <td><code>"Decimal"</code> [1] {{obsolete_inline}}</td>
-   <td>The decimal point key (typically <kbd>.</kbd> or <kbd>,</kbd> depending on the region. In newer browsers, this value to simply be the character generated by the decimal key (one of those two characters). [1]</td>
-   <td><code>VK_DECIMAL</code> (0x6E)</td>
-   <td><code>kVK_ANSI_KeypadDecimal</code> (0x41)</td>
-   <td><code>GDK_KEY_KP_Decimal</code> (0xFFAE)<br>
-     </td>
-   <td><code>KEYCODE_NUMPAD_DOT</code> (158)</td>
-  </tr>
-  <tr>
-   <td><code>"Key11"</code></td>
-   <td>The <kbd>11</kbd> key found on certain media numeric keypads.</td>
-   <td></td>
-   <td></td>
-   <td></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"Key12"</code></td>
-   <td>The <kbd>12</kbd> key found on certain media numeric keypads.</td>
-   <td></td>
-   <td></td>
-   <td></td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><code>"Multiply"</code> [1] {{obsolete_inline}}</td>
-   <td>The numeric keypad's multiplication key, <kbd>*</kbd>.</td>
-   <td><code>VK_MULTIPLY</code> (0x6A)</td>
-   <td><code>kVK_ANSI_KeypadMultiply</code> (0x43)</td>
-   <td><code>GDK_KEY_KP_Multiply</code> (0xFFAA)<br>
-    <code>Qt::Key_Multiply</code> (0x0D7)</td>
-   <td><code>KEYCODE_NUMPAD_MULTIPLY</code> (155)</td>
-  </tr>
-  <tr>
-   <td><code>"Add"</code> [1] {{obsolete_inline}}</td>
-   <td>The numeric keypad's addition key, <kbd>+</kbd>.</td>
-   <td><code>VK_ADD</code> (0x6B)</td>
-   <td><code>kVK_ANSI_KeypadPlus</code> (0x45)</td>
-   <td><code>GDK_KEY_KP_Add</code> (0xFFAB)</td>
-   <td><code>KEYCODE_NUMPAD_ADD</code> (157)</td>
-  </tr>
-  <tr>
-   <td><code>"Clear"</code></td>
-   <td>The numeric keypad's <kbd>Clear</kbd> key.</td>
-   <td></td>
-   <td><code>kVK_ANSI_KeypadClear</code> (0x47)</td>
-   <td><code>GDK_KEY_Clear</code> (0xFF0B)<br>
-    <code>Qt::Key_Clear</code> (0x0100000B)</td>
-   <td><code>KEYCODE_CLEAR</code> (28)</td>
-  </tr>
-  <tr>
-   <td><code>"Divide"</code> [1] {{obsolete_inline}}</td>
-   <td>The numeric keypad's division key, /.</td>
-   <td><code>VK_DIVIDE</code> (0x6F)</td>
-   <td><code>kVK_ANSI_KeypadDivide</code> (0x4B)</td>
-   <td><code>GDK_KEY_KP_Divide</code> (0xFFAF)<br>
-    <code>Qt::Key_Slash</code> (0x2F)</td>
-   <td><code>KEYCODE_NUMPAD_DIVIDE</code> (154)</td>
-  </tr>
-  <tr>
-   <td><code>"Subtract"</code> [1] {{obsolete_inline}}</td>
-   <td>The numeric keypad's subtraction key, -.</td>
-   <td><code>VK_SUBTRACT</code> (0x6D)</td>
-   <td><code>kVK_ANSI_KeypadMinus</code> (0x4E)</td>
-   <td><code>GDK_KEY_KP_Subtract</code> (0xFFAD)</td>
-   <td><code>KEYCODE_NUMPAD_SUBTRACT</code> (156)</td>
-  </tr>
-  <tr>
-   <td><code>"Separator"</code> [1]</td>
-   <td>The numeric keypad's places separator character (in the United States, this is a comma, but elsewhere it is frequently a period).</td>
-   <td><code>VK_SEPARATOR</code> (0x6C)</td>
-   <td><code>kVK_JIS_KeypadComma</code> (0x5F)</td>
-   <td><code>GDK_KEY_KP_Separator</code> (0xFFAC)<br>
-     </td>
-   <td><code>KEYCODE_NUMPAD_COMMA</code> (159)</td>
-  </tr>
-  <tr>
-   <td>"0" through "9"</td>
-   <td>The actual digit keys on the numeric keypad.</td>
-   <td><code>VK_NUMPAD0</code> (0x60) - <code>VK_NUMPAD9</code> (0x69)</td>
-   <td><code>kVK_Keypad0</code> (0x52) - <code>kVK_Keypad9</code> (0x5C)</td>
-   <td><code>GDK_KEY_KP_0</code> (0xFFB0) - <code>GDK_KEY_KP_9</code> (0xFFB9)</td>
-   <td><code>KEYCODE_NUMPAD_0</code> (144) - <code>KEYCODE_NUMPAD_9</code> (153)</td>
-  </tr>
- </thead>
+  <thead>
+    <tr>
+      <th rowspan="2" scope="col"><code>KeyboardEvent.key</code> Value</th>
+      <th rowspan="2" scope="col">Description</th>
+      <th colspan="4" scope="col">Virtual Keycode</th>
+    </tr>
+    <tr>
+      <th scope="col">Windows</th>
+      <th scope="col">Mac</th>
+      <th scope="col">Linux</th>
+      <th scope="col">Android</th>
+    </tr>
+    <tr>
+      <td><code>"Decimal"</code> [1] {{obsolete_inline}}</td>
+      <td>
+        The decimal point key (typically <kbd>.</kbd> or <kbd>,</kbd> depending
+        on the region. In newer browsers, this value to simply be the character
+        generated by the decimal key (one of those two characters). [1]
+      </td>
+      <td><code>VK_DECIMAL</code> (0x6E)</td>
+      <td><code>kVK_ANSI_KeypadDecimal</code> (0x41)</td>
+      <td><code>GDK_KEY_KP_Decimal</code> (0xFFAE)<br /> </td>
+      <td><code>KEYCODE_NUMPAD_DOT</code> (158)</td>
+    </tr>
+    <tr>
+      <td><code>"Key11"</code></td>
+      <td>The <kbd>11</kbd> key found on certain media numeric keypads.</td>
+      <td></td>
+      <td></td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"Key12"</code></td>
+      <td>The <kbd>12</kbd> key found on certain media numeric keypads.</td>
+      <td></td>
+      <td></td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><code>"Multiply"</code> [1] {{obsolete_inline}}</td>
+      <td>The numeric keypad's multiplication key, <kbd>*</kbd>.</td>
+      <td><code>VK_MULTIPLY</code> (0x6A)</td>
+      <td><code>kVK_ANSI_KeypadMultiply</code> (0x43)</td>
+      <td>
+        <code>GDK_KEY_KP_Multiply</code> (0xFFAA)<br /><code
+          >Qt::Key_Multiply</code
+        >
+        (0x0D7)
+      </td>
+      <td><code>KEYCODE_NUMPAD_MULTIPLY</code> (155)</td>
+    </tr>
+    <tr>
+      <td><code>"Add"</code> [1] {{obsolete_inline}}</td>
+      <td>The numeric keypad's addition key, <kbd>+</kbd>.</td>
+      <td><code>VK_ADD</code> (0x6B)</td>
+      <td><code>kVK_ANSI_KeypadPlus</code> (0x45)</td>
+      <td><code>GDK_KEY_KP_Add</code> (0xFFAB)</td>
+      <td><code>KEYCODE_NUMPAD_ADD</code> (157)</td>
+    </tr>
+    <tr>
+      <td><code>"Clear"</code></td>
+      <td>The numeric keypad's <kbd>Clear</kbd> key.</td>
+      <td></td>
+      <td><code>kVK_ANSI_KeypadClear</code> (0x47)</td>
+      <td>
+        <code>GDK_KEY_Clear</code> (0xFF0B)<br /><code>Qt::Key_Clear</code>
+        (0x0100000B)
+      </td>
+      <td><code>KEYCODE_CLEAR</code> (28)</td>
+    </tr>
+    <tr>
+      <td><code>"Divide"</code> [1] {{obsolete_inline}}</td>
+      <td>The numeric keypad's division key, /.</td>
+      <td><code>VK_DIVIDE</code> (0x6F)</td>
+      <td><code>kVK_ANSI_KeypadDivide</code> (0x4B)</td>
+      <td>
+        <code>GDK_KEY_KP_Divide</code> (0xFFAF)<br /><code>Qt::Key_Slash</code>
+        (0x2F)
+      </td>
+      <td><code>KEYCODE_NUMPAD_DIVIDE</code> (154)</td>
+    </tr>
+    <tr>
+      <td><code>"Subtract"</code> [1] {{obsolete_inline}}</td>
+      <td>The numeric keypad's subtraction key, -.</td>
+      <td><code>VK_SUBTRACT</code> (0x6D)</td>
+      <td><code>kVK_ANSI_KeypadMinus</code> (0x4E)</td>
+      <td><code>GDK_KEY_KP_Subtract</code> (0xFFAD)</td>
+      <td><code>KEYCODE_NUMPAD_SUBTRACT</code> (156)</td>
+    </tr>
+    <tr>
+      <td><code>"Separator"</code> [1]</td>
+      <td>
+        The numeric keypad's places separator character (in the United States,
+        this is a comma, but elsewhere it is frequently a period).
+      </td>
+      <td><code>VK_SEPARATOR</code> (0x6C)</td>
+      <td><code>kVK_JIS_KeypadComma</code> (0x5F)</td>
+      <td><code>GDK_KEY_KP_Separator</code> (0xFFAC)<br /> </td>
+      <td><code>KEYCODE_NUMPAD_COMMA</code> (159)</td>
+    </tr>
+    <tr>
+      <td>"0" through "9"</td>
+      <td>The actual digit keys on the numeric keypad.</td>
+      <td><code>VK_NUMPAD0</code> (0x60) - <code>VK_NUMPAD9</code> (0x69)</td>
+      <td><code>kVK_Keypad0</code> (0x52) - <code>kVK_Keypad9</code> (0x5C)</td>
+      <td>
+        <code>GDK_KEY_KP_0</code> (0xFFB0) - <code>GDK_KEY_KP_9</code> (0xFFB9)
+      </td>
+      <td>
+        <code>KEYCODE_NUMPAD_0</code> (144) -
+        <code>KEYCODE_NUMPAD_9</code> (153)
+      </td>
+    </tr>
+  </thead>
 </table>
 
-<p>[1] While older browsers used words like <code>"Add"</code>, <code>"Decimal"</code>, <code>"Multiply"</code>, and so forth modern browsers identify these using the actual character (<code>"+"</code>, <code>"."</code>, <code>"*"</code>, and so forth).</p>
+\[1] While older browsers used words like `"Add"`, `"Decimal"`, `"Multiply"`, and so forth modern browsers identify these using the actual character (`"+"`, `"."`, `"*"`, and so forth).
diff --git a/files/fr/web/api/keyboardevent/keyboardevent/index.md b/files/fr/web/api/keyboardevent/keyboardevent/index.md
index f488108a15..a083a3e792 100644
--- a/files/fr/web/api/keyboardevent/keyboardevent/index.md
+++ b/files/fr/web/api/keyboardevent/keyboardevent/index.md
@@ -9,74 +9,48 @@ tags:
   - évènements
 translation_of: Web/API/KeyboardEvent/KeyboardEvent
 ---
-<p>{{APIRef("DOM Events")}}</p>
+{{APIRef("DOM Events")}}
 
-<p>Le constructeur <strong><code>KeyboardEvent()</code></strong> crée un nouveau {{domxref("KeyboardEvent")}}.</p>
+Le constructeur **`KeyboardEvent()`** crée un nouveau {{domxref("KeyboardEvent")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"> event = new KeyboardEvent(typeArg, KeyboardEventInit);</pre>
+     event = new KeyboardEvent(typeArg, KeyboardEventInit);
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<dl>
- <dt>typeArg</dt>
- <dd>Une représentation du nom de l'évènement sous forme de {{domxref("DOMString")}}.</dd>
- <dt>KeyboardEventInit{{optional_inline}}</dt>
- <dd><p>Un dictionnaire <code>KeyboardEventInit</code> ayant les champs suivants :</p>
- <ul>
-  <li><code>"key"</code>, optionnel et par défaut <code>""</code>, de type {{domxref("DOMString")}}, qui définit la valeur de {{domxref("KeyboardEvent.key")}}.</li>
-  <li><code>"code"</code>, optionnel et par défaut <code>""</code>, de type {{domxref("DOMString")}}, qui définit la valeur de {{domxref("KeyboardEvent.code")}}.</li>
-  <li><code>"location"</code>, optionnel et par défaut <code>0</code>, de type <code>unsigned long</code>, qui définit la valeur de {{domxref("KeyboardEvent.location")}}.</li>
-  <li><code>"ctrlKey"</code>, optionnel et par défaut <code>false</code>, de type {{jsxref("Boolean")}}, qui définit la valeur de {{domxref("KeyboardEvent.ctrlKey")}}.</li>
-  <li><code>"shiftKey"</code>, optionnel et par défaut <code>false</code>, de type {{jsxref("Boolean")}}, qui définit la valeur de {{domxref("KeyboardEvent.shiftKey")}}.</li>
-  <li><code>"altKey"</code>, optionnel et par défaut <code>false</code>, de type {{jsxref("Boolean")}}, qui définit la valeur de {{domxref("KeyboardEvent.altKey")}}.</li>
-  <li><code>"metaKey"</code>, optionnel et par défaut <code>false</code>, de type {{jsxref("Boolean")}}, qui définit la valeur de {{domxref("KeyboardEvent.metaKey")}}.</li>
-  <li><code>"repeat"</code>, optionnel et par défaut <code>false</code>, de type {{jsxref("Boolean")}}, qui définit la valeur de {{domxref("KeyboardEvent.repeat")}}.</li>
-  <li><code>"isComposing"</code>, optionnel et par défaut <code>false</code>, de type {{jsxref("Boolean")}}, qui définit la valeur de {{domxref("KeyboardEvent.isComposing")}}.</li>
-  <li><code>"charCode"</code>, optionnel et par défaut <code>0</code>, de type <code>unsigned long</code>, qui définit la valeur du déprécié {{domxref("KeyboardEvent.charCode")}}.</li>
-  <li><code>"keyCode"</code>, optionnel et par défaut <code>0</code>, de type <code>unsigned long</code>, qui définit la valeur du déprécié {{domxref("KeyboardEvent.keyCode")}}.</li>
-  <li><code>"which"</code>, optionnel et par défaut <code>0</code>, de type <code>unsigned long</code>, qui définit la valeur du déprécié {{domxref("KeyboardEvent.which")}}.</li>
- </ul>
- </dd>
-</dl>
+- typeArg
+  - : Une représentation du nom de l'évènement sous forme de {{domxref("DOMString")}}.
+- KeyboardEventInit{{optional_inline}}
 
-<div class="note">
-  <p><strong>Note :</strong> Le dictionnaire <code>KeyboardEventInit</code> accepte aussi les champs des dictionnaires  {{domxref("UIEvent.UIEvent", "UIEventInit")}} et {{domxref("Event.Event", "EventInit")}}.</p>
-</div>
+  - : Un dictionnaire `KeyboardEventInit` ayant les champs suivants :
 
-<h2 id="Specifications">Spécifications</h2>
+    - `"key"`, optionnel et par défaut `""`, de type {{domxref("DOMString")}}, qui définit la valeur de {{domxref("KeyboardEvent.key")}}.
+    - `"code"`, optionnel et par défaut `""`, de type {{domxref("DOMString")}}, qui définit la valeur de {{domxref("KeyboardEvent.code")}}.
+    - `"location"`, optionnel et par défaut `0`, de type `unsigned long`, qui définit la valeur de {{domxref("KeyboardEvent.location")}}.
+    - `"ctrlKey"`, optionnel et par défaut `false`, de type {{jsxref("Boolean")}}, qui définit la valeur de {{domxref("KeyboardEvent.ctrlKey")}}.
+    - `"shiftKey"`, optionnel et par défaut `false`, de type {{jsxref("Boolean")}}, qui définit la valeur de {{domxref("KeyboardEvent.shiftKey")}}.
+    - `"altKey"`, optionnel et par défaut `false`, de type {{jsxref("Boolean")}}, qui définit la valeur de {{domxref("KeyboardEvent.altKey")}}.
+    - `"metaKey"`, optionnel et par défaut `false`, de type {{jsxref("Boolean")}}, qui définit la valeur de {{domxref("KeyboardEvent.metaKey")}}.
+    - `"repeat"`, optionnel et par défaut `false`, de type {{jsxref("Boolean")}}, qui définit la valeur de {{domxref("KeyboardEvent.repeat")}}.
+    - `"isComposing"`, optionnel et par défaut `false`, de type {{jsxref("Boolean")}}, qui définit la valeur de {{domxref("KeyboardEvent.isComposing")}}.
+    - `"charCode"`, optionnel et par défaut `0`, de type `unsigned long`, qui définit la valeur du déprécié {{domxref("KeyboardEvent.charCode")}}.
+    - `"keyCode"`, optionnel et par défaut `0`, de type `unsigned long`, qui définit la valeur du déprécié {{domxref("KeyboardEvent.keyCode")}}.
+    - `"which"`, optionnel et par défaut `0`, de type `unsigned long`, qui définit la valeur du déprécié {{domxref("KeyboardEvent.which")}}.
 
-<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('UI Events','#interface-keyboardevent','KeyboardEvent()')}}</td>
-   <td>{{Spec2('UI Events')}}</td>
-   <td>Définition actuelle.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM3 Events','#interface-KeyboardEvent','KeyboardEvent()')}}</td>
-   <td>{{Spec2('DOM3 Events')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+> **Note :** Le dictionnaire `KeyboardEventInit` accepte aussi les champs des dictionnaires {{domxref("UIEvent.UIEvent", "UIEventInit")}} et {{domxref("Event.Event", "EventInit")}}.
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Spécifications
 
+| Spécification                                                                                    | Statut                           | Commentaire          |
+| ------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName('UI Events','#interface-keyboardevent','KeyboardEvent()')}}     | {{Spec2('UI Events')}}     | Définition actuelle. |
+| {{SpecName('DOM3 Events','#interface-KeyboardEvent','KeyboardEvent()')}} | {{Spec2('DOM3 Events')}} | Définition initiale. |
 
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.KeyboardEvent.KeyboardEvent")}}</p>
+{{Compat("api.KeyboardEvent.KeyboardEvent")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("KeyboardEvent")}}, l'interface des objets qu'il construit.</li>
-</ul>
+- {{domxref("KeyboardEvent")}}, l'interface des objets qu'il construit.
diff --git a/files/fr/web/api/localfilesystem/index.md b/files/fr/web/api/localfilesystem/index.md
index 9f4ca0c7c3..cf37e817f7 100644
--- a/files/fr/web/api/localfilesystem/index.md
+++ b/files/fr/web/api/localfilesystem/index.md
@@ -3,47 +3,47 @@ title: LocalFileSystem
 slug: Web/API/LocalFileSystem
 translation_of: Web/API/LocalFileSystem
 ---
-<div>{{APIRef("File System API")}}{{non-standard_header()}}</div>
+{{APIRef("File System API")}}{{non-standard_header()}}
 
-<p>L'interface <code>LocalFileSystem</code>, appartenant à l'API <a href="/fr/docs/Web/API/File_and_Directory_Entries_API/Introduction">File System</a> fournit un accès à un système de fichier placé dans un bac à sable (<em>sandboxed file system</em>). Les méthodes de cette interface sont implémentées par les objets implémentants <code><a href="/fr/docs/Web/API/Window">Window</a></code> ou <code><a href="/fr/docs/Web/API/Worker">Worker</a></code>.</p>
+L'interface `LocalFileSystem`, appartenant à l'API [File System](/fr/docs/Web/API/File_and_Directory_Entries_API/Introduction) fournit un accès à un système de fichier placé dans un bac à sable (_sandboxed file system_). Les méthodes de cette interface sont implémentées par les objets implémentants [`Window`](/fr/docs/Web/API/Window) ou [`Worker`](/fr/docs/Web/API/Worker).
 
-<h2 id="Concepts_de_base">Concepts de base</h2>
+## Concepts de base
 
-<h3 id="Créer_un_nouvel_espace_de_stockage">Créer un nouvel espace de stockage</h3>
+### Créer un nouvel espace de stockage
 
-<p>Il est possible de demander l'accès à un système de fichier dans un bac à sable en utilisant la méthode <code>window.requestFileSystem()</code>. Lorsque la création de cet espace est effectuée, une fonction de rappel (<em>callback</em>) est appelée avec un objet <code><a href="/fr/docs/Web/API/FileSystem">FileSystem</a></code> contenant deux propriétés : le nom et la racine du système de fichier ainsi créé.</p>
+Il est possible de demander l'accès à un système de fichier dans un bac à sable en utilisant la méthode `window.requestFileSystem()`. Lorsque la création de cet espace est effectuée, une fonction de rappel (_callback_) est appelée avec un objet [`FileSystem`](/fr/docs/Web/API/FileSystem) contenant deux propriétés : le nom et la racine du système de fichier ainsi créé.
 
-<p>Il est possible d'appeler cette méthode plusieurs fois pour différentes situations : on peut créer un espace de stockage temporaire et/ou un espace de stockage permanent (voir <a href="/fr/docs/Web/API/File_and_Directory_Entries_API/Introduction">l'article sur les concepts de base</a> pour approfondir). On peut ainsi créer un espace de stockage temporaire pour mettre en cache certains fichiers (des images par exemple) afin d'améliorer les performances ou créer un espace de stockage pour des données applicatives (ex. des brouillons de messages créés par l'utilisateur) qui ne devraient pas être supprimées avant d'être répliquées sur les serveurs distants.</p>
+Il est possible d'appeler cette méthode plusieurs fois pour différentes situations : on peut créer un espace de stockage temporaire et/ou un espace de stockage permanent (voir [l'article sur les concepts de base](/fr/docs/Web/API/File_and_Directory_Entries_API/Introduction) pour approfondir). On peut ainsi créer un espace de stockage temporaire pour mettre en cache certains fichiers (des images par exemple) afin d'améliorer les performances ou créer un espace de stockage pour des données applicatives (ex. des brouillons de messages créés par l'utilisateur) qui ne devraient pas être supprimées avant d'être répliquées sur les serveurs distants.
 
-<h3 id="Utiliser_un_stockage_persistent">Utiliser un stockage persistent</h3>
+### Utiliser un stockage persistent
 
-<p>La méthode <code>requestFileSystem()</code> permet d'indiquer si on souhaite un stockage persistent ou temporaire. Un espace de stockage persistent est conservé dans le navigateur tant que l'utilisateur ou que l'application ne l'a pas supprimé. Pour créer un espace de stockage permanent, l'utilisateur doit fournir la permission à l'application de l'utiliser. En revanche, un espace de stockage temporaire peut être créé sans permission mais peut être libéré par le navigateur à tout moment.</p>
+La méthode `requestFileSystem()` permet d'indiquer si on souhaite un stockage persistent ou temporaire. Un espace de stockage persistent est conservé dans le navigateur tant que l'utilisateur ou que l'application ne l'a pas supprimé. Pour créer un espace de stockage permanent, l'utilisateur doit fournir la permission à l'application de l'utiliser. En revanche, un espace de stockage temporaire peut être créé sans permission mais peut être libéré par le navigateur à tout moment.
 
-<p>Pour utiliser un stockage permanent, Chrome expose la méthode <code>requestQuota</code>. Il faut invoquer cette méthode ainsi :</p>
+Pour utiliser un stockage permanent, Chrome expose la méthode `requestQuota`. Il faut invoquer cette méthode ainsi :
 
-<pre class="notranslate">var requestedBytes = 1024*1024*10; // 10MB
+    var requestedBytes = 1024*1024*10; // 10MB
 
-navigator.webkitPersistentStorage.requestQuota (
-    requestedBytes, function(grantedBytes) {
-        window.requestFileSystem(PERSISTENT, grantedBytes, onInitFs, errorHandler);
+    navigator.webkitPersistentStorage.requestQuota (
+        requestedBytes, function(grantedBytes) {
+            window.requestFileSystem(PERSISTENT, grantedBytes, onInitFs, errorHandler);
 
-    }, function(e) { console.log('Error', e); }
-);
-</pre>
+        }, function(e) { console.log('Error', e); }
+    );
 
-<p>L'utilisateur doit fournir la permission à l'application pour enregistrer des données locales avant que l'application puisse utiliser le stockage permanent. Une fois que l'utilisateur a autorisé l'accès, il n'est plus nécessaire d'appeler <code>requestQuota()</code> (des appels ultérieurs n'auront aucun effet).</p>
+L'utilisateur doit fournir la permission à l'application pour enregistrer des données locales avant que l'application puisse utiliser le stockage permanent. Une fois que l'utilisateur a autorisé l'accès, il n'est plus nécessaire d'appeler `requestQuota()` (des appels ultérieurs n'auront aucun effet).
 
-<p>Une autre API, <em>Quota Management</em>, permet de connaître le quota alloué et l'espace consommé pour l'origine courante. On peut ainsi utiliser la méthode <code>window.webkitPersistentStorage.queryUsageAndQuota()</code>. Pour en savoir plus, voir cette <a href="http://stackoverflow.com/a/29662985/89484">réponse StackOverflow</a>.</p>
+Une autre API, _Quota Management_, permet de connaître le quota alloué et l'espace consommé pour l'origine courante. On peut ainsi utiliser la méthode `window.webkitPersistentStorage.queryUsageAndQuota()`. Pour en savoir plus, voir cette [réponse StackOverflow](http://stackoverflow.com/a/29662985/89484).
 
-<h3 id="Origine_unique">Origine unique</h3>
+### Origine unique
 
-<p>Le système de fichier est accessible depuis une seule origine. Cela signifie que votre application ne peut pas lire ou écrire des fichiers dans les systèmes de fichier éventuellement créés par d'autres applications. Par ailleurs, votre application ne peut pas accéder aux fichiers d'un répertoire arbitraire (ex. Mes Images, Mes Documents) sur le disque de l'utilisateur. Pour plus d'informations, voir <a href="/fr/docs/Web/API/File_and_Directory_Entries_API/Introduction">l'article d'introduction aux concepts de base</a>.</p>
+Le système de fichier est accessible depuis une seule origine. Cela signifie que votre application ne peut pas lire ou écrire des fichiers dans les systèmes de fichier éventuellement créés par d'autres applications. Par ailleurs, votre application ne peut pas accéder aux fichiers d'un répertoire arbitraire (ex. Mes Images, Mes Documents) sur le disque de l'utilisateur. Pour plus d'informations, voir [l'article d'introduction aux concepts de base](/fr/docs/Web/API/File_and_Directory_Entries_API/Introduction).
 
-<h3 id="Exemple">Exemple</h3>
+### Exemple
 
-<p>Voici un fragment de code qui illustre comment demander l'accès à un stockage sur le système de fichier.</p>
+Voici un fragment de code qui illustre comment demander l'accès à un stockage sur le système de fichier.
 
-<pre class="brush: js">// Gestion des préfixes spécifiques au navigateur
+```js
+// Gestion des préfixes spécifiques au navigateur
 window.requestFileSystem  = window.requestFileSystem || window.webkitRequestFileSystem;
 
 // Le premier paramètre indique le type de stockage
@@ -52,145 +52,95 @@ window.requestFileSystem  = window.requestFileSystem || window.webkitRequestFile
 // errorHandler est la fonction à invoquer en cas d'erreur ou de refus d'accès
 
 window.requestFileSystem(window.PERSISTENT, 1024*1024,onInitFs,errorHandler);
-</pre>
-
-<h2 id="Constantes">Constantes</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Constante</th>
-   <th scope="col">Valeur</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>TEMPORARY</code></td>
-   <td><code>0</code></td>
-   <td>Un espace de stockage temporaire qui peut être supprimé par le navigateur lorsque celui-ci l'estime nécessaire.</td>
-  </tr>
-  <tr>
-   <td><code>PERSISTENT</code></td>
-   <td><code>1</code></td>
-   <td>Un espace de stockage qui reste permanent dans le navigateur tant que l'utilisateur ou que l'application ne l'a pas supprimé. L'utilisateur doit fournir une permission avant qu'une application puisse utiliser ce type de stockage.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<h3 id="requestFileSystem"><code>requestFileSystem()</code></h3>
-
-<p>Cette méthode permet de demander l'accès à uyn système de fichier pour stocker des données. On peut ainsi accéder à un système de fichier placé dans un bac à sable en demandant un objet <code>LocalFileSystem</code> avec la méthode globale <code>window.requestFileSystem()</code>.</p>
-
-<pre class="notranslate">void requestFileSystem(
-  in unsigned short type,
-  in unsigned long long size,
-  in FileSystemCallback successCallback,
-  in ErrorCallback errorCallback
-);</pre>
-
-<h4 id="Paramètres">Paramètres</h4>
-
-<dl>
- <dt><code>type</code></dt>
- <dd>Le type de stockage sur le système de fichier. La valeur de cet argument peut être <code>TEMPORARY</code> ou <code>PERSISTENT</code>.</dd>
- <dt><code>size</code></dt>
- <dd>L'espace de stockage, exprimé en octets, nécessaire à l'application.</dd>
- <dt><code>successCallback</code></dt>
- <dd>Une fonction de rappel à invoquer lorsque le navigateur fournit bien l'accès au système de fichier. Cette fonction reçoit en argument un objet <code><a href="/fr/docs/Web/API/FileSystem">FileSystem</a></code> avec deux propriétés :
- <ul>
-  <li><code>name</code> - le nom unique, assigné par le navigateur au système de fichiers.</li>
-  <li><code>root</code> - un objet <code>DirectoryEntry</code> en lecture seule qui représente la racine du système de fichier.</li>
- </ul>
- </dd>
- <dt><code>errorCallback</code></dt>
- <dd>Une fonction de rappel à invoquer en cas d'erreur ou lorsque l'accès n'est pas autorisé. Cette fonction reçoit un objet <code>FileError</code> comme argument.</dd>
-</dl>
-
-<h4 id="Valeur_de_retour">Valeur de retour</h4>
-
-<p><code>void</code></p>
-
-<h4 id="Exceptions">Exceptions</h4>
-
-<p>Cette méthode peut lever une exception <code><a href="/en-US/docs/Web/API/FileError">FileError</a></code> avec le code suivant :</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Exception</th>
-   <th scope="col">Description</th>
-  </tr>
-  <tr>
-   <td><code>SECURITY_ERROR</code></td>
-   <td>L'application n'est pas autorisée à accéder à l'interface <em>File System</em>. Par exemple, il est interdit d'utiliser <code>file://</code>. Pour plus de détails, consulter <a href="/fr/docs/Web/API/File_and_Directory_Entries_API/Introduction#restrictions">l'article d'introduction aux concepts de base</a>.</td>
-  </tr>
- </thead>
-</table>
-
-<h3 id="resolveLocalFileSystemURL"><code>resolveLocalFileSystemURL()</code></h3>
-
-<p>Cette méthode permet de consulter une entrée pour un fichier ou un répertoire avec une URL locale.</p>
-
-<pre class="notranslate">void resolveLocalFileSystemURL(
-  in DOMString url,
-  in EntryCallback successCallback,
-  in optional ErrorCallback errorCallback
-);
-</pre>
-
-<h4 id="Paramètres_2">Paramètres</h4>
-
-<dl>
- <dt><code>url</code></dt>
- <dd>L'URL du fichier local ou du répertoire sur le système de fichier.</dd>
- <dt><code>successCallback</code></dt>
- <dd>Une fonction de rappel à invoquer lorsque le navigateur fournit le fichier ou le répertoire de l'URL indiquée.</dd>
- <dt><code>errorCallback</code></dt>
- <dd>Une fonction de rappel à invoquer en cas d'erreur ou lorsque l'accès est refusé.</dd>
-</dl>
-
-<h4 id="Valeur_de_retour_2">Valeur de retour</h4>
-
-<p>void</p>
-
-<h4 id="Exceptions_2">Exceptions</h4>
-
-<p>Cette méthode peut lever une exception <code><a href="/fr/docs/Web/API/FileError">FileError</a></code> avec l'un des code suivants :</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Exception</th>
-   <th scope="col">Description</th>
-  </tr>
-  <tr>
-   <td><code>ENCODING_ERR</code></td>
-   <td>La syntaxe de l'URL est invalide.</td>
-  </tr>
-  <tr>
-   <td><code>NOT_FOUND_ERR</code></td>
-   <td>La structure de l'URL est correcte mais elle réfère à une ressource qui n'existe pas.</td>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>SECURITY_ERR</code></td>
-   <td>L'application n'est pas autorisée à accéder à l'interface pour le système de fichier.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.LocalFileSystem")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>La spécification : {{spec("http://dev.w3.org/2009/dap/file-system/pub/FileSystem/", "File API: Directories and System Specification", "WD")}}</li>
- <li><a href="/fr/docs/Web/API/File_and_Directory_Entries_API/Introduction">La référence pour l'API <em>File System</em></a></li>
- <li><a href="/fr/docs/Web/API/File_and_Directory_Entries_API/Introduction">Une introduction aux concepts de base de l'API <em>File System</em></a></li>
-</ul>
+```
+
+## Constantes
+
+| Constante    | Valeur | Description                                                                                                                                                                                                                           |
+| ------------ | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `TEMPORARY`  | `0`    | Un espace de stockage temporaire qui peut être supprimé par le navigateur lorsque celui-ci l'estime nécessaire.                                                                                                                       |
+| `PERSISTENT` | `1`    | Un espace de stockage qui reste permanent dans le navigateur tant que l'utilisateur ou que l'application ne l'a pas supprimé. L'utilisateur doit fournir une permission avant qu'une application puisse utiliser ce type de stockage. |
+
+## Méthodes
+
+### `requestFileSystem()`
+
+Cette méthode permet de demander l'accès à uyn système de fichier pour stocker des données. On peut ainsi accéder à un système de fichier placé dans un bac à sable en demandant un objet `LocalFileSystem` avec la méthode globale `window.requestFileSystem()`.
+
+    void requestFileSystem(
+      in unsigned short type,
+      in unsigned long long size,
+      in FileSystemCallback successCallback,
+      in ErrorCallback errorCallback
+    );
+
+#### Paramètres
+
+- `type`
+  - : Le type de stockage sur le système de fichier. La valeur de cet argument peut être `TEMPORARY` ou `PERSISTENT`.
+- `size`
+  - : L'espace de stockage, exprimé en octets, nécessaire à l'application.
+- `successCallback`
+
+  - : Une fonction de rappel à invoquer lorsque le navigateur fournit bien l'accès au système de fichier. Cette fonction reçoit en argument un objet [`FileSystem`](/fr/docs/Web/API/FileSystem) avec deux propriétés :
+
+    - `name` - le nom unique, assigné par le navigateur au système de fichiers.
+    - `root` - un objet `DirectoryEntry` en lecture seule qui représente la racine du système de fichier.
+
+- `errorCallback`
+  - : Une fonction de rappel à invoquer en cas d'erreur ou lorsque l'accès n'est pas autorisé. Cette fonction reçoit un objet `FileError` comme argument.
+
+#### Valeur de retour
+
+`void`
+
+#### Exceptions
+
+Cette méthode peut lever une exception [`FileError`](/en-US/docs/Web/API/FileError) avec le code suivant :
+
+| Exception        | Description                                                                                                                                                                                                                                                                             |
+| ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `SECURITY_ERROR` | L'application n'est pas autorisée à accéder à l'interface _File System_. Par exemple, il est interdit d'utiliser `file://`. Pour plus de détails, consulter [l'article d'introduction aux concepts de base](/fr/docs/Web/API/File_and_Directory_Entries_API/Introduction#restrictions). |
+
+### `resolveLocalFileSystemURL()`
+
+Cette méthode permet de consulter une entrée pour un fichier ou un répertoire avec une URL locale.
+
+    void resolveLocalFileSystemURL(
+      in DOMString url,
+      in EntryCallback successCallback,
+      in optional ErrorCallback errorCallback
+    );
+
+#### Paramètres
+
+- `url`
+  - : L'URL du fichier local ou du répertoire sur le système de fichier.
+- `successCallback`
+  - : Une fonction de rappel à invoquer lorsque le navigateur fournit le fichier ou le répertoire de l'URL indiquée.
+- `errorCallback`
+  - : Une fonction de rappel à invoquer en cas d'erreur ou lorsque l'accès est refusé.
+
+#### Valeur de retour
+
+void
+
+#### Exceptions
+
+Cette méthode peut lever une exception [`FileError`](/fr/docs/Web/API/FileError) avec l'un des code suivants :
+
+| Exception       | Description                                                                           |
+| --------------- | ------------------------------------------------------------------------------------- |
+| `ENCODING_ERR`  | La syntaxe de l'URL est invalide.                                                     |
+| `NOT_FOUND_ERR` | La structure de l'URL est correcte mais elle réfère à une ressource qui n'existe pas. |
+| `SECURITY_ERR`  | L'application n'est pas autorisée à accéder à l'interface pour le système de fichier. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.LocalFileSystem")}}
+
+## Voir aussi
+
+- La spécification : {{spec("http://dev.w3.org/2009/dap/file-system/pub/FileSystem/", "File API: Directories and System Specification", "WD")}}
+- [La référence pour l'API _File System_](/fr/docs/Web/API/File_and_Directory_Entries_API/Introduction)
+- [Une introduction aux concepts de base de l'API _File System_](/fr/docs/Web/API/File_and_Directory_Entries_API/Introduction)
diff --git a/files/fr/web/api/location/assign/index.md b/files/fr/web/api/location/assign/index.md
index 3e0476b3be..e12848af11 100644
--- a/files/fr/web/api/location/assign/index.md
+++ b/files/fr/web/api/location/assign/index.md
@@ -10,62 +10,42 @@ tags:
   - WebAPI
 translation_of: Web/API/Location/assign
 ---
-<p>{{ APIRef("Location") }}</p>
+{{ APIRef("Location") }}
 
-<p>La méthode <code><strong>Location.assign()</strong></code> charge et affiche dans la fenêtre le document situé à l'URL spécifiée.</p>
+La méthode **`Location.assign()`** charge et affiche dans la fenêtre le document situé à l'URL spécifiée.
 
-<p>Si l'action est impossible à cause d'une violation de sécurité, une {{domxref("DOMException")}} de type <code>SECURITY_ERROR</code> est lancée. Cela se produit si l'origine du script appelant est différente de l'origine de la page initialement désignée par l'objet {{domxref("Location")}}, principalement quand le script est hébergé sur un autre domaine.</p>
+Si l'action est impossible à cause d'une violation de sécurité, une {{domxref("DOMException")}} de type `SECURITY_ERROR` est lancée. Cela se produit si l'origine du script appelant est différente de l'origine de la page initialement désignée par l'objet {{domxref("Location")}}, principalement quand le script est hébergé sur un autre domaine.
 
-<p>Si l'URL spécifiée n'est pas valide, une {{domxref("DOMException")}} de type <code>SYNTAX_ERROR</code> est lancée.</p>
+Si l'URL spécifiée n'est pas valide, une {{domxref("DOMException")}} de type `SYNTAX_ERROR` est lancée.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>object</em>.assign(<em>url</em>);
-</pre>
+    object.assign(url);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><em>url</em></dt>
- <dd>Une {{domxref("DOMString")}} contenant l'URL de la page vers laquelle naviguer.</dd>
-</dl>
+- _url_
+  - : Une {{domxref("DOMString")}} contenant l'URL de la page vers laquelle naviguer.
 
-<h2 id="Examples">Examples</h2>
+## Examples
 
-<pre class="brush: js">// Navigue vers l'article Location.reload
-document.location.assign('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');</pre>
+```js
+// Navigue vers l'article Location.reload
+document.location.assign('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "history.html#dom-location-assign", "Location.assign()")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Pas de différence avec {{SpecName("HTML5 W3C")}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', "browsers.html#dom-location-assign", "Location.assign()")}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                    | Statut                           | Commentaires                                             |
+| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------------------------------------------- |
+| {{SpecName('HTML WHATWG', "history.html#dom-location-assign", "Location.assign()")}} | {{Spec2('HTML WHATWG')}} | Pas de différence avec {{SpecName("HTML5 W3C")}}. |
+| {{SpecName('HTML5 W3C', "browsers.html#dom-location-assign", "Location.assign()")}} | {{Spec2('HTML5 W3C')}}     | Définition initiale.                                     |
 
-<h2 id="Compatibilité">Compatibilité</h2>
+## Compatibilité
 
+{{Compat("api.Location.assign")}}
 
+## Voir aussi
 
-<p>{{Compat("api.Location.assign")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>L'interface {{domxref("Location")}} à laquelle appartient cette méthode.</li>
- <li>Méthodes similaires : {{domxref("Location.replace()")}} et {{domxref("Location.reload()")}}.</li>
-</ul>
+- L'interface {{domxref("Location")}} à laquelle appartient cette méthode.
+- Méthodes similaires : {{domxref("Location.replace()")}} et {{domxref("Location.reload()")}}.
diff --git a/files/fr/web/api/location/index.md b/files/fr/web/api/location/index.md
index dc4e6e6a36..3766646973 100644
--- a/files/fr/web/api/location/index.md
+++ b/files/fr/web/api/location/index.md
@@ -10,19 +10,22 @@ tags:
   - Reference
 translation_of: Web/API/Location
 ---
-<div>{{APIRef("HTML DOM")}}</div>
+{{APIRef("HTML DOM")}}
 
-<p>L'interface <strong><code>Location</code></strong> représente l'emplacement de l'objet auquel elle est liée. Les changements effectués dessus sont reflétés sur l'objet lié. Les deux interfaces {{domxref("Document")}} et {{domxref("Window")}} sont liées à une <code>Location</code>, accessible via {{domxref("Document.location")}} et {{domxref("Window.location")}} respectivement.</p>
+L'interface **`Location`** représente l'emplacement de l'objet auquel elle est liée. Les changements effectués dessus sont reflétés sur l'objet lié. Les deux interfaces {{domxref("Document")}} et {{domxref("Window")}} sont liées à une `Location`, accessible via {{domxref("Document.location")}} et {{domxref("Window.location")}} respectivement.
 
-<h2 id="Anatomie_dune_Location">Anatomie d'une Location</h2>
+## Anatomie d'une Location
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;span id="href" title="href"&gt;&lt;span id="protocol" title="protocol"&gt;http:&lt;/span&gt;//&lt;span id="host" title="host"&gt;&lt;span id="hostname" title="hostname"&gt;example.org&lt;/span&gt;:&lt;span id="port" title="port"&gt;8888&lt;/span&gt;&lt;/span&gt;&lt;span id="pathname" title="pathname"&gt;/foo/bar&lt;/span&gt;&lt;span id="search" title="search"&gt;?q=baz&lt;/span&gt;&lt;span id="hash" title="hash"&gt;#bang&lt;/span&gt;&lt;/span&gt;</pre>
+```html
+<span id="href" title="href"><span id="protocol" title="protocol">http:</span>//<span id="host" title="host"><span id="hostname" title="hostname">example.org</span>:<span id="port" title="port">8888</span></span><span id="pathname" title="pathname">/foo/bar</span><span id="search" title="search">?q=baz</span><span id="hash" title="hash">#bang</span></span>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">html, body {height:100%;}
+```css
+html, body {height:100%;}
 html {display:table; width:100%;}
 body {display:table-cell; text-align:center; vertical-align:middle; font-family:georgia; font-size:230%; line-height:1em; white-space:nowrap;}
 
@@ -36,11 +39,13 @@ body {display:table-cell; text-align:center; vertical-align:middle; font-family:
 [title] [title] [title]:before {margin-top:3em;}
 
 [title]:hover,
-:target {position:relative; z-index:1; outline:50em solid rgba(255,255,255,.8);}</pre>
+:target {position:relative; z-index:1; outline:50em solid rgba(255,255,255,.8);}
+```
 
-<h3 id="JavaScript">JavaScript</h3>
+### JavaScript
 
-<pre class="brush: js">[].forEach.call(document.querySelectorAll('[title][id]'), function (node) {
+```js
+[].forEach.call(document.querySelectorAll('[title][id]'), function (node) {
   node.addEventListener("click", function(e) {
     e.preventDefault();
     e.stopPropagation();
@@ -53,59 +58,57 @@ body {display:table-cell; text-align:center; vertical-align:middle; font-family:
     e.stopPropagation();
     window.location.hash = '';
   });
-});</pre>
-
-<h3 id="Result">Result</h3>
-
-<p>{{EmbedLiveSample('Anatomy_Of_Location')}}</p>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<p><em>L'interface <code>Location</code> n'hérite d'aucune propriété, mais implémente celles de {{domxref("URLUtils")}}.</em></p>
-
-<dl>
- <dt>{{domxref("Location.href")}}</dt>
- <dd>Une {{domxref("DOMString")}} contenant l'URL entière.</dd>
- <dt>{{domxref("Location.protocol")}}</dt>
- <dd>Une {{domxref("DOMString")}} contenant le schéma de protocole de l'URL, incluant le <code>':'</code> final.</dd>
- <dt>{{domxref("Location.host")}}</dt>
- <dd>Une {{domxref("DOMString")}} contenant l'hôte, c'est-à-dire le <em>domaine</em>, un <code>':'</code>, et le <em>numéro de port</em> de l'URL.</dd>
- <dt>{{domxref("Location.hostname")}}</dt>
- <dd>Une {{domxref("DOMString")}} contenant le domaine de l'URL.</dd>
- <dt>{{domxref("Location.port")}}</dt>
- <dd>Une {{domxref("DOMString")}} contenant le numéro de port de l'URL.</dd>
- <dt>{{domxref("Location.pathname")}}</dt>
- <dd>Une {{domxref("DOMString")}} contenant un <code>'/'</code> initial suivi du chemin de l'URL.</dd>
- <dt>{{domxref("Location.search")}}</dt>
- <dd>Une {{domxref("DOMString")}} contenant un <code>'?'</code> suivi des paramètres de l'URL. Les navigateurs moderne fournissent <a href="/en-US/docs/Web/API/URLSearchParams/get#Example">URLSearchParams</a> et <a href="/en-US/docs/Web/API/URL/searchParams#Example">URL.searchParams</a> pour faciliter l'analyse des paramètres de la chaîne de requête (querystring).</dd>
- <dt>{{domxref("Location.hash")}}</dt>
- <dd>Une {{domxref("DOMString")}} contenant un <code>'#'</code> suivi de <em>l'identifiant de fragment</em> de l'URL.</dd>
- <dt>{{domxref("Location.username")}} {{Obsolete_Inline}}</dt>
- <dd>Une {{domxref("DOMString")}} contenant le nom d'utilisateur spécifié avant le nom de domaine.</dd>
- <dt>{{domxref("Location.password")}} {{Obsolete_Inline}}</dt>
- <dd>Une {{domxref("DOMString")}} contenant le mot de passe spécifié avant le nom de domaine.</dd>
- <dt>{{domxref("Location.origin")}} {{readOnlyInline}}</dt>
- <dd>Retourne une {{domxref("DOMString")}} contenant la forme canonique de l'origine de la location.</dd>
-</dl>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<p><em>L'interface <code>Location</code> n'hérite d'aucune méthode, mais implémente celles de {{domxref("URLUtils")}}.</em></p>
-
-<dl>
- <dt>{{domxref("Location.assign()")}}</dt>
- <dd>Charge la ressource située à l'URL passée en paramètre.</dd>
- <dt>{{domxref("Location.reload()")}}</dt>
- <dd>Recharge la ressource depuis l'URL actuelle. Son unique paramètre facultatif est un <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Boolean">Boolean</a>, qui, s'il est <code>true</code>, implique que la page est toujours rechargée depuis le serveur. Si ce paramètre est <code>false</code> ou non spécifié, le navigateur peut éventuellement recharger la page depuis son cache.</dd>
- <dt>{{domxref("Location.replace()")}}</dt>
- <dd>Remplace la ressource actuelle par celle à l'URL passée en paramètre. la différence avec la méthode <code>assign()</code> est que, après avoir utilisé <code>replace()</code>, la page actuelle ne sera pas enregistrée dans l'historique de session {{domxref("History")}}, ce qui signifie que l'utilisateur ne pourra pas utiliser le bouton <em>précédent</em> pour y revenir.</dd>
- <dt>{{domxref("Location.toString()")}}</dt>
- <dd>Retourne une {{domxref("DOMString")}} contenant l'URL entière. C'est un synonyme de {{domxref("URLUtils.href")}}, sauf que <code>toString()</code> ne peut être utilisée pour modifier la valeur.</dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">// Crée un élèment ancre et utilise la propriété href dans le but de cet exemple
+});
+```
+
+### Result
+
+{{EmbedLiveSample('Anatomy_Of_Location')}}
+
+## Propriétés
+
+_L'interface `Location` n'hérite d'aucune propriété, mais implémente celles de {{domxref("URLUtils")}}._
+
+- {{domxref("Location.href")}}
+  - : Une {{domxref("DOMString")}} contenant l'URL entière.
+- {{domxref("Location.protocol")}}
+  - : Une {{domxref("DOMString")}} contenant le schéma de protocole de l'URL, incluant le `':'` final.
+- {{domxref("Location.host")}}
+  - : Une {{domxref("DOMString")}} contenant l'hôte, c'est-à-dire le _domaine_, un `':'`, et le _numéro de port_ de l'URL.
+- {{domxref("Location.hostname")}}
+  - : Une {{domxref("DOMString")}} contenant le domaine de l'URL.
+- {{domxref("Location.port")}}
+  - : Une {{domxref("DOMString")}} contenant le numéro de port de l'URL.
+- {{domxref("Location.pathname")}}
+  - : Une {{domxref("DOMString")}} contenant un `'/'` initial suivi du chemin de l'URL.
+- {{domxref("Location.search")}}
+  - : Une {{domxref("DOMString")}} contenant un `'?'` suivi des paramètres de l'URL. Les navigateurs moderne fournissent [URLSearchParams](/en-US/docs/Web/API/URLSearchParams/get#Example) et [URL.searchParams](/en-US/docs/Web/API/URL/searchParams#Example) pour faciliter l'analyse des paramètres de la chaîne de requête (querystring).
+- {{domxref("Location.hash")}}
+  - : Une {{domxref("DOMString")}} contenant un `'#'` suivi de _l'identifiant de fragment_ de l'URL.
+- {{domxref("Location.username")}} {{Obsolete_Inline}}
+  - : Une {{domxref("DOMString")}} contenant le nom d'utilisateur spécifié avant le nom de domaine.
+- {{domxref("Location.password")}} {{Obsolete_Inline}}
+  - : Une {{domxref("DOMString")}} contenant le mot de passe spécifié avant le nom de domaine.
+- {{domxref("Location.origin")}} {{readOnlyInline}}
+  - : Retourne une {{domxref("DOMString")}} contenant la forme canonique de l'origine de la location.
+
+## Méthodes
+
+_L'interface `Location` n'hérite d'aucune méthode, mais implémente celles de {{domxref("URLUtils")}}._
+
+- {{domxref("Location.assign()")}}
+  - : Charge la ressource située à l'URL passée en paramètre.
+- {{domxref("Location.reload()")}}
+  - : Recharge la ressource depuis l'URL actuelle. Son unique paramètre facultatif est un [Boolean](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Boolean), qui, s'il est `true`, implique que la page est toujours rechargée depuis le serveur. Si ce paramètre est `false` ou non spécifié, le navigateur peut éventuellement recharger la page depuis son cache.
+- {{domxref("Location.replace()")}}
+  - : Remplace la ressource actuelle par celle à l'URL passée en paramètre. la différence avec la méthode `assign()` est que, après avoir utilisé `replace()`, la page actuelle ne sera pas enregistrée dans l'historique de session {{domxref("History")}}, ce qui signifie que l'utilisateur ne pourra pas utiliser le bouton _précédent_ pour y revenir.
+- {{domxref("Location.toString()")}}
+  - : Retourne une {{domxref("DOMString")}} contenant l'URL entière. C'est un synonyme de {{domxref("URLUtils.href")}}, sauf que `toString()` ne peut être utilisée pour modifier la valeur.
+
+## Exemples
+
+```js
+// Crée un élèment ancre et utilise la propriété href dans le but de cet exemple
 // Une alternative plus correcte est de naviguer vers l'URL et d'utiliser document.location ou window.location
 var url = document.createElement('a');
 url.href = 'https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-container';
@@ -117,39 +120,21 @@ console.log(url.port);      // 8080
 console.log(url.pathname);  // /en-US/search
 console.log(url.search);    // ?q=URL
 console.log(url.hash);      // #search-results-close-container
-console.log(url.origin);    // https://developer.mozilla.org:8080</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "history.html#the-location-interface", "Location")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Pas de différence avec {{SpecName("HTML5 W3C")}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', "browsers.html#the-location-interface", "Location")}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité">Compatibilité</h2>
-
-
-
-<p>{{Compat("api.Location")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Deux méthodes qui créent un objet <code>location</code> : {{domxref("Window.location")}} et {{domxref("Document.location")}}.</li>
- <li>Interfaces liées aux URL: {{domxref("URL")}}, {{domxref("URLSearchParams")}} et {{domxref("HTMLHyperlinkElementUtils")}}.</li>
-</ul>
+console.log(url.origin);    // https://developer.mozilla.org:8080
+```
+
+## Spécifications
+
+| Spécification                                                                                            | Statut                           | Commentaires                                             |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------------------------------------------- |
+| {{SpecName('HTML WHATWG', "history.html#the-location-interface", "Location")}} | {{Spec2('HTML WHATWG')}} | Pas de différence avec {{SpecName("HTML5 W3C")}}. |
+| {{SpecName('HTML5 W3C', "browsers.html#the-location-interface", "Location")}} | {{Spec2('HTML5 W3C')}}     | Définition initiale.                                     |
+
+## Compatibilité
+
+{{Compat("api.Location")}}
+
+## Voir aussi
+
+- Deux méthodes qui créent un objet `location` : {{domxref("Window.location")}} et {{domxref("Document.location")}}.
+- Interfaces liées aux URL: {{domxref("URL")}}, {{domxref("URLSearchParams")}} et {{domxref("HTMLHyperlinkElementUtils")}}.
diff --git a/files/fr/web/api/location/reload/index.md b/files/fr/web/api/location/reload/index.md
index 76d94b1efd..2b38ab6b28 100644
--- a/files/fr/web/api/location/reload/index.md
+++ b/files/fr/web/api/location/reload/index.md
@@ -4,39 +4,37 @@ slug: Web/API/Location/reload
 translation_of: Web/API/Location/reload
 browser-compat: api.Location.reload
 ---
-<div>{{ APIRef("HTML DOM") }}</div>
+{{ APIRef("HTML DOM") }}
 
-<p>La méthode <code><strong>Location.reload()</strong></code> recharge la ressource depuis l'URL actuelle.</p>
+La méthode **`Location.reload()`** recharge la ressource depuis l'URL actuelle.
 
-<p>Le rechargement peut être bloqué avec une exception <a href="/fr/docs/Web/API/DOMException"><code>DOMException</code></a>  <code>SECURITY_ERROR</code>. Cela se produit si <a href="/fr/docs/Glossary/Origin">l'origine</a> du script qui invoque <code>location.reload()</code> est différente de l'origine de la page qui possède l'objet <a href="/fr/docs/Web/API/Location"><code>Location</code></a>. Voir <a href="/fr/docs/Web/Security/Same-origin_policy">les règles sur l'origine</a> pour plus d'informations.</p>
+Le rechargement peut être bloqué avec une exception [`DOMException`](/fr/docs/Web/API/DOMException) `SECURITY_ERROR`. Cela se produit si [l'origine](/fr/docs/Glossary/Origin) du script qui invoque `location.reload()` est différente de l'origine de la page qui possède l'objet [`Location`](/fr/docs/Web/API/Location). Voir [les règles sur l'origine](/fr/docs/Web/Security/Same-origin_policy) pour plus d'informations.
 
-<h2 id="syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">
+```js
 location.reload();
-</pre>
+```
 
-<h2 id="location.reload_n_a_pas_de_paramètre">location.reload() n'a pas de paramètre</h2>
+## location.reload() n'a pas de paramètre
 
-<p>Firefox prend en charge un paramètre booléen non-standard <a href="https://searchfox.org/mozilla-central/source/dom/base/Location.cpp#551"><code>forceGet</code></a> pour la méthode <code>location.reload()</code>, qui permet à Firefox de passer outre le cache et d'effectuer un rafraîchissement forcé du document. Toutefois, pour tous les autres navigateurs, tout argument utilisé en appelant <code>location.reload()</code> sera ignoré et n'aura aucun effet.</p>
+Firefox prend en charge un paramètre booléen non-standard [`forceGet`](https://searchfox.org/mozilla-central/source/dom/base/Location.cpp#551) pour la méthode `location.reload()`, qui permet à Firefox de passer outre le cache et d'effectuer un rafraîchissement forcé du document. Toutefois, pour tous les autres navigateurs, tout argument utilisé en appelant `location.reload()` sera ignoré et n'aura aucun effet.
 
-<p>Il est toutefois possible que vous rencontriez des occurrences de <code>location.reload(true)</code> dans du code existant basé sur l'hypothèse que ce rafraîchissement forcé aurait lieu dans tous les navigateurs. Une recherche GitHub "<code>location.reload(true)</code>" renvoie <a href="https://github.com/search?q=%22location.reload%28true%29%22&type=code">plusieurs centaines de milliers de résultats</a>.</p>
+Il est toutefois possible que vous rencontriez des occurrences de `location.reload(true)` dans du code existant basé sur l'hypothèse que ce rafraîchissement forcé aurait lieu dans tous les navigateurs. Une recherche GitHub "`location.reload(true)`" renvoie [plusieurs centaines de milliers de résultats](https://github.com/search?q=%22location.reload%28true%29%22&type=code).
 
-<p>Historiquement, une version de Netscape Navigator a introduit la prise en charge de cet argument et cela s'est retrouvé dans Firefox. À un moment, le groupe de travail du W3C sur les API Web <a href="https://www.w3.org/2005/06/tracker/webapi/issues/69">a ouvert le sujet</a> pour étudier son ajout à la spécification pour <code>location.reload()</code>. Toutefois, il n'a jamais été ajouté formellement.</p>
+Historiquement, une version de Netscape Navigator a introduit la prise en charge de cet argument et cela s'est retrouvé dans Firefox. À un moment, le groupe de travail du W3C sur les API Web [a ouvert le sujet](https://www.w3.org/2005/06/tracker/webapi/issues/69) pour étudier son ajout à la spécification pour `location.reload()`. Toutefois, il n'a jamais été ajouté formellement.
 
-<p>En résumé, ce paramètre booléen ne fait pas partie de la spécification actuelle <code>location.reload()</code> et n'en a en fait jamais fait partie.</p>
+En résumé, ce paramètre booléen ne fait pas partie de la spécification actuelle `location.reload()` et n'en a en fait jamais fait partie.
 
-<h2 id="spécifications">Spécifications</h2>
+## Spécifications
 
-<p>{{Specifications}}</p>
+{{Specifications}}
 
-<h2 id="compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>L'interface <a href="/fr/docs/Web/API/Location"><code>Location</code></a> à laquelle appartient cette méthode.</li>
-  <li>Des méthodes semblables&nbsp;: <a href="/fr/docs/Web/API/Location/assign"><code>Location.assign()</code></a> et <a href="/fr/docs/Web/API/Location/replace"><code>Location.replace()</code></a>.</li>
-</ul>
+- L'interface [`Location`](/fr/docs/Web/API/Location) à laquelle appartient cette méthode.
+- Des méthodes semblables : [`Location.assign()`](/fr/docs/Web/API/Location/assign) et [`Location.replace()`](/fr/docs/Web/API/Location/replace).
diff --git a/files/fr/web/api/location/replace/index.md b/files/fr/web/api/location/replace/index.md
index 90fa954e20..0811c18b61 100644
--- a/files/fr/web/api/location/replace/index.md
+++ b/files/fr/web/api/location/replace/index.md
@@ -8,51 +8,42 @@ tags:
   - Reference
 translation_of: Web/API/Location/replace
 ---
-<p>{{APIRef("Location")}}</p>
-<p>La méthode <code><strong>Location.replace()</strong></code> remplace la ressource actuelle par celle présente à l'URL donnée. La différence avec la méthode {{domxref("Location.assign","assign()")}} est que, après avoir utilisé <code>replace()</code>, la page actuelle ne sera pas enregistrée dans l'historique de session {{domxref("History")}}, ce qui signifie que l'utilisateur ne sera pas en mesure d'utiliser le bouton <em>précédent</em> pour y revenir.</p>
-<p>Si le remplacement est impossible à cause d'une violation de sécurité, une {{domxref("DOMException")}} de type <code>SECURITY_ERROR</code> est lancée. Ceci se produit si l'origine du script appelant est différente de l'origine de la page originellement désignée par l'objet {{domxref("Location")}}, principalement quand le script est hébergé sur un autre domaine.</p>
-<p>Si l'URL donnée n'est pas valide, une {{domxref("DOMException")}} de type <code>SYNTAX_ERROR</code> est lancée.</p>
-<h2 id="Syntaxe">Syntaxe</h2>
-<pre class="syntaxbox"><em>object</em>.replace(<em>url</em>);
-</pre>
-<h3 id="Paramètres">Paramètres</h3>
-<dl>
- <dt>
-  <em>url</em></dt>
- <dd>
-  {{domxref("DOMString")}} contenant l'URL de la page vers laquelle naviguer.</dd>
-</dl>
-<h2 id="Exemples">Exemples</h2>
-<pre class="brush: js">// Navigue vers l'article <em>Location.reload</em> en remplaçant la page actuelle
-document.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');</pre>
-<h2 id="Spécifications">Spécifications</h2>
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "history.html#dom-location-replace", "Location.replace()")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Pas de différence avec {{SpecName("HTML5 W3C")}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', "browsers.html#dom-location-replace", "Location.replace()")}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.IDBIndex")}}</p>
-
-<h2 id="See_also">Voir aussi</h2>
-
-<ul>
- <li>L'interface {{domxref("Location")}} à laquelle appartient cette méthode.</li>
- <li>Méthodes similaires : {{domxref("Location.assign()")}} et {{domxref("Location.reload()")}}.</li>
-</ul>
+{{APIRef("Location")}}
+
+La méthode **`Location.replace()`** remplace la ressource actuelle par celle présente à l'URL donnée. La différence avec la méthode {{domxref("Location.assign","assign()")}} est que, après avoir utilisé `replace()`, la page actuelle ne sera pas enregistrée dans l'historique de session {{domxref("History")}}, ce qui signifie que l'utilisateur ne sera pas en mesure d'utiliser le bouton _précédent_ pour y revenir.
+
+Si le remplacement est impossible à cause d'une violation de sécurité, une {{domxref("DOMException")}} de type `SECURITY_ERROR` est lancée. Ceci se produit si l'origine du script appelant est différente de l'origine de la page originellement désignée par l'objet {{domxref("Location")}}, principalement quand le script est hébergé sur un autre domaine.
+
+Si l'URL donnée n'est pas valide, une {{domxref("DOMException")}} de type `SYNTAX_ERROR` est lancée.
+
+## Syntaxe
+
+    object.replace(url);
+
+### Paramètres
+
+- _url_
+  - : {{domxref("DOMString")}} contenant l'URL de la page vers laquelle naviguer.
+
+## Exemples
+
+```js
+// Navigue vers l'article Location.reload en remplaçant la page actuelle
+document.location.replace('https://developer.mozilla.org/en-US/docs/Web/API/Location.reload');
+```
+
+## Spécifications
+
+| Spécification                                                                                                        | Statut                           | Commentaires                                             |
+| -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------------------------------------------- |
+| {{SpecName('HTML WHATWG', "history.html#dom-location-replace", "Location.replace()")}} | {{Spec2('HTML WHATWG')}} | Pas de différence avec {{SpecName("HTML5 W3C")}}. |
+| {{SpecName('HTML5 W3C', "browsers.html#dom-location-replace", "Location.replace()")}}     | {{Spec2('HTML5 W3C')}}     | Définition initiale.                                     |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.IDBIndex")}}
+
+## Voir aussi
+
+- L'interface {{domxref("Location")}} à laquelle appartient cette méthode.
+- Méthodes similaires : {{domxref("Location.assign()")}} et {{domxref("Location.reload()")}}.
diff --git a/files/fr/web/api/media_streams_api/index.md b/files/fr/web/api/media_streams_api/index.md
index b6e04f8156..84162a9f77 100644
--- a/files/fr/web/api/media_streams_api/index.md
+++ b/files/fr/web/api/media_streams_api/index.md
@@ -9,74 +9,66 @@ tags:
 translation_of: Web/API/Media_Streams_API
 original_slug: WebRTC/MediaStream_API
 ---
-<div>{{DefaultAPISidebar("Media Capture and Streams")}}</div>
+{{DefaultAPISidebar("Media Capture and Streams")}}
 
-<p>L'<strong>API Processing MediaStream</strong>, souvent appelée <em>Media Stream API</em> ou <em>Stream API</em>, est la partie de <a href="/fr/docs/WebRTC">WebRTC</a> décrivant un flux de données audio ou vidéo, les méthodes pour les manipuler, les contraintes associées au type de données, les erreurs et succès des callbacks avec les données asynchrones, et les évènements déclenchés durant le processus.</p>
+L'**API Processing MediaStream**, souvent appelée _Media Stream API_ ou _Stream API_, est la partie de [WebRTC](/fr/docs/WebRTC) décrivant un flux de données audio ou vidéo, les méthodes pour les manipuler, les contraintes associées au type de données, les erreurs et succès des callbacks avec les données asynchrones, et les évènements déclenchés durant le processus.
 
-<h2 id="Concepts_de_base">Concepts de base</h2>
+## Concepts de base
 
-<p>L'API est basée sur la manipulation de l'objet {{domxref("MediaStream")}} représentant un flux de données audio ou vidéo. Typiquement, un {{domxref("MediaStream")}} est une simple chaine URL qui peut être utilisée pour référencer une donnée stockée dans un {{domxref("File")}} DOM, ou un objet {{domxref("Blob")}} crée avec {{domxref("window.URL.createObjectURL()")}}, tel que décrit dans <a href="/en-US/docs/WebRTC/taking_webcam_photos#Get_the_video">cette vidéo</a>.</p>
+L'API est basée sur la manipulation de l'objet {{domxref("MediaStream")}} représentant un flux de données audio ou vidéo. Typiquement, un {{domxref("MediaStream")}} est une simple chaine URL qui peut être utilisée pour référencer une donnée stockée dans un {{domxref("File")}} DOM, ou un objet {{domxref("Blob")}} crée avec {{domxref("window.URL.createObjectURL()")}}, tel que décrit dans [cette vidéo](/en-US/docs/WebRTC/taking_webcam_photos#Get_the_video).
 
-<p>Un {{domxref("MediaStream")}} consiste en zéro ou plus objets {{domxref("MediaStreamTrack")}}, représentant différentes <strong>pistes</strong> audio ou vidéos. Chaque {{domxref("MediaStreamTrack")}} peut avoir un ou plusieurs <strong>canal</strong>. Le canal représente la plus petite unité d'un flux média, tel un signal audio d'un haut-parleur, séparé en <em>gauche</em> et <em>droite</em> sur une piste audio en stéréo.</p>
+Un {{domxref("MediaStream")}} consiste en zéro ou plus objets {{domxref("MediaStreamTrack")}}, représentant différentes **pistes** audio ou vidéos. Chaque {{domxref("MediaStreamTrack")}} peut avoir un ou plusieurs **canal**. Le canal représente la plus petite unité d'un flux média, tel un signal audio d'un haut-parleur, séparé en _gauche_ et _droite_ sur une piste audio en stéréo.
 
-<p><code>Les objets </code> {{domxref("MediaStream")}} ont une seule <strong>entrée </strong>et une seule <strong>sortie</strong>. Un objet {{domxref("MediaStream")}} généré par <a href="/en-US/docs/WebRTC/navigator.getUserMedia">getUserMedia()</a> est dit <em>local</em>, et sa source d'entrée provient de l'une des caméra ou microphone de l'utilisateur. Un objet {{domxref("MediaStream")}} non local peut représenter un média tel que {{HTMLElement("video")}} ou {{HTMLElement("audio")}}, un flux provenant du réseau et obtenu via l'API WebRTC <a href="/en-US/docs/WebRTC/PeerConnection_API">PeerConnection</a>, ou un flux créé en utilisant l'API <a href="/en-US/docs/Web_Audio_API">Web Audio</a> {{domxref("MediaStreamAudioSourceNode")}}. La sortie d'un objet {{domxref("MediaStream")}} est liée à un <strong>consommateur</strong>. Elle peut-être un élément média tel que {{HTMLElement("audio")}} ou {{HTMLElement("video")}}, l'API WebRTC <a href="/en-US/docs/WebRTC/PeerConnection_API">PeerConnection</a> ou l'<a href="/en-US/docs/Web_Audio_API">API Web Audio</a> {{domxref("MediaStreamAudioDestinationNode")}}.</p>
+`Les objets `{{domxref("MediaStream")}} ont une seule **entrée** et une seule **sortie**. Un objet {{domxref("MediaStream")}} généré par [getUserMedia()](/en-US/docs/WebRTC/navigator.getUserMedia) est dit _local_, et sa source d'entrée provient de l'une des caméra ou microphone de l'utilisateur. Un objet {{domxref("MediaStream")}} non local peut représenter un média tel que {{HTMLElement("video")}} ou {{HTMLElement("audio")}}, un flux provenant du réseau et obtenu via l'API WebRTC [PeerConnection](/en-US/docs/WebRTC/PeerConnection_API), ou un flux créé en utilisant l'API [Web Audio](/en-US/docs/Web_Audio_API) {{domxref("MediaStreamAudioSourceNode")}}. La sortie d'un objet {{domxref("MediaStream")}} est liée à un **consommateur**. Elle peut-être un élément média tel que {{HTMLElement("audio")}} ou {{HTMLElement("video")}}, l'API WebRTC [PeerConnection](/en-US/docs/WebRTC/PeerConnection_API) ou l'[API Web Audio](/en-US/docs/Web_Audio_API) {{domxref("MediaStreamAudioDestinationNode")}}.
 
-<h2 id="Interfaces">Interfaces</h2>
+## Interfaces
 
-<p>Dans ces articles de référence, on trouvera les informations fondamentales sur les différentes interfaces qui composent l'API <em>Media Capture and Streams API</em>.</p>
+Dans ces articles de référence, on trouvera les informations fondamentales sur les différentes interfaces qui composent l'API _Media Capture and Streams API_.
 
-<ul>
- <li>{{domxref("BlobEvent")}}</li>
- <li>{{domxref("CanvasCaptureMediaStreamTrack")}}</li>
- <li>{{domxref("InputDeviceInfo")}}</li>
- <li>{{domxref("MediaDeviceKind")}}</li>
- <li>{{domxref("MediaDeviceInfo")}}</li>
- <li>{{domxref("MediaDevices")}}</li>
- <li>{{domxref("MediaStream")}}</li>
- <li>{{domxref("MediaStreamConstraints")}}</li>
- <li>{{domxref("MediaStreamEvent")}}</li>
- <li>{{domxref("MediaStreamTrack")}}</li>
- <li>{{domxref("MediaStreamTrackEvent")}}</li>
- <li>{{domxref("MediaTrackCapabilities")}}</li>
- <li>{{domxref("MediaTrackConstraints")}}</li>
- <li>{{domxref("MediaTrackSettings")}}</li>
- <li>{{domxref("MediaTrackSupportedConstraints")}}</li>
- <li>{{domxref("NavigatorUserMedia")}}</li>
- <li>{{domxref("NavigatorUserMediaError")}}</li>
- <li>{{domxref("OverconstrainedError")}}</li>
- <li>{{domxref("URL")}}</li>
-</ul>
+- {{domxref("BlobEvent")}}
+- {{domxref("CanvasCaptureMediaStreamTrack")}}
+- {{domxref("InputDeviceInfo")}}
+- {{domxref("MediaDeviceKind")}}
+- {{domxref("MediaDeviceInfo")}}
+- {{domxref("MediaDevices")}}
+- {{domxref("MediaStream")}}
+- {{domxref("MediaStreamConstraints")}}
+- {{domxref("MediaStreamEvent")}}
+- {{domxref("MediaStreamTrack")}}
+- {{domxref("MediaStreamTrackEvent")}}
+- {{domxref("MediaTrackCapabilities")}}
+- {{domxref("MediaTrackConstraints")}}
+- {{domxref("MediaTrackSettings")}}
+- {{domxref("MediaTrackSupportedConstraints")}}
+- {{domxref("NavigatorUserMedia")}}
+- {{domxref("NavigatorUserMediaError")}}
+- {{domxref("OverconstrainedError")}}
+- {{domxref("URL")}}
 
-<p>Les premières versions de la spécification pour Media Capture and Streams API incluaient des interfaces séparées <code>AudioStreamTrack</code> et <code>VideoStreamTrack</code>, chacunes basées sur {{domxref("MediaStreamTrack")}} et qui représentaient des types de flux différents. Celles-ci n'existent plus et il faut utiliser <code>MediaStreamTrack</code> directement à la place.</p>
+Les premières versions de la spécification pour Media Capture and Streams API incluaient des interfaces séparées `AudioStreamTrack` et `VideoStreamTrack`, chacunes basées sur {{domxref("MediaStreamTrack")}} et qui représentaient des types de flux différents. Celles-ci n'existent plus et il faut utiliser `MediaStreamTrack` directement à la place.
 
-<h2 id="Évènements">Évènements</h2>
+## Évènements
 
-<ul>
- <li>{{event("addtrack")}}</li>
- <li>{{event("ended")}}</li>
- <li>{{event("muted")}}</li>
- <li>{{event("overconstrained")}}</li>
- <li>{{event("removetrack")}}</li>
- <li>{{event("started")}}</li>
- <li>{{event("unmuted")}}</li>
-</ul>
+- {{event("addtrack")}}
+- {{event("ended")}}
+- {{event("muted")}}
+- {{event("overconstrained")}}
+- {{event("removetrack")}}
+- {{event("started")}}
+- {{event("unmuted")}}
 
-<h2 id="Guides_et_tutorials">Guides et tutorials</h2>
+## Guides et tutorials
 
-<p>Les articles qui suivent fournissent des manuels et guides pour utiliser cette API et réaliser des certaines tâches avec elle.</p>
+Les articles qui suivent fournissent des manuels et guides pour utiliser cette API et réaliser des certaines tâches avec elle.
 
-<p>{{LandingPageListSubpages}}</p>
+{{LandingPageListSubpages}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
+{{Compat("api.MediaStream")}}
 
+## Voir aussi
 
-<p>{{Compat("api.MediaStream")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/WebRTC_API">WebRTC</a> - la page d'introduction à l'API</li>
- <li>{{domxref("mediaDevices.getUserMedia()")}}</li>
- <li><a href="/fr/docs/Web/API/WebRTC_API/Taking_still_photos">Prendre des clichés avec WebRTC</a> : un tutoriel/une démonstration sur l'utilisation de <code>getUserMedia()</code>.</li>
-</ul>
+- [WebRTC](/fr/docs/Web/API/WebRTC_API) - la page d'introduction à l'API
+- {{domxref("mediaDevices.getUserMedia()")}}
+- [Prendre des clichés avec WebRTC](/fr/docs/Web/API/WebRTC_API/Taking_still_photos) : un tutoriel/une démonstration sur l'utilisation de `getUserMedia()`.
diff --git a/files/fr/web/api/mediadevices/getusermedia/index.md b/files/fr/web/api/mediadevices/getusermedia/index.md
index c36f3740bf..d6c56e04c4 100644
--- a/files/fr/web/api/mediadevices/getusermedia/index.md
+++ b/files/fr/web/api/mediadevices/getusermedia/index.md
@@ -3,151 +3,163 @@ title: MediaDevices.getUserMedia()
 slug: Web/API/MediaDevices/getUserMedia
 translation_of: Web/API/MediaDevices/getUserMedia
 ---
-<div>{{APIRef("WebRTC")}}</div>
+{{APIRef("WebRTC")}}
 
-<p>La méthode <code><strong>MediaDevices.getUserMedia()</strong></code> invite l'utilisateur à autoriser l'utilisation d'une entrée multimédia qui produit un {{domxref("MediaStream")}} avec des pistes contenant les types de médias demandés. Ce flux peut inclure, par exemple, une piste vidéo (produite par une source matérielle ou vidéo virtuelle telle qu'une caméra, un dispositif d'enregistrement vidéo, un service de partage d'écran, etc.), une piste audio (de la même manière, produite par une source physique ou Source audio virtuelle comme un microphone, convertisseur A / D ou similaire) et éventuellement d'autres types de piste.</p>
+La méthode **`MediaDevices.getUserMedia()`** invite l'utilisateur à autoriser l'utilisation d'une entrée multimédia qui produit un {{domxref("MediaStream")}} avec des pistes contenant les types de médias demandés. Ce flux peut inclure, par exemple, une piste vidéo (produite par une source matérielle ou vidéo virtuelle telle qu'une caméra, un dispositif d'enregistrement vidéo, un service de partage d'écran, etc.), une piste audio (de la même manière, produite par une source physique ou Source audio virtuelle comme un microphone, convertisseur A / D ou similaire) et éventuellement d'autres types de piste.
 
-<p>Il renvoie un  {{jsxref("Promise")}}  qui est résolu avec succès si l'utilisateur donne son autorisation;   {{domxref("MediaStream")}}  est fourni à ce moment-là.  Si l'utilisateur refuse ou si le média correspondant n'est pas disponible, le  {{jsxref("Promise")}}  est rejetée avec respectivement <code>PermissionDeniedError</code> ou <code>NotFoundError</code>.</p>
+Il renvoie un {{jsxref("Promise")}} qui est résolu avec succès si l'utilisateur donne son autorisation; {{domxref("MediaStream")}} est fourni à ce moment-là. Si l'utilisateur refuse ou si le média correspondant n'est pas disponible, le {{jsxref("Promise")}} est rejetée avec respectivement `PermissionDeniedError` ou `NotFoundError`.
 
-<div class="note">
-<p><strong>Note :</strong> Il est possible que le  {{jsxref("Promise")}}  renvoyé ne soit <em>ni</em> résolu ni rejeté, car l'utilisateur n'est pas tenu de faire un choix. .</p>
-</div>
+> **Note :** Il est possible que le {{jsxref("Promise")}} renvoyé ne soit _ni_ résolu ni rejeté, car l'utilisateur n'est pas tenu de faire un choix. .
 
-<p>Généralement, vous accédez à l'objet  {{domxref("MediaDevices")}}  avec  {{domxref("navigator.mediaDevices")}}  , comme ceci:</p>
+Généralement, vous accédez à l'objet {{domxref("MediaDevices")}} avec {{domxref("navigator.mediaDevices")}} , comme ceci:
 
-<pre class="brush: js">navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
+```js
+navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
   /* use the stream */
 }).catch(function(err) {
   /* handle the error */
-});</pre>
+});
+```
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var <em>promise</em> = navigator.mediaDevices.getUserMedia(<em>constraints</em>);
-</pre>
+    var promise = navigator.mediaDevices.getUserMedia(constraints);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>constraints</code></dt>
- <dd>
- <p>Un objet  {{domxref("MediaStreamConstraints")}}  spécifiant les types de supports à demander, ainsi que toutes les exigences pour chaque type.</p>
+- `constraints`
 
- <p>Le paramètre constraints est un objet <code>MediaStreamConstraints</code> avec deux membres: <code>video</code> et <code>audio</code> , décrivant les types de média demandés.  L'un ou l'autre ou les deux doivent être spécifiés.  Si le navigateur ne trouve pas toutes les pistes multimédia avec les types spécifiés qui répondent aux contraintes fournies, la promesse renvoyée est rejetée avec <code>NotFoundError</code> .</p>
+  - : Un objet {{domxref("MediaStreamConstraints")}} spécifiant les types de supports à demander, ainsi que toutes les exigences pour chaque type.
 
- <p>Les demandes suivantes sont audio et vidéo sans aucune exigence spécifique:</p>
+    Le paramètre constraints est un objet `MediaStreamConstraints` avec deux membres: `video` et `audio` , décrivant les types de média demandés. L'un ou l'autre ou les deux doivent être spécifiés. Si le navigateur ne trouve pas toutes les pistes multimédia avec les types spécifiés qui répondent aux contraintes fournies, la promesse renvoyée est rejetée avec `NotFoundError` .
 
- <pre class="brush: js">{ audio: true, video: true }</pre>
+    Les demandes suivantes sont audio et vidéo sans aucune exigence spécifique:
 
- <p>Si <code>true</code> est spécifié pour un type de média, le flux résultant est <em>requis</em> pour obtenir ce type de piste.  Si on ne peut pas l'obtenir pour une raison quelconque, l'appel à <code>getUserMedia()</code> entraînera une erreur.</p>
+    ```js
+    { audio: true, video: true }
+    ```
 
- <p>Alors que les informations sur les caméras et les microphones d'un utilisateur sont inaccessibles pour des raisons de confidentialité, une application peut demander les capacités de caméra et de microphone dont elle a besoin en utilisant des contraintes supplémentaires.  Ce qui suit exprime une préférence pour la résolution de la caméra 1280x720:</p>
+    Si `true` est spécifié pour un type de média, le flux résultant est _requis_ pour obtenir ce type de piste. Si on ne peut pas l'obtenir pour une raison quelconque, l'appel à `getUserMedia()` entraînera une erreur.
 
- <pre class="brush: js">{
-  audio: true,
-  video: { width: 1280, height: 720 }
-}</pre>
+    Alors que les informations sur les caméras et les microphones d'un utilisateur sont inaccessibles pour des raisons de confidentialité, une application peut demander les capacités de caméra et de microphone dont elle a besoin en utilisant des contraintes supplémentaires. Ce qui suit exprime une préférence pour la résolution de la caméra 1280x720:
 
- <p>Le navigateur essaiera d'honorer cela, mais peut renvoyer d'autres résolutions si une correspondance exacte n'est pas disponible, ou si l'utilisateur l'annule.</p>
+    ```js
+    {
+      audio: true,
+      video: { width: 1280, height: 720 }
+    }
+    ```
 
- <p>Pour <em>exiger</em> une capacité, utilisez les mots-clés <code>min</code> , <code>max</code> ou <code>exact</code> (aka <code>min == max</code> ).  Ce qui suit exige une résolution minimale de 1280x720:</p>
+    Le navigateur essaiera d'honorer cela, mais peut renvoyer d'autres résolutions si une correspondance exacte n'est pas disponible, ou si l'utilisateur l'annule.
 
- <pre class="brush: js">{
-  audio: true,
-  video: {
-    width: { min: 1280 },
-    height: { min: 720 }
-  }
-}</pre>
+    Pour _exiger_ une capacité, utilisez les mots-clés `min` , `max` ou `exact` (aka `min == max` ). Ce qui suit exige une résolution minimale de 1280x720:
 
- <p>Si aucune caméra n'existe avec cette résolution ou plus haut, le  {{jsxref("Promise")}}  retourné sera rejeté avec <code>OverconstrainedError</code>.</p>
+    ```js
+    {
+      audio: true,
+      video: {
+        width: { min: 1280 },
+        height: { min: 720 }
+      }
+    }
+    ```
 
- <p>La raison de la différence de comportement est que les mots clés <code>min</code> , <code>max</code> et <code>exact</code> sont intrinsèquement obligatoires, alors que les valeurs simples et un mot-clé appelé <code>ideal</code> ne le sont pas.  Voici un exemple plus complet:</p>
+    Si aucune caméra n'existe avec cette résolution ou plus haut, le {{jsxref("Promise")}} retourné sera rejeté avec `OverconstrainedError`.
 
- <pre class="brush: js">{
-  audio: true,
-  video: {
-    width: { min: 1024, ideal: 1280, max: 1920 },
-    height: { min: 776, ideal: 720, max: 1080 }
-  }
-}</pre>
+    La raison de la différence de comportement est que les mots clés `min` , `max` et `exact` sont intrinsèquement obligatoires, alors que les valeurs simples et un mot-clé appelé `ideal` ne le sont pas. Voici un exemple plus complet:
 
- <p>Une valeur <code>ideal</code> , lorsqu'elle est utilisée, a une gravité, ce qui signifie que le navigateur essaiera de trouver le réglage (et la caméra, si vous en avez plus d'une), avec les valeurs les plus proches des valeurs idéales données.</p>
+    ```js
+    {
+      audio: true,
+      video: {
+        width: { min: 1024, ideal: 1280, max: 1920 },
+        height: { min: 776, ideal: 720, max: 1080 }
+      }
+    }
+    ```
 
- <p>Les valeurs simples sont par nature idéales, ce qui signifie que le premier de nos exemples de résolution ci-dessus aurait pu être écrit comme ceci:</p>
+    Une valeur `ideal` , lorsqu'elle est utilisée, a une gravité, ce qui signifie que le navigateur essaiera de trouver le réglage (et la caméra, si vous en avez plus d'une), avec les valeurs les plus proches des valeurs idéales données.
 
- <pre class="brush: js">{
-  audio: true,
-  video: {
-    width: { ideal: 1280 },
-    height: { ideal: 720 }
-  }
-}</pre>
+    Les valeurs simples sont par nature idéales, ce qui signifie que le premier de nos exemples de résolution ci-dessus aurait pu être écrit comme ceci:
 
- <p>Toutes les contraintes ne sont pas des nombres.  Par exemple, sur les appareils mobiles, les éléments suivants préfèrent la caméra avant (si celle-ci est disponible) sur l'arrière:</p>
+    ```js
+    {
+      audio: true,
+      video: {
+        width: { ideal: 1280 },
+        height: { ideal: 720 }
+      }
+    }
+    ```
 
- <pre class="brush: js">{ audio: true, video: { facingMode: "user" } }</pre>
+    Toutes les contraintes ne sont pas des nombres. Par exemple, sur les appareils mobiles, les éléments suivants préfèrent la caméra avant (si celle-ci est disponible) sur l'arrière:
 
- <p>Pour <em>exiger</em> la caméra arrière, utilisez:</p>
+    ```js
+    { audio: true, video: { facingMode: "user" } }
+    ```
 
- <pre class="brush: js">{ audio: true, video: { facingMode: { exact: "environment" } } }</pre>
- </dd>
-</dl>
+    Pour _exiger_ la caméra arrière, utilisez:
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+    ```js
+    { audio: true, video: { facingMode: { exact: "environment" } } }
+    ```
 
-<p>Un  {{jsxref("Promise")}}  qui reçoit en objet  {{domxref("MediaStream")}}  lorsque les médias demandés ont été obtenus avec succès.</p>
+### Valeur de retour
 
-<h3 id="Erreurs">Erreurs</h3>
+Un {{jsxref("Promise")}} qui reçoit en objet {{domxref("MediaStream")}} lorsque les médias demandés ont été obtenus avec succès.
 
-<p>Les rejets du  {{jsxref("Promise")}}  retourné sont effectués en passant un objet erreur <a href="https://translate.googleusercontent.com/translate_c?depth=1&amp;hl=fr&amp;prev=search&amp;rurl=translate.google.fr&amp;sl=en&amp;sp=nmt4&amp;u=https://developer.mozilla.org/en-US/docs/Web/API/DOMException&amp;usg=ALkJrhgnRUAs3RQR8I7ulOitmhRQUlVEUA"><code>DOMException</code></a> au gestionnaire d'erreurs.  Les erreurs possibles sont:</p>
+### Erreurs
 
-<dl>
- <dt><code>AbortError</code></dt>
- <dd>Bien que l'utilisateur et le système d'exploitation aient tous deux accédé à l'équipement matériel, et qu'aucun problème de matériel ne causerait un <code>NotReadableError</code> , un problème s'est produit, ce qui a empêché l'utilisation du périphérique.</dd>
- <dt><code>NotAllowedError</code></dt>
- <dd>L'utilisateur a spécifié que l'instance de navigation actuelle n'a pas accès au périphérique;  Ou l'utilisateur a refusé l'accès pour la session en cours;  Ou l'utilisateur a refusé tout l'accès aux périphériques multimédias utilisateurs dans le monde entier.
- <div class="note"><p><strong>Note :</strong> Les versions plus anciennes de la spécification ont utilisé <code>SecurityError</code> pour cela à la place;  <code>SecurityError</code> a pris une nouvelle signification.</p></div>
- </dd>
- <dt><code>NotFoundError</code></dt>
- <dd>Aucune piste multimédia du type spécifié n'a été trouvée satisfaisant les contraintes données.</dd>
- <dt><code>NotReadableError</code></dt>
- <dd>Bien que l'utilisateur ait autorisé l'utilisation des appareils correspondants, une erreur matérielle s'est produite sur le système d'exploitation, le navigateur ou le niveau de la page Web qui a empêché l'accès au périphérique.</dd>
- <dt><code>OverConstrainedError</code></dt>
- <dd>Aucun dispositif candidat répondant aux critères demandés.  L'erreur est un objet de type <code>OverconstrainedError</code> et possède une propriété de <code>constraint</code> dont la valeur de chaîne est le nom d'une contrainte impossible à honorer et une propriété <code>message</code> contenant une chaîne lisible par l'homme expliquant le problème.
- <div class="note"><p><strong>Note :</strong> Étant donné que cette erreur peut se produire même lorsque l'utilisateur n'a pas encore autorisé l'utilisation du périphérique sous-jacent, il peut être utilisé comme surface d'empreinte digitale.</p></div>
- </dd>
- <dt><code>SecurityError</code></dt>
- <dd>Le support multimédia utilisateur est désactivé sur le  {{domxref("Document")}}  sur lequel <code>getUserMedia()</code> été appelé.  Le mécanisme par lequel le support média utilisateur est activé/désactivé est laissé à la discrétion de l'utilisateur.</dd>
- <dt><code>TypeError</code></dt>
- <dd>La liste des contraintes spécifiées est vide ou toutes les contraintes sont définies comme <code>false</code> .</dd>
-</dl>
+Les rejets du {{jsxref("Promise")}} retourné sont effectués en passant un objet erreur [`DOMException`](https://translate.googleusercontent.com/translate_c?depth=1&hl=fr&prev=search&rurl=translate.google.fr&sl=en&sp=nmt4&u=https://developer.mozilla.org/en-US/docs/Web/API/DOMException&usg=ALkJrhgnRUAs3RQR8I7ulOitmhRQUlVEUA) au gestionnaire d'erreurs. Les erreurs possibles sont:
 
-<h2 id="Exemples"><strong>Exemple</strong>s</h2>
+- `AbortError`
+  - : Bien que l'utilisateur et le système d'exploitation aient tous deux accédé à l'équipement matériel, et qu'aucun problème de matériel ne causerait un `NotReadableError` , un problème s'est produit, ce qui a empêché l'utilisation du périphérique.
+- `NotAllowedError`
 
-<h3 id="Largeur_et_hauteur">Largeur et hauteur</h3>
+  - : L'utilisateur a spécifié que l'instance de navigation actuelle n'a pas accès au périphérique; Ou l'utilisateur a refusé l'accès pour la session en cours; Ou l'utilisateur a refusé tout l'accès aux périphériques multimédias utilisateurs dans le monde entier.
 
-<p>Cet exemple donne une préférence pour la résolution de la caméra et attribue l'objet <a href="https://translate.googleusercontent.com/translate_c?depth=1&amp;hl=fr&amp;prev=search&amp;rurl=translate.google.fr&amp;sl=en&amp;sp=nmt4&amp;u=https://developer.mozilla.org/en-US/docs/Web/API/MediaStream&amp;usg=ALkJrhipdR5n2jQ-BGrPTomESH_A7nof4g"><code>MediaStream</code></a> résultant à un élément vidéo.</p>
+    > **Note :** Les versions plus anciennes de la spécification ont utilisé `SecurityError` pour cela à la place; `SecurityError` a pris une nouvelle signification.
 
-<pre>// Prefer camera resolution nearest to 1280x720.
-var constraints = { audio: true, video: { width: 1280, height: 720 } };
+- `NotFoundError`
+  - : Aucune piste multimédia du type spécifié n'a été trouvée satisfaisant les contraintes données.
+- `NotReadableError`
+  - : Bien que l'utilisateur ait autorisé l'utilisation des appareils correspondants, une erreur matérielle s'est produite sur le système d'exploitation, le navigateur ou le niveau de la page Web qui a empêché l'accès au périphérique.
+- `OverConstrainedError`
 
-navigator.mediaDevices.getUserMedia(constraints)
-.then(function(mediaStream) {
-  var video = document.querySelector('video');
-  video.srcObject = mediaStream;
-  video.onloadedmetadata = function(e) {
-    video.play();
-  };
-})
-.catch(function(err) { console.log(err.name + ": " + err.message); }); // always check for errors at the end.
-</pre>
+  - : Aucun dispositif candidat répondant aux critères demandés. L'erreur est un objet de type `OverconstrainedError` et possède une propriété de `constraint` dont la valeur de chaîne est le nom d'une contrainte impossible à honorer et une propriété `message` contenant une chaîne lisible par l'homme expliquant le problème.
+
+    > **Note :** Étant donné que cette erreur peut se produire même lorsque l'utilisateur n'a pas encore autorisé l'utilisation du périphérique sous-jacent, il peut être utilisé comme surface d'empreinte digitale.
 
-<h3 id="Utilisation_de_la_nouvelle_API_dans_les_navigateurs_plus_anciens">Utilisation de la nouvelle API dans les navigateurs plus anciens</h3>
+- `SecurityError`
+  - : Le support multimédia utilisateur est désactivé sur le {{domxref("Document")}} sur lequel `getUserMedia()` été appelé. Le mécanisme par lequel le support média utilisateur est activé/désactivé est laissé à la discrétion de l'utilisateur.
+- `TypeError`
+  - : La liste des contraintes spécifiées est vide ou toutes les contraintes sont définies comme `false` .
 
-<p>Voici un exemple d'utilisation de <code>navigator.mediaDevices.getUserMedia()</code> , avec un adaptateur pour faire face aux navigateurs plus anciens.  Notez que cet adaptater ne corrige pas les différences existantes dans la syntaxe des contraintes, ce qui signifie que les contraintes ne fonctionneront pas bien dans les navigateurs.  Il est recommandé d'utiliser l'adaptateur <a href="https://github.com/webrtc/adapter">adapter.js</a>  a la place, qui gère les contraintes.</p>
+## **Exemple**s
 
-<pre class="brush: js">// Older browsers might not implement mediaDevices at all, so we set an empty object first
+### Largeur et hauteur
+
+Cet exemple donne une préférence pour la résolution de la caméra et attribue l'objet [`MediaStream`](https://translate.googleusercontent.com/translate_c?depth=1&hl=fr&prev=search&rurl=translate.google.fr&sl=en&sp=nmt4&u=https://developer.mozilla.org/en-US/docs/Web/API/MediaStream&usg=ALkJrhipdR5n2jQ-BGrPTomESH_A7nof4g) résultant à un élément vidéo.
+
+    // Prefer camera resolution nearest to 1280x720.
+    var constraints = { audio: true, video: { width: 1280, height: 720 } };
+
+    navigator.mediaDevices.getUserMedia(constraints)
+    .then(function(mediaStream) {
+      var video = document.querySelector('video');
+      video.srcObject = mediaStream;
+      video.onloadedmetadata = function(e) {
+        video.play();
+      };
+    })
+    .catch(function(err) { console.log(err.name + ": " + err.message); }); // always check for errors at the end.
+
+### Utilisation de la nouvelle API dans les navigateurs plus anciens
+
+Voici un exemple d'utilisation de `navigator.mediaDevices.getUserMedia()` , avec un adaptateur pour faire face aux navigateurs plus anciens. Notez que cet adaptater ne corrige pas les différences existantes dans la syntaxe des contraintes, ce qui signifie que les contraintes ne fonctionneront pas bien dans les navigateurs. Il est recommandé d'utiliser l'adaptateur [adapter.js](https://github.com/webrtc/adapter)  a la place, qui gère les contraintes.
+
+```js
+// Older browsers might not implement mediaDevices at all, so we set an empty object first
 if (navigator.mediaDevices === undefined) {
   navigator.mediaDevices = {};
 }
@@ -191,67 +203,58 @@ navigator.mediaDevices.getUserMedia({ audio: true, video: true })
 .catch(function(err) {
   console.log(err.name + ": " + err.message);
 });
-</pre>
+```
 
-<h3 id="Taux_d'images">Taux d'images</h3>
+### Taux d'images
 
-<p>Des cadences inférieures peuvent être souhaitables dans certains cas, comme les transmissions WebRTC avec des restrictions de bande passante.</p>
+Des cadences inférieures peuvent être souhaitables dans certains cas, comme les transmissions WebRTC avec des restrictions de bande passante.
 
-<pre class="brush: js">var constraints = { video: { frameRate: { ideal: 10, max: 15 } } };
-</pre>
+```js
+var constraints = { video: { frameRate: { ideal: 10, max: 15 } } };
+```
 
-<h3 id="Caméra_avant_et_arrière">Caméra avant et arrière</h3>
+### Caméra avant et arrière
 
-<p>Sur les téléphones portables.</p>
+Sur les téléphones portables.
 
-<pre class="brush: js">var front = false;
+```js
+var front = false;
 document.getElementById('flip-button').onclick = function() { front = !front; };
 
 var constraints = { video: { facingMode: (front? "user" : "environment") } };
-</pre>
+```
 
-<h2 id="Permissions">Permissions</h2>
+## Permissions
 
-<p>Pour utiliser <code>getUserMedia()</code> dans une application installable (par exemple, une <a href="https://translate.googleusercontent.com/translate_c?depth=1&amp;hl=fr&amp;prev=search&amp;rurl=translate.google.fr&amp;sl=en&amp;sp=nmt4&amp;u=https://developer.mozilla.org/en-US/Apps/Build/Building_apps_for_Firefox_OS/Firefox_OS_app_beginners_tutorial&amp;usg=ALkJrhjjqOGYUEn75gZx3AcoQDArrosa9Q">application Firefox OS</a> ), vous devez spécifier un ou les deux champs suivants dans votre fichier manifeste:</p>
+Pour utiliser `getUserMedia()` dans une application installable (par exemple, une [application Firefox OS](https://translate.googleusercontent.com/translate_c?depth=1&hl=fr&prev=search&rurl=translate.google.fr&sl=en&sp=nmt4&u=https://developer.mozilla.org/en-US/Apps/Build/Building_apps_for_Firefox_OS/Firefox_OS_app_beginners_tutorial&usg=ALkJrhjjqOGYUEn75gZx3AcoQDArrosa9Q) ), vous devez spécifier un ou les deux champs suivants dans votre fichier manifeste:
 
-<pre class="brush: js">"permissions": {
+```js
+"permissions": {
   "audio-capture": {
     "description": "Required to capture audio using getUserMedia()"
   },
   "video-capture": {
     "description": "Required to capture video using getUserMedia()"
   }
-}</pre>
-
-<p>Voir  <a href="/en-US/Apps/Developing/App_permissions#audio-capture">permission: audio-capture</a>  et  <a href="/en-US/Apps/Developing/App_permissions#video-capture">permission: video-capture</a>  pour plus d'informations.</p>
-
-<h2 id="Specifications">Specifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Media Capture', '#dom-mediadevices-getusermedia', 'MediaDevices.getUserMedia()')}}</td>
-   <td>{{Spec2('Media Capture')}}</td>
-   <td>Initial definition</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.MediaDevices.getUserMedia")}}</p>
-
-<h2 id="See_also">Voir aussi</h2>
-
-<ul>
-  <li>L'ancienne API {{domxref("navigator.getUserMedia()")}}.</li>
-  <li>{{domxref("mediaDevices.enumerateDevices()")}} : Apprenez les types et le nombre de périphériques que l'utilisateur dispose.</li>
-  <li><a href="/fr/docs/Web/API/WebRTC_API">WebRTC API</a></li>
-  <li><a href="/fr/docs/Web/API/Media_Streams_API">Media Capture and Streams API (Media Streams)</a></li>
-  <li><a href="/fr/docs/Web/API/WebRTC_API/Taking_still_photos">Taking webcam photos</a> : un tutoriel sur l'utilisation de <code>getUserMedia()</code> pour prendre des photos plutôt que de la vidéo.</li>
-</ul>
+}
+```
+
+Voir [permission: audio-capture](/en-US/Apps/Developing/App_permissions#audio-capture) et [permission: video-capture](/en-US/Apps/Developing/App_permissions#video-capture) pour plus d'informations.
+
+## Specifications
+
+| Specification                                                                                                                | Status                               | Comment            |
+| ---------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ------------------ |
+| {{SpecName('Media Capture', '#dom-mediadevices-getusermedia', 'MediaDevices.getUserMedia()')}} | {{Spec2('Media Capture')}} | Initial definition |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.MediaDevices.getUserMedia")}}
+
+## Voir aussi
+
+- L'ancienne API {{domxref("navigator.getUserMedia()")}}.
+- {{domxref("mediaDevices.enumerateDevices()")}} : Apprenez les types et le nombre de périphériques que l'utilisateur dispose.
+- [WebRTC API](/fr/docs/Web/API/WebRTC_API)
+- [Media Capture and Streams API (Media Streams)](/fr/docs/Web/API/Media_Streams_API)
+- [Taking webcam photos](/fr/docs/Web/API/WebRTC_API/Taking_still_photos) : un tutoriel sur l'utilisation de `getUserMedia()` pour prendre des photos plutôt que de la vidéo.
diff --git a/files/fr/web/api/mediadevices/index.md b/files/fr/web/api/mediadevices/index.md
index e1743db309..6d4fd6608a 100644
--- a/files/fr/web/api/mediadevices/index.md
+++ b/files/fr/web/api/mediadevices/index.md
@@ -14,40 +14,37 @@ tags:
   - WebRTC
 translation_of: Web/API/MediaDevices
 ---
-<div>{{APIRef("Media Capture and Streams")}}</div>
+{{APIRef("Media Capture and Streams")}}
 
-<p>L'interface <strong><code>MediaDevices</code></strong> permet d'accéder aux périphériques d'entrée multimédia connectés tels que les caméras et les microphones, ainsi que le partage d'écran. Essentiellement, il vous permet d'accéder à n'importe quelle source matérielle de données multimédias.</p>
+L'interface **`MediaDevices`** permet d'accéder aux périphériques d'entrée multimédia connectés tels que les caméras et les microphones, ainsi que le partage d'écran. Essentiellement, il vous permet d'accéder à n'importe quelle source matérielle de données multimédias.
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<p><em>Hérite des propriétés de son interface parente, {{domxref("EventTarget")}}.</em></p>
+_Hérite des propriétés de son interface parente, {{domxref("EventTarget")}}._
 
-<h2 id="Handlers">Événéments</h2>
+## Événéments
 
-<dl>
- <dt>{{domxref("MediaDevices/devicechange_event", "devicechange")}}</dt>
- <dd>Déclenché lorsqu'un périphérique d'entrée ou de sortie multimédia est connecté ou retiré de l'ordinateur de l'utilisateur.<br>
- Egalement disponible via la propriété {{domxref("MediaDevices/ondevicechange", "ondevicechange")}}.</dd>
-</dl>
+- {{domxref("MediaDevices/devicechange_event", "devicechange")}}
+  - : Déclenché lorsqu'un périphérique d'entrée ou de sortie multimédia est connecté ou retiré de l'ordinateur de l'utilisateur.
+    Egalement disponible via la propriété {{domxref("MediaDevices/ondevicechange", "ondevicechange")}}.
 
-<h2 id="Méthodes">Méthodes</h2>
+## Méthodes
 
-<p><em>Hérite des méthodes de son interface parente, {{domxref("EventTarget")}}.</em></p>
+_Hérite des méthodes de son interface parente, {{domxref("EventTarget")}}._
 
-<dl>
- <dt>{{ domxref("MediaDevices.enumerateDevices", "enumerateDevices()") }}</dt>
- <dd>Obtient un tableau d'informations sur les périphériques d'entrée et de sortie multimédia disponibles sur le système.</dd>
- <dt>{{domxref("MediaDevices.getSupportedConstraints", "getSupportedConstraints()")}}</dt>
- <dd>Renvoie un objet conforme à {{domxref("MediaTrackSupportedConstraints")}} indiquant quelles propriétés de contrainte sont prises en charge sur l'interface {{domxref("MediaStreamTrack")}}. Consultez {{SectionOnPage("/en-US/docs/Web/API/Media_Streams_API", "Capabilities and constraints")}} pour en savoir plus sur les contraintes et comment les utiliser.</dd>
- <dt>{{domxref("MediaDevices.getDisplayMedia", "getDisplayMedia()")}}</dt>
- <dd>Invite l'utilisateur à sélectionner un affichage ou une partie d'un affichage (comme une fenêtre) à capturer en tant que {{domxref("MediaStream")}} à des fins de partage ou d'enregistrement. Renvoie une promesse qui se résout en un <code>MediaStream</code>.</dd>
- <dt>{{ domxref("MediaDevices.getUserMedia", "getUserMedia()") }}</dt>
- <dd>Avec l'autorisation de l'utilisateur via une invite, allume une caméra et / ou un microphone sur le système et fournit un {{domxref("MediaStream")}} contenant une piste vidéo et / ou une piste audio avec l'entrée.</dd>
-</dl>
+- {{ domxref("MediaDevices.enumerateDevices", "enumerateDevices()") }}
+  - : Obtient un tableau d'informations sur les périphériques d'entrée et de sortie multimédia disponibles sur le système.
+- {{domxref("MediaDevices.getSupportedConstraints", "getSupportedConstraints()")}}
+  - : Renvoie un objet conforme à {{domxref("MediaTrackSupportedConstraints")}} indiquant quelles propriétés de contrainte sont prises en charge sur l'interface {{domxref("MediaStreamTrack")}}. Consultez {{SectionOnPage("/en-US/docs/Web/API/Media_Streams_API", "Capabilities and constraints")}} pour en savoir plus sur les contraintes et comment les utiliser.
+- {{domxref("MediaDevices.getDisplayMedia", "getDisplayMedia()")}}
+  - : Invite l'utilisateur à sélectionner un affichage ou une partie d'un affichage (comme une fenêtre) à capturer en tant que {{domxref("MediaStream")}} à des fins de partage ou d'enregistrement. Renvoie une promesse qui se résout en un `MediaStream`.
+- {{ domxref("MediaDevices.getUserMedia", "getUserMedia()") }}
+  - : Avec l'autorisation de l'utilisateur via une invite, allume une caméra et / ou un microphone sur le système et fournit un {{domxref("MediaStream")}} contenant une piste vidéo et / ou une piste audio avec l'entrée.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush:js">'use strict';
+```js
+'use strict';
 
 // Placez les variables dans la portée globale pour les rendre disponibles à la console du navigateur.
 var video = document.querySelector('video');
@@ -81,42 +78,28 @@ navigator.mediaDevices.getUserMedia(constraints)
 });
 
 function errorMsg(msg, error) {
-  errorElement.innerHTML += '&lt;p&gt;' + msg + '&lt;/p&gt;';
+  errorElement.innerHTML += '<p>' + msg + '</p>';
   if (typeof error !== 'undefined') {
     console.error(error);
   }
-}</pre>
-
-<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('Media Capture', '#mediadevices', 'MediaDevices')}}</td>
-   <td>{{Spec2('Media Capture')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.MediaDevices")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/API/Media_Streams_API">Media Capture et Streams API</a>: l'API dont cette interface fait partie.</li>
- <li><a href="/en-US/docs/Web/API/Screen_Capture_API">API de capture d'écran</a>: L'API définissant la méthode {{domxref("MediaDevices.getDisplayMedia", "getDisplayMedia()")}}.</li>
- <li><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC API</a></li>
- <li>{{domxref("Navigator.mediaDevices")}}: Renvoie une référence à un objet <code>MediaDevices</code> qui peut être utilisé pour accéder aux périphériques.</li>
- <li><a href="https://github.com/chrisjohndigital/CameraCaptureJS">CameraCaptureJS:</a> Capture et lecture vidéo HTML5 à l'aide de <code>MediaDevices</code> et de l'API d'enregistrement MediaStream (<a href="https://github.com/chrisjohndigital/CameraCaptureJS">source sur GitHub</a>)</li>
- <li><a href="https://github.com/chrisjohndigital/OpenLang">OpenLang</a>: Application Web de laboratoire de langage vidéo HTML5 video utilisant <code>MediaDevices</code> et l'API d'enregistrement MediaStream pour l'enregistrement vidéo (<a href="https://github.com/chrisjohndigital/OpenLang">source sur GitHub</a>)</li>
-</ul>
+}
+```
+
+## Spécifications
+
+| Spécification                                                                        | Statut                               | Commentaire         |
+| ------------------------------------------------------------------------------------ | ------------------------------------ | ------------------- |
+| {{SpecName('Media Capture', '#mediadevices', 'MediaDevices')}} | {{Spec2('Media Capture')}} | Définition initiale |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.MediaDevices")}}
+
+## Voir aussi
+
+- [Media Capture et Streams API](/en-US/docs/Web/API/Media_Streams_API): l'API dont cette interface fait partie.
+- [API de capture d'écran](/en-US/docs/Web/API/Screen_Capture_API): L'API définissant la méthode {{domxref("MediaDevices.getDisplayMedia", "getDisplayMedia()")}}.
+- [WebRTC API](/en-US/docs/Web/API/WebRTC_API)
+- {{domxref("Navigator.mediaDevices")}}: Renvoie une référence à un objet `MediaDevices` qui peut être utilisé pour accéder aux périphériques.
+- [CameraCaptureJS:](https://github.com/chrisjohndigital/CameraCaptureJS) Capture et lecture vidéo HTML5 à l'aide de `MediaDevices` et de l'API d'enregistrement MediaStream ([source sur GitHub](https://github.com/chrisjohndigital/CameraCaptureJS))
+- [OpenLang](https://github.com/chrisjohndigital/OpenLang): Application Web de laboratoire de langage vidéo HTML5 video utilisant `MediaDevices` et l'API d'enregistrement MediaStream pour l'enregistrement vidéo ([source sur GitHub](https://github.com/chrisjohndigital/OpenLang))
diff --git a/files/fr/web/api/mediasource/index.md b/files/fr/web/api/mediasource/index.md
index b472be76ed..7deee2011c 100644
--- a/files/fr/web/api/mediasource/index.md
+++ b/files/fr/web/api/mediasource/index.md
@@ -16,79 +16,70 @@ tags:
   - Video
 translation_of: Web/API/MediaSource
 ---
-<p>{{APIRef("Media Source Extensions")}}{{SeeCompatTable}}</p>
+{{APIRef("Media Source Extensions")}}{{SeeCompatTable}}
 
-<p>L'interface <strong><code>MediaSource</code></strong> de l'<a href="/en-US/docs/Web/API/Media_Source_Extensions_API">API Media Source Extensions</a> représente une source de données multimédia pour un objet {{domxref("HTMLMediaElement")}}. Un objet <code>MediaSource</code> peut être attaché à un {{domxref("HTMLMediaElement")}} pour être lu dans l'agent utilisateur.</p>
+L'interface **`MediaSource`** de l'[API Media Source Extensions](/en-US/docs/Web/API/Media_Source_Extensions_API) représente une source de données multimédia pour un objet {{domxref("HTMLMediaElement")}}. Un objet `MediaSource` peut être attaché à un {{domxref("HTMLMediaElement")}} pour être lu dans l'agent utilisateur.
 
-<p>{{InheritanceDiagram}}</p>
+{{InheritanceDiagram}}
 
-<h2 id="Constructeur">Constructeur</h2>
+## Constructeur
 
-<dl>
- <dt>{{domxref("MediaSource.MediaSource", "MediaSource()")}}</dt>
- <dd>Construit et renvoie un nouvel objet <code>MediaSource</code> sans tampon source associé.</dd>
-</dl>
+- {{domxref("MediaSource.MediaSource", "MediaSource()")}}
+  - : Construit et renvoie un nouvel objet `MediaSource` sans tampon source associé.
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<dl>
- <dt>{{domxref("MediaSource.sourceBuffers")}} {{readonlyInline}}</dt>
- <dd>Renvoie un objet {{domxref("SourceBufferList")}} contenant la liste des objets {{domxref("SourceBuffer")}} associés à ce <code>MediaSource</code>.</dd>
- <dt>{{domxref("MediaSource.activeSourceBuffers")}} {{readonlyInline}}</dt>
- <dd>Renvoie un objet {{domxref("SourceBufferList")}} contenant un sous-ensemble des objets {{domxref("SourceBuffer")}} contenus dans {{domxref("MediaSource.sourceBuffers")}} — la liste des objets fournissant la piste vidéo sélectionnée, pistes audio activées et pistes de texte affichées / masquées.</dd>
- <dt>{{domxref("MediaSource.readyState")}} {{readonlyInline}}</dt>
- <dd>Renvoie une énumération représentant l'état de la <code>MediaSource</code> actuelle, qu'elle ne soit pas actuellement attachée à un élément multimédia (<code>fermé</code>), attachée et prête à recevoir des objets {{domxref("SourceBuffer")}} (<code>ouvert</code>), ou attachée mais le flux a été terminé via {{domxref("MediaSource.endOfStream()")}} (<code>terminé</code>).</dd>
- <dt>{{domxref("MediaSource.duration")}}</dt>
- <dd>Obtient et définit la durée du média actuel présenté.</dd>
-</dl>
+- {{domxref("MediaSource.sourceBuffers")}} {{readonlyInline}}
+  - : Renvoie un objet {{domxref("SourceBufferList")}} contenant la liste des objets {{domxref("SourceBuffer")}} associés à ce `MediaSource`.
+- {{domxref("MediaSource.activeSourceBuffers")}} {{readonlyInline}}
+  - : Renvoie un objet {{domxref("SourceBufferList")}} contenant un sous-ensemble des objets {{domxref("SourceBuffer")}} contenus dans {{domxref("MediaSource.sourceBuffers")}} — la liste des objets fournissant la piste vidéo sélectionnée, pistes audio activées et pistes de texte affichées / masquées.
+- {{domxref("MediaSource.readyState")}} {{readonlyInline}}
+  - : Renvoie une énumération représentant l'état de la `MediaSource` actuelle, qu'elle ne soit pas actuellement attachée à un élément multimédia (`fermé`), attachée et prête à recevoir des objets {{domxref("SourceBuffer")}} (`ouvert`), ou attachée mais le flux a été terminé via {{domxref("MediaSource.endOfStream()")}} (`terminé`).
+- {{domxref("MediaSource.duration")}}
+  - : Obtient et définit la durée du média actuel présenté.
 
-<h3 id="Gestionnaires_dévénements">Gestionnaires d'événements</h3>
+### Gestionnaires d'événements
 
-<dl>
- <dt>{{domxref("MediaSource.onsourceclose")}}</dt>
- <dd>Le gestionnaire d'événements pour l'événement <code>sourceclose</code>.</dd>
- <dt>{{domxref("MediaSource.onsourceended")}}</dt>
- <dd>Le gestionnaire d'événements pour l'événement <code>sourceended</code>.</dd>
- <dt>{{domxref("MediaSource.onsourceopen")}}</dt>
- <dd>Le gestionnaire d'événements pour l'événement <code>sourceopen</code>.</dd>
-</dl>
+- {{domxref("MediaSource.onsourceclose")}}
+  - : Le gestionnaire d'événements pour l'événement `sourceclose`.
+- {{domxref("MediaSource.onsourceended")}}
+  - : Le gestionnaire d'événements pour l'événement `sourceended`.
+- {{domxref("MediaSource.onsourceopen")}}
+  - : Le gestionnaire d'événements pour l'événement `sourceopen`.
 
-<h2 id="Méthodes">Méthodes</h2>
+## Méthodes
 
-<p><em>Hérite des méthodes de son interface parente, {{domxref("EventTarget")}}.</em></p>
+_Hérite des méthodes de son interface parente, {{domxref("EventTarget")}}._
 
-<dl>
- <dt>{{domxref("MediaSource.addSourceBuffer()")}}</dt>
- <dd>Crée un nouveau {{domxref ("SourceBuffer")}} du type MIME donné et l'ajoute à la liste {{domxref ("MediaSource.sourceBuffers")}}.</dd>
- <dt>{{domxref("MediaSource.clearLiveSeekableRange()")}}</dt>
- <dd>Efface un ensemble privé de plage de recherche avec un appel à <code>setLiveSeekableRange()</code>.</dd>
- <dt>{{domxref("MediaSource.endOfStream()")}}</dt>
- <dd>Signale la fin du flux.</dd>
- <dt>{{domxref("MediaSource.removeSourceBuffer()")}}</dt>
- <dd>Supprime le {{domxref ("SourceBuffer")}} donné de la liste {{domxref ("MediaSource.sourceBuffers")}}.</dd>
- <dt>{{domxref("MediaSource.setLiveSeekableRange()")}}</dt>
- <dd>Définit la plage que l'utilisateur peut rechercher dans l'élément multimédia.</dd>
-</dl>
+- {{domxref("MediaSource.addSourceBuffer()")}}
+  - : Crée un nouveau {{domxref ("SourceBuffer")}} du type MIME donné et l'ajoute à la liste {{domxref ("MediaSource.sourceBuffers")}}.
+- {{domxref("MediaSource.clearLiveSeekableRange()")}}
+  - : Efface un ensemble privé de plage de recherche avec un appel à `setLiveSeekableRange()`.
+- {{domxref("MediaSource.endOfStream()")}}
+  - : Signale la fin du flux.
+- {{domxref("MediaSource.removeSourceBuffer()")}}
+  - : Supprime le {{domxref ("SourceBuffer")}} donné de la liste {{domxref ("MediaSource.sourceBuffers")}}.
+- {{domxref("MediaSource.setLiveSeekableRange()")}}
+  - : Définit la plage que l'utilisateur peut rechercher dans l'élément multimédia.
 
-<h2 id="Méthodes_statiques">Méthodes statiques</h2>
+## Méthodes statiques
 
-<dl>
- <dt>{{domxref("MediaSource.isTypeSupported()")}}</dt>
- <dd>Renvoie une valeur {{domxref ("Boolean")}} indiquant si le type MIME donné est pris en charge par l'agent utilisateur actuel - c'est-à-dire s'il parvient à créer des objets {{domxref ("SourceBuffer")}} pour ce type MIME .</dd>
-</dl>
+- {{domxref("MediaSource.isTypeSupported()")}}
+  - : Renvoie une valeur {{domxref ("Boolean")}} indiquant si le type MIME donné est pris en charge par l'agent utilisateur actuel - c'est-à-dire s'il parvient à créer des objets {{domxref ("SourceBuffer")}} pour ce type MIME .
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>L'exemple simple suivant charge une vidéo avec {{domxref ("XMLHttpRequest")}} et la lit dès que possible. Cet exemple a été écrit par Nick Desaulniers et peut être <a href="http://nickdesaulniers.github.io/netfix/demo/bufferAll.html">consulté en direct ici</a> (vous pouvez aussi <a href="https://github.com/nickdesaulniers/netfix/blob/gh-pages/demo/bufferAll.html">télécharger la source</a> pour une enquête plus approfondie).</p>
+L'exemple simple suivant charge une vidéo avec {{domxref ("XMLHttpRequest")}} et la lit dès que possible. Cet exemple a été écrit par Nick Desaulniers et peut être [consulté en direct ici](http://nickdesaulniers.github.io/netfix/demo/bufferAll.html) (vous pouvez aussi [télécharger la source](https://github.com/nickdesaulniers/netfix/blob/gh-pages/demo/bufferAll.html) pour une enquête plus approfondie).
 
-<pre class="brush: js">var video = document.querySelector('video');
+```js
+var video = document.querySelector('video');
 
 var assetURL = 'frag_bunny.mp4';
 // Need to be specific for Blink regarding codecs
 // ./mp4info frag_bunny.mp4 | grep Codec
 var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
 
-if ('MediaSource' in window &amp;&amp; MediaSource.isTypeSupported(mimeCodec)) {
+if ('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec)) {
   var mediaSource = new MediaSource();
   //console.log(mediaSource.readyState); // closed
   video.src = URL.createObjectURL(mediaSource);
@@ -120,32 +111,20 @@ function fetchAB (url, cb) {
     cb(xhr.response);
   };
   xhr.send();
-};</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Media Source Extensions', '#mediasource', 'MediaSource')}}</td>
-   <td>{{Spec2('Media Source Extensions')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.MediaSource")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("SourceBuffer")}}</li>
- <li>{{domxref("SourceBufferList")}}</li>
-</ul>
+};
+```
+
+## Spécifications
+
+| Spécification                                                                                | Statut                                           | Commentaire          |
+| -------------------------------------------------------------------------------------------- | ------------------------------------------------ | -------------------- |
+| {{SpecName('Media Source Extensions', '#mediasource', 'MediaSource')}} | {{Spec2('Media Source Extensions')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.MediaSource")}}
+
+## Voir aussi
+
+- {{domxref("SourceBuffer")}}
+- {{domxref("SourceBufferList")}}
diff --git a/files/fr/web/api/mediasource/mediasource/index.md b/files/fr/web/api/mediasource/mediasource/index.md
index dac8c3d8ee..e61a5da0bc 100644
--- a/files/fr/web/api/mediasource/mediasource/index.md
+++ b/files/fr/web/api/mediasource/mediasource/index.md
@@ -3,30 +3,33 @@ title: MediaSource.MediaSource()
 slug: Web/API/MediaSource/MediaSource
 translation_of: Web/API/MediaSource/MediaSource
 ---
-<div>{{APIRef("Media Source Extensions")}}{{SeeCompatTable}}</div>
+{{APIRef("Media Source Extensions")}}{{SeeCompatTable}}
 
-<p>Le constructeur <code><strong>MediaSource()</strong></code> de l'interface {{domxref("MediaSource")}} construit et retourne un nouvel object <code>MediaSource</code> sans buffer associé</p>
+Le constructeur **`MediaSource()`** de l'interface {{domxref("MediaSource")}} construit et retourne un nouvel object `MediaSource` sans buffer associé
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">var mediaSource = new MediaSource();</pre>
+```js
+var mediaSource = new MediaSource();
+```
 
-<h3 id="Paramèteres">Paramèteres</h3>
+### Paramèteres
 
-<p>Aucun.</p>
+Aucun.
 
-<h2 id="Example">Example</h2>
+## Example
 
-<p>Le fragement de code suivant est tiré d'un exemple simple écrit par par Nick Desaulniers (<a href="http://nickdesaulniers.github.io/netfix/demo/bufferAll.html">voir la démonstration complète</a>, ou <a href="https://github.com/nickdesaulniers/netfix/blob/gh-pages/demo/bufferAll.html">télécharger les sources</a> pour une meilleure compréhention.)</p>
+Le fragement de code suivant est tiré d'un exemple simple écrit par par Nick Desaulniers ([voir la démonstration complète](http://nickdesaulniers.github.io/netfix/demo/bufferAll.html), ou [télécharger les sources](https://github.com/nickdesaulniers/netfix/blob/gh-pages/demo/bufferAll.html) pour une meilleure compréhention.)
 
-<pre class="brush: js">var video = document.querySelector('video');
+```js
+var video = document.querySelector('video');
 
 var assetURL = 'frag_bunny.mp4';
 // A besoin d'être spécifique, Blink (moteur de rendu Chrome) demande le codec
 // ./mp4info frag_bunny.mp4 | grep Codec
 var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
 
-if ('MediaSource' in window &amp;&amp; MediaSource.isTypeSupported(mimeCodec)) {
+if ('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec)) {
   var mediaSource = new MediaSource;
   //console.log(mediaSource.readyState); // "closed"
   video.src = URL.createObjectURL(mediaSource);
@@ -36,19 +39,13 @@ if ('MediaSource' in window &amp;&amp; MediaSource.isTypeSupported(mimeCodec)) {
 }
 
 ...
-</pre>
+```
 
-<h2 id="Compatibilitée_des_navigateurs">Compatibilitée des navigateurs</h2>
+## Compatibilitée des navigateurs
 
-<div>
+{{Compat("api.MediaSource.MediaSource")}}
 
+## Voir aussi
 
-<p>{{Compat("api.MediaSource.MediaSource")}}</p>
-</div>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("SourceBuffer")}}</li>
- <li>{{domxref("SourceBufferList")}}</li>
-</ul>
+- {{domxref("SourceBuffer")}}
+- {{domxref("SourceBufferList")}}
diff --git a/files/fr/web/api/mediastream/index.md b/files/fr/web/api/mediastream/index.md
index 292cb700e0..6ace6ed154 100644
--- a/files/fr/web/api/mediastream/index.md
+++ b/files/fr/web/api/mediastream/index.md
@@ -3,74 +3,55 @@ title: MediaStream
 slug: Web/API/MediaStream
 translation_of: Web/API/MediaStream
 ---
-<div>{{APIRef("Media Capture and Streams")}} {{SeeCompatTable}}</div>
+{{APIRef("Media Capture and Streams")}} {{SeeCompatTable}}
 
-<p>L'interface <code>MediaStream</code> représente le contenu d'un flux de média. Un flux est composé de plusieurs <em>pistes</em>, tel que des pistes vidéos ou audio.</p>
+L'interface `MediaStream` représente le contenu d'un flux de média. Un flux est composé de plusieurs *pistes*, tel que des pistes vidéos ou audio.
 
-<h2 id="Attributs">Attributs</h2>
+## Attributs
 
-<dl>
- <dt>{{domxref("MediaStream.id")}} {{readonlyInline}}</dt>
- <dd>{{domxref("DOMString")}} contenant 36 carractères correspondant à l'identifiant unique (GUID) de l'objet.</dd>
- <dt>{{domxref("MediaStream.ended")}} {{readonlyInline}}</dt>
- <dd>Booléen dont la valeur est <code>true</code> si l'évènement {{event("ended (MediaStream)", "ended")}} à été déclenché sur l'objet, signifiant que le flux à été complètement lu, ou <code>false</code> si la fin du flux n'à pas été atteinte.</dd>
-</dl>
+- {{domxref("MediaStream.id")}} {{readonlyInline}}
+  - : {{domxref("DOMString")}} contenant 36 carractères correspondant à l'identifiant unique (GUID) de l'objet.
+- {{domxref("MediaStream.ended")}} {{readonlyInline}}
+  - : Booléen dont la valeur est `true` si l'évènement {{event("ended (MediaStream)", "ended")}} à été déclenché sur l'objet, signifiant que le flux à été complètement lu, ou `false` si la fin du flux n'à pas été atteinte.
 
-<h3 id="Gestionnaire_d'évènements">Gestionnaire d'évènements</h3>
+### Gestionnaire d'évènements
 
-<dl>
- <dt>{{domxref("MediaStream.onaddtrack")}}</dt>
- <dd>Est un {{event("Event_handlers", "event handler")}} contenant l'action à exécuter lorsqu'un évènement {{event("addtrack")}} est déclenché sur l'objet, ce qui arrive lorsqu'un nouvel objet {{domxref("MediaStreamTrack")}} est ajouté.</dd>
- <dt>{{domxref("MediaStream.onended")}}</dt>
- <dd>Est un  {{event("Event_handlers", "event handler")}} contenant l'action à exécuter lorsqu'un évènement {{event("ended (MediaStream)","ended")}} est déclenché sur l'objet, ce qui arrive lorsque la diffusion est terminée.</dd>
- <dt>{{domxref("MediaStream.onremovetrack")}}</dt>
- <dd>Est un {{event("Event_handlers", "event handler")}} contenant l'action à exécuter lorsqu'un évènement {{event("removetrack")}} est délenché sur l'objet, ce qui arrive quand un objet  {{domxref("MediaStreamTrack")}} est retiré.</dd>
-</dl>
+- {{domxref("MediaStream.onaddtrack")}}
+  - : Est un {{event("Event_handlers", "event handler")}} contenant l'action à exécuter lorsqu'un évènement {{event("addtrack")}} est déclenché sur l'objet, ce qui arrive lorsqu'un nouvel objet {{domxref("MediaStreamTrack")}} est ajouté.
+- {{domxref("MediaStream.onended")}}
+  - : Est un  {{event("Event_handlers", "event handler")}} contenant l'action à exécuter lorsqu'un évènement {{event("ended (MediaStream)","ended")}} est déclenché sur l'objet, ce qui arrive lorsque la diffusion est terminée.
+- {{domxref("MediaStream.onremovetrack")}}
+  - : Est un {{event("Event_handlers", "event handler")}} contenant l'action à exécuter lorsqu'un évènement {{event("removetrack")}} est délenché sur l'objet, ce qui arrive quand un objet  {{domxref("MediaStreamTrack")}} est retiré.
 
-<h2 id="Méthodes">Méthodes</h2>
+## Méthodes
 
-<dl>
- <dt>{{domxref("MediaStream.getTrackById()")}}</dt>
- <dd>Retourne la piste dont l'ID correspond à celui passé en paramètre, <code>trackid</code>. Si aucun paramètre n'est fourni, ou si aucune piste avec cet id existe, la fonction retourne <code>null</code>. Si plusieurs pistes ont le même id, elle retourne la première piste.</dd>
-</dl>
+- {{domxref("MediaStream.getTrackById()")}}
+  - : Retourne la piste dont l'ID correspond à celui passé en paramètre, `trackid`. Si aucun paramètre n'est fourni, ou si aucune piste avec cet id existe, la fonction retourne `null`. Si plusieurs pistes ont le même id, elle retourne la première piste.
 
-<dl>
- <dt>{{domxref("MediaStream.addTrack()")}}</dt>
- <dd>Stocke une copie de {{domxref("MediaStreamTrack")}} fourni en paramètre. Si la piste à déjà été ajouté à l'objet <code>MediaStream</code>, rien ne se passe; si la piste est au statut <code>finished</code>, c'est à dire qu'elle est terminée, l'exception <code>INVALID_STATE_RAISE</code> est levée.</dd>
- <dt>{{domxref("MediaStream.removeTrack()")}}</dt>
- <dd>Retire le the {{domxref("MediaStreamTrack")}} fourni comme argument. Si la piste ne fait pas parti du <code>MediaStream</code>, rien ne se passe; Si la piste est au statut <code>finished</code>, ce qui arrive lorsqu'elle est terminée, l'exception <code>INVALID_STATE_RAISE</code> est levée.</dd>
- <dt>{{domxref("MediaStream.getAudioTracks()")}}</dt>
- <dd>Retourne la liste des {{domxref("MediaStreamTrack")}} stockés dans l'objet <code>MediaStream</code> qui ont leur attribut <code>kind</code> défini à <code>"audio"</code>. L'ordre n'est pas défini, et peut varier d'un navigateur à l'autre, mais aussi d'un appel de la méthode à l'autre.</dd>
- <dt>{{domxref("MediaStream.getVideoTracks()")}}</dt>
- <dd>Retourne une liste des {{domxref("MediaStreamTrack")}} stockés dans l'objet <code>MediaStream</code> qui ont leur attribut <code>kind</code> défini à <code>"video"</code>. L'ordre n'est pas défini, et peut varier d'un navigateur à l'autre, mais aussi d'un appel de la méthode à l'autre.</dd>
-</dl>
+<!---->
 
-<h2 id="Spécifications">Spécifications</h2>
+- {{domxref("MediaStream.addTrack()")}}
+  - : Stocke une copie de {{domxref("MediaStreamTrack")}} fourni en paramètre. Si la piste à déjà été ajouté à l'objet `MediaStream`, rien ne se passe; si la piste est au statut `finished`, c'est à dire qu'elle est terminée, l'exception `INVALID_STATE_RAISE` est levée.
+- {{domxref("MediaStream.removeTrack()")}}
+  - : Retire le the {{domxref("MediaStreamTrack")}} fourni comme argument. Si la piste ne fait pas parti du `MediaStream`, rien ne se passe; Si la piste est au statut `finished`, ce qui arrive lorsqu'elle est terminée, l'exception `INVALID_STATE_RAISE` est levée.
+- {{domxref("MediaStream.getAudioTracks()")}}
+  - : Retourne la liste des {{domxref("MediaStreamTrack")}} stockés dans l'objet `MediaStream` qui ont leur attribut `kind` défini à `"audio"`. L'ordre n'est pas défini, et peut varier d'un navigateur à l'autre, mais aussi d'un appel de la méthode à l'autre.
+- {{domxref("MediaStream.getVideoTracks()")}}
+  - : Retourne une liste des {{domxref("MediaStreamTrack")}} stockés dans l'objet `MediaStream` qui ont leur attribut `kind` défini à `"video"`. L'ordre n'est pas défini, et peut varier d'un navigateur à l'autre, mais aussi d'un appel de la méthode à l'autre.
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Media Capture', '#mediastream', 'MediaStream')}}</td>
-   <td>{{Spec2('Media Capture')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+| Spécification                                                                    | Statut                               | Commentaire |
+| -------------------------------------------------------------------------------- | ------------------------------------ | ----------- |
+| {{SpecName('Media Capture', '#mediastream', 'MediaStream')}} | {{Spec2('Media Capture')}} |             |
 
-<p>{{Compat("api.MediaStream")}}</p>
+## Compatibilité des navigateurs
 
-<h2 id="See_also">Voir aussi</h2>
+{{Compat("api.MediaStream")}}
 
-<ul>
-  <li>Utilisation de l'API MediaStream</li>
-  <li><a href="/fr/docs/Web/API/WebRTC_API">WebRTC API</a></li>
-  <li><a href="/fr/docs/Web/API/Web_Audio_API">Web Audio API</a></li>
-  <li>{{domxref("MediaStreamTrack")}}</li>
-</ul>
+## Voir aussi
+
+- Utilisation de l'API MediaStream
+- [WebRTC API](/fr/docs/Web/API/WebRTC_API)
+- [Web Audio API](/fr/docs/Web/API/Web_Audio_API)
+- {{domxref("MediaStreamTrack")}}
diff --git a/files/fr/web/api/mediastreamaudiosourcenode/index.md b/files/fr/web/api/mediastreamaudiosourcenode/index.md
index d75b8b8f43..16243531c3 100644
--- a/files/fr/web/api/mediastreamaudiosourcenode/index.md
+++ b/files/fr/web/api/mediastreamaudiosourcenode/index.md
@@ -9,77 +9,64 @@ tags:
   - Web Audio API
 translation_of: Web/API/MediaStreamAudioSourceNode
 ---
-<p>{{APIRef("Web Audio API")}}</p>
+{{APIRef("Web Audio API")}}
 
-<div>
-<p>L'interface <code>MediaStreamAudioSourceNode</code> représente une source audio <a href="/fr/docs/Web/API/WebRTC_API">WebRTC</a> {{domxref("MediaStream")}} (comme une webcam ou un micro). C'est un {{domxref("AudioNode")}} qui agit comme une source audio.</p>
-</div>
+L'interface `MediaStreamAudioSourceNode` représente une source audio [WebRTC](/fr/docs/Web/API/WebRTC_API) {{domxref("MediaStream")}} (comme une webcam ou un micro). C'est un {{domxref("AudioNode")}} qui agit comme une source audio.
 
-<p>Un <code>MediaElementSourceNode</code> n'a pas d'entrée et une seule sortie. On le créé en utilisant la méthode {{domxref("AudioContext.createMediaStreamSource")}}. Le nombre de canaux de sortie est égal au nombre de canaux de {{domxref("AudioMediaStreamTrack")}}. S'il n'y a pas de media stream valide, alors la sortie sera constituée d'un seul canal silencieux.</p>
+Un `MediaElementSourceNode` n'a pas d'entrée et une seule sortie. On le créé en utilisant la méthode {{domxref("AudioContext.createMediaStreamSource")}}. Le nombre de canaux de sortie est égal au nombre de canaux de {{domxref("AudioMediaStreamTrack")}}. S'il n'y a pas de media stream valide, alors la sortie sera constituée d'un seul canal silencieux.
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row">Nombre d'entrées</th>
-   <td><code>0</code></td>
-  </tr>
-  <tr>
-   <th scope="row">Nombre de sorties</th>
-   <td><code>1</code></td>
-  </tr>
-  <tr>
-   <th scope="row">Nombre de canaux</th>
-   <td>Défini par {{domxref("AudioMediaStreamTrack")}} et passé à la méthode {{domxref("AudioContext.createMediaStreamSource")}} qui le créé.</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Nombre d'entrées</th>
+      <td><code>0</code></td>
+    </tr>
+    <tr>
+      <th scope="row">Nombre de sorties</th>
+      <td><code>1</code></td>
+    </tr>
+    <tr>
+      <th scope="row">Nombre de canaux</th>
+      <td>
+        Défini par {{domxref("AudioMediaStreamTrack")}} et passé à
+        la méthode
+        {{domxref("AudioContext.createMediaStreamSource")}} qui
+        le créé.
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Constructeur">Constructeur</h2>
+## Constructeur
 
-<dl>
- <dt>{{domxref("MediaStreamAudioSourceNode.MediaStreamAudioSourceNode()")}}</dt>
- <dd>Créé une nouvelle instance de <code>MediaStreamAudioSourceNode</code>.</dd>
-</dl>
+- {{domxref("MediaStreamAudioSourceNode.MediaStreamAudioSourceNode()")}}
+  - : Créé une nouvelle instance de `MediaStreamAudioSourceNode`.
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<p><em>Hérite des propriétés de son parent, </em><em>{{domxref("AudioNode")}}</em>.</p>
+_Hérite des propriétés de son parent,_ _{{domxref("AudioNode")}}_.
 
-<h2 id="Méthodes">Méthodes</h2>
+## Méthodes
 
-<p><em>Hérite des méthdoes de son parent, </em><em>{{domxref("AudioNode")}}</em>.</p>
+_Hérite des méthdoes de son parent,_ _{{domxref("AudioNode")}}_.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>{{page("/fr-FR/docs/Web/API/AudioContext.createMediaStreamSource","Example")}}</p>
+{{page("/fr-FR/docs/Web/API/AudioContext.createMediaStreamSource","Example")}}
 
-<h2 id="Specifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Web Audio API', '#the-mediastreamaudiosourcenode-interface', 'MediaStreamAudioSourceNode')}}</td>
-   <td>{{Spec2('Web Audio API')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                                | Statut                               | Commentaire |
+| -------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- |
+| {{SpecName('Web Audio API', '#the-mediastreamaudiosourcenode-interface', 'MediaStreamAudioSourceNode')}} | {{Spec2('Web Audio API')}} |             |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.MediaStreamAudioSourceNode")}}</p>
+{{Compat("api.MediaStreamAudioSourceNode")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utilisation de l'API Web Audio</a></li>
-  <li><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC API</a></li>
-  <li><a href="/en-US/docs/Web/API/Media_Streams_API">API de capture et de diffusion de médias (Media Streams)</a></li>
-  <li>{{domxref("MediaStreamTrackAudioSourceNode")}}</li>
- </ul>
- 
+- [Utilisation de l'API Web Audio](/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API)
+- [WebRTC API](/en-US/docs/Web/API/WebRTC_API)
+- [API de capture et de diffusion de médias (Media Streams)](/en-US/docs/Web/API/Media_Streams_API)
+- {{domxref("MediaStreamTrackAudioSourceNode")}}
diff --git a/files/fr/web/api/mediastreamevent/index.md b/files/fr/web/api/mediastreamevent/index.md
index 1f9eeb32ec..cf518b9dea 100644
--- a/files/fr/web/api/mediastreamevent/index.md
+++ b/files/fr/web/api/mediastreamevent/index.md
@@ -11,44 +11,39 @@ tags:
   - WebRTC
 translation_of: Web/API/MediaStreamEvent
 ---
-<p>{{APIRef("WebRTC")}}{{deprecated_header}}</p>
+{{APIRef("WebRTC")}}{{deprecated_header}}
 
-<p>L'interface <strong><code>MediaStreamEvent</code></strong> représente les événements qui se produisent en relation avec un {{domxref("MediaStream")}}. Deux événements de ce type peuvent être lancés: {{event("addstream")}} et {{event("removestream")}}.</p>
+L'interface **`MediaStreamEvent`** représente les événements qui se produisent en relation avec un {{domxref("MediaStream")}}. Deux événements de ce type peuvent être lancés: {{event("addstream")}} et {{event("removestream")}}.
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<p><em>Un {{domxref("MediaStreamEvent")}} étant un {{domxref("Event")}}, cet événement implémente également ces propriétés</em>.</p>
+_Un {{domxref("MediaStreamEvent")}} étant un {{domxref("Event")}}, cet événement implémente également ces propriétés_.
 
-<dl>
- <dt>{{domxref("MediaStreamEvent.stream")}} {{readOnlyInline}}</dt>
- <dd>Contient le {{domxref("MediaStream")}} contenant le flux associé à l'événement.</dd>
-</dl>
+- {{domxref("MediaStreamEvent.stream")}} {{readOnlyInline}}
+  - : Contient le {{domxref("MediaStream")}} contenant le flux associé à l'événement.
 
-<h2 id="Constructeurs">Constructeurs</h2>
+## Constructeurs
 
-<dl>
- <dt>{{domxref("MediaStreamEvent.MediaStreamEvent()", "MediaStreamEvent()")}}</dt>
- <dd>Renvoie un nouveau <code>MediaStreamEvent</code>. Il prend deux paramètres, le premier étant un {{domxref("DOMString")}} représentant le type de l'événement; le second un dictionnaire contenant le {{domxref("MediaStream")}} auquel il se réfère.</dd>
-</dl>
+- {{domxref("MediaStreamEvent.MediaStreamEvent()", "MediaStreamEvent()")}}
+  - : Renvoie un nouveau `MediaStreamEvent`. Il prend deux paramètres, le premier étant un {{domxref("DOMString")}} représentant le type de l'événement; le second un dictionnaire contenant le {{domxref("MediaStream")}} auquel il se réfère.
 
-<h2 id="Méthodes">Méthodes</h2>
+## Méthodes
 
-<p><em>Un {{domxref("MediaStreamEvent")}} étant un {{domxref("Event")}}, cet événement implémente également ces propriétés</em>.  <em>Il n'y a pas de méthode <em>{{domxref("MediaStreamEvent")}}</em> spécifique.</em></p>
+_Un {{domxref("MediaStreamEvent")}} étant un {{domxref("Event")}}, cet événement implémente également ces propriétés_.  _Il n'y a pas de méthode _{{domxref("MediaStreamEvent")}}_ spécifique._
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: js">pc.onaddstream = function( ev ) {
+```js
+pc.onaddstream = function( ev ) {
   alert("Un stream (id: '" + ev.stream.id + "') a été ajouté à cette connexion.");
 };
-</pre>
+```
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.MediaStreamEvent")}}</p>
+{{Compat("api.MediaStreamEvent")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/API/WebRTC_API">WebRTC</a></li>
- <li>Sa cible habituelle: {{domxref("RTCPeerConnection")}}.</li>
-</ul>
+- [WebRTC](/fr/docs/Web/API/WebRTC_API)
+- Sa cible habituelle: {{domxref("RTCPeerConnection")}}.
diff --git a/files/fr/web/api/mediatrackconstraints/index.md b/files/fr/web/api/mediatrackconstraints/index.md
index f0991f5277..4ddca8eb4f 100644
--- a/files/fr/web/api/mediatrackconstraints/index.md
+++ b/files/fr/web/api/mediatrackconstraints/index.md
@@ -15,49 +15,34 @@ tags:
 translation_of: Web/API/DoubleRange
 original_slug: Web/API/DoubleRange
 ---
-<div>{{APIRef("Media Capture and Streams")}}</div>
-
-<p>Le dictionnaire <strong><code>DoubleRange</code></strong> est utilisé pour définir une plage de valeurs à virgule flottante double précision autorisées pour une propriété, avec l'une ou les deux valeurs maximale et minimale spécifiées. Le dictionnaire {{domxref("ConstrainDouble")}} est basé sur cela, en l'augmentant pour prendre également en charge les valeurs exactes et idéales.</p>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<dl>
- <dt><code>max</code></dt>
- <dd>Une valeur à virgule flottante spécifiant la plus grande valeur autorisée de la propriété qu'elle décrit.</dd>
- <dt><code>min</code></dt>
- <dd>Une valeur à virgule flottante spécifiant la plus petit valeur autorisée de la propriété qu'elle décrit.</dd>
-</dl>
-
-<p>Les valeurs <code>min</code> et/ou <code>max</code> spécifiées sont obligatoires. Si aucune correspondance ne peut être trouvée dans la plage donnée, une erreur se produit.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Media Capture', '#dom-doublerange', 'DoubleRange')}}</td>
-   <td>{{Spec2('Media Capture')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.DoubleRange")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/API/Media_Streams_API">API de capture multimédia et de flux</a></li>
- <li><a href="/en-US/docs/Web/API/Media_Streams_API/Constraints">Capacités, contraintes et paramètres</a></li>
- <li>{{domxref("ConstrainDoubleRange")}}</li>
- <li>{{domxref("MediaTrackConstraints")}}</li>
- <li>{{domxref("MediaTrackCapabilities")}}</li>
- <li>{{domxref("MediaTrackSupportedConstraints")}}</li>
-</ul>
+{{APIRef("Media Capture and Streams")}}
+
+Le dictionnaire **`DoubleRange`** est utilisé pour définir une plage de valeurs à virgule flottante double précision autorisées pour une propriété, avec l'une ou les deux valeurs maximale et minimale spécifiées. Le dictionnaire {{domxref("ConstrainDouble")}} est basé sur cela, en l'augmentant pour prendre également en charge les valeurs exactes et idéales.
+
+## Propriétés
+
+- `max`
+  - : Une valeur à virgule flottante spécifiant la plus grande valeur autorisée de la propriété qu'elle décrit.
+- `min`
+  - : Une valeur à virgule flottante spécifiant la plus petit valeur autorisée de la propriété qu'elle décrit.
+
+Les valeurs `min` et/ou `max` spécifiées sont obligatoires. Si aucune correspondance ne peut être trouvée dans la plage donnée, une erreur se produit.
+
+## Spécifications
+
+| Spécification                                                                        | Statut                               | Commentaire         |
+| ------------------------------------------------------------------------------------ | ------------------------------------ | ------------------- |
+| {{SpecName('Media Capture', '#dom-doublerange', 'DoubleRange')}} | {{Spec2('Media Capture')}} | Définition initiale |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.DoubleRange")}}
+
+## Voir aussi
+
+- [API de capture multimédia et de flux](/en-US/docs/Web/API/Media_Streams_API)
+- [Capacités, contraintes et paramètres](/en-US/docs/Web/API/Media_Streams_API/Constraints)
+- {{domxref("ConstrainDoubleRange")}}
+- {{domxref("MediaTrackConstraints")}}
+- {{domxref("MediaTrackCapabilities")}}
+- {{domxref("MediaTrackSupportedConstraints")}}
diff --git a/files/fr/web/api/messageevent/index.md b/files/fr/web/api/messageevent/index.md
index 473489039a..2d975b87cc 100644
--- a/files/fr/web/api/messageevent/index.md
+++ b/files/fr/web/api/messageevent/index.md
@@ -12,76 +12,73 @@ tags:
   - messaging
 translation_of: Web/API/MessageEvent
 ---
-<div>{{APIRef("HTML DOM")}}</div>
+{{APIRef("HTML DOM")}}
 
-<p>L'interface <code><strong>MessageEvent</strong></code> représente un message reçu par un objet cible.</p>
+L'interface **`MessageEvent`** représente un message reçu par un objet cible.
 
-<p>Il est utilisé pour représenter les messages en :</p>
+Il est utilisé pour représenter les messages en :
 
-<ul>
-  <li><a href="/fr/docs/Web/API/Server-sent_events">Événements envoyés par le serveur</a> (voir {{domxref("EventSource.onmessage")}}).</li>
-  <li><a href="/fr/docs/Web/API/WebSockets_API">Sockets Web</a> (voir la propriété <code>onmessage</code> de l'interface <a href="/fr/docs/Web/API/WebSocket">WebSocket</a>).</li>
-  <li>Messagerie inter-documents (voir {{domxref("Window.postMessage()")}} et {{domxref("Window.onmessage")}}).</li>
-  <li><a href="/fr/docs/Web/API/Channel_Messaging_API">Messagerie de canal</a> (voir {{domxref("MessagePort.postMessage()")}} et {{domxref("MessagePort.onmessage")}}).</li>
-  <li>Messagerie inter-worker/document (voir les deux entrées ci-dessus, mais aussi {{domxref("Worker.postMessage()")}}, {{domxref("Worker.onmessage")}}, {{domxref("ServiceWorkerGlobalScope.onmessage")}}, etc.)</li>
-  <li><a href="/fr/docs/Web/API/Broadcast_Channel_API">Canaux de diffusion</a> (voir {{domxref("Broadcastchannel.postMessage()")}}) et {{domxref("BroadcastChannel.onmessage")}}).</li>
-  <li>Les canaux de données WebRTC (voir {{domxref("RTCDataChannel.onmessage")}}).</li>
-</ul>
+- [Événements envoyés par le serveur](/fr/docs/Web/API/Server-sent_events) (voir {{domxref("EventSource.onmessage")}}).
+- [Sockets Web](/fr/docs/Web/API/WebSockets_API) (voir la propriété `onmessage` de l'interface [WebSocket](/fr/docs/Web/API/WebSocket)).
+- Messagerie inter-documents (voir {{domxref("Window.postMessage()")}} et {{domxref("Window.onmessage")}}).
+- [Messagerie de canal](/fr/docs/Web/API/Channel_Messaging_API) (voir {{domxref("MessagePort.postMessage()")}} et {{domxref("MessagePort.onmessage")}}).
+- Messagerie inter-worker/document (voir les deux entrées ci-dessus, mais aussi {{domxref("Worker.postMessage()")}}, {{domxref("Worker.onmessage")}}, {{domxref("ServiceWorkerGlobalScope.onmessage")}}, etc.)
+- [Canaux de diffusion](/fr/docs/Web/API/Broadcast_Channel_API) (voir {{domxref("Broadcastchannel.postMessage()")}}) et {{domxref("BroadcastChannel.onmessage")}}).
+- Les canaux de données WebRTC (voir {{domxref("RTCDataChannel.onmessage")}}).
 
-<p>L'action déclenchée par cet événement est définie dans une fonction définie comme gestionnaire d'événement pour l'événement {{event("message")}} correspondant (par exemple, en utilisant un gestionnaire <code>onmessage</code> comme indiqué ci-dessus).</p>
+L'action déclenchée par cet événement est définie dans une fonction définie comme gestionnaire d'événement pour l'événement {{event("message")}} correspondant (par exemple, en utilisant un gestionnaire `onmessage` comme indiqué ci-dessus).
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<p>{{InheritanceDiagram(600, 80)}}</p>
+{{InheritanceDiagram(600, 80)}}
 
-<h2 id="Constructor">Constructeur</h2>
+## Constructeur
 
-<dl>
-  <dt>{{domxref("MessageEvent.MessageEvent", "MessageEvent()")}}</dt>
-  <dd>Crée un nouveau <code>MessageEvent</code>.</dd>
-</dl>
+- {{domxref("MessageEvent.MessageEvent", "MessageEvent()")}}
+  - : Crée un nouveau `MessageEvent`.
 
-<h2 id="Properties">Propriétés</h2>
+## Propriétés
 
-<p><em>Cette interface hérite également des propriétés de son parent, {{domxref("Event")}}.</em></p>
+_Cette interface hérite également des propriétés de son parent, {{domxref("Event")}}._
 
-<dl>
-  <dt>{{domxref("MessageEvent.data")}} {{readonlyInline}}</dt>
-  <dd>Les données envoyées par l'émetteur du message.</dd>
-  <dt>{{domxref("MessageEvent.origin")}} {{readonlyInline}}</dt>
-  <dd>Une chaîne de caractères {{domxref("USVString")}} représentant l'origine de l'émetteur du message.</dd>
-  <dt>{{domxref("MessageEvent.lastEventId")}} {{readonlyInline}}</dt>
-  <dd>Une chaîne de caractères {{domxref("DOMString")}} représentant un identifiant unique pour l'événement.</dd>
-  <dt>{{domxref("MessageEvent.source")}} {{readonlyInline}}</dt>
-  <dd>Un <code>MessageEventSource</code> (qui peut être un objet {{domxref("WindowProxy")}}, {{domxref("MessagePort")}}, ou {{domxref("ServiceWorker")}}) représentant l'émetteur du message.</dd>
-  <dt>{{domxref("MessageEvent.ports")}} {{readonlyInline}}</dt>
-  <dd>Un tableau d'objets {{domxref("MessagePort")}} représentant les ports associés au canal par lequel le message est envoyé (le cas échéant, par exemple dans la messagerie de canal ou lors de l'envoi d'un message à un travailleur partagé).</dd>
-</dl>
+- {{domxref("MessageEvent.data")}} {{readonlyInline}}
+  - : Les données envoyées par l'émetteur du message.
+- {{domxref("MessageEvent.origin")}} {{readonlyInline}}
+  - : Une chaîne de caractères {{domxref("USVString")}} représentant l'origine de l'émetteur du message.
+- {{domxref("MessageEvent.lastEventId")}} {{readonlyInline}}
+  - : Une chaîne de caractères {{domxref("DOMString")}} représentant un identifiant unique pour l'événement.
+- {{domxref("MessageEvent.source")}} {{readonlyInline}}
+  - : Un `MessageEventSource` (qui peut être un objet {{domxref("WindowProxy")}}, {{domxref("MessagePort")}}, ou {{domxref("ServiceWorker")}}) représentant l'émetteur du message.
+- {{domxref("MessageEvent.ports")}} {{readonlyInline}}
+  - : Un tableau d'objets {{domxref("MessagePort")}} représentant les ports associés au canal par lequel le message est envoyé (le cas échéant, par exemple dans la messagerie de canal ou lors de l'envoi d'un message à un travailleur partagé).
 
-<h2 id="Methods">Méthodes</h2>
+## Méthodes
 
-<p><em>Cette interface hérite également des méthodes de son parent, {{domxref("Event")}}.</em></p>
+_Cette interface hérite également des méthodes de son parent, {{domxref("Event")}}._
 
-<dl>
-  <dt>{{domxref("MessageEvent.initMessageEvent","initMessageEvent()")}} {{deprecated_inline}}</dt>
-  <dd>Initialise un événement de message. <strong>Ne plus utiliser ceci - utilisez le constructeur {{domxref("MessageEvent.MessageEvent", "MessageEvent()")}} à la place.</strong></dd>
-</dl>
+- {{domxref("MessageEvent.initMessageEvent","initMessageEvent()")}} {{deprecated_inline}}
+  - : Initialise un événement de message. **Ne plus utiliser ceci - utilisez le constructeur {{domxref("MessageEvent.MessageEvent", "MessageEvent()")}} à la place.**
 
-<h2 id="Examples">Exemples</h2>
+## Exemples
 
-<p>Dans notre exemple de <a href="https://github.com/mdn/simple-shared-worker">travailleur partagé basique</a> (<a href="https://mdn.github.io/simple-shared-worker/">exécuter le travailleur partagé</a>), nous avons deux pages HTML, dont chacune utilise un peu de JavaScript pour effectuer un calcul simple. Les différents scripts utilisent le même fichier worker pour effectuer le calcul - ils peuvent tous deux y accéder, même si leurs pages s'exécutent dans des fenêtres différentes.</p>
+Dans notre exemple de [travailleur partagé basique](https://github.com/mdn/simple-shared-worker) ([exécuter le travailleur partagé](https://mdn.github.io/simple-shared-worker/)), nous avons deux pages HTML, dont chacune utilise un peu de JavaScript pour effectuer un calcul simple. Les différents scripts utilisent le même fichier worker pour effectuer le calcul - ils peuvent tous deux y accéder, même si leurs pages s'exécutent dans des fenêtres différentes.
 
-<p>L'extrait de code suivant montre la création d'un objet {{domxref("SharedWorker")}} à l'aide du constructeur {{domxref("SharedWorker.SharedWorker", "SharedWorker()")}}. Les deux scripts contiennent ceci :</p>
+L'extrait de code suivant montre la création d'un objet {{domxref("SharedWorker")}} à l'aide du constructeur {{domxref("SharedWorker.SharedWorker", "SharedWorker()")}}. Les deux scripts contiennent ceci :
 
-<pre class="brush: js">var myWorker = new SharedWorker('worker.js');</pre>
+```js
+var myWorker = new SharedWorker('worker.js');
+```
 
-<p>Les deux scripts accèdent ensuite au worker par le biais d'un objet {{domxref("MessagePort")}} créé à l'aide de la propriété {{domxref("SharedWorker.port")}}. Si l'événement onmessage est attaché à l'aide de addEventListener, le port est démarré manuellement à l'aide de sa méthode <code>start()</code> :</p>
+Les deux scripts accèdent ensuite au worker par le biais d'un objet {{domxref("MessagePort")}} créé à l'aide de la propriété {{domxref("SharedWorker.port")}}. Si l'événement onmessage est attaché à l'aide de addEventListener, le port est démarré manuellement à l'aide de sa méthode `start()` :
 
-<pre class="brush: js">myWorker.port.start();</pre>
+```js
+myWorker.port.start();
+```
 
-<p>Lorsque le port est démarré, les deux scripts postent des messages au worker et traitent les messages envoyés par celui-ci en utilisant respectivement <code>port.postMessage()</code> et <code>port.onmessage</code> :</p>
+Lorsque le port est démarré, les deux scripts postent des messages au worker et traitent les messages envoyés par celui-ci en utilisant respectivement `port.postMessage()` et `port.onmessage` :
 
-<pre class="brush: js">first.onchange = function() {
+```js
+first.onchange = function() {
   myWorker.port.postMessage([first.value,second.value]);
   console.log('Message posté au worker');
 }
@@ -94,11 +91,13 @@ second.onchange = function() {
 myWorker.port.onmessage = function(e) {
   result1.textContent = e.data;
   console.log('Message reçu du worker');
-}</pre>
+}
+```
 
-<p>À l'intérieur du worker, nous utilisons le gestionnaire {{domxref("SharedWorkerGlobalScope.onconnect")}} pour nous connecter au même port que celui mentionné ci-dessus. Les ports associés à ce worker sont accessibles dans la propriété <code>ports</code> de l'événement {{event("connect")}} - nous utilisons ensuite {{domxref("MessagePort")}} La méthode <code>start()</code> pour démarrer le port, et le handler <code>onmessage</code> pour gérer les messages envoyés par les processus principaux.</p>
+À l'intérieur du worker, nous utilisons le gestionnaire {{domxref("SharedWorkerGlobalScope.onconnect")}} pour nous connecter au même port que celui mentionné ci-dessus. Les ports associés à ce worker sont accessibles dans la propriété `ports` de l'événement {{event("connect")}} - nous utilisons ensuite {{domxref("MessagePort")}} La méthode `start()` pour démarrer le port, et le handler `onmessage` pour gérer les messages envoyés par les processus principaux.
 
-<pre class="brush: js">onconnect = function(e) {
+```js
+onconnect = function(e) {
   var port = e.ports[0];
 
   port.addEventListener('message', function(e) {
@@ -107,33 +106,19 @@ myWorker.port.onmessage = function(e) {
   });
 
   port.start(); // Requis si vous utilisez addEventListener. Sinon, il est appelé implicitement par le paramètre onmessage.
-}</pre>
-
-<h2 id="Specifications">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', "#messageevent", "MessageEvent")}}</td>
-      <td>{{Spec2('HTML WHATWG')}}</td>
-      <td></td>
-    </tr>
-  </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.MessageEvent")}}</p>
-
-<h2 id="See_also">Voir aussi</h2>
-
-<ul>
-  <li>{{domxref("ExtendableMessageEvent")}} — similaire à cette interface mais utilisée dans les interfaces qui doivent donner plus de flexibilité aux auteurs.</li>
-</ul>
+}
+```
+
+## Spécifications
+
+| Spécification                                                                    | Statut                           | Commentaire |
+| -------------------------------------------------------------------------------- | -------------------------------- | ----------- |
+| {{SpecName('HTML WHATWG', "#messageevent", "MessageEvent")}} | {{Spec2('HTML WHATWG')}} |             |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.MessageEvent")}}
+
+## Voir aussi
+
+- {{domxref("ExtendableMessageEvent")}} — similaire à cette interface mais utilisée dans les interfaces qui doivent donner plus de flexibilité aux auteurs.
diff --git a/files/fr/web/api/mouseevent/index.md b/files/fr/web/api/mouseevent/index.md
index 521eedf8fd..6f9eada357 100644
--- a/files/fr/web/api/mouseevent/index.md
+++ b/files/fr/web/api/mouseevent/index.md
@@ -11,105 +11,118 @@ tags:
   - évènements
 translation_of: Web/API/MouseEvent
 ---
-<p>{{APIRef("DOM Events")}}</p>
-
-<p>L'interface <strong><code>MouseEvent</code></strong> représente les événements qui se produisent lors d'une interaction de l'utilisateur avec un appareil de pointage (tel qu'une souris). Les événements communs utilisant cette interface incluent {{event("click")}}, {{event("dblclick")}}, {{event("mouseup")}} et {{event("mousedown")}}.</p>
-
-<p><code>MouseEvent</code> dérive de {{domxref("UIEvent")}}, qui lui-même est issu d'{{domxref("Event")}}. Bien que la méthode {{domxref ("MouseEvent.initMouseEvent()")}} soit conservée à des fins de compatibilité descendante, la création d'un objet <code>MouseEvent</code> doit être effectuée à l'aide du constructeur {{domxref ("MouseEvent.MouseEvent","MouseEvent()")}}.</p>
-
-<p>Plusieurs événements plus spécifiques sont basés sur <code>MouseEvent</code>, y compris {{domxref ("WheelEvent")}} et {{domxref ("DragEvent")}}.</p>
-
-<h2 id="Constructeur">Constructeur</h2>
-
-<dl>
- <dt>{{domxref("MouseEvent.MouseEvent", "MouseEvent()")}}</dt>
- <dd>crée un objet <code>MouseEvent</code>.</dd>
-</dl>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<p><em>Cette interface hérite aussi des propriétés de ses parents</em> <em> {{domxref("UIEvent")}} et {{domxref("Event")}}.</em></p>
-
-<dl>
- <dt>{{domxref("MouseEvent.altKey")}} {{readonlyinline}}</dt>
- <dd>renvoie <code>true</code> (<em>vrai</em>) si la touche <kbd>alt</kbd> est pressée lorsque l'événement est lancé.</dd>
- <dt>{{domxref("MouseEvent.button")}} {{readonlyinline}}</dt>
- <dd>Le chiffre représentant le bouton qui est pressé lorsque l'événement est lancé.</dd>
- <dt>{{domxref("MouseEvent.buttons")}} {{readonlyinline}}{{gecko_minversion_inline("15.0")}}</dt>
- <dd>
- <p>Les boutons qui sont pressés alors que l'événement est lancé.</p>
- </dd>
- <dt>{{domxref("MouseEvent.clientX")}} {{readonlyinline}}</dt>
- <dd>La coordonnée en X du pointeur de la souris dans les coordonnées locales (contenu du DOM).</dd>
- <dt>{{domxref("MouseEvent.clientY")}} {{readonlyinline}}</dt>
- <dd>La coordonnée en Y du pointeur de la souris dans les coordonnées locales (contenu du DOM).</dd>
- <dt>{{domxref("MouseEvent.ctrlKey")}} {{readonlyinline}}</dt>
- <dd>renvoie <code>true</code> si la touche <kbd>ctrl</kbd> est pressée alors que l'événement est lancé.</dd>
- <dt>{{domxref("MouseEvent.metaKey")}} {{readonlyinline}}</dt>
- <dd>renvoie <code>true</code> si la touche <kbd>méta</kbd> est pressée alors que l'événement est lancé.</dd>
- <dt>{{domxref("MouseEvent.movementX")}} {{readonlyinline}}</dt>
- <dd>La coordonnée en X du pointeur de la souris relative à la position de la souris lors du dernier événement {{event("mousemove")}} lancé.</dd>
- <dt>{{domxref("MouseEvent.movementY")}} {{readonlyinline}}</dt>
- <dd>La coordonnée en Y du pointeur de la souris relative à la position de la souris lors du dernier événement {{event("mousemove")}} lancé.</dd>
- <dt>{{domxref("MouseEvent.offsetX")}} {{readonlyinline}}{{experimental_inline}}</dt>
- <dd>La coordonnée en X du pointeur de la souris relative à la postion du bord de remplissage du noeud cible.</dd>
- <dt>{{domxref("MouseEvent.offsetY")}} {{readonlyinline}}{{experimental_inline}}</dt>
- <dd>La coordonnée en Y du pointeur de la souris relative à la postion du bord de remplissage du noeud cible.</dd>
- <dt>{{domxref("MouseEvent.pageX")}} {{readonlyinline}}{{experimental_inline}}</dt>
- <dd>La coordonnée en X du pointeur de la souris relative au document entier.</dd>
- <dt>{{domxref("MouseEvent.pageY")}} {{readonlyinline}}{{experimental_inline}}</dt>
- <dd>La coordonnée en Y du pointeur de la souris relative au document entier.</dd>
- <dt>{{domxref("MouseEvent.region")}} {{readonlyinline}}</dt>
- <dd>renvoie l'identifiant de la région touchée par l'évènement. Si aucune région n'est affectée, <code>null</code> est retourné.</dd>
- <dt>{{domxref("MouseEvent.relatedTarget")}} {{readonlyinline}}</dt>
- <dd>
- <p>La seconde cible pour l'événement, s'il y en a une.</p>
- </dd>
- <dt>{{domxref("MouseEvent.screenX")}} {{readonlyinline}}</dt>
- <dd>La coordonnée en X du pointeur de la souris de façon globale (par rapport à l'écran).</dd>
- <dt>{{domxref("MouseEvent.screenY")}} {{readonlyinline}}</dt>
- <dd>La coordonnée en Y du pointeur de la souris de façon globale (par rapport à l'écran).</dd>
- <dt>{{domxref("MouseEvent.shiftKey")}} {{readonlyinline}}</dt>
- <dd>renvoie <code>true</code> si la touche <kbd>Maj</kbd> est pressée alors que l'événement est lancé.</dd>
- <dt>{{domxref("MouseEvent.which")}} {{readonlyinline}}</dt>
- <dd>Le bouton qui est pressé alors que l'événement est lancé.</dd>
- <dt>MouseEvent.mozPressure {{non-standard_inline()}} {{readonlyinline}}</dt>
- <dd>La quantité de pression appliquée à un appareil tactile ou tablette lors de la génération de l'événement ; l'amplitude de cette valeur se situe entre 0.0 (pression minimum) et 1.0 (pression maximum).</dd>
- <dt>MouseEvent.mozInputSource {{non-standard_inline()}} {{readonlyinline}}</dt>
- <dd>Le type d'appareil qui a généré l'événement (une des constantes <code>MOZ_SOURCE_*</code> listées ci-dessous). Ceci permet, par exemple, de déterminer si un événement de pointeur est généré par une souris ou par un événement tactile (qui pourrait affecter le degré de précision avec lequel il est possible d'interpréter les coordonnées associées à l'événement).</dd>
- <dt>{{domxref("MouseEvent.webkitForce")}} {{non-standard_inline()}} {{readonlyinline}}</dt>
- <dd>La quantité de pression appliquée en cliquant.</dd>
- <dt>{{domxref("MouseEvent.x")}} {{experimental_inline}}{{readonlyinline}}</dt>
- <dd>Alias pour {{domxref("MouseEvent.clientX")}}.</dd>
- <dt>{{domxref("MouseEvent.y")}} {{experimental_inline}}{{readonlyinline}}</dt>
- <dd>Alias pour {{domxref("MouseEvent.clientY")}}.</dd>
-</dl>
-
-<h2 id="Constantes">Constantes</h2>
-
-<dl>
- <dt>{{domxref("MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN")}} {{non-standard_inline}}{{readonlyinline}}</dt>
- <dd>Force minimum nécessaire pour un click normal.</dd>
- <dt>{{domxref("MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN")}} {{non-standard_inline}}{{readonlyinline}}</dt>
- <dd>Force minimum nécessaire pour un click fort.</dd>
-</dl>
-
-<h2 id="Les_méthodes">Les méthodes</h2>
-
-<p><em>Cette interface hérite aussi des méthodes de ses parents</em> <em>{{domxref("UIEvent")}} et {{domxref("Event")}}.</em></p>
-
-<dl>
- <dt>{{domxref("MouseEvent.getModifierState")}}(){{gecko_minversion_inline("15.0")}}</dt>
- <dd>Retourne l'état actuel de la touche de modification spécifiée. Voir {{domxref("KeyboardEvent.getModifierState")}}() pour plus de détails.</dd>
- <dt>{{domxref("MouseEvent.initMouseEvent()")}} {{deprecated_inline}}</dt>
- <dd>initialise la valeur de l'<code>MouseEvent</code> créé. Si l'évènement a déjà été diffusé, la méthode ne produit rien.</dd>
-</dl>
-
-<h2 id="Exemple">Exemple</h2>
-
-<p>Cet exemple illustre la simulation d'un clic (générant par programmation un événement click) sur une case à cocher en utilisant les méthodes DOM.</p>
-
-<pre class="brush: js">function simulateClick() {
+{{APIRef("DOM Events")}}
+
+L'interface **`MouseEvent`** représente les événements qui se produisent lors d'une interaction de l'utilisateur avec un appareil de pointage (tel qu'une souris). Les événements communs utilisant cette interface incluent {{event("click")}}, {{event("dblclick")}}, {{event("mouseup")}} et {{event("mousedown")}}.
+
+`MouseEvent` dérive de {{domxref("UIEvent")}}, qui lui-même est issu d'{{domxref("Event")}}. Bien que la méthode {{domxref ("MouseEvent.initMouseEvent()")}} soit conservée à des fins de compatibilité descendante, la création d'un objet `MouseEvent` doit être effectuée à l'aide du constructeur {{domxref ("MouseEvent.MouseEvent","MouseEvent()")}}.
+
+Plusieurs événements plus spécifiques sont basés sur `MouseEvent`, y compris {{domxref ("WheelEvent")}} et {{domxref ("DragEvent")}}.
+
+## Constructeur
+
+- {{domxref("MouseEvent.MouseEvent", "MouseEvent()")}}
+  - : crée un objet `MouseEvent`.
+
+## Propriétés
+
+_Cette interface hérite aussi des propriétés de ses parents_ _{{domxref("UIEvent")}} et {{domxref("Event")}}._
+
+- {{domxref("MouseEvent.altKey")}} {{readonlyinline}}
+
+  - : renvoie `true` (_vrai_) si la touche
+
+    <kbd>alt</kbd>
+
+    est pressée lorsque l'événement est lancé.
+
+- {{domxref("MouseEvent.button")}} {{readonlyinline}}
+  - : Le chiffre représentant le bouton qui est pressé lorsque l'événement est lancé.
+- {{domxref("MouseEvent.buttons")}} {{readonlyinline}}{{gecko_minversion_inline("15.0")}}
+  - : Les boutons qui sont pressés alors que l'événement est lancé.
+- {{domxref("MouseEvent.clientX")}} {{readonlyinline}}
+  - : La coordonnée en X du pointeur de la souris dans les coordonnées locales (contenu du DOM).
+- {{domxref("MouseEvent.clientY")}} {{readonlyinline}}
+  - : La coordonnée en Y du pointeur de la souris dans les coordonnées locales (contenu du DOM).
+- {{domxref("MouseEvent.ctrlKey")}} {{readonlyinline}}
+
+  - : renvoie `true` si la touche
+
+    <kbd>ctrl</kbd>
+
+    est pressée alors que l'événement est lancé.
+
+- {{domxref("MouseEvent.metaKey")}} {{readonlyinline}}
+
+  - : renvoie `true` si la touche
+
+    <kbd>méta</kbd>
+
+    est pressée alors que l'événement est lancé.
+
+- {{domxref("MouseEvent.movementX")}} {{readonlyinline}}
+  - : La coordonnée en X du pointeur de la souris relative à la position de la souris lors du dernier événement {{event("mousemove")}} lancé.
+- {{domxref("MouseEvent.movementY")}} {{readonlyinline}}
+  - : La coordonnée en Y du pointeur de la souris relative à la position de la souris lors du dernier événement {{event("mousemove")}} lancé.
+- {{domxref("MouseEvent.offsetX")}} {{readonlyinline}}{{experimental_inline}}
+  - : La coordonnée en X du pointeur de la souris relative à la postion du bord de remplissage du noeud cible.
+- {{domxref("MouseEvent.offsetY")}} {{readonlyinline}}{{experimental_inline}}
+  - : La coordonnée en Y du pointeur de la souris relative à la postion du bord de remplissage du noeud cible.
+- {{domxref("MouseEvent.pageX")}} {{readonlyinline}}{{experimental_inline}}
+  - : La coordonnée en X du pointeur de la souris relative au document entier.
+- {{domxref("MouseEvent.pageY")}} {{readonlyinline}}{{experimental_inline}}
+  - : La coordonnée en Y du pointeur de la souris relative au document entier.
+- {{domxref("MouseEvent.region")}} {{readonlyinline}}
+  - : renvoie l'identifiant de la région touchée par l'évènement. Si aucune région n'est affectée, `null` est retourné.
+- {{domxref("MouseEvent.relatedTarget")}} {{readonlyinline}}
+  - : La seconde cible pour l'événement, s'il y en a une.
+- {{domxref("MouseEvent.screenX")}} {{readonlyinline}}
+  - : La coordonnée en X du pointeur de la souris de façon globale (par rapport à l'écran).
+- {{domxref("MouseEvent.screenY")}} {{readonlyinline}}
+  - : La coordonnée en Y du pointeur de la souris de façon globale (par rapport à l'écran).
+- {{domxref("MouseEvent.shiftKey")}} {{readonlyinline}}
+
+  - : renvoie `true` si la touche
+
+    <kbd>Maj</kbd>
+
+    est pressée alors que l'événement est lancé.
+
+- {{domxref("MouseEvent.which")}} {{readonlyinline}}
+  - : Le bouton qui est pressé alors que l'événement est lancé.
+- MouseEvent.mozPressure {{non-standard_inline()}} {{readonlyinline}}
+  - : La quantité de pression appliquée à un appareil tactile ou tablette lors de la génération de l'événement ; l'amplitude de cette valeur se situe entre 0.0 (pression minimum) et 1.0 (pression maximum).
+- MouseEvent.mozInputSource {{non-standard_inline()}} {{readonlyinline}}
+  - : Le type d'appareil qui a généré l'événement (une des constantes `MOZ_SOURCE_*` listées ci-dessous). Ceci permet, par exemple, de déterminer si un événement de pointeur est généré par une souris ou par un événement tactile (qui pourrait affecter le degré de précision avec lequel il est possible d'interpréter les coordonnées associées à l'événement).
+- {{domxref("MouseEvent.webkitForce")}} {{non-standard_inline()}} {{readonlyinline}}
+  - : La quantité de pression appliquée en cliquant.
+- {{domxref("MouseEvent.x")}} {{experimental_inline}}{{readonlyinline}}
+  - : Alias pour {{domxref("MouseEvent.clientX")}}.
+- {{domxref("MouseEvent.y")}} {{experimental_inline}}{{readonlyinline}}
+  - : Alias pour {{domxref("MouseEvent.clientY")}}.
+
+## Constantes
+
+- {{domxref("MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN")}} {{non-standard_inline}}{{readonlyinline}}
+  - : Force minimum nécessaire pour un click normal.
+- {{domxref("MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN")}} {{non-standard_inline}}{{readonlyinline}}
+  - : Force minimum nécessaire pour un click fort.
+
+## Les méthodes
+
+_Cette interface hérite aussi des méthodes de ses parents_ _{{domxref("UIEvent")}} et {{domxref("Event")}}._
+
+- {{domxref("MouseEvent.getModifierState")}}(){{gecko_minversion_inline("15.0")}}
+  - : Retourne l'état actuel de la touche de modification spécifiée. Voir {{domxref("KeyboardEvent.getModifierState")}}() pour plus de détails.
+- {{domxref("MouseEvent.initMouseEvent()")}} {{deprecated_inline}}
+  - : initialise la valeur de l'`MouseEvent` créé. Si l'évènement a déjà été diffusé, la méthode ne produit rien.
+
+## Exemple
+
+Cet exemple illustre la simulation d'un clic (générant par programmation un événement click) sur une case à cocher en utilisant les méthodes DOM.
+
+```js
+function simulateClick() {
   var evt = new MouseEvent("click", {
     bubbles: true,
     cancelable: true,
@@ -125,64 +138,34 @@ translation_of: Web/API/MouseEvent
     alert("not canceled");
   }
 }
-document.getElementById("button").addEventListener('click', simulateClick);</pre>
-
-<pre class="brush: html">&lt;p&gt;&lt;label&gt;&lt;input type="checkbox" id="checkbox"&gt; Checked&lt;/label&gt;
-&lt;p&gt;&lt;button id="button"&gt;Click me&lt;/button&gt;</pre>
-
-<p>Cliquez sur le bouton pour voir comment l'exemple fonctionne :</p>
-
-<p>{{ EmbedLiveSample('Example', '', '', '') }}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSSOM View','#extensions-to-the-mouseevent-interface', 'MouseEvent')}}</td>
-   <td>{{Spec2('CSSOM View')}}</td>
-   <td>Redéfinit <code>MouseEvent</code> de long à double. C'est-à-dire qu'un <code>PointerEvent</code> dont le <code>pointerType</code> est "souris" est un double.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML WHATWG", "#dom-mouseevent-region", "MouseEvent.region")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Ajout de la propriété  <code>region</code>  à partir de {{SpecName('DOM3 Events')}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('Pointer Lock','#extensions-to-the-mouseevent-interface','MouseEvent')}}</td>
-   <td>{{Spec2('Pointer Lock')}}</td>
-   <td>À partir de {{SpecName('DOM3 Events')}}, ajout des propriétés <code>movementX</code> et <code>movementY</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSSOM View', '#extensions-to-the-mouseevent-interface', 'MouseEvent')}}</td>
-   <td>{{Spec2('CSSOM View')}}</td>
-   <td>À partir de {{SpecName('DOM3 Events')}}, ajout des propriétés <code>offsetX</code> et <code>offsetY</code>, <code>pageX</code> et <code>pageY</code>, <code>x</code> et <code>y</code>. Redéfinition de l'écran, de la page, du client et des propriétés des coordonnées (x et y) comme <code>double</code> et non plus <code>long</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM3 Events','#events-mouseevents','MouseEvent')}}</td>
-   <td>{{Spec2('DOM3 Events')}}</td>
-   <td>À partir de {{SpecName('DOM2 Events')}}, ajout du constructeur <code>MouseEvent()</code>, de la méthode <code>getModifierState()</code> et de la propriété <code>buttons</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Events','#Events-MouseEvent','MouseEvent')}}</td>
-   <td>{{Spec2('DOM2 Events')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.MouseEvent")}}</p>
-
-<h2 id="See_also">Voir aussi</h2>
-
-<ul>
-  <li>Son parent direct, {{domxref("UIEvent")}}.</li>
-  <li>{{domxref("PointerEvent")}} : Pour les événements avancés du pointeur, y compris le multi-touch.</li>
-</ul>
+document.getElementById("button").addEventListener('click', simulateClick);
+```
+
+```html
+<p><label><input type="checkbox" id="checkbox"> Checked</label>
+<p><button id="button">Click me</button>
+```
+
+Cliquez sur le bouton pour voir comment l'exemple fonctionne :
+
+{{ EmbedLiveSample('Example', '', '', '') }}
+
+## Spécifications
+
+| Spécification                                                                                                    | Statut                           | Commentaire                                                                                                                                                                                                                                                 |
+| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('CSSOM View','#extensions-to-the-mouseevent-interface', 'MouseEvent')}}     | {{Spec2('CSSOM View')}} | Redéfinit `MouseEvent` de long à double. C'est-à-dire qu'un `PointerEvent` dont le `pointerType` est "souris" est un double.                                                                                                                                |
+| {{SpecName("HTML WHATWG", "#dom-mouseevent-region", "MouseEvent.region")}}             | {{Spec2('HTML WHATWG')}} | Ajout de la propriété  `region`  à partir de {{SpecName('DOM3 Events')}}.                                                                                                                                                                          |
+| {{SpecName('Pointer Lock','#extensions-to-the-mouseevent-interface','MouseEvent')}} | {{Spec2('Pointer Lock')}} | À partir de {{SpecName('DOM3 Events')}}, ajout des propriétés `movementX` et `movementY`.                                                                                                                                                          |
+| {{SpecName('CSSOM View', '#extensions-to-the-mouseevent-interface', 'MouseEvent')}} | {{Spec2('CSSOM View')}} | À partir de {{SpecName('DOM3 Events')}}, ajout des propriétés `offsetX` et `offsetY`, `pageX` et `pageY`, `x` et `y`. Redéfinition de l'écran, de la page, du client et des propriétés des coordonnées (x et y) comme `double` et non plus `long`. |
+| {{SpecName('DOM3 Events','#events-mouseevents','MouseEvent')}}                             | {{Spec2('DOM3 Events')}} | À partir de {{SpecName('DOM2 Events')}}, ajout du constructeur `MouseEvent()`, de la méthode `getModifierState()` et de la propriété `buttons`.                                                                                                    |
+| {{SpecName('DOM2 Events','#Events-MouseEvent','MouseEvent')}}                                 | {{Spec2('DOM2 Events')}} | Définition initiale.                                                                                                                                                                                                                                        |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.MouseEvent")}}
+
+## Voir aussi
+
+- Son parent direct, {{domxref("UIEvent")}}.
+- {{domxref("PointerEvent")}} : Pour les événements avancés du pointeur, y compris le multi-touch.
diff --git a/files/fr/web/api/mouseevent/offsetx/index.md b/files/fr/web/api/mouseevent/offsetx/index.md
index 8a01b713c2..b0ac0a9cc4 100644
--- a/files/fr/web/api/mouseevent/offsetx/index.md
+++ b/files/fr/web/api/mouseevent/offsetx/index.md
@@ -10,42 +10,28 @@ tags:
   - Reference
 translation_of: Web/API/MouseEvent/offsetX
 ---
-<p>{{APIRef("DOM Events")}}{{SeeCompatTable}}</p>
+{{APIRef("DOM Events")}}{{SeeCompatTable}}
 
-<p>La propriété en lecture seule <strong><code>offsetX</code></strong> de l'interface {{domxref("MouseEvent")}} fournit le décalage sur l'axe X du pointeur de la souris entre cet évènement et la bordure de la marge intérieure du noeud cible.</p>
+La propriété en lecture seule **`offsetX`** de l'interface {{domxref("MouseEvent")}} fournit le décalage sur l'axe X du pointeur de la souris entre cet évènement et la bordure de la marge intérieure du noeud cible.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var xOffset = <em>instanceOfMouseEvent</em>.offsetX;
-</pre>
+    var xOffset = instanceOfMouseEvent.offsetX;
 
-<h3 id="Valeur_renvoyée">Valeur renvoyée</h3>
+### Valeur renvoyée
 
-<p>Un nombre à virgule flottante double précision <code>double</code>. Les premières versions de la spécification la définissaient comme un nombre entier. Pour plus de détails, voir la section Compatibilité des navigateurs.</p>
+Un nombre à virgule flottante double précision `double`. Les premières versions de la spécification la définissaient comme un nombre entier. Pour plus de détails, voir la section Compatibilité des navigateurs.
 
-<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">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSSOM View', '#dom-mouseevent-offsetx', 'MouseEvent')}}</td>
-   <td>{{Spec2('CSSOM View')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                            | État                             | Commentaire         |
+| ---------------------------------------------------------------------------------------- | -------------------------------- | ------------------- |
+| {{SpecName('CSSOM View', '#dom-mouseevent-offsetx', 'MouseEvent')}} | {{Spec2('CSSOM View')}} | Définition initiale |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.MouseEvent.offsetX")}}</p>
+{{Compat("api.MouseEvent.offsetX")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>{{domxref("MouseEvent")}}</li>
-</ul>
+- {{domxref("MouseEvent")}}
diff --git a/files/fr/web/api/mouseevent/offsety/index.md b/files/fr/web/api/mouseevent/offsety/index.md
index ca71439cef..4609de06ba 100644
--- a/files/fr/web/api/mouseevent/offsety/index.md
+++ b/files/fr/web/api/mouseevent/offsety/index.md
@@ -10,42 +10,28 @@ tags:
   - Reference
 translation_of: Web/API/MouseEvent/offsetY
 ---
-<p>{{APIRef("DOM Events")}}{{SeeCompatTable}}</p>
+{{APIRef("DOM Events")}}{{SeeCompatTable}}
 
-<p>La propriété en lecture seule <strong><code>offsetY</code></strong> de l'interface {{domxref("MouseEvent")}}  fournit le décalage sur l'axe Y du pointeur de la souris entre cet évènement et la bordure de la marge intérieure du noeud cible.</p>
+La propriété en lecture seule **`offsetY`** de l'interface {{domxref("MouseEvent")}}  fournit le décalage sur l'axe Y du pointeur de la souris entre cet évènement et la bordure de la marge intérieure du noeud cible.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var yOffset = <em>instanceOfMouseEvent</em>.offsetY;
-</pre>
+    var yOffset = instanceOfMouseEvent.offsetY;
 
-<h3 id="Valeur_retournée">Valeur retournée</h3>
+### Valeur retournée
 
-<p>Un nombre à virgule flottante double précision <code>double</code>. Les premières versions de la spécification la définissaient comme un nombre entier. Pour plus de détails, voir la section Commpatibilité des navigateurs.</p>
+Un nombre à virgule flottante double précision `double`. Les premières versions de la spécification la définissaient comme un nombre entier. Pour plus de détails, voir la section Commpatibilité des navigateurs.
 
-<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('CSSOM View', '#dom-mouseevent-offsety', 'MouseEvent')}}</td>
-   <td>{{Spec2('CSSOM View')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                            | État                             | Commentaires        |
+| ---------------------------------------------------------------------------------------- | -------------------------------- | ------------------- |
+| {{SpecName('CSSOM View', '#dom-mouseevent-offsety', 'MouseEvent')}} | {{Spec2('CSSOM View')}} | Définition initiale |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.MouseEvent.offsetY")}}</p>
+{{Compat("api.MouseEvent.offsetY")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>{{domxref("MouseEvent")}}</li>
-</ul>
+- {{domxref("MouseEvent")}}
diff --git a/files/fr/web/api/mutationobserver/index.md b/files/fr/web/api/mutationobserver/index.md
index 2be16d34b7..7e91e49c98 100644
--- a/files/fr/web/api/mutationobserver/index.md
+++ b/files/fr/web/api/mutationobserver/index.md
@@ -3,138 +3,153 @@ title: MutationObserver
 slug: Web/API/MutationObserver
 translation_of: Web/API/MutationObserver
 ---
-<p>{{APIRef("DOM")}}</p>
+{{APIRef("DOM")}}
 
-<p><code>MutationObserver</code> fournit un moyen d’intercepter les changements dans le <a href="/en-US/docs/DOM">DOM</a>. Il a été conçu pour remplacer les <a href="/en-US/docs/DOM/Mutation_events">Mutation Events</a> définis dans la spécification DOM3 Events.</p>
+`MutationObserver` fournit un moyen d’intercepter les changements dans le [DOM](/en-US/docs/DOM). Il a été conçu pour remplacer les [Mutation Events](/en-US/docs/DOM/Mutation_events) définis dans la spécification DOM3 Events.
 
-<h2 id="Constructor">Constructeur</h2>
+## Constructeur
 
-<h3 id="MutationObserver()"><code>MutationObserver()</code></h3>
+### `MutationObserver()`
 
-<p>Le constructeur permettant d’instancier un nouvel observateur de mutations DOM.</p>
+Le constructeur permettant d’instancier un nouvel observateur de mutations DOM.
 
-<pre class="syntaxbox">new MutationObserver( function callback );</pre>
+    new MutationObserver( function callback );
 
-<h4 id="Parameters">Paramètres</h4>
+#### Paramètres
 
-<dl>
- <dt><code>callback</code></dt>
- <dd>Une fonction qui sera appelée à chaque mutation du DOM. L’observateur appellera cette fonction avec deux arguments. Le premier est un tableau d’objets de type {{domxref("MutationRecord")}} ; le second est l’instance de <code>MutationObserver</code>.</dd>
-</dl>
+- `callback`
+  - : Une fonction qui sera appelée à chaque mutation du DOM. L’observateur appellera cette fonction avec deux arguments. Le premier est un tableau d’objets de type {{domxref("MutationRecord")}} ; le second est l’instance de `MutationObserver`.
 
-<h2 id="Instance_methods">Méthodes d’instance</h2>
+## Méthodes d’instance
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <td><code>void <a href="#observe()">observe</a>( {{domxref("Node")}} target, <a href="#MutationObserverInit">MutationObserverInit</a> options );</code></td>
-  </tr>
-  <tr>
-   <td><code>void <a href="#disconnect()">disconnect</a>();</code></td>
-  </tr>
-  <tr>
-   <td><code>Array <a href="#takeRecords()">takeRecords</a>();</code></td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <td>
+        <code
+          >void <a href="#observe()">observe</a>( {{domxref("Node")}}
+          target,
+          <a href="#MutationObserverInit">MutationObserverInit</a> options
+          );</code
+        >
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <code>void <a href="#disconnect()">disconnect</a>();</code>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <code>Array <a href="#takeRecords()">takeRecords</a>();</code>
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<div class="note">
-<p><strong>Note :</strong> La cible {{domxref("Node")}} ne doit pas être confondue avec celle de <a href="https://nodejs.org/en/">NodeJS</a>.</p>
-</div>
+> **Note :** La cible {{domxref("Node")}} ne doit pas être confondue avec celle de [NodeJS](https://nodejs.org/en/).
 
-<h3 id="observe()"><code>observe()</code></h3>
+### `observe()`
 
-<p>Inscrit l’instance du <code>MutationObserver</code> afin d’être notifié des mutations DOM du nœud sélectionné.</p>
+Inscrit l’instance du `MutationObserver` afin d’être notifié des mutations DOM du nœud sélectionné.
 
-<pre class="syntaxbox">void observe( {{domxref("Node")}} target, <a href="#MutationObserverInit"><code>MutationObserverInit</code></a> options );
-</pre>
+    void observe( {{domxref("Node")}} target, MutationObserverInit options );
 
-<h4 id="Parameters">Paramètres</h4>
+#### Paramètres
 
-<dl>
- <dt><code>target</code></dt>
- <dd>Le {{domxref("Node")}} (nœud) sur lequel doivent être observées les mutations DOM.</dd>
- <dt><code>options</code></dt>
- <dd>Un objet du type <a href="#MutationObserverInit"><code>MutationObserverInit</code></a>. Il spécifie quelles mutations DOM sont à rapporter.</dd>
-</dl>
+- `target`
+  - : Le {{domxref("Node")}} (nœud) sur lequel doivent être observées les mutations DOM.
+- `options`
+  - : Un objet du type [`MutationObserverInit`](#MutationObserverInit). Il spécifie quelles mutations DOM sont à rapporter.
 
-<div class="note">
-  <p><strong>Note :</strong> ajouter un observateur sur un élément revient à utiliser <code>addEventListener</code>. Si vous observez un élément plusieurs fois, cela n’a pas d’impact, dans le sens où, si vous observez un élément deux fois, la callback ne sera pas appelée deux fois, et vous n’aurez pas besoin d’appeler <code>disconnect()</code> deux fois. En d’autres termes, une fois qu’un élément est observé, l’observer à nouveau avec la même instance n’a pas d’effet. Cependant, si la callback est différente, un nouvel observateur sera ajouté.</p>
-</div>
+> **Note :** ajouter un observateur sur un élément revient à utiliser `addEventListener`. Si vous observez un élément plusieurs fois, cela n’a pas d’impact, dans le sens où, si vous observez un élément deux fois, la callback ne sera pas appelée deux fois, et vous n’aurez pas besoin d’appeler `disconnect()` deux fois. En d’autres termes, une fois qu’un élément est observé, l’observer à nouveau avec la même instance n’a pas d’effet. Cependant, si la callback est différente, un nouvel observateur sera ajouté.
 
-<h3 id="disconnect()"><code>disconnect()</code></h3>
+### `disconnect()`
 
-<p>L’instance <code>MutationObserver</code> cesse de recevoir les notifications de mutations DOM. Jusqu’à ce que la méthode <a href="#observe()"><code>observe()</code></a> soit appelée à nouveau, les callbacks de l’observateur ne seront pas invoquées.</p>
+L’instance `MutationObserver` cesse de recevoir les notifications de mutations DOM. Jusqu’à ce que la méthode [`observe()`](<#observe()>) soit appelée à nouveau, les callbacks de l’observateur ne seront pas invoquées.
 
-<pre class="syntaxbox">void disconnect();
-</pre>
+    void disconnect();
 
-<div class="note">
-<p><strong>Note :</strong> Selon la <a href="https://dom.spec.whatwg.org/#garbage-collection">spécification</a>, un <code>MutationObserver</code> est supprimé par le garbage collector si l'élément cible est supprimé.</p>
-</div>
+> **Note :** Selon la [spécification](https://dom.spec.whatwg.org/#garbage-collection), un `MutationObserver` est supprimé par le garbage collector si l'élément cible est supprimé.
 
-<h3 id="takeRecords()"><code>takeRecords()</code></h3>
+### `takeRecords()`
 
-<p>Vide la file des mutations enregistrées du <code>MutationObserver</code> et retourne son contenu.</p>
+Vide la file des mutations enregistrées du `MutationObserver` et retourne son contenu.
 
-<pre class="syntaxbox">Array takeRecords();
-</pre>
+    Array takeRecords();
 
-<dl>
- <dt>Valeur de retour</dt>
- <dd>Retourne un tableau de  {{domxref("MutationRecord")}}.</dd>
-</dl>
+- Valeur de retour
+  - : Retourne un tableau de {{domxref("MutationRecord")}}.
 
-<h2 id="MutationObserverInit"><code>MutationObserverInit</code></h2>
+## `MutationObserverInit`
 
-<p><code>MutationObserverInit</code> est un objet pouvant avoir les propriétés suivantes :</p>
+`MutationObserverInit` est un objet pouvant avoir les propriétés suivantes :
 
-<div class="note">
-  <p><strong>Note :</strong> Au moins une propriété parmi <code>childList</code>, <code>attributes</code> ou <code>characterData</code> doit être initialisée à <code>true</code>, sinon l’erreur <i lang="en">"An invalid or illegal string was specified</i>" sera émise.</p>
-</div>
+> **Note :** Au moins une propriété parmi `childList`, `attributes` ou `characterData` doit être initialisée à `true`, sinon l’erreur <i lang="en">"An invalid or illegal string was specified</i>" sera émise.
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <td class="header">Propriété</td>
-   <td class="header">Description</td>
-  </tr>
-  <tr>
-   <td><code>childList</code></td>
-   <td><code>true</code> si l’ajout ou la suppression des éléments enfants du nœud visé (incluant les nœuds de texte) sont à observer.</td>
-  </tr>
-  <tr>
-   <td><code>attributes</code></td>
-   <td><code>true</code> si les mutations d’attributs du nœud visé sont à observer.</td>
-  </tr>
-  <tr>
-   <td><code>characterData</code></td>
-   <td><code>true</code> si les mutation de texte du nœud visé sont à observer.</td>
-  </tr>
-  <tr>
-   <td><code>subtree</code></td>
-   <td><code>true</code> si les descendants du nœud visé sont également à observer.</td>
-  </tr>
-  <tr>
-   <td><code>attributeOldValue</code></td>
-   <td><code>true</code> si <code>attributes</code> est <code>true</code> et si la valeur des attributs avant mutation doit être enregistrée.</td>
-  </tr>
-  <tr>
-   <td><code>characterDataOldValue</code></td>
-   <td><code>true</code> si <code>characterData</code> est <code>true</code> et si la valeur des données avant mutation doit être enregistrée.</td>
-  </tr>
-  <tr>
-   <td><code>attributeFilter</code></td>
-   <td>Spécifiez un tableau de noms d’attributs locaux (sans namespace) si vous souhaitez n’observer les mutations que sur une partie des attributs.</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <td class="header">Propriété</td>
+      <td class="header">Description</td>
+    </tr>
+    <tr>
+      <td><code>childList</code></td>
+      <td>
+        <code>true</code> si l’ajout ou la suppression des éléments enfants du
+        nœud visé (incluant les nœuds de texte) sont à observer.
+      </td>
+    </tr>
+    <tr>
+      <td><code>attributes</code></td>
+      <td>
+        <code>true</code> si les mutations d’attributs du nœud visé sont à
+        observer.
+      </td>
+    </tr>
+    <tr>
+      <td><code>characterData</code></td>
+      <td>
+        <code>true</code> si les mutation de texte du nœud visé sont à observer.
+      </td>
+    </tr>
+    <tr>
+      <td><code>subtree</code></td>
+      <td>
+        <code>true</code> si les descendants du nœud visé sont également à
+        observer.
+      </td>
+    </tr>
+    <tr>
+      <td><code>attributeOldValue</code></td>
+      <td>
+        <code>true</code> si <code>attributes</code> est <code>true</code> et si
+        la valeur des attributs avant mutation doit être enregistrée.
+      </td>
+    </tr>
+    <tr>
+      <td><code>characterDataOldValue</code></td>
+      <td>
+        <code>true</code> si <code>characterData</code> est <code>true</code> et
+        si la valeur des données avant mutation doit être enregistrée.
+      </td>
+    </tr>
+    <tr>
+      <td><code>attributeFilter</code></td>
+      <td>
+        Spécifiez un tableau de noms d’attributs locaux (sans namespace) si vous
+        souhaitez n’observer les mutations que sur une partie des attributs.
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Exemple_d’utilisation">Exemple d’utilisation</h2>
+## Exemple d’utilisation
 
-<p>L’exemple suivant est extrait de ce <a href="http://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/" rel="freelink">blog</a>.</p>
+L’exemple suivant est extrait de ce [blog](http://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/).
 
-<pre class="brush: js">// Selectionne le noeud dont les mutations seront observées
+```js
+// Selectionne le noeud dont les mutations seront observées
 var targetNode = document.getElementById('some-id');
 
 // Options de l'observateur (quelles sont les mutations à observer)
@@ -159,37 +174,23 @@ var observer = new MutationObserver(callback);
 observer.observe(targetNode, config);
 
 // L'observation peut être arrêtée par la suite
-observer.disconnect();</pre>
+observer.disconnect();
+```
 
-<h2 id="Additional_reading">Autres articles pour en savoir plus (en anglais)</h2>
+## Autres articles pour en savoir plus (en anglais)
 
-<ul>
- <li><a href="http://updates.html5rocks.com/2012/02/Detect-DOM-changes-with-Mutation-Observers" rel="freelink">A brief overview</a></li>
- <li><a href="http://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/" rel="freelink">A more in-depth discussion</a></li>
- <li><a href="http://www.youtube.com/watch?v=eRZ4pO0gVWw" rel="freelink">A screencast by Chromium developer Rafael Weinstein</a></li>
- <li><a href="http://code.google.com/p/mutation-summary/" rel="freelink">The mutation summary library</a></li>
- <li><a href="http://dom.spec.whatwg.org/#mutation-observers">The DOM standard</a> which defines the <code>MutationObserver</code> interface</li>
-</ul>
+- [A brief overview](http://updates.html5rocks.com/2012/02/Detect-DOM-changes-with-Mutation-Observers)
+- [A more in-depth discussion](http://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/)
+- [A screencast by Chromium developer Rafael Weinstein](http://www.youtube.com/watch?v=eRZ4pO0gVWw)
+- [The mutation summary library](http://code.google.com/p/mutation-summary/)
+- [The DOM standard](http://dom.spec.whatwg.org/#mutation-observers) which defines the `MutationObserver` interface
 
-<h2 id="Spécifications">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('DOM WHATWG', '#mutationobserver', 'MutationObserver')}}</td>
-   <td>{{ Spec2('DOM WHATWG') }}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                            | Statut                           | Commentaire |
+| ---------------------------------------------------------------------------------------- | -------------------------------- | ----------- |
+| {{SpecName('DOM WHATWG', '#mutationobserver', 'MutationObserver')}} | {{ Spec2('DOM WHATWG') }} |             |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.MutationObserver")}}</p>
+{{Compat("api.MutationObserver")}}
diff --git a/files/fr/web/api/namednodemap/index.md b/files/fr/web/api/namednodemap/index.md
index fd83416312..5f7539d8b1 100644
--- a/files/fr/web/api/namednodemap/index.md
+++ b/files/fr/web/api/namednodemap/index.md
@@ -8,86 +8,55 @@ tags:
   - Reference
 translation_of: Web/API/NamedNodeMap
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p>L'interface <code><strong>NamedNodeMap</strong></code> représente une collection d'objets {{domxref("Attr")}}. Les objets de cette collection n'ont pas d'ordre particulier (contrairement à {{domxref("NodeList")}}) mais on peut y accéder grâce à un index (comme pour un tableau).</p>
+L'interface **`NamedNodeMap`** représente une collection d'objets {{domxref("Attr")}}. Les objets de cette collection n'ont pas d'ordre particulier (contrairement à {{domxref("NodeList")}}) mais on peut y accéder grâce à un index (comme pour un tableau).
 
-<p>Un objet <code>NamedNodeMap</code> est <em>vivant</em> et sera automatiquement mis à jour si des modifications sont apportées à son contenu (que cela provienne d'une source interne ou externe).</p>
+Un objet `NamedNodeMap` est _vivant_ et sera automatiquement mis à jour si des modifications sont apportées à son contenu (que cela provienne d'une source interne ou externe).
 
-<div class="note">
-<p><strong>Note :</strong> Bien qu'intitulée <code>NamedNodeMap</code>, cette interface ne manipule pas d'objets {{domxref("Node")}} mais des objets {{domxref("Attr")}}. Ces derniers étaient à l'origine (et le sont toujours pour certaines implémentations) une classe spécialisée de {{domxref("Node")}}.</p>
-</div>
+> **Note :** Bien qu'intitulée `NamedNodeMap`, cette interface ne manipule pas d'objets {{domxref("Node")}} mais des objets {{domxref("Attr")}}. Ces derniers étaient à l'origine (et le sont toujours pour certaines implémentations) une classe spécialisée de {{domxref("Node")}}.
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<p><em>Cette interface n'hérite d'aucune propriété.</em></p>
+_Cette interface n'hérite d'aucune propriété._
 
-<dl>
- <dt>{{domxref("NamedNodeMap.length")}} {{ReadOnlyInline}}</dt>
- <dd>Cette propriété renvoie le nombre d'objets contenus dans la <em>map</em>.</dd>
-</dl>
+- {{domxref("NamedNodeMap.length")}} {{ReadOnlyInline}}
+  - : Cette propriété renvoie le nombre d'objets contenus dans la _map_.
 
-<h2 id="Méthodes">Méthodes</h2>
+## Méthodes
 
-<p><em>Cette interface n'hérite d'aucune méthode.</em></p>
+_Cette interface n'hérite d'aucune méthode._
 
-<dl>
- <dt>{{domxref("NamedNodeMap.getNamedItem()")}}</dt>
- <dd>Cette méthode renvoie un objet {{domxref("Attr")}} qui correspond au nom indiqué.</dd>
- <dt>{{domxref("NamedNodeMap.setNamedItem()")}}</dt>
- <dd>Cette méthode remplace ou ajoute l'objet {{domxref("Attr")}} identifié dans la collection par le nom indiqué.</dd>
- <dt>{{domxref("NamedNodeMap.removeNamedItem()")}}</dt>
- <dd>Cette méthode retire l'objet {{domxref("Attr")}} de la collection à partir du nom indiqué.</dd>
- <dt>{{domxref("NamedNodeMap.item()")}}</dt>
- <dd>Cette méthode renvoie l'objet {{domxref("Attr")}} à l'index indiqué (ou <code>null</code> si l'index est supérieur ou égal au nombre de nœuds.</dd>
- <dt>{{domxref("NamedNodeMap.getNamedItemNS()")}}</dt>
- <dd>Cette méthode renvoie un objet {{domxref("Attr")}} identifié par un espace de noms et un nom local associé.</dd>
- <dt>{{domxref("NamedNodeMap.setNamedItemNS()")}}</dt>
- <dd>Cette méthode remplace ou ajoute un objet {{domxref("Attr")}} identifié par un espace de noms et un nom local associé.</dd>
- <dt>{{domxref("NamedNodeMap.removeNamedItemNS()")}}</dt>
- <dd>Cette méthode retire l'objet {{domxref("Attr")}} de la collection à partir d'un espace de noms et d'un nom local associé.</dd>
-</dl>
+- {{domxref("NamedNodeMap.getNamedItem()")}}
+  - : Cette méthode renvoie un objet {{domxref("Attr")}} qui correspond au nom indiqué.
+- {{domxref("NamedNodeMap.setNamedItem()")}}
+  - : Cette méthode remplace ou ajoute l'objet {{domxref("Attr")}} identifié dans la collection par le nom indiqué.
+- {{domxref("NamedNodeMap.removeNamedItem()")}}
+  - : Cette méthode retire l'objet {{domxref("Attr")}} de la collection à partir du nom indiqué.
+- {{domxref("NamedNodeMap.item()")}}
+  - : Cette méthode renvoie l'objet {{domxref("Attr")}} à l'index indiqué (ou `null` si l'index est supérieur ou égal au nombre de nœuds.
+- {{domxref("NamedNodeMap.getNamedItemNS()")}}
+  - : Cette méthode renvoie un objet {{domxref("Attr")}} identifié par un espace de noms et un nom local associé.
+- {{domxref("NamedNodeMap.setNamedItemNS()")}}
+  - : Cette méthode remplace ou ajoute un objet {{domxref("Attr")}} identifié par un espace de noms et un nom local associé.
+- {{domxref("NamedNodeMap.removeNamedItemNS()")}}
+  - : Cette méthode retire l'objet {{domxref("Attr")}} de la collection à partir d'un espace de noms et d'un nom local associé.
 
-<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('DOM WHATWG', '#interface-namednodemap', 'NamedNodeMap')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Interagit avec {{domxref("Attr")}} plutôt qu'avec {{domxref("Node")}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM3 Core', 'core.html#ID-1780488922', 'NamedNodeMap')}}</td>
-   <td>{{Spec2('DOM3 Core')}}</td>
-   <td>Aucune modification depuis {{SpecName('DOM2 Core')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Core', 'core.html#ID-1780488922', 'NamedNodeMap')}}</td>
-   <td>{{Spec2('DOM2 Core')}}</td>
-   <td>Ajout des méthodes <code>getNamedItemNS()</code>, <code>setNamedItemNS()</code> et <code>removeNamedItemNS()</code></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM1', 'core.html#ID-1780488922', 'NamedNodeMap')}}</td>
-   <td>{{Spec2('DOM1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                | État                             | Commentaires                                                                       |
+| -------------------------------------------------------------------------------------------- | -------------------------------- | ---------------------------------------------------------------------------------- |
+| {{SpecName('DOM WHATWG', '#interface-namednodemap', 'NamedNodeMap')}} | {{Spec2('DOM WHATWG')}} | Interagit avec {{domxref("Attr")}} plutôt qu'avec {{domxref("Node")}}    |
+| {{SpecName('DOM3 Core', 'core.html#ID-1780488922', 'NamedNodeMap')}} | {{Spec2('DOM3 Core')}}     | Aucune modification depuis {{SpecName('DOM2 Core')}}                        |
+| {{SpecName('DOM2 Core', 'core.html#ID-1780488922', 'NamedNodeMap')}} | {{Spec2('DOM2 Core')}}     | Ajout des méthodes `getNamedItemNS()`, `setNamedItemNS()` et `removeNamedItemNS()` |
+| {{SpecName('DOM1', 'core.html#ID-1780488922', 'NamedNodeMap')}}         | {{Spec2('DOM1')}}         | Définition initiale.                                                               |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.NamedNodeMap")}}</p>
+{{Compat("api.NamedNodeMap")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("Element.attributes")}}</li>
- <li>{{domxref("Attr")}}</li>
- <li>{{domxref("NodeList")}}</li>
-</ul>
+- {{domxref("Element.attributes")}}
+- {{domxref("Attr")}}
+- {{domxref("NodeList")}}
diff --git a/files/fr/web/api/navigator/battery/index.md b/files/fr/web/api/navigator/battery/index.md
index 59595e4a78..7b28c3c973 100644
--- a/files/fr/web/api/navigator/battery/index.md
+++ b/files/fr/web/api/navigator/battery/index.md
@@ -3,44 +3,41 @@ title: window.navigator.battery
 slug: Web/API/Navigator/battery
 translation_of: Web/API/Navigator/battery
 ---
-<p>{{ Apiref() }}</p>
+{{ Apiref() }}
 
-<p>{{ SeeCompatTable() }}</p>
+{{ SeeCompatTable() }}
 
-<p>L'API Battery Status fournit des informations sur le niveau de charge du système et vous permet d'être notifiée via certains évènements si le niveau de batterie varie. Elle peut être utilisée pour privilégier les tâches moins gourmantes en traitement processeur sur votre site si le niveau de batterie est faible ou permettre une sauvegarde de vos travaux pour prévir d'une perte de données si la batterie est presque vide.</p>
+L'API Battery Status fournit des informations sur le niveau de charge du système et vous permet d'être notifiée via certains évènements si le niveau de batterie varie. Elle peut être utilisée pour privilégier les tâches moins gourmantes en traitement processeur sur votre site si le niveau de batterie est faible ou permettre une sauvegarde de vos travaux pour prévir d'une perte de données si la batterie est presque vide.
 
-<h2 id="Attributs">Attributs</h2>
+## Attributs
 
-<dl>
- <dt><code>charging</code></dt>
- <dd><strong>Lecture seule</strong>. Un booléen représentant le statut de charge de la batterie du système. Il retourne <code>vrai</code> si la batterie est en charge, si l'état de charge n'est pas déterminable, ou si aucune batterie n'est branchée au système. Retourne <code>faux</code> si la batterie est en cours de décharge.</dd>
- <dt><code>chargingTime</code></dt>
- <dd><strong>Lecture seule</strong>. Un double représentant le temps restant en secondes avant que la batterie ne soit complètement chargée. Retourne 0 si la batterie est complètement chargée.<br>
- Retourne un infini positif si la batterie se décharge ou si l'implémentation est incapable de déterminer le temps de charge restant.</dd>
- <dt><code>dischargingTime</code></dt>
- <dd><strong>Lecture seule</strong>. Un double représentant le temps restant en secondes avant que la batterie ne soit complètement déchargée et que le système ne soit suspendu. Retourne un infini positif si la batterie est en charge, si l'implémentation n'est pas capable de déterminer le temps de décharge restant, ou s'il n'y a pas de batterie branchée au système.</dd>
- <dt><code>level</code></dt>
- <dd><strong>Lecture seule</strong>. Un double représentant le niveau de charge de la batterie du système, échelonné de 0 à 1.0. Retourne 0 si la batterie est vide et que le système est sur le point d'être suspendu. Retourne 1.0 si la batterie est pleine, si l'implémentation n'est pas capable de déterminer le niveau de charge de la batterie, ou s'il n'y a pas de batterie branchée au système.</dd>
-</dl>
+- `charging`
+  - : **Lecture seule**. Un booléen représentant le statut de charge de la batterie du système. Il retourne `vrai` si la batterie est en charge, si l'état de charge n'est pas déterminable, ou si aucune batterie n'est branchée au système. Retourne `faux` si la batterie est en cours de décharge.
+- `chargingTime`
+  - : **Lecture seule**. Un double représentant le temps restant en secondes avant que la batterie ne soit complètement chargée. Retourne 0 si la batterie est complètement chargée.
+    Retourne un infini positif si la batterie se décharge ou si l'implémentation est incapable de déterminer le temps de charge restant.
+- `dischargingTime`
+  - : **Lecture seule**. Un double représentant le temps restant en secondes avant que la batterie ne soit complètement déchargée et que le système ne soit suspendu. Retourne un infini positif si la batterie est en charge, si l'implémentation n'est pas capable de déterminer le temps de décharge restant, ou s'il n'y a pas de batterie branchée au système.
+- `level`
+  - : **Lecture seule**. Un double représentant le niveau de charge de la batterie du système, échelonné de 0 à 1.0. Retourne 0 si la batterie est vide et que le système est sur le point d'être suspendu. Retourne 1.0 si la batterie est pleine, si l'implémentation n'est pas capable de déterminer le niveau de charge de la batterie, ou s'il n'y a pas de batterie branchée au système.
 
-<h2 id="Evènements">Evènements</h2>
+## Evènements
 
-<dl>
- <dt><code>chargingchange</code></dt>
- <dd>Déclenché lorsque l'état de charge de la batterie est mis à jour.</dd>
- <dt><code>chargingtimechange</code></dt>
- <dd>Déclenché lorsque le temps de charge de la batterie est mis à jour.</dd>
- <dt><code>dischargingtimechange</code></dt>
- <dd>Déclenché lorsque le temps de decharge de la batterie est mis à jour.</dd>
- <dt><code>levelchange</code></dt>
- <dd>Déclenché lorsque le niveau de charge de la batterie est mis à jour.</dd>
-</dl>
+- `chargingchange`
+  - : Déclenché lorsque l'état de charge de la batterie est mis à jour.
+- `chargingtimechange`
+  - : Déclenché lorsque le temps de charge de la batterie est mis à jour.
+- `dischargingtimechange`
+  - : Déclenché lorsque le temps de decharge de la batterie est mis à jour.
+- `levelchange`
+  - : Déclenché lorsque le niveau de charge de la batterie est mis à jour.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Voir aussi <a href="http://dev.w3.org/2009/dap/system-info/battery-status.html#introduction">l'exemple dans la specification</a>.</p>
+Voir aussi [l'exemple dans la specification](http://dev.w3.org/2009/dap/system-info/battery-status.html#introduction).
 
-<pre class="brush: js">var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery;
+```js
+var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery;
 
 function updateBatteryStatus() {
   alert("Battery status: " + battery.level * 100 + " %");
@@ -53,15 +50,13 @@ function updateBatteryStatus() {
 battery.addEventListener("chargingchange", updateBatteryStatus);
 battery.addEventListener("levelchange", updateBatteryStatus);
 updateBatteryStatus();
-</pre>
+```
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Navigator.battery")}}</p>
+{{Compat("api.Navigator.battery")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="http://hacks.mozilla.org/2012/02/using-the-battery-api-part-of-webapi/">Blog post - Using the Battery API</a></li>
- <li><a href="http://davidwalsh.name/battery-api">David Walsh on the Javascript Battery Api</a></li>
-</ul>
\ No newline at end of file
+- [Blog post - Using the Battery API](http://hacks.mozilla.org/2012/02/using-the-battery-api-part-of-webapi/)
+- [David Walsh on the Javascript Battery Api](http://davidwalsh.name/battery-api)
diff --git a/files/fr/web/api/navigator/connection/index.md b/files/fr/web/api/navigator/connection/index.md
index 5d46c33194..e2e9f34956 100644
--- a/files/fr/web/api/navigator/connection/index.md
+++ b/files/fr/web/api/navigator/connection/index.md
@@ -9,39 +9,24 @@ tags:
   - Propriété
 translation_of: Web/API/Navigator/connection
 ---
-<p>{{APIRef("Network Information API")}}{{SeeCompatTable}}</p>
+{{APIRef("Network Information API")}}{{SeeCompatTable}}
 
-<p><code><strong>Navigator.connection</strong></code> est une propriété en lecture seule, elle représente une {{domxref("NetworkInformation")}} qui contient les informations de la connexion du système, telles que la  bande passante actuelle du périphérique utilisateur ou si la connexion est mesurée. La propriété peut être utilisée pour sélectionner un contenu en haute ou basse définition, dépendant de la connexion de l'utilisateur.</p>
+**`Navigator.connection`** est une propriété en lecture seule, elle représente une {{domxref("NetworkInformation")}} qui contient les informations de la connexion du système, telles que la  bande passante actuelle du périphérique utilisateur ou si la connexion est mesurée. La propriété peut être utilisée pour sélectionner un contenu en haute ou basse définition, dépendant de la connexion de l'utilisateur.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>connexionInfo</em> = navigator.connection</pre>
+    connexionInfo = navigator.connection
 
-<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">Commentaire</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('Network Information', '#h-the-connection-attribute', 'Navigator.connection')}}</td>
-   <td>{{Spec2('Network Information')}}</td>
-   <td>Spécification initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                            | État                                         | Commentaire            |
+| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------- | ---------------------- |
+| {{SpecName('Network Information', '#h-the-connection-attribute', 'Navigator.connection')}} | {{Spec2('Network Information')}} | Spécification initiale |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Navigator.connection")}}</p>
+{{Compat("api.Navigator.connection")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li><a href="/fr/docs/Web/API/NavigatorOnLine/Online_and_offline_events">Évènements online et offline</a></li>
-</ul>
+- [Évènements online et offline](/fr/docs/Web/API/NavigatorOnLine/Online_and_offline_events)
diff --git a/files/fr/web/api/navigator/cookieenabled/index.md b/files/fr/web/api/navigator/cookieenabled/index.md
index 91d3ae78e0..babc7e40fb 100644
--- a/files/fr/web/api/navigator/cookieenabled/index.md
+++ b/files/fr/web/api/navigator/cookieenabled/index.md
@@ -3,47 +3,32 @@ title: Navigator.cookieEnabled
 slug: Web/API/Navigator/cookieEnabled
 translation_of: Web/API/Navigator/cookieEnabled
 ---
-<p>{{ ApiRef("HTML DOM") }}</p>
+{{ ApiRef("HTML DOM") }}
 
-<p><code>navigator.cookieEnabled</code> retourne une valeur booléenne qui indique si les cookies sont activés. Cette propriété est en lecture seule.</p>
+`navigator.cookieEnabled` retourne une valeur booléenne qui indique si les cookies sont activés. Cette propriété est en lecture seule.
 
-<h2 id="Syntax">Syntax</h2>
+## Syntax
 
-<pre class="brush: js">var cookieEnabled = navigator.cookieEnabled;
-</pre>
+```js
+var cookieEnabled = navigator.cookieEnabled;
+```
 
-<ul>
- <li><code>cookieEnabled</code> est un <a href="/en-US/docs/Glossary/Boolean">Boolean</a>: <code>true</code> ou <code>false</code>.</li>
-</ul>
+- `cookieEnabled` est un [Boolean](/en-US/docs/Glossary/Boolean): `true` ou `false`.
 
-<h2 id="Example">Example</h2>
+## Example
 
-<pre class="brush: js">if (!navigator.cookieEnabled) {
+```js
+if (!navigator.cookieEnabled) {
   // Ce navigateur ne supporte pas ou bloque les cookies.
 }
-</pre>
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("HTML WHATWG", "webappapis.html#dom-navigator-cookieenabled", "Navigator.cookieEnabled")}}</td>
-   <td>{{Spec2("HTML WHATWG")}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Specification                                                                                                                            | Status                           | Comment             |
+| ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- |
+| {{SpecName("HTML WHATWG", "webappapis.html#dom-navigator-cookieenabled", "Navigator.cookieEnabled")}} | {{Spec2("HTML WHATWG")}} | Définition initiale |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-
-
-<p>{{Compat("api.Navigator.cookieEnabled")}}</p>
+{{Compat("api.Navigator.cookieEnabled")}}
diff --git a/files/fr/web/api/navigator/credentials/index.md b/files/fr/web/api/navigator/credentials/index.md
index 0629fcfe44..fb3d7063cc 100644
--- a/files/fr/web/api/navigator/credentials/index.md
+++ b/files/fr/web/api/navigator/credentials/index.md
@@ -9,21 +9,22 @@ tags:
   - Reference
 translation_of: Web/API/Navigator/credentials
 ---
-<p>{{securecontext_header}}{{APIRef("")}}</p>
+{{securecontext_header}}{{APIRef("")}}
 
-<p>La propriété <strong><code>credentials</code></strong>, rattachée à l'interface {{domxref("Navigator")}}, renvoie l'interface {{domxref("CredentialsContainer")}} qui expose des méthodes pour demander des informations d'authentification. L'interface {{domxref("CredentialsContainer")}} notifie également l'agent utilisateur lorsqu'un évènement pertinent se produit (une connexion ou une déconnexion réussie par exemple). Cette propriété peut être utilisée pour détecter si la fonctionnalité est prise en charge ou non.</p>
+La propriété **`credentials`**, rattachée à l'interface {{domxref("Navigator")}}, renvoie l'interface {{domxref("CredentialsContainer")}} qui expose des méthodes pour demander des informations d'authentification. L'interface {{domxref("CredentialsContainer")}} notifie également l'agent utilisateur lorsqu'un évènement pertinent se produit (une connexion ou une déconnexion réussie par exemple). Cette propriété peut être utilisée pour détecter si la fonctionnalité est prise en charge ou non.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var credentialsContainer = navigator.credentials</pre>
+    var credentialsContainer = navigator.credentials
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>L'interface {{domxref("CredentialsContainer")}}.</p>
+L'interface {{domxref("CredentialsContainer")}}.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: js">if ('credentials' in navigator) {
+```js
+if ('credentials' in navigator) {
   navigator.credentials.get({password: true})
   .then(function(creds) {
     // Gérer les informations d'authentification
@@ -31,27 +32,14 @@ translation_of: Web/API/Navigator/credentials
 } else {
   // Gérer la connexion comme avant
 };
-</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('Credential Management')}}</td>
-   <td>{{Spec2('Credential Management')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Navigator.credentials")}}</p>
+```
+
+## Spécifications
+
+| Spécification                                    | État                                         | Commentaires         |
+| ------------------------------------------------ | -------------------------------------------- | -------------------- |
+| {{SpecName('Credential Management')}} | {{Spec2('Credential Management')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Navigator.credentials")}}
diff --git a/files/fr/web/api/navigator/donottrack/index.md b/files/fr/web/api/navigator/donottrack/index.md
index 9acf7c3241..ae9cce2869 100644
--- a/files/fr/web/api/navigator/donottrack/index.md
+++ b/files/fr/web/api/navigator/donottrack/index.md
@@ -8,48 +8,31 @@ tags:
   - Reference
 translation_of: Web/API/Navigator/doNotTrack
 ---
-<p>{{ApiRef("HTML DOM")}}{{SeeCompatTable}}</p>
+{{ApiRef("HTML DOM")}}{{SeeCompatTable}}
 
-<p>Renvoi le paramètre utilisateur de <strong>do-not-track</strong>. Cette valeur est "1" si l´utilisateur a demandé de ne pas être suivi par les sites web, le contenu ou la publicité.</p>
+Renvoi le paramètre utilisateur de **do-not-track**. Cette valeur est "1" si l´utilisateur a demandé de ne pas être suivi par les sites web, le contenu ou la publicité.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="eval"><em>dnt</em> = <em>navigator</em>.doNotTrack;
-</pre>
+    dnt = navigator.doNotTrack;
 
-<p>La valeur reflète celle de l'en-tête "do-not-track" <em>(ne pas suivre)</em>, c'est-à-dire {"1", "0", "unspecified" }. Note : Avant Gecko 32, Gecko a utilisé les valeurs { "yes", "no", "unspecified"} (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=887703">bug 887703</a>).</p>
+La valeur reflète celle de l'en-tête "do-not-track" _(ne pas suivre)_, c'est-à-dire {"1", "0", "unspecified" }. Note : Avant Gecko 32, Gecko a utilisé les valeurs { "yes", "no", "unspecified"} ([bug 887703](https://bugzilla.mozilla.org/show_bug.cgi?id=887703)).
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="eval">dump(window.navigator.doNotTrack);
-//  écrit "1" si DNT est activé; "0" si l'utilisateur a opté pour le suivi; sinon c'est "unspecified" <em>(non spécifié)</em>
-</pre>
+    dump(window.navigator.doNotTrack);
+    //  écrit "1" si DNT est activé; "0" si l'utilisateur a opté pour le suivi; sinon c'est "unspecified" (non spécifié)
 
-<h2 id="Specification">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("Tracking", "#widl-Navigator-doNotTrack", "Navigator.doNotTrack")}}</td>
-   <td>{{Spec2("Tracking")}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                            | Statut                       | Commentaire         |
+| -------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------------- |
+| {{SpecName("Tracking", "#widl-Navigator-doNotTrack", "Navigator.doNotTrack")}} | {{Spec2("Tracking")}} | Définition initiale |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Navigator.doNotTrack")}}</p>
+{{Compat("api.Navigator.doNotTrack")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/Security/Do_not_track_field_guide">Le guide pratique Do Not Track</a></li>
-</ul>
+- [Le guide pratique Do Not Track](/fr/docs/Web/Security/Do_not_track_field_guide)
diff --git a/files/fr/web/api/navigator/geolocation/index.md b/files/fr/web/api/navigator/geolocation/index.md
index 3d534b7c95..c247e35ace 100644
--- a/files/fr/web/api/navigator/geolocation/index.md
+++ b/files/fr/web/api/navigator/geolocation/index.md
@@ -9,44 +9,26 @@ tags:
   - Reference
 translation_of: Web/API/Navigator/geolocation
 ---
-<div>{{APIRef("Geolocation API")}}</div>
+{{APIRef("Geolocation API")}}
 
-<p><strong><code>Navigator.geolocation</code></strong> est une propriété en lecture seule, qui retoune un objet {{domxref("Geolocation")}} donnant accès aux contenus web de localisation de l'appareil. Ceci permet à un site Internet ou à une application d'offrir des résultats personnalisés basés sur la localisation des utilisateurs.</p>
+**`Navigator.geolocation`** est une propriété en lecture seule, qui retoune un objet {{domxref("Geolocation")}} donnant accès aux contenus web de localisation de l'appareil. Ceci permet à un site Internet ou à une application d'offrir des résultats personnalisés basés sur la localisation des utilisateurs.
 
-<div class="note">
-<p><strong>Note:</strong> Pour des raisons de sécurité, quand une page web essaie d'accéder aux informations de localisation, l'utilisateur reçoit une notification qui lui demande la permission d'activer cette fonctionnalité. Chaque navigateur a sa propre politique et ses propres méthodes pour demander cette permission.</p>
-</div>
+> **Note :** Pour des raisons de sécurité, quand une page web essaie d'accéder aux informations de localisation, l'utilisateur reçoit une notification qui lui demande la permission d'activer cette fonctionnalité. Chaque navigateur a sa propre politique et ses propres méthodes pour demander cette permission.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var>geo</var> = <var>navigator</var>.geolocation
-</pre>
+    geo = navigator.geolocation
 
-<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('Geolocation', '#navi-geo', 'Navigator.geolocation')}}</td>
-   <td>{{Spec2('Geolocation')}}</td>
-   <td>Initial definition</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                            | Statut                           | Commentaire        |
+| ---------------------------------------------------------------------------------------- | -------------------------------- | ------------------ |
+| {{SpecName('Geolocation', '#navi-geo', 'Navigator.geolocation')}} | {{Spec2('Geolocation')}} | Initial definition |
 
-<h2 id="Browser_compatibility">Compatibilité navigateur</h2>
+## Compatibilité navigateur
 
-<p>{{Compat("api.Navigator.geolocation")}}</p>
+{{Compat("api.Navigator.geolocation")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li><a href="/fr/docs/WebAPI/Using_geolocation">Utiliser la géolocalisation</a></li>
-</ul>
+- [Utiliser la géolocalisation](/fr/docs/WebAPI/Using_geolocation)
diff --git a/files/fr/web/api/navigator/getgamepads/index.md b/files/fr/web/api/navigator/getgamepads/index.md
index 0f7480f238..5ca49cb54c 100644
--- a/files/fr/web/api/navigator/getgamepads/index.md
+++ b/files/fr/web/api/navigator/getgamepads/index.md
@@ -3,51 +3,38 @@ title: Navigator.getGamepads()
 slug: Web/API/Navigator/getGamepads
 translation_of: Web/API/Navigator/getGamepads
 ---
-<p>{{ APIRef("Navigator") }}{{SeeCompatTable}}</p>
+{{ APIRef("Navigator") }}{{SeeCompatTable}}
 
-<p>La méthode <strong><code>Navigator.getGamepads()</code></strong> renvoie un tableau d'objets {{ domxref("Gamepad") }}, un par contrôleur connecté à la machine.</p>
+La méthode **`Navigator.getGamepads()`** renvoie un tableau d'objets {{ domxref("Gamepad") }}, un par contrôleur connecté à la machine.
 
-<p>Des éléments dans le tableau peuvent être <code>null</code> si un contrôleur est déconnecté durant la session, ainsi les autres restants gardent le même indice.</p>
+Des éléments dans le tableau peuvent être `null` si un contrôleur est déconnecté durant la session, ainsi les autres restants gardent le même indice.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"> var arrayGP = navigator.getGamepads();</pre>
+     var arrayGP = navigator.getGamepads();
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">window.addEventListener("gamepadconnected", function(e) {
+```js
+window.addEventListener("gamepadconnected", function(e) {
   var gp = navigator.getGamepads()[0];
   console.log("Contrôleur n°%d connecté : %s. %d boutons, %d axes.",
   gp.index, gp.id,
   gp.buttons.length, gp.axes.length);
-});</pre>
+});
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Gamepad', '', 'The Gamepad API specification')}}</td>
-   <td>{{Spec2('Gamepad')}}</td>
-   <td>Première définition.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                    | Statut                       | Commentaire          |
+| -------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('Gamepad', '', 'The Gamepad API specification')}} | {{Spec2('Gamepad')}} | Première définition. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
+{{Compat("api.Navigator.getGamepads")}}
 
+## Voir aussi
 
-<p>{{Compat("api.Navigator.getGamepads")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/Guide/API/Gamepad">Utiliser l'API Gamepad</a></li>
- <li><a href="/fr/docs/Web/API/Gamepad_API">L'API Gamepad</a></li>
-</ul>
+- [Utiliser l'API Gamepad](/fr/docs/Web/Guide/API/Gamepad)
+- [L'API Gamepad](/fr/docs/Web/API/Gamepad_API)
diff --git a/files/fr/web/api/navigator/getusermedia/index.md b/files/fr/web/api/navigator/getusermedia/index.md
index 2c2d6edcac..32c5946175 100644
--- a/files/fr/web/api/navigator/getusermedia/index.md
+++ b/files/fr/web/api/navigator/getusermedia/index.md
@@ -10,55 +10,55 @@ tags:
 translation_of: Web/API/Navigator/getUserMedia
 original_slug: NavigatorUserMedia.getUserMedia
 ---
-<div>{{APIRef("Media Capture and Streams")}}{{deprecated_header}}</div>
+{{APIRef("Media Capture and Streams")}}{{deprecated_header}}
 
-<p>La fonction obsolète <strong>Navigator.getUserMedia()</strong> demande à l'utilisateur la permission d'utiliser une entrée vidéo (ex: une webcam ou un écran partagé) ou audio (ex: un microphone) de l'utilisateur.</p>
+La fonction obsolète **Navigator.getUserMedia()** demande à l'utilisateur la permission d'utiliser une entrée vidéo (ex: une webcam ou un écran partagé) ou audio (ex: un microphone) de l'utilisateur.
 
-<p>Si ce dernier l'autorise, un {{domxref("MediaStream")}} est transmis au callback spécifié, il contient les pistes audio et/ou vidéo des entrées autorisées. Si l'utilisateur refuse l'accès, que le périphérique n'existe pas, ou qu'une erreur quelconque se produit, le callback d'erreur est alors exécuté avec comme paramètre un objet {{domxref("MediaStreamError")}}, il décrit l'erreur qui vient de se produire. Si l'utilisateur ne fait aucun choix, aucun callback n'est exécuté.</p>
+Si ce dernier l'autorise, un {{domxref("MediaStream")}} est transmis au callback spécifié, il contient les pistes audio et/ou vidéo des entrées autorisées. Si l'utilisateur refuse l'accès, que le périphérique n'existe pas, ou qu'une erreur quelconque se produit, le callback d'erreur est alors exécuté avec comme paramètre un objet {{domxref("MediaStreamError")}}, il décrit l'erreur qui vient de se produire. Si l'utilisateur ne fait aucun choix, aucun callback n'est exécuté.
 
-<div class="note">
-<p><strong>Note :</strong> Il s'agit d'une ancienne méthode, veuillez utiliser la méthode {{domxref("MediaDevices.getUserMedia", "navigator.mediaDevices.getUserMedia()")}} à la place. Bien qu'elle ne soit pas techniquement obsolète, l'utilisation de callbacks l'est, les spécifications encouragent fortamment l'utilisation de la nouvelle version avec {{jsxref("promise", "promesses")}}.</p>
-</div>
+> **Note :** Il s'agit d'une ancienne méthode, veuillez utiliser la méthode {{domxref("MediaDevices.getUserMedia", "navigator.mediaDevices.getUserMedia()")}} à la place. Bien qu'elle ne soit pas techniquement obsolète, l'utilisation de callbacks l'est, les spécifications encouragent fortamment l'utilisation de la nouvelle version avec {{jsxref("promise", "promesses")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">navigator.getUserMedia(constraints, successCallback, errorCallback);</pre>
+    navigator.getUserMedia(constraints, successCallback, errorCallback);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt>constraints</dt>
- <dd>Un objet {{domxref("MediaStreamConstraints")}} spécifiant les types de médias que vous souhaitez recevoir, ainsi que les contraintes pour chaque type de média. Pour plus de détails, voir la section <a href="/fr/docs/Web/API/MediaDevices/getUserMedia#Syntaxe">constraints</a> de la méthode {{domxref("MediaDevices.getUserMedia()")}}, ainsi que l'article <a href="/fr/docs/Web/API/Media_Streams_API/Constraints">Capacités, constraintes, et configurations</a>.</dd>
- <dt>successCallback</dt>
- <dd>Une fonction qui est invoquée lorsque la demande d'accès aux entrées média est acceptée. Cette fonction est appellée avec un paramètre: l'objet {{domxref("MediaStream")}} qui contient les flux de médias. Votre callback peut assigner le stream l'objet que vous désirez (ex: un élément {{HTMLElement("audio")}} ou {{HTMLElement("video")}}), comme dans l'exemple suivant:
- <pre class="brush: js">function(stream) {
-   var video = document.querySelector('video');
-   video.src = window.URL.createObjectURL(stream);
-   video.onloadedmetadata = function(e) {
-      // Do something with the video here.
-   };
-}
-</pre>
- </dd>
- <dt>errorCallback</dt>
- <dd>Lorsque l'appel échoue, la fonction spécifiée dans <code>errorCallback</code> est appelée avec comme seul argument l'objet {{domxref("MediaStreamError")}}. Cet objet ressemble à {{domxref("DOMException")}}. Voir {anch("Erreurs")}} plus bas sur cette page pour voir quelle erreur peut arriver.</dd>
-</dl>
+- constraints
+  - : Un objet {{domxref("MediaStreamConstraints")}} spécifiant les types de médias que vous souhaitez recevoir, ainsi que les contraintes pour chaque type de média. Pour plus de détails, voir la section [constraints](/fr/docs/Web/API/MediaDevices/getUserMedia#Syntaxe) de la méthode {{domxref("MediaDevices.getUserMedia()")}}, ainsi que l'article [Capacités, constraintes, et configurations](/fr/docs/Web/API/Media_Streams_API/Constraints).
+- successCallback
+
+  - : Une fonction qui est invoquée lorsque la demande d'accès aux entrées média est acceptée. Cette fonction est appellée avec un paramètre: l'objet {{domxref("MediaStream")}} qui contient les flux de médias. Votre callback peut assigner le stream l'objet que vous désirez (ex: un élément {{HTMLElement("audio")}} ou {{HTMLElement("video")}}), comme dans l'exemple suivant:
+
+    ```js
+    function(stream) {
+       var video = document.querySelector('video');
+       video.src = window.URL.createObjectURL(stream);
+       video.onloadedmetadata = function(e) {
+          // Do something with the video here.
+       };
+    }
+    ```
+
+- errorCallback
+  - : Lorsque l'appel échoue, la fonction spécifiée dans `errorCallback` est appelée avec comme seul argument l'objet {{domxref("MediaStreamError")}}. Cet objet ressemble à {{domxref("DOMException")}}. Voir {anch("Erreurs")}} plus bas sur cette page pour voir quelle erreur peut arriver.
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+### Valeur de retour
 
-<p>{{domxref("undefined")}}.</p>
+{{domxref("undefined")}}.
 
-<h3 id="Erreurs">Erreurs</h3>
+### Erreurs
 
-<p>{{page("/fr/docs/Web/API/MediaDevices/getUserMedia", "Errors")}}</p>
+{{page("/fr/docs/Web/API/MediaDevices/getUserMedia", "Errors")}}
 
-<h2 id="Exemples"><strong>Exemples</strong></h2>
+## **Exemples**
 
-<h3 id="Largeur_et_hauteur">Largeur et hauteur</h3>
+### Largeur et hauteur
 
-<p>Voici un exemple de l'utilisation de <code>getUserMedia()</code>, avec les différentes mises en oeuvres pour couvrir les préfixes navigateurs. Remarquez que ceci est la façon dépréciée de procéder. Regardez les <a href="/en-US/docs/Web/API/MediaDevices/getUserMedia#Frame_rate">exemples</a> sous la section {{domxref("MediaDevices.getUserMedia()")}} pour les exemples modernes.</p>
+Voici un exemple de l'utilisation de `getUserMedia()`, avec les différentes mises en oeuvres pour couvrir les préfixes navigateurs. Remarquez que ceci est la façon dépréciée de procéder. Regardez les [exemples](/en-US/docs/Web/API/MediaDevices/getUserMedia#Frame_rate) sous la section {{domxref("MediaDevices.getUserMedia()")}} pour les exemples modernes.
 
-<pre class="brush: js">navigator.getUserMedia = navigator.getUserMedia ||
+```js
+navigator.getUserMedia = navigator.getUserMedia ||
                          navigator.webkitGetUserMedia ||
                          navigator.mozGetUserMedia;
 
@@ -77,13 +77,15 @@ if (navigator.getUserMedia) {
    );
 } else {
    console.log("getUserMedia not supported");
-}</pre>
+}
+```
 
-<h2 id="Permissions">Permissions</h2>
+## Permissions
 
-<p>Pour utiliser <code>getUserMedia()</code> dans une application installable (par exemple une application Firefox OS), vous devez spécifier un ou plusieurs des champs suivants dans le fichier de manifest.</p>
+Pour utiliser `getUserMedia()` dans une application installable (par exemple une application Firefox OS), vous devez spécifier un ou plusieurs des champs suivants dans le fichier de manifest.
 
-<pre class="brush: js">"permissions": {
+```js
+"permissions": {
   "audio-capture": {
     "description": "Required to capture audio using getUserMedia()"
   },
@@ -91,42 +93,25 @@ if (navigator.getUserMedia) {
     "description": "Required to capture video using getUserMedia()"
   }
 }
-</pre>
-
-<p>See <a href="/en-US/Apps/Developing/App_permissions#audio-capture">permission: audio-capture</a> and <a href="/en-US/Apps/Developing/App_permissions#video-capture">permission: video-capture</a> for more information.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécifications</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('Media Capture', '#navigatorusermedia-interface-extensions', 'navigator.getUserMedia')}}</td>
-   <td>{{Spec2('Media Capture')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<div class="warning">
-  <p><strong>Attention :</strong> Le nouveau code doit utiliser {{domxref("Navigator.mediaDevices.getUserMedia()")}} à la place.</p>
-</div>
-
-<p>{{Compat("api.Navigator.getUserMedia")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("MediaDevices.getUserMedia()")}} qui remplace cette méthode dépréciée.</li>
- <li><a href="/en-US/docs/WebRTC">WebRTC</a> - page d'introduction aux APIS</li>
- <li><a href="/en-US/docs/WebRTC/MediaStream_API">MediaStream API</a> - L'API des Media Streams Objects</li>
- <li><a href="/en-US/docs/WebRTC/taking_webcam_photos">Taking webcam photos</a> - un tutoriel à propos de l'utilisation de  <code>getUserMedia()</code> pour prendre des photos plutôt que des vidéos.</li>
-</ul>
+```
+
+See [permission: audio-capture](/en-US/Apps/Developing/App_permissions#audio-capture) and [permission: video-capture](/en-US/Apps/Developing/App_permissions#video-capture) for more information.
+
+## Spécifications
+
+| Spécifications                                                                                                                       | Statut                               | Commentaire          |
+| ------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- |
+| {{SpecName('Media Capture', '#navigatorusermedia-interface-extensions', 'navigator.getUserMedia')}} | {{Spec2('Media Capture')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+> **Attention :** Le nouveau code doit utiliser {{domxref("Navigator.mediaDevices.getUserMedia()")}} à la place.
+
+{{Compat("api.Navigator.getUserMedia")}}
+
+## Voir aussi
+
+- {{domxref("MediaDevices.getUserMedia()")}} qui remplace cette méthode dépréciée.
+- [WebRTC](/en-US/docs/WebRTC) - page d'introduction aux APIS
+- [MediaStream API](/en-US/docs/WebRTC/MediaStream_API) - L'API des Media Streams Objects
+- [Taking webcam photos](/en-US/docs/WebRTC/taking_webcam_photos) - un tutoriel à propos de l'utilisation de  `getUserMedia()` pour prendre des photos plutôt que des vidéos.
diff --git a/files/fr/web/api/navigator/index.md b/files/fr/web/api/navigator/index.md
index 6c258f9873..85798a44ed 100644
--- a/files/fr/web/api/navigator/index.md
+++ b/files/fr/web/api/navigator/index.md
@@ -11,168 +11,145 @@ tags:
   - Web Performance
 translation_of: Web/API/Navigator
 ---
-<div>{{APIRef("DOM")}}</div>
-
-<p>L'interface <code><strong>Navigator</strong></code> représente l'état et l'identité de l'agent utilisateur courant. Elle permet aux scripts de consulter ces informations et de s'enregistrer en vue de certaines activités.</p>
-
-<p>Un objet instanciant <code>Navigator</code> peut être récupéré grâce à la propriété en lecture seule <a href="/fr/docs/Web/API/Window/navigator"><code>window.navigator</code></a>.</p>
-
-<h2 id="Properties">Propriétés</h2>
-
-<p><em>Cette interface n'hérite d'aucune propriété mais implémente celles définies par <a href="/fr/docs/Web/API/NavigatorID"><code>NavigatorID</code></a>, <a href="/fr/docs/Web/API/NavigatorLanguage"><code>NavigatorLanguage</code></a>, <a href="/fr/docs/Web/API/NavigatorOnLine"><code>NavigatorOnLine</code></a>, <a href="/fr/docs/Web/API/NavigatorContentUtils"><code>NavigatorContentUtils</code></a>, <a href="/fr/docs/Web/API/NavigatorStorage"><code>NavigatorStorage</code></a>, <a href="/fr/docs/Web/API/NavigatorStorageUtils"><code>NavigatorStorageUtils</code></a>, <a href="/fr/docs/Web/API/NavigatorConcurrentHardware"><code>NavigatorConcurrentHardware</code></a>, <a href="/fr/docs/Web/API/NavigatorPlugins"><code>NavigatorPlugins</code></a> et <a href="/fr/docs/Web/API/NavigatorUserMedia"><code>NavigatorUserMedia</code></a>.</em></p>
-
-<h3 id="Standard_properties">Propriétés standard</h3>
-
-<dl>
- <dt><a href="/fr/docs/Web/API/Navigator/connection"><code>Navigator.connection</code></a> {{readonlyInline}} {{experimental_inline}}</dt>
- <dd>Fournit un objet <a href="/fr/docs/Web/API/NetworkInformation"><code>NetworkInformation</code></a> contenant des informations quant à la connection réseau de l'appareil.</dd>
- <dt><a href="/fr/docs/Web/API/Navigator/cookieEnabled"><code>Navigator.cookieEnabled</code></a> {{readonlyinline}}</dt>
- <dd>Renvoie un booléen indiquant si l'ajout d'un cookie sera pris en compte.</dd>
- <dt><a href="/fr/docs/Web/API/Navigator/credentials"><code>Navigator.credentials</code></a> {{readonlyInline}}</dt>
- <dd>Renvoie l'interface <a href="/fr/docs/Web/API/CredentialsContainer"><code>CredentialsContainer</code></a> qui expose des méthodes pour la demande d'informations d'authentification et qui notifie l'agent utilisateur lors d'évènements particuliers tels que les connexions ou déconnexions.</dd>
- <dt><a href="/fr/docs/Web/API/Navigator/deviceMemory"><code>Navigator.deviceMemory</code></a> {{readonlyInline}} {{experimental_inline}}</dt>
- <dd>Renvoie la quantité de mémoire de l'appareil, exprimée en gigaoctets. Cette valeur est une approximation calculée en prenant la plus proche puissance de 2 puis en divisant le résultat par 1024.</dd>
- <dt><a href="/fr/docs/Web/API/Navigator/doNotTrack"><code>Navigator.doNotTrack</code></a> {{readonlyInline}} {{experimental_inline}}</dt>
- <dd>Indique le choix de l'utilisateur fournit pour la préférence <i>do-not-track</i>. Lorsque cette valeur vaut "1", l'application web ne devrait pas pister l'utilisateur.</dd>
- <dt><a href="/fr/docs/Web/API/Navigator/geolocation"><code>Navigator.geolocation</code></a> {{readonlyInline}}</dt>
- <dd>Renvoie un objet <a href="/fr/docs/Web/API/Geolocation"><code>Geolocation</code></a> permettant l'accès à l'emplacement géographique de l'appareil.</dd>
- <dt><a href="/fr/docs/Web/API/NavigatorConcurrentHardware.hardwareConcurrency"><code>NavigatorConcurrentHardware.hardwareConcurrency</code></a> {{readonlyInline}}</dt>
- <dd>Renvoie le nombre de cœurs logiques du processeur.</dd>
- <dt><a href="/fr/docs/Web/API/NavigatorPlugins.javaEnabled"><code>NavigatorPlugins.javaEnabled</code></a> {{readonlyInline}}</dt>
- <dd>Renvoie le booléen <code>false</code>.</dd>
- <dt><a href="/fr/docs/Web/API/Navigator.keyboard"><code>Navigator.keyboard</code></a> {{readonlyinline}} {{experimental_inline}}</dt>
- <dd>Renvoie un objet <a href="/fr/docs/Web/API/Keyboard"><code>Keyboard</code></a> qui permet d'accéder à des fonctions pour récupérer des informations sur la disposition du clavier et la capture de touches du clavier physique.</dd>
- <dt><a href="/fr/docs/Web/API/NavigatorLanguage.language"><code>NavigatorLanguage.language</code></a> {{readonlyInline}}</dt>
- <dd>Renvoie une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> indiquant la langue préférée de l'utilisateur (qui correspond généralement à la langue utilisée pour l'interface utilisateur du navigateur). La valeur <code>null</code> est renvoyée si cette information est inconnue.</dd>
- <dt><a href="/fr/docs/Web/API/NavigatorLanguage.languages"><code>NavigatorLanguage.languages</code></a> {{readonlyInline}} {{experimental_inline}}</dt>
- <dd>Renvoie un tableau de chaînes <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui représente les langues connues de l'utilisateur, triées par ordre de préférence.</dd>
- <dt><a href="/fr/docs/Web/API/Navigator/locks"><code>Navigator.locks</code></a> {{readonlyinline}} {{experimental_inline}}</dt>
- <dd>Renvoie un objet <a href="/fr/docs/Web/API/LockManager"><code>LockManager</code></a> qui fournit des méthodes pour demander un nouvel objet <a href="/fr/docs/Web/API/Lock"><code>Lock</code></a> ou s'enquérir d'un objet <a href="/fr/docs/Web/API/Lock"><code>Lock</code></a> existant.</dd>
- <dt><a href="/fr/docs/Web/API/Navigator/maxTouchPoints"><code>Navigator.maxTouchPoints</code></a> {{readonlyInline}}</dt>
- <dd>Renvoie le nombre maximum de points de toucher simultanés possible pour l'appareil courant.</dd>
- <dt><a href="/fr/docs/Web/API/Navigator/mediaCapabilities"><code>Navigator.mediaCapabilities</code></a> {{readonlyinline}} {{experimental_inline}}</dt>
- <dd>Renvoie un objet <a href="/fr/docs/Web/API/MediaCapabilities"><code>MediaCapabilities</code></a> qui peut exposer des informations sur le décodage/l'encodage d'un format donné.</dd>
- <dt><a href="/fr/docs/Web/API/Navigator/mediaDevices"><code>Navigator.mediaDevices</code></a> {{readonlyinline}}</dt>
- <dd>Renvoie une référence vers un objet <a href="/fr/docs/Web/API/MediaDevices"><code>MediaDevices</code></a> permettant d'obtenir des informations à propos des appareils médias disponibles (<a href="/fr/docs/Web/API/MediaDevices.enumerateDevices()"><code>MediaDevices.enumerateDevices()</code></a>), de déterminer les propriétés et contraintes prises en charge pour les médias sur cet agent utilisateur et cet ordinateur (<a href="/fr/docs/Web/API/MediaDevices.getSupportedConstraints()"><code>MediaDevices.getSupportedConstraints()</code></a>), de demander l'accès au média via <a href="/fr/docs/Web/API/MediaDevices.getUserMedia()"><code>MediaDevices.getUserMedia()</code></a>.</dd>
- <dt><a href="/fr/docs/Web/API/Navigator/mediaSession"><code>Navigator.mediaSession</code></a> {{readonlyinline}} {{experimental_inline}}</dt>
- <dd>Renvoie un objet <a href="/fr/docs/Web/API/MediaSession"><code>MediaSession</code></a> pouvant être utilisé afin de fournir des métadonnées utilisées par le navigateur afin de présenter des informations sur le média en cours de lecture (par exemple pour les interfaces utilisateurs générales de contrôle des médias).</dd>
- <dt><a href="/fr/docs/Web/API/NavigatorPlugins.mimeTypes"><code>NavigatorPlugins.mimeTypes</code></a> {{readonlyInline}}{{deprecated_inline}}</dt>
- <dd>Renvoie une liste <a href="/fr/docs/Web/API/MimeTypeArray"><code>MimeTypeArray</code></a> des types MIME pris en charge par le navigateur.</dd>
- <dt><a href="/fr/docs/Web/API/NavigatorOnLine.onLine"><code>NavigatorOnLine.onLine</code></a> {{readonlyInline}}</dt>
- <dd>Renvoie un booléen indiquant si le navigateur est en ligne.</dd>
- <dt><a href="/fr/docs/Web/API/Navigator/permissions"><code>Navigator.permissions</code></a> {{readonlyinline}} {{experimental_inline}}</dt>
- <dd>Renvoie un objet <a href="/fr/docs/Web/API/Permissions"><code>Permissions</code></a> pouvant être utilisé pour demander ou mettre à jour les informations de permissions pour les API couvertes par l'API <a href="/en-US/docs/Web/API/Permissions_API">Permissions</a>.</dd>
- <dt><a href="/fr/docs/Web/API/NavigatorPlugins.plugins"><code>NavigatorPlugins.plugins</code></a> {{readonlyInline}}{{deprecated_inline}}</dt>
- <dd>Renvoie une liste <a href="/fr/docs/Web/API/PluginArray"><code>PluginArray</code></a> indiquant les plugins installés sur le navigateur.</dd>
- <dt><a href="/fr/docs/Web/API/Navigator/presentation"><code>Navigator.presentation</code></a> {{readonlyInline}} {{experimental_inline}}</dt>
- <dd>Renvoie une référence à l'API <a href="/fr/docs/Web/API/Presentation"><code>Presentation</code></a> .</dd>
- <dt><a href="/fr/docs/Web/API/Navigator/serial"><code>Navigator.serial</code></a> {{readonlyInline}}</dt>
- <dd>Renvoie un objet <a href="/fr/docs/Web/API/Serial"><code>Serial</code></a> représentant le point d'entrée vers l'API <a href="/fr/docs/Web/API/Web Serial API"><code>Web Serial</code></a> qui permet de contrôler les ports série.</dd>
- <dt><a href="/fr/docs/Web/API/Navigator/serviceWorker"><code>Navigator.serviceWorker</code></a> {{readonlyInline}}</dt>
- <dd>Renvoie un objet <a href="/fr/docs/Web/API/ServiceWorkerContainer"><code>ServiceWorkerContainer</code></a> qui permet d'enregistrer, de supprimer, de mettre à jour ou de communiquer avec des objets <a href="/fr/docs/Web/API/ServiceWorker"><code>ServiceWorker</code></a> pour le <a href="https://html.spec.whatwg.org/multipage/browsers.html#concept-document-window">document associé</a>.</dd>
- <dt><a href="/fr/docs/Web/API/NavigatorStorage.storage"><code>NavigatorStorage.storage</code></a> {{readonlyinline}}</dt>
- <dd>Renvoie le singleton <a href="/fr/docs/Web/API/StorageManager"><code>StorageManager</code></a> utilisé pour la persistence des permissions et la gestion du stockage disponible site par site/application par application.</dd>
- <dt><a href="/fr/docs/Web/API/NavigatorID/userAgent"><code>NavigatorID.userAgent</code></a> {{readonlyInline}}</dt>
- <dd>Renvoie la chaîne de caractères de l'agent utilisateur pour le navigateur courant.</dd>
- <dt><a href="/fr/docs/Web/API/Navigator/vendor"><code>Navigator.vendor</code></a> {{readonlyInline}}</dt>
- <dd>Renvoie le nom de l'éditeur du navigateur courant (par exemple "Netscape6").</dd>
- <dt><a href="/fr/docs/Web/API/Navigator/webdriver"><code>Navigator.webdriver</code></a> {{readonlyInline}} {{experimental_inline}}</dt>
- <dd>Indique si l'agent utilisateur est contrôlé par un outil automatisé.</dd>
- <dt><a href="/fr/docs/Web/API/Navigator/xr"><code>Navigator.xr</code></a> {{readonlyInline}} {{experimental_inline}}</dt>
- <dd>Renvoie un objet <a href="/fr/docs/Web/API/XRSystem"><code>XRSystem</code></a> qui représente le point d'entrée sur l'API <a href="/en-US/docs/Web/API/WebXR_Device_API">WebXR</a>.</dd>
-</dl>
-
-<h3 id="Non-standard_properties">Propriétés non-standard</h3>
-
-<dl>
- <dt><a href="/fr/docs/Web/API/Navigator/buildID"><code>Navigator.buildID</code></a> {{non-standard_inline}}</dt>
- <dd>Renvoie l'identifiant de build du navigateur. Les navigateurs renvoient un horodatage fixe pour éviter le pistage (par exemple <code>20181001000000</code> à partir de Firefox 64).</dd>
- <dt><a href="/fr/docs/Web/API/Navigator/contacts"><code>Navigator.contacts</code></a> {{readonlyInline}} {{non-standard_inline}}</dt>
- <dd>Renvoie une interface <a href="/fr/docs/Web/API/ContactsManager"><code>ContactsManager</code></a> qui permet à l'utilisateur de sélectionner certaines entrées dans la liste des contacts afin de partager certains détails limités avec une application web.</dd>
- <dt><a href="/fr/docs/Web/API/Navigator/securitypolicy"><code>Navigator.securitypolicy</code></a> {{non-standard_inline}}</dt>
- <dd>Renvoie une chaîne de caractères vide. Netscape 4.7x renvoyait "US &amp; CA domestic policy" ou "Export policy".</dd>
- <dt><a href="/fr/docs/Web/API/Navigator/standalone"><code>Navigator.standalone</code></a> {{non-standard_inline}}</dt>
- <dd>Renvoie un booléen indiquant si le navigateur s'exécute en mode <i>standalone</i>. Uniquement disponible sur Safari pour iOS.</dd>
- <dt><a href="/fr/docs/Web/API/Navigator/wakeLock"><code>Navigator.wakeLock</code></a> {{readonlyInline}} {{non-standard_inline}}</dt>
- <dd>Renvoie une interface <a href="/fr/docs/Web/API/WakeLock"><code>WakeLock</code></a> pouvant être utilisée afin de demander un verrou sur l'écran afin de l'empêcher d'entrer en veille, de s'estomper ou de s'éteindre.</dd>
-</dl>
-
-<h3 id="Deprecated_properties">Propriétés dépréciées</h3>
-
-<dl>
- <dt><a href="/fr/docs/Web/API/NavigatorID/appCodeName"><code>NavigatorID.appCodeName</code></a> {{readonlyInline}} {{deprecated_inline}}</dt>
- <dd>Renvoie le nom de code interne du navigateur. Ne vous attendez pas à ce que cette propriété renvoie une valeur correcte.</dd>
- <dt><a href="/fr/docs/Web/API/NavigatorID/appName"><code>NavigatorID.appName</code></a> {{readonlyInline}} {{deprecated_inline}}</dt>
- <dd>Renvoie une chaîne <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> contenant le nom officiel du navigateur. Ne vous attendez pas à ce que cette propriété renvoie une valeur correcte.</dd>
- <dt><a href="/fr/docs/Web/API/NavigatorID/appVersion"><code>NavigatorID.appVersion</code></a> {{readonlyInline}} {{deprecated_inline}}</dt>
- <dd>Renvoie la version du navigateur sous la forme d'une chaîne <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a>. Ne vous attendez pas à ce que cette propriété renvoie une valeur correcte.</dd>
- <dt><a href="/fr/docs/Web/API/Navigator/activeVRDisplays"><code>Navigator.activeVRDisplays</code></a> {{readonlyInline}} {{deprecated_inline}}</dt>
- <dd>Renvoie un tableau contenant chaque objet <a href="/fr/docs/Web/API/VRDisplay"><code>VRDisplay</code></a> actuellement utilisé pour afficher (autrement dit, pour chaque objet où <a href="/fr/docs/Web/API/VRDisplay.ispresenting"><code>VRDisplay.ispresenting</code></a> vaut <code>true</code>).</dd>
- <dt><a href="/fr/docs/Web/API/Navigator/battery"><code>Navigator.battery</code></a> {{readonlyInline}} {{deprecated_inline}}</dt>
- <dd>Renvoie un objet <a href="/fr/docs/Web/API/BatteryManager"><code>BatteryManager</code></a> permettant d'avoir des informations sur le statut de charge de la batterie.</dd>
- <dt><a href="/fr/docs/Web/API/Navigator/oscpu"><code>Navigator.oscpu</code></a> {{readonlyInline}} {{deprecated_inline}}</dt>
- <dd>Renvoie une chaîne de caractères qui représente le système d'exploitation courant.</dd>
- <dt><a href="/fr/docs/Web/API/NavigatorID/platform"><code>NavigatorID.platform</code></a> {{readonlyInline}} {{deprecated_inline}}</dt>
- <dd>Renvoie une chaîne de caractères représentant la plateforme du navigateur. N'utilisez pas cette fonction afin d'obtenir une valeur significative.</dd>
- <dt><a href="/fr/docs/Web/API/NavigatorID/product"><code>NavigatorID.product</code></a> {{readonlyInline}} {{deprecated_inline}}</dt>
- <dd>Renvoie toujours <code>'Gecko'</code> quel que soit le navigateur. Cette propriété est uniquement conservée à des fins de compatibilité.</dd>
- <dt><a href="/fr/docs/Web/API/Navigator/productSub"><code>Navigator.productSub</code></a> {{readonlyInline}} {{deprecated_inline}}</dt>
- <dd>Renvoie le numéro de <i>build</i> précis du navigateur (par exemple "20060909").</dd>
- <dt><a href="/fr/docs/Web/API/Navigator/vendorSub"><code>Navigator.vendorSub</code></a> {{readonlyInline}} {{deprecated_inline}}</dt>
- <dd>Renvoie le numéro de version de l'éditeur (e.g. "6.1").</dd>
-</dl>
-
-<h2 id="Methods">Méthodes</h2>
-
-<p><em>Cette interface n'hérite d'aucune méthode mais implémente celles définies par <a href="/fr/docs/Web/API/NavigatorID"><code>NavigatorID</code></a>, <a href="/fr/docs/Web/API/NavigatorContentUtils"><code>NavigatorContentUtils</code></a>, <a href="/fr/docs/Web/API/NavigatorUserMedia"><code>NavigatorUserMedia</code></a>, and <a href="/fr/docs/Web/API/NavigatorStorageUtils"><code>NavigatorStorageUtils</code></a>.</em></p>
-
-<dl>
- <dt><a href="/fr/docs/Web/API/Navigator/canShare()"><code>Navigator.canShare()</code></a></dt>
- <dd>Renvoie <code>true</code> si un appel à <code>Navigator.share()</code> réussirait.</dd>
- <dt><a href="/fr/docs/Web/API/Navigator/registerProtocolHandler()"><code>Navigator.registerProtocolHandler()</code></a></dt>
- <dd>Permet aux sites web de s'enregistrer afin de gérer un protocole donné.</dd>
- <dt><a href="/fr/docs/Web/API/Navigator/requestMediaKeySystemAccess()"><code>Navigator.requestMediaKeySystemAccess()</code></a></dt>
- <dd>Renvoie une promesse (<a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise"><code>Promise</code></a>) qui se résout en un objet <code>MediaKeySystemAccess</code>.</dd>
- <dt><a href="/fr/docs/Web/API/Navigator/sendBeacon()"><code>Navigator.sendBeacon()</code></a></dt>
- <dd>Transfère, de façon asynchrone, une petite quantité de donnée avec HTTP depuis l'agent utilisateur vers un serveur web.</dd>
- <dt><a href="/fr/docs/Web/API/Navigator/share()"><code>Navigator.share()</code></a></dt>
- <dd>Invoque la fonctionnalité native de partage pour la plateforme courant.</dd>
- <dt><a href="/fr/docs/Web/API/Navigator/vibrate()"><code>Navigator.vibrate()</code></a></dt>
- <dd>Permet de faire vibrer l'appareil si celui-ci prend en charge cette fonctionnalité. Aucun effet n'est produit s'il n'y a pas de compatibilité.</dd>
-</dl>
-
-<h3 id="Deprecated_methods">Méthodes dépréciées</h3>
-
-<dl>
- <dt><a href="/fr/docs/Web/API/Navigator/getVRDisplays()"><code>Navigator.getVRDisplays()</code></a> {{deprecated_inline}}</dt>
- <dd>Renvoie une promesse qui se résout en un tableau d'objets <a href="/fr/docs/Web/API/VRDisplay"><code>VRDisplay</code></a> représentant chacun un appareil de réalité virtuelle connecté à l'ordinateur.</dd>
- <dt><a href="/fr/docs/Web/API/Navigator/getUserMedia()"><code>Navigator.getUserMedia()</code></a> {{deprecated_inline}}</dt>
- <dd>Après avoir demandé la permission à l'utilisateur, renvoie le flux audio ou vidéo associé à une caméra ou à un micro sur l'ordinateur local.</dd>
- <dt><a href="/fr/docs/Web/API/Navigator/registerContentHandler()"><code>Navigator.registerContentHandler()</code></a> {{deprecated_inline}}</dt>
- <dd>Permet aux sites web de s'enregistrer pour gérer certains types MIME.</dd>
- <dt><a href="/fr/docs/Web/API/NavigatorID/taintEnabled()"><code>NavigatorID.taintEnabled()</code></a> {{deprecated_inline}}</dt>
- <dd>Renvoie <code>false</code>. Les fonctions JavaScript jouant sur cet aspect ont été retirées avec JavaScript 1.2.</dd>
-</dl>
-
-<h2 id="Specifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', '#the-navigator-object', 'the Navigator object')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<div>{{Compat("api.Navigator")}}</div>
+{{APIRef("DOM")}}
+
+L'interface **`Navigator`** représente l'état et l'identité de l'agent utilisateur courant. Elle permet aux scripts de consulter ces informations et de s'enregistrer en vue de certaines activités.
+
+Un objet instanciant `Navigator` peut être récupéré grâce à la propriété en lecture seule [`window.navigator`](/fr/docs/Web/API/Window/navigator).
+
+## Propriétés
+
+_Cette interface n'hérite d'aucune propriété mais implémente celles définies par [`NavigatorID`](/fr/docs/Web/API/NavigatorID), [`NavigatorLanguage`](/fr/docs/Web/API/NavigatorLanguage), [`NavigatorOnLine`](/fr/docs/Web/API/NavigatorOnLine), [`NavigatorContentUtils`](/fr/docs/Web/API/NavigatorContentUtils), [`NavigatorStorage`](/fr/docs/Web/API/NavigatorStorage), [`NavigatorStorageUtils`](/fr/docs/Web/API/NavigatorStorageUtils), [`NavigatorConcurrentHardware`](/fr/docs/Web/API/NavigatorConcurrentHardware), [`NavigatorPlugins`](/fr/docs/Web/API/NavigatorPlugins) et [`NavigatorUserMedia`](/fr/docs/Web/API/NavigatorUserMedia)._
+
+### Propriétés standard
+
+- [`Navigator.connection`](/fr/docs/Web/API/Navigator/connection) {{readonlyInline}} {{experimental_inline}}
+  - : Fournit un objet [`NetworkInformation`](/fr/docs/Web/API/NetworkInformation) contenant des informations quant à la connection réseau de l'appareil.
+- [`Navigator.cookieEnabled`](/fr/docs/Web/API/Navigator/cookieEnabled) {{readonlyinline}}
+  - : Renvoie un booléen indiquant si l'ajout d'un cookie sera pris en compte.
+- [`Navigator.credentials`](/fr/docs/Web/API/Navigator/credentials) {{readonlyInline}}
+  - : Renvoie l'interface [`CredentialsContainer`](/fr/docs/Web/API/CredentialsContainer) qui expose des méthodes pour la demande d'informations d'authentification et qui notifie l'agent utilisateur lors d'évènements particuliers tels que les connexions ou déconnexions.
+- [`Navigator.deviceMemory`](/fr/docs/Web/API/Navigator/deviceMemory) {{readonlyInline}} {{experimental_inline}}
+  - : Renvoie la quantité de mémoire de l'appareil, exprimée en gigaoctets. Cette valeur est une approximation calculée en prenant la plus proche puissance de 2 puis en divisant le résultat par 1024.
+- [`Navigator.doNotTrack`](/fr/docs/Web/API/Navigator/doNotTrack) {{readonlyInline}} {{experimental_inline}}
+  - : Indique le choix de l'utilisateur fournit pour la préférence _do-not-track_. Lorsque cette valeur vaut "1", l'application web ne devrait pas pister l'utilisateur.
+- [`Navigator.geolocation`](/fr/docs/Web/API/Navigator/geolocation) {{readonlyInline}}
+  - : Renvoie un objet [`Geolocation`](/fr/docs/Web/API/Geolocation) permettant l'accès à l'emplacement géographique de l'appareil.
+- [`NavigatorConcurrentHardware.hardwareConcurrency`](/fr/docs/Web/API/NavigatorConcurrentHardware.hardwareConcurrency) {{readonlyInline}}
+  - : Renvoie le nombre de cœurs logiques du processeur.
+- [`NavigatorPlugins.javaEnabled`](/fr/docs/Web/API/NavigatorPlugins.javaEnabled) {{readonlyInline}}
+  - : Renvoie le booléen `false`.
+- [`Navigator.keyboard`](/fr/docs/Web/API/Navigator.keyboard) {{readonlyinline}} {{experimental_inline}}
+  - : Renvoie un objet [`Keyboard`](/fr/docs/Web/API/Keyboard) qui permet d'accéder à des fonctions pour récupérer des informations sur la disposition du clavier et la capture de touches du clavier physique.
+- [`NavigatorLanguage.language`](/fr/docs/Web/API/NavigatorLanguage.language) {{readonlyInline}}
+  - : Renvoie une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) indiquant la langue préférée de l'utilisateur (qui correspond généralement à la langue utilisée pour l'interface utilisateur du navigateur). La valeur `null` est renvoyée si cette information est inconnue.
+- [`NavigatorLanguage.languages`](/fr/docs/Web/API/NavigatorLanguage.languages) {{readonlyInline}} {{experimental_inline}}
+  - : Renvoie un tableau de chaînes [`DOMString`](/fr/docs/Web/API/DOMString) qui représente les langues connues de l'utilisateur, triées par ordre de préférence.
+- [`Navigator.locks`](/fr/docs/Web/API/Navigator/locks) {{readonlyinline}} {{experimental_inline}}
+  - : Renvoie un objet [`LockManager`](/fr/docs/Web/API/LockManager) qui fournit des méthodes pour demander un nouvel objet [`Lock`](/fr/docs/Web/API/Lock) ou s'enquérir d'un objet [`Lock`](/fr/docs/Web/API/Lock) existant.
+- [`Navigator.maxTouchPoints`](/fr/docs/Web/API/Navigator/maxTouchPoints) {{readonlyInline}}
+  - : Renvoie le nombre maximum de points de toucher simultanés possible pour l'appareil courant.
+- [`Navigator.mediaCapabilities`](/fr/docs/Web/API/Navigator/mediaCapabilities) {{readonlyinline}} {{experimental_inline}}
+  - : Renvoie un objet [`MediaCapabilities`](/fr/docs/Web/API/MediaCapabilities) qui peut exposer des informations sur le décodage/l'encodage d'un format donné.
+- [`Navigator.mediaDevices`](/fr/docs/Web/API/Navigator/mediaDevices) {{readonlyinline}}
+  - : Renvoie une référence vers un objet [`MediaDevices`](/fr/docs/Web/API/MediaDevices) permettant d'obtenir des informations à propos des appareils médias disponibles ([`MediaDevices.enumerateDevices()`](</fr/docs/Web/API/MediaDevices.enumerateDevices()>)), de déterminer les propriétés et contraintes prises en charge pour les médias sur cet agent utilisateur et cet ordinateur ([`MediaDevices.getSupportedConstraints()`](</fr/docs/Web/API/MediaDevices.getSupportedConstraints()>)), de demander l'accès au média via [`MediaDevices.getUserMedia()`](</fr/docs/Web/API/MediaDevices.getUserMedia()>).
+- [`Navigator.mediaSession`](/fr/docs/Web/API/Navigator/mediaSession) {{readonlyinline}} {{experimental_inline}}
+  - : Renvoie un objet [`MediaSession`](/fr/docs/Web/API/MediaSession) pouvant être utilisé afin de fournir des métadonnées utilisées par le navigateur afin de présenter des informations sur le média en cours de lecture (par exemple pour les interfaces utilisateurs générales de contrôle des médias).
+- [`NavigatorPlugins.mimeTypes`](/fr/docs/Web/API/NavigatorPlugins.mimeTypes) {{readonlyInline}}{{deprecated_inline}}
+  - : Renvoie une liste [`MimeTypeArray`](/fr/docs/Web/API/MimeTypeArray) des types MIME pris en charge par le navigateur.
+- [`NavigatorOnLine.onLine`](/fr/docs/Web/API/NavigatorOnLine.onLine) {{readonlyInline}}
+  - : Renvoie un booléen indiquant si le navigateur est en ligne.
+- [`Navigator.permissions`](/fr/docs/Web/API/Navigator/permissions) {{readonlyinline}} {{experimental_inline}}
+  - : Renvoie un objet [`Permissions`](/fr/docs/Web/API/Permissions) pouvant être utilisé pour demander ou mettre à jour les informations de permissions pour les API couvertes par l'API [Permissions](/en-US/docs/Web/API/Permissions_API).
+- [`NavigatorPlugins.plugins`](/fr/docs/Web/API/NavigatorPlugins.plugins) {{readonlyInline}}{{deprecated_inline}}
+  - : Renvoie une liste [`PluginArray`](/fr/docs/Web/API/PluginArray) indiquant les plugins installés sur le navigateur.
+- [`Navigator.presentation`](/fr/docs/Web/API/Navigator/presentation) {{readonlyInline}} {{experimental_inline}}
+  - : Renvoie une référence à l'API [`Presentation`](/fr/docs/Web/API/Presentation) .
+- [`Navigator.serial`](/fr/docs/Web/API/Navigator/serial) {{readonlyInline}}
+  - : Renvoie un objet [`Serial`](/fr/docs/Web/API/Serial) représentant le point d'entrée vers l'API [`Web Serial`](</fr/docs/Web/API/Web Serial API>) qui permet de contrôler les ports série.
+- [`Navigator.serviceWorker`](/fr/docs/Web/API/Navigator/serviceWorker) {{readonlyInline}}
+  - : Renvoie un objet [`ServiceWorkerContainer`](/fr/docs/Web/API/ServiceWorkerContainer) qui permet d'enregistrer, de supprimer, de mettre à jour ou de communiquer avec des objets [`ServiceWorker`](/fr/docs/Web/API/ServiceWorker) pour le [document associé](https://html.spec.whatwg.org/multipage/browsers.html#concept-document-window).
+- [`NavigatorStorage.storage`](/fr/docs/Web/API/NavigatorStorage.storage) {{readonlyinline}}
+  - : Renvoie le singleton [`StorageManager`](/fr/docs/Web/API/StorageManager) utilisé pour la persistence des permissions et la gestion du stockage disponible site par site/application par application.
+- [`NavigatorID.userAgent`](/fr/docs/Web/API/NavigatorID/userAgent) {{readonlyInline}}
+  - : Renvoie la chaîne de caractères de l'agent utilisateur pour le navigateur courant.
+- [`Navigator.vendor`](/fr/docs/Web/API/Navigator/vendor) {{readonlyInline}}
+  - : Renvoie le nom de l'éditeur du navigateur courant (par exemple "Netscape6").
+- [`Navigator.webdriver`](/fr/docs/Web/API/Navigator/webdriver) {{readonlyInline}} {{experimental_inline}}
+  - : Indique si l'agent utilisateur est contrôlé par un outil automatisé.
+- [`Navigator.xr`](/fr/docs/Web/API/Navigator/xr) {{readonlyInline}} {{experimental_inline}}
+  - : Renvoie un objet [`XRSystem`](/fr/docs/Web/API/XRSystem) qui représente le point d'entrée sur l'API [WebXR](/en-US/docs/Web/API/WebXR_Device_API).
+
+### Propriétés non-standard
+
+- [`Navigator.buildID`](/fr/docs/Web/API/Navigator/buildID) {{non-standard_inline}}
+  - : Renvoie l'identifiant de build du navigateur. Les navigateurs renvoient un horodatage fixe pour éviter le pistage (par exemple `20181001000000` à partir de Firefox 64).
+- [`Navigator.contacts`](/fr/docs/Web/API/Navigator/contacts) {{readonlyInline}} {{non-standard_inline}}
+  - : Renvoie une interface [`ContactsManager`](/fr/docs/Web/API/ContactsManager) qui permet à l'utilisateur de sélectionner certaines entrées dans la liste des contacts afin de partager certains détails limités avec une application web.
+- [`Navigator.securitypolicy`](/fr/docs/Web/API/Navigator/securitypolicy) {{non-standard_inline}}
+  - : Renvoie une chaîne de caractères vide. Netscape 4.7x renvoyait "US & CA domestic policy" ou "Export policy".
+- [`Navigator.standalone`](/fr/docs/Web/API/Navigator/standalone) {{non-standard_inline}}
+  - : Renvoie un booléen indiquant si le navigateur s'exécute en mode _standalone_. Uniquement disponible sur Safari pour iOS.
+- [`Navigator.wakeLock`](/fr/docs/Web/API/Navigator/wakeLock) {{readonlyInline}} {{non-standard_inline}}
+  - : Renvoie une interface [`WakeLock`](/fr/docs/Web/API/WakeLock) pouvant être utilisée afin de demander un verrou sur l'écran afin de l'empêcher d'entrer en veille, de s'estomper ou de s'éteindre.
+
+### Propriétés dépréciées
+
+- [`NavigatorID.appCodeName`](/fr/docs/Web/API/NavigatorID/appCodeName) {{readonlyInline}} {{deprecated_inline}}
+  - : Renvoie le nom de code interne du navigateur. Ne vous attendez pas à ce que cette propriété renvoie une valeur correcte.
+- [`NavigatorID.appName`](/fr/docs/Web/API/NavigatorID/appName) {{readonlyInline}} {{deprecated_inline}}
+  - : Renvoie une chaîne [`DOMString`](/fr/docs/Web/API/DOMString) contenant le nom officiel du navigateur. Ne vous attendez pas à ce que cette propriété renvoie une valeur correcte.
+- [`NavigatorID.appVersion`](/fr/docs/Web/API/NavigatorID/appVersion) {{readonlyInline}} {{deprecated_inline}}
+  - : Renvoie la version du navigateur sous la forme d'une chaîne [`DOMString`](/fr/docs/Web/API/DOMString). Ne vous attendez pas à ce que cette propriété renvoie une valeur correcte.
+- [`Navigator.activeVRDisplays`](/fr/docs/Web/API/Navigator/activeVRDisplays) {{readonlyInline}} {{deprecated_inline}}
+  - : Renvoie un tableau contenant chaque objet [`VRDisplay`](/fr/docs/Web/API/VRDisplay) actuellement utilisé pour afficher (autrement dit, pour chaque objet où [`VRDisplay.ispresenting`](/fr/docs/Web/API/VRDisplay.ispresenting) vaut `true`).
+- [`Navigator.battery`](/fr/docs/Web/API/Navigator/battery) {{readonlyInline}} {{deprecated_inline}}
+  - : Renvoie un objet [`BatteryManager`](/fr/docs/Web/API/BatteryManager) permettant d'avoir des informations sur le statut de charge de la batterie.
+- [`Navigator.oscpu`](/fr/docs/Web/API/Navigator/oscpu) {{readonlyInline}} {{deprecated_inline}}
+  - : Renvoie une chaîne de caractères qui représente le système d'exploitation courant.
+- [`NavigatorID.platform`](/fr/docs/Web/API/NavigatorID/platform) {{readonlyInline}} {{deprecated_inline}}
+  - : Renvoie une chaîne de caractères représentant la plateforme du navigateur. N'utilisez pas cette fonction afin d'obtenir une valeur significative.
+- [`NavigatorID.product`](/fr/docs/Web/API/NavigatorID/product) {{readonlyInline}} {{deprecated_inline}}
+  - : Renvoie toujours `'Gecko'` quel que soit le navigateur. Cette propriété est uniquement conservée à des fins de compatibilité.
+- [`Navigator.productSub`](/fr/docs/Web/API/Navigator/productSub) {{readonlyInline}} {{deprecated_inline}}
+  - : Renvoie le numéro de _build_ précis du navigateur (par exemple "20060909").
+- [`Navigator.vendorSub`](/fr/docs/Web/API/Navigator/vendorSub) {{readonlyInline}} {{deprecated_inline}}
+  - : Renvoie le numéro de version de l'éditeur (e.g. "6.1").
+
+## Méthodes
+
+_Cette interface n'hérite d'aucune méthode mais implémente celles définies par [`NavigatorID`](/fr/docs/Web/API/NavigatorID), [`NavigatorContentUtils`](/fr/docs/Web/API/NavigatorContentUtils), [`NavigatorUserMedia`](/fr/docs/Web/API/NavigatorUserMedia), and [`NavigatorStorageUtils`](/fr/docs/Web/API/NavigatorStorageUtils)._
+
+- [`Navigator.canShare()`](</fr/docs/Web/API/Navigator/canShare()>)
+  - : Renvoie `true` si un appel à `Navigator.share()` réussirait.
+- [`Navigator.registerProtocolHandler()`](</fr/docs/Web/API/Navigator/registerProtocolHandler()>)
+  - : Permet aux sites web de s'enregistrer afin de gérer un protocole donné.
+- [`Navigator.requestMediaKeySystemAccess()`](</fr/docs/Web/API/Navigator/requestMediaKeySystemAccess()>)
+  - : Renvoie une promesse ([`Promise`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise)) qui se résout en un objet `MediaKeySystemAccess`.
+- [`Navigator.sendBeacon()`](</fr/docs/Web/API/Navigator/sendBeacon()>)
+  - : Transfère, de façon asynchrone, une petite quantité de donnée avec HTTP depuis l'agent utilisateur vers un serveur web.
+- [`Navigator.share()`](</fr/docs/Web/API/Navigator/share()>)
+  - : Invoque la fonctionnalité native de partage pour la plateforme courant.
+- [`Navigator.vibrate()`](</fr/docs/Web/API/Navigator/vibrate()>)
+  - : Permet de faire vibrer l'appareil si celui-ci prend en charge cette fonctionnalité. Aucun effet n'est produit s'il n'y a pas de compatibilité.
+
+### Méthodes dépréciées
+
+- [`Navigator.getVRDisplays()`](</fr/docs/Web/API/Navigator/getVRDisplays()>) {{deprecated_inline}}
+  - : Renvoie une promesse qui se résout en un tableau d'objets [`VRDisplay`](/fr/docs/Web/API/VRDisplay) représentant chacun un appareil de réalité virtuelle connecté à l'ordinateur.
+- [`Navigator.getUserMedia()`](</fr/docs/Web/API/Navigator/getUserMedia()>) {{deprecated_inline}}
+  - : Après avoir demandé la permission à l'utilisateur, renvoie le flux audio ou vidéo associé à une caméra ou à un micro sur l'ordinateur local.
+- [`Navigator.registerContentHandler()`](</fr/docs/Web/API/Navigator/registerContentHandler()>) {{deprecated_inline}}
+  - : Permet aux sites web de s'enregistrer pour gérer certains types MIME.
+- [`NavigatorID.taintEnabled()`](</fr/docs/Web/API/NavigatorID/taintEnabled()>) {{deprecated_inline}}
+  - : Renvoie `false`. Les fonctions JavaScript jouant sur cet aspect ont été retirées avec JavaScript 1.2.
+
+## Spécifications
+
+| Spécification                                                                                        | Statut                           | Commentaires |
+| ---------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ |
+| {{SpecName('HTML WHATWG', '#the-navigator-object', 'the Navigator object')}} | {{Spec2('HTML WHATWG')}} |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Navigator")}}
diff --git a/files/fr/web/api/navigator/mozislocallyavailable/index.md b/files/fr/web/api/navigator/mozislocallyavailable/index.md
index 839ac2aeb0..71ac7e12fe 100644
--- a/files/fr/web/api/navigator/mozislocallyavailable/index.md
+++ b/files/fr/web/api/navigator/mozislocallyavailable/index.md
@@ -5,25 +5,32 @@ tags:
   - Référence_du_DOM_Gecko
 translation_of: Web/API/Navigator/mozIsLocallyAvailable
 ---
-<p>{{ ApiRef() }}</p>
-<h3 id="R.C3.A9sum.C3.A9">Résumé</h3>
-<p>Permet de déterminer si une ressource donnée est disponible.</p>
-<h3 id="Syntaxe">Syntaxe</h3>
-<pre class="eval">window.navigator.isLocallyAvailable(<i>uri</i>,<i>ifOffline</i>);
-</pre>
-<ul>
- <li><code>uri</code> est l'URI de la ressource dont la disponibilité doit être vérifiée, sous la forme d'une chaîne.</li>
- <li><code>ifOffline</code> permet de spécifier si le cache de ressources hors ligne doit être vérifié ; indiquez <code>true</code> pour prendre en compte le cache de ressources hors ligne.</li>
-</ul>
-<h3 id="Exemple">Exemple</h3>
-<pre class="eval">var disponible = navigator.isLocallyAvailable("my-image-file.png", true);
-if (disponible) {
-  /* la ressource hors ligne est présente */
-} else {
-  alert("Certaines ressources nécessaires ne sont pas disponibles tant que vous ne serez pas connecté au réseau.");
-}
-</pre>
-<h3 id="Notes">Notes</h3>
-<p>{{ Note("Des exceptions de sécurité peuvent se produire si l\'URI demandée n\'est pas de la même origine.") }}</p>
-<h3 id="Sp.C3.A9cification">Spécification</h3>
-<p>Aucune ; cependant certaines informations sont disponibles : <a href="http://www.campd.org/stuff/Offline%20Cache.html">Marking Resources for Offline Use</a></p>
+{{ ApiRef() }}
+
+### Résumé
+
+Permet de déterminer si une ressource donnée est disponible.
+
+### Syntaxe
+
+    window.navigator.isLocallyAvailable(uri,ifOffline);
+
+- `uri` est l'URI de la ressource dont la disponibilité doit être vérifiée, sous la forme d'une chaîne.
+- `ifOffline` permet de spécifier si le cache de ressources hors ligne doit être vérifié ; indiquez `true` pour prendre en compte le cache de ressources hors ligne.
+
+### Exemple
+
+    var disponible = navigator.isLocallyAvailable("my-image-file.png", true);
+    if (disponible) {
+      /* la ressource hors ligne est présente */
+    } else {
+      alert("Certaines ressources nécessaires ne sont pas disponibles tant que vous ne serez pas connecté au réseau.");
+    }
+
+### Notes
+
+{{ Note("Des exceptions de sécurité peuvent se produire si l\'URI demandée n\'est pas de la même origine.") }}
+
+### Spécification
+
+Aucune ; cependant certaines informations sont disponibles : [Marking Resources for Offline Use](http://www.campd.org/stuff/Offline%20Cache.html)
diff --git a/files/fr/web/api/navigator/registerprotocolhandler/index.md b/files/fr/web/api/navigator/registerprotocolhandler/index.md
index 25df0e4c12..b44da6ad1f 100644
--- a/files/fr/web/api/navigator/registerprotocolhandler/index.md
+++ b/files/fr/web/api/navigator/registerprotocolhandler/index.md
@@ -5,42 +5,36 @@ tags:
   - Firefox 3
 translation_of: Web/API/Navigator/registerProtocolHandler
 ---
-<p>{{ ApiRef() }}</p>
+{{ ApiRef() }}
 
-<h3 id="R.C3.A9sum.C3.A9">Résumé</h3>
+### Résumé
 
-<p>Permet aux sites web de s'enregistrer en tant que gestionnaires possibles pour des protocoles particuliers.</p>
+Permet aux sites web de s'enregistrer en tant que gestionnaires possibles pour des protocoles particuliers.
 
-<p>{{ Note("Un site web ne peut enregistrer de gestionnaires de protocoles que pour lui-même. Pour des raisons de sécurité, il n\'est pas possible pour une extension ou un site d\'enregistrer des gestionnaires de protocoles ciblant d\'autres sites.") }}</p>
+{{ Note("Un site web ne peut enregistrer de gestionnaires de protocoles que pour lui-même. Pour des raisons de sécurité, il n\'est pas possible pour une extension ou un site d\'enregistrer des gestionnaires de protocoles ciblant d\'autres sites.") }}
 
-<h3 id="Syntaxe">Syntaxe</h3>
+### Syntaxe
 
-<pre class="eval">window.navigator.registerProtocolHandler(<em>protocole</em>,<em>uri</em>,<em>titre</em>);
-</pre>
+    window.navigator.registerProtocolHandler(protocole,uri,titre);
 
-<ul>
- <li><code>protocole</code> est le protocole que le site désire gérer, sous la forme d'une chaîne.</li>
- <li><code>uri</code> est l'URI du gestionnaire sous la forme d'une chaîne. Il peut contenir « %s » pour indiquer où insérer l'URI échappée du document à gérer, comme montré dans l'exemple plus bas.</li>
- <li><code>titre</code> est le titre du gestionnaire présenté à l'utilisateur, sous la forme d'une chaîne.</li>
-</ul>
+- `protocole` est le protocole que le site désire gérer, sous la forme d'une chaîne.
+- `uri` est l'URI du gestionnaire sous la forme d'une chaîne. Il peut contenir « %s » pour indiquer où insérer l'URI échappée du document à gérer, comme montré dans l'exemple plus bas.
+- `titre` est le titre du gestionnaire présenté à l'utilisateur, sous la forme d'une chaîne.
 
-<h3 id="Exemple">Exemple</h3>
+### Exemple
 
-<p>Si votre application web est située à <code>http://www.example.com</code>, vous pouvez enregistrer un gestionnaire de protocole lui permettant de gérer « mailto » comme ceci :</p>
+Si votre application web est située à `http://www.example.com`, vous pouvez enregistrer un gestionnaire de protocole lui permettant de gérer « mailto » comme ceci :
 
-<pre class="eval">navigator.registerProtocolHandler("mailto",
-                                 "<a href="https://www.example.com/?to=%s">https://www.example.com/?to=%s</a>",
-                                 "Example Mail");
-</pre>
+    navigator.registerProtocolHandler("mailto",
+                                     "https://www.example.com/?to=%s",
+                                     "Example Mail");
 
-<p>Ceci crée un gestionnaire permettant aux liens <code>mailto</code> de diriger l'utilisateur vers l'application web, en insérant l'adresse spécifiée dans le lien dans l'URL.</p>
+Ceci crée un gestionnaire permettant aux liens `mailto` de diriger l'utilisateur vers l'application web, en insérant l'adresse spécifiée dans le lien dans l'URL.
 
-<h3 id="Sp.C3.A9cification">Spécification</h3>
+### Spécification
 
-<p>Spécifié dans le <a href="http://whatwg.org/specs/web-apps/current-work/#custom-handlers">brouillon de travail Web Applications 1.0</a> du WHATWG.</p>
+Spécifié dans le [brouillon de travail Web Applications 1.0](http://whatwg.org/specs/web-apps/current-work/#custom-handlers) du WHATWG.
 
-<h3 id="Voir_.C3.A9galement">Voir également</h3>
+### Voir également
 
-<ul>
- <li><a href="/fr/docs/Web/API/Navigator/registerProtocolHandler/Web-based_protocol_handlers">Gestionnaires de protocoles web</a></li>
-</ul>
+- [Gestionnaires de protocoles web](/fr/docs/Web/API/Navigator/registerProtocolHandler/Web-based_protocol_handlers)
diff --git a/files/fr/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.md b/files/fr/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.md
index 3ab6522963..efb4ff023c 100644
--- a/files/fr/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.md
+++ b/files/fr/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.md
@@ -3,109 +3,103 @@ title: Gestionnaires de protocoles web
 slug: Web/API/Navigator/registerProtocolHandler/Web-based_protocol_handlers
 translation_of: Web/API/Navigator/registerProtocolHandler/Web-based_protocol_handlers
 ---
+### Introduction
 
+Il est relativement courant de voir des pages web lier des ressources utilisant des protocoles non-`http`. Prenons par exemple le protocole `mailto:` :
 
-<h3 id="Introduction">Introduction</h3>
+    <a href="mailto:webmaster@example.com">Webmestre</a>
 
-<p>Il est relativement courant de voir des pages web lier des ressources utilisant des protocoles non-<code>http</code>. Prenons par exemple le protocole <code>mailto:</code> :</p>
+Les auteurs web peuvent utiliser un lien `mailto:` lorsqu'ils veulent fournir aux utilisateurs une manière pratique d'envoyer un courrier électronique, directement depuis la page web. Lorsque le lien est activé, le navigateur est supposé lancer l'application par défaut du bureau pour le courrier électronique. On pourrait appeler cela un gestionnaire de protocole*du bureau*.
 
-<pre>&lt;a href="mailto:webmaster@example.com"&gt;Webmestre&lt;/a&gt;
-</pre>
+Les gestionnaires de protocoles web permettent à des applications web de participer également à ce processus. Leur importance va grandissant au fur et à mesure que différents types d'applications migrent vers le web. De fait, un grand nombre d'applications de courrier déjà basées sur le web pourraient traiter un lien `mailto`.
 
-<p>Les auteurs web peuvent utiliser un lien <code>mailto:</code> lorsqu'ils veulent fournir aux utilisateurs une manière pratique d'envoyer un courrier électronique, directement depuis la page web. Lorsque le lien est activé, le navigateur est supposé lancer l'application par défaut du bureau pour le courrier électronique. On pourrait appeler cela un gestionnaire de protocole<em>du bureau</em>.</p>
+### Enregistrement
 
-<p>Les gestionnaires de protocoles web permettent à des applications web de participer également à ce processus. Leur importance va grandissant au fur et à mesure que différents types d'applications migrent vers le web. De fait, un grand nombre d'applications de courrier déjà basées sur le web pourraient traiter un lien <code>mailto</code>.</p>
+La définition d'une application web comme gestionnaire de protocole n'est pas un processus difficile. En gros, l'application web utilise [`registerProtocolHandler()`](/fr/DOM/window.navigator.registerProtocolHandler) pour s'enregistrer auprès du navigateur comme gestionnaire potentiel pour un protocole donné. Par exemple :
 
-<h3 id="Enregistrement">Enregistrement</h3>
+    navigator.registerProtocolHandler("mailto",
+                                      "https://www.example.com/?uri=%s",
+                                      "Example Mail");
 
-<p>La définition d'une application web comme gestionnaire de protocole n'est pas un processus difficile. En gros, l'application web utilise <code><a href="/fr/DOM/window.navigator.registerProtocolHandler">registerProtocolHandler()</a></code> pour s'enregistrer auprès du navigateur comme gestionnaire potentiel pour un protocole donné. Par exemple :</p>
+Où les paramètres sont :
 
-<pre>navigator.registerProtocolHandler("mailto",
-                                  "https://www.example.com/?uri=%s",
-                                  "Example Mail");
-</pre>
+- Le protocole.
+- Le modèle d'URL, utilisé comme gestionnaire. Le « %s » sera remplacé par le `href` du lien et une requête GET sera exécutée sur l'URL résultante.
+- Le nom du gestionnaire de protocole tel que présenté à l'utilisateur.
 
-<p>Où les paramètres sont :</p>
+Lorsqu'un navigateur exécutera ce code, il devra demander à l'utilisateur la permission d'autoriser l'application web à s'enregistrer comme gestionnaire du protocole. Firefox affichera une question dans une barre de notification :
 
-<ul>
- <li>Le protocole.</li>
- <li>Le modèle d'URL, utilisé comme gestionnaire. Le « %s » sera remplacé par le <code>href</code> du lien et une requête GET sera exécutée sur l'URL résultante.</li>
- <li>Le nom du gestionnaire de protocole tel que présenté à l'utilisateur.</li>
-</ul>
+![](protocolregister.png)
 
-<p>Lorsqu'un navigateur exécutera ce code, il devra demander à l'utilisateur la permission d'autoriser l'application web à s'enregistrer comme gestionnaire du protocole. Firefox affichera une question dans une barre de notification :</p>
+{{ Note() }}
 
-<p><img alt="" src="protocolregister.png"></p>
+#### Exemple
 
-<p>{{ Note() }}</p>
-
-<h4 id="Exemple">Exemple</h4>
-
-<pre class="brush: html">&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"&gt;
-&lt;html lang="fr"&gt;
-&lt;head&gt;
-  &lt;title&gt;Web Protocol Handler Sample - Register&lt;/title&gt;
-  &lt;script type="text/javascript"&gt;
+```html
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
+<html lang="fr">
+<head>
+  <title>Web Protocol Handler Sample - Register</title>
+  <script type="text/javascript">
     navigator.registerProtocolHandler("fake", "http://starkravingfinkle.org/projects/wph/handler.php?value=%s", "Protocole fake");
-  &lt;/script&gt;
-&lt;/head&gt;
-&lt;body&gt;
-  &lt;h1&gt;Exemple de gestionnaire de protocole web&lt;/h1&gt;
-  &lt;p&gt;Cette page va installer un gestionnaire de protocole web pour le protocole &lt;code&gt;fake:&lt;/code&gt;.&lt;/p&gt;
-&lt;/body&gt;
-&lt;/html&gt;
-</pre>
+  </script>
+</head>
+<body>
+  <h1>Exemple de gestionnaire de protocole web</h1>
+  <p>Cette page va installer un gestionnaire de protocole web pour le protocole <code>fake:</code>.</p>
+</body>
+</html>
+```
 
-<h3 id="Activation">Activation</h3>
+### Activation
 
-<p>À présent, chaque fois que l'utilisateur activera un lien utilisant le protocole enregistré, le navigateur dirigera l'action vers l'URL spécifiée lors de l'enregistrement de l'application web. Firefox, par défaut, demandera à l'utilisateur avant d'effectuer cette action.</p>
+À présent, chaque fois que l'utilisateur activera un lien utilisant le protocole enregistré, le navigateur dirigera l'action vers l'URL spécifiée lors de l'enregistrement de l'application web. Firefox, par défaut, demandera à l'utilisateur avant d'effectuer cette action.
 
-<h4 id="Exemple_2">Exemple</h4>
+#### Exemple
 
-<pre class="brush: html">&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"&gt;
-&lt;html lang="fr"&gt;
-&lt;head&gt;
-  &lt;title&gt;Exemple de gestionnaire de protocole web — test&lt;/title&gt;
-&lt;/head&gt;
-&lt;body&gt;
-  &lt;p&gt;Hola, avez-vous déjà vu &lt;a href="fake:ceci%20est%20un%20faux%20protocole"&gt;ceci&lt;/a&gt; auparavant ?&lt;/p&gt;
-&lt;/body&gt;
-&lt;/html&gt;
-</pre>
+```html
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
+<html lang="fr">
+<head>
+  <title>Exemple de gestionnaire de protocole web — test</title>
+</head>
+<body>
+  <p>Hola, avez-vous déjà vu <a href="fake:ceci%20est%20un%20faux%20protocole">ceci</a> auparavant ?</p>
+</body>
+</html>
+```
 
-<h3 id="Traitement">Traitement</h3>
+### Traitement
 
-<p>La phase suivante est le traitement de l'action. Le navigateur extrait le <code>href</code> du lien activé, le combine avec le modèle d'URL fourni lors de l'enregistrement et effectue une requête HTTP GET sur l'URL. Ainsi, avec les exemples précédents, le navigateur effectuerait une requête GET sur cette URL :</p>
+La phase suivante est le traitement de l'action. Le navigateur extrait le `href` du lien activé, le combine avec le modèle d'URL fourni lors de l'enregistrement et effectue une requête HTTP GET sur l'URL. Ainsi, avec les exemples précédents, le navigateur effectuerait une requête GET sur cette URL :
 
-<pre>http://starkravingfinkle.org/projects/wph/handler.php?value=fake:ceci%20est%20un%20faux%20protocole
-</pre>
+    http://starkravingfinkle.org/projects/wph/handler.php?value=fake:ceci%20est%20un%20faux%20protocole
 
-<p>Un code côté serveur peut extraire les paramètres de la chaîne de requête et effectuer l'action désirée.</p>
+Un code côté serveur peut extraire les paramètres de la chaîne de requête et effectuer l'action désirée.
 
-<p>{{ Note("Le code côté serveur reçoit le contenu <strong>entier</strong> de l\'attribut <code>href</code>. Cela signifie qu\'il devra traiter la chaîne pour retirer l\'indication de protocole des données.") }}</p>
+{{ Note("Le code côté serveur reçoit le contenu <strong>entier</strong> de l\'attribut <code>href</code>. Cela signifie qu\'il devra traiter la chaîne pour retirer l\'indication de protocole des données.") }}
 
-<h4 id="Exemple_3">Exemple</h4>
+#### Exemple
 
-<pre class="brush: html">&lt;?php
+```html
+<?php
 $value = "";
 if ( isset ( $_GET["value"] ) ) {
   $value = $_GET["value"];
 }
-?&gt;
-
-&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"&gt;
-&lt;html lang="fr"&gt;
-&lt;head&gt;
-    &lt;title&gt;Exemple de gestionnaire de protocole web&lt;/title&gt;
-&lt;/head&gt;
-&lt;body&gt;
-  &lt;h1&gt;Exemple de gestionnaire de protocole web — Gestionnaire&lt;/h1&gt;
-  &lt;p&gt;Cette page est appelée lors de la gestion d'une action utilisant le protocole &lt;code&gt;fake:&lt;/code&gt;. Voici les données reçues :&lt;/p&gt;
-  &lt;textarea&gt;
-&lt;?php echo(urldecode($value)) ?&gt;
-  &lt;/textarea&gt;
-&lt;/body&gt;
-&lt;/html&gt;
-</pre>
-
-<p> </p>
+?>
+
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
+<html lang="fr">
+<head>
+    <title>Exemple de gestionnaire de protocole web</title>
+</head>
+<body>
+  <h1>Exemple de gestionnaire de protocole web — Gestionnaire</h1>
+  <p>Cette page est appelée lors de la gestion d'une action utilisant le protocole <code>fake:</code>. Voici les données reçues :</p>
+  <textarea>
+<?php echo(urldecode($value)) ?>
+  </textarea>
+</body>
+</html>
+```
diff --git a/files/fr/web/api/navigator/sendbeacon/index.md b/files/fr/web/api/navigator/sendbeacon/index.md
index ca4928b18b..567bbfb8da 100644
--- a/files/fr/web/api/navigator/sendbeacon/index.md
+++ b/files/fr/web/api/navigator/sendbeacon/index.md
@@ -12,44 +12,42 @@ tags:
   - sendBeacon
 translation_of: Web/API/Navigator/sendBeacon
 ---
-<div>{{APIRef("HTML DOM")}}</div>
+{{APIRef("HTML DOM")}}
 
-<p>La méthode  <code><strong>navigator.sendBeacon()</strong></code> peut être utilisée pour transférer une petite quantité de données de façon asynchrone via  {{Glossary("HTTP")}} vers un serveur web.</p>
+La méthode  **`navigator.sendBeacon()`** peut être utilisée pour transférer une petite quantité de données de façon asynchrone via  {{Glossary("HTTP")}} vers un serveur web.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">navigator.sendBeacon(<em>url</em>, <em>donnees</em>);
-</pre>
+    navigator.sendBeacon(url, donnees);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>url</code></dt>
- <dd>Le paramètre <code>url</code> indique l'URL résolue à laquelle les <code>donnees</code> seront transmises.</dd>
-</dl>
+- `url`
+  - : Le paramètre `url` indique l'URL résolue à laquelle les `donnees` seront transmises.
 
-<dl>
- <dt><code>donnees</code></dt>
- <dd>Le paramètre <code>donnees</code> est un objet {{domxref("ArrayBufferView")}}, {{domxref("Blob")}}, {{domxref("DOMString")}}, ou {{domxref("FormData")}} qui contient les données à transmettre.</dd>
-</dl>
+<!---->
 
-<h3 id="Valeurs_de_retour">Valeurs de retour</h3>
+- `donnees`
+  - : Le paramètre `donnees` est un objet {{domxref("ArrayBufferView")}}, {{domxref("Blob")}}, {{domxref("DOMString")}}, ou {{domxref("FormData")}} qui contient les données à transmettre.
 
-<p>La méthode <code><strong>sendBeacon()</strong></code> retourne <code>true</code> (vrai) si l'agent utilisateur est en mesure de mettre en file les données à transférer avec succès. Sinon, la méthode retourne <code>false</code> (faux).</p>
+### Valeurs de retour
 
-<h2 id="Description">Description</h2>
+La méthode **`sendBeacon()`** retourne `true` (vrai) si l'agent utilisateur est en mesure de mettre en file les données à transférer avec succès. Sinon, la méthode retourne `false` (faux).
 
-<p>Cette méthode répond aux besoins de certains codes analytiques ou de diagnostic qui tentent d'envoyer des données à un serveur web avant le déchargement (<em>unloading</em>) du document. Envoyer les données plus tôt pourrait résulter en une opportunité manquée de récolter des données. Toutefois, s'assurer que les données ont été envoyées pendant le déchargement du document est quelque chose qui a traditionnellement été difficile pour les développeurs, car les agents utilisateur ignorent généralement les requêtes {{domxref("XMLHttpRequest")}} faites à l'intérieur d'un gestionnaire d'événements {{event("unload")}}.</p>
+## Description
 
-<p>Afin de résoudre ce problème, les codes analytiques ou de diagnostic faisaient historiquement appel à une requête <code>XMLHttpRequest</code> synchrone dans un gestionnaire d'événements <code>unload</code> ou {{event("beforeunload")}} pour soumettre les données. La requête <code>XMLHttpRequest</code> synchrone bloque le processus de déchargement du document, ce qui à son tour fait paraître la navigation plus lente. Il n'y a rien que la page suivante peut faire pour éviter cette perception d'une mauvaise performance de chargement de page, et le résultat est que l'utilisateur perçoit la nouvelle page web comme étant lente à se charger, même si le vrai problème provient de la page précédente.</p>
+Cette méthode répond aux besoins de certains codes analytiques ou de diagnostic qui tentent d'envoyer des données à un serveur web avant le déchargement (_unloading_) du document. Envoyer les données plus tôt pourrait résulter en une opportunité manquée de récolter des données. Toutefois, s'assurer que les données ont été envoyées pendant le déchargement du document est quelque chose qui a traditionnellement été difficile pour les développeurs, car les agents utilisateur ignorent généralement les requêtes {{domxref("XMLHttpRequest")}} faites à l'intérieur d'un gestionnaire d'événements {{event("unload")}}.
 
-<p>Il y a des techniques de contournement qui ont été utilisées pour s'assurer que ce type de données est transmis. Une technique de ce genre est de retarder le déchargement de la page pour soumettre  les données en créant un élément {{HTMLElement("img")}} et en mettant son attribut <code>src</code> dans le gestionnaire de déchargement. Puisque la plupart des agents utilisateur vont retarder le déchargement afin de compléter le chargement de l'image en attente, les données peuvent être transmises durant le déchargement. Une autre technique est de créer une boucle de no-op (aucune opération) pour plusieurs secondes à l'intérieur du gestionnaire de déchargement, afin de retarder le déchargement et soumettre les données au serveur.</p>
+Afin de résoudre ce problème, les codes analytiques ou de diagnostic faisaient historiquement appel à une requête `XMLHttpRequest` synchrone dans un gestionnaire d'événements `unload` ou {{event("beforeunload")}} pour soumettre les données. La requête `XMLHttpRequest` synchrone bloque le processus de déchargement du document, ce qui à son tour fait paraître la navigation plus lente. Il n'y a rien que la page suivante peut faire pour éviter cette perception d'une mauvaise performance de chargement de page, et le résultat est que l'utilisateur perçoit la nouvelle page web comme étant lente à se charger, même si le vrai problème provient de la page précédente.
 
-<p>Non seulement ces techniques représentent-elles de mauvais patrons de programmation, certaines d'entre elles sont peu fiables, et elles résultent toutes en une perception d'une mauvaise performance de chargement de page pour la prochaine navigation.</p>
+Il y a des techniques de contournement qui ont été utilisées pour s'assurer que ce type de données est transmis. Une technique de ce genre est de retarder le déchargement de la page pour soumettre  les données en créant un élément {{HTMLElement("img")}} et en mettant son attribut `src` dans le gestionnaire de déchargement. Puisque la plupart des agents utilisateur vont retarder le déchargement afin de compléter le chargement de l'image en attente, les données peuvent être transmises durant le déchargement. Une autre technique est de créer une boucle de no-op (aucune opération) pour plusieurs secondes à l'intérieur du gestionnaire de déchargement, afin de retarder le déchargement et soumettre les données au serveur.
 
-<p>L'exemple suivant montre un code analytique théorique qui tente de soumettre des données à un serveur en utilisant une requête <code>XMLHttpRequest</code> synchrone dans un gestionnaire de déchargement. Cela résulte en un délai pour le déchargement de la page.</p>
+Non seulement ces techniques représentent-elles de mauvais patrons de programmation, certaines d'entre elles sont peu fiables, et elles résultent toutes en une perception d'une mauvaise performance de chargement de page pour la prochaine navigation.
 
-<pre class="brush: js">window.addEventListener('unload', enregistrerDonnees, false);
+L'exemple suivant montre un code analytique théorique qui tente de soumettre des données à un serveur en utilisant une requête `XMLHttpRequest` synchrone dans un gestionnaire de déchargement. Cela résulte en un délai pour le déchargement de la page.
+
+```js
+window.addEventListener('unload', enregistrerDonnees, false);
 
 function enregistrerDonnees() {
   var client = new XMLHttpRequest();
@@ -57,43 +55,31 @@ function enregistrerDonnees() {
   client.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
   client.send(donneesAnalytiques);
 }
-</pre>
+```
 
-<p>C'est là qu'entre en jeu <code><strong>sendBeacon()</strong></code>. En utilisant la méthode <code>sendBeacon()</code>, les données sont transmises de façon asynchrone au serveur web lorsque l'Agent Utilisateur a l'opportunité de le faire, sans retarder le déchargement ou affecter la performance de la navigation suivante. Cela résoud tous les problèmes avec la soumission de données analytiques : les données sont envoyées de façon fiable, asynchrone, et cela n'impacte pas le chargement de la page suivante. De plus, ce code est en fait plus simple à écrire que n'importe quelle de ces autres techniques!</p>
+C'est là qu'entre en jeu **`sendBeacon()`**. En utilisant la méthode `sendBeacon()`, les données sont transmises de façon asynchrone au serveur web lorsque l'Agent Utilisateur a l'opportunité de le faire, sans retarder le déchargement ou affecter la performance de la navigation suivante. Cela résoud tous les problèmes avec la soumission de données analytiques : les données sont envoyées de façon fiable, asynchrone, et cela n'impacte pas le chargement de la page suivante. De plus, ce code est en fait plus simple à écrire que n'importe quelle de ces autres techniques!
 
-<p>L'exemple suivant montre un patron de code analytique théorique qui soumet des données à un serveur en utilisant la méthode <code>sendBeacon()</code>.</p>
+L'exemple suivant montre un patron de code analytique théorique qui soumet des données à un serveur en utilisant la méthode `sendBeacon()`.
 
-<pre class="brush: js">window.addEventListener('unload', enregistrerDonnees, false);
+```js
+window.addEventListener('unload', enregistrerDonnees, false);
 
 function enregistrerDonnees() {
   navigator.sendBeacon("/log", donneesAnalytiques);
 }
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Beacon', '#sec-sendBeacon-method', 'sendBeacon()')}}</td>
-   <td>{{Spec2('Beacon')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_avec_les_navigateurs">Compatibilité avec les navigateurs</h2>
-
-<p>{{Compat("api.Navigator.sendBeacon")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("navigator", "navigator")}}</li>
- <li>{{domxref("WorkerNavigator.sendBeacon()")}} (Utilisation de <code>sendBeacon()</code> dans des <em>workers</em>)</li>
-</ul>
+```
+
+## Spécifications
+
+| Spécification                                                                        | Statut                   | Commentaire         |
+| ------------------------------------------------------------------------------------ | ------------------------ | ------------------- |
+| {{SpecName('Beacon', '#sec-sendBeacon-method', 'sendBeacon()')}} | {{Spec2('Beacon')}} | Définition initiale |
+
+## Compatibilité avec les navigateurs
+
+{{Compat("api.Navigator.sendBeacon")}}
+
+## Voir aussi
+
+- {{domxref("navigator", "navigator")}}
+- {{domxref("WorkerNavigator.sendBeacon()")}} (Utilisation de `sendBeacon()` dans des *workers*)
diff --git a/files/fr/web/api/navigator/serviceworker/index.md b/files/fr/web/api/navigator/serviceworker/index.md
index b00e6886fc..2ecbc2d5e0 100644
--- a/files/fr/web/api/navigator/serviceworker/index.md
+++ b/files/fr/web/api/navigator/serviceworker/index.md
@@ -11,55 +11,41 @@ tags:
   - ServiceWorker
 translation_of: Web/API/Navigator/serviceWorker
 ---
-<p>{{APIRef("Service Workers API")}}</p>
+{{APIRef("Service Workers API")}}
 
-<p>Le <code><strong>Navigator.serviceWorker</strong></code> est une propriété en lecture seule qui renvoie un objet {{domxref("ServiceWorkerContainer")}}, et qui permet d'accéder à l'enregistrement, la suppression, la mise à jour, et la communication avec les objets {{domxref("ServiceWorker")}} pour le <a href="https://html.spec.whatwg.org/multipage/browsers.html#concept-document-window">document  associé</a>.</p>
+Le **`Navigator.serviceWorker`** est une propriété en lecture seule qui renvoie un objet {{domxref("ServiceWorkerContainer")}}, et qui permet d'accéder à l'enregistrement, la suppression, la mise à jour, et la communication avec les objets {{domxref("ServiceWorker")}} pour le [document  associé](https://html.spec.whatwg.org/multipage/browsers.html#concept-document-window).
 
-<h2 id="syntaxe">syntaxe</h2>
+## syntaxe
 
-<pre class="syntaxbox">var workerContainerInstance = navigator.serviceWorker;
-</pre>
+    var workerContainerInstance = navigator.serviceWorker;
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>L'objet {{domxref("ServiceWorkerContainer")}}.</p>
+L'objet {{domxref("ServiceWorkerContainer")}}.
 
-<p> </p>
 
-<h2 id="Exemples">Exemples</h2>
 
-<p>Le code ci-dessous vérifie si le navigateur supporte les service workers.</p>
+## Exemples
 
-<pre><code>if ('serviceWorker' in navigator) {
-  // Supported!
-}</code></pre>
+Le code ci-dessous vérifie si le navigateur supporte les service workers.
 
-<p> </p>
+    if ('serviceWorker' in navigator) {
+      // Supported!
+    }
 
-<h2 id="Spécifications">Spécifications</h2>
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Service Workers', '#navigator-service-worker', 'navigator.serviceWorker')}}</td>
-   <td>{{Spec2('Service Workers')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
 
-<h2 id="Compatibilité_du_navigateur">Compatibilité du navigateur</h2>
+## Spécifications
 
-<p>{{Compat("api.Navigator.serviceWorker")}}</p>
+| Spécification                                                                                                        | Statut                               | Commentaire          |
+| -------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName('Service Workers', '#navigator-service-worker', 'navigator.serviceWorker')}} | {{Spec2('Service Workers')}} | Définition initiale. |
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Compatibilité du navigateur
 
-<ul>
- <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
- <li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Utilisation de Service Workers</a></li>
-</ul>
+{{Compat("api.Navigator.serviceWorker")}}
+
+## Voir aussi
+
+- [ServiceWorker API](/en-US/docs/Web/API/ServiceWorker_API)
+- [Utilisation de Service Workers](/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers)
diff --git a/files/fr/web/api/navigator/share/index.md b/files/fr/web/api/navigator/share/index.md
index 041163cac3..7e2679be73 100644
--- a/files/fr/web/api/navigator/share/index.md
+++ b/files/fr/web/api/navigator/share/index.md
@@ -3,66 +3,49 @@ title: Navigator.share
 slug: Web/API/Navigator/share
 translation_of: Web/API/Navigator/share
 ---
-<div>{{APIRef("HTML DOM")}}{{SeeCompatTable}}</div>
+{{APIRef("HTML DOM")}}{{SeeCompatTable}}
 
-<p>La méthode <strong><code>Navigator.share()</code></strong> invoque le mécanisme de partage natif de l'appareil. Celle-ci appartient à l'API Web Share. Si l'API Web Share n'est pas supportée, alors la méthode sera <code>undefined</code>.</p>
+La méthode **`Navigator.share()`** invoque le mécanisme de partage natif de l'appareil. Celle-ci appartient à l'API Web Share. Si l'API Web Share n'est pas supportée, alors la méthode sera `undefined`.
 
-<h2 id="Syntax">Syntax</h2>
+## Syntax
 
-<pre class="syntaxbox">var sharePromise = window.navigator.share(<var>data</var>);
-</pre>
+    var sharePromise = window.navigator.share(data);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><var>data</var></dt>
- <dd>Un objet contenant les données à partager. Au moins un des champs suivant doit être spécifié. Les champs possibles sont les suivant : </dd>
-</dl>
+- _data_
+  - : Un objet contenant les données à partager. Au moins un des champs suivant doit être spécifié. Les champs possibles sont les suivant :
 
-<ul>
- <li><code>url</code>: Un {{domxref("USVString")}} représentant l'URL à partager.</li>
- <li><code>text</code>: Un {{domxref("USVString")}} représentant le texte à partager.</li>
- <li><code>title</code>: Un {{domxref("USVString")}} représentant le titre à partager.</li>
-</ul>
+<!---->
 
-<dl>
-</dl>
+- `url`: Un {{domxref("USVString")}} représentant l'URL à partager.
+- `text`: Un {{domxref("USVString")}} représentant le texte à partager.
+- `title`: Un {{domxref("USVString")}} représentant le titre à partager.
 
-<h3 id="Valeur_retournée">Valeur retournée</h3>
+<!---->
 
-<p>Une {{domxref("Promise")}} qui sera résolue une fois que l'utilisateur aura finalisé son action de partage. Elle sera rejetée immédiatement si le paramètre <var>data</var> n'est pas correctement spécifié.</p>
+### Valeur retournée
 
-<p>Par exemple, sur Chrome pour Android, la <code>Promise</code> retournée sera résolue après que l'utilisateur ait choisi une application vers où partager ses données.</p>
+Une {{domxref("Promise")}} qui sera résolue une fois que l'utilisateur aura finalisé son action de partage. Elle sera rejetée immédiatement si le paramètre _data_ n'est pas correctement spécifié.
 
-<h2 id="Examples">Examples</h2>
+Par exemple, sur Chrome pour Android, la `Promise` retournée sera résolue après que l'utilisateur ait choisi une application vers où partager ses données.
 
-<pre class="brush: js">navigator.share({
+## Examples
+
+```js
+navigator.share({
   title: document.title,
   text: 'Hello World',
   url: 'https://developer.mozilla.org',
-}); // partage l'URL de MDN</pre>
-
-<h2 id="Specifications">Specifications</h2>
-
-<table>
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('Web Share API','#share-method','share()')}}</td>
-   <td>{{Spec2('Web Share API')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+}); // partage l'URL de MDN
+```
 
-<h2 id="Browser_compatibility">Browser compatibility</h2>
+## Specifications
 
+| Specification                                                            | Status                               | Comment |
+| ------------------------------------------------------------------------ | ------------------------------------ | ------- |
+| {{SpecName('Web Share API','#share-method','share()')}} | {{Spec2('Web Share API')}} |         |
 
+## Browser compatibility
 
-<p>{{Compat("api.Navigator.share")}}</p>
+{{Compat("api.Navigator.share")}}
diff --git a/files/fr/web/api/navigator/vibrate/index.md b/files/fr/web/api/navigator/vibrate/index.md
index 335b8adcf9..84b69eec7b 100644
--- a/files/fr/web/api/navigator/vibrate/index.md
+++ b/files/fr/web/api/navigator/vibrate/index.md
@@ -3,59 +3,55 @@ title: Navigator.vibrate()
 slug: Web/API/Navigator/vibrate
 translation_of: Web/API/Navigator/vibrate
 ---
-<p>{{APIRef("Vibration API")}}</p>
+{{APIRef("Vibration API")}}
 
-<p>La méthode <strong><code>Navigator.vibrate()</code></strong> active le module matériel de vibration de l'appareil, si ce dernier est présent. Si l'appareil ne supporte pas les vibrations, cette méthode n'a aucun effet. Si une série de vibration est déjà en cours, la précédente série est stopée et la nouvelle série est lancée.</p>
+La méthode **`Navigator.vibrate()`** active le module matériel de vibration de l'appareil, si ce dernier est présent. Si l'appareil ne supporte pas les vibrations, cette méthode n'a aucun effet. Si une série de vibration est déjà en cours, la précédente série est stopée et la nouvelle série est lancée.
 
-<p>Si la méthode ne peut pas vibrer en raison d'arguments invalides, elle retournera <code>false</code>, sinon elle retournera <code>true</code>. Si la série contient de trop longue vibration, elle sera tronqué; la longueur maximale dépend de l'implémentation.</p>
+Si la méthode ne peut pas vibrer en raison d'arguments invalides, elle retournera `false`, sinon elle retournera `true`. Si la série contient de trop longue vibration, elle sera tronqué; la longueur maximale dépend de l'implémentation.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var <em>successBool</em> = window.navigator.vibrate(motif);
-</pre>
+    var successBool = window.navigator.vibrate(motif);
 
-<dl>
- <dt><code>motif</code></dt>
- <dd>Fournit un motif de vibration et d'intervalle de pause. Chaque valeur indique un nombre de milisecondes de vibration ou de pause, en alternance. Vous pouvez fournir une valeur (pour vibrer une fois) ou un tableau de valeur (vibration, pause, vibration ...). Voir l'<a href="/fr/docs/Web/API/Vibration_API">API Vibration</a> pour plus de détails.</dd>
-</dl>
+- `motif`
+  - : Fournit un motif de vibration et d'intervalle de pause. Chaque valeur indique un nombre de milisecondes de vibration ou de pause, en alternance. Vous pouvez fournir une valeur (pour vibrer une fois) ou un tableau de valeur (vibration, pause, vibration ...). Voir l'[API Vibration](/fr/docs/Web/API/Vibration_API) pour plus de détails.
 
-<p>Passer la valeur 0, un tableau vide, ou un tableau de zéro arrêtera toutes les vibrations.</p>
+Passer la valeur 0, un tableau vide, ou un tableau de zéro arrêtera toutes les vibrations.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">window.navigator.vibrate(200); // vibre pendant 200ms
+```js
+window.navigator.vibrate(200); // vibre pendant 200ms
 window.navigator.vibrate([100,30,100,30,100,30,200,30,200,30,200,30,100,30,100,30,100]); // Vibre 'SOS' en Morse.
-</pre>
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('Vibration API')}}</td>
-   <td>{{Spec2('Vibration API')}}</td>
-   <td>
-    <p>Linked to spec is the latest editor's draft; W3C version is a REC.</p>
-   </td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th scope="col">Specification</th>
+      <th scope="col">Status</th>
+      <th scope="col">Comment</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>{{SpecName('Vibration API')}}</td>
+      <td>{{Spec2('Vibration API')}}</td>
+      <td>
+        <p>
+          Linked to spec is the latest editor's draft; W3C version is a REC.
+        </p>
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
+{{Compat("api.Navigator.vibrate")}}
 
+## Voir aussi
 
-<p>{{Compat("api.Navigator.vibrate")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/Vibration_API">Vibration API</a></li>
-</ul>
+- [Vibration API](/fr/docs/Web/API/Vibration_API)
diff --git a/files/fr/web/api/network_information_api/index.md b/files/fr/web/api/network_information_api/index.md
index f051a4c9cc..4cce43d77b 100644
--- a/files/fr/web/api/network_information_api/index.md
+++ b/files/fr/web/api/network_information_api/index.md
@@ -6,17 +6,18 @@ tags:
 translation_of: Web/API/Network_Information_API
 original_slug: WebAPI/Network_Information
 ---
-<p>{{ SeeCompatTable() }}</p>
+{{ SeeCompatTable() }}
 
-<p>L'API Network Information (Informations réseau) fournit des informations sur la connexion de l'appareil : la bande-passante, si la connexion est mesurée ou non. Elle peut être utilisée pour choisir entre du contenu en haute définition ou en basse définition selon la connexion de l'utilisateur. L'API ne représente qu'un seul objet, ajouté au DOM : {{domxref("window.navigator.connection")}}.</p>
+L'API Network Information (Informations réseau) fournit des informations sur la connexion de l'appareil : la bande-passante, si la connexion est mesurée ou non. Elle peut être utilisée pour choisir entre du contenu en haute définition ou en basse définition selon la connexion de l'utilisateur. L'API ne représente qu'un seul objet, ajouté au DOM : {{domxref("window.navigator.connection")}}.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Détecter_les_changements_de_connexion">Détecter les changements de connexion</h3>
+### Détecter les changements de connexion
 
-<p>Cet exemple permet de connaître les changements liés à la connexion d'un utilisateur. Cela ressemble notamment à la façon dont une application saura si l'utilisateur passe d'une connexion coûteuse à une autre connexion moins chère et pourra réduire la demande de bande passante afin de réduire les coûts pour l'utilisateur.</p>
+Cet exemple permet de connaître les changements liés à la connexion d'un utilisateur. Cela ressemble notamment à la façon dont une application saura si l'utilisateur passe d'une connexion coûteuse à une autre connexion moins chère et pourra réduire la demande de bande passante afin de réduire les coûts pour l'utilisateur.
 
-<pre class="brush: js">var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
+```js
+var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
 
 function updateConnectionStatus() {
   alert("Bande passante de la connexion : " + connection.bandwidth + " MB/s");
@@ -27,60 +28,45 @@ function updateConnectionStatus() {
 
 connection.addEventListener("change", updateConnectionStatus);
 updateConnectionStatus();
-</pre>
+```
 
-<h3 id="Préchargement_de_ressources_gourmandes">Préchargement de ressources gourmandes</h3>
+### Préchargement de ressources gourmandes
 
-<p>L'objet connexion est pratique pour décider de précharger des ressources nécessitant une grosse quantité de bande passante ou de mémoire. Cet exemple devra être appelé après que la page ait été chargé. Il détermine si précharger la vidéo est judicieux selon le type de la connexion. Si une connexion cellulaire est trouvée, alors <code>preloadVideo</code> est réglé à faux. Ici pour faire simple, on ne teste qu'un type de connexion; dans un cas réel on aurait plutôt utilisé une structure de contrôle switch ou une autre méthode pour avoir tout les cas possibles de {{domxref("NetworkInformation.type")}}. Malgré la valeur <code>type</code>, on peut avoir une estimation de la vitesse de la connexion à travers la propriété {{domxref("NetworkInformation.effectiveType")}}<strong>.</strong></p>
+L'objet connexion est pratique pour décider de précharger des ressources nécessitant une grosse quantité de bande passante ou de mémoire. Cet exemple devra être appelé après que la page ait été chargé. Il détermine si précharger la vidéo est judicieux selon le type de la connexion. Si une connexion cellulaire est trouvée, alors `preloadVideo` est réglé à faux. Ici pour faire simple, on ne teste qu'un type de connexion; dans un cas réel on aurait plutôt utilisé une structure de contrôle switch ou une autre méthode pour avoir tout les cas possibles de {{domxref("NetworkInformation.type")}}. Malgré la valeur `type`, on peut avoir une estimation de la vitesse de la connexion à travers la propriété {{domxref("NetworkInformation.effectiveType")}}**.**
 
-<pre class="brush: js">let preloadVideo = true;
+```js
+let preloadVideo = true;
 var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
 if (connection) {
   if (connection.effectiveType === 'cellular') {
     preloadVideo = false;
   }
-}</pre>
+}
+```
 
-<h2 id="Interfaces">Interfaces</h2>
+## Interfaces
 
-<dl>
- <dt>{{domxref("NetworkInformation")}}</dt>
- <dd>Fournit des informations sur la connexion de l'appareil et fournit la possibilité aux scriptes d'être informé en cas de changement. L'interface <code>NetworkInformation</code> ne peut pas être instanciée; à la place on y accède à travers l'interface {{domxref("Navigator")}}.</dd>
-</dl>
+- {{domxref("NetworkInformation")}}
+  - : Fournit des informations sur la connexion de l'appareil et fournit la possibilité aux scriptes d'être informé en cas de changement. L'interface `NetworkInformation` ne peut pas être instanciée; à la place on y accède à travers l'interface {{domxref("Navigator")}}.
 
-<h2 id="Spécification">Spécification</h2>
+## Spécification
 
-<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('Network Information', '', 'Network Information API')}}</td>
-   <td>{{Spec2('Network Information')}}</td>
-   <td>Spécification initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                            | Status                                       | Commentaire            |
+| ---------------------------------------------------------------------------------------- | -------------------------------------------- | ---------------------- |
+| {{SpecName('Network Information', '', 'Network Information API')}} | {{Spec2('Network Information')}} | Spécification initiale |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<h3 id="NetworkInformation"><code>NetworkInformation</code></h3>
+### `NetworkInformation`
 
-<p>{{Compat("api.NetworkInformation")}}</p>
+{{Compat("api.NetworkInformation")}}
 
-<h3 id="Navigator.connection"><code>Navigator.connection</code></h3>
+### `Navigator.connection`
 
-<p>{{Compat("api.Navigator.connection")}}</p>
+{{Compat("api.Navigator.connection")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{spec("http://dvcs.w3.org/hg/dap/raw-file/tip/network-api/Overview.html", "Spécification de l'API Network Information", "ED")}}</li>
- <li><a href="/fr/docs/Online_and_offline_events">Les évènement online et offline</a></li>
- <li>{{domxref("window.navigator.connection")}}</li>
-</ul>
+- {{spec("http://dvcs.w3.org/hg/dap/raw-file/tip/network-api/Overview.html", "Spécification de l'API Network Information", "ED")}}
+- [Les évènement online et offline](/fr/docs/Online_and_offline_events)
+- {{domxref("window.navigator.connection")}}
diff --git a/files/fr/web/api/node/appendchild/index.md b/files/fr/web/api/node/appendchild/index.md
index 800be4c3bb..c71ba507b3 100644
--- a/files/fr/web/api/node/appendchild/index.md
+++ b/files/fr/web/api/node/appendchild/index.md
@@ -10,90 +10,64 @@ tags:
   - Noeuds
 translation_of: Web/API/Node/appendChild
 ---
-<p>{{APIRef("DOM")}}</p>
+{{APIRef("DOM")}}
 
-<p>La méthode <code><strong>Node.appendChild()</strong></code> ajoute un nœud à la fin de la liste des enfants d'un nœud parent spécifié. Si l'enfant donné est une référence à un nœud existant dans le document, <code>appendChild()</code> le déplace  de sa position actuelle vers une nouvelle position (il n'est pas nécessaire de supprimer le noeud sur son noeud parent avant de l'ajouter à un autre).</p>
+La méthode **`Node.appendChild()`** ajoute un nœud à la fin de la liste des enfants d'un nœud parent spécifié. Si l'enfant donné est une référence à un nœud existant dans le document, `appendChild()` le déplace  de sa position actuelle vers une nouvelle position (il n'est pas nécessaire de supprimer le noeud sur son noeud parent avant de l'ajouter à un autre).
 
-<p>Cela signifie qu'un noeud ne peut pas être à deux points du document simultanément. Donc, si le nœud a déjà un parent, le nœud est d'abord retiré, puis ajouté à la nouvelle position. Le {{domxref("Node.cloneNode()")}} peut être utilisé pour réaliser une copie de noeud avant de l'ajouter à son nouveau parent. Notez que les copies faites avec <code>cloneNode</code> ne seront pas automatiquement synchronisées.</p>
+Cela signifie qu'un noeud ne peut pas être à deux points du document simultanément. Donc, si le nœud a déjà un parent, le nœud est d'abord retiré, puis ajouté à la nouvelle position. Le {{domxref("Node.cloneNode()")}} peut être utilisé pour réaliser une copie de noeud avant de l'ajouter à son nouveau parent. Notez que les copies faites avec `cloneNode` ne seront pas automatiquement synchronisées.
 
-<p>Si l'enfant donné est un {{domxref("DocumentFragment")}} , le contenu entier du {{domxref("DocumentFragment")}} est déplacé dans la liste d'enfants du noeud parent spécifié.</p>
+Si l'enfant donné est un {{domxref("DocumentFragment")}} , le contenu entier du {{domxref("DocumentFragment")}} est déplacé dans la liste d'enfants du noeud parent spécifié.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="eval">var <em>elementAjoute</em> = <em>element</em>.appendChild(<em>enfant</em>);
-</pre>
+    var elementAjoute = element.appendChild(enfant);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><strong>enfant</strong></dt>
- <dd>Le noeud à ajouter au noeud parent donné (généralement un élément).</dd>
-</dl>
+- **enfant**
+  - : Le noeud à ajouter au noeud parent donné (généralement un élément).
 
-<h3 id="Valeur_renvoyée">Valeur renvoyée</h3>
+### Valeur renvoyée
 
-<p>La valeur renvoyée est l'enfant ajouté sauf si l'enfant donné est un {{domxref ("DocumentFragment")}}, auquel cas le {{domxref ("DocumentFragment")}} vide est renvoyé.</p>
+La valeur renvoyée est l'enfant ajouté sauf si l'enfant donné est un {{domxref ("DocumentFragment")}}, auquel cas le {{domxref ("DocumentFragment")}} vide est renvoyé.
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p>Le chaînage peut ne pas fonctionner comme prévu en raison de <code>appendChild()</code> renvoyant l'élément enfant :</p>
+Le chaînage peut ne pas fonctionner comme prévu en raison de `appendChild()` renvoyant l'élément enfant :
 
-<pre class="brush: js">var aBlock = doc.createElement('block').appendChild(doc.createElement('b'));</pre>
+```js
+var aBlock = doc.createElement('block').appendChild(doc.createElement('b'));
+```
 
-<p>Définit <code>aBlock</code> pour <code>&lt;b&gt;&lt;/b&gt;</code> uniquement, ce que vous ne voulez probablement pas.</p>
+Définit `aBlock` pour `<b></b>` uniquement, ce que vous ne voulez probablement pas.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush:js">// Crée un nouvel élément paragraphe et l'ajoute à la fin du corps du document
+```js
+// Crée un nouvel élément paragraphe et l'ajoute à la fin du corps du document
 var p = document.createElement("p");
-document.body.appendChild(p);</pre>
-
-<h2 id="Spécification">Spécification</h2>
-
-<p> </p>
-
-<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('DOM WHATWG', '#dom-node-appendchild', 'Node.appendChild()')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Pas de changement de {{SpecName("DOM3 Core")}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM3 Core', 'core.html#ID-184E7107', 'Node.appendChild()')}}</td>
-   <td>{{Spec2('DOM3 Core')}}</td>
-   <td>Pas de changement de {{SpecName("DOM2 Core")}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Core', 'core.html#ID-184E7107', 'Node.appendChild()')}}</td>
-   <td>{{Spec2('DOM2 Core')}}</td>
-   <td>Pas de changement de {{SpecName("DOM1")}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM1', 'level-one-core.html#ID-184E7107', 'Node.appendChild()')}}</td>
-   <td>{{Spec2('DOM1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Node.appendChild")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("Node.removeChild")}}</li>
- <li>{{domxref("Node.replaceChild")}}</li>
- <li>{{domxref("Node.insertBefore")}}</li>
- <li>{{domxref("Node.hasChildNodes")}}</li>
- <li>{{domxref("ParentNode.append()")}}</li>
-</ul>
+document.body.appendChild(p);
+```
+
+## Spécification
+
+
+
+| Spécification                                                                                            | Statut                           | Commentaire                                            |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------ |
+| {{SpecName('DOM WHATWG', '#dom-node-appendchild', 'Node.appendChild()')}}         | {{Spec2('DOM WHATWG')}} | Pas de changement de {{SpecName("DOM3 Core")}}. |
+| {{SpecName('DOM3 Core', 'core.html#ID-184E7107', 'Node.appendChild()')}}         | {{Spec2('DOM3 Core')}}     | Pas de changement de {{SpecName("DOM2 Core")}}. |
+| {{SpecName('DOM2 Core', 'core.html#ID-184E7107', 'Node.appendChild()')}}         | {{Spec2('DOM2 Core')}}     | Pas de changement de {{SpecName("DOM1")}}.     |
+| {{SpecName('DOM1', 'level-one-core.html#ID-184E7107', 'Node.appendChild()')}} | {{Spec2('DOM1')}}         | Définition initiale.                                   |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Node.appendChild")}}
+
+## Voir aussi
+
+- {{domxref("Node.removeChild")}}
+- {{domxref("Node.replaceChild")}}
+- {{domxref("Node.insertBefore")}}
+- {{domxref("Node.hasChildNodes")}}
+- {{domxref("ParentNode.append()")}}
diff --git a/files/fr/web/api/node/baseuri/index.md b/files/fr/web/api/node/baseuri/index.md
index 68cf5be1bc..cbecf41d24 100644
--- a/files/fr/web/api/node/baseuri/index.md
+++ b/files/fr/web/api/node/baseuri/index.md
@@ -12,60 +12,49 @@ tags:
   - XML
 translation_of: Web/API/Node/baseURI
 ---
-<div>
-<div>{{APIRef("DOM")}}</div>
-</div>
+{{APIRef("DOM")}}
 
-<p>La propriété en lecture seule <code><strong>Node.baseURI</strong></code> renvoie l'URL de base absolue d'un noeud.</p>
+La propriété en lecture seule **`Node.baseURI`** renvoie l'URL de base absolue d'un noeud.
 
-<p>L'URL de base est utilisée pour <a href="http://developers.whatwg.org/urls.html#resolving-urls">résoudre</a> les URL relatives quand le navigateur a besoin d'obtenir une URL absolue, par exemple lors du traitement de l'attribut <code>src</code>  en HTML ou XML <code><a href="/fr/docs/Glossaire/XLink">xlink</a>:href</code> d'un élément {{HTMLElement("img")}} HTML.</p>
+L'URL de base est utilisée pour [résoudre](http://developers.whatwg.org/urls.html#resolving-urls) les URL relatives quand le navigateur a besoin d'obtenir une URL absolue, par exemple lors du traitement de l'attribut `src`  en HTML ou XML `xlink:href` d'un élément {{HTMLElement("img")}} HTML.
 
-<p>En général, l'URL de base est simplement l'emplacement du document, mais elle peut être affectée par de nombreux facteurs, y compris l'élément {{HTMLElement("base")}} en HTML et l'attribut  <code><a href="/fr/docs/Introduction_%C3%A0_XML/xml:base">xml:base</a></code> en XML.</p>
+En général, l'URL de base est simplement l'emplacement du document, mais elle peut être affectée par de nombreux facteurs, y compris l'élément {{HTMLElement("base")}} en HTML et l'attribut  [`xml:base`](/fr/docs/Introduction_%C3%A0_XML/xml:base) en XML.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var <em>baseURI</em> = <em>node</em>.baseURI;
-</pre>
+    var baseURI = node.baseURI;
 
-<ul>
- <li><code>baseURI</code> est une {{ domxref("DOMString") }} (<em>chaîne de caractères</em>) représentant l'URL de base du {{domxref("Node")}} spécifié. Elle peut être <code>null</code> s'il est impossible d'obtenir une URI absolue.</li>
- <li><code><em>node</em>.baseURI</code> est en lecture seule.</li>
- <li><code><em>node</em>.baseURI</code> peut changer avec le temps (voir ci-dessous).</li>
-</ul>
+- `baseURI` est une {{ domxref("DOMString") }} (_chaîne de caractères_) représentant l'URL de base du {{domxref("Node")}} spécifié. Elle peut être `null` s'il est impossible d'obtenir une URI absolue.
+- `node.baseURI` est en lecture seule.
+- `node.baseURI` peut changer avec le temps (voir ci-dessous).
 
-<h2 id="Details">Détails</h2>
+## Détails
 
-<h3 id="L'URL_de_base_d'un_document">L'URL de base d'un document</h3>
+### L'URL de base d'un document
 
-<p>L'URL de base d'un <em>document</em> est par défaut l'adresse du document (telle qu'affichée par le navigateur et disponible dans {{domxref("window.location")}}), mais peut changer par défaut :</p>
+L'URL de base d'un _document_ est par défaut l'adresse du document (telle qu'affichée par le navigateur et disponible dans {{domxref("window.location")}}), mais peut changer par défaut :
 
-<ul>
- <li>Si une balise HTML {{HTMLElement("base")}} est trouvée dans le document ;</li>
- <li>Lorsque celui-ci est un nouveau document créé dynamiquement.</li>
-</ul>
+- Si une balise HTML {{HTMLElement("base")}} est trouvée dans le document ;
+- Lorsque celui-ci est un nouveau document créé dynamiquement.
 
-<p>Voir la page <a href="http://developers.whatwg.org/urls.html#base-urls">Base URLs section of the HTML Living standard</a> (en) pour plus de détails.</p>
+Voir la page [Base URLs section of the HTML Living standard](http://developers.whatwg.org/urls.html#base-urls) (en) pour plus de détails.
 
-<p>Vous pouvez utiliser <code><em>{{domxref("document")}}</em>.baseURI</code> pour obtenir l'URL de base d'un document. Notez que l'obtention de l'URL de base d'un document peut renvoyer des URL différentes au fil du temps si la balise {{HTMLElement("base")}} ou l'emplacement du document change.</p>
+Vous pouvez utiliser `{{domxref("document")}}.baseURI` pour obtenir l'URL de base d'un document. Notez que l'obtention de l'URL de base d'un document peut renvoyer des URL différentes au fil du temps si la balise {{HTMLElement("base")}} ou l'emplacement du document change.
 
-<h3 id="L'URL_de_base_d'un_élément">L'URL de base d'un élément</h3>
+### L'URL de base d'un élément
 
-<p>L'URL de base d'un <em>element</em> en HTML est normalement équivalente à celle du document dans lequel se trouve le noeud.</p>
+L'URL de base d'un _element_ en HTML est normalement équivalente à celle du document dans lequel se trouve le noeud.
 
-<p>Si le document contient des attributs <code><a href="/fr/docs/Introduction_%C3%A0_XML/xml:base">xml:base</a></code> (ce que vous ne devriez pas faire dans les documents HTML), l'<code><em>element</em>.baseURI</code> prend en compte l'attribut <code>xml:base</code> des parents de l'élément  lors du calcul de l'URL de base. Voir <a href="/fr/docs/Introduction_%C3%A0_XML/xml:base">xml:base</a> pour plus de détails.</p>
+Si le document contient des attributs [`xml:base`](/fr/docs/Introduction_%C3%A0_XML/xml:base) (ce que vous ne devriez pas faire dans les documents HTML), l'`element.baseURI` prend en compte l'attribut `xml:base` des parents de l'élément  lors du calcul de l'URL de base. Voir [xml:base](/fr/docs/Introduction_%C3%A0_XML/xml:base) pour plus de détails.
 
-<p>Vous pouvez utiliser <code><em>{{domxref("element")}}</em>.baseURI</code> pour obtenir l'URL de base d'un élément.</p>
+Vous pouvez utiliser `{{domxref("element")}}.baseURI` pour obtenir l'URL de base d'un élément.
 
-<h2 id="Specification">Spécification</h2>
+## Spécification
 
-<ul>
- <li>{{spec("http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-baseURI","DOM Level 3 Core: baseURI","REC")}}</li>
-</ul>
+- {{spec("http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-baseURI","DOM Level 3 Core: baseURI","REC")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>l'élément {{HTMLElement("base")}} (HTML)</li>
- <li>l'attribut <code><a href="/fr/docs/Introduction_%C3%A0_XML/xml:base">xml:base</a></code> (documents XML).</li>
- <li>{{domxref("Node.baseURIObject")}} - une variante de cette API pour les add-ons Mozilla et le code interne. Renvoie l'URL de base en tant que {{interface("nsIURI")}}.</li>
-</ul>
+- l'élément {{HTMLElement("base")}} (HTML)
+- l'attribut [`xml:base`](/fr/docs/Introduction_%C3%A0_XML/xml:base) (documents XML).
+- {{domxref("Node.baseURIObject")}} - une variante de cette API pour les add-ons Mozilla et le code interne. Renvoie l'URL de base en tant que {{interface("nsIURI")}}.
diff --git a/files/fr/web/api/node/childnodes/index.md b/files/fr/web/api/node/childnodes/index.md
index b9f4630ffc..4482d18e89 100644
--- a/files/fr/web/api/node/childnodes/index.md
+++ b/files/fr/web/api/node/childnodes/index.md
@@ -9,95 +9,68 @@ tags:
   - Propriétés
 translation_of: Web/API/Node/childNodes
 ---
-<p>{{APIRef("DOM")}}</p>
+{{APIRef("DOM")}}
 
-<p>La propriété en lecture seule  <code><strong>Node.childNodes</strong></code> renvoie une {{domxref("NodeList")}} (<em>liste de noeuds</em>) de {{domxref("Node","noeuds")}} enfants de l'élément donné avec le premier noeud enfant affecté à l'index 0.</p>
+La propriété en lecture seule  **`Node.childNodes`** renvoie une {{domxref("NodeList")}} (_liste de noeuds_) de {{domxref("Node","noeuds")}} enfants de l'élément donné avec le premier noeud enfant affecté à l'index 0.
 
-<h2 id="Syntaxe_et_valeurs">Syntaxe</h2>
+## Syntaxe
 
-<pre class="eval"><a href="/fr/Référence_de_JavaScript_1.5_Core/Instructions/var">var</a> <var>collNoeuds</var> = elementDeReference.<a href="/fr/DOM/element.childNodes">childNodes</a>;
-</pre>
+    var collNoeuds = elementDeReference.childNodes;
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Utilisation_simple">Utilisation simple</h3>
+### Utilisation simple
 
-<pre class="brush:js">// parg est une référence d'objet pour un élément &lt;p&gt;
+```js
+// parg est une référence d'objet pour un élément <p>
 
-// D'abord vérifier que l'élément a des noeuds enfants 
+// D'abord vérifier que l'élément a des noeuds enfants
 if (parg.hasChildNodes()) {
   var children = parg.childNodes;
 
-  for (var i = 0; i &lt; children.length; i++) {
+  for (var i = 0; i < children.length; i++) {
     // faire quelque chose avec chaque enfant[i]
     // NOTE: La liste est en ligne, l'ajout ou la suppression des enfants changera la liste
   }
-}</pre>
+}
+```
 
-<h3 id="Supprimer_tous_les_enfants_d'un_nom">Supprimer tous les enfants d'un nom</h3>
+### Supprimer tous les enfants d'un nom
 
-<pre>// Voici une manière de supprimer tous les enfants d'un nœud
-// (boite est une référence à un élément ayant des enfants)
-<a href="/fr/Référence_de_JavaScript_1.5_Core/Instructions/while">while</a>( boite.<a href="/fr/DOM/element.firstChild">firstChild</a>) {
-    // La liste n'est pas une copie, elle sera donc réindexée à chaque appel
-    boite.<a href="/fr/DOM/element.removeChild">removeChild</a>( boite.<a href="/fr/DOM/element.firstChild">firstChild</a>);
-}
-</pre>
-
-<h2 id="Notes">Notes</h2>
-
-<p>Les éléments de la collection de noeuds sont des objets et non des chaînes de caractères. Pour en obtenir les données, vous devez utiliser leurs propriétés (par exemple <code>elementNodeReference.childNodes[1].nodeName</code> pour obtenir son nom, etc.)</p>
-
-<p>L'objet <a href="/fr/DOM/document"><code>document</code></a> lui-même a deux enfants : la déclaration <a href="/fr/DOM/document.doctype">Doctype</a> et l'élément racine, généralement appelés  <code>documentElement</code> . (Dans les documents (X)HTML il s'agit d'éléments  <a href="/fr/HTML/Element/html"><code>HTML</code></a>).</p>
-
-<p><code>childNodes</code>  inclut tous les noeuds enfants, y compris les noeuds qui ne sont pas des éléments comme les noeuds texte et commentaire. Pour obtenir une collection des seuls éléments, utilisez {{domxref("ParentNode.children")}} à la place.</p>
-
-<p> </p>
-
-<h2 id="Spécification">Spécification</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('DOM WHATWG', '#dom-node-childnodes', 'Node.childNodes')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Pas de changement</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM3 Core', 'core.html#ID-1451460987', 'Node.childNodes')}}</td>
-   <td>{{Spec2('DOM3 Core')}}</td>
-   <td>Pas de changement</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Core', 'core.html#ID-1451460987', 'Node.childNodes')}}</td>
-   <td>{{Spec2('DOM2 Core')}}</td>
-   <td>Pas de changement</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM1', 'level-one-core.html#ID-1451460987', 'Node.childNodes')}}</td>
-   <td>{{Spec2('DOM1')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Node.childNodes")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("Node.firstChild")}}</li>
- <li>{{domxref("Node.lastChild")}}</li>
- <li>{{domxref("Node.nextSibling")}}</li>
- <li>{{domxref("Node.previousSibling")}}</li>
- <li>{{domxref("ParentNode.children")}}</li>
-</ul>
+    // Voici une manière de supprimer tous les enfants d'un nœud
+    // (boite est une référence à un élément ayant des enfants)
+    while( boite.firstChild) {
+        // La liste n'est pas une copie, elle sera donc réindexée à chaque appel
+        boite.removeChild( boite.firstChild);
+    }
+
+## Notes
+
+Les éléments de la collection de noeuds sont des objets et non des chaînes de caractères. Pour en obtenir les données, vous devez utiliser leurs propriétés (par exemple `elementNodeReference.childNodes[1].nodeName` pour obtenir son nom, etc.)
+
+L'objet [`document`](/fr/DOM/document) lui-même a deux enfants : la déclaration [Doctype](/fr/DOM/document.doctype) et l'élément racine, généralement appelés  `documentElement` . (Dans les documents (X)HTML il s'agit d'éléments  [`HTML`](/fr/HTML/Element/html)).
+
+`childNodes`  inclut tous les noeuds enfants, y compris les noeuds qui ne sont pas des éléments comme les noeuds texte et commentaire. Pour obtenir une collection des seuls éléments, utilisez {{domxref("ParentNode.children")}} à la place.
+
+
+
+## Spécification
+
+| Spécification                                                                                        | Statut                           | Commentaire         |
+| ---------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- |
+| {{SpecName('DOM WHATWG', '#dom-node-childnodes', 'Node.childNodes')}}         | {{Spec2('DOM WHATWG')}} | Pas de changement   |
+| {{SpecName('DOM3 Core', 'core.html#ID-1451460987', 'Node.childNodes')}}     | {{Spec2('DOM3 Core')}}     | Pas de changement   |
+| {{SpecName('DOM2 Core', 'core.html#ID-1451460987', 'Node.childNodes')}}     | {{Spec2('DOM2 Core')}}     | Pas de changement   |
+| {{SpecName('DOM1', 'level-one-core.html#ID-1451460987', 'Node.childNodes')}} | {{Spec2('DOM1')}}         | Définition initiale |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Node.childNodes")}}
+
+## Voir aussi
+
+- {{domxref("Node.firstChild")}}
+- {{domxref("Node.lastChild")}}
+- {{domxref("Node.nextSibling")}}
+- {{domxref("Node.previousSibling")}}
+- {{domxref("ParentNode.children")}}
diff --git a/files/fr/web/api/node/clonenode/index.md b/files/fr/web/api/node/clonenode/index.md
index fef79935dc..ca70a18cb3 100644
--- a/files/fr/web/api/node/clonenode/index.md
+++ b/files/fr/web/api/node/clonenode/index.md
@@ -9,84 +9,55 @@ tags:
   - Noeuds
 translation_of: Web/API/Node/cloneNode
 ---
-<p>{{APIRef("DOM")}}</p>
+{{APIRef("DOM")}}
 
-<p>La méthode <strong><code>Node.cloneNode()</code></strong> renvoie une copie du nœud sur lequel elle a été appelée.</p>
+La méthode **`Node.cloneNode()`** renvoie une copie du nœud sur lequel elle a été appelée.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var <em><var>dupNode</var></em> = <em><var>node</var></em>.cloneNode([<em><var>deep]</var></em>);
-</pre>
+    var dupNode = node.cloneNode([deep]);
 
-<dl>
- <dt>node</dt>
- <dd>Le noeud à dupliquer.</dd>
- <dt>dupNode</dt>
- <dd>Le nouveau noeud qui sera un clone du <code>node</code>.</dd>
- <dt>deep <em>{{optional_inline}} (profondeur)</em></dt>
- <dd><code>true</code> (<em>vrai</em>) si les enfants du noeud doivent aussi être clonés ou <code>false</code> (<em>faux</em>) si seul le noeud spécifié doit l'être.</dd>
-</dl>
+- node
+  - : Le noeud à dupliquer.
+- dupNode
+  - : Le nouveau noeud qui sera un clone du `node`.
+- deep _{{optional_inline}} (profondeur)_
+  - : `true` (_vrai_) si les enfants du noeud doivent aussi être clonés ou `false` (_faux_) si seul le noeud spécifié doit l'être.
 
-<div class="note">
-<p><strong>Note :</strong> Dans la spécification DOM4 (telle qu'implémentée dans Gecko 13.0 {{geckoRelease(13)}}), <code>deep</code> est un argument facultatif. S'il est omis, la méthode agit comme si la valeur de  <code>deep</code> était <strong><code>true</code></strong> par défaut, elle utilise le clonage profond comme comportement par défaut. Pour créer un clone superficiel, <code>deep</code> doit être défini sur <code>false</code>.</p>
+> **Note :** Dans la spécification DOM4 (telle qu'implémentée dans Gecko 13.0 {{geckoRelease(13)}}), `deep` est un argument facultatif. S'il est omis, la méthode agit comme si la valeur de  `deep` était **`true`** par défaut, elle utilise le clonage profond comme comportement par défaut. Pour créer un clone superficiel, `deep` doit être défini sur `false`.
+>
+> Le comportement a été modifié dans la dernière spécification et, s'il est omis, la méthode doit agir comme si la valeur de `deep` était **`false`**. Bien que ce soit toujours facultatif, vous devriez toujours fournir l'argument `deep` pour la compatibilité amont et aval. Avec Gecko 28.0 {{geckoRelease(28)}}), la console a averti les développeurs de ne pas omettre l'argument. À partir de Gecko 29.0 {{geckoRelease(29)}}), un clone superficiel est défini par défaut au lieu d'un clone profond.
 
-<p>Le comportement a été modifié dans la dernière spécification et, s'il est omis, la méthode doit agir comme si la valeur de <code>deep</code> était <strong><code>false</code></strong>. Bien que ce soit toujours facultatif, vous devriez toujours fournir l'argument <code>deep</code> pour la compatibilité amont et aval. Avec Gecko 28.0 {{geckoRelease(28)}}), la console a averti les développeurs de ne pas omettre l'argument. À partir de Gecko 29.0 {{geckoRelease(29)}}), un clone superficiel est défini par défaut au lieu d'un clone profond.</p>
-</div>
+## Exemple
 
-<h2 id="Exemple">Exemple</h2>
+    p = document.getElementById("para1");
+    p_prime = p.cloneNode(true);
 
-<pre>p = document.getElementById("para1");
-p_prime = p.cloneNode(true);
-</pre>
+## Notes
 
-<h2 id="Notes">Notes</h2>
+Cloner un nœud copie tous ses attributs ainsi que leurs valeurs, y compris les auditeurs intrinsèques (en ligne). Il ne copie pas les auditeurs d'évènement ajoutés avec [`addEventListener()`](/en-US/docs/DOM/element.addEventListener) ou ceux assignés au propriétés d'éléments (par exemple `node.onclick = fn`). De plus, pour un élément {{HTMLElement("canvas")}} l'image peinte n'est pas copiée.
 
-<p>Cloner un nœud copie tous ses attributs ainsi que leurs valeurs, y compris les auditeurs intrinsèques (en ligne). Il ne copie pas les auditeurs d'évènement ajoutés avec <a href="/en-US/docs/DOM/element.addEventListener"><code>addEventListener()</code></a> ou ceux assignés au propriétés d'éléments (par exemple <code>node.onclick = fn</code>). De plus, pour un élément {{HTMLElement("canvas")}} l'image peinte n'est pas copiée.</p>
+Le nœud dupliqué renvoyé par `cloneNode` ne fera pas partie du document tant qu'il n'y est pas ajouté via la méthode {{domxref("Node.appendChild()")}} ou une méthode similaire. De même, il n'a pas de parent tant qu'il n'a pas été ajouté à un autre nœud.
 
-<p>Le nœud dupliqué renvoyé par <code>cloneNode</code> ne fera pas partie du document tant qu'il n'y est pas ajouté via la méthode  {{domxref("Node.appendChild()")}} ou une méthode similaire. De même, il n'a pas de parent tant qu'il n'a pas été ajouté à un autre nœud.</p>
+Si `deep` est défini à `false`, aucun des nœuds enfants n'est copié.
+*T*out texte contenu dans le nœud n'est pas copié non plus , car il fait partie d'un ou plusieurs nœuds {{domxref("Text")}} enfants.
 
-<p>Si <code>deep</code> est défini à <code>false</code>, aucun des nœuds enfants n'est copié.<br>
- <em>T</em>out texte contenu dans le nœud n'est pas copié non plus , car il fait partie d'un ou plusieurs nœuds {{domxref("Text")}}  enfants.</p>
+Si `deep` est évalué à `true`, le sous-arbre entier est copié également (y compris le texte qui peut être contenu dans des nœuds {{domxref("Text")}} enfants). Pour les nœuds vides (par exemple les éléments {{HTMLElement("img")}} et {{HTMLElement("input")}} ) le fait de mettre `deep` à `true` ou `false` n'a aucune incidence sur la copie, mais il est tout de même nécessaire de fournir une valeur.
 
-<p>Si <code>deep</code> est évalué à <code>true</code>, le sous-arbre entier est copié également (y compris le texte qui peut être contenu dans des nœuds  {{domxref("Text")}}  enfants). Pour les nœuds vides (par exemple les éléments  {{HTMLElement("img")}}  et  {{HTMLElement("input")}} ) le fait de mettre <code>deep</code> à <code>true</code> ou <code>false</code> n'a aucune incidence sur la copie, mais il est tout de même nécessaire de fournir une valeur.</p>
+> **Attention :** `cloneNode()` peut conduire à dupliquer des ID (_identifiant_) d'éléments dans un document.
 
-<div class="warning">
-<p><strong>Attention :</strong> <code>cloneNode()</code> peut conduire à dupliquer des ID (<em>identifiant</em>) d'éléments dans un document.</p>
-</div>
+Si le noeud d'origine a un identifiant et que le clone doit être placé dans le même document, l'identifiant du clone peut être modifié pour être unique. Les attributs du nom peuvent devoir être modifiés également, selon que les noms en double sont attendus.
 
-<p>Si le noeud d'origine a un identifiant et que le clone doit être placé dans le même document, l'identifiant du clone peut être modifié pour être unique. Les attributs du nom peuvent devoir être modifiés également, selon que les noms en double sont attendus.</p>
+Pour cloner un noeud à ajouter dans un document différent, utilisez  {{domxref("Document.importNode()")}} à la place.
 
-<p>Pour cloner un noeud à ajouter dans un document différent, utilisez  {{domxref("Document.importNode()")}} à la place.</p>
+### Spécification
 
-<h3 id="Sp.C3.A9cification">Spécification</h3>
+| Spécification                                                                                | Statut                           | Commentaire         |
+| -------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- |
+| {{SpecName("DOM WHATWG", "#dom-node-clonenode", "Node.cloneNode()")}} | {{Spec2("DOM WHATWG")}} |                     |
+| {{SpecName("DOM3 Core", "core.html#ID-3A0ED0A4", "Node.cloneNode()")}} | {{Spec2("DOM3 Core")}}     |                     |
+| {{SpecName("DOM2 Core", "core.html#ID-3A0ED0A4", "Node.cloneNode()")}} | {{Spec2("DOM2 Core")}}     | Définition initiale |
 
-<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("DOM WHATWG", "#dom-node-clonenode", "Node.cloneNode()")}}</td>
-   <td>{{Spec2("DOM WHATWG")}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName("DOM3 Core", "core.html#ID-3A0ED0A4", "Node.cloneNode()")}}</td>
-   <td>{{Spec2("DOM3 Core")}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName("DOM2 Core", "core.html#ID-3A0ED0A4", "Node.cloneNode()")}}</td>
-   <td>{{Spec2("DOM2 Core")}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+## Compatibilité des navigateurs
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Node.cloneNode")}}</p>
+{{Compat("api.Node.cloneNode")}}
diff --git a/files/fr/web/api/node/comparedocumentposition/index.md b/files/fr/web/api/node/comparedocumentposition/index.md
index a40125b5c1..21bc78963d 100644
--- a/files/fr/web/api/node/comparedocumentposition/index.md
+++ b/files/fr/web/api/node/comparedocumentposition/index.md
@@ -10,99 +10,52 @@ tags:
   - Position
 translation_of: Web/API/Node/compareDocumentPosition
 ---
-<div>{{APIRef("DOM")}}</div>
-
-<p>La méthode <code><strong>Node.compareDocumentPosition()</strong></code>compare la position du noeud courant par rapport à un autre noeud dans tout autre document.</p>
-
-<p>La valeur retournée est un masque de bits avec les valeurs suivantes :</p>
-
-<table>
- <thead>
-  <tr>
-   <th scope="col">Nom</th>
-   <th scope="col">Valeur</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>DOCUMENT_POSITION_DISCONNECTED</code></td>
-   <td>1</td>
-  </tr>
-  <tr>
-   <td><code>DOCUMENT_POSITION_PRECEDING</code></td>
-   <td>2</td>
-  </tr>
-  <tr>
-   <td><code>DOCUMENT_POSITION_FOLLOWING</code></td>
-   <td>4</td>
-  </tr>
-  <tr>
-   <td><code>DOCUMENT_POSITION_CONTAINS</code></td>
-   <td>8</td>
-  </tr>
-  <tr>
-   <td><code>DOCUMENT_POSITION_CONTAINED_BY</code></td>
-   <td>16</td>
-  </tr>
-  <tr>
-   <td><code>DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC</code></td>
-   <td>32</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Syntax">Syntaxe</h2>
-
-<pre class="syntaxbox"><em>node</em>.compareDocumentPosition( <em>otherNode</em> )
-</pre>
-
-<h2 id="Example">Exemple</h2>
-
-<pre class="brush:js">var head = document.getElementsByTagName('head').item(0);
-
-if (head.compareDocumentPosition(document.body) &amp; Node.DOCUMENT_POSITION_FOLLOWING) {
+{{APIRef("DOM")}}
+
+La méthode **`Node.compareDocumentPosition()`**compare la position du noeud courant par rapport à un autre noeud dans tout autre document.
+
+La valeur retournée est un masque de bits avec les valeurs suivantes :
+
+| Nom                                         | Valeur |
+| ------------------------------------------- | ------ |
+| `DOCUMENT_POSITION_DISCONNECTED`            | 1      |
+| `DOCUMENT_POSITION_PRECEDING`               | 2      |
+| `DOCUMENT_POSITION_FOLLOWING`               | 4      |
+| `DOCUMENT_POSITION_CONTAINS`                | 8      |
+| `DOCUMENT_POSITION_CONTAINED_BY`            | 16     |
+| `DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC` | 32     |
+
+## Syntaxe
+
+    node.compareDocumentPosition( otherNode )
+
+## Exemple
+
+```js
+var head = document.getElementsByTagName('head').item(0);
+
+if (head.compareDocumentPosition(document.body) & Node.DOCUMENT_POSITION_FOLLOWING) {
   console.log("well-formed document");
 } else {
-  console.log("&lt;head&gt; is not before &lt;body&gt;");
+  console.log("<head> is not before <body>");
 }
-</pre>
-
-<div class="note">
-<p><strong>Note :</strong> Parce que le résultat renvoyé par<em> </em><code>compareDocumentPosition</code> est un masque de bits, des <a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_binaires">opérateurs binaires</a> doivent être utilisés pour des résultats significatifs.</p>
-</div>
-
-<div class="note">
-<p><strong>Note :</strong> La première instruction utilise l' <code>item(0)</code> de la méthode <a href="/en-US/docs/Web/API/NodeList/item">NodeList</a> , qui est l'équivalent de <code>getElementsByTagName('head')[0].</code></p>
-</div>
-
-<h2 id="Specification">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG','#dom-node-comparedocumentposition','Node.compareDocumentPosition()')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM3 Core','core.html#Node3-compareDocumentPosition','Node.compareDocumentPosition()')}}</td>
-   <td>{{Spec2('DOM3 Core')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Node.compareDocumentPosition")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><code><a href="/fr/docs/Web/API/Node/contains">Node.contains</a></code></li>
-</ul>
+```
+
+> **Note :** Parce que le résultat renvoyé par\* \*`compareDocumentPosition` est un masque de bits, des [opérateurs binaires](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_binaires) doivent être utilisés pour des résultats significatifs.
+
+> **Note :** La première instruction utilise l' `item(0)` de la méthode [NodeList](/en-US/docs/Web/API/NodeList/item) , qui est l'équivalent de `getElementsByTagName('head')[0].`
+
+## Spécifications
+
+| Spécification                                                                                                                        | Statut                           | Commentaire         |
+| ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------- |
+| {{SpecName('DOM WHATWG','#dom-node-comparedocumentposition','Node.compareDocumentPosition()')}}     | {{Spec2('DOM WHATWG')}} |                     |
+| {{SpecName('DOM3 Core','core.html#Node3-compareDocumentPosition','Node.compareDocumentPosition()')}} | {{Spec2('DOM3 Core')}}     | Définition initiale |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Node.compareDocumentPosition")}}
+
+## Voir aussi
+
+- [`Node.contains`](/fr/docs/Web/API/Node/contains)
diff --git a/files/fr/web/api/node/contains/index.md b/files/fr/web/api/node/contains/index.md
index e5906fbf28..ae386427c2 100644
--- a/files/fr/web/api/node/contains/index.md
+++ b/files/fr/web/api/node/contains/index.md
@@ -9,49 +9,33 @@ tags:
   - Noeuds
 translation_of: Web/API/Node/contains
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}La méthode **`Node.contains()`** renvoie une valeur {{jsxref("Boolean")}} (_booléenne_) indiquant si un nœud est un descendant d'un nœud donné, c'est-à-dire le nœud lui-même, l'un de ses enfants directs ({{domxref("Node.childNodes", "childNodes")}}), l'un des enfants directs des enfants, et ainsi de suite.
 
-<div>La méthode <strong><code>Node.contains()</code></strong> renvoie une valeur {{jsxref("Boolean")}} (<em>booléenne</em>) indiquant si un nœud est un descendant d'un nœud donné, c'est-à-dire le nœud lui-même, l'un de ses enfants directs ({{domxref("Node.childNodes", "childNodes")}}), l'un des enfants directs des enfants, et ainsi de suite.</div>
+## Syntaxe
 
-<h2 id="Syntaxe">Syntaxe</h2>
+    node.contains( otherNode )
 
-<pre class="syntaxbox">node.contains( otherNode )
-</pre>
+## Exemple
 
-<h2 id="Example">Exemple</h2>
+Cette fonction vérifie si un élément est dans le corps de la page. Comme `contains` est inclusif, déterminer si le corps est contenu en lui-même n'est pas le but de `isInPage,` donc ce cas renvoie `false`.
 
-<p>Cette fonction vérifie si un élément est dans le corps de la page. Comme <code>contains</code> est inclusif, déterminer si le corps est contenu en lui-même n'est pas le but de <code>isInPage,</code> donc ce cas renvoie <code>false</code>.</p>
-
-<pre class="brush:js">function isInPage(node) {
+```js
+function isInPage(node) {
   return (node === document.body) ? false : document.body.contains(node);
-}</pre>
-
-<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("DOM WHATWG", "#dom-node-contains", "Node.contains()")}}</td>
-   <td>{{Spec2("DOM WHATWG")}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Node.contains")}}</p>
-
-<h2 id="See_also">Voir aussi</h2>
-
-<ul>
-  <li>{{domxref("Node.compareDocumentPosition")}}</li>
-  <li>{{domxref("Node.hasChildNodes")}}</li>
-</ul>
+}
+```
+
+## Spécifications
+
+| Spécification                                                                            | Statut                           | Commentaire         |
+| ---------------------------------------------------------------------------------------- | -------------------------------- | ------------------- |
+| {{SpecName("DOM WHATWG", "#dom-node-contains", "Node.contains()")}} | {{Spec2("DOM WHATWG")}} | Définition initiale |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Node.contains")}}
+
+## Voir aussi
+
+- {{domxref("Node.compareDocumentPosition")}}
+- {{domxref("Node.hasChildNodes")}}
diff --git a/files/fr/web/api/node/firstchild/index.md b/files/fr/web/api/node/firstchild/index.md
index 03550acf9f..02a1edd488 100644
--- a/files/fr/web/api/node/firstchild/index.md
+++ b/files/fr/web/api/node/firstchild/index.md
@@ -9,80 +9,57 @@ tags:
   - Propriété
 translation_of: Web/API/Node/firstChild
 ---
-<p>{{APIRef("DOM")}}</p>
+{{APIRef("DOM")}}
 
-<p>La propriété en lecture seule <strong><code>Node.firstChild</code> r</strong>envoie le premier nœud enfant de l'arbre ou <code>null</code> s'il n'en a pas. Si le noeud est un <code>Document</code> , il renvoie le premier noeud de la liste de ses enfants directs.</p>
+La propriété en lecture seule **`Node.firstChild` r**envoie le premier nœud enfant de l'arbre ou `null` s'il n'en a pas. Si le noeud est un `Document` , il renvoie le premier noeud de la liste de ses enfants directs.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var <var>childNode</var> = <var>node</var>.firstChild;</pre>
+    var childNode = node.firstChild;
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Cet exemple montre l'utilisation de <code>firstChild</code> et la manière dont les nœuds d'espaces peuvent interférer.</p>
+Cet exemple montre l'utilisation de `firstChild` et la manière dont les nœuds d'espaces peuvent interférer.
 
-<pre class="brush: html">&lt;p id="para-01"&gt;
-  &lt;span&gt;Premier span&lt;/span&gt;
-&lt;/p&gt;
+```html
+<p id="para-01">
+  <span>Premier span</span>
+</p>
 
-&lt;script type="text/javascript"&gt;
+<script type="text/javascript">
   var p01 = document.getElementById('para-01');
   alert(p01.firstChild.nodeName)
-&lt;/script&gt;
-</pre>
+</script>
+```
 
-<p>Dans le code ci-dessus, la <a href="/fr/docs/Web/API/Console">console</a> affichera « #text » car un nœud texte a été inséré pour préserver les blancs entre la fin des balises ouvrantes &lt;p&gt; et &lt;span&gt;. <strong>Tout</strong> <a href="/fr/docs/Gestion_des_espaces_dans_le_DOM">espace</a> provoquera l'insertion d'un nœud <code>#text</code> , qu'il s'agisse d'un simple espace ou de plusieurs, de retours à la ligne, tabulations, etc.</p>
+Dans le code ci-dessus, la [console](/fr/docs/Web/API/Console) affichera « #text » car un nœud texte a été inséré pour préserver les blancs entre la fin des balises ouvrantes \<p> et \<span>. **Tout** [espace](/fr/docs/Gestion_des_espaces_dans_le_DOM) provoquera l'insertion d'un nœud `#text` , qu'il s'agisse d'un simple espace ou de plusieurs, de retours à la ligne, tabulations, etc.
 
-<p>Un autre nœud <code>#text</code> est inséré entre les balises de fermeture &lt;/span&gt; et &lt;/p&gt;.</p>
+Un autre nœud `#text` est inséré entre les balises de fermeture \</span> et \</p>.
 
-<p>Si ces espaces sont retirés du code source, les nœuds <code>#text</code> n'apparaîtront plus et l'élément span deviendra le premier enfant du paragraphe.</p>
+Si ces espaces sont retirés du code source, les nœuds `#text` n'apparaîtront plus et l'élément span deviendra le premier enfant du paragraphe.
 
-<pre class="brush: html">&lt;p id="para-01"&gt;&lt;span&gt;Premier span&lt;/span&gt;&lt;/p&gt;
+```html
+<p id="para-01"><span>Premier span</span></p>
 
-&lt;script type="text/javascript"&gt;
+<script type="text/javascript">
   var p01 = document.getElementById('para-01');
   alert(p01.firstChild.nodeName)
-&lt;/script&gt;
-</pre>
-
-<p>À présent, l'alerte affichera « SPAN ».</p>
-
-<p>Pour éviter le problème avec <code>node.firstChild</code>  renvoyant des noeuds <code>#text</code> ou <code>#comment</code>,  {{domxref("ParentNode.firstElementChild")}}  peut être utilisé pour renvoyer seulement le premier noeud élément. Toutefois,  <code>node.firstElementChild</code> nécessite un "shim" pour Internet Explorer 9 et antérieurs.</p>
-
-<h2 id="Spécification">Spécification</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('DOM WHATWG', '#dom-node-firstchild', 'Node.firstChild')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Pas de changement</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM3 Core', 'core.html#ID-169727388', 'Node.firstChild')}}</td>
-   <td>{{Spec2('DOM3 Core')}}</td>
-   <td>Pas de changement</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Core', 'core.html#ID-169727388', 'Node.firstChild')}}</td>
-   <td>{{Spec2('DOM2 Core')}}</td>
-   <td>Pas de changement</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM1', 'level-one-core.html#ID-169727388', 'Node.firstChild')}}</td>
-   <td>{{Spec2('DOM1')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Node.firstChild")}}</p>
\ No newline at end of file
+</script>
+```
+
+À présent, l'alerte affichera « SPAN ».
+
+Pour éviter le problème avec `node.firstChild`  renvoyant des noeuds `#text` ou `#comment`,  {{domxref("ParentNode.firstElementChild")}}  peut être utilisé pour renvoyer seulement le premier noeud élément. Toutefois,  `node.firstElementChild` nécessite un "shim" pour Internet Explorer 9 et antérieurs.
+
+## Spécification
+
+| Spécification                                                                                        | Statut                           | Commentaire         |
+| ---------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- |
+| {{SpecName('DOM WHATWG', '#dom-node-firstchild', 'Node.firstChild')}}         | {{Spec2('DOM WHATWG')}} | Pas de changement   |
+| {{SpecName('DOM3 Core', 'core.html#ID-169727388', 'Node.firstChild')}}         | {{Spec2('DOM3 Core')}}     | Pas de changement   |
+| {{SpecName('DOM2 Core', 'core.html#ID-169727388', 'Node.firstChild')}}         | {{Spec2('DOM2 Core')}}     | Pas de changement   |
+| {{SpecName('DOM1', 'level-one-core.html#ID-169727388', 'Node.firstChild')}} | {{Spec2('DOM1')}}         | Définition initiale |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Node.firstChild")}}
diff --git a/files/fr/web/api/node/getrootnode/index.md b/files/fr/web/api/node/getrootnode/index.md
index 5a6297d55b..9170ad233a 100644
--- a/files/fr/web/api/node/getrootnode/index.md
+++ b/files/fr/web/api/node/getrootnode/index.md
@@ -9,43 +9,43 @@ tags:
   - Racine
 translation_of: Web/API/Node/getRootNode
 ---
-<p>{{APIRef("DOM")}}</p>
+{{APIRef("DOM")}}
 
-<p>La méthode <strong><code>getRootNode()</code></strong> de l'interface {{domxref("Node")}} renvoie le contexte de la racine de l'objet, qui peut optionnellement inclure la racine "shadow" si elle est disponible.</p>
+La méthode **`getRootNode()`** de l'interface {{domxref("Node")}} renvoie le contexte de la racine de l'objet, qui peut optionnellement inclure la racine "shadow" si elle est disponible.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var root = node.getRootNode(options)</pre>
+    var root = node.getRootNode(options)
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt>options {{optional_inline}}</dt>
- <dd>Un objet qui définit les options pour obtenir le noeud racine. Les options disponibles sont :
- <ul>
-  <li><code>composed</code> : un {{jsxref('Boolean')}} (<em>booléen</em>) qui indique si la racine shadow doit être retournée (<code>false</code> (<em>faux</em>) par défaut) ou un noeud racine au-delà de la racine shadow (<code>true</code>).</li>
- </ul>
- </dd>
-</dl>
+- options {{optional_inline}}
 
-<h3 id="Retourne">Retourne</h3>
+  - : Un objet qui définit les options pour obtenir le noeud racine. Les options disponibles sont :
 
-<p>Une interface {{domxref('Node')}}.</p>
+    - `composed` : un {{jsxref('Boolean')}} (_booléen_) qui indique si la racine shadow doit être retournée (`false` (_faux_) par défaut) ou un noeud racine au-delà de la racine shadow (`true`).
 
-<h2 id="Exemple">Exemple</h2>
+### Retourne
 
-<p>Le premier exemple retourne une référence au noeud HTML/document lorsqu'il est exécuté dans les navigateurs de support :</p>
+Une interface {{domxref('Node')}}.
 
-<pre class="brush: js">rootNode = node.getRootNode();</pre>
+## Exemple
 
-<p>Cet exemple plus complexe montre la différence entre retourner une racine normale et une racine qui inclut la racine shadow (voir le <a href="https://github.com/jserz/js_piece/blob/master/DOM/Node/getRootNode()/demo/getRootNode.html">code source complet</a>):</p>
+Le premier exemple retourne une référence au noeud HTML/document lorsqu'il est exécuté dans les navigateurs de support :
 
-<pre class="brush: html">&lt;!-- source: https://github.com/jserz/js_piece/blob/master/DOM/Node/getRootNode()/demo/getRootNode.html --&gt;
-&lt;div class="js-parent"&gt;
-    &lt;div class="js-child"&gt;&lt;/div&gt;
-&lt;/div&gt;
-&lt;div class="js-shadowHost"&gt;&lt;/div&gt;
-&lt;script&gt;
+```js
+rootNode = node.getRootNode();
+```
+
+Cet exemple plus complexe montre la différence entre retourner une racine normale et une racine qui inclut la racine shadow (voir le [code source complet](<https://github.com/jserz/js_piece/blob/master/DOM/Node/getRootNode()/demo/getRootNode.html>)):
+
+```html
+<!-- source: https://github.com/jserz/js_piece/blob/master/DOM/Node/getRootNode()/demo/getRootNode.html -->
+<div class="js-parent">
+    <div class="js-child"></div>
+</div>
+<div class="js-shadowHost"></div>
+<script>
     // work on Chrome 54+，Opera41+
 
     var parent = document.querySelector('.js-parent'),
@@ -57,33 +57,23 @@ translation_of: Web/API/Node/getRootNode
 
     // create a ShadowRoot
     var shadowRoot = shadowHost.attachShadow({mode:'open'});
-    shadowRoot.innerHTML = '&lt;style&gt;div{background:#2bb8aa;}&lt;/style&gt;'
-        + '&lt;div class="js-shadowChild"&gt;content&lt;/div&gt;';
+    shadowRoot.innerHTML = '<style>div{background:#2bb8aa;}</style>'
+        + '<div class="js-shadowChild">content</div>';
     var shadowChild = shadowRoot.querySelector('.js-shadowChild');
 
     // The default value of composed is false
     console.log(shadowChild.getRootNode() === shadowRoot); // true
     console.log(shadowChild.getRootNode({composed:false}) === shadowRoot); // true
     console.log(shadowChild.getRootNode({composed:true}).nodeName); // #document
-&lt;/script&gt;</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG','#dom-node-getrootnode','getRootNode()')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Node.getRootNode")}}</p>
\ No newline at end of file
+</script>
+```
+
+## Spécifications
+
+| Spécification                                                                            | Statut                           | Commentaire          |
+| ---------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName('DOM WHATWG','#dom-node-getrootnode','getRootNode()')}} | {{Spec2('DOM WHATWG')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Node.getRootNode")}}
diff --git a/files/fr/web/api/node/haschildnodes/index.md b/files/fr/web/api/node/haschildnodes/index.md
index c14ad9836f..54fd502016 100644
--- a/files/fr/web/api/node/haschildnodes/index.md
+++ b/files/fr/web/api/node/haschildnodes/index.md
@@ -10,69 +10,57 @@ tags:
   - Reference
 translation_of: Web/API/Node/hasChildNodes
 ---
-<p>{{APIRef("DOM")}}</p>
+{{APIRef("DOM")}}
 
-<p>La méthode <code><strong>Node.hasChildNodes()</strong></code> renvoie un {{jsxref("Boolean")}} indiquant si le {{domxref("Node","noeud")}} actuel possède des <a href="/fr/docs/Web/API/Node/childNodes">nœuds enfants</a> ou non.</p>
+La méthode **`Node.hasChildNodes()`** renvoie un {{jsxref("Boolean")}} indiquant si le {{domxref("Node","noeud")}} actuel possède des [nœuds enfants](/fr/docs/Web/API/Node/childNodes) ou non.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js"><var>bool</var> = <var>node</var>.hasChildNodes();</pre>
+```js
+bool = node.hasChildNodes();
+```
 
-<h3 id="Return_value">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Un {{jsxref("Boolean")}} qui est <code>true</code> si le nœud a des nœuds enfants, et <code>false</code> dans le cas contraire.</p>
+Un {{jsxref("Boolean")}} qui est `true` si le nœud a des nœuds enfants, et `false` dans le cas contraire.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush:js">let foo = document.getElementById('foo');
+```js
+let foo = document.getElementById('foo');
 
 if (foo.hasChildNodes()) {
   // Faire quelque chose avec 'foo.childNodes'
-}</pre>
+}
+```
 
-<h2 id="Polyfill">Prothèse d'émulation</h2>
+## Prothèse d'émulation
 
-<pre class="brush:js">(function(prototype) {
+```js
+(function(prototype) {
   prototype.hasChildNodes = prototype.hasChildNodes || function() {
     return !!this.firstChild;
   }
-})(Node.prototype);</pre>
-
-<p>Il y a différentes façons de déterminer si le noeud a un noeud enfant :</p>
-
-<ul>
-  <li><code>node.hasChildNodes()</code></li>
-  <li><code>node.firstChild != null</code> (ou simplement <code>node.firstChild</code>)</li>
-  <li><code>node.childNodes &amp;&amp; node.childNodes.length</code> (ou <code>node.childNodes.length &gt; 0</code>)</li>
-</ul>
-
-<h2 id="Specifications">Spécification</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("DOM WHATWG", "#dom-node-haschildnodes", "Node: hasChildNodes")}}
-      </td>
-      <td>{{Spec2("DOM WHATWG")}}</td>
-      <td></td>
-    </tr>
-  </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Node.hasChildNodes")}}</p>
-
-<h2 id="See_also">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("Node.childNodes")}}</li>
- <li>{{domxref("Node.hasAttributes")}}</li>
-</ul>
+})(Node.prototype);
+```
+
+Il y a différentes façons de déterminer si le noeud a un noeud enfant :
+
+- `node.hasChildNodes()`
+- `node.firstChild != null` (ou simplement `node.firstChild`)
+- `node.childNodes && node.childNodes.length` (ou `node.childNodes.length > 0`)
+
+## Spécification
+
+| Spécification                                                                                        | Statut                           | Commentaire |
+| ---------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- |
+| {{SpecName("DOM WHATWG", "#dom-node-haschildnodes", "Node: hasChildNodes")}} | {{Spec2("DOM WHATWG")}} |             |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Node.hasChildNodes")}}
+
+## Voir aussi
+
+- {{domxref("Node.childNodes")}}
+- {{domxref("Node.hasAttributes")}}
diff --git a/files/fr/web/api/node/index.md b/files/fr/web/api/node/index.md
index 4c7ddde36b..624d732fe0 100644
--- a/files/fr/web/api/node/index.md
+++ b/files/fr/web/api/node/index.md
@@ -13,294 +13,208 @@ tags:
   - hierarchy
 translation_of: Web/API/Node
 ---
-<p>{{ApiRef("DOM")}}</p>
-
-<p><code><strong>Node</strong></code> (<em>nœud)</em> est une classe abstraite de laquelle de nombreux objets de type DOM API héritent, leur permettant d'être traités de manière similaire et souvent interchangeable. Étant une classe abstraire, il n'existe pas d'objet qui soit directement un <code>Node</code>. Tous les objets implantant les fonctionnalités de <code>Node</code> sont des instances d'une de ses sous-classes, dont les plus notables sont {{domxref("Document")}}, {{domxref("Element")}} et {{domxref("DocumentFragment")}}.</p>
-
-<p>De pls, tous les types de nœuds du DOM sont représentés par une classe héritant des propriétés et méthodes de <code>Node</code> : {{domxref("CharacterData")}} (duquel {{domxref("Text")}}, {{domxref("Comment")}} et {{domxref("CDATASection")}} héritent), {{domxref("ProcessingInstruction")}}, , {{domxref("DocumentType")}}, {{domxref("Notation")}}, {{domxref("Entity")}} et {{domxref("EntityReference")}}.</p>
-
-<p>Les propriétés ou méthodes de ces interfaces peuvent retourner <code>null</code> lorsque leur existence n'est pas pertinente. Elles peuvent aussi générer une exception – par exemple lors de l'ajout d'un enfant à un type de nœud pour lequel aucun enfant ne peut exister.</p>
-
-<p>{{InheritanceDiagram}}</p>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<p><em>Hérite les propriétés de son parent {{domxref("EventTarget")}}</em>.</p>
-
-<dl>
- <dt>{{DOMxRef("Node.baseURI")}} {{readonlyInline}}</dt>
- <dd>Retourne une {{domxref("DOMString")}} (<em>chaine de caractères</em>) représentant l'URL de base du document contenant le <code>Node</code>. En HTML, il correspond au protocole, au nom de domaine et à la structure du répertoire, jusqu'au dernier <code>/</code>.</dd>
- <dt>{{DOMxRef("Node.baseURIObject")}} {{Non-standard_inline()}}</dt>
- <dd>(Non disponible pour le contenu Web). L'objet en lecture seule  {{Interface ("nsIURI")}} représentant l'URI de base pour l'élément.</dd>
- <dt>{{DOMxRef("Node.childNodes")}} {{readonlyInline}}</dt>
- <dd>Renvoie un {{domxref ("NodeList")}} contenant tous les enfants de ce nœud. {{domxref ("NodeList")}} signifie que si les enfants du <code>Node</code> changent, l'objet {{domxref ("NodeList")}} est automatiquement mis à jour.</dd>
- <dt>{{DOMxRef("Node.firstChild")}} {{readonlyInline}}</dt>
- <dd>Renvoie un {{domxref ("Node")}} représentant le premier nœud enfant direct de ce nœud ou <code>null</code> s'il n'a pas d'enfant.</dd>
- <dt>{{DOMxRef("Node.lastChild")}} {{readonlyInline}}</dt>
- <dd>Retourne un {{domxref("Node")}} représentant le dernier nœud enfant direct de ce nœud ou <code>null</code> s'il n'a pas d'enfant.</dd>
- <dt>{{DOMxRef("Node.nextSibling")}} {{readonlyInline}}</dt>
- <dd>Retourne un {{domxref("Node")}} représentant le nœud suivant dans l'arbre ou <code>null</code> s'il n'y en a pas.</dd>
- <dt>{{DOMxRef("Node.nodeName")}} {{readonlyInline}}</dt>
- <dd>Retourne une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) contenant le nom du nœud. La structure du nom diffère du type de nœud. Par exemple, un {{domxref("HTMLElement")}} contiendra le nom de la balise correspondante, comme <code>'audio'</code>  pour un {{domxref("HTMLAudioElement")}}, un nœud {{domxref("Text")}} doit avoir la chaîne <code>'#text'</code> ou un  {{domxref("Document")}}  doit avoir la chaîne <code>'#document'.</code>.</dd>
- <dt>{{DOMxRef("Node.nodeType")}}{{readonlyInline}}</dt>
- <dd>Retourne un <code>unsigned short</code> (<em>non signé court</em>) représentant le type du nœud. Les valeurs possibles sont :</dd>
-</dl>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Nom</th>
-   <th scope="col">Valeur</th>
-  </tr>
-  <tr>
-   <td><code>ELEMENT_NODE</code></td>
-   <td><code>1</code></td>
-  </tr>
-  <tr>
-   <td><code>ATTRIBUTE_NODE</code> {{deprecated_inline()}}</td>
-   <td><code>2</code></td>
-  </tr>
-  <tr>
-   <td><code>TEXT_NODE</code></td>
-   <td><code>3</code></td>
-  </tr>
-  <tr>
-   <td><code>CDATA_SECTION_NODE</code> {{deprecated_inline()}}</td>
-   <td><code>4</code></td>
-  </tr>
-  <tr>
-   <td><code>ENTITY_REFERENCE_NODE</code> {{deprecated_inline()}}</td>
-   <td><code>5</code></td>
-  </tr>
-  <tr>
-   <td><code>ENTITY_NODE</code> {{deprecated_inline()}}</td>
-   <td><code>6</code></td>
-  </tr>
-  <tr>
-   <td><code>PROCESSING_INSTRUCTION_NODE</code></td>
-   <td><code>7</code></td>
-  </tr>
-  <tr>
-   <td><code>COMMENT_NODE</code></td>
-   <td><code>8</code></td>
-  </tr>
-  <tr>
-   <td><code>DOCUMENT_NODE</code></td>
-   <td><code>9</code></td>
-  </tr>
-  <tr>
-   <td><code>DOCUMENT_TYPE_NODE</code></td>
-   <td><code>10</code></td>
-  </tr>
-  <tr>
-   <td><code>DOCUMENT_FRAGMENT_NODE</code></td>
-   <td><code>11</code></td>
-  </tr>
-  <tr>
-   <td><code>NOTATION_NODE</code> {{deprecated_inline()}}</td>
-   <td><code>12</code></td>
-  </tr>
- </tbody>
-</table>
-
-<dl>
- <dt>{{DOMxRef("Node.nodeValue")}}</dt>
- <dd>Retourne / définit la valeur du nœud courant.</dd>
- <dt>{{DOMxRef("Node.ownerDocument")}}{{readonlyInline}}</dt>
- <dd>Retourne le {{domxref("Document")}}  auquel ce noeud appartient. Si aucun document ne lui est associé, il retourne <code>null</code> .</dd>
- <dt>{{DOMxRef("Node.parentNode")}}{{readonlyInline}}</dt>
- <dd>Retourne un {{domxref("Node")}} qui est le parent de ce nœud. S'il n'existe pas, parce qu'il est en haut de l'arbre ou parce qu'il ne participe pas à un arbre, cette propriété retourne <code>null</code> .</dd>
- <dt>{{DOMxRef("Node.parentElement")}}{{readonlyInline}}</dt>
- <dd>Retourne un {{domxref("Element")}} qui est le parent de ce nœud. Si le nœud n'a aucun parent ou si ce parent n'est pas un  {{domxref("Element")}} , cette propriété retourne <code>null</code>.</dd>
- <dt>{{DOMxRef("Node.previousSibling")}}{{readonlyInline}}</dt>
- <dd>Retourne un {{domxref("Node")}} représentant le nœud précédent dans l'arbre ou  <code>null</code> s'il n'y en a pas.</dd>
- <dt>{{DOMxRef("Node.textContent")}}</dt>
- <dd>Retourne / définit le contenu textuel d'un élément et de tous ses descendants.</dd>
-</dl>
-
-<dl>
-</dl>
-
-<h3 id="Propriétés_obsolètes">Propriétés obsolètes</h3>
-
-<dl>
- <dt>{{DOMxRef("Node.localName")}} {{obsolete_inline}}{{readonlyInline}}</dt>
- <dd>Retourne un {{domxref("DOMString")}}  représentant la partie locale du nom d'un élément.</dd>
-</dl>
-
-<div class="note">
-<p><strong>Note :</strong> Dans Firefox 3.5 et versions antérieures, la propriété saisit le nom local pour les éléments HTML (mais pas les éléments XHTML). Dans les versions ultérieures, cela ne se produit pas, donc la propriété est en minuscule pour HTML et XHTML. {{gecko_minversion_inline("1.9.2")}}</p>
-</div>
-
-<dl>
- <dt>{{DOMxRef("Node.namespaceURI")}} {{obsolete_inline}}{{readonlyInline}}</dt>
- <dd>L'URI du "Namespace" de ce nom, ou  <code>null</code> s'il n'y en a pas.</dd>
-</dl>
-
-<div class="note">
-<p><strong>Note :</strong> Dans Firefox 3.5 et versions antérieures, les éléments HTML ne contiennent aucun "namespace". Dans les versions ultérieures, les éléments HTML sont dans le "namespace" <code><a href="https://www.w3.org/1999/xhtml/">https://www.w3.org/1999/xhtml/</a></code>  pour HTML et XML.  {{gecko_minversion_inline("1.9.2")}}</p>
-</div>
-
-<dl>
- <dt>{{DOMxRef("Node.prefix")}} {{obsolete_inline}}{{readonlyInline}}</dt>
- <dd>Est une {{domxref("DOMString")}} représentant le préfixe de l'espace de nom du nœud ou <code>null</code>  si aucun préfixe n'est spécifié.</dd>
- <dt>{{DOMxRef("Node.nodePrincipal")}} {{Non-standard_inline}}{{Obsolete_Inline("gecko46")}}</dt>
- <dd>Un {{Interface("nsIPrincipal")}} représentant le nœud principal.</dd>
- <dt>{{DOMxRef("Node.rootNode")}} {{Obsolete_Inline}}{{ReadOnlyInline}}</dt>
- <dd>Retourne un objet {{DOMxRef("Node")}} représentant le noeud le plus haut dans l'arbre ou le noeud en cours s'il est le noeud le plus haut de l'arbre. Cette propriété a été remplacée par {{DOMxRef("Node.getRootNode()")}}.</dd>
-</dl>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<p><em>Hérite des méthodes de son parent {{domxref("EventTarget")}}</em>.</p>
-
-<dl>
- <dt>{{DOMxRef("Node.appendChild()", "Node.appendChild(<var>childNode</var>)")}}</dt>
- <dd>Ajoute l'argument <code>childNode</code> spécifié comme dernier enfant au noeud actuel.<br>
- Si l'argument fait référence à un noeud existant sur l'arborescence DOM, le nœud sera détaché de sa position actuelle et attaché à la nouvelle position.</dd>
- <dt>{{DOMxRef("Node.cloneNode()")}}</dt>
- <dd>Clône un {{domxref("Node")}} et, éventuellement, tout son contenu. Par défaut, il duplique le contenu de ce nœud.</dd>
- <dt>{{DOMxRef("Node.compareDocumentPosition()")}}</dt>
- <dd>Compare la position du nœud courant par rapport à un autre nœud dans tout autre document.</dd>
- <dt>{{DOMxRef("Node.contains()")}}</dt>
- <dd>Retourne une valeur {{jsxref("Boolean")}} (<em>booléen</em>) indiquant si un noeud est un descendant d'un noeud donné ou non.</dd>
- <dt>{{domxref("Node.getBoxQuads()")}} {{experimental_inline}}</dt>
- <dd>Retourne une liste des boites CSS des nœuds relatifs à un autre nœud.</dd>
- <dt>{{DOMxRef("Node.getRootNode()")}}</dt>
- <dd>Retourne la racine de l'objet contextuel qui comprend éventuellement la "Shadow root" si elle est disponible.</dd>
- <dt>{{DOMxRef("Node.hasChildNodes()")}}</dt>
- <dd>Retourne un {{jsxref("Boolean")}} (<em>booléen</em>) indiquant si l'élément a des noeuds enfants ou non.</dd>
- <dt>{{DOMxRef("Node.insertBefore()")}}</dt>
- <dd>Insère un {{domxref("Node")}} avant le nœud de référence en tant qu'enfant du noeud actuel.</dd>
- <dt>{{DOMxRef("Node.isDefaultNamespace()")}}</dt>
- <dd>Accepte une URI d'espace de nom comme argument et retourne une valeur {{jsxref("Boolean")}} avec <code>true</code> (<em>vrai</em>) si l'espace de nom est celui par défaut du noeud donné ou <code>false</code> (<em>faux</em>) sinon.</dd>
- <dt>{{DOMxRef("Node.isEqualNode()")}}</dt>
- <dd>Retourne une valeur {{jsxref("Boolean")}} (<em>booléenne</em>) qui indique si oui ou non deux noeuds sont du même type et si tous leurs points de données définis correspondent.</dd>
- <dt>{{DOMxRef("Node.isSameNode()")}}</dt>
- <dd>Retourne une valeur {{jsxref("Boolean")}} (<em>booléenne</em>) indiquant si les deux noeuds sont ou non identiques (c'est-à-dire qu'ils font référence au même objet).</dd>
- <dt>{{DOMxRef("Node.lookupPrefix()")}}</dt>
- <dd>Retourne une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) contenant le préfixe d'une URI d'un espace de nom donné, s'il est présent, et <code>null</code> sinon.</dd>
- <dt>{{DOMxRef("Node.lookupNamespaceURI()")}}</dt>
- <dd>Accepte un préfixe et retourne l'URI de l'espace de noms qui lui est associé sur le nœud donné s'il le trouve, <code>null</code> sinon. Fournir <code>null</code> comme préfixe retournera l'espace de noms par défaut.</dd>
- <dt>{{DOMxRef("Node.normalize()")}}</dt>
- <dd>Nettoye tous les nœuds de texte en-dessous de cet élément (fusionne adjacent, supprime vide).</dd>
- <dt>{{DOMxRef("Node.removeChild()")}}</dt>
- <dd>Supprime un nœud enfant, depuis l'élément courant, qui doit être un enfant de ce nœud.</dd>
- <dt>{{DOMxRef("Node.replaceChild()")}}</dt>
- <dd>Remplace un {{domxref("Node")}} enfant du nœud courant par celui donné dans le paramètre.</dd>
-</dl>
-
-<h3 id="Méthodes_obsolètes">Méthodes obsolètes</h3>
-
-<dl>
- <dt>{{domxref("Node.getFeature()")}} {{obsolete_inline}}</dt>
- <dd>Permet à un utilisateur d'obtenir un objet {{DOMxRef("DOMUserData")}} à partir du nœud fourni.</dd>
- <dt>{{domxref("Node.getUserData()")}} {{obsolete_inline}}</dt>
- <dd>Permet à un utilisateur d'obtenir une {{domxref ("DOMUserData")}} (<em>donnée utilisateur</em>) à partir du nœud.</dd>
- <dt>{{domxref("Node.hasAttributes()")}} {{obsolete_inline}}</dt>
- <dd>Retourne un {{jsxref("Boolean")}} indiquant si l'élément possède des attributs ou non.</dd>
- <dt>{{domxref("Node.isSupported()")}} {{obsolete_inline}}</dt>
- <dd>Retourne une marque {{jsxref("Boolean")}} qui contient le résultat d'un test si l'implémentation DOM prend en compte une caractéristique spécifique et si cette fonctionnalité est prise en charge par le nœud spécifique.</dd>
- <dt>{{domxref("Node.setUserData()")}} {{obsolete_inline}}</dt>
- <dd>Permet à un utilisateur d'attacher ou d'enlever  {{domxref("DOMUserData")}} du nœud.</dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Parcourir_tous_les_nœuds_enfants">Parcourir tous les nœuds enfants</h3>
-
-<p>La fonction suivante parcourt de manière récursive tous les nœuds enfants d'un noeud et exécute une fonction de rappel sur eux (et sur le nœud parent lui-même).</p>
-
-<pre class="brush: js">function DOMComb (oParent, oCallback) {
+{{ApiRef("DOM")}}
+
+**`Node`** (_nœud)_ est une classe abstraite de laquelle de nombreux objets de type DOM API héritent, leur permettant d'être traités de manière similaire et souvent interchangeable. Étant une classe abstraire, il n'existe pas d'objet qui soit directement un `Node`. Tous les objets implantant les fonctionnalités de `Node` sont des instances d'une de ses sous-classes, dont les plus notables sont {{domxref("Document")}}, {{domxref("Element")}} et {{domxref("DocumentFragment")}}.
+
+De pls, tous les types de nœuds du DOM sont représentés par une classe héritant des propriétés et méthodes de `Node` : {{domxref("CharacterData")}} (duquel {{domxref("Text")}}, {{domxref("Comment")}} et {{domxref("CDATASection")}} héritent), {{domxref("ProcessingInstruction")}}, , {{domxref("DocumentType")}}, {{domxref("Notation")}}, {{domxref("Entity")}} et {{domxref("EntityReference")}}.
+
+Les propriétés ou méthodes de ces interfaces peuvent retourner `null` lorsque leur existence n'est pas pertinente. Elles peuvent aussi générer une exception – par exemple lors de l'ajout d'un enfant à un type de nœud pour lequel aucun enfant ne peut exister.
+
+{{InheritanceDiagram}}
+
+## Propriétés
+
+_Hérite les propriétés de son parent {{domxref("EventTarget")}}_.
+
+- {{DOMxRef("Node.baseURI")}} {{readonlyInline}}
+  - : Retourne une {{domxref("DOMString")}} (_chaine de caractères_) représentant l'URL de base du document contenant le `Node`. En HTML, il correspond au protocole, au nom de domaine et à la structure du répertoire, jusqu'au dernier `/`.
+- {{DOMxRef("Node.baseURIObject")}} {{Non-standard_inline()}}
+  - : (Non disponible pour le contenu Web). L'objet en lecture seule {{Interface ("nsIURI")}} représentant l'URI de base pour l'élément.
+- {{DOMxRef("Node.childNodes")}} {{readonlyInline}}
+  - : Renvoie un {{domxref ("NodeList")}} contenant tous les enfants de ce nœud. {{domxref ("NodeList")}} signifie que si les enfants du `Node` changent, l'objet {{domxref ("NodeList")}} est automatiquement mis à jour.
+- {{DOMxRef("Node.firstChild")}} {{readonlyInline}}
+  - : Renvoie un {{domxref ("Node")}} représentant le premier nœud enfant direct de ce nœud ou `null` s'il n'a pas d'enfant.
+- {{DOMxRef("Node.lastChild")}} {{readonlyInline}}
+  - : Retourne un {{domxref("Node")}} représentant le dernier nœud enfant direct de ce nœud ou `null` s'il n'a pas d'enfant.
+- {{DOMxRef("Node.nextSibling")}} {{readonlyInline}}
+  - : Retourne un {{domxref("Node")}} représentant le nœud suivant dans l'arbre ou `null` s'il n'y en a pas.
+- {{DOMxRef("Node.nodeName")}} {{readonlyInline}}
+  - : Retourne une {{domxref("DOMString")}} (_chaîne de caractères_) contenant le nom du nœud. La structure du nom diffère du type de nœud. Par exemple, un {{domxref("HTMLElement")}} contiendra le nom de la balise correspondante, comme `'audio'`  pour un {{domxref("HTMLAudioElement")}}, un nœud {{domxref("Text")}} doit avoir la chaîne `'#text'` ou un  {{domxref("Document")}}  doit avoir la chaîne `'#document'.`.
+- {{DOMxRef("Node.nodeType")}}{{readonlyInline}}
+  - : Retourne un `unsigned short` (_non signé court_) représentant le type du nœud. Les valeurs possibles sont :
+
+| Nom                                                      | Valeur |
+| -------------------------------------------------------- | ------ |
+| `ELEMENT_NODE`                                           | `1`    |
+| `ATTRIBUTE_NODE` {{deprecated_inline()}}        | `2`    |
+| `TEXT_NODE`                                              | `3`    |
+| `CDATA_SECTION_NODE` {{deprecated_inline()}}    | `4`    |
+| `ENTITY_REFERENCE_NODE` {{deprecated_inline()}} | `5`    |
+| `ENTITY_NODE` {{deprecated_inline()}}           | `6`    |
+| `PROCESSING_INSTRUCTION_NODE`                            | `7`    |
+| `COMMENT_NODE`                                           | `8`    |
+| `DOCUMENT_NODE`                                          | `9`    |
+| `DOCUMENT_TYPE_NODE`                                     | `10`   |
+| `DOCUMENT_FRAGMENT_NODE`                                 | `11`   |
+| `NOTATION_NODE` {{deprecated_inline()}}         | `12`   |
+
+- {{DOMxRef("Node.nodeValue")}}
+  - : Retourne / définit la valeur du nœud courant.
+- {{DOMxRef("Node.ownerDocument")}}{{readonlyInline}}
+  - : Retourne le {{domxref("Document")}}  auquel ce noeud appartient. Si aucun document ne lui est associé, il retourne `null` .
+- {{DOMxRef("Node.parentNode")}}{{readonlyInline}}
+  - : Retourne un {{domxref("Node")}} qui est le parent de ce nœud. S'il n'existe pas, parce qu'il est en haut de l'arbre ou parce qu'il ne participe pas à un arbre, cette propriété retourne `null` .
+- {{DOMxRef("Node.parentElement")}}{{readonlyInline}}
+  - : Retourne un {{domxref("Element")}} qui est le parent de ce nœud. Si le nœud n'a aucun parent ou si ce parent n'est pas un  {{domxref("Element")}} , cette propriété retourne `null`.
+- {{DOMxRef("Node.previousSibling")}}{{readonlyInline}}
+  - : Retourne un {{domxref("Node")}} représentant le nœud précédent dans l'arbre ou  `null` s'il n'y en a pas.
+- {{DOMxRef("Node.textContent")}}
+  - : Retourne / définit le contenu textuel d'un élément et de tous ses descendants.
+
+<!---->
+
+### Propriétés obsolètes
+
+- {{DOMxRef("Node.localName")}} {{obsolete_inline}}{{readonlyInline}}
+  - : Retourne un {{domxref("DOMString")}}  représentant la partie locale du nom d'un élément.
+
+> **Note :** Dans Firefox 3.5 et versions antérieures, la propriété saisit le nom local pour les éléments HTML (mais pas les éléments XHTML). Dans les versions ultérieures, cela ne se produit pas, donc la propriété est en minuscule pour HTML et XHTML. {{gecko_minversion_inline("1.9.2")}}
+
+- {{DOMxRef("Node.namespaceURI")}} {{obsolete_inline}}{{readonlyInline}}
+  - : L'URI du "Namespace" de ce nom, ou  `null` s'il n'y en a pas.
+
+> **Note :** Dans Firefox 3.5 et versions antérieures, les éléments HTML ne contiennent aucun "namespace". Dans les versions ultérieures, les éléments HTML sont dans le "namespace" [`https://www.w3.org/1999/xhtml/`](https://www.w3.org/1999/xhtml/)  pour HTML et XML.  {{gecko_minversion_inline("1.9.2")}}
+
+- {{DOMxRef("Node.prefix")}} {{obsolete_inline}}{{readonlyInline}}
+  - : Est une {{domxref("DOMString")}} représentant le préfixe de l'espace de nom du nœud ou `null`  si aucun préfixe n'est spécifié.
+- {{DOMxRef("Node.nodePrincipal")}} {{Non-standard_inline}}{{Obsolete_Inline("gecko46")}}
+  - : Un {{Interface("nsIPrincipal")}} représentant le nœud principal.
+- {{DOMxRef("Node.rootNode")}} {{Obsolete_Inline}}{{ReadOnlyInline}}
+  - : Retourne un objet {{DOMxRef("Node")}} représentant le noeud le plus haut dans l'arbre ou le noeud en cours s'il est le noeud le plus haut de l'arbre. Cette propriété a été remplacée par {{DOMxRef("Node.getRootNode()")}}.
+
+## Méthodes
+
+_Hérite des méthodes de son parent {{domxref("EventTarget")}}_.
+
+- {{DOMxRef("Node.appendChild()", "Node.appendChild(<var>childNode</var>)")}}
+  - : Ajoute l'argument `childNode` spécifié comme dernier enfant au noeud actuel.
+    Si l'argument fait référence à un noeud existant sur l'arborescence DOM, le nœud sera détaché de sa position actuelle et attaché à la nouvelle position.
+- {{DOMxRef("Node.cloneNode()")}}
+  - : Clône un {{domxref("Node")}} et, éventuellement, tout son contenu. Par défaut, il duplique le contenu de ce nœud.
+- {{DOMxRef("Node.compareDocumentPosition()")}}
+  - : Compare la position du nœud courant par rapport à un autre nœud dans tout autre document.
+- {{DOMxRef("Node.contains()")}}
+  - : Retourne une valeur {{jsxref("Boolean")}} (_booléen_) indiquant si un noeud est un descendant d'un noeud donné ou non.
+- {{domxref("Node.getBoxQuads()")}} {{experimental_inline}}
+  - : Retourne une liste des boites CSS des nœuds relatifs à un autre nœud.
+- {{DOMxRef("Node.getRootNode()")}}
+  - : Retourne la racine de l'objet contextuel qui comprend éventuellement la "Shadow root" si elle est disponible.
+- {{DOMxRef("Node.hasChildNodes()")}}
+  - : Retourne un {{jsxref("Boolean")}} (_booléen_) indiquant si l'élément a des noeuds enfants ou non.
+- {{DOMxRef("Node.insertBefore()")}}
+  - : Insère un {{domxref("Node")}} avant le nœud de référence en tant qu'enfant du noeud actuel.
+- {{DOMxRef("Node.isDefaultNamespace()")}}
+  - : Accepte une URI d'espace de nom comme argument et retourne une valeur {{jsxref("Boolean")}} avec `true` (_vrai_) si l'espace de nom est celui par défaut du noeud donné ou `false` (_faux_) sinon.
+- {{DOMxRef("Node.isEqualNode()")}}
+  - : Retourne une valeur {{jsxref("Boolean")}} (_booléenne_) qui indique si oui ou non deux noeuds sont du même type et si tous leurs points de données définis correspondent.
+- {{DOMxRef("Node.isSameNode()")}}
+  - : Retourne une valeur {{jsxref("Boolean")}} (_booléenne_) indiquant si les deux noeuds sont ou non identiques (c'est-à-dire qu'ils font référence au même objet).
+- {{DOMxRef("Node.lookupPrefix()")}}
+  - : Retourne une {{domxref("DOMString")}} (_chaîne de caractères_) contenant le préfixe d'une URI d'un espace de nom donné, s'il est présent, et `null` sinon.
+- {{DOMxRef("Node.lookupNamespaceURI()")}}
+  - : Accepte un préfixe et retourne l'URI de l'espace de noms qui lui est associé sur le nœud donné s'il le trouve, `null` sinon. Fournir `null` comme préfixe retournera l'espace de noms par défaut.
+- {{DOMxRef("Node.normalize()")}}
+  - : Nettoye tous les nœuds de texte en-dessous de cet élément (fusionne adjacent, supprime vide).
+- {{DOMxRef("Node.removeChild()")}}
+  - : Supprime un nœud enfant, depuis l'élément courant, qui doit être un enfant de ce nœud.
+- {{DOMxRef("Node.replaceChild()")}}
+  - : Remplace un {{domxref("Node")}} enfant du nœud courant par celui donné dans le paramètre.
+
+### Méthodes obsolètes
+
+- {{domxref("Node.getFeature()")}} {{obsolete_inline}}
+  - : Permet à un utilisateur d'obtenir un objet {{DOMxRef("DOMUserData")}} à partir du nœud fourni.
+- {{domxref("Node.getUserData()")}} {{obsolete_inline}}
+  - : Permet à un utilisateur d'obtenir une {{domxref ("DOMUserData")}} (_donnée utilisateur_) à partir du nœud.
+- {{domxref("Node.hasAttributes()")}} {{obsolete_inline}}
+  - : Retourne un {{jsxref("Boolean")}} indiquant si l'élément possède des attributs ou non.
+- {{domxref("Node.isSupported()")}} {{obsolete_inline}}
+  - : Retourne une marque {{jsxref("Boolean")}} qui contient le résultat d'un test si l'implémentation DOM prend en compte une caractéristique spécifique et si cette fonctionnalité est prise en charge par le nœud spécifique.
+- {{domxref("Node.setUserData()")}} {{obsolete_inline}}
+  - : Permet à un utilisateur d'attacher ou d'enlever  {{domxref("DOMUserData")}} du nœud.
+
+## Exemples
+
+### Parcourir tous les nœuds enfants
+
+La fonction suivante parcourt de manière récursive tous les nœuds enfants d'un noeud et exécute une fonction de rappel sur eux (et sur le nœud parent lui-même).
+
+```js
+function DOMComb (oParent, oCallback) {
   if (oParent.hasChildNodes()) {
     for (var oNode = oParent.firstChild; oNode; oNode = oNode.nextSibling) {
       DOMComb(oNode, oCallback);
     }
   }
   oCallback.call(oParent);
-}</pre>
+}
+```
 
-<h4 id="Syntaxe">Syntaxe</h4>
+#### Syntaxe
 
-<pre class="syntaxbox">DOMComb(parentNode, callbackFunction);</pre>
+    DOMComb(parentNode, callbackFunction);
 
-<h4 id="Description">Description</h4>
+#### Description
 
-<p>Suit le cycle récursif de tous les nœuds enfants d'un <code>parentNode</code> et le <code>parentNode</code> lui-même, et exécute la fonction <code>callbackFunction</code> (<em>rappel</em>) sur eux comme un objet <a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this"><code>this</code></a>.</p>
+Suit le cycle récursif de tous les nœuds enfants d'un `parentNode` et le `parentNode` lui-même, et exécute la fonction `callbackFunction` (_rappel_) sur eux comme un objet [`this`](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this).
 
-<h4 id="Paramètres">Paramètres</h4>
+#### Paramètres
 
-<dl>
- <dt><code>parentNode</code></dt>
- <dd>Le nœud parent (<code><strong>Node</strong> <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object">Object</a></code>)</dd>
- <dt><code>callbackFunction</code></dt>
- <dd>La fonction de rappel (<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function"><code>Function</code></a>).</dd>
-</dl>
+- `parentNode`
+  - : Le nœud parent (`Node Object`)
+- `callbackFunction`
+  - : La fonction de rappel ([`Function`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function)).
 
-<h4 id="Exemples_dutilisation">Exemples d'utilisation</h4>
+#### Exemples d'utilisation
 
-<p>L'exemple suivant envoie à la <code>console.log</code> le contenu texte du corps :</p>
+L'exemple suivant envoie à la `console.log` le contenu texte du corps :
 
-<pre class="brush: js">function printContent () {
+```js
+function printContent () {
   if (this.nodeValue) { console.log(this.nodeValue); }
 }
 
 onload = function () {
   DOMComb(document.body, printContent);
-};</pre>
+};
+```
 
-<h3 id="Supprimer_tous_les_enfants_imbriqués_dans_un_nœud">Supprimer tous les enfants imbriqués dans un nœud</h3>
+### Supprimer tous les enfants imbriqués dans un nœud
 
-<pre class="brush: js">Element.prototype.removeAll = function () {
+```js
+Element.prototype.removeAll = function () {
   while (this.firstChild) { this.removeChild(this.firstChild); }
   return this;
-};</pre>
-
-<h4 id="Exemple_dutilisation">Exemple d'utilisation</h4>
-
-<pre class="brush: js">/* ... an alternative to document.body.innerHTML = "" ... */
-document.body.removeAll();</pre>
-
-<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('DOM WHATWG', '#interface-node', 'Node')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Supprime les propriétés suivantes : <code>attributes</code>, <code>namespaceURI</code>, <code>prefix</code>, et <code>localName</code>.<br>
-    Supprime les méthodes suivantes : <code>isSupported()</code>, <code>hasAttributes()</code>, <code>getFeature()</code>, <code>setUserData()</code>, et <code>getUserData()</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM3 Core', 'core.html#ID-1950641247', 'Node')}}</td>
-   <td>{{Spec2('DOM3 Core')}}</td>
-   <td>Les méthodes <code>insertBefore()</code>, <code>replaceChild()</code>, <code>removeChild()</code>, et<code>appendChild()</code> renvoient un autre type d'erreur (<code>NOT_SUPPORTED_ERR</code>) si elles sont appelées par {{domxref("Document")}}.<br>
-    La méthode <code>normalize()</code>  a été modifiée, ainsi ce mode {{domxref("Text")}} peut aussi être normalisé si la marque {{domxref("DOMConfiguration")}} est définie.<br>
-    Ajout des méthodes suivantes : <code>compareDocumentPosition()</code>, <code>isSameNode()</code>, <code>lookupPrefix()</code>, <code>isDefaultNamespace()</code>, <code>lookupNamespaceURI()</code>, <code>isEqualNode()</code>, <code>getFeature()</code>, <code>setUserData()</code>, et <code>getUserData().</code><br>
-    Ajout des propriétés suivantes : <code>baseURI</code> et <code>textContent</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Core', 'core.html#ID-1950641247', 'Node')}}</td>
-   <td>{{Spec2('DOM2 Core')}}</td>
-   <td>La propriété <code>ownerDocument</code>a été légèrement modifiée pour que  {{domxref("DocumentFragment")}} renvoie également <code>null</code>.<br>
-    Ajout des propriétés suivantes : <code>namespaceURI</code>, <code>prefix</code>, et <code>localName</code>.<br>
-    Ajout des méthodes suivantes : <code>normalize()</code>, <code>isSupported()</code> et <code>hasAttributes()</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM1', 'level-one-core.html#ID-1950641247', 'Node')}}</td>
-   <td>{{Spec2('DOM1')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Node")}}</p>
\ No newline at end of file
+};
+```
+
+#### Exemple d'utilisation
+
+```js
+/* ... an alternative to document.body.innerHTML = "" ... */
+document.body.removeAll();
+```
+
+## Spécifications
+
+| Spécification                                                                            | Statut                           | Commentaire                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| ---------------------------------------------------------------------------------------- | -------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('DOM WHATWG', '#interface-node', 'Node')}}                 | {{Spec2('DOM WHATWG')}} | Supprime les propriétés suivantes : `attributes`, `namespaceURI`, `prefix`, et `localName`. Supprime les méthodes suivantes : `isSupported()`, `hasAttributes()`, `getFeature()`, `setUserData()`, et `getUserData()`.                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| {{SpecName('DOM3 Core', 'core.html#ID-1950641247', 'Node')}}         | {{Spec2('DOM3 Core')}}     | Les méthodes `insertBefore()`, `replaceChild()`, `removeChild()`, et`appendChild()` renvoient un autre type d'erreur (`NOT_SUPPORTED_ERR`) si elles sont appelées par {{domxref("Document")}}. La méthode `normalize()`  a été modifiée, ainsi ce mode {{domxref("Text")}} peut aussi être normalisé si la marque {{domxref("DOMConfiguration")}} est définie. Ajout des méthodes suivantes : `compareDocumentPosition()`, `isSameNode()`, `lookupPrefix()`, `isDefaultNamespace()`, `lookupNamespaceURI()`, `isEqualNode()`, `getFeature()`, `setUserData()`, et `getUserData().` Ajout des propriétés suivantes : `baseURI` et `textContent`. |
+| {{SpecName('DOM2 Core', 'core.html#ID-1950641247', 'Node')}}         | {{Spec2('DOM2 Core')}}     | La propriété `ownerDocument`a été légèrement modifiée pour que  {{domxref("DocumentFragment")}} renvoie également `null`. Ajout des propriétés suivantes : `namespaceURI`, `prefix`, et `localName`. Ajout des méthodes suivantes : `normalize()`, `isSupported()` et `hasAttributes()`.                                                                                                                                                                                                                                                                                                                                                                      |
+| {{SpecName('DOM1', 'level-one-core.html#ID-1950641247', 'Node')}} | {{Spec2('DOM1')}}         | Définition initiale                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Node")}}
diff --git a/files/fr/web/api/node/insertbefore/index.md b/files/fr/web/api/node/insertbefore/index.md
index 289539552f..55abf106dd 100644
--- a/files/fr/web/api/node/insertbefore/index.md
+++ b/files/fr/web/api/node/insertbefore/index.md
@@ -10,47 +10,43 @@ tags:
   - Noeud
 translation_of: Web/API/Node/insertBefore
 ---
-<p>{{APIRef("DOM")}}</p>
+{{APIRef("DOM")}}
 
-<p>La méthode <code><strong>Node.insertBefore()</strong></code> insère un nœud avant un <em>nœud de référence</em> en tant qu'enfant d'un <em>nœud parent</em> spécifié.</p>
+La méthode **`Node.insertBefore()`** insère un nœud avant un _nœud de référence_ en tant qu'enfant d'un _nœud parent_ spécifié.
 
-<p>Si le nœud donné existe déjà dans le document, <code>insertBefore()</code> le déplace de sa position actuelle vers la nouvelle position. (C'est-à-dire qu'il sera automatiquement retiré de son parent existant avant d'être ajouté au nouveau parent spécifié).</p>
+Si le nœud donné existe déjà dans le document, `insertBefore()` le déplace de sa position actuelle vers la nouvelle position. (C'est-à-dire qu'il sera automatiquement retiré de son parent existant avant d'être ajouté au nouveau parent spécifié).
 
-<p>Cela signifie qu'un nœud ne peut pas se trouver simultanément à deux endroits du document.</p>
+Cela signifie qu'un nœud ne peut pas se trouver simultanément à deux endroits du document.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var <var>insertedNode</var> = <var>parentNode</var>.insertBefore(<var>newNode</var>, <var>referenceNode</var>);
-</pre>
+    var insertedNode = parentNode.insertBefore(newNode, referenceNode);
 
-<dl>
-  <dt><code><var>insertedNode</var></code></dt>
-  <dd>Le nœud en cours d'insertion (le même que <code><var>newNode</var></code>).</dd>
-  <dt><code><var>parentNode</var></code></dt>
-  <dd>Le parent du nœud nouvellement inséré.</dd>
-  <dt><code><var>newNode</var></code></dt>
-  <dd>Le nœud à insérer.</dd>
-  <dt><code><var>referenceNode</var></code></dt>
-  <dd>Le nœud avant lequel <code><var>newNode</var></code> est inséré. Si c'est <code>null</code>, alors <code><var>newNode</var></code> est inséré à la fin des nœuds enfants de <code><var>parentNode</var></code>.</dd>
-</dl>
+- `insertedNode`
+  - : Le nœud en cours d'insertion (le même que `newNode`).
+- `parentNode`
+  - : Le parent du nœud nouvellement inséré.
+- `newNode`
+  - : Le nœud à insérer.
+- `referenceNode`
+  - : Le nœud avant lequel `newNode` est inséré. Si c'est `null`, alors `newNode` est inséré à la fin des nœuds enfants de `parentNode`.
 
-<div class="notecard note">
-  <p><strong>Note :</strong> <em><code>referenceNode</code></em> <strong>n'est pas</strong> un paramètre facultatif -- vous devez explicitement transmettre un <code>Node</code> ou <code>null</code>. Ne pas le fournir ou transmettre des valeurs invalides provoque des <a href="https://code.google.com/p/chromium/issues/detail?id=419780">comportements différents</a> selon les différentes versions des navigateurs.</p>
-</div>
+> **Note :** _`referenceNode`_ **n'est pas** un paramètre facultatif -- vous devez explicitement transmettre un `Node` ou `null`. Ne pas le fournir ou transmettre des valeurs invalides provoque des [comportements différents](https://code.google.com/p/chromium/issues/detail?id=419780) selon les différentes versions des navigateurs.
 
-<h3 id="Return_value">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Renvoie l'enfant ajouté (sauf si <code><var>newNode</var></code> est un {{domxref("DocumentFragment")}}, auquel cas le {{domxref("DocumentFragment")}} vide est renvoyé).</p>
+Renvoie l'enfant ajouté (sauf si `newNode` est un {{domxref("DocumentFragment")}}, auquel cas le {{domxref("DocumentFragment")}} vide est renvoyé).
 
-<h2 id="Examples">Exemples</h2>
+## Exemples
 
-<h3 id="Example_1">Exemple 1</h3>
+### Exemple 1
 
-<pre class="brush: html">&lt;div id="parentElement"&gt;
-  &lt;span id="childElement"&gt;foo bar&lt;/span&gt;
-&lt;/div&gt;
+```html
+<div id="parentElement">
+  <span id="childElement">foo bar</span>
+</div>
 
-&lt;script&gt;
+<script>
 // Crée le nouveau nœud à insérer
 let newNode = document.createElement("span")
 
@@ -71,17 +67,18 @@ parentDiv.insertBefore(newNode, sp2) // Transfert dynamique implicite vers le ty
 let sp2 = "undefined" // Noeud non existant de l'id "childElement".
 parentDiv.insertBefore(newNode, sp2) // Génère "Erreur de type : Argument non valide".
 // Fin du cas de test [ 3 ]
-&lt;/script&gt;
-</pre>
+</script>
+```
 
-<h3 id="Example_2">Exemple 2</h3>
+### Exemple 2
 
-<pre class="brush:html">&lt;div id="parentElement"&gt;
-  &lt;span id="childElement"&gt;foo bar&lt;/span&gt;
-&lt;/div&gt;
+```html
+<div id="parentElement">
+  <span id="childElement">foo bar</span>
+</div>
 
-&lt;script&gt;
-// Crée un nouvel élément simple de type &lt;span&gt;
+<script>
+// Crée un nouvel élément simple de type <span>
 let sp1 = document.createElement("span")
 
 // Obtient l'élément de référence
@@ -91,76 +88,49 @@ let parentDiv = sp2.parentNode
 
 // Insert le nouvel élément dans avant sp2
 parentDiv.insertBefore(sp1, sp2)
-&lt;/script&gt;
-</pre>
+</script>
+```
 
-<p>Il n'existe pas de méthode <code>insertAfter</code>. Il peut être émulé avec une combinaison des méthodes <code>insertBefore</code><a href="/fr/docs/Web/API/Node/insertBefore"> </a>et <code><a href="/fr/docs/Web/API/Node/nextSibling">nextSibling</a></code>.</p>
+Il n'existe pas de méthode `insertAfter`. Il peut être émulé avec une combinaison des méthodes `insertBefore`[ ](/fr/docs/Web/API/Node/insertBefore)et [`nextSibling`](/fr/docs/Web/API/Node/nextSibling).
 
-<p>Dans l'exemple ci-dessus, <code>sp1</code> pourrait être inséré après <code>sp2</code> en utilisant :</p>
+Dans l'exemple ci-dessus, `sp1` pourrait être inséré après `sp2` en utilisant :
 
-<pre class="brush:js">parentDiv.insertBefore(sp1, sp2.nextSibling);</pre>
+```js
+parentDiv.insertBefore(sp1, sp2.nextSibling);
+```
 
-<p>Si <code>sp2</code> n'a pas d'enfant suivant, c'est qu'il est le dernier enfant. Dans ce cas, <code>sp2.nextSibling</code> renverra <code>null</code> et <code>sp1</code> sera donc inséré à la fin de la liste des nœuds enfants (c'est-à-dire immédiatement après <code>sp2</code>).</p>
+Si `sp2` n'a pas d'enfant suivant, c'est qu'il est le dernier enfant. Dans ce cas, `sp2.nextSibling` renverra `null` et `sp1` sera donc inséré à la fin de la liste des nœuds enfants (c'est-à-dire immédiatement après `sp2`).
 
-<h3 id="Example_3">Exemple 3</h3>
+### Exemple 3
 
-<p>Insérer un élément avant le premier élément enfant en utilisant la propriété <a href="/fr/docs/Web/API/Node/firstChild">firstChild</a>.</p>
+Insérer un élément avant le premier élément enfant en utilisant la propriété [firstChild](/fr/docs/Web/API/Node/firstChild).
 
-<pre class="brush:js">// Obtient l'élément parent
+```js
+// Obtient l'élément parent
   let parentElement = document.getElementById('parentElement')
   // Obtient le premier enfant du parent
   let theFirstChild = parentElement.firstChild
-  
+
   // Crée un nouvel élément
   let newElement = document.createElement("div")
-  
+
   // Insert le nouvel élément avant le premier enfant
   parentElement.insertBefore(newElement, theFirstChild)
-  </pre>
-
-<p>Si l'élément n'a pas de premier enfant, alors <code>firstChild</code> est <code>null</code>. L'élément est toujours ajouté au parent après le dernier enfant. Comme l'élément parent n'avait pas de premier enfant, il n'avait pas non plus de dernier enfant. Par conséquent, le nouvel élément est le seul élément, après l'insertion.</p>
-
-<h2 id="Specifications">Spécifications</h2>
-
-<table class="standard-table">
-  <thead>
-    <tr>
-      <th scope="col">Specification</th>
-      <th scope="col">Status</th>
-      <th scope="col">Comment</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>{{SpecName('DOM WHATWG','#dom-node-insertbefore','Node.insertBefore')}}</td>
-      <td>{{Spec2('DOM WHATWG')}}</td>
-      <td>Fixes errors in the insertion algorithm</td>
-    </tr>
-    <tr>
-      <td>{{SpecName('DOM4','#dom-node-insertbefore','Node.insertBefore')}}</td>
-      <td>{{Spec2('DOM4')}}</td>
-      <td>Describes the algorithm in more detail</td>
-    </tr>
-    <tr>
-      <td>{{SpecName('DOM3 Core','core.html#ID-952280727','Node.insertBefore')}}</td>
-      <td>{{Spec2('DOM3 Core')}}</td>
-      <td>No notable changes</td>
-    </tr>
-    <tr>
-      <td>{{SpecName('DOM2 Core','core.html#ID-952280727','Node.insertBefore')}}</td>
-      <td>{{Spec2('DOM2 Core')}}</td>
-      <td>No notable changes</td>
-    </tr>
-    <tr>
-      <td>
-        {{SpecName('DOM1','level-one-core.html#method-insertBefore','Node.insertBefore')}}
-      </td>
-      <td>{{Spec2('DOM1')}}</td>
-      <td>Introduced</td>
-    </tr>
-  </tbody>
-</table>
-
-<h2 id="Browser_Compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Node.insertBefore")}}</p>
+
+```
+
+Si l'élément n'a pas de premier enfant, alors `firstChild` est `null`. L'élément est toujours ajouté au parent après le dernier enfant. Comme l'élément parent n'avait pas de premier enfant, il n'avait pas non plus de dernier enfant. Par conséquent, le nouvel élément est le seul élément, après l'insertion.
+
+## Spécifications
+
+| Specification                                                                                                | Status                           | Comment                                 |
+| ------------------------------------------------------------------------------------------------------------ | -------------------------------- | --------------------------------------- |
+| {{SpecName('DOM WHATWG','#dom-node-insertbefore','Node.insertBefore')}}             | {{Spec2('DOM WHATWG')}} | Fixes errors in the insertion algorithm |
+| {{SpecName('DOM4','#dom-node-insertbefore','Node.insertBefore')}}                     | {{Spec2('DOM4')}}         | Describes the algorithm in more detail  |
+| {{SpecName('DOM3 Core','core.html#ID-952280727','Node.insertBefore')}}                 | {{Spec2('DOM3 Core')}}     | No notable changes                      |
+| {{SpecName('DOM2 Core','core.html#ID-952280727','Node.insertBefore')}}                 | {{Spec2('DOM2 Core')}}     | No notable changes                      |
+| {{SpecName('DOM1','level-one-core.html#method-insertBefore','Node.insertBefore')}} | {{Spec2('DOM1')}}         | Introduced                              |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Node.insertBefore")}}
diff --git a/files/fr/web/api/node/isconnected/index.md b/files/fr/web/api/node/isconnected/index.md
index 730afa1beb..3ffaaa50de 100644
--- a/files/fr/web/api/node/isconnected/index.md
+++ b/files/fr/web/api/node/isconnected/index.md
@@ -8,38 +8,38 @@ tags:
   - Propriétés
 translation_of: Web/API/Node/isConnected
 ---
-<p> </p>
+{{APIRef("DOM")}}
 
-<p>{{APIRef("DOM")}}</p>
+La propriété en lecture seule **`isConnected`** de l'interface {{domxref("Node")}} renvoie un booléen indiquant si le noeud est connecté (directement ou indirectement) à l'objet contexte, par exemple l'objet {{domxref("Document")}} dans le cas d'un DOM normal  ou l'objet {{domxref("ShadowRoot")}} dans le cas du DOM shadow.
 
-<p>La propriété en lecture seule <strong><code>isConnected</code></strong> de l'interface {{domxref("Node")}} renvoie un booléen indiquant si le noeud est connecté (directement ou indirectement) à l'objet contexte, par exemple l'objet {{domxref("Document")}} dans le cas d'un DOM normal  ou l'objet {{domxref("ShadowRoot")}} dans le cas du DOM shadow.</p>
+## Syntaxe
 
-<h2 id="Syntaxe">Syntaxe</h2>
+    var isItConnected = nodeObjectInstance.isConnected
 
-<pre class="syntaxbox">var isItConnected = nodeObjectInstance.isConnected</pre>
+### Renvoie la valeur
 
-<h3 id="Renvoie_la_valeur">Renvoie la valeur</h3>
+Un {{domxref("Boolean")}} (_booléen_) — `true` (_vrai_) si le noeud est connecté à son objet contextuel pertinent et `false` (_faux_) sinon.
 
-<p>Un {{domxref("Boolean")}} (<em>booléen</em>) — <code>true</code> (<em>vrai</em>) si le noeud est connecté à son objet contextuel pertinent et <code>false</code> (<em>faux</em>) sinon.</p>
+## Exemples
 
-<h2 id="Exemples">Exemples</h2>
+Un exemple DOM standard :
 
-<p>Un exemple DOM standard :</p>
-
-<pre class="brush: js">let test = document.createElement('p');
-console.log(test.isConnected); // renvoie false (<em>faux</em>)
+```js
+let test = document.createElement('p');
+console.log(test.isConnected); // renvoie false (faux)
 document.body.appendChild(test);
-console.log(test.isConnected); // renvoie true (<em>vrai</em>)
-</pre>
+console.log(test.isConnected); // renvoie true (vrai)
+```
 
-<p>Un exemple DOM shadow :</p>
+Un exemple DOM shadow :
 
-<pre class="brush: js">// Crée une racine shadow
+```js
+// Crée une racine shadow
 var shadow = this.attachShadow({mode: 'open'});
 
 // Crée du CSS à appliquer au dom shadow
 var style = document.createElement('style');
-console.log(style.isConnected); // renvoie false (<em>faux</em>)
+console.log(style.isConnected); // renvoie false (faux)
 
 style.textContent = '.wrapper {' +
                        'position: relative;' +
@@ -64,33 +64,17 @@ style.textContent = '.wrapper {' +
 // attache l'élément de style créé au dom shadow
 
 shadow.appendChild(style);
-console.log(style.isConnected); // renvoie true (<em>vrai</em>)</pre>
-
-<p> </p>
+console.log(style.isConnected); // renvoie true (vrai)
+```
 
-<h2 id="Spécifications">Spécifications</h2>
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG','#dom-node-isconnected','isConnected')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Spécifications
 
-<div>
-<div>
+| Spécification                                                                        | Statut                           | Commentaire          |
+| ------------------------------------------------------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName('DOM WHATWG','#dom-node-isconnected','isConnected')}} | {{Spec2('DOM WHATWG')}} | Définition initiale. |
 
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Node.isConnected")}}</p>
-</div>
-</div>
+{{Compat("api.Node.isConnected")}}
diff --git a/files/fr/web/api/node/isdefaultnamespace/index.md b/files/fr/web/api/node/isdefaultnamespace/index.md
index 1ea4b789bf..4e1fe3058e 100644
--- a/files/fr/web/api/node/isdefaultnamespace/index.md
+++ b/files/fr/web/api/node/isdefaultnamespace/index.md
@@ -8,32 +8,27 @@ tags:
   - Noeuds
 translation_of: Web/API/Node/isDefaultNamespace
 ---
-<div>
-<div>{{APIRef("DOM")}}</div>
-</div>
+{{APIRef("DOM")}}
 
-<p>La méthode <strong><code>Node.isDefaultNamespace()</code></strong> accepte un URI d'espace de nom comme argument et renvoie un {{jsxref("Boolean")}} (booléen) avec une valeur <code>true</code> (<em>vrai</em>) si l'espace de nom est celui par défaut du noeud donné ou <code>false</code> (<em>faux</em>) sinon.</p>
+La méthode **`Node.isDefaultNamespace()`** accepte un URI d'espace de nom comme argument et renvoie un {{jsxref("Boolean")}} (booléen) avec une valeur `true` (_vrai_) si l'espace de nom est celui par défaut du noeud donné ou `false` (_faux_) sinon.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>result</em> = <em>node</em>.isDefaultNamespace(<em>namespaceURI</em>)
-</pre>
+    result = node.isDefaultNamespace(namespaceURI)
 
-<ul>
- <li><code>result</code> détient la valeur de retour <code>true</code> (<em>vrai</em>) ou <code>false</code> (<em>faux</em>).</li>
- <li><code>namespaceURI</code> est une <code>string</code> (<em>chaîne de caractères</em>) représentant l'espace de nom par rapport auquel l'élément sera vérifié.</li>
-</ul>
+- `result` détient la valeur de retour `true` (_vrai_) ou `false` (_faux_).
+- `namespaceURI` est une `string` (_chaîne de caractères_) représentant l'espace de nom par rapport auquel l'élément sera vérifié.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush:js">var XULNS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
+```js
+var XULNS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
 var el = document.getElementsByTagNameNS(XULNS, 'textbox')[0];
 
-alert(el.isDefaultNamespace(XULNS)); // true</pre>
+alert(el.isDefaultNamespace(XULNS)); // true
+```
 
-<h2 id="Specification">Spécification</h2>
+## Spécification
 
-<ul>
- <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-isDefaultNamespace">DOM Level 3 Core: isDefaultNamespace</a></li>
- <li><a href="/en-US/docs/Code_snippets/IsDefaultNamespace">Code snippets: isDefaultNamespace</a></li>
-</ul>
+- [DOM Level 3 Core: isDefaultNamespace](http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-isDefaultNamespace)
+- [Code snippets: isDefaultNamespace](/en-US/docs/Code_snippets/IsDefaultNamespace)
diff --git a/files/fr/web/api/node/isequalnode/index.md b/files/fr/web/api/node/isequalnode/index.md
index 79bcb16b17..e86aa2118c 100644
--- a/files/fr/web/api/node/isequalnode/index.md
+++ b/files/fr/web/api/node/isequalnode/index.md
@@ -9,82 +9,68 @@ tags:
   - Noeuds
 translation_of: Web/API/Node/isEqualNode
 ---
-<div>
-<div>{{APIRef("DOM")}}</div>
-</div>
+{{APIRef("DOM")}}
 
-<p>La méthode <code><strong>Node.isEqualNode()</strong></code> permet de tester l'égalité entre deux éléments du DOM. Deux noeuds sont équivalents s'ils ont le même type, les mêmes caractéristiques de définition (ID, nombre d'enfants et autres), des attributs qui correspondent etc. L'ensemble spécifique de points des données qui doit correspondre varie en fonction des types de nœuds.</p>
+La méthode **`Node.isEqualNode()`** permet de tester l'égalité entre deux éléments du DOM. Deux noeuds sont équivalents s'ils ont le même type, les mêmes caractéristiques de définition (ID, nombre d'enfants et autres), des attributs qui correspondent etc. L'ensemble spécifique de points des données qui doit correspondre varie en fonction des types de nœuds.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var <var>isEqualNode</var> = <var>node</var>.isEqualNode(<var>otherNode</var>);
-</pre>
+    var isEqualNode = node.isEqualNode(otherNode);
 
-<ul>
- <li><code>otherNode</code> : Le noeud à comparer.</li>
-</ul>
+- `otherNode` : Le noeud à comparer.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Dans cet exemple, nous créons trois blocs {{HTMLElement("div")}}. Le premier et le troisième ont les mêmes contenus et attributs, alors que le second est différent. Alors, nous éxécutons du JavaScript pour comparer les noeuds en utilisant <code>isEqualNode()</code> et sortons les résultats.</p>
+Dans cet exemple, nous créons trois blocs {{HTMLElement("div")}}. Le premier et le troisième ont les mêmes contenus et attributs, alors que le second est différent. Alors, nous éxécutons du JavaScript pour comparer les noeuds en utilisant `isEqualNode()` et sortons les résultats.
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div&gt;This is the first element.&lt;/div&gt;
-&lt;div&gt;This is the second element.&lt;/div&gt;
-&lt;div&gt;This is the first element.&lt;/div&gt;
+```html
+<div>This is the first element.</div>
+<div>This is the second element.</div>
+<div>This is the first element.</div>
 
-&lt;p id="output"&gt;&lt;/p&gt;</pre>
+<p id="output"></p>
+```
 
-<h3 id="Specification">CSS</h3>
+### CSS
 
-<pre class="brush: css">#output {
+```css
+#output {
   width: 440px;
   border: 2px solid black;
   border-radius: 5px;
   padding: 10px;
   margin-top: 20px;
   display: block;
-}</pre>
+}
+```
 
-<h3 id="JavaScript">JavaScript</h3>
+### JavaScript
 
-<pre class="brush: js">let output = document.getElementById("output");
+```js
+let output = document.getElementById("output");
 let divList  = document.getElementsByTagName("div");
 
-output.innerHTML += "div 0 equals div 0: " + divList[0].isEqualNode(divList[0]) + "&lt;br/&gt;";
-output.innerHTML += "div 0 equals div 1: " + divList[0].isEqualNode(divList[1]) + "&lt;br/&gt;";
-output.innerHTML += "div 0 equals div 2: " + divList[0].isEqualNode(divList[2]) + "&lt;br/&gt;";</pre>
+output.innerHTML += "div 0 equals div 0: " + divList[0].isEqualNode(divList[0]) + "<br/>";
+output.innerHTML += "div 0 equals div 1: " + divList[0].isEqualNode(divList[1]) + "<br/>";
+output.innerHTML += "div 0 equals div 2: " + divList[0].isEqualNode(divList[2]) + "<br/>";
+```
 
-<h3 id="Résultats">Résultats</h3>
+### Résultats
 
-<p>{{ EmbedLiveSample('Example', 480) }}</p>
+{{ EmbedLiveSample('Example', 480) }}
 
-<h2 id="Specification">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('DOM WHATWG', '#dom-node-isequalnode', 'Node.isEqualNode')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                    | Statut                           | Commentaire |
+| ------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- |
+| {{SpecName('DOM WHATWG', '#dom-node-isequalnode', 'Node.isEqualNode')}} | {{Spec2('DOM WHATWG')}} |             |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Node.isEqualNode")}}</p>
+{{Compat("api.Node.isEqualNode")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("Node.isSameNode()")}}</li>
-</ul>
+- {{domxref("Node.isSameNode()")}}
diff --git a/files/fr/web/api/node/issamenode/index.md b/files/fr/web/api/node/issamenode/index.md
index cab5401b56..682d50b9e7 100644
--- a/files/fr/web/api/node/issamenode/index.md
+++ b/files/fr/web/api/node/issamenode/index.md
@@ -8,86 +8,69 @@ tags:
   - Noeuds
 translation_of: Web/API/Node/isSameNode
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p>La méthode <code><strong>Node.isSameNode()</strong></code> teste si deux noeuds sont identiques, c'est-à-dire, s'ils font référence au même objet.</p>
+La méthode **`Node.isSameNode()`** teste si deux noeuds sont identiques, c'est-à-dire, s'ils font référence au même objet.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var <em>isSameNode</em> = <em>node</em>.isSameNode(<em>other</em>);
-</pre>
+    var isSameNode = node.isSameNode(other);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<ul>
- <li><code>other</code> Le {{domxref("Node")}} à tester.</li>
-</ul>
+- `other` Le {{domxref("Node")}} à tester.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Dans cet exemple, nous créons 3 blocs {{HTMLElement("div")}}. Le premier et le troisième ont les mêmes contenus et attributs, alors que le second est différent. Ensuite, nous exécutons du JavaScript pour comparer les nœuds en utilisant <code>isSameNode()</code> et sortons les résultats.</p>
+Dans cet exemple, nous créons 3 blocs {{HTMLElement("div")}}. Le premier et le troisième ont les mêmes contenus et attributs, alors que le second est différent. Ensuite, nous exécutons du JavaScript pour comparer les nœuds en utilisant `isSameNode()` et sortons les résultats.
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div&gt;This is the first element.&lt;/div&gt;
-&lt;div&gt;This is the second element.&lt;/div&gt;
-&lt;div&gt;This is the first element.&lt;/div&gt;
+```html
+<div>This is the first element.</div>
+<div>This is the second element.</div>
+<div>This is the first element.</div>
 
-&lt;p id="output"&gt;&lt;/p&gt;</pre>
+<p id="output"></p>
+```
 
-<pre class="brush: css hidden">#output {
+```css hidden
+#output {
   width: 440px;
   border: 2px solid black;
   border-radius: 5px;
   padding: 10px;
   margin-top: 20px;
   display: block;
-}</pre>
+}
+```
 
-<h3 id="JavaScript">JavaScript</h3>
+### JavaScript
 
-<pre class="brush: js">let output = document.getElementById("output");
+```js
+let output = document.getElementById("output");
 let divList  = document.getElementsByTagName("div");
 
-output.innerHTML += "div 0 same as div 0: " + divList[0].isSameNode(divList[0]) + "&lt;br/&gt;";
-output.innerHTML += "div 0 same as div 1: " + divList[0].isSameNode(divList[1]) + "&lt;br/&gt;";
-output.innerHTML += "div 0 same as div 2: " + divList[0].isSameNode(divList[2]) + "&lt;br/&gt;";
-</pre>
-
-<h3 id="Résultats">Résultats</h3>
-
-<p>{{ EmbedLiveSample('Example', 480) }}</p>
-
-<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('DOM WHATWG', '#interface-node', 'Node')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Pas de changement (a été longtemps retiré).</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM3 Core', 'core.html#Node3-isSameNode', 'Node.isSameNode()')}}</td>
-   <td>{{Spec2('DOM3 Core')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Node.isSameNode")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("Node.isEqualNode()")}}</li>
-</ul>
+output.innerHTML += "div 0 same as div 0: " + divList[0].isSameNode(divList[0]) + "<br/>";
+output.innerHTML += "div 0 same as div 1: " + divList[0].isSameNode(divList[1]) + "<br/>";
+output.innerHTML += "div 0 same as div 2: " + divList[0].isSameNode(divList[2]) + "<br/>";
+```
+
+### Résultats
+
+{{ EmbedLiveSample('Example', 480) }}
+
+## Spécifications
+
+| Spécification                                                                                        | Statut                           | Commentaire                                 |
+| ---------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------- |
+| {{SpecName('DOM WHATWG', '#interface-node', 'Node')}}                             | {{Spec2('DOM WHATWG')}} | Pas de changement (a été longtemps retiré). |
+| {{SpecName('DOM3 Core', 'core.html#Node3-isSameNode', 'Node.isSameNode()')}} | {{Spec2('DOM3 Core')}}     | Définition initiale                         |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Node.isSameNode")}}
+
+## Voir aussi
+
+- {{domxref("Node.isEqualNode()")}}
diff --git a/files/fr/web/api/node/issupported/index.md b/files/fr/web/api/node/issupported/index.md
index 3c241d4656..d59dab5a7b 100644
--- a/files/fr/web/api/node/issupported/index.md
+++ b/files/fr/web/api/node/issupported/index.md
@@ -8,71 +8,48 @@ tags:
   - Noeuds
 translation_of: Web/API/Node/isSupported
 ---
-<p>{{APIRef("DOM")}}{{obsolete_header}}</p>
+{{APIRef("DOM")}}{{obsolete_header}}
 
-<p>La méthode <code><strong>Node.isSupported()</strong></code> renvoie une marque  {{domxref("Boolean","booléenne")}} contenant le résultat du test par lequel est vérifié si une implémentation DOM prend en charge une fonctionnalité spécifique et si celle-ci est supportée par un noeud spécifique.</p>
+La méthode **`Node.isSupported()`** renvoie une marque  {{domxref("Boolean","booléenne")}} contenant le résultat du test par lequel est vérifié si une implémentation DOM prend en charge une fonctionnalité spécifique et si celle-ci est supportée par un noeud spécifique.
 
-<h3 id="Syntaxe">Syntaxe</h3>
+### Syntaxe
 
-<pre class="syntaxbox"><em>boolValue</em> = <em>element</em>.isSupported(<em>feature</em>, <em>version</em>)</pre>
+    boolValue = element.isSupported(feature, version)
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>feature</code></dt>
- <dd>est une  {{domxref("DOMString")}} (<em>chaîne de caractères</em>) contenant le nom de la fonctionnalité à tester. C'est le même nom qui peut être passé à la méthode <code>hasFeature</code> de <a href="/fr/docs/Web/API/Document/implementation">DOMImplementation</a>. Les valeurs possibles définies dans la spécification DOM core sont listées dans la section <a href="http://www.w3.org/TR/DOM-Level-2-Core/introduction.html#ID-Conformance">Conformance</a> de DOM Level 2.</dd>
- <dt><code>version</code></dt>
- <dd>est une  {{domxref("DOMString")}} (<em>chaîne de caractères</em>) contenant le numéro de version de la fonctionnalité à tester. En DOM Level 2, première version, il s'agit de la chaîne « <code>2.0</code> ». Si la version n'est pas spécifiée, la gestion de n'importe quelle version de la fonctionnalité suffira pour que soit renvoyée la valeur <code>true</code>.</dd>
-</dl>
+- `feature`
+  - : est une  {{domxref("DOMString")}} (_chaîne de caractères_) contenant le nom de la fonctionnalité à tester. C'est le même nom qui peut être passé à la méthode `hasFeature` de [DOMImplementation](/fr/docs/Web/API/Document/implementation). Les valeurs possibles définies dans la spécification DOM core sont listées dans la section [Conformance](http://www.w3.org/TR/DOM-Level-2-Core/introduction.html#ID-Conformance) de DOM Level 2.
+- `version`
+  - : est une  {{domxref("DOMString")}} (_chaîne de caractères_) contenant le numéro de version de la fonctionnalité à tester. En DOM Level 2, première version, il s'agit de la chaîne « `2.0` ». Si la version n'est pas spécifiée, la gestion de n'importe quelle version de la fonctionnalité suffira pour que soit renvoyée la valeur `true`.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush: html">&lt;div id="doc"&gt;
-&lt;/div&gt;
+```html
+<div id="doc">
+</div>
 
-&lt;script&gt;
+<script>
  // Obtenir un élément et vérifier pour voir s'il est pris en charge par les modules HTML DOM2.
  var main = document.getElementById('doc');
  var output = main.isSupported('HTML', '2.0');
-&lt;/script&gt;</pre>
-
-<h2 id="Sp.C3.A9cification">Spécifications</h2>
-
-<p> </p>
-
-<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('DOM WHATWG', '#interface-node', 'Node')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Supprimée de la spécification</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM3 Core', 'core.html#Level-2-Core-Node-supports', 'Node.isSupported()')}}</td>
-   <td>{{Spec2('DOM3 Core')}}</td>
-   <td>Pas de changement de {{SpecName('DOM2 Core')}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Core', 'core.html#Level-2-Core-Node-supports', 'Node.isSupported()')}}</td>
-   <td>{{Spec2('DOM2 Core')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Node.isSupported")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>L'interface {{domxref("Node")}} à laquelle elle appartient.</li>
-</ul>
+</script>
+```
+
+## Spécifications
+
+
+
+| Spécification                                                                                                        | Statut                           | Commentaire                                            |
+| -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------ |
+| {{SpecName('DOM WHATWG', '#interface-node', 'Node')}}                                             | {{Spec2('DOM WHATWG')}} | Supprimée de la spécification                          |
+| {{SpecName('DOM3 Core', 'core.html#Level-2-Core-Node-supports', 'Node.isSupported()')}} | {{Spec2('DOM3 Core')}}     | Pas de changement de {{SpecName('DOM2 Core')}}. |
+| {{SpecName('DOM2 Core', 'core.html#Level-2-Core-Node-supports', 'Node.isSupported()')}} | {{Spec2('DOM2 Core')}}     | Définition initiale.                                   |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Node.isSupported")}}
+
+## Voir aussi
+
+- L'interface {{domxref("Node")}} à laquelle elle appartient.
diff --git a/files/fr/web/api/node/lastchild/index.md b/files/fr/web/api/node/lastchild/index.md
index 37963f8473..a44709a33d 100644
--- a/files/fr/web/api/node/lastchild/index.md
+++ b/files/fr/web/api/node/lastchild/index.md
@@ -9,58 +9,34 @@ tags:
   - Propriétés
 translation_of: Web/API/Node/lastChild
 ---
-<p>{{APIRef("DOM")}}</p>
+{{APIRef("DOM")}}
 
-<p>La propriété en lecture seule<strong> </strong><code><strong>Node.lastChild</strong></code> renvoie le dernier enfant du noeud. Si son parent est un élément, l'enfant est généralement un noeud élément, texte ou commentaire. Elle renvoie <code>null</code> s'il n'y a aucun enfant.</p>
+La propriété en lecture seule** \*\***`Node.lastChild`\*\* renvoie le dernier enfant du noeud. Si son parent est un élément, l'enfant est généralement un noeud élément, texte ou commentaire. Elle renvoie `null` s'il n'y a aucun enfant.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var <var>childNode</var> = <var>node</var>.lastChild;
-</pre>
+    var childNode = node.lastChild;
 
-<p> </p>
 
-<h2 id="Exemple">Exemple</h2>
 
-<p> </p>
+## Exemple
 
-<pre class="brush: js">var tr = document.getElementById("row1");
-var corner_td = tr.lastChild;</pre>
 
-<h2 id="Spécification">Spécification</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('DOM WHATWG', '#dom-node-lastchild', 'Node.lastChild')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Pas de changement</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM3 Core', 'core.html#ID-61AD09FB', 'Node.lastChild')}}</td>
-   <td>{{Spec2('DOM3 Core')}}</td>
-   <td>Pas de changement</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Core', 'core.html#ID-61AD09FB', 'Node.lastChild')}}</td>
-   <td>{{Spec2('DOM2 Core')}}</td>
-   <td>Pas de changement</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM1', 'level-one-core.html#ID-61AD09FB', 'Node.lastChild')}}</td>
-   <td>{{Spec2('DOM1')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+```js
+var tr = document.getElementById("row1");
+var corner_td = tr.lastChild;
+```
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Spécification
 
-<p>{{Compat("api.Node.lastChild")}}</p>
\ No newline at end of file
+| Spécification                                                                                    | Statut                           | Commentaire         |
+| ------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------- |
+| {{SpecName('DOM WHATWG', '#dom-node-lastchild', 'Node.lastChild')}}         | {{Spec2('DOM WHATWG')}} | Pas de changement   |
+| {{SpecName('DOM3 Core', 'core.html#ID-61AD09FB', 'Node.lastChild')}}     | {{Spec2('DOM3 Core')}}     | Pas de changement   |
+| {{SpecName('DOM2 Core', 'core.html#ID-61AD09FB', 'Node.lastChild')}}     | {{Spec2('DOM2 Core')}}     | Pas de changement   |
+| {{SpecName('DOM1', 'level-one-core.html#ID-61AD09FB', 'Node.lastChild')}} | {{Spec2('DOM1')}}         | Définition initiale |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Node.lastChild")}}
diff --git a/files/fr/web/api/node/lookupnamespaceuri/index.md b/files/fr/web/api/node/lookupnamespaceuri/index.md
index 1c88e6b8a2..d97ba7c2ea 100644
--- a/files/fr/web/api/node/lookupnamespaceuri/index.md
+++ b/files/fr/web/api/node/lookupnamespaceuri/index.md
@@ -8,16 +8,12 @@ tags:
   - Noeuds
 translation_of: Web/API/Node/lookupNamespaceURI
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p>La méthode <code><strong>Node.lookupNamespaceURI()</strong></code> accepte un préfixe et renvoie l'URI de l'espace de nom associé avec lui sur le noeud donné s'il le trouve (et <code>null</code> sinon). La fourniture de <code>null</code> pour le préfixe renverra l'espace de nom par défaut.</p>
+La méthode **`Node.lookupNamespaceURI()`** accepte un préfixe et renvoie l'URI de l'espace de nom associé avec lui sur le noeud donné s'il le trouve (et `null` sinon). La fourniture de `null` pour le préfixe renverra l'espace de nom par défaut.
 
-<p>Du fait du <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=312019">bug 312019</a>, cette méthode ne fonctionne pas avec les espaces de noms attribués dynamiquement (c'est-à-dire ceux qui sont définis par <a href="/en/DOM/Node.prefix">Node.prefix</a>).</p>
+Du fait du [bug 312019](https://bugzilla.mozilla.org/show_bug.cgi?id=312019), cette méthode ne fonctionne pas avec les espaces de noms attribués dynamiquement (c'est-à-dire ceux qui sont définis par [Node.prefix](/en/DOM/Node.prefix)).
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-lookupNamespaceURI">http://www.w3.org/TR/DOM-Level-3-Cor...upNamespaceURI</a></li>
-</ul>
-
-<p> </p>
+- [http://www.w3.org/TR/DOM-Level-3-Cor...upNamespaceURI](http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-lookupNamespaceURI)
diff --git a/files/fr/web/api/node/lookupprefix/index.md b/files/fr/web/api/node/lookupprefix/index.md
index 17cc48c622..a7a28baee5 100644
--- a/files/fr/web/api/node/lookupprefix/index.md
+++ b/files/fr/web/api/node/lookupprefix/index.md
@@ -10,14 +10,12 @@ tags:
   - URI
 translation_of: Web/API/Node/lookupPrefix
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p>La méthode <code><strong>Node.lookupPrefix()</strong></code> renvoie une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) contenant le préfixe d'un URI d'un espace de nom donné, s'il est présent, et <code>null</code> sinon. Quand plusieurs préfixes sont possibles, le résultat dépend de l'implémentation.</p>
+La méthode **`Node.lookupPrefix()`** renvoie une {{domxref("DOMString")}} (_chaîne de caractères_) contenant le préfixe d'un URI d'un espace de nom donné, s'il est présent, et `null` sinon. Quand plusieurs préfixes sont possibles, le résultat dépend de l'implémentation.
 
-<p>En raison du <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=312019">bug 312019</a>, cette méthode ne fonctionne plus avec les espaces de nom définis dynamiquement, c'est-à-dire ceux qui sont fixés avec la propriété {{domxref("Node.prefix")}}.</p>
+En raison du [bug 312019](https://bugzilla.mozilla.org/show_bug.cgi?id=312019), cette méthode ne fonctionne plus avec les espaces de nom définis dynamiquement, c'est-à-dire ceux qui sont fixés avec la propriété {{domxref("Node.prefix")}}.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-lookupNamespacePrefix">http://www.w3.org/TR/DOM-Level-3-Cor...amespacePrefix</a></li>
-</ul>
+- [http://www.w3.org/TR/DOM-Level-3-Cor...amespacePrefix](http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-lookupNamespacePrefix)
diff --git a/files/fr/web/api/node/nextsibling/index.md b/files/fr/web/api/node/nextsibling/index.md
index 2a971a3067..19e0ddb762 100644
--- a/files/fr/web/api/node/nextsibling/index.md
+++ b/files/fr/web/api/node/nextsibling/index.md
@@ -8,34 +8,34 @@ tags:
   - Propriétés
 translation_of: Web/API/Node/nextSibling
 ---
-<p>{{APIRef("DOM")}}</p>
+{{APIRef("DOM")}}
 
-<p>La propriété en lecture seule  <code><strong>Node.nextSibling</strong></code> renvoie le nœud (<code>node</code>) suivant immédiatement le nœud spécifié dans la liste des enfants ( {{domxref("Node.childNodes","childNodes")}}) de son nœud parent, ou <code>null</code> si le nœud spécifié est le dernier dans cette liste.</p>
+La propriété en lecture seule  **`Node.nextSibling`** renvoie le nœud (`node`) suivant immédiatement le nœud spécifié dans la liste des enfants ( {{domxref("Node.childNodes","childNodes")}}) de son nœud parent, ou `null` si le nœud spécifié est le dernier dans cette liste.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var>nextNode</var> = <var>node</var>.nextSibling
-</pre>
+    nextNode = node.nextSibling
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p></p><p>Les navigateurs basés sur Gecko insèrent des nœuds texte dans un document pour représenter des espaces
-    vides dans le balisage source. Par conséquent, un nœud obtenu par exemple via <a href="/fr/docs/Web/API/Node/firstChild"><code>Node.firstChild</code></a> ou
-    <a href="/fr/docs/Web/API/Node/previousSibling" title='{{APIRef("DOM")}}'><code>Node.previousSibling</code></a> peut faire référence à un nœud texte contenant des espaces plutôt qu'au véritable élément
-    que l'auteur comptait obtenir.</p>
+Les navigateurs basés sur Gecko insèrent des nœuds texte dans un document pour représenter des espaces
+vides dans le balisage source. Par conséquent, un nœud obtenu par exemple via [`Node.firstChild`](/fr/docs/Web/API/Node/firstChild) ou
+[`Node.previousSibling`](/fr/docs/Web/API/Node/previousSibling "{{APIRef("DOM")}}") peut faire référence à un nœud texte contenant des espaces plutôt qu'au véritable élément
+que l'auteur comptait obtenir.
 
-    <p>Consultez <a href="/fr/docs/Gestion_des_espaces_dans_le_DOM">Gestion des espaces dans le DOM</a>
-    et <a href="http://www.w3.org/DOM/faq.html#emptytext" rel="noopener"><i>Why are some Text nodes empty?</i>
-    dans la FAQ DOM 3 du W3C</a> pour plus d'informations.</p><p></p>
+Consultez [Gestion des espaces dans le DOM](/fr/docs/Gestion_des_espaces_dans_le_DOM)
+et [_Why are some Text nodes empty?_
+dans la FAQ DOM 3 du W3C](http://www.w3.org/DOM/faq.html#emptytext) pour plus d'informations.
 
-<p>{{domxref("Element.nextElementSibling")}} peut être utilisé pour obtenir l'élément suivant en ignorant les noeuds d'espace.</p>
+{{domxref("Element.nextElementSibling")}} peut être utilisé pour obtenir l'élément suivant en ignorant les noeuds d'espace.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush:html">&lt;div id="div-01"&gt;Here is div-01&lt;/div&gt;
-&lt;div id="div-02"&gt;Here is div-02&lt;/div&gt;
+```html
+<div id="div-01">Here is div-01</div>
+<div id="div-02">Here is div-02</div>
 
-&lt;script type="text/javascript"&gt;
+<script type="text/javascript">
 var el = document.getElementById('div-01').nextSibling,
     i = 1;
 
@@ -47,7 +47,7 @@ while (el) {
   i++;
 }
 
-&lt;/script&gt;
+</script>
 
 /**************************************************
   Ce qui suit est écrit sur la console pendant le chargement:
@@ -59,25 +59,22 @@ while (el) {
       3. #text
       4. SCRIPT
 
-**************************************************/</pre>
+**************************************************/
+```
 
-<p>Dans cet exemple, on peut voir que des nœuds <code>#text</code> sont insérés dans le DOM là où des espaces se trouvent dans le code source entre les balises (c'est-à-dire après la balise de fermeture d'un élément et avant la balise d'ouverture du suivant). Aucun espace n'est créé entre les éléments insérés par l'instruction <code>document.write</code> .</p>
+Dans cet exemple, on peut voir que des nœuds `#text` sont insérés dans le DOM là où des espaces se trouvent dans le code source entre les balises (c'est-à-dire après la balise de fermeture d'un élément et avant la balise d'ouverture du suivant). Aucun espace n'est créé entre les éléments insérés par l'instruction `document.write` .
 
-<p>L'inclusion possible de nœuds textes dans le DOM doit être prise en compte pour le parcours du DOM à l'aide de <code>nextSibling</code>. Consultez les ressources dans la section Notes .</p>
+L'inclusion possible de nœuds textes dans le DOM doit être prise en compte pour le parcours du DOM à l'aide de `nextSibling`. Consultez les ressources dans la section Notes .
 
-<h2 id="Sp.C3.A9cification">Spécification</h2>
+## Spécification
 
-<ul>
- <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#attribute-nextSibling">DOM Level 1 Core: nextSibling</a> <small>— <a href="http://xmlfr.org/w3c/TR/REC-DOM-Level-1/level-one-core.html#attribute-nextSibling">traduction</a> (non normative)</small></li>
- <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-6AC54C2F">DOM Level 2 Core: nextSibling</a> <small>— <a href="http://www.yoyodesign.org/doc/w3c/dom2/core/core.html#ID-6AC54C2F">traduction</a> (non normative)</small></li>
-</ul>
+- [DOM Level 1 Core: nextSibling](http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#attribute-nextSibling) — [traduction](http://xmlfr.org/w3c/TR/REC-DOM-Level-1/level-one-core.html#attribute-nextSibling) (non normative)
+- [DOM Level 2 Core: nextSibling](http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-6AC54C2F) — [traduction](http://www.yoyodesign.org/doc/w3c/dom2/core/core.html#ID-6AC54C2F) (non normative)
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
+{{Compat("api.Node.nextSibling")}}
 
+## Voir aussi
 
-<p>{{Compat("api.Node.nextSibling")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<p>{{domxref("Element.nextElementSibling")}}</p>
+{{domxref("Element.nextElementSibling")}}
diff --git a/files/fr/web/api/node/nodename/index.md b/files/fr/web/api/node/nodename/index.md
index 11c471fff1..ef15c51fc1 100644
--- a/files/fr/web/api/node/nodename/index.md
+++ b/files/fr/web/api/node/nodename/index.md
@@ -9,103 +9,54 @@ tags:
   - Propriété
 translation_of: Web/API/Node/nodeName
 ---
-<p>{{APIRef("DOM")}}</p>
-
-<p>La propriété en lecture seule <code><strong>Node.nodeName</strong></code> renvoie le nom du nœud courant dans une chaîne.</p>
-
-<p>Les valeurs retournées pour les différents types de noeuds sont :</p>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th>Interface</th>
-   <th>Valeur nodeName</th>
-  </tr>
-  <tr>
-   <td>{{domxref("Attr")}}</td>
-   <td>La valeur de {{domxref("Attr.name")}}</td>
-  </tr>
-  <tr>
-   <td>{{domxref("CDATASection")}}</td>
-   <td><code>"#cdata-section"</code></td>
-  </tr>
-  <tr>
-   <td>{{domxref("Comment")}}</td>
-   <td><code>"#comment"</code></td>
-  </tr>
-  <tr>
-   <td>{{domxref("Document")}}</td>
-   <td><code>"#document"</code></td>
-  </tr>
-  <tr>
-   <td>{{domxref("DocumentFragment")}}</td>
-   <td><code>"#document-fragment"</code></td>
-  </tr>
-  <tr>
-   <td>{{domxref("DocumentType")}}</td>
-   <td>La valeur de {{domxref("DocumentType.name")}}</td>
-  </tr>
-  <tr>
-   <td>{{domxref("Element")}}</td>
-   <td>La valeur de {{domxref("Element.tagName")}}</td>
-  </tr>
-  <tr>
-   <td>{{domxref("Entity")}}</td>
-   <td>Le nom de l'entité</td>
-  </tr>
-  <tr>
-   <td>{{domxref("EntityReference")}}</td>
-   <td>Le nom de la référence d'entité</td>
-  </tr>
-  <tr>
-   <td>{{domxref("Notation")}}</td>
-   <td>Le nom de notation</td>
-  </tr>
-  <tr>
-   <td>{{domxref("ProcessingInstruction")}}</td>
-   <td>La valeur de {{domxref("ProcessingInstruction.target")}}</td>
-  </tr>
-  <tr>
-   <td>{{domxref("Text")}}</td>
-   <td><code>"#text"</code></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">var <em>str</em> = <em>node</em>.nodeName;
-</pre>
-
-<h2 id="Exemple">Exemple</h2>
-
-<p>Avec le balisage suivant :</p>
-
-<pre>&lt;div id="d1"&gt;hello world&lt;/div&gt;
-&lt;input type="text" id="t"/&gt;
-</pre>
-
-<p>et le script suivant :</p>
-
-<pre>var div1 = document.getElementById("d1");
-var text_field = document.getElementById("t");
-text_field.value = div1.nodeName;
-</pre>
-
-<p>En XHTML (ou tout autre format XML), la valeur de <code>text_field</code> sera « div ». Cependant, en HTML, la valeur de <code>text_field</code> sera « DIV », parce que <code>nodeName</code> et <code>tagName</code> renvoient en casse majuscule sur les éléments HTML dans les DOM marqués comme des documents HTML. En lire plus <a href="http://ejohn.org/blog/nodename-case-sensitivity/">détails sur la sensibilité à la casse de nodeName dans différents navigateurs</a> (en).</p>
-
-<p>Notez que la propriété <code><a href="fr/DOM/element.tagName">tagName</a></code> aurait pu être uilisée à la place, puisque <code>nodeName</code> a la même valeur que <code>tagName</code> pour un élément. Souvenez vous cependant que <code>nodeName</code> renverra <code>#text</code> pour les nœuds texte tandis que <code>tagName</code> renverra <code>undefined</code>.</p>
-
-<h2 id="Sp.C3.A9cification">Spécification</h2>
-
-<ul>
- <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68D095">DOM Level 2 Core: Node.nodeName</a> <small>— <a href="http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-F68D095">traduction</a> (non normative)</small></li>
- <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-F68D095">DOM Level 3 Core: Node.nodeName</a></li>
- <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#apis-in-html-documents">HTML 5: APIs in HTML documents</a></li>
-</ul>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-
-
-<p>{{Compat("api.Node.nodeName")}}</p>
+{{APIRef("DOM")}}
+
+La propriété en lecture seule **`Node.nodeName`** renvoie le nom du nœud courant dans une chaîne.
+
+Les valeurs retournées pour les différents types de noeuds sont :
+
+| Interface                                        | Valeur nodeName                                                       |
+| ------------------------------------------------ | --------------------------------------------------------------------- |
+| {{domxref("Attr")}}                         | La valeur de {{domxref("Attr.name")}}                         |
+| {{domxref("CDATASection")}}             | `"#cdata-section"`                                                    |
+| {{domxref("Comment")}}                     | `"#comment"`                                                          |
+| {{domxref("Document")}}                 | `"#document"`                                                         |
+| {{domxref("DocumentFragment")}}         | `"#document-fragment"`                                                |
+| {{domxref("DocumentType")}}             | La valeur de {{domxref("DocumentType.name")}}             |
+| {{domxref("Element")}}                     | La valeur de {{domxref("Element.tagName")}}                 |
+| {{domxref("Entity")}}                     | Le nom de l'entité                                                    |
+| {{domxref("EntityReference")}}         | Le nom de la référence d'entité                                       |
+| {{domxref("Notation")}}                 | Le nom de notation                                                    |
+| {{domxref("ProcessingInstruction")}} | La valeur de {{domxref("ProcessingInstruction.target")}} |
+| {{domxref("Text")}}                         | `"#text"`                                                             |
+
+## Syntaxe
+
+    var str = node.nodeName;
+
+## Exemple
+
+Avec le balisage suivant :
+
+    <div id="d1">hello world</div>
+    <input type="text" id="t"/>
+
+et le script suivant :
+
+    var div1 = document.getElementById("d1");
+    var text_field = document.getElementById("t");
+    text_field.value = div1.nodeName;
+
+En XHTML (ou tout autre format XML), la valeur de `text_field` sera « div ». Cependant, en HTML, la valeur de `text_field` sera « DIV », parce que `nodeName` et `tagName` renvoient en casse majuscule sur les éléments HTML dans les DOM marqués comme des documents HTML. En lire plus [détails sur la sensibilité à la casse de nodeName dans différents navigateurs](http://ejohn.org/blog/nodename-case-sensitivity/) (en).
+
+Notez que la propriété [`tagName`](fr/DOM/element.tagName) aurait pu être uilisée à la place, puisque `nodeName` a la même valeur que `tagName` pour un élément. Souvenez vous cependant que `nodeName` renverra `#text` pour les nœuds texte tandis que `tagName` renverra `undefined`.
+
+## Spécification
+
+- [DOM Level 2 Core: Node.nodeName](http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68D095) — [traduction](http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-F68D095) (non normative)
+- [DOM Level 3 Core: Node.nodeName](http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-F68D095)
+- [HTML 5: APIs in HTML documents](http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#apis-in-html-documents)
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Node.nodeName")}}
diff --git a/files/fr/web/api/node/nodetype/index.md b/files/fr/web/api/node/nodetype/index.md
index 2f6cd30d79..082ae1bd03 100644
--- a/files/fr/web/api/node/nodetype/index.md
+++ b/files/fr/web/api/node/nodetype/index.md
@@ -9,172 +9,125 @@ tags:
   - Types
 translation_of: Web/API/Node/nodeType
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}La propriété en lecture seule **`Node.nodeType`** représente le type du noeud.
 
-<div>La propriété en lecture seule <code><strong>Node.nodeType</strong></code> représente le type du noeud.</div>
+## Description
 
-<h2 id="Description">Description</h2>
+La propriété **`nodeType`** peut être utilisée pour distinguer les uns des autres les différents genres de noeuds tels que {{domxref("Element")}}, {{domxref("Text")}} et {{domxref("Comment")}} .
 
-<p>La propriété <strong><code>nodeType</code></strong> peut être utilisée pour distinguer les uns des autres les différents genres de noeuds tels que {{domxref("Element")}}, {{domxref("Text")}} et {{domxref("Comment")}} .</p>
+## Syntaxe
 
-<h2 id="Syntaxe">Syntaxe</h2>
+    Type = node .nodeType
 
-<pre class="syntaxbox"><var>Type</var> = <var>node</var> .nodeType
-</pre>
+Renvoie un entier (_integer_) qui spécifie le type du noeud ; les valeurs possibles sont listées dans {{anch("Constantes")}}.
 
-<p>Renvoie un entier (<em>integer</em>) qui spécifie le type du noeud ; les valeurs possibles sont listées dans  {{anch("Constantes")}}.</p>
+## Constantes
 
-<h2>Constantes</h2>
+### Constantes de type nœud
 
-<h3 id="Exemple">Constantes de type nœud</h3>
+| Constante                          | Valeur | Description                                                                                                              |
+| ---------------------------------- | ------ | ------------------------------------------------------------------------------------------------------------------------ |
+| `Node.ELEMENT_NODE`                | `1`    | Un noeud {{domxref("Element")}}  tel que {{HTMLElement("p")}} ou {{HTMLElement("div")}}`.`           |
+| `Node.TEXT_NODE`                   | `3`    | Le {{domxref("Text")}} actuel de l'{{domxref("Element")}} ou {{domxref("Attr")}}.                        |
+| `Node.PROCESSING_INSTRUCTION_NODE` | `7`    | Une {{domxref("ProcessingInstruction")}} d'un document XML tel que la déclaration `<?xml-stylesheet ... ?>`. |
+| `Node.COMMENT_NODE`                | `8`    | Un noeud {{domxref("Comment")}}.                                                                                   |
+| `Node.DOCUMENT_NODE`               | `9`    | Un noeud {{domxref("Document")}}.                                                                               |
+| `Node.DOCUMENT_TYPE_NODE`          | `10`   | Un noeud {{domxref("DocumentType")}} c'est-à-dire `<!DOCTYPE html>` pour des documents HTML5.                   |
+| `Node.DOCUMENT_FRAGMENT_NODE`      | `11`   | Un noeud {{domxref("DocumentFragment")}}.                                                                       |
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Constante</th>
-   <th scope="col">Valeur</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>Node.ELEMENT_NODE</code></td>
-   <td><code>1</code></td>
-   <td>Un noeud {{domxref("Element")}}  tel que {{HTMLElement("p")}} ou {{HTMLElement("div")}}<code>.</code></td>
-  </tr>
-  <tr>
-   <td><code>Node.TEXT_NODE</code></td>
-   <td><code>3</code></td>
-   <td>Le {{domxref("Text")}} actuel de l'{{domxref("Element")}} ou {{domxref("Attr")}}.</td>
-  </tr>
-  <tr>
-   <td><code>Node.PROCESSING_INSTRUCTION_NODE</code></td>
-   <td><code>7</code></td>
-   <td>Une {{domxref("ProcessingInstruction")}} d'un document XML tel que la déclaration <code>&lt;?xml-stylesheet ... ?&gt;</code>.</td>
-  </tr>
-  <tr>
-   <td><code>Node.COMMENT_NODE</code></td>
-   <td><code>8</code></td>
-   <td>Un noeud {{domxref("Comment")}}.</td>
-  </tr>
-  <tr>
-   <td><code>Node.DOCUMENT_NODE</code></td>
-   <td><code>9</code></td>
-   <td>Un noeud {{domxref("Document")}}.</td>
-  </tr>
-  <tr>
-   <td><code>Node.DOCUMENT_TYPE_NODE</code></td>
-   <td><code>10</code></td>
-   <td>Un noeud {{domxref("DocumentType")}} c'est-à-dire <code>&lt;!DOCTYPE html&gt;</code> pour des documents HTML5.</td>
-  </tr>
-  <tr>
-   <td><code>Node.DOCUMENT_FRAGMENT_NODE</code></td>
-   <td><code>11</code></td>
-   <td>Un noeud {{domxref("DocumentFragment")}}.</td>
-  </tr>
- </tbody>
-</table>
+### Constantes de type noeud dépréciées {{deprecated_inline()}}
 
-<h3 id="Constantes_de_type_noeud_dépréciées_deprecated_inline()">Constantes de type noeud dépréciées {{deprecated_inline()}}</h3>
-
-<p>Les constantes suivantes ont été dépréciées et ne doivent plus être utilisées.</p>
+Les constantes suivantes ont été dépréciées et ne doivent plus être utilisées.
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <td>Constante</td>
-   <td>Valeur</td>
-   <td>Description</td>
-  </tr>
-  <tr>
-   <td><code>Node.ATTRIBUTE_NODE</code></td>
-   <td>2</td>
-   <td>Un {{domxref("Attr", "Attribut")}} d'un {{domxref("Element")}}. Les attributs d'élément n'implémentent plus l'interface {{domxref("Node")}} dans la spécification {{SpecName("DOM4")}}.</td>
-  </tr>
-  <tr>
-   <td><code>Node.CDATA_SECTION_NODE</code></td>
-   <td><code>4</code></td>
-   <td>Une {{domxref("CDATASection")}}. Supprimée dans la spécification {{SpecName("DOM4")}}.</td>
-  </tr>
-  <tr>
-   <td><code>Node.ENTITY_REFERENCE_NODE</code></td>
-   <td>5</td>
-   <td>Un noeud référence d'entité XML. Supprimé dans la spécification {{SpecName("DOM4")}}.</td>
-  </tr>
-  <tr>
-   <td><code>Node.ENTITY_NODE</code></td>
-   <td>6</td>
-   <td>Un noeud <code>&lt;!ENTITY ...&gt;</code> XML. Supprimé dans la spécificatioin {{SpecName("DOM4")}}.</td>
-  </tr>
-  <tr>
-   <td><code>Node.NOTATION_NODE</code></td>
-   <td>12</td>
-   <td>Un noeud <code>&lt;!NOTATION ...&gt;</code> XML. Supprimé dans la spécification {{SpecName("DOM4")}}.</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <td>Constante</td>
+      <td>Valeur</td>
+      <td>Description</td>
+    </tr>
+    <tr>
+      <td><code>Node.ATTRIBUTE_NODE</code></td>
+      <td>2</td>
+      <td>
+        Un {{domxref("Attr", "Attribut")}} d'un
+        {{domxref("Element")}}. Les attributs d'élément n'implémentent
+        plus l'interface {{domxref("Node")}} dans la spécification
+        {{SpecName("DOM4")}}.
+      </td>
+    </tr>
+    <tr>
+      <td><code>Node.CDATA_SECTION_NODE</code></td>
+      <td><code>4</code></td>
+      <td>
+        Une {{domxref("CDATASection")}}. Supprimée dans la
+        spécification {{SpecName("DOM4")}}.
+      </td>
+    </tr>
+    <tr>
+      <td><code>Node.ENTITY_REFERENCE_NODE</code></td>
+      <td>5</td>
+      <td>
+        Un noeud référence d'entité XML. Supprimé dans la spécification
+        {{SpecName("DOM4")}}.
+      </td>
+    </tr>
+    <tr>
+      <td><code>Node.ENTITY_NODE</code></td>
+      <td>6</td>
+      <td>
+        Un noeud <code>&#x3C;!ENTITY ...></code> XML. Supprimé dans la
+        spécificatioin {{SpecName("DOM4")}}.
+      </td>
+    </tr>
+    <tr>
+      <td><code>Node.NOTATION_NODE</code></td>
+      <td>12</td>
+      <td>
+        Un noeud <code>&#x3C;!NOTATION ...></code> XML. Supprimé dans la
+        spécification {{SpecName("DOM4")}}.
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Exemple">Exemples</h2>
+## Exemples
 
-<h3 id="Différents_types_de_noeuds">Différents types de noeuds</h3>
+### Différents types de noeuds
 
-<pre class="brush: js">document.nodeType === Node.DOCUMENT_NODE; // true (<em>vrai</em>)
-document.doctype.nodeType === Node.DOCUMENT_TYPE_NODE; // true  (<em>vrai</em>)
+```js
+document.nodeType === Node.DOCUMENT_NODE; // true (vrai)
+document.doctype.nodeType === Node.DOCUMENT_TYPE_NODE; // true  (vrai)
 
 var fragment = document.createDocumentFragment();
-fragment.nodeType === Node.DOCUMENT_FRAGMENT_NODE; // true  (<em>vrai</em>)
+fragment.nodeType === Node.DOCUMENT_FRAGMENT_NODE; // true  (vrai)
 
-<code>var p = document.createElement("p");
-p.textContent = "Once upon a time...";</code>
+var p = document.createElement("p");
+p.textContent = "Once upon a time...";
 
-p.nodeType === Node.ELEMENT_NODE; // true  (<em>vrai</em>)
-p.firstChild.nodeType === Node.TEXT_NODE; // true  (<em>vrai</em>)
-</pre>
+p.nodeType === Node.ELEMENT_NODE; // true  (vrai)
+p.firstChild.nodeType === Node.TEXT_NODE; // true  (vrai)
+```
 
-<h3 id="Commentaires">Commentaires</h3>
+### Commentaires
 
-<p>Cet exemple vérifie si le premier noeud dans l'élément du document est un noeud commentaire et si ce n'est pas le cas, affiche un message.</p>
+Cet exemple vérifie si le premier noeud dans l'élément du document est un noeud commentaire et si ce n'est pas le cas, affiche un message.
 
-<pre class="brush: js">var node = document.documentElement.firstChild;
+```js
+var node = document.documentElement.firstChild;
 if (node.nodeType != Node.COMMENT_NODE)
-  console.log("You should comment your code well!");</pre>
-
-<h2 id="Sp.C3.A9cification">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('DOM WHATWG', '#dom-node-nodetype', 'Node.nodeType')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Sont dépréciés les types <code>ATTRIBUTE_NODE, CDATA_SECTION_NODE, ENTITY_REFERENCE_NODE et NOTATION_NODE</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM3 Core', 'core.html#ID-1950641247', 'Node.nodeType')}}</td>
-   <td>{{Spec2('DOM3 Core')}}</td>
-   <td>Pas de changement.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Core', 'core.html#ID-111237558', 'Node.nodeType')}}</td>
-   <td>{{Spec2('DOM2 Core')}}</td>
-   <td>Pas de changement.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM1', 'level-one-core.html#ID-111237558', 'Node.nodeType')}}</td>
-   <td>{{Spec2('DOM1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+  console.log("You should comment your code well!");
+```
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Spécifications
 
+| Spécification                                                                                    | Statut                           | Commentaire                                                                                            |
+| ------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------------------------------------------------------------------------------------------ |
+| {{SpecName('DOM WHATWG', '#dom-node-nodetype', 'Node.nodeType')}}         | {{Spec2('DOM WHATWG')}} | Sont dépréciés les types `ATTRIBUTE_NODE, CDATA_SECTION_NODE, ENTITY_REFERENCE_NODE et NOTATION_NODE`. |
+| {{SpecName('DOM3 Core', 'core.html#ID-1950641247', 'Node.nodeType')}}     | {{Spec2('DOM3 Core')}}     | Pas de changement.                                                                                     |
+| {{SpecName('DOM2 Core', 'core.html#ID-111237558', 'Node.nodeType')}}     | {{Spec2('DOM2 Core')}}     | Pas de changement.                                                                                     |
+| {{SpecName('DOM1', 'level-one-core.html#ID-111237558', 'Node.nodeType')}} | {{Spec2('DOM1')}}         | Définition initiale.                                                                                   |
 
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Node.nodeType")}}</p>
+{{Compat("api.Node.nodeType")}}
diff --git a/files/fr/web/api/node/nodevalue/index.md b/files/fr/web/api/node/nodevalue/index.md
index 9f3fa1f3b3..294ed8619a 100644
--- a/files/fr/web/api/node/nodevalue/index.md
+++ b/files/fr/web/api/node/nodevalue/index.md
@@ -8,86 +8,81 @@ tags:
   - Propriétés
 translation_of: Web/API/Node/nodeValue
 ---
-<p>{{APIRef("DOM")}}</p>
+{{APIRef("DOM")}}
 
-<p>La propriété <code><strong>Node.nodeValue</strong></code> renvoie ou définit la valeur du nœud courant.</p>
+La propriété **`Node.nodeValue`** renvoie ou définit la valeur du nœud courant.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var>value</var> = <var>node</var>.nodeValue;
-</pre>
+    value = node.nodeValue;
 
-<p><code>value</code> (<em>valeur</em>) est une chaîne contenant la valeur du nœud courant, s'il y en a une.</p>
+`value` (_valeur_) est une chaîne contenant la valeur du nœud courant, s'il y en a une.
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p>Pour le document lui-même, <code>nodeValue</code> renvoie <code>null</code>. Pour des nœuds texte, de commentaires et CDATA, <code>nodeValue</code> renvoie le contenu du nœud. Pour les nœuds d'attributs, il s'agira de la valeur de l'attribut.</p>
+Pour le document lui-même, `nodeValue` renvoie `null`. Pour des nœuds texte, de commentaires et CDATA, `nodeValue` renvoie le contenu du nœud. Pour les nœuds d'attributs, il s'agira de la valeur de l'attribut.
 
-<p>Le tableau suivant montre les valeurs de retour pour différents types de nœuds :</p>
+Le tableau suivant montre les valeurs de retour pour différents types de nœuds :
 
 <table>
- <tbody>
-  <tr>
-   <td>Attr</td>
-   <td>valeur de l'attribut</td>
-  </tr>
-  <tr>
-   <td>CDATASection</td>
-   <td>contenu de la section CDATA</td>
-  </tr>
-  <tr>
-   <td>Comment</td>
-   <td>contenu du commentaire</td>
-  </tr>
-  <tr>
-   <td>Document</td>
-   <td><code>null</code></td>
-  </tr>
-  <tr>
-   <td>DocumentFragment</td>
-   <td><code>null</code></td>
-  </tr>
-  <tr>
-   <td>DocumentType</td>
-   <td><code>null</code></td>
-  </tr>
-  <tr>
-   <td>Element</td>
-   <td><code>null</code></td>
-  </tr>
-  <tr>
-   <td>NamedNodeMap</td>
-   <td><code>null</code></td>
-  </tr>
-  <tr>
-   <td>EntityReference</td>
-   <td><code>null</code></td>
-  </tr>
-  <tr>
-   <td>Notation</td>
-   <td><code>null</code></td>
-  </tr>
-  <tr>
-   <td>ProcessingInstruction</td>
-   <td>tout le contenu à l'exception de la cible</td>
-  </tr>
-  <tr>
-   <td>Text</td>
-   <td>contenu du nœud texte</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <td>Attr</td>
+      <td>valeur de l'attribut</td>
+    </tr>
+    <tr>
+      <td>CDATASection</td>
+      <td>contenu de la section CDATA</td>
+    </tr>
+    <tr>
+      <td>Comment</td>
+      <td>contenu du commentaire</td>
+    </tr>
+    <tr>
+      <td>Document</td>
+      <td><code>null</code></td>
+    </tr>
+    <tr>
+      <td>DocumentFragment</td>
+      <td><code>null</code></td>
+    </tr>
+    <tr>
+      <td>DocumentType</td>
+      <td><code>null</code></td>
+    </tr>
+    <tr>
+      <td>Element</td>
+      <td><code>null</code></td>
+    </tr>
+    <tr>
+      <td>NamedNodeMap</td>
+      <td><code>null</code></td>
+    </tr>
+    <tr>
+      <td>EntityReference</td>
+      <td><code>null</code></td>
+    </tr>
+    <tr>
+      <td>Notation</td>
+      <td><code>null</code></td>
+    </tr>
+    <tr>
+      <td>ProcessingInstruction</td>
+      <td>tout le contenu à l'exception de la cible</td>
+    </tr>
+    <tr>
+      <td>Text</td>
+      <td>contenu du nœud texte</td>
+    </tr>
+  </tbody>
 </table>
 
-<p>Lorsque <code>nodeValue</code> est défini comme étant <code>null</code>, l'assignation n'a aucun effet.</p>
+Lorsque `nodeValue` est défini comme étant `null`, l'assignation n'a aucun effet.
 
-<h2 id="Sp.C3.A9cification">Spécification</h2>
+## Spécification
 
-<ul>
- <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68D080">DOM Level 2 Core: Node.nodeValue</a>  <small>— <a href="http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-F68D080">traduction</a> (non normative)</small></li>
-</ul>
+- [DOM Level 2 Core: Node.nodeValue](http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68D080) — [traduction](http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-F68D080) (non normative)
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-
-
-<p>{{Compat("api.Node.nodeValue")}}</p>
+{{Compat("api.Node.nodeValue")}}
diff --git a/files/fr/web/api/node/normalize/index.md b/files/fr/web/api/node/normalize/index.md
index c1a299fb15..4864a1278a 100644
--- a/files/fr/web/api/node/normalize/index.md
+++ b/files/fr/web/api/node/normalize/index.md
@@ -3,20 +3,20 @@ title: element.normalize
 slug: Web/API/Node/normalize
 translation_of: Web/API/Node/normalize
 ---
-<p>{{ ApiRef("DOM") }}</p>
+{{ ApiRef("DOM") }}
 
-<h2 id="R.C3.A9sum.C3.A9">Résumé</h2>
+## Résumé
 
-<p>Place le nœud spécifié et tout son sous-arbre dans une forme « normale ». Dans un sous-arbre normalisé, aucun nœud texte n'est vide et il n'y a pas de nœuds texte adjacents.</p>
+Place le nœud spécifié et tout son sous-arbre dans une forme « normale ». Dans un sous-arbre normalisé, aucun nœud texte n'est vide et il n'y a pas de nœuds texte adjacents.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="eval"><em>élément</em>.normalize();
-</pre>
+    élément.normalize();
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush:js">var conteneur = document.createElement("div");
+```js
+var conteneur = document.createElement("div");
 conteneur.appendChild( document.createTextNode("Partie 1 ") );
 conteneu.appendChild( document.createTextNode("Partie 2 ") );
 
@@ -27,12 +27,11 @@ conteneu.appendChild( document.createTextNode("Partie 2 ") );
 conteneur.normalize();
 
 // À présent, conteneur.childNodes.length === 1
-// conteneur.childNodes[0].textContent === "Partie 1 Partie 2 "</pre>
+// conteneur.childNodes[0].textContent === "Partie 1 Partie 2 "
+```
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<h2 id="Sp.C3.A9cification">Spécification</h2>
+## Spécification
 
-<ul>
- <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-normalize">DOM Level 2 Core: Node.normalize (en)</a> <small>— <a href="http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-normalize">traduction en français</a> (non normative)</small></li>
-</ul>
\ No newline at end of file
+- [DOM Level 2 Core: Node.normalize (en)](http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-normalize) — [traduction en français](http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-normalize) (non normative)
diff --git a/files/fr/web/api/node/ownerdocument/index.md b/files/fr/web/api/node/ownerdocument/index.md
index 35b5eb6859..83c9698497 100644
--- a/files/fr/web/api/node/ownerdocument/index.md
+++ b/files/fr/web/api/node/ownerdocument/index.md
@@ -9,58 +9,37 @@ tags:
   - Propriétés
 translation_of: Web/API/Node/ownerDocument
 ---
-<p>{{APIRef("DOM")}}</p>
+{{APIRef("DOM")}}
 
-<p>La propriété en lecture seule <code><strong>Node.ownerDocument</strong></code> renvoie l'objet document de niveau supérieur pour ce nœud.</p>
+La propriété en lecture seule **`Node.ownerDocument`** renvoie l'objet document de niveau supérieur pour ce nœud.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="eval"><em>document</em> = element.ownerDocument;
-</pre>
+    document = element.ownerDocument;
 
-<ul>
- <li><code>document</code> est l'objet <a href="/fr/docs/Web/API/document"><code>document</code></a> parent de l'élément courant.</li>
-</ul>
+- `document` est l'objet [`document`](/fr/docs/Web/API/document) parent de l'élément courant.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush: html">// étant donné un nœud "p", obtient le premier enfant HTML
+```html
+// étant donné un nœud "p", obtient le premier enfant HTML
 // de l'objet document
 var d = p.ownerDocument;
 var html = d.documentElement;
-</pre>
+```
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p>L'objet <code>document</code> renvoyé par cette propriété est l'objet principal avec lequel tous les nœuds enfants du document HTML réel sont créés. Si cette propriété est utilisée sur un nœud qui est lui-même un document, le résultat est <code>null</code>.</p>
+L'objet `document` renvoyé par cette propriété est l'objet principal avec lequel tous les nœuds enfants du document HTML réel sont créés. Si cette propriété est utilisée sur un nœud qui est lui-même un document, le résultat est `null`.
 
-<h3 id="Sp.C3.A9cification">Spécifications</h3>
+### Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th>Spécification</th>
-   <th>Statut</th>
-   <th>Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName("DOM4", "#dom-node-ownerdocument", "Node.ownerDocument")}}</td>
-   <td>{{Spec2("DOM4")}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName("DOM3 Core", "core.html#node-ownerDoc", "Node.ownerDocument")}}</td>
-   <td>{{Spec2("DOM3 Core")}}</td>
-   <td>Pas de changement</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("DOM2 Core", "core.html#node-ownerDoc", "Node.ownerDocument")}}</td>
-   <td>{{Spec2("DOM2 Core")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                        | Statut                       | Commentaire          |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName("DOM4", "#dom-node-ownerdocument", "Node.ownerDocument")}}         | {{Spec2("DOM4")}}     |                      |
+| {{SpecName("DOM3 Core", "core.html#node-ownerDoc", "Node.ownerDocument")}} | {{Spec2("DOM3 Core")}} | Pas de changement    |
+| {{SpecName("DOM2 Core", "core.html#node-ownerDoc", "Node.ownerDocument")}} | {{Spec2("DOM2 Core")}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Node.ownerDocument")}}</p>
\ No newline at end of file
+{{Compat("api.Node.ownerDocument")}}
diff --git a/files/fr/web/api/node/parentelement/index.md b/files/fr/web/api/node/parentelement/index.md
index 673cb3b8b2..66d50067d3 100644
--- a/files/fr/web/api/node/parentelement/index.md
+++ b/files/fr/web/api/node/parentelement/index.md
@@ -9,45 +9,32 @@ tags:
   - parent
 translation_of: Web/API/Node/parentElement
 ---
-<div>
-<div>
-<div>{{APIRef("DOM")}}</div>
-</div>
+{{APIRef("DOM")}}La propriété en lecture seule **`Node.parentElement`** renvoie le parent du noeud DOM ({{domxref("Element")}}) ou **`null`** si ce dernier n'a pas de parent ou si le parent n'est pas un {{domxref("Element")}} du DOM.
 
-<div>La propriété en lecture seule <code><strong>Node.parentElement</strong></code> renvoie le parent du noeud DOM ({{domxref("Element")}}) ou <code><strong>null</strong></code> si ce dernier n'a pas de parent ou si le parent n'est pas un {{domxref("Element")}} du DOM.</div>
-</div>
+## Syntaxe
 
-<h2 id="Syntax">Syntaxe</h2>
+    parentElement = node.parentElement
 
-<pre class="syntaxbox"><em>parentElement</em> = <em>node</em>.parentElement
-</pre>
+**`parentElement`** référence l'élément parent d'un nœud (**`node`**). C'est toujours un objet {{domxref("Element")}} du DOM ou `null`.
 
-<p><code><strong>parentElement</strong></code> référence l'élément parent d'un nœud (<code><strong>node</strong></code>). C'est toujours un objet {{domxref("Element")}}  du DOM ou <code>null</code>.</p>
+## Exemple
 
-<h2 id="Example">Exemple</h2>
-
-<pre class="brush:js">if (node.parentElement) {
+```js
+if (node.parentElement) {
     node.parentElement.style.color = "red";
-}</pre>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>Sur quelques navigateurs, la propriété <code>parentElement</code> est seulement définie sur les noeuds qui sont eux-mêmes des {{domxref("Element")}}. En particulier, elle n'est pas définie sur les noeuds texte.</p>
+}
+```
 
-<div>
+## Compatibilité des navigateurs
 
+Sur quelques navigateurs, la propriété `parentElement` est seulement définie sur les noeuds qui sont eux-mêmes des {{domxref("Element")}}. En particulier, elle n'est pas définie sur les noeuds texte.
 
-<p>{{Compat("api.Node.parentElement")}}</p>
-</div>
+{{Compat("api.Node.parentElement")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<ul>
- <li>{{spec("http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#parent-element", "DOM Level 4: Node.parentElement", "WD")}}</li>
-</ul>
+- {{spec("http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#parent-element", "DOM Level 4: Node.parentElement", "WD")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("Node.parentNode")}}</li>
-</ul>
+- {{domxref("Node.parentNode")}}
diff --git a/files/fr/web/api/node/parentnode/index.md b/files/fr/web/api/node/parentnode/index.md
index 5d2088cbf6..1412167bca 100644
--- a/files/fr/web/api/node/parentnode/index.md
+++ b/files/fr/web/api/node/parentnode/index.md
@@ -9,50 +9,47 @@ tags:
   - parent
 translation_of: Web/API/Node/parentNode
 ---
-<p>{{APIRef("DOM")}}</p>
+{{APIRef("DOM")}}
 
-<p>La propriété en lecture seule <strong>parentNode</strong> renvoie le parent du nœud spécifié dans l'arborescence de DOM .</p>
+La propriété en lecture seule **parentNode** renvoie le parent du nœud spécifié dans l'arborescence de DOM .
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>parentNode</em> = <em>node</em>.parentNode</pre>
+    parentNode = node.parentNode
 
-<p><code>parentNode</code> est l'élément parent du nœud courant. Le parent d'un élément est un nœud <code>Element</code> , un nœud <code>Document</code> ou un nœud <code>DocumentFragment</code> .</p>
+`parentNode` est l'élément parent du nœud courant. Le parent d'un élément est un nœud `Element` , un nœud `Document` ou un nœud `DocumentFragment` .
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush:js">if (node.parentNode) {
-  // supprime un noeud  de l'arbre, 
+```js
+if (node.parentNode) {
+  // supprime un noeud  de l'arbre,
   // sauf s'il a déjà été supprimé
   node.parentNode.removeChild(node);
-}</pre>
+}
+```
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p>Les <a href="/en-US/docs/DOM/Node.nodeType">noeuds </a><code>Document</code> et <code>DocumentFragment</code> ne peuvent jamais avoir de parent, alors  <code>parentNode</code>  retournera toujours <code>null</code> .</p>
+Les [noeuds ](/en-US/docs/DOM/Node.nodeType)`Document` et `DocumentFragment` ne peuvent jamais avoir de parent, alors  `parentNode`  retournera toujours `null` .
 
-<p> Il renvoie également <code>null</code> si le nœud vient d'être créé et n'est pas encore attaché à l'arbre.</p>
+Il renvoie également `null` si le nœud vient d'être créé et n'est pas encore attaché à l'arbre.
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Node.parentNode")}}</p>
+{{Compat("api.Node.parentNode")}}
 
-<h2 id="Spécification">Spécification</h2>
-</div>
+## Spécification
 
-<ul>
- <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1060184317">DOM Level 2 Core: Node.parentNode</a></li>
- <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-1060184317">DOM Level 3 Core: Node.parentNode</a></li>
-</ul>
+- [DOM Level 2 Core: Node.parentNode](http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1060184317)
+- [DOM Level 3 Core: Node.parentNode](http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-1060184317)
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{Domxref("Node.firstChild")}}</li>
- <li>{{Domxref("Node.lastChild")}}</li>
- <li>{{Domxref("Node.childNodes")}}</li>
- <li>{{Domxref("Node.nextSibling")}}</li>
- <li>{{Domxref("Node.parentElement")}}</li>
- <li>{{Domxref("Node.previousSibling")}}</li>
- <li>{{Domxref("Node.removeChild")}}</li>
-</ul>
\ No newline at end of file
+- {{Domxref("Node.firstChild")}}
+- {{Domxref("Node.lastChild")}}
+- {{Domxref("Node.childNodes")}}
+- {{Domxref("Node.nextSibling")}}
+- {{Domxref("Node.parentElement")}}
+- {{Domxref("Node.previousSibling")}}
+- {{Domxref("Node.removeChild")}}
diff --git a/files/fr/web/api/node/previoussibling/index.md b/files/fr/web/api/node/previoussibling/index.md
index 31e02f5c7a..4b1e499e59 100644
--- a/files/fr/web/api/node/previoussibling/index.md
+++ b/files/fr/web/api/node/previoussibling/index.md
@@ -8,49 +8,46 @@ tags:
   - Propriétés
 translation_of: Web/API/Node/previousSibling
 ---
-<p>{{APIRef("DOM")}}</p>
+{{APIRef("DOM")}}
 
-<p>La propriété en lecture seule  <code><strong>Node.previousSibling</strong></code> renvoie le nœud (<code>node</code>) précédant immédiatement le nœud courant dans la liste {{domxref("Node.childNodes", "childNodes")}} de son parent, ou <code>null</code> s'il s'agit du premier nœud de la liste.</p>
+La propriété en lecture seule  **`Node.previousSibling`** renvoie le nœud (`node`) précédant immédiatement le nœud courant dans la liste {{domxref("Node.childNodes", "childNodes")}} de son parent, ou `null` s'il s'agit du premier nœud de la liste.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var>previousNode</var> = <em>node</em>.previousSibling;
-</pre>
+    previousNode = node.previousSibling;
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush:js">// &lt;a&gt;&lt;b1 id="b1"/&gt;&lt;b2 id="b2"/&gt;&lt;/a&gt;
+```js
+// <a><b1 id="b1"/><b2 id="b2"/></a>
 
 alert(document.getElementById("b1").previousSibling); // null
-alert(document.getElementById("b2").previousSibling.id); // "b1"</pre>
+alert(document.getElementById("b2").previousSibling.id); // "b1"
+```
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p></p><p>Les navigateurs basés sur Gecko insèrent des nœuds texte dans un document pour représenter des espaces
-    vides dans le balisage source. Par conséquent, un nœud obtenu par exemple via <a href="/fr/docs/Web/API/Node/firstChild"><code>Node.firstChild</code></a> ou
-    <a href="/fr/docs/Web/API/Node/previousSibling" title='{{APIRef("DOM")}}'><code>Node.previousSibling</code></a> peut faire référence à un nœud texte contenant des espaces plutôt qu'au véritable élément
-    que l'auteur comptait obtenir.</p>
+Les navigateurs basés sur Gecko insèrent des nœuds texte dans un document pour représenter des espaces
+vides dans le balisage source. Par conséquent, un nœud obtenu par exemple via [`Node.firstChild`](/fr/docs/Web/API/Node/firstChild) ou
+[`Node.previousSibling`](/fr/docs/Web/API/Node/previousSibling "{{APIRef("DOM")}}") peut faire référence à un nœud texte contenant des espaces plutôt qu'au véritable élément
+que l'auteur comptait obtenir.
 
-    <p>Consultez <a href="/fr/docs/Gestion_des_espaces_dans_le_DOM">Gestion des espaces dans le DOM</a>
-    et <a href="http://www.w3.org/DOM/faq.html#emptytext" rel="noopener"><i>Why are some Text nodes empty?</i>
-    dans la FAQ DOM 3 du W3C</a> pour plus d'informations.</p><p></p>
+Consultez [Gestion des espaces dans le DOM](/fr/docs/Gestion_des_espaces_dans_le_DOM)
+et [_Why are some Text nodes empty?_
+dans la FAQ DOM 3 du W3C](http://www.w3.org/DOM/faq.html#emptytext) pour plus d'informations.
 
-<p>L'opération inverse <code><a href="/fr/docs/Web/API/Node/nextSibling">Node.nextSibling</a></code> permet de rechercher l'élément suivant.</p>
+L'opération inverse [`Node.nextSibling`](/fr/docs/Web/API/Node/nextSibling) permet de rechercher l'élément suivant.
 
-<h2 id="Sp.C3.A9cification">Spécifications</h2>
+## Spécifications
 
-<ul>
- <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#attribute-previousSibling">DOM Level 1 Core: previousSibling</a> <small>— <a href="http://xmlfr.org/w3c/TR/REC-DOM-Level-1/level-one-core.html#attribute-previousSibling">traduction</a> (non normative)</small></li>
- <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-640FB3C8">DOM Level 2 Core: previousSibling</a> <small>— <a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-640FB3C8">traduction</a> (non normative)</small></li>
- <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-640FB3C8">DOM Level 3 Core: previousSibling</a></li>
-</ul>
+- [DOM Level 1 Core: previousSibling](http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#attribute-previousSibling) — [traduction](http://xmlfr.org/w3c/TR/REC-DOM-Level-1/level-one-core.html#attribute-previousSibling) (non normative)
+- [DOM Level 2 Core: previousSibling](http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-640FB3C8) — [traduction](http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-640FB3C8) (non normative)
+- [DOM Level 3 Core: previousSibling](http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-640FB3C8)
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
+{{Compat("api.Node.previousSibling")}}
 
+## Voir aussi
 
-<p>{{Compat("api.Node.previousSibling")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<p>{{domxref("Node.nextSibling")}}</p>
+{{domxref("Node.nextSibling")}}
diff --git a/files/fr/web/api/node/removechild/index.md b/files/fr/web/api/node/removechild/index.md
index 051a65c4e6..727ad635d9 100644
--- a/files/fr/web/api/node/removechild/index.md
+++ b/files/fr/web/api/node/removechild/index.md
@@ -10,57 +10,53 @@ tags:
   - Suppression
 translation_of: Web/API/Node/removeChild
 ---
-<p>{{ ApiRef("DOM") }}</p>
+{{ ApiRef("DOM") }}
 
-<p>La méthode <code><strong>Node.removeChild()</strong></code> retire un nœud enfant de l'arbre DOM et retourne le nœud retiré.</p>
+La méthode **`Node.removeChild()`** retire un nœud enfant de l'arbre DOM et retourne le nœud retiré.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>var oldChild</em> = <em>node</em>.removeChild(<em>child</em>);
-<strong>OR</strong>
-<em>node</em>.removeChild(<em>child</em>);
-</pre>
+    var oldChild = node.removeChild(child);
+    OR
+    node.removeChild(child);
 
-<ul>
- <li><code>child</code> est le nœud enfant à retirer du DOM.</li>
- <li><code>node </code>est le nœud parent de <code>child</code>.</li>
- <li><code>oldchild</code> conserve une référence au nœud enfant retiré. <code>oldchild</code> === <code>child</code>.</li>
-</ul>
+- `child` est le nœud enfant à retirer du DOM.
+- `node `est le nœud parent de `child`.
+- `oldchild` conserve une référence au nœud enfant retiré. `oldchild` === `child`.
 
-<p>Le nœud enfant retiré existe toujours en mémoire, mais ne fait plus partie du DOM. Avec la première syntaxe, il est possible de réutiliser ultérieurement dans le code le nœud retiré, à l'aide de la référence à l'objet <code>ancienEnfant</code><em>. </em></p>
+Le nœud enfant retiré existe toujours en mémoire, mais ne fait plus partie du DOM. Avec la première syntaxe, il est possible de réutiliser ultérieurement dans le code le nœud retiré, à l'aide de la référence à l'objet `ancienEnfant`_._
 
-<p>Avec la seconde forme montrée en exemple, aucune référence à l'objet <code>ancienEnfant</code> n'est conservée ; ainsi, en supposant que votre code n'a conservé nulle part ailleurs cette référence à ce nœud, il devient immédiatement inutilisable et irrécupérable, et sera en général <a href="/fr/docs/Web/JavaScript/Gestion_de_la_m%C3%A9moire">automatiquement supprimé</a> de la mémoire après un court moment.</p>
+Avec la seconde forme montrée en exemple, aucune référence à l'objet `ancienEnfant` n'est conservée ; ainsi, en supposant que votre code n'a conservé nulle part ailleurs cette référence à ce nœud, il devient immédiatement inutilisable et irrécupérable, et sera en général [automatiquement supprimé](/fr/docs/Web/JavaScript/Gestion_de_la_m%C3%A9moire) de la mémoire après un court moment.
 
-<p>Si  <code>child</code> n'est pas un enfant du noeud  <code>element</code>, la méthode provoque une exception. Une exception sera aussi lancée dans la cas où le nœud <code>enfant </code>est bien un enfant du nœud <code>element </code>au moment de l'appel à la méthode, mais qu'il a été retiré par un gestionnaire d'événement invoqué dans la cadre d'une tentative de suppression du nœud <code>element </code>(comme <em>blur</em>).</p>
+Si  `child` n'est pas un enfant du noeud  `element`, la méthode provoque une exception. Une exception sera aussi lancée dans la cas où le nœud `enfant `est bien un enfant du nœud `element `au moment de l'appel à la méthode, mais qu'il a été retiré par un gestionnaire d'événement invoqué dans la cadre d'une tentative de suppression du nœud `element `(comme *blur*).
 
-<p>La méthode peut lever une exception de deux façons :</p>
+La méthode peut lever une exception de deux façons :
 
-<ol>
- <li>Si <code>enfant</code> était bien un enfant de element et qu'il existe donc dans le DOM, mais qu'il a déjà été retiré, la méthode provoque l'exception suivante :<code>​​</code><br>
-  <code>Uncaught NotFoundError: Failed to execute 'removeChild' on 'element': The node to be removed is not a child of this node</code>.</li>
- <li>si l'<code>enfant</code> n'existe pas dans le DOM de la page, la méthode provoque l'exception suivante :<br>
-  <code>Uncaught TypeError: Failed to execute 'removeChild' on 'element': parameter 1 is not of type 'Node'.</code></li>
-</ol>
+1.  Si `enfant` était bien un enfant de element et qu'il existe donc dans le DOM, mais qu'il a déjà été retiré, la méthode provoque l'exception suivante :`​​`
+    `Uncaught NotFoundError: Failed to execute 'removeChild' on 'element': The node to be removed is not a child of this node`.
+2.  si l'`enfant` n'existe pas dans le DOM de la page, la méthode provoque l'exception suivante :
+    `Uncaught TypeError: Failed to execute 'removeChild' on 'element': parameter 1 is not of type 'Node'.`
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: html">&lt;!--Sample HTML code--&gt;
-&lt;div id="top" align="center"&gt; &lt;/div&gt;
+```html
+<!--Sample HTML code-->
+<div id="top" align="center"> </div>
 
-&lt;script type="text/javascript"&gt;
+<script type="text/javascript">
       var top = document.getElementById("top");
       var nested = document.getElementById("nested");
 
       var garbage = top.removeChild(nested);    //Cas test 2: la méthode lance l'exception (2)
 
-&lt;/script&gt;
+</script>
 
-&lt;!--Sample HTML code--&gt;
-&lt;div id="top" align="center"&gt;
- &lt;div id="nested"&gt;&lt;/div&gt;
-&lt;/div&gt;
+<!--Sample HTML code-->
+<div id="top" align="center">
+ <div id="nested"></div>
+</div>
 
-&lt;script type="text/javascript"&gt;
+<script type="text/javascript">
       var top = document.getElementById("top");
       var nested = document.getElementById("nested");
 
@@ -69,44 +65,48 @@ translation_of: Web/API/Node/removeChild
       // ......
       garbage = top.removeChild(nested);   // Cas test 1 : la méthode dans le second appel ici, lance l'exception (1)
 
-&lt;/script&gt;</pre>
+</script>
+```
 
-<pre class="brush: html">&lt;!--Sample HTML code--&gt;
+```html
+<!--Sample HTML code-->
 
-&lt;div id="top" align="center"&gt;
-  &lt;div id="nested"&gt;&lt;/div&gt;
-&lt;/div&gt;</pre>
+<div id="top" align="center">
+  <div id="nested"></div>
+</div>
+```
 
-<pre class="brush:js">// Supprime un élément spécifié quand son noeud parent est connu
+```js
+// Supprime un élément spécifié quand son noeud parent est connu
 var d = document.getElementById("top");
 var d_nested = document.getElementById("nested");
-var throwawayNode = d.removeChild(d_nested);</pre>
+var throwawayNode = d.removeChild(d_nested);
+```
 
-<pre class="brush:js">// Supprime un élément spécifié sans avoir à spécifier son noeud parent
+```js
+// Supprime un élément spécifié sans avoir à spécifier son noeud parent
 var node = document.getElementById("nested");
 if (node.parentNode) {
   node.parentNode.removeChild(node);
-}</pre>
+}
+```
 
-<pre class="brush:js">
+```js
 // Supprime tous les enfant d'un élément
 var element = document.getElementById("top");
 while (element.firstChild) {
   element.removeChild(element.firstChild);
-}</pre>
+}
+```
 
-<h2 id="Sp.C3.A9cification">Spécifications</h2>
+## Spécifications
 
-<ul>
- <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-removeChild">DOM Level 1 Core: removeChild</a> — <a href="http://xmlfr.org/w3c/TR/REC-DOM-Level-1/level-one-core.html#method-removeChild">traduction en français</a> (non normative)</li>
- <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1734834066">DOM Level 2 Core: removeChild</a> — <a href="http://www.yoyodesign.org/doc/w3c/dom2/core/core.html#ID-1734834066">traduction en français</a> (non normative)</li>
- <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-1734834066">DOM Level 3 Core: removeChild</a></li>
-</ul>
+- [DOM Level 1 Core: removeChild](http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-removeChild) — [traduction en français](http://xmlfr.org/w3c/TR/REC-DOM-Level-1/level-one-core.html#method-removeChild) (non normative)
+- [DOM Level 2 Core: removeChild](http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1734834066) — [traduction en français](http://www.yoyodesign.org/doc/w3c/dom2/core/core.html#ID-1734834066) (non normative)
+- [DOM Level 3 Core: removeChild](http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-1734834066)
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("Node.replaceChild")}}</li>
- <li>{{domxref("Node.parentNode")}}</li>
- <li>{{domxref("ChildNode.remove")}}</li>
-</ul>
+- {{domxref("Node.replaceChild")}}
+- {{domxref("Node.parentNode")}}
+- {{domxref("ChildNode.remove")}}
diff --git a/files/fr/web/api/node/replacechild/index.md b/files/fr/web/api/node/replacechild/index.md
index 3cdf5aa950..492baac6d1 100644
--- a/files/fr/web/api/node/replacechild/index.md
+++ b/files/fr/web/api/node/replacechild/index.md
@@ -10,27 +10,25 @@ tags:
   - Remplacement
 translation_of: Web/API/Node/replaceChild
 ---
-<p>{{APIRef("DOM")}}</p>
+{{APIRef("DOM")}}
 
-<p>La méthode <strong><code>Node.replaceChild()</code></strong> remplace un nœud enfant du noeud spécifié par un autre nœud.</p>
+La méthode **`Node.replaceChild()`** remplace un nœud enfant du noeud spécifié par un autre nœud.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>replacedNode</em> = <em>parentNode</em>.replaceChild(<em>newChild</em>, <em>oldChild</em>);
-</pre>
+    replacedNode = parentNode.replaceChild(newChild, oldChild);
 
-<ul>
- <li><code>newChild</code> est le nouveau nœud qui remplacera <code>oldChild</code>. S'il existe déjà dans le DOM, il sera d'abord enlevé.</li>
- <li><code>oldChild</code> est le nœud existant à remplacer.</li>
- <li><code>replaceNode</code> est le nœud remplacé. C'est le même nœud que <code>oldChild</code>.</li>
-</ul>
+- `newChild` est le nouveau nœud qui remplacera `oldChild`. S'il existe déjà dans le DOM, il sera d'abord enlevé.
+- `oldChild` est le nœud existant à remplacer.
+- `replaceNode` est le nœud remplacé. C'est le même nœud que `oldChild`.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush:js">// Étant donné que :
-// &lt;div&gt;
-//   &lt;span id="childSpan"&gt;foo bar&lt;/span&gt;
-// &lt;/div&gt;
+```js
+// Étant donné que :
+// <div>
+//   <span id="childSpan">foo bar</span>
+// </div>
 
 // Crée un nœud d'élément vide
 // sans ID, sans attributs et sans contenu
@@ -53,38 +51,22 @@ var parentDiv = sp2.parentNode;
 parentDiv.replaceChild(sp1, sp2);
 
 // Résultat :
-// &lt;div&gt;
-//   &lt;span id="newSpan"&gt;nouvel élément span de remplacement.&lt;/span&gt;
-// &lt;/div&gt;
-</pre>
-
-<h2 id="Specifications">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("DOM WHATWG", "#dom-node-replacechild", "Node: replaceChild")}}
-			</td>
-			<td>{{Spec2("DOM WHATWG")}}</td>
-			<td></td>
-		</tr>
-	</tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Node.replaceChild")}}</p>
-
-<h2 id="See_also">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("Node.removeChild")}}</li>
- <li>{{domxref("ChildNode.replaceWith")}}</li>
-</ul>
+// <div>
+//   <span id="newSpan">nouvel élément span de remplacement.</span>
+// </div>
+```
+
+## Spécifications
+
+| Spécification                                                                                        | Statut                           | Commentaire |
+| ---------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- |
+| {{SpecName("DOM WHATWG", "#dom-node-replacechild", "Node: replaceChild")}} | {{Spec2("DOM WHATWG")}} |             |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Node.replaceChild")}}
+
+## Voir aussi
+
+- {{domxref("Node.removeChild")}}
+- {{domxref("ChildNode.replaceWith")}}
diff --git a/files/fr/web/api/node/textcontent/index.md b/files/fr/web/api/node/textcontent/index.md
index 63e892d5b6..0b195eaa7a 100644
--- a/files/fr/web/api/node/textcontent/index.md
+++ b/files/fr/web/api/node/textcontent/index.md
@@ -8,61 +8,56 @@ tags:
   - Propriétés
 translation_of: Web/API/Node/textContent
 ---
-<p>{{APIRef("DOM")}}</p>
+{{APIRef("DOM")}}
 
-<p>La propriété <code><strong>Node.textContent</strong></code>  représente le contenu textuel d'un nœud et de ses descendants.</p>
+La propriété **`Node.textContent`**  représente le contenu textuel d'un nœud et de ses descendants.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var <em>text</em> = element.textContent;
-element.textContent = "ceci est un simple exemple de texte";
-</pre>
+    var text = element.textContent;
+    element.textContent = "ceci est un simple exemple de texte";
 
-<h2 id="Notes">Description</h2>
+## Description
 
-<ul>
- <li><code>textContent</code> renvoie <code>null</code> si l'élément est un <a href="/fr/docs/Web/API/document">document</a>, un type de document (doctype) ou une notation. Pour saisir toutes les données textuelles et CDATA pour l'ensemble du document, on peut utiliser <code> <a href="/fr/docs/Web/API/document/documentElement">document.documentElement</a>.textContent</code> .</li>
- <li>Si le nœud est une section CDATA, un commentaire, une instruction de traitement ou un nœud texte, <code>textContent</code> renvoie le texte à l'intérieur du nœud (la valeur <a href="/fr/docs/Web/API/Node/nodeValue">nodeValue</a>).</li>
- <li>Pour les autres types de nœuds, <code>textContent</code> renvoie la concaténation des valeurs de propriété <code>textContent</code> de chaque nœud enfant, à l'exception des commentaires et nœuds d'instructions de traitement. Si le nœud n'a pas d'enfants, il s'agira d'une chaîne vide.</li>
- <li>En définissant cette propriété sur un nœud, on enlève tous ses enfants et ceux-ci sont remplacés par un seul nœud texte avec la valeur donnée.</li>
-</ul>
+- `textContent` renvoie `null` si l'élément est un [document](/fr/docs/Web/API/document), un type de document (doctype) ou une notation. Pour saisir toutes les données textuelles et CDATA pour l'ensemble du document, on peut utiliser `document.documentElement.textContent` .
+- Si le nœud est une section CDATA, un commentaire, une instruction de traitement ou un nœud texte, `textContent` renvoie le texte à l'intérieur du nœud (la valeur [nodeValue](/fr/docs/Web/API/Node/nodeValue)).
+- Pour les autres types de nœuds, `textContent` renvoie la concaténation des valeurs de propriété `textContent` de chaque nœud enfant, à l'exception des commentaires et nœuds d'instructions de traitement. Si le nœud n'a pas d'enfants, il s'agira d'une chaîne vide.
+- En définissant cette propriété sur un nœud, on enlève tous ses enfants et ceux-ci sont remplacés par un seul nœud texte avec la valeur donnée.
 
-<h3 id="Différences_avec_innerText">Différences avec <code>innerText</code></h3>
+### Différences avec `innerText`
 
-<p>Internet Explorer a introduit une propriété {{domxref("node.innerText")}}. L'intention est similaire mais comporte les différences suivantes :</p>
+Internet Explorer a introduit une propriété {{domxref("node.innerText")}}. L'intention est similaire mais comporte les différences suivantes :
 
-<ul>
- <li><code>textContent</code> récupère le contenu de tous les éléments, y compris {{HTMLElement("script")}} et {{HTMLElement("style")}}, ce qui n'est pas le cas de <code>innerText</code>.</li>
- <li><code>innerText</code> prend en compte le style de l'élément et ne retournera rien pour les éléments cachés. Aussi, il déclenchera un reflow à l'inverse de <code>textContent</code>.</li>
- <li>Comme <code>innerText</code> reconnaît le style CSS, il déclenchera une refusion (<em>reflow</em>), alors que <code>textContent</code> ne le fera pas.</li>
- <li>Contrairement à <code>textContent</code>, la modification <code>innerText</code> dans Internet Explorer (jusqu'à la version 11 incluse), non seulement supprime les nœuds enfants de l'élément, mais détruit aussi définitivement tout nœud de texte descendant (il est donc impossible d'insérer à nouveau des nœuds dans un autre élément ou dans le même élément) .</li>
-</ul>
+- `textContent` récupère le contenu de tous les éléments, y compris {{HTMLElement("script")}} et {{HTMLElement("style")}}, ce qui n'est pas le cas de `innerText`.
+- `innerText` prend en compte le style de l'élément et ne retournera rien pour les éléments cachés. Aussi, il déclenchera un reflow à l'inverse de `textContent`.
+- Comme `innerText` reconnaît le style CSS, il déclenchera une refusion (_reflow_), alors que `textContent` ne le fera pas.
+- Contrairement à `textContent`, la modification `innerText` dans Internet Explorer (jusqu'à la version 11 incluse), non seulement supprime les nœuds enfants de l'élément, mais détruit aussi définitivement tout nœud de texte descendant (il est donc impossible d'insérer à nouveau des nœuds dans un autre élément ou dans le même élément) .
 
-<h3 id="Différences_avec_innerHTML">Différences avec <code>innerHTML</code></h3>
+### Différences avec `innerHTML`
 
-<p>{{domxref("Element.innerHTML")}} renvoie le HTML comme son nom l'indique. Souvent, pour récupérer ou écrire du texte dans un élément, les utilisateurs utilisent <code>innerHTML</code>. Cependant, <code>textContent</code> a souvent de meilleures performances car le texte n'est pas analysé en HTML. De plus, l'utilisation de <code>textContent</code> peut empêcher les attaques XSS.</p>
+{{domxref("Element.innerHTML")}} renvoie le HTML comme son nom l'indique. Souvent, pour récupérer ou écrire du texte dans un élément, les utilisateurs utilisent `innerHTML`. Cependant, `textContent` a souvent de meilleures performances car le texte n'est pas analysé en HTML. De plus, l'utilisation de `textContent` peut empêcher les attaques XSS.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="eval">// Étant donné le fragment de HTML suivant :
-//   &lt;div id="divA"&gt;Ceci est un &lt;span&gt;exemple de&lt;/span&gt; texte&lt;/div&gt;
+    // Étant donné le fragment de HTML suivant :
+    //   <div id="divA">Ceci est un <span>exemple de</span> texte</div>
 
-// On obtient le contenu textuel :
-var text = document.getElementById("divA").textContent;
-// |text| vaut "Ceci est un exemple de texte".
+    // On obtient le contenu textuel :
+    var text = document.getElementById("divA").textContent;
+    // |text| vaut "Ceci est un exemple de texte".
 
-// On définit le contenu textuel :
-document.getElementById("divA").textContent = "Ceci est un exemple de texte";
-// Le HTML pour divA est à présent &lt;div id="divA"&gt;Ceci est un exemple de texte&lt;/div&gt;
-</pre>
+    // On définit le contenu textuel :
+    document.getElementById("divA").textContent = "Ceci est un exemple de texte";
+    // Le HTML pour divA est à présent <div id="divA">Ceci est un exemple de texte</div>
 
-<h2 id="Polyfill_pour_IE8">Polyfill pour IE8</h2>
+## Polyfill pour IE8
 
-<pre class="brush: js">// Source: Eli Grey @ http://eligrey.com/blog/post/textcontent-in-ie8
+```js
+// Source: Eli Grey @ http://eligrey.com/blog/post/textcontent-in-ie8
 if (Object.defineProperty
-  &amp;&amp; Object.getOwnPropertyDescriptor
-  &amp;&amp; Object.getOwnPropertyDescriptor(Element.prototype, "textContent")
-  &amp;&amp; !Object.getOwnPropertyDescriptor(Element.prototype, "textContent").get) {
+  && Object.getOwnPropertyDescriptor
+  && Object.getOwnPropertyDescriptor(Element.prototype, "textContent")
+  && !Object.getOwnPropertyDescriptor(Element.prototype, "textContent").get) {
   (function() {
     var innerText = Object.getOwnPropertyDescriptor(Element.prototype, "innerText");
     Object.defineProperty(Element.prototype, "textContent",
@@ -78,48 +73,21 @@ if (Object.defineProperty
      }
    );
   })();
-}</pre>
-
-<ul>
-</ul>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-
-
-<p>{{Compat("api.Node.textContent")}}</p>
-
-<h2 id="Sp.C3.A9cification">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG','#dom-node-textcontent','Node.textContent')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Pas de changement de DOM4</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM4','#dom-node-textcontent','Node.textContent')}}</td>
-   <td>{{Spec2('DOM4')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM3 Core','core.html#Node3-textContent','Node.textContent')}}</td>
-   <td>{{Spec2('DOM3 Core')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="http://perfectionkills.com/the-poor-misunderstood-innerText/">Plus sur les différences entre <code>innerText</code> et <code>textContent</code></a> (blog post en)</li>
-</ul>
-
-<p> </p>
+}
+```
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Node.textContent")}}
+
+## Spécifications
+
+| Spécification                                                                                        | Statut                           | Commentaire               |
+| ---------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------- |
+| {{SpecName('DOM WHATWG','#dom-node-textcontent','Node.textContent')}}         | {{Spec2('DOM WHATWG')}} | Pas de changement de DOM4 |
+| {{SpecName('DOM4','#dom-node-textcontent','Node.textContent')}}                 | {{Spec2('DOM4')}}         |                           |
+| {{SpecName('DOM3 Core','core.html#Node3-textContent','Node.textContent')}} | {{Spec2('DOM3 Core')}}     | Définition initiale.      |
+
+## Voir aussi
+
+- [Plus sur les différences entre `innerText` et `textContent`](http://perfectionkills.com/the-poor-misunderstood-innerText/) (blog post en)
diff --git a/files/fr/web/api/nodefilter/acceptnode/index.md b/files/fr/web/api/nodefilter/acceptnode/index.md
index 58a61e0e11..e147183880 100644
--- a/files/fr/web/api/nodefilter/acceptnode/index.md
+++ b/files/fr/web/api/nodefilter/acceptnode/index.md
@@ -10,50 +10,66 @@ tags:
   - Noeuds
 translation_of: Web/API/NodeFilter/acceptNode
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p>La méthode <strong><code>NodeFilter.acceptNode()</code></strong> renvoie un <code>unsigned short</code> (<em>non signé court</em>) qui sera utilisé pour dire si un {{domxref("Node")}} donné peut être accepté ou non par l'algorithme d'itération {{ domxref("NodeIterator") }} ou {{ domxref("TreeWalker") }}. Cette méthode doit être écrite par l'utilisateur du <code>NodeFilter</code>. Les valeurs retournées possibles sont :</p>
+La méthode **`NodeFilter.acceptNode()`** renvoie un `unsigned short` (_non signé court_) qui sera utilisé pour dire si un {{domxref("Node")}} donné peut être accepté ou non par l'algorithme d'itération {{ domxref("NodeIterator") }} ou {{ domxref("TreeWalker") }}. Cette méthode doit être écrite par l'utilisateur du `NodeFilter`. Les valeurs retournées possibles sont :
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <td class="header">Constante</td>
-   <td class="header">Description</td>
-  </tr>
-  <tr>
-   <td><code>NodeFilter.FILTER_ACCEPT</code></td>
-   <td>Valeur renvoyée par la méthode {{ domxref("NodeFilter.acceptNode()") }} quand un noeud doit être accepté .</td>
-  </tr>
-  <tr>
-   <td><code>NodeFilter.FILTER_REJECT</code></td>
-   <td>Valeur à retourner par la méthode {{ domxref("NodeFilter.acceptNode()") }} quand le noeud doit être rejeté. Les enfants des noeuds rejetés ne sont pas visités par les objets {{ domxref("NodeIterator") }} ou {{ domxref("TreeWalker") }} ; cette valeur est traitée comme "ignorer ce noeud et tous ses enfants".</td>
-  </tr>
-  <tr>
-   <td><code>NodeFilter.FILTER_SKIP</code></td>
-   <td>Valeur à retourner par {{ domxref("NodeFilter.acceptNode()") }} pour que les noeuds soient ignorés par les objets {{ domxref("NodeIterator") }} ou {{ domxref("TreeWalker") }}. Les enfants des noeuds ignorés sont toujours considérés. Cela équivaut à "ignorer ce noeud mais pas ses enfants".</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <td class="header">Constante</td>
+      <td class="header">Description</td>
+    </tr>
+    <tr>
+      <td><code>NodeFilter.FILTER_ACCEPT</code></td>
+      <td>
+        Valeur renvoyée par la méthode
+        {{ domxref("NodeFilter.acceptNode()") }} quand un noeud doit
+        être accepté .
+      </td>
+    </tr>
+    <tr>
+      <td><code>NodeFilter.FILTER_REJECT</code></td>
+      <td>
+        Valeur à retourner par la méthode
+        {{ domxref("NodeFilter.acceptNode()") }} quand le noeud doit
+        être rejeté. Les enfants des noeuds rejetés ne sont pas visités par les
+        objets {{ domxref("NodeIterator") }} ou
+        {{ domxref("TreeWalker") }} ; cette valeur est traitée comme
+        "ignorer ce noeud et tous ses enfants".
+      </td>
+    </tr>
+    <tr>
+      <td><code>NodeFilter.FILTER_SKIP</code></td>
+      <td>
+        Valeur à retourner par
+        {{ domxref("NodeFilter.acceptNode()") }} pour que les noeuds
+        soient ignorés par les objets {{ domxref("NodeIterator") }}
+        ou {{ domxref("TreeWalker") }}. Les enfants des noeuds ignorés
+        sont toujours considérés. Cela équivaut à "ignorer ce noeud mais pas ses
+        enfants".
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<p>La fonction doit renvoyer <code>NodeFilter.FILTER_ACCEPT</code> qui pousse le TreeWalker à renvoyer le noeud, <code>NodeFilter.FILTER_REJECT</code> qui contraint le TreeWalker à ignorer le sous-arbre entier ou <code>NodeFilter.FILTER_SKIP</code>.</p>
+La fonction doit renvoyer `NodeFilter.FILTER_ACCEPT` qui pousse le TreeWalker à renvoyer le noeud, `NodeFilter.FILTER_REJECT` qui contraint le TreeWalker à ignorer le sous-arbre entier ou `NodeFilter.FILTER_SKIP`.
 
-<p>Le navigateur ne fournit aucun objet implémentant cette méthode. C'est l'utilisateur qui doit écrire un objet implémentant l'interface {{domxref("NodeFilter")}}, adapter la méthode <code>acceptNode()</code> à ses besoins et l'utiliser avec un objet {{domxref("TreeWalker")}} ou {{domxref("NodeIterator")}}.</p>
+Le navigateur ne fournit aucun objet implémentant cette méthode. C'est l'utilisateur qui doit écrire un objet implémentant l'interface {{domxref("NodeFilter")}}, adapter la méthode `acceptNode()` à ses besoins et l'utiliser avec un objet {{domxref("TreeWalker")}} ou {{domxref("NodeIterator")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>result<code> = </code></em><em>nodeFilter<code>.acceptNode(</code></em><em>node</em>)
-</pre>
+    result = nodeFilter.acceptNode(node)
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><em>node</em></dt>
- <dd>est un {{domxref("Node")}} (noeud) qui doit être vérifié avec le filtre.</dd>
-</dl>
+- _node_
+  - : est un {{domxref("Node")}} (noeud) qui doit être vérifié avec le filtre.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">var nodeIterator = document.createNodeIterator(
+```js
+var nodeIterator = document.createNodeIterator(
   // Noeud à utiliser comme racine
   document.getElementById('someId'),
 
@@ -79,38 +95,19 @@ var node;
 while ((node = iterator.nextNode())) {
   alert(node.data);
 }
-</pre>
+```
 
-<h2 id="Specification">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#nodeFilter', 'NodeFilter.acceptNode()')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Pas de changement depuis {{SpecName('DOM2 Traversal_Range')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-NodeFilter', 'NodeFilter.acceptNode()')}}</td>
-   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Spécifications
 
+| Spécification                                                                                                                            | Statut                                       | Commentaire                                                               |
+| ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | ------------------------------------------------------------------------- |
+| {{SpecName('DOM WHATWG', '#nodeFilter', 'NodeFilter.acceptNode()')}}                                             | {{Spec2('DOM WHATWG')}}             | Pas de changement depuis {{SpecName('DOM2 Traversal_Range')}} |
+| {{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-NodeFilter', 'NodeFilter.acceptNode()')}} | {{Spec2('DOM2 Traversal_Range')}} | Définition initiale.                                                      |
 
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.NodeFilter.acceptNode")}}</p>
+{{Compat("api.NodeFilter.acceptNode")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>L'interface à laquelle elle appartient : {{domxref("NodeFilter")}}.</li>
-</ul>
\ No newline at end of file
+- L'interface à laquelle elle appartient : {{domxref("NodeFilter")}}.
diff --git a/files/fr/web/api/nodefilter/index.md b/files/fr/web/api/nodefilter/index.md
index 17bab28ee1..c6eb155b62 100644
--- a/files/fr/web/api/nodefilter/index.md
+++ b/files/fr/web/api/nodefilter/index.md
@@ -11,51 +11,67 @@ tags:
   - Noeuds
 translation_of: Web/API/NodeFilter
 ---
-<div>{{APIRef("DOM")}}</div>
-
-<p>Une interface <strong><code>NodeFilter</code></strong> représente un objet utilisé pour filtrer les noeuds dans un {{ domxref("NodeIterator") }} ou {{ domxref("TreeWalker") }}. Ils ne savent rien du DOM ni comment traverser les nœuds ; ils savent juste comment évaluer un seul noeud par rapport au filtre fourni.</p>
-
-<div class="note">
-<p><strong>Note :</strong> Le navigateur ne fournit aucun objet implémentant cette interface. C'est l'utilisateur qui doit en écrire un, en adaptant la méthode <code>acceptNode()</code> en fonction des besoins et en l'utilisant avec un objet {{domxref("TreeWalker")}} ou {{domxref("NodeIterator")}}.</p>
-</div>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<p><em>Cette interface n'implémente ni n'hérite d'aucune propriété.</em></p>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<p><em>Cette interface n'hérite d'aucune méthode.</em></p>
-
-<dl>
- <dt>{{domxref("NodeFilter.acceptNode()")}}</dt>
- <dd>Renvoie un <code>unsigned short</code> (<em>non signé court</em>) qui sera utilisé pour dire si un {{domxref("Node")}} donné peut être accepté ou non par l'algorithme d'itération {{ domxref("NodeIterator") }} ou {{ domxref("TreeWalker") }}. Cette méthode doit être écrite par l'utilisateur du <code>NodeFilter</code>. Les valeurs retournées possibles sont :
- <table class="standard-table">
-  <tbody>
-   <tr>
-    <td class="header">Constante</td>
-    <td class="header">Description</td>
-   </tr>
-   <tr>
-    <td><code>FILTER_ACCEPT</code></td>
-    <td>Valeur renvoyée par la méthode {{ domxref("NodeFilter.acceptNode()") }} quand un noeud doit être accepté.</td>
-   </tr>
-   <tr>
-    <td><code>FILTER_REJECT</code></td>
-    <td>Valeur à retourner par la méthode {{ domxref("NodeFilter.acceptNode()") }} quand le noeud doit être rejeté. Pour {{ domxref("TreeWalker") }}, les noeuds enfants sont aussi rejetés. Pour {{ domxref("NodeIterator") }}, cette option est équivalente à FILTER_SKIP.</td>
-   </tr>
-   <tr>
-    <td><code>FILTER_SKIP</code></td>
-    <td>Valeur à retourner par {{ domxref("NodeFilter.acceptNode()") }} pour que les noeuds soient ignorés par {{ domxref("NodeIterator") }} ou {{ domxref("TreeWalker") }}. Les enfants des noeuds ignorés sont toujours considérés. Cela équivaut à "ignorer ce noeud mais pas ses enfants".</td>
-   </tr>
-  </tbody>
- </table>
- </dd>
-</dl>
-
-<h2 id="Exemple">Exemple</h2>
-
-<pre class="brush: js">var nodeIterator = document.createNodeIterator(
+{{APIRef("DOM")}}
+
+Une interface **`NodeFilter`** représente un objet utilisé pour filtrer les noeuds dans un {{ domxref("NodeIterator") }} ou {{ domxref("TreeWalker") }}. Ils ne savent rien du DOM ni comment traverser les nœuds ; ils savent juste comment évaluer un seul noeud par rapport au filtre fourni.
+
+> **Note :** Le navigateur ne fournit aucun objet implémentant cette interface. C'est l'utilisateur qui doit en écrire un, en adaptant la méthode `acceptNode()` en fonction des besoins et en l'utilisant avec un objet {{domxref("TreeWalker")}} ou {{domxref("NodeIterator")}}.
+
+## Propriétés
+
+_Cette interface n'implémente ni n'hérite d'aucune propriété._
+
+## Méthodes
+
+_Cette interface n'hérite d'aucune méthode._
+
+- {{domxref("NodeFilter.acceptNode()")}}
+
+  - : Renvoie un `unsigned short` (_non signé court_) qui sera utilisé pour dire si un {{domxref("Node")}} donné peut être accepté ou non par l'algorithme d'itération {{ domxref("NodeIterator") }} ou {{ domxref("TreeWalker") }}. Cette méthode doit être écrite par l'utilisateur du `NodeFilter`. Les valeurs retournées possibles sont :
+
+    <table class="standard-table">
+      <tbody>
+        <tr>
+          <td class="header">Constante</td>
+          <td class="header">Description</td>
+        </tr>
+        <tr>
+          <td><code>FILTER_ACCEPT</code></td>
+          <td>
+            Valeur renvoyée par la méthode
+            {{ domxref("NodeFilter.acceptNode()") }} quand un noeud doit
+            être accepté.
+          </td>
+        </tr>
+        <tr>
+          <td><code>FILTER_REJECT</code></td>
+          <td>
+            Valeur à retourner par la méthode
+            {{ domxref("NodeFilter.acceptNode()") }} quand le noeud doit
+            être rejeté. Pour {{ domxref("TreeWalker") }}, les noeuds
+            enfants sont aussi rejetés. Pour
+            {{ domxref("NodeIterator") }}, cette option est équivalente à
+            FILTER_SKIP.
+          </td>
+        </tr>
+        <tr>
+          <td><code>FILTER_SKIP</code></td>
+          <td>
+            Valeur à retourner par
+            {{ domxref("NodeFilter.acceptNode()") }} pour que les noeuds
+            soient ignorés par {{ domxref("NodeIterator") }} ou
+            {{ domxref("TreeWalker") }}. Les enfants des noeuds ignorés
+            sont toujours considérés. Cela équivaut à "ignorer ce noeud mais pas ses
+            enfants".
+          </td>
+        </tr>
+      </tbody>
+    </table>
+
+## Exemple
+
+```js
+var nodeIterator = document.createNodeIterator(
   // Noeud à utiliser comme racine
   document.getElementById('someId'),
 
@@ -82,38 +98,19 @@ var node;
 while ((node = nodeIterator.nextNode())) {
   alert(node.data);
 }
-</pre>
+```
 
-<h2 id="Specification">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#interface-nodefilter', 'NodeFilter')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-NodeFilter', 'NodeFilter')}}</td>
-   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                            | Statut                                       | Commentaire          |
+| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------- | -------------------- |
+| {{SpecName('DOM WHATWG', '#interface-nodefilter', 'NodeFilter')}}                                 | {{Spec2('DOM WHATWG')}}             |                      |
+| {{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-NodeFilter', 'NodeFilter')}} | {{Spec2('DOM2 Traversal_Range')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
+{{Compat("api.NodeFilter")}}
 
+## Voir aussi
 
-<p>{{Compat("api.NodeFilter")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Interfaces connexes : {{domxref("TreeWalker")}}, {{domxref("NodeIterator")}}.</li>
-</ul>
+- Interfaces connexes : {{domxref("TreeWalker")}}, {{domxref("NodeIterator")}}.
diff --git a/files/fr/web/api/nodeiterator/detach/index.md b/files/fr/web/api/nodeiterator/detach/index.md
index ee558b083b..f6fa126d80 100644
--- a/files/fr/web/api/nodeiterator/detach/index.md
+++ b/files/fr/web/api/nodeiterator/detach/index.md
@@ -10,60 +10,39 @@ tags:
   - Noeuds
 translation_of: Web/API/NodeIterator/detach
 ---
-<p>{{APIRef("DOM")}}{{obsolete_header}}</p>
+{{APIRef("DOM")}}{{obsolete_header}}
 
-<p>La méthode <strong><code>NodeIterator.detach()</code></strong> est une non opération, conservée seulement pour la rétro-compatibilité.</p>
+La méthode **`NodeIterator.detach()`** est une non opération, conservée seulement pour la rétro-compatibilité.
 
-<p>Initialement, elle détachait {{domxref("NodeIterator")}} de l'ensemble sur lequel il itérait, libérant toutes les ressources utilisées par lui et basculant son état à <code>INVALID</code>. Une fois cette méthode utilisée, l'appel d'autres méthodes sur le <code>NodeIterator</code> déclenchait une exception <code>INVALID_STATE_ERR</code>. </p>
+Initialement, elle détachait {{domxref("NodeIterator")}} de l'ensemble sur lequel il itérait, libérant toutes les ressources utilisées par lui et basculant son état à `INVALID`. Une fois cette méthode utilisée, l'appel d'autres méthodes sur le `NodeIterator` déclenchait une exception `INVALID_STATE_ERR`.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>nodeIterator</em>.detach();
-</pre>
+    nodeIterator.detach();
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="eval">var nodeIterator = document.createNodeIterator(
-    document.body,
-    NodeFilter.SHOW_ELEMENT,
-    { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
-    false
-);
-nodeIterator.detach(); // détache l'itérateur
+    var nodeIterator = document.createNodeIterator(
+        document.body,
+        NodeFilter.SHOW_ELEMENT,
+        { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
+        false
+    );
+    nodeIterator.detach(); // détache l'itérateur
 
-nodeIterator.nextNode(); // lance une exception INVALID_STATE_ERR
-</pre>
+    nodeIterator.nextNode(); // lance une exception INVALID_STATE_ERR
 
-<h2 id="Specification">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#dom-nodeiterator-detach', 'NodeIterator.detach')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Transformation en non opération</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-NodeIterator-detach', 'NodeIterator.detach')}}</td>
-   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                                    | Statut                                       | Commentaire                     |
+| ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------- | ------------------------------- |
+| {{SpecName('DOM WHATWG', '#dom-nodeiterator-detach', 'NodeIterator.detach')}}                                         | {{Spec2('DOM WHATWG')}}             | Transformation en non opération |
+| {{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-NodeIterator-detach', 'NodeIterator.detach')}} | {{Spec2('DOM2 Traversal_Range')}} | Définition initiale.            |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
+{{Compat("api.NodeIterator.detach")}}
 
+## Voir aussi
 
-<p>{{Compat("api.NodeIterator.detach")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>L'interface à laquelle elle appartient : {{domxref("NodeIterator")}}.</li>
-</ul>
+- L'interface à laquelle elle appartient : {{domxref("NodeIterator")}}.
diff --git a/files/fr/web/api/nodeiterator/expandentityreferences/index.md b/files/fr/web/api/nodeiterator/expandentityreferences/index.md
index 32c3294fc0..974f253391 100644
--- a/files/fr/web/api/nodeiterator/expandentityreferences/index.md
+++ b/files/fr/web/api/nodeiterator/expandentityreferences/index.md
@@ -10,55 +10,39 @@ tags:
   - Propriété
 translation_of: Web/API/NodeIterator/expandEntityReferences
 ---
-<p>{{APIRef("DOM")}} {{deprecated_header}}</p>
+{{APIRef("DOM")}} {{deprecated_header}}
 
-<p>La propriété en lecture seule <code><strong>NodeIterator.expandEntityReferences</strong></code> renvoie un {{domxref("Boolean")}} (<em>booléen</em>) indiquant si les enfants des noeuds de référence d'entité sont visibles ou non pour le {{domxref("NodeIterator")}}.</p>
+La propriété en lecture seule **`NodeIterator.expandEntityReferences`** renvoie un {{domxref("Boolean")}} (_booléen_) indiquant si les enfants des noeuds de référence d'entité sont visibles ou non pour le {{domxref("NodeIterator")}}.
 
-<p>Si cette valeur est <code>false</code> (<em>faux</em>), les enfants des nœuds de référence d'entité (ainsi que tous leurs descendants) sont rejetés. Cela a préséance sur la valeur de la méthode  {{domxref("NodeIterator.whatToShow")}} et le filtre associé.</p>
+Si cette valeur est `false` (_faux_), les enfants des nœuds de référence d'entité (ainsi que tous leurs descendants) sont rejetés. Cela a préséance sur la valeur de la méthode  {{domxref("NodeIterator.whatToShow")}} et le filtre associé.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>expand</em> = <em>nodeIterator</em>.expandEntityReferences;
-</pre>
+    expand = nodeIterator.expandEntityReferences;
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">var nodeIterator = document.createNodeIterator(
+```js
+var nodeIterator = document.createNodeIterator(
     document.body,
     NodeFilter.SHOW_ELEMENT,
     { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
     false
 );
-expand = nodeIterator.expandEntityReferences;</pre>
+expand = nodeIterator.expandEntityReferences;
+```
 
-<h2 id="Specification">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#nodeiterator', 'NodeIterator')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Suppression de la spécification</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-NodeIterator-expandEntityReferences', 'NodeIterator.expandEntityReferences')}}</td>
-   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                                                                            | Statut                                       | Commentaire                     |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | ------------------------------- |
+| {{SpecName('DOM WHATWG', '#nodeiterator', 'NodeIterator')}}                                                                                                         | {{Spec2('DOM WHATWG')}}             | Suppression de la spécification |
+| {{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-NodeIterator-expandEntityReferences', 'NodeIterator.expandEntityReferences')}} | {{Spec2('DOM2 Traversal_Range')}} | Définition initiale.            |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.NodeIterator.expandEntityReferences")}}</p>
+{{Compat("api.NodeIterator.expandEntityReferences")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>L'interface à laquelle cette propriété appartient : {{domxref("NodeIterator")}}.</li>
-</ul>
+- L'interface à laquelle cette propriété appartient : {{domxref("NodeIterator")}}.
diff --git a/files/fr/web/api/nodeiterator/filter/index.md b/files/fr/web/api/nodeiterator/filter/index.md
index 57cbd54740..0ead217d82 100644
--- a/files/fr/web/api/nodeiterator/filter/index.md
+++ b/files/fr/web/api/nodeiterator/filter/index.md
@@ -10,57 +10,39 @@ tags:
   - Propriétés
 translation_of: Web/API/NodeIterator/filter
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p>La méthode en lecture seule <strong><code>NodeIterator.filter</code></strong> renvoie un objet {{domxref("NodeFilter")}}, c'est-à-dire un objet implémentant la méthode <code>acceptNode(<em>node</em>)</code>, utilisée pour filtrer les noeuds.</p>
+La méthode en lecture seule **`NodeIterator.filter`** renvoie un objet {{domxref("NodeFilter")}}, c'est-à-dire un objet implémentant la méthode `acceptNode(node)`, utilisée pour filtrer les noeuds.
 
-<p>Lors de la création du {{domxref("NodeIterator")}}, l'objet filtre est transmis en 3ème paramètre et l'objet méthode <code>acceptNode(<em>node</em>)</code> est appelé sur chaque noeud pour déterminer s'il doit ou non l'accepter. Cette fonction doit renvoyer la constante <code>NodeFilter.FILTER_ACCEPT</code> quand le noeud doit être accepté et <code>NodeFilter.FILTER_REJECT</code> s'il doit être rejeté.</p>
+Lors de la création du {{domxref("NodeIterator")}}, l'objet filtre est transmis en 3ème paramètre et l'objet méthode `acceptNode(node)` est appelé sur chaque noeud pour déterminer s'il doit ou non l'accepter. Cette fonction doit renvoyer la constante `NodeFilter.FILTER_ACCEPT` quand le noeud doit être accepté et `NodeFilter.FILTER_REJECT` s'il doit être rejeté.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>nodeFilter</em> = <em>nodeIterator</em>.filter;
-</pre>
+    nodeFilter = nodeIterator.filter;
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">var nodeIterator = document.createNodeIterator(
+```js
+var nodeIterator = document.createNodeIterator(
     document.body,
     NodeFilter.SHOW_ELEMENT,
     { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
     false
 );
-nodeFilter = nodeIterator.filter;</pre>
+nodeFilter = nodeIterator.filter;
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#dom-nodeiterator-filter', 'NodeIterator.filter')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Pas de changement de {{SpecName('DOM2 Traversal_Range')}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-NodeIterator-filter', 'NodeIterator.filter')}}</td>
-   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                                    | Statut                                       | Commentaire                                                            |
+| ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------- | ---------------------------------------------------------------------- |
+| {{SpecName('DOM WHATWG', '#dom-nodeiterator-filter', 'NodeIterator.filter')}}                                         | {{Spec2('DOM WHATWG')}}             | Pas de changement de {{SpecName('DOM2 Traversal_Range')}}. |
+| {{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-NodeIterator-filter', 'NodeIterator.filter')}} | {{Spec2('DOM2 Traversal_Range')}} | Définition initiale.                                                   |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
+{{Compat("api.NodeIterator.filter")}}
 
+## Voir aussi
 
-<p>{{Compat("api.NodeIterator.filter")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>L'interface à laquelle cette propriété appartient : {{domxref("NodeIterator")}}.</li>
-</ul>
+- L'interface à laquelle cette propriété appartient : {{domxref("NodeIterator")}}.
diff --git a/files/fr/web/api/nodeiterator/index.md b/files/fr/web/api/nodeiterator/index.md
index d45bd86f1f..e38aed5afe 100644
--- a/files/fr/web/api/nodeiterator/index.md
+++ b/files/fr/web/api/nodeiterator/index.md
@@ -8,153 +8,166 @@ tags:
   - Noeuds
 translation_of: Web/API/NodeIterator
 ---
-<div>{{APIRef("DOM")}}</div>
-
-<p>L'interface <strong><code>NodeIterator</code></strong> représente un itérateur pour les membres d'une liste des nœuds dans un sous-arbre du DOM. Les nœuds seront renvoyés dans l'ordre du document.</p>
-
-<p>Un <code>NodeIterator</code> peut être créé en utilisant la méthode {{domxref("Document.createNodeIterator()")}}, comme suit :</p>
-
-<pre class="brush: js">var nodeIterator = document.createNodeIterator(<em>root</em>, <em>whatToShow</em>, <em>filter</em>);</pre>
-
-<h2 id="Properties">Propriétés</h2>
-
-<p><em>L'interface n'hérite d'aucune propriété.</em></p>
-
-<dl>
- <dt>{{domxref("NodeIterator.root")}} {{readonlyInline}}</dt>
- <dd>Renvoie un {{domxref("Node")}} (<em>noeud</em>) représentant le noeud racine comme spécifié lors de la création du <code>NodeIterator</code>.</dd>
- <dt>{{domxref("NodeIterator.whatToShow")}} {{readonlyInline}}</dt>
- <dd>Renvoie un <code>unsigned long</code> (<em>long non signé</em>), celui-ci étant un masque constitué de constantes décrivant les types de {{domxref("Node")}} (<em>noeud</em>) et devant être présenté. Les nœuds non correspondants sont ignorés, mais leurs enfants peuvent être inclus, le cas échéant. Les valeurs possibles sont :
- <table class="standard-table">
-  <tbody>
-   <tr>
-    <td class="header">Constante</td>
-    <td class="header">Valeur numérique</td>
-    <td class="header">Description</td>
-   </tr>
-   <tr>
-    <td><code>NodeFilter.SHOW_ALL</code></td>
-    <td><code>-1</code> (c'est la valeur numérique maximale du <code>unsigned long</code> (<em>non signé long</em>))</td>
-    <td>Affiche tous les noeuds.</td>
-   </tr>
-   <tr>
-    <td><code>NodeFilter.SHOW_ATTRIBUTE</code> {{obsolete_inline}}</td>
-    <td><code>2</code></td>
-    <td>Affiche l'attribut {{domxref("Attr")}} des noeuds. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{domxref("Attr")}} comme racine ; dans ce cas, cela signifie que le nœud d'attribut apparaîtra dans la première position de l'itération ou de la traversée. Comme les attributs ne sont jamais des enfants d'autres nœuds, ils n'apparaissent pas lors de la traversée de l'arbre du document.</td>
-   </tr>
-   <tr>
-    <td><code>NodeFilter.SHOW_CDATA_SECTION</code> {{obsolete_inline}}</td>
-    <td><code>8</code></td>
-    <td>Affiche les noeuds {{domxref("CDATASection")}}.</td>
-   </tr>
-   <tr>
-    <td><code>NodeFilter.SHOW_COMMENT</code></td>
-    <td><code>128</code></td>
-    <td>Affiche les noeuds {{domxref("Comment")}}.</td>
-   </tr>
-   <tr>
-    <td><code>NodeFilter.SHOW_DOCUMENT</code></td>
-    <td><code>256</code></td>
-    <td>Affiche les noeuds {{domxref("Document")}}.</td>
-   </tr>
-   <tr>
-    <td><code>NodeFilter.SHOW_DOCUMENT_FRAGMENT</code></td>
-    <td><code>1024</code></td>
-    <td>Affiche les noeuds {{domxref("DocumentFragment")}}.</td>
-   </tr>
-   <tr>
-    <td><code>NodeFilter.SHOW_DOCUMENT_TYPE</code></td>
-    <td><code>512</code></td>
-    <td>Affiche les noeuds {{domxref("DocumentType")}}.</td>
-   </tr>
-   <tr>
-    <td><code>NodeFilter.SHOW_ELEMENT</code></td>
-    <td><code>1</code></td>
-    <td>Affiche les noeuds {{domxref("Element")}}.</td>
-   </tr>
-   <tr>
-    <td><code>NodeFilter.SHOW_ENTITY</code> {{obsolete_inline}}</td>
-    <td><code>32</code></td>
-    <td>Affiche les noeuds {{domxref("Entity")}}. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{ domxref("Entity") }} comme racine ; dans ce cas, il signifie que le noeud d'entité {{domxref("Entity") }} apparaîtra à la première position de la traversée. Étant donné que les entités ne font pas partie de l'arborescence du document, elles n'apparaissent pas lors de la traversée de l'arborescence du document.</td>
-   </tr>
-   <tr>
-    <td><code>NodeFilter.SHOW_ENTITY_REFERENCE</code> {{obsolete_inline}}</td>
-    <td><code>16</code></td>
-    <td>Affiche les noeuds {{domxref("EntityReference")}}.</td>
-   </tr>
-   <tr>
-    <td><code>NodeFilter.SHOW_NOTATION</code> {{obsolete_inline}}</td>
-    <td><code>2048</code></td>
-    <td>Affiche les noeuds {{domxref("Notation")}}. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{domxref("Notation")}} comme racine ; dans ce cas, il signifie que le noeud {{domxref("Notation")}} apparaîtra à la première position de la traversée. Étant donné que les entités ne font pas partie de l'arborescence du document, elles n'apparaissent pas lors de la traversée de l'arborescence du document.</td>
-   </tr>
-   <tr>
-    <td><code>NodeFilter.SHOW_PROCESSING_INSTRUCTION</code></td>
-    <td><code>64</code></td>
-    <td>Affiche les noeuds {{domxref("ProcessingInstruction")}}.</td>
-   </tr>
-   <tr>
-    <td><code>NodeFilter.SHOW_TEXT</code></td>
-    <td><code>4</code></td>
-    <td>Affiche les noeuds {{domxref("Text")}}.</td>
-   </tr>
-  </tbody>
- </table>
- </dd>
- <dt>{{domxref("NodeIterator.filter")}} {{readonlyInline}}</dt>
- <dd>Renvoie un {{domxref("NodeFilter")}} utilisé pour sélectionner les noeuds pertinents.</dd>
- <dt>{{domxref("NodeIterator.expandEntityReferences")}} {{readonlyInline}} {{deprecated_inline}}</dt>
- <dd>est un {{domxref("Boolean")}} (<em>booléen</em>) indiquant si, lors de la suppression d'une {{domxref("EntityReference")}}, tout son sous-arbre doit être supprimé en même temps.</dd>
- <dt>{{domxref("NodeIterator.referenceNode")}} {{readonlyInline}} {{experimental_inline() }}</dt>
- <dd>Renvoie le {{domxref("Node")}} (noeud) auquel l'itérateur est ancré.</dd>
- <dt>{{domxref("NodeIterator.pointerBeforeReferenceNode")}} {{readonlyInline}} {{ experimental_inline() }}</dt>
- <dd>Renvoie un {{domxref("Boolean")}} (<em>booléen</em>) qui indique si le {{domxref("NodeIterator")}} est ancré avant (<code>true</code> (<em>vrai</em>)) ou après (<code>false</code> (<em>faux</em>)) le noeud d'ancrage.</dd>
-</dl>
-
-<h2 id="Methods">Méthodes</h2>
-
-<p><em>Cette interface n'hérite d'aucune méthode.</em></p>
-
-<dl>
- <dt>{{domxref("NodeIterator.detach()")}} {{obsolete_inline()}}</dt>
- <dd>Cette opération est une non opération. Elle ne fait rien. Auparavant, elle disait au moteur que le <code>NodeIterator</code> n'était plus utilisé, mais c'est maintenant inutile.</dd>
- <dt>{{domxref("NodeIterator.previousNode()")}}</dt>
- <dd>Renvoie le noeud {{domxref("Node")}} précédent dans le document ou <code>null</code> s'il n'y en a aucun.</dd>
- <dt>{{domxref("NodeIterator.nextNode()")}}</dt>
- <dd>Renvoie le noeud {{domxref("Node")}} suivant dans le  document ou <code>null</code> s'il n'y en a aucun.</dd>
-</dl>
-
-<h2 id="Specification">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#nodeiterator', 'NodeIterator')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Ajout des propriétés <code>referenceNode</code> et <code>pointerBeforeReferenceNode</code>.<br>
-    Suppression de la propriété <code>expandEntityReferences</code>.<br>
-    La méthode <code>detach()</code> a été modifiée pour être une non opération.<br>
-    Les méthodes <code>previousNode()</code> et <code>nextNode()</code> ne déclenchent plus d'exceptions.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#Iterator-overview', 'NodeIterator')}}</td>
-   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.NodeIterator")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>La méthode de création : {{domxref("Document.createNodeIterator()")}}.</li>
- <li>Interfaces connexes : {{domxref("NodeFilter")}}, {{domxref("TreeWalker")}}.</li>
-</ul>
+{{APIRef("DOM")}}
+
+L'interface **`NodeIterator`** représente un itérateur pour les membres d'une liste des nœuds dans un sous-arbre du DOM. Les nœuds seront renvoyés dans l'ordre du document.
+
+Un `NodeIterator` peut être créé en utilisant la méthode {{domxref("Document.createNodeIterator()")}}, comme suit :
+
+```js
+var nodeIterator = document.createNodeIterator(root, whatToShow, filter);
+```
+
+## Propriétés
+
+_L'interface n'hérite d'aucune propriété._
+
+- {{domxref("NodeIterator.root")}} {{readonlyInline}}
+  - : Renvoie un {{domxref("Node")}} (_noeud_) représentant le noeud racine comme spécifié lors de la création du `NodeIterator`.
+- {{domxref("NodeIterator.whatToShow")}} {{readonlyInline}}
+
+  - : Renvoie un `unsigned long` (_long non signé_), celui-ci étant un masque constitué de constantes décrivant les types de {{domxref("Node")}} (_noeud_) et devant être présenté. Les nœuds non correspondants sont ignorés, mais leurs enfants peuvent être inclus, le cas échéant. Les valeurs possibles sont :
+
+    <table class="standard-table">
+      <tbody>
+        <tr>
+          <td class="header">Constante</td>
+          <td class="header">Valeur numérique</td>
+          <td class="header">Description</td>
+        </tr>
+        <tr>
+          <td><code>NodeFilter.SHOW_ALL</code></td>
+          <td>
+            <code>-1</code> (c'est la valeur numérique maximale du
+            <code>unsigned long</code> (<em>non signé long</em>))
+          </td>
+          <td>Affiche tous les noeuds.</td>
+        </tr>
+        <tr>
+          <td><code>NodeFilter.SHOW_ATTRIBUTE</code> {{obsolete_inline}}</td>
+          <td><code>2</code></td>
+          <td>
+            Affiche l'attribut {{domxref("Attr")}} des noeuds. Cela n'a de sens
+            que lors de la création d'un {{domxref("TreeWalker")}} avec un
+            noeud {{domxref("Attr")}} comme racine ; dans ce cas, cela signifie
+            que le nœud d'attribut apparaîtra dans la première position de
+            l'itération ou de la traversée. Comme les attributs ne sont jamais des
+            enfants d'autres nœuds, ils n'apparaissent pas lors de la traversée de
+            l'arbre du document.
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <code>NodeFilter.SHOW_CDATA_SECTION</code> {{obsolete_inline}}
+          </td>
+          <td><code>8</code></td>
+          <td>Affiche les noeuds {{domxref("CDATASection")}}.</td>
+        </tr>
+        <tr>
+          <td><code>NodeFilter.SHOW_COMMENT</code></td>
+          <td><code>128</code></td>
+          <td>Affiche les noeuds {{domxref("Comment")}}.</td>
+        </tr>
+        <tr>
+          <td><code>NodeFilter.SHOW_DOCUMENT</code></td>
+          <td><code>256</code></td>
+          <td>Affiche les noeuds {{domxref("Document")}}.</td>
+        </tr>
+        <tr>
+          <td><code>NodeFilter.SHOW_DOCUMENT_FRAGMENT</code></td>
+          <td><code>1024</code></td>
+          <td>Affiche les noeuds {{domxref("DocumentFragment")}}.</td>
+        </tr>
+        <tr>
+          <td><code>NodeFilter.SHOW_DOCUMENT_TYPE</code></td>
+          <td><code>512</code></td>
+          <td>Affiche les noeuds {{domxref("DocumentType")}}.</td>
+        </tr>
+        <tr>
+          <td><code>NodeFilter.SHOW_ELEMENT</code></td>
+          <td><code>1</code></td>
+          <td>Affiche les noeuds {{domxref("Element")}}.</td>
+        </tr>
+        <tr>
+          <td><code>NodeFilter.SHOW_ENTITY</code> {{obsolete_inline}}</td>
+          <td><code>32</code></td>
+          <td>
+            Affiche les noeuds {{domxref("Entity")}}. Cela n'a de sens que
+            lors de la création d'un {{domxref("TreeWalker")}} avec un noeud
+            {{ domxref("Entity") }} comme racine ; dans ce cas, il signifie
+            que le noeud d'entité {{domxref("Entity") }} apparaîtra à la
+            première position de la traversée. Étant donné que les entités ne font
+            pas partie de l'arborescence du document, elles n'apparaissent pas lors
+            de la traversée de l'arborescence du document.
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <code>NodeFilter.SHOW_ENTITY_REFERENCE</code> {{obsolete_inline}}
+          </td>
+          <td><code>16</code></td>
+          <td>Affiche les noeuds {{domxref("EntityReference")}}.</td>
+        </tr>
+        <tr>
+          <td><code>NodeFilter.SHOW_NOTATION</code> {{obsolete_inline}}</td>
+          <td><code>2048</code></td>
+          <td>
+            Affiche les noeuds {{domxref("Notation")}}. Cela n'a de sens
+            que lors de la création d'un {{domxref("TreeWalker")}} avec un
+            noeud {{domxref("Notation")}} comme racine ; dans ce cas, il
+            signifie que le noeud {{domxref("Notation")}} apparaîtra à la
+            première position de la traversée. Étant donné que les entités ne font
+            pas partie de l'arborescence du document, elles n'apparaissent pas lors
+            de la traversée de l'arborescence du document.
+          </td>
+        </tr>
+        <tr>
+          <td><code>NodeFilter.SHOW_PROCESSING_INSTRUCTION</code></td>
+          <td><code>64</code></td>
+          <td>
+            Affiche les noeuds {{domxref("ProcessingInstruction")}}.
+          </td>
+        </tr>
+        <tr>
+          <td><code>NodeFilter.SHOW_TEXT</code></td>
+          <td><code>4</code></td>
+          <td>Affiche les noeuds {{domxref("Text")}}.</td>
+        </tr>
+      </tbody>
+    </table>
+
+- {{domxref("NodeIterator.filter")}} {{readonlyInline}}
+  - : Renvoie un {{domxref("NodeFilter")}} utilisé pour sélectionner les noeuds pertinents.
+- {{domxref("NodeIterator.expandEntityReferences")}} {{readonlyInline}} {{deprecated_inline}}
+  - : est un {{domxref("Boolean")}} (_booléen_) indiquant si, lors de la suppression d'une {{domxref("EntityReference")}}, tout son sous-arbre doit être supprimé en même temps.
+- {{domxref("NodeIterator.referenceNode")}} {{readonlyInline}} {{experimental_inline() }}
+  - : Renvoie le {{domxref("Node")}} (noeud) auquel l'itérateur est ancré.
+- {{domxref("NodeIterator.pointerBeforeReferenceNode")}} {{readonlyInline}} {{ experimental_inline() }}
+  - : Renvoie un {{domxref("Boolean")}} (_booléen_) qui indique si le {{domxref("NodeIterator")}} est ancré avant (`true` (_vrai_)) ou après (`false` (_faux_)) le noeud d'ancrage.
+
+## Méthodes
+
+_Cette interface n'hérite d'aucune méthode._
+
+- {{domxref("NodeIterator.detach()")}} {{obsolete_inline()}}
+  - : Cette opération est une non opération. Elle ne fait rien. Auparavant, elle disait au moteur que le `NodeIterator` n'était plus utilisé, mais c'est maintenant inutile.
+- {{domxref("NodeIterator.previousNode()")}}
+  - : Renvoie le noeud {{domxref("Node")}} précédent dans le document ou `null` s'il n'y en a aucun.
+- {{domxref("NodeIterator.nextNode()")}}
+  - : Renvoie le noeud {{domxref("Node")}} suivant dans le  document ou `null` s'il n'y en a aucun.
+
+## Spécifications
+
+| Spécification                                                                                                        | Statut                                       | Commentaire                                                                                                                                                                                                                                                                   |
+| -------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('DOM WHATWG', '#nodeiterator', 'NodeIterator')}}                                     | {{Spec2('DOM WHATWG')}}             | Ajout des propriétés `referenceNode` et `pointerBeforeReferenceNode`. Suppression de la propriété `expandEntityReferences`. La méthode `detach()` a été modifiée pour être une non opération. Les méthodes `previousNode()` et `nextNode()` ne déclenchent plus d'exceptions. |
+| {{SpecName('DOM2 Traversal_Range', 'traversal.html#Iterator-overview', 'NodeIterator')}} | {{Spec2('DOM2 Traversal_Range')}} | Définition initiale.                                                                                                                                                                                                                                                          |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.NodeIterator")}}
+
+## Voir aussi
+
+- La méthode de création : {{domxref("Document.createNodeIterator()")}}.
+- Interfaces connexes : {{domxref("NodeFilter")}}, {{domxref("TreeWalker")}}.
diff --git a/files/fr/web/api/nodeiterator/nextnode/index.md b/files/fr/web/api/nodeiterator/nextnode/index.md
index 517cc65cef..ff4676c9fb 100644
--- a/files/fr/web/api/nodeiterator/nextnode/index.md
+++ b/files/fr/web/api/nodeiterator/nextnode/index.md
@@ -10,58 +10,41 @@ tags:
   - Noeuds
 translation_of: Web/API/NodeIterator/nextNode
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p>La méthode <code><strong>NodeIterator.nextNode()</strong></code> renvoie le noeud suivant dans l'ensemble représenté par le {{domxref("NodeIterator")}} et avance la position de l'itérateur dans cet ensemble.  Le premier appel de <code>nextNode()</code> en renvoie le premier noeud.</p>
+La méthode **`NodeIterator.nextNode()`** renvoie le noeud suivant dans l'ensemble représenté par le {{domxref("NodeIterator")}} et avance la position de l'itérateur dans cet ensemble.  Le premier appel de `nextNode()` en renvoie le premier noeud.
 
-<p>Cette méthode retourne <code>null</code> quand il n'y a plus de nœuds dans l'ensemble.</p>
+Cette méthode retourne `null` quand il n'y a plus de nœuds dans l'ensemble.
 
-<p>Dans les navigateurs anciens, comme spécifié dans les anciennes version des spécifications, la méthode pouvait déclencher une {{domxref("DOMException")}}   <code>INVALID_STATE_ERR</code> si elle était appelée après la méthode {{domxref("NodeIterator.detach()")}}. Les navigateurs récents ne lancent rien.</p>
+Dans les navigateurs anciens, comme spécifié dans les anciennes version des spécifications, la méthode pouvait déclencher une {{domxref("DOMException")}}   `INVALID_STATE_ERR` si elle était appelée après la méthode {{domxref("NodeIterator.detach()")}}. Les navigateurs récents ne lancent rien.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>node</em> = <em>nodeIterator</em>.nextNode();
-</pre>
+    node = nodeIterator.nextNode();
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">var nodeIterator = document.createNodeIterator(
+```js
+var nodeIterator = document.createNodeIterator(
     document.body,
     NodeFilter.SHOW_ELEMENT,
     { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
     false // this optional argument is not used any more
 );
 currentNode = nodeIterator.nextNode(); // renvoie le noeud suivant.
-</pre>
+```
 
-<h2 id="Specification">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#dom-nodeiterator-nextnode', 'NodeIterator.nextNode')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Comme <code>detach()</code> est maintenant une méthode non opérante, cette méthode ne peut plus rien lancer.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-NodeIterator-nextNode', 'NodeIterator.nextNode')}}</td>
-   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                                        | Statut                                       | Commentaire                                                                                       |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | ------------------------------------------------------------------------------------------------- |
+| {{SpecName('DOM WHATWG', '#dom-nodeiterator-nextnode', 'NodeIterator.nextNode')}}                                         | {{Spec2('DOM WHATWG')}}             | Comme `detach()` est maintenant une méthode non opérante, cette méthode ne peut plus rien lancer. |
+| {{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-NodeIterator-nextNode', 'NodeIterator.nextNode')}} | {{Spec2('DOM2 Traversal_Range')}} | Définition initiale.                                                                              |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
+{{Compat("api.NodeIterator.nextNode")}}
 
+## Voir aussi
 
-<p>{{Compat("api.NodeIterator.nextNode")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<p>L'interface à laquelle elle appartient : {{domxref("NodeIterator")}}.</p>
+L'interface à laquelle elle appartient : {{domxref("NodeIterator")}}.
diff --git a/files/fr/web/api/nodeiterator/pointerbeforereferencenode/index.md b/files/fr/web/api/nodeiterator/pointerbeforereferencenode/index.md
index a2d6507e4f..d5797b5e28 100644
--- a/files/fr/web/api/nodeiterator/pointerbeforereferencenode/index.md
+++ b/files/fr/web/api/nodeiterator/pointerbeforereferencenode/index.md
@@ -10,50 +10,36 @@ tags:
   - Propriétés
 translation_of: Web/API/NodeIterator/pointerBeforeReferenceNode
 ---
-<p>{{APIRef("DOM")}} {{SeeCompatTable}}</p>
+{{APIRef("DOM")}} {{SeeCompatTable}}
 
-<p>La propriété en lecture seule <strong><code>NodeIterator.pointerBeforeReferenceNode</code></strong> renvoie un {{domxref("Boolean")}} (booléen) qui indique si le {{domxref("NodeFilter")}} est ancré avant (si la valeur est <code>true</code> (<em>vrai</em>)) ou après (<code>false</code> (<em>faux</em>)) le noeud-ancre indiqué par la propriété {{domxref("NodeIterator.referenceNode")}}.</p>
+La propriété en lecture seule **`NodeIterator.pointerBeforeReferenceNode`** renvoie un {{domxref("Boolean")}} (booléen) qui indique si le {{domxref("NodeFilter")}} est ancré avant (si la valeur est `true` (_vrai_)) ou après (`false` (_faux_)) le noeud-ancre indiqué par la propriété {{domxref("NodeIterator.referenceNode")}}.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>flag</em> = <em>nodeIterator</em>.pointerBeforeReferenceNode;
-</pre>
+    flag = nodeIterator.pointerBeforeReferenceNode;
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">var nodeIterator = document.createNodeIterator(
+```js
+var nodeIterator = document.createNodeIterator(
     document.body,
     NodeFilter.SHOW_ELEMENT,
     { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
     false
 );
-flag = nodeIterator.pointerBeforeReferenceNode;</pre>
+flag = nodeIterator.pointerBeforeReferenceNode;
+```
 
-<h2 id="Specification">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#dom-nodeiterator-pointerbeforereferencenode', 'NodeIterator.pointerBeforeReferenceNode')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                                                | Statut                           | Commentaire          |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName('DOM WHATWG', '#dom-nodeiterator-pointerbeforereferencenode', 'NodeIterator.pointerBeforeReferenceNode')}} | {{Spec2('DOM WHATWG')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
+{{Compat("api.NodeIterator.pointerBeforeReferenceNode")}}
 
+## Voir aussi
 
-<p>{{Compat("api.NodeIterator.pointerBeforeReferenceNode")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>L'interface à laquelle elle appartient : {{domxref("NodeIterator")}}</li>
-</ul>
+- L'interface à laquelle elle appartient : {{domxref("NodeIterator")}}
diff --git a/files/fr/web/api/nodeiterator/previousnode/index.md b/files/fr/web/api/nodeiterator/previousnode/index.md
index e6c19c0c07..a5b45200a6 100644
--- a/files/fr/web/api/nodeiterator/previousnode/index.md
+++ b/files/fr/web/api/nodeiterator/previousnode/index.md
@@ -9,22 +9,22 @@ tags:
   - Noeuds
 translation_of: Web/API/NodeIterator/previousNode
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p>La méthode <code><strong>NodeIterator.previousNode()</strong></code> renvoie le noeud précédent dans l'ensemble représenté par le {{domxref("NodeIterator")}} et déplace la position de l'itérateur vers l'arrière à l'intérieur de cet ensemble.</p>
+La méthode **`NodeIterator.previousNode()`** renvoie le noeud précédent dans l'ensemble représenté par le {{domxref("NodeIterator")}} et déplace la position de l'itérateur vers l'arrière à l'intérieur de cet ensemble.
 
-<p>Cette méthode renvoie <code>null</code> si le noeud courant est le premier noeud dans l'ensemble.</p>
+Cette méthode renvoie `null` si le noeud courant est le premier noeud dans l'ensemble.
 
-<p>Dans les navigateurs anciens, comme spécifié dans les anciennes version des spécifications, la méthode pouvait déclencher une <code>INVALID_STATE_ERR</code> {{domxref("DOMException")}} si elle était appelée après la méthode {{domxref("NodeIterator.detach()")}}. Les navigateurs récents ne lancent rien.</p>
+Dans les navigateurs anciens, comme spécifié dans les anciennes version des spécifications, la méthode pouvait déclencher une `INVALID_STATE_ERR` {{domxref("DOMException")}} si elle était appelée après la méthode {{domxref("NodeIterator.detach()")}}. Les navigateurs récents ne lancent rien.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>node</em> = <em>nodeIterator</em>.previousNode();
-</pre>
+    node = nodeIterator.previousNode();
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">var nodeIterator = document.createNodeIterator(
+```js
+var nodeIterator = document.createNodeIterator(
     document.body,
     NodeFilter.SHOW_ELEMENT,
     { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
@@ -32,38 +32,19 @@ translation_of: Web/API/NodeIterator/previousNode
 );
 currentNode = nodeIterator.nextNode(); // renvoie le noeud suivant
 previousNode = nodeIterator.previousNode(); // même résultat, puisque nous sommes retournés au noeud précédent
-</pre>
+```
 
-<h2 id="Specification">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#dom-nodeiterator-previousnode', 'NodeIterator.previousNode')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Comme <code>detach()</code> est maintenant une méthode non opérante, cette méthode ne peut plus rien lancer.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-NodeIterator-previousNode', 'NodeIterator.previousNode')}}</td>
-   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                                                    | Statut                                       | Commentaire                                                                                       |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | ------------------------------------------------------------------------------------------------- |
+| {{SpecName('DOM WHATWG', '#dom-nodeiterator-previousnode', 'NodeIterator.previousNode')}}                                         | {{Spec2('DOM WHATWG')}}             | Comme `detach()` est maintenant une méthode non opérante, cette méthode ne peut plus rien lancer. |
+| {{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-NodeIterator-previousNode', 'NodeIterator.previousNode')}} | {{Spec2('DOM2 Traversal_Range')}} | Définition initiale.                                                                              |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
+{{Compat("api.NodeIterator.previousNode")}}
 
+## Voir aussi
 
-<p>{{Compat("api.NodeIterator.previousNode")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>L'interface à laquelle elle appartient : {{domxref("NodeIterator")}}.</li>
-</ul>
+- L'interface à laquelle elle appartient : {{domxref("NodeIterator")}}.
diff --git a/files/fr/web/api/nodeiterator/referencenode/index.md b/files/fr/web/api/nodeiterator/referencenode/index.md
index b706873866..212c1f6643 100644
--- a/files/fr/web/api/nodeiterator/referencenode/index.md
+++ b/files/fr/web/api/nodeiterator/referencenode/index.md
@@ -10,51 +10,36 @@ tags:
   - Propriétés
 translation_of: Web/API/NodeIterator/referenceNode
 ---
-<p>{{APIRef("DOM")}}{{ SeeCompatTable }}</p>
+{{APIRef("DOM")}}{{ SeeCompatTable }}
 
-<p>La propriété en lecture seule <strong><code>NodeIterator.referenceNode</code></strong> renvoie le {{domxref("Node")}} auquel l'itérateur est ancré ; si de nouveaux noeuds sont insérés, l'itérateur reste ancré au noeud de référence spécifié par cette propriété.</p>
+La propriété en lecture seule **`NodeIterator.referenceNode`** renvoie le {{domxref("Node")}} auquel l'itérateur est ancré ; si de nouveaux noeuds sont insérés, l'itérateur reste ancré au noeud de référence spécifié par cette propriété.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>node</em> = <em>nodeIterator</em>.referenceNode;
-</pre>
+    node = nodeIterator.referenceNode;
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">var nodeIterator = document.createNodeIterator(
+```js
+var nodeIterator = document.createNodeIterator(
     document.body,
     NodeFilter.SHOW_ELEMENT,
     { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
     false
 );
 node = nodeIterator.referenceNode;
-</pre>
+```
 
-<h2 id="Specification">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#dom-nodeiterator-referencenode', 'NodeIterator.referenceNode')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                            | Statut                           | Commentaire          |
+| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName('DOM WHATWG', '#dom-nodeiterator-referencenode', 'NodeIterator.referenceNode')}} | {{Spec2('DOM WHATWG')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
+{{Compat("api.NodeIterator.referenceNode")}}
 
+## Voir aussi
 
-<p>{{Compat("api.NodeIterator.referenceNode")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>L'interface à laquelle elle appartient : {{domxref("NodeIterator")}}</li>
-</ul>
+- L'interface à laquelle elle appartient : {{domxref("NodeIterator")}}
diff --git a/files/fr/web/api/nodeiterator/root/index.md b/files/fr/web/api/nodeiterator/root/index.md
index c3fcbf3a8b..9c0416d089 100644
--- a/files/fr/web/api/nodeiterator/root/index.md
+++ b/files/fr/web/api/nodeiterator/root/index.md
@@ -10,56 +10,37 @@ tags:
   - Propriété
 translation_of: Web/API/NodeIterator/root
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p>La propriété en lecture seule <code><strong>NodeIterator.root</strong></code> représente le {{DOMxref("Node")}} qui est la racine de ce que le {{DOMxref("NodeIterator")}} traverse.</p>
+La propriété en lecture seule **`NodeIterator.root`** représente le {{DOMxref("Node")}} qui est la racine de ce que le {{DOMxref("NodeIterator")}} traverse.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>root</em> = <em>nodeIterator</em>.root;
-</pre>
+    root = nodeIterator.root;
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">var nodeIterator = document.createNodeIterator(
+```js
+var nodeIterator = document.createNodeIterator(
     document.body,
     NodeFilter.SHOW_ELEMENT,
     { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
     false
 );
 root = nodeIterator.root; // document.body dans ce cas
-</pre>
+```
 
-<h2 id="Specification">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#dom-nodeiterator-root', 'NodeIterator.root')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Pas de changement de {{SpecName('DOM2 Traversal_Range')}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-NodeIterator-root', 'NodeIterator.root')}}</td>
-   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                            | Statut                                       | Commentaire                                                            |
+| ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | ---------------------------------------------------------------------- |
+| {{SpecName('DOM WHATWG', '#dom-nodeiterator-root', 'NodeIterator.root')}}                                         | {{Spec2('DOM WHATWG')}}             | Pas de changement de {{SpecName('DOM2 Traversal_Range')}}. |
+| {{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-NodeIterator-root', 'NodeIterator.root')}} | {{Spec2('DOM2 Traversal_Range')}} | Définition initiale.                                                   |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
+{{Compat("api.NodeIterator.root")}}
 
+## Voir aussi
 
-<p>{{Compat("api.NodeIterator.root")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>L'interface à laquelle elle appartient : {{domxref("NodeIterator")}}.</li>
-</ul>
+- L'interface à laquelle elle appartient : {{domxref("NodeIterator")}}.
diff --git a/files/fr/web/api/nodeiterator/whattoshow/index.md b/files/fr/web/api/nodeiterator/whattoshow/index.md
index 216eee5ac5..1cd3450056 100644
--- a/files/fr/web/api/nodeiterator/whattoshow/index.md
+++ b/files/fr/web/api/nodeiterator/whattoshow/index.md
@@ -10,136 +10,155 @@ tags:
   - Propriétés
 translation_of: Web/API/NodeIterator/whatToShow
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p>La propriété en lecture seule <strong><code>NodeIterator.whatToShow</code></strong> est un <code>unsigned integer</code> (<em>entier non signé</em>) représentant un masque de bits désignant le type de noeuds qui doit être renvoyé par le {{domxref("NodeIterator")}}.</p>
+La propriété en lecture seule **`NodeIterator.whatToShow`** est un `unsigned integer` (_entier non signé_) représentant un masque de bits désignant le type de noeuds qui doit être renvoyé par le {{domxref("NodeIterator")}}.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var nodeTypes = <em>nodeIterator</em>.whatToShow;
-</pre>
+    var nodeTypes = nodeIterator.whatToShow;
 
-<p>Les valeurs pouvant être combinées pour former le masque de bits sont :</p>
+Les valeurs pouvant être combinées pour former le masque de bits sont :
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <td class="header">Constante</td>
-   <td class="header">Valeur numérique</td>
-   <td class="header">Description</td>
-  </tr>
-  <tr>
-   <td><code>NodeFilter.SHOW_ALL</code></td>
-   <td><code>-1</code> (c'est la valeur numérique maximale du <code>unsigned long</code> (<em>non signé long</em>))</td>
-   <td>Affiche tous les noeuds.</td>
-  </tr>
-  <tr>
-   <td><code>NodeFilter.SHOW_ATTRIBUTE</code> {{deprecated_inline}}</td>
-   <td><code>2</code></td>
-   <td>Affiche l'attribut {{domxref("Attr")}} des noeuds. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{domxref("Attr")}} comme racine ; dans ce cas, cela signifie que le nœud d'attribut apparaîtra dans la première position de l'itération ou de la traversée. Comme les attributs ne sont jamais des enfants d'autres nœuds, ils n'apparaissent pas lors de la traversée de l'arbre du document.</td>
-  </tr>
-  <tr>
-   <td><code>NodeFilter.SHOW_CDATA_SECTION</code> {{deprecated_inline}}</td>
-   <td><code>8</code></td>
-   <td>Affiche les noeuds {{domxref("CDATASection")}}.</td>
-  </tr>
-  <tr>
-   <td><code>NodeFilter.SHOW_COMMENT</code></td>
-   <td><code>128</code></td>
-   <td>Affiche les noeuds {{domxref("Comment")}}.</td>
-  </tr>
-  <tr>
-   <td><code>NodeFilter.SHOW_DOCUMENT</code></td>
-   <td><code>256</code></td>
-   <td>Affiche les noeuds {{domxref("Document")}}.</td>
-  </tr>
-  <tr>
-   <td><code>NodeFilter.SHOW_DOCUMENT_FRAGMENT</code></td>
-   <td><code>1024</code></td>
-   <td>Affiche les noeuds {{domxref("DocumentFragment")}}.</td>
-  </tr>
-  <tr>
-   <td><code>NodeFilter.SHOW_DOCUMENT_TYPE</code></td>
-   <td><code>512</code></td>
-   <td>Affiche les noeuds {{domxref("DocumentType")}}.</td>
-  </tr>
-  <tr>
-   <td><code>NodeFilter.SHOW_ELEMENT</code></td>
-   <td><code>1</code></td>
-   <td>Affiche les noeuds {{domxref("Element")}}.</td>
-  </tr>
-  <tr>
-   <td><code>NodeFilter.SHOW_ENTITY</code> {{deprecated_inline}}</td>
-   <td><code>32</code></td>
-   <td>Affiche les noeuds {{domxref("Entity")}}. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{ domxref("Entity") }} comme racine ; dans ce cas, il signifie que le noeud d'entité {{domxref("Entity") }} apparaîtra à la première position de la traversée. Étant donné que les entités ne font pas partie de l'arborescence du document, elles n'apparaissent pas lors de la traversée de l'arborescence du document.</td>
-  </tr>
-  <tr>
-   <td><code>NodeFilter.SHOW_ENTITY_REFERENCE</code> {{deprecated_inline}}</td>
-   <td><code>16</code></td>
-   <td>Affiche les noeuds {{domxref("EntityReference")}}.</td>
-  </tr>
-  <tr>
-   <td><code>NodeFilter.SHOW_NOTATION</code> {{deprecated_inline}}</td>
-   <td><code>2048</code></td>
-   <td>Affiche les noeuds {{domxref("Notation")}}. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{domxref("Notation")}} comme racine ; dans ce cas, il signifie que le noeud {{domxref("Notation")}} apparaîtra à la première position de la traversée. Étant donné que les entités ne font pas partie de l'arborescence du document, elles n'apparaissent pas lors de la traversée de l'arborescence du document.</td>
-  </tr>
-  <tr>
-   <td><code>NodeFilter.SHOW_PROCESSING_INSTRUCTION</code></td>
-   <td><code>64</code></td>
-   <td>Affiche les noeuds {{domxref("ProcessingInstruction")}}.</td>
-  </tr>
-  <tr>
-   <td><code>NodeFilter.SHOW_TEXT</code></td>
-   <td><code>4</code></td>
-   <td>Affiche les noeuds {{domxref("Text")}}.</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <td class="header">Constante</td>
+      <td class="header">Valeur numérique</td>
+      <td class="header">Description</td>
+    </tr>
+    <tr>
+      <td><code>NodeFilter.SHOW_ALL</code></td>
+      <td>
+        <code>-1</code> (c'est la valeur numérique maximale du
+        <code>unsigned long</code> (<em>non signé long</em>))
+      </td>
+      <td>Affiche tous les noeuds.</td>
+    </tr>
+    <tr>
+      <td>
+        <code>NodeFilter.SHOW_ATTRIBUTE</code> {{deprecated_inline}}
+      </td>
+      <td><code>2</code></td>
+      <td>
+        Affiche l'attribut {{domxref("Attr")}} des noeuds. Cela n'a de sens
+        que lors de la création d'un {{domxref("TreeWalker")}} avec un
+        noeud {{domxref("Attr")}} comme racine ; dans ce cas, cela signifie
+        que le nœud d'attribut apparaîtra dans la première position de
+        l'itération ou de la traversée. Comme les attributs ne sont jamais des
+        enfants d'autres nœuds, ils n'apparaissent pas lors de la traversée de
+        l'arbre du document.
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <code>NodeFilter.SHOW_CDATA_SECTION</code> {{deprecated_inline}}
+      </td>
+      <td><code>8</code></td>
+      <td>Affiche les noeuds {{domxref("CDATASection")}}.</td>
+    </tr>
+    <tr>
+      <td><code>NodeFilter.SHOW_COMMENT</code></td>
+      <td><code>128</code></td>
+      <td>Affiche les noeuds {{domxref("Comment")}}.</td>
+    </tr>
+    <tr>
+      <td><code>NodeFilter.SHOW_DOCUMENT</code></td>
+      <td><code>256</code></td>
+      <td>Affiche les noeuds {{domxref("Document")}}.</td>
+    </tr>
+    <tr>
+      <td><code>NodeFilter.SHOW_DOCUMENT_FRAGMENT</code></td>
+      <td><code>1024</code></td>
+      <td>Affiche les noeuds {{domxref("DocumentFragment")}}.</td>
+    </tr>
+    <tr>
+      <td><code>NodeFilter.SHOW_DOCUMENT_TYPE</code></td>
+      <td><code>512</code></td>
+      <td>Affiche les noeuds {{domxref("DocumentType")}}.</td>
+    </tr>
+    <tr>
+      <td><code>NodeFilter.SHOW_ELEMENT</code></td>
+      <td><code>1</code></td>
+      <td>Affiche les noeuds {{domxref("Element")}}.</td>
+    </tr>
+    <tr>
+      <td><code>NodeFilter.SHOW_ENTITY</code> {{deprecated_inline}}</td>
+      <td><code>32</code></td>
+      <td>
+        Affiche les noeuds {{domxref("Entity")}}. Cela n'a de sens que
+        lors de la création d'un {{domxref("TreeWalker")}} avec un noeud
+        {{ domxref("Entity") }} comme racine ; dans ce cas, il signifie
+        que le noeud d'entité {{domxref("Entity") }} apparaîtra à la
+        première position de la traversée. Étant donné que les entités ne font
+        pas partie de l'arborescence du document, elles n'apparaissent pas lors
+        de la traversée de l'arborescence du document.
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <code>NodeFilter.SHOW_ENTITY_REFERENCE</code>
+        {{deprecated_inline}}
+      </td>
+      <td><code>16</code></td>
+      <td>Affiche les noeuds {{domxref("EntityReference")}}.</td>
+    </tr>
+    <tr>
+      <td>
+        <code>NodeFilter.SHOW_NOTATION</code> {{deprecated_inline}}
+      </td>
+      <td><code>2048</code></td>
+      <td>
+        Affiche les noeuds {{domxref("Notation")}}. Cela n'a de sens
+        que lors de la création d'un {{domxref("TreeWalker")}} avec un
+        noeud {{domxref("Notation")}} comme racine ; dans ce cas, il
+        signifie que le noeud {{domxref("Notation")}} apparaîtra à la
+        première position de la traversée. Étant donné que les entités ne font
+        pas partie de l'arborescence du document, elles n'apparaissent pas lors
+        de la traversée de l'arborescence du document.
+      </td>
+    </tr>
+    <tr>
+      <td><code>NodeFilter.SHOW_PROCESSING_INSTRUCTION</code></td>
+      <td><code>64</code></td>
+      <td>
+        Affiche les noeuds {{domxref("ProcessingInstruction")}}.
+      </td>
+    </tr>
+    <tr>
+      <td><code>NodeFilter.SHOW_TEXT</code></td>
+      <td><code>4</code></td>
+      <td>Affiche les noeuds {{domxref("Text")}}.</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">var nodeIterator = document.createNodeIterator(
+```js
+var nodeIterator = document.createNodeIterator(
     document.body,
     NodeFilter.SHOW_ELEMENT + NodeFilter.SHOW_COMMENT + NodeFilter.SHOW_TEXT,
     { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
     false
 );
 if( (nodeIterator.whatToShow == NodeFilter.SHOW_ALL) ||
-    (nodeIterator.whatToShow % (NodeFilter.SHOW_COMMENT*2)) &gt;= NodeFilter.SHOW_COMMENT) {
+    (nodeIterator.whatToShow % (NodeFilter.SHOW_COMMENT*2)) >= NodeFilter.SHOW_COMMENT) {
     // nodeIterator affichera les commentaires
 }
-</pre>
+```
 
-<h2 id="Specification">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#dom-nodeiterator-whattoshow', 'NodeIterator.whatToShow')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Pas de changement depuis {{SpecName('DOM2 Traversal_Range')}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-NodeIterator-whatToShow', 'NodeIterator.whatToShow')}}</td>
-   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
-   <td>Définitioni initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Spécifications
 
+| Spécification                                                                                                                                            | Statut                                       | Commentaire                                                                |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------------------------------------------------------------- |
+| {{SpecName('DOM WHATWG', '#dom-nodeiterator-whattoshow', 'NodeIterator.whatToShow')}}                                         | {{Spec2('DOM WHATWG')}}             | Pas de changement depuis {{SpecName('DOM2 Traversal_Range')}}. |
+| {{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-NodeIterator-whatToShow', 'NodeIterator.whatToShow')}} | {{Spec2('DOM2 Traversal_Range')}} | Définitioni initiale.                                                      |
 
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.NodeIterator.whatToShow")}}</p>
+{{Compat("api.NodeIterator.whatToShow")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>L'interface à laquelle cette propriété appartient : {{domxref("NodeIterator")}}.</li>
-</ul>
+- L'interface à laquelle cette propriété appartient : {{domxref("NodeIterator")}}.
diff --git a/files/fr/web/api/nodelist/entries/index.md b/files/fr/web/api/nodelist/entries/index.md
index 55a048203d..cfe4b4b73a 100644
--- a/files/fr/web/api/nodelist/entries/index.md
+++ b/files/fr/web/api/nodelist/entries/index.md
@@ -12,21 +12,22 @@ tags:
   - Noeuds
 translation_of: Web/API/NodeList/entries
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p>La méthode <code><strong>NodeList.entries()</strong></code> renvoie un {{jsxref("Les_protocoles_iteration",'itérateur')}} permettant de parcourir toutes les paires clé / valeur contenues dans cet objet . Les valeurs sont des objets {{domxref("Node")}}.</p>
+La méthode **`NodeList.entries()`** renvoie un {{jsxref("Les_protocoles_iteration",'itérateur')}} permettant de parcourir toutes les paires clé / valeur contenues dans cet objet . Les valeurs sont des objets {{domxref("Node")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">list.entries();</pre>
+    list.entries();
 
-<h3 id="Valeur_retournée">Valeur retournée</h3>
+### Valeur retournée
 
-<p>renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}}.</p>
+renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}}.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">var node = document.createElement("div");
+```js
+var node = document.createElement("div");
 var kid1 = document.createElement("p");
 var kid2 = document.createTextNode("hey");
 var kid3 = document.createElement("span");
@@ -40,42 +41,25 @@ var list = node.childNodes;
 for (var entry of list.entries()) {
   console.log(entry);
 }
-</pre>
+```
 
-<p>résultat :</p>
+résultat :
 
-<pre>Array [ 0, &lt;p&gt; ]
-Array [ 1, #text "hey" ]
-Array [ 2, &lt;span&gt; ]</pre>
+    Array [ 0, <p> ]
+    Array [ 1, #text "hey" ]
+    Array [ 2, <span> ]
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG','#interface-nodelist','entries() (as iterable&lt;Node&gt;)')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                        | Statut                           | Commentaire          |
+| -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName('DOM WHATWG','#interface-nodelist','entries() (as iterable&lt;Node&gt;)')}} | {{Spec2('DOM WHATWG')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<div>
+{{Compat("api.NodeList.entries")}}
 
+## Voir aussi
 
-<p>{{Compat("api.NodeList.entries")}}</p>
-</div>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("Node")}}</li>
- <li>{{domxref("NodeList")}}</li>
-</ul>
+- {{domxref("Node")}}
+- {{domxref("NodeList")}}
diff --git a/files/fr/web/api/nodelist/foreach/index.md b/files/fr/web/api/nodelist/foreach/index.md
index 0a0eb9f1a8..72a8613f55 100644
--- a/files/fr/web/api/nodelist/foreach/index.md
+++ b/files/fr/web/api/nodelist/foreach/index.md
@@ -9,44 +9,42 @@ tags:
   - Noeuds
 translation_of: Web/API/NodeList/forEach
 ---
-<p>{{APIRef("DOM")}}</p>
+{{APIRef("DOM")}}
 
-<p>La méthode <strong><code>forEach()</code></strong> de l'interface {{domxref("NodeList")}} appelle le rappel donné en paramètre une fois pour chaque paire de valeurs dans la liste, dans l'ordre d'insertion.</p>
+La méthode **`forEach()`** de l'interface {{domxref("NodeList")}} appelle le rappel donné en paramètre une fois pour chaque paire de valeurs dans la liste, dans l'ordre d'insertion.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>nodeList.</em>forEach<em>(callback[, thisArg]);</em>
-</pre>
+    nodeList.forEach(callback[, thisArg]);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>callback</code></dt>
- <dd>Fonction à exécuter pour chaque élément, contenant éventuellement 3 arguments :
- <dl>
-  <dt><em><code>currentValue</code></em></dt>
-  <dd>L'élément en cours de traitement dans la NodeList.</dd>
-  <dt><code><em>currentIndex</em></code></dt>
-  <dd>L'index de l'élément en cours de traitement dans la NodeList.</dd>
-  <dt><em><code>listObj</code></em></dt>
-  <dd>L'objet NodeList auquel <code>forEach()</code> est appliqué.</dd>
- </dl>
- </dd>
- <dt><code>thisArg</code><code> {{Optional_inline}}</code></dt>
- <dd>Valeur à utiliser comme {{jsxref("this")}} lors de l'exécution du <code>callback</code> (<em>rappel</em>).</dd>
-</dl>
+- `callback`
 
-<h3 id="Valeur_retournée">Valeur retournée</h3>
+  - : Fonction à exécuter pour chaque élément, contenant éventuellement 3 arguments :
 
-<p>{{jsxref('undefined')}} (<em>indéfini</em>).</p>
+    - _`currentValue`_
+      - : L'élément en cours de traitement dans la NodeList.
+    - `currentIndex`
+      - : L'index de l'élément en cours de traitement dans la NodeList.
+    - _`listObj`_
+      - : L'objet NodeList auquel `forEach()` est appliqué.
 
-<h2 id="Exceptions">Exceptions</h2>
+- ` thisArg`` {{Optional_inline}}  `
+  - : Valeur à utiliser comme {{jsxref("this")}} lors de l'exécution du `callback` (_rappel_).
 
-<p><em>Aucune</em>.</p>
+### Valeur retournée
 
-<h2 id="Exemple">Exemple</h2>
+{{jsxref('undefined')}} (_indéfini_).
 
-<pre class="brush: js">var node = document.createElement("div");
+## Exceptions
+
+_Aucune_.
+
+## Exemple
+
+```js
+var node = document.createElement("div");
 var kid1 = document.createElement("p");
 var kid2 = document.createTextNode("hey");
 var kid3 = document.createElement("span");
@@ -62,62 +60,42 @@ list.forEach(
     console.log(currentValue + ', ' + currentIndex + ', ' + this);
   },
   'myThisArg'
-);</pre>
+);
+```
 
-<p>résultat :</p>
+résultat :
 
-<pre>[object HTMLParagraphElement], 0, myThisArg
-[object Text], 1, myThisArg
-[object HTMLSpanElement], 2, myThisArg</pre>
+    [object HTMLParagraphElement], 0, myThisArg
+    [object Text], 1, myThisArg
+    [object HTMLSpanElement], 2, myThisArg
 
-<h2 id="Polyfill">Polyfill</h2>
+## Polyfill
 
-<p>Ce {{Glossary("Polyfill","polyfill")}} ajoute une compatibilité à tous les navigateurs prenant en charge <a href="https://caniuse.com/#search=es5">ES5</a> :</p>
+Ce {{Glossary("Polyfill","polyfill")}} ajoute une compatibilité à tous les navigateurs prenant en charge [ES5](https://caniuse.com/#search=es5) :
 
-<pre class="brush: js">if (window.NodeList &amp;&amp; !NodeList.prototype.forEach) {
+```js
+if (window.NodeList && !NodeList.prototype.forEach) {
     NodeList.prototype.forEach = function (callback, thisArg) {
         thisArg = thisArg || window;
-        for (var i = 0; i &lt; this.length; i++) {
+        for (var i = 0; i < this.length; i++) {
             callback.call(thisArg, this[i], i, this);
         }
     };
-}</pre>
-
-<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('DOM WHATWG', '#interface-nodelist', 'NodeList')}}</td>
-   <td>{{ Spec2('DOM WHATWG') }}</td>
-   <td>Définit <code>NodeList</code> comme <code>iterable&lt;Node&gt; </code>(<em>noeud itérable</em>)</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("WebIDL", "#es-forEach", "forEach")}}</td>
-   <td>{{Spec2("WebIDL")}}</td>
-   <td>Définit <code>forEach</code> sur les déclarations <code>iterable</code> (<em>itératives</em>)</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<div>
-
-
-<p>{{Compat("api.NodeList.forEach")}}</p>
-</div>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("Node")}}</li>
- <li>{{domxref("NodeList")}}</li>
-</ul>
+}
+```
+
+## Spécifications
+
+| Spécification                                                                    | Statut                           | Commentaire                                                      |
+| -------------------------------------------------------------------------------- | -------------------------------- | ---------------------------------------------------------------- |
+| {{SpecName('DOM WHATWG', '#interface-nodelist', 'NodeList')}} | {{ Spec2('DOM WHATWG') }} | Définit `NodeList` comme `iterable<Node> `(_noeud itérable_)     |
+| {{SpecName("WebIDL", "#es-forEach", "forEach")}}                 | {{Spec2("WebIDL")}}         | Définit `forEach` sur les déclarations `iterable` (_itératives_) |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.NodeList.forEach")}}
+
+## Voir aussi
+
+- {{domxref("Node")}}
+- {{domxref("NodeList")}}
diff --git a/files/fr/web/api/nodelist/index.md b/files/fr/web/api/nodelist/index.md
index 38e9a6121e..5f326cadc6 100644
--- a/files/fr/web/api/nodelist/index.md
+++ b/files/fr/web/api/nodelist/index.md
@@ -9,111 +9,87 @@ tags:
   - Noeuds
 translation_of: Web/API/NodeList
 ---
-<p>{{APIRef("DOM")}}</p>
+{{APIRef("DOM")}}
 
-<p>Les objets <strong><code>NodeList</code></strong> sont des collections de nœuds comme celles retournées par {{domxref("Node.childNodes")}} et la méthode {{domxref("document.querySelectorAll()")}}.</p>
+Les objets **`NodeList`** sont des collections de nœuds comme celles retournées par {{domxref("Node.childNodes")}} et la méthode {{domxref("document.querySelectorAll()")}}.
 
-<div class="note">
-<p><strong>Note :</strong> Bien que <code>NodeList</code> ne soit pas un tableau (<code>Array</code>), il est possible d'itérer dessus en utilisant <code>forEach()</code>. Il peut également être converti en tableau (<code>Array</code>) en utilisant {{jsxref("Array.from()")}}.</p>
+> **Note :** Bien que `NodeList` ne soit pas un tableau (`Array`), il est possible d'itérer dessus en utilisant `forEach()`. Il peut également être converti en tableau (`Array`) en utilisant {{jsxref("Array.from()")}}.
+>
+> Néanmoins certains vieux navigateurs n'ont pas encore implémenté `NodeList.forEach()` ni `Array.from()`. Mais ces limitations peuvent être contournées en utilisant {{jsxref("Array.forEach()", "Array.prototype.forEach()")}} (plus dans ce document).
 
-<p>Néanmoins certains vieux navigateurs n'ont pas encore implémenté <code>NodeList.forEach()</code> ni <code>Array.from()</code>. Mais ces limitations peuvent être contournées en utilisant {{jsxref("Array.forEach()", "Array.prototype.forEach()")}} (plus dans ce document).</p>
-</div>
+Dans certains cas, la `NodeList` est une collection en direct, ce qui signifie que les changements dans le DOM sont reflétés dans la collection. Par exemple,  {{domxref("Node.childNodes")}} est en direct :
 
-<p>Dans certains cas, la <code>NodeList</code> est une collection en direct, ce qui signifie que les changements dans le DOM sont reflétés dans la collection. Par exemple,  {{domxref("Node.childNodes")}} est en direct :</p>
-
-<pre class="brush: js">var parent = document.getElementById('parent');
+```js
+var parent = document.getElementById('parent');
 var child_nodes = parent.childNodes;
 console.log(child_nodes.length); // supposons "2"
 parent.appendChild(document.createElement('div'));
-console.log(child_nodes.length); // devrait afficher "3"</pre>
+console.log(child_nodes.length); // devrait afficher "3"
+```
 
-<p>Dans d'autres cas, la <code>NodeList</code> est une collection statique, ce qui signifie que tout changement dans le DOM n'affectera pas le contenu de la collection. {{domxref("document.querySelectorAll()")}}  renvoie une <code>NodeList</code> statique.</p>
+Dans d'autres cas, la `NodeList` est une collection statique, ce qui signifie que tout changement dans le DOM n'affectera pas le contenu de la collection. {{domxref("document.querySelectorAll()")}}  renvoie une `NodeList` statique.
 
-<p>Il est bon de garder cette distinction à l'esprit pour choisir la façon de parcourir les éléments de la liste des nœuds et, en particulier, pour mettre en cache la longueur de la liste.</p>
+Il est bon de garder cette distinction à l'esprit pour choisir la façon de parcourir les éléments de la liste des nœuds et, en particulier, pour mettre en cache la longueur de la liste.
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<dl>
- <dt>{{domxref("NodeList.length")}}</dt>
- <dd>Le nombre de nœuds dans la <code>NodeList</code>.</dd>
-</dl>
+- {{domxref("NodeList.length")}}
+  - : Le nombre de nœuds dans la `NodeList`.
 
-<h2 id="Méthodes">Méthodes</h2>
+## Méthodes
 
-<dl>
- <dt>{{domxref("NodeList.item()")}}</dt>
- <dd>Retourne un élément de la liste par son index ou <code>null</code> si l'index est en dehors des limites. Équivalent à <code>nodeList[idx]</code> (qui renvoie à la place <code>undefined</code> quand  <code>idx</code> est hors des limites).</dd>
- <dt>{{domxref("NodeList.entries()")}}</dt>
- <dd>renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}} permettant de parcourir toutes les paires clé / valeur contenues dans cet objet.</dd>
- <dt>{{domxref("NodeList.forEach()")}}</dt>
- <dd>exécute une fonction fournie une fois par élément <code>NodeList</code>.</dd>
- <dt>{{domxref("NodeList.keys()")}}</dt>
- <dd>renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}} permettant de parcourir toutes les clés des paires clé / valeur contenues dans cet objet.</dd>
- <dt>{{domxref("NodeList.values()")}}</dt>
- <dd>renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}} permettant de parcourir toutes les valeurs des paires clé / valeur contenues dans cet objet.</dd>
-</dl>
+- {{domxref("NodeList.item()")}}
+  - : Retourne un élément de la liste par son index ou `null` si l'index est en dehors des limites. Équivalent à `nodeList[idx]` (qui renvoie à la place `undefined` quand  `idx` est hors des limites).
+- {{domxref("NodeList.entries()")}}
+  - : renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}} permettant de parcourir toutes les paires clé / valeur contenues dans cet objet.
+- {{domxref("NodeList.forEach()")}}
+  - : exécute une fonction fournie une fois par élément `NodeList`.
+- {{domxref("NodeList.keys()")}}
+  - : renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}} permettant de parcourir toutes les clés des paires clé / valeur contenues dans cet objet.
+- {{domxref("NodeList.values()")}}
+  - : renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}} permettant de parcourir toutes les valeurs des paires clé / valeur contenues dans cet objet.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Il est possible de boucler sur les éléments d'une <code>NodeList</code> en utilisant :</p>
+Il est possible de boucler sur les éléments d'une `NodeList` en utilisant :
 
-<pre class="brush: js">for (var i = 0; i &lt; myNodeList.length; ++i) {
+```js
+for (var i = 0; i < myNodeList.length; ++i) {
   var item = myNodeList[i];  // L'appel de myNodeList.item(i) n'est pas nécessaire en JavaScript
 }
-</pre>
+```
 
-<p>Ne soyez pas tenté d'utiliser <code><a href="/fr/docs/JavaScript/Reference/Instructions/for...in">for… in</a></code> ou <code><a href="/fr/docs/JavaScript/Reference/Instructions/for_each…in">for each… in</a></code> pour énumérer les éléments de la liste, car cela énumère également la taille (<code>length</code>) et les propriétés du <code>NodeList</code> et cause des erreurs si votre script ne gère que les objets de type {{domxref("element")}}. De plus, <code>for… in</code> ne garantit pas de visiter les propriétés dans un ordre particulier.</p>
+Ne soyez pas tenté d'utiliser [`for… in`](/fr/docs/JavaScript/Reference/Instructions/for...in) ou [`for each… in`](/fr/docs/JavaScript/Reference/Instructions/for_each…in) pour énumérer les éléments de la liste, car cela énumère également la taille (`length`) et les propriétés du `NodeList` et cause des erreurs si votre script ne gère que les objets de type {{domxref("element")}}. De plus, `for… in` ne garantit pas de visiter les propriétés dans un ordre particulier.
 
-<p>Les boucles <code><a href="/fr/docs/JavaScript/Référence_JavaScript/Instructions/for...of">for… of</a></code> boucleront correctement sur les objets <code>NodeList</code> :</p>
+Les boucles [`for… of`](/fr/docs/JavaScript/Référence_JavaScript/Instructions/for...of) boucleront correctement sur les objets `NodeList` :
 
-<pre class="brush: js">var list = document.querySelectorAll( 'input[type=checkbox]' );
+```js
+var list = document.querySelectorAll( 'input[type=checkbox]' );
 for (var item of list) {
   item.checked = true;
-}</pre>
+}
+```
 
-<p>Les navigateurs récents prennent également en charge les méthodes d'itérateur {{domxref("NodeList.forEach()", "forEach()")}}, aussi bien que {{domxref("NodeList.entries()", "entries()")}}, {{domxref("NodeList.values()", "values()")}} et {{domxref("NodeList.keys()", "keys()")}}.</p>
+Les navigateurs récents prennent également en charge les méthodes d'itérateur {{domxref("NodeList.forEach()", "forEach()")}}, aussi bien que {{domxref("NodeList.entries()", "entries()")}}, {{domxref("NodeList.values()", "values()")}} et {{domxref("NodeList.keys()", "keys()")}}.
 
-<p>Il y a aussi dans Internet Explorer une façon compatible d'utiliser {{jsxref("Array.forEach()", "Array.prototype.forEach")}} pour l'itération.</p>
+Il y a aussi dans Internet Explorer une façon compatible d'utiliser {{jsxref("Array.forEach()", "Array.prototype.forEach")}} pour l'itération.
 
-<pre class="brush: js">var list = document.querySelectorAll( 'input[type=checkbox]' );
+```js
+var list = document.querySelectorAll( 'input[type=checkbox]' );
 Array.prototype.forEach.call(list, function (item) {
   item.checked = true;
-});</pre>
-
-<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('DOM WHATWG', '#interface-nodelist', 'NodeList')}}</td>
-   <td>{{ Spec2('DOM WHATWG') }}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM3 Core', 'core.html#ID-536297177', 'NodeList')}}</td>
-   <td>{{ Spec2('DOM3 Core') }}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Core', 'core.html#ID-536297177', 'NodeList')}}</td>
-   <td>{{ Spec2('DOM2 Core') }}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM1', 'level-one-core.html#ID-536297177', 'NodeList')}}</td>
-   <td>{{ Spec2('DOM1') }}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.NodeList")}}</p>
+});
+```
+
+## Spécifications
+
+| Spécification                                                                                | Statut                           | Commentaire          |
+| -------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName('DOM WHATWG', '#interface-nodelist', 'NodeList')}}             | {{ Spec2('DOM WHATWG') }} |                      |
+| {{SpecName('DOM3 Core', 'core.html#ID-536297177', 'NodeList')}}         | {{ Spec2('DOM3 Core') }} |                      |
+| {{SpecName('DOM2 Core', 'core.html#ID-536297177', 'NodeList')}}         | {{ Spec2('DOM2 Core') }} |                      |
+| {{SpecName('DOM1', 'level-one-core.html#ID-536297177', 'NodeList')}} | {{ Spec2('DOM1') }}         | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.NodeList")}}
diff --git a/files/fr/web/api/nodelist/item/index.md b/files/fr/web/api/nodelist/item/index.md
index 8cee3e9216..d2c00f687f 100644
--- a/files/fr/web/api/nodelist/item/index.md
+++ b/files/fr/web/api/nodelist/item/index.md
@@ -9,42 +9,37 @@ tags:
   - Noeuds
 translation_of: Web/API/NodeList/item
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p>Renvoie un noeud depuis une <a href="/en-US/docs/Web/API/NodeList"><code>NodeList</code></a> par l'index. Cette méthode ne lance pas d'exceptions tant que vous fournissez des arguments. Une valeur <code>null</code> est renvoyée si l'index est hors des limites et une <code>TypeError</code> est lancée si aucun argument n'est fourni.</p>
+Renvoie un noeud depuis une [`NodeList`](/en-US/docs/Web/API/NodeList) par l'index. Cette méthode ne lance pas d'exceptions tant que vous fournissez des arguments. Une valeur `null` est renvoyée si l'index est hors des limites et une `TypeError` est lancée si aucun argument n'est fourni.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>nodeItem</em> = <em>nodeList</em>.item(<em>index</em>)
-</pre>
+    nodeItem = nodeList.item(index)
 
-<ul>
- <li><code>nodeList</code> est une <code>NodeList</code>. Elle est généralement obtenue à partir d'une autre propriété ou méthode DOM, telle que <a href="/en-US/docs/Web/API/Node/childNodes">childNodes</a>.</li>
- <li><code>index</code> est l'index du noeud à chercher. L'index commence à zéro.</li>
- <li><code>nodeItem</code> est le numéro d'<code>index</code> du noeud dans la <code>nodeList</code> retourné par la méthode <code>item</code>.</li>
-</ul>
+- `nodeList` est une `NodeList`. Elle est généralement obtenue à partir d'une autre propriété ou méthode DOM, telle que [childNodes](/en-US/docs/Web/API/Node/childNodes).
+- `index` est l'index du noeud à chercher. L'index commence à zéro.
+- `nodeItem` est le numéro d'`index` du noeud dans la `nodeList` retourné par la méthode `item`.
 
-<h2 id="Syntaxe_alternative">Syntaxe alternative</h2>
+## Syntaxe alternative
 
-<p>JavaScript propose également une syntaxe semblable à un tableau pour obtenir un élément d'une liste de nœuds par index :</p>
+JavaScript propose également une syntaxe semblable à un tableau pour obtenir un élément d'une liste de nœuds par index :
 
-<pre class="eval"><em>nodeItem</em> = <em>nodeList</em>[<em>index</em>]
-</pre>
+    nodeItem = nodeList[index]
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">var tables = document.getElementsByTagName("table");
-var firstTable = tables.item(1); // ou simplement tables[1] - renvoie le <strong>second</strong> tableau dans DOM
-</pre>
+```js
+var tables = document.getElementsByTagName("table");
+var firstTable = tables.item(1); // ou simplement tables[1] - renvoie le second tableau dans DOM
+```
 
-<h2 id="Spécification">Spécification</h2>
+## Spécification
 
-<p><a href="https://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-item">DOM Level 1 Core: NodeList.item()</a></p>
+[DOM Level 1 Core: NodeList.item()](https://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-item)
 
-<p><a href="https://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-844377136">DOM Level 2 Core: NodeList.item()</a></p>
+[DOM Level 2 Core: NodeList.item()](https://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-844377136)
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-
-
-<p>{{Compat("api.NodeList.item")}}</p>
+{{Compat("api.NodeList.item")}}
diff --git a/files/fr/web/api/nodelist/keys/index.md b/files/fr/web/api/nodelist/keys/index.md
index 79da27b5b6..e0076b5588 100644
--- a/files/fr/web/api/nodelist/keys/index.md
+++ b/files/fr/web/api/nodelist/keys/index.md
@@ -9,21 +9,22 @@ tags:
   - Noeuds
 translation_of: Web/API/NodeList/keys
 ---
-<p>{{APIRef("DOM")}}</p>
+{{APIRef("DOM")}}
 
-<p>La méthode <code><strong>NodeList.keys()</strong></code> renvoie un {{jsxref("Les_protocoles_iteration",'itérateur')}} permettant de parcourir toutes les clés contenues dans cet objet. Les clés sont des <code>unsigned integer</code> (<em>entier non signé</em>).</p>
+La méthode **`NodeList.keys()`** renvoie un {{jsxref("Les_protocoles_iteration",'itérateur')}} permettant de parcourir toutes les clés contenues dans cet objet. Les clés sont des `unsigned integer` (_entier non signé_).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">nodeList.keys();</pre>
+    nodeList.keys();
 
-<h3 id="Valeur_retournée">Valeur retournée</h3>
+### Valeur retournée
 
-<p>Renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}}.</p>
+Renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}}.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">var node = document.createElement("div");
+```js
+var node = document.createElement("div");
 var kid1 = document.createElement("p");
 var kid2 = document.createTextNode("hey");
 var kid3 = document.createElement("span");
@@ -38,43 +39,25 @@ var list = node.childNodes;
 for(var key of list.keys()) {
    console.log(key);
 }
-</pre>
+```
 
-<p>Le résultat est :</p>
+Le résultat est :
 
-<pre>0
-1
-2
-</pre>
+    0
+    1
+    2
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG','#interface-nodelist','keys() (as iterable)')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                    | Statut                           | Commentaire          |
+| ------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName('DOM WHATWG','#interface-nodelist','keys() (as iterable)')}} | {{Spec2('DOM WHATWG')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<div>
+{{Compat("api.NodeList.keys")}}
 
+## Voir aussi
 
-<p>{{Compat("api.NodeList.keys")}}</p>
-</div>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("Node")}}</li>
- <li>{{domxref("NodeList")}}</li>
-</ul>
+- {{domxref("Node")}}
+- {{domxref("NodeList")}}
diff --git a/files/fr/web/api/nodelist/length/index.md b/files/fr/web/api/nodelist/length/index.md
index 0bc3206cd6..8e952d0472 100644
--- a/files/fr/web/api/nodelist/length/index.md
+++ b/files/fr/web/api/nodelist/length/index.md
@@ -9,46 +9,44 @@ tags:
   - Propriétés
 translation_of: Web/API/NodeList/length
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<h2 id="Résumé">Résumé</h2>
+## Résumé
 
-<p><code>length</code> renvoie le nombre d'éléments dans une <code>NodeList</code>.</p>
+`length` renvoie le nombre d'éléments dans une `NodeList`.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js"><em>numItems</em> =<em>nodeList</em>.length
-</pre>
+```js
+numItems =nodeList.length
+```
 
-<ul>
- <li><code>numItems</code> est un entier (<em>integer</em>), valeur représentant le nombre d'éléments dans une <code>NodeList</code>.</li>
-</ul>
+- `numItems` est un entier (_integer_), valeur représentant le nombre d'éléments dans une `NodeList`.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">// tous les paragraphes dans le document
+```js
+// tous les paragraphes dans le document
 var items = document.getElementsByTagName("p");
 // pour chaque élément de la liste,
 // ajouter l'élément entier en tant que chaîne de HTML
 var gross = "";
-for (var i = 0; i &lt; items.length; i++) {
+for (var i = 0; i < items.length; i++) {
   gross += items[i].innerHTML;
 }
 // gross est maintenant tout le HTML pour les paragraphes
-</pre>
+```
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p>Malgré l'emplacement de cette page dans la référence, <code>length</code> n'est pas une propriété d'<a href="en/DOM/element">Element</a>, mais plutôt d'une <code>NodeList</code>. Les objets NodeList sont retournés à partir des méthodes DOM comme <a href="en/DOM/document.getElementsByTagName">document.getElementsByTagName</a>.</p>
+Malgré l'emplacement de cette page dans la référence, `length` n'est pas une propriété d'[Element](en/DOM/element), mais plutôt d'une `NodeList`. Les objets NodeList sont retournés à partir des méthodes DOM comme [document.getElementsByTagName](en/DOM/document.getElementsByTagName).
 
-<p><code>length</code> est une propriété très commune dans la programmation de DOM. Il est très courant de tester la longueur d'une liste (pour voir si elle existe) et de l'utiliser comme itérateur dans une boucle for, comme dans l'exemple ci-dessus.</p>
+`length` est une propriété très commune dans la programmation de DOM. Il est très courant de tester la longueur d'une liste (pour voir si elle existe) et de l'utiliser comme itérateur dans une boucle for, comme dans l'exemple ci-dessus.
 
-<h2 id="Specification">Spécification</h2>
+## Spécification
 
-<p><a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-203510337">length</a></p>
+[length](http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-203510337)
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-
-
-<p>{{Compat("api.NodeList.length")}}</p>
+{{Compat("api.NodeList.length")}}
diff --git a/files/fr/web/api/nodelist/values/index.md b/files/fr/web/api/nodelist/values/index.md
index 74cf0f4ad5..5d3bc66e7d 100644
--- a/files/fr/web/api/nodelist/values/index.md
+++ b/files/fr/web/api/nodelist/values/index.md
@@ -10,21 +10,22 @@ tags:
   - Noeuds
 translation_of: Web/API/NodeList/values
 ---
-<p>{{APIRef("DOM")}}</p>
+{{APIRef("DOM")}}
 
-<p>La méthode <code><strong>NodeList.values()</strong></code> renvoie un {{jsxref("Les_protocoles_iteration",'itérateur')}} permettant de parcourir toutes les valeurs contenues dans cet objet. Les valeurs sont des objets {{domxref("Node")}} (<em>noeud</em>).</p>
+La méthode **`NodeList.values()`** renvoie un {{jsxref("Les_protocoles_iteration",'itérateur')}} permettant de parcourir toutes les valeurs contenues dans cet objet. Les valeurs sont des objets {{domxref("Node")}} (_noeud_).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">nodeList.values();</pre>
+    nodeList.values();
 
-<h3 id="Valeur_retournée">Valeur retournée</h3>
+### Valeur retournée
 
-<p>Renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}}.</p>
+Renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}}.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">var node = document.createElement("div");
+```js
+var node = document.createElement("div");
 var kid1 = document.createElement("p");
 var kid2 = document.createTextNode("hey");
 var kid3 = document.createElement("span");
@@ -39,43 +40,25 @@ var list = node.childNodes;
 for(var value of list.values()) {
   console.log(value);
 }
-</pre>
+```
 
-<p>Le résultat est :</p>
+Le résultat est :
 
-<pre>&lt;p&gt;
-#text "hey"
-&lt;span&gt;
-</pre>
+    <p>
+    #text "hey"
+    <span>
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG','#interface-nodelist','values() (as iterable&lt;Node&gt;)')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                    | Statut                           | Commentaire         |
+| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- |
+| {{SpecName('DOM WHATWG','#interface-nodelist','values() (as iterable&lt;Node&gt;)')}} | {{Spec2('DOM WHATWG')}} | Définition initiale |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<div>
+{{Compat("api.NodeList.values")}}
 
+## Voir aussi
 
-<p>{{Compat("api.NodeList.values")}}</p>
-</div>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("Node")}}</li>
- <li>{{domxref("NodeList")}}</li>
-</ul>
+- {{domxref("Node")}}
+- {{domxref("NodeList")}}
diff --git a/files/fr/web/api/notification/actions/index.md b/files/fr/web/api/notification/actions/index.md
index e65543b120..7d161e703d 100644
--- a/files/fr/web/api/notification/actions/index.md
+++ b/files/fr/web/api/notification/actions/index.md
@@ -11,48 +11,33 @@ tags:
   - actions
 translation_of: Web/API/Notification/actions
 ---
-<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
+{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}
 
-<p>La propriété <strong><code>actions</code></strong> en lecture seule de l'interface {{domxref ("Notification")}} renvoie la liste des {{domxref ("NotificationAction")}} objets définis à l'aide de l'option <code>actions</code> lors de la création de la notification à l'aide du constructeur {{domxref("Notification.Notification","Notification()")}}.</p>
+La propriété **`actions`** en lecture seule de l'interface {{domxref ("Notification")}} renvoie la liste des {{domxref ("NotificationAction")}} objets définis à l'aide de l'option `actions` lors de la création de la notification à l'aide du constructeur {{domxref("Notification.Notification","Notification()")}}.
 
-<p>Il s'agit d'une liste des actions définies par l'application que l'utilisateur peut choisir de prendre directement depuis le contexte d'une notification.</p>
+Il s'agit d'une liste des actions définies par l'application que l'utilisateur peut choisir de prendre directement depuis le contexte d'une notification.
 
-<div class="blockIndicator note">
-<p><strong>Note:</strong> Le périphérique et l'agent utilisateur peuvent ne pouvoir afficher qu'un nombre limité d'actions (en raison, par exemple, d'un espace d'écran limité). Cette limite peut être déduite de {{DOMxRef ("Notification.maxActions")}}.</p>
-</div>
+> **Note :** Le périphérique et l'agent utilisateur peuvent ne pouvoir afficher qu'un nombre limité d'actions (en raison, par exemple, d'un espace d'écran limité). Cette limite peut être déduite de {{DOMxRef ("Notification.maxActions")}}.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var>Notification</var>.actions</pre>
+    Notification.actions
 
-<h3 id="Value">Valeur</h3>
+### Valeur
 
-<p>Un tableau en lecture seule d'objets {{domxref ("NotificationAction")}}, chacun décrivant une action unique que l'utilisateur peut choisir dans une notification.</p>
+Un tableau en lecture seule d'objets {{domxref ("NotificationAction")}}, chacun décrivant une action unique que l'utilisateur peut choisir dans une notification.
 
-<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">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Web Notifications','#dom-notification-actions','actions')}}</td>
-   <td>{{Spec2('Web Notifications')}}</td>
-   <td>Living standard</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                    | État                                     | Commentaire     |
+| ------------------------------------------------------------------------------------------------ | ---------------------------------------- | --------------- |
+| {{SpecName('Web Notifications','#dom-notification-actions','actions')}} | {{Spec2('Web Notifications')}} | Living standard |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Notification.actions")}}</p>
+{{Compat("api.Notification.actions")}}
 
-<h2 id="Voir_également">Voir également</h2>
+## Voir également
 
-<ul>
- <li><a href="/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li>
- <li>{{DOMxRef("Notification.maxActions")}}</li>
-</ul>
+- [Utilisation de l'API Notifications](/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API)
+- {{DOMxRef("Notification.maxActions")}}
diff --git a/files/fr/web/api/notification/badge/index.md b/files/fr/web/api/notification/badge/index.md
index 319ba58bb9..b5663529fb 100644
--- a/files/fr/web/api/notification/badge/index.md
+++ b/files/fr/web/api/notification/badge/index.md
@@ -10,35 +10,24 @@ tags:
   - Reference
 translation_of: Web/API/Notification/badge
 ---
-<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
+{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}
 
-<p>La propriété <strong><code>badge</code></strong> de l'interface {{domxref ("Notification")}} renvoie l'URL de l'image utilisée pour représenter la notification lorsqu'il n'y a pas assez d'espace pour afficher la notification elle-même.</p>
+La propriété **`badge`** de l'interface {{domxref ("Notification")}} renvoie l'URL de l'image utilisée pour représenter la notification lorsqu'il n'y a pas assez d'espace pour afficher la notification elle-même.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">const url = Notification.badge</pre>
+    const url = Notification.badge
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>Une {{domxref('USVString')}} contenant une URL.</p>
+Une {{domxref('USVString')}} contenant une URL.
 
-<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">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Web Notifications','#dom-notification-badge','badge')}}</td>
-   <td>{{Spec2('Web Notifications')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                            | État                                     | Commentaire          |
+| ---------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('Web Notifications','#dom-notification-badge','badge')}} | {{Spec2('Web Notifications')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Notification.badge")}}</p>
+{{Compat("api.Notification.badge")}}
diff --git a/files/fr/web/api/notification/body/index.md b/files/fr/web/api/notification/body/index.md
index e19c579157..387db947c8 100644
--- a/files/fr/web/api/notification/body/index.md
+++ b/files/fr/web/api/notification/body/index.md
@@ -11,42 +11,28 @@ tags:
   - Reference
 translation_of: Web/API/Notification/body
 ---
-<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
+{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}
 
-<p>La propriété en lecture seule <strong><code>body</code></strong> de l'interface {{domxref ("Notification")}} est la chaîne de caractères qui correspond au corps de la notification, comme définis à l'aide de l'option <code>body</code> lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification()" )}}.</p>
+La propriété en lecture seule **`body`** de l'interface {{domxref ("Notification")}} est la chaîne de caractères qui correspond au corps de la notification, comme définis à l'aide de l'option `body` lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification()" )}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var>Notification</var>.body
-</pre>
+    Notification.body
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>Une {{domxref("DOMString")}} contenant le corps de la notification.</p>
+Une {{domxref("DOMString")}} contenant le corps de la notification.
 
-<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">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Web Notifications','#dom-notification-body','body')}}</td>
-   <td>{{Spec2('Web Notifications')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                            | État                                     | Commentaire          |
+| ---------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('Web Notifications','#dom-notification-body','body')}} | {{Spec2('Web Notifications')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Notification.body")}}</p>
+{{Compat("api.Notification.body")}}
 
-<h2 id="Voir_également">Voir également</h2>
+## Voir également
 
-<ul>
- <li><a href="/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li>
-</ul>
+- [Utilisation de l'API Notifications](/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API)
diff --git a/files/fr/web/api/notification/close/index.md b/files/fr/web/api/notification/close/index.md
index 359bf36dda..2a41b8cee9 100644
--- a/files/fr/web/api/notification/close/index.md
+++ b/files/fr/web/api/notification/close/index.md
@@ -12,69 +12,55 @@ tags:
   - fermeture
 translation_of: Web/API/Notification/close
 ---
-<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
+{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}
 
-<p>La méthode <code>close()</code> de l'interface {{domxref("Notification")}} est utilisée pour fermer / supprimer une notification précédemment affichée.</p>
+La méthode `close()` de l'interface {{domxref("Notification")}} est utilisée pour fermer / supprimer une notification précédemment affichée.
 
-<div class="note">
-<p><strong>Note:</strong> Cette API ne doit pas être utilisée uniquement pour supprimer la notification de l'écran après un délai fixe, car cette méthode supprimera également la notification de toute barre de notification, empêchant ainsi les utilisateurs d'interagir avec elle après son affichage initial. Une utilisation valable de cette API serait de supprimer une notification qui n'est plus pertinente (par exemple, l'utilisateur a déjà lu la notification sur la page Web dans le cas d'une application de messagerie ou la chanson suivante est déjà en cours de lecture dans une application musicale).</p>
-</div>
+> **Note :** Cette API ne doit pas être utilisée uniquement pour supprimer la notification de l'écran après un délai fixe, car cette méthode supprimera également la notification de toute barre de notification, empêchant ainsi les utilisateurs d'interagir avec elle après son affichage initial. Une utilisation valable de cette API serait de supprimer une notification qui n'est plus pertinente (par exemple, l'utilisateur a déjà lu la notification sur la page Web dans le cas d'une application de messagerie ou la chanson suivante est déjà en cours de lecture dans une application musicale).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">Notification.close()</pre>
+    Notification.close()
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<p>Aucun.</p>
+Aucun.
 
-<h3 id="Returns">Returns</h3>
+### Returns
 
-<p>Void.</p>
+Void.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans l'extrait de code suivant, nous avons une simple fonction qui, lorsqu'elle est appelée, crée un objet <code>options</code>, puis de celui-ci une nouvelle notification. À la fin de la fonction, elle appelle également <code>close()</code> dans une fonction {{domxref ("EventTarget.addEventListener", "addEventListener ()")}} pour supprimer la notification lorsque le contenu pertinent a été lu sur la page Web.</p>
+Dans l'extrait de code suivant, nous avons une simple fonction qui, lorsqu'elle est appelée, crée un objet `options`, puis de celui-ci une nouvelle notification. À la fin de la fonction, elle appelle également `close()` dans une fonction {{domxref ("EventTarget.addEventListener", "addEventListener ()")}} pour supprimer la notification lorsque le contenu pertinent a été lu sur la page Web.
 
-<pre class="brush:js">function spawnNotification(theBody, theIcon, theTitle) {
+```js
+function spawnNotification(theBody, theIcon, theTitle) {
   const options = {
     body: theBody,
     icon: theIcon
   }
 
   const n = new Notification(theTitle, options)
-  document.addEventListener('visibilitychange', () =&gt; {
+  document.addEventListener('visibilitychange', () => {
     if (document.visibilityState === 'visible') {
       // The tab has become visible so clear the now-stale Notification.
       n.close()
     }
   })
 }
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Web Notifications')}}</td>
-   <td>{{Spec2('Web Notifications')}}</td>
-   <td>Living standard</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Notification.close")}}</p>
-
-<h2 id="Voir_également">Voir également</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li>
-</ul>
+```
+
+## Spécifications
+
+| Spécification                                | Status                                   | Comment         |
+| -------------------------------------------- | ---------------------------------------- | --------------- |
+| {{SpecName('Web Notifications')}} | {{Spec2('Web Notifications')}} | Living standard |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Notification.close")}}
+
+## Voir également
+
+- [Utilisation de l'API Notifications](/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API)
diff --git a/files/fr/web/api/notification/data/index.md b/files/fr/web/api/notification/data/index.md
index 22b3b01747..efddb360b1 100644
--- a/files/fr/web/api/notification/data/index.md
+++ b/files/fr/web/api/notification/data/index.md
@@ -11,44 +11,30 @@ tags:
   - données
 translation_of: Web/API/Notification/data
 ---
-<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
+{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}
 
-<p>La propriété en lecture seule <strong><code>data</code></strong> de l'interface {{domxref ("Notification")}} renvoie un clone structuré des données de la notification, comme définis à l'aide de l'option <code>data</code>  lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification() ")}}.</p>
+La propriété en lecture seule **`data`** de l'interface {{domxref ("Notification")}} renvoie un clone structuré des données de la notification, comme définis à l'aide de l'option `data`  lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification() ")}}.
 
-<p>Les données de la notification peuvent être des données arbitraires, sans restriction de format que vous souhaitez associer à la notification.</p>
+Les données de la notification peuvent être des données arbitraires, sans restriction de format que vous souhaitez associer à la notification.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var>Notification</var>.data
-</pre>
+    Notification.data
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>Un clone structuré.</p>
+Un clone structuré.
 
-<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">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Web Notifications','#dom-notification-data','data')}}</td>
-   <td>{{Spec2('Web Notifications')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                            | État                                     | Commentaire          |
+| ---------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('Web Notifications','#dom-notification-data','data')}} | {{Spec2('Web Notifications')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Notification.data")}}</p>
+{{Compat("api.Notification.data")}}
 
-<h2 id="Voir_également">Voir également</h2>
+## Voir également
 
-<ul>
- <li><a href="/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li>
-</ul>
+- [Utilisation de l'API Notifications](/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API)
diff --git a/files/fr/web/api/notification/dir/index.md b/files/fr/web/api/notification/dir/index.md
index 7fed8f84dd..3c3fac0055 100644
--- a/files/fr/web/api/notification/dir/index.md
+++ b/files/fr/web/api/notification/dir/index.md
@@ -11,52 +11,34 @@ tags:
   - direction
 translation_of: Web/API/Notification/dir
 ---
-<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
+{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}
 
-<p>La propriété en lecture seule <strong><code>dir</code></strong> de l'interface {{domxref ("Notification")}} indique le sens du texte de la notification, définis à l'aide de l'option <code>dir</code> lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification()" )}}.</p>
+La propriété en lecture seule **`dir`** de l'interface {{domxref ("Notification")}} indique le sens du texte de la notification, définis à l'aide de l'option `dir` lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification()" )}}.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="eval"><var>Notification</var>.dir
-</pre>
+    Notification.dir
 
-<h3 id="Value">Valeur</h3>
+### Valeur
 
-<p>Une {{domxref ("DOMString")}} spécifiant la direction du texte. Les valeurs possibles sont:</p>
+Une {{domxref ("DOMString")}} spécifiant la direction du texte. Les valeurs possibles sont:
 
-<ul>
- <li><code>auto</code>: adopte le comportement de réglage de la langue du navigateur (par défaut).</li>
- <li><code>ltr</code>: de gauche à droite.</li>
- <li><code>rtl</code> : de droite à gauche.</li>
-</ul>
+- `auto`: adopte le comportement de réglage de la langue du navigateur (par défaut).
+- `ltr`: de gauche à droite.
+- `rtl` : de droite à gauche.
 
-<div class="note">
-<p><strong>Note :</strong> La plupart des navigateurs semblent ignorer les paramètres explicites de ltr et rtl, et utilisent simplement le paramètre à l'échelle du navigateur.</p>
-</div>
+> **Note :** La plupart des navigateurs semblent ignorer les paramètres explicites de ltr et rtl, et utilisent simplement le paramètre à l'échelle du navigateur.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table>
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Web Notifications','#dom-notification-dir','dir')}}</td>
-   <td>{{Spec2('Web Notifications')}}</td>
-   <td>Living standard</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                        | État                                     | Commentaire     |
+| ------------------------------------------------------------------------------------ | ---------------------------------------- | --------------- |
+| {{SpecName('Web Notifications','#dom-notification-dir','dir')}} | {{Spec2('Web Notifications')}} | Living standard |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Notification.dir")}}</p>
+{{Compat("api.Notification.dir")}}
 
-<h2 id="Voir_également">Voir également</h2>
+## Voir également
 
-<ul>
- <li><a href="/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li>
-</ul>
+- [Utilisation de l'API Notifications](/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API)
diff --git a/files/fr/web/api/notification/icon/index.md b/files/fr/web/api/notification/icon/index.md
index 8b25811ea0..c9b7945863 100644
--- a/files/fr/web/api/notification/icon/index.md
+++ b/files/fr/web/api/notification/icon/index.md
@@ -11,42 +11,28 @@ tags:
   - Reference
 translation_of: Web/API/Notification/icon
 ---
-<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
+{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}
 
-<p>La propriété en lecture seule <strong><code>icon</code></strong> de l'interface {{domxref ("Notification")}} contient l'URL d'une icône à afficher dans le cadre de la notification, comme définis à l'aide de l'option <code>icon</code> lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification"," Notification()")}}.</p>
+La propriété en lecture seule **`icon`** de l'interface {{domxref ("Notification")}} contient l'URL d'une icône à afficher dans le cadre de la notification, comme définis à l'aide de l'option `icon` lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification"," Notification()")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var>Notification</var>.icon
-</pre>
+    Notification.icon
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>Une {{domxref("USVString")}}.</p>
+Une {{domxref("USVString")}}.
 
-<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">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Web Notifications','#dom-notification-icon','icon')}}</td>
-   <td>{{Spec2('Web Notifications')}}</td>
-   <td>Living standard</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                            | État                                     | Commentaire     |
+| ---------------------------------------------------------------------------------------- | ---------------------------------------- | --------------- |
+| {{SpecName('Web Notifications','#dom-notification-icon','icon')}} | {{Spec2('Web Notifications')}} | Living standard |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Notification.icon")}}</p>
+{{Compat("api.Notification.icon")}}
 
-<h2 id="Voir_également">Voir également</h2>
+## Voir également
 
-<ul>
- <li><a href="/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li>
-</ul>
+- [Utilisation de l'API Notifications](/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API)
diff --git a/files/fr/web/api/notification/image/index.md b/files/fr/web/api/notification/image/index.md
index fa57345f6e..f37b623597 100644
--- a/files/fr/web/api/notification/image/index.md
+++ b/files/fr/web/api/notification/image/index.md
@@ -11,41 +11,28 @@ tags:
   - Reference
 translation_of: Web/API/Notification/image
 ---
-<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
+{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}
 
-<p>La propriété en lecture seule <code><strong>image</strong></code> de l'interface {{domxref ("Notification")}} contient l'URL d'une image à afficher dans le cadre de la notification, comme définis à l'aide de l'option <code>image</code> lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification"," Notification()")}}.</p>
+La propriété en lecture seule **`image`** de l'interface {{domxref ("Notification")}} contient l'URL d'une image à afficher dans le cadre de la notification, comme définis à l'aide de l'option `image` lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification"," Notification()")}}.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var>Notification</var>.image</pre>
+    Notification.image
 
-<h3 id="Value">Valeur</h3>
+### Valeur
 
-<p>Une {{domxref("USVString")}}.</p>
+Une {{domxref("USVString")}}.
 
-<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">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Web Notifications','#image-resource','image')}}</td>
-   <td>{{Spec2('Web Notifications')}}</td>
-   <td>Living standard</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                    | État                                     | Commentaire     |
+| -------------------------------------------------------------------------------- | ---------------------------------------- | --------------- |
+| {{SpecName('Web Notifications','#image-resource','image')}} | {{Spec2('Web Notifications')}} | Living standard |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Notification.image")}}</p>
+{{Compat("api.Notification.image")}}
 
-<h2 id="Voir_également">Voir également</h2>
+## Voir également
 
-<ul>
- <li><a href="/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li>
-</ul>
+- [Utilisation de l'API Notifications](/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API)
diff --git a/files/fr/web/api/notification/index.md b/files/fr/web/api/notification/index.md
index f732fae408..107076fd64 100644
--- a/files/fr/web/api/notification/index.md
+++ b/files/fr/web/api/notification/index.md
@@ -9,115 +9,106 @@ tags:
   - Reference
 translation_of: Web/API/Notification
 ---
-<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
-
-<p>L'interface Notification de l'<a href="/fr/docs/Web/API/Notifications_API">API Notifications</a> est utilisée pour configurer et afficher les notifications de bureau à l'utilisateur. L'apparence et les fonctionnalités spécifiques de ces notifications varient selon les plates-formes, mais elles permettent généralement de fournir des informations de manière asynchrone à l'utilisateur.</p>
-
-<h2 id="Constructeur">Constructeur</h2>
-
-<dl>
- <dt>{{domxref("Notification.Notification", "Notification()")}}</dt>
- <dd>Créer une nouvelle instance de l'object <code>Notification</code>.</dd>
-</dl>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<h3 id="Propriétés_statiques">Propriétés statiques</h3>
-
-<p><em>Ces propriétés ne sont disponibles que sur l'objet </em><code>Notification</code> <em>lui-même.</em></p>
-
-<dl>
- <dt>{{domxref("Notification.permission")}} {{readonlyinline}}</dt>
- <dd><p>Une chaîne représentant l'autorisation actuelle d'afficher les notifications. Les valeurs possibles sont:</p>
- <ul>
-  <li><code>denied</code> — L'utilisateur refuse d'afficher des notifications.</li>
-  <li><code>granted</code> — L'utilisateur accepte d'afficher des notifications.</li>
-  <li><code>default</code> — Le choix de l'utilisateur est inconnu et donc le navigateur agira comme si la valeur était refusée.</li>
- </ul>
- </dd>
- <dt>{{domxref("Notification.maxActions")}} {{readonlyinline}}</dt>
- <dd>Le nombre maximal d'actions pris en charge par l'appareil et l'agent utilisateur.</dd>
-</dl>
-
-<h3 id="Propriétés_de_linstance">Propriétés de l'instance</h3>
-
-<p><em>Ces propriétés ne sont disponibles que sur les instances de l'objet </em><code>Notification</code><em>.</em></p>
-
-<dl>
- <dt>{{domxref("Notification.actions")}} {{readonlyinline}}</dt>
- <dd>Tableau d'actions de la notification comme spécifié dans le paramètre <code>options</code> du constructeur.</dd>
- <dt>{{domxref("Notification.badge")}} {{readonlyinline}}</dt>
- <dd>L'URL de l'image utilisée pour représenter la notification lorsqu'il n'y a pas assez d'espace pour afficher la notification elle-même.</dd>
- <dt>{{domxref("Notification.body")}} {{readonlyinline}}</dt>
- <dd>Une chaîne représentant le corps de la notification telle que spécifiée dans le paramètre <code>options</code> du constructeur.</dd>
- <dt>{{domxref("Notification.data")}} {{readonlyinline}}</dt>
- <dd>Renvoie un clone structuré des données de la notification.</dd>
- <dt>{{domxref("Notification.dir")}} {{readonlyinline}}</dt>
- <dd>La direction du texte de la notification comme spécifié dans le paramètre <code>options</code> du constructeur.</dd>
- <dt>{{domxref("Notification.lang")}} {{readonlyinline}}</dt>
- <dd>Code de langue de la notification tel que spécifié dans le paramètre <code>options</code> du constructeur.</dd>
- <dt>{{domxref("Notification.tag")}} {{readonlyinline}}</dt>
- <dd>L'ID de la notification (le cas échéant) tel que spécifié dans le paramètre <code>options</code> du constructeur.</dd>
- <dt>{{domxref("Notification.icon")}} {{readonlyinline}}</dt>
- <dd>L'URL de l'image utilisée comme icône de la notification comme spécifié dans le paramètre <code>options</code> du constructeur.</dd>
- <dt>{{domxref("Notification.image")}} {{readonlyinline}}</dt>
- <dd>L'URL d'une image à afficher dans le cadre de la notification, comme spécifié dans le paramètre <code>options</code> du constructeur.</dd>
- <dt>{{domxref("Notification.renotify")}} {{readonlyinline}}</dt>
- <dd>Spécifie si l'utilisateur doit être averti après qu'une nouvelle notification remplace l'ancienne.</dd>
- <dt>{{domxref("Notification.requireInteraction")}} {{readonlyinline}}</dt>
- <dd>Un {{jsxref ("Boolean")}} indiquant qu'une notification doit rester active jusqu'à ce que l'utilisateur clique dessus ou la rejette, plutôt que de se fermer automatiquement.</dd>
- <dt>{{domxref("Notification.silent")}} {{readonlyinline}}</dt>
- <dd>Spécifie si la notification doit être silencieuse, c'est-à-dire qu'aucun son ou vibration ne doit être émis, quels que soient les paramètres de l'appareil.</dd>
- <dt>{{domxref("Notification.timestamp")}} {{readonlyinline}}</dt>
- <dd>Spécifie l'heure à laquelle une notification est créée ou applicable (passée, présente ou future).</dd>
- <dt>{{domxref("Notification.title")}} {{readonlyinline}}</dt>
- <dd>Le titre de la notification tel que spécifié dans le premier paramètre du constructeur.</dd>
- <dt>{{domxref("Notification.vibrate")}} {{readonlyinline}}</dt>
- <dd>Spécifie un modèle de vibration pour les périphériques dotés d'un matériel de vibration à émettre.</dd>
-</dl>
-
-<h3 id="Gestionnaires_dévénements">Gestionnaires d'événements</h3>
-
-<dl>
- <dt>{{domxref("Notification.onclick")}}</dt>
- <dd>Un gestionnaire pour l'événement {{domxref ("Element/click_event", "click")}}. Il est déclenché à chaque fois que l'utilisateur clique sur la notification.</dd>
- <dt>{{domxref("Notification.onclose")}}</dt>
- <dd>Un gestionnaire pour l'événement {{domxref ("HTMLDialogElement/close_event", "close")}}. Il est déclenché lorsque l'utilisateur ferme la notification.</dd>
- <dt>{{domxref("Notification.onerror")}}</dt>
- <dd>Un gestionnaire pour l'événement {{domxref ("HTMLElement/error_event", "error")}}. Il est déclenché chaque fois que la notification rencontre une erreur.</dd>
- <dt>{{domxref("Notification.onshow")}}</dt>
- <dd>Un gestionnaire pour l'événement {{domxref ("Element/show_event", "show")}}. Il est déclenché lorsque la notification est affichée.</dd>
-</dl>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<h3 id="Méthodes_statiques">Méthodes statiques</h3>
-
-<p><em>Ces méthodes ne sont disponibles que sur l'objet </em><code>Notification</code> <em>lui-même.</em></p>
-
-<dl>
- <dt>{{domxref("Notification.requestPermission()")}}</dt>
- <dd>Demande l'autorisation à l'utilisateur d'afficher les notifications.</dd>
-</dl>
-
-<h3 id="Méthodes_dinstance">Méthodes d'instance</h3>
-
-<p><em>Ces propriétés ne sont disponibles que sur une instance de l'objet </em><code>Notification</code><em> ou via son </em><a href="/fr/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain">prototype</a><em>. L'objet </em><code>Notification</code><em> hérite également de l'interface {{domxref ("EventTarget")}}.</em></p>
-
-<dl>
- <dt>{{domxref("Notification.close()")}}</dt>
- <dd>Ferme programmatiquement une instance de notification.</dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Supposons ce HTML de base:</p>
-
-<pre class="brush: html">&lt;button onclick="notifyMe()"&gt;Notifie moi !&lt;/button&gt;</pre>
-
-<p>Il est possible d'envoyer une notification comme suit - nous présentons ici un ensemble de code assez détaillé et complet que vous pourriez utiliser si vous vouliez d'abord vérifier si les notifications sont prises en charge, puis vérifiez si l'autorisation a été accordée pour l'{{glossary("Origin","origine")}} actuelle d'envoyer des notifications, puis demander l'autorisation si nécessaire, avant d'envoyer une notification.</p>
-
-<pre class="brush: js">function notifyMe() {
+{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}
+
+L'interface Notification de l'[API Notifications](/fr/docs/Web/API/Notifications_API) est utilisée pour configurer et afficher les notifications de bureau à l'utilisateur. L'apparence et les fonctionnalités spécifiques de ces notifications varient selon les plates-formes, mais elles permettent généralement de fournir des informations de manière asynchrone à l'utilisateur.
+
+## Constructeur
+
+- {{domxref("Notification.Notification", "Notification()")}}
+  - : Créer une nouvelle instance de l'object `Notification`.
+
+## Propriétés
+
+### Propriétés statiques
+
+_Ces propriétés ne sont disponibles que sur l'objet_ `Notification` _lui-même._
+
+- {{domxref("Notification.permission")}} {{readonlyinline}}
+
+  - : Une chaîne représentant l'autorisation actuelle d'afficher les notifications. Les valeurs possibles sont:
+
+    - `denied` — L'utilisateur refuse d'afficher des notifications.
+    - `granted` — L'utilisateur accepte d'afficher des notifications.
+    - `default` — Le choix de l'utilisateur est inconnu et donc le navigateur agira comme si la valeur était refusée.
+
+- {{domxref("Notification.maxActions")}} {{readonlyinline}}
+  - : Le nombre maximal d'actions pris en charge par l'appareil et l'agent utilisateur.
+
+### Propriétés de l'instance
+
+_Ces propriétés ne sont disponibles que sur les instances de l'objet_ `Notification`_._
+
+- {{domxref("Notification.actions")}} {{readonlyinline}}
+  - : Tableau d'actions de la notification comme spécifié dans le paramètre `options` du constructeur.
+- {{domxref("Notification.badge")}} {{readonlyinline}}
+  - : L'URL de l'image utilisée pour représenter la notification lorsqu'il n'y a pas assez d'espace pour afficher la notification elle-même.
+- {{domxref("Notification.body")}} {{readonlyinline}}
+  - : Une chaîne représentant le corps de la notification telle que spécifiée dans le paramètre `options` du constructeur.
+- {{domxref("Notification.data")}} {{readonlyinline}}
+  - : Renvoie un clone structuré des données de la notification.
+- {{domxref("Notification.dir")}} {{readonlyinline}}
+  - : La direction du texte de la notification comme spécifié dans le paramètre `options` du constructeur.
+- {{domxref("Notification.lang")}} {{readonlyinline}}
+  - : Code de langue de la notification tel que spécifié dans le paramètre `options` du constructeur.
+- {{domxref("Notification.tag")}} {{readonlyinline}}
+  - : L'ID de la notification (le cas échéant) tel que spécifié dans le paramètre `options` du constructeur.
+- {{domxref("Notification.icon")}} {{readonlyinline}}
+  - : L'URL de l'image utilisée comme icône de la notification comme spécifié dans le paramètre `options` du constructeur.
+- {{domxref("Notification.image")}} {{readonlyinline}}
+  - : L'URL d'une image à afficher dans le cadre de la notification, comme spécifié dans le paramètre `options` du constructeur.
+- {{domxref("Notification.renotify")}} {{readonlyinline}}
+  - : Spécifie si l'utilisateur doit être averti après qu'une nouvelle notification remplace l'ancienne.
+- {{domxref("Notification.requireInteraction")}} {{readonlyinline}}
+  - : Un {{jsxref ("Boolean")}} indiquant qu'une notification doit rester active jusqu'à ce que l'utilisateur clique dessus ou la rejette, plutôt que de se fermer automatiquement.
+- {{domxref("Notification.silent")}} {{readonlyinline}}
+  - : Spécifie si la notification doit être silencieuse, c'est-à-dire qu'aucun son ou vibration ne doit être émis, quels que soient les paramètres de l'appareil.
+- {{domxref("Notification.timestamp")}} {{readonlyinline}}
+  - : Spécifie l'heure à laquelle une notification est créée ou applicable (passée, présente ou future).
+- {{domxref("Notification.title")}} {{readonlyinline}}
+  - : Le titre de la notification tel que spécifié dans le premier paramètre du constructeur.
+- {{domxref("Notification.vibrate")}} {{readonlyinline}}
+  - : Spécifie un modèle de vibration pour les périphériques dotés d'un matériel de vibration à émettre.
+
+### Gestionnaires d'événements
+
+- {{domxref("Notification.onclick")}}
+  - : Un gestionnaire pour l'événement {{domxref ("Element/click_event", "click")}}. Il est déclenché à chaque fois que l'utilisateur clique sur la notification.
+- {{domxref("Notification.onclose")}}
+  - : Un gestionnaire pour l'événement {{domxref ("HTMLDialogElement/close_event", "close")}}. Il est déclenché lorsque l'utilisateur ferme la notification.
+- {{domxref("Notification.onerror")}}
+  - : Un gestionnaire pour l'événement {{domxref ("HTMLElement/error_event", "error")}}. Il est déclenché chaque fois que la notification rencontre une erreur.
+- {{domxref("Notification.onshow")}}
+  - : Un gestionnaire pour l'événement {{domxref ("Element/show_event", "show")}}. Il est déclenché lorsque la notification est affichée.
+
+## Méthodes
+
+### Méthodes statiques
+
+_Ces méthodes ne sont disponibles que sur l'objet_ `Notification` _lui-même._
+
+- {{domxref("Notification.requestPermission()")}}
+  - : Demande l'autorisation à l'utilisateur d'afficher les notifications.
+
+### Méthodes d'instance
+
+_Ces propriétés ne sont disponibles que sur une instance de l'objet_ `Notification` _ou via son_ [prototype](/fr/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain)_. L'objet_ `Notification` _hérite également de l'interface {{domxref ("EventTarget")}}._
+
+- {{domxref("Notification.close()")}}
+  - : Ferme programmatiquement une instance de notification.
+
+## Exemples
+
+Supposons ce HTML de base:
+
+```html
+<button onclick="notifyMe()">Notifie moi !</button>
+```
+
+Il est possible d'envoyer une notification comme suit - nous présentons ici un ensemble de code assez détaillé et complet que vous pourriez utiliser si vous vouliez d'abord vérifier si les notifications sont prises en charge, puis vérifiez si l'autorisation a été accordée pour l'{{glossary("Origin","origine")}} actuelle d'envoyer des notifications, puis demander l'autorisation si nécessaire, avant d'envoyer une notification.
+
+```js
+function notifyMe() {
   // Vérifions si le navigateur prend en charge les notifications
   if (!('Notification' in window)) {
     alert('Ce navigateur ne prend pas en charge la notification de bureau')
@@ -131,7 +122,7 @@ translation_of: Web/API/Notification
 
   // Sinon, nous devons demander la permission à l'utilisateur
   else if (Notification.permission !== 'denied') {
-    Notification.requestPermission().then((permission) =&gt; {
+    Notification.requestPermission().then((permission) => {
       // Si l'utilisateur accepte, créons une notification
       if (permission === 'granted') {
         const notification = new Notification('Salut toi!')
@@ -142,37 +133,22 @@ translation_of: Web/API/Notification
   // Enfin, si l'utilisateur a refusé les notifications, et que vous
   // voulez être respectueux, il n'est plus nécessaire de les déranger.
 }
-</pre>
+```
 
-<p>Nous ne montrons plus d'exemple en direct sur cette page, car Chrome et Firefox n'autorisent plus les demandes de notification des {{htmlelement ("iframe")}}s d'origine croisée, avec d'autres navigateurs à suivre. Pour voir un exemple en action, consultez notre <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">exemple de liste de tâches</a> (voir également l'<a href="https://mdn.github.io/to-do-notifications/">application en cours d'exécution</a>.)</p>
+Nous ne montrons plus d'exemple en direct sur cette page, car Chrome et Firefox n'autorisent plus les demandes de notification des {{htmlelement ("iframe")}}s d'origine croisée, avec d'autres navigateurs à suivre. Pour voir un exemple en action, consultez notre [exemple de liste de tâches](https://github.com/mdn/to-do-notifications/tree/gh-pages) (voir également l'[application en cours d'exécution](https://mdn.github.io/to-do-notifications/).)
 
-<div class="note">
-<p><strong>Note :</strong> Dans l'exemple ci-dessus, nous générons des notifications en réponse à un geste de l'utilisateur (en cliquant sur un bouton). Il ne s'agit pas seulement d'une bonne pratique - vous ne devriez pas envoyer de spam aux utilisateurs avec des notifications qu'ils n'acceptent pas - mais les navigateurs suivants interdiront explicitement les notifications non déclenchées en réponse à un geste de l'utilisateur. Firefox le fait déjà depuis la version 72, par exemple.</p>
-</div>
+> **Note :** Dans l'exemple ci-dessus, nous générons des notifications en réponse à un geste de l'utilisateur (en cliquant sur un bouton). Il ne s'agit pas seulement d'une bonne pratique - vous ne devriez pas envoyer de spam aux utilisateurs avec des notifications qu'ils n'acceptent pas - mais les navigateurs suivants interdiront explicitement les notifications non déclenchées en réponse à un geste de l'utilisateur. Firefox le fait déjà depuis la version 72, par exemple.
 
-<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">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Web Notifications')}}</td>
-   <td>{{Spec2('Web Notifications')}}</td>
-   <td>Living standard</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                | État                                     | Commentaire     |
+| -------------------------------------------- | ---------------------------------------- | --------------- |
+| {{SpecName('Web Notifications')}} | {{Spec2('Web Notifications')}} | Living standard |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Notification")}}</p>
+{{Compat("api.Notification")}}
 
-<h2 id="Voir_également">Voir également</h2>
+## Voir également
 
-<ul>
- <li><a href="/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li>
-</ul>
+- [Utilisation de l'API Notifications](/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API)
diff --git a/files/fr/web/api/notification/lang/index.md b/files/fr/web/api/notification/lang/index.md
index 3a409d72ff..01e7375221 100644
--- a/files/fr/web/api/notification/lang/index.md
+++ b/files/fr/web/api/notification/lang/index.md
@@ -10,44 +10,30 @@ tags:
   - Reference
 translation_of: Web/API/Notification/lang
 ---
-<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
+{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}
 
-<p>La propriété en lecture seule <strong><code>lang</code></strong> de l'interface {{domxref ("Notification")}} indique la langue utilisée dans la notification, comme définis à l'aide de l'option <code>lang</code> lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification()" )}}.</p>
+La propriété en lecture seule **`lang`** de l'interface {{domxref ("Notification")}} indique la langue utilisée dans la notification, comme définis à l'aide de l'option `lang` lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification()" )}}.
 
-<p>La langue elle-même est spécifiée à l'aide d'un {{domxref ("DOMString")}} représentant <a href="http://www.rfc-editor.org/rfc/bcp/bcp47.txt">une balise de langue BCP 47</a>. Consultez la page des <a href="http://www.sitepoint.com/web-foundations/iso-2-letter-language-codes/">codes de langue à 2 lettres ISO</a> de Sitepoint pour une référence simple.</p>
+La langue elle-même est spécifiée à l'aide d'un {{domxref ("DOMString")}} représentant [une balise de langue BCP 47](http://www.rfc-editor.org/rfc/bcp/bcp47.txt). Consultez la page des [codes de langue à 2 lettres ISO](http://www.sitepoint.com/web-foundations/iso-2-letter-language-codes/) de Sitepoint pour une référence simple.
 
-<h2 id="Syntaxz">Syntaxz</h2>
+## Syntaxz
 
-<pre class="syntaxbox"><var>N</var><var>otification</var>.lang
-</pre>
+    Notification.lang
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>Une {{domxref("DOMString")}} spécifiant la balise de langue.</p>
+Une {{domxref("DOMString")}} spécifiant la balise de langue.
 
-<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">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Web Notifications','#dom-notification-lang','lang')}}</td>
-   <td>{{Spec2('Web Notifications')}}</td>
-   <td>Living standard</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                            | État                                     | Commentaire     |
+| ---------------------------------------------------------------------------------------- | ---------------------------------------- | --------------- |
+| {{SpecName('Web Notifications','#dom-notification-lang','lang')}} | {{Spec2('Web Notifications')}} | Living standard |
 
-<h2 id="Browser_compatibility">Browser compatibility</h2>
+## Browser compatibility
 
-<p>{{Compat("api.Notification.lang")}}</p>
+{{Compat("api.Notification.lang")}}
 
-<h2 id="Voir_également">Voir également</h2>
+## Voir également
 
-<ul>
- <li><a href="/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li>
-</ul>
+- [Utilisation de l'API Notifications](/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API)
diff --git a/files/fr/web/api/notification/maxactions/index.md b/files/fr/web/api/notification/maxactions/index.md
index df61031657..105754d3b0 100644
--- a/files/fr/web/api/notification/maxactions/index.md
+++ b/files/fr/web/api/notification/maxactions/index.md
@@ -11,53 +11,38 @@ tags:
   - actions
 translation_of: Web/API/Notification/maxActions
 ---
-<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
+{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}
 
-<p>L'attribut <strong><code>maxActions</code></strong> de l'interface {{domxref ("Notification")}} renvoie le nombre maximal d'actions prises en charge par l'appareil et l'agent utilisateur. En effet, c'est le nombre maximum d'éléments dans le tableau {{domxref ("Notification.actions")}} qui seront respectés par l'agent utilisateur.</p>
+L'attribut **`maxActions`** de l'interface {{domxref ("Notification")}} renvoie le nombre maximal d'actions prises en charge par l'appareil et l'agent utilisateur. En effet, c'est le nombre maximum d'éléments dans le tableau {{domxref ("Notification.actions")}} qui seront respectés par l'agent utilisateur.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var>Notification</var>.maxActions
-</pre>
+    Notification.maxActions
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>Un entier {{JSxRef ("Number")}} qui indique le plus grand nombre d'actions de notification pouvant être présentées à l'utilisateur par l'agent utilisateur et l'appareil.</p>
+Un entier {{JSxRef ("Number")}} qui indique le plus grand nombre d'actions de notification pouvant être présentées à l'utilisateur par l'agent utilisateur et l'appareil.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>L'extrait de code suivant enregistre le nombre maximal d'actions prises en charge.</p>
+L'extrait de code suivant enregistre le nombre maximal d'actions prises en charge.
 
-<pre class="brush: js">const { maxActions } = Notification
+```js
+const { maxActions } = Notification
 console.log(`This device can display at most ${maxActions} actions on each notification.`);
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("Web Notifications")}}</td>
-   <td>{{Spec2("Web Notifications")}}</td>
-   <td>Living standard</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Notification.maxActions")}}</p>
-
-<h2 id="Voir_également">Voir également</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li>
- <li>{{domxref("Notification.actions")}}</li>
-</ul>
+```
+
+## Spécifications
+
+| Spécification                                | Status                                   | Comment         |
+| -------------------------------------------- | ---------------------------------------- | --------------- |
+| {{SpecName("Web Notifications")}} | {{Spec2("Web Notifications")}} | Living standard |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Notification.maxActions")}}
+
+## Voir également
+
+- [Utilisation de l'API Notifications](/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API)
+- {{domxref("Notification.actions")}}
diff --git a/files/fr/web/api/notification/notification/index.md b/files/fr/web/api/notification/notification/index.md
index 0e9a988e55..959523eaf0 100644
--- a/files/fr/web/api/notification/notification/index.md
+++ b/files/fr/web/api/notification/notification/index.md
@@ -8,75 +8,74 @@ tags:
   - Notification
   - Notifications
   - Reference
-browser-compat: api.Notification.Notification
 translation_of: Web/API/Notification/Notification
+browser-compat: api.Notification.Notification
 ---
-<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
-
-<p>Le constructeur <strong><code>Notification()</code></strong> crée une nouvelle instance d'objet <a href="/fr/docs/Web/API/notification"><code>Notification</code></a>, qui représente une notification utilisateur.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="brush: js">const <var>myNotification</var> = new Notification(<var>title</var>, <var>options</var>)</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code><var>title</var></code></dt>
- <dd>Définit un titre pour la notification, qui s'affiche en haut de la fenêtre de notification.</dd>
- <dt><code><var>options</var></code> {{optional_inline}}</dt>
- <dd>Un objet d'options contenant tous les paramètres personnalisés que vous souhaitez appliquer à la notification. Les options possibles sont:
- <ul>
-  <li><code>dir</code>: La direction dans laquelle afficher la notification. La valeur par défaut est <code>auto</code>, qui adopte simplement le comportement du paramètre de langue du navigateur, mais vous pouvez remplacer ce comportement en définissant les valeurs de <code>ltr</code> et <code>rtl</code> (bien que la plupart des navigateurs semblent ignorer ces paramètres.)</li>
-  <li><code>lang</code>: La langue de la notification, telle que spécifiée à l'aide d'un <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> représentant une <a href="https://www.rfc-editor.org/rfc/bcp/bcp47.txt">balise de langue BCP 47</a>. Consultez la page des <a href="https://www.sitepoint.com/web-foundations/iso-2-letter-language-codes/">codes de langue à 2 lettres ISO</a> de Sitepoint pour une référence simple.</li>
-  <li><code>badge</code>: Un <a href="/fr/docs/Web/API/USVString"><code>USVString</code></a> contenant l'URL de l'image utilisée pour représenter la notification lorsqu'il n'y a pas assez d'espace pour afficher la notification elle-même.</li>
-  <li><code>body</code>: Un <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> représentant le corps du texte de la notification, qui est affiché sous le titre.</li>
-  <li><code>tag</code>: Un <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> représentant un tag d'identification pour la notification.</li>
-  <li><code>icon</code>: Une <a href="/fr/docs/Web/API/USVString"><code>USVString</code></a> contenant l'URL d'une icône à afficher dans la notification.</li>
-  <li><code>image</code>: Une <a href="/fr/docs/Web/API/USVString"><code>USVString</code></a> contenant l'URL d'une image à afficher dans la notification.</li>
-  <li><code>data</code>: Données arbitraires que vous souhaitez associer à la notification. Elles peuvent être de n'importe quel type de données.</li>
-  <li><code>vibrate</code>: Un <a href="/fr/docs/Web/Guide/API/Vibration#Vibration_patterns">modèle de vibration</a> que le matériel de vibration de l'appareil émet avec la notification.</li>
-  <li><code>renotify</code>: Un <a href="/fr/docs/Web/API/Boolean"><code>Boolean</code></a> spécifiant si l'utilisateur doit être notifié après qu'une nouvelle notification remplace l'ancienne. La valeur par défaut est <code>false</code>, ce qui signifie qu'ils ne seront pas notifiés.</li>
-  <li><code>requireInteraction</code>: Un <a href="/fr/docs/Web/API/Boolean"><code>Boolean</code></a> indiquant qu'une notification doit rester active jusqu'à ce que l'utilisateur clique dessus ou la rejette, plutôt que de se fermer automatiquement. La valeur par défaut est <code>false</code>.</li>
-  <li><code>actions</code>: Un tableau de <a href="/fr/docs/Web/API/NotificationAction"><code>NotificationAction</code></a> représentant les actions disponibles pour l'utilisateur lorsque la notification est présentée. Ce sont des options parmi lesquelles l'utilisateur peut choisir pour agir sur l'action dans le contexte de la notification elle-même. Le nom de l'action est envoyé au gestionnaire de notifications du service worker pour lui faire savoir que l'action a été sélectionnée par l'utilisateur.</li>
-  <li><code>silent</code>: Un <a href="/fr/docs/Web/API/Boolean"><code>Boolean</code></a> spécifiant si la notification est silencieuse (aucun son ni vibration émis), quels que soient les paramètres de l'appareil. La valeur par défaut est <code>false</code>, ce qui signifie qu'il ne sera pas silencieux.</li>
- </ul>
- </dd>
-</dl>
-
-<h2 id="Exemple">Exemple</h2>
-
-<p>Dans notre <a href="https://chrisdavidmills.github.io/emogotchi/">démo Emogotchi</a> (<a href="https://github.com/mdn/emogotchi">voir le code source</a>), nous exécutons une fonction <code>spawnNotification()</code> lorsque nous voulons déclencher une notification. La fonction reçoit des paramètres pour spécifier le corps, l'icône et le titre souhaités, puis elle crée l'objet <code>options</code> nécessaire et déclenche la notification à l'aide du constructeur <code>Notification()</code>.</p>
-
-<pre class="brush: js">function spawnNotification(body, icon, title) {
+{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}
+
+Le constructeur **`Notification()`** crée une nouvelle instance d'objet [`Notification`](/fr/docs/Web/API/notification), qui représente une notification utilisateur.
+
+## Syntaxe
+
+```js
+const myNotification = new Notification(title, options)
+```
+
+### Paramètres
+
+- `title`
+  - : Définit un titre pour la notification, qui s'affiche en haut de la fenêtre de notification.
+- `options` {{optional_inline}}
+
+  - : Un objet d'options contenant tous les paramètres personnalisés que vous souhaitez appliquer à la notification. Les options possibles sont:
+
+    - `dir`: La direction dans laquelle afficher la notification. La valeur par défaut est `auto`, qui adopte simplement le comportement du paramètre de langue du navigateur, mais vous pouvez remplacer ce comportement en définissant les valeurs de `ltr` et `rtl` (bien que la plupart des navigateurs semblent ignorer ces paramètres.)
+    - `lang`: La langue de la notification, telle que spécifiée à l'aide d'un [`DOMString`](/fr/docs/Web/API/DOMString) représentant une [balise de langue BCP 47](https://www.rfc-editor.org/rfc/bcp/bcp47.txt). Consultez la page des [codes de langue à 2 lettres ISO](https://www.sitepoint.com/web-foundations/iso-2-letter-language-codes/) de Sitepoint pour une référence simple.
+    - `badge`: Un [`USVString`](/fr/docs/Web/API/USVString) contenant l'URL de l'image utilisée pour représenter la notification lorsqu'il n'y a pas assez d'espace pour afficher la notification elle-même.
+    - `body`: Un [`DOMString`](/fr/docs/Web/API/DOMString) représentant le corps du texte de la notification, qui est affiché sous le titre.
+    - `tag`: Un [`DOMString`](/fr/docs/Web/API/DOMString) représentant un tag d'identification pour la notification.
+    - `icon`: Une [`USVString`](/fr/docs/Web/API/USVString) contenant l'URL d'une icône à afficher dans la notification.
+    - `image`: Une [`USVString`](/fr/docs/Web/API/USVString) contenant l'URL d'une image à afficher dans la notification.
+    - `data`: Données arbitraires que vous souhaitez associer à la notification. Elles peuvent être de n'importe quel type de données.
+    - `vibrate`: Un [modèle de vibration](/fr/docs/Web/Guide/API/Vibration#Vibration_patterns) que le matériel de vibration de l'appareil émet avec la notification.
+    - `renotify`: Un [`Boolean`](/fr/docs/Web/API/Boolean) spécifiant si l'utilisateur doit être notifié après qu'une nouvelle notification remplace l'ancienne. La valeur par défaut est `false`, ce qui signifie qu'ils ne seront pas notifiés.
+    - `requireInteraction`: Un [`Boolean`](/fr/docs/Web/API/Boolean) indiquant qu'une notification doit rester active jusqu'à ce que l'utilisateur clique dessus ou la rejette, plutôt que de se fermer automatiquement. La valeur par défaut est `false`.
+    - `actions`: Un tableau de [`NotificationAction`](/fr/docs/Web/API/NotificationAction) représentant les actions disponibles pour l'utilisateur lorsque la notification est présentée. Ce sont des options parmi lesquelles l'utilisateur peut choisir pour agir sur l'action dans le contexte de la notification elle-même. Le nom de l'action est envoyé au gestionnaire de notifications du service worker pour lui faire savoir que l'action a été sélectionnée par l'utilisateur.
+    - `silent`: Un [`Boolean`](/fr/docs/Web/API/Boolean) spécifiant si la notification est silencieuse (aucun son ni vibration émis), quels que soient les paramètres de l'appareil. La valeur par défaut est `false`, ce qui signifie qu'il ne sera pas silencieux.
+
+## Exemple
+
+Dans notre [démo Emogotchi](https://chrisdavidmills.github.io/emogotchi/) ([voir le code source](https://github.com/mdn/emogotchi)), nous exécutons une fonction `spawnNotification()` lorsque nous voulons déclencher une notification. La fonction reçoit des paramètres pour spécifier le corps, l'icône et le titre souhaités, puis elle crée l'objet `options` nécessaire et déclenche la notification à l'aide du constructeur `Notification()`.
+
+```js
+function spawnNotification(body, icon, title) {
   const options = {
     body: body,
     icon: icon
   };
   const n = new Notification(title, options);
-}</pre>
+}
+```
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
 {{Specifications}}
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h3 id="Notes_Chrome">Notes Chrome</h3>
+### Notes Chrome
 
-<p>À partir de Chrome 49, les notifications ne fonctionnent pas en mode navigation privée.</p>
+À partir de Chrome 49, les notifications ne fonctionnent pas en mode navigation privée.
 
-<p>Chrome pour Android lance une erreur <code>TypeError</code> lors de l'appel du constructeur <code>Notification</code>. Il ne prend en charge que la création de notifications à partir d'un service worker. Consultez le <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=481856">Chromium issue tracker</a> pour plus de détails.</p>
+Chrome pour Android lance une erreur `TypeError` lors de l'appel du constructeur `Notification`. Il ne prend en charge que la création de notifications à partir d'un service worker. Consultez le [Chromium issue tracker](https://bugs.chromium.org/p/chromium/issues/detail?id=481856) pour plus de détails.
 
-<h3 id="Notes_Internet_Explorer">Notes Internet Explorer</h3>
+### Notes Internet Explorer
 
-<p>La version 38.14352 et celles supérieure de MS Edge prend en charge l'<code>API Notification</code>. <a href="https://en.wikipedia.org/wiki/Microsoft_Edge#Release_history">Wikipédia - MS Edge</a><br>
- IE 11 et inférieur n'est pas pris en charge.</p>
+La version 38.14352 et celles supérieure de MS Edge prend en charge l'`API Notification`. [Wikipédia - MS Edge](https://en.wikipedia.org/wiki/Microsoft_Edge#Release_history)
+IE 11 et inférieur n'est pas pris en charge.
 
-<h2 id="Voir_également">Voir également</h2>
+## Voir également
 
-<ul>
- <li><a href="/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li>
-</ul>
+- [Utilisation de l'API Notifications](/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API)
diff --git a/files/fr/web/api/notification/onclick/index.md b/files/fr/web/api/notification/onclick/index.md
index b1561a4fe9..b338aa8813 100644
--- a/files/fr/web/api/notification/onclick/index.md
+++ b/files/fr/web/api/notification/onclick/index.md
@@ -10,54 +10,38 @@ tags:
   - onclick
 translation_of: Web/API/Notification/onclick
 ---
-<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
+{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}
 
-<p>La propriété <strong><code>onclick</code></strong>, rattachée à l'interface {{domxref("Notification")}}, définit un gestionnaire d'évènement à déclencher lorsque la notification recçoit un évènement {{event("click")}} (qui se produit lorsqu'un utilisateur clique sur la notification).</p>
+La propriété **`onclick`**, rattachée à l'interface {{domxref("Notification")}}, définit un gestionnaire d'évènement à déclencher lorsque la notification recçoit un évènement {{event("click")}} (qui se produit lorsqu'un utilisateur clique sur la notification).
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>Notification</em>.onclick = function(event) { ... };
-</pre>
+    Notification.onclick = function(event) { ... };
 
-<p>Le comportement par défaut consiste à déplacer le focus sur la zone d'affichage (<em>viewport</em>) du <a href="https://html.spec.whatwg.org/multipage/browsers.html#browsing-context">contexte de navigation</a> de la notification. Pour éviter ce comportement, on pourra appeler la méthode <code><a href="/fr/docs/Web/API/Event/preventDefault">preventDefault()</a></code> sur l'objet représentant l'évènement.</p>
+Le comportement par défaut consiste à déplacer le focus sur la zone d'affichage (_viewport_) du [contexte de navigation](https://html.spec.whatwg.org/multipage/browsers.html#browsing-context) de la notification. Pour éviter ce comportement, on pourra appeler la méthode [`preventDefault()`](/fr/docs/Web/API/Event/preventDefault) sur l'objet représentant l'évènement.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans l'exemple qui suit, on utilise le gestionnaire d'évènement <code>onclick</code> pour ouvrir une page dans un nouvel onglet (avec le paramètre <code>'_blank'</code>) lorsqu'on clique sur la notification :</p>
+Dans l'exemple qui suit, on utilise le gestionnaire d'évènement `onclick` pour ouvrir une page dans un nouvel onglet (avec le paramètre `'_blank'`) lorsqu'on clique sur la notification :
 
-<pre class="brush: js">notification.onclick = function(event) {
+```js
+notification.onclick = function(event) {
   event.preventDefault(); // empêcher le navigateur de passer le focus sur l'onglet de la navigation
   window.open('http://www.mozilla.org', '_blank');
-}</pre>
+}
+```
 
-<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('Web Notifications','#dom-notification-onclick','onclick')}}</td>
-   <td>{{Spec2('Web Notifications')}}</td>
-   <td>Standard évolutif</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                    | État                                     | Commentaires      |
+| ------------------------------------------------------------------------------------------------ | ---------------------------------------- | ----------------- |
+| {{SpecName('Web Notifications','#dom-notification-onclick','onclick')}} | {{Spec2('Web Notifications')}} | Standard évolutif |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
+{{Compat("api.Notification.onclick")}}
 
+## Voir aussi
 
-<p>{{Compat("api.Notification.onclick")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("Notification")}}</li>
- <li><a href="/fr/docs/Web/API/notification/Using_Web_Notifications">Utiliser l'API Notifications</a></li>
-</ul>
+- {{domxref("Notification")}}
+- [Utiliser l'API Notifications](/fr/docs/Web/API/notification/Using_Web_Notifications)
diff --git a/files/fr/web/api/notification/onclose/index.md b/files/fr/web/api/notification/onclose/index.md
index 5dddd078f3..6de5318d51 100644
--- a/files/fr/web/api/notification/onclose/index.md
+++ b/files/fr/web/api/notification/onclose/index.md
@@ -11,23 +11,20 @@ tags:
   - onclose
 translation_of: Web/API/Notification/onclose
 ---
-<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
+{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}
 
-<p>La propriété <strong><code>onclose</code></strong> de l'interface {{domxref ("Notification")}} définit un écouteur d'événements pour recevoir les événements {{domxref ("HTMLDialogElement/close_event", "close")}}. Ces événements se produisent lorsqu'une {{domxref ("Notification")}} est fermée.</p>
+La propriété **`onclose`** de l'interface {{domxref ("Notification")}} définit un écouteur d'événements pour recevoir les événements {{domxref ("HTMLDialogElement/close_event", "close")}}. Ces événements se produisent lorsqu'une {{domxref ("Notification")}} est fermée.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var>Notification</var>.onclose = function(event) { ... }
-Notification.onclose = (event) =&gt; { ... }
-</pre>
+    Notification.onclose = function(event) { ... }
+    Notification.onclose = (event) => { ... }
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Notification.onclose")}}</p>
+{{Compat("api.Notification.onclose")}}
 
-<h2 id="Voir_également">Voir également</h2>
+## Voir également
 
-<ul>
- <li>{{domxref("Notification")}}</li>
- <li><a href="/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li>
-</ul>
+- {{domxref("Notification")}}
+- [Utilisation de l'API Notifications](/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API)
diff --git a/files/fr/web/api/notification/onerror/index.md b/files/fr/web/api/notification/onerror/index.md
index af9115de5b..9d6228aa59 100644
--- a/files/fr/web/api/notification/onerror/index.md
+++ b/files/fr/web/api/notification/onerror/index.md
@@ -11,42 +11,26 @@ tags:
   - onerror
 translation_of: Web/API/Notification/onerror
 ---
-<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
+{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}
 
-<p>La propriété <strong><code>onerror</code></strong> de l'interface {{domxref ("Notification")}} spécifie un écouteur d'événements pour recevoir les événements {{domxref ("HTMLElement/error_event", "error")}}. Ces événements se produisent lorsque quelque chose ce déroule mal avec une {{domxref ("Notification")}} (dans de nombreux cas, une erreur qui empêche l'affichage de la notification.)</p>
+La propriété **`onerror`** de l'interface {{domxref ("Notification")}} spécifie un écouteur d'événements pour recevoir les événements {{domxref ("HTMLElement/error_event", "error")}}. Ces événements se produisent lorsque quelque chose ce déroule mal avec une {{domxref ("Notification")}} (dans de nombreux cas, une erreur qui empêche l'affichage de la notification.)
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var>Notification</var>.onerror = function(event) { ... }
-<var>Notification</var>.onerror = (even) =&gt; { ... }
-</pre>
+    Notification.onerror = function(event) { ... }
+    Notification.onerror = (even) => { ... }
 
-<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">Commentaire</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('Web Notifications','#dom-notification-onerror','onerror')}}</td>
-   <td>{{Spec2('Web Notifications')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                    | État                                     | Commentaire          |
+| ------------------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------- |
+| {{SpecName('Web Notifications','#dom-notification-onerror','onerror')}} | {{Spec2('Web Notifications')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Notification.onerror")}}</p>
+{{Compat("api.Notification.onerror")}}
 
-<h2 id="Voir_également">Voir également</h2>
+## Voir également
 
-<ul>
- <li>{{domxref("Notification")}}</li>
- <li><a href="/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li>
-</ul>
+- {{domxref("Notification")}}
+- [Utilisation de l'API Notifications](/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API)
diff --git a/files/fr/web/api/notification/onshow/index.md b/files/fr/web/api/notification/onshow/index.md
index a0a38caf41..83f739f73e 100644
--- a/files/fr/web/api/notification/onshow/index.md
+++ b/files/fr/web/api/notification/onshow/index.md
@@ -11,23 +11,20 @@ tags:
   - onshow
 translation_of: Web/API/Notification/onshow
 ---
-<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
+{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}
 
-<p>La propriété <strong><code>onshow</code></strong> de l'interface {{domxref ("Notification")}} définit un écouteur d'événements pour recevoir des événements {{domxref ("Element/show_event", "show")}}. Ces événements se produisent lorsqu'une {{domxref ("Notification")}} est affiché.</p>
+La propriété **`onshow`** de l'interface {{domxref ("Notification")}} définit un écouteur d'événements pour recevoir des événements {{domxref ("Element/show_event", "show")}}. Ces événements se produisent lorsqu'une {{domxref ("Notification")}} est affiché.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var>Notification</var>.onshow = function() { ... }
-<var>Notification</var>.onshow = () =&gt; { ... }
-</pre>
+    Notification.onshow = function() { ... }
+    Notification.onshow = () => { ... }
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Notification.onshow")}}</p>
+{{Compat("api.Notification.onshow")}}
 
-<h2 id="Voir_également">Voir également</h2>
+## Voir également
 
-<ul>
- <li>{{domxref("Notification")}}</li>
- <li><a href="/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li>
-</ul>
+- {{domxref("Notification")}}
+- [Utilisation de l'API Notifications](/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API)
diff --git a/files/fr/web/api/notification/permission/index.md b/files/fr/web/api/notification/permission/index.md
index 603a7cdb3c..fca52d13af 100644
--- a/files/fr/web/api/notification/permission/index.md
+++ b/files/fr/web/api/notification/permission/index.md
@@ -10,29 +10,28 @@ tags:
   - Reference
 translation_of: Web/API/Notification/permission
 ---
-<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
+{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}
 
-<p>La propriété en lecture seule <strong><code>permission</code></strong> de l'interface {{domxref ("Notification")}} indique l'autorisation actuelle accordée par l'utilisateur à l'origine actuelle pour afficher des notifications.</p>
+La propriété en lecture seule **`permission`** de l'interface {{domxref ("Notification")}} indique l'autorisation actuelle accordée par l'utilisateur à l'origine actuelle pour afficher des notifications.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">Notification.permission</pre>
+    Notification.permission
 
-<h3 id="Return_Value">Valeur</h3>
+### Valeur
 
-<p>Une {{domxref("DOMString")}} représentant l'autorisation actuelle. La valeur peut être:</p>
+Une {{domxref("DOMString")}} représentant l'autorisation actuelle. La valeur peut être:
 
-<ul>
- <li><code>granted</code>: L'utilisateur a explicitement accordé l'autorisation à l'origine actuelle d'afficher les notifications système.</li>
- <li><code>denied</code>: L'utilisateur a explicitement refusé l'autorisation pour l'origine actuelle d'afficher les notifications système.</li>
- <li><code>default</code>: La décision de l'utilisateur est inconnue; dans ce cas, l'application agira comme si l'autorisation était <code>denied</code>.</li>
-</ul>
+- `granted`: L'utilisateur a explicitement accordé l'autorisation à l'origine actuelle d'afficher les notifications système.
+- `denied`: L'utilisateur a explicitement refusé l'autorisation pour l'origine actuelle d'afficher les notifications système.
+- `default`: La décision de l'utilisateur est inconnue; dans ce cas, l'application agira comme si l'autorisation était `denied`.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>L'extrait suivant peut être utilisé si vous souhaitez d'abord vérifier si les notifications sont prises en charge, puis vérifier si l'autorisation a été accordée pour l'origine actuelle pour envoyer des notifications, puis demander l'autorisation si nécessaire, avant d'envoyer une notification.</p>
+L'extrait suivant peut être utilisé si vous souhaitez d'abord vérifier si les notifications sont prises en charge, puis vérifier si l'autorisation a été accordée pour l'origine actuelle pour envoyer des notifications, puis demander l'autorisation si nécessaire, avant d'envoyer une notification.
 
-<pre class="brush: js">function notifyMe() {
+```js
+function notifyMe() {
   // Let's check if the browser supports notifications
   if (!('Notification' in window)) {
     console.log('This browser does not support desktop notification')
@@ -49,7 +48,7 @@ translation_of: Web/API/Notification/permission
     Notification.permission !== 'denied' ||
     Notification.permission === 'default'
   ) {
-    Notification.requestPermission((permission) =&gt; {
+    Notification.requestPermission((permission) => {
       // If the user accepts, let's create a notification
       if (permission === 'granted') {
         const notification = new Notification('Hi there!')
@@ -60,34 +59,21 @@ translation_of: Web/API/Notification/permission
   // At last, if the user has denied notifications, and you
   // want to be respectful there is no need to bother them any more.
 }
-</pre>
-
-<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">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName("Web Notifications","#dom-notification-permission","permission")}}</td>
-   <td>{{Spec2('Web Notifications')}}</td>
-   <td>Living standard</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Notification.permission")}}</p>
-
-<h2 id="Voir_également">Voir également</h2>
-
-<ul>
- <li><a href="/docs/Web/API/Notifications_API">API de notifications</a></li>
- <li><a href="/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li>
- <li><a href="/en-US/docs/Web/API/Permissions_API">Permissions d'API</a></li>
- <li><a href="/en-US/docs/Web/API/Permissions_API/Using_the_Permissions_API">Utilisation des permissions d'API</a></li>
-</ul>
+```
+
+## Spécifications
+
+| Spécification                                                                                            | État                                     | Commentaire     |
+| -------------------------------------------------------------------------------------------------------- | ---------------------------------------- | --------------- |
+| {{SpecName("Web Notifications","#dom-notification-permission","permission")}} | {{Spec2('Web Notifications')}} | Living standard |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Notification.permission")}}
+
+## Voir également
+
+- [API de notifications](/docs/Web/API/Notifications_API)
+- [Utilisation de l'API Notifications](/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API)
+- [Permissions d'API](/en-US/docs/Web/API/Permissions_API)
+- [Utilisation des permissions d'API](/en-US/docs/Web/API/Permissions_API/Using_the_Permissions_API)
diff --git a/files/fr/web/api/notification/renotify/index.md b/files/fr/web/api/notification/renotify/index.md
index ebd7bb4492..1edc3cc380 100644
--- a/files/fr/web/api/notification/renotify/index.md
+++ b/files/fr/web/api/notification/renotify/index.md
@@ -13,44 +13,28 @@ tags:
   - renotify
 translation_of: Web/API/Notification/renotify
 ---
-<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
+{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}
 
-<p>La propriété en lecture seule <strong><code>renotify</code></strong> de l'interface {{domxref ("Notification")}} spécifie si l'utilisateur doit être notifié après qu'une nouvelle notification remplace l'ancienne, comme spécifié comme définis à l'aide de l'option <code>renotify</code> lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification"," Notification()")}}.</p>
+La propriété en lecture seule **`renotify`** de l'interface {{domxref ("Notification")}} spécifie si l'utilisateur doit être notifié après qu'une nouvelle notification remplace l'ancienne, comme spécifié comme définis à l'aide de l'option `renotify` lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification"," Notification()")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var>Notification</var>.renotify
-</pre>
+    Notification.renotify
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>Un {{domxref("Boolean")}}. <code>false</code> est la valeur par défaut; <code>true</code> oblige la notification à renotifier l'utilisateur.</p>
+Un {{domxref("Boolean")}}. `false` est la valeur par défaut; `true` oblige la notification à renotifier l'utilisateur.
 
-<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">Commentaire</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('Web Notifications','#dom-notification-renotify','renotify')}}</td>
-   <td>{{Spec2('Web Notifications')}}</td>
-   <td>Living standard</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                    | État                                     | Commentaire     |
+| ------------------------------------------------------------------------------------------------ | ---------------------------------------- | --------------- |
+| {{SpecName('Web Notifications','#dom-notification-renotify','renotify')}} | {{Spec2('Web Notifications')}} | Living standard |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Notification.renotify")}}</p>
+{{Compat("api.Notification.renotify")}}
 
-<h2 id="Voir_également">Voir également</h2>
+## Voir également
 
-<ul>
- <li><a href="/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li>
-</ul>
+- [Utilisation de l'API Notifications](/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API)
diff --git a/files/fr/web/api/notification/requestpermission/index.md b/files/fr/web/api/notification/requestpermission/index.md
index e8d71e4a90..63b5be9617 100644
--- a/files/fr/web/api/notification/requestpermission/index.md
+++ b/files/fr/web/api/notification/requestpermission/index.md
@@ -10,55 +10,50 @@ tags:
   - Reference
 translation_of: Web/API/Notification/requestPermission
 ---
-<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
+{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}
 
-<div class="note">
-<p><strong>Note:</strong> Cette fonctionnalité n'est pas disponible dans {{domxref("SharedWorker")}}</p>
-</div>
+> **Note :** Cette fonctionnalité n'est pas disponible dans {{domxref("SharedWorker")}}
 
-<div class="note">
-<p><strong>Note :</strong> Safari utilise toujours la syntaxe de function de rappel (callback ) pour obtenir l'autorisation. Lisez <a href="/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a> pour un bon exemple de la fonctionnalité de détection et d'exécution du code le cas échéant.</p>
-</div>
+> **Note :** Safari utilise toujours la syntaxe de function de rappel (callback ) pour obtenir l'autorisation. Lisez [Utilisation de l'API Notifications](/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API) pour un bon exemple de la fonctionnalité de détection et d'exécution du code le cas échéant.
 
-<p>La méthode <strong><code>requestPermission()</code></strong> de l'interface {{domxref ("Notification")}} demande l'autorisation à l'utilisateur pour l'origine actuelle d'afficher des notifications.</p>
+La méthode **`requestPermission()`** de l'interface {{domxref ("Notification")}} demande l'autorisation à l'utilisateur pour l'origine actuelle d'afficher des notifications.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<p>La dernière spécification a mis à jour cette méthode avec une syntaxe basée sur une promesse qui fonctionne comme ceci:</p>
+La dernière spécification a mis à jour cette méthode avec une syntaxe basée sur une promesse qui fonctionne comme ceci:
 
-<pre class="notranslate">Notification.requestPermission()
-  .then((permission) =&gt; { ... })</pre>
+    Notification.requestPermission()
+      .then((permission) => { ... })
 
-<p>Auparavant, la syntaxe était basée sur un simple rappel; cette version est désormais obsolète:</p>
+Auparavant, la syntaxe était basée sur un simple rappel; cette version est désormais obsolète:
 
-<pre class="notranslate">Notification.requestPermission(<var>callback</var>);</pre>
+    Notification.requestPermission(callback);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code><var>callback</var></code> {{optional_inline}} {{deprecated_inline("gecko46")}}</dt>
- <dd>Une fonction de rappel facultative qui est appelée avec la valeur d'autorisation. Déconseillé en faveur de la valeur de retour de la promesse.</dd>
-</dl>
+- `callback` {{optional_inline}} {{deprecated_inline("gecko46")}}
+  - : Une fonction de rappel facultative qui est appelée avec la valeur d'autorisation. Déconseillé en faveur de la valeur de retour de la promesse.
 
-<h3 id="Retour">Retour</h3>
+### Retour
 
-<p>Une {{jsxref ("Promise", "Promesse")}} qui se résout en une {{domxref ("DOMString")}} avec la permission choisie par l'utilisateur. Les valeurs possibles pour cette chaîne sont:</p>
+Une {{jsxref ("Promise", "Promesse")}} qui se résout en une {{domxref ("DOMString")}} avec la permission choisie par l'utilisateur. Les valeurs possibles pour cette chaîne sont:
 
-<ul>
- <li><code>granted</code></li>
- <li><code>denied</code></li>
- <li><code>default</code></li>
-</ul>
+- `granted`
+- `denied`
+- `default`
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Supposons ce HTML de base:</p>
+Supposons ce HTML de base:
 
-<pre class="brush: html">&lt;button onclick="notifyMe()"&gt;Notifie moi !&lt;/button&gt;</pre>
+```html
+<button onclick="notifyMe()">Notifie moi !</button>
+```
 
-<p>Il est possible d'envoyer une notification comme suit - nous présentons ici un ensemble de code assez détaillé et complet que vous pourriez utiliser si vous vouliez d'abord vérifier si les notifications sont prises en charge, puis vérifiez si l'autorisation a été accordée pour l'origine actuelle d'envoyer des notifications, puis demander l'autorisation si nécessaire, avant d'envoyer une notification.</p>
+Il est possible d'envoyer une notification comme suit - nous présentons ici un ensemble de code assez détaillé et complet que vous pourriez utiliser si vous vouliez d'abord vérifier si les notifications sont prises en charge, puis vérifiez si l'autorisation a été accordée pour l'origine actuelle d'envoyer des notifications, puis demander l'autorisation si nécessaire, avant d'envoyer une notification.
 
-<pre class="brush: js">function notifyMe() {
+```js
+function notifyMe() {
   // Vérifions si le navigateur prend en charge les notifications
   if (!('Notification' in window)) {
     alert('Ce navigateur ne prend pas en charge la notification de bureau')
@@ -72,7 +67,7 @@ translation_of: Web/API/Notification/requestPermission
 
   // Sinon, nous devons demander la permission à l'utilisateur
   else if (Notification.permission !== 'denied') {
-    Notification.requestPermission().then((permission) =&gt; {
+    Notification.requestPermission().then((permission) => {
       // Si l'utilisateur accepte, créons une notification
       if (permission === 'granted') {
         const notification = new Notification('Salut toi!')
@@ -83,37 +78,22 @@ translation_of: Web/API/Notification/requestPermission
   // Enfin, si l'utilisateur a refusé les notifications, et que vous
   // voulez être respectueux, il n'est plus nécessaire de les déranger.
 }
-</pre>
+```
 
-<p>Nous ne montrons plus d'exemple en direct sur cette page, car Chrome et Firefox n'autorisent plus les demandes de notification des {{htmlelement ("iframe")}}s d'origine croisée, avec d'autres navigateurs à suivre. Pour voir un exemple en action, consultez notre <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">exemple de liste de tâches</a> (voir également l'<a href="https://mdn.github.io/to-do-notifications/">application en cours d'exécution</a>.)</p>
+Nous ne montrons plus d'exemple en direct sur cette page, car Chrome et Firefox n'autorisent plus les demandes de notification des {{htmlelement ("iframe")}}s d'origine croisée, avec d'autres navigateurs à suivre. Pour voir un exemple en action, consultez notre [exemple de liste de tâches](https://github.com/mdn/to-do-notifications/tree/gh-pages) (voir également l'[application en cours d'exécution](https://mdn.github.io/to-do-notifications/).)
 
-<div class="note">
-<p><strong>Note :</strong> Dans l'exemple ci-dessus, nous générons des notifications en réponse à un geste de l'utilisateur (en cliquant sur un bouton). Il ne s'agit pas seulement d'une bonne pratique - vous ne devriez pas envoyer de spam aux utilisateurs avec des notifications qu'ils n'acceptent pas - mais les navigateurs suivants interdiront explicitement les notifications non déclenchées en réponse à un geste de l'utilisateur. Firefox le fait déjà depuis la version 72, par exemple.</p>
-</div>
+> **Note :** Dans l'exemple ci-dessus, nous générons des notifications en réponse à un geste de l'utilisateur (en cliquant sur un bouton). Il ne s'agit pas seulement d'une bonne pratique - vous ne devriez pas envoyer de spam aux utilisateurs avec des notifications qu'ils n'acceptent pas - mais les navigateurs suivants interdiront explicitement les notifications non déclenchées en réponse à un geste de l'utilisateur. Firefox le fait déjà depuis la version 72, par exemple.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Web Notifications')}}</td>
-   <td>{{Spec2('Web Notifications')}}</td>
-   <td>Living standard</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                | Status                                   | Comment         |
+| -------------------------------------------- | ---------------------------------------- | --------------- |
+| {{SpecName('Web Notifications')}} | {{Spec2('Web Notifications')}} | Living standard |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Notification.requestPermission")}}</p>
+{{Compat("api.Notification.requestPermission")}}
 
-<h2 id="Voir_également">Voir également</h2>
+## Voir également
 
-<ul>
- <li><a href="/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li>
-</ul>
+- [Utilisation de l'API Notifications](/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API)
diff --git a/files/fr/web/api/notification/requireinteraction/index.md b/files/fr/web/api/notification/requireinteraction/index.md
index 80eacf5f84..042d875ae3 100644
--- a/files/fr/web/api/notification/requireinteraction/index.md
+++ b/files/fr/web/api/notification/requireinteraction/index.md
@@ -12,41 +12,30 @@ tags:
   - requireInteraction
 translation_of: Web/API/Notification/requireInteraction
 ---
-<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
+{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}
 
-<p>La propriété en lecture seule <strong><code>requireInteraction</code></strong> de l'interface {{domxref ("Notification")}} renvoie un {{jsxref ("Boolean")}} indiquant qu'une notification doit rester active jusqu'à ce que l'utilisateur clique dessus ou la rejette, plutôt que de se fermer automatiquement. Ceci peut être défini à l'aide de l'option <code>requireInteraction</code> lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification()")}}.</p>
+La propriété en lecture seule **`requireInteraction`** de l'interface {{domxref ("Notification")}} renvoie un {{jsxref ("Boolean")}} indiquant qu'une notification doit rester active jusqu'à ce que l'utilisateur clique dessus ou la rejette, plutôt que de se fermer automatiquement. Ceci peut être défini à l'aide de l'option `requireInteraction` lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification()")}}.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">Notification.requireInteraction</pre>
+```js
+Notification.requireInteraction
+```
 
-<h3 id="Return_Value">Valeur</h3>
+### Valeur
 
-<p>Un {{jsxref("Boolean")}}.</p>
+Un {{jsxref("Boolean")}}.
 
-<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">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Web Notifications','#dom-notification-requireinteraction','requireInteraction')}}</td>
-   <td>{{Spec2('Web Notifications')}}</td>
-   <td>Living standard.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                | État                                     | Commentaire      |
+| ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ---------------- |
+| {{SpecName('Web Notifications','#dom-notification-requireinteraction','requireInteraction')}} | {{Spec2('Web Notifications')}} | Living standard. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Notification.requireInteraction")}}</p>
+{{Compat("api.Notification.requireInteraction")}}
 
-<h2 id="Voir_également">Voir également</h2>
+## Voir également
 
-<ul>
- <li><a href="/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li>
-</ul>
+- [Utilisation de l'API Notifications](/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API)
diff --git a/files/fr/web/api/notification/silent/index.md b/files/fr/web/api/notification/silent/index.md
index d97cde7bd4..5f31229f85 100644
--- a/files/fr/web/api/notification/silent/index.md
+++ b/files/fr/web/api/notification/silent/index.md
@@ -13,42 +13,28 @@ tags:
   - silent
 translation_of: Web/API/Notification/silent
 ---
-<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
+{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}
 
-<p>La propriété en lecture seule <strong><code>silent</code></strong> de l'interface {{domxref ("Notification")}} spécifie si la notification doit être silencieuse, c'est-à-dire qu'aucun son ou vibration ne doit être émis, quels que soient les paramètres de l'appareil. Ceci est comme définis à l'aide de l'option <code>silent</code> lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification()")}}.</p>
+La propriété en lecture seule **`silent`** de l'interface {{domxref ("Notification")}} spécifie si la notification doit être silencieuse, c'est-à-dire qu'aucun son ou vibration ne doit être émis, quels que soient les paramètres de l'appareil. Ceci est comme définis à l'aide de l'option `silent` lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification()")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var>Notification</var>.silent
-</pre>
+    Notification.silent
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>Un {{domxref("Boolean")}}. <code>false</code> est la valeur par défaut; <code>true</code> rend la notification silencieuse.</p>
+Un {{domxref("Boolean")}}. `false` est la valeur par défaut; `true` rend la notification silencieuse.
 
-<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">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Web Notifications','#dom-notification-silent','silent')}}</td>
-   <td>{{Spec2('Web Notifications')}}</td>
-   <td>Living standard</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                | État                                     | Commentaire     |
+| -------------------------------------------------------------------------------------------- | ---------------------------------------- | --------------- |
+| {{SpecName('Web Notifications','#dom-notification-silent','silent')}} | {{Spec2('Web Notifications')}} | Living standard |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Notification.silent")}}</p>
+{{Compat("api.Notification.silent")}}
 
-<h2 id="Voir_également">Voir également</h2>
+## Voir également
 
-<ul>
- <li><a href="/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li>
-</ul>
+- [Utilisation de l'API Notifications](/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API)
diff --git a/files/fr/web/api/notification/tag/index.md b/files/fr/web/api/notification/tag/index.md
index 7c5196d714..49518f4fdd 100644
--- a/files/fr/web/api/notification/tag/index.md
+++ b/files/fr/web/api/notification/tag/index.md
@@ -12,44 +12,30 @@ tags:
   - tag
 translation_of: Web/API/Notification/tag
 ---
-<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
+{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}
 
-<p>La propriété en lecture seule <code><strong>tag</strong></code> de l'interface {{domxref ("Notification")}} correspond à une balise d'identification pour la notification, comme définis à l'aide de l'option <code>tag</code> lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification()" )}}.</p>
+La propriété en lecture seule **`tag`** de l'interface {{domxref ("Notification")}} correspond à une balise d'identification pour la notification, comme définis à l'aide de l'option `tag` lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification()" )}}.
 
-<p>L'idée des balises de notification est que plusieurs notifications peuvent partager la même balise, les reliant entre elles. Une notification peut ensuite être programmatiquement remplacée par une autre pour éviter que l'écran des utilisateurs ne soit rempli d'un grand nombre de notifications similaires.</p>
+L'idée des balises de notification est que plusieurs notifications peuvent partager la même balise, les reliant entre elles. Une notification peut ensuite être programmatiquement remplacée par une autre pour éviter que l'écran des utilisateurs ne soit rempli d'un grand nombre de notifications similaires.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var>Notification</var>.tag
-</pre>
+    Notification.tag
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>Une {{domxref("DOMString")}}.</p>
+Une {{domxref("DOMString")}}.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table>
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Web Notifications','#dom-notification-tag','tag')}}</td>
-   <td>{{Spec2('Web Notifications')}}</td>
-   <td>Living standard</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                        | État                                     | Commentaire     |
+| ------------------------------------------------------------------------------------ | ---------------------------------------- | --------------- |
+| {{SpecName('Web Notifications','#dom-notification-tag','tag')}} | {{Spec2('Web Notifications')}} | Living standard |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Notification.tag")}}</p>
+{{Compat("api.Notification.tag")}}
 
-<h2 id="Voir_également">Voir également</h2>
+## Voir également
 
-<ul>
- <li><a href="/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li>
-</ul>
+- [Utilisation de l'API Notifications](/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API)
diff --git a/files/fr/web/api/notification/timestamp/index.md b/files/fr/web/api/notification/timestamp/index.md
index 8218d858d6..44d6b4484b 100644
--- a/files/fr/web/api/notification/timestamp/index.md
+++ b/files/fr/web/api/notification/timestamp/index.md
@@ -12,43 +12,30 @@ tags:
   - timeStamp
 translation_of: Web/API/Notification/timestamp
 ---
-<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
+{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}
 
-<p>La propriété en lecture seule <strong><code>timestamp</code></strong> de l'interface {{domxref ("Notification")}} renvoie un {{domxref ("DOMTimeStamp")}}, comme définis à l'aide de l'option <code>timestamp</code> lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification()")}}.</p>
+La propriété en lecture seule **`timestamp`** de l'interface {{domxref ("Notification")}} renvoie un {{domxref ("DOMTimeStamp")}}, comme définis à l'aide de l'option `timestamp` lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification()")}}.
 
-<p>L'horodatage de la notification peut représenter le moment, en millisecondes depuis 00:00:00 UTC le 1er janvier 1970, de l'événement pour lequel la notification a été créée, ou il peut s'agir d'un horodatage arbitraire que vous souhaitez associer à la notification. Par exemple, un horodatage pour une réunion à venir pourrait être défini dans le futur, tandis qu'un horodatage pour un message manqué pourrait être défini dans le passé.</p>
+L'horodatage de la notification peut représenter le moment, en millisecondes depuis 00:00:00 UTC le 1er janvier 1970, de l'événement pour lequel la notification a été créée, ou il peut s'agir d'un horodatage arbitraire que vous souhaitez associer à la notification. Par exemple, un horodatage pour une réunion à venir pourrait être défini dans le futur, tandis qu'un horodatage pour un message manqué pourrait être défini dans le passé.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var>Notification</var>.timestamp</pre>
+    Notification.timestamp
 
-<h3 id="Return_Value">Valeur</h3>
+### Valeur
 
-<p>Un {{domxref("DOMTimeStamp")}}.</p>
+Un {{domxref("DOMTimeStamp")}}.
 
-<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">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Web Notifications','#dom-notification-timestamp','timestamp')}}</td>
-   <td>{{Spec2('Web Notifications')}}</td>
-   <td>Living standard</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                        | État                                     | Commentaire     |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------------------- | --------------- |
+| {{SpecName('Web Notifications','#dom-notification-timestamp','timestamp')}} | {{Spec2('Web Notifications')}} | Living standard |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Notification.timestamp")}}</p>
+{{Compat("api.Notification.timestamp")}}
 
-<h2 id="Voir_également">Voir également</h2>
+## Voir également
 
-<ul>
- <li><a href="/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li>
-</ul>
+- [Utilisation de l'API Notifications](/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API)
diff --git a/files/fr/web/api/notification/title/index.md b/files/fr/web/api/notification/title/index.md
index ba07a05630..e367dece95 100644
--- a/files/fr/web/api/notification/title/index.md
+++ b/files/fr/web/api/notification/title/index.md
@@ -12,41 +12,28 @@ tags:
   - Titre
 translation_of: Web/API/Notification/title
 ---
-<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
+{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}
 
-<p>La propriété en lecture seule <strong><code>title</code></strong> de l'interface {{domxref ("Notification")}} indique le titre de la notification, comme définis à l'aide de l'option <code>silent</code> lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification()") }} constructeur.</p>
+La propriété en lecture seule **`title`** de l'interface {{domxref ("Notification")}} indique le titre de la notification, comme définis à l'aide de l'option `silent` lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification()") }} constructeur.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var>Notification</var>.title</pre>
+    Notification.title
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>Une {{domxref("DOMString")}}.</p>
+Une {{domxref("DOMString")}}.
 
-<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">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Web Notifications','#dom-notification-title','title')}}</td>
-   <td>{{Spec2('Web Notifications')}}</td>
-   <td>Living standard</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                            | État                                     | Commentaire     |
+| ---------------------------------------------------------------------------------------- | ---------------------------------------- | --------------- |
+| {{SpecName('Web Notifications','#dom-notification-title','title')}} | {{Spec2('Web Notifications')}} | Living standard |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Notification.title")}}</p>
+{{Compat("api.Notification.title")}}
 
-<h2 id="Voir_également">Voir également</h2>
+## Voir également
 
-<ul>
- <li><a href="/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li>
-</ul>
+- [Utilisation de l'API Notifications](/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API)
diff --git a/files/fr/web/api/notification/vibrate/index.md b/files/fr/web/api/notification/vibrate/index.md
index d9bae90120..385661af6f 100644
--- a/files/fr/web/api/notification/vibrate/index.md
+++ b/files/fr/web/api/notification/vibrate/index.md
@@ -13,42 +13,28 @@ tags:
   - vibrate
 translation_of: Web/API/Notification/vibrate
 ---
-<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
+{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}
 
-<p>La propriété en lecture seule <strong><code>vibrate</code></strong> de l'interface {{domxref ("Notification")}} spécifie un modèle de vibration que le matériel de vibration de l'appareil doit émettre lorsque la notification se déclenche. Ceci est comme définis à l'aide de l'option <code>vibrate</code> lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification ()")}}.</p>
+La propriété en lecture seule **`vibrate`** de l'interface {{domxref ("Notification")}} spécifie un modèle de vibration que le matériel de vibration de l'appareil doit émettre lorsque la notification se déclenche. Ceci est comme définis à l'aide de l'option `vibrate` lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification ()")}}.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var>Notification</var>.vibrate
-</pre>
+    Notification.vibrate
 
-<h3 id="Return_Value">Valeur</h3>
+### Valeur
 
-<p>Un <a href="/fr/docs/Web/Guide/API/Vibration#Vibration_patterns">modèle de vibration</a>, tel que spécifié dans la spécification de l'{{domxref ("Vibration_API", "Api de Vibration")}}.</p>
+Un [modèle de vibration](/fr/docs/Web/Guide/API/Vibration#Vibration_patterns), tel que spécifié dans la spécification de l'{{domxref ("Vibration_API", "Api de Vibration")}}.
 
-<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">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Web Notifications','#dom-notification-vibrate','vibrate')}}</td>
-   <td>{{Spec2('Web Notifications')}}</td>
-   <td>Living standard</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                    | État                                     | Commentaire     |
+| ------------------------------------------------------------------------------------------------ | ---------------------------------------- | --------------- |
+| {{SpecName('Web Notifications','#dom-notification-vibrate','vibrate')}} | {{Spec2('Web Notifications')}} | Living standard |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Notification.vibrate")}}</p>
+{{Compat("api.Notification.vibrate")}}
 
-<h2 id="Voir_également">Voir également</h2>
+## Voir également
 
-<ul>
- <li><a href="/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li>
-</ul>
+- [Utilisation de l'API Notifications](/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API)
diff --git a/files/fr/web/api/notificationevent/index.md b/files/fr/web/api/notificationevent/index.md
index e46d5d4727..0b2803c583 100644
--- a/files/fr/web/api/notificationevent/index.md
+++ b/files/fr/web/api/notificationevent/index.md
@@ -9,44 +9,37 @@ tags:
   - ServiceWorker
 translation_of: Web/API/NotificationEvent
 ---
-<div>{{APIRef("Service Workers API")}}{{SeeCompatTable}}</div>
+{{APIRef("Service Workers API")}}{{SeeCompatTable}}
 
-<p>L'interface <strong><code>NotificationEvent</code></strong> représente un évènement de clic pour une notification et qui est dispatché vers le {{domxref("ServiceWorkerGlobalScope")}} d'un {{domxref("ServiceWorker")}}.</p>
+L'interface **`NotificationEvent`** représente un évènement de clic pour une notification et qui est dispatché vers le {{domxref("ServiceWorkerGlobalScope")}} d'un {{domxref("ServiceWorker")}}.
 
-<p>Cette interface hérite de l'interface {{domxref("ExtendableEvent")}}.</p>
+Cette interface hérite de l'interface {{domxref("ExtendableEvent")}}.
 
-<h2 id="Constructeur">Constructeur</h2>
+## Constructeur
 
-<dl>
- <dt>{{domxref("NotificationEvent.NotificationEvent()")}}</dt>
- <dd>Cette méthode permet de créer un nouvel objet <code>NotificationEvent</code>.</dd>
-</dl>
+- {{domxref("NotificationEvent.NotificationEvent()")}}
+  - : Cette méthode permet de créer un nouvel objet `NotificationEvent`.
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<p><em>Cet objet hérite de propriétés grâce à son ancêtre : {{domxref("Event")}}</em>.</p>
+_Cet objet hérite de propriétés grâce à son ancêtre : {{domxref("Event")}}_.
 
-<dl>
- <dt>{{domxref("NotificationEvent.notification")}} {{readonlyInline}}</dt>
- <dd>Cette propriété renvoie un objet {{domxref("Notification")}} représentant la notification sur laquelle on a cliqué pour déclencher l'évènement.</dd>
- <dt>{{domxref("NotificationEvent.action")}} {{readonlyinline}}</dt>
- <dd>Cette propriété renvoie une chaîne de caractères identifiant le bouton de la notification sur lequel l'utilisateur a cliqué. Cette valeur sera {{jsxref("undefined")}} si l'utilisateur a cliqué autre part que sur le bouton pour la notification ou si la notification ne possède pas de bouton.</dd>
-</dl>
+- {{domxref("NotificationEvent.notification")}} {{readonlyInline}}
+  - : Cette propriété renvoie un objet {{domxref("Notification")}} représentant la notification sur laquelle on a cliqué pour déclencher l'évènement.
+- {{domxref("NotificationEvent.action")}} {{readonlyinline}}
+  - : Cette propriété renvoie une chaîne de caractères identifiant le bouton de la notification sur lequel l'utilisateur a cliqué. Cette valeur sera {{jsxref("undefined")}} si l'utilisateur a cliqué autre part que sur le bouton pour la notification ou si la notification ne possède pas de bouton.
 
-<h2 id="Méthodes">Méthodes</h2>
+## Méthodes
 
-<p><em>Cet objet hérite de méthodes grâce à son parent </em><em>{{domxref("ExtendableEvent")}}</em>.</p>
+_Cet objet hérite de méthodes grâce à son parent_ _{{domxref("ExtendableEvent")}}_.
 
-<dl>
- <dt>{{domxref("ExtendableEvent.waitUntil", "ExtendableEvent.waitUntil()")}}</dt>
- <dd>
- <p>Cette méthode allonge la durée de vie de l'évènement. Elle est conçue pour être appelée dans le gestionnaire d'évènement {{event("install")}} lors de l'installation (cf. {{domxref("ServiceWorkerRegistration.installing")}}) du <em>worker</em> et dans le gestionnaire d'évènement {{event("active")}} pour le <em>worker</em> actif (cf. {{domxref("ServiceWorkerRegistration.active")}}).</p>
- </dd>
-</dl>
+- {{domxref("ExtendableEvent.waitUntil", "ExtendableEvent.waitUntil()")}}
+  - : Cette méthode allonge la durée de vie de l'évènement. Elle est conçue pour être appelée dans le gestionnaire d'évènement {{event("install")}} lors de l'installation (cf. {{domxref("ServiceWorkerRegistration.installing")}}) du _worker_ et dans le gestionnaire d'évènement {{event("active")}} pour le _worker_ actif (cf. {{domxref("ServiceWorkerRegistration.active")}}).
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: js">self.addEventListener('notificationclick', function(event) {
+```js
+self.addEventListener('notificationclick', function(event) {
   console.log('Au clic sur la notification : ', event.notification.tag);
   event.notification.close();
 
@@ -55,38 +48,25 @@ translation_of: Web/API/NotificationEvent
   event.waitUntil(clients.matchAll({
     type: "window"
   }).then(function(clientList) {
-    for (var i = 0; i &lt; clientList.length; i++) {
+    for (var i = 0; i < clientList.length; i++) {
       var client = clientList[i];
-      if (client.url == '/' &amp;&amp; 'focus' in client)
+      if (client.url == '/' && 'focus' in client)
         return client.focus();
     }
     if (clients.openWindow)
       return clients.openWindow('/');
   }));
 });
-</pre>
-
-<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('Web Notifications','#notificationevent','NotificationEvent')}}</td>
-   <td>{{Spec2('Web Notifications')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<div class="note">
-<p><strong>Note :</strong> Cette interface est définie au sein de <a href="/fr/docs/Web/API/Notifications_API">l'API Notifications</a>, mais on y accède via {{domxref("ServiceWorkerGlobalScope")}}.</p>
-</div>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.NotificationEvent")}}</p>
+```
+
+## Spécifications
+
+| Spécification                                                                                        | État                                     | Commentaires |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------------------- | ------------ |
+| {{SpecName('Web Notifications','#notificationevent','NotificationEvent')}} | {{Spec2('Web Notifications')}} |              |
+
+> **Note :** Cette interface est définie au sein de [l'API Notifications](/fr/docs/Web/API/Notifications_API), mais on y accède via {{domxref("ServiceWorkerGlobalScope")}}.
+
+## Compatibilité des navigateurs
+
+{{Compat("api.NotificationEvent")}}
diff --git a/files/fr/web/api/notifications_api/index.md b/files/fr/web/api/notifications_api/index.md
index 6d8129b9d8..d7483eea5c 100644
--- a/files/fr/web/api/notifications_api/index.md
+++ b/files/fr/web/api/notifications_api/index.md
@@ -8,84 +8,61 @@ tags:
   - système
 translation_of: Web/API/Notifications_API
 ---
-<p>{{DefaultAPISidebar("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
+{{DefaultAPISidebar("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}
 
-<p>L'API Notifications permet aux pages Web de contrôler l'affichage des notifications système de l'utilisateur final. Ceux-ci sont en dehors de la fenêtre du contexte de navigation de niveau supérieur, ils peuvent donc être affichés même lorsque l'utilisateur a changé d'onglet ou déplacé vers une autre application. L'API est conçue pour être compatible avec les systèmes de notification existants, sur différentes plates-formes.</p>
+L'API Notifications permet aux pages Web de contrôler l'affichage des notifications système de l'utilisateur final. Ceux-ci sont en dehors de la fenêtre du contexte de navigation de niveau supérieur, ils peuvent donc être affichés même lorsque l'utilisateur a changé d'onglet ou déplacé vers une autre application. L'API est conçue pour être compatible avec les systèmes de notification existants, sur différentes plates-formes.
 
-<h2 id="Concepts_et_utilisation">Concepts et utilisation</h2>
+## Concepts et utilisation
 
-<p>Sur les plates-formes prises en charge, l'affichage d'une notification système implique généralement deux choses. Tout d'abord, l'utilisateur doit accorder l'autorisation à l' {{glossary("Origin","origine")}} actuelle pour afficher les notifications système, ce qui est généralement effectué lorsque l'application ou le site s'initialise, à l'aide de la méthode {{domxref ("Notification.requestPermission()")}}. Cela doit être fait en réponse à un geste de l'utilisateur, tel que cliquer sur un bouton, par exemple:</p>
+Sur les plates-formes prises en charge, l'affichage d'une notification système implique généralement deux choses. Tout d'abord, l'utilisateur doit accorder l'autorisation à l' {{glossary("Origin","origine")}} actuelle pour afficher les notifications système, ce qui est généralement effectué lorsque l'application ou le site s'initialise, à l'aide de la méthode {{domxref ("Notification.requestPermission()")}}. Cela doit être fait en réponse à un geste de l'utilisateur, tel que cliquer sur un bouton, par exemple:
 
-<pre class="brush: js">btn.addEventListener('click', () =&gt; {
+```js
+btn.addEventListener('click', () => {
   let promise = Notification.requestPermission()
   // wait for permission
-})</pre>
+})
+```
 
-<div class="note">
-<p><strong>Note :</strong> Il ne s'agit pas seulement d'une bonne pratique - vous ne devriez pas envoyer de spam aux utilisateurs avec des notifications qu'ils n'acceptent pas - mais les navigateurs suivants interdiront explicitement les notifications non déclenchées en réponse à un geste de l'utilisateur. Firefox le fait déjà depuis la version 72, par exemple.</p>
-</div>
+> **Note :** Il ne s'agit pas seulement d'une bonne pratique - vous ne devriez pas envoyer de spam aux utilisateurs avec des notifications qu'ils n'acceptent pas - mais les navigateurs suivants interdiront explicitement les notifications non déclenchées en réponse à un geste de l'utilisateur. Firefox le fait déjà depuis la version 72, par exemple.
 
-<p>Cela créera une boîte de dialogue, proche de cette apparence:</p>
+Cela créera une boîte de dialogue, proche de cette apparence:
 
-<p><img alt="" src="screen_shot_2019-12-11_at_9.59.14_am.png"></p>
+![](screen_shot_2019-12-11_at_9.59.14_am.png)
 
-<p>De là, l'utilisateur peut choisir d'autoriser les notifications de cette origine ou de les bloquer. Une fois le choix effectué, le paramètre persistera généralement pour la session en cours.</p>
+De là, l'utilisateur peut choisir d'autoriser les notifications de cette origine ou de les bloquer. Une fois le choix effectué, le paramètre persistera généralement pour la session en cours.
 
-<div class="note">
-<p><strong>Note :</strong> Depuis Firefox 44, les autorisations pour les notifications et le push ont été fusionnées. Si l'autorisation est accordée pour les notifications, le push sera également activé.</p>
-</div>
+> **Note :** Depuis Firefox 44, les autorisations pour les notifications et le push ont été fusionnées. Si l'autorisation est accordée pour les notifications, le push sera également activé.
 
-<p>Ensuite, une nouvelle notification est créée à l'aide du constructeur {{domxref ("Notification.Notification", "Notification ()")}}. Auquel on doit passé un titre en argument et il peut éventuellement recevoir un objet d'options pour personnalisés la notification, telles que la direction du texte, le corps du texte, l'icône à afficher, le son de notification à lire, etc.</p>
+Ensuite, une nouvelle notification est créée à l'aide du constructeur {{domxref ("Notification.Notification", "Notification ()")}}. Auquel on doit passé un titre en argument et il peut éventuellement recevoir un objet d'options pour personnalisés la notification, telles que la direction du texte, le corps du texte, l'icône à afficher, le son de notification à lire, etc.
 
-<p>En outre, la spécification de l'API Notifications spécifie un certain nombre d'ajouts à l'<a href="/fr/docs/Web/API/ServiceWorker_API">API ServiceWorker</a>, pour permettre aux service worker de déclencher des notifications.</p>
+En outre, la spécification de l'API Notifications spécifie un certain nombre d'ajouts à l'[API ServiceWorker](/fr/docs/Web/API/ServiceWorker_API), pour permettre aux service worker de déclencher des notifications.
 
-<div class="note">
-<p><strong>Note :</strong> Pour en savoir plus sur l'utilisation des notifications dans votre propre application, lisez <a href="/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a>.</p>
-</div>
+> **Note :** Pour en savoir plus sur l'utilisation des notifications dans votre propre application, lisez [Utilisation de l'API Notifications](/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API).
 
-<h2 id="Les_interfaces_de_Notifications">Les interfaces de Notifications</h2>
+## Les interfaces de Notifications
 
-<dl>
- <dt>{{domxref("Notification")}}</dt>
- <dd>Définit un objet <code>Notification</code>.</dd>
-</dl>
+- {{domxref("Notification")}}
+  - : Définit un objet `Notification`.
 
-<h3 id="Ajout_de_service_worker">Ajout de service worker</h3>
+### Ajout de service worker
 
-<dl>
- <dt>{{domxref("ServiceWorkerRegistration")}}</dt>
- <dd>Inclut les méthodes {{domxref ("ServiceWorkerRegistration.showNotification()")}} et {{domxref ("ServiceWorkerRegistration.getNotifications()")}}, pour contrôler l'affichage des notifications.</dd>
- <dt>{{domxref("ServiceWorkerGlobalScope")}}</dt>
- <dd>Inclut le gestionnaire {{domxref ("ServiceWorkerGlobalScope.onnotificationclick")}}, pour déclencher des fonctions personnalisées lorsqu'un utilisateur clique sur une notification.</dd>
- <dt>{{domxref("NotificationEvent")}}</dt>
- <dd>Un type spécifique d'objet événement, basé sur {{domxref ("ExtendableEvent")}}, qui représente une notification qui s'est déclenchée.</dd>
-</dl>
+- {{domxref("ServiceWorkerRegistration")}}
+  - : Inclut les méthodes {{domxref ("ServiceWorkerRegistration.showNotification()")}} et {{domxref ("ServiceWorkerRegistration.getNotifications()")}}, pour contrôler l'affichage des notifications.
+- {{domxref("ServiceWorkerGlobalScope")}}
+  - : Inclut le gestionnaire {{domxref ("ServiceWorkerGlobalScope.onnotificationclick")}}, pour déclencher des fonctions personnalisées lorsqu'un utilisateur clique sur une notification.
+- {{domxref("NotificationEvent")}}
+  - : Un type spécifique d'objet événement, basé sur {{domxref ("ExtendableEvent")}}, qui représente une notification qui s'est déclenchée.
 
-<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">Commentaire</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('Web Notifications')}}</td>
-   <td>{{Spec2('Web Notifications')}}</td>
-   <td>Living standard</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                | État                                     | Commentaire     |
+| -------------------------------------------- | ---------------------------------------- | --------------- |
+| {{SpecName('Web Notifications')}} | {{Spec2('Web Notifications')}} | Living standard |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Notification")}}</p>
+{{Compat("api.Notification")}}
 
-<h2 id="Voir_également">Voir également</h2>
+## Voir également
 
-<ul>
- <li><a href="/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API">Utilisation de l'API Notifications</a></li>
-</ul>
+- [Utilisation de l'API Notifications](/fr/docs/Web/API/Notifications_API/Using_the_Notifications_API)
diff --git a/files/fr/web/api/notifications_api/using_the_notifications_api/index.md b/files/fr/web/api/notifications_api/using_the_notifications_api/index.md
index 694ad26f34..6a8a3ac80e 100644
--- a/files/fr/web/api/notifications_api/using_the_notifications_api/index.md
+++ b/files/fr/web/api/notifications_api/using_the_notifications_api/index.md
@@ -4,66 +4,71 @@ slug: Web/API/Notifications_API/Using_the_Notifications_API
 translation_of: Web/API/Notifications_API/Using_the_Notifications_API
 original_slug: Web/API/notification/Using_Web_Notifications
 ---
-<p>{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}</p>
+{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}
 
-<p>L'<a href="/fr/docs/Web/API/Notifications_API">API Notifications</a> permet à une application ou à une page web d'envoyer des notifications affichées en dehors de la page par le système sous-jacent. Cela permet aux applications web d'envoyer des informations aux utilisatrices et utilisateurs même lorsque l'application est en veille ou en arrière-plan. Dans cet article, nous verrons les bases de cette API afin de vous permettre de l'utiliser dans vos propres applications.</p>
+L'[API Notifications](/fr/docs/Web/API/Notifications_API) permet à une application ou à une page web d'envoyer des notifications affichées en dehors de la page par le système sous-jacent. Cela permet aux applications web d'envoyer des informations aux utilisatrices et utilisateurs même lorsque l'application est en veille ou en arrière-plan. Dans cet article, nous verrons les bases de cette API afin de vous permettre de l'utiliser dans vos propres applications.
 
-<p>Généralement, le système sous-jacent utilisé pour les notifications est celui du système d'exploitation. Voyez par exemple comment votre appareil mobile ou ordinateur affiche certaines notifications.</p>
+Généralement, le système sous-jacent utilisé pour les notifications est celui du système d'exploitation. Voyez par exemple comment votre appareil mobile ou ordinateur affiche certaines notifications.
 
-<p><img alt="Une capture d'écran d'Android avec trois notifications." src="android-notification.png"></p>
+![Une capture d'écran d'Android avec trois notifications.](android-notification.png)
 
-<p>Le système de notification du système d'exploitation variera selon la plateforme et le navigateur mais ce n'est pas un problème en soi : l'API Notifications a été conçue de façon suffisamment générique pour être compatible avec la plupart des systèmes de notification.</p>
+Le système de notification du système d'exploitation variera selon la plateforme et le navigateur mais ce n'est pas un problème en soi : l'API Notifications a été conçue de façon suffisamment générique pour être compatible avec la plupart des systèmes de notification.
 
-<h2 id="examples">Exemples</h2>
+## Exemples
 
-<p>Un des cas d'usage parmi les plus évidents pour les notifications est un client mail web ou une application de messagerie instantanée qui notifie dès qu'un nouveau message a été reçu, y compris lorsqu'on utilise l'appareil pour autre chose avec une autre application. De nombreux exemples existent pour ce cas, <a href="https://slack.com/">Slack</a> en est un parmi d'autres.</p>
+Un des cas d'usage parmi les plus évidents pour les notifications est un client mail web ou une application de messagerie instantanée qui notifie dès qu'un nouveau message a été reçu, y compris lorsqu'on utilise l'appareil pour autre chose avec une autre application. De nombreux exemples existent pour ce cas, [Slack](https://slack.com/) en est un parmi d'autres.
 
-<p>Nous avons écrit un exemple concret : une application pour gérer des listes de trucs à faire (« <i lang="en">to-do</i> ») pour vous donner une meilleure idée de la façon dont les notifications web peuvent être utilisées. Les données sont stockées localement avec <a href="/fr/docs/Web/API/IndexedDB_API">IndexedDB</a> et les utilisateurs sont notifiés lorsque les tâches arrivent à échéance grâce aux notifications système. <a href="https://github.com/mdn/to-do-notifications/tree/gh-pages">Téléchargez le code de cette application</a>, ou <a href="https://mdn.github.io/to-do-notifications/">testez l'application en <i lang="en">live</i></a>.</p>
+Nous avons écrit un exemple concret : une application pour gérer des listes de trucs à faire (« <i lang="en">to-do</i> ») pour vous donner une meilleure idée de la façon dont les notifications web peuvent être utilisées. Les données sont stockées localement avec [IndexedDB](/fr/docs/Web/API/IndexedDB_API) et les utilisateurs sont notifiés lorsque les tâches arrivent à échéance grâce aux notifications système. [Téléchargez le code de cette application](https://github.com/mdn/to-do-notifications/tree/gh-pages), ou [testez l'application en <i lang="en">live</i>](https://mdn.github.io/to-do-notifications/).
 
-<h2 id="requesting_permission">Demander la permission</h2>
+## Demander la permission
 
-<p>Avant qu'une application puisse envoyer une notification, l'utilisatrice ou l'utilisateur doit lui accorder le droit de le faire. Il s'agit d'un prérequis courant pour les API qui doivent interagir en dehors d'une page web : l'utilisatrice ou l'utilisateur doit, au moins une fois, explicitement accorder la permission à l'application d'afficher des notifications. La personne contrôle ainsi quels sites ou applications sont autorisés à afficher des notifications.</p>
+Avant qu'une application puisse envoyer une notification, l'utilisatrice ou l'utilisateur doit lui accorder le droit de le faire. Il s'agit d'un prérequis courant pour les API qui doivent interagir en dehors d'une page web : l'utilisatrice ou l'utilisateur doit, au moins une fois, explicitement accorder la permission à l'application d'afficher des notifications. La personne contrôle ainsi quels sites ou applications sont autorisés à afficher des notifications.
 
-<p>En raison d'abus des notifications par le passé, les équipes des navigateurs web ont commencé à mettre en place des stratégies pour limiter ce problème. Dans la pratique, vous ne devriez demander la permission à une personne uniquement après que celle-ci a interagi avec votre site/application (par exemple en ayant cliqué sur un bouton). Il ne s'agit pas seulement d'une bonne pratique (on ne devrait pas ennuyer les utilisatrices et utilisateurs avec de trop nombreuses notifications indésirées) mais d'une méthode qui sera implémentée par les différents navigateurs : Firefox le fait depuis Firefox 72 et Safari le fait également depuis quelque temps.</p>
+En raison d'abus des notifications par le passé, les équipes des navigateurs web ont commencé à mettre en place des stratégies pour limiter ce problème. Dans la pratique, vous ne devriez demander la permission à une personne uniquement après que celle-ci a interagi avec votre site/application (par exemple en ayant cliqué sur un bouton). Il ne s'agit pas seulement d'une bonne pratique (on ne devrait pas ennuyer les utilisatrices et utilisateurs avec de trop nombreuses notifications indésirées) mais d'une méthode qui sera implémentée par les différents navigateurs : Firefox le fait depuis Firefox 72 et Safari le fait également depuis quelque temps.
 
-<p>De plus, pour Chrome et Firefox, il n'est pas possible de demander la permission d'afficher des notifications à moins que le site soit servi dans un contexte sécurisé (c'est-à-dire avec HTTPS) et il n'est plus possible de demander une telle permission depuis une <a href="/fr/docs/Web/HTML/Element/iframe"><code>&lt;iframe&gt;</code></a> d'une origine tierce.</p>
+De plus, pour Chrome et Firefox, il n'est pas possible de demander la permission d'afficher des notifications à moins que le site soit servi dans un contexte sécurisé (c'est-à-dire avec HTTPS) et il n'est plus possible de demander une telle permission depuis une [`<iframe>`](/fr/docs/Web/HTML/Element/iframe) d'une origine tierce.
 
-<h3 id="checking_current_permission_status">Vérifier l'état de la permission</h3>
+### Vérifier l'état de la permission
 
-<p>Vous pouvez vérifier si la permission a déjà été accordée ou non grâce à la propriété en lecture seule <a href="/fr/docs/Web/API/notification/permission"><code>Notification.permission</code></a>. Cette dernière peut avoir l'une de ces trois valeurs :</p>
+Vous pouvez vérifier si la permission a déjà été accordée ou non grâce à la propriété en lecture seule [`Notification.permission`](/fr/docs/Web/API/notification/permission). Cette dernière peut avoir l'une de ces trois valeurs :
 
-<dl>
- <dt><code>default</code></dt>
- <dd>La permission n'a pas encore été demandée à l'utilisatrice ou l'utilisateur, les notifications ne seront pas affichées.</dd>
- <dt><code>granted</code></dt>
- <dd>La permission d'afficher des notifications a été accordée après que la demande a été affichée.</dd>
- <dt><code>denied</code></dt>
- <dd>La permission d'afficher des notifications a été explicitement refusée.</dd>
-</dl>
+- `default`
+  - : La permission n'a pas encore été demandée à l'utilisatrice ou l'utilisateur, les notifications ne seront pas affichées.
+- `granted`
+  - : La permission d'afficher des notifications a été accordée après que la demande a été affichée.
+- `denied`
+  - : La permission d'afficher des notifications a été explicitement refusée.
 
-<h3 id="getting_permission">Obtenir la permission</h3>
+### Obtenir la permission
 
-<p>Si la permission n'a pas encore été accordée, l'application devra utiliser la méthode <a href="/fr/docs/Web/API/notification/requestPermission"><code>Notification.requestPermission()</code></a> afin de la demander.  Une version très basique consiste à inclure :</p>
+Si la permission n'a pas encore été accordée, l'application devra utiliser la méthode [`Notification.requestPermission()`](/fr/docs/Web/API/notification/requestPermission) afin de la demander. Une version très basique consiste à inclure :
 
-<pre class="brush: js">Notification.requestPermission().then(function(result) {
+```js
+Notification.requestPermission().then(function(result) {
   console.log(result);
-});</pre>
+});
+```
 
-<p>Cela utilise la version de la méthode sous forme de promesse. Si vous souhaitez ou avez besoin de prendre en charge les versions antérieures, vous pourrez avoir besoin de version sous forme d'une fonction de rappel (<i lang="en">callback</i>) :</p>
+Cela utilise la version de la méthode sous forme de promesse. Si vous souhaitez ou avez besoin de prendre en charge les versions antérieures, vous pourrez avoir besoin de version sous forme d'une fonction de rappel (<i lang="en">callback</i>) :
 
-<pre class="brush: js">Notification.requestPermission();</pre>
+```js
+Notification.requestPermission();
+```
 
-<p>Cette version accepte en paramètre une fonction de rappel qui sera appelée une fois que l'utilisatrice ou l'utilisateur aura répondu à la demande de permission.</p>
+Cette version accepte en paramètre une fonction de rappel qui sera appelée une fois que l'utilisatrice ou l'utilisateur aura répondu à la demande de permission.
 
-<h3 id="example">Exemple</h3>
+### Exemple
 
-<p>Dans notre application de démonstration, nous avons inclus un bouton « Activer les notifications » qui, lorsqu'il est pressé, demande la permission pour l'application.</p>
+Dans notre application de démonstration, nous avons inclus un bouton « Activer les notifications » qui, lorsqu'il est pressé, demande la permission pour l'application.
 
-<pre class="brush: html">&lt;button id="enable"&gt;Activer les notifications&lt;/button&gt;</pre>
+```html
+<button id="enable">Activer les notifications</button>
+```
 
-<p>Cliquer sur ce bouton déclenche l'appel à la fonction <code>askNotificationPermission()</code> :</p>
+Cliquer sur ce bouton déclenche l'appel à la fonction `askNotificationPermission()` :
 
-<pre class="brush: js">function askNotificationPermission() {
+```js
+function askNotificationPermission() {
   // La fonction qui sert effectivement à demander la permission
   function handlePermission(permission) {
     // On affiche ou non le bouton en fonction de la réponse
@@ -80,7 +85,7 @@ original_slug: Web/API/notification/Using_Web_Notifications
   } else {
     if(checkNotificationPromise()) {
       Notification.requestPermission()
-      .then((permission) =&gt; {
+      .then((permission) => {
         handlePermission(permission);
       })
     } else {
@@ -89,21 +94,21 @@ original_slug: Web/API/notification/Using_Web_Notifications
       });
     }
   }
-}</pre>
+}
+```
 
-<p>Commençons par jeter un œil au deuxième bloc de code : vous verrez qu'on commence par vérifier la prise en charge de l'API Notifications. Si celle-ci est bien disponible, on regarde si la version à base de promesses pour <code>Notification.requestPermission()</code> est prise en charge. Si c'est le cas, on utilise cette version (prise en charge partout à l'exception de Safari) et sinon, on utilise l'ancienne version avec le <i lang="en">callback</i> (prise en charge par Safari).</p>
+Commençons par jeter un œil au deuxième bloc de code : vous verrez qu'on commence par vérifier la prise en charge de l'API Notifications. Si celle-ci est bien disponible, on regarde si la version à base de promesses pour `Notification.requestPermission()` est prise en charge. Si c'est le cas, on utilise cette version (prise en charge partout à l'exception de Safari) et sinon, on utilise l'ancienne version avec le <i lang="en">callback</i> (prise en charge par Safari).
 
-<p>Pour éviter la duplication du code, nous avons stocké quelques lignes dans la fonction <code>handlePermission()</code> qui correspond au premier bloc de ce fragment de code. Dans cette fonction, on définit explicitement la valeur de <code>Notification.permission</code> (certaines anciennes versions de Chrome avaient un bug et ne réalisaient pas cette initialisation automatiquement) puis on affiche ou on masque le bouton selon que la permission a déjà été demandée ou non. On ne veut pas afficher le bouton si la permission a déjà été accordée, en revanche, si elle a été déclinée, on veut permettre à l'utilisatrice ou à l'utilisateur de changer d'avis plus tard.</p>
+Pour éviter la duplication du code, nous avons stocké quelques lignes dans la fonction `handlePermission()` qui correspond au premier bloc de ce fragment de code. Dans cette fonction, on définit explicitement la valeur de `Notification.permission` (certaines anciennes versions de Chrome avaient un bug et ne réalisaient pas cette initialisation automatiquement) puis on affiche ou on masque le bouton selon que la permission a déjà été demandée ou non. On ne veut pas afficher le bouton si la permission a déjà été accordée, en revanche, si elle a été déclinée, on veut permettre à l'utilisatrice ou à l'utilisateur de changer d'avis plus tard.
 
-<div class="note">
-<p><strong>Note :</strong> Avant Chrome 37, Chrome ne permettait pas d'appeler <a href="/fr/docs/Web/API/notification/requestPermission"><code>Notification.requestPermission()</code></a> dans le gestionnaire d'évènements <code>load</code> (voir <a href="https://code.google.com/p/chromium/issues/detail?id=274284">le bug 274284</a>).</p>
-</div>
+> **Note :** Avant Chrome 37, Chrome ne permettait pas d'appeler [`Notification.requestPermission()`](/fr/docs/Web/API/notification/requestPermission) dans le gestionnaire d'évènements `load` (voir [le bug 274284](https://code.google.com/p/chromium/issues/detail?id=274284)).
 
-<h3 id="feature-detecting_the_requestpermission_promise">Détecter la prise en charge de requestPermission() en promesse</h3>
+### Détecter la prise en charge de requestPermission() en promesse
 
-<p>Plus haut, nous avons dit vérifier la prise en charge du navigateur pour la version de <code>Notification.requestPermission()</code> avec les promesses. Pour cela, nous avons utilisé :</p>
+Plus haut, nous avons dit vérifier la prise en charge du navigateur pour la version de `Notification.requestPermission()` avec les promesses. Pour cela, nous avons utilisé :
 
-<pre class="brush: js">function checkNotificationPromise() {
+```js
+function checkNotificationPromise() {
     try {
       Notification.requestPermission().then();
     } catch(e) {
@@ -111,25 +116,29 @@ original_slug: Web/API/notification/Using_Web_Notifications
     }
 
     return true;
-  }</pre>
+  }
+```
 
-<p>Cela permet de vérifier la présence d'une méthode <code>.then()</code> sur <code>requestPermission()</code>. Si une telle fonction est présente, on continue et on renvoie <code>true</code>. Sinon, on renvoie <code>false</code> dans le bloc de code <code>catch() {}</code>.</p>
+Cela permet de vérifier la présence d'une méthode `.then()` sur `requestPermission()`. Si une telle fonction est présente, on continue et on renvoie `true`. Sinon, on renvoie `false` dans le bloc de code `catch() {}`.
 
-<h2 id="creating_a_notification">Créer une notification</h2>
+## Créer une notification
 
-<p>Pour créer une notification, on utilisera le constructeur <a href="/fr/docs/Web/API/notification"><code>Notification</code></a>. Ce constructeur attend un titre à afficher au sein de la notification et permet d'utiliser différentes options pour améliorer la notification comme <a href="/fr/docs/Web/API/notification/icon"><code>une icône</code></a> ou un texte (<a href="/fr/docs/Web/API/notification/body"><code>body</code></a>).</p>
+Pour créer une notification, on utilisera le constructeur [`Notification`](/fr/docs/Web/API/notification). Ce constructeur attend un titre à afficher au sein de la notification et permet d'utiliser différentes options pour améliorer la notification comme [`une icône`](/fr/docs/Web/API/notification/icon) ou un texte ([`body`](/fr/docs/Web/API/notification/body)).
 
-<p>Par exemple, dans notre application de démonstration, on utilise le fragment de code suivant pour créer une notification lorsque c'est nécessaire (ce fragment se trouve dans la fonction <code>createNotification()</code>) :</p>
+Par exemple, dans notre application de démonstration, on utilise le fragment de code suivant pour créer une notification lorsque c'est nécessaire (ce fragment se trouve dans la fonction `createNotification()`) :
 
-<pre class="brush: js">const img = '/to-do-notifications/img/icon-128.png';
+```js
+const img = '/to-do-notifications/img/icon-128.png';
 const text = 'Coucou ! Votre tâche "' + titre + '" arrive maintenant à échéance.';
-const notification = new Notification('Liste de trucs à faire', { body: text, icon: img });</pre>
+const notification = new Notification('Liste de trucs à faire', { body: text, icon: img });
+```
 
-<h2 id="closing_notifications">Fermer les notifications</h2>
+## Fermer les notifications
 
-<p>On utilisera la méthode <a href="/fr/docs/Web/API/notification/close"><code>close()</code></a> afin de retirer une notification qui n'est plus pertinente (par exemple parce que la personne l'a déjà lue sur la page web s'il s'agit d'une messagerie ou, dans le cas d'un lecteur de musique, si la chanson en cours de lecture a déjà changé). La plupart des navigateurs effacent les notifications après un certain délai  (généralement autour de 4 secondes) mais ça ne devrait pas être un souci particulier, car cette tâche est souvent gérée par l'utilisateur ou l'agent utilisateur. La fermeture peut également être gérée par le système d'exploitation et les utilisatrices et utilisateurs doivent avoir la main sur ce comportement. D'anciennes versions de Chrome ne retiraient pas les automatiquement les notifications et vous pouvez donc utiliser un <a href="/fr/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout"><code>setTimeout()</code></a> uniquement pour ces versions historiques.</p>
+On utilisera la méthode [`close()`](/fr/docs/Web/API/notification/close) afin de retirer une notification qui n'est plus pertinente (par exemple parce que la personne l'a déjà lue sur la page web s'il s'agit d'une messagerie ou, dans le cas d'un lecteur de musique, si la chanson en cours de lecture a déjà changé). La plupart des navigateurs effacent les notifications après un certain délai (généralement autour de 4 secondes) mais ça ne devrait pas être un souci particulier, car cette tâche est souvent gérée par l'utilisateur ou l'agent utilisateur. La fermeture peut également être gérée par le système d'exploitation et les utilisatrices et utilisateurs doivent avoir la main sur ce comportement. D'anciennes versions de Chrome ne retiraient pas les automatiquement les notifications et vous pouvez donc utiliser un [`setTimeout()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout) uniquement pour ces versions historiques.
 
-<pre class="brush: js">const n = new Notification('Une super chanson');
+```js
+const n = new Notification('Une super chanson');
 document.addEventListener('visibilitychange', function() {
   if (document.visibilityState === 'visible') {
     // L'onglet est désormais visible et la notification n'est plus pertinente
@@ -137,54 +146,51 @@ document.addEventListener('visibilitychange', function() {
     n.close();
   }
 });
-</pre>
+```
 
-<div class="note">
-<p><strong>Note :</strong> Cette API ne devrait pas être utilisée pour retirer la notification de l'écran après un délai donné car elle supprimera également la notification de la liste des notifications et empêchera toute interaction avec celle-ci après qu'elle a initialement été affichée.</p>
-</div>
+> **Note :** Cette API ne devrait pas être utilisée pour retirer la notification de l'écran après un délai donné car elle supprimera également la notification de la liste des notifications et empêchera toute interaction avec celle-ci après qu'elle a initialement été affichée.
 
-<div class="note">
-<p><strong>Note :</strong> Lorsque vous recevez un évènement <code>close</code>, il n'y a aucune garantie que celui-ci provienne de l'utilisatrice ou de l'utilisateur. Cela correspond à la spécification qui indique : « lorsqu'une notification est fermée, que ce soit par la plateforme sous-jacente ou par l'utilisateur, l'étape de fermeture correspondante doit être exécutée. ».</p>
-</div>
+> **Note :** Lorsque vous recevez un évènement `close`, il n'y a aucune garantie que celui-ci provienne de l'utilisatrice ou de l'utilisateur. Cela correspond à la spécification qui indique : « lorsqu'une notification est fermée, que ce soit par la plateforme sous-jacente ou par l'utilisateur, l'étape de fermeture correspondante doit être exécutée. ».
 
-<h2 id="notification_events">Évènements relatifs aux notifications</h2>
+## Évènements relatifs aux notifications
 
-<p>Quatre évènements sont déclenchés sur une instance de <a href="/fr/docs/Web/API/notification"><code>Notification</code></a> :</p>
+Quatre évènements sont déclenchés sur une instance de [`Notification`](/fr/docs/Web/API/notification) :
 
-<dl>
- <dt><code>click</code></dt>
- <dd>Déclenché lorsque la personne clique sur la notification.</dd>
- <dt><code>close</code></dt>
- <dd>Déclenché lorsque la notification a été fermée.</dd>
- <dt><code>error</code></dt>
- <dd>Déclenché si une erreur se produit avec la notification. Généralement, cela a lieu lorsqu'il y a un problème d'affichage.</dd>
- <dt><code>show</code></dt>
- <dd>Déclenché lorsque la notification est affichée.</dd>
-</dl>
+- `click`
+  - : Déclenché lorsque la personne clique sur la notification.
+- `close`
+  - : Déclenché lorsque la notification a été fermée.
+- `error`
+  - : Déclenché si une erreur se produit avec la notification. Généralement, cela a lieu lorsqu'il y a un problème d'affichage.
+- `show`
+  - : Déclenché lorsque la notification est affichée.
 
-<p>Ces évènements peuvent être suivis avec les gestionnaires d'évènement <a href="/fr/docs/Web/API/notification/onclick"><code>onclick</code></a>, <a href="/fr/docs/Web/API/notification/onclose"><code>onclose</code></a>, <a href="/fr/docs/Web/API/notification/onerror"><code>onerror</code></a>, et <a href="/fr/docs/Web/API/notification/onshow"><code>onshow</code></a>. <a href="/fr/docs/Web/API/notification"><code>Notification</code></a> héritant également de <a href="/fr/docs/Web/API/EventTarget"><code>EventTarget</code></a>, il est aussi possible d'utiliser la méthode <a href="/fr/docs/Web/API/EventTarget/addEventListener"><code>addEventListener()</code></a>.</p>
+Ces évènements peuvent être suivis avec les gestionnaires d'évènement [`onclick`](/fr/docs/Web/API/notification/onclick), [`onclose`](/fr/docs/Web/API/notification/onclose), [`onerror`](/fr/docs/Web/API/notification/onerror), et [`onshow`](/fr/docs/Web/API/notification/onshow). [`Notification`](/fr/docs/Web/API/notification) héritant également de [`EventTarget`](/fr/docs/Web/API/EventTarget), il est aussi possible d'utiliser la méthode [`addEventListener()`](/fr/docs/Web/API/EventTarget/addEventListener).
 
-<h2 id="replacing_existing_notifications">Remplacer les notifications existantes</h2>
+## Remplacer les notifications existantes
 
-<p>Il est généralement peu souhaitable de recevoir de nombreuses notifications sur une courte période. Par exemple, que se passerait-il si une messagerie envoyait une notification pour chaque message reçu alors qu'une discussion est en cours ? Pour éviter de submerger l'utilisatrice ou l'utilisateur avec de trop nombreuses notifications, il est possible de modifier les notifications en attente en remplaçant une ou plusieurs notifications avec une nouvelle notification à jour.</p>
+Il est généralement peu souhaitable de recevoir de nombreuses notifications sur une courte période. Par exemple, que se passerait-il si une messagerie envoyait une notification pour chaque message reçu alors qu'une discussion est en cours ? Pour éviter de submerger l'utilisatrice ou l'utilisateur avec de trop nombreuses notifications, il est possible de modifier les notifications en attente en remplaçant une ou plusieurs notifications avec une nouvelle notification à jour.
 
-<p>Pour cela, on pourra ajouter une balise à toute nouvelle notification. Si une notification existante possède la balise correspondante et qu'elle n'a pas encore été affichée, la nouvelle notification remplacera la précédente. Si une notification avec la même balise a déjà été affichée, elle est fermée et la nouvelle notification est affichée.</p>
+Pour cela, on pourra ajouter une balise à toute nouvelle notification. Si une notification existante possède la balise correspondante et qu'elle n'a pas encore été affichée, la nouvelle notification remplacera la précédente. Si une notification avec la même balise a déjà été affichée, elle est fermée et la nouvelle notification est affichée.
 
-<h3 id="tag_example">Exemple d'utilisation des balises</h3>
+### Exemple d'utilisation des balises
 
-<p>Prenons le fragment HTML qui suit :</p>
+Prenons le fragment HTML qui suit :
 
-<pre class="brush: html">&lt;button&gt;Envoyez une notification !&lt;/button&gt;</pre>
+```html
+<button>Envoyez une notification !</button>
+```
 
-<p>Il est possible de gérer plusieurs notifications ainsi :</p>
+Il est possible de gérer plusieurs notifications ainsi :
 
-<pre class="brush: js">window.addEventListener('load', function () {
+```js
+window.addEventListener('load', function () {
   const button = document.getElementsByTagName('button')[0];
 
   button.addEventListener('click', function () {
     // Si l'utilisateur a permis les notifications
     // essayons d'envoyer 10 notifications
-    if (window.Notification &amp;&amp; Notification.permission === "granted") {
+    if (window.Notification && Notification.permission === "granted") {
       let i = 0;
       // On utilise un intervalle, car certains navigateurs (dont Firefox)
       // bloquent les notifications s'il y en a trop sur une période
@@ -199,9 +205,9 @@ document.addEventListener('visibilitychange', function() {
     }
 
     // Si l'utilisateur n'a pas encore autorisé ou non
-    // Note : À cause de Chrome, on ne peut pas s'assurer que la propriété permission 
+    // Note : À cause de Chrome, on ne peut pas s'assurer que la propriété permission
     // est définie et il est donc dangereux de vérifier la valeur "default"
-    else if (window.Notification &amp;&amp; Notification.permission !== "denied") {
+    else if (window.Notification && Notification.permission !== "denied") {
       Notification.requestPermission(function (status) {
         // Si la permission a été accordée
         if (status === "granted") {
@@ -231,22 +237,21 @@ document.addEventListener('visibilitychange', function() {
       alert("Coucou !");
     }
   });
-});</pre>
+});
+```
 
-<p>Voir le résultat de cet exemple :</p>
+Voir le résultat de cet exemple :
 
-<p>{{EmbedLiveSample('tag_example', '100%', 30)}}</p>
+{{EmbedLiveSample('tag_example', '100%', 30)}}
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<p>{{Specifications("api.Notification")}}</p>
+{{Specifications("api.Notification")}}
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Notification")}}</p>
+{{Compat("api.Notification")}}
 
-<h2 id="see_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/API/notification"><code>Notification</code></a></li>
-</ul>
+- [`Notification`](/fr/docs/Web/API/notification)
diff --git a/files/fr/web/api/notifyaudioavailableevent/index.md b/files/fr/web/api/notifyaudioavailableevent/index.md
index ad2b4365e2..3601e691b6 100644
--- a/files/fr/web/api/notifyaudioavailableevent/index.md
+++ b/files/fr/web/api/notifyaudioavailableevent/index.md
@@ -10,15 +10,13 @@ tags:
   - Référence(2)
 translation_of: Web/API/NotifyAudioAvailableEvent
 ---
-<div>{{APIRef("Web Audio API")}}{{Non-standard_header}}{{Deprecated_header}}</div>
+{{APIRef("Web Audio API")}}{{Non-standard_header}}{{Deprecated_header}}
 
-<p>L'interface <code><strong>NotifyAudioAvailableEvent</strong></code> non standard et obsolète définit l'événement envoyé aux éléments audio lorsque la mémoire tampon audio est pleine.</p>
+L'interface **`NotifyAudioAvailableEvent`** non standard et obsolète définit l'événement envoyé aux éléments audio lorsque la mémoire tampon audio est pleine.
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<dl>
- <dt><code>frameBuffer</code> {{ReadOnlyInline}}</dt>
- <dd>Un {{jsxref("Float32Array")}} contenant les données audo à virgule flottante 32 bits brutes obtenues à partir du décodage de l'audio (par exemple, les données brutes envoyées au matériel audio par rapport à l'audio codé). Les données sont une série d'échantillons audio, chaque échantillon contenant une valeur de 32 bits par canal audio. Toutes les trames audio sont normalisées pour contenir 1024 échantillons par défaut, mais peuvent avoir une longueur comprise entre 512 et 16384 échantillons si l'utilisateur a défini une longueur différente à l'aide de l'attribut <code><strong>mozFrameBufferLength</strong></code>.</dd>
- <dt><code>time</code></dt>
- <dd>Valeur à virgule flottante indiquant le temps en secondes auquel le premier échantillon du <code>frameBuffer</code> se produit, par rapport au début de la piste audio.</dd>
-</dl>
+- `frameBuffer` {{ReadOnlyInline}}
+  - : Un {{jsxref("Float32Array")}} contenant les données audo à virgule flottante 32 bits brutes obtenues à partir du décodage de l'audio (par exemple, les données brutes envoyées au matériel audio par rapport à l'audio codé). Les données sont une série d'échantillons audio, chaque échantillon contenant une valeur de 32 bits par canal audio. Toutes les trames audio sont normalisées pour contenir 1024 échantillons par défaut, mais peuvent avoir une longueur comprise entre 512 et 16384 échantillons si l'utilisateur a défini une longueur différente à l'aide de l'attribut **`mozFrameBufferLength`**.
+- `time`
+  - : Valeur à virgule flottante indiquant le temps en secondes auquel le premier échantillon du `frameBuffer` se produit, par rapport au début de la piste audio.
diff --git a/files/fr/web/api/offlineaudiocontext/complete_event/index.md b/files/fr/web/api/offlineaudiocontext/complete_event/index.md
index 80b1b067f5..02711f32b5 100644
--- a/files/fr/web/api/offlineaudiocontext/complete_event/index.md
+++ b/files/fr/web/api/offlineaudiocontext/complete_event/index.md
@@ -4,89 +4,43 @@ slug: Web/API/OfflineAudioContext/complete_event
 translation_of: Web/API/OfflineAudioContext/complete_event
 original_slug: Web/Events/complete
 ---
-<div>
-<p>L'événement <strong>complete</strong> est déclenché lorsque le rendu d'un {{domxref("OfflineAudioContext")}} est terminé.</p>
-</div>
+L'événement **complete** est déclenché lorsque le rendu d'un {{domxref("OfflineAudioContext")}} est terminé.
 
-<h2 id="Informations_générales">Informations générales</h2>
+## Informations générales
 
-<dl>
- <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
- <dd style="margin: 0 0 0 120px;">{{SpecName('Web Audio API', '#OfflineAudioCompletionEvent-section', 'OfflineAudioCompletionEvent')}}</dd>
- <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
- <dd style="margin: 0 0 0 120px;">{{domxref("OfflineAudioCompletionEvent")}}</dd>
- <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
- <dd style="margin: 0 0 0 120px;">?</dd>
- <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
- <dd style="margin: 0 0 0 120px;">?</dd>
- <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
- <dd style="margin: 0 0 0 120px;">{{domxref("OfflineAudioContext")}}</dd>
- <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
- <dd style="margin: 0 0 0 120px;">Aucune</dd>
-</dl>
+- Spécification
+  - : {{SpecName('Web Audio API', '#OfflineAudioCompletionEvent-section', 'OfflineAudioCompletionEvent')}}
+- Interface
+  - : {{domxref("OfflineAudioCompletionEvent")}}
+- Propagation
+  - : ?
+- Annulable
+  - : ?
+- Cible
+  - : {{domxref("OfflineAudioContext")}}
+- Action par défaut
+  - : Aucune
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Property</th>
-   <th scope="col">Type</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>target</code> {{readonlyInline}}</td>
-   <td>{{domxref("EventTarget")}}</td>
-   <td>The event target (the topmost target in the DOM tree).</td>
-  </tr>
-  <tr>
-   <td><code>type</code> {{readonlyInline}}</td>
-   <td>{{domxref("DOMString")}}</td>
-   <td>The type of event.</td>
-  </tr>
-  <tr>
-   <td><code>bubbles</code> {{readonlyInline}}</td>
-   <td>{{jsxref("Boolean")}}</td>
-   <td>Whether the event normally bubbles or not.</td>
-  </tr>
-  <tr>
-   <td><code>cancelable</code> {{readonlyInline}}</td>
-   <td>{{jsxref("Boolean")}}</td>
-   <td>Whether the event is cancellable or not.</td>
-  </tr>
-  <tr>
-   <td><code>renderedBuffer</code> {{readonlyInline}}</td>
-   <td>{{domxref("AudioBuffer")}}</td>
-   <td>The buffer containing the result of the processing of an {{domxref("OfflineAudioContext")}}.</td>
-  </tr>
- </tbody>
-</table>
+| Property                                  | Type                                 | Description                                                                                            |
+| ----------------------------------------- | ------------------------------------ | ------------------------------------------------------------------------------------------------------ |
+| `target` {{readonlyInline}}         | {{domxref("EventTarget")}} | The event target (the topmost target in the DOM tree).                                                 |
+| `type` {{readonlyInline}}           | {{domxref("DOMString")}}     | The type of event.                                                                                     |
+| `bubbles` {{readonlyInline}}        | {{jsxref("Boolean")}}         | Whether the event normally bubbles or not.                                                             |
+| `cancelable` {{readonlyInline}}     | {{jsxref("Boolean")}}         | Whether the event is cancellable or not.                                                               |
+| `renderedBuffer` {{readonlyInline}} | {{domxref("AudioBuffer")}} | The buffer containing the result of the processing of an {{domxref("OfflineAudioContext")}}. |
 
-<h2 id="Evénements_liés">Evénements liés</h2>
+## Evénements liés
 
-<p><em>Aucun</em></p>
+_Aucun_
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Web Audio API', '#OfflineAudioCompletionEvent-section', 'OfflineAudioCompletionEvent')}}</td>
-   <td>{{Spec2('Web Audio API')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                        | Statut                               | Commentaire |
+| ------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ----------- |
+| {{SpecName('Web Audio API', '#OfflineAudioCompletionEvent-section', 'OfflineAudioCompletionEvent')}} | {{Spec2('Web Audio API')}} |             |
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web_Audio_API">Web Audio API</a></li>
-</ul>
+- [Web Audio API](/fr/docs/Web_Audio_API)
diff --git a/files/fr/web/api/offscreencanvas/index.md b/files/fr/web/api/offscreencanvas/index.md
index fa540f07d4..8dba3f4dc7 100644
--- a/files/fr/web/api/offscreencanvas/index.md
+++ b/files/fr/web/api/offscreencanvas/index.md
@@ -9,63 +9,58 @@ tags:
   - Reference
 translation_of: Web/API/OffscreenCanvas
 ---
-<div>{{APIRef("Canvas API")}} {{SeeCompatTable}}</div>
+{{APIRef("Canvas API")}} {{SeeCompatTable}}
 
-<p>L'interface <code>OffscreenCanvas</code> fournit un canevas qui peut être restitué hors écran. Il est disponible dans les contextes à la fois window et <a href="/fr-FR/docs/Web/API/Web_Workers_API">worker</a>.</p>
+L'interface `OffscreenCanvas` fournit un canevas qui peut être restitué hors écran. Il est disponible dans les contextes à la fois window et [worker](/fr-FR/docs/Web/API/Web_Workers_API).
 
-<div class="note">
-<p><strong>Note :</strong> Cette API n'est actuellement implémentée que pour les contextes <a href="/fr-FR/docs/Web/API/WebGLRenderingContext">WebGL1</a> et<a href="/fr-FR/docs/Web/API/WebGL2RenderingContext">WebGL2</a>. Voir {{bug(801176)}} pour le support de l'<a href="/fr-FR/docs/Web/API/Canvas_API">API canvas</a> depuis les workers.</p>
-</div>
+> **Note :** Cette API n'est actuellement implémentée que pour les contextes [WebGL1](/fr-FR/docs/Web/API/WebGLRenderingContext) et[WebGL2](/fr-FR/docs/Web/API/WebGL2RenderingContext). Voir {{bug(801176)}} pour le support de l'[API canvas](/fr-FR/docs/Web/API/Canvas_API) depuis les workers.
 
-<h2 id="Constructeur">Constructeur</h2>
+## Constructeur
 
-<dl>
- <dt>{{domxref("OffscreenCanvas.OffscreenCanvas", "OffscreenCanvas()")}}</dt>
- <dd>Constructeur <code>OffscreenCanvas</code>. Crée un nouvel objet <code>OffscreenCanvas</code>.</dd>
-</dl>
+- {{domxref("OffscreenCanvas.OffscreenCanvas", "OffscreenCanvas()")}}
+  - : Constructeur `OffscreenCanvas`. Crée un nouvel objet `OffscreenCanvas`.
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<dl>
- <dt>{{domxref("OffscreenCanvas.height")}}</dt>
- <dd>La hauteur du canevas hors écran.</dd>
- <dt>{{domxref("OffscreenCanvas.width")}}</dt>
- <dd>La largeur du canevas hors écran.</dd>
-</dl>
+- {{domxref("OffscreenCanvas.height")}}
+  - : La hauteur du canevas hors écran.
+- {{domxref("OffscreenCanvas.width")}}
+  - : La largeur du canevas hors écran.
 
-<h2 id="Méthodes">Méthodes</h2>
+## Méthodes
 
-<dl>
- <dt>{{domxref("OffscreenCanvas.getContext()")}}</dt>
- <dd>Retourne un contexte de rendu pour le canevas hors écran.</dd>
-</dl>
+- {{domxref("OffscreenCanvas.getContext()")}}
+  - : Retourne un contexte de rendu pour le canevas hors écran.
 
-<dl>
- <dt>{{domxref("OffscreenCanvas.toBlob()")}}</dt>
- <dd>Crée un objet {{domxref("Blob")}} représentant l'image contenue dans le canevas.</dd>
-</dl>
+<!---->
 
-<dl>
- <dt>{{domxref("OffscreenCanvas.transferToImageBitmap()")}}</dt>
- <dd>Crée un objet {{domxref("ImageBitmap")}} à partir de l'image la plus récemment générée du <code>OffscreenCanvas</code>.</dd>
-</dl>
+- {{domxref("OffscreenCanvas.toBlob()")}}
+  - : Crée un objet {{domxref("Blob")}} représentant l'image contenue dans le canevas.
 
-<h2 id="Exemples">Exemples</h2>
+<!---->
 
-<h3 id="Affichage_synchrone_d'images_produites_par_un_OffscreenCanvas">Affichage synchrone d'images produites par un <code>OffscreenCanvas</code></h3>
+- {{domxref("OffscreenCanvas.transferToImageBitmap()")}}
+  - : Crée un objet {{domxref("ImageBitmap")}} à partir de l'image la plus récemment générée du `OffscreenCanvas`.
 
-<p>Une façon d'utiliser l'API <code>OffscreenCanvas</code> est d'utiliser un {{domxref("RenderingContext")}} obtenu à partir d'un objet <code>OffscreenCanvas</code> pour générer de nouvelles images. Une fois qu'une nouvelle image a fini d'être générée dans ce contexte, la méthode {{domxref("OffscreenCanvas.transferToImageBitmap", "transferToImageBitmap()")}} peut être appelée pour sauvegarder l'image générée la plus récente. Cette méthode retourne un objet {{domxref("ImageBitmap")}}, qui peut être utilisé dans une grande variété d'API Web et également dans un second canevas, sans créer de copie par transfert.</p>
+## Exemples
 
-<p>Pour afficher l'<code>ImageBitmap</code>, vous pouvez utiliser un contexte {{domxref("ImageBitmapRenderingContext")}}, qui peut être créé en appelant <code>canvas.getContext("bitmaprenderer")</code> sur un élément canevas (visible). Ce contexte fournit uniquement des fonctionnalités pour remplacer le contenu du canevas par l'<code>ImageBitmap</code> donnée. Un appel à {{domxref("ImageBitmapRenderingContext.transferImageBitmap()")}} avec l'<code>ImageBitmap</code> précédemment affichée et enregistrée à partir de OffscreenCanvas, affichera l'<code>ImageBitmap</code> sur le canevas et transférera son appartenance au canevas. Un seul <code>OffscreenCanvas</code> peut transférer des images dans un nombre arbitraire d'autres objets <code>ImageBitmapRenderingContext</code>.</p>
+### Affichage synchrone d'images produites par un `OffscreenCanvas`
 
-<p>Étant donnés ces deux éléments {{HTMLElement("canvas")}} :</p>
+Une façon d'utiliser l'API `OffscreenCanvas` est d'utiliser un {{domxref("RenderingContext")}} obtenu à partir d'un objet `OffscreenCanvas` pour générer de nouvelles images. Une fois qu'une nouvelle image a fini d'être générée dans ce contexte, la méthode {{domxref("OffscreenCanvas.transferToImageBitmap", "transferToImageBitmap()")}} peut être appelée pour sauvegarder l'image générée la plus récente. Cette méthode retourne un objet {{domxref("ImageBitmap")}}, qui peut être utilisé dans une grande variété d'API Web et également dans un second canevas, sans créer de copie par transfert.
 
-<pre class="brush: html">&lt;canvas id="une"&gt;&lt;/canvas&gt;
-&lt;canvas id="deux"&gt;&lt;/canvas&gt;</pre>
+Pour afficher l'`ImageBitmap`, vous pouvez utiliser un contexte {{domxref("ImageBitmapRenderingContext")}}, qui peut être créé en appelant `canvas.getContext("bitmaprenderer")` sur un élément canevas (visible). Ce contexte fournit uniquement des fonctionnalités pour remplacer le contenu du canevas par l'`ImageBitmap` donnée. Un appel à {{domxref("ImageBitmapRenderingContext.transferImageBitmap()")}} avec l'`ImageBitmap` précédemment affichée et enregistrée à partir de OffscreenCanvas, affichera l'`ImageBitmap` sur le canevas et transférera son appartenance au canevas. Un seul `OffscreenCanvas` peut transférer des images dans un nombre arbitraire d'autres objets `ImageBitmapRenderingContext`.
 
-<p>le code suivant fournira la restitution, en utilisant un <code>OffscreenCanvas</code> comme décrit ci-dessus.</p>
+Étant donnés ces deux éléments {{HTMLElement("canvas")}} :
 
-<pre class="brush: js">var une = document.getElementById("une").getContext("bitmaprenderer");
+```html
+<canvas id="une"></canvas>
+<canvas id="deux"></canvas>
+```
+
+le code suivant fournira la restitution, en utilisant un `OffscreenCanvas` comme décrit ci-dessus.
+
+```js
+var une = document.getElementById("une").getContext("bitmaprenderer");
 var deux = document.getElementById("deux").getContext("bitmaprenderer");
 
 var horsEcran = new OffscreenCanvas(256, 256);
@@ -82,28 +77,30 @@ une.transferImageBitmap(bitmapUne);
 // Exécuter la restitution pour le second canevas
 var bitmapDeux = horsEcran.transferToImageBitmap();
 deux.transferImageBitmap(bitmapDeux);
-</pre>
+```
 
-<h3 id="Affichage_asynchrone_d'images_produites_par_un_OffscreenCanvas">Affichage asynchrone d'images produites par un <code>OffscreenCanvas</code></h3>
+### Affichage asynchrone d'images produites par un `OffscreenCanvas`
 
-<p>Une autre façon d'utiliser l'API <code>OffscreenCanvas</code> est d'appeler {{domxref("HTMLCanvasElement.transferControlToOffscreen", "transferControlToOffscreen()")}} sur un élément {{HTMLElement("canvas")}}, soit sur un worker, soit sur le thread principal, ce qui retournera un objet <code>OffscreenCanvas</code> à partir d'un objet {{domxref("HTMLCanvasElement")}} depuis le thread principal. Appeler {{domxref("OffscreenCanvas.getContext", "getContext()")}} permettra d'obtienir alors un <code>RenderingContext</code> à partir de ce <code>OffscreenCanvas</code>.</p>
+Une autre façon d'utiliser l'API `OffscreenCanvas` est d'appeler {{domxref("HTMLCanvasElement.transferControlToOffscreen", "transferControlToOffscreen()")}} sur un élément {{HTMLElement("canvas")}}, soit sur un worker, soit sur le thread principal, ce qui retournera un objet `OffscreenCanvas` à partir d'un objet {{domxref("HTMLCanvasElement")}} depuis le thread principal. Appeler {{domxref("OffscreenCanvas.getContext", "getContext()")}} permettra d'obtienir alors un `RenderingContext` à partir de ce `OffscreenCanvas`.
 
-<p>Afin de rendre les cadres visibles, vous pouvez appeler <code>commit()</code> sur ce <code>RenderingContext</code>, afin que les cadres soient renvoyés dans l'élément {{HTMLElement ("canvas")}} original.</p>
+Afin de rendre les cadres visibles, vous pouvez appeler `commit()` sur ce `RenderingContext`, afin que les cadres soient renvoyés dans l'élément {{HTMLElement ("canvas")}} original.
 
-<p>Notez que dans Firefox, cette API n'est actuellement implémentée que pour le <a href="/fr-FR/docs/Web/API/WebGL_API">contexte WebGL</a> ({{domxref ("WebGLRenderingContext.commit()")}}). Pour la prise en charge de l'API Canvas 2D par les employés, voir {{bug (801176)}}.</p>
+Notez que dans Firefox, cette API n'est actuellement implémentée que pour le [contexte WebGL](/fr-FR/docs/Web/API/WebGL_API) ({{domxref ("WebGLRenderingContext.commit()")}}). Pour la prise en charge de l'API Canvas 2D par les employés, voir {{bug (801176)}}.
 
-<p>main.js (code du thread principal) :</p>
+main.js (code du thread principal) :
 
-<pre class="brush: js">var canevasHtml = document.getElementById("canevas");
+```js
+var canevasHtml = document.getElementById("canevas");
 var horsEcran = canevasHtml.transferControlToOffscreen();
 
 var worker = new Worker("offscreencanvas.js");
 worker.postMessage({canvas: offscreen}, [offscreen]);
-</pre>
+```
 
-<p>offscreencanvas.js (code worker) :</p>
+offscreencanvas.js (code worker) :
 
-<pre class="brush: js">onmessage = function(evt) {
+```js
+onmessage = function(evt) {
   var canevas = evt.data.canvas.
   var gl = canevas.getContext("webgl");
 
@@ -112,36 +109,23 @@ worker.postMessage({canvas: offscreen}, [offscreen]);
   // Renvoyer les images dans l'HTMLCanvasElement original
   gl.commit();
 };
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "scripting.html#the-offscreencanvas-interface", "OffscreenCanvas")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.OffscreenCanvas")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="https://hacks.mozilla.org/2016/01/webgl-off-the-main-thread/">WebGL Off the Main Thread – Mozilla Hacks</a></li>
- <li>{{domxref("CanvasRenderingContext2D")}}</li>
- <li>{{domxref("ImageBitmap")}}</li>
- <li>{{domxref("ImageBitmapRenderingContext")}}</li>
- <li>{{domxref("HTMLCanvasElement.transferControlToOffscreen()")}}</li>
- <li>{{domxref("WebGLRenderingContext.commit()")}}</li>
-</ul>
+```
+
+## Spécifications
+
+| Spécification                                                                                                                | Statut                           | Commentaire |
+| ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- |
+| {{SpecName('HTML WHATWG', "scripting.html#the-offscreencanvas-interface", "OffscreenCanvas")}} | {{Spec2('HTML WHATWG')}} |             |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.OffscreenCanvas")}}
+
+## Voir aussi
+
+- [WebGL Off the Main Thread – Mozilla Hacks](https://hacks.mozilla.org/2016/01/webgl-off-the-main-thread/)
+- {{domxref("CanvasRenderingContext2D")}}
+- {{domxref("ImageBitmap")}}
+- {{domxref("ImageBitmapRenderingContext")}}
+- {{domxref("HTMLCanvasElement.transferControlToOffscreen()")}}
+- {{domxref("WebGLRenderingContext.commit()")}}
diff --git a/files/fr/web/api/origin/index.md b/files/fr/web/api/origin/index.md
index 5fd2b80559..8aab326ced 100644
--- a/files/fr/web/api/origin/index.md
+++ b/files/fr/web/api/origin/index.md
@@ -4,48 +4,36 @@ slug: Web/API/origin
 translation_of: Web/API/WindowOrWorkerGlobalScope/origin
 original_slug: Web/API/WindowOrWorkerGlobalScope/origin
 ---
-<p>{{APIRef()}}{{SeeCompatTable}}</p>
+{{APIRef()}}{{SeeCompatTable}}
 
-<p>La propriété <code><strong>origin</strong></code> de l'interface {{domxref("WindowOrWorkerGlobalScope")}} retourne l'origine du scope global, serialisé en chaîne de caractères.</p>
+La propriété **`origin`** de l'interface {{domxref("WindowOrWorkerGlobalScope")}} retourne l'origine du scope global, serialisé en chaîne de caractères.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var <em>myOrigin</em> = self.origin; // ou simplement origin
-</pre>
+    var myOrigin = self.origin; // ou simplement origin
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>Une {{domxref("USVString")}}.</p>
+Une {{domxref("USVString")}}.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Exécuté depuis un worker, le code suivant permet d'afficher en console le scope global de ce worker à chaque message reçu.</p>
+Exécuté depuis un worker, le code suivant permet d'afficher en console le scope global de ce worker à chaque message reçu.
 
-<pre class="brush: js">onmessage = function() {
+```js
+onmessage = function() {
   console.log(self.origin);
-};</pre>
+};
+```
 
-<p>Si l'origine n'est pas sous la forme scheme/host/port (par exemple, si vous exécutez le code en local, via <code>file://</code>), <code>origin</code> retournera la chaîne de caractère <code>"null"</code>.</p>
+Si l'origine n'est pas sous la forme scheme/host/port (par exemple, si vous exécutez le code en local, via `file://`), `origin` retournera la chaîne de caractère `"null"`.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-origin', 'WindowOrWorkerGlobalScope.origin')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                | Statut                           | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName('HTML WHATWG', 'webappapis.html#dom-origin', 'WindowOrWorkerGlobalScope.origin')}} | {{Spec2('HTML WHATWG')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-
-
-<p>{{Compat("api.WindowOrWorkerGlobalScope.origin")}}</p>
+{{Compat("api.WindowOrWorkerGlobalScope.origin")}}
diff --git a/files/fr/web/api/oscillatornode/index.md b/files/fr/web/api/oscillatornode/index.md
index c4293946c4..a539ed1eb6 100644
--- a/files/fr/web/api/oscillatornode/index.md
+++ b/files/fr/web/api/oscillatornode/index.md
@@ -3,58 +3,51 @@ title: OscillatorNode
 slug: Web/API/OscillatorNode
 translation_of: Web/API/OscillatorNode
 ---
-<div>{{APIRef("Web Audio API")}}</div>
+{{APIRef("Web Audio API")}}
 
-<p>L'interface <code>OscillatorNode</code> représente un signal périodique, une sinusoïde par exemple. C'est un module de traitement audio {{domxref("AudioNode")}} qui crée un signal sinusoïdal à une fréquence donnée — c'est-à-dire génère une tonalité constante.</p>
+L'interface `OscillatorNode` représente un signal périodique, une sinusoïde par exemple. C'est un module de traitement audio {{domxref("AudioNode")}} qui crée un signal sinusoïdal à une fréquence donnée — c'est-à-dire génère une tonalité constante.
 
-<p>On crée un <code>OscillatorNode</code> en utilisant la méthode {{domxref("AudioContext.createOscillator")}}. Il a toujours exactement une sortie, et aucune entrée. Ses propriétés par défaut (voir {{domxref("AudioNode")}} pour la définition) sont :</p>
+On crée un `OscillatorNode` en utilisant la méthode {{domxref("AudioContext.createOscillator")}}. Il a toujours exactement une sortie, et aucune entrée. Ses propriétés par défaut (voir {{domxref("AudioNode")}} pour la définition) sont :
 
-<ul>
- <li>Nombre d'entrées : <code>0</code></li>
- <li>Nombre de sorties : <code>1</code></li>
- <li>Mode de calcul des canaux : <code>max</code></li>
- <li>Nombre de canaux : <code>2</code> (propriété ignorée dans le mode de calcul par défaut)</li>
- <li>Interprétation des canaux : <code>speakers</code></li>
-</ul>
+- Nombre d'entrées : `0`
+- Nombre de sorties : `1`
+- Mode de calcul des canaux : `max`
+- Nombre de canaux : `2` (propriété ignorée dans le mode de calcul par défaut)
+- Interprétation des canaux : `speakers`
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<p><em>Hérite des propriétés de ses parents, </em><em>{{domxref("AudioNode")}}</em>.</p>
+*Hérite des propriétés de ses parents,* *{{domxref("AudioNode")}}*.
 
-<dl>
- <dt>{{domxref("OscillatorNode.frequency")}}</dt>
- <dd>{{domxref("AudioParam")}} de type <a href="/fr/docs/Web/API/AudioParam#a-rate">a-rate</a> représentant la fréquence d'oscillation en Hertz (la propriété frequency est en lecture seule, mais sa sous-propriété value ne l'est pas).</dd>
- <dt>{{domxref("OscillatorNode.detune")}}</dt>
- <dd>{{domxref("AudioParam")}} de type <a href="/fr/docs/Web/API/AudioParam#a-rate">a-rate</a> représentant le désaccordage de l' oscillation exprimé en cents  (la propriété detune est en lecture seule, mais sa sous-propriété value ne l'est pas).</dd>
- <dt>{{domxref("OscillatorNode.type")}}</dt>
- <dd>Chaîne de caractères indiquant la forme de l'onde générée. Différentes ondes produisent différentes tonalités.  Les valeurs standard sont <code>"sine"</code>, <code>"square"</code>, <code>"sawtooth"</code>, <code>"triangle"</code> et <code>"custom"</code>. La valeur par défault is <code>"sine"</code>. <code>custom</code> permet d'utiliser une {{domxref("PeriodicWave")}} pour décrire une forme d'onde personnalisée.</dd>
-</dl>
+- {{domxref("OscillatorNode.frequency")}}
+  - : {{domxref("AudioParam")}} de type [a-rate](/fr/docs/Web/API/AudioParam#a-rate) représentant la fréquence d'oscillation en Hertz (la propriété frequency est en lecture seule, mais sa sous-propriété value ne l'est pas).
+- {{domxref("OscillatorNode.detune")}}
+  - : {{domxref("AudioParam")}} de type [a-rate](/fr/docs/Web/API/AudioParam#a-rate) représentant le désaccordage de l' oscillation exprimé en cents  (la propriété detune est en lecture seule, mais sa sous-propriété value ne l'est pas).
+- {{domxref("OscillatorNode.type")}}
+  - : Chaîne de caractères indiquant la forme de l'onde générée. Différentes ondes produisent différentes tonalités.  Les valeurs standard sont `"sine"`, `"square"`, `"sawtooth"`, `"triangle"` et `"custom"`. La valeur par défault is `"sine"`. `custom` permet d'utiliser une {{domxref("PeriodicWave")}} pour décrire une forme d'onde personnalisée.
 
-<h2 id="Methods">Méthodes</h2>
+## Méthodes
 
-<p><em>Hérite des méthodes de ses parents, {{domxref("AudioNode")}}</em>.</p>
+_Hérite des méthodes de ses parents, {{domxref("AudioNode")}}_.
 
-<dl>
- <dt>{{domxref("OscillatorNode.start()")}}</dt>
- <dd>Cette méthode déclenche la lecture du son.</dd>
- <dt>{{domxref("OscillatorNode.stop()")}}</dt>
- <dd>Cette méthode interrompt la lecture du son.</dd>
- <dt>{{domxref("OscillatorNode.setPeriodicWave()")}}</dt>
- <dd>Cette méthode définit une {{domxref("PeriodicWave")}} qui peut être utilisée pour donner sa forme à la sortie de l'oscillateur, quand on utilise l'attribut <code>type = "custom"</code>. Elle remplace la méthode devenue obsolète {{domxref("OscillatorNode.setWaveTable")}}.</dd>
-</dl>
+- {{domxref("OscillatorNode.start()")}}
+  - : Cette méthode déclenche la lecture du son.
+- {{domxref("OscillatorNode.stop()")}}
+  - : Cette méthode interrompt la lecture du son.
+- {{domxref("OscillatorNode.setPeriodicWave()")}}
+  - : Cette méthode définit une {{domxref("PeriodicWave")}} qui peut être utilisée pour donner sa forme à la sortie de l'oscillateur, quand on utilise l'attribut `type = "custom"`. Elle remplace la méthode devenue obsolète {{domxref("OscillatorNode.setWaveTable")}}.
 
-<h2 id="Event_handlers">Event handlers</h2>
+## Event handlers
 
-<dl>
- <dt>{{domxref("OscillatorNode.onended")}}</dt>
- <dd>Propriété utilisée pour assigner un gestionnaire d'évènement à l'évènement <code>ended</code>, qui est émis une fois que la lecture du son est terminée.</dd>
-</dl>
+- {{domxref("OscillatorNode.onended")}}
+  - : Propriété utilisée pour assigner un gestionnaire d'évènement à l'évènement `ended`, qui est émis une fois que la lecture du son est terminée.
 
-<h2 id="Examples">Exemples</h2>
+## Exemples
 
-<p>L'exemple suivant montre une utilisation basique d'un {{ domxref("AudioContext") }} pour créer un <code>OscillatorNode</code>. Pour un exemple appliqué, jetez un oeil à notre <a href="http://mdn.github.io/violent-theremin/">Violent Theremin demo</a> (voir<a href="https://github.com/mdn/violent-theremin/blob/gh-pages/scripts/app.js"> app.js</a> pour l'intégralité du code).</p>
+L'exemple suivant montre une utilisation basique d'un {{ domxref("AudioContext") }} pour créer un `OscillatorNode`. Pour un exemple appliqué, jetez un oeil à notre [Violent Theremin demo](http://mdn.github.io/violent-theremin/) (voir[ app.js](https://github.com/mdn/violent-theremin/blob/gh-pages/scripts/app.js) pour l'intégralité du code).
 
-<pre class="brush: js">// crée un contexteaudio
+```js
+// crée un contexteaudio
 var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
 
 // create Oscillator node
@@ -63,31 +56,19 @@ oscillator.connect(contexteAudio.destination);
 oscillator.type = 'square';
 oscillator.frequency.value = 440; // valeur en hertz
 
-oscillator.start();</pre>
+oscillator.start();
+```
 
-<h2 id="Specifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Web Audio API', '#the-oscillatornode-interface', 'OscillatorNode')}}</td>
-   <td>{{Spec2('Web Audio API')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                | Statut                               | Commentaire |
+| ------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ----------- |
+| {{SpecName('Web Audio API', '#the-oscillatornode-interface', 'OscillatorNode')}} | {{Spec2('Web Audio API')}} |             |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.OscillatorNode")}}</p>
+{{Compat("api.OscillatorNode")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
-</ul>
+- [Utiliser la Web Audio API](/fr/docs/Web_Audio_API/Using_Web_Audio_API)
diff --git a/files/fr/web/api/page_visibility_api/index.md b/files/fr/web/api/page_visibility_api/index.md
index 0443a0061a..a2b1d7f629 100644
--- a/files/fr/web/api/page_visibility_api/index.md
+++ b/files/fr/web/api/page_visibility_api/index.md
@@ -3,63 +3,57 @@ title: Page Visibility API
 slug: Web/API/Page_Visibility_API
 translation_of: Web/API/Page_Visibility_API
 ---
-<div>{{DefaultAPISidebar("Page Visibility API")}}</div>
+{{DefaultAPISidebar("Page Visibility API")}}
 
-<p><strong>L’API <em>Page Visibility</em></strong> (« visibilité de la page ») permet de savoir quand une page web est visible ou a le focus.</p>
+**L’API _Page Visibility_** (« visibilité de la page ») permet de savoir quand une page web est visible ou a le focus.
 
-<p>Avec la navigation par onglets, il y a une probabilité raisonnable qu’une page web donnée soit en arrière-plan, donc masquée pour l’utilisateur. Quand celui-ci minimise la page ou bascule vers un autre onglet, l’API émet un évènement {{event("visibilitychange")}} correspondant à la visibilité de la page. Vous pouvez détecter cet évènement et réaliser différentes actions ou modifier un comportement. Par exemple, si votre application web est en train de lire une vidéo, elle peut mettre cette dernière en pause au moment où l’utilisateur regarde un autre onglet, et reprendre la lecture quand la personne revient à l’onglet. L’utilisateur ne perd pas le fil de la vidéo et peut continuer à la regarder.</p>
+Avec la navigation par onglets, il y a une probabilité raisonnable qu’une page web donnée soit en arrière-plan, donc masquée pour l’utilisateur. Quand celui-ci minimise la page ou bascule vers un autre onglet, l’API émet un évènement {{event("visibilitychange")}} correspondant à la visibilité de la page. Vous pouvez détecter cet évènement et réaliser différentes actions ou modifier un comportement. Par exemple, si votre application web est en train de lire une vidéo, elle peut mettre cette dernière en pause au moment où l’utilisateur regarde un autre onglet, et reprendre la lecture quand la personne revient à l’onglet. L’utilisateur ne perd pas le fil de la vidéo et peut continuer à la regarder.
 
-<p>L’état de visibilité d’une {{HTMLElement("iframe")}} est le même que celui du document parent. Masquer l’iframe via une propriété CSS ne déclenche pas d’évènement de visibilité, ni ne change l’état du document contenu.</p>
+L’état de visibilité d’une {{HTMLElement("iframe")}} est le même que celui du document parent. Masquer l’iframe via une propriété CSS ne déclenche pas d’évènement de visibilité, ni ne change l’état du document contenu.
 
-<h3 id="Avantages">Avantages</h3>
+### Avantages
 
-<p>L’API est particulièrement utile pour économiser des ressources. Elle donne aux développeurs l’opportunité de ne pas réaliser des tâches non nécessaires quand la page web est invisible.</p>
+L’API est particulièrement utile pour économiser des ressources. Elle donne aux développeurs l’opportunité de ne pas réaliser des tâches non nécessaires quand la page web est invisible.
 
-<h3 id="Cas_d’utilisation">Cas d’utilisation</h3>
+### Cas d’utilisation
 
-<p>Quelques exemples :</p>
+Quelques exemples :
 
-<ul>
- <li>Un site comportant un carrousel qui ne doit pas passer à l’image suivante si l’utilisateur ne regarde pas la page.</li>
- <li>Une application présentant un panneau d’informations, qui ne doit pas demander au serveur une mise à jour des données quand la page n’est pas visible.</li>
- <li>Une page qui cherche à detecter quand elle est <em>prerendered</em> (pré-calculée), afin de tenir un compte précis du nombre de vues.</li>
- <li>Un site qui cherche à désactiver les sons quand un appareil est en mode veille (l’utilisateur presse le bouton d’alimentation pour éteindre l’écran).</li>
-</ul>
+- Un site comportant un carrousel qui ne doit pas passer à l’image suivante si l’utilisateur ne regarde pas la page.
+- Une application présentant un panneau d’informations, qui ne doit pas demander au serveur une mise à jour des données quand la page n’est pas visible.
+- Une page qui cherche à detecter quand elle est _prerendered_ (pré-calculée), afin de tenir un compte précis du nombre de vues.
+- Un site qui cherche à désactiver les sons quand un appareil est en mode veille (l’utilisateur presse le bouton d’alimentation pour éteindre l’écran).
 
-<p>Historiquement, les développeurs ont utilisé des solutions de remplacement imparfaites pour détecter de tels changements. Par exemple, inscrire un gestionnaire onblur/onfocus sur la fenêtre est utile quand votre page n’est pas la page active, mais cela ne vous dit pas si votre page est masquée pour l’utilisateur. L’API <em>Page Visibility</em> corrige ce problème. (Lorsqu’on compare avec un gestionnaire onblur/onfocus sur la fenêtre, une différence notable est que la page ne devient <em>pas</em> cachée quand une autre fenêtre est rendue active et le navigateur perd le focus. Une page devient cachée seulement quand l’utilisateur bascule vers un autre onglet ou minimise la fenêtre du navigateur.)</p>
+Historiquement, les développeurs ont utilisé des solutions de remplacement imparfaites pour détecter de tels changements. Par exemple, inscrire un gestionnaire onblur/onfocus sur la fenêtre est utile quand votre page n’est pas la page active, mais cela ne vous dit pas si votre page est masquée pour l’utilisateur. L’API _Page Visibility_ corrige ce problème. (Lorsqu’on compare avec un gestionnaire onblur/onfocus sur la fenêtre, une différence notable est que la page ne devient _pas_ cachée quand une autre fenêtre est rendue active et le navigateur perd le focus. Une page devient cachée seulement quand l’utilisateur bascule vers un autre onglet ou minimise la fenêtre du navigateur.)
 
-<h3 id="Politiques_de_performance_des_pages_en_arrière-plan">Politiques de performance des pages en arrière-plan</h3>
+### Politiques de performance des pages en arrière-plan
 
-<p>En parallèle avec l’API <em>Page Visibility,</em> un certain nombre de politiques sont en place pour atténuer l’impact négatif sur les performances lié aux onglets en arrière-plan :</p>
+En parallèle avec l’API _Page Visibility,_ un certain nombre de politiques sont en place pour atténuer l’impact négatif sur les performances lié aux onglets en arrière-plan :
 
-<ul>
- <li>Les appels à {{domxref("Window.requestAnimationFrame()")}} sont suspendus dans la plupart des navigateurs lorsqu’ils sont effectués dans un onglet en arrière-plan ou une {{ HTMLElement("iframe") }} cachée, afin d’améliorer les performances et l’autonomie de la batterie.</li>
- <li>Les timers tels que {{domxref("WindowOrWorkerGlobalScope.setTimeout")}} sont retardés dans les onglets inactifs ou en arrière-plan pour aider à l’amélioration des performances. Voir <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout#Reasons_for_delays_longer_than_specified"><em>Reasons for delays longer than specified</em></a> pour plus de détails.</li>
- <li>Les navigateurs modernes (Firefox 58+, Chrome 57+) ont mis en œuvre un retardement basé sur un budget pour les timeouts en arrière-plan. Cela place une limite supplémentaire sur la consommation de CPU des timers en arrière-plan. Cette limite opère de manière similaire dans tous les navigateurs modernes, avec les détails qui suivent :
-  <ul>
-   <li>Dans Firefox, les fenêtres d’onglets en arrière-plan ont chacune leur propre budget de temps en millisecondes — une valeur maximum et minimum de +50 ms et -150 ms, respectivement. Chrome est très similaire, excepté que le budget est spécifié en secondes.</li>
-   <li>Les fenêtres sont sujettes au retardement après 30 secondes, avec les mêmes règles de délai de retardement que spécifiées pour les timers (encore une fois, voir <em><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout#Reasons_for_delays_longer_than_specified">Reasons for delays longer than specified</a></em>). Pour Chrome, cette valeur est de 10 secondes.</li>
-   <li>Les tâches de timers sont permises seulement quand le budget est non négatif.</li>
-   <li>Quand un timer a été exécuté, son temps d’exécution est retranché au budget de la fenêtre depuis laquelle le timer a été appelé.</li>
-   <li>Le budget regénère à un taux de 10 ms par seconde, sous Firefox et sous Chrome.</li>
-  </ul>
- </li>
- <li>Certaines opérations sont exemptées de retardement :
-  <ul>
-   <li>Les applications qui jouent du son sont considérées comme en avant-plan, et donc ne sont pas retardées.</li>
-   <li>Les applications avec des connexions en temps réel (<a href="/en-US/docs/Web/API/WebSockets_API">WebSockets</a> et <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a>), afin d’éviter que ces connexions soient fermées par timeout.</li>
-   <li>Les opérations <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a>.</li>
-  </ul>
- </li>
-</ul>
+- Les appels à {{domxref("Window.requestAnimationFrame()")}} sont suspendus dans la plupart des navigateurs lorsqu’ils sont effectués dans un onglet en arrière-plan ou une {{ HTMLElement("iframe") }} cachée, afin d’améliorer les performances et l’autonomie de la batterie.
+- Les timers tels que {{domxref("WindowOrWorkerGlobalScope.setTimeout")}} sont retardés dans les onglets inactifs ou en arrière-plan pour aider à l’amélioration des performances. Voir [_Reasons for delays longer than specified_](/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout#Reasons_for_delays_longer_than_specified) pour plus de détails.
+- Les navigateurs modernes (Firefox 58+, Chrome 57+) ont mis en œuvre un retardement basé sur un budget pour les timeouts en arrière-plan. Cela place une limite supplémentaire sur la consommation de CPU des timers en arrière-plan. Cette limite opère de manière similaire dans tous les navigateurs modernes, avec les détails qui suivent :
 
-<h2 id="Exemple">Exemple</h2>
+  - Dans Firefox, les fenêtres d’onglets en arrière-plan ont chacune leur propre budget de temps en millisecondes — une valeur maximum et minimum de +50 ms et -150 ms, respectivement. Chrome est très similaire, excepté que le budget est spécifié en secondes.
+  - Les fenêtres sont sujettes au retardement après 30 secondes, avec les mêmes règles de délai de retardement que spécifiées pour les timers (encore une fois, voir _[Reasons for delays longer than specified](/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout#Reasons_for_delays_longer_than_specified)_). Pour Chrome, cette valeur est de 10 secondes.
+  - Les tâches de timers sont permises seulement quand le budget est non négatif.
+  - Quand un timer a été exécuté, son temps d’exécution est retranché au budget de la fenêtre depuis laquelle le timer a été appelé.
+  - Le budget regénère à un taux de 10 ms par seconde, sous Firefox et sous Chrome.
 
-<p>Voir <a href="http://daniemon.com/tech/webapps/page-visibility/">l’exemple en direct</a> (vidéo avec son).</p>
+- Certaines opérations sont exemptées de retardement :
 
-<p>Cet exemple, qui met la vidéo en pause quand vous basculez vers un autre onglet, et reprend la lecture quand vous y revenez, a été créé avec le code suivant :</p>
+  - Les applications qui jouent du son sont considérées comme en avant-plan, et donc ne sont pas retardées.
+  - Les applications avec des connexions en temps réel ([WebSockets](/en-US/docs/Web/API/WebSockets_API) et [WebRTC](/en-US/docs/Web/API/WebRTC_API)), afin d’éviter que ces connexions soient fermées par timeout.
+  - Les opérations [IndexedDB](/en-US/docs/Web/API/IndexedDB_API).
 
-<pre class="brush: js">// Set the name of the hidden property and the change event for visibility
+## Exemple
+
+Voir [l’exemple en direct](http://daniemon.com/tech/webapps/page-visibility/) (vidéo avec son).
+
+Cet exemple, qui met la vidéo en pause quand vous basculez vers un autre onglet, et reprend la lecture quand vous y revenez, a été créé avec le code suivant :
+
+```js
+// Set the name of the hidden property and the change event for visibility
 var hidden, visibilityChange;
 if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support
   hidden = "hidden";
@@ -103,61 +97,47 @@ if (typeof document.addEventListener === "undefined" || typeof document.hidden =
   }, false);
 
 }
-</pre>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<dl>
- <dt>{{domxref("document.hidden")}}</dt>
- <dd><p>Retourne <code>true</code> si la page est dans un état considéré comme masqué à l’utilisateur, et <code>false</code> dans le cas contraire.</p></dd>
- <dt>{{domxref("document.visibilityState")}}</dt>
- <dd><p>Une <code>string</code> représentant l’état de visibilité du document. Valeurs possibles :</p>
- <ul>
-  <li><code>visible</code> : le contenu de la page peut être au moins partiellement visible. En pratique, cela signifie que la page est l’onglet actif d’une fenêtre non minimisée.</li>
-  <li><code>hidden</code> : le contenu de la page n’est pas visible pour l’utilisateur. En pratique, cela signifie que le document est soit dans un onglet en arrière-plan, soit dans une fenêtre minimizée ; ou bien que l’écran de verrouillage de l’OS est actif.</li>
-  <li><code>prerender</code> : le contenu de la page est en train d’être précalculé et n’est pas visible pour l’utilisateur (il est considéré masqué pour <code>document.hidden</code>). Le document peut être dans cet état initialement, mais ne passera jamais à cet état depuis une autre valeur. Note : le support des navigateurs est optionnel.</li>
-  <li><code>unloaded</code> : la page est en train d’être déchargée de la mémoire. Note : le support des navigateurs est optionnel.</li>
- </ul>
- <pre class="brush: js">//startSimulation and pauseSimulation defined elsewhere
-function handleVisibilityChange() {
-  if (document.hidden) {
-    pauseSimulation();
-  } else  {
-    startSimulation();
-  }
-}
-document.addEventListener("visibilitychange", handleVisibilityChange, false);
-</pre></dd>
- <dt>{{domxref("document.onvisibilitychange")}}</dt>
- <dd>Un {{event("Event_handlers", "event handler")}} représentant le code à appeler quand l’évènement {{event("visibilitychange")}} est émis.</dd>
-</dl>
-
-<h2 id="Specifications">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('Page Visibility API')}}</td>
-   <td>{{Spec2('Page Visibility API')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Document.visibilityState")}}</p>
-
-<h2 id="See_also">Voir aussi</h2>
-
-<ul>
- <li>La description de <a href="http://blogs.msdn.com/b/ie/archive/2011/07/08/using-pc-hardware-more-efficiently-in-html5-new-web-performance-apis-part-2.aspx">l’API Page Visibility</a> sur l’IEBlog</li>
- <li>La description de <a href="http://code.google.com/chrome/whitepapers/pagevisibility.html">l’API Page Visibility</a> par Google</li>
-</ul>
+```
+
+## Propriétés
+
+- {{domxref("document.hidden")}}
+  - : Retourne `true` si la page est dans un état considéré comme masqué à l’utilisateur, et `false` dans le cas contraire.
+- {{domxref("document.visibilityState")}}
+
+  - : Une `string` représentant l’état de visibilité du document. Valeurs possibles :
+
+    - `visible` : le contenu de la page peut être au moins partiellement visible. En pratique, cela signifie que la page est l’onglet actif d’une fenêtre non minimisée.
+    - `hidden` : le contenu de la page n’est pas visible pour l’utilisateur. En pratique, cela signifie que le document est soit dans un onglet en arrière-plan, soit dans une fenêtre minimizée ; ou bien que l’écran de verrouillage de l’OS est actif.
+    - `prerender` : le contenu de la page est en train d’être précalculé et n’est pas visible pour l’utilisateur (il est considéré masqué pour `document.hidden`). Le document peut être dans cet état initialement, mais ne passera jamais à cet état depuis une autre valeur. Note : le support des navigateurs est optionnel.
+    - `unloaded` : la page est en train d’être déchargée de la mémoire. Note : le support des navigateurs est optionnel.
+
+    ```js
+    //startSimulation and pauseSimulation defined elsewhere
+    function handleVisibilityChange() {
+      if (document.hidden) {
+        pauseSimulation();
+      } else  {
+        startSimulation();
+      }
+    }
+    document.addEventListener("visibilitychange", handleVisibilityChange, false);
+    ```
+
+- {{domxref("document.onvisibilitychange")}}
+  - : Un {{event("Event_handlers", "event handler")}} représentant le code à appeler quand l’évènement {{event("visibilitychange")}} est émis.
+
+## Spécifications
+
+| Spécification                                    | Statut                                       | Commentaire          |
+| ------------------------------------------------ | -------------------------------------------- | -------------------- |
+| {{SpecName('Page Visibility API')}} | {{Spec2('Page Visibility API')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Document.visibilityState")}}
+
+## Voir aussi
+
+- La description de [l’API Page Visibility](http://blogs.msdn.com/b/ie/archive/2011/07/08/using-pc-hardware-more-efficiently-in-html5-new-web-performance-apis-part-2.aspx) sur l’IEBlog
+- La description de [l’API Page Visibility](http://code.google.com/chrome/whitepapers/pagevisibility.html) par Google
diff --git a/files/fr/web/api/pagetransitionevent/index.md b/files/fr/web/api/pagetransitionevent/index.md
index b679c056dd..ca4c52d177 100644
--- a/files/fr/web/api/pagetransitionevent/index.md
+++ b/files/fr/web/api/pagetransitionevent/index.md
@@ -3,62 +3,61 @@ title: PageTransitionEvent
 slug: Web/API/PageTransitionEvent
 translation_of: Web/API/PageTransitionEvent
 ---
-<p>{{APIRef("HTML DOM")}}</p>
+{{APIRef("HTML DOM")}}
 
-<p>Les évènements de transition de page sont émis quand une page web est chargée ou déchargée.</p>
+Les évènements de transition de page sont émis quand une page web est chargée ou déchargée.
 
-<h2 id="Information_du_DOM">Information du DOM</h2>
+## Information du DOM
 
-<h3 id="Hiérarchie_d’héritage">Hiérarchie d’héritage</h3>
+### Hiérarchie d’héritage
 
-<div><a href="/fr/docs/Web/API/Event">Event</a>
+[Event](/fr/docs/Web/API/Event)   PageTransitionEvent
 
-<div>   PageTransitionEvent</div>
-</div>
+## Exemple
 
-<h2 id="Exemple">Exemple</h2>
+### HTML
 
-<h3 id="HTML">HTML</h3>
+```html
+<!DOCTYPE html>
+<html>
+<body onpageshow="myFunction(event)">
+</body>
+</html>
+```
 
-<pre class="brush: html">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-&lt;body onpageshow="myFunction(event)"&gt;
-&lt;/body&gt;
-&lt;/html&gt;</pre>
+### JavaScript
 
-<h3 id="JavaScript">JavaScript</h3>
-
-<pre class="brush: js">function myFunction(event) {
+```js
+function myFunction(event) {
     if (event.persisted) {
         alert("La page a été mise en cache par le navigateur");
     } else {
         alert("La page n’a PAS été mise en cache par le navigateur");
     }
-}</pre>
+}
+```
 
-<h2 id="Membres">Membres</h2>
+## Membres
 
-<p>L’objet <strong>PageTransitionEvent</strong> possède les types de membres suivants :</p>
+L’objet **PageTransitionEvent** possède les types de membres suivants :
 
-<ul>
- <li><a href="#Propriétés">Propriétés</a></li>
-</ul>
+- [Propriétés](#Propriétés)
 
-<h3 id="Propriétés">Propriétés</h3>
+### Propriétés
 
-<p>L’objet <strong>PageTransitionEvent</strong> possède les propriétés suivantes :</p>
+L’objet **PageTransitionEvent** possède les propriétés suivantes :
 
 <table>
- <tbody>
-  <tr>
-   <th>Propriété</th>
-   <th>Type d’accès</th>
-   <th>Description</th>
-  </tr>
-  <tr>
-   <th><code>persisted</code></th>
-   <th>Lecture seule</th>
-   <th>Indique si une page web est chargée depuis le cache.</th>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th>Propriété</th>
+      <th>Type d’accès</th>
+      <th>Description</th>
+    </tr>
+    <tr>
+      <th><code>persisted</code></th>
+      <th>Lecture seule</th>
+      <th>Indique si une page web est chargée depuis le cache.</th>
+    </tr>
+  </tbody>
 </table>
diff --git a/files/fr/web/api/passwordcredential/iconurl/index.md b/files/fr/web/api/passwordcredential/iconurl/index.md
index 0521ac36dc..0435450c24 100644
--- a/files/fr/web/api/passwordcredential/iconurl/index.md
+++ b/files/fr/web/api/passwordcredential/iconurl/index.md
@@ -9,37 +9,24 @@ tags:
   - Reference
 translation_of: Web/API/PasswordCredential/iconURL
 ---
-<p>{{SeeCompatTable}}{{APIRef("")}}</p>
+{{SeeCompatTable}}{{APIRef("")}}
 
-<p>La propriété <strong><code>iconURL</code></strong>, rattachée à l'interface {{domxref("PasswordCredential")}}, est accessible en lecture seule et fournit une chaîne de caractères {{domxref("USVString")}} représentant une URL pointant vers l'image d'une icône. Cette image est destinée à être affichée dans un sélecteur d'authentification. L'URL fournie doit être accessible sans authentification.</p>
+La propriété **`iconURL`**, rattachée à l'interface {{domxref("PasswordCredential")}}, est accessible en lecture seule et fournit une chaîne de caractères {{domxref("USVString")}} représentant une URL pointant vers l'image d'une icône. Cette image est destinée à être affichée dans un sélecteur d'authentification. L'URL fournie doit être accessible sans authentification.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>url</em> = <em>passwordCredential</em>.iconURL</pre>
+    url = passwordCredential.iconURL
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>Une chaîne de caractères {{domxref("USVString")}} contenant une URL.</p>
+Une chaîne de caractères {{domxref("USVString")}} contenant une URL.
 
-<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('Credential Management','#dom-credentialuserdata-iconurl','iconURL')}}</td>
-   <td>{{Spec2('Credential Management')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                | État                                         | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------ | -------------------------------------------- | -------------------- |
+| {{SpecName('Credential Management','#dom-credentialuserdata-iconurl','iconURL')}} | {{Spec2('Credential Management')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.PasswordCredential.iconURL")}}</p>
+{{Compat("api.PasswordCredential.iconURL")}}
diff --git a/files/fr/web/api/passwordcredential/index.md b/files/fr/web/api/passwordcredential/index.md
index 3bc54c3618..78fe065d5d 100644
--- a/files/fr/web/api/passwordcredential/index.md
+++ b/files/fr/web/api/passwordcredential/index.md
@@ -9,47 +9,44 @@ tags:
   - Reference
 translation_of: Web/API/PasswordCredential
 ---
-<p>{{SeeCompatTable}}{{APIRef("Credential Management API")}}</p>
+{{SeeCompatTable}}{{APIRef("Credential Management API")}}
 
-<p>L'interface <code><strong>PasswordCredential</strong></code>, rattachée à l'<a href="/fr/docs/Web/API/Credential_Management_API">API Credential Management</a>, fournit des informations quant à un couple nom d'utilisateur/mot de passe. Pour les navigateurs qui prennent en charge cette fonctionnalité, une instance de cette interface peut être passée comme propriété <code>credential</code> de l'objet <code>init</code> utilisé comme argument de la méthode globale {{domxref('fetch')}}.</p>
+L'interface **`PasswordCredential`**, rattachée à l'[API Credential Management](/fr/docs/Web/API/Credential_Management_API), fournit des informations quant à un couple nom d'utilisateur/mot de passe. Pour les navigateurs qui prennent en charge cette fonctionnalité, une instance de cette interface peut être passée comme propriété `credential` de l'objet `init` utilisé comme argument de la méthode globale {{domxref('fetch')}}.
 
-<h2 id="Constructeur">Constructeur</h2>
+## Constructeur
 
-<dl>
- <dt>{{domxref("PasswordCredential.PasswordCredential()","PasswordCredential()")}}</dt>
- <dd>Crée un nouvel objet <code>PasswordCredential</code>.</dd>
-</dl>
+- {{domxref("PasswordCredential.PasswordCredential()","PasswordCredential()")}}
+  - : Crée un nouvel objet `PasswordCredential`.
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<p><em>Hérite des propriétés de l'interface parente, {{domxref("Credential")}}.</em></p>
+_Hérite des propriétés de l'interface parente, {{domxref("Credential")}}._
 
-<dl>
- <dt>{{domxref("PasswordCredential.additionalData")}} {{deprecated_inline()}}</dt>
- <dd>Une instance {{domxref("FormData")}} ou une instance {{domxref("URLSearchParams")}} ou {{jsxref("null")}}. Les données de cet objet seront ajoutées au corps de la requête et envoyées au point distant avec les informations d'authentification.</dd>
- <dt>{{domxref("PasswordCredential.iconURL")}} {{readonlyinline}}</dt>
- <dd>Une chaîne de caractères {{domxref("USVString")}} contenant une URL qui pointe vers une image servant d'icône. Cette image est destinée à être utilisée dans le sélecteur d'informations d'authentification. L'URL doit être accessible sans authentification.</dd>
- <dt>{{domxref("PasswordCredential.idName")}} {{deprecated_inline()}}</dt>
- <dd>Une chaîne de caractères {{domxref("USVString")}} contenant le nom qui sera uitlisé pour le champ d'identifiant lorsque l'objet courant sera envoyé au point distant grâce à {{domxref("fetch")}}. La valeur par défaut correspond à <code>"username"</code> mais il est possible de surcharger cette valeur afin qu'elle corresponde à ce qui est attendu par le service distant.</dd>
- <dt>{{domxref("PasswordCredential.name")}} {{readonlyinline}}</dt>
- <dd>Une chaîne de caractères {{domxref("USVString")}} qui contient un nom public, lisible par un humain et qui sera affiché dans le sélecteur d'informations d'authentification.</dd>
- <dt>{{domxref("PasswordCredential.password")}} {{readonlyinline}}</dt>
- <dd>Une chaîne de caractères {{domxref("USVString")}} qui contient le mot de passe associé aux informations d'authentification.</dd>
- <dt>{{domxref("PasswordCredential.passwordName")}} {{deprecated_inline()}}</dt>
- <dd>Une chaîne de caractères {{domxref("USVString")}} qui représente le nom utilisé pour le mot de passe lorsque l'objet courant est envoyé au point distant avec {{domxref("fetch")}}. Par défaut, cette propriété vaut <code>"password"</code> mais elle peut être surchargée afin que sa valeur corresponde à ce qui est attendu par le service distant.</dd>
-</dl>
+- {{domxref("PasswordCredential.additionalData")}} {{deprecated_inline()}}
+  - : Une instance {{domxref("FormData")}} ou une instance {{domxref("URLSearchParams")}} ou {{jsxref("null")}}. Les données de cet objet seront ajoutées au corps de la requête et envoyées au point distant avec les informations d'authentification.
+- {{domxref("PasswordCredential.iconURL")}} {{readonlyinline}}
+  - : Une chaîne de caractères {{domxref("USVString")}} contenant une URL qui pointe vers une image servant d'icône. Cette image est destinée à être utilisée dans le sélecteur d'informations d'authentification. L'URL doit être accessible sans authentification.
+- {{domxref("PasswordCredential.idName")}} {{deprecated_inline()}}
+  - : Une chaîne de caractères {{domxref("USVString")}} contenant le nom qui sera uitlisé pour le champ d'identifiant lorsque l'objet courant sera envoyé au point distant grâce à {{domxref("fetch")}}. La valeur par défaut correspond à `"username"` mais il est possible de surcharger cette valeur afin qu'elle corresponde à ce qui est attendu par le service distant.
+- {{domxref("PasswordCredential.name")}} {{readonlyinline}}
+  - : Une chaîne de caractères {{domxref("USVString")}} qui contient un nom public, lisible par un humain et qui sera affiché dans le sélecteur d'informations d'authentification.
+- {{domxref("PasswordCredential.password")}} {{readonlyinline}}
+  - : Une chaîne de caractères {{domxref("USVString")}} qui contient le mot de passe associé aux informations d'authentification.
+- {{domxref("PasswordCredential.passwordName")}} {{deprecated_inline()}}
+  - : Une chaîne de caractères {{domxref("USVString")}} qui représente le nom utilisé pour le mot de passe lorsque l'objet courant est envoyé au point distant avec {{domxref("fetch")}}. Par défaut, cette propriété vaut `"password"` mais elle peut être surchargée afin que sa valeur corresponde à ce qui est attendu par le service distant.
 
-<h3 id="Gestionnaires_d'évènement">Gestionnaires d'évènement</h3>
+### Gestionnaires d'évènement
 
-<p>Aucun.</p>
+Aucun.
 
-<h2 id="Méthodes">Méthodes</h2>
+## Méthodes
 
-<p>Aucune.</p>
+Aucune.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: js">var cred = new PasswordCredential({
+```js
+var cred = new PasswordCredential({
   id: id,
   password: password,
   name: name,
@@ -60,25 +57,14 @@ navigator.credentials.store(cred)
  .then(function() {
  // Faire quelque chose avec.
 });
-</pre>
-
-<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('Credential Management')}}</td>
-   <td>{{Spec2('Credential Management')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.PasswordCredential")}}</p>
+```
+
+## Spécifications
+
+| Spécification                                    | État                                         | Commentaires         |
+| ------------------------------------------------ | -------------------------------------------- | -------------------- |
+| {{SpecName('Credential Management')}} | {{Spec2('Credential Management')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.PasswordCredential")}}
diff --git a/files/fr/web/api/passwordcredential/name/index.md b/files/fr/web/api/passwordcredential/name/index.md
index 4ea8d18a88..f48ae976df 100644
--- a/files/fr/web/api/passwordcredential/name/index.md
+++ b/files/fr/web/api/passwordcredential/name/index.md
@@ -9,37 +9,24 @@ tags:
   - Reference
 translation_of: Web/API/PasswordCredential/name
 ---
-<p>{{SeeCompatTable}}{{APIRef("")}}</p>
+{{SeeCompatTable}}{{APIRef("")}}
 
-<p>La propriété <strong><code>name</code></strong> est accessible en lecture seule et est rattachée à l'interface {{domxref("PasswordCredential")}}. C'est une chaîne de caractères {{domxref("USVSTring")}} qui contient un nom public, compréhensible pour un humain et qui est destiné à être affiché dans un sélecteur de fournisseur d'authentification.</p>
+La propriété **`name`** est accessible en lecture seule et est rattachée à l'interface {{domxref("PasswordCredential")}}. C'est une chaîne de caractères {{domxref("USVSTring")}} qui contient un nom public, compréhensible pour un humain et qui est destiné à être affiché dans un sélecteur de fournisseur d'authentification.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>name</em> = <em>passwordCredential</em>.name</pre>
+    name = passwordCredential.name
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>A {{domxref("USVString")}} containing a name.</p>
+A {{domxref("USVString")}} containing a name.
 
-<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('Credential Management','#dom-credentialuserdata-name','name')}}</td>
-   <td>{{Spec2('Credential Management')}}</td>
-   <td>Définition initiale..</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                        | État                                         | Commentaires          |
+| ---------------------------------------------------------------------------------------------------- | -------------------------------------------- | --------------------- |
+| {{SpecName('Credential Management','#dom-credentialuserdata-name','name')}} | {{Spec2('Credential Management')}} | Définition initiale.. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.PasswordCredential.name")}}</p>
+{{Compat("api.PasswordCredential.name")}}
diff --git a/files/fr/web/api/passwordcredential/password/index.md b/files/fr/web/api/passwordcredential/password/index.md
index 62421690d2..acb0eb2ace 100644
--- a/files/fr/web/api/passwordcredential/password/index.md
+++ b/files/fr/web/api/passwordcredential/password/index.md
@@ -9,37 +9,24 @@ tags:
   - Reference
 translation_of: Web/API/PasswordCredential/password
 ---
-<p>{{SeeCompatTable}}{{APIRef("")}}</p>
+{{SeeCompatTable}}{{APIRef("")}}
 
-<p>La propriété <strong><code>password</code></strong> est une propriété accessible en lecture seule rattachée à l'interface {{domxref("PasswordCredential")}} et fournit une chaîne de caractères {{domxref("USVString")}} contenant le mot de passe lié aux informations d'authentification.</p>
+La propriété **`password`** est une propriété accessible en lecture seule rattachée à l'interface {{domxref("PasswordCredential")}} et fournit une chaîne de caractères {{domxref("USVString")}} contenant le mot de passe lié aux informations d'authentification.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>password</em> = <em>passwordCredential</em>.password</pre>
+    password = passwordCredential.password
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>Une chaîne de caractères {{domxref("USVString")}} contenant le mot de passe.</p>
+Une chaîne de caractères {{domxref("USVString")}} contenant le mot de passe.
 
-<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('Credential Management','#dom-passwordcredential-password','password')}}</td>
-   <td>{{Spec2('Credential Management')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                    | État                                         | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------- |
+| {{SpecName('Credential Management','#dom-passwordcredential-password','password')}} | {{Spec2('Credential Management')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.PasswordCredential.password")}}</p>
+{{Compat("api.PasswordCredential.password")}}
diff --git a/files/fr/web/api/passwordcredential/passwordcredential/index.md b/files/fr/web/api/passwordcredential/passwordcredential/index.md
index dda971c84e..a19a4845ac 100644
--- a/files/fr/web/api/passwordcredential/passwordcredential/index.md
+++ b/files/fr/web/api/passwordcredential/passwordcredential/index.md
@@ -9,78 +9,67 @@ tags:
   - Reference
 translation_of: Web/API/PasswordCredential/PasswordCredential
 ---
-<p>{{APIRef("")}}{{Non-standard_header}}</p>
+{{APIRef("")}}{{Non-standard_header}}
 
-<p>Le constructeur <strong><code>PasswordCredential</code></strong> permet de créer un nouvel objet {{domxref("PasswordCredential")}}.</p>
+Le constructeur **`PasswordCredential`** permet de créer un nouvel objet {{domxref("PasswordCredential")}}.
 
-<p>Pour les navigateurs qui prennent en charge cette fonctionnalité, une instance de cette classe peut être utilisée comme propriété <code>credential</code> pour l'objet <code>init</code> qui sera l'argument pour un appel à {{domxref('fetch')}}.</p>
+Pour les navigateurs qui prennent en charge cette fonctionnalité, une instance de cette classe peut être utilisée comme propriété `credential` pour l'objet `init` qui sera l'argument pour un appel à {{domxref('fetch')}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var mesCredentials = new PasswordCredential(passwordCredentialData)
-var mesCredentials = new PasswordCredential(HTMLFormElement)</pre>
+    var mesCredentials = new PasswordCredential(passwordCredentialData)
+    var mesCredentials = new PasswordCredential(HTMLFormElement)
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<p>Le constructeur peut prendre l'une de ces deux valeurs en argument.</p>
+Le constructeur peut prendre l'une de ces deux valeurs en argument.
 
-<dl>
- <dt><code>passwordCredentialData</code> </dt>
- <dd>Un dictionnaire <code>PasswordCredentialData</code> avec les champs suivants :
- <ul>
-  <li><code>iconURL</code> {{optional_inline}} : l'URL de l'image pour l'avatar de l'utilisateur.</li>
-  <li><code>id</code> : l'identifiant de l'utilisateur qui se connecte.</li>
-  <li><code>name</code> {{optional_inline}} : le nom de l'utilisateur qui se connecte.</li>
-  <li><code>password</code> : le mot de passe de l'utilisateur qui se connecte.</li>
- </ul>
- </dd>
- <dt><code>htmlFormElement</code></dt>
- <dd>Une référence à un objet {{domxref("HTMLFormElement")}} contenant les champs de saisis appropriés. Le formulaire correspondant devrait contenir au moins un champ <code>id</code> et un champ <code>password</code>. Le formulaire peut aussi demander un jeton CSRF.</dd>
-</dl>
+- `passwordCredentialData`
 
-<h2 id="Exemples">Exemples</h2>
+  - : Un dictionnaire `PasswordCredentialData` avec les champs suivants :
 
-<p>Dans cet exemple, nous verrons comment définir un formulaire et capturer les données saisies pour créer un objet {{domxref("PasswordCredential")}}.</p>
+    - `iconURL` {{optional_inline}} : l'URL de l'image pour l'avatar de l'utilisateur.
+    - `id` : l'identifiant de l'utilisateur qui se connecte.
+    - `name` {{optional_inline}} : le nom de l'utilisateur qui se connecte.
+    - `password` : le mot de passe de l'utilisateur qui se connecte.
 
-<h3 id="HTML">HTML</h3>
+- `htmlFormElement`
+  - : Une référence à un objet {{domxref("HTMLFormElement")}} contenant les champs de saisis appropriés. Le formulaire correspondant devrait contenir au moins un champ `id` et un champ `password`. Le formulaire peut aussi demander un jeton CSRF.
 
-<pre class="brush: html">&lt;form id="form" method="post"&gt;
-  &lt;input type="text" name="id" autocomplete="username" /&gt;
-  &lt;input type="password" name="password" autocomplete="current-password" /&gt;
-  &lt;input type="hidden" name="csrf_token" value="*****" /&gt;
-&lt;/form&gt;</pre>
+## Exemples
 
-<h3 id="JavaScript">JavaScript</h3>
+Dans cet exemple, nous verrons comment définir un formulaire et capturer les données saisies pour créer un objet {{domxref("PasswordCredential")}}.
 
-<p>Dans le script, on pourra faire référence à ce formulaire et l'utiliser pour créer un objet {{domxref("PasswordCredential")}} afin de le stocker dans le système de mots de passe de l'agent utilisateur.</p>
+### HTML
 
-<pre class="brush: js">var form = document.querySelector('#form');
+```html
+<form id="form" method="post">
+  <input type="text" name="id" autocomplete="username" />
+  <input type="password" name="password" autocomplete="current-password" />
+  <input type="hidden" name="csrf_token" value="*****" />
+</form>
+```
+
+### JavaScript
+
+Dans le script, on pourra faire référence à ce formulaire et l'utiliser pour créer un objet {{domxref("PasswordCredential")}} afin de le stocker dans le système de mots de passe de l'agent utilisateur.
+
+```js
+var form = document.querySelector('#form');
 var creds = new PasswordCredential(form);
 // Stocker les informations d'authentification
 navigator.credentials.store(creds)
   .then(function(creds) {
   // Faire quelque chose avec les informations d'authentification si besoin
-});</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('Credential Management')}}</td>
-   <td>{{Spec2('Credential Management')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.PasswordCredential.PasswordCredential")}}</p>
+});
+```
+
+## Spécifications
+
+| Spécification                                    | État                                         | Commentaires         |
+| ------------------------------------------------ | -------------------------------------------- | -------------------- |
+| {{SpecName('Credential Management')}} | {{Spec2('Credential Management')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.PasswordCredential.PasswordCredential")}}
diff --git a/files/fr/web/api/payment_request_api/index.md b/files/fr/web/api/payment_request_api/index.md
index 5712ce4c57..9f6b63c9a9 100644
--- a/files/fr/web/api/payment_request_api/index.md
+++ b/files/fr/web/api/payment_request_api/index.md
@@ -3,123 +3,85 @@ title: Payment Request API
 slug: Web/API/Payment_Request_API
 translation_of: Web/API/Payment_Request_API
 ---
-<div>{{DefaultAPISidebar("Payment Request API")}}{{securecontext_header}}</div>
-
-<p>L'API <em>Payment Request</em> fournit une expérience utilisateur cohérente à la fois pour les acheteurs et pour les vendeurs. Ce n'est pas une nouvelle façon de payer ses achats, c'est plutôt une façon pour les utilisateurs de sélectionner leur moyen de paiement privilégié et de rendre cete information disponible pour le marchand.</p>
-
-<h2 id="Concepts_et_usages_de_l'API_Payment_Request">Concepts et usages de l'API <em>Payment Request</em></h2>
-
-<p>De nombreux problèmes concernant l'abandon du panier d'achat en ligne peuvent découler de formulaires de validation finale longs et difficiles à remplir, et nécessitant souvent plusieurs étapes. L'<strong>API <em>Payment Request</em> </strong>a pour vocation de réduire le nombre d'étapes nécessaires pour terminer un paiement en ligne, faisant potentiellement ainsi diparaître les formulaires de validation finale. Elle vise à rendre le processus de validation final plus facile en conservant les informations de l'utilisateur, qui sont transmises au marchant sans nécessiter de formulaire HTML.</p>
-
-<p>Les avantages de l'utilisation de l'API <em>Payment Request</em> avec des règlements par cartes ("basic-card") :</p>
-
-<ul>
- <li><strong>Une expérience d'achat rapide </strong>: les utilisateurs renseignent leurs informations une fois dans le navigateur et sont alors prêts pour payer des biens et services en ligne. Ils n'ont plus besoin de renseigner les mêmes informations à chaque fois sur différents sites.</li>
- <li><strong>Une expérience cohérente sur chaque site qui fonctionne avec l'API :</strong> dans la mesure où l'affichage des informations de paiement est contrôlé par le navigateur, celui-ci peut adapter l'expérience de l'utilisateur. Ceci peut impliquer d'afficher l'interface utilisateur dans le langage favori de l'utilisateur.</li>
- <li><strong>L'accessibilité </strong>: dans la mesure où le navigateur contrôle les éléments à renseigner concernant le paiment, il peut garantir une accessibilité du clavier et de l'écran sur chaque site sans intervention des développeurs. Un navigateur pourrait aussi adapter la taille de la fonte ou le contraste de couleur de la page de paiement,  pour la rendre plus agréable d'utilisation.</li>
- <li><strong>La gestion des indentificants </strong>: les utilisateurs peuvent gérer leurs cartes de crédit ou leurs adresses de livraison directement dans le navigateur. Un navigateur peut aussi synchroniser ces identifiants avec d'autres appareils, permettant ainsi au utilisateurs d'aller d'un appareil à l'autre lorsqu'ils font leurs achats.</li>
- <li><strong>Une gestion des erreurs cohérente :</strong> le navigateur peut vérifier la validité des numéros de carte et peut indiquer si la carte de l'utilisateur a expiré ou est sur le point de l'être. Le navigateur peut automatiquement suggérer quelle carte utiliser sur la base des utilisations précédentes ou les restrictions du marchant (par exemple : "Nous n'acceptions que les cartes Visa et Mastercard"), ou encore permettre à l'utilisateur d'indiquer quelle est leur carte par défault.</li>
-</ul>
-
-<p>Pour demander un paiement, une page web crée un {{domxref("PaymentRequest")}} objet en réponse à une action de l'utilisateur qui initie un paiement, comme cliquer sur un bouton "Achat". Le <code>PaymentRequest</code> permet à la page web d'interagir avec l'utilisateur prendant qu'il donne les information pour terminer la transaction.</p>
-
-<p>Vous pouvez trouver un guide complet dans l'article <a href="/en-US/docs/Web/API/Payment_Request_API/Using_the_Payment_Request_API">Using the Payment Request API</a>.</p>
-
-<div class="note">
-  <p><strong>Note :</strong> L'API est disponible à l'intérieur des éléments cross-origin {{htmlelement("iframe")}} seulement si on leur a affecté l'attribut  {{htmlattrxref("allowpaymentrequest","iframe")}}.</p>
-</div>
-
-<h2 id="Interfaces">Interfaces</h2>
-
-<dl>
- <dt>{{domxref('PaymentAddress')}}</dt>
- <dd>Un objet qui contient l'information "adresse". Utilisé par exemple pour les adresses de facturation et d'expédition.</dd>
- <dt>{{domxref('PaymentRequest')}}</dt>
- <dd>Un objet qui fournit l'API pour créer et gérer l'interface de paiement de {{Glossary("user agent", "l'agent utilisateur")}}.</dd>
- <dt>{{domxref('PaymentRequestEvent')}}</dt>
- <dd>Un événement fourni au gestionnaire de paiement lorsque un {{domxref("PaymentRequest")}} est fait.</dd>
- <dt>{{domxref('PaymentRequestUpdateEvent')}}</dt>
- <dd>Permet à la page web de mettre à jour les détails de la requête de paiement en réponse à une action de l'utilisateur.</dd>
- <dt>{{domxref('PaymentMethodChangeEvent')}}</dt>
- <dd>Représente une modification du moyen de paiement effectuée par l'utilisateur (par exemple, remplacer une carte de crédit par une autre ou par un autre moyen de paiement en ligne).</dd>
- <dt>{{domxref('PaymentResponse')}}</dt>
- <dd>Un objet renvoyé après que l'utilisateur ait sélectionné un moyen de paiement et approuvé une demande de paiement.</dd>
- <dt>{{domxref('MerchantValidationEvent')}}</dt>
- <dd>Correspond à la demande effectuée par le navigateur vers le site marchand afin de valider le fait qu'il a la possibilité/permission d'utiliser un gestionnaire de paiement spécifique (par exemple, enregistré/validé pour utiliser Apple Pay).</dd>
-</dl>
-
-<dl>
-</dl>
-
-<h2 id="Dictionnaires">Dictionnaires</h2>
-
-<dl>
- <dt>{{domxref("AddressErrors")}}</dt>
- <dd>Un dictionnaire contenant des chaînes de caractère qui fournissent des explications concernant toutes les erreurs dans toutes les entrées {{domxref("PaymentAddress")}} qui contiennent des erreurs.</dd>
- <dt>{{domxref("PayerErrors")}}</dt>
- <dd>Un dictionnaire contenant des chaînes de caractère qui fournissent des explications concernant toutes les erreurs en relations avec les attributs email, téléphone et nom de {{domxref("PaymentResponse")}}.</dd>
- <dt>{{domxref("PaymentDetailsUpdate")}}</dt>
- <dd>Un objet qui décrit les changements qui doivent être apportés aux détails du paiement dans l'événement dont le serveur à besoin pour mettre à jour l'information à la suite de l'instanciation de l'interface de paiment mais avant que l'utilisateur ne commence à interagir avec.</dd>
-</dl>
-
-<h3 id="Dictionnaires_connexes_pour_la_specification_Basic_Card">Dictionnaires connexes pour la specification <em>Basic Card</em></h3>
-
-<dl>
- <dt>{{domxref("BasicCardChangeDetails")}}</dt>
- <dd>Un objet qui donne l'information "<em>redacted</em> address" qui est fournie comme {{domxref("PaymentMethodChangeEvent.methodDetails", "methodDetails")}} dans l'événement {{event("paymentmethodchange")}} envoyé à {{domxref("PaymentRequest")}} lorsque l'utilisateur modifie les informations de paiement.</dd>
- <dt>{{domxref("BasicCardErrors")}}</dt>
- <dd>Un message qui fournit tous les messages d'erreur associés avec les champs qui ne sont pas valides dans l'objet {{domxref("BasicCardResponse")}}. Il est utilisé comme valeur de la propriété {{domxref("PaymentValidationErrors.paymentMethod", "paymentMethod")}} dans l'objet {{domxref("PaymentValidationErrors")}} envoyé au {{domxref("PaymentRequest")}} lorsqu'une erreur se produit.</dd>
- <dt>{{domxref('BasicCardRequest')}}</dt>
- <dd>Définit une structure d'objet pour contenir les détails d'une requête de paiement, par exemple le type de carte de paiement.</dd>
- <dt>{{domxref('BasicCardResponse')}}</dt>
- <dd>Définit une structure d'objet pour les détails de la réponse de paiement tels que le numéro ou la date d'expiration d'une carte utilisée pour faire le paiement, et l'adresse de facturation.</dd>
-</dl>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Payment')}}</td>
-   <td>{{Spec2('Payment')}}</td>
-   <td>Initial definition.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('Basic Card Payment')}}</td>
-   <td>{{Spec2('Basic Card Payment')}}</td>
-   <td>Defines {{domxref("BasicCardRequest")}} and {{domxref("BasicCardResponse")}}, among other things needed for handling credit card payment</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('Payment Method Identifiers')}}</td>
-   <td>{{Spec2('Payment Method Identifiers')}}</td>
-   <td>Defines payment method identifiers and how they are validated, and, where applicable, minted and formally registered with the W3C.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Browser compatibility</h2>
-
-<div>
-<h3 id="PaymentRequest_interface">PaymentRequest interface</h3>
-
-<div>
-
-
-<p>{{Compat("api.PaymentRequest", 0)}}</p>
-</div>
-</div>
-
-<h2 id="See_also">See also</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/API/Payment_Request_API/Using_the_Payment_Request_API">Using the Payment Request API</a></li>
- <li><a href="/en-US/docs/Web/API/Payment_Request_API/Concepts">Payment processing concepts</a></li>
- <li><a href="https://webkit.org/blog/8182/introducing-the-payment-request-api-for-apple-pay/">Introducing the Payment Request API for Apple Pay</a></li>
- <li><a href="https://developers.google.com/pay/api/web/guides/paymentrequest/tutorial">Google Pay API PaymentRequest Tutorial</a></li>
- <li><a href="https://github.com/w3c/payment-request-info/wiki/FAQ">W3C Payment Request API FAQ</a></li>
-</ul>
+{{DefaultAPISidebar("Payment Request API")}}{{securecontext_header}}
+
+L'API *Payment Request* fournit une expérience utilisateur cohérente à la fois pour les acheteurs et pour les vendeurs. Ce n'est pas une nouvelle façon de payer ses achats, c'est plutôt une façon pour les utilisateurs de sélectionner leur moyen de paiement privilégié et de rendre cete information disponible pour le marchand.
+
+## Concepts et usages de l'API _Payment Request_
+
+De nombreux problèmes concernant l'abandon du panier d'achat en ligne peuvent découler de formulaires de validation finale longs et difficiles à remplir, et nécessitant souvent plusieurs étapes. L'**API _Payment Request_ **a pour vocation de réduire le nombre d'étapes nécessaires pour terminer un paiement en ligne, faisant potentiellement ainsi diparaître les formulaires de validation finale. Elle vise à rendre le processus de validation final plus facile en conservant les informations de l'utilisateur, qui sont transmises au marchant sans nécessiter de formulaire HTML.
+
+Les avantages de l'utilisation de l'API *Payment Request* avec des règlements par cartes ("basic-card") :
+
+- **Une expérience d'achat rapide** : les utilisateurs renseignent leurs informations une fois dans le navigateur et sont alors prêts pour payer des biens et services en ligne. Ils n'ont plus besoin de renseigner les mêmes informations à chaque fois sur différents sites.
+- **Une expérience cohérente sur chaque site qui fonctionne avec l'API :** dans la mesure où l'affichage des informations de paiement est contrôlé par le navigateur, celui-ci peut adapter l'expérience de l'utilisateur. Ceci peut impliquer d'afficher l'interface utilisateur dans le langage favori de l'utilisateur.
+- **L'accessibilité** : dans la mesure où le navigateur contrôle les éléments à renseigner concernant le paiment, il peut garantir une accessibilité du clavier et de l'écran sur chaque site sans intervention des développeurs. Un navigateur pourrait aussi adapter la taille de la fonte ou le contraste de couleur de la page de paiement,  pour la rendre plus agréable d'utilisation.
+- **La gestion des indentificants** : les utilisateurs peuvent gérer leurs cartes de crédit ou leurs adresses de livraison directement dans le navigateur. Un navigateur peut aussi synchroniser ces identifiants avec d'autres appareils, permettant ainsi au utilisateurs d'aller d'un appareil à l'autre lorsqu'ils font leurs achats.
+- **Une gestion des erreurs cohérente :** le navigateur peut vérifier la validité des numéros de carte et peut indiquer si la carte de l'utilisateur a expiré ou est sur le point de l'être. Le navigateur peut automatiquement suggérer quelle carte utiliser sur la base des utilisations précédentes ou les restrictions du marchant (par exemple : "Nous n'acceptions que les cartes Visa et Mastercard"), ou encore permettre à l'utilisateur d'indiquer quelle est leur carte par défault.
+
+Pour demander un paiement, une page web crée un {{domxref("PaymentRequest")}} objet en réponse à une action de l'utilisateur qui initie un paiement, comme cliquer sur un bouton "Achat". Le `PaymentRequest` permet à la page web d'interagir avec l'utilisateur prendant qu'il donne les information pour terminer la transaction.
+
+Vous pouvez trouver un guide complet dans l'article [Using the Payment Request API](/en-US/docs/Web/API/Payment_Request_API/Using_the_Payment_Request_API).
+
+> **Note :** L'API est disponible à l'intérieur des éléments cross-origin {{htmlelement("iframe")}} seulement si on leur a affecté l'attribut  {{htmlattrxref("allowpaymentrequest","iframe")}}.
+
+## Interfaces
+
+- {{domxref('PaymentAddress')}}
+  - : Un objet qui contient l'information "adresse". Utilisé par exemple pour les adresses de facturation et d'expédition.
+- {{domxref('PaymentRequest')}}
+  - : Un objet qui fournit l'API pour créer et gérer l'interface de paiement de {{Glossary("user agent", "l'agent utilisateur")}}.
+- {{domxref('PaymentRequestEvent')}}
+  - : Un événement fourni au gestionnaire de paiement lorsque un {{domxref("PaymentRequest")}} est fait.
+- {{domxref('PaymentRequestUpdateEvent')}}
+  - : Permet à la page web de mettre à jour les détails de la requête de paiement en réponse à une action de l'utilisateur.
+- {{domxref('PaymentMethodChangeEvent')}}
+  - : Représente une modification du moyen de paiement effectuée par l'utilisateur (par exemple, remplacer une carte de crédit par une autre ou par un autre moyen de paiement en ligne).
+- {{domxref('PaymentResponse')}}
+  - : Un objet renvoyé après que l'utilisateur ait sélectionné un moyen de paiement et approuvé une demande de paiement.
+- {{domxref('MerchantValidationEvent')}}
+  - : Correspond à la demande effectuée par le navigateur vers le site marchand afin de valider le fait qu'il a la possibilité/permission d'utiliser un gestionnaire de paiement spécifique (par exemple, enregistré/validé pour utiliser Apple Pay).
+
+<!---->
+
+## Dictionnaires
+
+- {{domxref("AddressErrors")}}
+  - : Un dictionnaire contenant des chaînes de caractère qui fournissent des explications concernant toutes les erreurs dans toutes les entrées {{domxref("PaymentAddress")}} qui contiennent des erreurs.
+- {{domxref("PayerErrors")}}
+  - : Un dictionnaire contenant des chaînes de caractère qui fournissent des explications concernant toutes les erreurs en relations avec les attributs email, téléphone et nom de {{domxref("PaymentResponse")}}.
+- {{domxref("PaymentDetailsUpdate")}}
+  - : Un objet qui décrit les changements qui doivent être apportés aux détails du paiement dans l'événement dont le serveur à besoin pour mettre à jour l'information à la suite de l'instanciation de l'interface de paiment mais avant que l'utilisateur ne commence à interagir avec.
+
+### Dictionnaires connexes pour la specification *Basic Card*
+
+- {{domxref("BasicCardChangeDetails")}}
+  - : Un objet qui donne l'information "_redacted_ address" qui est fournie comme {{domxref("PaymentMethodChangeEvent.methodDetails", "methodDetails")}} dans l'événement {{event("paymentmethodchange")}} envoyé à {{domxref("PaymentRequest")}} lorsque l'utilisateur modifie les informations de paiement.
+- {{domxref("BasicCardErrors")}}
+  - : Un message qui fournit tous les messages d'erreur associés avec les champs qui ne sont pas valides dans l'objet {{domxref("BasicCardResponse")}}. Il est utilisé comme valeur de la propriété {{domxref("PaymentValidationErrors.paymentMethod", "paymentMethod")}} dans l'objet {{domxref("PaymentValidationErrors")}} envoyé au {{domxref("PaymentRequest")}} lorsqu'une erreur se produit.
+- {{domxref('BasicCardRequest')}}
+  - : Définit une structure d'objet pour contenir les détails d'une requête de paiement, par exemple le type de carte de paiement.
+- {{domxref('BasicCardResponse')}}
+  - : Définit une structure d'objet pour les détails de la réponse de paiement tels que le numéro ou la date d'expiration d'une carte utilisée pour faire le paiement, et l'adresse de facturation.
+
+## Spécifications
+
+| Specification                                            | Status                                               | Comment                                                                                                                                                       |
+| -------------------------------------------------------- | ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('Payment')}}                         | {{Spec2('Payment')}}                         | Initial definition.                                                                                                                                           |
+| {{SpecName('Basic Card Payment')}}             | {{Spec2('Basic Card Payment')}}             | Defines {{domxref("BasicCardRequest")}} and {{domxref("BasicCardResponse")}}, among other things needed for handling credit card payment |
+| {{SpecName('Payment Method Identifiers')}} | {{Spec2('Payment Method Identifiers')}} | Defines payment method identifiers and how they are validated, and, where applicable, minted and formally registered with the W3C.                            |
+
+## Browser compatibility
+
+### PaymentRequest interface
+
+{{Compat("api.PaymentRequest", 0)}}
+
+## See also
+
+- [Using the Payment Request API](/en-US/docs/Web/API/Payment_Request_API/Using_the_Payment_Request_API)
+- [Payment processing concepts](/en-US/docs/Web/API/Payment_Request_API/Concepts)
+- [Introducing the Payment Request API for Apple Pay](https://webkit.org/blog/8182/introducing-the-payment-request-api-for-apple-pay/)
+- [Google Pay API PaymentRequest Tutorial](https://developers.google.com/pay/api/web/guides/paymentrequest/tutorial)
+- [W3C Payment Request API FAQ](https://github.com/w3c/payment-request-info/wiki/FAQ)
diff --git a/files/fr/web/api/performance/clearmarks/index.md b/files/fr/web/api/performance/clearmarks/index.md
index 81571fb42e..e425a10a63 100644
--- a/files/fr/web/api/performance/clearmarks/index.md
+++ b/files/fr/web/api/performance/clearmarks/index.md
@@ -9,35 +9,34 @@ tags:
   - Performance web
 translation_of: Web/API/Performance/clearMarks
 ---
-<div>{{APIRef("User Timing API")}}</div>
+{{APIRef("User Timing API")}}
 
-<p>La méthode <strong><code>clearMarks()</code></strong> supprime les <em>marqueurs nommés</em> du tampon d'entrée des performances du navigateur. Si la méthode est appelée sans arguments, toutes les {{domxref("PerformanceEntry", "entrées de performance","",1)}} avec un {{domxref("PerformanceEntry.entryType", "entryType")}} de « <code>mark</code> » seront supprimées du tampon d'entrée de performance.</p>
+La méthode **`clearMarks()`** supprime les _marqueurs nommés_ du tampon d'entrée des performances du navigateur. Si la méthode est appelée sans arguments, toutes les {{domxref("PerformanceEntry", "entrées de performance","",1)}} avec un {{domxref("PerformanceEntry.entryType", "entryType")}} de « `mark` » seront supprimées du tampon d'entrée de performance.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">
-  <em>performance</em>.clearMarks();
-  <em>performance</em>.clearMarks(name);
-</pre>
+```js
+  performance.clearMarks();
+  performance.clearMarks(name);
+```
 
-<h3 id="Arguments">Arguments</h3>
+### Arguments
 
-<dl>
-  <dt>name {{optional_inline}}</dt>
-  <dd>Un {{domxref("DOMString")}} représentant le nom de l'horodatage. Si cet argument est omis, toutes les {{domxref("PerformanceEntry","entrées de performance","",1)}} avec un {{domxref("PerformanceEntry.entryType","entryType")}} de « <code>mark</code> » seront supprimés.</dd>
-</dl>
+- name {{optional_inline}}
+  - : Un {{domxref("DOMString")}} représentant le nom de l'horodatage. Si cet argument est omis, toutes les {{domxref("PerformanceEntry","entrées de performance","",1)}} avec un {{domxref("PerformanceEntry.entryType","entryType")}} de « `mark` » seront supprimés.
 
-<h3 id="Return_value">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Aucune.</p>
+Aucune.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<p>L'exemple suivant montre les deux utilisations de la méthode <code>clearMarks()</code>.</p>
+L'exemple suivant montre les deux utilisations de la méthode `clearMarks()`.
 
-<pre class="brush: js">// Créé une petite aide pour montrer combien d'entrées PerformanceMark il y a.
+```js
+// Créé une petite aide pour montrer combien d'entrées PerformanceMark il y a.
 function logMarkCount() {
   console.log(
     "J'ai trouvé autant d'entrées : " + performance.getEntriesByType("mark").length
@@ -61,33 +60,16 @@ logMarkCount() // "J'ai trouvé autant d'entrées : 4"
 // Supprime toutes les entrées de PerformanceMark.
 performance.clearMarks();
 logMarkCount() // "J'ai trouvé autant d'entrées : 0"
-</pre>
-
-<h2 id="Specifications">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('User Timing Level 2', '#dom-performance-clearmarks',
-        'clearMarks()')}}</td>
-      <td>{{Spec2('User Timing Level 2')}}</td>
-      <td>Clarification de <code>clearMarks()</code>.</td>
-    </tr>
-    <tr>
-      <td>{{SpecName('User Timing', '#dom-performance-clearmarks', 'clearMarks()')}}</td>
-      <td>{{Spec2('User Timing')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Performance.clearMarks")}}</p>
+```
+
+## Spécifications
+
+| Spécification                                                                                                            | Statut                                       | Commentaire                      |
+| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------- | -------------------------------- |
+| {{SpecName('User Timing Level 2', '#dom-performance-clearmarks',
+        'clearMarks()')}} | {{Spec2('User Timing Level 2')}} | Clarification de `clearMarks()`. |
+| {{SpecName('User Timing', '#dom-performance-clearmarks', 'clearMarks()')}}                     | {{Spec2('User Timing')}}             | Définition initiale.             |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Performance.clearMarks")}}
diff --git a/files/fr/web/api/performance/clearmeasures/index.md b/files/fr/web/api/performance/clearmeasures/index.md
index 0748baa2b2..b85bd98cfd 100644
--- a/files/fr/web/api/performance/clearmeasures/index.md
+++ b/files/fr/web/api/performance/clearmeasures/index.md
@@ -9,35 +9,34 @@ tags:
   - Performance web
 translation_of: Web/API/Performance/clearMeasures
 ---
-<div>{{APIRef("User Timing API")}}</div>
+{{APIRef("User Timing API")}}
 
-<p>La méthode <strong><code>clearMeasures()</code></strong> supprime les <em>mesures nommées</em> du tampon d'entrée des performances du navigateur. Si la méthode est appelée sans arguments, toutes les {{domxref("PerformanceEntry", "entrées de performance","",1)}} avec un {{domxref("PerformanceEntry.entryType","entryType")}} de « <code>measure</code> » seront supprimées du tampon d'entrée de performance.</p>
+La méthode **`clearMeasures()`** supprime les _mesures nommées_ du tampon d'entrée des performances du navigateur. Si la méthode est appelée sans arguments, toutes les {{domxref("PerformanceEntry", "entrées de performance","",1)}} avec un {{domxref("PerformanceEntry.entryType","entryType")}} de « `measure` » seront supprimées du tampon d'entrée de performance.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">
-  <em>performance</em>.clearMeasures();
-  <em>performance</em>.clearMeasures(name);
-</pre>
+```js
+  performance.clearMeasures();
+  performance.clearMeasures(name);
+```
 
-<h3 id="Arguments">Arguments</h3>
+### Arguments
 
-<dl>
-  <dt>name {{optional_inline}}</dt>
-  <dd>Un {{domxref("DOMString")}} représentant le nom de l'horodatage. Si cet argument est omis, toutes les {{domxref("PerformanceEntry","entrées de performance","",1)}} avec un {{domxref("PerformanceEntry.entryType","entrType")}} de « <code>measure</code> » seront supprimés.</dd>
-</dl>
+- name {{optional_inline}}
+  - : Un {{domxref("DOMString")}} représentant le nom de l'horodatage. Si cet argument est omis, toutes les {{domxref("PerformanceEntry","entrées de performance","",1)}} avec un {{domxref("PerformanceEntry.entryType","entrType")}} de « `measure` » seront supprimés.
 
-<h3 id="Return_value">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Aucune.</p>
+Aucune.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<p>L'exemple suivant montre les deux utilisations de la méthode <code>clearMeasures()</code>.</p>
+L'exemple suivant montre les deux utilisations de la méthode `clearMeasures()`.
 
-<pre class="brush: js">// Crée une petite aide pour montrer combien d'entrées PerformanceMeasure il y a.
+```js
+// Crée une petite aide pour montrer combien d'entrées PerformanceMeasure il y a.
 function logMeasureCount() {
   console.log(
     "J'ai trouvé ces nombreuses entrées : " + performance.getEntriesByType("measure").length
@@ -62,34 +61,16 @@ logMeasureCount() // "J'ai trouvé ces nombreuses entrées : 3"
 // Supprime toutes les entrées de PerformanceMeasure.
 performance.clearMeasures();
 logMeasureCount() // "J'ai trouvé ces nombreuses entrées : 0"
-</pre>
-
-<h2 id="Specifications">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('User Timing Level 2', '#dom-performance-clearmeasures',
-        'clearMeasures()')}}</td>
-      <td>{{Spec2('User Timing Level 2')}}</td>
-      <td>Carification de <code>clearMeasures()</code>.</td>
-    </tr>
-    <tr>
-      <td>{{SpecName('User Timing', '#dom-performance-clearmeasures', 'clearMeasures()')}}
-      </td>
-      <td>{{Spec2('User Timing')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Performance.clearMeasures")}}</p>
+```
+
+## Spécifications
+
+| Spécification                                                                                                                    | Statut                                       | Commentaire                        |
+| -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | ---------------------------------- |
+| {{SpecName('User Timing Level 2', '#dom-performance-clearmeasures',
+        'clearMeasures()')}} | {{Spec2('User Timing Level 2')}} | Carification de `clearMeasures()`. |
+| {{SpecName('User Timing', '#dom-performance-clearmeasures', 'clearMeasures()')}}                     | {{Spec2('User Timing')}}             | Définition initiale.               |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Performance.clearMeasures")}}
diff --git a/files/fr/web/api/performance/clearresourcetimings/index.md b/files/fr/web/api/performance/clearresourcetimings/index.md
index b7a87a662a..6ba70dbddf 100644
--- a/files/fr/web/api/performance/clearresourcetimings/index.md
+++ b/files/fr/web/api/performance/clearresourcetimings/index.md
@@ -2,35 +2,37 @@
 title: performance.clearResourceTimings()
 slug: Web/API/Performance/clearResourceTimings
 tags:
-- API
-- Method
-- Méthode
-- Reference
-- Performance web
+  - API
+  - Method
+  - Méthode
+  - Reference
+  - Performance web
 translation_of: Web/API/Performance/clearResourceTimings
 ---
-<div>{{APIRef("Resource Timing API")}}</div>
+{{APIRef("Resource Timing API")}}
 
-<p>La méthode <strong><code>clearResourceTimings()</code></strong> supprime toutes les {{domxref("PerformanceEntry", "entrées de performance","",1)}} avec un {{domxref("PerformanceEntry.entryType","entryType")}} de « <code>resource</code> » du tampon d'entrée de performance et fixe la taille du tampon de données de performance à zéro. Pour définir la taille du tampon de données de performance du navigateur, utilisez la méthode {{domxref("Performance.setResourceTimingBufferSize()")}}.</p>
+La méthode **`clearResourceTimings()`** supprime toutes les {{domxref("PerformanceEntry", "entrées de performance","",1)}} avec un {{domxref("PerformanceEntry.entryType","entryType")}} de « `resource` » du tampon d'entrée de performance et fixe la taille du tampon de données de performance à zéro. Pour définir la taille du tampon de données de performance du navigateur, utilisez la méthode {{domxref("Performance.setResourceTimingBufferSize()")}}.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js"><em>performance</em>.clearResourceTimings();
-</pre>
+```js
+performance.clearResourceTimings();
+```
 
-<h3 id="Arguments">Arguments</h3>
+### Arguments
 
-<p>Aucun.</p>
+Aucun.
 
-<h3 id="Return_Value">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Aucune.</p>
+Aucune.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">function load_resource() {
+```js
+function load_resource() {
   var image = new Image();
   image.src = "https://developer.mozilla.org/static/img/opengraph-logo.png";
 }
@@ -57,28 +59,15 @@ function clear_performance_timings() {
   else
     console.log("... Le tampon de données de performance n'a PAS été effacé !");
 }
-</pre>
+```
 
-<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('Resource Timing', '#dom-performance-clearresourcetimings',
-        'clearResourceTimings()')}}</td>
-      <td>{{Spec2('Resource Timing')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                                                                | Statut                               | Commentaire          |
+| -------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName('Resource Timing', '#dom-performance-clearresourcetimings',
+        'clearResourceTimings()')}} | {{Spec2('Resource Timing')}} | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Performance.clearResourceTimings")}}</p>
+{{Compat("api.Performance.clearResourceTimings")}}
diff --git a/files/fr/web/api/performance/getentries/index.md b/files/fr/web/api/performance/getentries/index.md
index 1cf2fd1832..06d1c8bc97 100644
--- a/files/fr/web/api/performance/getentries/index.md
+++ b/files/fr/web/api/performance/getentries/index.md
@@ -2,35 +2,34 @@
 title: performance.getEntries()
 slug: Web/API/Performance/getEntries
 tags:
-- API
-- Method
-- Méthode
-- Reference
-- Performance web
+  - API
+  - Method
+  - Méthode
+  - Reference
+  - Performance web
 translation_of: Web/API/Performance/getEntries
 ---
-<div>{{APIRef("Performance Timeline API")}}</div>
+{{APIRef("Performance Timeline API")}}
 
-<p>La méthode <strong><code>getEntries()</code></strong> renvoie une liste de tous les objets {{domxref("PerformanceEntry")}} pour la page. Les membres de la liste (<em>entrées</em>) peuvent être créés en faisant des <em>marqueurs</em> ou des <em>mesures</em> de performance (par exemple en appelant la méthode {{domxref("Performance.mark", "mark()")}}) à des moments explicites. Si vous souhaitez filtrer  les entrées de performance en fonction de leur type ou de leur nom, consultez la documentation des méthodes {{domxref("Performance.getEntriesByType", "getEntriesByType()")}} et {{domxref("Performance.getEntriesByName", "getEntriesByName()")}}.</p>
+La méthode **`getEntries()`** renvoie une liste de tous les objets {{domxref("PerformanceEntry")}} pour la page. Les membres de la liste (_entrées_) peuvent être créés en faisant des _marqueurs_ ou des _mesures_ de performance (par exemple en appelant la méthode {{domxref("Performance.mark", "mark()")}}) à des moments explicites. Si vous souhaitez filtrer les entrées de performance en fonction de leur type ou de leur nom, consultez la documentation des méthodes {{domxref("Performance.getEntriesByType", "getEntriesByType()")}} et {{domxref("Performance.getEntriesByName", "getEntriesByName()")}}.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">
-  <var>entries</var> = window.performance.getEntries();
-</pre>
+```js
+  entries = window.performance.getEntries();
+```
 
-<h3 id="Return_Value">Valeur de retour</h3>
+### Valeur de retour
 
-<dl>
-  <dt><code>entries</code></dt>
-  <dd>Un tableau ({{jsxref("Array")}}) d'objets {{domxref("PerformanceEntry")}}. Les éléments seront classés par ordre chronologique en fonction des entrées {{domxref("PerformanceEntry.startTime","startTime")}}.</dd>
-</dl>
+- `entries`
+  - : Un tableau ({{jsxref("Array")}}) d'objets {{domxref("PerformanceEntry")}}. Les éléments seront classés par ordre chronologique en fonction des entrées {{domxref("PerformanceEntry.startTime","startTime")}}.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">function use_PerformanceEntry_methods() {
+```js
+function use_PerformanceEntry_methods() {
   console.log("PerformanceEntry tests ...");
 
   if (performance.mark === undefined) {
@@ -50,14 +49,14 @@ translation_of: Web/API/Performance/getEntries
 
   // Utilise getEntries() pour itérer à travers chaque entrée.
   let p = performance.getEntries();
-  for (var i=0; i &lt; p.length; i++) {
+  for (var i=0; i < p.length; i++) {
     console.log("Entry[" + i + "]");
     check_PerformanceEntry(p[i]);
   }
 
   // Utilise getEntriesByType() pour obtenir toutes les entrées "mark".
   p = performance.getEntriesByType("mark");
-  for (let i=0; i &lt; p.length; i++) {
+  for (let i=0; i < p.length; i++) {
     console.log ("Mark only entry[" + i + "]: name = " + p[i].name +
          "; startTime = " + p[i].startTime +
          "; duration  = " + p[i].duration);
@@ -65,40 +64,23 @@ translation_of: Web/API/Performance/getEntries
 
   // Utilise getEntriesByName() pour obtenir toutes les entrées "mark" nommées "Begin".
   p = performance.getEntriesByName("Begin", "mark");
-  for (let i=0; i &lt; p.length; i++) {
+  for (let i=0; i < p.length; i++) {
     console.log ("Mark and Begin entry[" + i + "]: name = " + p[i].name +
          "; startTime = " + p[i].startTime +
          "; duration  = " + p[i].duration);
   }
 }
-</pre>
-
-<h2 id="Specifications">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('Performance Timeline Level 2', '#dom-performance-getentries',
-        'getEntries()')}}</td>
-      <td>{{Spec2('Performance Timeline Level 2')}}</td>
-      <td></td>
-    </tr>
-    <tr>
-      <td>{{SpecName('Performance Timeline', '#dom-performance-getentries',
-        'getEntries()')}}</td>
-      <td>{{Spec2('Performance Timeline')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Performance.getEntries")}}</p>
+```
+
+## Spécifications
+
+| Spécification                                                                                                                        | Statut                                                   | Commentaire          |
+| ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------- | -------------------- |
+| {{SpecName('Performance Timeline Level 2', '#dom-performance-getentries',
+        'getEntries()')}} | {{Spec2('Performance Timeline Level 2')}} |                      |
+| {{SpecName('Performance Timeline', '#dom-performance-getentries',
+        'getEntries()')}}             | {{Spec2('Performance Timeline')}}             | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Performance.getEntries")}}
diff --git a/files/fr/web/api/performance/getentriesbyname/index.md b/files/fr/web/api/performance/getentriesbyname/index.md
index ac125fe6be..52c885f1aa 100644
--- a/files/fr/web/api/performance/getentriesbyname/index.md
+++ b/files/fr/web/api/performance/getentriesbyname/index.md
@@ -9,37 +9,34 @@ tags:
   - Performance web
 translation_of: Web/API/Performance/getEntriesByName
 ---
-<div>{{APIRef("Performance Timeline API")}}</div>
+{{APIRef("Performance Timeline API")}}
 
-<p>La méthode <strong><code>getEntriesByName()</code></strong> renvoie une liste de tous les objets {{domxref("PerformanceEntry")}} ayant un nom (et éventuellement un type) donné(s). Les entrées de performance auront pu être créées au préalable avec des <em>marqueurs</em> ou des <em>mesures</em> de performance (par exemple en appelant la méthode {{domxref("Performance.mark", "mark()")}}) à des moments explicites.</p>
+La méthode **`getEntriesByName()`** renvoie une liste de tous les objets {{domxref("PerformanceEntry")}} ayant un nom (et éventuellement un type) donné(s). Les entrées de performance auront pu être créées au préalable avec des _marqueurs_ ou des _mesures_ de performance (par exemple en appelant la méthode {{domxref("Performance.mark", "mark()")}}) à des moments explicites.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">
-  <var>entries</var> = window.performance.getEntriesByName(name, type);
-</pre>
+```js
+  entries = window.performance.getEntriesByName(name, type);
+```
 
-<h3 id="Arguments">Arguments</h3>
+### Arguments
 
-<dl>
-  <dt><code>name</code></dt>
-  <dd>Le nom de l'entrée à récupérer.</dd>
-  <dt><code>type</code> {{optional_inline}}</dt>
-  <dd>Le type d'entrée à récupérer tel que « <code>mark</code> ». Les types d'entrées valides sont listés dans {{domxref("PerformanceEntry.entryType")}}.</dd>
-</dl>
+- `name`
+  - : Le nom de l'entrée à récupérer.
+- `type` {{optional_inline}}
+  - : Le type d'entrée à récupérer tel que « `mark` ». Les types d'entrées valides sont listés dans {{domxref("PerformanceEntry.entryType")}}.
 
-<h3 id="Return_Value">Valeur de retour</h3>
+### Valeur de retour
 
-<dl>
-  <dt><code>entries</code></dt>
-  <dd>Une liste de tous les objets {{domxref("PerformanceEntry")}} ayant le nom et le type spécifiés. Si l'argument <code>type</code> n'est pas spécifié, seul le nom (<code>name</code>) sera utilisé pour déterminer les entrées à renvoyer. Les éléments seront dans l'ordre chronologique basé sur les {{domxref("PerformanceEntry.startTime", "startTime")}} des entrées. Si aucun objet ne répond aux critères spécifiés, une liste vide est retournée.</dd>
-</dl>
+- `entries`
+  - : Une liste de tous les objets {{domxref("PerformanceEntry")}} ayant le nom et le type spécifiés. Si l'argument `type` n'est pas spécifié, seul le nom (`name`) sera utilisé pour déterminer les entrées à renvoyer. Les éléments seront dans l'ordre chronologique basé sur les {{domxref("PerformanceEntry.startTime", "startTime")}} des entrées. Si aucun objet ne répond aux critères spécifiés, une liste vide est retournée.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">function use_PerformanceEntry_methods() {
+```js
+function use_PerformanceEntry_methods() {
   log("PerformanceEntry tests ...");
 
   if (performance.mark === undefined) {
@@ -59,21 +56,21 @@ translation_of: Web/API/Performance/getEntriesByName
 
   // Utilise getEntries() pour itérer à travers chaque entrée
   var p = performance.getEntries();
-  for (var i=0; i &lt; p.length; i++) {
+  for (var i=0; i < p.length; i++) {
     log("Entry[" + i + "]");
     check_PerformanceEntry(p[i]);
   }
 
   // Utilise getEntries(name, entryType) pour obtenir des entrées spécifiques
   p = performance.getEntries({name : "Begin", entryType: "mark"});
-  for (var i=0; i &lt; p.length; i++) {
+  for (var i=0; i < p.length; i++) {
     log("Begin[" + i + "]");
     check_PerformanceEntry(p[i]);
   }
 
   // Utilise getEntriesByType() pour obtenir toutes les entrées "mark"
   p = performance.getEntriesByType("mark");
-  for (var i=0; i &lt; p.length; i++) {
+  for (var i=0; i < p.length; i++) {
     log ("Mark only entry[" + i + "]: name = " + p[i].name +
          "; startTime = " + p[i].startTime +
          "; duration  = " + p[i].duration);
@@ -81,40 +78,23 @@ translation_of: Web/API/Performance/getEntriesByName
 
   // Utilisez getEntriesByName() pour obtenir toutes les entrées "mark" nommées "Begin"
   p = performance.getEntriesByName("Begin", "mark");
-  for (var i=0; i &lt; p.length; i++) {
+  for (var i=0; i < p.length; i++) {
     log ("Mark and Begin entry[" + i + "]: name = " + p[i].name +
          "; startTime = " + p[i].startTime +
          "; duration  = " + p[i].duration);
   }
 }
-</pre>
-
-<h2 id="Specifications">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('Performance Timeline Level 2', '#dom-performance-getentriesbyname',
-        'getEntriesByName()')}}</td>
-      <td>{{Spec2('Performance Timeline Level 2')}}</td>
-      <td></td>
-    </tr>
-    <tr>
-      <td>{{SpecName('Performance Timeline', '#dom-performance-getentriesbyname',
-        'getEntriesByName()')}}</td>
-      <td>{{Spec2('Performance Timeline')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Performance.getEntriesByName")}}</p>
+```
+
+## Spécifications
+
+| Spécification                                                                                                                                        | Statut                                                   | Commentaire          |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------- | -------------------- |
+| {{SpecName('Performance Timeline Level 2', '#dom-performance-getentriesbyname',
+        'getEntriesByName()')}} | {{Spec2('Performance Timeline Level 2')}} |                      |
+| {{SpecName('Performance Timeline', '#dom-performance-getentriesbyname',
+        'getEntriesByName()')}}             | {{Spec2('Performance Timeline')}}             | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Performance.getEntriesByName")}}
diff --git a/files/fr/web/api/performance/getentriesbytype/index.md b/files/fr/web/api/performance/getentriesbytype/index.md
index 3644cd0f60..13283ac65d 100644
--- a/files/fr/web/api/performance/getentriesbytype/index.md
+++ b/files/fr/web/api/performance/getentriesbytype/index.md
@@ -2,42 +2,39 @@
 title: performance.getEntriesByType()
 slug: Web/API/Performance/getEntriesByType
 tags:
-- API
-- Method
-- Méthode
-- Reference
-- Performance web
+  - API
+  - Method
+  - Méthode
+  - Reference
+  - Performance web
 translation_of: Web/API/Performance/getEntriesByType
 ---
-<div>{{APIRef("Performance Timeline API")}}</div>
+{{APIRef("Performance Timeline API")}}
 
-<p>La méthode <strong><code>getEntriesByName()</code></strong> renvoie une liste de tous les objets {{domxref("PerformanceEntry")}} pour le type donné. Les entrées de performance auront pu être créées au préalable avec des <em>marqueurs</em> ou des <em>mesures</em> de performance (par exemple en appelant la méthode {{domxref("Performance.mark", "mark()")}}) à des moments explicites.</p>
+La méthode **`getEntriesByName()`** renvoie une liste de tous les objets {{domxref("PerformanceEntry")}} pour le type donné. Les entrées de performance auront pu être créées au préalable avec des _marqueurs_ ou des _mesures_ de performance (par exemple en appelant la méthode {{domxref("Performance.mark", "mark()")}}) à des moments explicites.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">
-  let <var>entries</var> = window.performance.getEntriesByType(type);
-</pre>
+```js
+  let entries = window.performance.getEntriesByType(type);
+```
 
-<h3 id="Arguments">Arguments</h3>
+### Arguments
 
-<dl>
-  <dt><code>type</code></dt>
-  <dd>Le type d'entrée à récupérer tel que « <code>mark</code> ». Les types d'entrées valides sont listés dans {{domxref("PerformanceEntry.entryType")}}.</dd>
-</dl>
+- `type`
+  - : Le type d'entrée à récupérer tel que « `mark` ». Les types d'entrées valides sont listés dans {{domxref("PerformanceEntry.entryType")}}.
 
-<h3 id="Return_Value">Valeur de retour</h3>
+### Valeur de retour
 
-<dl>
-  <dt><code>entries</code></dt>
-  <dd>Une liste de tous les objets {{domxref("PerformanceEntry")}} ayant le <em>type</em> spécifié. Les éléments seront triés dans l'ordre chronologique basé sur les propriétés {{domxref("PerformanceEntry.startTime", "startTime")}} des entrées. Si aucun objet ne possède le type spécifié, ou si aucun argument n'est fourni, une liste vide est renvoyée.</dd>
-</dl>
+- `entries`
+  - : Une liste de tous les objets {{domxref("PerformanceEntry")}} ayant le _type_ spécifié. Les éléments seront triés dans l'ordre chronologique basé sur les propriétés {{domxref("PerformanceEntry.startTime", "startTime")}} des entrées. Si aucun objet ne possède le type spécifié, ou si aucun argument n'est fourni, une liste vide est renvoyée.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">function usePerformanceEntryMethods() {
+```js
+function usePerformanceEntryMethods() {
   log("PerformanceEntry tests ...");
 
   if (performance.mark === undefined) {
@@ -57,21 +54,21 @@ translation_of: Web/API/Performance/getEntriesByType
 
   // Utilise getEntries() pour itérer à travers chaque entrée.
   var p = performance.getEntries();
-  for (var i=0; i &lt; p.length; i++) {
+  for (var i=0; i < p.length; i++) {
     log("Entry[" + i + "]");
     checkPerformanceEntry(p[i]);
   }
 
   // Utilise getEntries(name, entryType) pour obtenir des entrées spécifiques.
   p = performance.getEntries({name : "Begin", entryType: "mark"});
-  for (var i=0; i &lt; p.length; i++) {
+  for (var i=0; i < p.length; i++) {
     log("Begin[" + i + "]");
     checkPerformanceEntry(p[i]);
   }
 
   // Utilise getEntriesByType() pour obtenir toutes les entrées "mark".
   p = performance.getEntriesByType("mark");
-  for (var i=0; i &lt; p.length; i++) {
+  for (var i=0; i < p.length; i++) {
     log("Mark only entry[" + i + "]: name = " + p[i].name +
          "; startTime = " + p[i].startTime +
          "; duration  = " + p[i].duration);
@@ -79,40 +76,23 @@ translation_of: Web/API/Performance/getEntriesByType
 
   // Utilise getEntriesByName() pour obtenir toutes les entrées "mark" nommées "Begin".
   p = performance.getEntriesByName("Begin", "mark");
-  for (var i=0; i &lt; p.length; i++) {
+  for (var i=0; i < p.length; i++) {
     log("Mark and Begin entry[" + i + "]: name = " + p[i].name +
          "; startTime = " + p[i].startTime +
          "; duration  = " + p[i].duration);
   }
 }
-</pre>
-
-<h2 id="Specifications">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('Performance Timeline Level 2', '#dom-performance-getentriesbytype',
-        'getEntriesByType()')}}</td>
-      <td>{{Spec2('Performance Timeline Level 2')}}</td>
-      <td></td>
-    </tr>
-    <tr>
-      <td>{{SpecName('Performance Timeline', '#dom-performance-getentriesbytype',
-        'getEntriesByType()')}}</td>
-      <td>{{Spec2('Performance Timeline')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Performance.getEntriesByType")}}</p>
+```
+
+## Spécifications
+
+| Spécification                                                                                                                                        | Statut                                                   | Commentaire          |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------- | -------------------- |
+| {{SpecName('Performance Timeline Level 2', '#dom-performance-getentriesbytype',
+        'getEntriesByType()')}} | {{Spec2('Performance Timeline Level 2')}} |                      |
+| {{SpecName('Performance Timeline', '#dom-performance-getentriesbytype',
+        'getEntriesByType()')}}             | {{Spec2('Performance Timeline')}}             | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Performance.getEntriesByType")}}
diff --git a/files/fr/web/api/performance/index.md b/files/fr/web/api/performance/index.md
index 3de85d05ed..76be371a85 100644
--- a/files/fr/web/api/performance/index.md
+++ b/files/fr/web/api/performance/index.md
@@ -9,148 +9,88 @@ tags:
   - Reference
 translation_of: Web/API/Performance
 ---
-<div>{{APIRef("High Resolution Time")}}</div>
-
-<p>L'interface <strong><code>Performance</code></strong> donne accès à des informations liées aux performances pour la page actuelle. Elle fait partie de l'API « High Resolution Time », mais est complétée par les APIs <a href="/fr/docs/Web/API/Performance_Timeline">Performance Timeline</a>, <a href="/fr/docs/Web/API/Navigation_timing_API">Navigation Timing</a>, <a href="/fr/docs/Web/API/User_Timing_API">User Timing</a>, et <a href="/fr/docs/Web/API/Resource_Timing_API">Resource Timing</a>.</p>
-
-<p>Un objet de ce type peut être obtenu en appelant l'attribut en lecture seule {{domxref("window.performance")}}.</p>
-
-<div class="note">
-  <p><strong>Note :</strong> Cette interface et ses attributs sont accessibles aux <a href="/fr/docs/Web/API/Web_Workers_API">Web Workers</a> via <code><a href="/fr/docs/Web/API/WorkerGlobalScope/performance">WorkerGlobalScope.performance</a></code> sauf dans les cas cités ci-dessous. Notez également que les marqueurs et les mesures de performance sont définis par contexte. Si vous créez un marqueur dans le processus principal (ou un autre Web Worker), vous ne pourrez pas le voir dans le processus du Web Worker, et réciproquement.</p>
-</div>
-
-<h2 id="Properties">Propriétés</h2>
-
-<p><em>L'interface <code>Performance</code> n'hérite d'aucune propriété.</em></p>
-
-<dl>
-  <dt>
-    {{domxref("performance.navigation")}} {{readonlyInline}} {{deprecated_inline}}
-  </dt>
-  <dd>
-    {{domxref("PerformanceNavigation")}} est un objet qui fournit des informations contextuelles sur les opérations incluses dans les indicateurs de <code>timing</code>, notamment si la page a été chargée ou actualisée, combien de redirections ont été effectuées, etc…
-    <div class="note">
-      <p><strong>Note :</strong> Indisponible dans les Web Workers.</p>
-    </div>
-  </dd>
-  <dt>
-    {{domxref("performance.timing")}} {{readonlyInline}} {{deprecated_inline}}
-  </dt>
-  <dd>
-    {{domxref("PerformanceTiming")}} est un objet contenant des informations de performance liées à la latence.
-    <div class="note">
-      <p><strong>Note :</strong> Indisponible dans les Web Workers.</p>
-    </div>
-  </dd>
-  <dt>
-    {{domxref("performance.memory")}} {{readonlyInline}} {{Non-standard_inline}}</dt>
-  <dd>
-    Une extension <em>non standard</em> ajoutée dans Chrome, cette propriété fournit à un objet des informations de base sur l'utilisation de la mémoire. <em>Vous <strong>ne devriez pas utiliser</strong> cette API non standard.</em>
-  </dd>
-  <dt>
-    {{domxref("Performance.timeOrigin")}} {{readonlyInline}} {{Experimental_inline}}
-  </dt>
-  <dd>
-    Fournit un horodatage haute résolution de l'heure de début de la mesure de performance.
-  </dd>
-</dl>
-
-<h2 id="Methods">Méthodes</h2>
-
-<p><em>L'interface <code>Performance</code> n'hérite d'aucune méthode</em>.</p>
-
-<dl>
-  <dt>{{domxref("performance.clearMarks()")}}</dt>
-  <dd>Supprime le <em>marqueur</em> indiqué des données de performances du navigateur mises en mémoire tampon.</dd>
-  <dt>{{domxref("performance.clearMeasures()")}}</dt>
-  <dd>Supprime la <em>mesure</em> indiquée des données de performances du navigateur mises en mémoire tampon.</dd>
-  <dt>{{domxref("performance.clearResourceTimings()")}}</dt>
-  <dd>Supprime toutes les {{domxref("PerformanceEntry","entrées de performance","",1)}} avec un {{domxref("PerformanceEntry.entryType","entryType")}} "<code>resource</code>" des données de performances du navigateur mises en mémoire tampon.</dd>
-  <dt>{{domxref("performance.getEntries()")}}</dt>
-  <dd>Retourne une liste d'objets {{domxref("PerformanceEntry")}} basée sur le <em>filtre</em> indiqué.</dd>
-  <dt>{{domxref("performance.getEntriesByName()")}}</dt>
-  <dd>Retourne une liste d'objets {{domxref("PerformanceEntry")}} basée sur le <em>nom</em> indiqué.</dd>
-  <dt>{{domxref("performance.getEntriesByType()")}}</dt>
-  <dd>Retourne une liste d'objets {{domxref("PerformanceEntry")}} basée sur le <em>type</em> indiqué.</dd>
-  <dt>{{domxref("performance.mark()")}}</dt>
-  <dd>Crée un {{domxref("DOMHighResTimeStamp","timestamp")}} avec le nom indiqué, dans la mémoire tampon du navigateur dédiée aux performances.</dd>
-  <dt>{{domxref("performance.measure()")}}</dt>
-  <dd>Crée un {{domxref("DOMHighResTimeStamp","timestamp")}} nommé, dans la mémoire tampon du navigateur dédiée aux performances, entre deux marqueurs spécifiques (connus comme le <em>marqueur de début</em> et le <em>marqueur de fin</em>, respectivement).</dd>
-  <dt>{{domxref("Performance.now()")}}</dt>
-  <dd>Retourne un objet {{domxref("DOMHighResTimeStamp")}} représentant le nombre de millisecondes écoulées depuis un instant donné.</dd>
-  <dt>{{domxref("performance.setResourceTimingBufferSize()")}}</dt>
-  <dd>Configure la taille de la mémoire tampon pour le chronométrage des ressources du navigateur. La valeur passée en argument indiquera le nombre maximal d'objets {{domxref("PerformanceEntry")}} ayant le {{domxref("PerformanceEntry.entryType","type")}} "<code>resource</code>" qu'il sera possible d'y stocker.</dd>
-  <dt>{{domxref("Performance.toJSON()")}}</dt>
-  <dd>Retourne un objet JSON représentant l'objet <code>Performance</code>.</dd>
-</dl>
-
-<h2 id="Events">Événements</h2>
-
-<p>On pourra écouter ces événements en utilisant <code>addEventListener()</code> ou en assignant un gestionnaire d'événement à la propriété <code>on<em>&lt;EventName&gt;</em></code> de cette interface.</p>
-
-<dl>
-  <dt>{{DOMxRef("Performance.resourcetimingbufferfull_event", "resourcetimingbufferfull")}}</dt>
-  <dd>Déclenché lorsque le <a href="/fr/docs/Web/API/Performance/setResourceTimingBufferSize">tampon de synchronisation des ressources</a> du navigateur est plein. Également disponible via la propriété {{DOMxRef("Performance.onresourcetimingbufferfull", "onresourcetimingbufferfull")}}.</dd>
-</dl>
-
-<h2 id="Specifications">Spécifications</h2>
-
-<table class="standard-table">
-  <thead>
-    <tr>
-      <th scope="col">Spécification</th>
-      <th scope="col">Statut</th>
-      <th scope="col">Commentaires</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>{{SpecName('Highres Time Level 2', '#sec-performance', 'Performance')}}</td>
-      <td>{{Spec2('Highres Time Level 2')}}</td>
-      <td>Définition de la méthode <code>toJson()</code>.</td>
-    </tr>
-    <tr>
-      <td>{{SpecName('Highres Time', '#performance', 'Performance')}}</td>
-      <td>{{Spec2('Highres Time')}}</td>
-      <td>Définition de la méthode <code>now()</code>.</td>
-    </tr>
-    <tr>
-      <td>{{SpecName('Performance Timeline Level 2', '#extensions-to-the-performance-interface',  'Performance extensions')}}</td>
-      <td>{{Spec2('Performance Timeline Level 2')}}</td>
-      <td>Changements sur l'interface <code>getEntries()</code>.</td>
-    </tr>
-    <tr>
-      <td>{{SpecName('Performance Timeline', '#extensions-to-the-performance-interface', 'Performance extensions')}}</td>
-      <td>{{Spec2('Performance Timeline')}}</td>
-      <td>Définition des méthodes <code>getEntries()</code>, <code>getEntriesByType()</code> et <code>getEntriesByName()</code>.</td>
-    </tr>
-    <tr>
-      <td>{{SpecName('Resource Timing', '#extensions-performance-interface', 'Performance extensions')}}</td>
-      <td>{{Spec2('Resource Timing')}}</td>
-      <td>Définition des méthodes <code>clearResourceTimings()</code> et <code>setResourceTimingBufferSize()</code> et de la propriété <code>onresourcetimingbufferfull</code>.</td>
-    </tr>
-    <tr>
-      <td>{{SpecName('User Timing Level 2', '#extensions-performance-interface', 'Performance extensions')}}</td>
-      <td>{{Spec2('User Timing Level 2')}}</td>
-      <td>Clarifications des méthodes <code>mark()</code>, <code>clearMark()</code>, <code>measure()</code> et <code>clearMeasure()</code>.</td>
-    </tr>
-    <tr>
-      <td>{{SpecName('User Timing', '#extensions-performance-interface', 'Performance extensions')}}</td>
-      <td>{{Spec2('User Timing')}}</td>
-      <td>Définition des méthodes <code>mark()</code>, <code>clearMark()</code>, <code>measure()</code> et <code>clearMeasure()</code>.</td>
-    </tr>
-  </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Performance")}}</p>
-
-<h2 id="See_Also">Voir aussi</h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/API/Performance_Timeline">Performance Timeline</a></li>
-  <li><a href="/fr/docs/Web/API/Navigation_timing_API">Navigation Timing API</a></li>
-  <li><a href="/fr/docs/Web/API/User_Timing_API">User Timing API</a></li>
-  <li><a href="/fr/docs/Web/API/Resource_Timing_API">Resource Timing API</a></li>
-</ul>
+{{APIRef("High Resolution Time")}}
+
+L'interface **`Performance`** donne accès à des informations liées aux performances pour la page actuelle. Elle fait partie de l'API « High Resolution Time », mais est complétée par les APIs [Performance Timeline](/fr/docs/Web/API/Performance_Timeline), [Navigation Timing](/fr/docs/Web/API/Navigation_timing_API), [User Timing](/fr/docs/Web/API/User_Timing_API), et [Resource Timing](/fr/docs/Web/API/Resource_Timing_API).
+
+Un objet de ce type peut être obtenu en appelant l'attribut en lecture seule {{domxref("window.performance")}}.
+
+> **Note :** Cette interface et ses attributs sont accessibles aux [Web Workers](/fr/docs/Web/API/Web_Workers_API) via [`WorkerGlobalScope.performance`](/fr/docs/Web/API/WorkerGlobalScope/performance) sauf dans les cas cités ci-dessous. Notez également que les marqueurs et les mesures de performance sont définis par contexte. Si vous créez un marqueur dans le processus principal (ou un autre Web Worker), vous ne pourrez pas le voir dans le processus du Web Worker, et réciproquement.
+
+## Propriétés
+
+_L'interface `Performance` n'hérite d'aucune propriété._
+
+- {{domxref("performance.navigation")}} {{readonlyInline}} {{deprecated_inline}}
+
+  - : {{domxref("PerformanceNavigation")}} est un objet qui fournit des informations contextuelles sur les opérations incluses dans les indicateurs de `timing`, notamment si la page a été chargée ou actualisée, combien de redirections ont été effectuées, etc…
+
+    > **Note :** Indisponible dans les Web Workers.
+
+- {{domxref("performance.timing")}} {{readonlyInline}} {{deprecated_inline}}
+
+  - : {{domxref("PerformanceTiming")}} est un objet contenant des informations de performance liées à la latence.
+
+    > **Note :** Indisponible dans les Web Workers.
+
+- {{domxref("performance.memory")}} {{readonlyInline}} {{Non-standard_inline}}
+  - : Une extension _non standard_ ajoutée dans Chrome, cette propriété fournit à un objet des informations de base sur l'utilisation de la mémoire. _Vous **ne devriez pas utiliser** cette API non standard._
+- {{domxref("Performance.timeOrigin")}} {{readonlyInline}} {{Experimental_inline}}
+  - : Fournit un horodatage haute résolution de l'heure de début de la mesure de performance.
+
+## Méthodes
+
+_L'interface `Performance` n'hérite d'aucune méthode_.
+
+- {{domxref("performance.clearMarks()")}}
+  - : Supprime le _marqueur_ indiqué des données de performances du navigateur mises en mémoire tampon.
+- {{domxref("performance.clearMeasures()")}}
+  - : Supprime la _mesure_ indiquée des données de performances du navigateur mises en mémoire tampon.
+- {{domxref("performance.clearResourceTimings()")}}
+  - : Supprime toutes les {{domxref("PerformanceEntry","entrées de performance","",1)}} avec un {{domxref("PerformanceEntry.entryType","entryType")}} "`resource`" des données de performances du navigateur mises en mémoire tampon.
+- {{domxref("performance.getEntries()")}}
+  - : Retourne une liste d'objets {{domxref("PerformanceEntry")}} basée sur le _filtre_ indiqué.
+- {{domxref("performance.getEntriesByName()")}}
+  - : Retourne une liste d'objets {{domxref("PerformanceEntry")}} basée sur le _nom_ indiqué.
+- {{domxref("performance.getEntriesByType()")}}
+  - : Retourne une liste d'objets {{domxref("PerformanceEntry")}} basée sur le _type_ indiqué.
+- {{domxref("performance.mark()")}}
+  - : Crée un {{domxref("DOMHighResTimeStamp","timestamp")}} avec le nom indiqué, dans la mémoire tampon du navigateur dédiée aux performances.
+- {{domxref("performance.measure()")}}
+  - : Crée un {{domxref("DOMHighResTimeStamp","timestamp")}} nommé, dans la mémoire tampon du navigateur dédiée aux performances, entre deux marqueurs spécifiques (connus comme le _marqueur de début_ et le _marqueur de fin_, respectivement).
+- {{domxref("Performance.now()")}}
+  - : Retourne un objet {{domxref("DOMHighResTimeStamp")}} représentant le nombre de millisecondes écoulées depuis un instant donné.
+- {{domxref("performance.setResourceTimingBufferSize()")}}
+  - : Configure la taille de la mémoire tampon pour le chronométrage des ressources du navigateur. La valeur passée en argument indiquera le nombre maximal d'objets {{domxref("PerformanceEntry")}} ayant le {{domxref("PerformanceEntry.entryType","type")}} "`resource`" qu'il sera possible d'y stocker.
+- {{domxref("Performance.toJSON()")}}
+  - : Retourne un objet JSON représentant l'objet `Performance`.
+
+## Événements
+
+On pourra écouter ces événements en utilisant `addEventListener()` ou en assignant un gestionnaire d'événement à la propriété `on<EventName>` de cette interface.
+
+- {{DOMxRef("Performance.resourcetimingbufferfull_event", "resourcetimingbufferfull")}}
+  - : Déclenché lorsque le [tampon de synchronisation des ressources](/fr/docs/Web/API/Performance/setResourceTimingBufferSize) du navigateur est plein. Également disponible via la propriété {{DOMxRef("Performance.onresourcetimingbufferfull", "onresourcetimingbufferfull")}}.
+
+## Spécifications
+
+| Spécification                                                                                                                                            | Statut                                                   | Commentaires                                                                                                                         |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
+| {{SpecName('Highres Time Level 2', '#sec-performance', 'Performance')}}                                                         | {{Spec2('Highres Time Level 2')}}             | Définition de la méthode `toJson()`.                                                                                                 |
+| {{SpecName('Highres Time', '#performance', 'Performance')}}                                                                         | {{Spec2('Highres Time')}}                         | Définition de la méthode `now()`.                                                                                                    |
+| {{SpecName('Performance Timeline Level 2', '#extensions-to-the-performance-interface',  'Performance extensions')}} | {{Spec2('Performance Timeline Level 2')}} | Changements sur l'interface `getEntries()`.                                                                                          |
+| {{SpecName('Performance Timeline', '#extensions-to-the-performance-interface', 'Performance extensions')}}             | {{Spec2('Performance Timeline')}}             | Définition des méthodes `getEntries()`, `getEntriesByType()` et `getEntriesByName()`.                                                |
+| {{SpecName('Resource Timing', '#extensions-performance-interface', 'Performance extensions')}}                             | {{Spec2('Resource Timing')}}                     | Définition des méthodes `clearResourceTimings()` et `setResourceTimingBufferSize()` et de la propriété `onresourcetimingbufferfull`. |
+| {{SpecName('User Timing Level 2', '#extensions-performance-interface', 'Performance extensions')}}                     | {{Spec2('User Timing Level 2')}}             | Clarifications des méthodes `mark()`, `clearMark()`, `measure()` et `clearMeasure()`.                                                |
+| {{SpecName('User Timing', '#extensions-performance-interface', 'Performance extensions')}}                                 | {{Spec2('User Timing')}}                         | Définition des méthodes `mark()`, `clearMark()`, `measure()` et `clearMeasure()`.                                                    |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Performance")}}
+
+## Voir aussi
+
+- [Performance Timeline](/fr/docs/Web/API/Performance_Timeline)
+- [Navigation Timing API](/fr/docs/Web/API/Navigation_timing_API)
+- [User Timing API](/fr/docs/Web/API/User_Timing_API)
+- [Resource Timing API](/fr/docs/Web/API/Resource_Timing_API)
diff --git a/files/fr/web/api/performance/mark/index.md b/files/fr/web/api/performance/mark/index.md
index c33a169606..f589c9759f 100644
--- a/files/fr/web/api/performance/mark/index.md
+++ b/files/fr/web/api/performance/mark/index.md
@@ -2,45 +2,46 @@
 title: performance.mark()
 slug: Web/API/Performance/mark
 tags:
-- API
-- Method
-- Méthode
-- Reference
-- Performance web
+  - API
+  - Method
+  - Méthode
+  - Reference
+  - Performance web
 translation_of: Web/API/Performance/mark
 ---
-<div>{{APIRef("User Timing API")}}</div>
+{{APIRef("User Timing API")}}
 
-<p>La méthode <strong><code>mark()</code></strong> crée un {{domxref("DOMHighResTimeStamp", "timestamp")}} dans le <em>tampon d'entrée de performance</em> du navigateur avec le nom donné en argument.</p>
+La méthode **`mark()`** crée un {{domxref("DOMHighResTimeStamp", "timestamp")}} dans le _tampon d'entrée de performance_ du navigateur avec le nom donné en argument.
 
-<p>L'horodatage ainsi défini par l'application peut être récupéré par l'une des méthodes <code>getEntries*()</code> de l'interface {{domxref("Performance")}} ({{domxref("Performance.getEntries", "getEntries()")}}, {{domxref("Performance.getEntriesByName", "getEntriesByName()")}} ou {{domxref("Performance.getEntriesByType", "getEntriesByType()")}}).</p>
+L'horodatage ainsi défini par l'application peut être récupéré par l'une des méthodes `getEntries*()` de l'interface {{domxref("Performance")}} ({{domxref("Performance.getEntries", "getEntries()")}}, {{domxref("Performance.getEntriesByName", "getEntriesByName()")}} ou {{domxref("Performance.getEntriesByType", "getEntriesByType()")}}).
 
-<p>La méthode <code>mark()</code> stocke ses données en interne sous la forme d'objets {{domxref("PerformanceEntry")}}.</p>
+La méthode `mark()` stocke ses données en interne sous la forme d'objets {{domxref("PerformanceEntry")}}.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">
+```js
   performance.mark(name);
-</pre>
+```
 
-<h3 id="Arguments">Arguments</h3>
+### Arguments
 
-<dl>
-  <dt><code>name</code></dt>
-  <dd>Une chaîne de caractères ({{domxref("DOMString")}}) représentant le nom du marqueur. Si le nom donné à cette méthode existe déjà dans l'interface {{domxref("PerformanceTiming")}}, une exception {{jsxref("SyntaxError")}} est levée.</dd>
-</dl>
+- `name`
+  - : Une chaîne de caractères ({{domxref("DOMString")}}) représentant le nom du marqueur. Si le nom donné à cette méthode existe déjà dans l'interface {{domxref("PerformanceTiming")}}, une exception {{jsxref("SyntaxError")}} est levée.
 
-<h3 id="Return_value">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Aucune.</p>>
+Aucune.
 
-<h2 id="Example">Exemple</h2>
+\>
 
-<p>L'exemple suivant montre comment utiliser <code>mark()</code> pour créer et récupérer des entrées {{domxref("PerformanceMark")}}.</p>
+## Exemple
 
-<pre class="brush:js">// Crée un ensemble de marqueurs.
+L'exemple suivant montre comment utiliser `mark()` pour créer et récupérer des entrées {{domxref("PerformanceMark")}}.
+
+```js
+// Crée un ensemble de marqueurs.
 performance.mark("squirrel");
 performance.mark("squirrel");
 performance.mark("monkey");
@@ -60,32 +61,15 @@ console.log(monkeyEntries.length);
 
 // Efface tous les marqueurs.
 performance.clearMarks();
-</pre>
-
-<h2 id="Specifications">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('User Timing Level 2', '#dom-performance-mark', 'mark()')}}</td>
-      <td>{{Spec2('User Timing Level 2')}}</td>
-      <td>Clarification du modèle de traitement <code>mark()</code>.</td>
-    </tr>
-    <tr>
-      <td>{{SpecName('User Timing', '#dom-performance-mark', 'mark()')}}</td>
-      <td>{{Spec2('User Timing')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Performance.mark")}}</p>
+```
+
+## Spécifications
+
+| Spécification                                                                                | Statut                                       | Commentaire                                     |
+| -------------------------------------------------------------------------------------------- | -------------------------------------------- | ----------------------------------------------- |
+| {{SpecName('User Timing Level 2', '#dom-performance-mark', 'mark()')}} | {{Spec2('User Timing Level 2')}} | Clarification du modèle de traitement `mark()`. |
+| {{SpecName('User Timing', '#dom-performance-mark', 'mark()')}}         | {{Spec2('User Timing')}}             | Définition initiale.                            |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Performance.mark")}}
diff --git a/files/fr/web/api/performance/measure/index.md b/files/fr/web/api/performance/measure/index.md
index 74ab333134..8035478a40 100644
--- a/files/fr/web/api/performance/measure/index.md
+++ b/files/fr/web/api/performance/measure/index.md
@@ -2,60 +2,57 @@
 title: performance.measure()
 slug: Web/API/Performance/measure
 tags:
-- API
-- Method
-- Méthode
-- Reference
-- Performance web
-- Web Workers
+  - API
+  - Method
+  - Méthode
+  - Reference
+  - Performance web
+  - Web Workers
 translation_of: Web/API/Performance/measure
 ---
-<div>{{APIRef("User Timing API")}}</div>
+{{APIRef("User Timing API")}}
 
-<p>La méthode <strong><code>measure()</code></strong> crée un {{domxref("DOMHighResTimeStamp", "timestamp")}} nommé dans le <em>tampon d'entrée de performance</em> du navigateur entre deux marqueurs, l'heure de début de navigation ou l'heure actuelle. Lors d'une mesure entre deux marqueurs, on aura un <em>marqueur de début</em> et un <em>marqueur de fin</em>. L'horodatage ainsi nommé est désigné comme une <em>mesure</em>.</p>
+La méthode **`measure()`** crée un {{domxref("DOMHighResTimeStamp", "timestamp")}} nommé dans le _tampon d'entrée de performance_ du navigateur entre deux marqueurs, l'heure de début de navigation ou l'heure actuelle. Lors d'une mesure entre deux marqueurs, on aura un _marqueur de début_ et un _marqueur de fin_. L'horodatage ainsi nommé est désigné comme une _mesure_.
 
-<p>La mesure correspondante peut être récupérée par l'une des méthodes suivantes de l'interface {{domxref("Performance")}} : {{domxref("Performance.getEntries", "getEntries()")}}, {{domxref("Performance.getEntriesByName", "getEntriesByName()")}} ou {{domxref("Performance.getEntriesByType", "getEntriesByType()")}}.</p>
+La mesure correspondante peut être récupérée par l'une des méthodes suivantes de l'interface {{domxref("Performance")}} : {{domxref("Performance.getEntries", "getEntries()")}}, {{domxref("Performance.getEntriesByName", "getEntriesByName()")}} ou {{domxref("Performance.getEntriesByType", "getEntriesByType()")}}.
 
-<p>L'{{domxref("PerformanceEntry", "entrée de performance","",1)}} créée par <code>measure()</code> aura les valeurs de propriété suivantes :</p>
+L'{{domxref("PerformanceEntry", "entrée de performance","",1)}} créée par `measure()` aura les valeurs de propriété suivantes :
 
-<ul>
-  <li>{{domxref("PerformanceEntry.entryType","entryType")}} : <code>"measure"</code>.</li>
-  <li>{{domxref("PerformanceEntry.name","name")}} : le nom passé en argument lors de la création de la mesure (cf. ci-après).</li>
-  <li>{{domxref("PerformanceEntry.startTime","startTime")}} : fixé selon le marqueur de départ (type {{domxref("DOMHighResTimeStamp")}}).</li>
-  <li>{{domxref("PerformanceEntry.duration","duration")}} : fixé à un {{domxref("DOMHighResTimeStamp")}} qui correspond à la durée de la mesure (généralement, l'horodatage du marqueur de fin moins l'horodatage du marqueur de début).</li>
-</ul>
+- {{domxref("PerformanceEntry.entryType","entryType")}} : `"measure"`.
+- {{domxref("PerformanceEntry.name","name")}} : le nom passé en argument lors de la création de la mesure (cf. ci-après).
+- {{domxref("PerformanceEntry.startTime","startTime")}} : fixé selon le marqueur de départ (type {{domxref("DOMHighResTimeStamp")}}).
+- {{domxref("PerformanceEntry.duration","duration")}} : fixé à un {{domxref("DOMHighResTimeStamp")}} qui correspond à la durée de la mesure (généralement, l'horodatage du marqueur de fin moins l'horodatage du marqueur de début).
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">
+```js
   performance.measure(name);
   performance.measure(name, startMark);
   performance.measure(name, startMark, endMark);
   performance.measure(name, undefined, endMark);
-</pre>
+```
 
-<h3 id="Arguments">Arguments</h3>
+### Arguments
 
-<dl>
-  <dt><code>name</code></dt>
-  <dd>Une {{domxref("DOMString")}} représentant le nom de la mesure.</dd>
-  <dt><code>startMark</code> {{optional_inline}}</dt>
-  <dd>Une {{domxref("DOMString")}} représentant le nom du marqueur de départ de la mesure. Peut également être le nom d'une propriété {{domxref("PerformanceTiming")}}. Si elle est omise, l'heure de début sera celle de la navigation.</dd>
-  <dt><code>endMark</code> {{optional_inline}}</dt>
-  <dd>Une {{domxref("DOMString")}} représentant le nom du marqueur de fin de la mesure. Peut également être le nom d'une propriété {{domxref("PerformanceTiming")}}. Si elle est omise, le temps actuel est utilisé.</dd>
-</dl>
+- `name`
+  - : Une {{domxref("DOMString")}} représentant le nom de la mesure.
+- `startMark` {{optional_inline}}
+  - : Une {{domxref("DOMString")}} représentant le nom du marqueur de départ de la mesure. Peut également être le nom d'une propriété {{domxref("PerformanceTiming")}}. Si elle est omise, l'heure de début sera celle de la navigation.
+- `endMark` {{optional_inline}}
+  - : Une {{domxref("DOMString")}} représentant le nom du marqueur de fin de la mesure. Peut également être le nom d'une propriété {{domxref("PerformanceTiming")}}. Si elle est omise, le temps actuel est utilisé.
 
-<h3 id="Return_value">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Aucune</p>
+Aucune
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<p>L'exemple suivant montre comment <code>measure()</code> est utilisé pour créer une nouvelle <em>mesure</em> d'{{domxref("PerformanceEntry", "entrée de performance","",1)}} dans le tampon d'entrée de performance du navigateur.</p>
+L'exemple suivant montre comment `measure()` est utilisé pour créer une nouvelle _mesure_ d'{{domxref("PerformanceEntry", "entrée de performance","",1)}} dans le tampon d'entrée de performance du navigateur.
 
-<pre class="brush: js">const markerNameA = "example-marker-a"
+```js
+const markerNameA = "example-marker-a"
 const markerNameB = "example-marker-b"
 
 // Exécute des temporisations imbriquées et crée un PerformanceMark pour chacune d'entre elles.
@@ -78,33 +75,15 @@ setTimeout(function() {
     performance.clearMeasures();
   }, 1000);
 }, 1000);
-</pre>
-
-<h2 id="Specifications">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('User Timing Level 2', '#dom-performance-measure', 'measure()')}}
-      </td>
-      <td>{{Spec2('User Timing Level 2')}}</td>
-      <td>Clarification du modèle de traitement de <code>mesure()</code>.</td>
-    </tr>
-    <tr>
-      <td>{{SpecName('User Timing', '#dom-performance-measure', 'measure()')}}</td>
-      <td>{{Spec2('User Timing')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Performance.measure")}}</p>
+```
+
+## Spécifications
+
+| Spécification                                                                                        | Statut                                       | Commentaire                                          |
+| ---------------------------------------------------------------------------------------------------- | -------------------------------------------- | ---------------------------------------------------- |
+| {{SpecName('User Timing Level 2', '#dom-performance-measure', 'measure()')}} | {{Spec2('User Timing Level 2')}} | Clarification du modèle de traitement de `mesure()`. |
+| {{SpecName('User Timing', '#dom-performance-measure', 'measure()')}}         | {{Spec2('User Timing')}}             | Définition initiale.                                 |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Performance.measure")}}
diff --git a/files/fr/web/api/performance/memory/index.md b/files/fr/web/api/performance/memory/index.md
index a98b747b49..2a922d4fb3 100644
--- a/files/fr/web/api/performance/memory/index.md
+++ b/files/fr/web/api/performance/memory/index.md
@@ -7,37 +7,33 @@ tags:
   - Performance web
 translation_of: Web/API/Performance/memory
 ---
-<p>{{APIRef}}</p>
+{{APIRef}}
 
 {{Non-standardGeneric('header')}}
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">
-  <em>timingInfo</em> = <em>performance</em>.memory
-</pre>
+```js
+  timingInfo = performance.memory
+```
 
-<h2 id="Attributes">Attributs</h2>
+## Attributs
 
-<dl>
-  <dt><code>jsHeapSizeLimit</code></dt>
-  <dd>La taille maximale du tas, en octets, qui est disponible pour le contexte.</dd>
-  <dt><code>totalJSHeapSize</code></dt>
-  <dd>La taille totale du répertoire alloué, en octets.</dd>
-  <dt>usedJSHeapSize</dt>
-  <dd>Le segment actuellement actif du répertoire JS, en octets.</dd>
-</dl>
+- `jsHeapSizeLimit`
+  - : La taille maximale du tas, en octets, qui est disponible pour le contexte.
+- `totalJSHeapSize`
+  - : La taille totale du répertoire alloué, en octets.
+- usedJSHeapSize
+  - : Le segment actuellement actif du répertoire JS, en octets.
 
-<h2 id="Specifications">Spécifications</h2>
+## Spécifications
 
-<p>Aucune</p>
+Aucune
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Performance.memory")}}</p>
+{{Compat("api.Performance.memory")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>L'interface {{domxref("Performance")}} à laquelle il appartient.</li>
-</ul>
+- L'interface {{domxref("Performance")}} à laquelle il appartient.
diff --git a/files/fr/web/api/performance/navigation/index.md b/files/fr/web/api/performance/navigation/index.md
index b3487091fd..a136ce9393 100644
--- a/files/fr/web/api/performance/navigation/index.md
+++ b/files/fr/web/api/performance/navigation/index.md
@@ -15,47 +15,30 @@ tags:
   - legacy
 translation_of: Web/API/Performance/navigation
 ---
-<p>{{Deprecated_Header}}{{APIRef("Navigation Timing")}}</p>
+{{Deprecated_Header}}{{APIRef("Navigation Timing")}}
 
-<div class="warning">
-  <p><strong>Attention :</strong> Cette propriété est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2 specification</a>.</p>
-</div>
+> **Attention :** Cette propriété est dépréciée dans la spécification [Navigation Timing Level 2 specification](https://w3c.github.io/navigation-timing/#obsolete).
 
-<p>L'ancienne propriété en lecture seule <strong><code>Performance.navigation</code></strong> renvoie un objet {{domxref("PerformanceNavigation")}} représentant le type de navigation qui se produit dans le contexte de navigation donné, comme le nombre de redirections nécessaires pour aller chercher la ressource.</p>
+L'ancienne propriété en lecture seule **`Performance.navigation`** renvoie un objet {{domxref("PerformanceNavigation")}} représentant le type de navigation qui se produit dans le contexte de navigation donné, comme le nombre de redirections nécessaires pour aller chercher la ressource.
 
 {{warning("Cette propriété n'est pas disponible dans les Web Workers.")}}
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">
-  <em>navObject</em> = <em>performance</em>.navigation;
-</pre>
+```js
+  navObject = performance.navigation;
+```
 
-<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('Navigation Timing', '#sec-window.performance-attribute', 'Performance.navigation')}}</td>
-   <td>{{Spec2('Navigation Timing')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                    | Statut                                   | Commentaire          |
+| -------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('Navigation Timing', '#sec-window.performance-attribute', 'Performance.navigation')}} | {{Spec2('Navigation Timing')}} | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Performance.navigation")}}</p>
+{{Compat("api.Performance.navigation")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>L'interface {{domxref("Performance")}} à laquelle il appartient.</li>
-</ul>
+- L'interface {{domxref("Performance")}} à laquelle il appartient.
diff --git a/files/fr/web/api/performance/now/index.md b/files/fr/web/api/performance/now/index.md
index 0505c4a6cd..86f039c2ca 100644
--- a/files/fr/web/api/performance/now/index.md
+++ b/files/fr/web/api/performance/now/index.md
@@ -10,49 +10,48 @@ tags:
   - Reference
 translation_of: Web/API/Performance/now
 ---
-<p>{{APIRef("High Resolution Timing")}}</p>
+{{APIRef("High Resolution Timing")}}
 
-<p>La méthode <code><strong>Performance.now()</strong></code> retourne une valeur de type {{domxref("DOMHighResTimeStamp")}}, mesurée en millisecondes et avec une précision de 5 millièmes de milliseconde (5 microsecondes).</p>
+La méthode **`Performance.now()`** retourne une valeur de type {{domxref("DOMHighResTimeStamp")}}, mesurée en millisecondes et avec une précision de 5 millièmes de milliseconde (5 microsecondes).
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<p>La valeur retournée représente le temps écoulé depuis le <a href="/fr/docs/Web/API/DOMHighResTimeStamp#the_time_origin">temps d'origine</a>.</p>
+La valeur retournée représente le temps écoulé depuis le [temps d'origine](/fr/docs/Web/API/DOMHighResTimeStamp#the_time_origin).
 
-<p>Attention à garder à l'esprit les points suivants :</p>
+Attention à garder à l'esprit les points suivants :
 
-<ul>
-  <li>Dans les workers dédiés créés à partir d'un contexte {{domxref("Window")}}, la valeur dans le worker sera inférieure à celle obtenue par  <code>performance.now()</code> exécuté dans la fenêtre ayant créé le worker. La fenêtre et le worker partageaient avant le même temps de référence <code>t0</code> à partir du contexte principal, mais cela a été changé.</li>
-  <li>Dans les workers partagés ou service sorkers, la valeur dans le worker peut être supérieure à celle du contexte principal, car la fenêtre pourra avoir été créée après ces workers.</li>
-</ul>
+- Dans les workers dédiés créés à partir d'un contexte {{domxref("Window")}}, la valeur dans le worker sera inférieure à celle obtenue par `performance.now()` exécuté dans la fenêtre ayant créé le worker. La fenêtre et le worker partageaient avant le même temps de référence `t0` à partir du contexte principal, mais cela a été changé.
+- Dans les workers partagés ou service sorkers, la valeur dans le worker peut être supérieure à celle du contexte principal, car la fenêtre pourra avoir été créée après ces workers.
 
-<p>Il est important de garder à l'esprit que pour atténuer les menaces de sécurité potentielles telles que <a href="https://spectreattack.com/">Spectre</a>, les navigateurs arrondissent généralement la valeur retournée d'une certaine quantité afin d'être moins prévisible. Cela introduit intrinsèquement un degré d'imprécision en limitant la résolution ou la précision de la minuterie. Par exemple, Firefox arrondit le temps renvoyé à des incréments de 1 milliseconde.</p>
+Il est important de garder à l'esprit que pour atténuer les menaces de sécurité potentielles telles que [Spectre](https://spectreattack.com/), les navigateurs arrondissent généralement la valeur retournée d'une certaine quantité afin d'être moins prévisible. Cela introduit intrinsèquement un degré d'imprécision en limitant la résolution ou la précision de la minuterie. Par exemple, Firefox arrondit le temps renvoyé à des incréments de 1 milliseconde.
 
-<p>La précision de la valeur retournée est susceptible de changer si/quand les problèmes de sécurité sont atténués par d'autres moyens.</p>
+La précision de la valeur retournée est susceptible de changer si/quand les problèmes de sécurité sont atténués par d'autres moyens.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">
+```js
   t = performance.now();
-</pre>
+```
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">
+```js
   var t0 = performance.now();
   doSomething();
   var t1 = performance.now();
   console.log("L'appel de doSomething a demandé " + (t1 - t0) + " millisecondes.")
-</pre>
+```
 
-<p>Contrairement aux autres données de temps disponibles en JavaScript (par exemple <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Date/now"><code>Date.now</code></a>), les horodatages retournés par <code>Performance.now()</code> ne sont pas limités à une précision d'une milliseconde. Au contraire, ils représentent les temps comme des nombres flottants avec une précision pouvant aller jusqu'à une microseconde.</p>
+Contrairement aux autres données de temps disponibles en JavaScript (par exemple [`Date.now`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Date/now)), les horodatages retournés par `Performance.now()` ne sont pas limités à une précision d'une milliseconde. Au contraire, ils représentent les temps comme des nombres flottants avec une précision pouvant aller jusqu'à une microseconde.
 
-<p>Également contrairement à <code>Date.now()</code>, les valeurs retournées par <code>Performance.now() </code>sont toujours incrémentées à un taux constant, indépendant de l'horloge du système (qui peut être ajustée manuellement ou par l'intermédiaire d'un logiciel comme NTP). Sinon, <code>performance.timing.navigationStart + performance.now()</code> serait approximativement égal à <code>Date.now().</code></p>
+Également contrairement à `Date.now()`, les valeurs retournées par `Performance.now() `sont toujours incrémentées à un taux constant, indépendant de l'horloge du système (qui peut être ajustée manuellement ou par l'intermédiaire d'un logiciel comme NTP). Sinon, `performance.timing.navigationStart + performance.now()` serait approximativement égal à `Date.now().`
 
-<h2 id="Reduced_time_precision">Précision réduite du temps</h2>
+## Précision réduite du temps
 
-<p>Pour offrir une protection contre les attaques de temporisation et les empreintes digitales, la précision de <code>performance.now()</code> peut être arrondie en fonction des paramètres du navigateur. Dans Firefox, la préférence <code>privacy.reduceTimerPrecision</code> est activée par défaut et prend la valeur 1ms par défaut.</p>
+Pour offrir une protection contre les attaques de temporisation et les empreintes digitales, la précision de `performance.now()` peut être arrondie en fonction des paramètres du navigateur. Dans Firefox, la préférence `privacy.reduceTimerPrecision` est activée par défaut et prend la valeur 1ms par défaut.
 
-<pre class="brush: js">// précision temporelle réduite (1ms) dans Firefox 60
+```js
+// précision temporelle réduite (1ms) dans Firefox 60
 performance.now();
 // 8781416
 // 8781815
@@ -65,47 +64,30 @@ performance.now();
 // 8866200
 // 8866700
 // ...
-</pre>
-
-<p>Dans Firefox, vous pouvez également activer <code>privacy.resistFingerprinting</code> - cela change la précision à 100ms ou à la valeur de <code>privacy.resistFingerprinting.reduceTimerPrecision.microseconds</code> en fonction de la plus grande des deux.</p>
-
-<p>À partir de Firefox 79, les minuteurs haute résolution peuvent être utilisés si vous isolez votre document en utilisant les en-têtes {{HTTPHeader("Cross-Origin-Opener-Policy")}} et {{HTTPHeader("Cross-Origin-Embedder-Policy")}} :</p>
-
-<pre class="brush: plain">Cross-Origin-Opener-Policy: same-origin
-Cross-Origin-Embedder-Policy: require-corp</pre>
-
-<p>Ces en-têtes garantissent qu'un document de premier niveau ne partage pas un groupe de contexte de navigation avec des documents d'origine croisée. Le processus COOP isole votre document et les attaquants potentiels ne peuvent pas accéder à votre objet global s'ils l'ouvrent dans une fenêtre contextuelle, ce qui permet d'éviter un ensemble d'attaques d'origine croisée appelées <a href="https://github.com/xsleaks/xsleaks">XS-Leaks</a>.</p>
-
-<h2 id="Specifications">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('Highres Time Level 2',  '#dom-performance-now', 'performance.now()')}}</td>
-      <td>{{Spec2('Highres Time Level 2')}}</td>
-      <td>Définitions plus strictes des interfaces et des types.</td>
-    </tr>
-    <tr>
-      <td>{{SpecName('Highres Time',  '#dom-performance-now', 'Performance.now()')}}</td>
-      <td>{{Spec2('Highres Time')}}</td>
-      <td>Définition initiale</td>
-    </tr>
-  </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Performance.now")}}</p>
-
-<h2 id="See_also">Voir aussi</h2>
-
-<ul>
-  <li><a href="http://updates.html5rocks.com/2012/08/When-milliseconds-are-not-enough-performance-now">Quand les millisecondes ne suffisent pas : performance.now() <small>(en)</small></a> de HTML5 Rocks.</li>
-</ul>
+```
+
+Dans Firefox, vous pouvez également activer `privacy.resistFingerprinting` - cela change la précision à 100ms ou à la valeur de `privacy.resistFingerprinting.reduceTimerPrecision.microseconds` en fonction de la plus grande des deux.
+
+À partir de Firefox 79, les minuteurs haute résolution peuvent être utilisés si vous isolez votre document en utilisant les en-têtes {{HTTPHeader("Cross-Origin-Opener-Policy")}} et {{HTTPHeader("Cross-Origin-Embedder-Policy")}} :
+
+```plain
+Cross-Origin-Opener-Policy: same-origin
+Cross-Origin-Embedder-Policy: require-corp
+```
+
+Ces en-têtes garantissent qu'un document de premier niveau ne partage pas un groupe de contexte de navigation avec des documents d'origine croisée. Le processus COOP isole votre document et les attaquants potentiels ne peuvent pas accéder à votre objet global s'ils l'ouvrent dans une fenêtre contextuelle, ce qui permet d'éviter un ensemble d'attaques d'origine croisée appelées [XS-Leaks](https://github.com/xsleaks/xsleaks).
+
+## Spécifications
+
+| Spécification                                                                                                | Statut                                       | Commentaire                                            |
+| ------------------------------------------------------------------------------------------------------------ | -------------------------------------------- | ------------------------------------------------------ |
+| {{SpecName('Highres Time Level 2',  '#dom-performance-now', 'performance.now()')}} | {{Spec2('Highres Time Level 2')}} | Définitions plus strictes des interfaces et des types. |
+| {{SpecName('Highres Time',  '#dom-performance-now', 'Performance.now()')}}         | {{Spec2('Highres Time')}}             | Définition initiale                                    |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Performance.now")}}
+
+## Voir aussi
+
+- [Quand les millisecondes ne suffisent pas : performance.now() (en)](http://updates.html5rocks.com/2012/08/When-milliseconds-are-not-enough-performance-now) de HTML5 Rocks.
diff --git a/files/fr/web/api/performance/onresourcetimingbufferfull/index.md b/files/fr/web/api/performance/onresourcetimingbufferfull/index.md
index c45a75f39a..d904faab49 100644
--- a/files/fr/web/api/performance/onresourcetimingbufferfull/index.md
+++ b/files/fr/web/api/performance/onresourcetimingbufferfull/index.md
@@ -2,37 +2,36 @@
 title: performance.onresourcetimingbufferfull
 slug: Web/API/Performance/onresourcetimingbufferfull
 tags:
-- API
-- Method
-- Méthode
-- Reference
-- Performance web
+  - API
+  - Method
+  - Méthode
+  - Reference
+  - Performance web
 translation_of: Web/API/Performance/onresourcetimingbufferfull
 ---
-<div>{{APIRef("Resource Timing API")}}</div>
+{{APIRef("Resource Timing API")}}
 
-<p>La propriété <strong><code>onresourcetimingbufferfull</code></strong> est un gestionnaire d'événements qui sera appelé lorsque l'événement <a href="/fr/docs/Web/API/Performance/resourcetimingbufferfull_event"><code>resourcetimingbufferfull</code></a> est déclenché. Ce déclenchement a lieu lorsque le tampon de performance de synchronisation des ressources du navigateur est plein.</p>
+La propriété **`onresourcetimingbufferfull`** est un gestionnaire d'événements qui sera appelé lorsque l'événement [`resourcetimingbufferfull`](/fr/docs/Web/API/Performance/resourcetimingbufferfull_event) est déclenché. Ce déclenchement a lieu lorsque le tampon de performance de synchronisation des ressources du navigateur est plein.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">
+```js
   callback = performance.onresourcetimingbufferfull = buffer_full_cb;
-</pre>
+```
 
-<h3 id="Return_Value">Valeur de retour</h3>
+### Valeur de retour
 
-<dl>
-  <dt><code>callback</code></dt>
-  <dd>Un {{event("Event_handlers", "event handler")}} qui est invoqué lorsque l'événement <a href="/fr/docs/Web/API/Performance/resourcetimingbufferfull_event"><code>resourcetimingbufferfull</code></a> est déclenché.</dd>
-</dl>
+- `callback`
+  - : Un {{event("Event_handlers", "event handler")}} qui est invoqué lorsque l'événement [`resourcetimingbufferfull`](/fr/docs/Web/API/Performance/resourcetimingbufferfull_event) est déclenché.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<p>L'exemple suivant définit une fonction de rappel sur la propriété <code>onresourcetimingbufferfull</code>.</p>
+L'exemple suivant définit une fonction de rappel sur la propriété `onresourcetimingbufferfull`.
 
-<pre class="brush: js">function buffer_full(event) {
+```js
+function buffer_full(event) {
   console.log("WARNING: Resource Timing Buffer is FULL!");
   performance.setResourceTimingBufferSize(200);
 }
@@ -40,39 +39,21 @@ function init() {
   // Définit un rappel si le tampon de ressources est rempli.
   performance.onresourcetimingbufferfull = buffer_full;
 }
-</pre>
+```
 
-<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('Resource Timing', '#dom-performance-onresourcetimingbufferfull',
-        'onresourcetimingbufferfull')}}</td>
-      <td>{{Spec2('Resource Timing')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                                                                                | Statut                               | Commentaire          |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- |
+| {{SpecName('Resource Timing', '#dom-performance-onresourcetimingbufferfull',
+        'onresourcetimingbufferfull')}} | {{Spec2('Resource Timing')}} | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Performance.onresourcetimingbufferfull")}}</p>
+{{Compat("api.Performance.onresourcetimingbufferfull")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>Événément <a href="/fr/docs/Web/API/Performance/resourcetimingbufferfull_event"><code>resourcetimingbufferfull</code></a></li>
-  <li>{{domxref("Performance.clearResourceTimings","Performance.clearResourceTimings()")}}
-  </li>
-  <li>
-    {{domxref("Performance.setResourceTimingBufferSize","Performance.setResourceTimingBufferSize()")}}
-  </li>
-</ul>
+- Événément [`resourcetimingbufferfull`](/fr/docs/Web/API/Performance/resourcetimingbufferfull_event)
+- {{domxref("Performance.clearResourceTimings","Performance.clearResourceTimings()")}}
+- {{domxref("Performance.setResourceTimingBufferSize","Performance.setResourceTimingBufferSize()")}}
diff --git a/files/fr/web/api/performance/resourcetimingbufferfull_event/index.md b/files/fr/web/api/performance/resourcetimingbufferfull_event/index.md
index d23ab10aaf..e8d0020053 100644
--- a/files/fr/web/api/performance/resourcetimingbufferfull_event/index.md
+++ b/files/fr/web/api/performance/resourcetimingbufferfull_event/index.md
@@ -11,36 +11,41 @@ tags:
   - onresourcetimingbufferfull
 translation_of: Web/API/Performance/resourcetimingbufferfull_event
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}
 
-<p>L'événement <code>resourcetimingbufferfull</code> se déclenche lorsque la mémoire <a href="/fr/docs/Web/API/Performance/setResourceTimingBufferSize">tampon de synchronisation des ressources</a> du navigateur est pleine.</p>
+L'événement `resourcetimingbufferfull` se déclenche lorsque la mémoire [tampon de synchronisation des ressources](/fr/docs/Web/API/Performance/setResourceTimingBufferSize) du navigateur est pleine.
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row">Propagation</th>
-   <td>Oui</td>
-  </tr>
-  <tr>
-   <th scope="row">Annulable</th>
-   <td>Oui</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface</th>
-   <td>{{domxref("Event")}}</td>
-  </tr>
-  <tr>
-   <th scope="row">Propriété pour le gestionnaire d'événements correspondant</th>
-   <td>{{domxref("Performance.onresourcetimingbufferfull", "onresourcetimingbufferfull")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Propagation</th>
+      <td>Oui</td>
+    </tr>
+    <tr>
+      <th scope="row">Annulable</th>
+      <td>Oui</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface</th>
+      <td>{{domxref("Event")}}</td>
+    </tr>
+    <tr>
+      <th scope="row">
+        Propriété pour le gestionnaire d'événements correspondant
+      </th>
+      <td>
+        {{domxref("Performance.onresourcetimingbufferfull", "onresourcetimingbufferfull")}}
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Examples">Exemples</h2>
+## Exemples
 
-<p>L'exemple suivant définit une fonction de rappel sur la propriété <code>onresourcetimingbufferfull</code>.</p>
+L'exemple suivant définit une fonction de rappel sur la propriété `onresourcetimingbufferfull`.
 
-<pre class="brush: js">function buffer_full(event) {
+```js
+function buffer_full(event) {
   console.log("AVERTISSEMENT : La mémoire tampon des ressources est COMPLÈTE !");
   performance.setResourceTimingBufferSize(200);
 }
@@ -48,39 +53,26 @@ function init() {
   // Définit un rappel si le tampon de ressources est rempli.
   performance.onresourcetimingbufferfull = buffer_full;
 }
-&lt;body onload="init()"&gt;</pre>
+<body onload="init()">
+```
 
-<p>Notez que vous pouvez également configurer le gestionnaire à l'aide de la fonction addEventListener() :</p>
+Notez que vous pouvez également configurer le gestionnaire à l'aide de la fonction addEventListener() :
 
-<pre class="brush: js">performance.addEventListener('resourcetimingbufferfull', buffer_full);
-</pre>
+```js
+performance.addEventListener('resourcetimingbufferfull', buffer_full);
+```
 
-<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('Resource Timing', '#dom-performance-onresourcetimingbufferfull', 'onresourcetimingbufferfull')}}</td>
-   <td>{{Spec2('Resource Timing')}}</td>
-   <td>Définition initialen.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                                    | Statut                               | Commentaire           |
+| ------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | --------------------- |
+| {{SpecName('Resource Timing', '#dom-performance-onresourcetimingbufferfull', 'onresourcetimingbufferfull')}} | {{Spec2('Resource Timing')}} | Définition initialen. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Performance.resourcetimingbufferfull_event")}}</p>
+{{Compat("api.Performance.resourcetimingbufferfull_event")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("Performance.clearResourceTimings","Performance.clearResourceTimings()")}}</li>
- <li>{{domxref("Performance.setResourceTimingBufferSize","Performance.setResourceTimingBufferSize()")}}</li>
-</ul>
+- {{domxref("Performance.clearResourceTimings","Performance.clearResourceTimings()")}}
+- {{domxref("Performance.setResourceTimingBufferSize","Performance.setResourceTimingBufferSize()")}}
diff --git a/files/fr/web/api/performance/setresourcetimingbuffersize/index.md b/files/fr/web/api/performance/setresourcetimingbuffersize/index.md
index ba6d23eebe..0b614c909e 100644
--- a/files/fr/web/api/performance/setresourcetimingbuffersize/index.md
+++ b/files/fr/web/api/performance/setresourcetimingbuffersize/index.md
@@ -2,41 +2,40 @@
 title: performance.setResourceTimingBufferSize()
 slug: Web/API/Performance/setResourceTimingBufferSize
 tags:
-- API
-- Method
-- Méthode
-- Reference
-- Performance web
+  - API
+  - Method
+  - Méthode
+  - Reference
+  - Performance web
 translation_of: Web/API/Performance/setResourceTimingBufferSize
 ---
-<div>{{APIRef("Resource Timing API")}}</div>
+{{APIRef("Resource Timing API")}}
 
-<p>La méthode <strong><code>setResourceTimingBufferSize()</code></strong> définit la taille du tampon mémoire du navigateur dans lequel sont stockés les objets de mesures de performance de type <code>"resource"</code> (voir {{domxref("PerformanceEntry.entryType", "entryType")}}).</p>
+La méthode **`setResourceTimingBufferSize()`** définit la taille du tampon mémoire du navigateur dans lequel sont stockés les objets de mesures de performance de type `"resource"` (voir {{domxref("PerformanceEntry.entryType", "entryType")}}).
 
-<p>La taille recommandée du tampon de synchronisation des ressources d'un navigateur est au moins 150 objets <code>{{domxref("PerformanceEntry")}}</code>.</p>
+La taille recommandée du tampon de synchronisation des ressources d'un navigateur est au moins 150 objets `{{domxref("PerformanceEntry")}}`.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">
-  <em>performance</em>.setResourceTimingBufferSize(maxSize);
-</pre>
+```js
+  performance.setResourceTimingBufferSize(maxSize);
+```
 
-<h3 id="Arguments">Arguments</h3>
+### Arguments
 
-<dl>
-  <dt><code>maxSize</code></dt>
-  <dd>Un nombre (cf. {{jsxref("Number")}}) représentant le nombre maximal d'objets {{domxref("PerformanceEntry", "d'entrée de performance","",1)}} avec le type <code>"resource"</code> que le navigateur doit contenir dans le tampon correspondant.</dd>
-</dl>
+- `maxSize`
+  - : Un nombre (cf. {{jsxref("Number")}}) représentant le nombre maximal d'objets {{domxref("PerformanceEntry", "d'entrée de performance","",1)}} avec le type `"resource"` que le navigateur doit contenir dans le tampon correspondant.
 
-<h3 id="Return_Value">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Aucune.</p>
+Aucune.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">function setResourceTimingBufferSize(maxSize) {
+```js
+function setResourceTimingBufferSize(maxSize) {
   if (performance === undefined) {
     log("Le navigateur ne prend pas en charge les performances Web");
     return;
@@ -49,28 +48,15 @@ translation_of: Web/API/Performance/setResourceTimingBufferSize
     log("... Performance.setResourceTimingBufferSize() = NON pris en charge");
   }
 }
-</pre>
+```
 
-<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('Resource Timing', '#dom-performance-setresourcetimingbuffersize',
-        'setResourceTimingBufferSize()')}}</td>
-      <td>{{Spec2('Resource Timing')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                                                                                    | Statut                               | Commentaire          |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName('Resource Timing', '#dom-performance-setresourcetimingbuffersize',
+        'setResourceTimingBufferSize()')}} | {{Spec2('Resource Timing')}} | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Performance.setResourceTimingBufferSize")}}</p>
+{{Compat("api.Performance.setResourceTimingBufferSize")}}
diff --git a/files/fr/web/api/performance/timeorigin/index.md b/files/fr/web/api/performance/timeorigin/index.md
index 014045da71..da7458aa3d 100644
--- a/files/fr/web/api/performance/timeorigin/index.md
+++ b/files/fr/web/api/performance/timeorigin/index.md
@@ -12,39 +12,28 @@ tags:
   - timeOrigin
 translation_of: Web/API/Performance/getEntriesByName
 ---
-<p>{{SeeCompatTable}}{{APIRef("High Resolution Time")}}</p>
+{{SeeCompatTable}}{{APIRef("High Resolution Time")}}
 
-<p>La propriété en lecture seule <strong><code>timeOrigin</code></strong> de l'interface {{domxref("Performance")}} renvoie l'horodatage haute résolution de l'heure de début de la mesure de performance.</p>
+La propriété en lecture seule **`timeOrigin`** de l'interface {{domxref("Performance")}} renvoie l'horodatage haute résolution de l'heure de début de la mesure de performance.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">
+```js
   var timeOrigin = performance.timeOrigin
-</pre>
+```
 
-<h3 id="Value">Valeur</h3>
+### Valeur
 
-<p>Un horodatage haute résolution (voir le type <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a>).</p>
+Un horodatage haute résolution (voir le type [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp)).
 
-<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('Highres Time Level 2','#timeorigin-attribute','timeOrigin')}}</td>
-      <td>{{Spec2('Highres Time Level 2')}}</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                    | Statut                                       |
+| ------------------------------------------------------------------------------------------------ | -------------------------------------------- |
+| {{SpecName('Highres Time Level 2','#timeorigin-attribute','timeOrigin')}} | {{Spec2('Highres Time Level 2')}} |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Performance.timeOrigin")}}</p>
+{{Compat("api.Performance.timeOrigin")}}
diff --git a/files/fr/web/api/performance/timing/index.md b/files/fr/web/api/performance/timing/index.md
index 583aecd811..2b305436e6 100644
--- a/files/fr/web/api/performance/timing/index.md
+++ b/files/fr/web/api/performance/timing/index.md
@@ -14,47 +14,30 @@ tags:
   - Reference
 translation_of: Web/API/Performance/timing
 ---
-<p>{{deprecated_header}}{{APIRef("Navigation Timing")}}</p>
+{{deprecated_header}}{{APIRef("Navigation Timing")}}
 
-<div class="warning">
-  <p><strong>Attention :</strong> Cette propriété est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2</a>. Veuillez utiliser l'interface {{domxref("PerformanceNavigationTiming")}} à la place.</p>
-</div>
+> **Attention :** Cette propriété est dépréciée dans la spécification [Navigation Timing Level 2](https://w3c.github.io/navigation-timing/#obsolete). Veuillez utiliser l'interface {{domxref("PerformanceNavigationTiming")}} à la place.
 
-<p>L'ancienne propriété <strong><code>Performance.timing</code></strong> renvoie un objet {{domxref("PerformanceTiming")}}  en lecture seule contenant des informations de performance liées à la latence.</p>
+L'ancienne propriété **`Performance.timing`** renvoie un objet {{domxref("PerformanceTiming")}} en lecture seule contenant des informations de performance liées à la latence.
 
 {{warning("Cette propriété n'est pas disponible dans les Web Workers.")}}
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">
-  <var>timingInfo</var> = performance.timing;
-</pre>
+```js
+  timingInfo = performance.timing;
+```
 
-<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('Navigation Timing Level 2', '#obsolete')}}</td>
-      <td>{{Spec2('Navigation Timing Level 2')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                            | Statut                                               | Commentaire          |
+| ------------------------------------------------------------------------ | ---------------------------------------------------- | -------------------- |
+| {{SpecName('Navigation Timing Level 2', '#obsolete')}} | {{Spec2('Navigation Timing Level 2')}} | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Performance.timing")}}</p>
+{{Compat("api.Performance.timing")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>L'interface {{domxref("Performance")}} à laquelle il appartient.</li>
-</ul>
+- L'interface {{domxref("Performance")}} à laquelle il appartient.
diff --git a/files/fr/web/api/performance/tojson/index.md b/files/fr/web/api/performance/tojson/index.md
index 3136d2d867..1027c9cbe0 100644
--- a/files/fr/web/api/performance/tojson/index.md
+++ b/files/fr/web/api/performance/tojson/index.md
@@ -9,56 +9,42 @@ tags:
   - Référence
 translation_of: Web/API/Performance/toJSON
 ---
-<div>{{APIRef("High Resolution Timing")}}</div>
+{{APIRef("High Resolution Timing")}}
 
-<p>La méthode <strong><code>toJSON()</code></strong> de l'interface {{domxref("Performance")}} est un sérialiseur standard : elle renvoie une représentation JSON des propriétés de l'objet performance.</p>
+La méthode **`toJSON()`** de l'interface {{domxref("Performance")}} est un sérialiseur standard : elle renvoie une représentation JSON des propriétés de l'objet performance.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">
+```js
   myPerf = performance.toJSON()
-</pre>
+```
 
-<h3 id="Arguments">Arguments</h3>
+### Arguments
 
-<p>Aucun</p>
+Aucun
 
-<h3 id="Return_value">Valeur de retour</h3>
+### Valeur de retour
 
-<dl>
-  <dt><code>myPerf</code></dt>
-  <dd>Un objet JSON qui est la sérialisation de l'objet {{domxref("Performance")}}.</dd>
-</dl>
+- `myPerf`
+  - : Un objet JSON qui est la sérialisation de l'objet {{domxref("Performance")}}.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">var js;
+```js
+var js;
 js = window.performance.toJSON();
 console.log("json = " + JSON.stringify(js));
-</pre>
+```
 
-<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('Highres Time Level 2', '#dom-performance-tojson', 'toJSON()
-        serializer')}}</td>
-      <td>{{Spec2('Highres Time Level 2')}}</td>
-      <td>Définition de <code>toJson()</code>.</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                                                | Statut                                       | Commentaire               |
+| ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | ------------------------- |
+| {{SpecName('Highres Time Level 2', '#dom-performance-tojson', 'toJSON()
+        serializer')}} | {{Spec2('Highres Time Level 2')}} | Définition de `toJson()`. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Performance.toJSON")}}</p>
+{{Compat("api.Performance.toJSON")}}
diff --git a/files/fr/web/api/performance_api/index.md b/files/fr/web/api/performance_api/index.md
index 261219a03b..edce41a332 100644
--- a/files/fr/web/api/performance_api/index.md
+++ b/files/fr/web/api/performance_api/index.md
@@ -9,141 +9,76 @@ tags:
   - Performance Web
 translation_of: Web/API/Performance_API
 ---
-<div>{{DefaultAPISidebar("High Resolution Time")}}</div>
-
-<p>La norme <a href="https://www.w3.org/TR/hr-time/">High Resolution Time</a> définit l'interface <a href="/fr/docs/Web/API/Performance"><code>Performance</code></a> qui prend en charge les mesures de latence côté client au sein des applications. Les interfaces <a href="/fr/docs/Web/API/Performance"><code>Performance</code></a> sont considérées comme étant à <em>haute résolution</em>, car elles sont précises au millième de milliseconde (sous réserve de contraintes matérielles ou logicielles).</p>
-
-<p>Les interfaces prennent en charge un certain nombre de cas d'utilisation, notamment le calcul des taux de trame (potentiellement important dans les animations) et l'évaluation comparative (comme le temps de chargement d'une ressource).</p>
-
-<p>Comme l'<em>horloge système</em> d'une plateforme est sujette à divers <em>décalages</em> (comme les ajustements NTP), les interfaces prennent en charge une <em>horloge monotone</em>, c'est-à-dire une horloge toujours croissante. À ce titre, l'API <a href="/fr/docs/Web/API/Performance"><code>Performance</code></a> définit un type <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> plutôt que d'utiliser l'interface {{jsxref("Date.now", "Date.now()")}}.</p>
-
-<h2 id="DOMHighResTimeStamp">DOMHighResTimeStamp</h2>
-
-<p>Le type <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a>, comme son nom l'indique, représente un point temporel de haute résolution. Ce type est un <code>double</code> et est utilisé par les interfaces de performance. La valeur peut être un point discret dans le temps ou la différence de temps entre deux points discrets dans le temps.</p>
-
-<p>L'unité de <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> est la milliseconde et doit être précise à 5 µs (microsecondes). Toutefois, si le navigateur n'est pas en mesure de fournir une valeur temporelle précise à 5 microsecondes (en raison, par exemple, de contraintes matérielles ou logicielles), le navigateur peut représenter la valeur comme un temps en millisecondes précis à la milliseconde près.</p>
-
-<h2 id="Methods">Méthodes</h2>
-
-<p>L'interface <a href="/fr/docs/Web/API/Performance"><code>Performance</code></a> possède deux méthodes. La méthode <a href="/fr/docs/Web/API/Performance/now"><code>now()</code></a> renvoie un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> dont la valeur dépend de <a href="/fr/docs/Web/API/PerformanceTiming/navigationStart"><code>navigationStart</code></a> et du contexte. Si le contexte est une fenêtre, la valeur est l'heure de création du contexte du navigateur et si le contexte est un <a href="/fr/docs/Web/API/Worker"><code>Worker</code></a>, la valeur est l'heure de création du worker.</p>
-
-<p>La méthode <a href="/fr/docs/Web/API/Performance/toJSON"><code>toJSON()</code></a> renvoie une sérialisation de l'objet <a href="/fr/docs/Web/API/Performance"><code>Performance</code></a>, pour les attributs qui peuvent être sérialisés.</p>
-
-<h2 id="Properties">Propriétés</h2>
-
-<p>L'interface <a href="/fr/docs/Web/API/Performance"><code>Performance</code></a> possède deux propriétés. La propriété <a href="/fr/docs/Web/API/Performance/timing"><code>timing</code></a> {{deprecated_inline}} renvoie un objet <a href="/fr/docs/Web/API/PerformanceTiming"><code>PerformanceTiming</code></a> contenant des informations de performance liées à la latence, telles que l'heure de début de navigation, les heures de début et de fin des redirections, les heures de début et de fin des réponses, etc.</p>
-
-<p>La propriété <a href="/fr/docs/Web/API/Performance/navigation"><code>navigation</code></a> {{deprecated_inline}} renvoie un objet <a href="/fr/docs/Web/API/PerformanceNavigation"><code>PerformanceNavigation</code></a> représentant le type de navigation qui se produit dans le contexte de navigation donné, comme la page vers laquelle on a navigué depuis l'historique, la page vers laquelle on a navigué en suivant un lien, etc.</p>
-
-<h2 id="Interfaces">Interfaces</h2>
-
-<dl>
-  <dt><a href="/fr/docs/Web/API/Performance"><code>Performance</code></a></dt>
-  <dd>Fournit des méthodes et des propriétés contenant des informations sur les performances liées au temps pour la page donnée.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceEntry"><code>PerformanceEntry</code></a></dt>
-  <dd>Fournit des méthodes et des propriétés pour encapsuler une seule mesure de performance qui fait partie de la chronologie des performances.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceFrameTiming"><code>PerformanceFrameTiming</code></a></dt>
-  <dd>Fournit des méthodes et des propriétés contenant des données de synchronisation de trame sur la boucle d'événements du navigateur.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceMark"><code>PerformanceMark</code></a></dt>
-  <dd>Une interface abstraite pour les <a href="/fr/docs/Web/API/PerformanceEntry">entrées de performance</a> avec un <a href="/fr/docs/Web/API/PerformanceEntry/entryType">type d'entrée</a> de « <code>mark</code> ». Les entrées de ce type sont créées en appelant <a href="/fr/docs/Web/API/Performance/mark"><code>performance.mark()</code></a> pour ajouter un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> (un marqueur) à la chronologie des performances du navigateur.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceMeasure"><code>PerformanceMeasure</code></a></dt>
-  <dd>Une interface abstraite pour les <a href="/fr/docs/Web/API/PerformanceEntry">entrées de performance</a> avec un <a href="/fr/docs/Web/API/PerformanceEntry/entryType">type d'entrée</a> de « <code>measure</code> ». Les entrées de ce type sont créées en appelant <a href="/fr/docs/Web/API/Performance/measure"><code>performance.measure()</code></a> pour ajouter un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> (une mesure) entre deux marqueurs à la chronologie des performances du navigateur.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a></dt>
-  <dd>Fournit des méthodes et des propriétés pour stocker et récupérer <a href="/fr/docs/Web/API/DOMHighResTimeStamp">les horodatages haute résolution</a> ou des métriques concernant les événements de navigation de document du navigateur.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a></dt>
-  <dd>Fournit des méthodes et des propriétés utilisées pour observer les événements de mesure des performances et être informé des nouvelles <a href="/fr/docs/Web/API/PerformanceEntry">entrées de performance</a> lorsqu'elles sont enregistrées dans la chronologie des performances du navigateur.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceResourceTiming"><code>PerformanceResourceTiming</code></a></dt>
-  <dd>Fournit des méthodes et des propriétés permettant de récupérer et d'analyser des données détaillées de synchronisation du réseau concernant le chargement des ressources d'une application.</dd>
-</dl>
-
-<h2 id="Specifications">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('Highres Time')}}</td>
-      <td>{{Spec2('Highres Time')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-    <tr>
-      <td>{{SpecName('Highres Time Level 2')}}</td>
-      <td>{{Spec2('Highres Time Level 2')}}</td>
-      <td>Ajout de l'attribut <code>performance</code> sur <code>Window</code> et <code>WorkerGlobalScope</code>.</td>
-    </tr>
-    <tr>
-      <td>{{SpecName('Highres Time Level 3')}}</td>
-      <td>{{Spec2('Highres Time Level 3')}}</td>
-      <td>Ajout de la propriété <code>timeOrigin</code> à l'interface <code>Performance</code>.</td>
-    </tr>
-    <tr>
-      <td>{{SpecName('Frame Timing')}}</td>
-      <td>{{Spec2('Frame Timing')}}</td>
-      <td>Ajout de l'interface <code>PerformanceFrameTiming</code>.</td>
-    </tr>
-    <tr>
-      <td>{{SpecName('Navigation Timing')}}</td>
-      <td>{{Spec2('Navigation Timing')}}</td>
-      <td>Ajout des interfaces <code>PerformanceTiming</code> et <code>PerformanceNavigation</code>. Ajout des propriétés <code>timing</code> et <code>navigation</code> à l'interface <code>Performance</code>.</td>
-    </tr>
-    <tr>
-      <td>{{SpecName('Navigation Timing Level 2')}}</td>
-      <td>{{Spec2('Navigation Timing Level 2')}}</td>
-      <td>Ajout de l'interface <code>PerformanceNavigationTiming</code>. Rend obsolète l'interface <code>PerformanceTiming</code>, l'interface <code>PerformanceNavigation</code>, ainsi que les propriétés <code>timing</code> et <code>navigation</code> à l'interface <code>Performance</code>.</td>
-    </tr>
-    <tr>
-      <td>{{SpecName('Performance Timeline')}}</td>
-      <td>{{Spec2('Performance Timeline')}}</td>
-      <td>Ajout de l'interface <code>PerformanceEntry</code>, du type <code>PerformanceEntryList</code>, ainsi que les méthodes <code>getEntries()</code>, <code>getEntriesByType()</code>, et <code>getEntriesByName()</code> sur l'interface <code>Performance</code>.</td>
-    </tr>
-    <tr>
-      <td>{{SpecName('Performance Timeline Level 2')}}</td>
-      <td>{{Spec2('Performance Timeline Level 2')}}</td>
-      <td>Ajout d'un sérialiseur à l'interface <code>PerformanceEntry</code> ainsi que l'ajout de l'interface <code>PerformanceObserver</code> et du rappel (« callback »).</td>
-    </tr>
-    <tr>
-      <td>{{SpecName('Resource Timing')}}</td>
-      <td>{{Spec2('Resource Timing')}}</td>
-      <td>Ajout de l'interface <code>PerformanceResourceTiming</code>. Ajout de la méthode <code>clearResourceTiming()</code>, la méthode <code>setResourceTimingBufferSize()</code> et du gestionnaire d'événements <code>onresourcetimingbufferfull</code> à l'interface <code>Performance</code>. Ajout de l'en-tête de réponse <code>Timing-Allow-Origin</code>.</td>
-    </tr>
-    <tr>
-      <td>{{SpecName('Resource Timing 2')}}</td>
-      <td>{{Spec2('Resource Timing 2')}}</td>
-      <td>Ajout des propriétés <code>nextHopProtocol</code>, <code>workerStart</code>, <code>transferSize</code>, <code>encodedBodySize</code> et <code>decodedBodySize</code> à l'interface <code>PerformanceResourceTiming</code>.</td>
-    </tr>
-    <tr>
-      <td>{{SpecName('Resource Timing 3')}}</td>
-      <td>{{Spec2('Resource Timing 3')}}</td>
-      <td></td>
-    </tr>
-    <tr>
-      <td>{{SpecName('User Timing')}}</td>
-      <td>{{Spec2('User Timing')}}</td>
-      <td>Ajout des méthodes <code>mark()</code>, <code>clearMarks()</code>, <code>measure()</code> et <code>clearMeasures()</code> à l'interface <code>Performance</code>. Ajout des interfaces <code>PerformanceMark</code> et <code>PeformanceMeasure</code>.</td>
-    </tr>
-    <tr>
-      <td>{{SpecName('User Timing Level 2')}}</td>
-      <td>{{Spec2('User Timing Level 2')}}</td>
-      <td></td>
-    </tr>
-  </tbody>
-</table>
-
-<h2 id="Implementation_status">État de l'implémentation'</h2>
-
-<p>Comme le montre le tableau <a href="/fr/docs/Web/API/Performance#browser_compatibility">Compatibilité des navigateurs</a> de l'interface <a href="/fr/docs/Web/API/Performance"><code>Performance</code></a>, la plupart de ces interfaces sont largement implémentées par les navigateurs de bureau.</p>
-
-<p>Pour tester le support de votre navigateur pour l'interface <a href="/fr/docs/Web/API/Performance"><code>Performance</code></a>, exécutez l'application <code><a href="https://mdn.github.io/web-performance/perf-api-support.html">perf-api-support</a></code>.</p>
-
-<h2 id="See_also">Voir aussi</h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/API/Performance_API/Using_the_Performance_API">Utilisation de l'API <code>Performance</code></a></li>
-  <li><a href="https://w3c.github.io/perf-timing-primer/">Une introduction aux API de chronométrage des performances du Web</a></li>
-</ul>
+{{DefaultAPISidebar("High Resolution Time")}}
+
+La norme [High Resolution Time](https://www.w3.org/TR/hr-time/) définit l'interface [`Performance`](/fr/docs/Web/API/Performance) qui prend en charge les mesures de latence côté client au sein des applications. Les interfaces [`Performance`](/fr/docs/Web/API/Performance) sont considérées comme étant à _haute résolution_, car elles sont précises au millième de milliseconde (sous réserve de contraintes matérielles ou logicielles).
+
+Les interfaces prennent en charge un certain nombre de cas d'utilisation, notamment le calcul des taux de trame (potentiellement important dans les animations) et l'évaluation comparative (comme le temps de chargement d'une ressource).
+
+Comme l'_horloge système_ d'une plateforme est sujette à divers _décalages_ (comme les ajustements NTP), les interfaces prennent en charge une _horloge monotone_, c'est-à-dire une horloge toujours croissante. À ce titre, l'API [`Performance`](/fr/docs/Web/API/Performance) définit un type [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp) plutôt que d'utiliser l'interface {{jsxref("Date.now", "Date.now()")}}.
+
+## DOMHighResTimeStamp
+
+Le type [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp), comme son nom l'indique, représente un point temporel de haute résolution. Ce type est un `double` et est utilisé par les interfaces de performance. La valeur peut être un point discret dans le temps ou la différence de temps entre deux points discrets dans le temps.
+
+L'unité de [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp) est la milliseconde et doit être précise à 5 µs (microsecondes). Toutefois, si le navigateur n'est pas en mesure de fournir une valeur temporelle précise à 5 microsecondes (en raison, par exemple, de contraintes matérielles ou logicielles), le navigateur peut représenter la valeur comme un temps en millisecondes précis à la milliseconde près.
+
+## Méthodes
+
+L'interface [`Performance`](/fr/docs/Web/API/Performance) possède deux méthodes. La méthode [`now()`](/fr/docs/Web/API/Performance/now) renvoie un [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp) dont la valeur dépend de [`navigationStart`](/fr/docs/Web/API/PerformanceTiming/navigationStart) et du contexte. Si le contexte est une fenêtre, la valeur est l'heure de création du contexte du navigateur et si le contexte est un [`Worker`](/fr/docs/Web/API/Worker), la valeur est l'heure de création du worker.
+
+La méthode [`toJSON()`](/fr/docs/Web/API/Performance/toJSON) renvoie une sérialisation de l'objet [`Performance`](/fr/docs/Web/API/Performance), pour les attributs qui peuvent être sérialisés.
+
+## Propriétés
+
+L'interface [`Performance`](/fr/docs/Web/API/Performance) possède deux propriétés. La propriété [`timing`](/fr/docs/Web/API/Performance/timing) {{deprecated_inline}} renvoie un objet [`PerformanceTiming`](/fr/docs/Web/API/PerformanceTiming) contenant des informations de performance liées à la latence, telles que l'heure de début de navigation, les heures de début et de fin des redirections, les heures de début et de fin des réponses, etc.
+
+La propriété [`navigation`](/fr/docs/Web/API/Performance/navigation) {{deprecated_inline}} renvoie un objet [`PerformanceNavigation`](/fr/docs/Web/API/PerformanceNavigation) représentant le type de navigation qui se produit dans le contexte de navigation donné, comme la page vers laquelle on a navigué depuis l'historique, la page vers laquelle on a navigué en suivant un lien, etc.
+
+## Interfaces
+
+- [`Performance`](/fr/docs/Web/API/Performance)
+  - : Fournit des méthodes et des propriétés contenant des informations sur les performances liées au temps pour la page donnée.
+- [`PerformanceEntry`](/fr/docs/Web/API/PerformanceEntry)
+  - : Fournit des méthodes et des propriétés pour encapsuler une seule mesure de performance qui fait partie de la chronologie des performances.
+- [`PerformanceFrameTiming`](/fr/docs/Web/API/PerformanceFrameTiming)
+  - : Fournit des méthodes et des propriétés contenant des données de synchronisation de trame sur la boucle d'événements du navigateur.
+- [`PerformanceMark`](/fr/docs/Web/API/PerformanceMark)
+  - : Une interface abstraite pour les [entrées de performance](/fr/docs/Web/API/PerformanceEntry) avec un [type d'entrée](/fr/docs/Web/API/PerformanceEntry/entryType) de « `mark` ». Les entrées de ce type sont créées en appelant [`performance.mark()`](/fr/docs/Web/API/Performance/mark) pour ajouter un [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp) (un marqueur) à la chronologie des performances du navigateur.
+- [`PerformanceMeasure`](/fr/docs/Web/API/PerformanceMeasure)
+  - : Une interface abstraite pour les [entrées de performance](/fr/docs/Web/API/PerformanceEntry) avec un [type d'entrée](/fr/docs/Web/API/PerformanceEntry/entryType) de « `measure` ». Les entrées de ce type sont créées en appelant [`performance.measure()`](/fr/docs/Web/API/Performance/measure) pour ajouter un [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp) (une mesure) entre deux marqueurs à la chronologie des performances du navigateur.
+- [`PerformanceNavigationTiming`](/fr/docs/Web/API/PerformanceNavigationTiming)
+  - : Fournit des méthodes et des propriétés pour stocker et récupérer [les horodatages haute résolution](/fr/docs/Web/API/DOMHighResTimeStamp) ou des métriques concernant les événements de navigation de document du navigateur.
+- [`PerformanceObserver`](/fr/docs/Web/API/PerformanceObserver)
+  - : Fournit des méthodes et des propriétés utilisées pour observer les événements de mesure des performances et être informé des nouvelles [entrées de performance](/fr/docs/Web/API/PerformanceEntry) lorsqu'elles sont enregistrées dans la chronologie des performances du navigateur.
+- [`PerformanceResourceTiming`](/fr/docs/Web/API/PerformanceResourceTiming)
+  - : Fournit des méthodes et des propriétés permettant de récupérer et d'analyser des données détaillées de synchronisation du réseau concernant le chargement des ressources d'une application.
+
+## Spécifications
+
+| Spécification                                                | Statut                                                   | Commentaire                                                                                                                                                                                                                                                                              |
+| ------------------------------------------------------------ | -------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('Highres Time')}}                         | {{Spec2('Highres Time')}}                         | Définition initiale.                                                                                                                                                                                                                                                                     |
+| {{SpecName('Highres Time Level 2')}}             | {{Spec2('Highres Time Level 2')}}             | Ajout de l'attribut `performance` sur `Window` et `WorkerGlobalScope`.                                                                                                                                                                                                                   |
+| {{SpecName('Highres Time Level 3')}}             | {{Spec2('Highres Time Level 3')}}             | Ajout de la propriété `timeOrigin` à l'interface `Performance`.                                                                                                                                                                                                                          |
+| {{SpecName('Frame Timing')}}                         | {{Spec2('Frame Timing')}}                         | Ajout de l'interface `PerformanceFrameTiming`.                                                                                                                                                                                                                                           |
+| {{SpecName('Navigation Timing')}}                 | {{Spec2('Navigation Timing')}}                 | Ajout des interfaces `PerformanceTiming` et `PerformanceNavigation`. Ajout des propriétés `timing` et `navigation` à l'interface `Performance`.                                                                                                                                          |
+| {{SpecName('Navigation Timing Level 2')}}     | {{Spec2('Navigation Timing Level 2')}}     | Ajout de l'interface `PerformanceNavigationTiming`. Rend obsolète l'interface `PerformanceTiming`, l'interface `PerformanceNavigation`, ainsi que les propriétés `timing` et `navigation` à l'interface `Performance`.                                                                   |
+| {{SpecName('Performance Timeline')}}             | {{Spec2('Performance Timeline')}}             | Ajout de l'interface `PerformanceEntry`, du type `PerformanceEntryList`, ainsi que les méthodes `getEntries()`, `getEntriesByType()`, et `getEntriesByName()` sur l'interface `Performance`.                                                                                             |
+| {{SpecName('Performance Timeline Level 2')}} | {{Spec2('Performance Timeline Level 2')}} | Ajout d'un sérialiseur à l'interface `PerformanceEntry` ainsi que l'ajout de l'interface `PerformanceObserver` et du rappel (« callback »).                                                                                                                                              |
+| {{SpecName('Resource Timing')}}                     | {{Spec2('Resource Timing')}}                     | Ajout de l'interface `PerformanceResourceTiming`. Ajout de la méthode `clearResourceTiming()`, la méthode `setResourceTimingBufferSize()` et du gestionnaire d'événements `onresourcetimingbufferfull` à l'interface `Performance`. Ajout de l'en-tête de réponse `Timing-Allow-Origin`. |
+| {{SpecName('Resource Timing 2')}}                 | {{Spec2('Resource Timing 2')}}                 | Ajout des propriétés `nextHopProtocol`, `workerStart`, `transferSize`, `encodedBodySize` et `decodedBodySize` à l'interface `PerformanceResourceTiming`.                                                                                                                                 |
+| {{SpecName('Resource Timing 3')}}                 | {{Spec2('Resource Timing 3')}}                 |                                                                                                                                                                                                                                                                                          |
+| {{SpecName('User Timing')}}                         | {{Spec2('User Timing')}}                         | Ajout des méthodes `mark()`, `clearMarks()`, `measure()` et `clearMeasures()` à l'interface `Performance`. Ajout des interfaces `PerformanceMark` et `PeformanceMeasure`.                                                                                                                |
+| {{SpecName('User Timing Level 2')}}             | {{Spec2('User Timing Level 2')}}             |                                                                                                                                                                                                                                                                                          |
+
+## État de l'implémentation'
+
+Comme le montre le tableau [Compatibilité des navigateurs](/fr/docs/Web/API/Performance#browser_compatibility) de l'interface [`Performance`](/fr/docs/Web/API/Performance), la plupart de ces interfaces sont largement implémentées par les navigateurs de bureau.
+
+Pour tester le support de votre navigateur pour l'interface [`Performance`](/fr/docs/Web/API/Performance), exécutez l'application [`perf-api-support`](https://mdn.github.io/web-performance/perf-api-support.html).
+
+## Voir aussi
+
+- [Utilisation de l'API `Performance`](/fr/docs/Web/API/Performance_API/Using_the_Performance_API)
+- [Une introduction aux API de chronométrage des performances du Web](https://w3c.github.io/perf-timing-primer/)
diff --git a/files/fr/web/api/performance_api/using_the_performance_api/index.md b/files/fr/web/api/performance_api/using_the_performance_api/index.md
index 19924b66cc..d35c9d351b 100644
--- a/files/fr/web/api/performance_api/using_the_performance_api/index.md
+++ b/files/fr/web/api/performance_api/using_the_performance_api/index.md
@@ -9,21 +9,21 @@ tags:
   - Performance Web
 translation_of: Web/API/Performance_API/Using_the_Performance_API
 ---
-<div>{{DefaultAPISidebar("High Resolution Time")}}</div>
+{{DefaultAPISidebar("High Resolution Time")}}
 
-<p>Une exigence fondamentale de la performance web est une définition précise et cohérente du <em>temps.</em> Le type <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> (un <code>double</code>) est utilisé par toutes les interfaces de performance pour contenir de telles valeurs de temps.</p>
+Une exigence fondamentale de la performance web est une définition précise et cohérente du _temps._ Le type [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp) (un `double`) est utilisé par toutes les interfaces de performance pour contenir de telles valeurs de temps.
 
-<p>En outre, il doit y avoir un moyen de créer une <em>empreinte temporelle</em> pour un point spécifique dans le temps ; ceci est fait avec la méthode <a href="/fr/docs/Web/API/Performance/now"><code>now()</code></a>.</p>
+En outre, il doit y avoir un moyen de créer une _empreinte temporelle_ pour un point spécifique dans le temps ; ceci est fait avec la méthode [`now()`](/fr/docs/Web/API/Performance/now).
 
-<p>Les interfaces de performance web sont définies dans un <a href="https://www.w3.org/wiki/Web_Performance/Publications">ensemble de normes</a>. L'interface <em>de base</em> de ces normes est l'interface <a href="/fr/docs/Web/API/Performance"><code>Performance</code></a> et ses méthodes et propriétés sont étendues par différentes normes. Ce guide décrit comment utiliser les interfaces <a href="/fr/docs/Web/API/Performance"><code>Performance</code></a> qui sont définies dans la norme <a href="https://w3c.github.io/hr-time/">High-Resolution Time</a>. D'autres guides sur les performances web (répertoriés dans la section <a href="#see_also">Voir aussi</a>) décrivent comment utiliser des méthodes et propriétés supplémentaires de l'interface <a href="/fr/docs/Web/API/Performance"><code>Performance</code></a>.</p>
+Les interfaces de performance web sont définies dans un [ensemble de normes](https://www.w3.org/wiki/Web_Performance/Publications). L'interface _de base_ de ces normes est l'interface [`Performance`](/fr/docs/Web/API/Performance) et ses méthodes et propriétés sont étendues par différentes normes. Ce guide décrit comment utiliser les interfaces [`Performance`](/fr/docs/Web/API/Performance) qui sont définies dans la norme [High-Resolution Time](https://w3c.github.io/hr-time/). D'autres guides sur les performances web (répertoriés dans la section [Voir aussi](#see_also)) décrivent comment utiliser des méthodes et propriétés supplémentaires de l'interface [`Performance`](/fr/docs/Web/API/Performance).
 
-<h2 id="High_precision_timing">Chronométrage de haute précision</h2>
+## Chronométrage de haute précision
 
-<p><em>Le chronométrage de haute précision</em> est obtenu en utilisant le type <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> pour les valeurs de temps. L'unité est la milliseconde et doit être précise à 5 µs (microsecondes). Toutefois, si le navigateur n'est pas en mesure de fournir une valeur temporelle précise à 5 microsecondes (en raison de contraintes matérielles ou logicielles, par exemple), il peut représenter la valeur comme un temps en millisecondes précis à la milliseconde près.</p>
+_Le chronométrage de haute précision_ est obtenu en utilisant le type [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp) pour les valeurs de temps. L'unité est la milliseconde et doit être précise à 5 µs (microsecondes). Toutefois, si le navigateur n'est pas en mesure de fournir une valeur temporelle précise à 5 microsecondes (en raison de contraintes matérielles ou logicielles, par exemple), il peut représenter la valeur comme un temps en millisecondes précis à la milliseconde près.
 
-<p>L'exemple de code suivant montre l'utilisation de <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> et de la méthode <a href="/fr/docs/Web/API/Performance/now"><code>Performance.now()</code></a>. La méthode <a href="/fr/docs/Web/API/Performance/now"><code>now()</code></a> renvoie un <em>timestamp</em> (de type <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a>) qui est un point discret dans le temps. En appelant cette méthode avant et après une tâche, il est possible de mesurer le temps nécessaire à l'exécution de la tâche.</p>
+L'exemple de code suivant montre l'utilisation de [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp) et de la méthode [`Performance.now()`](/fr/docs/Web/API/Performance/now). La méthode [`now()`](/fr/docs/Web/API/Performance/now) renvoie un _timestamp_ (de type [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp)) qui est un point discret dans le temps. En appelant cette méthode avant et après une tâche, il est possible de mesurer le temps nécessaire à l'exécution de la tâche.
 
-<pre class="brush: js">
+```js
 function calculate_time() {
   let startTime;
   let endTime;
@@ -34,76 +34,57 @@ function calculate_time() {
 
   return (endTime - startTime);
 }
-</pre>
+```
 
-<h2 id="Serializing_the_Performance_object">Sérialisation de l'objet <code>Performance</code></h2>
+## Sérialisation de l'objet `Performance`
 
-<p>La sérialisation JSON de l'objet <a href="/fr/docs/Web/API/Performance"><code>Performance</code></a> est effectuée via la méthode <a href="/fr/docs/Web/API/Performance/toJSON"><code>toJSON()</code></a>. Dans l'exemple suivant, la sérialisation JSON des objets <a href="/fr/docs/Web/API/Performance"><code>Performance</code></a>, <a href="/fr/docs/Web/API/Performance/timing"><code>Performance.timing</code></a> {{deprecated_inline}} et <a href="/fr/docs/Web/API/Performance/navigation"><code>Performance.navigation</code></a> {{deprecated_inline}} est imprimée dans l'élément <code>object</code>.</p>
+La sérialisation JSON de l'objet [`Performance`](/fr/docs/Web/API/Performance) est effectuée via la méthode [`toJSON()`](/fr/docs/Web/API/Performance/toJSON). Dans l'exemple suivant, la sérialisation JSON des objets [`Performance`](/fr/docs/Web/API/Performance), [`Performance.timing`](/fr/docs/Web/API/Performance/timing) {{deprecated_inline}} et [`Performance.navigation`](/fr/docs/Web/API/Performance/navigation) {{deprecated_inline}} est imprimée dans l'élément `object`.
 
-<pre class="brush: js">
+```js
 function print_json() {
   let json;
   let o = document.getElementsByTagName("output")[0];
 
   if (window.performance.toJSON === undefined) {
     json = "window.performance.toJSON() n'est PAS pris en charge";
-    o.innerHTML += json + "&lt;br&gt;";
+    o.innerHTML += json + "<br>";
   } else {
     let s;
     json = window.performance.toJSON();
 
     // Imprimer l'objet de performance
     s = JSON.stringify(json);
-    o.innerHTML = "&lt;p&gt;performance = " + s + "&lt;/p&gt;";
+    o.innerHTML = "<p>performance = " + s + "</p>";
 
     // Imprimer les objets performance.timing et performance.navigation
     let perf = JSON.parse(s);
 
     let timing = perf.timing;
-    o.innerHTML += "&lt;p&gt;peformance.timing = " + JSON.stringify(timing) + "&lt;/p&gt;";
+    o.innerHTML += "<p>peformance.timing = " + JSON.stringify(timing) + "</p>";
 
     let navigation = perf.navigation;
-    o.innerHTML += "&lt;p&gt;peformance.navigation = " + JSON.stringify(navigation) + "&lt;/p&gt;";
+    o.innerHTML += "<p>peformance.navigation = " + JSON.stringify(navigation) + "</p>";
   }
 }
-</pre>
-
-<h2 id="Specifications">Spécifications</h2>
-
-<p>Les interfaces décrites dans ce document sont définies dans la norme <code>High Resolution Time</code> qui comporte deux niveaux :</p>
-
-<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('Highres Time Level 2')}}</td>
-      <td>{{Spec2('Highres Time Level 2')}}</td>
-      <td>Ajout de l'attribut <code>performance</code> sur <code>Window</code> et <code>WorkerGlobalScope</code>.</td>
-    </tr>
-    <tr>
-      <td>{{SpecName('Highres Time')}}</td>
-      <td>{{Spec2('Highres Time')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
-
-<h2 id="Interoperability">Interopérabilité</h2>
-
-<p>Comme le montre le tableau des <a href="/fr/docs/Web/API/Performance#browser_compatibility">Compatibilités des navigateurs</a> de l'interface <a href="/fr/docs/Web/API/Performance"><code>Performance</code></a>, la plupart des interfaces <a href="/fr/docs/Web/API/Performance"><code>Performance</code></a> sont largement implémentées par les navigateurs de bureau.</p>
-
-<h2 id="See_also">Voir aussi</h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/API/Performance_API">Aperçu de l'API Performance</a></li>
-  <li><a href="https://siusin.github.io/perf-timing-primer/">Une introduction aux API de chronométrage des performances du Web</a> <small>(en)</small></li>
-  <li><a href="https://docs.google.com/document/d/1ZKW9N0cteHgK91SyYQONFuy2ZW6J4Oak398niTo232E/edit">Graphique des couches de performance Web</a> <small>(en)</small></li>
-  <li><a href="https://caniuse.com/#search=high-resolution-time">CanIUse données pour le Temps à haute résolution</a> <small>(en)</small></li>
-  <li><a href="https://www.w3.org/wiki/Web_Performance/Publications">Web Performance Standards Status and Roadmap</a> <small>(en)</small></li>
-</ul>
+```
+
+## Spécifications
+
+Les interfaces décrites dans ce document sont définies dans la norme `High Resolution Time` qui comporte deux niveaux :
+
+| Spécification                                    | Statut                                       | Commentaire                                                            |
+| ------------------------------------------------ | -------------------------------------------- | ---------------------------------------------------------------------- |
+| {{SpecName('Highres Time Level 2')}} | {{Spec2('Highres Time Level 2')}} | Ajout de l'attribut `performance` sur `Window` et `WorkerGlobalScope`. |
+| {{SpecName('Highres Time')}}             | {{Spec2('Highres Time')}}             | Définition initiale.                                                   |
+
+## Interopérabilité
+
+Comme le montre le tableau des [Compatibilités des navigateurs](/fr/docs/Web/API/Performance#browser_compatibility) de l'interface [`Performance`](/fr/docs/Web/API/Performance), la plupart des interfaces [`Performance`](/fr/docs/Web/API/Performance) sont largement implémentées par les navigateurs de bureau.
+
+## Voir aussi
+
+- [Aperçu de l'API Performance](/fr/docs/Web/API/Performance_API)
+- [Une introduction aux API de chronométrage des performances du Web](https://siusin.github.io/perf-timing-primer/) (en)
+- [Graphique des couches de performance Web](https://docs.google.com/document/d/1ZKW9N0cteHgK91SyYQONFuy2ZW6J4Oak398niTo232E/edit) (en)
+- [CanIUse données pour le Temps à haute résolution](https://caniuse.com/#search=high-resolution-time) (en)
+- [Web Performance Standards Status and Roadmap](https://www.w3.org/wiki/Web_Performance/Publications) (en)
diff --git a/files/fr/web/api/performance_timeline/index.md b/files/fr/web/api/performance_timeline/index.md
index db39bbf9bd..3bfdfee43d 100644
--- a/files/fr/web/api/performance_timeline/index.md
+++ b/files/fr/web/api/performance_timeline/index.md
@@ -11,74 +11,64 @@ tags:
   - Web Performance
 translation_of: Web/API/Performance_Timeline
 ---
-<div>{{DefaultAPISidebar("Performance Timeline API")}}</div>
+{{DefaultAPISidebar("Performance Timeline API")}}
 
-<p>L'API <strong>Performance Timeline</strong> définit des extensions de l'interface <a href="/fr/docs/Web/API/Performance"><code>Performance</code></a> pour prendre en charge les mesures de latence côté client dans les applications. Ces extensions fournissent des interfaces permettant de récupérer les <a href="/fr/docs/Web/API/PerformanceEntry">paramètres de saisie des performances</a> en fonction de critères de filtrage spécifiques.</p>
+L'API **Performance Timeline** définit des extensions de l'interface [`Performance`](/fr/docs/Web/API/Performance) pour prendre en charge les mesures de latence côté client dans les applications. Ces extensions fournissent des interfaces permettant de récupérer les [paramètres de saisie des performances](/fr/docs/Web/API/PerformanceEntry) en fonction de critères de filtrage spécifiques.
 
-<p>La norme comprend également des interfaces qui permettent à une application de définir des retours (« callbacks ») d'<em><a href="#performance_observers">observateur des performances</a></em>, qui sont notifiés lorsque des événements de performance spécifiques sont ajoutés à la <em>chronologie des performances</em> du navigateur.</p>
+La norme comprend également des interfaces qui permettent à une application de définir des retours (« callbacks ») d'_[observateur des performances](#performance_observers)_, qui sont notifiés lorsque des événements de performance spécifiques sont ajoutés à la _chronologie des performances_ du navigateur.
 
-<p>Ce document fournit un aperçu des interfaces de la norme. Pour plus de détails sur les interfaces, voir les pages de référence et <a href="/fr/docs/Web/API/Performance_Timeline/Using_Performance_Timeline">Utilisation de Performance Timeline</a>.</p>
+Ce document fournit un aperçu des interfaces de la norme. Pour plus de détails sur les interfaces, voir les pages de référence et [Utilisation de Performance Timeline](/fr/docs/Web/API/Performance_Timeline/Using_Performance_Timeline).
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Performance_extensions">Extensions de <code>Performance</code></h2>
+## Extensions de `Performance`
 
-<p>L'API Performance Timeline étend l'interface <a href="/fr/docs/Web/API/Performance"><code>Performance</code></a> avec trois méthodes qui fournissent différents mécanismes pour obtenir un ensemble d'<a href="/fr/docs/Web/API/PerformanceEntry">enregistrements des performances (métriques)</a>, en fonction des critères de filtrage spécifiés. Ces méthodes sont les suivantes :</p>
+L'API Performance Timeline étend l'interface [`Performance`](/fr/docs/Web/API/Performance) avec trois méthodes qui fournissent différents mécanismes pour obtenir un ensemble d'[enregistrements des performances (métriques)](/fr/docs/Web/API/PerformanceEntry), en fonction des critères de filtrage spécifiés. Ces méthodes sont les suivantes :
 
-<dl>
-  <dt><a href="/fr/docs/Web/API/Performance/getEntries"><code>getEntries()</code></a></dt>
-  <dd>Renvoie toutes les <a href="/fr/docs/Web/API/PerformanceEntry">entrées de performances</a> enregistrées ou, éventuellement, les entrées basées sur les <a href="/fr/docs/Web/API/PerformanceEntry/name"><code>name</code></a>, <a href="/fr/docs/Web/API/PerformanceEntry">type de performance</a> et/ou les <a href="/fr/docs/Web/API/PerformanceResourceTiming/initiatorType"><code>initiatorType</code></a> spécifiés. (tel qu'un élément HTML).</dd>
-  <dt><a href="/fr/docs/Web/API/Performance/getEntriesByName"><code>getEntriesByName()</code></a></dt>
-  <dd>Renvoie les <a href="/fr/docs/Web/API/PerformanceEntry">entrées de performances</a> enregistrées en fonction du <a href="/fr/docs/Web/API/PerformanceEntry/name"><code>name</code></a> spécifié et éventuellement du <a href="/fr/docs/Web/API/PerformanceEntry">type de performance</a>.</dd>
-  <dt><a href="/fr/docs/Web/API/Performance/getEntriesByType"><code>getEntriesByType()</code></a></dt>
-  <dd>Renvoie les <a href="/fr/docs/Web/API/PerformanceEntry">entrées de perfornances</a> enregistrées en fonction des <a href="/fr/docs/Web/API/PerformanceEntry">types de performances</a> spécifiés.</dd>
-</dl>
+- [`getEntries()`](/fr/docs/Web/API/Performance/getEntries)
+  - : Renvoie toutes les [entrées de performances](/fr/docs/Web/API/PerformanceEntry) enregistrées ou, éventuellement, les entrées basées sur les [`name`](/fr/docs/Web/API/PerformanceEntry/name), [type de performance](/fr/docs/Web/API/PerformanceEntry) et/ou les [`initiatorType`](/fr/docs/Web/API/PerformanceResourceTiming/initiatorType) spécifiés. (tel qu'un élément HTML).
+- [`getEntriesByName()`](/fr/docs/Web/API/Performance/getEntriesByName)
+  - : Renvoie les [entrées de performances](/fr/docs/Web/API/PerformanceEntry) enregistrées en fonction du [`name`](/fr/docs/Web/API/PerformanceEntry/name) spécifié et éventuellement du [type de performance](/fr/docs/Web/API/PerformanceEntry).
+- [`getEntriesByType()`](/fr/docs/Web/API/Performance/getEntriesByType)
+  - : Renvoie les [entrées de perfornances](/fr/docs/Web/API/PerformanceEntry) enregistrées en fonction des [types de performances](/fr/docs/Web/API/PerformanceEntry) spécifiés.
 
-<h2 id="PerformanceEntry_interface">L'interface <code>PerformanceEntry</code></h2>
+## L'interface `PerformanceEntry`
 
-<p>L'interface <a href="/fr/docs/Web/API/PerformanceEntry"><code>PerformanceEntry</code></a> encapsule une unique <em>entrée de performance</em>, c'est-à-dire un point de donnée ou une métrique située sur <em>la chronologie des performances</em>. Cette interface possède quatre propriétés ; ces propriétés sont étendues (avec des contraintes supplémentaires) par d'autres interfaces (telles que <a href="/fr/docs/Web/API/PerformanceMark"><code>PerformanceMark</code></a>) :</p>
+L'interface [`PerformanceEntry`](/fr/docs/Web/API/PerformanceEntry) encapsule une unique _entrée de performance_, c'est-à-dire un point de donnée ou une métrique située sur _la chronologie des performances_. Cette interface possède quatre propriétés ; ces propriétés sont étendues (avec des contraintes supplémentaires) par d'autres interfaces (telles que [`PerformanceMark`](/fr/docs/Web/API/PerformanceMark)) :
 
-<dl>
-  <dt><a href="/fr/docs/Web/API/PerformanceEntry/name"><code>name</code></a></dt>
-  <dd>Le nom de l'entrée de performance lorsque la métrique a été créée.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>entryType</code></a></dt>
-  <dd>Le type de mesure de performance (par exemple, « <code>mark</code> »).</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceEntry/startTime"><code>startTime</code></a></dt>
-  <dd>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp">horodatage haute résolution</a> représentant l'heure de départ de l'entrée de performance.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceEntry/duration"><code>duration</code></a></dt>
-  <dd>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp">horodatage haute résolution</a> représentant la valeur temporelle de la durée de l'événement de performance (certains <a href="/fr/docs/Web/API/PerformanceEntry/entryType">types d'entrée</a> de performance n'ont pas de concept de <em>durée</em> et cette valeur est fixée à <code>'0'</code> pour ces types).</dd>
-</dl>
+- [`name`](/fr/docs/Web/API/PerformanceEntry/name)
+  - : Le nom de l'entrée de performance lorsque la métrique a été créée.
+- [`entryType`](/fr/docs/Web/API/PerformanceEntry/entryType)
+  - : Le type de mesure de performance (par exemple, « `mark` »).
+- [`startTime`](/fr/docs/Web/API/PerformanceEntry/startTime)
+  - : Un [horodatage haute résolution](/fr/docs/Web/API/DOMHighResTimeStamp) représentant l'heure de départ de l'entrée de performance.
+- [`duration`](/fr/docs/Web/API/PerformanceEntry/duration)
+  - : Un [horodatage haute résolution](/fr/docs/Web/API/DOMHighResTimeStamp) représentant la valeur temporelle de la durée de l'événement de performance (certains [types d'entrée](/fr/docs/Web/API/PerformanceEntry/entryType) de performance n'ont pas de concept de _durée_ et cette valeur est fixée à `'0'` pour ces types).
 
-<p>Cette interface comprend une méthode <a href="/fr/docs/Web/API/PerformanceEntry/toJSON"><code>toJSON()</code></a> qui renvoie la sérialisation de l'objet <a href="/fr/docs/Web/API/PerformanceEntry"><code>PerformanceEntry</code></a>. La sérialisation varie selon le <a href="/fr/docs/Web/API/PerformanceEntry/entryType">type de performance</a>.</p>
+Cette interface comprend une méthode [`toJSON()`](/fr/docs/Web/API/PerformanceEntry/toJSON) qui renvoie la sérialisation de l'objet [`PerformanceEntry`](/fr/docs/Web/API/PerformanceEntry). La sérialisation varie selon le [type de performance](/fr/docs/Web/API/PerformanceEntry/entryType).
 
-<h2 id="Performance_observers">Observateurs des performances</h2>
+## Observateurs des performances
 
-<p>{{SeeCompatTable}}</p>
+{{SeeCompatTable}}
 
-<p>Les interfaces d'<em>observateurs de performance</em> permettent à une application d'enregistrer un <em>observateur</em> pour des types d'événements de performance spécifiques. Lorsqu'un de ces types d'événements est enregistré, l'application est <em>notifiée</em> de l'événement via la fonction de rappel de l'observateur qui a été spécifiée lors de la création de l'observateur.</p>
+Les interfaces d'_observateurs de performance_ permettent à une application d'enregistrer un _observateur_ pour des types d'événements de performance spécifiques. Lorsqu'un de ces types d'événements est enregistré, l'application est _notifiée_ de l'événement via la fonction de rappel de l'observateur qui a été spécifiée lors de la création de l'observateur.
 
-<p>Lorsque la fonction de rappel de l'observateur (<i>callback</i>) est invoquée, les paramètres incluent une <em><a href="/fr/docs/Web/API/PerformanceObserverEntryList">liste des entrées de l'observateur de performance</a></em> qui contient uniquement des <a href="/fr/docs/Web/API/PerformanceEntry">entrées de performance</a> <em>observées</em>. C'est-à-dire que la liste contient uniquement des entrées pour les types d'événements qui ont été spécifiés lorsque la méthode <a href="/fr/docs/Web/API/PerformanceObserver/observe"><code>observe()</code></a> de l'observateur a été invoquée. L'interface <a href="/fr/docs/Web/API/PerformanceObserverEntryList"><code>PerformanceObserverEntryList</code></a> possède les trois mêmes méthodes <code>getEntries*()</code> que l'interface <a href="/fr/docs/Web/API/Performance"><code>Performance</code></a>. Cependant, notez qu'il y a une différence clé avec ces méthodes ; les versions <a href="/fr/docs/Web/API/PerformanceObserverEntryList"><code>PerformanceObserverEntryList</code></a> sont utilisées pour récupérer les entrées de performance <em>observées</em> dans le rappel de l'observateur.</p>
+Lorsque la fonction de rappel de l'observateur (_callback_) est invoquée, les paramètres incluent une _[liste des entrées de l'observateur de performance](/fr/docs/Web/API/PerformanceObserverEntryList)_ qui contient uniquement des [entrées de performance](/fr/docs/Web/API/PerformanceEntry) _observées_. C'est-à-dire que la liste contient uniquement des entrées pour les types d'événements qui ont été spécifiés lorsque la méthode [`observe()`](/fr/docs/Web/API/PerformanceObserver/observe) de l'observateur a été invoquée. L'interface [`PerformanceObserverEntryList`](/fr/docs/Web/API/PerformanceObserverEntryList) possède les trois mêmes méthodes `getEntries*()` que l'interface [`Performance`](/fr/docs/Web/API/Performance). Cependant, notez qu'il y a une différence clé avec ces méthodes ; les versions [`PerformanceObserverEntryList`](/fr/docs/Web/API/PerformanceObserverEntryList) sont utilisées pour récupérer les entrées de performance _observées_ dans le rappel de l'observateur.
 
-<p>Outre la méthode <a href="/fr/docs/Web/API/PerformanceObserver/observe"><code>observe()</code></a> de l'interface <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> (qui sert à enregistrer les <a href="/fr/docs/Web/API/PerformanceEntry">types d'entrées</a> pour <em>observer</em>), l'interface <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> possède également une méthode <a href="/fr/docs/Web/API/PerformanceObserver/disconnect"><code>disconnect()</code></a> qui empêche un observateur de recevoir d'autres événements.</p>
+Outre la méthode [`observe()`](/fr/docs/Web/API/PerformanceObserver/observe) de l'interface [`PerformanceObserver`](/fr/docs/Web/API/PerformanceObserver) (qui sert à enregistrer les [types d'entrées](/fr/docs/Web/API/PerformanceEntry) pour _observer_), l'interface [`PerformanceObserver`](/fr/docs/Web/API/PerformanceObserver) possède également une méthode [`disconnect()`](/fr/docs/Web/API/PerformanceObserver/disconnect) qui empêche un observateur de recevoir d'autres événements.
 
-<div class="note">
-  <p><strong>Note :</strong> Les observateurs de performance ont été ajoutés au <code>Niveau 2</code> de la norme et n'ont pas été implémentés à grande échelle.</p>
-</div>
+> **Note :** Les observateurs de performance ont été ajoutés au `Niveau 2` de la norme et n'ont pas été implémentés à grande échelle.
 
-<h2 id="Implementation_status">État de la mise en œuvre</h2>
+## État de la mise en œuvre
 
-<p>Un résumé de l'état de mise en œuvre des interfaces est fourni ci-dessous, avec un lien vers des informations plus détaillées.</p>
+Un résumé de l'état de mise en œuvre des interfaces est fourni ci-dessous, avec un lien vers des informations plus détaillées.
 
-<ul>
-  <li><strong>Les extensions de l'interface <code>Performance</code> :</strong> Comme le montre le tableau de <a href="/fr/docs/Web/API/Performance#browser_compatibility">Compatibilité des navigateurs</a> de l'interface <a href="/fr/docs/Web/API/Performance"><code>Performance</code></a>, la plupart de ces interfaces sont largement prises en charge par les navigateurs de bureau et bénéficient d'un support moindre sur les appareils mobiles.</li>
-  <li><strong><code>PerformanceEntry</code> :</strong> Comme le montre le tableau de <a href="/fr/docs/Web/API/PerformanceEntry#browser_compatibility">Compatibilité des navigateurs</a> de l'interface <a href="/fr/docs/Web/API/PerformanceEntry"><code>PerformanceEntry</code></a>, la plupart de ces interfaces sont largement prises en charge par les navigateurs de bureau et le sont moins sur les appareils mobiles.</li>
-  <li><strong><code>PerformanceObserver</code> {{experimental_inline}} :</strong> Comme le montre le tableau de <a href="/fr/docs/Web/API/PerformanceObserver#browser_compatibility">Compatibilité des navigateurs</a> de l'interface <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a>, cette interface n'est pas implémentée par les navigateurs.</li>
-</ul>
+- **Les extensions de l'interface `Performance` :** Comme le montre le tableau de [Compatibilité des navigateurs](/fr/docs/Web/API/Performance#browser_compatibility) de l'interface [`Performance`](/fr/docs/Web/API/Performance), la plupart de ces interfaces sont largement prises en charge par les navigateurs de bureau et bénéficient d'un support moindre sur les appareils mobiles.
+- **`PerformanceEntry` :** Comme le montre le tableau de [Compatibilité des navigateurs](/fr/docs/Web/API/PerformanceEntry#browser_compatibility) de l'interface [`PerformanceEntry`](/fr/docs/Web/API/PerformanceEntry), la plupart de ces interfaces sont largement prises en charge par les navigateurs de bureau et le sont moins sur les appareils mobiles.
+- **`PerformanceObserver` {{experimental_inline}} :** Comme le montre le tableau de [Compatibilité des navigateurs](/fr/docs/Web/API/PerformanceObserver#browser_compatibility) de l'interface [`PerformanceObserver`](/fr/docs/Web/API/PerformanceObserver), cette interface n'est pas implémentée par les navigateurs.
 
-<p>Pour tester la prise en charge de ces interfaces par votre navigateur, vous pouvez exécuter l'application <code><a href="https://mdn.github.io/web-performance/perf-api-support.html">perf-api-support</a></code>.</p>
+Pour tester la prise en charge de ces interfaces par votre navigateur, vous pouvez exécuter l'application [`perf-api-support`](https://mdn.github.io/web-performance/perf-api-support.html).
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="https://siusin.github.io/perf-timing-primer/">Une introduction aux API de chronométrage des performances du Web</a> <small>(en)</small></li>
-</ul>
+- [Une introduction aux API de chronométrage des performances du Web](https://siusin.github.io/perf-timing-primer/) (en)
diff --git a/files/fr/web/api/performance_timeline/using_performance_timeline/index.md b/files/fr/web/api/performance_timeline/using_performance_timeline/index.md
index c3554f1927..c6307ae61a 100644
--- a/files/fr/web/api/performance_timeline/using_performance_timeline/index.md
+++ b/files/fr/web/api/performance_timeline/using_performance_timeline/index.md
@@ -8,23 +8,23 @@ tags:
   - Web Performance
 translation_of: Web/API/Performance_Timeline/Using_Performance_Timeline
 ---
-<div>{{DefaultAPISidebar("Performance Timeline API")}}</div>
+{{DefaultAPISidebar("Performance Timeline API")}}
 
-<p>La norme <strong><a href="https://w3c.github.io/performance-timeline/">Performance Timeline</a></strong> définit des extensions de l'interface <a href="/fr/docs/Web/API/Performance"><code>Performance</code></a> pour prendre en charge les mesures de latence côté client au sein des applications.</p>
+La norme **[Performance Timeline](https://w3c.github.io/performance-timeline/)** définit des extensions de l'interface [`Performance`](/fr/docs/Web/API/Performance) pour prendre en charge les mesures de latence côté client au sein des applications.
 
-<p>La norme comprend également des interfaces qui permettent à une application d'être notifiée lorsque des événements de performance spécifiques se produisent. Ensemble, ces interfaces peuvent être utilisées pour aider à identifier les goulots d'étranglement des performances d'une application.</p>
+La norme comprend également des interfaces qui permettent à une application d'être notifiée lorsque des événements de performance spécifiques se produisent. Ensemble, ces interfaces peuvent être utilisées pour aider à identifier les goulots d'étranglement des performances d'une application.
 
-<h2 id="Performance_extensions">Extensions de <code>Performance</code></h2>
+## Extensions de `Performance`
 
-<p><strong>Performance Timeline</strong> étend l'objet <a href="/fr/docs/Web/API/Performance"><code>Performance</code></a> avec trois méthodes qui fournissent différents mécanismes pour obtenir un ensemble d'<a href="/fr/docs/Web/API/PerformanceEntry">enregistrements des performances (métriques)</a>, selon les critères de filtrage spécifiés. L'exemple suivant montre l'utilisation de ces méthodes <a href="/fr/docs/Web/API/Performance/getEntries"><code>getEntries()</code></a>, <a href="/fr/docs/Web/API/Performance/getEntriesByName"><code>getEntriesByName()</code></a> et <a href="/fr/docs/Web/API/Performance/getEntriesByType"><code>getEntriesByType()</code></a>.</p>
+**Performance Timeline** étend l'objet [`Performance`](/fr/docs/Web/API/Performance) avec trois méthodes qui fournissent différents mécanismes pour obtenir un ensemble d'[enregistrements des performances (métriques)](/fr/docs/Web/API/PerformanceEntry), selon les critères de filtrage spécifiés. L'exemple suivant montre l'utilisation de ces méthodes [`getEntries()`](/fr/docs/Web/API/Performance/getEntries), [`getEntriesByName()`](/fr/docs/Web/API/Performance/getEntriesByName) et [`getEntriesByType()`](/fr/docs/Web/API/Performance/getEntriesByType).
 
-<pre class="brush: js">
+```js
 function log(s) {
   let o = document.getElementsByTagName("output")[0];
-  o.innerHTML += s + " &lt;br&gt;";
+  o.innerHTML += s + " <br>";
 }
 function do_work(n) {
-  for (let i=0 ; i &lt; n; i++) {
+  for (let i=0 ; i < n; i++) {
       let m = Math.random();
   }
 }
@@ -49,39 +49,39 @@ function print_PerformanceEntries() {
 
   // Utilise getEntries() pour itérer toutes les entrées.
   let p = performance.getEntries();
-  for (let i=0; i &lt; p.length; i++) {
+  for (let i=0; i < p.length; i++) {
     log("Toutes les entrées [" + i + "]");
     print_perf_entry(p[i]);
   }
 
   // Utilise getEntries(name, entryType) pour obtenir des entrées spécifiques.
   p = performance.getEntries({name : "Measure1", entryType:   "measure"});
-  for (let i=0; i &lt; p.length; i++) {
+  for (let i=0; i < p.length; i++) {
     log("Begin et Measure [" + i + "]");
     print_perf_entry(p[i]);
   }
 
   // Utilisez getEntriesByType() pour obtenir toutes les entrées "mark".
   p = performance.getEntriesByType("mark");
-  for (let i=0; i &lt; p.length; i++) {
+  for (let i=0; i < p.length; i++) {
     log ("Mark seulement [" + i + "]");
     print_perf_entry(p[i]);
   }
 
   // Utilise getEntriesByName() pour obtenir toutes les entrées "mark" nommées "Begin".
   p = performance.getEntriesByName("Begin", "mark");
-  for (let i=0; i &lt; p.length; i++) {
+  for (let i=0; i < p.length; i++) {
     log ("Begin et Mark [" + i + "]");
     print_perf_entry(p[i]);
   }
 }
-</pre>
+```
 
-<h2 id="PerformanceEntry_interface">L'interface <code>PerformanceEntry</code></h2>
+## L'interface `PerformanceEntry`
 
-<p>L'interface <a href="/fr/docs/Web/API/PerformanceEntry"><code>PerformanceEntry</code></a> encapsule une seule <em>entrée de performance</em>, c'est-à-dire une seule métrique de performance. Cette interface possède quatre propriétés et un <em>sérialiseur</em> JSON : (<a href="/fr/docs/Web/API/Performance/toJSON"><code>toJSON()</code></a>. L'exemple suivant montre l'utilisation de ces propriétés.</p>
+L'interface [`PerformanceEntry`](/fr/docs/Web/API/PerformanceEntry) encapsule une seule _entrée de performance_, c'est-à-dire une seule métrique de performance. Cette interface possède quatre propriétés et un _sérialiseur_ JSON : ([`toJSON()`](/fr/docs/Web/API/Performance/toJSON). L'exemple suivant montre l'utilisation de ces propriétés.
 
-<pre class="brush: js">
+```js
 function print_PerformanceEntry(ev) {
   let properties = ["name", "entryType", "startTime", "duration"];
 
@@ -92,9 +92,9 @@ function print_PerformanceEntry(ev) {
   performance.measure("measure-1");
 
   let p = performance.getEntries();
-  for (let i=0; i &lt; p.length; i++) {
+  for (let i=0; i < p.length; i++) {
     log("PerfEntry[" + i + "]");
-    for (let =0; j &lt; properties.length; j++) {
+    for (let =0; j < properties.length; j++) {
       // check each property in window.performance
       let supported = properties[j] in p[i];
       if (supported) {
@@ -106,11 +106,11 @@ function print_PerformanceEntry(ev) {
     }
   }
 }
-</pre>
+```
 
-<p>Cette interface comprend également une méthode <a href="/fr/docs/Web/API/PerformanceEntry/toJSON"><code>toJSON()</code></a> qui renvoie la sérialisation de l'objet <a href="/fr/docs/Web/API/PerformanceEntry"><code>PerformanceEntry</code></a>. Les exemples suivants montrent l'utilisation de cette méthode.</p>
+Cette interface comprend également une méthode [`toJSON()`](/fr/docs/Web/API/PerformanceEntry/toJSON) qui renvoie la sérialisation de l'objet [`PerformanceEntry`](/fr/docs/Web/API/PerformanceEntry). Les exemples suivants montrent l'utilisation de cette méthode.
 
-<pre class="brush: js">
+```js
 function PerfEntry_toJSON() {
 
   // Crée quelques entrées de performance
@@ -131,17 +131,17 @@ function PerfEntry_toJSON() {
   let s = JSON.stringify(json);
   log("PerformanceEntry.toJSON = " + s);
 }
-</pre>
+```
 
-<h2 id="Performance_Observers">Observateurs de performance</h2>
+## Observateurs de performance
 
-<p>{{SeeCompatTable}}</p>
+{{SeeCompatTable}}
 
-<p>Les interfaces <em>Performance Observer</em> permettent à une application d'enregistrer un <em>observateur</em> pour des types d'événements de performance spécifiques, et lorsqu'un de ces types d'événements est enregistré, l'application est <em>notifiée</em> de l'événement via la fonction de rappel de l'observateur qui a été spécifiée au moment, où l'observateur a été créé. Lorsque l'observateur (rappel ou « callback ») est invoqué, les paramètres du rappel incluent une <em><a href="/fr/docs/Web/API/PerformanceObserverEntryList">liste d'entrées de l'observateur de performance</a></em> qui contient uniquement des <a href="/fr/docs/Web/API/PerformanceEntry">entrées de performance</a> <em>observées</em>. C'est-à-dire que la liste ne contient que des entrées pour les types d'événements qui ont été spécifiés lorsque la méthode <a href="/fr/docs/Web/API/PerformanceObserver/observe"><code>observe()</code></a> de l'observateur a été invoquée.</p>
+Les interfaces _Performance Observer_ permettent à une application d'enregistrer un _observateur_ pour des types d'événements de performance spécifiques, et lorsqu'un de ces types d'événements est enregistré, l'application est _notifiée_ de l'événement via la fonction de rappel de l'observateur qui a été spécifiée au moment, où l'observateur a été créé. Lorsque l'observateur (rappel ou « callback ») est invoqué, les paramètres du rappel incluent une _[liste d'entrées de l'observateur de performance](/fr/docs/Web/API/PerformanceObserverEntryList)_ qui contient uniquement des [entrées de performance](/fr/docs/Web/API/PerformanceEntry) _observées_. C'est-à-dire que la liste ne contient que des entrées pour les types d'événements qui ont été spécifiés lorsque la méthode [`observe()`](/fr/docs/Web/API/PerformanceObserver/observe) de l'observateur a été invoquée.
 
-<p>L'exemple suivant montre comment enregistrer deux observateurs : le premier s'enregistre pour plusieurs types d'événements et le second ne s'enregistre que pour un seul type d'événement.</p>
+L'exemple suivant montre comment enregistrer deux observateurs : le premier s'enregistre pour plusieurs types d'événements et le second ne s'enregistre que pour un seul type d'événement.
 
-<pre class="brush: js">
+```js
 function PerformanceObservers() {
   // Crée un observateur pour tous les types d'événements de performance
   let observe_all = new PerformanceObserver(function(list, obs) {
@@ -149,19 +149,19 @@ function PerformanceObservers() {
 
     // Imprime toutes les entrées
     perfEntries = list.getEntries();
-    for (let i=0; i &lt; perfEntries.length; i++) {
+    for (let i=0; i < perfEntries.length; i++) {
       print_perf_entry(perfEntries[i]);
     }
 
     // Imprime les entrées nommées "Begin" avec le type "mark".
     perfEntries = list.getEntriesByName("Begin", "mark");
-    for (let i=0; i &lt; perfEntries.length; i++) {
+    for (let i=0; i < perfEntries.length; i++) {
       print_perf_entry(perfEntries[i]);
     }
 
     // Imprime les entrées avec le type "mark".
     perfEntries = list.getEntriesByType("mark");
-    for (let i=0; i &lt; perfEntries.length; i++) {
+    for (let i=0; i < perfEntries.length; i++) {
       print_perf_entry(perfEntries[i]);
     }
   });
@@ -172,7 +172,7 @@ function PerformanceObservers() {
   let observe_mark = new PerformanceObserver(function(list, obs) {
     let perfEntries = list.getEntries();
     // Ne devrait avoir que des entrées de type "mark".
-    for (let i=0; i &lt; perfEntries.length; i++) {
+    for (let i=0; i < perfEntries.length; i++) {
       print_perf_entry(perfEntries[i]);
     }
   });
@@ -185,39 +185,20 @@ function print_perf_entry(pe) {
       "; startTime: " + pe.startTime +
       "; duration: " + pe.duration);
 }
-</pre>
-
-<p>L'interface <a href="/fr/docs/Web/API/PerformanceObserverEntryList">liste des entrées de l'observateur de performance</a> possède les trois mêmes méthodes <code>getEntries*()</code> que l'interface <a href="/fr/docs/Web/API/Performance"><code>Performance</code></a> et ces méthodes sont utilisées pour récupérer les entrées de performance <em>observées</em> dans le rappel de l'observateur. Ces méthodes ont été utilisées dans l'exemple cité ci-dessus.</p>
-
-<h2 id="Specifications">Spécifications</h2>
-
-<p>Les interfaces décrites dans ce document sont définies dans la norme <strong>Performance Timeline</strong> qui comporte deux niveaux :</p>
-
-<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('Performance Timeline',  '#extensions-to-the-performance-interface', 'Performance   extensions')}}</td>
-      <td>{{Spec2('Performance Timeline')}}</td>
-      <td>Définition des méthodes <code>getEntries()</code>, <code>getEntriesByType()</code> et <code>getEntriesByName()</code>.</td>
-    </tr>
-    <tr>
-      <td>{{SpecName('Performance Timeline Level 2',  '#extensions-to-the-performance-interface', 'Performance   extensions')}}</td>
-      <td>{{Spec2('Performance Timeline Level 2')}}</td>
-      <td>Modifications de l'interface <code>getEntries()</code>.</td>
-    </tr>
-  </tbody>
- </table>
-
-<h2 id="See_also">Voir aussi</h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/API/Performance_Timeline">Performance Timeline API</a></li>
-  <li><a href="https://siusin.github.io/perf-timing-primer/">Une introduction aux API de chronométrage des performances du Web</a></li>
-</ul>
+```
+
+L'interface [liste des entrées de l'observateur de performance](/fr/docs/Web/API/PerformanceObserverEntryList) possède les trois mêmes méthodes `getEntries*()` que l'interface [`Performance`](/fr/docs/Web/API/Performance) et ces méthodes sont utilisées pour récupérer les entrées de performance _observées_ dans le rappel de l'observateur. Ces méthodes ont été utilisées dans l'exemple cité ci-dessus.
+
+## Spécifications
+
+Les interfaces décrites dans ce document sont définies dans la norme **Performance Timeline** qui comporte deux niveaux :
+
+| Spécification                                                                                                                                                | Statut                                                   | Commentaire                                                                           |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------- | ------------------------------------------------------------------------------------- |
+| {{SpecName('Performance Timeline',  '#extensions-to-the-performance-interface', 'Performance   extensions')}}             | {{Spec2('Performance Timeline')}}             | Définition des méthodes `getEntries()`, `getEntriesByType()` et `getEntriesByName()`. |
+| {{SpecName('Performance Timeline Level 2',  '#extensions-to-the-performance-interface', 'Performance   extensions')}} | {{Spec2('Performance Timeline Level 2')}} | Modifications de l'interface `getEntries()`.                                          |
+
+## Voir aussi
+
+- [Performance Timeline API](/fr/docs/Web/API/Performance_Timeline)
+- [Une introduction aux API de chronométrage des performances du Web](https://siusin.github.io/perf-timing-primer/)
diff --git a/files/fr/web/api/performanceelementtiming/element/index.md b/files/fr/web/api/performanceelementtiming/element/index.md
index 1a40658ff7..d307ff909b 100644
--- a/files/fr/web/api/performanceelementtiming/element/index.md
+++ b/files/fr/web/api/performanceelementtiming/element/index.md
@@ -10,55 +10,47 @@ tags:
   - PerformanceElementTiming
 translation_of: Web/API/PerformanceElementTiming/element
 ---
-<div>{{APIRef("Element Timing API")}}</div>
+{{APIRef("Element Timing API")}}
 
-<p>La propriété en lecture seule <strong><code>element</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceElementTiming"><code>PerformanceElementTiming</code></a> renvoie un <a href="/fr/docs/Web/API/Element"><code>Element</code></a> qui est une représentation littérale de l'élément associé.</p>
+La propriété en lecture seule **`element`** de l'interface [`PerformanceElementTiming`](/fr/docs/Web/API/PerformanceElementTiming) renvoie un [`Element`](/fr/docs/Web/API/Element) qui est une représentation littérale de l'élément associé.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:js">var <var>element</var> = <var>PerformanceElementTiming</var>.element;</pre>
+```js
+var element = PerformanceElementTiming.element;
+```
 
-<h3>Valeur</h3>
-<p>Un objet de type <a href="/fr/docs/Web/API/Element"><code>Element</code></a>.</p>
+### Valeur
 
-<h2 id="Examples">Exemples</h2>
+Un objet de type [`Element`](/fr/docs/Web/API/Element).
 
-<p>Dans cet exemple, l'appel à <code>entry.element</code> va enregistrer dans la console <code>&lt;img src="image.jpg" alt="une belle image" elementtiming="big-image"&gt;</code>.</p>
+## Exemples
 
-<pre class="brush:html">&lt;img src="image.jpg" alt="une belle image" elementtiming="big-image"&gt;</pre>
+Dans cet exemple, l'appel à `entry.element` va enregistrer dans la console `<img src="image.jpg" alt="une belle image" elementtiming="big-image">`.
 
-<pre class="brush:js">const <var>observer</var> = new PerformanceObserver((list) => {
-  let <var>entries</var> = list.getEntries().forEach(function (entry) {
+```html
+<img src="image.jpg" alt="une belle image" elementtiming="big-image">
+```
+
+```js
+const observer = new PerformanceObserver((list) => {
+  let entries = list.getEntries().forEach(function (entry) {
     if (entry.identifier === "big-image") {
       console.log(entry.element);
     }
   });
 });
-observer.observe({ entryTypes: ["element"] });</pre>
+observer.observe({ entryTypes: ["element"] });
+```
 
-<div class="note">
-  <p><strong>Note :</strong> Cet exemple utilise l'interface <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>PerformanceEntry.entryType</code></a> afin d'utiliser l'interface <code>PerformanceElementTiming</code>.</p>
-</div>
+> **Note :** Cet exemple utilise l'interface [`PerformanceObserver`](/fr/docs/Web/API/PerformanceObserver) pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément [`PerformanceEntry.entryType`](/fr/docs/Web/API/PerformanceEntry/entryType) afin d'utiliser l'interface `PerformanceElementTiming`.
 
-<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('Element Timing API','#dom-performanceelementtiming-element','PerformanceElementTiming.element')}}</td>
-      <td>{{Spec2('Element Timing API')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                                                                    | Statut                                   | Commentaire          |
+| ------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------- |
+| {{SpecName('Element Timing API','#dom-performanceelementtiming-element','PerformanceElementTiming.element')}} | {{Spec2('Element Timing API')}} | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.PerformanceElementTiming.element")}}</p>
+{{Compat("api.PerformanceElementTiming.element")}}
diff --git a/files/fr/web/api/performanceelementtiming/id/index.md b/files/fr/web/api/performanceelementtiming/id/index.md
index f3083cd256..f178f4ea8f 100644
--- a/files/fr/web/api/performanceelementtiming/id/index.md
+++ b/files/fr/web/api/performanceelementtiming/id/index.md
@@ -10,55 +10,47 @@ tags:
   - PerformanceElementTiming
 translation_of: Web/API/PerformanceElementTiming/id
 ---
-<div>{{SeeCompatTable}}{{Non-Standard_Header}}{{APIRef("Element Timing API")}}</div>
+{{SeeCompatTable}}{{Non-Standard_Header}}{{APIRef("Element Timing API")}}
 
-<p>La propriété en lecture seule <strong><code>id</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceElementTiming"><code>PerformanceElementTiming</code></a> renvoie l'<a href="/fr/docs/Web/HTML/Global_attributes#attr-id"><code>id</code></a> de l'élément associé.</p>
+La propriété en lecture seule **`id`** de l'interface [`PerformanceElementTiming`](/fr/docs/Web/API/PerformanceElementTiming) renvoie l'[`id`](/fr/docs/Web/HTML/Global_attributes#attr-id) de l'élément associé.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:js">var <var>id</var> = <var>PerformanceElementTiming</var>.id;</pre>
+```js
+var id = PerformanceElementTiming.id;
+```
 
-<h3>Valeur</h3>
-<p>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a>.</p>
+### Valeur
 
-<h2 id="Examples">Exemples</h2>
+Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString).
 
-<p>Dans cet exemple, l'appel à <code>entry.id</code> entraînera l'affichage dans la console du code <code>myImage</code>, qui est l'<a href="/fr/docs/Web/HTML/Global_attributes#attr-id"><code>id</code></a> de l'élément image.</p>
+## Exemples
 
-<pre class="brush:html">&lt;img src="image.jpg" alt="une belle image" elementtiming="big-image" id="myImage"&gt;</pre>
+Dans cet exemple, l'appel à `entry.id` entraînera l'affichage dans la console du code `myImage`, qui est l'[`id`](/fr/docs/Web/HTML/Global_attributes#attr-id) de l'élément image.
 
-<pre class="brush:js">const observer = new PerformanceObserver((list) => {
+```html
+<img src="image.jpg" alt="une belle image" elementtiming="big-image" id="myImage">
+```
+
+```js
+const observer = new PerformanceObserver((list) => {
 let entries = list.getEntries().forEach(function (entry) {
     if (entry.identifier === "big-image") {
       console.log(entry.id);
     }
   });
 });
-observer.observe({ entryTypes: ["element"] });</pre>
+observer.observe({ entryTypes: ["element"] });
+```
 
-<div class="note">
-  <p><strong>Note :</strong> Cet exemple utilise l'interface <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>entryType</code></a> <code>element</code> afin d'utiliser l'interface <code>PerformanceElementTiming</code>.</p>
-</div>
+> **Note :** Cet exemple utilise l'interface [`PerformanceObserver`](/fr/docs/Web/API/PerformanceObserver) pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément [`entryType`](/fr/docs/Web/API/PerformanceEntry/entryType) `element` afin d'utiliser l'interface `PerformanceElementTiming`.
 
-<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('Element Timing API','#dom-performanceelementtiming-id','PerformanceElementTiming.id')}}</td>
-      <td>{{Spec2('Element Timing API')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                                                        | Statut                                   | Commentaire          |
+| ------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------- |
+| {{SpecName('Element Timing API','#dom-performanceelementtiming-id','PerformanceElementTiming.id')}} | {{Spec2('Element Timing API')}} | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.PerformanceElementTiming.id")}}</p>
+{{Compat("api.PerformanceElementTiming.id")}}
diff --git a/files/fr/web/api/performanceelementtiming/identifier/index.md b/files/fr/web/api/performanceelementtiming/identifier/index.md
index 1fb524cf4f..b75eebe995 100644
--- a/files/fr/web/api/performanceelementtiming/identifier/index.md
+++ b/files/fr/web/api/performanceelementtiming/identifier/index.md
@@ -10,55 +10,47 @@ tags:
   - PerformanceElementTiming
 translation_of: Web/API/PerformanceElementTiming/identifier
 ---
-<div>{{SeeCompatTable}}{{Non-Standard_Header}}{{APIRef("Element Timing API")}}</div>
+{{SeeCompatTable}}{{Non-Standard_Header}}{{APIRef("Element Timing API")}}
 
-<p>La propriété en lecture seule <strong><code>identifier</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceElementTiming"><code>PerformanceElementTiming</code></a> renvoie la valeur de l'attribut <code><a href="/fr/docs/Web/HTML/Attributes/elementtiming">elementtiming</a></code> sur l'élément.</p>
+La propriété en lecture seule **`identifier`** de l'interface [`PerformanceElementTiming`](/fr/docs/Web/API/PerformanceElementTiming) renvoie la valeur de l'attribut [`elementtiming`](/fr/docs/Web/HTML/Attributes/elementtiming) sur l'élément.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:js">var <var>identifier</var> = <var>PerformanceElementTiming</var>.identifier;</pre>
+```js
+var identifier = PerformanceElementTiming.identifier;
+```
 
-<h3>Valeur</h3>
-<p>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a>.</p>
+### Valeur
 
-<h2 id="Examples">Examples</h2>
+Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString).
 
-<p>Dans cet exemple, la valeur de <code><a href="/fr/docs/Web/HTML/Attributes/elementtiming">elementtiming</a></code> est <code>big-image</code>. L'appel à <code>entry.indentifier</code> renvoie donc la chaîne de caractères <code>big-image</code>.</p>
+## Examples
 
-<pre class="brush:html">&lt;img src="image.jpg" alt="une belle image" elementtiming="big-image" id="myImage"&gt;</pre>
+Dans cet exemple, la valeur de [`elementtiming`](/fr/docs/Web/HTML/Attributes/elementtiming) est `big-image`. L'appel à `entry.indentifier` renvoie donc la chaîne de caractères `big-image`.
 
-<pre class="brush:js">const observer = new PerformanceObserver((list) => {
+```html
+<img src="image.jpg" alt="une belle image" elementtiming="big-image" id="myImage">
+```
+
+```js
+const observer = new PerformanceObserver((list) => {
   let entries = list.getEntries().forEach(function (entry) {
     if (entry.identifier === "big-image") {
       console.log(entry.naturalWidth);
     }
   });
 });
-observer.observe({ entryTypes: ["element"] });</pre>
+observer.observe({ entryTypes: ["element"] });
+```
 
-<div class="note">
-  <p><strong>Note :</strong> Cet exemple utilise l'interface <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>entryType</code></a> <code>element</code> afin d'utiliser l'interface <code>PerformanceElementTiming</code>.</p>
-</div>
+> **Note :** Cet exemple utilise l'interface [`PerformanceObserver`](/fr/docs/Web/API/PerformanceObserver) pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément [`entryType`](/fr/docs/Web/API/PerformanceEntry/entryType) `element` afin d'utiliser l'interface `PerformanceElementTiming`.
 
-<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('Element Timing API','#dom-performanceelementtiming-identifier','PerformanceElementTiming.identifier')}}</td>
-      <td>{{Spec2('Element Timing API')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                                                                            | Statut                                   | Commentaire          |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('Element Timing API','#dom-performanceelementtiming-identifier','PerformanceElementTiming.identifier')}} | {{Spec2('Element Timing API')}} | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.PerformanceElementTiming.identifier")}}</p>
+{{Compat("api.PerformanceElementTiming.identifier")}}
diff --git a/files/fr/web/api/performanceelementtiming/index.md b/files/fr/web/api/performanceelementtiming/index.md
index 3a591036d7..f396e7d647 100644
--- a/files/fr/web/api/performanceelementtiming/index.md
+++ b/files/fr/web/api/performanceelementtiming/index.md
@@ -8,75 +8,62 @@ tags:
   - PerformanceElementTiming
 translation_of: Web/API/PerformanceElementTiming
 ---
-<div>{{SeeCompatTable}}{{Non-Standard_Header}}{{APIRef("Element Timing API")}}</div>
+{{SeeCompatTable}}{{Non-Standard_Header}}{{APIRef("Element Timing API")}}
 
-<p>L'interface <strong><code>PerformanceElementTiming</code></strong> de l'API <a href="/fr/docs/Web/API/Element_timing_API">Element Timing API</a> rapporte les informations de timing sur un élément spécifique identifié par l'auteur de la page. Par exemple, elle peut fournir des informations sur l'image principale d'un article.</p>
+L'interface **`PerformanceElementTiming`** de l'API [Element Timing API](/fr/docs/Web/API/Element_timing_API) rapporte les informations de timing sur un élément spécifique identifié par l'auteur de la page. Par exemple, elle peut fournir des informations sur l'image principale d'un article.
 
-<h2 id="Properties">Propriétés</h2>
+## Propriétés
 
-<dl>
-  <dt><a href="/fr/docs/Web/API/PerformanceElementTiming/element"><code>PerformanceElementTiming.element</code></a> {{ReadOnlyInline}} {{Experimental_Inline}} {{Non-Standard_Inline}}</dt>
-  <dd>Un <a href="/fr/docs/Web/API/Element"><code>Element</code></a> représentant l'élément pour lequel nous retournons des informations.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceElementTiming/id"><code>PerformanceElementTiming.id</code></a> {{ReadOnlyInline}} {{Experimental_Inline}} {{Non-Standard_Inline}}</dt>
-  <dd>Un <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui est l'identifiant (attribut <a href="/fr/docs/Web/HTML/Global_attributes#attr-id"><code>id</code></a>) de l'élément.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceElementTiming/identifier"><code>PerformanceElementTiming.identifier</code></a> {{ReadOnlyInline}} {{Experimental_Inline}} {{Non-Standard_Inline}}</dt>
-  <dd>Une <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui est la valeur de l'attribut <a href="/fr/docs/Web/HTML/Attributes/elementtiming"><code>elementtiming</code></a> de l'élément.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceElementTiming/intersectionRect"><code>PerformanceElementTiming.intersectionRect</code></a> {{ReadOnlyInline}} {{Experimental_Inline}} {{Non-Standard_Inline}}</dt>
-  <dd>Un <a href="/fr/docs/Web/API/DOMRectReadOnly"><code>DOMRectReadOnly</code></a> qui est le rectangle de l'élément dans la fenêtre d'affichage.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceElementTiming/loadTime"><code>PerformanceElementTiming.loadTime</code></a> {{ReadOnlyInline}} {{Experimental_Inline}} {{Non-Standard_Inline}}</dt>
-  <dd>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> avec l'heure de chargement de l'élément.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceElementTiming/naturalHeight"><code>PerformanceElementTiming.naturalHeight</code></a> {{ReadOnlyInline}} {{Experimental_Inline}} {{Non-Standard_Inline}}</dt>
-  <dd>Un entier de 32 bits non signé (<i>unsigned long</i>) qui est la hauteur intrinsèque de l'image si cela est appliqué à une image, 0 pour le texte.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceElementTiming/naturalWidth"><code>PerformanceElementTiming.naturalWidth</code></a> {{ReadOnlyInline}} {{Experimental_Inline}} {{Non-Standard_Inline}}</dt>
-  <dd>Un entier de 32 bits non signé (<i>unsigned long</i>) qui est la largeur intrinsèque de l'image si cela est appliqué à une image, 0 pour le texte.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceElementTiming/renderTime"><code>PerformanceElementTiming.renderTime</code></a> {{ReadOnlyInline}} {{Experimental_Inline}} {{Non-Standard_Inline}}</dt>
-  <dd>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> avec le renderTime de l'élément.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceElementTiming/url"><code>PerformanceElementTiming.url</code></a> {{ReadOnlyInline}} {{Experimental_Inline}} {{Non-Standard_Inline}}</dt>
-  <dd>Une <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui est l'URL initiale de la demande de ressources pour les images, 0 pour le texte.</dd>
-</dl>
+- [`PerformanceElementTiming.element`](/fr/docs/Web/API/PerformanceElementTiming/element) {{ReadOnlyInline}} {{Experimental_Inline}} {{Non-Standard_Inline}}
+  - : Un [`Element`](/fr/docs/Web/API/Element) représentant l'élément pour lequel nous retournons des informations.
+- [`PerformanceElementTiming.id`](/fr/docs/Web/API/PerformanceElementTiming/id) {{ReadOnlyInline}} {{Experimental_Inline}} {{Non-Standard_Inline}}
+  - : Un [`DOMString`](/fr/docs/Web/API/DOMString) qui est l'identifiant (attribut [`id`](/fr/docs/Web/HTML/Global_attributes#attr-id)) de l'élément.
+- [`PerformanceElementTiming.identifier`](/fr/docs/Web/API/PerformanceElementTiming/identifier) {{ReadOnlyInline}} {{Experimental_Inline}} {{Non-Standard_Inline}}
+  - : Une [`DOMString`](/fr/docs/Web/API/DOMString) qui est la valeur de l'attribut [`elementtiming`](/fr/docs/Web/HTML/Attributes/elementtiming) de l'élément.
+- [`PerformanceElementTiming.intersectionRect`](/fr/docs/Web/API/PerformanceElementTiming/intersectionRect) {{ReadOnlyInline}} {{Experimental_Inline}} {{Non-Standard_Inline}}
+  - : Un [`DOMRectReadOnly`](/fr/docs/Web/API/DOMRectReadOnly) qui est le rectangle de l'élément dans la fenêtre d'affichage.
+- [`PerformanceElementTiming.loadTime`](/fr/docs/Web/API/PerformanceElementTiming/loadTime) {{ReadOnlyInline}} {{Experimental_Inline}} {{Non-Standard_Inline}}
+  - : Un [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp) avec l'heure de chargement de l'élément.
+- [`PerformanceElementTiming.naturalHeight`](/fr/docs/Web/API/PerformanceElementTiming/naturalHeight) {{ReadOnlyInline}} {{Experimental_Inline}} {{Non-Standard_Inline}}
+  - : Un entier de 32 bits non signé (_unsigned long_) qui est la hauteur intrinsèque de l'image si cela est appliqué à une image, 0 pour le texte.
+- [`PerformanceElementTiming.naturalWidth`](/fr/docs/Web/API/PerformanceElementTiming/naturalWidth) {{ReadOnlyInline}} {{Experimental_Inline}} {{Non-Standard_Inline}}
+  - : Un entier de 32 bits non signé (_unsigned long_) qui est la largeur intrinsèque de l'image si cela est appliqué à une image, 0 pour le texte.
+- [`PerformanceElementTiming.renderTime`](/fr/docs/Web/API/PerformanceElementTiming/renderTime) {{ReadOnlyInline}} {{Experimental_Inline}} {{Non-Standard_Inline}}
+  - : Un [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp) avec le renderTime de l'élément.
+- [`PerformanceElementTiming.url`](/fr/docs/Web/API/PerformanceElementTiming/url) {{ReadOnlyInline}} {{Experimental_Inline}} {{Non-Standard_Inline}}
+  - : Une [`DOMString`](/fr/docs/Web/API/DOMString) qui est l'URL initiale de la demande de ressources pour les images, 0 pour le texte.
 
-<h2 id="Methods">Méthodes</h2>
+## Méthodes
 
-<dl>
-  <dt><a href="/fr/docs/Web/API/PerformanceElementTiming/toJSON"><code>PerformanceElementTiming.toJSON()</code></a> {{Experimental_Inline}} {{Non-Standard_Inline}}</dt>
-  <dd>Génère une description JSON de l'objet.</dd>
-</dl>
+- [`PerformanceElementTiming.toJSON()`](/fr/docs/Web/API/PerformanceElementTiming/toJSON) {{Experimental_Inline}} {{Non-Standard_Inline}}
+  - : Génère une description JSON de l'objet.
 
-<h2 id="Examples">Exemples</h2>
+## Exemples
 
-<p>Dans cet exemple, nous avons deux éléments qui sont observés. Nous utilisons l'interface <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> pour créer une liste d'événements de mesure des performances. Dans notre cas, l'observation de l'élément <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>PerformanceEntry.entrytype</code></a> <code>element</code> afin d'utiliser l'interface <code>PerformanceElementTiming</code>.</p>
+Dans cet exemple, nous avons deux éléments qui sont observés. Nous utilisons l'interface [`PerformanceObserver`](/fr/docs/Web/API/PerformanceObserver) pour créer une liste d'événements de mesure des performances. Dans notre cas, l'observation de l'élément [`PerformanceEntry.entrytype`](/fr/docs/Web/API/PerformanceEntry/entryType) `element` afin d'utiliser l'interface `PerformanceElementTiming`.
 
-<p>Deux entrées seront affichées dans la console. La première contenant les détails de l'image, la seconde les détails du nœud texte.</p>
+Deux entrées seront affichées dans la console. La première contenant les détails de l'image, la seconde les détails du nœud texte.
 
-<pre class="brush: html">&lt;img src="image.jpg" elementtiming="big-image"&gt;
-&lt;p elementtiming="text" id="text-id"&gt;le texte ici&lt;/p&gt;</pre>
+```html
+<img src="image.jpg" elementtiming="big-image">
+<p elementtiming="text" id="text-id">le texte ici</p>
+```
 
-<pre class="brush: js">const observer = new PerformanceObserver((list) => {
+```js
+const observer = new PerformanceObserver((list) => {
   let entries = list.getEntries().forEach(function (entry) {
       console.log(entry);
   });
 });
-observer.observe({ entryTypes: ["element"] });</pre>
+observer.observe({ entryTypes: ["element"] });
+```
 
-<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('Element Timing API','#sec-performance-element-timing','PerformanceElementTiming')}}</td>
-      <td>{{Spec2('Element Timing API')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                    | Statut                                   | Commentaire          |
+| -------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('Element Timing API','#sec-performance-element-timing','PerformanceElementTiming')}} | {{Spec2('Element Timing API')}} | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.PerformanceElementTiming")}}</p>
+{{Compat("api.PerformanceElementTiming")}}
diff --git a/files/fr/web/api/performanceelementtiming/intersectionrect/index.md b/files/fr/web/api/performanceelementtiming/intersectionrect/index.md
index 4954876475..a430ef9821 100644
--- a/files/fr/web/api/performanceelementtiming/intersectionrect/index.md
+++ b/files/fr/web/api/performanceelementtiming/intersectionrect/index.md
@@ -10,57 +10,49 @@ tags:
   - PerformanceElementTiming
 translation_of: Web/API/PerformanceElementTiming/intersectionRect
 ---
-<div>{{APIRef("Element Timing API")}}</div>
+{{APIRef("Element Timing API")}}
 
-<p>La propriété en lecture seule <strong><code>intersectionRect</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceElementTiming"><code>PerformanceElementTiming</code></a> renvoie le rectangle de l'élément dans la zone d'affichage (<i>viewport</i>).</p>
+La propriété en lecture seule **`intersectionRect`** de l'interface [`PerformanceElementTiming`](/fr/docs/Web/API/PerformanceElementTiming) renvoie le rectangle de l'élément dans la zone d'affichage (_viewport_).
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:js">var <var>rect</var> = PerformanceElementTiming.intersectionRect;</pre>
+```js
+var rect = PerformanceElementTiming.intersectionRect;
+```
 
-<h3>Valeur</h3>
-<p>Un objet <a href="/fr/docs/Web/API/DOMRectReadOnly"><code>DOMRectReadOnly</code></a> qui est le rectangle de l'élément dans la zone d'affichage.</p>
+### Valeur
 
-<p>Pour les images, il s'agit du rectangle d'affichage de l'image dans la zone d'affichage. Pour le texte, il s'agit du rectangle d'affichage du nœud dans la zone d'affichage. Il s'agit du plus petit rectangle qui contient l'union de tous les nœuds de texte appartenant à l'élément.</p>
+Un objet [`DOMRectReadOnly`](/fr/docs/Web/API/DOMRectReadOnly) qui est le rectangle de l'élément dans la zone d'affichage.
 
-<h2 id="Examples">Exemples</h2>
+Pour les images, il s'agit du rectangle d'affichage de l'image dans la zone d'affichage. Pour le texte, il s'agit du rectangle d'affichage du nœud dans la zone d'affichage. Il s'agit du plus petit rectangle qui contient l'union de tous les nœuds de texte appartenant à l'élément.
 
-<p>Dans cet exemple, l'appel à <code>entry.intersectionRect</code> renvoie un objet <a href="/fr/docs/Web/API/DOMRectReadOnly"><code>DOMRectReadOnly</code></a> avec le rectangle d'affichage de l'image.</p>
+## Exemples
 
-<pre class="brush:html">&lt;img src="image.jpg" alt="une belle image" elementtiming="big-image" id="myImage"&gt;</pre>
+Dans cet exemple, l'appel à `entry.intersectionRect` renvoie un objet [`DOMRectReadOnly`](/fr/docs/Web/API/DOMRectReadOnly) avec le rectangle d'affichage de l'image.
 
-<pre class="brush:js">const <var>observer</var> = new PerformanceObserver((list) => {
-  let <var>entries</var> = list.getEntries().forEach(function (entry) {
+```html
+<img src="image.jpg" alt="une belle image" elementtiming="big-image" id="myImage">
+```
+
+```js
+const observer = new PerformanceObserver((list) => {
+  let entries = list.getEntries().forEach(function (entry) {
     if (entry.identifier === "big-image") {
       console.log(entry.intersectionRect);
     }
   });
 });
-observer.observe({ entryTypes: ["element"] });</pre>
+observer.observe({ entryTypes: ["element"] });
+```
 
-<div class="note">
-  <p><strong>Note :</strong> Cet exemple utilise l'interface <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>PerformanceEntry.entryType</code></a> afin d'utiliser l'interface <code>PerformanceElementTiming</code>.</p>
-</div>
+> **Note :** Cet exemple utilise l'interface [`PerformanceObserver`](/fr/docs/Web/API/PerformanceObserver) pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément [`PerformanceEntry.entryType`](/fr/docs/Web/API/PerformanceEntry/entryType) afin d'utiliser l'interface `PerformanceElementTiming`.
 
-<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('Element Timing API','#dom-performanceelementtiming-intersectionrect','PerformanceElementTiming.intersectionRect')}}</td>
-      <td>{{Spec2('Element Timing API')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                                                                                            | Statut                                   | Commentaire          |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------- |
+| {{SpecName('Element Timing API','#dom-performanceelementtiming-intersectionrect','PerformanceElementTiming.intersectionRect')}} | {{Spec2('Element Timing API')}} | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.PerformanceElementTiming.intersectionRect")}}</p>
+{{Compat("api.PerformanceElementTiming.intersectionRect")}}
diff --git a/files/fr/web/api/performanceelementtiming/loadtime/index.md b/files/fr/web/api/performanceelementtiming/loadtime/index.md
index 28e33d6384..21da532b76 100644
--- a/files/fr/web/api/performanceelementtiming/loadtime/index.md
+++ b/files/fr/web/api/performanceelementtiming/loadtime/index.md
@@ -10,55 +10,47 @@ tags:
   - PerformanceElementTiming
 translation_of: Web/API/PerformanceElementTiming/loadTime
 ---
-<div>{{APIRef("Element Timing API")}}</div>
+{{APIRef("Element Timing API")}}
 
-<p>La propriété en lecture seule <strong><code>loadTime</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceElementTiming"><code>PerformanceElementTiming</code></a> renvoie toujours 0 pour le texte. Pour les images, elle renvoie le temps qui est le plus tardif entre le moment où la ressource image est chargée et le moment où elle est attachée à l'élément.</p>
+La propriété en lecture seule **`loadTime`** de l'interface [`PerformanceElementTiming`](/fr/docs/Web/API/PerformanceElementTiming) renvoie toujours 0 pour le texte. Pour les images, elle renvoie le temps qui est le plus tardif entre le moment où la ressource image est chargée et le moment où elle est attachée à l'élément.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:js">var <var>loadTime</var> = <var>PerformanceElementTiming</var>.loadTime;</pre>
+```js
+var loadTime = PerformanceElementTiming.loadTime;
+```
 
-<h3>Valeur</h3>
-<p>Un objet <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> avec le temps de chargement de l'élément.</p>
+### Valeur
 
-<h2 id="Examples">Exemples</h2>
+Un objet [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp) avec le temps de chargement de l'élément.
 
-<p>Dans cet exemple, l'appel à <code>entry.loadTime</code> renvoie le temps de chargement de l'image.</p>
+## Exemples
 
-<pre class="brush:html">&lt;img src="image.jpg" alt="une belle image" elementtiming="big-image" id="myImage"&gt;</pre>
+Dans cet exemple, l'appel à `entry.loadTime` renvoie le temps de chargement de l'image.
 
-<pre class="brush:js">const <var>observer</var> = new PerformanceObserver((list) => {
-  let <var>entries</var> = list.getEntries().forEach(function (entry) {
+```html
+<img src="image.jpg" alt="une belle image" elementtiming="big-image" id="myImage">
+```
+
+```js
+const observer = new PerformanceObserver((list) => {
+  let entries = list.getEntries().forEach(function (entry) {
     if (entry.identifier === "big-image") {
       console.log(entry.loadTime);
     }
   });
 });
-observer.observe({ entryTypes: ["element"] });</pre>
+observer.observe({ entryTypes: ["element"] });
+```
 
-<div class="note">
-  <p><strong>Note :</strong> Cet exemple utilise l'interface <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>PerformanceEntry.entryType</code></a> afin d'utiliser l'interface <code>PerformanceElementTiming</code>.</p>
-</div>
+> **Note :** Cet exemple utilise l'interface [`PerformanceObserver`](/fr/docs/Web/API/PerformanceObserver) pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément [`PerformanceEntry.entryType`](/fr/docs/Web/API/PerformanceEntry/entryType) afin d'utiliser l'interface `PerformanceElementTiming`.
 
-<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('Element Timing API','#dom-performanceelementtiming-loadtime','PerformanceElementTiming.loadTime')}}</td>
-      <td>{{Spec2('Element Timing API')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                                                                        | Statut                                   | Commentaire          |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('Element Timing API','#dom-performanceelementtiming-loadtime','PerformanceElementTiming.loadTime')}} | {{Spec2('Element Timing API')}} | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.PerformanceElementTiming.loadTime")}}</p>
+{{Compat("api.PerformanceElementTiming.loadTime")}}
diff --git a/files/fr/web/api/performanceelementtiming/naturalheight/index.md b/files/fr/web/api/performanceelementtiming/naturalheight/index.md
index 204efdc562..0fc7a49636 100644
--- a/files/fr/web/api/performanceelementtiming/naturalheight/index.md
+++ b/files/fr/web/api/performanceelementtiming/naturalheight/index.md
@@ -10,55 +10,47 @@ tags:
   - PerformanceElementTiming
 translation_of: Web/API/PerformanceElementTiming/naturalHeight
 ---
-<div>{{APIRef("Element Timing API")}}</div>
+{{APIRef("Element Timing API")}}
 
-<p>La propriété en lecture seule <strong><code>naturalHeight</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceElementTiming"><code>PerformanceElementTiming</code></a> renvoie la hauteur intrinsèque de l'élément image.</p>
+La propriété en lecture seule **`naturalHeight`** de l'interface [`PerformanceElementTiming`](/fr/docs/Web/API/PerformanceElementTiming) renvoie la hauteur intrinsèque de l'élément image.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:js">var <var>height</var> = PerformanceElementTiming.naturalHeight;</pre>
+```js
+var height = PerformanceElementTiming.naturalHeight;
+```
 
-<h3>Valeur</h3>
-<p>Un entier de 32 bits non signé (<i>unsigned long</i>) qui est la hauteur intrinsèque de l'image si cela est appliqué à une image, 0 pour le texte.</p>
+### Valeur
 
-<h2 id="Examples">Exemples</h2>
+Un entier de 32 bits non signé (_unsigned long_) qui est la hauteur intrinsèque de l'image si cela est appliqué à une image, 0 pour le texte.
 
-<p>Dans cet exemple, le fichier image a une largeur de 1000px et une hauteur de 750px. L'appel de <code>entry.naturalHeight</code> renvoie <code>750</code>, c'est-à-dire la hauteur intrinsèque en pixels.</p>
+## Exemples
 
-<pre class="brush:html">&lt;img src="image.jpg" alt="une belle image" elementtiming="big-image" id="myImage"&gt;</pre>
+Dans cet exemple, le fichier image a une largeur de 1000px et une hauteur de 750px. L'appel de `entry.naturalHeight` renvoie `750`, c'est-à-dire la hauteur intrinsèque en pixels.
 
-<pre class="brush:js">const <var>observer</var> = new PerformanceObserver((list) => {
-  let <var>entries</var> = list.getEntries().forEach(function (entry) {
+```html
+<img src="image.jpg" alt="une belle image" elementtiming="big-image" id="myImage">
+```
+
+```js
+const observer = new PerformanceObserver((list) => {
+  let entries = list.getEntries().forEach(function (entry) {
     if (entry.identifier === "big-image") {
       console.log(entry.naturalHeight);
     }
   });
 });
-observer.observe({ entryTypes: ["element"] });</pre>
+observer.observe({ entryTypes: ["element"] });
+```
 
-<div class="note">
-  <p><strong>Note :</strong> Cet exemple utilise l'interface <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>PerformanceEntry.entryType</code></a> afin d'utiliser l'interface <code>PerformanceElementTiming</code>.</p>
-</div>
+> **Note :** Cet exemple utilise l'interface [`PerformanceObserver`](/fr/docs/Web/API/PerformanceObserver) pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément [`PerformanceEntry.entryType`](/fr/docs/Web/API/PerformanceEntry/entryType) afin d'utiliser l'interface `PerformanceElementTiming`.
 
-<h2 id="Specifications">Specifications</h2>
+## Specifications
 
-<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('Element Timing API','#dom-performanceelementtiming-naturalheight','PerformanceElementTiming.naturalHeight')}}</td>
-      <td>{{Spec2('Element Timing API')}}</td>
-      <td>Initial definition.</td>
-   </tr>
-  </tbody>
-</table>
+| Spécification                                                                                                                                                    | Statut                                   | Commentaire         |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ------------------- |
+| {{SpecName('Element Timing API','#dom-performanceelementtiming-naturalheight','PerformanceElementTiming.naturalHeight')}} | {{Spec2('Element Timing API')}} | Initial definition. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.PerformanceElementTiming.naturalHeight")}}</p>
+{{Compat("api.PerformanceElementTiming.naturalHeight")}}
diff --git a/files/fr/web/api/performanceelementtiming/naturalwidth/index.md b/files/fr/web/api/performanceelementtiming/naturalwidth/index.md
index 3e254d3289..1843a6a58f 100644
--- a/files/fr/web/api/performanceelementtiming/naturalwidth/index.md
+++ b/files/fr/web/api/performanceelementtiming/naturalwidth/index.md
@@ -10,54 +10,47 @@ tags:
   - PerformanceElementTiming
 translation_of: Web/API/PerformanceElementTiming/naturalWidth
 ---
-<div>{{APIRef("Element Timing API")}}</div>
+{{APIRef("Element Timing API")}}
 
-<p>La propriété en lecture seule <strong><code>naturalWidth</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceElementTiming"><code>PerformanceElementTiming</code></a> renvoie la largeur intrinsèque de l'élément image.</p>
-<h2 id="Syntax">Syntax</h2>
+La propriété en lecture seule **`naturalWidth`** de l'interface [`PerformanceElementTiming`](/fr/docs/Web/API/PerformanceElementTiming) renvoie la largeur intrinsèque de l'élément image.
 
-<pre class="brush:js">var <var>width</var> = <var>PerformanceElementTiming</var>.naturalWidth;</pre>
+## Syntax
 
-<h3>Valeur</h3>
-<p>Un entier de 32 bits non signé (<i>unsigned long</i>) qui est la largeur intrinsèque de l'image si cela est appliqué à une image, 0 pour le texte.</p>
+```js
+var width = PerformanceElementTiming.naturalWidth;
+```
 
-<h2 id="Examples">Exemples</h2>
+### Valeur
 
-<p>Dans cet exemple, le fichier image a une largeur de 1000px et une hauteur de 750px. L'appel de <code>entry.naturalWidth</code> renvoie <code>1000</code>, c'est-à-dire la largeur intrinsèque en pixels.</p>
+Un entier de 32 bits non signé (_unsigned long_) qui est la largeur intrinsèque de l'image si cela est appliqué à une image, 0 pour le texte.
 
-<pre class="brush:html">&lt;img src="image.jpg" alt="une belle image" elementtiming="big-image" id="myImage"&gt;</pre>
+## Exemples
 
-<pre class="brush:js">const <var>observer</var> = new PerformanceObserver((list) => {
-  let <var>entries</var> = list.getEntries().forEach(function (entry) {
+Dans cet exemple, le fichier image a une largeur de 1000px et une hauteur de 750px. L'appel de `entry.naturalWidth` renvoie `1000`, c'est-à-dire la largeur intrinsèque en pixels.
+
+```html
+<img src="image.jpg" alt="une belle image" elementtiming="big-image" id="myImage">
+```
+
+```js
+const observer = new PerformanceObserver((list) => {
+  let entries = list.getEntries().forEach(function (entry) {
     if (entry.identifier === "big-image") {
       console.log(entry.naturalWidth);
     }
   });
 });
-observer.observe({ entryTypes: ["element"] });</pre>
-
-<div class="note">
-  <p><strong>Note :</strong> Cet exemple utilise l'interface <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>PerformanceEntry.entryType</code></a> afin d'utiliser l'interface <code>PerformanceElementTiming</code>.</p>
-</div>
-
-<h2 id="Specifications">Specifications</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('Element Timing API','#dom-performanceelementtiming-naturalwidth','PerformanceElementTiming.naturalWidth')}}</td>
-      <td>{{Spec2('Element Timing API')}}</td>
-      <td>Définition initiale.</td>
-   </tr>
-  </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.PerformanceElementTiming.naturalWidth")}}</p>
+observer.observe({ entryTypes: ["element"] });
+```
+
+> **Note :** Cet exemple utilise l'interface [`PerformanceObserver`](/fr/docs/Web/API/PerformanceObserver) pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément [`PerformanceEntry.entryType`](/fr/docs/Web/API/PerformanceEntry/entryType) afin d'utiliser l'interface `PerformanceElementTiming`.
+
+## Specifications
+
+| Spécification                                                                                                                                                    | Statut                                   | Commentaire          |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('Element Timing API','#dom-performanceelementtiming-naturalwidth','PerformanceElementTiming.naturalWidth')}} | {{Spec2('Element Timing API')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.PerformanceElementTiming.naturalWidth")}}
diff --git a/files/fr/web/api/performanceelementtiming/rendertime/index.md b/files/fr/web/api/performanceelementtiming/rendertime/index.md
index b541771563..3614a4f1cf 100644
--- a/files/fr/web/api/performanceelementtiming/rendertime/index.md
+++ b/files/fr/web/api/performanceelementtiming/rendertime/index.md
@@ -10,59 +10,51 @@ tags:
   - PerformanceElementTiming
 translation_of: Web/API/PerformanceElementTiming/renderTime
 ---
-<div>{{APIRef("Element Timing API")}}</div>
+{{APIRef("Element Timing API")}}
 
-<p>La propriété en lecture seule <strong><code>renderTime</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceElementTiming"><code>PerformanceElementTiming</code></a> renvoie le temps écoulé pour le rendu de l'élément associé.</p>
+La propriété en lecture seule **`renderTime`** de l'interface [`PerformanceElementTiming`](/fr/docs/Web/API/PerformanceElementTiming) renvoie le temps écoulé pour le rendu de l'élément associé.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:js">var <var>renderTime</var> = PerformanceElementTiming.renderTime;</pre>
+```js
+var renderTime = PerformanceElementTiming.renderTime;
+```
 
-<h3>Valeur</h3>
-<p>Un objet <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> avec le temps de rendu de l'élément.</p>
+### Valeur
 
-<p>Pour les images, il s'agira de l'<strong>horodatage du rendu de l'image</strong>. Ceci est défini comme le moment du rendu suivant le chargement complet de l'image. Si la vérification de l'autorisation de temporisation échoue (comme défini par l'en-tête <a href="/fr/docs/Web/HTTP/Headers/Timing-Allow-Origin">Timing-allow-origin</a>), ceci retournera 0.</p>
+Un objet [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp) avec le temps de rendu de l'élément.
 
-<p>Pour les nœuds de texte, il s'agira de l'<strong>horodatage du rendu du texte</strong>. Ceci est défini comme le moment où l'élément est affiché à l'écran.</p>
+Pour les images, il s'agira de l'**horodatage du rendu de l'image**. Ceci est défini comme le moment du rendu suivant le chargement complet de l'image. Si la vérification de l'autorisation de temporisation échoue (comme défini par l'en-tête [Timing-allow-origin](/fr/docs/Web/HTTP/Headers/Timing-Allow-Origin)), ceci retournera 0.
 
-<h2 id="Examples">Exemples</h2>
+Pour les nœuds de texte, il s'agira de l'**horodatage du rendu du texte**. Ceci est défini comme le moment où l'élément est affiché à l'écran.
 
-<p>Dans cet exemple, appeler <code>entry.renderTime</code> renvoie le temps de rendu de l'élément image.</p>
+## Exemples
 
-<pre class="brush:html">&lt;img src="image.jpg" alt="une belle image" elementtiming="big-image" id="myImage"&gt;</pre>
+Dans cet exemple, appeler `entry.renderTime` renvoie le temps de rendu de l'élément image.
 
-<pre class="brush:js">const <var>observer</var> = new PerformanceObserver((list) => {
-  let <var>entries</var> = list.getEntries().forEach(function (entry) {
+```html
+<img src="image.jpg" alt="une belle image" elementtiming="big-image" id="myImage">
+```
+
+```js
+const observer = new PerformanceObserver((list) => {
+  let entries = list.getEntries().forEach(function (entry) {
     if (entry.identifier === "big-image") {
       console.log(entry.renderTime);
     }
   });
 });
-observer.observe({ entryTypes: ["element"] });</pre>
-
-<div class="note">
-  <p><strong>Note :</strong> Cet exemple utilise l'interface <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>PerformanceEntry.entryType</code></a> afin d'utiliser l'interface <code>PerformanceElementTiming</code>.</p>
-</div>
-
-<h2 id="Specifications">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('Element Timing API','#dom-performanceelementtiming-rendertime','PerformanceElementTiming.renderTime')}}</td>
-      <td>{{Spec2('Element Timing API')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.PerformanceElementTiming.renderTime")}}</p>
+observer.observe({ entryTypes: ["element"] });
+```
+
+> **Note :** Cet exemple utilise l'interface [`PerformanceObserver`](/fr/docs/Web/API/PerformanceObserver) pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément [`PerformanceEntry.entryType`](/fr/docs/Web/API/PerformanceEntry/entryType) afin d'utiliser l'interface `PerformanceElementTiming`.
+
+## Spécifications
+
+| Spécification                                                                                                                                            | Statut                                   | Commentaire          |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('Element Timing API','#dom-performanceelementtiming-rendertime','PerformanceElementTiming.renderTime')}} | {{Spec2('Element Timing API')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.PerformanceElementTiming.renderTime")}}
diff --git a/files/fr/web/api/performanceelementtiming/tojson/index.md b/files/fr/web/api/performanceelementtiming/tojson/index.md
index b0dd7affae..bf0eb51cb8 100644
--- a/files/fr/web/api/performanceelementtiming/tojson/index.md
+++ b/files/fr/web/api/performanceelementtiming/tojson/index.md
@@ -10,59 +10,48 @@ tags:
   - PerformanceElementTiming
 translation_of: Web/API/PerformanceElementTiming/toJSON
 ---
-<div>{{APIRef("Element Timing API")}}</div>
+{{APIRef("Element Timing API")}}
 
-<p>La méthode <strong><code>toJSON()</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceElementTiming"><code>PerformanceElementTiming</code></a> est un sérialiseur standard. Elle renvoie une représentation JSON des propriétés de l'objet.</p>
+La méthode **`toJSON()`** de l'interface [`PerformanceElementTiming`](/fr/docs/Web/API/PerformanceElementTiming) est un sérialiseur standard. Elle renvoie une représentation JSON des propriétés de l'objet.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:js">var <var>json</var> = PerformanceElementTiming.toJSON();</pre>
+```js
+var json = PerformanceElementTiming.toJSON();
+```
 
-<h3 id="Returns">Valeur de retour</h3>
+### Valeur de retour
 
-<dl>
-  <dt><code>json</code></dt>
-  <dd>Un objet JSON qui est la sérialisation de l'objet <a href="/fr/docs/Web/API/PerformanceElementTiming"><code>PerformanceElementTiming</code></a>.</dd>
-</dl>
+- `json`
+  - : Un objet JSON qui est la sérialisation de l'objet [`PerformanceElementTiming`](/fr/docs/Web/API/PerformanceElementTiming).
 
-<h2 id="Examples">Exemples</h2>
+## Exemples
 
-<p>Dans cet exemple, l'appel de <code>entry.toJSON()</code> renvoie une représentation JSON de l'objet <a href="/fr/docs/Web/API/PerformanceElementTiming"><code>PerformanceElementTiming</code></a>, avec les informations sur l'élément image.</p>
+Dans cet exemple, l'appel de `entry.toJSON()` renvoie une représentation JSON de l'objet [`PerformanceElementTiming`](/fr/docs/Web/API/PerformanceElementTiming), avec les informations sur l'élément image.
 
-<pre class="brush:html">&lt;img src="image.jpg" alt="une belle image" elementtiming="big-image" id="myImage"&gt;</pre>
+```html
+<img src="image.jpg" alt="une belle image" elementtiming="big-image" id="myImage">
+```
 
-<pre class="brush:js">const <var>observer</var> = new PerformanceObserver((list) => {
-  let <var>entries</var> = list.getEntries().forEach(function (entry) {
+```js
+const observer = new PerformanceObserver((list) => {
+  let entries = list.getEntries().forEach(function (entry) {
     if (entry.identifier === "big-image") {
       console.log(entry.toJSON());
     }
   });
 });
-observer.observe({ entryTypes: ["element"] });</pre>
+observer.observe({ entryTypes: ["element"] });
+```
 
-<div class="note">
-  <p><strong>Note :</strong> Cet exemple utilise l'interface <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>PerformanceEntry.entryType</code></a> afin d'utiliser l'interface <code>PerformanceElementTiming</code>.</p>
-</div>
+> **Note :** Cet exemple utilise l'interface [`PerformanceObserver`](/fr/docs/Web/API/PerformanceObserver) pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément [`PerformanceEntry.entryType`](/fr/docs/Web/API/PerformanceEntry/entryType) afin d'utiliser l'interface `PerformanceElementTiming`.
 
-<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('Element Timing API','#dom-performanceelementtiming-tojson','PerformanceElementTiming.toJson()')}}</td>
-      <td>{{Spec2('Element Timing API')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                                                                    | Statut                                   | Commentaire          |
+| ------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------- |
+| {{SpecName('Element Timing API','#dom-performanceelementtiming-tojson','PerformanceElementTiming.toJson()')}} | {{Spec2('Element Timing API')}} | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.PerformanceElementTiming.toJSON")}}</p>
+{{Compat("api.PerformanceElementTiming.toJSON")}}
diff --git a/files/fr/web/api/performanceelementtiming/url/index.md b/files/fr/web/api/performanceelementtiming/url/index.md
index 6828122328..bc22f2c6e6 100644
--- a/files/fr/web/api/performanceelementtiming/url/index.md
+++ b/files/fr/web/api/performanceelementtiming/url/index.md
@@ -10,55 +10,47 @@ tags:
   - PerformanceElementTiming
 translation_of: Web/API/PerformanceElementTiming/url
 ---
-<div>{{APIRef("Element Timing API")}}</div>
+{{APIRef("Element Timing API")}}
 
-<p>La propriété en lecture seule <strong><code>url</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceElementTiming"><code>PerformanceElementTiming</code></a> renvoie l'URL initiale de la demande de ressource lorsque l'élément est une image.</p>
+La propriété en lecture seule **`url`** de l'interface [`PerformanceElementTiming`](/fr/docs/Web/API/PerformanceElementTiming) renvoie l'URL initiale de la demande de ressource lorsque l'élément est une image.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:js">var <var>url</var> = <var>PerformanceElementTiming</var>.url;</pre>
+```js
+var url = PerformanceElementTiming.url;
+```
 
-<h3>Valeur</h3>
-<p>Une <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui est l'URL initiale de la demande de ressources pour les images ou 0 pour le texte.</p>
+### Valeur
 
-<h2 id="Examples">Exemples</h2>
+Une [`DOMString`](/fr/docs/Web/API/DOMString) qui est l'URL initiale de la demande de ressources pour les images ou 0 pour le texte.
 
-<p>Dans cet exemple, appeler <code>entry.url</code> renvoie <code>https://example.com/image.jpg</code>.</p>
+## Exemples
 
-<pre class="brush:html">&lt;img src="https://example.com/image.jpg" alt="une belle imahe" elementtiming="big-image" id="myImage"&gt;</pre>
+Dans cet exemple, appeler `entry.url` renvoie `https://example.com/image.jpg`.
 
-<pre class="brush:js">const <var>observer</var> = new PerformanceObserver((list) => {
-  let <var>entries</var> = list.getEntries().forEach(function (entry) {
+```html
+<img src="https://example.com/image.jpg" alt="une belle imahe" elementtiming="big-image" id="myImage">
+```
+
+```js
+const observer = new PerformanceObserver((list) => {
+  let entries = list.getEntries().forEach(function (entry) {
     if (entry.identifier === "big-image") {
       console.log(entry.url);
     }
   });
 });
-observer.observe({ entryTypes: ["element"] });</pre>
+observer.observe({ entryTypes: ["element"] });
+```
 
-<div class="note">
-  <p><strong>Note :</strong> Cet exemple utilise l'interface <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>PerformanceEntry.entryType</code></a> afin d'utiliser l'interface <code>PerformanceElementTiming</code>.</p>
-</div>
+> **Note :** Cet exemple utilise l'interface [`PerformanceObserver`](/fr/docs/Web/API/PerformanceObserver) pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément [`PerformanceEntry.entryType`](/fr/docs/Web/API/PerformanceEntry/entryType) afin d'utiliser l'interface `PerformanceElementTiming`.
 
-<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('Element Timing API','#dom-performanceelementtiming-url','PerformanceElementTiming.url')}}</td>
-      <td>{{Spec2('Element Timing API')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                                                            | Statut                                   | Commentaire          |
+| ---------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('Element Timing API','#dom-performanceelementtiming-url','PerformanceElementTiming.url')}} | {{Spec2('Element Timing API')}} | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.PerformanceElementTiming.url")}}</p>
+{{Compat("api.PerformanceElementTiming.url")}}
diff --git a/files/fr/web/api/performanceentry/duration/index.md b/files/fr/web/api/performanceentry/duration/index.md
index 8fa0aa4edf..8a306ebe80 100644
--- a/files/fr/web/api/performanceentry/duration/index.md
+++ b/files/fr/web/api/performanceentry/duration/index.md
@@ -10,41 +10,40 @@ tags:
   - Performance Web
 translation_of: Web/API/PerformanceEntry/duration
 ---
-<div>{{APIRef("Performance Timeline API")}}</div>
+{{APIRef("Performance Timeline API")}}
 
-<p>La propriété <strong><code>duration</code></strong> renvoie un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> qui correspond à la durée de l'<a href="/fr/docs/Web/API/PerformanceEntry">entrée de performance</a>.</p>
+La propriété **`duration`** renvoie un [`timestamp`](/fr/docs/Web/API/DOMHighResTimeStamp) qui correspond à la durée de l'[entrée de performance](/fr/docs/Web/API/PerformanceEntry).
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<p>La valeur retournée par cette propriété dépend du <a href="/fr/docs/Web/API/PerformanceEntry/entryType">type</a> de l'entrée de performance :</p>
+La valeur retournée par cette propriété dépend du [type](/fr/docs/Web/API/PerformanceEntry/entryType) de l'entrée de performance :
 
-<ul>
-  <li>« <code>frame</code> » - retourne un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> indiquant la différence entre le <code>startTime</code> de deux <i>frames</i> successives.</li>
-  <li>« <code>mark</code> » - retourne "<code>0</code>" (une marque n'a pas de durée).</li>
-  <li>« <code>measure</code> » - retourne le <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> qui correspond à la durée de la mesure.</li>
-  <li>« <code>navigation</code> » - retourne le <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> qui est respectivement la différence entre les propriétés <a href="/fr/docs/Web/API/PerformanceNavigationTiming/loadEventEnd"><code>PerformanceNavigationTiming.loadEventEnd</code></a> et <a href="/fr/docs/Web/API/PerformanceEntry/startTime"><code>PerformanceEntry.startTime</code></a>.</li>
-  <li>« <code>resource</code> » - renvoie la différence entre les deux <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamps</code></a> <a href="/fr/docs/Web/API/PerformanceResourceTiming/responseEnd"><code>responseEnd</code></a> (le moment de la fin de la réponse) de la ressource et <a href="/fr/docs/Web/API/PerformanceEntry/startTime"><code>startTime</code></a> (le point de départ).</li>
-</ul>
+- « `frame` » - retourne un [`timestamp`](/fr/docs/Web/API/DOMHighResTimeStamp) indiquant la différence entre le `startTime` de deux _frames_ successives.
+- « `mark` » - retourne "`0`" (une marque n'a pas de durée).
+- « `measure` » - retourne le [`timestamp`](/fr/docs/Web/API/DOMHighResTimeStamp) qui correspond à la durée de la mesure.
+- « `navigation` » - retourne le [`timestamp`](/fr/docs/Web/API/DOMHighResTimeStamp) qui est respectivement la différence entre les propriétés [`PerformanceNavigationTiming.loadEventEnd`](/fr/docs/Web/API/PerformanceNavigationTiming/loadEventEnd) et [`PerformanceEntry.startTime`](/fr/docs/Web/API/PerformanceEntry/startTime).
+- « `resource` » - renvoie la différence entre les deux [`timestamps`](/fr/docs/Web/API/DOMHighResTimeStamp) [`responseEnd`](/fr/docs/Web/API/PerformanceResourceTiming/responseEnd) (le moment de la fin de la réponse) de la ressource et [`startTime`](/fr/docs/Web/API/PerformanceEntry/startTime) (le point de départ).
 
-<p>Cette propriété est en {{readonlyInline}}.</p>
+Cette propriété est en {{readonlyInline}}.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:js"><em>entry</em>.duration;</pre>
+```js
+entry.duration;
+```
 
-<h3 id="Return_Value">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Un objet <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> représentant la durée de l'<a href="/fr/docs/Web/API/PerformanceEntry">entrée de performance</a>. Si le concept de durée ne s'applique pas à une mesure de performance particulière, le navigateur peut choisir de renvoyer une durée de 0.</p>
+Un objet [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp) représentant la durée de l'[entrée de performance](/fr/docs/Web/API/PerformanceEntry). Si le concept de durée ne s'applique pas à une mesure de performance particulière, le navigateur peut choisir de renvoyer une durée de 0.
 
-<div class="notecard note">
-  <p><strong>Note :</strong> si l'entrée de performance a un <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>entryType</code></a>  "<code>resource</code>" (c'est-à-dire que l'entrée est un objet <a href="/fr/docs/Web/API/PerformanceResourceTiming"><code>PerformanceResourceTiming</code></a>), cette propriété renvoie la différence entre les <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamps</code></a> <a href="/fr/docs/Web/API/PerformanceResourceTiming/responseEnd"><code>PerformanceEntry.responseEnd</code></a> et <a href="/fr/docs/Web/API/PerformanceEntry/startTime"><code>PerformanceEntry.startTime</code></a>.</p>
-</div>
+> **Note :** si l'entrée de performance a un [`entryType`](/fr/docs/Web/API/PerformanceEntry/entryType) "`resource`" (c'est-à-dire que l'entrée est un objet [`PerformanceResourceTiming`](/fr/docs/Web/API/PerformanceResourceTiming)), cette propriété renvoie la différence entre les [`timestamps`](/fr/docs/Web/API/DOMHighResTimeStamp) [`PerformanceEntry.responseEnd`](/fr/docs/Web/API/PerformanceResourceTiming/responseEnd) et [`PerformanceEntry.startTime`](/fr/docs/Web/API/PerformanceEntry/startTime).
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<p>L'exemple suivant montre l'utilisation de la propriété <code>duration</code>.</p>
+L'exemple suivant montre l'utilisation de la propriété `duration`.
 
-<pre class="brush:js">function run_PerformanceEntry() {
+```js
+function run_PerformanceEntry() {
   console.log("Support de PerformanceEntry ...");
 
   if (performance.mark === undefined) {
@@ -58,63 +57,46 @@ translation_of: Web/API/PerformanceEntry/duration
   performance.mark("End");
 
   // Utilise getEntries() pour itérer à travers chaque entrée.
-  let <var>p</var> = performance.getEntries();
-  for (let <var>i</var>=0; i &lt; p.length; i++) {
+  let p = performance.getEntries();
+  for (let i=0; i < p.length; i++) {
     console.log("Entry[" + i + "]");
     check_PerformanceEntry(p[i]);
   }
 }
-function check_PerformanceEntry(<var>obj</var>) {
-  let <var>properties</var> = ["name", "entryType", "startTime", "duration"];
-  let <var>methods</var> = ["toJSON"];
+function check_PerformanceEntry(obj) {
+  let properties = ["name", "entryType", "startTime", "duration"];
+  let methods = ["toJSON"];
 
-  for (let <var>i</var>=0; i &lt; properties.length; i++) {
+  for (let i=0; i < properties.length; i++) {
     // check each property
-    let <var>supported</var> = properties[i] in obj;
+    let supported = properties[i] in obj;
     if (supported)
       console.log("..." + properties[i] + " = " + obj[properties[i]]);
     else
       console.log("..." + properties[i] + " = N'est pas pris en charge");
   }
-  for (let <var>i</var>=0; i &lt; methods.length; i++) {
+  for (let i=0; i < methods.length; i++) {
     // check each method
-    let <var>supported</var> = typeof obj[methods[i]] == "function";
+    let supported = typeof obj[methods[i]] == "function";
     if (supported) {
-      let <var>js</var> = obj[methods[i]]();
+      let js = obj[methods[i]]();
       console.log("..." + methods[i] + "() = " + JSON.stringify(js));
     } else {
       console.log("..." + methods[i] + " = N'est pas pris en charge");
     }
   }
 }
-</pre>
-
-<h2 id="Specifications">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('Performance Timeline Level 2', '#dom-performanceentry-duration',
-        'duration')}}</td>
-      <td>{{Spec2('Performance Timeline Level 2')}}</td>
-      <td></td>
-    </tr>
-    <tr>
-      <td>{{SpecName('Performance Timeline', '#dom-performanceentry-duration',
-        'duration')}}</td>
-      <td>{{Spec2('Performance Timeline')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.PerformanceEntry.duration")}}</p>
+```
+
+## Spécifications
+
+| Spécification                                                                                                                        | Statut                                                   | Commentaire          |
+| ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------- | -------------------- |
+| {{SpecName('Performance Timeline Level 2', '#dom-performanceentry-duration',
+        'duration')}} | {{Spec2('Performance Timeline Level 2')}} |                      |
+| {{SpecName('Performance Timeline', '#dom-performanceentry-duration',
+        'duration')}}             | {{Spec2('Performance Timeline')}}             | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.PerformanceEntry.duration")}}
diff --git a/files/fr/web/api/performanceentry/entrytype/index.md b/files/fr/web/api/performanceentry/entrytype/index.md
index 63ed9dc6c7..8b8f812f3d 100644
--- a/files/fr/web/api/performanceentry/entrytype/index.md
+++ b/files/fr/web/api/performanceentry/entrytype/index.md
@@ -11,83 +11,40 @@ tags:
   - Performance Web
 translation_of: Web/API/PerformanceEntry/entryType
 ---
-<div>{{APIRef("Performance Timeline API")}}</div>
-
-<p>La propriété <strong><code>entryType</code></strong> renvoie un <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> représentant le type de mesure de performance tel que, par exemple, « <code>mark</code> ». Cette propriété est en lecture seule.</p>
-
-<p>{{AvailableInWorkers}}</p>
-
-<h2 id="Syntax">Syntaxe</h2>
-
-<pre class="brush:js">var <var>type</var> = <var>entry</var>.entryType;</pre>
-
-<h3 id="Return_Value">Valeur de retour</h3>
-
-<p>La valeur de retour dépend du sous-type de l'objet <code>PerformanceEntry</code> et affecte la valeur de la propriété <a href="/fr/docs/Web/API/PerformanceEntry/name"><code>PerformanceEntry.name</code></a> comme le montre le tableau ci-dessous.</p>
-
-<h3 id="Performance_entry_type_names">Noms des types d'entrée de performance</h3>
-
-<table class="standard-table">
-  <thead>
-    <tr>
-      <th scope="col">Valeur</th>
-      <th scope="col">Sous-type</th>
-      <th scope="col">Type de propriété pour le nom</th>
-      <th scope="col">Description de la valeur du nom.</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>element</code></td>
-      <td><a href="/fr/docs/Web/API/PerformanceElementTiming"><code>PerformanceElementTiming</code></a></td>
-      <td><a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a></td>
-      <td>Rapporte le temps de chargement des éléments.</td>
-    </tr>
-    <tr>
-      <td><code>frame</code>, <code>navigation</code></td>
-      <td><a href="/fr/docs/Web/API/PerformanceFrameTiming"><code>PerformanceFrameTiming</code></a>,
-        <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a></td>
-      <td><a href="/fr/docs/Web/API/URL"><code>URL</code></a></td>
-      <td>L'adresse du document.</td>
-    </tr>
-    <tr>
-      <td><code>resource</code></td>
-      <td><a href="/fr/docs/Web/API/PerformanceResourceTiming"><code>PerformanceResourceTiming</code></a></td>
-      <td><a href="/fr/docs/Web/API/URL"><code>URL</code></a></td>
-      <td>L'URL résolue de la ressource demandée. Cette valeur ne change pas même si la demande est redirigée.</td>
-    </tr>
-    <tr>
-      <td><code>mark</code></td>
-      <td><a href="/fr/docs/Web/API/PerformanceMark"><code>PerformanceMark</code></a></td>
-      <td><a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a></td>
-      <td>Le nom utilisé lorsque la marque a été créée en appelant <a href="/fr/docs/Web/API/Performance/mark"><code>mark()</code></a>.</td>
-    </tr>
-    <tr>
-      <td><code>measure</code></td>
-      <td><a href="/fr/docs/Web/API/PerformanceMeasure"><code>PerformanceMeasure</code></a></td>
-      <td><a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a></td>
-      <td>Le nom utilisé lorsque la mesure a été créée en appelant <a href="/fr/docs/Web/API/Performance/measure"><code>measure()</code></a>.</td>
-    </tr>
-    <tr>
-      <td><code>paint</code></td>
-      <td><a href="/fr/docs/Web/API/PerformancePaintTiming"><code>PerformancePaintTiming</code></a></td>
-      <td><a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a></td>
-      <td>Soit <code>'first-paint'</code> ou <code>'first-contentful-paint'</code>.</td>
-    </tr>
-    <tr>
-      <td><code>longtask</code></td>
-      <td><a href="/fr/docs/Web/API/PerformanceLongTaskTiming"><code>PerformanceLongTaskTiming</code></a></td>
-      <td><a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a></td>
-      <td>Signale les cas de tâches longues.</td>
-    </tr>
-  </tbody>
-</table>
-
-<h2 id="Example">Exemple</h2>
-
-<p>L'exemple suivant montre l'utilisation de la propriété <code>entryType</code>.</p>
-
-<pre class="brush: js">function run_PerformanceEntry() {
+{{APIRef("Performance Timeline API")}}
+
+La propriété **`entryType`** renvoie un [`DOMString`](/fr/docs/Web/API/DOMString) représentant le type de mesure de performance tel que, par exemple, « `mark` ». Cette propriété est en lecture seule.
+
+{{AvailableInWorkers}}
+
+## Syntaxe
+
+```js
+var type = entry.entryType;
+```
+
+### Valeur de retour
+
+La valeur de retour dépend du sous-type de l'objet `PerformanceEntry` et affecte la valeur de la propriété [`PerformanceEntry.name`](/fr/docs/Web/API/PerformanceEntry/name) comme le montre le tableau ci-dessous.
+
+### Noms des types d'entrée de performance
+
+| Valeur                | Sous-type                                                                                                                                          | Type de propriété pour le nom             | Description de la valeur du nom.                                                                              |
+| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
+| `element`             | [`PerformanceElementTiming`](/fr/docs/Web/API/PerformanceElementTiming)                                                                            | [`DOMString`](/fr/docs/Web/API/DOMString) | Rapporte le temps de chargement des éléments.                                                                 |
+| `frame`, `navigation` | [`PerformanceFrameTiming`](/fr/docs/Web/API/PerformanceFrameTiming), [`PerformanceNavigationTiming`](/fr/docs/Web/API/PerformanceNavigationTiming) | [`URL`](/fr/docs/Web/API/URL)             | L'adresse du document.                                                                                        |
+| `resource`            | [`PerformanceResourceTiming`](/fr/docs/Web/API/PerformanceResourceTiming)                                                                          | [`URL`](/fr/docs/Web/API/URL)             | L'URL résolue de la ressource demandée. Cette valeur ne change pas même si la demande est redirigée.          |
+| `mark`                | [`PerformanceMark`](/fr/docs/Web/API/PerformanceMark)                                                                                              | [`DOMString`](/fr/docs/Web/API/DOMString) | Le nom utilisé lorsque la marque a été créée en appelant [`mark()`](/fr/docs/Web/API/Performance/mark).       |
+| `measure`             | [`PerformanceMeasure`](/fr/docs/Web/API/PerformanceMeasure)                                                                                        | [`DOMString`](/fr/docs/Web/API/DOMString) | Le nom utilisé lorsque la mesure a été créée en appelant [`measure()`](/fr/docs/Web/API/Performance/measure). |
+| `paint`               | [`PerformancePaintTiming`](/fr/docs/Web/API/PerformancePaintTiming)                                                                                | [`DOMString`](/fr/docs/Web/API/DOMString) | Soit `'first-paint'` ou `'first-contentful-paint'`.                                                           |
+| `longtask`            | [`PerformanceLongTaskTiming`](/fr/docs/Web/API/PerformanceLongTaskTiming)                                                                          | [`DOMString`](/fr/docs/Web/API/DOMString) | Signale les cas de tâches longues.                                                                            |
+
+## Exemple
+
+L'exemple suivant montre l'utilisation de la propriété `entryType`.
+
+```js
+function run_PerformanceEntry() {
 
   // Vérifie le support des fonctionnalités avant de continuer
   if (performance.mark === undefined) {
@@ -100,39 +57,22 @@ translation_of: Web/API/PerformanceEntry/entryType
 
   // Vérifie le type d'entrée de toutes les entrées "begin".
   let entriesNamedBegin = performance.getEntriesByName("begin");
-  for (let i=0; i &lt; entriesNamedBegin.length; i++) {
+  for (let i=0; i < entriesNamedBegin.length; i++) {
     let typeOfEntry = entriesNamedBegin[i].entryType;
     console.log("L'entrée est de type : " + typeOfEntry);
   }
 }
-</pre>
-
-<h2 id="Specifications">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('Performance Timeline Level 2', '#dom-performanceentry-entrytype',
-        'entryType')}}</td>
-      <td>{{Spec2('Performance Timeline Level 2')}}</td>
-      <td></td>
-    </tr>
-    <tr>
-      <td>{{SpecName('Performance Timeline', '#dom-performanceentry-entrytype',
-        'entryType')}}</td>
-      <td>{{Spec2('Performance Timeline')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.PerformanceEntry.entryType")}}</p>
+```
+
+## Spécifications
+
+| Spécification                                                                                                                        | Statut                                                   | Commentaire          |
+| ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------- | -------------------- |
+| {{SpecName('Performance Timeline Level 2', '#dom-performanceentry-entrytype',
+        'entryType')}} | {{Spec2('Performance Timeline Level 2')}} |                      |
+| {{SpecName('Performance Timeline', '#dom-performanceentry-entrytype',
+        'entryType')}}         | {{Spec2('Performance Timeline')}}             | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.PerformanceEntry.entryType")}}
diff --git a/files/fr/web/api/performanceentry/index.md b/files/fr/web/api/performanceentry/index.md
index 32e388a73b..9a9a38ca32 100644
--- a/files/fr/web/api/performanceentry/index.md
+++ b/files/fr/web/api/performanceentry/index.md
@@ -10,51 +10,46 @@ tags:
   - Performance Web
 translation_of: Web/API/PerformanceEntry
 ---
-<div>{{APIRef("Performance Timeline API")}}</div>
+{{APIRef("Performance Timeline API")}}
 
-<p>L'objet <strong><code>PerformanceEntry</code></strong> encapsule une seule mesure de performance qui fait partie de la <em>chronologie de performance</em>. Une <em>entrée de performance</em> peut être créée directement en faisant <em><a href="/fr/docs/Web/API/PerformanceMark">une marque</a></em> ou <em><a href="/fr/docs/Web/API/PerformanceMeasure">une mesure</a></em> (par exemple en appelant la méthode <a href="/fr/docs/Web/API/Performance/mark"><code>mark()</code></a>) à un point explicite d'une application. Les entrées de performance sont également créées de manière indirecte, par exemple en chargeant une ressource (telle qu'une image).</p>
+L'objet **`PerformanceEntry`** encapsule une seule mesure de performance qui fait partie de la _chronologie de performance_. Une _entrée de performance_ peut être créée directement en faisant _[une marque](/fr/docs/Web/API/PerformanceMark)_ ou _[une mesure](/fr/docs/Web/API/PerformanceMeasure)_ (par exemple en appelant la méthode [`mark()`](/fr/docs/Web/API/Performance/mark)) à un point explicite d'une application. Les entrées de performance sont également créées de manière indirecte, par exemple en chargeant une ressource (telle qu'une image).
 
-<p>Les instances <code>PerformanceEntry</code> auront toujours l'un des sous-types suivants :</p>
+Les instances `PerformanceEntry` auront toujours l'un des sous-types suivants :
 
-<ul>
-  <li><a href="/fr/docs/Web/API/PerformanceMark"><code>PerformanceMark</code></a></li>
-  <li><a href="/fr/docs/Web/API/PerformanceMeasure"><code>PerformanceMeasure</code></a></li>
-  <li><a href="/fr/docs/Web/API/PerformanceFrameTiming"><code>PerformanceFrameTiming</code></a></li>
-  <li><a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a></li>
-  <li><a href="/fr/docs/Web/API/PerformanceResourceTiming"><code>PerformanceResourceTiming</code></a></li>
-  <li><a href="/fr/docs/Web/API/PerformancePaintTiming"><code>PerformancePaintTiming</code></a></li>
-</ul>
+- [`PerformanceMark`](/fr/docs/Web/API/PerformanceMark)
+- [`PerformanceMeasure`](/fr/docs/Web/API/PerformanceMeasure)
+- [`PerformanceFrameTiming`](/fr/docs/Web/API/PerformanceFrameTiming)
+- [`PerformanceNavigationTiming`](/fr/docs/Web/API/PerformanceNavigationTiming)
+- [`PerformanceResourceTiming`](/fr/docs/Web/API/PerformanceResourceTiming)
+- [`PerformancePaintTiming`](/fr/docs/Web/API/PerformancePaintTiming)
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Properties">Propriétés</h2>
+## Propriétés
 
-<dl>
-  <dt><a href="/fr/docs/Web/API/PerformanceEntry/name"><code>PerformanceEntry.name</code></a> {{readonlyInline}}</dt>
-  <dd>Une valeur qui précise davantage la valeur renvoyée par la propriété <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>PerformanceEntry.entryType</code></a>. La valeur des deux dépend du sous-type. Voir la page de la propriété pour les valeurs valides.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>PerformanceEntry.entryType</code></a> {{readonlyInline}}</dt>
-  <dd>Une chaîne de caractère <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> représentant le type de mesure de performance comme, par exemple, "<code>mark</code>". Voir la page des propriétés pour les valeurs valides.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceEntry/startTime"><code>PerformanceEntry.startTime</code></a> {{readonlyInline}}</dt>
-  <dd>Un objet <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> représentant l'heure de départ de la mesure de performance.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceEntry/duration"><code>PerformanceEntry.duration</code></a> {{readonlyInline}}</dt>
-  <dd>Un objet <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> représentant la valeur temporelle de la durée de l'événement de performance.</dd>
-</dl>
+- [`PerformanceEntry.name`](/fr/docs/Web/API/PerformanceEntry/name) {{readonlyInline}}
+  - : Une valeur qui précise davantage la valeur renvoyée par la propriété [`PerformanceEntry.entryType`](/fr/docs/Web/API/PerformanceEntry/entryType). La valeur des deux dépend du sous-type. Voir la page de la propriété pour les valeurs valides.
+- [`PerformanceEntry.entryType`](/fr/docs/Web/API/PerformanceEntry/entryType) {{readonlyInline}}
+  - : Une chaîne de caractère [`DOMString`](/fr/docs/Web/API/DOMString) représentant le type de mesure de performance comme, par exemple, "`mark`". Voir la page des propriétés pour les valeurs valides.
+- [`PerformanceEntry.startTime`](/fr/docs/Web/API/PerformanceEntry/startTime) {{readonlyInline}}
+  - : Un objet [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp) représentant l'heure de départ de la mesure de performance.
+- [`PerformanceEntry.duration`](/fr/docs/Web/API/PerformanceEntry/duration) {{readonlyInline}}
+  - : Un objet [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp) représentant la valeur temporelle de la durée de l'événement de performance.
 
-<h2 id="Methods">Méthodes</h2>
+## Méthodes
 
-<dl>
-  <dt><a href="/fr/docs/Web/API/PerformanceEntry/toJSON"><code>PerformanceEntry.toJSON()</code></a></dt>
-  <dd>Renvoie une représentation JSON de l'objet <code>PerformanceEntry</code>.</dd>
-</dl>
+- [`PerformanceEntry.toJSON()`](/fr/docs/Web/API/PerformanceEntry/toJSON)
+  - : Renvoie une représentation JSON de l'objet `PerformanceEntry`.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<p>L'exemple suivant vérifie toutes les propriétés <code>PerformanceEntry</code> pour voir si le navigateur les prend en charge et, le cas échéant, écrit leurs valeurs dans la console.</p>
+L'exemple suivant vérifie toutes les propriétés `PerformanceEntry` pour voir si le navigateur les prend en charge et, le cas échéant, écrit leurs valeurs dans la console.
 
-<pre class="brush:js">function print_PerformanceEntries() {
+```js
+function print_PerformanceEntries() {
   // Utilise getEntries() pour obtenir une liste de toutes les entrées de performance.
   let p = performance.getEntries();
-  for (let i = 0; i &lt; p.length; i++) {
+  for (let i = 0; i < p.length; i++) {
     console.log("PerformanceEntry[" + i + "]");
     print_PerformanceEntry(p[i]);
   }
@@ -65,7 +60,7 @@ function print_PerformanceEntry(perfEntry) {
                     "startTime",
                     "duration"];
 
-  for (let i = 0; i &lt; properties.length; i++) {
+  for (let i = 0; i < properties.length; i++) {
     // Vérifie chaque propriété
     let supported = properties[i] in perfEntry;
     if (supported) {
@@ -76,72 +71,23 @@ function print_PerformanceEntry(perfEntry) {
     }
   }
 }
-</pre>
-
-<h2 id="Specifications">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('Resource Timing 3')}}</td>
-      <td>{{Spec2('Resource Timing 3')}}</td>
-      <td></td>
-    </tr>
-    <tr>
-      <td>{{SpecName('Resource Timing 2')}}</td>
-      <td>{{Spec2('Resource Timing 2')}}</td>
-      <td></td>
-    </tr>
-    <tr>
-      <td>{{SpecName('Resource Timing')}}</td>
-      <td>{{Spec2('Resource Timing')}}</td>
-      <td>Ajoute l'interface <a href="/fr/docs/Web/API/PerformanceResourceTiming"><code>PerformanceResourceTiming</code></a> et la valeur <code>resource</code> pour <code>entryType</code>.</td>
-    </tr>
-    <tr>
-      <td>{{SpecName('Navigation Timing Level 2')}}</td>
-      <td>{{Spec2('Navigation Timing Level 2')}}</td>
-      <td></td>
-    </tr>
-    <tr>
-      <td>{{SpecName('Navigation Timing')}}</td>
-      <td>{{Spec2('Navigation Timing')}}</td>
-      <td>Ajoute l'interface <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a> et la valeur <code>navigation</code> pour <code>entryType</code>.</td>
-    </tr>
-    <tr>
-      <td>{{SpecName('User Timing Level 2')}}</td>
-      <td>{{Spec2('User Timing Level 2')}}</td>
-      <td></td>
-    </tr>
-    <tr>
-      <td>{{SpecName('User Timing')}}</td>
-      <td>{{Spec2('User Timing')}}</td>
-      <td>Ajoute les interfaces <a href="/fr/docs/Web/API/PerformanceMark"><code>PerformanceMark</code></a> et <a href="/fr/docs/Web/API/PerformanceMeasure"><code>PerformanceMeasure</code></a> ainsi que les valeurs <code>mark</code> et <code>measure</code> pour <code>entryType</code>.</td>
-    </tr>
-    <tr>
-      <td>{{SpecName('Frame Timing')}}</td>
-      <td>{{Spec2('Frame Timing')}}</td>
-      <td>Ajoute l'interface <a href="/fr/docs/Web/API/PerformanceFrameTiming"><code>PerformanceFrameTiming</code></a> et la valeur <code>frame</code> pour <code>entryType</code>.</td>
-    </tr>
-    <tr>
-      <td>{{SpecName('Performance Timeline Level 2', '#dom-performanceentry', 'PerformanceEntry')}}</td>
-      <td>{{Spec2('Performance Timeline Level 2')}}</td>
-      <td>Ajout de la méthode de sérialisation <code>toJSON()</code>.</td>
-    </tr>
-    <tr>
-      <td>{{SpecName('Performance Timeline', '#dom-performanceentry', 'PerformanceEntry')}}</td>
-      <td>{{Spec2('Performance Timeline')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.PerformanceEntry")}}</p>
+```
+
+## Spécifications
+
+| Spécification                                                                                                            | Statut                                                   | Commentaire                                                                                                                                                                                            |
+| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| {{SpecName('Resource Timing 3')}}                                                                             | {{Spec2('Resource Timing 3')}}                 |                                                                                                                                                                                                        |
+| {{SpecName('Resource Timing 2')}}                                                                             | {{Spec2('Resource Timing 2')}}                 |                                                                                                                                                                                                        |
+| {{SpecName('Resource Timing')}}                                                                                 | {{Spec2('Resource Timing')}}                     | Ajoute l'interface [`PerformanceResourceTiming`](/fr/docs/Web/API/PerformanceResourceTiming) et la valeur `resource` pour `entryType`.                                                                 |
+| {{SpecName('Navigation Timing Level 2')}}                                                                 | {{Spec2('Navigation Timing Level 2')}}     |                                                                                                                                                                                                        |
+| {{SpecName('Navigation Timing')}}                                                                             | {{Spec2('Navigation Timing')}}                 | Ajoute l'interface [`PerformanceNavigationTiming`](/fr/docs/Web/API/PerformanceNavigationTiming) et la valeur `navigation` pour `entryType`.                                                           |
+| {{SpecName('User Timing Level 2')}}                                                                         | {{Spec2('User Timing Level 2')}}             |                                                                                                                                                                                                        |
+| {{SpecName('User Timing')}}                                                                                     | {{Spec2('User Timing')}}                         | Ajoute les interfaces [`PerformanceMark`](/fr/docs/Web/API/PerformanceMark) et [`PerformanceMeasure`](/fr/docs/Web/API/PerformanceMeasure) ainsi que les valeurs `mark` et `measure` pour `entryType`. |
+| {{SpecName('Frame Timing')}}                                                                                     | {{Spec2('Frame Timing')}}                         | Ajoute l'interface [`PerformanceFrameTiming`](/fr/docs/Web/API/PerformanceFrameTiming) et la valeur `frame` pour `entryType`.                                                                          |
+| {{SpecName('Performance Timeline Level 2', '#dom-performanceentry', 'PerformanceEntry')}} | {{Spec2('Performance Timeline Level 2')}} | Ajout de la méthode de sérialisation `toJSON()`.                                                                                                                                                       |
+| {{SpecName('Performance Timeline', '#dom-performanceentry', 'PerformanceEntry')}}             | {{Spec2('Performance Timeline')}}             | Définition initiale.                                                                                                                                                                                   |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.PerformanceEntry")}}
diff --git a/files/fr/web/api/performanceentry/name/index.md b/files/fr/web/api/performanceentry/name/index.md
index 6e8c05fe4e..9bc2ee9e97 100644
--- a/files/fr/web/api/performanceentry/name/index.md
+++ b/files/fr/web/api/performanceentry/name/index.md
@@ -11,70 +11,36 @@ tags:
   - Performance Web
 translation_of: Web/API/PerformanceEntry/name
 ---
-<div>{{APIRef("Performance Timeline API")}}</div>
-
-<p>La propriété <strong><code>name</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceEntry"><code>PerformanceEntry</code></a> renvoie une valeur qui précise davantage la valeur renvoyée par la propriété <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>PerformanceEntry.entryType</code></a>. Cette propriété est en lecture seule.</p>
-
-<p>{{AvailableInWorkers}}</p>
-
-<h2 id="Syntax">Syntaxe</h2>
-
-<pre class="brush: js">var <var>name</var> = <var>entry</var>.name;
-</pre>
-
-<h3 id="Return_Value">Valeur de retour</h3>
-
-<p>La valeur de retour dépend du sous-type de l'objet <code>PerformanceEntry</code> et de la valeur de <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>PerformanceEntry.entryType</code></a>, comme le montre le tableau ci-dessous.</p>
-
-<table class="standard-table">
-  <thead>
-    <tr>
-      <th scope="col">Type de valeur pour <code>name</code></th>
-      <th scope="col">Sous-type</th>
-      <th scope="col">Type (<code>entryType</code>)</th>
-      <th scope="col">Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><a href="/fr/docs/Web/API/URL"><code>URL</code></a></td>
-      <td><a href="/fr/docs/Web/API/PerformanceFrameTiming"><code>PerformanceFrameTiming</code></a>,
-        <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a></td>
-      <td><code>frame</code>, <code>navigation</code></td>
-      <td>L'adresse du document.</td>
-    </tr>
-    <tr>
-      <td><a href="/fr/docs/Web/API/URL"><code>URL</code></a></td>
-      <td><a href="/fr/docs/Web/API/PerformanceResourceTiming"><code>PerformanceResourceTiming</code></a></td>
-      <td><code>resource</code></td>
-      <td>L'URL résolue de la ressource demandée. Cette valeur ne change pas même si la demande est redirigée.</td>
-    </tr>
-    <tr>
-      <td><a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a></td>
-      <td><a href="/fr/docs/Web/API/PerformanceMark"><code>PerformanceMark</code></a></td>
-      <td><code>mark</code></td>
-      <td>Le nom utilisé lorsque le marqueur a été créé en appelant <a href="/fr/docs/Web/API/Performance/mark"><code>mark()</code></a>.</td>
-    </tr>
-    <tr>
-      <td><a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a></td>
-      <td><a href="/fr/docs/Web/API/PerformanceMeasure"><code>PerformanceMeasure</code></a></td>
-      <td><code>measure</code></td>
-      <td>Le nom utilisé lorsque la mesure a été créée en appelant <a href="/fr/docs/Web/API/Performance/measure"><code>measure()</code></a>.</td>
-    </tr>
-    <tr>
-      <td><a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a></td>
-      <td><a href="/fr/docs/Web/API/PerformancePaintTiming"><code>PerformancePaintTiming</code></a></td>
-      <td><code>paint</code></td>
-      <td>Soit <code>'first-paint'</code> ou <code>'first-contentful-paint'</code>.</td>
-    </tr>
-  </tbody>
-</table>
-
-<h2 id="Example">Exemple</h2>
-
-<p>L'exemple suivant montre l'utilisation de la propriété <code>name</code>.</p>
-
-<pre class="brush: js">function run_PerformanceEntry() {
+{{APIRef("Performance Timeline API")}}
+
+La propriété **`name`** de l'interface [`PerformanceEntry`](/fr/docs/Web/API/PerformanceEntry) renvoie une valeur qui précise davantage la valeur renvoyée par la propriété [`PerformanceEntry.entryType`](/fr/docs/Web/API/PerformanceEntry/entryType). Cette propriété est en lecture seule.
+
+{{AvailableInWorkers}}
+
+## Syntaxe
+
+```js
+var name = entry.name;
+```
+
+### Valeur de retour
+
+La valeur de retour dépend du sous-type de l'objet `PerformanceEntry` et de la valeur de [`PerformanceEntry.entryType`](/fr/docs/Web/API/PerformanceEntry/entryType), comme le montre le tableau ci-dessous.
+
+| Type de valeur pour `name`                | Sous-type                                                                                                                                          | Type (`entryType`)    | Description                                                                                                   |
+| ----------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ------------------------------------------------------------------------------------------------------------- |
+| [`URL`](/fr/docs/Web/API/URL)             | [`PerformanceFrameTiming`](/fr/docs/Web/API/PerformanceFrameTiming), [`PerformanceNavigationTiming`](/fr/docs/Web/API/PerformanceNavigationTiming) | `frame`, `navigation` | L'adresse du document.                                                                                        |
+| [`URL`](/fr/docs/Web/API/URL)             | [`PerformanceResourceTiming`](/fr/docs/Web/API/PerformanceResourceTiming)                                                                          | `resource`            | L'URL résolue de la ressource demandée. Cette valeur ne change pas même si la demande est redirigée.          |
+| [`DOMString`](/fr/docs/Web/API/DOMString) | [`PerformanceMark`](/fr/docs/Web/API/PerformanceMark)                                                                                              | `mark`                | Le nom utilisé lorsque le marqueur a été créé en appelant [`mark()`](/fr/docs/Web/API/Performance/mark).      |
+| [`DOMString`](/fr/docs/Web/API/DOMString) | [`PerformanceMeasure`](/fr/docs/Web/API/PerformanceMeasure)                                                                                        | `measure`             | Le nom utilisé lorsque la mesure a été créée en appelant [`measure()`](/fr/docs/Web/API/Performance/measure). |
+| [`DOMString`](/fr/docs/Web/API/DOMString) | [`PerformancePaintTiming`](/fr/docs/Web/API/PerformancePaintTiming)                                                                                | `paint`               | Soit `'first-paint'` ou `'first-contentful-paint'`.                                                           |
+
+## Exemple
+
+L'exemple suivant montre l'utilisation de la propriété `name`.
+
+```js
+function run_PerformanceEntry() {
   console.log("Support de PerformanceEntry ...");
 
   if (performance.mark === undefined) {
@@ -89,7 +55,7 @@ translation_of: Web/API/PerformanceEntry/name
 
   // Utilise getEntries() pour itérer à travers chaque entrée.
   let p = performance.getEntries();
-  for (let i = 0; i &lt; p.length; i++) {
+  for (let i = 0; i < p.length; i++) {
     console.log("Entry[" + i + "]");
     check_PerformanceEntry(p[i]);
   }
@@ -98,7 +64,7 @@ function check_PerformanceEntry(obj) {
   let properties = ["name", "entryType", "startTime", "duration"];
   let methods = ["toJSON"];
 
-  for (let i = 0; i &lt; properties.length; i++) {
+  for (let i = 0; i < properties.length; i++) {
     // Vérifie chaque propriété
     let supported = properties[i] in obj;
     if (supported)
@@ -106,7 +72,7 @@ function check_PerformanceEntry(obj) {
     else
       console.log("..." + properties[i] + " = Not supported");
   }
-  for (let i = 0; i &lt; methods.length; i++) {
+  for (let i = 0; i < methods.length; i++) {
     // Vérifie chaque méthode
     let supported = typeof obj[methods[i]] == "function";
     if (supported) {
@@ -117,34 +83,17 @@ function check_PerformanceEntry(obj) {
     }
   }
 }
-</pre>
-
-<h2 id="Specifications">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('Performance Timeline Level 2', '#dom-performanceentry-name',
-        'name')}}</td>
-      <td>{{Spec2('Performance Timeline Level 2')}}</td>
-      <td></td>
-    </tr>
-    <tr>
-      <td>{{SpecName('Performance Timeline', '#dom-performanceentry-name',
-        'name')}}</td>
-      <td>{{Spec2('Performance Timeline')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.PerformanceEntry.name")}}</p>
+```
+
+## Spécifications
+
+| Spécification                                                                                                            | Statut                                                   | Commentaire          |
+| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------- | -------------------- |
+| {{SpecName('Performance Timeline Level 2', '#dom-performanceentry-name',
+        'name')}} | {{Spec2('Performance Timeline Level 2')}} |                      |
+| {{SpecName('Performance Timeline', '#dom-performanceentry-name',
+        'name')}}             | {{Spec2('Performance Timeline')}}             | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.PerformanceEntry.name")}}
diff --git a/files/fr/web/api/performanceentry/starttime/index.md b/files/fr/web/api/performanceentry/starttime/index.md
index e8f625d52f..e6adbf8a54 100644
--- a/files/fr/web/api/performanceentry/starttime/index.md
+++ b/files/fr/web/api/performanceentry/starttime/index.md
@@ -11,42 +11,41 @@ tags:
   - Performance Web
 translation_of: Web/API/PerformanceEntry/startTime
 ---
-<div>{{APIRef("Performance Timeline API")}}</div>
+{{APIRef("Performance Timeline API")}}
 
-<p>La propriété <strong><code>startTime</code></strong> renvoie le premier <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> enregistré pour l'<a href="/fr/docs/Web/API/PerformanceEntry">entrée de performance</a>.</p>
+La propriété **`startTime`** renvoie le premier [`timestamp`](/fr/docs/Web/API/DOMHighResTimeStamp) enregistré pour l'[entrée de performance](/fr/docs/Web/API/PerformanceEntry).
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<p>La valeur renvoyée par cette propriété dépend du <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>type</code></a> de l'entrée de performance :</p>
+La valeur renvoyée par cette propriété dépend du [`type`](/fr/docs/Web/API/PerformanceEntry/entryType) de l'entrée de performance :
 
-<ul>
-  <li>« <code>frame</code> » - retourne le 
-    <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> quand l'affichage a été démarré.</li>
-  <li>« <code>mark</code> » - retourne le <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> lorsque le marquage a été créé par un appel de <a href="/fr/docs/Web/API/Performance/mark"><code>performance.mark()</code></a>.</li>
-  <li>« <code>measure</code> » - retourne le <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> lorsque la mesure a été créée par un appel à <a href="/fr/docs/Web/API/Performance/measure"><code>performance.measure()</code></a>.</li>
-  <li>« <code>navigation</code> » - retourne le <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> avec une valeur de "<code>0</code>".</li>
-  <li>« <code>resource</code> » - retourne le <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> immédiatement avant que le navigateur ne <a href="/fr/docs/Web/API/PerformanceResourceTiming/fetchStart">commence à récupérer la ressource</a>.</li>
-</ul>
+- « `frame` » - retourne le
+  [`timestamp`](/fr/docs/Web/API/DOMHighResTimeStamp) quand l'affichage a été démarré.
+- « `mark` » - retourne le [`timestamp`](/fr/docs/Web/API/DOMHighResTimeStamp) lorsque le marquage a été créé par un appel de [`performance.mark()`](/fr/docs/Web/API/Performance/mark).
+- « `measure` » - retourne le [`timestamp`](/fr/docs/Web/API/DOMHighResTimeStamp) lorsque la mesure a été créée par un appel à [`performance.measure()`](/fr/docs/Web/API/Performance/measure).
+- « `navigation` » - retourne le [`timestamp`](/fr/docs/Web/API/DOMHighResTimeStamp) avec une valeur de "`0`".
+- « `resource` » - retourne le [`timestamp`](/fr/docs/Web/API/DOMHighResTimeStamp) immédiatement avant que le navigateur ne [commence à récupérer la ressource](/fr/docs/Web/API/PerformanceResourceTiming/fetchStart).
 
-<p>Cette propriété est en lecture seule.</p>
+Cette propriété est en lecture seule.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:js">entry.startTime;</pre>
+```js
+entry.startTime;
+```
 
-<h3 id="Return_Value">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Un objet <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> représentant le premier horodatage lorsque l'<a href="/fr/docs/Web/API/PerformanceEntry">entrée de performance</a> a été créée.</p>
+Un objet [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp) représentant le premier horodatage lorsque l'[entrée de performance](/fr/docs/Web/API/PerformanceEntry) a été créée.
 
-<div class="notecard note">
-  <p><strong>Note :</strong> Si l'entrée de performance a un <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>entryType</code></a> "<code>resource</code>" (c'est-à-dire que l'entrée est un objet <a href="/fr/docs/Web/API/PerformanceResourceTiming"><code>PerformanceResourceTiming</code></a>), cette propriété renvoie la valeur de l'horodatage fournie par <a href="/fr/docs/Web/API/PerformanceResourceTiming/fetchStart"><code>PerformanceResourceTiming.fetchStart</code></a>.</p>
-</div>
+> **Note :** Si l'entrée de performance a un [`entryType`](/fr/docs/Web/API/PerformanceEntry/entryType) "`resource`" (c'est-à-dire que l'entrée est un objet [`PerformanceResourceTiming`](/fr/docs/Web/API/PerformanceResourceTiming)), cette propriété renvoie la valeur de l'horodatage fournie par [`PerformanceResourceTiming.fetchStart`](/fr/docs/Web/API/PerformanceResourceTiming/fetchStart).
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<p>L'exemple suivant montre l'utilisation de la propriété <code>startTime</code>.</p>
+L'exemple suivant montre l'utilisation de la propriété `startTime`.
 
-<pre class="brush:js">function run_PerformanceEntry() {
+```js
+function run_PerformanceEntry() {
   console.log("Support de PerformanceEntry ...");
 
   if (performance.mark === undefined) {
@@ -61,7 +60,7 @@ translation_of: Web/API/PerformanceEntry/startTime
 
   // Utilise getEntries() pour itérer à travers chaque entrée
   let p = performance.getEntries();
-  for (let i = 0; i &lt; p.length; i++) {
+  for (let i = 0; i < p.length; i++) {
     log("Entry[" + i + "]");
     check_PerformanceEntry(p[i]);
   }
@@ -70,7 +69,7 @@ function check_PerformanceEntry(obj) {
   let properties = ["name", "entryType", "startTime", "duration"];
   let methods = ["toJSON"];
 
-  for (let i = 0; i &lt; properties.length; i++) {
+  for (let i = 0; i < properties.length; i++) {
     // On vérifie chaque propriété
     let supported = properties[i] in obj;
     if (supported)
@@ -78,7 +77,7 @@ function check_PerformanceEntry(obj) {
     else
       log("..." + properties[i] + " = N'est pas pris en charge");
   }
-  for (let i = 0; i &lt; methods.length; i++) {
+  for (let i = 0; i < methods.length; i++) {
     // On vérifie chaque méthode
     let supported = typeof obj[methods[i]] == "function";
     if (supported) {
@@ -89,34 +88,17 @@ function check_PerformanceEntry(obj) {
     }
   }
 }
-</pre>
-
-<h2 id="Specifications">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('Performance Timeline Level 2', '#dom-performanceentry-starttime',
-        'startTime')}}</td>
-      <td>{{Spec2('Performance Timeline Level 2')}}</td>
-      <td></td>
-    </tr>
-    <tr>
-      <td>{{SpecName('Performance Timeline', '#dom-performanceentry-starttime',
-        'startTime')}}</td>
-      <td>{{Spec2('Performance Timeline')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.PerformanceEntry.startTime")}}</p>
+```
+
+## Spécifications
+
+| Spécification                                                                                                                        | Statut                                                   | Commentaire          |
+| ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------- | -------------------- |
+| {{SpecName('Performance Timeline Level 2', '#dom-performanceentry-starttime',
+        'startTime')}} | {{Spec2('Performance Timeline Level 2')}} |                      |
+| {{SpecName('Performance Timeline', '#dom-performanceentry-starttime',
+        'startTime')}}         | {{Spec2('Performance Timeline')}}             | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.PerformanceEntry.startTime")}}
diff --git a/files/fr/web/api/performanceentry/tojson/index.md b/files/fr/web/api/performanceentry/tojson/index.md
index 9450e8f3f0..6d02774855 100644
--- a/files/fr/web/api/performanceentry/tojson/index.md
+++ b/files/fr/web/api/performanceentry/tojson/index.md
@@ -11,33 +11,33 @@ tags:
   - Performance Web
 translation_of: Web/API/PerformanceEntry/toJSON
 ---
-<div>{{APIRef("Performance Timeline API")}}</div>
+{{APIRef("Performance Timeline API")}}
 
-<p>La méthode <strong><code>toJSON()</code></strong> permet de sérialiser l'objet <a href="/fr/docs/Web/API/PerformanceEntry"><code>PerformanceEntry</code></a> courant et renvoie une représentation JSON de l'objet.</p>
+La méthode **`toJSON()`** permet de sérialiser l'objet [`PerformanceEntry`](/fr/docs/Web/API/PerformanceEntry) courant et renvoie une représentation JSON de l'objet.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:js">let jsonObj = perfEntry.toJSON();
-</pre>
+```js
+let jsonObj = perfEntry.toJSON();
+```
 
-<h3 id="Arguments">Arguments</h3>
+### Arguments
 
-<p>Aucun.</p>
+Aucun.
 
-<h3 id="Return_value">Valeur de retour</h3>
+### Valeur de retour
 
-<dl>
-  <dt><code>json</code></dt>
-  <dd>Un objet JSON qui est la sérialisation de l'objet <a href="/fr/docs/Web/API/PerformanceEntry"><code>PerformanceEntry</code></a>.</dd>
-</dl>
+- `json`
+  - : Un objet JSON qui est la sérialisation de l'objet [`PerformanceEntry`](/fr/docs/Web/API/PerformanceEntry).
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<p>L'exemple suivant montre l'utilisation de la méthode <code>toJSON()</code>.</p>
+L'exemple suivant montre l'utilisation de la méthode `toJSON()`.
 
-<pre class="brush:js">function run_PerformanceEntry() {
+```js
+function run_PerformanceEntry() {
   console.log("Support de PerformanceEntry ...");
 
   if (performance.mark === undefined) {
@@ -52,7 +52,7 @@ translation_of: Web/API/PerformanceEntry/toJSON
 
   // Utilise getEntries() pour itérer à travers chaque entrée.
   let p = performance.getEntries();
-  for (let i = 0; i &lt; p.length; i++) {
+  for (let i = 0; i < p.length; i++) {
     console.log("Entry[" + i + "]");
     check_PerformanceEntry(p[i]);
   }
@@ -61,7 +61,7 @@ function check_PerformanceEntry(obj) {
   let properties = ["name", "entryType", "startTime", "duration"];
   let methods = ["toJSON"];
 
-  for (let i = 0; i &lt; properties.length; i++) {
+  for (let i = 0; i < properties.length; i++) {
     // On vérifie chaque propriété
     let supported = properties[i] in obj;
     if (supported)
@@ -69,7 +69,7 @@ function check_PerformanceEntry(obj) {
     else
       console.log("..." + properties[i] + " = N'est pas pris en charge");
   }
-  for (let i = 0; i &lt; methods.length; i++) {
+  for (let i = 0; i < methods.length; i++) {
     // On vérifie chaque méthode
     let supported = typeof obj[methods[i]] == "function";
     if (supported) {
@@ -80,28 +80,15 @@ function check_PerformanceEntry(obj) {
     }
   }
 }
-</pre>
-
-<h2 id="Specifications">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('Performance Timeline Level 2', '#dom-performanceentry-tojson',
-        'toJSON')}}</td>
-      <td>{{Spec2('Performance Timeline Level 2')}}</td>
-      <td>Définition initiale de la méthode <code>toJSON()</code>.</td>
-    </tr>
-  </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.PerformanceEntry.toJSON")}}</p>
+```
+
+## Spécifications
+
+| Spécification                                                                                                                | Statut                                                   | Commentaire                                   |
+| ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------- | --------------------------------------------- |
+| {{SpecName('Performance Timeline Level 2', '#dom-performanceentry-tojson',
+        'toJSON')}} | {{Spec2('Performance Timeline Level 2')}} | Définition initiale de la méthode `toJSON()`. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.PerformanceEntry.toJSON")}}
diff --git a/files/fr/web/api/performanceeventtiming/index.md b/files/fr/web/api/performanceeventtiming/index.md
index 117fefc656..528d72302b 100644
--- a/files/fr/web/api/performanceeventtiming/index.md
+++ b/files/fr/web/api/performanceeventtiming/index.md
@@ -11,75 +11,70 @@ tags:
   - Performance Web
 translation_of: Web/API/PerformanceEventTiming
 ---
-<div>{{APIRef("Event Timing API")}}</div>
-
-<p>L'interface <code>PerformanceEventTiming</code> des événements de l'<code>Event Timing API</code> fournit des informations de chronométrage pour les types d'événements énumérés ci-dessous.</p>
-
-<ul>
-    <li><a href="/fr/docs/Web/API/Element/auxclick_event"><code>auxclick</code></a></li>
-    <li><a href="/fr/docs/Web/API/HTMLElement/beforeinput_event"><code>beforeinput</code></a></li>
-    <li><a href="/fr/docs/Web/API/Element/click_event"><code>click</code></a></li>
-    <li><a href="/fr/docs/Web/API/Element/compositionend_event"><code>compositionend</code></a></li>
-    <li><a href="/fr/docs/Web/API/Element/compositionstart_event"><code>compositionstart</code></a></li>
-    <li><a href="/fr/docs/Web/API/Element/compositionupdate_event"><code>compositionupdate</code></a></li>
-    <li><a href="/fr/docs/Web/API/Element/contextmenu_event"><code>contextmenu</code></a></li>
-    <li><a href="/fr/docs/Web/API/Element/dblclick_event"><code>dblclick</code></a></li>
-    <li><a href="/fr/docs/Web/API/Document/dragend_event"><code>dragend</code></a></li>
-    <li><a href="/fr/docs/Web/API/Document/dragenter_event"><code>dragenter</code></a></li>
-    <li><a href="/fr/docs/Web/API/Document/dragleave_event"><code>dragleave</code></a></li>
-    <li><a href="/fr/docs/Web/API/Document/dragover_event"><code>dragover</code></a></li>
-    <li><a href="/fr/docs/Web/API/Document/dragstart_event"><code>dragstart</code></a></li>
-    <li><a href="/fr/docs/Web/API/Document/drop_event"><code>drop</code></a></li>
-    <li><a href="/fr/docs/Web/API/HTMLElement/input_event"><code>input</code></a></li>
-    <li><a href="/fr/docs/Web/API/Document/keydown_event"><code>keydown</code></a></li>
-    <li><a href="/fr/docs/Web/API/Document/keypress_event"><code>keypress</code></a></li>
-    <li><a href="/fr/docs/Web/API/Document/keyup_event"><code>keyup</code></a></li>
-    <li><a href="/fr/docs/Web/API/Element/mousedown_event"><code>mousedown</code></a></li>
-    <li><a href="/fr/docs/Web/API/Element/mouseenter_event"><code>mouseenter</code></a></li>
-    <li><a href="/fr/docs/Web/API/Element/mouseleave_event"><code>mouseleave</code></a></li>
-    <li><a href="/fr/docs/Web/API/Element/mouseout_event"><code>mouseout</code></a></li>
-    <li><a href="/fr/docs/Web/API/Element/mouseover_event"><code>mouseover</code></a></li>
-    <li><a href="/fr/docs/Web/API/Element/mouseup_event"><code>mouseup</code></a></li>
-    <li><a href="/fr/docs/Web/API/Document/pointerover_event"><code>pointerover</code></a></li>
-    <li><a href="/fr/docs/Web/API/Document/pointerenter_event"><code>pointerenter</code></a></li>
-    <li><a href="/fr/docs/Web/API/Document/pointerdown_event"><code>pointerdown</code></a></li>
-    <li><a href="/fr/docs/Web/API/Document/pointerup_event"><code>pointerup</code></a></li>
-    <li><a href="/fr/docs/Web/API/Document/pointercancel_event"><code>pointercancel</code></a></li>
-    <li><a href="/fr/docs/Web/API/Document/pointerout_event"><code>pointerout</code></a></li>
-    <li><a href="/fr/docs/Web/API/Document/pointerleave_event"><code>pointerleave</code></a></li>
-    <li><a href="/fr/docs/Web/API/Document/gotpointercapture_event"><code>gotpointercapture</code></a></li>
-    <li><a href="/fr/docs/Web/API/Document/lostpointercapture_event"><code>lostpointercapture</code></a></li>
-    <li><a href="/fr/docs/Web/API/Document/touchstart_event"><code>touchstart</code></a></li>
-    <li><a href="/fr/docs/Web/API/Document/touchend_event"><code>touchend</code></a></li>
-    <li><a href="/fr/docs/Web/API/Document/touchcancel_event"><code>touchcancel</code></a></li>
-</ul>
-
-<h2 id="Properties">Propriétés</h2>
-
-<dl>
-  <dt><a href="/fr/docs/Web/API/PerformanceEventTiming/processingStart"><code>PerformanceEventTiming.processingStart</code></a> <em>lecture seule</em> {{ExperimentalBadge}}</dt>
-  <dd>Retourne un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> représentant l'heure à laquelle la diffusion des événements a commencé.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceEventTiming/processingEnd"><code>PerformanceEventTiming.processingEnd</code></a> <em>lecture seule</em> {{ExperimentalBadge}}</dt>
-  <dd>Retourne un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> représentant l'heure à laquelle la diffusion de l'événement s'est terminée.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceEventTiming/cancelable"><code>PerformanceEventTiming.cancelable</code></a> <em>lecture seule</em> {{ExperimentalBadge}}</dt>
-  <dd>Retourne un <a href="/fr/docs/Web/API/Boolean"><code>Boolean</code></a> représentant l'attribut annulable de l'événement associé.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceEventTiming/target"><code>PerformanceEventTiming.target</code></a> <em>lecture seule</em> {{NonStandardBadge}}</dt>
-  <dd>Retourne un <a href="/fr/docs/Web/API/Node"><code>Node</code></a> représentant la dernière cible de l'événement associé, si elle n'est pas supprimée.</dd>
-</dl>
-
-<h2 id="Methods">Méthodes</h2>
-
-<dl>
-  <dt><a href="/fr/docs/Web/API/PerformanceEventTiming/toJSON()"><code>PerformanceEventTiming.toJSON()</code></a> {{ExperimentalBadge}}</dt>
-  <dd>Convertit l'objet <a href="/fr/docs/Web/API/PerformanceEventTiming"><code>PerformanceEventTiming</code></a> en JSON.</dd>
-</dl>
-
-<h2 id="Examples">Exemples</h2>
-
-<p>L'exemple suivant montre comment utiliser l'API pour tous les événements :</p>
-
-<pre class="brush:js">const observer = new PerformanceObserver(function(list) {
-  const perfEntries = list.getEntries().forEach(entry =&gt; {
+{{APIRef("Event Timing API")}}
+
+L'interface `PerformanceEventTiming` des événements de l'`Event Timing API` fournit des informations de chronométrage pour les types d'événements énumérés ci-dessous.
+
+- [`auxclick`](/fr/docs/Web/API/Element/auxclick_event)
+- [`beforeinput`](/fr/docs/Web/API/HTMLElement/beforeinput_event)
+- [`click`](/fr/docs/Web/API/Element/click_event)
+- [`compositionend`](/fr/docs/Web/API/Element/compositionend_event)
+- [`compositionstart`](/fr/docs/Web/API/Element/compositionstart_event)
+- [`compositionupdate`](/fr/docs/Web/API/Element/compositionupdate_event)
+- [`contextmenu`](/fr/docs/Web/API/Element/contextmenu_event)
+- [`dblclick`](/fr/docs/Web/API/Element/dblclick_event)
+- [`dragend`](/fr/docs/Web/API/Document/dragend_event)
+- [`dragenter`](/fr/docs/Web/API/Document/dragenter_event)
+- [`dragleave`](/fr/docs/Web/API/Document/dragleave_event)
+- [`dragover`](/fr/docs/Web/API/Document/dragover_event)
+- [`dragstart`](/fr/docs/Web/API/Document/dragstart_event)
+- [`drop`](/fr/docs/Web/API/Document/drop_event)
+- [`input`](/fr/docs/Web/API/HTMLElement/input_event)
+- [`keydown`](/fr/docs/Web/API/Document/keydown_event)
+- [`keypress`](/fr/docs/Web/API/Document/keypress_event)
+- [`keyup`](/fr/docs/Web/API/Document/keyup_event)
+- [`mousedown`](/fr/docs/Web/API/Element/mousedown_event)
+- [`mouseenter`](/fr/docs/Web/API/Element/mouseenter_event)
+- [`mouseleave`](/fr/docs/Web/API/Element/mouseleave_event)
+- [`mouseout`](/fr/docs/Web/API/Element/mouseout_event)
+- [`mouseover`](/fr/docs/Web/API/Element/mouseover_event)
+- [`mouseup`](/fr/docs/Web/API/Element/mouseup_event)
+- [`pointerover`](/fr/docs/Web/API/Document/pointerover_event)
+- [`pointerenter`](/fr/docs/Web/API/Document/pointerenter_event)
+- [`pointerdown`](/fr/docs/Web/API/Document/pointerdown_event)
+- [`pointerup`](/fr/docs/Web/API/Document/pointerup_event)
+- [`pointercancel`](/fr/docs/Web/API/Document/pointercancel_event)
+- [`pointerout`](/fr/docs/Web/API/Document/pointerout_event)
+- [`pointerleave`](/fr/docs/Web/API/Document/pointerleave_event)
+- [`gotpointercapture`](/fr/docs/Web/API/Document/gotpointercapture_event)
+- [`lostpointercapture`](/fr/docs/Web/API/Document/lostpointercapture_event)
+- [`touchstart`](/fr/docs/Web/API/Document/touchstart_event)
+- [`touchend`](/fr/docs/Web/API/Document/touchend_event)
+- [`touchcancel`](/fr/docs/Web/API/Document/touchcancel_event)
+
+## Propriétés
+
+- [`PerformanceEventTiming.processingStart`](/fr/docs/Web/API/PerformanceEventTiming/processingStart) _lecture seule_ {{ExperimentalBadge}}
+  - : Retourne un [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp) représentant l'heure à laquelle la diffusion des événements a commencé.
+- [`PerformanceEventTiming.processingEnd`](/fr/docs/Web/API/PerformanceEventTiming/processingEnd) _lecture seule_ {{ExperimentalBadge}}
+  - : Retourne un [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp) représentant l'heure à laquelle la diffusion de l'événement s'est terminée.
+- [`PerformanceEventTiming.cancelable`](/fr/docs/Web/API/PerformanceEventTiming/cancelable) _lecture seule_ {{ExperimentalBadge}}
+  - : Retourne un [`Boolean`](/fr/docs/Web/API/Boolean) représentant l'attribut annulable de l'événement associé.
+- [`PerformanceEventTiming.target`](/fr/docs/Web/API/PerformanceEventTiming/target) _lecture seule_ {{NonStandardBadge}}
+  - : Retourne un [`Node`](/fr/docs/Web/API/Node) représentant la dernière cible de l'événement associé, si elle n'est pas supprimée.
+
+## Méthodes
+
+- [`PerformanceEventTiming.toJSON()`](</fr/docs/Web/API/PerformanceEventTiming/toJSON()>) {{ExperimentalBadge}}
+  - : Convertit l'objet [`PerformanceEventTiming`](/fr/docs/Web/API/PerformanceEventTiming) en JSON.
+
+## Exemples
+
+L'exemple suivant montre comment utiliser l'API pour tous les événements :
+
+```js
+const observer = new PerformanceObserver(function(list) {
+  const perfEntries = list.getEntries().forEach(entry => {
     // Durée totale
     const inputDuration = entry.duration;
     // Retard d'entrée (avant l'événement de traitement)
@@ -90,16 +85,17 @@ translation_of: Web/API/PerformanceEventTiming
 });
 // Enregistre un observateur pour l'événement.
 observer.observe({entryTypes: ["event"]});
-</pre>
+```
 
-<p>Nous pouvons également interroger directement le <a href="https://web.dev/fid">premier délai d'entrée</a>. Le premier délai d'entrée ou « FID : First input delay », mesure le temps entre le moment où un utilisateur interagit pour la première fois avec une page (c'est-à-dire lorsqu'il clique sur un lien ou sur un bouton) et le moment où le navigateur est effectivement en mesure de commencer à traiter les gestionnaires d'événements en réponse à cette interaction.</p>
+Nous pouvons également interroger directement le [premier délai d'entrée](https://web.dev/fid). Le premier délai d'entrée ou « FID : First input delay », mesure le temps entre le moment où un utilisateur interagit pour la première fois avec une page (c'est-à-dire lorsqu'il clique sur un lien ou sur un bouton) et le moment où le navigateur est effectivement en mesure de commencer à traiter les gestionnaires d'événements en réponse à cette interaction.
 
-<pre class="brush:js">// Pour savoir si (et quand) la page a été masquée pour la première fois, voir :
+```js
+// Pour savoir si (et quand) la page a été masquée pour la première fois, voir :
 // https://github.com/w3c/page-visibility/issues/29
-// NOTE : idéalement, cette vérification devrait être effectuée dans le &lt;head&gt; du document
+// NOTE : idéalement, cette vérification devrait être effectuée dans le <head> du document
 // pour éviter les cas où l'état de visibilité change avant l'exécution de ce code.
 let firstHiddenTime = document.visibilityState === 'hidden' ? 0 : Infinity;
-document.addEventListener('visibilitychange', (event) =&gt; {
+document.addEventListener('visibilitychange', (event) => {
   firstHiddenTime = Math.min(firstHiddenTime, event.timeStamp);
 }, {once: true});
 
@@ -108,7 +104,7 @@ document.addEventListener('visibilitychange', (event) =&gt; {
 function sendToAnalytics(data) {
   const body = JSON.stringify(data);
   // Utilise `navigator.sendBeacon()` si disponible, en revenant à `fetch()`.
-  (navigator.sendBeacon &amp;&amp; navigator.sendBeacon('/analytics', body)) ||
+  (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
       fetch('/analytics', {body, method: 'POST', keepalive: true});
 }
 
@@ -120,7 +116,7 @@ try {
     // Ne rapporte le FID que si la page n'était pas cachée avant que
     // l'entrée soit envoyée. Cela se produit généralement lorsqu'une
     // page est chargée dans un onglet en arrière-plan.
-    if (entry.startTime &lt; firstHiddenTime) {
+    if (entry.startTime < firstHiddenTime) {
       const fid = entry.processingStart - entry.startTime;
 
       // Rapporte la valeur du FID à un terminal d'analyse.
@@ -129,7 +125,7 @@ try {
   }
 
   // Crée un PerformanceObserver qui appelle `onFirstInputEntry` pour chaque entrée.
-  const po = new PerformanceObserver((entryList) =&gt; {
+  const po = new PerformanceObserver((entryList) => {
     entryList.getEntries().forEach(onFirstInputEntry);
   });
 
@@ -142,27 +138,14 @@ try {
 } catch (e) {
   // Ne fait rien si le navigateur ne prend pas en charge cette API.
 }
-</pre>
-
-<h2 id="Specifications">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('Event Timing API','#sec-performance-event-timing','PerformanceEventTiming')}}</td>
-      <td>{{Spec2('Event Timing API')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.PerformanceEventTiming")}}</p>
+```
+
+## Spécifications
+
+| Spécification                                                                                                            | Statut                                   | Commentaire          |
+| ------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------- |
+| {{SpecName('Event Timing API','#sec-performance-event-timing','PerformanceEventTiming')}} | {{Spec2('Event Timing API')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.PerformanceEventTiming")}}
diff --git a/files/fr/web/api/performanceframetiming/index.md b/files/fr/web/api/performanceframetiming/index.md
index e1c86e7c39..ee5d167f31 100644
--- a/files/fr/web/api/performanceframetiming/index.md
+++ b/files/fr/web/api/performanceframetiming/index.md
@@ -11,65 +11,48 @@ tags:
   - Performance Web
 translation_of: Web/API/PerformanceFrameTiming
 ---
-<div>{{SeeCompatTable}}{{APIRef("Frame Timing API")}}</div>
+{{SeeCompatTable}}{{APIRef("Frame Timing API")}}
 
-<p><strong><code>PerformanceFrameTiming</code></strong> est une interface <em>abstraite</em> qui fournit des données d'horodatage de « <em>frame</em> » pour la boucle d'événements du navigateur. Une « <em>frame</em> » représente la quantité de travail qu'un navigateur effectue dans <a href="https://html.spec.whatwg.org/multipage/webappapis.html#processing-model-8">une itération de la boucle d'événements</a>, comme le traitement des événements DOM, le redimensionnement, le défilement, le rendu, les animations CSS, etc. Un <i>frame rate</i> de 60fps (images par seconde) pour un taux de rafraîchissement de 60Hz est l'objectif pour une expérience utilisateur réactive. Cela signifie que le navigateur doit traiter une image en environ 16,7 ms.</p>
+**`PerformanceFrameTiming`** est une interface _abstraite_ qui fournit des données d'horodatage de « _frame_ » pour la boucle d'événements du navigateur. Une « _frame_ » représente la quantité de travail qu'un navigateur effectue dans [une itération de la boucle d'événements](https://html.spec.whatwg.org/multipage/webappapis.html#processing-model-8), comme le traitement des événements DOM, le redimensionnement, le défilement, le rendu, les animations CSS, etc. Un _frame rate_ de 60fps (images par seconde) pour un taux de rafraîchissement de 60Hz est l'objectif pour une expérience utilisateur réactive. Cela signifie que le navigateur doit traiter une image en environ 16,7 ms.
 
-<p>Une application peut enregistrer un <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> pour une « <code>frame</code> » de <a href="/fr/docs/Web/API/PerformanceEntry">l'entrée de performance</a> et l'observateur peut récupérer des données sur la durée de chaque événement. Ces informations peuvent être utilisées pour aider à identifier les choses qui consomment trop de temps pour offrir une bonne expérience utilisateur.</p>
+Une application peut enregistrer un [`PerformanceObserver`](/fr/docs/Web/API/PerformanceObserver) pour une « `frame` » de [l'entrée de performance](/fr/docs/Web/API/PerformanceEntry) et l'observateur peut récupérer des données sur la durée de chaque événement. Ces informations peuvent être utilisées pour aider à identifier les choses qui consomment trop de temps pour offrir une bonne expérience utilisateur.
 
-<p>{{InheritanceDiagram}}</p>
+{{InheritanceDiagram}}
 
-<h2 id="Properties">Propriétés</h2>
+## Propriétés
 
-<p>Cette interface n'a pas de propriétés mais elle étend les propriétés de <a href="/fr/docs/Web/API/PerformanceEntry"><code>PerformanceEntry</code></a> suivantes (c'est-à-dire quand le type de <a href="/fr/docs/Web/API/PerformanceEntry">l'entrée de performance</a> vaut « <code>frame</code> ») en restreignant les propriétés comme suit :</p>
+Cette interface n'a pas de propriétés mais elle étend les propriétés de [`PerformanceEntry`](/fr/docs/Web/API/PerformanceEntry) suivantes (c'est-à-dire quand le type de [l'entrée de performance](/fr/docs/Web/API/PerformanceEntry) vaut « `frame` ») en restreignant les propriétés comme suit :
 
-<dl>
-  <dt><a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>PerformanceEntry.entryType</code></a></dt>
-  <dd>Retourne « <code>frame</code> ».</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceEntry/name"><code>PerformanceEntry.name</code></a></dt>
-  <dd>Renvoie l'adresse du <a href="https://dom.spec.whatwg.org/#concept-document-url">document</a>.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceEntry/startTime"><code>PerformanceEntry.startTime</code></a></dt>
-  <dd>Retourne le <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> (moment) où le cadre a été lancé.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceEntry/duration"><code>PerformanceEntry.duration</code></a></dt>
-  <dd>Retourne un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> indiquant la différence entre le <code>startTime</code> de deux images successives.</dd>
-</dl>
+- [`PerformanceEntry.entryType`](/fr/docs/Web/API/PerformanceEntry/entryType)
+  - : Retourne « `frame` ».
+- [`PerformanceEntry.name`](/fr/docs/Web/API/PerformanceEntry/name)
+  - : Renvoie l'adresse du [document](https://dom.spec.whatwg.org/#concept-document-url).
+- [`PerformanceEntry.startTime`](/fr/docs/Web/API/PerformanceEntry/startTime)
+  - : Retourne le [`timestamp`](/fr/docs/Web/API/DOMHighResTimeStamp) (moment) où le cadre a été lancé.
+- [`PerformanceEntry.duration`](/fr/docs/Web/API/PerformanceEntry/duration)
+  - : Retourne un [`timestamp`](/fr/docs/Web/API/DOMHighResTimeStamp) indiquant la différence entre le `startTime` de deux images successives.
 
-<h2 id="Methods">Méthodes</h2>
+## Méthodes
 
-<p>Cette interface n'a pas de méthodes.</p>
+Cette interface n'a pas de méthodes.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<p>Voir l'exemple dans l'article <a href="/fr/docs/Web/API/Frame_Timing_API/Using_the_Frame_Timing_API">Utilisation de l'API Frame Timing</a>.</p>
+Voir l'exemple dans l'article [Utilisation de l'API Frame Timing](/fr/docs/Web/API/Frame_Timing_API/Using_the_Frame_Timing_API).
 
-<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('Frame Timing', '#performanceframetiming-interface', 'PerformanceFrameTiming')}}</td>
-      <td>{{Spec2('Frame Timing')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                                            | Statut                           | Commentaire          |
+| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName('Frame Timing', '#performanceframetiming-interface', 'PerformanceFrameTiming')}} | {{Spec2('Frame Timing')}} | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.PerformanceFrameTiming")}}</p>
+{{Compat("api.PerformanceFrameTiming")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a></li>
- <li><a href="/fr/docs/Tools/Performance/Frame_rate">Frame Rate (Firefox Performance Tool)</a></li>
- <li><a href="/fr/docs/Web/API/Frame_Timing">L'API <i>Frame Timing</i></a></li>
- <li><a href="/fr/docs/Web/API/Frame_Timing_API/Using_the_Frame_Timing_API">Utiliser l'API Frame Timing</a></li>
-</ul>
+- [`PerformanceObserver`](/fr/docs/Web/API/PerformanceObserver)
+- [Frame Rate (Firefox Performance Tool)](/fr/docs/Tools/Performance/Frame_rate)
+- [L'API _Frame Timing_](/fr/docs/Web/API/Frame_Timing)
+- [Utiliser l'API Frame Timing](/fr/docs/Web/API/Frame_Timing_API/Using_the_Frame_Timing_API)
diff --git a/files/fr/web/api/performancelongtasktiming/attribution/index.md b/files/fr/web/api/performancelongtasktiming/attribution/index.md
index c3e9c82ff3..3db5de2b8c 100644
--- a/files/fr/web/api/performancelongtasktiming/attribution/index.md
+++ b/files/fr/web/api/performancelongtasktiming/attribution/index.md
@@ -10,37 +10,26 @@ tags:
   - Reference
 translation_of: Web/API/PerformanceLongTaskTiming/attribution
 ---
-<p>{{SeeCompatTable}}{{APIRef("Long Tasks")}}</p>
+{{SeeCompatTable}}{{APIRef("Long Tasks")}}
 
-<p>La propriété en lecture seule <strong><code>attribution</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceLongTaskTiming"><code>PerformanceLongTaskTiming</code></a> retourne une séquence d'instances <a href="/fr/docs/Web/API/TaskAttributionTiming"><code>TaskAttributionTiming</code></a>.</p>
+La propriété en lecture seule **`attribution`** de l'interface [`PerformanceLongTaskTiming`](/fr/docs/Web/API/PerformanceLongTaskTiming) retourne une séquence d'instances [`TaskAttributionTiming`](/fr/docs/Web/API/TaskAttributionTiming).
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:js">var <var>taskAttributeTiming</var> = PerformanceLongTaskTiming.attribution;</pre>
+```js
+var taskAttributeTiming = PerformanceLongTaskTiming.attribution;
+```
 
-<h3 id="Value">Valeur</h3>
+### Valeur
 
-<p>Une séquence d'instances <a href="/fr/docs/Web/API/TaskAttributionTiming"><code>TaskAttributionTiming</code></a>.</p>
+Une séquence d'instances [`TaskAttributionTiming`](/fr/docs/Web/API/TaskAttributionTiming).
 
-<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('Long Tasks','#dom-performancelongtasktiming-attribution','attribution')}}</td>
-      <td>{{Spec2('Long Tasks')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                                    | Statut                           | Commentaire          |
+| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName('Long Tasks','#dom-performancelongtasktiming-attribution','attribution')}} | {{Spec2('Long Tasks')}} | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.PerformanceLongTaskTiming.attribution")}}</p>
+{{Compat("api.PerformanceLongTaskTiming.attribution")}}
diff --git a/files/fr/web/api/performancelongtasktiming/index.md b/files/fr/web/api/performancelongtasktiming/index.md
index 2066469ef5..e89d9c758c 100644
--- a/files/fr/web/api/performancelongtasktiming/index.md
+++ b/files/fr/web/api/performancelongtasktiming/index.md
@@ -9,38 +9,23 @@ tags:
   - Reference
 translation_of: Web/API/PerformanceLongTaskTiming
 ---
-<p>{{SeeCompatTable}}{{APIRef("Long Tasks")}}</p>
+{{SeeCompatTable}}{{APIRef("Long Tasks")}}
 
-<p>L'interface <strong><code>PerformanceLongTaskTiming</code></strong> de <a href="/fr/docs/Web/API/Long_Tasks_API">l'API <i>Long Tasks</i></a> signale les instances de tâches longues.</p>
+L'interface **`PerformanceLongTaskTiming`** de [l'API _Long Tasks_](/fr/docs/Web/API/Long_Tasks_API) signale les instances de tâches longues.
 
-<p>{{InheritanceDiagram}}</p>
+{{InheritanceDiagram}}
 
-<h2 id="Properties">Propriétés</h2>
+## Propriétés
 
-<dl>
-  <dt><a href="/fr/docs/Web/API/PerformanceLongTaskTiming"><code>PerformanceLongTaskTiming</code></a> <em>lecture seule</em> {{ExperimentalBadge}}</dt>
-  <dd>Retourne une séquence d'instances <a href="/fr/docs/Web/API/TaskAttributionTiming"><code>TaskAttributionTiming</code></a>.</dd>
-</dl>
+- [`PerformanceLongTaskTiming`](/fr/docs/Web/API/PerformanceLongTaskTiming) _lecture seule_ {{ExperimentalBadge}}
+  - : Retourne une séquence d'instances [`TaskAttributionTiming`](/fr/docs/Web/API/TaskAttributionTiming).
 
-<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('Long Tasks','#sec-PerformanceLongTaskTiming','PerformanceLongTaskTiming')}}</td>
-      <td>{{Spec2('Long Tasks')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                                        | Statut                           | Commentaire          |
+| -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName('Long Tasks','#sec-PerformanceLongTaskTiming','PerformanceLongTaskTiming')}} | {{Spec2('Long Tasks')}} | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.PerformanceLongTaskTiming")}}</p>
+{{Compat("api.PerformanceLongTaskTiming")}}
diff --git a/files/fr/web/api/performancemark/index.md b/files/fr/web/api/performancemark/index.md
index c8f1c80399..0ad6822574 100644
--- a/files/fr/web/api/performancemark/index.md
+++ b/files/fr/web/api/performancemark/index.md
@@ -9,68 +9,47 @@ tags:
   - Performance Web
 translation_of: Web/API/PerformanceMark
 ---
-<div>{{APIRef("User Timing API")}}</div>
+{{APIRef("User Timing API")}}
 
-<p><code><strong>PerformanceMark</strong></code> est une interface <em>abstraite</em> pour les objets <a href="/fr/docs/Web/API/PerformanceEntry"><code>PerformanceEntry</code></a> avec un <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>entryType</code></a> « <code>mark</code> ».Les entrées de ce type sont créées en appelant <a href="/fr/docs/Web/API/Performance/mark"><code>performance.mark()</code></a> pour ajouter un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> <em>nommé</em> (le <em>marqueur</em>) à la <em>chronologie des performances</em> du navigateur.</p>
+**`PerformanceMark`** est une interface _abstraite_ pour les objets [`PerformanceEntry`](/fr/docs/Web/API/PerformanceEntry) avec un [`entryType`](/fr/docs/Web/API/PerformanceEntry/entryType) « `mark` ».Les entrées de ce type sont créées en appelant [`performance.mark()`](/fr/docs/Web/API/Performance/mark) pour ajouter un [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp) _nommé_ (le _marqueur_) à la _chronologie des performances_ du navigateur.
 
-<p>{{InheritanceDiagram}}</p>
+{{InheritanceDiagram}}
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Properties">Propriétés</h2>
+## Propriétés
 
-<p>Cette interface n'a pas de propriété mais elle étend les propriétés de <a href="/fr/docs/Web/API/PerformanceEntry"><code>PerformanceEntry</code></a> suivantes en restreignant les propriétés comme suit :</p>
+Cette interface n'a pas de propriété mais elle étend les propriétés de [`PerformanceEntry`](/fr/docs/Web/API/PerformanceEntry) suivantes en restreignant les propriétés comme suit :
 
-<dl>
-  <dt><a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>PerformanceEntry.entryType</code></a></dt>
-  <dd>Retourne « <code>mark</code> ».</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceEntry/name"><code>PerformanceEntry.name</code></a></dt>
-  <dd>Retourne le nom donné au marqueur lorsqu'il a été créé via un appel de <a href="/fr/docs/Web/API/Performance/mark"><code>performance.mark()</code></a>.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceEntry/startTime"><code>PerformanceEntry.startTime</code></a></dt>
-  <dd>Retourne le <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> à partir du moment où <a href="/fr/docs/Web/API/Performance/mark"><code>performance.mark()</code></a> a été appelé.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceEntry/duration"><code>PerformanceEntry.duration</code></a></dt>
-  <dd>Retourne « <code>0</code> ». (Un marqueur n'a pas de <em>durée</em>.)</dd>
-</dl>
+- [`PerformanceEntry.entryType`](/fr/docs/Web/API/PerformanceEntry/entryType)
+  - : Retourne « `mark` ».
+- [`PerformanceEntry.name`](/fr/docs/Web/API/PerformanceEntry/name)
+  - : Retourne le nom donné au marqueur lorsqu'il a été créé via un appel de [`performance.mark()`](/fr/docs/Web/API/Performance/mark).
+- [`PerformanceEntry.startTime`](/fr/docs/Web/API/PerformanceEntry/startTime)
+  - : Retourne le [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp) à partir du moment où [`performance.mark()`](/fr/docs/Web/API/Performance/mark) a été appelé.
+- [`PerformanceEntry.duration`](/fr/docs/Web/API/PerformanceEntry/duration)
+  - : Retourne « `0` ». (Un marqueur n'a pas de _durée_.)
 
-<h2 id="Methods">Méthodes</h2>
+## Méthodes
 
-<p>Cette interface n'a pas de méthodes.</p>
+Cette interface n'a pas de méthodes.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<p>Voir l'exemple dans <a href="/fr/docs/Web/API/User_Timing_API/Using_the_User_Timing_API">Utilisation de l'API User Timing</a>.</p>
+Voir l'exemple dans [Utilisation de l'API User Timing](/fr/docs/Web/API/User_Timing_API/Using_the_User_Timing_API).
 
-<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('User Timing Level 2', '#performancemark', 'PerformanceMark')}}</td>
-      <td>{{Spec2('User Timing Level 2')}}</td>
-      <td></td>
-    </tr>
-    <tr>
-      <td>{{SpecName('User Timing', '#performancemark', 'PerformanceMark')}}</td>
-      <td>{{Spec2('User Timing')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                        | Statut                                       | Commentaire          |
+| ---------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------- |
+| {{SpecName('User Timing Level 2', '#performancemark', 'PerformanceMark')}} | {{Spec2('User Timing Level 2')}} |                      |
+| {{SpecName('User Timing', '#performancemark', 'PerformanceMark')}}             | {{Spec2('User Timing')}}             | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.PerformanceMark")}}</p>
+{{Compat("api.PerformanceMark")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li><a href="/fr/docs/Web/API/User_Timing_API">API <i>User Timing</i></a></li>
-  <li><a href="/fr/docs/Web/API/User_Timing_API/Using_the_User_Timing_API">Utilisation de l'API <i>User Timing</i></a></li>
-</ul>
+- [API _User Timing_](/fr/docs/Web/API/User_Timing_API)
+- [Utilisation de l'API _User Timing_](/fr/docs/Web/API/User_Timing_API/Using_the_User_Timing_API)
diff --git a/files/fr/web/api/performancemeasure/index.md b/files/fr/web/api/performancemeasure/index.md
index 22c05d1a9a..7b93f84136 100644
--- a/files/fr/web/api/performancemeasure/index.md
+++ b/files/fr/web/api/performancemeasure/index.md
@@ -9,68 +9,47 @@ tags:
   - Performance Web
 translation_of: Web/API/PerformanceMeasure
 ---
-<div>{{APIRef("User Timing API")}}</div>
+{{APIRef("User Timing API")}}
 
-<p><code><strong>PerformanceMeasure</strong></code> est une interface <em>abstraite</em> pour les objets <a href="/fr/docs/Web/API/PerformanceEntry"><code>PerformanceEntry</code></a> ayant un <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>entryType</code></a> « <code>measure</code> ». Les entrées de ce type sont créées en appelant <a href="/fr/docs/Web/API/Performance/measure"><code>measure()</code></a> pour ajouter un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> <em>nommé</em> (la <em>mesure</em>) entre deux <em>marqueurs</em> à la <em>chronologie des performances</em> du navigateur.</p>
+**`PerformanceMeasure`** est une interface _abstraite_ pour les objets [`PerformanceEntry`](/fr/docs/Web/API/PerformanceEntry) ayant un [`entryType`](/fr/docs/Web/API/PerformanceEntry/entryType) « `measure` ». Les entrées de ce type sont créées en appelant [`measure()`](/fr/docs/Web/API/Performance/measure) pour ajouter un [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp) _nommé_ (la _mesure_) entre deux _marqueurs_ à la _chronologie des performances_ du navigateur.
 
-<p>{{InheritanceDiagram}}</p>
+{{InheritanceDiagram}}
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Properties">Propriétés</h2>
+## Propriétés
 
-<p>Cette interface n'a pas de propriété mais elle étend les propriétés de <a href="/fr/docs/Web/API/PerformanceEntry"><code>PerformanceEntry</code></a> suivantes en restreignant les propriétés comme suit :</p>
+Cette interface n'a pas de propriété mais elle étend les propriétés de [`PerformanceEntry`](/fr/docs/Web/API/PerformanceEntry) suivantes en restreignant les propriétés comme suit :
 
-<dl>
-  <dt><a href="/fr/docs/Web/API/PerformanceEntry.entryType"><code>PerformanceEntry.entryType</code></a></dt>
-  <dd>Retourne « <code>measure</code> ».</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceEntry.name"><code>PerformanceEntry.name</code></a></dt>
-  <dd>Retourne le nom donné à la mesure lorsqu'elle a été créée via un appel à <a href="/fr/docs/Web/API/Performance/measure()"><code>performance.measure()</code></a>.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceEntry.startTime"><code>PerformanceEntry.startTime</code></a></dt>
-  <dd>Retourne un objet <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> associé à la mesure indiquant le moment où <a href="/fr/docs/Web/API/Performance/measure()"><code>performance.measure()</code></a> a été appelée.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceEntry.duration"><code>PerformanceEntry.duration</code></a></dt>
-  <dd>Retourne un objet <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> correspondant à la durée de la mesure (généralement, l'horodatage de fin de la mesure moins l'horodatage de début).</dd>
-</dl>
+- [`PerformanceEntry.entryType`](/fr/docs/Web/API/PerformanceEntry.entryType)
+  - : Retourne « `measure` ».
+- [`PerformanceEntry.name`](/fr/docs/Web/API/PerformanceEntry.name)
+  - : Retourne le nom donné à la mesure lorsqu'elle a été créée via un appel à [`performance.measure()`](</fr/docs/Web/API/Performance/measure()>).
+- [`PerformanceEntry.startTime`](/fr/docs/Web/API/PerformanceEntry.startTime)
+  - : Retourne un objet [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp) associé à la mesure indiquant le moment où [`performance.measure()`](</fr/docs/Web/API/Performance/measure()>) a été appelée.
+- [`PerformanceEntry.duration`](/fr/docs/Web/API/PerformanceEntry.duration)
+  - : Retourne un objet [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp) correspondant à la durée de la mesure (généralement, l'horodatage de fin de la mesure moins l'horodatage de début).
 
-<h2 id="Methods">Méthodes</h2>
+## Méthodes
 
-<p>Cette interface n'a pas de méthode.</p>
+Cette interface n'a pas de méthode.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<p>Voir l'exemple dans : <a href="/fr/docs/Web/API/User_Timing_API/Using_the_User_Timing_API">Utilisation de l'API <i>User Timing</i></a>.</p>
+Voir l'exemple dans : [Utilisation de l'API _User Timing_](/fr/docs/Web/API/User_Timing_API/Using_the_User_Timing_API).
 
-<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('User Timing Level 2', '#dom-performance-measure', 'PerformanceMeasure')}}</td>
-      <td>{{Spec2('User Timing Level 2')}}</td>
-      <td></td>
-    </tr>
-    <tr>
-      <td>{{SpecName('User Timing', '#performancemeasure', 'PerformanceMeasure')}}</td>
-      <td>{{Spec2('User Timing')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                                    | Statut                                       | Commentaire          |
+| ---------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------- |
+| {{SpecName('User Timing Level 2', '#dom-performance-measure', 'PerformanceMeasure')}} | {{Spec2('User Timing Level 2')}} |                      |
+| {{SpecName('User Timing', '#performancemeasure', 'PerformanceMeasure')}}                 | {{Spec2('User Timing')}}             | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.PerformanceMeasure")}}</p>
+{{Compat("api.PerformanceMeasure")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li><a href="/fr/docs/Web/API/User_Timing_API">API <i>User Timing </i></a></li>
-  <li><a href="/fr/docs/Web/API/User_Timing_API/Using_the_User_Timing_API">Utilisation de l'API <i>User Timing</i></a></li>
-</ul>
+- [API _User Timing_](/fr/docs/Web/API/User_Timing_API)
+- [Utilisation de l'API _User Timing_](/fr/docs/Web/API/User_Timing_API/Using_the_User_Timing_API)
diff --git a/files/fr/web/api/performancenavigation/index.md b/files/fr/web/api/performancenavigation/index.md
index ced6eff643..341db6a41b 100644
--- a/files/fr/web/api/performancenavigation/index.md
+++ b/files/fr/web/api/performancenavigation/index.md
@@ -15,73 +15,52 @@ tags:
   - Timing
 translation_of: Web/API/PerformanceNavigation
 ---
-<p>{{APIRef("Navigation Timing")}}</p>
-
-<div class="warning">
-  <p><strong>Attention :</strong> cette interface est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2</a>. Veuillez utiliser l'interface <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a> à la place.</p>
-</div>
-
-<p>L'ancienne interface <strong><code>PerformanceNavigation</code></strong> représente des informations sur la façon dont la navigation vers le document actuel a été effectuée.</p>
-
-<p>Un objet de ce type peut être obtenu en appelant l'attribut en lecture seule <a href="/fr/docs/Web/API/Performance/navigation"><code>Performance.navigation</code></a>.</p>
-
-<h2 id="Properties">Propriétés</h2>
-
-<p><em>L'interface <code>PerformanceNavigation</code> n'hérite d'aucune propriété.</em></p>
-
-<dl>
-  <dt><a href="/fr/docs/Web/API/PerformanceNavigation/type"><code>PerformanceNavigation.type</code></a> {{readonlyInline}} {{deprecated_inline}}</dt>
-  <dd>Une valeur <code>unsigned short</code> qui indique comment la navigation vers cette page s'est faite. Les valeurs possibles sont :
-  <dl>
-    <dt><code>TYPE_NAVIGATE</code> (0)</dt>
-    <dd>La page a été consultée en suivant un lien, un signet, un formulaire ou un script, ou en tapant l'URL dans la barre d'adresse.</dd>
-    <dt><code>TYPE_RELOAD</code> (1)</dt>
-    <dd>L'accès à la page s'est fait en cliquant sur le bouton Recharger ou via la méthode <a href="/fr/docs/Web/API/Location/reload"><code>Location.reload()</code></a>.</dd>
-    <dt><code>TYPE_BACK_FORWARD</code> (2)</dt>
-    <dd>On a accédé à cette page en naviguant dans l'historique.</dd>
-    <dt><code>TYPE_RESERVED</code> (255)</dt>
-    <dd>De n'importe quelle autre manière.</dd>
-  </dl>
-  </dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceNavigation/redirectCount"><code>PerformanceNavigation.redirectCount</code></a> {{readonlyInline}} {{deprecated_inline}}</dt>
-  <dd>Un <code>unsigned short</code> représentant le nombre de <strong>Redirections</strong> effectués avant d'atteindre la page.</dd>
-</dl>
-
-<h2 id="Methods">Méthodes</h2>
-
-<p><em>L'interface <code>Performance</code> n'hérite d'aucune méthode.</em></p>
-
-<dl>
- <dt><a href="/fr/docs/Web/API/PerformanceNavigation/toJSON"><code>PerformanceNavigation.toJSON()</code></a> {{deprecated_inline}}</dt>
- <dd>Un sérialiseur renvoyant un objet json représentant l'objet <code>PerformanceNavigation</code>.</dd>
-</dl>
-
-<h2 id="Specifications">Spécifications</h2>
-
-<table class="standard-table">
-  <thead>
-    <tr>
-      <th scope="col">Spécifications</th>
-      <th scope="col">Statut</th>
-      <th scope="col">Commentaire</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>{{SpecName('Navigation Timing', '#performancenavigation', 'PerformanceNavigation')}}</td>
-      <td>{{Spec2('Navigation Timing')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.PerformanceNavigation")}}</p>
-
-<h2 id="See_also">Voir aussi</h2>
-
-<ul>
-  <li>L'interface <a href="/fr/docs/Web/API/Performance"><code>Performance</code></a> qui permet d'accéder à un objet de ce type.</li>
-  <li><a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a> (fait partie de Navigation Timing Level 2) {{experimental_inline}}</li>
-</ul>
+{{APIRef("Navigation Timing")}}
+
+> **Attention :** cette interface est dépréciée dans la spécification [Navigation Timing Level 2](https://w3c.github.io/navigation-timing/#obsolete). Veuillez utiliser l'interface [`PerformanceNavigationTiming`](/fr/docs/Web/API/PerformanceNavigationTiming) à la place.
+
+L'ancienne interface **`PerformanceNavigation`** représente des informations sur la façon dont la navigation vers le document actuel a été effectuée.
+
+Un objet de ce type peut être obtenu en appelant l'attribut en lecture seule [`Performance.navigation`](/fr/docs/Web/API/Performance/navigation).
+
+## Propriétés
+
+_L'interface `PerformanceNavigation` n'hérite d'aucune propriété._
+
+- [`PerformanceNavigation.type`](/fr/docs/Web/API/PerformanceNavigation/type) {{readonlyInline}} {{deprecated_inline}}
+
+  - : Une valeur `unsigned short` qui indique comment la navigation vers cette page s'est faite. Les valeurs possibles sont :
+
+    - `TYPE_NAVIGATE` (0)
+      - : La page a été consultée en suivant un lien, un signet, un formulaire ou un script, ou en tapant l'URL dans la barre d'adresse.
+    - `TYPE_RELOAD` (1)
+      - : L'accès à la page s'est fait en cliquant sur le bouton Recharger ou via la méthode [`Location.reload()`](/fr/docs/Web/API/Location/reload).
+    - `TYPE_BACK_FORWARD` (2)
+      - : On a accédé à cette page en naviguant dans l'historique.
+    - `TYPE_RESERVED` (255)
+      - : De n'importe quelle autre manière.
+
+- [`PerformanceNavigation.redirectCount`](/fr/docs/Web/API/PerformanceNavigation/redirectCount) {{readonlyInline}} {{deprecated_inline}}
+  - : Un `unsigned short` représentant le nombre de **Redirections** effectués avant d'atteindre la page.
+
+## Méthodes
+
+_L'interface `Performance` n'hérite d'aucune méthode._
+
+- [`PerformanceNavigation.toJSON()`](/fr/docs/Web/API/PerformanceNavigation/toJSON) {{deprecated_inline}}
+  - : Un sérialiseur renvoyant un objet json représentant l'objet `PerformanceNavigation`.
+
+## Spécifications
+
+| Spécifications                                                                                                   | Statut                                   | Commentaire          |
+| ---------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('Navigation Timing', '#performancenavigation', 'PerformanceNavigation')}} | {{Spec2('Navigation Timing')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.PerformanceNavigation")}}
+
+## Voir aussi
+
+- L'interface [`Performance`](/fr/docs/Web/API/Performance) qui permet d'accéder à un objet de ce type.
+- [`PerformanceNavigationTiming`](/fr/docs/Web/API/PerformanceNavigationTiming) (fait partie de Navigation Timing Level 2) {{experimental_inline}}
diff --git a/files/fr/web/api/performancenavigation/redirectcount/index.md b/files/fr/web/api/performancenavigation/redirectcount/index.md
index 42d9006675..335620082b 100644
--- a/files/fr/web/api/performancenavigation/redirectcount/index.md
+++ b/files/fr/web/api/performancenavigation/redirectcount/index.md
@@ -15,44 +15,29 @@ tags:
   - Héritage
 translation_of: Web/API/PerformanceNavigation/redirectCount
 ---
-<p>{{APIRef("Navigation Timing")}}</p>
+{{APIRef("Navigation Timing")}}
 
-<div class="warning">
-  <p><strong>Attention :</strong> Cette interface est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2</a>. Veuillez utiliser la propriété <a href="/fr/docs/Web/API/PerformanceNavigationTiming/redirectCount"><code>PerformanceNavigationTiming.redirectCount</code></a> de l'interface <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a> à la place.</p>
-</div>
+> **Attention :** Cette interface est dépréciée dans la spécification [Navigation Timing Level 2](https://w3c.github.io/navigation-timing/#obsolete). Veuillez utiliser la propriété [`PerformanceNavigationTiming.redirectCount`](/fr/docs/Web/API/PerformanceNavigationTiming/redirectCount) de l'interface [`PerformanceNavigationTiming`](/fr/docs/Web/API/PerformanceNavigationTiming) à la place.
 
-<p>L'ancienne propriété en lecture seule <code><strong>PerformanceNavigation.redirectCount</code></strong> renvoie un <code>unsigned short</code> représentant le nombre de <strong>Redirections</strong> effectués avant d'atteindre la page.</p>
+L'ancienne propriété en lecture seule **`PerformanceNavigation.redirectCount`** renvoie un `unsigned short` représentant le nombre de **Redirections** effectués avant d'atteindre la page.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:js">let <var>amount</var> = performanceNavigation.redirectCount;</pre>
+```js
+let amount = performanceNavigation.redirectCount;
+```
 
-<h2 id="Specifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
-  <thead>
-    <tr>
-      <th scope="col">Spécifications</th>
-      <th scope="col">Statut</th>
-      <th scope="col">Commentaire</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>{{SpecName('Navigation Timing', '#dom-performancenavigation-redirectcount',
-        'PerformanceNavigation.redirectCount')}}</td>
-      <td>{{Spec2('Navigation Timing')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
+| Spécifications                                                                                                                                                       | Statut                                   | Commentaire          |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('Navigation Timing', '#dom-performancenavigation-redirectcount',
+        'PerformanceNavigation.redirectCount')}} | {{Spec2('Navigation Timing')}} | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.PerformanceNavigation.redirectCount")}}</p>
+{{Compat("api.PerformanceNavigation.redirectCount")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>L'interface <a href="/fr/docs/Web/API/PerformanceNavigation"><code>PerformanceNavigation</code></a> à laquelle il appartient.</li>
-</ul>
+- L'interface [`PerformanceNavigation`](/fr/docs/Web/API/PerformanceNavigation) à laquelle il appartient.
diff --git a/files/fr/web/api/performancenavigation/type/index.md b/files/fr/web/api/performancenavigation/type/index.md
index d203b51da0..29011fa702 100644
--- a/files/fr/web/api/performancenavigation/type/index.md
+++ b/files/fr/web/api/performancenavigation/type/index.md
@@ -14,76 +14,36 @@ tags:
   - Héritage
 translation_of: Web/API/PerformanceNavigation/type
 ---
-<p>{{APIRef("Navigation Timing")}}</p>
+{{APIRef("Navigation Timing")}}
 
-<div class="warning">
-  <p><strong>Attention :</strong> Cette interface est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2</a>. Veuillez utiliser la propriété <a href="/fr/docs/Web/API/PerformanceNavigationTiming/type"><code>PerformanceNavigationTiming.type</code></a> de l'interface <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a> à la place.</p>
-</div>
+> **Attention :** Cette interface est dépréciée dans la spécification [Navigation Timing Level 2](https://w3c.github.io/navigation-timing/#obsolete). Veuillez utiliser la propriété [`PerformanceNavigationTiming.type`](/fr/docs/Web/API/PerformanceNavigationTiming/type) de l'interface [`PerformanceNavigationTiming`](/fr/docs/Web/API/PerformanceNavigationTiming) à la place.
 
-<p>L'ancienne propriété <code><strong>PerformanceNavigation.type</code></strong> en lecture seule renvoie un <code>unsigned short</code> contenant une constante décrivant comment la navigation vers cette page a été effectuée. Les valeurs possibles sont :</p>
+L'ancienne propriété **`PerformanceNavigation.type`** en lecture seule renvoie un `unsigned short` contenant une constante décrivant comment la navigation vers cette page a été effectuée. Les valeurs possibles sont :
 
-<table class="standard-table">
-  <thead>
-    <tr>
-      <th scope="col">Valeur</th>
-      <th scope="col">Nom de la constante</th>
-      <th scope="col">Signification</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>0</code></td>
-      <td><code>TYPE_NAVIGATE</code></td>
-      <td>La page a été consultée en suivant un lien, un signet, un formulaire, un script ou en tapant l'URL dans la barre d'adresse.</td>
-    </tr>
-    <tr>
-      <td><code>1</code></td>
-      <td><code>TYPE_RELOAD</code></td>
-      <td>La page a été consultée en cliquant sur le bouton Recharger ou via la méthode <a href="/fr/docs/Web/API/Location/reload"><code>Location.reload()</code></a>.</td>
-    </tr>
-    <tr>
-      <td><code>2</code></td>
-      <td><code>TYPE_BACK_FORWARD</code></td>
-      <td>La page a été consultée en naviguant dans l'historique.</td>
-    </tr>
-    <tr>
-      <td><code>255</code></td>
-      <td><code>TYPE_RESERVED</code></td>
-      <td>De toute autre manière.</td>
-    </tr>
-  </tbody>
-</table>
+| Valeur | Nom de la constante | Signification                                                                                                                          |
+| ------ | ------------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
+| `0`    | `TYPE_NAVIGATE`     | La page a été consultée en suivant un lien, un signet, un formulaire, un script ou en tapant l'URL dans la barre d'adresse.            |
+| `1`    | `TYPE_RELOAD`       | La page a été consultée en cliquant sur le bouton Recharger ou via la méthode [`Location.reload()`](/fr/docs/Web/API/Location/reload). |
+| `2`    | `TYPE_BACK_FORWARD` | La page a été consultée en naviguant dans l'historique.                                                                                |
+| `255`  | `TYPE_RESERVED`     | De toute autre manière.                                                                                                                |
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:js">let <var>type</var> = performanceNavigation.type;</pre>
+```js
+let type = performanceNavigation.type;
+```
 
-<h2 id="Specifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
-  <thead>
-    <tr>
-      <th scope="col">Spécifications</th>
-      <th scope="col">Statut</th>
-      <th scope="col">Commentaire</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>{{SpecName('Navigation Timing', '#dom-performancenavigation-type',
-        'PerformanceNavigation.type')}}</td>
-      <td>{{Spec2('Navigation Timing')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
+| Spécifications                                                                                                                               | Statut                                   | Commentaire          |
+| -------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('Navigation Timing', '#dom-performancenavigation-type',
+        'PerformanceNavigation.type')}} | {{Spec2('Navigation Timing')}} | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.PerformanceNavigation.type")}}</p>
+{{Compat("api.PerformanceNavigation.type")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>L'interface <a href="/fr/docs/Web/API/PerformanceNavigation"><code>PerformanceNavigation</code></a> à laquelle il appartient.</li>
-</ul>
+- L'interface [`PerformanceNavigation`](/fr/docs/Web/API/PerformanceNavigation) à laquelle il appartient.
diff --git a/files/fr/web/api/performancenavigationtiming/domcomplete/index.md b/files/fr/web/api/performancenavigationtiming/domcomplete/index.md
index 39a3b6d2ec..1dcd3d031d 100644
--- a/files/fr/web/api/performancenavigationtiming/domcomplete/index.md
+++ b/files/fr/web/api/performancenavigationtiming/domcomplete/index.md
@@ -10,27 +10,30 @@ tags:
   - Performance Web
 translation_of: Web/API/PerformanceNavigationTiming/domComplete
 ---
-<div>{{APIRef("Navigation Timing")}}{{SeeCompatTable}}</div>
+{{APIRef("Navigation Timing")}}{{SeeCompatTable}}
 
-<p>La propriété en lecture seule <strong><code>domComplete</code></strong> renvoie un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> représentant la valeur temporelle égale au temps immédiatement avant que l'agent utilisateur ne définisse la disponibilité du document actuel à <code><a href="https://html.spec.whatwg.org/multipage/syntax.html#the-end">complete</a></code>.</p>
+La propriété en lecture seule **`domComplete`** renvoie un [`timestamp`](/fr/docs/Web/API/DOMHighResTimeStamp) représentant la valeur temporelle égale au temps immédiatement avant que l'agent utilisateur ne définisse la disponibilité du document actuel à [`complete`](https://html.spec.whatwg.org/multipage/syntax.html#the-end).
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:js">perfEntry.domComplete;</pre>
+```js
+perfEntry.domComplete;
+```
 
-<h3 id="Return_Value">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> représentant une valeur temporelle égale au temps immédiatement avant que l'agent utilisateur ne définisse la disponibilité du document actuel à <code><a href="https://html.spec.whatwg.org/multipage/syntax.html#the-end">complete</a></code>.</p>
+Un [`timestamp`](/fr/docs/Web/API/DOMHighResTimeStamp) représentant une valeur temporelle égale au temps immédiatement avant que l'agent utilisateur ne définisse la disponibilité du document actuel à [`complete`](https://html.spec.whatwg.org/multipage/syntax.html#the-end).
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<p>L'exemple suivant illustre l'utilisation de cette propriété.</p>
+L'exemple suivant illustre l'utilisation de cette propriété.
 
-<pre class="brush:js">function print_nav_timing_data() {
+```js
+function print_nav_timing_data() {
   // Utilise getEntriesByType() pour obtenir uniquement les événements de type "navigation".
   let perfEntries = performance.getEntriesByType("navigation");
 
-  for (let i = 0; i &lt; perfEntries.length; i++) {
+  for (let i = 0; i < perfEntries.length; i++) {
     console.log("= Entrée de navigation : entry[" + i + "]");
     let p = perfEntries[i];
     // propriétés du DOM
@@ -47,28 +50,15 @@ translation_of: Web/API/PerformanceNavigationTiming/domComplete
     console.log("redirectCount = " + p.redirectCount);
   }
 }
-</pre>
+```
 
-<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('Navigation Timing Level 2',
-      '#dom-performancenavigationtiming-domcomplete', 'domComplete')}}</td>
-      <td>{{Spec2('Navigation Timing Level 2')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                                                                        | Statut                                               | Commentaire          |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- | -------------------- |
+| {{SpecName('Navigation Timing Level 2',
+      '#dom-performancenavigationtiming-domcomplete', 'domComplete')}} | {{Spec2('Navigation Timing Level 2')}} | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.PerformanceNavigationTiming.domComplete")}}</p>
+{{Compat("api.PerformanceNavigationTiming.domComplete")}}
diff --git a/files/fr/web/api/performancenavigationtiming/domcontentloadedeventend/index.md b/files/fr/web/api/performancenavigationtiming/domcontentloadedeventend/index.md
index e9f37b8720..c92d39542e 100644
--- a/files/fr/web/api/performancenavigationtiming/domcontentloadedeventend/index.md
+++ b/files/fr/web/api/performancenavigationtiming/domcontentloadedeventend/index.md
@@ -10,27 +10,30 @@ tags:
   - Performance Web
 translation_of: Web/API/PerformanceNavigationTiming/domContentLoadedEventEnd
 ---
-<div>{{APIRef("Navigation Timing")}}{{SeeCompatTable}}</div>
+{{APIRef("Navigation Timing")}}{{SeeCompatTable}}
 
-<p>La propriété en lecture seule <strong><code>domContentLoadedEventEnd</code></strong> retourne un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> représentant la valeur temporelle égale au temps immédiatement après la fin de l'événement <a href="/fr/docs/Web/API/Document/DOMContentLoaded_event"><code>DOMContentLoaded</code></a> du document actuel.</p>
+La propriété en lecture seule **`domContentLoadedEventEnd`** retourne un [`timestamp`](/fr/docs/Web/API/DOMHighResTimeStamp) représentant la valeur temporelle égale au temps immédiatement après la fin de l'événement [`DOMContentLoaded`](/fr/docs/Web/API/Document/DOMContentLoaded_event) du document actuel.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:js"><var>perfEntry</var>.domContentLoadedEventEnd;</pre>
+```js
+perfEntry.domContentLoadedEventEnd;
+```
 
-<h3 id="Return_Value">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> représentant la valeur temporelle égale au temps immédiatement après la fin de l'événement <a href="/fr/docs/Web/API/Document/DOMContentLoaded_event"><code>DOMContentLoaded</code></a> du document actuel.</p>
+Un [`timestamp`](/fr/docs/Web/API/DOMHighResTimeStamp) représentant la valeur temporelle égale au temps immédiatement après la fin de l'événement [`DOMContentLoaded`](/fr/docs/Web/API/Document/DOMContentLoaded_event) du document actuel.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<p>L'exemple suivant illustre l'utilisation de cette propriété.</p>
+L'exemple suivant illustre l'utilisation de cette propriété.
 
-<pre class="brush:js">function print_nav_timing_data() {
+```js
+function print_nav_timing_data() {
   // Utilise getEntriesByType() pour obtenir uniquement les événements de type "navigation".
   let perfEntries = performance.getEntriesByType("navigation");
 
-  for (let i = 0; i &lt; perfEntries.length; i++) {
+  for (let i = 0; i < perfEntries.length; i++) {
     console.log("= Entrée de navigation : entry[" + i + "]");
     let p = perfEntries[i];
     // propriétés du DOM
@@ -47,29 +50,16 @@ translation_of: Web/API/PerformanceNavigationTiming/domContentLoadedEventEnd
     console.log("redirectCount = " + p.redirectCount);
   }
 }
-</pre>
+```
 
-<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('Navigation Timing Level 2',
+| Spécification                                                                                                                                                                                        | Statut                                               | Commentaire          |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- | -------------------- |
+| {{SpecName('Navigation Timing Level 2',
         '#dom-performancenavigationtiming-domcontentloadedeventend',
-        'domContentLoadedEventEnd')}}</td>
-      <td>{{Spec2('Navigation Timing Level 2')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
+        'domContentLoadedEventEnd')}} | {{Spec2('Navigation Timing Level 2')}} | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.PerformanceNavigationTiming.domContentLoadedEventEnd")}}</p>
+{{Compat("api.PerformanceNavigationTiming.domContentLoadedEventEnd")}}
diff --git a/files/fr/web/api/performancenavigationtiming/domcontentloadedeventstart/index.md b/files/fr/web/api/performancenavigationtiming/domcontentloadedeventstart/index.md
index 88e1459fbb..4305f5946f 100644
--- a/files/fr/web/api/performancenavigationtiming/domcontentloadedeventstart/index.md
+++ b/files/fr/web/api/performancenavigationtiming/domcontentloadedeventstart/index.md
@@ -10,27 +10,30 @@ tags:
   - Performance Web
 translation_of: Web/API/PerformanceNavigationTiming/domContentLoadedEventStart
 ---
-<div>{{APIRef("Navigation Timing")}}{{SeeCompatTable}}</div>
+{{APIRef("Navigation Timing")}}{{SeeCompatTable}}
 
-<p>La propriété en lecture seule <strong><code>domContentLoadedEventStart</code></strong> retourne un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> représentant la valeur temporelle égale au temps immédiatement avant que l'agent utilisateur ne déclenche l'événement <a href="/fr/docs/Web/API/Document/DOMContentLoaded_event"><code>DOMContentLoaded</code></a> du document actuel.</p>
+La propriété en lecture seule **`domContentLoadedEventStart`** retourne un [`timestamp`](/fr/docs/Web/API/DOMHighResTimeStamp) représentant la valeur temporelle égale au temps immédiatement avant que l'agent utilisateur ne déclenche l'événement [`DOMContentLoaded`](/fr/docs/Web/API/Document/DOMContentLoaded_event) du document actuel.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:js"><var>perfEntry</var>.domContentLoadedEventStart;</pre>
+```js
+perfEntry.domContentLoadedEventStart;
+```
 
-<h3 id="Return_Value">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> représentant la valeur temporelle égale au temps immédiatement avant que l'agent utilisateur ne déclenche l'événement <a href="/fr/docs/Web/API/Document/DOMContentLoaded_event"><code>DOMContentLoaded</code></a> du document actuel.</p>
+Un [`timestamp`](/fr/docs/Web/API/DOMHighResTimeStamp) représentant la valeur temporelle égale au temps immédiatement avant que l'agent utilisateur ne déclenche l'événement [`DOMContentLoaded`](/fr/docs/Web/API/Document/DOMContentLoaded_event) du document actuel.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<p>L'exemple suivant illustre l'utilisation de cette propriété.</p>
+L'exemple suivant illustre l'utilisation de cette propriété.
 
-<pre class="brush:js">function print_nav_timing_data() {
+```js
+function print_nav_timing_data() {
   // Utilise getEntriesByType() pour obtenir uniquement les événements de type "navigation".
   let perfEntries = performance.getEntriesByType("navigation");
 
-  for (let i = 0; i &lt; perfEntries.length; i++) {
+  for (let i = 0; i < perfEntries.length; i++) {
     console.log("= Entrée de navigation : entry[" + i + "]");
     let p = perfEntries[i];
     // propriétés du DOM
@@ -47,29 +50,16 @@ translation_of: Web/API/PerformanceNavigationTiming/domContentLoadedEventStart
     console.log("redirectCount = " + p.redirectCount);
   }
 }
-</pre>
+```
 
-<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('Navigation Timing Level 2',
+| Spécification                                                                                                                                                                                            | Statut                                               | Commentaire          |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- | -------------------- |
+| {{SpecName('Navigation Timing Level 2',
         '#dom-performancenavigationtiming-domcontentloadedeventstart',
-        'domContentLoadedEventStart')}}</td>
-      <td>{{Spec2('Navigation Timing Level 2')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
+        'domContentLoadedEventStart')}} | {{Spec2('Navigation Timing Level 2')}} | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.PerformanceNavigationTiming.domContentLoadedEventStart")}}</p>
+{{Compat("api.PerformanceNavigationTiming.domContentLoadedEventStart")}}
diff --git a/files/fr/web/api/performancenavigationtiming/dominteractive/index.md b/files/fr/web/api/performancenavigationtiming/dominteractive/index.md
index 88045fd7d9..9901953532 100644
--- a/files/fr/web/api/performancenavigationtiming/dominteractive/index.md
+++ b/files/fr/web/api/performancenavigationtiming/dominteractive/index.md
@@ -10,27 +10,30 @@ tags:
   - Performance Web
 translation_of: Web/API/PerformanceNavigationTiming/domInteractive
 ---
-<div>{{APIRef("Navigation Timing")}}{{SeeCompatTable}}</div>
+{{APIRef("Navigation Timing")}}{{SeeCompatTable}}
 
-<p>La propriété en lecture seule <strong><code>domInteractive</code></strong> retourne un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> représentant la valeur temporelle égale au temps immédiatement avant que l'agent utilisateur ne définisse la disponibilité du document actuel à <a href="https://html.spec.whatwg.org/multipage/syntax.html#the-end">interactif</a>.</p>
+La propriété en lecture seule **`domInteractive`** retourne un [`timestamp`](/fr/docs/Web/API/DOMHighResTimeStamp) représentant la valeur temporelle égale au temps immédiatement avant que l'agent utilisateur ne définisse la disponibilité du document actuel à [interactif](https://html.spec.whatwg.org/multipage/syntax.html#the-end).
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js"><var>perfEntry</var>.domInteractive;</pre>
+```js
+perfEntry.domInteractive;
+```
 
-<h3 id="Return_Value">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Une <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> représentant la valeur temporelle égale au temps immédiatement avant que l'agent utilisateur ne définisse la disponibilité du document actuel à <a href="https://html.spec.whatwg.org/multipage/syntax.html#the-end">interactif</a>.</p>
+Une [`timestamp`](/fr/docs/Web/API/DOMHighResTimeStamp) représentant la valeur temporelle égale au temps immédiatement avant que l'agent utilisateur ne définisse la disponibilité du document actuel à [interactif](https://html.spec.whatwg.org/multipage/syntax.html#the-end).
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<p>L'exemple suivant illustre l'utilisation de cette propriété.</p>
+L'exemple suivant illustre l'utilisation de cette propriété.
 
-<pre class="brush:js">function print_nav_timing_data() {
+```js
+function print_nav_timing_data() {
   // Utilise getEntriesByType() pour obtenir uniquement les événements de type "navigation".
   let perfEntries = performance.getEntriesByType("navigation");
 
-  for (let i =0; i &lt; perfEntries.length; i++) {
+  for (let i =0; i < perfEntries.length; i++) {
     console.log("= Entrée de navigation : entry[" + i + "]");
     let p = perfEntries[i];
     // propriétés du DOM
@@ -47,28 +50,15 @@ translation_of: Web/API/PerformanceNavigationTiming/domInteractive
     console.log("redirectCount = " + p.redirectCount);
   }
 }
-</pre>
+```
 
-<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('Navigation Timing Level 2',
-        '#dom-performancenavigationtiming-dominteractive', 'domInteractive')}}</td>
-      <td>{{Spec2('Navigation Timing Level 2')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                                                                                | Statut                                               | Commentaire          |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------- | -------------------- |
+| {{SpecName('Navigation Timing Level 2',
+        '#dom-performancenavigationtiming-dominteractive', 'domInteractive')}} | {{Spec2('Navigation Timing Level 2')}} | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.PerformanceNavigationTiming.domInteractive")}}</p>
+{{Compat("api.PerformanceNavigationTiming.domInteractive")}}
diff --git a/files/fr/web/api/performancenavigationtiming/index.md b/files/fr/web/api/performancenavigationtiming/index.md
index 95faf846f3..ecb0e990ac 100644
--- a/files/fr/web/api/performancenavigationtiming/index.md
+++ b/files/fr/web/api/performancenavigationtiming/index.md
@@ -10,96 +10,73 @@ tags:
   - Performance Web
 translation_of: Web/API/PerformanceNavigationTiming
 ---
-<p>{{APIRef("Navigation Timing")}}{{SeeCompatTable}}</p>
-
-<p>L'interface <strong><code>PerformanceNavigationTiming</code></strong> fournit des méthodes et des propriétés pour stocker et récupérer des métriques concernant les événements de navigation de document du navigateur. Par exemple, cette interface peut être utilisée pour déterminer le temps nécessaire au chargement ou au déchargement d'un document.</p>
-
-<p>{{InheritanceDiagram}}</p>
-
-<h2 id="Properties">Propriétés</h2>
-
-<p>Cette interface étend les propriétés de <a href="/fr/docs/Web/API/PerformanceEntry"><code>PerformanceEntry</code></a> suivantes pour les types d'entrée de performance de navigation en les qualifiant et en les contraignant comme suit :</p>
-
-<dl>
-  <dt><a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>PerformanceEntry.entryType</code></a> {{readonlyInline}}</dt>
-  <dd>Retourne « <code>navigation</code> ».</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceEntry/name"><code>PerformanceEntry.name</code></a> {{readonlyInline}}</dt>
-  <dd>Retourne l'adresse du <a href="https://dom.spec.whatwg.org/#concept-document-url">document</a>.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceEntry/startTime"><code>PerformanceEntry.startTime</code></a> {{readonlyInline}}</dt>
-  <dd>Retourne un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> avec une valeur de « <code>0</code> ».</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceEntry/duration"><code>PerformanceEntry.duration</code></a> {{readonlyInline}}</dt>
-  <dd>Retourne un <a href="/fr/docs/Web/API/DOMHighResTimeStamp">timestamp</a> qui est la différence entre les propriétés <a href="/fr/docs/Web/API/PerformanceNavigationTiming/loadEventEnd"><code>PerformanceNavigationTiming.loadEventEnd</code></a> et <a href="/fr/docs/Web/API/PerformanceEntry/startTime"><code>PerformanceEntry.startTime</code></a>.</dd>
-</dl>
-
-<p>Cette interface étend également les propriétés <a href="/fr/docs/Web/API/PerformanceResourceTiming"><code>PerformanceResourceTiming</code></a> suivantes pour les types d'entrée de performance de navigation en les qualifiant et en les contraignant comme suit :</p>
-
-<dl>
-  <dt><a href="/fr/docs/Web/API/PerformanceResourceTiming/initiatorType"><code>PerformanceResourceTiming.initiatorType</code></a> {{readonlyInline}}</dt>
-  <dd>Retourne « <code>navigation</code> ».</dd>
-</dl>
-
-<p>L'interface prend également en charge les propriétés suivantes :</p>
-
-<dl>
-  <dt><a href="/fr/docs/Web/API/PerformanceNavigationTiming/domComplete"><code>PerformanceNavigationTiming.domComplete</code></a> {{readonlyInline}} {{Experimental_Inline}}</dt>
-  <dd>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> représentant une valeur temporelle égale au temps immédiatement avant que le navigateur ne définisse la disponibilité du document actuel à <em><a href="https://html.spec.whatwg.org/multipage/syntax.html#the-end">complete</a></em>.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceNavigationTiming/domContentLoadedEventEnd"><code>PerformanceNavigationTiming.domContentLoadedEventEnd</code></a> {{readonlyInline}} {{Experimental_Inline}}</dt>
-  <dd>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> représentant la valeur temporelle égale au temps immédiatement après la fin de l'événement <a href="https://html.spec.whatwg.org/multipage/syntax.html#the-end">DOMContentLoaded</a> du document actuel.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceNavigationTiming/domContentLoadedEventStart"><code>PerformanceNavigationTiming.domContentLoadedEventStart</code></a> {{readonlyInline}} {{Experimental_Inline}}</dt>
-  <dd>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> représentant la valeur temporelle égale au temps immédiatement avant que l'agent utilisateur ne déclenche l'événement <a href="https://html.spec.whatwg.org/multipage/syntax.html#the-end">DOMContentLoaded</a> sur le document actuel.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceNavigationTiming/domInteractive"><code>PerformanceNavigationTiming.domInteractive</code></a> {{readonlyInline}} {{Experimental_Inline}}</dt>
-  <dd>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> représentant une valeur <a href="/fr/docs/Web/API/DOMHighResTimeStamp">temporelle</a> égale qui précède immédiatement le moment où l'agent utilisateur règle l'état de préparation du document actuel sur <a href="https://html.spec.whatwg.org/multipage/syntax.html#the-end">interactif</a>.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceNavigationTiming/loadEventEnd"><code>PerformanceNavigationTiming.loadEventEnd</code></a> {{readonlyInline}} {{Experimental_Inline}}</dt>
-  <dd>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> représentant le moment où l'événement de chargement du document actuel est terminé.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceNavigationTiming/loadEventStart"><code>PerformanceNavigationTiming.loadEventStart</code></a> {{readonlyInline}} {{Experimental_Inline}}</dt>
-  <dd>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> représentant la valeur temporelle égale à l'heure précédant immédiatement l'événement de chargement du document actuel.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceNavigationTiming/redirectCount"><code>PerformanceNavigationTiming.redirectCount</code></a> {{readonlyInline}} {{Experimental_Inline}}</dt>
-  <dd>Un nombre représentant le nombre de redirections, depuis la dernière navigation sans redirection, dans le contexte de navigation actuel. S'il n'y a pas eu de redirection, ou si la redirection provenait d'une autre origine, et que cette origine ne permet pas que ses informations temporelles soient exposées à l'origine actuelle, la valeur sera 0.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceNavigationTiming/requestStart"><code>PerformanceNavigationTiming.requestStart</code></a> {{readonlyInline}} {{Experimental_Inline}}</dt>
-  <dd>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> représentant le moment immédiatement avant que l'agent utilisateur ne commence à demander la ressource au serveur, ou aux caches d'application pertinents ou aux ressources locales.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceNavigationTiming/responseStart"><code>PerformanceNavigationTiming.responseStart</code></a> {{readonlyInline}} {{Experimental_Inline}}</dt>
-  <dd>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> représentant l'heure immédiatement après que l'analyseur HTTP de l'agent utilisateur ait reçu le premier octet de la réponse des caches d'application pertinents, ou des ressources locales ou du serveur.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceNavigationTiming/type"><code>PerformanceNavigationTiming.type</code></a> {{readonlyInline}} {{Experimental_Inline}}</dt>
-  <dd>Une chaîne de caractère <a href="/fr/docs/Web/API/DOMString">DOMString</a> représentant le type de navigation. Doit être : « <code>navigate</code> », « <code>reload</code> », « <code>back_forward</code> » ou « <code>prerender</code> ».</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceNavigationTiming/unloadEventEnd"><code>PerformanceNavigationTiming.unloadEventEnd</code></a> {{readonlyInline}} {{Experimental_Inline}}</dt>
-  <dd>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> représentant la valeur temporelle égale au temps immédiatement après que l'agent utilisateur ait terminé l'événement de déchargement du document précédent.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceNavigationTiming/unloadEventStart"><code>PerformanceNavigationTiming.unloadEventStart</code></a> {{readonlyInline}} {{Experimental_Inline}}</dt>
-  <dd>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> représentant la valeur temporelle égale au temps immédiatement avant que l'agent utilisateur ne lance l'événement de déchargement du document précédent.</dd>
-</dl>
-
-<h2 id="Methods">Méthodes</h2>
-
-<dl>
-  <dt><a href="/fr/docs/Web/API/PerformanceNavigationTiming/toJSON"><code>PerformanceNavigationTiming.toJSON()</code></a> {{Experimental_Inline}}</dt>
-  <dd>Retourne une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui est la représentation JSON de l'objet <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a>.</dd>
-</dl>
-
-<h2 id="Specifications">Spécifications</h2>
-
-<table class="standard-table">
-  <thead>
-    <tr>
-      <th scope="col">Spécifications</th>
-      <th scope="col">Statut</th>
-      <th scope="col">Commentaire</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>{{SpecName('Navigation Timing Level 2', '#sec-PerformanceNavigationTiming', 'PerformanceNavigationTiming')}}</td>
-      <td>{{Spec2('Navigation Timing Level 2')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.PerformanceNavigationTiming")}}</p>
-
-<h2 id="See_also">Voir aussi</h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/API/Performance/navigation"><code>Performance.navigation</code></a></li>
-  <li><a href="/fr/docs/Web/API/PerformanceNavigation"><code>PerformanceNavigation</code></a></li>
-</ul>
+{{APIRef("Navigation Timing")}}{{SeeCompatTable}}
+
+L'interface **`PerformanceNavigationTiming`** fournit des méthodes et des propriétés pour stocker et récupérer des métriques concernant les événements de navigation de document du navigateur. Par exemple, cette interface peut être utilisée pour déterminer le temps nécessaire au chargement ou au déchargement d'un document.
+
+{{InheritanceDiagram}}
+
+## Propriétés
+
+Cette interface étend les propriétés de [`PerformanceEntry`](/fr/docs/Web/API/PerformanceEntry) suivantes pour les types d'entrée de performance de navigation en les qualifiant et en les contraignant comme suit :
+
+- [`PerformanceEntry.entryType`](/fr/docs/Web/API/PerformanceEntry/entryType) {{readonlyInline}}
+  - : Retourne « `navigation` ».
+- [`PerformanceEntry.name`](/fr/docs/Web/API/PerformanceEntry/name) {{readonlyInline}}
+  - : Retourne l'adresse du [document](https://dom.spec.whatwg.org/#concept-document-url).
+- [`PerformanceEntry.startTime`](/fr/docs/Web/API/PerformanceEntry/startTime) {{readonlyInline}}
+  - : Retourne un [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp) avec une valeur de « `0` ».
+- [`PerformanceEntry.duration`](/fr/docs/Web/API/PerformanceEntry/duration) {{readonlyInline}}
+  - : Retourne un [timestamp](/fr/docs/Web/API/DOMHighResTimeStamp) qui est la différence entre les propriétés [`PerformanceNavigationTiming.loadEventEnd`](/fr/docs/Web/API/PerformanceNavigationTiming/loadEventEnd) et [`PerformanceEntry.startTime`](/fr/docs/Web/API/PerformanceEntry/startTime).
+
+Cette interface étend également les propriétés [`PerformanceResourceTiming`](/fr/docs/Web/API/PerformanceResourceTiming) suivantes pour les types d'entrée de performance de navigation en les qualifiant et en les contraignant comme suit :
+
+- [`PerformanceResourceTiming.initiatorType`](/fr/docs/Web/API/PerformanceResourceTiming/initiatorType) {{readonlyInline}}
+  - : Retourne « `navigation` ».
+
+L'interface prend également en charge les propriétés suivantes :
+
+- [`PerformanceNavigationTiming.domComplete`](/fr/docs/Web/API/PerformanceNavigationTiming/domComplete) {{readonlyInline}} {{Experimental_Inline}}
+  - : Un [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp) représentant une valeur temporelle égale au temps immédiatement avant que le navigateur ne définisse la disponibilité du document actuel à _[complete](https://html.spec.whatwg.org/multipage/syntax.html#the-end)_.
+- [`PerformanceNavigationTiming.domContentLoadedEventEnd`](/fr/docs/Web/API/PerformanceNavigationTiming/domContentLoadedEventEnd) {{readonlyInline}} {{Experimental_Inline}}
+  - : Un [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp) représentant la valeur temporelle égale au temps immédiatement après la fin de l'événement [DOMContentLoaded](https://html.spec.whatwg.org/multipage/syntax.html#the-end) du document actuel.
+- [`PerformanceNavigationTiming.domContentLoadedEventStart`](/fr/docs/Web/API/PerformanceNavigationTiming/domContentLoadedEventStart) {{readonlyInline}} {{Experimental_Inline}}
+  - : Un [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp) représentant la valeur temporelle égale au temps immédiatement avant que l'agent utilisateur ne déclenche l'événement [DOMContentLoaded](https://html.spec.whatwg.org/multipage/syntax.html#the-end) sur le document actuel.
+- [`PerformanceNavigationTiming.domInteractive`](/fr/docs/Web/API/PerformanceNavigationTiming/domInteractive) {{readonlyInline}} {{Experimental_Inline}}
+  - : Un [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp) représentant une valeur [temporelle](/fr/docs/Web/API/DOMHighResTimeStamp) égale qui précède immédiatement le moment où l'agent utilisateur règle l'état de préparation du document actuel sur [interactif](https://html.spec.whatwg.org/multipage/syntax.html#the-end).
+- [`PerformanceNavigationTiming.loadEventEnd`](/fr/docs/Web/API/PerformanceNavigationTiming/loadEventEnd) {{readonlyInline}} {{Experimental_Inline}}
+  - : Un [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp) représentant le moment où l'événement de chargement du document actuel est terminé.
+- [`PerformanceNavigationTiming.loadEventStart`](/fr/docs/Web/API/PerformanceNavigationTiming/loadEventStart) {{readonlyInline}} {{Experimental_Inline}}
+  - : Un [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp) représentant la valeur temporelle égale à l'heure précédant immédiatement l'événement de chargement du document actuel.
+- [`PerformanceNavigationTiming.redirectCount`](/fr/docs/Web/API/PerformanceNavigationTiming/redirectCount) {{readonlyInline}} {{Experimental_Inline}}
+  - : Un nombre représentant le nombre de redirections, depuis la dernière navigation sans redirection, dans le contexte de navigation actuel. S'il n'y a pas eu de redirection, ou si la redirection provenait d'une autre origine, et que cette origine ne permet pas que ses informations temporelles soient exposées à l'origine actuelle, la valeur sera 0.
+- [`PerformanceNavigationTiming.requestStart`](/fr/docs/Web/API/PerformanceNavigationTiming/requestStart) {{readonlyInline}} {{Experimental_Inline}}
+  - : Un [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp) représentant le moment immédiatement avant que l'agent utilisateur ne commence à demander la ressource au serveur, ou aux caches d'application pertinents ou aux ressources locales.
+- [`PerformanceNavigationTiming.responseStart`](/fr/docs/Web/API/PerformanceNavigationTiming/responseStart) {{readonlyInline}} {{Experimental_Inline}}
+  - : Un [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp) représentant l'heure immédiatement après que l'analyseur HTTP de l'agent utilisateur ait reçu le premier octet de la réponse des caches d'application pertinents, ou des ressources locales ou du serveur.
+- [`PerformanceNavigationTiming.type`](/fr/docs/Web/API/PerformanceNavigationTiming/type) {{readonlyInline}} {{Experimental_Inline}}
+  - : Une chaîne de caractère [DOMString](/fr/docs/Web/API/DOMString) représentant le type de navigation. Doit être : « `navigate` », « `reload` », « `back_forward` » ou « `prerender` ».
+- [`PerformanceNavigationTiming.unloadEventEnd`](/fr/docs/Web/API/PerformanceNavigationTiming/unloadEventEnd) {{readonlyInline}} {{Experimental_Inline}}
+  - : Un [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp) représentant la valeur temporelle égale au temps immédiatement après que l'agent utilisateur ait terminé l'événement de déchargement du document précédent.
+- [`PerformanceNavigationTiming.unloadEventStart`](/fr/docs/Web/API/PerformanceNavigationTiming/unloadEventStart) {{readonlyInline}} {{Experimental_Inline}}
+  - : Un [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp) représentant la valeur temporelle égale au temps immédiatement avant que l'agent utilisateur ne lance l'événement de déchargement du document précédent.
+
+## Méthodes
+
+- [`PerformanceNavigationTiming.toJSON()`](/fr/docs/Web/API/PerformanceNavigationTiming/toJSON) {{Experimental_Inline}}
+  - : Retourne une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui est la représentation JSON de l'objet [`PerformanceNavigationTiming`](/fr/docs/Web/API/PerformanceNavigationTiming).
+
+## Spécifications
+
+| Spécifications                                                                                                                                   | Statut                                               | Commentaire          |
+| ------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------- | -------------------- |
+| {{SpecName('Navigation Timing Level 2', '#sec-PerformanceNavigationTiming', 'PerformanceNavigationTiming')}} | {{Spec2('Navigation Timing Level 2')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.PerformanceNavigationTiming")}}
+
+## Voir aussi
+
+- [`Performance.navigation`](/fr/docs/Web/API/Performance/navigation)
+- [`PerformanceNavigation`](/fr/docs/Web/API/PerformanceNavigation)
diff --git a/files/fr/web/api/performancenavigationtiming/loadeventend/index.md b/files/fr/web/api/performancenavigationtiming/loadeventend/index.md
index 58b2490f45..a6283e7b7b 100644
--- a/files/fr/web/api/performancenavigationtiming/loadeventend/index.md
+++ b/files/fr/web/api/performancenavigationtiming/loadeventend/index.md
@@ -10,27 +10,30 @@ tags:
   - Performance Web
 translation_of: Web/API/PerformanceNavigationTiming/loadEventEnd
 ---
-<div>{{APIRef("Navigation Timing")}}{{SeeCompatTable}}</div>
+{{APIRef("Navigation Timing")}}{{SeeCompatTable}}
 
-<p>La propriété en lecture seule <strong><code>loadEventEnd</code></strong> renvoie un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> qui est égal à l'heure à laquelle l'événement de chargement du document actuel est terminé.</p>
+La propriété en lecture seule **`loadEventEnd`** renvoie un [`timestamp`](/fr/docs/Web/API/DOMHighResTimeStamp) qui est égal à l'heure à laquelle l'événement de chargement du document actuel est terminé.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:js"><var>perfEntry</var>.loadEventEnd;</pre>
+```js
+perfEntry.loadEventEnd;
+```
 
-<h3 id="Return_Value">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> représentant le moment où l'événement de chargement du document actuel est terminé.</p>
+Un [`timestamp`](/fr/docs/Web/API/DOMHighResTimeStamp) représentant le moment où l'événement de chargement du document actuel est terminé.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<p>L'exemple suivant illustre l'utilisation de cette propriété.</p>
+L'exemple suivant illustre l'utilisation de cette propriété.
 
-<pre class="brush:js">function print_nav_timing_data() {
+```js
+function print_nav_timing_data() {
   // Utilise getEntriesByType() pour obtenir uniquement les événements de type "navigation".
   let perfEntries = performance.getEntriesByType("navigation");
 
-  for (let i = 0; i &lt; perfEntries.length; i++) {
+  for (let i = 0; i < perfEntries.length; i++) {
     console.log("= Entrée de navigation : entry[" + i + "]");
     let p = perfEntries[i];
     // propriétés du DOM
@@ -47,28 +50,15 @@ translation_of: Web/API/PerformanceNavigationTiming/loadEventEnd
     console.log("redirectCount = " + p.redirectCount);
   }
 }
-</pre>
+```
 
-<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('Navigation Timing Level 2',
-        '#dom-performancenavigationtiming-loadeventend', 'loadEventEnd')}}</td>
-      <td>{{Spec2('Navigation Timing Level 2')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                                                                            | Statut                                               | Commentaire          |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- | -------------------- |
+| {{SpecName('Navigation Timing Level 2',
+        '#dom-performancenavigationtiming-loadeventend', 'loadEventEnd')}} | {{Spec2('Navigation Timing Level 2')}} | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.PerformanceNavigationTiming.loadEventEnd")}}</p>
+{{Compat("api.PerformanceNavigationTiming.loadEventEnd")}}
diff --git a/files/fr/web/api/performancenavigationtiming/loadeventstart/index.md b/files/fr/web/api/performancenavigationtiming/loadeventstart/index.md
index 910b29c044..a3efeb4dca 100644
--- a/files/fr/web/api/performancenavigationtiming/loadeventstart/index.md
+++ b/files/fr/web/api/performancenavigationtiming/loadeventstart/index.md
@@ -10,27 +10,30 @@ tags:
   - Performance Web
 translation_of: Web/API/PerformanceNavigationTiming/loadEventStart
 ---
-<div>{{APIRef("Navigation Timing")}}{{SeeCompatTable}}</div>
+{{APIRef("Navigation Timing")}}{{SeeCompatTable}}
 
-<p>La propriété en lecture seule <strong><code>loadEventStart</code></strong> retourne un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> représentant la valeur temporelle égale au temps immédiatement avant le déclenchement de l'événement de chargement du document actuel.</p>
+La propriété en lecture seule **`loadEventStart`** retourne un [`timestamp`](/fr/docs/Web/API/DOMHighResTimeStamp) représentant la valeur temporelle égale au temps immédiatement avant le déclenchement de l'événement de chargement du document actuel.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:js"><var>perfEntry</var>.loadEventStart;</pre>
+```js
+perfEntry.loadEventStart;
+```
 
-<h3 id="Return_Value">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> représentant une valeur temporelle égale à l'heure précédant immédiatement l'événement de chargement du document actuel.</p>
+Un [`timestamp`](/fr/docs/Web/API/DOMHighResTimeStamp) représentant une valeur temporelle égale à l'heure précédant immédiatement l'événement de chargement du document actuel.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<p>L'exemple suivant illustre l'utilisation de cette propriété.</p>
+L'exemple suivant illustre l'utilisation de cette propriété.
 
-<pre class="brush:js">function print_nav_timing_data() {
+```js
+function print_nav_timing_data() {
   // Utilise getEntriesByType() pour obtenir uniquement les événements de type "navigation".
   let perfEntries = performance.getEntriesByType("navigation");
 
-  for (let i = 0; i &lt; perfEntries.length; i++) {
+  for (let i = 0; i < perfEntries.length; i++) {
     console.log("= Entrée de navigation : entry[" + i + "]");
     let p = perfEntries[i];
     // propriétés du DOM
@@ -47,28 +50,15 @@ translation_of: Web/API/PerformanceNavigationTiming/loadEventStart
     console.log("redirectCount = " + p.redirectCount);
   }
 }
-</pre>
+```
 
-<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('Navigation Timing Level 2',
-        '#dom-performancenavigationtiming-loadeventstart', 'loadEventStart')}}</td>
-      <td>{{Spec2('Navigation Timing Level 2')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                                                                                | Statut                                               | Commentaire          |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------- | -------------------- |
+| {{SpecName('Navigation Timing Level 2',
+        '#dom-performancenavigationtiming-loadeventstart', 'loadEventStart')}} | {{Spec2('Navigation Timing Level 2')}} | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.PerformanceNavigationTiming.loadEventStart")}}</p>
+{{Compat("api.PerformanceNavigationTiming.loadEventStart")}}
diff --git a/files/fr/web/api/performancenavigationtiming/redirectcount/index.md b/files/fr/web/api/performancenavigationtiming/redirectcount/index.md
index 5c17f209f2..db8ff21145 100644
--- a/files/fr/web/api/performancenavigationtiming/redirectcount/index.md
+++ b/files/fr/web/api/performancenavigationtiming/redirectcount/index.md
@@ -10,27 +10,30 @@ tags:
   - Performance Web
 translation_of: Web/API/PerformanceNavigationTiming/redirectCount
 ---
-<div>{{APIRef("Navigation Timing")}}{{SeeCompatTable}}</div>
+{{APIRef("Navigation Timing")}}{{SeeCompatTable}}
 
-<p>La propriété en lecture seule <strong><code>redirectCount</code></strong> renvoie un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> représentant le nombre de redirections depuis la dernière navigation sans redirection dans le contexte de navigation actuel.</p>
+La propriété en lecture seule **`redirectCount`** renvoie un [`timestamp`](/fr/docs/Web/API/DOMHighResTimeStamp) représentant le nombre de redirections depuis la dernière navigation sans redirection dans le contexte de navigation actuel.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js"><var>perfEntry</var>.redirectCount;</pre>
+```js
+perfEntry.redirectCount;
+```
 
-<h3 id="Return_Value">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Un nombre représentant le nombre de redirections depuis la dernière navigation sans redirection dans le contexte de navigation actuel.</p>
+Un nombre représentant le nombre de redirections depuis la dernière navigation sans redirection dans le contexte de navigation actuel.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<p>L'exemple suivant illustre l'utilisation de cette propriété.</p>
+L'exemple suivant illustre l'utilisation de cette propriété.
 
-<pre class="brush:js">function print_nav_timing_data() {
+```js
+function print_nav_timing_data() {
   // Utilise getEntriesByType() pour obtenir uniquement les événements de type "navigation".
   let perfEntries = performance.getEntriesByType("navigation");
 
-  for (let i = 0; i &lt; perfEntries.length; i++) {
+  for (let i = 0; i < perfEntries.length; i++) {
     console.log("= Entrée de navigation : entry[" + i + "]");
     let p = perfEntries[i];
     // propriétés du DOM
@@ -47,28 +50,15 @@ translation_of: Web/API/PerformanceNavigationTiming/redirectCount
     console.log("redirectCount = " + p.redirectCount);
   }
 }
-</pre>
+```
 
-<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('Navigation Timing Level 2',
-        '#dom-performancenavigationtiming-redirectcount', 'redirectCount')}}</td>
-      <td>{{Spec2('Navigation Timing Level 2')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                                                                                | Statut                                               | Commentaire          |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------- | -------------------- |
+| {{SpecName('Navigation Timing Level 2',
+        '#dom-performancenavigationtiming-redirectcount', 'redirectCount')}} | {{Spec2('Navigation Timing Level 2')}} | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.PerformanceNavigationTiming.redirectCount")}}</p>
+{{Compat("api.PerformanceNavigationTiming.redirectCount")}}
diff --git a/files/fr/web/api/performancenavigationtiming/tojson/index.md b/files/fr/web/api/performancenavigationtiming/tojson/index.md
index 8ca2ec6289..00263a8c82 100644
--- a/files/fr/web/api/performancenavigationtiming/tojson/index.md
+++ b/files/fr/web/api/performancenavigationtiming/tojson/index.md
@@ -10,28 +10,29 @@ tags:
   - Performance Web
 translation_of: Web/API/PerformanceNavigationTiming/toJSON
 ---
-<div>{{APIRef("Navigation Timing")}}{{SeeCompatTable}}</div>
+{{APIRef("Navigation Timing")}}{{SeeCompatTable}}
 
-<p>La méthode <strong><code>toJSON()</code></strong> est un <em>sérialiseur</em> - elle renvoie une représentation JSON de l'objet <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a>.</p>
+La méthode **`toJSON()`** est un _sérialiseur_ - elle renvoie une représentation JSON de l'objet [`PerformanceNavigationTiming`](/fr/docs/Web/API/PerformanceNavigationTiming).
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:js">const <var>json</var> = <var>resourcePerfEntry</var>.toJSON();</pre>
+```js
+const json = resourcePerfEntry.toJSON();
+```
 
-<h3 id="Arguments">Arguments</h3>
+### Arguments
 
-<p>Aucun.</p>
+Aucun.
 
-<h3 id="Return_value">Valeur de retour</h3>
+### Valeur de retour
 
-<dl>
-  <dt><code>json</code></dt>
-  <dd>Un objet JSON qui est la sérialisation de l'objet <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a> comme une carte avec des entrées de l'interface héritée la plus proche et avec des entrées pour chacun des attributs sérialisables.</dd>
-</dl>
+- `json`
+  - : Un objet JSON qui est la sérialisation de l'objet [`PerformanceNavigationTiming`](/fr/docs/Web/API/PerformanceNavigationTiming) comme une carte avec des entrées de l'interface héritée la plus proche et avec des entrées pour chacun des attributs sérialisables.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">// Obtient une entrée de performance des ressources
+```js
+// Obtient une entrée de performance des ressources
 let perfEntries = performance.getEntriesByType("navigation");
 let entry = perfEntries[0];
 
@@ -39,28 +40,15 @@ let entry = perfEntries[0];
 let json = entry.toJSON();
 let s = JSON.stringify(json);
 console.log("PerformanceNavigationTiming.toJSON() = " + s);
-</pre>
+```
 
-<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('Navigation Timing Level 2',
-        '#dom-performancenavigationtiming-tojson', 'toJSON()')}}</td>
-      <td>{{Spec2('Navigation Timing Level 2')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                                                                | Statut                                               | Commentaire          |
+| -------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- | -------------------- |
+| {{SpecName('Navigation Timing Level 2',
+        '#dom-performancenavigationtiming-tojson', 'toJSON()')}} | {{Spec2('Navigation Timing Level 2')}} | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.PerformanceNavigationTiming.toJSON")}}</p>
+{{Compat("api.PerformanceNavigationTiming.toJSON")}}
diff --git a/files/fr/web/api/performancenavigationtiming/type/index.md b/files/fr/web/api/performancenavigationtiming/type/index.md
index 4c0d9dcb12..b77f295894 100644
--- a/files/fr/web/api/performancenavigationtiming/type/index.md
+++ b/files/fr/web/api/performancenavigationtiming/type/index.md
@@ -10,38 +10,39 @@ tags:
   - Performance Web
 translation_of: Web/API/PerformanceNavigationTiming/type
 ---
-<div>{{APIRef("Navigation Timing")}}{{SeeCompatTable}}</div>
+{{APIRef("Navigation Timing")}}{{SeeCompatTable}}
 
-<p>La propriété en lecture seule <strong><code>type</code></strong> renvoie une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> représentant le type de navigation. La valeur doit être l'une des suivantes :</p>
+La propriété en lecture seule **`type`** renvoie une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) représentant le type de navigation. La valeur doit être l'une des suivantes :
 
-<dl>
-  <dt><code>navigate</code></dt>
-  <dd>La navigation a commencé en cliquant sur un lien, en saisissant l'URL dans la barre d'adresse du navigateur, en soumettant un formulaire ou en s'initialisant par une opération de script autre que reload et back_forward, comme indiqué ci-dessous.</dd>
-  <dt><code>reload</code></dt>
-  <dd>La navigation s'effectue par l'opération de rechargement du navigateur ou <a href="/fr/docs/Web/API/location/reload"><code>location.reload()</code></a>.</dd>
-  <dt><code>back_forward</code></dt>
-  <dd>La navigation se fait par l'opération de traversée de l'historique du navigateur.</dd>
-  <dt><code>prerender</code></dt>
-  <dd>La navigation est initiée par un <a href="https://www.w3.org/TR/resource-hints/#prerender">indice de prétraitement</a>.</dd>
-</dl>
+- `navigate`
+  - : La navigation a commencé en cliquant sur un lien, en saisissant l'URL dans la barre d'adresse du navigateur, en soumettant un formulaire ou en s'initialisant par une opération de script autre que reload et back_forward, comme indiqué ci-dessous.
+- `reload`
+  - : La navigation s'effectue par l'opération de rechargement du navigateur ou [`location.reload()`](/fr/docs/Web/API/location/reload).
+- `back_forward`
+  - : La navigation se fait par l'opération de traversée de l'historique du navigateur.
+- `prerender`
+  - : La navigation est initiée par un [indice de prétraitement](https://www.w3.org/TR/resource-hints/#prerender).
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:js"><var>perfEntry</var>.type;</pre>
+```js
+perfEntry.type;
+```
 
-<h3 id="Return_Value">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui est l'une des valeurs énumérées ci-dessus.</p>
+Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui est l'une des valeurs énumérées ci-dessus.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<p>L'exemple suivant illustre l'utilisation de cette propriété.</p>
+L'exemple suivant illustre l'utilisation de cette propriété.
 
-<pre class="brush:js">function print_nav_timing_data() {
+```js
+function print_nav_timing_data() {
   // Utilise getEntriesByType() pour obtenir uniquement les événements de type "navigation".
   let perfEntries = performance.getEntriesByType("navigation");
 
-  for (let i = 0; i &lt; perfEntries.length; i++) {
+  for (let i = 0; i < perfEntries.length; i++) {
     console.log("= Entrée de navigation : entry[" + i + "]");
     let p = perfEntries[i];
     // propriétés du DOM
@@ -58,28 +59,15 @@ translation_of: Web/API/PerformanceNavigationTiming/type
     console.log("redirectCount = " + p.redirectCount);
   }
 }
-</pre>
-
-<h2 id="Specifications">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('Navigation Timing Level 2', '#dom-performancenavigationtiming-type',
-        'type')}}</td>
-      <td>{{Spec2('Navigation Timing Level 2')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.PerformanceNavigationTiming.type")}}</p>
+```
+
+## Spécifications
+
+| Spécification                                                                                                                        | Statut                                               | Commentaire          |
+| ------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------- | -------------------- |
+| {{SpecName('Navigation Timing Level 2', '#dom-performancenavigationtiming-type',
+        'type')}} | {{Spec2('Navigation Timing Level 2')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.PerformanceNavigationTiming.type")}}
diff --git a/files/fr/web/api/performancenavigationtiming/unloadeventend/index.md b/files/fr/web/api/performancenavigationtiming/unloadeventend/index.md
index c1625c81d2..63dec4a932 100644
--- a/files/fr/web/api/performancenavigationtiming/unloadeventend/index.md
+++ b/files/fr/web/api/performancenavigationtiming/unloadeventend/index.md
@@ -10,27 +10,30 @@ tags:
   - Performance Web
 translation_of: Web/API/PerformanceNavigationTiming/unloadEventEnd
 ---
-<div>{{APIRef("Navigation Timing")}}{{SeeCompatTable}}</div>
+{{APIRef("Navigation Timing")}}{{SeeCompatTable}}
 
-<p>La propriété <strong><code>unloadEventEnd</code></strong> en lecture seule retourne un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> représentant la valeur temporelle égale au temps immédiatement après la fin de l'événement de déchargement du document précédent par l'agent utilisateur. S'il n'y a pas de document précédent, la valeur de cette propriété est <code>0</code>.</p>
+La propriété **`unloadEventEnd`** en lecture seule retourne un [`timestamp`](/fr/docs/Web/API/DOMHighResTimeStamp) représentant la valeur temporelle égale au temps immédiatement après la fin de l'événement de déchargement du document précédent par l'agent utilisateur. S'il n'y a pas de document précédent, la valeur de cette propriété est `0`.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:js"><var>perfEntry</var>.unloadEventEnd;</pre>
+```js
+perfEntry.unloadEventEnd;
+```
 
-<h3 id="Return_Value">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> représentant une valeur temporelle égale au temps immédiatement après que l'agent utilisateur ait terminé l'événement de déchargement du document précédent.</p>
+Un [`timestamp`](/fr/docs/Web/API/DOMHighResTimeStamp) représentant une valeur temporelle égale au temps immédiatement après que l'agent utilisateur ait terminé l'événement de déchargement du document précédent.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<p>L'exemple suivant illustre l'utilisation de cette propriété.</p>
+L'exemple suivant illustre l'utilisation de cette propriété.
 
-<pre class="brush:js">function print_nav_timing_data() {
+```js
+function print_nav_timing_data() {
   // Utilise getEntriesByType() pour obtenir uniquement les événements de type "navigation".
   let perfEntries = performance.getEntriesByType("navigation");
 
-  for (let i = 0; i &lt; perfEntries.length; i++) {
+  for (let i = 0; i < perfEntries.length; i++) {
     console.log("= Entrée de navigation : entry[" + i + "]");
     let p = perfEntries[i];
     // propriétés du DOM
@@ -47,28 +50,15 @@ translation_of: Web/API/PerformanceNavigationTiming/unloadEventEnd
     console.log("redirectCount = " + p.redirectCount);
   }
 }
-</pre>
+```
 
-<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('Navigation Timing Level 2',
-        '#dom-performancenavigationtiming-unloadeventend', 'unloadEventEnd')}}</td>
-      <td>{{Spec2('Navigation Timing Level 2')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                                                                                | Statut                                               | Commentaire          |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------- | -------------------- |
+| {{SpecName('Navigation Timing Level 2',
+        '#dom-performancenavigationtiming-unloadeventend', 'unloadEventEnd')}} | {{Spec2('Navigation Timing Level 2')}} | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.PerformanceNavigationTiming.unloadEventEnd")}}</p>
+{{Compat("api.PerformanceNavigationTiming.unloadEventEnd")}}
diff --git a/files/fr/web/api/performancenavigationtiming/unloadeventstart/index.md b/files/fr/web/api/performancenavigationtiming/unloadeventstart/index.md
index f4b7ceabba..08845f6f5c 100644
--- a/files/fr/web/api/performancenavigationtiming/unloadeventstart/index.md
+++ b/files/fr/web/api/performancenavigationtiming/unloadeventstart/index.md
@@ -10,27 +10,30 @@ tags:
   - Performance Web
 translation_of: Web/API/PerformanceNavigationTiming/unloadEventStart
 ---
-<div>{{APIRef("Navigation Timing")}}{{SeeCompatTable}}</div>
+{{APIRef("Navigation Timing")}}{{SeeCompatTable}}
 
-<p>La propriété en lecture seule <strong><code>unloadEventStart</code></strong> renvoie un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> représentant la valeur temporelle égale au temps immédiatement avant que l'agent utilisateur ne commence l'événement de déchargement du document précédent. S'il n'y a pas de document précédent, cette propriété renvoie <code>0</code>.</p>
+La propriété en lecture seule **`unloadEventStart`** renvoie un [`timestamp`](/fr/docs/Web/API/DOMHighResTimeStamp) représentant la valeur temporelle égale au temps immédiatement avant que l'agent utilisateur ne commence l'événement de déchargement du document précédent. S'il n'y a pas de document précédent, cette propriété renvoie `0`.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:js"><var>perfEntry</var>.unloadEventStart;</pre>
+```js
+perfEntry.unloadEventStart;
+```
 
-<h3 id="Return_Value">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> représentant la valeur temporelle égale au temps immédiatement avant que l'agent utilisateur ne lance l'événement de déchargement du document précédent.</p>
+Un [`timestamp`](/fr/docs/Web/API/DOMHighResTimeStamp) représentant la valeur temporelle égale au temps immédiatement avant que l'agent utilisateur ne lance l'événement de déchargement du document précédent.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<p>L'exemple suivant illustre l'utilisation de cette propriété.</p>
+L'exemple suivant illustre l'utilisation de cette propriété.
 
-<pre class="brush:js">function print_nav_timing_data() {
+```js
+function print_nav_timing_data() {
   // Utilise getEntriesByType() pour obtenir uniquement les événements de type "navigation".
   let perfEntries = performance.getEntriesByType("navigation");
 
-  for (let i = 0; i &lt; perfEntries.length; i++) {
+  for (let i = 0; i < perfEntries.length; i++) {
     console.log("= Entrée de navigation : entry[" + i + "]");
     let p = perfEntries[i];
     // propriétés du DOM
@@ -47,28 +50,15 @@ translation_of: Web/API/PerformanceNavigationTiming/unloadEventStart
     console.log("redirectCount = " + p.redirectCount);
   }
 }
-</pre>
+```
 
-<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('Navigation Timing Level 2',
-        '#dom-performancenavigationtiming-unloadeventstart', 'unloadEventStart')}}</td>
-      <td>{{Spec2('Navigation Timing Level 2')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                                                                                        | Statut                                               | Commentaire          |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- | -------------------- |
+| {{SpecName('Navigation Timing Level 2',
+        '#dom-performancenavigationtiming-unloadeventstart', 'unloadEventStart')}} | {{Spec2('Navigation Timing Level 2')}} | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.PerformanceNavigationTiming.unloadEventStart")}}</p>
+{{Compat("api.PerformanceNavigationTiming.unloadEventStart")}}
diff --git a/files/fr/web/api/performanceobserver/disconnect/index.md b/files/fr/web/api/performanceobserver/disconnect/index.md
index d4e509708b..8a0960e400 100644
--- a/files/fr/web/api/performanceobserver/disconnect/index.md
+++ b/files/fr/web/api/performanceobserver/disconnect/index.md
@@ -13,19 +13,22 @@ tags:
   - observers
 translation_of: Web/API/PerformanceObserver/disconnect
 ---
-<div>{{APIRef("Performance Timeline API")}}</div>
+{{APIRef("Performance Timeline API")}}
 
-<p>La méthode <strong><code>disconnect()</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> est utilisée pour empêcher l'observateur de performances de recevoir tout événement <a href="/fr/docs/Web/API/PerformanceEntry">d'entrée de performance</a>.</p>
+La méthode **`disconnect()`** de l'interface [`PerformanceObserver`](/fr/docs/Web/API/PerformanceObserver) est utilisée pour empêcher l'observateur de performances de recevoir tout événement [d'entrée de performance](/fr/docs/Web/API/PerformanceEntry).
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js"><var>performanceObserver</var>.disconnect();</pre>
+```js
+performanceObserver.disconnect();
+```
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">const observer = new PerformanceObserver(function(list, obj) {
+```js
+const observer = new PerformanceObserver(function(list, obj) {
   let entries = list.getEntries();
-  for (let i=0; i &lt; entries.length; i++) {
+  for (let i=0; i < entries.length; i++) {
     // Traiter les événements "mark" et "frame"
   }
 });
@@ -39,28 +42,15 @@ function perf_observer(list, observer) {
 }
 const observer2 = new PerformanceObserver(perf_observer);
 observer2.observe({entryTypes: ["measure"]});
-</pre>
+```
 
-<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('Performance Timeline Level 2',
-        '#dom-performanceobserver-disconnect', 'disconnect()')}}</td>
-      <td>{{Spec2('Performance Timeline Level 2')}}</td>
-      <td>Définition initiale de la méthode <code>disconnect()</code>.</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                                                                    | Statut                                                   | Commentaire                                       |
+| ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------- | ------------------------------------------------- |
+| {{SpecName('Performance Timeline Level 2',
+        '#dom-performanceobserver-disconnect', 'disconnect()')}} | {{Spec2('Performance Timeline Level 2')}} | Définition initiale de la méthode `disconnect()`. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.PerformanceObserver.disconnect")}}</p>
+{{Compat("api.PerformanceObserver.disconnect")}}
diff --git a/files/fr/web/api/performanceobserver/index.md b/files/fr/web/api/performanceobserver/index.md
index 27831bb210..d288321d4c 100644
--- a/files/fr/web/api/performanceobserver/index.md
+++ b/files/fr/web/api/performanceobserver/index.md
@@ -11,65 +11,48 @@ tags:
   - observers
 translation_of: Web/API/PerformanceObserver
 ---
-<div>{{APIRef("Performance Timeline API")}}</div>
+{{APIRef("Performance Timeline API")}}
 
-<p>L'interface <strong><code>PerformanceObserver</code></strong> est utilisée pour <em>observer</em> les événements de mesure des performances et être notifié des nouvelles <a href="/fr/docs/Web/API/PerformanceEntry">entréés de performance</a> lorsqu'elles sont enregistrées dans la <em>chronologie des performances</em> du navigateur.</p>
+L'interface **`PerformanceObserver`** est utilisée pour _observer_ les événements de mesure des performances et être notifié des nouvelles [entréés de performance](/fr/docs/Web/API/PerformanceEntry) lorsqu'elles sont enregistrées dans la _chronologie des performances_ du navigateur.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Constructor">Constructeur</h2>
+## Constructeur
 
-<dl>
-  <dt><a href="/fr/docs/Web/API/PerformanceObserver/PerformanceObserver"><code>PerformanceObserver()</code></a></dt>
-  <dd>Crée et retourne un nouvel objet <code>PerformanceObserver</code>.</dd>
-</dl>
+- [`PerformanceObserver()`](/fr/docs/Web/API/PerformanceObserver/PerformanceObserver)
+  - : Crée et retourne un nouvel objet `PerformanceObserver`.
 
-<h2 id="Methods">Méthodes</h2>
+## Méthodes
 
-<dl>
-  <dt><a href="/fr/docs/Web/API/PerformanceObserver/observe"><code>PerformanceObserver.observe()</code></a></dt>
-  <dd>Spécifie l'ensemble des <a href="/fr/docs/Web/API/PerformanceEntry/entryType">types d'entrées</a> à observer. La fonction de rappel de l'observateur de performances sera invoquée lorsqu'une <a href="/fr/docs/Web/API/PerformanceEntry">entrée de performance</a> est enregistrée pour l'un des <code>entryTypes</code> spécifiés.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceObserver/disconnect"><code>PerformanceObserver.disconnect()</code></a></dt>
-  <dd>Arrête l'observation des <a href="/fr/docs/Web/API/PerformanceEntry">entrées de performances</a>.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceObserver/takeRecords"><code>PerformanceObserver.takeRecords()</code></a> {{Experimental_Inline}}</dt>
-  <dd>Renvoie la liste actuelle des <a href="/fr/docs/Web/API/PerformanceEntry">entrées de performances</a> stockées dans l'observateur de performance, en la vidant.</dd>
-</dl>
+- [`PerformanceObserver.observe()`](/fr/docs/Web/API/PerformanceObserver/observe)
+  - : Spécifie l'ensemble des [types d'entrées](/fr/docs/Web/API/PerformanceEntry/entryType) à observer. La fonction de rappel de l'observateur de performances sera invoquée lorsqu'une [entrée de performance](/fr/docs/Web/API/PerformanceEntry) est enregistrée pour l'un des `entryTypes` spécifiés.
+- [`PerformanceObserver.disconnect()`](/fr/docs/Web/API/PerformanceObserver/disconnect)
+  - : Arrête l'observation des [entrées de performances](/fr/docs/Web/API/PerformanceEntry).
+- [`PerformanceObserver.takeRecords()`](/fr/docs/Web/API/PerformanceObserver/takeRecords) {{Experimental_Inline}}
+  - : Renvoie la liste actuelle des [entrées de performances](/fr/docs/Web/API/PerformanceEntry) stockées dans l'observateur de performance, en la vidant.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush:js">function perf_observer(list, observer) {
+```js
+function perf_observer(list, observer) {
   // Traiter l'événement "measure".
 }
 const observer2 = new PerformanceObserver(perf_observer);
-observer2.observe({entryTypes: ["measure"]});</pre>
+observer2.observe({entryTypes: ["measure"]});
+```
 
-<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('Performance Timeline Level 2', '#dom-performanceobserver', 'PerformanceObserver')}}</td>
-      <td>{{Spec2('Performance Timeline Level 2')}}</td>
-      <td>Définition initiale de l'interface <code>PerformanceObserver</code>.</td>
-    </tr>
-   </tbody>
-</table>
+| Spécification                                                                                                                    | Statut                                                   | Commentaire                                               |
+| -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------- | --------------------------------------------------------- |
+| {{SpecName('Performance Timeline Level 2', '#dom-performanceobserver', 'PerformanceObserver')}} | {{Spec2('Performance Timeline Level 2')}} | Définition initiale de l'interface `PerformanceObserver`. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.PerformanceObserver")}}</p>
+{{Compat("api.PerformanceObserver")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/API/MutationObserver"><code>MutationObserver</code></a></li>
- <li><a href="/fr/docs/Web/API/ResizeObserver"><code>ResizeObserver</code></a></li>
- <li><a href="/fr/docs/Web/API/IntersectionObserver"><code>IntersectionObserver</code></a></li>
-</ul>
+- [`MutationObserver`](/fr/docs/Web/API/MutationObserver)
+- [`ResizeObserver`](/fr/docs/Web/API/ResizeObserver)
+- [`IntersectionObserver`](/fr/docs/Web/API/IntersectionObserver)
diff --git a/files/fr/web/api/performanceobserver/observe/index.md b/files/fr/web/api/performanceobserver/observe/index.md
index b8fdf46703..e9409e8477 100644
--- a/files/fr/web/api/performanceobserver/observe/index.md
+++ b/files/fr/web/api/performanceobserver/observe/index.md
@@ -11,39 +11,38 @@ tags:
   - Performance Web
 translation_of: Web/API/PerformanceObserver/observe
 ---
-<div>{{APIRef("Performance Timeline API")}}</div>
+{{APIRef("Performance Timeline API")}}
 
-<p>La méthode <strong><code>observe()</code></strong> de l'interface <strong><a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a></strong> est utilisée pour spécifier l'ensemble des types d'entrée de performance à observer. Les types d'entrée de performance sont spécifiés sous la forme d'un tableau d'objets <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a>, chacun nommant un type d'entrée ; les noms de type sont documentés sur la page <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>PerformanceEntry.entryType</code></a>.</p>
+La méthode **`observe()`** de l'interface **[`PerformanceObserver`](/fr/docs/Web/API/PerformanceObserver)** est utilisée pour spécifier l'ensemble des types d'entrée de performance à observer. Les types d'entrée de performance sont spécifiés sous la forme d'un tableau d'objets [`DOMString`](/fr/docs/Web/API/DOMString), chacun nommant un type d'entrée ; les noms de type sont documentés sur la page [`PerformanceEntry.entryType`](/fr/docs/Web/API/PerformanceEntry/entryType).
 
-<p>Lorsqu'une entrée de performance correspondante est enregistrée, la fonction de rappel de l'observateur de performance — définie lors de la création du <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> — est invoquée.</p>
+Lorsqu'une entrée de performance correspondante est enregistrée, la fonction de rappel de l'observateur de performance — définie lors de la création du [`PerformanceObserver`](/fr/docs/Web/API/PerformanceObserver) — est invoquée.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:js"><var>observer</var>.observe(<var>options</var>);</pre>
+```js
+observer.observe(options);
+```
 
-<h3 id="Parameters">Paramètres</h3>
+### Paramètres
 
-<dl>
-  <dt><code>options</code></dt>
-  <dd>Un dictionnaire <code>PerformanceObserverInit</code> avec les membres possibles suivants :
-    <ul>
-      <li><code>entryTypes</code> : Un tableau d'objets <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a>, chacun spécifiant un type d'entrée de performance à observer. Ne peut pas être utilisé avec les options « <code>type</code> » ou « <code>buffered</code> ».</li>
-      <li><code>type</code> : Une <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> unique spécifiant exactement un type d'entrée de performance à observer. Ne peut pas être utilisé avec l'option <code>entryTypes</code>.</li>
-      <li><code>buffered</code> : Un indicateur booléen pour indiquer si les entrées en mémoire tampon doivent être mises en file d'attente dans la mémoire tampon de l'observateur. Ne doit être utilisé qu'avec l'option « <code>type</code> ».</li>
-    </ul>
-    <div class="note">
-      <p><strong>Note :</strong>Voir <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>PerformanceEntry.entryType</code></a> pour une liste des noms de types d'entrées de performance valides. Les types non reconnus sont ignorés, bien que le navigateur puisse afficher un message d'avertissement sur la console pour aider les développeurs à déboguer leur code. Si aucun type valide n'est trouvé, <code>observe()</code> n'a aucun effet.</p>
-    </div>
-  </dd>
-</dl>
+- `options`
 
-<h2 id="Example">Exemple</h2>
+  - : Un dictionnaire `PerformanceObserverInit` avec les membres possibles suivants :
 
-<p>Cet exemple crée et configure deux <code>PerformanceObservers</code> ; l'un surveille les événements <code>"mark"</code> et <code>"frame"</code>, et l'autre surveille les événements <code>"measure"</code>.</p>
+    - `entryTypes` : Un tableau d'objets [`DOMString`](/fr/docs/Web/API/DOMString), chacun spécifiant un type d'entrée de performance à observer. Ne peut pas être utilisé avec les options « `type` » ou « `buffered` ».
+    - `type` : Une [`DOMString`](/fr/docs/Web/API/DOMString) unique spécifiant exactement un type d'entrée de performance à observer. Ne peut pas être utilisé avec l'option `entryTypes`.
+    - `buffered` : Un indicateur booléen pour indiquer si les entrées en mémoire tampon doivent être mises en file d'attente dans la mémoire tampon de l'observateur. Ne doit être utilisé qu'avec l'option « `type` ».
 
-<pre class="brush: js">const observer = new PerformanceObserver(function(list, obj) {
+    > **Note :**Voir [`PerformanceEntry.entryType`](/fr/docs/Web/API/PerformanceEntry/entryType) pour une liste des noms de types d'entrées de performance valides. Les types non reconnus sont ignorés, bien que le navigateur puisse afficher un message d'avertissement sur la console pour aider les développeurs à déboguer leur code. Si aucun type valide n'est trouvé, `observe()` n'a aucun effet.
+
+## Exemple
+
+Cet exemple crée et configure deux `PerformanceObservers` ; l'un surveille les événements `"mark"` et `"frame"`, et l'autre surveille les événements `"measure"`.
+
+```js
+const observer = new PerformanceObserver(function(list, obj) {
   let entries = list.getEntries();
-  for (let i = 0; i &lt; entries.length; i++) {
+  for (let i = 0; i < entries.length; i++) {
     // Traiter les événements "mark" et "famse"
   }
 });
@@ -54,28 +53,15 @@ function perf_observer(list, observer) {
 }
 const observer2 = new PerformanceObserver(perf_observer);
 observer2.observe({entryTypes: ["measure"]});
-</pre>
-
-<h2 id="Specifications">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('Performance Timeline Level 2', '#dom-performanceobserver-observe',
-        'observe()')}}</td>
-      <td>{{Spec2('Performance Timeline Level 2')}}</td>
-      <td>Définition initiale de la méthode <code>observe()</code>.</td>
-    </tr>
-  </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.PerformanceObserver.observe")}}</p>
+```
+
+## Spécifications
+
+| Spécification                                                                                                                            | Statut                                                   | Commentaire                                    |
+| ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------- | ---------------------------------------------- |
+| {{SpecName('Performance Timeline Level 2', '#dom-performanceobserver-observe',
+        'observe()')}} | {{Spec2('Performance Timeline Level 2')}} | Définition initiale de la méthode `observe()`. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.PerformanceObserver.observe")}}
diff --git a/files/fr/web/api/performanceobserver/performanceobserver/index.md b/files/fr/web/api/performanceobserver/performanceobserver/index.md
index 41ffd9d82b..41b331adf8 100644
--- a/files/fr/web/api/performanceobserver/performanceobserver/index.md
+++ b/files/fr/web/api/performanceobserver/performanceobserver/index.md
@@ -10,30 +10,31 @@ tags:
   - Performance Web
 translation_of: Web/API/PerformanceObserver/PerformanceObserver
 ---
-<div>{{APIRef("Performance Timeline API")}}</div>
+{{APIRef("Performance Timeline API")}}
 
-<p>Le constructeur <strong><code>PerformanceObserver()</code></strong> crée un nouvel objet <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> avec le <code>callback</code> d'observation donné. La fonction de rappel de l'observateur est invoquée lorsque des <a href="/fr/docs/Web/API/PerformanceEntry">événements d'entrée de performance</a> sont répertoriés pour les <a href="/fr/docs/Web/API/PerformanceEntry/entryType">types d'entrées</a> qui ont été enregistrés, via la méthode <a href="/fr/docs/Web/API/PerformanceObserver/observe"><code>observe()</code></a>.</p>
+Le constructeur **`PerformanceObserver()`** crée un nouvel objet [`PerformanceObserver`](/fr/docs/Web/API/PerformanceObserver) avec le `callback` d'observation donné. La fonction de rappel de l'observateur est invoquée lorsque des [événements d'entrée de performance](/fr/docs/Web/API/PerformanceEntry) sont répertoriés pour les [types d'entrées](/fr/docs/Web/API/PerformanceEntry/entryType) qui ont été enregistrés, via la méthode [`observe()`](/fr/docs/Web/API/PerformanceObserver/observe).
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush:js">const <var>observer</var> = new PerformanceObserver(<var>callback</var>);</pre>
+```js
+const observer = new PerformanceObserver(callback);
+```
 
-<h3 id="Parameters">Paramètres</h3>
+### Paramètres
 
-<dl>
-  <dt><code>callback</code></dt>
-  <dd>Une fonction de rappel qui sera invoquée lorsque des événements de performance <em>observés</em> sont enregistrés. Lorsque la fonction de rappel est invoquée, son premier paramètre est une <a href="/fr/docs/Web/API/PerformanceObserverEntryList">liste des entrées de l'observateur de performance</a> et le second paramètre est l'objet <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> courant.</dd>
-</dl>
+- `callback`
+  - : Une fonction de rappel qui sera invoquée lorsque des événements de performance _observés_ sont enregistrés. Lorsque la fonction de rappel est invoquée, son premier paramètre est une [liste des entrées de l'observateur de performance](/fr/docs/Web/API/PerformanceObserverEntryList) et le second paramètre est l'objet [`PerformanceObserver`](/fr/docs/Web/API/PerformanceObserver) courant.
 
-<h3 id="Return_value">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Un nouvel objet <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> qui appellera le <code>callback</code> spécifiée lorsque des événements de performance observés se produisent.</p>
+Un nouvel objet [`PerformanceObserver`](/fr/docs/Web/API/PerformanceObserver) qui appellera le `callback` spécifiée lorsque des événements de performance observés se produisent.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">const observer = new PerformanceObserver(function(list, obj) {
+```js
+const observer = new PerformanceObserver(function(list, obj) {
   let entries = list.getEntries();
-  for (let i = 0; i &lt; entries.length; i++) {
+  for (let i = 0; i < entries.length; i++) {
     // Traiter les événements "mark" et "frame"
   }
 });
@@ -44,28 +45,15 @@ function perf_observer(list, observer) {
 }
 const observer2 = new PerformanceObserver(perf_observer);
 observer2.observe({entryTypes: ["measure"]});
-</pre>
+```
 
-<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('Performance Timeline Level 2',
-        '#idl-def-performanceobservercallback', 'PerformanceObserver()')}}</td>
-      <td>{{Spec2('Performance Timeline Level 2')}}</td>
-      <td>Définition initiale du constructeur <code>PerformanceObserver()</code>.</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                                                                                | Statut                                                   | Commentaire                                                  |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------- | ------------------------------------------------------------ |
+| {{SpecName('Performance Timeline Level 2',
+        '#idl-def-performanceobservercallback', 'PerformanceObserver()')}} | {{Spec2('Performance Timeline Level 2')}} | Définition initiale du constructeur `PerformanceObserver()`. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.PerformanceObserver.PerformanceObserver")}}</p>
+{{Compat("api.PerformanceObserver.PerformanceObserver")}}
diff --git a/files/fr/web/api/performanceobserver/takerecords/index.md b/files/fr/web/api/performanceobserver/takerecords/index.md
index 3d7dba65c9..76437f10e7 100644
--- a/files/fr/web/api/performanceobserver/takerecords/index.md
+++ b/files/fr/web/api/performanceobserver/takerecords/index.md
@@ -2,37 +2,40 @@
 title: PerformanceObserver.takeRecords()
 slug: Web/API/PerformanceObserver/takeRecords
 tags:
-- API
-- Method
-- Méthode
-- Performance Observer API
-- PerformanceObserver
-- Reference
-- observers
-- takeRecords()
+  - API
+  - Method
+  - Méthode
+  - Performance Observer API
+  - PerformanceObserver
+  - Reference
+  - observers
+  - takeRecords()
 translation_of: Web/API/PerformanceObserver/disconnect
 ---
-<div>{{APIRef("Performance Timeline API")}}</div>
+{{APIRef("Performance Timeline API")}}
 
-<p>La méthode <strong><code>takeRecords()</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code> renvoie la liste actuelle des <a href="/fr/docs/Web/API/PerformanceEntry">entrées de performance</a> stockées dans l'observateur de performance, en la vidant.</p>
+La méthode **`takeRecords()`** de l'interface [`PerformanceObserver` renvoie la liste actuelle des ](/fr/docs/Web/API/PerformanceObserver)[entrées de performance](/fr/docs/Web/API/PerformanceEntry) stockées dans l'observateur de performance, en la vidant.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">let <var>performanceEntryList<var> = <var>performanceObserver</var>.takeRecords();</pre>
+```js
+let performanceEntryList = performanceObserver.takeRecords();
+```
 
-<h3 id="Parameters">Paramètres</h3>
+### Paramètres
 
-<p>Aucun.</p>
+Aucun.
 
-<h3 id="Return_value">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Une liste d'objets <a href="/fr/docs/Web/API/PerformanceEntry"><code>PerformanceEntry</code></a>.</p>
+Une liste d'objets [`PerformanceEntry`](/fr/docs/Web/API/PerformanceEntry).
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">const observer = new PerformanceObserver(function(list, obj) {
+```js
+const observer = new PerformanceObserver(function(list, obj) {
   let entries = list.getEntries();
-  for (let i= 0; i &lt; entries.length; i++) {
+  for (let i= 0; i < entries.length; i++) {
     // Traiter les événements "mark" et "frame"
   }
 });
@@ -41,28 +44,15 @@ let records = observer.takeRecords();
 console.log(records[0].name);
 console.log(records[0].startTime);
 console.log(records[0].duration);
-</pre>
+```
 
-<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('Performance Timeline Level 2',
-        '#dom-performanceobserver-takerecords', 'takeRecords()')}}</td>
-      <td>{{Spec2('Performance Timeline Level 2')}}</td>
-      <td>Définition initiale de la méthode <code>takeRecords()</code>.</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                                                                    | Statut                                                   | Commentaire                                        |
+| ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------- | -------------------------------------------------- |
+| {{SpecName('Performance Timeline Level 2',
+        '#dom-performanceobserver-takerecords', 'takeRecords()')}} | {{Spec2('Performance Timeline Level 2')}} | Définition initiale de la méthode `takeRecords()`. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.PerformanceObserver.takeRecords")}}</p>
+{{Compat("api.PerformanceObserver.takeRecords")}}
diff --git a/files/fr/web/api/performanceobserverentrylist/getentries/index.md b/files/fr/web/api/performanceobserverentrylist/getentries/index.md
index 6e86d57d99..099c4e1090 100644
--- a/files/fr/web/api/performanceobserverentrylist/getentries/index.md
+++ b/files/fr/web/api/performanceobserverentrylist/getentries/index.md
@@ -10,44 +10,45 @@ tags:
   - Performance Web
 translation_of: Web/API/PerformanceObserverEntryList/getEntries
 ---
-<div>{{APIRef("Performance Timeline API")}}</div>
+{{APIRef("Performance Timeline API")}}
 
-<p>La méthode <strong><code>getEntries()</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceObserverEntryList"><code>PerformanceObserverEntryList</code></a> retourne une liste d'objets explicitement <em>observés</em> d'<a href="/fr/docs/Web/API/PerformanceEntry">entrées de performance</a> pour un filtre donné. Les membres de la liste sont déterminés par l'ensemble des <a href="/fr/docs/Web/API/PerformanceEntry/entryType">types d'entrée</a> spécifiés dans l'appel à la méthode <a href="/fr/docs/Web/API/PerformanceObserver/observe"><code>observe()</code></a>. La liste est disponible dans la fonction de rappel de l'observateur (en tant que premier paramètre de la fonction de rappel).</p>
+La méthode **`getEntries()`** de l'interface [`PerformanceObserverEntryList`](/fr/docs/Web/API/PerformanceObserverEntryList) retourne une liste d'objets explicitement _observés_ d'[entrées de performance](/fr/docs/Web/API/PerformanceEntry) pour un filtre donné. Les membres de la liste sont déterminés par l'ensemble des [types d'entrée](/fr/docs/Web/API/PerformanceEntry/entryType) spécifiés dans l'appel à la méthode [`observe()`](/fr/docs/Web/API/PerformanceObserver/observe). La liste est disponible dans la fonction de rappel de l'observateur (en tant que premier paramètre de la fonction de rappel).
 
-<div class="note">
-  <p><strong>Note :</strong> Cette interface est exposée à <a href="/fr/docs/Web/API/Window"><code>Window</code></a> et <a href="/fr/docs/Web/API/Worker"><code>Worker</code></a>.</p>
-</div>
+> **Note :** Cette interface est exposée à [`Window`](/fr/docs/Web/API/Window) et [`Worker`](/fr/docs/Web/API/Worker).
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">let <var>entries</var> = list.getEntries();
-<var>entries</var> = list.getEntries(<var>PerformanceEntryFilterOptions</var>);</pre>
+```js
+let entries = list.getEntries();
+entries = list.getEntries(PerformanceEntryFilterOptions);
+```
 
-<p>Utilisation spécifique :</p>
+Utilisation spécifique :
 
-<pre class="brush: js"><var>entries</var> = list.getEntries({name: "entry_name", entryType: "mark"});</pre>
+```js
+entries = list.getEntries({name: "entry_name", entryType: "mark"});
+```
 
-<h3 id="Parameters">Paramètres</h3>
+### Paramètres
+
+- `PerformanceEntryFilterOptions` {{optional_inline}}
+
+  - : Est un dictionnaire `PerformanceEntryFilterOptions`, comportant les champs suivants :
+
+    - `"name"`, le nom d'une entrée de performance.
+    - `"entryType"`, le type d'entrée. Les types d'entrée valides sont énumérés dans la propriété [`PerformanceEntry.entryType`](/fr/docs/Web/API/PerformanceEntry/entryType).
+    - `"initiatorType"`, le type de la ressource initiatrice (par exemple un élément HTML). Les valeurs sont définies par la propriété [`PerformanceResourceTiming.initiatorType`](/fr/docs/Web/API/PerformanceResourceTiming/initiatorType).
 
-<dl>
-  <dt><code><em>PerformanceEntryFilterOptions</em></code> {{optional_inline}}</dt>
-  <dd>Est un dictionnaire <code>PerformanceEntryFilterOptions</code>, comportant les champs suivants :
-    <ul>
-      <li><code>"name"</code>, le nom d'une entrée de performance.</li>
-      <li><code>"entryType"</code>, le type d'entrée. Les types d'entrée valides sont énumérés dans la propriété <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>PerformanceEntry.entryType</code></a>.</li>
-      <li><code>"initiatorType"</code>, le type de la ressource initiatrice (par exemple un élément HTML). Les valeurs sont définies par la propriété <a href="/fr/docs/Web/API/PerformanceResourceTiming/initiatorType"><code>PerformanceResourceTiming.initiatorType</code></a>.</li>
-    </ul>
     Ce paramètre n'est actuellement pas pris en charge par Chrome ou Opera.
-  </dd>
-</dl>
 
-<h3 id="Return_Value">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Une liste d'objets <a href="/fr/docs/Web/API/PerformanceEntry"><code>PerformanceEntry</code></a> explicitement <em>observés</em> qui répondent aux critères du filtre. Les éléments seront dans l'ordre chronologique basé sur les <a href="/fr/docs/Web/API/PerformanceEntry/startTime"><code>startTime</code></a> des entrées. Si aucun objet répondant au filtre n'est trouvé, une liste vide est renvoyée. Si aucun argument n'est fourni, toutes les entrées sont renvoyées.</p>
+Une liste d'objets [`PerformanceEntry`](/fr/docs/Web/API/PerformanceEntry) explicitement _observés_ qui répondent aux critères du filtre. Les éléments seront dans l'ordre chronologique basé sur les [`startTime`](/fr/docs/Web/API/PerformanceEntry/startTime) des entrées. Si aucun objet répondant au filtre n'est trouvé, une liste vide est renvoyée. Si aucun argument n'est fourni, toutes les entrées sont renvoyées.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">function print_perf_entry(pe) {
+```js
+function print_perf_entry(pe) {
   console.log("name: " + pe.name +
               "; entryType: " + pe.entryType +
               "; startTime: " + pe.startTime +
@@ -60,19 +61,19 @@ const observe_all = new PerformanceObserver(function(list, obs) {
 
   // Imprime toutes les entrées
   perfEntries = list.getEntries();
-  for (let i = 0; i &lt; perfEntries.length; i++) {
+  for (let i = 0; i < perfEntries.length; i++) {
     print_perf_entry(perfEntries[i]);
   }
 
   // Imprime les entrées nommées "Begin" avec le type "mark".
   perfEntries = list.getEntriesByName("Begin", "mark");
-  for (let i = 0; i &lt; perfEntries.length; i++) {
+  for (let i = 0; i < perfEntries.length; i++) {
     print_perf_entry(perfEntries[i]);
   }
 
   // Imprime les entrées de type "mark".
   perfEntries = list.getEntriesByType("mark");
-  for (let i = 0; i &lt; perfEntries.length; i++) {
+  for (let i = 0; i < perfEntries.length; i++) {
     print_perf_entry(perfEntries[i]);
   }
 });
@@ -82,34 +83,21 @@ observe_all.observe({entryTypes: ['frame', 'mark', 'measure', 'navigation', 'res
 const observe_frame = new PerformanceObserver(function(list, obs) {
   let perfEntries = list.getEntries();
   // Ne devrait avoir que des entrées "frame"
-  for (let i = 0; i &lt; perfEntries.length; i++) {
+  for (let i = 0; i < perfEntries.length; i++) {
     print_perf_entry(perfEntries[i]);
   }
 });
 // inscrire à l'événement "frame" uniquement
 observe_frame.observe({entryTypes: ['frame']});
-</pre>
-
-<h2 id="Specifications">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('Performance Timeline Level 2',
-        '#dom-performanceobserverentrylist-getentries', 'getEntries()')}}</td>
-      <td>{{Spec2('Performance Timeline Level 2')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.PerformanceObserverEntryList.getEntries")}}</p>
+```
+
+## Spécifications
+
+| Spécification                                                                                                                                                | Statut                                                   | Commentaire          |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------- | -------------------- |
+| {{SpecName('Performance Timeline Level 2',
+        '#dom-performanceobserverentrylist-getentries', 'getEntries()')}} | {{Spec2('Performance Timeline Level 2')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.PerformanceObserverEntryList.getEntries")}}
diff --git a/files/fr/web/api/performanceobserverentrylist/getentriesbyname/index.md b/files/fr/web/api/performanceobserverentrylist/getentriesbyname/index.md
index b92be9f1a5..c5bc6539fb 100644
--- a/files/fr/web/api/performanceobserverentrylist/getentriesbyname/index.md
+++ b/files/fr/web/api/performanceobserverentrylist/getentriesbyname/index.md
@@ -10,34 +10,33 @@ tags:
   - Performance Web
 translation_of: Web/API/PerformanceObserverEntryList/getEntriesByName
 ---
-<div>{{APIRef("Performance Timeline API")}}</div>
+{{APIRef("Performance Timeline API")}}
 
-<p>La méthode <strong><code>getEntriesByName()</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceObserverEntryList"><code>PerformanceObserverEntryList</code></a> retourne une liste d'objets <a href="/fr/docs/Web/API/PerformanceEntry">d'entrée de performance</a> explicitement <em>observés</em> pour un <em><a href="/fr/docs/Web/API/PerformanceEntry/name"><code>name</code></a></em> et <em><a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>entryType</code></a></em> donnés. Les membres de la liste sont déterminés par l'ensemble des <a href="/fr/docs/Web/API/PerformanceEntry/entryType">types d'entrées</a> spécifiés dans l'appel à la méthode <a href="/fr/docs/Web/API/PerformanceObserver/observe"><code>observe()</code></a>. La liste est disponible dans la fonction de rappel de l'observateur (en tant que premier paramètre de la fonction de rappel).</p>
+La méthode **`getEntriesByName()`** de l'interface [`PerformanceObserverEntryList`](/fr/docs/Web/API/PerformanceObserverEntryList) retourne une liste d'objets [d'entrée de performance](/fr/docs/Web/API/PerformanceEntry) explicitement _observés_ pour un _[`name`](/fr/docs/Web/API/PerformanceEntry/name)_ et _[`entryType`](/fr/docs/Web/API/PerformanceEntry/entryType)_ donnés. Les membres de la liste sont déterminés par l'ensemble des [types d'entrées](/fr/docs/Web/API/PerformanceEntry/entryType) spécifiés dans l'appel à la méthode [`observe()`](/fr/docs/Web/API/PerformanceObserver/observe). La liste est disponible dans la fonction de rappel de l'observateur (en tant que premier paramètre de la fonction de rappel).
 
-<div class="note">
-  <p><strong>Note :</strong> Cette interface est exposée à <a href="/fr/docs/Web/API/Window"><code>Window</code></a> et <a href="/fr/docs/Web/API/Worker"><code>Worker</code></a>.</p>
-</div>
+> **Note :** Cette interface est exposée à [`Window`](/fr/docs/Web/API/Window) et [`Worker`](/fr/docs/Web/API/Worker).
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">let <var>entries</var> = <var>list</var>.getEntriesByName(<var>name</var>, <var>type</var>);</pre>
+```js
+let entries = list.getEntriesByName(name, type);
+```
 
-<h3 id="Parameters">Paramètres</h3>
+### Paramètres
 
-<dl>
-  <dt><em><code>name</code></em></dt>
-  <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> représentant le nom de l'entrée à récupérer.</dd>
-  <dt><em><code>type</code></em> {{optional_inline}}</dt>
-  <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> représentant le type d'entrée à récupérer tel que « <code>mark</code> ». Les types d'entrée valides sont énumérés dans <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>PerformanceEntry.entryType</code></a>.</dd>
-</dl>
+- _`name`_
+  - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) représentant le nom de l'entrée à récupérer.
+- _`type`_ {{optional_inline}}
+  - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) représentant le type d'entrée à récupérer tel que « `mark` ». Les types d'entrée valides sont énumérés dans [`PerformanceEntry.entryType`](/fr/docs/Web/API/PerformanceEntry/entryType).
 
-<h3 id="Return_Value">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Une liste d'objets <a href="/fr/docs/Web/API/PerformanceEntry">d'entrée de performance</a> explicitement <em>observés</em> qui ont le <code>name</code> et le <code>type</code> spécifiés. Si l'argument <code>type</code> n'est pas spécifié, seul <code>name</code> sera utilisé pour déterminer les entrées à retourner. Les éléments seront triés dans l'ordre chronologique selon les <a href="/fr/docs/Web/API/PerformanceEntry/startTime"><code>startTime</code></a> des entrées. Si aucun objet ne répond aux critères spécifiés, une liste vide est retournée.</p>
+Une liste d'objets [d'entrée de performance](/fr/docs/Web/API/PerformanceEntry) explicitement _observés_ qui ont le `name` et le `type` spécifiés. Si l'argument `type` n'est pas spécifié, seul `name` sera utilisé pour déterminer les entrées à retourner. Les éléments seront triés dans l'ordre chronologique selon les [`startTime`](/fr/docs/Web/API/PerformanceEntry/startTime) des entrées. Si aucun objet ne répond aux critères spécifiés, une liste vide est retournée.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">function print_perf_entry(pe) {
+```js
+function print_perf_entry(pe) {
   console.log("name: " + pe.name +
               "; entryType: " + pe.entryType +
               "; startTime: " + pe.startTime +
@@ -50,19 +49,19 @@ const observe_all = new PerformanceObserver(function(list, obs) {
 
   // Imprime toutes les entrées
   perfEntries = list.getEntries();
-  for (let i = 0; i &lt; perfEntries.length; i++) {
+  for (let i = 0; i < perfEntries.length; i++) {
     print_perf_entry(perfEntries[i]);
   }
 
   // Imprime les entrées nommées "Begin" avec le type "mark".
   perfEntries = list.getEntriesByName("Begin", "mark");
-  for (let i = 0; i &lt; perfEntries.length; i++) {
+  for (let i = 0; i < perfEntries.length; i++) {
     print_perf_entry(perfEntries[i]);
   }
 
   // Imprime les entrées de type "mark".
   perfEntries = list.getEntriesByType("mark");
-  for (let i = 0; i &lt; perfEntries.length; i++) {
+  for (let i = 0; i < perfEntries.length; i++) {
     print_perf_entry(perfEntries[i]);
   }
 });
@@ -72,34 +71,21 @@ observe_all.observe({entryTypes: ['frame', 'mark', 'measure', 'navigation', 'res
 const observe_frame = new PerformanceObserver(function(list, obs) {
   let perfEntries = list.getEntries();
   // Ne devrait avoir que des entrées "frame"
-  for (let i = 0; i &lt; perfEntries.length; i++) {
+  for (let i = 0; i < perfEntries.length; i++) {
     print_perf_entry(perfEntries[i]);
   }
 });
 // inscrire à l'événement "frame" uniquement
 observe_frame.observe({entryTypes: ['frame']});
-</pre>
-
-<h2 id="Specifications">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('Performance Timeline Level 2',
-        '#dom-performanceobserverentrylist-getentriesbyname', 'getEntriesByName()')}}</td>
-      <td>{{Spec2('Performance Timeline Level 2')}}</td>
-      <td>Définition initiale de la méthode <code>getEntriesByName()</code>.</td>
-    </tr>
-  </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.PerformanceObserverEntryList.getEntriesByName")}}</p>
+```
+
+## Spécifications
+
+| Spécification                                                                                                                                                                | Statut                                                   | Commentaire                                             |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------- | ------------------------------------------------------- |
+| {{SpecName('Performance Timeline Level 2',
+        '#dom-performanceobserverentrylist-getentriesbyname', 'getEntriesByName()')}} | {{Spec2('Performance Timeline Level 2')}} | Définition initiale de la méthode `getEntriesByName()`. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.PerformanceObserverEntryList.getEntriesByName")}}
diff --git a/files/fr/web/api/performanceobserverentrylist/getentriesbytype/index.md b/files/fr/web/api/performanceobserverentrylist/getentriesbytype/index.md
index 8d692a3092..2289e174f0 100644
--- a/files/fr/web/api/performanceobserverentrylist/getentriesbytype/index.md
+++ b/files/fr/web/api/performanceobserverentrylist/getentriesbytype/index.md
@@ -10,32 +10,31 @@ tags:
   - Performance Web
 translation_of: Web/API/PerformanceObserverEntryList/getEntriesByType
 ---
-<div>{{APIRef("Performance Timeline API")}}</div>
+{{APIRef("Performance Timeline API")}}
 
-<p>La méthode <strong><code>getEntriesByType()</code></strong> de la <a href="/fr/docs/Web/API/PerformanceObserverEntryList"><code>PerformanceObserverEntryList</code></a> retourne une liste d'objets <a href="/fr/docs/Web/API/PerformanceEntry">d'entrée de performance</a> explicitement <em>observés</em> pour un <a href="/fr/docs/Web/API/PerformanceEntry/entryType">type d'entrée de performance</a>. Les membres de la liste sont déterminés par l'ensemble des <a href="/fr/docs/Web/API/PerformanceEntry/entryType">types d'entrées</a> spécifiés dans l'appel à la méthode <a href="/fr/docs/Web/API/PerformanceObserver/observe"><code>observe()</code></a>. La liste est disponible dans la fonction de rappel de l'observateur (en tant que premier paramètre de la fonction de rappel).</p>
+La méthode **`getEntriesByType()`** de la [`PerformanceObserverEntryList`](/fr/docs/Web/API/PerformanceObserverEntryList) retourne une liste d'objets [d'entrée de performance](/fr/docs/Web/API/PerformanceEntry) explicitement _observés_ pour un [type d'entrée de performance](/fr/docs/Web/API/PerformanceEntry/entryType). Les membres de la liste sont déterminés par l'ensemble des [types d'entrées](/fr/docs/Web/API/PerformanceEntry/entryType) spécifiés dans l'appel à la méthode [`observe()`](/fr/docs/Web/API/PerformanceObserver/observe). La liste est disponible dans la fonction de rappel de l'observateur (en tant que premier paramètre de la fonction de rappel).
 
-<div class="note">
-  <p><strong>Note :</strong> Cette interface est exposée à <a href="/fr/docs/Web/API/Window"><code>Window</code></a> et <a href="/fr/docs/Web/API/Worker"><code>Worker</code></a>.</p>
-</div>
+> **Note :** Cette interface est exposée à [`Window`](/fr/docs/Web/API/Window) et [`Worker`](/fr/docs/Web/API/Worker).
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">let <var>entries</var> = <var>list</var>.getEntriesByType(<var>type</var>);</pre>
+```js
+let entries = list.getEntriesByType(type);
+```
 
-<h3 id="Parameters">Paramètres</h3>
+### Paramètres
 
-<dl>
-  <dt><em><code>type</code></em></dt>
-  <dd>Le type d'entrée à récupérer, tel que « <code>frame</code> ». Les types d'entrée valides sont énumérés dans <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>PerformanceEntry.entryType</code></a>.</dd>
-</dl>
+- _`type`_
+  - : Le type d'entrée à récupérer, tel que « `frame` ». Les types d'entrée valides sont énumérés dans [`PerformanceEntry.entryType`](/fr/docs/Web/API/PerformanceEntry/entryType).
 
-<h3 id="Return_Value">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Une liste d'objets <a href="/fr/docs/Web/API/PerformanceEntry"><code>PerformanceEntry</code></a> explicitement <em>observés</em> qui ont le <code>type</code> spécifié. Les éléments seront dans l'ordre chronologique basé sur les <a href="/fr/docs/Web/API/PerformanceEntry/startTime"><code>startTime</code></a> des entrées. Si aucun objet n'a le <code>type</code> spécifié, ou si aucun argument n'est fourni, une liste vide est retournée.</p>
+Une liste d'objets [`PerformanceEntry`](/fr/docs/Web/API/PerformanceEntry) explicitement _observés_ qui ont le `type` spécifié. Les éléments seront dans l'ordre chronologique basé sur les [`startTime`](/fr/docs/Web/API/PerformanceEntry/startTime) des entrées. Si aucun objet n'a le `type` spécifié, ou si aucun argument n'est fourni, une liste vide est retournée.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">function print_perf_entry(pe) {
+```js
+function print_perf_entry(pe) {
   console.log("name: " + pe.name +
               "; entryType: " + pe.entryType +
               "; startTime: " + pe.startTime +
@@ -48,19 +47,19 @@ const observe_all = new PerformanceObserver(function(list, obs) {
 
   // Imprime toutes les entrées
   perfEntries = list.getEntries();
-  for (let i = 0; i &lt; perfEntries.length; i++) {
+  for (let i = 0; i < perfEntries.length; i++) {
     print_perf_entry(perfEntries[i]);
   }
 
   // Imprime les entrées nommées "Begin" avec le type "mark".
   perfEntries = list.getEntriesByName("Begin", "mark");
-  for (let i = 0; i &lt; perfEntries.length; i++) {
+  for (let i = 0; i < perfEntries.length; i++) {
     print_perf_entry(perfEntries[i]);
   }
 
   // Imprime les entrées de type "mark".
   perfEntries = list.getEntriesByType("mark");
-  for (let i = 0; i &lt; perfEntries.length; i++) {
+  for (let i = 0; i < perfEntries.length; i++) {
     print_perf_entry(perfEntries[i]);
   }
 });
@@ -70,33 +69,20 @@ observe_all.observe({entryTypes: ['frame', 'mark', 'measure', 'navigation', 'res
 const observe_frame = new PerformanceObserver(function(list, obs) {
   let perfEntries = list.getEntries();
   // Ne devrait avoir que des entrées "frame"
-  for (let i = 0; i &lt; perfEntries.length; i++) {
+  for (let i = 0; i < perfEntries.length; i++) {
     print_perf_entry(perfEntries[i]);
   }
 });
 // inscrire à l'événement "frame" uniquement
 observe_frame.observe({entryTypes: ['frame']});
-</pre>
-
-<h2 id="Specifications">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('Performance Timeline Level 2', '#dom-performanceobserverentrylist-getentriesbytype', 'getEntriesByType()')}}</td>
-      <td>{{Spec2('Performance Timeline Level 2')}}</td>
-      <td>Définition initiale de la méthode <code>getEntriesByType()</code>.</td>
-    </tr>
-  </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.PerformanceObserverEntryList.getEntriesByType")}}</p>
+```
+
+## Spécifications
+
+| Spécification                                                                                                                                                    | Statut                                                   | Commentaire                                             |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------- | ------------------------------------------------------- |
+| {{SpecName('Performance Timeline Level 2', '#dom-performanceobserverentrylist-getentriesbytype', 'getEntriesByType()')}} | {{Spec2('Performance Timeline Level 2')}} | Définition initiale de la méthode `getEntriesByType()`. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.PerformanceObserverEntryList.getEntriesByType")}}
diff --git a/files/fr/web/api/performanceobserverentrylist/index.md b/files/fr/web/api/performanceobserverentrylist/index.md
index 14cfeaea9e..e4e86a8128 100644
--- a/files/fr/web/api/performanceobserverentrylist/index.md
+++ b/files/fr/web/api/performanceobserverentrylist/index.md
@@ -8,56 +8,41 @@ tags:
   - Performance Web
 translation_of: Web/API/PerformanceObserverEntryList
 ---
-<div>{{APIRef("Performance Timeline API")}}</div>
+{{APIRef("Performance Timeline API")}}
 
-<p>L'interface <strong><code>PerformanceObserverEntryList</code></strong> est une liste d'<a href="/fr/docs/Web/API/PerformanceEntry">événements de performance</a> qui ont été explicitement <em>observés</em> via la méthode <a href="/fr/docs/Web/API/PerformanceObserver/observe"><code>observe()</code></a>.</p>
+L'interface **`PerformanceObserverEntryList`** est une liste d'[événements de performance](/fr/docs/Web/API/PerformanceEntry) qui ont été explicitement _observés_ via la méthode [`observe()`](/fr/docs/Web/API/PerformanceObserver/observe).
 
-<div class="note">
-  <p><strong>Note :</strong> Cette interface est exposée à <a href="/fr/docs/Web/API/Window"><code>Window</code></a> et <a href="/fr/docs/Web/API/Worker"><code>Worker</code></a>.</p>
-</div>
+> **Note :** Cette interface est exposée à [`Window`](/fr/docs/Web/API/Window) et [`Worker`](/fr/docs/Web/API/Worker).
 
-<h2 id="Methods">Méthodes</h2>
+## Méthodes
 
-<dl>
-  <dt><a href="/fr/docs/Web/API/PerformanceObserverEntryList/getEntries"><code>PerformanceObserverEntryList.getEntries()</code></a></dt>
-  <dd>Retourne une liste d'objets explicitement <em>observés</em> de <a href="/fr/docs/Web/API/PerformanceEntry"><code>PerformanceEntry</code></a> en fonction du <em>filtre</em> donné.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceObserverEntryList/getEntriesByType"><code>PerformanceObserverEntryList.getEntriesByType()</code></a></dt>
-  <dd>Retourne une liste d'objets explicitement <em>observés</em> de <a href="/fr/docs/Web/API/PerformanceEntry"><code>PerformanceEntry</code></a> du <em>type d'entrée</em> donné.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceObserverEntryList/getEntriesByName"><code>PerformanceObserverEntryList.getEntriesByName()</code></a></dt>
-  <dd>Retourne une liste d'objets explicitement <em>observés</em> de <a href="/fr/docs/Web/API/PerformanceEntry"><code>PerformanceEntry</code></a> en fonction du <em>nom</em> et du <em>type d'entrée</em> donnés.</dd>
-</dl>
+- [`PerformanceObserverEntryList.getEntries()`](/fr/docs/Web/API/PerformanceObserverEntryList/getEntries)
+  - : Retourne une liste d'objets explicitement _observés_ de [`PerformanceEntry`](/fr/docs/Web/API/PerformanceEntry) en fonction du _filtre_ donné.
+- [`PerformanceObserverEntryList.getEntriesByType()`](/fr/docs/Web/API/PerformanceObserverEntryList/getEntriesByType)
+  - : Retourne une liste d'objets explicitement _observés_ de [`PerformanceEntry`](/fr/docs/Web/API/PerformanceEntry) du _type d'entrée_ donné.
+- [`PerformanceObserverEntryList.getEntriesByName()`](/fr/docs/Web/API/PerformanceObserverEntryList/getEntriesByName)
+  - : Retourne une liste d'objets explicitement _observés_ de [`PerformanceEntry`](/fr/docs/Web/API/PerformanceEntry) en fonction du _nom_ et du _type d'entrée_ donnés.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">// Crée un observateur pour tous les types d'événements de performance
+```js
+// Crée un observateur pour tous les types d'événements de performance
 // la liste est de type PerformanceObserveEntryList
 const observe_all = new PerformanceObserver(function(list, obs) {
   let perfEntries = list.getEntries();
-  for (let i = 0; i &lt; perfEntries.length; i++) {
+  for (let i = 0; i < perfEntries.length; i++) {
     print_perf_entry(perfEntries[i]);
     // faire quelque chose avec
   }
-})</pre>
-
-<h2 id="Specifications">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('Performance Timeline Level 2', '#idl-def-performanceobserverentrylist', 'PerformanceObserverEntryList')}}</td>
-      <td>{{Spec2('Performance Timeline Level 2')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.PerformanceObserverEntryList")}}</p>
+})
+```
+
+## Spécifications
+
+| Spécification                                                                                                                                                | Statut                                                   | Commentaire          |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------- | -------------------- |
+| {{SpecName('Performance Timeline Level 2', '#idl-def-performanceobserverentrylist', 'PerformanceObserverEntryList')}} | {{Spec2('Performance Timeline Level 2')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.PerformanceObserverEntryList")}}
diff --git a/files/fr/web/api/performancepainttiming/index.md b/files/fr/web/api/performancepainttiming/index.md
index 01214c61c1..77499d1570 100644
--- a/files/fr/web/api/performancepainttiming/index.md
+++ b/files/fr/web/api/performancepainttiming/index.md
@@ -11,71 +11,58 @@ tags:
   - Performance Web
 translation_of: Web/API/PerformancePaintTiming
 ---
-<p>{{APIRef("Performance Timeline API")}}</p>
+{{APIRef("Performance Timeline API")}}
 
-<p>L'interface <strong><code>PerformancePaintTiming</code></strong> de l'API <a href="/fr/docs/Web/API/Paint_Timing_API">Paint Timing API</a> fournit des informations de temps sur les opérations de « peinture » (également appelées « render ») pendant la construction de la page Web. « Paint » fait référence à la conversion de l'arbre de rendu en pixels à l'écran.</p>
+L'interface **`PerformancePaintTiming`** de l'API [Paint Timing API](/fr/docs/Web/API/Paint_Timing_API) fournit des informations de temps sur les opérations de « peinture » (également appelées « render ») pendant la construction de la page Web. « Paint » fait référence à la conversion de l'arbre de rendu en pixels à l'écran.
 
-<p>Une application peut enregistrer un <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> pour le <a href="/fr/docs/Web/API/PerformanceEntry">type d'entrée de performance</a> « <code>paint</code> » et l'observateur peut récupérer les heures auxquelles les événements de peinture se produisent. Utilisez ces informations pour aider à identifier les zones qui prennent trop de temps pour offrir une bonne expérience utilisateur.</p>
+Une application peut enregistrer un [`PerformanceObserver`](/fr/docs/Web/API/PerformanceObserver) pour le [type d'entrée de performance](/fr/docs/Web/API/PerformanceEntry) « `paint` » et l'observateur peut récupérer les heures auxquelles les événements de peinture se produisent. Utilisez ces informations pour aider à identifier les zones qui prennent trop de temps pour offrir une bonne expérience utilisateur.
 
-<p>{{InheritanceDiagram}}</p>
+{{InheritanceDiagram}}
 
-<h2 id="Properties">Propriétés</h2>
+## Propriétés
 
-<p>Cette interface n'a pas de propriétés mais elle étend les propriétés de <a href="/fr/docs/Web/API/PerformanceEntry"><code>PerformanceEntry</code></a> suivantes (pour <a href="/fr/docs/Web/API/PerformanceEntry/entryType">le type d'entrée de performance</a> « <code>paint</code> ») en qualifiant/contraignant les propriétés comme suit :</p>
+Cette interface n'a pas de propriétés mais elle étend les propriétés de [`PerformanceEntry`](/fr/docs/Web/API/PerformanceEntry) suivantes (pour [le type d'entrée de performance](/fr/docs/Web/API/PerformanceEntry/entryType) « `paint` ») en qualifiant/contraignant les propriétés comme suit :
 
-<dl>
-  <dt><a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>PerformanceEntry.entryType</code></a></dt>
-  <dd>Retourne « <code>paint</code> ».</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceEntry/name"><code>PerformanceEntry.name</code></a></dt>
-  <dd>Retourne soit <code>"first-paint"</code> ou <code>"first-contentful-paint"</code>.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceEntry/startTime"><code>PerformanceEntry.startTime</code></a></dt>
-  <dd>Retourne le <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> du moment où la peinture s'est produite.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceEntry/duration"><code>PerformanceEntry.duration</code></a></dt>
-  <dd>Retourne « <code>0</code> ».</dd>
-</dl>
+- [`PerformanceEntry.entryType`](/fr/docs/Web/API/PerformanceEntry/entryType)
+  - : Retourne « `paint` ».
+- [`PerformanceEntry.name`](/fr/docs/Web/API/PerformanceEntry/name)
+  - : Retourne soit `"first-paint"` ou `"first-contentful-paint"`.
+- [`PerformanceEntry.startTime`](/fr/docs/Web/API/PerformanceEntry/startTime)
+  - : Retourne le [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp) du moment où la peinture s'est produite.
+- [`PerformanceEntry.duration`](/fr/docs/Web/API/PerformanceEntry/duration)
+  - : Retourne « `0` ».
 
-<h2 id="Methods">Méthodes</h2>
+## Méthodes
 
-<p>Cette interface n'a pas de méthodes.</p>
+Cette interface n'a pas de méthodes.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">function showPaintTimings() {
+```js
+function showPaintTimings() {
   if (window.performance) {
     let performance = window.performance;
     let performanceEntries = performance.getEntriesByType('paint');
-    performanceEntries.forEach( (performanceEntry, i, entries) =&gt; {
+    performanceEntries.forEach( (performanceEntry, i, entries) => {
       console.log("Le temps pour " + performanceEntry.name + " est de " + performanceEntry.startTime + " millisecondes.");
     });
   } else {
     console.log("Performance Timing n'est pas prise en charge.");
   }
-}</pre>
-
-<p>Le code ci-dessus produit une sortie de console semblable à ce qui suit :</p>
-
-<pre>Le temps pour first-paint est de 2785.915 millisecondes.
-Le temps pour first-contentful-paint est de 2787.460 millisecondes.</pre>
-
-<h2 id="Specifications">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('Paint Timing','#sec-PerformancePaintTiming','PerformancePaintTiming')}}</td>
-      <td>{{Spec2('Paint Timing')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.PerformancePaintTiming")}}</p>
+}
+```
+
+Le code ci-dessus produit une sortie de console semblable à ce qui suit :
+
+    Le temps pour first-paint est de 2785.915 millisecondes.
+    Le temps pour first-contentful-paint est de 2787.460 millisecondes.
+
+## Spécifications
+
+| Spécification                                                                                                    | Statut                           | Commentaire          |
+| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName('Paint Timing','#sec-PerformancePaintTiming','PerformancePaintTiming')}} | {{Spec2('Paint Timing')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.PerformancePaintTiming")}}
diff --git a/files/fr/web/api/performanceresourcetiming/connectend/index.md b/files/fr/web/api/performanceresourcetiming/connectend/index.md
index c5c10a2ec5..82f62f1647 100644
--- a/files/fr/web/api/performanceresourcetiming/connectend/index.md
+++ b/files/fr/web/api/performanceresourcetiming/connectend/index.md
@@ -11,28 +11,31 @@ tags:
   - connectEnd
 translation_of: Web/API/PerformanceResourceTiming/connectEnd
 ---
-<div>{{APIRef("Resource Timing API")}}</div>
+{{APIRef("Resource Timing API")}}
 
-<p>La propriété en lecture seule <strong><code>connectEnd</code></strong> renvoie le <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> de l'instant suivant immédiatement la fin d'établissement de la connexion du navigateur au serveur pour récupérer la ressource. La valeur de l'horodatage comprend l'intervalle de temps pour établir la connexion de transport, ainsi que d'autres intervalles de temps tels que la poignée de main TLS/SSL et l'authentification SOCKS.</p>
+La propriété en lecture seule **`connectEnd`** renvoie le [`timestamp`](/fr/docs/Web/API/DOMHighResTimeStamp) de l'instant suivant immédiatement la fin d'établissement de la connexion du navigateur au serveur pour récupérer la ressource. La valeur de l'horodatage comprend l'intervalle de temps pour établir la connexion de transport, ainsi que d'autres intervalles de temps tels que la poignée de main TLS/SSL et l'authentification SOCKS.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js"><var>resource</var>.connectEnd;</pre>
+```js
+resource.connectEnd;
+```
 
-<h3 id="Return_Value">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> représentant le temps après l'établissement d'une connexion.</p>
+Un [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp) représentant le temps après l'établissement d'une connexion.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<p>Dans l'exemple suivant, la valeur des propriétés <code>*Start</code> et <code>*End</code> de tous les événements de <a href="/fr/docs/Web/API/PerformanceEntry/entryType">type</a> <code>"resource"</code> sont consignés.</p>
+Dans l'exemple suivant, la valeur des propriétés `*Start` et `*End` de tous les événements de [type](/fr/docs/Web/API/PerformanceEntry/entryType) `"resource"` sont consignés.
 
-<pre class="brush: js">function print_PerformanceEntries() {
+```js
+function print_PerformanceEntries() {
   // Utilise getEntriesByType() pour obtenir uniquement les événements "resource"
   let p = performance.getEntriesByType("resource");
-  for (let i = 0; i &lt; p.length; i++) {
+  for (let i = 0; i < p.length; i++) {
     print_start_and_end_properties(p[i]);
   }
 }
@@ -46,7 +49,7 @@ function print_start_and_end_properties(perfEntry) {
                 "responseStart", "responseEnd",
                 "secureConnectionStart"];
 
-  for (let i = 0; i &lt; properties.length; i++) {
+  for (let i = 0; i < properties.length; i++) {
     // vérifie chaque propriété
     let supported = properties[i] in perfEntry;
     if (supported) {
@@ -57,28 +60,15 @@ function print_start_and_end_properties(perfEntry) {
     }
   }
 }
-</pre>
+```
 
-<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('Resource Timing', '#dom-performanceresourcetiming-connectend',
-        'connectEnd')}}</td>
-      <td>{{Spec2('Resource Timing')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                                                        | Statut                               | Commentaire          |
+| ------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- |
+| {{SpecName('Resource Timing', '#dom-performanceresourcetiming-connectend',
+        'connectEnd')}} | {{Spec2('Resource Timing')}} | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.PerformanceResourceTiming.connectEnd")}}</p>
+{{Compat("api.PerformanceResourceTiming.connectEnd")}}
diff --git a/files/fr/web/api/performanceresourcetiming/connectstart/index.md b/files/fr/web/api/performanceresourcetiming/connectstart/index.md
index 31d6fbf5da..e42762eed0 100644
--- a/files/fr/web/api/performanceresourcetiming/connectstart/index.md
+++ b/files/fr/web/api/performanceresourcetiming/connectstart/index.md
@@ -11,28 +11,31 @@ tags:
   - connectStart
 translation_of: Web/API/PerformanceResourceTiming/connectStart
 ---
-<div>{{APIRef("Resource Timing API")}}</div>
+{{APIRef("Resource Timing API")}}
 
-<p>La propriété en lecture seule <strong><code>connectStart</code></strong> retourne le <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> de l'instant avant que l'agent utilisateur ne commence à établir la connexion au serveur pour récupérer la ressource.</p>
+La propriété en lecture seule **`connectStart`** retourne le [`timestamp`](/fr/docs/Web/API/DOMHighResTimeStamp) de l'instant avant que l'agent utilisateur ne commence à établir la connexion au serveur pour récupérer la ressource.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js"><var>resource</var>.connectStart;</pre>
+```js
+resource.connectStart;
+```
 
-<h3 id="Return_Value">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> immédiatement avant que le navigateur ne commence à établir la connexion avec le serveur pour récupérer la ressource.</p>
+Un [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp) immédiatement avant que le navigateur ne commence à établir la connexion avec le serveur pour récupérer la ressource.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<p>Dans l'exemple suivant, la valeur des propriétés <code>*Start</code> et <code>*End</code> de tous les événements de <a href="/fr/docs/Web/API/PerformanceEntry/entryType">type</a> <code>"resource"</code> sont consignés.</p>
+Dans l'exemple suivant, la valeur des propriétés `*Start` et `*End` de tous les événements de [type](/fr/docs/Web/API/PerformanceEntry/entryType) `"resource"` sont consignés.
 
-<pre class="brush: js">function print_PerformanceEntries() {
+```js
+function print_PerformanceEntries() {
   // Utilise getEntriesByType() pour obtenir uniquement les événements "resource"
   let p = performance.getEntriesByType("resource");
-  for (let i = 0; i &lt; p.length; i++) {
+  for (let i = 0; i < p.length; i++) {
     print_start_and_end_properties(p[i]);
   }
 }
@@ -46,7 +49,7 @@ function print_start_and_end_properties(perfEntry) {
                 "responseStart", "responseEnd",
                 "secureConnectionStart"];
 
-  for (let i = 0; i &lt; properties.length; i++) {
+  for (let i = 0; i < properties.length; i++) {
     // vérifie chaque propriété
     let supported = properties[i] in perfEntry;
     if (supported) {
@@ -57,28 +60,15 @@ function print_start_and_end_properties(perfEntry) {
     }
   }
 }
-</pre>
+```
 
-<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('Resource Timing', '#dom-performanceresourcetiming-connectstart',
-        'connectStart')}}</td>
-      <td>{{Spec2('Resource Timing')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                                                            | Statut                               | Commentaire          |
+| ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName('Resource Timing', '#dom-performanceresourcetiming-connectstart',
+        'connectStart')}} | {{Spec2('Resource Timing')}} | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.PerformanceResourceTiming.connectStart")}}</p>
+{{Compat("api.PerformanceResourceTiming.connectStart")}}
diff --git a/files/fr/web/api/performanceresourcetiming/decodedbodysize/index.md b/files/fr/web/api/performanceresourcetiming/decodedbodysize/index.md
index 9f83cb80c7..28b6f47127 100644
--- a/files/fr/web/api/performanceresourcetiming/decodedbodysize/index.md
+++ b/files/fr/web/api/performanceresourcetiming/decodedbodysize/index.md
@@ -11,25 +11,28 @@ tags:
   - decodedBodySize
 translation_of: Web/API/PerformanceResourceTiming/decodedBodySize
 ---
-<div>{{APIRef("Resource Timing API")}}</div>
+{{APIRef("Resource Timing API")}}
 
-<p>La propriété en lecture seule <strong><code>decodedBodySize</code></strong> renvoie la taille (en octets) reçue de la récupération (HTTP ou cache) du corps du message, après suppression de tout codage de contenu appliqué. Si la ressource est récupérée à partir d'un cache d'application ou de ressources locales, elle renvoie la taille de la donnée utile après suppression de tous les codages de contenu appliqués.</p>
+La propriété en lecture seule **`decodedBodySize`** renvoie la taille (en octets) reçue de la récupération (HTTP ou cache) du corps du message, après suppression de tout codage de contenu appliqué. Si la ressource est récupérée à partir d'un cache d'application ou de ressources locales, elle renvoie la taille de la donnée utile après suppression de tous les codages de contenu appliqués.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js"><var>resource</var>.decodedBodySize;</pre>
+```js
+resource.decodedBodySize;
+```
 
-<h3 id="Return_Value">Valeur de retour</h3>
+### Valeur de retour
 
-<p>La taille (en octets) reçue de l'extraction (HTTP ou cache) du corps du message, après suppression de tout codage de contenu appliqué.</p>
+La taille (en octets) reçue de l'extraction (HTTP ou cache) du corps du message, après suppression de tout codage de contenu appliqué.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<p>Dans l'exemple suivant, la valeur des propriétés de taille de tous les événements de <a href="/fr/docs/Web/API/PerformanceEntry/entryType">type</a> <code>"resource"</code> est enregistrée.</p>
+Dans l'exemple suivant, la valeur des propriétés de taille de tous les événements de [type](/fr/docs/Web/API/PerformanceEntry/entryType) `"resource"` est enregistrée.
 
-<pre class="brush: js">function log_sizes(<var>perfEntry</var>){
+```js
+function log_sizes(perfEntry){
   // Vérifie la prise en charge des propriétés *size et imprime leurs
   // valeurs si elles sont prises en charge.
   if ("decodedBodySize" in perfEntry) {
@@ -53,32 +56,19 @@ translation_of: Web/API/PerformanceResourceTiming/decodedBodySize
 function check_PerformanceEntries() {
   // Utilise getEntriesByType() pour obtenir uniquement les événements "resource"
   let p = performance.getEntriesByType("resource");
-  for (let i = 0; i &lt; p.length; i++) {
+  for (let i = 0; i < p.length; i++) {
     log_sizes(p[i]);
   }
 }
-</pre>
+```
 
-<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('Resource Timing 2',
-        '#dom-performanceresourcetiming-decodedbodysize', 'decodedBodySize')}}</td>
-      <td>{{Spec2('Resource Timing 2')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                                                                        | Statut                                   | Commentaire          |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('Resource Timing 2',
+        '#dom-performanceresourcetiming-decodedbodysize', 'decodedBodySize')}} | {{Spec2('Resource Timing 2')}} | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.PerformanceResourceTiming.decodedBodySize")}}</p>
+{{Compat("api.PerformanceResourceTiming.decodedBodySize")}}
diff --git a/files/fr/web/api/performanceresourcetiming/domainlookupend/index.md b/files/fr/web/api/performanceresourcetiming/domainlookupend/index.md
index be289e3896..a2e6ec2240 100644
--- a/files/fr/web/api/performanceresourcetiming/domainlookupend/index.md
+++ b/files/fr/web/api/performanceresourcetiming/domainlookupend/index.md
@@ -11,30 +11,33 @@ tags:
   - domainLookupEnd
 translation_of: Web/API/PerformanceResourceTiming/domainLookupEnd
 ---
-<div>{{APIRef("Resource Timing API")}}</div>
+{{APIRef("Resource Timing API")}}
 
-<p>La propriété en lecture seule <strong><code>domainLookupEnd</code></strong> retourne le <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> immédiatement après que le navigateur ait terminé la recherche du nom de domaine pour la ressource.</p>
+La propriété en lecture seule **`domainLookupEnd`** retourne le [`timestamp`](/fr/docs/Web/API/DOMHighResTimeStamp) immédiatement après que le navigateur ait terminé la recherche du nom de domaine pour la ressource.
 
-<p>Si l'agent utilisateur dispose des informations de domaine dans le cache, <a href="/fr/docs/Web/API/PerformanceResourceTiming/domainLookupStart"><code>domainLookupStart</code></a> et <a href="/fr/docs/Web/API/PerformanceResourceTiming/domainLookupEnd"><code>domainLookupEnd</code></a> représentent les moments où l'agent utilisateur commence et termine la récupération des données de domaine dans le cache.</p>
+Si l'agent utilisateur dispose des informations de domaine dans le cache, [`domainLookupStart`](/fr/docs/Web/API/PerformanceResourceTiming/domainLookupStart) et [`domainLookupEnd`](/fr/docs/Web/API/PerformanceResourceTiming/domainLookupEnd) représentent les moments où l'agent utilisateur commence et termine la récupération des données de domaine dans le cache.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js"><var>resource</var>.domainLookupEnd;</pre>
+```js
+resource.domainLookupEnd;
+```
 
-<h3 id="Return_Value">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> représentant l'heure immédiatement après la fin de la recherche du nom de domaine de la ressource par le navigateur.</p>
+Un [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp) représentant l'heure immédiatement après la fin de la recherche du nom de domaine de la ressource par le navigateur.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<p>Dans l'exemple suivant, la valeur des propriétés <code>*Start</code> et <code>*End</code> de tous les événements de <a href="/fr/docs/Web/API/PerformanceEntry/entryType">type</a> <code>"resource"</code> sont enregistrés.</p>
+Dans l'exemple suivant, la valeur des propriétés `*Start` et `*End` de tous les événements de [type](/fr/docs/Web/API/PerformanceEntry/entryType) `"resource"` sont enregistrés.
 
-<pre class="brush: js">function print_PerformanceEntries() {
+```js
+function print_PerformanceEntries() {
   // Utilise getEntriesByType() pour obtenir uniquement les événements "resource"
   let p = performance.getEntriesByType("resource");
-  for (let i = 0; i &lt; p.length; i++) {
+  for (let i = 0; i < p.length; i++) {
     print_start_and_end_properties(p[i]);
   }
 }
@@ -48,7 +51,7 @@ function print_start_and_end_properties(perfEntry) {
                 "responseStart", "responseEnd",
                 "secureConnectionStart"];
 
-  for (let i = 0; i &lt; properties.length; i++) {
+  for (let i = 0; i < properties.length; i++) {
     // vérifie chaque propriété
     let supported = properties[i] in perfEntry;
     if (supported) {
@@ -59,28 +62,15 @@ function print_start_and_end_properties(perfEntry) {
     }
   }
 }
-</pre>
+```
 
-<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('Resource Timing', '#dom-performanceresourcetiming-domainlookupend',
-        'domainLookupEnd')}}</td>
-      <td>{{Spec2('Resource Timing')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                                                                    | Statut                               | Commentaire          |
+| ------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- |
+| {{SpecName('Resource Timing', '#dom-performanceresourcetiming-domainlookupend',
+        'domainLookupEnd')}} | {{Spec2('Resource Timing')}} | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.PerformanceResourceTiming.domainLookupEnd")}}</p>
+{{Compat("api.PerformanceResourceTiming.domainLookupEnd")}}
diff --git a/files/fr/web/api/performanceresourcetiming/domainlookupstart/index.md b/files/fr/web/api/performanceresourcetiming/domainlookupstart/index.md
index 0e4ed58d1e..75fb3ff428 100644
--- a/files/fr/web/api/performanceresourcetiming/domainlookupstart/index.md
+++ b/files/fr/web/api/performanceresourcetiming/domainlookupstart/index.md
@@ -11,28 +11,31 @@ tags:
   - domainLookupStart
 translation_of: Web/API/PerformanceResourceTiming/domainLookupStart
 ---
-<div>{{APIRef("Resource Timing API")}}</div>
+{{APIRef("Resource Timing API")}}
 
-<p>La propriété en lecture seule <strong><code>domainLookupStart</code></strong> retourne le <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> immédiatement avant que le navigateur ne commence la recherche du nom de domaine pour la ressource.</p>
+La propriété en lecture seule **`domainLookupStart`** retourne le [`timestamp`](/fr/docs/Web/API/DOMHighResTimeStamp) immédiatement avant que le navigateur ne commence la recherche du nom de domaine pour la ressource.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js"><var>resource</var>.domainLookupStart;</pre>
+```js
+resource.domainLookupStart;
+```
 
-<h3 id="Return_Value">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> immédiatement avant que le navigateur ne commence la recherche du nom de domaine pour la ressource.</p>
+Un [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp) immédiatement avant que le navigateur ne commence la recherche du nom de domaine pour la ressource.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<p>Dans l'exemple suivant, la valeur des propriétés <code>*Start</code> et <code>*End</code> de tous les événements de <a href="/fr/docs/Web/API/PerformanceEntry/entryType">type</a> <code>"resource"</code> sont enregistrés.</p>
+Dans l'exemple suivant, la valeur des propriétés `*Start` et `*End` de tous les événements de [type](/fr/docs/Web/API/PerformanceEntry/entryType) `"resource"` sont enregistrés.
 
-<pre class="brush: js">function print_PerformanceEntries() {
+```js
+function print_PerformanceEntries() {
   // Utilise getEntriesByType() pour obtenir uniquement les événements "resource"
   let p = performance.getEntriesByType("resource");
-  for (let i = 0; i &lt; p.length; i++) {
+  for (let i = 0; i < p.length; i++) {
     print_start_and_end_properties(p[i]);
   }
 }
@@ -46,7 +49,7 @@ function print_start_and_end_properties(perfEntry) {
                 "responseStart", "responseEnd",
                 "secureConnectionStart"];
 
-  for (let i = 0; i &lt; properties.length; i++) {
+  for (let i = 0; i < properties.length; i++) {
     // vérifie chaque propriété
     let supported = properties[i] in perfEntry;
     if (supported) {
@@ -57,28 +60,15 @@ function print_start_and_end_properties(perfEntry) {
     }
   }
 }
-</pre>
+```
 
-<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('Resource Timing',
-        '#dom-performanceresourcetiming-domainlookupstart', 'domainLookupStart')}}</td>
-      <td>{{Spec2('Resource Timing')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                                                                        | Statut                               | Commentaire          |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName('Resource Timing',
+        '#dom-performanceresourcetiming-domainlookupstart', 'domainLookupStart')}} | {{Spec2('Resource Timing')}} | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.PerformanceResourceTiming.domainLookupStart")}}</p>
+{{Compat("api.PerformanceResourceTiming.domainLookupStart")}}
diff --git a/files/fr/web/api/performanceresourcetiming/encodedbodysize/index.md b/files/fr/web/api/performanceresourcetiming/encodedbodysize/index.md
index 567134f104..4312c86024 100644
--- a/files/fr/web/api/performanceresourcetiming/encodedbodysize/index.md
+++ b/files/fr/web/api/performanceresourcetiming/encodedbodysize/index.md
@@ -11,27 +11,30 @@ tags:
   - encodedBodySize
 translation_of: Web/API/PerformanceResourceTiming/encodedBodySize
 ---
-<div>{{APIRef("Resource Timing API")}}</div>
+{{APIRef("Resource Timing API")}}
 
-<p>La propriété <strong><code>encodedBodySize</code></strong> en lecture seule représente la taille (en octets) reçue de la récupération (HTTP ou cache), du <em>corps de la donnée utile</em>, avant de supprimer tout codage de contenu appliqué.</p>
+La propriété **`encodedBodySize`** en lecture seule représente la taille (en octets) reçue de la récupération (HTTP ou cache), du _corps de la donnée utile_, avant de supprimer tout codage de contenu appliqué.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<p>Si la ressource est extraite d'un cache d'application ou d'une ressource locale, elle doit renvoyer la taille du corps de la charge utile avant de supprimer tout codage de contenu appliqué.</p>
+Si la ressource est extraite d'un cache d'application ou d'une ressource locale, elle doit renvoyer la taille du corps de la charge utile avant de supprimer tout codage de contenu appliqué.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js"><var>resource</var>.encodedBodySize;</pre>
+```js
+resource.encodedBodySize;
+```
 
-<h3 id="Return_Value">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Un <code>number</code> représentant la taille (en octets) reçue de la récupération (HTTP ou cache), du <em>corps de la donnée utile</em>, avant de supprimer tout codage de contenu appliqué.</p>
+Un `number` représentant la taille (en octets) reçue de la récupération (HTTP ou cache), du _corps de la donnée utile_, avant de supprimer tout codage de contenu appliqué.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<p>Dans l'exemple suivant, la valeur des propriétés de taille de tous les <a href="/fr/docs/Web/API/PerformanceEntry/entryType">types</a> <code>"resource"</code> sont enregistrées.</p>
+Dans l'exemple suivant, la valeur des propriétés de taille de tous les [types](/fr/docs/Web/API/PerformanceEntry/entryType) `"resource"` sont enregistrées.
 
-<pre class="brush: js">function log_sizes(perfEntry){
+```js
+function log_sizes(perfEntry){
   // Vérifie la prise en charge des propriétés PerformanceEntry.*size et imprime leurs valeurs
   // si elles sont prises en charge
   if ("decodedBodySize" in perfEntry)
@@ -52,32 +55,19 @@ translation_of: Web/API/PerformanceResourceTiming/encodedBodySize
 function check_PerformanceEntries() {
   // Utilise getEntriesByType() pour obtenir uniquement les événements "resource"
   let p = performance.getEntriesByType("resource");
-  for (let i = 0; i &lt; p.length; i++) {
+  for (let i = 0; i < p.length; i++) {
     log_sizes(p[i]);
   }
 }
-</pre>
-
-<h2 id="Specifications">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('Resource Timing 2',
-        '#dom-performanceresourcetiming-encodedbodysize', 'encodedBodySize')}}</td>
-      <td>{{Spec2('Resource Timing 2')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.PerformanceResourceTiming.encodedBodySize")}}</p>
+```
+
+## Spécifications
+
+| Spécification                                                                                                                                        | Statut                                   | Commentaire          |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('Resource Timing 2',
+        '#dom-performanceresourcetiming-encodedbodysize', 'encodedBodySize')}} | {{Spec2('Resource Timing 2')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.PerformanceResourceTiming.encodedBodySize")}}
diff --git a/files/fr/web/api/performanceresourcetiming/fetchstart/index.md b/files/fr/web/api/performanceresourcetiming/fetchstart/index.md
index 9acdd0756b..819e8d75fc 100644
--- a/files/fr/web/api/performanceresourcetiming/fetchstart/index.md
+++ b/files/fr/web/api/performanceresourcetiming/fetchstart/index.md
@@ -2,39 +2,42 @@
 title: PerformanceResourceTiming.fetchStart
 slug: Web/API/PerformanceResourceTiming/fetchStart
 tags:
-- API
-- Property
-- Propriété
-- Reference
-- Performance Web
-- Resource Timing API
-- fetchStart
+  - API
+  - Property
+  - Propriété
+  - Reference
+  - Performance Web
+  - Resource Timing API
+  - fetchStart
 translation_of: Web/API/PerformanceResourceTiming/fetchStart
 ---
-<div>{{APIRef("Resource Timing API")}}</div>
+{{APIRef("Resource Timing API")}}
 
-<p>La propriété en lecture seule <strong><code>fetchStart</code></strong> représente un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> immédiatement avant que le navigateur ne commence à récupérer la ressource.</p>
+La propriété en lecture seule **`fetchStart`** représente un [`timestamp`](/fr/docs/Web/API/DOMHighResTimeStamp) immédiatement avant que le navigateur ne commence à récupérer la ressource.
 
-<p>S'il y a des redirections HTTP, la propriété renvoie le temps immédiatement avant que l'agent utilisateur ne commence à récupérer la ressource finale dans la redirection.</p>
+S'il y a des redirections HTTP, la propriété renvoie le temps immédiatement avant que l'agent utilisateur ne commence à récupérer la ressource finale dans la redirection.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js"><var>resource</var>.fetchStart;</pre>
+```js
+resource.fetchStart;
+```
 
-<h3 id="Return_Value">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> immédiatement avant que le navigateur ne commence à récupérer la ressource.</p>
+Un [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp) immédiatement avant que le navigateur ne commence à récupérer la ressource.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<p>Dans l'exemple suivant, la valeur des propriétés <code>*Start</code> et <code>*End</code> de tous les événements de <a href="/fr/docs/Web/API/PerformanceEntry/entryType">type</a> <code>"resource"</code> sont enregistrés.</p>
+Dans l'exemple suivant, la valeur des propriétés `*Start` et `*End` de tous les événements de [type](/fr/docs/Web/API/PerformanceEntry/entryType) `"resource"` sont enregistrés.
 
-<pre class="brush: js">function print_PerformanceEntries() {
+```js
+function print_PerformanceEntries() {
   // Utilise getEntriesByType() pour obtenir uniquement les événements "resource"
   let p = performance.getEntriesByType("resource");
-  for (let i = 0; i &lt; p.length; i++) {
+  for (let i = 0; i < p.length; i++) {
     print_start_and_end_properties(p[i]);
   }
 }
@@ -48,7 +51,7 @@ function print_start_and_end_properties(perfEntry) {
                 "responseStart", "responseEnd",
                 "secureConnectionStart"];
 
-  for (let i = 0; i &lt; properties.length; i++) {
+  for (let i = 0; i < properties.length; i++) {
     // vérifie chaque propriété
     let supported = properties[i] in perfEntry;
     if (supported) {
@@ -59,28 +62,15 @@ function print_start_and_end_properties(perfEntry) {
     }
   }
 }
-</pre>
+```
 
-<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('Resource Timing', '#dom-performanceresourcetiming-fetchstart',
-        'fetchStart')}}</td>
-      <td>{{Spec2('Resource Timing')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                                                        | Statut                               | Commentaire          |
+| ------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- |
+| {{SpecName('Resource Timing', '#dom-performanceresourcetiming-fetchstart',
+        'fetchStart')}} | {{Spec2('Resource Timing')}} | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.PerformanceResourceTiming.fetchStart")}}</p>
+{{Compat("api.PerformanceResourceTiming.fetchStart")}}
diff --git a/files/fr/web/api/performanceresourcetiming/index.md b/files/fr/web/api/performanceresourcetiming/index.md
index 708701fc43..a863aad535 100644
--- a/files/fr/web/api/performanceresourcetiming/index.md
+++ b/files/fr/web/api/performanceresourcetiming/index.md
@@ -10,109 +10,88 @@ tags:
   - Resource Timing API
 translation_of: Web/API/PerformanceResourceTiming
 ---
-<div>{{APIRef("Resource Timing API")}}</div>
-
-<p>L'interface <strong><code>PerformanceResourceTiming</code></strong> permet de récupérer et d'analyser des données de synchronisation réseau détaillées concernant le chargement des <em>ressources</em> d'une application. Une application peut utiliser les mesures temporelles pour déterminer, par exemple, la durée nécessaire à l'extraction d'une ressource spécifique, telle qu'une <a href="/fr/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code></a>, un élément <a href="/fr/docs/Web/SVG/Element/svg"><code>&lt;svg&gt;</code></a>, une image ou un script.</p>
-
-<p>Les propriétés de l'interface créent une <em>chronologie de chargement des ressources</em> avec un <a href="/fr/docs/Web/API/DOMHighResTimeStamp">timestamps haute résolution</a> pour les événements réseau tels que les heures de début et de fin de redirection, les heures de début de récupération, les heures de début et de fin de recherche DNS, les heures de début et de fin de réponse, etc. En outre, l'interface étend <a href="/fr/docs/Web/API/PerformanceEntry"><code>PerformanceEntry</code></a> avec d'autres propriétés qui fournissent des données sur la taille de la ressource extraite ainsi que le <em>type</em> de ressource qui a initié l'extraction.</p>
-
-<p>{{InheritanceDiagram}}</p>
-
-<p>{{AvailableInWorkers}}</p>
-
-<h2 id="Properties">Propriétés</h2>
-
-<p>Cette interface étend les propriétés <a href="/fr/docs/Web/API/PerformanceEntry"><code>PerformanceEntry</code></a> suivantes pour les types d'entrée de performance des ressources en les restreignant comme suit :</p>
-
-<dl>
-  <dt><a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>PerformanceEntry.entryType</code></a> {{readonlyInline}}</dt>
-  <dd>Retourne <code>"resource"</code>.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceEntry/name"><code>PerformanceEntry.name</code></a> {{readonlyInline}}</dt>
-  <dd>Retourne l'URL des ressources.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceEntry/startTime"><code>PerformanceEntry.startTime</code></a> {{readonlyInline}}</dt>
-  <dd>Retourne le <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> de l'heure de début de la récupération d'une ressource. Cette valeur est équivalente à <a href="/fr/docs/Web/API/PerformanceResourceTiming/fetchStart"><code>PerformanceResourceTiming.fetchStart</code></a>.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceEntry/duration"><code>PerformanceEntry.duration</code></a> {{readonlyInline}}</dt>
-  <dd>Retourne un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> qui est la différence entre les propriétés <a href="/fr/docs/Web/API/PerformanceResourceTiming/responseEnd"><code>responseEnd</code></a> et <a href="/fr/docs/Web/API/PerformanceEntry/startTime"><code>startTime</code></a>.</dd>
-</dl>
-
-<p>L'interface prend également en charge les propriétés suivantes, qui sont énumérées dans l'ordre temporel selon lequel elles sont enregistrées pour l'extraction d'une seule ressource. Une liste alphabétique est présentée dans la navigation, à gauche.</p>
-
-<dl>
-  <dt><a href="/fr/docs/Web/API/PerformanceResourceTiming/initiatorType"><code>PerformanceResourceTiming.initiatorType</code></a> {{readonlyInline}}</dt>
-  <dd>Une chaîne de caractère <a href="/fr/docs/Web/API/DOMString"><code>string</code></a> représentant le <em>type</em> de ressource qui a initié l'entrée de performance, comme spécifié dans <a href="/fr/docs/Web/API/PerformanceResourceTiming/initiatorType"><code>PerformanceResourceTiming.initiatorType</code></a>.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceResourceTiming/nextHopProtocol"><code>PerformanceResourceTiming.nextHopProtocol</code></a> {{readonlyInline}}</dt>
-  <dd>Une chaîne de caractère <a href="/fr/docs/Web/API/DOMString"><code>string</code></a> représentant le <em>protocole réseau</em> utilisé pour récupérer la ressource, tel qu'identifié par le <a href="https://datatracker.ietf.org/doc/html/rfc7301">ALPN Protocol ID (RFC7301)</a>.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceResourceTiming/workerStart"><code>PerformanceResourceTiming.workerStart</code></a> {{readonlyInline}}</dt>
-  <dd>Retourne un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> immédiatement avant de transmettre le <a href="/fr/docs/Web/API/FetchEvent"><code>FetchEvent</code></a> si un processus de Service Worker est déjà en cours, ou immédiatement avant de lancer le processus de Service Worker s'il n'est pas encore en cours. Si la ressource n'est pas interceptée par un Service Worker, la propriété retourne toujours 0.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceResourceTiming/redirectStart"><code>PerformanceResourceTiming.redirectStart</code></a> {{readonlyInline}}</dt>
-  <dd>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> qui représente l'heure de début de l'extraction qui déclenche la redirection.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceResourceTiming/redirectEnd"><code>PerformanceResourceTiming.redirectEnd</code></a> {{readonlyInline}}</dt>
-  <dd>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> immédiatement après la réception du dernier octet de la réponse de la dernière redirection.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceResourceTiming/fetchStart"><code>PerformanceResourceTiming.fetchStart</code></a> {{readonlyInline}}</dt>
-  <dd>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> immédiatement avant que le navigateur ne commence à récupérer la ressource.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceResourceTiming/domainLookupStart"><code>PerformanceResourceTiming.domainLookupStart</code></a> {{readonlyInline}}</dt>
-  <dd>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> immédiatement avant que le navigateur ne commence la recherche du nom de domaine pour la ressource.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceResourceTiming/domainLookupEnd"><code>PerformanceResourceTiming.domainLookupEnd</code></a> {{readonlyInline}}</dt>
-  <dd>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> représentant l'heure immédiatement après la fin de la recherche du nom de domaine de la ressource par le navigateur.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceResourceTiming/connectStart"><code>PerformanceResourceTiming.connectStart</code></a> {{readonlyInline}}</dt>
-  <dd>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> immédiatement avant que le navigateur ne commence à établir la connexion avec le serveur pour récupérer la ressource.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceResourceTiming/connectEnd"><code>PerformanceResourceTiming.connectEnd</code></a> {{readonlyInline}}</dt>
-  <dd>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> immédiatement après que le navigateur ait fini d'établir la connexion avec le serveur pour récupérer la ressource.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceResourceTiming/secureConnectionStart"><code>PerformanceResourceTiming.secureConnectionStart</code></a> {{readonlyInline}}</dt>
-  <dd>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> immédiatement avant que le navigateur ne lance le processus de reconnaissance pour sécuriser la connexion en cours.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceResourceTiming/requestStart"><code>PerformanceResourceTiming.requestStart</code></a> {{readonlyInline}}</dt>
-  <dd>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> immédiatement avant que le navigateur ne commence à demander la ressource au serveur.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceResourceTiming/responseStart"><code>PerformanceResourceTiming.responseStart</code></a> {{readonlyInline}}</dt>
-  <dd>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> immédiatement après que le navigateur ait reçu le premier octet de la réponse du serveur.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceResourceTiming/responseEnd"><code>PerformanceResourceTiming.responseEnd</code></a> {{readonlyInline}}</dt>
-  <dd>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> immédiatement après la réception par le navigateur du dernier octet de la ressource ou immédiatement avant la fermeture de la connexion de transfert, selon la première éventualité.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceResourceTiming/transferSize"><code>PerformanceResourceTiming.transferSize</code></a> {{readonlyInline}}</dt>
-  <dd>Un nombre représentant la taille (en octets) de la ressource extraite. La taille comprend les champs d'en-tête de la réponse plus le corps des données utiles de la réponse.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceResourceTiming/encodedBodySize"><code>PerformanceResourceTiming.encodedBodySize</code></a> {{readonlyInline}}</dt>
-  <dd>Un nombre représentant la taille (en octets) reçue de la récupération (HTTP ou cache), du <em>corps de la donnée</em>, avant de supprimer tout codage de contenu appliqué.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceResourceTiming/decodedBodySize"><code>PerformanceResourceTiming.decodedBodySize</code></a> {{readonlyInline}}</dt>
-  <dd>Un nombre représentant la taille (en octets) reçue de la récupération (HTTP ou cache) du <em>message body</em>, après avoir retiré tout codage de contenu appliqué.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceResourceTiming/serverTiming"><code>PerformanceResourceTiming.serverTiming</code></a> {{readonlyInline}}</dt>
-  <dd>Un tableau d'entrées <a href="/fr/docs/Web/API/PerformanceServerTiming"><code>PerformanceServerTiming</code></a> contenant des mesures de synchronisation du serveur.</dd>
-</dl>
-
-<h2 id="Methods">Méthodes</h2>
-
-<dl>
-  <dt><a href="/fr/docs/Web/API/PerformanceResourceTiming/toJSON"><code>PerformanceResourceTiming.toJSON()</code></a></dt>
-  <dd>Renvoie une chaîne de caractère <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui est la représentation JSON de l'objet <a href="/fr/docs/Web/API/PerformanceResourceTiming"><code>PerformanceResourceTiming</code></a>.</dd>
-</dl>
-
-<h2 id="Example">Exemple</h2>
-
-<p>Voir l'exemple dans <a href="/fr/docs/Web/API/Resource_Timing_API/Using_the_Resource_Timing_API">Utilisation de Resource Timing API</a>.</p>
-
-<h2 id="Specifications">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('Resource Timing', '#performanceresourcetiming', 'PerformanceResourceTiming')}}</td>
-      <td>{{Spec2('Resource Timing')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.PerformanceResourceTiming")}}</p>
-
-<h2 id="See_also">Voir aussi</h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/API/Resource_Timing_API">L'API <i>Resource Timing</i></a></li>
-  <li><a href="/fr/docs/Web/API/Resource_Timing_API/Using_the_Resource_Timing_API">Utilisation de l'API <i>Resource Timing</i></a></li>
-</ul>
+{{APIRef("Resource Timing API")}}
+
+L'interface **`PerformanceResourceTiming`** permet de récupérer et d'analyser des données de synchronisation réseau détaillées concernant le chargement des _ressources_ d'une application. Une application peut utiliser les mesures temporelles pour déterminer, par exemple, la durée nécessaire à l'extraction d'une ressource spécifique, telle qu'une [`XMLHttpRequest`](/fr/docs/Web/API/XMLHttpRequest), un élément [`<svg>`](/fr/docs/Web/SVG/Element/svg), une image ou un script.
+
+Les propriétés de l'interface créent une _chronologie de chargement des ressources_ avec un [timestamps haute résolution](/fr/docs/Web/API/DOMHighResTimeStamp) pour les événements réseau tels que les heures de début et de fin de redirection, les heures de début de récupération, les heures de début et de fin de recherche DNS, les heures de début et de fin de réponse, etc. En outre, l'interface étend [`PerformanceEntry`](/fr/docs/Web/API/PerformanceEntry) avec d'autres propriétés qui fournissent des données sur la taille de la ressource extraite ainsi que le _type_ de ressource qui a initié l'extraction.
+
+{{InheritanceDiagram}}
+
+{{AvailableInWorkers}}
+
+## Propriétés
+
+Cette interface étend les propriétés [`PerformanceEntry`](/fr/docs/Web/API/PerformanceEntry) suivantes pour les types d'entrée de performance des ressources en les restreignant comme suit :
+
+- [`PerformanceEntry.entryType`](/fr/docs/Web/API/PerformanceEntry/entryType) {{readonlyInline}}
+  - : Retourne `"resource"`.
+- [`PerformanceEntry.name`](/fr/docs/Web/API/PerformanceEntry/name) {{readonlyInline}}
+  - : Retourne l'URL des ressources.
+- [`PerformanceEntry.startTime`](/fr/docs/Web/API/PerformanceEntry/startTime) {{readonlyInline}}
+  - : Retourne le [`timestamp`](/fr/docs/Web/API/DOMHighResTimeStamp) de l'heure de début de la récupération d'une ressource. Cette valeur est équivalente à [`PerformanceResourceTiming.fetchStart`](/fr/docs/Web/API/PerformanceResourceTiming/fetchStart).
+- [`PerformanceEntry.duration`](/fr/docs/Web/API/PerformanceEntry/duration) {{readonlyInline}}
+  - : Retourne un [`timestamp`](/fr/docs/Web/API/DOMHighResTimeStamp) qui est la différence entre les propriétés [`responseEnd`](/fr/docs/Web/API/PerformanceResourceTiming/responseEnd) et [`startTime`](/fr/docs/Web/API/PerformanceEntry/startTime).
+
+L'interface prend également en charge les propriétés suivantes, qui sont énumérées dans l'ordre temporel selon lequel elles sont enregistrées pour l'extraction d'une seule ressource. Une liste alphabétique est présentée dans la navigation, à gauche.
+
+- [`PerformanceResourceTiming.initiatorType`](/fr/docs/Web/API/PerformanceResourceTiming/initiatorType) {{readonlyInline}}
+  - : Une chaîne de caractère [`string`](/fr/docs/Web/API/DOMString) représentant le _type_ de ressource qui a initié l'entrée de performance, comme spécifié dans [`PerformanceResourceTiming.initiatorType`](/fr/docs/Web/API/PerformanceResourceTiming/initiatorType).
+- [`PerformanceResourceTiming.nextHopProtocol`](/fr/docs/Web/API/PerformanceResourceTiming/nextHopProtocol) {{readonlyInline}}
+  - : Une chaîne de caractère [`string`](/fr/docs/Web/API/DOMString) représentant le _protocole réseau_ utilisé pour récupérer la ressource, tel qu'identifié par le [ALPN Protocol ID (RFC7301)](https://datatracker.ietf.org/doc/html/rfc7301).
+- [`PerformanceResourceTiming.workerStart`](/fr/docs/Web/API/PerformanceResourceTiming/workerStart) {{readonlyInline}}
+  - : Retourne un [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp) immédiatement avant de transmettre le [`FetchEvent`](/fr/docs/Web/API/FetchEvent) si un processus de Service Worker est déjà en cours, ou immédiatement avant de lancer le processus de Service Worker s'il n'est pas encore en cours. Si la ressource n'est pas interceptée par un Service Worker, la propriété retourne toujours 0.
+- [`PerformanceResourceTiming.redirectStart`](/fr/docs/Web/API/PerformanceResourceTiming/redirectStart) {{readonlyInline}}
+  - : Un [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp) qui représente l'heure de début de l'extraction qui déclenche la redirection.
+- [`PerformanceResourceTiming.redirectEnd`](/fr/docs/Web/API/PerformanceResourceTiming/redirectEnd) {{readonlyInline}}
+  - : Un [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp) immédiatement après la réception du dernier octet de la réponse de la dernière redirection.
+- [`PerformanceResourceTiming.fetchStart`](/fr/docs/Web/API/PerformanceResourceTiming/fetchStart) {{readonlyInline}}
+  - : Un [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp) immédiatement avant que le navigateur ne commence à récupérer la ressource.
+- [`PerformanceResourceTiming.domainLookupStart`](/fr/docs/Web/API/PerformanceResourceTiming/domainLookupStart) {{readonlyInline}}
+  - : Un [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp) immédiatement avant que le navigateur ne commence la recherche du nom de domaine pour la ressource.
+- [`PerformanceResourceTiming.domainLookupEnd`](/fr/docs/Web/API/PerformanceResourceTiming/domainLookupEnd) {{readonlyInline}}
+  - : Un [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp) représentant l'heure immédiatement après la fin de la recherche du nom de domaine de la ressource par le navigateur.
+- [`PerformanceResourceTiming.connectStart`](/fr/docs/Web/API/PerformanceResourceTiming/connectStart) {{readonlyInline}}
+  - : Un [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp) immédiatement avant que le navigateur ne commence à établir la connexion avec le serveur pour récupérer la ressource.
+- [`PerformanceResourceTiming.connectEnd`](/fr/docs/Web/API/PerformanceResourceTiming/connectEnd) {{readonlyInline}}
+  - : Un [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp) immédiatement après que le navigateur ait fini d'établir la connexion avec le serveur pour récupérer la ressource.
+- [`PerformanceResourceTiming.secureConnectionStart`](/fr/docs/Web/API/PerformanceResourceTiming/secureConnectionStart) {{readonlyInline}}
+  - : Un [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp) immédiatement avant que le navigateur ne lance le processus de reconnaissance pour sécuriser la connexion en cours.
+- [`PerformanceResourceTiming.requestStart`](/fr/docs/Web/API/PerformanceResourceTiming/requestStart) {{readonlyInline}}
+  - : Un [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp) immédiatement avant que le navigateur ne commence à demander la ressource au serveur.
+- [`PerformanceResourceTiming.responseStart`](/fr/docs/Web/API/PerformanceResourceTiming/responseStart) {{readonlyInline}}
+  - : Un [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp) immédiatement après que le navigateur ait reçu le premier octet de la réponse du serveur.
+- [`PerformanceResourceTiming.responseEnd`](/fr/docs/Web/API/PerformanceResourceTiming/responseEnd) {{readonlyInline}}
+  - : Un [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp) immédiatement après la réception par le navigateur du dernier octet de la ressource ou immédiatement avant la fermeture de la connexion de transfert, selon la première éventualité.
+- [`PerformanceResourceTiming.transferSize`](/fr/docs/Web/API/PerformanceResourceTiming/transferSize) {{readonlyInline}}
+  - : Un nombre représentant la taille (en octets) de la ressource extraite. La taille comprend les champs d'en-tête de la réponse plus le corps des données utiles de la réponse.
+- [`PerformanceResourceTiming.encodedBodySize`](/fr/docs/Web/API/PerformanceResourceTiming/encodedBodySize) {{readonlyInline}}
+  - : Un nombre représentant la taille (en octets) reçue de la récupération (HTTP ou cache), du _corps de la donnée_, avant de supprimer tout codage de contenu appliqué.
+- [`PerformanceResourceTiming.decodedBodySize`](/fr/docs/Web/API/PerformanceResourceTiming/decodedBodySize) {{readonlyInline}}
+  - : Un nombre représentant la taille (en octets) reçue de la récupération (HTTP ou cache) du _message body_, après avoir retiré tout codage de contenu appliqué.
+- [`PerformanceResourceTiming.serverTiming`](/fr/docs/Web/API/PerformanceResourceTiming/serverTiming) {{readonlyInline}}
+  - : Un tableau d'entrées [`PerformanceServerTiming`](/fr/docs/Web/API/PerformanceServerTiming) contenant des mesures de synchronisation du serveur.
+
+## Méthodes
+
+- [`PerformanceResourceTiming.toJSON()`](/fr/docs/Web/API/PerformanceResourceTiming/toJSON)
+  - : Renvoie une chaîne de caractère [`DOMString`](/fr/docs/Web/API/DOMString) qui est la représentation JSON de l'objet [`PerformanceResourceTiming`](/fr/docs/Web/API/PerformanceResourceTiming).
+
+## Exemple
+
+Voir l'exemple dans [Utilisation de Resource Timing API](/fr/docs/Web/API/Resource_Timing_API/Using_the_Resource_Timing_API).
+
+## Spécifications
+
+| Spécification                                                                                                            | Statut                               | Commentaire          |
+| ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- |
+| {{SpecName('Resource Timing', '#performanceresourcetiming', 'PerformanceResourceTiming')}} | {{Spec2('Resource Timing')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.PerformanceResourceTiming")}}
+
+## Voir aussi
+
+- [L'API _Resource Timing_](/fr/docs/Web/API/Resource_Timing_API)
+- [Utilisation de l'API _Resource Timing_](/fr/docs/Web/API/Resource_Timing_API/Using_the_Resource_Timing_API)
diff --git a/files/fr/web/api/performanceresourcetiming/initiatortype/index.md b/files/fr/web/api/performanceresourcetiming/initiatortype/index.md
index 1d8ed0a780..f29d9034a5 100644
--- a/files/fr/web/api/performanceresourcetiming/initiatortype/index.md
+++ b/files/fr/web/api/performanceresourcetiming/initiatortype/index.md
@@ -11,35 +11,36 @@ tags:
   - initiatorType
 translation_of: Web/API/PerformanceResourceTiming/initiatorType
 ---
-<div>{{APIRef("Resource Timing API")}}</div>
+{{APIRef("Resource Timing API")}}
 
-<p>La propriété <strong><code>initiatorType</code></strong> en lecture seule est une <a href="/fr/docs/Web/API/DOMString">chaîne de caractères</a> qui représente le <em>type</em> de ressource qui a initié l'événement de performance.</p>
+La propriété **`initiatorType`** en lecture seule est une [chaîne de caractères](/fr/docs/Web/API/DOMString) qui représente le _type_ de ressource qui a initié l'événement de performance.
 
-<p>La valeur de cette chaîne est la suivante:</p>
+La valeur de cette chaîne est la suivante:
 
-<ul>
-  <li>Si l'initiateur est un <a href="/fr/docs/Web/API/Element"><code>Element</code></a>, la propriété retourne la propriété <a href="/fr/docs/Web/API/Node/localName"><code>localName</code></a> de l'élément.</li>
-  <li>Si l'initiateur est une ressource <a href="/fr/docs/Web/API/CSS"><code>CSS</code></a>, la propriété renvoie « <code>css</code> ».</li>
-  <li>Si l'initiateur est un objet <a href="/fr/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code></a>, la propriété renvoie « <code>xmlhttprequest</code> ».</li>
-  <li>Si l'initiateur est un objet <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a>, la propriété renvoie une chaîne vide (<code>""</code>).</li>
-</ul>
+- Si l'initiateur est un [`Element`](/fr/docs/Web/API/Element), la propriété retourne la propriété [`localName`](/fr/docs/Web/API/Node/localName) de l'élément.
+- Si l'initiateur est une ressource [`CSS`](/fr/docs/Web/API/CSS), la propriété renvoie « `css` ».
+- Si l'initiateur est un objet [`XMLHttpRequest`](/fr/docs/Web/API/XMLHttpRequest), la propriété renvoie « `xmlhttprequest` ».
+- Si l'initiateur est un objet [`PerformanceNavigationTiming`](/fr/docs/Web/API/PerformanceNavigationTiming), la propriété renvoie une chaîne vide (`""`).
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js"><var>resource</var>.initiatorType;</pre>
+```js
+resource.initiatorType;
+```
 
-<h3 id="Return_Value">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Une chaîne de caractères (<a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a>) représentant le <em>type</em> de ressource qui a initié l'événement de performance, comme spécifié ci-dessus.</p>
+Une chaîne de caractères ([`DOMString`](/fr/docs/Web/API/DOMString)) représentant le _type_ de ressource qui a initié l'événement de performance, comme spécifié ci-dessus.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">function print_PerformanceEntries() {
+```js
+function print_PerformanceEntries() {
   // Utilise getEntriesByType() pour obtenir uniquement les événements "resource"
   let p = performance.getEntriesByType("resource");
-  for (let i = 0; i &lt; p.length; i++) {
+  for (let i = 0; i < p.length; i++) {
     print_initiatorType(p[i]);
   }
 }
@@ -51,28 +52,15 @@ function print_initiatorType(perfEntry) {
   else
     console.log("... initiatorType = N'EST PAS pris en charge");
 }
-</pre>
+```
 
-<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('Resource Timing',
-        '#dom-performanceresourcetiming-initiatortype', 'initiatorType')}}</td>
-      <td>{{Spec2('Resource Timing')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                                                                | Statut                               | Commentaire          |
+| -------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName('Resource Timing',
+        '#dom-performanceresourcetiming-initiatortype', 'initiatorType')}} | {{Spec2('Resource Timing')}} | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.PerformanceResourceTiming.initiatorType")}}</p>
+{{Compat("api.PerformanceResourceTiming.initiatorType")}}
diff --git a/files/fr/web/api/performanceresourcetiming/nexthopprotocol/index.md b/files/fr/web/api/performanceresourcetiming/nexthopprotocol/index.md
index dff0c7e8fd..78d01ab252 100644
--- a/files/fr/web/api/performanceresourcetiming/nexthopprotocol/index.md
+++ b/files/fr/web/api/performanceresourcetiming/nexthopprotocol/index.md
@@ -11,30 +11,33 @@ tags:
   - nextHopProtocol
 translation_of: Web/API/PerformanceResourceTiming/nextHopProtocol
 ---
-<div>{{APIRef("Resource Timing API")}}</div>
+{{APIRef("Resource Timing API")}}
 
-<p>La propriété en lecture seule <strong><code>nextHopProtocol</code></strong> est une <a href="/fr/docs/Web/API/DOMString">chaîne de caractères</a> représentant le <em>protocole réseau</em> utilisé pour récupérer la ressource, tel qu'identifié par le <a href="https://datatracker.ietf.org/doc/html/rfc7301">ALPN Protocol ID (RFC7301)</a>.</p>
+La propriété en lecture seule **`nextHopProtocol`** est une [chaîne de caractères](/fr/docs/Web/API/DOMString) représentant le _protocole réseau_ utilisé pour récupérer la ressource, tel qu'identifié par le [ALPN Protocol ID (RFC7301)](https://datatracker.ietf.org/doc/html/rfc7301).
 
-<p>Lorsqu'un proxy est utilisé, si une connexion tunnel est établie, cette propriété renvoie l'ID du protocole ALPN du protocole tunnelisé. Sinon, cette propriété renvoie l'ID du protocole ALPN du premier saut vers le proxy.</p>
+Lorsqu'un proxy est utilisé, si une connexion tunnel est établie, cette propriété renvoie l'ID du protocole ALPN du protocole tunnelisé. Sinon, cette propriété renvoie l'ID du protocole ALPN du premier saut vers le proxy.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js"><var>resource</var>.nextHopProtocol;</pre>
+```js
+resource.nextHopProtocol;
+```
 
-<h3 id="Return_Value">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>string</code></a> représentant le <em>protocole réseau</em> utilisé pour récupérer la ressource, tel qu'identifié par le <a href="https://datatracker.ietf.org/doc/html/rfc7301">ALPN Protocol ID (RFC7301)</a>.</p>
+Une chaîne de caractères [`string`](/fr/docs/Web/API/DOMString) représentant le _protocole réseau_ utilisé pour récupérer la ressource, tel qu'identifié par le [ALPN Protocol ID (RFC7301)](https://datatracker.ietf.org/doc/html/rfc7301).
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<p>L'exemple suivant utilise la propriété <code>nextHopProtocol</code> :</p>
+L'exemple suivant utilise la propriété `nextHopProtocol` :
 
-<pre class="brush: js">function print_PerformanceEntries() {
+```js
+function print_PerformanceEntries() {
   // Utilise getEntriesByType() pour obtenir uniquement les événements "resource"
   let p = performance.getEntriesByType("resource");
-  for (let i = 0; i &lt; p.length; i++) {
+  for (let i = 0; i < p.length; i++) {
     print_nextHopProtocol(p[i]);
   }
 }
@@ -45,28 +48,15 @@ function print_nextHopProtocol(perfEntry) {
   else
     console.log("nextHopProtocol = N'EST PAS pris en charge");
 }
-</pre>
+```
 
-<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('Resource Timing 2',
-        '#dom-performanceresourcetiming-nexthopprotocol', 'nextHopProtocol')}}</td>
-      <td>{{Spec2('Resource Timing 2')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                                                                        | Statut                                   | Commentaire          |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('Resource Timing 2',
+        '#dom-performanceresourcetiming-nexthopprotocol', 'nextHopProtocol')}} | {{Spec2('Resource Timing 2')}} | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.PerformanceResourceTiming.nextHopProtocol")}}</p>
+{{Compat("api.PerformanceResourceTiming.nextHopProtocol")}}
diff --git a/files/fr/web/api/performanceresourcetiming/redirectend/index.md b/files/fr/web/api/performanceresourcetiming/redirectend/index.md
index 15002c1b46..a26f3141e9 100644
--- a/files/fr/web/api/performanceresourcetiming/redirectend/index.md
+++ b/files/fr/web/api/performanceresourcetiming/redirectend/index.md
@@ -11,30 +11,33 @@ tags:
   - redirectEnd
 translation_of: Web/API/PerformanceResourceTiming/redirectEnd
 ---
-<div>{{APIRef("Resource Timing API")}}</div>
+{{APIRef("Resource Timing API")}}
 
-<p>La propriété en lecture seule <strong><code>redirectEnd</code></strong> retourne un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> immédiatement après la réception du dernier octet de la réponse de la dernière redirection.</p>
+La propriété en lecture seule **`redirectEnd`** retourne un [`timestamp`](/fr/docs/Web/API/DOMHighResTimeStamp) immédiatement après la réception du dernier octet de la réponse de la dernière redirection.
 
-<p>Lors de l'extraction d'une ressource, s'il y a plusieurs redirections HTTP, que l'une d'entre elles a une origine différente du document actuel, et que l'algorithme de vérification d'autorisation de synchronisation réussit pour chaque ressource redirigée, cette propriété renvoie l'heure immédiatement après la réception du dernier octet de la réponse de la dernière redirection ; sinon, zéro est retourné.</p>
+Lors de l'extraction d'une ressource, s'il y a plusieurs redirections HTTP, que l'une d'entre elles a une origine différente du document actuel, et que l'algorithme de vérification d'autorisation de synchronisation réussit pour chaque ressource redirigée, cette propriété renvoie l'heure immédiatement après la réception du dernier octet de la réponse de la dernière redirection ; sinon, zéro est retourné.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js"><var>resource</var>.redirectEnd;</pre>
+```js
+resource.redirectEnd;
+```
 
-<h3 id="Return_Value">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> immédiatement après la réception du dernier octet de la réponse de la dernière redirection.</p>
+Un [`timestamp`](/fr/docs/Web/API/DOMHighResTimeStamp) immédiatement après la réception du dernier octet de la réponse de la dernière redirection.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<p>Dans l'exemple suivant, la valeur des propriétés <code>*Start</code> et <code>*End</code> de tous les événements de <a href="/fr/docs/Web/API/PerformanceEntry/entryType">type</a> <code>"resource"</code> sont enregistrés.</p>
+Dans l'exemple suivant, la valeur des propriétés `*Start` et `*End` de tous les événements de [type](/fr/docs/Web/API/PerformanceEntry/entryType) `"resource"` sont enregistrés.
 
-<pre class="brush: js">function print_PerformanceEntries() {
+```js
+function print_PerformanceEntries() {
   // Utilise getEntriesByType() pour obtenir uniquement les événements "resource"
   let p = performance.getEntriesByType("resource");
-  for (let i = 0; i &lt; p.length; i++) {
+  for (let i = 0; i < p.length; i++) {
     print_start_and_end_properties(p[i]);
   }
 }
@@ -48,7 +51,7 @@ function print_start_and_end_properties(perfEntry) {
                 "responseStart", "responseEnd",
                 "secureConnectionStart"];
 
-  for (let i = 0; i &lt; properties.length; i++) {
+  for (let i = 0; i < properties.length; i++) {
     // vérifie chaque propriété
     let supported = properties[i] in perfEntry;
     if (supported) {
@@ -59,28 +62,15 @@ function print_start_and_end_properties(perfEntry) {
     }
   }
 }
-</pre>
+```
 
-<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('Resource Timing', '#dom-performanceresourcetiming-redirectend',
-        'redirectEnd')}}</td>
-      <td>{{Spec2('Resource Timing')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                                                        | Statut                               | Commentaire          |
+| ------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- |
+| {{SpecName('Resource Timing', '#dom-performanceresourcetiming-redirectend',
+        'redirectEnd')}} | {{Spec2('Resource Timing')}} | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.PerformanceResourceTiming.redirectEnd")}}</p>
+{{Compat("api.PerformanceResourceTiming.redirectEnd")}}
diff --git a/files/fr/web/api/performanceresourcetiming/redirectstart/index.md b/files/fr/web/api/performanceresourcetiming/redirectstart/index.md
index 106c2de0d3..5dd56291ed 100644
--- a/files/fr/web/api/performanceresourcetiming/redirectstart/index.md
+++ b/files/fr/web/api/performanceresourcetiming/redirectstart/index.md
@@ -11,30 +11,33 @@ tags:
   - redirectStart
 translation_of: Web/API/PerformanceResourceTiming/redirectStart
 ---
-<div>{{APIRef("Resource Timing API")}}</div>
+{{APIRef("Resource Timing API")}}
 
-<p>La propriété en lecture seule <strong><code>redirectStart</code></strong> retourne un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> représentant l'instant du début de la récupération qui initie la redirection.</p>
+La propriété en lecture seule **`redirectStart`** retourne un [`timestamp`](/fr/docs/Web/API/DOMHighResTimeStamp) représentant l'instant du début de la récupération qui initie la redirection.
 
-<p>S'il y a des redirections HTTP lors de l'extraction de la ressource et si l'une des redirections ne provient pas de la même origine que le document actuel, mais que l'algorithme de vérification de l'autorisation de synchronisation réussit pour chaque ressource redirigée, cette propriété renvoie l'heure de début de l'extraction qui initie la redirection ; sinon, zéro est renvoyé.</p>
+S'il y a des redirections HTTP lors de l'extraction de la ressource et si l'une des redirections ne provient pas de la même origine que le document actuel, mais que l'algorithme de vérification de l'autorisation de synchronisation réussit pour chaque ressource redirigée, cette propriété renvoie l'heure de début de l'extraction qui initie la redirection ; sinon, zéro est renvoyé.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js"><var>resource</var>.redirectStart;</pre>
+```js
+resource.redirectStart;
+```
 
-<h3 id="Return_Value">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> représentant l'heure de début de l'extraction qui déclenche la redirection.</p>
+Un [`timestamp`](/fr/docs/Web/API/DOMHighResTimeStamp) représentant l'heure de début de l'extraction qui déclenche la redirection.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<p>Dans l'exemple suivant, la valeur des propriétés <code>*Start</code> et <code>*End</code> de tous les événements de <a href="/fr/docs/Web/API/PerformanceEntry/entryType">type</a> <code>"resource"</code> sont enregistrés.</p>
+Dans l'exemple suivant, la valeur des propriétés `*Start` et `*End` de tous les événements de [type](/fr/docs/Web/API/PerformanceEntry/entryType) `"resource"` sont enregistrés.
 
-<pre class="brush: js">function print_PerformanceEntries() {
+```js
+function print_PerformanceEntries() {
   // Utilise getEntriesByType() pour obtenir uniquement les événements "resource"
   let p = performance.getEntriesByType("resource");
-  for (let i = 0; i &lt; p.length; i++) {
+  for (let i = 0; i < p.length; i++) {
     print_start_and_end_properties(p[i]);
   }
 }
@@ -48,7 +51,7 @@ function print_start_and_end_properties(perfEntry) {
                 "responseStart", "responseEnd",
                 "secureConnectionStart"];
 
-  for (let i = 0; i &lt; properties.length; i++) {
+  for (let i = 0; i < properties.length; i++) {
     // vérifie chaque propriété
     let supported = properties[i] in perfEntry;
     if (supported) {
@@ -59,28 +62,15 @@ function print_start_and_end_properties(perfEntry) {
     }
   }
 }
-</pre>
+```
 
-<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('Resource Timing', '#dom-performanceresourcetiming-redirectstart',
-        'redirectStart')}}</td>
-      <td>{{Spec2('Resource Timing')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                                                                | Statut                               | Commentaire          |
+| -------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName('Resource Timing', '#dom-performanceresourcetiming-redirectstart',
+        'redirectStart')}} | {{Spec2('Resource Timing')}} | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.PerformanceResourceTiming.redirectStart")}}</p>
+{{Compat("api.PerformanceResourceTiming.redirectStart")}}
diff --git a/files/fr/web/api/performanceresourcetiming/requeststart/index.md b/files/fr/web/api/performanceresourcetiming/requeststart/index.md
index 27e8c19f0d..bf6a0a61af 100644
--- a/files/fr/web/api/performanceresourcetiming/requeststart/index.md
+++ b/files/fr/web/api/performanceresourcetiming/requeststart/index.md
@@ -11,30 +11,33 @@ tags:
   - requestStart
 translation_of: Web/API/PerformanceResourceTiming/requestStart
 ---
-<div>{{APIRef("Resource Timing API")}}</div>
+{{APIRef("Resource Timing API")}}
 
-<p>La propriété en lecture seule <strong><code>requestStart</code></strong> renvoie un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> du moment immédiatement avant que le navigateur ne commence à demander la ressource au serveur, au cache ou à la ressource locale. Si la connexion de transport échoue et que le navigateur retire la demande, la valeur renvoyée sera le début de la nouvelle demande.</p>
+La propriété en lecture seule **`requestStart`** renvoie un [`timestamp`](/fr/docs/Web/API/DOMHighResTimeStamp) du moment immédiatement avant que le navigateur ne commence à demander la ressource au serveur, au cache ou à la ressource locale. Si la connexion de transport échoue et que le navigateur retire la demande, la valeur renvoyée sera le début de la nouvelle demande.
 
-<p>Il n'y a pas de propriété de fin (« <em>requestEnd</em> ») correspondante pour <code>requestStart</code>.</p>
+Il n'y a pas de propriété de fin (« _requestEnd_ ») correspondante pour `requestStart`.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js"><var>resource</var>.requestStart;</pre>
+```js
+resource.requestStart;
+```
 
-<h3 id="Return_Value">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> représentant le moment immédiatement avant que le navigateur ne commence à demander la ressource au serveur.</p>
+Un [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp) représentant le moment immédiatement avant que le navigateur ne commence à demander la ressource au serveur.
 
-<h2 id="Example">Example</h2>
+## Example
 
-<p>Dans l'exemple suivant, la valeur des propriétés <code>*Start</code> et <code>*End</code> de tous les événements de <a href="/fr/docs/Web/API/PerformanceEntry/entryType">type</a> <code>"resource"</code> sont enregistrés.</p>
+Dans l'exemple suivant, la valeur des propriétés `*Start` et `*End` de tous les événements de [type](/fr/docs/Web/API/PerformanceEntry/entryType) `"resource"` sont enregistrés.
 
-<pre class="brush: js">function print_PerformanceEntries() {
+```js
+function print_PerformanceEntries() {
   // Utilise getEntriesByType() pour obtenir uniquement les événements "resource"
   let p = performance.getEntriesByType("resource");
-  for (let i = 0; i &lt; p.length; i++) {
+  for (let i = 0; i < p.length; i++) {
     print_start_and_end_properties(p[i]);
   }
 }
@@ -48,7 +51,7 @@ function print_start_and_end_properties(perfEntry) {
                 "responseStart", "responseEnd",
                 "secureConnectionStart"];
 
-  for (let i = 0; i &lt; properties.length; i++) {
+  for (let i = 0; i < properties.length; i++) {
     // vérifie chaque propriété
     let supported = properties[i] in perfEntry;
     if (supported) {
@@ -59,28 +62,15 @@ function print_start_and_end_properties(perfEntry) {
     }
   }
 }
-</pre>
+```
 
-<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('Resource Timing', '#dom-performanceresourcetiming-requeststart',
-        'requestStart')}}</td>
-      <td>{{Spec2('Resource Timing')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                                                            | Statut                               | Commentaire          |
+| ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName('Resource Timing', '#dom-performanceresourcetiming-requeststart',
+        'requestStart')}} | {{Spec2('Resource Timing')}} | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.PerformanceResourceTiming.requestStart")}}</p>
+{{Compat("api.PerformanceResourceTiming.requestStart")}}
diff --git a/files/fr/web/api/performanceresourcetiming/responseend/index.md b/files/fr/web/api/performanceresourcetiming/responseend/index.md
index 71b45f97b1..dd21906a66 100644
--- a/files/fr/web/api/performanceresourcetiming/responseend/index.md
+++ b/files/fr/web/api/performanceresourcetiming/responseend/index.md
@@ -11,28 +11,31 @@ tags:
   - responseEnd
 translation_of: Web/API/PerformanceResourceTiming/responseEnd
 ---
-<div>{{APIRef("Resource Timing API")}}</div>
+{{APIRef("Resource Timing API")}}
 
-<p>La propriété en lecture seule <strong><code>responseEnd</code></strong> retourne un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> immédiatement après que le navigateur a reçu le dernier octet de la ressource ou immédiatement avant la fermeture de la connexion de transport, selon ce qui se produit en premier.</p>
+La propriété en lecture seule **`responseEnd`** retourne un [`timestamp`](/fr/docs/Web/API/DOMHighResTimeStamp) immédiatement après que le navigateur a reçu le dernier octet de la ressource ou immédiatement avant la fermeture de la connexion de transport, selon ce qui se produit en premier.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js"><var>resource</var>.responseEnd;</pre>
+```js
+resource.responseEnd;
+```
 
-<h3 id="Return_Value">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> immédiatement après la réception par le navigateur du dernier octet de la ressource ou immédiatement avant la fermeture de la connexion de transport, selon ce qui arrive en premier.</p>
+Un [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp) immédiatement après la réception par le navigateur du dernier octet de la ressource ou immédiatement avant la fermeture de la connexion de transport, selon ce qui arrive en premier.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<p>Dans l'exemple suivant, la valeur des propriétés <code>*Start</code> et <code>*End</code> de tous les événements de <a href="/fr/docs/Web/API/PerformanceEntry/entryType">type</a> <code>"resource"</code> sont enregistrés.</p>
+Dans l'exemple suivant, la valeur des propriétés `*Start` et `*End` de tous les événements de [type](/fr/docs/Web/API/PerformanceEntry/entryType) `"resource"` sont enregistrés.
 
-<pre class="brush: js">function print_PerformanceEntries() {
+```js
+function print_PerformanceEntries() {
   // Utilise getEntriesByType() pour obtenir uniquement les événements "resource"
   let p = performance.getEntriesByType("resource");
-  for (let i = 0; i &lt; p.length; i++) {
+  for (let i = 0; i < p.length; i++) {
     print_start_and_end_properties(p[i]);
   }
 }
@@ -46,7 +49,7 @@ function print_start_and_end_properties(perfEntry) {
                 "responseStart", "responseEnd",
                 "secureConnectionStart"];
 
-  for (let i = 0; i &lt; properties.length; i++) {
+  for (let i = 0; i < properties.length; i++) {
     // vérifie chaque propriété
     let supported = properties[i] in perfEntry;
     if (supported) {
@@ -57,28 +60,15 @@ function print_start_and_end_properties(perfEntry) {
     }
   }
 }
-</pre>
+```
 
-<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('Resource Timing', '#dom-performanceresourcetiming-responseend',
-        'responseEnd')}}</td>
-      <td>{{Spec2('Resource Timing')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                                                        | Statut                               | Commentaire          |
+| ------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- |
+| {{SpecName('Resource Timing', '#dom-performanceresourcetiming-responseend',
+        'responseEnd')}} | {{Spec2('Resource Timing')}} | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.PerformanceResourceTiming.responseEnd")}}</p>
+{{Compat("api.PerformanceResourceTiming.responseEnd")}}
diff --git a/files/fr/web/api/performanceresourcetiming/responsestart/index.md b/files/fr/web/api/performanceresourcetiming/responsestart/index.md
index 4279d42446..c0b71ef023 100644
--- a/files/fr/web/api/performanceresourcetiming/responsestart/index.md
+++ b/files/fr/web/api/performanceresourcetiming/responsestart/index.md
@@ -11,28 +11,31 @@ tags:
   - responseStart
 translation_of: Web/API/PerformanceResourceTiming/responseStart
 ---
-<div>{{APIRef("Resource Timing API")}}</div>
+{{APIRef("Resource Timing API")}}
 
-<p>La propriété en lecture seule <strong><code>responseStart</code></strong> renvoie un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> immédiatement après que le navigateur a reçu le premier octet de la réponse du serveur, du cache ou de la ressource locale.</p>
+La propriété en lecture seule **`responseStart`** renvoie un [`timestamp`](/fr/docs/Web/API/DOMHighResTimeStamp) immédiatement après que le navigateur a reçu le premier octet de la réponse du serveur, du cache ou de la ressource locale.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js"><var>resource</var>.responseStart;</pre>
+```js
+resource.responseStart;
+```
 
-<h3 id="Return_Value">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> immédiatement après que le navigateur ait reçu le premier octet de la réponse du serveur.</p>
+Un [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp) immédiatement après que le navigateur ait reçu le premier octet de la réponse du serveur.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<p>Dans l'exemple suivant, la valeur des propriétés <code>*Start</code> et <code>*End</code> de tous les événements de <a href="/fr/docs/Web/API/PerformanceEntry/entryType">type</a> <code>"resource"</code> sont enregistrés.</p>
+Dans l'exemple suivant, la valeur des propriétés `*Start` et `*End` de tous les événements de [type](/fr/docs/Web/API/PerformanceEntry/entryType) `"resource"` sont enregistrés.
 
-<pre class="brush: js">function print_PerformanceEntries() {
+```js
+function print_PerformanceEntries() {
   // Utilise getEntriesByType() pour obtenir uniquement les événements "resource"
   let p = performance.getEntriesByType("resource");
-  for (let i = 0; i &lt; p.length; i++) {
+  for (let i = 0; i < p.length; i++) {
     print_start_and_end_properties(p[i]);
   }
 }
@@ -46,7 +49,7 @@ function print_start_and_end_properties(perfEntry) {
                 "responseStart", "responseEnd",
                 "secureConnectionStart"];
 
-  for (let i = 0; i &lt; properties.length; i++) {
+  for (let i = 0; i < properties.length; i++) {
     // vérifie chaque propriété
     let supported = properties[i] in perfEntry;
     if (supported) {
@@ -57,28 +60,15 @@ function print_start_and_end_properties(perfEntry) {
     }
   }
 }
-</pre>
+```
 
-<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('Resource Timing', '#dom-performanceresourcetiming-responsestart',
-        'responseStart')}}</td>
-      <td>{{Spec2('Resource Timing')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                                                                | Statut                               | Commentaire          |
+| -------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName('Resource Timing', '#dom-performanceresourcetiming-responsestart',
+        'responseStart')}} | {{Spec2('Resource Timing')}} | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.PerformanceResourceTiming.responseStart")}}</p>
+{{Compat("api.PerformanceResourceTiming.responseStart")}}
diff --git a/files/fr/web/api/performanceresourcetiming/secureconnectionstart/index.md b/files/fr/web/api/performanceresourcetiming/secureconnectionstart/index.md
index 1b5487516a..02dd805536 100644
--- a/files/fr/web/api/performanceresourcetiming/secureconnectionstart/index.md
+++ b/files/fr/web/api/performanceresourcetiming/secureconnectionstart/index.md
@@ -11,28 +11,31 @@ tags:
   - secureConnectionStart
 translation_of: Web/API/PerformanceResourceTiming/secureConnectionStart
 ---
-<div>{{APIRef("Resource Timing API")}}</div>
+{{APIRef("Resource Timing API")}}
 
-<p>La propriété en lecture seule <strong><code>secureConnectionStart</code></strong> renvoie un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>timestamp</code></a> immédiatement avant que le navigateur ne commence le processus de poignée de main (<i>handshake</i>) pour sécuriser la connexion actuelle. Si une connexion sécurisée n'est pas utilisée, la propriété renvoie zéro.</p>
+La propriété en lecture seule **`secureConnectionStart`** renvoie un [`timestamp`](/fr/docs/Web/API/DOMHighResTimeStamp) immédiatement avant que le navigateur ne commence le processus de poignée de main (_handshake_) pour sécuriser la connexion actuelle. Si une connexion sécurisée n'est pas utilisée, la propriété renvoie zéro.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js"><var>resource</var>.secureConnectionStart;</pre>
+```js
+resource.secureConnectionStart;
+```
 
-<h3 id="Return_Value">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Si la ressource est récupérée par le biais d'une connexion sécurisée, un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> immédiatement avant que le navigateur ne lance le processus de poignée de main (<i>handshake</i>) pour sécuriser la connexion actuelle. Si une connexion sécurisée n'est pas utilisée, cette propriété renvoie zéro.</p>
+Si la ressource est récupérée par le biais d'une connexion sécurisée, un [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp) immédiatement avant que le navigateur ne lance le processus de poignée de main (_handshake_) pour sécuriser la connexion actuelle. Si une connexion sécurisée n'est pas utilisée, cette propriété renvoie zéro.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<p>Dans l'exemple suivant, la valeur des propriétés <code>*Start</code> et <code>*End</code> de tous les événements de <a href="/fr/docs/Web/API/PerformanceEntry/entryType">type</a> <code>"resource"</code> sont enregistrés.</p>
+Dans l'exemple suivant, la valeur des propriétés `*Start` et `*End` de tous les événements de [type](/fr/docs/Web/API/PerformanceEntry/entryType) `"resource"` sont enregistrés.
 
-<pre class="brush: js">function print_PerformanceEntries() {
+```js
+function print_PerformanceEntries() {
   // Utilise getEntriesByType() pour obtenir uniquement les événements "resource"
   let p = performance.getEntriesByType("resource");
-  for (let i = 0; i &lt; p.length; i++) {
+  for (let i = 0; i < p.length; i++) {
     print_start_and_end_properties(p[i]);
   }
 }
@@ -46,7 +49,7 @@ function print_start_and_end_properties(perfEntry) {
                 "responseStart", "responseEnd",
                 "secureConnectionStart"];
 
-  for (let i = 0; i &lt; properties.length; i++) {
+  for (let i = 0; i < properties.length; i++) {
     // vérifie chaque propriété
     let supported = properties[i] in perfEntry;
     if (supported) {
@@ -57,29 +60,15 @@ function print_start_and_end_properties(perfEntry) {
     }
   }
 }
-</pre>
+```
 
-<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('Resource Timing',
-        '#dom-performanceresourcetiming-secureconnectionstart', 'secureConnectionStart')}}
-      </td>
-      <td>{{Spec2('Resource Timing')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                                                                                    | Statut                               | Commentaire          |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName('Resource Timing',
+        '#dom-performanceresourcetiming-secureconnectionstart', 'secureConnectionStart')}} | {{Spec2('Resource Timing')}} | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.PerformanceResourceTiming.secureConnectionStart")}}</p>
+{{Compat("api.PerformanceResourceTiming.secureConnectionStart")}}
diff --git a/files/fr/web/api/performanceresourcetiming/servertiming/index.md b/files/fr/web/api/performanceresourcetiming/servertiming/index.md
index 0a1b96fc82..16b501b952 100644
--- a/files/fr/web/api/performanceresourcetiming/servertiming/index.md
+++ b/files/fr/web/api/performanceresourcetiming/servertiming/index.md
@@ -12,40 +12,27 @@ tags:
   - serverTiming
 translation_of: Web/API/PerformanceResourceTiming/serverTiming
 ---
-<div>{{APIRef("Resource Timing API")}} {{securecontext_header}}</div>
+{{APIRef("Resource Timing API")}} {{securecontext_header}}
 
-<p>La propriété en lecture seule <strong><code>serverTiming</code></strong> retourne un tableau d'entrées <a href="/fr/docs/Web/API/PerformanceServerTiming"><code>PerformanceServerTiming</code></a> contenant des mesures de synchronisation du serveur.</p>
+La propriété en lecture seule **`serverTiming`** retourne un tableau d'entrées [`PerformanceServerTiming`](/fr/docs/Web/API/PerformanceServerTiming) contenant des mesures de synchronisation du serveur.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js"><var>resource</var>.serverTiming;</pre>
+```js
+resource.serverTiming;
+```
 
-<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('Server Timing','#servertiming-attribute', 'serverTiming')}}</td>
-      <td>{{Spec2('Server Timing')}}</td>
-      <td>Initial definition.</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                    | Statut                               | Commentaire         |
+| ------------------------------------------------------------------------------------------------ | ------------------------------------ | ------------------- |
+| {{SpecName('Server Timing','#servertiming-attribute', 'serverTiming')}} | {{Spec2('Server Timing')}} | Initial definition. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.PerformanceResourceTiming.serverTiming")}}</p>
+{{Compat("api.PerformanceResourceTiming.serverTiming")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li><a href="/fr/docs/Web/API/PerformanceServerTiming"><code>PerformanceServerTiming</code></a></li>
-  <li><a href="/fr/docs/Web/HTTP/Headers/Server-Timing"><code>Server-Timing</code></a></li>
-</ul>
+- [`PerformanceServerTiming`](/fr/docs/Web/API/PerformanceServerTiming)
+- [`Server-Timing`](/fr/docs/Web/HTTP/Headers/Server-Timing)
diff --git a/files/fr/web/api/performanceresourcetiming/tojson/index.md b/files/fr/web/api/performanceresourcetiming/tojson/index.md
index 8385dcbafa..1e24b3f98c 100644
--- a/files/fr/web/api/performanceresourcetiming/tojson/index.md
+++ b/files/fr/web/api/performanceresourcetiming/tojson/index.md
@@ -11,28 +11,29 @@ tags:
   - toJSON()
 translation_of: Web/API/PerformanceResourceTiming/toJSON
 ---
-<div>{{APIRef("Resource Timing API")}}</div>
+{{APIRef("Resource Timing API")}}
 
-<p>La méthode <strong><code>toJSON()</code></strong> est un <em>sérialiseur</em> qui retourne une représentation JSON de l'objet <a href="/fr/docs/Web/API/PerformanceResourceTiming"><code>PerformanceResourceTiming</code></a>.</p>
+La méthode **`toJSON()`** est un _sérialiseur_ qui retourne une représentation JSON de l'objet [`PerformanceResourceTiming`](/fr/docs/Web/API/PerformanceResourceTiming).
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">let <var>json</var> = <var>resourcePerfEntry</var>.toJSON();</pre>
+```js
+let json = resourcePerfEntry.toJSON();
+```
 
-<h3 id="Arguments">Arguments</h3>
+### Arguments
 
-<p>Aucun.</p>
+Aucun.
 
-<h3 id="Return_value">Valeur de retour</h3>
+### Valeur de retour
 
-<dl>
-  <dt><code>json</code></dt>
-  <dd>Un objet JSON qui est la sérialisation de l'objet <a href="/fr/docs/Web/API/PerformanceResourceTiming"><code>PerformanceResourceTiming</code></a> comme une carte avec des entrées de l'interface héritée la plus proche et avec des entrées pour chacun des attributs sérialisables.</dd>
-</dl>
+- `json`
+  - : Un objet JSON qui est la sérialisation de l'objet [`PerformanceResourceTiming`](/fr/docs/Web/API/PerformanceResourceTiming) comme une carte avec des entrées de l'interface héritée la plus proche et avec des entrées pour chacun des attributs sérialisables.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">// Obtient une entrée de performance des ressources
+```js
+// Obtient une entrée de performance des ressources
 let perfEntries = performance.getEntriesByType("resource");
 let entry = perfEntries[0];
 
@@ -40,28 +41,15 @@ let entry = perfEntries[0];
 let json = entry.toJSON();
 let s = JSON.stringify(json);
 console.log("PerformanceEntry.toJSON = " + s);
-</pre>
+```
 
-<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('Resource Timing 2', '#dom-performanceresourcetiming-tojson',
-        'toJSON')}}</td>
-      <td>{{Spec2('Resource Timing 2')}}</td>
-      <td></td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                                                | Statut                                   | Commentaire |
+| ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ----------- |
+| {{SpecName('Resource Timing 2', '#dom-performanceresourcetiming-tojson',
+        'toJSON')}} | {{Spec2('Resource Timing 2')}} |             |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.PerformanceResourceTiming.toJSON")}}</p>
+{{Compat("api.PerformanceResourceTiming.toJSON")}}
diff --git a/files/fr/web/api/performanceresourcetiming/transfersize/index.md b/files/fr/web/api/performanceresourcetiming/transfersize/index.md
index bd19c4db5f..3cc15d9cff 100644
--- a/files/fr/web/api/performanceresourcetiming/transfersize/index.md
+++ b/files/fr/web/api/performanceresourcetiming/transfersize/index.md
@@ -11,27 +11,30 @@ tags:
   - transferSize
 translation_of: Web/API/PerformanceResourceTiming/transferSize
 ---
-<div>{{APIRef("Resource Timing API")}}</div>
+{{APIRef("Resource Timing API")}}
 
-<p>La propriété en lecture seule <strong><code>transferSize</code></strong> représente la taille (en octets) de la ressource extraite. La taille comprend les champs d'en-tête de la réponse plus la charge utile du corps de la réponse (comme défini par la <a href="https://httpwg.github.io/specs/rfc7230.html#message.body">RFC 7230</a>).</p>
+La propriété en lecture seule **`transferSize`** représente la taille (en octets) de la ressource extraite. La taille comprend les champs d'en-tête de la réponse plus la charge utile du corps de la réponse (comme défini par la [RFC 7230](https://httpwg.github.io/specs/rfc7230.html#message.body)).
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<p>Si la ressource est extraite d'un cache local ou s'il s'agit d'une ressource d'origine croisée, cette propriété renvoie zéro.</p>
+Si la ressource est extraite d'un cache local ou s'il s'agit d'une ressource d'origine croisée, cette propriété renvoie zéro.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js"><var>resource</var>.transferSize;</pre>
+```js
+resource.transferSize;
+```
 
-<h3 id="Return_Value">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Un <code>number</code> représentant la taille (en octets) de la ressource extraite. La taille comprend les champs d'en-tête de la réponse plus la taille <a href="https://httpwg.github.io/specs/rfc7230.html#message.body">de la charge utile du corps de la réponse</a> (RFC7230).</p>
+Un `number` représentant la taille (en octets) de la ressource extraite. La taille comprend les champs d'en-tête de la réponse plus la taille [de la charge utile du corps de la réponse](https://httpwg.github.io/specs/rfc7230.html#message.body) (RFC7230).
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<p>Dans l'exemple suivant, les valeurs des propriétés de taille de tous les <a href="/fr/docs/Web/API/PerformanceEntry/entryType">types</a> <code>"resource"</code> sont enregistrées.</p>
+Dans l'exemple suivant, les valeurs des propriétés de taille de tous les [types](/fr/docs/Web/API/PerformanceEntry/entryType) `"resource"` sont enregistrées.
 
-<pre class="brush: js">function log_sizes(perfEntry){
+```js
+function log_sizes(perfEntry){
   // Vérifie la prise en charge des propriétés PerformanceEntry.*size et imprime leurs valeurs
   // si elles sont prises en charge
   if ("decodedBodySize" in perfEntry)
@@ -52,32 +55,19 @@ translation_of: Web/API/PerformanceResourceTiming/transferSize
 function check_PerformanceEntries() {
   // Utilise getEntriesByType() pour obtenir uniquement les événements "resource"
   let p = performance.getEntriesByType("resource");
-  for (let i = 0; i &lt; p.length; i++) {
+  for (let i = 0; i < p.length; i++) {
     log_sizes(p[i]);
   }
 }
-</pre>
-
-<h2 id="Specifications">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('Resource Timing 2', '#dom-performanceresourcetiming-transfersize',
-        'transferSize')}}</td>
-      <td>{{Spec2('Resource Timing 2')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.PerformanceResourceTiming.transferSize")}}</p>
+```
+
+## Spécifications
+
+| Spécification                                                                                                                                | Statut                                   | Commentaire          |
+| -------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('Resource Timing 2', '#dom-performanceresourcetiming-transfersize',
+        'transferSize')}} | {{Spec2('Resource Timing 2')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.PerformanceResourceTiming.transferSize")}}
diff --git a/files/fr/web/api/performanceresourcetiming/workerstart/index.md b/files/fr/web/api/performanceresourcetiming/workerstart/index.md
index 8a6c2cbede..bee037a0e7 100644
--- a/files/fr/web/api/performanceresourcetiming/workerstart/index.md
+++ b/files/fr/web/api/performanceresourcetiming/workerstart/index.md
@@ -11,28 +11,31 @@ tags:
   - workerStart
 translation_of: Web/API/PerformanceResourceTiming/workerStart
 ---
-<div>{{APIRef("Resource Timing API")}}</div>
+{{APIRef("Resource Timing API")}}
 
-<p>La propriété en lecture seule <strong><code>workerStart</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceResourceTiming"><code>PerformanceResourceTiming</code></a> renvoie un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> immédiatement avant l'envoi du <a href="/fr/docs/Web/API/FetchEvent"><code>FetchEvent</code></a> si un processus de <i>service worker</i> est déjà en cours, ou immédiatement avant le démarrage du processus de <i>service worker</i> s'il n'est pas déjà en cours. Si la ressource n'est pas interceptée par un <i>service worker</i>, la propriété renvoie toujours 0.</p>
+La propriété en lecture seule **`workerStart`** de l'interface [`PerformanceResourceTiming`](/fr/docs/Web/API/PerformanceResourceTiming) renvoie un [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp) immédiatement avant l'envoi du [`FetchEvent`](/fr/docs/Web/API/FetchEvent) si un processus de _service worker_ est déjà en cours, ou immédiatement avant le démarrage du processus de _service worker_ s'il n'est pas déjà en cours. Si la ressource n'est pas interceptée par un _service worker_, la propriété renvoie toujours 0.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js"><var>resource</var>.workerStart;</pre>
+```js
+resource.workerStart;
+```
 
-<h3 id="Return_Value">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Un <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a> immédiatement avant de transmettre le <a href="/fr/docs/Web/API/FetchEvent"><code>FetchEvent</code></a> si un processus de <i>service worker</i> est déjà en cours, ou immédiatement avant de lancer le processus de <i>service worker</i> s'il n'est pas encore en cours. Si la ressource n'est pas interceptée par un <i>service worker</i>, la propriété retourne toujours 0.</p>
+Un [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp) immédiatement avant de transmettre le [`FetchEvent`](/fr/docs/Web/API/FetchEvent) si un processus de _service worker_ est déjà en cours, ou immédiatement avant de lancer le processus de _service worker_ s'il n'est pas encore en cours. Si la ressource n'est pas interceptée par un _service worker_, la propriété retourne toujours 0.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<p>Dans l'exemple suivant, la valeur des propriétés <code>*Start</code> et <code>*End</code> de tous les événements de <a href="/fr/docs/Web/API/PerformanceEntry/entryType">type</a> <code>"resource"</code> sont enregistrés.</p>
+Dans l'exemple suivant, la valeur des propriétés `*Start` et `*End` de tous les événements de [type](/fr/docs/Web/API/PerformanceEntry/entryType) `"resource"` sont enregistrés.
 
-<pre class="brush: js">function print_PerformanceEntries() {
+```js
+function print_PerformanceEntries() {
   // Utilise getEntriesByType() pour obtenir uniquement les événements "resource"
   let p = performance.getEntriesByType("resource");
-  for (let i = 0; i &lt; p.length; i++) {
+  for (let i = 0; i < p.length; i++) {
     print_start_and_end_properties(p[i]);
   }
 }
@@ -46,7 +49,7 @@ function print_start_and_end_properties(perfEntry) {
                 "responseStart", "responseEnd",
                 "secureConnectionStart"];
 
-  for (let i = 0; i &lt; properties.length; i++) {
+  for (let i = 0; i < properties.length; i++) {
     // vérifie chaque propriété
     let supported = properties[i] in perfEntry;
     if (supported) {
@@ -57,28 +60,15 @@ function print_start_and_end_properties(perfEntry) {
     }
   }
 }
-</pre>
+```
 
-<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('Resource Timing 2', '#dom-performanceresourcetiming-workerstart',
-        'workerStart')}}</td>
-      <td>{{Spec2('Resource Timing 2')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                                                            | Statut                                   | Commentaire          |
+| ---------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('Resource Timing 2', '#dom-performanceresourcetiming-workerstart',
+        'workerStart')}} | {{Spec2('Resource Timing 2')}} | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.PerformanceResourceTiming.workerStart")}}</p>
+{{Compat("api.PerformanceResourceTiming.workerStart")}}
diff --git a/files/fr/web/api/performanceservertiming/description/index.md b/files/fr/web/api/performanceservertiming/description/index.md
index 68062d8a27..6cb100c58b 100644
--- a/files/fr/web/api/performanceservertiming/description/index.md
+++ b/files/fr/web/api/performanceservertiming/description/index.md
@@ -11,41 +11,28 @@ tags:
   - description
 translation_of: Web/API/PerformanceServerTiming/description
 ---
-<div>{{APIRef("Resource Timing API")}}</div>
+{{APIRef("Resource Timing API")}}
 
-<p>La propriété en lecture seule <strong><code>description</code></strong> retourne une chaîne de caractères (<a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a>) décrivant la métrique spécifiée par le serveur, ou une chaîne vide.</p>
+La propriété en lecture seule **`description`** retourne une chaîne de caractères ([`DOMString`](/fr/docs/Web/API/DOMString)) décrivant la métrique spécifiée par le serveur, ou une chaîne vide.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js"><var>serverTiming</var>.description;</pre>
+```js
+serverTiming.description;
+```
 
-<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('Server Timing','#dom-performanceservertiming-description',
-        'description')}}</td>
-      <td>{{Spec2('Server Timing')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                                                    | Statut                               | Commentaire          |
+| -------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName('Server Timing','#dom-performanceservertiming-description',
+        'description')}} | {{Spec2('Server Timing')}} | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.PerformanceServerTiming.description")}}</p>
+{{Compat("api.PerformanceServerTiming.description")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li><a href="/fr/docs/Web/API/PerformanceServerTiming"><code>PerformanceServerTiming</code></a></li>
-  <li><a href="/fr/docs/Web/HTTP/Headers/Server-Timing"><code>Server-Timing</code></a></li>
-</ul>
+- [`PerformanceServerTiming`](/fr/docs/Web/API/PerformanceServerTiming)
+- [`Server-Timing`](/fr/docs/Web/HTTP/Headers/Server-Timing)
diff --git a/files/fr/web/api/performanceservertiming/duration/index.md b/files/fr/web/api/performanceservertiming/duration/index.md
index 7fc0241d4b..83bc1e1c62 100644
--- a/files/fr/web/api/performanceservertiming/duration/index.md
+++ b/files/fr/web/api/performanceservertiming/duration/index.md
@@ -11,41 +11,28 @@ tags:
   - duration
 translation_of: Web/API/PerformanceServerTiming/duration
 ---
-<div>{{APIRef("Resource Timing API")}}</div>
+{{APIRef("Resource Timing API")}}
 
-<p>La propriété en lecture seule <strong><code>duration</code></strong> retourne un double qui contient la durée de la métrique spécifiée par le serveur, ou la valeur <code>0,0</code>.</p>
+La propriété en lecture seule **`duration`** retourne un double qui contient la durée de la métrique spécifiée par le serveur, ou la valeur `0,0`.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js"><var>serverTiming</var>.duration;</pre>
+```js
+serverTiming.duration;
+```
 
-<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('Server Timing','#dom-performanceservertiming-duration',
-        'duration')}}</td>
-      <td>{{Spec2('Server Timing')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                                            | Statut                               | Commentaire          |
+| ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- |
+| {{SpecName('Server Timing','#dom-performanceservertiming-duration',
+        'duration')}} | {{Spec2('Server Timing')}} | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.PerformanceServerTiming.duration")}}</p>
+{{Compat("api.PerformanceServerTiming.duration")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li><a href="/fr/docs/Web/API/PerformanceServerTiming"><code>PerformanceServerTiming</code></a></li>
-  <li><a href="/fr/docs/Web/HTTP/Headers/Server-Timing"><code>Server-Timing</code></a></li>
-</ul>
+- [`PerformanceServerTiming`](/fr/docs/Web/API/PerformanceServerTiming)
+- [`Server-Timing`](/fr/docs/Web/HTTP/Headers/Server-Timing)
diff --git a/files/fr/web/api/performanceservertiming/index.md b/files/fr/web/api/performanceservertiming/index.md
index 25e1d58e01..fb264333a8 100644
--- a/files/fr/web/api/performanceservertiming/index.md
+++ b/files/fr/web/api/performanceservertiming/index.md
@@ -9,37 +9,34 @@ tags:
   - Resource Timing API
 translation_of: Web/API/PerformanceServerTiming
 ---
-<div>{{APIRef("Resource Timing API")}} {{securecontext_header}}</div>
+{{APIRef("Resource Timing API")}} {{securecontext_header}}
 
-<p>L'interface <strong><code>PerformanceServerTiming</code></strong> présente des métriques de serveur qui sont envoyées avec la réponse dans l'en-tête <a href="/fr/docs/Web/HTTP/Headers/Server-Timing"><code>Server-Timing</code></a> dans l'en-tête HTTP.</p>
+L'interface **`PerformanceServerTiming`** présente des métriques de serveur qui sont envoyées avec la réponse dans l'en-tête [`Server-Timing`](/fr/docs/Web/HTTP/Headers/Server-Timing) dans l'en-tête HTTP.
 
-<p>Cette interface est limitée à la même origine, mais vous pouvez utiliser l'en-tête <a href="/fr/docs/Web/HTTP/Headers/Timing-Allow-Origin"><code>Timing-Allow-Origin</code></a> pour spécifier les domaines qui sont autorisés à accéder aux paramètres du serveur. Notez que cette interface n'est disponible que dans des contextes sécurisés (HTTPS) dans certains navigateurs.</p>
+Cette interface est limitée à la même origine, mais vous pouvez utiliser l'en-tête [`Timing-Allow-Origin`](/fr/docs/Web/HTTP/Headers/Timing-Allow-Origin) pour spécifier les domaines qui sont autorisés à accéder aux paramètres du serveur. Notez que cette interface n'est disponible que dans des contextes sécurisés (HTTPS) dans certains navigateurs.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Properties">Propriétés</h2>
+## Propriétés
 
-<dl>
-  <dt><a href="/fr/docs/Web/API/PerformanceServerTiming/description"><code>PerformanceServerTiming.description</code></a>{{readonlyInline}}</dt>
-  <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> décrivant la métrique spécifiée par le serveur, ou une chaîne vide.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceServerTiming/duration"><code>PerformanceServerTiming.duration</code></a>{{readonlyInline}}</dt>
-  <dd>Un double qui contient la durée de la métrique spécifiée par le serveur, ou la valeur <code>0.0</code>.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceServerTiming/name"><code>PerformanceServerTiming.name</code></a>{{readonlyInline}}</dt>
-  <dd>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> avec le nom de la métrique spécifiée par le serveur.</dd>
-</dl>
+- [`PerformanceServerTiming.description`](/fr/docs/Web/API/PerformanceServerTiming/description){{readonlyInline}}
+  - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) décrivant la métrique spécifiée par le serveur, ou une chaîne vide.
+- [`PerformanceServerTiming.duration`](/fr/docs/Web/API/PerformanceServerTiming/duration){{readonlyInline}}
+  - : Un double qui contient la durée de la métrique spécifiée par le serveur, ou la valeur `0.0`.
+- [`PerformanceServerTiming.name`](/fr/docs/Web/API/PerformanceServerTiming/name){{readonlyInline}}
+  - : Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) avec le nom de la métrique spécifiée par le serveur.
 
-<h2 id="Methods">Méthodes</h2>
+## Méthodes
 
-<dl>
-  <dt><a href="/fr/docs/Web/API/PerformanceServerTiming/toJSON()"><code>PerformanceServerTiming.toJSON()</code></a></dt>
-  <dd>Retourne une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui est la représentation JSON de l'objet <code>PerformanceServerTiming</code>.</dd>
-</dl>
+- [`PerformanceServerTiming.toJSON()`](</fr/docs/Web/API/PerformanceServerTiming/toJSON()>)
+  - : Retourne une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui est la représentation JSON de l'objet `PerformanceServerTiming`.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<p>Étant donné un serveur qui envoie l'en-tête <a href="/fr/docs/Web/HTTP/Headers/Server-Timing"><code>Server-Timing</code></a>, par exemple un serveur node.js comme celui-ci :</p>
+Étant donné un serveur qui envoie l'en-tête [`Server-Timing`](/fr/docs/Web/HTTP/Headers/Server-Timing), par exemple un serveur node.js comme celui-ci :
 
-<pre class="brush: js">const http = require('http');
+```js
+const http = require('http');
 
 function requestHandler(request, response) {
   const headers = {
@@ -51,48 +48,35 @@ function requestHandler(request, response) {
   };
   response.writeHead(200, headers);
   response.write('');
-  return setTimeout(_ =&gt; {
+  return setTimeout(_ => {
     response.end();
   }, 1000)
 };
 
-http.createServer(requestHandler).listen(3000).on('error', console.error);</pre>
+http.createServer(requestHandler).listen(3000).on('error', console.error);
+```
 
-<p>Les entrées <code>PerformanceServerTiming</code> sont désormais observables depuis JavaScript via la propriété <a href="/fr/docs/Web/API/PerformanceResourceTiming/serverTiming"><code>PerformanceResourceTiming.serverTiming</code></a> :</p>
+Les entrées `PerformanceServerTiming` sont désormais observables depuis JavaScript via la propriété [`PerformanceResourceTiming.serverTiming`](/fr/docs/Web/API/PerformanceResourceTiming/serverTiming) :
 
-<pre class="brush: js">let entries = performance.getEntriesByType('resource');
+```js
+let entries = performance.getEntriesByType('resource');
 console.log(entries[0].serverTiming);
 // 0: PerformanceServerTiming {name: "cache", duration: 23.2, description: "Cache Read"}
 // 1: PerformanceServerTiming {name: "db", duration: 53, description: ""}
 // 2: PerformanceServerTiming {name: "app", duration: 47.2, description: ""}
-</pre>
-
-<h2 id="Specifications">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('Server Timing','#the-performanceservertiming-interface', 'PerformanceServerTiming')}}</td>
-      <td>{{Spec2('Server Timing')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.PerformanceServerTiming")}}</p>
-
-<h2 id="See_also">Voir aussi</h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/HTTP/Headers/Server-Timing"><code>Server-Timing</code></a></li>
-  <li><a href="/fr/docs/Web/API/PerformanceResourceTiming/serverTiming"><code>PerformanceResourceTiming.serverTiming</code></a></li>
-</ul>
+```
+
+## Spécifications
+
+| Spécification                                                                                                                    | Statut                               | Commentaire          |
+| -------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName('Server Timing','#the-performanceservertiming-interface', 'PerformanceServerTiming')}} | {{Spec2('Server Timing')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.PerformanceServerTiming")}}
+
+## Voir aussi
+
+- [`Server-Timing`](/fr/docs/Web/HTTP/Headers/Server-Timing)
+- [`PerformanceResourceTiming.serverTiming`](/fr/docs/Web/API/PerformanceResourceTiming/serverTiming)
diff --git a/files/fr/web/api/performanceservertiming/name/index.md b/files/fr/web/api/performanceservertiming/name/index.md
index f4834fdcaa..80e5b930b4 100644
--- a/files/fr/web/api/performanceservertiming/name/index.md
+++ b/files/fr/web/api/performanceservertiming/name/index.md
@@ -11,40 +11,27 @@ tags:
   - name
 translation_of: Web/API/PerformanceServerTiming/name
 ---
-<div>{{APIRef("Resource Timing API")}}</div>
+{{APIRef("Resource Timing API")}}
 
-<p>La propriété en lecture seule <strong><code>name</code></strong> retourne une valeur <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui est le nom de la métrique spécifiée par le serveur.</p>
+La propriété en lecture seule **`name`** retourne une valeur [`DOMString`](/fr/docs/Web/API/DOMString) qui est le nom de la métrique spécifiée par le serveur.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js"><var>serverTiming</var>.name;</pre>
+```js
+serverTiming.name;
+```
 
-<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('Server Timing','#dom-performanceservertiming-name', 'name')}}</td>
-      <td>{{Spec2('Server Timing')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                    | Statut                               | Commentaire          |
+| ------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- |
+| {{SpecName('Server Timing','#dom-performanceservertiming-name', 'name')}} | {{Spec2('Server Timing')}} | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.PerformanceServerTiming.name")}}</p>
+{{Compat("api.PerformanceServerTiming.name")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li><a href="/fr/docs/Web/API/PerformanceServerTiming"><code>PerformanceServerTiming</code></a></li>
-  <li><a href="/fr/docs/Web/HTTP/Headers/Server-Timing"><code>Server-Timing</code></a></li>
-</ul>
+- [`PerformanceServerTiming`](/fr/docs/Web/API/PerformanceServerTiming)
+- [`Server-Timing`](/fr/docs/Web/HTTP/Headers/Server-Timing)
diff --git a/files/fr/web/api/performanceservertiming/tojson/index.md b/files/fr/web/api/performanceservertiming/tojson/index.md
index 4c0822c293..d5c179786c 100644
--- a/files/fr/web/api/performanceservertiming/tojson/index.md
+++ b/files/fr/web/api/performanceservertiming/tojson/index.md
@@ -11,45 +11,31 @@ tags:
   - toJSON
 translation_of: Web/API/PerformanceServerTiming/toJSON
 ---
-<div>{{APIRef("Resource Timing API")}}</div>
+{{APIRef("Resource Timing API")}}
 
-<p>La méthode <strong><code>toJSON()</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceServerTiming"><code>PerformanceServerTiming</code></a> retourne une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> qui est la représentation JSON de l'objet <a href="/fr/docs/Web/API/PerformanceServerTiming"><code>PerformanceServerTiming</code></a>.</p>
+La méthode **`toJSON()`** de l'interface [`PerformanceServerTiming`](/fr/docs/Web/API/PerformanceServerTiming) retourne une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) qui est la représentation JSON de l'objet [`PerformanceServerTiming`](/fr/docs/Web/API/PerformanceServerTiming).
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">let <var>json</var> = PerformanceServerTiming.toJSON()</pre>
+```js
+let json = PerformanceServerTiming.toJSON()
+```
 
-<h3 id="Parameters">Paramètres</h3>
+### Paramètres
 
-<p>Aucun.</p>
+Aucun.
 
-<h3 id="Return_value">Valeur de retour</h3>
+### Valeur de retour
 
-<dl>
-  <dt><code>json</code></dt>
-  <dd>Une chaîne de caractères JSON qui est la sérialisation de l'objet <a href="/fr/docs/Web/API/PerformanceServerTiming"><code>PerformanceServerTiming</code></a>.</dd>
-</dl>
+- `json`
+  - : Une chaîne de caractères JSON qui est la sérialisation de l'objet [`PerformanceServerTiming`](/fr/docs/Web/API/PerformanceServerTiming).
 
-<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('Server Timing','#dom-performanceservertiming-tojson','toJSON')}}
-      </td>
-      <td>{{Spec2('Server Timing')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                        | Statut                               | Commentaire          |
+| ---------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName('Server Timing','#dom-performanceservertiming-tojson','toJSON')}} | {{Spec2('Server Timing')}} | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.PerformanceServerTiming.toJSON")}}</p>
+{{Compat("api.PerformanceServerTiming.toJSON")}}
diff --git a/files/fr/web/api/performancetiming/connectend/index.md b/files/fr/web/api/performancetiming/connectend/index.md
index 036aec20a5..4eb8a5fdc8 100644
--- a/files/fr/web/api/performancetiming/connectend/index.md
+++ b/files/fr/web/api/performancetiming/connectend/index.md
@@ -14,44 +14,29 @@ tags:
   - connectEnd
 translation_of: Web/API/PerformanceTiming/connectEnd
 ---
-<p>{{APIRef("Navigation Timing")}}</p>
+{{APIRef("Navigation Timing")}}
 
-<div class="warning">
-  <p><strong>Attention :</strong> Cette interface est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2</a>. Veuillez utiliser l'interface <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a> à la place.</p>
-</div>
+> **Attention :** Cette interface est dépréciée dans la spécification [Navigation Timing Level 2](https://w3c.github.io/navigation-timing/#obsolete). Veuillez utiliser l'interface [`PerformanceNavigationTiming`](/fr/docs/Web/API/PerformanceNavigationTiming) à la place.
 
-<p>L'ancienne propriété en lecture seule <code><strong>connectEnd</code></strong> retourne un <code>unsigned long long</code> représentant le moment, en millisecondes depuis l'époque UNIX, où la connexion a été ouverte en réseau. Si la couche de transport signale une erreur et que l'établissement de la connexion est recommencé, l'heure de fin du dernier établissement de la connexion est donnée. Si une connexion persistante est utilisée, la valeur sera la même que <a href="/fr/docs/Web/API/PerformanceTiming/fetchStart"><code>PerformanceTiming.fetchStart</code></a>. Une connexion est considérée comme ouverte lorsque toute poignée de main de connexion sécurisée, ou authentification SOCKS, est terminée.</p>
+L'ancienne propriété en lecture seule **`connectEnd`** retourne un `unsigned long long` représentant le moment, en millisecondes depuis l'époque UNIX, où la connexion a été ouverte en réseau. Si la couche de transport signale une erreur et que l'établissement de la connexion est recommencé, l'heure de fin du dernier établissement de la connexion est donnée. Si une connexion persistante est utilisée, la valeur sera la même que [`PerformanceTiming.fetchStart`](/fr/docs/Web/API/PerformanceTiming/fetchStart). Une connexion est considérée comme ouverte lorsque toute poignée de main de connexion sécurisée, ou authentification SOCKS, est terminée.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">let <var>time</var> = <var>performanceTiming</var>.connectEnd;</pre>
+```js
+let time = performanceTiming.connectEnd;
+```
 
-<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('Navigation Timing', '#dom-performancetiming-connectend',
-        'PerformanceTiming.connectEnd')}}</td>
-      <td>{{Spec2('Navigation Timing')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                                                                        | Statut                                   | Commentaire          |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('Navigation Timing', '#dom-performancetiming-connectend',
+        'PerformanceTiming.connectEnd')}} | {{Spec2('Navigation Timing')}} | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.PerformanceTiming.connectEnd")}}</p>
+{{Compat("api.PerformanceTiming.connectEnd")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>L'interface <a href="/fr/docs/Web/API/PerformanceTiming"><code>PerformanceTiming</code></a> à laquelle elle appartient.</li>
-</ul>
+- L'interface [`PerformanceTiming`](/fr/docs/Web/API/PerformanceTiming) à laquelle elle appartient.
diff --git a/files/fr/web/api/performancetiming/connectstart/index.md b/files/fr/web/api/performancetiming/connectstart/index.md
index f4b1f27534..739b63313b 100644
--- a/files/fr/web/api/performancetiming/connectstart/index.md
+++ b/files/fr/web/api/performancetiming/connectstart/index.md
@@ -14,44 +14,29 @@ tags:
   - connectStart
 translation_of: Web/API/PerformanceTiming/connectStart
 ---
-<p>{{APIRef("Navigation Timing")}}</p>
+{{APIRef("Navigation Timing")}}
 
-<div class="warning">
-  <p><strong>Attention :</strong> Cette interface est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2</a>. Veuillez utiliser l'interface <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a> à la place.</p>
-</div>
+> **Attention :** Cette interface est dépréciée dans la spécification [Navigation Timing Level 2](https://w3c.github.io/navigation-timing/#obsolete). Veuillez utiliser l'interface [`PerformanceNavigationTiming`](/fr/docs/Web/API/PerformanceNavigationTiming) à la place.
 
-<p>L'ancienne propriété en lecture seule <code><strong>connectStart</code></strong> retourne un <code>unsigned long long</code> représentant le moment, en millisecondes depuis l'époque UNIX, où la demande d'ouverture de connexion est envoyée au réseau. Si la couche transport signale une erreur et que l'établissement de la connexion est relancé, le dernier moment de début d'établissement de la connexion est donné. Si une connexion persistante est utilisée, la valeur sera la même que <a href="/fr/docs/Web/API/PerformanceTiming/fetchStart"><code>PerformanceTiming.fetchStart</code></a>.</p>
+L'ancienne propriété en lecture seule **`connectStart`** retourne un `unsigned long long` représentant le moment, en millisecondes depuis l'époque UNIX, où la demande d'ouverture de connexion est envoyée au réseau. Si la couche transport signale une erreur et que l'établissement de la connexion est relancé, le dernier moment de début d'établissement de la connexion est donné. Si une connexion persistante est utilisée, la valeur sera la même que [`PerformanceTiming.fetchStart`](/fr/docs/Web/API/PerformanceTiming/fetchStart).
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">let <var>time</var> = <var>performanceTiming</var>.connectStart;</pre>
+```js
+let time = performanceTiming.connectStart;
+```
 
-<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('Navigation Timing', '#dom-performancetiming-connectstart',
-        'PerformanceTiming.connectStart')}}</td>
-      <td>{{Spec2('Navigation Timing')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                                                                            | Statut                                   | Commentaire          |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('Navigation Timing', '#dom-performancetiming-connectstart',
+        'PerformanceTiming.connectStart')}} | {{Spec2('Navigation Timing')}} | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.PerformanceTiming.connectStart")}}</p>
+{{Compat("api.PerformanceTiming.connectStart")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>L'interface <a href="/fr/docs/Web/API/PerformanceTiming"><code>PerformanceTiming</code></a> à laquelle elle appartient.</li>
-</ul>
+- L'interface [`PerformanceTiming`](/fr/docs/Web/API/PerformanceTiming) à laquelle elle appartient.
diff --git a/files/fr/web/api/performancetiming/domainlookupend/index.md b/files/fr/web/api/performancetiming/domainlookupend/index.md
index 20a26c397b..749684002e 100644
--- a/files/fr/web/api/performancetiming/domainlookupend/index.md
+++ b/files/fr/web/api/performancetiming/domainlookupend/index.md
@@ -14,44 +14,29 @@ tags:
   - domainLookupEnd
 translation_of: Web/API/PerformanceTiming/domainLookupEnd
 ---
-<p>{{APIRef("Navigation Timing")}}</p>
+{{APIRef("Navigation Timing")}}
 
-<div class="warning">
-  <p><strong>Attention :</strong> Cette interface est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2</a>. Veuillez utiliser l'interface <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a> à la place.</p>
-</div>
+> **Attention :** Cette interface est dépréciée dans la spécification [Navigation Timing Level 2](https://w3c.github.io/navigation-timing/#obsolete). Veuillez utiliser l'interface [`PerformanceNavigationTiming`](/fr/docs/Web/API/PerformanceNavigationTiming) à la place.
 
-<p>L'ancienne propriété en lecture seule <code><strong>domainLookupEnd</code></strong> retourne un <code>unsigned long long</code> représentant le moment, en millisecondes depuis l'époque UNIX, où la recherche de domaine est terminée. Si une connexion persistante est utilisée, ou si les informations sont stockées dans un cache ou une ressource locale, la valeur sera la même que <a href="/fr/docs/Web/API/PerformanceTiming/fetchStart"><code>PerformanceTiming.fetchStart</code></a>.</p>
+L'ancienne propriété en lecture seule **`domainLookupEnd`** retourne un `unsigned long long` représentant le moment, en millisecondes depuis l'époque UNIX, où la recherche de domaine est terminée. Si une connexion persistante est utilisée, ou si les informations sont stockées dans un cache ou une ressource locale, la valeur sera la même que [`PerformanceTiming.fetchStart`](/fr/docs/Web/API/PerformanceTiming/fetchStart).
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">let <var>time</var> = <var>performanceTiming</var>.domainLookupEnd;</pre>
+```js
+let time = performanceTiming.domainLookupEnd;
+```
 
-<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('Navigation Timing', '#dom-performancetiming-domainlookupend',
-        'PerformanceTiming.domainLookupEnd')}}</td>
-      <td>{{Spec2('Navigation Timing')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                                                                                    | Statut                                   | Commentaire          |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('Navigation Timing', '#dom-performancetiming-domainlookupend',
+        'PerformanceTiming.domainLookupEnd')}} | {{Spec2('Navigation Timing')}} | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.PerformanceTiming.domainLookupEnd")}}</p>
+{{Compat("api.PerformanceTiming.domainLookupEnd")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>L'interface <a href="/fr/docs/Web/API/PerformanceTiming"><code>PerformanceTiming</code></a> à laquelle elle appartient.</li>
-</ul>
+- L'interface [`PerformanceTiming`](/fr/docs/Web/API/PerformanceTiming) à laquelle elle appartient.
diff --git a/files/fr/web/api/performancetiming/domainlookupstart/index.md b/files/fr/web/api/performancetiming/domainlookupstart/index.md
index 45020fe7b6..c90badb086 100644
--- a/files/fr/web/api/performancetiming/domainlookupstart/index.md
+++ b/files/fr/web/api/performancetiming/domainlookupstart/index.md
@@ -14,44 +14,29 @@ tags:
   - domainLookupStart
 translation_of: Web/API/PerformanceTiming/domainLookupStart
 ---
-<p>{{APIRef("Navigation Timing")}}</p>
+{{APIRef("Navigation Timing")}}
 
-<div class="warning">
-  <p><strong>Attention :</strong> Cette interface est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2</a>. Veuillez utiliser l'interface <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a> à la place.</p>
-</div>
+> **Attention :** Cette interface est dépréciée dans la spécification [Navigation Timing Level 2](https://w3c.github.io/navigation-timing/#obsolete). Veuillez utiliser l'interface [`PerformanceNavigationTiming`](/fr/docs/Web/API/PerformanceNavigationTiming) à la place.
 
-<p>L'ancienne propriété en lecture seule <code><strong>domainLookupStart</code></strong> retourne un <code>unsigned long long</code> représentant le moment, en millisecondes depuis l'époque UNIX, où la recherche de domaine commence. Si une connexion persistante est utilisée, ou si les informations sont stockées dans un cache ou une ressource locale, la valeur sera la même que <a href="/fr/docs/Web/API/PerformanceTiming/fetchStart"><code>PerformanceTiming.fetchStart</code></a>.</p>
+L'ancienne propriété en lecture seule **`domainLookupStart`** retourne un `unsigned long long` représentant le moment, en millisecondes depuis l'époque UNIX, où la recherche de domaine commence. Si une connexion persistante est utilisée, ou si les informations sont stockées dans un cache ou une ressource locale, la valeur sera la même que [`PerformanceTiming.fetchStart`](/fr/docs/Web/API/PerformanceTiming/fetchStart).
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">let <var>time</var> = <var>performanceTiming</var>.domainLookupStart;</pre>
+```js
+let time = performanceTiming.domainLookupStart;
+```
 
-<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('Navigation Timing', '#dom-performancetiming-domainlookupstart',
-        'PerformanceTiming.domainLookupStart')}}</td>
-      <td>{{Spec2('Navigation Timing')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                                                                                        | Statut                                   | Commentaire          |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('Navigation Timing', '#dom-performancetiming-domainlookupstart',
+        'PerformanceTiming.domainLookupStart')}} | {{Spec2('Navigation Timing')}} | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.PerformanceTiming.domainLookupStart")}}</p>
+{{Compat("api.PerformanceTiming.domainLookupStart")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>L'interface <a href="/fr/docs/Web/API/PerformanceTiming"><code>PerformanceTiming</code></a> à laquelle elle appartient.</li>
-</ul>
+- L'interface [`PerformanceTiming`](/fr/docs/Web/API/PerformanceTiming) à laquelle elle appartient.
diff --git a/files/fr/web/api/performancetiming/domcomplete/index.md b/files/fr/web/api/performancetiming/domcomplete/index.md
index 27e1c9484b..91183b0779 100644
--- a/files/fr/web/api/performancetiming/domcomplete/index.md
+++ b/files/fr/web/api/performancetiming/domcomplete/index.md
@@ -14,44 +14,29 @@ tags:
   - domComplete
 translation_of: Web/API/PerformanceTiming/domComplete
 ---
-<p>{{APIRef("Navigation Timing")}}</p>
+{{APIRef("Navigation Timing")}}
 
-<div class="warning">
-  <p><strong>Attention :</strong> Cette interface est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2</a>. Veuillez utiliser la propriété <a href="/fr/docs/Web/API/PerformanceNavigationTiming/domComplete"><code>PerformanceNavigationTiming.domComplete</code></a> de l'interface <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a> à la place.</p>
-</div>
+> **Attention :** Cette interface est dépréciée dans la spécification [Navigation Timing Level 2](https://w3c.github.io/navigation-timing/#obsolete). Veuillez utiliser la propriété [`PerformanceNavigationTiming.domComplete`](/fr/docs/Web/API/PerformanceNavigationTiming/domComplete) de l'interface [`PerformanceNavigationTiming`](/fr/docs/Web/API/PerformanceNavigationTiming) à la place.
 
-<p>L'ancienne propriété en lecture seule <code><strong>domComplete</code></strong> retourne un <code>unsigned long long</code> représentant le moment, en millisecondes depuis l'époque UNIX, où le parseur a terminé son travail sur le document principal, c'est-à-dire lorsque son <a href="/fr/docs/Web/API/Document/readyState"><code>Document.readyState</code></a> passe à <code>'complete'</code> et que l'événement <a href="/fr/docs/Web/API/Document/readystatechange_event"><code>readystatechange</code></a> correspondant est lancé.</p>
+L'ancienne propriété en lecture seule **`domComplete`** retourne un `unsigned long long` représentant le moment, en millisecondes depuis l'époque UNIX, où le parseur a terminé son travail sur le document principal, c'est-à-dire lorsque son [`Document.readyState`](/fr/docs/Web/API/Document/readyState) passe à `'complete'` et que l'événement [`readystatechange`](/fr/docs/Web/API/Document/readystatechange_event) correspondant est lancé.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">let <var>time</var> = <var>performanceTiming</var>.domComplete;</pre>
+```js
+let time = performanceTiming.domComplete;
+```
 
-<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('Navigation Timing', '#dom-performancetiming-domcomplete',
-        'PerformanceTiming.domComplete')}}</td>
-      <td>{{Spec2('Navigation Timing')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                                                                        | Statut                                   | Commentaire          |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('Navigation Timing', '#dom-performancetiming-domcomplete',
+        'PerformanceTiming.domComplete')}} | {{Spec2('Navigation Timing')}} | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.PerformanceTiming.domComplete")}}</p>
+{{Compat("api.PerformanceTiming.domComplete")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>L'interface <a href="/fr/docs/Web/API/PerformanceTiming"><code>PerformanceTiming</code></a> à laquelle elle appartient.</li>
-</ul>
+- L'interface [`PerformanceTiming`](/fr/docs/Web/API/PerformanceTiming) à laquelle elle appartient.
diff --git a/files/fr/web/api/performancetiming/domcontentloadedeventend/index.md b/files/fr/web/api/performancetiming/domcontentloadedeventend/index.md
index a593001111..edf74fa928 100644
--- a/files/fr/web/api/performancetiming/domcontentloadedeventend/index.md
+++ b/files/fr/web/api/performancetiming/domcontentloadedeventend/index.md
@@ -14,45 +14,30 @@ tags:
   - domContentLoadedEventEnd
 translation_of: Web/API/PerformanceTiming/domContentLoadedEventEnd
 ---
-<p>{{APIRef("Navigation Timing")}}</p>
+{{APIRef("Navigation Timing")}}
 
-<div class="warning">
-  <p><strong>Attention :</strong> Cette interface est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2</a>. Veuillez utiliser la propriété <a href="/fr/docs/Web/API/PerformanceNavigationTiming/domContentLoadedEventEnd"><code>PerformanceNavigationTiming.domContentLoadedEventEnd</code></a> de l'interface <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a> à la place.</p>
-</div>
+> **Attention :** Cette interface est dépréciée dans la spécification [Navigation Timing Level 2](https://w3c.github.io/navigation-timing/#obsolete). Veuillez utiliser la propriété [`PerformanceNavigationTiming.domContentLoadedEventEnd`](/fr/docs/Web/API/PerformanceNavigationTiming/domContentLoadedEventEnd) de l'interface [`PerformanceNavigationTiming`](/fr/docs/Web/API/PerformanceNavigationTiming) à la place.
 
-<p>L'ancienne propriété en lecture seule <code><strong>domContentLoadedEventEnd</code></strong> retourne un <code>unsigned long long</code> représentant le moment, en millisecondes depuis l'époque UNIX, juste après que tous les scripts qui doivent être exécutés le plus rapidement possible, dans l'ordre ou non, aient été exécutés.</p>
+L'ancienne propriété en lecture seule **`domContentLoadedEventEnd`** retourne un `unsigned long long` représentant le moment, en millisecondes depuis l'époque UNIX, juste après que tous les scripts qui doivent être exécutés le plus rapidement possible, dans l'ordre ou non, aient été exécutés.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">let <var>time</var> = <var>performanceTiming</var>.domContentLoadedEventEnd;</pre>
+```js
+let time = performanceTiming.domContentLoadedEventEnd;
+```
 
-<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('Navigation Timing',
+| Spécification                                                                                                                                                                                        | Statut                                   | Commentaire          |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('Navigation Timing',
         '#dom-performancetiming-domcontentloadedeventend',
-        'PerformanceTiming.domContentLoadedEventEnd')}}</td>
-      <td>{{Spec2('Navigation Timing')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
+        'PerformanceTiming.domContentLoadedEventEnd')}} | {{Spec2('Navigation Timing')}} | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.PerformanceTiming.domContentLoadedEventEnd")}}</p>
+{{Compat("api.PerformanceTiming.domContentLoadedEventEnd")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>L'interface <a href="/fr/docs/Web/API/PerformanceTiming"><code>PerformanceTiming</code></a> à laquelle elle appartient.</li>
-</ul>
+- L'interface [`PerformanceTiming`](/fr/docs/Web/API/PerformanceTiming) à laquelle elle appartient.
diff --git a/files/fr/web/api/performancetiming/domcontentloadedeventstart/index.md b/files/fr/web/api/performancetiming/domcontentloadedeventstart/index.md
index fe2f9588ae..8ef13de22f 100644
--- a/files/fr/web/api/performancetiming/domcontentloadedeventstart/index.md
+++ b/files/fr/web/api/performancetiming/domcontentloadedeventstart/index.md
@@ -14,45 +14,30 @@ tags:
   - domContentLoadedEventStart
 translation_of: Web/API/PerformanceTiming/domContentLoadedEventStart
 ---
-<p>{{APIRef("Navigation Timing")}}</p>
+{{APIRef("Navigation Timing")}}
 
-<div class="warning">
-  <p><strong>Attention :</strong> Cette interface est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2</a>. Veuillez utiliser la propriété <a href="/fr/docs/Web/API/PerformanceNavigationTiming/domContentLoadedEventStart"><code>PerformanceNavigationTiming.domContentLoadedEventStart</code></a> de l'interface <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a> à la place.</p>
-</div>
+> **Attention :** Cette interface est dépréciée dans la spécification [Navigation Timing Level 2](https://w3c.github.io/navigation-timing/#obsolete). Veuillez utiliser la propriété [`PerformanceNavigationTiming.domContentLoadedEventStart`](/fr/docs/Web/API/PerformanceNavigationTiming/domContentLoadedEventStart) de l'interface [`PerformanceNavigationTiming`](/fr/docs/Web/API/PerformanceNavigationTiming) à la place.
 
-<p>L'ancienne propriété en lecture seule <code><strong>domContentLoadedEventStart</code></strong> retourne un <code>unsigned long long</code> représentant le moment, en millisecondes depuis l'époque UNIX, juste avant que le parseur n'envoie l'événement <a href="/fr/docs/Web/API/Document/DOMContentLoaded_event"><code>DOMContentLoaded</code></a>, c'est-à-dire juste après que tous les scripts qui doivent être exécutés juste après le parsing aient été exécutés.</p>
+L'ancienne propriété en lecture seule **`domContentLoadedEventStart`** retourne un `unsigned long long` représentant le moment, en millisecondes depuis l'époque UNIX, juste avant que le parseur n'envoie l'événement [`DOMContentLoaded`](/fr/docs/Web/API/Document/DOMContentLoaded_event), c'est-à-dire juste après que tous les scripts qui doivent être exécutés juste après le parsing aient été exécutés.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">let <var>time</var> = <var>performanceTiming</var>.domContentLoadedEventStart;</pre>
+```js
+let time = performanceTiming.domContentLoadedEventStart;
+```
 
-<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('Navigation Timing',
+| Spécification                                                                                                                                                                                            | Statut                                   | Commentaire          |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('Navigation Timing',
         '#dom-performancetiming-domcontentloadedeventstart',
-        'PerformanceTiming.domContentLoadedEventStart')}}</td>
-      <td>{{Spec2('Navigation Timing')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
+        'PerformanceTiming.domContentLoadedEventStart')}} | {{Spec2('Navigation Timing')}} | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.PerformanceTiming.domContentLoadedEventStart")}}</p>
+{{Compat("api.PerformanceTiming.domContentLoadedEventStart")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>L'interface <a href="/fr/docs/Web/API/PerformanceTiming"><code>PerformanceTiming</code></a> à laquelle elle appartient.</li>
-</ul>
+- L'interface [`PerformanceTiming`](/fr/docs/Web/API/PerformanceTiming) à laquelle elle appartient.
diff --git a/files/fr/web/api/performancetiming/dominteractive/index.md b/files/fr/web/api/performancetiming/dominteractive/index.md
index 6d96a184da..bd7f13db71 100644
--- a/files/fr/web/api/performancetiming/dominteractive/index.md
+++ b/files/fr/web/api/performancetiming/dominteractive/index.md
@@ -14,48 +14,32 @@ tags:
   - domInteractive
 translation_of: Web/API/PerformanceTiming/domInteractive
 ---
-<p>{{APIRef("Navigation Timing")}}</p>
+{{APIRef("Navigation Timing")}}
 
-<div class="warning">
-  <p><strong>Attention :</strong> Cette interface est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2</a>. Veuillez utiliser la propriété <a href="/fr/docs/Web/API/PerformanceNavigationTiming/domInteractive"><code>PerformanceNavigationTiming.domInteractive</code></a> de l'interface <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a> à la place.</p>
-</div>
+> **Attention :** Cette interface est dépréciée dans la spécification [Navigation Timing Level 2](https://w3c.github.io/navigation-timing/#obsolete). Veuillez utiliser la propriété [`PerformanceNavigationTiming.domInteractive`](/fr/docs/Web/API/PerformanceNavigationTiming/domInteractive) de l'interface [`PerformanceNavigationTiming`](/fr/docs/Web/API/PerformanceNavigationTiming) à la place.
 
-<p>L'ancienne propriété en lecture seule <code><strong>domInteractive</code></strong> retourne un <code>unsigned long long</code> représentant le moment, en millisecondes depuis l'époque UNIX, où le parseur a terminé son travail sur le document principal, c'est-à-dire lorsque son <a href="/fr/docs/Web/API/Document/readyState"><code>Document.readyState</code></a> passe à <code>"interactive"</code> et que l'événement <a href="/fr/docs/Web/API/Document/readystatechange_event"><code>readystatechange</code></a> correspondant est lancé.</p>
+L'ancienne propriété en lecture seule **`domInteractive`** retourne un `unsigned long long` représentant le moment, en millisecondes depuis l'époque UNIX, où le parseur a terminé son travail sur le document principal, c'est-à-dire lorsque son [`Document.readyState`](/fr/docs/Web/API/Document/readyState) passe à `"interactive"` et que l'événement [`readystatechange`](/fr/docs/Web/API/Document/readystatechange_event) correspondant est lancé.
 
-<p>Cette propriété peut être utilisée pour mesurer la vitesse de chargement des sites Web que les utilisateurs <em>ressentent</em>. Néanmoins, il y a quelques mises en garde qui se produisent si des scripts bloquent le rendu et ne sont pas chargés de manière asynchrone ou avec des polices Web personnalisées. <a href="http://www.stevesouders.com/blog/2015/08/07/dominteractive-is-it-really/">Vérifiez si vous êtes dans l'un de ces cas</a> avant d'utiliser cette propriété comme un proxy pour l'expérience utilisateur de la vitesse de chargement d'un site Web.</p>
+Cette propriété peut être utilisée pour mesurer la vitesse de chargement des sites Web que les utilisateurs _ressentent_. Néanmoins, il y a quelques mises en garde qui se produisent si des scripts bloquent le rendu et ne sont pas chargés de manière asynchrone ou avec des polices Web personnalisées. [Vérifiez si vous êtes dans l'un de ces cas](http://www.stevesouders.com/blog/2015/08/07/dominteractive-is-it-really/) avant d'utiliser cette propriété comme un proxy pour l'expérience utilisateur de la vitesse de chargement d'un site Web.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">let <var>time</var> = <var>performanceTiming</var>.domInteractive;</pre>
+```js
+let time = performanceTiming.domInteractive;
+```
 
-<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('Navigation Timing', '#dom-performancetiming-dominteractive',
-        'PerformanceTiming.domInteractive')}}</td>
-      <td>{{Spec2('Navigation Timing')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                                                                                | Statut                                   | Commentaire          |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------- |
+| {{SpecName('Navigation Timing', '#dom-performancetiming-dominteractive',
+        'PerformanceTiming.domInteractive')}} | {{Spec2('Navigation Timing')}} | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.PerformanceTiming.domInteractive")}}</p>
+{{Compat("api.PerformanceTiming.domInteractive")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>L'interface <a href="/fr/docs/Web/API/PerformanceTiming"><code>PerformanceTiming</code></a> à laquelle elle appartient.</li>
-  <li>L'article « <a href="http://www.stevesouders.com/blog/2015/08/07/dominteractive-is-it-really/">
-    domInteractive: is it? really?</a> <small>(en)</small> » explique quand vous pouvez utiliser cette propriété comme un proxy pour l'expérience utilisateur du chargement d'un site Web.</li>
-</ul>
+- L'interface [`PerformanceTiming`](/fr/docs/Web/API/PerformanceTiming) à laquelle elle appartient.
+- L'article « [domInteractive: is it? really?](http://www.stevesouders.com/blog/2015/08/07/dominteractive-is-it-really/) (en) » explique quand vous pouvez utiliser cette propriété comme un proxy pour l'expérience utilisateur du chargement d'un site Web.
diff --git a/files/fr/web/api/performancetiming/domloading/index.md b/files/fr/web/api/performancetiming/domloading/index.md
index c8ebdceeea..bbdb50cd07 100644
--- a/files/fr/web/api/performancetiming/domloading/index.md
+++ b/files/fr/web/api/performancetiming/domloading/index.md
@@ -14,44 +14,29 @@ tags:
   - domLoading
 translation_of: Web/API/PerformanceTiming/domLoading
 ---
-<p>{{APIRef("Navigation Timing")}}</p>
+{{APIRef("Navigation Timing")}}
 
-<div class="warning">
-  <p><strong>Attention :</strong> Cette interface est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2</a>. Veuillez utiliser l'interface <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a> à la place.</p>
-</div>
+> **Attention :** Cette interface est dépréciée dans la spécification [Navigation Timing Level 2](https://w3c.github.io/navigation-timing/#obsolete). Veuillez utiliser l'interface [`PerformanceNavigationTiming`](/fr/docs/Web/API/PerformanceNavigationTiming) à la place.
 
-<p>L'ancienne propriété en lecture seule <code><strong>domLoading</code></strong> retourne un <code>unsigned long long</code> représentant le moment, en millisecondes depuis l'époque UNIX, où le parseur a commencé son travail, c'est-à-dire lorsque son <a href="/fr/docs/Web/API/Document/readyState"><code>Document.readyState</code></a> passe à <code>"loading"</code> et que l'événement <a href="/fr/docs/Web/API/Document/readystatechange_event"><code>readystatechange</code></a> correspondant est déclenché.</p>
+L'ancienne propriété en lecture seule **`domLoading`** retourne un `unsigned long long` représentant le moment, en millisecondes depuis l'époque UNIX, où le parseur a commencé son travail, c'est-à-dire lorsque son [`Document.readyState`](/fr/docs/Web/API/Document/readyState) passe à `"loading"` et que l'événement [`readystatechange`](/fr/docs/Web/API/Document/readystatechange_event) correspondant est déclenché.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">let <var>time</var> = <var>performanceTiming</var>.domLoading;</pre>
+```js
+let time = performanceTiming.domLoading;
+```
 
-<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('Navigation Timing', '#dom-performancetiming-domloading',
-        'PerformanceTiming.domLoading')}}</td>
-      <td>{{Spec2('Navigation Timing')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                                                                        | Statut                                   | Commentaire          |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('Navigation Timing', '#dom-performancetiming-domloading',
+        'PerformanceTiming.domLoading')}} | {{Spec2('Navigation Timing')}} | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.PerformanceTiming.domLoading")}}</p>
+{{Compat("api.PerformanceTiming.domLoading")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>L'interface <a href="/fr/docs/Web/API/PerformanceTiming"><code>PerformanceTiming</code></a> à laquelle elle appartient.</li>
-</ul>
+- L'interface [`PerformanceTiming`](/fr/docs/Web/API/PerformanceTiming) à laquelle elle appartient.
diff --git a/files/fr/web/api/performancetiming/fetchstart/index.md b/files/fr/web/api/performancetiming/fetchstart/index.md
index 78701f3386..5cb5cbfdf1 100644
--- a/files/fr/web/api/performancetiming/fetchstart/index.md
+++ b/files/fr/web/api/performancetiming/fetchstart/index.md
@@ -14,44 +14,29 @@ tags:
   - fetchStart
 translation_of: Web/API/PerformanceTiming/fetchStart
 ---
-<p>{{APIRef("Navigation Timing")}}</p>
+{{APIRef("Navigation Timing")}}
 
-<div class="warning">
-  <p><strong>Attention :</strong> Cette interface est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2</a>. Veuillez utiliser l'interface <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a> à la place.</p>
-</div>
+> **Attention :** Cette interface est dépréciée dans la spécification [Navigation Timing Level 2](https://w3c.github.io/navigation-timing/#obsolete). Veuillez utiliser l'interface [`PerformanceNavigationTiming`](/fr/docs/Web/API/PerformanceNavigationTiming) à la place.
 
-<p>L'ancienne propriété en lecture seule <code><strong>fetchStart</code></strong> retourne un <code>unsigned long long</code> représentant le moment, en millisecondes depuis l'époque UNIX, où le navigateur est prêt à aller chercher le document en utilisant une requête HTTP. Ce moment est <em>avant</em> la vérification de tout cache d'application.</p>
+L'ancienne propriété en lecture seule **`fetchStart`** retourne un `unsigned long long` représentant le moment, en millisecondes depuis l'époque UNIX, où le navigateur est prêt à aller chercher le document en utilisant une requête HTTP. Ce moment est _avant_ la vérification de tout cache d'application.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">let <var>time</var> = <var>performance.timing</var>.fetchStart;</pre>
+```js
+let time = performance.timing.fetchStart;
+```
 
-<h2 id="Specifications">Specifications</h2>
+## Specifications
 
-<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('Navigation Timing', '#dom-performancetiming-fetchstart',
-        'PerformanceTiming.fetchStart')}}</td>
-      <td>{{Spec2('Navigation Timing')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                                                                        | Statut                                   | Commentaire          |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('Navigation Timing', '#dom-performancetiming-fetchstart',
+        'PerformanceTiming.fetchStart')}} | {{Spec2('Navigation Timing')}} | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.PerformanceTiming.fetchStart")}}</p>
+{{Compat("api.PerformanceTiming.fetchStart")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>L'interface <a href="/fr/docs/Web/API/PerformanceTiming"><code>PerformanceTiming</code></a> à laquelle elle appartient.</li>
-</ul>
+- L'interface [`PerformanceTiming`](/fr/docs/Web/API/PerformanceTiming) à laquelle elle appartient.
diff --git a/files/fr/web/api/performancetiming/index.md b/files/fr/web/api/performancetiming/index.md
index 7da667936a..9609132724 100644
--- a/files/fr/web/api/performancetiming/index.md
+++ b/files/fr/web/api/performancetiming/index.md
@@ -15,103 +15,82 @@ tags:
   - legacy
 translation_of: Web/API/PerformanceTiming
 ---
-<div>{{APIRef("Navigation Timing")}}</div>
-
-<div class="warning">
-  <p><strong>Attention :</strong> Cette interface est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2</a>. Veuillez utiliser l'interface <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a> à la place.</p>
-</div>
-
-<p>L'interface <strong><code>PerformanceTiming</code></strong> est une interface héritée conservée pour la rétrocompatibilité et contient des propriétés qui offrent des informations sur la chronologie des performances pour divers événements qui se produisent pendant le chargement et l'utilisation de la page actuelle. Vous obtenez un objet <code>PerformanceTiming</code> décrivant votre page en utilisant la propriété <a href="/fr/docs/Web/API/Performance/timing"><code>window.performance.timing</code></a>.</p>
-
-<h2 id="Properties">Propriétés</h2>
-
-<p><em>L'interface <code>PerformanceTiming</code> n'hérite d'aucune propriété.</em></p>
-
-<p>Ces propriétés décrivent chacune l'heure à laquelle un point particulier du processus de chargement de la page a été atteint. Certaines correspondent à des événements DOM, d'autres décrivent l'heure à laquelle les opérations internes du navigateur ont eu lieu.</p>
-
-<p>Chaque heure est fournie sous la forme d'une <a href="https://fr.wikipedia.org/wiki/Heure_Unix">heure Unix</a> (<code>unsigned long long</code>) représentant le moment, en millisecondes depuis l'époque UNIX.</p>
-
-<p>Ces propriétés sont énumérées dans l'ordre dans lequel elles apparaissent au cours du processus de navigation.</p>
-
-<dl>
-  <dt><a href="/fr/docs/Web/API/PerformanceTiming/navigationStart"><code>PerformanceTiming.navigationStart</code></a> {{readonlyInline}} {{deprecated_inline}}</dt>
-  <dd>Lorsque le prompt de déchargement se termine sur le document précédent dans le même contexte de navigation. S'il n'y a pas de document précédent, cette valeur sera la même que <code>PerformanceTiming.fetchStart</code>.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceTiming/unloadEventStart"><code>PerformanceTiming.unloadEventStart</code></a> {{readonlyInline}} {{deprecated_inline}}</dt>
-  <dd>Lorsque l'événement <a href="/fr/docs/Web/API/Window/unload_event"><code>unload</code></a> a été lancé, indiquant l'heure à laquelle le document précédent dans la fenêtre a commencé à se décharger. S'il n'y a pas de document précédent, ou si le document précédent ou l'une des redirections nécessaires n'est pas de la même origine, la valeur retournée est <code>0</code>.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceTiming/unloadEventEnd"><code>PerformanceTiming.unloadEventEnd</code></a> {{readonlyInline}} {{deprecated_inline}}</dt>
-  <dd>Lorsque le gestionnaire d'événement <a href="/fr/docs/Web/API/Window/unload_event"><code>unload</code></a> se termine. S'il n'y a pas de document précédent, ou si le document précédent, ou l'une des redirections nécessaires, n'est pas de la même origine, la valeur retournée est <code>0</code>.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceTiming/redirectStart"><code>PerformanceTiming.redirectStart</code></a> {{readonlyInline}} {{deprecated_inline}}</dt>
-  <dd>Quand la première redirection HTTP commence. S'il n'y a pas de redirection, ou si l'une des redirections n'est pas de la même origine, la valeur retournée est <code>0</code>.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceTiming/redirectEnd"><code>PerformanceTiming.redirectEnd</code></a> {{readonlyInline}} {{deprecated_inline}}</dt>
-  <dd>Lorsque la dernière redirection HTTP est terminée, c'est-à-dire lorsque le dernier octet de la réponse HTTP a été reçu. S'il n'y a pas de redirection, ou si l'une des redirections n'a pas la même origine, la valeur retournée est <code>0</code>.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceTiming/fetchStart"><code>PerformanceTiming.fetchStart</code></a> {{readonlyInline}} {{deprecated_inline}}</dt>
-  <dd>Lorsque le navigateur est prêt à récupérer le document à l'aide d'une requête HTTP. Ce moment est <em>avant</em> la vérification de tout cache d'application.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceTiming/domainLookupStart"><code>PerformanceTiming.domainLookupStart</code></a> {{readonlyInline}} {{deprecated_inline}}</dt>
-  <dd>Lorsque la recherche du domaine commence. Si une connexion persistante est utilisée, ou si les informations sont stockées dans un cache ou une ressource locale, la valeur sera la même que <code>PerformanceTiming.fetchStart</code>.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceTiming/domainLookupEnd"><code>PerformanceTiming.domainLookupEnd</code></a> {{readonlyInline}} {{deprecated_inline}}</dt>
-  <dd>Lorsque la recherche du domaine est terminée. Si une connexion persistante est utilisée, ou si les informations sont stockées dans un cache ou une ressource locale, la valeur sera la même que <code>PerformanceTiming.fetchStart</code>.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceTiming/connectStart"><code>PerformanceTiming.connectStart</code></a> {{readonlyInline}} {{deprecated_inline}}</dt>
-  <dd>Lorsque la demande d'ouverture d'une connexion est envoyée au réseau. Si la couche de transport signale une erreur et que l'établissement de la connexion est relancé, la dernière heure de début d'établissement de la connexion est donnée. Si une connexion persistante est utilisée, la valeur sera la même que <code>PerformanceTiming.fetchStart</code>.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceTiming/connectEnd"><code>PerformanceTiming.connectEnd</code></a> {{readonlyInline}} {{deprecated_inline}}</dt>
-  <dd>Lorsque la connexion est ouverte sur le réseau. Si la couche transport signale une erreur et que l'établissement de la connexion est relancé, l'heure de fin du dernier établissement de la connexion est donnée. Si une connexion persistante est utilisée, la valeur sera la même que <code>PerformanceTiming.fetchStart</code>. Une connexion est considérée comme ouverte lorsque toute poignée de main de connexion sécurisée, ou authentification SOCKS, est terminée.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceTiming/secureConnectionStart"><code>PerformanceTiming.secureConnectionStart</code></a> {{readonlyInline}} {{deprecated_inline}}</dt>
-  <dd>Lorsque le handshake de connexion sécurisée commence. Si aucune connexion de ce type n'est demandée, il retourne <code>0</code>.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceTiming/requestStart"><code>PerformanceTiming.requestStart</code></a> {{readonlyInline}} {{deprecated_inline}}</dt>
-  <dd>Lorsque le navigateur a envoyé la requête pour obtenir le document réel, depuis le serveur ou depuis un cache. Si la couche de transport échoue après le début de la demande et que la connexion est rouverte, cette propriété sera définie sur l'heure correspondant à la nouvelle demande.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceTiming/responseStart"><code>PerformanceTiming.responseStart</code></a> {{readonlyInline}} {{deprecated_inline}}</dt>
-  <dd>Lorsque le navigateur a reçu le premier octet de la réponse, du serveur ou d'un cache, ou d'une ressource locale.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceTiming/responseEnd"><code>PerformanceTiming.responseEnd</code></a> {{readonlyInline}} {{deprecated_inline}}</dt>
-  <dd>Lorsque le navigateur a reçu le dernier octet de la réponse, ou lorsque la connexion est fermée si cela s'est produit en premier, depuis le serveur, le cache ou une ressource locale.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceTiming/domLoading"><code>PerformanceTiming.domLoading</code></a> {{readonlyInline}} {{deprecated_inline}}</dt>
-  <dd>Lorsque l'analyseur syntaxique a commencé son travail, c'est-à-dire lorsque son <a href="/fr/docs/Web/API/Document/readyState"><code>Document.readyState</code></a> passe à <code>'loading'</code> et que l'événement <a href="/fr/docs/Web/API/Document/readystatechange_event"><code>readystatechange</code></a> correspondant est déclenché.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceTiming/domInteractive"><code>PerformanceTiming.domInteractive</code></a> {{readonlyInline}} {{deprecated_inline}}</dt>
-  <dd>Lorsque l'analyseur syntaxique a terminé son travail sur le document principal, c'est à ce moment que son <a href="/fr/docs/Web/API/Document/readyState"><code>Document.readyState</code></a> passe à <code>'interactive'</code> et que l'événement <a href="/fr/docs/Web/API/Document/readystatechange_event"><code>readystatechange</code></a> correspondant est lancé.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceTiming/domContentLoadedEventStart"><code>PerformanceTiming.domContentLoadedEventStart</code></a> {{readonlyInline}} {{deprecated_inline}}</dt>
-  <dd>Juste avant que l'analyseur syntaxique envoie l'événement <a href="/fr/docs/Web/API/Document/DOMContentLoaded_event"><code>DOMContentLoaded</code></a>, c'est-à-dire juste après que tous les scripts qui doivent être exécutés juste après l'analyse syntaxique aient été exécutés.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceTiming/domContentLoadedEventEnd"><code>PerformanceTiming.domContentLoadedEventEnd</code></a> {{readonlyInline}} {{deprecated_inline}}</dt>
-  <dd>C'est-à-dire juste après que tous les scripts qui doivent être exécutés dès que possible, dans l'ordre ou non, aient été exécutés.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceTiming/domComplete"><code>PerformanceTiming.domComplete</code></a> {{readonlyInline}} {{deprecated_inline}}</dt>
-  <dd>Lorsque l'analyseur syntaxique a terminé son travail sur le document principal, c'est-à-dire lorsque son <a href="/fr/docs/Web/API/Document/readyState"><code>Document.readyState</code></a> passe à <code>'complete'</code> et que l'événement <a href="/fr/docs/Web/API/Document/readystatechange_event"><code>readystatechange</code></a> correspondant est lancé.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceTiming/loadEventStart"><code>PerformanceTiming.loadEventStart</code></a> {{readonlyInline}} {{deprecated_inline}}</dt>
-  <dd>Quand l'événement <a href="/fr/docs/Web/API/Window/load_event"><code>load</code></a> a été envoyé pour le document actuel. Si cet événement n'a pas encore été envoyé, il retourne <code>0</code>.</dd>
-  <dt><a href="/fr/docs/Web/API/PerformanceTiming/loadEventEnd"><code>PerformanceTiming.loadEventEnd</code></a> {{readonlyInline}} {{deprecated_inline}}</dt>
-  <dd>Lorsque le gestionnaire d'événement <a href="/fr/docs/Web/API/Window/load_event"><code>load</code></a> s'est terminé, c'est-à-dire lorsque l'événement de chargement est terminé. Si cet événement n'a pas encore été envoyé, ou n'est pas encore terminé, il retourne <code>0</code>.</dd>
-</dl>
-
-<h2 id="Methods">Méthodes</h2>
-
-<p><em>L'interface <code>PerformanceTiming</code> n'hérite d'aucune méthode.</em></p>
-
-<dl>
-  <dt><a href="/fr/docs/Web/API/PerformanceTiming/toJSON"><code>PerformanceTiming.toJSON()</code></a> {{non-Standard_Inline}} {{deprecated_inline}}</dt>
-  <dd>Retourne un <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/JSON">objet JSON</a> représentant cet objet <code>PerformanceTiming</code>.</dd>
-</dl>
-
-<h2 id="Specifications">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('Navigation Timing', '#performancetiming', 'PerformanceTiming')}}</td>
-      <td>{{Spec2('Navigation Timing')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.PerformanceTiming")}}</p>
-
-<h2 id="See_also">Voir aussi</h2>
-
-<ul>
-  <li>La propriété <a href="/fr/docs/Web/API/Performance/timing"><code>Performance.timing</code></a> qui crée un tel objet.</li>
-</ul>
+{{APIRef("Navigation Timing")}}
+
+> **Attention :** Cette interface est dépréciée dans la spécification [Navigation Timing Level 2](https://w3c.github.io/navigation-timing/#obsolete). Veuillez utiliser l'interface [`PerformanceNavigationTiming`](/fr/docs/Web/API/PerformanceNavigationTiming) à la place.
+
+L'interface **`PerformanceTiming`** est une interface héritée conservée pour la rétrocompatibilité et contient des propriétés qui offrent des informations sur la chronologie des performances pour divers événements qui se produisent pendant le chargement et l'utilisation de la page actuelle. Vous obtenez un objet `PerformanceTiming` décrivant votre page en utilisant la propriété [`window.performance.timing`](/fr/docs/Web/API/Performance/timing).
+
+## Propriétés
+
+_L'interface `PerformanceTiming` n'hérite d'aucune propriété._
+
+Ces propriétés décrivent chacune l'heure à laquelle un point particulier du processus de chargement de la page a été atteint. Certaines correspondent à des événements DOM, d'autres décrivent l'heure à laquelle les opérations internes du navigateur ont eu lieu.
+
+Chaque heure est fournie sous la forme d'une [heure Unix](https://fr.wikipedia.org/wiki/Heure_Unix) (`unsigned long long`) représentant le moment, en millisecondes depuis l'époque UNIX.
+
+Ces propriétés sont énumérées dans l'ordre dans lequel elles apparaissent au cours du processus de navigation.
+
+- [`PerformanceTiming.navigationStart`](/fr/docs/Web/API/PerformanceTiming/navigationStart) {{readonlyInline}} {{deprecated_inline}}
+  - : Lorsque le prompt de déchargement se termine sur le document précédent dans le même contexte de navigation. S'il n'y a pas de document précédent, cette valeur sera la même que `PerformanceTiming.fetchStart`.
+- [`PerformanceTiming.unloadEventStart`](/fr/docs/Web/API/PerformanceTiming/unloadEventStart) {{readonlyInline}} {{deprecated_inline}}
+  - : Lorsque l'événement [`unload`](/fr/docs/Web/API/Window/unload_event) a été lancé, indiquant l'heure à laquelle le document précédent dans la fenêtre a commencé à se décharger. S'il n'y a pas de document précédent, ou si le document précédent ou l'une des redirections nécessaires n'est pas de la même origine, la valeur retournée est `0`.
+- [`PerformanceTiming.unloadEventEnd`](/fr/docs/Web/API/PerformanceTiming/unloadEventEnd) {{readonlyInline}} {{deprecated_inline}}
+  - : Lorsque le gestionnaire d'événement [`unload`](/fr/docs/Web/API/Window/unload_event) se termine. S'il n'y a pas de document précédent, ou si le document précédent, ou l'une des redirections nécessaires, n'est pas de la même origine, la valeur retournée est `0`.
+- [`PerformanceTiming.redirectStart`](/fr/docs/Web/API/PerformanceTiming/redirectStart) {{readonlyInline}} {{deprecated_inline}}
+  - : Quand la première redirection HTTP commence. S'il n'y a pas de redirection, ou si l'une des redirections n'est pas de la même origine, la valeur retournée est `0`.
+- [`PerformanceTiming.redirectEnd`](/fr/docs/Web/API/PerformanceTiming/redirectEnd) {{readonlyInline}} {{deprecated_inline}}
+  - : Lorsque la dernière redirection HTTP est terminée, c'est-à-dire lorsque le dernier octet de la réponse HTTP a été reçu. S'il n'y a pas de redirection, ou si l'une des redirections n'a pas la même origine, la valeur retournée est `0`.
+- [`PerformanceTiming.fetchStart`](/fr/docs/Web/API/PerformanceTiming/fetchStart) {{readonlyInline}} {{deprecated_inline}}
+  - : Lorsque le navigateur est prêt à récupérer le document à l'aide d'une requête HTTP. Ce moment est _avant_ la vérification de tout cache d'application.
+- [`PerformanceTiming.domainLookupStart`](/fr/docs/Web/API/PerformanceTiming/domainLookupStart) {{readonlyInline}} {{deprecated_inline}}
+  - : Lorsque la recherche du domaine commence. Si une connexion persistante est utilisée, ou si les informations sont stockées dans un cache ou une ressource locale, la valeur sera la même que `PerformanceTiming.fetchStart`.
+- [`PerformanceTiming.domainLookupEnd`](/fr/docs/Web/API/PerformanceTiming/domainLookupEnd) {{readonlyInline}} {{deprecated_inline}}
+  - : Lorsque la recherche du domaine est terminée. Si une connexion persistante est utilisée, ou si les informations sont stockées dans un cache ou une ressource locale, la valeur sera la même que `PerformanceTiming.fetchStart`.
+- [`PerformanceTiming.connectStart`](/fr/docs/Web/API/PerformanceTiming/connectStart) {{readonlyInline}} {{deprecated_inline}}
+  - : Lorsque la demande d'ouverture d'une connexion est envoyée au réseau. Si la couche de transport signale une erreur et que l'établissement de la connexion est relancé, la dernière heure de début d'établissement de la connexion est donnée. Si une connexion persistante est utilisée, la valeur sera la même que `PerformanceTiming.fetchStart`.
+- [`PerformanceTiming.connectEnd`](/fr/docs/Web/API/PerformanceTiming/connectEnd) {{readonlyInline}} {{deprecated_inline}}
+  - : Lorsque la connexion est ouverte sur le réseau. Si la couche transport signale une erreur et que l'établissement de la connexion est relancé, l'heure de fin du dernier établissement de la connexion est donnée. Si une connexion persistante est utilisée, la valeur sera la même que `PerformanceTiming.fetchStart`. Une connexion est considérée comme ouverte lorsque toute poignée de main de connexion sécurisée, ou authentification SOCKS, est terminée.
+- [`PerformanceTiming.secureConnectionStart`](/fr/docs/Web/API/PerformanceTiming/secureConnectionStart) {{readonlyInline}} {{deprecated_inline}}
+  - : Lorsque le handshake de connexion sécurisée commence. Si aucune connexion de ce type n'est demandée, il retourne `0`.
+- [`PerformanceTiming.requestStart`](/fr/docs/Web/API/PerformanceTiming/requestStart) {{readonlyInline}} {{deprecated_inline}}
+  - : Lorsque le navigateur a envoyé la requête pour obtenir le document réel, depuis le serveur ou depuis un cache. Si la couche de transport échoue après le début de la demande et que la connexion est rouverte, cette propriété sera définie sur l'heure correspondant à la nouvelle demande.
+- [`PerformanceTiming.responseStart`](/fr/docs/Web/API/PerformanceTiming/responseStart) {{readonlyInline}} {{deprecated_inline}}
+  - : Lorsque le navigateur a reçu le premier octet de la réponse, du serveur ou d'un cache, ou d'une ressource locale.
+- [`PerformanceTiming.responseEnd`](/fr/docs/Web/API/PerformanceTiming/responseEnd) {{readonlyInline}} {{deprecated_inline}}
+  - : Lorsque le navigateur a reçu le dernier octet de la réponse, ou lorsque la connexion est fermée si cela s'est produit en premier, depuis le serveur, le cache ou une ressource locale.
+- [`PerformanceTiming.domLoading`](/fr/docs/Web/API/PerformanceTiming/domLoading) {{readonlyInline}} {{deprecated_inline}}
+  - : Lorsque l'analyseur syntaxique a commencé son travail, c'est-à-dire lorsque son [`Document.readyState`](/fr/docs/Web/API/Document/readyState) passe à `'loading'` et que l'événement [`readystatechange`](/fr/docs/Web/API/Document/readystatechange_event) correspondant est déclenché.
+- [`PerformanceTiming.domInteractive`](/fr/docs/Web/API/PerformanceTiming/domInteractive) {{readonlyInline}} {{deprecated_inline}}
+  - : Lorsque l'analyseur syntaxique a terminé son travail sur le document principal, c'est à ce moment que son [`Document.readyState`](/fr/docs/Web/API/Document/readyState) passe à `'interactive'` et que l'événement [`readystatechange`](/fr/docs/Web/API/Document/readystatechange_event) correspondant est lancé.
+- [`PerformanceTiming.domContentLoadedEventStart`](/fr/docs/Web/API/PerformanceTiming/domContentLoadedEventStart) {{readonlyInline}} {{deprecated_inline}}
+  - : Juste avant que l'analyseur syntaxique envoie l'événement [`DOMContentLoaded`](/fr/docs/Web/API/Document/DOMContentLoaded_event), c'est-à-dire juste après que tous les scripts qui doivent être exécutés juste après l'analyse syntaxique aient été exécutés.
+- [`PerformanceTiming.domContentLoadedEventEnd`](/fr/docs/Web/API/PerformanceTiming/domContentLoadedEventEnd) {{readonlyInline}} {{deprecated_inline}}
+  - : C'est-à-dire juste après que tous les scripts qui doivent être exécutés dès que possible, dans l'ordre ou non, aient été exécutés.
+- [`PerformanceTiming.domComplete`](/fr/docs/Web/API/PerformanceTiming/domComplete) {{readonlyInline}} {{deprecated_inline}}
+  - : Lorsque l'analyseur syntaxique a terminé son travail sur le document principal, c'est-à-dire lorsque son [`Document.readyState`](/fr/docs/Web/API/Document/readyState) passe à `'complete'` et que l'événement [`readystatechange`](/fr/docs/Web/API/Document/readystatechange_event) correspondant est lancé.
+- [`PerformanceTiming.loadEventStart`](/fr/docs/Web/API/PerformanceTiming/loadEventStart) {{readonlyInline}} {{deprecated_inline}}
+  - : Quand l'événement [`load`](/fr/docs/Web/API/Window/load_event) a été envoyé pour le document actuel. Si cet événement n'a pas encore été envoyé, il retourne `0`.
+- [`PerformanceTiming.loadEventEnd`](/fr/docs/Web/API/PerformanceTiming/loadEventEnd) {{readonlyInline}} {{deprecated_inline}}
+  - : Lorsque le gestionnaire d'événement [`load`](/fr/docs/Web/API/Window/load_event) s'est terminé, c'est-à-dire lorsque l'événement de chargement est terminé. Si cet événement n'a pas encore été envoyé, ou n'est pas encore terminé, il retourne `0`.
+
+## Méthodes
+
+_L'interface `PerformanceTiming` n'hérite d'aucune méthode._
+
+- [`PerformanceTiming.toJSON()`](/fr/docs/Web/API/PerformanceTiming/toJSON) {{non-Standard_Inline}} {{deprecated_inline}}
+  - : Retourne un [objet JSON](/fr/docs/Web/JavaScript/Reference/Global_Objects/JSON) représentant cet objet `PerformanceTiming`.
+
+## Spécifications
+
+| Spécification                                                                                        | Statut                                   | Commentaire          |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('Navigation Timing', '#performancetiming', 'PerformanceTiming')}} | {{Spec2('Navigation Timing')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.PerformanceTiming")}}
+
+## Voir aussi
+
+- La propriété [`Performance.timing`](/fr/docs/Web/API/Performance/timing) qui crée un tel objet.
diff --git a/files/fr/web/api/performancetiming/loadeventend/index.md b/files/fr/web/api/performancetiming/loadeventend/index.md
index e7ee2a6989..0d3bf1bcbc 100644
--- a/files/fr/web/api/performancetiming/loadeventend/index.md
+++ b/files/fr/web/api/performancetiming/loadeventend/index.md
@@ -14,44 +14,29 @@ tags:
   - loadEventEnd
 translation_of: Web/API/PerformanceTiming/loadEventEnd
 ---
-<p>{{APIRef("Navigation Timing")}}</p>
+{{APIRef("Navigation Timing")}}
 
-<div class="warning">
-  <p><strong>Attention :</strong> Cette interface est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2</a>. Veuillez utiliser la propriété <a href="/fr/docs/Web/API/PerformanceNavigationTiming/loadEventEnd"><code>PerformanceNavigationTiming.loadEventEnd</code></a> de l'interface <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a> à la place.</p>
-</div>
+> **Attention :** Cette interface est dépréciée dans la spécification [Navigation Timing Level 2](https://w3c.github.io/navigation-timing/#obsolete). Veuillez utiliser la propriété [`PerformanceNavigationTiming.loadEventEnd`](/fr/docs/Web/API/PerformanceNavigationTiming/loadEventEnd) de l'interface [`PerformanceNavigationTiming`](/fr/docs/Web/API/PerformanceNavigationTiming) à la place.
 
-<p>L'ancienne propriété en lecture seule <code><strong>loadEventEnd</code></strong> retourne un <code>unsigned long long</code> représentant le moment, en millisecondes depuis l'époque UNIX, où le gestionnaire d'événement <a href="/fr/docs/Web/API/Document/load_event"><code>load</code></a> s'est terminé, c'est-à-dire lorsque l'événement de chargement est terminé. Si cet événement n'a pas encore été envoyé, ou n'est pas encore terminé, il retourne <code>0</code>.</p>
+L'ancienne propriété en lecture seule **`loadEventEnd`** retourne un `unsigned long long` représentant le moment, en millisecondes depuis l'époque UNIX, où le gestionnaire d'événement [`load`](/fr/docs/Web/API/Document/load_event) s'est terminé, c'est-à-dire lorsque l'événement de chargement est terminé. Si cet événement n'a pas encore été envoyé, ou n'est pas encore terminé, il retourne `0`.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">let <var>time</var> = <var>performanceTiming</var>.loadEventEnd;</pre>
+```js
+let time = performanceTiming.loadEventEnd;
+```
 
-<h2 id="Specifications">Specifications</h2>
+## Specifications
 
-<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('Navigation Timing', '#dom-performancetiming-loadedeventend',
-        'PerformanceTiming.loadEventEnd')}}</td>
-      <td>{{Spec2('Navigation Timing')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                                                                                | Statut                                   | Commentaire          |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------- |
+| {{SpecName('Navigation Timing', '#dom-performancetiming-loadedeventend',
+        'PerformanceTiming.loadEventEnd')}} | {{Spec2('Navigation Timing')}} | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.PerformanceTiming.loadEventEnd")}}</p>
+{{Compat("api.PerformanceTiming.loadEventEnd")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>L'interface <a href="/fr/docs/Web/API/PerformanceTiming"><code>PerformanceTiming</code></a> à laquelle elle appartient.</li>
-</ul>
+- L'interface [`PerformanceTiming`](/fr/docs/Web/API/PerformanceTiming) à laquelle elle appartient.
diff --git a/files/fr/web/api/performancetiming/loadeventstart/index.md b/files/fr/web/api/performancetiming/loadeventstart/index.md
index ca6d2dd5c7..3c5fcc9903 100644
--- a/files/fr/web/api/performancetiming/loadeventstart/index.md
+++ b/files/fr/web/api/performancetiming/loadeventstart/index.md
@@ -14,44 +14,29 @@ tags:
   - loadEventStart
 translation_of: Web/API/PerformanceTiming/loadEventStart
 ---
-<p>{{APIRef("Navigation Timing")}}</p>
+{{APIRef("Navigation Timing")}}
 
-<div class="warning">
-  <p><strong>Attention :</strong> Cette interface est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2</a>. Veuillez utiliser la propriété <a href="/fr/docs/Web/API/PerformanceNavigationTiming/loadEventStart"><code>PerformanceNavigationTiming.loadEventStart</code></a> de l'interface <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a> à la place.</p>
-</div>
+> **Attention :** Cette interface est dépréciée dans la spécification [Navigation Timing Level 2](https://w3c.github.io/navigation-timing/#obsolete). Veuillez utiliser la propriété [`PerformanceNavigationTiming.loadEventStart`](/fr/docs/Web/API/PerformanceNavigationTiming/loadEventStart) de l'interface [`PerformanceNavigationTiming`](/fr/docs/Web/API/PerformanceNavigationTiming) à la place.
 
-<p>L'ancienne propriété en lecture seule <code><strong>loadEventStart</code></strong> retourne un <code>unsigned long long</code> représentant le moment, en millisecondes depuis l'époque UNIX, où l'événement <a href="/fr/docs/Web/API/Document/load_event"><code>load</code></a> a été envoyé pour le document actuel. Si cet événement n'a pas encore été envoyé, il retourne <code>0</code>.</p>
+L'ancienne propriété en lecture seule **`loadEventStart`** retourne un `unsigned long long` représentant le moment, en millisecondes depuis l'époque UNIX, où l'événement [`load`](/fr/docs/Web/API/Document/load_event) a été envoyé pour le document actuel. Si cet événement n'a pas encore été envoyé, il retourne `0`.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">let <var>time</var> = <var>performanceTiming</var>.loadEventStart;</pre>
+```js
+let time = performanceTiming.loadEventStart;
+```
 
-<h2 id="Specifications">Specifications</h2>
+## Specifications
 
-<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('Navigation Timing', '#dom-performancetiming-loadeventstart',
-        'PerformanceTiming.loadEventStart')}}</td>
-      <td>{{Spec2('Navigation Timing')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                                                                                | Statut                                   | Commentaire          |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------- |
+| {{SpecName('Navigation Timing', '#dom-performancetiming-loadeventstart',
+        'PerformanceTiming.loadEventStart')}} | {{Spec2('Navigation Timing')}} | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.PerformanceTiming.loadEventStart")}}</p>
+{{Compat("api.PerformanceTiming.loadEventStart")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>L'interface <a href="/fr/docs/Web/API/PerformanceTiming"><code>PerformanceTiming</code></a> à laquelle elle appartient.</li>
-</ul>
+- L'interface [`PerformanceTiming`](/fr/docs/Web/API/PerformanceTiming) à laquelle elle appartient.
diff --git a/files/fr/web/api/performancetiming/navigationstart/index.md b/files/fr/web/api/performancetiming/navigationstart/index.md
index 76fce74f7b..97faab7af9 100644
--- a/files/fr/web/api/performancetiming/navigationstart/index.md
+++ b/files/fr/web/api/performancetiming/navigationstart/index.md
@@ -14,44 +14,29 @@ tags:
   - navigationStart
 translation_of: Web/API/PerformanceTiming/navigationStart
 ---
-<p>{{APIRef("Navigation Timing")}}</p>
+{{APIRef("Navigation Timing")}}
 
-<div class="warning">
-  <p><strong>Attention :</strong> Cette interface est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2</a>. Veuillez utiliser l'interface <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a> à la place.</p>
-</div>
+> **Attention :** Cette interface est dépréciée dans la spécification [Navigation Timing Level 2](https://w3c.github.io/navigation-timing/#obsolete). Veuillez utiliser l'interface [`PerformanceNavigationTiming`](/fr/docs/Web/API/PerformanceNavigationTiming) à la place.
 
-<p>L'ancienne propriété en lecture seule <code><strong>navigationStart</code></strong> retourne un <code>unsigned long long</code> représentant le moment, en millisecondes depuis l'époque UNIX, juste après la fin de l'invite de déchargement sur le document précédent dans le même contexte de navigation. S'il n'y a pas de document précédent, cette valeur sera la même que <a href="/fr/docs/Web/API/PerformanceTiming/fetchStart"><code>PerformanceTiming.fetchStart</code></a>.</p>
+L'ancienne propriété en lecture seule **`navigationStart`** retourne un `unsigned long long` représentant le moment, en millisecondes depuis l'époque UNIX, juste après la fin de l'invite de déchargement sur le document précédent dans le même contexte de navigation. S'il n'y a pas de document précédent, cette valeur sera la même que [`PerformanceTiming.fetchStart`](/fr/docs/Web/API/PerformanceTiming/fetchStart).
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">let <var>time</var> = <var>performanceTiming</var>.navigationStart;</pre>
+```js
+let time = performanceTiming.navigationStart;
+```
 
-<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('Navigation Timing', '#dom-performancetiming-navigationstart',
-        'PerformanceTiming.navigationStart')}}</td>
-      <td>{{Spec2('Navigation Timing')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                                                                                    | Statut                                   | Commentaire          |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('Navigation Timing', '#dom-performancetiming-navigationstart',
+        'PerformanceTiming.navigationStart')}} | {{Spec2('Navigation Timing')}} | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.PerformanceTiming.navigationStart")}}</p>
+{{Compat("api.PerformanceTiming.navigationStart")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>L'interface <a href="/fr/docs/Web/API/PerformanceTiming"><code>PerformanceTiming</code></a> à laquelle elle appartient.</li>
-</ul>
\ No newline at end of file
+- L'interface [`PerformanceTiming`](/fr/docs/Web/API/PerformanceTiming) à laquelle elle appartient.
diff --git a/files/fr/web/api/performancetiming/redirectend/index.md b/files/fr/web/api/performancetiming/redirectend/index.md
index fe8213d131..e69d45ddf7 100644
--- a/files/fr/web/api/performancetiming/redirectend/index.md
+++ b/files/fr/web/api/performancetiming/redirectend/index.md
@@ -14,44 +14,29 @@ tags:
   - redirectEnd
 translation_of: Web/API/PerformanceTiming/redirectEnd
 ---
-<p>{{APIRef("Navigation Timing")}}</p>
+{{APIRef("Navigation Timing")}}
 
-<div class="warning">
-  <p><strong>Attention :</strong> Cette interface est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2</a>. Veuillez utiliser l'interface <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a> à la place.</p>
-</div>
+> **Attention :** Cette interface est dépréciée dans la spécification [Navigation Timing Level 2](https://w3c.github.io/navigation-timing/#obsolete). Veuillez utiliser l'interface [`PerformanceNavigationTiming`](/fr/docs/Web/API/PerformanceNavigationTiming) à la place.
 
-<p>L'ancienne propriété en lecture seule <code><strong>redirectEnd</code></strong> retourne un <code>unsigned long long</code> représentant le moment, en millisecondes depuis l'époque UNIX, où la dernière redirection HTTP est terminée, c'est-à-dire lorsque le dernier octet de la réponse HTTP a été reçu. S'il n'y a pas de redirection, ou si l'une des redirections n'est pas de la même origine, la valeur renvoyée est <code>0</code>.</p>
+L'ancienne propriété en lecture seule **`redirectEnd`** retourne un `unsigned long long` représentant le moment, en millisecondes depuis l'époque UNIX, où la dernière redirection HTTP est terminée, c'est-à-dire lorsque le dernier octet de la réponse HTTP a été reçu. S'il n'y a pas de redirection, ou si l'une des redirections n'est pas de la même origine, la valeur renvoyée est `0`.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">let <var>time</var> = <var>performanceTiming</var>.redirectEnd;</pre>
+```js
+let time = performanceTiming.redirectEnd;
+```
 
-<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('Navigation Timing', '#dom-performancetiming-redirectend',
-        'PerformanceTiming.redirectEnd')}}</td>
-      <td>{{Spec2('Navigation Timing')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                                                                        | Statut                                   | Commentaire          |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('Navigation Timing', '#dom-performancetiming-redirectend',
+        'PerformanceTiming.redirectEnd')}} | {{Spec2('Navigation Timing')}} | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.PerformanceTiming.redirectEnd")}}</p>
+{{Compat("api.PerformanceTiming.redirectEnd")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>L'interface <a href="/fr/docs/Web/API/PerformanceTiming"><code>PerformanceTiming</code></a> à laquelle elle appartient.</li>
-</ul>
+- L'interface [`PerformanceTiming`](/fr/docs/Web/API/PerformanceTiming) à laquelle elle appartient.
diff --git a/files/fr/web/api/performancetiming/redirectstart/index.md b/files/fr/web/api/performancetiming/redirectstart/index.md
index fcea481323..6b48cbdb43 100644
--- a/files/fr/web/api/performancetiming/redirectstart/index.md
+++ b/files/fr/web/api/performancetiming/redirectstart/index.md
@@ -14,44 +14,29 @@ tags:
   - redirectStart
 translation_of: Web/API/PerformanceTiming/redirectStart
 ---
-<p>{{APIRef("Navigation Timing")}}</p>
+{{APIRef("Navigation Timing")}}
 
-<div class="warning">
-  <p><strong>Attention :</strong> Cette interface est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2</a>. Veuillez utiliser l'interface <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a> à la place.</p>
-</div>
+> **Attention :** Cette interface est dépréciée dans la spécification [Navigation Timing Level 2](https://w3c.github.io/navigation-timing/#obsolete). Veuillez utiliser l'interface [`PerformanceNavigationTiming`](/fr/docs/Web/API/PerformanceNavigationTiming) à la place.
 
-<p>L'ancienne propriété en lecture seule <code><strong>redirectStart</code></strong> retourne un <code>unsigned long long</code> représentant le moment, en millisecondes depuis l'époque UNIX, où la première redirection HTTP commence. S'il n'y a pas de redirection, ou si l'une des redirections n'est pas de la même origine, la valeur renvoyée est <code>0</code>.</p>
+L'ancienne propriété en lecture seule **`redirectStart`** retourne un `unsigned long long` représentant le moment, en millisecondes depuis l'époque UNIX, où la première redirection HTTP commence. S'il n'y a pas de redirection, ou si l'une des redirections n'est pas de la même origine, la valeur renvoyée est `0`.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">let <var>time</var> = <var>performanceTiming</var>.redirectStart;</pre>
+```js
+let time = performanceTiming.redirectStart;
+```
 
-<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('Navigation Timing', '#dom-performancetiming-redirectstart',
-        'PerformanceTiming.redirectStart')}}</td>
-      <td>{{Spec2('Navigation Timing')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                                                                                | Statut                                   | Commentaire          |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------- |
+| {{SpecName('Navigation Timing', '#dom-performancetiming-redirectstart',
+        'PerformanceTiming.redirectStart')}} | {{Spec2('Navigation Timing')}} | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.PerformanceTiming.redirectStart")}}</p>
+{{Compat("api.PerformanceTiming.redirectStart")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>L'interface <a href="/fr/docs/Web/API/PerformanceTiming"><code>PerformanceTiming</code></a> à laquelle elle appartient.</li>
-</ul>
+- L'interface [`PerformanceTiming`](/fr/docs/Web/API/PerformanceTiming) à laquelle elle appartient.
diff --git a/files/fr/web/api/performancetiming/requeststart/index.md b/files/fr/web/api/performancetiming/requeststart/index.md
index 653f3b8feb..30432e427f 100644
--- a/files/fr/web/api/performancetiming/requeststart/index.md
+++ b/files/fr/web/api/performancetiming/requeststart/index.md
@@ -14,44 +14,29 @@ tags:
   - requestStart
 translation_of: Web/API/PerformanceTiming/requestStart
 ---
-<p>{{ APIRef("PerformanceTiming") }}</p>
+{{ APIRef("PerformanceTiming") }}
 
-<div class="warning">
-  <p><strong>Attention :</strong> Cette interface est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2</a>. Veuillez utiliser l'interface <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a> à la place.</p>
-</div>
+> **Attention :** Cette interface est dépréciée dans la spécification [Navigation Timing Level 2](https://w3c.github.io/navigation-timing/#obsolete). Veuillez utiliser l'interface [`PerformanceNavigationTiming`](/fr/docs/Web/API/PerformanceNavigationTiming) à la place.
 
-<p>L'ancienne propriété en lecture seule <code><strong>requestStart</code></strong> retourne un <code>unsigned long long</code> représentant le moment, en millisecondes depuis l'époque UNIX, où le navigateur a envoyé la requête pour obtenir le document actuel, depuis le serveur ou depuis un cache. Si la couche de transport échoue après le début de la requête et que la connexion est rouverte, cette propriété sera définie sur le temps correspondant à la nouvelle requête.</p>
+L'ancienne propriété en lecture seule **`requestStart`** retourne un `unsigned long long` représentant le moment, en millisecondes depuis l'époque UNIX, où le navigateur a envoyé la requête pour obtenir le document actuel, depuis le serveur ou depuis un cache. Si la couche de transport échoue après le début de la requête et que la connexion est rouverte, cette propriété sera définie sur le temps correspondant à la nouvelle requête.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">let <var>time</var> = <var>performanceTiming</var>.requestStart;</pre>
+```js
+let time = performanceTiming.requestStart;
+```
 
-<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('Navigation Timing', '#dom-performancetiming-requeststart',
-        'PerformanceTiming.requestStart')}}</td>
-      <td>{{Spec2('Navigation Timing')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                                                                            | Statut                                   | Commentaire          |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('Navigation Timing', '#dom-performancetiming-requeststart',
+        'PerformanceTiming.requestStart')}} | {{Spec2('Navigation Timing')}} | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.PerformanceTiming.requestStart")}}</p>
+{{Compat("api.PerformanceTiming.requestStart")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>L'interface <a href="/fr/docs/Web/API/PerformanceTiming"><code>PerformanceTiming</code></a> à laquelle elle appartient.</li>
-</ul>
+- L'interface [`PerformanceTiming`](/fr/docs/Web/API/PerformanceTiming) à laquelle elle appartient.
diff --git a/files/fr/web/api/performancetiming/responseend/index.md b/files/fr/web/api/performancetiming/responseend/index.md
index ea05b6efd3..37314f2800 100644
--- a/files/fr/web/api/performancetiming/responseend/index.md
+++ b/files/fr/web/api/performancetiming/responseend/index.md
@@ -14,44 +14,29 @@ tags:
   - responseEnd
 translation_of: Web/API/PerformanceTiming/responseEnd
 ---
-<p>{{APIRef("Navigation Timing")}}</p>
+{{APIRef("Navigation Timing")}}
 
-<div class="warning">
-  <p><strong>Attention :</strong> Cette interface est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2</a>. Veuillez utiliser l'interface <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a> à la place.</p>
-</div>
+> **Attention :** Cette interface est dépréciée dans la spécification [Navigation Timing Level 2](https://w3c.github.io/navigation-timing/#obsolete). Veuillez utiliser l'interface [`PerformanceNavigationTiming`](/fr/docs/Web/API/PerformanceNavigationTiming) à la place.
 
-<p>L'ancienne propriété en lecture seule <code><strong>responseEnd</code></strong> retourne un <code>unsigned long long</code> représentant le moment, en millisecondes depuis l'époque UNIX, où le navigateur a reçu le dernier octet de la réponse, ou lorsque la connexion est fermée si cela s'est produit en premier, depuis le serveur à partir d'un cache ou d'une ressource locale.</p>
+L'ancienne propriété en lecture seule **`responseEnd`** retourne un `unsigned long long` représentant le moment, en millisecondes depuis l'époque UNIX, où le navigateur a reçu le dernier octet de la réponse, ou lorsque la connexion est fermée si cela s'est produit en premier, depuis le serveur à partir d'un cache ou d'une ressource locale.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">let <var>time</var> = <var>performanceTiming</var>.responseEnd;</pre>
+```js
+let time = performanceTiming.responseEnd;
+```
 
-<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('Navigation Timing', '#dom-performancetiming-responseEnd',
-        'PerformanceTiming.responseEnd')}}</td>
-      <td>{{Spec2('Navigation Timing')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                                                                        | Statut                                   | Commentaire          |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('Navigation Timing', '#dom-performancetiming-responseEnd',
+        'PerformanceTiming.responseEnd')}} | {{Spec2('Navigation Timing')}} | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.PerformanceTiming.responseEnd")}}</p>
+{{Compat("api.PerformanceTiming.responseEnd")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>L'interface <a href="/fr/docs/Web/API/PerformanceTiming"><code>PerformanceTiming</code></a> à laquelle elle appartient.</li>
-</ul>
+- L'interface [`PerformanceTiming`](/fr/docs/Web/API/PerformanceTiming) à laquelle elle appartient.
diff --git a/files/fr/web/api/performancetiming/responsestart/index.md b/files/fr/web/api/performancetiming/responsestart/index.md
index 67ac9329ea..c6cd851d99 100644
--- a/files/fr/web/api/performancetiming/responsestart/index.md
+++ b/files/fr/web/api/performancetiming/responsestart/index.md
@@ -14,44 +14,29 @@ tags:
   - responseStart
 translation_of: Web/API/PerformanceTiming/responseStart
 ---
-<p>{{APIRef("Navigation Timing")}}</p>
+{{APIRef("Navigation Timing")}}
 
-<div class="warning">
-  <p><strong>Attention :</strong> Cette interface est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2</a>. Veuillez utiliser l'interface <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a> à la place.</p>
-</div>
+> **Attention :** Cette interface est dépréciée dans la spécification [Navigation Timing Level 2](https://w3c.github.io/navigation-timing/#obsolete). Veuillez utiliser l'interface [`PerformanceNavigationTiming`](/fr/docs/Web/API/PerformanceNavigationTiming) à la place.
 
-<p>L'ancienne propriété en lecture seule <code><strong>responseStart</code></strong> retourne un <code>unsigned long long</code> représentant le moment (en millisecondes depuis l'époque UNIX) où le navigateur a reçu le premier octet de la réponse du serveur, du cache ou de la ressource locale.</p>
+L'ancienne propriété en lecture seule **`responseStart`** retourne un `unsigned long long` représentant le moment (en millisecondes depuis l'époque UNIX) où le navigateur a reçu le premier octet de la réponse du serveur, du cache ou de la ressource locale.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">let <var>time</var> = <var>performanceTiming</var>.responseStart;</pre>
+```js
+let time = performanceTiming.responseStart;
+```
 
-<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('Navigation Timing', '#dom-performancetiming-responsestart',
-        'PerformanceTiming.responseStart')}}</td>
-      <td>{{Spec2('Navigation Timing')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                                                                                | Statut                                   | Commentaire          |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------- |
+| {{SpecName('Navigation Timing', '#dom-performancetiming-responsestart',
+        'PerformanceTiming.responseStart')}} | {{Spec2('Navigation Timing')}} | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.PerformanceTiming.responseStart")}}</p>
+{{Compat("api.PerformanceTiming.responseStart")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>L'interface <a href="/fr/docs/Web/API/PerformanceTiming"><code>PerformanceTiming</code></a> à laquelle elle appartient.</li>
-</ul>
+- L'interface [`PerformanceTiming`](/fr/docs/Web/API/PerformanceTiming) à laquelle elle appartient.
diff --git a/files/fr/web/api/performancetiming/secureconnectionstart/index.md b/files/fr/web/api/performancetiming/secureconnectionstart/index.md
index 8031002a2a..cf1ab9c361 100644
--- a/files/fr/web/api/performancetiming/secureconnectionstart/index.md
+++ b/files/fr/web/api/performancetiming/secureconnectionstart/index.md
@@ -14,44 +14,29 @@ tags:
   - secureConnectionStart
 translation_of: Web/API/PerformanceTiming/secureConnectionStart
 ---
-<p>{{APIRef("Navigation Timing")}}</p>
+{{APIRef("Navigation Timing")}}
 
-<div class="warning">
-  <p><strong>Attention :</strong> Cette interface est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2</a>. Veuillez utiliser l'interface <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a> à la place.</p>
-</div>
+> **Attention :** Cette interface est dépréciée dans la spécification [Navigation Timing Level 2](https://w3c.github.io/navigation-timing/#obsolete). Veuillez utiliser l'interface [`PerformanceNavigationTiming`](/fr/docs/Web/API/PerformanceNavigationTiming) à la place.
 
-<p>L'ancienne propriété en lecture seule <code><strong>secureConnectionStart</code></strong> retourne un <code>unsigned long long</code> représentant le moment, en millisecondes depuis l'époque UNIX, où la poignée de main de connexion sécurisée commence. Si aucune connexion de ce type n'est demandée, elle retourne <code>0</code>.</p>
+L'ancienne propriété en lecture seule **`secureConnectionStart`** retourne un `unsigned long long` représentant le moment, en millisecondes depuis l'époque UNIX, où la poignée de main de connexion sécurisée commence. Si aucune connexion de ce type n'est demandée, elle retourne `0`.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">let <var>time</var> = <var>performanceTiming</var>.secureConnectionStart;</pre>
+```js
+let time = performanceTiming.secureConnectionStart;
+```
 
-<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('Navigation Timing', '#dom-performancetiming-secureconnectionstart',
-        'PerformanceTiming.secureConnectionStart')}}</td>
-      <td>{{Spec2('Navigation Timing')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                                                                                                    | Statut                                   | Commentaire          |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('Navigation Timing', '#dom-performancetiming-secureconnectionstart',
+        'PerformanceTiming.secureConnectionStart')}} | {{Spec2('Navigation Timing')}} | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.PerformanceTiming.secureConnectionStart")}}</p>
+{{Compat("api.PerformanceTiming.secureConnectionStart")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>L'interface <a href="/fr/docs/Web/API/PerformanceTiming"><code>PerformanceTiming</code></a> à laquelle elle appartient.</li>
-</ul>
+- L'interface [`PerformanceTiming`](/fr/docs/Web/API/PerformanceTiming) à laquelle elle appartient.
diff --git a/files/fr/web/api/performancetiming/unloadeventend/index.md b/files/fr/web/api/performancetiming/unloadeventend/index.md
index 03a0cbe390..5f101dca62 100644
--- a/files/fr/web/api/performancetiming/unloadeventend/index.md
+++ b/files/fr/web/api/performancetiming/unloadeventend/index.md
@@ -14,44 +14,29 @@ tags:
   - unloadEventEnd
 translation_of: Web/API/PerformanceTiming/unloadEventEnd
 ---
-<p>{{APIRef("Navigation Timing")}}</p>
+{{APIRef("Navigation Timing")}}
 
-<div class="warning">
-  <p><strong>Attention :</strong> Cette interface est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2</a>. Veuillez utiliser la propriété <a href="/fr/docs/Web/API/PerformanceNavigationTiming/unloadEventEnd"><code>PerformanceNavigationTiming.unloadEventEnd</code></a> de l'interface <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a> à la place.</p>
-</div>
+> **Attention :** Cette interface est dépréciée dans la spécification [Navigation Timing Level 2](https://w3c.github.io/navigation-timing/#obsolete). Veuillez utiliser la propriété [`PerformanceNavigationTiming.unloadEventEnd`](/fr/docs/Web/API/PerformanceNavigationTiming/unloadEventEnd) de l'interface [`PerformanceNavigationTiming`](/fr/docs/Web/API/PerformanceNavigationTiming) à la place.
 
-<p>L'ancienne propriété en lecture seule <code><strong>unloadEventEnd</code></strong> retourne un <code>unsigned long long</code> représentant le moment, en millisecondes depuis l'époque UNIX, où le gestionnaire d'événement <a href="/fr/docs/Web/API/Window/unload_event"><code>unload</code></a> se termine. S'il n'y a pas de document précédent, ou si le document précédent, ou l'une des redirections nécessaires, n'est pas de la même origine, la valeur retournée est <code>0</code>.</p>
+L'ancienne propriété en lecture seule **`unloadEventEnd`** retourne un `unsigned long long` représentant le moment, en millisecondes depuis l'époque UNIX, où le gestionnaire d'événement [`unload`](/fr/docs/Web/API/Window/unload_event) se termine. S'il n'y a pas de document précédent, ou si le document précédent, ou l'une des redirections nécessaires, n'est pas de la même origine, la valeur retournée est `0`.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">let <var>time</var> = <var>performanceTiming</var>.unloadEventEnd;</pre>
+```js
+let time = performanceTiming.unloadEventEnd;
+```
 
-<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('Navigation Timing', '#dom-performancetiming-unloadeventend',
-        'PerformanceTiming.unloadEventEnd')}}</td>
-      <td>{{Spec2('Navigation Timing')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                                                                                | Statut                                   | Commentaire          |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------- |
+| {{SpecName('Navigation Timing', '#dom-performancetiming-unloadeventend',
+        'PerformanceTiming.unloadEventEnd')}} | {{Spec2('Navigation Timing')}} | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.PerformanceTiming.unloadEventEnd")}}</p>
+{{Compat("api.PerformanceTiming.unloadEventEnd")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>L'interface <a href="/fr/docs/Web/API/PerformanceTiming"><code>PerformanceTiming</code></a> à laquelle elle appartient.</li>
-</ul>
+- L'interface [`PerformanceTiming`](/fr/docs/Web/API/PerformanceTiming) à laquelle elle appartient.
diff --git a/files/fr/web/api/performancetiming/unloadeventstart/index.md b/files/fr/web/api/performancetiming/unloadeventstart/index.md
index c97032703f..c1bdc39b48 100644
--- a/files/fr/web/api/performancetiming/unloadeventstart/index.md
+++ b/files/fr/web/api/performancetiming/unloadeventstart/index.md
@@ -14,44 +14,29 @@ tags:
   - unloadEventStart
 translation_of: Web/API/PerformanceTiming/unloadEventStart
 ---
-<p>{{APIRef("Navigation Timing")}}</p>
+{{APIRef("Navigation Timing")}}
 
-<div class="warning">
-  <p><strong>Attention :</strong> Cette interface est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2</a>. Veuillez utiliser la propriété <a href="/fr/docs/Web/API/PerformanceNavigationTiming/unloadEventStart"><code>PerformanceNavigationTiming.unloadEventStart</code></a> de l'interface <a href="/fr/docs/Web/API/PerformanceNavigationTiming"><code>PerformanceNavigationTiming</code></a> à la place.</p>
-</div>
+> **Attention :** Cette interface est dépréciée dans la spécification [Navigation Timing Level 2](https://w3c.github.io/navigation-timing/#obsolete). Veuillez utiliser la propriété [`PerformanceNavigationTiming.unloadEventStart`](/fr/docs/Web/API/PerformanceNavigationTiming/unloadEventStart) de l'interface [`PerformanceNavigationTiming`](/fr/docs/Web/API/PerformanceNavigationTiming) à la place.
 
-<p>L'ancienne propriété en lecture seule <code><strong>unloadEventStart</code></strong> retourne un <code>unsigned long long</code> représentant le moment, en millisecondes depuis l'époque UNIX, où l'événement <a href="/fr/docs/Web/API/Window/unload_event"><code>unload</code></a> a été lancé. S'il n'y a pas de document précédent, ou si le document précédent, ou l'une des redirections nécessaires, n'est pas de la même origine, la valeur retournée est <code>0</code>.</p>
+L'ancienne propriété en lecture seule **`unloadEventStart`** retourne un `unsigned long long` représentant le moment, en millisecondes depuis l'époque UNIX, où l'événement [`unload`](/fr/docs/Web/API/Window/unload_event) a été lancé. S'il n'y a pas de document précédent, ou si le document précédent, ou l'une des redirections nécessaires, n'est pas de la même origine, la valeur retournée est `0`.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">let <var>time</var> = <var>performanceTiming</var>.unloadEventStart;</pre>
+```js
+let time = performanceTiming.unloadEventStart;
+```
 
-<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('Navigation Timing', '#dom-performancetiming-unloadeventstart',
-        'PerformanceTiming.unloadEventStart')}}</td>
-      <td>{{Spec2('Navigation Timing')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                                                                                        | Statut                                   | Commentaire          |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('Navigation Timing', '#dom-performancetiming-unloadeventstart',
+        'PerformanceTiming.unloadEventStart')}} | {{Spec2('Navigation Timing')}} | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.PerformanceTiming.unloadEventStart")}}</p>
+{{Compat("api.PerformanceTiming.unloadEventStart")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>L'interface <a href="/fr/docs/Web/API/PerformanceTiming"><code>PerformanceTiming</code></a> à laquelle elle appartient.</li>
-</ul>
+- L'interface [`PerformanceTiming`](/fr/docs/Web/API/PerformanceTiming) à laquelle elle appartient.
diff --git a/files/fr/web/api/periodicwave/index.md b/files/fr/web/api/periodicwave/index.md
index 0bd576e5b9..2cefdb109d 100644
--- a/files/fr/web/api/periodicwave/index.md
+++ b/files/fr/web/api/periodicwave/index.md
@@ -13,60 +13,39 @@ tags:
   - sinusoïde
 translation_of: Web/API/PeriodicWave
 ---
-<p>{{ APIRef("Web Audio API") }}</p>
+{{ APIRef("Web Audio API") }}
 
-<div>
-<p>L'objet <strong><code>PeriodicWave</code></strong> permet de définir une forme d'onde personnalisée, pouvant être utilisée comme sortie d'un {{domxref("OscillatorNode")}}.</p>
-</div>
+L'objet **`PeriodicWave`** permet de définir une forme d'onde personnalisée, pouvant être utilisée comme sortie d'un {{domxref("OscillatorNode")}}.
 
-<p><code>PeriodicWave</code> n'a ni entrée ni sortie ; elle doit être créée avec {{domxref("AudioContext.createPeriodicWave()")}} et être assignée à un OscillatorNode avec {{domxref("OscillatorNode.setPeriodicWave()")}}.</p>
+`PeriodicWave` n'a ni entrée ni sortie ; elle doit être créée avec {{domxref("AudioContext.createPeriodicWave()")}} et être assignée à un OscillatorNode avec {{domxref("OscillatorNode.setPeriodicWave()")}}.
 
-<h2 id="Constructeur">Constructeur</h2>
+## Constructeur
 
-<dl>
- <dt>{{domxref("PeriodicWave.PeriodicWave()")}}</dt>
- <dd>Crée une <code>PeriodicWave</code> (onde périodique) avec toutes les valeurs optionelles mises par défaut. Pour établir des valeurs personnalisées, il faut utiliser le constructeur {{domxref("AudioContext.createPeriodicWave()")}}.</dd>
-</dl>
+- {{domxref("PeriodicWave.PeriodicWave()")}}
+  - : Crée une `PeriodicWave` (onde périodique) avec toutes les valeurs optionelles mises par défaut. Pour établir des valeurs personnalisées, il faut utiliser le constructeur {{domxref("AudioContext.createPeriodicWave()")}}.
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<p><em>Aucune; par ailleurs, <code>PeriodicWave</code> n'hérite d'aucune propriété.</em></p>
+_Aucune; par ailleurs, `PeriodicWave` n'hérite d'aucune propriété._
 
-<h2 id="Méthodes">Méthodes</h2>
+## Méthodes
 
-<p><em>Aucune; par ailleurs, <code>PeriodicWave</code> n'hérite d'aucune méthode.</em></p>
+_Aucune; par ailleurs, `PeriodicWave` n'hérite d'aucune méthode._
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>{{page("/fr/docs/Web/API/BaseAudioContext/createPeriodicWave","Exemple")}}</p>
+{{page("/fr/docs/Web/API/BaseAudioContext/createPeriodicWave","Exemple")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Web Audio API', '#periodicwave', 'PeriodicWave')}}</td>
-   <td>{{Spec2('Web Audio API')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+| Specification                                                                        | Status                               | Comment |
+| ------------------------------------------------------------------------------------ | ------------------------------------ | ------- |
+| {{SpecName('Web Audio API', '#periodicwave', 'PeriodicWave')}} | {{Spec2('Web Audio API')}} |         |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<div>
+{{Compat("api.PeriodicWave")}}
 
+## Voir aussi
 
-<p>{{Compat("api.PeriodicWave")}}</p>
-</div>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser l'API Web Audio</a></li>
-</ul>
+- [Utiliser l'API Web Audio](/en-US/docs/Web_Audio_API/Using_Web_Audio_API)
diff --git a/files/fr/web/api/permissions_api/index.md b/files/fr/web/api/permissions_api/index.md
index 3d0d7e9214..92c2e4d170 100644
--- a/files/fr/web/api/permissions_api/index.md
+++ b/files/fr/web/api/permissions_api/index.md
@@ -3,81 +3,62 @@ title: Permissions API
 slug: Web/API/Permissions_API
 translation_of: Web/API/Permissions_API
 ---
-<p>{{DefaultAPISidebar("Permissions API")}}</p>
+{{DefaultAPISidebar("Permissions API")}}
 
-<p>L'API Permissions fournit une manière cohérente pour connaître, dans un programme, le statut des permissions dans le contexte courant. On pourra par exemple utiliser cette API afin de déterminer si la permission d'accéder à une API donnée a été accordée ou refusée.</p>
-</div>
+L'API Permissions fournit une manière cohérente pour connaître, dans un programme, le statut des permissions dans le contexte courant. On pourra par exemple utiliser cette API afin de déterminer si la permission d'accéder à une API donnée a été accordée ou refusée.
 
-<div class="notecard note">
-  <p><strong>Note :</strong> Cette fonctionnalité est disponible via <a href="/fr/docs/Web/API/Web_Workers_API">les Web Workers</a> bien que les versions actuelles de Firefox n'implémentent pas <a href="/fr/docs/Web/API/WorkerNavigator/permissions">WorkerNavigator.permissions</a>.</p>
-</div>
+> **Note :** Cette fonctionnalité est disponible via [les Web Workers](/fr/docs/Web/API/Web_Workers_API) bien que les versions actuelles de Firefox n'implémentent pas [WorkerNavigator.permissions](/fr/docs/Web/API/WorkerNavigator/permissions).
 
-<h2 id="concepts_and_usage">Concepts et usages</h2>
+## Concepts et usages
 
-<p>Historiquement les differentes API géraient leurs propres permissions de façon peu cohérente. L'API <a href="/fr/docs/Web/API/Notifications_API">Notifications</a> par exemple permet de vérifier explicitement l'état d'autorisation et de déclencher la demande de permission tandis que l'API <a href="/fr/docs/Web/API/Geolocation">Geolocation</a> ne permet pas ce fonctionnement (ce qui peut poser problème lorsque l'utilisateur a refusé la requête de permission initiale). L'API Permissions fournit un ensemble d'outils pour permettre aux développeuses et développeurs d'implémenter une meilleure ergonomie en ce qui concerne les permissions.</p>
+Historiquement les differentes API géraient leurs propres permissions de façon peu cohérente. L'API [Notifications](/fr/docs/Web/API/Notifications_API) par exemple permet de vérifier explicitement l'état d'autorisation et de déclencher la demande de permission tandis que l'API [Geolocation](/fr/docs/Web/API/Geolocation) ne permet pas ce fonctionnement (ce qui peut poser problème lorsque l'utilisateur a refusé la requête de permission initiale). L'API Permissions fournit un ensemble d'outils pour permettre aux développeuses et développeurs d'implémenter une meilleure ergonomie en ce qui concerne les permissions.
 
-<p>La propriété <code>permissions</code> est accessible via l'objet <a href="/fr/docs/Web/API/Navigator"><code>Navigator</code></a>, dans le contexte standard du navigateur et dans le contexte des <i lang="en">workers</i> (<a href="/fr/docs/Web/API/WorkerNavigator"><code>WorkerNavigator</code></a>, ce qui permet de vérifier l'état des permissions depuis les <i lang="en">workers</i>). Cette propriété renvoie un objet <a href="/fr/docs/Web/API/Permissions"><code>Permissions</code></a> qui fournit l'accès aux fonctionalités de l'API Permissions.</p>
+La propriété `permissions` est accessible via l'objet [`Navigator`](/fr/docs/Web/API/Navigator), dans le contexte standard du navigateur et dans le contexte des <i lang="en">workers</i> ([`WorkerNavigator`](/fr/docs/Web/API/WorkerNavigator), ce qui permet de vérifier l'état des permissions depuis les <i lang="en">workers</i>). Cette propriété renvoie un objet [`Permissions`](/fr/docs/Web/API/Permissions) qui fournit l'accès aux fonctionalités de l'API Permissions.
 
-<p>Lorsque cet objet a été récupéré, on peut réaliser différentes opérations relatives aux permissions. On peut par exemple connaître l'état d'une permission en utilisant la méthode <a href="/fr/docs/Web/API/Permissions/query"><code>Permissions.query()</code></a> qui renvoie une promesse dont la résolution est un objet <a href="/fr/docs/Web/API/PermissionStatus"><code>PermissionStatus</code></a> renseignant sur l'état d'autorisation pour une API donnée.</p>
+Lorsque cet objet a été récupéré, on peut réaliser différentes opérations relatives aux permissions. On peut par exemple connaître l'état d'une permission en utilisant la méthode [`Permissions.query()`](/fr/docs/Web/API/Permissions/query) qui renvoie une promesse dont la résolution est un objet [`PermissionStatus`](/fr/docs/Web/API/PermissionStatus) renseignant sur l'état d'autorisation pour une API donnée.
 
-<p>L'API Permissions ne donne pas accès aux permissions de l'ensemble des API. Voici un sous-ensemble d'API qui peuvent fonctionner avec l'API Permissions :</p>
+L'API Permissions ne donne pas accès aux permissions de l'ensemble des API. Voici un sous-ensemble d'API qui peuvent fonctionner avec l'API Permissions :
 
-<ul>
-  <li><a href="/fr/docs/Web/API/Clipboard_API">L'API Clipboard (pour la gestion du presse-papiers)</a></li>
-  <li><a href="/fr/docs/Web/API/Notifications_API">L'API Notifications</a></li>
-  <li><a href="/fr/docs/Web/API/Push_API">L'API Push</a></li>
-  <li>L'API Web MIDI</li>
- </ul>
+- [L'API Clipboard (pour la gestion du presse-papiers)](/fr/docs/Web/API/Clipboard_API)
+- [L'API Notifications](/fr/docs/Web/API/Notifications_API)
+- [L'API Push](/fr/docs/Web/API/Push_API)
+- L'API Web MIDI
 
-<p>À l'avenir, davantage d'API devraient être prises en charge par l'API Permissions.</p>
+À l'avenir, davantage d'API devraient être prises en charge par l'API Permissions.
 
-<h2 id="examples">Exemples</h2>
+## Exemples
 
-<p>Voici un exemple simple nommé <i lang="en">Location Finder</i>. Vous pouvez <a href="https://chrisdavidmills.github.io/location-finder-permissions-api/">lancer cet exemple en live ici</a>, ou <a href="https://github.com/chrisdavidmills/location-finder-permissions-api/tree/gh-pages">voir le code source sur GitHub</a>.</p>
+Voici un exemple simple nommé <i lang="en">Location Finder</i>. Vous pouvez [lancer cet exemple en live ici](https://chrisdavidmills.github.io/location-finder-permissions-api/), ou [voir le code source sur GitHub](https://github.com/chrisdavidmills/location-finder-permissions-api/tree/gh-pages).
 
-<p>Vous pouvez également en lire plus sur le fonctionnement de cet exemple dans l'article <a href="/fr/docs/Web/API/Permissions_API/Using_the_Permissions_API">Utiliser l'API Permissions</a>.</p>
+Vous pouvez également en lire plus sur le fonctionnement de cet exemple dans l'article [Utiliser l'API Permissions](/fr/docs/Web/API/Permissions_API/Using_the_Permissions_API).
 
-<h2 id="interfaces">Interfaces</h2>
+## Interfaces
 
-<dl>
- <dt><a href="/fr/docs/Web/API/Navigator/permissions"><code>Navigator.permissions</code></a> (respectivement <a href="/fr/docs/Web/API/WorkerNavigator/permissions"><code>WorkerNavigator.permissions</code></a>) {{readonlyinline}}</dt>
- <dd>Fournit un accès à l'objet <a href="/fr/docs/Web/API/Permissions"><code>Permissions</code></a> depuis le contexte principal (respectivement celui du worker).</dd>
- <dt><a href="/fr/docs/Web/API/Permissions"><code>Permissions</code></a></dt>
- <dd>Fournit les principales fonctionalités de l'API Permissions, telles que les méthodes de demande et de révocation des permissions.</dd>
- <dt><a href="/fr/docs/Web/API/PermissionStatus"><code>PermissionStatus</code></a></dt>
- <dd>Fournit l'accès à l'état actuel d'une permission ainsi qu'un gestionnaire d'évènements pour répondre aux changements d'état d'une permission.</dd>
-</dl>
+- [`Navigator.permissions`](/fr/docs/Web/API/Navigator/permissions) (respectivement [`WorkerNavigator.permissions`](/fr/docs/Web/API/WorkerNavigator/permissions)) {{readonlyinline}}
+  - : Fournit un accès à l'objet [`Permissions`](/fr/docs/Web/API/Permissions) depuis le contexte principal (respectivement celui du worker).
+- [`Permissions`](/fr/docs/Web/API/Permissions)
+  - : Fournit les principales fonctionalités de l'API Permissions, telles que les méthodes de demande et de révocation des permissions.
+- [`PermissionStatus`](/fr/docs/Web/API/PermissionStatus)
+  - : Fournit l'accès à l'état actuel d'une permission ainsi qu'un gestionnaire d'évènements pour répondre aux changements d'état d'une permission.
 
-<h2 id="specification">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('Permissions API')}}</td>
-   <td>{{Spec2('Permissions API')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                            | État                                 | Commentaires         |
+| ---------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName('Permissions API')}} | {{Spec2('Permissions API')}} | Définition initiale. |
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<h3 id="permissions_interface">Interface <code>Permissions</code></h3>
+### Interface `Permissions`
 
-<p>{{Compat("api.Permissions")}}</p>
+{{Compat("api.Permissions")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/API/Permissions_API/Using_the_Permissions_API">Utiliser l'API Permissions</a></li>
- <li><a href="https://blog.addpipe.com/using-permissions-api-to-detect-getusermedia-responses/"><i lang="en">Using the Permissions API to Detect How Often Users Allow or Deny Camera Access</i> (en anglais)</a></li>
- <li><a href="/fr/docs/Web/API/notification/permission"><code>Notification.permission</code></a></li>
- <li><a href="/fr/docs/Web/Privacy">Confidentialité, permissions et sécurité de l'information</a></li>
-</ul>
+- [Utiliser l'API Permissions](/fr/docs/Web/API/Permissions_API/Using_the_Permissions_API)
+- <i lang="en">Using the Permissions API to Detect How Often Users Allow or Deny Camera Access</i>
+
+  [<i lang="en">Using the Permissions API to Detect How Often Users Allow or Deny Camera Access</i> (en anglais)](https://blog.addpipe.com/using-permissions-api-to-detect-getusermedia-responses/)
+
+- [`Notification.permission`](/fr/docs/Web/API/notification/permission)
+- [Confidentialité, permissions et sécurité de l'information](/fr/docs/Web/Privacy)
diff --git a/files/fr/web/api/plugin/index.md b/files/fr/web/api/plugin/index.md
index cfb0919f6d..0e892cd5fb 100644
--- a/files/fr/web/api/plugin/index.md
+++ b/files/fr/web/api/plugin/index.md
@@ -10,53 +10,36 @@ tags:
   - Plugins
 translation_of: Web/API/Plugin
 ---
-<div>{{ApiRef("HTML DOM")}}</div>
-
-<p>L'interface <code>Plugin</code> fournit des informations à propos d'un <a href="/en-US/docs/Mozilla/Add-ons/Plugins">plugin</a> du navigateur.</p>
-
-<div class="note">
-<p><strong>Note :</strong> Les propriétés propres des objets <code>Plugin</code> ne sont plus énumérables dans les dernières versions des navigateurs.</p>
-</div>
-
-<h2 id="Properties">Propriétés</h2>
-
-<dl>
- <dt>{{domxref("Plugin.description")}} {{readonlyinline}}</dt>
- <dd>Une description lisible du plugin.</dd>
- <dt>{{domxref("Plugin.filename")}} {{readonlyinline}}</dt>
- <dd>Le nom de fichier du fichier plugin.</dd>
- <dt>{{domxref("Plugin.name")}} {{readonlyinline}}</dt>
- <dd>Le nom du plugin.</dd>
- <dt>{{domxref("Plugin.version")}} {{readonlyinline}}</dt>
- <dd>Le numéro de version du plugin, en chaîne de caractères.</dd>
-</dl>
-
-<h2 id="Methods">Méthodes</h2>
-
-<dl>
- <dt>{{domxref("Plugin.item")}}</dt>
- <dd>Renvoie le type MIME d'un type de contenu pris en charge, en fonction de l'index dans une liste de types pris en charge.</dd>
- <dt>{{domxref("Plugin.namedItem")}}</dt>
- <dd>Renvoie le type MIME d'un élément pris en charge.</dd>
-</dl>
-
-<h2 id="Caractéristiques">Caractéristiques</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Caractéristique</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG','#dom-plugin','Plugin')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilités">Compatibilités</h2>
-
-<p>{{Compat("api.Plugin")}}</p>
+{{ApiRef("HTML DOM")}}
+
+L'interface `Plugin` fournit des informations à propos d'un [plugin](/en-US/docs/Mozilla/Add-ons/Plugins) du navigateur.
+
+> **Note :** Les propriétés propres des objets `Plugin` ne sont plus énumérables dans les dernières versions des navigateurs.
+
+## Propriétés
+
+- {{domxref("Plugin.description")}} {{readonlyinline}}
+  - : Une description lisible du plugin.
+- {{domxref("Plugin.filename")}} {{readonlyinline}}
+  - : Le nom de fichier du fichier plugin.
+- {{domxref("Plugin.name")}} {{readonlyinline}}
+  - : Le nom du plugin.
+- {{domxref("Plugin.version")}} {{readonlyinline}}
+  - : Le numéro de version du plugin, en chaîne de caractères.
+
+## Méthodes
+
+- {{domxref("Plugin.item")}}
+  - : Renvoie le type MIME d'un type de contenu pris en charge, en fonction de l'index dans une liste de types pris en charge.
+- {{domxref("Plugin.namedItem")}}
+  - : Renvoie le type MIME d'un élément pris en charge.
+
+## Caractéristiques
+
+| Caractéristique                                                      | Statut                           | Commentaire          |
+| -------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName('HTML WHATWG','#dom-plugin','Plugin')}} | {{Spec2('HTML WHATWG')}} | Définition initiale. |
+
+## Compatibilités
+
+{{Compat("api.Plugin")}}
diff --git a/files/fr/web/api/pointer_events/index.md b/files/fr/web/api/pointer_events/index.md
index 734d88d9f5..2e2d206b70 100644
--- a/files/fr/web/api/pointer_events/index.md
+++ b/files/fr/web/api/pointer_events/index.md
@@ -8,141 +8,89 @@ tags:
   - TopicStub
 translation_of: Web/API/Pointer_events
 ---
-<p>{{DefaultAPISidebar("Pointer Events")}}</p>
-
-<p>La plupart du contenu web d'aujourd'hui suppose que le périphérique de pointage de l'utilisateur sera une souris. Cependant, beaucoup d'appareils prennent en charge d'autres types de d'entrée pour pointeur, comme le stylet ou les doigts pour les écrans tactiles. Des extensions aux modèles d'événement de pointage sont nécessaires et les <em>événements de pointeur</em> répondent à ce besoin.</p>
-
-<p>Les événements de pointeur sont des événements DOM déclenché pour tout périphérique de pointage. Ils sont conçus pour créer un modèle unique d'événement DOM pour gérer les périphériques de pointage comme la souris, le stylet ou le toucher (avec un ou plusieurs doigts). Un <em><a href="#term_pointer">pointeur</a></em> est agnostique du type de matériel utilisé pour cibler un endroit sur l'écran.</p>
-
-<p>Avoir un seul modèle pour gérer les événements de pointeur peut simplifier la création de sites web et applications et fournir une bonne expérience utilisateur quelque soit le matériel de l'utilisateur. Toutefois, pour les scénarios dans lesquels une gestion spécifique au périphérique est souhaitée, les événements de pointeur définissent une propriété {{domxref("PointerEvent.pointerType","pointerType")}} qui permet de connaître le type de périphérique ayant déclenché l'événement.</p>
-
-<p>Les événements nécessaires pour gérer les entrées de pointeur génériques sont analogues aux {{domxref("MouseEvent","événements de souris")}}. Par conséquent, les types d'événement de pointeur sont intentionnelement similaires aux événements de souris (<code>mousedown/pointerdown</code>, <code>mousemove/pointermove</code>, etc). De plus, les événements de pointeur contiennent les propriétés usuelles présentes dans les événements de souris (coordonnées client, élément cible, états des boutons, etc.) ainsi que de nouvelles propriétés pour les autres types d'entrée: pression, géométrie de contact, inclinaison, etc. En fait, l'interface {{domxref("PointerEvent")}} hérite toutes les propriétés de {{domxref("MouseEvent","MouseEvent")}} ce qui facilite la migration des événements souris aux événements de pointeur.</p>
-
-<h2 id="Terminologie">Terminologie</h2>
-
-<dl>
- <dt>pointeur actif</dt>
- <dd>Tout périphérique d'entrée <em><a href="#term_pointer">pointeur</a></em> pouvant produire des événements. Un pointeur est considéré actif s'il peut encore produire des événements. Par exemple, un stylet posé sur l'écran est considéré comme actif puisqu'il peut produire des événements en étant déplacé ou levé.</dd>
- <dt>numériseur (digitizer)</dt>
- <dd>Un dispositif avec une surface pouvant recevoir et détecter le contact. Le plus souvent, le dispositif est un écran tactile pouvant détecter l'entrée provenant du stylet ou du doigt.</dd>
- <dt>hit test</dt>
- <dd>Le procédé qu'utilise le navigateur pour détermine l'élément cible de l'événement pointeur. Typiquement, il est déterminé en utilisant l'emplacement du pointeur et la disposition visuelle des éléments dans un document d'un media écran.</dd>
- <dt>pointeur</dt>
- <dd>Une représentation agnostique du périphérique en entrée pouvant cibler des coordonnées sur un écran. Des exemples d'appareils de <em>pointeur</em> sont la souris, le stylet et la contact tactile.</dd>
- <dt>capture du pointeur</dt>
- <dd>La capture du pointeur permet aux événements d'être redirigé vers un élément particulier autre que le résultat du hit test.</dd>
- <dt>événement de pointeur</dt>
- <dd>Un {{domxref("PointerEvent","événement")}} DOM déclenché pour un <em>pointeur</em>.</dd>
-</dl>
-
-<h2 id="Interfaces">Interfaces</h2>
-
-<p>L'interface principale est l'interface {{domxref("PointerEvent")}}, qui comprend un {{domxref("PointerEvent.PointerEvent","constructeur")}} ainsi que plusieurs événements. L'API ajoute également quelques extensions aux interfaces {{domxref("Element")}} et {{domxref("Navigator")}}. Les sous-sections suivantes décrivent brièvement chaque interface et propriétés liées.</p>
-
-<h3 id="Interface_PointerEvent">Interface PointerEvent</h3>
-
-<p>L'interface {{domxref("PointerEvent")}} hérite de l'interface {{domxref("MouseEvent")}} et a les propriétés suivantes (toutes sont {{readonlyInline}}).</p>
-
-<ul>
- <li>{{ domxref('PointerEvent.pointerId','pointerId')}} - un identifiant unique pour le pointeur ayant déclenché l'événement.</li>
- <li>{{ domxref('PointerEvent.width','width')}} - la largeur (ordre de grandeur sur l'axe X), en pixels CSS, du point de contact.</li>
- <li>{{ domxref('PointerEvent.height','height')}} - la hauteur (ordre de grandeur sur l'axe Y), en pixels CSS, du point de contact.</li>
- <li>{{ domxref('PointerEvent.pressure','pressure')}} - la pression du pointeur normalisée sur une échelle entre 0 et 1, où 0 et 1 représentent respectivement la pression minimale et le maximale que l'appareil est capable de détecter.</li>
- <li>{{ domxref('PointerEvent.tiltX','tiltX')}} - l'angle du plan (en degrés, sur une échelle de -90 à 90) entre le plan Y-Z et le plan qui contient l'axe du stylo et l'axe Y.</li>
- <li>{{ domxref('PointerEvent.tiltY','tiltY')}} - l'angle du plan (en degrés, sur une échelle de -90 à 90) entre le plan X-Z et le plan qui contient l'axe du stylo et l'axe X.</li>
- <li>{{ domxref('PointerEvent.pointerType','pointerType')}} - indique le type d'appareil ayant déclenché l'événement (souris, stylet, toucher, etc.)</li>
- <li>{{ domxref('PointerEvent.isPrimary','isPrimary')}} - indique si le pointeur est le pointeur principal de son type (utile dans le cas du multi-touch).</li>
-</ul>
-
-<h3 id="Types_dévénements_et_gestionnaires_dévénements_globaux">Types d'événements et gestionnaires d'événements globaux</h3>
-
-<p>Il existe dix types d'événement de pointeur, dont sept qui ont la même sémantique que les événements souris (<code>down, up, move, over, out, enter, leave</code>). Vous trouverez ci-dessous une courte description de chaque type d'événement et son {{domxref("GlobalEventHandlers","gestionnaire d'événement global")}} associé.</p>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Event</th>
-   <th scope="col">On Event Handler</th>
-   <th scope="col">Description</th>
-  </tr>
-  <tr>
-   <td>{{event('pointerover')}}</td>
-   <td>{{domxref('GlobalEventHandlers.onpointerover','onpointerover')}}</td>
-   <td>déclenché quand un pointeur entre à l'intérieur des limites du <a href="#term_hit_test">hit test</a> d'un élément.</td>
-  </tr>
-  <tr>
-   <td>{{event('pointerenter')}}</td>
-   <td>{{domxref('GlobalEventHandlers.onpointerenter','onpointerenter')}}</td>
-   <td>déclenché quand un pointeur entre à l'intérieur des limites du <a href="#term_hit_test">hit test</a> d'un élément ou d'un de ses descendants.</td>
-  </tr>
-  <tr>
-   <td>{{event('pointerdown')}}</td>
-   <td>{{domxref('GlobalEventHandlers.onpointerdown','onpointerdown')}}</td>
-   <td>déclenché quand le pointeur devient <em>actif</em> (que le contact est établit).</td>
-  </tr>
-  <tr>
-   <td>{{event('pointermove')}}</td>
-   <td>{{domxref('GlobalEventHandlers.onpointermove','onpointermove')}}</td>
-   <td>déclenché quand les coordonnées du pointeur changent (que le pointeur bouge).</td>
-  </tr>
-  <tr>
-   <td>{{event('pointerup')}}</td>
-   <td>{{domxref('GlobalEventHandlers.onpointerup','onpointerup')}}</td>
-   <td>déclenché quand le pointeur n'est plus <em>actif</em> (que le contact est relaché).</td>
-  </tr>
-  <tr>
-   <td>{{event('pointercancel')}}</td>
-   <td>{{domxref('GlobalEventHandlers.onpointercancel','onpointercancel')}}</td>
-   <td>le navigateur déclenche cet événement s'il détecte que le pointeur ne pourra plus générer d'événement (si l'appareil est désactivé par exemple).</td>
-  </tr>
-  <tr>
-   <td>{{event('pointerout')}}</td>
-   <td>{{domxref('GlobalEventHandlers.onpointerout','onpointerout')}}</td>
-   <td>déclenché quand le pointeur n'est plus affecté à l'élément: qu'il sort des limites du <a href="term_hit_test">hit test</a> de l'élément; qu'il déclenche l'événement pointerup ou pointercancel; que le stylet sort de la zone de l'écran de l'appareil.</td>
-  </tr>
-  <tr>
-   <td>{{event('pointerleave')}}</td>
-   <td>{{domxref('GlobalEventHandlers.onpointerleave','onpointerleave')}}</td>
-   <td>déclenché quand le pointeur sort des limites du <a href="term_hit_test">hit test</a> de l'élément. Cet événement est également déclenché lorsqu'on utilise un stylet et qu'il sort de la zone détectable par le numériseur.</td>
-  </tr>
-  <tr>
-   <td>{{event('gotpointercapture')}}</td>
-   <td>Aucun (voir <a href="#Extensions_d'Element">Extensions d'Elements</a>)</td>
-   <td>déclenché quand un élément reçoit la capture du pointeur.</td>
-  </tr>
-  <tr>
-   <td>{{event('lostpointercapture')}}</td>
-   <td>Aucun (voir <a href="#Extensions_d'Element">Extensions d'Element</a>)</td>
-   <td>déclenché quand la capture du pointeur est désactivée.</td>
-  </tr>
- </tbody>
-</table>
-
-<h3 id="Extensions_dElement">Extensions d'Element</h3>
-
-<p>Il existe quatre extensions à l'interface {{domxref("Element")}}:</p>
-
-<ul>
- <li>{{domxref("Element.ongotpointercapture","ongotpointercapture")}} - an EventHandler that returns the event handler (function) for the gotpointercapture event type.</li>
- <li>{{domxref("Element.onlostpointercapture","onlostpointercapture")}} - an EventHandler interface that returns the event handler (function) for the lostpointercapture event type.</li>
- <li>{{domxref("Element.setPointerCapture()","setPointerCapture()")}} - this method designates a specific element as the <em>capture target</em> of future pointer events.</li>
- <li>{{domxref("Element.releasePointerCapture()","releasePointerCapture()")}} - the method releases (stops) <em>pointer capture</em> that was previously set for a specific pointer event.</li>
-</ul>
-
-<h3 id="Extension_de_Navigator">Extension de Navigator</h3>
-
-<p>La propriété {{domxref("Navigator.maxTouchPoints")}} est utilisé pour déterminer le nombre maximum de points de contact pris en charge à n'importe quel moment.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Cette section contient des exemples basiques d'utilisation d'interfaces d'événement de pointeur.</p>
-
-<h3 id="Enregistrer_des_gestionnaires_dévénement">Enregistrer des gestionnaires d'événement</h3>
-
-<p>This example registers a handler for every event type for the given element.</p>
-
-<pre class="brush: html">&lt;html&gt;
-&lt;script&gt;
+{{DefaultAPISidebar("Pointer Events")}}
+
+La plupart du contenu web d'aujourd'hui suppose que le périphérique de pointage de l'utilisateur sera une souris. Cependant, beaucoup d'appareils prennent en charge d'autres types de d'entrée pour pointeur, comme le stylet ou les doigts pour les écrans tactiles. Des extensions aux modèles d'événement de pointage sont nécessaires et les _événements de pointeur_ répondent à ce besoin.
+
+Les événements de pointeur sont des événements DOM déclenché pour tout périphérique de pointage. Ils sont conçus pour créer un modèle unique d'événement DOM pour gérer les périphériques de pointage comme la souris, le stylet ou le toucher (avec un ou plusieurs doigts). Un _[pointeur](#term_pointer)_ est agnostique du type de matériel utilisé pour cibler un endroit sur l'écran.
+
+Avoir un seul modèle pour gérer les événements de pointeur peut simplifier la création de sites web et applications et fournir une bonne expérience utilisateur quelque soit le matériel de l'utilisateur. Toutefois, pour les scénarios dans lesquels une gestion spécifique au périphérique est souhaitée, les événements de pointeur définissent une propriété {{domxref("PointerEvent.pointerType","pointerType")}} qui permet de connaître le type de périphérique ayant déclenché l'événement.
+
+Les événements nécessaires pour gérer les entrées de pointeur génériques sont analogues aux {{domxref("MouseEvent","événements de souris")}}. Par conséquent, les types d'événement de pointeur sont intentionnelement similaires aux événements de souris (`mousedown/pointerdown`, `mousemove/pointermove`, etc). De plus, les événements de pointeur contiennent les propriétés usuelles présentes dans les événements de souris (coordonnées client, élément cible, états des boutons, etc.) ainsi que de nouvelles propriétés pour les autres types d'entrée: pression, géométrie de contact, inclinaison, etc. En fait, l'interface {{domxref("PointerEvent")}} hérite toutes les propriétés de {{domxref("MouseEvent","MouseEvent")}} ce qui facilite la migration des événements souris aux événements de pointeur.
+
+## Terminologie
+
+- pointeur actif
+  - : Tout périphérique d'entrée _[pointeur](#term_pointer)_ pouvant produire des événements. Un pointeur est considéré actif s'il peut encore produire des événements. Par exemple, un stylet posé sur l'écran est considéré comme actif puisqu'il peut produire des événements en étant déplacé ou levé.
+- numériseur (digitizer)
+  - : Un dispositif avec une surface pouvant recevoir et détecter le contact. Le plus souvent, le dispositif est un écran tactile pouvant détecter l'entrée provenant du stylet ou du doigt.
+- hit test
+  - : Le procédé qu'utilise le navigateur pour détermine l'élément cible de l'événement pointeur. Typiquement, il est déterminé en utilisant l'emplacement du pointeur et la disposition visuelle des éléments dans un document d'un media écran.
+- pointeur
+  - : Une représentation agnostique du périphérique en entrée pouvant cibler des coordonnées sur un écran. Des exemples d'appareils de _pointeur_ sont la souris, le stylet et la contact tactile.
+- capture du pointeur
+  - : La capture du pointeur permet aux événements d'être redirigé vers un élément particulier autre que le résultat du hit test.
+- événement de pointeur
+  - : Un {{domxref("PointerEvent","événement")}} DOM déclenché pour un _pointeur_.
+
+## Interfaces
+
+L'interface principale est l'interface {{domxref("PointerEvent")}}, qui comprend un {{domxref("PointerEvent.PointerEvent","constructeur")}} ainsi que plusieurs événements. L'API ajoute également quelques extensions aux interfaces {{domxref("Element")}} et {{domxref("Navigator")}}. Les sous-sections suivantes décrivent brièvement chaque interface et propriétés liées.
+
+### Interface PointerEvent
+
+L'interface {{domxref("PointerEvent")}} hérite de l'interface {{domxref("MouseEvent")}} et a les propriétés suivantes (toutes sont {{readonlyInline}}).
+
+- {{ domxref('PointerEvent.pointerId','pointerId')}} - un identifiant unique pour le pointeur ayant déclenché l'événement.
+- {{ domxref('PointerEvent.width','width')}} - la largeur (ordre de grandeur sur l'axe X), en pixels CSS, du point de contact.
+- {{ domxref('PointerEvent.height','height')}} - la hauteur (ordre de grandeur sur l'axe Y), en pixels CSS, du point de contact.
+- {{ domxref('PointerEvent.pressure','pressure')}} - la pression du pointeur normalisée sur une échelle entre 0 et 1, où 0 et 1 représentent respectivement la pression minimale et le maximale que l'appareil est capable de détecter.
+- {{ domxref('PointerEvent.tiltX','tiltX')}} - l'angle du plan (en degrés, sur une échelle de -90 à 90) entre le plan Y-Z et le plan qui contient l'axe du stylo et l'axe Y.
+- {{ domxref('PointerEvent.tiltY','tiltY')}} - l'angle du plan (en degrés, sur une échelle de -90 à 90) entre le plan X-Z et le plan qui contient l'axe du stylo et l'axe X.
+- {{ domxref('PointerEvent.pointerType','pointerType')}} - indique le type d'appareil ayant déclenché l'événement (souris, stylet, toucher, etc.)
+- {{ domxref('PointerEvent.isPrimary','isPrimary')}} - indique si le pointeur est le pointeur principal de son type (utile dans le cas du multi-touch).
+
+### Types d'événements et gestionnaires d'événements globaux
+
+Il existe dix types d'événement de pointeur, dont sept qui ont la même sémantique que les événements souris (`down, up, move, over, out, enter, leave`). Vous trouverez ci-dessous une courte description de chaque type d'événement et son {{domxref("GlobalEventHandlers","gestionnaire d'événement global")}} associé.
+
+| Event                                    | On Event Handler                                                                             | Description                                                                                                                                                                                                                                   |
+| ---------------------------------------- | -------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{event('pointerover')}}         | {{domxref('GlobalEventHandlers.onpointerover','onpointerover')}}         | déclenché quand un pointeur entre à l'intérieur des limites du [hit test](#term_hit_test) d'un élément.                                                                                                                                       |
+| {{event('pointerenter')}}         | {{domxref('GlobalEventHandlers.onpointerenter','onpointerenter')}}     | déclenché quand un pointeur entre à l'intérieur des limites du [hit test](#term_hit_test) d'un élément ou d'un de ses descendants.                                                                                                            |
+| {{event('pointerdown')}}         | {{domxref('GlobalEventHandlers.onpointerdown','onpointerdown')}}         | déclenché quand le pointeur devient _actif_ (que le contact est établit).                                                                                                                                                                     |
+| {{event('pointermove')}}         | {{domxref('GlobalEventHandlers.onpointermove','onpointermove')}}         | déclenché quand les coordonnées du pointeur changent (que le pointeur bouge).                                                                                                                                                                 |
+| {{event('pointerup')}}             | {{domxref('GlobalEventHandlers.onpointerup','onpointerup')}}             | déclenché quand le pointeur n'est plus _actif_ (que le contact est relaché).                                                                                                                                                                  |
+| {{event('pointercancel')}}     | {{domxref('GlobalEventHandlers.onpointercancel','onpointercancel')}} | le navigateur déclenche cet événement s'il détecte que le pointeur ne pourra plus générer d'événement (si l'appareil est désactivé par exemple).                                                                                              |
+| {{event('pointerout')}}         | {{domxref('GlobalEventHandlers.onpointerout','onpointerout')}}         | déclenché quand le pointeur n'est plus affecté à l'élément: qu'il sort des limites du [hit test](term_hit_test) de l'élément; qu'il déclenche l'événement pointerup ou pointercancel; que le stylet sort de la zone de l'écran de l'appareil. |
+| {{event('pointerleave')}}         | {{domxref('GlobalEventHandlers.onpointerleave','onpointerleave')}}     | déclenché quand le pointeur sort des limites du [hit test](term_hit_test) de l'élément. Cet événement est également déclenché lorsqu'on utilise un stylet et qu'il sort de la zone détectable par le numériseur.                              |
+| {{event('gotpointercapture')}} | Aucun (voir [Extensions d'Elements](#Extensions_d'Element))                                  | déclenché quand un élément reçoit la capture du pointeur.                                                                                                                                                                                     |
+| {{event('lostpointercapture')}} | Aucun (voir [Extensions d'Element](#Extensions_d'Element))                                   | déclenché quand la capture du pointeur est désactivée.                                                                                                                                                                                        |
+
+### Extensions d'Element
+
+Il existe quatre extensions à l'interface {{domxref("Element")}}:
+
+- {{domxref("Element.ongotpointercapture","ongotpointercapture")}} - an EventHandler that returns the event handler (function) for the gotpointercapture event type.
+- {{domxref("Element.onlostpointercapture","onlostpointercapture")}} - an EventHandler interface that returns the event handler (function) for the lostpointercapture event type.
+- {{domxref("Element.setPointerCapture()","setPointerCapture()")}} - this method designates a specific element as the _capture target_ of future pointer events.
+- {{domxref("Element.releasePointerCapture()","releasePointerCapture()")}} - the method releases (stops) _pointer capture_ that was previously set for a specific pointer event.
+
+### Extension de Navigator
+
+La propriété {{domxref("Navigator.maxTouchPoints")}} est utilisé pour déterminer le nombre maximum de points de contact pris en charge à n'importe quel moment.
+
+## Exemples
+
+Cette section contient des exemples basiques d'utilisation d'interfaces d'événement de pointeur.
+
+### Enregistrer des gestionnaires d'événement
+
+This example registers a handler for every event type for the given element.
+
+```html
+<html>
+<script>
 function over_handler(event) { }
 function enter_handler(event) { }
 function down_handler(event) { }
@@ -168,19 +116,20 @@ function init() {
  el.gotpointercapture = gotcapture_handler;
  el.lostpointercapture = lostcapture_handler;
 }
-&lt;/script&gt;
-&lt;body onload="init();"&gt;
-&lt;div id="target"&gt; Touch me ... &lt;/div&gt;
-&lt;/body&gt;
-&lt;/html&gt;
-</pre>
+</script>
+<body onload="init();">
+<div id="target"> Touch me ... </div>
+</body>
+</html>
+```
 
-<h3 id="Propriétés_des_événements">Propriétés des événements</h3>
+### Propriétés des événements
 
-<p>This example illustrates accessing all of a touch event's properties.</p>
+This example illustrates accessing all of a touch event's properties.
 
-<pre class="brush: html">&lt;html&gt;
-&lt;script&gt;
+```html
+<html>
+<script>
 var id = -1;
 
 function process_id(event) {
@@ -228,7 +177,7 @@ function down_handler(ev) {
  }
 
  // Call the tilt handler
- if (ev.tiltX != 0 &amp;&amp; ev.tiltY != 0) process_tilt(ev.tiltX, ev.tiltY);
+ if (ev.tiltX != 0 && ev.tiltY != 0) process_tilt(ev.tiltX, ev.tiltY);
 
  // Call the pressure handler
  process_pressure(ev.pressure);
@@ -242,76 +191,42 @@ function init() {
  // Register pointerdown handler
  el.onpointerdown = down_handler;
 }
-&lt;/script&gt;
-&lt;body onload="init();"&gt;
- &lt;div id="target"&gt; Touch me ... &lt;/div&gt;
-&lt;/body&gt;
-&lt;/html&gt;
-</pre>
-
-<h2 id="Déterminer_le_pointeur_principal">Déterminer le pointeur principal</h2>
-
-<p>In some scenarios there may be multiple pointers (for example a device with both a touchscreen and a mouse) or a pointer supports multiple contact points (for example a touchscreen that supports multiple finger touches). The application can use the {{domxref("PointerEvent.isPrimary","isPrimary")}} property to identify a master pointer among the set of <em>active pointers</em> for each pointer type. If an application only wants to support a primary pointer, it can ignore all pointer events that are not primary.</p>
-
-<p>For mouse, there is only one pointer so it will always be the primary pointer. For touch input, a pointer is considered primary if the user touched the screen when there were no other active touches. For pen and stylus input, a pointer is considered primary if the user's pen initially contacted the screen when there were no other active pens contacting the screen.</p>
-
-<h2 id="Déterminer_létat_des_boutons">Déterminer l'état des boutons</h2>
-
-<p>Some pointer devices, such as mouse and pen, support multiple buttons and the button presses can be <em>chorded</em> i.e. depressing an additional button while another button on the pointer device is already depressed. To determine the state of button presses, pointer events uses the {{domxref("MouseEvent.button","button")}} and {{domxref("MouseEvent.buttons","buttons")}} properties of the {{domxref("MouseEvent")}} interface (that {{domxref("PointerEvent")}} inherits from). The following table provides the values of <code>button</code> and <code>buttons</code> for the various device button states.</p>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Device Button State</th>
-   <th scope="col">button</th>
-   <th scope="col">buttons</th>
-  </tr>
-  <tr>
-   <td>Mouse move with no buttons pressed</td>
-   <td>-1</td>
-   <td>0</td>
-  </tr>
-  <tr>
-   <td>Left Mouse, Touch Contact, Pen contact (with no modifier buttons pressed)</td>
-   <td>0</td>
-   <td>1</td>
-  </tr>
-  <tr>
-   <td>Middle Mouse</td>
-   <td>1</td>
-   <td>4</td>
-  </tr>
-  <tr>
-   <td>Right Mouse, Pen contact with barrel button pressed</td>
-   <td>2</td>
-   <td>2</td>
-  </tr>
-  <tr>
-   <td>X1 (back) Mouse</td>
-   <td>3</td>
-   <td>8</td>
-  </tr>
-  <tr>
-   <td>X2 (forward) Mouse</td>
-   <td>4</td>
-   <td>16</td>
-  </tr>
-  <tr>
-   <td>Pen contact with eraser button pressed</td>
-   <td>5</td>
-   <td>32</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Capture_du_pointeur">Capture du pointeur</h2>
-
-<p>Pointer capture allows events for a particular {{domxref("PointerEvent","pointer event")}} to be re-targeted to a particular element instead of the normal <a href="#term_hit_test">hit test</a> at a pointer's location. This can be used to ensure that an element continues to receive pointer events even if the pointer device's contact moves off the element (for example by scrolling).</p>
-
-<p>The following example shows pointer capture being set on an element.</p>
-
-<pre class="brush: html">&lt;html&gt;
-&lt;script&gt;
+</script>
+<body onload="init();">
+ <div id="target"> Touch me ... </div>
+</body>
+</html>
+```
+
+## Déterminer le pointeur principal
+
+In some scenarios there may be multiple pointers (for example a device with both a touchscreen and a mouse) or a pointer supports multiple contact points (for example a touchscreen that supports multiple finger touches). The application can use the {{domxref("PointerEvent.isPrimary","isPrimary")}} property to identify a master pointer among the set of _active pointers_ for each pointer type. If an application only wants to support a primary pointer, it can ignore all pointer events that are not primary.
+
+For mouse, there is only one pointer so it will always be the primary pointer. For touch input, a pointer is considered primary if the user touched the screen when there were no other active touches. For pen and stylus input, a pointer is considered primary if the user's pen initially contacted the screen when there were no other active pens contacting the screen.
+
+## Déterminer l'état des boutons
+
+Some pointer devices, such as mouse and pen, support multiple buttons and the button presses can be _chorded_ i.e. depressing an additional button while another button on the pointer device is already depressed. To determine the state of button presses, pointer events uses the {{domxref("MouseEvent.button","button")}} and {{domxref("MouseEvent.buttons","buttons")}} properties of the {{domxref("MouseEvent")}} interface (that {{domxref("PointerEvent")}} inherits from). The following table provides the values of `button` and `buttons` for the various device button states.
+
+| Device Button State                                                       | button | buttons |
+| ------------------------------------------------------------------------- | ------ | ------- |
+| Mouse move with no buttons pressed                                        | -1     | 0       |
+| Left Mouse, Touch Contact, Pen contact (with no modifier buttons pressed) | 0      | 1       |
+| Middle Mouse                                                              | 1      | 4       |
+| Right Mouse, Pen contact with barrel button pressed                       | 2      | 2       |
+| X1 (back) Mouse                                                           | 3      | 8       |
+| X2 (forward) Mouse                                                        | 4      | 16      |
+| Pen contact with eraser button pressed                                    | 5      | 32      |
+
+## Capture du pointeur
+
+Pointer capture allows events for a particular {{domxref("PointerEvent","pointer event")}} to be re-targeted to a particular element instead of the normal [hit test](#term_hit_test) at a pointer's location. This can be used to ensure that an element continues to receive pointer events even if the pointer device's contact moves off the element (for example by scrolling).
+
+The following example shows pointer capture being set on an element.
+
+```html
+<html>
+<script>
 function downHandler(ev) {
  var el=document.getElementById("target");
  //Element 'target' will receive/capture further events
@@ -321,17 +236,18 @@ function init() {
  var el=document.getElementById("target");
  el.onpointerdown = downHandler;
 }
-&lt;/script&gt;
-&lt;body onload="init();"&gt;
-&lt;div id="target"&gt; Touch me ... &lt;/div&gt;
-&lt;/body&gt;
-&lt;/html&gt;
-</pre>
-
-<p>The following example shows a pointer capture being released (when a {{event("pointercancel")}} event occurs. The browser does this automatically when a {{event("pointerup")}} or {{event("pointercancel")}} event occurs.</p>
-
-<pre class="brush: html">&lt;html&gt;
-&lt;script&gt;
+</script>
+<body onload="init();">
+<div id="target"> Touch me ... </div>
+</body>
+</html>
+```
+
+The following example shows a pointer capture being released (when a {{event("pointercancel")}} event occurs. The browser does this automatically when a {{event("pointerup")}} or {{event("pointercancel")}} event occurs.
+
+```html
+<html>
+<script>
 function downHandler(ev) {
  var el=document.getElementById("target");
  // Element "target" will receive/capture further events
@@ -348,86 +264,79 @@ function init() {
  el.onpointerdown = downHandler;
  el.onpointercancel = cancelHandler;
 }
-&lt;/script&gt;
-&lt;body onload="init();"&gt;
-&lt;div id="target"&gt; Touch me ... &lt;/div&gt;
-&lt;/body&gt;
-&lt;/html&gt;
-</pre>
+</script>
+<body onload="init();">
+<div id="target"> Touch me ... </div>
+</body>
+</html>
+```
 
-<h2 id="Propriété_touch-action">Propriété touch-action</h2>
+## Propriété touch-action
 
-<p>The {{cssxref("touch-action")}} CSS property is used to specifiy whether or not the browser should apply its default (<em>native</em>) touch behavior (such as zooming or panning) to a region. This property may be applied to all elements except: non-replaced inline elements, table rows, row groups, table columns, and column groups.</p>
+The {{cssxref("touch-action")}} CSS property is used to specifiy whether or not the browser should apply its default (_native_) touch behavior (such as zooming or panning) to a region. This property may be applied to all elements except: non-replaced inline elements, table rows, row groups, table columns, and column groups.
 
-<p>A value of <code>auto</code> means the browser is free to apply its default touch behavior (to the specified region) and the value of <code>none</code> disables the browser's default touch behavior for the region. The values <code>pan-x</code> and <code>pan-y</code>, mean that touches that begin on the specified region are only for horizontal and vertical scrolling, respectively. The value <code>manipulation</code> means the browser may consider touches that begin on the element are only for scrolling and zooming.</p>
+A value of `auto` means the browser is free to apply its default touch behavior (to the specified region) and the value of `none` disables the browser's default touch behavior for the region. The values `pan-x` and `pan-y`, mean that touches that begin on the specified region are only for horizontal and vertical scrolling, respectively. The value `manipulation` means the browser may consider touches that begin on the element are only for scrolling and zooming.
 
-<p>In the following example, the browser's default touch behavior is disabled for the <code>div</code> element.</p>
+In the following example, the browser's default touch behavior is disabled for the `div` element.
 
-<pre class="brush: html">&lt;html&gt;
-&lt;body&gt;
- &lt;div style="touch-action:none;"&gt;Can't touch this ... &lt;/div&gt;
-&lt;/body&gt;
-&lt;/html&gt;
-</pre>
+```html
+<html>
+<body>
+ <div style="touch-action:none;">Can't touch this ... </div>
+</body>
+</html>
+```
 
-<p>In the following example, default touch behavior is disabled for some <code>button</code> elements.</p>
+In the following example, default touch behavior is disabled for some `button` elements.
 
-<pre class="brush: css">button#tiny {
+```css
+button#tiny {
   touch-action: none;
 }
-</pre>
+```
 
-<p>In the following example, when the <code>target</code> element is touched, it will only pan in the horizontal direction.</p>
+In the following example, when the `target` element is touched, it will only pan in the horizontal direction.
 
-<pre class="brush: css">#target {
+```css
+#target {
   touch-action: pan-x;
 }
-</pre>
+```
 
-<h2 id="Compatibilité_avec_les_événements_de_souris">Compatibilité avec les événements de souris</h2>
+## Compatibilité avec les événements de souris
 
-<p>Although the pointer event interfaces enable applications to create enhanced user experiences on pointer enabled devices, the reality is the vast majority of today's web content is designed to only work with mouse input. Consequently, even if a browser supports pointer events, the browser must still process mouse events so content that assumes mouse-only input will work as is without direct modification. Ideally, a pointer enabled application does not need to explicitly handle mouse input. However, because the browser must process mouse events, there may be some compatibility issues that need to be handled. This section contains information about pointer event and mouse event interaction and the ramifications for application developers.</p>
+Although the pointer event interfaces enable applications to create enhanced user experiences on pointer enabled devices, the reality is the vast majority of today's web content is designed to only work with mouse input. Consequently, even if a browser supports pointer events, the browser must still process mouse events so content that assumes mouse-only input will work as is without direct modification. Ideally, a pointer enabled application does not need to explicitly handle mouse input. However, because the browser must process mouse events, there may be some compatibility issues that need to be handled. This section contains information about pointer event and mouse event interaction and the ramifications for application developers.
 
-<p>The browser <em>may map generic pointer input to mouse events for compatibility with mouse-based content</em>. This mapping of events is called <em>compatibility mouse events</em>. Authors can prevent the production of certain compatibility mouse events by canceling the pointerdown event but note that:</p>
+The browser _may map generic pointer input to mouse events for compatibility with mouse-based content_. This mapping of events is called _compatibility mouse events_. Authors can prevent the production of certain compatibility mouse events by canceling the pointerdown event but note that:
 
-<ul>
- <li>Mouse events can only be prevented when the pointer is down.</li>
- <li>Hovering pointers (e.g. a mouse with no buttons pressed) cannot have their mouse events prevented.</li>
- <li>The mouseover, mouseout, mouseenter, and mouseleave events are never prevented (even if the pointer is down).</li>
-</ul>
+- Mouse events can only be prevented when the pointer is down.
+- Hovering pointers (e.g. a mouse with no buttons pressed) cannot have their mouse events prevented.
+- The mouseover, mouseout, mouseenter, and mouseleave events are never prevented (even if the pointer is down).
 
-<h2 id="Bonnes_pratiques">Bonnes pratiques</h2>
+## Bonnes pratiques
 
-<p>Here are some <em>best practices</em> to consider when using pointer events:</p>
+Here are some _best practices_ to consider when using pointer events:
 
-<ul>
- <li>Minimize the amount of work done that is done in the event handlers.</li>
- <li>Add the event handlers to a specific target element (rather than the entire document or nodes higher up in the document tree).</li>
- <li>The target element (node) should be large enough to accommodate the largest contact surface area (typically a finger touch). If the target area is too small, touching it could result in firing other events for adjacent elements.</li>
-</ul>
+- Minimize the amount of work done that is done in the event handlers.
+- Add the event handlers to a specific target element (rather than the entire document or nodes higher up in the document tree).
+- The target element (node) should be large enough to accommodate the largest contact surface area (typically a finger touch). If the target area is too small, touching it could result in firing other events for adjacent elements.
 
-<h2 id="Implémentation_et_déploiement">Implémentation et déploiement</h2>
+## Implémentation et déploiement
 
-<p>The <a href="/en-US/docs/Web/API/PointerEvents#Browser_compatibility">pointer events browser compatibility data</a> indicates pointer event support among desktop and mobile browsers is relatively low, although additional implementations are in progress.</p>
+The [pointer events browser compatibility data](/en-US/docs/Web/API/PointerEvents#Browser_compatibility) indicates pointer event support among desktop and mobile browsers is relatively low, although additional implementations are in progress.
 
-<p>Some new value have been proposed for the {{cssxref("touch-action", "CSS touch-action")}} property as part of <a href="https://w3c.github.io/pointerevents/">Pointer Events Level 2</a> specification but currently those new values have no implementation support.</p>
+Some new value have been proposed for the {{cssxref("touch-action", "CSS touch-action")}} property as part of [Pointer Events Level 2](https://w3c.github.io/pointerevents/) specification but currently those new values have no implementation support.
 
-<h2 id="Démos_and_exemples">Démos and exemples</h2>
+## Démos and exemples
 
-<ul>
- <li><a href="http://patrickhlauke.github.io/touch/">Touch/pointer tests and demos (by Patrick H. Lauke)</a></li>
-</ul>
+- [Touch/pointer tests and demos (by Patrick H. Lauke)](http://patrickhlauke.github.io/touch/)
 
-<h2 id="Communauté">Communauté</h2>
+## Communauté
 
-<ul>
- <li><a href="https://github.com/w3c/pointerevents">Pointer Events Working Group</a></li>
- <li><a href="http://lists.w3.org/Archives/Public/public-pointer-events/">Mail list</a></li>
- <li><a href="irc://irc.w3.org:6667/">W3C #pointerevents IRC channel</a></li>
-</ul>
+- [Pointer Events Working Group](https://github.com/w3c/pointerevents)
+- [Mail list](http://lists.w3.org/Archives/Public/public-pointer-events/)
+- [W3C #pointerevents IRC channel](irc://irc.w3.org:6667/)
 
-<h2 id="Sujets_et_ressources_liés">Sujets et ressources liés</h2>
+## Sujets et ressources liés
 
-<ul>
- <li><a href="http://www.w3.org/TR/touch-events/">Touch Events Standard</a></li>
-</ul>
+- [Touch Events Standard](http://www.w3.org/TR/touch-events/)
diff --git a/files/fr/web/api/pointer_events/pinch_zoom_gestures/index.md b/files/fr/web/api/pointer_events/pinch_zoom_gestures/index.md
index 70a6466883..77c78cc8c4 100644
--- a/files/fr/web/api/pointer_events/pinch_zoom_gestures/index.md
+++ b/files/fr/web/api/pointer_events/pinch_zoom_gestures/index.md
@@ -8,25 +8,24 @@ tags:
 translation_of: Web/API/Pointer_events/Pinch_zoom_gestures
 original_slug: Web/API/Pointer_events/gestes_pincer_zoom
 ---
-<p>{{DefaultAPISidebar("Pointer Events")}}</p>
+{{DefaultAPISidebar("Pointer Events")}}
 
-<p>Ajouter la gestion des <em>gestes</em> à une application peut améliorer de manière significative l'expérience utilisateur. Il existe de nombreux types de gestes, du simple geste <em>swipe</em> (balayage de l'écran) aux gestes plus complexes avec plusieurs doigts comme le <em>twist</em> (rotation), où les points de contact (dits <em>pointeurs</em>) bougent dans des directions différentes.</p>
+Ajouter la gestion des _gestes_ à une application peut améliorer de manière significative l'expérience utilisateur. Il existe de nombreux types de gestes, du simple geste _swipe_ (balayage de l'écran) aux gestes plus complexes avec plusieurs doigts comme le _twist_ (rotation), où les points de contact (dits _pointeurs_) bougent dans des directions différentes.
 
-<p>Cet exemple montre comment détecter les gestes de <em>pinch/zoom</em> (pincer/zoomer), en utilisant les {{domxref("Pointer_events","événements de pointeur")}} pour détecter si l'utilisateur bouge deux pointeurs plus proches ou plus loin l'un de l'autre. </p>
+Cet exemple montre comment détecter les gestes de _pinch/zoom_ (pincer/zoomer), en utilisant les {{domxref("Pointer_events","événements de pointeur")}} pour détecter si l'utilisateur bouge deux pointeurs plus proches ou plus loin l'un de l'autre.
 
-<div class="note">
-<p><strong>Note :</strong> Une version <em>en direct</em> de cette application est disponible sur <a href="https://mdn.github.io/dom-examples/pointerevents/Pinch_zoom_gestures.html">Github</a>. Le <a href="https://github.com/mdn/dom-examples/blob/master/pointerevents/Pinch_zoom_gestures.html">code source est également disponible sur Github</a>; les pull requests et <a href="https://github.com/mdn/dom-examples/issues">bug reports</a> sont les bienvenus.</p>
-</div>
+> **Note :** Une version _en direct_ de cette application est disponible sur [Github](https://mdn.github.io/dom-examples/pointerevents/Pinch_zoom_gestures.html). Le [code source est également disponible sur Github](https://github.com/mdn/dom-examples/blob/master/pointerevents/Pinch_zoom_gestures.html); les pull requests et [bug reports](https://github.com/mdn/dom-examples/issues) sont les bienvenus.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Dans cet exemple, on utilise les {{domxref("Pointer_events","événement de pointeur")}} pour détecter simultanément plusieurs appareils de pointage quel qu'en soit le type, comme les doigts, la souris, et le stylet. Le geste de pincer (zoomer), qui consiste à déplacer deux pointeurs plus près l'un vers l'autre, change la couleur d'arrière-plan de l'élément cible en  <code>lightblue</code>. Le geste d'étirer (dézoomer), qui consiste à déplacer deux pointeur plus loin l'un de l'autre, change la couleur d'arrière-plan de l'élément cible en <code>pink</code>.</p>
+Dans cet exemple, on utilise les {{domxref("Pointer_events","événement de pointeur")}} pour détecter simultanément plusieurs appareils de pointage quel qu'en soit le type, comme les doigts, la souris, et le stylet. Le geste de pincer (zoomer), qui consiste à déplacer deux pointeurs plus près l'un vers l'autre, change la couleur d'arrière-plan de l'élément cible en  `lightblue`. Le geste d'étirer (dézoomer), qui consiste à déplacer deux pointeur plus loin l'un de l'autre, change la couleur d'arrière-plan de l'élément cible en `pink`.
 
-<h3 id="Définir_la_cible_du_toucher">Définir la cible du toucher</h3>
+### Définir la cible du toucher
 
-<p>L'application utilise un {{HTMLElement("div")}} pour définir la zone cible du pointeur.</p>
+L'application utilise un {{HTMLElement("div")}} pour définir la zone cible du pointeur.
 
-<pre class="brush: html">&lt;style&gt;
+```html
+<style>
   div {
     margin: 0em;
     padding: 2em;
@@ -35,23 +34,25 @@ original_slug: Web/API/Pointer_events/gestes_pincer_zoom
     background: white;
     border: 1px solid black;
   }
-&lt;/style&gt;
-</pre>
+</style>
+```
 
-<h3 id="État_global">État global</h3>
+### État global
 
-<p>Prendre en charge un mouvement à deux pointeurs nécessite de conserver un état des événements du pointeur durant les différentes phases de l'événement. Cette application utilise deux variables globales pour mettre en cache l'état de l'événement.</p>
+Prendre en charge un mouvement à deux pointeurs nécessite de conserver un état des événements du pointeur durant les différentes phases de l'événement. Cette application utilise deux variables globales pour mettre en cache l'état de l'événement.
 
-<pre class="brush: js">// Variables globales pour mettre en cache l'état de l'événement
+```js
+// Variables globales pour mettre en cache l'état de l'événement
 var evCache = new Array();
 var prevDiff = -1;
-</pre>
+```
 
-<h3 id="Enregistrer_les_gestionnaires_d'événement">Enregistrer les gestionnaires d'événement</h3>
+### Enregistrer les gestionnaires d'événement
 
-<p>Les gestionnaires d'événement sont enregistrés pour les événements de pointeur suivants: {{event("pointerdown")}}, {{event("pointermove")}} et {{event("pointerup")}}. Le gestionnaire pour {{event("pointerup")}} est utilisé pour les événements {{event("pointercancel")}}, {{event("pointerout")}} et {{event("pointerleave")}} puisque ces quatre événements ont la même sémantique dans cette application.</p>
+Les gestionnaires d'événement sont enregistrés pour les événements de pointeur suivants: {{event("pointerdown")}}, {{event("pointermove")}} et {{event("pointerup")}}. Le gestionnaire pour {{event("pointerup")}} est utilisé pour les événements {{event("pointercancel")}}, {{event("pointerout")}} et {{event("pointerleave")}} puisque ces quatre événements ont la même sémantique dans cette application.
 
-<pre class="brush: js">function init() {
+```js
+function init() {
  // Ajoute les gestionnaires d'événements pour la cible du pointeur
  var el=document.getElementById("target");
  el.onpointerdown = pointerdown_handler;
@@ -64,27 +65,29 @@ var prevDiff = -1;
  el.onpointerout = pointerup_handler;
  el.onpointerleave = pointerup_handler;
 }
-</pre>
+```
 
-<h3 id="Pointer_down">Pointer down</h3>
+### Pointer down
 
-<p>L'événement {{event("pointerdown")}} est déclenché quand un pointeur (souris, stylo/stylet ou point de contact sur un écran tactile) entre en contact avec la <em>surface de contact</em>. Dans cette application, l'état de l'événement doit être mis en cache dans le cas où il fait partie d'un geste à deux pointeurs pour pincer/zoomer.</p>
+L'événement {{event("pointerdown")}} est déclenché quand un pointeur (souris, stylo/stylet ou point de contact sur un écran tactile) entre en contact avec la _surface de contact_. Dans cette application, l'état de l'événement doit être mis en cache dans le cas où il fait partie d'un geste à deux pointeurs pour pincer/zoomer.
 
-<pre class="brush: js">function pointerdown_handler(ev) {
+```js
+function pointerdown_handler(ev) {
  // L'événement pointerdown signale le début d'une interraction de toucher.
  // L'événement est mis en cache pour prendre en charge les gestes à 2 doigts
  evCache.push(ev);
  log("pointerDown", ev);
 }
-</pre>
+```
 
-<h3 id="Pointer_move">Pointer move</h3>
+### Pointer move
 
-<p>Le gestionnaire d'événement {{event("pointermove")}} détecte si un utilisateur est en train d'effectuer le geste de pincer/zoomer. Si deux pointeurs sont utilisés, et que la distance entre les pointeurs augmente (ce qui signifie qu'on étire ou dézoome), la couleur d'arrière-plan est changée en <code>pink</code>, et si la distance entre les pointeurs diminue (ce qui signifie qu'on pince ou dézoome), la couleur d'arrière-plan est changée en <code>lightblue</code>. Dans une application plus sophistiquée, le pincement ou l'étirement pourrait être utilisé pour appliquer une sémantique spécifique à l'application.</p>
+Le gestionnaire d'événement {{event("pointermove")}} détecte si un utilisateur est en train d'effectuer le geste de pincer/zoomer. Si deux pointeurs sont utilisés, et que la distance entre les pointeurs augmente (ce qui signifie qu'on étire ou dézoome), la couleur d'arrière-plan est changée en `pink`, et si la distance entre les pointeurs diminue (ce qui signifie qu'on pince ou dézoome), la couleur d'arrière-plan est changée en `lightblue`. Dans une application plus sophistiquée, le pincement ou l'étirement pourrait être utilisé pour appliquer une sémantique spécifique à l'application.
 
-<p>Quand cet événement est traité, la bordure de la cible est définie à <code>dashed</code> pour fournir une indication visuelle claire que l'élément a reçu un événement de déplacement.</p>
+Quand cet événement est traité, la bordure de la cible est définie à `dashed` pour fournir une indication visuelle claire que l'élément a reçu un événement de déplacement.
 
-<pre class="brush: js">function pointermove_handler(ev) {
+```js
+function pointermove_handler(ev) {
  // Cette fonction implémente la détection du mouvement horizontal pincer/zoomer.
  //
  // Si la distance entre les deux pointeurs augmente (zoomer),
@@ -97,7 +100,7 @@ var prevDiff = -1;
  ev.target.style.border = "dashed";
 
  // Trouve le pointeur en cours dans le cache et le met à jour avec cet événement
- for (var i = 0; i &lt; evCache.length; i++) {
+ for (var i = 0; i < evCache.length; i++) {
    if (ev.pointerId == evCache[i].pointerId) {
       evCache[i] = ev;
       break;
@@ -109,15 +112,15 @@ var prevDiff = -1;
    // Calcule la distance entre les deux pointeurs
    var curDiff = Math.abs(evCache[0].clientX - evCache[1].clientX);
 
-   if (prevDiff &gt; 0) {
-     if (curDiff &gt; prevDiff) {
+   if (prevDiff > 0) {
+     if (curDiff > prevDiff) {
        // La distance entre les deux pointeurs a augmenté
-       log("Pinch moving OUT -&gt; Zoom in", ev);
+       log("Pinch moving OUT -> Zoom in", ev);
        ev.target.style.background = "pink";
      }
-     if (curDiff &lt; prevDiff) {
+     if (curDiff < prevDiff) {
        // La distance entre les deux pointeurs a diminué
-       log("Pinch moving IN -&gt; Zoom out",ev);
+       log("Pinch moving IN -> Zoom out",ev);
        ev.target.style.background = "lightblue";
      }
    }
@@ -126,15 +129,16 @@ var prevDiff = -1;
    prevDiff = curDiff;
  }
 }
-</pre>
+```
 
-<h3 id="Pointer_up">Pointer up</h3>
+### Pointer up
 
-<p>L'événement {{event("pointerup")}} est déclenché quand le pointeur est levé de la <em>surface de contact</em>. Quand cela arrive, l'événement est retiré du cache et la couleur d'arrière-plan et bordure de la cible sont rétablies à leur valeur d'origine.</p>
+L'événement {{event("pointerup")}} est déclenché quand le pointeur est levé de la _surface de contact_. Quand cela arrive, l'événement est retiré du cache et la couleur d'arrière-plan et bordure de la cible sont rétablies à leur valeur d'origine.
 
-<p>Dans cette application, ce gestionnaire est également utilisé pour les événements {{event("pointercancel")}}, {{event("pointerleave")}} et {{event("pointerout")}}.</p>
+Dans cette application, ce gestionnaire est également utilisé pour les événements {{event("pointercancel")}}, {{event("pointerleave")}} et {{event("pointerout")}}.
 
-<pre class="brush: js">function pointerup_handler(ev) {
+```js
+function pointerup_handler(ev) {
   log(ev.type, ev);
   // Retire ce pointeur du cache et rétablit l'arrière-plan et
   // et bordure de la cible
@@ -143,54 +147,55 @@ var prevDiff = -1;
   ev.target.style.border = "1px solid black";
 
   // Si le nombre de pointeurs restant est inférieur à deux, remet à zéro la différence
-  if (evCache.length &lt; 2) prevDiff = -1;
+  if (evCache.length < 2) prevDiff = -1;
 }
-</pre>
+```
 
-<h3 id="Application_UI">Application UI</h3>
+### Application UI
 
-<p>Cette application utilise un élément {{HTMLElement("div")}} comme zone de toucher et fournit des boutons pour activer et nettoyer les logs.</p>
+Cette application utilise un élément {{HTMLElement("div")}} comme zone de toucher et fournit des boutons pour activer et nettoyer les logs.
 
-<div class="note">
-  <p><strong>Note :</strong> Pour empêcher que le comportement par défaut du navigateur au toucher surcharge le gestionnaire de l'application, la propriété {{cssxref("touch-action")}} est appliquée à l'élément {{HTMLElement("body")}}.</p>
-</div>
+> **Note :** Pour empêcher que le comportement par défaut du navigateur au toucher surcharge le gestionnaire de l'application, la propriété {{cssxref("touch-action")}} est appliquée à l'élément {{HTMLElement("body")}}.
 
-<pre class="brush: html">&lt;body onload="init();" style="touch-action:none"&gt;
- &lt;div id="target"&gt;Touchez l'écran avec deux pointeurs, puis pincez ou étirez.&lt;br/&gt;
+```html
+<body onload="init();" style="touch-action:none">
+ <div id="target">Touchez l'écran avec deux pointeurs, puis pincez ou étirez.<br/>
     La couleur d'arrière-plan changera en rose au pincement (Zoomer)
-    ou en bleu clair à l'étirement (Dézoomer).&lt;/div&gt;
- &lt;!-- UI pour log/debug --&gt;
- &lt;button id="log" onclick="enableLog(event);"&gt;Démarrer/Stopper les logs&lt;/button&gt;
- &lt;button id="clearlog" onclick="clearLog(event);"&gt;Nettoyer les logs&lt;/button&gt;
- &lt;p&gt;&lt;/p&gt;
- &lt;output&gt;&lt;/output&gt;
-&lt;/body&gt;
-</pre>
+    ou en bleu clair à l'étirement (Dézoomer).</div>
+ <!-- UI pour log/debug -->
+ <button id="log" onclick="enableLog(event);">Démarrer/Stopper les logs</button>
+ <button id="clearlog" onclick="clearLog(event);">Nettoyer les logs</button>
+ <p></p>
+ <output></output>
+</body>
+```
 
-<h3 id="Fonctions_diverses">Fonctions diverses</h3>
+### Fonctions diverses
 
-<p>Ces fonctions prennent en charge l'application mais ne sont pas directement impliquées dans le flux des événements.</p>
+Ces fonctions prennent en charge l'application mais ne sont pas directement impliquées dans le flux des événements.
 
-<h4 id="Gestion_du_Cache">Gestion du Cache</h4>
+#### Gestion du Cache
 
-<p>Cette fonction aide à gérer le cache global des événements, <code>evCache</code>.</p>
+Cette fonction aide à gérer le cache global des événements, `evCache`.
 
-<pre class="brush: js">function remove_event(ev) {
+```js
+function remove_event(ev) {
  // Supprime l'événement du cache
- for (var i = 0; i &lt; evCache.length; i++) {
+ for (var i = 0; i < evCache.length; i++) {
    if (evCache[i].pointerId == ev.pointerId) {
      evCache.splice(i, 1);
      break;
    }
  }
 }
-</pre>
+```
 
-<h4 id="Log_des_événements">Log des événements</h4>
+#### Log des événements
 
-<p>Ces fonctions sont utilisées pour afficher l'activité du pointeur dans la fenêtre de l'application (pour aider à debugger et à apprendre le flux des événements).</p>
+Ces fonctions sont utilisées pour afficher l'activité du pointeur dans la fenêtre de l'application (pour aider à debugger et à apprendre le flux des événements).
 
-<pre class="brush: js">// Flag log
+```js
+// Flag log
 var logEvents = false;
 
 // Fonctions Log/debug
@@ -212,12 +217,10 @@ function clearLog(event) {
  var o = document.getElementsByTagName('output')[0];
  o.innerHTML = "";
 }
-</pre>
+```
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="https://hacks.mozilla.org/2015/08/pointer-events-now-in-firefox-nightly/">Pointer Events now in Firefox Nightly</a>; Mozilla Hacks; by Matt Brubeck and Jason Weathersby; 2015-Aug-04</li>
- <li><a href="https://github.com/jquery/PEP">jQuery Pointer Events Polyfill</a></li>
- <li><a href="http://www.google.com/design/spec/patterns/gestures.html">Gestures</a>; Google Design Patterns</li>
-</ul>
+- [Pointer Events now in Firefox Nightly](https://hacks.mozilla.org/2015/08/pointer-events-now-in-firefox-nightly/); Mozilla Hacks; by Matt Brubeck and Jason Weathersby; 2015-Aug-04
+- [jQuery Pointer Events Polyfill](https://github.com/jquery/PEP)
+- [Gestures](http://www.google.com/design/spec/patterns/gestures.html); Google Design Patterns
diff --git a/files/fr/web/api/pointer_lock_api/index.md b/files/fr/web/api/pointer_lock_api/index.md
index d5921f5b20..ed011ba852 100644
--- a/files/fr/web/api/pointer_lock_api/index.md
+++ b/files/fr/web/api/pointer_lock_api/index.md
@@ -11,48 +11,49 @@ tags:
 translation_of: Web/API/Pointer_Lock_API
 original_slug: WebAPI/Pointer_Lock
 ---
-<div>{{DefaultAPISidebar("Pointer Lock API")}}</div>
+{{DefaultAPISidebar("Pointer Lock API")}}
 
-<p><strong>Pointer lock</strong> (en français <em>Verrouillage du pointeur</em>, précedement appelé mouse lock) permet d'obtenir des informations sur le déplacement de la souris à travers le temps, et ne se cantonne pas à fournir la position absolue du curseur sur l'écran. Cette interface donne accès aux données brutes de la souris, permet de verrouiller la cible des évènements à un élément unique, limiter jusqu'où le mouvement de la souris peut aller dans une direction donnée et cacher le curseur de la vue.<br>
- <br>
- Cette API est utile pour les applications qui ont besoin d'écouter la souris pour contrôler des mouvements ou faire pivoter des objets sur leurs axes. Les jeux 3D de type FPS (First Person Shooter), les outils de modelisation, les vidéos immersives ou encore les cartes satellites sont autant de candidats idéals. L'utilisateur peut en effet changer l'angle de vue en bougeant simplement sa souris et sans cliquer sur aucun bouton ce qui les laisse donc disponibles pour effectuer d'autres actions.<br>
- <br>
- Comme Pointer lock continue de déclencher des évènements même quand le curseur est en dehors des limites du navigateur ou de l'écran, les joueurs peuvent cliquer sur les boutons et déplacer le curseur de la souris sans se soucier de quitter la zone de jeu et de cliquer accidentellement sur une autre application qui changerait le focus de la souris en dehors du jeu.</p>
+**Pointer lock** (en français _Verrouillage du pointeur_, précedement appelé mouse lock) permet d'obtenir des informations sur le déplacement de la souris à travers le temps, et ne se cantonne pas à fournir la position absolue du curseur sur l'écran. Cette interface donne accès aux données brutes de la souris, permet de verrouiller la cible des évènements à un élément unique, limiter jusqu'où le mouvement de la souris peut aller dans une direction donnée et cacher le curseur de la vue.
 
-<h2 id="basics">Concepts de base</h2>
+Cette API est utile pour les applications qui ont besoin d'écouter la souris pour contrôler des mouvements ou faire pivoter des objets sur leurs axes. Les jeux 3D de type FPS (First Person Shooter), les outils de modelisation, les vidéos immersives ou encore les cartes satellites sont autant de candidats idéals. L'utilisateur peut en effet changer l'angle de vue en bougeant simplement sa souris et sans cliquer sur aucun bouton ce qui les laisse donc disponibles pour effectuer d'autres actions.
 
-<p>Pointer Lock partage des similtudes avec la <a href="/fr/docs/Web/API/Element/setCapture">capture de souris</a>. La capture de souris offre un flot ininterrompu d'évènements sur un élément cible quand la souris glisse mais s'arrête quand le bouton est relaché. Pour cette raison, Pointer lock diffère de la capture de souris sur les points suivants :</p>
+Comme Pointer lock continue de déclencher des évènements même quand le curseur est en dehors des limites du navigateur ou de l'écran, les joueurs peuvent cliquer sur les boutons et déplacer le curseur de la souris sans se soucier de quitter la zone de jeu et de cliquer accidentellement sur une autre application qui changerait le focus de la souris en dehors du jeu.
 
-<ul>
- <li>Persistance. Pointer lock ne libère pas la souris tant qu'un appel explicite à l'API n'a pas été effectué ou que l'utilisateur n'a pas fait un mouvement spécifique.</li>
- <li>Ne se limite pas aux bordures du navigateur ou de l'écran.</li>
- <li>Continue de déclencher des évènements peu importe l'état des boutons de la souris.</li>
- <li>Cache le curseur.</li>
-</ul>
+## Concepts de base
 
-<h2 id="method_overview">Vue d'ensemble des méthodes/propriétées</h2>
+Pointer Lock partage des similtudes avec la [capture de souris](/fr/docs/Web/API/Element/setCapture). La capture de souris offre un flot ininterrompu d'évènements sur un élément cible quand la souris glisse mais s'arrête quand le bouton est relaché. Pour cette raison, Pointer lock diffère de la capture de souris sur les points suivants :
 
-<p>Cette section fournit une brève description de chaque propriété et méthode associée à la spécification de Pointer Lock.</p>
+- Persistance. Pointer lock ne libère pas la souris tant qu'un appel explicite à l'API n'a pas été effectué ou que l'utilisateur n'a pas fait un mouvement spécifique.
+- Ne se limite pas aux bordures du navigateur ou de l'écran.
+- Continue de déclencher des évènements peu importe l'état des boutons de la souris.
+- Cache le curseur.
 
-<h3 id="requestPointerLock()">requestPointerLock()</h3>
+## Vue d'ensemble des méthodes/propriétées
 
-<p>L'API Pointer lock, de manière similaire à l'<a href="/fr/docs/Web/Guide/DOM/Using_full_screen_mode">API Fullscreen</a>, étend les les éléments DOM en ajoutant une nouvelle méthode, {{domxref("Element.requestPointerLock","requestPointerLock()")}}. Comme le préfixe fournisseur a récemment été retiré, vous devriez utiliser la syntaxe ci-dessous, par exemple pour demander un verrouillage deu pointeur sur un élément <code>canvas</code>:</p>
+Cette section fournit une brève description de chaque propriété et méthode associée à la spécification de Pointer Lock.
 
-<pre class="brush: js">canvas.requestPointerLock = canvas.requestPointerLock ||
+### requestPointerLock()
+
+L'API Pointer lock, de manière similaire à l'[API Fullscreen](/fr/docs/Web/Guide/DOM/Using_full_screen_mode), étend les les éléments DOM en ajoutant une nouvelle méthode, {{domxref("Element.requestPointerLock","requestPointerLock()")}}. Comme le préfixe fournisseur a récemment été retiré, vous devriez utiliser la syntaxe ci-dessous, par exemple pour demander un verrouillage deu pointeur sur un élément `canvas`:
+
+```js
+canvas.requestPointerLock = canvas.requestPointerLock ||
                             canvas.mozRequestPointerLock ||
                             canvas.webkitPointerLockElement;
 
-canvas.requestPointerLock()</pre>
+canvas.requestPointerLock()
+```
 
-<h3 id="pointerLockElement_et_exitPointerLock()">pointerLockElement et exitPointerLock()</h3>
+### pointerLockElement et exitPointerLock()
 
-<p>L'API Pointer Lock étend également l'interface {{domxref("Document")}}, ajoutant à la fois une nouvelle propriété et une nouvelle méthode. La propriété {{domxref("Document.pointerLockElement","pointerLockElement")}}  est utilisée pour accéder à l'élément actuellement verrouillé (s'il y en a). La méthode {{domxref("Document.exitPointerLock","exitPointerLock()")}}  est utilisée pour libérer le verrou du pointeur.</p>
+L'API Pointer Lock étend également l'interface {{domxref("Document")}}, ajoutant à la fois une nouvelle propriété et une nouvelle méthode. La propriété {{domxref("Document.pointerLockElement","pointerLockElement")}}  est utilisée pour accéder à l'élément actuellement verrouillé (s'il y en a). La méthode {{domxref("Document.exitPointerLock","exitPointerLock()")}}  est utilisée pour libérer le verrou du pointeur.
 
-<p>La propriété {{domxref("Document.pointerLockElement","pointerLockElement")}}  est utile pour déterminer si un élément est actuellement verrouillé (pour une vérification booléenne par exemple) et également pour obtenir une référence vers l'élément s'il existe.</p>
+La propriété {{domxref("Document.pointerLockElement","pointerLockElement")}}  est utile pour déterminer si un élément est actuellement verrouillé (pour une vérification booléenne par exemple) et également pour obtenir une référence vers l'élément s'il existe.
 
-<p>Voici un exemple d'utilisation de <code>pointerLockElement</code>:</p>
+Voici un exemple d'utilisation de `pointerLockElement`:
 
-<pre class="brush: js">document.pointerLockElement = document.pointerLockElement    ||
+```js
+document.pointerLockElement = document.pointerLockElement    ||
                               document.mozPointerLockElement ||
                               document.webkitPointerLockElement;
 
@@ -67,23 +68,25 @@ if (!!document.pointerLockElement) {
 if (document.pointerLockElement === someElement) {
   // someElement est l'élément sur lequel le pointeur est verrouillé
 }
-</pre>
+```
 
-<p>La méthode {{domxref("Document.exitPointerLock()")}} est utilisée pour libérer le verrouillage du pinteur, et, comme {{domxref("Element.requestPointerLock","requestPointerLock")}}, marche de manière asynchrone, on utilise les événements {{event("pointerlockchange")}} et {{event("pointerlockerror")}}, que vous verrez plus en détails ci-dessous.</p>
+La méthode {{domxref("Document.exitPointerLock()")}} est utilisée pour libérer le verrouillage du pinteur, et, comme {{domxref("Element.requestPointerLock","requestPointerLock")}}, marche de manière asynchrone, on utilise les événements {{event("pointerlockchange")}} et {{event("pointerlockerror")}}, que vous verrez plus en détails ci-dessous.
 
-<pre class="brush: js">document.exitPointerLock = document.exitPointerLock    ||
+```js
+document.exitPointerLock = document.exitPointerLock    ||
                            document.mozExitPointerLock ||
                            document.webkitExitPointerLock;
 
 // Essaie de déverrouiller
 document.exitPointerLock();
-</pre>
+```
 
-<h2 id="mouselocklostevent">Événement pointerlockchange</h2>
+## Événement pointerlockchange
 
-<p>Quand l'état de verrouillage du pointeur change — par exemple quand on appelle {{domxref("Element.requestPointerLock","requestPointerLock()")}}, {{domxref("Document.exitPointerLock","exitPointerLock()")}}, que l'utilisateur presse la touche ECHAP, etc.—l'événement {{event("pointerlockchange")}} est envoyé au <code>document</code>. C'est un simple événement qui ne contient pas de données supplémentaires.</p>
+Quand l'état de verrouillage du pointeur change — par exemple quand on appelle {{domxref("Element.requestPointerLock","requestPointerLock()")}}, {{domxref("Document.exitPointerLock","exitPointerLock()")}}, que l'utilisateur presse la touche ECHAP, etc.—l'événement {{event("pointerlockchange")}} est envoyé au `document`. C'est un simple événement qui ne contient pas de données supplémentaires.
 
-<pre class="brush: js">document.pointerLockElement = document.pointerLockElement    ||
+```js
+document.pointerLockElement = document.pointerLockElement    ||
                               document.mozPointerLockElement ||
                               document.webkitPointerLockElement;
 
@@ -98,79 +101,86 @@ function pointerLockChange() {
 document.addEventListener('pointerlockchange', pointerLockChange, false);
 document.addEventListener('mozpointerlockchange', pointerLockChange, false);
 document.addEventListener('webkitpointerlockchange', pointerLockChange, false);
-</pre>
+```
 
-<h2 id="mouselocklostevent">Événement pointerlockerror</h2>
+## Événement pointerlockerror
 
-<p>Quand une erreur est causée par l'appel de {{domxref("Element.requestPointerLock","requestPointerLock()")}} ou {{domxref("Document.exitPointerLock","exitPointerLock()")}}, l'événement {{event("pointerlockerror")}} est envoyé au <code>document</code>. C'est un simple événement qui ne contient pas de données supplémentaires.</p>
+Quand une erreur est causée par l'appel de {{domxref("Element.requestPointerLock","requestPointerLock()")}} ou {{domxref("Document.exitPointerLock","exitPointerLock()")}}, l'événement {{event("pointerlockerror")}} est envoyé au `document`. C'est un simple événement qui ne contient pas de données supplémentaires.
 
-<pre class="brush: js">document.addEventListener('pointerlockerror', lockError, false);
+```js
+document.addEventListener('pointerlockerror', lockError, false);
 document.addEventListener('mozpointerlockerror', lockError, false);
 document.addEventListener('webkitpointerlockerror', pointerLockChange, false);
 
 function lockError(e) {
   alert("Pointer lock failed");
 }
-</pre>
+```
 
-<div class="note">
-  <p><strong>Note :</strong> Jusqu'à Firefox 50, les événements ci-dessus étaient préfixés avec <code>moz</code>.</p>
-</div>
+> **Note :** Jusqu'à Firefox 50, les événements ci-dessus étaient préfixés avec `moz`.
 
-<h2 id="extensions">Extensions aux événements de souris</h2>
+## Extensions aux événements de souris
 
-<p>L'API Pointer lock étend l'interface {{domxref("MouseEvent")}} normale avec les attributs de mouvement. Deux nouveaux attributs sont ajoutés aux événements de souris —{{domxref("MouseEvent.movementX","movementX")}} et {{domxref("MouseEvent.movementY","movementY")}}— fournissant le changement de position de la souris. Ces paramètres ont pour valeur les différences entre les valeurs des propriétés de {{domxref("MouseEvent.screenX","screenX")}} / {{domxref("MouseEvent.screenY","screenY")}} stockées dans les événements {{event("mousemove")}}, <code>eNow</code> et <code>ePrevious</code>. En d'autres termes, <code>movementX = eNow.screenX - ePrevious.screenX</code>.</p>
+L'API Pointer lock étend l'interface {{domxref("MouseEvent")}} normale avec les attributs de mouvement. Deux nouveaux attributs sont ajoutés aux événements de souris —{{domxref("MouseEvent.movementX","movementX")}} et {{domxref("MouseEvent.movementY","movementY")}}— fournissant le changement de position de la souris. Ces paramètres ont pour valeur les différences entre les valeurs des propriétés de {{domxref("MouseEvent.screenX","screenX")}} / {{domxref("MouseEvent.screenY","screenY")}} stockées dans les événements {{event("mousemove")}}, `eNow` et `ePrevious`. En d'autres termes, `movementX = eNow.screenX - ePrevious.screenX`.
 
-<h3 id="locked_state">État verrouillé</h3>
+### État verrouillé
 
-<p>Quand le verrouillage du pointeur est activé, les propriétés standard {{domxref("MouseEvent.clientX","clientX")}}, {{domxref("MouseEvent.clientY","clientY")}}, {{domxref("MouseEvent.screenX","screenX")}}, et {{domxref("MouseEvent.screenY","screenY")}} sont gardées constantes, comme si la souris ne bougeait pas. Les propriétés {{domxref("MouseEvent.movementX","movementX")}} et {{domxref("MouseEvent.movementY","movementY")}} continuent de fournir le changement de position de la souris. Il n'y a pas de limite aux valeurs {{domxref("MouseEvent.movementX","movementX")}} et {{domxref("MouseEvent.movementY","movementY")}}, si la souris continue de bouger toujours dans la même direction. Le curseur de la souris n'existe pas et il ne peut pas sortir de la fenêtre ou être bloqué par un bord de l'écran.</p>
+Quand le verrouillage du pointeur est activé, les propriétés standard {{domxref("MouseEvent.clientX","clientX")}}, {{domxref("MouseEvent.clientY","clientY")}}, {{domxref("MouseEvent.screenX","screenX")}}, et {{domxref("MouseEvent.screenY","screenY")}} sont gardées constantes, comme si la souris ne bougeait pas. Les propriétés {{domxref("MouseEvent.movementX","movementX")}} et {{domxref("MouseEvent.movementY","movementY")}} continuent de fournir le changement de position de la souris. Il n'y a pas de limite aux valeurs {{domxref("MouseEvent.movementX","movementX")}} et {{domxref("MouseEvent.movementY","movementY")}}, si la souris continue de bouger toujours dans la même direction. Le curseur de la souris n'existe pas et il ne peut pas sortir de la fenêtre ou être bloqué par un bord de l'écran.
 
-<h3 id="unlocked_state">État déverrouillé</h3>
+### État déverrouillé
 
-<p>Les paramètres {{domxref("MouseEvent.movementX","movementX")}} et {{domxref("MouseEvent.movementY","movementY")}} sont disponibles quel que soit l'état de la souris, verrou ou non.</p>
+Les paramètres {{domxref("MouseEvent.movementX","movementX")}} et {{domxref("MouseEvent.movementY","movementY")}} sont disponibles quel que soit l'état de la souris, verrou ou non.
 
-<p>Quand la souris est déverrouillée, il est possible que le curseur soit en dehors de la fenêtre et il est alors remis automatiquement à l'intérieur. Si cela arrive, {{domxref("MouseEvent.movementX","movementX")}} et {{domxref("MouseEvent.movementY","movementY")}} sont définis à zéro.</p>
+Quand la souris est déverrouillée, il est possible que le curseur soit en dehors de la fenêtre et il est alors remis automatiquement à l'intérieur. Si cela arrive, {{domxref("MouseEvent.movementX","movementX")}} et {{domxref("MouseEvent.movementY","movementY")}} sont définis à zéro.
 
-<h2 id="example">Simple exemple pas à pas</h2>
+## Simple exemple pas à pas
 
-<p>Nous avons écrit une <a href="https://mdn.github.io/dom-examples/pointer-lock/">démo de verrouillage de pointer</a> pour vous montrer comment l'utiliser pour mettre en place un système de contrôle simple (<a href="https://github.com/mdn/dom-examples/tree/master/pointer-lock">voir le code source</a>). La démo ressemble à ça:</p>
+Nous avons écrit une [démo de verrouillage de pointer](https://mdn.github.io/dom-examples/pointer-lock/) pour vous montrer comment l'utiliser pour mettre en place un système de contrôle simple ([voir le code source](https://github.com/mdn/dom-examples/tree/master/pointer-lock)). La démo ressemble à ça:
 
-<p><img alt="Un cercle rouge sur un arrière-plan noir." src="pointer-lock.png"></p>
+![Un cercle rouge sur un arrière-plan noir.](pointer-lock.png)
 
-<p>Cette démo utilise JavaScript pour dessiner une balle dans un élément {{ htmlelement("canvas") }}. Quand vous cliquez sur le canvas, le verrouillage du pointeur est utilisé pour supprimer le curseur de la souris à l'écran et vous permettre de déplacer la balle avec la souris. Voyons comment cela fonctionne.</p>
+Cette démo utilise JavaScript pour dessiner une balle dans un élément {{ htmlelement("canvas") }}. Quand vous cliquez sur le canvas, le verrouillage du pointeur est utilisé pour supprimer le curseur de la souris à l'écran et vous permettre de déplacer la balle avec la souris. Voyons comment cela fonctionne.
 
-<p>On définit les positions initiales x et y sur le canvas:</p>
+On définit les positions initiales x et y sur le canvas:
 
-<pre class="brush: js">var x = 50;
-var y = 50;</pre>
+```js
+var x = 50;
+var y = 50;
+```
 
-<p>Les méthodes de verrouillage de pointeur sont préfixées dans les anciennes versions des navigateurs, on prend donc en compte les différentes implémentations des navigateurs:</p>
+Les méthodes de verrouillage de pointeur sont préfixées dans les anciennes versions des navigateurs, on prend donc en compte les différentes implémentations des navigateurs:
 
-<pre class="brush: js">canvas.requestPointerLock = canvas.requestPointerLock ||
+```js
+canvas.requestPointerLock = canvas.requestPointerLock ||
                             canvas.mozRequestPointerLock ||
                             canvas.webkitRequestPointerLock;
 
 document.exitPointerLock = document.exitPointerLock ||
                            document.mozExitPointerLock ||
-                           document.webkitExitPointerLock;</pre>
+                           document.webkitExitPointerLock;
+```
 
-<p>Maintenant, on définit un gestionnaire d'événement qui appelle la méthode <code>requestPointerLock()</code> quand le canvas est cliqué, ce qui déclenche le verrouillage du pointeur.</p>
+Maintenant, on définit un gestionnaire d'événement qui appelle la méthode `requestPointerLock()` quand le canvas est cliqué, ce qui déclenche le verrouillage du pointeur.
 
-<pre class="brush: js">canvas.onclick = function() {
+```js
+canvas.onclick = function() {
   canvas.requestPointerLock();
-}</pre>
+}
+```
 
-<p>Et maintenant le gestionnaire d'événement pour le verrouillage: <code>pointerlockchange</code>. Quand cet événement se déclenche, on appelle <code>lockChangeAlert()</code> pour gérer le changement.</p>
+Et maintenant le gestionnaire d'événement pour le verrouillage: `pointerlockchange`. Quand cet événement se déclenche, on appelle `lockChangeAlert()` pour gérer le changement.
 
-<pre class="brush: js">// Gestionnaire d'événement de changement d'état du verrouilllage pour les différents navigateurs
+```js
+// Gestionnaire d'événement de changement d'état du verrouilllage pour les différents navigateurs
 document.addEventListener('pointerlockchange', lockChangeAlert, false);
 document.addEventListener('mozpointerlockchange', lockChangeAlert, false);
 document.addEventListener('webkitpointerlockchange', lockChangeAlert, false);
-</pre>
+```
 
-<p>La fonction suivante vérifie si la propriété <code>pointLockElement</code> est sur notre canvas. Si c'est le cas, on attache un gestionnaire d'événement pour gérer les mouvements de la souris avec la fonction <code>updatePosition()</code>. Sinon, elle enlève le gestionnaire d'événement.</p>
+La fonction suivante vérifie si la propriété `pointLockElement` est sur notre canvas. Si c'est le cas, on attache un gestionnaire d'événement pour gérer les mouvements de la souris avec la fonction `updatePosition()`. Sinon, elle enlève le gestionnaire d'événement.
 
-<pre class="brush: js">function lockChangeAlert() {
+```js
+function lockChangeAlert() {
   if (document.pointerLockElement === canvas) {
     console.log('The pointer lock status is now locked');
     document.addEventListener("mousemove", updatePosition, false);
@@ -178,26 +188,28 @@ document.addEventListener('webkitpointerlockchange', lockChangeAlert, false);
     console.log('The pointer lock status is now unlocked');
     document.removeEventListener("mousemove", updatePosition, false);
   }
-}</pre>
+}
+```
 
-<p>La fonction <code>updatePosition()</code> met à jour la position de la balle sur le canvas (les valeurs <code>x</code> et <code>y</code>), et inclut également des instructions <code>if()</code> pour vérifier si la balle est sortie des bords du canvas. Dans ce cas, la balle se ressort au bord opposé. Elle vérifie également si un appel à <code><a href="/fr/docs/Web/API/Window/requestAnimationFrame">requestAnimationFrame()</a></code> a été effectué et si ce n'est pas le cas, l'appelle pour qu'elle déclenche la fonction <code>canvasDraw()</code> et mette à jour le canvas. Un tracker est mis en place pour afficher les valeurs X et Y à l'écran, pour référence.</p>
+La fonction `updatePosition()` met à jour la position de la balle sur le canvas (les valeurs `x` et `y`), et inclut également des instructions `if()` pour vérifier si la balle est sortie des bords du canvas. Dans ce cas, la balle se ressort au bord opposé. Elle vérifie également si un appel à [`requestAnimationFrame()`](/fr/docs/Web/API/Window/requestAnimationFrame) a été effectué et si ce n'est pas le cas, l'appelle pour qu'elle déclenche la fonction `canvasDraw()` et mette à jour le canvas. Un tracker est mis en place pour afficher les valeurs X et Y à l'écran, pour référence.
 
-<pre class="brush: js">var tracker = document.getElementById('tracker');
+```js
+var tracker = document.getElementById('tracker');
 
 var animation;
 function updatePosition(e) {
   x += e.movementX;
   y += e.movementY;
-  if (x &gt; canvas.width + RADIUS) {
+  if (x > canvas.width + RADIUS) {
     x = -RADIUS;
   }
-  if (y &gt; canvas.height + RADIUS) {
+  if (y > canvas.height + RADIUS) {
     y = -RADIUS;
   }
-  if (x &lt; -RADIUS) {
+  if (x < -RADIUS) {
     x = canvas.width + RADIUS;
   }
-  if (y &lt; -RADIUS) {
+  if (y < -RADIUS) {
     y = canvas.height + RADIUS;
   }
   tracker.textContent = "X position: " + x + ", Y position: " + y;
@@ -208,52 +220,40 @@ function updatePosition(e) {
       canvasDraw();
     });
   }
-}</pre>
+}
+```
 
-<p>La fonction <code>canvasDraw()</code> affiche la balle aux position <code>x</code> et <code>y</code> en cours:</p>
+La fonction `canvasDraw()` affiche la balle aux position `x` et `y` en cours:
 
-<pre class="brush: js">function canvasDraw() {
+```js
+function canvasDraw() {
   ctx.fillStyle = "black";
   ctx.fillRect(0, 0, canvas.width, canvas.height);
   ctx.fillStyle = "#f00";
   ctx.beginPath();
   ctx.arc(x, y, RADIUS, 0, degToRad(360), true);
   ctx.fill();
-}</pre>
+}
+```
 
-<h2 id="iframe_limitations">iframe limitations</h2>
+## iframe limitations
 
-<p>Le verrouilage du pointeur ne peut concerner qu'une seule iframe à la fois. Quand vous verrouillez une iframe, vous ne pouvez pas essayer de verrouiller une autre iframe et y transférer la cible; une erreur sera levée. Pour éviter cette limitation, déverrouillez d'abord la première iframe, puis verrouillez la seconde.</p>
+Le verrouilage du pointeur ne peut concerner qu'une seule iframe à la fois. Quand vous verrouillez une iframe, vous ne pouvez pas essayer de verrouiller une autre iframe et y transférer la cible; une erreur sera levée. Pour éviter cette limitation, déverrouillez d'abord la première iframe, puis verrouillez la seconde.
 
-<p>Tandis que cela fonctionne pour les iframes par défaut, les iframes en "sandbox" bloquent le verrouillage. La possibilité d'éviter cette limitation, sous la forme de la combinaison attribut/valeur <code>&lt;iframe sandbox="allow-pointer-lock"&gt;</code>, devrait bientôt apparaître dans Chrome.</p>
+Tandis que cela fonctionne pour les iframes par défaut, les iframes en "sandbox" bloquent le verrouillage. La possibilité d'éviter cette limitation, sous la forme de la combinaison attribut/valeur `<iframe sandbox="allow-pointer-lock">`, devrait bientôt apparaître dans Chrome.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Etat</th>
-   <th scope="col">Commentaire</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('Pointer Lock')}}</td>
-   <td>{{Spec2('Pointer Lock')}}</td>
-   <td>Initial specification.</td>
-  </tr>
- </tbody>
-</table>
+| Specification                        | Etat                             | Commentaire            |
+| ------------------------------------ | -------------------------------- | ---------------------- |
+| {{SpecName('Pointer Lock')}} | {{Spec2('Pointer Lock')}} | Initial specification. |
 
-<h2 id="Browser_compatibility">Compatibilité navigateur</h2>
+## Compatibilité navigateur
 
-<h3 id="Element.requestPointerLock"><code>Element.requestPointerLock</code></h3>
+### `Element.requestPointerLock`
 
-<p>{{Compat("api.Element.requestPointerLock")}}</p>
+{{Compat("api.Element.requestPointerLock")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("MouseEvent")}}</li>
-</ul>
+- {{domxref("MouseEvent")}}
diff --git a/files/fr/web/api/pointerevent/index.md b/files/fr/web/api/pointerevent/index.md
index b17aaefffb..4e6d362b9f 100644
--- a/files/fr/web/api/pointerevent/index.md
+++ b/files/fr/web/api/pointerevent/index.md
@@ -3,144 +3,113 @@ title: PointerEvent
 slug: Web/API/PointerEvent
 translation_of: Web/API/PointerEvent
 ---
-<p>{{ APIRef("Pointer Events") }}</p>
-
-<p>L'interface <strong><code>PointerEvent</code></strong> représente les données de l'état d'un événément du DOM produit par un pointeur, tels que la géométrie du point de contact, le type d'appareil qui a généré l'événément, l'intensité de pression qui a été appliquée au contact de la surface, etc.</p>
-
-<p>Un <em>pointeur</em> est une représentation agnostique de tout appareil de saisie (tels qu'une souris, un stylet, ou un point de contact sur une surface tactile). Le pointeur peut cibler des coordonnées spécifiques (ou une collection de coordonnées) sur la surface de contact telle qu'un écran.</p>
-
-<p>Le <em>test de ciblage</em> d'un pointeur est le processus qu'un navigateur utilise pour déterminer l'élément pour un événément de pointeur. Typiquement, cela est déterminé en considérant la position du pointeur ainsi que l'agencement visuel des éléments dans un document sur l'écran.</p>
-
-<h2 id="Constructeurs">Constructeurs</h2>
-
-<dl>
- <dt>{{domxref("PointerEvent.PointerEvent", "PointerEvent()")}}</dt>
- <dd>Crée un PointerEvent synthétique et anonyme.</dd>
-</dl>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<p><em>Cette interface hérite des proprétés de {{domxref("MouseEvent")}} et {{domxref("Event")}}.</em></p>
-
-<dl>
- <dt>{{ domxref('PointerEvent.pointerId')}} {{readonlyInline}}</dt>
- <dd>Un identifiant unique pour le pointeur ayant provoqué l'événément.</dd>
- <dt>{{ domxref('PointerEvent.width')}} {{readonlyInline}}</dt>
- <dd>La largeur (magnitude sur l'axe X), en pixels CSS, de la géométrie de contact du pointeur.</dd>
- <dt>{{ domxref('PointerEvent.height')}} {{readonlyInline}}</dt>
- <dd>La hauteur (magniture sur l'axe Y), en pixels CSS, de la géométrie de contact du pointeur.</dd>
- <dt>{{ domxref('PointerEvent.pressure')}} {{readonlyInline}}</dt>
- <dd>La pressure normalisée de l'influx du pointeur dans un intervalle compris entre 0 et 1, où 0 et 1 représentent respectivement la pression minimale et maximale que l'appareil est capable de détecter.</dd>
- <dt>{{ domxref('PointerEvent.tangentialPressure')}} {{readonlyInline}}</dt>
- <dd>La pression tangentielle normalisée d'un influx de pointeur (également nommée compression ou contrainte cylindrique), où 0 et 1 représentent respectivement la pression minimale et maximale que l'appareil est capable de détecter.</dd>
- <dt>{{ domxref('PointerEvent.tiltX')}} {{readonlyInline}}</dt>
- <dd>Le plan de l'angle (en dégrés, dans un intervalle compris entre -90 et 90) entre le plan Y-Z et le plan contenant à la fois l'axe du transducteur (ex. : un crayon stylet) et l'axe Y.</dd>
- <dt>{{ domxref('PointerEvent.tiltY')}} {{readonlyInline}}</dt>
- <dd>Le plan de l'angle (en dégrés, dans un intervalle compris entre -90 et 90) entre le plan X-Z et le plan contenant à la fois l'axe du transducteur (ex. : un crayon stylet) et l'axe X.</dd>
- <dt>{{ domxref('PointerEvent.twist')}} {{readonlyInline}}</dt>
- <dd>La rotation en degrés et dans le sens des aiguilles d'une montre, d'un transducteur (ex. : crayon stylet) autour de axe principal, avec une valeur comprise dans un intervalle entre 0 et 359.</dd>
- <dt>{{ domxref('PointerEvent.pointerType')}} {{readonlyInline}}</dt>
- <dd>Indique le type d'appareil qui a provoqué l'événément (souris, stylet, touché, etc.)</dd>
- <dt>{{ domxref('PointerEvent.isPrimary')}} {{readonlyInline}}</dt>
- <dd>Indique si le pointeur est le principal appareil de ce type.</dd>
-</dl>
-
-<h2 id="Methods">Methods</h2>
-
-<dl>
- <dt>{{ domxref('PointerEvent.getCoalescedEvents()')}} {{deprecated_inline}}</dt>
- <dd>Retourne une séquence de toutes les instances de <code>PointerEvent</code> qui ont été dirigées vers l'événément {{event("pointermove")}} envoyé.</dd>
-</dl>
-
-<h2 id="Types_d'événéments_de_pointeur">Types d'événéments de pointeur</h2>
-
-<p>L'interface <code>PointerEvent</code> a plusieurs types d'événéments. Pour déterminer quel événément s'est produit, regardez la propriété {{ domxref("Event.type", "type") }} de l'événément.</p>
-
-<div class="note">
-  <p><strong>Note :</strong> Il est important de remarquer que dans beaucoup de cas, à la fois les événéments du pointeur et de la souris sont envoyés (afin de laisser la logique interagir avec l'utilisateur même lorsqu'elle n'est pas spécifique à un type de pointeur) . Si vous utilisez les événéments de pointeur, vous devez exécuter {{ domxref("event.preventDefault()") }} afin d'empêcher l'événément de la souris d'être également envoyée.</p>
-</div>
-
-<dl>
- <dt>{{event('pointerover')}}</dt>
- <dd>Cet événément est déclenché lorsqu'un appareil de pointage est déplacé vers la zone du test de ciblage d'un élément.</dd>
- <dt>{{event('pointerenter')}}</dt>
- <dd>Cet événément est déclenché lorsqu'un appareil de pointage est déplacé vers la zone du test de ciblage d'un élément ou l'un de ses descendants, ce qui inclut un événément de pointage vers le bas d'un appareil qui ne propose pas de fonctionnalité de survol (voir pointage vers le bas). Ce type d'événément est similaire à un pointage par dessus, mais se différencie en ne faisant pas circuler l'événément.</dd>
- <dt>{{event('pointerdown')}}</dt>
- <dd>L'événément est déclenché lorsqu'un pointeur devient <em>actif</em>. Pour une souris, il est déclenché lorsque l'appareil passe d'aucun bouton pressé à au moins un bouton pressé. Pour un touché, il est déclenché lorsqu'un contact physique est effectué avec le numériseur. Pour un stylet, il est déclenché au contact de ce dernier avec le numériseur.</dd>
- <dt>{{event('pointermove')}}</dt>
- <dd>Cet événément est déclenché lorsqu'un pointeur change de coordonnées.</dd>
- <dt>{{event('pointerup')}}</dt>
- <dd>Cet événement est déclenché lorsqu'un pointeur n'est plus <em>actif</em>.</dd>
- <dt>{{event('pointercancel')}}</dt>
- <dd>Un navigateur déclenche cet événément s'il conclut que le pointeur ne sera plus capable de générer des événéments (par exemple, l'appareil concerné a été désactivé).</dd>
- <dt>{{event('pointerout')}}</dt>
- <dd>Cet événément est déclenché pour plusieurs raisons qui incluent : l'appareil de pointage est déplacé en dehors de la zone du test de ciblage d'un élément; déclencher l'événément de pointage vers le haut pour un appareil qui ne supporte pas le survol (voir pointage vers le haut); après avoir déclenché un événément de pointage annulé (voir pointage annulé); lorsqu'un stylet quitte la zone de portée pour être détectée au survol par le numériseur.</dd>
- <dt>{{event('pointerleave')}}</dt>
- <dd>Cet événément est déclenché lorsqu'un appareil de pointage est déplacé en dehors de la zone de ciblage d'un élément. Pour les appareils avec un stylet, cet événément est déclenché lorsque le stylet quitte la zone de portée pour être détectée au survol par le numériseur.</dd>
- <dt>{{event('gotpointercapture')}}</dt>
- <dd>Cet événément est déclenché lorsqu'un élément est capturé par un pointeur.</dd>
- <dt>{{event('lostpointercapture')}}</dt>
- <dd>Cet événément est déclenché après qu'un pointeur ait relâché sa capture.</dd>
-</dl>
-
-<h2 id="GlobalEventHandlers">GlobalEventHandlers</h2>
-
-<dl>
- <dt>{{ domxref('GlobalEventHandlers.onpointerover') }}</dt>
- <dd>Un {{domxref('GlobalEventHandlers','global event handler')}} pour l'événement {{event('pointerover')}}.</dd>
- <dt>{{ domxref('GlobalEventHandlers.onpointerenter') }}</dt>
- <dd>Un {{domxref('GlobalEventHandlers','global event handler')}} pour l'événement {{event('pointerenter')}}.</dd>
- <dt>{{ domxref('GlobalEventHandlers.onpointerdown') }}</dt>
- <dd>Un {{domxref('GlobalEventHandlers','global event handler')}} pour l'événement {{event('pointerdown')}}.</dd>
- <dt>{{ domxref('GlobalEventHandlers.onpointermove') }}</dt>
- <dd>Un {{domxref('GlobalEventHandlers','global event handler')}} pour l'événement {{event('pointermove')}}.</dd>
- <dt>{{ domxref('GlobalEventHandlers.onpointerup') }}</dt>
- <dd>Un {{domxref('GlobalEventHandlers','global event handler')}} pour l'événement {{event('pointerup')}}.</dd>
- <dt>{{ domxref('GlobalEventHandlers.onpointercancel') }}</dt>
- <dd>Un {{domxref('GlobalEventHandlers','global event handler')}} pour l'événement {{event('pointercancel')}}.</dd>
- <dt>{{ domxref('GlobalEventHandlers.onpointerout') }}</dt>
- <dd>Un {{domxref('GlobalEventHandlers','global event handler')}} pour l'événement {{event('pointerout')}}.</dd>
- <dt>{{ domxref('GlobalEventHandlers.onpointerleave') }}</dt>
- <dd>Un {{domxref('GlobalEventHandlers','global event handler')}} pour l'événement {{event('pointerleave')}}.</dd>
-</dl>
-
-<h2 id="Exemple">Exemple</h2>
-
-<p>Un exemple de chaque propriété, type d'événément, et un gestionnaire d'événéments global sont inclus dans leur page respective de référence.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Pointer Events 2','#pointerevent-interface', 'PointerEvent')}}</td>
-   <td>{{Spec2('Pointer Events 2')}}</td>
-   <td>Version non-stable.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('Pointer Events', '#pointerevent-interface', 'PointerEvent')}}</td>
-   <td>{{Spec2('Pointer Events')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
-
-
-
-<p>{{Compat("api.PointerEvent")}}</p>
-
-<h2 id="See_also">See also</h2>
-
-<ul>
- <li>{{ domxref("Touch_events","Touch Events") }}</li>
- <li>{{ domxref("GestureEvent") }}</li>
- <li>{{ domxref("MSGestureEvent") }}</li>
- <li>{{cssxref("touch-action")}}</li>
-</ul>
+{{ APIRef("Pointer Events") }}
+
+L'interface **`PointerEvent`** représente les données de l'état d'un événément du DOM produit par un pointeur, tels que la géométrie du point de contact, le type d'appareil qui a généré l'événément, l'intensité de pression qui a été appliquée au contact de la surface, etc.
+
+Un *pointeur* est une représentation agnostique de tout appareil de saisie (tels qu'une souris, un stylet, ou un point de contact sur une surface tactile). Le pointeur peut cibler des coordonnées spécifiques (ou une collection de coordonnées) sur la surface de contact telle qu'un écran.
+
+Le *test de ciblage* d'un pointeur est le processus qu'un navigateur utilise pour déterminer l'élément pour un événément de pointeur. Typiquement, cela est déterminé en considérant la position du pointeur ainsi que l'agencement visuel des éléments dans un document sur l'écran.
+
+## Constructeurs
+
+- {{domxref("PointerEvent.PointerEvent", "PointerEvent()")}}
+  - : Crée un PointerEvent synthétique et anonyme.
+
+## Propriétés
+
+_Cette interface hérite des proprétés de {{domxref("MouseEvent")}} et {{domxref("Event")}}._
+
+- {{ domxref('PointerEvent.pointerId')}} {{readonlyInline}}
+  - : Un identifiant unique pour le pointeur ayant provoqué l'événément.
+- {{ domxref('PointerEvent.width')}} {{readonlyInline}}
+  - : La largeur (magnitude sur l'axe X), en pixels CSS, de la géométrie de contact du pointeur.
+- {{ domxref('PointerEvent.height')}} {{readonlyInline}}
+  - : La hauteur (magniture sur l'axe Y), en pixels CSS, de la géométrie de contact du pointeur.
+- {{ domxref('PointerEvent.pressure')}} {{readonlyInline}}
+  - : La pressure normalisée de l'influx du pointeur dans un intervalle compris entre 0 et 1, où 0 et 1 représentent respectivement la pression minimale et maximale que l'appareil est capable de détecter.
+- {{ domxref('PointerEvent.tangentialPressure')}} {{readonlyInline}}
+  - : La pression tangentielle normalisée d'un influx de pointeur (également nommée compression ou contrainte cylindrique), où 0 et 1 représentent respectivement la pression minimale et maximale que l'appareil est capable de détecter.
+- {{ domxref('PointerEvent.tiltX')}} {{readonlyInline}}
+  - : Le plan de l'angle (en dégrés, dans un intervalle compris entre -90 et 90) entre le plan Y-Z et le plan contenant à la fois l'axe du transducteur (ex. : un crayon stylet) et l'axe Y.
+- {{ domxref('PointerEvent.tiltY')}} {{readonlyInline}}
+  - : Le plan de l'angle (en dégrés, dans un intervalle compris entre -90 et 90) entre le plan X-Z et le plan contenant à la fois l'axe du transducteur (ex. : un crayon stylet) et l'axe X.
+- {{ domxref('PointerEvent.twist')}} {{readonlyInline}}
+  - : La rotation en degrés et dans le sens des aiguilles d'une montre, d'un transducteur (ex. : crayon stylet) autour de axe principal, avec une valeur comprise dans un intervalle entre 0 et 359.
+- {{ domxref('PointerEvent.pointerType')}} {{readonlyInline}}
+  - : Indique le type d'appareil qui a provoqué l'événément (souris, stylet, touché, etc.)
+- {{ domxref('PointerEvent.isPrimary')}} {{readonlyInline}}
+  - : Indique si le pointeur est le principal appareil de ce type.
+
+## Methods
+
+- {{ domxref('PointerEvent.getCoalescedEvents()')}} {{deprecated_inline}}
+  - : Retourne une séquence de toutes les instances de `PointerEvent` qui ont été dirigées vers l'événément {{event("pointermove")}} envoyé.
+
+## Types d'événéments de pointeur
+
+L'interface `PointerEvent` a plusieurs types d'événéments. Pour déterminer quel événément s'est produit, regardez la propriété {{ domxref("Event.type", "type") }} de l'événément.
+
+> **Note :** Il est important de remarquer que dans beaucoup de cas, à la fois les événéments du pointeur et de la souris sont envoyés (afin de laisser la logique interagir avec l'utilisateur même lorsqu'elle n'est pas spécifique à un type de pointeur) . Si vous utilisez les événéments de pointeur, vous devez exécuter {{ domxref("event.preventDefault()") }} afin d'empêcher l'événément de la souris d'être également envoyée.
+
+- {{event('pointerover')}}
+  - : Cet événément est déclenché lorsqu'un appareil de pointage est déplacé vers la zone du test de ciblage d'un élément.
+- {{event('pointerenter')}}
+  - : Cet événément est déclenché lorsqu'un appareil de pointage est déplacé vers la zone du test de ciblage d'un élément ou l'un de ses descendants, ce qui inclut un événément de pointage vers le bas d'un appareil qui ne propose pas de fonctionnalité de survol (voir pointage vers le bas). Ce type d'événément est similaire à un pointage par dessus, mais se différencie en ne faisant pas circuler l'événément.
+- {{event('pointerdown')}}
+  - : L'événément est déclenché lorsqu'un pointeur devient _actif_. Pour une souris, il est déclenché lorsque l'appareil passe d'aucun bouton pressé à au moins un bouton pressé. Pour un touché, il est déclenché lorsqu'un contact physique est effectué avec le numériseur. Pour un stylet, il est déclenché au contact de ce dernier avec le numériseur.
+- {{event('pointermove')}}
+  - : Cet événément est déclenché lorsqu'un pointeur change de coordonnées.
+- {{event('pointerup')}}
+  - : Cet événement est déclenché lorsqu'un pointeur n'est plus _actif_.
+- {{event('pointercancel')}}
+  - : Un navigateur déclenche cet événément s'il conclut que le pointeur ne sera plus capable de générer des événéments (par exemple, l'appareil concerné a été désactivé).
+- {{event('pointerout')}}
+  - : Cet événément est déclenché pour plusieurs raisons qui incluent : l'appareil de pointage est déplacé en dehors de la zone du test de ciblage d'un élément; déclencher l'événément de pointage vers le haut pour un appareil qui ne supporte pas le survol (voir pointage vers le haut); après avoir déclenché un événément de pointage annulé (voir pointage annulé); lorsqu'un stylet quitte la zone de portée pour être détectée au survol par le numériseur.
+- {{event('pointerleave')}}
+  - : Cet événément est déclenché lorsqu'un appareil de pointage est déplacé en dehors de la zone de ciblage d'un élément. Pour les appareils avec un stylet, cet événément est déclenché lorsque le stylet quitte la zone de portée pour être détectée au survol par le numériseur.
+- {{event('gotpointercapture')}}
+  - : Cet événément est déclenché lorsqu'un élément est capturé par un pointeur.
+- {{event('lostpointercapture')}}
+  - : Cet événément est déclenché après qu'un pointeur ait relâché sa capture.
+
+## GlobalEventHandlers
+
+- {{ domxref('GlobalEventHandlers.onpointerover') }}
+  - : Un {{domxref('GlobalEventHandlers','global event handler')}} pour l'événement {{event('pointerover')}}.
+- {{ domxref('GlobalEventHandlers.onpointerenter') }}
+  - : Un {{domxref('GlobalEventHandlers','global event handler')}} pour l'événement {{event('pointerenter')}}.
+- {{ domxref('GlobalEventHandlers.onpointerdown') }}
+  - : Un {{domxref('GlobalEventHandlers','global event handler')}} pour l'événement {{event('pointerdown')}}.
+- {{ domxref('GlobalEventHandlers.onpointermove') }}
+  - : Un {{domxref('GlobalEventHandlers','global event handler')}} pour l'événement {{event('pointermove')}}.
+- {{ domxref('GlobalEventHandlers.onpointerup') }}
+  - : Un {{domxref('GlobalEventHandlers','global event handler')}} pour l'événement {{event('pointerup')}}.
+- {{ domxref('GlobalEventHandlers.onpointercancel') }}
+  - : Un {{domxref('GlobalEventHandlers','global event handler')}} pour l'événement {{event('pointercancel')}}.
+- {{ domxref('GlobalEventHandlers.onpointerout') }}
+  - : Un {{domxref('GlobalEventHandlers','global event handler')}} pour l'événement {{event('pointerout')}}.
+- {{ domxref('GlobalEventHandlers.onpointerleave') }}
+  - : Un {{domxref('GlobalEventHandlers','global event handler')}} pour l'événement {{event('pointerleave')}}.
+
+## Exemple
+
+Un exemple de chaque propriété, type d'événément, et un gestionnaire d'événéments global sont inclus dans leur page respective de référence.
+
+## Spécifications
+
+| Specification                                                                                        | Status                                   | Comment              |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('Pointer Events 2','#pointerevent-interface', 'PointerEvent')}} | {{Spec2('Pointer Events 2')}} | Version non-stable.  |
+| {{SpecName('Pointer Events', '#pointerevent-interface', 'PointerEvent')}}     | {{Spec2('Pointer Events')}}     | Définition initiale. |
+
+## Compatibilité navigateurs
+
+{{Compat("api.PointerEvent")}}
+
+## See also
+
+- {{ domxref("Touch_events","Touch Events") }}
+- {{ domxref("GestureEvent") }}
+- {{ domxref("MSGestureEvent") }}
+- {{cssxref("touch-action")}}
diff --git a/files/fr/web/api/positionoptions/enablehighaccuracy/index.md b/files/fr/web/api/positionoptions/enablehighaccuracy/index.md
index 4a5d069286..455635be35 100644
--- a/files/fr/web/api/positionoptions/enablehighaccuracy/index.md
+++ b/files/fr/web/api/positionoptions/enablehighaccuracy/index.md
@@ -3,41 +3,25 @@ title: PositionOptions.enableHighAccuracy
 slug: Web/API/PositionOptions/enableHighAccuracy
 translation_of: Web/API/PositionOptions/enableHighAccuracy
 ---
-<div>{{securecontext_header}}{{APIRef("Geolocation API")}}</div>
+{{securecontext_header}}{{APIRef("Geolocation API")}}
 
-<p>la propriété <code><strong>PositionOptions.enableHighAccuracy</strong></code> est un {{domxref("Boolean")}} qui indique que l'application souhaite recevoir les meilleurs résultats possibles. Si <code>true</code> si l'appareil est capable de fournir une position plus précise, il le fera. Notez que cela peut entraîner des temps de réponse plus lents ou une augmentation de la consommation d'énergie (avec une puce GPS sur un appareil mobile par exemple). D'un autre côté, si <code>false</code> (la valeur par défaut), le périphérique peut prendre la liberté d'économiser des ressources en répondant plus rapidement et/ou en utilisant moins d'énergie.</p>
+la propriété **`PositionOptions.enableHighAccuracy`** est un {{domxref("Boolean")}} qui indique que l'application souhaite recevoir les meilleurs résultats possibles. Si `true` si l'appareil est capable de fournir une position plus précise, il le fera. Notez que cela peut entraîner des temps de réponse plus lents ou une augmentation de la consommation d'énergie (avec une puce GPS sur un appareil mobile par exemple). D'un autre côté, si `false` (la valeur par défaut), le périphérique peut prendre la liberté d'économiser des ressources en répondant plus rapidement et/ou en utilisant moins d'énergie.
 
-<h2 id="Syntax">Syntax</h2>
+## Syntax
 
-<pre class="syntaxbox"><var>positionOptions</var>.enableHighAccuracy = <var>booleanValue</var>
-</pre>
+    positionOptions.enableHighAccuracy = booleanValue
 
-<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('Geolocation', '#enablehighaccuracy', 'PositionOptions.enableHighAccuracy')}}</td>
-      <td>{{Spec2('Geolocation')}}</td>
-      <td>Définition initiale</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                                        | Statut                           | Commentaire         |
+| -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- |
+| {{SpecName('Geolocation', '#enablehighaccuracy', 'PositionOptions.enableHighAccuracy')}} | {{Spec2('Geolocation')}} | Définition initiale |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.PositionOptions.enableHighAccuracy")}}</p>
+{{Compat("api.PositionOptions.enableHighAccuracy")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/WebAPI/Using_geolocation">Utiliser geolocation</a></li>
- <li>L'interface {{domxref("PositionOptions")}} à laquelle il appartient.</li>
-</ul>
+- [Utiliser geolocation](/fr/docs/WebAPI/Using_geolocation)
+- L'interface {{domxref("PositionOptions")}} à laquelle il appartient.
diff --git a/files/fr/web/api/positionoptions/index.md b/files/fr/web/api/positionoptions/index.md
index 1922a175be..73fa6c7485 100644
--- a/files/fr/web/api/positionoptions/index.md
+++ b/files/fr/web/api/positionoptions/index.md
@@ -3,53 +3,36 @@ title: PositionOptions
 slug: Web/API/PositionOptions
 translation_of: Web/API/PositionOptions
 ---
-<div>{{securecontext_header}}{{APIRef("Geolocation API")}}</div>
+{{securecontext_header}}{{APIRef("Geolocation API")}}
 
-<p>L'interface <strong><code>PositionOptions</code></strong> décrit un objet, contenant des propriétés, à passer en paramétre de {{domxref("Geolocation.getCurrentPosition()")}} et {{domxref("Geolocation.watchPosition()")}}.</p>
+L'interface **`PositionOptions`** décrit un objet, contenant des propriétés, à passer en paramétre de {{domxref("Geolocation.getCurrentPosition()")}} et {{domxref("Geolocation.watchPosition()")}}.
 
-<h2 id="Properties">Properties</h2>
+## Properties
 
-<p><em>L'interface <code>PositionOptions</code> n'hérite d'aucune propriété</em>.</p>
+_L'interface `PositionOptions` n'hérite d'aucune propriété_.
 
-<dl>
- <dt>{{domxref("PositionOptions.enableHighAccuracy")}} {{securecontext_inline}}</dt>
- <dd>C'est un {{domxref("Boolean")}} qui indique que l'application souhaite recevoir les meilleurs résultats possibles. Si la valeur est <code>true</code> et si l'appareil peut fournir une position plus précise, il le fera. Notez que cela peut entraîner des temps de réponse plus lents ou une augmentation de la consommation d'énergie (avec une puce GPS sur un appareil mobile par exemple). D'un autre côté, si la valeur est <code>false</code>, l'appareil peut prendre la liberté d'économiser des ressources en répondant plus rapidement et/ou en utilisant moins d'énergie. Valeur par défaut: <code>false</code>.</dd>
- <dt>{{domxref("PositionOptions.timeout")}} {{securecontext_inline}}</dt>
- <dd>C'est une valeur positive de type <code>long</code> représentant la durée maximale (en millisecondes) que le périphérique est autorisé à prendre pour renvoyer une position. La valeur par défaut est <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity">Infinity</a></code>, ce qui signifie que <code>getCurrentPosition()</code> ne retournera pas tant que la position n'est pas disponible.</dd>
- <dt>{{domxref("PositionOptions.maximumAge")}} {{securecontext_inline}}</dt>
- <dd>C'est une valeur positive de type <code>long</code> l'âge maximal en millisecondes d'une position en cache possible qu'il est acceptable de retourner. Si initialisé à <code>0</code>,  cela signifie que le périphérique ne peut pas utiliser une position mise en cache et doit tenter de récupérer la position actuelle réelle. Si initialisé à <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity">Infinity</a></code> l'appareil doit retourner une position mise en cache indépendamment de son âge. Valeur par défaut: 0.</dd>
-</dl>
+- {{domxref("PositionOptions.enableHighAccuracy")}} {{securecontext_inline}}
+  - : C'est un {{domxref("Boolean")}} qui indique que l'application souhaite recevoir les meilleurs résultats possibles. Si la valeur est `true` et si l'appareil peut fournir une position plus précise, il le fera. Notez que cela peut entraîner des temps de réponse plus lents ou une augmentation de la consommation d'énergie (avec une puce GPS sur un appareil mobile par exemple). D'un autre côté, si la valeur est `false`, l'appareil peut prendre la liberté d'économiser des ressources en répondant plus rapidement et/ou en utilisant moins d'énergie. Valeur par défaut: `false`.
+- {{domxref("PositionOptions.timeout")}} {{securecontext_inline}}
+  - : C'est une valeur positive de type `long` représentant la durée maximale (en millisecondes) que le périphérique est autorisé à prendre pour renvoyer une position. La valeur par défaut est [`Infinity`](/en-US/docs/JavaScript/Reference/Global_Objects/Infinity), ce qui signifie que `getCurrentPosition()` ne retournera pas tant que la position n'est pas disponible.
+- {{domxref("PositionOptions.maximumAge")}} {{securecontext_inline}}
+  - : C'est une valeur positive de type `long` l'âge maximal en millisecondes d'une position en cache possible qu'il est acceptable de retourner. Si initialisé à `0`,  cela signifie que le périphérique ne peut pas utiliser une position mise en cache et doit tenter de récupérer la position actuelle réelle. Si initialisé à [`Infinity`](/en-US/docs/JavaScript/Reference/Global_Objects/Infinity) l'appareil doit retourner une position mise en cache indépendamment de son âge. Valeur par défaut: 0.
 
-<h2 id="Methods">Methods</h2>
+## Methods
 
-<p>L'interface <code>PositionOptions</code> n'implémente ni n'hérite d'aucune méthode.</p>
+L'interface `PositionOptions` n'implémente ni n'hérite d'aucune méthode.
 
-<h2 id="Specifications">Specifications</h2>
+## Specifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('Geolocation', '#positionoptions', 'PositionOptions')}}</td>
-   <td>{{Spec2('Geolocation')}}</td>
-   <td>Specification initiale</td>
-  </tr>
- </tbody>
-</table>
+| Specification                                                                            | Status                           | Comment                |
+| ---------------------------------------------------------------------------------------- | -------------------------------- | ---------------------- |
+| {{SpecName('Geolocation', '#positionoptions', 'PositionOptions')}} | {{Spec2('Geolocation')}} | Specification initiale |
 
-<h2 id="Browser_compatibility">Browser compatibility</h2>
+## Browser compatibility
 
-<p>{{Compat("api.PositionOptions")}}</p>
+{{Compat("api.PositionOptions")}}
 
-<h2 id="See_also">See also</h2>
+## See also
 
-<ul>
- <li><a href="/fr/docs/Web/API/Geolocation_API/Using_the_Geolocation_API">Using geolocation</a></li>
- <li>The {{domxref("Geolocation")}} interface that uses it.</li>
-</ul>
+- [Using geolocation](/fr/docs/Web/API/Geolocation_API/Using_the_Geolocation_API)
+- The {{domxref("Geolocation")}} interface that uses it.
diff --git a/files/fr/web/api/positionoptions/maximumage/index.md b/files/fr/web/api/positionoptions/maximumage/index.md
index 72314738ca..11be32c85d 100644
--- a/files/fr/web/api/positionoptions/maximumage/index.md
+++ b/files/fr/web/api/positionoptions/maximumage/index.md
@@ -3,41 +3,25 @@ title: PositionOptions.maximumAge
 slug: Web/API/PositionOptions/maximumAge
 translation_of: Web/API/PositionOptions/maximumAge
 ---
-<div>{{securecontext_header}}{{APIRef("Geolocation API")}}</div>
+{{securecontext_header}}{{APIRef("Geolocation API")}}
 
-<p>La propriété <code><strong>PositionOptions.maximumAge</strong></code> est de type <code>long</code> positif indiquant l'âge maximal en millisecondes d'une position en cache possible qu'il est acceptable de renvoyer. Si la valeur est <code>0</code>, cela signifie que le périphérique ne peut pas utiliser une position mise en cache et doit tenter de récupérer la position actuelle réelle. Si la valeur est <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity">Infinity</a></code> l'appareil doit renvoyer une position mise en cache indépendamment de son âge.</p>
+La propriété **`PositionOptions.maximumAge`** est de type `long` positif indiquant l'âge maximal en millisecondes d'une position en cache possible qu'il est acceptable de renvoyer. Si la valeur est `0`, cela signifie que le périphérique ne peut pas utiliser une position mise en cache et doit tenter de récupérer la position actuelle réelle. Si la valeur est [`Infinity`](/en-US/docs/JavaScript/Reference/Global_Objects/Infinity) l'appareil doit renvoyer une position mise en cache indépendamment de son âge.
 
-<h2 id="Syntax">Syntax</h2>
+## Syntax
 
-<pre class="syntaxbox"><var>positionOptions</var>.maximumAge = <var>timeLength</var>
-</pre>
+    positionOptions.maximumAge = timeLength
 
-<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('Geolocation', '#maximumage', 'PositionOptions.maximumAge')}}</td>
-      <td>{{Spec2('Geolocation')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                    | Statut                           | Commentaire          |
+| ------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName('Geolocation', '#maximumage', 'PositionOptions.maximumAge')}} | {{Spec2('Geolocation')}} | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.PositionOptions.maximumAge")}}</p>
+{{Compat("api.PositionOptions.maximumAge")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li><a href="/fr/docs/WebAPI/Using_geolocation">Utiliser geolocation</a></li>
-  <li>L'interface {{domxref("PositionOptions")}} à laquelle il appartient.</li>
-</ul>
+- [Utiliser geolocation](/fr/docs/WebAPI/Using_geolocation)
+- L'interface {{domxref("PositionOptions")}} à laquelle il appartient.
diff --git a/files/fr/web/api/positionoptions/timeout/index.md b/files/fr/web/api/positionoptions/timeout/index.md
index 4454f93754..f524f862ee 100644
--- a/files/fr/web/api/positionoptions/timeout/index.md
+++ b/files/fr/web/api/positionoptions/timeout/index.md
@@ -3,43 +3,25 @@ title: PositionOptions.timeout
 slug: Web/API/PositionOptions/timeout
 translation_of: Web/API/PositionOptions/timeout
 ---
-<div>{{securecontext_header}}{{APIRef("Geolocation API")}}</div>
+{{securecontext_header}}{{APIRef("Geolocation API")}}
 
-<p>La propriété <code><strong>PositionOptions.timeout</strong></code> est de type <code>long</code> positif représentant la durée maximale (en millisecondes) que le périphérique est autorisé à prendre pour renvoyer une position. La valeur par défaut est <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity">Infinity</a></code>, ce qui signifie que <code>getCurrentPosition()</code> ne retournera rien tant que la position n'est pas disponible.</p>
+La propriété **`PositionOptions.timeout`** est de type `long` positif représentant la durée maximale (en millisecondes) que le périphérique est autorisé à prendre pour renvoyer une position. La valeur par défaut est [`Infinity`](/en-US/docs/JavaScript/Reference/Global_Objects/Infinity), ce qui signifie que `getCurrentPosition()` ne retournera rien tant que la position n'est pas disponible.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var>positionOptions</var>.timeout = <var>timeLength</var>
-</pre>
+    positionOptions.timeout = timeLength
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<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('Geolocation', '#dom-positionoptions-timeout', 'PositionOptions.timeout')}}</td>
-   <td>{{Spec2('Geolocation')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                        | Status                           | Commentaire          |
+| -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName('Geolocation', '#dom-positionoptions-timeout', 'PositionOptions.timeout')}} | {{Spec2('Geolocation')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
+{{Compat("api.PositionOptions.timeout")}}
 
+## Voir aussi
 
-<p>{{Compat("api.PositionOptions.timeout")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/WebAPI/Using_geolocation">Utiliser la géolocalisation</a></li>
- <li>L'interface {{domxref("PositionOptions")}} auquel il appartient.</li>
-</ul>
+- [Utiliser la géolocalisation](/fr/docs/WebAPI/Using_geolocation)
+- L'interface {{domxref("PositionOptions")}} auquel il appartient.
diff --git a/files/fr/web/api/processinginstruction/index.md b/files/fr/web/api/processinginstruction/index.md
index 3db3784969..cf37113384 100644
--- a/files/fr/web/api/processinginstruction/index.md
+++ b/files/fr/web/api/processinginstruction/index.md
@@ -11,33 +11,27 @@ tags:
   - instructions
 translation_of: Web/API/ProcessingInstruction
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p>Une <strong>instruction de traitement</strong> intègre des instructions spécifiques à une application en <a href="/en-US/docs/Glossary/XML">XML</a> qui peuvent être ignorées par d'autres applications (ne les reconnaissant pas). Même si un processeur XML ignore les instructions de traitement, il leur donnera une place dans le DOM.</p>
+Une **instruction de traitement** intègre des instructions spécifiques à une application en [XML](/en-US/docs/Glossary/XML) qui peuvent être ignorées par d'autres applications (ne les reconnaissant pas). Même si un processeur XML ignore les instructions de traitement, il leur donnera une place dans le DOM.
 
-<p>Une instruction de traitement est différente de la <a href="/en/XML/XML_Declaration">déclaration XML</a>, qui fournit des informations sur le document telles que le codage des caractères et ne peut apparaître que comme le premier élément d'un document.</p>
+Une instruction de traitement est différente de la [déclaration XML](/en/XML/XML_Declaration), qui fournit des informations sur le document telles que le codage des caractères et ne peut apparaître que comme le premier élément d'un document.
 
-<p>Les instructions de traitement définies par l'utilisateur ne peuvent pas commencer par '<code>xml</code>', car ceux-ci sont réservés (par exemple <code><a href="/en/XML/xml-stylesheet">&lt;?xml-stylesheet ?&gt;</a></code>).</p>
+Les instructions de traitement définies par l'utilisateur ne peuvent pas commencer par '`xml`', car ceux-ci sont réservés (par exemple [`<?xml-stylesheet ?>`](/en/XML/xml-stylesheet)).
 
-<p>Les instructions de traitement héritent des méthodes et propriétés de <a href="/fr/docs/Web/API/Node"><code>Node</code></a>.</p>
+Les instructions de traitement héritent des méthodes et propriétés de [`Node`](/fr/docs/Web/API/Node).
 
-<p>{{InheritanceDiagram(700,70)}}</p>
+{{InheritanceDiagram(700,70)}}
 
-<h3 id="Attributes">Attributs</h3>
+### Attributs
 
-<ul>
- <li>target (<em>cible</em>) (DOMString) (<em>chaîne de caractères</em>) - après le <code>&lt;?</code> et avant un <a href="/fr/docs/Gestion_des_espaces_dans_le_DOM">whitespace</a> (<em>espace</em>) le séparant des <code>data</code> (<em>données</em>)</li>
- <li>data (<em>données</em>) (DOMString) (<em>chaîne de caractères</em>) - premier caractère non espace après <code>target</code> et avant <code>?&gt;</code></li>
-</ul>
+- target (_cible_) (DOMString) (_chaîne de caractères_) - après le `<?` et avant un [whitespace](/fr/docs/Gestion_des_espaces_dans_le_DOM) (_espace_) le séparant des `data` (_données_)
+- data (_données_) (DOMString) (_chaîne de caractères_) - premier caractère non espace après `target` et avant `?>`
 
-<h3 id="Specification">Spécification</h3>
+### Spécification
 
-<ul>
- <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#ID-1004215813">DOM Level 1 Core : ProcessingInstruction interface</a></li>
-</ul>
+- [DOM Level 1 Core : ProcessingInstruction interface](http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#ID-1004215813)
 
-<h3 id="See_also">Voir aussi</h3>
+### Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/API/Document/createProcessingInstruction">document.createProcessingInstruction</a></li>
-</ul>
+- [document.createProcessingInstruction](/fr/docs/Web/API/Document/createProcessingInstruction)
diff --git a/files/fr/web/api/proximity_events/index.md b/files/fr/web/api/proximity_events/index.md
index 5a3d99de1c..d5b2e749e8 100644
--- a/files/fr/web/api/proximity_events/index.md
+++ b/files/fr/web/api/proximity_events/index.md
@@ -6,22 +6,29 @@ tags:
 translation_of: Web/API/Proximity_Events
 original_slug: WebAPI/Proximity
 ---
-<p>{{ SeeCompatTable }}</p>
-<h2 id="Résumé">Résumé</h2>
-<p>Les événements de proximité permettent, simplement, de savoir lorsqu'un utilisateur est près de l'appareil. Ces événements permettent de réagir par rapport à cette proximité, par exemple en éteignant l'écran lorsqu'un utilisateur est en train de passer un appel téléphonique et que l'appareil est près de l'oreille.</p>
-<div class="note">
-  <p><strong>Note :</strong> Bien entendu, il faut un capteur de proximité pour que cette API fonctionne, ceux-ci sont généralement disponibles sur les appareils mobile. Les appareils ne disposant pas d'un tel capteur pourront supporter de tels événements, ils seront en revanche incapables de les déclencher.</p>
-</div>
-<h2 id="Événements_de_proximité">Événements de proximité</h2>
-<p>Lorsque le capteur de l'appareil détecte un changement entre l'appareil et l'objet, il informe le navigateur de ce changement en lui envoyant une notification. Lorsque le navigateur reçoit une notification comme celle-ci, il déclenche un événement {{domxref("DeviceProximityEvent")}} à chaque fois qu'il y a un changement et un événement  {{domxref("UserProximityEvent")}} dans le cas où un changement plus brutal se produit.</p>
-<p>Cet événement peut être capturé en utilisant un objet au niveau <code>window</code> en utilisant la méthode {{domxref("EventTarget.addEventListener","addEventListener")}} (en utilisant les noms d'événements {{event("deviceproximity")}} ou {{event("userproximity")}}) ou en attachant un gestionnaire d'événement à la propriété {{domxref("window.ondeviceproximity")}} ou à la propriété {{domxref("window.onuserproximity")}}.</p>
-<p>Une fois qu'il a été capturé, l'événement donne accès à différentes informations :</p>
-<ul>
-  <li>L'événement {{domxref("DeviceProximityEvent")}} permet de connaître la distance exacte entre l'appareil et l'objet avec sa propriété {{domxref("DeviceProximityEvent.value","value")}}. Il fournit également la distance la plus courte et la distance la plus grande que l'appareil peut détecter avec les propriétés {{domxref("DeviceProximityEvent.min","min")}} et {{domxref("DeviceProximityEvent.max","max")}}.</li>
-  <li>L'événement {{domxref("UserProximityEvent")}} fournit une valeur approximative pour la distance en utilisant un booléen. La propriété  {{domxref("UserProximityEvent.near")}} vaut <code>true</code> si l'objet est proche ou <code>false</code> si l'objet est loin.</li>
-</ul>
-<h2 id="Exemple">Exemple</h2>
-<pre class="brush: js">window.addEventListener('userproximity', function(event) {
+{{ SeeCompatTable }}
+
+## Résumé
+
+Les événements de proximité permettent, simplement, de savoir lorsqu'un utilisateur est près de l'appareil. Ces événements permettent de réagir par rapport à cette proximité, par exemple en éteignant l'écran lorsqu'un utilisateur est en train de passer un appel téléphonique et que l'appareil est près de l'oreille.
+
+> **Note :** Bien entendu, il faut un capteur de proximité pour que cette API fonctionne, ceux-ci sont généralement disponibles sur les appareils mobile. Les appareils ne disposant pas d'un tel capteur pourront supporter de tels événements, ils seront en revanche incapables de les déclencher.
+
+## Événements de proximité
+
+Lorsque le capteur de l'appareil détecte un changement entre l'appareil et l'objet, il informe le navigateur de ce changement en lui envoyant une notification. Lorsque le navigateur reçoit une notification comme celle-ci, il déclenche un événement {{domxref("DeviceProximityEvent")}} à chaque fois qu'il y a un changement et un événement  {{domxref("UserProximityEvent")}} dans le cas où un changement plus brutal se produit.
+
+Cet événement peut être capturé en utilisant un objet au niveau `window` en utilisant la méthode {{domxref("EventTarget.addEventListener","addEventListener")}} (en utilisant les noms d'événements {{event("deviceproximity")}} ou {{event("userproximity")}}) ou en attachant un gestionnaire d'événement à la propriété {{domxref("window.ondeviceproximity")}} ou à la propriété {{domxref("window.onuserproximity")}}.
+
+Une fois qu'il a été capturé, l'événement donne accès à différentes informations :
+
+- L'événement {{domxref("DeviceProximityEvent")}} permet de connaître la distance exacte entre l'appareil et l'objet avec sa propriété {{domxref("DeviceProximityEvent.value","value")}}. Il fournit également la distance la plus courte et la distance la plus grande que l'appareil peut détecter avec les propriétés {{domxref("DeviceProximityEvent.min","min")}} et {{domxref("DeviceProximityEvent.max","max")}}.
+- L'événement {{domxref("UserProximityEvent")}} fournit une valeur approximative pour la distance en utilisant un booléen. La propriété  {{domxref("UserProximityEvent.near")}} vaut `true` si l'objet est proche ou `false` si l'objet est loin.
+
+## Exemple
+
+```js
+window.addEventListener('userproximity', function(event) {
   if (event.near) {
     // extinction de l'écran
     navigator.mozPower.screenEnabled = false;
@@ -29,42 +36,28 @@ original_slug: WebAPI/Proximity
     // allumage de l'écran
     navigator.mozPower.screenEnabled = true;
   }
-});</pre>
+});
+```
 
-<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('Proximity Events', '', 'Proximity Events') }}</td>
-      <td>{{ Spec2('Proximity Events') }}</td>
-      <td>Spécification initiale</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                | Statut                                   | Commentaire            |
+| ---------------------------------------------------------------------------- | ---------------------------------------- | ---------------------- |
+| {{ SpecName('Proximity Events', '', 'Proximity Events') }} | {{ Spec2('Proximity Events') }} | Spécification initiale |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<h3 id="DeviceProximityEvent"><code>DeviceProximityEvent</code></h3>
+### `DeviceProximityEvent`
 
-<p>{{Compat("api.DeviceProximityEvent")}}</p>
+{{Compat("api.DeviceProximityEvent")}}
 
-<h3 id="UserProximityEvent"><code>UserProximityEvent</code></h3>
+### `UserProximityEvent`
 
-<p>{{Compat("api.UserProximityEvent")}}</p>
+{{Compat("api.UserProximityEvent")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>{{domxref("DeviceProximityEvent")}}</li>
-  <li>{{domxref("UserProximityEvent")}}</li>
-  <li>{{event("deviceproximity")}}</li>
-  <li>{{event("userproximity")}}</li>
-</ul>
+- {{domxref("DeviceProximityEvent")}}
+- {{domxref("UserProximityEvent")}}
+- {{event("deviceproximity")}}
+- {{event("userproximity")}}
diff --git a/files/fr/web/api/publickeycredential/index.md b/files/fr/web/api/publickeycredential/index.md
index 48fea0a296..49e032d17a 100644
--- a/files/fr/web/api/publickeycredential/index.md
+++ b/files/fr/web/api/publickeycredential/index.md
@@ -10,63 +10,43 @@ tags:
   - WebAuthn
 translation_of: Web/API/PublicKeyCredential
 ---
-<p>{{APIRef("Web Authentication API")}}{{securecontext_header}}</p>
+{{APIRef("Web Authentication API")}}{{securecontext_header}}
 
-<p>L'interface <code><strong>PublicKeyCredential</strong></code> fournit des informations relative à la paire constituée par une clé publique et une clé privée. Cette paire constitue une information d'authentification qui permet de se connecter à un service en utilisant un paire de clé asymétrique (permettant de prévenir les attaques par <em>phishing</em> ou liées à des fuites de données).</p>
+L'interface **`PublicKeyCredential`** fournit des informations relative à la paire constituée par une clé publique et une clé privée. Cette paire constitue une information d'authentification qui permet de se connecter à un service en utilisant un paire de clé asymétrique (permettant de prévenir les attaques par _phishing_ ou liées à des fuites de données).
 
-<p>Cette interface hérite de {{domxref("Credential")}} et a été créée pour l'<a href="/fr/docs/Web/API/Web_Authentication_API">API Web Authentication</a> qui étend <a href="/fr/docs/Web/API/Credential_Management_API">l'API Credential Management</a>.</p>
+Cette interface hérite de {{domxref("Credential")}} et a été créée pour l'[API Web Authentication](/fr/docs/Web/API/Web_Authentication_API) qui étend [l'API Credential Management](/fr/docs/Web/API/Credential_Management_API).
 
-<p>Les autres interfaces qui héritent de {{domxref("Credential")}} sont :</p>
+Les autres interfaces qui héritent de {{domxref("Credential")}} sont :
 
-<ul>
- <li>{{domxref("PasswordCredential")}}</li>
- <li>{{domxref("FederatedCredential")}}.</li>
-</ul>
+- {{domxref("PasswordCredential")}}
+- {{domxref("FederatedCredential")}}.
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<dl>
- <dt>{{domxref("PublicKeyCredential.type")}} {{ReadOnlyInline()}}</dt>
- <dd>Propriété héritée depuis {{domxref("Credential")}}. Dans le cas de <code>PublicKeyCredentials</code>, cette propriété vaut toujours <code>"public-key"</code>.</dd>
- <dt>{{domxref("PublicKeyCredential.id")}} {{ReadOnlyInline()}}</dt>
- <dd>Propriété héritée depuis {{domxref("Credential")}} et surchargée afin de correspondre à l'<a href="/fr/docs/Web/API/WindowBase64/Décoder_encoder_en_base64">encodage en base64url</a> de <code>PublicKeyCredential.rawId</code>.</dd>
- <dt>{{domxref("PublicKeyCredential.rawId")}} {{ReadOnlyInline()}}</dt>
- <dd>Un objet {{domxref("ArrayBuffer")}} qui contient l'identifiant unique global/universel pour cette instance <code>PublicKeyCredential</code>. Cet identifiant peut être utilisé afin de rechercher les informations d'authentification avec les futurs appels à {{domxref("CredentialsContainer.get")}}.</dd>
- <dt>{{domxref("PublicKeyCredential.response")}} {{ReadOnlyInline()}}</dt>
- <dd>Une instance {{domxref("AuthenticatorResponse")}}. Cette instance est de type :
- <ul>
-  <li>{{domxref("AuthenticatorAttestationResponse")}} si l'objet <code>PublicKeyCredential</code> a été créé grâce à un appel à <code><a href="/fr/docs/Web/API/CredentialsContainer/create">create()</a></code></li>
-  <li>{{domxref("AuthenticatorAssertionResponse")}} si l'objet <code>PublicKeyCredential</code> a été créé grâce à un appel à <code><a href="/fr/docs/Web/API/CredentialsContainer/get">get()</a></code>.</li>
- </ul>
- </dd>
-</dl>
+- {{domxref("PublicKeyCredential.type")}} {{ReadOnlyInline()}}
+  - : Propriété héritée depuis {{domxref("Credential")}}. Dans le cas de `PublicKeyCredentials`, cette propriété vaut toujours `"public-key"`.
+- {{domxref("PublicKeyCredential.id")}} {{ReadOnlyInline()}}
+  - : Propriété héritée depuis {{domxref("Credential")}} et surchargée afin de correspondre à l'[encodage en base64url](/fr/docs/Web/API/WindowBase64/Décoder_encoder_en_base64) de `PublicKeyCredential.rawId`.
+- {{domxref("PublicKeyCredential.rawId")}} {{ReadOnlyInline()}}
+  - : Un objet {{domxref("ArrayBuffer")}} qui contient l'identifiant unique global/universel pour cette instance `PublicKeyCredential`. Cet identifiant peut être utilisé afin de rechercher les informations d'authentification avec les futurs appels à {{domxref("CredentialsContainer.get")}}.
+- {{domxref("PublicKeyCredential.response")}} {{ReadOnlyInline()}}
 
-<h2 id="Méthodes">Méthodes</h2>
+  - : Une instance {{domxref("AuthenticatorResponse")}}. Cette instance est de type :
 
-<dl>
- <dt>{{domxref("PublicKeyCredential.getClientExtensionResults()")}}</dt>
- <dd>Si au moins une extension est demandée, cette méthode renverra le résultat du traitement de ces extensions.</dd>
-</dl>
+    - {{domxref("AuthenticatorAttestationResponse")}} si l'objet `PublicKeyCredential` a été créé grâce à un appel à [`create()`](/fr/docs/Web/API/CredentialsContainer/create)
+    - {{domxref("AuthenticatorAssertionResponse")}} si l'objet `PublicKeyCredential` a été créé grâce à un appel à [`get()`](/fr/docs/Web/API/CredentialsContainer/get).
 
-<h2 id="Spécifications">Spécifications</h2>
+## Méthodes
 
-<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('WebAuthn')}}</td>
-   <td>{{Spec2('WebAuthn')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+- {{domxref("PublicKeyCredential.getClientExtensionResults()")}}
+  - : Si au moins une extension est demandée, cette méthode renverra le résultat du traitement de ces extensions.
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Spécifications
 
-<p>{{Compat("api.PublicKeyCredential")}}</p>
+| Spécification                    | État                         | Commentaires         |
+| -------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('WebAuthn')}} | {{Spec2('WebAuthn')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.PublicKeyCredential")}}
diff --git a/files/fr/web/api/push_api/index.md b/files/fr/web/api/push_api/index.md
index cb167263e3..a35a772226 100644
--- a/files/fr/web/api/push_api/index.md
+++ b/files/fr/web/api/push_api/index.md
@@ -11,101 +11,74 @@ tags:
   - Service Workers
 translation_of: Web/API/Push_API
 ---
-<div>{{DefaultAPISidebar("Push API")}}{{SeeCompatTable}}</div>
+{{DefaultAPISidebar("Push API")}}{{SeeCompatTable}}
 
-<p>L' <strong>API Push </strong> donne aux applications web la possibilité de recevoir des messages qui leur sont poussés depuis un serveur, qu'il s'agisse ou non d'une application active au premier plan, ou même actuellement chargée, sur un agent utilisateur. Ceci permet aux développeurs de délivrer des notifications asynchrones et des mises-à-jour aux utilisateurs qui le choisissent, entrainant un meilleur engagement [de l'utilisateur] avec du nouveau contenu au moment opportun.</p>
+L' **API Push**  donne aux applications web la possibilité de recevoir des messages qui leur sont poussés depuis un serveur, qu'il s'agisse ou non d'une application active au premier plan, ou même actuellement chargée, sur un agent utilisateur. Ceci permet aux développeurs de délivrer des notifications asynchrones et des mises-à-jour aux utilisateurs qui le choisissent, entrainant un meilleur engagement \[de l'utilisateur] avec du nouveau contenu au moment opportun.
 
-<div class="note">
-<p><strong>Note :</strong> Cette documentation couvre les spécifications W3C de l'API Push; si vous recherchez la documentation du système propriétaire de Push de Firefox OS, merci de vous reporter à <a href="/fr/docs/Web/API/Simple_Push_API">Simple Push</a>.</p>
-</div>
+> **Note :** Cette documentation couvre les spécifications W3C de l'API Push; si vous recherchez la documentation du système propriétaire de Push de Firefox OS, merci de vous reporter à [Simple Push](/fr/docs/Web/API/Simple_Push_API).
 
-<h2 id="Concepts_et_usages_de_Push">Concepts et usages de Push</h2>
+## Concepts et usages de Push
 
-<div class="warning">
-<p><strong>Attention :</strong> Lors de la mise en œuvre des abonnements PushManager, il est d'une importance vitale de se protéger contre les problèmes de CSRF/XSRF dans votre application. Voir les articles suivants pour plus d'informations :</p>
+> **Attention :** Lors de la mise en œuvre des abonnements PushManager, il est d'une importance vitale de se protéger contre les problèmes de CSRF/XSRF dans votre application. Voir les articles suivants pour plus d'informations :
+>
+> - [Feuille de prévention contre les Cross-Site Request Forgery (CSRF)](https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html)
+> - [Prévention conte les attaques CSRF et XSRF](https://blog.codinghorror.com/preventing-csrf-and-xsrf-attacks/)
 
-<ul>
- <li><a href="https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html">Feuille de prévention contre les Cross-Site Request Forgery (CSRF)</a></li>
- <li><a href="https://blog.codinghorror.com/preventing-csrf-and-xsrf-attacks/">Prévention conte les attaques CSRF et XSRF</a></li>
-</ul>
-</div>
+Pour qu'une application web puisse recevoir des messages Push, elle doit avoir un [service worker](/en-US/docs/Web/API/ServiceWorker_API) actif. Quand le service worker est actif, on peut souscrire aux notifications Push en utilisant {{domxref("PushManager.subscribe()")}}.
 
-<p>Pour qu'une application web puisse recevoir des messages Push, elle doit avoir un <a href="/en-US/docs/Web/API/ServiceWorker_API">service worker</a> actif. Quand le service worker est actif, on peut souscrire aux notifications Push en utilisant {{domxref("PushManager.subscribe()")}}.</p>
+L'élément {{domxref("PushSubscription")}} qui en résulte inclut toutes les informations dont l'application a besoin pour transmettre un message Push: un point de terminaison et la clé de chiffrement nécessaire à l'envoi des données.
 
-<p>L'élément {{domxref("PushSubscription")}} qui en résulte inclut toutes les informations dont l'application a besoin pour transmettre un message Push: un point de terminaison et la clé de chiffrement nécessaire à l'envoi des données.</p>
+Le service worker sera démarré, comme nécessaire, pour réceptionner les messages Push, qui sont délivrés au gestionnaire d'évènement {{domxref("ServiceWorkerGlobalScope.onpush")}}. Ceci permet aux applications de réagir au message Push reçu, par exemple en affichant une notification (en utilisant {{domxref("ServiceWorkerRegistration.showNotification()")}}.)
 
-<p>Le service worker sera démarré, comme nécessaire, pour réceptionner les messages Push, qui sont délivrés au gestionnaire d'évènement {{domxref("ServiceWorkerGlobalScope.onpush")}}. Ceci permet aux applications de réagir au message Push reçu, par exemple en affichant une notification (en utilisant {{domxref("ServiceWorkerRegistration.showNotification()")}}.)</p>
+Chaque souscription est unique à un service worker. Le point de terminaison de la souscription est une [URL fonctionnelle](http://www.w3.org/TR/capability-urls/) unique: la connaissance du point de terminaison est tout ce qui est nécessaire pour envoyer un message à votre application. L'URL du point de terminaison doit cependant rester secrète, sinon d'autres applications seront capables d'envoyer des messages Push à votre application.
 
-<p>Chaque souscription est unique à un service worker. Le point de terminaison de la souscription est une <a href="http://www.w3.org/TR/capability-urls/">URL fonctionnelle</a> unique: la connaissance du point de terminaison est tout ce qui est nécessaire pour envoyer un message à votre application. L'URL du point de terminaison doit cependant rester secrète, sinon d'autres applications seront capables d'envoyer des messages Push à votre application.</p>
+Activer un service worker pour délivrer un message Push peut accroître l'utilisation des ressources, particulièrement de la batterie. Les différents navigateurs ont des régimes différents pour gèrer ça — Il n'y a pas de mécanisme standard. Firefox permet à un nombre limité (quota) de messages Push d'être envoyé à une application, cependant les messages Push qui générent les notifications sont exempts de cette limite. La limite est rafraichie chaque fois que le site est visité. En comparaison, Chrome n'applique pas de limites mais nécessite que chaque message Push lance une notification pour pouvoir être affiché.
 
-<p>Activer un service worker pour délivrer un message Push peut accroître l'utilisation des ressources, particulièrement de la batterie. Les différents navigateurs ont des régimes différents pour gèrer ça — Il n'y a pas de mécanisme standard. Firefox permet à un nombre limité (quota) de messages Push d'être envoyé à une application, cependant les messages Push qui générent les notifications sont exempts de cette limite. La limite est rafraichie chaque fois que le site est visité. En comparaison, Chrome n'applique pas de limites mais nécessite que chaque message Push lance une notification pour pouvoir être affiché.</p>
+> **Note :** Comme pour Gecko 44, le quota de messages Push par application n'est pas incrémenté quand une nouvelle notification se lance et qu'une autre est déjà visible, pendant une période de 3 secondes. Cela permet de gèrer le cas où une rafale de messages Push est reçue et qu'ils n'afficheraient pas tous une notification.
 
-<div class="note">
-<p><strong>Note :</strong> Comme pour Gecko 44, le quota de messages Push par application n'est pas incrémenté quand une nouvelle notification se lance et qu'une autre est déjà visible, pendant une période de 3 secondes. Cela permet de gèrer le cas où une rafale de messages Push est reçue et qu'ils n'afficheraient pas tous une notification.</p>
-</div>
+> **Note :**: Chrome nécessite actuellement de configurer un projet sur [Google Cloud Messaging](https://developers.google.com/cloud-messaging/) pour envoyer des messages Push et utilise le numero du projet associé ainsi que la clé durant l'envoi des messages Push. Il requiert aussi un manifeste applicatif avec des paramètres spéciaux pour utiliser ce service. Nous espérons que cette restriction sera supprimée dans le futur..
 
-<div class="note">
-<p><strong>Note :</strong>: Chrome nécessite actuellement de configurer un projet sur <a href="https://developers.google.com/cloud-messaging/">Google Cloud Messaging</a> pour envoyer des messages Push et utilise le numero du projet associé ainsi que la clé durant l'envoi des messages Push. Il requiert aussi un manifeste applicatif avec des paramètres spéciaux pour utiliser ce service. Nous espérons que cette restriction sera supprimée dans le futur..</p>
-</div>
+## Interfaces
 
-<h2 id="Interfaces">Interfaces</h2>
+- {{domxref("PushEvent")}}
+  - : Représente une action push envoyée à l'élément de [portée global](/en-US/docs/Web/API/ServiceWorkerGlobalScope) (global scope) d'un {{domxref("ServiceWorker")}}. Elle contient les informations envoyées depuis l'application à un {{domxref("PushSubscription")}}.
+- {{domxref("PushManager")}}
+  - : Fournit un moyen de recevoir des notifications de serveurs tiers ainsi que de demander les URL pour les notifications Push. Cette interface remplace les fonctionnalités obsolètes de l'interface {{domxref("PushRegistrationManager")}}.
+- {{domxref("PushMessageData")}}
+  - : Fournit l'accès pour pousser des données transmises par un serveur et inclut des méthodes pour manipuler les données reçues.
+- {{domxref("PushSubscription")}}
+  - : Fournit une URL de point de terminaison et permet la désinscription à un service Push.
 
-<dl>
- <dt>{{domxref("PushEvent")}}</dt>
- <dd>Représente une action push envoyée à l'élément de <a href="/en-US/docs/Web/API/ServiceWorkerGlobalScope">portée global</a> (global scope) d'un {{domxref("ServiceWorker")}}. Elle contient les informations envoyées depuis l'application à un {{domxref("PushSubscription")}}.</dd>
- <dt>{{domxref("PushManager")}}</dt>
- <dd>Fournit un moyen de recevoir des notifications de serveurs tiers ainsi que de demander les URL pour les notifications Push. Cette interface remplace les fonctionnalités obsolètes de l'interface {{domxref("PushRegistrationManager")}}.</dd>
- <dt>{{domxref("PushMessageData")}}</dt>
- <dd>Fournit l'accès pour pousser des données transmises par un serveur et inclut des méthodes pour manipuler les données reçues.</dd>
- <dt>{{domxref("PushSubscription")}}</dt>
- <dd>Fournit une URL de point de terminaison et permet la désinscription à un service Push.</dd>
-</dl>
+## Complément au Service worker
 
-<h2 id="Complément_au_Service_worker">Complément au Service worker</h2>
+Les ajouts à [l'API Service Worker ](/fr/docs/Web/API/Service_Worker_API)suivants ont été spécifiés dans l'API Push, pour fournir un point d'entrée à l'utilisation de messages Push pour surveiller et répondre aux événements de changement liés aux messages push et aux souscriptions.
 
-<p>Les ajouts à <a href="/fr/docs/Web/API/Service_Worker_API">l'API Service Worker </a>suivants ont été spécifiés dans l'API Push, pour fournir un point d'entrée à l'utilisation de messages Push pour surveiller et répondre aux événements de changement liés aux messages push et aux souscriptions.</p>
+- {{domxref("ServiceWorkerRegistration.pushManager")}} {{readonlyinline}}
+  - : Retourne une référence de l'interface {{domxref("PushManager")}} pour gèrer les souscriptions push incluant la souscription, récupèrer une souscription existante, et accèder au statut des permissions push. C'est le point d'entrée dans l'utilisation de la communication push.
+- {{domxref("ServiceWorkerGlobalScope.onpush")}}
+  - : Un gestionnaire d'événement lancé chaque fois qu'un événement {{Event("push")}} se produit ; c'est à chaque fois qu'un message push du serveur est reçu.
+- {{domxref("ServiceWorkerGlobalScope.onpushsubscriptionchange")}}
+  - : Un gestionnaire d'événement lancé chaque fois qu'un événement {{Event("pushsubscriptionchange")}} se produit; par exemple, quand une souscription push a été invalidée, ou va être invalidée (c.à.d. quand un service push définit une durée d'expiration).
 
-<dl>
- <dt>{{domxref("ServiceWorkerRegistration.pushManager")}} {{readonlyinline}}</dt>
- <dd>Retourne une référence de l'interface {{domxref("PushManager")}} pour gèrer les souscriptions push incluant la souscription, récupèrer une souscription existante, et accèder au statut des permissions push. C'est le point d'entrée dans l'utilisation de la communication push.</dd>
- <dt>{{domxref("ServiceWorkerGlobalScope.onpush")}}</dt>
- <dd>Un gestionnaire d'événement lancé chaque fois qu'un événement {{Event("push")}} se produit ; c'est à chaque fois qu'un message push du serveur est reçu.</dd>
- <dt>{{domxref("ServiceWorkerGlobalScope.onpushsubscriptionchange")}}</dt>
- <dd>Un gestionnaire d'événement lancé chaque fois qu'un événement {{Event("pushsubscriptionchange")}} se produit; par exemple, quand une souscription push a été invalidée, ou va être invalidée (c.à.d. quand un service push définit une durée d'expiration).</dd>
-</dl>
+## Spécifications
 
-<h2 id="Spécifications">Spécifications</h2>
+| Spécification                    | Statut                       | Commentaire         |
+| -------------------------------- | ---------------------------- | ------------------- |
+| {{SpecName("Push API")}} | {{Spec2("Push API")}} | Définition initiale |
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName("Push API")}}</td>
-   <td>{{Spec2("Push API")}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+## Compatibilité des navigateurs
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+### `PushEvent`
 
-<h3 id="PushEvent"><code>PushEvent</code></h3>
+{{Compat("api.PushEvent")}}
 
-<p>{{Compat("api.PushEvent")}}</p>
+### `PushMessageData`
 
-<h3 id="PushMessageData"><code>PushMessageData</code></h3>
+{{Compat("api.PushMessageData")}}
 
-<p>{{Compat("api.PushMessageData")}}</p>
+## Voir aussi
 
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/API/Push_API/Using_the_Push_API">Using the Push API [EN]</a></li>
- <li><a href="https://github.com/chrisdavidmills/push-api-demo">Démo API Push</a>, sur Github</li>
- <li><a href="http://updates.html5rocks.com/2015/03/push-notificatons-on-the-open-web">Push Notifications on the Open Web</a>, Matt Gaunt</li>
- <li><a href="/fr/docs/Web/API/Service_Worker_API">API Service Worker</a></li>
-</ul>
+- [Using the Push API \[EN\]](/en-US/docs/Web/API/Push_API/Using_the_Push_API)
+- [Démo API Push](https://github.com/chrisdavidmills/push-api-demo), sur Github
+- [Push Notifications on the Open Web](http://updates.html5rocks.com/2015/03/push-notificatons-on-the-open-web), Matt Gaunt
+- [API Service Worker](/fr/docs/Web/API/Service_Worker_API)
diff --git a/files/fr/web/api/pushevent/index.md b/files/fr/web/api/pushevent/index.md
index 58b2e0e31f..a1364ab73c 100644
--- a/files/fr/web/api/pushevent/index.md
+++ b/files/fr/web/api/pushevent/index.md
@@ -13,36 +13,33 @@ tags:
   - hors-ligne
 translation_of: Web/API/PushEvent
 ---
-<p>{{APIRef("Push API")}}{{SeeCompatTable()}}</p>
+{{APIRef("Push API")}}{{SeeCompatTable()}}
 
-<p>L'interface <strong><code>PushEvent</code></strong> de l'<a href="/en-US/docs/Web/API/Push_API">API Push</a> représente un message Push qui a été reçu. Cet événement est envoyé au <a href="/fr/docs/Web/API/ServiceWorkerGlobalScope">scope global</a> d'un {{domxref("ServiceWorker")}}. Il contient les informations transmises de l'application serveur vers un {{domxref("PushSubscription")}}.</p>
+L'interface **`PushEvent`** de l'[API Push](/en-US/docs/Web/API/Push_API) représente un message Push qui a été reçu. Cet événement est envoyé au [scope global](/fr/docs/Web/API/ServiceWorkerGlobalScope) d'un {{domxref("ServiceWorker")}}. Il contient les informations transmises de l'application serveur vers un {{domxref("PushSubscription")}}.
 
-<h2 id="Constructeur">Constructeur</h2>
+## Constructeur
 
-<dl>
- <dt>{{domxref("PushEvent.PushEvent()")}}</dt>
- <dd>Créer un nouvel objet <code>PushEvent</code>.</dd>
-</dl>
+- {{domxref("PushEvent.PushEvent()")}}
+  - : Créer un nouvel objet `PushEvent`.
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<p><em>Hérite des propriétés de son parent, {{domxref("ExtendableEvent")}}. Propriétés additionnelles:</em></p>
+_Hérite des propriétés de son parent, {{domxref("ExtendableEvent")}}. Propriétés additionnelles:_
 
-<dl>
- <dt>{{domxref("PushEvent.data")}} {{readonlyinline}}</dt>
- <dd>Retourne une référence à un objet {{domxref("PushMessageData")}} contenant les données transmises au {{domxref("PushSubscription")}}.</dd>
-</dl>
+- {{domxref("PushEvent.data")}} {{readonlyinline}}
+  - : Retourne une référence à un objet {{domxref("PushMessageData")}} contenant les données transmises au {{domxref("PushSubscription")}}.
 
-<h2>Méthodes</h2>
+## Méthodes
 
-<p><em>Hérite des méthodes de son parent, {{domxref("ExtendableEvent")}}</em>.</p>
+_Hérite des méthodes de son parent, {{domxref("ExtendableEvent")}}_.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>L'exemple suivant prends les données du <code>PushEvent</code> et les affiche sur tous les clients du service worker.</p>
+L'exemple suivant prends les données du `PushEvent` et les affiche sur tous les clients du service worker.
 
-<pre class="brush: js">self.addEventListener('push', function(event) {
-  if (!(self.Notification &amp;&amp; self.notification.permission === 'granted')) {
+```js
+self.addEventListener('push', function(event) {
+  if (!(self.Notification && self.notification.permission === 'granted')) {
     return;
   }
 
@@ -66,33 +63,20 @@ translation_of: Web/API/PushEvent
     }
   });
 });
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Push API','#the-push-event','PushEvent')}}</td>
-   <td>{{Spec2('Push API')}}</td>
-   <td>Définition intiale</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.PushEvent")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/Push_API/Using_the_Push_API">Utiliser l'API Push</a></li>
- <li><a href="/fr/docs/Web/API/Push_API">API Push</a></li>
- <li><a href="/fr/docs/Web/API/Service_Worker_API">API Service Worker</a></li>
-</ul>
+```
+
+## Spécifications
+
+| Spécification                                                            | Statut                       | Commentaire        |
+| ------------------------------------------------------------------------ | ---------------------------- | ------------------ |
+| {{SpecName('Push API','#the-push-event','PushEvent')}} | {{Spec2('Push API')}} | Définition intiale |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.PushEvent")}}
+
+## Voir aussi
+
+- [Utiliser l'API Push](/fr/docs/Web/API/Push_API/Using_the_Push_API)
+- [API Push](/fr/docs/Web/API/Push_API)
+- [API Service Worker](/fr/docs/Web/API/Service_Worker_API)
diff --git a/files/fr/web/api/queuemicrotask/index.md b/files/fr/web/api/queuemicrotask/index.md
index 043382a45d..5fb7f410eb 100644
--- a/files/fr/web/api/queuemicrotask/index.md
+++ b/files/fr/web/api/queuemicrotask/index.md
@@ -23,98 +23,87 @@ tags:
 translation_of: Web/API/WindowOrWorkerGlobalScope/queueMicrotask
 original_slug: Web/API/WindowOrWorkerGlobalScope/queueMicrotask
 ---
-<div>{{APIRef("HTML DOM")}}</div>
+{{APIRef("HTML DOM")}}
 
-<p>La méthode <code><strong>queueMicrotask()</strong></code>, qui est exposée par {{domxref("Window")}} ou l'interface {{domxref("Worker")}}, met en file d'attente une micro-tâche qui doit être exécutée à un moment sûr avant que le contrôle soit retourné à la boucle d'événement du navigateur.</p>
+La méthode **`queueMicrotask()`**, qui est exposée par {{domxref("Window")}} ou l'interface {{domxref("Worker")}}, met en file d'attente une micro-tâche qui doit être exécutée à un moment sûr avant que le contrôle soit retourné à la boucle d'événement du navigateur.
 
-<p>La micro-tâche est une fonction courte qui doit être exécutée après que la tâche actuelle ait terminé son exécution et lorsqu'il n'y a pas d'autre code en attente d'exécution avant que le contrôle du contexte d'exécution soit retourné à la boucle d'événement du navigateur.</p>
+La micro-tâche est une fonction courte qui doit être exécutée après que la tâche actuelle ait terminé son exécution et lorsqu'il n'y a pas d'autre code en attente d'exécution avant que le contrôle du contexte d'exécution soit retourné à la boucle d'événement du navigateur.
 
-<p>Cela permet à votre code de fonctionner sans interférer avec aucun autre code potentiellement à une plus haute priorité en attente, mais avant que le navigateur ne regagne le contrôle du contexte d'exécution, qui dépend potentiellement de la tâche que vous devez effectuer. Vous pouvez en apprendre plus sur comment utiliser les micro-tâches et pourquoi vous devriez le faire dans notre <a href="/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide">microtask guide</a>.</p>
+Cela permet à votre code de fonctionner sans interférer avec aucun autre code potentiellement à une plus haute priorité en attente, mais avant que le navigateur ne regagne le contrôle du contexte d'exécution, qui dépend potentiellement de la tâche que vous devez effectuer. Vous pouvez en apprendre plus sur comment utiliser les micro-tâches et pourquoi vous devriez le faire dans notre [microtask guide](/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide).
 
-<p>L'importance des micro-tâches vient de leur possibilité d'effectuer des tâches de manière asynchrone mais dans un ordre spécifique. Voir <a href="/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide">Using microtasks in JavaScript with queueMicrotask()</a> pour plus de détails.</p>
+L'importance des micro-tâches vient de leur possibilité d'effectuer des tâches de manière asynchrone mais dans un ordre spécifique. Voir [Using microtasks in JavaScript with queueMicrotask()](/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide) pour plus de détails.
 
-<p>Les micro-tâches sont particulièrement utiles pour les librairies et les frameworks qui doivent effectuer un nettoyage final ou d'autres tâches à exécuter avant le rendu.</p>
+Les micro-tâches sont particulièrement utiles pour les librairies et les frameworks qui doivent effectuer un nettoyage final ou d'autres tâches à exécuter avant le rendu.
 
-<p><code>queueMicrotask()</code> est exposé dans la mixin {{domxref("WindowOrWorkerGlobalScope")}}.</p>
+`queueMicrotask()` est exposé dans la mixin {{domxref("WindowOrWorkerGlobalScope")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>scope</em>.queueMicrotask(<em>function</em>);
-</pre>
+    scope.queueMicrotask(function);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>function</code></dt>
- <dd>Une {{jsxref("function")}} qui doit être exécutée lorsque le moteur du navigateur détermine qu'il est sûr d'appeler votre code. Les micro-tâches mises en files d'attente sont exécutées après la fin de toutes les tâches en attente mais avant de céder le contrôle à la boucle d'événement du navigateur.</dd>
-</dl>
+- `function`
+  - : Une {{jsxref("function")}} qui doit être exécutée lorsque le moteur du navigateur détermine qu'il est sûr d'appeler votre code. Les micro-tâches mises en files d'attente sont exécutées après la fin de toutes les tâches en attente mais avant de céder le contrôle à la boucle d'événement du navigateur.
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+### Valeur de retour
 
-<p><code>undefined</code>.</p>
+`undefined`.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: js">self.queueMicrotask(() =&gt; {
+```js
+self.queueMicrotask(() => {
   // function contents here
-})</pre>
+})
+```
 
-<p>Tiré de la <a href="https://html.spec.whatwg.org/multipage/timers-and-user-prompts.html#microtask-queuing">spécification de queueMicrotask</a> :</p>
+Tiré de la [spécification de queueMicrotask](https://html.spec.whatwg.org/multipage/timers-and-user-prompts.html#microtask-queuing) :
 
-<pre class="brush: js">MyElement.prototype.loadData = function (url) {
+```js
+MyElement.prototype.loadData = function (url) {
   if (this._cache[url]) {
-    queueMicrotask(() =&gt; {
+    queueMicrotask(() => {
       this._setData(this._cache[url]);
       this.dispatchEvent(new Event("load"));
     });
   } else {
-    fetch(url).then(res =&gt; res.arrayBuffer()).then(data =&gt; {
+    fetch(url).then(res => res.arrayBuffer()).then(data => {
       this._cache[url] = data;
       this._setData(data);
       this.dispatchEvent(new Event("load"));
     });
   }
-};</pre>
+};
+```
 
-<h2 id="Lorsque_queueMicrotask_nest_pas_disponible">Lorsque queueMicrotask() n'est pas disponible</h2>
+## Lorsque queueMicrotask() n'est pas disponible
 
-<p>Le code ci-dessous est une prothèse d'émulation (<em>polyfill</em>) pour <code>queueMicrotask()</code>. Il crée une micro-tâche en utilisant une promesse qui se résout immédiatement, et utilise un timeout si la promesse ne peut pas être créée.</p>
+Le code ci-dessous est une prothèse d'émulation (_polyfill_) pour `queueMicrotask()`. Il crée une micro-tâche en utilisant une promesse qui se résout immédiatement, et utilise un timeout si la promesse ne peut pas être créée.
 
-<pre class="brush: js">if (typeof window.queueMicrotask !== "function") {
+```js
+if (typeof window.queueMicrotask !== "function") {
   window.queueMicrotask = function (callback) {
     Promise.resolve()
       .then(callback)
-      .catch(e =&gt; setTimeout(() =&gt; { throw e; }));
+      .catch(e => setTimeout(() => { throw e; }));
   };
 }
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th>Spécification</th>
-   <th>Statut</th>
-   <th>Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML WHATWG", "timers-and-user-prompts.html#microtask-queuing", "self.queueMicrotask()")}}</td>
-   <td>{{Spec2("HTML WHATWG")}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.WindowOrWorkerGlobalScope.queueMicrotask")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide">Using microtasks in JavaScript with queueMicrotask()</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous">Asynchronous JavaScript</a></li>
- <li><a href="https://github.com/fergald/docs/blob/master/explainers/queueMicrotask.md">queueMicrotask explainer</a></li>
- <li><a href="https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/">Tasks, microtasks, queues and schedules</a> by Jake Archibald</li>
-</ul>
+```
+
+## Spécifications
+
+| Spécification                                                                                                                            | Statut                           | Commentaire         |
+| ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- |
+| {{SpecName("HTML WHATWG", "timers-and-user-prompts.html#microtask-queuing", "self.queueMicrotask()")}} | {{Spec2("HTML WHATWG")}} | Définition initiale |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.WindowOrWorkerGlobalScope.queueMicrotask")}}
+
+## Voir aussi
+
+- [Using microtasks in JavaScript with queueMicrotask()](/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide)
+- [Asynchronous JavaScript](/en-US/docs/Learn/JavaScript/Asynchronous)
+- [queueMicrotask explainer](https://github.com/fergald/docs/blob/master/explainers/queueMicrotask.md)
+- [Tasks, microtasks, queues and schedules](https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/) by Jake Archibald
diff --git a/files/fr/web/api/range/createcontextualfragment/index.md b/files/fr/web/api/range/createcontextualfragment/index.md
index 6f9342d87d..d5e9c573f2 100644
--- a/files/fr/web/api/range/createcontextualfragment/index.md
+++ b/files/fr/web/api/range/createcontextualfragment/index.md
@@ -3,55 +3,38 @@ title: Range.createContextualFragment()
 slug: Web/API/Range/createContextualFragment
 translation_of: Web/API/Range/createContextualFragment
 ---
-<p>La méthode <strong><code>Range.createContextualFragment()</code></strong> retourne un {{domxref("DocumentFragment")}} en invoquant l’algorithme d’analyse de fragment HTML ou l’algorithme d’analyse de fragment XML, avec le début du <code>range</code> (le <em>parent</em> du nœud sélectionné) comme nœud de contexte. L’algorithme d’analyse de fragment HTML est utilisé si le <code>range</code> appartient à un <code>Document</code> dont le bit « HTMLness » est défini. Dans le cas du HTML, si le nœud de contexte est censé être <code>html</code>, pour des raisons historiques l’algorithme d’analyse de fragment est invoqué avec <code>body</code> pour contexte à la place.</p>
+La méthode **`Range.createContextualFragment()`** retourne un {{domxref("DocumentFragment")}} en invoquant l’algorithme d’analyse de fragment HTML ou l’algorithme d’analyse de fragment XML, avec le début du `range` (le _parent_ du nœud sélectionné) comme nœud de contexte. L’algorithme d’analyse de fragment HTML est utilisé si le `range` appartient à un `Document` dont le bit « HTMLness » est défini. Dans le cas du HTML, si le nœud de contexte est censé être `html`, pour des raisons historiques l’algorithme d’analyse de fragment est invoqué avec `body` pour contexte à la place.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>documentFragment</em> = <em>range</em>.createContextualFragment( <em>chaineHTML</em> )
-</pre>
+    documentFragment = range.createContextualFragment( chaineHTML )
 
-<h3 id="Param.C3.A8tres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><em>chaineHTML</em></dt>
- <dd>Une chaîne contenant du texte et des balises à convertir en un fragment de document.</dd>
-</dl>
+- _chaineHTML_
+  - : Une chaîne contenant du texte et des balises à convertir en un fragment de document.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">var chaineHTML = "&lt;div&gt;Je suis un nœud div&lt;div&gt;";
+```js
+var chaineHTML = "<div>Je suis un nœud div<div>";
 var range = document.createRange();
 // fait que le parent de la première div du document devient le nœud de contexte
 range.selectNode(document.getElementsByTagName("div").item(0));
 var documentFragment = range.createContextualFragment(chaineHTML);
 document.body.appendChild(documentFragment);
-</pre>
-
-<h2 id="Specifications">Spécification</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('DOM Parsing', '#idl-def-range-createcontextualfragment(domstring)', 'Range.createContextualFragment()')}}</td>
-      <td>{{Spec2('DOM Parsing')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Range.createContextualFragment")}}</p>
-
-<h2 id="See_also">Voir aussi</h2>
-
-<ul>
-  <li><a href="/fr/docs/DOM/DOM_Reference">Index des interfaces DOM</a></li>
-</ul>
+```
+
+## Spécification
+
+| Spécification                                                                                                                                                | Statut                           | Commentaire          |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName('DOM Parsing', '#idl-def-range-createcontextualfragment(domstring)', 'Range.createContextualFragment()')}} | {{Spec2('DOM Parsing')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Range.createContextualFragment")}}
+
+## Voir aussi
+
+- [Index des interfaces DOM](/fr/docs/DOM/DOM_Reference)
diff --git a/files/fr/web/api/range/detach/index.md b/files/fr/web/api/range/detach/index.md
index b1b68cd16d..c02aaa937a 100644
--- a/files/fr/web/api/range/detach/index.md
+++ b/files/fr/web/api/range/detach/index.md
@@ -3,53 +3,34 @@ title: Range.detach()
 slug: Web/API/Range/detach
 translation_of: Web/API/Range/detach
 ---
-<p>{{ApiRef("DOM")}}</p>
+{{ApiRef("DOM")}}
 
-<p>La méthode <strong><code>Range.detach()</code></strong> n'a aucun effet. Elle permet de désactiver l'objet {{domxref("Range")}} et de libérer les ressources associées. Cette méthode a été conservée pour des raisons de compatibilités.</p>
+La méthode **`Range.detach()`** n'a aucun effet. Elle permet de désactiver l'objet {{domxref("Range")}} et de libérer les ressources associées. Cette méthode a été conservée pour des raisons de compatibilités.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">range.detach();
-</pre>
+    range.detach();
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush:js">var range = document.createRange();
+```js
+var range = document.createRange();
 
 range.selectNode(document.getElementsByTagName("div").item(0));
 range.detach();
-</pre>
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#dom-range-detach', 'Range.detach()')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Aucun changement.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level2-Range-method-detach', 'Range.detach()')}}</td>
-   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
-   <td>Spécification initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                    | Status                                       | Commentaires            |
+| -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | ----------------------- |
+| {{SpecName('DOM WHATWG', '#dom-range-detach', 'Range.detach()')}}                                         | {{Spec2('DOM WHATWG')}}             | Aucun changement.       |
+| {{SpecName('DOM2 Traversal_Range', 'ranges.html#Level2-Range-method-detach', 'Range.detach()')}} | {{Spec2('DOM2 Traversal_Range')}} | Spécification initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
+{{Compat("api.Range.detach")}}
 
+## Voir aussi
 
-<p>{{Compat("api.Range.detach")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/API/Document_Object_Model">The DOM interfaces index</a></li>
-</ul>
+- [The DOM interfaces index](/en-US/docs/Web/API/Document_Object_Model)
diff --git a/files/fr/web/api/range/extractcontents/index.md b/files/fr/web/api/range/extractcontents/index.md
index dd0d7a672d..9c30503403 100644
--- a/files/fr/web/api/range/extractcontents/index.md
+++ b/files/fr/web/api/range/extractcontents/index.md
@@ -3,55 +3,38 @@ title: Range.extractContents()
 slug: Web/API/Range/extractContents
 translation_of: Web/API/Range/extractContents
 ---
-<p>{{ApiRef("DOM")}}</p>
+{{ApiRef("DOM")}}
 
-<p>La méthode <strong><code>Range.extractContents()</code></strong> déplace le contenu du {{ domxref("Range") }} depuis l’arbre du document dans un {{ domxref("DocumentFragment") }}.</p>
+La méthode **`Range.extractContents()`** déplace le contenu du {{ domxref("Range") }} depuis l’arbre du document dans un {{ domxref("DocumentFragment") }}.
 
-<p>Les gestionnaires d’évènements ajoutés en utilisant les méthodes du DOM ne sont pas conservés lors de l’extraction. les attributs HTML d’évènements sont conservés ou dupliqués comme ils le seraient avec la méthode {{domxref("Node.cloneNode()")}}. Les attributs HTML id sont également clonés, ce qui peut mener à un document invalide si un nœud partiellement sélectionné est extrait et ajouté au document.</p>
+Les gestionnaires d’évènements ajoutés en utilisant les méthodes du DOM ne sont pas conservés lors de l’extraction. les attributs HTML d’évènements sont conservés ou dupliqués comme ils le seraient avec la méthode {{domxref("Node.cloneNode()")}}. Les attributs HTML id sont également clonés, ce qui peut mener à un document invalide si un nœud partiellement sélectionné est extrait et ajouté au document.
 
-<p>Les nœuds partiellement sélectionnés sont clonés pour inclure les balises parentes nécessaires pour rendre le fragment de document valide.</p>
+Les nœuds partiellement sélectionnés sont clonés pour inclure les balises parentes nécessaires pour rendre le fragment de document valide.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>documentFragment</em> = <em>range</em>.extractContents();
-</pre>
+    documentFragment = range.extractContents();
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: js">var range = document.createRange();
+```js
+var range = document.createRange();
 range.selectNode(document.getElementsByTagName("div").item(0));
 var documentFragment = range.extractContents();
 document.body.appendChild(documentFragment);
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#dom-range-extractcontents', 'Range.extractContents()')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Pas de changement.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level2-Range-method-extractContents', 'Range.extractContents()')}}</td>
-   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
-   <td>Spécification initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Range.extractContents")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/Document_Object_Model">L’index des interfaces DOM</a></li>
-</ul>
+```
+
+## Spécifications
+
+| Spécification                                                                                                                                            | Statut                                       | Commentaire             |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | ----------------------- |
+| {{SpecName('DOM WHATWG', '#dom-range-extractcontents', 'Range.extractContents()')}}                                         | {{Spec2('DOM WHATWG')}}             | Pas de changement.      |
+| {{SpecName('DOM2 Traversal_Range', 'ranges.html#Level2-Range-method-extractContents', 'Range.extractContents()')}} | {{Spec2('DOM2 Traversal_Range')}} | Spécification initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Range.extractContents")}}
+
+## Voir aussi
+
+- [L’index des interfaces DOM](/fr/docs/Web/API/Document_Object_Model)
diff --git a/files/fr/web/api/range/index.md b/files/fr/web/api/range/index.md
index a17b45d829..ab3abd3ad5 100644
--- a/files/fr/web/api/range/index.md
+++ b/files/fr/web/api/range/index.md
@@ -3,101 +3,91 @@ title: range
 slug: Web/API/Range
 translation_of: Web/API/Range
 ---
-<p>{{ ApiRef() }}</p>
-
-<h3 id="Introduction">Introduction</h3>
-
-<p>L'objet <code>Range</code> (littéralement : "étendue" ou "portée", ici : "segment") représente un fragment de document qui peut contenir des nœuds et des parties de nœuds texte dans un document donné.</p>
-
-<p>Un segment peut être crée en utilisant la méthode <a href="/fr/docs/Web/API/document/createRange">createRange</a> de l'objet <a href="/fr/docs/Web/API/document">document</a>. Les objets range peuvent également être récupérés en utilisant la méthode <a href="/fr/docs/Web/API/Selection/getRangeAt">getRangeAt</a> de l'objet <a href="/fr/docs/Web/API/Selection">selection</a>.</p>
-
-<h3 id="Propri.C3.A9t.C3.A9s">Propriétés</h3>
-
-<dl>
- <dt><a href="/fr/docs/Web/API/range/collapsed">collapsed</a></dt>
- <dd>Renvoie un booléen indiquant si le point de départ et le point final du segment sont confondus.</dd>
- <dt><a href="/fr/docs/Web/API/range/commonAncestorContainer">commonAncestorContainer</a></dt>
- <dd>Renvoie le nœud le plus profond qui contient à la fois les nœuds <code>startContainer</code> et <code>endContainer</code>.</dd>
- <dt><a href="/fr/docs/Web/API/range/endContainer">endContainer</a></dt>
- <dd>Renvoie le nœud dans lequel le segment se termine.</dd>
- <dt><a href="/fr/docs/Web/API/range/endOffset">endOffset</a></dt>
- <dd>Renvoie un nombre représentant l'endroit où le segment se termine dans <code>endContainer</code>.</dd>
- <dt><a href="/fr/docs/Web/API/range/startContainer">startContainer</a></dt>
- <dd>Renvoie le nœud dans lequel le segment débute.</dd>
- <dt><a href="/fr/docs/Web/API/range/startOffset">startOffset</a></dt>
- <dd>Renvoie un nombre représentant l'endroit où le segment débute dans <code>startContainer</code>.</dd>
-</dl>
-
-<h3 id="M.C3.A9thodes">Méthodes</h3>
-
-<h4 id="M.C3.A9thodes_de_positionnement">Méthodes de positionnement</h4>
-
-<p>Ces méthodes permettent de définir le début et la fin d'un segment.</p>
-
-<dl>
- <dt><a href="/fr/docs/Web/API/range/setStart">setStart</a></dt>
- <dd>Définit le point de départ d'un segment.</dd>
- <dt><a href="/fr/docs/Web/API/range/setEnd">setEnd</a></dt>
- <dd>Définit le point final d'un segment.</dd>
- <dt><a href="/fr/docs/Web/API/range/setStartBefore">setStartBefore</a></dt>
- <dd>Définit le point de départ d'un segment relativement à un autre nœud.</dd>
- <dt><a href="/fr/docs/Web/API/range/setStartAfter">setStartAfter</a></dt>
- <dd>Définit le point de départ d'un segment relativement à un autre nœud.</dd>
- <dt><a href="/fr/docs/Web/API/range/setEndBefore">setEndBefore</a></dt>
- <dd>Définit le point final d'un segment relativement à un autre nœud.</dd>
- <dt><a href="/fr/docs/Web/API/range/setEndAfter">setEndAfter</a></dt>
- <dd>Définit le point final d'un segment relativement à un autre nœud.</dd>
- <dt><a href="/fr/docs/Web/API/range/selectNode">selectNode</a></dt>
- <dd>Le contenu du segment devient le nœud et son contenu.</dd>
- <dt><a href="/fr/docs/Web/API/range/selectNodeContents">selectNodeContents</a></dt>
- <dd>le contenu du segment devient le contenu du nœud.</dd>
- <dt><a href="/fr/docs/Web/API/range/collapse">collapse</a></dt>
- <dd>Replie le segment sur l'un de ses points frontières.</dd>
-</dl>
-
-<h4 id="M.C3.A9thodes_de_modification">Méthodes de modification</h4>
-
-<p>Ces méthodes recupèrent les nœuds d'un segment et modifient le contenu d'un segment.</p>
-
-<dl>
- <dt><a href="/fr/docs/Web/API/range/cloneContents">cloneContents</a></dt>
- <dd>Renvoie un fragment de document où sont copiés les nœuds d'un segment.</dd>
- <dt><a href="/fr/docs/Web/API/range/deleteContents">deleteContents</a></dt>
- <dd>Supprime du document le contenu d'un segment.</dd>
- <dt><a href="/fr/docs/Web/API/range/extractContents">extractContents</a></dt>
- <dd>Déplace le contenu d'un segment, de l'arbre du document vers un fragment de document.</dd>
- <dt><a href="/fr/docs/Web/API/range/insertNode">insertNode</a></dt>
- <dd>Insère un nœud au début d'un segment.</dd>
- <dt><a href="/fr/docs/Web/API/range/surroundContents">surroundContents</a></dt>
- <dd>Déplace le contenu d'un segment dans un nouveau nœud.</dd>
-</dl>
-
-<h4 id="Autres_m.C3.A9thodes">Autres méthodes</h4>
-
-<dl>
- <dt><a href="/fr/docs/Web/API/range/compareBoundaryPoints">compareBoundaryPoints</a></dt>
- <dd>Compare les points frontières de deux segments.</dd>
- <dt><a href="/fr/docs/Web/API/range/cloneRange">cloneRange</a></dt>
- <dd>Renvoie un objet <code>Range</code> avec des points frontières identiques à ceux du segment cloné.</dd>
- <dt><a href="/fr/docs/Web/API/range/detach">detach</a></dt>
- <dd>Supprime le segment afin d'améliorer la performance.</dd>
- <dt><a href="/fr/docs/Web/API/range/toString">toString</a></dt>
- <dd>Renvoie le texte du segment.</dd>
-</dl>
-
-<h4 id="Les_m.C3.A9thodes_Gecko">Les méthodes Gecko</h4>
-
-<p>Cette section décrit les méthodes de range qui sont particulières à Mozilla et ne font pas partie des spécifications DOM W3C.</p>
-
-<dl>
- <dt><a href="/fr/docs/Web/API/range/compareNode">compareNode</a> {{ Obsolete_inline() }}</dt>
- <dd>Renvoie une constante qui indique si le nœud est avant, après, dans ou englobe le segment.</dd>
- <dt><a href="/fr/docs/Web/API/range/comparePoint">comparePoint</a></dt>
- <dd>Renvoie -1, 0, ou 1, indiquant si le point se trouve avant, après, ou dans le segment.</dd>
- <dt><a href="/fr/docs/Web/API/range/createContextualFragment">createContextualFragment</a></dt>
- <dd>Renvoie un fragment de document créé à partir d'un morceau de code donné.</dd>
- <dt><a href="/fr/docs/Web/API/range/intersectsNode">intersectsNode</a> {{ Obsolete_inline() }}</dt>
- <dd>Renvoie un booléen indiquant si un nœud donné a une intersection avec le segment.</dd>
- <dt><a href="/fr/docs/Web/API/range/isPointInRange">isPointInRange</a></dt>
- <dd>Renvoie un booléen indiquant si le point donné est dans le segment.</dd>
-</dl>
\ No newline at end of file
+{{ ApiRef() }}
+
+### Introduction
+
+L'objet `Range` (littéralement : "étendue" ou "portée", ici : "segment") représente un fragment de document qui peut contenir des nœuds et des parties de nœuds texte dans un document donné.
+
+Un segment peut être crée en utilisant la méthode [createRange](/fr/docs/Web/API/document/createRange) de l'objet [document](/fr/docs/Web/API/document). Les objets range peuvent également être récupérés en utilisant la méthode [getRangeAt](/fr/docs/Web/API/Selection/getRangeAt) de l'objet [selection](/fr/docs/Web/API/Selection).
+
+### Propriétés
+
+- [collapsed](/fr/docs/Web/API/range/collapsed)
+  - : Renvoie un booléen indiquant si le point de départ et le point final du segment sont confondus.
+- [commonAncestorContainer](/fr/docs/Web/API/range/commonAncestorContainer)
+  - : Renvoie le nœud le plus profond qui contient à la fois les nœuds `startContainer` et `endContainer`.
+- [endContainer](/fr/docs/Web/API/range/endContainer)
+  - : Renvoie le nœud dans lequel le segment se termine.
+- [endOffset](/fr/docs/Web/API/range/endOffset)
+  - : Renvoie un nombre représentant l'endroit où le segment se termine dans `endContainer`.
+- [startContainer](/fr/docs/Web/API/range/startContainer)
+  - : Renvoie le nœud dans lequel le segment débute.
+- [startOffset](/fr/docs/Web/API/range/startOffset)
+  - : Renvoie un nombre représentant l'endroit où le segment débute dans `startContainer`.
+
+### Méthodes
+
+#### Méthodes de positionnement
+
+Ces méthodes permettent de définir le début et la fin d'un segment.
+
+- [setStart](/fr/docs/Web/API/range/setStart)
+  - : Définit le point de départ d'un segment.
+- [setEnd](/fr/docs/Web/API/range/setEnd)
+  - : Définit le point final d'un segment.
+- [setStartBefore](/fr/docs/Web/API/range/setStartBefore)
+  - : Définit le point de départ d'un segment relativement à un autre nœud.
+- [setStartAfter](/fr/docs/Web/API/range/setStartAfter)
+  - : Définit le point de départ d'un segment relativement à un autre nœud.
+- [setEndBefore](/fr/docs/Web/API/range/setEndBefore)
+  - : Définit le point final d'un segment relativement à un autre nœud.
+- [setEndAfter](/fr/docs/Web/API/range/setEndAfter)
+  - : Définit le point final d'un segment relativement à un autre nœud.
+- [selectNode](/fr/docs/Web/API/range/selectNode)
+  - : Le contenu du segment devient le nœud et son contenu.
+- [selectNodeContents](/fr/docs/Web/API/range/selectNodeContents)
+  - : le contenu du segment devient le contenu du nœud.
+- [collapse](/fr/docs/Web/API/range/collapse)
+  - : Replie le segment sur l'un de ses points frontières.
+
+#### Méthodes de modification
+
+Ces méthodes recupèrent les nœuds d'un segment et modifient le contenu d'un segment.
+
+- [cloneContents](/fr/docs/Web/API/range/cloneContents)
+  - : Renvoie un fragment de document où sont copiés les nœuds d'un segment.
+- [deleteContents](/fr/docs/Web/API/range/deleteContents)
+  - : Supprime du document le contenu d'un segment.
+- [extractContents](/fr/docs/Web/API/range/extractContents)
+  - : Déplace le contenu d'un segment, de l'arbre du document vers un fragment de document.
+- [insertNode](/fr/docs/Web/API/range/insertNode)
+  - : Insère un nœud au début d'un segment.
+- [surroundContents](/fr/docs/Web/API/range/surroundContents)
+  - : Déplace le contenu d'un segment dans un nouveau nœud.
+
+#### Autres méthodes
+
+- [compareBoundaryPoints](/fr/docs/Web/API/range/compareBoundaryPoints)
+  - : Compare les points frontières de deux segments.
+- [cloneRange](/fr/docs/Web/API/range/cloneRange)
+  - : Renvoie un objet `Range` avec des points frontières identiques à ceux du segment cloné.
+- [detach](/fr/docs/Web/API/range/detach)
+  - : Supprime le segment afin d'améliorer la performance.
+- [toString](/fr/docs/Web/API/range/toString)
+  - : Renvoie le texte du segment.
+
+#### Les méthodes Gecko
+
+Cette section décrit les méthodes de range qui sont particulières à Mozilla et ne font pas partie des spécifications DOM W3C.
+
+- [compareNode](/fr/docs/Web/API/range/compareNode) {{ Obsolete_inline() }}
+  - : Renvoie une constante qui indique si le nœud est avant, après, dans ou englobe le segment.
+- [comparePoint](/fr/docs/Web/API/range/comparePoint)
+  - : Renvoie -1, 0, ou 1, indiquant si le point se trouve avant, après, ou dans le segment.
+- [createContextualFragment](/fr/docs/Web/API/range/createContextualFragment)
+  - : Renvoie un fragment de document créé à partir d'un morceau de code donné.
+- [intersectsNode](/fr/docs/Web/API/range/intersectsNode) {{ Obsolete_inline() }}
+  - : Renvoie un booléen indiquant si un nœud donné a une intersection avec le segment.
+- [isPointInRange](/fr/docs/Web/API/range/isPointInRange)
+  - : Renvoie un booléen indiquant si le point donné est dans le segment.
diff --git a/files/fr/web/api/range/insertnode/index.md b/files/fr/web/api/range/insertnode/index.md
index bfbe3dc9df..0f3e45f448 100644
--- a/files/fr/web/api/range/insertnode/index.md
+++ b/files/fr/web/api/range/insertnode/index.md
@@ -3,63 +3,44 @@ title: Range.insertNode()
 slug: Web/API/Range/insertNode
 translation_of: Web/API/Range/insertNode
 ---
-<div>{{ApiRef("DOM")}}</div>
+{{ApiRef("DOM")}}
 
-<p>La méthode <code><strong>Range.insertNode()</strong></code> insère un nœud au début du {{domxref("Range")}}.</p>
+La méthode **`Range.insertNode()`** insère un nœud au début du {{domxref("Range")}}.
 
-<p>Le nouveau nœud est inséré au point de départ du <code>Range</code>. Si le nouveau nœud est sur le point d’être ajouté à un {{domxref("Node")}} texte, ce <code>Node</code> est coupé en deux au point d’insertion, et l’insertion se fait entre les deux nœuds texte.</p>
+Le nouveau nœud est inséré au point de départ du `Range`. Si le nouveau nœud est sur le point d’être ajouté à un {{domxref("Node")}} texte, ce `Node` est coupé en deux au point d’insertion, et l’insertion se fait entre les deux nœuds texte.
 
-<p>Si le nouveau nœud est un fragment de document, les enfants du fragment sont insérés à la place.</p>
+Si le nouveau nœud est un fragment de document, les enfants du fragment sont insérés à la place.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>range</em>.insertNode(<em>newNode</em>);
-</pre>
+    range.insertNode(newNode);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><em>newNode</em></dt>
- <dd>Le {{domxref("Node")}} à insérer au début du <code>range</code>.</dd>
-</dl>
+- _newNode_
+  - : Le {{domxref("Node")}} à insérer au début du `range`.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">range = document.createRange();
+```js
+range = document.createRange();
 newNode = document.createElement("p");
 newNode.appendChild(document.createTextNode("New Node Inserted Here"));
 range.selectNode(document.getElementsByTagName("div").item(0));
 range.insertNode(newNode);
-</pre>
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#dom-range-insertnode', 'Range.insertNode()')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Pas de changement</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level2-Range-method-insertNode', 'Range.insertNode()')}}</td>
-   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                                | Statut                                       | Commentaire         |
+| -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | ------------------- |
+| {{SpecName('DOM WHATWG', '#dom-range-insertnode', 'Range.insertNode()')}}                                             | {{Spec2('DOM WHATWG')}}             | Pas de changement   |
+| {{SpecName('DOM2 Traversal_Range', 'ranges.html#Level2-Range-method-insertNode', 'Range.insertNode()')}} | {{Spec2('DOM2 Traversal_Range')}} | Définition initiale |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Range.insertNode")}}</p>
+{{Compat("api.Range.insertNode")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/en-US/docs/Web/API/Document_Object_Model">L’index des interfaces DOM</a></li>
-</ul>
+- [L’index des interfaces DOM](/en-US/docs/Web/API/Document_Object_Model)
diff --git a/files/fr/web/api/range/selectnode/index.md b/files/fr/web/api/range/selectnode/index.md
index 25e418cc4d..eca4135b5a 100644
--- a/files/fr/web/api/range/selectnode/index.md
+++ b/files/fr/web/api/range/selectnode/index.md
@@ -8,57 +8,39 @@ tags:
   - Range
 translation_of: Web/API/Range/selectNode
 ---
-<p>{{ApiRef("DOM")}}</p>
+{{ApiRef("DOM")}}
 
-<p>La méthode <code>Range.selectNode()</code> définit le {{domxref ("Range")}} destiné à contenir le {{domxref("Node")}} et son contenu. Le {{domxref ("Node")}} parent du début et de la fin du {{domxref("Range")}} sera le même que le parent du <em>noeudDeReference</em>.</p>
+La méthode `Range.selectNode()` définit le {{domxref ("Range")}} destiné à contenir le {{domxref("Node")}} et son contenu. Le {{domxref ("Node")}} parent du début et de la fin du {{domxref("Range")}} sera le même que le parent du _noeudDeReference_.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>range</em>.selectNode(<em>noeudDeReference</em>);
-</pre>
+    range.selectNode(noeudDeReference);
 
-<h3 id="Parameters">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><em>noeudDeReference</em></dt>
- <dd>Le {{domxref("Node")}} à choisir à l'intérieur d'un <code>{domxref("Range")}}</code>.</dd>
-</dl>
+- _noeudDeReference_
+  - : Le {{domxref("Node")}} à choisir à l'intérieur d'un `{domxref("Range")}}`.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush:js">var range = document.createRange();
+```js
+var range = document.createRange();
 var noeudDeReference = document.getElementsByTagName("div").item(0);
 
-range.selectNode(noeudDeReference);</pre>
+range.selectNode(noeudDeReference);
+```
 
-<h2 id="Specification">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#dom-range-selectnode', 'Range.selectNode()')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Aucun changement.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level2-Range-method-selectNode', 'Range.selectNode()')}}</td>
-   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
-   <td>Spécification initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                                | Statut                                       | Commentaire             |
+| -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | ----------------------- |
+| {{SpecName('DOM WHATWG', '#dom-range-selectnode', 'Range.selectNode()')}}                                             | {{Spec2('DOM WHATWG')}}             | Aucun changement.       |
+| {{SpecName('DOM2 Traversal_Range', 'ranges.html#Level2-Range-method-selectNode', 'Range.selectNode()')}} | {{Spec2('DOM2 Traversal_Range')}} | Spécification initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Range.selectNode")}}</p>
+{{Compat("api.Range.selectNode")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/API/Document_Object_Model">Référence du DOM</a></li>
-</ul>
+- [Référence du DOM](/fr/docs/Web/API/Document_Object_Model)
diff --git a/files/fr/web/api/range/setstart/index.md b/files/fr/web/api/range/setstart/index.md
index 019a481c37..a6dcadd6d3 100644
--- a/files/fr/web/api/range/setstart/index.md
+++ b/files/fr/web/api/range/setstart/index.md
@@ -8,64 +8,45 @@ tags:
   - Range
 translation_of: Web/API/Range/setStart
 ---
-<p>{{ApiRef("DOM")}}</p>
+{{ApiRef("DOM")}}
 
-<p>La methode <strong><code>Range.setStart() </code></strong>définit la position de départ d'un {{ domxref("Range") }}.</p>
+La methode **`Range.setStart() `**définit la position de départ d'un {{ domxref("Range") }}.
 
-<p>Si le <code>startNode</code> est un {{ domxref("Node") }}  de type <code>Text</code>, <code>Comment</code>, ou <code>CDATASection</code>, alors startOffset est le nombre de caractères depuis le départ du <code>startNode</code>. Pour les autres types de <code>Nœud</code>, <code>startOffset</code> est le nombre de noeuds enfants entre le debut du <code>startNode</code>.</p>
+Si le `startNode` est un {{ domxref("Node") }}  de type `Text`, `Comment`, ou `CDATASection`, alors startOffset est le nombre de caractères depuis le départ du `startNode`. Pour les autres types de `Nœud`, `startOffset` est le nombre de noeuds enfants entre le debut du `startNode`.
 
-<p>Si vous définissez le point de départ en dessous (plus bas dans le document), le point final entraînera une plage réduite avec les points de départ et de fin réglés tous les deux sur la position de départ spécifiée.</p>
+Si vous définissez le point de départ en dessous (plus bas dans le document), le point final entraînera une plage réduite avec les points de départ et de fin réglés tous les deux sur la position de départ spécifiée.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>range</em>.setStart(<em>startNode</em>, <em>startOffset</em>);
-</pre>
+    range.setStart(startNode, startOffset);
 
-<h3 id="Parameters">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><em>startNode</em></dt>
- <dd>{{ domxref("Node") }} ou {{ domxref("Range") }} devrait démarrer.</dd>
- <dt><em>startOffset</em></dt>
- <dd>Un entier supérieur ou égal à zéro représentant le décalage pour le début du {{domxref ("Range")}} à partir du début de startNode.</dd>
-</dl>
+- _startNode_
+  - : {{ domxref("Node") }} ou {{ domxref("Range") }} devrait démarrer.
+- _startOffset_
+  - : Un entier supérieur ou égal à zéro représentant le décalage pour le début du {{domxref ("Range")}} à partir du début de startNode.
 
-<h2 id="Example">Example</h2>
+## Example
 
-<pre class="brush: js">var range = document.createRange();
+```js
+var range = document.createRange();
 var startNode = document.getElementsByTagName("p").item(2);
 var startOffset = 0;
 range.setStart(startNode,startOffset);
-</pre>
+```
 
-<h2 id="Specification">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#dom-range-setstart', 'Range.setStart()')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level2-Range-method-setStart', 'Range.setStart()')}}</td>
-   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Specification                                                                                                                        | Statut                                       | Commentaire          |
+| ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------- | -------------------- |
+| {{SpecName('DOM WHATWG', '#dom-range-setstart', 'Range.setStart()')}}                                         | {{Spec2('DOM WHATWG')}}             |                      |
+| {{SpecName('DOM2 Traversal_Range', 'ranges.html#Level2-Range-method-setStart', 'Range.setStart()')}} | {{Spec2('DOM2 Traversal_Range')}} | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité navigateurs</h2>
+## Compatibilité navigateurs
 
-<p>{{Compat("api.Range.setStart")}}</p>
+{{Compat("api.Range.setStart")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li><a href="/fr/docs/DOM/DOM_Reference">L'index des interfaces DOM</a></li>
-</ul>
+- [L'index des interfaces DOM](/fr/docs/DOM/DOM_Reference)
diff --git a/files/fr/web/api/range/surroundcontents/index.md b/files/fr/web/api/range/surroundcontents/index.md
index 4b8b6fa87e..e157cd42f2 100644
--- a/files/fr/web/api/range/surroundcontents/index.md
+++ b/files/fr/web/api/range/surroundcontents/index.md
@@ -3,68 +3,51 @@ title: Range.surroundContents()
 slug: Web/API/Range/surroundContents
 translation_of: Web/API/Range/surroundContents
 ---
-<div>{{ApiRef("DOM")}}</div>
+{{ApiRef("DOM")}}
 
-<p>La méthode <strong><code>Range.surroundContents()</code></strong> déplace le contenu du {{ domxref("Range") }} dans un nouveau nœud, plaçant le nouveau nœud au début du <code>range</code> spécifié.</p>
+La méthode **`Range.surroundContents()`** déplace le contenu du {{ domxref("Range") }} dans un nouveau nœud, plaçant le nouveau nœud au début du `range` spécifié.
 
-<p>Cette méthode est à peu près équivalente à :</p>
+Cette méthode est à peu près équivalente à :
 
-<pre class="brush: js">newNode.appendChild(range.extractContents());
-range.insertNode(newNode)</pre>
+```js
+newNode.appendChild(range.extractContents());
+range.insertNode(newNode)
+```
 
-<p>Après déplacement, les bornes du <code>range</code> incluent <code>newNode</code>.</p>
+Après déplacement, les bornes du `range` incluent `newNode`.
 
-<p>Cependant, une exception sera levée si le {{ domxref("Range") }} découpe un nœud non-{{ domxref("Text") }} sur une seule de ses bornes. C’est-à-dire que, contrairement à l’alternative ci-dessus, s’il y a des nœuds partiellement sélectionnés, ils ne seront pas clonés ; à la place, l’opération échouera.</p>
+Cependant, une exception sera levée si le {{ domxref("Range") }} découpe un nœud non-{{ domxref("Text") }} sur une seule de ses bornes. C’est-à-dire que, contrairement à l’alternative ci-dessus, s’il y a des nœuds partiellement sélectionnés, ils ne seront pas clonés ; à la place, l’opération échouera.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>range</em>.surroundContents(<em>newNode</em>);
-</pre>
+    range.surroundContents(newNode);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><em>newNode</em></dt>
- <dd>Un {{ domxref("Node") }} à insérer à l’emplacement du <code>range</code>.</dd>
-</dl>
+- _newNode_
+  - : Un {{ domxref("Node") }} à insérer à l’emplacement du `range`.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush:js">var range = document.createRange();
+```js
+var range = document.createRange();
 var newNode = document.createElement("p");
 
 range.selectNode(document.getElementsByTagName("div").item(0));
 range.surroundContents(newNode);
-</pre>
-
-<h2 id="Specification">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#dom-range-surroundcontents', 'Range.surroundContents()')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Pas de changement.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level2-Range-method-surroundContents', 'Range.surroundContents()')}}</td>
-   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
-   <td>Spécification initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Range.surroundContents")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/DOM/DOM_Reference">L’index des interfaces DOM</a></li>
-</ul>
+```
+
+## Spécifications
+
+| Spécification                                                                                                                                                | Statut                                       | Commentaire             |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------- | ----------------------- |
+| {{SpecName('DOM WHATWG', '#dom-range-surroundcontents', 'Range.surroundContents()')}}                                             | {{Spec2('DOM WHATWG')}}             | Pas de changement.      |
+| {{SpecName('DOM2 Traversal_Range', 'ranges.html#Level2-Range-method-surroundContents', 'Range.surroundContents()')}} | {{Spec2('DOM2 Traversal_Range')}} | Spécification initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Range.surroundContents")}}
+
+## Voir aussi
+
+- [L’index des interfaces DOM](/fr/docs/DOM/DOM_Reference)
diff --git a/files/fr/web/api/request/credentials/index.md b/files/fr/web/api/request/credentials/index.md
index c009613a47..6bab4bdb28 100644
--- a/files/fr/web/api/request/credentials/index.md
+++ b/files/fr/web/api/request/credentials/index.md
@@ -8,58 +8,45 @@ tags:
   - request
 translation_of: Web/API/Request/credentials
 ---
-<div>{{APIRef("Fetch")}}</div>
+{{APIRef("Fetch")}}
 
-<p>La propriété en lecture seule <strong><code>credentials</code></strong>, de l'interface {{domxref("Request")}}, indique si l'agent utilisateur doit envoyer des cookies de l'autre domaine dans le cas de requêtes CORS. Ceci est similaire au flag <code>withCredentials</code> de XHR, mais peut prendre trois valeurs possibles (contre deux pour XHR) :</p>
+La propriété en lecture seule **`credentials`**, de l'interface {{domxref("Request")}}, indique si l'agent utilisateur doit envoyer des cookies de l'autre domaine dans le cas de requêtes CORS. Ceci est similaire au flag `withCredentials` de XHR, mais peut prendre trois valeurs possibles (contre deux pour XHR) :
 
-<ul>
- <li><code>omit</code> : ne jamais envoyer de cookies.</li>
- <li><code>same-origin</code> : envoyer les identifiants utilisateur (cookies, authentification HTTP simple, etc.) si l'URL a la même origine que le script. <strong>C'est la valeur par défaut.</strong></li>
- <li><code>include</code> : toujours envoyer les identifiants utilisateur (cookies, authentification HTTP simple, etc.) même lorsque l'origine de l'URL est différente.</li>
-</ul>
+- `omit` : ne jamais envoyer de cookies.
+- `same-origin` : envoyer les identifiants utilisateur (cookies, authentification HTTP simple, etc.) si l'URL a la même origine que le script. **C'est la valeur par défaut.**
+- `include` : toujours envoyer les identifiants utilisateur (cookies, authentification HTTP simple, etc.) même lorsque l'origine de l'URL est différente.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">var myCred = request.credentials;</pre>
+```js
+var myCred = request.credentials;
+```
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>Une valeur {{domxref("RequestCredentials")}} qui représente les informations d'authentification utilisées pour cette transaction.</p>
+Une valeur {{domxref("RequestCredentials")}} qui représente les informations d'authentification utilisées pour cette transaction.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans le morceau de code suivant, on crée une nouvelle requête en utilisant le constructeur {{domxref("Request.Request()")}} (pour un fichier image dans le même dossier que le script), puis on enregistre les identifiants de la requête dans une variable:</p>
+Dans le morceau de code suivant, on crée une nouvelle requête en utilisant le constructeur {{domxref("Request.Request()")}} (pour un fichier image dans le même dossier que le script), puis on enregistre les identifiants de la requête dans une variable:
 
-<pre class="brush: js">var myRequest = new Request('flowers.jpg');
-var myCred = myRequest.credentials; // renvoie "same-origin" par défaut</pre>
+```js
+var myRequest = new Request('flowers.jpg');
+var myCred = myRequest.credentials; // renvoie "same-origin" par défaut
+```
 
-<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('Fetch','#dom-request-credentials','credentials')}}</td>
-   <td>{{Spec2('Fetch')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                        | État                     | Commentaires         |
+| ------------------------------------------------------------------------------------ | ------------------------ | -------------------- |
+| {{SpecName('Fetch','#dom-request-credentials','credentials')}} | {{Spec2('Fetch')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Request.credentials")}}</p>
+{{Compat("api.Request.credentials")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/API/ServiceWorker_API">L'API ServiceWorker</a></li>
- <li><a href="/fr/docs/Web/HTTP/Access_control_CORS">Contrôle d'accès HTTP avec les origines (CORS)</a></li>
- <li><a href="/fr/docs/Web/HTTP">HTTP</a></li>
-</ul>
+- [L'API ServiceWorker](/fr/docs/Web/API/ServiceWorker_API)
+- [Contrôle d'accès HTTP avec les origines (CORS)](/fr/docs/Web/HTTP/Access_control_CORS)
+- [HTTP](/fr/docs/Web/HTTP)
diff --git a/files/fr/web/api/request/index.md b/files/fr/web/api/request/index.md
index cc9160f5c2..847932b31c 100644
--- a/files/fr/web/api/request/index.md
+++ b/files/fr/web/api/request/index.md
@@ -12,160 +12,137 @@ tags:
   - request
 translation_of: Web/API/Request
 ---
-<div>{{APIRef("Fetch API")}}</div>
-
-<p>L'interface <strong><code>Request</code></strong> de l'<a href="/en-US/docs/Web/API/Fetch_API">API Fetch</a> représente une demande de ressource.</p>
-
-<p>Vous pouvez créer un nouvel objet <code>Request</code> en utilisant le constructeur {{domxref("Request.Request","Request()")}}, mais vous êtes plus susceptible de rencontrer un objet <code>Request</code> renvoyé à la suite d'une autre opération d'API, telle en tant que service worker {{domxref("FetchEvent.request")}}.</p>
-
-<h2 id="Constructeur">Constructeur</h2>
-
-<dl>
- <dt>{{domxref("Request.Request","Request()")}}</dt>
- <dd>Crée un nouvel objet <code>Request</code>.</dd>
-</dl>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<dl>
- <dt>{{domxref("Request.cache")}} {{readonlyInline}}</dt>
- <dd>Contient le mode de cache de la demande (par exemple, <code>default</code>, <code>reload</code>, <code>no-cache</code>).</dd>
- <dt>{{domxref("Request.context")}} {{readonlyInline}} {{deprecated_inline()}}</dt>
- <dd>Contient le contexte de la demande (par exemple, <code>audio</code>, <code>image</code>, <code>iframe</code>, etc.)</dd>
- <dt>{{domxref("Request.credentials")}} {{readonlyInline}}</dt>
- <dd>Contient les informations d'identification de la demande (par exemple, <code>omit</code>, <code>same-origin</code>, <code>include</code>). La valeur par défaut est <code>same-origin</code>.</dd>
- <dt>{{domxref("Request.destination")}} {{ReadOnlyInline}}</dt>
- <dd>Renvoie une chaîne de l'énumération {{domxref("RequestDestination")}} décrivant la destination de la requête. Il s'agit d'une chaîne indiquant le type de contenu demandé.</dd>
- <dt>{{domxref("Request.headers")}} {{readonlyInline}}</dt>
- <dd>Contient l'objet {{domxref("Headers")}} associé de la requête.</dd>
- <dt>{{domxref("Request.integrity")}} {{readonlyInline}}</dt>
- <dd>Contient la valeur d'<a href="/en-US/docs/Web/Security/Subresource_Integrity">intégrité de la sous-ressource</a> de la demande (par exemple, <code>sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=</code>).</dd>
- <dt>{{domxref("Request.method")}} {{readonlyInline}}</dt>
- <dd>Contient la méthode de la requête (<code>GET</code>, <code>POST</code>, etc).</dd>
- <dt>{{domxref("Request.mode")}} {{readonlyInline}}</dt>
- <dd>Contient le mode de la demande (par exemple, <code>cors</code>, <code>no-cors</code>, <code>same-origin</code>, <code>navigate</code>.)</dd>
- <dt>{{domxref("Request.redirect")}} {{readonlyinline}}</dt>
- <dd>Contient le mode de gestion des redirections. Il peut s'agir d'un <code>follow</code>, <code>error</code>, ou d'un <code>manual</code>.</dd>
- <dt>{{domxref("Request.referrer")}} {{readonlyInline}}</dt>
- <dd>Contient le référent de la demande (par exemple, <code>client</code>).</dd>
- <dt>{{domxref("Request.referrerPolicy")}} {{readonlyInline}}</dt>
- <dd>Contient la politique de référent de la demande (par exemple, <code>no-referrer</code>).</dd>
- <dt>{{domxref("Request.url")}} {{readonlyInline}}</dt>
- <dd>Contient l'URL de la demande.</dd>
-</dl>
-
-<p><code>Request</code> implémente {{domxref("Body")}}, donc il hérite également des propriétés suivantes:</p>
-
-<dl>
- <dt>{{domxref("Body.body", "body")}} {{readonlyInline}}</dt>
- <dd>Un getter simple utilisé pour exposer un {{domxref("ReadableStream")}} du contenu du corps.</dd>
- <dt>{{domxref("Body.bodyUsed", "bodyUsed")}} {{readonlyInline}}</dt>
- <dd>Stocke un {{domxref("Boolean")}} qui déclare si le corps a déjà été utilisé dans une réponse.</dd>
-</dl>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<dl>
- <dt>{{domxref("Request.clone()")}}</dt>
- <dd>Crée une copie de l'objet <code>Request</code> actuel.</dd>
-</dl>
-
-<p><code>Request</code> implémente {{domxref("Body")}}, donc il dispose également des méthodes suivantes:</p>
-
-<dl>
- <dt>{{domxref("Body.arrayBuffer()")}}</dt>
- <dd>Renvoie une promesse qui se résout avec une représentation {{domxref("ArrayBuffer")}} du corps de la requête.</dd>
- <dt>{{domxref("Body.blob()")}}</dt>
- <dd>Renvoie une promesse qui se résout avec une représentation {{domxref("Blob")}} du corps de la requête.</dd>
- <dt>{{domxref("Body.formData()")}}</dt>
- <dd>Renvoie une promesse qui se résout avec une représentation {{domxref("FormData")}} du corps de la requếte.</dd>
- <dt>{{domxref("Body.json()")}}</dt>
- <dd>Renvoie une promesse qui se résout avec une représentation {{domxref("JSON")}} du corps de la requête.</dd>
- <dt>{{domxref("Body.text()")}}</dt>
- <dd>Renvoie une promesse qui se résout avec une représentation {{domxref("USVString")}} (texte) du coprs de la requête.</dd>
-</dl>
-
-<div class="note">
-<p><strong>Note :</strong> Les fonctions {{domxref("Body")}} ne peuvent être exécutées qu'une seule fois; les appels suivants seront résolus avec des chaînes vides / ArrayBuffers.</p>
-</div>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Dans l'extrait de code suivant, nous créons une nouvelle requête à l'aide du constructeur <code>Request()</code> (pour un fichier image dans le même répertoire que le script), puis renvoyons certaines valeurs de propriété de la requête:</p>
-
-<pre class="brush: js">const request = new Request('https://www.mozilla.org/favicon.ico');
+{{APIRef("Fetch API")}}
+
+L'interface **`Request`** de l'[API Fetch](/en-US/docs/Web/API/Fetch_API) représente une demande de ressource.
+
+Vous pouvez créer un nouvel objet `Request` en utilisant le constructeur {{domxref("Request.Request","Request()")}}, mais vous êtes plus susceptible de rencontrer un objet `Request` renvoyé à la suite d'une autre opération d'API, telle en tant que service worker {{domxref("FetchEvent.request")}}.
+
+## Constructeur
+
+- {{domxref("Request.Request","Request()")}}
+  - : Crée un nouvel objet `Request`.
+
+## Propriétés
+
+- {{domxref("Request.cache")}} {{readonlyInline}}
+  - : Contient le mode de cache de la demande (par exemple, `default`, `reload`, `no-cache`).
+- {{domxref("Request.context")}} {{readonlyInline}} {{deprecated_inline()}}
+  - : Contient le contexte de la demande (par exemple, `audio`, `image`, `iframe`, etc.)
+- {{domxref("Request.credentials")}} {{readonlyInline}}
+  - : Contient les informations d'identification de la demande (par exemple, `omit`, `same-origin`, `include`). La valeur par défaut est `same-origin`.
+- {{domxref("Request.destination")}} {{ReadOnlyInline}}
+  - : Renvoie une chaîne de l'énumération {{domxref("RequestDestination")}} décrivant la destination de la requête. Il s'agit d'une chaîne indiquant le type de contenu demandé.
+- {{domxref("Request.headers")}} {{readonlyInline}}
+  - : Contient l'objet {{domxref("Headers")}} associé de la requête.
+- {{domxref("Request.integrity")}} {{readonlyInline}}
+  - : Contient la valeur d'[intégrité de la sous-ressource](/en-US/docs/Web/Security/Subresource_Integrity) de la demande (par exemple, `sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=`).
+- {{domxref("Request.method")}} {{readonlyInline}}
+  - : Contient la méthode de la requête (`GET`, `POST`, etc).
+- {{domxref("Request.mode")}} {{readonlyInline}}
+  - : Contient le mode de la demande (par exemple, `cors`, `no-cors`, `same-origin`, `navigate`.)
+- {{domxref("Request.redirect")}} {{readonlyinline}}
+  - : Contient le mode de gestion des redirections. Il peut s'agir d'un `follow`, `error`, ou d'un `manual`.
+- {{domxref("Request.referrer")}} {{readonlyInline}}
+  - : Contient le référent de la demande (par exemple, `client`).
+- {{domxref("Request.referrerPolicy")}} {{readonlyInline}}
+  - : Contient la politique de référent de la demande (par exemple, `no-referrer`).
+- {{domxref("Request.url")}} {{readonlyInline}}
+  - : Contient l'URL de la demande.
+
+`Request` implémente {{domxref("Body")}}, donc il hérite également des propriétés suivantes:
+
+- {{domxref("Body.body", "body")}} {{readonlyInline}}
+  - : Un getter simple utilisé pour exposer un {{domxref("ReadableStream")}} du contenu du corps.
+- {{domxref("Body.bodyUsed", "bodyUsed")}} {{readonlyInline}}
+  - : Stocke un {{domxref("Boolean")}} qui déclare si le corps a déjà été utilisé dans une réponse.
+
+## Méthodes
+
+- {{domxref("Request.clone()")}}
+  - : Crée une copie de l'objet `Request` actuel.
+
+`Request` implémente {{domxref("Body")}}, donc il dispose également des méthodes suivantes:
+
+- {{domxref("Body.arrayBuffer()")}}
+  - : Renvoie une promesse qui se résout avec une représentation {{domxref("ArrayBuffer")}} du corps de la requête.
+- {{domxref("Body.blob()")}}
+  - : Renvoie une promesse qui se résout avec une représentation {{domxref("Blob")}} du corps de la requête.
+- {{domxref("Body.formData()")}}
+  - : Renvoie une promesse qui se résout avec une représentation {{domxref("FormData")}} du corps de la requếte.
+- {{domxref("Body.json()")}}
+  - : Renvoie une promesse qui se résout avec une représentation {{domxref("JSON")}} du corps de la requête.
+- {{domxref("Body.text()")}}
+  - : Renvoie une promesse qui se résout avec une représentation {{domxref("USVString")}} (texte) du coprs de la requête.
+
+> **Note :** Les fonctions {{domxref("Body")}} ne peuvent être exécutées qu'une seule fois; les appels suivants seront résolus avec des chaînes vides / ArrayBuffers.
+
+## Exemples
+
+Dans l'extrait de code suivant, nous créons une nouvelle requête à l'aide du constructeur `Request()` (pour un fichier image dans le même répertoire que le script), puis renvoyons certaines valeurs de propriété de la requête:
+
+```js
+const request = new Request('https://www.mozilla.org/favicon.ico');
 
 const URL = request.url;
 const method = request.method;
 const credentials = request.credentials;
-</pre>
+```
 
-<p>Vous pouvez ensuite récupérer cette requête en passant l'objet <code>Request</code> en tant que paramètre à un appel {{domxref("WindowOrWorkerGlobalScope.fetch()")}}, par exemple:</p>
+Vous pouvez ensuite récupérer cette requête en passant l'objet `Request` en tant que paramètre à un appel {{domxref("WindowOrWorkerGlobalScope.fetch()")}}, par exemple:
 
-<pre class="brush: js">fetch(request)
-  .then(response =&gt; response.blob())
-  .then(blob =&gt; {
+```js
+fetch(request)
+  .then(response => response.blob())
+  .then(blob => {
     image.src = URL.createObjectURL(blob);
-  });</pre>
+  });
+```
 
-<p>Dans l'extrait de code suivant, nous créons une nouvelle requête à l'aide du constructeur <code>Request()</code> avec des données initiales et du contenu du body pour une requête api qui nécessite une charge utile de body:</p>
+Dans l'extrait de code suivant, nous créons une nouvelle requête à l'aide du constructeur `Request()` avec des données initiales et du contenu du body pour une requête api qui nécessite une charge utile de body:
 
-<pre class="brush: js">const request = new Request('https://example.com', {method: 'POST', body: '{"foo": "bar"}'});
+```js
+const request = new Request('https://example.com', {method: 'POST', body: '{"foo": "bar"}'});
 
 const URL = request.url;
 const method = request.method;
 const credentials = request.credentials;
 const bodyUsed = request.bodyUsed;
-</pre>
+```
 
-<div class="note">
-<p><strong>Note:</strong> Le type de body ne peut être qu'un {{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, {{domxref("USVString")}} ou {{domxref("ReadableStream")}} donc pour ajouter un objet JSON à la charge utile, vous devez stringify cet objet.</p>
-</div>
+> **Note :** Le type de body ne peut être qu'un {{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, {{domxref("USVString")}} ou {{domxref("ReadableStream")}} donc pour ajouter un objet JSON à la charge utile, vous devez stringify cet objet.
 
-<p>Vous pouvez ensuite récupérer cette demande d'API en passant l'objet <code>Request</code> en tant que paramètre à un appel {{domxref("WindowOrWorkerGlobalScope.fetch()")}}, par exemple et obtenir la réponse:</p>
+Vous pouvez ensuite récupérer cette demande d'API en passant l'objet `Request` en tant que paramètre à un appel {{domxref("WindowOrWorkerGlobalScope.fetch()")}}, par exemple et obtenir la réponse:
 
-<pre class="brush: js">fetch(request)
-  .then(response =&gt; {
+```js
+fetch(request)
+  .then(response => {
     if (response.status === 200) {
       return response.json();
     } else {
       throw new Error('Something went wrong on api server!');
     }
   })
-  .then(response =&gt; {
+  .then(response => {
     console.debug(response);
     // ...
-  }).catch(error =&gt; {
+  }).catch(error => {
     console.error(error);
-  });</pre>
-
-<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('Fetch','#request-class','Request')}}</td>
-   <td>{{Spec2('Fetch')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Request")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
- <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
- <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
-</ul>
+  });
+```
+
+## Spécifications
+
+| Spécification                                                    | Statut                   | Commentaire         |
+| ---------------------------------------------------------------- | ------------------------ | ------------------- |
+| {{SpecName('Fetch','#request-class','Request')}} | {{Spec2('Fetch')}} | Définition initiale |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Request")}}
+
+## Voir aussi
+
+- [ServiceWorker API](/en-US/docs/Web/API/ServiceWorker_API)
+- [HTTP access control (CORS)](/en-US/docs/Web/HTTP/Access_control_CORS)
+- [HTTP](/en-US/docs/Web/HTTP)
diff --git a/files/fr/web/api/request/mode/index.md b/files/fr/web/api/request/mode/index.md
index d051e937d6..bc19ee5f28 100644
--- a/files/fr/web/api/request/mode/index.md
+++ b/files/fr/web/api/request/mode/index.md
@@ -3,59 +3,44 @@ title: Request.mode
 slug: Web/API/Request/mode
 translation_of: Web/API/Request/mode
 ---
-<div>{{APIRef("Fetch")}}{{SeeCompatTable}}</div>
+{{APIRef("Fetch")}}{{SeeCompatTable}}
 
-<p>La propriété <strong><code>mode</code></strong> (en lecture seule) de l’interface {{domxref("Request")}} contient le mode de la requête (e.g., <code>cors</code>, <code>no-cors</code>, <code>cors-with-forced-preflight</code>, <code>same-origin</code>, or <code>navigate</code>.) Ceci est utilisé pour déterminer si les requêtes différentes de l’origine (cross-origin) mèneront à des réponses valides, et quelles propriétés de la réponse seront lisibles:</p>
+La propriété **`mode`** (en lecture seule) de l’interface {{domxref("Request")}} contient le mode de la requête (e.g., `cors`, `no-cors`, `cors-with-forced-preflight`, `same-origin`, or `navigate`.) Ceci est utilisé pour déterminer si les requêtes différentes de l’origine (cross-origin) mèneront à des réponses valides, et quelles propriétés de la réponse seront lisibles:
 
-<ul>
- <li><code>same-origin</code> — Avec ce mode défini, si la requête est faite vers une autre origine, le résultat sera une erreur. Vous pouvez utiliser ceci afin de vous assurer que la requête sera toujours faites vers votre origine.</li>
- <li><code>no-cors</code> — Prévient la méthode d’une utilisation autre que <code>HEAD</code>, <code>GET</code> ou <code>POST</code>. Si un ServiceWorkers interceptait ces requêtes, il ne pourrait pas ajouter ou réécrire ces en-têtes excepté pour <a href="https://fetch.spec.whatwg.org/#simple-header">ceci</a>. De plus, JavaScript ne peut accéder à aucune propriété de la {{domxref("Response")}}. Cela vous assure que les ServiceWorkers n’affecteront pas la sémantique du Web et prévient pour des raisons de sécurité et de confidentialité pouvant mener à la fuite de données à travers les domaines.</li>
- <li><code>cors</code> — Permet les requêtes cross-origin pour, par exemple, accéder à diverses APIs fournies par de tierces parties. Ces derniers sont censés adhérer au <a href="/en-US/docs/Web/HTTP/Access_control_CORS">protocole CORS</a>. Seul un <a href="https://fetch.spec.whatwg.org/#concept-filtered-response-cors">jeu limité</a> d’en-têtes est exposé dans la {{domxref("Response")}}, mais le corps (body) est lisible.</li>
- <li><code>navigate</code> — Un mode pour supporter la navigation. La valeur <code>navigate</code> est destinée à être utilisée seulement par la navigation HTML. Une requête navigate est créée seulement lorsqu’on navigue entre des documents.</li>
-</ul>
+- `same-origin` — Avec ce mode défini, si la requête est faite vers une autre origine, le résultat sera une erreur. Vous pouvez utiliser ceci afin de vous assurer que la requête sera toujours faites vers votre origine.
+- `no-cors` — Prévient la méthode d’une utilisation autre que `HEAD`, `GET` ou `POST`. Si un ServiceWorkers interceptait ces requêtes, il ne pourrait pas ajouter ou réécrire ces en-têtes excepté pour [ceci](https://fetch.spec.whatwg.org/#simple-header). De plus, JavaScript ne peut accéder à aucune propriété de la {{domxref("Response")}}. Cela vous assure que les ServiceWorkers n’affecteront pas la sémantique du Web et prévient pour des raisons de sécurité et de confidentialité pouvant mener à la fuite de données à travers les domaines.
+- `cors` — Permet les requêtes cross-origin pour, par exemple, accéder à diverses APIs fournies par de tierces parties. Ces derniers sont censés adhérer au [protocole CORS](/en-US/docs/Web/HTTP/Access_control_CORS). Seul un [jeu limité](https://fetch.spec.whatwg.org/#concept-filtered-response-cors) d’en-têtes est exposé dans la {{domxref("Response")}}, mais le corps (body) est lisible.
+- `navigate` — Un mode pour supporter la navigation. La valeur `navigate` est destinée à être utilisée seulement par la navigation HTML. Une requête navigate est créée seulement lorsqu’on navigue entre des documents.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var <var>myMode</var> = <var>request</var>.mode;</pre>
+    var myMode = request.mode;
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>Une valeur {{domxref("RequestMode")}}.</p>
+Une valeur {{domxref("RequestMode")}}.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Dans le bout de code suivant, nous créons une nouvelle requête en utilisant le constructeur {{domxref("Request.Request()")}}  (pour une image située dans le même répertoire que le script), puis on stocke le mode de la requête dans une variable:</p>
+Dans le bout de code suivant, nous créons une nouvelle requête en utilisant le constructeur {{domxref("Request.Request()")}}  (pour une image située dans le même répertoire que le script), puis on stocke le mode de la requête dans une variable:
 
-<pre class="brush: js">var myRequest = new Request('flowers.jpg');
-var myMode = myRequest.mode; // returns "cors" by default</pre>
+```js
+var myRequest = new Request('flowers.jpg');
+var myMode = myRequest.mode; // returns "cors" by default
+```
 
-<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('Fetch','#dom-request-mode', 'mode')}}</td>
-   <td>{{Spec2('Fetch')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                    | État                     | Commentaires        |
+| ---------------------------------------------------------------- | ------------------------ | ------------------- |
+| {{SpecName('Fetch','#dom-request-mode', 'mode')}} | {{Spec2('Fetch')}} | Définition initiale |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
+{{Compat("api.Request.mode")}}
 
+## Voir aussi
 
-<p>{{Compat("api.Request.mode")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/API/ServiceWorker_API">L'API ServiceWorker</a></li>
- <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
- <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
-</ul>
+- [L'API ServiceWorker](/en-US/docs/Web/API/ServiceWorker_API)
+- [HTTP access control (CORS)](/en-US/docs/Web/HTTP/Access_control_CORS)
+- [HTTP](/en-US/docs/Web/HTTP)
diff --git a/files/fr/web/api/request/request/index.md b/files/fr/web/api/request/request/index.md
index bea6114c46..b4b2872f72 100644
--- a/files/fr/web/api/request/request/index.md
+++ b/files/fr/web/api/request/request/index.md
@@ -10,69 +10,54 @@ tags:
   - request
 translation_of: Web/API/Request/Request
 ---
-<div>{{APIRef("Fetch API")}}</div>
-
-<p>Le constructeur <code><strong>Request()</strong></code> crée un nouvel objet {{domxref("Request")}}.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">var maRequete = new Request(entree[, init]);</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><em>entree</em></dt>
- <dd>Définit la ressource que vous souhaitez récupérer. Cela peut être soit :
- <ul>
-  <li>Une {{domxref("USVString")}} contenant l'URL directe de la ressource que vous voulez récupérer.</li>
-  <li>Un objet {{domxref("Request")}}, ce qui crée en fait une copie. Notez les mises à jour de comportement suivantes pour conserver la sécurité, tout en rendant le constructeur moins susceptible de déclencher des exceptions :
-   <ul>
-    <li>Si cet objet existe depuis une autre origine lors de l'appel du constructeur, le {{domxref("Request.referrer")}} est enlevé.</li>
-    <li>Si cet objet a un {{domxref("Request.mode")}} à <code>navigate</code>, la valeur de <code>mode</code> est convertie en <code>same-origin</code>.</li>
-   </ul>
-  </li>
- </ul>
- </dd>
- <dt><em>init</em> {{optional_inline}}</dt>
- <dd>Un objet d'options contenant tous les paramètres personnalisés que vous voulez appliquer à la requête. Les options possibles sont :
- <ul>
-  <li><code>method</code>: La méthode de la requête, par ex., <code>GET</code>, <code>POST</code>.</li>
-  <li><code>headers</code>: Tous les entêtes que vous voulez ajouter à votre requête, contenus dans un objet {{domxref("Headers")}} ou un littéral d'objet avec des valeurs {{domxref("ByteString")}}.</li>
-  <li><code>body</code>: Tout corps que vous voulez ajouter à votre requête : cela peut être un objet {{domxref ("Blob")}}, {{domxref ("BufferSource")}}, {{domxref ("FormData")}}, {{domxref ("URLSearchParams")}}, {{domxref ("USVString")}} ou {{domxref ("ReadableStream")}}. Notez qu'une requête utilisant la méthode GET ou HEAD ne peut pas avoir de corps .</li>
-  <li><code>mode</code>: Le mode que vous souhaitez utiliser pour la requête, par exemple, <code>cors</code>, <code>no-cors</code>, <code>same-origin</code>, ou <code>navigate</code>. La valeur par défaut est <code>cors</code>. Dans Chrome, la valeur par défaut est <code>no-cors</code> avant Chrome 47 et <code>same-origin</code> à partir de Chrome 47.</li>
-  <li><code>credentials</code>: Les informations d'authentification de requête que vous souhaitez utiliser pour la requête : <code>omit</code>, <code>same-origin</code>, ou <code>include</code>. La valeur par défaut est <code>omit</code>. Dans Chrome, la valeur par défaut est <code>same-origin</code> avant Chrome 47 et <code>include</code> à partir de Chrome 47.</li>
-  <li><code>cache</code>: Le <a href="/en-US/docs/Web/API/Request/cache">mode de cache</a> que vous voulez utiliser pour la requête.</li>
-  <li><code>redirect</code>: Le mode de redirection à utiliser : <code>follow</code>, <code>error</code>, ou <code>manual</code>. Dans Chrome, le défaut est <code>manual</code> avant Chrome 47 et <code>follow</code> à partir de Chrome 47.</li>
-  <li><code>referrer</code>: Une {{domxref("USVString")}} indiquant <code>no-referrer</code>, <code>client</code>, ou une URL. La valeur par défaut est <code>client</code>.</li>
-  <li><code>integrity</code>: Contient la valeur d'<a href="/en-US/docs/Web/Security/Subresource_Integrity">intégrité de la sous ressource</a> de la requête (par ex.., <code>sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=</code>).</li>
- </ul>
- </dd>
-</dl>
-
-<h2 id="Erreurs">Erreurs</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col"><strong>Type</strong></th>
-   <th scope="col"><strong>Description</strong></th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>TypeError</code></td>
-   <td>Depuis <a href="/en-US/docs/Mozilla/Firefox/Releases/43">Firefox 43</a>, <code>Request()</code> déclenchera une TypeError si l'URL contient des informations d'authentification, comme dans http://user:password@example.com.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Exemple">Exemple</h2>
-
-<p>Dans notre <a href="https://github.com/mdn/fetch-examples/tree/gh-pages/fetch-request">exemple de Fetch Request</a> (voir <a href="http://mdn.github.io/fetch-examples/fetch-request/">Fetch Request en direct</a>), nous créons un nouvel objet <code>Request</code> en utilisant le constructeur, puis nous le récupérons en utilisant un appel à {{domxref ("GlobalFetch.fetch")}}. Puisque nous récupérons une image, nous lançons {{domxref ("Body.blob")}} sur la réponse pour lui donner le bon type MIME afin qu'il soit géré correctement, puis nous en créons une</p>
-
-<p>Object URL et nous l'affichons dans un élément {{htmlelement ("img")}}.</p>
-
-<pre class="brush: js">var monImage = document.querySelector('img');
+{{APIRef("Fetch API")}}
+
+Le constructeur **`Request()`** crée un nouvel objet {{domxref("Request")}}.
+
+## Syntaxe
+
+    var maRequete = new Request(entree[, init]);
+
+### Paramètres
+
+- _entree_
+
+  - : Définit la ressource que vous souhaitez récupérer. Cela peut être soit :
+
+    - Une {{domxref("USVString")}} contenant l'URL directe de la ressource que vous voulez récupérer.
+    - Un objet {{domxref("Request")}}, ce qui crée en fait une copie. Notez les mises à jour de comportement suivantes pour conserver la sécurité, tout en rendant le constructeur moins susceptible de déclencher des exceptions :
+
+      - Si cet objet existe depuis une autre origine lors de l'appel du constructeur, le {{domxref("Request.referrer")}} est enlevé.
+      - Si cet objet a un {{domxref("Request.mode")}} à `navigate`, la valeur de `mode` est convertie en `same-origin`.
+
+- _init_ {{optional_inline}}
+
+  - : Un objet d'options contenant tous les paramètres personnalisés que vous voulez appliquer à la requête. Les options possibles sont :
+
+    - `method`: La méthode de la requête, par ex., `GET`, `POST`.
+    - `headers`: Tous les entêtes que vous voulez ajouter à votre requête, contenus dans un objet {{domxref("Headers")}} ou un littéral d'objet avec des valeurs {{domxref("ByteString")}}.
+    - `body`: Tout corps que vous voulez ajouter à votre requête : cela peut être un objet {{domxref ("Blob")}}, {{domxref ("BufferSource")}}, {{domxref ("FormData")}}, {{domxref ("URLSearchParams")}}, {{domxref ("USVString")}} ou {{domxref ("ReadableStream")}}. Notez qu'une requête utilisant la méthode GET ou HEAD ne peut pas avoir de corps .
+    - `mode`: Le mode que vous souhaitez utiliser pour la requête, par exemple, `cors`, `no-cors`, `same-origin`, ou `navigate`. La valeur par défaut est `cors`. Dans Chrome, la valeur par défaut est `no-cors` avant Chrome 47 et `same-origin` à partir de Chrome 47.
+    - `credentials`: Les informations d'authentification de requête que vous souhaitez utiliser pour la requête : `omit`, `same-origin`, ou `include`. La valeur par défaut est `omit`. Dans Chrome, la valeur par défaut est `same-origin` avant Chrome 47 et `include` à partir de Chrome 47.
+    - `cache`: Le [mode de cache](/en-US/docs/Web/API/Request/cache) que vous voulez utiliser pour la requête.
+    - `redirect`: Le mode de redirection à utiliser : `follow`, `error`, ou `manual`. Dans Chrome, le défaut est `manual` avant Chrome 47 et `follow` à partir de Chrome 47.
+    - `referrer`: Une {{domxref("USVString")}} indiquant `no-referrer`, `client`, ou une URL. La valeur par défaut est `client`.
+    - `integrity`: Contient la valeur d'[intégrité de la sous ressource](/en-US/docs/Web/Security/Subresource_Integrity) de la requête (par ex.., `sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=`).
+
+## Erreurs
+
+| **Type**    | **Description**                                                                                                                                                                                         |
+| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `TypeError` | Depuis [Firefox 43](/en-US/docs/Mozilla/Firefox/Releases/43), `Request()` déclenchera une TypeError si l'URL contient des informations d'authentification, comme dans http://user:password@example.com. |
+
+## Exemple
+
+Dans notre [exemple de Fetch Request](https://github.com/mdn/fetch-examples/tree/gh-pages/fetch-request) (voir [Fetch Request en direct](http://mdn.github.io/fetch-examples/fetch-request/)), nous créons un nouvel objet `Request` en utilisant le constructeur, puis nous le récupérons en utilisant un appel à {{domxref ("GlobalFetch.fetch")}}. Puisque nous récupérons une image, nous lançons {{domxref ("Body.blob")}} sur la réponse pour lui donner le bon type MIME afin qu'il soit géré correctement, puis nous en créons une
+
+Object URL et nous l'affichons dans un élément {{htmlelement ("img")}}.
+
+```js
+var monImage = document.querySelector('img');
 
 var maRequete = new Request('fleurs.jpg');
 
@@ -81,11 +66,13 @@ fetch(maRequete).then(function(reponse) {
 }).then(function(reponse) {
   var URLdobjet = URL.createObjectURL(reponse);
   monImage.src = URLdobjet;
-});</pre>
+});
+```
 
-<p>Dans notre <a href="https://github.com/mdn/fetch-examples/tree/gh-pages/fetch-request-with-init">exemple de Fetch Request avec init</a> (see <a href="http://mdn.github.io/fetch-examples/fetch-request-with-init/">Fetch Request init en direct</a>), nous faisons la même chose, excepté que nous passons un objet init quand nous invoquons <code>fetch()</code>:</p>
+Dans notre [exemple de Fetch Request avec init](https://github.com/mdn/fetch-examples/tree/gh-pages/fetch-request-with-init) (see [Fetch Request init en direct](http://mdn.github.io/fetch-examples/fetch-request-with-init/)), nous faisons la même chose, excepté que nous passons un objet init quand nous invoquons `fetch()`:
 
-<pre class="brush: js">var monImage = document.querySelector('img');
+```js
+var monImage = document.querySelector('img');
 
 var mesEntetes = new Headers();
 mesEntetes.append('Content-Type', 'image/jpeg');
@@ -99,17 +86,21 @@ var maRequete = new Request('fleurs.jpg',monInit);
 
 fetch(maRequete).then(function(reponse) {
   ...
-});</pre>
+});
+```
 
-<p>Notez que vos pouvez aussi passer l'objet init dans l'appel à <code>fetch</code> pour obtenir le même résultat, par ex. :</p>
+Notez que vos pouvez aussi passer l'objet init dans l'appel à `fetch` pour obtenir le même résultat, par ex. :
 
-<pre class="brush: js">fetch(maRequete,monInit).then(function(reponse) {
+```js
+fetch(maRequete,monInit).then(function(reponse) {
   ...
-});</pre>
+});
+```
 
-<p>Vous pouvez aussi utilier un littéral d'objet tel que <code>headers</code> dans <code>init</code>.</p>
+Vous pouvez aussi utilier un littéral d'objet tel que `headers` dans `init`.
 
-<pre class="brush: js">var monInit = { method: 'GET',
+```js
+var monInit = { method: 'GET',
                headers: {
                    'Content-Type': 'image/jpeg'
                },
@@ -117,42 +108,26 @@ fetch(maRequete).then(function(reponse) {
                cache: 'default' };
 
 var maRequete = new Request('fleurs.jpg', monInit);
-</pre>
+```
 
-<p>Vous pouvez aussi passer un objet {{domxref("Request")}} au constructeur <code>Request()</code> pour créer une copie de la Request (c'est similaire au fait d'appeler la méthode {{domxref("Request.clone","clone()")}}).</p>
+Vous pouvez aussi passer un objet {{domxref("Request")}} au constructeur `Request()` pour créer une copie de la Request (c'est similaire au fait d'appeler la méthode {{domxref("Request.clone","clone()")}}).
 
-<pre>var copie = new Request(maRequete);
-</pre>
+    var copie = new Request(maRequete);
 
-<div class="note">
-<p><strong>Note :</strong> Cette dernière utilisation n'est probablement utile que dans <a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorkers</a>.</p>
-</div>
+> **Note :** Cette dernière utilisation n'est probablement utile que dans [ServiceWorkers](/en-US/docs/Web/API/ServiceWorker_API).
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Fetch','#dom-request','Request()')}}</td>
-   <td>{{Spec2('Fetch')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                    | Statut                   | Commentaire |
+| ---------------------------------------------------------------- | ------------------------ | ----------- |
+| {{SpecName('Fetch','#dom-request','Request()')}} | {{Spec2('Fetch')}} |             |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Request.Request")}}</p>
+{{Compat("api.Request.Request")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/en-US/docs/Web/API/ServiceWorker_API">L'API ServiceWorker</a></li>
- <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">Le contrôle d'accès HTTP (CORS)</a></li>
- <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
-</ul>
+- [L'API ServiceWorker](/en-US/docs/Web/API/ServiceWorker_API)
+- [Le contrôle d'accès HTTP (CORS)](/en-US/docs/Web/HTTP/Access_control_CORS)
+- [HTTP](/en-US/docs/Web/HTTP)
diff --git a/files/fr/web/api/resize_observer_api/index.md b/files/fr/web/api/resize_observer_api/index.md
index 7a52b0c837..7786ef7bf0 100644
--- a/files/fr/web/api/resize_observer_api/index.md
+++ b/files/fr/web/api/resize_observer_api/index.md
@@ -13,45 +13,42 @@ tags:
   - observe
 translation_of: Web/API/Resize_Observer_API
 ---
-<p>{{DefaultAPISidebar("Resize Observer API")}}</p>
+{{DefaultAPISidebar("Resize Observer API")}}
 
-<p>L'API Resize Observer fournit un mécanisme performant par lequel du code peut surveiller les changements de dimensions d'un élément et un observateur recevoir des notifications chaque fois que les dimensions changent.</p>
+L'API Resize Observer fournit un mécanisme performant par lequel du code peut surveiller les changements de dimensions d'un élément et un observateur recevoir des notifications chaque fois que les dimensions changent.
 
-<h2 id="Concepts_et_utilisation">Concepts et utilisation</h2>
+## Concepts et utilisation
 
-<p>Il y a une multitude de cas d'utilisation pour des techniques de <em>responsive design</em> (et d'autres par ailleurs) qui répondent à des changements de dimensions d'un élément mais, avant, leur implantation était souvent amateures et parfois imparfaites.</p>
+Il y a une multitude de cas d'utilisation pour des techniques de _responsive design_ (et d'autres par ailleurs) qui répondent à des changements de dimensions d'un élément mais, avant, leur implantation était souvent amateures et parfois imparfaites.
 
-<p>Par exemple, les <a href="/en-US/docs/Web/CSS/Media_Queries">media queries</a> / {{domxref("window.matchMedia")}} sont un bon outil pour mettre à jour une mise en page à des points spécifiques quand la zone d'affichage change de dimensions, mais qu'en est-il si vous désirez changer la mise en page en réponse à un changement spécifique des dimensions d'un élément qui n'est pas le conteneur principal ?</p>
+Par exemple, les [media queries](/en-US/docs/Web/CSS/Media_Queries) / {{domxref("window.matchMedia")}} sont un bon outil pour mettre à jour une mise en page à des points spécifiques quand la zone d'affichage change de dimensions, mais qu'en est-il si vous désirez changer la mise en page en réponse à un changement spécifique des dimensions d'un élément qui n'est pas le conteneur principal ?
 
-<p>Pour réaliser ceci, une solution limitée serait d'écouter les changements sur un type d'événement qui convienne à résoudre le problème et qui corresponde à l'élément dont les changements de dimensions vous intéresse (c'est-à-dire l'<a href="/en-US/docs/Web/API/Window/resize_event">événement resize</a> sur window), puis de calculer les nouvelles dimensions ou autres propriétés de l'élément après un redimensionnement au moyen de {{domxref("Element.getBoundingClientRect")}} ou de {{domxref("Window.getComputedStyle")}}, par exemple.</p>
+Pour réaliser ceci, une solution limitée serait d'écouter les changements sur un type d'événement qui convienne à résoudre le problème et qui corresponde à l'élément dont les changements de dimensions vous intéresse (c'est-à-dire l'[événement resize](/en-US/docs/Web/API/Window/resize_event) sur window), puis de calculer les nouvelles dimensions ou autres propriétés de l'élément après un redimensionnement au moyen de {{domxref("Element.getBoundingClientRect")}} ou de {{domxref("Window.getComputedStyle")}}, par exemple.
 
-<p>Une telle solution tend à ne fonctionner que pour des cas d'utilisation limités, causer des soucis de performance (continuellement appeler les méthodes évoquées ci-avant résulterait en une grosse baisse de performance), et souvent ne fonctionnera quand les dimensions de la fenêtre du navigateur ne sont pas changées.</p>
+Une telle solution tend à ne fonctionner que pour des cas d'utilisation limités, causer des soucis de performance (continuellement appeler les méthodes évoquées ci-avant résulterait en une grosse baisse de performance), et souvent ne fonctionnera quand les dimensions de la fenêtre du navigateur ne sont pas changées.
 
-<p>L'API Resize Observer fournit une solution adaptée à résoudre exactement ces types de problèmes, et plus encore, en vous permettant d'observer aisément et de répondre à des changements dans les dimensions du content-box ou du border box d'un élément, et ce d'une manière performante. Elle fournit une solution en JavaScript au manque souvent dénoncé de <a href="https://www.xanthir.com/b4PR0">requêtes sur les éléments</a> sur la plate-forme web.</p>
+L'API Resize Observer fournit une solution adaptée à résoudre exactement ces types de problèmes, et plus encore, en vous permettant d'observer aisément et de répondre à des changements dans les dimensions du content-box ou du border box d'un élément, et ce d'une manière performante. Elle fournit une solution en JavaScript au manque souvent dénoncé de [requêtes sur les éléments](https://www.xanthir.com/b4PR0) sur la plate-forme web.
 
-<p>Son utilisation est simple et presque identique aux autres observateurs tels que le <a href="/en-US/docs/Web/API/PerformanceObserver">Performance Observer</a> ou l'<a href="/en-US/docs/Web/API/Intersection_Observer_API">Intersection Observer</a>. Il vous faut créer un nouvel objet {{domxref("ResizeObserver")}} en utilisant le constructeur <code><a href="/en-US/docs/Web/API/ResizeObserver/ResizeObserver">ResizeObserver()</a></code>, puis utiliser {{domxref("ResizeObserver.observe()")}} pour le faire observer les changements de dimensions d'un élément spécifiques. Une fonction de rappel fournise au constructeur sera exécutée à chaque fois que les dimensions changent, fournissant un accès aux nouvelles dimensions et vous permettant de faire tous ce que vous souhaitez faire en réponse à ces changements.</p>
+Son utilisation est simple et presque identique aux autres observateurs tels que le [Performance Observer](/en-US/docs/Web/API/PerformanceObserver) ou l'[Intersection Observer](/en-US/docs/Web/API/Intersection_Observer_API). Il vous faut créer un nouvel objet {{domxref("ResizeObserver")}} en utilisant le constructeur [`ResizeObserver()`](/en-US/docs/Web/API/ResizeObserver/ResizeObserver), puis utiliser {{domxref("ResizeObserver.observe()")}} pour le faire observer les changements de dimensions d'un élément spécifiques. Une fonction de rappel fournise au constructeur sera exécutée à chaque fois que les dimensions changent, fournissant un accès aux nouvelles dimensions et vous permettant de faire tous ce que vous souhaitez faire en réponse à ces changements.
 
-<h2 id="Interfaces">Interfaces</h2>
+## Interfaces
 
-<dl>
- <dt>{{domxref("ResizeObserver")}}</dt>
- <dd>fournit la possibilité d'enregistrer de nouveaux observateurs et de démarrer ou d'arrêter d'observer des éléments.</dd>
- <dt>{{domxref("ResizeObserverEntry")}}</dt>
- <dd>Décrit un unique élément qui a été redimensionné, identifiant l'élément et ses nouvelles dimensions.</dd>
-</dl>
+- {{domxref("ResizeObserver")}}
+  - : fournit la possibilité d'enregistrer de nouveaux observateurs et de démarrer ou d'arrêter d'observer des éléments.
+- {{domxref("ResizeObserverEntry")}}
+  - : Décrit un unique élément qui a été redimensionné, identifiant l'élément et ses nouvelles dimensions.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Vous trouverez plusieurs exemples basiques sur notre dépôt GitHub :</p>
+Vous trouverez plusieurs exemples basiques sur notre dépôt GitHub :
 
-<ul>
- <li><a href="https://mdn.github.io/dom-examples/resize-observer/resize-observer-border-radius.html">resize-observer-border-radius.html</a> (<a href="https://github.com/mdn/dom-examples/blob/master/resize-observer/resize-observer-border-radius.html">voir la source</a>): Un exemple simple avec une boîte verte, dont les dimensions sont proportionnelles à celles de la fenêtre du navigateur. Quand les dimensions de la fenêtre changent, l'arrondissement des angles du carré changent en proportion à la taille du carré. Nous pourrions seulement implanter celà en utilisant {{cssxref("border-radius")}} avec une valeur en pourcentage, mais celà mène vite à des angles elliptiques non esthétiques, tandis que la solution ci-avant vous donne un carré aux angles agréables qui s'adaptent à la taille du carré.</li>
- <li><a href="https://mdn.github.io/dom-examples/resize-observer/resize-observer-text.html">resize-observer-text.html</a> (<a href="https://github.com/mdn/dom-examples/blob/master/resize-observer/resize-observer-text.html">voir la source</a>): Ici, nous utilisations l'observateur de redimensionnement pour changer la {{cssxref("font-size")}} d'un en-tête et d'un paragraphe quand la <code>&lt;div&gt;</code> extérieure change de taille selon la valeur d'une jauge de sélection. Celà montre que vous pouvez répondre à des changement de dimensions d'un élément même s'ils n'ont rien en rapport avec la fenêtre du navigateur.</li>
-</ul>
+- [resize-observer-border-radius.html](https://mdn.github.io/dom-examples/resize-observer/resize-observer-border-radius.html) ([voir la source](https://github.com/mdn/dom-examples/blob/master/resize-observer/resize-observer-border-radius.html)): Un exemple simple avec une boîte verte, dont les dimensions sont proportionnelles à celles de la fenêtre du navigateur. Quand les dimensions de la fenêtre changent, l'arrondissement des angles du carré changent en proportion à la taille du carré. Nous pourrions seulement implanter celà en utilisant {{cssxref("border-radius")}} avec une valeur en pourcentage, mais celà mène vite à des angles elliptiques non esthétiques, tandis que la solution ci-avant vous donne un carré aux angles agréables qui s'adaptent à la taille du carré.
+- [resize-observer-text.html](https://mdn.github.io/dom-examples/resize-observer/resize-observer-text.html) ([voir la source](https://github.com/mdn/dom-examples/blob/master/resize-observer/resize-observer-text.html)): Ici, nous utilisations l'observateur de redimensionnement pour changer la {{cssxref("font-size")}} d'un en-tête et d'un paragraphe quand la `<div>` extérieure change de taille selon la valeur d'une jauge de sélection. Celà montre que vous pouvez répondre à des changement de dimensions d'un élément même s'ils n'ont rien en rapport avec la fenêtre du navigateur.
 
-<p>Le code suivra usuellement ce genre de modèle (tiré de resize-observer-border-radius.html):</p>
+Le code suivra usuellement ce genre de modèle (tiré de resize-observer-border-radius.html):
 
-<pre class="brush: js">const resizeObserver = new ResizeObserver(entries =&gt; {
+```js
+const resizeObserver = new ResizeObserver(entries => {
   for (let entry of entries) {
     if(entry.contentBoxSize) {
       entry.target.style.borderRadius = Math.min(100, (entry.contentBoxSize.inlineSize/10) +
@@ -63,33 +60,19 @@ translation_of: Web/API/Resize_Observer_API
   }
 });
 
-resizeObserver.observe(document.querySelector('div'));</pre>
+resizeObserver.observe(document.querySelector('div'));
+```
 
-<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">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Resize Observer')}}</td>
-   <td>{{Spec2('Resize Observer')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                            | État                                 | Commentaire          |
+| ---------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName('Resize Observer')}} | {{Spec2('Resize Observer')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
+{{Compat("api.ResizeObserver")}}
 
+## Voir aussi
 
-<p>{{Compat("api.ResizeObserver")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="https://developers.google.com/web/updates/2016/10/resizeobserver">ResizeObserver: It’s Like document.onresize for Elements</a></li>
-</ul>
+- [ResizeObserver: It’s Like document.onresize for Elements](https://developers.google.com/web/updates/2016/10/resizeobserver)
diff --git a/files/fr/web/api/response/index.md b/files/fr/web/api/response/index.md
index d1b5aea198..64c7126651 100644
--- a/files/fr/web/api/response/index.md
+++ b/files/fr/web/api/response/index.md
@@ -11,116 +11,97 @@ tags:
   - Response
 translation_of: Web/API/Response
 ---
-<div>{{APIRef("Fetch API")}}</div>
-
-<p>L'interface <strong><code>Response</code></strong> de l'API de <a href="/en-US/docs/Web/API/Fetch_API">fetch</a> représente la réponse d'une requête initialisée.</p>
-
-<p>Vous pouvez créer un nouvel objet <code>Response</code> en utilisant le constructeur {{domxref("Response.Response()")}}. Cependant, vous rencontrerez plus fréquemment l'objet Response comme étant le résultat d'une opération de l'API, par exemple, un service worker {{domxref("Fetchevent.respondWith")}}, ou un simple {{domxref("GlobalFetch.fetch()")}}.</p>
-
-<h2 id="Constructeur">Constructeur</h2>
-
-<dl>
- <dt>{{domxref("Response.Response","Response()")}}</dt>
- <dd>Crée un nouvel objet <code>Response</code>.</dd>
-</dl>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<dl>
- <dt>{{domxref("Response.headers")}} {{readonlyinline}}</dt>
- <dd>Contient les objets {{domxref("Headers")}} associés à la réponse.</dd>
- <dt>{{domxref("Response.ok")}} {{readonlyinline}}</dt>
- <dd>Contient un booléen statuant s'il s'agit d'une réponse indiquant un succès (statut HTTP entre 200 et 299) ou non.</dd>
- <dt>{{domxref("Response.redirected")}} {{ReadOnlyInline}}</dt>
- <dd>Indique si oui ou non la réponse est le résultat d'une (ou plusieurs) redirection(s), c'est-à-dire que sa liste d'URLs a plus d'une entrée.</dd>
- <dt>{{domxref("Response.status")}} {{readonlyinline}}</dt>
- <dd>Contient le status code de la réponse (par exemple <code>200</code> en cas de réussite).</dd>
- <dt>{{domxref("Response.statusText")}} {{readonlyinline}}</dt>
- <dd>Contient le message du statut correspondant au status code (à savoir : <code>OK</code> pour le code <code>200</code> par exemple).</dd>
- <dt>{{domxref("Response.type")}} {{readonlyinline}}</dt>
- <dd>Contient le type de la réponse (par exemple, <code>basic</code>, <code>cors</code>).</dd>
- <dt>{{domxref("Response.url")}} {{readonlyinline}}</dt>
- <dd>Contient l'URL de la réponse.</dd>
- <dt>{{domxref("Response.useFinalURL")}}</dt>
- <dd>Contient un booléen statuant s'il s'agit de l'URL finale de la réponse.</dd>
-</dl>
-
-<p>Par ailleurs, <code>Response</code> implémente également une propriété {{domxref("Body")}}, voici les propriétés qui lui sont propres :</p>
-
-<dl>
- <dt>{{domxref("Body.body")}} {{readonlyInline}}</dt>
- <dd>Un simple getter utilisé afin d'exposer un {{domxref("ReadableStream")}} permettant de lire le contenu du body.</dd>
- <dt>{{domxref("Body.bodyUsed")}} {{readonlyInline}}</dt>
- <dd>Stocke un {{domxref("Boolean")}} qui indique si le body a déjà été utilisé dans la réponse ou non.</dd>
-</dl>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<dl>
- <dt>{{domxref("Response.clone()")}}</dt>
- <dd>Crée un clone de l'objet <code>Response</code>.</dd>
- <dt>{{domxref("Response.error()")}}</dt>
- <dd>Retourne un nouvel objet <code>Response</code> associé à une erreur réseau.</dd>
- <dt>{{domxref("Response.redirect()")}}</dt>
- <dd>Crée une nouvelle réponse avec une URL différente permettant de rediriger l'utilisateur.</dd>
-</dl>
-
-<p><code>Response</code> implémente {{domxref("Body")}}, voici les différentes méthodes qui sont disponibles:</p>
-
-<dl>
- <dt>{{domxref("Body.arrayBuffer()")}}</dt>
- <dd>Prend le stream de la {{domxref("Response")}} et le lit jusqu'à la fin. Renvoie une promise qui retourne un {{domxref("ArrayBuffer")}} lorsqu'elle est résolue.</dd>
- <dt>{{domxref("Body.blob()")}}</dt>
- <dd>Prend le stream de la {{domxref("Response")}} et le lit jusqu'à la fin. Renvoie une promise qui retourne un {{domxref("Blob")}} lorsqu'elle est résolue.</dd>
- <dt>{{domxref("Body.formData()")}}</dt>
- <dd>Prend le stream de la {{domxref("Response")}} et le lit jusqu'à la fin. Renvoie une promise qui retourne un {{domxref("FormData")}} lorsqu'elle est résolue.</dd>
- <dt>{{domxref("Body.json()")}}</dt>
- <dd>Prend le stream de la {{domxref("Response")}} et le lit jusqu'à la fin. Renvoie une promise qui retourne le résultat du parsing du body text, comme {{jsxref("JSON")}} ,lorsqu'elle est résolue.</dd>
- <dt>{{domxref("Body.text()")}}</dt>
- <dd>Prend le stream de la {{domxref("Response")}} et le lit jusqu'à la fin. Renvoie une promise qui est résolue avec un {{domxref("USVString")}} (text).</dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Dans notre <a href="https://github.com/mdn/fetch-examples/tree/gh-pages/basic-fetch">exemple basique d'utilisation de fetch </a>(<a href="http://mdn.github.io/fetch-examples/basic-fetch/">exemple</a>), nous utilisons un simple appel <code>fetch()</code> pour récupérer une image et l'afficher dans un tag {{htmlelement("img")}}. L'appel <code>fetch()</code> retourne une promise qui est résolue avec un objet <code>Response</code> associé à l'opération de récupération de la ressource. Vous remarquerez que puisque nous récupérons une image, nous avons besoin d'utiliser {{domxref("Body.blob")}} (disponible dans le body de la {{domxref("Response")}}) pour attribuer le bon MIME type à la réponse.</p>
-
-<pre class="brush: js">var myImage = document.querySelector('.my-image');
+{{APIRef("Fetch API")}}
+
+L'interface **`Response`** de l'API de [fetch](/en-US/docs/Web/API/Fetch_API) représente la réponse d'une requête initialisée.
+
+Vous pouvez créer un nouvel objet `Response` en utilisant le constructeur {{domxref("Response.Response()")}}. Cependant, vous rencontrerez plus fréquemment l'objet Response comme étant le résultat d'une opération de l'API, par exemple, un service worker {{domxref("Fetchevent.respondWith")}}, ou un simple {{domxref("GlobalFetch.fetch()")}}.
+
+## Constructeur
+
+- {{domxref("Response.Response","Response()")}}
+  - : Crée un nouvel objet `Response`.
+
+## Propriétés
+
+- {{domxref("Response.headers")}} {{readonlyinline}}
+  - : Contient les objets {{domxref("Headers")}} associés à la réponse.
+- {{domxref("Response.ok")}} {{readonlyinline}}
+  - : Contient un booléen statuant s'il s'agit d'une réponse indiquant un succès (statut HTTP entre 200 et 299) ou non.
+- {{domxref("Response.redirected")}} {{ReadOnlyInline}}
+  - : Indique si oui ou non la réponse est le résultat d'une (ou plusieurs) redirection(s), c'est-à-dire que sa liste d'URLs a plus d'une entrée.
+- {{domxref("Response.status")}} {{readonlyinline}}
+  - : Contient le status code de la réponse (par exemple `200` en cas de réussite).
+- {{domxref("Response.statusText")}} {{readonlyinline}}
+  - : Contient le message du statut correspondant au status code (à savoir : `OK` pour le code `200` par exemple).
+- {{domxref("Response.type")}} {{readonlyinline}}
+  - : Contient le type de la réponse (par exemple, `basic`, `cors`).
+- {{domxref("Response.url")}} {{readonlyinline}}
+  - : Contient l'URL de la réponse.
+- {{domxref("Response.useFinalURL")}}
+  - : Contient un booléen statuant s'il s'agit de l'URL finale de la réponse.
+
+Par ailleurs, `Response` implémente également une propriété {{domxref("Body")}}, voici les propriétés qui lui sont propres :
+
+- {{domxref("Body.body")}} {{readonlyInline}}
+  - : Un simple getter utilisé afin d'exposer un {{domxref("ReadableStream")}} permettant de lire le contenu du body.
+- {{domxref("Body.bodyUsed")}} {{readonlyInline}}
+  - : Stocke un {{domxref("Boolean")}} qui indique si le body a déjà été utilisé dans la réponse ou non.
+
+## Méthodes
+
+- {{domxref("Response.clone()")}}
+  - : Crée un clone de l'objet `Response`.
+- {{domxref("Response.error()")}}
+  - : Retourne un nouvel objet `Response` associé à une erreur réseau.
+- {{domxref("Response.redirect()")}}
+  - : Crée une nouvelle réponse avec une URL différente permettant de rediriger l'utilisateur.
+
+`Response` implémente {{domxref("Body")}}, voici les différentes méthodes qui sont disponibles:
+
+- {{domxref("Body.arrayBuffer()")}}
+  - : Prend le stream de la {{domxref("Response")}} et le lit jusqu'à la fin. Renvoie une promise qui retourne un {{domxref("ArrayBuffer")}} lorsqu'elle est résolue.
+- {{domxref("Body.blob()")}}
+  - : Prend le stream de la {{domxref("Response")}} et le lit jusqu'à la fin. Renvoie une promise qui retourne un {{domxref("Blob")}} lorsqu'elle est résolue.
+- {{domxref("Body.formData()")}}
+  - : Prend le stream de la {{domxref("Response")}} et le lit jusqu'à la fin. Renvoie une promise qui retourne un {{domxref("FormData")}} lorsqu'elle est résolue.
+- {{domxref("Body.json()")}}
+  - : Prend le stream de la {{domxref("Response")}} et le lit jusqu'à la fin. Renvoie une promise qui retourne le résultat du parsing du body text, comme {{jsxref("JSON")}} ,lorsqu'elle est résolue.
+- {{domxref("Body.text()")}}
+  - : Prend le stream de la {{domxref("Response")}} et le lit jusqu'à la fin. Renvoie une promise qui est résolue avec un {{domxref("USVString")}} (text).
+
+## Exemples
+
+Dans notre [exemple basique d'utilisation de fetch ](https://github.com/mdn/fetch-examples/tree/gh-pages/basic-fetch)([exemple](http://mdn.github.io/fetch-examples/basic-fetch/)), nous utilisons un simple appel `fetch()` pour récupérer une image et l'afficher dans un tag {{htmlelement("img")}}. L'appel `fetch()` retourne une promise qui est résolue avec un objet `Response` associé à l'opération de récupération de la ressource. Vous remarquerez que puisque nous récupérons une image, nous avons besoin d'utiliser {{domxref("Body.blob")}} (disponible dans le body de la {{domxref("Response")}}) pour attribuer le bon MIME type à la réponse.
+
+```js
+var myImage = document.querySelector('.my-image');
 fetch('flowers.jpg').then(function(response) {
   return response.blob();
 }).then(function(blob) {
   var objectURL = URL.createObjectURL(blob);
   myImage.src = objectURL;
-});</pre>
+});
+```
 
-<p>Vous pouvez également utiliser le constructeur {{domxref("Response.Response()")}} pour créer votre propre objet <code>Response</code>:</p>
+Vous pouvez également utiliser le constructeur {{domxref("Response.Response()")}} pour créer votre propre objet `Response`:
 
-<pre class="brush: js">var myResponse = new Response();</pre>
+```js
+var myResponse = new Response();
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Fetch','#response-class','Response')}}</td>
-   <td>{{Spec2('Fetch')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                        | Statut                   | Commentaire         |
+| -------------------------------------------------------------------- | ------------------------ | ------------------- |
+| {{SpecName('Fetch','#response-class','Response')}} | {{Spec2('Fetch')}} | Définition initiale |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Response")}}</p>
+{{Compat("api.Response")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
- <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
- <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
-</ul>
+- [ServiceWorker API](/en-US/docs/Web/API/ServiceWorker_API)
+- [HTTP access control (CORS)](/en-US/docs/Web/HTTP/Access_control_CORS)
+- [HTTP](/en-US/docs/Web/HTTP)
diff --git a/files/fr/web/api/response/ok/index.md b/files/fr/web/api/response/ok/index.md
index a64a14f384..c01324d639 100644
--- a/files/fr/web/api/response/ok/index.md
+++ b/files/fr/web/api/response/ok/index.md
@@ -11,65 +11,50 @@ tags:
   - ok
 translation_of: Web/API/Response/ok
 ---
-<div>{{APIRef("Fetch")}}</div>
+{{APIRef("Fetch")}}
 
-<p>La propriété en lecture seule <code><strong>ok</strong></code> de l'interface {{domxref("Response")}} contient un booléen correspondant au succès (codes de statut compris entre 200 et 299) ou à l'échec de la réponse.</p>
+La propriété en lecture seule **`ok`** de l'interface {{domxref("Response")}} contient un booléen correspondant au succès (codes de statut compris entre 200 et 299) ou à l'échec de la réponse.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var <var>myOK</var> = <var>response</var>.ok;</pre>
+    var myOK = response.ok;
 
-<h3 id="Value">Valeur</h3>
+### Valeur
 
-<p>Un {{domxref("Boolean")}}.</p>
+Un {{domxref("Boolean")}}.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<p>Dans <a href="https://github.com/mdn/fetch-examples/tree/master/fetch-response">notre exemple</a> (voir <a href="https://mdn.github.io/fetch-examples/fetch-response/">la démonstration en ligne</a>) nous créons un nouvel objet {{domxref("Request")}} en utilisant le constructeur {{domxref("Request.Request","Request()")}} avec le chemin vers un JPG en argument. On récupère (<em>fetch</em> en anglais) ensuite la requête en utilisant {{domxref("GlobalFetch.fetch()")}}, on extrait un <em>blob</em> de la réponse en utilisant {{domxref("Body.blob")}} pour créer un objet URL grâce à {{domxref("URL.createObjectURL")}} et l'afficher dans une balise {{htmlelement("img")}}.</p>
+Dans [notre exemple](https://github.com/mdn/fetch-examples/tree/master/fetch-response) (voir [la démonstration en ligne](https://mdn.github.io/fetch-examples/fetch-response/)) nous créons un nouvel objet {{domxref("Request")}} en utilisant le constructeur {{domxref("Request.Request","Request()")}} avec le chemin vers un JPG en argument. On récupère (_fetch_ en anglais) ensuite la requête en utilisant {{domxref("GlobalFetch.fetch()")}}, on extrait un _blob_ de la réponse en utilisant {{domxref("Body.blob")}} pour créer un objet URL grâce à {{domxref("URL.createObjectURL")}} et l'afficher dans une balise {{htmlelement("img")}}.
 
-<div class="note">
-<p><strong>Note :</strong> Nous affichons la valeur de la propriété <code>ok</code> de la réponse dans la console en haut du bloc <code>fetch()</code>.</p>
-</div>
+> **Note :** Nous affichons la valeur de la propriété `ok` de la réponse dans la console en haut du bloc `fetch()`.
 
-<pre class="brush: js">var myImage = document.querySelector('img');
+```js
+var myImage = document.querySelector('img');
 
 var myRequest = new Request('flowers.jpg');
 
 fetch(myRequest).then(function(response) {
-  console.log(response.ok); // retourne true si la réponse est retournée avec succès 
+  console.log(response.ok); // retourne true si la réponse est retournée avec succès
   response.blob().then(function(myBlob) {
     var objectURL = URL.createObjectURL(myBlob);
     myImage.src = objectURL;
   });
-});</pre>
-
-<h2 id="Specifications">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('Fetch','#dom-response-ok','ok')}}</td>
-   <td>{{Spec2('Fetch')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Response.ok")}}</p>
-
-<h2 id="See_also">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/Service_Worker_API">API ServiceWorker</a></li>
- <li><a href="/fr/docs/Web/HTTP/CORS">Contrôle d'accès HTTP (CORS)</a></li>
- <li><a href="/fr/docs/Web/HTTP">HTTP</a></li>
-</ul>
+});
+```
+
+## Spécifications
+
+| Spécification                                                | Statut                   | Commentaire         |
+| ------------------------------------------------------------ | ------------------------ | ------------------- |
+| {{SpecName('Fetch','#dom-response-ok','ok')}} | {{Spec2('Fetch')}} | Définition initiale |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Response.ok")}}
+
+## Voir aussi
+
+- [API ServiceWorker](/fr/docs/Web/API/Service_Worker_API)
+- [Contrôle d'accès HTTP (CORS)](/fr/docs/Web/HTTP/CORS)
+- [HTTP](/fr/docs/Web/HTTP)
diff --git a/files/fr/web/api/rtciceserver/index.md b/files/fr/web/api/rtciceserver/index.md
index 8974d49f65..9b51e6d84e 100644
--- a/files/fr/web/api/rtciceserver/index.md
+++ b/files/fr/web/api/rtciceserver/index.md
@@ -3,59 +3,44 @@ title: RTCIceServer
 slug: Web/API/RTCIceServer
 translation_of: Web/API/RTCIceServer
 ---
-<p>{{APIRef("WebRTC")}}</p>
-
-<p>RTCIceServer définit comment se connecter à un serveur ICE unique (comme un serveur {{Glossary("STUN")}} ou {{Glossary("TURN")}}). Il comprend à la fois l'URL et les éventuelle informations d'identification nécessaires pour se connecter au serveur.</p>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<dl>
- <dt>{{domxref("RTCIceServer.credential", "credential")}} {{optional_inline}}</dt>
- <dd>Les informations d'identification à utiliser lors de la connexion au serveur. Celles‑ci sont utilisées uniquement si <code>RTCIceServer</code> est un serveur TURN.</dd>
- <dt>{{domxref("RTCIceServer.credentialType", "credentialType")}} {{optional_inline}}</dt>
- <dd>Si <code>RTCIceServer</code> est un serveur TURN, cet attribut spécifie quel type d'information d'identification doit être utilisé lors de la connexion. Ce doit être l'une des valeurs définies par l'énumération {{domxref("RTCIceCredentialType")}}. La valeur par défaut est <code>password</code>.</dd>
- <dt>{{domxref("RTCIceServer.url", "url")}} {{obsolete_inline}}</dt>
- <dd>Cette propriété obsolète est une chaîne spécifiant l'URL d'un serveur ICE unique. <strong>Ne pas utiliser cette propriété; utiliser plutôt {{domxref("RTCIceServer.urls")}}</strong>. Étant donné que de nombreux livres et exemples anciens l'utilisent encore, nous l'incluons pour aider les développeurs à mettre à jour leur code ou donner un sens a des exemples plus anciens.</dd>
- <dt>{{domxref("RTCIceServer.urls", "urls")}}</dt>
- <dd>Cette propriété est <strong>obligatoire</strong>, elle peut être soit une seule {{domxref("DOMString")}} ou un tableau de {{domxref("DOMString")}} , spécifiant chacun une URL qui peut être utilisée pour se connecter au serveur.</dd>
- <dt>{{domxref("RTCIceServer.username", "username")}} {{optional_inline}}</dt>
- <dd>Si <code>RTCIceServer</code> est un serveur TURN, alors ceci est le nom d'utilisateur à utiliser pendant le processus d'authentification.</dd>
-</dl>
-
-<p>Évitez de spécifier un nombre inutilement élevé d'URL dans la propriété <code>urls</code>; le temps de démarrage de votre connexion va augmenter sensiblement. Chaque serveur dans la liste sera contacté et testé avant d'en choisir un pour être utilisé pour la négociation.</p>
-
-<div class="note">
-<p><strong>Note :</strong> Les anciennes versions de la spécification WebRTC incluent une propriété <code>url</code> au lieu de <code>urls</code>; cela a été changé afin de vous permettre de spécifier plusieurs adresses pour chaque serveur dans la liste, comme le montre l'exemple ci-dessous.</p>
-</div>
-
-<h2 id="Constantes">Constantes</h2>
-
-<h3 id="Enumeration_RTCIceCredentialType">Enumeration RTCIceCredentialType </h3>
-
-<p>L'enumeration <code>RTCIceCredentialType</code> spécifie les valeurs qui peuvent être renvoyés par la propriété credentialType pour définir quel type d'authentification est fournie dans la propriété {{domxref("RTCIceServer.credential")}}. Cela peut être l'une des valeurs ci‑dessous.</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Constante</th>
-   <th scope="col">Description</th>
-  </tr>
-  <tr>
-   <td><code>"password"</code></td>
-   <td>un mot de passe d'aithentification. Voir {{RFC (5389, "", 10.2)}} pour plus de détails.</td>
-  </tr>
-  <tr>
-   <td><code>"token"</code></td>
-   <td>La créance est un jeton d'accès à utiliser avec un système d'authentification tiers.</td>
-  </tr>
- </thead>
-</table>
-
-<h2 id="Example">Exemple</h2>
-
-<p>La configuration ci-dessous établit deux serveurs ICE. Le premier, <code>stun:stun.services.mozilla.com</code>, nécessite une authentification, le nom d'utilisateur et le mot de passe sont donc fournis. Le second serveur a deux URLs : <code>stun:stun.example.com</code> et <code>stun:stun-1.example.com</code>.</p>
-
-<pre class="brush: js">var configuration = {
+{{APIRef("WebRTC")}}
+
+RTCIceServer définit comment se connecter à un serveur ICE unique (comme un serveur {{Glossary("STUN")}} ou {{Glossary("TURN")}}). Il comprend à la fois l'URL et les éventuelle informations d'identification nécessaires pour se connecter au serveur.
+
+## Propriétés
+
+- {{domxref("RTCIceServer.credential", "credential")}} {{optional_inline}}
+  - : Les informations d'identification à utiliser lors de la connexion au serveur. Celles‑ci sont utilisées uniquement si `RTCIceServer` est un serveur TURN.
+- {{domxref("RTCIceServer.credentialType", "credentialType")}} {{optional_inline}}
+  - : Si `RTCIceServer` est un serveur TURN, cet attribut spécifie quel type d'information d'identification doit être utilisé lors de la connexion. Ce doit être l'une des valeurs définies par l'énumération {{domxref("RTCIceCredentialType")}}. La valeur par défaut est `password`.
+- {{domxref("RTCIceServer.url", "url")}} {{obsolete_inline}}
+  - : Cette propriété obsolète est une chaîne spécifiant l'URL d'un serveur ICE unique. **Ne pas utiliser cette propriété; utiliser plutôt {{domxref("RTCIceServer.urls")}}**. Étant donné que de nombreux livres et exemples anciens l'utilisent encore, nous l'incluons pour aider les développeurs à mettre à jour leur code ou donner un sens a des exemples plus anciens.
+- {{domxref("RTCIceServer.urls", "urls")}}
+  - : Cette propriété est **obligatoire**, elle peut être soit une seule {{domxref("DOMString")}} ou un tableau de {{domxref("DOMString")}} , spécifiant chacun une URL qui peut être utilisée pour se connecter au serveur.
+- {{domxref("RTCIceServer.username", "username")}} {{optional_inline}}
+  - : Si `RTCIceServer` est un serveur TURN, alors ceci est le nom d'utilisateur à utiliser pendant le processus d'authentification.
+
+Évitez de spécifier un nombre inutilement élevé d'URL dans la propriété `urls`; le temps de démarrage de votre connexion va augmenter sensiblement. Chaque serveur dans la liste sera contacté et testé avant d'en choisir un pour être utilisé pour la négociation.
+
+> **Note :** Les anciennes versions de la spécification WebRTC incluent une propriété `url` au lieu de `urls`; cela a été changé afin de vous permettre de spécifier plusieurs adresses pour chaque serveur dans la liste, comme le montre l'exemple ci-dessous.
+
+## Constantes
+
+### Enumeration RTCIceCredentialType 
+
+L'enumeration `RTCIceCredentialType` spécifie les valeurs qui peuvent être renvoyés par la propriété credentialType pour définir quel type d'authentification est fournie dans la propriété {{domxref("RTCIceServer.credential")}}. Cela peut être l'une des valeurs ci‑dessous.
+
+| Constante    | Description                                                                                     |
+| ------------ | ----------------------------------------------------------------------------------------------- |
+| `"password"` | un mot de passe d'aithentification. Voir {{RFC (5389, "", 10.2)}} pour plus de détails. |
+| `"token"`    | La créance est un jeton d'accès à utiliser avec un système d'authentification tiers.            |
+
+## Exemple
+
+La configuration ci-dessous établit deux serveurs ICE. Le premier, `stun:stun.services.mozilla.com`, nécessite une authentification, le nom d'utilisateur et le mot de passe sont donc fournis. Le second serveur a deux URLs : `stun:stun.example.com` et `stun:stun-1.example.com`.
+
+```js
+var configuration = {
   iceServers: [{
     urls: "stun:stun.services.mozilla.com",
     username: "louis@mozilla.com",
@@ -68,19 +53,18 @@ translation_of: Web/API/RTCIceServer
    }]
 };
 
-var pc = new RTCPeerConnection(configuration);</pre>
+var pc = new RTCPeerConnection(configuration);
+```
 
-<p>Une fois l'objet de configuration créé, il est passé dans le constructeur {{domxref("RTCPeerConnection.RTCPeerConnection", "RTCPeerConnection()")}} pour l'utiliser comme configuration de la nouvelle connexion entre pairs.</p>
+Une fois l'objet de configuration créé, il est passé dans le constructeur {{domxref("RTCPeerConnection.RTCPeerConnection", "RTCPeerConnection()")}} pour l'utiliser comme configuration de la nouvelle connexion entre pairs.
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.RTCIceServer")}}</p>
+{{Compat("api.RTCIceServer")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>{{domxref("RTCPeerConnection")}}</li>
-  <li>{{domxref("RTCConfiguration")}}</li>
-  <li><a href="/fr/docs/Web/API/WebRTC_API/Session_lifetime">Durée de vie d'une session WebRTC</a></li>
-  <li><a href="/fr/docs/Web/API/WebRTC_API/Connectivity">Connectivité WebRTC</a></li>
-</ul>
+- {{domxref("RTCPeerConnection")}}
+- {{domxref("RTCConfiguration")}}
+- [Durée de vie d'une session WebRTC](/fr/docs/Web/API/WebRTC_API/Session_lifetime)
+- [Connectivité WebRTC](/fr/docs/Web/API/WebRTC_API/Connectivity)
diff --git a/files/fr/web/api/rtcpeerconnection/index.md b/files/fr/web/api/rtcpeerconnection/index.md
index 6b4d2f4a02..b0e12e7a1c 100644
--- a/files/fr/web/api/rtcpeerconnection/index.md
+++ b/files/fr/web/api/rtcpeerconnection/index.md
@@ -1,252 +1,186 @@
 ---
 title: RTCPeerConnection
 slug: Web/API/RTCPeerConnection
-browser-compat: api.RTCPeerConnection
 translation_of: Web/API/RTCPeerConnection
+browser-compat: api.RTCPeerConnection
 ---
-<div>{{APIRef('WebRTC')}}</div>
-
-<p>L'interface <strong><code>RTCPeerConnection</code></strong> représente une connexion WebRTC entre un ordinateur local et un pair distant. Elle fournit des méthodes pour se connecter à un pair distant, entretenir et surveiller la connexion et fermer la connexion dès qu'elle n'est plus nécessaire.</p>
-
-<p>{{InheritanceDiagram}}</p>
-
-<h2 id="constructor">Constructeur</h2>
-
-<dl>
-  <dt><a href="/fr/docs/Web/API/RTCPeerConnection/RTCPeerConnection"><code>RTCPeerConnection()</code></a></dt>
-  <dd> Renvoie un nouvel objet <code>RTCPeerConnection</code> qui représente la connexion entre l'appareil local et le pair distant.</dd>
-</dl>
-
-<h2 id="static_methods">Méthodes statiques</h2>
-
-<dl>
-  <dt><a href="/fr/docs/Web/API/RTCPeerConnection/generateCertificate"><code>generateCertificate()</code></a></dt>
-  <dd>Crée un certificat X.509 et la clé privée correspondante. Cette méthode renvoie une <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise">promesse</a> dont la valeur de résolution sera le nouvel objet <a href="/fr/docs/Web/API/RTCCertificate"><code>RTCCertificate</code></a> une fois généré.</dd>
-</dl>
-
-<h2 id="properties">Propriétés</h2>
-
-<p><em>Cette interface hérite également des propriétés de <a href="/fr/docs/Web/API/EventTarget"><code>EventTarget</code></a>.</em></p>
-
-<dl>
-  <dt><a href="/fr/docs/Web/API/RTCPeerConnection/canTrickleIceCandidates"><code>canTrickleIceCandidates</code></a> {{ReadOnlyInline}}</dt>
-  <dd>Renvoie un booléen qui indique si un pair distant peut accepter ou non <a href="https://datatracker.ietf.org/doc/html/draft-ietf-mmusic-trickle-ice">les candidats ICE au goutte-à-goutte (<i lang="en">trickled ICE candidates</i>)</a>.
-  </dd>
-
-  <dt><a href="/fr/docs/Web/API/RTCPeerConnection/connectionState"><code>connectionState</code></a> {{ReadOnlyInline}}</dt>
-  <dd>Indique l'état actuel de la connexion au pair en renvoyant une de ces chaînes de caractères <code>new</code>, <code>connecting</code>, <code>connected</code>, <code>disconnected</code>, <code>failed</code> ou <code>closed</code>.
-  </dd>
-
-  <dt><a href="/fr/docs/Web/API/RTCPeerConnection/currentLocalDescription"><code>currentLocalDescription</code></a> {{ReadOnlyInline}}</dt>
-  <dd>Renvoie un objet <a href="/fr/docs/Web/API/RTCSessionDescription"><code>RTCSessionDescription</code></a> qui décrit la partie locale de la connexion qui a été négociée avec succès le plus récemment depuis la dernière fois où cette connexion <code>RTCPeerConnection</code> a terminé de négocier et s'est connectée à un pair distant. Cet objet inclut également une liste des candidats ICE qui peuvent avoir déjà été générés par l'agent ICE depuis que l'offre ou la réponse représentée par la description a été instanciée en premier lieu.</dd>
-
-  <dt><a href="/fr/docs/Web/API/RTCPeerConnection/currentRemoteDescription"><code>currentRemoteDescription</code></a> {{ReadOnlyInline}}</dt>
-  <dd>Renvoie un objet <a href="/fr/docs/Web/API/RTCSessionDescription"><code>RTCSessionDescription</code></a> qui décrit la connexion pour le pair distant pour la connexion qui a été négociée avec succès le plus récemment depuis la dernière fois où cette connexion <code>RTCPeerConnection</code> a terminé de négocier et s'est connectée à un pair distant. Cet objet inclut également une liste des candidats ICE qui peuvent avoir déjà été générés par l'agent ICE depuis que l'offre ou la réponse représentée par la description a été instanciée en premier lieu.</dd>
-
-  <dt><a href="/fr/docs/Web/API/RTCPeerConnection/iceConnectionState"><code>iceConnectionState</code></a> {{ReadOnlyInline}}</dt>
-  <dd>Renvoie une chaîne de caractères qui indique l'état de l'agent ICE associée à cette connexion <code>RTCPeerConnection</code>. La chaîne de caractères peut être l'une de celles-ci : <code>new</code>, <code>checking</code>, <code>connected</code>, <code>completed</code>, <code>failed</code>, <code>disconnected</code> ou <code>closed</code>.</dd>
-
-  <dt><a href="/fr/docs/Web/API/RTCPeerConnection/iceGatheringState"><code>iceGatheringState</code></a> {{ReadOnlyInline}}</dt>
-  <dd>Renvoie une chaîne de caractères qui décrit l'état de collection ICE de la connexion. Cela permet de détecter par exemple lorsque la collecte des candidats ICE a terminé. Les valeurs possibles pour cette chaîne sont <code>new</code>, <code>gathering</code> ou <code>complete</code>.</dd>
-
-  <dt><a href="/fr/docs/Web/API/RTCPeerConnection/localDescription"><code>localDescription</code></a> {{ReadOnlyInline}}</dt>
-  <dd>Renvoie un objet <a href="/fr/docs/Web/API/RTCSessionDescription"><code>RTCSessionDescription</code></a> qui décrit la session pour la partie locale de la connexion. Si la session n'a pas encore été initialisée, renvoie <code>null</code>.</dd>
-
-  <dt><a href="/fr/docs/Web/API/RTCPeerConnection/peerIdentity"><code>peerIdentity</code></a> {{ReadOnlyInline}}</dt>
-  <dd>Renvoie une <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise">promesse</a> dont la valeur de résolution sera un objet <a href="/fr/docs/Web/API/RTCIdentityAssertion"><code>RTCIdentityAssertion</code></a> contenant une chaîne de caractères identifiant le pair distant. Une fois que la promesse a été résolue avec succès, l'identité obtenue est celle du pair cible et ne changera pas pour la durée de la connexion.</dd>
-
-  <dt><a href="/fr/docs/Web/API/RTCPeerConnection/pendingLocalDescription"><code>pendingLocalDescription</code></a> {{ReadOnlyInline}}</dt>
-  <dd>Renvoie un objet <a href="/fr/docs/Web/API/RTCSessionDescription"><code>RTCSessionDescription</code></a> qui décrit un changement de configuration en attente pour la partie locale de la connexion. Cela ne décrit pas la connexion dans son état actuel mais telle qu'elle pourrait être dans un futur proche.</dd>
-
-  <dt><a href="/fr/docs/Web/API/RTCPeerConnection/pendingRemoteDescription"><code>pendingRemoteDescription</code></a> {{ReadOnlyInline}}</dt>
-  <dd>Renvoie un objet <a href="/fr/docs/Web/API/RTCSessionDescription"><code>RTCSessionDescription</code></a> qui décrit un changement de configuration en attente pour la partie distante de la connexion. Cela ne décrit pas la connexion dans son état actuel mais telle qu'elle pourrait être dans un futur proche.</dd>
-
-  <dt><a href="/fr/docs/Web/API/RTCPeerConnection/remoteDescription"><code>remoteDescription</code></a> {{ReadOnlyInline}}</dt>
-  <dd>Renvoie un objet <a href="/fr/docs/Web/API/RTCSessionDescription"><code>RTCSessionDescription</code></a> qui décrit la session, y compris la configuration, les informations sur le média pour la partie distante de la connexion. Si la session n'est pas encore initialisée, renvoie <code>null</code>.</dd>
-
-  <dt><a href="/fr/docs/Web/API/RTCPeerConnection/sctp"><code>sctp</code></a> {{ReadOnlyInline}}</dt>
-  <dd>Renvoie un objet <a href="/fr/docs/Web/API/RTCSctpTransport"><code>RTCSctpTransport</code></a> qui décrit la couche de transport <a href="/fr/docs/Glossary/SCTP">SCTP</a> sur laquelle les données SCTP sont envoyées et reçues. Si SCTP n'a pas été négocié, renvoie <code>null</code>.</dd>
-
-  <dt><a href="/fr/docs/Web/API/RTCPeerConnection/signalingState"><code>signalingState</code></a> {{ReadOnlyInline}}</dt>
-  <dd>Renvoie une chaîne de caractères qui décrit l'état du processus de signal pour la partie locale de la connexion lors de la connexion ou de la reconnexion à un autre pair. Cette chaîne peut avoir l'une des valeurs suivantes : <code>stable</code>, <code>have-local-offer</code>, <code>have-remote-offer</code>, <code>have-local-pranswer</code> ou <code>have-remote-pranswer</code>.</dd>
-</dl>
-
-<h3 id="event_handlers">Gestionnaires d'évènements</h3>
-
-<p><em>Cette interface hérite des gestionnaires d'évènements de <a href="/fr/docs/Web/API/EventTarget"><code>EventTarget</code></a>.</em></p>
-
-<dl>
-  <dt><a href="/fr/docs/Web/API/RTCPeerConnection/onconnectionstatechange"><code>onconnectionstatechange</code></a></dt>
-  <dd>Un <a href="/fr/docs/Web/Events/Event_handlers">gestionnaire d'évènements</a> appelé pour gérer l'évènement {{DOMxRef("RTCPeerConnection/connectionstatechange_event", "connectionstatechange")}}. Cet évènement se produit lorsque l'état aggrégé de la connexion évolue. L'état aggrégé correspond à la combinaison des états de l'ensemble des transports de réseau individuel utilisés par la connexion</dd>
-
-  <dt><a href="/fr/docs/Web/API/RTCPeerConnection/ondatachannel"><code>ondatachannel</code></a></dt>
-  <dd>Un <a href="/fr/docs/Web/Events/Event_handlers">gestionnaire d'évènements</a> qui définit une fonction appelée pour gérer l'évènement {{DOMxRef("RTCPeerConnection/datachannel_event", "datachannel")}}. Cet évènement de type <a href="/fr/docs/Web/API/RTCDataChannelEvent"><code>RTCDataChannelEvent</code></a> est envoyé lorsqu'un canal <a href="/fr/docs/Web/API/RTCDataChannel"><code>RTCDataChannel</code></a> est ajouté à la connexion par le pair distant qui a appelé <a href="/fr/docs/Web/API/RTCPeerConnection/createDataChannel"><code>createDataChannel()</code></a>.</dd>
-
-  <dt><a href="/fr/docs/Web/API/RTCPeerConnection/onicecandidate"><code>onicecandidate</code></a></dt>
-  <dd>Un <a href="/fr/docs/Web/Events/Event_handlers">gestionnaire d'évènements</a> qui définit une fonction appelée pour gérer l'évènement {{DOMxRef("RTCPeerConnection/icecandidate_event", "icecandidate")}}. Cela se produit lorsque l'agent <a href="/fr/docs/Glossary/ICE">ICE</a> local a besoin de délivrer un message à l'autre pair via le serveur de signal.</dd>
-
-  <dt><a href="/fr/docs/Web/API/RTCPeerConnection/onicecandidateerror"><code>onicecandidateerror</code></a></dt>
-  <dd>Un <a href="/fr/docs/Web/Events/Event_handlers">gestionnaire d'évènements</a> qui définit une fonction appelée pour gérer l'évènement {{DOMxRef("RTCPeerConnection/icecandidateerror_event", "icecandidateerror")}}. Cet évènement est déclenché lorsqu'une erreur se produit lors du processus de collecte des candidats <a href="/fr/docs/Glossary/ICE">ICE</a>.</dd>
-
-  <dt><a href="/fr/docs/Web/API/RTCPeerConnection/oniceconnectionstatechange"><code>oniceconnectionstatechange</code></a></dt>
-  <dd>Un <a href="/fr/docs/Web/Events/Event_handlers">gestionnaire d'évènements</a> qui définit une fonction appelée pour gérer l'évènement {{DOMxRef("RTCPeerConnection/iceconnectionstatechange_event", "iceconnectionstatechange")}}. Cela se produit lorsque l'agent <a href="/fr/docs/Glossary/ICE">ICE</a> local a besoin de délivrer un message à l'autre pair via le serveur de signal.</dd>
-
-  <dt><a href="/fr/docs/Web/API/RTCPeerConnection/onicegatheringstatechange"><code>onicegatheringstatechange</code></a></dt>
-  <dd>Un <a href="/fr/docs/Web/Events/Event_handlers">gestionnaire d'évènements</a> qui définit une fonction appelée pour gérer l'évènement {{DOMxRef("RTCPeerConnection/icegatheringstatechange_event", "icegatheringstatechange")}}. Cela se produit lorsque l'état de collecte <a href="/fr/docs/Glossary/ICE">ICE</a> évolue.</dd>
-
-  <dt><a href="/fr/docs/Web/API/RTCPeerConnection/onnegotiationneeded"><code>onnegotiationneeded</code></a></dt>
-  <dd>Un <a href="/fr/docs/Web/Events/Event_handlers">gestionnaire d'évènements</a> qui définit une fonction appelée pour gérer l'évènement {{DOMxRef("RTCPeerConnection/negotiationneeded_event", "negotiationneeded")}}. Cet évènement est déclenché lorsqu'un changement a eu lieu et qui nécessite une négociation de session. La négociation devrait être menée par le requêtant, car certaines modifications de sessions ne peuvent pas être négociés par le répondant.</dd>
-
-  <dt><a href="/fr/docs/Web/API/RTCPeerConnection/onsignalingstatechange"><code>onsignalingstatechange</code></a></dt>
-  <dd>Un <a href="/fr/docs/Web/Events/Event_handlers">gestionnaire d'évènements</a> qui définit une fonction appelée pour gérer l'évènement {{DOMxRef("RTCPeerConnection/signalingstatechange_event", "signalingstatechange")}}. La fonction reçoit en entrée un évènement qui est celui envoyé lorsque l'état <a href="/fr/docs/Web/API/RTCPeerConnection/signalingState"><code>signalingState</code></a> du pair de la connexion change. Cela peut avoir lieu suite à un appel à <a href="/fr/docs/Web/API/RTCPeerConnection/setLocalDescription"><code>setLocalDescription()</code></a> ou à <a href="/fr/docs/Web/API/RTCPeerConnection/setRemoteDescription"><code>setRemoteDescription()</code></a>.</dd>
-
-  <dt><a href="/fr/docs/Web/API/RTCPeerConnection/ontrack"><code>ontrack</code></a></dt>
-  <dd>Un <a href="/fr/docs/Web/Events/Event_handlers">gestionnaire d'évènements</a> qui définit une fonction appelée pour gérer l'évènement {{DOMxRef("RTCPeerConnection/track_event", "track")}}. L'évènement reçu en argument de la fonction est de type <a href="/fr/docs/Web/API/RTCTrackEvent"><code>RTCTrackEvent</code></a>. Cet évènement est envoyé lorsqu'un nouvel objet entrant <a href="/fr/docs/Web/API/MediaStreamTrack"><code>MediaStreamTrack</code></a> a été créé et associé avec un objet <a href="/fr/docs/Web/API/RTCRtpReceiver"><code>RTCRtpReceiver</code></a> ajouté à l'ensemble des destinataires de la connexion.</dd>
-</dl>
-
-<h3 id="obsolete_properties">Propriétés obsolètes</h3>
-
-<dl>
-  <dt><a href="/fr/docs/Web/API/RTCPeerConnection/onaddstream"><code>onaddstream</code></a> {{Obsolete_Inline}}</dt>
-  <dd>Un <a href="/fr/docs/Web/Events/Event_handlers">gestionnaire d'évènements</a> qui définit une fonction appelée pour gérer l'évènement obsolète {{DOMxRef("RTCPeerConnection/addstream_event", "addstream")}}.</dd>
-  <dt><a href="/fr/docs/Web/API/RTCPeerConnection/onremovestream"><code>onremovestream</code></a> {{Obsolete_Inline}}</dt>
-  <dd>Un <a href="/fr/docs/Web/Events/Event_handlers">gestionnaire d'évènements</a> qui définit une fonction appelée pour gérer l'évènement obsolète {{DOMxRef("RTCPeerConnection/removestream_event", "removestream")}}.</dd>
-</dl>
-
-<h2 id="methods">Méthodes</h2>
-
-<p><em>Cette interface hérite également des méthodes de <a href="/fr/docs/Web/API/EventTarget"><code>EventTarget</code></a>.</em></p>
-
-<dl>
-  <dt><a href="/fr/docs/Web/API/RTCPeerConnection/addIceCandidate"><code>addIceCandidate()</code></a></dt>
-  <dd>Ajoute un nouveau candidat distant à la description distante de <code>RTCPeerConnection</code> qui décrit l'état à l'extrémité distante de la connexion</dd>
-
-  <dt><a href="/fr/docs/Web/API/RTCPeerConnection/addTrack"><code>addTrack()</code></a></dt>
-  <dd>Ajoute un nouvel objet <a href="/fr/docs/Web/API/MediaStreamTrack"><code>MediaStreamTrack</code></a> à l'ensemble des pistes qui seront transmises au pair distant.</dd>
-
-  <dt><a href="/fr/docs/Web/API/RTCPeerConnection/addTransceiver"><code>addTransceiver()</code></a></dt>
-  <dd>Crée un nouvel objet <a href="/fr/docs/Web/API/RTCRtpTransceiver"><code>RTCRtpTransceiver</code></a> et l'ajoute à l'ensemble des émetteurs-récepteurs associés à la connexion. Chaque émetteur-récepteur représente un flux bidirectionnel associé à un récepteur <a href="/fr/docs/Web/API/RTCRtpSender"><code>RTCRtpSender</code></a> et à un émetteur <a href="/fr/docs/Web/API/RTCRtpReceiver"><code>RTCRtpReceiver</code></a>.</dd>
-
-  <dt><a href="/fr/docs/Web/API/RTCPeerConnection/close"><code>close()</code></a></dt>
-  <dd>Ferme la connexion courante vers le pair.</dd>
-
-  <dt><a href="/fr/docs/Web/API/RTCPeerConnection/createAnswer"><code>createAnswer()</code></a></dt>
-  <dd>Initie la création d'une réponse <a href="/fr/docs/Glossary/SDP">SDP</a> à une offre reçue par un pair distant pendant la négociation offre/réponse d'une connexion WebRTC. La réponse contient des informations sur les médias déjà attachés à la session, les codecs et options pris en charge par le navigateur ainsi que sur les éventuels candidats <a href="/fr/docs/Glossary/ICE">ICE</a> déjà collectés.</dd>
-
-  <dt><a href="/fr/docs/Web/API/RTCPeerConnection/createDataChannel"><code>createDataChannel()</code></a></dt>
-  <dd>Initie la création d'un nouveau canal relié au pair distant qui permettra de transmettre tout type de données. Cela peut être utile pour le transfert de contenu en arrière-plan comme des images, fichiers, discussions, paquets pour l'état d'un jeu multijoueur, etc.</dd>
-
-  <dt><a href="/fr/docs/Web/API/RTCPeerConnection/createOffer"><code>createOffer()</code></a></dt>
-  <dd>Initie la création d'une offre <a href="/fr/docs/Glossary/SDP">SDP</a> afin de démarrer une nouvelle connexion WebRTC avec un pair distant. L'offre SDP inclut des informations à propos des éventuels objets <a href="/fr/docs/Web/API/MediaStreamTrack"><code>MediaStreamTrack</code></a> déjà attachés à la session WebRTC, des codecs, des options prises en charge par le navigateur ainsi que sur les éventuels candidats déjà collectés par l'agent <a href="/fr/docs/Glossary/ICE">ICE</a> afin de pouvoir envoyer ces informations via le canal de signalement à un pair potentiel pour demander une connexion ou mettre à jour la configuration d'une connexion existante.</dd>
-
-  <dt><a href="/fr/docs/Web/API/RTCPeerConnection/getConfiguration"><code>getConfiguration()</code></a></dt>
-  <dd>Renvoie un objet <a href="/fr/docs/Web/API/RTCConfiguration"><code>RTCConfiguration</code></a> qui indique la configuration courante de la connexion.</dd>
-
-  <dt><a href="/fr/docs/Web/API/RTCPeerConnection/getIdentityAssertion"><code>getIdentityAssertion()</code></a></dt>
-  <dd>Initie la collecte d'une assertion d'identité et renvoie une <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise">promesse</a> qui est résolue en l'assertion d'identité encodée dans une chaîne de caractères. Cette méthode aura un effet uniquement si <a href="/fr/docs/Web/API/RTCPeerConnection/signalingState"><code>signalingState</code></a> ne vaut pas <code>closed</code>.</dd>
-
-  <dt><a href="/fr/docs/Web/API/RTCPeerConnection/getReceivers"><code>getReceivers()</code></a></dt>
-  <dd>Renvoie un tableu d'objets <a href="/fr/docs/Web/API/RTCRtpReceiver"><code>RTCRtpReceiver</code></a> dont chacun représente un récepteur <a href="/fr/docs/Glossary/RTP">RTP</a>.</dd>
-
-  <dt><a href="/fr/docs/Web/API/RTCPeerConnection/getSenders"><code>getSenders()</code></a></dt>
-  <dd>Renvoie un tableau d'objets <a href="/fr/docs/Web/API/RTCRtpSender"><code>RTCRtpSender</code></a> dont chacun représente un émetteur <a href="/fr/docs/Glossary/RTP">RTP</a> dont le rôle est de transmettre les données d'une piste.</dd>
-
-  <dt><a href="/fr/docs/Web/API/RTCPeerConnection/getStats"><code>getStats()</code></a></dt>
-  <dd>Renvoie une <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise">promesse</a> dont la valeur de résolution sont des statistiques quant à la connexion globale ou à la piste <a href="/fr/docs/Web/API/MediaStreamTrack"><code>MediaStreamTrack</code></a> indiquée.</dd>
-
-  <dt><a href="/fr/docs/Web/API/RTCPeerConnection/getTransceivers"><code>getTransceivers()</code></a></dt>
-  <dd>Renvoie une liste de l'ensemble des objets <a href="/fr/docs/Web/API/RTCRtpTransceiver"><code>RTCRtpTransceiver</code></a> utilisés afin d'envoyer et de recevoir des données sur la connexion.</dd>
-
-  <dt><a href="/fr/docs/Web/API/RTCPeerConnection/removeTrack"><code>removeTrack()</code></a></dt>
-  <dd>Indique à la partie locale de la connexion d'arrêter d'envoyer des médias sur la piste indiquée sans pour autant retirer l'objet <a href="/fr/docs/Web/API/RTCRtpSender"><code>RTCRtpSender</code></a> correspondant de la liste des récepteurs telle que fournie par <a href="/fr/docs/Web/API/RTCPeerConnection/getSenders"><code>getSenders()</code></a>. Si la piste est déjà arrêtée ou si elle n'est pas dans la liste des émetteurs de la connexion, cette méthode n'a pas d'effet.</dd>
-
-  <dt><a href="/fr/docs/Web/API/RTCPeerConnection/restartIce"><code>restartIce()</code></a></dt>
-  <dd>Permet de demander facilement une nouvelle collecte de candidats ICE à chaque extrémité de la connexion. Cela simplifie le processus en permettant à l'appelant ou au recevant d'utiliser la même méthode pour déclencher un redémarrage <a href="/fr/docs/Glossary/ICE">ICE</a>.</dd>
-
-  <dt><a href="/fr/docs/Web/API/RTCPeerConnection/setConfiguration"><code>setConfiguration()</code></a></dt>
-  <dd>Définit la configuration courante de la connexion en fonction des valeurs incluses dans l'objet <a href="/fr/docs/Web/API/RTCConfiguration"><code>RTCConfiguration</code></a> passé en argument. Cela permet de modifier les serveurs <a href="/fr/docs/Glossary/ICE">ICE</a> utilisés par la connexion ainsi que les règles de transport utilisées.</dd>
-
-  <dt><a href="/fr/docs/Web/API/RTCPeerConnection/setIdentityProvider"><code>setIdentityProvider()</code></a></dt>
-  <dd>Définit le fournisseur d'identité (<i lang="en">Identity Provider</i> ou IdP) par le triplet fourni en paramètres : le nom, le protocole de communication et le nom d'utilisateur. Le protocole et le nom d'utilisateur sont optionnels.</dd>
-
-  <dt><a href="/fr/docs/Web/API/RTCPeerConnection/setLocalDescription"><code>setLocalDescription()</code></a></dt>
-  <dd>Modifie la description locale associée à la connexion. Cette description définit les propriétés de l'extrémité locale de la connexion, y compris le format de média. Cette méthode renvoie une <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise">promesse</a> qui est résolue de façon asynchrone lorsque la description a été modifiée.</dd>
-
-  <dt><a href="/fr/docs/Web/API/RTCPeerConnection/setRemoteDescription"><code>setRemoteDescription()</code></a></dt>
-  <dd>Définit la description de la connexion pour l'extrémité distante pour l'offre ou la réponse courante. Cette description définit les propriétés de l'extrémité distante de la connexion, y compris le format de média. Cette méthode renvoie une <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise">promesse</a> qui est résolue de façon asynchrone lorsque la description a été modifiée.</dd>
-</dl>
-
-<h3 id="obsolete_methods">Méthodes obsolètes</h3>
-
-<dl>
-  <dt><a href="/fr/docs/Web/API/RTCPeerConnection/addStream"><code>addStream()</code></a> {{Obsolete_Inline}}</dt>
-  <dd>Ajoute un objet <a href="/fr/docs/Web/API/MediaStream"><code>MediaStream</code></a> comme source audio ou vidéo locale. La méthode <a href="/fr/docs/Web/API/RTCPeerConnection/addTrack"><code>addTrack()</code></a> devrait être utilisée à la place pour chaque piste qu'on souhaite envoyer au pair distant.</dd>
-
-  <dt><a href="/fr/docs/Web/API/RTCPeerConnection/createDTMFSender"><code>createDTMFSender()</code></a> {{Obsolete_Inline}}</dt>
-  <dd>Crée un nouvel émetteur <a href="/fr/docs/Web/API/RTCDTMFSender"><code>RTCDTMFSender</code></a> associé à une piste <a href="/fr/docs/Web/API/MediaStreamTrack"><code>MediaStreamTrack</code></a> spécifique et qui est capable d'envoyer des signaux téléphoniques <a href="/fr/docs/Glossary/DTMF">DTMF</a> via la connexion.</dd>
-
-  <dt><a href="/fr/docs/Web/API/RTCPeerConnection/getStreamById"><code>getStreamById()</code></a> {{Obsolete_Inline}}</dt>
-  <dd>Renvoie l'objet <a href="/fr/docs/Web/API/MediaStream"><code>MediaStream</code></a> ayant l'identifiant indiqué qui est associé à l'extrémité locale ou distante de la connexion. Cette propriété a été remplacée par les méthodes <a href="/fr/docs/Web/API/RTCPeerConnection/getSenders"><code>getSenders()</code></a> et <a href="/fr/docs/Web/API/RTCPeerConnection/getReceivers"><code>getReceivers()</code></a>.</dd>
-
-  <dt><a href="/fr/docs/Web/API/RTCPeerConnection/removeStream"><code>removeStream()</code></a> {{Obsolete_Inline}}</dt>
-  <dd>Supprime un flux <a href="/fr/docs/Web/API/MediaStream"><code>MediaStream</code></a> qui est une source audio ou vidéo locale. Cette méthode est obsolète, on doit privilégier <a href="/fr/docs/Web/API/RTCPeerConnection/removeTrack"><code>removeTrack()</code></a> à la place.</dd>
-</dl>
-
-<h2 id="events">Évènements</h2>
-
-<p>On pourra intercepter ces évènements grâce à <a href="/fr/docs/Web/API/EventTarget/addEventListener"><code>addEventListener()</code></a> ou en affectant un gestionnaire d'évènement sur la propriété <code>on<em>nomEvenement</em></code> de cette interface.</p>
-
-<dl>
-  <dt><a href="/fr/docs/Web/API/RTCPeerConnection/connectionstatechange_event"><code>connectionstatechange</code></a></dt>
-  <dd>Envoyé lorsque l'état de connectivité global de la connexion <code>RTCPeerConnection</code> évolue. Également disponible via la propriété de gestion d'évènement <a href="/fr/docs/Web/API/RTCPeerConnection/onconnectionstatechange"><code>onconnectionstatechange</code></a>.</dd>
-
-  <dt><a href="/fr/docs/Web/API/RTCPeerConnection/datachannel_event"><code>datachannel</code></a></dt>
-  <dd>Envoyé lorsque le pair distant ajoute un canal <a href="/fr/docs/Web/API/RTCDataChannel"><code>RTCDataChannel</code></a> à la connexion. Également disponible via la propriété de gestion d'évènement <a href="/fr/docs/Web/API/RTCPeerConnection/ondatachannel"><code>ondatachannel</code></a>.</dd>
-
-  <dt><a href="/fr/docs/Web/API/RTCPeerConnection/icecandidate_event"><code>icecandidate</code></a></dt>
-  <dd>Envoyé afin de demander à ce que le candidat indiqué soit transmis au pair distant. Également disponible via la propriété de gestion d'évènement <a href="/fr/docs/Web/API/RTCPeerConnection/onicecandidate"><code>onicecandidate</code></a>.</dd>
-
-  <dt><a href="/fr/docs/Web/API/RTCPeerConnection/icecandidateerror_event"><code>icecandidateerror</code></a></dt>
-  <dd>Envoyé à la connexion si une erreur se produit lors de la collecte des candidats <a href="/fr/docs/Glossary/ICE">ICE</a>. L'évènement décrit l'erreur. Également disponible via la propriété de gestion d'évènement <a href="/fr/docs/Web/API/RTCPeerConnection/onicecandidateerror"><code>onicecandidateerror</code></a>.</dd>
-
-  <dt><a href="/fr/docs/Web/API/RTCPeerConnection/iceconnectionstatechange_event"><code>iceconnectionstatechange</code></a></dt>
-  <dd>Envoyé lorsque l'état de la connexion <a href="/fr/docs/Glossary/ICE">ICE</a> change (par exemple lorsqu'elle se déconnecte). Également disponible via la propriété de gestion d'évènement <a href="/fr/docs/Web/API/RTCPeerConnection/oniceconnectionstatechange"><code>oniceconnectionstatechange</code></a>.</dd>
-
-  <dt><a href="/fr/docs/Web/API/RTCPeerConnection/icegatheringstatechange_event"><code>icegatheringstatechange</code></a></dt>
-  <dd>Envoyé lorsque l'état de collecte des couches <a href="/fr/docs/Glossary/ICE">ICE</a>, tel que reflété par <a href="/fr/docs/Web/API/RTCPeerConnection/iceGatheringState"><code>iceGatheringState</code></a>, évolue. Cela indique si la négociation ICE n'a pas encore commencé (<code>new</code>), a commencé la collecte des candidats (<code>gathering</code>) ou si elle est terminée (<code>complete</code>). Également disponible via la propriété de gestion d'évènement <a href="/fr/docs/Web/API/RTCPeerConnection/onicegatheringstatechange"><code>onicegatheringstatechange</code></a>.</dd>
-
-  <dt><a href="/fr/docs/Web/API/RTCPeerConnection/negotiationneeded_event"><code>negotiationneeded</code></a></dt>
-  <dd>Envoyé lorsqu'une négociation ou de la renégociation de la connexion <a href="/fr/docs/Glossary/ICE">ICE</a> doit être réalisée. Cela peut se produire à l'ouverture d'une connexion mais aussi lorsqu'il est nécessaire de s'adapter à des conditions réseau changeantes. Le récepteur devrait répondre en créant une offre et en l'envoyant à l'autre pair. Également disponible via la propriété de gestion d'évènement <a href="/fr/docs/Web/API/RTCPeerConnection/onnegotiationneeded"><code>onnegotiationneeded</code></a>.</dd>
-
-  <dt><a href="/fr/docs/Web/API/RTCPeerConnection/signalingstatechange_event"><code>signalingstatechange</code></a></dt>
-  <dd>Envoyé lorsque l'état de signal <a href="/fr/docs/Glossary/ICE">ICE</a> de la connexion change. Également disponible via la propriété de gestion d'évènement <a href="/fr/docs/Web/API/RTCPeerConnection/onsignalingstatechange"><code>onsignalingstatechange</code></a>.</dd>
-
-  <dt><a href="/fr/docs/Web/API/RTCPeerConnection/track_event"><code>track</code></a></dt>
-  <dd>Envoyé après qu'une nouvelle piste ait été ajoutée à une des instances <a href="/fr/docs/Web/API/RTCRtpReceiver"><code>RTCRtpReceiver</code></a> faisant partie de la connexion. Également disponible via la propriété de gestion d'évènement <a href="/fr/docs/Web/API/RTCPeerConnection/ontrack"><code>ontrack</code></a>.</dd>
-</dl>
-
-<h3 id="obsolete_events">Évènements obsolètes</h3>
-
-<dl>
-  <dt><a href="/fr/docs/Web/API/RTCPeerConnection/addstream_event"><code>addstream</code></a> {{Obsolete_Inline}}</dt>
-  <dd>Envoyé lorsqu'un nouveau flux <a href="/fr/docs/Web/API/MediaStream"><code>MediaStream</code></a> a été ajouté à la connexion. Plutôt que d'écouter cet évènement obsolète, on privilégiera les évènements <a href="/fr/docs/Web/API/RTCPeerConnection/track_event"><code>track</code></a>. Un tel évènement est envoyé pour chaque piste <a href="/fr/docs/Web/API/MediaStreamTrack"><code>MediaStreamTrack</code></a> ajoutée à la connexion. Également disponible via la propriété <a href="/fr/docs/Web/API/RTCPeerConnection/onaddstream"><code>onaddstream</code></a>.</dd>
-
-  <dt><a href="/fr/docs/Web/API/RTCPeerConnection/removestream_event"><code>removestream</code></a> {{Obsolete_Inline}}</dt>
-  <dd>Envoyé lorsqu'un flux <a href="/fr/docs/Web/API/MediaStream"><code>MediaStream</code></a> est retiré de la connexion. Plutôt que d'écouter cet évènement obsolète, on privilégiera les évènements <a href="/fr/docs/Web/API/MediaStream/removetrack_event"><code>removetrack</code></a> pour chaque flux. Également disponible via la propriété <a href="/fr/docs/Web/API/RTCPeerConnection/onremovestream"><code>onremovestream</code></a>.</dd>
-</dl>
-
-<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="https://github.com/jesup/nightly-gupshup/blob/master/static/js/chat.js">https://github.com/jesup/nightly-gupshup/blob/master/static/js/chat.js</a></li>
-  <li><a href="https://www.html5rocks.com/en/tutorials/webrtc/basics/#toc-simple">http://www.html5rocks.com/en/tutorials/webrtc/basics/#toc-simple</a></li>
-  <li><a href="https://github.com/chrisjohndigital/TutorRoom">TutorRoom</a> : Une application de capture vidéo, de vidéo en pair à pair et de partage de fichiers en Node.js HTML5 (<a href="https://github.com/chrisjohndigital/TutorRoom">code source sur GitHub</a>)</li>
-</ul>
+{{APIRef('WebRTC')}}
+
+L'interface **`RTCPeerConnection`** représente une connexion WebRTC entre un ordinateur local et un pair distant. Elle fournit des méthodes pour se connecter à un pair distant, entretenir et surveiller la connexion et fermer la connexion dès qu'elle n'est plus nécessaire.
+
+{{InheritanceDiagram}}
+
+## Constructeur
+
+- [`RTCPeerConnection()`](/fr/docs/Web/API/RTCPeerConnection/RTCPeerConnection)
+  - : Renvoie un nouvel objet `RTCPeerConnection` qui représente la connexion entre l'appareil local et le pair distant.
+
+## Méthodes statiques
+
+- [`generateCertificate()`](/fr/docs/Web/API/RTCPeerConnection/generateCertificate)
+  - : Crée un certificat X.509 et la clé privée correspondante. Cette méthode renvoie une [promesse](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise) dont la valeur de résolution sera le nouvel objet [`RTCCertificate`](/fr/docs/Web/API/RTCCertificate) une fois généré.
+
+## Propriétés
+
+_Cette interface hérite également des propriétés de [`EventTarget`](/fr/docs/Web/API/EventTarget)._
+
+- [`canTrickleIceCandidates`](/fr/docs/Web/API/RTCPeerConnection/canTrickleIceCandidates) {{ReadOnlyInline}}
+  - : Renvoie un booléen qui indique si un pair distant peut accepter ou non [les candidats ICE au goutte-à-goutte (<i lang="en">trickled ICE candidates</i>)](https://datatracker.ietf.org/doc/html/draft-ietf-mmusic-trickle-ice).
+- [`connectionState`](/fr/docs/Web/API/RTCPeerConnection/connectionState) {{ReadOnlyInline}}
+  - : Indique l'état actuel de la connexion au pair en renvoyant une de ces chaînes de caractères `new`, `connecting`, `connected`, `disconnected`, `failed` ou `closed`.
+- [`currentLocalDescription`](/fr/docs/Web/API/RTCPeerConnection/currentLocalDescription) {{ReadOnlyInline}}
+  - : Renvoie un objet [`RTCSessionDescription`](/fr/docs/Web/API/RTCSessionDescription) qui décrit la partie locale de la connexion qui a été négociée avec succès le plus récemment depuis la dernière fois où cette connexion `RTCPeerConnection` a terminé de négocier et s'est connectée à un pair distant. Cet objet inclut également une liste des candidats ICE qui peuvent avoir déjà été générés par l'agent ICE depuis que l'offre ou la réponse représentée par la description a été instanciée en premier lieu.
+- [`currentRemoteDescription`](/fr/docs/Web/API/RTCPeerConnection/currentRemoteDescription) {{ReadOnlyInline}}
+  - : Renvoie un objet [`RTCSessionDescription`](/fr/docs/Web/API/RTCSessionDescription) qui décrit la connexion pour le pair distant pour la connexion qui a été négociée avec succès le plus récemment depuis la dernière fois où cette connexion `RTCPeerConnection` a terminé de négocier et s'est connectée à un pair distant. Cet objet inclut également une liste des candidats ICE qui peuvent avoir déjà été générés par l'agent ICE depuis que l'offre ou la réponse représentée par la description a été instanciée en premier lieu.
+- [`iceConnectionState`](/fr/docs/Web/API/RTCPeerConnection/iceConnectionState) {{ReadOnlyInline}}
+  - : Renvoie une chaîne de caractères qui indique l'état de l'agent ICE associée à cette connexion `RTCPeerConnection`. La chaîne de caractères peut être l'une de celles-ci : `new`, `checking`, `connected`, `completed`, `failed`, `disconnected` ou `closed`.
+- [`iceGatheringState`](/fr/docs/Web/API/RTCPeerConnection/iceGatheringState) {{ReadOnlyInline}}
+  - : Renvoie une chaîne de caractères qui décrit l'état de collection ICE de la connexion. Cela permet de détecter par exemple lorsque la collecte des candidats ICE a terminé. Les valeurs possibles pour cette chaîne sont `new`, `gathering` ou `complete`.
+- [`localDescription`](/fr/docs/Web/API/RTCPeerConnection/localDescription) {{ReadOnlyInline}}
+  - : Renvoie un objet [`RTCSessionDescription`](/fr/docs/Web/API/RTCSessionDescription) qui décrit la session pour la partie locale de la connexion. Si la session n'a pas encore été initialisée, renvoie `null`.
+- [`peerIdentity`](/fr/docs/Web/API/RTCPeerConnection/peerIdentity) {{ReadOnlyInline}}
+  - : Renvoie une [promesse](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise) dont la valeur de résolution sera un objet [`RTCIdentityAssertion`](/fr/docs/Web/API/RTCIdentityAssertion) contenant une chaîne de caractères identifiant le pair distant. Une fois que la promesse a été résolue avec succès, l'identité obtenue est celle du pair cible et ne changera pas pour la durée de la connexion.
+- [`pendingLocalDescription`](/fr/docs/Web/API/RTCPeerConnection/pendingLocalDescription) {{ReadOnlyInline}}
+  - : Renvoie un objet [`RTCSessionDescription`](/fr/docs/Web/API/RTCSessionDescription) qui décrit un changement de configuration en attente pour la partie locale de la connexion. Cela ne décrit pas la connexion dans son état actuel mais telle qu'elle pourrait être dans un futur proche.
+- [`pendingRemoteDescription`](/fr/docs/Web/API/RTCPeerConnection/pendingRemoteDescription) {{ReadOnlyInline}}
+  - : Renvoie un objet [`RTCSessionDescription`](/fr/docs/Web/API/RTCSessionDescription) qui décrit un changement de configuration en attente pour la partie distante de la connexion. Cela ne décrit pas la connexion dans son état actuel mais telle qu'elle pourrait être dans un futur proche.
+- [`remoteDescription`](/fr/docs/Web/API/RTCPeerConnection/remoteDescription) {{ReadOnlyInline}}
+  - : Renvoie un objet [`RTCSessionDescription`](/fr/docs/Web/API/RTCSessionDescription) qui décrit la session, y compris la configuration, les informations sur le média pour la partie distante de la connexion. Si la session n'est pas encore initialisée, renvoie `null`.
+- [`sctp`](/fr/docs/Web/API/RTCPeerConnection/sctp) {{ReadOnlyInline}}
+  - : Renvoie un objet [`RTCSctpTransport`](/fr/docs/Web/API/RTCSctpTransport) qui décrit la couche de transport [SCTP](/fr/docs/Glossary/SCTP) sur laquelle les données SCTP sont envoyées et reçues. Si SCTP n'a pas été négocié, renvoie `null`.
+- [`signalingState`](/fr/docs/Web/API/RTCPeerConnection/signalingState) {{ReadOnlyInline}}
+  - : Renvoie une chaîne de caractères qui décrit l'état du processus de signal pour la partie locale de la connexion lors de la connexion ou de la reconnexion à un autre pair. Cette chaîne peut avoir l'une des valeurs suivantes : `stable`, `have-local-offer`, `have-remote-offer`, `have-local-pranswer` ou `have-remote-pranswer`.
+
+### Gestionnaires d'évènements
+
+_Cette interface hérite des gestionnaires d'évènements de [`EventTarget`](/fr/docs/Web/API/EventTarget)._
+
+- [`onconnectionstatechange`](/fr/docs/Web/API/RTCPeerConnection/onconnectionstatechange)
+  - : Un [gestionnaire d'évènements](/fr/docs/Web/Events/Event_handlers) appelé pour gérer l'évènement {{DOMxRef("RTCPeerConnection/connectionstatechange_event", "connectionstatechange")}}. Cet évènement se produit lorsque l'état aggrégé de la connexion évolue. L'état aggrégé correspond à la combinaison des états de l'ensemble des transports de réseau individuel utilisés par la connexion
+- [`ondatachannel`](/fr/docs/Web/API/RTCPeerConnection/ondatachannel)
+  - : Un [gestionnaire d'évènements](/fr/docs/Web/Events/Event_handlers) qui définit une fonction appelée pour gérer l'évènement {{DOMxRef("RTCPeerConnection/datachannel_event", "datachannel")}}. Cet évènement de type [`RTCDataChannelEvent`](/fr/docs/Web/API/RTCDataChannelEvent) est envoyé lorsqu'un canal [`RTCDataChannel`](/fr/docs/Web/API/RTCDataChannel) est ajouté à la connexion par le pair distant qui a appelé [`createDataChannel()`](/fr/docs/Web/API/RTCPeerConnection/createDataChannel).
+- [`onicecandidate`](/fr/docs/Web/API/RTCPeerConnection/onicecandidate)
+  - : Un [gestionnaire d'évènements](/fr/docs/Web/Events/Event_handlers) qui définit une fonction appelée pour gérer l'évènement {{DOMxRef("RTCPeerConnection/icecandidate_event", "icecandidate")}}. Cela se produit lorsque l'agent [ICE](/fr/docs/Glossary/ICE) local a besoin de délivrer un message à l'autre pair via le serveur de signal.
+- [`onicecandidateerror`](/fr/docs/Web/API/RTCPeerConnection/onicecandidateerror)
+  - : Un [gestionnaire d'évènements](/fr/docs/Web/Events/Event_handlers) qui définit une fonction appelée pour gérer l'évènement {{DOMxRef("RTCPeerConnection/icecandidateerror_event", "icecandidateerror")}}. Cet évènement est déclenché lorsqu'une erreur se produit lors du processus de collecte des candidats [ICE](/fr/docs/Glossary/ICE).
+- [`oniceconnectionstatechange`](/fr/docs/Web/API/RTCPeerConnection/oniceconnectionstatechange)
+  - : Un [gestionnaire d'évènements](/fr/docs/Web/Events/Event_handlers) qui définit une fonction appelée pour gérer l'évènement {{DOMxRef("RTCPeerConnection/iceconnectionstatechange_event", "iceconnectionstatechange")}}. Cela se produit lorsque l'agent [ICE](/fr/docs/Glossary/ICE) local a besoin de délivrer un message à l'autre pair via le serveur de signal.
+- [`onicegatheringstatechange`](/fr/docs/Web/API/RTCPeerConnection/onicegatheringstatechange)
+  - : Un [gestionnaire d'évènements](/fr/docs/Web/Events/Event_handlers) qui définit une fonction appelée pour gérer l'évènement {{DOMxRef("RTCPeerConnection/icegatheringstatechange_event", "icegatheringstatechange")}}. Cela se produit lorsque l'état de collecte [ICE](/fr/docs/Glossary/ICE) évolue.
+- [`onnegotiationneeded`](/fr/docs/Web/API/RTCPeerConnection/onnegotiationneeded)
+  - : Un [gestionnaire d'évènements](/fr/docs/Web/Events/Event_handlers) qui définit une fonction appelée pour gérer l'évènement {{DOMxRef("RTCPeerConnection/negotiationneeded_event", "negotiationneeded")}}. Cet évènement est déclenché lorsqu'un changement a eu lieu et qui nécessite une négociation de session. La négociation devrait être menée par le requêtant, car certaines modifications de sessions ne peuvent pas être négociés par le répondant.
+- [`onsignalingstatechange`](/fr/docs/Web/API/RTCPeerConnection/onsignalingstatechange)
+  - : Un [gestionnaire d'évènements](/fr/docs/Web/Events/Event_handlers) qui définit une fonction appelée pour gérer l'évènement {{DOMxRef("RTCPeerConnection/signalingstatechange_event", "signalingstatechange")}}. La fonction reçoit en entrée un évènement qui est celui envoyé lorsque l'état [`signalingState`](/fr/docs/Web/API/RTCPeerConnection/signalingState) du pair de la connexion change. Cela peut avoir lieu suite à un appel à [`setLocalDescription()`](/fr/docs/Web/API/RTCPeerConnection/setLocalDescription) ou à [`setRemoteDescription()`](/fr/docs/Web/API/RTCPeerConnection/setRemoteDescription).
+- [`ontrack`](/fr/docs/Web/API/RTCPeerConnection/ontrack)
+  - : Un [gestionnaire d'évènements](/fr/docs/Web/Events/Event_handlers) qui définit une fonction appelée pour gérer l'évènement {{DOMxRef("RTCPeerConnection/track_event", "track")}}. L'évènement reçu en argument de la fonction est de type [`RTCTrackEvent`](/fr/docs/Web/API/RTCTrackEvent). Cet évènement est envoyé lorsqu'un nouvel objet entrant [`MediaStreamTrack`](/fr/docs/Web/API/MediaStreamTrack) a été créé et associé avec un objet [`RTCRtpReceiver`](/fr/docs/Web/API/RTCRtpReceiver) ajouté à l'ensemble des destinataires de la connexion.
+
+### Propriétés obsolètes
+
+- [`onaddstream`](/fr/docs/Web/API/RTCPeerConnection/onaddstream) {{Obsolete_Inline}}
+  - : Un [gestionnaire d'évènements](/fr/docs/Web/Events/Event_handlers) qui définit une fonction appelée pour gérer l'évènement obsolète {{DOMxRef("RTCPeerConnection/addstream_event", "addstream")}}.
+- [`onremovestream`](/fr/docs/Web/API/RTCPeerConnection/onremovestream) {{Obsolete_Inline}}
+  - : Un [gestionnaire d'évènements](/fr/docs/Web/Events/Event_handlers) qui définit une fonction appelée pour gérer l'évènement obsolète {{DOMxRef("RTCPeerConnection/removestream_event", "removestream")}}.
+
+## Méthodes
+
+_Cette interface hérite également des méthodes de [`EventTarget`](/fr/docs/Web/API/EventTarget)._
+
+- [`addIceCandidate()`](/fr/docs/Web/API/RTCPeerConnection/addIceCandidate)
+  - : Ajoute un nouveau candidat distant à la description distante de `RTCPeerConnection` qui décrit l'état à l'extrémité distante de la connexion
+- [`addTrack()`](/fr/docs/Web/API/RTCPeerConnection/addTrack)
+  - : Ajoute un nouvel objet [`MediaStreamTrack`](/fr/docs/Web/API/MediaStreamTrack) à l'ensemble des pistes qui seront transmises au pair distant.
+- [`addTransceiver()`](/fr/docs/Web/API/RTCPeerConnection/addTransceiver)
+  - : Crée un nouvel objet [`RTCRtpTransceiver`](/fr/docs/Web/API/RTCRtpTransceiver) et l'ajoute à l'ensemble des émetteurs-récepteurs associés à la connexion. Chaque émetteur-récepteur représente un flux bidirectionnel associé à un récepteur [`RTCRtpSender`](/fr/docs/Web/API/RTCRtpSender) et à un émetteur [`RTCRtpReceiver`](/fr/docs/Web/API/RTCRtpReceiver).
+- [`close()`](/fr/docs/Web/API/RTCPeerConnection/close)
+  - : Ferme la connexion courante vers le pair.
+- [`createAnswer()`](/fr/docs/Web/API/RTCPeerConnection/createAnswer)
+  - : Initie la création d'une réponse [SDP](/fr/docs/Glossary/SDP) à une offre reçue par un pair distant pendant la négociation offre/réponse d'une connexion WebRTC. La réponse contient des informations sur les médias déjà attachés à la session, les codecs et options pris en charge par le navigateur ainsi que sur les éventuels candidats [ICE](/fr/docs/Glossary/ICE) déjà collectés.
+- [`createDataChannel()`](/fr/docs/Web/API/RTCPeerConnection/createDataChannel)
+  - : Initie la création d'un nouveau canal relié au pair distant qui permettra de transmettre tout type de données. Cela peut être utile pour le transfert de contenu en arrière-plan comme des images, fichiers, discussions, paquets pour l'état d'un jeu multijoueur, etc.
+- [`createOffer()`](/fr/docs/Web/API/RTCPeerConnection/createOffer)
+  - : Initie la création d'une offre [SDP](/fr/docs/Glossary/SDP) afin de démarrer une nouvelle connexion WebRTC avec un pair distant. L'offre SDP inclut des informations à propos des éventuels objets [`MediaStreamTrack`](/fr/docs/Web/API/MediaStreamTrack) déjà attachés à la session WebRTC, des codecs, des options prises en charge par le navigateur ainsi que sur les éventuels candidats déjà collectés par l'agent [ICE](/fr/docs/Glossary/ICE) afin de pouvoir envoyer ces informations via le canal de signalement à un pair potentiel pour demander une connexion ou mettre à jour la configuration d'une connexion existante.
+- [`getConfiguration()`](/fr/docs/Web/API/RTCPeerConnection/getConfiguration)
+  - : Renvoie un objet [`RTCConfiguration`](/fr/docs/Web/API/RTCConfiguration) qui indique la configuration courante de la connexion.
+- [`getIdentityAssertion()`](/fr/docs/Web/API/RTCPeerConnection/getIdentityAssertion)
+  - : Initie la collecte d'une assertion d'identité et renvoie une [promesse](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise) qui est résolue en l'assertion d'identité encodée dans une chaîne de caractères. Cette méthode aura un effet uniquement si [`signalingState`](/fr/docs/Web/API/RTCPeerConnection/signalingState) ne vaut pas `closed`.
+- [`getReceivers()`](/fr/docs/Web/API/RTCPeerConnection/getReceivers)
+  - : Renvoie un tableu d'objets [`RTCRtpReceiver`](/fr/docs/Web/API/RTCRtpReceiver) dont chacun représente un récepteur [RTP](/fr/docs/Glossary/RTP).
+- [`getSenders()`](/fr/docs/Web/API/RTCPeerConnection/getSenders)
+  - : Renvoie un tableau d'objets [`RTCRtpSender`](/fr/docs/Web/API/RTCRtpSender) dont chacun représente un émetteur [RTP](/fr/docs/Glossary/RTP) dont le rôle est de transmettre les données d'une piste.
+- [`getStats()`](/fr/docs/Web/API/RTCPeerConnection/getStats)
+  - : Renvoie une [promesse](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise) dont la valeur de résolution sont des statistiques quant à la connexion globale ou à la piste [`MediaStreamTrack`](/fr/docs/Web/API/MediaStreamTrack) indiquée.
+- [`getTransceivers()`](/fr/docs/Web/API/RTCPeerConnection/getTransceivers)
+  - : Renvoie une liste de l'ensemble des objets [`RTCRtpTransceiver`](/fr/docs/Web/API/RTCRtpTransceiver) utilisés afin d'envoyer et de recevoir des données sur la connexion.
+- [`removeTrack()`](/fr/docs/Web/API/RTCPeerConnection/removeTrack)
+  - : Indique à la partie locale de la connexion d'arrêter d'envoyer des médias sur la piste indiquée sans pour autant retirer l'objet [`RTCRtpSender`](/fr/docs/Web/API/RTCRtpSender) correspondant de la liste des récepteurs telle que fournie par [`getSenders()`](/fr/docs/Web/API/RTCPeerConnection/getSenders). Si la piste est déjà arrêtée ou si elle n'est pas dans la liste des émetteurs de la connexion, cette méthode n'a pas d'effet.
+- [`restartIce()`](/fr/docs/Web/API/RTCPeerConnection/restartIce)
+  - : Permet de demander facilement une nouvelle collecte de candidats ICE à chaque extrémité de la connexion. Cela simplifie le processus en permettant à l'appelant ou au recevant d'utiliser la même méthode pour déclencher un redémarrage [ICE](/fr/docs/Glossary/ICE).
+- [`setConfiguration()`](/fr/docs/Web/API/RTCPeerConnection/setConfiguration)
+  - : Définit la configuration courante de la connexion en fonction des valeurs incluses dans l'objet [`RTCConfiguration`](/fr/docs/Web/API/RTCConfiguration) passé en argument. Cela permet de modifier les serveurs [ICE](/fr/docs/Glossary/ICE) utilisés par la connexion ainsi que les règles de transport utilisées.
+- [`setIdentityProvider()`](/fr/docs/Web/API/RTCPeerConnection/setIdentityProvider)
+
+  - : Définit le fournisseur d'identité (
+
+    <i lang="en">Identity Provider</i>
+
+    ou IdP) par le triplet fourni en paramètres : le nom, le protocole de communication et le nom d'utilisateur. Le protocole et le nom d'utilisateur sont optionnels.
+
+- [`setLocalDescription()`](/fr/docs/Web/API/RTCPeerConnection/setLocalDescription)
+  - : Modifie la description locale associée à la connexion. Cette description définit les propriétés de l'extrémité locale de la connexion, y compris le format de média. Cette méthode renvoie une [promesse](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise) qui est résolue de façon asynchrone lorsque la description a été modifiée.
+- [`setRemoteDescription()`](/fr/docs/Web/API/RTCPeerConnection/setRemoteDescription)
+  - : Définit la description de la connexion pour l'extrémité distante pour l'offre ou la réponse courante. Cette description définit les propriétés de l'extrémité distante de la connexion, y compris le format de média. Cette méthode renvoie une [promesse](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise) qui est résolue de façon asynchrone lorsque la description a été modifiée.
+
+### Méthodes obsolètes
+
+- [`addStream()`](/fr/docs/Web/API/RTCPeerConnection/addStream) {{Obsolete_Inline}}
+  - : Ajoute un objet [`MediaStream`](/fr/docs/Web/API/MediaStream) comme source audio ou vidéo locale. La méthode [`addTrack()`](/fr/docs/Web/API/RTCPeerConnection/addTrack) devrait être utilisée à la place pour chaque piste qu'on souhaite envoyer au pair distant.
+- [`createDTMFSender()`](/fr/docs/Web/API/RTCPeerConnection/createDTMFSender) {{Obsolete_Inline}}
+  - : Crée un nouvel émetteur [`RTCDTMFSender`](/fr/docs/Web/API/RTCDTMFSender) associé à une piste [`MediaStreamTrack`](/fr/docs/Web/API/MediaStreamTrack) spécifique et qui est capable d'envoyer des signaux téléphoniques [DTMF](/fr/docs/Glossary/DTMF) via la connexion.
+- [`getStreamById()`](/fr/docs/Web/API/RTCPeerConnection/getStreamById) {{Obsolete_Inline}}
+  - : Renvoie l'objet [`MediaStream`](/fr/docs/Web/API/MediaStream) ayant l'identifiant indiqué qui est associé à l'extrémité locale ou distante de la connexion. Cette propriété a été remplacée par les méthodes [`getSenders()`](/fr/docs/Web/API/RTCPeerConnection/getSenders) et [`getReceivers()`](/fr/docs/Web/API/RTCPeerConnection/getReceivers).
+- [`removeStream()`](/fr/docs/Web/API/RTCPeerConnection/removeStream) {{Obsolete_Inline}}
+  - : Supprime un flux [`MediaStream`](/fr/docs/Web/API/MediaStream) qui est une source audio ou vidéo locale. Cette méthode est obsolète, on doit privilégier [`removeTrack()`](/fr/docs/Web/API/RTCPeerConnection/removeTrack) à la place.
+
+## Évènements
+
+On pourra intercepter ces évènements grâce à [`addEventListener()`](/fr/docs/Web/API/EventTarget/addEventListener) ou en affectant un gestionnaire d'évènement sur la propriété `onnomEvenement` de cette interface.
+
+- [`connectionstatechange`](/fr/docs/Web/API/RTCPeerConnection/connectionstatechange_event)
+  - : Envoyé lorsque l'état de connectivité global de la connexion `RTCPeerConnection` évolue. Également disponible via la propriété de gestion d'évènement [`onconnectionstatechange`](/fr/docs/Web/API/RTCPeerConnection/onconnectionstatechange).
+- [`datachannel`](/fr/docs/Web/API/RTCPeerConnection/datachannel_event)
+  - : Envoyé lorsque le pair distant ajoute un canal [`RTCDataChannel`](/fr/docs/Web/API/RTCDataChannel) à la connexion. Également disponible via la propriété de gestion d'évènement [`ondatachannel`](/fr/docs/Web/API/RTCPeerConnection/ondatachannel).
+- [`icecandidate`](/fr/docs/Web/API/RTCPeerConnection/icecandidate_event)
+  - : Envoyé afin de demander à ce que le candidat indiqué soit transmis au pair distant. Également disponible via la propriété de gestion d'évènement [`onicecandidate`](/fr/docs/Web/API/RTCPeerConnection/onicecandidate).
+- [`icecandidateerror`](/fr/docs/Web/API/RTCPeerConnection/icecandidateerror_event)
+  - : Envoyé à la connexion si une erreur se produit lors de la collecte des candidats [ICE](/fr/docs/Glossary/ICE). L'évènement décrit l'erreur. Également disponible via la propriété de gestion d'évènement [`onicecandidateerror`](/fr/docs/Web/API/RTCPeerConnection/onicecandidateerror).
+- [`iceconnectionstatechange`](/fr/docs/Web/API/RTCPeerConnection/iceconnectionstatechange_event)
+  - : Envoyé lorsque l'état de la connexion [ICE](/fr/docs/Glossary/ICE) change (par exemple lorsqu'elle se déconnecte). Également disponible via la propriété de gestion d'évènement [`oniceconnectionstatechange`](/fr/docs/Web/API/RTCPeerConnection/oniceconnectionstatechange).
+- [`icegatheringstatechange`](/fr/docs/Web/API/RTCPeerConnection/icegatheringstatechange_event)
+  - : Envoyé lorsque l'état de collecte des couches [ICE](/fr/docs/Glossary/ICE), tel que reflété par [`iceGatheringState`](/fr/docs/Web/API/RTCPeerConnection/iceGatheringState), évolue. Cela indique si la négociation ICE n'a pas encore commencé (`new`), a commencé la collecte des candidats (`gathering`) ou si elle est terminée (`complete`). Également disponible via la propriété de gestion d'évènement [`onicegatheringstatechange`](/fr/docs/Web/API/RTCPeerConnection/onicegatheringstatechange).
+- [`negotiationneeded`](/fr/docs/Web/API/RTCPeerConnection/negotiationneeded_event)
+  - : Envoyé lorsqu'une négociation ou de la renégociation de la connexion [ICE](/fr/docs/Glossary/ICE) doit être réalisée. Cela peut se produire à l'ouverture d'une connexion mais aussi lorsqu'il est nécessaire de s'adapter à des conditions réseau changeantes. Le récepteur devrait répondre en créant une offre et en l'envoyant à l'autre pair. Également disponible via la propriété de gestion d'évènement [`onnegotiationneeded`](/fr/docs/Web/API/RTCPeerConnection/onnegotiationneeded).
+- [`signalingstatechange`](/fr/docs/Web/API/RTCPeerConnection/signalingstatechange_event)
+  - : Envoyé lorsque l'état de signal [ICE](/fr/docs/Glossary/ICE) de la connexion change. Également disponible via la propriété de gestion d'évènement [`onsignalingstatechange`](/fr/docs/Web/API/RTCPeerConnection/onsignalingstatechange).
+- [`track`](/fr/docs/Web/API/RTCPeerConnection/track_event)
+  - : Envoyé après qu'une nouvelle piste ait été ajoutée à une des instances [`RTCRtpReceiver`](/fr/docs/Web/API/RTCRtpReceiver) faisant partie de la connexion. Également disponible via la propriété de gestion d'évènement [`ontrack`](/fr/docs/Web/API/RTCPeerConnection/ontrack).
+
+### Évènements obsolètes
+
+- [`addstream`](/fr/docs/Web/API/RTCPeerConnection/addstream_event) {{Obsolete_Inline}}
+  - : Envoyé lorsqu'un nouveau flux [`MediaStream`](/fr/docs/Web/API/MediaStream) a été ajouté à la connexion. Plutôt que d'écouter cet évènement obsolète, on privilégiera les évènements [`track`](/fr/docs/Web/API/RTCPeerConnection/track_event). Un tel évènement est envoyé pour chaque piste [`MediaStreamTrack`](/fr/docs/Web/API/MediaStreamTrack) ajoutée à la connexion. Également disponible via la propriété [`onaddstream`](/fr/docs/Web/API/RTCPeerConnection/onaddstream).
+- [`removestream`](/fr/docs/Web/API/RTCPeerConnection/removestream_event) {{Obsolete_Inline}}
+  - : Envoyé lorsqu'un flux [`MediaStream`](/fr/docs/Web/API/MediaStream) est retiré de la connexion. Plutôt que d'écouter cet évènement obsolète, on privilégiera les évènements [`removetrack`](/fr/docs/Web/API/MediaStream/removetrack_event) pour chaque flux. Également disponible via la propriété [`onremovestream`](/fr/docs/Web/API/RTCPeerConnection/onremovestream).
+
+## Spécifications
+
+{{Specifications}}
+
+## Compatibilité des navigateurs
+
+{{Compat}}
+
+## Voir aussi
+
+- <https://github.com/jesup/nightly-gupshup/blob/master/static/js/chat.js>
+- [http://www.html5rocks.com/en/tutorials/webrtc/basics/#toc-simple](https://www.html5rocks.com/en/tutorials/webrtc/basics/#toc-simple)
+- [TutorRoom](https://github.com/chrisjohndigital/TutorRoom) : Une application de capture vidéo, de vidéo en pair à pair et de partage de fichiers en Node.js HTML5 ([code source sur GitHub](https://github.com/chrisjohndigital/TutorRoom))
diff --git a/files/fr/web/api/rtcpeerconnection/setconfiguration/index.md b/files/fr/web/api/rtcpeerconnection/setconfiguration/index.md
index 152e67aa86..8ef8585440 100644
--- a/files/fr/web/api/rtcpeerconnection/setconfiguration/index.md
+++ b/files/fr/web/api/rtcpeerconnection/setconfiguration/index.md
@@ -9,50 +9,43 @@ tags:
   - setConfiguration
 translation_of: Web/API/RTCPeerConnection/setConfiguration
 ---
-<div>{{APIRef("WebRTC")}}{{SeeCompatTable}}</div>
+{{APIRef("WebRTC")}}{{SeeCompatTable}}
 
-<p>La méthode <strong><code>RTCPeerConnection.setConfiguration()</code></strong> définit la configuration courante pour la connexion {{domxref("RTCPeerConnection")}} en fonction des valeurs des propriétés de l'objet {{domxref("RTCConfiguration")}} passé en argument. Cela permet de modifier les serveurs ICE et les règles de transport utilisés par la connexion.</p>
+La méthode **`RTCPeerConnection.setConfiguration()`** définit la configuration courante pour la connexion {{domxref("RTCPeerConnection")}} en fonction des valeurs des propriétés de l'objet {{domxref("RTCConfiguration")}} passé en argument. Cela permet de modifier les serveurs ICE et les règles de transport utilisés par la connexion.
 
-<p>Le cas d'usage le plus probable (bien qu'il ne soit probablement pas répandu) est le remplacement des serveurs ICE à utiliser. Voici deux scénarios pour lesquels cela pourrait se produire :</p>
+Le cas d'usage le plus probable (bien qu'il ne soit probablement pas répandu) est le remplacement des serveurs ICE à utiliser. Voici deux scénarios pour lesquels cela pourrait se produire :
 
-<ul>
- <li>L'objet {{domxref("RTCPeerConnection")}} a été instancié sans qu'un serveur ICE soit spécifié. Si le constructeur {{domxref("RTCPeerConnection.RTCPeerConnection()", "RTCPeerConnection()")}} a été appelé sans paramètre, on doit alors appeler <code>setConfiguration()</code> pour ajouter des serveurs ICE avant que la négociation ICE puisse avoir lieu.</li>
- <li>La connexion doit être renégociée et il faut utiliser un autre ensemble de serveurs ICE pour une certaine raison (ex. l'utilisateur s'est déplacé dans une nouvelle région et il faut donc utiliser de nouveaux serveurs ICE régionaux). Dans ce cas, on pourra appeler <code>setConfiguration()</code> pour passer sur les serveurs régionaux puis initier <a href="/en-US/docs/Web/API/WebRTC_API/Session_lifetime#ICE_restart">un redémarrage ICE</a>.</li>
-</ul>
+- L'objet {{domxref("RTCPeerConnection")}} a été instancié sans qu'un serveur ICE soit spécifié. Si le constructeur {{domxref("RTCPeerConnection.RTCPeerConnection()", "RTCPeerConnection()")}} a été appelé sans paramètre, on doit alors appeler `setConfiguration()` pour ajouter des serveurs ICE avant que la négociation ICE puisse avoir lieu.
+- La connexion doit être renégociée et il faut utiliser un autre ensemble de serveurs ICE pour une certaine raison (ex. l'utilisateur s'est déplacé dans une nouvelle région et il faut donc utiliser de nouveaux serveurs ICE régionaux). Dans ce cas, on pourra appeler `setConfiguration()` pour passer sur les serveurs régionaux puis initier [un redémarrage ICE](/en-US/docs/Web/API/WebRTC_API/Session_lifetime#ICE_restart).
 
-<div class="note">
-<p><strong>Note :</strong> On ne peut pas changer les informations d'identité d'une connexion une fois que celle-ci a été créée.</p>
-</div>
+> **Note :** On ne peut pas changer les informations d'identité d'une connexion une fois que celle-ci a été créée.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>RTCPeerConnection</em>.setConfiguration(<em>configuration</em>);</pre>
+    RTCPeerConnection.setConfiguration(configuration);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>configuration</code></dt>
- <dd>Un objet {{domxref("RTCConfiguration")}} qui fournit les options à appliquer à la connexion. Les changements ne sont pas utilisés en addition mais remplacent les valeurs existantes.</dd>
-</dl>
+- `configuration`
+  - : Un objet {{domxref("RTCConfiguration")}} qui fournit les options à appliquer à la connexion. Les changements ne sont pas utilisés en addition mais remplacent les valeurs existantes.
 
-<h3 id="Exceptions">Exceptions</h3>
+### Exceptions
 
-<dl>
- <dt><code>InvalidAccessError</code></dt>
- <dd>Une ou plusieurs URL indiquées dans <code>configuration.iceServers</code> sont des serveurs {{Glossary("TURN")}} mais les informations d'authentification ne sont pas complètes (il manque {{domxref("RTCIceServer.username")}} ou {{domxref("RTCIceServer.credentials")}}). Cela empêche une connexion/identification correcte sur le serveur.</dd>
- <dt><code>InvalidModificationError</code></dt>
- <dd>L'objet <code>configuration</code> contient des changements relatifs à l'identité alors que la connexion a déjà ces informations indiquées. Cela se produit lorsque <code>configuration.peerIdentity</code> ou <code>configuration.certificates</code> sont définies et que leurs valeurs diffèrent de la configuration courante.</dd>
- <dt><code>InvalidStateError</code></dt>
- <dd>La connexion ({{domxref("RTCPeerConnection")}}) est fermée.</dd>
- <dt><code>SyntaxError</code></dt>
- <dd>Une ou plusieurs URL fournies dans la liste <code>configuration.iceServers</code> sont invalides.</dd>
-</dl>
+- `InvalidAccessError`
+  - : Une ou plusieurs URL indiquées dans `configuration.iceServers` sont des serveurs {{Glossary("TURN")}} mais les informations d'authentification ne sont pas complètes (il manque {{domxref("RTCIceServer.username")}} ou {{domxref("RTCIceServer.credentials")}}). Cela empêche une connexion/identification correcte sur le serveur.
+- `InvalidModificationError`
+  - : L'objet `configuration` contient des changements relatifs à l'identité alors que la connexion a déjà ces informations indiquées. Cela se produit lorsque `configuration.peerIdentity` ou `configuration.certificates` sont définies et que leurs valeurs diffèrent de la configuration courante.
+- `InvalidStateError`
+  - : La connexion ({{domxref("RTCPeerConnection")}}) est fermée.
+- `SyntaxError`
+  - : Une ou plusieurs URL fournies dans la liste `configuration.iceServers` sont invalides.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans cet exemple, on a déjà determiné qu'un redémarrage ICE est nécessaire et que la négociation ICE doit se faire sur un nouveau serveur.</p>
+Dans cet exemple, on a déjà determiné qu'un redémarrage ICE est nécessaire et que la négociation ICE doit se faire sur un nouveau serveur.
 
-<pre class="brush: js">var restartConfig = { iceServers: [{
+```js
+var restartConfig = { iceServers: [{
                           urls: "turn:asia.myturnserver.net",
                           username: "allie@oopcode.com",
                           credential: "topsecretpassword"
@@ -67,37 +60,23 @@ myPeerConnection.createOffer({"iceRestart": true}).then(function(offer) {
 .then(function() {
   // send the offer to the other peer using the signaling server
 })
-.catch(reportError);</pre>
-
-<p>Pour commencer, on crée une {{domxref("RTCConfiguration")}}, <code>restartConfig</code>, en indiquant le nouveau serveur ICE et les informations de connexion associées. Cet objet est alors passé à <code>setConfiguration()</code>. La négociation ICE est redémarrée via {{domxref("RTCPeerConnection.createOffer()", "createOffer()")}} pour laquelle on indique <code>true</code> pour l'option <code>iceRestart</code>. Ensuite, on gère le processus habituel en définissant la description locale de l'offre et en envoyant cette offre à l'autre pair.</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('WebRTC 1.0', '#widl-RTCPeerConnection-setConfiguration-void-RTCConfiguration-configuration', 'setConfiguration()')}}</td>
-   <td>{{Spec2('WebRTC 1.0')}}</td>
-   <td>Initial definition.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.RTCPeerConnection.setConfiguration")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("RTCPeerConnection.getConfiguration()")}}</li>
- <li>{{domxref("RTCConfiguration")}}</li>
- <li>{{domxref("RTCPeerConnection")}}</li>
-</ul>
+.catch(reportError);
+```
+
+Pour commencer, on crée une {{domxref("RTCConfiguration")}}, `restartConfig`, en indiquant le nouveau serveur ICE et les informations de connexion associées. Cet objet est alors passé à `setConfiguration()`. La négociation ICE est redémarrée via {{domxref("RTCPeerConnection.createOffer()", "createOffer()")}} pour laquelle on indique `true` pour l'option `iceRestart`. Ensuite, on gère le processus habituel en définissant la description locale de l'offre et en envoyant cette offre à l'autre pair.
+
+## Spécifications
+
+| Spécification                                                                                                                                                                | État                             | Commentaires        |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- |
+| {{SpecName('WebRTC 1.0', '#widl-RTCPeerConnection-setConfiguration-void-RTCConfiguration-configuration', 'setConfiguration()')}} | {{Spec2('WebRTC 1.0')}} | Initial definition. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.RTCPeerConnection.setConfiguration")}}
+
+## Voir aussi
+
+- {{domxref("RTCPeerConnection.getConfiguration()")}}
+- {{domxref("RTCConfiguration")}}
+- {{domxref("RTCPeerConnection")}}
diff --git a/files/fr/web/api/screen_capture_api/index.md b/files/fr/web/api/screen_capture_api/index.md
index 3bfc553102..114b3d1d4a 100644
--- a/files/fr/web/api/screen_capture_api/index.md
+++ b/files/fr/web/api/screen_capture_api/index.md
@@ -17,125 +17,96 @@ tags:
   - screen
 translation_of: Web/API/Screen_Capture_API
 ---
-<div>{{DefaultAPISidebar("Screen Capture API")}}</div>
+{{DefaultAPISidebar("Screen Capture API")}}
 
-<p>The Screen Capture API introduces additions to the existing Media Capture and Streams API to let the user select a screen or portion of a screen (such as a window) to capture as a media stream. This stream can then be recorded or shared with others over the network.</p>
+The Screen Capture API introduces additions to the existing Media Capture and Streams API to let the user select a screen or portion of a screen (such as a window) to capture as a media stream. This stream can then be recorded or shared with others over the network.
 
-<h2 id="API_Screen_Capture_concepts_et_utilisation">API Screen Capture concepts et utilisation</h2>
+## API Screen Capture concepts et utilisation
 
-<p>L'API Screen Capture est relativement simple à utiliser. Sa seule méthode est {{domxref("MediaDevices.getDisplayMedia()")}} dont le but est de demander à l'utilisateur un écran ou une portion d'écran à capturer sous la forme de {{domxref("MediaStream")}}.</p>
+L'API Screen Capture est relativement simple à utiliser. Sa seule méthode est {{domxref("MediaDevices.getDisplayMedia()")}} dont le but est de demander à l'utilisateur un écran ou une portion d'écran à capturer sous la forme de {{domxref("MediaStream")}}.
 
-<p>Pour commencer à capturer une vidéo de l'écran, il faut appeler <code>getDisplayMedia()</code> dans une instance de <code>navigator.mediaDevices</code></p>
+Pour commencer à capturer une vidéo de l'écran, il faut appeler `getDisplayMedia()` dans une instance de `navigator.mediaDevices`
 
-<pre class="brush: js">captureStream = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);</pre>
+```js
+captureStream = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
+```
 
-<p>La {{jsxref("Promise")}} retournée par <code>getDisplayMedia()</code> résout un {{domxref("MediaStream")}} qui diffuse le dédia capturé.</p>
+La {{jsxref("Promise")}} retournée par `getDisplayMedia()` résout un {{domxref("MediaStream")}} qui diffuse le dédia capturé.
 
-<p>Voir l'article <a href="/en-US/docs/Web/API/Screen_Capture_API/Using_Screen_Capture">Utiliser l'API Screen Capture</a> pour plus de détails sur l’utilisation de l’API pour capturer le contenu de l’écran sous forme de flux.</p>
+Voir l'article [Utiliser l'API Screen Capture](/en-US/docs/Web/API/Screen_Capture_API/Using_Screen_Capture) pour plus de détails sur l’utilisation de l’API pour capturer le contenu de l’écran sous forme de flux.
 
-<h2 id="Ajouts_à_l'interface_actuelle">Ajouts à l'interface actuelle</h2>
+## Ajouts à l'interface actuelle
 
-<p>L'API Screen Capture n'a pas sa propre interface. Cependant, elle ajoute une méthode à l'existante interface {{domxref("MediaDevices")}} .</p>
+L'API Screen Capture n'a pas sa propre interface. Cependant, elle ajoute une méthode à l'existante interface {{domxref("MediaDevices")}} .
 
-<h3 id="Interface_MediaDevices">Interface MediaDevices</h3>
+### Interface MediaDevices
 
-<dl>
- <dt>{{domxref("MediaDevices.getDisplayMedia()")}}</dt>
- <dd>La méthode <code>getDisplayMedia()</code> est ajoutée à l'interface <code>MediaDevices</code>. Similaire à {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}}, cette méthode crée une promise qui  method creates a promise qui résout un {{domxref("MediaStream")}} contenant  la zone d'affichage sélectionnée par l'utilisateur, dans un format qui correspond aux options spécifiées.</dd>
-</dl>
+- {{domxref("MediaDevices.getDisplayMedia()")}}
+  - : La méthode `getDisplayMedia()` est ajoutée à l'interface `MediaDevices`. Similaire à {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}}, cette méthode crée une promise qui  method creates a promise qui résout un {{domxref("MediaStream")}} contenant  la zone d'affichage sélectionnée par l'utilisateur, dans un format qui correspond aux options spécifiées.
 
-<h2 id="Ajouts_aux_dictionnaires_actuels">Ajouts aux dictionnaires actuels</h2>
+## Ajouts aux dictionnaires actuels
 
-<p>L'API Screen Capture ajoute des propriétés au dictionnaire suivant définit par d'autres spécificités.</p>
+L'API Screen Capture ajoute des propriétés au dictionnaire suivant définit par d'autres spécificités.
 
-<h3 id="MediaTrackConstraints">MediaTrackConstraints</h3>
+### MediaTrackConstraints
 
-<dl>
- <dt>{{domxref("MediaTrackConstraints.cursor")}}</dt>
- <dd>Un {{domxref("ConstrainDOMString")}}  indiquant si le curseur doit ou non être inclus dans le flux de la surface d'affichage capturée, et s'il doit toujours être visible ou s'il ne doit l'être que lorsque la souris est en mouvement.</dd>
- <dt>{{domxref("MediaTrackConstraints.displaySurface")}}</dt>
- <dd>Un {{domxref("ConstrainDOMString")}} indiquant quel type de surface d'affichage doit être capturé. La valeur peut être <code>application</code>, <code>browser</code>, <code>monitor</code>, ou <code>window</code>.</dd>
- <dt>{{domxref("MediaTrackConstraints.logicalSurface")}}</dt>
- <dd>Indique si la vidéo dans le flux représente ou non une surface d'affichage logique (c'est-à-dire une surface qui peut ne pas être entièrement visible à l'écran ou peut-être complètement hors écran). La valeur <code>true</code> indique qu'une surface d'affichage logique doit être capturée.</dd>
-</dl>
+- {{domxref("MediaTrackConstraints.cursor")}}
+  - : Un {{domxref("ConstrainDOMString")}}  indiquant si le curseur doit ou non être inclus dans le flux de la surface d'affichage capturée, et s'il doit toujours être visible ou s'il ne doit l'être que lorsque la souris est en mouvement.
+- {{domxref("MediaTrackConstraints.displaySurface")}}
+  - : Un {{domxref("ConstrainDOMString")}} indiquant quel type de surface d'affichage doit être capturé. La valeur peut être `application`, `browser`, `monitor`, ou `window`.
+- {{domxref("MediaTrackConstraints.logicalSurface")}}
+  - : Indique si la vidéo dans le flux représente ou non une surface d'affichage logique (c'est-à-dire une surface qui peut ne pas être entièrement visible à l'écran ou peut-être complètement hors écran). La valeur `true` indique qu'une surface d'affichage logique doit être capturée.
 
-<h3 id="MediaTrackSettings">MediaTrackSettings</h3>
+### MediaTrackSettings
 
-<dl>
- <dt>{{domxref("MediaTrackSettings.cursor")}}</dt>
- <dd>Une chaîne de caractères indiquant si la surface d'affichage en cours de capture comprend ou non le curseur de la souris et, dans l'affirmative, si elle est visible uniquement lorsque la souris est en mouvement ou si elle est toujours visible. La valeur peut être <code>always</code>, <code>motion</code>, ou <code>never</code>.</dd>
- <dt>{{domxref("MediaTrackSettings.displaySurface")}}</dt>
- <dd>Une chaîne indiquant le type de surface d'affichage en cours de capture. La valeur peut être<code>application</code>, <code>browser</code>, <code>monitor</code>, ou <code>window</code>.</dd>
- <dt>{{domxref("MediaTrackSettings.logicalSurface")}}</dt>
- <dd>Valeur booléenne valant <code>true</code> si la vidéo en cours de capture ne correspond pas directement à une seule zone d'affichage à l'écran.</dd>
-</dl>
+- {{domxref("MediaTrackSettings.cursor")}}
+  - : Une chaîne de caractères indiquant si la surface d'affichage en cours de capture comprend ou non le curseur de la souris et, dans l'affirmative, si elle est visible uniquement lorsque la souris est en mouvement ou si elle est toujours visible. La valeur peut être `always`, `motion`, ou `never`.
+- {{domxref("MediaTrackSettings.displaySurface")}}
+  - : Une chaîne indiquant le type de surface d'affichage en cours de capture. La valeur peut être`application`, `browser`, `monitor`, ou `window`.
+- {{domxref("MediaTrackSettings.logicalSurface")}}
+  - : Valeur booléenne valant `true` si la vidéo en cours de capture ne correspond pas directement à une seule zone d'affichage à l'écran.
 
-<h3 id="MediaTrackSupportedConstraints">MediaTrackSupportedConstraints</h3>
+### MediaTrackSupportedConstraints
 
-<dl>
- <dt>{{domxref("MediaTrackSupportedConstraints.cursor")}}</dt>
- <dd>Valeur booléenne valant <code>true</code> si l'environnement actuel supporte la contrainte {{domxref("MediaTrackConstraints.cursor")}}.</dd>
- <dt>{{domxref("MediaTrackSupportedConstraints.displaySurface")}}</dt>
- <dd>Valeur booléenne valant <code>true</code> si l'environnement actuel supporte la contrainte {{domxref("MediaTrackConstraints.displaySurface")}}.</dd>
- <dt>{{domxref("MediaTrackSupportedConstraints.logicalSurface")}}</dt>
- <dd>Valeur booléenne valant <code>true</code> si l'environnement actuel supporte la contrainte {{domxref("MediaTrackConstraints.logicalSurface")}}.</dd>
-</dl>
+- {{domxref("MediaTrackSupportedConstraints.cursor")}}
+  - : Valeur booléenne valant `true` si l'environnement actuel supporte la contrainte {{domxref("MediaTrackConstraints.cursor")}}.
+- {{domxref("MediaTrackSupportedConstraints.displaySurface")}}
+  - : Valeur booléenne valant `true` si l'environnement actuel supporte la contrainte {{domxref("MediaTrackConstraints.displaySurface")}}.
+- {{domxref("MediaTrackSupportedConstraints.logicalSurface")}}
+  - : Valeur booléenne valant `true` si l'environnement actuel supporte la contrainte {{domxref("MediaTrackConstraints.logicalSurface")}}.
 
-<h2 id="Dictionnaires">Dictionnaires</h2>
+## Dictionnaires
 
-<p>Le dictionnaire suivant est difinit par l'API Screen Capture.</p>
+Le dictionnaire suivant est difinit par l'API Screen Capture.
 
-<dl>
- <dt><code>CursorCaptureConstraint</code></dt>
- <dd>Un type de chaîne énuméré utilisé pour fournir la valeur de la propriété <code>cursor</code> aux paramètres et aux contraintes. La valeur peut être <code>always</code>, <code>motion</code>, ou <code>never</code>.</dd>
- <dt><code>DisplayCaptureSurfaceType</code></dt>
- <dd>Un type de chaîne énuméré utilisé pour identifier le type de surface d'affichage à capturer. ce type est utilisé pour la propriété <code>displaySurface</code> dans les objets contraints et paramètres, et a plusieurs valeurs possibles <code>application</code>, <code>browser</code>, <code>monitor</code>, and <code>window</code>.</dd>
-</dl>
+- `CursorCaptureConstraint`
+  - : Un type de chaîne énuméré utilisé pour fournir la valeur de la propriété `cursor` aux paramètres et aux contraintes. La valeur peut être `always`, `motion`, ou `never`.
+- `DisplayCaptureSurfaceType`
+  - : Un type de chaîne énuméré utilisé pour identifier le type de surface d'affichage à capturer. ce type est utilisé pour la propriété `displaySurface` dans les objets contraints et paramètres, et a plusieurs valeurs possibles `application`, `browser`, `monitor`, and `window`.
 
-<h2 id="Validation_de_Feature_Policy">Validation de Feature Policy</h2>
+## Validation de Feature Policy
 
-<p>{{Glossary("User agent", "User agents")}} qui supportent  Feature Policy (soit en utilisant les entetes HTTP {{HTTPHeader("Feature-Policy")}} ou l'attribut {{HTMLElement("iframe")}}{{htmlattrxref("allow", "iframe")}} peut spécifier la volonté d'utiliser l'API Screen Capture API en utilisant la directive Policy Controle <code>display-capture</code>:</p>
+{{Glossary("User agent", "User agents")}} qui supportent  Feature Policy (soit en utilisant les entetes HTTP {{HTTPHeader("Feature-Policy")}} ou l'attribut {{HTMLElement("iframe")}}{{htmlattrxref("allow", "iframe")}} peut spécifier la volonté d'utiliser l'API Screen Capture API en utilisant la directive Policy Controle `display-capture`:
 
-<pre class="brush: html">&lt;iframe allow="display-capture" src="/some-other-document.html"&gt;</pre>
+```html
+<iframe allow="display-capture" src="/some-other-document.html">
+```
 
-<p>La liste d’autorisations par défaut est <code>self</code>, ce qui permet à tout contenu du document d’utiliser Screen Capture.</p>
+La liste d’autorisations par défaut est `self`, ce qui permet à tout contenu du document d’utiliser Screen Capture.
 
-<p>Voir <a href="/en-US/docs/Web/HTTP/Feature_Policy/Using_Feature_Policy">Utiliser Feature Policy</a> pour une explication plus en détail sur comment est utilisé Feature Policy.</p>
+Voir [Utiliser Feature Policy](/en-US/docs/Web/HTTP/Feature_Policy/Using_Feature_Policy) pour une explication plus en détail sur comment est utilisé Feature Policy.
 
-<h2 id="Caracteristiques">Caracteristiques</h2>
+## Caracteristiques
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Caracteristiques</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Screen Capture')}}</td>
-   <td>{{Spec2('Screen Capture')}}</td>
-   <td>Définition Initiale</td>
-  </tr>
- </tbody>
-</table>
+| Caracteristiques                         | Statut                               | Commentaire         |
+| ---------------------------------------- | ------------------------------------ | ------------------- |
+| {{SpecName('Screen Capture')}} | {{Spec2('Screen Capture')}} | Définition Initiale |
 
-<h2 id="Compatibilité_des_Navigateurs">Compatibilité des Navigateurs</h2>
+## Compatibilité des Navigateurs
 
-<div>
+{{Compat("api.MediaDevices.getDisplayMedia")}}
 
+## Voir aussi
 
-<div>
-
-
-<p>{{Compat("api.MediaDevices.getDisplayMedia")}}</p>
-</div>
-
-
-</div>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/API/Screen_Capture_API/Using_Screen_Capture">Utiliser l'API Screen Capture</a></li>
- <li>{{domxref("MediaDevices.getDisplayMedia()")}}</li>
-</ul>
+- [Utiliser l'API Screen Capture](/en-US/docs/Web/API/Screen_Capture_API/Using_Screen_Capture)
+- {{domxref("MediaDevices.getDisplayMedia()")}}
diff --git a/files/fr/web/api/scriptprocessornode/audioprocess_event/index.md b/files/fr/web/api/scriptprocessornode/audioprocess_event/index.md
index 266207b731..0fe6ac1161 100644
--- a/files/fr/web/api/scriptprocessornode/audioprocess_event/index.md
+++ b/files/fr/web/api/scriptprocessornode/audioprocess_event/index.md
@@ -4,103 +4,107 @@ slug: Web/API/ScriptProcessorNode/audioprocess_event
 translation_of: Web/API/ScriptProcessorNode/audioprocess_event
 original_slug: Web/Events/audioprocess
 ---
-<div>
-<p>L'événement <strong>audioprocess</strong> est déclenché lorsqu'un tampon d'entrée d'une API Web audio {{domxref("ScriptProcessorNode")}} est prêt à être traité.</p>
-</div>
+L'événement **audioprocess** est déclenché lorsqu'un tampon d'entrée d'une API Web audio {{domxref("ScriptProcessorNode")}} est prêt à être traité.
 
-<h2 id="Informations_générales">Informations générales</h2>
+## Informations générales
 
-<dl>
- <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
- <dd style="margin: 0 0 0 120px;">{{SpecName('Web Audio API', '#AudioProcessingEvent-section', 'AudioProcessingEvent')}}</dd>
- <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
- <dd style="margin: 0 0 0 120px;">{{domxref("AudioProcessingEvent")}}</dd>
- <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
- <dd style="margin: 0 0 0 120px;">?</dd>
- <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
- <dd style="margin: 0 0 0 120px;">?</dd>
- <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
- <dd style="margin: 0 0 0 120px;">{{domxref("ScriptProcessorNode")}}</dd>
- <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
- <dd style="margin: 0 0 0 120px;">Aucune</dd>
-</dl>
+- Spécification
+  - : {{SpecName('Web Audio API', '#AudioProcessingEvent-section', 'AudioProcessingEvent')}}
+- Interface
+  - : {{domxref("AudioProcessingEvent")}}
+- Propagation
+  - : ?
+- Annulable
+  - : ?
+- Cible
+  - : {{domxref("ScriptProcessorNode")}}
+- Action par défaut
+  - : Aucune
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Propriété</th>
-   <th scope="col">Type</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>target</code> {{ReadOnlyInline}}</td>
-   <td>{{domxref("EventTarget")}}</td>
-   <td>La cible de l'événement (la plus haute cible dans l'arbre du DOM).</td>
-  </tr>
-  <tr>
-   <td><code>type</code> {{ReadOnlyInline}}</td>
-   <td>{{domxref("DOMString")}}</td>
-   <td>Le type de l'événement.</td>
-  </tr>
-  <tr>
-   <td><code>bubbles</code> {{ReadOnlyInline}}</td>
-   <td><code>boolean</code></td>
-   <td>Est-ce que l'événement se propage?</td>
-  </tr>
-  <tr>
-   <td><code>cancelable</code> {{ReadOnlyInline}}</td>
-   <td><code>boolean</code></td>
-   <td>Est-il possible d'annuler l'événement?</td>
-  </tr>
-  <tr>
-   <td><code>playbackTime</code> {{ReadOnlyInline}}</td>
-   <td><code>double</code></td>
-   <td>Le moment auquel le son sera joué tel que défini par le temps de {{domxref("AudioContext.currentTime")}}.</td>
-  </tr>
-  <tr>
-   <td><code>inputBuffer</code> {{ReadOnlyInline}}</td>
-   <td>{{domxref("AudioBuffer")}}</td>
-   <td>
-    <p>Le tampon contenant les données audio d'entrée devant être traité. Le nombre de canaux est défini par le paramètre <code><em>numberOfInputChannels</em> de la méthode </code>{{domxref("AudioContext.createScriptProcessor()")}}. Noter que <code>le<em> AudioBuffer</em></code><code> retourné</code><em><code> </code></em>est seulement valide dans la portée de la fonction <em><code>onaudioprocess.</code></em></p>
-   </td>
-  </tr>
-  <tr>
-   <td><code>outputBuffer</code> {{ReadOnlyInline}}</td>
-   <td>{{domxref("AudioBuffer")}}</td>
-   <td>
-    <p>Le tampon dans lequel doit être écrit les données audio de sortie. Le nombre de canaux est défini par le paramètre <code><em>numberOfOutputChannels</em> de la méthode </code>{{domxref("AudioContext.createScriptProcessor()")}}. Noter que <code>le<em> AudioBuffer</em></code><code> retourné </code>est seulement valide dans la portée de la fonction <em><code>onaudioprocess.</code></em></p>
-   </td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th scope="col">Propriété</th>
+      <th scope="col">Type</th>
+      <th scope="col">Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>target</code> {{ReadOnlyInline}}</td>
+      <td>{{domxref("EventTarget")}}</td>
+      <td>
+        La cible de l'événement (la plus haute cible dans l'arbre du DOM).
+      </td>
+    </tr>
+    <tr>
+      <td><code>type</code> {{ReadOnlyInline}}</td>
+      <td>{{domxref("DOMString")}}</td>
+      <td>Le type de l'événement.</td>
+    </tr>
+    <tr>
+      <td><code>bubbles</code> {{ReadOnlyInline}}</td>
+      <td><code>boolean</code></td>
+      <td>Est-ce que l'événement se propage?</td>
+    </tr>
+    <tr>
+      <td><code>cancelable</code> {{ReadOnlyInline}}</td>
+      <td><code>boolean</code></td>
+      <td>Est-il possible d'annuler l'événement?</td>
+    </tr>
+    <tr>
+      <td><code>playbackTime</code> {{ReadOnlyInline}}</td>
+      <td><code>double</code></td>
+      <td>
+        Le moment auquel le son sera joué tel que défini par le temps de
+        {{domxref("AudioContext.currentTime")}}.
+      </td>
+    </tr>
+    <tr>
+      <td><code>inputBuffer</code> {{ReadOnlyInline}}</td>
+      <td>{{domxref("AudioBuffer")}}</td>
+      <td>
+        <p>
+          Le tampon contenant les données audio d'entrée devant être traité. Le
+          nombre de canaux est défini par le paramètre
+          <code><em>numberOfInputChannels</em> de la méthode </code
+          >{{domxref("AudioContext.createScriptProcessor()")}}.
+          Noter que <code>le<em> AudioBuffer</em></code
+          ><code> retourné</code><em><code> </code></em>est seulement valide
+          dans la portée de la fonction <em><code>onaudioprocess.</code></em>
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td><code>outputBuffer</code> {{ReadOnlyInline}}</td>
+      <td>{{domxref("AudioBuffer")}}</td>
+      <td>
+        <p>
+          Le tampon dans lequel doit être écrit les données audio de sortie. Le
+          nombre de canaux est défini par le paramètre
+          <code><em>numberOfOutputChannels</em> de la méthode </code
+          >{{domxref("AudioContext.createScriptProcessor()")}}.
+          Noter que <code>le<em> AudioBuffer</em></code
+          ><code> retourné </code>est seulement valide dans la portée de la
+          fonction <em><code>onaudioprocess.</code></em>
+        </p>
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Web Audio API', '#AudioProcessingEvent-section', 'AudioProcessingEvent')}}</td>
-   <td>{{Spec2('Web Audio API')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                        | Statut                               | Commentaire |
+| -------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- |
+| {{SpecName('Web Audio API', '#AudioProcessingEvent-section', 'AudioProcessingEvent')}} | {{Spec2('Web Audio API')}} |             |
 
-<h2 id="Compatibilités_navigateur">Compatibilités navigateur</h2>
+## Compatibilités navigateur
 
-<p>{{Compat("api.ScriptProcessorNode.audioprocess_event")}}</p>
+{{Compat("api.ScriptProcessorNode.audioprocess_event")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web_Audio_API">Web Audio API</a></li>
-</ul>
+- [Web Audio API](/fr/docs/Web_Audio_API)
diff --git a/files/fr/web/api/selection/collapse/index.md b/files/fr/web/api/selection/collapse/index.md
index 97e9a4c4ae..e965caa639 100644
--- a/files/fr/web/api/selection/collapse/index.md
+++ b/files/fr/web/api/selection/collapse/index.md
@@ -10,62 +10,43 @@ tags:
   - Selection
 translation_of: Web/API/Selection/collapse
 ---
-<div>{{ApiRef("DOM")}}{{SeeCompatTable}}</div>
+{{ApiRef("DOM")}}{{SeeCompatTable}}
 
-<p>La méthode <strong><code>Selection.collapse()</code></strong> positionne la sélection en cours en un seul point. Le document n'est pas modifié. Si le focus est sur le contenu et est modifiable, le curseur d'édition s'y positionnera et sera visible.</p>
+La méthode **`Selection.collapse()`** positionne la sélection en cours en un seul point. Le document n'est pas modifié. Si le focus est sur le contenu et est modifiable, le curseur d'édition s'y positionnera et sera visible.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var>sel</var>.collapse(<var>parentNode</var>, <var>offset</var>);
-</pre>
+    sel.collapse(parentNode, offset);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><em><code>parentNode</code></em></dt>
- <dd>Le curseur d'édition sera placé à l'intérieur de ce noeud.</dd>
-</dl>
+- _`parentNode`_
+  - : Le curseur d'édition sera placé à l'intérieur de ce noeud.
 
-<dl>
- <dt><em><code>offset</code></em></dt>
- <dd>Indique la position du curseur d'édition dans <code>parentNode</code>.</dd>
-</dl>
+<!---->
 
-<h2 id="Exemples">Exemples</h2>
+- _`offset`_
+  - : Indique la position du curseur d'édition dans `parentNode`.
 
-<pre class="brush: js">/* Positionner le curseur au début de l'élément body d'un document HTML. */
+## Exemples
+
+```js
+/* Positionner le curseur au début de l'élément body d'un document HTML. */
 var body = document.getElementsByTagName("body")[0];
 window.getSelection().collapse(body,0);
-</pre>
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Selection API', '#widl-Selection-collapse-void-Node-node-unsigned-long-offset', 'Selection.collapse()')}}</td>
-   <td>{{Spec2('Selection API')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML Editing', '#dom-selection-collapse', 'Selection.collapse()')}}</td>
-   <td>{{Spec2('HTML Editing')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                                                | Statut                               | Commentaires        |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ------------------- |
+| {{SpecName('Selection API', '#widl-Selection-collapse-void-Node-node-unsigned-long-offset', 'Selection.collapse()')}} | {{Spec2('Selection API')}} |                     |
+| {{SpecName('HTML Editing', '#dom-selection-collapse', 'Selection.collapse()')}}                                                     | {{Spec2('HTML Editing')}}     | Définition initiale |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Selection.collapse")}}</p>
+{{Compat("api.Selection.collapse")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>{{domxref("Selection")}}, l'interface à laquelle collapse appartient.</li>
-</ul>
+- {{domxref("Selection")}}, l'interface à laquelle collapse appartient.
diff --git a/files/fr/web/api/selection/index.md b/files/fr/web/api/selection/index.md
index d01facda6d..a06b3a3314 100644
--- a/files/fr/web/api/selection/index.md
+++ b/files/fr/web/api/selection/index.md
@@ -3,98 +3,86 @@ title: selection
 slug: Web/API/Selection
 translation_of: Web/API/Selection
 ---
-<p>{{ ApiRef() }}</p>
-
-<h3 id="R.C3.A9sum.C3.A9">Résumé</h3>
-
-<p>La classe de l'objet retourné par <code><a href="Window/getSelection"> window.getSelection()</a></code>, <a href="/fr/docs/Web/API/Document/getSelection"><code>document.getSelection()</code></a> et d'autres méthodes.</p>
-
-<h3 id="Description">Description</h3>
-
-<p>Un objet <code>selection</code> représente les <a href="range">plages</a> sélectionnées par l'utilisateur. Habituellement, il ne contient qu'une seule plage accessible comme ceci :</p>
-
-<pre class="eval">range = sel.getRangeAt(0);
-</pre>
-
-<p>L'appel de la méthode <code><a href="Selection/toString">toString()</a></code> renvoie le texte contenu dans la sélection. Cet appel peut être automatique, par exemple lorsque l'objet est passé à la fonction alert() : </p>
-
-<pre class="eval">selObj = window.getSelection();
-window.alert(selObj);
-</pre>
-
-<h3 id="Glossaire">Glossaire</h3>
-
-<p>Autres mots clés utilisés dans cette section.</p>
-
-<dl>
- <dt>anchor (ancre)</dt>
- <dd>L'« ancre » d'une sélection est son point de départ. Pour une sélection avec la souris, l'« ancre » correspond à l'endroit initialement pressé par le bouton de la souris. Quand l'utilisateur modifie la sélection à la souris ou au clavier, l'« ancre » ne change pas.</dd>
- <dt>focus (focus)</dt>
- <dd>Le « focus » d'une sélection est son point d'arrivée. Pour une sélection avec la souris, le « focus » correspond à l'endroit où le bouton de la souris est relaché. Quand l'utilisateur modifie la sélection à la souris ou au clavier, le « focus » pointe la fin de la sélection modifiée.</dd>
- <dt>range (plage)</dt>
- <dd>Une « plage » est une partie contigüe d'un document. Une « plage » peut contenir aussi bien des nœuds entiers que des portions de nœuds, comme un extrait de nœud texte. Habituellement, un utilisateur n'effectuera qu'une seule sélection à la fois, mais il lui est possible de sélectionner plusieurs « plages » (par ex. en utilisant la touche Ctrl). Une « plage » est obtenue depuis une sélection par l'objet <a href="range">range</a>. Les objets <code>range</code> peuvent également être créés via le DOM et ajoutés ou supprimés d'une sélection par programmation.</dd>
-</dl>
-
-<h3 id="Propri.C3.A9t.C3.A9s">Propriétés</h3>
-
-<dl>
- <dt><a href="/fr/docs/Web/API/Selection/anchorNode">anchorNode</a></dt>
- <dd>Renvoie le nœud d'où la sélection commence.</dd>
- <dt><a href="/fr/docs/Web/API/Selection/anchorOffset">anchorOffset</a></dt>
- <dd>Renvoie un nombre correspondant au décalage de l'« ancre » de la sélection au sein de l'<code>anchorNode</code>. Si l'<code>anchorNode</code> est un noeud texte, il s'agit du nombre de caractères précédants l'« ancre » au sein de l'<code>anchorNode</code>. Si l'<code>anchorNode</code> est un élément, il s'agit du nombre de noeuds enfants de l'<code>anchorNode</code> précédant l'« ancre ».</dd>
- <dt><a href="/fr/docs/Web/API/Selection/focusNode">focusNode</a></dt>
- <dd>Renvoie le nœud où la sélection se termine.</dd>
- <dt><a href="/fr/docs/Web/API/Selection/focusOffset">focusOffset</a></dt>
- <dd>Renvoie un nombre correspondant au décalage du « focus » de la sélection au sein du focus<code>Node</code>. Si le focus<code>Node</code> est un noeud texte, il s'agit du nombre de caractères précédants le « focus » au sein du focus<code>Node</code>. Si le focusNode est un élément, il s'agit du nombre de noeuds enfants du focus<code>Node</code> précédant le « focus ».</dd>
- <dt><a href="/fr/docs/Web/API/Selection/isCollapsed">isCollapsed</a></dt>
- <dd>Renvoie un booléen indiquant si le point de départ et d'arrivée sont à la même position.</dd>
- <dt><a href="/fr/docs/Web/API/Selection/rangeCount">rangeCount</a></dt>
- <dd>Renvoie le nombre de « plages » dans la sélection.</dd>
-</dl>
-
-<h3 id="M.C3.A9thodes">Méthodes</h3>
-
-<dl>
- <dt><a href="/fr/docs/Web/API/Selection/getRangeAt">getRangeAt</a></dt>
- <dd>Renvoie un objet range représentant une des « plages » actuellement sélectionnée.</dd>
- <dt><a href="/fr/docs/Web/API/Selection/collapse">collapse</a></dt>
- <dd>Réduit la sélection courante à un simple point.</dd>
- <dt><a href="/fr/docs/Web/API/Selection/extend">extend</a></dt>
- <dd>Déplace le « focus » de la sélection à un endroit spécifié.</dd>
- <dt><a href="/fr/docs/Web/API/Selection/collapseToStart">collapseToStart</a></dt>
- <dd>Déplace le « focus » de la sélection au même point que l'« ancre ».</dd>
- <dt><a href="/fr/docs/Web/API/Selection/collapseToEnd">collapseToEnd</a></dt>
- <dd>Déplace l'« ancre » de la sélection au même point que le « focus ». Le « focus » ne bouge pas.</dd>
- <dt><a href="/fr/docs/Web/API/Selection/selectAllChildren">selectAllChildren</a></dt>
- <dd>Ajoute tous les enfants d'un nœud spécifié à la sélection.</dd>
- <dt><a href="/fr/docs/Web/API/Selection/addRange">addRange</a></dt>
- <dd>Un objet range devant être ajouté à la sélection.</dd>
- <dt><a href="/fr/docs/Web/API/Selection/removeRange">removeRange</a></dt>
- <dd>Supprime une « plage » de la sélection.</dd>
- <dt><a href="/fr/docs/Web/API/Selection/removeAllRanges">removeAllRanges</a></dt>
- <dd>Supprime toutes les « plages » de la sélection.</dd>
- <dt><a href="/fr/docs/Web/API/Selection/deleteFromDocument">deleteFromDocument</a></dt>
- <dd>Efface le contenu de la sélection du document.</dd>
- <dt><a href="/fr/docs/Web/API/Selection/selectionLanguageChange">selectionLanguageChange</a></dt>
- <dd> </dd>
- <dt><a href="/fr/docs/Web/API/Selection/toString">toString</a></dt>
- <dd>Renvoie une chaîne de caractères représentant l'actuel objet <code>selection</code>, i.e. le texte sélectionné.</dd>
- <dt><a href="/fr/docs/Web/API/Selection/containsNode">containsNode</a></dt>
- <dd>Indique si un nœud donné appartient à la sélection.</dd>
-</dl>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-
-
-<p>{{Compat("api.Selection")}}</p>
-
-<h3 id="Voir_aussi">Voir aussi</h3>
-
-<p><a href="Window/getSelection">window.getSelection</a>, <a href="/fr/docs/Web/API/Document/getSelection"><code>document.getSelection()</code></a>,<a href="range">Range</a></p>
-
-<h3 id="Liens_externes">Liens externes</h3>
-
-<ul>
- <li><a href="http://lxr.mozilla.org/mozilla/source/content/base/public/nsISelection.idl">Définition IDL dans Mozilla cross-reference</a></li>
-</ul>
\ No newline at end of file
+{{ ApiRef() }}
+
+### Résumé
+
+La classe de l'objet retourné par [`window.getSelection()`](Window/getSelection), [`document.getSelection()`](/fr/docs/Web/API/Document/getSelection) et d'autres méthodes.
+
+### Description
+
+Un objet `selection` représente les [plages](range) sélectionnées par l'utilisateur. Habituellement, il ne contient qu'une seule plage accessible comme ceci :
+
+    range = sel.getRangeAt(0);
+
+L'appel de la méthode [`toString()`](Selection/toString) renvoie le texte contenu dans la sélection. Cet appel peut être automatique, par exemple lorsque l'objet est passé à la fonction alert() :
+
+    selObj = window.getSelection();
+    window.alert(selObj);
+
+### Glossaire
+
+Autres mots clés utilisés dans cette section.
+
+- anchor (ancre)
+  - : L'« ancre » d'une sélection est son point de départ. Pour une sélection avec la souris, l'« ancre » correspond à l'endroit initialement pressé par le bouton de la souris. Quand l'utilisateur modifie la sélection à la souris ou au clavier, l'« ancre » ne change pas.
+- focus (focus)
+  - : Le « focus » d'une sélection est son point d'arrivée. Pour une sélection avec la souris, le « focus » correspond à l'endroit où le bouton de la souris est relaché. Quand l'utilisateur modifie la sélection à la souris ou au clavier, le « focus » pointe la fin de la sélection modifiée.
+- range (plage)
+  - : Une « plage » est une partie contigüe d'un document. Une « plage » peut contenir aussi bien des nœuds entiers que des portions de nœuds, comme un extrait de nœud texte. Habituellement, un utilisateur n'effectuera qu'une seule sélection à la fois, mais il lui est possible de sélectionner plusieurs « plages » (par ex. en utilisant la touche Ctrl). Une « plage » est obtenue depuis une sélection par l'objet [range](range). Les objets `range` peuvent également être créés via le DOM et ajoutés ou supprimés d'une sélection par programmation.
+
+### Propriétés
+
+- [anchorNode](/fr/docs/Web/API/Selection/anchorNode)
+  - : Renvoie le nœud d'où la sélection commence.
+- [anchorOffset](/fr/docs/Web/API/Selection/anchorOffset)
+  - : Renvoie un nombre correspondant au décalage de l'« ancre » de la sélection au sein de l'`anchorNode`. Si l'`anchorNode` est un noeud texte, il s'agit du nombre de caractères précédants l'« ancre » au sein de l'`anchorNode`. Si l'`anchorNode` est un élément, il s'agit du nombre de noeuds enfants de l'`anchorNode` précédant l'« ancre ».
+- [focusNode](/fr/docs/Web/API/Selection/focusNode)
+  - : Renvoie le nœud où la sélection se termine.
+- [focusOffset](/fr/docs/Web/API/Selection/focusOffset)
+  - : Renvoie un nombre correspondant au décalage du « focus » de la sélection au sein du focus`Node`. Si le focus`Node` est un noeud texte, il s'agit du nombre de caractères précédants le « focus » au sein du focus`Node`. Si le focusNode est un élément, il s'agit du nombre de noeuds enfants du focus`Node` précédant le « focus ».
+- [isCollapsed](/fr/docs/Web/API/Selection/isCollapsed)
+  - : Renvoie un booléen indiquant si le point de départ et d'arrivée sont à la même position.
+- [rangeCount](/fr/docs/Web/API/Selection/rangeCount)
+  - : Renvoie le nombre de « plages » dans la sélection.
+
+### Méthodes
+
+- [getRangeAt](/fr/docs/Web/API/Selection/getRangeAt)
+  - : Renvoie un objet range représentant une des « plages » actuellement sélectionnée.
+- [collapse](/fr/docs/Web/API/Selection/collapse)
+  - : Réduit la sélection courante à un simple point.
+- [extend](/fr/docs/Web/API/Selection/extend)
+  - : Déplace le « focus » de la sélection à un endroit spécifié.
+- [collapseToStart](/fr/docs/Web/API/Selection/collapseToStart)
+  - : Déplace le « focus » de la sélection au même point que l'« ancre ».
+- [collapseToEnd](/fr/docs/Web/API/Selection/collapseToEnd)
+  - : Déplace l'« ancre » de la sélection au même point que le « focus ». Le « focus » ne bouge pas.
+- [selectAllChildren](/fr/docs/Web/API/Selection/selectAllChildren)
+  - : Ajoute tous les enfants d'un nœud spécifié à la sélection.
+- [addRange](/fr/docs/Web/API/Selection/addRange)
+  - : Un objet range devant être ajouté à la sélection.
+- [removeRange](/fr/docs/Web/API/Selection/removeRange)
+  - : Supprime une « plage » de la sélection.
+- [removeAllRanges](/fr/docs/Web/API/Selection/removeAllRanges)
+  - : Supprime toutes les « plages » de la sélection.
+- [deleteFromDocument](/fr/docs/Web/API/Selection/deleteFromDocument)
+  - : Efface le contenu de la sélection du document.
+- [selectionLanguageChange](/fr/docs/Web/API/Selection/selectionLanguageChange)
+  - :
+- [toString](/fr/docs/Web/API/Selection/toString)
+  - : Renvoie une chaîne de caractères représentant l'actuel objet `selection`, i.e. le texte sélectionné.
+- [containsNode](/fr/docs/Web/API/Selection/containsNode)
+  - : Indique si un nœud donné appartient à la sélection.
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Selection")}}
+
+### Voir aussi
+
+[window.getSelection](Window/getSelection), [`document.getSelection()`](/fr/docs/Web/API/Document/getSelection),[Range](range)
+
+### Liens externes
+
+- [Définition IDL dans Mozilla cross-reference](http://lxr.mozilla.org/mozilla/source/content/base/public/nsISelection.idl)
diff --git a/files/fr/web/api/selection/tostring/index.md b/files/fr/web/api/selection/tostring/index.md
index c0e4836d47..23ce054696 100644
--- a/files/fr/web/api/selection/tostring/index.md
+++ b/files/fr/web/api/selection/tostring/index.md
@@ -5,24 +5,31 @@ tags:
   - Référence_du_DOM_Gecko
 translation_of: Web/API/Selection/toString
 ---
-<p>{{ ApiRef() }}</p>
-<h3 id="R.C3.A9sum.C3.A9">Résumé</h3>
-<p>Renvoie une chaîne de caractères représentant l'actuel objet <code>selection</code>, i.e. le texte sélectionné.</p>
-<h3 id="Syntaxe">Syntaxe</h3>
-<pre class="eval"><i>string</i> =<i>sel</i>.toString()
-</pre>
-<ul>
- <li><code>string</code> est la représentation sous la forme d'une chaîne de caractères de la sélection.</li>
-</ul>
-<h3 id="Param.C3.A8tres">Paramètres</h3>
-<p>Aucun.</p>
-<h3 id="Description">Description</h3>
-<p>Cette méthode renvoie le texte sélectionné.</p>
-<p>En <a href="fr/JavaScript">JavaScript</a>, cette méthode est appelée automatiquement pour des objets <code>selection</code> aux fonctions nécessitant un paramètre <code>string</code> :</p>
-<pre class="eval">alert(window.getSelection()) // Appel automatique
-alert(window.getSelection().toString())  // Appel explicite
-</pre>
-<h3 id="Voir_aussi">Voir aussi</h3>
-<ul>
- <li><a href="fr/R%c3%a9f%c3%a9rence_de_JavaScript_1.5_Core/Objets_globaux/Object/toString">Object.toString</a></li>
-</ul>
\ No newline at end of file
+{{ ApiRef() }}
+
+### Résumé
+
+Renvoie une chaîne de caractères représentant l'actuel objet `selection`, i.e. le texte sélectionné.
+
+### Syntaxe
+
+    string =sel.toString()
+
+- `string` est la représentation sous la forme d'une chaîne de caractères de la sélection.
+
+### Paramètres
+
+Aucun.
+
+### Description
+
+Cette méthode renvoie le texte sélectionné.
+
+En [JavaScript](fr/JavaScript), cette méthode est appelée automatiquement pour des objets `selection` aux fonctions nécessitant un paramètre `string` :
+
+    alert(window.getSelection()) // Appel automatique
+    alert(window.getSelection().toString())  // Appel explicite
+
+### Voir aussi
+
+- [Object.toString](fr/R%c3%a9f%c3%a9rence_de_JavaScript_1.5_Core/Objets_globaux/Object/toString)
diff --git a/files/fr/web/api/selection/type/index.md b/files/fr/web/api/selection/type/index.md
index 6f6032891a..df3440d066 100644
--- a/files/fr/web/api/selection/type/index.md
+++ b/files/fr/web/api/selection/type/index.md
@@ -9,62 +9,46 @@ tags:
   - Type
 translation_of: Web/API/Selection/type
 ---
-<div>{{APIRef("DOM")}}{{SeeCompatTable}}</div>
+{{APIRef("DOM")}}{{SeeCompatTable}}
 
-<p>La propriété en lecture simple <strong><code>type</code></strong> de l'interface {{domxref("Selection")}} retourne un {{domxref("DOMString")}} décrivant le type de la sélection courante.</p>
+La propriété en lecture simple **`type`** de l'interface {{domxref("Selection")}} retourne un {{domxref("DOMString")}} décrivant le type de la sélection courante.
 
-<h2 id="Syntax">Syntax</h2>
+## Syntax
 
-<pre class="syntaxbox"><em>value</em> =<em> sel</em>.type
-</pre>
+    value = sel.type
 
-<h3 id="Value">Value</h3>
+### Value
 
-<p>Une {{domxref("DOMString")}} décrivant le type de la sélection courante. Les valeurs possibles sont :</p>
+Une {{domxref("DOMString")}} décrivant le type de la sélection courante. Les valeurs possibles sont :
 
-<ul>
- <li><code>None</code>: Aucune sélection courante.</li>
- <li><code>Caret</code>: La sélection est réduite (le curseur est dans un texte mais il n'y a pas de plage sélectionnée).</li>
- <li><code>Range</code>: Une plage est sélectionnnée.</li>
-</ul>
+- `None`: Aucune sélection courante.
+- `Caret`: La sélection est réduite (le curseur est dans un texte mais il n'y a pas de plage sélectionnée).
+- `Range`: Une plage est sélectionnnée.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Dans cet exemple le gestionnaire d'évènemenet est activé à chaque changement de la sélection. <code>console.log(selection.type)</code> retourne <code>Caret</code> ou <code>Range</code> selon que le curseur est sur un simple caractère ou qu'une plage est sélectionée.</p>
+Dans cet exemple le gestionnaire d'évènemenet est activé à chaque changement de la sélection. `console.log(selection.type)` retourne `Caret` ou `Range` selon que le curseur est sur un simple caractère ou qu'une plage est sélectionée.
 
-<pre class="brush: js">var selection;
+```js
+var selection;
 
 document.onselectionchange = function() {
   console.log('New selection made');
   selection = document.getSelection();
   console.log(selection.type);
-};</pre>
+};
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Selection API', '#dom-selection-type', 'Selection.type')}}</td>
-   <td>{{Spec2('Selection API')}}</td>
-   <td>Courant</td>
-  </tr>
- </tbody>
-</table>
+| Specification                                                                                | Status                               | Comment |
+| -------------------------------------------------------------------------------------------- | ------------------------------------ | ------- |
+| {{SpecName('Selection API', '#dom-selection-type', 'Selection.type')}} | {{Spec2('Selection API')}} | Courant |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
+{{Compat("api.Selection.type")}}
 
+## Voir aussi
 
-<p>{{Compat("api.Selection.type")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("Selection")}}</li>
-</ul>
+- {{domxref("Selection")}}
diff --git a/files/fr/web/api/server-sent_events/index.md b/files/fr/web/api/server-sent_events/index.md
index 8bbfc6079e..e9c5ff2191 100644
--- a/files/fr/web/api/server-sent_events/index.md
+++ b/files/fr/web/api/server-sent_events/index.md
@@ -6,41 +6,31 @@ tags:
   - TopicStub
 translation_of: Web/API/Server-sent_events
 ---
-<p>Habituellement, une page web doit envoyer une requête au serveur pour obtenir de nouvelles données. Avec les server-Sent events, le serveur peut envoyer de nouvelles données vers une page web à n'importe quel moment. La page web reçoit alors ces nouveaux messages qui peuvent être traités comme des événements contenant des données.</p>
+Habituellement, une page web doit envoyer une requête au serveur pour obtenir de nouvelles données. Avec les server-Sent events, le serveur peut envoyer de nouvelles données vers une page web à n'importe quel moment. La page web reçoit alors ces nouveaux messages qui peuvent être traités comme des événements contenant des données.
 
-<h2 id="Documentation">Documentation</h2>
+## Documentation
 
-<dl>
-  <dt><a href="/en-US/docs/Server-sent_events/Using_server-sent_events">Utilisation des événements envoyés par le serveur</a></dt>
-  <dd>Un tutoriel sur l'écriture d'une partie côté serveur et côté client d'une application d'événements envoyée par le serveur.</dd>
-  <dt><a href="/en-US/docs/Server-sent_events/EventSource">EventSource référence</a></dt>
-  <dd>Une référence à l'API EventSource côté client.</dd>
-</dl>
+- [Utilisation des événements envoyés par le serveur](/en-US/docs/Server-sent_events/Using_server-sent_events)
+  - : Un tutoriel sur l'écriture d'une partie côté serveur et côté client d'une application d'événements envoyée par le serveur.
+- [EventSource référence](/en-US/docs/Server-sent_events/EventSource)
+  - : Une référence à l'API EventSource côté client.
 
-<h2 id="Tools">Outils</h2>
+## Outils
 
-<ul>
-  <li>Remy Sharp’s <a href="https://github.com/remy/polyfills/blob/master/EventSource.js">EventSource polyfill</a></li>
-  <li>Yaffle’s <a href="https://github.com/Yaffle/EventSource">EventSource polyfill</a></li>
-  <li>Rick Waldron’s <a href="https://github.com/rwldrn/jquery.eventsource">jquery plugin</a></li>
-</ul>
+- Remy Sharp’s [EventSource polyfill](https://github.com/remy/polyfills/blob/master/EventSource.js)
+- Yaffle’s [EventSource polyfill](https://github.com/Yaffle/EventSource)
+- Rick Waldron’s [jquery plugin](https://github.com/rwldrn/jquery.eventsource)
 
-<h2 id="Related_Topics">Rubriques connexes</h2>
+## Rubriques connexes
 
-<ul>
-  <li><a href="/en-US/docs/AJAX">AJAX</a>, <a href="/en-US/docs/JavaScript">JavaScript</a>, <a href="/en-US/docs/WebSockets">WebSockets</a></li>
-</ul>
+- [AJAX](/en-US/docs/AJAX), [JavaScript](/en-US/docs/JavaScript), [WebSockets](/en-US/docs/WebSockets)
 
-<h2 id="Voir_également">Voir également</h2>
+## Voir également
 
-<ul>
- <li>Une <a href="http://hacks.mozilla.org/2011/06/a-wall-powered-by-eventsource-and-server-sent-events/">application de type Twitter</a> alimentée par des événements envoyés par le serveur et <a href="https://github.com/mozilla/webowonder-demos/tree/master/demos/friends%20timeline">son code sur Github</a>.</li>
- <li><a href="http://dsheiko.com/weblog/html5-and-server-sent-events">Événements HTML5 et envoyés par le serveur</a></li>
- <li><a href="http://rajudasa.blogspot.in/2012/05/html5-server-sent-events-using-aspnet.html">Événements envoyés par le serveur à l'aide d'Asp.Net</a></li>
-</ul>
+- Une [application de type Twitter](http://hacks.mozilla.org/2011/06/a-wall-powered-by-eventsource-and-server-sent-events/) alimentée par des événements envoyés par le serveur et [son code sur Github](https://github.com/mozilla/webowonder-demos/tree/master/demos/friends%20timeline).
+- [Événements HTML5 et envoyés par le serveur](http://dsheiko.com/weblog/html5-and-server-sent-events)
+- [Événements envoyés par le serveur à l'aide d'Asp.Net](http://rajudasa.blogspot.in/2012/05/html5-server-sent-events-using-aspnet.html)
 
-<h2 id="Spécification">Spécification</h2>
+## Spécification
 
-<ul>
- <li><a href="http://dev.w3.org/html5/eventsource/">Événements envoyés par le serveur</a></li>
-</ul>
+- [Événements envoyés par le serveur](http://dev.w3.org/html5/eventsource/)
diff --git a/files/fr/web/api/server-sent_events/using_server-sent_events/index.md b/files/fr/web/api/server-sent_events/using_server-sent_events/index.md
index 0d6c1aa33a..aefa72a9a4 100644
--- a/files/fr/web/api/server-sent_events/using_server-sent_events/index.md
+++ b/files/fr/web/api/server-sent_events/using_server-sent_events/index.md
@@ -12,56 +12,61 @@ tags:
   - messaging
 translation_of: Web/API/Server-sent_events/Using_server-sent_events
 ---
-<p>{{DefaultAPISidebar("Server Sent Events")}}</p>
-<p>Développer une application web qui utilise des <a href="/fr/docs/Web/API/Server-sent_events">évènements envoyés par le serveur</a> (<i>server-sent events</i> en anglais) est relativement simple. Côté serveur, on aura besoin d'un bout de code qui puisse transmettre des évènements à l'application web ; côté client, le fonctionnement est quasi identique à celui qu'on utilise pour les <a href="/fr/docs/Web/API/WebSockets_API">websockets</a> et notamment la gestion d'évènements entrants. Il s'agit d'une connexion unidirectionnelle : on ne peut pas envoyer d'évènements du client vers le serveur.</p>
+{{DefaultAPISidebar("Server Sent Events")}}
 
-<h2 id="receiving_events_from_the_server">Recevoir des évènements du serveur</h2>
+Développer une application web qui utilise des [évènements envoyés par le serveur](/fr/docs/Web/API/Server-sent_events) (_server-sent events_ en anglais) est relativement simple. Côté serveur, on aura besoin d'un bout de code qui puisse transmettre des évènements à l'application web ; côté client, le fonctionnement est quasi identique à celui qu'on utilise pour les [websockets](/fr/docs/Web/API/WebSockets_API) et notamment la gestion d'évènements entrants. Il s'agit d'une connexion unidirectionnelle : on ne peut pas envoyer d'évènements du client vers le serveur.
 
-<p>L'API des évènements serveur est exposée par l'interface <a href="/fr/docs/Web/API/EventSource"><code>EventSource</code></a> ; pour ouvrir une connexion vers le serveur afin de commencer à recevoir des évènements de celui-ci, on crée un nouvel objet <code>EventSource</code>, en spécifiant l'URL d'un script côté serveur qui va générer les évènements. Par exemple :</p>
+## Recevoir des évènements du serveur
 
-<pre class="brush: js">const evtSource = new EventSource("ssedemo.php");
-</pre>
+L'API des évènements serveur est exposée par l'interface [`EventSource`](/fr/docs/Web/API/EventSource) ; pour ouvrir une connexion vers le serveur afin de commencer à recevoir des évènements de celui-ci, on crée un nouvel objet `EventSource`, en spécifiant l'URL d'un script côté serveur qui va générer les évènements. Par exemple :
 
-<p>Si le script qui génère les évènements est hébergé sur une origine différente, le nouvel objet <code>EventSource</code> doit être créé en spécifiant à la fois l'URL et un dictionnaire d'options. Par exemple, en supposant que le script client est sur example.com :</p>
+```js
+const evtSource = new EventSource("ssedemo.php");
+```
 
-<pre class="brush: js">const evtSource = new EventSource("//api.example.com/ssedemo.php", { withCredentials: true } );</pre>
+Si le script qui génère les évènements est hébergé sur une origine différente, le nouvel objet `EventSource` doit être créé en spécifiant à la fois l'URL et un dictionnaire d'options. Par exemple, en supposant que le script client est sur example.com :
 
-<p>Une fois que la source d'évènement a été instanciée, on peut écouter les messages provenant du serveur en attachant un gestionnaire d'évènement pour <a href="/fr/docs/Web/API/MessageEvent"><code>message</code></a> :</p>
+```js
+const evtSource = new EventSource("//api.example.com/ssedemo.php", { withCredentials: true } );
+```
 
-<pre class="brush: js">evtSource.onmessage = function(event) {
+Une fois que la source d'évènement a été instanciée, on peut écouter les messages provenant du serveur en attachant un gestionnaire d'évènement pour [`message`](/fr/docs/Web/API/MessageEvent) :
+
+```js
+evtSource.onmessage = function(event) {
   const newElement = document.createElement("li");
   const eventList = document.getElementById("list");
 
   newElement.textContent = "message: " + event.data;
   eventList.appendChild(newElement);
 }
-</pre>
+```
 
-<p>Ce code écoute les messages entrants (plus précisément, les notifications venant du serveur qui n'ont pas de champ <code>event</code> attaché) et ajoute le texte des messages à une liste dans le contenu HTML du document.</p>
+Ce code écoute les messages entrants (plus précisément, les notifications venant du serveur qui n'ont pas de champ `event` attaché) et ajoute le texte des messages à une liste dans le contenu HTML du document.
 
-<p>On peut aussi écouter les évènements avec <code>addEventListener()</code> :</p>
+On peut aussi écouter les évènements avec `addEventListener()` :
 
-<pre class="brush: js">evtSource.addEventListener("ping", function(event) {
+```js
+evtSource.addEventListener("ping", function(event) {
   const newElement = document.createElement("li");
   const time = JSON.parse(event.data).time;
   newElement.textContent = "ping at " + time;
   eventList.appendChild(newElement);
 });
-</pre>
+```
 
-<p>Ce fragment de code est similaire au précédent, mais sera appelé automatiquement si le serveur envoie un message dont le champ <code>event</code> est <code>ping</code> ; il analysera alors le JSON dans le champ <code>data</code> et l'affichera.</p>
+Ce fragment de code est similaire au précédent, mais sera appelé automatiquement si le serveur envoie un message dont le champ `event` est `ping` ; il analysera alors le JSON dans le champ `data` et l'affichera.
 
-<div class="warning">
-  <p><strong>Attention :</strong> <strong>Lorsque HTTP/2 n'est pas utilisé</strong>, les évènements serveurs sont limités par le nombre maximal de connexion ouvertes, notamment quand on a plusieurs onglets ouverts. La limite est fixée <em>par le navigateur</em> et vaut 6 pour chaque origine (voir les bugs <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=275955">Chrome</a> et <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=906896">Firefox</a>). On pourra avoir 6 connexions pour les évènements serveurs parmi tous les onglets ouverts sur <code>www.example1.com</code>, 6 autres pour tous les onglets sur <code>www.example2.com</code> (voir cette réponse <a href="https://stackoverflow.com/a/5326159/1905229">Stack Overflow</a>). Avec HTTP/2, le nombre de flux HTTP simultanés est négocié entre le serveur et le client et vaut 100 par défaut.</p>
-</div>
+> **Attention :** **Lorsque HTTP/2 n'est pas utilisé**, les évènements serveurs sont limités par le nombre maximal de connexion ouvertes, notamment quand on a plusieurs onglets ouverts. La limite est fixée _par le navigateur_ et vaut 6 pour chaque origine (voir les bugs [Chrome](https://bugs.chromium.org/p/chromium/issues/detail?id=275955) et [Firefox](https://bugzilla.mozilla.org/show_bug.cgi?id=906896)). On pourra avoir 6 connexions pour les évènements serveurs parmi tous les onglets ouverts sur `www.example1.com`, 6 autres pour tous les onglets sur `www.example2.com` (voir cette réponse [Stack Overflow](https://stackoverflow.com/a/5326159/1905229)). Avec HTTP/2, le nombre de flux HTTP simultanés est négocié entre le serveur et le client et vaut 100 par défaut.
 
-<h2 id="sending_events_from_the_server">Envoyer un évènement depuis le serveur</h2>
+## Envoyer un évènement depuis le serveur
 
-<p>Le script côté serveur qui envoie les évènements doit répondre en utilisant le type MIME <code>text/event-stream</code>. Chaque notification est envoyée sous la forme d'un bloc de texte se terminant par une paire de caractères saut de ligne (<code>\n</code>). Pour plus de détails sur le format du flux d'évènements, voir <a href="#event_stream_format">la section ci-après</a>.</p>
+Le script côté serveur qui envoie les évènements doit répondre en utilisant le type MIME `text/event-stream`. Chaque notification est envoyée sous la forme d'un bloc de texte se terminant par une paire de caractères saut de ligne (`\n`). Pour plus de détails sur le format du flux d'évènements, voir [la section ci-après](#event_stream_format).
 
-<p>Voici le code <a href="/fr/docs/Glossary/PHP">PHP</a> que nous utilisons pour notre exemple :</p>
+Voici le code [PHP](/fr/docs/Glossary/PHP) que nous utilisons pour notre exemple :
 
-<pre class="brush: php">date_default_timezone_set("America/New_York");
+```php
+date_default_timezone_set("America/New_York");
 header("Cache-Control: no-cache");
 header("Content-Type: text/event-stream");
 
@@ -93,82 +98,80 @@ while (true) {
 
   sleep(1);
 }
-</pre>
+```
+
+Ce code génère un évènement de type « ping » à chaque seconde. La donnée de chaque évènement est un objet JSON contenant un horodatage ISO 8601 qui correspond à l'heure à laquelle l'évènement a été généré. À des intervalles aléatoires, un message simple (sans type d'évènement) est envoyé.
 
-<p>Ce code génère un évènement de type « ping » à chaque seconde. La donnée de chaque évènement est un objet JSON contenant un horodatage ISO 8601 qui correspond à l'heure à laquelle l'évènement a été généré. À des intervalles aléatoires, un message simple (sans type d'évènement) est envoyé.</p>
-<p>La boucle s'exécute indépendamment du statut de la connexion, on a donc une vérification pour terminer l'exécution si la connexion a été terminée.</p>
+La boucle s'exécute indépendamment du statut de la connexion, on a donc une vérification pour terminer l'exécution si la connexion a été terminée.
 
-<div class="note">
-<p><strong>Note :</strong> Vous pouvez trouver un exemple complet utilisant le code ci-dessus sur GitHub : voir <a href="https://github.com/mdn/dom-examples/tree/master/server-sent-events">Démonstration d'évènements serveur avec PHP.</a></p>
-</div>
+> **Note :** Vous pouvez trouver un exemple complet utilisant le code ci-dessus sur GitHub : voir [Démonstration d'évènements serveur avec PHP.](https://github.com/mdn/dom-examples/tree/master/server-sent-events)
 
-<h2 id="error_handling">Gestion des erreurs</h2>
+## Gestion des erreurs
 
-<p>Quand un problème survient (tel qu'un délai de réponse dépassé ou une erreur liée au <a href="/fr/docs/Web/HTTP/CORS">contrôle d'accès</a>), un évènement <code>error</code> est généré. Vous pouvez traiter ces cas d'erreur en implémentant la fonction de rappel <code>onerror</code> sur l'objet <code>EventSource</code>.</p>
+Quand un problème survient (tel qu'un délai de réponse dépassé ou une erreur liée au [contrôle d'accès](/fr/docs/Web/HTTP/CORS)), un évènement `error` est généré. Vous pouvez traiter ces cas d'erreur en implémentant la fonction de rappel `onerror` sur l'objet `EventSource`.
 
-<pre class="brush: js">evtSource.onerror = function(err) {
+```js
+evtSource.onerror = function(err) {
   console.error("EventSource failed:", err);
 };
-</pre>
+```
 
-<h2 id="closing_event_streams">Fermer les flux d'évènements</h2>
+## Fermer les flux d'évènements
 
-<p>Par défaut, si la connexion entre le client et le serveur est rompue, elle sera relancée. Il est possible de la fermer explicitement à l'aide de la méthode <code>.close()</code>.</p>
+Par défaut, si la connexion entre le client et le serveur est rompue, elle sera relancée. Il est possible de la fermer explicitement à l'aide de la méthode `.close()`.
 
-<pre class="brush: js">evtSource.close();</pre>
+```js
+evtSource.close();
+```
 
-<h2 id="event_stream_format">Format du flux d'évènements</h2>
+## Format du flux d'évènements
 
-<p>Le flux d'évènements est un simple flux de données de texte, qui doit être encodé en <a href="/fr/docs/Glossary/UTF-8">UTF-8</a>. Les messages dans le flux d'évènements sont séparés par une paire de sauts de ligne. Un caractère deux-points « : » en début de ligne représente un commentaire, et est ignoré.</p>
+Le flux d'évènements est un simple flux de données de texte, qui doit être encodé en [UTF-8](/fr/docs/Glossary/UTF-8). Les messages dans le flux d'évènements sont séparés par une paire de sauts de ligne. Un caractère deux-points « : » en début de ligne représente un commentaire, et est ignoré.
 
-<div class="note">
-<p><strong>Note :</strong> Une ligne de commentaire peut être utilisée pour empêcher les connexions d'expirer. Un serveur peut envoyer périodiquement des commentaires afin de garder la connexion ouverte.</p>
-</div>
+> **Note :** Une ligne de commentaire peut être utilisée pour empêcher les connexions d'expirer. Un serveur peut envoyer périodiquement des commentaires afin de garder la connexion ouverte.
 
-<p>Chaque message consiste en une ou plusieurs lignes de texte décrivant les champs de ce message. Chaque champ est représenté par le nom du champ, suivi d'un « : », suivi des données de texte pour la valeur de ce champ.</p>
+Chaque message consiste en une ou plusieurs lignes de texte décrivant les champs de ce message. Chaque champ est représenté par le nom du champ, suivi d'un « : », suivi des données de texte pour la valeur de ce champ.
 
-<h3 id="fields">Champs</h3>
+### Champs
 
-<p>Chaque message reçu contient un ou plusieurs de ces champs, un par ligne  :</p>
+Chaque message reçu contient un ou plusieurs de ces champs, un par ligne  :
 
-<dl>
- <dt><code>event</code></dt>
- <dd>Une chaîne identifiant le type d'évènement décrit. S'il est spécifié, un évènement sera envoyé dans le navigateur à l'écouteur défini pour l'évènement spécifié. Le code source de l'application doit utiliser <code>addEventListener()</code> pour écouter des évènements nommés. Le gestionnaire <code>onmessage</code> est appelé si aucun nom d'évènement n'est spécifié dans un message.</dd>
- <dt><code>data</code></dt>
- <dd>Le champ de données du message. Lorsque l'<code>EventSource</code> reçoit plusieurs lignes de message consécutives commençant par <code>data:</code>, <a href="https://www.w3.org/TR/eventsource/#dispatchMessage">il les concatène</a>, en ajoutant un caractère saut de ligne entre chacune d'elles. Les sauts de ligne en fin de message sont supprimés.</dd>
- <dt><code>id</code></dt>
- <dd>L'identifiant d'évènement, qui sera mémorisé comme valeur d'identifiant du dernier évènement de l'objet <code>EventSource</code>.</dd>
- <dt><code>retry</code></dt>
- <dd>Le délai de reconnexion à utiliser lors de la tentative d'envoi de l'évènement. Il doit être un nombre entier, spécifiant le temps de reconnexion en millisecondes. Si une valeur non entière est spécifiée, le champ est ignoré.</dd>
-</dl>
+- `event`
+  - : Une chaîne identifiant le type d'évènement décrit. S'il est spécifié, un évènement sera envoyé dans le navigateur à l'écouteur défini pour l'évènement spécifié. Le code source de l'application doit utiliser `addEventListener()` pour écouter des évènements nommés. Le gestionnaire `onmessage` est appelé si aucun nom d'évènement n'est spécifié dans un message.
+- `data`
+  - : Le champ de données du message. Lorsque l'`EventSource` reçoit plusieurs lignes de message consécutives commençant par `data:`, [il les concatène](https://www.w3.org/TR/eventsource/#dispatchMessage), en ajoutant un caractère saut de ligne entre chacune d'elles. Les sauts de ligne en fin de message sont supprimés.
+- `id`
+  - : L'identifiant d'évènement, qui sera mémorisé comme valeur d'identifiant du dernier évènement de l'objet `EventSource`.
+- `retry`
+  - : Le délai de reconnexion à utiliser lors de la tentative d'envoi de l'évènement. Il doit être un nombre entier, spécifiant le temps de reconnexion en millisecondes. Si une valeur non entière est spécifiée, le champ est ignoré.
 
-<p>Tous les autres noms de champs sont ignorés.</p>
+Tous les autres noms de champs sont ignorés.
 
-<div class="note">
-<p><strong>Note :</strong> Si une ligne ne contient aucun caractère deux-points, la ligne entière est considérée comme le nom du champ, avec un contenu vide.</p>
-</div>
+> **Note :** Si une ligne ne contient aucun caractère deux-points, la ligne entière est considérée comme le nom du champ, avec un contenu vide.
 
-<h3 id="examples">Exemples</h3>
+### Exemples
 
-<h4 id="data-only_messages">Messages contenant uniquement des données</h4>
+#### Messages contenant uniquement des données
 
-<p>Dans l'exemple suivant, trois messages sont envoyés. Le premier est simplement un commentaire, car il débute par un caractère deux-points. Comme mentionné précédemment, cela peut être utile pour maintenir la connexion si des messages doivent être transmis de façon irrégulière.</p>
+Dans l'exemple suivant, trois messages sont envoyés. Le premier est simplement un commentaire, car il débute par un caractère deux-points. Comme mentionné précédemment, cela peut être utile pour maintenir la connexion si des messages doivent être transmis de façon irrégulière.
 
-<p>Le deuxième message contient un champ <code>data</code> avec la valeur <code>"du texte"</code>. Le troisième message contient un champ <code>data</code> avec la valeur <code>"un autre message\nsur deux lignes"</code>. On notera le caractère saut de ligne dans la valeur.</p>
+Le deuxième message contient un champ `data` avec la valeur `"du texte"`. Le troisième message contient un champ `data` avec la valeur `"un autre message\nsur deux lignes"`. On notera le caractère saut de ligne dans la valeur.
 
-<pre class="brush: bash">: this is a test stream
+```bash
+: this is a test stream
 
 data: du texte
 
 data: un autre message
 data: sur deux lignes
-</pre>
+```
 
-<h4 id="named_events">Évènements nommés</h4>
+#### Évènements nommés
 
-<p>Cet exemple envoie une série d'évènements nommés. Chacun a un nom d'évènement spécifié par le champ <code>event</code>, et un champ <code>data</code> dont la valeur est une chaîne JSON appropriée avec les données nécessaires au client pour réagir à l'évènement. Le champ <code>data</code> peut évidemment contenir n'importe quelles données textuelles, il n'est pas obligatoirement au format JSON.</p>
+Cet exemple envoie une série d'évènements nommés. Chacun a un nom d'évènement spécifié par le champ `event`, et un champ `data` dont la valeur est une chaîne JSON appropriée avec les données nécessaires au client pour réagir à l'évènement. Le champ `data` peut évidemment contenir n'importe quelles données textuelles, il n'est pas obligatoirement au format JSON.
 
-<pre class="brush: bash">event: userconnect
+```bash
+event: userconnect
 data: {"username": "bobby", "time": "02:33:48"}
 
 event: usermessage
@@ -179,21 +182,23 @@ data: {"username": "bobby", "time": "02:34:23"}
 
 event: usermessage
 data: {"username": "sean", "time": "02:34:36", "text": "Bye, bobby."}
-</pre>
+```
 
-<h4 id="mixing_and_matching">Mélanger les types de message</h4>
+#### Mélanger les types de message
 
-<p>Il n'est pas obligatoire d'utiliser uniquement des messages sans nom ou des évènements nommés. Vous pouvez mélanger les deux dans un même flux d'évènements.</p>
+Il n'est pas obligatoire d'utiliser uniquement des messages sans nom ou des évènements nommés. Vous pouvez mélanger les deux dans un même flux d'évènements.
 
-<pre class="brush: bash">event: userconnect
+```bash
+event: userconnect
 data: {"username": "bobby", "time": "02:33:48"}
 
 data: Ici un message système quelconque qui sera utilisé
 data: pour accomplir une tâche.
 
 event: usermessage
-data: {"username": "bobby", "time": "02:34:11", "text": "Hi everyone."}</pre>
+data: {"username": "bobby", "time": "02:34:11", "text": "Hi everyone."}
+```
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.EventSource")}}</p>
+{{Compat("api.EventSource")}}
diff --git a/files/fr/web/api/service_worker_api/index.md b/files/fr/web/api/service_worker_api/index.md
index 76f29f0ca6..e09f3f205b 100644
--- a/files/fr/web/api/service_worker_api/index.md
+++ b/files/fr/web/api/service_worker_api/index.md
@@ -9,166 +9,133 @@ tags:
   - hors-ligne
 translation_of: Web/API/Service_Worker_API
 ---
-<div>
-<p>{{ServiceWorkerSidebar}}</p>
+{{ServiceWorkerSidebar}}
 
-<p>{{ SeeCompatTable() }}</p>
+{{ SeeCompatTable() }}
 
-<p>Les service workers jouent essentiellement le rôle de serveurs proxy placés entre une application web, et le navigateur ou le réseau (lorsque disponible.) Ils sont destinés (entre autres choses) à permettre la création d'expériences de navigation déconnectée efficaces, en interceptant les requêtes réseau et en effectuant des actions appropriées selon que le réseau est disponible et que des ressources mises à jour sont à disposition sur le serveur. Ils permettront aussi d'accéder aux APIs de notifications du serveur (push) et de synchronisation en arrière-plan.</p>
-</div>
+Les service workers jouent essentiellement le rôle de serveurs proxy placés entre une application web, et le navigateur ou le réseau (lorsque disponible.) Ils sont destinés (entre autres choses) à permettre la création d'expériences de navigation déconnectée efficaces, en interceptant les requêtes réseau et en effectuant des actions appropriées selon que le réseau est disponible et que des ressources mises à jour sont à disposition sur le serveur. Ils permettront aussi d'accéder aux APIs de notifications du serveur (push) et de synchronisation en arrière-plan.
 
-<h2 id="Service_worker_concepts_et_usage">Service worker, concepts et usage</h2>
+## Service worker, concepts et usage
 
-<p>Un service worker est un <a href="/en-US/docs/Web/API/Worker">worker</a> événementiel enregistré auprès d'une origine et d'un chemin. Il prend la forme d'un fichier JavaScript qui peut contrôler la page ou le site web auquel il est associé, en interceptant et en modifiant la navigation et les requêtes de ressources, et en mettant en cache les ressources selon une granularité très fine pour vous donner une maîtrise complète de la manière dont doit se comporter votre application dans certaines situations (l'une des plus évidentes étant l'indisponibilité du réseau.)</p>
+Un service worker est un [worker](/en-US/docs/Web/API/Worker) événementiel enregistré auprès d'une origine et d'un chemin. Il prend la forme d'un fichier JavaScript qui peut contrôler la page ou le site web auquel il est associé, en interceptant et en modifiant la navigation et les requêtes de ressources, et en mettant en cache les ressources selon une granularité très fine pour vous donner une maîtrise complète de la manière dont doit se comporter votre application dans certaines situations (l'une des plus évidentes étant l'indisponibilité du réseau.)
 
-<p>Un service worker fonctionne dans le contexte d'un worker : il n'a donc pas d'accès au DOM, et s'exécute dans une tâche différente de celle du script principal de votre application, ainsi il est non-bloquant. Il est conçu pour être totalement asynchrone; en conséquence, des APIs telles que <a href="/fr/docs/Web/API/XMLHttpRequest">XHR</a> en synchrone et <a href="/fr/docs/Web/API/Web_Storage_API">localStorage</a> ne peuvent pas être utilisées au sein d'un service worker.</p>
+Un service worker fonctionne dans le contexte d'un worker : il n'a donc pas d'accès au DOM, et s'exécute dans une tâche différente de celle du script principal de votre application, ainsi il est non-bloquant. Il est conçu pour être totalement asynchrone; en conséquence, des APIs telles que [XHR](/fr/docs/Web/API/XMLHttpRequest) en synchrone et [localStorage](/fr/docs/Web/API/Web_Storage_API) ne peuvent pas être utilisées au sein d'un service worker.
 
-<p>Les service workers fonctionnent uniquement sur HTTPS, pour des raisons de sécurité. Laisser des requêtes réseau modifiées sans défense face aux attaques de l'homme du milieu est une bien mauvaise chose.</p>
+Les service workers fonctionnent uniquement sur HTTPS, pour des raisons de sécurité. Laisser des requêtes réseau modifiées sans défense face aux attaques de l'homme du milieu est une bien mauvaise chose.
 
-<div class="note">
-<p><strong>Note :</strong> les service workers ont rallié à eux des tentatives précédemment effectuées dans les mêmes domaines comme l'API <a href="http://alistapart.com/article/application-cache-is-a-douchebag">AppCache</a> parce qu'ils ne présument pas de ce que vous essayez de faire et ainsi s'interrompent quand ces suppositions ne sont pas tout à fait exactes; tout peut faire l'objet d'un contrôle d'une granularité très fine.</p>
-</div>
+> **Note :** les service workers ont rallié à eux des tentatives précédemment effectuées dans les mêmes domaines comme l'API [AppCache](http://alistapart.com/article/application-cache-is-a-douchebag) parce qu'ils ne présument pas de ce que vous essayez de faire et ainsi s'interrompent quand ces suppositions ne sont pas tout à fait exactes; tout peut faire l'objet d'un contrôle d'une granularité très fine.
 
-<div class="note">
-<p><strong>Note :</strong> les service workers font un usage intensif des <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise">promesses</a>, comme généralement ils sont en attente de réponses, auxquelles ils réagissent alors différemment en cas de succès ou en cas d'erreur. L'architecture des promesses est idéale dans ces situations.</p>
-</div>
-
-<h3 id="Enregistrement">Enregistrement</h3>
-
-<p>Un service worker est d'abord enregistré en utilisant la méthode {{domxref("ServiceWorkerContainer.register()")}}. En cas de succès, votre service worker sera téléchargé par le client et tentera l'installation/l'activation (voir ci-dessous) des URLs accédées par l'utilisateur au sein du domaine complet, ou bien au sein d'un sous-ensemble spécifié par vos soins.</p>
-
-<h3 id="Télécharger_installer_et_activer">Télécharger, installer et activer</h3>
-
-<p>A cette étape, votre service worker observera le cycle de vie suivant :</p>
-
-<ol>
- <li>Téléchargement</li>
- <li>Installation</li>
- <li>Activation</li>
-</ol>
-
-<p>Le service worker est immédiatement téléchargé lorsqu'un utilisateur accède pour la première fois à une page ou à un site contrôlé par un service worker.</p>
-
-<p>Après cela, il est téléchargé toutes les 24 heures environ. Il *peut* être téléchargé plus fréquemment, mais il <strong>doit </strong>être téléchargé toutes les 24 heures pour s'assurer que des scripts défectueux ne constitueraient pas une nuisance durable.</p>
-
-<p>Une tentative d'installation a lieu lorsque le fichier téléchargé se trouve être nouveau — soit qu'il est différent d'un service worker existant (comparaison bit à bit), soit qu'il s'agit du premier service worker rencontré pour cette page ou ce site.</p>
-
-<p>Si c'est la première fois qu'un service worker est rendu disponible, une tentative d'installation a lieu, puis en cas d'installation avec succès il est activé.</p>
-
-<p>S'il existait déjà un service worker, la nouvelle version est installée en arrière-plan, mais pas encore activée — à cette étape, on parle de <em>worker en attente</em>. Il n'est activé que lorsqu'il n'y a plus aucune page chargée faisant encore usage de l'ancien service worker. Aussitôt qu'il n'y a plus de telles pages chargées, le nouveau service worker est activé (devenant le <em>active worker</em>.)</p>
-
-<p>Vous pouvez guetter l'événement {{domxref("InstallEvent")}}; une action standard consiste à préparer l'usage de votre service worker quand cet événement est lancé, par exemple en créant un cache au moyen de l'API de stockage native, et en y plaçant les ressources dont vous avez besoin pour faire fonctionner de manière déconnectée votre application.</p>
-
-<p>Il y a aussi un événement <code>activate</code>. Lorsque cet événement se produit, c'est généralement le bon moment pour nettoyer les vieux caches et toutes les autres choses associées avec la version précédente de votre service worker.</p>
-
-<p>Votre service worker peut répondre aux requêtes en utilisant l'événement {{domxref("FetchEvent")}}. Vous pouvez modifier la réponse à ces requêtes de la manière que vous souhaitez, en utilisant la méthode {{domxref("FetchEvent.respondWith") }}.</p>
-
-<div class="note">
-<p><strong>Note :</strong> Parce que <code>oninstall</code>/<code>onactivate</code> pourraient prendre du temps à s'exécuter, la spec service worker fournit une méthode <code>waitUntil</code> qui, lorsque <code>oninstall</code> ou <code>onactivate</code> sont appelées, passe une promesse. Les événements fonctionnels ne sont pas envoyés au service worker tant que la promesse n'a pas été résolue avec succès.</p>
-</div>
-
-<p>Pour un tutoriel complet qui montre comment réaliser un premier exemple basique, il est conseillé de lire <a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Utiliser les Services Workers</a>.</p>
-
-<h2 id="Autres_idées_de_cas_d'utilisation">Autres idées de cas d'utilisation</h2>
-
-<p>Les service workers sont aussi destinés à être utilisés pour des choses telles que :</p>
-
-<ul>
- <li>Synchronisation de données en arrière-plan</li>
- <li>Répondre à des requêtes de ressource provenant d'autres origines</li>
- <li>Recevoir des mises à jour centralisées de données coûteuses à calculer telles que la géolocalisation ou le gyroscope, afin que de nombreuses pages puissent bénéficier du même ensemble de données</li>
- <li>Compilation côté client et gestion des dépendances de CoffeeScript, less, modules CJS/AMD, etc. pour des besoins de développement</li>
- <li>Branchements pour des services en arrière-plan</li>
- <li>Personnalisation de gabarit en fonction de certains schémas d'URL</li>
- <li>Amélioration des performances, par exemple en pré-chargeant des ressources dont l'utilisateur aura probablement besoin par la suite, comme de nouvelles images lors de la consultation d'un album photo.</li>
-</ul>
-
-<p>À l'avenir, les service workers seront capables de réaliser nombre d'autres tâches utiles au sein d'une plate-forme web, ce qui les rapprochera de la viabilité des applications natives. Il est intéressant de noter que d'autres spécifications peuvent ou commencent à faire usage du contexte des service workers, par exemple :</p>
-
-<ul>
- <li><a href="https://github.com/slightlyoff/BackgroundSync">Synchronisation en arrière-plan</a> : démarrer un service worker même lorsqu'aucun utilisateur est sur le site, afin de mettre à jour les caches, etc.</li>
- <li><a href="/fr/docs/Web/API/Push_API">Réagir à des messages de push </a>: démarrer un service worker pour envoyer aux utilisateurs un message leur signalant qu'un nouveau contenu est disponible.</li>
- <li>Réagir à une date particulière</li>
- <li>Enregistrer une géo-localisation</li>
-</ul>
-
-<h2 id="Interfaces">Interfaces</h2>
-
-<dl>
- <dt>{{domxref("Cache") }}</dt>
- <dd>Représente le stockage pour le couple d'objets {{domxref("Request")}} / {{domxref("Response")}} qui sont mis en cache comme partie du cycle de vie de {{domxref("ServiceWorker")}}.</dd>
- <dt>{{domxref("CacheStorage") }}</dt>
- <dd>Représente le stockage pour les objets {{domxref("Cache")}}. Il fournit un répertoire maître à tous les caches nommés auxquels un {{domxref("ServiceWorker")}} peut accéder et maintient une correspondance de noms avec les objets {{domxref("Cache")}} correspondants.</dd>
- <dt>{{domxref("Client") }}</dt>
- <dd>Représente la portée d'un service worker client. Un service worker client est soit un document dans le contexte d'un navigateur ou un {{domxref("SharedWorker")}}, qui est contrôlé par un active worker.</dd>
- <dt>{{domxref("Clients") }}</dt>
- <dd>Représente un conteneur pour une liste d'objets {{domxref("Client")}}; la façon principale d'accéder aux clients du service worker actif de l'origine en cours.</dd>
- <dt>{{domxref("ExtendableEvent") }}</dt>
- <dd>Étend la durée de vie des événements <code>install</code> et <code>activate</code> envoyés au {{domxref("ServiceWorkerGlobalScope")}} comme partie du cycle de vie d'un service worker. Cela garantit que tout événement fonctionnel (comme {{domxref("FetchEvent")}}) n'est pas envoyé au {{domxref("ServiceWorker")}} avant qu'il ne mette à jour des schémas de base de données, supprime des entrées de cache obsolètes, etc.</dd>
- <dt>{{domxref("ExtendableMessageEvent") }}</dt>
- <dd>L'objet événement d'un événement {{event("message_(ServiceWorker)","message")}} déclenché sur un service worker (lorsqu'un message est reçu par le {{domxref("ServiceWorkerGlobalScope")}} à partir d'un autre contexte) — étend la durée de vie de tels événements.</dd>
- <dt>{{domxref("FetchEvent") }}</dt>
- <dd>Le paramètre passé au gestionnaire {{domxref("ServiceWorkerGlobalScope.onfetch")}}, l'interface <code>FetchEvent</code> représente une action de recherche qui est envoyée au {{domxref("ServiceWorkerGlobalScope")}} d'un {{domxref("ServiceWorker")}}. Il contient des informations à propos de la requête et de la réponse résultante, et fournit la méthode {{domxref("FetchEvent.respondWith", "FetchEvent.respondWith()")}}, qui nous permet de produire une réponse arbitraire en retour à la page contrôlée.</dd>
- <dt>{{domxref("InstallEvent") }}</dt>
- <dd>Le paramètre passé au gestionnaire {{domxref("ServiceWorkerGlobalScope.oninstall", "oninstall")}}, l'interface <code>InstallEvent</code> représente une action d'installation qui est envoyée au {{domxref("ServiceWorkerGlobalScope")}} d'un {{domxref("ServiceWorker")}}. En tant qu'enfant de {{domxref("ExtendableEvent")}}, il garantit que les événements fonctionnels tels que {{domxref("FetchEvent")}} ne sont pas envoyés pendant l'installation. </dd>
- <dt>{{domxref("Navigator.serviceWorker") }}</dt>
- <dd>Retourne un objet {{domxref("ServiceWorkerContainer")}}, qui fournit un accès provides à l'enregistrement, la supression, la mise à jour, et la communication avec les objets {{domxref("ServiceWorker")}} pour le <a href="https://html.spec.whatwg.org/multipage/browsers.html#concept-document-window">document associé</a>.</dd>
- <dt>{{domxref("NotificationEvent") }}</dt>
- <dd>Le paramètre passé au gestionnaire {{domxref("ServiceWorkerGlobalScope.onnotificationclick", "onnotificationclick")}}, l'interface <code>NotificationEvent</code> représente un événement de notification au clic qui est envoyé au {{domxref("ServiceWorkerGlobalScope")}} d'un {{domxref("ServiceWorker")}}.</dd>
- <dt>{{domxref("PeriodicSyncEvent")}} {{non-standard_inline}}</dt>
- <dd>
- <p>Le paramètre passé au gestionnaire sync, l'interface SyncEvent représente une action de synchronisation périodique qui est envoyée au  {{domxref("ServiceWorkerGlobalScope")}} d'un ServiceWorker. </p>
- </dd>
- <dt>{{domxref("PeriodicSyncManager")}} {{non-standard_inline}}</dt>
- <dd>Fournit une interface pour l'enregistrement et la récupération des objets {{domxref("PeriodicSyncRegistration")}}.</dd>
- <dt>{{domxref("PeriodicSyncRegistration")}} {{non-standard_inline}}</dt>
- <dd>Fournit un objet pour la gestion d'une synchronisation périodique en arrière-plan. </dd>
- <dt>{{domxref("ServiceWorker") }}</dt>
- <dd>Représente un service worker. De multiples contextes de navigation (e.g. des pages, des workers, etc.) peuvent être associés au même objet <code>ServiceWorker</code>.</dd>
- <dt>{{domxref("ServiceWorkerContainer") }}</dt>
- <dd>Fournit un objet représentant le service worker comme une unité d'ensemble dans l'éco-système du réseau, en incluant des facilités d'enregistrement, de désinscription et de mise à jour des service workers, et d'accès à l'état des service workers et de leur enregistrement.</dd>
- <dt>{{domxref("ServiceWorkerGlobalScope") }}</dt>
- <dd>Représente le contexte global d'exécution d'un service worker.</dd>
- <dt>{{domxref("ServiceWorkerMessageEvent")}}</dt>
- <dd>Contient des informations à propos d'un événement envoyé à la cible d'un {{domxref("ServiceWorkerContainer")}}. </dd>
- <dt>{{domxref("ServiceWorkerRegistration") }}</dt>
- <dd>Représente l'enregistrement d'un service worker.</dd>
- <dt>{{domxref("SyncEvent")}} {{non-standard_inline}}</dt>
- <dd>
- <p>Le paramètre passé au gestionnaire sync, l'interface SyncEvent représente une action de synchronisation qui est envoyée au {{domxref("ServiceWorkerGlobalScope")}} d'un ServiceWorker. </p>
- </dd>
- <dt>{{domxref("SyncManager")}} {{non-standard_inline}}</dt>
- <dd>Fournit une interface pour l'enregistrement et la récupération des objets {{domxref("SyncRegistration")}}.</dd>
- <dt>{{domxref("SyncRegistration")}} {{non-standard_inline}}</dt>
- <dd>Fournit un objet pour la gestion d'une synchronisation en arrière-plan.</dd>
- <dt>{{domxref("WindowClient") }}</dt>
- <dd>Représente la portée d'un service worker client qui est un document dans le contexte d'un navigateur, contrôlé par un active worker. C'est un type spécial d'objet {{domxref("Client")}}, avec des propriété et des méthodes supplémentaires.</dd>
-</dl>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Service Workers', '')}}</td>
-   <td>{{Spec2('Service Workers')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="https://serviceworke.rs">ServiceWorker Cookbook</a></li>
- <li><a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Utilisation des Service Workers</a></li>
- <li><a href="https://github.com/mdn/sw-test">Exemple basique de Service workers</a></li>
- <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise">Promises</a></li>
- <li><a href="/fr/docs/Utilisation_des_web_workers">Utilisation des web workers</a></li>
-</ul>
+> **Note :** les service workers font un usage intensif des [promesses](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise), comme généralement ils sont en attente de réponses, auxquelles ils réagissent alors différemment en cas de succès ou en cas d'erreur. L'architecture des promesses est idéale dans ces situations.
+
+### Enregistrement
+
+Un service worker est d'abord enregistré en utilisant la méthode {{domxref("ServiceWorkerContainer.register()")}}. En cas de succès, votre service worker sera téléchargé par le client et tentera l'installation/l'activation (voir ci-dessous) des URLs accédées par l'utilisateur au sein du domaine complet, ou bien au sein d'un sous-ensemble spécifié par vos soins.
+
+### Télécharger, installer et activer
+
+A cette étape, votre service worker observera le cycle de vie suivant :
+
+1.  Téléchargement
+2.  Installation
+3.  Activation
+
+Le service worker est immédiatement téléchargé lorsqu'un utilisateur accède pour la première fois à une page ou à un site contrôlé par un service worker.
+
+Après cela, il est téléchargé toutes les 24 heures environ. Il \*peut\* être téléchargé plus fréquemment, mais il **doit** être téléchargé toutes les 24 heures pour s'assurer que des scripts défectueux ne constitueraient pas une nuisance durable.
+
+Une tentative d'installation a lieu lorsque le fichier téléchargé se trouve être nouveau — soit qu'il est différent d'un service worker existant (comparaison bit à bit), soit qu'il s'agit du premier service worker rencontré pour cette page ou ce site.
+
+Si c'est la première fois qu'un service worker est rendu disponible, une tentative d'installation a lieu, puis en cas d'installation avec succès il est activé.
+
+S'il existait déjà un service worker, la nouvelle version est installée en arrière-plan, mais pas encore activée — à cette étape, on parle de _worker en attente_. Il n'est activé que lorsqu'il n'y a plus aucune page chargée faisant encore usage de l'ancien service worker. Aussitôt qu'il n'y a plus de telles pages chargées, le nouveau service worker est activé (devenant le _active worker_.)
+
+Vous pouvez guetter l'événement {{domxref("InstallEvent")}}; une action standard consiste à préparer l'usage de votre service worker quand cet événement est lancé, par exemple en créant un cache au moyen de l'API de stockage native, et en y plaçant les ressources dont vous avez besoin pour faire fonctionner de manière déconnectée votre application.
+
+Il y a aussi un événement `activate`. Lorsque cet événement se produit, c'est généralement le bon moment pour nettoyer les vieux caches et toutes les autres choses associées avec la version précédente de votre service worker.
+
+Votre service worker peut répondre aux requêtes en utilisant l'événement {{domxref("FetchEvent")}}. Vous pouvez modifier la réponse à ces requêtes de la manière que vous souhaitez, en utilisant la méthode {{domxref("FetchEvent.respondWith") }}.
+
+> **Note :** Parce que `oninstall`/`onactivate` pourraient prendre du temps à s'exécuter, la spec service worker fournit une méthode `waitUntil` qui, lorsque `oninstall` ou `onactivate` sont appelées, passe une promesse. Les événements fonctionnels ne sont pas envoyés au service worker tant que la promesse n'a pas été résolue avec succès.
+
+Pour un tutoriel complet qui montre comment réaliser un premier exemple basique, il est conseillé de lire [Utiliser les Services Workers](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers).
+
+## Autres idées de cas d'utilisation
+
+Les service workers sont aussi destinés à être utilisés pour des choses telles que :
+
+- Synchronisation de données en arrière-plan
+- Répondre à des requêtes de ressource provenant d'autres origines
+- Recevoir des mises à jour centralisées de données coûteuses à calculer telles que la géolocalisation ou le gyroscope, afin que de nombreuses pages puissent bénéficier du même ensemble de données
+- Compilation côté client et gestion des dépendances de CoffeeScript, less, modules CJS/AMD, etc. pour des besoins de développement
+- Branchements pour des services en arrière-plan
+- Personnalisation de gabarit en fonction de certains schémas d'URL
+- Amélioration des performances, par exemple en pré-chargeant des ressources dont l'utilisateur aura probablement besoin par la suite, comme de nouvelles images lors de la consultation d'un album photo.
+
+À l'avenir, les service workers seront capables de réaliser nombre d'autres tâches utiles au sein d'une plate-forme web, ce qui les rapprochera de la viabilité des applications natives. Il est intéressant de noter que d'autres spécifications peuvent ou commencent à faire usage du contexte des service workers, par exemple :
+
+- [Synchronisation en arrière-plan](https://github.com/slightlyoff/BackgroundSync) : démarrer un service worker même lorsqu'aucun utilisateur est sur le site, afin de mettre à jour les caches, etc.
+- [Réagir à des messages de push ](/fr/docs/Web/API/Push_API): démarrer un service worker pour envoyer aux utilisateurs un message leur signalant qu'un nouveau contenu est disponible.
+- Réagir à une date particulière
+- Enregistrer une géo-localisation
+
+## Interfaces
+
+- {{domxref("Cache") }}
+  - : Représente le stockage pour le couple d'objets {{domxref("Request")}} / {{domxref("Response")}} qui sont mis en cache comme partie du cycle de vie de {{domxref("ServiceWorker")}}.
+- {{domxref("CacheStorage") }}
+  - : Représente le stockage pour les objets {{domxref("Cache")}}. Il fournit un répertoire maître à tous les caches nommés auxquels un {{domxref("ServiceWorker")}} peut accéder et maintient une correspondance de noms avec les objets {{domxref("Cache")}} correspondants.
+- {{domxref("Client") }}
+  - : Représente la portée d'un service worker client. Un service worker client est soit un document dans le contexte d'un navigateur ou un {{domxref("SharedWorker")}}, qui est contrôlé par un active worker.
+- {{domxref("Clients") }}
+  - : Représente un conteneur pour une liste d'objets {{domxref("Client")}}; la façon principale d'accéder aux clients du service worker actif de l'origine en cours.
+- {{domxref("ExtendableEvent") }}
+  - : Étend la durée de vie des événements `install` et `activate` envoyés au {{domxref("ServiceWorkerGlobalScope")}} comme partie du cycle de vie d'un service worker. Cela garantit que tout événement fonctionnel (comme {{domxref("FetchEvent")}}) n'est pas envoyé au {{domxref("ServiceWorker")}} avant qu'il ne mette à jour des schémas de base de données, supprime des entrées de cache obsolètes, etc.
+- {{domxref("ExtendableMessageEvent") }}
+  - : L'objet événement d'un événement {{event("message_(ServiceWorker)","message")}} déclenché sur un service worker (lorsqu'un message est reçu par le {{domxref("ServiceWorkerGlobalScope")}} à partir d'un autre contexte) — étend la durée de vie de tels événements.
+- {{domxref("FetchEvent") }}
+  - : Le paramètre passé au gestionnaire {{domxref("ServiceWorkerGlobalScope.onfetch")}}, l'interface `FetchEvent` représente une action de recherche qui est envoyée au {{domxref("ServiceWorkerGlobalScope")}} d'un {{domxref("ServiceWorker")}}. Il contient des informations à propos de la requête et de la réponse résultante, et fournit la méthode {{domxref("FetchEvent.respondWith", "FetchEvent.respondWith()")}}, qui nous permet de produire une réponse arbitraire en retour à la page contrôlée.
+- {{domxref("InstallEvent") }}
+  - : Le paramètre passé au gestionnaire {{domxref("ServiceWorkerGlobalScope.oninstall", "oninstall")}}, l'interface `InstallEvent` représente une action d'installation qui est envoyée au {{domxref("ServiceWorkerGlobalScope")}} d'un {{domxref("ServiceWorker")}}. En tant qu'enfant de {{domxref("ExtendableEvent")}}, il garantit que les événements fonctionnels tels que {{domxref("FetchEvent")}} ne sont pas envoyés pendant l'installation.
+- {{domxref("Navigator.serviceWorker") }}
+  - : Retourne un objet {{domxref("ServiceWorkerContainer")}}, qui fournit un accès provides à l'enregistrement, la supression, la mise à jour, et la communication avec les objets {{domxref("ServiceWorker")}} pour le [document associé](https://html.spec.whatwg.org/multipage/browsers.html#concept-document-window).
+- {{domxref("NotificationEvent") }}
+  - : Le paramètre passé au gestionnaire {{domxref("ServiceWorkerGlobalScope.onnotificationclick", "onnotificationclick")}}, l'interface `NotificationEvent` représente un événement de notification au clic qui est envoyé au {{domxref("ServiceWorkerGlobalScope")}} d'un {{domxref("ServiceWorker")}}.
+- {{domxref("PeriodicSyncEvent")}} {{non-standard_inline}}
+  - : Le paramètre passé au gestionnaire sync, l'interface SyncEvent représente une action de synchronisation périodique qui est envoyée au  {{domxref("ServiceWorkerGlobalScope")}} d'un ServiceWorker.
+- {{domxref("PeriodicSyncManager")}} {{non-standard_inline}}
+  - : Fournit une interface pour l'enregistrement et la récupération des objets {{domxref("PeriodicSyncRegistration")}}.
+- {{domxref("PeriodicSyncRegistration")}} {{non-standard_inline}}
+  - : Fournit un objet pour la gestion d'une synchronisation périodique en arrière-plan.
+- {{domxref("ServiceWorker") }}
+  - : Représente un service worker. De multiples contextes de navigation (e.g. des pages, des workers, etc.) peuvent être associés au même objet `ServiceWorker`.
+- {{domxref("ServiceWorkerContainer") }}
+  - : Fournit un objet représentant le service worker comme une unité d'ensemble dans l'éco-système du réseau, en incluant des facilités d'enregistrement, de désinscription et de mise à jour des service workers, et d'accès à l'état des service workers et de leur enregistrement.
+- {{domxref("ServiceWorkerGlobalScope") }}
+  - : Représente le contexte global d'exécution d'un service worker.
+- {{domxref("ServiceWorkerMessageEvent")}}
+  - : Contient des informations à propos d'un événement envoyé à la cible d'un {{domxref("ServiceWorkerContainer")}}.
+- {{domxref("ServiceWorkerRegistration") }}
+  - : Représente l'enregistrement d'un service worker.
+- {{domxref("SyncEvent")}} {{non-standard_inline}}
+  - : Le paramètre passé au gestionnaire sync, l'interface SyncEvent représente une action de synchronisation qui est envoyée au {{domxref("ServiceWorkerGlobalScope")}} d'un ServiceWorker.
+- {{domxref("SyncManager")}} {{non-standard_inline}}
+  - : Fournit une interface pour l'enregistrement et la récupération des objets {{domxref("SyncRegistration")}}.
+- {{domxref("SyncRegistration")}} {{non-standard_inline}}
+  - : Fournit un objet pour la gestion d'une synchronisation en arrière-plan.
+- {{domxref("WindowClient") }}
+  - : Représente la portée d'un service worker client qui est un document dans le contexte d'un navigateur, contrôlé par un active worker. C'est un type spécial d'objet {{domxref("Client")}}, avec des propriété et des méthodes supplémentaires.
+
+## Spécifications
+
+| Spécification                                    | Statut                               | Commentaire          |
+| ------------------------------------------------ | ------------------------------------ | -------------------- |
+| {{SpecName('Service Workers', '')}} | {{Spec2('Service Workers')}} | Définition initiale. |
+
+## Voir aussi
+
+- [ServiceWorker Cookbook](https://serviceworke.rs)
+- [Utilisation des Service Workers](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers)
+- [Exemple basique de Service workers](https://github.com/mdn/sw-test)
+- [Is ServiceWorker ready?](https://jakearchibald.github.io/isserviceworkerready/)
+- [Promises](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise)
+- [Utilisation des web workers](/fr/docs/Utilisation_des_web_workers)
diff --git a/files/fr/web/api/service_worker_api/using_service_workers/index.md b/files/fr/web/api/service_worker_api/using_service_workers/index.md
index 1af137c1f5..5483936537 100644
--- a/files/fr/web/api/service_worker_api/using_service_workers/index.md
+++ b/files/fr/web/api/service_worker_api/using_service_workers/index.md
@@ -9,88 +9,85 @@ tags:
   - basics
 translation_of: Web/API/Service_Worker_API/Using_Service_Workers
 ---
-<p>{{ServiceWorkerSidebar}}</p>
+{{ServiceWorkerSidebar}}
 
-<p>{{ SeeCompatTable() }}</p>
+{{ SeeCompatTable() }}
 
-<p>Cet article fournit des informations pour bien débuter avec les service workers, en présentant une architecture de base, l'inscription d'un service worker, l'installation et l'activation d'un processus pour un nouveau service worker, la mise à jour d'un service worker, le contrôle du cache et la personnalisation des réponses, le tout dans le contexte d'une application de base disponible en mode déconnecté.</p>
+Cet article fournit des informations pour bien débuter avec les service workers, en présentant une architecture de base, l'inscription d'un service worker, l'installation et l'activation d'un processus pour un nouveau service worker, la mise à jour d'un service worker, le contrôle du cache et la personnalisation des réponses, le tout dans le contexte d'une application de base disponible en mode déconnecté.
 
-<h2 id="Le_préambule_aux_Service_Workers">Le préambule aux Service Workers</h2>
+## Le préambule aux Service Workers
 
-<p>La perte de connexion est un problème majeur auquel sont confrontés les utilisateurs du web depuis des années. La meilleure application web au monde produirait un bien mauvais effet si vous ne pouviez pas la télécharger. Il y a eu de nombreuses tentatives pour mettre en place des technologies susceptibles de résoudre ce problème, comme le montre notre page <a href="/fr/Apps/Build/Hors-ligne">Offline</a>, et certains problèmes ont été résolus. Mais le problème principal reste l'absence d'un mécanisme de contrôle global pour la mise en cache des ressources et la personnalisation des requêtes réseau.<br>
- <br>
- La première tentative— AppCache — semblait être une bonne idée parce qu'elle permettait de spécifier les ressources à mettre en cache de manière très simple. Cependant, elle faisait beaucoup de suppositions sur la manière de le mettre en place et échouait implacablement si votre application ne se pliait pas exactement à ces suppositions. Lisez <a href="http://alistapart.com/article/application-cache-is-a-douchebag">Application Cache is a Douchebag</a> de Jake Archibald pour plus de détails.</p>
+La perte de connexion est un problème majeur auquel sont confrontés les utilisateurs du web depuis des années. La meilleure application web au monde produirait un bien mauvais effet si vous ne pouviez pas la télécharger. Il y a eu de nombreuses tentatives pour mettre en place des technologies susceptibles de résoudre ce problème, comme le montre notre page [Offline](/fr/Apps/Build/Hors-ligne), et certains problèmes ont été résolus. Mais le problème principal reste l'absence d'un mécanisme de contrôle global pour la mise en cache des ressources et la personnalisation des requêtes réseau.
 
-<div class="note">
-<p><strong>Note :</strong> à partir de Firefox 44, lorsque <a href="/fr/docs/Web/HTML/Utiliser_Application_Cache">AppCache</a> est utilisé pour fournir un support déconnecté à une page, un message d'avertissement est alors affiché dans la console pour signaler aux développeurs d'utiliser plutôt les <a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Service workers</a> ({{bug("1204581")}}.)</p>
-</div>
+La première tentative— AppCache — semblait être une bonne idée parce qu'elle permettait de spécifier les ressources à mettre en cache de manière très simple. Cependant, elle faisait beaucoup de suppositions sur la manière de le mettre en place et échouait implacablement si votre application ne se pliait pas exactement à ces suppositions. Lisez [Application Cache is a Douchebag](http://alistapart.com/article/application-cache-is-a-douchebag) de Jake Archibald pour plus de détails.
 
-<p>Les service workers devraient finalement résoudre ces problèmes. La syntaxe du service Worker est plus complexe que celle de l'AppCache, mais en contrepartie vous pouvez utiliser JavaScript pour contrôler les comportements induits par votre cache local avec une granularité beaucoup plus fine, vous permettant ainsi d'adresser ce problème et beaucoup d'autres. Avec l'aide d'un Service Worker, vous pouvez facilement configurer une application pour d'abord utiliser des ressources mises en cache, fournissant ainsi une première expérience par défaut même en mode déconnecté, avant de récupérer davantage de données depuis le réseau (principe connu généralement sous le nom de <a href="http://offlinefirst.org/">Offline First</a>). Cette façon de faire est déjà disponible avec les applications natives, ce qui est l'une des raisons principales de la préférence accordée à ces applications plutôt qu'aux applications web.</p>
+> **Note :** à partir de Firefox 44, lorsque [AppCache](/fr/docs/Web/HTML/Utiliser_Application_Cache) est utilisé pour fournir un support déconnecté à une page, un message d'avertissement est alors affiché dans la console pour signaler aux développeurs d'utiliser plutôt les [Service workers](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers) ({{bug("1204581")}}.)
 
-<h2 id="Préparatifs_aux_Service_Workers">Préparatifs aux Service Workers</h2>
+Les service workers devraient finalement résoudre ces problèmes. La syntaxe du service Worker est plus complexe que celle de l'AppCache, mais en contrepartie vous pouvez utiliser JavaScript pour contrôler les comportements induits par votre cache local avec une granularité beaucoup plus fine, vous permettant ainsi d'adresser ce problème et beaucoup d'autres. Avec l'aide d'un Service Worker, vous pouvez facilement configurer une application pour d'abord utiliser des ressources mises en cache, fournissant ainsi une première expérience par défaut même en mode déconnecté, avant de récupérer davantage de données depuis le réseau (principe connu généralement sous le nom de [Offline First](http://offlinefirst.org/)). Cette façon de faire est déjà disponible avec les applications natives, ce qui est l'une des raisons principales de la préférence accordée à ces applications plutôt qu'aux applications web.
 
-<p>De nombreuses fonctionnalités des service workers sont désormais disponibles par défaut dans les plus récentes versions des navigateurs qui les supportent. Cependant, si vous constatez que le code de la démo ne fonctionne pas dans votre version actuelle, vous pourriez avoir besoin d'activer une configuration :</p>
+## Préparatifs aux Service Workers
 
-<ul>
- <li><strong>Firefox Nightly </strong>: rendez-vous sur <code>about:config</code> et configurer  <code>dom.serviceWorkers.enabled</code> à true; redémarrer le navigateur.</li>
- <li><strong>Chrome Canary </strong>: rendez-vous sur <code>chrome://flags</code> et activer <code>experimental-web-platform-features</code>; redémarrer le navigateur (à noter que certaines fonctionnalités sont désormais activées par défaut dans Chrome.)</li>
- <li><strong>Opera </strong>: rendez-vous sur <code>opera://flags</code> et activer <code>Support for ServiceWorker</code>; redémarrer le navigateur.</li>
-</ul>
+De nombreuses fonctionnalités des service workers sont désormais disponibles par défaut dans les plus récentes versions des navigateurs qui les supportent. Cependant, si vous constatez que le code de la démo ne fonctionne pas dans votre version actuelle, vous pourriez avoir besoin d'activer une configuration :
 
-<p>Vous aurez aussi besoin de servir votre code via HTTPS — les Service Workers sont contraints à s'exécuter au travers d'HTTPS pour des raisons de sécurité. GitHub est donc un bon endroit pour héberger des expérimentations, puisqu'il supporte HTTPS. Et pour faciliter le développement en local, le <strong>localhost </strong>est considéré comme une origine sécurisée.</p>
+- **Firefox Nightly** : rendez-vous sur `about:config` et configurer  `dom.serviceWorkers.enabled` à true; redémarrer le navigateur.
+- **Chrome Canary** : rendez-vous sur `chrome://flags` et activer `experimental-web-platform-features`; redémarrer le navigateur (à noter que certaines fonctionnalités sont désormais activées par défaut dans Chrome.)
+- **Opera** : rendez-vous sur `opera://flags` et activer `Support for ServiceWorker`; redémarrer le navigateur.
 
-<h2 id="Architecture_de_base">Architecture de base</h2>
+Vous aurez aussi besoin de servir votre code via HTTPS — les Service Workers sont contraints à s'exécuter au travers d'HTTPS pour des raisons de sécurité. GitHub est donc un bon endroit pour héberger des expérimentations, puisqu'il supporte HTTPS. Et pour faciliter le développement en local, le **localhost** est considéré comme une origine sécurisée.
 
-<p>Avec les service workers, les étapes suivantes sont généralement observées pour une configuration simple :</p>
+## Architecture de base
 
-<ol>
- <li>L'URL du service worker URL est récupérée et enregistrée via {{domxref("serviceWorkerContainer.register()")}}.</li>
- <li>En cas de succès, le service worker est exécuté dans un {{domxref("ServiceWorkerGlobalScope") }}; c'est en gros une sorte de contexte de worker spécial, fonctionnant hors du fil d'exécution du script principal, sans accès au DOM.</li>
- <li>Le service worker est désormais prêt à traiter des événements.</li>
- <li>Une tentative d'installation du worker a lieu lorsque les pages contrôlées par le service worker sont accédées par la suite. Un événement install est toujours le premier envoyé à un service worker (ça peut être le point de départ pour procéder au remplissage d'une base IndexedDB, et à la mise en cache de ressources du site). C'est tout à fait le même type de procédure que l'installation d'une application native ou Firefox OS — en mettant l'ensemble à disposition pour un usage déconnecté.</li>
- <li>Lorsque le gestionnaire <code>oninstall</code> se termine, on considère que le service worker est installé.</li>
- <li>L'étape suivante est l'activation. Lorsque le service worker est installé, il reçoit alors un événement activate. L'utilité première de <code>onactivate</code> est de nettoyer les ressources utilisées dans les versions précédentes du script du Service Worker.</li>
- <li>Le Service Worker contrôle désormais les pages, mais seulement celles ouvertes après que le <code>register()</code> ait réussi. Ainsi un document à sa création s'accompagne ou non d'un Service Worker et conserve cet état tout au long de sa durée de vie. Ainsi les documents devront être rechargés pour réellement être contrôlés.</li>
-</ol>
+Avec les service workers, les étapes suivantes sont généralement observées pour une configuration simple :
 
-<p><img alt="" src="sw-lifecycle.png"></p>
+1.  L'URL du service worker URL est récupérée et enregistrée via {{domxref("serviceWorkerContainer.register()")}}.
+2.  En cas de succès, le service worker est exécuté dans un {{domxref("ServiceWorkerGlobalScope") }}; c'est en gros une sorte de contexte de worker spécial, fonctionnant hors du fil d'exécution du script principal, sans accès au DOM.
+3.  Le service worker est désormais prêt à traiter des événements.
+4.  Une tentative d'installation du worker a lieu lorsque les pages contrôlées par le service worker sont accédées par la suite. Un événement install est toujours le premier envoyé à un service worker (ça peut être le point de départ pour procéder au remplissage d'une base IndexedDB, et à la mise en cache de ressources du site). C'est tout à fait le même type de procédure que l'installation d'une application native ou Firefox OS — en mettant l'ensemble à disposition pour un usage déconnecté.
+5.  Lorsque le gestionnaire `oninstall` se termine, on considère que le service worker est installé.
+6.  L'étape suivante est l'activation. Lorsque le service worker est installé, il reçoit alors un événement activate. L'utilité première de `onactivate` est de nettoyer les ressources utilisées dans les versions précédentes du script du Service Worker.
+7.  Le Service Worker contrôle désormais les pages, mais seulement celles ouvertes après que le `register()` ait réussi. Ainsi un document à sa création s'accompagne ou non d'un Service Worker et conserve cet état tout au long de sa durée de vie. Ainsi les documents devront être rechargés pour réellement être contrôlés.
 
-<h3 id="Promesses">Promesses</h3>
+![](sw-lifecycle.png)
 
-<p><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise">Les Promesses</a> sont un puissant mécanisme pour exécuter des opérations asynchrones, dont le succès de l'une dépend du succès de l'autre. Ce mécanisme est au coeur du fonctionnement des service workers.<br>
- <br>
- Les promesses peuvent effectuer bien des choses, mais pour le moment il suffit de savoir que si une promesse est retournée, on peut lui attacher un <code>.then()</code> et inclure des fonctions de rappel en cas de succès, d'échec, etc., ou bien un <code>.catch()</code> et inclure une fonction de rappel en cas d'échec.</p>
+### Promesses
 
-<p>Comparons la structure d'une fonction classique de rappel synchrone à la promesse asynchrone équivalente.</p>
+[Les Promesses](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) sont un puissant mécanisme pour exécuter des opérations asynchrones, dont le succès de l'une dépend du succès de l'autre. Ce mécanisme est au coeur du fonctionnement des service workers.
 
-<h4 id="sync">sync</h4>
+Les promesses peuvent effectuer bien des choses, mais pour le moment il suffit de savoir que si une promesse est retournée, on peut lui attacher un `.then()` et inclure des fonctions de rappel en cas de succès, d'échec, etc., ou bien un `.catch()` et inclure une fonction de rappel en cas d'échec.
 
-<pre class="brush: js">try {
+Comparons la structure d'une fonction classique de rappel synchrone à la promesse asynchrone équivalente.
+
+#### sync
+
+```js
+try {
   var value = myFunction();
   console.log(value);
 } catch(err) {
   console.log(err);
-}</pre>
+}
+```
 
-<h4 id="async">async</h4>
+#### async
 
-<pre class="brush: js">myFunction().then(function(value) {
+```js
+myFunction().then(function(value) {
   console.log(value);
   }).catch(function(err) {
   console.log(err);
-});</pre>
+});
+```
+
+Dans le premier exemple, on doit attendre que l'exécution de `myFunction()` retourne `value` avant de poursuivre l'exécution de tout autre code. Dans le second exemple, `myFunction()` retourne une promesse pour `value`, ainsi le reste du code peut continuer à s'exécuter. Lorsque la promesse est résolue, le code à l'intérieur de `then` s'exécutera, de manière asynchrone.
 
-<p>Dans le premier exemple, on doit attendre que l'exécution de <code>myFunction()</code> retourne <code>value</code> avant de poursuivre l'exécution de tout autre code. Dans le second exemple, <code>myFunction()</code> retourne une promesse pour <code>value</code>, ainsi le reste du code peut continuer à s'exécuter. Lorsque la promesse est résolue, le code à l'intérieur de <code>then</code> s'exécutera, de manière asynchrone.<br>
- <br>
- Qu'en est-il sur un exemple concret — qu'en est-il si, lors d'un chargement dynamique d'images, on veut être sûre qu'elles soient bien chargées avant de les afficher ? C'est une démarche standard à adopter, mais parfois problématique. On peut utiliser <code>.onload</code> pour n'afficher l'image qu'après qu'elle soit chargée, mais qu'en est-il des événements qui démarrent avant qu'on ne commence à les écouter ? On pourrait essayer un contournement en utilisant <code>.complete</code>, mais ce n'est toujours pas infaillible, et que faire en cas d'images multiples ? Et, ummm, tout cela reste synchrone, et bloque donc le fil d'exécution principal.<br>
- <br>
- Alternativement, on pourrait faire notre propre promesse pour gérer ce genre de cas. (Voir l'exemple du <a href="https://github.com/mdn/promises-test">test de promesses</a> pour le code source, ou <a href="https://mdn.github.io/promises-test/">le voir fonctionner en direct</a>.)</p>
+Qu'en est-il sur un exemple concret — qu'en est-il si, lors d'un chargement dynamique d'images, on veut être sûre qu'elles soient bien chargées avant de les afficher ? C'est une démarche standard à adopter, mais parfois problématique. On peut utiliser `.onload` pour n'afficher l'image qu'après qu'elle soit chargée, mais qu'en est-il des événements qui démarrent avant qu'on ne commence à les écouter ? On pourrait essayer un contournement en utilisant `.complete`, mais ce n'est toujours pas infaillible, et que faire en cas d'images multiples ? Et, ummm, tout cela reste synchrone, et bloque donc le fil d'exécution principal.
 
-<div class="note">
-<p><strong>Note :</strong> la mise en place d'un véritable service worker utiliserait la mise en cache et onfetch plutôt que l'API obsolète XMLHttpRequest. Ces fonctionnalités ne sont pas utilisées ici afin de se concentrer sur la compréhension des promesses.</p>
-</div>
+Alternativement, on pourrait faire notre propre promesse pour gérer ce genre de cas. (Voir l'exemple du [test de promesses](https://github.com/mdn/promises-test) pour le code source, ou [le voir fonctionner en direct](https://mdn.github.io/promises-test/).)
 
-<pre class="brush: js">function imgLoad(url) {
+> **Note :** la mise en place d'un véritable service worker utiliserait la mise en cache et onfetch plutôt que l'API obsolète XMLHttpRequest. Ces fonctionnalités ne sont pas utilisées ici afin de se concentrer sur la compréhension des promesses.
+
+```js
+function imgLoad(url) {
   return new Promise(function(resolve, reject) {
     var request = new XMLHttpRequest();
     request.open('GET', url);
@@ -110,13 +107,15 @@ translation_of: Web/API/Service_Worker_API/Using_Service_Workers
 
     request.send();
   });
-}</pre>
+}
+```
 
-<p>On retourne une nouvelle promesse en utilisant le constructeur <code>Promise()</code>, qui prend en argument une fonction de rappel avec les paramètres <code>resolve</code> et <code>reject</code>. Quelque part dans la fonction, on a besoin de définir à quoi correspond pour la promesse d'être résolue avec succès ou bien d'être rejetée — dans ce cas, retourner un statut 200 OK status ou pas — et donc appeler <code>resolve</code> en cas de succès, ou <code>reject</code> en cas d'échec. Le reste du contenu de cette fonction correspond à une utilisation plutôt classique d'XHR, et n'appelle pas de commentaires particuliers pour le moment.</p>
+On retourne une nouvelle promesse en utilisant le constructeur `Promise()`, qui prend en argument une fonction de rappel avec les paramètres `resolve` et `reject`. Quelque part dans la fonction, on a besoin de définir à quoi correspond pour la promesse d'être résolue avec succès ou bien d'être rejetée — dans ce cas, retourner un statut 200 OK status ou pas — et donc appeler `resolve` en cas de succès, ou `reject` en cas d'échec. Le reste du contenu de cette fonction correspond à une utilisation plutôt classique d'XHR, et n'appelle pas de commentaires particuliers pour le moment.
 
-<p>Lorsqu'on appelle la fonction <code>imgLoad()</code>, on l'appelle avec l'url de l'image à charger, comme on pourrait s'en douter, mais le reste du code est un peu différent :</p>
+Lorsqu'on appelle la fonction `imgLoad()`, on l'appelle avec l'url de l'image à charger, comme on pourrait s'en douter, mais le reste du code est un peu différent :
 
-<pre class="brush: js">var body = document.querySelector('body');
+```js
+var body = document.querySelector('body');
 var myImage = new Image();
 
 imgLoad('myLittleVader.jpg').then(function(response) {
@@ -125,44 +124,40 @@ imgLoad('myLittleVader.jpg').then(function(response) {
   body.appendChild(myImage);
 }, function(Error) {
   console.log(Error);
-});</pre>
+});
+```
 
-<p>A la fin de l'appel de la fonction, on ajoute la méthode <code>then()</code> de la promesse, qui contient deux fonctions — la première est exécutée lorsque la promesse est résolue avec succès, et la seconde est appelée lorsque la promesse est rejetée. Dans le cas d'une résolution, on affiche l'image dans : <code>myImage</code> et on l'ajoute au <code>body</code> (son argument est la valeur <code>request.response</code> contenue dans la méthode <code>resolve</code> de la promesse); en cas de rejet, on retourne une erreur dans la console.</p>
+A la fin de l'appel de la fonction, on ajoute la méthode `then()` de la promesse, qui contient deux fonctions — la première est exécutée lorsque la promesse est résolue avec succès, et la seconde est appelée lorsque la promesse est rejetée. Dans le cas d'une résolution, on affiche l'image dans : `myImage` et on l'ajoute au `body` (son argument est la valeur `request.response` contenue dans la méthode `resolve` de la promesse); en cas de rejet, on retourne une erreur dans la console.
 
-<p>Le tout se déroule de manière asynchrone.</p>
+Le tout se déroule de manière asynchrone.
 
-<div class="note">
-<p><strong>Note :</strong> il est possible d'assembler des appels de promesse, par exemple:<br>
- <code>myPromise().then(success, failure).then(success).catch(failure);</code></p>
-</div>
+> **Note :** il est possible d'assembler des appels de promesse, par exemple:
+> `myPromise().then(success, failure).then(success).catch(failure);`
 
-<div class="note">
-<p><strong>Note :</strong> pour en savoir plus sur les promesses, consulter l'excellent article de Jake Archibald <a href="http://www.html5rocks.com/en/tutorials/es6/promises/">JavaScript Promises: there and back again</a>.</p>
-</div>
+> **Note :** pour en savoir plus sur les promesses, consulter l'excellent article de Jake Archibald [JavaScript Promises: there and back again](http://www.html5rocks.com/en/tutorials/es6/promises/).
 
-<h2 id="Démo_de_service_workers">Démo de service workers</h2>
+## Démo de service workers
 
-<p>Pour illustrer quelques principes de base de l'enregistrement et de l'installation d'un service worker, voici une simple démo appelée <a href="https://github.com/mdn/sw-test">sw-test</a>, qui présente juste une galerie d'images Star wars Lego. Elle utilise une fonction pilotée par une promesse pour lire les données d'une image à partir d'un objet JSON et charger les images en utilisant Ajax, avant d'afficher les images en bas de page. Les choses restent statiques et simples pour le moment. Elle enregistre aussi, installe et active un service worker, et lorsque la spécification est davantage supportée par les navigateurs, elle met en cache tous les fichiers requis pour un fonctionnement déconnecté !</p>
+Pour illustrer quelques principes de base de l'enregistrement et de l'installation d'un service worker, voici une simple démo appelée [sw-test](https://github.com/mdn/sw-test), qui présente juste une galerie d'images Star wars Lego. Elle utilise une fonction pilotée par une promesse pour lire les données d'une image à partir d'un objet JSON et charger les images en utilisant Ajax, avant d'afficher les images en bas de page. Les choses restent statiques et simples pour le moment. Elle enregistre aussi, installe et active un service worker, et lorsque la spécification est davantage supportée par les navigateurs, elle met en cache tous les fichiers requis pour un fonctionnement déconnecté !
 
-<p><img alt="" src="demo-screenshot.png"></p>
+![](demo-screenshot.png)
 
-<p>Vous pouvez consulter le <a href="https://github.com/mdn/sw-test/">code source sur GitHub</a>, et <a href="https://mdn.github.io/sw-test/">voir l'exemple en direct</a>. Le bout de code qui sera appelé est la promesse (voir <a href="https://github.com/mdn/sw-test/blob/gh-pages/app.js#L17-L42">app.js lines 17-42</a>), qui est une version modifiée du code présenté ci-dessus, dans la <a href="https://github.com/mdn/promises-test">démo du test de promesses</a>. Il en diffère de la façon suivante :</p>
+Vous pouvez consulter le [code source sur GitHub](https://github.com/mdn/sw-test/), et [voir l'exemple en direct](https://mdn.github.io/sw-test/). Le bout de code qui sera appelé est la promesse (voir [app.js lines 17-42](https://github.com/mdn/sw-test/blob/gh-pages/app.js#L17-L42)), qui est une version modifiée du code présenté ci-dessus, dans la [démo du test de promesses](https://github.com/mdn/promises-test). Il en diffère de la façon suivante :
 
-<ol>
- <li>Dans l'original, on considère l'URL d'une image à charger. Dans cette version, on passe un fragment JSON contenant toutes les données d'une seule image (voir à quoi il ressemble dans <a href="https://github.com/mdn/sw-test/blob/gh-pages/image-list.js">image-list.js</a>). C'est parce que toutes les données pour que chaque promesse soit résolue doivent être passées avec la promesse, que c'est asynchrone. Si l'on passe juste l'url, et si l'on essaie alors d'accéder aux autres éléments dans le JSON séparément lorsqu'on itère plus tard avec la boucle <code>for()</code>, cela ne marchera pas, puisque la promesse ne se résolvera pas en même temps que les itérations sont faites (c'est un mécanisme synchrone.)</li>
- <li>La promesse est résolue en réalité avec un tableau, puisqu'on veut rendre le blob de l'image chargée disponible à la fonction de résolution plus tard dans le code, mais aussi le nom de l'image, les crédits et le texte alternatif (voir <a href="https://github.com/mdn/sw-test/blob/gh-pages/app.js#L26-L29">app.js lines 26-29</a>). Les promesses se résolvent seulement avec un seul argument, aussi si l'on souhaite la résoudre avec des valeurs multiples, on a besoin d'utiliser un tableau ou un objet.</li>
- <li>Pour accéder aux valeurs de la promesse résolue, on accède alors à cette fonction comme on peut s'y attendre (voir <a href="https://github.com/mdn/sw-test/blob/gh-pages/app.js#L55-L59">app.js lines 55-59</a>.) Cela peut sembler un peu étrange au premier abord, mais c'est la manière dont les promesses fonctionnent.</li>
-</ol>
+1.  Dans l'original, on considère l'URL d'une image à charger. Dans cette version, on passe un fragment JSON contenant toutes les données d'une seule image (voir à quoi il ressemble dans [image-list.js](https://github.com/mdn/sw-test/blob/gh-pages/image-list.js)). C'est parce que toutes les données pour que chaque promesse soit résolue doivent être passées avec la promesse, que c'est asynchrone. Si l'on passe juste l'url, et si l'on essaie alors d'accéder aux autres éléments dans le JSON séparément lorsqu'on itère plus tard avec la boucle `for()`, cela ne marchera pas, puisque la promesse ne se résolvera pas en même temps que les itérations sont faites (c'est un mécanisme synchrone.)
+2.  La promesse est résolue en réalité avec un tableau, puisqu'on veut rendre le blob de l'image chargée disponible à la fonction de résolution plus tard dans le code, mais aussi le nom de l'image, les crédits et le texte alternatif (voir [app.js lines 26-29](https://github.com/mdn/sw-test/blob/gh-pages/app.js#L26-L29)). Les promesses se résolvent seulement avec un seul argument, aussi si l'on souhaite la résoudre avec des valeurs multiples, on a besoin d'utiliser un tableau ou un objet.
+3.  Pour accéder aux valeurs de la promesse résolue, on accède alors à cette fonction comme on peut s'y attendre (voir [app.js lines 55-59](https://github.com/mdn/sw-test/blob/gh-pages/app.js#L55-L59).) Cela peut sembler un peu étrange au premier abord, mais c'est la manière dont les promesses fonctionnent.
 
-<h2 id="Introduction_aux_service_workers">Introduction aux service workers</h2>
+## Introduction aux service workers
 
-<p>Maintenant, c'est au tour des service workers !</p>
+Maintenant, c'est au tour des service workers !
 
-<h3 id="Enregistrer_un_worker">Enregistrer un worker</h3>
+### Enregistrer un worker
 
-<p>Le premier bloc de code dans le fichier JavaScript de l'application — <code>app.js</code> — se présente comme suit. C'est le point d'entrée pour utiliser des service workers.</p>
+Le premier bloc de code dans le fichier JavaScript de l'application — `app.js` — se présente comme suit. C'est le point d'entrée pour utiliser des service workers.
 
-<pre class="brush: js">if ('serviceWorker' in navigator) {
+```js
+if ('serviceWorker' in navigator) {
   navigator.serviceWorker.register('/sw-test/sw.js', { scope: '/sw-test/' }).then(function(reg) {
     // registration worked
     console.log('Registration succeeded. Scope is ' + reg.scope);
@@ -170,51 +165,43 @@ imgLoad('myLittleVader.jpg').then(function(response) {
     // registration failed
     console.log('Registration failed with ' + error);
   });
-};</pre>
+};
+```
+
+1.  Le bloc extérieur effectue un test de détection de fonctionnalité pour s'assurer que les service workers sont supportés avant d'essayer d'en enregistrer un.
+2.  Ensuite, la fonction {{domxref("ServiceWorkerContainer.register()") }} est utilisée pour enregistrer le service worker de ce site, qui est juste un fichier JavaScript présent au sein de notre application (à noter qu'il s'agit de l'URL relative du fichier par rapport à l'origine, et non seulement le fichier JS qui le référence.)
+3.  Le paramètre `scope` est optionnel, et peut être utilisé pour spécifier le sous-ensemble du contenu qui doit être soumis au contrôle du service worker. Dans ce cas, on a spécifié '`/sw-test/'`, ce qui signifie tous les contenus présents sous l'origine de l'application. S'il n'est pas précisé, il correspondra de toute façon par défaut à cette valeur; il a été explicitement spécifié ici à titre d'illustration.
+4.  La fonction `.then()` de la promesse est utilisée pour chaîner un traitement en cas de succès à la structure de la promesse. Lorsque la promesse est résolue avec succès, le code qu'elle contient est exécuté.
+5.  Finalement, une fonction `.catch()` est chaînée à la fin, qui s'exécutera si la promesse est rejetée.
+
+A ce stade un service worker est enregistré, qui s'exécute dans le contexte d'un worker, et n'a donc aucun accès au DOM. Le code s'exécute ainsi dans le service worker, extérieurement aux pages normales dont il contrôle le chargement.
 
-<ol>
- <li>Le bloc extérieur effectue un test de détection de fonctionnalité pour s'assurer que les service workers sont supportés avant d'essayer d'en enregistrer un.</li>
- <li>Ensuite, la fonction {{domxref("ServiceWorkerContainer.register()") }} est utilisée pour enregistrer le service worker de ce site, qui est juste un fichier JavaScript présent au sein de notre application (à noter qu'il s'agit de l'URL relative du fichier par rapport à l'origine, et non seulement le fichier JS qui le référence.)</li>
- <li>Le paramètre <code>scope</code> est optionnel, et peut être utilisé pour spécifier le sous-ensemble du contenu qui doit être soumis au contrôle du service worker. Dans ce cas, on a spécifié '<code>/sw-test/'</code>, ce qui signifie tous les contenus présents sous l'origine de l'application. S'il n'est pas précisé, il correspondra de toute façon par défaut à cette valeur; il a été explicitement spécifié ici à titre d'illustration.</li>
- <li>La fonction <code>.then()</code> de la promesse est utilisée pour chaîner un traitement en cas de succès à la structure de la promesse. Lorsque la promesse est résolue avec succès, le code qu'elle contient est exécuté.</li>
- <li>Finalement, une fonction <code>.catch()</code> est chaînée à la fin, qui s'exécutera si la promesse est rejetée.</li>
-</ol>
+Un seul service worker peut contrôler de nombreuses pages. Chaque fois qu'une page au sein du scope est chargée, le service worker est installé et opère sur la page. Attention, il faut faire un usage prudent des variables globales dans le script du service worker : chaque page ne dispose pas de son propre et unique worker.
 
-<p>A ce stade un service worker est enregistré, qui s'exécute dans le contexte d'un worker, et n'a donc aucun accès au DOM. Le code s'exécute ainsi dans le service worker, extérieurement aux pages normales dont il contrôle le chargement.<br>
- <br>
- Un seul service worker peut contrôler de nombreuses pages. Chaque fois qu'une page au sein du scope est chargée, le service worker est installé et opère sur la page. Attention, il faut faire un usage prudent des variables globales dans le script du service worker : chaque page ne dispose pas de son propre et unique worker.</p>
+> **Note :** un service worker fonctionne comme un serveur proxy, permettant de modifier les requêtes et les réponses, de les remplacer par des éléments de son propre cache, et bien plus.
 
-<div class="note">
-<p><strong>Note :</strong> un service worker fonctionne comme un serveur proxy, permettant de modifier les requêtes et les réponses, de les remplacer par des éléments de son propre cache, et bien plus.</p>
-</div>
+> **Note :** une chose importante à savoir au sujet des service workers est que si la détection de fonctionnalité est utilisée comme ci-dessus, les navigateurs qui ne supportent pas les service workers peuvent simplement utiliser l'application de la manière normalement attendue. De plus, si vous utilisez AppCache et SW sur une page, les navigateurs qui ne supportent pas SW mais supportent AppCache l'utiliseront, et les navigateurs qui supportent les deux ignoreront AppCache au profit de SW.
 
-<div class="note">
-<p><strong>Note :</strong> une chose importante à savoir au sujet des service workers est que si la détection de fonctionnalité est utilisée comme ci-dessus, les navigateurs qui ne supportent pas les service workers peuvent simplement utiliser l'application de la manière normalement attendue. De plus, si vous utilisez AppCache et SW sur une page, les navigateurs qui ne supportent pas SW mais supportent AppCache l'utiliseront, et les navigateurs qui supportent les deux ignoreront AppCache au profit de SW.</p>
-</div>
+#### Pourquoi mon service worker échoue à s'enregistrer ?
 
-<h4 id="Pourquoi_mon_service_worker_échoue_à_senregistrer">Pourquoi mon service worker échoue à s'enregistrer ?</h4>
+Ce pourrait être pour les raisons suivantes :
 
-<p>Ce pourrait être pour les raisons suivantes :</p>
+1.  L'application ne fonctionne pas au travers d'HTTPS
+2.  Le chemin du fichier du service worker file est syntaxiquement incorrect — il a besoin d'être exprimé relativement à l'origine, et non pas par rapport au répertoire racine. Dans l'exemple, le worker a comme emplacement `https://mdn.github.io/sw-test/sw.js`, et la racine de l'application est `https://mdn.github.io/sw-test/`. Mais la syntaxe du chemin s'écrit `/sw-test/sw.js`, `et non /sw.js`.
+3.  Le service worker considéré se trouve sur une origine différente de celle de l'application. Ce qui n'est pas permis.
 
-<ol>
- <li>L'application ne fonctionne pas au travers d'HTTPS</li>
- <li>Le chemin du fichier du service worker file est syntaxiquement incorrect — il a besoin d'être exprimé relativement à l'origine, et non pas par rapport au répertoire racine. Dans l'exemple, le worker a comme emplacement <code>https://mdn.github.io/sw-test/sw.js</code>, et la racine de l'application est <code>https://mdn.github.io/sw-test/</code>. Mais la syntaxe du chemin s'écrit <code>/sw-test/sw.js</code>, <code>et non /sw.js</code>.</li>
- <li>Le service worker considéré se trouve sur une origine différente de celle de l'application. Ce qui n'est pas permis.</li>
-</ol>
+### Installer et activer : remplir le cache
 
-<h3 id="Installer_et_activer_remplir_le_cache">Installer et activer : remplir le cache</h3>
+Après l'enregistrement du service worker, le navigateur tente d'installer puis d'activer le service worker sur la page ou le site.
 
-<p>Après l'enregistrement du service worker, le navigateur tente d'installer puis d'activer le service worker sur la page ou le site.<br>
- <br>
- L'événement install est déclenché lorsqu'une installation se termine avec succès. L'événement install est généralement utilisé pour remplir le cache local du navigateur avec les ressources nécessaires pour faire fonctionner l'application en mode déconnecté. A cet effet, la toute nouvelle API de stockage est utilisée — {{domxref("cache")}} — un espace global au niveau du service worker qui permet de stocker les ressources fournies par les réponses, et indexées par leurs requêtes. Cette API fonctionne d'une manière similaire au cache standard du navigateur, mais le cache demeure spécifique au domaine. Il persiste jusqu'à ce qu'il en soit décidé autrement — de nouveau, le contrôle reste total.</p>
+L'événement install est déclenché lorsqu'une installation se termine avec succès. L'événement install est généralement utilisé pour remplir le cache local du navigateur avec les ressources nécessaires pour faire fonctionner l'application en mode déconnecté. A cet effet, la toute nouvelle API de stockage est utilisée — {{domxref("cache")}} — un espace global au niveau du service worker qui permet de stocker les ressources fournies par les réponses, et indexées par leurs requêtes. Cette API fonctionne d'une manière similaire au cache standard du navigateur, mais le cache demeure spécifique au domaine. Il persiste jusqu'à ce qu'il en soit décidé autrement — de nouveau, le contrôle reste total.
 
-<div class="note">
-<p><strong>Note :</strong> L'API Cache n'est pas supportée par tous les navigateurs. (Voir la section {{anch("Compatibilité des navigateurs")}} pour plus d'informations.) Pour l'utiliser à l'heure actuelle, on peut envisager un polyfill comme celui fournit par la <a href="https://github.com/Polymer/topeka/blob/master/sw.js">démo Topeka de Google</a>, ou peut-être stocker les ressources dans <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a>.</p>
-</div>
+> **Note :** L'API Cache n'est pas supportée par tous les navigateurs. (Voir la section {{anch("Compatibilité des navigateurs")}} pour plus d'informations.) Pour l'utiliser à l'heure actuelle, on peut envisager un polyfill comme celui fournit par la [démo Topeka de Google](https://github.com/Polymer/topeka/blob/master/sw.js), ou peut-être stocker les ressources dans [IndexedDB](/en-US/docs/Web/API/IndexedDB_API).
 
-<p>Commençons cette section par l'examen d'un exemple de code — c'est le <a href="https://github.com/mdn/sw-test/blob/gh-pages/sw.js#L1-L18">premier bloc présent dans le service worker</a>:</p>
+Commençons cette section par l'examen d'un exemple de code — c'est le [premier bloc présent dans le service worker](https://github.com/mdn/sw-test/blob/gh-pages/sw.js#L1-L18):
 
-<pre class="brush: js">this.addEventListener('install', function(event) {
+```js
+this.addEventListener('install', function(event) {
   event.waitUntil(
     caches.open('v1').then(function(cache) {
       return cache.addAll([
@@ -231,101 +218,105 @@ imgLoad('myLittleVader.jpg').then(function(response) {
       ]);
     })
   );
-});</pre>
+});
+```
 
-<ol>
- <li>Un écouteur d'événement <code>install</code> est d'abord ajouté au service worker (d'où le  <code>this</code>), puis une méthode {{domxref("ExtendableEvent.waitUntil()") }} est chaînée à l'événement — cela garantit que le Service Worker ne s'installera pas tant que le code à l'intérieur de <code>waitUntil()</code> n'a pas été exécuté avec succès.</li>
- <li>A l'intérieur de <code>waitUntil()</code> la méthode <a href="/en-US/docs/Web/API/CacheStorage/open"><code>caches.open()</code></a> est utilisée pour créer un nouveau cache appelé <code>v1</code>, ce qui constitue la version 1 du cache de ressources de notre site. Cette fonction retourne une promesse lorsque le cache est créé; une fois résolue, est appelée une fonction qui appelle elle-même <code>addAll()</code> sur le cache créé, avec pour paramètre un tableau d'URLs relatives à l'origine correspondant aux ressources à mettre en cache.</li>
- <li>Si la promesse est rejetée, l'installation échoue, et le worker ne fait rien de plus. Le code peut être alors corrigé et l'opération retentée la prochaine fois que l'enregistrement survient.</li>
- <li>Après une installation couronnée de succès, le service worker est activé. Cela ne fait pas une grande différence  la première fois que le service worker est installé/activé, mais cela fait plus sens lorsque le service worker est mis à jour (voir la section {{anch("Updating your service worker") }} plus bas.)</li>
-</ol>
+1.  Un écouteur d'événement `install` est d'abord ajouté au service worker (d'où le  `this`), puis une méthode {{domxref("ExtendableEvent.waitUntil()") }} est chaînée à l'événement — cela garantit que le Service Worker ne s'installera pas tant que le code à l'intérieur de `waitUntil()` n'a pas été exécuté avec succès.
+2.  A l'intérieur de `waitUntil()` la méthode [`caches.open()`](/en-US/docs/Web/API/CacheStorage/open) est utilisée pour créer un nouveau cache appelé `v1`, ce qui constitue la version 1 du cache de ressources de notre site. Cette fonction retourne une promesse lorsque le cache est créé; une fois résolue, est appelée une fonction qui appelle elle-même `addAll()` sur le cache créé, avec pour paramètre un tableau d'URLs relatives à l'origine correspondant aux ressources à mettre en cache.
+3.  Si la promesse est rejetée, l'installation échoue, et le worker ne fait rien de plus. Le code peut être alors corrigé et l'opération retentée la prochaine fois que l'enregistrement survient.
+4.  Après une installation couronnée de succès, le service worker est activé. Cela ne fait pas une grande différence  la première fois que le service worker est installé/activé, mais cela fait plus sens lorsque le service worker est mis à jour (voir la section {{anch("Updating your service worker") }} plus bas.)
 
-<div class="note">
-<p><strong>Note :</strong> <a href="/fr/docs/Web/API/Web_Storage_API">localStorage</a> fonctionne de la même façon que le cache du service worker, mais de manière synchrone, et il n'est donc pas autorisé dans les service workers.</p>
-</div>
+> **Note :** [localStorage](/fr/docs/Web/API/Web_Storage_API) fonctionne de la même façon que le cache du service worker, mais de manière synchrone, et il n'est donc pas autorisé dans les service workers.
 
-<div class="note">
-<p><strong>Note :</strong> <a href="/fr/docs/Web/API/API_IndexedDB">IndexedDB</a> peut être utilisé dans un service worker pour le stockage des donnés si nécessaire.</p>
-</div>
+> **Note :** [IndexedDB](/fr/docs/Web/API/API_IndexedDB) peut être utilisé dans un service worker pour le stockage des donnés si nécessaire.
 
-<h3 id="Réponses_personnalisées_aux_requêtes">Réponses personnalisées aux requêtes</h3>
+### Réponses personnalisées aux requêtes
 
-<p>Une fois que les ressources du site sont mises en cache, les service workers doivent savoir quoi faire de ce contenu en cache. L'événement <code>fetch</code> permet de gérer cela facilement.</p>
+Une fois que les ressources du site sont mises en cache, les service workers doivent savoir quoi faire de ce contenu en cache. L'événement `fetch` permet de gérer cela facilement.
 
-<p>Un événement <code>fetch</code> se déclenche à chaque fois qu'une ressource contrôlée par un service worker est retournée, ce qui inclut les documents à l'intérieur du contour spécifié, et toute ressource référencée dans ces documents (par exemple <code>si index.html</code> effectue une requête vers un autre domaine pour l'insertion d'une image, cela se fait encore au travers de son service worker.)</p>
+Un événement `fetch` se déclenche à chaque fois qu'une ressource contrôlée par un service worker est retournée, ce qui inclut les documents à l'intérieur du contour spécifié, et toute ressource référencée dans ces documents (par exemple `si index.html` effectue une requête vers un autre domaine pour l'insertion d'une image, cela se fait encore au travers de son service worker.)
 
-<p>On peut attacher un écouteur de l'événement <code>fetch</code> au service worker, puis appeler la méthode <code>respondWith()</code> sur l'événement pour détourner les réponses HTTP et les mettre à jour en leur jetant un sort particulier.</p>
+On peut attacher un écouteur de l'événement `fetch` au service worker, puis appeler la méthode `respondWith()` sur l'événement pour détourner les réponses HTTP et les mettre à jour en leur jetant un sort particulier.
 
-<pre class="brush: js">this.addEventListener('fetch', function(event) {
+```js
+this.addEventListener('fetch', function(event) {
   event.respondWith(
     // la magie opère ici
   );
-});</pre>
+});
+```
 
-<p>On peut déjà simplement répondre avec la ressource en cache dont l'url correspond à celle de la requête réseau, dans chaque cas :</p>
+On peut déjà simplement répondre avec la ressource en cache dont l'url correspond à celle de la requête réseau, dans chaque cas :
 
-<pre class="brush: js">this.addEventListener('fetch', function(event) {
+```js
+this.addEventListener('fetch', function(event) {
   event.respondWith(
     caches.match(event.request)
   );
-});</pre>
+});
+```
 
-<p><code>caches.match(event.request)</code> permet de mettre en correspondance chaque ressource demandée sur le réseau avec la ressource équivalente en cache, si elle se trouve être disponible. La comparaison est effectuée via l'url et diverses en-têtes, comme habituellement avec des requêtes HTTP normales.</p>
+`caches.match(event.request)` permet de mettre en correspondance chaque ressource demandée sur le réseau avec la ressource équivalente en cache, si elle se trouve être disponible. La comparaison est effectuée via l'url et diverses en-têtes, comme habituellement avec des requêtes HTTP normales.
 
-<p>Voici quelques autres options disponibles pour que la magie opère (voir la <a href="/fr/docs/Web/API/Fetch_API">documentation de l'API Fetch </a>pour plus d'informations sur les objets {{domxref("Request")}} et {{domxref("Response")}}.)</p>
+Voici quelques autres options disponibles pour que la magie opère (voir la [documentation de l'API Fetch ](/fr/docs/Web/API/Fetch_API)pour plus d'informations sur les objets {{domxref("Request")}} et {{domxref("Response")}}.)
+
+1.  Le constructeur `{{domxref("Response.Response","Response()")}}` permet de créer une réponse personnalisée. Dans cet exemple, une chaîne de caractères est simplement retournée :
+
+    ```js
+    new Response('Hello from your friendly neighbourhood service worker!');
+    ```
+
+2.  La `Response` plus complexe ci-dessous montre qu'il est possible de passer optionnellement un ensemble d'en-têtes avec la réponse, émulant ainsi des en-têtes de réponse HTTP standards. Ici, on signale au navigateur quel est le type de contenu de notre réponse artificielle :
+
+    ```js
+    new Response('<p>Hello from your friendly neighbourhood service worker!</p>', {
+      headers: { 'Content-Type': 'text/html' }
+    })
+    ```
 
-<ol>
- <li>
-  <p>Le constructeur <code>{{domxref("Response.Response","Response()")}}</code> permet de créer une réponse personnalisée. Dans cet exemple, une chaîne de caractères est simplement retournée :</p>
+3.  Si une correspondance n'est pas trouvée en cache, on peut indiquer simplement au navigateur d'effectuer ({{domxref("GlobalFetch.fetch","fetch")}}) la requête réseau par défaut pour cette ressource, afin de récupérer cette nouvelle ressource sur le réseau si disponible :
 
-  <pre class="brush: js">new Response('Hello from your friendly neighbourhood service worker!');</pre>
- </li>
- <li>
-  <p>La <code>Response</code> plus complexe ci-dessous montre qu'il est possible de passer optionnellement un ensemble d'en-têtes avec la réponse, émulant ainsi des en-têtes de réponse HTTP standards. Ici, on signale au navigateur quel est le type de contenu de notre réponse artificielle :</p>
+    ```js
+    fetch(event.request)
+    ```
 
-  <pre class="brush: js">new Response('&lt;p&gt;Hello from your friendly neighbourhood service worker!&lt;/p&gt;', {
-  headers: { 'Content-Type': 'text/html' }
-})</pre>
- </li>
- <li>
-  <p>Si une correspondance n'est pas trouvée en cache, on peut indiquer simplement au navigateur d'effectuer ({{domxref("GlobalFetch.fetch","fetch")}}) la requête réseau par défaut pour cette ressource, afin de récupérer cette nouvelle ressource sur le réseau si disponible :</p>
+4.  Si une correspondance n'est pas trouvée en cache et que le réseau n'est pas disponible, on peut alors faire correspondre la requête avec une page de rechange par défaut en guise de réponse en utilisant {{domxref("CacheStorage.match","match()")}}, comme suit :
 
-  <pre class="brush: js">fetch(event.request)</pre>
- </li>
- <li>
-  <p>Si une correspondance n'est pas trouvée en cache et que le réseau n'est pas disponible, on peut alors faire correspondre la requête avec une page de rechange par défaut en guise de réponse en utilisant {{domxref("CacheStorage.match","match()")}}, comme suit :</p>
+    ```js
+    caches.match('/fallback.html');
+    ```
 
-  <pre class="brush: js">caches.match('/fallback.html');</pre>
- </li>
- <li>
-  <p>On peut récupérer beaucoup d'informations à propos de chaque requête en interrogeant les paramètres de l'objet {{domxref("Request")}} retourné par {{domxref("FetchEvent")}} :</p>
+5.  On peut récupérer beaucoup d'informations à propos de chaque requête en interrogeant les paramètres de l'objet {{domxref("Request")}} retourné par {{domxref("FetchEvent")}} :
 
-  <pre class="brush: js">event.request.url
-event.request.method
-event.request.headers
-event.request.body</pre>
- </li>
-</ol>
+    ```js
+    event.request.url
+    event.request.method
+    event.request.headers
+    event.request.body
+    ```
 
-<h2 id="Récupérer_des_requêtes_en_erreur">Récupérer des requêtes en erreur</h2>
+## Récupérer des requêtes en erreur
 
-<p>On vient de voir que <code>caches.match(event.request)</code> est important lorsqu'il y a correspondance avec le cache du service worker, mais qu'en est-il des cas où rien ne correspond ? Si aucune sorte de gestionnaire d'erreur n'est fourni, la promesse est rejetée et une erreur réseau est retournée lorsqu'aucune correspondance n'est trouvée.</p>
+On vient de voir que `caches.match(event.request)` est important lorsqu'il y a correspondance avec le cache du service worker, mais qu'en est-il des cas où rien ne correspond ? Si aucune sorte de gestionnaire d'erreur n'est fourni, la promesse est rejetée et une erreur réseau est retournée lorsqu'aucune correspondance n'est trouvée.
 
-<p>Heureusement, la structure des service workers qui repose sur les promesses rend triviale la gestion des alternatives à une situation de succès. On pourrait faire ceci :</p>
+Heureusement, la structure des service workers qui repose sur les promesses rend triviale la gestion des alternatives à une situation de succès. On pourrait faire ceci :
 
-<pre class="brush: js">this.addEventListener('fetch', function(event) {
+```js
+this.addEventListener('fetch', function(event) {
   event.respondWith(
     caches.match(event.request).catch(function() {
       return fetch(event.request);
     })
   );
-});</pre>
+});
+```
 
-<p>Si la promesse est rejetée, la fonction <code>catch()</code> retourne à la place la requête réseau par défaut, ce qui signifie que si le réseau est disponible la ressource sera chargée à partir du serveur.</p>
+Si la promesse est rejetée, la fonction `catch()` retourne à la place la requête réseau par défaut, ce qui signifie que si le réseau est disponible la ressource sera chargée à partir du serveur.
 
-<p>Plus malin encore, on pourrait non seulement récupérer la ressource à partir du serveur, mais aussi la sauvegarder dans le cache afin que les requêtes ultérieures pour cette ressource puissent être disponibles aussi en mode déconnecté. Cela signifierait que toute image supplémentaire ajoutée à la galerie Star Wars pourrait être récupérée par l'application et mise en cache. Le code suivant illustre ce mécanisme :</p>
+Plus malin encore, on pourrait non seulement récupérer la ressource à partir du serveur, mais aussi la sauvegarder dans le cache afin que les requêtes ultérieures pour cette ressource puissent être disponibles aussi en mode déconnecté. Cela signifierait que toute image supplémentaire ajoutée à la galerie Star Wars pourrait être récupérée par l'application et mise en cache. Le code suivant illustre ce mécanisme :
 
-<pre class="brush: js">this.addEventListener('fetch', function(event) {
+```js
+this.addEventListener('fetch', function(event) {
   event.respondWith(
     caches.match(event.request).catch(function() {
       return fetch(event.request).then(function(response) {
@@ -336,15 +327,17 @@ event.request.body</pre>
       });
     })
   );
-});</pre>
+});
+```
 
-<p>Ici on retourne la requête réseau par défaut au moyen de <code>return fetch(event.request)</code>, qui retourne lui-même une promesse. Lorsque cette promesse est résolue, on exécute une fonction qui sollicite le cache en utilisant <code>caches.open('v1')</code>; une promesse est de nouveau retournée. Lorsque cette promesse est résolue, <code>cache.put()</code> est utilisée pour ajouter la ressource au cache. La ressource est récupérée à partir de <code>event.request</code>, et la réponse est alors clonée avec <code>response.clone()</code> et ajoutée au cache. Le clone est placé dans le cache, et la réponse originale est retournée au navigateur et délivrée à la page qui la requiert.</p>
+Ici on retourne la requête réseau par défaut au moyen de `return fetch(event.request)`, qui retourne lui-même une promesse. Lorsque cette promesse est résolue, on exécute une fonction qui sollicite le cache en utilisant `caches.open('v1')`; une promesse est de nouveau retournée. Lorsque cette promesse est résolue, `cache.put()` est utilisée pour ajouter la ressource au cache. La ressource est récupérée à partir de `event.request`, et la réponse est alors clonée avec `response.clone()` et ajoutée au cache. Le clone est placé dans le cache, et la réponse originale est retournée au navigateur et délivrée à la page qui la requiert.
 
-<p>Pourquoi un clone ? Il se trouve que les flux de requête et de réponse peuvent seulement être lus une fois.  Afin de retourner la réponse au navigateur et de la mettre en cache, elle doit être clonée. Aussi, l'original est retourné au navigateur tandis que le clone est envoyé dans le cache. Ils sont chacun lus une seule fois.</p>
+Pourquoi un clone ? Il se trouve que les flux de requête et de réponse peuvent seulement être lus une fois.  Afin de retourner la réponse au navigateur et de la mettre en cache, elle doit être clonée. Aussi, l'original est retourné au navigateur tandis que le clone est envoyé dans le cache. Ils sont chacun lus une seule fois.
 
-<p>Le dernier problème qui demeure alors est l'échec de la requête au cas où elle n'a aucune correspondance dans le cache et que le réseau n'est pas disponible. Fournir un document de rechange par défaut permet quoiqu'il arrive, à l'utilisateur de récupérer quelque chose :</p>
+Le dernier problème qui demeure alors est l'échec de la requête au cas où elle n'a aucune correspondance dans le cache et que le réseau n'est pas disponible. Fournir un document de rechange par défaut permet quoiqu'il arrive, à l'utilisateur de récupérer quelque chose :
 
-<pre class="brush: js">this.addEventListener('fetch', function(event) {
+```js
+this.addEventListener('fetch', function(event) {
   event.respondWith(
     caches.match(event.request).catch(function() {
       return fetch(event.request).then(function(response) {
@@ -357,15 +350,17 @@ event.request.body</pre>
       return caches.match('/sw-test/gallery/myLittleVader.jpg');
     })
   );
-});</pre>
+});
+```
 
-<p>Une image de rechange a été choisie parce que les seules mises à jour susceptibles d'échouer sont les nouvelles images, puisque tous les autres éléments dépendent de l'installation comme vu précédemment dans la description de l'écouteur de l'événement <code>install</code>.</p>
+Une image de rechange a été choisie parce que les seules mises à jour susceptibles d'échouer sont les nouvelles images, puisque tous les autres éléments dépendent de l'installation comme vu précédemment dans la description de l'écouteur de l'événement `install`.
 
-<h2 id="Suggestion_damélioration_dun_modèle_de_code">Suggestion d'amélioration d'un modèle de code</h2>
+## Suggestion d'amélioration d'un modèle de code
 
-<p>Ce code utilise un chaînage de promesses plus standard et retourne la réponse au document sans avoir à attendre que <code>caches.open()</code> soit résolue :</p>
+Ce code utilise un chaînage de promesses plus standard et retourne la réponse au document sans avoir à attendre que `caches.open()` soit résolue :
 
-<pre class="brush: js">this.addEventListener('fetch', function(event) {
+```js
+this.addEventListener('fetch', function(event) {
   var response;
   event.respondWith(caches.match(event.request).catch(function() {
     return fetch(event.request);
@@ -378,15 +373,17 @@ event.request.body</pre>
   }).catch(function() {
     return caches.match('/sw-test/gallery/myLittleVader.jpg');
   }));
-});</pre>
+});
+```
 
-<h2 id="Mettre_à_jour_le_service_worker">Mettre à jour le service worker</h2>
+## Mettre à jour le service worker
 
-<p>Si le service worker a été précédemment installé, et qu'une nouvelle version du worker est disponible au chargement ou au rafraîchissement de la page, la nouvelle version est installée en arrière-plan, mais pas encore activée. Elle ne sera activée que lorsqu'il n'y aura plus aucune page chargée qui utilise encore l'ancien service worker. Dès lors qu'il n'y a plus de telles pages encore chargées, le nouveau service worker est activé.</p>
+Si le service worker a été précédemment installé, et qu'une nouvelle version du worker est disponible au chargement ou au rafraîchissement de la page, la nouvelle version est installée en arrière-plan, mais pas encore activée. Elle ne sera activée que lorsqu'il n'y aura plus aucune page chargée qui utilise encore l'ancien service worker. Dès lors qu'il n'y a plus de telles pages encore chargées, le nouveau service worker est activé.
 
-<p>On souhaite mettre à jour l'écouteur d'événement <code>install</code> dans le nouveau service worker de la façon suivante (à noter le nouveau numéro de version) :</p>
+On souhaite mettre à jour l'écouteur d'événement `install` dans le nouveau service worker de la façon suivante (à noter le nouveau numéro de version) :
 
-<pre class="brush: js">this.addEventListener('install', function(event) {
+```js
+this.addEventListener('install', function(event) {
   event.waitUntil(
     caches.open('v2').then(function(cache) {
       return cache.addAll([
@@ -402,19 +399,21 @@ event.request.body</pre>
       ]);
     });
   );
-});</pre>
+});
+```
 
-<p>Tandis que la mise à jour se produit, la version précédente est encore en charge de récupérer des ressources. La nouvelle version est installée en arrière-plan. Le nouveau cache se nomme v2, et ainsi ne perturbe en rien le précédent cache nommé v1.</p>
+Tandis que la mise à jour se produit, la version précédente est encore en charge de récupérer des ressources. La nouvelle version est installée en arrière-plan. Le nouveau cache se nomme v2, et ainsi ne perturbe en rien le précédent cache nommé v1.
 
-<p>Lorsque plus aucune page n'utilise la version actuelle, le nouveau worker est activé et prend en charge les requêtes.</p>
+Lorsque plus aucune page n'utilise la version actuelle, le nouveau worker est activé et prend en charge les requêtes.
 
-<h3 id="Supprimer_les_anciens_caches">Supprimer les anciens caches</h3>
+### Supprimer les anciens caches
 
-<p>Il existe un événement <code>activate</code>. Il est généralement utilisé pour faire un travail qui aurait interrompu le fonctionnement d'une version précédente alors qu'elle était encore en cours d'utilisation, comme par exemple se débarrasser des anciens caches. Il est aussi utile pour supprimer des données qui ne sont plus nécessaires afin d'éviter de surcharger l'espace disque — chaque navigateur dispose d'une limite physique quant à la capacité de stockage en cache dont le service worker peut bénéficier. Le navigateur gère au mieux l'espace disque, mais il peut supprimer le stockage du Cache pour une origine. Le navigateur supprimera généralement toutes les données d'une origine ou bien aucune.</p>
+Il existe un événement `activate`. Il est généralement utilisé pour faire un travail qui aurait interrompu le fonctionnement d'une version précédente alors qu'elle était encore en cours d'utilisation, comme par exemple se débarrasser des anciens caches. Il est aussi utile pour supprimer des données qui ne sont plus nécessaires afin d'éviter de surcharger l'espace disque — chaque navigateur dispose d'une limite physique quant à la capacité de stockage en cache dont le service worker peut bénéficier. Le navigateur gère au mieux l'espace disque, mais il peut supprimer le stockage du Cache pour une origine. Le navigateur supprimera généralement toutes les données d'une origine ou bien aucune.
 
-<p>Les promesses passées à <code>waitUntil()</code> bloqueront les autres événements jusqu'à réalisation complète, ainsi on a l'assurance que l'opération de nettoyage aura été menée à terme au moment où surviendra le premier événement <code>fetch</code> du nouveau cache.</p>
+Les promesses passées à `waitUntil()` bloqueront les autres événements jusqu'à réalisation complète, ainsi on a l'assurance que l'opération de nettoyage aura été menée à terme au moment où surviendra le premier événement `fetch` du nouveau cache.
 
-<pre class="brush: js">this.addEventListener('activate', function(event) {
+```js
+this.addEventListener('activate', function(event) {
   var cacheWhitelist = ['v2'];
 
   event.waitUntil(
@@ -426,23 +425,20 @@ event.request.body</pre>
       }));
     })
   );
-});</pre>
+});
+```
 
-<h2 id="Outils_de_développement">Outils de développement</h2>
+## Outils de développement
 
-<p>Chrome dispose de <code>chrome://inspect/#service-workers</code>, qui montre l'activité du service worker courant et le stockage sur l'appareil, et <code>chrome://serviceworker-internals</code>, qui offre plus de détails et permet de démarrer/arrêter/déboguer le processus du worker. A l'avenir, des modes dégradé/déconnecté seront ajoutés pour simuler des connexions mauvaises ou inexistantes, ce qui sera une bonne chose.</p>
+Chrome dispose de `chrome://inspect/#service-workers`, qui montre l'activité du service worker courant et le stockage sur l'appareil, et `chrome://serviceworker-internals`, qui offre plus de détails et permet de démarrer/arrêter/déboguer le processus du worker. A l'avenir, des modes dégradé/déconnecté seront ajoutés pour simuler des connexions mauvaises ou inexistantes, ce qui sera une bonne chose.
 
-<p>Firefox a aussi commencé à implanter quelques outils utiles concernant les service workers :</p>
+Firefox a aussi commencé à implanter quelques outils utiles concernant les service workers :
 
-<ul>
- <li>Consulter about:serviceworkers pour voir quels SWs sont enregistrés et les mettre à jour ou les supprimer.</li>
- <li>Lors de tests, il est possible de contourner la restriction HTTPS en cochant l'option "Activer les Service Workers via HTTP (lorsque la boîte à outils est ouverte)" dans les options des outils de développement de Firefox (la roue dentée dans le menu.)</li>
-</ul>
+- Consulter about:serviceworkers pour voir quels SWs sont enregistrés et les mettre à jour ou les supprimer.
+- Lors de tests, il est possible de contourner la restriction HTTPS en cochant l'option "Activer les Service Workers via HTTP (lorsque la boîte à outils est ouverte)" dans les options des outils de développement de Firefox (la roue dentée dans le menu.)
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li>
- <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a></li>
- <li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></li>
-</ul>
+- [Is ServiceWorker ready?](https://jakearchibald.github.io/isserviceworkerready/)
+- [Promises](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)
+- [Using web workers](/en-US/docs/Web/Guide/Performance/Using_web_workers)
diff --git a/files/fr/web/api/serviceworker/index.md b/files/fr/web/api/serviceworker/index.md
index 97c6688183..ee79380e4f 100644
--- a/files/fr/web/api/serviceworker/index.md
+++ b/files/fr/web/api/serviceworker/index.md
@@ -11,46 +11,43 @@ tags:
   - hors-ligne
 translation_of: Web/API/ServiceWorker
 ---
-<div>{{APIRef("Service Workers API")}}</div>
+{{APIRef("Service Workers API")}}
 
-<p>L'interface <strong><code>ServiceWorker</code></strong> de l'<a href="/en-US/docs/Web/API/ServiceWorker_API">API ServiceWorker</a> met à disposition une référence vers un service worker. Plusieurs  {{glossary("browsing context", "contextes de navigations")}} (par exemple une page, un <em>worker</em>, etc.) peuvent être associés au même service worker, chacun à travers un unique objet <code>ServiceWorker</code>.</p>
+L'interface **`ServiceWorker`** de l'[API ServiceWorker](/en-US/docs/Web/API/ServiceWorker_API) met à disposition une référence vers un service worker. Plusieurs  {{glossary("browsing context", "contextes de navigations")}} (par exemple une page, un _worker_, etc.) peuvent être associés au même service worker, chacun à travers un unique objet `ServiceWorker`.
 
-<p>Un objet <code>ServiceWorker</code> est disponible dans les propriétés  {{domxref("ServiceWorkerRegistration.active")}} et {{domxref("ServiceWorkerContainer.controller")}} — c'est un service worker qui a été activé et qui contrôle la page (ce service worker a été bien enregistré, et la page contrôlée a été rechargée).</p>
+Un objet `ServiceWorker` est disponible dans les propriétés  {{domxref("ServiceWorkerRegistration.active")}} et {{domxref("ServiceWorkerContainer.controller")}} — c'est un service worker qui a été activé et qui contrôle la page (ce service worker a été bien enregistré, et la page contrôlée a été rechargée).
 
-<p>L'interface <code>ServiceWorker</code> est distribuée à travers différents évènements de son cycle de vie — <code>install</code> et <code>activate</code> — et d'utilisation, comme <code>fetch</code>. Un objet <code>ServiceWorker</code> a un état associé {{domxref("ServiceWorker.state")}}, lié à son cycle de vie.</p>
+L'interface `ServiceWorker` est distribuée à travers différents évènements de son cycle de vie — `install` et `activate` — et d'utilisation, comme `fetch`. Un objet `ServiceWorker` a un état associé {{domxref("ServiceWorker.state")}}, lié à son cycle de vie.
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<p><em>L'interface <code>ServiceWorker</code> hérite des propriétés de son parent, le {{domxref("Worker")}}.</em></p>
+_L'interface `ServiceWorker` hérite des propriétés de son parent, le {{domxref("Worker")}}._
 
-<dl>
- <dt>{{domxref("ServiceWorker.scriptURL")}} {{readonlyinline}}</dt>
- <dd>Retourne la <code>scriptURL</code> sérialisée du <code>ServiceWorker</code>, définie comme une partie du {{domxref("ServiceWorkerRegistration")}}. Cette URL doit avoir la même origine que le document qui enregistre le  <code>ServiceWorker</code>.</dd>
- <dt>{{domxref("ServiceWorker.state")}} {{readonlyinline}}</dt>
- <dd>Retourne le status du service worker. Il retourne l'une des valeurs suivantes : <code>installing</code>, <code>installed,</code> <code>activating</code>, <code>activated</code>, or <code>redundant</code>.</dd>
-</dl>
+- {{domxref("ServiceWorker.scriptURL")}} {{readonlyinline}}
+  - : Retourne la `scriptURL` sérialisée du `ServiceWorker`, définie comme une partie du {{domxref("ServiceWorkerRegistration")}}. Cette URL doit avoir la même origine que le document qui enregistre le  `ServiceWorker`.
+- {{domxref("ServiceWorker.state")}} {{readonlyinline}}
+  - : Retourne le status du service worker. Il retourne l'une des valeurs suivantes : `installing`, `installed,` `activating`, `activated`, or `redundant`.
 
-<h3 id="Gestionnaires_dévènements">Gestionnaires d'évènements</h3>
+### Gestionnaires d'évènements
 
-<dl>
- <dt>{{domxref("ServiceWorker.onstatechange")}} {{readonlyinline}}</dt>
- <dd>Une propriété {{domxref("EventListener")}} est appelée quand un évènement de type <code>statechange</code> est déclenché; c'est le cas dès que le {{domxref("ServiceWorker.state")}} change.</dd>
-</dl>
+- {{domxref("ServiceWorker.onstatechange")}} {{readonlyinline}}
+  - : Une propriété {{domxref("EventListener")}} est appelée quand un évènement de type `statechange` est déclenché; c'est le cas dès que le {{domxref("ServiceWorker.state")}} change.
 
-<h2 id="Méthodes">Méthodes</h2>
+## Méthodes
 
-<p>L'interface du <em><code>ServiceWorker</code> hérite des méthodes de son parent, {{domxref("Worker")}}, avec l'exception de {{domxref("Worker.terminate")}}, qui ne doit pas être accessible depuis le service worker.</em></p>
+L'interface du *`ServiceWorker` hérite des méthodes de son parent, {{domxref("Worker")}}, avec l'exception de {{domxref("Worker.terminate")}}, qui ne doit pas être accessible depuis le service worker.*
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Ce fragment de code provient d'<a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/registration-events/index.html">un exemple d'enregistrement d'évènement pour le service worker</a> (<a href="https://googlechrome.github.io/samples/service-worker/registration-events/">démo en direct</a>). Le code écoute tout changement du {{domxref("ServiceWorker.state")}} et retourne sa valeur.</p>
+Ce fragment de code provient d'[un exemple d'enregistrement d'évènement pour le service worker](https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/registration-events/index.html) ([démo en direct](https://googlechrome.github.io/samples/service-worker/registration-events/)). Le code écoute tout changement du {{domxref("ServiceWorker.state")}} et retourne sa valeur.
 
-<pre class="brush: js">if ('serviceWorker' in navigator) {
+```js
+if ('serviceWorker' in navigator) {
   navigator.serviceWorker
     .register('service-worker.js', {
       scope: './'
     })
-    .then(({ installing, waiting, active }) =&gt; {
+    .then(({ installing, waiting, active }) => {
       let serviceWorker
       if (installing) {
         serviceWorker = installing
@@ -64,47 +61,35 @@ translation_of: Web/API/ServiceWorker
       }
       if (serviceWorker) {
         // logState(serviceWorker.state);
-        serviceWorker.addEventListener('statechange', (e) =&gt; {
+        serviceWorker.addEventListener('statechange', (e) => {
           // logState(e.target.state);
         })
       }
     })
-    .catch((error) =&gt; {
+    .catch((error) => {
       // L'enregistrement s'est mal déroulé. Le fichier service-worker.js
       // est peut-être indisponible ou contient une erreur.
     })
 } else {
   // Le navigateur ne supporte pas les service workers.
-}</pre>
-
-<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">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Service Workers', '#service-worker-obj', 'ServiceWorker')}}</td>
-   <td>{{Spec2('Service Workers')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.ServiceWorker")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="https://serviceworke.rs">ServiceWorker Cookbook</a></li>
- <li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li>
- <li><a href="https://github.com/mdn/sw-test">Service workers basic code example</a></li>
- <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li>
- <li>{{jsxref("Promise")}}</li>
- <li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></li>
-</ul>
+}
+```
+
+## Spécifications
+
+| Spécification                                                                                    | État                                 | Commentaire          |
+| ------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- |
+| {{SpecName('Service Workers', '#service-worker-obj', 'ServiceWorker')}} | {{Spec2('Service Workers')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.ServiceWorker")}}
+
+## Voir aussi
+
+- [ServiceWorker Cookbook](https://serviceworke.rs)
+- [Using Service Workers](/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers)
+- [Service workers basic code example](https://github.com/mdn/sw-test)
+- [Is ServiceWorker ready?](https://jakearchibald.github.io/isserviceworkerready/)
+- {{jsxref("Promise")}}
+- [Using web workers](/en-US/docs/Web/Guide/Performance/Using_web_workers)
diff --git a/files/fr/web/api/serviceworker/onstatechange/index.md b/files/fr/web/api/serviceworker/onstatechange/index.md
index 71f4cd1e15..4089f7a837 100644
--- a/files/fr/web/api/serviceworker/onstatechange/index.md
+++ b/files/fr/web/api/serviceworker/onstatechange/index.md
@@ -7,20 +7,21 @@ tags:
   - Reference
 translation_of: Web/API/ServiceWorker/onstatechange
 ---
-<div>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</div>
+{{SeeCompatTable}}{{APIRef("Service Workers API")}}
 
-<p>Une propriété {{domxref("EventListener")}} appelée quand un évenement de type <code>statechange</code> est déclenché; c'est le cas dès que le {{domxref("ServiceWorker.state")}} change.</p>
+Une propriété {{domxref("EventListener")}} appelée quand un évenement de type `statechange` est déclenché; c'est le cas dès que le {{domxref("ServiceWorker.state")}} change.
 
-<h2 id="Syntax">Syntax</h2>
+## Syntax
 
-<pre class="syntaxbox">ServiceWorker.onstatechange = function(statechangeevent) { ... }
-ServiceWorker.addEventListener('statechange', function(statechangeevent) { ... } )</pre>
+    ServiceWorker.onstatechange = function(statechangeevent) { ... }
+    ServiceWorker.addEventListener('statechange', function(statechangeevent) { ... } )
 
-<h2 id="Examples">Examples</h2>
+## Examples
 
-<p>Ce fragment de code présente <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/registration-events/index.html">un exemple d'enregistrement d'évenements pour le service worker</a> (<a href="https://googlechrome.github.io/samples/service-worker/registration-events/">démo live</a>). Le code écoute pour tout changement du {{domxref("ServiceWorker.state")}} et retourne sa valeur.</p>
+Ce fragment de code présente [un exemple d'enregistrement d'évenements pour le service worker](https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/registration-events/index.html) ([démo live](https://googlechrome.github.io/samples/service-worker/registration-events/)). Le code écoute pour tout changement du {{domxref("ServiceWorker.state")}} et retourne sa valeur.
 
-<pre class="brush: js">var serviceWorker;
+```js
+var serviceWorker;
 if (registration.installing) {
   serviceWorker = registration.installing;
   document.querySelector('#kind').textContent = 'installé';
@@ -37,11 +38,13 @@ if (serviceWorker) {
   serviceWorker.addEventListener('statechange', function(e) {
   logState(e.target.state);
   });
-}</pre>
+}
+```
 
-<p>Notez que quand l'évenement <code>statechange</code> est déclenché, la référence du service worker peut avoir changée. Par exemple :</p>
+Notez que quand l'évenement `statechange` est déclenché, la référence du service worker peut avoir changée. Par exemple :
 
-<pre class="brush: js">navigator.serviceWorker.register(..).then(function(swr) {
+```js
+navigator.serviceWorker.register(..).then(function(swr) {
   swr.installing.state == "installé"
   swr.installing.onstatechange = function() {
     swr.installing == null;
@@ -49,25 +52,15 @@ if (serviceWorker) {
     // statechange est mis en queue, pendant que le worker sous jacent est peut être en
     // état d'attente et sera immédiatement activé si possible.
   }
-})</pre>
+})
+```
 
-<h2 id="Specifications">Specifications</h2>
+## Specifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Service Workers', '#service-worker-onstatechange-attribute', 'ServiceWorker.onstatechange')}}</td>
-   <td>{{Spec2('Service Workers')}}</td>
-   <td>Définition intiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                                | État                                 | Commentaire        |
+| -------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ------------------ |
+| {{SpecName('Service Workers', '#service-worker-onstatechange-attribute', 'ServiceWorker.onstatechange')}} | {{Spec2('Service Workers')}} | Définition intiale |
 
-<h2 id="Browser_compatibility">Browser compatibility</h2>
+## Browser compatibility
 
-<p>{{Compat("api.ServiceWorker.onstatechange")}}</p>
+{{Compat("api.ServiceWorker.onstatechange")}}
diff --git a/files/fr/web/api/serviceworkercontainer/getregistration/index.md b/files/fr/web/api/serviceworkercontainer/getregistration/index.md
index d18712f2ff..795e44e476 100644
--- a/files/fr/web/api/serviceworkercontainer/getregistration/index.md
+++ b/files/fr/web/api/serviceworkercontainer/getregistration/index.md
@@ -3,55 +3,39 @@ title: ServiceWorkerContainer.getRegistration()
 slug: Web/API/ServiceWorkerContainer/getRegistration
 translation_of: Web/API/ServiceWorkerContainer/getRegistration
 ---
-<p>{{APIRef("Service Workers API")}}</p>
+{{APIRef("Service Workers API")}}
 
-<p>La méthode <strong><code>getRegistration()</code></strong> de l'interface {{domxref("ServiceWorkerContainer")}} fournis un objet {{domxref("ServiceWorkerRegistration")}} dont la porté inclue l'URL du document. Cette méthode retourne une {{jsxref("Promise")}} qui se résout avec un {{domxref("ServiceWorkerRegistration")}} ou <code>undefined</code>.</p>
+La méthode **`getRegistration()`** de l'interface {{domxref("ServiceWorkerContainer")}} fournis un objet {{domxref("ServiceWorkerRegistration")}} dont la porté inclue l'URL du document. Cette méthode retourne une {{jsxref("Promise")}} qui se résout avec un {{domxref("ServiceWorkerRegistration")}} ou `undefined`.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>serviceWorkerContainer</em>.getRegistration(<em>scope</em>).then(function(<em>serviceWorkerRegistration</em>) { ... });</pre>
+    serviceWorkerContainer.getRegistration(scope).then(function(serviceWorkerRegistration) { ... });
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>scope</code> {{optional_inline}}</dt>
- <dd>Un identifiant unique pour l'enregistrement du service worker que vous voulez récupérer. L'URL de porté de l'enregistrement . C'est souvent une URL relative.</dd>
-</dl>
+- `scope` {{optional_inline}}
+  - : Un identifiant unique pour l'enregistrement du service worker que vous voulez récupérer. L'URL de porté de l'enregistrement . C'est souvent une URL relative.
 
-<h3 id="Valeur_retournée">Valeur retournée</h3>
+### Valeur retournée
 
-<p>Une {{domxref("Promise")}} qui est résolue avec un objet {{domxref("ServiceWorkerRegistration")}} ou <code>undefined</code>.</p>
+Une {{domxref("Promise")}} qui est résolue avec un objet {{domxref("ServiceWorkerRegistration")}} ou `undefined`.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">navigator.serviceWorker.getRegistration('/app').then(function(registration) {
+```js
+navigator.serviceWorker.getRegistration('/app').then(function(registration) {
   if(registration){
     document.querySelector('#status').textContent = 'ServiceWorkerRegistration found.';
   }
 });
-</pre>
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statuts</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Service Workers', '#dom-serviceworkercontainer-getregistration', 'ServiceWorkerContainer: getRegistration')}}</td>
-   <td>{{Spec2('Service Workers')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                                                    | Statuts                              | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName('Service Workers', '#dom-serviceworkercontainer-getregistration', 'ServiceWorkerContainer: getRegistration')}} | {{Spec2('Service Workers')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<div>
-
-
-<p>{{Compat("api.ServiceWorkerContainer.getRegistration")}}</p>
-</div>
+{{Compat("api.ServiceWorkerContainer.getRegistration")}}
diff --git a/files/fr/web/api/serviceworkercontainer/index.md b/files/fr/web/api/serviceworkercontainer/index.md
index 9201074b47..c7de9a158f 100644
--- a/files/fr/web/api/serviceworkercontainer/index.md
+++ b/files/fr/web/api/serviceworkercontainer/index.md
@@ -3,51 +3,46 @@ title: ServiceWorkerContainer
 slug: Web/API/ServiceWorkerContainer
 translation_of: Web/API/ServiceWorkerContainer
 ---
-<p>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</p>
+{{SeeCompatTable}}{{APIRef("Service Workers API")}}
 
-<p>L’interface <code>ServiceWorkerContainer</code> de l’<a href="/fr/docs/Web/API/ServiceWorker_API">API ServiceWorker</a> fournit un objet représentant le service worker comme une unité globale de l’écosystème réseau, incluant des fonctionnalités pour enregistrer, désenregistrer et mettre à jour des services workers, et accéder à l’état des services workers et de leurs enregistrements.</p>
+L’interface `ServiceWorkerContainer` de l’[API ServiceWorker](/fr/docs/Web/API/ServiceWorker_API) fournit un objet représentant le service worker comme une unité globale de l’écosystème réseau, incluant des fonctionnalités pour enregistrer, désenregistrer et mettre à jour des services workers, et accéder à l’état des services workers et de leurs enregistrements.
 
-<p>Parmi le plus important, cette interface expose la méthode {{domxref("ServiceWorkerContainer.register", "ServiceWorkerContainer.register(scriptURL, scope[, base])")}} utilisée pour enregistrer les services workers, et la propriété {{domxref("ServiceWorkerContainer.controller")}} utilisée pour déterminer si oui ou non la page courante est activement conrôlée.</p>
+Parmi le plus important, cette interface expose la méthode {{domxref("ServiceWorkerContainer.register", "ServiceWorkerContainer.register(scriptURL, scope[, base])")}} utilisée pour enregistrer les services workers, et la propriété {{domxref("ServiceWorkerContainer.controller")}} utilisée pour déterminer si oui ou non la page courante est activement conrôlée.
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<dl>
- <dt>{{domxref("ServiceWorkerContainer.controller")}} {{readonlyinline}}</dt>
- <dd>Retourne un objet {{domxref("ServiceWorker")}} si son état est <code>activated</code> (le même objet retourné par {{domxref("ServiceWorkerRegistration.active")}}). Cette propriété retourne <code>null</code> si la requête est un rechargement forcé (<em>Majuscule</em> + rechargement) ou si il n'y a pas de worker actif.</dd>
-</dl>
+- {{domxref("ServiceWorkerContainer.controller")}} {{readonlyinline}}
+  - : Retourne un objet {{domxref("ServiceWorker")}} si son état est `activated` (le même objet retourné par {{domxref("ServiceWorkerRegistration.active")}}). Cette propriété retourne `null` si la requête est un rechargement forcé (*Majuscule* + rechargement) ou si il n'y a pas de worker actif.
 
-<dl>
- <dt>{{domxref("ServiceWorkerContainer.ready")}} {{readonlyinline}}</dt>
- <dd>Détermine si oui ou non un service worker est prêt à contrôler la page. Cette propriété retourne une {{jsxref("Promise")}} qui ne sera jamais rejetée, et se résoudra en un {{domxref("ServiceWorkerRegistration")}} avec un worker en état {{domxref("ServiceWorkerRegistration.active")}}.</dd>
-</dl>
+<!---->
 
-<h3 id="Gestionnaires_d'événement">Gestionnaires d'événement</h3>
+- {{domxref("ServiceWorkerContainer.ready")}} {{readonlyinline}}
+  - : Détermine si oui ou non un service worker est prêt à contrôler la page. Cette propriété retourne une {{jsxref("Promise")}} qui ne sera jamais rejetée, et se résoudra en un {{domxref("ServiceWorkerRegistration")}} avec un worker en état {{domxref("ServiceWorkerRegistration.active")}}.
 
-<dl>
- <dt>{{domxref("ServiceWorkerContainer.oncontrollerchange")}}</dt>
- <dd>Un gestionnaire d’événement lancé quand un événement {{Event("controllerchange")}} se produit — quand le {{domxref("ServiceWorkerRegistration")}} associé au document ajoute un nouveau worker en état {{domxref("ServiceWorkerRegistration.active")}}.</dd>
- <dt>{{domxref("ServiceWorkerContainer.onerror")}}</dt>
- <dd>Un gestionnaire d’événement lancé quand un événement {{Event("error")}} se produit dans le service worker associé.</dd>
- <dt>{{domxref("ServiceWorkerContainer.onmessage")}}</dt>
- <dd>Un gestionnaire d’événement lancé quand un événement {{Event("message")}} se produit — quand des messages entrants sont reçus par l’objet {{domxref("ServiceWorkerContainer")}} (e.g. par un appel à {{domxref("MessagePort.postMessage()")}}.)</dd>
-</dl>
+### Gestionnaires d'événement
 
-<h2 id="Méthodes">Méthodes</h2>
+- {{domxref("ServiceWorkerContainer.oncontrollerchange")}}
+  - : Un gestionnaire d’événement lancé quand un événement {{Event("controllerchange")}} se produit — quand le {{domxref("ServiceWorkerRegistration")}} associé au document ajoute un nouveau worker en état {{domxref("ServiceWorkerRegistration.active")}}.
+- {{domxref("ServiceWorkerContainer.onerror")}}
+  - : Un gestionnaire d’événement lancé quand un événement {{Event("error")}} se produit dans le service worker associé.
+- {{domxref("ServiceWorkerContainer.onmessage")}}
+  - : Un gestionnaire d’événement lancé quand un événement {{Event("message")}} se produit — quand des messages entrants sont reçus par l’objet {{domxref("ServiceWorkerContainer")}} (e.g. par un appel à {{domxref("MessagePort.postMessage()")}}.)
 
-<dl>
- <dt>{{domxref("ServiceWorkerContainer.register", "ServiceWorkerContainer.register()")}} </dt>
- <dd>Crée ou met à jour un {{domxref("ServiceWorkerRegistration")}} pour un <code>scriptURL</code> donné.</dd>
- <dt>{{domxref("ServiceWorkerContainer.getRegistration()")}}</dt>
- <dd>Récupère un objet {{domxref("ServiceWorkerRegistration")}} dont l’URL de la portée correspond à l’URL du document fourni.  Si la méthode ne peut retourner un {{domxref("ServiceWorkerRegistration")}}, elle retourne une <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise"><code>Promise</code></a>. </dd>
- <dt>{{domxref("ServiceWorkerContainer.getRegistrations()")}}</dt>
- <dd>Retourne tous les  {{domxref("ServiceWorkerRegistration")}} associés à un <code>ServiceWorkerContainer</code> dans un tableau. Si la méthode ne peut retourner les {{domxref("ServiceWorkerRegistration")}}, elle retourne une <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise"><code>Promise</code></a>. </dd>
-</dl>
+## Méthodes
 
-<h2 id="Exemples">Exemples</h2>
+- {{domxref("ServiceWorkerContainer.register", "ServiceWorkerContainer.register()")}}
+  - : Crée ou met à jour un {{domxref("ServiceWorkerRegistration")}} pour un `scriptURL` donné.
+- {{domxref("ServiceWorkerContainer.getRegistration()")}}
+  - : Récupère un objet {{domxref("ServiceWorkerRegistration")}} dont l’URL de la portée correspond à l’URL du document fourni.  Si la méthode ne peut retourner un {{domxref("ServiceWorkerRegistration")}}, elle retourne une [`Promise`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise).
+- {{domxref("ServiceWorkerContainer.getRegistrations()")}}
+  - : Retourne tous les  {{domxref("ServiceWorkerRegistration")}} associés à un `ServiceWorkerContainer` dans un tableau. Si la méthode ne peut retourner les {{domxref("ServiceWorkerRegistration")}}, elle retourne une [`Promise`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise).
 
-<p>Cet extrait de code provient de <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/fallback-response/index.html#L126">exemple service worker fallback-response</a> (voir <a href="http://googlechrome.github.io/samples/service-worker/fallback-response/">fallback-response live</a>). Le code test si le navigateur supporte les services workers. Alors le code enregistre le service worker et détermine si la page est activement contrôlée par le service worker. Si elle ne l’est pas, il invite l’utilisateur à recharger la page pour permettre au service worker de prendre le contrôle. Ce code indique aussi les échecs d’enregistrement.</p>
+## Exemples
 
-<pre class="brush: js">if ('serviceWorker' in navigator) {
+Cet extrait de code provient de [exemple service worker fallback-response](https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/fallback-response/index.html#L126) (voir [fallback-response live](http://googlechrome.github.io/samples/service-worker/fallback-response/)). Le code test si le navigateur supporte les services workers. Alors le code enregistre le service worker et détermine si la page est activement contrôlée par le service worker. Si elle ne l’est pas, il invite l’utilisateur à recharger la page pour permettre au service worker de prendre le contrôle. Ce code indique aussi les échecs d’enregistrement.
+
+```js
+if ('serviceWorker' in navigator) {
   navigator.serviceWorker.register('service-worker.js', {scope: './'}).then(function() {
     if (navigator.serviceWorker.controller) {
       document.querySelector('#status').textContent = 'The service worker is currently handling network operations.';
@@ -63,35 +58,23 @@ translation_of: Web/API/ServiceWorkerContainer
   aElement.href = 'http://www.chromium.org/blink/serviceworker/service-worker-faq';
   aElement.textContent = 'unavailable';
   document.querySelector('#status').appendChild(aElement);
-}</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Service Workers', '#service-worker-container', 'ServiceWorkerContainer')}}</td>
-   <td>{{Spec2('Service Workers')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
-
-<p>{{Compat("api.ServiceWorkerContainer")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Utiliser les Service Workers</a></li>
- <li><a href="https://github.com/mdn/sw-test">Service workers : exemple basique</a></li>
- <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Le ServiceWorker est-il prêt ?</a></li>
- <li>{{jsxref("Promise")}}</li>
- <li><a href="/fr/docs/Web/Guide/Performance/Using_web_workers">Utiliser les web workers</a></li>
-</ul>
+}
+```
+
+## Spécifications
+
+| Spécification                                                                                                        | Status                               | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName('Service Workers', '#service-worker-container', 'ServiceWorkerContainer')}} | {{Spec2('Service Workers')}} | Définition initiale. |
+
+## Compatibilité navigateurs
+
+{{Compat("api.ServiceWorkerContainer")}}
+
+## Voir aussi
+
+- [Utiliser les Service Workers](/fr/docs/Web/API/ServiceWorker_API/Using_Service_Workers)
+- [Service workers : exemple basique](https://github.com/mdn/sw-test)
+- [Le ServiceWorker est-il prêt ?](https://jakearchibald.github.io/isserviceworkerready/)
+- {{jsxref("Promise")}}
+- [Utiliser les web workers](/fr/docs/Web/Guide/Performance/Using_web_workers)
diff --git a/files/fr/web/api/serviceworkercontainer/register/index.md b/files/fr/web/api/serviceworkercontainer/register/index.md
index ebb85bd058..c7c1d85c5f 100644
--- a/files/fr/web/api/serviceworkercontainer/register/index.md
+++ b/files/fr/web/api/serviceworkercontainer/register/index.md
@@ -12,124 +12,113 @@ tags:
   - register
 translation_of: Web/API/ServiceWorkerContainer/register
 ---
-<div>{{APIRef("Service Workers API")}}</div>
+{{APIRef("Service Workers API")}}
 
-<p>La méthode <strong><code>register()</code></strong> de l'interface {{domxref("ServiceWorkerContainer")}} crée ou met à jour un {{domxref("ServiceWorkerRegistration")}} pour la <code>scriptURL</code> donnée.</p>
+La méthode **`register()`** de l'interface {{domxref("ServiceWorkerContainer")}} crée ou met à jour un {{domxref("ServiceWorkerRegistration")}} pour la `scriptURL` donnée.
 
-<p>En cas de succès, un <code>ServiceWorkerRegistration</code> attache la <code>scriptURL</code> fournie à une portée, qui sera utilisé ensuite pour la correspondance de navigation. Vous pouvez appeler cette méthode en toutes circonstances depuis la page contrôlée. C'est-à-dire, vous n'avez pas besoin de vérifier si un enregistrement existe déjà.</p>
+En cas de succès, un `ServiceWorkerRegistration` attache la `scriptURL` fournie à une portée, qui sera utilisé ensuite pour la correspondance de navigation. Vous pouvez appeler cette méthode en toutes circonstances depuis la page contrôlée. C'est-à-dire, vous n'avez pas besoin de vérifier si un enregistrement existe déjà.
 
-<p>Il y a une confusion fréquente autour de la signification et de l'utilisation de la portée. Puisque qu'un <code>ServiceWorker</code> ne peut pas avoir une portée plus large que son propre emplacement, utilisez uniquement l'option de la portée lorsque vous avez besoin d'une portée plus étroite que la valeur par défaut.</p>
+Il y a une confusion fréquente autour de la signification et de l'utilisation de la portée. Puisque qu'un `ServiceWorker` ne peut pas avoir une portée plus large que son propre emplacement, utilisez uniquement l'option de la portée lorsque vous avez besoin d'une portée plus étroite que la valeur par défaut.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>serviceWorkerContainer</em>.register(<em>scriptURL</em>, <em>options</em>)
-  .then(function(<em>serviceWorkerRegistration</em>) { ... })</pre>
+    serviceWorkerContainer.register(scriptURL, options)
+      .then(function(serviceWorkerRegistration) { ... })
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>scriptURL</code></dt>
- <dd>L' URL du script contenant le <code>ServiceWorker</code>. Le fichier qui a enregistré le <code>ServiceWorker</code> doit avoir un <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types#JavaScript_types">JavaScript MIME type</a> valide.</dd>
- <dt><code>options</code> {{optional_inline}}</dt>
- <dd>Un objet contenant les options d'enregistrement. Les options sont:
- <ul>
-  <li><code>scope</code>: Un {{domxref("USVString")}} représentant une URL qui définit la portée d'enregistrement d'un <code>ServiceWorker</code>; c'est-à-dire quelle plage d'URL un <code>ServiceWorker</code> peut contrôler. Il s'agit généralement d'une URL relative. Elle est relative à l'URL de base de l'application. Par défaut, la valeur de la portée de l'enregistrement d'un <code>ServiceWorker</code> est limité au répertoire qui contient le script du <code>ServiceWorker</code>. Consultez la section <a href="#Exemples">Exemples</a> pour plus d'informations sur son fonctionnement.</li>
-  <li>{{non-standard_inline}} <code>type</code>: Un {{domxref("WorkerType")}}, il prend les valeurs "classic" ou "module". Par défaut, la valeur est fixé à "classic".</li>
-  <li>{{non-standard_inline}} <code>updateViaCache</code>: Un {{domxref("ServiceWorkerUpdateViaCache")}}, il prend les valeurs "imports" ou "all" ou "none". Par défaut, la valeur est fixé à "imports".</li>
- </ul>
- </dd>
-</dl>
+- `scriptURL`
+  - : L' URL du script contenant le `ServiceWorker`. Le fichier qui a enregistré le `ServiceWorker` doit avoir un [JavaScript MIME type](/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types#JavaScript_types) valide.
+- `options` {{optional_inline}}
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+  - : Un objet contenant les options d'enregistrement. Les options sont:
 
-<p>Une {{jsxref("Promise")}}  qui se résout avec un objet {{domxref("ServiceWorkerRegistration")}}.</p>
+    - `scope`: Un {{domxref("USVString")}} représentant une URL qui définit la portée d'enregistrement d'un `ServiceWorker`; c'est-à-dire quelle plage d'URL un `ServiceWorker` peut contrôler. Il s'agit généralement d'une URL relative. Elle est relative à l'URL de base de l'application. Par défaut, la valeur de la portée de l'enregistrement d'un `ServiceWorker` est limité au répertoire qui contient le script du `ServiceWorker`. Consultez la section [Exemples](#Exemples) pour plus d'informations sur son fonctionnement.
+    - {{non-standard_inline}} `type`: Un {{domxref("WorkerType")}}, il prend les valeurs "classic" ou "module". Par défaut, la valeur est fixé à "classic".
+    - {{non-standard_inline}} `updateViaCache`: Un {{domxref("ServiceWorkerUpdateViaCache")}}, il prend les valeurs "imports" ou "all" ou "none". Par défaut, la valeur est fixé à "imports".
 
-<h2 id="Exemples">Exemples</h2>
+### Valeur de retour
 
-<p>Les exemples décrits ici doivent être pris ensemble pour obtenir une meilleure compréhension de comment la portée des <code>ServiceWorker</code> s'applique à une page.</p>
+Une {{jsxref("Promise")}} qui se résout avec un objet {{domxref("ServiceWorkerRegistration")}}.
 
-<p>L'exemple suivant utilise la valeur par défaut de la portée (en l'omettant). Le code du <code>ServiceWorker</code> dans ce cas, s'il est inclus dans <code>example.com/index.html</code>, contrôlera <code>example.com/index.html</code>, ainsi que les pages en dessous, comme <code>example.com/product/description.html</code>.</p>
+## Exemples
 
-<pre class="brush: js">if ('serviceWorker' in navigator) {
+Les exemples décrits ici doivent être pris ensemble pour obtenir une meilleure compréhension de comment la portée des `ServiceWorker` s'applique à une page.
+
+L'exemple suivant utilise la valeur par défaut de la portée (en l'omettant). Le code du `ServiceWorker` dans ce cas, s'il est inclus dans `example.com/index.html`, contrôlera `example.com/index.html`, ainsi que les pages en dessous, comme `example.com/product/description.html`.
+
+```js
+if ('serviceWorker' in navigator) {
   // Register a service worker hosted at the root of the
   // site using the default scope.
   navigator.serviceWorker.register('/sw.js').then(
-    (registration) =&gt; {
+    (registration) => {
       console.log('Service worker registration succeeded:', registration)
     },
-    /*catch*/ (error) =&gt; {
+    /*catch*/ (error) => {
       console.log('Service worker registration failed:', error)
     }
   )
 } else {
   console.log('Service workers are not supported.')
-}</pre>
+}
+```
 
-<p>Le code suivant, s'il est inclus dans <code>example.com/index.html</code>, à la racine d'un site, s'appliquerait exactement aux mêmes pages que l'exemple ci-dessus. N'oubliez pas que la portée, lorsqu'elle est incluse, utilise l'emplacement de la page comme base.</p>
+Le code suivant, s'il est inclus dans `example.com/index.html`, à la racine d'un site, s'appliquerait exactement aux mêmes pages que l'exemple ci-dessus. N'oubliez pas que la portée, lorsqu'elle est incluse, utilise l'emplacement de la page comme base.
 
-<p>Sinon, si ce code était inclus dans une page à <code>example.com/product/description.html</code>, avec le fichier Javascript résidant à <code>example.com/product/sw.js</code>, alors le service worker ne s'appliquerait qu'aux ressources sous <code>example.com /product</code>.</p>
+Sinon, si ce code était inclus dans une page à `example.com/product/description.html`, avec le fichier Javascript résidant à `example.com/product/sw.js`, alors le service worker ne s'appliquerait qu'aux ressources sous `example.com /product`.
 
-<pre class="brush: js">if ('serviceWorker' in navigator) {
+```js
+if ('serviceWorker' in navigator) {
   // declaring scope manually
   navigator.serviceWorker.register('/sw.js', { scope: './' }).then(
-    (registration) =&gt; {
+    (registration) => {
       console.log('Service worker registration succeeded:', registration)
     },
-    /*catch*/ (error) =&gt; {
+    /*catch*/ (error) => {
       console.log('Service worker registration failed:', error)
     }
   )
 } else {
   console.log('Service workers are not supported.')
 }
-</pre>
+```
 
-<p>Il y a une confusion fréquente autour de la signification et de l'utilisation de la portée. Puisque qu'un <code>ServiceWorker</code> ne peut pas avoir une portée plus large que son propre emplacement, utilisez uniquement l'option de la portée lorsque vous avez besoin d'une portée plus étroite que la valeur par défaut.</p>
+Il y a une confusion fréquente autour de la signification et de l'utilisation de la portée. Puisque qu'un `ServiceWorker` ne peut pas avoir une portée plus large que son propre emplacement, utilisez uniquement l'option de la portée lorsque vous avez besoin d'une portée plus étroite que la valeur par défaut.
 
-<p>Le code suivant, s'il est inclus dans <code>example.com/index.html</code>, à la racine d'un site, ne s'appliquerait qu'aux ressources sous <code>example.com/product</code>.</p>
+Le code suivant, s'il est inclus dans `example.com/index.html`, à la racine d'un site, ne s'appliquerait qu'aux ressources sous `example.com/product`.
 
-<pre class="brush: js">if ('serviceWorker' in navigator) {
+```js
+if ('serviceWorker' in navigator) {
   // declaring scope manually
   navigator.serviceWorker.register('/sw.js', { scope: '/product/' }).then(
-    (registration) =&gt; {
+    (registration) => {
       console.log('Service worker registration succeeded:', registration)
     },
-    /*catch*/ (error) =&gt; {
+    /*catch*/ (error) => {
       console.log('Service worker registration failed:', error)
     }
   )
 } else {
   console.log('Service workers are not supported.')
-}</pre>
-
-<p>Toutefois, les serveurs peuvent supprimer cette restriction en définissant un en-tête <a href="https://w3c.github.io/ServiceWorker/#service-worker-allowed">Service-Worker-Allowed</a> sur le script du <code>ServiceWorker</code>, et alors vous pouvez spécifier une portée maximale pour ce <code>ServiceWorker</code> au-dessus de l'emplacement du <code>ServiceWorker</code>.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Service Workers', '#dom-serviceworkercontainer-register', 'ServiceWorkerContainer: register')}}</td>
-   <td>{{Spec2('Service Workers')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.ServiceWorkerContainer.register")}}</p>
-
-<h2 id="Voir_également">Voir également</h2>
-
-<ul>
- <li><a href="https://www.w3.org/TR/service-workers/#navigator-service-worker-register">W3.org ServiceWorker Register</a></li>
- <li><a href="https://w3c.github.io/ServiceWorker/#dom-serviceworkercontainer-register">W3c.github.io ServiceWorker Register</a></li>
- <li><a href="https://www.w3.org/TR/service-workers/#enumdef-serviceworkerupdateviacache">W3.org option update via cache</a></li>
- <li><a href="https://html.spec.whatwg.org/multipage/workers.html#workertype">WHATWG.org Worker Type</a></li>
-</ul>
+}
+```
+
+Toutefois, les serveurs peuvent supprimer cette restriction en définissant un en-tête [Service-Worker-Allowed](https://w3c.github.io/ServiceWorker/#service-worker-allowed) sur le script du `ServiceWorker`, et alors vous pouvez spécifier une portée maximale pour ce `ServiceWorker` au-dessus de l'emplacement du `ServiceWorker`.
+
+## Spécifications
+
+| Specification                                                                                                                                    | Status                               | Comment              |
+| ------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- |
+| {{SpecName('Service Workers', '#dom-serviceworkercontainer-register', 'ServiceWorkerContainer: register')}} | {{Spec2('Service Workers')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.ServiceWorkerContainer.register")}}
+
+## Voir également
+
+- [W3.org ServiceWorker Register](https://www.w3.org/TR/service-workers/#navigator-service-worker-register)
+- [W3c.github.io ServiceWorker Register](https://w3c.github.io/ServiceWorker/#dom-serviceworkercontainer-register)
+- [W3.org option update via cache](https://www.w3.org/TR/service-workers/#enumdef-serviceworkerupdateviacache)
+- [WHATWG.org Worker Type](https://html.spec.whatwg.org/multipage/workers.html#workertype)
diff --git a/files/fr/web/api/serviceworkerglobalscope/index.md b/files/fr/web/api/serviceworkerglobalscope/index.md
index 49afb28427..c16273acd7 100644
--- a/files/fr/web/api/serviceworkerglobalscope/index.md
+++ b/files/fr/web/api/serviceworkerglobalscope/index.md
@@ -12,87 +12,80 @@ tags:
   - TopicStub
 translation_of: Web/API/ServiceWorkerGlobalScope
 ---
-<div>{{APIRef("Service Workers API")}}</div>
-
-<p>The <strong><code>ServiceWorkerGlobalScope</code></strong> interface of the <a href="/en-US/docs/Web/API/Service_Worker_API">Service Worker API</a> represents the global execution context of a service worker.</p>
-
-<p>Developers should keep in mind that the ServiceWorker state is not persisted across the termination/restart cycle, so each event handler should assume it's being invoked with a bare, default global state.</p>
-
-<p>Once successfully registered, a service worker can and will be terminated when idle to conserve memory and processor power. An active service worker is automatically restarted to respond to events, such as {{domxref("ServiceWorkerGlobalScope.onfetch")}} or {{domxref("ServiceWorkerGlobalScope.onmessage")}}.</p>
-
-<p>Additionally, synchronous requests are not allowed from within a service worker — only asynchronous requests, like those initiated via the {{domxref("GlobalFetch.fetch", "fetch()")}} method, can be used.</p>
-
-<p>This interface inherits from the {{domxref("WorkerGlobalScope")}} interface, and its parent {{domxref("EventTarget")}}, and therefore implements properties from {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, and {{domxref("WindowEventHandlers")}}.</p>
-
-<p>{{InheritanceDiagram(700, 85, 20)}}</p>
-
-<h2 id="Properties">Properties</h2>
-
-<dl>
- <dt>{{domxref("ServiceWorkerGlobalScope.caches")}} {{readonlyinline}}</dt>
- <dd>Contains the {{domxref("CacheStorage")}} object associated with the service worker.</dd>
- <dt>{{domxref("ServiceWorkerGlobalScope.clients")}} {{readonlyinline}}</dt>
- <dd>Contains the {{domxref("Clients")}} object associated with the service worker.</dd>
- <dt>{{domxref("ServiceWorkerGlobalScope.registration")}} {{readonlyinline}}</dt>
- <dd>Contains the {{domxref("ServiceWorkerRegistration")}} object that represents the service worker's registration.</dd>
-</dl>
-
-<h2 id="Events">Events</h2>
-
-<dl>
- <dt>{{domxref("ServiceWorkerGlobalScope/activate_event", "activate")}}</dt>
- <dd>Occurs when a {{domxref("ServiceWorkerRegistration")}} acquires a new {{domxref("ServiceWorkerRegistration.active")}} worker.<br>
- Also available via the {{domxref("ServiceWorkerGlobalScope.onactivate")}} property.</dd>
- <dt>{{domxref("ServiceWorkerGlobalScope/contentdelete_event", "contentdelete")}}</dt>
- <dd>Occurs when an item is removed from the {{domxref("ContentIndex", "Content Index")}}.<br>
- Also available via the {{domxref("ServiceWorkerGlobalScope.oncontentdelete")}} property.</dd>
- <dt><code>fetch</code></dt>
- <dd>Occurs when a {{domxref("GlobalFetch.fetch", "fetch()")}} is called.<br>
- Also available via the {{domxref("ServiceWorkerGlobalScope.onfetch")}} property.</dd>
- <dt>{{domxref("ServiceWorkerGlobalScope/install_event", "install")}}</dt>
- <dd>Occurs when a {{domxref("ServiceWorkerRegistration")}} acquires a new {{domxref("ServiceWorkerRegistration.installing")}} worker.<br>
- Also available via the {{domxref("ServiceWorkerGlobalScope.oninstall")}} property.</dd>
- <dt>{{domxref("ServiceWorkerGlobalScope/message_event", "message")}}</dt>
- <dd>Occurs when incoming messages are received. Controlled pages can use the {{domxref("MessagePort.postMessage()")}} method to send messages to service workers. The service worker can optionally send a response back via the {{domxref("MessagePort")}} exposed in <a href="https://html.spec.whatwg.org/multipage/comms.html#messageport"><code>event.data.port</code></a>, corresponding to the controlled page.<br>
- Also available via the {{domxref("ServiceWorkerGlobalScope.onmessage")}} property.</dd>
- <dt>{{domxref("ServiceWorkerGlobalScope/notificationclick_event", "notificationclick")}}</dt>
- <dd>Occurs when a user clicks on a displayed notification.<br>
- Also available via the {{domxref("ServiceWorkerGlobalScope.onnotificationclick")}} property.</dd>
- <dt><code>notificationclose</code></dt>
- <dd>Occurs — when a user closes a displayed notification.<br>
- Also available via the {{domxref("ServiceWorkerGlobalScope.onnotificationclose")}} property.</dd>
- <dt>{{domxref("ServiceWorkerGlobalScope/push_event", "push")}}</dt>
- <dd>Occurs when a server push notification is received.<br>
- Also available via the {{domxref("ServiceWorkerGlobalScope.onpush")}} property.</dd>
- <dt>{{domxref("ServiceWorkerGlobalScope/pushsubscriptionchange_event", "pushsubscriptionchange")}}</dt>
- <dd>Occurs when a push subscription has been invalidated, or is about to be invalidated (e.g. when a push service sets an expiration time).<br>
- Also available via the {{domxref("ServiceWorkerGlobalScope.onpushsubscriptionchange")}} property.</dd>
- <dt><code>sync</code></dt>
- <dd>Triggered when a call to {{domxref("SyncManager.register")}} is made from a service worker client page. The attempt to sync is made either immediately if the network is available or as soon as the network becomes available.<br>
- Also available via the {{domxref("ServiceWorkerGlobalScope.onsync")}} property.</dd>
-</dl>
-
-<h2 id="Methods">Methods</h2>
-
-<dl>
- <dt>{{domxref("ServiceWorkerGlobalScope.skipWaiting()")}}</dt>
- <dd>Allows the current service worker registration to progress from waiting to active state while service worker clients are using it.</dd>
-</dl>
-
-<p><code>ServiceWorkerGlobalScope</code> implements {{domxref("WorkerGlobalScope")}} — which implements {{domxref("WindowOrWorkerGlobalScope")}}. Therefore it also has the following property available to it:</p>
-
-<dl>
- <dt>{{domxref("GlobalFetch.fetch()")}}</dt>
- <dd>Starts the process of fetching a resource. This returns a promise that resolves to the {{domxref("Response")}} object representing the response to your request. This algorithm is the entry point for the fetch handling handed to the service worker context.</dd>
-</dl>
-
-<h2 id="Examples">Examples</h2>
-
-<p>This code snippet is from the <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/prefetch/service-worker.js">service worker prefetch sample</a> (see <a href="https://googlechrome.github.io/samples/service-worker/prefetch/">prefetch example live</a>.) The {{domxref("ServiceWorkerGlobalScope.onfetch")}} event handler listens for the <code>fetch</code> event. When fired, the code returns a promise that resolves to the first matching request in the {{domxref("Cache")}} object. If no match is found, the code fetches a response from the network.</p>
-
-<p>The code also handles exceptions thrown from the {{domxref("GlobalFetch.fetch", "fetch()")}} operation. Note that an HTTP error response (e.g., 404) will not trigger an exception. It will return a normal response object that has the appropriate error code set.</p>
-
-<pre class="brush: js">self.addEventListener('fetch', function(event) {
+{{APIRef("Service Workers API")}}
+
+The **`ServiceWorkerGlobalScope`** interface of the [Service Worker API](/en-US/docs/Web/API/Service_Worker_API) represents the global execution context of a service worker.
+
+Developers should keep in mind that the ServiceWorker state is not persisted across the termination/restart cycle, so each event handler should assume it's being invoked with a bare, default global state.
+
+Once successfully registered, a service worker can and will be terminated when idle to conserve memory and processor power. An active service worker is automatically restarted to respond to events, such as {{domxref("ServiceWorkerGlobalScope.onfetch")}} or {{domxref("ServiceWorkerGlobalScope.onmessage")}}.
+
+Additionally, synchronous requests are not allowed from within a service worker — only asynchronous requests, like those initiated via the {{domxref("GlobalFetch.fetch", "fetch()")}} method, can be used.
+
+This interface inherits from the {{domxref("WorkerGlobalScope")}} interface, and its parent {{domxref("EventTarget")}}, and therefore implements properties from {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, and {{domxref("WindowEventHandlers")}}.
+
+{{InheritanceDiagram(700, 85, 20)}}
+
+## Properties
+
+- {{domxref("ServiceWorkerGlobalScope.caches")}} {{readonlyinline}}
+  - : Contains the {{domxref("CacheStorage")}} object associated with the service worker.
+- {{domxref("ServiceWorkerGlobalScope.clients")}} {{readonlyinline}}
+  - : Contains the {{domxref("Clients")}} object associated with the service worker.
+- {{domxref("ServiceWorkerGlobalScope.registration")}} {{readonlyinline}}
+  - : Contains the {{domxref("ServiceWorkerRegistration")}} object that represents the service worker's registration.
+
+## Events
+
+- {{domxref("ServiceWorkerGlobalScope/activate_event", "activate")}}
+  - : Occurs when a {{domxref("ServiceWorkerRegistration")}} acquires a new {{domxref("ServiceWorkerRegistration.active")}} worker.
+    Also available via the {{domxref("ServiceWorkerGlobalScope.onactivate")}} property.
+- {{domxref("ServiceWorkerGlobalScope/contentdelete_event", "contentdelete")}}
+  - : Occurs when an item is removed from the {{domxref("ContentIndex", "Content Index")}}.
+    Also available via the {{domxref("ServiceWorkerGlobalScope.oncontentdelete")}} property.
+- `fetch`
+  - : Occurs when a {{domxref("GlobalFetch.fetch", "fetch()")}} is called.
+    Also available via the {{domxref("ServiceWorkerGlobalScope.onfetch")}} property.
+- {{domxref("ServiceWorkerGlobalScope/install_event", "install")}}
+  - : Occurs when a {{domxref("ServiceWorkerRegistration")}} acquires a new {{domxref("ServiceWorkerRegistration.installing")}} worker.
+    Also available via the {{domxref("ServiceWorkerGlobalScope.oninstall")}} property.
+- {{domxref("ServiceWorkerGlobalScope/message_event", "message")}}
+  - : Occurs when incoming messages are received. Controlled pages can use the {{domxref("MessagePort.postMessage()")}} method to send messages to service workers. The service worker can optionally send a response back via the {{domxref("MessagePort")}} exposed in [`event.data.port`](https://html.spec.whatwg.org/multipage/comms.html#messageport), corresponding to the controlled page.
+    Also available via the {{domxref("ServiceWorkerGlobalScope.onmessage")}} property.
+- {{domxref("ServiceWorkerGlobalScope/notificationclick_event", "notificationclick")}}
+  - : Occurs when a user clicks on a displayed notification.
+    Also available via the {{domxref("ServiceWorkerGlobalScope.onnotificationclick")}} property.
+- `notificationclose`
+  - : Occurs — when a user closes a displayed notification.
+    Also available via the {{domxref("ServiceWorkerGlobalScope.onnotificationclose")}} property.
+- {{domxref("ServiceWorkerGlobalScope/push_event", "push")}}
+  - : Occurs when a server push notification is received.
+    Also available via the {{domxref("ServiceWorkerGlobalScope.onpush")}} property.
+- {{domxref("ServiceWorkerGlobalScope/pushsubscriptionchange_event", "pushsubscriptionchange")}}
+  - : Occurs when a push subscription has been invalidated, or is about to be invalidated (e.g. when a push service sets an expiration time).
+    Also available via the {{domxref("ServiceWorkerGlobalScope.onpushsubscriptionchange")}} property.
+- `sync`
+  - : Triggered when a call to {{domxref("SyncManager.register")}} is made from a service worker client page. The attempt to sync is made either immediately if the network is available or as soon as the network becomes available.
+    Also available via the {{domxref("ServiceWorkerGlobalScope.onsync")}} property.
+
+## Methods
+
+- {{domxref("ServiceWorkerGlobalScope.skipWaiting()")}}
+  - : Allows the current service worker registration to progress from waiting to active state while service worker clients are using it.
+
+`ServiceWorkerGlobalScope` implements {{domxref("WorkerGlobalScope")}} — which implements {{domxref("WindowOrWorkerGlobalScope")}}. Therefore it also has the following property available to it:
+
+- {{domxref("GlobalFetch.fetch()")}}
+  - : Starts the process of fetching a resource. This returns a promise that resolves to the {{domxref("Response")}} object representing the response to your request. This algorithm is the entry point for the fetch handling handed to the service worker context.
+
+## Examples
+
+This code snippet is from the [service worker prefetch sample](https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/prefetch/service-worker.js) (see [prefetch example live](https://googlechrome.github.io/samples/service-worker/prefetch/).) The {{domxref("ServiceWorkerGlobalScope.onfetch")}} event handler listens for the `fetch` event. When fired, the code returns a promise that resolves to the first matching request in the {{domxref("Cache")}} object. If no match is found, the code fetches a response from the network.
+
+The code also handles exceptions thrown from the {{domxref("GlobalFetch.fetch", "fetch()")}} operation. Note that an HTTP error response (e.g., 404) will not trigger an exception. It will return a normal response object that has the appropriate error code set.
+
+```js
+self.addEventListener('fetch', function(event) {
   console.log('Handling fetch event for', event.request.url);
 
   event.respondWith(
@@ -115,38 +108,22 @@ translation_of: Web/API/ServiceWorkerGlobalScope
       });
     })
   );
-});</pre>
-
-<h2 id="Specifications">Specifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('Service Workers', '#serviceworkerglobalscope-interface', 'ServiceWorkerGlobalScope')}}</td>
-   <td>{{Spec2('Service Workers')}}</td>
-   <td>Initial definition</td>
-  </tr>
- </tbody>
-</table>
+});
+```
 
-<h2 id="Browser_compatibility">Browser compatibility</h2>
+## Specifications
 
+| Specification                                                                                                                        | Status                               | Comment            |
+| ------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ------------------ |
+| {{SpecName('Service Workers', '#serviceworkerglobalscope-interface', 'ServiceWorkerGlobalScope')}} | {{Spec2('Service Workers')}} | Initial definition |
 
+## Browser compatibility
 
-<p>{{Compat("api.ServiceWorkerGlobalScope")}}</p>
+{{Compat("api.ServiceWorkerGlobalScope")}}
 
-<h2 id="See_also">See also</h2>
+## See also
 
-<ul>
- <li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li>
- <li><a href="https://github.com/mdn/sw-test">Service workers basic code example</a></li>
- <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li>
- <li>{{jsxref("Promise")}}</li>
-</ul>
+- [Using Service Workers](/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers)
+- [Service workers basic code example](https://github.com/mdn/sw-test)
+- [Is ServiceWorker ready?](https://jakearchibald.github.io/isserviceworkerready/)
+- {{jsxref("Promise")}}
diff --git a/files/fr/web/api/serviceworkerglobalscope/onnotificationclick/index.md b/files/fr/web/api/serviceworkerglobalscope/onnotificationclick/index.md
index a3dedb93af..c5e9dbe111 100644
--- a/files/fr/web/api/serviceworkerglobalscope/onnotificationclick/index.md
+++ b/files/fr/web/api/serviceworkerglobalscope/onnotificationclick/index.md
@@ -11,25 +11,25 @@ tags:
   - onnotificationclick
 translation_of: Web/API/ServiceWorkerGlobalScope/onnotificationclick
 ---
-<p>{{APIRef("Service Workers API")}}</p>
+{{APIRef("Service Workers API")}}
 
-<p>La propriété <strong><code>ServiceWorkerGlobalScope.onnotificationclick</code></strong> est un gestionnaire d'événements appelé chaque fois que l'événement {{Event("notificationclick")}} est envoyé sur l'objet {{domxref ("ServiceWorkerGlobalScope")}}, c'est-à-dire lorsqu'un utilisateur clique sur une notification affichée générée par {{domxref("ServiceWorkerRegistration.showNotification()")}}.</p>
+La propriété **`ServiceWorkerGlobalScope.onnotificationclick`** est un gestionnaire d'événements appelé chaque fois que l'événement {{Event("notificationclick")}} est envoyé sur l'objet {{domxref ("ServiceWorkerGlobalScope")}}, c'est-à-dire lorsqu'un utilisateur clique sur une notification affichée générée par {{domxref("ServiceWorkerRegistration.showNotification()")}}.
 
-<p>Les notifications créées sur le thread principal ou dans un worker qui ne sont pas des service worker utilisant le constructeur {{domxref ("Notification.Notification", "Notification()")}} recevront à la place un événement {{Event("click")}} sur l'objet <code>Notification</code> lui-même.</p>
+Les notifications créées sur le thread principal ou dans un worker qui ne sont pas des service worker utilisant le constructeur {{domxref ("Notification.Notification", "Notification()")}} recevront à la place un événement {{Event("click")}} sur l'objet `Notification` lui-même.
 
-<div class="note">
-<p><strong>Note :</strong> Essayer de créer une notification dans le {{domxref ("ServiceWorkerGlobalScope")}} en utilisant le constructeur {{domxref ("Notification.Notification", "Notification()")}} générera une erreur.</p>
-</div>
+> **Note :** Essayer de créer une notification dans le {{domxref ("ServiceWorkerGlobalScope")}} en utilisant le constructeur {{domxref ("Notification.Notification", "Notification()")}} générera une erreur.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">ServiceWorkerGlobalScope.onnotificationclick = function(NotificationEvent) { ... }
-ServiceWorkerGlobalScope.onnotificationclick = (NotificationEvent) =&gt; { ... }
-</pre>
+```js
+ServiceWorkerGlobalScope.onnotificationclick = function(NotificationEvent) { ... }
+ServiceWorkerGlobalScope.onnotificationclick = (NotificationEvent) => { ... }
+```
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">self.onnotificationclick = (event) =&gt; {
+```js
+self.onnotificationclick = (event) => {
   console.log('On notification click: ', event.notification.tag)
   event.notification.close()
 
@@ -40,34 +40,23 @@ ServiceWorkerGlobalScope.onnotificationclick = (NotificationEvent) =&gt; { ... }
       .matchAll({
         type: 'window'
       })
-      .then((clientList) =&gt; {
-        for (let i = 0; i &lt; clientList.length; i++) {
+      .then((clientList) => {
+        for (let i = 0; i < clientList.length; i++) {
           const client = clientList[i]
-          if (client.url == '/' &amp;&amp; 'focus' in client) return client.focus()
+          if (client.url == '/' && 'focus' in client) return client.focus()
         }
         if (clients.openWindow) return clients.openWindow('/')
       })
   )
 }
-</pre>
+```
 
-<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">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Web Notifications','#dom-serviceworkerglobalscope-onnotificationclick','onnotificationclick')}}</td>
-   <td>{{Spec2('Web Notifications')}}</td>
-   <td>Définition initiale. Cette propriété est spécifiée dans {{domxref ('Notifications_API')}} même si elle fait partie de {{domxref ('ServiceWorkerGlobalScope')}}.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                                    | État                                     | Commentaire                                                                                                                                                                            |
+| ------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('Web Notifications','#dom-serviceworkerglobalscope-onnotificationclick','onnotificationclick')}} | {{Spec2('Web Notifications')}} | Définition initiale. Cette propriété est spécifiée dans {{domxref ('Notifications_API')}} même si elle fait partie de {{domxref ('ServiceWorkerGlobalScope')}}. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.ServiceWorkerGlobalScope.onnotificationclick")}}</p>
+{{Compat("api.ServiceWorkerGlobalScope.onnotificationclick")}}
diff --git a/files/fr/web/api/serviceworkerregistration/active/index.md b/files/fr/web/api/serviceworkerregistration/active/index.md
index 257fc3eb90..9fa64a83ab 100644
--- a/files/fr/web/api/serviceworkerregistration/active/index.md
+++ b/files/fr/web/api/serviceworkerregistration/active/index.md
@@ -3,55 +3,38 @@ title: ServiceWorkerRegistration.active
 slug: Web/API/ServiceWorkerRegistration/active
 translation_of: Web/API/ServiceWorkerRegistration/active
 ---
-<div>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</div>
+{{SeeCompatTable}}{{APIRef("Service Workers API")}}
 
-<p>La propriété <strong><code>active</code></strong> de l’interface {{domxref("ServiceWorkerRegistration")}} retourne un <em>service worker</em> dont le {{domxref("ServiceWorker.state")}} est <code>activating</code> ou <code>activated</code>. Cette propriété est initialement définie à <code>null</code>.</p>
+La propriété **`active`** de l’interface {{domxref("ServiceWorkerRegistration")}} retourne un _service worker_ dont le {{domxref("ServiceWorker.state")}} est `activating` ou `activated`. Cette propriété est initialement définie à `null`.
 
-<p>Un <em>worker</em> actif contrôle un {{domxref("ServiceWorkerClient")}} si l’URL du client appartient au domaine de l’inscription (l’option <code>scope</code> définie lorsque {{domxref("ServiceWorkerContainer.register")}} est initialement appelé.)</p>
+Un _worker_ actif contrôle un {{domxref("ServiceWorkerClient")}} si l’URL du client appartient au domaine de l’inscription (l’option `scope` définie lorsque {{domxref("ServiceWorkerContainer.register")}} est initialement appelé.)
 
-<div class="note">
-<p><strong>Note :</strong> Cette fonctionnalité est disponible dans les <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
-</div>
+> **Note :** Cette fonctionnalité est disponible dans les [Web Workers](/en-US/docs/Web/API/Web_Workers_API).
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">sw = ServiceWorker.active
-</pre>
+    sw = ServiceWorker.active
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>Un objet {{domxref("ServiceWorker")}}, si le <em>worker</em> est actuellement dans un état <code>activating</code> ou <code>activated</code>.</p>
+Un objet {{domxref("ServiceWorker")}}, si le _worker_ est actuellement dans un état `activating` ou `activated`.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<div> </div>
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Service Workers', '#service-worker-registration-active-attribute', 'ServiceWorkerRegistration.active')}}</td>
-   <td>{{Spec2('Service Workers')}}</td>
-   <td>Définition initiale.<br>
-     </td>
-  </tr>
- </tbody>
-</table>
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+| Spécification                                                                                                                                                | Statut                               | Commentaire            |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ---------------------- |
+| {{SpecName('Service Workers', '#service-worker-registration-active-attribute', 'ServiceWorkerRegistration.active')}} | {{Spec2('Service Workers')}} | Définition initiale.   |
 
-<p>{{Compat("api.ServiceWorkerRegistration.active")}}</p>
+## Compatibilité des navigateurs
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+{{Compat("api.ServiceWorkerRegistration.active")}}
 
-<ul>
- <li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Utiliser les Service Workers</a></li>
- <li><a href="https://github.com/mdn/sw-test">Service workers basic code example</a></li>
- <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li>
- <li>{{jsxref("Promise")}}</li>
- <li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Utilisation des web workers</a></li>
-</ul>
+## Voir aussi
+
+- [Utiliser les Service Workers](/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers)
+- [Service workers basic code example](https://github.com/mdn/sw-test)
+- [Is ServiceWorker ready?](https://jakearchibald.github.io/isserviceworkerready/)
+- {{jsxref("Promise")}}
+- [Utilisation des web workers](/en-US/docs/Web/Guide/Performance/Using_web_workers)
diff --git a/files/fr/web/api/serviceworkerregistration/getnotifications/index.md b/files/fr/web/api/serviceworkerregistration/getnotifications/index.md
index 23379e7520..7e9aaa2230 100644
--- a/files/fr/web/api/serviceworkerregistration/getnotifications/index.md
+++ b/files/fr/web/api/serviceworkerregistration/getnotifications/index.md
@@ -13,60 +13,47 @@ tags:
   - getNotifications
 translation_of: Web/API/ServiceWorkerRegistration/getNotifications
 ---
-<div>{{APIRef("Service Workers API")}}</div>
+{{APIRef("Service Workers API")}}
 
-<p>La méthode <strong><code>getNotifications()</code></strong> de l'interface {{domxref ("ServiceWorkerRegistration")}} renvoie une liste des notifications dans l'ordre dans lequel elles ont été créées à partir de l'origine actuelle via l'enregistrement actuel du service worker. Les origines peuvent avoir de nombreuses inscriptions de service worker actives mais de portée différente. Les notifications créées par un service worker sur la même origine ne seront pas disponibles pour les autres services workers actifs sur la même origine.</p>
+La méthode **`getNotifications()`** de l'interface {{domxref ("ServiceWorkerRegistration")}} renvoie une liste des notifications dans l'ordre dans lequel elles ont été créées à partir de l'origine actuelle via l'enregistrement actuel du service worker. Les origines peuvent avoir de nombreuses inscriptions de service worker actives mais de portée différente. Les notifications créées par un service worker sur la même origine ne seront pas disponibles pour les autres services workers actifs sur la même origine.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>s​erviceWorkerRegistration</em>.getNotifications(<em>options</em>)
-.then(function(<em>notificationsList</em>) { ... })</pre>
+    s​erviceWorkerRegistration.getNotifications(options)
+    .then(function(notificationsList) { ... })
 
-<h3 id="Paramétres">Paramétres</h3>
+### Paramétres
 
-<dl>
- <dt>options {{optional_inline}}</dt>
- <dd>Un objet contenant des options pour filtrer les notifications renvoyées. Les options disponibles sont:
- <ul>
-  <li><code>tag</code>: Un {{domxref ("DOMString")}} représentant un tag de notification. Si spécifié, seules les notifications contenant cette balise seront renvoyées.</li>
- </ul>
- </dd>
-</dl>
+- options {{optional_inline}}
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+  - : Un objet contenant des options pour filtrer les notifications renvoyées. Les options disponibles sont:
 
-<p>Une {{jsxref ("Promise", "Promesse")}} qui se résout en une liste d'objets {{domxref ("Notification")}}.</p>
+    - `tag`: Un {{domxref ("DOMString")}} représentant un tag de notification. Si spécifié, seules les notifications contenant cette balise seront renvoyées.
 
-<h2 id="Exemple">Exemple</h2>
+### Valeur de retour
 
-<pre class="brush: js">navigator.serviceWorker.register('sw.js')
+Une {{jsxref ("Promise", "Promesse")}} qui se résout en une liste d'objets {{domxref ("Notification")}}.
+
+## Exemple
+
+```js
+navigator.serviceWorker.register('sw.js')
 
 const options = { tag: 'user_alerts' }
 
-navigator.serviceWorker.ready.then((registration) =&gt; {
-  registration.getNotifications(options).then((notifications) =&gt; {
+navigator.serviceWorker.ready.then((registration) => {
+  registration.getNotifications(options).then((notifications) => {
     // do something with your notifications
   })
 })
-</pre>
-
-<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">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Web Notifications', '#dom-serviceworkerregistration-getnotifications', 'ServiceWorkerRegistration.getNotifications()')}}</td>
-   <td>{{Spec2('Web Notifications')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.ServiceWorkerRegistration.getNotifications")}}</p>
+```
+
+## Spécifications
+
+| Spécification                                                                                                                                                                    | État                                     | Commentaire         |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ------------------- |
+| {{SpecName('Web Notifications', '#dom-serviceworkerregistration-getnotifications', 'ServiceWorkerRegistration.getNotifications()')}} | {{Spec2('Web Notifications')}} | Définition initiale |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.ServiceWorkerRegistration.getNotifications")}}
diff --git a/files/fr/web/api/serviceworkerregistration/index.md b/files/fr/web/api/serviceworkerregistration/index.md
index 7412dfa554..a261d8632d 100644
--- a/files/fr/web/api/serviceworkerregistration/index.md
+++ b/files/fr/web/api/serviceworkerregistration/index.md
@@ -14,73 +14,62 @@ tags:
   - Workers
 translation_of: Web/API/ServiceWorkerRegistration
 ---
-<div>
-<div>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</div>
-</div>
+{{SeeCompatTable}}{{APIRef("Service Workers API")}}
 
-<p>The <code>ServiceWorkerRegistration</code> interface of the <a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a> represents the service worker registration. You register a service worker to control one or more pages that share the same origin.</p>
+The `ServiceWorkerRegistration` interface of the [ServiceWorker API](/en-US/docs/Web/API/ServiceWorker_API) represents the service worker registration. You register a service worker to control one or more pages that share the same origin.
 
-<p>The lifetime of a service worker registration is beyond that of the <code>ServiceWorkerRegistration</code> objects that represent them within the lifetime of their corresponding service worker clients. The browser maintains a persistent list of active <code>ServiceWorkerRegistration</code> objects.</p>
+The lifetime of a service worker registration is beyond that of the `ServiceWorkerRegistration` objects that represent them within the lifetime of their corresponding service worker clients. The browser maintains a persistent list of active `ServiceWorkerRegistration` objects.
 
-<div class="note">
-<p><strong>Note :</strong> This feature is available in <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
-</div>
+> **Note :** This feature is available in [Web Workers](/en-US/docs/Web/API/Web_Workers_API).
 
-<h2 id="Properties">Properties</h2>
+## Properties
 
-<p><em>Also implements properties from its parent interface, </em>{{domxref("EventTarget")}}.</p>
+_Also implements properties from its parent interface,_ {{domxref("EventTarget")}}.
 
-<dl>
- <dt>{{domxref("ServiceWorkerRegistration.scope")}} {{readonlyinline}}</dt>
- <dd>Returns a unique identifier for a service worker registration. This must be on the same origin as the document that registers the {{domxref("ServiceWorker")}}.</dd>
- <dt>{{domxref("ServiceWorkerRegistration.installing")}}{{readonlyinline}}</dt>
- <dd>Returns a service worker whose state is <code>installing</code>. This is initially set to <code>null</code>.</dd>
- <dt>{{domxref("ServiceWorkerRegistration.waiting")}}{{readonlyinline}}</dt>
- <dd>Returns a service worker whose state is <code>waiting</code>. This is initially set to <code>null</code>.</dd>
- <dt>{{domxref("ServiceWorkerRegistration.active")}}{{readonlyinline}}</dt>
- <dd>Returns a service worker whose state is either <code>activating</code> or <code>activated</code>. This is initially set to <code>null</code>. An active worker will control a {{domxref("ServiceWorkerClient")}} if the client's URL falls within the scope of the registration (the <code>scope</code> option set when {{domxref("ServiceWorkerContainer.register")}} is first called.)</dd>
- <dt>{{domxref("ServiceWorkerRegistration.navigationPreload")}} {{readonlyinline}}</dt>
- <dd>Returns the instance of {{domxref("NavigationPreloadManager")}} associated with the current service worker registration.</dd>
- <dt>{{domxref("ServiceWorkerRegistration.pushManager")}} {{readonlyinline}}</dt>
- <dd>Returns a reference to the {{domxref("PushManager")}} interface for managing push subscriptions including subscribing, getting an active subscription, and accessing push permission status.</dd>
- <dt>{{domxref("ServiceWorkerRegistration.sync")}} <strong>{{non-standard_inline}} </strong>{{readonlyinline}} </dt>
- <dd>Returns a reference to the {{domxref("SyncManager")}} interface, which manages background synchronization processes.</dd>
-</dl>
+- {{domxref("ServiceWorkerRegistration.scope")}} {{readonlyinline}}
+  - : Returns a unique identifier for a service worker registration. This must be on the same origin as the document that registers the {{domxref("ServiceWorker")}}.
+- {{domxref("ServiceWorkerRegistration.installing")}}{{readonlyinline}}
+  - : Returns a service worker whose state is `installing`. This is initially set to `null`.
+- {{domxref("ServiceWorkerRegistration.waiting")}}{{readonlyinline}}
+  - : Returns a service worker whose state is `waiting`. This is initially set to `null`.
+- {{domxref("ServiceWorkerRegistration.active")}}{{readonlyinline}}
+  - : Returns a service worker whose state is either `activating` or `activated`. This is initially set to `null`. An active worker will control a {{domxref("ServiceWorkerClient")}} if the client's URL falls within the scope of the registration (the `scope` option set when {{domxref("ServiceWorkerContainer.register")}} is first called.)
+- {{domxref("ServiceWorkerRegistration.navigationPreload")}} {{readonlyinline}}
+  - : Returns the instance of {{domxref("NavigationPreloadManager")}} associated with the current service worker registration.
+- {{domxref("ServiceWorkerRegistration.pushManager")}} {{readonlyinline}}
+  - : Returns a reference to the {{domxref("PushManager")}} interface for managing push subscriptions including subscribing, getting an active subscription, and accessing push permission status.
+- {{domxref("ServiceWorkerRegistration.sync")}} **{{non-standard_inline}}** {{readonlyinline}}
+  - : Returns a reference to the {{domxref("SyncManager")}} interface, which manages background synchronization processes.
 
-<h3 id="Unimplemented_properties">Unimplemented properties</h3>
+### Unimplemented properties
 
-<dl>
- <dt>{{domxref("serviceWorkerRegistration.periodicSync")}} {{non-standard_inline}} {{readonlyinline}}</dt>
- <dd>Returns a reference to the {{domxref("PeriodicSyncManager")}} interface, which manages periodic background synchronization processes. This was mentioned as an idea in the SW explainer at some point, but as yet has not been implemented anywhere.</dd>
-</dl>
+- {{domxref("serviceWorkerRegistration.periodicSync")}} {{non-standard_inline}} {{readonlyinline}}
+  - : Returns a reference to the {{domxref("PeriodicSyncManager")}} interface, which manages periodic background synchronization processes. This was mentioned as an idea in the SW explainer at some point, but as yet has not been implemented anywhere.
 
-<h3 id="Event_handlers">Event handlers</h3>
+### Event handlers
 
-<dl>
- <dt>{{domxref("ServiceWorkerRegistration.onupdatefound")}} {{readonlyinline}}</dt>
- <dd>An <a href="/en-US/docs/Web/API/EventListener"><code>EventListener</code></a> property called whenever an event of type <code>updatefound</code> is fired; it is fired any time the {{domxref("ServiceWorkerRegistration.installing")}} property acquires a new service worker.</dd>
-</dl>
+- {{domxref("ServiceWorkerRegistration.onupdatefound")}} {{readonlyinline}}
+  - : An [`EventListener`](/en-US/docs/Web/API/EventListener) property called whenever an event of type `updatefound` is fired; it is fired any time the {{domxref("ServiceWorkerRegistration.installing")}} property acquires a new service worker.
 
-<h2 id="Methods">Methods</h2>
+## Methods
 
-<p><em>Also implements methods from its parent interface, </em>{{domxref("EventTarget")}}.</p>
+_Also implements methods from its parent interface,_ {{domxref("EventTarget")}}.
 
-<dl>
- <dt>{{domxref("ServiceWorkerRegistration.getNotifications()")}}</dt>
- <dd>Returns a {{jsxref("Promise")}} that resolves to an array of {{domxref("Notification")}} objects.</dd>
- <dt>{{domxref("ServiceWorkerRegistration.showNotification()")}}</dt>
- <dd>Displays the notification with the requested title.</dd>
- <dt>{{domxref("ServiceWorkerRegistration.update()")}}</dt>
- <dd>Checks the server for an updated version of the service worker without consulting caches.</dd>
- <dt>{{domxref("ServiceWorkerRegistration.unregister()")}}</dt>
- <dd>Unregisters the service worker registration and returns a {{jsxref("Promise")}}. The service worker will finish any ongoing operations before it is unregistered.</dd>
-</dl>
+- {{domxref("ServiceWorkerRegistration.getNotifications()")}}
+  - : Returns a {{jsxref("Promise")}} that resolves to an array of {{domxref("Notification")}} objects.
+- {{domxref("ServiceWorkerRegistration.showNotification()")}}
+  - : Displays the notification with the requested title.
+- {{domxref("ServiceWorkerRegistration.update()")}}
+  - : Checks the server for an updated version of the service worker without consulting caches.
+- {{domxref("ServiceWorkerRegistration.unregister()")}}
+  - : Unregisters the service worker registration and returns a {{jsxref("Promise")}}. The service worker will finish any ongoing operations before it is unregistered.
 
-<h2 id="Examples">Examples</h2>
+## Examples
 
-<p>In this example, the code first checks whether the browser supports service workers and if so registers one. Next, it adds and <code>updatefound</code> event in which it uses the service worker registration to listen for further changes to the service worker's state. If the service worker hasn't changed since the last time it was registered, than the <code>updatefound</code> event will not be fired.</p>
+In this example, the code first checks whether the browser supports service workers and if so registers one. Next, it adds and `updatefound` event in which it uses the service worker registration to listen for further changes to the service worker's state. If the service worker hasn't changed since the last time it was registered, than the `updatefound` event will not be fired.
 
-<pre class="brush: js">if ('serviceWorker' in navigator) {
+```js
+if ('serviceWorker' in navigator) {
   navigator.serviceWorker.register('/sw.js')
   .then(function(registration) {
     registration.addEventListener('updatefound', function() {
@@ -99,52 +88,26 @@ translation_of: Web/API/ServiceWorkerRegistration
   });
 } else {
   console.log('Service workers are not supported.');
-}</pre>
-
-<h2 id="Specifications">Specifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Service Workers', '#service-worker-registration-obj', 'ServiceWorkerRegistration')}}</td>
-   <td>{{Spec2('Service Workers')}}</td>
-   <td>Initial definition.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('Push API', '#widl-ServiceWorkerRegistration-pushManager', 'PushManager')}}</td>
-   <td>{{Spec2('Push API')}}</td>
-   <td>Adds the {{domxref("PushManager","pushManager")}} property.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('Web Notifications')}}</td>
-   <td>{{Spec2('Web Notifications')}}</td>
-   <td>Adds the {{domxref("ServiceWorkerRegistration.showNotification()","showNotification()")}} method and the {{domxref("ServiceWorkerRegistration.getNotifications()","getNotifications()")}} method.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('Background Sync')}}</td>
-   <td>{{Spec2('Background Sync')}}</td>
-   <td>Adds the {{domxref("ServiceWorkerRegistration.sync","sync")}} property.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Browser compatibility</h2>
-
-
-
-<p>{{Compat("api.ServiceWorkerRegistration")}}</p>
-
-<h2 id="See_also">See also</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li>
- <li><a href="https://github.com/mdn/sw-test">Service workers basic code example</a></li>
- <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li>
- <li>{{jsxref("Promise")}}</li>
- <li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></li>
-</ul>
+}
+```
+
+## Specifications
+
+| Specification                                                                                                                    | Status                                   | Comment                                                                                                                                                                                                                                                   |
+| -------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('Service Workers', '#service-worker-registration-obj', 'ServiceWorkerRegistration')}} | {{Spec2('Service Workers')}}     | Initial definition.                                                                                                                                                                                                                                       |
+| {{SpecName('Push API', '#widl-ServiceWorkerRegistration-pushManager', 'PushManager')}}             | {{Spec2('Push API')}}             | Adds the {{domxref("PushManager","pushManager")}} property.                                                                                                                                                                                   |
+| {{SpecName('Web Notifications')}}                                                                                     | {{Spec2('Web Notifications')}} | Adds the {{domxref("ServiceWorkerRegistration.showNotification()","showNotification()")}} method and the {{domxref("ServiceWorkerRegistration.getNotifications()","getNotifications()")}} method. |
+| {{SpecName('Background Sync')}}                                                                                         | {{Spec2('Background Sync')}}     | Adds the {{domxref("ServiceWorkerRegistration.sync","sync")}} property.                                                                                                                                                                   |
+
+## Browser compatibility
+
+{{Compat("api.ServiceWorkerRegistration")}}
+
+## See also
+
+- [Using Service Workers](/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers)
+- [Service workers basic code example](https://github.com/mdn/sw-test)
+- [Is ServiceWorker ready?](https://jakearchibald.github.io/isserviceworkerready/)
+- {{jsxref("Promise")}}
+- [Using web workers](/en-US/docs/Web/Guide/Performance/Using_web_workers)
diff --git a/files/fr/web/api/serviceworkerregistration/scope/index.md b/files/fr/web/api/serviceworkerregistration/scope/index.md
index 19ef530db5..ab7bbaff13 100644
--- a/files/fr/web/api/serviceworkerregistration/scope/index.md
+++ b/files/fr/web/api/serviceworkerregistration/scope/index.md
@@ -11,45 +11,30 @@ tags:
   - scope
 translation_of: Web/API/ServiceWorkerRegistration/scope
 ---
-<div>{{APIRef("Service Workers API")}}</div>
+{{APIRef("Service Workers API")}}
 
-<p>La propriété en lecture seule <strong><code>scope</code></strong> de l'interface {{domxref ("ServiceWorkerRegistration")}} renvoie un identifiant unique pour un enregistrement de service worker. Le service worker doit être sur la même origine que le document qui enregistre le {{domxref ("ServiceWorker")}}.</p>
+La propriété en lecture seule **`scope`** de l'interface {{domxref ("ServiceWorkerRegistration")}} renvoie un identifiant unique pour un enregistrement de service worker. Le service worker doit être sur la même origine que le document qui enregistre le {{domxref ("ServiceWorker")}}.
 
-<div class="note">
-<p><strong>Note :</strong> Cette fonctionnalité est disponible dans <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
-</div>
+> **Note :** Cette fonctionnalité est disponible dans [Web Workers](/en-US/docs/Web/API/Web_Workers_API).
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>serviceWorkerRegistration</em>.scope</pre>
+    serviceWorkerRegistration.scope
 
-<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">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Service Workers', '#dom-serviceworkerregistration-scope', 'ServiceWorkerRegistration.scope')}}</td>
-   <td>{{Spec2('Service Workers')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                                | État                                 | Commentaire          |
+| -------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName('Service Workers', '#dom-serviceworkerregistration-scope', 'ServiceWorkerRegistration.scope')}} | {{Spec2('Service Workers')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.ServiceWorkerRegistration.scope")}}</p>
+{{Compat("api.ServiceWorkerRegistration.scope")}}
 
-<h2 id="Voir_également">Voir également</h2>
+## Voir également
 
-<ul>
- <li><a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers">Utilisation des Service Workers</a></li>
- <li><a href="https://github.com/mdn/sw-test">Exemple basique de code pour les Services workers</a></li>
- <li><a href="https://jakearchibald.github.io/isserviceworkerready/">ServiceWorker est-il prêt?</a></li>
- <li>{{jsxref("Promise","Promesse")}}</li>
- <li><a href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers">Utilisation des web workers</a></li>
-</ul>
+- [Utilisation des Service Workers](/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers)
+- [Exemple basique de code pour les Services workers](https://github.com/mdn/sw-test)
+- [ServiceWorker est-il prêt?](https://jakearchibald.github.io/isserviceworkerready/)
+- {{jsxref("Promise","Promesse")}}
+- [Utilisation des web workers](/en-US/docs/Web/API/Web_Workers_API/Using_web_workers)
diff --git a/files/fr/web/api/serviceworkerregistration/shownotification/index.md b/files/fr/web/api/serviceworkerregistration/shownotification/index.md
index fa1c3dfab1..99530c86a4 100644
--- a/files/fr/web/api/serviceworkerregistration/shownotification/index.md
+++ b/files/fr/web/api/serviceworkerregistration/shownotification/index.md
@@ -12,62 +12,59 @@ tags:
   - showNotification
 translation_of: Web/API/ServiceWorkerRegistration/showNotification
 ---
-<p>{{APIRef("Service Workers API")}}</p>
-
-<p>La méthode <strong><code>showNotification()</code></strong> de l'interface {{domxref("ServiceWorkerRegistration")}} crée une notification dans un service worker actif.</p>
-
-<div class="note">
-<p><strong>Note :</strong> Cette fonctionnalité est disponible dans les <a href="/fr/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
-</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><em>​serviceWorkerRegistration</em>.showNotification(<em>title</em>, [<em>options</em>])</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>title</code></dt>
- <dd>Définit un titre pour la notification, qui s'affiche en haut de la fenêtre de notification.</dd>
- <dt><code>options</code> {{optional_inline}}</dt>
- <dd>Un objet d'options contenant tous les paramètres personnalisés que vous souhaitez appliquer à la notification. Les options possibles sont:
- <ul>
-  <li><code>actions</code>: Un tableau de {{domxref ("NotificationAction")}} représentant les actions disponibles pour l'utilisateur lorsque la notification est présentée. Ce sont des options parmi lesquelles l'utilisateur peut choisir pour agir sur l'action dans le contexte de la notification elle-même. Le nom de l'action est envoyé au gestionnaire de notifications du service worker pour lui faire savoir que l'action a été sélectionnée par l'utilisateur. Les membres du tableau doivent être un objet. Il peut contenir les valeurs suivantes:
-   <ul>
-    <li>action: Une {{domxref("DOMString")}}  représentant une action utilisateur à afficher sur la notification.</li>
-    <li>title: Une {{domxref("DOMString")}} contenant le texte d'action à montrer à l'utilisateur.</li>
-    <li>icon: Une {{domxref("USVString")}} contenant l'URL d'une icône à afficher avec l'action.</li>
-   </ul>
-   Les réponses appropriées sont construites à l'aide de <code>event.action</code> dans l'événement {{event("notificationclick")}}.</li>
-  <li><code>badge</code>: Un {{domxref ("USVString")}} contenant l'URL de l'image utilisée pour représenter la notification lorsqu'il n'y a pas assez d'espace pour afficher la notification elle-même.</li>
-  <li><code>body</code>: Un {{domxref ("DOMString")}} représentant le corps du texte de la notification, qui est affiché sous le titre.</li>
-  <li><code>data</code>: Données arbitraires que vous souhaitez associer à la notification. Elles peuvent être de n'importe quel type de données.</li>
-  <li><code>dir</code>: La direction dans laquelle afficher la notification. La valeur par défaut est <code>auto</code>, qui adopte simplement le comportement du paramètre de langue du navigateur, mais vous pouvez remplacer ce comportement en définissant les valeurs de <code>ltr</code> et <code>rtl</code> (bien que la plupart des navigateurs semblent ignorer ces paramètres.)</li>
-  <li><code>icon</code>: Une {{domxref ("USVString")}} contenant l'URL d'une icône à afficher dans la notification.</li>
-  <li><code>image</code>: Une {{domxref ("USVString")}} contenant l'URL d'une image à afficher dans la notification.</li>
-  <li><code>lang</code>: La langue de la notification, telle que spécifiée à l'aide d'un {{domxref ("DOMString")}} représentant une <a href="https://www.rfc-editor.org/rfc/bcp/bcp47.txt">balise de langue BCP 47</a>. Consultez la page des <a href="http://www.sitepoint.com/web-foundations/iso-2-letter-language-codes/">codes de langue à 2 lettres ISO</a> de Sitepoint pour une référence simple.</li>
-  <li><code>renotify</code>: Un {{domxref ("Boolean", "Booléen")}} spécifiant si l'utilisateur doit être notifié après qu'une nouvelle notification remplace l'ancienne. La valeur par défaut est <code>false</code>, ce qui signifie qu'ils ne seront pas notifiés.</li>
-  <li><code>requireInteraction</code>: Un {{domxref ("Boolean", "Booléen")}} indiquant qu'une notification doit rester active jusqu'à ce que l'utilisateur clique dessus ou la rejette, plutôt que de se fermer automatiquement. La valeur par défaut est <code>false</code>.</li>
-  <li><code>silent</code>: Un {{domxref ("Boolean", "Booléen")}} spécifiant si la notification est silencieuse (aucun son ni vibration émis), quels que soient les paramètres de l'appareil. La valeur par défaut est <code>false</code>, ce qui signifie qu'il ne sera pas silencieux.</li>
-  <li><code>tag</code>: Un {{domxref ("DOMString")}} représentant un tag d'identification pour la notification.</li>
-  <li><code>timestamp</code>: Un {{domxref ("DOMTimeStamp")}} représentant l'heure à laquelle la notification a été créée. Il peut être utilisé pour indiquer l'heure à laquelle une notification est réelle. Par exemple, cela peut se produire dans le passé lorsqu'une notification est utilisée pour un message qui n'a pas pu être envoyé immédiatement parce que l'appareil était hors ligne, ou dans le futur pour une réunion sur le point de commencer.</li>
-  <li><code>vibrate</code>: Un <a href="/fr/docs/Web/Guide/API/Vibration#Vibration_patterns">modèle de vibration</a> que le matériel de vibration de l'appareil émet avec la notification. Un modèle de vibration peut être un réseau avec aussi peu qu'un membre. Les valeurs sont des temps en millisecondes où les indices pairs (0, 2, 4, etc.) indiquent la durée de vibration et les indices impairs indiquent la durée de la pause. Par exemple, [300, 100, 400] vibrerait 300 ms, mettrait en pause 100 ms, puis vibrerait 400 ms.</li>
- </ul>
- </dd>
-</dl>
-
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-
-<p>Un {{jsxref('Promise')}} qui se résout en <code>undefined</code>.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">navigator.serviceWorker.register('sw.js')
+{{APIRef("Service Workers API")}}
+
+La méthode **`showNotification()`** de l'interface {{domxref("ServiceWorkerRegistration")}} crée une notification dans un service worker actif.
+
+> **Note :** Cette fonctionnalité est disponible dans les [Web Workers](/fr/docs/Web/API/Web_Workers_API).
+
+## Syntaxe
+
+    ​serviceWorkerRegistration.showNotification(title, [options])
+
+### Paramètres
+
+- `title`
+  - : Définit un titre pour la notification, qui s'affiche en haut de la fenêtre de notification.
+- `options` {{optional_inline}}
+
+  - : Un objet d'options contenant tous les paramètres personnalisés que vous souhaitez appliquer à la notification. Les options possibles sont:
+
+    - `actions`: Un tableau de {{domxref ("NotificationAction")}} représentant les actions disponibles pour l'utilisateur lorsque la notification est présentée. Ce sont des options parmi lesquelles l'utilisateur peut choisir pour agir sur l'action dans le contexte de la notification elle-même. Le nom de l'action est envoyé au gestionnaire de notifications du service worker pour lui faire savoir que l'action a été sélectionnée par l'utilisateur. Les membres du tableau doivent être un objet. Il peut contenir les valeurs suivantes:
+
+      - action: Une {{domxref("DOMString")}}  représentant une action utilisateur à afficher sur la notification.
+      - title: Une {{domxref("DOMString")}} contenant le texte d'action à montrer à l'utilisateur.
+      - icon: Une {{domxref("USVString")}} contenant l'URL d'une icône à afficher avec l'action.
+
+      Les réponses appropriées sont construites à l'aide de `event.action` dans l'événement {{event("notificationclick")}}.
+
+    - `badge`: Un {{domxref ("USVString")}} contenant l'URL de l'image utilisée pour représenter la notification lorsqu'il n'y a pas assez d'espace pour afficher la notification elle-même.
+    - `body`: Un {{domxref ("DOMString")}} représentant le corps du texte de la notification, qui est affiché sous le titre.
+    - `data`: Données arbitraires que vous souhaitez associer à la notification. Elles peuvent être de n'importe quel type de données.
+    - `dir`: La direction dans laquelle afficher la notification. La valeur par défaut est `auto`, qui adopte simplement le comportement du paramètre de langue du navigateur, mais vous pouvez remplacer ce comportement en définissant les valeurs de `ltr` et `rtl` (bien que la plupart des navigateurs semblent ignorer ces paramètres.)
+    - `icon`: Une {{domxref ("USVString")}} contenant l'URL d'une icône à afficher dans la notification.
+    - `image`: Une {{domxref ("USVString")}} contenant l'URL d'une image à afficher dans la notification.
+    - `lang`: La langue de la notification, telle que spécifiée à l'aide d'un {{domxref ("DOMString")}} représentant une [balise de langue BCP 47](https://www.rfc-editor.org/rfc/bcp/bcp47.txt). Consultez la page des [codes de langue à 2 lettres ISO](http://www.sitepoint.com/web-foundations/iso-2-letter-language-codes/) de Sitepoint pour une référence simple.
+    - `renotify`: Un {{domxref ("Boolean", "Booléen")}} spécifiant si l'utilisateur doit être notifié après qu'une nouvelle notification remplace l'ancienne. La valeur par défaut est `false`, ce qui signifie qu'ils ne seront pas notifiés.
+    - `requireInteraction`: Un {{domxref ("Boolean", "Booléen")}} indiquant qu'une notification doit rester active jusqu'à ce que l'utilisateur clique dessus ou la rejette, plutôt que de se fermer automatiquement. La valeur par défaut est `false`.
+    - `silent`: Un {{domxref ("Boolean", "Booléen")}} spécifiant si la notification est silencieuse (aucun son ni vibration émis), quels que soient les paramètres de l'appareil. La valeur par défaut est `false`, ce qui signifie qu'il ne sera pas silencieux.
+    - `tag`: Un {{domxref ("DOMString")}} représentant un tag d'identification pour la notification.
+    - `timestamp`: Un {{domxref ("DOMTimeStamp")}} représentant l'heure à laquelle la notification a été créée. Il peut être utilisé pour indiquer l'heure à laquelle une notification est réelle. Par exemple, cela peut se produire dans le passé lorsqu'une notification est utilisée pour un message qui n'a pas pu être envoyé immédiatement parce que l'appareil était hors ligne, ou dans le futur pour une réunion sur le point de commencer.
+    - `vibrate`: Un [modèle de vibration](/fr/docs/Web/Guide/API/Vibration#Vibration_patterns) que le matériel de vibration de l'appareil émet avec la notification. Un modèle de vibration peut être un réseau avec aussi peu qu'un membre. Les valeurs sont des temps en millisecondes où les indices pairs (0, 2, 4, etc.) indiquent la durée de vibration et les indices impairs indiquent la durée de la pause. Par exemple, \[300, 100, 400] vibrerait 300 ms, mettrait en pause 100 ms, puis vibrerait 400 ms.
+
+### Valeur de retour
+
+Un {{jsxref('Promise')}} qui se résout en `undefined`.
+
+## Exemples
+
+```js
+navigator.serviceWorker.register('sw.js')
 
 function showNotification() {
-  Notification.requestPermission((result) =&gt; {
+  Notification.requestPermission((result) => {
     if (result === 'granted') {
-      navigator.serviceWorker.ready.then((registration) =&gt; {
+      navigator.serviceWorker.ready.then((registration) => {
         registration.showNotification('Vibration Sample', {
           body: 'Buzz! Buzz!',
           icon: '../images/touch/chrome-touch-icon-192x192.png',
@@ -78,29 +75,18 @@ function showNotification() {
     }
   })
 }
-</pre>
+```
 
-<p>Pour appeler la fonction ci-dessus à un moment approprié, vous pouvez utiliser le gestionnaire d'événements {{domxref ("ServiceWorkerGlobalScope.onnotificationclick")}}.</p>
+Pour appeler la fonction ci-dessus à un moment approprié, vous pouvez utiliser le gestionnaire d'événements {{domxref ("ServiceWorkerGlobalScope.onnotificationclick")}}.
 
-<p>Vous pouvez également récupérer les détails des {{domxref ("Notification", "Notifications")}} qui ont été déclenchés par le service worker actuel en utilisant {{domxref ("ServiceWorkerRegistration.getNotifications()")}}.</p>
+Vous pouvez également récupérer les détails des {{domxref ("Notification", "Notifications")}} qui ont été déclenchés par le service worker actuel en utilisant {{domxref ("ServiceWorkerRegistration.getNotifications()")}}.
 
-<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">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Web Notifications','#dom-serviceworkerregistration-shownotification','showNotification()')}}</td>
-   <td>{{Spec2('Web Notifications')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                                | État                                     | Commentaire          |
+| -------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('Web Notifications','#dom-serviceworkerregistration-shownotification','showNotification()')}} | {{Spec2('Web Notifications')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.ServiceWorkerRegistration.showNotification")}}</p>
+{{Compat("api.ServiceWorkerRegistration.showNotification")}}
diff --git a/files/fr/web/api/settimeout/index.md b/files/fr/web/api/settimeout/index.md
index c487fcc22f..4f4b40a587 100644
--- a/files/fr/web/api/settimeout/index.md
+++ b/files/fr/web/api/settimeout/index.md
@@ -9,60 +9,57 @@ tags:
 translation_of: Web/API/WindowOrWorkerGlobalScope/setTimeout
 original_slug: Web/API/WindowOrWorkerGlobalScope/setTimeout
 ---
-<div>{{APIRef("HTML DOM")}}</div>
+{{APIRef("HTML DOM")}}
 
-<p>La méthode <strong><code>setTimeout()</code></strong>, rattachée au <em>mixin</em>  {{domxref("WindowOrWorkerGlobalScope")}} (et qui succède à <code>window.setTimeout()</code>) permet de définir un « minuteur » (<em>timer</em>) qui exécute une fonction ou un code donné après la fin du délai indiqué.</p>
+La méthode **`setTimeout()`**, rattachée au *mixin*  {{domxref("WindowOrWorkerGlobalScope")}} (et qui succède à `window.setTimeout()`) permet de définir un « minuteur » (_timer_) qui exécute une fonction ou un code donné après la fin du délai indiqué.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>var identifiant</em> = <em>scope</em>.setTimeout(<em>fonction</em>[, <em>delai</em>, <em>param1</em>, <em>param2</em>, ...]);
-<em>var</em> <em>identifiant</em> = <em>scope</em>.setTimeout(<em>fonction</em>[, <em>delai</em>]);
-<em>var identifiant</em> = <em>scope</em>.setTimeout(<em>code</em>[, <em>delai</em>]);
-</pre>
+    var identifiant = scope.setTimeout(fonction[, delai, param1, param2, ...]);
+    var identifiant = scope.setTimeout(fonction[, delai]);
+    var identifiant = scope.setTimeout(code[, delai]);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>function</code></dt>
- <dd>Une fonction ({{jsxref("function")}}) qui doit être exécuté au déclenchement du minuteur après le temps imparti.</dd>
- <dt><code>code</code></dt>
- <dd>Une chaîne de caractères qui représente le code à exécuter. Cette chaîne est compilée et exécutée à l'expiration du minuteur. Pour des raisons analogues à celles exprimées avec {{jsxref("Objets_globaux/eval", "eval()")}}, cette syntaxe n'est pas <strong>recommandée</strong>.</dd>
- <dt><code>delai</code> {{optional_inline}}</dt>
- <dd>La durée, exprimée en millisecondes, à attendre avant que la fonction indiquée soit exécutée. Par défaut, ce paramètre vaut 0, ce qui signifiie que la fonction est exécutée dès que possible. La durée réelle mesurée avant l'exécution de la fonction peut être supérieure à ce paramètre, voir <a href="#durée">la section ci-après</a>.</dd>
- <dt><code>param1, … , paramN</code> {{optional_inline}}</dt>
- <dd>D'autres paramètres qui seront passés à la fonction une fois que le temps est écoulé.</dd>
-</dl>
+- `function`
+  - : Une fonction ({{jsxref("function")}}) qui doit être exécuté au déclenchement du minuteur après le temps imparti.
+- `code`
+  - : Une chaîne de caractères qui représente le code à exécuter. Cette chaîne est compilée et exécutée à l'expiration du minuteur. Pour des raisons analogues à celles exprimées avec {{jsxref("Objets_globaux/eval", "eval()")}}, cette syntaxe n'est pas **recommandée**.
+- `delai` {{optional_inline}}
+  - : La durée, exprimée en millisecondes, à attendre avant que la fonction indiquée soit exécutée. Par défaut, ce paramètre vaut 0, ce qui signifiie que la fonction est exécutée dès que possible. La durée réelle mesurée avant l'exécution de la fonction peut être supérieure à ce paramètre, voir [la section ci-après](#durée).
+- `param1, … , paramN` {{optional_inline}}
+  - : D'autres paramètres qui seront passés à la fonction une fois que le temps est écoulé.
 
-<div class="note">
-<p><strong>Note :</strong> La première syntaxe utilisant les paramètres supplémentaires ne fonctionne pas pour Internet Explorer 9 et les versions antérieures. Si vous souhaitez obtenir cette fonctionnalité pour ce navigateur, vous devrez utiliser une prothèse, <a href="#polyfill">voir ci-après</a>.</p>
-</div>
+> **Note :** La première syntaxe utilisant les paramètres supplémentaires ne fonctionne pas pour Internet Explorer 9 et les versions antérieures. Si vous souhaitez obtenir cette fonctionnalité pour ce navigateur, vous devrez utiliser une prothèse, [voir ci-après](#polyfill).
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+### Valeur de retour
 
-<p>La valeur renvoyée par la fonction est un entier qui représente un identifiant du minuteur créé par l'appel à <code>setTimeout()</code>. Cet identifiant pourra être passé à la méthode {{domxref("WindowOrWorkerGlobalScope.clearTimeout","clearTimeout()")}} afin d'annuler ce minuteur donné.</p>
+La valeur renvoyée par la fonction est un entier qui représente un identifiant du minuteur créé par l'appel à `setTimeout()`. Cet identifiant pourra être passé à la méthode {{domxref("WindowOrWorkerGlobalScope.clearTimeout","clearTimeout()")}} afin d'annuler ce minuteur donné.
 
-<p>Il peut être utile de savoir que <code>setTimeout()</code> et {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}} partagent le même ensemble d'identifiants et que  <code>clearTimeout()</code> et {{domxref("WindowOrWorkerGlobalScope.clearInterval", "clearInterval()")}} sont, techniquement, interchangeables. Toutefois pour des raisons de lisibilité et de maintenance, mieux vaut les utiliser par paires plutôt que de les mélanger.</p>
+Il peut être utile de savoir que `setTimeout()` et {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}} partagent le même ensemble d'identifiants et que  `clearTimeout()` et {{domxref("WindowOrWorkerGlobalScope.clearInterval", "clearInterval()")}} sont, techniquement, interchangeables. Toutefois pour des raisons de lisibilité et de maintenance, mieux vaut les utiliser par paires plutôt que de les mélanger.
 
-<p>Le moteur d'exécution garantit qu'un identifiant donné ne sera pas réutilisé par un appel ultérieur à <code>setTimeout()</code> ou <code>setInterval()</code> pour un même objet (une fenêtre ou un <em>worker</em>). En revanche, différents objets possèdent chacun leurs ensembles d'identifiants.</p>
+Le moteur d'exécution garantit qu'un identifiant donné ne sera pas réutilisé par un appel ultérieur à `setTimeout()` ou `setInterval()` pour un même objet (une fenêtre ou un _worker_). En revanche, différents objets possèdent chacun leurs ensembles d'identifiants.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans l'exemple qui suit, on dispose deux boutons classiques auxquels on associe, via des gestionnaires d'évènements, des fonctions qui utilisent <code>setTimeout()</code> et <code>clearTimeout()</code>. Utiliser le premier bouton déclenchera un minuteur qui affichera une boîte de dialogue après deux secondes. L'identifiant est enregistré à la création du minuteur et on peut annuler le minuteur en cours en appuyant sur le deuxième bouton (dont la fonction associée au gestionnaire d'évènements utilise <code>clearTimeout()</code>).</p>
+Dans l'exemple qui suit, on dispose deux boutons classiques auxquels on associe, via des gestionnaires d'évènements, des fonctions qui utilisent `setTimeout()` et `clearTimeout()`. Utiliser le premier bouton déclenchera un minuteur qui affichera une boîte de dialogue après deux secondes. L'identifiant est enregistré à la création du minuteur et on peut annuler le minuteur en cours en appuyant sur le deuxième bouton (dont la fonction associée au gestionnaire d'évènements utilise `clearTimeout()`).
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;button onclick="delayedAlert();"&gt;
+```html
+<button onclick="delayedAlert();">
   Affiche une alerte après deux secondes
-&lt;/button&gt;
-&lt;p&gt;&lt;/p&gt;
-&lt;button onclick="clearAlert();"&gt;
+</button>
+<p></p>
+<button onclick="clearAlert();">
   Annuler l'alerte avant qu'elle ne se déclenche
-&lt;/button&gt;
-</pre>
+</button>
+```
 
-<h3 id="JavaScript">JavaScript</h3>
+### JavaScript
 
-<pre class="brush: js">var timeoutID;
+```js
+var timeoutID;
 
 function delayedAlert() {
   timeoutID = window.setTimeout(slowAlert, 2000);
@@ -75,21 +72,20 @@ function slowAlert() {
 function clearAlert() {
   window.clearTimeout(timeoutID);
 }
-</pre>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample('Exemples')}}</p>
+{{EmbedLiveSample('Exemples')}}
 
-<div class="note">
-<p><strong>Note :</strong> Voir aussi les exemples pour <a href="/fr/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout#Exemples"><code>clearTimeout()</code></a>.</p>
-</div>
+> **Note :** Voir aussi les exemples pour [`clearTimeout()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout#Exemples).
 
-<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2>
+## Prothèse d'émulation (_polyfill_)
 
-<p>S'il vous faut passer un ou plusieurs arguments à la fonction de rappel tout en prenant en charge Internet Explorer 9 et les versions antérieures, vous pouvez utiliser cette prothèse qui ajoute la prise en charge des paramètres additionnels :</p>
+S'il vous faut passer un ou plusieurs arguments à la fonction de rappel tout en prenant en charge Internet Explorer 9 et les versions antérieures, vous pouvez utiliser cette prothèse qui ajoute la prise en charge des paramètres additionnels :
 
-<pre class="brush: js">/*\
+```js
+/*\
 |*|
 |*|  Polyfill which enables the passage of arbitrary arguments to the
 |*|  callback functions of JavaScript timers (HTML5 standard syntax).
@@ -128,104 +124,111 @@ function clearAlert() {
     };
   }, 0, 'test');
 }())
-</pre>
+```
 
-<h3 id="Correctif_ciblé_sur_IE">Correctif ciblé sur IE</h3>
+### Correctif ciblé sur IE
 
-<p>Si vous souhaitez ne cibler que IE 9 et antérieurs, vous pouvez utiliser les commentaires conditionnels JavaScript :</p>
+Si vous souhaitez ne cibler que IE 9 et antérieurs, vous pouvez utiliser les commentaires conditionnels JavaScript :
 
-<pre class="brush: js">/*@cc_on
-  // conditional IE &lt; 9 only fix
-  @if (@_jscript_version &lt;= 9)
+```js
+/*@cc_on
+  // conditional IE < 9 only fix
+  @if (@_jscript_version <= 9)
   (function(f){
      window.setTimeout = f(window.setTimeout);
      window.setInterval = f(window.setInterval);
   })(function(f){return function(c,t){var a=[].slice.call(arguments,2);return f(function(){c instanceof Function?c.apply(this,a):eval(c)},t)}});
   @end
 @*/
-</pre>
+```
 
-<p>Ou plutôt les commentaires conditionnels HTML :</p>
+Ou plutôt les commentaires conditionnels HTML :
 
-<pre class="brush: html">&lt;!--[if lte IE 9]&gt;&lt;script&gt;
+```html
+<!--[if lte IE 9]><script>
 (function(f){
 window.setTimeout=f(window.setTimeout);
 window.setInterval=f(window.setInterval);
 })(function(f){return function(c,t){
 var a=[].slice.call(arguments,2);return f(function(){c instanceof Function?c.apply(this,a):eval(c)},t)}
 });
-&lt;/script&gt;&lt;![endif]--&gt;
-</pre>
+</script><![endif]-->
+```
 
-<h3 id="Autres_méthodes_de_contournement">Autres méthodes de contournement</h3>
+### Autres méthodes de contournement
 
-<p>Vous pouvez également utiliser une fonction anonyme comme fonction de rappel (<em>callback</em>) :</p>
+Vous pouvez également utiliser une fonction anonyme comme fonction de rappel (_callback_) :
 
-<pre class="brush: js">var intervalID = setTimeout(function() {
+```js
+var intervalID = setTimeout(function() {
   maFonction('un', 'deux', 'trois');
   }, 1000);
-</pre>
+```
 
-<p>Voici une réécriture de l'exemple précédent avec <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es">les fonctions fléchées</a> :</p>
+Voici une réécriture de l'exemple précédent avec [les fonctions fléchées](/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es) :
 
-<pre class="brush: js">var intervalID = setTimeout(() =&gt; {
+```js
+var intervalID = setTimeout(() => {
   maFonction('un', 'deux', 'trois');
   }, 1000);
-</pre>
+```
 
-<p>On peut également utiliser {{jsxref("Function.prototype.bind()")}} :</p>
+On peut également utiliser {{jsxref("Function.prototype.bind()")}} :
 
-<pre class="brush: js">setTimeout(function(arg1){}.bind(undefined, 10), 1000);
-</pre>
+```js
+setTimeout(function(arg1){}.bind(undefined, 10), 1000);
+```
 
-<h2 id="Le_problème_«_this_»">Le problème « <code>this</code> »</h2>
+## Le problème « `this` »
 
-<p>Lorsqu'on passe une fonction à <code>setTimeout()</code>, cette fonction peut être appelée avec une valeur <code>this</code> qui n'est pas celle qu'on attend. Ce problème est expliqué en détails dans la référence JavaScript<a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this#Dans_le_contexte_d'une_fonction">JavaScript reference</a>.</p>
+Lorsqu'on passe une fonction à `setTimeout()`, cette fonction peut être appelée avec une valeur `this` qui n'est pas celle qu'on attend. Ce problème est expliqué en détails dans la référence JavaScript[JavaScript reference](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this#Dans_le_contexte_d'une_fonction).
 
-<h3 id="Explications">Explications</h3>
+### Explications
 
-<p>Le code exécuté par <code>setTimeout()</code> est appelé dans un contexte d'exécution différent de celui de la fonction où <code>setTimeout</code> a été appelé. Les règles usuelles pour la détermination de <code>this</code> s'appliquent : si <code>this</code> n'est pas défini lors de l'appel ou avec <code>bind</code>, la valeur par défaut sera l'objet global (<code>global</code> ou <code>window</code>) en mode non-strict ou {{jsxref("undefined")}} en mode strict. Aussi, le <code>this</code> utilisé par la fonction de rappel ne sera pas le même <code>this</code> que celui utilisé par la fonction ayant appelé <code>setTimeout</code>.</p>
+Le code exécuté par `setTimeout()` est appelé dans un contexte d'exécution différent de celui de la fonction où `setTimeout` a été appelé. Les règles usuelles pour la détermination de `this` s'appliquent : si `this` n'est pas défini lors de l'appel ou avec `bind`, la valeur par défaut sera l'objet global (`global` ou `window`) en mode non-strict ou {{jsxref("undefined")}} en mode strict. Aussi, le `this` utilisé par la fonction de rappel ne sera pas le même `this` que celui utilisé par la fonction ayant appelé `setTimeout`.
 
-<div class="note">
-<p><strong>Note :</strong> La valeur par défaut pour <code>this</code>, lors de l'utilisation d'une fonction de rappel par <code>setTimeout</code> sera toujours l'objet <code>window</code> et pas la valeur <code>undefined</code>, même en mode strict.</p>
-</div>
+> **Note :** La valeur par défaut pour `this`, lors de l'utilisation d'une fonction de rappel par `setTimeout` sera toujours l'objet `window` et pas la valeur `undefined`, même en mode strict.
 
-<p>Par exemple :</p>
+Par exemple :
 
-<pre class="brush: js">monTableau = ['zéro', 'un', 'deux'];
+```js
+monTableau = ['zéro', 'un', 'deux'];
 monTableau.maMéthode = function (sPropriété) {
-    console.log(arguments.length &gt; 0 ? this[sPropriété] : this);
+    console.log(arguments.length > 0 ? this[sPropriété] : this);
 };
 
 monTableau.maMéthode();  // affichera "zéro,un,deux" dans la console
-monTableau.maMéthode(1); // affichera "un"</pre>
+monTableau.maMéthode(1); // affichera "un"
+```
 
-<p>Le code qui précède fonctionne car lorsque <code>maMéthode</code> est appelée, <code>this</code> correspond à <code>monTableau</code> et qu'au sein de <code>maMéthode</code>, <code>this[sPropriété]</code> correspond alors à <code>monTableau[sPropriété]</code>. Toutefois, avec :</p>
+Le code qui précède fonctionne car lorsque `maMéthode` est appelée, `this` correspond à `monTableau` et qu'au sein de `maMéthode`, `this[sPropriété]` correspond alors à `monTableau[sPropriété]`. Toutefois, avec :
 
-<pre class="brush: js">setTimeout(monTableau.maMéthode, 1000);
+```js
+setTimeout(monTableau.maMéthode, 1000);
 // affiche "[object Window]" après 1 seconde
 setTimeout(monTableau.maMéthode, 1500, '1');
-// affiche "undefined" après 1.5 seconde</pre>
+// affiche "undefined" après 1.5 seconde
+```
 
-<p>La fonction <code>monTableau.maMéthode</code> est pasée à <code>setTimeout</code> et, lorsqu'elle est appelée, <code>this</code> n'est pas défini et le moteur utilise la valeur par défaut : <code>window</code>. Il n'y apas d'option qui permettent de passer une valeur  <code>thisArg</code> à <code>setTimeout()</code> comme on peut le faire avec {{jsxref("Array.prototype.forEach()")}} ou {{jsxref("Array.prototype.reduce()")}} par exemple. Aussi, utiliser <code>call()</code> afin de définir <code>this</code> ne fonctionnera pas non plus.</p>
+La fonction `monTableau.maMéthode` est pasée à `setTimeout` et, lorsqu'elle est appelée, `this` n'est pas défini et le moteur utilise la valeur par défaut : `window`. Il n'y apas d'option qui permettent de passer une valeur  `thisArg` à `setTimeout()` comme on peut le faire avec {{jsxref("Array.prototype.forEach()")}} ou {{jsxref("Array.prototype.reduce()")}} par exemple. Aussi, utiliser `call()` afin de définir `this` ne fonctionnera pas non plus.
 
-<pre class="brush: js">setTimeout.call(monTableau, monTableau.maMéthode, 2000);
+```js
+setTimeout.call(monTableau, monTableau.maMéthode, 2000);
 // error: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object"
 setTimeout.call(monTableau, monTableau.maMéthode, 2500, 2);
 // même erreur
-</pre>
+```
 
-<h3 id="Solutions_éventuelles">Solutions éventuelles</h3>
+### Solutions éventuelles
 
-<div class="note">
-  <p><strong>Note :</strong> JavaScript 1.8.5 introduced the <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">Function.prototype.bind()</a></code> method to set the value of <code>this</code> for all calls to a given function. This can avoid having to use a wrapper function to set the value of <code>this</code> in a callback.</p>
-</div>
+> **Note :** JavaScript 1.8.5 introduced the [`Function.prototype.bind()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind) method to set the value of `this` for all calls to a given function. This can avoid having to use a wrapper function to set the value of `this` in a callback.
 
-<p>Exemple d'utilisation :</p>
+Exemple d'utilisation :
 
-<pre class="brush: js">var monTableau = ['zéro', 'un', 'deux'];
+```js
+var monTableau = ['zéro', 'un', 'deux'];
 var maMéthodeLiée = (function (sPropriété) {
-  console.log(arguments.length &gt; 0 ? this[sPropriété] : this);
+  console.log(arguments.length > 0 ? this[sPropriété] : this);
 }).bind(monTableau);
 
 
@@ -235,129 +238,113 @@ setTimeout(maMéthodeLiée, 1000);
 // affiche "zéro,un,deux" après une seconde
 setTimeout(maMéthodeLiée, 1500, "1");
 // affiche "un" après 1.5 seconde
-</pre>
+```
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p>Les minuteurs peuvent être annulés avec {{domxref("WindowOrWorkerGlobalScope.clearTimeout","clearTimeout()")}}. Si on souhaite appeler une fonction de façon répétée, on utilisera plutôt {{domxref("WindowOrWorkerGlobalScope.setInterval()","setInterval()")}}.</p>
+Les minuteurs peuvent être annulés avec {{domxref("WindowOrWorkerGlobalScope.clearTimeout","clearTimeout()")}}. Si on souhaite appeler une fonction de façon répétée, on utilisera plutôt {{domxref("WindowOrWorkerGlobalScope.setInterval()","setInterval()")}}.
 
-<h3 id="Utiliser_des_chaînes_pour_le_code_plutôt_que_des_fonctions">Utiliser des chaînes pour le code plutôt que des fonctions</h3>
+### Utiliser des chaînes pour le code plutôt que des fonctions
 
-<p>Passer une chaîne de caractères pour le code à exécuter, plutôt qu'une fonction, souffre des mêmes dangers que {{jsxref("Objets_globaux/eval","eval()")}}.</p>
+Passer une chaîne de caractères pour le code à exécuter, plutôt qu'une fonction, souffre des mêmes dangers que {{jsxref("Objets_globaux/eval","eval()")}}.
 
-<pre class="brush: js">// Recommandé
+```js
+// Recommandé
 window.setTimeout(function() {
     console.log('Coucou monde !');
 }, 500);
 
 // Non recommandé
 window.setTimeout("console.log('Coucou monde !');", 500);
-</pre>
+```
 
-<p>Une chaîne de caractères passée à <code>setTimeout</code> sera évaluée dans le contexte global. Aussi, les symboles locaux au contexte de l'appel de <code>setTimeout()</code> ne seront pas accessibles au code présent dans la chaîne de caractères lors de son évaluation.</p>
+Une chaîne de caractères passée à `setTimeout` sera évaluée dans le contexte global. Aussi, les symboles locaux au contexte de l'appel de `setTimeout()` ne seront pas accessibles au code présent dans la chaîne de caractères lors de son évaluation.
 
-<h3 id="Durée_plus_longue_que_le_paramètre_indiquée">Durée plus longue que le paramètre indiquée</h3>
+### Durée plus longue que le paramètre indiquée
 
-<p>Plusieurs raisons peuvent expliquer une durée réelle plus longue que le délai passé en argument. Voici les plus fréquentes.</p>
+Plusieurs raisons peuvent expliquer une durée réelle plus longue que le délai passé en argument. Voici les plus fréquentes.
 
-<h4 id="Précision_minimale_à_4ms">Précision minimale à 4ms</h4>
+#### Précision minimale à 4ms
 
-<p>Dans les navigateurs récents les appels à <code>setTimeout()/</code>{{domxref("WindowOrworkerGlobalScope.setInterval","setInterval()")}} possèdent au plus une précision de 4ms lorsque plusieurs appels imbriqués sont réalisés. Par exemple :</p>
+Dans les navigateurs récents les appels à `setTimeout()/`{{domxref("WindowOrworkerGlobalScope.setInterval","setInterval()")}} possèdent au plus une précision de 4ms lorsque plusieurs appels imbriqués sont réalisés. Par exemple :
 
-<pre class="brush: js">function cb() { f(); setTimeout(cb, 0); }
-setTimeout(cb, 0);</pre>
+```js
+function cb() { f(); setTimeout(cb, 0); }
+setTimeout(cb, 0);
+```
 
-<pre class="brush: js">setInterval(f, 0);</pre>
+```js
+setInterval(f, 0);
+```
 
-<p>Pour Chrome et Firefox, la limitation est active à partir du cinquième appel de fonction de rappel,  Safari active la limitation à partir du sixième et Edge à partir du troisième. Gecko traite <code>setInterval()</code> de la même façon depuis la <a href="/fr/docs/Mozilla/Firefox/Releases/56">version 56</a>.</p>
+Pour Chrome et Firefox, la limitation est active à partir du cinquième appel de fonction de rappel,  Safari active la limitation à partir du sixième et Edge à partir du troisième. Gecko traite `setInterval()` de la même façon depuis la [version 56](/fr/docs/Mozilla/Firefox/Releases/56).
 
-<p><a href="http://code.google.com/p/chromium/issues/detail?id=792#c10">Par le passé</a>, certains navigateurs implémentaient cette limite différemment (pour les appels à <code>setInterval()</code> quelle que soit leur provenance ou lorsqu'un appel <code>setTimeout()</code> était imbriqué dans un autre pour un certain nombre de niveaux d'imbrication.</p>
+[Par le passé](http://code.google.com/p/chromium/issues/detail?id=792#c10), certains navigateurs implémentaient cette limite différemment (pour les appels à `setInterval()` quelle que soit leur provenance ou lorsqu'un appel `setTimeout()` était imbriqué dans un autre pour un certain nombre de niveaux d'imbrication.
 
-<p>Pour implémenter un minuteur de 0ms, on pourra utiliser {{domxref("window.postMessage()")}}.</p>
+Pour implémenter un minuteur de 0ms, on pourra utiliser {{domxref("window.postMessage()")}}.
 
-<div class="note">
-<p><strong>Note :</strong> Le délai minimal est géré dans Firefox via une préférence : <code>dom.min_timeout_value</code>.</p>
-</div>
+> **Note :** Le délai minimal est géré dans Firefox via une préférence : `dom.min_timeout_value`.
 
-<div class="note">
-<p><strong>Note :</strong> Cette durée de 4 ms est <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/timers.html#timers">définie dans la spécification HTML5</a> et est la même dans l'ensemble des navigateurs à partir de 2010. Avant {{geckoRelease("5.0")}}, la valeur minimale pour les appels imbriqués était 10ms.</p>
-</div>
+> **Note :** Cette durée de 4 ms est [définie dans la spécification HTML5](http://www.whatwg.org/specs/web-apps/current-work/multipage/timers.html#timers) et est la même dans l'ensemble des navigateurs à partir de 2010. Avant {{geckoRelease("5.0")}}, la valeur minimale pour les appels imbriqués était 10ms.
 
-<h4 id="Précision_minimale_des_minuteurs_pour_les_onglets_inactifs_plus_de_1000ms">Précision minimale des minuteurs pour les onglets inactifs : plus de 1000ms</h4>
+#### Précision minimale des minuteurs pour les onglets inactifs : plus de 1000ms
 
-<p>Afin de réduire la charge (ainsi que la consommation d'énergie associée) des onglets en arrière-plan, les minuteurs ne sont déclenchés au maximum qu'une fois par seconde pour les onglets inactifs.</p>
+Afin de réduire la charge (ainsi que la consommation d'énergie associée) des onglets en arrière-plan, les minuteurs ne sont déclenchés au maximum qu'une fois par seconde pour les onglets inactifs.
 
-<p>Firefox implémente ce comportement depuis Firefox 5 (cf.  {{bug(633421)}}) et la valeur du seuil de 1000ms peut être paramétrée via la préférence <code>dom.min_background_timeout_value</code>. Chrome implémente ce comportement depuis la version 11 (<a href="http://crbug.com/66078">crbug.com/66078</a>).</p>
+Firefox implémente ce comportement depuis Firefox 5 (cf.  {{bug(633421)}}) et la valeur du seuil de 1000ms peut être paramétrée via la préférence `dom.min_background_timeout_value`. Chrome implémente ce comportement depuis la version 11 ([crbug.com/66078](http://crbug.com/66078)).
 
-<p>Firefox pour Android utilise un minimum de 15 minutes depuis Firefox 14 (cf.  {{bug(736602)}}) et les onglets en arrière-plan peuvent être déchargés complètement.</p>
+Firefox pour Android utilise un minimum de 15 minutes depuis Firefox 14 (cf.  {{bug(736602)}}) et les onglets en arrière-plan peuvent être déchargés complètement.
 
-<div class="note">
-<p><strong>Note :</strong> Firefox 50 ne limite plus la réactivité des onglets en arrière-plan si un contexte Web Audio API {{domxref("AudioContext")}} joue un son. Firefox 51 élargit le spectre en supprimant la limitation si un objet {{domxref("AudioContext")}} est présent dans l'onglet, même sans jouer de son. Cela a permis de résoudre différents problèmes avec certaines applications qui jouent de la musique en arrière-plan.</p>
-</div>
+> **Note :** Firefox 50 ne limite plus la réactivité des onglets en arrière-plan si un contexte Web Audio API {{domxref("AudioContext")}} joue un son. Firefox 51 élargit le spectre en supprimant la limitation si un objet {{domxref("AudioContext")}} est présent dans l'onglet, même sans jouer de son. Cela a permis de résoudre différents problèmes avec certaines applications qui jouent de la musique en arrière-plan.
 
-<h4 id="Limitation_des_minuteurs_pour_les_scripts_de_pistage">Limitation des minuteurs pour les scripts de pistage</h4>
+#### Limitation des minuteurs pour les scripts de pistage
 
-<p>Depuis Firefox 55, les scripts de pistage (par exemple Google Analytics) (c'est-à-dire que toute URL que Firefox reconnaît comme appartenant à un domaine de pistage via <a href="https://wiki.mozilla.org/Security/Tracking_protection#Lists">la liste TP</a>) ont une limitation plus forte. En premier plan la limitation est toujours de 4ms mais pour les onglets en arrière-plan, la limite est à 10000ms une fois que 30 secondes se sont écoulées après le premier chargement du document.</p>
+Depuis Firefox 55, les scripts de pistage (par exemple Google Analytics) (c'est-à-dire que toute URL que Firefox reconnaît comme appartenant à un domaine de pistage via [la liste TP](https://wiki.mozilla.org/Security/Tracking_protection#Lists)) ont une limitation plus forte. En premier plan la limitation est toujours de 4ms mais pour les onglets en arrière-plan, la limite est à 10000ms une fois que 30 secondes se sont écoulées après le premier chargement du document.
 
-<p>Ces seuils peuvent être gérés via les préférences :</p>
+Ces seuils peuvent être gérés via les préférences :
 
-<ul>
- <li><code>dom.min_tracking_timeout_value</code> : 4</li>
- <li><code>dom.min_tracking_background_timeout_value</code> : 10000</li>
- <li><code>dom.timeout.tracking_throttling_delay</code> : 30000</li>
-</ul>
+- `dom.min_tracking_timeout_value` : 4
+- `dom.min_tracking_background_timeout_value` : 10000
+- `dom.timeout.tracking_throttling_delay` : 30000
 
-<h4 id="Minuteurs_en_retard">Minuteurs en retard</h4>
+#### Minuteurs en retard
 
-<p>En plus de ces limitations, le minuteur peut être déclenché plus tard si le navigateur ou le système d'opération est occupé sur d'autres tâches. On notera particulièrement que la fonction de rappel n'est pas exécutée tant que le <em>thread</em> du script n'a pas terminé. Par exemple :</p>
+En plus de ces limitations, le minuteur peut être déclenché plus tard si le navigateur ou le système d'opération est occupé sur d'autres tâches. On notera particulièrement que la fonction de rappel n'est pas exécutée tant que le _thread_ du script n'a pas terminé. Par exemple :
 
-<pre class="brush: js">function toto() {
+```js
+function toto() {
   console.log('appel de toto');
 }
 setTimeout(toto, 0);
-console.log('Après setTimeout');</pre>
+console.log('Après setTimeout');
+```
 
-<p>affichera, dans la console :</p>
+affichera, dans la console :
 
-<pre class="brush: js">Après setTimeout
-appel de toto</pre>
+```js
+Après setTimeout
+appel de toto
+```
 
-<p>Ici, même si <code>setTimeout</code> a été appelé avec un délai nul, la fonction de rappel est placée dans la queue et est planifiée pour être exécutée dès que possible : ce qui n'est pas « immédiatement ». Le code courant doit finir d'être exécuté afin que les appels dans la queue puissent être dépilés.</p>
+Ici, même si `setTimeout` a été appelé avec un délai nul, la fonction de rappel est placée dans la queue et est planifiée pour être exécutée dès que possible : ce qui n'est pas « immédiatement ». Le code courant doit finir d'être exécuté afin que les appels dans la queue puissent être dépilés.
 
-<h3 id="Valeur_de_délai_maximale">Valeur de délai maximale</h3>
+### Valeur de délai maximale
 
-<p>Les navigateurs que sont Internet Explorer, Chrome, Safari et Firefox stockent, en interne, la valeur du délai comme un entier sur 32 bits signé. Il y a donc un dépassement de borne si le délai est supérieur à 2147483647 millisecondes, ce qui correspond à 24.8 days. Si une telle valeur (supérieure à ce seuil) est utilisée, le minuteur est déclenché dès que possible.</p>
+Les navigateurs que sont Internet Explorer, Chrome, Safari et Firefox stockent, en interne, la valeur du délai comme un entier sur 32 bits signé. Il y a donc un dépassement de borne si le délai est supérieur à 2147483647 millisecondes, ce qui correspond à 24.8 days. Si une telle valeur (supérieure à ce seuil) est utilisée, le minuteur est déclenché dès que possible.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th>Spécification</th>
-   <th>État</th>
-   <th>Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-settimeout', 'WindowOrWorkerGlobalScope.setTimeout()')}}</td>
-   <td>{{Spec2("HTML WHATWG")}}</td>
-   <td>Déplacement de la méthode sur le <em>mixin</em> <code>WindowOrWorkerGlobalScope</code> dans la dernière spécification.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML WHATWG", "webappapis.html#dom-settimeout", "WindowTimers.setTimeout()")}}</td>
-   <td>{{Spec2("HTML WHATWG")}}</td>
-   <td>Définition initiale (<em>DOM Level 0</em>)</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                            | État                             | Commentaires                                                                                         |
+| ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ---------------------------------------------------------------------------------------------------- |
+| {{SpecName('HTML WHATWG', 'webappapis.html#dom-settimeout', 'WindowOrWorkerGlobalScope.setTimeout()')}} | {{Spec2("HTML WHATWG")}} | Déplacement de la méthode sur le _mixin_ `WindowOrWorkerGlobalScope` dans la dernière spécification. |
+| {{SpecName("HTML WHATWG", "webappapis.html#dom-settimeout", "WindowTimers.setTimeout()")}}                 | {{Spec2("HTML WHATWG")}} | Définition initiale (_DOM Level 0_)                                                                  |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.WindowOrWorkerGlobalScope.setTimeout")}}</p>
+{{Compat("api.WindowOrWorkerGlobalScope.setTimeout")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("WindowOrWorkerGlobalScope.clearTimeout")}}</li>
- <li>{{domxref("WindowOrWorkerGlobalScope.setInterval")}}</li>
- <li>{{domxref("window.requestAnimationFrame")}}</li>
-</ul>
+- {{domxref("WindowOrWorkerGlobalScope.clearTimeout")}}
+- {{domxref("WindowOrWorkerGlobalScope.setInterval")}}
+- {{domxref("window.requestAnimationFrame")}}
diff --git a/files/fr/web/api/shadowroot/delegatesfocus/index.md b/files/fr/web/api/shadowroot/delegatesfocus/index.md
index a42192a6a2..57433496de 100644
--- a/files/fr/web/api/shadowroot/delegatesfocus/index.md
+++ b/files/fr/web/api/shadowroot/delegatesfocus/index.md
@@ -9,36 +9,36 @@ tags:
   - ShadowRoot
 translation_of: Web/API/ShadowRoot/delegatesFocus
 ---
-<div>{{APIRef("Shadow DOM")}}</div>
+{{APIRef("Shadow DOM")}}
 
-<p><strong><code>delegatesFocus</code></strong> est une propriété en lecture seule, rattachée à l'interface {{domxref("ShadowRoot")}} et qui renvoie un booléen indiquant si l'option <code>delegatesFocus</code> a été intialisée lors de l'attachement de la racine <em>shadow</em> (cf. {{domxref("Element.attachShadow()")}}).</p>
+**`delegatesFocus`** est une propriété en lecture seule, rattachée à l'interface {{domxref("ShadowRoot")}} et qui renvoie un booléen indiquant si l'option `delegatesFocus` a été intialisée lors de l'attachement de la racine _shadow_ (cf. {{domxref("Element.attachShadow()")}}).
 
-<div class="warning">
-<p><strong>Attention :</strong> Cette fonctionnalité est expérimentale, non-standard et uniquement disponible dans Chrome.</p>
-</div>
+> **Attention :** Cette fonctionnalité est expérimentale, non-standard et uniquement disponible dans Chrome.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var <var>df</var> = <var>shadowRoot</var>.delegatesFocus</pre>
+    var df = shadowRoot.delegatesFocus
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>Un booléen : <code>true</code> si la racine <em>shadow</em> délègue la gestion du focus et <code>false</code> sinon.</p>
+Un booléen : `true` si la racine _shadow_ délègue la gestion du focus et `false` sinon.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: js">let customElem = document.querySelector('mon-element-shadow-dom');
+```js
+let customElem = document.querySelector('mon-element-shadow-dom');
 let shadow = customElem.shadowRoot;
 
   ...
 
 // Est-ce que la racine gère la délégation du focus ?
-let hostElem = shadow.delegatesFocus;</pre>
+let hostElem = shadow.delegatesFocus;
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Cette fonctionnalité n'est actuellement décrite dans aucune spécification.</p>
+Cette fonctionnalité n'est actuellement décrite dans aucune spécification.
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.ShadowRoot.delegatesFocus")}}</p>
+{{Compat("api.ShadowRoot.delegatesFocus")}}
diff --git a/files/fr/web/api/shadowroot/host/index.md b/files/fr/web/api/shadowroot/host/index.md
index 8b23a74117..5b3bf045e6 100644
--- a/files/fr/web/api/shadowroot/host/index.md
+++ b/files/fr/web/api/shadowroot/host/index.md
@@ -9,47 +9,36 @@ tags:
   - shadow dom
 translation_of: Web/API/ShadowRoot/host
 ---
-<div>{{APIRef("Shadow DOM")}}</div>
+{{APIRef("Shadow DOM")}}
 
-<p>La propriété <strong><code>host</code></strong> est une propriété en lecture seule, rattachée à l'interface {{domxref("ShadowRoot")}} et qui représente une référence à l'élément du DOM auquel la racine <code>ShadowRoot</code> est attachée.</p>
+La propriété **`host`** est une propriété en lecture seule, rattachée à l'interface {{domxref("ShadowRoot")}} et qui représente une référence à l'élément du DOM auquel la racine `ShadowRoot` est attachée.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var <em>element</em> = <em>shadowRoot</em>.host</pre>
+    var element = shadowRoot.host
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>Un élément du DOM sous la forme d'un objet {{domxref('Element')}}.</p>
+Un élément du DOM sous la forme d'un objet {{domxref('Element')}}.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: js">let customElem = document.querySelector('mon-element-shadow-dom');
+```js
+let customElem = document.querySelector('mon-element-shadow-dom');
 let shadow = customElem.shadowRoot;
 
   ...
 
 // renvoie l'élément hôte
-let hostElem = shadow.host;</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('DOM WHATWG','#dom-shadowroot-host','ShadowRoot.host')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.ShadowRoot.host")}}</p>
+let hostElem = shadow.host;
+```
+
+## Spécifications
+
+| Spécification                                                                            | État                             | Commentaires |
+| ---------------------------------------------------------------------------------------- | -------------------------------- | ------------ |
+| {{SpecName('DOM WHATWG','#dom-shadowroot-host','ShadowRoot.host')}} | {{Spec2('DOM WHATWG')}} |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.ShadowRoot.host")}}
diff --git a/files/fr/web/api/shadowroot/index.md b/files/fr/web/api/shadowroot/index.md
index 81af6c08ea..9c8a7816d9 100644
--- a/files/fr/web/api/shadowroot/index.md
+++ b/files/fr/web/api/shadowroot/index.md
@@ -9,58 +9,53 @@ tags:
   - Web Components
 translation_of: Web/API/ShadowRoot
 ---
-<div>{{APIRef('Shadow DOM')}}</div>
+{{APIRef('Shadow DOM')}}
 
-<p>L'interface <code><strong>ShadowRoot</strong></code>, relative à l'API <em>Shadow DOM</em>, représente la racine d'un sous-arbre du DOM dont le rendu est effectué séparément de celui du DOM de l'arbre principal.</p>
+L'interface **`ShadowRoot`**, relative à l'API _Shadow DOM_, représente la racine d'un sous-arbre du DOM dont le rendu est effectué séparément de celui du DOM de l'arbre principal.
 
-<p>Il est possible de récupérer une référence à la racine <em>shadow</em> d'un élément via la propriété {{domxref("Element.shadowRoot")}} si la racine a été créée avec la méthode {{domxref("Element.attachShadow()")}} et l'option <code>mode</code> qui valait <code>open</code>.</p>
+Il est possible de récupérer une référence à la racine _shadow_ d'un élément via la propriété {{domxref("Element.shadowRoot")}} si la racine a été créée avec la méthode {{domxref("Element.attachShadow()")}} et l'option `mode` qui valait `open`.
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<dl>
- <dt>{{domxref("ShadowRoot.delegatesFocus")}} {{readonlyinline}} {{non-standard_inline}}</dt>
- <dd>Cette propriété renvoie un booléen qui indique si l'option <code>delegatesFocus</code> a été activée lors de la liaison avec la racine <em>shadow</em> (cf. {{domxref("Element.attachShadow()")}}).</dd>
- <dt>{{domxref("ShadowRoot.host")}} {{readonlyinline}}</dt>
- <dd>Cette propriété renvoie une référence à l'élément DOM auquel la racine <code>ShadowRoot</code> est attachée.</dd>
- <dt>{{domxref("ShadowRoot.innerHTML")}} {{non-standard_inline}}</dt>
- <dd>Cette propriété permet de définir ou de récupérer le sous-arbre DOM contenu à l'intérieur de la racine <code>ShadowRoot</code>.</dd>
- <dt>{{domxref("ShadowRoot.mode")}} {{readonlyinline}}</dt>
- <dd>Cette propriété renvoie le mode utilisé pour la racine <code>ShadowRoot</code> : <code>open</code> ou <code>closed</code>. Cette valeur indique si les fonctionnalités internes à la racine sont accessibles depuis JavaScript.</dd>
-</dl>
+- {{domxref("ShadowRoot.delegatesFocus")}} {{readonlyinline}} {{non-standard_inline}}
+  - : Cette propriété renvoie un booléen qui indique si l'option `delegatesFocus` a été activée lors de la liaison avec la racine _shadow_ (cf. {{domxref("Element.attachShadow()")}}).
+- {{domxref("ShadowRoot.host")}} {{readonlyinline}}
+  - : Cette propriété renvoie une référence à l'élément DOM auquel la racine `ShadowRoot` est attachée.
+- {{domxref("ShadowRoot.innerHTML")}} {{non-standard_inline}}
+  - : Cette propriété permet de définir ou de récupérer le sous-arbre DOM contenu à l'intérieur de la racine `ShadowRoot`.
+- {{domxref("ShadowRoot.mode")}} {{readonlyinline}}
+  - : Cette propriété renvoie le mode utilisé pour la racine `ShadowRoot` : `open` ou `closed`. Cette valeur indique si les fonctionnalités internes à la racine sont accessibles depuis JavaScript.
 
-<h3 id="Propriétés_incluses_via_DocumentOrShadowRoot">Propriétés incluses via <code>DocumentOrShadowRoot</code></h3>
+### Propriétés incluses via `DocumentOrShadowRoot`
 
-<p><em>L'interface <code>ShadowRoot</code> inclut les propriétés suivantes grâce au </em>mixin<em> {{domxref("DocumentOrShadowRoot")}}. Attention, ceci n'est actuellement (11/2019) implémenté qu'avec Chrome et les autres navigateurs continuent d'implémenter l'interface {{domxref("Document")}}.</em></p>
+_L'interface `ShadowRoot` inclut les propriétés suivantes grâce au_ mixin _{{domxref("DocumentOrShadowRoot")}}. Attention, ceci n'est actuellement (11/2019) implémenté qu'avec Chrome et les autres navigateurs continuent d'implémenter l'interface {{domxref("Document")}}._
 
-<dl>
- <dt>{{domxref("DocumentOrShadowRoot.activeElement")}} {{readonlyInline}}</dt>
- <dd>L'élément ({{domxref('Element')}}) au sein du sous-arbre <em>shadow</em> qui a le focus.</dd>
- <dt>{{domxref("DocumentOrShadowRoot.styleSheets")}} {{readonlyInline}}</dt>
- <dd>Une liste {{domxref('StyleSheetList')}} d'objets {{domxref('CSSStyleSheet')}} qui référencent les feuilles de styles liées explicitement ou embarquées dans le document.</dd>
-</dl>
+- {{domxref("DocumentOrShadowRoot.activeElement")}} {{readonlyInline}}
+  - : L'élément ({{domxref('Element')}}) au sein du sous-arbre _shadow_ qui a le focus.
+- {{domxref("DocumentOrShadowRoot.styleSheets")}} {{readonlyInline}}
+  - : Une liste {{domxref('StyleSheetList')}} d'objets {{domxref('CSSStyleSheet')}} qui référencent les feuilles de styles liées explicitement ou embarquées dans le document.
 
-<h2 id="Méthodes">Méthodes</h2>
+## Méthodes
 
-<p><em>L'interface <code>ShadowRoot</code> inclut les méthodes suivantes qui proviennent du </em>mixin<em> {{domxref("DocumentOrShadowRoot")}}. Attention, ceci n'est actuellement (11/2019) implémenté qu'avec Chrome et les autres navigateurs continuent d'implémenter l'interface {{domxref("Document")}}.</em></p>
+_L'interface `ShadowRoot` inclut les méthodes suivantes qui proviennent du_ mixin _{{domxref("DocumentOrShadowRoot")}}. Attention, ceci n'est actuellement (11/2019) implémenté qu'avec Chrome et les autres navigateurs continuent d'implémenter l'interface {{domxref("Document")}}._
 
-<dl>
- <dt>{{domxref("DocumentOrShadowRoot.getSelection()")}}</dt>
- <dd>Cette méthode renvoie un objet {{domxref('Selection')}} représentant le fragment de texte sélectionné par l'utilisateur ou la position courante du curseur.</dd>
- <dt>{{domxref("DocumentOrShadowRoot.elementFromPoint()")}}</dt>
- <dd>Cette méthode renvoie l'élément le plus haut situé aux coordonnées passées en arguments.</dd>
- <dt>{{domxref("DocumentOrShadowRoot.elementsFromPoint()")}}</dt>
- <dd>Cette méthode renvoie un tableau de tous les éléments situés aux coordonnées passées en arguments.</dd>
- <dt>{{domxref("DocumentOrShadowRoot.caretPositionFromPoint()")}}</dt>
- <dd>Cette méthode renvoie un objet {{domxref('CaretPosition')}} contenant le nœud DOM sur lequel est le curseur ainsi que la position du curseur sur ce nœud.</dd>
-</dl>
+- {{domxref("DocumentOrShadowRoot.getSelection()")}}
+  - : Cette méthode renvoie un objet {{domxref('Selection')}} représentant le fragment de texte sélectionné par l'utilisateur ou la position courante du curseur.
+- {{domxref("DocumentOrShadowRoot.elementFromPoint()")}}
+  - : Cette méthode renvoie l'élément le plus haut situé aux coordonnées passées en arguments.
+- {{domxref("DocumentOrShadowRoot.elementsFromPoint()")}}
+  - : Cette méthode renvoie un tableau de tous les éléments situés aux coordonnées passées en arguments.
+- {{domxref("DocumentOrShadowRoot.caretPositionFromPoint()")}}
+  - : Cette méthode renvoie un objet {{domxref('CaretPosition')}} contenant le nœud DOM sur lequel est le curseur ainsi que la position du curseur sur ce nœud.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Les fragments de code suivants sont extraits de l'exemple <a href="https://github.com/mdn/web-components-examples/tree/master/life-cycle-callbacks">life-cycle-callbacks</a> (<a href="https://mdn.github.io/web-components-examples/life-cycle-callbacks">voir le résultat en <em>live</em></a>) qui crée un élément affichant un carré avec une taille et une couleur fournies par les attributs de l'élément.</p>
+Les fragments de code suivants sont extraits de l'exemple [life-cycle-callbacks](https://github.com/mdn/web-components-examples/tree/master/life-cycle-callbacks) ([voir le résultat en _live_](https://mdn.github.io/web-components-examples/life-cycle-callbacks)) qui crée un élément affichant un carré avec une taille et une couleur fournies par les attributs de l'élément.
 
-<p>Dans la définition de la classe pour l'élément <code>&lt;custom-square&gt;</code>, on ajoute certains <em>callbacks</em> permettant de gérer le cycle de vie de l'élément avec un appel à une fonction externe <code>updateStyle()</code> qui applique la taille et la couleur à l'élément. On lui passe l'argument <code>this</code> (c'est-à-dire l'élément lui-même).</p>
+Dans la définition de la classe pour l'élément `<custom-square>`, on ajoute certains _callbacks_ permettant de gérer le cycle de vie de l'élément avec un appel à une fonction externe `updateStyle()` qui applique la taille et la couleur à l'élément. On lui passe l'argument `this` (c'est-à-dire l'élément lui-même).
 
-<pre class="brush: js">connectedCallback() {
+```js
+connectedCallback() {
   console.log("Le carré personnalisé a été ajouté à la page.");
   updateStyle(this);
 }
@@ -68,14 +63,16 @@ translation_of: Web/API/ShadowRoot
 attributeChangedCallback(nom, ancienneValeur, nouvelleValeur) {
   console.log("Les attributs du carré ont changé.");
   updateStyle(this);
-}</pre>
+}
+```
 
-<p>Quant à la fonction <code>updateStyle()</code>, voyons ici son fonctionnement. On récupère une référence au <em>shadow DOM</em> avec {{domxref("Element.shadowRoot")}}. Ensuite, on utilise un parcours pour le sous-arbre afin de trouver l'élément {{htmlelement("style")}} présent dans le <em>shadow DOM</em> et on met à jour le CSS pour cet élément :</p>
+Quant à la fonction `updateStyle()`, voyons ici son fonctionnement. On récupère une référence au _shadow DOM_ avec {{domxref("Element.shadowRoot")}}. Ensuite, on utilise un parcours pour le sous-arbre afin de trouver l'élément {{htmlelement("style")}} présent dans le _shadow DOM_ et on met à jour le CSS pour cet élément :
 
-<pre class="brush: js">function updateStyle(elem) {
+```js
+function updateStyle(elem) {
   var shadow = elem.shadowRoot;
   var childNodes = shadow.childNodes;
-  for(var i = 0; i &lt; childNodes.length; i++) {
+  for(var i = 0; i < childNodes.length; i++) {
     if(childNodes[i].nodeName === 'STYLE') {
       childNodes[i].textContent =
         'div {' +
@@ -85,27 +82,15 @@ attributeChangedCallback(nom, ancienneValeur, nouvelleValeur) {
         '}';
     }
   }
-}</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('DOM WHATWG','#interface-shadowroot','Interface ShadowRoot')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.ShadowRoot")}}</p>
+}
+```
+
+## Spécifications
+
+| Spécification                                                                                    | État                             | Commentaires |
+| ------------------------------------------------------------------------------------------------ | -------------------------------- | ------------ |
+| {{SpecName('DOM WHATWG','#interface-shadowroot','Interface ShadowRoot')}} | {{Spec2('DOM WHATWG')}} |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.ShadowRoot")}}
diff --git a/files/fr/web/api/shadowroot/innerhtml/index.md b/files/fr/web/api/shadowroot/innerhtml/index.md
index 5580e5ad2c..71b322ed76 100644
--- a/files/fr/web/api/shadowroot/innerhtml/index.md
+++ b/files/fr/web/api/shadowroot/innerhtml/index.md
@@ -10,31 +10,32 @@ tags:
   - shadow dom
 translation_of: Web/API/ShadowRoot/innerHTML
 ---
-<div>{{APIRef("Shadow DOM")}}</div>
+{{APIRef("Shadow DOM")}}
 
-<p>La propriété <strong><code>innerHTML</code></strong>, rattachée à l'interface {{domxref("ShadowRoot")}}, permet de définir ou de récupérer une référence à l'arbre DOM contenu dans la racine <code>ShadowRoot</code>.</p>
+La propriété **`innerHTML`**, rattachée à l'interface {{domxref("ShadowRoot")}}, permet de définir ou de récupérer une référence à l'arbre DOM contenu dans la racine `ShadowRoot`.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var <em>domString</em> = <em>shadowRoot</em>.innerHTML
-<em>shadowRoot</em>.innerHTML = <em>domString</em>
-</pre>
+    var domString = shadowRoot.innerHTML
+    shadowRoot.innerHTML = domString
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>Une chaîne de caractères {{domxref("DOMString")}}.</p>
+Une chaîne de caractères {{domxref("DOMString")}}.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: js">let customElem = document.querySelector('mon-element-shadow-dom');
+```js
+let customElem = document.querySelector('mon-element-shadow-dom');
 let shadow = customElem.shadowRoot;
 
-shadow.innerHTML = '&lt;strong&gt;Cet élément devrait être plus important !&lt;/strong&gt;';</pre>
+shadow.innerHTML = '<strong>Cet élément devrait être plus important !</strong>';
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Cette propriété ne fait pas encore partie d'une spécification. Voir <a href="https://github.com/w3c/DOM-Parsing/issues/21">cette <em>issue</em></a> pour le projet de spécification.</p>
+Cette propriété ne fait pas encore partie d'une spécification. Voir [cette _issue_](https://github.com/w3c/DOM-Parsing/issues/21) pour le projet de spécification.
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.ShadowRoot.innerHTML")}}</p>
+{{Compat("api.ShadowRoot.innerHTML")}}
diff --git a/files/fr/web/api/shadowroot/mode/index.md b/files/fr/web/api/shadowroot/mode/index.md
index 2e68fcb24e..a328bb7f87 100644
--- a/files/fr/web/api/shadowroot/mode/index.md
+++ b/files/fr/web/api/shadowroot/mode/index.md
@@ -10,23 +10,24 @@ tags:
   - shadow dom
 translation_of: Web/API/ShadowRoot/mode
 ---
-<div>{{APIRef("Shadow DOM")}}</div>
+{{APIRef("Shadow DOM")}}
 
-<p>La propriété <strong><code>mode</code></strong>, rattachée à l'interface {{domxref("ShadowRoot")}}, indique son mode. Celui-ci peut valoir <code>open</code> ou <code>closed</code> et indique si les fonctionnalités internes de la racine sont accessibles en JavaScript.</p>
+La propriété **`mode`**, rattachée à l'interface {{domxref("ShadowRoot")}}, indique son mode. Celui-ci peut valoir `open` ou `closed` et indique si les fonctionnalités internes de la racine sont accessibles en JavaScript.
 
-<p>Lorsque le mode d'une racine <em>shadow</em> vaut <code>closed</code>, les détails d'implémentation internes sont inaccessibles et inchangeables avec JavaScript (de la même façon que les détails du fonctionnement de l'élément {{HTMLElement("video")}} sont inaccessibles et inchangeables en JavaScript).</p>
+Lorsque le mode d'une racine _shadow_ vaut `closed`, les détails d'implémentation internes sont inaccessibles et inchangeables avec JavaScript (de la même façon que les détails du fonctionnement de l'élément {{HTMLElement("video")}} sont inaccessibles et inchangeables en JavaScript).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var <em>mode</em> = <em>shadowRoot</em>.mode</pre>
+    var mode = shadowRoot.mode
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>Une valeur définie via l'énumération <code><a href="https://dom.spec.whatwg.org/#enumdef-shadowrootmode">ShadowRootMode</a></code> : soit <code>open</code>, soit <code>closed</code>.</p>
+Une valeur définie via l'énumération [`ShadowRootMode`](https://dom.spec.whatwg.org/#enumdef-shadowrootmode) : soit `open`, soit `closed`.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: js">let customElem = document.querySelector('mon-element-shadow-dom');
+```js
+let customElem = document.querySelector('mon-element-shadow-dom');
 let shadow = customElem.shadowRoot;
 
 // Une autre façon de vérifier si la racine est ouverte :
@@ -35,27 +36,15 @@ if(shadow) {
   // Si elle est ouverte, on ferme la racine pour
   // cacher ce qu'il y a à l'intérieur.
   shadow.mode = 'closed';
-}</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('DOM WHATWG','#dom-shadowroot-mode','ShadowRoot.mode')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.ShadowRoot.mode")}}</p>
+}
+```
+
+## Spécifications
+
+| Spécification                                                                            | État                             | Commentaires |
+| ---------------------------------------------------------------------------------------- | -------------------------------- | ------------ |
+| {{SpecName('DOM WHATWG','#dom-shadowroot-mode','ShadowRoot.mode')}} | {{Spec2('DOM WHATWG')}} |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.ShadowRoot.mode")}}
diff --git a/files/fr/web/api/sharedworker/index.md b/files/fr/web/api/sharedworker/index.md
index 1e5e6b0351..dc36979082 100644
--- a/files/fr/web/api/sharedworker/index.md
+++ b/files/fr/web/api/sharedworker/index.md
@@ -10,54 +10,52 @@ tags:
   - Worker
 translation_of: Web/API/SharedWorker
 ---
-<div>{{APIRef("Web Workers API")}}</div>
+{{APIRef("Web Workers API")}}
 
-<p>L'interface <code><strong>SharedWorker</strong></code> représente un type spécifique de worker qui peut être <em>accédé</em> à partir de plusieurs contextes de navigation, tels que plusieurs fenêtres, iframes ou même workers. Ils implémentent une autre interface que les workers dédiés et ont un contexte global différent, {{domxref("SharedWorkerGlobalScope")}}.</p>
+L'interface **`SharedWorker`** représente un type spécifique de worker qui peut être _accédé_ à partir de plusieurs contextes de navigation, tels que plusieurs fenêtres, iframes ou même workers. Ils implémentent une autre interface que les workers dédiés et ont un contexte global différent, {{domxref("SharedWorkerGlobalScope")}}.
 
-<div class="note">
-<p><strong>Note :</strong> Si un SharedWorker peut être accédé à partir de plusieurs contextes de navigation, tous ces contextes de navigation doivent partager exactement la même origine (même protocole, hôte et port.)</p>
-</div>
+> **Note :** Si un SharedWorker peut être accédé à partir de plusieurs contextes de navigation, tous ces contextes de navigation doivent partager exactement la même origine (même protocole, hôte et port.)
 
-<h2 id="Constructeurs">Constructeurs</h2>
+## Constructeurs
 
-<dl>
- <dt>{{domxref("SharedWorker.SharedWorker", "SharedWorker()")}}</dt>
- <dd>Crée un web worker partagé qui exécute le script spécifié par l'URL.</dd>
-</dl>
+- {{domxref("SharedWorker.SharedWorker", "SharedWorker()")}}
+  - : Crée un web worker partagé qui exécute le script spécifié par l'URL.
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<p><em>Il hérite des propriétés de son parent, {{domxref("EventTarget")}}, et implémente les propriétés de {{domxref("AbstractWorker")}}.</em></p>
+_Il hérite des propriétés de son parent, {{domxref("EventTarget")}}, et implémente les propriétés de {{domxref("AbstractWorker")}}._
 
-<dl>
- <dt>{{domxref("AbstractWorker.onerror")}}</dt>
- <dd>Est un {{ domxref("EventListener") }} qui est appelé à chaque fois qu'un {{domxref("ErrorEvent")}} de type <code>error</code> se propage à travers le worker.</dd>
- <dt>{{domxref("SharedWorker.port")}} {{readonlyInline}}</dt>
- <dd>Retourne un objet {{domxref("MessagePort")}} utilisé pour communiquer et contrôler le worker partagé.</dd>
-</dl>
+- {{domxref("AbstractWorker.onerror")}}
+  - : Est un {{ domxref("EventListener") }} qui est appelé à chaque fois qu'un {{domxref("ErrorEvent")}} de type `error` se propage à travers le worker.
+- {{domxref("SharedWorker.port")}} {{readonlyInline}}
+  - : Retourne un objet {{domxref("MessagePort")}} utilisé pour communiquer et contrôler le worker partagé.
 
-<dl>
-</dl>
+<!---->
 
-<h2 id="Méthodes">Méthodes</h2>
+## Méthodes
 
-<p><em>Hérite des méthodes de son parent, {{domxref("EventTarget")}}, et implémente les méthodes de {{domxref("AbstractWorker")}}.</em></p>
+_Hérite des méthodes de son parent, {{domxref("EventTarget")}}, et implémente les méthodes de {{domxref("AbstractWorker")}}._
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Dans notre  <a href="https://github.com/mdn/simple-shared-worker">Exemple basique d'un worker partagé</a> (<a href="http://mdn.github.io/simple-shared-worker/">lancer le worker partagé</a>), nous avons deux pages HTML, qui chacune utilise du code JavaScript pour réaliser un calcul simple. Les différents scripts utilisent le même worker pour effectuer ce calcul — ils peuvent tous les deux y accéder, même si leurs pages s'exécutent à l'intérieur de fenêtres différentes.</p>
+Dans notre  [Exemple basique d'un worker partagé](https://github.com/mdn/simple-shared-worker) ([lancer le worker partagé](http://mdn.github.io/simple-shared-worker/)), nous avons deux pages HTML, qui chacune utilise du code JavaScript pour réaliser un calcul simple. Les différents scripts utilisent le même worker pour effectuer ce calcul — ils peuvent tous les deux y accéder, même si leurs pages s'exécutent à l'intérieur de fenêtres différentes.
 
-<p>L'extrait de code suivant illustre la création d'un objet <code>SharedWorker</code> en utilisant le constructeur {{domxref("SharedWorker.SharedWorker", "SharedWorker()")}}. Les deux scripts contiennent ceci :</p>
+L'extrait de code suivant illustre la création d'un objet `SharedWorker` en utilisant le constructeur {{domxref("SharedWorker.SharedWorker", "SharedWorker()")}}. Les deux scripts contiennent ceci :
 
-<pre class="brush: js">var myWorker = new SharedWorker("worker.js");</pre>
+```js
+var myWorker = new SharedWorker("worker.js");
+```
 
-<p>Les deux scripts accèdent alors au worker à travers un objet {{domxref("MessagePort")}} créé en utilisant la propriété {{domxref("SharedWorker.port")}} — le port est démarré au moyen de sa méthode <code>start()</code> :</p>
+Les deux scripts accèdent alors au worker à travers un objet {{domxref("MessagePort")}} créé en utilisant la propriété {{domxref("SharedWorker.port")}} — le port est démarré au moyen de sa méthode `start()` :
 
-<pre class="brush: js">myWorker.port.start();</pre>
+```js
+myWorker.port.start();
+```
 
-<p>Lorsque le port est démarré, les deux scripts envoient des messages au worker et gèrent les messages qu'il renvoie en utilisant respectivement <code>port.postMessage()</code> et <code>port.onmessage</code> :</p>
+Lorsque le port est démarré, les deux scripts envoient des messages au worker et gèrent les messages qu'il renvoie en utilisant respectivement `port.postMessage()` et `port.onmessage` :
 
-<pre class="brush: js">first.onchange = function() {
+```js
+first.onchange = function() {
     myWorker.port.postMessage([first.value,second.value]);
     console.log('Message envoyé au worker');
   }
@@ -70,11 +68,13 @@ translation_of: Web/API/SharedWorker
   myWorker.port.onmessage = function(e) {
     result1.textContent = e.data;
     console.log('Message reçu du worker');
-  }</pre>
+  }
+```
 
-<p>Au sein du worker, nous utilisons le gestionnaire {{domxref("SharedWorkerGlobalScope.onconnect")}} pour se connecter au même port dont il a été question plus haut. Les ports associés au worker sont accessibles dans la propriété <code>ports</code> de l'événement {{event("connect")}} — nous utilisons alors la méthode {{domxref("MessagePort")}} <code>start()</code> pour démarrer le port, et le gestionnaire <code>onmessage</code> pour s'occuper des messages en provenance des threads principaux.</p>
+Au sein du worker, nous utilisons le gestionnaire {{domxref("SharedWorkerGlobalScope.onconnect")}} pour se connecter au même port dont il a été question plus haut. Les ports associés au worker sont accessibles dans la propriété `ports` de l'événement {{event("connect")}} — nous utilisons alors la méthode {{domxref("MessagePort")}} `start()` pour démarrer le port, et le gestionnaire `onmessage` pour s'occuper des messages en provenance des threads principaux.
 
-<pre class="brush: js">onconnect = function(e) {
+```js
+onconnect = function(e) {
     var port = e.ports[0];
 
     port.onmessage = function(e) {
@@ -83,32 +83,20 @@ translation_of: Web/API/SharedWorker
     }
 
     port.start();
-}</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "#sharedworker", "SharedWorker")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Aucune modification de {{SpecName("Web Workers")}}.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_Compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.SharedWorker")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{ domxref("Worker") }}</li>
- <li><a href="/fr/docs/Utilisation_des_web_workers">Utilisation des web workers</a></li>
-</ul>
+}
+```
+
+## Spécifications
+
+| Spécification                                                                    | Statut                           | Commentaire                                                  |
+| -------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------------ |
+| {{SpecName('HTML WHATWG', "#sharedworker", "SharedWorker")}} | {{Spec2('HTML WHATWG')}} | Aucune modification de {{SpecName("Web Workers")}}. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.SharedWorker")}}
+
+## Voir aussi
+
+- {{ domxref("Worker") }}
+- [Utilisation des web workers](/fr/docs/Utilisation_des_web_workers)
diff --git a/files/fr/web/api/sharedworker/port/index.md b/files/fr/web/api/sharedworker/port/index.md
index 22bd830ee7..8e25c1c7f8 100644
--- a/files/fr/web/api/sharedworker/port/index.md
+++ b/files/fr/web/api/sharedworker/port/index.md
@@ -3,53 +3,40 @@ title: SharedWorker.port
 slug: Web/API/SharedWorker/port
 translation_of: Web/API/SharedWorker/port
 ---
-<div>{{APIRef("Web Workers API")}}</div>
+{{APIRef("Web Workers API")}}
 
-<p>La propriété <code><strong>port</strong></code> de l'interface {{domxref("SharedWorker")}} retourne un objet {{domxref("MessagePort")}} utilisé pour contrôler et communiquer avec le <em>worker</em> partagé.</p>
+La propriété **`port`** de l'interface {{domxref("SharedWorker")}} retourne un objet {{domxref("MessagePort")}} utilisé pour contrôler et communiquer avec le _worker_ partagé.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">myWorker.port;</pre>
+    myWorker.port;
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>Un objet {{domxref("MessagePort")}}.</p>
+Un objet {{domxref("MessagePort")}}.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>L'exemple de code suivant montre la création de l'objet <code>SharedWorker</code> en utilisant le constructeur {{domxref("SharedWorker.SharedWorker", "SharedWorker()")}}. Plusieurs scriptes peuvent accéder au <em>worker</em> avec l'objet {{domxref("MessagePort")}} accessible grâce à la propriété <code>SharedWorker.port</code> — le port est ouvert avec la méthode <code>start()</code>.</p>
+L'exemple de code suivant montre la création de l'objet `SharedWorker` en utilisant le constructeur {{domxref("SharedWorker.SharedWorker", "SharedWorker()")}}. Plusieurs scriptes peuvent accéder au _worker_ avec l'objet {{domxref("MessagePort")}} accessible grâce à la propriété `SharedWorker.port` — le port est ouvert avec la méthode `start()`.
 
-<pre class="brush: js">var myWorker = new SharedWorker('worker.js');
-myWorker.port.start();</pre>
+```js
+var myWorker = new SharedWorker('worker.js');
+myWorker.port.start();
+```
 
-<p>Pour un exemple complet, voir <a href="https://github.com/mdn/simple-shared-worker">(en) Exemple basique de <em>worker</em> partagé</a> (<a href="https://mdn.github.io/simple-shared-worker/">(en) démonstration d'un <em>worker</em> partagé</a>.)</p>
+Pour un exemple complet, voir [(en) Exemple basique de _worker_ partagé](https://github.com/mdn/simple-shared-worker) ([(en) démonstration d'un _worker_ partagé](https://mdn.github.io/simple-shared-worker/).)
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécifications</th>
-   <th scope="col">Status</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "#dom-sharedworker-port", "AbstractWorker.onerror")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+| Spécifications                                                                                           | Status                           | Commentaire |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- |
+| {{SpecName('HTML WHATWG', "#dom-sharedworker-port", "AbstractWorker.onerror")}} | {{Spec2('HTML WHATWG')}} |             |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
+{{Compat("api.SharedWorker.port")}}
 
+## Voir aussi
 
-<p>{{Compat("api.SharedWorker.port")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>L'interface {{domxref("SharedWorker")}} auquel il appartient.</li>
- <li><a href="https://anlexn.github.io/shared-worker-mdn/">(en) Une autre démonstration de multiplication.</a></li>
-</ul>
+- L'interface {{domxref("SharedWorker")}} auquel il appartient.
+- [(en) Une autre démonstration de multiplication.](https://anlexn.github.io/shared-worker-mdn/)
diff --git a/files/fr/web/api/sharedworker/sharedworker/index.md b/files/fr/web/api/sharedworker/sharedworker/index.md
index c4c35fb16d..c6fb6deb85 100644
--- a/files/fr/web/api/sharedworker/sharedworker/index.md
+++ b/files/fr/web/api/sharedworker/sharedworker/index.md
@@ -3,53 +3,47 @@ title: SharedWorker()
 slug: Web/API/SharedWorker/SharedWorker
 translation_of: Web/API/SharedWorker/SharedWorker
 ---
-<div>{{APIRef("Web Workers API")}}</div>
+{{APIRef("Web Workers API")}}
 
-<p>Le constructeur <code><strong>SharedWorker()</strong></code> crée un objet {{domxref("SharedWorker")}} qui exécute le script depuis l'URL indiquée. Le script doit respecter la <a href="/fr/docs/Web/Security/Same-origin_policy">politique de même origine</a>.</p>
+Le constructeur **`SharedWorker()`** crée un objet {{domxref("SharedWorker")}} qui exécute le script depuis l'URL indiquée. Le script doit respecter la [politique de même origine](/fr/docs/Web/Security/Same-origin_policy).
 
-<div class="note">
-<p><strong>Note :</strong> Il y a désaccord entre les fabricants de navigateur pour savoir si l'URI doit avoir la même origine ou non. Bien que Gecko 10.0 {{geckoRelease("10.0")}} et les version supérieurs acceptent des origines différentes, ce n'est pas le cas des autres navigateurs.</p>
-</div>
+> **Note :** Il y a désaccord entre les fabricants de navigateur pour savoir si l'URI doit avoir la même origine ou non. Bien que Gecko 10.0 {{geckoRelease("10.0")}} et les version supérieurs acceptent des origines différentes, ce n'est pas le cas des autres navigateurs.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var monWorker = new SharedWorker(<em>uneURL</em>, <em>nom</em>);
-var monWorker = new SharedWorker(<em>uneURL</em>, <em>options</em>);</pre>
+    var monWorker = new SharedWorker(uneURL, nom);
+    var monWorker = new SharedWorker(uneURL, options);
 
-<h3 id="Paramètre">Paramètre</h3>
+### Paramètre
 
-<dl>
- <dt><em>uneURL</em></dt>
- <dd>Une {{domxref("DOMString")}} qui représente l'URL du scripte du <em>worker</em> qui sera exécuté. Il doit obéir à la politique de même origine.</dd>
- <dt>nom {{optional_inline}}</dt>
- <dd>Une {{domxref("DOMString")}} indiquant un nom pour le {{domxref("SharedWorkerGlobalScope")}} représentant la portée du <em>worker</em>. Souvent utilisé pour le débogage.</dd>
- <dt><em>options</em> {{optional_inline}}</dt>
- <dd>Une objet contenant les propriétés qui peuvent être défini à la création. Les propriété possibles sont:
- <ul>
-  <li><code>type</code>: Une {{domxref("DOMString")}} spécifiant le type de <em>worker</em> à créer. Les valeurs possibles sont: <code>classic</code> ou <code>module</code>. Si non spécifié, la valeur par défaut est <code>classic</code>.</li>
-  <li><code>credentials</code>: Une {{domxref("DOMString")}} spécifiant le type de crédit à utilisé pour le <em>worker</em>. La valeur peut être <dfn><code>omit</code></dfn>, <code><dfn>same-origin</dfn></code> ou <dfn><code>include</code>. Si non spécifié ou si le type est <code>classic</code>, la valeur par défaut sera <code>omit</code> (pas de crédit nécéssaire).</dfn></li>
-  <li><dfn><code>name</code>: Une </dfn>{{domxref("DOMString")}} spécifiant un identifiant pour le {{domxref("SharedWorkerGlobalScope")}} représentant la porté du <em>worker</em>, souvent utilisé pour déboguer.</li>
- </ul>
- </dd>
-</dl>
+- _uneURL_
+  - : Une {{domxref("DOMString")}} qui représente l'URL du scripte du _worker_ qui sera exécuté. Il doit obéir à la politique de même origine.
+- nom {{optional_inline}}
+  - : Une {{domxref("DOMString")}} indiquant un nom pour le {{domxref("SharedWorkerGlobalScope")}} représentant la portée du _worker_. Souvent utilisé pour le débogage.
+- _options_ {{optional_inline}}
 
-<h3 id="Valeur_retournée">Valeur retournée</h3>
+  - : Une objet contenant les propriétés qui peuvent être défini à la création. Les propriété possibles sont:
 
-<p>Le <em>woker</em> créé.</p>
+    - `type`: Une {{domxref("DOMString")}} spécifiant le type de _worker_ à créer. Les valeurs possibles sont: `classic` ou `module`. Si non spécifié, la valeur par défaut est `classic`.
+    - `credentials`: Une {{domxref("DOMString")}} spécifiant le type de crédit à utilisé pour le _worker_. La valeur peut être _`omit`_, `same-origin` ou _`include`. Si non spécifié ou si le type est `classic`, la valeur par défaut sera `omit` (pas de crédit nécéssaire)._
+    - _`name`: Une _{{domxref("DOMString")}} spécifiant un identifiant pour le {{domxref("SharedWorkerGlobalScope")}} représentant la porté du _worker_, souvent utilisé pour déboguer.
 
-<h3 id="Exceptions">Exceptions</h3>
+### Valeur retournée
 
-<ul>
- <li>Une <code>SecurityError</code> est levé si le document n'est pas autorisé à lancer le <em>worker</em>. Par exemple si l'URL a une syntaxe invalide ou si la politique de même origine est violée.</li>
- <li>Une <code>NetworkError</code> est levé si le type MIME du script <em>worker</em> n'est pas correct. Le type MIME doit toujours être <code>text/javascript</code>.</li>
- <li>Une <code>SyntaxError</code> est levée si <em>uneURL</em> ne peut pas être analysée.</li>
-</ul>
+Le _woker_ créé.
 
-<h2 id="Exemple">Exemple</h2>
+### Exceptions
 
-<p>L'extrait de code suivant montre la création d'un objet {{domxref("SharedWorker")}} en utilisant le contructeur <code>SharedWorker()</code> et l'usage qui en est fait.</p>
+- Une `SecurityError` est levé si le document n'est pas autorisé à lancer le _worker_. Par exemple si l'URL a une syntaxe invalide ou si la politique de même origine est violée.
+- Une `NetworkError` est levé si le type MIME du script _worker_ n'est pas correct. Le type MIME doit toujours être `text/javascript`.
+- Une `SyntaxError` est levée si _uneURL_ ne peut pas être analysée.
 
-<pre class="brush: js">var myWorker = new SharedWorker('worker.js');
+## Exemple
+
+L'extrait de code suivant montre la création d'un objet {{domxref("SharedWorker")}} en utilisant le contructeur `SharedWorker()` et l'usage qui en est fait.
+
+```js
+var myWorker = new SharedWorker('worker.js');
 
 myWorker.port.start();
 
@@ -66,36 +60,22 @@ second.onchange = function() {
 myWorker.port.onmessage = function(e) {
   result1.textContent = e.data;
   console.log('Message received from worker');
-}</pre>
-
-<p>Pour l'exemple en complet, voir <a href="https://github.com/mdn/simple-shared-worker">Basic shared worker example</a> (<a href="http://mdn.github.io/simple-shared-worker/">run shared worker</a>.)</p>
-
-<h2 id="Spécifications">Spécifications</h2>
+}
+```
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statuts</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "#dom-sharedworker", "SharedWorker()")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+Pour l'exemple en complet, voir [Basic shared worker example](https://github.com/mdn/simple-shared-worker) ([run shared worker](http://mdn.github.io/simple-shared-worker/).)
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Spécifications
 
+| Spécification                                                                            | Statuts                          | Commentaire |
+| ---------------------------------------------------------------------------------------- | -------------------------------- | ----------- |
+| {{SpecName('HTML WHATWG', "#dom-sharedworker", "SharedWorker()")}} | {{Spec2('HTML WHATWG')}} |             |
 
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.SharedWorker.SharedWorker")}}</p>
+{{Compat("api.SharedWorker.SharedWorker")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>L'interface {{domxref("SharedWorker")}} auquel il appartient.</li>
- <li><a href="https://anlexn.github.io/shared-worker-mdn/">Une autre démonstration de multiplication.</a></li>
-</ul>
+- L'interface {{domxref("SharedWorker")}} auquel il appartient.
+- [Une autre démonstration de multiplication.](https://anlexn.github.io/shared-worker-mdn/)
diff --git a/files/fr/web/api/sharedworkerglobalscope/applicationcache/index.md b/files/fr/web/api/sharedworkerglobalscope/applicationcache/index.md
index 7440932b75..c04e93531d 100644
--- a/files/fr/web/api/sharedworkerglobalscope/applicationcache/index.md
+++ b/files/fr/web/api/sharedworkerglobalscope/applicationcache/index.md
@@ -3,36 +3,34 @@ title: SharedWorkerGlobalScope.applicationCache
 slug: Web/API/SharedWorkerGlobalScope/applicationCache
 translation_of: Web/API/SharedWorkerGlobalScope/applicationCache
 ---
-<div>{{APIRef("Web Workers API")}}</div>
+{{APIRef("Web Workers API")}}
 
-<div class="warning">
-<p><strong>Attention :</strong> Application Cache est déprécié depuis Firefox 44, et ne sera plus disponible dans des contextes non sécurisés avant Firefox 60 ({{bug(1354175)}}, currently uniquement sur les versions Nightly/Beta). Ne pas utiliser cette fonctionnalité sur des sites web en production, utilisez plutôt les <a href="/fr/docs/Web/API/Service_Worker_API">services workers.</a></p>
-</div>
+> **Attention :** Application Cache est déprécié depuis Firefox 44, et ne sera plus disponible dans des contextes non sécurisés avant Firefox 60 ({{bug(1354175)}}, currently uniquement sur les versions Nightly/Beta). Ne pas utiliser cette fonctionnalité sur des sites web en production, utilisez plutôt les [services workers.](/fr/docs/Web/API/Service_Worker_API)
 
-<p>La propriété en lecture seule <code><strong>applicationCache</strong></code> de l'interface {{domxref("SharedWorkerGlobalScope")}} retourne l'objet {{domxref("ApplicationCache")}} pour le <em>worker</em> (voir <a href="/fr/docs/Web/HTML/Using_the_application_cache">Utiliser le cache d'application</a>).</p>
+La propriété en lecture seule **`applicationCache`** de l'interface {{domxref("SharedWorkerGlobalScope")}} retourne l'objet {{domxref("ApplicationCache")}} pour le _worker_ (voir [Utiliser le cache d'application](/fr/docs/Web/HTML/Using_the_application_cache)).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">var nameObj = self.applicationCache;</pre>
+```js
+var nameObj = self.applicationCache;
+```
 
-<h3 id="valeur">valeur</h3>
+### valeur
 
-<p>Un {{domxref("ApplicationCache")}}.</p>
+Un {{domxref("ApplicationCache")}}.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Si un <em>worker</em> partagé a un AppCache, vous pouvez récupérer une référence en utilisant à l'intérieur d'un <em>worker</em> partagé:</p>
+Si un _worker_ partagé a un AppCache, vous pouvez récupérer une référence en utilisant à l'intérieur d'un _worker_ partagé:
 
-<pre class="brush: js">self.applicationCache</pre>
+```js
+self.applicationCache
+```
 
-<h2 id="Browser_Compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
+{{Compat("api.SharedWorkerGlobalScope.applicationCache")}}
 
+## Voir aussi
 
-<p>{{Compat("api.SharedWorkerGlobalScope.applicationCache")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("SharedWorkerGlobalScope")}}</li>
-</ul>
+- {{domxref("SharedWorkerGlobalScope")}}
diff --git a/files/fr/web/api/sharedworkerglobalscope/index.md b/files/fr/web/api/sharedworkerglobalscope/index.md
index d3887aafa0..fa6e1782c2 100644
--- a/files/fr/web/api/sharedworkerglobalscope/index.md
+++ b/files/fr/web/api/sharedworkerglobalscope/index.md
@@ -11,122 +11,91 @@ tags:
   - Web Workers
 translation_of: Web/API/SharedWorkerGlobalScope
 ---
-<div>{{APIRef("Web Workers API")}}</div>
-
-<p>The <strong><code>SharedWorkerGlobalScope</code></strong> object (the {{domxref("SharedWorker")}} global scope) is accessible through the {{domxref("window.self","self")}} keyword. Some additional global functions, namespaces objects, and constructors, not typically associated with the worker global scope, but available on it, are listed in the <a href="/en-US/docs/Web/JavaScript/Reference">JavaScript Reference</a>. See the complete list of <a href="/en-US/docs/Web/API/Web_Workers_API/Functions_and_classes_available_to_workers">functions available to workers</a>.</p>
-
-<h2 id="Properties">Properties</h2>
-
-<p><em>This interface inherits properties from the {{domxref("WorkerGlobalScope")}} interface, and its parent {{domxref("EventTarget")}}, and therefore implements properties from {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, and {{domxref("WindowEventHandlers")}}.</em></p>
-
-<dl>
- <dt>{{domxref("SharedWorkerGlobalScope.name")}} {{readOnlyinline}}</dt>
- <dd>The name that the {{domxref("SharedWorker")}} was (optionally) given when it was created using the {{domxref("SharedWorker.SharedWorker", "SharedWorker()")}} constructor. This is mainly useful for debugging purposes.</dd>
- <dt>{{domxref("SharedWorkerGlobalScope.applicationCache")}} {{readOnlyinline}} {{deprecated_inline}}</dt>
- <dd>This property returns the {{domxref("ApplicationCache")}} object for the worker (see <a href="/en-US/docs/Web/HTML/Using_the_application_cache">Using the application cache</a>).</dd>
-</dl>
-
-<h3 id="Properties_inherited_from_WorkerGlobalScope">Properties inherited from WorkerGlobalScope</h3>
-
-<dl>
- <dt>{{domxref("WorkerGlobalScope.self")}}</dt>
- <dd>Returns an object reference to the <code>DedicatedWorkerGlobalScope</code> object itself.</dd>
- <dt>{{domxref("WorkerGlobalScope.console")}} {{readOnlyinline}}</dt>
- <dd>Returns the {{domxref("Console")}} associated with the worker.</dd>
- <dt>{{domxref("WorkerGlobalScope.location")}} {{readOnlyinline}}</dt>
- <dd>Returns the {{domxref("WorkerLocation")}} associated with the worker. <code>WorkerLocation</code> is a specific location object, mostly a subset of the {{domxref("Location")}} for browsing scopes, but adapted to workers.</dd>
- <dt>{{domxref("WorkerGlobalScope.navigator")}} {{readOnlyinline}}</dt>
- <dd>Returns the {{domxref("WorkerNavigator")}} associated with the worker. <code>WorkerNavigator</code> is a specific navigator object, mostly a subset of the {{domxref("Navigator")}} for browsing scopes, but adapted to workers.</dd>
- <dt>{{domxref("WorkerGlobalScope.performance")}} {{readOnlyinline}} {{Non-standard_inline}}</dt>
- <dd>Returns the {{domxref("Performance")}} object associated with the worker, which is a regular performance object, but with a subset of its properties and methods available.</dd>
-</dl>
-
-<h3 id="Event_handlers">Event handlers</h3>
-
-<p><em>This interface inherits event handlers from the {{domxref("WorkerGlobalScope")}} interface, and its parent {{domxref("EventTarget")}}, and therefore implements event handlers from {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, and {{domxref("WindowEventHandlers")}}.</em></p>
-
-<dl>
- <dt>{{domxref("SharedWorkerGlobalScope.onconnect")}}</dt>
- <dd>Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("connect")}} event is raised — that is, when a {{domxref("MessagePort")}} connection is opened between the associated {{domxref("SharedWorker")}} and the main thread.</dd>
-</dl>
-
-<h2 id="Methods">Methods</h2>
-
-<p><em>This interface inherits methods from the {{domxref("WorkerGlobalScope")}} interface, and its parent {{domxref("EventTarget")}}, and therefore implements methods from {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, and {{domxref("WindowEventHandlers")}}.</em></p>
-
-<dl>
- <dt>{{domxref("SharedWorkerGlobalScope.close()")}}</dt>
- <dd>Discards any tasks queued in the <code>SharedWorkerGlobalScope</code>'s event loop, effectively closing this particular scope.</dd>
-</dl>
-
-<h3 id="Inherited_from_WorkerGlobalScope">Inherited from WorkerGlobalScope</h3>
-
-<dl>
- <dt>{{domxref("WorkerGlobalScope.close()")}} {{deprecated_inline}}</dt>
- <dd>Discards any tasks queued in the <code>WorkerGlobalScope</code>'s event loop, effectively closing this particular scope.</dd>
- <dt>{{domxref("WorkerGlobalScope.dump()")}} {{non-standard_inline}}</dt>
- <dd>Allows you to write a message to stdout — i.e. in your terminal. This is the same as Firefox's {{domxref("window.dump")}}, but for workers.</dd>
- <dt>{{domxref("WorkerGlobalScope.importScripts()")}}</dt>
- <dd>Imports one or more scripts into the worker's scope. You can specify as many as you'd like, separated by commas. For example:<code> importScripts('foo.js', 'bar.js');</code></dd>
-</dl>
-
-<h3 id="Implemented_from_other_places">Implemented from other places</h3>
-
-<dl>
- <dt>{{domxref("WindowBase64.atob()")}}</dt>
- <dd>Decodes a string of data which has been encoded using base-64 encoding.</dd>
- <dt>{{domxref("WindowBase64.btoa()")}}</dt>
- <dd>Creates a base-64 encoded ASCII string from a string of binary data.</dd>
- <dt>{{domxref("WindowTimers.clearInterval()")}}</dt>
- <dd>Cancels the repeated execution set using {{domxref("WindowTimers.setInterval()")}}.</dd>
- <dt>{{domxref("WindowTimers.clearTimeout()")}}</dt>
- <dd>Cancels the repeated execution set using {{domxref("WindowTimers.setTimeout()")}}.</dd>
- <dt>{{domxref("WindowTimers.setInterval()")}}</dt>
- <dd>Schedules the execution of a function every X milliseconds.</dd>
- <dt>{{domxref("WindowTimers.setTimeout()")}}</dt>
- <dd>Sets a delay for executing a function.</dd>
-</dl>
-
-<h2 id="Events">Events</h2>
-
-<p>Listen to this event using <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> or by assigning an event listener to the <code>on<em>eventname</em></code> property of this interface.</p>
-
-<dl>
- <dt><code><a href="/en-US/docs/Web/API/SharedWorkerGlobalScope/connect_event">connect</a></code></dt>
- <dd>Fired on shared workers when a new client connects.<br>
- Also available via the <code><a href="/en-US/docs/Web/API/SharedWorkerGlobalScope/onconnect">onconnect</a></code> property.</dd>
-</dl>
-
-<h2 id="Specifications">Specifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', '#sharedworkerglobalscope', 'SharedWorkerGlobalScope')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Browser compatibility</h2>
-
-
-
-<p>{{Compat("api.SharedWorkerGlobalScope")}}</p>
-
-<h2 id="See_also">See also</h2>
-
-<ul>
- <li>{{domxref("SharedWorker")}}</li>
- <li>{{domxref("WorkerGlobalScope")}}</li>
- <li><a href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers">Using Web workers</a></li>
- <li><a href="/en-US/docs/Web/Guide/Needs_categorization/Functions_available_to_workers">Functions available to workers</a></li>
-</ul>
+{{APIRef("Web Workers API")}}
+
+The **`SharedWorkerGlobalScope`** object (the {{domxref("SharedWorker")}} global scope) is accessible through the {{domxref("window.self","self")}} keyword. Some additional global functions, namespaces objects, and constructors, not typically associated with the worker global scope, but available on it, are listed in the [JavaScript Reference](/en-US/docs/Web/JavaScript/Reference). See the complete list of [functions available to workers](/en-US/docs/Web/API/Web_Workers_API/Functions_and_classes_available_to_workers).
+
+## Properties
+
+_This interface inherits properties from the {{domxref("WorkerGlobalScope")}} interface, and its parent {{domxref("EventTarget")}}, and therefore implements properties from {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, and {{domxref("WindowEventHandlers")}}._
+
+- {{domxref("SharedWorkerGlobalScope.name")}} {{readOnlyinline}}
+  - : The name that the {{domxref("SharedWorker")}} was (optionally) given when it was created using the {{domxref("SharedWorker.SharedWorker", "SharedWorker()")}} constructor. This is mainly useful for debugging purposes.
+- {{domxref("SharedWorkerGlobalScope.applicationCache")}} {{readOnlyinline}} {{deprecated_inline}}
+  - : This property returns the {{domxref("ApplicationCache")}} object for the worker (see [Using the application cache](/en-US/docs/Web/HTML/Using_the_application_cache)).
+
+### Properties inherited from WorkerGlobalScope
+
+- {{domxref("WorkerGlobalScope.self")}}
+  - : Returns an object reference to the `DedicatedWorkerGlobalScope` object itself.
+- {{domxref("WorkerGlobalScope.console")}} {{readOnlyinline}}
+  - : Returns the {{domxref("Console")}} associated with the worker.
+- {{domxref("WorkerGlobalScope.location")}} {{readOnlyinline}}
+  - : Returns the {{domxref("WorkerLocation")}} associated with the worker. `WorkerLocation` is a specific location object, mostly a subset of the {{domxref("Location")}} for browsing scopes, but adapted to workers.
+- {{domxref("WorkerGlobalScope.navigator")}} {{readOnlyinline}}
+  - : Returns the {{domxref("WorkerNavigator")}} associated with the worker. `WorkerNavigator` is a specific navigator object, mostly a subset of the {{domxref("Navigator")}} for browsing scopes, but adapted to workers.
+- {{domxref("WorkerGlobalScope.performance")}} {{readOnlyinline}} {{Non-standard_inline}}
+  - : Returns the {{domxref("Performance")}} object associated with the worker, which is a regular performance object, but with a subset of its properties and methods available.
+
+### Event handlers
+
+_This interface inherits event handlers from the {{domxref("WorkerGlobalScope")}} interface, and its parent {{domxref("EventTarget")}}, and therefore implements event handlers from {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, and {{domxref("WindowEventHandlers")}}._
+
+- {{domxref("SharedWorkerGlobalScope.onconnect")}}
+  - : Is an {{event("Event_handlers", "event handler")}} representing the code to be called when the {{event("connect")}} event is raised — that is, when a {{domxref("MessagePort")}} connection is opened between the associated {{domxref("SharedWorker")}} and the main thread.
+
+## Methods
+
+_This interface inherits methods from the {{domxref("WorkerGlobalScope")}} interface, and its parent {{domxref("EventTarget")}}, and therefore implements methods from {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, and {{domxref("WindowEventHandlers")}}._
+
+- {{domxref("SharedWorkerGlobalScope.close()")}}
+  - : Discards any tasks queued in the `SharedWorkerGlobalScope`'s event loop, effectively closing this particular scope.
+
+### Inherited from WorkerGlobalScope
+
+- {{domxref("WorkerGlobalScope.close()")}} {{deprecated_inline}}
+  - : Discards any tasks queued in the `WorkerGlobalScope`'s event loop, effectively closing this particular scope.
+- {{domxref("WorkerGlobalScope.dump()")}} {{non-standard_inline}}
+  - : Allows you to write a message to stdout — i.e. in your terminal. This is the same as Firefox's {{domxref("window.dump")}}, but for workers.
+- {{domxref("WorkerGlobalScope.importScripts()")}}
+  - : Imports one or more scripts into the worker's scope. You can specify as many as you'd like, separated by commas. For example:` importScripts('foo.js', 'bar.js');`
+
+### Implemented from other places
+
+- {{domxref("WindowBase64.atob()")}}
+  - : Decodes a string of data which has been encoded using base-64 encoding.
+- {{domxref("WindowBase64.btoa()")}}
+  - : Creates a base-64 encoded ASCII string from a string of binary data.
+- {{domxref("WindowTimers.clearInterval()")}}
+  - : Cancels the repeated execution set using {{domxref("WindowTimers.setInterval()")}}.
+- {{domxref("WindowTimers.clearTimeout()")}}
+  - : Cancels the repeated execution set using {{domxref("WindowTimers.setTimeout()")}}.
+- {{domxref("WindowTimers.setInterval()")}}
+  - : Schedules the execution of a function every X milliseconds.
+- {{domxref("WindowTimers.setTimeout()")}}
+  - : Sets a delay for executing a function.
+
+## Events
+
+Listen to this event using [`addEventListener()`](/en-US/docs/Web/API/EventTarget/addEventListener) or by assigning an event listener to the `oneventname` property of this interface.
+
+- [`connect`](/en-US/docs/Web/API/SharedWorkerGlobalScope/connect_event)
+  - : Fired on shared workers when a new client connects.
+    Also available via the [`onconnect`](/en-US/docs/Web/API/SharedWorkerGlobalScope/onconnect) property.
+
+## Specifications
+
+| Specification                                                                                                | Status                           | Comment |
+| ------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------- |
+| {{SpecName('HTML WHATWG', '#sharedworkerglobalscope', 'SharedWorkerGlobalScope')}} | {{Spec2('HTML WHATWG')}} |         |
+
+## Browser compatibility
+
+{{Compat("api.SharedWorkerGlobalScope")}}
+
+## See also
+
+- {{domxref("SharedWorker")}}
+- {{domxref("WorkerGlobalScope")}}
+- [Using Web workers](/en-US/docs/Web/API/Web_Workers_API/Using_web_workers)
+- [Functions available to workers](/en-US/docs/Web/Guide/Needs_categorization/Functions_available_to_workers)
diff --git a/files/fr/web/api/sharedworkerglobalscope/onconnect/index.md b/files/fr/web/api/sharedworkerglobalscope/onconnect/index.md
index 88b05cd2d7..f14a8d0b4b 100644
--- a/files/fr/web/api/sharedworkerglobalscope/onconnect/index.md
+++ b/files/fr/web/api/sharedworkerglobalscope/onconnect/index.md
@@ -3,21 +3,24 @@ title: SharedWorkerGlobalScope.onconnect
 slug: Web/API/SharedWorkerGlobalScope/onconnect
 translation_of: Web/API/SharedWorkerGlobalScope/onconnect
 ---
-<p>{{APIRef("Web Workers API")}}</p>
+{{APIRef("Web Workers API")}}
 
-<p>La proriété <strong><code>onconnect</code></strong> de l'interface {{domxref("SharedWorkerGlobalScope")}} est un gestionnaire d'évènement pour l'évènement {{event("connect")}}, c'est à dire quand une connexion {{domxref("MessagePort")}} est ouverte entre le {{domxref("SharedWorker")}} et le <em>thread</em> principale.</p>
+La proriété **`onconnect`** de l'interface {{domxref("SharedWorkerGlobalScope")}} est un gestionnaire d'évènement pour l'évènement {{event("connect")}}, c'est à dire quand une connexion {{domxref("MessagePort")}} est ouverte entre le {{domxref("SharedWorker")}} et le _thread_ principale.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">onconnect = function() { ... };</pre>
+```js
+onconnect = function() { ... };
+```
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Cet exemple montre le gestionnaire d'évènement <code>onconnect</code> quand une connection depuis le thread principal vers un fichier de <em>worker</em> partagé via un {{domxref("MessagePort")}}. L'objet évènement est un {{domxref("MessageEvent")}}.</p>
+Cet exemple montre le gestionnaire d'évènement `onconnect` quand une connection depuis le thread principal vers un fichier de _worker_ partagé via un {{domxref("MessagePort")}}. L'objet évènement est un {{domxref("MessageEvent")}}.
 
-<p>Le port de connexion peut-être récupéré avec la propriété <code>ports</code> de l'objet évènement. Le port a un gestionnaire d'évènement <code>onmessage</code> pour gérer les évènement venant de cet port et la méthode <code>postMessage()</code> peut-être utilisée pour répondre au <em>thread</em> principale qui utilise le <em>worker</em>.</p>
+Le port de connexion peut-être récupéré avec la propriété `ports` de l'objet évènement. Le port a un gestionnaire d'évènement `onmessage` pour gérer les évènement venant de cet port et la méthode `postMessage()` peut-être utilisée pour répondre au _thread_ principale qui utilise le _worker_.
 
-<pre class="brush: js">onconnect = function(e) {
+```js
+onconnect = function(e) {
     var port = e.ports[0];
 
     port.onmessage = function(e) {
@@ -26,39 +29,23 @@ translation_of: Web/API/SharedWorkerGlobalScope/onconnect
     }
 
     port.start();
-}</pre>
+}
+```
 
-<p>Pour l'exemple complet en fonctionnement, voir <a href="https://github.com/mdn/simple-shared-worker">Basic shared worker example</a> (<a href="http://mdn.github.io/simple-shared-worker/">run shared worker</a>.)</p>
+Pour l'exemple complet en fonctionnement, voir [Basic shared worker example](https://github.com/mdn/simple-shared-worker) ([run shared worker](http://mdn.github.io/simple-shared-worker/).)
 
-<div class="note">
-<p><strong>Note :</strong> La propriété <code>data</code> de l'objet évènement est <code>null</code> dans Firefox. À partir de la version 65, elle est initialisée comme une chaîne vide, selon les spécifications ({{bug(1508824)}}).</p>
-</div>
+> **Note :** La propriété `data` de l'objet évènement est `null` dans Firefox. À partir de la version 65, elle est initialisée comme une chaîne vide, selon les spécifications ({{bug(1508824)}}).
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', '#handler-sharedworkerglobalscope-onconnect', 'onconnect')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                        | Status                           | Commentaire |
+| -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- |
+| {{SpecName('HTML WHATWG', '#handler-sharedworkerglobalscope-onconnect', 'onconnect')}} | {{Spec2('HTML WHATWG')}} |             |
 
-<h2 id="Browser_Compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
+{{Compat("api.SharedWorkerGlobalScope.onconnect")}}
 
+## Voir aussi
 
-<p>{{Compat("api.SharedWorkerGlobalScope.onconnect")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("SharedWorkerGlobalScope")}}</li>
-</ul>
+- {{domxref("SharedWorkerGlobalScope")}}
diff --git a/files/fr/web/api/speechrecognition/index.md b/files/fr/web/api/speechrecognition/index.md
index 60b7ce9ab6..673f035f85 100644
--- a/files/fr/web/api/speechrecognition/index.md
+++ b/files/fr/web/api/speechrecognition/index.md
@@ -3,83 +3,76 @@ title: SpeechRecognition
 slug: Web/API/SpeechRecognition
 translation_of: Web/API/SpeechRecognition
 ---
-<p>{{APIRef("Web Speech API")}}{{SeeCompatTable}}</p>
-
-<p><strong><code>SpeechRecognition</code></strong> est l'interface contrôleur du service de reconnaissance de la <a href="/en-US/docs/Web/API/Web_Speech_API">Web Speech API</a>; elle gère également les {{domxref("SpeechRecognitionEvent")}} envoyés par le service de reconnaissance.</p>
-
-<h2 id="Constructeur">Constructeur</h2>
-
-<dl>
- <dt>{{domxref("SpeechRecognition.SpeechRecognition()")}}</dt>
- <dd>Crée un nouvel objet <code>SpeechRecognition</code></dd>
-</dl>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<p><em><code>SpeechRecognition</code><code><em> </em></code>hérite également des propriétés de son interface parente, {{domxref("EventTarget")}}.</em></p>
-
-<dl>
- <dt>{{domxref("SpeechRecognition.grammars")}}</dt>
- <dd>Retourne et définit une collection d'objets {{domxref("SpeechGrammar")}} représentant les grammaires qui seront comprises par <code>SpeechRecognition</code>.</dd>
- <dt>{{domxref("SpeechRecognition.lang")}}</dt>
- <dd>Retourne et définit la langue de  <code>SpeechRecognition</code>. Si elle n'est pas spécifiée, prend la valeur par défaut du HTML {{htmlattrxref("lang","html")}} ou le paramètre de langue du user agent si celle-ci n'est pas défini non plus.</dd>
- <dt>{{domxref("SpeechRecognition.continuous")}}</dt>
- <dd>Contrôle si la reconnaissance est continue, ou retourne seulement un seul résultat. Par défaut retourne un seul résultat (<code>false</code>.)</dd>
- <dt>{{domxref("SpeechRecognition.interimResults")}}</dt>
- <dd>Contrôle si les résultats intermédiaires doivent être retournés (<code>true</code>) ou pas (<code>false</code>.) Les résultats intermédiaires sont des résultats qui ne sont pas encore définitifs. (e.x. ou la propriété {{domxref("SpeechRecognitionResult.isFinal")}}  est <code>false</code>.)</dd>
- <dt>{{domxref("SpeechRecognition.maxAlternatives")}}</dt>
- <dd>Règle le nombre maximum de {{domxref("SpeechRecognitionAlternative")}} (d'alternatives) fourni par résultat. La valeur par défaut est 1.</dd>
- <dt>{{domxref("SpeechRecognition.serviceURI")}}</dt>
- <dd>Spécifie l'emplacement du service de reconnaissance vocale utilisé par <code>SpeechRecognition</code> pour traiter la reconnaissance proprement dite. La valeur par défaut le chemin par défaut du user agent.</dd>
-</dl>
-
-<h3 id="Event_handlers">Event handlers</h3>
-
-<dl>
- <dt>{{domxref("SpeechRecognition.onaudiostart")}}</dt>
- <dd>Déclenché lorsque l'agent utilisateur commence à capturer le son.</dd>
- <dt>{{domxref("SpeechRecognition.onaudioend")}}</dt>
- <dd>Déclenché lorsque l'agent utilisateur a terminé la capture audio.</dd>
- <dt>{{domxref("SpeechRecognition.onend")}}</dt>
- <dd>Déclenché lorsque le service de reconnaissance vocale est déconnecté.</dd>
- <dt>{{domxref("SpeechRecognition.onerror")}}</dt>
- <dd>Déclenché en cas d'erreur de reconnaissance vocale.</dd>
- <dt>{{domxref("SpeechRecognition.onnomatch")}}</dt>
- <dd>Déclenché lorsque le service de reconnaissance vocale retourne un résultat final sans concordance significative. Il peut s'agir d'un certain degré de reconnaissance, qui ne correspond pas ou ne dépasse le seuil de {{domxref("SpeechRecognitionAlternative.confidence","confidence")}}.</dd>
- <dt>{{domxref("SpeechRecognition.onresult")}}</dt>
- <dd>Déclenché lorsque le service de reconnaissance vocale retourne un résultat - un mot ou une expression a donc été reconnu(e) positivement et cela a été communiqué à l'application.</dd>
- <dt>{{domxref("SpeechRecognition.onsoundstart")}}</dt>
- <dd>Déclenché lorsqu'un son - parole reconnaissable ou non - a été détecté.</dd>
- <dt>{{domxref("SpeechRecognition.onsoundend")}}</dt>
- <dd>Déclenché lorsque le son - parole reconnaissable ou non - n'est plus détecté.</dd>
- <dt>{{domxref("SpeechRecognition.onspeechstart")}}</dt>
- <dd>Déclenché lorsque du son à été reconnu par le service de reconnaissance vocale comme de la parole.</dd>
- <dt>{{domxref("SpeechRecognition.onspeechend")}}</dt>
- <dd>Déclenché lorsque la parole reconnue par le service de reconnaissance vocale a cesse d'être détectée.</dd>
- <dt>{{domxref("SpeechRecognition.onstart")}}</dt>
- <dd>Déclenché lorsque le service de reconnaissance vocale commence à écouter l'audio entrant, dans le but de reconnaître les grammaires associées à la (reconnaissance vocale) <code>SpeechRecognition</code> actuelle.</dd>
-</dl>
-
-<h2 id="Methods">Methods</h2>
-
-<p><em><code>SpeechRecognition</code> also inherits methods from its parent interface, {{domxref("EventTarget")}}.</em></p>
-
-<dl>
- <dt>{{domxref("SpeechRecognition.abort()")}}</dt>
- <dd>Stops the speech recognition service from listening to incoming audio, and doesn't attempt to return a {{domxref("SpeechRecognitionResult")}}.</dd>
- <dt>{{domxref("SpeechRecognition.start()")}}</dt>
- <dd>Starts the speech recognition service listening to incoming audio with intent to recognize grammars associated with the current <code>SpeechRecognition</code>.</dd>
- <dt>{{domxref("SpeechRecognition.stop()")}}</dt>
- <dd>Stops the speech recognition service from listening to incoming audio, and attempts to return a {{domxref("SpeechRecognitionResult")}} using the audio captured so far.</dd>
-</dl>
-
-<h2 id="Examples">Examples</h2>
-
-<p>In our simple <a href="https://github.com/mdn/web-speech-api/tree/master/speech-color-changer">Speech color changer</a> example, we create a new <code>SpeechRecognition</code> object instance using the {{domxref("SpeechRecognition.SpeechRecognition", "SpeechRecognition()")}} constructor, create a new {{domxref("SpeechGrammarList")}}, and set it to be the grammar that will be recognised by the <code>SpeechRecognition</code> instance using the {{domxref("SpeechRecognition.grammars")}} property.</p>
-
-<p>After some other values have been defined, we then set it so that the recognition service starts when a click event occurs (see {{domxref("SpeechRecognition.start()")}}.) When a result has been successfully recognised, the {{domxref("SpeechRecognition.onresult")}} handler fires,  we extract the color that was spoken from the event object, and then set the background color of the {{htmlelement("html")}} element to that colour.</p>
-
-<pre class="brush: js">var grammar = '#JSGF V1.0; grammar colors; public &lt;color&gt; = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;'
+{{APIRef("Web Speech API")}}{{SeeCompatTable}}
+
+**`SpeechRecognition`** est l'interface contrôleur du service de reconnaissance de la [Web Speech API](/en-US/docs/Web/API/Web_Speech_API); elle gère également les {{domxref("SpeechRecognitionEvent")}} envoyés par le service de reconnaissance.
+
+## Constructeur
+
+- {{domxref("SpeechRecognition.SpeechRecognition()")}}
+  - : Crée un nouvel objet `SpeechRecognition`
+
+## Propriétés
+
+_` SpeechRecognition``  `hérite également des propriétés de son interface parente, {{domxref("EventTarget")}}._
+
+- {{domxref("SpeechRecognition.grammars")}}
+  - : Retourne et définit une collection d'objets {{domxref("SpeechGrammar")}} représentant les grammaires qui seront comprises par `SpeechRecognition`.
+- {{domxref("SpeechRecognition.lang")}}
+  - : Retourne et définit la langue de  `SpeechRecognition`. Si elle n'est pas spécifiée, prend la valeur par défaut du HTML {{htmlattrxref("lang","html")}} ou le paramètre de langue du user agent si celle-ci n'est pas défini non plus.
+- {{domxref("SpeechRecognition.continuous")}}
+  - : Contrôle si la reconnaissance est continue, ou retourne seulement un seul résultat. Par défaut retourne un seul résultat (`false`.)
+- {{domxref("SpeechRecognition.interimResults")}}
+  - : Contrôle si les résultats intermédiaires doivent être retournés (`true`) ou pas (`false`.) Les résultats intermédiaires sont des résultats qui ne sont pas encore définitifs. (e.x. ou la propriété {{domxref("SpeechRecognitionResult.isFinal")}}  est `false`.)
+- {{domxref("SpeechRecognition.maxAlternatives")}}
+  - : Règle le nombre maximum de {{domxref("SpeechRecognitionAlternative")}} (d'alternatives) fourni par résultat. La valeur par défaut est 1.
+- {{domxref("SpeechRecognition.serviceURI")}}
+  - : Spécifie l'emplacement du service de reconnaissance vocale utilisé par `SpeechRecognition` pour traiter la reconnaissance proprement dite. La valeur par défaut le chemin par défaut du user agent.
+
+### Event handlers
+
+- {{domxref("SpeechRecognition.onaudiostart")}}
+  - : Déclenché lorsque l'agent utilisateur commence à capturer le son.
+- {{domxref("SpeechRecognition.onaudioend")}}
+  - : Déclenché lorsque l'agent utilisateur a terminé la capture audio.
+- {{domxref("SpeechRecognition.onend")}}
+  - : Déclenché lorsque le service de reconnaissance vocale est déconnecté.
+- {{domxref("SpeechRecognition.onerror")}}
+  - : Déclenché en cas d'erreur de reconnaissance vocale.
+- {{domxref("SpeechRecognition.onnomatch")}}
+  - : Déclenché lorsque le service de reconnaissance vocale retourne un résultat final sans concordance significative. Il peut s'agir d'un certain degré de reconnaissance, qui ne correspond pas ou ne dépasse le seuil de {{domxref("SpeechRecognitionAlternative.confidence","confidence")}}.
+- {{domxref("SpeechRecognition.onresult")}}
+  - : Déclenché lorsque le service de reconnaissance vocale retourne un résultat - un mot ou une expression a donc été reconnu(e) positivement et cela a été communiqué à l'application.
+- {{domxref("SpeechRecognition.onsoundstart")}}
+  - : Déclenché lorsqu'un son - parole reconnaissable ou non - a été détecté.
+- {{domxref("SpeechRecognition.onsoundend")}}
+  - : Déclenché lorsque le son - parole reconnaissable ou non - n'est plus détecté.
+- {{domxref("SpeechRecognition.onspeechstart")}}
+  - : Déclenché lorsque du son à été reconnu par le service de reconnaissance vocale comme de la parole.
+- {{domxref("SpeechRecognition.onspeechend")}}
+  - : Déclenché lorsque la parole reconnue par le service de reconnaissance vocale a cesse d'être détectée.
+- {{domxref("SpeechRecognition.onstart")}}
+  - : Déclenché lorsque le service de reconnaissance vocale commence à écouter l'audio entrant, dans le but de reconnaître les grammaires associées à la (reconnaissance vocale) `SpeechRecognition` actuelle.
+
+## Methods
+
+_`SpeechRecognition` also inherits methods from its parent interface, {{domxref("EventTarget")}}._
+
+- {{domxref("SpeechRecognition.abort()")}}
+  - : Stops the speech recognition service from listening to incoming audio, and doesn't attempt to return a {{domxref("SpeechRecognitionResult")}}.
+- {{domxref("SpeechRecognition.start()")}}
+  - : Starts the speech recognition service listening to incoming audio with intent to recognize grammars associated with the current `SpeechRecognition`.
+- {{domxref("SpeechRecognition.stop()")}}
+  - : Stops the speech recognition service from listening to incoming audio, and attempts to return a {{domxref("SpeechRecognitionResult")}} using the audio captured so far.
+
+## Examples
+
+In our simple [Speech color changer](https://github.com/mdn/web-speech-api/tree/master/speech-color-changer) example, we create a new `SpeechRecognition` object instance using the {{domxref("SpeechRecognition.SpeechRecognition", "SpeechRecognition()")}} constructor, create a new {{domxref("SpeechGrammarList")}}, and set it to be the grammar that will be recognised by the `SpeechRecognition` instance using the {{domxref("SpeechRecognition.grammars")}} property.
+
+After some other values have been defined, we then set it so that the recognition service starts when a click event occurs (see {{domxref("SpeechRecognition.start()")}}.) When a result has been successfully recognised, the {{domxref("SpeechRecognition.onresult")}} handler fires,  we extract the color that was spoken from the event object, and then set the background color of the {{htmlelement("html")}} element to that colour.
+
+```js
+var grammar = '#JSGF V1.0; grammar colors; public <color> = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;'
 var recognition = new SpeechRecognition();
 var speechRecognitionList = new SpeechGrammarList();
 speechRecognitionList.addFromString(grammar, 1);
@@ -101,33 +94,19 @@ recognition.onresult = function(event) {
   var color = event.results[0][0].transcript;
   diagnostic.textContent = 'Result received: ' + color;
   bg.style.backgroundColor = color;
-}</pre>
-
-<h2 id="Specifications">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('Web Speech API', '#speechreco-section', 'SpeechRecognition')}}</td>
-      <td>{{Spec2('Web Speech API')}}</td>
-      <td></td>
-    </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.SpeechRecognition")}}</p>
-
-<h2 id="See_also">Voir aussi</h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/API/Web_Speech_API">Web Speech API</a></li>
-</ul>
+}
+```
+
+## Spécifications
+
+| Spécification                                                                                        | Statut                               | Commentaire |
+| ---------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- |
+| {{SpecName('Web Speech API', '#speechreco-section', 'SpeechRecognition')}} | {{Spec2('Web Speech API')}} |             |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.SpeechRecognition")}}
+
+## Voir aussi
+
+- [Web Speech API](/fr/docs/Web/API/Web_Speech_API)
diff --git a/files/fr/web/api/speechsynthesisutterance/index.md b/files/fr/web/api/speechsynthesisutterance/index.md
index e593459ab5..02dc3bd9e6 100644
--- a/files/fr/web/api/speechsynthesisutterance/index.md
+++ b/files/fr/web/api/speechsynthesisutterance/index.md
@@ -3,71 +3,64 @@ title: SpeechSynthesisUtterance
 slug: Web/API/SpeechSynthesisUtterance
 translation_of: Web/API/SpeechSynthesisUtterance
 ---
-<p>{{APIRef("Web Speech API")}}{{SeeCompatTable}}</p>
-
-<p>L'interface <strong><code>SpeechSynthesisUtterance</code></strong> de l'<a href="/en-US/docs/Web/API/Web_Speech_API">API Web Speech</a> représente une requète de synthèse vocale. Elle contient le contenu du service permettant de définir la façon dont elle sera lu (langue, hauteur et volume).</p>
-
-<h2 id="Constructor">Constructor</h2>
-
-<dl>
- <dt>{{domxref("SpeechSynthesisUtterance.SpeechSynthesisUtterance()")}}</dt>
- <dd>Retourne une nouvelle instance de l'objet <code>SpeechSynthesisUtterance</code>.</dd>
-</dl>
-
-<h2 id="Properties">Properties</h2>
-
-<p><em><code>SpeechSynthesisUtterance</code> hérite également des propriétés de son interface parente, {{domxref("EventTarget")}}.</em></p>
-
-<dl>
- <dt>{{domxref("SpeechSynthesisUtterance.lang")}}</dt>
- <dd>Gets and sets the language of the utterance.</dd>
- <dt>{{domxref("SpeechSynthesisUtterance.pitch")}}</dt>
- <dd>Gets and sets the pitch at which the utterance will be spoken at.</dd>
- <dt>{{domxref("SpeechSynthesisUtterance.rate")}}</dt>
- <dd>Gets and sets the speed at which the utterance will be spoken at.</dd>
- <dt>{{domxref("SpeechSynthesisUtterance.text")}}</dt>
- <dd>Gets and sets the text that will be synthesised when the utterance is spoken.</dd>
- <dt>{{domxref("SpeechSynthesisUtterance.voice")}}</dt>
- <dd>Gets and sets the voice that will be used to speak the utterance.</dd>
- <dt>{{domxref("SpeechSynthesisUtterance.volume")}}</dt>
- <dd>Gets and sets the volume that the utterance will be spoken at.</dd>
-</dl>
-
-<h3 id="Event_handlers">Event handlers</h3>
-
-<dl>
- <dt>{{domxref("SpeechSynthesisUtterance.onboundary")}}</dt>
- <dd>Fired when the spoken utterance reaches a word or sentence boundary.</dd>
- <dt>{{domxref("SpeechSynthesisUtterance.onend")}}</dt>
- <dd>Fired when the utterance has finished being spoken.</dd>
- <dt>{{domxref("SpeechSynthesisUtterance.onerror")}}</dt>
- <dd>Fired when an error occurs that prevents the utterance from being succesfully spoken.</dd>
- <dt>{{domxref("SpeechSynthesisUtterance.onmark")}}</dt>
- <dd>Fired when the spoken utterance reaches a named SSML "mark" tag.</dd>
- <dt>{{domxref("SpeechSynthesisUtterance.onpause")}}</dt>
- <dd>Fired when the utterance is paused part way through.</dd>
- <dt>{{domxref("SpeechSynthesisUtterance.onresume")}}</dt>
- <dd>Fired when a paused utterance is resumed.</dd>
- <dt>{{domxref("SpeechSynthesisUtterance.onstart")}}</dt>
- <dd>Fired when the utterance has begun to be spoken.</dd>
-</dl>
-
-<h2 id="Examples">Examples</h2>
-
-<p>Dans notre exemple basique de <a href="https://github.com/mdn/web-speech-api/tree/master/speak-easy-synthesis">démonstration de synthèse vocale</a>, nous commençons par récupérer une référence du controller SpeechSynthesis en utilisant <code>window.speechSynthesis</code>.<br>
- Après avoir définit les variables nécessaires, nous récupérons une liste des voix disponibles en utilisant {{domxref("SpeechSynthesis.getVoices()")}} puis nous alimentons un menu avec celle-ci.<br>
- L'utilisateur pourra ensuite choisir la voix qu'il souhaite.<br>
- <br>
- À l'intérieur du handler <code>inputForm.onsubmit</code> :</p>
-
-<ul>
- <li>Nous stoppons la soumission du formulaire avec <a href="/en-US/docs/Web/API/Event/preventDefault">preventDefault()</a>;</li>
- <li>Nous utilisons le constructeur {{domxref("SpeechSynthesisUtterance.SpeechSynthesisUtterance()", "constructor")}} pour créer une nouvelle instance contenant le texte de l'{{htmlelement("input")}};</li>
- <li>Nous positionnons {{domxref("SpeechSynthesisUtterance.voice","voice")}} sur la voix sélectionnée dans le {{htmlelement("select")}};</li>
- <li>Nous démarrons la synthèse vocale via la méthode {{domxref("SpeechSynthesis.speak()")}}</li>
-</ul>
-
-<pre class="brush: js">var synth = window.speechSynthesis;
+{{APIRef("Web Speech API")}}{{SeeCompatTable}}
+
+L'interface **`SpeechSynthesisUtterance`** de l'[API Web Speech](/en-US/docs/Web/API/Web_Speech_API) représente une requète de synthèse vocale. Elle contient le contenu du service permettant de définir la façon dont elle sera lu (langue, hauteur et volume).
+
+## Constructor
+
+- {{domxref("SpeechSynthesisUtterance.SpeechSynthesisUtterance()")}}
+  - : Retourne une nouvelle instance de l'objet `SpeechSynthesisUtterance`.
+
+## Properties
+
+_`SpeechSynthesisUtterance` hérite également des propriétés de son interface parente, {{domxref("EventTarget")}}._
+
+- {{domxref("SpeechSynthesisUtterance.lang")}}
+  - : Gets and sets the language of the utterance.
+- {{domxref("SpeechSynthesisUtterance.pitch")}}
+  - : Gets and sets the pitch at which the utterance will be spoken at.
+- {{domxref("SpeechSynthesisUtterance.rate")}}
+  - : Gets and sets the speed at which the utterance will be spoken at.
+- {{domxref("SpeechSynthesisUtterance.text")}}
+  - : Gets and sets the text that will be synthesised when the utterance is spoken.
+- {{domxref("SpeechSynthesisUtterance.voice")}}
+  - : Gets and sets the voice that will be used to speak the utterance.
+- {{domxref("SpeechSynthesisUtterance.volume")}}
+  - : Gets and sets the volume that the utterance will be spoken at.
+
+### Event handlers
+
+- {{domxref("SpeechSynthesisUtterance.onboundary")}}
+  - : Fired when the spoken utterance reaches a word or sentence boundary.
+- {{domxref("SpeechSynthesisUtterance.onend")}}
+  - : Fired when the utterance has finished being spoken.
+- {{domxref("SpeechSynthesisUtterance.onerror")}}
+  - : Fired when an error occurs that prevents the utterance from being succesfully spoken.
+- {{domxref("SpeechSynthesisUtterance.onmark")}}
+  - : Fired when the spoken utterance reaches a named SSML "mark" tag.
+- {{domxref("SpeechSynthesisUtterance.onpause")}}
+  - : Fired when the utterance is paused part way through.
+- {{domxref("SpeechSynthesisUtterance.onresume")}}
+  - : Fired when a paused utterance is resumed.
+- {{domxref("SpeechSynthesisUtterance.onstart")}}
+  - : Fired when the utterance has begun to be spoken.
+
+## Examples
+
+Dans notre exemple basique de [démonstration de synthèse vocale](https://github.com/mdn/web-speech-api/tree/master/speak-easy-synthesis), nous commençons par récupérer une référence du controller SpeechSynthesis en utilisant `window.speechSynthesis`.
+Après avoir définit les variables nécessaires, nous récupérons une liste des voix disponibles en utilisant {{domxref("SpeechSynthesis.getVoices()")}} puis nous alimentons un menu avec celle-ci.
+L'utilisateur pourra ensuite choisir la voix qu'il souhaite.
+
+À l'intérieur du handler `inputForm.onsubmit` :
+
+- Nous stoppons la soumission du formulaire avec [preventDefault()](/en-US/docs/Web/API/Event/preventDefault);
+- Nous utilisons le constructeur {{domxref("SpeechSynthesisUtterance.SpeechSynthesisUtterance()", "constructor")}} pour créer une nouvelle instance contenant le texte de l'{{htmlelement("input")}};
+- Nous positionnons {{domxref("SpeechSynthesisUtterance.voice","voice")}} sur la voix sélectionnée dans le {{htmlelement("select")}};
+- Nous démarrons la synthèse vocale via la méthode {{domxref("SpeechSynthesis.speak()")}}
+
+```js
+var synth = window.speechSynthesis;
 
 var inputForm = document.querySelector('form');
 var inputTxt = document.querySelector('input');
@@ -75,7 +68,7 @@ var voiceSelect = document.querySelector('select');
 
 var voices = synth.getVoices();
 
-for(i = 0; i &lt; voices.length ; i++) {
+for(i = 0; i < voices.length ; i++) {
   var option = document.createElement('option');
   option.textContent = voices[i].name + ' (' + voices[i].lang + ')';
   option.setAttribute('data-lang', voices[i].lang);
@@ -88,40 +81,26 @@ inputForm.onsubmit = function(event) {
 
   var utterThis = new SpeechSynthesisUtterance(inputTxt.value);
   var selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name');
-  for(i = 0; i &lt; voices.length ; i++) {
+  for(i = 0; i < voices.length ; i++) {
     if(voices[i].name === selectedOption) {
       utterThis.voice = voices[i];
     }
   }
   synth.speak(utterThis);
   inputTxt.blur();
-}</pre>
-
-<h2 id="Specifications">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('Web Speech API', '#utterance-attributes', 'SpeechSynthesisUtterance')}}</td>
-      <td>{{Spec2('Web Speech API')}}</td>
-      <td></td>
-    </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.SpeechSynthesisUtterance")}}</p>
-
-<h2 id="See_also">Voir aussi</h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/API/Web_Speech_API">Web Speech API</a></li>
-</ul>
+}
+```
+
+## Spécifications
+
+| Spécification                                                                                                    | Statut                               | Commentaire |
+| ---------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- |
+| {{SpecName('Web Speech API', '#utterance-attributes', 'SpeechSynthesisUtterance')}} | {{Spec2('Web Speech API')}} |             |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.SpeechSynthesisUtterance")}}
+
+## Voir aussi
+
+- [Web Speech API](/fr/docs/Web/API/Web_Speech_API)
diff --git a/files/fr/web/api/storage/clear/index.md b/files/fr/web/api/storage/clear/index.md
index c177f94657..a4540f154c 100644
--- a/files/fr/web/api/storage/clear/index.md
+++ b/files/fr/web/api/storage/clear/index.md
@@ -9,59 +9,46 @@ tags:
   - Stockage Web
 translation_of: Web/API/Storage/clear
 ---
-<p>{{APIRef("Web Storage API")}}</p>
+{{APIRef("Web Storage API")}}
 
-<p>La méthode <code>clear()</code> de l'interface {{domxref("Storage")}},  lorsqu'elle est invoquée, vide toutes les clés stockées.</p>
+La méthode `clear()` de l'interface {{domxref("Storage")}},  lorsqu'elle est invoquée, vide toutes les clés stockées.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js"><em>storage</em>.clear();</pre>
+```js
+storage.clear();
+```
 
-<h3 id="Retoune">Retoune</h3>
+### Retoune
 
-<p>{{jsxref("undefined")}}</p>
+{{jsxref("undefined")}}
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>La fonction suivante crée trois entrées de données dans le stockage local, puis les supprime en utilisant clear().</p>
+La fonction suivante crée trois entrées de données dans le stockage local, puis les supprime en utilisant clear().
 
-<pre class="brush: js">function peuplerLeStockage() {
+```js
+function peuplerLeStockage() {
   localStorage.setItem('bgcolor', 'red');
   localStorage.setItem('font', 'Helvetica');
   localStorage.setItem('image', 'monChat.png');
 
   localStorage.clear();
-}</pre>
+}
+```
 
-<div class="note">
-<p><strong>Note :</strong> Pour voir un exemple réel, vous pouvez visitez notre <a href="https://mdn.github.io/dom-examples/web-storage/">Démo de stockage web</a>. Les modifications sont visibles dans la console, vous pouvez actualiser la page et conserver les modifications.</p>
-</div>
+> **Note :** Pour voir un exemple réel, vous pouvez visitez notre [Démo de stockage web](https://mdn.github.io/dom-examples/web-storage/). Les modifications sont visibles dans la console, vous pouvez actualiser la page et conserver les modifications.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-clear', 'Storage.clear')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+| Specification                                                                                                | État                             | Commentaire |
+| ------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- |
+| {{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-clear', 'Storage.clear')}} | {{Spec2('HTML WHATWG')}} |             |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
+{{Compat("api.Storage.clear")}}
 
+## Voir aussi
 
-<p>{{Compat("api.Storage.clear")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Utilisation de l'API de stockage web</a></li>
-</ul>
+- [Utilisation de l'API de stockage web](/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API)
diff --git a/files/fr/web/api/storage/getitem/index.md b/files/fr/web/api/storage/getitem/index.md
index 1e3f950436..4563ca4cca 100644
--- a/files/fr/web/api/storage/getitem/index.md
+++ b/files/fr/web/api/storage/getitem/index.md
@@ -8,30 +8,28 @@ tags:
   - Stockage Web
 translation_of: Web/API/Storage/getItem
 ---
-<p>{{APIRef("Web Storage API")}}<br>
- La méthode <code>getItem()</code> de l'interface {{domxref("Storage")}} renvoie la valeur associée à la clé passée en paramètre.</p>
+{{APIRef("Web Storage API")}}
+La méthode `getItem()` de l'interface {{domxref("Storage")}} renvoie la valeur associée à la clé passée en paramètre.
 
-<h2 id="Syntax">Syntax</h2>
+## Syntax
 
-<pre class="syntaxbox">var <em>aValue</em> = <em>storage</em>.getItem(<em>keyName</em>);
-</pre>
+    var aValue = storage.getItem(keyName);
 
-<h3 id="Paramètre">Paramètre</h3>
+### Paramètre
 
-<dl>
- <dt><em><code>keyName</code></em></dt>
- <dd>Une {{domxref("DOMString")}} contenant le nom de la clé voulue.</dd>
-</dl>
+- _`keyName`_
+  - : Une {{domxref("DOMString")}} contenant le nom de la clé voulue.
 
-<h3 id="Renvoi">Renvoi</h3>
+### Renvoi
 
-<p>Une {{domxref("DOMString")}} contenant la valeur de la clé. <code>null</code> est renvoyé si aucune correspondance n'est trouvée.</p>
+Une {{domxref("DOMString")}} contenant la valeur de la clé. `null` est renvoyé si aucune correspondance n'est trouvée.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>La fonction suivante récupère trois élément du stockage local, puis réutilise les valeurs renvoyés afin de modifier le style de la page .</p>
+La fonction suivante récupère trois élément du stockage local, puis réutilise les valeurs renvoyés afin de modifier le style de la page .
 
-<pre class="brush: js">function setStyles() {
+```js
+function setStyles() {
   var currentColor = localStorage.getItem('bgcolor');
   var currentFont = localStorage.getItem('font');
   var currentImage = localStorage.getItem('image');
@@ -43,35 +41,21 @@ translation_of: Web/API/Storage/getItem
   htmlElem.style.backgroundColor = '#' + currentColor;
   pElem.style.fontFamily = currentFont;
   imgElem.setAttribute('src', currentImage);
-}</pre>
+}
+```
 
-<div class="note">
-<p><strong>Note :</strong> Pour voir cette fonction utilisée dans un exemple réel, dirigez-vous vers notre <a href="https://github.com/mdn/web-storage-demo">Demo de Stockage Web (en)</a>.</p>
-</div>
+> **Note :** Pour voir cette fonction utilisée dans un exemple réel, dirigez-vous vers notre [Demo de Stockage Web (en)](https://github.com/mdn/web-storage-demo).
 
-<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">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-getitem', 'Storage.getItem')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                    | État                             | Commentaire |
+| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- |
+| {{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-getitem', 'Storage.getItem')}} | {{Spec2('HTML WHATWG')}} |             |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
+{{Compat("api.Storage.getItem")}}
 
+## Voir aussi
 
-<p>{{Compat("api.Storage.getItem")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<p><a href="/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Utilisation de l'API de stockage web</a></p>
+[Utilisation de l'API de stockage web](/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API)
diff --git a/files/fr/web/api/storage/index.md b/files/fr/web/api/storage/index.md
index ed862cb650..4ae4cf6946 100644
--- a/files/fr/web/api/storage/index.md
+++ b/files/fr/web/api/storage/index.md
@@ -9,42 +9,39 @@ tags:
   - Storage
 translation_of: Web/API/Storage
 ---
-<div>{{APIRef("Web Storage API")}}</div>
+{{APIRef("Web Storage API")}}
 
-<p>L'interface <strong><code>Storage</code></strong> de l'<a href="/fr/docs/Web/API/Web_Storage_API">API Web Storage</a> donne accès au stockage de session (<code>SessionStorage</code>) ou au stockage local (<code>LocalStorage</code>) pour un domaine donné, vous permettant par exemple d'ajouter, de modifier ou de supprimer des éléments enregistrés.</p>
+L'interface **`Storage`** de l'[API Web Storage](/fr/docs/Web/API/Web_Storage_API) donne accès au stockage de session (`SessionStorage`) ou au stockage local (`LocalStorage`) pour un domaine donné, vous permettant par exemple d'ajouter, de modifier ou de supprimer des éléments enregistrés.
 
-<p>Si vous voulez manipuler le stockage de session pour un domaine, appelez la méthode {{domxref("Window.sessionStorage")}}. Si vous voulez manipuler le stockage local pour un domaine, appelez la méthode {{domxref("Window.localStorage")}}.</p>
+Si vous voulez manipuler le stockage de session pour un domaine, appelez la méthode {{domxref("Window.sessionStorage")}}. Si vous voulez manipuler le stockage local pour un domaine, appelez la méthode {{domxref("Window.localStorage")}}.
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<dl>
- <dt>{{domxref("Storage.length")}} {{readonlyInline}}</dt>
- <dd>Renvoie un entier représentant le nombre d'éléments contenus dans l'objet <code>Storage</code>.</dd>
-</dl>
+- {{domxref("Storage.length")}} {{readonlyInline}}
+  - : Renvoie un entier représentant le nombre d'éléments contenus dans l'objet `Storage`.
 
-<h2 id="Méthodes">Méthodes</h2>
+## Méthodes
 
-<dl>
- <dt>{{domxref("Storage.key()")}}</dt>
- <dd>Lorsqu'on lui passe un nombre <code>n</code>, cette méthode renvoie le nom de la n-ième clé dans le stockage.</dd>
-</dl>
+- {{domxref("Storage.key()")}}
+  - : Lorsqu'on lui passe un nombre `n`, cette méthode renvoie le nom de la n-ième clé dans le stockage.
 
-<dl>
- <dt>{{domxref("Storage.getItem()")}}</dt>
- <dd>Lorqu'on lui passe le nom d'une clé, cette méthode renvoie la valeur de la clé correspondante.</dd>
- <dt>{{domxref("Storage.setItem()")}}</dt>
- <dd>Lorqu'on lui passe un nom de clé et une valeur, cette méthode ajoute cette clé et cette valeur dans le stockage. Si la clé existe déjà, elle met à jour la valeur.</dd>
- <dt>{{domxref("Storage.removeItem()")}}</dt>
- <dd>Lorqu'on lui passe le nom d'une clé, cette méthode supprime cette clé du stockage.</dd>
- <dt>{{domxref("Storage.clear()")}}</dt>
- <dd>Lorsqu'elle est appelée, cette méthode supprime toutes les clés du stockage.</dd>
-</dl>
+<!---->
 
-<h2 id="Exemples">Exemples</h2>
+- {{domxref("Storage.getItem()")}}
+  - : Lorqu'on lui passe le nom d'une clé, cette méthode renvoie la valeur de la clé correspondante.
+- {{domxref("Storage.setItem()")}}
+  - : Lorqu'on lui passe un nom de clé et une valeur, cette méthode ajoute cette clé et cette valeur dans le stockage. Si la clé existe déjà, elle met à jour la valeur.
+- {{domxref("Storage.removeItem()")}}
+  - : Lorqu'on lui passe le nom d'une clé, cette méthode supprime cette clé du stockage.
+- {{domxref("Storage.clear()")}}
+  - : Lorsqu'elle est appelée, cette méthode supprime toutes les clés du stockage.
 
-<p>Nous accédons ici à un objet <code>Storage</code> en appelant <code>localStorage</code>. Nous testons d'abord si le stockage local contient des éléments en utilisant <code>!localStorage.getItem('bgcolor')</code>. Si oui, nous exécutons une fonction appelée <code>setStyles()</code> qui récupère les éléments en utilisant {{domxref("Storage.getItem()")}}, et utilise ces valeurs pour mettre à jour les styles de page. Sinon, nous exécutons une autre fonction appelée <code>populateStorage()</code>, qui utilise {{domxref("Storage.setItem()")}} pour régler les valeurs des éléments, puis qui exécute <code>setStyles()</code>.</p>
+## Exemples
 
-<pre class="brush: js">if(!localStorage.getItem('bgcolor')) {
+Nous accédons ici à un objet `Storage` en appelant `localStorage`. Nous testons d'abord si le stockage local contient des éléments en utilisant `!localStorage.getItem('bgcolor')`. Si oui, nous exécutons une fonction appelée `setStyles()` qui récupère les éléments en utilisant {{domxref("Storage.getItem()")}}, et utilise ces valeurs pour mettre à jour les styles de page. Sinon, nous exécutons une autre fonction appelée `populateStorage()`, qui utilise {{domxref("Storage.setItem()")}} pour régler les valeurs des éléments, puis qui exécute `setStyles()`.
+
+```js
+if(!localStorage.getItem('bgcolor')) {
   populateStorage();
 } else {
   setStyles();
@@ -70,36 +67,22 @@ function setStyles() {
   htmlElem.style.backgroundColor = '#' + currentColor;
   pElem.style.fontFamily = currentFont;
   imgElem.setAttribute('src', currentImage);
-}</pre>
-
-<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', 'webstorage.html#the-storage-interface', 'Storage')}}</td>
-   <td>{{Spec2('Web Storage')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+}
+```
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Spécifications
 
+| Spécification                                                                                            | État                             | Commentaires |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ |
+| {{SpecName('HTML WHATWG', 'webstorage.html#the-storage-interface', 'Storage')}} | {{Spec2('Web Storage')}} |              |
 
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Storage")}}</p>
+{{Compat("api.Storage")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Utiliser l'API Web Storage</a></li>
- <li>{{domxref("Window.localStorage")}}</li>
- <li>{{domxref("Window.sessionStorage")}}</li>
- <li>{{domxref("CacheStorage")}}</li>
-</ul>
+- [Utiliser l'API Web Storage](/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API)
+- {{domxref("Window.localStorage")}}
+- {{domxref("Window.sessionStorage")}}
+- {{domxref("CacheStorage")}}
diff --git a/files/fr/web/api/storage/key/index.md b/files/fr/web/api/storage/key/index.md
index 97e9160b4c..f108c70da3 100644
--- a/files/fr/web/api/storage/key/index.md
+++ b/files/fr/web/api/storage/key/index.md
@@ -10,71 +10,57 @@ tags:
   - Web Storage
 translation_of: Web/API/Storage/key
 ---
-<p>{{APIRef()}}</p>
+{{APIRef()}}
 
-<p>La méthode <code>key()</code> de l'interface {{domxref("Storage")}} prend un nombre n en argument et retourne la n-ième clé contenue dans storage. L'ordre des clés étant définie par le navigateur, il est recommandé de ne pas s'y référer .</p>
+La méthode `key()` de l'interface {{domxref("Storage")}} prend un nombre n en argument et retourne la n-ième clé contenue dans storage. L'ordre des clés étant définie par le navigateur, il est recommandé de ne pas s'y référer .
 
-<h2 id="Syntax">Syntax</h2>
+## Syntax
 
-<pre class="syntaxbox">var <em>unNomDeCle</em> = <em>storage</em>.key(<em>cle</em>);</pre>
+    var unNomDeCle = storage.key(cle);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><em>cle</em></dt>
- <dd>Un entier représentant le numéro de la clé voulue. L'index débute à zero.</dd>
-</dl>
+- _cle_
+  - : Un entier représentant le numéro de la clé voulue. L'index débute à zero.
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Un {{domxref("DOMString")}} contenant le nom de la clé .</p>
+Un {{domxref("DOMString")}} contenant le nom de la clé .
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>La fonction suivante parcours les éléments présents dans le local storage.</p>
+La fonction suivante parcours les éléments présents dans le local storage.
 
-<pre class="brush: js">function forEachKey(callback) {
-  for (var i = 0; i &lt; localStorage.length; i++) {
+```js
+function forEachKey(callback) {
+  for (var i = 0; i < localStorage.length; i++) {
     callback(localStorage.key(i));
   }
-}</pre>
+}
+```
 
-<div class="note">
-<p><strong>Note :</strong> Pour un exemple plus poussé, consultez la <a href="https://mdn.github.io/dom-examples/web-storage/">Web Storage Demo</a>.</p>
-</div>
+> **Note :** Pour un exemple plus poussé, consultez la [Web Storage Demo](https://mdn.github.io/dom-examples/web-storage/).
 
-<h2 id="Autre_exemple">Autre exemple</h2>
+## Autre exemple
 
-<p>La fonction suivante parcourt chaque clé présente dans le localStorage et affiche les valeurs correspondantes.</p>
+La fonction suivante parcourt chaque clé présente dans le localStorage et affiche les valeurs correspondantes.
 
-<pre class="brush: js">for (var i = 0; i &lt; localStorage.length; i++) {
+```js
+for (var i = 0; i < localStorage.length; i++) {
    console.log(localStorage.getItem(localStorage.key(i)));
 }
-</pre>
-
-<h2 id="Specifications">Specifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-key', 'Storage.key')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Storage.key")}}</p>
-
-<h2 id="See_also">Voir aussi</h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Utilisation de l'API de stockage web</a></li>
-</ul>
+```
+
+## Specifications
+
+| Specification                                                                                            | Status                           | Comment |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------- | ------- |
+| {{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-key', 'Storage.key')}} | {{Spec2('HTML WHATWG')}} |         |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Storage.key")}}
+
+## Voir aussi
+
+- [Utilisation de l'API de stockage web](/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API)
diff --git a/files/fr/web/api/storage/length/index.md b/files/fr/web/api/storage/length/index.md
index b8479be8fa..a2ea7ab711 100644
--- a/files/fr/web/api/storage/length/index.md
+++ b/files/fr/web/api/storage/length/index.md
@@ -9,57 +9,44 @@ tags:
   - Web Stockage
 translation_of: Web/API/Storage/length
 ---
-<p>{{APIRef("Web Storage API")}}</p>
+{{APIRef("Web Storage API")}}
 
-<p>La propriété en lecture seule de l'interface {{domxref("Storage")}} retourne un entier représentant le nombre d'items stockés dans l'objet <code>Storage</code>.</p>
+La propriété en lecture seule de l'interface {{domxref("Storage")}} retourne un entier représentant le nombre d'items stockés dans l'objet `Storage`.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var <em>aLength</em> = <em>storage</em>.length;</pre>
+    var aLength = storage.length;
 
-<h3 id="Retour">Retour</h3>
+### Retour
 
-<p>Un entier.</p>
+Un entier.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>La fonction suivante ajoute trois éléments au localStorage du domaine courant puis retourne le nombre d'éléments dans le storage:</p>
+La fonction suivante ajoute trois éléments au localStorage du domaine courant puis retourne le nombre d'éléments dans le storage:
 
-<pre class="brush: js">function populateStorage() {
+```js
+function populateStorage() {
   localStorage.setItem('bgcolor', 'yellow');
   localStorage.setItem('font', 'Helvetica');
   localStorage.setItem('image', 'cats.png');
 
   localStorage.length; // retourne 3 si localStorage est vide au préalable
-}</pre>
-
-<div class="note">
-<p><strong>Note :</strong> Pour voir ceci utilisé dans un exemple concret, regardez notre <a href="https://mdn.github.io/dom-examples/web-storage/">Web Storage Demo</a>.</p>
-</div>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-length', 'Storage.length')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Storage.length")}}</p>
-
-<h2 id="See_also">Voir aussi</h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Utilisation de l'API de stockage web</a></li>
-</ul>
+}
+```
+
+> **Note :** Pour voir ceci utilisé dans un exemple concret, regardez notre [Web Storage Demo](https://mdn.github.io/dom-examples/web-storage/).
+
+## Spécifications
+
+| Spécification                                                                                                    | Statut                           | Commentaire |
+| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- |
+| {{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-length', 'Storage.length')}} | {{Spec2('HTML WHATWG')}} |             |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Storage.length")}}
+
+## Voir aussi
+
+- [Utilisation de l'API de stockage web](/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API)
diff --git a/files/fr/web/api/storage/removeitem/index.md b/files/fr/web/api/storage/removeitem/index.md
index 40a61a48e0..add1e6b954 100644
--- a/files/fr/web/api/storage/removeitem/index.md
+++ b/files/fr/web/api/storage/removeitem/index.md
@@ -8,76 +8,63 @@ tags:
   - Stockage Web
 translation_of: Web/API/Storage/removeItem
 ---
-<p>{{APIRef("Web Storage API")}}</p>
+{{APIRef("Web Storage API")}}
 
-<p>La méthode <strong><code>removeItem()</code></strong> de l'interface {{domxref("Storage")}} , lorsque vous lui passez une clé en argument, va supprimer la ressource avec le nom de clé correspondant du storage. L'interface <strong><code>Storage</code></strong> de l'API <a href="/fr/docs/Web/API/Web_Storage_API">Web Storage API</a> fournit des accès particuliers dans les domaines des stockages locaux et de sessions.</p>
+La méthode **`removeItem()`** de l'interface {{domxref("Storage")}} , lorsque vous lui passez une clé en argument, va supprimer la ressource avec le nom de clé correspondant du storage. L'interface **`Storage`** de l'API [Web Storage API](/fr/docs/Web/API/Web_Storage_API) fournit des accès particuliers dans les domaines des stockages locaux et de sessions.
 
-<p>Si aucun élement n'est donné en paramètre <code>nomCle</code>, cette méthode ne fait rien.</p>
+Si aucun élement n'est donné en paramètre `nomCle`, cette méthode ne fait rien.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>storage</em>.removeItem(<em>nomCle</em>);</pre>
+    storage.removeItem(nomCle);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>nomCle</code></dt>
- <dd>Un {{domxref("DOMString")}} contenant le nom de la clé que vous voulez supprimer.</dd>
-</dl>
+- `nomCle`
+  - : Un {{domxref("DOMString")}} contenant le nom de la clé que vous voulez supprimer.
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+### Valeur de retour
 
-<p>{{jsxref("undefined")}}.</p>
+{{jsxref("undefined")}}.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>La fonction suivante crée trois données dans le stockage local, puis va supprimer la donnée image.</p>
+La fonction suivante crée trois données dans le stockage local, puis va supprimer la donnée image.
 
-<pre class="brush: js">function populateStorage() {
+```js
+function populateStorage() {
   localStorage.setItem('bgcolor', 'red');
   localStorage.setItem('font', 'Helvetica');
   localStorage.setItem('image', 'myCat.png');
 
   localStorage.removeItem('image');
-}</pre>
+}
+```
 
-<p>Nous pouvons également faire ceci avec le stockage de session.</p>
+Nous pouvons également faire ceci avec le stockage de session.
 
-<pre class="brush: js">function populateStorage() {
-  <code>sessionStorage</code>.setItem('bgcolor', 'red');
-  <code>sessionStorage</code>.setItem('font', 'Helvetica');
-  <code>sessionStorage</code>.setItem('image', 'myCat.png');
+```js
+function populateStorage() {
+  sessionStorage.setItem('bgcolor', 'red');
+  sessionStorage.setItem('font', 'Helvetica');
+  sessionStorage.setItem('image', 'myCat.png');
 
-  <code>sessionStorage</code>.removeItem('image');
-}</pre>
+  sessionStorage.removeItem('image');
+}
+```
 
-<div class="note">
-<p><strong>Note :</strong> Pour voir ce code en fonctionnement, voir <a href="https://mdn.github.io/dom-examples/web-storage/">Web Storage Demo</a>.</p>
-</div>
+> **Note :** Pour voir ce code en fonctionnement, voir [Web Storage Demo](https://mdn.github.io/dom-examples/web-storage/).
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-removeitem', 'Storage.removeItem')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                            | Status                           | Comment |
+| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------- |
+| {{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-removeitem', 'Storage.removeItem')}} | {{Spec2('HTML WHATWG')}} |         |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
+{{Compat("api.Storage.removeItem")}}
 
+## Voir aussi
 
-<p>{{Compat("api.Storage.removeItem")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<p><a href="/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Utilisation de l'API de stockage Web</a></p>
+[Utilisation de l'API de stockage Web](/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API)
diff --git a/files/fr/web/api/storage/setitem/index.md b/files/fr/web/api/storage/setitem/index.md
index ce945681ff..da20ec878f 100644
--- a/files/fr/web/api/storage/setitem/index.md
+++ b/files/fr/web/api/storage/setitem/index.md
@@ -8,71 +8,56 @@ tags:
   - Stockage Web
 translation_of: Web/API/Storage/setItem
 ---
-<p>{{APIRef("Web Storage API")}}</p>
+{{APIRef("Web Storage API")}}
 
-<p>La méthode <code>setItem()</code> de l'interface {{domxref("Storage")}}, lorsque lui sont passées le duo clé-valeur, les ajoute à l'emplacement de stockage, sinon elle met à jour la valeur si la clé existe déjà.</p>
+La méthode `setItem()` de l'interface {{domxref("Storage")}}, lorsque lui sont passées le duo clé-valeur, les ajoute à l'emplacement de stockage, sinon elle met à jour la valeur si la clé existe déjà.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>storage</em>.setItem(<em>nomClé</em>, <em>valeurClé</em>);</pre>
+    storage.setItem(nomClé, valeurClé);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><em>nomClé</em></dt>
- <dd>C'est une {{domxref("DOMString")}} contenant le nom de la clé que l'on souhaite créer/modifier.</dd>
- <dt><em>valeurClé</em></dt>
- <dd>C'est une {{domxref("DOMString")}} contenant la valeur associée à son nom de clé que l'on souhaite créer/modifier.</dd>
-</dl>
+- _nomClé_
+  - : C'est une {{domxref("DOMString")}} contenant le nom de la clé que l'on souhaite créer/modifier.
+- _valeurClé_
+  - : C'est une {{domxref("DOMString")}} contenant la valeur associée à son nom de clé que l'on souhaite créer/modifier.
 
-<h3 id="Retourne">Retourne</h3>
+### Retourne
 
-<p><em>Aucune valeur de retour.</em></p>
+_Aucune valeur de retour._
 
-<h3 id="Exceptions">Exceptions</h3>
+### Exceptions
 
-<p><code>setItem()</code> peut émettre une exception si l'emplacement de stockage est plein. En particulier pour Safari mobile (depuis iOS 5), elle émettra une exception si l'utilisateur passe en navigation privée (contrairement aux autres navigateur qui autorisent le stockage même en navigation privée en utilisant un conteneur de données séparé, Safari met son quota de stockage à 0 octets).<br>
- Par conséquent les développeurs devraient être sûrs de toujours de <strong>systématiquement capturer toute possible exception venant de setItem().</strong></p>
+`setItem()` peut émettre une exception si l'emplacement de stockage est plein. En particulier pour Safari mobile (depuis iOS 5), elle émettra une exception si l'utilisateur passe en navigation privée (contrairement aux autres navigateur qui autorisent le stockage même en navigation privée en utilisant un conteneur de données séparé, Safari met son quota de stockage à 0 octets).
+Par conséquent les développeurs devraient être sûrs de toujours de **systématiquement capturer toute possible exception venant de setItem().**
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>La fonction suivante crée trois éléments à l'intérieur du stockage local.</p>
+La fonction suivante crée trois éléments à l'intérieur du stockage local.
 
-<pre class="brush: js">function remplissageStockage() {
+```js
+function remplissageStockage() {
   localStorage.setItem('bgcolor', 'red');
   localStorage.setItem('font', 'Helvetica');
   localStorage.setItem('image', 'myCat.png');
-}</pre>
-
-<div class="note">
-<p><strong>Note :</strong> Pour voir ceci utilisé dans un exemple concret, regardez notre <a href="https://mdn.github.io/dom-examples/web-storage/">Web Storage Demo</a>.</p>
-</div>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-setitem', 'Storage.setItem')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Storage.setItem")}}</p>
-
-<h2 id="See_also">Voir aussi</h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/API/Storage/getItem">Storage.getItem()</a></li>
-  <li><a href="/fr/docs/Web/API/Storage/removeItem">Storage.removeItem()</a></li>
-  <li><a href="/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Utilisation de l'API Web Storage</a></li>
-</ul>
+}
+```
+
+> **Note :** Pour voir ceci utilisé dans un exemple concret, regardez notre [Web Storage Demo](https://mdn.github.io/dom-examples/web-storage/).
+
+## Spécifications
+
+| Spécification                                                                                                    | Statut                           | Commentaire |
+| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- |
+| {{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-setitem', 'Storage.setItem')}} | {{Spec2('HTML WHATWG')}} |             |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Storage.setItem")}}
+
+## Voir aussi
+
+- [Storage.getItem()](/fr/docs/Web/API/Storage/getItem)
+- [Storage.removeItem()](/fr/docs/Web/API/Storage/removeItem)
+- [Utilisation de l'API Web Storage](/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API)
diff --git a/files/fr/web/api/storage_api/index.md b/files/fr/web/api/storage_api/index.md
index fe7135c1d3..daf154aa13 100644
--- a/files/fr/web/api/storage_api/index.md
+++ b/files/fr/web/api/storage_api/index.md
@@ -3,110 +3,89 @@ title: Storage API
 slug: Web/API/Storage_API
 translation_of: Web/API/Storage_API
 ---
-<p>{{securecontext_header}}{{DefaultAPISidebar("Storage")}}</p>
+{{securecontext_header}}{{DefaultAPISidebar("Storage")}}
 
-<p>Le standard <em>Storage</em> définit un système de stockage commun et partagé utilisable par toutes les API et technologies qui stockent des données accessibles par le contenu pour des sites web individuels. L’API Storage donne aux codes des sites la capacité de déterminer quelle quantité d’espace ils peuvent utiliser, combien ils utilisent déjà, et même contrôler s’ils ont besoin ou non d’être alertés avant que l’{{Glossary("user agent", "agent utilisateur")}} n’élimine des données de site afin de faire de la place pour autre chose.</p>
+Le standard _Storage_ définit un système de stockage commun et partagé utilisable par toutes les API et technologies qui stockent des données accessibles par le contenu pour des sites web individuels. L’API Storage donne aux codes des sites la capacité de déterminer quelle quantité d’espace ils peuvent utiliser, combien ils utilisent déjà, et même contrôler s’ils ont besoin ou non d’être alertés avant que l’{{Glossary("user agent", "agent utilisateur")}} n’élimine des données de site afin de faire de la place pour autre chose.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<p>Le stockage de site — les données stockées pour un site web qui sont gérées par le standard Storage — inclut :</p>
+Le stockage de site — les données stockées pour un site web qui sont gérées par le standard Storage — inclut :
 
-<ul>
- <li><a href="/fr/docs/Web/API/IndexedDB_API">les bases de données IndexedDB</a> ;</li>
- <li><a href="/fr/docs/Web/API/Cache">les données de l’API Cache</a> ;</li>
- <li><a href="/fr/docs/Web/API/Service_Worker_API">les enregistrements de Service Worker</a> ;</li>
- <li><a href="/fr/docs/Web/API/Web_Storage_API">les données de l’API Web Storage</a> gérées via {{domxref("window.localStorage")}} ;</li>
- <li>les informations de l’état d’historique enregistrées via {{domxref("History.pushState()")}} ;</li>
- <li><a href="/fr/docs/Web/HTML/Using_the_application_cache">les caches d’application</a> ;</li>
- <li><a href="/fr/docs/Web/API/Notifications_API">les données de notification</a> ;</li>
- <li>d’autres types de données accessibles par le site et spécifiques au site qui pourraient être maintenues.</li>
-</ul>
+- [les bases de données IndexedDB](/fr/docs/Web/API/IndexedDB_API) ;
+- [les données de l’API Cache](/fr/docs/Web/API/Cache) ;
+- [les enregistrements de Service Worker](/fr/docs/Web/API/Service_Worker_API) ;
+- [les données de l’API Web Storage](/fr/docs/Web/API/Web_Storage_API) gérées via {{domxref("window.localStorage")}} ;
+- les informations de l’état d’historique enregistrées via {{domxref("History.pushState()")}} ;
+- [les caches d’application](/fr/docs/Web/HTML/Using_the_application_cache) ;
+- [les données de notification](/fr/docs/Web/API/Notifications_API) ;
+- d’autres types de données accessibles par le site et spécifiques au site qui pourraient être maintenues.
 
-<h2 id="Unités_de_stockage_de_site">Unités de stockage de site</h2>
+## Unités de stockage de site
 
-<p>Le système de stockage de site décrit par le standard Storage, et avec lequel on interagit en utilisant l’API Storage, consiste en une seule <strong>unité de stockage de site</strong> pour chaque {{Glossary("origin", "origine")}}. In essence, chaque site web ou application web a sa propre unité de stockage dans laquelle ses données sont placées. Le diagramme ci-dessous présente un bassin de stockage de site contenant trois unités de stockage, montrant que les unités de stockage peuvent contenir différents types de données et avoir différents quotas (limites maximum de stockage).</p>
+Le système de stockage de site décrit par le standard Storage, et avec lequel on interagit en utilisant l’API Storage, consiste en une seule **unité de stockage de site** pour chaque {{Glossary("origin", "origine")}}. In essence, chaque site web ou application web a sa propre unité de stockage dans laquelle ses données sont placées. Le diagramme ci-dessous présente un bassin de stockage de site contenant trois unités de stockage, montrant que les unités de stockage peuvent contenir différents types de données et avoir différents quotas (limites maximum de stockage).
 
-<p><img alt="Un diagramme illustrant la façon dont l'espace de stockage du site se compose de plusieurs unités de stockage qui contienne des données de différentes API ainsi que l'espace libre restant avant que le quota soit atteint." src="storageunits.png"></p>
+![Un diagramme illustrant la façon dont l'espace de stockage du site se compose de plusieurs unités de stockage qui contienne des données de différentes API ainsi que l'espace libre restant avant que le quota soit atteint.](storageunits.png)
 
-<ul>
- <li>L’origine 1 a des données Web Storage ainsi que des données IndexedDB, mais a également un peu d’espace libre restant ; son utilisation actuelle n’a pas encore atteint son quota.</li>
- <li>L’origine 2 n’a pas encore de données stockées ; c’est simplement une boîte vide en attente de contenu. Cette origine, toutefois, a un quota inférieur à celui des deux autres. Il peut s’agir d’un site visité moins souvent, ou d’un site connu pour avoir des besoins de stockage inférieurs.</li>
- <li>L’unité de stockage de l’origine 3 est complètement remplie ; elle a atteint son quota et ne peut pas stocker de données supplémentaires sans que du contenu existant soit supprimé.</li>
-</ul>
+- L’origine 1 a des données Web Storage ainsi que des données IndexedDB, mais a également un peu d’espace libre restant ; son utilisation actuelle n’a pas encore atteint son quota.
+- L’origine 2 n’a pas encore de données stockées ; c’est simplement une boîte vide en attente de contenu. Cette origine, toutefois, a un quota inférieur à celui des deux autres. Il peut s’agir d’un site visité moins souvent, ou d’un site connu pour avoir des besoins de stockage inférieurs.
+- L’unité de stockage de l’origine 3 est complètement remplie ; elle a atteint son quota et ne peut pas stocker de données supplémentaires sans que du contenu existant soit supprimé.
 
-<p>Les {{Glossary("User agent", "agents utilisateur")}} sont susceptibles d’utiliser diverses techniques pour déterminer le quota de différentes origines. Une des méthodes les plus probables — une que la spécification encourage spécifiquement, en fait — est de considérer la popularité et les niveaux d’utilisation de sites individuels pour déterminer quels doivent être leurs quotas. Il est également concevable que le navigateur puisse offrir une interface utilisateur pour personnaliser ces quotas.</p>
+Les {{Glossary("User agent", "agents utilisateur")}} sont susceptibles d’utiliser diverses techniques pour déterminer le quota de différentes origines. Une des méthodes les plus probables — une que la spécification encourage spécifiquement, en fait — est de considérer la popularité et les niveaux d’utilisation de sites individuels pour déterminer quels doivent être leurs quotas. Il est également concevable que le navigateur puisse offrir une interface utilisateur pour personnaliser ces quotas.
 
-<h2 id="Modes_de_boîte">Modes de boîte</h2>
+## Modes de boîte
 
-<p>Le stockage de données en lui-même, au sein de chaque unité de stockage, est appelé sa <strong>boîte</strong>. Chaque unité de stockage de site a exactement une boîte dans laquelle toutes ses données sont placées, et a une <strong>mode de boîte</strong> qui décrit la politique de conservation de données pour cette boîte. Il existe deux modes :</p>
+Le stockage de données en lui-même, au sein de chaque unité de stockage, est appelé sa **boîte**. Chaque unité de stockage de site a exactement une boîte dans laquelle toutes ses données sont placées, et a une **mode de boîte** qui décrit la politique de conservation de données pour cette boîte. Il existe deux modes :
 
-<dl>
- <dt><code>"best-effort"</code></dt>
- <dd>L’agent utilisateur essayera de conserver les données contenues dans la boîte aussi longtemps qu’il peut, <em>mais n’avertira pas l’utilisateur ou l’utilisatrice</em> si l’espace de stockage approche sa limite et s’il devient nécessaire de nettoyer la boîte afin de réduire la pression de stockage.</dd>
- <dt><code>"persistent"</code></dt>
- <dd>L’agent utilisateur essayera de conserver les données aussi longtemps que possible, nettoyant toutes les boîtes <code>"best-effort"</code> avant de considérer le nettoyage d’une boîte marquée <code>"persistent"</code>. S’il devient nécessaire de considérer le nettoyage d’une boîte persistante, l’agent utilisateur notifiera l’utilisateur ou l’utilisatrice et fournira un moyen de nettoyer une ou plusieurs boîtes persistantes selon le besoin.</dd>
-</dl>
+- `"best-effort"`
+  - : L’agent utilisateur essayera de conserver les données contenues dans la boîte aussi longtemps qu’il peut, _mais n’avertira pas l’utilisateur ou l’utilisatrice_ si l’espace de stockage approche sa limite et s’il devient nécessaire de nettoyer la boîte afin de réduire la pression de stockage.
+- `"persistent"`
+  - : L’agent utilisateur essayera de conserver les données aussi longtemps que possible, nettoyant toutes les boîtes `"best-effort"` avant de considérer le nettoyage d’une boîte marquée `"persistent"`. S’il devient nécessaire de considérer le nettoyage d’une boîte persistante, l’agent utilisateur notifiera l’utilisateur ou l’utilisatrice et fournira un moyen de nettoyer une ou plusieurs boîtes persistantes selon le besoin.
 
-<p>Modifier le mode de boîte d’une origine nécessite la permission d’utiliser la fonctionnalité <code>"persistent-storage"</code>.</p>
+Modifier le mode de boîte d’une origine nécessite la permission d’utiliser la fonctionnalité `"persistent-storage"`.
 
-<h2 id="Persistance_et_nettoyage_des_données">Persistance et nettoyage des données</h2>
+## Persistance et nettoyage des données
 
-<p>Si le site ou l’application a la permission sur la fonctionnalité <strong><code>"persistent-storage"</code></strong>, il ou elle peut utiliser la méthode {{domxref("StorageManager.persist()")}} pour faire la requête que sa boîte devienne persistante. Il est également possible pour l’agent utilisateur de décider de rendre l’unité de stockage du site persistante sur la base de caractéristiques d’usage ou d’autres métriques. Les drapeaux (<em>flags</em>), algorithmes et types associés à la permission <code>"persistent-storage"</code>, sont tous positionnés sur les valeurs par défaut standard pour une permission, excepté que <strong>l’état de permission</strong> doit être le même sur l’ensemble de l’origine, et que si l’état de permission n’est pas <code>"granted"</code> (c’est-à-dire que si, pour une raison ou une autre, l’accès à la fonctionnalité de stockage persistant a été refusé), le mode de boîte de l’unité de stockage de site de l’origine est toujours <code>"best-effort"</code>.</p>
+Si le site ou l’application a la permission sur la fonctionnalité **`"persistent-storage"`**, il ou elle peut utiliser la méthode {{domxref("StorageManager.persist()")}} pour faire la requête que sa boîte devienne persistante. Il est également possible pour l’agent utilisateur de décider de rendre l’unité de stockage du site persistante sur la base de caractéristiques d’usage ou d’autres métriques. Les drapeaux (_flags_), algorithmes et types associés à la permission `"persistent-storage"`, sont tous positionnés sur les valeurs par défaut standard pour une permission, excepté que **l’état de permission** doit être le même sur l’ensemble de l’origine, et que si l’état de permission n’est pas `"granted"` (c’est-à-dire que si, pour une raison ou une autre, l’accès à la fonctionnalité de stockage persistant a été refusé), le mode de boîte de l’unité de stockage de site de l’origine est toujours `"best-effort"`.
 
-<div class="note">
-<p><strong>Note :</strong> Voir <a href="/fr/docs/Web/API/Permissions_API/Using_the_Permissions_API">Using the Permissions API</a> pour plus de détails sur l’obtension et la gestion des permissions.</p>
-</div>
+> **Note :** Voir [Using the Permissions API](/fr/docs/Web/API/Permissions_API/Using_the_Permissions_API) pour plus de détails sur l’obtension et la gestion des permissions.
 
-<p>Lors du nettoyage d’unités de stockage de site, la boîte d’une origine est traitée comme une seule entité ; si l’agent utilisateur a besoin de la nettoyer et si l’utilisateur ou l’utilisatrice approuve, le stockage de données entier est nettoyé plutôt que de fournir un moyen de nettoyer seulement les données d’une API individuelle.</p>
+Lors du nettoyage d’unités de stockage de site, la boîte d’une origine est traitée comme une seule entité ; si l’agent utilisateur a besoin de la nettoyer et si l’utilisateur ou l’utilisatrice approuve, le stockage de données entier est nettoyé plutôt que de fournir un moyen de nettoyer seulement les données d’une API individuelle.
 
-<p>Si une boîte est marquée <code>"persistent"</code>, le contenu ne sera pas nettoyé par l’agent utilisateur sans que l’origine des données elle-même, ou l’utilisateur ou l’utilisatrice, ne le fasse spécifiquement. Cela inclut des scénarios tels que l’utilisateur ou l’utilisatrice choisissant une option « nettoyer le cache » or « nettoyer l’historique récent ». La permission de supprimer des unités de stockage persistantes sera spécifiquement demandée à l’utilisateur ou à l’utilisatrice.</p>
+Si une boîte est marquée `"persistent"`, le contenu ne sera pas nettoyé par l’agent utilisateur sans que l’origine des données elle-même, ou l’utilisateur ou l’utilisatrice, ne le fasse spécifiquement. Cela inclut des scénarios tels que l’utilisateur ou l’utilisatrice choisissant une option « nettoyer le cache » or « nettoyer l’historique récent ». La permission de supprimer des unités de stockage persistantes sera spécifiquement demandée à l’utilisateur ou à l’utilisatrice.
 
-<h2 id="Estimations_de_quota_et_d’usage">Estimations de quota et d’usage</h2>
+## Estimations de quota et d’usage
 
-<p>L’agent utilisateur détermine, à l’aide du mécanisme de son choix, la quantité maximale de stockage qu’un site donné peut utiliser. Ce maximum est le <strong>quota</strong> de l’origine. La quantité de cet espace utilisée par le site est appelée son <strong>usage</strong>. Ces deux valeurs sont des estimations ; elles sont imprécise pour plusieurs raisons :</p>
+L’agent utilisateur détermine, à l’aide du mécanisme de son choix, la quantité maximale de stockage qu’un site donné peut utiliser. Ce maximum est le **quota** de l’origine. La quantité de cet espace utilisée par le site est appelée son **usage**. Ces deux valeurs sont des estimations ; elles sont imprécise pour plusieurs raisons :
 
-<ul>
- <li>Les agents utilisateur sont encouragés à dissimuler la taille exacte des données utilisées par une origine donnée, pour empêcher que ces valeurs soient utilisées à des fins de fingerprinting.</li>
- <li>La dé-duplication, la compression et d’autres méthodes pour réduire la taille physique des données stockées peuvent être utilisées.</li>
- <li>Les quotas sont des estimations prudentes de l’espace disponible pour l’utilisation par l’origine, et devraient être inférieurs à l’espace disponible sur l’appareil pour tenter d’empêcher les débordements.</li>
-</ul>
+- Les agents utilisateur sont encouragés à dissimuler la taille exacte des données utilisées par une origine donnée, pour empêcher que ces valeurs soient utilisées à des fins de fingerprinting.
+- La dé-duplication, la compression et d’autres méthodes pour réduire la taille physique des données stockées peuvent être utilisées.
+- Les quotas sont des estimations prudentes de l’espace disponible pour l’utilisation par l’origine, et devraient être inférieurs à l’espace disponible sur l’appareil pour tenter d’empêcher les débordements.
 
-<p>Les agents utilisateurs peuvent utiliser toute méthode de leur choix pour déterminer la taille du quota de l’origine, et sont encouragés par la spécification à fournir de l’espace supplémentaire aux sites populaires ou fréquemment visités.</p>
+Les agents utilisateurs peuvent utiliser toute méthode de leur choix pour déterminer la taille du quota de l’origine, et sont encouragés par la spécification à fournir de l’espace supplémentaire aux sites populaires ou fréquemment visités.
 
-<p>Pour déterminer les valeurs de quota et d’usage estimées pour une origine donnée, utilisez la méthode {{domxref("StorageManager.estimate", "navigator.storage.estimate()")}}, qui retourne une promesse qui, une fois résolue, reçoit un {{domxref("StorageEstimate")}} qui contient ces nombres. Par exemple :</p>
+Pour déterminer les valeurs de quota et d’usage estimées pour une origine donnée, utilisez la méthode {{domxref("StorageManager.estimate", "navigator.storage.estimate()")}}, qui retourne une promesse qui, une fois résolue, reçoit un {{domxref("StorageEstimate")}} qui contient ces nombres. Par exemple :
 
-<pre class="brush: js">navigator.storage.estimate().then(estimate =&gt; {
+```js
+navigator.storage.estimate().then(estimate => {
   // estimate.quota est le quota estimé
   // estimate.usage est le nombre estimé d’octets utilisés
-});</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Storage')}}</td>
-   <td>{{Spec2('Storage')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<h3 id="StorageManager"><code>StorageManager</code></h3>
-
-<p>{{Compat("api.StorageManager")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("NavigatorStorage.storage", "navigator.storage")}}</li>
- <li>{{domxref("StorageManager")}} (l’objet renvoyé par <code>navigator.storage</code>)</li>
- <li><a href="/fr/docs/Web/API/Permissions_API/Using_the_Permissions_API">Utiliser l’API Permissions</a></li>
-</ul>
+});
+```
+
+## Spécifications
+
+| Spécification                    | Statut                       | Commentaire          |
+| -------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('Storage')}} | {{Spec2('Storage')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+### `StorageManager`
+
+{{Compat("api.StorageManager")}}
+
+## Voir aussi
+
+- {{domxref("NavigatorStorage.storage", "navigator.storage")}}
+- {{domxref("StorageManager")}} (l’objet renvoyé par `navigator.storage`)
+- [Utiliser l’API Permissions](/fr/docs/Web/API/Permissions_API/Using_the_Permissions_API)
diff --git a/files/fr/web/api/storageestimate/index.md b/files/fr/web/api/storageestimate/index.md
index a4a4dd5ebd..612975fb5f 100644
--- a/files/fr/web/api/storageestimate/index.md
+++ b/files/fr/web/api/storageestimate/index.md
@@ -3,49 +3,34 @@ title: StorageEstimate
 slug: Web/API/StorageEstimate
 translation_of: Web/API/StorageEstimate
 ---
-<div>{{securecontext_header}}{{APIRef("Storage")}}</div>
+{{securecontext_header}}{{APIRef("Storage")}}
 
-<p>Le dictionnaire <strong><code>StorageEstimate</code></strong> est utilisé par le {{domxref("StorageManager")}} pour fournir des estimations de taille du stockage de données d’un site ou d’une application et de la quantité actuellement utilisée. La méthod {{domxref("StorageManager.estimate", "estimate()")}} renvoie un objet qui se conforme à ce dictionnaire quand sa {{jsxref("Promise")}} se résoud.</p>
+Le dictionnaire **`StorageEstimate`** est utilisé par le {{domxref("StorageManager")}} pour fournir des estimations de taille du stockage de données d’un site ou d’une application et de la quantité actuellement utilisée. La méthod {{domxref("StorageManager.estimate", "estimate()")}} renvoie un objet qui se conforme à ce dictionnaire quand sa {{jsxref("Promise")}} se résoud.
 
-<p>Ces valeurs sont seulement des estimations pour différentes raisons, telles que la performance, et la prévention de l’utilisation des informations de capacité de stockage à des fins de fingerprinting. Voir les pages de propriétés individuelles pour plus de détails.</p>
+Ces valeurs sont seulement des estimations pour différentes raisons, telles que la performance, et la prévention de l’utilisation des informations de capacité de stockage à des fins de fingerprinting. Voir les pages de propriétés individuelles pour plus de détails.
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<p><em>Actuellement, ce dictionnaire a toujours les deux propriétés suivantes définies.</em></p>
+_Actuellement, ce dictionnaire a toujours les deux propriétés suivantes définies._
 
-<dl>
- <dt>{{domxref("StorageEstimate.quota", "quota")}} {{securecontext_inline}}</dt>
- <dd>Une valeur numérique qui fournit une approximation prudente du stockage total que l’appareil ou l’ordinateur met à disposition de l’origine ou de l’application web. Il est possible que plus d’espace que la valeur indiquée soit disponible, cependant vous ne pouvez pas supposer que c’est le cas.</dd>
- <dt>{{domxref("StorageEstimate.usage", "usage")}} {{securecontext_inline}}</dt>
- <dd>Une valeur numérique donnant une approximation de la quantité de stockage actuellement utilisée par le site ou l’application, parmi l’espace disponible indiqué par <code>quota</code>.</dd>
-</dl>
+- {{domxref("StorageEstimate.quota", "quota")}} {{securecontext_inline}}
+  - : Une valeur numérique qui fournit une approximation prudente du stockage total que l’appareil ou l’ordinateur met à disposition de l’origine ou de l’application web. Il est possible que plus d’espace que la valeur indiquée soit disponible, cependant vous ne pouvez pas supposer que c’est le cas.
+- {{domxref("StorageEstimate.usage", "usage")}} {{securecontext_inline}}
+  - : Une valeur numérique donnant une approximation de la quantité de stockage actuellement utilisée par le site ou l’application, parmi l’espace disponible indiqué par `quota`.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Storage', '#dictdef-storageestimate', 'StorageEstimate')}}</td>
-   <td>{{Spec2('Storage')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                | Statut                       | Commentaire          |
+| -------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('Storage', '#dictdef-storageestimate', 'StorageEstimate')}} | {{Spec2('Storage')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.StorageEstimate")}}</p>
+{{Compat("api.StorageEstimate")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/en-US/docs/Web/API/Storage_API">l’API Storage</a></li>
- <li>{{domxref("StorageManager")}}</li>
- <li>{{domxref("StorageManager.estimate()")}}</li>
- <li>{{domxref("NavigatorStorage.storage", "navigator.storage")}}</li>
-</ul>
+- [l’API Storage](/en-US/docs/Web/API/Storage_API)
+- {{domxref("StorageManager")}}
+- {{domxref("StorageManager.estimate()")}}
+- {{domxref("NavigatorStorage.storage", "navigator.storage")}}
diff --git a/files/fr/web/api/storagemanager/estimate/index.md b/files/fr/web/api/storagemanager/estimate/index.md
index c94942b615..7c551573bf 100644
--- a/files/fr/web/api/storagemanager/estimate/index.md
+++ b/files/fr/web/api/storagemanager/estimate/index.md
@@ -3,74 +3,63 @@ title: StorageManager.estimate()
 slug: Web/API/StorageManager/estimate
 translation_of: Web/API/StorageManager/estimate
 ---
-<p>{{securecontext_header}}{{APIRef("Storage")}}</p>
+{{securecontext_header}}{{APIRef("Storage")}}
 
-<p>La méthode <strong><code>estimate()</code></strong> de l’interface {{domxref("StorageManager")}} demande au gestionnaire de stockage d’obtenir des informations de quota et d’usage pour l’origine actuelle. Cette méthode opère de manière asynchrone, elle renvoie donc une {{jsxref("Promise")}} qui se résoud une fois que l’information est disponible. La fonction gérant la résolution de la promesse reçoit en entrée un {{domxref("StorageEstimate")}} avec les données de quota et d’usage.</p>
+La méthode **`estimate()`** de l’interface {{domxref("StorageManager")}} demande au gestionnaire de stockage d’obtenir des informations de quota et d’usage pour l’origine actuelle. Cette méthode opère de manière asynchrone, elle renvoie donc une {{jsxref("Promise")}} qui se résoud une fois que l’information est disponible. La fonction gérant la résolution de la promesse reçoit en entrée un {{domxref("StorageEstimate")}} avec les données de quota et d’usage.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var <em>estimatePromise</em> = <em>StorageManager</em>.estimate();</pre>
+    var estimatePromise = StorageManager.estimate();
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<p>Aucun.</p>
+Aucun.
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Une {{jsxref('Promise')}} qui se résoud en un objet qui se conforme au dictionnaire {{domxref('StorageEstimate')}}. Ce dictionnaire contient des estimations de la quantité d’espace disponible à l’origine ou à l’application (dans {{domxref("StorageEstimate.quota")}}), ainsi que la quantité d’espace actuellement utilisé (dans {{domxref("StorageEstimate.usage")}}). Ces nombres ne sont pas exacts ; entre la compression, la dé-duplication, et l’obfuscation pour des raisons de sécurité, ils ne seront pas précis.</p>
+Une {{jsxref('Promise')}} qui se résoud en un objet qui se conforme au dictionnaire {{domxref('StorageEstimate')}}. Ce dictionnaire contient des estimations de la quantité d’espace disponible à l’origine ou à l’application (dans {{domxref("StorageEstimate.quota")}}), ainsi que la quantité d’espace actuellement utilisé (dans {{domxref("StorageEstimate.usage")}}). Ces nombres ne sont pas exacts ; entre la compression, la dé-duplication, et l’obfuscation pour des raisons de sécurité, ils ne seront pas précis.
 
-<p>Il est possible de constater que le <code>quota</code> varie d’application en application, basé sur des facteurs tels que la fréquence à laquelle l’utilisateur ou l’utilisatrice la visite, des données de popularité de sites bien connus, et ainsi de suite.</p>
+Il est possible de constater que le `quota` varie d’application en application, basé sur des facteurs tels que la fréquence à laquelle l’utilisateur ou l’utilisatrice la visite, des données de popularité de sites bien connus, et ainsi de suite.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<p>Dans cet exemple, nous obtenons des estimations d’usage et présentons le pourcentage de capacité de stockage actuellement utilisé à l’utilisateur ou à l’utilisatrice.</p>
+Dans cet exemple, nous obtenons des estimations d’usage et présentons le pourcentage de capacité de stockage actuellement utilisé à l’utilisateur ou à l’utilisatrice.
 
-<h3 id="Contenu_HTML">Contenu HTML</h3>
+### Contenu HTML
 
-<pre class="brush: html">&lt;p&gt;
-  Vous utilisez actuellement environ &lt;span id="percent"&gt;
-  &lt;/span&gt;% de votre espace disponible.
-&lt;/p&gt;
-</pre>
+```html
+<p>
+  Vous utilisez actuellement environ <span id="percent">
+  </span>% de votre espace disponible.
+</p>
+```
 
-<h3 id="Contenu_JavaScript">Contenu JavaScript</h3>
+### Contenu JavaScript
 
-<pre class="brush: js">navigator.storage.estimate().then(function(estimate) {
+```js
+navigator.storage.estimate().then(function(estimate) {
   document.getElementById("percent").textContent =
       (estimate.usage / estimate.quota).toFixed(2);
 });
-</pre>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{ EmbedLiveSample('Example', 600, 40) }}</p>
+{{ EmbedLiveSample('Example', 600, 40) }}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Storage','#dom-storagemanager-estimate','estimate()')}}</td>
-   <td>{{Spec2('Storage')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                            | Statut                       | Commentaire          |
+| ---------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('Storage','#dom-storagemanager-estimate','estimate()')}} | {{Spec2('Storage')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.StorageManager.estimate")}}</p>
+{{Compat("api.StorageManager.estimate")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>l’API Storage</li>
- <li>{{domxref("Storage")}}, l’objet renvoyé par {{domxref("Window.localStorage")}}</li>
- <li>{{domxref("StorageManager")}}</li>
- <li>{{domxref("navigator.storage")}}</li>
-</ul>
+- l’API Storage
+- {{domxref("Storage")}}, l’objet renvoyé par {{domxref("Window.localStorage")}}
+- {{domxref("StorageManager")}}
+- {{domxref("navigator.storage")}}
diff --git a/files/fr/web/api/storagemanager/index.md b/files/fr/web/api/storagemanager/index.md
index afc0bd77ad..f2d0ddb3ae 100644
--- a/files/fr/web/api/storagemanager/index.md
+++ b/files/fr/web/api/storagemanager/index.md
@@ -16,40 +16,25 @@ tags:
   - Usage
 translation_of: Web/API/StorageManager
 ---
-<p>{{securecontext_header}}{{SeeCompatTable}}{{APIRef("Storage")}}</p>
+{{securecontext_header}}{{SeeCompatTable}}{{APIRef("Storage")}}
 
-<p>The <strong><code>StorageManager</code></strong> interface of the the <a href="/en-US/docs/Web/API/Storage_API">Storage API</a> provides an interface for managing persistance permissions and estimating available storage. You can get a reference to this interface using either {{domxref("navigator.storage")}} or {{domxref("WorkerNavigator.storage")}}.</p>
+The **`StorageManager`** interface of the the [Storage API](/en-US/docs/Web/API/Storage_API) provides an interface for managing persistance permissions and estimating available storage. You can get a reference to this interface using either {{domxref("navigator.storage")}} or {{domxref("WorkerNavigator.storage")}}.
 
-<h2 id="Methods">Methods</h2>
+## Methods
 
-<dl>
-	<dt>{{domxref("StorageManager.estimate()")}} {{securecontext_inline}}</dt>
-	<dd>Returns a {{domxref("StorageEstimate")}} object containing usage and quota numbers for your origin.</dd>
-	<dt>{{domxref("StorageManager.persist()")}} {{securecontext_inline}}</dt>
-	<dd>Returns a {{jsxref('Promise')}} that resolves to <code>true</code> if the user agent is able to persist your site's storage.</dd>
-	<dt>{{domxref("StorageManager.persisted()")}} {{securecontext_inline}}</dt>
-	<dd>Returns a {{jsxref('Promise')}} that resolves to <code>true</code> if persistence has already been granted for your site's storage.</dd>
-</dl>
+- {{domxref("StorageManager.estimate()")}} {{securecontext_inline}}
+  - : Returns a {{domxref("StorageEstimate")}} object containing usage and quota numbers for your origin.
+- {{domxref("StorageManager.persist()")}} {{securecontext_inline}}
+  - : Returns a {{jsxref('Promise')}} that resolves to `true` if the user agent is able to persist your site's storage.
+- {{domxref("StorageManager.persisted()")}} {{securecontext_inline}}
+  - : Returns a {{jsxref('Promise')}} that resolves to `true` if persistence has already been granted for your site's storage.
 
-<h2 id="Specifications">Specifications</h2>
+## Specifications
 
-<table class="standard-table">
-	<tbody>
-		<tr>
-			<th scope="col">Specification</th>
-			<th scope="col">Status</th>
-			<th scope="col">Comment</th>
-		</tr>
-		<tr>
-			<td>{{SpecName('Storage','#storagemanager','StorageManger')}}</td>
-			<td>{{Spec2('Storage')}}</td>
-			<td>Initial definition.</td>
-		</tr>
-	</tbody>
-</table>
+| Specification                                                                | Status                       | Comment             |
+| ---------------------------------------------------------------------------- | ---------------------------- | ------------------- |
+| {{SpecName('Storage','#storagemanager','StorageManger')}} | {{Spec2('Storage')}} | Initial definition. |
 
-<h2 id="Browser_compatibility">Browser compatibility</h2>
+## Browser compatibility
 
-
-
-<p>{{Compat("api.StorageManager")}}</p>
+{{Compat("api.StorageManager")}}
diff --git a/files/fr/web/api/storagemanager/persist/index.md b/files/fr/web/api/storagemanager/persist/index.md
index 8a8c15f76f..f644f15c11 100644
--- a/files/fr/web/api/storagemanager/persist/index.md
+++ b/files/fr/web/api/storagemanager/persist/index.md
@@ -3,49 +3,40 @@ title: StorageManager.persist()
 slug: Web/API/StorageManager/persist
 translation_of: Web/API/StorageManager/persist
 ---
-<p>{{securecontext_header}}{{APIRef("Storage")}}{{SeeCompatTable}}</p>
+{{securecontext_header}}{{APIRef("Storage")}}{{SeeCompatTable}}
 
-<p>La méthode <strong><code>persist()</code></strong> de l’interface {{domxref("StorageManager")}} fait une demande de permission d’utiliser un stockage persistant, et renvoie une {{jsxref('Promise')}} qui se résoud en <code>true</code> si la permission est accordée et le mode de boîte est persistant, et <code>false</code> dans le cas contraire.</p>
+La méthode **`persist()`** de l’interface {{domxref("StorageManager")}} fait une demande de permission d’utiliser un stockage persistant, et renvoie une {{jsxref('Promise')}} qui se résoud en `true` si la permission est accordée et le mode de boîte est persistant, et `false` dans le cas contraire.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">navigator.storage.persist().then(function(persistent) { ... })</pre>
+    navigator.storage.persist().then(function(persistent) { ... })
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<p>Aucun.</p>
+Aucun.
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Une {{jsxref('Promise')}} qui se résoud en un {{jsxref('Boolean')}}.</p>
+Une {{jsxref('Promise')}} qui se résoud en un {{jsxref('Boolean')}}.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">if (navigator.storage &amp;&amp; navigator.storage.persist)
+```js
+if (navigator.storage && navigator.storage.persist)
   navigator.storage.persist().then(function(persistent) {
     if (persistent)
       console.log("Le stockage ne sera pas nettoyé sauf en cas d’action humaine explicite");
     else
       console.log("Le stockage peut être nettoyé par l’UA en cas de pression de stockage.");
-  });</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Storage','#dom-storagemanager-persist','persist')}}</td>
-   <td>{{Spec2('Storage')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.StorageManager.persist")}}</p>
+  });
+```
+
+## Spécifications
+
+| Spécification                                                                        | Statut                       | Commentaire          |
+| ------------------------------------------------------------------------------------ | ---------------------------- | -------------------- |
+| {{SpecName('Storage','#dom-storagemanager-persist','persist')}} | {{Spec2('Storage')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.StorageManager.persist")}}
diff --git a/files/fr/web/api/storagemanager/persisted/index.md b/files/fr/web/api/storagemanager/persisted/index.md
index 35fcfa12c2..05ef2cd5df 100644
--- a/files/fr/web/api/storagemanager/persisted/index.md
+++ b/files/fr/web/api/storagemanager/persisted/index.md
@@ -3,49 +3,40 @@ title: StorageManager.persisted()
 slug: Web/API/StorageManager/persisted
 translation_of: Web/API/StorageManager/persisted
 ---
-<p>{{securecontext_header}}{{APIRef("Storage")}}{{SeeCompatTable}}</p>
+{{securecontext_header}}{{APIRef("Storage")}}{{SeeCompatTable}}
 
-<p>La propriété <strong><code>persisted</code></strong> de l’interface {{domxref("StorageManager")}} renvoie une {{jsxref('Promise')}} qui se résoud en <code>true</code> si le mode de boîte est est persistant pour le stockage de votre site.</p>
+La propriété **`persisted`** de l’interface {{domxref("StorageManager")}} renvoie une {{jsxref('Promise')}} qui se résoud en `true` si le mode de boîte est est persistant pour le stockage de votre site.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">navigator.storage.persisted().then(function(persistent) { ... })</pre>
+    navigator.storage.persisted().then(function(persistent) { ... })
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<p>Aucun.</p>
+Aucun.
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Une {{jsxref('Promise')}} qui se résoud en un {{jsxref('Boolean')}}.</p>
+Une {{jsxref('Promise')}} qui se résoud en un {{jsxref('Boolean')}}.
 
-<h2 id="Example">Example</h2>
+## Example
 
-<pre class="brush: js"><code>if (navigator.storage &amp;&amp; navigator.storage.persist)
+```js
+if (navigator.storage && navigator.storage.persist)
   navigator.storage.persisted().then(function(persistent) {
     if (persistent)
       console.log("Le stockage ne sera pas nettoyé sauf en cas d’action humaine explicite");
     else
       console.log("Le stockage peut être nettoyé par l’UA en cas de pression de stockage.");
-  });</code></pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Storage','#dom-storagemanager-persisted','persisted')}}</td>
-   <td>{{Spec2('Storage')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.StorageManager.persisted")}}</p>
+  });
+```
+
+## Spécifications
+
+| Spécification                                                                            | Statut                       | Commentaire          |
+| ---------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('Storage','#dom-storagemanager-persisted','persisted')}} | {{Spec2('Storage')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.StorageManager.persisted")}}
diff --git a/files/fr/web/api/streams_api/index.md b/files/fr/web/api/streams_api/index.md
index 3bce14616c..fa6447e8af 100644
--- a/files/fr/web/api/streams_api/index.md
+++ b/files/fr/web/api/streams_api/index.md
@@ -3,139 +3,108 @@ title: Streams API
 slug: Web/API/Streams_API
 translation_of: Web/API/Streams_API
 ---
-<div>{{SeeCompatTable}}{{APIRef("Streams")}}</div>
+{{SeeCompatTable}}{{APIRef("Streams")}}
 
-<p>L'API Streams permet à JavaScript d'accèder par programmation aux flux de données reçus sur le réseau et de les traiter selon les souhaits du développeur.</p>
+L'API Streams permet à JavaScript d'accèder par programmation aux flux de données reçus sur le réseau et de les traiter selon les souhaits du développeur.
 
-<h2 id="Concepts_et_utilisation">Concepts et utilisation</h2>
+## Concepts et utilisation
 
-<p>Le Streaming implique de segmenter une ressource que vous souhaitez recevoir sur le réseau et de la séparer en plus petits morceaux, puis de la traiter petit à petit. C'est une chose que font les navigateurs quand ils reçoivent des ressources pour les afficher sur les pages web — le buffer d'une vidéo est progressivement disponible à la lecture, tout comme parfois vous verrez des images s'afficher progressivement durant leur chargement.</p>
+Le Streaming implique de segmenter une ressource que vous souhaitez recevoir sur le réseau et de la séparer en plus petits morceaux, puis de la traiter petit à petit. C'est une chose que font les navigateurs quand ils reçoivent des ressources pour les afficher sur les pages web — le buffer d'une vidéo est progressivement disponible à la lecture, tout comme parfois vous verrez des images s'afficher progressivement durant leur chargement.
 
-<p>Mais ceci n'a jamais été possible pour le javascript par le passé. Avant, si nous souhaitions traiter une ressource quel qu'en soit le type (qu'il s'agisse d'une vidéo, ou d'un fichier texte, etc.), il nous fallait télécharger le fichier en entier, attendre qu'il soit désérialisé en un format acceptable, pour alors traiter la totalité après l'avoir totalement reçu.</p>
+Mais ceci n'a jamais été possible pour le javascript par le passé. Avant, si nous souhaitions traiter une ressource quel qu'en soit le type (qu'il s'agisse d'une vidéo, ou d'un fichier texte, etc.), il nous fallait télécharger le fichier en entier, attendre qu'il soit désérialisé en un format acceptable, pour alors traiter la totalité après l'avoir totalement reçu.
 
-<p>Avec la mise à disposition des Streams en JavaScript, tout ceci a changé — vous pouvez maintenant commencer à traiter des données brutes petit à petit avec du Javascript dès qu'elles sont disponibles coté client, sans avoir besoin de générer un <em>buffer</em>, <em>string</em>, ou <em>blob</em>.</p>
+Avec la mise à disposition des Streams en JavaScript, tout ceci a changé — vous pouvez maintenant commencer à traiter des données brutes petit à petit avec du Javascript dès qu'elles sont disponibles coté client, sans avoir besoin de générer un _buffer_, _string_, ou _blob_.
 
-<p><img alt="" src="concept.png"></p>
+![](concept.png)
 
-<p>Il y a aussi d'autres avantages — vous pouvez détecter quand un flux commence ou prend fin, chaîner les flux entre eux, traiter les erreurs et annuler les flux si nécessaire et vous adapter à la vitesse de lecture du flux.</p>
+Il y a aussi d'autres avantages — vous pouvez détecter quand un flux commence ou prend fin, chaîner les flux entre eux, traiter les erreurs et annuler les flux si nécessaire et vous adapter à la vitesse de lecture du flux.
 
-<p>L'usage basique des Streams s'articule autour de la mise à disposition des réponses sous forme de flux. Par exemple, la réponse {{domxref("Body")}} retourné par une requête <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch </a>réussie peut être exposée en tant que {{domxref("ReadableStream")}}, vous pourrez ainsi le lire en utilisant un lecteur créé par {{domxref("ReadableStream.getReader()")}}, l'annuler avec {{domxref("ReadableStream.cancel()")}}, etc.</p>
+L'usage basique des Streams s'articule autour de la mise à disposition des réponses sous forme de flux. Par exemple, la réponse {{domxref("Body")}} retourné par une requête [fetch ](/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch)réussie peut être exposée en tant que {{domxref("ReadableStream")}}, vous pourrez ainsi le lire en utilisant un lecteur créé par {{domxref("ReadableStream.getReader()")}}, l'annuler avec {{domxref("ReadableStream.cancel()")}}, etc.
 
-<p>Un usage plus avancé consiste à créer son propre flux en utilisant le constructeur {{domxref("ReadableStream.ReadableStream", "ReadableStream()")}}, pour traiter par exemple les données à l'intérieur d'un <a href="/docs/Web/API/Service_Worker_API">service worker</a>.</p>
+Un usage plus avancé consiste à créer son propre flux en utilisant le constructeur {{domxref("ReadableStream.ReadableStream", "ReadableStream()")}}, pour traiter par exemple les données à l'intérieur d'un [service worker](/docs/Web/API/Service_Worker_API).
 
-<p>Vous pouvez aussi écrire des données vers les flux en utilisant {{domxref("WritableStream")}}.</p>
+Vous pouvez aussi écrire des données vers les flux en utilisant {{domxref("WritableStream")}}.
 
-<div class="note">
-<p><strong>Note :</strong> Vous trouverez plus de détails sur la théorie et la mise en pratique des flux dans nos articles — <a href="/docs/Web/API/Streams_API/Concepts">Streams API concepts</a>, <a href="/docs/Web/API/Streams_API/Using_readable_streams">Using readable streams</a>, et <a href="/docs/Web/API/Streams_API/Using_writable_streams">Using writable streams</a>.</p>
-</div>
+> **Note :** Vous trouverez plus de détails sur la théorie et la mise en pratique des flux dans nos articles — [Streams API concepts](/docs/Web/API/Streams_API/Concepts), [Using readable streams](/docs/Web/API/Streams_API/Using_readable_streams), et [Using writable streams](/docs/Web/API/Streams_API/Using_writable_streams).
 
-<h2 id="Stream_interfaces">Stream interfaces</h2>
+## Stream interfaces
 
-<h3 id="Readable_streams">Readable streams</h3>
+### Readable streams
 
-<dl>
- <dt>{{domxref("ReadableStream")}}</dt>
- <dd>Correspond à un flux de données lisible. Il peut être utlisé afin de gérer les réponses des flux de l'<a href="/en-US/docs/Web/API/Fetch_API">API Fetch</a>, ou des flux définis par le développeur (cad. un constructeur  {{domxref("ReadableStream.ReadableStream", "ReadableStream()")}} personnalisé).</dd>
- <dt>{{domxref("ReadableStreamDefaultReader")}}</dt>
- <dd>Correspond à un lecteur par défaut pouvant être utilisé afin de lire un flux de données fourni par le réseau (cad. une requête fetch).</dd>
- <dt>{{domxref("ReadableStreamDefaultController")}}</dt>
- <dd>Correspond à un controlleur permettant de gérer l'état d'un {{domxref("ReadableStream")}} et le système de queue interne. Les controleurs par défaut sont à destination des flux qui ne sont pas des flux d'octets.</dd>
-</dl>
+- {{domxref("ReadableStream")}}
+  - : Correspond à un flux de données lisible. Il peut être utlisé afin de gérer les réponses des flux de l'[API Fetch](/en-US/docs/Web/API/Fetch_API), ou des flux définis par le développeur (cad. un constructeur  {{domxref("ReadableStream.ReadableStream", "ReadableStream()")}} personnalisé).
+- {{domxref("ReadableStreamDefaultReader")}}
+  - : Correspond à un lecteur par défaut pouvant être utilisé afin de lire un flux de données fourni par le réseau (cad. une requête fetch).
+- {{domxref("ReadableStreamDefaultController")}}
+  - : Correspond à un controlleur permettant de gérer l'état d'un {{domxref("ReadableStream")}} et le système de queue interne. Les controleurs par défaut sont à destination des flux qui ne sont pas des flux d'octets.
 
-<h3 id="Writable_streams">Writable streams</h3>
+### Writable streams
 
-<dl>
- <dt>{{domxref("WritableStream")}}</dt>
- <dd>Propose un standard d'abstraction afin d'écrire des flux de données vers une destination, ce qu'on appel un sink (un <em>aggregateur de flux</em>). Cet objet s'accompagne  d'un built-in backpressure et d'un système de queue.</dd>
- <dt>{{domxref("WritableStreamDefaultWriter")}}</dt>
- <dd>Correspond à un flux inscriptible par défaut pouvant être utilisé afin d'écire des chunks (plus petit morceaux) de données vers un flux inscriptible.</dd>
- <dt>{{domxref("WritableStreamDefaultController")}}</dt>
- <dd>Correspond à un controlleur permettant de gérer l'état d'un {{domxref("WritableStream")}}. Lors de la construction d'un <code>WritableStream</code>, le sink sous-jacent se voit attribuer une instance de <code>WritableStreamDefaultController</code> afin de pouvoir le manipuler.</dd>
-</dl>
+- {{domxref("WritableStream")}}
+  - : Propose un standard d'abstraction afin d'écrire des flux de données vers une destination, ce qu'on appel un sink (un _aggregateur de flux_). Cet objet s'accompagne  d'un built-in backpressure et d'un système de queue.
+- {{domxref("WritableStreamDefaultWriter")}}
+  - : Correspond à un flux inscriptible par défaut pouvant être utilisé afin d'écire des chunks (plus petit morceaux) de données vers un flux inscriptible.
+- {{domxref("WritableStreamDefaultController")}}
+  - : Correspond à un controlleur permettant de gérer l'état d'un {{domxref("WritableStream")}}. Lors de la construction d'un `WritableStream`, le sink sous-jacent se voit attribuer une instance de `WritableStreamDefaultController` afin de pouvoir le manipuler.
 
-<h3 id="Related_stream_APIs_and_operations">Related stream APIs and operations</h3>
+### Related stream APIs and operations
 
-<dl>
- <dt>{{domxref("ByteLengthQueuingStrategy")}}</dt>
- <dd>Fournit une stratégie intégrée de file d'attente basée sur la taille en octets, pouvant être utilisée lors de la construction de flux..</dd>
- <dt>{{domxref("CountQueuingStrategy")}}</dt>
- <dd>Fournit une stratégie intégrée de file d'attente basée sur le comptage des chunks, pouvant être utilisée lors de la construction de flux.</dd>
-</dl>
+- {{domxref("ByteLengthQueuingStrategy")}}
+  - : Fournit une stratégie intégrée de file d'attente basée sur la taille en octets, pouvant être utilisée lors de la construction de flux..
+- {{domxref("CountQueuingStrategy")}}
+  - : Fournit une stratégie intégrée de file d'attente basée sur le comptage des chunks, pouvant être utilisée lors de la construction de flux.
 
-<h3 id="Extensions_vers_dautres_APIs">Extensions vers d'autres APIs</h3>
+### Extensions vers d'autres APIs
 
-<dl>
- <dt>{{domxref("Request")}}</dt>
- <dd>Quand un nouvel objet <code>Request</code> est construit, vous pouvez lui passer un {{domxref("ReadableStream")}} dans la propriété <code>body</code> de son dictionnaire <code>RequestInit</code>. Cette <code>Request</code> peut alors être envoyée à un {{domxref("WindowOrWorkerGlobalScope.fetch()")}} pour initier l'appel vers le flux.</dd>
- <dt>{{domxref("Body")}}</dt>
- <dd>La réponse {{domxref("Body")}} retrouné par un <a href="/fr-FR/docs/Web/API/WindowOrWorkerGlobalScope/fetch">appel fetch</a> réussi est exposée par défaut comme un {{domxref("ReadableStream")}}, et peut être ratachée à un reader, etc.</dd>
-</dl>
+- {{domxref("Request")}}
+  - : Quand un nouvel objet `Request` est construit, vous pouvez lui passer un {{domxref("ReadableStream")}} dans la propriété `body` de son dictionnaire `RequestInit`. Cette `Request` peut alors être envoyée à un {{domxref("WindowOrWorkerGlobalScope.fetch()")}} pour initier l'appel vers le flux.
+- {{domxref("Body")}}
+  - : La réponse {{domxref("Body")}} retrouné par un [appel fetch](/fr-FR/docs/Web/API/WindowOrWorkerGlobalScope/fetch) réussi est exposée par défaut comme un {{domxref("ReadableStream")}}, et peut être ratachée à un reader, etc.
 
-<h3 id="Interfaces_liées_aux_flux_doctets">Interfaces liées aux flux d'octets</h3>
+### Interfaces liées aux flux d'octets
 
-<div class="warning">
-<p><strong>Attention :</strong> Ces méthodes ne sont pas implémentés pour le moment, des questions ont été soulevées afin de déterminer si les détails des specs sont dans état suffisamment stable pour être implémentés. Ceci pourrait changer avec le temps.</p>
-</div>
+> **Attention :** Ces méthodes ne sont pas implémentés pour le moment, des questions ont été soulevées afin de déterminer si les détails des specs sont dans état suffisamment stable pour être implémentés. Ceci pourrait changer avec le temps.
 
-<dl>
- <dt>{{domxref("ReadableStreamBYOBReader")}}</dt>
- <dd>Correspond à un lecteur BYOB ("bring your own buffer") pouvant être utilisé pour lire des flux de données fourni par le développeur (c.a.d. un constructeur {{domxref("ReadableStream.ReadableStream", "ReadableStream()")}} personalisé).</dd>
- <dt>{{domxref("ReadableByteStreamController")}}</dt>
- <dd>Correspond à un controlleur permettant de manipuler l'état et la file d'attente interne d'un {{domxref("ReadableStream")}}. Les controlleurs de flux d'octets sont à usage des flux d'octets.</dd>
- <dt>{{domxref("ReadableStreamBYOBRequest")}}</dt>
- <dd>Correspond à un <em>pull</em> dans une requête {{domxref("ReadableByteStreamController")}}.</dd>
-</dl>
+- {{domxref("ReadableStreamBYOBReader")}}
+  - : Correspond à un lecteur BYOB ("bring your own buffer") pouvant être utilisé pour lire des flux de données fourni par le développeur (c.a.d. un constructeur {{domxref("ReadableStream.ReadableStream", "ReadableStream()")}} personalisé).
+- {{domxref("ReadableByteStreamController")}}
+  - : Correspond à un controlleur permettant de manipuler l'état et la file d'attente interne d'un {{domxref("ReadableStream")}}. Les controlleurs de flux d'octets sont à usage des flux d'octets.
+- {{domxref("ReadableStreamBYOBRequest")}}
+  - : Correspond à un _pull_ dans une requête {{domxref("ReadableByteStreamController")}}.
 
-<h2 id="Examples">Examples</h2>
+## Examples
 
-<p>We have created a directory of examples to go along with the Streams API documentation — see <a href="https://github.com/mdn/dom-examples/tree/master/streams">mdn/dom-examples/streams</a>. The examples are as follows:</p>
+We have created a directory of examples to go along with the Streams API documentation — see [mdn/dom-examples/streams](https://github.com/mdn/dom-examples/tree/master/streams). The examples are as follows:
 
-<ul>
- <li><a href="http://mdn.github.io/dom-examples/streams/simple-pump/">Simple stream pump</a>: This example shows how to consume a ReadableStream and pass its data to another.</li>
- <li><a href="http://mdn.github.io/dom-examples/streams/grayscale-png/">Grayscale a PNG</a>: This example shows how a ReadableStream of a PNG can be turned into grayscale.</li>
- <li><a href="http://mdn.github.io/dom-examples/streams/simple-random-stream/">Simple random stream</a>: This example shows how to use a custom stream to generate random strings, enqueue them as chunks, and then read them back out again.</li>
- <li><a href="http://mdn.github.io/dom-examples/streams/simple-tee-example/">Simple tee example</a>: This example extends the Simple random stream example, showing how a stream can be teed and both resulting streams can be read independently.</li>
- <li><a href="http://mdn.github.io/dom-examples/streams/simple-writer/">Simple writer</a>: This example shows how to to write to a writable stream, then decode the stream and write the contents to the UI.</li>
- <li><a href="http://mdn.github.io/dom-examples/streams/png-transform-stream/">Unpack chunks of a PNG</a>: This example shows how <a href="/en-US/docs/Web/API/ReadableStream/pipeThrough"><code>pipeThrough()</code></a> can be used to transform a ReadableStream into a stream of other data types by transforming a data of a PNG file into a stream of PNG chunks.</li>
-</ul>
+- [Simple stream pump](http://mdn.github.io/dom-examples/streams/simple-pump/): This example shows how to consume a ReadableStream and pass its data to another.
+- [Grayscale a PNG](http://mdn.github.io/dom-examples/streams/grayscale-png/): This example shows how a ReadableStream of a PNG can be turned into grayscale.
+- [Simple random stream](http://mdn.github.io/dom-examples/streams/simple-random-stream/): This example shows how to use a custom stream to generate random strings, enqueue them as chunks, and then read them back out again.
+- [Simple tee example](http://mdn.github.io/dom-examples/streams/simple-tee-example/): This example extends the Simple random stream example, showing how a stream can be teed and both resulting streams can be read independently.
+- [Simple writer](http://mdn.github.io/dom-examples/streams/simple-writer/): This example shows how to to write to a writable stream, then decode the stream and write the contents to the UI.
+- [Unpack chunks of a PNG](http://mdn.github.io/dom-examples/streams/png-transform-stream/): This example shows how [`pipeThrough()`](/en-US/docs/Web/API/ReadableStream/pipeThrough) can be used to transform a ReadableStream into a stream of other data types by transforming a data of a PNG file into a stream of PNG chunks.
 
-<p>Examples from other developers:</p>
+Examples from other developers:
 
-<ul>
- <li><a href="https://fetch-progress.anthum.com/">Progress Indicators with Streams, Service Workers, &amp; Fetch</a>.</li>
-</ul>
+- [Progress Indicators with Streams, Service Workers, & Fetch](https://fetch-progress.anthum.com/).
 
-<h2 id="Specifications">Specifications</h2>
+## Specifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Streams')}}</td>
-   <td>{{Spec2('Streams')}}</td>
-   <td>Initial definition.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
-
-<h3 id="ReadableStream">ReadableStream</h3>
-
-<p>{{Compat("api.ReadableStream")}}</p>
-
-<h3 id="WritableStream">WritableStream</h3>
-
-<p>{{Compat("api.WritableStream")}}</p>
-
-<h2 id="See_also">See also</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/API/Streams_API/Concepts">Streams API concepts</a></li>
- <li><a href="/en-US/docs/Web/API/Streams_API/Using_readable_streams">Using readable streams</a></li>
- <li><a href="/en-US/docs/Web/API/Streams_API/Using_writable_streams">Using writable streams</a></li>
-</ul>
+| Specification                    | Status                       | Comment             |
+| -------------------------------- | ---------------------------- | ------------------- |
+| {{SpecName('Streams')}} | {{Spec2('Streams')}} | Initial definition. |
+
+## Compatibilité des navigateurs
+
+### ReadableStream
+
+{{Compat("api.ReadableStream")}}
+
+### WritableStream
+
+{{Compat("api.WritableStream")}}
+
+## See also
+
+- [Streams API concepts](/en-US/docs/Web/API/Streams_API/Concepts)
+- [Using readable streams](/en-US/docs/Web/API/Streams_API/Using_readable_streams)
+- [Using writable streams](/en-US/docs/Web/API/Streams_API/Using_writable_streams)
diff --git a/files/fr/web/api/stylesheet/disabled/index.md b/files/fr/web/api/stylesheet/disabled/index.md
index 681c2c6795..9eaaee260c 100644
--- a/files/fr/web/api/stylesheet/disabled/index.md
+++ b/files/fr/web/api/stylesheet/disabled/index.md
@@ -3,23 +3,21 @@ title: StyleSheet.disabled
 slug: Web/API/StyleSheet/disabled
 translation_of: Web/API/StyleSheet/disabled
 ---
-<div>{{APIRef("CSSOM")}}</div>
+{{APIRef("CSSOM")}}
 
-<p>La <code><strong>StyleSheet.disabled</strong></code>propriété indique si la feuille de style est empêchée de demander le document. Une feuille de style peut être désactivé en réglant manuellement cette propriété <code>true</code>ou si elle est une forme inactive <a href="/en-US/docs/Web/CSS/Alternative_style_sheets">feuille de style alternatif</a> . Notez que <code>disabled == false</code>ne garantit pas la feuille de style est appliquée (il pourrait être supprimé du document, par exemple).</p>
+La **`StyleSheet.disabled`**propriété indique si la feuille de style est empêchée de demander le document. Une feuille de style peut être désactivé en réglant manuellement cette propriété `true`ou si elle est une forme inactive [feuille de style alternatif](/en-US/docs/Web/CSS/Alternative_style_sheets) . Notez que `disabled == false`ne garantit pas la feuille de style est appliquée (il pourrait être supprimé du document, par exemple).
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="eval"><em>bool</em> = stylesheet.disabled
-</pre>
+    bool = stylesheet.disabled
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre>// si la feuille de style est désactivé ... 
-si (stylesheet.disabled) {
-   // appliquer le style en ligne 
-}
-</pre>
+    // si la feuille de style est désactivé ...
+    si (stylesheet.disabled) {
+       // appliquer le style en ligne
+    }
 
-<h2 id="Specification">spécification</h2>
+## spécification
 
-<p><a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/stylesheets.html#StyleSheets-StyleSheet-disabled">désactivée </a></p>
+[désactivée](http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/stylesheets.html#StyleSheets-StyleSheet-disabled)
diff --git a/files/fr/web/api/stylesheet/href/index.md b/files/fr/web/api/stylesheet/href/index.md
index 1180f3c619..1765ff0f6e 100644
--- a/files/fr/web/api/stylesheet/href/index.md
+++ b/files/fr/web/api/stylesheet/href/index.md
@@ -3,47 +3,45 @@ title: Stylesheet.href
 slug: Web/API/StyleSheet/href
 translation_of: Web/API/StyleSheet/href
 ---
-<div>{{APIRef ("CSSOM")}}</div>
+{{APIRef ("CSSOM")}}
 
-<p>Renvoie l'emplacement de la feuille de style.</p>
+Renvoie l'emplacement de la feuille de style.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="eval"><em>Uri</em> = stylesheet.href
-</pre>
+    Uri = stylesheet.href
 
-<h3 id="Parameters">Paramètres</h3>
+### Paramètres
 
-<ul>
- <li><code>uri</code> Est une chaîne contenant l'URI de la feuille de style.</li>
-</ul>
+- `uri` Est une chaîne contenant l'URI de la feuille de style.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush: html"> // sur une machine locale: 
- &lt;Html&gt; 
-  &lt;Head&gt; 
-   &lt;Link rel = "StyleSheet" href = "example.css" type = "text / css" /&gt; 
-   &lt;Script&gt; 
-    Function sref () { 
-     Alerte (document.styleSheets [0] .href); 
+```html
+ // sur une machine locale:
+ <Html>
+  <Head>
+   <Link rel = "StyleSheet" href = "example.css" type = "text / css" />
+   <Script>
+    Function sref () {
+     Alerte (document.styleSheets [0] .href);
     }
-   &lt;/ Script&gt; 
-  &lt;/ Head&gt; 
-  &lt;Body&gt; 
-   &lt;Div class = "tonnerre"&gt; Thunder &lt;/ div&gt;
-   &lt;Button onclick = "sref ()"&gt; ss &lt;/ button&gt;
-  &lt;/ Body&gt; 
- &lt;/ Html&gt;
+   </ Script>
+  </ Head>
+  <Body>
+   <Div class = "tonnerre"> Thunder </ div>
+   <Button onclick = "sref ()"> ss </ button>
+  </ Body>
+ </ Html>
 // retourne "fichier: //// C: /Windows/Desktop/example.css
-</pre>
+```
 
-<h2 id="Notes">Remarques</h2>
+## Remarques
 
-<p>Si la feuille de style est une feuille de style liée, la valeur de son attribut est son emplacement. Pour les feuilles de style en ligne, la valeur de cet attribut est <code>NULL</code>.</p>
+Si la feuille de style est une feuille de style liée, la valeur de son attribut est son emplacement. Pour les feuilles de style en ligne, la valeur de cet attribut est `NULL`.
 
-<p>Cette propriété est en lecture seule sur Firefox, Opera, Google Chrome et Safari, et elle est lue / écrite dans Internet Explorer.</p>
+Cette propriété est en lecture seule sur Firefox, Opera, Google Chrome et Safari, et elle est lue / écrite dans Internet Explorer.
 
-<h2 id="Specification">spécification</h2>
+## spécification
 
-<p><a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/stylesheets.html#StyleSheets-StyleSheet-href">Href </a></p>
+[Href](http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/stylesheets.html#StyleSheets-StyleSheet-href)
diff --git a/files/fr/web/api/stylesheet/index.md b/files/fr/web/api/stylesheet/index.md
index 6732be552d..0e51085c08 100644
--- a/files/fr/web/api/stylesheet/index.md
+++ b/files/fr/web/api/stylesheet/index.md
@@ -9,59 +9,38 @@ tags:
   - StyleSheet
 translation_of: Web/API/StyleSheet
 ---
-<div>{{APIRef("CSSOM")}}</div>
+{{APIRef("CSSOM")}}
 
-<p>Un objet qui implémente l'interface <code>StyleSheet</code> représente une seule feuille de style. Les feuilles de style CSS implémenteront également l'interface plus spécialisée {{domxref("CSSStyleSheet")}}.</p>
+Un objet qui implémente l'interface `StyleSheet` représente une seule feuille de style. Les feuilles de style CSS implémenteront également l'interface plus spécialisée {{domxref("CSSStyleSheet")}}.
 
-<h2 id="Properties">Propriétés</h2>
+## Propriétés
 
-<dl>
- <dt>{{domxref("StyleSheet.disabled")}}</dt>
- <dd>Un booléen ({{domxref("Boolean")}}) indiquant si la feuille de style est appliquée ou non.</dd>
- <dt>{{domxref("StyleSheet.href")}} {{readonlyInline}}</dt>
- <dd>Une chaîne de caractères ({{domxref("DOMString")}}) représentant l'emplacement de la feuille de style.</dd>
- <dt>{{domxref("StyleSheet.media")}} {{readonlyInline}}</dt>
- <dd>Une {{domxref("MediaList")}} représentant le média de destination pour les informations de style.</dd>
- <dt>{{domxref("StyleSheet.ownerNode")}} {{readonlyInline}}</dt>
- <dd>Un objet {{domxref("Node")}} qui représente le nœud associant cette feuille de style avec le document courant.</dd>
- <dt>{{domxref("StyleSheet.parentStyleSheet")}} {{readonlyInline}}</dt>
- <dd>Un objet {{domxref("StyleSheet")}} qui inclut l'objet courant si ce dernier possède un parent ou <code>null</code> s'il n'y en a pas.</dd>
- <dt>{{domxref("StyleSheet.title")}} {{readonlyInline}}</dt>
- <dd>Une chaîne de caractères ({{domxref("DOMString")}}) indiquant le titre indicatif de la feuille de style courante.</dd>
- <dt>{{domxref("StyleSheet.type")}} {{readonlyInline}}</dt>
- <dd>Une chaîne de caractères {{domxref("DOMString")}} indiquant le langage de représentation pour cette feuille de style.</dd>
-</dl>
+- {{domxref("StyleSheet.disabled")}}
+  - : Un booléen ({{domxref("Boolean")}}) indiquant si la feuille de style est appliquée ou non.
+- {{domxref("StyleSheet.href")}} {{readonlyInline}}
+  - : Une chaîne de caractères ({{domxref("DOMString")}}) représentant l'emplacement de la feuille de style.
+- {{domxref("StyleSheet.media")}} {{readonlyInline}}
+  - : Une {{domxref("MediaList")}} représentant le média de destination pour les informations de style.
+- {{domxref("StyleSheet.ownerNode")}} {{readonlyInline}}
+  - : Un objet {{domxref("Node")}} qui représente le nœud associant cette feuille de style avec le document courant.
+- {{domxref("StyleSheet.parentStyleSheet")}} {{readonlyInline}}
+  - : Un objet {{domxref("StyleSheet")}} qui inclut l'objet courant si ce dernier possède un parent ou `null` s'il n'y en a pas.
+- {{domxref("StyleSheet.title")}} {{readonlyInline}}
+  - : Une chaîne de caractères ({{domxref("DOMString")}}) indiquant le titre indicatif de la feuille de style courante.
+- {{domxref("StyleSheet.type")}} {{readonlyInline}}
+  - : Une chaîne de caractères {{domxref("DOMString")}} indiquant le langage de représentation pour cette feuille de style.
 
-<h2 id="Specification">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">Commentaire</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSSOM', '#stylesheet', 'StyleSheet')}}</td>
-   <td>{{Spec2('CSSOM')}}</td>
-   <td>Pas de changement depuis {{SpecName('DOM2 Style')}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Style', 'stylesheets.html#StyleSheets-StyleSheet', 'StyleSheet')}}</td>
-   <td>{{Spec2('DOM2 Style')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                    | État                             | Commentaire                                                    |
+| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------------------------------------------------- |
+| {{SpecName('CSSOM', '#stylesheet', 'StyleSheet')}}                                             | {{Spec2('CSSOM')}}         | Pas de changement depuis {{SpecName('DOM2 Style')}}. |
+| {{SpecName('DOM2 Style', 'stylesheets.html#StyleSheets-StyleSheet', 'StyleSheet')}} | {{Spec2('DOM2 Style')}} | Définition initiale.                                           |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.StyleSheet")}}</p>
+{{Compat("api.StyleSheet")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("CSSStyleSheet")}}</li>
-</ul>
+- {{domxref("CSSStyleSheet")}}
diff --git a/files/fr/web/api/stylesheet/media/index.md b/files/fr/web/api/stylesheet/media/index.md
index 5d750c2e9c..1688e1ae3b 100644
--- a/files/fr/web/api/stylesheet/media/index.md
+++ b/files/fr/web/api/stylesheet/media/index.md
@@ -3,31 +3,27 @@ title: StyleSheet.media
 slug: Web/API/StyleSheet/media
 translation_of: Web/API/StyleSheet/media
 ---
-<div>{{APIRef ("CSSOM")}}</div>
+{{APIRef ("CSSOM")}}
 
-<p><strong>Media</strong> spécifie le support de destination prévu pour les informations de style.</p>
+**Media** spécifie le support de destination prévu pour les informations de style.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="eval"><em>Medium</em> = stylesheet.media
-Stylesheet.media = <em>medium</em>
-</pre>
+    Medium = stylesheet.media
+    Stylesheet.media = medium
 
-<h2 id="Parameters">Paramètres</h2>
+## Paramètres
 
-<ul>
- <li><code>medium</code> Est une chaîne décrivant un seul moyen ou une liste séparée par des virgules.</li>
-</ul>
+- `medium` Est une chaîne décrivant un seul moyen ou une liste séparée par des virgules.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre>&lt;Link rel = "StyleSheet" href = "document.css" type = "text / css" media = "screen" /&gt;
-</pre>
+    <Link rel = "StyleSheet" href = "document.css" type = "text / css" media = "screen" />
 
-<h2 id="Notes">Remarques</h2>
+## Remarques
 
-<p>La valeur par défaut pour les médias est "écran".</p>
+La valeur par défaut pour les médias est "écran".
 
-<h2 id="Specification">spécification</h2>
+## spécification
 
-<p>DOM Styles de niveau 2 - FEUILLE DE STYLES</p>
+DOM Styles de niveau 2 - FEUILLE DE STYLES
diff --git a/files/fr/web/api/stylesheet/ownernode/index.md b/files/fr/web/api/stylesheet/ownernode/index.md
index a0f97236f8..170945220a 100644
--- a/files/fr/web/api/stylesheet/ownernode/index.md
+++ b/files/fr/web/api/stylesheet/ownernode/index.md
@@ -3,37 +3,37 @@ title: StyleSheet.ownerNode
 slug: Web/API/StyleSheet/ownerNode
 translation_of: Web/API/StyleSheet/ownerNode
 ---
-<div>{{APIRef ("CSSOM")}}</div>
+{{APIRef ("CSSOM")}}
 
-<p><strong>OwnerNode</strong> renvoie le noeud qui associe cette feuille de style au document.</p>
+**OwnerNode** renvoie le noeud qui associe cette feuille de style au document.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="eval"><em>ObjRef</em> = stylesheet.ownerNode
-</pre>
+    ObjRef = stylesheet.ownerNode
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush: html">&lt;Html&gt;
- &lt;Head&gt;
-  &lt;Link rel = "StyleSheet" href = "example.css" type = "text / css" /&gt;
-  &lt;Script&gt;
+```html
+<Html>
+ <Head>
+  <Link rel = "StyleSheet" href = "example.css" type = "text / css" />
+  <Script>
    Function stilo () {
     Alerte (document.styleSheets [0] .ownerNode);
    }
-  &lt;/ Script&gt; 
- &lt;/ Head&gt;
- &lt;Body&gt;
-   &lt;Button onclick = "stilo ()"&gt; ss &lt;/ button&gt;
- &lt;/ Body&gt;
-&lt;/ Html&gt;
+  </ Script>
+ </ Head>
+ <Body>
+   <Button onclick = "stilo ()"> ss </ button>
+ </ Body>
+</ Html>
 // affiche "objet HTMLLinkElement"
-</pre>
+```
 
-<h2 id="Notes">Remarques</h2>
+## Remarques
 
-<p>Pour HTML, <strong>ownerNode</strong> peut être l' élément <a href="en/LINK">LINK</a> ou <a href="en/STYLE">STYLE</a> correspondant . Pour XML, il peut s'agir des instructions de traitement de liaison. Pour les feuilles de style qui sont incluses dans d'autres feuilles de style, la valeur de cet attribut est NULL.</p>
+Pour HTML, **ownerNode** peut être l' élément [LINK](en/LINK) ou [STYLE](en/STYLE) correspondant . Pour XML, il peut s'agir des instructions de traitement de liaison. Pour les feuilles de style qui sont incluses dans d'autres feuilles de style, la valeur de cet attribut est NULL.
 
-<h2 id="Specification">spécification</h2>
+## spécification
 
-<p>DOM Styles de niveau 2 - FEUILLE DE STYLES</p>
+DOM Styles de niveau 2 - FEUILLE DE STYLES
diff --git a/files/fr/web/api/stylesheet/parentstylesheet/index.md b/files/fr/web/api/stylesheet/parentstylesheet/index.md
index 1f0d852edf..873c73a78f 100644
--- a/files/fr/web/api/stylesheet/parentstylesheet/index.md
+++ b/files/fr/web/api/stylesheet/parentstylesheet/index.md
@@ -3,32 +3,29 @@ title: StyleSheet.parentStyleSheet
 slug: Web/API/StyleSheet/parentStyleSheet
 translation_of: Web/API/StyleSheet/parentStyleSheet
 ---
-<div>
-<div>{{APIRef ("CSSOM")}}</div>
-</div>
+{{APIRef ("CSSOM")}}
 
-<p>Renvoie la feuille de style qui inclut celle-ci, le cas échéant.</p>
+Renvoie la feuille de style qui inclut celle-ci, le cas échéant.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>ObjRef</em> = stylesheet.parentStyleSheet
-</pre>
+    ObjRef = stylesheet.parentStyleSheet
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush:js">// trouve la feuille de style de niveau supérieur
+```js
+// trouve la feuille de style de niveau supérieur
 If (stylesheet.parentStyleSheet) {
     Feuille = stylesheet.parentStyleSheet;
 } autre {
     Feuille = feuille de style;
-}</pre>
+}
+```
 
-<h2 id="Notes">Remarques</h2>
+## Remarques
 
-<p>Cette propriété renvoie NULL est la feuille de style actuelle est une feuille de style de haut niveau ou si l'inclusion de la feuille de style n'est pas prise en charge.</p>
+Cette propriété renvoie NULL est la feuille de style actuelle est une feuille de style de haut niveau ou si l'inclusion de la feuille de style n'est pas prise en charge.
 
-<h2 id="Specification">spécification</h2>
+## spécification
 
-<ul>
- <li><a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/stylesheets.html#StyleSheets-StyleSheet-parentStyleSheet">ParentStyleSheet </a></li>
-</ul>
+- [ParentStyleSheet](http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/stylesheets.html#StyleSheets-StyleSheet-parentStyleSheet)
diff --git a/files/fr/web/api/stylesheet/title/index.md b/files/fr/web/api/stylesheet/title/index.md
index 2892d25b2f..2be9d11f7a 100644
--- a/files/fr/web/api/stylesheet/title/index.md
+++ b/files/fr/web/api/stylesheet/title/index.md
@@ -3,18 +3,14 @@ title: StyleSheet.title
 slug: Web/API/StyleSheet/title
 translation_of: Web/API/StyleSheet/title
 ---
-<div>
-<div>{{APIRef ("CSSOM")}}</div>
-</div>
+{{APIRef ("CSSOM")}}
 
-<p><code>title</code> Renvoie le titre de conseil de la feuille de style actuelle.</p>
+`title` Renvoie le titre de conseil de la feuille de style actuelle.
 
-<h2 id="Notes">Remarques</h2>
+## Remarques
 
-<p>Le titre est souvent spécifié dans {{domxref ("StyleSheet / OwnerNode", "ownerNode")}}.</p>
+Le titre est souvent spécifié dans {{domxref ("StyleSheet / OwnerNode", "ownerNode")}}.
 
-<h2 id="Specification">spécification</h2>
+## spécification
 
-<ul>
- <li><a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/stylesheets.html#StyleSheets-StyleSheet-title">Titre </a></li>
-</ul>
+- [Titre](http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/stylesheets.html#StyleSheets-StyleSheet-title)
diff --git a/files/fr/web/api/stylesheet/type/index.md b/files/fr/web/api/stylesheet/type/index.md
index 3b2ce12fe1..22b14eccb1 100644
--- a/files/fr/web/api/stylesheet/type/index.md
+++ b/files/fr/web/api/stylesheet/type/index.md
@@ -3,20 +3,18 @@ title: StyleSheet.type
 slug: Web/API/StyleSheet/type
 translation_of: Web/API/StyleSheet/type
 ---
-<div>{{APIRef ("CSSOM")}}</div>
+{{APIRef ("CSSOM")}}
 
-<p>Type spécifie la langue de la feuille de style pour cette feuille de style.</p>
+Type spécifie la langue de la feuille de style pour cette feuille de style.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="eval"><em>String</em> = stylesheet.type
-</pre>
+    String = stylesheet.type
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre> Ss.type = "text / css";
-</pre>
+     Ss.type = "text / css";
 
-<h2 id="Specification">spécification</h2>
+## spécification
 
-<p><a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/stylesheets.html#StyleSheets-StyleSheet-type">type </a></p>
+[type](http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/stylesheets.html#StyleSheets-StyleSheet-type)
diff --git a/files/fr/web/api/stylesheetlist/index.md b/files/fr/web/api/stylesheetlist/index.md
index 18336eada2..1714af3627 100644
--- a/files/fr/web/api/stylesheetlist/index.md
+++ b/files/fr/web/api/stylesheetlist/index.md
@@ -8,15 +8,16 @@ tags:
   - NeedsUpdate
 translation_of: Web/API/StyleSheetList
 ---
-<p>{{APIRef("CSSOM")}}</p>
+{{APIRef("CSSOM")}}
 
-<p>L'interface StyleSheetList représente une liste de {{domxref("StyleSheet")}}.</p>
+L'interface StyleSheetList représente une liste de {{domxref("StyleSheet")}}.
 
-<p>Il s'agit d'un objet de type array, mais qui ne peut pas être itéré à l'aide de la méthode {{jsxref("Array")}}. Il peut néanmoins être itéré dans une boucle {{jsxref("Statements/for", "for")}} standard en utilisant ses indices, ou converti en un {{jsxref("Array")}}. </p>
+Il s'agit d'un objet de type array, mais qui ne peut pas être itéré à l'aide de la méthode {{jsxref("Array")}}. Il peut néanmoins être itéré dans une boucle {{jsxref("Statements/for", "for")}} standard en utilisant ses indices, ou converti en un {{jsxref("Array")}}.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">// Récupère toutes les règles CSS du document en cours en utilisant les méthodes de Array
+```js
+// Récupère toutes les règles CSS du document en cours en utilisant les méthodes de Array
 var allCSS = [].slice.call(document.styleSheets)
                      .reduce(function (prev, styleSheet) {
         if (styleSheet.cssRules) {
@@ -28,4 +29,5 @@ var allCSS = [].slice.call(document.styleSheets)
         } else {
             return prev;
         }
-    });</pre>
+    });
+```
diff --git a/files/fr/web/api/subtlecrypto/digest/index.md b/files/fr/web/api/subtlecrypto/digest/index.md
index eee3e4668d..2a3b3b4098 100644
--- a/files/fr/web/api/subtlecrypto/digest/index.md
+++ b/files/fr/web/api/subtlecrypto/digest/index.md
@@ -3,73 +3,63 @@ title: SubtleCrypto.digest()
 slug: Web/API/SubtleCrypto/digest
 translation_of: Web/API/SubtleCrypto/digest
 ---
-<div>{{APIRef("Web Crypto API")}}{{SecureContext_header}}</div>
+{{APIRef("Web Crypto API")}}{{SecureContext_header}}
 
-<p>La méthode <code><strong>digest()</strong></code> de l'interface {{domxref("SubtleCrypto")}} génère un {{Glossary("digest")}} de la donnée fournie. Un condensé est une petite valeur de taille fixe issue d'une donnée de taille variable. Les condensés cryptographiques doivent résister à la collision, ce qui signifie qu'il doit être très difficile d'obtenir le même condensé à partir de deux entrés différentes.</p>
+La méthode **`digest()`** de l'interface {{domxref("SubtleCrypto")}} génère un {{Glossary("digest")}} de la donnée fournie. Un condensé est une petite valeur de taille fixe issue d'une donnée de taille variable. Les condensés cryptographiques doivent résister à la collision, ce qui signifie qu'il doit être très difficile d'obtenir le même condensé à partir de deux entrés différentes.
 
-<p>Il prend en argument un identifiant pour l'algorithme de condensé et les données à traiter. Il retourne une {{jsxref("Promise")}} qui contiendra le condensé.</p>
+Il prend en argument un identifiant pour l'algorithme de condensé et les données à traiter. Il retourne une {{jsxref("Promise")}} qui contiendra le condensé.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">const digest = <em>crypto</em><code>.subtle.digest(<em>algorithm</em>, <em>data</em>)</code>;
-</pre>
+    const digest = crypto.subtle.digest(algorithm, data);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<ul>
- <li><em><code>algorithm</code></em> est une {{domxref("DOMString")}} indiquant la fonction de condensé à utiliser. Les valeurs possibles sont:
+- _`algorithm`_ est une {{domxref("DOMString")}} indiquant la fonction de condensé à utiliser. Les valeurs possibles sont:
 
-  <ul>
-   <li><code>SHA-1</code> (ne pas utiliser pour des applications cryptographiques)</li>
-   <li><code>SHA-256</code></li>
-   <li><code>SHA-384</code></li>
-   <li><code>SHA-512</code>.</li>
-  </ul>
- </li>
- <li><em><code>data</code></em> est un {{jsxref("ArrayBuffer")}} ou un {{domxref("ArrayBufferView")}} contenant les données à traiter.</li>
-</ul>
+  - `SHA-1` (ne pas utiliser pour des applications cryptographiques)
+  - `SHA-256`
+  - `SHA-384`
+  - `SHA-512`.
 
-<h3 id="Valeur_retournée">Valeur retournée</h3>
+- _`data`_ est un {{jsxref("ArrayBuffer")}} ou un {{domxref("ArrayBufferView")}} contenant les données à traiter.
 
-<ul>
- <li><code><em>digest</em></code> est une {{jsxref("Promise")}} pour accéder {{jsxref("ArrayBuffer")}} au condensé.</li>
-</ul>
+### Valeur retournée
 
-<h2 id="Algorithmes_supportés">Algorithmes supportés</h2>
+- `digest` est une {{jsxref("Promise")}} pour accéder {{jsxref("ArrayBuffer")}} au condensé.
 
-<p>Les algorithmes de condensé, aussi connue sous le nom de <a href="/fr/docs/Glossaire/Fonction_de_hachage_cryptographique">fonctions de hachage cryptographique</a>, transforme un bloque de données de longueur arbitraire dans un résultat de taille fixe, souvent plus petit que l'entré. Ils ont de nombreuses utilisations en cryptographie.</p>
+## Algorithmes supportés
 
-<h3 id="SHA-1">SHA-1</h3>
+Les algorithmes de condensé, aussi connue sous le nom de [fonctions de hachage cryptographique](/fr/docs/Glossaire/Fonction_de_hachage_cryptographique), transforme un bloque de données de longueur arbitraire dans un résultat de taille fixe, souvent plus petit que l'entré. Ils ont de nombreuses utilisations en cryptographie.
 
-<p>Cet algorithme est spécifié dans <a href="https://nvlpubs.nist.gov/nistpubs/FIPS/NIST.FIPS.180-4.pdf">FIPS 180-4</a>, section 6.1, et produit un résultat de 160 bits de long.</p>
+### SHA-1
 
-<div class="warning">
-<p><strong>Attention :</strong> Cet algorithme est maintenant considérer comme vulnérable et ne doit pas être utilisé pour des applications cryptographiques.</p>
-</div>
+Cet algorithme est spécifié dans [FIPS 180-4](https://nvlpubs.nist.gov/nistpubs/FIPS/NIST.FIPS.180-4.pdf), section 6.1, et produit un résultat de 160 bits de long.
 
-<h3 id="SHA-256">SHA-256</h3>
+> **Attention :** Cet algorithme est maintenant considérer comme vulnérable et ne doit pas être utilisé pour des applications cryptographiques.
 
-<p>Cet algorithme est spécifié dans <a href="https://nvlpubs.nist.gov/nistpubs/FIPS/NIST.FIPS.180-4.pdf">FIPS 180-4</a>, section 6.2, et produit un résultat de 256 bits de long.</p>
+### SHA-256
 
-<h3 id="SHA-384">SHA-384</h3>
+Cet algorithme est spécifié dans [FIPS 180-4](https://nvlpubs.nist.gov/nistpubs/FIPS/NIST.FIPS.180-4.pdf), section 6.2, et produit un résultat de 256 bits de long.
 
-<p>Cet algorithme est spécifié dans <a href="https://nvlpubs.nist.gov/nistpubs/FIPS/NIST.FIPS.180-4.pdf">FIPS 180-4</a>, section 6.5, et produit un résultat de 384 bits de long.</p>
+### SHA-384
 
-<h3 id="SHA-512">SHA-512</h3>
+Cet algorithme est spécifié dans [FIPS 180-4](https://nvlpubs.nist.gov/nistpubs/FIPS/NIST.FIPS.180-4.pdf), section 6.5, et produit un résultat de 384 bits de long.
 
-<p>Cet algorithme est spécifié dans <a href="https://nvlpubs.nist.gov/nistpubs/FIPS/NIST.FIPS.180-4.pdf">FIPS 180-4</a>, section 6.4, et produit un résultat de 512 bits de long.</p>
+### SHA-512
 
-<div class="note">
-<p><strong>Note :</strong> Si vous cherchez à créer un condensé pour authentifié un message (<a href="/fr/docs/Glossary/HMAC">HMAC</a>), vous aurez plutôt besoin de <a href="/en-US/docs/Web/API/SubtleCrypto/sign#HMAC">SubtleCrypto.sign()</a>.</p>
-</div>
+Cet algorithme est spécifié dans [FIPS 180-4](https://nvlpubs.nist.gov/nistpubs/FIPS/NIST.FIPS.180-4.pdf), section 6.4, et produit un résultat de 512 bits de long.
 
-<h2 id="Exemples">Exemples</h2>
+> **Note :** Si vous cherchez à créer un condensé pour authentifié un message ([HMAC](/fr/docs/Glossary/HMAC)), vous aurez plutôt besoin de [SubtleCrypto.sign()](/en-US/docs/Web/API/SubtleCrypto/sign#HMAC).
 
-<h3 id="Exemple_basique">Exemple basique</h3>
+## Exemples
 
-<p>Cet exemple encode un message, puis calcule le condensé avec SHA-256, enfin affiche la longueur du résultat.</p>
+### Exemple basique
 
-<pre class="brush: js">const text = 'Un obscur message venant du le système S-K, votre majesté. Ses habitants le nomment la planète Terre.';
+Cet exemple encode un message, puis calcule le condensé avec SHA-256, enfin affiche la longueur du résultat.
+
+```js
+const text = 'Un obscur message venant du le système S-K, votre majesté. Ses habitants le nomment la planète Terre.';
 
 async function digestMessage(message) {
   const encoder = new TextEncoder();
@@ -80,54 +70,40 @@ async function digestMessage(message) {
 
 const digestBuffer = await digestMessage(text);
 console.log(digestBuffer.byteLength);
-</pre>
+```
 
-<h3 id="Convertir_un_condensé_vers_une_chaîne_hexadécimale">Convertir un condensé vers une chaîne hexadécimale</h3>
+### Convertir un condensé vers une chaîne hexadécimale
 
-<p>Le condensé est retourné sous forme d'un <code>ArrayBuffer</code>, mais la comparaison et l'affichage se fait souvent avec des chaînes hexadécimales. Cet exemple calcule un condensé puis converti l'<code>ArrayBuffer</code> vers une chaîne hexadécimale.</p>
+Le condensé est retourné sous forme d'un `ArrayBuffer`, mais la comparaison et l'affichage se fait souvent avec des chaînes hexadécimales. Cet exemple calcule un condensé puis converti l'`ArrayBuffer` vers une chaîne hexadécimale.
 
-<pre class="brush: js">const text = 'Un obscur message venant du le système S-K, votre majesté. Ses habitants le nomment la planète Terre.';
+```js
+const text = 'Un obscur message venant du le système S-K, votre majesté. Ses habitants le nomment la planète Terre.';
 
 async function digestMessage(message) {
   const msgUint8 = new TextEncoder().encode(message);                           // encode comme (utf-8) Uint8Array
   const hashBuffer = await crypto.subtle.digest('SHA-256', msgUint8);           // fait le condensé
   const hashArray = Array.from(new Uint8Array(hashBuffer));                     // convertit le buffer en tableau d'octet
-  const hashHex = hashArray.map(b =&gt; b.toString(16).padStart(2, '0')).join(''); // convertit le tableau en chaîne hexadélimale
+  const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join(''); // convertit le tableau en chaîne hexadélimale
   return hashHex;
 }
 
 const digestHex = await digestMessage(text);
 console.log(digestHex);
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécifications</th>
-   <th scope="col">Statue</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Web Crypto API', '#dfn-SubtleCrypto-method-digest', 'SubtleCrypto.digest()')}}</td>
-   <td>{{Spec2('Web Crypto API')}}</td>
-   <td>Définition intiale</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.SubtleCrypto.digest")}}</p>
-
-<div class="note">
-<p><strong>Note :</strong> Dans Chrome 60, une fonctionnalité a été ajoutée qui désactive <strong>crypto.subtle</strong> pour les connexions non TLS.</p>
-</div>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="https://www.chromium.org/Home/chromium-security/prefer-secure-origins-for-powerful-new-features">(en) Chromium secure origins specification</a></li>
- <li><a href="https://nvlpubs.nist.gov/nistpubs/FIPS/NIST.FIPS.180-4.pdf" rel="noopener">(en) FIPS 180-4</a> spécifie les algorithmes de condensé de la famille SHA.</li>
-</ul>
+```
+
+## Spécifications
+
+| Spécifications                                                                                                           | Statue                               | Commentaire        |
+| ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ------------------ |
+| {{SpecName('Web Crypto API', '#dfn-SubtleCrypto-method-digest', 'SubtleCrypto.digest()')}} | {{Spec2('Web Crypto API')}} | Définition intiale |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.SubtleCrypto.digest")}}
+
+> **Note :** Dans Chrome 60, une fonctionnalité a été ajoutée qui désactive **crypto.subtle** pour les connexions non TLS.
+
+## Voir aussi
+
+- [(en) Chromium secure origins specification](https://www.chromium.org/Home/chromium-security/prefer-secure-origins-for-powerful-new-features)
+- [(en) FIPS 180-4](https://nvlpubs.nist.gov/nistpubs/FIPS/NIST.FIPS.180-4.pdf) spécifie les algorithmes de condensé de la famille SHA.
diff --git a/files/fr/web/api/subtlecrypto/index.md b/files/fr/web/api/subtlecrypto/index.md
index b9cca851e9..dc6bb3bfe3 100644
--- a/files/fr/web/api/subtlecrypto/index.md
+++ b/files/fr/web/api/subtlecrypto/index.md
@@ -14,285 +14,269 @@ tags:
   - Web Crypto API
 translation_of: Web/API/SubtleCrypto
 ---
-<div>{{APIRef("Web Crypto API")}}{{SecureContext_header}}</div>
+{{APIRef("Web Crypto API")}}{{SecureContext_header}}
 
-<p>The <code><strong>SubtleCrypto</strong></code> interface of the <a href="/en-US/docs/Web/API/Web_Crypto_API">Web Crypto API</a> provides a number of low-level cryptographic functions. Access to the features of <code>SubtleCrypto</code> is obtained through the {{domxref("Crypto.subtle", "subtle")}} property of the {{domxref("Crypto")}} object you get from {{domxref("Window.crypto")}}.</p>
+The **`SubtleCrypto`** interface of the [Web Crypto API](/en-US/docs/Web/API/Web_Crypto_API) provides a number of low-level cryptographic functions. Access to the features of `SubtleCrypto` is obtained through the {{domxref("Crypto.subtle", "subtle")}} property of the {{domxref("Crypto")}} object you get from {{domxref("Window.crypto")}}.
 
-<div class="warning">
-<p><strong>Warning:</strong> This API provides a number of low-level cryptographic primitives. It's very easy to misuse them, and the pitfalls involved can be very subtle.</p>
+> **Attention :** This API provides a number of low-level cryptographic primitives. It's very easy to misuse them, and the pitfalls involved can be very subtle.
+>
+> Even assuming you use the basic cryptographic functions correctly, secure key management and overall security system design are extremely hard to get right, and are generally the domain of specialist security experts.
+>
+> Errors in security system design and implementation can make the security of the system completely ineffective.
+>
+> **If you're not sure you know what you are doing, you probably shouldn't be using this API.**
 
-<p>Even assuming you use the basic cryptographic functions correctly, secure key management and overall security system design are extremely hard to get right, and are generally the domain of specialist security experts.</p>
+## Properties
 
-<p>Errors in security system design and implementation can make the security of the system completely ineffective.</p>
+_This interface doesn't inherit any properties, as it has no parent interface._
 
-<p><strong>If you're not sure you know what you are doing, you probably shouldn't be using this API.</strong></p>
-</div>
+## Methods
 
-<h2 id="Properties">Properties</h2>
+_This interface doesn't inherit any methods, as it has no parent interface._
 
-<p><em>This interface doesn't inherit any properties, as it has no parent interface.</em></p>
+- {{domxref("SubtleCrypto.encrypt()")}}
+  - : Returns a {{jsxref("Promise")}} that fufills with the encrypted data corresponding to the clear text, algorithm, and key given as parameters.
+- {{domxref("SubtleCrypto.decrypt()")}}
+  - : Returns a {{jsxref("Promise")}} that fulfills with the clear data corresponding to the encrypted text, algorithm, and key given as parameters.
+- {{domxref("SubtleCrypto.sign()")}}
+  - : Returns a {{jsxref("Promise")}} that fulfills with the signature corresponding to the text, algorithm, and key given as parameters.
+- {{domxref("SubtleCrypto.verify()")}}
+  - : Returns a {{jsxref("Promise")}} that fulfills with a {{jsxref("Boolean")}} value indicating if the signature given as a parameter matches the text, algorithm, and key that are also given as parameters.
+- {{domxref("SubtleCrypto.digest()")}}
+  - : Returns a {{jsxref("Promise")}} that fulfills with a digest generated from the algorithm and text given as parameters.
+- {{domxref("SubtleCrypto.generateKey()")}}
+  - : Returns a {{jsxref("Promise")}} that fulfills with a newly-generated {{domxref("CryptoKey")}}, for symmetrical algorithms, or a {{domxref("CryptoKeyPair")}}, containing two newly generated keys, for asymmetrical algorithms. These will match the algorithm, usages, and extractability given as parameters.
+- {{domxref("SubtleCrypto.deriveKey()")}}
+  - : Returns a {{jsxref("Promise")}} that fulfills with a newly generated {{domxref("CryptoKey")}} derived from the master key and specific algorithm given as parameters.
+- {{domxref("SubtleCrypto.deriveBits()")}}
+  - : Returns a {{jsxref("Promise")}} that fulfills with a newly generated buffer of pseudo-random bits derived from the master key and specific algorithm given as parameters.
+- {{domxref("SubtleCrypto.importKey()")}}
+  - : Returns a {{jsxref("Promise")}} that fulfills with a {{domxref("CryptoKey")}} corresponding to the format, the algorithm, raw key data, usages, and extractability given as parameters.
+- {{domxref("SubtleCrypto.exportKey()")}}
+  - : Returns a {{jsxref("Promise")}} that fulfills with a buffer containing the key in the requested format.
+- {{domxref("SubtleCrypto.wrapKey()")}}
+  - : Returns a {{jsxref("Promise")}} that fulfills with a wrapped symmetric key for usage (transfer and storage) in insecure environments. The wrapped key matches the format specified in the given parameters, and wrapping is done by the given wrapping key, using the specified algorithm.
+- {{domxref("SubtleCrypto.unwrapKey()")}}
+  - : Returns a {{jsxref("Promise")}} that fulfills with a {{domxref("CryptoKey")}} corresponding to the wrapped key given in the parameter.
 
-<h2 id="Methods">Methods</h2>
+## Using SubtleCrypto
 
-<p><em>This interface doesn't inherit any methods, as it has no parent interface.</em></p>
+We can split the functions implemented by this API into two groups: cryptography functions and key management functions.
 
-<dl>
- <dt>{{domxref("SubtleCrypto.encrypt()")}}</dt>
- <dd>Returns a {{jsxref("Promise")}} that fufills with the encrypted data corresponding to the clear text, algorithm, and key given as parameters.</dd>
- <dt>{{domxref("SubtleCrypto.decrypt()")}}</dt>
- <dd>Returns a {{jsxref("Promise")}} that fulfills with the clear data corresponding to the encrypted text, algorithm, and key given as parameters.</dd>
- <dt>{{domxref("SubtleCrypto.sign()")}}</dt>
- <dd>Returns a {{jsxref("Promise")}} that fulfills with the signature corresponding to the text, algorithm, and key given as parameters.</dd>
- <dt>{{domxref("SubtleCrypto.verify()")}}</dt>
- <dd>Returns a {{jsxref("Promise")}} that fulfills with a {{jsxref("Boolean")}} value indicating if the signature given as a parameter matches the text, algorithm, and key that are also given as parameters.</dd>
- <dt>{{domxref("SubtleCrypto.digest()")}}</dt>
- <dd>Returns a {{jsxref("Promise")}} that fulfills with a digest generated from the algorithm and text given as parameters.</dd>
- <dt>{{domxref("SubtleCrypto.generateKey()")}}</dt>
- <dd>Returns a {{jsxref("Promise")}} that fulfills with a newly-generated {{domxref("CryptoKey")}}, for symmetrical algorithms, or a {{domxref("CryptoKeyPair")}}, containing two newly generated keys, for asymmetrical algorithms. These will match the algorithm, usages, and extractability given as parameters.</dd>
- <dt>{{domxref("SubtleCrypto.deriveKey()")}}</dt>
- <dd>Returns a {{jsxref("Promise")}} that fulfills with a newly generated {{domxref("CryptoKey")}} derived from the master key and specific algorithm given as parameters.</dd>
- <dt>{{domxref("SubtleCrypto.deriveBits()")}}</dt>
- <dd>Returns a {{jsxref("Promise")}} that fulfills with a newly generated buffer of pseudo-random bits derived from the master key and specific algorithm given as parameters.</dd>
- <dt>{{domxref("SubtleCrypto.importKey()")}}</dt>
- <dd>Returns a {{jsxref("Promise")}} that fulfills with a {{domxref("CryptoKey")}} corresponding to the format, the algorithm, raw key data, usages, and extractability given as parameters.</dd>
- <dt>{{domxref("SubtleCrypto.exportKey()")}}</dt>
- <dd>Returns a {{jsxref("Promise")}} that fulfills with a buffer containing the key in the requested format.</dd>
- <dt>{{domxref("SubtleCrypto.wrapKey()")}}</dt>
- <dd>Returns a {{jsxref("Promise")}} that fulfills with a wrapped symmetric key for usage (transfer and storage) in insecure environments. The wrapped key matches the format specified in the given parameters, and wrapping is done by the given wrapping key, using the specified algorithm.</dd>
- <dt>{{domxref("SubtleCrypto.unwrapKey()")}}</dt>
- <dd>Returns a {{jsxref("Promise")}} that fulfills with a {{domxref("CryptoKey")}} corresponding to the wrapped key given in the parameter.</dd>
-</dl>
+### Cryptography functions
 
-<h2 id="Using_SubtleCrypto">Using SubtleCrypto</h2>
+These are the functions you can use to implement security features such as privacy and authentication in a system. The `SubtleCrypto` API provides the following cryptography functions:
 
-<p>We can split the functions implemented by this API into two groups: cryptography functions and key management functions.</p>
+\* {{DOMxRef("SubtleCrypto.sign","sign()")}} and {{DOMxRef("SubtleCrypto.verify","verify()")}}: create and verify digital signatures.
+\* {{DOMxRef("SubtleCrypto.encrypt","encrypt()")}} and {{DOMxRef("SubtleCrypto.decrypt","decrypt()")}}: encrypt and decrypt data. \* {{DOMxRef("SubtleCrypto.digest","digest()")}}: create a fixed-length, collision-resistant digest of some data.
 
-<h3 id="Cryptography_functions">Cryptography functions</h3>
+### Key management functions
 
-<p>These are the functions you can use to implement security features such as privacy and authentication in a system. The <code>SubtleCrypto</code> API provides the following cryptography functions:</p>
+Except for {{DOMxRef("SubtleCrypto.digest","digest()")}}, all the cryptography functions in the API use cryptographic keys. In the `SubtleCrypto` API a cryptographic key is represented using a {{DOMxRef("CryptoKey","CryptoKey")}} object. To perform operations like signing and encrypting, you pass a {{DOMxRef("CryptoKey","CryptoKey")}} object into the {{DOMxRef("SubtleCrypto.sign","sign()")}} or {{DOMxRef("SubtleCrypto.encrypt","encrypt()")}} function.
 
-<p>* {{DOMxRef("SubtleCrypto.sign","sign()")}} and {{DOMxRef("SubtleCrypto.verify","verify()")}}: create and verify digital signatures.<br>
- * {{DOMxRef("SubtleCrypto.encrypt","encrypt()")}} and {{DOMxRef("SubtleCrypto.decrypt","decrypt()")}}: encrypt and decrypt data.<br>
- * {{DOMxRef("SubtleCrypto.digest","digest()")}}: create a fixed-length, collision-resistant digest of some data.</p>
+#### Generating and deriving keys
 
-<h3 id="Key_management_functions">Key management functions</h3>
+The {{DOMxRef("SubtleCrypto.generateKey","generateKey()")}} and {{DOMxRef("SubtleCrypto.deriveKey","deriveKey()")}} functions both create a new {{DOMxRef("CryptoKey")}} object.
 
-<p>Except for {{DOMxRef("SubtleCrypto.digest","digest()")}}, all the cryptography functions in the API use cryptographic keys. In the <code>SubtleCrypto</code> API a cryptographic key is represented using a {{DOMxRef("CryptoKey","CryptoKey")}} object. To perform operations like signing and encrypting, you pass a {{DOMxRef("CryptoKey","CryptoKey")}} object into the {{DOMxRef("SubtleCrypto.sign","sign()")}} or {{DOMxRef("SubtleCrypto.encrypt","encrypt()")}} function.</p>
+The difference is that `generateKey()` will generate a new distinct key value each time you call it, while `deriveKey()` derives a key from some initial keying material. If you provide the same keying material to two separate calls to `deriveKey()`, you will get two `CryptoKey` objects that have the same underlying value. This is useful if, for example, you want to derive an encryption key from a password and later derive the same key from the same password to decrypt the data.
 
-<h4 id="Generating_and_deriving_keys">Generating and deriving keys</h4>
+#### Importing and exporting keys
 
-<p>The {{DOMxRef("SubtleCrypto.generateKey","generateKey()")}} and {{DOMxRef("SubtleCrypto.deriveKey","deriveKey()")}} functions both create a new {{DOMxRef("CryptoKey")}} object.</p>
+To make keys available outside your app, you need to export the key, and that's what {{DOMxRef("SubtleCrypto.exportKey","exportKey()")}} is for. You can choose one of a number of export formats.
 
-<p>The difference is that <code>generateKey()</code> will generate a new distinct key value each time you call it, while <code>deriveKey()</code> derives a key from some initial keying material. If you provide the same keying material to two separate calls to <code>deriveKey()</code>, you will get two <code>CryptoKey</code> objects that have the same underlying value. This is useful if, for example, you want to derive an encryption key from a password and later derive the same key from the same password to decrypt the data.</p>
+The inverse of `exportKey()` is {{DOMxRef("SubtleCrypto.importKey","importKey()")}}. You can import keys from other systems, and support for standard formats like [PKCS #8](https://tools.ietf.org/html/rfc5208) and [JSON Web Key](https://tools.ietf.org/html/rfc7517) helps you do this. The `exportKey()` function exports the key in an unencrypted format.
 
-<h4 id="Importing_and_exporting_keys">Importing and exporting keys</h4>
+If the key is sensitive you should use {{DOMxRef("SubtleCrypto.wrapKey","wrapKey()")}}, which exports the key and then encrypts it using another key; the API calls a "key-wrapping key".
 
-<p>To make keys available outside your app, you need to export the key, and that's what {{DOMxRef("SubtleCrypto.exportKey","exportKey()")}} is for. You can choose one of a number of export formats.</p>
+The inverse of `wrapKey()` is {{DOMxRef("SubtleCrypto.unwrapKey","unwrapKey()")}}, which decrypts then imports the key.
 
-<p>The inverse of <code>exportKey()</code> is {{DOMxRef("SubtleCrypto.importKey","importKey()")}}. You can import keys from other systems, and support for standard formats like <a href="https://tools.ietf.org/html/rfc5208">PKCS #8</a> and <a href="https://tools.ietf.org/html/rfc7517">JSON Web Key</a> helps you do this. The <code>exportKey()</code> function exports the key in an unencrypted format.</p>
+#### Storing keys
 
-<p>If the key is sensitive you should use {{DOMxRef("SubtleCrypto.wrapKey","wrapKey()")}}, which exports the key and then encrypts it using another key; the API calls a "key-wrapping key".</p>
+`CryptoKey` objects can be stored using the [structured clone algorithm](/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm), meaning that you can store and retrieve them using standard web storage APIs. The specification expects that most developers will use the [IndexedDB API](/en-US/docs/Web/API/IndexedDB_API) to store `CryptoKey` objects.
 
-<p>The inverse of <code>wrapKey()</code> is {{DOMxRef("SubtleCrypto.unwrapKey","unwrapKey()")}}, which decrypts then imports the key.</p>
+### Supported algorithms
 
-<h4 id="Storing_keys">Storing keys</h4>
+The cryptographic functions provided by the Web Crypto API can be performed by one or more different _cryptographic algorithms_: the `algorithm` argument to the function indicates which algorithm to use. Some algorithms need extra parameters: in these cases the `algorithm` argument is a dictionary object that includes the extra parameters.
 
-<p><code>CryptoKey</code> objects can be stored using the <a href="/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm">structured clone algorithm</a>, meaning that you can store and retrieve them using standard web storage APIs. The specification expects that most developers will use the <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB API</a> to store <code>CryptoKey</code> objects.</p>
-
-<h3 id="Supported_algorithms">Supported algorithms</h3>
-
-<p>The cryptographic functions provided by the Web Crypto API can be performed by one or more different <em>cryptographic algorithms</em>: the <code>algorithm</code> argument to the function indicates which algorithm to use. Some algorithms need extra parameters: in these cases the <code>algorithm</code> argument is a dictionary object that includes the extra parameters.</p>
-
-<p>The table below summarises which algorithms are suitable for which cryptographic operations:</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="row"></th>
-   <th scope="col">
-    <p><a href="/en-US/docs/Web/API/SubtleCrypto/sign">sign()</a></p>
-
-    <p><a href="/en-US/docs/Web/API/SubtleCrypto/verify">verify()</a></p>
-   </th>
-   <th scope="col">
-    <p><a href="/en-US/docs/Web/API/SubtleCrypto/encrypt">encrypt()</a></p>
-
-    <p><a href="/en-US/docs/Web/API/SubtleCrypto/decrypt">decrypt()</a></p>
-   </th>
-   <th scope="col"><a href="/en-US/docs/Web/API/SubtleCrypto/digest">digest()</a></th>
-   <th scope="col">
-    <p><a href="/en-US/docs/Web/API/SubtleCrypto/deriveBits">deriveBits()</a></p>
-
-    <p><a href="/en-US/docs/Web/API/SubtleCrypto/deriveKey">deriveKey()</a></p>
-   </th>
-   <th scope="col">
-    <p><a href="/en-US/docs/Web/API/SubtleCrypto/wrapKey">wrapKey()</a></p>
-
-    <p><a href="/en-US/docs/Web/API/SubtleCrypto/unwrapKey">unwrapKey()</a></p>
-   </th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <th scope="row">RSASSA-PKCS1-v1_5</th>
-   <td>✓</td>
-   <td></td>
-   <td></td>
-   <td></td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row">RSA-PSS</th>
-   <td>✓</td>
-   <td></td>
-   <td></td>
-   <td></td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row">ECDSA</th>
-   <td>✓</td>
-   <td></td>
-   <td></td>
-   <td></td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row">HMAC</th>
-   <td>✓</td>
-   <td></td>
-   <td></td>
-   <td></td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row">RSA-OAEP</th>
-   <td></td>
-   <td>✓</td>
-   <td></td>
-   <td></td>
-   <td>✓</td>
-  </tr>
-  <tr>
-   <th scope="row">AES-CTR</th>
-   <td></td>
-   <td>✓</td>
-   <td></td>
-   <td></td>
-   <td>✓</td>
-  </tr>
-  <tr>
-   <th scope="row">AES-CBC</th>
-   <td></td>
-   <td>✓</td>
-   <td></td>
-   <td></td>
-   <td>✓</td>
-  </tr>
-  <tr>
-   <th scope="row">AES-GCM</th>
-   <td></td>
-   <td>✓</td>
-   <td></td>
-   <td></td>
-   <td>✓</td>
-  </tr>
-  <tr>
-   <th scope="row">SHA-1</th>
-   <td></td>
-   <td></td>
-   <td>✓</td>
-   <td></td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row">SHA-256</th>
-   <td></td>
-   <td></td>
-   <td>✓</td>
-   <td></td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row">SHA-384</th>
-   <td></td>
-   <td></td>
-   <td>✓</td>
-   <td></td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row">SHA-512</th>
-   <td></td>
-   <td></td>
-   <td>✓</td>
-   <td></td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row">ECDH</th>
-   <td></td>
-   <td></td>
-   <td></td>
-   <td>✓</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row">HKDF</th>
-   <td></td>
-   <td></td>
-   <td></td>
-   <td>✓</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row">PBKDF2</th>
-   <td></td>
-   <td></td>
-   <td></td>
-   <td>✓</td>
-   <td></td>
-  </tr>
-  <tr>
-   <th scope="row">AES-KW</th>
-   <td></td>
-   <td></td>
-   <td></td>
-   <td></td>
-   <td>✓</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Specifications">Specifications</h2>
+The table below summarises which algorithms are suitable for which cryptographic operations:
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{ SpecName('Web Crypto API', '#subtlecrypto-interface', 'SubtleCrypto') }}</td>
-   <td>{{ Spec2('Web Crypto API') }}</td>
-   <td>Initial definition.</td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th scope="row"></th>
+      <th scope="col">
+        <p><a href="/en-US/docs/Web/API/SubtleCrypto/sign">sign()</a></p>
+        <p><a href="/en-US/docs/Web/API/SubtleCrypto/verify">verify()</a></p>
+      </th>
+      <th scope="col">
+        <p><a href="/en-US/docs/Web/API/SubtleCrypto/encrypt">encrypt()</a></p>
+        <p><a href="/en-US/docs/Web/API/SubtleCrypto/decrypt">decrypt()</a></p>
+      </th>
+      <th scope="col">
+        <a href="/en-US/docs/Web/API/SubtleCrypto/digest">digest()</a>
+      </th>
+      <th scope="col">
+        <p>
+          <a href="/en-US/docs/Web/API/SubtleCrypto/deriveBits">deriveBits()</a>
+        </p>
+        <p>
+          <a href="/en-US/docs/Web/API/SubtleCrypto/deriveKey">deriveKey()</a>
+        </p>
+      </th>
+      <th scope="col">
+        <p><a href="/en-US/docs/Web/API/SubtleCrypto/wrapKey">wrapKey()</a></p>
+        <p>
+          <a href="/en-US/docs/Web/API/SubtleCrypto/unwrapKey">unwrapKey()</a>
+        </p>
+      </th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">RSASSA-PKCS1-v1_5</th>
+      <td>✓</td>
+      <td></td>
+      <td></td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <th scope="row">RSA-PSS</th>
+      <td>✓</td>
+      <td></td>
+      <td></td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <th scope="row">ECDSA</th>
+      <td>✓</td>
+      <td></td>
+      <td></td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <th scope="row">HMAC</th>
+      <td>✓</td>
+      <td></td>
+      <td></td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <th scope="row">RSA-OAEP</th>
+      <td></td>
+      <td>✓</td>
+      <td></td>
+      <td></td>
+      <td>✓</td>
+    </tr>
+    <tr>
+      <th scope="row">AES-CTR</th>
+      <td></td>
+      <td>✓</td>
+      <td></td>
+      <td></td>
+      <td>✓</td>
+    </tr>
+    <tr>
+      <th scope="row">AES-CBC</th>
+      <td></td>
+      <td>✓</td>
+      <td></td>
+      <td></td>
+      <td>✓</td>
+    </tr>
+    <tr>
+      <th scope="row">AES-GCM</th>
+      <td></td>
+      <td>✓</td>
+      <td></td>
+      <td></td>
+      <td>✓</td>
+    </tr>
+    <tr>
+      <th scope="row">SHA-1</th>
+      <td></td>
+      <td></td>
+      <td>✓</td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <th scope="row">SHA-256</th>
+      <td></td>
+      <td></td>
+      <td>✓</td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <th scope="row">SHA-384</th>
+      <td></td>
+      <td></td>
+      <td>✓</td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <th scope="row">SHA-512</th>
+      <td></td>
+      <td></td>
+      <td>✓</td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <th scope="row">ECDH</th>
+      <td></td>
+      <td></td>
+      <td></td>
+      <td>✓</td>
+      <td></td>
+    </tr>
+    <tr>
+      <th scope="row">HKDF</th>
+      <td></td>
+      <td></td>
+      <td></td>
+      <td>✓</td>
+      <td></td>
+    </tr>
+    <tr>
+      <th scope="row">PBKDF2</th>
+      <td></td>
+      <td></td>
+      <td></td>
+      <td>✓</td>
+      <td></td>
+    </tr>
+    <tr>
+      <th scope="row">AES-KW</th>
+      <td></td>
+      <td></td>
+      <td></td>
+      <td></td>
+      <td>✓</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Browser_compatibility">Browser compatibility</h2>
+## Specifications
 
+| Specification                                                                                        | Status                                   | Comment             |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------------------- | ------------------- |
+| {{ SpecName('Web Crypto API', '#subtlecrypto-interface', 'SubtleCrypto') }} | {{ Spec2('Web Crypto API') }} | Initial definition. |
 
+## Browser compatibility
 
-<p>{{Compat("api.SubtleCrypto")}}</p>
+{{Compat("api.SubtleCrypto")}}
 
-<h2 id="See_also">See also</h2>
+## See also
 
-<ul>
- <li><a href="/en-US/docs/Web/API/Web_Crypto_API">Web Crypto API</a></li>
- <li><a href="/en-US/docs/Web/Security">Web security</a></li>
- <li><a href="/en-US/docs/Web/Privacy">Privacy, permissions, and information security</a></li>
- <li>{{domxref("Crypto")}} and {{domxref("Crypto.subtle")}}.</li>
- <li><a href="https://www.crypto101.io/">Crypto 101</a>: an introductory course on cryptography.</li>
-</ul>
+- [Web Crypto API](/en-US/docs/Web/API/Web_Crypto_API)
+- [Web security](/en-US/docs/Web/Security)
+- [Privacy, permissions, and information security](/en-US/docs/Web/Privacy)
+- {{domxref("Crypto")}} and {{domxref("Crypto.subtle")}}.
+- [Crypto 101](https://www.crypto101.io/): an introductory course on cryptography.
diff --git a/files/fr/web/api/svgaelement/index.md b/files/fr/web/api/svgaelement/index.md
index 90e403be20..0fef475268 100644
--- a/files/fr/web/api/svgaelement/index.md
+++ b/files/fr/web/api/svgaelement/index.md
@@ -9,85 +9,73 @@ tags:
   - WebAPI
 translation_of: Web/API/SVGAElement
 ---
-<h2 id="SVG_a_DOM_interface">SVG a DOM interface</h2>
-<p>L'interface <code>SVGAElement </code>fournit un accès aux propriétés des éléments {{ SVGElement("a") }} ainsi qu'aux méthodes pour les manipuler.</p>
-<h3 id="Interface_overview">Interface overview</h3>
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Egalement implémenté</th>
-   <td>{{ domxref("SVGElement") }}, {{ domxref("SVGURIReference") }}, {{ domxref("SVGTests") }}, {{ domxref("SVGLangSpace") }}, {{ domxref("SVGExternalResourcesRequired") }}, {{ domxref("SVGStylable") }}, {{ domxref("SVGTransformable") }}</td>
-  </tr>
-  <tr>
-   <th scope="row">Methodes</th>
-   <td><em>Aucune</em></td>
-  </tr>
-  <tr>
-   <th scope="row">Propriétés</th>
-   <td>
-    <ul>
-     <li>lectureseule{{ domxref("SVGAnimatedString") }} <code>cible</code></li>
-    </ul>
-   </td>
-  </tr>
-  <tr>
-   <th scope="row">Document Normative</th>
-   <td><a href="http://www.w3.org/TR/SVG11/linking.html#InterfaceSVGAElement">SVG 1.1 (2nd Edition)</a></td>
-  </tr>
- </tbody>
-</table>
-<h2 id="Propriétés">Propriétés</h2>
-<table class="standard-table">
- <thead>
-  <tr>
-   <th>Nom</th>
-   <th>Type</th>
-   <th>Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>cible</code></td>
-   <td>{{ domxref("SVGAnimatedString") }}</td>
-   <td>Correspond à attribuer {{ SVGAttr("cible") }} sur l'élément {{ SVGElement("a") }} donné.</td>
-  </tr>
- </tbody>
-</table>
+## SVG a DOM interface
 
-<h2 id="Methodes">Methodes</h2>
+L'interface `SVGAElement `fournit un accès aux propriétés des éléments {{ SVGElement("a") }} ainsi qu'aux méthodes pour les manipuler.
 
-<p>L'interface <code>SVGAElement</code> ne fournit aucune méthode spécifique.</p>
-
-<h2 id="Specifications">Spécifications</h2>
+### Interface overview
 
 <table class="standard-table">
-  <thead>
+  <tbody>
     <tr>
-      <th scope="col">Spécification</th>
-      <th scope="col">Statut</th>
-      <th scope="col">Commentaire</th>
+      <th scope="row">Egalement implémenté</th>
+      <td>
+        {{ domxref("SVGElement") }},
+        {{ domxref("SVGURIReference") }},
+        {{ domxref("SVGTests") }},
+        {{ domxref("SVGLangSpace") }},
+        {{ domxref("SVGExternalResourcesRequired") }},
+        {{ domxref("SVGStylable") }},
+        {{ domxref("SVGTransformable") }}
+      </td>
     </tr>
-  </thead>
-  <tbody>
     <tr>
-      <td>{{SpecName("SVG2", "linking.html#InterfaceSVGAElement")}}</td>
-      <td>{{Spec2("SVG2")}}</td>
-      <td>Remplacement de l'héritage de {{domxref("SVGElement")}} par {{domxref("SVGGraphicsElement")}} et suppression des implémentations d'interface de {{domxref("SVGTests")}}, {{domxref("SVGLangSpace")}}, {{domxref("SVGExternalResourcesRequired")}}, {{domxref("SVGStylable")}}, et {{domxref("SVGTransformable")}} par {{domxref("HTMLHyperlinkElementUtils")}}</td>
+      <th scope="row">Methodes</th>
+      <td><em>Aucune</em></td>
     </tr>
     <tr>
-      <td>{{SpecName("SVG1.1", "linking.html#InterfaceSVGAElement")}}</td>
-      <td>{{Spec2("SVG1.1")}}</td>
-      <td>Définition initiale</td>
+      <th scope="row">Propriétés</th>
+      <td>
+        <ul>
+          <li>
+            lectureseule{{ domxref("SVGAnimatedString") }}
+            <code>cible</code>
+          </li>
+        </ul>
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Document Normative</th>
+      <td>
+        <a href="http://www.w3.org/TR/SVG11/linking.html#InterfaceSVGAElement"
+          >SVG 1.1 (2nd Edition)</a
+        >
+      </td>
     </tr>
   </tbody>
 </table>
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Propriétés
+
+| Nom     | Type                                         | Description                                                                                           |
+| ------- | -------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
+| `cible` | {{ domxref("SVGAnimatedString") }} | Correspond à attribuer {{ SVGAttr("cible") }} sur l'élément {{ SVGElement("a") }} donné. |
+
+## Methodes
+
+L'interface `SVGAElement` ne fournit aucune méthode spécifique.
+
+## Spécifications
+
+| Spécification                                                                    | Statut                   | Commentaire                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| -------------------------------------------------------------------------------- | ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName("SVG2", "linking.html#InterfaceSVGAElement")}}     | {{Spec2("SVG2")}} | Remplacement de l'héritage de {{domxref("SVGElement")}} par {{domxref("SVGGraphicsElement")}} et suppression des implémentations d'interface de {{domxref("SVGTests")}}, {{domxref("SVGLangSpace")}}, {{domxref("SVGExternalResourcesRequired")}}, {{domxref("SVGStylable")}}, et {{domxref("SVGTransformable")}} par {{domxref("HTMLHyperlinkElementUtils")}} |
+| {{SpecName("SVG1.1", "linking.html#InterfaceSVGAElement")}} | {{Spec2("SVG1.1")}} | Définition initiale                                                                                                                                                                                                                                                                                                                                                                                                                            |
+
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.SVGAElement")}}</p>
+{{Compat("api.SVGAElement")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>{{ SVGElement("a") }} SVG Element</li>
-</ul>
+- {{ SVGElement("a") }} SVG Element
diff --git a/files/fr/web/api/svgdescelement/index.md b/files/fr/web/api/svgdescelement/index.md
index c09d0a8f4e..115da55950 100644
--- a/files/fr/web/api/svgdescelement/index.md
+++ b/files/fr/web/api/svgdescelement/index.md
@@ -8,50 +8,31 @@ tags:
   - SVG DOM
 translation_of: Web/API/SVGDescElement
 ---
-<div>{{APIRef("SVG")}}</div>
+{{APIRef("SVG")}}
 
-<p>L'interface <strong><code>SVGDescElement</code></strong> correspond à l'élément {{SVGElement("desc")}}.</p>
+L'interface **`SVGDescElement`** correspond à l'élément {{SVGElement("desc")}}.
 
-<p>{{InheritanceDiagram(600, 140)}}</p>
+{{InheritanceDiagram(600, 140)}}
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<p><em>Cette interface hérite des propriétés fournies par son parent {{domxref("SVGGeometryElement")}}.</em></p>
+_Cette interface hérite des propriétés fournies par son parent {{domxref("SVGGeometryElement")}}._
 
-<h2 id="Méthodes">Méthodes</h2>
+## Méthodes
 
-<p><em>Cette interface n'a pas de méthode propre mais hérite des méthodes de son parent {{domxref("SVGGeometryElement")}}.</em></p>
+_Cette interface n'a pas de méthode propre mais hérite des méthodes de son parent {{domxref("SVGGeometryElement")}}._
 
-<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("SVG2", "struct.html#InterfaceSVGDescElement", "SVGDescElement")}}</td>
-   <td>{{Spec2("SVG2")}}</td>
-   <td>Retrait de l'héritage depuis {{domxref("SVGLangSpace")}} et {{domxref("SVGStylable")}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("SVG1.1", "struct.html#InterfaceSVGDescElement", "SVGDescElement")}}</td>
-   <td>{{Spec2("SVG1.1")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                            | État                     | Commentaires                                                                                              |
+| -------------------------------------------------------------------------------------------------------- | ------------------------ | --------------------------------------------------------------------------------------------------------- |
+| {{SpecName("SVG2", "struct.html#InterfaceSVGDescElement", "SVGDescElement")}} | {{Spec2("SVG2")}} | Retrait de l'héritage depuis {{domxref("SVGLangSpace")}} et {{domxref("SVGStylable")}} |
+| {{SpecName("SVG1.1", "struct.html#InterfaceSVGDescElement", "SVGDescElement")}} | {{Spec2("SVG1.1")}} | Définition initiale.                                                                                      |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.SVGDescElement")}}</p>
+{{Compat("api.SVGDescElement")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{SVGElement("desc")}}</li>
-</ul>
+- {{SVGElement("desc")}}
diff --git a/files/fr/web/api/svgelement/index.md b/files/fr/web/api/svgelement/index.md
index 031175c330..d83db2e9b8 100644
--- a/files/fr/web/api/svgelement/index.md
+++ b/files/fr/web/api/svgelement/index.md
@@ -5,81 +5,111 @@ tags:
   - Reference
 translation_of: Web/API/SVGElement
 ---
-<h2 id="Interface_d'élément_SVG">Interface d'élément SVG</h2>
-<p>Toutes les interfaces SVG DOM qui correspondent directement à des éléments du langage SVG dérivent de l'interface <code>SVGElement</code>.</p>
-<h3 id="Vue_d'ensemble_de_l'interface">Vue d'ensemble de l'interface</h3>
+## Interface d'élément SVG
+
+Toutes les interfaces SVG DOM qui correspondent directement à des éléments du langage SVG dérivent de l'interface `SVGElement`.
+
+### Vue d'ensemble de l'interface
+
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Implémente aussi</th>
-   <td>Voir l'interface générique DOM {{ domxref("Element") }}.</td>
-  </tr>
-  <tr>
-   <th scope="row">Méthodes</th>
-   <td><em>Aucune</em></td>
-  </tr>
-  <tr>
-   <th scope="row">Propriétés</th>
-   <td>
-    <ul>
-     <li>readonly {{ domxref("DOMString") }} <code>id</code></li>
-     <li>readonly {{ domxref("DOMString") }} <code>xmlbase</code></li>
-     <li>readonly {{ domxref("SVGSVGElement") }} <code>ownerSVGElement</code></li>
-     <li>readonly {{ domxref("SVGElement") }} <code>viewportElement</code></li>
-    </ul>
-   </td>
-  </tr>
-  <tr>
-   <th scope="row">Normative document</th>
-   <td><a href="http://www.w3.org/TR/SVG11/types.html#InterfaceSVGElement">SVG 1.1 (2nd Edition)</a></td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Implémente aussi</th>
+      <td>Voir l'interface générique DOM {{ domxref("Element") }}.</td>
+    </tr>
+    <tr>
+      <th scope="row">Méthodes</th>
+      <td><em>Aucune</em></td>
+    </tr>
+    <tr>
+      <th scope="row">Propriétés</th>
+      <td>
+        <ul>
+          <li>readonly {{ domxref("DOMString") }} <code>id</code></li>
+          <li>
+            readonly {{ domxref("DOMString") }} <code>xmlbase</code>
+          </li>
+          <li>
+            readonly {{ domxref("SVGSVGElement") }}
+            <code>ownerSVGElement</code>
+          </li>
+          <li>
+            readonly {{ domxref("SVGElement") }}
+            <code>viewportElement</code>
+          </li>
+        </ul>
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Normative document</th>
+      <td>
+        <a href="http://www.w3.org/TR/SVG11/types.html#InterfaceSVGElement"
+          >SVG 1.1 (2nd Edition)</a
+        >
+      </td>
+    </tr>
+  </tbody>
 </table>
-<h2 id="Properties">Properties</h2>
+
+## Properties
+
 <table class="standard-table">
- <thead>
-  <tr>
-   <th>Nom</th>
-   <th>Type</th>
-   <th>Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>id</code></td>
-   <td>{{ domxref("DOMString") }}</td>
-   <td>La valeur de l'attribut {{ SVGAttr("id") }} de l'élément, ou une chaîne vide si <code>id</code> n'est pas présent.</td>
-  </tr>
-  <tr>
-   <td><code>xmlbase</code></td>
-   <td>{{ domxref("DOMString") }}</td>
-   <td>Correspond à l'attribut {{ SVGAttr("xml:base") }} de l'élément.</td>
-  </tr>
-  <tr>
-   <td><code>ownerSVGElement</code></td>
-   <td>{{ domxref("SVGSVGElement") }}</td>
-   <td>
-    <p>L'élément {{ SVGElement("svg") }} parent le plus près. <code>Null</code> si l'élément est l'élément svg le plus à l'extérieur.</p>
-   </td>
-  </tr>
-  <tr>
-   <td><code>viewportElement</code></td>
-   <td>{{ domxref("SVGElement") }}</td>
-   <td>
-    <p>L'élément qui a établi la fenêtre actuelle. Souvent l'élément parent {{ SVGElement("svg") }} le plus prêt. <code>Null</code> si l'élément est l'élément svg le plus à l'extérieur.</p>
-   </td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th>Nom</th>
+      <th>Type</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>id</code></td>
+      <td>{{ domxref("DOMString") }}</td>
+      <td>
+        La valeur de l'attribut {{ SVGAttr("id") }} de l'élément, ou une
+        chaîne vide si <code>id</code> n'est pas présent.
+      </td>
+    </tr>
+    <tr>
+      <td><code>xmlbase</code></td>
+      <td>{{ domxref("DOMString") }}</td>
+      <td>
+        Correspond à l'attribut {{ SVGAttr("xml:base") }} de l'élément.
+      </td>
+    </tr>
+    <tr>
+      <td><code>ownerSVGElement</code></td>
+      <td>{{ domxref("SVGSVGElement") }}</td>
+      <td>
+        <p>
+          L'élément {{ SVGElement("svg") }} parent le plus près.
+          <code>Null</code> si l'élément est l'élément svg le plus à
+          l'extérieur.
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td><code>viewportElement</code></td>
+      <td>{{ domxref("SVGElement") }}</td>
+      <td>
+        <p>
+          L'élément qui a établi la fenêtre actuelle. Souvent l'élément parent
+          {{ SVGElement("svg") }} le plus prêt. <code>Null</code> si
+          l'élément est l'élément svg le plus à l'extérieur.
+        </p>
+      </td>
+    </tr>
+  </tbody>
 </table>
-<h2 id="Méthodes">Méthodes</h2>
-<p>L'interface <code>SVGElement</code> ne possède aucune méthode spécifique.</p>
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Méthodes
+
+L'interface `SVGElement` ne possède aucune méthode spécifique.
+
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.SVGElement")}}</p>
+{{Compat("api.SVGElement")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>Référence DOM {{ SVGElement("element") }}</li>
-</ul>
+- Référence DOM {{ SVGElement("element") }}
diff --git a/files/fr/web/api/svgmatrix/index.md b/files/fr/web/api/svgmatrix/index.md
index 374dd11c20..a90c8251a9 100644
--- a/files/fr/web/api/svgmatrix/index.md
+++ b/files/fr/web/api/svgmatrix/index.md
@@ -6,238 +6,299 @@ tags:
   - Reference
 translation_of: Web/API/SVGMatrix
 ---
-<h2 id="Interface_SVG_matrix">Interface SVG matrix</h2>
+## Interface SVG matrix
 
-<p>Beaucoup d'opération graphiques de SVG utilisent des matrices 2x3 de la forme :</p>
+Beaucoup d'opération graphiques de SVG utilisent des matrices 2x3 de la forme :
 
-<pre>[a c e]
-[b d f]</pre>
+    [a c e]
+    [b d f]
 
-<p>laquelle, quand étendue en une matrice 3x3 à des fins d'arithmétique matricielle, devient :</p>
+laquelle, quand étendue en une matrice 3x3 à des fins d'arithmétique matricielle, devient :
 
-<pre>[a c e]
-[b d f]
-[0 0 1]
-</pre>
+    [a c e]
+    [b d f]
+    [0 0 1]
 
-<p>Un objet <code>SVGMatrix</code> peut être marqué en lecture-seule, ce qui signifie que les tentatives de modification sur cet objet entraîneront un lancement d'exception.</p>
+Un objet `SVGMatrix` peut être marqué en lecture-seule, ce qui signifie que les tentatives de modification sur cet objet entraîneront un lancement d'exception.
 
-<h3 id="Vue_d'ensemble_de_l'interface">Vue d'ensemble de l'interface</h3>
+### Vue d'ensemble de l'interface
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Implémente aussi</th>
-   <td><em>Aucune</em></td>
-  </tr>
-  <tr>
-   <th scope="row">Méthodes</th>
-   <td>
-    <ul>
-     <li>{{ domxref("SVGMatrix") }} <code>multiply(in {{ domxref("SVGMatrix") }} <em>secondMatrix</em>)</code></li>
-     <li>{{ domxref("SVGMatrix") }} <code>inverse()</code></li>
-     <li>{{ domxref("SVGMatrix") }} <code>translate(in float <em>x</em>, in float <em>y</em>)</code></li>
-     <li>{{ domxref("SVGMatrix") }} <code>scale(in float <em>scaleFactor</em>)</code></li>
-     <li>{{ domxref("SVGMatrix") }} <code>scaleNonUniform(in float scaleFactorX, in float <em>scaleFactorY</em>)</code></li>
-     <li>{{ domxref("SVGMatrix") }} <code>rotate(in float<code> <em>angle</em>)</code></code></li>
-     <li>{{ domxref("SVGMatrix") }} <code>rotateFromVector(in float <em>x</em>, in float <em>y</em>)</code></li>
-     <li>{{ domxref("SVGMatrix") }} <code>flipX()</code></li>
-     <li>{{ domxref("SVGMatrix") }} <code>flipY()</code></li>
-     <li>{{ domxref("SVGMatrix") }} <code>skewX(in float <em>angle</em>)</code></li>
-     <li>{{ domxref("SVGMatrix") }} <code>skewY(in float <em>angle</em>)</code></li>
-    </ul>
-   </td>
-  </tr>
-  <tr>
-   <th scope="row">Propriétés</th>
-   <td>
-    <ul>
-     <li>float <code>a</code></li>
-     <li>float <code>b</code></li>
-     <li>float <code>c</code></li>
-     <li>float <code>d</code></li>
-     <li>float <code>e</code></li>
-     <li>float <code>f</code></li>
-    </ul>
-   </td>
-  </tr>
-  <tr>
-   <th scope="row">Document normatif</th>
-   <td><a href="http://www.w3.org/TR/SVG/coords.html#InterfaceSVGMatrix">SVG 1.1 (2nd Edition)</a></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th>Nom</th>
-   <th>Type</th>
-   <th>Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>a</code></td>
-   <td>float</td>
-   <td>Le composant <em>a</em> de la matrice.</td>
-  </tr>
-  <tr>
-   <td><code>b</code></td>
-   <td>float</td>
-   <td>Le composant <em>b</em> de la matrice.</td>
-  </tr>
-  <tr>
-   <td><code>c</code></td>
-   <td>float</td>
-   <td>Le composant c de la matrice.</td>
-  </tr>
-  <tr>
-   <td><code>d</code></td>
-   <td>float</td>
-   <td>Le composant <em>d</em> de la matrice.</td>
-  </tr>
-  <tr>
-   <td><code>e</code></td>
-   <td>float</td>
-   <td>Le composant <em>e</em> de la matrice.</td>
-  </tr>
-  <tr>
-   <td><code>f</code></td>
-   <td>float</td>
-   <td>Le composant <em>f</em> de la matrice.</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Implémente aussi</th>
+      <td><em>Aucune</em></td>
+    </tr>
+    <tr>
+      <th scope="row">Méthodes</th>
+      <td>
+        <ul>
+          <li>
+            {{ domxref("SVGMatrix") }}
+            <code
+              >multiply(in {{ domxref("SVGMatrix") }}
+              <em>secondMatrix</em>)</code
+            >
+          </li>
+          <li>{{ domxref("SVGMatrix") }} <code>inverse()</code></li>
+          <li>
+            {{ domxref("SVGMatrix") }}
+            <code>translate(in float <em>x</em>, in float <em>y</em>)</code>
+          </li>
+          <li>
+            {{ domxref("SVGMatrix") }}
+            <code>scale(in float <em>scaleFactor</em>)</code>
+          </li>
+          <li>
+            {{ domxref("SVGMatrix") }}
+            <code
+              >scaleNonUniform(in float scaleFactorX, in float
+              <em>scaleFactorY</em>)</code
+            >
+          </li>
+          <li>
+            {{ domxref("SVGMatrix") }}
+            <code
+              >rotate(in float<code> <em>angle</em>)</code></code
+            >
+          </li>
+          <li>
+            {{ domxref("SVGMatrix") }}
+            <code
+              >rotateFromVector(in float <em>x</em>, in float <em>y</em>)</code
+            >
+          </li>
+          <li>{{ domxref("SVGMatrix") }} <code>flipX()</code></li>
+          <li>{{ domxref("SVGMatrix") }} <code>flipY()</code></li>
+          <li>
+            {{ domxref("SVGMatrix") }}
+            <code>skewX(in float <em>angle</em>)</code>
+          </li>
+          <li>
+            {{ domxref("SVGMatrix") }}
+            <code>skewY(in float <em>angle</em>)</code>
+          </li>
+        </ul>
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Propriétés</th>
+      <td>
+        <ul>
+          <li>float <code>a</code></li>
+          <li>float <code>b</code></li>
+          <li>float <code>c</code></li>
+          <li>float <code>d</code></li>
+          <li>float <code>e</code></li>
+          <li>float <code>f</code></li>
+        </ul>
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Document normatif</th>
+      <td>
+        <a href="http://www.w3.org/TR/SVG/coords.html#InterfaceSVGMatrix"
+          >SVG 1.1 (2nd Edition)</a
+        >
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<p>Une {{ domxref("DOMException") }} avec le code <code>NO_MODIFICATION_ALLOWED_ERR</code> est levée lors d'une tentative de modification d'un attribut en lecture-seule ou quand l'objet lui-même est en lecture-seule.</p>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th>Nom &amp; Arguments</th>
-   <th>Retourne</th>
-   <th>Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code><strong>multiply</strong>(in {{ domxref("SVGMatrix") }} <em>secondMatrix</em>)</code></td>
-   <td>{{ domxref("SVGMatrix") }}</td>
-   <td>Effectue une multiplication de matrices. Cette matrice est multipliée par une autre matrice, retournant la nouvelle matrice résultante.</td>
-  </tr>
-  <tr>
-   <td><code><strong>inverse</strong>()</code></td>
-   <td>{{ domxref("SVGMatrix") }}</td>
-   <td>
-    <p>Retourne la matrice inverse.</p>
-
-    <p><strong>Exceptions :</strong></p>
-
-    <ul>
-     <li>une {{ domxref("DOMException") }} avec le code <code>SVG_MATRIX_NOT_INVERTABLE</code> est levée si la matrice n'est pas inversible.</li>
-    </ul>
-   </td>
-  </tr>
-  <tr>
-   <td><code><strong>translate</strong>(in float <em>x</em>, in float <em>y</em>)</code></td>
-   <td>{{ domxref("SVGMatrix") }}</td>
-   <td>
-    <div>Effectue une translation sur la matrice courante et retourne la matrice résultante.</div>
-   </td>
-  </tr>
-  <tr>
-   <td><code><strong>scale</strong>(in float <em>scaleFactor</em>)</code></td>
-   <td>{{ domxref("SVGMatrix") }}</td>
-   <td>
-    <div>Effectue une mise à l'échelle uniforme sur la matrice courante et retourne la matrice résultante.</div>
-   </td>
-  </tr>
-  <tr>
-   <td><code><strong>scaleNonUniform</strong>(in float <em>scaleFactorX</em>, in float <em>scaleFactorY</em>)</code></td>
-   <td>{{ domxref("SVGMatrix") }}</td>
-   <td>
-    <div>Effectue une mise à l'échelle non-uniforme sur la matrice courante et retourne la matrice résultante.</div>
-   </td>
-  </tr>
-  <tr>
-   <td><code><strong>rotate</strong>(in float <em>angle</em>)</code></td>
-   <td>{{ domxref("SVGMatrix") }}</td>
-   <td>
-    <div>Effectue une rotation sur la matrice courante et retourne la matrice résultante.</div>
-   </td>
-  </tr>
-  <tr>
-   <td><code><strong>rotateFromVector</strong>(in float <em>x</em>, in float <em>y</em>)</code></td>
-   <td>{{ domxref("SVGMatrix") }}</td>
-   <td>
-    <p>Effectue une rotation sur la matrice courante et retourne la matrice résultante. L'angle de rotation est déterminé en prenant (+/-) atan(y/x). La direction du vecteur (x, y) détermine si la valeur négative ou positive de l'angle est utilisée.</p>
-
-    <p><strong>Exceptions :</strong></p>
-
-    <ul>
-     <li>une {{ domxref("DOMException") }} avec le code <code>SVG_INVALID_VALUE_ERR </code>est levée si un de ces paramètres a une valeur invalide.</li>
-    </ul>
-   </td>
-  </tr>
-  <tr>
-   <td><code><strong>flipX</strong>()</code></td>
-   <td>{{ domxref("SVGMatrix") }}</td>
-   <td>
-    <div>Effectue une transformation [-1 0 0 1 0 0] et retourne la matrice résultante.</div>
-   </td>
-  </tr>
-  <tr>
-   <td><code><strong>flipY</strong>()</code></td>
-   <td>{{ domxref("SVGMatrix") }}</td>
-   <td>
-    <div>Effectue une transformation [1 0 0 -1 0 0] et retourne la matrice résultante.</div>
-   </td>
-  </tr>
-  <tr>
-   <td><code><strong>skewX</strong>(in float <em>angle</em>)</code></td>
-   <td>{{ domxref("SVGMatrix") }}</td>
-   <td>
-    <div>Effectue une transformation de skewX sur la matrice courante et retourne la matrice résultante.</div>
-   </td>
-  </tr>
-  <tr>
-   <td><code><strong>skewY</strong>(in float <em>angle</em>)</code></td>
-   <td>{{ domxref("SVGMatrix") }}</td>
-   <td>
-    <div>Effectue une transformation de skewY sur la matrice courante et retourne la matrice résultante.</div>
-   </td>
-  </tr>
- </tbody>
-</table>
+## Propriétés
 
-<h2 id="Exceptions">Exceptions</h2>
+| Nom | Type  | Description                     |
+| --- | ----- | ------------------------------- |
+| `a` | float | Le composant _a_ de la matrice. |
+| `b` | float | Le composant _b_ de la matrice. |
+| `c` | float | Le composant c de la matrice.   |
+| `d` | float | Le composant _d_ de la matrice. |
+| `e` | float | Le composant _e_ de la matrice. |
+| `f` | float | Le composant _f_ de la matrice. |
 
-<p>Une {{domxref("DOMException")}} avec le code <code>NO_MODIFICATION_ALLOWED_ERR</code> est levée lors d'une tentative de mise à jour d'un attribut en lecture seule ou lorsque l'objet lui-même est en lecture seule.</p>
+Une {{ domxref("DOMException") }} avec le code `NO_MODIFICATION_ALLOWED_ERR` est levée lors d'une tentative de modification d'un attribut en lecture-seule ou quand l'objet lui-même est en lecture-seule.
 
-<h2 id="Specifications">Spécifications</h2>
+## Méthodes
 
 <table class="standard-table">
   <thead>
     <tr>
-      <th scope="col">Spécification</th>
-      <th scope="col">Statut</th>
-      <th scope="col">Commentaire</th>
+      <th>Nom &#x26; Arguments</th>
+      <th>Retourne</th>
+      <th>Description</th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <td>{{SpecName("SVG1.1", "coords.html#InterfaceSVGMatrix", "SVGMatrix")}}</td>
-      <td>{{Spec2("SVG1.1")}}</td>
-      <td>Définition initiale</td>
+      <td>
+        <code
+          ><strong>multiply</strong>(in {{ domxref("SVGMatrix") }}
+          <em>secondMatrix</em>)</code
+        >
+      </td>
+      <td>{{ domxref("SVGMatrix") }}</td>
+      <td>
+        Effectue une multiplication de matrices. Cette matrice est multipliée
+        par une autre matrice, retournant la nouvelle matrice résultante.
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <code><strong>inverse</strong>()</code>
+      </td>
+      <td>{{ domxref("SVGMatrix") }}</td>
+      <td>
+        <p>Retourne la matrice inverse.</p>
+        <p><strong>Exceptions :</strong></p>
+        <ul>
+          <li>
+            une {{ domxref("DOMException") }} avec le code
+            <code>SVG_MATRIX_NOT_INVERTABLE</code> est levée si la matrice n'est
+            pas inversible.
+          </li>
+        </ul>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <code
+          ><strong>translate</strong>(in float <em>x</em>, in float
+          <em>y</em>)</code
+        >
+      </td>
+      <td>{{ domxref("SVGMatrix") }}</td>
+      <td>
+        <div>
+          Effectue une translation sur la matrice courante et retourne la
+          matrice résultante.
+        </div>
+      </td>
     </tr>
- </tbody>
+    <tr>
+      <td>
+        <code><strong>scale</strong>(in float <em>scaleFactor</em>)</code>
+      </td>
+      <td>{{ domxref("SVGMatrix") }}</td>
+      <td>
+        <div>
+          Effectue une mise à l'échelle uniforme sur la matrice courante et
+          retourne la matrice résultante.
+        </div>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <code
+          ><strong>scaleNonUniform</strong>(in float <em>scaleFactorX</em>, in
+          float <em>scaleFactorY</em>)</code
+        >
+      </td>
+      <td>{{ domxref("SVGMatrix") }}</td>
+      <td>
+        <div>
+          Effectue une mise à l'échelle non-uniforme sur la matrice courante et
+          retourne la matrice résultante.
+        </div>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <code><strong>rotate</strong>(in float <em>angle</em>)</code>
+      </td>
+      <td>{{ domxref("SVGMatrix") }}</td>
+      <td>
+        <div>
+          Effectue une rotation sur la matrice courante et retourne la matrice
+          résultante.
+        </div>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <code
+          ><strong>rotateFromVector</strong>(in float <em>x</em>, in float
+          <em>y</em>)</code
+        >
+      </td>
+      <td>{{ domxref("SVGMatrix") }}</td>
+      <td>
+        <p>
+          Effectue une rotation sur la matrice courante et retourne la matrice
+          résultante. L'angle de rotation est déterminé en prenant (+/-)
+          atan(y/x). La direction du vecteur (x, y) détermine si la valeur
+          négative ou positive de l'angle est utilisée.
+        </p>
+        <p><strong>Exceptions :</strong></p>
+        <ul>
+          <li>
+            une {{ domxref("DOMException") }} avec le code
+            <code>SVG_INVALID_VALUE_ERR </code>est levée si un de ces paramètres
+            a une valeur invalide.
+          </li>
+        </ul>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <code><strong>flipX</strong>()</code>
+      </td>
+      <td>{{ domxref("SVGMatrix") }}</td>
+      <td>
+        <div>
+          Effectue une transformation [-1 0 0 1 0 0] et retourne la matrice
+          résultante.
+        </div>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <code><strong>flipY</strong>()</code>
+      </td>
+      <td>{{ domxref("SVGMatrix") }}</td>
+      <td>
+        <div>
+          Effectue une transformation [1 0 0 -1 0 0] et retourne la matrice
+          résultante.
+        </div>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <code><strong>skewX</strong>(in float <em>angle</em>)</code>
+      </td>
+      <td>{{ domxref("SVGMatrix") }}</td>
+      <td>
+        <div>
+          Effectue une transformation de skewX sur la matrice courante et
+          retourne la matrice résultante.
+        </div>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <code><strong>skewY</strong>(in float <em>angle</em>)</code>
+      </td>
+      <td>{{ domxref("SVGMatrix") }}</td>
+      <td>
+        <div>
+          Effectue une transformation de skewY sur la matrice courante et
+          retourne la matrice résultante.
+        </div>
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Exceptions
+
+Une {{domxref("DOMException")}} avec le code `NO_MODIFICATION_ALLOWED_ERR` est levée lors d'une tentative de mise à jour d'un attribut en lecture seule ou lorsque l'objet lui-même est en lecture seule.
+
+## Spécifications
+
+| Spécification                                                                                | Statut                   | Commentaire         |
+| -------------------------------------------------------------------------------------------- | ------------------------ | ------------------- |
+| {{SpecName("SVG1.1", "coords.html#InterfaceSVGMatrix", "SVGMatrix")}} | {{Spec2("SVG1.1")}} | Définition initiale |
+
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.SVGMatrix")}}</p>
+{{Compat("api.SVGMatrix")}}
diff --git a/files/fr/web/api/svgrect/index.md b/files/fr/web/api/svgrect/index.md
index 96251b83cf..39d3c7663d 100644
--- a/files/fr/web/api/svgrect/index.md
+++ b/files/fr/web/api/svgrect/index.md
@@ -5,106 +5,68 @@ tags:
   - Rectangle
 translation_of: Web/API/SVGRect
 ---
-<h2 id="Interface_SVG_rect">Interface SVG rect</h2>
+## Interface SVG rect
 
-<p><code>SVGRect</code> représente la géométrie rectangulaire. Les rectangles consistent en une paire de coordonnées (x,y) correspondant à une valeur X minimale, une valeur Y minimale, et une largeur et hauteur, lesquelles sont habituellement positives.</p>
+`SVGRect` représente la géométrie rectangulaire. Les rectangles consistent en une paire de coordonnées (x,y) correspondant à une valeur X minimale, une valeur Y minimale, et une largeur et hauteur, lesquelles sont habituellement positives.
 
-<p>Un objet <code>SVGRect </code>peut être marqué en lecture-seule, ce qui signifie que les tentatives de modification sur cet objet entraîneront un lancement d'exception.</p>
+Un objet `SVGRect `peut être marqué en lecture-seule, ce qui signifie que les tentatives de modification sur cet objet entraîneront un lancement d'exception.
 
-<h3 id="Vue_d'ensemble_de_l'interface">Vue d'ensemble de l'interface</h3>
+### Vue d'ensemble de l'interface
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Implémente aussi</th>
-   <td><em>Aucune</em></td>
-  </tr>
-  <tr>
-   <th scope="row">Méthodes</th>
-   <td><em>Aucune</em></td>
-  </tr>
-  <tr>
-   <th scope="row">Propriétés</th>
-   <td>
-    <ul>
-     <li>float <code>x</code></li>
-     <li>float <code>y</code></li>
-     <li>float <code>width</code></li>
-     <li>float <code>height</code></li>
-    </ul>
-   </td>
-  </tr>
-  <tr>
-   <th scope="row">Document normatif</th>
-   <td><a href="http://www.w3.org/TR/SVG11/types.html#InterfaceSVGRect">SVG 1.1 (2nd Edition)</a></td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Implémente aussi</th>
+      <td><em>Aucune</em></td>
+    </tr>
+    <tr>
+      <th scope="row">Méthodes</th>
+      <td><em>Aucune</em></td>
+    </tr>
+    <tr>
+      <th scope="row">Propriétés</th>
+      <td>
+        <ul>
+          <li>float <code>x</code></li>
+          <li>float <code>y</code></li>
+          <li>float <code>width</code></li>
+          <li>float <code>height</code></li>
+        </ul>
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Document normatif</th>
+      <td>
+        <a href="http://www.w3.org/TR/SVG11/types.html#InterfaceSVGRect"
+          >SVG 1.1 (2nd Edition)</a
+        >
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th>Nom</th>
-   <th>Type</th>
-   <th>Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>x</code></td>
-   <td>float</td>
-   <td>La coordonnée <em>x</em> du rectangle, en unité utilisateur.</td>
-  </tr>
-  <tr>
-   <td><code>y</code></td>
-   <td>float</td>
-   <td>La coordonnée <em>y</em> du rectangle, en unité utilisateur.</td>
-  </tr>
-  <tr>
-   <td><code>width</code></td>
-   <td>float</td>
-   <td>La largeur <em>width</em> du rectangle, en unité utilisateur.</td>
-  </tr>
-  <tr>
-   <td><code>height</code></td>
-   <td>float</td>
-   <td>La hauteur <em>height</em> du rectangle, en unité utilisateur.</td>
-  </tr>
- </tbody>
-</table>
+| Nom      | Type  | Description                                             |
+| -------- | ----- | ------------------------------------------------------- |
+| `x`      | float | La coordonnée _x_ du rectangle, en unité utilisateur.   |
+| `y`      | float | La coordonnée _y_ du rectangle, en unité utilisateur.   |
+| `width`  | float | La largeur _width_ du rectangle, en unité utilisateur.  |
+| `height` | float | La hauteur _height_ du rectangle, en unité utilisateur. |
 
-<p><strong>Exceptions à l'affectation :</strong> une <code><a href="DOMException" rel="custom">DOMException</a></code> avec le code <code>NO_MODIFICATION_ALLOWED_ERR</code> est levée lors d'une tentative de modification d'un attribut en lecture-seule.</p>
+**Exceptions à l'affectation :** une [`DOMException`](DOMException) avec le code `NO_MODIFICATION_ALLOWED_ERR` est levée lors d'une tentative de modification d'un attribut en lecture-seule.
 
-<h2 id="Méthodes">Méthodes</h2>
+## Méthodes
 
-<p>L'interface <code>SVGRect</code> ne fournit pas de méthode spécifique.</p>
+L'interface `SVGRect` ne fournit pas de méthode spécifique.
 
-<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("Geometry Interfaces", "#DOMRect", "DOMRect")}}</td>
-      <td>{{Spec2("Geometry Interfaces")}}</td>
-      <td>Changement de SVGRect en tant qu'ancien alias de DOMRect.</td>
-    </tr>
-    <tr>
-      <td>{{SpecName("SVG1.1", "types.html#InterfaceSVGRect", "SVGRect")}}</td>
-      <td>{{Spec2("SVG1.1")}}</td>
-      <td>Définition initiale</td>
-    </tr>
- </tbody>
-</table>
+| Spécification                                                                        | Statut                                       | Commentaire                                               |
+| ------------------------------------------------------------------------------------ | -------------------------------------------- | --------------------------------------------------------- |
+| {{SpecName("Geometry Interfaces", "#DOMRect", "DOMRect")}}         | {{Spec2("Geometry Interfaces")}} | Changement de SVGRect en tant qu'ancien alias de DOMRect. |
+| {{SpecName("SVG1.1", "types.html#InterfaceSVGRect", "SVGRect")}} | {{Spec2("SVG1.1")}}                     | Définition initiale                                       |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.SVGRect")}}</p>
+{{Compat("api.SVGRect")}}
diff --git a/files/fr/web/api/svgrectelement/index.md b/files/fr/web/api/svgrectelement/index.md
index 98104ed8b1..7e4daf3eb8 100644
--- a/files/fr/web/api/svgrectelement/index.md
+++ b/files/fr/web/api/svgrectelement/index.md
@@ -3,67 +3,46 @@ title: SVGRectElement
 slug: Web/API/SVGRectElement
 translation_of: Web/API/SVGRectElement
 ---
-<div>{{APIRef("SVG")}}</div>
+{{APIRef("SVG")}}
 
-<p>L'interface <code>SVGRectElement</code> fournit un accès aux propriétés et aux méthodes de l'élément {{SVGElement("rect")}}.</p>
+L'interface `SVGRectElement` fournit un accès aux propriétés et aux méthodes de l'élément {{SVGElement("rect")}}.
 
-<p>{{InheritanceDiagram(600, 140)}}</p>
+{{InheritanceDiagram(600, 140)}}
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<p><em>Cette interface hérite aussi des propriétés de </em><em>{{domxref("SVGGeometryElement")}}.</em></p>
+_Cette interface hérite aussi des propriétés de_ _{{domxref("SVGGeometryElement")}}._
 
-<dl>
- <dt>{{domxref("SVGRectElement.x")}} {{ReadOnlyInline}}</dt>
- <dd>Retourne un {{domxref("SVGAnimatedLength")}} correspondant à l'attribut {{SVGAttr("x")}} de l'élément {{SVGElement("rect")}} donné.</dd>
- <dt>{{domxref("SVGRectElement.x")}} {{ReadOnlyInline}}</dt>
- <dd>Retourne un {{domxref("SVGAnimatedLength")}}  correspondant à l'attribut {{SVGAttr("x")}} de l'élément {{SVGElement("rect")}} donné.</dd>
- <dt>{{domxref("SVGRectElement.y")}} {{ReadOnlyInline}}</dt>
- <dd>Retourne un {{domxref("SVGAnimatedLength")}} correspondant à l'attribut {{SVGAttr("y")}} de l'élément {{SVGElement("rect")}} donné.</dd>
- <dt>{{domxref("SVGRectElement.width")}} {{ReadOnlyInline}}</dt>
- <dd>Retourne un {{domxref("SVGAnimatedLength")}} correspondant à l'attribut {{SVGAttr("width")}} de l'élément {{SVGElement("rect")}} donné.</dd>
- <dt>{{domxref("SVGRectElement.height")}} {{ReadOnlyInline}}</dt>
- <dd>Retourne un {{domxref("SVGAnimatedLength")}} correspondant à l'attribut {{SVGAttr("height")}} de l'élément {{SVGElement("rect")}} donné.</dd>
- <dt>{{domxref("SVGRectElement.rx")}} {{ReadOnlyInline}}</dt>
- <dd>Retourne un {{domxref("SVGAnimatedLength")}} correspondant à l'attribut {{SVGAttr("rx")}} de l'élément {{SVGElement("rect")}} donné.</dd>
- <dt>{{domxref("SVGRectElement.ry")}} {{ReadOnlyInline}}</dt>
- <dd>Retourne un {{domxref("SVGAnimatedLength")}} correspondant à l'attribut {{SVGAttr("ry")}} de l'élément {{SVGElement("rect")}} donné.</dd>
-</dl>
+- {{domxref("SVGRectElement.x")}} {{ReadOnlyInline}}
+  - : Retourne un {{domxref("SVGAnimatedLength")}} correspondant à l'attribut {{SVGAttr("x")}} de l'élément {{SVGElement("rect")}} donné.
+- {{domxref("SVGRectElement.x")}} {{ReadOnlyInline}}
+  - : Retourne un {{domxref("SVGAnimatedLength")}}  correspondant à l'attribut {{SVGAttr("x")}} de l'élément {{SVGElement("rect")}} donné.
+- {{domxref("SVGRectElement.y")}} {{ReadOnlyInline}}
+  - : Retourne un {{domxref("SVGAnimatedLength")}} correspondant à l'attribut {{SVGAttr("y")}} de l'élément {{SVGElement("rect")}} donné.
+- {{domxref("SVGRectElement.width")}} {{ReadOnlyInline}}
+  - : Retourne un {{domxref("SVGAnimatedLength")}} correspondant à l'attribut {{SVGAttr("width")}} de l'élément {{SVGElement("rect")}} donné.
+- {{domxref("SVGRectElement.height")}} {{ReadOnlyInline}}
+  - : Retourne un {{domxref("SVGAnimatedLength")}} correspondant à l'attribut {{SVGAttr("height")}} de l'élément {{SVGElement("rect")}} donné.
+- {{domxref("SVGRectElement.rx")}} {{ReadOnlyInline}}
+  - : Retourne un {{domxref("SVGAnimatedLength")}} correspondant à l'attribut {{SVGAttr("rx")}} de l'élément {{SVGElement("rect")}} donné.
+- {{domxref("SVGRectElement.ry")}} {{ReadOnlyInline}}
+  - : Retourne un {{domxref("SVGAnimatedLength")}} correspondant à l'attribut {{SVGAttr("ry")}} de l'élément {{SVGElement("rect")}} donné.
 
-<h2 id="Méthode">Méthode</h2>
+## Méthode
 
-<p><em>Cette interface n'implémente pas de méthodes spécifiques mais elle hérite des méthodes parentes de <em>{{domxref("SVGGeometryElement")}}</em></em>.</p>
+_Cette interface n'implémente pas de méthodes spécifiques mais elle hérite des méthodes parentes de _{{domxref("SVGGeometryElement")}}\*\*.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName("SVG2", "shapes.html#InterfaceSVGRectElement", "SVGRectElement")}}</td>
-   <td>{{Spec2('SVG2')}}</td>
-   <td>Remplace l'héritage de {{domxref("SVGElement")}}{{domxref("SVGTests")}}, {{domxref("SVGLangSpace")}}, {{domxref("SVGExternalResourcesRequired")}}, {{domxref("SVGStylable")}} et {{domxref("SVGTransformable")}} par {{domxref("SVGGeometryElement")}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("SVG1.1", "shapes.html#InterfaceSVGRectElement", "SVGRectElement")}}</td>
-   <td>{{Spec2('SVG1.1')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Specification                                                                                            | Status                   | Comment                                                                                                                                                                                                                                                                                                                    |
+| -------------------------------------------------------------------------------------------------------- | ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName("SVG2", "shapes.html#InterfaceSVGRectElement", "SVGRectElement")}} | {{Spec2('SVG2')}} | Remplace l'héritage de {{domxref("SVGElement")}}{{domxref("SVGTests")}}, {{domxref("SVGLangSpace")}}, {{domxref("SVGExternalResourcesRequired")}}, {{domxref("SVGStylable")}} et {{domxref("SVGTransformable")}} par {{domxref("SVGGeometryElement")}} |
+| {{SpecName("SVG1.1", "shapes.html#InterfaceSVGRectElement", "SVGRectElement")}} | {{Spec2('SVG1.1')}} | Définition initiale                                                                                                                                                                                                                                                                                                        |
 
-<h2 id="Browser_compatibility">Browser compatibility</h2>
+## Browser compatibility
 
+{{Compat("api.SVGRectElement")}}
 
+## Voir aussi
 
-<p>{{Compat("api.SVGRectElement")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{SVGElement("rect")}}</li>
-</ul>
+- {{SVGElement("rect")}}
diff --git a/files/fr/web/api/svgtitleelement/index.md b/files/fr/web/api/svgtitleelement/index.md
index 1a29aaefd1..1f3ac78830 100644
--- a/files/fr/web/api/svgtitleelement/index.md
+++ b/files/fr/web/api/svgtitleelement/index.md
@@ -8,67 +8,59 @@ tags:
   - Title
 translation_of: Web/API/SVGTitleElement
 ---
-<div>{{APIRef("SVG")}}</div>
+{{APIRef("SVG")}}
 
-<h2 id="Interface_DOM_de_l'élément_SVG_title">Interface DOM de l'élément SVG <code>title</code></h2>
+## Interface DOM de l'élément SVG `title`
 
-<p>L'interface <code>SVGTitleElement</code> correspond à l'élément {{ SVGElement("title") }}.</p>
+L'interface `SVGTitleElement` correspond à l'élément {{ SVGElement("title") }}.
 
-<h3 id="Aperçu_de_l'interface">Aperçu de l'interface</h3>
+### Aperçu de l'interface
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Implémente aussi</th>
-   <td>{{ domxref("SVGElement") }}, {{ domxref("SVGLangSpace") }}, {{ domxref("SVGStylable") }}</td>
-  </tr>
-  <tr>
-   <th scope="row">Metodes</th>
-   <td><em>Aucunes</em></td>
-  </tr>
-  <tr>
-   <th scope="row">Propritiétés</th>
-   <td><em>Aucunes</em></td>
-  </tr>
-  <tr>
-   <th scope="row">Norme</th>
-   <td><a href="http://www.w3.org/TR/SVG11/struct.html#InterfaceSVGTitleElement">SVG 1.1 (2nd Edition)</a></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<p>L'interface <code>SVGTitleElement</code> n'a pas de propriétés spécifiques.</p>
-
-<h2 id="Methods">Méthodes</h2>
-
-<p>L'interface <code>SVGTitleElement</code> n'a pas de métodes spécifiques.</p>
-
-<h2 id="Specifications">Spécifications</h2>
-
-<table class="standard-table">
-  <thead>
+  <tbody>
     <tr>
-      <th scope="col">Spécification</th>
-      <th scope="col">Statut</th>
-      <th scope="col">Commentaire</th>
+      <th scope="row">Implémente aussi</th>
+      <td>
+        {{ domxref("SVGElement") }},
+        {{ domxref("SVGLangSpace") }},
+        {{ domxref("SVGStylable") }}
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Metodes</th>
+      <td><em>Aucunes</em></td>
     </tr>
-  </thead>
-  <tbody>
     <tr>
-      <td>{{SpecName("SVG2", "struct.html#InterfaceSVGTitleElement", "SVGTitleElement")}}</td>
-      <td>{{Spec2("SVG2")}}</td>
-      <td>Suppression de l'héritage de {{domxref("SVGLangSpace")}} et {{domxref("SVGStylable")}}.</td>
+      <th scope="row">Propritiétés</th>
+      <td><em>Aucunes</em></td>
     </tr>
     <tr>
-      <td>{{SpecName("SVG1.1", "struct.html#InterfaceSVGTitleElement", "SVGTitleElement")}}</td>
-      <td>{{Spec2("SVG1.1")}}</td>
-      <td>Définition initiale.</td>
+      <th scope="row">Norme</th>
+      <td>
+        <a
+          href="http://www.w3.org/TR/SVG11/struct.html#InterfaceSVGTitleElement"
+          >SVG 1.1 (2nd Edition)</a
+        >
+      </td>
     </tr>
   </tbody>
 </table>
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Propriétés
+
+L'interface `SVGTitleElement` n'a pas de propriétés spécifiques.
+
+## Méthodes
+
+L'interface `SVGTitleElement` n'a pas de métodes spécifiques.
+
+## Spécifications
+
+| Spécification                                                                                                | Statut                   | Commentaire                                                                                                |
+| ------------------------------------------------------------------------------------------------------------ | ------------------------ | ---------------------------------------------------------------------------------------------------------- |
+| {{SpecName("SVG2", "struct.html#InterfaceSVGTitleElement", "SVGTitleElement")}}     | {{Spec2("SVG2")}} | Suppression de l'héritage de {{domxref("SVGLangSpace")}} et {{domxref("SVGStylable")}}. |
+| {{SpecName("SVG1.1", "struct.html#InterfaceSVGTitleElement", "SVGTitleElement")}} | {{Spec2("SVG1.1")}} | Définition initiale.                                                                                       |
+
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.SVGTitleElement")}}</p>
+{{Compat("api.SVGTitleElement")}}
diff --git a/files/fr/web/api/syncmanager/index.md b/files/fr/web/api/syncmanager/index.md
index 494d730c82..9960d40f56 100644
--- a/files/fr/web/api/syncmanager/index.md
+++ b/files/fr/web/api/syncmanager/index.md
@@ -3,44 +3,27 @@ title: SyncManager
 slug: Web/API/SyncManager
 translation_of: Web/API/SyncManager
 ---
-<p>{{APIRef("Service Workers API")}}{{Non-standard_header}}</p>
+{{APIRef("Service Workers API")}}{{Non-standard_header}}
 
-<p>L'interface <strong><code>SyncManager</code></strong> de l' <a href="/en-US/docs/Web/API/ServiceWorker_API">API ServiceWorker </a> fournit une interface pour l'enregistrement et la liste des sync registrations.</p>
+L'interface **`SyncManager`** de l' [API ServiceWorker ](/en-US/docs/Web/API/ServiceWorker_API)fournit une interface pour l'enregistrement et la liste des sync registrations.
 
-<h2 id="Properties">Properties</h2>
+## Properties
 
-<p>None.</p>
+None.
 
-<h2 id="Methods">Methods</h2>
+## Methods
 
-<dl>
- <dt>{{domxref("SyncManager.register")}}</dt>
- <dd>Créé une nouvelle sync registration et retourne une {{jsxref("Promise")}}</dd>
- <dt>{{domxref("SyncManager.getTags")}}</dt>
- <dd>Renvoie une liste d'identifiants définis par le développeur pour l'enregistrement  du SyncManager.</dd>
-</dl>
+- {{domxref("SyncManager.register")}}
+  - : Créé une nouvelle sync registration et retourne une {{jsxref("Promise")}}
+- {{domxref("SyncManager.getTags")}}
+  - : Renvoie une liste d'identifiants définis par le développeur pour l'enregistrement  du SyncManager.
 
-<h2 id="Specifications">Specifications</h2>
+## Specifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Background Sync','#sync-manager-interface','SyncManager')}}</td>
-   <td>{{Spec2('Background Sync')}}</td>
-   <td>Initial definition.</td>
-  </tr>
- </tbody>
-</table>
+| Specification                                                                                    | Status                               | Comment             |
+| ------------------------------------------------------------------------------------------------ | ------------------------------------ | ------------------- |
+| {{SpecName('Background Sync','#sync-manager-interface','SyncManager')}} | {{Spec2('Background Sync')}} | Initial definition. |
 
-<h2 id="Browser_compatibility">Browser compatibility</h2>
+## Browser compatibility
 
-<div>
-
-
-<p>{{Compat("api.SyncManager")}}</p>
-</div>
+{{Compat("api.SyncManager")}}
diff --git a/files/fr/web/api/text/index.md b/files/fr/web/api/text/index.md
index 37dfffb61a..d12428b709 100644
--- a/files/fr/web/api/text/index.md
+++ b/files/fr/web/api/text/index.md
@@ -6,95 +6,57 @@ tags:
   - DOM
 translation_of: Web/API/Text
 ---
-<p>{{ApiRef("DOM")}}</p>
-
-<p>L'interface <strong><code>Text</code></strong> représente le contenu textuel d'un élément {{domxref("Element")}} ou d'un attribut {{domxref("Attr")}}. Si un élément n'a pas de balisage dans son contenu, il a un seul enfant implémentant <code>Text</code> qui contient le texte de l'élément.  Par contre, si l'élément contient un balisage, il est analysé par les éléments d'information et les noeuds <code>Text</code> qui sont ses enfants.</p>
-
-<p>Un nouveau document a un unique noeud <code>Text</code> pour chaque bloc de texte. Au fil du temps, d'autres noeuds peuvent être créés <code>Text</code> en temps que modification du contenu du document.  La méthode {{domxref("Node.normalize()")}}  fusionne les objets <code>Text</code>  dans un seul noeud pour chaque bloc de texte.</p>
-
-<p>{{InheritanceDiagram}}</p>
-
-<h2 id="Methods">Constructeur</h2>
-
-<dl>
- <dt>{{domxref("Text.Text", "Text()")}} {{experimental_inline}}</dt>
- <dd>Retourne un noeud <code>Text</code> avec le paramètre comme contenu textuel.</dd>
-</dl>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<p><em>Hérite des propriétés de son parent {{domxref("CharacterData")}}.</em></p>
-
-<dl>
- <dt>{{domxref("Text.isElementContentWhitespace")}} {{readonlyInline}}{{ obsolete_inline() }}</dt>
- <dd>
- <p>Renvoie une marque {{domxref("Boolean")}} indiquant si le noeud de texte contient uniquement des espaces.</p>
- </dd>
- <dt>{{domxref("Text.wholeText")}} {{readonlyInline}}</dt>
- <dd>Renvoie une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) contenant le texte de tous les noeuds <code>Text</code> adjacents logiquement à ce {{domxref("Node")}}, concaténé dans l'ordre du document.</dd>
- <dt>{{domxref("Text.assignedSlot")}} {{readonlyinline}}</dt>
- <dd>Retourne l'objet {{domxref("HTMLSlotElement")}}  associé à l'élément.</dd>
-</dl>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<p><em>Hérite des méthodes de son parent {{domxref("CharacterData")}}.</em></p>
-
-<dl>
-</dl>
-
-<dl>
- <dt>{{domxref("Text.replaceWholeText")}} {{ obsolete_inline() }}</dt>
- <dd>Remplace le texte du noeud en cours et tous les noeuds logiquement adjacents avec le texte spécifié.</dd>
-</dl>
-
-<dl>
- <dt>{{domxref("Text.splitText")}}</dt>
- <dd>Fractionne le noeud en deux noeuds selon un décalage spécifié.</dd>
-</dl>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#text', 'Text')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Suppression de la propriété <code>isElementContentWhitespace</code>.<br>
-    Suppression de la méthode <code>replaceWholeText()</code>.<br>
-    Ajout du constructeur <code>Text()</code>.<br>
-    Ajout de la propriété <code>assignedSlot</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM3 Core', 'core.html#ID-1312295772', 'Text')}}</td>
-   <td>{{Spec2('DOM3 Core')}}</td>
-   <td>Ajout des propriétés <code>isElementContentWhitespace</code> et <code>wholeText</code>.<br>
-    Ajout de la méthode <code>replaceWholeText()</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Core', 'core.html#ID-1312295772', 'Text')}}</td>
-   <td>{{Spec2('DOM2 Core')}}</td>
-   <td>Pas de changement depuis {{SpecName('DOM1')}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM1', 'level-one-core.html#ID-1312295772', 'Text')}}</td>
-   <td>{{Spec2('DOM1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Text")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/Document_Object_Model">Référence du DOM</a></li>
-</ul>
+{{ApiRef("DOM")}}
+
+L'interface **`Text`** représente le contenu textuel d'un élément {{domxref("Element")}} ou d'un attribut {{domxref("Attr")}}. Si un élément n'a pas de balisage dans son contenu, il a un seul enfant implémentant `Text` qui contient le texte de l'élément.  Par contre, si l'élément contient un balisage, il est analysé par les éléments d'information et les noeuds `Text` qui sont ses enfants.
+
+Un nouveau document a un unique noeud `Text` pour chaque bloc de texte. Au fil du temps, d'autres noeuds peuvent être créés `Text` en temps que modification du contenu du document.  La méthode {{domxref("Node.normalize()")}}  fusionne les objets `Text`  dans un seul noeud pour chaque bloc de texte.
+
+{{InheritanceDiagram}}
+
+## Constructeur
+
+- {{domxref("Text.Text", "Text()")}} {{experimental_inline}}
+  - : Retourne un noeud `Text` avec le paramètre comme contenu textuel.
+
+## Propriétés
+
+_Hérite des propriétés de son parent {{domxref("CharacterData")}}._
+
+- {{domxref("Text.isElementContentWhitespace")}} {{readonlyInline}}{{ obsolete_inline() }}
+  - : Renvoie une marque {{domxref("Boolean")}} indiquant si le noeud de texte contient uniquement des espaces.
+- {{domxref("Text.wholeText")}} {{readonlyInline}}
+  - : Renvoie une {{domxref("DOMString")}} (_chaîne de caractères_) contenant le texte de tous les noeuds `Text` adjacents logiquement à ce {{domxref("Node")}}, concaténé dans l'ordre du document.
+- {{domxref("Text.assignedSlot")}} {{readonlyinline}}
+  - : Retourne l'objet {{domxref("HTMLSlotElement")}}  associé à l'élément.
+
+## Méthodes
+
+_Hérite des méthodes de son parent {{domxref("CharacterData")}}._
+
+<!---->
+
+- {{domxref("Text.replaceWholeText")}} {{ obsolete_inline() }}
+  - : Remplace le texte du noeud en cours et tous les noeuds logiquement adjacents avec le texte spécifié.
+
+<!---->
+
+- {{domxref("Text.splitText")}}
+  - : Fractionne le noeud en deux noeuds selon un décalage spécifié.
+
+## Spécifications
+
+| Spécification                                                                            | Statut                           | Commentaire                                                                                                                                                                     |
+| ---------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('DOM WHATWG', '#text', 'Text')}}                                 | {{Spec2('DOM WHATWG')}} | Suppression de la propriété `isElementContentWhitespace`. Suppression de la méthode `replaceWholeText()`. Ajout du constructeur `Text()`. Ajout de la propriété `assignedSlot`. |
+| {{SpecName('DOM3 Core', 'core.html#ID-1312295772', 'Text')}}         | {{Spec2('DOM3 Core')}}     | Ajout des propriétés `isElementContentWhitespace` et `wholeText`. Ajout de la méthode `replaceWholeText()`.                                                                     |
+| {{SpecName('DOM2 Core', 'core.html#ID-1312295772', 'Text')}}         | {{Spec2('DOM2 Core')}}     | Pas de changement depuis {{SpecName('DOM1')}}.                                                                                                                          |
+| {{SpecName('DOM1', 'level-one-core.html#ID-1312295772', 'Text')}} | {{Spec2('DOM1')}}         | Définition initiale.                                                                                                                                                            |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Text")}}
+
+## Voir aussi
+
+- [Référence du DOM](/fr/docs/Web/API/Document_Object_Model)
diff --git a/files/fr/web/api/text/splittext/index.md b/files/fr/web/api/text/splittext/index.md
index 32b259df12..079275794c 100644
--- a/files/fr/web/api/text/splittext/index.md
+++ b/files/fr/web/api/text/splittext/index.md
@@ -3,29 +3,29 @@ title: Text.splitText()
 slug: Web/API/Text/splitText
 translation_of: Web/API/Text/splitText
 ---
-<div>{{apiref("DOM")}}</div>
+{{apiref("DOM")}}
 
-<p>La méthode <strong><code>Text.splitText()</code></strong> sépare le nœud {{domxref("Text")}} en deux nœuds au niveau de l’indice spécifié, et conserve les deux nœuds dans l’arbre en tant que voisins.</p>
+La méthode **`Text.splitText()`** sépare le nœud {{domxref("Text")}} en deux nœuds au niveau de l’indice spécifié, et conserve les deux nœuds dans l’arbre en tant que voisins.
 
-<p>Après la séparation, le nœud actuel contient tout le texte jusqu’à l’indice spécifié, et un nœud nouvellement créé du même type contient le texte restant. Le nœud nouvellement créé est retourné à l’appelant. Si le nœud original avait un parent, le nouveau nœud est inséré en tant que voisin suivant du nœud original. Si l’indice est égal à la longueur du nœud original, le nœud nouvellement créé ne contient pas de données.</p>
+Après la séparation, le nœud actuel contient tout le texte jusqu’à l’indice spécifié, et un nœud nouvellement créé du même type contient le texte restant. Le nœud nouvellement créé est retourné à l’appelant. Si le nœud original avait un parent, le nouveau nœud est inséré en tant que voisin suivant du nœud original. Si l’indice est égal à la longueur du nœud original, le nœud nouvellement créé ne contient pas de données.
 
-<p>Des nœuds texte séparés peuvent être concaténés en utilisant la méthode {{domxref("Node.normalize()")}}.</p>
+Des nœuds texte séparés peuvent être concaténés en utilisant la méthode {{domxref("Node.normalize()")}}.
 
-<p>Une {{domxref("DOMException")}} avec la valeur <code>INDEX_SIZE_ERR</code> est levée si l’indice spécifié est négatif ou est supérieur au nombre d’unités 16-bit dans le texte du nœud ; une {{domxref("DOMException")}} avec la valeur <code>NO_MODIFICATION_ALLOWED_ERR</code> est levée si le nœud est en lecture seule.</p>
+Une {{domxref("DOMException")}} avec la valeur `INDEX_SIZE_ERR` est levée si l’indice spécifié est négatif ou est supérieur au nombre d’unités 16-bit dans le texte du nœud ; une {{domxref("DOMException")}} avec la valeur `NO_MODIFICATION_ALLOWED_ERR` est levée si le nœud est en lecture seule.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>noeudRemplacant</em> = <em>noeudTexte</em>.splitText(indice)
-</pre>
+    noeudRemplacant = noeudTexte.splitText(indice)
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Dans cet exemple, le nœud texte d’un {{HTMLElement("p")}} est séparé en deux nœuds texte et un {{HTMLElement("span")}} est inséré entre les deux.</p>
+Dans cet exemple, le nœud texte d’un {{HTMLElement("p")}} est séparé en deux nœuds texte et un {{HTMLElement("span")}} est inséré entre les deux.
 
-<pre class="brush:html">&lt;body&gt;
-  &lt;p id="p"&gt;foobar&lt;/p&gt;
+```html
+<body>
+  <p id="p">foobar</p>
 
-  &lt;script type="text/javascript"&gt;
+  <script type="text/javascript">
     var p = document.getElementById('p');
     var noeudTexte = p.firstChild;
 
@@ -39,50 +39,25 @@ translation_of: Web/API/Text/splitText
     // ajoute le span avant 'bar'
     p.insertBefore(span, noeudRemplacant);
 
-    // le résultat est &lt;p id="p"&gt;foo&lt;span&gt; contenu du span &lt;/span&gt;bar&lt;/p&gt;
-  &lt;/script&gt;
-&lt;/body&gt;
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#dom-text-splittext', 'Text.splitText')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Pas de changement depuis {{SpecName('DOM3 Core')}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM3 Core', 'core.html#ID-38853C1D', 'Text.splitText')}}</td>
-   <td>{{Spec2('DOM3 Core')}}</td>
-   <td>Pas de changement depuis {{SpecName('DOM2 Core')}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Core', 'core.html#ID-38853C1D', 'Text.splitText')}}</td>
-   <td>{{Spec2('DOM2 Core')}}</td>
-   <td>Pas de changement depuis {{SpecName('DOM1')}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM1', 'level-one-core.html#ID-38853C1D', 'Text.splitText')}}</td>
-   <td>{{Spec2('DOM1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Text.splitText")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>L’interface {{domxref("Text")}} à laquelle cette méthode appartient.</li>
- <li>La méthode opposée : {{domxref("Node.normalize")}}.</li>
-</ul>
+    // le résultat est <p id="p">foo<span> contenu du span </span>bar</p>
+  </script>
+</body>
+```
+
+## Spécifications
+
+| Spécification                                                                                    | Statut                           | Commentaires                                               |
+| ------------------------------------------------------------------------------------------------ | -------------------------------- | ---------------------------------------------------------- |
+| {{SpecName('DOM WHATWG', '#dom-text-splittext', 'Text.splitText')}}         | {{Spec2('DOM WHATWG')}} | Pas de changement depuis {{SpecName('DOM3 Core')}}. |
+| {{SpecName('DOM3 Core', 'core.html#ID-38853C1D', 'Text.splitText')}}     | {{Spec2('DOM3 Core')}}     | Pas de changement depuis {{SpecName('DOM2 Core')}}. |
+| {{SpecName('DOM2 Core', 'core.html#ID-38853C1D', 'Text.splitText')}}     | {{Spec2('DOM2 Core')}}     | Pas de changement depuis {{SpecName('DOM1')}}.     |
+| {{SpecName('DOM1', 'level-one-core.html#ID-38853C1D', 'Text.splitText')}} | {{Spec2('DOM1')}}         | Définition initiale.                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Text.splitText")}}
+
+## Voir aussi
+
+- L’interface {{domxref("Text")}} à laquelle cette méthode appartient.
+- La méthode opposée : {{domxref("Node.normalize")}}.
diff --git a/files/fr/web/api/textencoder/index.md b/files/fr/web/api/textencoder/index.md
index 7fb51d5498..6c9c867c62 100644
--- a/files/fr/web/api/textencoder/index.md
+++ b/files/fr/web/api/textencoder/index.md
@@ -10,51 +10,39 @@ tags:
   - TextEncoder
 translation_of: Web/API/TextEncoder
 ---
-<p>{{APIRef("Encoding API")}}{{SeeCompatTable}}</p>
+{{APIRef("Encoding API")}}{{SeeCompatTable}}
 
-<p><code><strong>TextEncoder</strong></code> prend un flux de points de code en entrée et émet un flux d'octets. Pour une bibliothèque non native plus extensible, voir <a href="/en-US/Add-ons/Code_snippets/StringView"><code>StringView</code> – une représentation des chaînes de caractères proche de celle de C basée sur les tableaux typés</a>.</p>
+**`TextEncoder`** prend un flux de points de code en entrée et émet un flux d'octets. Pour une bibliothèque non native plus extensible, voir [`StringView` – une représentation des chaînes de caractères proche de celle de C basée sur les tableaux typés](/en-US/Add-ons/Code_snippets/StringView).
 
-<div class="note">
-<p><strong>Note :</strong> Firefox, Chrome et Opera ont pour habitude de supporter les types d'encodage autres que <code>utf-8</code> (tels que <code>utf-16</code>, <code>iso-8859-2</code>, <code>koi8</code>, <code>cp1261</code>, et <code>gbk</code>). À partir de Firefox 48 ({{bug(1257877)}}), Chrome 54 (<a href="https://www.chromestatus.com/feature/5630760492990464">ticket</a>) et Opera 41, aucun type d'encodage autre que <code>utf-8</code> n'est disponible, de manière à être en accord avec la <a href="https://www.w3.org/TR/encoding/#dom-textencoder">spécification</a>. Dans tous les cas, passer un type d'encodage au constructeur sera ignoré et un TextEncoder utf-8 sera créé (le {{DOMxRef("TextDecoder")}} permet toujours d'autres types pour le décodage).</p>
-</div>
+> **Note :** Firefox, Chrome et Opera ont pour habitude de supporter les types d'encodage autres que `utf-8` (tels que `utf-16`, `iso-8859-2`, `koi8`, `cp1261`, et `gbk`). À partir de Firefox 48 ({{bug(1257877)}}), Chrome 54 ([ticket](https://www.chromestatus.com/feature/5630760492990464)) et Opera 41, aucun type d'encodage autre que `utf-8` n'est disponible, de manière à être en accord avec la [spécification](https://www.w3.org/TR/encoding/#dom-textencoder). Dans tous les cas, passer un type d'encodage au constructeur sera ignoré et un TextEncoder utf-8 sera créé (le {{DOMxRef("TextDecoder")}} permet toujours d'autres types pour le décodage).
 
-<div class="note">
-<p><strong>Note :</strong> Il y a une prothèse d'émulation d'implantation pour supporter tous les encodages hérités dans <a href="https://github.com/inexorabletash/text-encoding">GitHub</a>.</p>
-</div>
+> **Note :** Il y a une prothèse d'émulation d'implantation pour supporter tous les encodages hérités dans [GitHub](https://github.com/inexorabletash/text-encoding).
 
-<h2 id="Constructeur">Constructeur</h2>
+## Constructeur
 
-<dl>
- <dt>{{DOMxRef("TextEncoder.TextEncoder", "TextEncoder()")}}</dt>
- <dd>Retourne une nouvel objet <code>TextEncoder</code> qui génèrera un flux d'octets encodés en utf-8.</dd>
-</dl>
+- {{DOMxRef("TextEncoder.TextEncoder", "TextEncoder()")}}
+  - : Retourne une nouvel objet `TextEncoder` qui génèrera un flux d'octets encodés en utf-8.
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<p><em>L'interface <code>TextEncoder</code> n'hérite d'aucune propriété.</em></p>
+_L'interface `TextEncoder` n'hérite d'aucune propriété._
 
-<dl>
- <dt>{{DOMxRef("TextEncoder.encoding")}}{{ReadOnlyInline}}</dt>
- <dd>{{DOMxRef("DOMString")}} contenant le nom de l'encodeur, qui est une chaîne de caractères décrivant la méthode que l'objet <code>TextEncoder</code> utilisera.</dd>
-</dl>
+- {{DOMxRef("TextEncoder.encoding")}}{{ReadOnlyInline}}
+  - : {{DOMxRef("DOMString")}} contenant le nom de l'encodeur, qui est une chaîne de caractères décrivant la méthode que l'objet `TextEncoder` utilisera.
 
-<h2 id="Méthodes">Méthodes</h2>
+## Méthodes
 
-<dl>
-</dl>
+**L'interface `TextEncoder` n'hérite d'aucune propriété**.
 
-<p><em><em>L'interface <code>TextEncoder</code> n'hérite d'aucune propriété</em></em>.</p>
+- {{DOMxRef("TextEncoder.encode()")}}
+  - : Retourne un [`Uint8Array`](/en-US/docs/Web/JavaScript/Typed_arrays/Uint8Array) conternant un texte encodé en utf-8.
 
-<dl>
- <dt>{{DOMxRef("TextEncoder.encode()")}}</dt>
- <dd>Retourne un <a href="/en-US/docs/Web/JavaScript/Typed_arrays/Uint8Array"><code>Uint8Array</code></a> conternant un texte encodé en utf-8.</dd>
-</dl>
+## Prothèse d'émulation
 
-<h2 id="Prothèse_d'émulation">Prothèse d'émulation</h2>
+La prothèse d'émulation ci-dessous va uniquement répondre aux spécifications données par le W3 (par d'autre type d'encodage que UTF-8 n'est supporté, malheureusement ☹️). Elle est conçue pour fonctionner "clé en main" avec IE5. Toutefois, de IE5 à IE9, elle retournera un tableau normal plutôt qu'un tableau typé. Dans de telles circonstances et avec des navigateurs si lents, cette prothèse (ou tout autre ayant le même objectif) serait inutilisable pour de longues chaînes de caractères avec ces vieux navigateurs. Enfin, notez que vous devriez exécuter le code ci-dessous avec un minifieur (et plus particulièrement un compilateur ) to turn sequences like `0x1e << 3` into `0xf0`. These sequences are not already precomputed because they serve to aesthetically illustrate how the polyfill works.
 
-<p>La prothèse d'émulation ci-dessous va uniquement répondre aux spécifications données par le W3 (par d'autre type d'encodage que UTF-8 n'est supporté, malheureusement ☹️). Elle est conçue pour fonctionner "clé en main" avec IE5. Toutefois, de IE5 à IE9, elle retournera un tableau normal plutôt qu'un tableau typé. Dans de telles circonstances et avec des navigateurs si lents, cette prothèse (ou tout autre ayant le même objectif) serait inutilisable pour de longues chaînes de caractères avec ces vieux navigateurs. Enfin, notez que vous devriez exécuter le code ci-dessous avec un minifieur (et plus particulièrement un compilateur ) to turn sequences like <code>0x1e &lt;&lt; 3</code> into <code>0xf0</code>. These sequences are not already precomputed because they serve to aesthetically illustrate how the polyfill works.</p>
-
-<pre class="brush: js">if (typeof TextEncoder === "undefined") {
+```js
+if (typeof TextEncoder === "undefined") {
     TextEncoder=function TextEncoder(){};
     TextEncoder.prototype.encode = function encode(str) {
         "use strict";
@@ -65,21 +53,21 @@ translation_of: Web/API/TextEncoder
         var resArr = typeof Uint8Array === "undefined" ? new Array(Len * 1.5) : new Uint8Array(Len * 3);
         for (var point=0, nextcode=0, i = 0; i !== Len; ) {
             point = str.charCodeAt(i), i += 1;
-            if (point &gt;= 0xD800 &amp;&amp; point &lt;= 0xDBFF) {
+            if (point >= 0xD800 && point <= 0xDBFF) {
                 if (i === Len) {
                     resArr[resPos += 1] = 0xef/*0b11101111*/; resArr[resPos += 1] = 0xbf/*0b10111111*/;
                     resArr[resPos += 1] = 0xbd/*0b10111101*/; break;
                 }
                 // https://mathiasbynens.be/notes/javascript-encoding#surrogate-formulae
                 nextcode = str.charCodeAt(i);
-                if (nextcode &gt;= 0xDC00 &amp;&amp; nextcode &lt;= 0xDFFF) {
+                if (nextcode >= 0xDC00 && nextcode <= 0xDFFF) {
                     point = (point - 0xD800) * 0x400 + nextcode - 0xDC00 + 0x10000;
                     i += 1;
-                    if (point &gt; 0xffff) {
-                        resArr[resPos += 1] = (0x1e/*0b11110*/&lt;&lt;3) | (point&gt;&gt;&gt;18);
-                        resArr[resPos += 1] = (0x2/*0b10*/&lt;&lt;6) | ((point&gt;&gt;&gt;12)&amp;0x3f/*0b00111111*/);
-                        resArr[resPos += 1] = (0x2/*0b10*/&lt;&lt;6) | ((point&gt;&gt;&gt;6)&amp;0x3f/*0b00111111*/);
-                        resArr[resPos += 1] = (0x2/*0b10*/&lt;&lt;6) | (point&amp;0x3f/*0b00111111*/);
+                    if (point > 0xffff) {
+                        resArr[resPos += 1] = (0x1e/*0b11110*/<<3) | (point>>>18);
+                        resArr[resPos += 1] = (0x2/*0b10*/<<6) | ((point>>>12)&0x3f/*0b00111111*/);
+                        resArr[resPos += 1] = (0x2/*0b10*/<<6) | ((point>>>6)&0x3f/*0b00111111*/);
+                        resArr[resPos += 1] = (0x2/*0b10*/<<6) | (point&0x3f/*0b00111111*/);
                         continue;
                     }
                 } else {
@@ -87,15 +75,15 @@ translation_of: Web/API/TextEncoder
                     resArr[resPos += 1] = 0xbd/*0b10111101*/; continue;
                 }
             }
-            if (point &lt;= 0x007f) {
-                resArr[resPos += 1] = (0x0/*0b0*/&lt;&lt;7) | point;
-            } else if (point &lt;= 0x07ff) {
-                resArr[resPos += 1] = (0x6/*0b110*/&lt;&lt;5) | (point&gt;&gt;&gt;6);
-                resArr[resPos += 1] = (0x2/*0b10*/&lt;&lt;6)  | (point&amp;0x3f/*0b00111111*/);
+            if (point <= 0x007f) {
+                resArr[resPos += 1] = (0x0/*0b0*/<<7) | point;
+            } else if (point <= 0x07ff) {
+                resArr[resPos += 1] = (0x6/*0b110*/<<5) | (point>>>6);
+                resArr[resPos += 1] = (0x2/*0b10*/<<6)  | (point&0x3f/*0b00111111*/);
             } else {
-                resArr[resPos += 1] = (0xe/*0b1110*/&lt;&lt;4) | (point&gt;&gt;&gt;12);
-                resArr[resPos += 1] = (0x2/*0b10*/&lt;&lt;6)    | ((point&gt;&gt;&gt;6)&amp;0x3f/*0b00111111*/);
-                resArr[resPos += 1] = (0x2/*0b10*/&lt;&lt;6)    | (point&amp;0x3f/*0b00111111*/);
+                resArr[resPos += 1] = (0xe/*0b1110*/<<4) | (point>>>12);
+                resArr[resPos += 1] = (0x2/*0b10*/<<6)    | ((point>>>6)&0x3f/*0b00111111*/);
+                resArr[resPos += 1] = (0x2/*0b10*/<<6)    | (point&0x3f/*0b00111111*/);
             }
         }
         if (typeof Uint8Array !== "undefined") return resArr.subarray(0, resPos + 1);
@@ -112,38 +100,21 @@ translation_of: Web/API/TextEncoder
     } catch(e) { /*IE6-8 fallback*/ TextEncoder.prototype.encoding = "utf-8"; }
     if(typeof Symbol!=="undefined")TextEncoder.prototype[Symbol.toStringTag]="TextEncoder";
 }
-</pre>
-
-<h2 id="Specifications">Specifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName("Encoding", "#interface-textencoder", "TextEncoder")}}</td>
-   <td>{{Spec2("Encoding")}}</td>
-   <td>Initial definition.</td>
-  </tr>
- </tbody>
-</table>
+```
 
-<h2 id="Browser_compatibility">Browser compatibility</h2>
+## Specifications
 
-<div>
+| Specification                                                                            | Status                       | Comment             |
+| ---------------------------------------------------------------------------------------- | ---------------------------- | ------------------- |
+| {{SpecName("Encoding", "#interface-textencoder", "TextEncoder")}} | {{Spec2("Encoding")}} | Initial definition. |
 
+## Browser compatibility
 
-<p>{{Compat("api.TextEncoder")}}</p>
-</div>
+{{Compat("api.TextEncoder")}}
 
-<h2 id="See_also">See also</h2>
+## See also
 
-<ul>
- <li>The {{DOMxRef("TextDecoder")}} interface describing the inverse operation.</li>
- <li><a href="/en-US/Add-ons/Code_snippets/StringView"><code>StringView</code></a> – a C-like representation of strings based on typed arrays</li>
- <li>A <a href="https://github.com/inexorabletash/text-encoding">shim</a> allowing to use this interface in browsers that don't support it.</li>
- <li><code><a href="/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></code></li>
-</ul>
+- The {{DOMxRef("TextDecoder")}} interface describing the inverse operation.
+- [`StringView`](/en-US/Add-ons/Code_snippets/StringView) – a C-like representation of strings based on typed arrays
+- A [shim](https://github.com/inexorabletash/text-encoding) allowing to use this interface in browsers that don't support it.
+- [`Components.utils.importGlobalProperties`](/en-US/docs/Components.utils.importGlobalProperties)
diff --git a/files/fr/web/api/textencoder/textencoder/index.md b/files/fr/web/api/textencoder/textencoder/index.md
index 739e661142..00c86aa7e0 100644
--- a/files/fr/web/api/textencoder/textencoder/index.md
+++ b/files/fr/web/api/textencoder/textencoder/index.md
@@ -3,64 +3,36 @@ title: TextEncoder()
 slug: Web/API/TextEncoder/TextEncoder
 translation_of: Web/API/TextEncoder/TextEncoder
 ---
-<p>{{APIRef("Encoding API")}}</p>
+{{APIRef("Encoding API")}}
 
-<p>Le constructeur <code><strong>TextEncoder()</strong></code> retourne un nouvel objet {{DOMxRef("TextEncoder")}} utf-8.</p>
+Le constructeur **`TextEncoder()`** retourne un nouvel objet {{DOMxRef("TextEncoder")}} utf-8.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var>encoder</var> = new TextEncoder();
-</pre>
+    encoder = new TextEncoder();
 
-<h3 id="Paramètre">Paramètre</h3>
+### Paramètre
 
-<ul>
- <li><code>TextEncoder()</code> ne prend plus de paramètre depuis Firefox 48 et Chrome 53.</li>
-</ul>
+- `TextEncoder()` ne prend plus de paramètre depuis Firefox 48 et Chrome 53.
 
-<div class="note">
-<p><strong>Note :</strong> Avant Firefox 48 et Chrome 53, le nom de l'encodage était accepté comme un paramètre pour l'objet <code>TextEncoder</code>, depuis ces deux navigateurs ont supprimé le support pour les encodages autres que l'<code>utf-8</code> afin de respecté les <a href="https://www.w3.org/TR/encoding/#dom-textencoder">spécifications</a>. N'importe quel indication d'encodage passé au constructeur sera ignoré et un <code>utf-8</code> <code>TextEncoder</code> sera créé.</p>
-</div>
+> **Note :** Avant Firefox 48 et Chrome 53, le nom de l'encodage était accepté comme un paramètre pour l'objet `TextEncoder`, depuis ces deux navigateurs ont supprimé le support pour les encodages autres que l'`utf-8` afin de respecté les [spécifications](https://www.w3.org/TR/encoding/#dom-textencoder). N'importe quel indication d'encodage passé au constructeur sera ignoré et un `utf-8` `TextEncoder` sera créé.
 
-<h3 id="Exceptions">Exceptions</h3>
+### Exceptions
 
-<ul>
- <li><code>TextEncoder()</code> ne lève plus d’exception depuis Firefox 48 et Chrome 53</li>
-</ul>
+- `TextEncoder()` ne lève plus d’exception depuis Firefox 48 et Chrome 53
 
-<div class="note">
-<p><strong>Note :</strong> Avant Firefox 48 et Chrome 53, une exception était levée pour les types d'encodage inconnu.</p>
-</div>
+> **Note :** Avant Firefox 48 et Chrome 53, une exception était levée pour les types d'encodage inconnu.
 
-<h2 id="Spécification">Spécification</h2>
+## Spécification
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statu</th>
-   <th scope="col">Commentaire</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("Encoding", "#dom-textencoder", "TextEncoder()")}}</td>
-   <td>{{Spec2("Encoding")}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                    | Statu                        | Commentaire         |
+| -------------------------------------------------------------------------------- | ---------------------------- | ------------------- |
+| {{SpecName("Encoding", "#dom-textencoder", "TextEncoder()")}} | {{Spec2("Encoding")}} | Définition initiale |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<div>
+{{Compat("api.TextEncoder.TextEncoder")}}
 
+## Voir aussi
 
-<p>{{Compat("api.TextEncoder.TextEncoder")}}</p>
-</div>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>L'interface {{DOMxRef("TextEncoder")}} appartenant à ce constructeur.</li>
-</ul>
+- L'interface {{DOMxRef("TextEncoder")}} appartenant à ce constructeur.
diff --git a/files/fr/web/api/textmetrics/index.md b/files/fr/web/api/textmetrics/index.md
index 1343de3979..218af5eb3c 100644
--- a/files/fr/web/api/textmetrics/index.md
+++ b/files/fr/web/api/textmetrics/index.md
@@ -8,65 +8,48 @@ tags:
   - TextMetrics
 translation_of: Web/API/TextMetrics
 ---
-<div>{{APIRef("Canvas API")}}</div>
-
-<p>L'interface <strong>TextMetrics</strong> représente la dimension d'un texte dans le canevas, tel que créée par la méthode {{domxref ("CanvasRenderingContext2D.measureText()")}}.</p>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<dl>
- <dt>{{domxref("TextMetrics.width")}} {{readonlyInline}}</dt>
- <dd>est un <code>double</code> donnant la largeur calculée en pixels CSS d'un segment de texte en ligne. Il prend en compte la police en cours du contexte.</dd>
- <dt>{{domxref("TextMetrics.actualBoundingBoxLeft")}} {{readonlyInline}}</dt>
- <dd>est un <code>double</code> donnant la distance en pixels CSS parallèlement à la ligne de base entre le point d'alignement donné par la propriété {{domxref ("CanvasRenderingContext2D.textAlign")}}, et le côté gauche du rectangle délimitant du texte donné.</dd>
- <dt>{{domxref("TextMetrics.actualBoundingBoxRight")}} {{readonlyInline}}</dt>
- <dd>est un <code>double</code> donnant la distance en pixels CSS parallèlement à la ligne de base entre le point d'alignement donné par la propriété {{domxref ("CanvasRenderingContext2D.textAlign")}}, et le côté droit du rectangle délimitant du texte donné.</dd>
- <dt>{{domxref("TextMetrics.fontBoundingBoxAscent")}} {{readonlyInline}}</dt>
- <dd>est un <code>double</code> donnant la distance en pixels CSS entre la ligne horizontale indiquée par l'attribut {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et le haut du rectangle de délimitation le plus élevé de toutes les polices utilisées pour restituer le texte.</dd>
- <dt>{{domxref("TextMetrics.fontBoundingBoxDescent")}} {{readonlyInline}}</dt>
- <dd>est un <code>double</code> donnant la distance en pixels CSS entre la ligne horizontale indiquée par l'attribut {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et le bas du rectangle délimitant de toutes les polices utilisées pour restituer le texte.</dd>
- <dt>{{domxref("TextMetrics.actualBoundingBoxAscent")}} {{readonlyInline}}</dt>
- <dd>est un <code>double</code> donnant la distance en pixels CSS entre la ligne horizontale indiquée par l'attribut {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et le haut du rectangle de délimitation utilisé pour restituer le texte.</dd>
- <dt>{{domxref("TextMetrics.actualBoundingBoxDescent")}} {{readonlyInline}}</dt>
- <dd>est un <code>double</code> donnant la distance en pixels CSS entre la ligne horizontale indiquée par l'attribut {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et  le bas du rectangle de délimitation utilisé pour restituer le texte.</dd>
- <dt>{{domxref("TextMetrics.emHeightAscent")}} {{readonlyInline}}</dt>
- <dd>est un <code>double</code> donnant la distance en pixels CSS entre la ligne horizontale indiquée par la propriété {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et le haut du carré <em>em</em> dans la boîte de ligne.</dd>
- <dt>{{domxref("TextMetrics.emHeightDescent")}} {{readonlyInline}}</dt>
- <dd>est un <code>double</code> donnant la distance en pixels CSS entre la ligne horizontale indiquée par la propriété {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et le bas du carré <em>em</em> dans la boîte de ligne.</dd>
- <dt>{{domxref("TextMetrics.hangingBaseline")}} {{readonlyInline}}</dt>
- <dd>est un <code>double</code> donnant la distance en pixels CSS entre la ligne horizontale indiquée par la propriété {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et la ligne de base supérieure de la boîte de ligne.</dd>
- <dt>{{domxref("TextMetrics.alphabeticBaseline")}} {{readonlyInline}}</dt>
- <dd>est un <code>double</code> donnant la distance en pixels CSS entre la ligne horizontale indiquée par la propriété {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et la ligne de base alphabétique de la boîte de ligne.</dd>
- <dt>{{domxref("TextMetrics.ideographicBaseline")}} {{readonlyInline}}</dt>
- <dd>est un <code>double</code> donnant la distance en pixels CSS entre la ligne horizontale indiquée par la propriété {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et la ligne de base idéographique de la boîte de ligne.</dd>
-</dl>
-
-<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', "the-canvas-element.html#textmetrics", "TextMetrics")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Initial definition</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.TextMetrics")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>La méthode de création dans {{domxref("CanvasRenderingContext2D")}}.</li>
- <li>L'élément {{HTMLElement("canvas")}} et son interface associée, {{domxref("HTMLCanvasElement")}}</li>
-</ul>
+{{APIRef("Canvas API")}}
+
+L'interface **TextMetrics** représente la dimension d'un texte dans le canevas, tel que créée par la méthode {{domxref ("CanvasRenderingContext2D.measureText()")}}.
+
+## Propriétés
+
+- {{domxref("TextMetrics.width")}} {{readonlyInline}}
+  - : est un `double` donnant la largeur calculée en pixels CSS d'un segment de texte en ligne. Il prend en compte la police en cours du contexte.
+- {{domxref("TextMetrics.actualBoundingBoxLeft")}} {{readonlyInline}}
+  - : est un `double` donnant la distance en pixels CSS parallèlement à la ligne de base entre le point d'alignement donné par la propriété {{domxref ("CanvasRenderingContext2D.textAlign")}}, et le côté gauche du rectangle délimitant du texte donné.
+- {{domxref("TextMetrics.actualBoundingBoxRight")}} {{readonlyInline}}
+  - : est un `double` donnant la distance en pixels CSS parallèlement à la ligne de base entre le point d'alignement donné par la propriété {{domxref ("CanvasRenderingContext2D.textAlign")}}, et le côté droit du rectangle délimitant du texte donné.
+- {{domxref("TextMetrics.fontBoundingBoxAscent")}} {{readonlyInline}}
+  - : est un `double` donnant la distance en pixels CSS entre la ligne horizontale indiquée par l'attribut {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et le haut du rectangle de délimitation le plus élevé de toutes les polices utilisées pour restituer le texte.
+- {{domxref("TextMetrics.fontBoundingBoxDescent")}} {{readonlyInline}}
+  - : est un `double` donnant la distance en pixels CSS entre la ligne horizontale indiquée par l'attribut {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et le bas du rectangle délimitant de toutes les polices utilisées pour restituer le texte.
+- {{domxref("TextMetrics.actualBoundingBoxAscent")}} {{readonlyInline}}
+  - : est un `double` donnant la distance en pixels CSS entre la ligne horizontale indiquée par l'attribut {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et le haut du rectangle de délimitation utilisé pour restituer le texte.
+- {{domxref("TextMetrics.actualBoundingBoxDescent")}} {{readonlyInline}}
+  - : est un `double` donnant la distance en pixels CSS entre la ligne horizontale indiquée par l'attribut {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et  le bas du rectangle de délimitation utilisé pour restituer le texte.
+- {{domxref("TextMetrics.emHeightAscent")}} {{readonlyInline}}
+  - : est un `double` donnant la distance en pixels CSS entre la ligne horizontale indiquée par la propriété {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et le haut du carré _em_ dans la boîte de ligne.
+- {{domxref("TextMetrics.emHeightDescent")}} {{readonlyInline}}
+  - : est un `double` donnant la distance en pixels CSS entre la ligne horizontale indiquée par la propriété {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et le bas du carré _em_ dans la boîte de ligne.
+- {{domxref("TextMetrics.hangingBaseline")}} {{readonlyInline}}
+  - : est un `double` donnant la distance en pixels CSS entre la ligne horizontale indiquée par la propriété {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et la ligne de base supérieure de la boîte de ligne.
+- {{domxref("TextMetrics.alphabeticBaseline")}} {{readonlyInline}}
+  - : est un `double` donnant la distance en pixels CSS entre la ligne horizontale indiquée par la propriété {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et la ligne de base alphabétique de la boîte de ligne.
+- {{domxref("TextMetrics.ideographicBaseline")}} {{readonlyInline}}
+  - : est un `double` donnant la distance en pixels CSS entre la ligne horizontale indiquée par la propriété {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et la ligne de base idéographique de la boîte de ligne.
+
+## Spécifications
+
+| Spécification                                                                                                | Statut                           | Commentaire        |
+| ------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------ |
+| {{SpecName('HTML WHATWG', "the-canvas-element.html#textmetrics", "TextMetrics")}} | {{Spec2('HTML WHATWG')}} | Initial definition |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.TextMetrics")}}
+
+## Voir aussi
+
+- La méthode de création dans {{domxref("CanvasRenderingContext2D")}}.
+- L'élément {{HTMLElement("canvas")}} et son interface associée, {{domxref("HTMLCanvasElement")}}
diff --git a/files/fr/web/api/textmetrics/width/index.md b/files/fr/web/api/textmetrics/width/index.md
index 69436e4cb2..4ee47b6d47 100644
--- a/files/fr/web/api/textmetrics/width/index.md
+++ b/files/fr/web/api/textmetrics/width/index.md
@@ -9,53 +9,42 @@ tags:
   - TextMetrics
 translation_of: Web/API/TextMetrics/width
 ---
-<div>{{APIRef("Canvas API")}}</div>
+{{APIRef("Canvas API")}}
 
-<p>La propriété en lecture seule <strong>TextMetrics.width</strong> contient en pixels CSS la largeur d'avance du texte (la largeur de la boîte de ligne).</p>
+La propriété en lecture seule **TextMetrics.width** contient en pixels CSS la largeur d'avance du texte (la largeur de la boîte de ligne).
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var>readonly <em>metrics</em></var>.width;</pre>
+    readonly metrics.width;
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Étant donné cet élément {{HTMLElement("canvas")}} :</p>
+Étant donné cet élément {{HTMLElement("canvas")}} :
 
-<pre class="brush: html">&lt;canvas id="canevas"&gt;&lt;/canvas&gt;
-</pre>
+```html
+<canvas id="canevas"></canvas>
+```
 
-<p>vous pouvez obtenir un objet {{domxref("TextMetrics")}} en utilisant le code suivant :</p>
+vous pouvez obtenir un objet {{domxref("TextMetrics")}} en utilisant le code suivant :
 
-<pre class="brush: js">var canvas = document.getElementById("canevas");
+```js
+var canvas = document.getElementById("canevas");
 var ctx = canvas.getContext("2d");
 
 var texte = ctx.measureText("foo"); // objet TextMetrics
 texte.width; // 16;
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "scripting.html#dom-textmetrics-width", "TextMetrics.width")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.TextMetrics.width")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("TextMetrics")}}</li>
-</ul>
+```
+
+## Spécifications
+
+| Spécification                                                                                                        | Statut                           | Commentaire |
+| -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- |
+| {{SpecName('HTML WHATWG', "scripting.html#dom-textmetrics-width", "TextMetrics.width")}} | {{Spec2('HTML WHATWG')}} |             |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.TextMetrics.width")}}
+
+## Voir aussi
+
+- {{domxref("TextMetrics")}}
diff --git a/files/fr/web/api/timeranges/index.md b/files/fr/web/api/timeranges/index.md
index e2b8b214c4..24e46891d4 100644
--- a/files/fr/web/api/timeranges/index.md
+++ b/files/fr/web/api/timeranges/index.md
@@ -13,50 +13,49 @@ tags:
   - Référence(2)
 translation_of: Web/API/TimeRanges
 ---
-<p>{{ APIRef }}</p>
+{{ APIRef }}
 
-<p>{{ gecko_minversion_header("2.0") }}</p>
+{{ gecko_minversion_header("2.0") }}
 
-<p>L'interface TimeRanges est utilisée pour représenter un ensemble de plages de temps, principalement dans le but de savoir quelles portions du média ont été mises en mémoire tampon lors du chargement avec les éléments {{ HTMLElement("audio") }} et {{ HTMLElement("video") }}.</p>
+L'interface TimeRanges est utilisée pour représenter un ensemble de plages de temps, principalement dans le but de savoir quelles portions du média ont été mises en mémoire tampon lors du chargement avec les éléments {{ HTMLElement("audio") }} et {{ HTMLElement("video") }}.
 
-<p>Un objet TimeRanges comprend une ou plusieurs plages de temps, chacune définie par une position de début et de fin. On récupère ces valeurs en utilisant les méthodes start() et end(), en passant en paramètre l'index de la plage de temps que l'on souhaite récupérer.</p>
+Un objet TimeRanges comprend une ou plusieurs plages de temps, chacune définie par une position de début et de fin. On récupère ces valeurs en utilisant les méthodes start() et end(), en passant en paramètre l'index de la plage de temps que l'on souhaite récupérer.
 
-<p>Le terme "<a href="http://www.w3.org/TR/html5/the-iframe-element.html#normalized-timeranges-object">normalized TimeRanges object</a>" (objet TimeRanges normalisé) indique que les plages dans un tel objet sont ordonnées, ne se chevauchent pas, ne sont pas vides, et ne se touchent pas (les plages adjacentes sont encapsulées dans une plage plus grande).</p>
+Le terme "[normalized TimeRanges object](http://www.w3.org/TR/html5/the-iframe-element.html#normalized-timeranges-object)" (objet TimeRanges normalisé) indique que les plages dans un tel objet sont ordonnées, ne se chevauchent pas, ne sont pas vides, et ne se touchent pas (les plages adjacentes sont encapsulées dans une plage plus grande).
 
-<h3 id="Properties">Propriétés</h3>
+### Propriétés
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th>Nom</th>
-   <th>Description</th>
-   <th>Type retourné</th>
-   <th>Disponibilité</th>
-  </tr>
-  <tr>
-   <td><a href="/en/DOM/TimeRanges.length"><code>TimeRanges.length</code></a></td>
-   <td>
-    <p>Le nombre de plages de temps contenues dans l'objet TimeRanges. <strong>Lecture seule</strong>.</p>
-   </td>
-   <td>
-    <p>unsigned long</p>
-   </td>
-   <td>?</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th>Nom</th>
+      <th>Description</th>
+      <th>Type retourné</th>
+      <th>Disponibilité</th>
+    </tr>
+    <tr>
+      <td>
+        <a href="/en/DOM/TimeRanges.length"><code>TimeRanges.length</code></a>
+      </td>
+      <td>
+        <p>
+          Le nombre de plages de temps contenues dans l'objet TimeRanges.
+          <strong>Lecture seule</strong>.
+        </p>
+      </td>
+      <td><p>unsigned long</p></td>
+      <td>?</td>
+    </tr>
+  </tbody>
 </table>
 
-<h3 id="Methods">Méthodes</h3>
+### Méthodes
 
-<dl>
- <dt>{{ domxref("TimeRanges.start") }}</dt>
- <dd>Retourne la position de début de la plage de temps. En paramètre, l'index de la plage de temps souhaitée.</dd>
- <dt>{{ domxref("TimeRanges.end") }}</dt>
- <dd>Retourne la position de fin de la plage de temps. En paramètre, l'index de la plage de temps souhaitée.</dd>
-</dl>
+- {{ domxref("TimeRanges.start") }}
+  - : Retourne la position de début de la plage de temps. En paramètre, l'index de la plage de temps souhaitée.
+- {{ domxref("TimeRanges.end") }}
+  - : Retourne la position de fin de la plage de temps. En paramètre, l'index de la plage de temps souhaitée.
 
-<h3 id="Spécification">Spécification</h3>
+### Spécification
 
-<ul>
- <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#timeranges">WHATWG Working Draft</a></li>
-</ul>
+- [WHATWG Working Draft](http://www.whatwg.org/specs/web-apps/current-work/#timeranges)
diff --git a/files/fr/web/api/touch_events/index.md b/files/fr/web/api/touch_events/index.md
index 5853459757..5fcaf9e3f0 100644
--- a/files/fr/web/api/touch_events/index.md
+++ b/files/fr/web/api/touch_events/index.md
@@ -7,45 +7,40 @@ tags:
 translation_of: Web/API/Touch_events
 original_slug: Web/Guide/DOM/Events/Touch_events
 ---
-<p>{{DefaultAPISidebar("Touch Events")}}</p>
+{{DefaultAPISidebar("Touch Events")}}
 
-<p>Afin de fournir un support de qualité pour les interfaces tactiles, les événements tactiles (<em>touch events</em>) permettent d'interpréter les interactions tactiles (sur les écrans ou trackpads).</p>
+Afin de fournir un support de qualité pour les interfaces tactiles, les événements tactiles (_touch events_) permettent d'interpréter les interactions tactiles (sur les écrans ou trackpads).
 
-<h2 id="Définitions">Définitions</h2>
+## Définitions
 
-<dl>
- <dt>Surface</dt>
- <dd>La surface tactile. Cela peut être un écran ou un trackpad.</dd>
- <dt>Point de toucher (<em>Touch point</em>)</dt>
- <dd>Le point de contact avec la surface. Cela peut être un doigt ou un stylet (ou un coude, une oreille, un nez... enfin il y a quand même des chances que cela soit un doigt).</dd>
-</dl>
+- Surface
+  - : La surface tactile. Cela peut être un écran ou un trackpad.
+- Point de toucher (_Touch point_)
+  - : Le point de contact avec la surface. Cela peut être un doigt ou un stylet (ou un coude, une oreille, un nez... enfin il y a quand même des chances que cela soit un doigt).
 
-<h2 id="Interfaces">Interfaces</h2>
+## Interfaces
 
-<dl>
- <dt>{{ domxref("TouchEvent") }}</dt>
- <dd>Représente l'événement qui se produit quand l'action de toucher change.</dd>
- <dt>{{ domxref("Touch") }}</dt>
- <dd>Représente un point unique de contact entre l'utilisateur et la surface tactile.</dd>
- <dt>{{ domxref("TouchList") }}</dt>
- <dd>Représente un groupe de plusieurs interactions tactiles. Cela peut par exemple être le cas quand l'utilisateur utilise plusieurs doigts pour toucher simultanément la même surface.</dd>
- <dt>{{ domxref("DocumentTouch") }}</dt>
- <dd>Contient des méthodes permettant de créer les objets  {{ domxref("Touch") }} et {{ domxref("TouchList") }}.</dd>
-</dl>
+- {{ domxref("TouchEvent") }}
+  - : Représente l'événement qui se produit quand l'action de toucher change.
+- {{ domxref("Touch") }}
+  - : Représente un point unique de contact entre l'utilisateur et la surface tactile.
+- {{ domxref("TouchList") }}
+  - : Représente un groupe de plusieurs interactions tactiles. Cela peut par exemple être le cas quand l'utilisateur utilise plusieurs doigts pour toucher simultanément la même surface.
+- {{ domxref("DocumentTouch") }}
+  - : Contient des méthodes permettant de créer les objets  {{ domxref("Touch") }} et {{ domxref("TouchList") }}.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Cet exemple permet de gérer un toucher multiple (plusieurs contacts simultanés), permettant ainsi à l'utilisateur de dessiner dans un {{ HTMLElement("canvas") }} avec plusieurs doigts. Cela ne fonctionne qu'avec les navigateurs supportant les interactions tactiles.</p>
+Cet exemple permet de gérer un toucher multiple (plusieurs contacts simultanés), permettant ainsi à l'utilisateur de dessiner dans un {{ HTMLElement("canvas") }} avec plusieurs doigts. Cela ne fonctionne qu'avec les navigateurs supportant les interactions tactiles.
 
-<div class="note">
-  <p><strong>Note :</strong> Le texte qui suit utilisera le terme de « doigt » pour désigner le point de toucher entre l'utilisateur et la surface. Bien entendu, cela est transposable avec une autre méthode de toucher (stylet...).</p>
-</div>
+> **Note :** Le texte qui suit utilisera le terme de « doigt » pour désigner le point de toucher entre l'utilisateur et la surface. Bien entendu, cela est transposable avec une autre méthode de toucher (stylet...).
 
-<h3 id="Initialiser_les_gestionnaires_d'événements">Initialiser les gestionnaires d'événements</h3>
+### Initialiser les gestionnaires d'événements
 
-<p>Quand la page charge, la fonction <code>startup()</code> décrite ci-dessous est appelée par l'attribut <code>onload</code> de l'élément {{ HTMLElement("body") }}.</p>
+Quand la page charge, la fonction `startup()` décrite ci-dessous est appelée par l'attribut `onload` de l'élément {{ HTMLElement("body") }}.
 
-<pre class="brush: js">function startup() {
+```js
+function startup() {
   var el = document.getElementsByTagName("canvas")[0];
   el.addEventListener("touchstart", handleStart, false);
   el.addEventListener("touchend", handleEnd, false);
@@ -53,38 +48,40 @@ original_slug: Web/Guide/DOM/Events/Touch_events
   el.addEventListener("touchleave", handleLeave, false);
   el.addEventListener("touchmove", handleMove, false);
 }
-</pre>
+```
 
-<p>Cela permet simplement d'initialiser les observateurs d'événements pour l'élément {{ HTMLElement("canvas") }} afin de pouvoir gérer ceux-ci lorsqu'ils se produisent.</p>
+Cela permet simplement d'initialiser les observateurs d'événements pour l'élément {{ HTMLElement("canvas") }} afin de pouvoir gérer ceux-ci lorsqu'ils se produisent.
 
-<h3 id="Gérer_les_nouveaux_touchers">Gérer les nouveaux touchers</h3>
+### Gérer les nouveaux touchers
 
-<p>Quand un événement <code>touchstart</code> se produit, cela indique qu'un nouveau toucher s'est produit. La fonction <code>handleStart()</code> est alors appelée.</p>
+Quand un événement `touchstart` se produit, cela indique qu'un nouveau toucher s'est produit. La fonction `handleStart()` est alors appelée.
 
-<pre class="brush: js">function handleStart(evt) {
+```js
+function handleStart(evt) {
   evt.preventDefault();
   var el = document.getElementsByTagName("canvas")[0];
   var ctx = el.getContext("2d");
   var touches = evt.changedTouches;
 
-  for (var i=0; i&lt;touches.length; i++) {
+  for (var i=0; i<touches.length; i++) {
     ongoingTouches.push(touches[i]);
     var color = colorForTouch(touches[i]);
     ctx.fillStyle = color;
     ctx.fillRect(touches[i].pageX-2, touches[i].pageY-2, 4, 4);
   }
 }
-</pre>
+```
 
-<p>Cette fonction appelle {{ domxref("event.preventDefault()") }}, ce qui évite au navigateur de continuer à traiter cet événement (le début du toucher). Cela permet aussi de ne pas déclencher d'événement de souris. On obtient ensuite le contexte, duquel on peut obtenir une liste des changements des points de toucher grâce à la propriété {{ domxref("TouchEvent.changedTouches") }} de l'événement.</p>
+Cette fonction appelle {{ domxref("event.preventDefault()") }}, ce qui évite au navigateur de continuer à traiter cet événement (le début du toucher). Cela permet aussi de ne pas déclencher d'événement de souris. On obtient ensuite le contexte, duquel on peut obtenir une liste des changements des points de toucher grâce à la propriété {{ domxref("TouchEvent.changedTouches") }} de l'événement.
 
-<p>Après quoi, on fait une boucle sur les différents objets {{ domxref("Touch") }} de la liste. puis on les stocke dans un tableau pour ensuite dessiner les points (on souhaite peindre une ligne large de 4 pixels, on dessinera donc des points comme des carrés mesurant 4x4 pixels).</p>
+Après quoi, on fait une boucle sur les différents objets {{ domxref("Touch") }} de la liste. puis on les stocke dans un tableau pour ensuite dessiner les points (on souhaite peindre une ligne large de 4 pixels, on dessinera donc des points comme des carrés mesurant 4x4 pixels).
 
-<h3 id="Dessiner_avec_les_déplacements">Dessiner avec les déplacements</h3>
+### Dessiner avec les déplacements
 
-<p>Chaque fois que le(s) doigt(s) bouge(nt), un événement <code>touchmove</code> est déclenché, ce qui provoque l'appel de la fonction <code>handleMove()</code> que l'on a créée. Son rôle, dans cet exemple, est d'actualiser les informations mises en cache sur les informations tactiles et de dessiner une ligne entre la position précédente et la position actuelle pour chacune des touches.</p>
+Chaque fois que le(s) doigt(s) bouge(nt), un événement `touchmove` est déclenché, ce qui provoque l'appel de la fonction `handleMove()` que l'on a créée. Son rôle, dans cet exemple, est d'actualiser les informations mises en cache sur les informations tactiles et de dessiner une ligne entre la position précédente et la position actuelle pour chacune des touches.
 
-<pre class="brush: js">function handleMove(evt) {
+```js
+function handleMove(evt) {
   evt.preventDefault();
   var el = document.getElementsByTagName("canvas")[0];
   var ctx = el.getContext("2d");
@@ -92,7 +89,7 @@ original_slug: Web/Guide/DOM/Events/Touch_events
 
   ctx.lineWidth = 4;
 
-  for (var i=0; i&lt;touches.length; i++) {
+  for (var i=0; i<touches.length; i++) {
     var color = colorForTouch(touches[i]);
     var idx = ongoingTouchIndexById(touches[i].identifier);
 
@@ -105,19 +102,20 @@ original_slug: Web/Guide/DOM/Events/Touch_events
     ongoingTouches.splice(idx, 1, touches[i]);  // mettre à jour la liste des touchers
   }
 }
-</pre>
+```
 
-<p>Cette fonction boucle également sur les changements de touchers. Elle consulte toutefois les informations en cache dans le tableau pour déterminer le point de départ de chaque nouveau segment. Cela se fait en consultant la propriété {{ domxref("Touch.identifier") }}. Cette propriété est un entier unique pour chaque touche, cet entier reste le même pour chaque événement tant que le doigt est en contact avec la surface.</p>
+Cette fonction boucle également sur les changements de touchers. Elle consulte toutefois les informations en cache dans le tableau pour déterminer le point de départ de chaque nouveau segment. Cela se fait en consultant la propriété {{ domxref("Touch.identifier") }}. Cette propriété est un entier unique pour chaque touche, cet entier reste le même pour chaque événement tant que le doigt est en contact avec la surface.
 
-<p>Cela permet d'obtenir les précédentes coordonnées pour chaque toucher et ainsi d'utiliser la méthode adaptée pour dessiner le segment reliant les deux positions.</p>
+Cela permet d'obtenir les précédentes coordonnées pour chaque toucher et ainsi d'utiliser la méthode adaptée pour dessiner le segment reliant les deux positions.
 
-<p>Une fois le segment dessiné, on appelle <a href="/fr/JavaScript/Reference/Global_Objects/Array/splice"><code>Array.splice()</code></a> pour remplacer les informations précédentes sur les points de toucher par les informations courantes contenues dans le tableau <code>ongoingTouches</code>.</p>
+Une fois le segment dessiné, on appelle [`Array.splice()`](/fr/JavaScript/Reference/Global_Objects/Array/splice) pour remplacer les informations précédentes sur les points de toucher par les informations courantes contenues dans le tableau `ongoingTouches`.
 
-<h3 id="Gérer_la_fin_d'un_toucher">Gérer la fin d'un toucher</h3>
+### Gérer la fin d'un toucher
 
-<p>Lorsqu'un utilisateur enlève son doigt de la surface, un événement <code>touchend</code> est envoyé. De la même manière, un événement <code>touchleave</code> sera envoyé si le doigt sort du canvas. Ici, les deux événements sont gérés en commun avec la fonction <code>handleEnd()</code> ci-dessous. Son rôle est de dessiner le dernier segment pour chaque toucher qui s'est fini et de retirer le point de contact de la liste.</p>
+Lorsqu'un utilisateur enlève son doigt de la surface, un événement `touchend` est envoyé. De la même manière, un événement `touchleave` sera envoyé si le doigt sort du canvas. Ici, les deux événements sont gérés en commun avec la fonction `handleEnd()` ci-dessous. Son rôle est de dessiner le dernier segment pour chaque toucher qui s'est fini et de retirer le point de contact de la liste.
 
-<pre class="brush: js">function handleEnd(evt) {
+```js
+function handleEnd(evt) {
   evt.preventDefault();
   var el = document.getElementsByTagName("canvas")[0];
   var ctx = el.getContext("2d");
@@ -125,7 +123,7 @@ original_slug: Web/Guide/DOM/Events/Touch_events
 
   ctx.lineWidth = 4;
 
-  for (var i=0; i&lt;touches.length; i++) {
+  for (var i=0; i<touches.length; i++) {
     var color = colorForTouch(touches[i]);
     var idx = ongoingTouchIndexById(touches[i].identifier);
 
@@ -136,49 +134,52 @@ original_slug: Web/Guide/DOM/Events/Touch_events
     ongoingTouches.splice(i, 1);  // On enlève le point
   }
 }
-</pre>
+```
 
-<p>Cette fonction ressemble beaucoup à la précédente sauf qu'ici en appelant <a href="/en/JavaScript/Reference/Global_Objects/Array/splice"><code>Array.splice()</code></a>, on retire simplement l'ancien point sans ajouter un point mis à jour. On arrête donc de « suivre » ce point.</p>
+Cette fonction ressemble beaucoup à la précédente sauf qu'ici en appelant [`Array.splice()`](/en/JavaScript/Reference/Global_Objects/Array/splice), on retire simplement l'ancien point sans ajouter un point mis à jour. On arrête donc de « suivre » ce point.
 
-<h3 id="Gérer_l'annulation_d'un_toucher">Gérer l'annulation d'un toucher</h3>
+### Gérer l'annulation d'un toucher
 
-<p>Si le doigt de l'utilisateur se balade dans l'interface du navigateur ou si un toucher doit être annulé, l'événement <code>touchcancel</code> est envoyé et on appelle alors la fonction <code>handleCancel()</code>.</p>
+Si le doigt de l'utilisateur se balade dans l'interface du navigateur ou si un toucher doit être annulé, l'événement `touchcancel` est envoyé et on appelle alors la fonction `handleCancel()`.
 
-<pre class="brush: js">function handleCancel(evt) {
+```js
+function handleCancel(evt) {
   evt.preventDefault();
   var touches = evt.changedTouches;
 
-  for (var i=0; i&lt;touches.length; i++) {
+  for (var i=0; i<touches.length; i++) {
     ongoingTouches.splice(i, 1);  // on retire le point
   }
 }
-</pre>
+```
 
-<p>L'idée est ici la même que pour la fin d'un toucher, on retire simplement le point de la liste. Ici on ne dessine pas le dernier segment.</p>
+L'idée est ici la même que pour la fin d'un toucher, on retire simplement le point de la liste. Ici on ne dessine pas le dernier segment.
 
-<h3 id="Fonctions_auxiliaires">Fonctions auxiliaires</h3>
+### Fonctions auxiliaires
 
-<p>Cet exemple utilise deux fonctions auxiliaires qu'il est conseillé de lire rapidement afin de mieux comprendre le reste du code.</p>
+Cet exemple utilise deux fonctions auxiliaires qu'il est conseillé de lire rapidement afin de mieux comprendre le reste du code.
 
-<h4 id="Sélectionner_une_couleur_pour_chaque_toucher">Sélectionner une couleur pour chaque toucher</h4>
+#### Sélectionner une couleur pour chaque toucher
 
-<p>Afin que chaque contact soit différent, on utilisera la fonction <code>colorForTouch()</code> pour choisir un couleur unique pour chacun, basée sur l'identifiant du toucher. Cet identifiant sera toujours compris entre 0 et le nombre de touchers moins 1. Imaginons que personne n'utilisera plus de 16 touchers simultanés, on peut alors directement convertir les identifiants en niveaux de gris.</p>
+Afin que chaque contact soit différent, on utilisera la fonction `colorForTouch()` pour choisir un couleur unique pour chacun, basée sur l'identifiant du toucher. Cet identifiant sera toujours compris entre 0 et le nombre de touchers moins 1. Imaginons que personne n'utilisera plus de 16 touchers simultanés, on peut alors directement convertir les identifiants en niveaux de gris.
 
-<pre class="brush: js">function colorForTouch(touch) {
+```js
+function colorForTouch(touch) {
   var id = touch.identifier;
   id = id.toString(16); // creer un nombre hexadécimal
   return "#" + id + id + id;
 }
-</pre>
+```
 
-<p>Le résultat de cette fonction sera une chaîne de caractères qui pourra être utilisée par les fonctions de l'élément {{ HTMLElement("canvas") }} pour dessiner les couleurs. Ainsi avec un identifiant initial {{ domxref("Touch.identifier") }} de 10, le résultat de cette fonction sera la chaîne "#aaa".</p>
+Le résultat de cette fonction sera une chaîne de caractères qui pourra être utilisée par les fonctions de l'élément {{ HTMLElement("canvas") }} pour dessiner les couleurs. Ainsi avec un identifiant initial {{ domxref("Touch.identifier") }} de 10, le résultat de cette fonction sera la chaîne "#aaa".
 
-<h4 id="Retrouver_un_toucher_en_cours">Retrouver un toucher en cours</h4>
+#### Retrouver un toucher en cours
 
-<p>La fonction <code>ongoingTouchIndexById()</code> analyse le tableau <code>ongoingTouches</code> pour trouver le toucher correspondant à l'identifiant donné. Elle retourne alors l'indice du toucher dans le tableau.</p>
+La fonction `ongoingTouchIndexById()` analyse le tableau `ongoingTouches` pour trouver le toucher correspondant à l'identifiant donné. Elle retourne alors l'indice du toucher dans le tableau.
 
-<pre class="brush: js">function ongoingTouchIndexById(idToFind) {
-  for (var i=0; i&lt;ongoingTouches.length; i++) {
+```js
+function ongoingTouchIndexById(idToFind) {
+  for (var i=0; i<ongoingTouches.length; i++) {
     var id = ongoingTouches[i].identifier;
 
     if (id == idToFind) {
@@ -187,21 +188,22 @@ original_slug: Web/Guide/DOM/Events/Touch_events
   }
   return -1;    // toucher non trouvé
 }
-</pre>
+```
 
-<p><a href="/samples/domref/touchevents.html">Voir l'exemple sur une page</a></p>
+[Voir l'exemple sur une page](/samples/domref/touchevents.html)
 
-<h2 id="Astuces_supplémentaires">Astuces supplémentaires</h2>
+## Astuces supplémentaires
 
-<p>Cette section fournit quelques astuces supplémentaires pour gérer les événements tactiles au sein de votre application web.</p>
+Cette section fournit quelques astuces supplémentaires pour gérer les événements tactiles au sein de votre application web.
 
-<h3 id="Gérer_les_clics">Gérer les clics</h3>
+### Gérer les clics
 
-<p>Étant donné que l'appel de la méthode <code>preventDefault()</code> sur l'événement  <code>touchstart</code> ou le premier événement <code>touchmove</code> de la série empêche la saisie d'événements en provenance de la souris, on appelle souvent  <code>preventDefault()</code> sur <code>touchmove</code> plutôt que sur <code>touchstart</code>. Ainsi, les événements de la souris peuvent continuer à se déclencher et le reste du site fonctionnera de manière habituelle. Une autre méthode parfois utilisée est de déclencher des événements de souris à partir des événements tactiles. (L'exemple qui suit représente seulement une indication. La logique a été simplifiée et ce code, tel quel, aura un comportement étrange.)</p>
+Étant donné que l'appel de la méthode `preventDefault()` sur l'événement  `touchstart` ou le premier événement `touchmove` de la série empêche la saisie d'événements en provenance de la souris, on appelle souvent  `preventDefault()` sur `touchmove` plutôt que sur `touchstart`. Ainsi, les événements de la souris peuvent continuer à se déclencher et le reste du site fonctionnera de manière habituelle. Une autre méthode parfois utilisée est de déclencher des événements de souris à partir des événements tactiles. (L'exemple qui suit représente seulement une indication. La logique a été simplifiée et ce code, tel quel, aura un comportement étrange.)
 
-<pre class="brush: js">function onTouch(evt) {
+```js
+function onTouch(evt) {
   evt.preventDefault();
-  if (evt.touches.length &gt; 1 || (evt.type == "touchend" &amp;&amp; evt.touches.length &gt; 0))
+  if (evt.touches.length > 1 || (evt.type == "touchend" && evt.touches.length > 0))
     return;
 
   var newEvt = document.createEvent("MouseEvents");
@@ -217,27 +219,22 @@ original_slug: Web/Guide/DOM/Events/Touch_events
     evt.ctrlKey, evt.altKey, evt.shirtKey, evt.metaKey, 0, null);
   event.originalTarget.dispatchEvent(newEvt);
 }
-</pre>
+```
 
-<h3 id="Appeler_preventDefault()_uniquement_pour_un_deuxième_toucher">Appeler preventDefault() uniquement pour un deuxième toucher</h3>
+### Appeler preventDefault() uniquement pour un deuxième toucher
 
-<p>Pour éviter que des événements de zoom (comme <code>pinchZoom</code>) ne se produisent sur la page, il est possible d'appeler la méthode <code>preventDefault()</code> sur le deuxième toucher de la série. Ce comportement n'est pas encore parfaitement défini dans les différentes spécifications. Différents résultats se produisent sur les différents navigateurs (ainsi iOS empêchera le zoom mais continuera à autoriser le déroulement de la page avec deux doigts, Android autorisera le zoom mais pas le déroulement, Opera et Firefox empêcheront ces deux opérations). Il est actuellement déconseillé d'être dépendant d'un de ces comportements en particulier. Il faut plutôt utiliser les méta-données concernant la vue virtuelle (<em>viewport</em>) pour éviter un zoom quelconque.</p>
+Pour éviter que des événements de zoom (comme `pinchZoom`) ne se produisent sur la page, il est possible d'appeler la méthode `preventDefault()` sur le deuxième toucher de la série. Ce comportement n'est pas encore parfaitement défini dans les différentes spécifications. Différents résultats se produisent sur les différents navigateurs (ainsi iOS empêchera le zoom mais continuera à autoriser le déroulement de la page avec deux doigts, Android autorisera le zoom mais pas le déroulement, Opera et Firefox empêcheront ces deux opérations). Il est actuellement déconseillé d'être dépendant d'un de ces comportements en particulier. Il faut plutôt utiliser les méta-données concernant la vue virtuelle (_viewport_) pour éviter un zoom quelconque.
 
-<dl>
-</dl>
+## Compatibilité des navigateurs
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+{{Compat("api.Touch")}}
 
-<p>{{Compat("api.Touch")}}</p>
+### Notes relatives à Gecko
 
-<h3 id="Notes_relatives_à_Gecko">Notes relatives à Gecko</h3>
+Le paramètre `dom.w3c_touch_events.enabled` peut être utilisé avec ses trois états pour désactiver (0), activer (1) et détecter automatiquement (2) le support des événements tactiles. La valeur par défaut est la détection automatique (2). Une fois que le paramètre a été changé, il est nécessaire de redémarrer le navigateur.
 
-<p>Le paramètre <code>dom.w3c_touch_events.enabled</code> peut être utilisé avec ses trois états pour désactiver (0), activer (1) et détecter automatiquement (2) le support des événements tactiles. La valeur par défaut est la détection automatique (2). Une fois que le paramètre a été changé, il est nécessaire de redémarrer le navigateur.</p>
+{{ gecko_callout_heading("12.0") }}
 
-<p>{{ gecko_callout_heading("12.0") }}</p>
+Avant Gecko 12.0 {{ geckoRelease("12.0") }}, Gecko ne supportait pas les contacts multiples simultanés. Seul un toucher à la fois était supporté.
 
-<p>Avant Gecko 12.0 {{ geckoRelease("12.0") }}, Gecko ne supportait pas les contacts multiples simultanés. Seul un toucher à la fois était supporté.</p>
-
-<div class="note">
-  <p><strong>Note :</strong> Avant Gecko 6.0 {{ geckoRelease("6.0") }}, Gecko permettait d'utiliser une <a href="/en/DOM/Touch_events_(Mozilla_experimental)">API propriétaire pour les événements tactile.</a> Cette API est maintenant dépréciée, celle-ci doit être utilisée à la place.</p>
-</div>
+> **Note :** Avant Gecko 6.0 {{ geckoRelease("6.0") }}, Gecko permettait d'utiliser une [API propriétaire pour les événements tactile.](</en/DOM/Touch_events_(Mozilla_experimental)>) Cette API est maintenant dépréciée, celle-ci doit être utilisée à la place.
diff --git a/files/fr/web/api/touch_events/supporting_both_touchevent_and_mouseevent/index.md b/files/fr/web/api/touch_events/supporting_both_touchevent_and_mouseevent/index.md
index 51773f1c64..d3ab597400 100644
--- a/files/fr/web/api/touch_events/supporting_both_touchevent_and_mouseevent/index.md
+++ b/files/fr/web/api/touch_events/supporting_both_touchevent_and_mouseevent/index.md
@@ -5,61 +5,54 @@ translation_of: Web/API/Touch_events/Supporting_both_TouchEvent_and_MouseEvent
 original_slug: >-
   Web/Guide/DOM/Events/Touch_events/Gérer_à_la_fois_événement_tactile_et_événement_de_la_souris
 ---
-<p>{{DefaultAPISidebar("Touch Events")}}</p>
+{{DefaultAPISidebar("Touch Events")}}
 
-<p>Les interfaces {{domxref("Touch_events","touch")}} permettent aux applications de créer de meilleures expériences utilisateurs sur les appareils tactiles. Pourtant, la grande majorité du contenu web actuel est développé pour fonctionner uniquement avec la souris. En conséquence, même si un navigateur supporte le tactile, le navigateur continue à <em>émuler</em> les événements de la souris, donc le contenu qui se veut fonctionner uniquement à la souris fonctionnera toujours <em>tel quel </em>sans modification directe.</p>
+Les interfaces {{domxref("Touch_events","touch")}} permettent aux applications de créer de meilleures expériences utilisateurs sur les appareils tactiles. Pourtant, la grande majorité du contenu web actuel est développé pour fonctionner uniquement avec la souris. En conséquence, même si un navigateur supporte le tactile, le navigateur continue à *émuler* les événements de la souris, donc le contenu qui se veut fonctionner uniquement à la souris fonctionnera toujours *tel quel* sans modification directe.
 
-<p>Idéalement, une application tactile n'a pas besoin de supporter explicitement la souris. Mais puisque le navigateur doit émuler les événements de la souris, il peut être nécessaire de gérer certains problèmes d'interaction. Ci-dessous, vous trouverez des détails concernant l'interaction et ses répercussions pour les développeurs d'application.</p>
+Idéalement, une application tactile n'a pas besoin de supporter explicitement la souris. Mais puisque le navigateur doit émuler les événements de la souris, il peut être nécessaire de gérer certains problèmes d'interaction. Ci-dessous, vous trouverez des détails concernant l'interaction et ses répercussions pour les développeurs d'application.
 
-<h2 id="Déclenchement_de_l'événement">Déclenchement de l'événement</h2>
+## Déclenchement de l'événement
 
-<p>La norme des événements tactiles définit quelques exigences envers les navigateurs concernant l'interaction tactile et souris (voir la section <a href="https://w3c.github.io/touch-events/#mouse-events"><em>Interaction with Mouse Events and click</em></a> pour plus de détails), noter que <em>le navigateur peut déclencher à la fois des événements tactiles et des événements de la souris en réponse à une seule et même entrée de l'utilisateur.</em> Cette section décrit les exigences pouvant affecter une application.</p>
+La norme des événements tactiles définit quelques exigences envers les navigateurs concernant l'interaction tactile et souris (voir la section [_Interaction with Mouse Events and click_](https://w3c.github.io/touch-events/#mouse-events) pour plus de détails), noter que *le navigateur peut déclencher à la fois des événements tactiles et des événements de la souris en réponse à une seule et même entrée de l'utilisateur.* Cette section décrit les exigences pouvant affecter une application.
 
-<p>Si le navigateur déclenche à la fois des événements tactiles et souris en réponse à une seule entrée d'un utilisateur, le navigateur <em>doit</em> déclencher un événement {{event("touchstart")}} avant tout événement de la souris. En conséquence, si une application ne veut pas que des événements de la souris soient déclenchés sur un élément {{domxref("Touch.target","target")}} spécifiquement tactile, le gestionnaire de l'événement tactile de l'élément devrait appeler {{domxref("Event.preventDefault()","preventDefault()")}} ainsi aucun événement additionnel de la souris sera envoyé.</p>
+Si le navigateur déclenche à la fois des événements tactiles et souris en réponse à une seule entrée d'un utilisateur, le navigateur *doit* déclencher un événement {{event("touchstart")}} avant tout événement de la souris. En conséquence, si une application ne veut pas que des événements de la souris soient déclenchés sur un élément {{domxref("Touch.target","target")}} spécifiquement tactile, le gestionnaire de l'événement tactile de l'élément devrait appeler {{domxref("Event.preventDefault()","preventDefault()")}} ainsi aucun événement additionnel de la souris sera envoyé.
 
-<p>Voici un extrait de code du gestionnaire de l'événement {{event("touchmove")}} qui appelle <code>preventDefault()</code>.</p>
+Voici un extrait de code du gestionnaire de l'événement {{event("touchmove")}} qui appelle `preventDefault()`.
 
-<pre class="brush: js">// touchmove handler
+```js
+// touchmove handler
 function process_touchmove(ev) {
   // Call preventDefault() to prevent any further handling
   ev.preventDefault();
 }
-</pre>
+```
 
-<h2 id="Ordre_des_événements">Ordre des événements</h2>
+## Ordre des événements
 
-<p>Même si l'ordre spécifique des événements tactiles et souris est défini par l'implémentation, la norme indique que l'ordre suivant est <em>représentatif:</em> pour une entrée :</p>
+Même si l'ordre spécifique des événements tactiles et souris est défini par l'implémentation, la norme indique que l'ordre suivant est _représentatif:_ pour une entrée :
 
-<ul>
- <li><code>touchstart</code></li>
- <li>Zero ou plus d'événements <code>touchmove</code>, suivant le mouvement de(s) doigt(s)</li>
- <li><code>touchend</code></li>
- <li><code>mousemove</code></li>
- <li><code>mousedown</code></li>
- <li><code>mouseup</code></li>
- <li><code>click</code></li>
-</ul>
+- `touchstart`
+- Zero ou plus d'événements `touchmove`, suivant le mouvement de(s) doigt(s)
+- `touchend`
+- `mousemove`
+- `mousedown`
+- `mouseup`
+- `click`
 
-<p>Si l'événement {{event("touchstart")}}, {{event("touchmove")}} ou {{event("touchend")}} est annulé pendant une interaction, aucun événement de la souris ou du click sera déclenché, et la séquence des événements qui en résulte serait seulement :</p>
+Si l'événement {{event("touchstart")}}, {{event("touchmove")}} ou {{event("touchend")}} est annulé pendant une interaction, aucun événement de la souris ou du click sera déclenché, et la séquence des événements qui en résulte serait seulement :
 
-<ul>
- <li><code>touchstart</code></li>
- <li>Zero ou plus d'événements <code>touchmove</code>, suivant le mouvement de(s) doigt(s)</li>
- <li><code>touchend</code></li>
-</ul>
+- `touchstart`
+- Zero ou plus d'événements `touchmove`, suivant le mouvement de(s) doigt(s)
+- `touchend`
 
-<h2 id="Community">Community</h2>
+## Community
 
-<ul>
- <li><a href="https://github.com/w3c/touch-events">Touch Events Community Group</a></li>
- <li><a href="https://lists.w3.org/Archives/Public/public-touchevents/">Mail list</a></li>
- <li><a href="irc://irc.w3.org:6667/">W3C #touchevents IRC channel</a></li>
-</ul>
+- [Touch Events Community Group](https://github.com/w3c/touch-events)
+- [Mail list](https://lists.w3.org/Archives/Public/public-touchevents/)
+- [W3C #touchevents IRC channel](irc://irc.w3.org:6667/)
 
-<h2 id="Related_topics_and_resources">Related topics and resources</h2>
+## Related topics and resources
 
-<ul>
- <li><a href="/Web/API/Touch_events">Touch Events Overview</a></li>
- <li><a href="/Web/API/Touch_events/Using_Touch_Events">Using Touch Events</a></li>
- <li><a href="http://www.html5rocks.com/en/mobile/touchandmouse/">Touch and Mouse (Together Again for the First Time)</a></li>
-</ul>
+- [Touch Events Overview](/Web/API/Touch_events)
+- [Using Touch Events](/Web/API/Touch_events/Using_Touch_Events)
+- [Touch and Mouse (Together Again for the First Time)](http://www.html5rocks.com/en/mobile/touchandmouse/)
diff --git a/files/fr/web/api/transferable/index.md b/files/fr/web/api/transferable/index.md
index 564d4e4b7f..0a86bfe7a1 100644
--- a/files/fr/web/api/transferable/index.md
+++ b/files/fr/web/api/transferable/index.md
@@ -7,62 +7,59 @@ tags:
   - Reference
 translation_of: Web/API/Transferable
 ---
-<p>{{ ApiRef("HTML DOM") }}</p>
+{{ ApiRef("HTML DOM") }}
 
-<p>L'interface <code><strong>Transferable</strong></code> représente un objet qui peut être transféré entre différents contextes d'exécution, comme un thread principal et des web workers.</p>
+L'interface **`Transferable`** représente un objet qui peut être transféré entre différents contextes d'exécution, comme un thread principal et des web workers.
 
-<p>C'est une interface abstraite et il n'y a aucun objet de ce type. Il ne définit pas non plus ni propriété ni méthode : c'est avant tout une étiquette pour signaler les objets qui peuvent être utilisés dans des conditions spécifiques, comme la possibilité d'être transféré à un {{domxref("Worker")}} au moyen de la méthode {{domxref("Worker.postMessage()")}}.</p>
+C'est une interface abstraite et il n'y a aucun objet de ce type. Il ne définit pas non plus ni propriété ni méthode : c'est avant tout une étiquette pour signaler les objets qui peuvent être utilisés dans des conditions spécifiques, comme la possibilité d'être transféré à un {{domxref("Worker")}} au moyen de la méthode {{domxref("Worker.postMessage()")}}.
 
-<div class="note">
-<p><strong>Note :</strong> L'interface <code>Transferable</code> n'existe plus pour longtemps. La fonctionnalité des objets <code>Transferable</code> existe toujours, cependant, l'inpléméentation est à un niveau plus fondamentale (techniquement parlant, utilisant l'attribut étendu <code>[Transferable]</code> {{Glossary("WebIDL")}})</p>
-</div>
+> **Note :** L'interface `Transferable` n'existe plus pour longtemps. La fonctionnalité des objets `Transferable` existe toujours, cependant, l'inpléméentation est à un niveau plus fondamentale (techniquement parlant, utilisant l'attribut étendu `[Transferable]` {{Glossary("WebIDL")}})
 
-<p>Les interfaces {{domxref("ArrayBuffer")}}, {{domxref("MessagePort")}}, {{domxref("ImageBitmap")}} et {{domxref("OffscreenCanvas")}} l'implémentent.</p>
+Les interfaces {{domxref("ArrayBuffer")}}, {{domxref("MessagePort")}}, {{domxref("ImageBitmap")}} et {{domxref("OffscreenCanvas")}} l'implémentent.
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<p><em>L'interface </em><em><code>Transferable</code></em><em> n'implémente ou n'hérite d'aucune propriété spécifique.</em></p>
+_L'interface_ _`Transferable`_ _n'implémente ou n'hérite d'aucune propriété spécifique._
 
-<h2 id="Méthodes">Méthodes</h2>
+## Méthodes
 
-<p><em>L'interface </em><em><code>Transferable</code></em><em> n'implémente ou n'hérite d'aucune méthode spécifique.</em></p>
+_L'interface_ _`Transferable`_ _n'implémente ou n'hérite d'aucune méthode spécifique._
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "infrastructure.html#transferable-objects", "Transferable")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>
-    <p>Remplace l'interface <code>Transferable</code> avec l'attribut étendue <code>[Transferable]</code> Web IDL.</p>
-   </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', "infrastructure.html#transferable-objects", "Transferable")}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="col">Spécification</th>
+      <th scope="col">Statut</th>
+      <th scope="col">Commentaire</th>
+    </tr>
+    <tr>
+      <td>
+        {{SpecName('HTML WHATWG', "infrastructure.html#transferable-objects", "Transferable")}}
+      </td>
+      <td>{{Spec2('HTML WHATWG')}}</td>
+      <td>
+        <p>
+          Remplace l'interface <code>Transferable</code> avec l'attribut étendue
+          <code>[Transferable]</code> Web IDL.
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        {{SpecName('HTML5 W3C', "infrastructure.html#transferable-objects", "Transferable")}}
+      </td>
+      <td>{{Spec2('HTML5 W3C')}}</td>
+      <td>Définition initiale.</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<div>
-<div>
+{{Compat("api.Transferable")}}
 
+## Voir aussi
 
-<p>{{Compat("api.Transferable")}}</p>
-</div>
-</div>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Les interfaces qui l'implémentent : {{jsxref("ArrayBuffer")}}, {{domxref("MessagePort")}} et {{domxref("ImageBitmap")}}.</li>
-</ul>
+- Les interfaces qui l'implémentent : {{jsxref("ArrayBuffer")}}, {{domxref("MessagePort")}} et {{domxref("ImageBitmap")}}.
diff --git a/files/fr/web/api/transitionevent/index.md b/files/fr/web/api/transitionevent/index.md
index 72c99a9f6b..b80a88240f 100644
--- a/files/fr/web/api/transitionevent/index.md
+++ b/files/fr/web/api/transitionevent/index.md
@@ -3,65 +3,44 @@ title: TransitionEvent
 slug: Web/API/TransitionEvent
 translation_of: Web/API/TransitionEvent
 ---
-<p>{{APIRef("CSSOM")}} {{SeeCompatTable}}</p>
+{{APIRef("CSSOM")}} {{SeeCompatTable}}
 
-<p>L' <code><strong>Transition</strong></code><strong><code>Event</code></strong>interface représente des événements fournissant des informations relatives aux <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transitions">transitions</a> .</p>
+L' **`Transition`\*\***`Event`\*\*interface représente des événements fournissant des informations relatives aux [transitions](/en-US/docs/Web/Guide/CSS/Using_CSS_transitions) .
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<p><em>Hérite également des propriétés de son parent {{domxref("Event")}}</em> .</p>
+_Hérite également des propriétés de son parent {{domxref("Event")}}_ .
 
-<dl>
- <dt>{{domxref("TransitionEvent.propertyName")}} {{readonlyInline}}</dt>
- <dd>Est-ce qu'un {{domxref("DOMString")}} contient le nom de la propriété CSS associée à la transition.</dd>
- <dt>{{domxref("TransitionEvent.elapsedTime")}} {{readonlyInline}}</dt>
- <dd>Est- <code>float</code>ce que la durée de l'exécution est en cours, en secondes, lorsque cet événement a été déclenché. Cette valeur n'est pas affectée par la propriété {{cssxref ("transition-delay")}}.</dd>
- <dt>{{domxref("TransitionEvent.pseudoElement")}} {{readonlyInline}}</dt>
- <dd>Est-ce qu'un {{domxref("DOMString")}}, commençant par <code>'::'</code>, contenant le nom du <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-élément</a> sur lequel s'exécute l'animation. Si la transition ne s'exécute pas sur un pseudo-élément mais sur l'élément, une chaîne vide:<code>''</code><code>.</code></dd>
-</dl>
+- {{domxref("TransitionEvent.propertyName")}} {{readonlyInline}}
+  - : Est-ce qu'un {{domxref("DOMString")}} contient le nom de la propriété CSS associée à la transition.
+- {{domxref("TransitionEvent.elapsedTime")}} {{readonlyInline}}
+  - : Est- `float`ce que la durée de l'exécution est en cours, en secondes, lorsque cet événement a été déclenché. Cette valeur n'est pas affectée par la propriété {{cssxref ("transition-delay")}}.
+- {{domxref("TransitionEvent.pseudoElement")}} {{readonlyInline}}
+  - : Est-ce qu'un {{domxref("DOMString")}}, commençant par `'::'`, contenant le nom du [pseudo-élément](/en-US/docs/Web/CSS/Pseudo-elements) sur lequel s'exécute l'animation. Si la transition ne s'exécute pas sur un pseudo-élément mais sur l'élément, une chaîne vide:` ''``. `
 
-<h2 id="Constructeur">Constructeur</h2>
+## Constructeur
 
-<dl>
- <dt>{{domxref("TransitionEvent.TransitionEvent", "TransitionEvent ()")}}</dt>
- <dd>Crée un <code>TransitionEvent</code>événement avec les paramètres donnés.</dd>
-</dl>
+- {{domxref("TransitionEvent.TransitionEvent", "TransitionEvent ()")}}
+  - : Crée un `TransitionEvent`événement avec les paramètres donnés.
 
-<h2 id="Méthodes">Méthodes</h2>
+## Méthodes
 
-<p><em>Hérite également des propriétés de son parent {{domxref("Event")}}</em> .</p>
+_Hérite également des propriétés de son parent {{domxref("Event")}}_ .
 
-<dl>
- <dt>{{domxref("TransitionEvent.initTransitionEvent ()")}} {{non-standard_inline}} {{deprecated_inline}}</dt>
- <dd>Initialise un <code>TransitionEvent</code>créé en utilisant la méthode {{domxref("Document.createEvent ()")}} déconseillée.</dd>
-</dl>
+- {{domxref("TransitionEvent.initTransitionEvent ()")}} {{non-standard_inline}} {{deprecated_inline}}
+  - : Initialise un `TransitionEvent`créé en utilisant la méthode {{domxref("Document.createEvent ()")}} déconseillée.
 
-<h2 id="Caractéristiques">Caractéristiques</h2>
+## Caractéristiques
 
-<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 ('Transitions CSS3', '# Événements-TransitionEvent', 'TransitionEvent')}}</td>
-   <td>{{Spec2 ('Transitions CSS3')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| spécification                                                                                                        | Statut                                   | Commentaire          |
+| -------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName ('Transitions CSS3', '# Événements-TransitionEvent', 'TransitionEvent')}} | {{Spec2 ('Transitions CSS3')}} | Définition initiale. |
 
-<h2 id="Compatibilité_du_navigateur">Compatibilité du navigateur</h2>
+## Compatibilité du navigateur
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="Voir_également">Voir également</h2>
+## Voir également
 
-<ul>
- <li><a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transitions">Utilisation des transitions CSS</a></li>
- <li>Propriétés de CSS: {{cssxref ("transition")}}, {{cssxref ("transition-delay")}}, {{cssxref ("transition-duration")}}, {{cssxref ("transition-property") }}, {{Cssxref ("transition-timing-function")}}.</li>
-</ul>
+- [Utilisation des transitions CSS](/en-US/docs/Web/Guide/CSS/Using_CSS_transitions)
+- Propriétés de CSS: {{cssxref ("transition")}}, {{cssxref ("transition-delay")}}, {{cssxref ("transition-duration")}}, {{cssxref ("transition-property") }}, {{Cssxref ("transition-timing-function")}}.
diff --git a/files/fr/web/api/treewalker/currentnode/index.md b/files/fr/web/api/treewalker/currentnode/index.md
index 3af4a1f311..4d3fb7532b 100644
--- a/files/fr/web/api/treewalker/currentnode/index.md
+++ b/files/fr/web/api/treewalker/currentnode/index.md
@@ -9,55 +9,38 @@ tags:
   - Propriété
 translation_of: Web/API/TreeWalker/currentNode
 ---
-<p>{{ APIRef("DOM") }}</p>
+{{ APIRef("DOM") }}
 
-<p>La propriété <code><strong>TreeWalker.currentNode</strong></code> représente le {{domxref("Node")}} (<em>noeud</em>) sur lequel le {{domxref("TreeWalker")}} est actuellement pointé.</p>
+La propriété **`TreeWalker.currentNode`** représente le {{domxref("Node")}} (_noeud_) sur lequel le {{domxref("TreeWalker")}} est actuellement pointé.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>node</em> = <em>treeWalker</em>.currentNode;
-<code><em>treeWalker</em></code>.currentNode = <em>node</em>;
-</pre>
+    node = treeWalker.currentNode;
+    treeWalker.currentNode = node;
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">var treeWalker = document.createTreeWalker(
+```js
+var treeWalker = document.createTreeWalker(
     document.body,
     NodeFilter.SHOW_ELEMENT,
     { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
     false
 );
 root = treeWalker.currentNode; // l'élément racine car c'est le premier élément!
-</pre>
-
-<h2 id="Specification">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#dom-treewalker-currentnode', 'TreeWalker.currrentNode')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Pas de changement de {{SpecName('DOM2 Traversal_Range')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-TreeWalker-currentNode', 'TreeWalker.currentNode')}}</td>
-   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.TreeWalker.currentNode")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>L'interface {{domxref("TreeWalker")}}.</li>
-</ul>
+```
+
+## Spécifications
+
+| Spécification                                                                                                                                            | Statut                                       | Commentaire                                                           |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | --------------------------------------------------------------------- |
+| {{SpecName('DOM WHATWG', '#dom-treewalker-currentnode', 'TreeWalker.currrentNode')}}                                         | {{Spec2('DOM WHATWG')}}             | Pas de changement de {{SpecName('DOM2 Traversal_Range')}} |
+| {{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-TreeWalker-currentNode', 'TreeWalker.currentNode')}} | {{Spec2('DOM2 Traversal_Range')}} | Définition initiale.                                                  |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.TreeWalker.currentNode")}}
+
+## Voir aussi
+
+- L'interface {{domxref("TreeWalker")}}.
diff --git a/files/fr/web/api/treewalker/expandentityreferences/index.md b/files/fr/web/api/treewalker/expandentityreferences/index.md
index ee9090b598..32bed4b615 100644
--- a/files/fr/web/api/treewalker/expandentityreferences/index.md
+++ b/files/fr/web/api/treewalker/expandentityreferences/index.md
@@ -9,55 +9,39 @@ tags:
   - Propriétés
 translation_of: Web/API/TreeWalker/expandEntityReferences
 ---
-<p>{{ APIRef("DOM") }}{{obsolete_header}}</p>
+{{ APIRef("DOM") }}{{obsolete_header}}
 
-<p>La propriété en lecture seule <code><strong>TreeWalker.expandEntityReferences</strong></code> renvoie un {{domxref("Boolean")}} (<em>booléen</em>) indiquant si les enfants des nœuds de référence d'entité sont visibles ou non pour le {{domxref("TreeWalker")}}.</p>
+La propriété en lecture seule **`TreeWalker.expandEntityReferences`** renvoie un {{domxref("Boolean")}} (_booléen_) indiquant si les enfants des nœuds de référence d'entité sont visibles ou non pour le {{domxref("TreeWalker")}}.
 
-<p>Si la valeur est <code>false</code> (<em>faux</em>), les enfants des nœuds de référence d'entité (ainsi que tous leurs descendants) sont rejetés. Cela a préséance sur la valeur de la méthode  {{domxref("TreeWalker.whatToShow")}} et du filtre associé.</p>
+Si la valeur est `false` (_faux_), les enfants des nœuds de référence d'entité (ainsi que tous leurs descendants) sont rejetés. Cela a préséance sur la valeur de la méthode  {{domxref("TreeWalker.whatToShow")}} et du filtre associé.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>expand</em> = <em>treeWalker</em>.expandEntityReferences;
-</pre>
+    expand = treeWalker.expandEntityReferences;
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">var treeWalker = document.createTreeWalker(
+```js
+var treeWalker = document.createTreeWalker(
     document.body,
     NodeFilter.SHOW_ELEMENT,
     { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
     false
 );
-expand = treeWalker.expandEntityReferences;</pre>
-
-<h2 id="Specification">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#treewalker', 'Treewalker')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Suppression de la spécification.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-TreeWalker-expandEntityReferences', 'TreeWalker.expandEntityReferences')}}</td>
-   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.TreeWalker.expandEntityReferences")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>L'interface à laquelle la propriété appartient : {{domxref("TreeWalker")}}.</li>
-</ul>
+expand = treeWalker.expandEntityReferences;
+```
+
+## Spécifications
+
+| Spécification                                                                                                                                                                        | Statut                                       | Commentaire                      |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------- | -------------------------------- |
+| {{SpecName('DOM WHATWG', '#treewalker', 'Treewalker')}}                                                                                                             | {{Spec2('DOM WHATWG')}}             | Suppression de la spécification. |
+| {{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-TreeWalker-expandEntityReferences', 'TreeWalker.expandEntityReferences')}} | {{Spec2('DOM2 Traversal_Range')}} | Définition initiale.             |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.TreeWalker.expandEntityReferences")}}
+
+## Voir aussi
+
+- L'interface à laquelle la propriété appartient : {{domxref("TreeWalker")}}.
diff --git a/files/fr/web/api/treewalker/filter/index.md b/files/fr/web/api/treewalker/filter/index.md
index e9e2904840..c332f5cf7d 100644
--- a/files/fr/web/api/treewalker/filter/index.md
+++ b/files/fr/web/api/treewalker/filter/index.md
@@ -9,56 +9,39 @@ tags:
   - Propriétés
 translation_of: Web/API/TreeWalker/filter
 ---
-<p>{{ APIRef("DOM") }}</p>
+{{ APIRef("DOM") }}
 
-<p>La propriété en lecture seule <strong><code>TreeWalker.filter</code></strong> renvoie un {{domxref("NodeFilter")}} (<em>filtre de noeuds</em>) qui est l'objet de filtrage associé à {{domxref("TreeWalker")}}.</p>
+La propriété en lecture seule **`TreeWalker.filter`** renvoie un {{domxref("NodeFilter")}} (_filtre de noeuds_) qui est l'objet de filtrage associé à {{domxref("TreeWalker")}}.
 
-<p>Lors de la création du <code>TreeWalker</code>, l'objet filtre est transmis comme 3ème paramètre et sa méthode {{domxref("NodeFilter.acceptNode()")}} est appelée sur tous les noeuds pour déterminer s'il doit ou non l'accepter.</p>
+Lors de la création du `TreeWalker`, l'objet filtre est transmis comme 3ème paramètre et sa méthode {{domxref("NodeFilter.acceptNode()")}} est appelée sur tous les noeuds pour déterminer s'il doit ou non l'accepter.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>nodeFilter</em> = <em>treeWalker</em>.filter;
-</pre>
+    nodeFilter = treeWalker.filter;
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">var treeWalker = document.createTreeWalker(
+```js
+var treeWalker = document.createTreeWalker(
     document.body,
     NodeFilter.SHOW_ELEMENT,
     { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
     false
 );
 nodeFilter = treeWalker.filter; // document.body dans ce cas
-</pre>
+```
 
-<h2 id="Specification">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#dom-treewalker-filter', 'TreeWalker.filter')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Pas de changement de {{SpecName('DOM2 Traversal_Range')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-TreeWalker-filter', 'TreeWalker.filter')}}</td>
-   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                            | Statut                                       | Commentaire                                                           |
+| ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | --------------------------------------------------------------------- |
+| {{SpecName('DOM WHATWG', '#dom-treewalker-filter', 'TreeWalker.filter')}}                                         | {{Spec2('DOM WHATWG')}}             | Pas de changement de {{SpecName('DOM2 Traversal_Range')}} |
+| {{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-TreeWalker-filter', 'TreeWalker.filter')}} | {{Spec2('DOM2 Traversal_Range')}} | Définition initiale.                                                  |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.TreeWalker.filter")}}</p>
+{{Compat("api.TreeWalker.filter")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>L'interface {{domxref("TreeWalker")}} à laquelle elle appartient.</li>
-</ul>
+- L'interface {{domxref("TreeWalker")}} à laquelle elle appartient.
diff --git a/files/fr/web/api/treewalker/firstchild/index.md b/files/fr/web/api/treewalker/firstchild/index.md
index 25d5749df2..9ece40a221 100644
--- a/files/fr/web/api/treewalker/firstchild/index.md
+++ b/files/fr/web/api/treewalker/firstchild/index.md
@@ -9,54 +9,37 @@ tags:
   - Noeuds
 translation_of: Web/API/TreeWalker/firstChild
 ---
-<p>{{ APIRef("DOM") }}</p>
+{{ APIRef("DOM") }}
 
-<p>La méthode <strong><code>TreeWalker.firstChild()</code></strong> déplace le {{domxref("Node")}} courant vers le premier enfant <em>visible</em> du noeud courant et renvoie l'enfant trouvé. Il déplace aussi le noeud courant vers cet enfant. Si aucun enfant n'existe, elle renvoie <code>null</code> et le noeud courant n'est pas modifié.</p>
+La méthode **`TreeWalker.firstChild()`** déplace le {{domxref("Node")}} courant vers le premier enfant _visible_ du noeud courant et renvoie l'enfant trouvé. Il déplace aussi le noeud courant vers cet enfant. Si aucun enfant n'existe, elle renvoie `null` et le noeud courant n'est pas modifié.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>node</em> = <em>treeWalker</em>.firstChild;</pre>
+    node = treeWalker.firstChild;
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">var treeWalker = document.createTreeWalker(
+```js
+var treeWalker = document.createTreeWalker(
     document.body,
     NodeFilter.SHOW_ELEMENT,
     { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
     false
 );
 var node = treeWalker.firstChild(); // renvoie le premier enfant de l'élément racine ou null si aucun
+```
 
-</pre>
-
-<h2 id="Specification">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#dom-treewalker-firstchild', 'TreeWalker.firstChild')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Pas de changement de {{SpecName('DOM2 Traversal_Range')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-TreeWalker-firstChild', 'TreeWalker.firstChild')}}</td>
-   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.TreeWalker.firstChild")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>L'interface {{domxref("TreeWalker")}} à laquelle elle appartient.</li>
-</ul>
+## Spécifications
+
+| Spécification                                                                                                                                        | Statut                                       | Commentaire                                                           |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | --------------------------------------------------------------------- |
+| {{SpecName('DOM WHATWG', '#dom-treewalker-firstchild', 'TreeWalker.firstChild')}}                                         | {{Spec2('DOM WHATWG')}}             | Pas de changement de {{SpecName('DOM2 Traversal_Range')}} |
+| {{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-TreeWalker-firstChild', 'TreeWalker.firstChild')}} | {{Spec2('DOM2 Traversal_Range')}} | Définition initiale.                                                  |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.TreeWalker.firstChild")}}
+
+## Voir aussi
+
+- L'interface {{domxref("TreeWalker")}} à laquelle elle appartient.
diff --git a/files/fr/web/api/treewalker/index.md b/files/fr/web/api/treewalker/index.md
index f5ac68fb17..ae4466a996 100644
--- a/files/fr/web/api/treewalker/index.md
+++ b/files/fr/web/api/treewalker/index.md
@@ -9,160 +9,175 @@ tags:
   - Noeuds
 translation_of: Web/API/TreeWalker
 ---
-<div>
-<p>{{ APIRef("DOM") }}</p>
-</div>
-
-<p>L'objet <strong><code>TreeWalker</code></strong> représente les noeuds d'un sous-arbre de document et une position à l'intérieur.</p>
-
-<p>Un <code>TreeWalker</code> peut être créé en utilisant la méthode {{domxref("Document.createTreeWalker()")}}.</p>
-
-<h2 id="Properties">Propriétés</h2>
-
-<p><em>Cette interface n'hérite d'aucune propriété.</em></p>
-
-<dl>
- <dt>{{domxref("TreeWalker.root")}} {{readonlyInline}}</dt>
- <dd>Renvoie un {{domxref("Node")}} (<em>noeud</em>) représentant le noeud racine comme spécifié lors de la création du <code>TreeWalker</code>.</dd>
- <dt>{{domxref("TreeWalker.whatToShow")}} {{readonlyInline}}</dt>
- <dd>Renvoie un <code>unsigned long</code> (<em>long non signé</em>), celui-ci étant un masque constitué de constantes décrivant les types de {{domxref("Node")}} qui doivent être présentés. Les noeuds ne correspondants pas sont ignorés, mais leurs enfants peuvent être inclus, le cas échéant. Les valeurs possibles sont :
- <table class="standard-table">
-  <tbody>
-   <tr>
-    <td class="header">Constante</td>
-    <td class="header">Valeur numérique</td>
-    <td class="header">Description</td>
-   </tr>
-   <tr>
-    <td><code>NodeFilter.SHOW_ALL</code></td>
-    <td><code>-1</code> (c'est la valeur numérique maximale du <code>unsigned long</code> (<em>non signé long</em>))</td>
-    <td>Affiche tous les noeuds.</td>
-   </tr>
-   <tr>
-    <td><code>NodeFilter.SHOW_ATTRIBUTE</code> {{deprecated_inline}}</td>
-    <td><code>2</code></td>
-    <td>Affiche l'attribut {{domxref("Attr")}} des noeuds. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{domxref("Attr")}} comme racine ; dans ce cas, cela signifie que le nœud d'attribut apparaîtra dans la première position de l'itération ou de la traversée. Comme les attributs ne sont jamais des enfants d'autres nœuds, ils n'apparaissent pas lors de la traversée de l'arbre du document.</td>
-   </tr>
-   <tr>
-    <td><code>NodeFilter.SHOW_CDATA_SECTION</code> {{deprecated_inline}}</td>
-    <td><code>8</code></td>
-    <td>Affiche les noeuds {{domxref("CDATASection")}}.</td>
-   </tr>
-   <tr>
-    <td><code>NodeFilter.SHOW_COMMENT</code></td>
-    <td><code>128</code></td>
-    <td>Affiche les noeuds {{domxref("Comment")}}.</td>
-   </tr>
-   <tr>
-    <td><code>NodeFilter.SHOW_DOCUMENT</code></td>
-    <td><code>256</code></td>
-    <td>Affiche les noeuds {{domxref("Document")}}.</td>
-   </tr>
-   <tr>
-    <td><code>NodeFilter.SHOW_DOCUMENT_FRAGMENT</code></td>
-    <td><code>1024</code></td>
-    <td>Affiche les noeuds {{domxref("DocumentFragment")}}.</td>
-   </tr>
-   <tr>
-    <td><code>NodeFilter.SHOW_DOCUMENT_TYPE</code></td>
-    <td><code>512</code></td>
-    <td>Affiche les noeuds {{domxref("DocumentType")}}.</td>
-   </tr>
-   <tr>
-    <td><code>NodeFilter.SHOW_ELEMENT</code></td>
-    <td><code>1</code></td>
-    <td>Affiche les noeuds {{domxref("Element")}}.</td>
-   </tr>
-   <tr>
-    <td><code>NodeFilter.SHOW_ENTITY</code> {{deprecated_inline}}</td>
-    <td><code>32</code></td>
-    <td>Affiche les noeuds {{domxref("Entity")}}. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{ domxref("Entity") }} comme racine ; dans ce cas, il signifie que le noeud d'entité {{domxref("Entity") }} apparaîtra à la première position de la traversée. Étant donné que les entités ne font pas partie de l'arborescence du document, elles n'apparaissent pas lors de la traversée de l'arborescence du document.</td>
-   </tr>
-   <tr>
-    <td><code>NodeFilter.SHOW_ENTITY_REFERENCE</code> {{deprecated_inline}}</td>
-    <td><code>16</code></td>
-    <td>Affiche les noeuds {{domxref("EntityReference")}}.</td>
-   </tr>
-   <tr>
-    <td><code>NodeFilter.SHOW_NOTATION</code> {{deprecated_inline}}</td>
-    <td><code>2048</code></td>
-    <td>Affiche les noeuds {{domxref("Notation")}}. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{domxref("Notation")}} comme racine ; dans ce cas, il signifie que le noeud {{domxref("Notation")}} apparaîtra à la première position de la traversée. Étant donné que les entités ne font pas partie de l'arborescence du document, elles n'apparaissent pas lors de la traversée de l'arborescence du document.</td>
-   </tr>
-   <tr>
-    <td><code>NodeFilter.SHOW_PROCESSING_INSTRUCTION</code></td>
-    <td><code>64</code></td>
-    <td>Affiche les noeuds {{domxref("ProcessingInstruction")}}.</td>
-   </tr>
-   <tr>
-    <td><code>NodeFilter.SHOW_TEXT</code></td>
-    <td><code>4</code></td>
-    <td>Affiche les noeuds {{domxref("Text")}}.</td>
-   </tr>
-  </tbody>
- </table>
- </dd>
- <dt>{{domxref("TreeWalker.filter")}} {{readonlyInline}}</dt>
- <dd>Renvoie un {{domxref("NodeFilter")}} utilisé pour sélectionner les noeuds pertinents.</dd>
- <dt>{{domxref("TreeWalker.expandEntityReferences")}} {{readonlyInline}}{{obsolete_inline}}</dt>
- <dd>est un {{domxref("Boolean")}} (<em>booléen</em>) indiquant si, lors de la suppression d'une {{domxref("EntityReference")}}, tout son sous-arbre doit être supprimé en même temps.</dd>
- <dt>{{domxref("TreeWalker.currentNode")}}</dt>
- <dd>est le {{domxref("Node")}} sur lequel le <code>TreeWalker</code> pointe actuellement.</dd>
-</dl>
-
-<h2 id="Methods">Méthodes</h2>
-
-<p><em>Cette interface n'hérite d'aucune méthode.</em></p>
-
-<div class="note">
-<p><strong>Note :</strong> Le TreeWalker considère uniquement les nœuds DOM visibles.</p>
-</div>
-
-<dl>
- <dt>{{domxref("TreeWalker.parentNode()")}}</dt>
- <dd>Déplace le {{domxref("Node")}} actuel vers le premier noeud ancêtre <em>visible</em> dans l'ordre du document et renvoie le noeud trouvé. Il déplace également le noeud actuel vers celui-ci. Si aucun noeud n'existe ou s'il est antérieur au <em>noeud racine</em> défini lors de la construction de l'objet, renvoie <code>null</code> et le noeud courant n'est pas modifié.</dd>
- <dt>{{domxref("TreeWalker.firstChild()")}}</dt>
- <dd>Déplace le {{domxref("Node")}} courant vers son premier enfant <em>visible</em> et renvoie l'enfant trouvé. Il déplace également le noeud courant vers cet enfant. Si aucun enfant n'existe, renvoie <code>null</code> et le noeud courant n'est pas modifié.</dd>
- <dt>{{domxref("TreeWalker.lastChild()")}}</dt>
- <dd>Déplace le {{domxref("Node")}} courant vers son dernier enfant <em>visible</em> et renvoie l'enfant trouvé. Il déplace également le noeud courant vers l'enfant. Si aucun enfant n'existe, renvoie <code>null</code> et le noeud courant n'est pas modifié.</dd>
- <dt>{{domxref("TreeWalker.previousSibling()")}}</dt>
- <dd>Déplace le {{domxref("Node")}} courant vers son frère précédent, le cas échéant, et renvoie le frère trouvé. Si aucun noeud frère n'existe, renvoie <code>null</code> et le noeud courant n'est pas modifié.</dd>
- <dt>{{domxref("TreeWalker.nextSibling()")}}</dt>
- <dd>Déplace le {{domxref("Node")}} courant vers son frère suivant, le cas échéant, et renvoie le frère trouvé. Si aucun noeud frère n'existe, renvoie <code>null</code> et le noeud courant n'est pas modifié.</dd>
- <dt>{{domxref("TreeWalker.previousNode()")}}</dt>
- <dd>Déplace le {{domxref("Node")}} courant vers le noeud <em>visible</em> précédent dans l'ordre du document et renvoie le noeud trouvé. Il déplace également le noeud courant vers celui-ci. Si aucun noeud n'existe ou s'il est avant le <em>noeud racine</em> défini lors de la construction de l'objet, renvoie <code>null</code> et le noeud courant n'est pas modifié.</dd>
- <dt>{{domxref("TreeWalker.nextNode()")}}</dt>
- <dd>Déplace le {{domxref("Node")}} courant vers le noeud <em>visible</em> suivant dans l'ordre du document et renvoie le noeud trouvé. Il déplace également le noeud courant vers celui-ci. Si aucun noeud n'existe ou s'il est avant le <em>noeud racine</em> défini lors de la construction de l'objet, renvoie <code>null</code> et le noeud courant n'est pas modifié.</dd>
-</dl>
-
-<h2 id="Specification">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#treeWalker', 'TreeWalker')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Suppression de la propriété <code>expandEntityReferences</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-TreeWalker', 'TreeWalker')}}</td>
-   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.TreeWalker")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>La méthode de création : {{domxref("Document.createTreeWalker()")}}.</li>
- <li>Interfaces connexes : {{domxref("NodeFilter")}}, {{domxref("NodeIterator")}}.</li>
-</ul>
+{{ APIRef("DOM") }}
+
+L'objet **`TreeWalker`** représente les noeuds d'un sous-arbre de document et une position à l'intérieur.
+
+Un `TreeWalker` peut être créé en utilisant la méthode {{domxref("Document.createTreeWalker()")}}.
+
+## Propriétés
+
+_Cette interface n'hérite d'aucune propriété._
+
+- {{domxref("TreeWalker.root")}} {{readonlyInline}}
+  - : Renvoie un {{domxref("Node")}} (_noeud_) représentant le noeud racine comme spécifié lors de la création du `TreeWalker`.
+- {{domxref("TreeWalker.whatToShow")}} {{readonlyInline}}
+
+  - : Renvoie un `unsigned long` (_long non signé_), celui-ci étant un masque constitué de constantes décrivant les types de {{domxref("Node")}} qui doivent être présentés. Les noeuds ne correspondants pas sont ignorés, mais leurs enfants peuvent être inclus, le cas échéant. Les valeurs possibles sont :
+
+    <table class="standard-table">
+      <tbody>
+        <tr>
+          <td class="header">Constante</td>
+          <td class="header">Valeur numérique</td>
+          <td class="header">Description</td>
+        </tr>
+        <tr>
+          <td><code>NodeFilter.SHOW_ALL</code></td>
+          <td>
+            <code>-1</code> (c'est la valeur numérique maximale du
+            <code>unsigned long</code> (<em>non signé long</em>))
+          </td>
+          <td>Affiche tous les noeuds.</td>
+        </tr>
+        <tr>
+          <td>
+            <code>NodeFilter.SHOW_ATTRIBUTE</code> {{deprecated_inline}}
+          </td>
+          <td><code>2</code></td>
+          <td>
+            Affiche l'attribut {{domxref("Attr")}} des noeuds. Cela n'a de sens
+            que lors de la création d'un {{domxref("TreeWalker")}} avec un
+            noeud {{domxref("Attr")}} comme racine ; dans ce cas, cela signifie
+            que le nœud d'attribut apparaîtra dans la première position de
+            l'itération ou de la traversée. Comme les attributs ne sont jamais des
+            enfants d'autres nœuds, ils n'apparaissent pas lors de la traversée de
+            l'arbre du document.
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <code>NodeFilter.SHOW_CDATA_SECTION</code> {{deprecated_inline}}
+          </td>
+          <td><code>8</code></td>
+          <td>Affiche les noeuds {{domxref("CDATASection")}}.</td>
+        </tr>
+        <tr>
+          <td><code>NodeFilter.SHOW_COMMENT</code></td>
+          <td><code>128</code></td>
+          <td>Affiche les noeuds {{domxref("Comment")}}.</td>
+        </tr>
+        <tr>
+          <td><code>NodeFilter.SHOW_DOCUMENT</code></td>
+          <td><code>256</code></td>
+          <td>Affiche les noeuds {{domxref("Document")}}.</td>
+        </tr>
+        <tr>
+          <td><code>NodeFilter.SHOW_DOCUMENT_FRAGMENT</code></td>
+          <td><code>1024</code></td>
+          <td>Affiche les noeuds {{domxref("DocumentFragment")}}.</td>
+        </tr>
+        <tr>
+          <td><code>NodeFilter.SHOW_DOCUMENT_TYPE</code></td>
+          <td><code>512</code></td>
+          <td>Affiche les noeuds {{domxref("DocumentType")}}.</td>
+        </tr>
+        <tr>
+          <td><code>NodeFilter.SHOW_ELEMENT</code></td>
+          <td><code>1</code></td>
+          <td>Affiche les noeuds {{domxref("Element")}}.</td>
+        </tr>
+        <tr>
+          <td><code>NodeFilter.SHOW_ENTITY</code> {{deprecated_inline}}</td>
+          <td><code>32</code></td>
+          <td>
+            Affiche les noeuds {{domxref("Entity")}}. Cela n'a de sens que
+            lors de la création d'un {{domxref("TreeWalker")}} avec un noeud
+            {{ domxref("Entity") }} comme racine ; dans ce cas, il signifie
+            que le noeud d'entité {{domxref("Entity") }} apparaîtra à la
+            première position de la traversée. Étant donné que les entités ne font
+            pas partie de l'arborescence du document, elles n'apparaissent pas lors
+            de la traversée de l'arborescence du document.
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <code>NodeFilter.SHOW_ENTITY_REFERENCE</code>
+            {{deprecated_inline}}
+          </td>
+          <td><code>16</code></td>
+          <td>Affiche les noeuds {{domxref("EntityReference")}}.</td>
+        </tr>
+        <tr>
+          <td>
+            <code>NodeFilter.SHOW_NOTATION</code> {{deprecated_inline}}
+          </td>
+          <td><code>2048</code></td>
+          <td>
+            Affiche les noeuds {{domxref("Notation")}}. Cela n'a de sens
+            que lors de la création d'un {{domxref("TreeWalker")}} avec un
+            noeud {{domxref("Notation")}} comme racine ; dans ce cas, il
+            signifie que le noeud {{domxref("Notation")}} apparaîtra à la
+            première position de la traversée. Étant donné que les entités ne font
+            pas partie de l'arborescence du document, elles n'apparaissent pas lors
+            de la traversée de l'arborescence du document.
+          </td>
+        </tr>
+        <tr>
+          <td><code>NodeFilter.SHOW_PROCESSING_INSTRUCTION</code></td>
+          <td><code>64</code></td>
+          <td>
+            Affiche les noeuds {{domxref("ProcessingInstruction")}}.
+          </td>
+        </tr>
+        <tr>
+          <td><code>NodeFilter.SHOW_TEXT</code></td>
+          <td><code>4</code></td>
+          <td>Affiche les noeuds {{domxref("Text")}}.</td>
+        </tr>
+      </tbody>
+    </table>
+
+- {{domxref("TreeWalker.filter")}} {{readonlyInline}}
+  - : Renvoie un {{domxref("NodeFilter")}} utilisé pour sélectionner les noeuds pertinents.
+- {{domxref("TreeWalker.expandEntityReferences")}} {{readonlyInline}}{{obsolete_inline}}
+  - : est un {{domxref("Boolean")}} (_booléen_) indiquant si, lors de la suppression d'une {{domxref("EntityReference")}}, tout son sous-arbre doit être supprimé en même temps.
+- {{domxref("TreeWalker.currentNode")}}
+  - : est le {{domxref("Node")}} sur lequel le `TreeWalker` pointe actuellement.
+
+## Méthodes
+
+_Cette interface n'hérite d'aucune méthode._
+
+> **Note :** Le TreeWalker considère uniquement les nœuds DOM visibles.
+
+- {{domxref("TreeWalker.parentNode()")}}
+  - : Déplace le {{domxref("Node")}} actuel vers le premier noeud ancêtre _visible_ dans l'ordre du document et renvoie le noeud trouvé. Il déplace également le noeud actuel vers celui-ci. Si aucun noeud n'existe ou s'il est antérieur au _noeud racine_ défini lors de la construction de l'objet, renvoie `null` et le noeud courant n'est pas modifié.
+- {{domxref("TreeWalker.firstChild()")}}
+  - : Déplace le {{domxref("Node")}} courant vers son premier enfant _visible_ et renvoie l'enfant trouvé. Il déplace également le noeud courant vers cet enfant. Si aucun enfant n'existe, renvoie `null` et le noeud courant n'est pas modifié.
+- {{domxref("TreeWalker.lastChild()")}}
+  - : Déplace le {{domxref("Node")}} courant vers son dernier enfant _visible_ et renvoie l'enfant trouvé. Il déplace également le noeud courant vers l'enfant. Si aucun enfant n'existe, renvoie `null` et le noeud courant n'est pas modifié.
+- {{domxref("TreeWalker.previousSibling()")}}
+  - : Déplace le {{domxref("Node")}} courant vers son frère précédent, le cas échéant, et renvoie le frère trouvé. Si aucun noeud frère n'existe, renvoie `null` et le noeud courant n'est pas modifié.
+- {{domxref("TreeWalker.nextSibling()")}}
+  - : Déplace le {{domxref("Node")}} courant vers son frère suivant, le cas échéant, et renvoie le frère trouvé. Si aucun noeud frère n'existe, renvoie `null` et le noeud courant n'est pas modifié.
+- {{domxref("TreeWalker.previousNode()")}}
+  - : Déplace le {{domxref("Node")}} courant vers le noeud _visible_ précédent dans l'ordre du document et renvoie le noeud trouvé. Il déplace également le noeud courant vers celui-ci. Si aucun noeud n'existe ou s'il est avant le _noeud racine_ défini lors de la construction de l'objet, renvoie `null` et le noeud courant n'est pas modifié.
+- {{domxref("TreeWalker.nextNode()")}}
+  - : Déplace le {{domxref("Node")}} courant vers le noeud _visible_ suivant dans l'ordre du document et renvoie le noeud trouvé. Il déplace également le noeud courant vers celui-ci. Si aucun noeud n'existe ou s'il est avant le _noeud racine_ défini lors de la construction de l'objet, renvoie `null` et le noeud courant n'est pas modifié.
+
+## Spécifications
+
+| Spécification                                                                                                            | Statut                                       | Commentaire                                           |
+| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------- | ----------------------------------------------------- |
+| {{SpecName('DOM WHATWG', '#treeWalker', 'TreeWalker')}}                                                 | {{Spec2('DOM WHATWG')}}             | Suppression de la propriété `expandEntityReferences`. |
+| {{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-TreeWalker', 'TreeWalker')}} | {{Spec2('DOM2 Traversal_Range')}} | Définition initiale.                                  |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.TreeWalker")}}
+
+## Voir aussi
+
+- La méthode de création : {{domxref("Document.createTreeWalker()")}}.
+- Interfaces connexes : {{domxref("NodeFilter")}}, {{domxref("NodeIterator")}}.
diff --git a/files/fr/web/api/treewalker/lastchild/index.md b/files/fr/web/api/treewalker/lastchild/index.md
index c61ad55a6a..cc971e33bf 100644
--- a/files/fr/web/api/treewalker/lastchild/index.md
+++ b/files/fr/web/api/treewalker/lastchild/index.md
@@ -9,54 +9,37 @@ tags:
   - Noeuds
 translation_of: Web/API/TreeWalker/lastChild
 ---
-<p>{{ APIRef("DOM") }}</p>
+{{ APIRef("DOM") }}
 
-<p>La méthode <strong><code>TreeWalker.lastChild()</code></strong> déplace le {{domxref("Node")}} courant au dernier enfant <em>visible</em> du noeud courant et renvoie l'enfant trouvé. Il déplace aussi le noeud courant vers cet enfant. Si aucun enfant n'existe, elle retourne <code>null</code> et le noeud courant reste inchangé.</p>
+La méthode **`TreeWalker.lastChild()`** déplace le {{domxref("Node")}} courant au dernier enfant _visible_ du noeud courant et renvoie l'enfant trouvé. Il déplace aussi le noeud courant vers cet enfant. Si aucun enfant n'existe, elle retourne `null` et le noeud courant reste inchangé.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>node</em> = <em>treeWalker</em>.lastChild();
-</pre>
+    node = treeWalker.lastChild();
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">var treeWalker = document.createTreeWalker(
+```js
+var treeWalker = document.createTreeWalker(
     document.body,
     NodeFilter.SHOW_ELEMENT,
     { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
     false
 );
 var node = treeWalker.lastChild(); // renvoie le dernier enfant visible de l'élément racine
-</pre>
-
-<h2 id="Specification">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#dom-treewalker-lastchild', 'TreeWalker.lastChild')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Pas de changement de {{SpecName('DOM2 Traversal_Range')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-TreeWalker-lastChild', 'TreeWalker.lastChild')}}</td>
-   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.TreeWalker.firstChild")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>L'interface {{domxref("TreeWalker")}} à laquelle elle appartient.</li>
-</ul>
+```
+
+## Spécifications
+
+| Spécification                                                                                                                                    | Statut                                       | Commentaire                                                           |
+| ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------- | --------------------------------------------------------------------- |
+| {{SpecName('DOM WHATWG', '#dom-treewalker-lastchild', 'TreeWalker.lastChild')}}                                         | {{Spec2('DOM WHATWG')}}             | Pas de changement de {{SpecName('DOM2 Traversal_Range')}} |
+| {{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-TreeWalker-lastChild', 'TreeWalker.lastChild')}} | {{Spec2('DOM2 Traversal_Range')}} | Définition initiale.                                                  |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.TreeWalker.firstChild")}}
+
+## Voir aussi
+
+- L'interface {{domxref("TreeWalker")}} à laquelle elle appartient.
diff --git a/files/fr/web/api/treewalker/nextnode/index.md b/files/fr/web/api/treewalker/nextnode/index.md
index 19b3d6e972..9e9ff5c87c 100644
--- a/files/fr/web/api/treewalker/nextnode/index.md
+++ b/files/fr/web/api/treewalker/nextnode/index.md
@@ -9,55 +9,37 @@ tags:
   - Noeuds
 translation_of: Web/API/TreeWalker/nextNode
 ---
-<p>{{ APIRef("DOM") }}</p>
+{{ APIRef("DOM") }}
 
-<p>La méthode <strong><code>TreeWalker.nextNode()</code></strong> déplace le {{domxref("Node")}} courant au noeud suivant <em>visible</em> dans l'ordre du document et renvoie le noeud trouvé. Elle déplace aussi le noeud courant vers celui-ci. Si aucun noeud n'existe, elle renvoie <code>null</code> et le noeud courant est inchangé.</p>
+La méthode **`TreeWalker.nextNode()`** déplace le {{domxref("Node")}} courant au noeud suivant _visible_ dans l'ordre du document et renvoie le noeud trouvé. Elle déplace aussi le noeud courant vers celui-ci. Si aucun noeud n'existe, elle renvoie `null` et le noeud courant est inchangé.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>node</em> = <em>treeWalker</em>.nextNode();
-</pre>
+    node = treeWalker.nextNode();
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">var treeWalker = document.createTreeWalker(
+```js
+var treeWalker = document.createTreeWalker(
     document.body,
     NodeFilter.SHOW_ELEMENT,
     { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
     false
 );
 var node = treeWalker.nextNode(); // renvoie le premier enfant de la racine, car il s'agit du noeud suivant dans l'ordre du document
+```
 
-</pre>
-
-<h2 id="Specification">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#dom-treewalker-nextnode', 'TreeWalker.nextNode')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Pas de changement de {{SpecName('DOM2 Traversal_Range')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-TreeWalker-nextNode', 'TreeWalker.nextNode')}}</td>
-   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.TreeWalker.nextNode")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>L'interface {{domxref("TreeWalker")}} à laquelle elle appartient.</li>
-</ul>
+## Spécifications
+
+| Spécification                                                                                                                                    | Statut                                       | Commentaire                                                           |
+| ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------- | --------------------------------------------------------------------- |
+| {{SpecName('DOM WHATWG', '#dom-treewalker-nextnode', 'TreeWalker.nextNode')}}                                         | {{Spec2('DOM WHATWG')}}             | Pas de changement de {{SpecName('DOM2 Traversal_Range')}} |
+| {{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-TreeWalker-nextNode', 'TreeWalker.nextNode')}} | {{Spec2('DOM2 Traversal_Range')}} | Définition initiale.                                                  |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.TreeWalker.nextNode")}}
+
+## Voir aussi
+
+- L'interface {{domxref("TreeWalker")}} à laquelle elle appartient.
diff --git a/files/fr/web/api/treewalker/nextsibling/index.md b/files/fr/web/api/treewalker/nextsibling/index.md
index ebf87930af..4ca0c0a7a4 100644
--- a/files/fr/web/api/treewalker/nextsibling/index.md
+++ b/files/fr/web/api/treewalker/nextsibling/index.md
@@ -9,18 +9,18 @@ tags:
   - Noeuds
 translation_of: Web/API/TreeWalker/nextSibling
 ---
-<p>{{ APIRef("DOM") }}</p>
+{{ APIRef("DOM") }}
 
-<p>La méthode <strong><code>TreeWalker.nextSibling()</code></strong> déplace le {{domxref("Node")}} courant vers son frère suivant, le cas échéant, et renvoie le frère trouvé. Si aucun noeud frère n'est trouvé, elle renvoie <code>null</code> et le noeud courant reste inchangé.</p>
+La méthode **`TreeWalker.nextSibling()`** déplace le {{domxref("Node")}} courant vers son frère suivant, le cas échéant, et renvoie le frère trouvé. Si aucun noeud frère n'est trouvé, elle renvoie `null` et le noeud courant reste inchangé.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>node</em> = <em>treeWalker</em>.nextSibling();
-</pre>
+    node = treeWalker.nextSibling();
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">var treeWalker = document.createTreeWalker(
+```js
+var treeWalker = document.createTreeWalker(
     document.body,
     NodeFilter.SHOW_ELEMENT,
     { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
@@ -28,37 +28,19 @@ translation_of: Web/API/TreeWalker/nextSibling
 );
 treeWalker.firstChild();
 var node = treeWalker.nextSibling(); // renvoie null si le premier enfant de l'élément racine n'a pas de frère
+```
 
-</pre>
+## Spécifications
 
-<h2 id="Specification">Spécifications</h2>
+| Spécification                                                                                                                                            | Statut                                       | Commentaire                                                           |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | --------------------------------------------------------------------- |
+| {{SpecName('DOM WHATWG', '#dom-treewalker-nextsibling', 'TreeWalker.nextSibling')}}                                         | {{Spec2('DOM WHATWG')}}             | Pas de changement de {{SpecName('DOM2 Traversal_Range')}} |
+| {{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-TreeWalker-nextSibling', 'TreeWalker.nextSibling')}} | {{Spec2('DOM2 Traversal_Range')}} | Définition initiale.                                                  |
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#dom-treewalker-nextsibling', 'TreeWalker.nextSibling')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Pas de changement de {{SpecName('DOM2 Traversal_Range')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-TreeWalker-nextSibling', 'TreeWalker.nextSibling')}}</td>
-   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+## Compatibilité des navigateurs
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+{{Compat("api.TreeWalker.nextSibling")}}
 
-<p>{{Compat("api.TreeWalker.nextSibling")}}</p>
+## Voir aussi
 
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>L'interface {{domxref("TreeWalker")}} à laquelle elle appartient.</li>
-</ul>
+- L'interface {{domxref("TreeWalker")}} à laquelle elle appartient.
diff --git a/files/fr/web/api/treewalker/parentnode/index.md b/files/fr/web/api/treewalker/parentnode/index.md
index a80948ea84..35a002daa1 100644
--- a/files/fr/web/api/treewalker/parentnode/index.md
+++ b/files/fr/web/api/treewalker/parentnode/index.md
@@ -9,55 +9,37 @@ tags:
   - Noeuds
 translation_of: Web/API/TreeWalker/parentNode
 ---
-<p>{{ APIRef("DOM") }}</p>
+{{ APIRef("DOM") }}
 
-<p>La méthode <strong><code>TreeWalker.parentNode()</code></strong> déplace le {{domxref("Node")}} courant vers le premier noeud ancêtre <em>visible</em> dans l'ordre du document et renvoie le noeud trouvé. Si aucun noeud n'existe ou s'il est au-dessus du <em>noeud racine</em> du <code>TreeWalker</code>, elle renvoie <code>null</code> et le noeud actuel reste inchangé.</p>
+La méthode **`TreeWalker.parentNode()`** déplace le {{domxref("Node")}} courant vers le premier noeud ancêtre _visible_ dans l'ordre du document et renvoie le noeud trouvé. Si aucun noeud n'existe ou s'il est au-dessus du _noeud racine_ du `TreeWalker`, elle renvoie `null` et le noeud actuel reste inchangé.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>node</em> = <em>treeWalker</em>.parentNode();
-</pre>
+    node = treeWalker.parentNode();
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">var treeWalker = document.createTreeWalker(
+```js
+var treeWalker = document.createTreeWalker(
     document.body,
     NodeFilter.SHOW_ELEMENT,
     { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
     false
 );
 var node = treeWalker.parentNode(); // returns null as there is no parent
+```
 
-</pre>
-
-<h2 id="Specification">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#dom-treewalker-parentnode', 'TreeWalker.parentNode')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Pas de changement de {{SpecName('DOM2 Traversal_Range')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-TreeWalker-parentNode', 'TreeWalker.parentNode')}}</td>
-   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.TreeWalker.parentNode")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>L'interface {{domxref("TreeWalker")}} à laquelle elle appartient.</li>
-</ul>
+## Spécifications
+
+| Spécification                                                                                                                                        | Statut                                       | Commentaire                                                           |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | --------------------------------------------------------------------- |
+| {{SpecName('DOM WHATWG', '#dom-treewalker-parentnode', 'TreeWalker.parentNode')}}                                         | {{Spec2('DOM WHATWG')}}             | Pas de changement de {{SpecName('DOM2 Traversal_Range')}} |
+| {{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-TreeWalker-parentNode', 'TreeWalker.parentNode')}} | {{Spec2('DOM2 Traversal_Range')}} | Définition initiale.                                                  |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.TreeWalker.parentNode")}}
+
+## Voir aussi
+
+- L'interface {{domxref("TreeWalker")}} à laquelle elle appartient.
diff --git a/files/fr/web/api/treewalker/previousnode/index.md b/files/fr/web/api/treewalker/previousnode/index.md
index 05471ace25..901ad7a3af 100644
--- a/files/fr/web/api/treewalker/previousnode/index.md
+++ b/files/fr/web/api/treewalker/previousnode/index.md
@@ -9,55 +9,37 @@ tags:
   - Noeuds
 translation_of: Web/API/TreeWalker/previousNode
 ---
-<p>{{ APIRef("DOM") }}</p>
+{{ APIRef("DOM") }}
 
-<p>La méthode <strong><code>TreeWalker.previousNode()</code></strong> déplace le {{domxref("Node")}} courant vers le noeud précédent <em>visible</em> dans l'ordre du document et renvoie le noeud trouvé. Elle déplace aussi le noeud courant vers celui-ci. S'il n'en existe aucun ou s'il est avant le <em>noeud racine</em> défini lors de la construction de l'objet, elle renvoie <code>null</code> et le noeud actuel n'est pas changé.</p>
+La méthode **`TreeWalker.previousNode()`** déplace le {{domxref("Node")}} courant vers le noeud précédent _visible_ dans l'ordre du document et renvoie le noeud trouvé. Elle déplace aussi le noeud courant vers celui-ci. S'il n'en existe aucun ou s'il est avant le _noeud racine_ défini lors de la construction de l'objet, elle renvoie `null` et le noeud actuel n'est pas changé.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>node</em> = <em>treeWalker</em>.previousNode();
-</pre>
+    node = treeWalker.previousNode();
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">var treeWalker = document.createTreeWalker(
+```js
+var treeWalker = document.createTreeWalker(
     document.body,
     NodeFilter.SHOW_ELEMENT,
     { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
     false
 );
 var node = treeWalker.previousNode(); // renvoie null car il n'y a pas de parent
+```
 
-</pre>
-
-<h2 id="Specification">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#dom-treewalker-previousnode', 'TreeWalker.previousNode')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Pas de changement de {{SpecName('DOM2 Traversal_Range')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-TreeWalker-previousNode', 'TreeWalker.previousNode')}}</td>
-   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.TreeWalker.previousNode")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>L'interface {{domxref("TreeWalker")}} à laquelle elle appartient.</li>
-</ul>
+## Spécifications
+
+| Spécification                                                                                                                                            | Statut                                       | Commentaire                                                           |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | --------------------------------------------------------------------- |
+| {{SpecName('DOM WHATWG', '#dom-treewalker-previousnode', 'TreeWalker.previousNode')}}                                         | {{Spec2('DOM WHATWG')}}             | Pas de changement de {{SpecName('DOM2 Traversal_Range')}} |
+| {{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-TreeWalker-previousNode', 'TreeWalker.previousNode')}} | {{Spec2('DOM2 Traversal_Range')}} | Définition initiale.                                                  |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.TreeWalker.previousNode")}}
+
+## Voir aussi
+
+- L'interface {{domxref("TreeWalker")}} à laquelle elle appartient.
diff --git a/files/fr/web/api/treewalker/previoussibling/index.md b/files/fr/web/api/treewalker/previoussibling/index.md
index 49db9c03ad..97ffb8ec7c 100644
--- a/files/fr/web/api/treewalker/previoussibling/index.md
+++ b/files/fr/web/api/treewalker/previoussibling/index.md
@@ -9,55 +9,37 @@ tags:
   - Noeuds
 translation_of: Web/API/TreeWalker/previousSibling
 ---
-<p>{{ APIRef("DOM") }}</p>
+{{ APIRef("DOM") }}
 
-<p>La méthode <strong><code>TreeWalker.previousSibling()</code></strong> déplace le {{domxref("Node")}} courant vers son frère précédent, le cas échéant, et renvoie le frère trouvé. S'il n'y en a pas, elle renvoie <code>null</code> et le noeud actuel est inchangé.</p>
+La méthode **`TreeWalker.previousSibling()`** déplace le {{domxref("Node")}} courant vers son frère précédent, le cas échéant, et renvoie le frère trouvé. S'il n'y en a pas, elle renvoie `null` et le noeud actuel est inchangé.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>node</em> = <em>treeWalker</em>.previousSibling();
-</pre>
+    node = treeWalker.previousSibling();
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">var treeWalker = document.createTreeWalker(
+```js
+var treeWalker = document.createTreeWalker(
     document.body,
     NodeFilter.SHOW_ELEMENT,
     { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
     false
 );
 var node = treeWalker.previousSibling(); // renvoie null car il n'y a pas de frère précédent
+```
 
-</pre>
-
-<h2 id="Specification">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#dom-treewalker-previoussibling', 'TreeWalker.previousSibling')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Pas de changement de {{SpecName('DOM2 Traversal_Range')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-TreeWalker-previousSibling', 'TreeWalker.previousSibling')}}</td>
-   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.TreeWalker.previousSibling")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>L'interface {{domxref("TreeWalker")}} à laquelle elle appartient.</li>
-</ul>
+## Spécifications
+
+| Spécification                                                                                                                                                    | Statut                                       | Commentaire                                                           |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | --------------------------------------------------------------------- |
+| {{SpecName('DOM WHATWG', '#dom-treewalker-previoussibling', 'TreeWalker.previousSibling')}}                                         | {{Spec2('DOM WHATWG')}}             | Pas de changement de {{SpecName('DOM2 Traversal_Range')}} |
+| {{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-TreeWalker-previousSibling', 'TreeWalker.previousSibling')}} | {{Spec2('DOM2 Traversal_Range')}} | Définition initiale.                                                  |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.TreeWalker.previousSibling")}}
+
+## Voir aussi
+
+- L'interface {{domxref("TreeWalker")}} à laquelle elle appartient.
diff --git a/files/fr/web/api/treewalker/root/index.md b/files/fr/web/api/treewalker/root/index.md
index bfa2d38c2b..64215ab2d2 100644
--- a/files/fr/web/api/treewalker/root/index.md
+++ b/files/fr/web/api/treewalker/root/index.md
@@ -9,53 +9,37 @@ tags:
   - Propriétés
 translation_of: Web/API/TreeWalker/root
 ---
-<p>{{ APIRef("DOM") }}</p>
+{{ APIRef("DOM") }}
 
-<p>La propriété en lecture seule <code><strong>TreeWalker.root</strong></code> renvoie le noeud qui est la racine de ce que TreeWalker doit traverser.</p>
+La propriété en lecture seule **`TreeWalker.root`** renvoie le noeud qui est la racine de ce que TreeWalker doit traverser.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>root</em> = TreeWalker.root;</pre>
+    root = TreeWalker.root;
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">var treeWalker = document.createTreeWalker(
+```js
+var treeWalker = document.createTreeWalker(
     document.body,
     NodeFilter.SHOW_ELEMENT,
     { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
     false
 );
 root = treeWalker.root; // document.body dans ce cas
-</pre>
-
-<h2 id="Specification">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#dom-treewalker-root', 'TreeWalker.root')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Pas de changement de {{SpecName('DOM2 Traversal_Range')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-TreeWalker-root', 'TreeWalker.root')}}</td>
-   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.TreeWalker.root")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>L'interface {{domxref("TreeWalker")}}.</li>
-</ul>
+```
+
+## Spécifications
+
+| Spécification                                                                                                                        | Statut                                       | Commentaire                                                           |
+| ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------- | --------------------------------------------------------------------- |
+| {{SpecName('DOM WHATWG', '#dom-treewalker-root', 'TreeWalker.root')}}                                         | {{Spec2('DOM WHATWG')}}             | Pas de changement de {{SpecName('DOM2 Traversal_Range')}} |
+| {{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-TreeWalker-root', 'TreeWalker.root')}} | {{Spec2('DOM2 Traversal_Range')}} | Définition initiale.                                                  |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.TreeWalker.root")}}
+
+## Voir aussi
+
+- L'interface {{domxref("TreeWalker")}}.
diff --git a/files/fr/web/api/treewalker/whattoshow/index.md b/files/fr/web/api/treewalker/whattoshow/index.md
index 4e63064707..b7f4dd47c1 100644
--- a/files/fr/web/api/treewalker/whattoshow/index.md
+++ b/files/fr/web/api/treewalker/whattoshow/index.md
@@ -8,134 +8,56 @@ tags:
   - Reference
 translation_of: Web/API/TreeWalker/whatToShow
 ---
-<p>{{APIRef("DOM")}}</p>
-
-<p>La propriété en lecture seule <code><strong>TreeWalker.whatToShow</strong></code> renvoie un <code>unsigned long</code> (<em>non signé long</em>) qui est un masque constitué de constantes décrivant les types de {{domxref("Node")}} à présenter. Les noeuds ne correspondant pas sont ignorés, mais leurs enfants peuvent être inclus s'ils sont pertinents. Les valeurs possibles sont :</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Constante
-   </th><th scope="col">Valeur numérique
-   </th><th scope="col">Description
-  </th></tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>NodeFilter.SHOW_ALL</code></td>
-   <td><code>-1</code> (c'est la valeur numérique maximale du <code>unsigned long</code> (<em>non signé long</em>))</td>
-   <td>Affiche tous les noeuds.</td>
-  </tr>
-  <tr>
-   <td><code>NodeFilter.SHOW_ATTRIBUTE</code> {{deprecated_inline}}</td>
-   <td><code>2</code></td>
-   <td>Affiche l'attribut {{domxref("Attr")}} des noeuds. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{domxref("Attr")}} comme racine ; dans ce cas, cela signifie que le nœud d'attribut apparaîtra dans la première position de l'itération ou de la traversée. Comme les attributs ne sont jamais des enfants d'autres nœuds, ils n'apparaissent pas lors de la traversée de l'arbre du document.</td>
-  </tr>
-  <tr>
-   <td><code>NodeFilter.SHOW_CDATA_SECTION</code> {{deprecated_inline}}</td>
-   <td><code>8</code></td>
-   <td>Affiche les noeuds {{domxref("CDATASection")}}.</td>
-  </tr>
-  <tr>
-   <td><code>NodeFilter.SHOW_COMMENT</code></td>
-   <td><code>128</code></td>
-   <td>Affiche les noeuds {{domxref("Comment")}}.</td>
-  </tr>
-  <tr>
-   <td><code>NodeFilter.SHOW_DOCUMENT</code></td>
-   <td><code>256</code></td>
-   <td>Affiche les noeuds {{domxref("Document")}}.</td>
-  </tr>
-  <tr>
-   <td><code>NodeFilter.SHOW_DOCUMENT_FRAGMENT</code></td>
-   <td><code>1024</code></td>
-   <td>Affiche les noeuds {{domxref("DocumentFragment")}}.</td>
-  </tr>
-  <tr>
-   <td><code>NodeFilter.SHOW_DOCUMENT_TYPE</code></td>
-   <td><code>512</code></td>
-   <td>Affiche les noeuds {{domxref("DocumentType")}}.</td>
-  </tr>
-  <tr>
-   <td><code>NodeFilter.SHOW_ELEMENT</code></td>
-   <td><code>1</code></td>
-   <td>Affiche les noeuds {{domxref("Element")}}.</td>
-  </tr>
-  <tr>
-   <td><code>NodeFilter.SHOW_ENTITY</code> {{deprecated_inline}}</td>
-   <td><code>32</code></td>
-   <td>Affiche les noeuds {{domxref("Entity")}}. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{ domxref("Entity") }} comme racine ; dans ce cas, il signifie que le noeud d'entité {{domxref("Entity") }} apparaîtra à la première position de la traversée. Étant donné que les entités ne font pas partie de l'arborescence du document, elles n'apparaissent pas lors de la traversée de l'arborescence du document.</td>
-  </tr>
-  <tr>
-   <td><code>NodeFilter.SHOW_ENTITY_REFERENCE</code> {{deprecated_inline}}</td>
-   <td><code>16</code></td>
-   <td>Affiche les noeuds {{domxref("EntityReference")}}.</td>
-  </tr>
-  <tr>
-   <td><code>NodeFilter.SHOW_NOTATION</code> {{deprecated_inline}}</td>
-   <td><code>2048</code></td>
-   <td>Affiche les noeuds {{domxref("Notation")}}. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{domxref("Notation")}} comme racine ; dans ce cas, il signifie que le noeud {{domxref("Notation")}} apparaîtra à la première position de la traversée. Étant donné que les entités ne font pas partie de l'arborescence du document, elles n'apparaissent pas lors de la traversée de l'arborescence du document.</td>
-  </tr>
-  <tr>
-   <td><code>NodeFilter.SHOW_PROCESSING_INSTRUCTION</code></td>
-   <td><code>64</code></td>
-   <td>Affiche les noeuds {{domxref("ProcessingInstruction")}}.</td>
-  </tr>
-  <tr>
-   <td><code>NodeFilter.SHOW_TEXT</code></td>
-   <td><code>4</code></td>
-   <td>Affiche les noeuds {{domxref("Text")}}.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox"><em>nodeTypes</em> = treeWalker.whatToShow;</pre>
-
-<h2 id="Example">Exemples</h2>
-
-<pre class="brush: js">var treeWalker = document.createTreeWalker(
+{{APIRef("DOM")}}
+
+La propriété en lecture seule **`TreeWalker.whatToShow`** renvoie un `unsigned long` (_non signé long_) qui est un masque constitué de constantes décrivant les types de {{domxref("Node")}} à présenter. Les noeuds ne correspondant pas sont ignorés, mais leurs enfants peuvent être inclus s'ils sont pertinents. Les valeurs possibles sont :
+
+| Constante                                                       | Valeur numérique                                                                | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
+| --------------------------------------------------------------- | ------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `NodeFilter.SHOW_ALL`                                           | `-1` (c'est la valeur numérique maximale du `unsigned long` (_non signé long_)) | Affiche tous les noeuds.                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| `NodeFilter.SHOW_ATTRIBUTE` {{deprecated_inline}}        | `2`                                                                             | Affiche l'attribut {{domxref("Attr")}} des noeuds. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{domxref("Attr")}} comme racine ; dans ce cas, cela signifie que le nœud d'attribut apparaîtra dans la première position de l'itération ou de la traversée. Comme les attributs ne sont jamais des enfants d'autres nœuds, ils n'apparaissent pas lors de la traversée de l'arbre du document.                               |
+| `NodeFilter.SHOW_CDATA_SECTION` {{deprecated_inline}}    | `8`                                                                             | Affiche les noeuds {{domxref("CDATASection")}}.                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| `NodeFilter.SHOW_COMMENT`                                       | `128`                                                                           | Affiche les noeuds {{domxref("Comment")}}.                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| `NodeFilter.SHOW_DOCUMENT`                                      | `256`                                                                           | Affiche les noeuds {{domxref("Document")}}.                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| `NodeFilter.SHOW_DOCUMENT_FRAGMENT`                             | `1024`                                                                          | Affiche les noeuds {{domxref("DocumentFragment")}}.                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| `NodeFilter.SHOW_DOCUMENT_TYPE`                                 | `512`                                                                           | Affiche les noeuds {{domxref("DocumentType")}}.                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| `NodeFilter.SHOW_ELEMENT`                                       | `1`                                                                             | Affiche les noeuds {{domxref("Element")}}.                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| `NodeFilter.SHOW_ENTITY` {{deprecated_inline}}           | `32`                                                                            | Affiche les noeuds {{domxref("Entity")}}. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{ domxref("Entity") }} comme racine ; dans ce cas, il signifie que le noeud d'entité {{domxref("Entity") }} apparaîtra à la première position de la traversée. Étant donné que les entités ne font pas partie de l'arborescence du document, elles n'apparaissent pas lors de la traversée de l'arborescence du document. |
+| `NodeFilter.SHOW_ENTITY_REFERENCE` {{deprecated_inline}} | `16`                                                                            | Affiche les noeuds {{domxref("EntityReference")}}.                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| `NodeFilter.SHOW_NOTATION` {{deprecated_inline}}         | `2048`                                                                          | Affiche les noeuds {{domxref("Notation")}}. Cela n'a de sens que lors de la création d'un {{domxref("TreeWalker")}} avec un noeud {{domxref("Notation")}} comme racine ; dans ce cas, il signifie que le noeud {{domxref("Notation")}} apparaîtra à la première position de la traversée. Étant donné que les entités ne font pas partie de l'arborescence du document, elles n'apparaissent pas lors de la traversée de l'arborescence du document.  |
+| `NodeFilter.SHOW_PROCESSING_INSTRUCTION`                        | `64`                                                                            | Affiche les noeuds {{domxref("ProcessingInstruction")}}.                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| `NodeFilter.SHOW_TEXT`                                          | `4`                                                                             | Affiche les noeuds {{domxref("Text")}}.                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+
+## Syntaxe
+
+    nodeTypes = treeWalker.whatToShow;
+
+## Exemples
+
+```js
+var treeWalker = document.createTreeWalker(
     document.body,
     NodeFilter.SHOW_ELEMENT + NodeFilter.SHOW_COMMENT + NodeFilter.SHOW_TEXT,
     { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
     false
 );
 if( (treeWalker.whatToShow == NodeFilter.SHOW_ALL) ||
-    (treeWalker.whatToShow % (NodeFilter.SHOW_COMMENT*2)) &gt;= NodeFilter.SHOW_COMMENT) {
+    (treeWalker.whatToShow % (NodeFilter.SHOW_COMMENT*2)) >= NodeFilter.SHOW_COMMENT) {
     // treeWalker affichera des commentaires
 }
-</pre>
+```
+
+## Spécifications
 
-<h2 id="Spécifications">Spécifications</h2>
+| Spécification                                                                                                                                        | État                                         | Commentaires                                                          |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | --------------------------------------------------------------------- |
+| {{SpecName('DOM WHATWG', '#dom-treewalker-whattoshow', 'TreeWalker.whatToShow')}}                                         | {{Spec2('DOM WHATWG')}}             | Pas de changement de {{SpecName('DOM2 Traversal_Range')}} |
+| {{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-TreeWalker-whatToShow', 'TreeWalker.whatToShow')}} | {{Spec2('DOM2 Traversal_Range')}} | Définition initiale.                                                  |
 
-<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('DOM WHATWG', '#dom-treewalker-whattoshow', 'TreeWalker.whatToShow')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Pas de changement de {{SpecName('DOM2 Traversal_Range')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-TreeWalker-whatToShow', 'TreeWalker.whatToShow')}}</td>
-   <td>{{Spec2('DOM2 Traversal_Range')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.TreeWalker.whatToShow")}}</p>
+{{Compat("api.TreeWalker.whatToShow")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>L'interface {{domxref("TreeWalker")}}.</li>
-</ul>
+- L'interface {{domxref("TreeWalker")}}.
diff --git a/files/fr/web/api/uievent/detail/index.md b/files/fr/web/api/uievent/detail/index.md
index 7c27a30f06..a38d45e3a0 100644
--- a/files/fr/web/api/uievent/detail/index.md
+++ b/files/fr/web/api/uievent/detail/index.md
@@ -8,38 +8,23 @@ tags:
   - Reference
 translation_of: Web/API/UIEvent/detail
 ---
-<p>{{APIRef("DOM Events")}}</p>
+{{APIRef("DOM Events")}}
 
-<p><strong><code>UIEvent.detail</code> </strong>est une propriété en lecture seule, qui, lorsqu'elle ne vaut pas zéro, donne le nombre de clics courant (ou suivant en fonction de l'événement).</p>
+**`UIEvent.detail` **est une propriété en lecture seule, qui, lorsqu'elle ne vaut pas zéro, donne le nombre de clics courant (ou suivant en fonction de l'événement).
 
-<p>Pour les événements {{event("click")}} ou {{event("dblclick")}}, <code>UIEvent.detail</code> donne le nombre de clics courant.</p>
+Pour les événements {{event("click")}} ou {{event("dblclick")}}, `UIEvent.detail` donne le nombre de clics courant.
 
-<p>Pour les événements {{event("mousedown")}} ou {{event("mouseup")}}, <code>UIEvent.detail</code> donne le nombre de clics courant <em>plus</em> un.</p>
+Pour les événements {{event("mousedown")}} ou {{event("mouseup")}}, `UIEvent.detail` donne le nombre de clics courant _plus_ un.
 
-<p>Pour tous les autres objets {{domxref("UIEvent")}}, <code>UIEvent.detail</code> vaut toujours zéro.</p>
+Pour tous les autres objets {{domxref("UIEvent")}}, `UIEvent.detail` vaut toujours zéro.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM3 Events','#widl-UIEvent-detail','UIEvent.detail')}}</td>
-   <td>{{Spec2('DOM3 Events')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Events','#Events-UIEvent-detail','UIEvent.detail')}}</td>
-   <td>{{Spec2('DOM2 Events')}}</td>
-   <td>Première définition.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                | Statut                           | Commentaires         |
+| -------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName('DOM3 Events','#widl-UIEvent-detail','UIEvent.detail')}}     | {{Spec2('DOM3 Events')}} |                      |
+| {{SpecName('DOM2 Events','#Events-UIEvent-detail','UIEvent.detail')}} | {{Spec2('DOM2 Events')}} | Première définition. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.UIEvent.detail")}}</p>
+{{Compat("api.UIEvent.detail")}}
diff --git a/files/fr/web/api/uievent/index.md b/files/fr/web/api/uievent/index.md
index 0bf32d28b4..2fad98cefd 100644
--- a/files/fr/web/api/uievent/index.md
+++ b/files/fr/web/api/uievent/index.md
@@ -11,99 +11,68 @@ tags:
   - UIEvent
 translation_of: Web/API/UIEvent
 ---
-<p>{{APIRef("DOM Events")}}</p>
-
-<p>L'interface <strong><code>UIEvent</code></strong> représente des évènements simples de l'interface utilisateur.</p>
-
-<p><code>UIEvent</code> dérive de {{domxref("Event")}}. Bien que la méthode {{domxref("UIEvent.initUIEvent()")}}  soit conservée pour la compatibilité ascendante, vous devez créer un objet <code>UIEvent</code> en utilisant le constructeur {{domxref("UIEvent.UIEvent", "UIEvent()")}}.</p>
-
-<p>Plusieurs interfaces descendent directement ou indirectement de celle-ci : {{domxref("MouseEvent")}}, {{domxref("FocusEvent")}}, {{domxref("KeyboardEvent")}}, {{domxref("WheelEvent")}}, {{domxref("InputEvent")}} et {{domxref("CompositionEvent")}}.</p>
-
-<h2 id="Constructeurs">Constructeurs</h2>
-
-<dl>
- <dt>{{domxref("UIEvent.UIEvent()", "UIEvent()")}}</dt>
- <dd>Crée un objet <code>UIEvent</code>.</dd>
-</dl>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<p><em>Cette interface hérite également des propriétés de son parent {{domxref("Event")}}.</em></p>
-
-<dl>
- <dt>{{domxref("UIEvent.cancelBubble")}} {{Non-standard_inline}} {{Deprecated_inline}}</dt>
- <dd>{{jsxref("Boolean")}} <em>(booléen)</em> indiquant si les conséquences de l'évènement ont été annulées ou non.</dd>
-</dl>
-
-<dl>
- <dt>{{domxref("UIEvent.detail")}}{{readonlyinline}}</dt>
- <dd>Retourne un <code>long</code> qui donne quelques détails sur l'évènement, dépendant du type d'évènement.</dd>
- <dt>{{domxref("UIEvent.isChar")}} {{obsolete_inline}} {{readonlyinline}}</dt>
- <dd>Retourne un {{jsxref("Boolean")}} indiquant si l'évènement a produit un caractère clé ou non.</dd>
- <dt>{{domxref("UIEvent.layerX")}} {{Non-standard_inline}} {{readonlyinline}}</dt>
- <dd>Retourne la coordonnée horizontale de l'évènement par rapport à la couche actuelle.</dd>
- <dt>{{domxref("UIEvent.layerY")}} {{Non-standard_inline}} {{readonlyinline}}</dt>
- <dd>Retourne la coordonnée verticale de l'évènement par rapport à la couche actuelle.</dd>
- <dt>{{domxref("UIEvent.pageX")}} {{Non-standard_inline}} {{readonlyinline}}</dt>
- <dd>Retourne la coordonnée horizontale de l'évènement par rapport à l'ensemble du document.</dd>
- <dt>{{domxref("UIEvent.pageY")}} {{Non-standard_inline}} {{readonlyinline}}</dt>
- <dd>Retourne la coordonnée verticale de l'évènement par rapport à l'ensemble du document.</dd>
- <dt>{{domxref("UIEvent.sourceCapabilities")}} {{non-standard_inline}} {{readonlyinline}}</dt>
- <dd>Retourne une instance de l'interface <code>InputDeviceCapabilities</code> qui fournit des informations sur le périphérique physique responsable de l'évènement.</dd>
- <dt>{{domxref("UIEvent.view")}}{{readonlyinline}}</dt>
- <dd>Retourne un {{domxref("WindowProxy")}} qui contient la vue de la génération de l'évènement.</dd>
- <dt>{{domxref("UIEvent.which")}} {{Non-standard_inline}} {{readonlyinline}}</dt>
- <dd>Retourne l'identifiant <code>keyCode</code> de la touche pressée, ou le code du caractère (<code>charCode</code>) pour une touche alphanumérique enfoncée.</dd>
-</dl>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<p><em>Cette interface hérite également des méthodes de son parent, {{domxref("Event")}}.</em></p>
-
-<dl>
- <dt>{{domxref("UIEvent.initUIEvent()")}} {{deprecated_inline}}</dt>
- <dd>Initialise un objet <code>UIEvent</code>. Si l'évènement a déjà été envoyé, cette méthode ne fait rien.</dd>
-</dl>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('InputDeviceCapabilities')}}</td>
-   <td>{{Spec2('InputDeviceCapabilities')}}</td>
-   <td>Ajoute la propriété <code>sourceCapabilities</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('UI Events')}}</td>
-   <td>{{Spec2('UI Events')}}</td>
-   <td>Extension de DOM3.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM3 Events', '#interface-UIEvent', 'UIEvent')}}</td>
-   <td>{{Spec2('DOM3 Events')}}</td>
-   <td>Ajoute le constructeur <code>UIEvent()</code>, déprécie la méthode <code>initUIEvent()</code> et change le type de <code>view</code> de <code>AbstractView</code> vers <code>WindowProxy</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Events', '#Events-UIEvent', 'UIEvent')}}</td>
-   <td>{{Spec2('DOM2 Events')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.UIEvent")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Learn/JavaScript/Building_blocks/Events">Introduction to events</a></li>
- <li>{{ domxref("Event") }}</li>
-</ul>
+{{APIRef("DOM Events")}}
+
+L'interface **`UIEvent`** représente des évènements simples de l'interface utilisateur.
+
+`UIEvent` dérive de {{domxref("Event")}}. Bien que la méthode {{domxref("UIEvent.initUIEvent()")}}  soit conservée pour la compatibilité ascendante, vous devez créer un objet `UIEvent` en utilisant le constructeur {{domxref("UIEvent.UIEvent", "UIEvent()")}}.
+
+Plusieurs interfaces descendent directement ou indirectement de celle-ci : {{domxref("MouseEvent")}}, {{domxref("FocusEvent")}}, {{domxref("KeyboardEvent")}}, {{domxref("WheelEvent")}}, {{domxref("InputEvent")}} et {{domxref("CompositionEvent")}}.
+
+## Constructeurs
+
+- {{domxref("UIEvent.UIEvent()", "UIEvent()")}}
+  - : Crée un objet `UIEvent`.
+
+## Propriétés
+
+_Cette interface hérite également des propriétés de son parent {{domxref("Event")}}._
+
+- {{domxref("UIEvent.cancelBubble")}} {{Non-standard_inline}} {{Deprecated_inline}}
+  - : {{jsxref("Boolean")}} _(booléen)_ indiquant si les conséquences de l'évènement ont été annulées ou non.
+
+<!---->
+
+- {{domxref("UIEvent.detail")}}{{readonlyinline}}
+  - : Retourne un `long` qui donne quelques détails sur l'évènement, dépendant du type d'évènement.
+- {{domxref("UIEvent.isChar")}} {{obsolete_inline}} {{readonlyinline}}
+  - : Retourne un {{jsxref("Boolean")}} indiquant si l'évènement a produit un caractère clé ou non.
+- {{domxref("UIEvent.layerX")}} {{Non-standard_inline}} {{readonlyinline}}
+  - : Retourne la coordonnée horizontale de l'évènement par rapport à la couche actuelle.
+- {{domxref("UIEvent.layerY")}} {{Non-standard_inline}} {{readonlyinline}}
+  - : Retourne la coordonnée verticale de l'évènement par rapport à la couche actuelle.
+- {{domxref("UIEvent.pageX")}} {{Non-standard_inline}} {{readonlyinline}}
+  - : Retourne la coordonnée horizontale de l'évènement par rapport à l'ensemble du document.
+- {{domxref("UIEvent.pageY")}} {{Non-standard_inline}} {{readonlyinline}}
+  - : Retourne la coordonnée verticale de l'évènement par rapport à l'ensemble du document.
+- {{domxref("UIEvent.sourceCapabilities")}} {{non-standard_inline}} {{readonlyinline}}
+  - : Retourne une instance de l'interface `InputDeviceCapabilities` qui fournit des informations sur le périphérique physique responsable de l'évènement.
+- {{domxref("UIEvent.view")}}{{readonlyinline}}
+  - : Retourne un {{domxref("WindowProxy")}} qui contient la vue de la génération de l'évènement.
+- {{domxref("UIEvent.which")}} {{Non-standard_inline}} {{readonlyinline}}
+  - : Retourne l'identifiant `keyCode` de la touche pressée, ou le code du caractère (`charCode`) pour une touche alphanumérique enfoncée.
+
+## Méthodes
+
+_Cette interface hérite également des méthodes de son parent, {{domxref("Event")}}._
+
+- {{domxref("UIEvent.initUIEvent()")}} {{deprecated_inline}}
+  - : Initialise un objet `UIEvent`. Si l'évènement a déjà été envoyé, cette méthode ne fait rien.
+
+## Spécifications
+
+| Spécification                                                                    | Statut                                           | Commentaire                                                                                                                               |
+| -------------------------------------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('InputDeviceCapabilities')}}                             | {{Spec2('InputDeviceCapabilities')}} | Ajoute la propriété `sourceCapabilities`.                                                                                                 |
+| {{SpecName('UI Events')}}                                                 | {{Spec2('UI Events')}}                     | Extension de DOM3.                                                                                                                        |
+| {{SpecName('DOM3 Events', '#interface-UIEvent', 'UIEvent')}} | {{Spec2('DOM3 Events')}}                 | Ajoute le constructeur `UIEvent()`, déprécie la méthode `initUIEvent()` et change le type de `view` de `AbstractView` vers `WindowProxy`. |
+| {{SpecName('DOM2 Events', '#Events-UIEvent', 'UIEvent')}}     | {{Spec2('DOM2 Events')}}                 | Définition initiale.                                                                                                                      |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.UIEvent")}}
+
+## Voir aussi
+
+- [Introduction to events](/fr/docs/Learn/JavaScript/Building_blocks/Events)
+- {{ domxref("Event") }}
diff --git a/files/fr/web/api/uievent/layerx/index.md b/files/fr/web/api/uievent/layerx/index.md
index d48034f4c7..8b00e7be60 100644
--- a/files/fr/web/api/uievent/layerx/index.md
+++ b/files/fr/web/api/uievent/layerx/index.md
@@ -10,27 +10,26 @@ tags:
   - lecture seule
 translation_of: Web/API/UIEvent/layerX
 ---
-<p>{{APIRef("DOM Events")}} {{Non-standard_header}}</p>
+{{APIRef("DOM Events")}} {{Non-standard_header}}
 
-<p>La propriété en lecture seule <code><strong>UIEvent.layerX</strong></code> retourne la coordonnée horizontale de l'évènement relativement à la couche en cours.</p>
+La propriété en lecture seule **`UIEvent.layerX`** retourne la coordonnée horizontale de l'évènement relativement à la couche en cours.
 
-<p>Cette propriété prend en compte le défilement de la page, et retourne une valeur relative à l'ensemble du document, à moins que l'évènement ne se soit produit à l'intérieur d'un élément positionné, auquel cas la valeur retournée est relative au coin supérieur gauche de l'élément positionné.</p>
+Cette propriété prend en compte le défilement de la page, et retourne une valeur relative à l'ensemble du document, à moins que l'évènement ne se soit produit à l'intérieur d'un élément positionné, auquel cas la valeur retournée est relative au coin supérieur gauche de l'élément positionné.
 
-<h2 id="Syntax"><strong>Syntaxe</strong></h2>
+## **Syntaxe**
 
-<pre>var <em>posx</em> = <em>event</em>.layerX</pre>
+    var posx = event.layerX
 
-<ul>
- <li><em><code>posx</code></em> est une valeur entière en pixels pour la coordonnée x du pointeur de la souris, lorsque l'évènement souris est déclenché.</li>
-</ul>
+- *`posx`* est une valeur entière en pixels pour la coordonnée x du pointeur de la souris, lorsque l'évènement souris est déclenché.
 
-<h2 id="Syntax"><strong>Exemples</strong></h2>
+## **Exemples**
 
-<pre class="brush: html">&lt;html&gt;
-&lt;head&gt;
-&lt;title&gt;Exemple pageX\pageY &amp; layerX\layerY&lt;/title&gt;
+```html
+<html>
+<head>
+<title>Exemple pageX\pageY & layerX\layerY</title>
 
-&lt;script type="text/javascript"&gt;
+<script type="text/javascript">
 
 function montrerCoords(evt){
   var form = document.forms.form_coords;
@@ -41,9 +40,9 @@ function montrerCoords(evt){
   form.layerXCoords.value = evt.layerX;
   form.layerYCoords.value = evt.layerY;
 }
-&lt;/script&gt;
+</script>
 
-&lt;style type="text/css"&gt;
+<style type="text/css">
 
  #d1 {
   border: solid blue 1px;
@@ -69,44 +68,44 @@ function montrerCoords(evt){
   padding: 10px;
  }
 
-&lt;/style&gt;
-&lt;/head&gt;
+</style>
+</head>
 
-&lt;body onmousedown="montrerCoords(event)"&gt;
+<body onmousedown="montrerCoords(event)">
 
-&lt;p&gt;Pour afficher les coordonnées de la souris, veuillez cliquer quelque part sur la page.&lt;/p&gt;
+<p>Pour afficher les coordonnées de la souris, veuillez cliquer quelque part sur la page.</p>
 
-&lt;div id="d1"&gt;
-&lt;span&gt;Cette div n'est pas positionnée : cliquer dedans renverra des valeurs layerX/layerY identiques à celles de pageX/PageY.&lt;/span&gt;
-&lt;/div&gt;
+<div id="d1">
+<span>Cette div n'est pas positionnée : cliquer dedans renverra des valeurs layerX/layerY identiques à celles de pageX/PageY.</span>
+</div>
 
-&lt;div id="d2"&gt;
+<div id="d2">
 
-&lt;span&gt;Cette div est positionnée : cliquer dedans renverra des valeurs layerX/layerY
-relatives à son coin supérieur. Notez que les valeurs de pageX\pageY sont toujours relatives au document, ce qui inclue le défilement dans la page.&lt;/span&gt;
+<span>Cette div est positionnée : cliquer dedans renverra des valeurs layerX/layerY
+relatives à son coin supérieur. Notez que les valeurs de pageX\pageY sont toujours relatives au document, ce qui inclue le défilement dans la page.</span>
 
-&lt;span&gt;Un peu de défilement ! C'est un div positionné : le clic renverra des valeurs layerX/layerY relative à son coin supérieur gauche. Notez que les valeurs de pageX\pageY sont toujours relatives au document, ce qui inclue le défilement dans la page.&lt;/span&gt;
+<span>Un peu de défilement ! C'est un div positionné : le clic renverra des valeurs layerX/layerY relative à son coin supérieur gauche. Notez que les valeurs de pageX\pageY sont toujours relatives au document, ce qui inclue le défilement dans la page.</span>
 
-&lt;/div&gt;
+</div>
 
-&lt;div id="d3"&gt;
-&lt;form name="form_coords" id="form1"&gt;
- Id de l'élément parent : &lt;input type="text" name="parentId" size="7" /&gt;&lt;br /&gt;
- pageX:&lt;input type="text" name="pageXCoords" size="7" /&gt;
- pageY:&lt;input type="text" name="pageYCoords" size="7" /&gt;&lt;br /&gt;
- layerX:&lt;input type="text" name="layerXCoords" size="7" /&gt;
- layerY:&lt;input type="text" name="layerYCoords" size="7" /&gt;
-&lt;/form&gt;
-&lt;/div&gt;
+<div id="d3">
+<form name="form_coords" id="form1">
+ Id de l'élément parent : <input type="text" name="parentId" size="7" /><br />
+ pageX:<input type="text" name="pageXCoords" size="7" />
+ pageY:<input type="text" name="pageYCoords" size="7" /><br />
+ layerX:<input type="text" name="layerXCoords" size="7" />
+ layerY:<input type="text" name="layerYCoords" size="7" />
+</form>
+</div>
 
-&lt;/body&gt;
-&lt;/html&gt;
-</pre>
+</body>
+</html>
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p><em>Cette propriété ne fait partie d'aucune spécification.</em></p>
+_Cette propriété ne fait partie d'aucune spécification._
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.UIEvent.layerX")}}</p>
+{{Compat("api.UIEvent.layerX")}}
diff --git a/files/fr/web/api/url/createobjecturl/index.md b/files/fr/web/api/url/createobjecturl/index.md
index faca6b81b9..25ec39cb51 100644
--- a/files/fr/web/api/url/createobjecturl/index.md
+++ b/files/fr/web/api/url/createobjecturl/index.md
@@ -3,89 +3,86 @@ title: URL.createObjectURL
 slug: Web/API/URL/createObjectURL
 translation_of: Web/API/URL/createObjectURL
 ---
+{{APIRef("URL")}}
+La méthode statique **URL.createObjectURL()** crée une chaîne contenant une URL représentant l’objet passé en paramètre. La durée de vie de l’URL est liée au {{domxref("document")}} de la fenêtre depuis laquelle elle a été créée. La nouvelle URL d’objet représente l’objet {{domxref("File")}} ou {{domxref("Blob")}} spécifié.
 
-<p>{{APIRef("URL")}}<br>
- La méthode statique <strong>URL.createObjectURL()</strong> crée une chaîne contenant une URL représentant l’objet passé en paramètre. La durée de vie de l’URL est liée au {{domxref("document")}} de la fenêtre depuis laquelle elle a été créée. La nouvelle URL d’objet représente l’objet {{domxref("File")}} ou {{domxref("Blob")}} spécifié.</p>
+Pour libérer une URL d’objet, il faut appeler {{domxref("URL.revokeObjectURL", "revokeObjectURL()")}}
 
-<p>Pour libérer une URL d’objet, il faut appeler {{domxref("URL.revokeObjectURL", "revokeObjectURL()")}}</p>
+{{AvailableInWorkers}}
 
-<p>{{AvailableInWorkers}}</p>
+> **Note :** Cette fonctionnalité n'est pas disponible dans les [Service Workers](/fr/docs/Web/API/ServiceWorker) à cause de possible fuite mémoire.
 
-<div class="note">
-<p><strong>Note :</strong> Cette fonctionnalité n'est pas disponible dans les <a href="/fr/docs/Web/API/ServiceWorker">Service Workers</a> à cause de possible fuite mémoire.</p>
-</div>
+## Syntaxe
 
-<h2 id="Syntax">Syntaxe</h2>
+    objectURL = URL.createObjectURL(object);
 
-<pre class="syntaxbox"><em>objectURL</em> = URL.createObjectURL(<em>object</em>);
-</pre>
+### Paramètres
 
-<h3 id="Paramètres">Paramètres</h3>
+- `object`
+  - : Un objet {{domxref("File")}}, {{domxref("Blob")}} ou {{domxref("MediaSource")}} pour lequel créer une URL d’objet.
 
-<dl>
- <dt><code>object</code></dt>
- <dd>Un objet {{domxref("File")}}, {{domxref("Blob")}} ou {{domxref("MediaSource")}} pour lequel créer une URL d’objet.</dd>
-</dl>
+### Valeur de retour
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+Une {{domxref("DOMString")}} contenant une URL d’objet, pouvant être utilisée comme une référence vers l’objet source `object` spécifié.
 
-<p>Une {{domxref("DOMString")}} contenant une URL d’objet, pouvant être utilisée comme une référence vers l’objet source <code>object</code> spécifié.</p>
+## Exemple
 
-<h2 id="Example">Exemple</h2>
+Voir [Utilisation de l’objet URLs pour afficher des images](/fr/docs/Web/API/File/Using_files_from_web_applications#Exemple_Utilisation_de_l'objet_URLs_pour_afficher_des_images).
 
-<p>Voir <a href="/fr/docs/Web/API/File/Using_files_from_web_applications#Exemple_Utilisation_de_l'objet_URLs_pour_afficher_des_images">Utilisation de l’objet URLs pour afficher des images</a>.</p>
+## Notes d’utilisation
 
-<h2 id="Notes">Notes d’utilisation</h2>
+### Gestion de la mémoire
 
-<h3 id="Gestion_de_la_mémoire">Gestion de la mémoire</h3>
+À chaque fois que vous appelez `createObjectURL()`, une nouvelle URL d’objet est créée, même si vous en avez déjà créée une pour le même objet. Chacune d’elles doit être libérée en appelant {{domxref("URL.revokeObjectURL()")}} lorsque vous n’en avez plus besoin.
 
-<p>À chaque fois que vous appelez <code>createObjectURL()</code>, une nouvelle URL d’objet est créée, même si vous en avez déjà créée une pour le même objet. Chacune d’elles doit être libérée en appelant {{domxref("URL.revokeObjectURL()")}} lorsque vous n’en avez plus besoin.</p>
+Les navigateurs libèrent automatiquement les URL d’objet lorsque le document est déchargé (_unload_) ; cependant, pour une performance et une utilisation de la mémoire optimales, si vous avez la possiblité de les libérer explictement sans danger, vous devriez le faire.
 
-<p>Les navigateurs libèrent automatiquement les URL d’objet lorsque le document est déchargé (<em>unload</em>) ; cependant, pour une performance et une utilisation de la mémoire optimales, si vous avez la possiblité de les libérer explictement sans danger, vous devriez le faire.</p>
+### Utiliser les URL d’objet pour les flux de média
 
-<h3 id="Utiliser_les_URL_d’objet_pour_les_flux_de_média">Utiliser les URL d’objet pour les flux de média</h3>
+Dans d’anciennes versions de la spécification de Media Source, attacher un flux à un élément {{HTMLElement("video")}} requiérait de créer une URL d’objet pour le {{domxref("MediaStream")}}. Cela n’est plus nécessaire, et les navigateurs cessent progressivement de supporter cette pratique.
 
-<p>Dans d’anciennes versions de la spécification de Media Source, attacher un flux à un élément {{HTMLElement("video")}} requiérait de créer une URL d’objet pour le {{domxref("MediaStream")}}. Cela n’est plus nécessaire, et les navigateurs cessent progressivement de supporter cette pratique.</p>
+> **Attention :** si vous avez toujours du code qui repose sur {{domxref("URL.createObjectURL")}} pour attacher des flux à des éléments média, vous devez mettre à jour votre code pour attacher simplement {{domxref("HTMLMediaElement.srcObject", "srcObject")}} directement au `MediaStream`.
 
-<div class="warning">
-<p><strong>Attention :</strong> si vous avez toujours du code qui repose sur {{domxref("URL.createObjectURL")}} pour attacher des flux à des éléments média, vous devez mettre à jour votre code pour attacher simplement {{domxref("HTMLMediaElement.srcObject", "srcObject")}} directement au <code>MediaStream</code>.</p>
-</div>
-
-<h2 id="Browser_Compatibility">Spécifications</h2>
+## Spécifications
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName("File API", "#dfn-createObjectURL", "createObjectURL()")}}</td>
-   <td>{{Spec2("File API")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("Media Source Extensions", "#dom-url-createobjecturl", "URL")}}</td>
-   <td>{{Spec2("Media Source Extensions")}}</td>
-   <td>
-    <p>Extension MediaSource.<br>
-     Les anciennes versions de cette spécification utilisaient <code>createObjectURL()</code> pour les objets {{domxref("MediaStream")}} ; ce n’est plus supporté.</p>
-   </td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="col">Spécification</th>
+      <th scope="col">Statut</th>
+      <th scope="col">Commentaire</th>
+    </tr>
+    <tr>
+      <td>
+        {{SpecName("File API", "#dfn-createObjectURL", "createObjectURL()")}}
+      </td>
+      <td>{{Spec2("File API")}}</td>
+      <td>Définition initiale.</td>
+    </tr>
+    <tr>
+      <td>
+        {{SpecName("Media Source Extensions", "#dom-url-createobjecturl", "URL")}}
+      </td>
+      <td>{{Spec2("Media Source Extensions")}}</td>
+      <td>
+        <p>
+          Extension MediaSource.<br />Les anciennes versions de cette
+          spécification utilisaient <code>createObjectURL()</code> pour les
+          objets {{domxref("MediaStream")}} ; ce n’est plus supporté.
+        </p>
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.URL.createObjectURL")}}</p>
+{{Compat("api.URL.createObjectURL")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<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/Using_files_from_web_applications#Exemple_Utilisation_de_l'objet_URLs_pour_afficher_des_images">Utilisation de l’objet URLs pour afficher des images</a></li>
- <li>{{domxref("URL.revokeObjectURL()")}}</li>
- <li>{{domxref("HTMLMediaElement.srcObject")}}</li>
- <li>{{domxref("FileReader.readAsDataURL()")}}</li>
-</ul>
+- [Utiliser des fichiers à partir d’applications web](/fr/docs/Web/API/File/Using_files_from_web_applications)
+- [Utilisation de l’objet URLs pour afficher des images](/fr/docs/Web/API/File/Using_files_from_web_applications#Exemple_Utilisation_de_l'objet_URLs_pour_afficher_des_images)
+- {{domxref("URL.revokeObjectURL()")}}
+- {{domxref("HTMLMediaElement.srcObject")}}
+- {{domxref("FileReader.readAsDataURL()")}}
diff --git a/files/fr/web/api/url/hash/index.md b/files/fr/web/api/url/hash/index.md
index f89d838eb1..9858af61aa 100644
--- a/files/fr/web/api/url/hash/index.md
+++ b/files/fr/web/api/url/hash/index.md
@@ -9,54 +9,40 @@ tags:
   - URL
 translation_of: Web/API/URL/hash
 ---
-<div>{{ APIRef("URL API") }}</div>
+{{ APIRef("URL API") }}
 
-<p>La propriété <strong><code>hash</code></strong> de l'interface {{domxref("URL")}} retourne un {{domxref("USVString")}} contenant le caractère <code>'#'</code> suivi par l'identificateur de fragment de URL.</p>
+La propriété **`hash`** de l'interface {{domxref("URL")}} retourne un {{domxref("USVString")}} contenant le caractère `'#'` suivi par l'identificateur de fragment de URL.
 
-<p>Le fragment n'est pas <a href="/en-US/docs/Glossary/percent-encoding">décodé en pourcent</a>. Si l'URL ne contient pas d'identificateur de fragment, la valeur de cette propriété est une chaîne de caractère vide — <code>""</code>.</p>
+Le fragment n'est pas [décodé en pourcent](/en-US/docs/Glossary/percent-encoding). Si l'URL ne contient pas d'identificateur de fragment, la valeur de cette propriété est une chaîne de caractère vide — `""`.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>string</em> = <em>object</em>.hash;
-<em>object</em>.hash = <em>string</em>;
-</pre>
+    string = object.hash;
+    object.hash = string;
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>Un {{domxref("USVString")}}.</p>
+Un {{domxref("USVString")}}.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: html">var url = new URL('https://developer.mozilla.org/en-US/docs/Web/API/URL/href#Examples');
-url.hash // Returns '#Examples'</pre>
+```html
+var url = new URL('https://developer.mozilla.org/en-US/docs/Web/API/URL/href#Examples');
+url.hash // Returns '#Examples'
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('URL', '#dom-url-hash', 'URL.hash')}}</td>
-   <td>{{Spec2('URL')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                    | Statut               | Commentaire         |
+| ---------------------------------------------------------------- | -------------------- | ------------------- |
+| {{SpecName('URL', '#dom-url-hash', 'URL.hash')}} | {{Spec2('URL')}} | Définition initiale |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
+{{Compat("api.URL.hash")}}
 
+## A voir également
 
-<p>{{Compat("api.URL.hash")}}</p>
-
-<h2 id="A_voir_également">A voir également</h2>
-
-<ul>
- <li>L'interface {{domxref("URL")}} dont il est contenu.</li>
-</ul>
+- L'interface {{domxref("URL")}} dont il est contenu.
diff --git a/files/fr/web/api/url/index.md b/files/fr/web/api/url/index.md
index 917fa44e1a..6113b65cc9 100644
--- a/files/fr/web/api/url/index.md
+++ b/files/fr/web/api/url/index.md
@@ -7,146 +7,131 @@ tags:
   - URL
 translation_of: Web/API/URL
 ---
-<div>{{ApiRef("URL API")}}</div>
+{{ApiRef("URL API")}}
 
-<p>L'interface <strong><code>URL</code></strong><strong> </strong>représente un objet qui fournit des méthodes statiques utilisées pour créer des URL d'objet.</p>
+L'interface **`URL`\*\*** \*\*représente un objet qui fournit des méthodes statiques utilisées pour créer des URL d'objet.
 
-<p>Lors de l'utilisation d'un agent utilisateur dans lequel aucun constructeur n'a encore été implémenté, il est possible d'accéder à un objet en utilisant les propriétés {{domxref("Window.URL")}} (préfixées sur un navigateur basé sur Webkit tel que <code>Window.webkitURL</code>).</p>
+Lors de l'utilisation d'un agent utilisateur dans lequel aucun constructeur n'a encore été implémenté, il est possible d'accéder à un objet en utilisant les propriétés {{domxref("Window.URL")}} (préfixées sur un navigateur basé sur Webkit tel que `Window.webkitURL`).
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Utilisation">Utilisation</h2>
+## Utilisation
 
-<p>Le constructeur prend un paramètre url et un paramètre de base facultatif à utiliser comme base si le paramètre url est une URL relative :</p>
+Le constructeur prend un paramètre url et un paramètre de base facultatif à utiliser comme base si le paramètre url est une URL relative :
 
-<pre class="brush: js">const url = new URL('../cats', 'http://www.example.com/dogs');
+```js
+const url = new URL('../cats', 'http://www.example.com/dogs');
 console.log(url.hostname); // "www.example.com"
-console.log(url.pathname); // "/cats"</pre>
+console.log(url.pathname); // "/cats"
+```
 
-<p>Les propriétés de l'URL peuvent être définies pour construire l'URL :</p>
+Les propriétés de l'URL peuvent être définies pour construire l'URL :
 
-<pre class="brush: js">url.hash = 'tabby';
-console.log(url.href); // "http://www.example.com/cats#tabby"</pre>
+```js
+url.hash = 'tabby';
+console.log(url.href); // "http://www.example.com/cats#tabby"
+```
 
-<p>Les URL seront encodées selon la norme RFC 3986:</p>
+Les URL seront encodées selon la norme RFC 3986:
 
-<pre class="brush: js">url.pathname = 'démonstration.html';
-console.log(url.href); // "http://www.example.com/d%C3%A9monstration.html"</pre>
+```js
+url.pathname = 'démonstration.html';
+console.log(url.href); // "http://www.example.com/d%C3%A9monstration.html"
+```
 
-<p>L'interface {{domxref("URLSearchParams")}}  peut être utilisée pour construire et manipuler la chaîne de requête de l'URL.</p>
+L'interface {{domxref("URLSearchParams")}}  peut être utilisée pour construire et manipuler la chaîne de requête de l'URL.
 
-<p>Pour obtenir les paramètres de recherche à partir de l'URL de la fenêtre en cours :</p>
+Pour obtenir les paramètres de recherche à partir de l'URL de la fenêtre en cours :
 
-<pre class="brush: js">// https://some.site/?id=123
+```js
+// https://some.site/?id=123
 var parsedUrl = new URL(window.location.href);
-console.log(parsedUrl.searchParams.get("id")); // 123</pre>
-
-<p>La méthode <code>stringifier</code> de l' <code>URL</code> est la propriété <code>href</code> , ainsi le constructeur peut être utilisé pour normaliser et encoder directement une URL :</p>
-
-<pre class="brush: js">const response = await fetch(new URL('http://www.example.com/démonstration.html'));</pre>
-
-<h2 id="Constructeur">Constructeur</h2>
-
-<dl>
- <dt>{{domxref("URL.URL", "URL()")}} {{experimental_inline}}</dt>
- <dd>Crée et retourne un objet <code>URL</code>  composé des paramètres donnés.</dd>
-</dl>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<dl>
- <dt>{{domxref("URL.hash")}}</dt>
- <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> contenant un <code>'#'</code> suivi de l'identifiant du fragment de l'URL.</dd>
- <dt>{{domxref("URL.host")}}</dt>
- <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> contenant l'hôte, c'est-à-dire le <em>hostname (nom d'hôte)</em>, <code>':'</code>et le <em>port</em> de l'URL.</dd>
- <dt>{{domxref("URL.hostname")}}</dt>
- <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> contenant le domaine de l'URL.</dd>
- <dt>{{domxref("URL.href")}}</dt>
- <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> contenant l'URL entière.</dd>
-</dl>
-
-<dl>
- <dt>{{domxref("URL.origin")}} {{readonlyInline}}</dt>
- <dd>Retourne une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> contenant l'origine de l'URL, c'est son schéma, son domaine et son port .</dd>
-</dl>
-
-<dl>
- <dt>{{domxref("URL.password")}}</dt>
- <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> contenant le mot de passe spécifié avant le nom du domaine.</dd>
-</dl>
-
-<dl>
- <dt>{{domxref("URL.pathname")}}</dt>
- <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> contenant une barre oblique initiale <code>'/'</code>suivie du chemin de l'URL.</dd>
-</dl>
-
-<dl>
- <dt>{{domxref("URL.port")}}</dt>
- <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> contenant le numéro de port de l'URL.</dd>
-</dl>
-
-<dl>
- <dt>{{domxref("URL.protocol")}}</dt>
- <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> contenant le schéma du protocole de l'URL, y compris le final <code>':'</code>.</dd>
- <dt>{{domxref("URL.search")}}</dt>
- <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> contenant un <code>'?'</code> suivi par les paramètres de l'URL.</dd>
- <dt>{{domxref("URL.searchParams")}}</dt>
- <dd>Retourne un objet {{domxref("URLSearchParams")}}  permettant d'accéder aux arguments de requête GET contenus dans l'URL.</dd>
- <dt>{{domxref("URL.username")}}</dt>
- <dd>Est une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> contenant le nom d'utilisateur spécifié avant le nom de domaine.</dd>
-</dl>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<p><em>L'interface <code>URL</code> </em> implémente les méthodes définies dans <em>{{domxref("URLUtils")}}.</em></p>
-
-<dl>
- <dt>{{domxref("URLUtils.toString()")}}</dt>
- <dd>Retourne une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> contenant l'URL entière. C'est un synonyme de {{domxref("URLUtils.href")}}, mais il ne peut pas être utilisé pour modifier la valeur.</dd>
- <dt>{{domxref("URL.toJSON()")}}</dt>
- <dd>Retourne une {{domxref("DOMString")}}   <em>(chaîne de caractères)</em> contenant l'URL entière. Il retourne la même chaîne que la propriété <code>href</code> .</dd>
-</dl>
-
-<h2 id="Méthodes_statiques">Méthodes statiques</h2>
-
-<dl>
- <dt>{{ domxref("URL.createObjectURL()") }}</dt>
- <dd>Retourne une {{domxref("DOMString")}} <em>(chaîne de caractères)</em> contenant un "blob URL" unique ; c'est une URL avec <code>blob :</code> son schéma suivi d'une chaîne opaque identifiant de manière unique l'objet dans le navigateur.</dd>
- <dt>{{ domxref("URL.revokeObjectURL()") }}</dt>
- <dd>Révoque un objet URL précédemment créé avec {{domxref ("URL.createObjectURL ()")}}.</dd>
-</dl>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('File API', '#creating-revoking', 'URL')}}</td>
-   <td>{{Spec2('File API')}}</td>
-   <td>Ajoute les méthodes statiques <code>URL.createObjectURL()</code> et <code>URL.revokeObjectURL</code><code>()</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('URL', '#api', 'API')}}</td>
-   <td>{{Spec2('URL')}}</td>
-   <td>Définition initiale (implémente <code>URLUtils</code>).</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.URL")}}</p>
-
-<h2 id="See_also">Voir aussi</h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/API/URL_API">URL API</a></li>
-  <li><a href="/fr/docs/Learn/Common_questions/What_is_a_URL">Qu'est-ce qu'un URL ?</a></li>
-  <li>Propriété permettant d'obtenir un objet <code>URL</code> : {{domxref("Window.URL")}}.</li>
-  <li>{{domxref("URLSearchParams")}}.</li>
-</ul>
+console.log(parsedUrl.searchParams.get("id")); // 123
+```
+
+La méthode `stringifier` de l' `URL` est la propriété `href` , ainsi le constructeur peut être utilisé pour normaliser et encoder directement une URL :
+
+```js
+const response = await fetch(new URL('http://www.example.com/démonstration.html'));
+```
+
+## Constructeur
+
+- {{domxref("URL.URL", "URL()")}} {{experimental_inline}}
+  - : Crée et retourne un objet `URL`  composé des paramètres donnés.
+
+## Propriétés
+
+- {{domxref("URL.hash")}}
+  - : Est une {{domxref("DOMString")}} _(chaîne de caractères)_ contenant un `'#'` suivi de l'identifiant du fragment de l'URL.
+- {{domxref("URL.host")}}
+  - : Est une {{domxref("DOMString")}} _(chaîne de caractères)_ contenant l'hôte, c'est-à-dire le _hostname (nom d'hôte)_, `':'`et le _port_ de l'URL.
+- {{domxref("URL.hostname")}}
+  - : Est une {{domxref("DOMString")}} _(chaîne de caractères)_ contenant le domaine de l'URL.
+- {{domxref("URL.href")}}
+  - : Est une {{domxref("DOMString")}} _(chaîne de caractères)_ contenant l'URL entière.
+
+<!---->
+
+- {{domxref("URL.origin")}} {{readonlyInline}}
+  - : Retourne une {{domxref("DOMString")}} _(chaîne de caractères)_ contenant l'origine de l'URL, c'est son schéma, son domaine et son port .
+
+<!---->
+
+- {{domxref("URL.password")}}
+  - : Est une {{domxref("DOMString")}} _(chaîne de caractères)_ contenant le mot de passe spécifié avant le nom du domaine.
+
+<!---->
+
+- {{domxref("URL.pathname")}}
+  - : Est une {{domxref("DOMString")}} _(chaîne de caractères)_ contenant une barre oblique initiale `'/'`suivie du chemin de l'URL.
+
+<!---->
+
+- {{domxref("URL.port")}}
+  - : Est une {{domxref("DOMString")}} _(chaîne de caractères)_ contenant le numéro de port de l'URL.
+
+<!---->
+
+- {{domxref("URL.protocol")}}
+  - : Est une {{domxref("DOMString")}} _(chaîne de caractères)_ contenant le schéma du protocole de l'URL, y compris le final `':'`.
+- {{domxref("URL.search")}}
+  - : Est une {{domxref("DOMString")}} _(chaîne de caractères)_ contenant un `'?'` suivi par les paramètres de l'URL.
+- {{domxref("URL.searchParams")}}
+  - : Retourne un objet {{domxref("URLSearchParams")}}  permettant d'accéder aux arguments de requête GET contenus dans l'URL.
+- {{domxref("URL.username")}}
+  - : Est une {{domxref("DOMString")}} _(chaîne de caractères)_ contenant le nom d'utilisateur spécifié avant le nom de domaine.
+
+## Méthodes
+
+*L'interface `URL` *implémente les méthodes définies dans _{{domxref("URLUtils")}}._
+
+- {{domxref("URLUtils.toString()")}}
+  - : Retourne une {{domxref("DOMString")}} _(chaîne de caractères)_ contenant l'URL entière. C'est un synonyme de {{domxref("URLUtils.href")}}, mais il ne peut pas être utilisé pour modifier la valeur.
+- {{domxref("URL.toJSON()")}}
+  - : Retourne une {{domxref("DOMString")}}   _(chaîne de caractères)_ contenant l'URL entière. Il retourne la même chaîne que la propriété `href` .
+
+## Méthodes statiques
+
+- {{ domxref("URL.createObjectURL()") }}
+  - : Retourne une {{domxref("DOMString")}} _(chaîne de caractères)_ contenant un "blob URL" unique ; c'est une URL avec `blob :` son schéma suivi d'une chaîne opaque identifiant de manière unique l'objet dans le navigateur.
+- {{ domxref("URL.revokeObjectURL()") }}
+  - : Révoque un objet URL précédemment créé avec {{domxref ("URL.createObjectURL ()")}}.
+
+## Spécifications
+
+| Spécification                                                            | Statut                       | Commentaire                                                                           |
+| ------------------------------------------------------------------------ | ---------------------------- | ------------------------------------------------------------------------------------- |
+| {{SpecName('File API', '#creating-revoking', 'URL')}} | {{Spec2('File API')}} | Ajoute les méthodes statiques `URL.createObjectURL()` et ` URL.revokeObjectURL``() `. |
+| {{SpecName('URL', '#api', 'API')}}                             | {{Spec2('URL')}}         | Définition initiale (implémente `URLUtils`).                                          |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.URL")}}
+
+## Voir aussi
+
+- [URL API](/fr/docs/Web/API/URL_API)
+- [Qu'est-ce qu'un URL ?](/fr/docs/Learn/Common_questions/What_is_a_URL)
+- Propriété permettant d'obtenir un objet `URL` : {{domxref("Window.URL")}}.
+- {{domxref("URLSearchParams")}}.
diff --git a/files/fr/web/api/url/protocol/index.md b/files/fr/web/api/url/protocol/index.md
index a67e867df9..2bc51d5bdc 100644
--- a/files/fr/web/api/url/protocol/index.md
+++ b/files/fr/web/api/url/protocol/index.md
@@ -9,53 +9,38 @@ tags:
   - protocole
 translation_of: Web/API/URL/protocol
 ---
-<div>{{ApiRef("URL API")}}</div>
+{{ApiRef("URL API")}}
 
-<p>La propriété <strong><code>protocol</code></strong> de l'interface {{domxref("URL")}} est une {{domxref("USVString")}} représentant le schéma protocolaire de URL, incluant <code>':'</code> à la fin.</p>
+La propriété **`protocol`** de l'interface {{domxref("URL")}} est une {{domxref("USVString")}} représentant le schéma protocolaire de URL, incluant `':'` à la fin.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>string</em> = <em>object</em>.protocol;
-<em>object</em>.protocol = <em>string</em>;
-</pre>
+    string = object.protocol;
+    object.protocol = string;
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>Un {{domxref("USVString")}}.</p>
+Un {{domxref("USVString")}}.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: js">var url = new URL('https://developer.mozilla.org/en-US/docs/Web/API/URL/protocol');
+```js
+var url = new URL('https://developer.mozilla.org/en-US/docs/Web/API/URL/protocol');
 var result = url.protocol; // Retourne:"https:"
-</pre>
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('URL', '#dom-url-protocol', 'protocol')}}</td>
-   <td>{{Spec2('URL')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                        | Statut               | Commentaire          |
+| -------------------------------------------------------------------- | -------------------- | -------------------- |
+| {{SpecName('URL', '#dom-url-protocol', 'protocol')}} | {{Spec2('URL')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
+{{Compat("api.URL.protocol")}}
 
+## A voir également
 
-<p>{{Compat("api.URL.protocol")}}</p>
-
-<h2 id="A_voir_également">A voir également</h2>
-
-<ul>
- <li>L'interface {{domxref("URL")}} dont il est contenu.</li>
-</ul>
+- L'interface {{domxref("URL")}} dont il est contenu.
diff --git a/files/fr/web/api/url/revokeobjecturl/index.md b/files/fr/web/api/url/revokeobjecturl/index.md
index 5785e39c30..e5cdf42011 100644
--- a/files/fr/web/api/url/revokeobjecturl/index.md
+++ b/files/fr/web/api/url/revokeobjecturl/index.md
@@ -3,60 +3,41 @@ title: URL.revokeObjectURL()
 slug: Web/API/URL/revokeObjectURL
 translation_of: Web/API/URL/revokeObjectURL
 ---
-<div>{{ApiRef("URL")}}</div>
+{{ApiRef("URL")}}
 
-<p>La méthode statique <strong><code>URL.revokeObjectURL()</code></strong> libère une URL d’objet existante précédemment créée par un appel à {{domxref("URL.createObjectURL()") }}. Appelez cette méthode quand vous n’utilisez plus une URL d’objet pour indiquer au navigateur qu’il ne doit plus garder de référence sur l’objet.</p>
+La méthode statique **`URL.revokeObjectURL()`** libère une URL d’objet existante précédemment créée par un appel à {{domxref("URL.createObjectURL()") }}. Appelez cette méthode quand vous n’utilisez plus une URL d’objet pour indiquer au navigateur qu’il ne doit plus garder de référence sur l’objet.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>window</em>.URL.revokeObjectURL(<em>objectURL</em>);
-</pre>
+    window.URL.revokeObjectURL(objectURL);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>objectURL </code></dt>
- <dd>Une {{domxref("DOMString")}} représentant une URL d’objet qui a été précédemment créée par un appel à {{domxref("URL.createObjectURL", "createObjectURL()") }}.</dd>
-</dl>
+- `objectURL`
+  - : Une {{domxref("DOMString")}} représentant une URL d’objet qui a été précédemment créée par un appel à {{domxref("URL.createObjectURL", "createObjectURL()") }}.
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+### Valeur de retour
 
-<p><code>undefined</code>.</p>
+`undefined`.
 
-<ul>
-</ul>
+## Exemple
 
-<h2 id="Exemple">Exemple</h2>
+Voir [Utilisation de l’objet URLs pour afficher des images](/fr/docs/Web/API/File/Using_files_from_web_applications#Exemple_Utilisation_de_l'objet_URLs_pour_afficher_des_images).
 
-<p>Voir <a href="/fr/docs/Web/API/File/Using_files_from_web_applications#Exemple_Utilisation_de_l'objet_URLs_pour_afficher_des_images">Utilisation de l’objet URLs pour afficher des images</a>.</p>
+## Spécification
 
-<h2 id="Spécification">Spécification</h2>
+| Spécification                                                                                | Statut                       | Commentaire         |
+| -------------------------------------------------------------------------------------------- | ---------------------------- | ------------------- |
+| {{SpecName('File API', '#dfn-revokeObjectURL', 'revokeObjectURL()')}} | {{Spec2('File API')}} | Définition initiale |
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('File API', '#dfn-revokeObjectURL', 'revokeObjectURL()')}}</td>
-   <td>{{Spec2('File API')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+## Compatibilité des navigateurs
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+{{Compat("api.URL.revokeObjectURL")}}
 
-<p>{{Compat("api.URL.revokeObjectURL")}}</p>
+## Voir aussi
 
-<h2 id="Voir_aussi">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/Using_files_from_web_applications#Exemple_Utilisation_de_l'objet_URLs_pour_afficher_des_images">Utilisation de l’objet URLs pour afficher des images</a></li>
- <li>{{domxref("URL.createObjectURL()") }}</li>
-</ul>
+- [Utiliser des fichiers à partir d’applications web](/fr/docs/Web/API/File/Using_files_from_web_applications)
+- [Utilisation de l’objet URLs pour afficher des images](/fr/docs/Web/API/File/Using_files_from_web_applications#Exemple_Utilisation_de_l'objet_URLs_pour_afficher_des_images)
+- {{domxref("URL.createObjectURL()") }}
diff --git a/files/fr/web/api/url/search/index.md b/files/fr/web/api/url/search/index.md
index eb0a49d3a4..87b1925270 100644
--- a/files/fr/web/api/url/search/index.md
+++ b/files/fr/web/api/url/search/index.md
@@ -9,53 +9,40 @@ tags:
   - URL
 translation_of: Web/API/URL/search
 ---
-<div>{{ApiRef("URL API")}}</div>
+{{ApiRef("URL API")}}
 
-<p>La propriété <strong><code>search</code></strong> de l'interface {{domxref("URL")}} est une chaine d'interrogation, aussi appellée une chaine de recherche, c'est un {{domxref("USVString")}} contenant le caractère <code>'?'</code> suivi des paramètres de l'URL.</p>
+La propriété **`search`** de l'interface {{domxref("URL")}} est une chaine d'interrogation, aussi appellée une chaine de recherche, c'est un {{domxref("USVString")}} contenant le caractère `'?'` suivi des paramètres de l'URL.
 
-<p>Les navigateurs récents fournissent la propriété {{domxref("URL.searchParams")}} qui permet d'analyser plus facilement les paramètres passés à la chaîne de recherche.</p>
+Les navigateurs récents fournissent la propriété {{domxref("URL.searchParams")}} qui permet d'analyser plus facilement les paramètres passés à la chaîne de recherche.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>chaineDeCaractere</em> = <em>objet</em>.search;
-<em>object</em>.search = <em>chaineDeCaractere</em>;
-</pre>
+    chaineDeCaractere = objet.search;
+    object.search = chaineDeCaractere;
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>Un {{domxref("USVString")}}.</p>
+Un {{domxref("USVString")}}.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: js">var url = new URL('https://developer.mozilla.org/en-US/docs/Web/API/URL/search?q=123');
+```js
+var url = new URL('https://developer.mozilla.org/en-US/docs/Web/API/URL/search?q=123');
 var queryString = url.search; // Retourne:"?q=123"
-</pre>
-
-<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">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('URL', '#dom-url-search', 'URL.search')}}</td>
-   <td>{{Spec2('URL')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.URL.search")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>L'interface {{domxref("URL")}} associée.</li>
-</ul>
+```
+
+## Spécifications
+
+| Spécification                                                        | État                 | Commentaire          |
+| -------------------------------------------------------------------- | -------------------- | -------------------- |
+| {{SpecName('URL', '#dom-url-search', 'URL.search')}} | {{Spec2('URL')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.URL.search")}}
+
+## Voir aussi
+
+- L'interface {{domxref("URL")}} associée.
diff --git a/files/fr/web/api/url/searchparams/index.md b/files/fr/web/api/url/searchparams/index.md
index 9fab62581f..66cc2a85bf 100644
--- a/files/fr/web/api/url/searchparams/index.md
+++ b/files/fr/web/api/url/searchparams/index.md
@@ -10,56 +10,35 @@ tags:
   - URLSearchParameters
 translation_of: Web/API/URL/searchParams
 ---
-<div>{{APIRef("URL API")}}</div>
+{{APIRef("URL API")}} La propriété en lecture seule **`searchParams`** de l'interface {{domxref("URL")}} retourneun objet {{domxref("URLSearchParams")}} permettant d'accéder aux arguments décodésde la requête GET contenu dans l'URL.
 
-<div> </div>
+{{AvailableInWorkers}}
 
-<div>La propriété en lecture seule <strong><code>searchParams</code></strong> de l'interface {{domxref("URL")}} retourne</div>
+## Syntaxe
 
-<div>un objet {{domxref("URLSearchParams")}} permettant d'accéder aux arguments décodés</div>
+    var urlSearchParams = URL.searchParams;
 
-<div>de la requête GET contenu dans l'URL.</div>
+### Value
 
-<div> </div>
+Un objet {{domxref("URLSearchParams")}}.
 
-<p>{{AvailableInWorkers}}</p>
+## Exemples
 
-<h2 id="Syntaxe">Syntaxe</h2>
+Si l'URL de votre page est `https://example.com/?nom=Jonathan%20Smith&age=18`
+vous pouvez extraire les paramètres 'nom' et 'age' en utilisant:
 
-<pre class="syntaxbox">var urlSearchParams = URL.searchParams;</pre>
-
-<h3 id="Value">Value</h3>
-
-<p>Un objet {{domxref("URLSearchParams")}}.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Si l'URL de votre page est <code>https://example.com/?nom=Jonathan%20Smith&amp;age=18</code><br>
- vous pouvez extraire les paramètres 'nom' et 'age' en utilisant:</p>
-
-<pre class="brush: js">let params = (new URL(document.location)).searchParams;
+```js
+let params = (new URL(document.location)).searchParams;
 let name = params.get('nom'); // la chaine de caractère "Jonathan Smith".
-let age = parseInt(params.get('age')); // le nombre 18</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('URL', '#dom-url-searchparams', 'searchParams')}}</td>
-   <td>{{Spec2('URL')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+let age = parseInt(params.get('age')); // le nombre 18
+```
 
-<h2 id="Compatibilités_des_navigateurs">Compatibilités des navigateurs</h2>
+## Spécifications
 
+| Spécification                                                                    | Statut               | Commentaire          |
+| -------------------------------------------------------------------------------- | -------------------- | -------------------- |
+| {{SpecName('URL', '#dom-url-searchparams', 'searchParams')}} | {{Spec2('URL')}} | Définition initiale. |
 
+## Compatibilités des navigateurs
 
-<p>{{Compat("api.URL.searchParams")}}</p>
+{{Compat("api.URL.searchParams")}}
diff --git a/files/fr/web/api/url/tojson/index.md b/files/fr/web/api/url/tojson/index.md
index 3b594c32cd..4c53981f11 100644
--- a/files/fr/web/api/url/tojson/index.md
+++ b/files/fr/web/api/url/tojson/index.md
@@ -9,49 +9,35 @@ tags:
   - toJSON()
 translation_of: Web/API/URL/toJSON
 ---
-<div>{{APIRef("URL API")}}</div>
+{{APIRef("URL API")}}
 
-<p>La méthode <strong><code>toJSON()</code></strong> de l'interface {{domxref("URL")}} retourne un {{domxref("USVString")}} contenant une version sérialisé de l'URL, même si dans la pratique, il semble avoir le même effet que {{domxref("URL.toString()")}}.</p>
+La méthode **`toJSON()`** de l'interface {{domxref("URL")}} retourne un {{domxref("USVString")}} contenant une version sérialisé de l'URL, même si dans la pratique, il semble avoir le même effet que {{domxref("URL.toString()")}}.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntax">Syntax</h2>
+## Syntax
 
-<pre class="syntaxbox">json = url.toJSON();</pre>
+    json = url.toJSON();
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<p>Aucun.</p>
+Aucun.
 
-<h3 id="Valeur_retournée">Valeur retournée</h3>
+### Valeur retournée
 
-<p>A {{domxref("USVString")}}.</p>
+A {{domxref("USVString")}}.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre>const url = new URL("https://developer.mozilla.org/en-US/docs/Web/API/URL/toString");
-url.toJSON()
-</pre>
+    const url = new URL("https://developer.mozilla.org/en-US/docs/Web/API/URL/toString");
+    url.toJSON()
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('URL', '#dom-url-tojson', 'toJSON()')}}</td>
-   <td>{{Spec2('URL')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                        | Statut               | Commentaire          |
+| -------------------------------------------------------------------- | -------------------- | -------------------- |
+| {{SpecName('URL', '#dom-url-tojson', 'toJSON()')}} | {{Spec2('URL')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-
-
-<p>{{Compat("api.URL.toJSON")}}</p>
+{{Compat("api.URL.toJSON")}}
diff --git a/files/fr/web/api/url/tostring/index.md b/files/fr/web/api/url/tostring/index.md
index f3733e2678..5f61fd9b31 100644
--- a/files/fr/web/api/url/tostring/index.md
+++ b/files/fr/web/api/url/tostring/index.md
@@ -9,53 +9,41 @@ tags:
   - toString()
 translation_of: Web/API/URL/toString
 ---
-<div>{{ApiRef("URL API")}}</div>
+{{ApiRef("URL API")}}
 
-<p>La méthode <strong><code>URL.toString()</code></strong> retourne un {{domxref("USVString")}} contenant tout l'URL. C'est en effet, une version de {{domxref("URL.href")}} en lecture seule.</p>
+La méthode **`URL.toString()`** retourne un {{domxref("USVString")}} contenant tout l'URL. C'est en effet, une version de {{domxref("URL.href")}} en lecture seule.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>string</em> = <em>url</em>.toString();</pre>
+    string = url.toString();
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<p>Aucun.</p>
+Aucun.
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Un {{domxref("USVString")}}.</p>
+Un {{domxref("USVString")}}.
 
-<h2 id="Examples">Examples</h2>
+## Examples
 
-<pre class="brush: js">const url = new URL("https://developer.mozilla.org/en-US/docs/Web/API/URL/toString");
+```js
+const url = new URL("https://developer.mozilla.org/en-US/docs/Web/API/URL/toString");
 url.toString() // doit retourner l'URL en tant que chaîne
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('URL', '#URL-stringification-behavior', 'stringifier')}}</td>
-   <td>{{Spec2('URL')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.URL.toString")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>L'interface {{domxref("URL")}} à laquelle elle appartient.</li>
-</ul>
+```
+
+## Spécifications
+
+| Spécification                                                                            | Statut               | Commentaire          |
+| ---------------------------------------------------------------------------------------- | -------------------- | -------------------- |
+| {{SpecName('URL', '#URL-stringification-behavior', 'stringifier')}} | {{Spec2('URL')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.URL.toString")}}
+
+## Voir aussi
+
+- L'interface {{domxref("URL")}} à laquelle elle appartient.
diff --git a/files/fr/web/api/url/url/index.md b/files/fr/web/api/url/url/index.md
index c0ff1cb049..cb9012b467 100644
--- a/files/fr/web/api/url/url/index.md
+++ b/files/fr/web/api/url/url/index.md
@@ -9,52 +9,37 @@ tags:
   - URL API
 translation_of: Web/API/URL/URL
 ---
-<p>{{APIRef("URL API")}}</p>
+{{APIRef("URL API")}}
 
-<p>Le constructeur <strong><code>URL()</code></strong> renvoie un nouvel objet {{domxref("URL")}} représentant l'URL définie par les paramètres.<br>
- <br>
- Si l'URL de base donnée ou l'URL résultante ne sont pas des URL valides, une {{domxref("DOMException")}} de type <code>SYNTAX_ERROR</code> est levée.</p>
+Le constructeur **`URL()`** renvoie un nouvel objet {{domxref("URL")}} représentant l'URL définie par les paramètres.
 
-<p>{{AvailableInWorkers}}</p>
+Si l'URL de base donnée ou l'URL résultante ne sont pas des URL valides, une {{domxref("DOMException")}} de type `SYNTAX_ERROR` est levée.
 
-<h2 id="Syntax">Syntax</h2>
+{{AvailableInWorkers}}
 
-<pre class="syntaxbox"><em>url</em> = new URL(<em>url</em>, [<em>base</em>])
-</pre>
+## Syntax
 
-<h3 id="Paramètres">Paramètres</h3>
+    url = new URL(url, [base])
 
-<dl>
- <dt><em>url</em></dt>
- <dd>Un {{domxref("USVString")}} représentant une URL absolue ou relative. Si l'URL est une URL relative, la base est obligatoire et sera utilisée comme URL de base. Si url est une URL absolue, une base donnée sera ignorée.</dd>
- <dt><em>base </em>{{optional_inline}}</dt>
- <dd>Un {{domxref("USVString")}} représentant l'URL de base à utiliser dans le cas où l'URL est une URL relative. Si non spécifié, il est par défaut à <code>''</code>.</dd>
-</dl>
+### Paramètres
 
-<div class="note">
-<p><strong>Note :</strong> Vous pouvez toujours utiliser un objet {{domxref ("URL")}} existant pour la base, qui se stringifie en attribut {{domxref ("DOMString.href", "href")}} de l'objet.</p>
-</div>
+- _url_
+  - : Un {{domxref("USVString")}} représentant une URL absolue ou relative. Si l'URL est une URL relative, la base est obligatoire et sera utilisée comme URL de base. Si url est une URL absolue, une base donnée sera ignorée.
+- _base_ {{optional_inline}}
+  - : Un {{domxref("USVString")}} représentant l'URL de base à utiliser dans le cas où l'URL est une URL relative. Si non spécifié, il est par défaut à `''`.
 
-<h3 id="Exceptions">Exceptions</h3>
+> **Note :** Vous pouvez toujours utiliser un objet {{domxref ("URL")}} existant pour la base, qui se stringifie en attribut {{domxref ("DOMString.href", "href")}} de l'objet.
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Exception</th>
-   <th scope="col">Explication</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>TypeError</code></td>
-   <td>url (dans le cas d'URL absolues) ou base + URL (dans le cas d'URL relatives) n'est pas une URL valide.</td>
-  </tr>
- </tbody>
-</table>
+### Exceptions
 
-<h2 id="Exemple">Exemple</h2>
+| Exception   | Explication                                                                                            |
+| ----------- | ------------------------------------------------------------------------------------------------------ |
+| `TypeError` | url (dans le cas d'URL absolues) ou base + URL (dans le cas d'URL relatives) n'est pas une URL valide. |
 
-<pre class="brush: js">var a = new URL("/", "https://developer.mozilla.org"); // Crée une URL pointant vers 'https://developer.mozilla.org/'
+## Exemple
+
+```js
+var a = new URL("/", "https://developer.mozilla.org"); // Crée une URL pointant vers 'https://developer.mozilla.org/'
 var b = new URL("https://developer.mozilla.org");      // Crée une URL pointant vers 'https://developer.mozilla.org/'
 var c = new URL('en-US/docs', b);                      // Crée une URL pointant vers 'https://developer.mozilla.org/en-US/docs'
 var d = new URL('/en-US/docs', b);                     // Crée une URL pointant vers 'https://developer.mozilla.org/en-US/docs'
@@ -67,31 +52,18 @@ var j = new URL('/en-US/docs');                        // Déclenche une excepti
 var k = new URL('http://www.example.com', 'https://developers.mozilla.com');
                                                        // Crée une URL pointant vers 'http://www.example.com/'
 var l = new URL('http://www.example.com', b);          // Crée une URL pointant vers 'http://www.example.com/'
-</pre>
-
-<h2 id="Specification">Spécification</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('URL', '#constructors', 'URL.URL()')}}</td>
-   <td>{{Spec2('URL')}}</td>
-   <td>initialisation.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.URL.URL")}}</p>
-
-<h2 id="À_voir_également">À voir également</h2>
-
-<ul>
- <li>L'interface à laquelle il appartient : {{domxref("URL")}}.</li>
-</ul>
+```
+
+## Spécification
+
+| Spécification                                                    | Statut               | Commentaire     |
+| ---------------------------------------------------------------- | -------------------- | --------------- |
+| {{SpecName('URL', '#constructors', 'URL.URL()')}} | {{Spec2('URL')}} | initialisation. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.URL.URL")}}
+
+## À voir également
+
+- L'interface à laquelle il appartient : {{domxref("URL")}}.
diff --git a/files/fr/web/api/urlsearchparams/entries/index.md b/files/fr/web/api/urlsearchparams/entries/index.md
index 4f10b1bb12..e7b812241b 100644
--- a/files/fr/web/api/urlsearchparams/entries/index.md
+++ b/files/fr/web/api/urlsearchparams/entries/index.md
@@ -3,65 +3,47 @@ title: URLSearchParams.entries()
 slug: Web/API/URLSearchParams/entries
 translation_of: Web/API/URLSearchParams/entries
 ---
-<p>{{APIRef("URL API")}}{{SeeCompatTable}}</p>
+{{APIRef("URL API")}}{{SeeCompatTable}}
 
-<p>La méthode <code><strong>URLSearchParams.entries()</strong></code> retourne  un itérateur( {{jsxref("Iteration_protocols",'iterator')}}) permettant de parcourir les paires de clé/valeur contenues dans cet objet. La clé et la valeur de chaque paire est un objet  {{domxref("USVString")}} .</p>
+La méthode **`URLSearchParams.entries()`** retourne  un itérateur( {{jsxref("Iteration_protocols",'iterator')}}) permettant de parcourir les paires de clé/valeur contenues dans cet objet. La clé et la valeur de chaque paire est un objet  {{domxref("USVString")}} .
 
-<div class="note">
-<p><strong>Note :</strong> This method is available in <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>.</p>
-</div>
+> **Note :** This method is available in [Web Workers](/en-US/docs/Web/API/Web_Workers_API).
 
-<h2 id="Syntax">Syntax</h2>
+## Syntax
 
-<pre class="syntaxbox">searchParams.entries();</pre>
+    searchParams.entries();
 
-<h3 id="Return_value">Return value</h3>
+### Return value
 
-<p>Returns an {{jsxref("Iteration_protocols","iterator")}}.</p>
+Returns an {{jsxref("Iteration_protocols","iterator")}}.
 
-<h2 id="Example">Example</h2>
+## Example
 
-<pre class="brush: js">// Create a test URLSearchParams object
-var searchParams = new URLSearchParams("key1=value1&amp;key2=value2");
+```js
+// Create a test URLSearchParams object
+var searchParams = new URLSearchParams("key1=value1&key2=value2");
 
 // Display the key/value pairs
 for(var pair of searchParams.entries()) {
    console.log(pair[0]+ ', '+ pair[1]);
 }
-</pre>
+```
 
-<p>The result is:</p>
+The result is:
 
-<pre>key1, value1
-key2, value2</pre>
+    key1, value1
+    key2, value2
 
-<h2 id="Specifications">Specifications</h2>
+## Specifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('URL', '#urlsearchparams','entries() (as iterator&lt;&gt;)')}}</td>
-   <td>{{Spec2('URL')}}</td>
-   <td>Initial definition</td>
-  </tr>
- </tbody>
-</table>
+| Specification                                                                                    | Status               | Comment            |
+| ------------------------------------------------------------------------------------------------ | -------------------- | ------------------ |
+| {{SpecName('URL', '#urlsearchparams','entries() (as iterator&lt;&gt;)')}} | {{Spec2('URL')}} | Initial definition |
 
-<h2 id="Browser_compatibility">Browser compatibility</h2>
+## Browser compatibility
 
-<div>
+{{Compat("api.URLSearchParams.entries")}}
 
+## See also
 
-<p>{{Compat("api.URLSearchParams.entries")}}</p>
-</div>
-
-<h2 id="See_also">See also</h2>
-
-<ul>
- <li>Other URL-related interfaces: {{domxref("URL")}}, {{domxref("URLUtils")}}.</li>
-</ul>
+- Other URL-related interfaces: {{domxref("URL")}}, {{domxref("URLUtils")}}.
diff --git a/files/fr/web/api/urlsearchparams/index.md b/files/fr/web/api/urlsearchparams/index.md
index 92747ec561..27c7e479d8 100644
--- a/files/fr/web/api/urlsearchparams/index.md
+++ b/files/fr/web/api/urlsearchparams/index.md
@@ -3,55 +3,52 @@ title: URLSearchParams
 slug: Web/API/URLSearchParams
 translation_of: Web/API/URLSearchParams
 ---
-<p>{{ApiRef("URL API")}}</p>
-
-<p>L’interface <strong><code>URLSearchParams</code></strong> définit des méthodes utilitaires pour travailler avec la <em>chaîne de requête</em> (les paramètres <code>GET</code>) d’une URL.</p>
-
-<p>Un objet implémentant <code>URLSearchParams</code> peut être directement utilisé dans une structure {{jsxref("Statements/for...of", "for...of")}}, au lieu de {{domxref('URLSearchParams.entries()', 'entries()')}} : <code>for (var p of mySearchParams)</code> ou son équivalent <code>for (var p of mySearchParams.entries())</code>.</p>
-
-<h2 id="Constructeur">Constructeur</h2>
-
-<dl>
- <dt>{{domxref("URLSearchParams.URLSearchParams", 'URLSearchParams()')}}</dt>
- <dd>Constructeur renvoyant un objet <code>URLSearchParams</code>.</dd>
-</dl>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<p><em>Cette interface n’hérite d’aucune propriété.</em></p>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<p><em>Cette interface n’hérite d’aucune méthode.</em></p>
-
-<dl>
- <dt>{{domxref("URLSearchParams.append()")}}</dt>
- <dd>Ajoute une paire clé / valeur spécifiée en tant que nouveau paramètre de recherche.</dd>
- <dt>{{domxref("URLSearchParams.delete()")}}</dt>
- <dd>Supprime le paramètre de recherche donné et sa valeur associée de la liste de tous les paramètres de recherche.</dd>
- <dt>{{domxref("URLSearchParams.entries()")}}</dt>
- <dd>Retourne un {{jsxref("Iteration_protocols","iterator")}} permettant de parcourir toutes les paires clé / valeur contenues dans cet objet.</dd>
- <dt>{{domxref("URLSearchParams.get()")}}</dt>
- <dd>Retourne la première valeur associée au paramètre de recherche donné.</dd>
- <dt>{{domxref("URLSearchParams.getAll()")}}</dt>
- <dd>Retourne toutes les valeurs associées au paramètre de recherche donné.</dd>
- <dt>{{domxref("URLSearchParams.has()")}}</dt>
- <dd>Retourne un {{jsxref("Boolean")}} indiquant si un tel paramètre de recherche existe.</dd>
- <dt>{{domxref("URLSearchParams.keys()")}}</dt>
- <dd>Retourne un {{jsxref("Iteration_protocols", "iterator")}} permettant de parcourir toutes les <strong>clés</strong> des paires clé / valeur contenues dans cet objet.</dd>
- <dt>{{domxref("URLSearchParams.set()")}}</dt>
- <dd>Définit la valeur associée à un paramètre de recherche donné à la valeur donnée. S’il y avait plusieurs valeurs, les autres sont supprimées.</dd>
- <dt>{{domxref("URLSearchParams.sort()")}}</dt>
- <dd>Trie toutes les paires clé / valeur, s’il y en a, par leurs clés.</dd>
- <dt>{{domxref("URLSearchParams.toString()")}}</dt>
- <dd>Retourne une chaîne contenant une chaîne de requête pouvant être utilisée dans une URL.</dd>
- <dt>{{domxref("URLSearchParams.values()")}}</dt>
- <dd>Retourne un {{jsxref("Iteration_protocols", "iterator")}} permettant de parcourir toutes les <strong>valeurs</strong> des paires clé / valeur contenues dans cet objet.</dd>
-</dl>
-
-<h2 id="Exemple">Exemple</h2>
-
-<pre class="brush: js">var paramsString = "q=URLUtils.searchParams&amp;topic=api";
+{{ApiRef("URL API")}}
+
+L’interface **`URLSearchParams`** définit des méthodes utilitaires pour travailler avec la _chaîne de requête_ (les paramètres `GET`) d’une URL.
+
+Un objet implémentant `URLSearchParams` peut être directement utilisé dans une structure {{jsxref("Statements/for...of", "for...of")}}, au lieu de {{domxref('URLSearchParams.entries()', 'entries()')}} : `for (var p of mySearchParams)` ou son équivalent `for (var p of mySearchParams.entries())`.
+
+## Constructeur
+
+- {{domxref("URLSearchParams.URLSearchParams", 'URLSearchParams()')}}
+  - : Constructeur renvoyant un objet `URLSearchParams`.
+
+## Propriétés
+
+_Cette interface n’hérite d’aucune propriété._
+
+## Méthodes
+
+_Cette interface n’hérite d’aucune méthode._
+
+- {{domxref("URLSearchParams.append()")}}
+  - : Ajoute une paire clé / valeur spécifiée en tant que nouveau paramètre de recherche.
+- {{domxref("URLSearchParams.delete()")}}
+  - : Supprime le paramètre de recherche donné et sa valeur associée de la liste de tous les paramètres de recherche.
+- {{domxref("URLSearchParams.entries()")}}
+  - : Retourne un {{jsxref("Iteration_protocols","iterator")}} permettant de parcourir toutes les paires clé / valeur contenues dans cet objet.
+- {{domxref("URLSearchParams.get()")}}
+  - : Retourne la première valeur associée au paramètre de recherche donné.
+- {{domxref("URLSearchParams.getAll()")}}
+  - : Retourne toutes les valeurs associées au paramètre de recherche donné.
+- {{domxref("URLSearchParams.has()")}}
+  - : Retourne un {{jsxref("Boolean")}} indiquant si un tel paramètre de recherche existe.
+- {{domxref("URLSearchParams.keys()")}}
+  - : Retourne un {{jsxref("Iteration_protocols", "iterator")}} permettant de parcourir toutes les **clés** des paires clé / valeur contenues dans cet objet.
+- {{domxref("URLSearchParams.set()")}}
+  - : Définit la valeur associée à un paramètre de recherche donné à la valeur donnée. S’il y avait plusieurs valeurs, les autres sont supprimées.
+- {{domxref("URLSearchParams.sort()")}}
+  - : Trie toutes les paires clé / valeur, s’il y en a, par leurs clés.
+- {{domxref("URLSearchParams.toString()")}}
+  - : Retourne une chaîne contenant une chaîne de requête pouvant être utilisée dans une URL.
+- {{domxref("URLSearchParams.values()")}}
+  - : Retourne un {{jsxref("Iteration_protocols", "iterator")}} permettant de parcourir toutes les **valeurs** des paires clé / valeur contenues dans cet objet.
+
+## Exemple
+
+```js
+var paramsString = "q=URLUtils.searchParams&topic=api";
 var searchParams = new URLSearchParams(paramsString);
 
 // Itère sur les paramètres de recherche.
@@ -64,39 +61,24 @@ searchParams.get("topic") === "api"; // true
 searchParams.getAll("topic"); // ["api"]
 searchParams.get("foo") === null; // true
 searchParams.append("topic", "webdev");
-searchParams.toString(); // "q=URLUtils.searchParams&amp;topic=api&amp;topic=webdev"
+searchParams.toString(); // "q=URLUtils.searchParams&topic=api&topic=webdev"
 searchParams.set("topic", "More webdev");
-searchParams.toString(); // "q=URLUtils.searchParams&amp;topic=More+webdev"
+searchParams.toString(); // "q=URLUtils.searchParams&topic=More+webdev"
 searchParams.delete("topic");
 searchParams.toString(); // "q=URLUtils.searchParams"
-</pre>
-
-<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('URL', '#urlsearchparams', "URLSearchParams")}}</td>
-   <td>{{Spec2('URL')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.URLSearchParams")}}</p>
-
-<h2 id="See_also">Voir aussi</h2>
-
-<ul>
- <li>Autres interfaces liées aux URL : {{domxref("URL")}}, {{domxref("URLUtils")}}.</li>
- <li><a href="https://developers.google.com/web/updates/2016/01/urlsearchparams?hl=en">Google Developers: Easy URL manipulation with URLSearchParams</a></li>
-</ul>
+```
+
+## Spécifications
+
+| Spécification                                                                | Statut               | Commentaire          |
+| ---------------------------------------------------------------------------- | -------------------- | -------------------- |
+| {{SpecName('URL', '#urlsearchparams', "URLSearchParams")}} | {{Spec2('URL')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.URLSearchParams")}}
+
+## Voir aussi
+
+- Autres interfaces liées aux URL : {{domxref("URL")}}, {{domxref("URLUtils")}}.
+- [Google Developers: Easy URL manipulation with URLSearchParams](https://developers.google.com/web/updates/2016/01/urlsearchparams?hl=en)
diff --git a/files/fr/web/api/usvstring/index.md b/files/fr/web/api/usvstring/index.md
index fc7d4ab42a..2aed7355b2 100644
--- a/files/fr/web/api/usvstring/index.md
+++ b/files/fr/web/api/usvstring/index.md
@@ -9,32 +9,19 @@ tags:
   - WedIDL
 translation_of: Web/API/USVString
 ---
-<p>{{APIRef("DOM")}}</p>
+{{APIRef("DOM")}}
 
-<p><code>USVString</code> correspond à l'ensemble de toutes les séquences possibles de valeurs scalaires unicode. <code>USVString</code> correspond à une {{JSxRef("String", "chaîne de caractères")}} lorsqu'elle est renvoyée en JavaScript ; elle n'est généralement utilisée que pour les API qui effectuent un traitement de texte et ont besoin d'une chaîne de valeurs scalaires unicode pour fonctionner. <code>USVString</code> est équivalent à {{DOMxRef("DOMString")}} sauf qu'il n'autorise pas les points de code de substitution non appariés. Les points de code de substitution non appariés présents dans <code>USVString</code> sont convertis par le navigateur en "caractère de remplacement" Unicode <code>U+FFFD</code>, (�).</p>
+`USVString` correspond à l'ensemble de toutes les séquences possibles de valeurs scalaires unicode. `USVString` correspond à une {{JSxRef("String", "chaîne de caractères")}} lorsqu'elle est renvoyée en JavaScript ; elle n'est généralement utilisée que pour les API qui effectuent un traitement de texte et ont besoin d'une chaîne de valeurs scalaires unicode pour fonctionner. `USVString` est équivalent à {{DOMxRef("DOMString")}} sauf qu'il n'autorise pas les points de code de substitution non appariés. Les points de code de substitution non appariés présents dans `USVString` sont convertis par le navigateur en "caractère de remplacement" Unicode `U+FFFD`, (�).
 
-<h2 id="Specification">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName("WebIDL", "#idl-USVString", "USVString")}}</td>
-   <td>{{Spec2("WebIDL")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                            | Statut                   | Commentaire          |
+| ------------------------------------------------------------------------ | ------------------------ | -------------------- |
+| {{SpecName("WebIDL", "#idl-USVString", "USVString")}} | {{Spec2("WebIDL")}} | Définition initiale. |
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{JSxRef("String")}}</li>
- <li>{{DOMxRef("DOMString")}}</li>
- <li>{{DOMxRef("CSSOMString")}}</li>
- <li><a href="/fr/docs/Web/API/DOMString/Binary">Chaîne de caractères binaires</a></li>
-</ul>
+- {{JSxRef("String")}}
+- {{DOMxRef("DOMString")}}
+- {{DOMxRef("CSSOMString")}}
+- [Chaîne de caractères binaires](/fr/docs/Web/API/DOMString/Binary)
diff --git a/files/fr/web/api/vibration_api/index.md b/files/fr/web/api/vibration_api/index.md
index 837703e244..e9e8569268 100644
--- a/files/fr/web/api/vibration_api/index.md
+++ b/files/fr/web/api/vibration_api/index.md
@@ -7,42 +7,45 @@ tags:
   - Vibration
 translation_of: Web/API/Vibration_API
 ---
-<h2 id="Description_des_vibrations">Description des vibrations</h2>
+## Description des vibrations
 
-<p>La vibration est décrite comme une série de marche-arrêt des impulsions, qui peuvent être de durées différentes. La série peut être soit un entier décrivant le nombre de millisecondes à vibrer ou un tableau d'entiers décrivant une série de pauses et de vibrations. La vibration est contrôlée par une seule méthode: {{domxref("Navigator.vibrate()")}}.</p>
+La vibration est décrite comme une série de marche-arrêt des impulsions, qui peuvent être de durées différentes. La série peut être soit un entier décrivant le nombre de millisecondes à vibrer ou un tableau d'entiers décrivant une série de pauses et de vibrations. La vibration est contrôlée par une seule méthode: {{domxref("Navigator.vibrate()")}}.
 
-<h3 id="Une_seule_vibration">Une seule vibration</h3>
+### Une seule vibration
 
-<p>Vous pouvez effectuer une seule vibration du matériel en spécifiant soit une valeur de type "entier", soit un tableau d'entiers.</p>
+Vous pouvez effectuer une seule vibration du matériel en spécifiant soit une valeur de type "entier", soit un tableau d'entiers.
 
-<pre class="brush:js">window.navigator.vibrate(200);
+```js
+window.navigator.vibrate(200);
 window.navigator.vibrate([200]);
-</pre>
+```
 
-<p>Ces deux exemples illustrent tout deux la vibration de l'appareil pendant 200 millisecondes.</p>
+Ces deux exemples illustrent tout deux la vibration de l'appareil pendant 200 millisecondes.
 
-<h3 id="Série_de_vibrations">Série de vibrations</h3>
+### Série de vibrations
 
-<p>Un tableau de valeurs décrit des périodes de temps durant lesquelles le dispositif effectue des vibrations alternées (marche-arrêt répété). Chaque valeur dans le tableau est convertie en entier puis est interprétée alternativement comme le nombre de millisecondes pour lequel le dispositif devrait vibrer et le nombre de millisecondes dont il ne le devrait pas. Par exemple:</p>
+Un tableau de valeurs décrit des périodes de temps durant lesquelles le dispositif effectue des vibrations alternées (marche-arrêt répété). Chaque valeur dans le tableau est convertie en entier puis est interprétée alternativement comme le nombre de millisecondes pour lequel le dispositif devrait vibrer et le nombre de millisecondes dont il ne le devrait pas. Par exemple:
 
-<p> </p>
 
-<pre class="brush: js">window.navigator.vibrate([200, 100, 200]);
-</pre>
 
-<p>Cela fera vibrer l'appareil pendant 200ms, puis fait une pause de 100ms avant de le faire vibrer à nouveau pendant 200ms.</p>
+```js
+window.navigator.vibrate([200, 100, 200]);
+```
 
-<p>Vous pouvez spécifier autant de paires vibration/pause que vous voulez. Vous pouvez également fournir soit un nombre pair ou impair. Il est à noter que vous ne devez pas fournir de pause avant que la dernière vibration ait lieu.</p>
+Cela fera vibrer l'appareil pendant 200ms, puis fait une pause de 100ms avant de le faire vibrer à nouveau pendant 200ms.
 
-<h3 id="Annuler_les_vibrations_existantes">Annuler les vibrations existantes</h3>
+Vous pouvez spécifier autant de paires vibration/pause que vous voulez. Vous pouvez également fournir soit un nombre pair ou impair. Il est à noter que vous ne devez pas fournir de pause avant que la dernière vibration ait lieu.
 
-<p>Faire appel à {{domxref("Navigator.vibrate()")}} avec une valeur 0, un tableau vide, ou encore un tableau composé uniquement de 0 annulera toutes series de vibrations actives.</p>
+### Annuler les vibrations existantes
 
-<h3 id="Vibrations_continues">Vibrations continues</h3>
+Faire appel à {{domxref("Navigator.vibrate()")}} avec une valeur 0, un tableau vide, ou encore un tableau composé uniquement de 0 annulera toutes series de vibrations actives.
 
-<p>Quelques codes de base comme  <code>setInterval</code> et <code>clearInterval</code> vont vous permettre de créer une vibration persistante:</p>
+### Vibrations continues
 
-<pre class="brush: js">var vibrateInterval;
+Quelques codes de base comme  `setInterval` et `clearInterval` vont vous permettre de créer une vibration persistante:
+
+```js
+var vibrateInterval;
 
 // Démarre une vibration avec une durée
 function startVibrate(duration) {
@@ -61,39 +64,25 @@ function startPeristentVibrate(duration, interval) {
     vibrateInterval = setInterval(function() {
         startVibrate(duration);
     }, interval);
-}</pre>
+}
+```
 
-<p>Bien sûr, l'extrait de code ci-dessus ne prends pas en compte la méthode du tableau de vibration ; les vibrations persistantes devront se faire en calculant la somme des éléments du tableau et créer un intervalle basé sur ce nombre (avec, probablement, un délai supplémentaire).</p>
+Bien sûr, l'extrait de code ci-dessus ne prends pas en compte la méthode du tableau de vibration ; les vibrations persistantes devront se faire en calculant la somme des éléments du tableau et créer un intervalle basé sur ce nombre (avec, probablement, un délai supplémentaire).
 
-<h3 id="Pourquoi_utiliser_l'API_de_vibration">Pourquoi utiliser l'API de vibration?</h3>
+### Pourquoi utiliser l'API de vibration?
 
-<p>Cette APi est dédiée pour les appareils mobiles. Il peut être indispensable pour les alertes au sein des applications mobiles et est particulièrement utile lorsqu'il est associé à des jeux ou des applications multimédia lourdes. Imaginez lorsque vous êtes en train de regarder une vidéo sur votre appareil mobile et pendant une scène d'explosion, votre téléphone vibre un peu. Ou jouer à Bomberman et sentir une petite vibration lorsqu'un bloc explose.</p>
+Cette APi est dédiée pour les appareils mobiles. Il peut être indispensable pour les alertes au sein des applications mobiles et est particulièrement utile lorsqu'il est associé à des jeux ou des applications multimédia lourdes. Imaginez lorsque vous êtes en train de regarder une vidéo sur votre appareil mobile et pendant une scène d'explosion, votre téléphone vibre un peu. Ou jouer à Bomberman et sentir une petite vibration lorsqu'un bloc explose.
 
-<h2 id="Spécifications">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('Vibration API')}}</td>
-   <td>{{Spec2('Vibration API')}}</td>
-   <td>Linked to spec is the latest editor's draft; W3C version is a REC.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                            | Statut                               | Commentaire                                                        |
+| ---------------------------------------- | ------------------------------------ | ------------------------------------------------------------------ |
+| {{SpecName('Vibration API')}} | {{Spec2('Vibration API')}} | Linked to spec is the latest editor's draft; W3C version is a REC. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Navigator.vibrate")}}</p>
+{{Compat("api.Navigator.vibrate")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("Navigator.vibrate()")}}</li>
-</ul>
+- {{domxref("Navigator.vibrate()")}}
diff --git a/files/fr/web/api/videotrack/id/index.md b/files/fr/web/api/videotrack/id/index.md
index 6cd67b7732..14838a9169 100644
--- a/files/fr/web/api/videotrack/id/index.md
+++ b/files/fr/web/api/videotrack/id/index.md
@@ -3,41 +3,26 @@ title: VideoTrack.id
 slug: Web/API/VideoTrack/id
 translation_of: Web/API/VideoTrack/id
 ---
-<p>{{APIRef("HTML DOM")}}</p>
+{{APIRef("HTML DOM")}}
 
-<p>La propriété <code>id</code> contient une chaîne qui identifie de manière unique une piste représentée par {{domxref("VideoTrack")}}. Cet ID peut être utilisé avec la méthode {{domxref("VideoTrackList.getTrackById()")}} pour localiser une piste spécifique dans le media associé à l'élément media.</p>
+La propriété `id` contient une chaîne qui identifie de manière unique une piste représentée par {{domxref("VideoTrack")}}. Cet ID peut être utilisé avec la méthode {{domxref("VideoTrackList.getTrackById()")}} pour localiser une piste spécifique dans le media associé à l'élément media.
 
-<p>Cet ID peut aussi être utilisé comme un fragement d'URL pour charger une piste (si le media supporte les fragments de media).</p>
+Cet ID peut aussi être utilisé comme un fragement d'URL pour charger une piste (si le media supporte les fragments de media).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var <em>trackID</em> = <em>VideoTrack</em>.id;</pre>
+    var trackID = VideoTrack.id;
 
-<p>Valeur</p>
+Valeur
 
-<p>Une {{domxref("DOMString")}} qui identifie la piste, utilisable par la suite pour l'appel de {{domxref("VideoTrackList.getTrackById", "getTrackById()")}} sur une {{domxref("VideoTrackList")}} tel que spécifié par la propriété {{domxref("HTMLMediaElement.videoTracks", "videoTracks")}} d'un élément media.</p>
+Une {{domxref("DOMString")}} qui identifie la piste, utilisable par la suite pour l'appel de {{domxref("VideoTrackList.getTrackById", "getTrackById()")}} sur une {{domxref("VideoTrackList")}} tel que spécifié par la propriété {{domxref("HTMLMediaElement.videoTracks", "videoTracks")}} d'un élément media.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', '#dom-videotrack-id', 'VideoTrack: id')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+| Specification                                                                            | Status                           | Comment |
+| ---------------------------------------------------------------------------------------- | -------------------------------- | ------- |
+| {{SpecName('HTML WHATWG', '#dom-videotrack-id', 'VideoTrack: id')}} | {{Spec2('HTML WHATWG')}} |         |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-
-
-<p>{{Compat("api.VideoTrack.id")}}</p>
+{{Compat("api.VideoTrack.id")}}
diff --git a/files/fr/web/api/videotrack/index.md b/files/fr/web/api/videotrack/index.md
index 07ed277113..61fdb4a9f9 100644
--- a/files/fr/web/api/videotrack/index.md
+++ b/files/fr/web/api/videotrack/index.md
@@ -13,72 +13,61 @@ tags:
   - track
 translation_of: Web/API/VideoTrack
 ---
-<div>{{APIRef("HTML DOM")}}</div>
+{{APIRef("HTML DOM")}}
 
-<p>L'interface {{domxref("VideoTrack")}} représente une seule piste vidéo d'un élément {{HTMLElement("video")}}. L'utilisation la plus courante à un objet <code>VideoTrack</code> est de basculer sa propriété {{domxref("VideoTrack.selected", "selected")}} afin d'en faire la piste vidéo active pour l'élément {{HTMLElement("video")}}.</p>
+L'interface {{domxref("VideoTrack")}} représente une seule piste vidéo d'un élément {{HTMLElement("video")}}. L'utilisation la plus courante à un objet `VideoTrack` est de basculer sa propriété {{domxref("VideoTrack.selected", "selected")}} afin d'en faire la piste vidéo active pour l'élément {{HTMLElement("video")}}.
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<dl>
- <dt>{{domxref("VideoTrack.selected", "selected")}}</dt>
- <dd>Une valeur booléenne qui contrôle si la piste vidéo est active ou non. Seule une seule piste vidéo peut être active à un moment donné, donc la définition de cette propriété sur <code>true</code> pour une piste pendant qu'une autre piste est active rendra cette autre piste inactive.</dd>
- <dt>{{domxref("VideoTrack.id", "id")}} {{ReadOnlyInline}}</dt>
- <dd>Un {{domxref("DOMString")}} qui identifie de manière unique la piste dans le média. Cet identifiant peut être utilisé pour localiser une piste spécifique dans une liste de pistes vidéo en appelant {{domxref("VideoTrackList.getTrackById()")}}. L'identifiant peut également être utilisé comme partie fragment de l'URL si le support prend en charge la recherche par fragment de support conformément à la <a href="https://www.w3.org/TR/media-frags/">spécification UR de fragments de média</a>.</dd>
- <dt>{{domxref("VideoTrack.kind", "kind")}} {{ReadOnlyInline}}</dt>
- <dd>Un {{domxref("DOMString")}} spécifiant la catégorie dans laquelle appartient la piste. Par exemple, la piste vidéo principale aurait un <code>type</code> <code>"principale"</code>.</dd>
- <dt>{{domxref("VideoTrack.label", "label")}} {{ReadOnlyInline}}</dt>
- <dd>Un {{domxref("DOMString")}} fournissant une étiquette lisible par l'homme pour la piste. Par exemple, une piste dont le <code>type</code> est <code>"signe"</code> peut avoir l'<code>étiquette</code> <code>"Une interprétation en langue des signes"</code>. Cette chaîne est vide si aucune étiquette n'est fournie.</dd>
- <dt>{{domxref("VideoTrack.language", "language")}} {{ReadOnlyInline}}</dt>
- <dd>Un {{domxref("DOMString")}} spécifiant la langue principale de la piste vidéo, ou une chaîne vide si elle est inconnue. La langue est spécifié en tant que code de langue BCP 47 ({{RFC(5646)}}), tel que <code>"en-US"</code> ou <code>"pt-BR"</code>.</dd>
- <dt>{{domxref("VideoTrack.sourceBuffer", "sourceBuffer")}} {{ReadOnlyInline}}</dt>
- <dd>Le {{domxref("SourceBuffer")}} qui a créé la piste. Renvoie null si la piste n'a pas été créée par un {{domxref("SourceBuffer")}} ou le {{domxref("SourceBuffer")}} a été supprimé de l'attribut {{domxref("MediaSource.sourceBuffers")}} de sa source média parent.</dd>
-</dl>
+- {{domxref("VideoTrack.selected", "selected")}}
+  - : Une valeur booléenne qui contrôle si la piste vidéo est active ou non. Seule une seule piste vidéo peut être active à un moment donné, donc la définition de cette propriété sur `true` pour une piste pendant qu'une autre piste est active rendra cette autre piste inactive.
+- {{domxref("VideoTrack.id", "id")}} {{ReadOnlyInline}}
+  - : Un {{domxref("DOMString")}} qui identifie de manière unique la piste dans le média. Cet identifiant peut être utilisé pour localiser une piste spécifique dans une liste de pistes vidéo en appelant {{domxref("VideoTrackList.getTrackById()")}}. L'identifiant peut également être utilisé comme partie fragment de l'URL si le support prend en charge la recherche par fragment de support conformément à la [spécification UR de fragments de média](https://www.w3.org/TR/media-frags/).
+- {{domxref("VideoTrack.kind", "kind")}} {{ReadOnlyInline}}
+  - : Un {{domxref("DOMString")}} spécifiant la catégorie dans laquelle appartient la piste. Par exemple, la piste vidéo principale aurait un `type` `"principale"`.
+- {{domxref("VideoTrack.label", "label")}} {{ReadOnlyInline}}
+  - : Un {{domxref("DOMString")}} fournissant une étiquette lisible par l'homme pour la piste. Par exemple, une piste dont le `type` est `"signe"` peut avoir l'`étiquette` `"Une interprétation en langue des signes"`. Cette chaîne est vide si aucune étiquette n'est fournie.
+- {{domxref("VideoTrack.language", "language")}} {{ReadOnlyInline}}
+  - : Un {{domxref("DOMString")}} spécifiant la langue principale de la piste vidéo, ou une chaîne vide si elle est inconnue. La langue est spécifié en tant que code de langue BCP 47 ({{RFC(5646)}}), tel que `"en-US"` ou `"pt-BR"`.
+- {{domxref("VideoTrack.sourceBuffer", "sourceBuffer")}} {{ReadOnlyInline}}
+  - : Le {{domxref("SourceBuffer")}} qui a créé la piste. Renvoie null si la piste n'a pas été créée par un {{domxref("SourceBuffer")}} ou le {{domxref("SourceBuffer")}} a été supprimé de l'attribut {{domxref("MediaSource.sourceBuffers")}} de sa source média parent.
 
-<h2 id="Notes_dutilisation">Notes d'utilisation</h2>
+## Notes d'utilisation
 
-<p>Pour obtenir un <code>VideoTrack</code> pour un élément multimédia donné, utilisez la propriété {{domxref("HTMLMediaElement.videoTracks", "videoTracks")}}, qui renvoie un objet {{domxref("VideoTrackList")}} à partir duquel vous pouvez obtenir les pistes individuelles contenues dans le média:</p>
+Pour obtenir un `VideoTrack` pour un élément multimédia donné, utilisez la propriété {{domxref("HTMLMediaElement.videoTracks", "videoTracks")}}, qui renvoie un objet {{domxref("VideoTrackList")}} à partir duquel vous pouvez obtenir les pistes individuelles contenues dans le média:
 
-<pre class="brush: js">var el = document.querySelector("video");
+```js
+var el = document.querySelector("video");
 var tracks = el.videoTracks;
-</pre>
+```
 
-<p>Vous pouvez ensuite accéder aux pistes individuelles du média en utilisant soit la syntaxe de tableau, soit des fonctions telles que {{jsxref("Array.forEach", "forEach()")}}.</p>
+Vous pouvez ensuite accéder aux pistes individuelles du média en utilisant soit la syntaxe de tableau, soit des fonctions telles que {{jsxref("Array.forEach", "forEach()")}}.
 
-<p>Ce premier exemple obtient la première piste vidéo sur le média:</p>
+Ce premier exemple obtient la première piste vidéo sur le média:
 
-<pre class="brush: js">var firstTrack = tracks[0];</pre>
+```js
+var firstTrack = tracks[0];
+```
 
-<p>L'exemple suivant parcourt toutes les pistes vidéo du média, activant la première piste vidéo qui est dans la langue préférée de l'utilisateur (tirée d'une variable <code>userLanguage</code>).</p>
+L'exemple suivant parcourt toutes les pistes vidéo du média, activant la première piste vidéo qui est dans la langue préférée de l'utilisateur (tirée d'une variable `userLanguage`).
 
-<pre class="brush: js">for (var i = 0; i &lt; tracks.length; i++) {
+```js
+for (var i = 0; i < tracks.length; i++) {
   if (tracks[i].language === userLanguage) {
     tracks[i].selected = true;
     break;
   }
 });
-</pre>
-
-<p>Le {{domxref("VideoTrack.language", "language")}} est au format standard ({{RFC(5646)}}). Pour l'anglais américain, ce serait <code>"en-US"</code>, par exemple.</p>
-
-<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', '#videotrack', 'VideoTrack')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.VideoTrack")}}</p>
+```
+
+Le {{domxref("VideoTrack.language", "language")}} est au format standard ({{RFC(5646)}}). Pour l'anglais américain, ce serait `"en-US"`, par exemple.
+
+## Spécifications
+
+| Spécification                                                                | Statut                           | Commentaire |
+| ---------------------------------------------------------------------------- | -------------------------------- | ----------- |
+| {{SpecName('HTML WHATWG', '#videotrack', 'VideoTrack')}} | {{Spec2('HTML WHATWG')}} |             |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.VideoTrack")}}
diff --git a/files/fr/web/api/vrdisplaycapabilities/index.md b/files/fr/web/api/vrdisplaycapabilities/index.md
index 27c1a9ffc0..f4e7209f4d 100644
--- a/files/fr/web/api/vrdisplaycapabilities/index.md
+++ b/files/fr/web/api/vrdisplaycapabilities/index.md
@@ -3,57 +3,40 @@ title: VRDisplayCapabilities
 slug: Web/API/VRDisplayCapabilities
 translation_of: Web/API/VRDisplayCapabilities
 ---
-<div>{{APIRef("WebVR API")}}{{SeeCompatTable}}</div>
-
-<p>L'interface <strong><code>VRDisplayCapabilities</code></strong> de <a href="/en-US/docs/Web/API/WebVR_API">WebVR API</a> décrit les capacités d'un appareil {{domxref("VRDisplay")}} — ses fonctionalités peuvent être utilisée pour tester les capacités de l'appareil, par exemple il peut retourner de l'information sur la position.</p>
-
-<p>Cet interface est accessible à partir de la propriété {{domxref("VRDisplay.capabilities")}}.</p>
-
-<h2 id="Properties">Properties</h2>
-
-<dl>
- <dt>{{domxref("VRDisplayCapabilities.canPresent")}} {{readonlyInline}}</dt>
- <dd>Retourne un objet {{domxref("Boolean")}} qui décrit si l'écran RV est capable de présenter du contenu (e.g. en utilisant un visiocasque).</dd>
- <dt>{{domxref("VRDisplayCapabilities.hasExternalDisplay")}} {{readonlyInline}}</dt>
- <dd>Retourne un objet {{domxref("Boolean")}} indiquant si l'écran RV est séparé de l'écran primaire de l'appareil.</dd>
- <dt>{{domxref("VRDisplayCapabilities.hasOrientation")}} {{readonlyInline}}</dt>
- <dd>Retourne un objet {{domxref("Boolean")}} indiquant si l'écran RV peut suivre le mouvement de l'appareil et retourne de l'information sur l'orientation.</dd>
- <dt>{{domxref("VRDisplayCapabilities.hasPosition")}} {{readonlyInline}}</dt>
- <dd>Retourne un objet {{domxref("Boolean")}} indiquant si l'écran RV peut suivre le mouvement de l'appareil et retourne de l'information sur l'orientation.</dd>
- <dt>{{domxref("VRDisplayCapabilities.maxLayers")}} {{readonlyInline}}</dt>
- <dd>Retourne un nombre indiquant le nombre maximal de {{domxref("VRLayer")}}s que l'écran RV peut présenter en même temps (e.g. la longueur maximale du tableau que {{domxref("Display.requestPresent()")}} peut accepter.)</dd>
-</dl>
-
-<h2 id="Examples">Exemples</h2>
-
-<pre>TBD.</pre>
-
-<h2 id="Specifications">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('WebVR', '#interface-vrdisplaycapabilities', 'VRDisplayCapabilities')}}</td>
-      <td>{{Spec2('WebVR')}}</td>
-      <td>Définition initiale</td>
-    </tr>
-  </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité avec les navigateurs</h2>
-
-<p>{{Compat("api.VRDisplayCapabilities")}}</p>
-
-<h2 id="See_also">Voir aussi</h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/API/WebVR_API">Page d'accueil de l'API WebVR</a>.</li>
-  <li><a href="https://mixedreality.mozilla.org/">https://mixedreality.mozilla.org/</a> — démos, téléchargements et autres ressources de l'équipe Mozilla VR.</li>
-</ul>
+{{APIRef("WebVR API")}}{{SeeCompatTable}}
+
+L'interface **`VRDisplayCapabilities`** de [WebVR API](/en-US/docs/Web/API/WebVR_API) décrit les capacités d'un appareil {{domxref("VRDisplay")}} — ses fonctionalités peuvent être utilisée pour tester les capacités de l'appareil, par exemple il peut retourner de l'information sur la position.
+
+Cet interface est accessible à partir de la propriété {{domxref("VRDisplay.capabilities")}}.
+
+## Properties
+
+- {{domxref("VRDisplayCapabilities.canPresent")}} {{readonlyInline}}
+  - : Retourne un objet {{domxref("Boolean")}} qui décrit si l'écran RV est capable de présenter du contenu (e.g. en utilisant un visiocasque).
+- {{domxref("VRDisplayCapabilities.hasExternalDisplay")}} {{readonlyInline}}
+  - : Retourne un objet {{domxref("Boolean")}} indiquant si l'écran RV est séparé de l'écran primaire de l'appareil.
+- {{domxref("VRDisplayCapabilities.hasOrientation")}} {{readonlyInline}}
+  - : Retourne un objet {{domxref("Boolean")}} indiquant si l'écran RV peut suivre le mouvement de l'appareil et retourne de l'information sur l'orientation.
+- {{domxref("VRDisplayCapabilities.hasPosition")}} {{readonlyInline}}
+  - : Retourne un objet {{domxref("Boolean")}} indiquant si l'écran RV peut suivre le mouvement de l'appareil et retourne de l'information sur l'orientation.
+- {{domxref("VRDisplayCapabilities.maxLayers")}} {{readonlyInline}}
+  - : Retourne un nombre indiquant le nombre maximal de {{domxref("VRLayer")}}s que l'écran RV peut présenter en même temps (e.g. la longueur maximale du tableau que {{domxref("Display.requestPresent()")}} peut accepter.)
+
+## Exemples
+
+    TBD.
+
+## Spécifications
+
+| Spécification                                                                                                | Statut                   | Commentaire         |
+| ------------------------------------------------------------------------------------------------------------ | ------------------------ | ------------------- |
+| {{SpecName('WebVR', '#interface-vrdisplaycapabilities', 'VRDisplayCapabilities')}} | {{Spec2('WebVR')}} | Définition initiale |
+
+## Compatibilité avec les navigateurs
+
+{{Compat("api.VRDisplayCapabilities")}}
+
+## Voir aussi
+
+- [Page d'accueil de l'API WebVR](/fr/docs/Web/API/WebVR_API).
+- <https://mixedreality.mozilla.org/> — démos, téléchargements et autres ressources de l'équipe Mozilla VR.
diff --git a/files/fr/web/api/web_animations_api/index.md b/files/fr/web/api/web_animations_api/index.md
index 2e2a8a8435..2c4a6271ef 100644
--- a/files/fr/web/api/web_animations_api/index.md
+++ b/files/fr/web/api/web_animations_api/index.md
@@ -8,78 +8,57 @@ tags:
   - Web Animations
 translation_of: Web/API/Web_Animations_API
 ---
-<p>{{DefaultAPISidebar("Web Animations")}}</p>
+{{DefaultAPISidebar("Web Animations")}}
 
-<p>L'<strong>API Web Animations</strong> permet de synchroniser et de chronométrer les changements de présentation d'une page Web, c'est-à-dire l'animation d'éléments DOM. Pour ce faire, il combine deux modèles : le modèle de synchronisation et le modèle d'animation.</p>
+L'**API Web Animations** permet de synchroniser et de chronométrer les changements de présentation d'une page Web, c'est-à-dire l'animation d'éléments DOM. Pour ce faire, il combine deux modèles : le modèle de synchronisation et le modèle d'animation.
 
-<h2 id="Concepts_et_utilisation">Concepts et utilisation</h2>
+## Concepts et utilisation
 
-<p>L'API Web Animations fournit un langage commun aux navigateurs et aux développeurs pour décrire les animations sur les éléments DOM. Pour obtenir plus d'informations sur les concepts derrière l'API et comment l'utiliser, lisez <a href="/fr/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API">Utilisation de l'API Web Animations</a>.</p>
+L'API Web Animations fournit un langage commun aux navigateurs et aux développeurs pour décrire les animations sur les éléments DOM. Pour obtenir plus d'informations sur les concepts derrière l'API et comment l'utiliser, lisez [Utilisation de l'API Web Animations](/fr/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API).
 
-<h2 id="Interfaces_danimations_Web">Interfaces d'animations Web</h2>
+## Interfaces d'animations Web
 
-<dl>
- <dt>{{domxref("Animation")}}</dt>
- <dd>Fournit des commandes de lecture et une chronologie pour un nœud ou une source d'animation. Peut prendre un objet créé avec le constructeur {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}}.</dd>
- <dt>{{domxref("KeyframeEffect")}}</dt>
- <dd>Décrit des ensembles de propriétés et de valeurs animables, appelées <strong>images clés</strong> (<em>keyframes</em>) et leurs <a href="/en-US/docs/Web/API/Web_Animations_API/Animation_timing_options">options de minutage</a> . Ceux-ci peuvent ensuite être lus en utilisant le constructeur {{domxref("Animation.Animation", "Animation()")}}.</dd>
- <dt>{{domxref("AnimationTimeline")}}</dt>
- <dd>Représente la chronologie de l'animation. Cette interface existe pour définir les fonctionnalités de la chronologie (héritées par {{domxref("DocumentTimeline")}} et les futurs objets de chronologie) et n'est pas elle-même accessible par les développeurs.</dd>
- <dt>{{domxref("AnimationEvent")}}</dt>
- <dd>Fait actuellement partie des animations CSS.</dd>
- <dt>{{domxref("DocumentTimeline")}}</dt>
- <dd>Représente les chronologies d'animation, y compris la chronologie du document par défaut (accessible à l'aide de la propriété {{domxref("Document.timeline")}}).</dd>
- <dt>{{domxref("EffectTiming")}}</dt>
- <dd>{{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly()")}} et {{domxref("KeyframeEffect.KeyframeEffect()")}} acceptent tous un dictionnaire facultatif objet des propriétés de synchronisation.</dd>
-</dl>
+- {{domxref("Animation")}}
+  - : Fournit des commandes de lecture et une chronologie pour un nœud ou une source d'animation. Peut prendre un objet créé avec le constructeur {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}}.
+- {{domxref("KeyframeEffect")}}
+  - : Décrit des ensembles de propriétés et de valeurs animables, appelées **images clés** (_keyframes_) et leurs [options de minutage](/en-US/docs/Web/API/Web_Animations_API/Animation_timing_options) . Ceux-ci peuvent ensuite être lus en utilisant le constructeur {{domxref("Animation.Animation", "Animation()")}}.
+- {{domxref("AnimationTimeline")}}
+  - : Représente la chronologie de l'animation. Cette interface existe pour définir les fonctionnalités de la chronologie (héritées par {{domxref("DocumentTimeline")}} et les futurs objets de chronologie) et n'est pas elle-même accessible par les développeurs.
+- {{domxref("AnimationEvent")}}
+  - : Fait actuellement partie des animations CSS.
+- {{domxref("DocumentTimeline")}}
+  - : Représente les chronologies d'animation, y compris la chronologie du document par défaut (accessible à l'aide de la propriété {{domxref("Document.timeline")}}).
+- {{domxref("EffectTiming")}}
+  - : {{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly()")}} et {{domxref("KeyframeEffect.KeyframeEffect()")}} acceptent tous un dictionnaire facultatif objet des propriétés de synchronisation.
 
-<h2 id="Extensions_à_dautres_interfaces">Extensions à d'autres interfaces</h2>
+## Extensions à d'autres interfaces
 
-<p>L'API Web Animations ajoute de nouvelles fonctionnalités à {{domxref("document")}} et {{domxref("element")}}.</p>
+L'API Web Animations ajoute de nouvelles fonctionnalités à {{domxref("document")}} et {{domxref("element")}}.
 
-<h3 id="Extensions_à_linterface_Document">Extensions à l'interface <code>Document</code></h3>
+### Extensions à l'interface `Document`
 
-<dl>
- <dt>{{domxref("document.timeline")}}</dt>
- <dd>L'objet <code>DocumentTimeline</code> représentant la chronologie du document par défaut.</dd>
- <dt>{{domxref("document.getAnimations()")}}</dt>
- <dd>Renvoie un tableau d'objets {{domxref("Animation")}} actuellement en vigueur sur les éléments du <code>document</code>.</dd>
-</dl>
+- {{domxref("document.timeline")}}
+  - : L'objet `DocumentTimeline` représentant la chronologie du document par défaut.
+- {{domxref("document.getAnimations()")}}
+  - : Renvoie un tableau d'objets {{domxref("Animation")}} actuellement en vigueur sur les éléments du `document`.
 
-<h3 id="Extensions_à_linterface_Element">Extensions à l'interface <code>Element</code></h3>
+### Extensions à l'interface `Element`
 
-<dl>
- <dt>{{domxref("Element.animate()")}}</dt>
- <dd>Une méthode de raccourci pour créer et lire une animation sur un élément. Il renvoie l'instance d'objet {{domxref("Animation")}} créée.</dd>
- <dt>{{domxref("Element.getAnimations()")}}</dt>
- <dd>Renvoie un tableau d'objets {{domxref("Animation")}} affectant actuellement un élément ou qui sont programmés pour le faire à l'avenir.</dd>
-</dl>
+- {{domxref("Element.animate()")}}
+  - : Une méthode de raccourci pour créer et lire une animation sur un élément. Il renvoie l'instance d'objet {{domxref("Animation")}} créée.
+- {{domxref("Element.getAnimations()")}}
+  - : Renvoie un tableau d'objets {{domxref("Animation")}} affectant actuellement un élément ou qui sont programmés pour le faire à l'avenir.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Web Animations')}}</td>
-   <td>{{Spec2('Web Animations')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                            | Statut                               | Commentaire         |
+| ---------------------------------------- | ------------------------------------ | ------------------- |
+| {{SpecName('Web Animations')}} | {{Spec2('Web Animations')}} | Définition initiale |
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API">Utilisation de l'API Web Animations</a></li>
- <li><a href="https://mozdevs.github.io/Animation-examples/">Démos d'animations web</a></li>
- <li><a href="https://github.com/web-animations/web-animations-js">Polyfill / Prothèse d'implémentation</a></li>
- <li><a href="https://birtles.github.io/areweanimatedyet/">Implémentation</a> actuelle de Firefox : <a href="https://birtles.github.io/areweanimatedyet/">AreWeAnimatedYet</a></li>
- <li>
-  <p><a href="http://codepen.io/danwilson/pen/xGBKVq">Test de prise en charge du navigateur</a></p>
- </li>
-</ul>
+- [Utilisation de l'API Web Animations](/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API)
+- [Démos d'animations web](https://mozdevs.github.io/Animation-examples/)
+- [Polyfill / Prothèse d'implémentation](https://github.com/web-animations/web-animations-js)
+- [Implémentation](https://birtles.github.io/areweanimatedyet/) actuelle de Firefox : [AreWeAnimatedYet](https://birtles.github.io/areweanimatedyet/)
+- [Test de prise en charge du navigateur](http://codepen.io/danwilson/pen/xGBKVq)
diff --git a/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.md b/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.md
index 6e5c9cae01..503ef5e776 100644
--- a/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.md
+++ b/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.md
@@ -3,343 +3,404 @@ title: Les concepts de base de la Web Audio API
 slug: Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API
 translation_of: Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API
 ---
+Cet article explique une partie de la théorie sur laquelle s'appuient les fonctionnalités de la Web Audio API. Il ne fera pas de vous un ingénieur du son, mais vous donnera les bases nécessaires pour comprendre pourquoi la Web Audio API fonctionne de cette manière, et vous permettre de mieux l'utiliser.
 
-<p>Cet article explique une partie de la théorie sur laquelle s'appuient les fonctionnalités de la Web Audio API. Il ne fera pas de vous un ingénieur du son, mais vous donnera les bases nécessaires pour comprendre pourquoi la Web Audio API fonctionne de cette manière, et vous permettre de mieux l'utiliser.</p>
+## Graphes audio
 
-<h2 id="Graphes_audio">Graphes audio</h2>
+La Web Audio API implique d'effectuer le traitement du son dans un **contexte** **audio**; elle a été conçue sur le principe de **routage modulaire**. Les opérations basiques sont effectuées dans **noeuds audio**, qui sont liés entre eux pour former un **graphe de routage audio**. Un seul contexte peut supporter plusieurs sources — avec différentes configurations de canaux. Cette architecture modulaire assure la flexibilité nécessaire pour créer des fonctions audio complexes avec des effets dynamiques.
 
-<p>La Web Audio API implique d'effectuer le traitement du son dans un <strong>contexte </strong> <strong>audio</strong>; elle a été conçue sur le principe de <strong>routage modulaire</strong>. Les opérations basiques sont effectuées dans <strong>noeuds audio</strong>, qui sont liés entre eux pour former un <strong>graphe de routage audio</strong>. Un seul contexte peut supporter plusieurs sources — avec différentes configurations de canaux. Cette architecture modulaire assure la flexibilité nécessaire pour créer des fonctions audio complexes avec des effets dynamiques.</p>
+Les noeuds audio sont liés au niveau de leur entrée et leur sortie, formant une chaîne qui commence avec une ou plusieurs sources, traverse un ou plusieurs noeuds, et se termine avec une sortie spécifique (bien qu'il ne soit pas nécessaire de spécifier une sortie si, par exemple, vous souhaitez seulement visualiser des données audio). Un scénario simple, représentatif de la Web Audio API, pourrait ressembler à ceci :
 
-<p>Les noeuds audio sont liés au niveau de leur entrée et leur sortie, formant une chaîne qui commence avec une ou plusieurs sources, traverse un ou plusieurs noeuds, et se termine avec une sortie spécifique (bien qu'il ne soit pas nécessaire de spécifier une sortie si, par exemple, vous souhaitez seulement visualiser des données audio). Un scénario simple, représentatif de la Web Audio API, pourrait ressembler à ceci :</p>
+1.  Création d'un contexte audio
+2.  Dans ce contexte, création des sources — telles que `<audio>`, oscillateur, flux
+3.  Création des noeuds d'effets, tels que réverb, filtres biquad, balance,  compresseur
+4.  Choix final de la sortie audio, par exemple les enceintes du système
+5.  Connection des sources aux effets, et des effets à la sortie.
 
-<ol>
- <li>Création d'un contexte audio</li>
- <li>Dans ce contexte, création des sources — telles que <code>&lt;audio&gt;</code>, oscillateur, flux</li>
- <li>Création des noeuds d'effets, tels que réverb, filtres biquad, balance,  compresseur</li>
- <li>Choix final de la sortie audio, par exemple les enceintes du système </li>
- <li>Connection des sources aux effets, et des effets à la sortie.</li>
-</ol>
+![Diagramme simple composé de trois rectangles intitulés Sources, Effets et Sortie, reliés par des flèches, de gauche à droite, qui indiquent le sens du flux d'informations audio.](webaudioapi_en.svg)
 
-<p><img alt="Diagramme simple composé de trois rectangles intitulés Sources, Effets et Sortie, reliés par des flèches, de gauche à droite, qui indiquent le sens du flux d'informations audio." src="webaudioapi_en.svg"></p>
+Chaque entrée ou sortie est composée de plusieurs **canaux,** chacun correspondant à une configuration audio spécifique. Tout type de canal discret est supporté, y compris *mono*, _stereo_, _quad_, _5.1_, etc.
 
-<p>Chaque entrée ou sortie est composée de plusieurs <strong>canaux, </strong>chacun correspondant à une configuration audio spécifique. Tout type de canal discret est supporté, y compris <em>mono</em>, <em>stereo</em>, <em>quad</em>, <em>5.1</em>, etc.</p>
+![Diagramme qui montre comment les AudioNodes sont reliés par leurs entrées et sorties, et la configuration des canaux à l'intérieur de ces entrées/sorties.](audionodes.svg)
 
-<p><img alt="Diagramme qui montre comment les AudioNodes sont reliés par leurs entrées et sorties, et la configuration des canaux à l'intérieur de ces entrées/sorties." src="audionodes.svg"></p>
+Les sources audio peuvent être de provenance variée :
 
-<p>Les sources audio peuvent être de provenance variée :</p>
+- générées directement en JavaScript avec un noeud audio (tel qu'un oscillateur)
+- créées à partir de données PCM brutes (le contexte audio a des méthodes pour décoder les formats audio supportés)
+- fournies par une balise HTML media (telle que {{HTMLElement("video")}} ou {{HTMLElement("audio")}})
+- récupérées directement avec [WebRTC](/en-US/docs/WebRTC) {{domxref("MediaStream")}} (une webcam ou un microphone)
 
-<ul>
- <li>générées directement en JavaScript avec un noeud audio (tel qu'un oscillateur)</li>
- <li>créées à partir de données PCM brutes (le contexte audio a des méthodes pour décoder les formats audio supportés)</li>
- <li>fournies par une balise HTML media (telle que {{HTMLElement("video")}} ou {{HTMLElement("audio")}})</li>
- <li>récupérées directement avec <a href="/en-US/docs/WebRTC">WebRTC</a> {{domxref("MediaStream")}} (une webcam ou un microphone)</li>
-</ul>
+## Données audio: ce qu'on trouve dans un échantillon
 
-<h2 id="Données_audio_ce_qu'on_trouve_dans_un_échantillon">Données audio: ce qu'on trouve dans un échantillon</h2>
+Lors du traitement d'un signal audio, **l'échantillonage** désigne la conversion d'un [signal continu](http://en.wikipedia.org/wiki/Continuous_signal) en [signal discret](http://en.wikipedia.org/wiki/Discrete_signal); formulé autrement, une onde de son continue, comme un groupe qui joue en live, est convertie en une séquence d'échantillons (un signal temporel discret) qui permet à l'ordinateur de traiter le son en blocs distincts.
 
-<p>Lors du traitement d'un signal audio, <strong>l'échantillonage</strong> désigne la conversion d'un <a href="http://en.wikipedia.org/wiki/Continuous_signal">signal continu</a> en <a class="mw-redirect" href="http://en.wikipedia.org/wiki/Discrete_signal">signal discret</a>; formulé autrement, une onde de son continue, comme un groupe qui joue en live, est convertie en une séquence d'échantillons (un signal temporel discret) qui permet à l'ordinateur de traiter le son en blocs distincts.</p>
+On peut trouver davantage de détails sur la page Wikipedia [Echantillonage (signal)](<https://fr.wikipedia.org/wiki/%C3%89chantillonnage_(signal)>).
 
-<p>On peut trouver davantage de détails sur la page Wikipedia <a href="https://fr.wikipedia.org/wiki/%C3%89chantillonnage_(signal)">Echantillonage (signal)</a>.</p>
+## Mémoire tampon : trames, échantillons et canaux
 
-<h2 id="Mémoire_tampon_trames_échantillons_et_canaux">Mémoire tampon : trames, échantillons et canaux</h2>
+Un {{ domxref("AudioBuffer") }} prend comme paramètres un nombre de canaux (1 pour mono, 2 pour stéréo, etc), une longueur, qui correspond au nombre de trames d'échantillon dans la mémoire tampon, et un taux d'échantillonage, qui indique le nombre de trames d'échantillons lues par seconde.
 
-<p>Un {{ domxref("AudioBuffer") }} prend comme paramètres un nombre de canaux (1 pour mono, 2 pour stéréo, etc), une longueur, qui correspond au nombre de trames d'échantillon dans la mémoire tampon, et un taux d'échantillonage, qui indique le nombre de trames d'échantillons lues par seconde.</p>
+Un échantillon est une valeur float32 unique, qui correspond à la valeur du flux audio à un point précis dans le temps, sur un canal spécifique (gauche ou droit dans le cas de la stéréo). Une trame, ou trame d'échantillon est l'ensemble de toutes les valeurs pour tous les canaux (deux pour la stéréo, six pour le 5.1, etc.)  à un point précis dans le temps.
 
-<p>Un échantillon est une valeur float32 unique, qui correspond à la valeur du flux audio à un point précis dans le temps, sur un canal spécifique (gauche ou droit dans le cas de la stéréo). Une trame, ou trame d'échantillon est l'ensemble de toutes les valeurs pour tous les canaux (deux pour la stéréo, six pour le 5.1, etc.)  à un point précis dans le temps.</p>
+Le taux d'échantillonage est le nombre d'échantillons (ou de trames, puisque tous les échantillons d'une trame jouent en même temps) qui sont joués en une seconde, exprimés en Hz. Plus le taux d'échantillonage est élevé, meilleure est la qualité du son.
 
-<p>Le taux d'échantillonage est le nombre d'échantillons (ou de trames, puisque tous les échantillons d'une trame jouent en même temps) qui sont joués en une seconde, exprimés en Hz. Plus le taux d'échantillonage est élevé, meilleure est la qualité du son.</p>
+Prenons deux {{ domxref("AudioBuffer") }}, l'un en mono et l'autre en stéréo, chacun d'une durée de 1 seconde et d'une fréquence de 44100Hz:
 
-<p>Prenons deux {{ domxref("AudioBuffer") }}, l'un en mono et l'autre en stéréo, chacun d'une durée de 1 seconde et d'une fréquence de 44100Hz:</p>
+- le mono aura 44100 échantillons, et 44100 trames. Sa propriété `length` vaudra 44100.
+- le stéréo aura 88200 échantillons, et 44100 trames. Sa propriété `length` vaudra aussi 44100, puisqu'elle correspond au nombre de trames.
 
-<ul>
- <li>le mono aura 44100 échantillons, et 44100 trames. Sa propriété <code>length</code> vaudra 44100.</li>
- <li>le stéréo aura 88200 échantillons, et 44100 trames. Sa propriété <code>length</code> vaudra aussi 44100, puisqu'elle correspond au nombre de trames.</li>
-</ul>
+![Le diagramme montre une succession de tames dans un buffer audio. Comme le buffer est composé de deux canaux (stéréo), chaque trame contient deux échantillons.](sampleframe.svg)
 
-<p><img alt="Le diagramme montre une succession de tames dans un buffer audio. Comme le buffer est composé de deux canaux (stéréo), chaque trame contient deux échantillons." src="sampleframe.svg"></p>
+Lorsqu'un noeud de mémoire tampon est lu, on entend d'abord la trame la trame la plus à gauche, puis celle qui la suit à droite, etc. Dans le cas de la stéréo, on entend les deux canaux en même temps. Les trames d'échantillon sont très utiles, car elles représentent le temps indépendamment du nombre de canaux.
 
-<p>Lorsqu'un noeud de mémoire tampon est lu, on entend d'abord la trame la trame la plus à gauche, puis celle qui la suit à droite, etc. Dans le cas de la stéréo, on entend les deux canaux en même temps. Les trames d'échantillon sont très utiles, car elles représentent le temps indépendamment du nombre de canaux.</p>
+> **Note :** Pour obtenir le temps en secondes à partir du nombre de trames, diviser le nombre de trames par le taux d'échantillonage. Pour obtenir le nombre de trames à partir du nombre d'échantillons, diviser le nombre d'échantillons par le nombre de canaux.
 
-<div class="note">
-<p><strong>Note :</strong> Pour obtenir le temps en secondes à partir du nombre de trames, diviser le nombre de trames par le taux d'échantillonage. Pour obtenir le nombre de trames à partir du nombre d'échantillons, diviser le nombre d'échantillons par le nombre de canaux.</p>
-</div>
+Voici quelques exemples simples:
 
-<p>Voici quelques exemples simples:</p>
+```js
+var contexte = new AudioContext();
+var memoireTampon = contexte.createBuffer(2, 22050, 44100);
+```
 
-<pre class="brush: js">var contexte = new AudioContext();
-var memoireTampon = contexte.createBuffer(2, 22050, 44100);</pre>
+> **Note :** **44,100 [Hz](https://en.wikipedia.org/wiki/Hertz)** (que l'on peut aussi écrire **44.1 kHz**) est un [taux d'échantillonage](https://en.wikipedia.org/wiki/Sampling_frequency) couramment utilisé. Pourquoi 44.1kHz ?
+>
+> D'abord, parce ce que le [champ auditif](https://en.wikipedia.org/wiki/Hearing_range) qui peut être perçu par des oreilles humaines se situe à peu près entre 20 Hz et 20,000 Hz, et que selon le [théorème d'échantillonage de Nyquist–Shannon](https://en.wikipedia.org/wiki/Nyquist%E2%80%93Shannon_sampling_theorem) la fréquence d'échantillonage doit être supérieure à deux fois la fréquence maximum que l'on souhaite reproduire; le taux d'échantillonage doit donc être supérieur à 40 kHz.
+>
+> De plus, le signal doit être traité par un [filtre passe-bas](https://en.wikipedia.org/wiki/Low-pass_filter) avant d'être échantilloné, afin d'éviter le phénomène d'[aliasing](https://en.wikipedia.org/wiki/Aliasing), et, si en théorie un  filtre passe-bas idéal devrait être capable de laisser passer les fréquences inférieures à 20 kHz (sans les atténuer) et de couper parfaitement les fréquences supérieures à 20 kHz, en pratique une [bande de transition](https://en.wikipedia.org/wiki/Transition_band) dans laquelle les fréquences sont partiellement atténuées est nécessaire. Plus la bande de transition est large, plus il est facile et économique de faire un [filtre anti-aliasing](https://en.wikipedia.org/wiki/Anti-aliasing_filter). Le taux d'échantillonage 44.1 kHz laisse une bande de transition de 2.05 kHz.
 
-<div class="note">
-<p><strong>Note :</strong> <strong>44,100 <a href="https://en.wikipedia.org/wiki/Hertz">Hz</a></strong> (que l'on peut aussi écrire <strong>44.1 kHz</strong>) est un <a href="https://en.wikipedia.org/wiki/Sampling_frequency">taux d'échantillonage</a> couramment utilisé. Pourquoi 44.1kHz ?<br>
- <br>
- D'abord, parce ce que le <a href="https://en.wikipedia.org/wiki/Hearing_range">champ auditif</a> qui peut être perçu par des oreilles humaines se situe à peu près entre 20 Hz et 20,000 Hz, et que selon le <a href="https://en.wikipedia.org/wiki/Nyquist%E2%80%93Shannon_sampling_theorem">théorème d'échantillonage de Nyquist–Shannon</a> la fréquence d'échantillonage doit être supérieure à deux fois la fréquence maximum que l'on souhaite reproduire; le taux d'échantillonage doit donc être supérieur à 40 kHz.<br>
- <br>
- De plus, le signal doit être traité par un <a href="https://en.wikipedia.org/wiki/Low-pass_filter">filtre passe-bas</a> avant d'être échantilloné, afin d'éviter le phénomène d'<a href="https://en.wikipedia.org/wiki/Aliasing">aliasing</a>, et, si en théorie un  filtre passe-bas idéal devrait être capable de laisser passer les fréquences inférieures à 20 kHz (sans les atténuer) et de couper parfaitement les fréquences supérieures à 20 kHz, en pratique une <a href="https://en.wikipedia.org/wiki/Transition_band">bande de transition</a> dans laquelle les fréquences sont partiellement atténuées est nécessaire. Plus la bande de transition est large, plus il est facile et économique de faire un <a href="https://en.wikipedia.org/wiki/Anti-aliasing_filter">filtre anti-aliasing</a>. Le taux d'échantillonage 44.1 kHz laisse une bande de transition de 2.05 kHz.</p>
-</div>
+Ce code génère une mémoire tampon stéréo (deux canaux) qui, lorsqu'elle est lue dans un AudioContext à 44100Hz (configuration répandue, la plupart des cartes sons tournant à cette fréquence), dure 0.5 secondes: 22050 trames / 44100Hz = 0.5 secondes.
 
-<p>Ce code génère une mémoire tampon stéréo (deux canaux) qui, lorsqu'elle est lue dans un AudioContext à 44100Hz (configuration répandue, la plupart des cartes sons tournant à cette fréquence), dure 0.5 secondes: 22050 trames / 44100Hz = 0.5 secondes.</p>
+```js
+var contexte = new AudioContext();
+var memoireTampon = context.createBuffer(1, 22050, 22050);
+```
 
-<pre class="brush: js">var contexte = new AudioContext();
-var memoireTampon = context.createBuffer(1, 22050, 22050);</pre>
+Ce code génère une mémoire tampon mono (un seul canal) qui, lorsqu'elle est lue dans un AudioContext à 44100Hzz, est automatiquement \*rééchantillonnée\* à 44100Hz (et par conséquent produit 44100 trames), et dure 1.0 seconde: 44100 frames / 44100Hz = 1 seconde.
 
-<p>Ce code génère une mémoire tampon mono (un seul canal) qui, lorsqu'elle est lue dans un AudioContext à 44100Hzz, est automatiquement *rééchantillonnée* à 44100Hz (et par conséquent produit 44100 trames), et dure 1.0 seconde: 44100 frames / 44100Hz = 1 seconde.</p>
+> **Note :** le rééchantillonnage audio est très similaire à la redimension d'une image : imaginons que vous ayiez une image de 16 x 16, mais que vous vouliez remplir une surface de 32x32: vous la redimensionnez (rééchantillonnez). Le résultat est de qualité inférieure (il peut être flou ou crénelé, en fonction de l'algorithme de redimensionnement), mais cela fonctionne, et l'image redimensionnée prend moins de place que l'originale. C'est la même chose pour le rééchantillonnage audio — vous gagnez de la place, mais en pratique il sera difficle de reproduire correctement des contenus de haute fréquence (c'est-à-dire des sons aigus).
 
-<div class="note">
-<p><strong>Note :</strong> le rééchantillonnage audio est très similaire à la redimension d'une image : imaginons que vous ayiez une image de 16 x 16, mais que vous vouliez remplir une surface de 32x32: vous la redimensionnez (rééchantillonnez). Le résultat est de qualité inférieure (il peut être flou ou crénelé, en fonction de l'algorithme de redimensionnement), mais cela fonctionne, et l'image redimensionnée prend moins de place que l'originale. C'est la même chose pour le rééchantillonnage audio — vous gagnez de la place, mais en pratique il sera difficle de reproduire correctement des contenus de haute fréquence (c'est-à-dire des sons aigus).</p>
-</div>
+### Mémoire tampon linéaire ou entrelacée
 
-<h3 id="Mémoire_tampon_linéaire_ou_entrelacée">Mémoire tampon linéaire ou entrelacée</h3>
+La Web Audio API utilise un format de mémoire tampon linéaire : les canaux gauche et droite sont stockés de la façon suivante :
 
-<p>La Web Audio API utilise un format de mémoire tampon linéaire : les canaux gauche et droite sont stockés de la façon suivante :</p>
+    LLLLLLLLLLLLLLLLRRRRRRRRRRRRRRRR (pour un buffer de 16 trames)
 
-<pre>LLLLLLLLLLLLLLLLRRRRRRRRRRRRRRRR (pour un buffer de 16 trames)</pre>
+C'est assez courant dans le traitement audio, car cela permet de traiter facilement chaque canal de façon indépendante.
 
-<p>C'est assez courant dans le traitement audio, car cela permet de traiter facilement chaque canal de façon indépendante.</p>
+L'alternative est d'utiliser un format entrelacé:
 
-<p>L'alternative est d'utiliser un format entrelacé:</p>
+    LRLRLRLRLRLRLRLRLRLRLRLRLRLRLRLR (pour un buffer de 16 trames)
 
-<pre>LRLRLRLRLRLRLRLRLRLRLRLRLRLRLRLR (pour un buffer de 16 trames)</pre>
+Ce format est communément utilisé pour stocker et lire du son avec très peu de traitement, comme par exemple pour un flux de  MP3 décodé.
 
-<p>Ce format est communément utilisé pour stocker et lire du son avec très peu de traitement, comme par exemple pour un flux de  MP3 décodé.<br>
- <br>
- La Web Audio API expose *uniquement* des buffer linéaires, car elle est faite pour le traitement du son. Elle fonctionne en linéaire, mais convertit les données au format entrelacé au moment de les envoyer à la carte son pour qu'elles soient jouées. A l'inverse, lorsqu'un MP3 est décodé, le format d'origine entrelacé est converti en linéaire pour le traitement.</p>
+La Web Audio API expose \*uniquement\* des buffer linéaires, car elle est faite pour le traitement du son. Elle fonctionne en linéaire, mais convertit les données au format entrelacé au moment de les envoyer à la carte son pour qu'elles soient jouées. A l'inverse, lorsqu'un MP3 est décodé, le format d'origine entrelacé est converti en linéaire pour le traitement.
 
-<h2 id="Canaux_audio">Canaux audio</h2>
+## Canaux audio
 
-<p>Une mémoire tampon audio peut contenir différents nombres de canaux, depuis les configurations simple mono (un seul canal) ou stéréo (canal gauche et canal droit) en allant jusquà des configurations plus complexe comme le quad ou le 5.1, pour lesquels chaque canal contient plusieurs échantillons de sons, ce qui permet une expérience sonore plus riche. Les canaux sont généralement représentés par les abbréviations standard  détaillées dans le tableau ci-après :</p>
+Une mémoire tampon audio peut contenir différents nombres de canaux, depuis les configurations simple mono (un seul canal) ou stéréo (canal gauche et canal droit) en allant jusquà des configurations plus complexe comme le quad ou le 5.1, pour lesquels chaque canal contient plusieurs échantillons de sons, ce qui permet une expérience sonore plus riche. Les canaux sont généralement représentés par les abbréviations standard  détaillées dans le tableau ci-après :
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <td><em>Mono</em></td>
-   <td><code>0: M: mono</code></td>
-  </tr>
-  <tr>
-   <td><em>Stereo</em></td>
-   <td><code>0: L: gauche<br>
-    1: R: droit</code></td>
-  </tr>
-  <tr>
-   <td><em>Quad</em></td>
-   <td><code>0: L: gauche<br>
-    1: R: droit<br>
-    2: SL: surround gauche<br>
-    3: SR: surround droit</code></td>
-  </tr>
-  <tr>
-   <td><em>5.1</em></td>
-   <td><code>0: L: gauche<br>
-    1: R: droit<br>
-    2: C: centre<br>
-    3: LFE: subwoofer<br>
-    4: SL: surround gauche<br>
-    5: SR: surround droit</code></td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <td><em>Mono</em></td>
+      <td><code>0: M: mono</code></td>
+    </tr>
+    <tr>
+      <td><em>Stereo</em></td>
+      <td>
+        <code>0: L: gauche<br />1: R: droit</code>
+      </td>
+    </tr>
+    <tr>
+      <td><em>Quad</em></td>
+      <td>
+        <code
+          >0: L: gauche<br />1: R: droit<br />2: SL: surround gauche<br />3: SR:
+          surround droit</code
+        >
+      </td>
+    </tr>
+    <tr>
+      <td><em>5.1</em></td>
+      <td>
+        <code
+          >0: L: gauche<br />1: R: droit<br />2: C: centre<br />3: LFE:
+          subwoofer<br />4: SL: surround gauche<br />5: SR: surround droit</code
+        >
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h3 id="Conversion_ascendante_et_descendante">Conversion ascendante et descendante</h3>
+### Conversion ascendante et descendante
 
-<p>Lorsque le nombre de canaux n'est pas le même en entrée et en sortie, on effectue une conversion ascendante ou descendante selon les règles suivantes. Cela peut être plus ou moins controllé en assignant la valeur <code>speakers</code> ou <code>discrete</code> à la propriété {{domxref("AudioNode.channelInterpretation")}} .</p>
+Lorsque le nombre de canaux n'est pas le même en entrée et en sortie, on effectue une conversion ascendante ou descendante selon les règles suivantes. Cela peut être plus ou moins controllé en assignant la valeur `speakers` ou `discrete` à la propriété {{domxref("AudioNode.channelInterpretation")}} .
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th scope="row">Interprétation</th>
-   <th scope="col">Canaux d'entrée</th>
-   <th scope="col">Canaux de sortie</th>
-   <th scope="col">Règles de conversion</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <th colspan="1" rowspan="13" scope="row"><code>speakers</code></th>
-   <td><code>1</code> <em>(Mono)</em></td>
-   <td><code>2</code> <em>(Stéréo)</em></td>
-   <td><em>Conversion ascendante de mono vers stéréo</em>.<br>
-    Le canal d'entrée <code>M</code> est utilisé pour les deux canaux de sortie (<code>L</code> et <code>R</code>).<br>
-    <code>output.L = input.M<br>
-    output.R = input.M</code></td>
-  </tr>
-  <tr>
-   <td><code>1</code> <em>(Mono)</em></td>
-   <td><code>4</code> <em>(Quad)</em></td>
-   <td><em>Conversion ascendante de mono vers quad.</em><br>
-    Le canal d'entrée <code>M</code> est utilisé pour les canaux de sortie autres que surround (<code>L</code> et <code>R</code>). Les canaux de sortie surround (<code>SL</code> et <code>SR</code>) sont silencieux.<br>
-    <code>output.L = input.M<br>
-    output.R = input.M<br>
-    output.SL = 0<br>
-    output.SR = 0</code></td>
-  </tr>
-  <tr>
-   <td><code>1</code> <em>(Mono)</em></td>
-   <td><code>6</code> <em>(5.1)</em></td>
-   <td><em>Conversion ascendante de mono vers 5.1.</em><br>
-    Le canal d'entrée <code>M</code> est utilisé pour le canal de sortie central (<code>C</code>). Tous les autres canaux (<code>L</code>, <code>R</code>, <code>LFE</code>, <code>SL</code>, et <code>SR</code>) sont silencieux.<br>
-    <code>output.L = 0<br>
-    output.R = 0</code><br>
-    <code>output.C = input.M<br>
-    output.LFE = 0<br>
-    output.SL = 0<br>
-    output.SR = 0</code></td>
-  </tr>
-  <tr>
-   <td><code>2</code> <em>(Stéréo)</em></td>
-   <td><code>1</code> <em>(Mono)</em></td>
-   <td><em>Conversion descendante de stéréo vers mono</em>.<br>
-    Les deux canaux d'entrée (<code>L</code> et <code>R</code>) sont combinées pour produire l'unique canal de sortie (<code>M</code>).<br>
-    <code>output.M = 0.5 * (input.L + input.R)</code></td>
-  </tr>
-  <tr>
-   <td><code>2</code> <em>(Stéréo)</em></td>
-   <td><code>4</code> <em>(Quad)</em></td>
-   <td><em>Conversion ascendante de stéréo vers quad.</em><br>
-    Les canaux d'entrée <code>L</code> et <code>R </code>input sont utilisés pour leurs équivalents respectifs non-surround en sortie (<code>L</code> et <code>R</code>). Les canaux de sortie surround (<code>SL</code> et <code>SR</code>) sont silencieux.<br>
-    <code>output.L = input.L<br>
-    output.R = input.R<br>
-    output.SL = 0<br>
-    output.SR = 0</code></td>
-  </tr>
-  <tr>
-   <td><code>2</code> <em>(Stéréo)</em></td>
-   <td><code>6</code> <em>(5.1)</em></td>
-   <td><em>Conversion ascendante de stéréo vers 5.1.</em><br>
-    Les canaux d'entrée <code>L</code> et <code>R </code>sont utilisés pour leurs équivalents respectifs non-surround en sortie (<code>L</code> et <code>R</code>). Les canaux de sortie surround (<code>SL</code> et <code>SR</code>), ainsi que le canal central (<code>C</code>) et le canal subwoofer (<code>LFE</code>) restent silencieux.<br>
-    <code>output.L = input.L<br>
-    output.R = input.R<br>
-    output.C = 0<br>
-    output.LFE = 0<br>
-    output.SL = 0<br>
-    output.SR = 0</code></td>
-  </tr>
-  <tr>
-   <td><code>4</code> <em>(Quad)</em></td>
-   <td><code>1</code> <em>(Mono)</em></td>
-   <td><em>Conversion descendante de quad vers mono</em>.<br>
-    Les quatre canaux de sortie (<code>L</code>, <code>R</code>, <code>SL</code>, et <code>SR</code>) sont  combinés pour produire l'unique canal de sortie (<code>M</code>).<br>
-    <code>output.M = 0.25 * (input.L + input.R + </code><code>input.SL + input.SR</code><code>)</code></td>
-  </tr>
-  <tr>
-   <td><code>4</code> <em>(Quad)</em></td>
-   <td><code>2</code> <em>(Stéréo)</em></td>
-   <td><em>Conversion descendante de quad vers stéréo</em>.<br>
-    Les deux canaux d'entrée à gauche (<code>L</code> and <code>SL</code>) sont combinés pour produire l'unique canal de sortie à gauche (<code>L</code>). De la même façon, les deux canaux d'entrée à droite (<code>R</code> et <code>SR</code>) sont combinés pour produire l'unique canal de sortie à droite (<code>R</code>).<br>
-    <code>output.L = 0.5 * (input.L + input.SL</code><code>)</code><br>
-    <code>output.R = 0.5 * (input.R + input.SR</code><code>)</code></td>
-  </tr>
-  <tr>
-   <td><code>4</code> <em>(Quad)</em></td>
-   <td><code>6</code> <em>(5.1)</em></td>
-   <td><em>Conversion ascendante de quad vers 5.1.</em><br>
-    Les canaux d'entrée <code>L</code>, <code>R</code>, <code>SL</code>, et <code>SR</code> sont utilisés pour leur canaux de sortie équivalents respectifs (<code>L</code> and <code>R</code>). Le canal central (<code>C</code>) et le canal subwoofer (<code>LFE</code>) restent silencieux.<br>
-    <code>output.L = input.L<br>
-    output.R = input.R<br>
-    output.C = 0<br>
-    output.LFE = 0<br>
-    output.SL = input.SL<br>
-    output.SR = input.SR</code></td>
-  </tr>
-  <tr>
-   <td><code>6</code> <em>(5.1)</em></td>
-   <td><code>1</code> <em>(Mono)</em></td>
-   <td><em>Conversion descendante de 5.1 vers mono.</em><br>
-    Les canaux de gauche (<code>L</code> et <code>SL</code>), de droite (<code>R</code> et <code>SR</code>) et central sont tous mixés ensemble. Les canaux surround sont légèrement atténués et la puissance des canaux latéraux est compensée pour la faire compter comme un seul canal en la multipliant par <code>√2/2</code>. Le canal subwoofer (<code>LFE</code>) est perdu.<br>
-    <code>output.M = 0.7071 * (input.L + input.R) + input.C + 0.5 * (input.SL + input.SR)</code></td>
-  </tr>
-  <tr>
-   <td><code>6</code> <em>(5.1)</em></td>
-   <td><code>2</code> <em>(Stéréo)</em></td>
-   <td><em>Conversion descendante de 5.1 vers stéréo.</em><br>
-    Le canal central (<code>C</code>) est additionné avec chacun des canaux latéraux  (<code>SL</code> et <code>SR</code>) puis combiné avec chacun des canaux latéraux (L et R). Comme il est converti en deux canaux, il est mixé à une puissance inférieure : multiplié par <code>√2/2</code>. Le canal subwoofer (<code>LFE</code>) est perdu.<br>
-    <code>output.L = input.L + 0.7071 * (input.C + input.SL)<br>
-    output.R = input.R </code><code>+ 0.7071 * (input.C + input.SR)</code></td>
-  </tr>
-  <tr>
-   <td><code>6</code> <em>(5.1)</em></td>
-   <td><code>4</code> <em>(Quad)</em></td>
-   <td><em>Conversion descendante de 5.1 vers quad.</em><br>
-    Le canal central (<code>C</code>) est combiné avec les canaux latéraux non-surround (<code>L</code> et <code>R</code>). Comme il est converti en deux canaux, il est mixé à une puissance inférieure : multiplié par <code>√2/2</code>. Les canaux surround restent inchangés. Le canal subwoofer (<code>LFE</code>) est perdu.<br>
-    <code>output.L = input.L + 0.7071 * input.C<br>
-    output.R = input.R + 0.7071 * input.C<br>
-    <code>output.SL = input.SL<br>
-    output.SR = input.SR</code></code></td>
-  </tr>
-  <tr>
-   <td colspan="2" rowspan="1">Autres configurations non-standard</td>
-   <td>Les configurations non-standard sont traitées comme si la propriété <code>channelInterpretation</code> avait la valeur <code>discrete</code>.<br>
-    La spécification autorise explicitement la définition à venir de nouvelles configurations de sortie pour les enceintes. Ce cas de figure  n'est par conséquent pas garanti dans le futur, car le comportement des navigateurs pour un nombre spécifique de canaux pourrait être amené à changer.</td>
-  </tr>
-  <tr>
-   <th colspan="1" rowspan="2" scope="row"><code>discrete</code></th>
-   <td rowspan="1">tout (<code>x</code>)</td>
-   <td rowspan="1">tout (<code>y</code>) pour lequel <code>x&lt;y</code></td>
-   <td><em>Conversion ascendante de canaux discrets.</em><br>
-    Remplit chaque canal de sortie avec son équivalent en entrée, c'est-à-dire le canal qui a le même index. Les canaux de sortie qui n'ont pas d'équivalent en entrée restent silencieux.</td>
-  </tr>
-  <tr>
-   <td rowspan="1">tout (<code>x</code>)</td>
-   <td rowspan="1">tout (<code>y</code>) pour lequel <code>x&gt;y</code></td>
-   <td><em>Conversion descendante de canaux discrets.</em><br>
-    Remplit chaque canal de sortie avec son équivalent en entrée, c'est-à-dire le canal qui a le même index. Les canaux d'entrée qui n'ont pas d'équivalent en sortie sont perdus.</td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th scope="row">Interprétation</th>
+      <th scope="col">Canaux d'entrée</th>
+      <th scope="col">Canaux de sortie</th>
+      <th scope="col">Règles de conversion</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th colspan="1" rowspan="13" scope="row"><code>speakers</code></th>
+      <td><code>1</code> <em>(Mono)</em></td>
+      <td><code>2</code> <em>(Stéréo)</em></td>
+      <td>
+        <em>Conversion ascendante de mono vers stéréo</em>.<br />Le canal
+        d'entrée <code>M</code> est utilisé pour les deux canaux de sortie
+        (<code>L</code> et <code>R</code>).<br /><code
+          >output.L = input.M<br />output.R = input.M</code
+        >
+      </td>
+    </tr>
+    <tr>
+      <td><code>1</code> <em>(Mono)</em></td>
+      <td><code>4</code> <em>(Quad)</em></td>
+      <td>
+        <em>Conversion ascendante de mono vers quad.</em><br />Le canal d'entrée
+        <code>M</code> est utilisé pour les canaux de sortie autres que surround
+        (<code>L</code> et <code>R</code>). Les canaux de sortie surround (<code
+          >SL</code
+        >
+        et <code>SR</code>) sont silencieux.<br /><code
+          >output.L = input.M<br />output.R = input.M<br />output.SL = 0<br />output.SR
+          = 0</code
+        >
+      </td>
+    </tr>
+    <tr>
+      <td><code>1</code> <em>(Mono)</em></td>
+      <td><code>6</code> <em>(5.1)</em></td>
+      <td>
+        <em>Conversion ascendante de mono vers 5.1.</em><br />Le canal d'entrée
+        <code>M</code> est utilisé pour le canal de sortie central
+        (<code>C</code>). Tous les autres canaux (<code>L</code>,
+        <code>R</code>, <code>LFE</code>, <code>SL</code>, et <code>SR</code>)
+        sont silencieux.<br /><code>output.L = 0<br />output.R = 0</code
+        ><br /><code
+          >output.C = input.M<br />output.LFE = 0<br />output.SL = 0<br />output.SR
+          = 0</code
+        >
+      </td>
+    </tr>
+    <tr>
+      <td><code>2</code> <em>(Stéréo)</em></td>
+      <td><code>1</code> <em>(Mono)</em></td>
+      <td>
+        <em>Conversion descendante de stéréo vers mono</em>.<br />Les deux
+        canaux d'entrée (<code>L</code> et <code>R</code>) sont combinées pour
+        produire l'unique canal de sortie (<code>M</code>).<br /><code
+          >output.M = 0.5 * (input.L + input.R)</code
+        >
+      </td>
+    </tr>
+    <tr>
+      <td><code>2</code> <em>(Stéréo)</em></td>
+      <td><code>4</code> <em>(Quad)</em></td>
+      <td>
+        <em>Conversion ascendante de stéréo vers quad.</em><br />Les canaux
+        d'entrée <code>L</code> et <code>R </code>input sont utilisés pour leurs
+        équivalents respectifs non-surround en sortie (<code>L</code> et
+        <code>R</code>). Les canaux de sortie surround (<code>SL</code> et
+        <code>SR</code>) sont silencieux.<br /><code
+          >output.L = input.L<br />output.R = input.R<br />output.SL = 0<br />output.SR
+          = 0</code
+        >
+      </td>
+    </tr>
+    <tr>
+      <td><code>2</code> <em>(Stéréo)</em></td>
+      <td><code>6</code> <em>(5.1)</em></td>
+      <td>
+        <em>Conversion ascendante de stéréo vers 5.1.</em><br />Les canaux
+        d'entrée <code>L</code> et <code>R </code>sont utilisés pour leurs
+        équivalents respectifs non-surround en sortie (<code>L</code> et
+        <code>R</code>). Les canaux de sortie surround (<code>SL</code> et
+        <code>SR</code>), ainsi que le canal central (<code>C</code>) et le
+        canal subwoofer (<code>LFE</code>) restent silencieux.<br /><code
+          >output.L = input.L<br />output.R = input.R<br />output.C = 0<br />output.LFE
+          = 0<br />output.SL = 0<br />output.SR = 0</code
+        >
+      </td>
+    </tr>
+    <tr>
+      <td><code>4</code> <em>(Quad)</em></td>
+      <td><code>1</code> <em>(Mono)</em></td>
+      <td>
+        <em>Conversion descendante de quad vers mono</em>.<br />Les quatre
+        canaux de sortie (<code>L</code>, <code>R</code>, <code>SL</code>, et
+        <code>SR</code>) sont  combinés pour produire l'unique canal de sortie
+        (<code>M</code>).<br /><code
+          >output.M = 0.25 * (input.L + input.R + </code
+        ><code>input.SL + input.SR</code><code>)</code>
+      </td>
+    </tr>
+    <tr>
+      <td><code>4</code> <em>(Quad)</em></td>
+      <td><code>2</code> <em>(Stéréo)</em></td>
+      <td>
+        <em>Conversion descendante de quad vers stéréo</em>.<br />Les deux
+        canaux d'entrée à gauche (<code>L</code> and <code>SL</code>) sont
+        combinés pour produire l'unique canal de sortie à gauche
+        (<code>L</code>). De la même façon, les deux canaux d'entrée à droite
+        (<code>R</code> et <code>SR</code>) sont combinés pour produire l'unique
+        canal de sortie à droite (<code>R</code>).<br /><code
+          >output.L = 0.5 * (input.L + input.SL</code
+        ><code>)</code><br /><code>output.R = 0.5 * (input.R + input.SR</code
+        ><code>)</code>
+      </td>
+    </tr>
+    <tr>
+      <td><code>4</code> <em>(Quad)</em></td>
+      <td><code>6</code> <em>(5.1)</em></td>
+      <td>
+        <em>Conversion ascendante de quad vers 5.1.</em><br />Les canaux
+        d'entrée <code>L</code>, <code>R</code>, <code>SL</code>, et
+        <code>SR</code> sont utilisés pour leur canaux de sortie équivalents
+        respectifs (<code>L</code> and <code>R</code>). Le canal central
+        (<code>C</code>) et le canal subwoofer (<code>LFE</code>) restent
+        silencieux.<br /><code
+          >output.L = input.L<br />output.R = input.R<br />output.C = 0<br />output.LFE
+          = 0<br />output.SL = input.SL<br />output.SR = input.SR</code
+        >
+      </td>
+    </tr>
+    <tr>
+      <td><code>6</code> <em>(5.1)</em></td>
+      <td><code>1</code> <em>(Mono)</em></td>
+      <td>
+        <em>Conversion descendante de 5.1 vers mono.</em><br />Les canaux de
+        gauche (<code>L</code> et <code>SL</code>), de droite (<code>R</code> et
+        <code>SR</code>) et central sont tous mixés ensemble. Les canaux
+        surround sont légèrement atténués et la puissance des canaux latéraux
+        est compensée pour la faire compter comme un seul canal en la
+        multipliant par <code>√2/2</code>. Le canal subwoofer (<code>LFE</code>)
+        est perdu.<br /><code
+          >output.M = 0.7071 * (input.L + input.R) + input.C + 0.5 * (input.SL +
+          input.SR)</code
+        >
+      </td>
+    </tr>
+    <tr>
+      <td><code>6</code> <em>(5.1)</em></td>
+      <td><code>2</code> <em>(Stéréo)</em></td>
+      <td>
+        <em>Conversion descendante de 5.1 vers stéréo.</em><br />Le canal
+        central (<code>C</code>) est additionné avec chacun des canaux latéraux 
+        (<code>SL</code> et <code>SR</code>) puis combiné avec chacun des canaux
+        latéraux (L et R). Comme il est converti en deux canaux, il est mixé à
+        une puissance inférieure : multiplié par <code>√2/2</code>. Le canal
+        subwoofer (<code>LFE</code>) est perdu.<br /><code
+          >output.L = input.L + 0.7071 * (input.C + input.SL)<br />output.R =
+          input.R </code
+        ><code>+ 0.7071 * (input.C + input.SR)</code>
+      </td>
+    </tr>
+    <tr>
+      <td><code>6</code> <em>(5.1)</em></td>
+      <td><code>4</code> <em>(Quad)</em></td>
+      <td>
+        <em>Conversion descendante de 5.1 vers quad.</em><br />Le canal central
+        (<code>C</code>) est combiné avec les canaux latéraux non-surround
+        (<code>L</code> et <code>R</code>). Comme il est converti en deux
+        canaux, il est mixé à une puissance inférieure : multiplié par
+        <code>√2/2</code>. Les canaux surround restent inchangés. Le canal
+        subwoofer (<code>LFE</code>) est perdu.<br /><code
+          >output.L = input.L + 0.7071 * input.C<br />output.R = input.R +
+          0.7071 * input.C<br /><code
+            >output.SL = input.SL<br />output.SR = input.SR</code
+          ></code
+        >
+      </td>
+    </tr>
+    <tr>
+      <td colspan="2" rowspan="1">Autres configurations non-standard</td>
+      <td>
+        Les configurations non-standard sont traitées comme si la propriété
+        <code>channelInterpretation</code> avait la valeur
+        <code>discrete</code>.<br />La spécification autorise explicitement la
+        définition à venir de nouvelles configurations de sortie pour les
+        enceintes. Ce cas de figure  n'est par conséquent pas garanti dans le
+        futur, car le comportement des navigateurs pour un nombre spécifique de
+        canaux pourrait être amené à changer.
+      </td>
+    </tr>
+    <tr>
+      <th colspan="1" rowspan="2" scope="row"><code>discrete</code></th>
+      <td rowspan="1">tout (<code>x</code>)</td>
+      <td rowspan="1">
+        tout (<code>y</code>) pour lequel <code>x&#x3C;y</code>
+      </td>
+      <td>
+        <em>Conversion ascendante de canaux discrets.</em><br />Remplit chaque
+        canal de sortie avec son équivalent en entrée, c'est-à-dire le canal qui
+        a le même index. Les canaux de sortie qui n'ont pas d'équivalent en
+        entrée restent silencieux.
+      </td>
+    </tr>
+    <tr>
+      <td rowspan="1">tout (<code>x</code>)</td>
+      <td rowspan="1">tout (<code>y</code>) pour lequel <code>x>y</code></td>
+      <td>
+        <em>Conversion descendante de canaux discrets.</em><br />Remplit chaque
+        canal de sortie avec son équivalent en entrée, c'est-à-dire le canal qui
+        a le même index. Les canaux d'entrée qui n'ont pas d'équivalent en
+        sortie sont perdus.
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Visualisations">Visualisations</h2>
+## Visualisations
 
-<p>Une visualisation audio consiste en général à utiliser un flux de données audio dans le temps (souvent des informations de gain ou de fréquence) pour générer un affichage graphique (comme un graphe). La Web Audio API possède un {{domxref("AnalyserNode")}} qui n'altère pas le signal audio qui le traverse, permettant de générer des données qui peuvent être utilisées par une technologie de visualisation telle que {{htmlelement("canvas")}}.</p>
+Une visualisation audio consiste en général à utiliser un flux de données audio dans le temps (souvent des informations de gain ou de fréquence) pour générer un affichage graphique (comme un graphe). La Web Audio API possède un {{domxref("AnalyserNode")}} qui n'altère pas le signal audio qui le traverse, permettant de générer des données qui peuvent être utilisées par une technologie de visualisation telle que {{htmlelement("canvas")}}.
 
-<p><img alt="Le noeud permet de récupérer la fréquence et le domaine temporel en utilisant FFT, et ce sans modifier le flux audio" src="fttaudiodata.svg"></p>
+![Le noeud permet de récupérer la fréquence et le domaine temporel en utilisant FFT, et ce sans modifier le flux audio](fttaudiodata.svg)
 
-<p>On peut accéder aux données en utilisant les méthodes suivantes:</p>
+On peut accéder aux données en utilisant les méthodes suivantes:
 
-<dl>
- <dt>{{domxref("AnalyserNode.getFloatFrequencyData()")}}</dt>
- <dd>Copie les données de fréquence dans le tableau {{domxref("Float32Array")}} passé en argument.</dd>
-</dl>
+- {{domxref("AnalyserNode.getFloatFrequencyData()")}}
+  - : Copie les données de fréquence dans le tableau {{domxref("Float32Array")}} passé en argument.
 
-<dl>
- <dt>{{domxref("AnalyserNode.getByteFrequencyData()")}}</dt>
- <dd>Copies les données de fréquence dans le tableau d'octets non signés {{domxref("Uint8Array")}} passé en argument.</dd>
-</dl>
+<!---->
 
-<dl>
- <dt>{{domxref("AnalyserNode.getFloatTimeDomainData()")}}</dt>
- <dd>Copie les données de l'onde de forme, ou domaine temporel, dans le {{domxref("Float32Array")}} passé en argument.</dd>
- <dt>{{domxref("AnalyserNode.getByteTimeDomainData()")}}</dt>
- <dd>Copie les données de l'onde de forme, ou domaine temporel, dans le tableau d'octets non signés {{domxref("Uint8Array")}} passé en argument.</dd>
-</dl>
+- {{domxref("AnalyserNode.getByteFrequencyData()")}}
+  - : Copies les données de fréquence dans le tableau d'octets non signés {{domxref("Uint8Array")}} passé en argument.
 
-<div class="note">
-<p><strong>Note :</strong> Pour plus d'informations, voir notre article <a href="/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API">Visualizations with Web Audio API</a>.</p>
-</div>
+<!---->
 
-<h2 id="Spatialisations">Spatialisations</h2>
+- {{domxref("AnalyserNode.getFloatTimeDomainData()")}}
+  - : Copie les données de l'onde de forme, ou domaine temporel, dans le {{domxref("Float32Array")}} passé en argument.
+- {{domxref("AnalyserNode.getByteTimeDomainData()")}}
+  - : Copie les données de l'onde de forme, ou domaine temporel, dans le tableau d'octets non signés {{domxref("Uint8Array")}} passé en argument.
 
-<div>
-<p>Une spatialisation audio (gérée par les noeuds {{domxref("PannerNode")}} et {{domxref("AudioListener")}} dans la Web Audio API) permet de modéliser la position et le comportement d'un signal audio situé dans l'espace, ainsi que l'auditeur qui perçoit ce signal.</p>
+> **Note :** Pour plus d'informations, voir notre article [Visualizations with Web Audio API](/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API).
 
-<p>La position du panoramique est décrite avec des coodonnées cartésiennes selon la règle de la main droite, son mouvement à l'aide d'un vecteur de vélocité (nécessaire pour la création d'effets Doppler) et sa direction avec un cone de direction. Le cone peut être très large, par exemple dans le cas de sources omnidirectionnelles.</p>
-</div>
+## Spatialisations
 
-<p><img alt="Le PannerNode donne la position dans l'espace, la vélocité et la direction d'un signal donné" src="pannernode.svg"></p>
+Une spatialisation audio (gérée par les noeuds {{domxref("PannerNode")}} et {{domxref("AudioListener")}} dans la Web Audio API) permet de modéliser la position et le comportement d'un signal audio situé dans l'espace, ainsi que l'auditeur qui perçoit ce signal.
 
-<div>
-<p>La position de l'auditeur est décrite avec des coodonnées cartésiennes selon la règle de la main droite,  son mouvement à l'aide d'un vecteur de vélocité et la direction vers laquelle elle pointe en utilisant deux vecteurs de direction : haut et face. Ceux-ci définissent respectivement la direction vers laquelle pointent le haut de la tête et le bout du nez de l'auditeur, et forment un angle droit entre eux.</p>
-</div>
+La position du panoramique est décrite avec des coodonnées cartésiennes selon la règle de la main droite, son mouvement à l'aide d'un vecteur de vélocité (nécessaire pour la création d'effets Doppler) et sa direction avec un cone de direction. Le cone peut être très large, par exemple dans le cas de sources omnidirectionnelles.
 
-<p><img alt="On voit la position d'un auditeur, ainsi que les vecteurs de direction haut et de face qui forment un angle de 90°" src="listener.svg"></p>
+![Le PannerNode donne la position dans l'espace, la vélocité et la direction d'un signal donné](pannernode.svg)
 
-<div class="note">
-<p><strong>Note :</strong> For more information, see our <a href="/en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics">Web audio spatialization basics</a> article.</p>
-</div>
+La position de l'auditeur est décrite avec des coodonnées cartésiennes selon la règle de la main droite,  son mouvement à l'aide d'un vecteur de vélocité et la direction vers laquelle elle pointe en utilisant deux vecteurs de direction : haut et face. Ceux-ci définissent respectivement la direction vers laquelle pointent le haut de la tête et le bout du nez de l'auditeur, et forment un angle droit entre eux.
 
-<h2 id="Fan-in_et_Fan-out">Fan-in et Fan-out</h2>
+![On voit la position d'un auditeur, ainsi que les vecteurs de direction haut et de face qui forment un angle de 90°](listener.svg)
 
-<p>En audio, <strong>fan-in</strong> désigne le processus par lequel un {{domxref("ChannelMergerNode")}} prend une série d'entrées mono entrée et restitue un seul signal multi-canaux :</p>
+> **Note :** For more information, see our [Web audio spatialization basics](/en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics) article.
 
-<p><img alt="" src="fanin.svg"></p>
+## Fan-in et Fan-out
 
-<p><strong>Fan-out</strong> désigne le processus opposé, par lequel un {{domxref("ChannelSplitterNode")}} prend une source multi-canaux en entrée et restitue plusieurs signaux mono en sortie:</p>
+En audio, **fan-in** désigne le processus par lequel un {{domxref("ChannelMergerNode")}} prend une série d'entrées mono entrée et restitue un seul signal multi-canaux :
 
-<p><img alt="" src="fanout.svg"></p>
+![](fanin.svg)
+
+**Fan-out** désigne le processus opposé, par lequel un {{domxref("ChannelSplitterNode")}} prend une source multi-canaux en entrée et restitue plusieurs signaux mono en sortie:
+
+![](fanout.svg)
diff --git a/files/fr/web/api/web_audio_api/index.md b/files/fr/web/api/web_audio_api/index.md
index 087d05a380..4a873b52ac 100644
--- a/files/fr/web/api/web_audio_api/index.md
+++ b/files/fr/web/api/web_audio_api/index.md
@@ -3,186 +3,157 @@ title: Web Audio API
 slug: Web/API/Web_Audio_API
 translation_of: Web/API/Web_Audio_API
 ---
-<div>
-<p>La Web Audio API propose un système puissant et flexible pour contrôler les données audio sur internet. Elle permet notamment de sélectionner des sources audio (microphone, flux media), d'y ajouter des effets, de créer des visualisations, d'appliquer des effets de spatialisation (comme la balance), etc.</p>
-</div>
-
-<h2 id="Concepts_et_usages">Concepts et usages</h2>
-
-<p>La Web Audio API effectue des opérations dans un <strong>contexte audio</strong>; elle a été conçue pour supporter le <strong>routing modulaire</strong>. Les opérations audio basiques sont réalisées via des <strong>noeuds audio</strong> reliés entre eux pour former un <strong>graphe de routage audio</strong>. Plusieurs sources - avec différents types d'agencements de canaux - peuvent être supportées, même dans un seul contexte. Ce design modulaire et flexible permet de créer des fonctions audio complexes avec des effets dynamiques.</p>
-
-<p>Les noeuds audio sont reliés au niveau de leurs entrées et sorties, formant des chaînes ou des réseaux simples. Il peut y avoir une ou plusieurs sources. Les sources fournissent des tableaux d'intensités sonores (échantillons), souvent plusieurs dizaines de milliers par seconde. Ceux-ci peuvent être calculées mathématiquement (avec un {{domxref("OscillatorNode")}}), ou peuvent provenir de fichiers sons ou vidéos (comme {{domxref("AudioBufferSourceNode")}} ou {{domxref("MediaElementAudioSourceNode")}}) ou de flux audio ({{domxref("MediaStreamAudioSourceNode")}}). En réalité, les fichiers sons sont eux-même des enregistrements d'intensités sonores, qui viennent de microphones ou d'instruments électriques, et sont mixés dans une seule onde complexe.</p>
-
-<p>Les sorties de ces noeuds peuvent être liées aux entrées d'autres noeuds, qui mixent ces flux d'échantillons sonores ou les séparent en différents flux. Une modification courante est la multiplications des échantillons par une valeur afin d'en augmenter ou diminuer le volume sonore (comme c'est le cas pour le {{domxref("GainNode")}}). Le son est ensuite lié à une destination ({{domxref("AudioContext.destination")}}), qui l'envoie aux enceintes ou au casque audio. Cette dernière connexion n'est utile que si le son doit être entendu.<br>
- <br>
- Un processus de développement typique avec web audio ressemble à ceci :</p>
-
-<ul>
- <li>Création d'un contexte audio</li>
- <li>Dans ce contexte, création des sources — comme <code>&lt;audio&gt;</code>, oscillator, stream</li>
- <li>Création de noeuds d'effets, comme la réverbération, les filtres biquad, la balance, le compresseur</li>
- <li>Choix de la sortie audio (appelée destination), par exemple les enceintes du système</li>
- <li>Connection des sources aux effets, et des effets à la destination</li>
-</ul>
-
-<p><img alt="Un diagramme de boîte avec une boîte extérieure intitulée contexte audio et trois boîtes à l'intérieur intitulées source, effets et destination. Les trois boîtes intérieures ont des flèches qui pointent de la gauche vers la droite, indiquant le sens du flux de l'information audio." src="audio-context_.png"></p>
-
-<p>Le timing est contrôlé avec une grande précision et une latence faible, ce qui permet aux développeurs d'écrire un code qui réagit précisément aux événements et qui est capable de traiter des échantillons précis, même avec un taux d'échantillonnage élevé. Cela permet d'envisager des applications telles que des boîtes à rythme ou des séquenceurs.</p>
-
-<p>La Web Audio API permet également de contrôler la <em>spatialisation</em> du son. En utilisant un système basé sur le modèle <em>émetteur - récepteur, </em>elle permet le contrôle de la balance ainsi que la gestion de l'atténuation du son en fonction de la distance, ou effet doppler, induite par un déplacement de la source sonore (ou de l'auditeur).</p>
-
-<div class="note">
-<p><strong>Note :</strong> Vous pouvez lire d'avantage de détails sur la Web Audio API en vous rendant sur notre article<a href="/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API"> Concepts de base de la Web Audio API</a>.</p>
-</div>
-
-<h2 id="Interface_de_la_Web_Audio_API">Interface de la Web Audio API</h2>
-
-<p>La Web Audio API expose 28 interfaces avec des événements associés, classés selon leur fonction en 9 catégories.</p>
-
-<h3 id="Définition_du_graphe_audio">Définition du graphe audio</h3>
-
-<p>Conteneurs et définitions qui donnent sa forme au graphe audio</p>
-
-<dl>
- <dt>{{domxref("AudioContext")}}</dt>
- <dd>Un objet <strong><code>AudioContext</code></strong> désigne un graphe de traitement audio construit à partir de modules reliés entre eux, chacun représenté par un noeud audio ({{domxref("AudioNode")}}). Le contexte audio contrôle la création des noeuds qu'il contient, ainsi que l'exécution du traitement audio, et du décodage. Il est nécessaire de créer un <code>AudioContext</code> avant de faire quoi que ce soit d'autre, puisque tout se passe dans un contexte.</dd>
- <dt>{{domxref("AudioNode")}}</dt>
- <dd>Un objet <strong><code>AudioNode</code></strong><strong> </strong>est un module de traitement audio, tel qu'une <em>source audio</em> (c'est-à-dire un élément HTML {{HTMLElement("audio")}} ou {{HTMLElement("video")}}), une <em>destination audio</em>, un <em>module de traitement intermédiaire</em> (par exemple un filtre {{domxref("BiquadFilterNode")}}), ou un contrôle du volume {{domxref("GainNode")}}).</dd>
- <dt>{{domxref("AudioParam")}}</dt>
- <dd>Un objet <strong><code>AudioParam</code></strong><strong> </strong>est un paramètre audio, qui est lié à un {{domxref("AudioNode")}}. On peut lui assigner une valeur ou un changement de valeur, que l'on peut programmer à un moment spécifique et/ou selon un motif particulier.</dd>
- <dt>{{event("ended_(Web_Audio)", "ended")}} (event)</dt>
- <dd>L'évènement <code>ended</code> est diffusé lorsque la lecture s'arrête en arrivant à la fin d'un media.</dd>
-</dl>
-
-<h3 id="Définition_des_sources_audio">Définition des sources audio</h3>
-
-<dl>
- <dt>{{domxref("OscillatorNode")}}</dt>
- <dd>Un objet <strong><code>OscillatorNode</code></strong><strong> </strong>est un module de traitement audio qui génère la création d'une onde sinusoïdale d'une certaine fréquence.</dd>
- <dt>{{domxref("AudioBuffer")}}</dt>
- <dd>Un objet <strong><code>AudioBuffer</code></strong> est un petit morceau de contenu audio monté en mémoire. Il peut être créé à partir d'un fichier audio avec la méthode {{ domxref("AudioContext.decodeAudioData()") }}, ou à partir de données brutes en utilisant {{ domxref("AudioContext.createBuffer()") }}. Une fois décodé sous cette forme, la source audio peut être placée dans un {{ domxref("AudioBufferSourceNode") }}.</dd>
- <dt>{{domxref("AudioBufferSourceNode")}}</dt>
- <dd>Un objet <strong><code>AudioBufferSourceNode</code></strong> est une source audio composée de données audio montées en mémoire dans un {{domxref("AudioBuffer")}}. C'est un {{domxref("AudioNode")}} qui se comporte comme une source audio.</dd>
- <dt>{{domxref("MediaElementAudioSourceNode")}}</dt>
- <dd>Un objet <code><strong>MediaElementAudio</strong></code><strong><code>SourceNode</code></strong> est une source audio composée d'un élément  HTML5 {{ htmlelement("audio") }} ou {{ htmlelement("video") }}. C'est un {{domxref("AudioNode")}} qui se comporte comme une source audio.</dd>
- <dt>{{domxref("MediaStreamAudioSourceNode")}}</dt>
- <dd>Un objet <code><strong>MediaStreamAudio</strong></code><strong><code>SourceNode</code></strong> est une source audio composée d'un <a href="/en-US/docs/WebRTC">WebRTC</a> {{domxref("MediaStream")}} (tel qu'une webcam ou un microphone). C'est un {{domxref("AudioNode")}} qui se comporte comme une source audio.</dd>
-</dl>
-
-<h3 id="Définition_des_filtres_d'effets_audio">Définition des filtres d'effets audio</h3>
-
-<dl>
- <dt>{{domxref("BiquadFilterNode")}}</dt>
- <dd>Un objet <strong><code>BiquadFilterNode</code> </strong>est un simple filtre de bas niveau. Il peut s'agir de différents types de filtres, contrôle du volume ou égaliseurs graphiques. Un <code>BiquadFilterNode</code> a toujours exactement une entrée et une sortie.</dd>
- <dt>{{domxref("ConvolverNode")}}</dt>
- <dd>Un objet <code><strong>Convolver</strong></code><strong><code>Node</code></strong><strong> </strong>est un {{domxref("AudioNode")}} qui exécute une circonvolution linéaire sur un AudioBuffer donné, souvent utilisé pour créer un effet de réverbération.</dd>
- <dt>{{domxref("DelayNode")}}</dt>
- <dd>Un objet <strong><code>DelayNode</code></strong><strong> </strong>est une ligne à retard numérique, c'est-à-dire un module de traitement automatique qui provoque un délai entre l'arrivée du son en entrée et sa propagation en sortie.</dd>
- <dt>{{domxref("DynamicsCompressorNode")}}</dt>
- <dd>Un objet <strong><code>DynamicsCompressorNode</code></strong> permet un effet de compression, qui réduit le volume des parties les plus fortes du signal de façon à éviter les effets de clipping et la distortion qui peuvent se produire lorsque des sons multiples sont diffusés simultanément.</dd>
- <dt>{{domxref("GainNode")}}</dt>
- <dd>Un objet <strong><code>GainNode</code></strong><strong> </strong> représente une modification du volume sonore. C'est un module de traitement audio qui provoque l'application d'un <em>gain</em> aux données récupérées en entrée avant leur propagation vers la sortie.</dd>
- <dt>{{domxref("WaveShaperNode")}}</dt>
- <dd>Un objet <strong><code>WaveShaperNode</code></strong> représente une distortion non linéaire. C'est un {{domxref("AudioNode")}} qui utilise une courbe pour appliquer au signal une distortion de mise en forme des ondes. En dehors de l'effet de distortion évident, il est souvent utilisé pour donner un caractère plus chaleureux au son. </dd>
- <dt>{{domxref("PeriodicWave")}}</dt>
- <dd>Un objet {{domxref("PeriodicWave")}} est utilisé pour définir une forme d'onde périodique qui peut être utilisée pour façonner la sortie d'un {{ domxref("OscillatorNode") }}.</dd>
-</dl>
-
-<h3 id="Définition_des_destinations_audio">Définition des destinations audio</h3>
-
-<p>Une fois que le signal audio a été traité, ces interfaces définissent sa destination.</p>
-
-<dl>
- <dt>{{domxref("AudioDestinationNode")}}</dt>
- <dd>Un noeud <strong><code>AudioDestinationNode</code></strong> représente la destination finale d'une source audio source dans un contexte donné — en général les enceintes du matériel.</dd>
- <dt>{{domxref("MediaStreamAudioDestinationNode")}}</dt>
- <dd>Un noeud <code><strong>MediaStreamAudio</strong></code><strong><code>DestinationNode</code></strong> représente une destination audio constituée d'un {{domxref("MediaStream")}} <a href="/en-US/docs/WebRTC">WebRTC</a> à une seule piste <code>AudioMediaStreamTrack</code>; il peut être utilisé de façon similaire à un {{domxref("MediaStream")}} obtenu avec {{ domxref("Navigator.getUserMedia") }}. C'est un {{domxref("AudioNode")}} qui se comporte comme une destination audio.</dd>
-</dl>
-
-<h3 id="Analyse_des_données_et_visualisation">Analyse des données et visualisation</h3>
-
-<dl>
- <dt>{{domxref("AnalyserNode")}}</dt>
- <dd>Un objet <strong><code>AnalyserNode</code></strong> fournit en temps réel des informations concernant la fréquence et le temps, afin de les analyser et les visualiser.</dd>
-</dl>
-
-<h3 id="Division_et_fusion_des_pistes_audio">Division et fusion des pistes audio</h3>
-
-<dl>
- <dt>{{domxref("ChannelSplitterNode")}}</dt>
- <dd>Un noeud <code><strong>ChannelSplitterNode</strong></code> prend en entrée une source audio et sépare ses différentes pistes en une série de sorties <em>mono</em>.</dd>
- <dt>{{domxref("ChannelMergerNode")}}</dt>
- <dd>Un noeud <code><strong>ChannelMergerNode</strong></code> réunit différentes entrées mono en une seule sortie. Chaque entrée devient une des pistes de la sortie unique.</dd>
-</dl>
-
-<h3 id="Spatialisation_audio">Spatialisation audio</h3>
-
-<dl>
- <dt>{{domxref("AudioListener")}}</dt>
- <dd>Un objet <strong><code>AudioListener</code></strong><strong> </strong>représente la position et l'orientation de l'unique personne écoutant la scene audio utilisée dans la spatialisation audio.</dd>
- <dt>{{domxref("PannerNode")}}</dt>
- <dd>Un noeud <strong><code>PannerNode</code></strong> représente le comportement d'un signal dans l'espace. C'est un module de traitement audio qui décrit sa position avec des coordonnées cartésiennes fondées sur la règle de la main droite; ses mouvements utilisent un vecteur de vélocité et sa directionnalité un cône de direction.</dd>
-</dl>
-
-<h3 id="Traitement_audio_avec_JavaScript">Traitement audio avec JavaScript</h3>
-
-<div class="note">
-<p><strong>Note :</strong> Au jour de la publication de la spécification Web Audio API le 29 août 2014, ces fonctionnalités sont dépréciées, et seront bientôt remplacées par {{ anch("Audio_Workers") }}.</p>
-</div>
-
-<dl>
- <dt>{{domxref("ScriptProcessorNode")}}</dt>
- <dd>Un noeud <strong><code>ScriptProcessorNode</code></strong><strong> </strong>permet de générer, traiter ou analyser du son avec JavaScript. C'est un module de traitement audio qui est lié à deux buffers, l'un en entrée, et l'autre en sortie. Un évènement implémentant {{domxref("AudioProcessingEvent")}} est envoyé à l'objet à chaque fois que le buffer d'entrée reçoit de nouvelles données, et le gestionnaire d'évènement prend fin lorsque les nouvelles données ont été communiquées au buffer de sortie. </dd>
- <dt>{{event("audioprocess")}} (event)</dt>
- <dd>L'évènement <code>audioprocess</code> est émis lorsque le buffer d'entrée d'un {{domxref("ScriptProcessorNode")}} de la Web Audio API est prêt à être traité.</dd>
- <dt>{{domxref("AudioProcessingEvent")}}</dt>
- <dd>L'objet  <code>AudioProcessingEvent </code>est envoyé aux fonctions de callback qui écoutent l'évènement <code>audioprocess.</code></dd>
-</dl>
-
-<h3 id="Traitement_audio_hors_ligne_ou_en_tâche_de_fond">Traitement audio hors ligne ou en tâche de fond</h3>
-
-<p>Il est possible de traiter et exporter un graphe audio très rapidement en tâche de fond — en l'exportant dans un {{domxref("AudioBuffer")}} plutôt que sur les enceintes du matériel — grâce aux objets suivants.</p>
-
-<dl>
- <dt>{{domxref("OfflineAudioContext")}}</dt>
- <dd>Un objet <strong><code>OfflineAudioContext</code></strong> est un {{domxref("AudioContext")}} qui représente un graphe de traitement audio construit à partir de noeuds audio. A la différence du <code>AudioContext </code>standard, un <code>OfflineAudioContext</code> n'exporte pas vraiment le son, mais le génère, aussi vite que possible, dans un buffer.</dd>
- <dt>{{event("complete")}} (event)</dt>
- <dd>Un évènement <code>complete</code> est émis lorsque le rendu d'un {{domxref("OfflineAudioContext")}} est terminé.</dd>
- <dt>{{domxref("OfflineAudioCompletionEvent")}}</dt>
- <dd>The <code>OfflineAudioCompletionEvent</code> est envoyé aux fonctions de callback qui écoutent l'évènement {{event("complete")}} event implements this interface.</dd>
-</dl>
-
-<h3 id="Audio_Workers">Audio Workers</h3>
-
-<p>Les Audio workers offrent la possibilité de traiter le son directement dans le contexte d'un <a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">web worker</a>. En date du 29 August 2014, ils ne sont encore implémentés par aucun navigateur. Lorsqu'ils seront implémentés, ils remplaceront {{domxref("ScriptProcessorNode")}}, et les autres fonctionnalités mentionnées dans la section <a href="#Audio_processing_via_JavaScript">Traitement audio avec JavaScript</a> ci-avant.</p>
-
-<dl>
- <dt>{{domxref("AudioWorkerNode")}}</dt>
- <dd>Un objet AudioWorkerNode représente un {{domxref("AudioNode")}} qui interagit avec le thread d'un worker pour générer, traiter, ou analyse le son directement.</dd>
- <dt>{{domxref("AudioWorkerGlobalScope")}}</dt>
- <dd>Un objet <code>AudioWorkerGlobalScope</code> est un objet dérivé d'un objet <code>DedicatedWorkerGlobalScope</code>. Il représente le contexte d'un worker dans lequel un script de traitement audio est lancé; il est conçu pour permettre la génération, le traitement, et l'analyse de données audio directement avec JavaScript dans le thread d'un worker.</dd>
- <dt>{{domxref("AudioProcessEvent")}}</dt>
- <dd>UN objet <code>Event</code> est transmis aux objets {{domxref("AudioWorkerGlobalScope")}} pour effectuer un traitement audio.</dd>
-</dl>
-
-<h2 id="Example">Objets obsolètes</h2>
-
-<p>Les objets suivants étaient définis dans les versions précédentes de la spécification, mais sont maintenant obsolètes et ont été remplacés.</p>
-
-<dl>
- <dt>{{domxref("JavaScriptNode")}}</dt>
- <dd>Utilisé pour le traitement du son directement en Javascript. Cet objet est obsolète, et a été remplacé par {{domxref("ScriptProcessorNode")}}.</dd>
- <dt>{{domxref("WaveTableNode")}}</dt>
- <dd>Utilisé pour définir une forme d'onde périodique. Cet objet est obsolète, et a été remplacé par {{domxref("PeriodicWave")}}.</dd>
-</dl>
-
-<h2 id="Example">Exemple</h2>
-
-<p>Cet exemple montre l'utilisation d'un grand nombre de fonctions Web Audio. La démo est disponible en ligne sur <a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-o-matic</a> (voir aussi le <a href="https://github.com/mdn/voice-change-o-matic"> code source complet sur Github</a>) —c'est une démo expérimentale d'application pour modifier la voix; baissez le son de vos enceintes pour l'utiliser, au moins au début !</p>
-
-<p>Les lignes qui concernent la Web Audio API sont surlignées; si vous voulez en savoir davantage sur les différentes méthodes, consultez la documentation.</p>
+La Web Audio API propose un système puissant et flexible pour contrôler les données audio sur internet. Elle permet notamment de sélectionner des sources audio (microphone, flux media), d'y ajouter des effets, de créer des visualisations, d'appliquer des effets de spatialisation (comme la balance), etc.
 
-<pre class="brush: js">var contexteAudio = new (window.AudioContext || window.webkitAudioContext)(); // définition du contexte audio
+## Concepts et usages
+
+La Web Audio API effectue des opérations dans un **contexte audio**; elle a été conçue pour supporter le **routing modulaire**. Les opérations audio basiques sont réalisées via des **noeuds audio** reliés entre eux pour former un **graphe de routage audio**. Plusieurs sources - avec différents types d'agencements de canaux - peuvent être supportées, même dans un seul contexte. Ce design modulaire et flexible permet de créer des fonctions audio complexes avec des effets dynamiques.
+
+Les noeuds audio sont reliés au niveau de leurs entrées et sorties, formant des chaînes ou des réseaux simples. Il peut y avoir une ou plusieurs sources. Les sources fournissent des tableaux d'intensités sonores (échantillons), souvent plusieurs dizaines de milliers par seconde. Ceux-ci peuvent être calculées mathématiquement (avec un {{domxref("OscillatorNode")}}), ou peuvent provenir de fichiers sons ou vidéos (comme {{domxref("AudioBufferSourceNode")}} ou {{domxref("MediaElementAudioSourceNode")}}) ou de flux audio ({{domxref("MediaStreamAudioSourceNode")}}). En réalité, les fichiers sons sont eux-même des enregistrements d'intensités sonores, qui viennent de microphones ou d'instruments électriques, et sont mixés dans une seule onde complexe.
+
+Les sorties de ces noeuds peuvent être liées aux entrées d'autres noeuds, qui mixent ces flux d'échantillons sonores ou les séparent en différents flux. Une modification courante est la multiplications des échantillons par une valeur afin d'en augmenter ou diminuer le volume sonore (comme c'est le cas pour le {{domxref("GainNode")}}). Le son est ensuite lié à une destination ({{domxref("AudioContext.destination")}}), qui l'envoie aux enceintes ou au casque audio. Cette dernière connexion n'est utile que si le son doit être entendu.
+
+Un processus de développement typique avec web audio ressemble à ceci :
+
+- Création d'un contexte audio
+- Dans ce contexte, création des sources — comme `<audio>`, oscillator, stream
+- Création de noeuds d'effets, comme la réverbération, les filtres biquad, la balance, le compresseur
+- Choix de la sortie audio (appelée destination), par exemple les enceintes du système
+- Connection des sources aux effets, et des effets à la destination
+
+![Un diagramme de boîte avec une boîte extérieure intitulée contexte audio et trois boîtes à l'intérieur intitulées source, effets et destination. Les trois boîtes intérieures ont des flèches qui pointent de la gauche vers la droite, indiquant le sens du flux de l'information audio.](audio-context_.png)
+
+Le timing est contrôlé avec une grande précision et une latence faible, ce qui permet aux développeurs d'écrire un code qui réagit précisément aux événements et qui est capable de traiter des échantillons précis, même avec un taux d'échantillonnage élevé. Cela permet d'envisager des applications telles que des boîtes à rythme ou des séquenceurs.
+
+La Web Audio API permet également de contrôler la _spatialisation_ du son. En utilisant un système basé sur le modèle _émetteur - récepteur,_ elle permet le contrôle de la balance ainsi que la gestion de l'atténuation du son en fonction de la distance, ou effet doppler, induite par un déplacement de la source sonore (ou de l'auditeur).
+
+> **Note :** Vous pouvez lire d'avantage de détails sur la Web Audio API en vous rendant sur notre article[ Concepts de base de la Web Audio API](/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API).
+
+## Interface de la Web Audio API
+
+La Web Audio API expose 28 interfaces avec des événements associés, classés selon leur fonction en 9 catégories.
+
+### Définition du graphe audio
+
+Conteneurs et définitions qui donnent sa forme au graphe audio
+
+- {{domxref("AudioContext")}}
+  - : Un objet **`AudioContext`** désigne un graphe de traitement audio construit à partir de modules reliés entre eux, chacun représenté par un noeud audio ({{domxref("AudioNode")}}). Le contexte audio contrôle la création des noeuds qu'il contient, ainsi que l'exécution du traitement audio, et du décodage. Il est nécessaire de créer un `AudioContext` avant de faire quoi que ce soit d'autre, puisque tout se passe dans un contexte.
+- {{domxref("AudioNode")}}
+  - : Un objet **`AudioNode`\*\*** \**est un module de traitement audio, tel qu'une *source audio* (c'est-à-dire un élément HTML {{HTMLElement("audio")}} ou {{HTMLElement("video")}}), une *destination audio*, un *module de traitement intermédiaire\* (par exemple un filtre {{domxref("BiquadFilterNode")}}), ou un contrôle du volume {{domxref("GainNode")}}).
+- {{domxref("AudioParam")}}
+  - : Un objet **`AudioParam`\*\*** \*\*est un paramètre audio, qui est lié à un {{domxref("AudioNode")}}. On peut lui assigner une valeur ou un changement de valeur, que l'on peut programmer à un moment spécifique et/ou selon un motif particulier.
+- {{event("ended_(Web_Audio)", "ended")}} (event)
+  - : L'évènement `ended` est diffusé lorsque la lecture s'arrête en arrivant à la fin d'un media.
+
+### Définition des sources audio
+
+- {{domxref("OscillatorNode")}}
+  - : Un objet **`OscillatorNode`\*\*** \*\*est un module de traitement audio qui génère la création d'une onde sinusoïdale d'une certaine fréquence.
+- {{domxref("AudioBuffer")}}
+  - : Un objet **`AudioBuffer`** est un petit morceau de contenu audio monté en mémoire. Il peut être créé à partir d'un fichier audio avec la méthode {{ domxref("AudioContext.decodeAudioData()") }}, ou à partir de données brutes en utilisant {{ domxref("AudioContext.createBuffer()") }}. Une fois décodé sous cette forme, la source audio peut être placée dans un {{ domxref("AudioBufferSourceNode") }}.
+- {{domxref("AudioBufferSourceNode")}}
+  - : Un objet **`AudioBufferSourceNode`** est une source audio composée de données audio montées en mémoire dans un {{domxref("AudioBuffer")}}. C'est un {{domxref("AudioNode")}} qui se comporte comme une source audio.
+- {{domxref("MediaElementAudioSourceNode")}}
+  - : Un objet **`MediaElementAudio`\*\***`SourceNode`\*\* est une source audio composée d'un élément  HTML5 {{ htmlelement("audio") }} ou {{ htmlelement("video") }}. C'est un {{domxref("AudioNode")}} qui se comporte comme une source audio.
+- {{domxref("MediaStreamAudioSourceNode")}}
+  - : Un objet **`MediaStreamAudio`\*\***`SourceNode`\*\* est une source audio composée d'un [WebRTC](/en-US/docs/WebRTC) {{domxref("MediaStream")}} (tel qu'une webcam ou un microphone). C'est un {{domxref("AudioNode")}} qui se comporte comme une source audio.
+
+### Définition des filtres d'effets audio
+
+- {{domxref("BiquadFilterNode")}}
+  - : Un objet **`BiquadFilterNode` **est un simple filtre de bas niveau. Il peut s'agir de différents types de filtres, contrôle du volume ou égaliseurs graphiques. Un `BiquadFilterNode` a toujours exactement une entrée et une sortie.
+- {{domxref("ConvolverNode")}}
+  - : Un objet **`Convolver`\*\***`Node`\***\* **est un {{domxref("AudioNode")}} qui exécute une circonvolution linéaire sur un AudioBuffer donné, souvent utilisé pour créer un effet de réverbération.
+- {{domxref("DelayNode")}}
+  - : Un objet **`DelayNode`\*\*** \*\*est une ligne à retard numérique, c'est-à-dire un module de traitement automatique qui provoque un délai entre l'arrivée du son en entrée et sa propagation en sortie.
+- {{domxref("DynamicsCompressorNode")}}
+  - : Un objet **`DynamicsCompressorNode`** permet un effet de compression, qui réduit le volume des parties les plus fortes du signal de façon à éviter les effets de clipping et la distortion qui peuvent se produire lorsque des sons multiples sont diffusés simultanément.
+- {{domxref("GainNode")}}
+  - : Un objet **`GainNode`\*\*** \** représente une modification du volume sonore. C'est un module de traitement audio qui provoque l'application d'un *gain\* aux données récupérées en entrée avant leur propagation vers la sortie.
+- {{domxref("WaveShaperNode")}}
+  - : Un objet **`WaveShaperNode`** représente une distortion non linéaire. C'est un {{domxref("AudioNode")}} qui utilise une courbe pour appliquer au signal une distortion de mise en forme des ondes. En dehors de l'effet de distortion évident, il est souvent utilisé pour donner un caractère plus chaleureux au son.
+- {{domxref("PeriodicWave")}}
+  - : Un objet {{domxref("PeriodicWave")}} est utilisé pour définir une forme d'onde périodique qui peut être utilisée pour façonner la sortie d'un {{ domxref("OscillatorNode") }}.
+
+### Définition des destinations audio
+
+Une fois que le signal audio a été traité, ces interfaces définissent sa destination.
+
+- {{domxref("AudioDestinationNode")}}
+  - : Un noeud **`AudioDestinationNode`** représente la destination finale d'une source audio source dans un contexte donné — en général les enceintes du matériel.
+- {{domxref("MediaStreamAudioDestinationNode")}}
+  - : Un noeud **`MediaStreamAudio`\*\***`DestinationNode`\*\* représente une destination audio constituée d'un {{domxref("MediaStream")}} [WebRTC](/en-US/docs/WebRTC) à une seule piste `AudioMediaStreamTrack`; il peut être utilisé de façon similaire à un {{domxref("MediaStream")}} obtenu avec {{ domxref("Navigator.getUserMedia") }}. C'est un {{domxref("AudioNode")}} qui se comporte comme une destination audio.
+
+### Analyse des données et visualisation
+
+- {{domxref("AnalyserNode")}}
+  - : Un objet **`AnalyserNode`** fournit en temps réel des informations concernant la fréquence et le temps, afin de les analyser et les visualiser.
+
+### Division et fusion des pistes audio
+
+- {{domxref("ChannelSplitterNode")}}
+  - : Un noeud **`ChannelSplitterNode`** prend en entrée une source audio et sépare ses différentes pistes en une série de sorties *mono*.
+- {{domxref("ChannelMergerNode")}}
+  - : Un noeud **`ChannelMergerNode`** réunit différentes entrées mono en une seule sortie. Chaque entrée devient une des pistes de la sortie unique.
+
+### Spatialisation audio
+
+- {{domxref("AudioListener")}}
+  - : Un objet **`AudioListener`\*\*** \*\*représente la position et l'orientation de l'unique personne écoutant la scene audio utilisée dans la spatialisation audio.
+- {{domxref("PannerNode")}}
+  - : Un noeud **`PannerNode`** représente le comportement d'un signal dans l'espace. C'est un module de traitement audio qui décrit sa position avec des coordonnées cartésiennes fondées sur la règle de la main droite; ses mouvements utilisent un vecteur de vélocité et sa directionnalité un cône de direction.
+
+### Traitement audio avec JavaScript
+
+> **Note :** Au jour de la publication de la spécification Web Audio API le 29 août 2014, ces fonctionnalités sont dépréciées, et seront bientôt remplacées par {{ anch("Audio_Workers") }}.
+
+- {{domxref("ScriptProcessorNode")}}
+  - : Un noeud **`ScriptProcessorNode`\*\*** \*\*permet de générer, traiter ou analyser du son avec JavaScript. C'est un module de traitement audio qui est lié à deux buffers, l'un en entrée, et l'autre en sortie. Un évènement implémentant {{domxref("AudioProcessingEvent")}} est envoyé à l'objet à chaque fois que le buffer d'entrée reçoit de nouvelles données, et le gestionnaire d'évènement prend fin lorsque les nouvelles données ont été communiquées au buffer de sortie.
+- {{event("audioprocess")}} (event)
+  - : L'évènement `audioprocess` est émis lorsque le buffer d'entrée d'un {{domxref("ScriptProcessorNode")}} de la Web Audio API est prêt à être traité.
+- {{domxref("AudioProcessingEvent")}}
+  - : L'objet  `AudioProcessingEvent `est envoyé aux fonctions de callback qui écoutent l'évènement `audioprocess.`
+
+### Traitement audio hors ligne ou en tâche de fond
+
+Il est possible de traiter et exporter un graphe audio très rapidement en tâche de fond — en l'exportant dans un {{domxref("AudioBuffer")}} plutôt que sur les enceintes du matériel — grâce aux objets suivants.
+
+- {{domxref("OfflineAudioContext")}}
+  - : Un objet **`OfflineAudioContext`** est un {{domxref("AudioContext")}} qui représente un graphe de traitement audio construit à partir de noeuds audio. A la différence du `AudioContext `standard, un `OfflineAudioContext` n'exporte pas vraiment le son, mais le génère, aussi vite que possible, dans un buffer.
+- {{event("complete")}} (event)
+  - : Un évènement `complete` est émis lorsque le rendu d'un {{domxref("OfflineAudioContext")}} est terminé.
+- {{domxref("OfflineAudioCompletionEvent")}}
+  - : The `OfflineAudioCompletionEvent` est envoyé aux fonctions de callback qui écoutent l'évènement {{event("complete")}} event implements this interface.
+
+### Audio Workers
+
+Les Audio workers offrent la possibilité de traiter le son directement dans le contexte d'un [web worker](/en-US/docs/Web/Guide/Performance/Using_web_workers). En date du 29 August 2014, ils ne sont encore implémentés par aucun navigateur. Lorsqu'ils seront implémentés, ils remplaceront {{domxref("ScriptProcessorNode")}}, et les autres fonctionnalités mentionnées dans la section [Traitement audio avec JavaScript](#Audio_processing_via_JavaScript) ci-avant.
+
+- {{domxref("AudioWorkerNode")}}
+  - : Un objet AudioWorkerNode représente un {{domxref("AudioNode")}} qui interagit avec le thread d'un worker pour générer, traiter, ou analyse le son directement.
+- {{domxref("AudioWorkerGlobalScope")}}
+  - : Un objet `AudioWorkerGlobalScope` est un objet dérivé d'un objet `DedicatedWorkerGlobalScope`. Il représente le contexte d'un worker dans lequel un script de traitement audio est lancé; il est conçu pour permettre la génération, le traitement, et l'analyse de données audio directement avec JavaScript dans le thread d'un worker.
+- {{domxref("AudioProcessEvent")}}
+  - : UN objet `Event` est transmis aux objets {{domxref("AudioWorkerGlobalScope")}} pour effectuer un traitement audio.
+
+## Objets obsolètes
+
+Les objets suivants étaient définis dans les versions précédentes de la spécification, mais sont maintenant obsolètes et ont été remplacés.
+
+- {{domxref("JavaScriptNode")}}
+  - : Utilisé pour le traitement du son directement en Javascript. Cet objet est obsolète, et a été remplacé par {{domxref("ScriptProcessorNode")}}.
+- {{domxref("WaveTableNode")}}
+  - : Utilisé pour définir une forme d'onde périodique. Cet objet est obsolète, et a été remplacé par {{domxref("PeriodicWave")}}.
+
+## Exemple
+
+Cet exemple montre l'utilisation d'un grand nombre de fonctions Web Audio. La démo est disponible en ligne sur [Voice-change-o-matic](http://mdn.github.io/voice-change-o-matic/) (voir aussi le [code source complet sur Github](https://github.com/mdn/voice-change-o-matic)) —c'est une démo expérimentale d'application pour modifier la voix; baissez le son de vos enceintes pour l'utiliser, au moins au début !
+
+Les lignes qui concernent la Web Audio API sont surlignées; si vous voulez en savoir davantage sur les différentes méthodes, consultez la documentation.
+
+```js
+var contexteAudio = new (window.AudioContext || window.webkitAudioContext)(); // définition du contexte audio
 // les navigateurs avec un moteur Webkit/blink demandent un préfixe
 
 var voixSelectionnee = document.getElementById("voice"); // case à cocher pour la sélection d'effets de voix
@@ -202,7 +173,7 @@ function creerCourbeDistorsion(taille) { // fonction qui crée une forme de cour
     angle = Math.PI / 180,
     i = 0,
     x;
-  for ( ; i &lt; nombre_echantillons; ++i ) {
+  for ( ; i < nombre_echantillons; ++i ) {
     x = i * 2 / nombre_echantillons - 1;
     courbe[i] = ( 3 + k ) * x * 20 * angle / ( Math.PI + k * Math.abs(x) );
   }
@@ -266,7 +237,7 @@ function genererVisualisation(flux) {
       var sliceWidth = LARGEUR * 1.0 / tailleBuffer;
       var x = 0;
 
-      for(var i = 0; i &lt; tailleBuffer; i++) {
+      for(var i = 0; i < tailleBuffer; i++) {
 
         var v = tableauDonnees[i] / 128.0;
         var y = v * HAUTEUR/2;
@@ -337,93 +308,73 @@ function muterVoix() { // allumer / éteindre le son
     silence.innerHTML = "Mute";
   }
 }
-</pre>
-
-<h2 id="Specifications">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('Web Audio API')}}</td>
-      <td>{{Spec2('Web Audio API')}}</td>
-      <td></td>
-    </tr>
-  </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.AudioContext", 0)}}</p>
-
-<h2 id="See_also">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
- <li><a href="/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API">Visualizations with Web Audio API</a></li>
- <li><a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic example</a></li>
- <li><a href="http://mdn.github.io/violent-theremin/">Violent Theremin example</a></li>
- <li><a href="/en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialisation_basics">Web audio spatialisation basics</a></li>
- <li><a href="http://www.html5rocks.com/tutorials/webaudio/positional_audio/">Mixing Positional Audio and WebGL</a></li>
- <li><a href="http://www.html5rocks.com/tutorials/webaudio/games/">Developing Game Audio with the Web Audio API</a></li>
- <li><a href="/en-US/docs/Web/API/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext">Porting webkitAudioContext code to standards based AudioContext</a></li>
- <li><a href="https://github.com/bit101/tones">Tones</a>: a simple library for playing specific tones/notes using the Web Audio API.</li>
- <li><a href="https://github.com/goldfire/howler.js/">howler.js</a>: a JS audio library that defaults to <a href="https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html">Web Audio API</a> and falls back to <a href="http://www.whatwg.org/specs/web-apps/current-work/#the-audio-element">HTML5 Audio</a>, as well as providing other useful features.</li>
- <li><a href="https://github.com/mattlima/mooog">Mooog</a>: jQuery-style chaining of AudioNodes, mixer-style sends/returns, and more.</li>
-</ul>
-
-<h3 id="guides">Guides</h3>
-
-  <ul>
-   <li><a href="/fr/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API">Les concepts de base de la Web Audio API</a></li>
-   <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
-   <li><a href="/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API">Visualizations with Web Audio API</a></li>
-   <li><a href="/en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialisation_basics">Web audio spatialisation basics</a></li>
-   <li><a href="/en-US/docs/Web/API/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext">Porting webkitAudioContext code to standards based AudioContext</a></li>
-  </ul>
-
-<h3 id="démos">Démos</h3>
-  <ul>
-   <li><a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a></li>
-   <li><a href="http://mdn.github.io/violent-theremin/">Violent Theremin</a></li>
-  </ul>
-
-<h3 id="api">API</h3>
-  <ul>
-   <li>{{domxref("AnalyserNode")}}</li>
-   <li>{{domxref("AudioBuffer")}}</li>
-   <li>{{domxref("AudioBufferSourceNode")}}</li>
-   <li>{{domxref("AudioContext")}}</li>
-   <li>{{domxref("AudioDestinationNode")}}</li>
-   <li>{{domxref("AudioListener")}}</li>
-   <li>{{domxref("AudioNode")}}</li>
-   <li>{{domxref("AudioParam")}}</li>
-   <li>{{event("audioprocess")}} (event)</li>
-   <li>{{domxref("AudioProcessingEvent")}}</li>
-   <li>{{domxref("BiquadFilterNode")}}</li>
-   <li>{{domxref("ChannelMergerNode")}}</li>
-   <li>{{domxref("ChannelSplitterNode")}}</li>
-   <li>{{event("complete")}} (event)</li>
-   <li>{{domxref("ConvolverNode")}}</li>
-   <li>{{domxref("DelayNode")}}</li>
-   <li>{{domxref("DynamicsCompressorNode")}}</li>
-   <li>{{event("ended_(Web_Audio)", "ended")}} (event)</li>
-   <li>{{domxref("GainNode")}}</li>
-   <li>{{domxref("MediaElementAudioSourceNode")}}</li>
-   <li>{{domxref("MediaStreamAudioDestinationNode")}}</li>
-   <li>{{domxref("MediaStreamAudioSourceNode")}}</li>
-   <li>{{domxref("OfflineAudioCompletionEvent")}}</li>
-   <li>{{domxref("OfflineAudioContext")}}</li>
-   <li>{{domxref("OscillatorNode")}}</li>
-   <li>{{domxref("PannerNode")}}</li>
-   <li>{{domxref("PeriodicWave")}}</li>
-   <li>{{domxref("ScriptProcessorNode")}}</li>
-   <li>{{domxref("WaveShaperNode")}}</li>
-  </ul>
-
+```
+
+## Spécifications
+
+| Spécification                            | Statut                               | Commentaire |
+| ---------------------------------------- | ------------------------------------ | ----------- |
+| {{SpecName('Web Audio API')}} | {{Spec2('Web Audio API')}} |             |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.AudioContext", 0)}}
+
+## Voir aussi
+
+- [Utiliser la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API)
+- [Visualizations with Web Audio API](/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API)
+- [Voice-change-O-matic example](http://mdn.github.io/voice-change-o-matic/)
+- [Violent Theremin example](http://mdn.github.io/violent-theremin/)
+- [Web audio spatialisation basics](/en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialisation_basics)
+- [Mixing Positional Audio and WebGL](http://www.html5rocks.com/tutorials/webaudio/positional_audio/)
+- [Developing Game Audio with the Web Audio API](http://www.html5rocks.com/tutorials/webaudio/games/)
+- [Porting webkitAudioContext code to standards based AudioContext](/en-US/docs/Web/API/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext)
+- [Tones](https://github.com/bit101/tones): a simple library for playing specific tones/notes using the Web Audio API.
+- [howler.js](https://github.com/goldfire/howler.js/): a JS audio library that defaults to [Web Audio API](https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html) and falls back to [HTML5 Audio](http://www.whatwg.org/specs/web-apps/current-work/#the-audio-element), as well as providing other useful features.
+- [Mooog](https://github.com/mattlima/mooog): jQuery-style chaining of AudioNodes, mixer-style sends/returns, and more.
+
+### Guides
+
+- [Les concepts de base de la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API)
+- [Utiliser la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API)
+- [Visualizations with Web Audio API](/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API)
+- [Web audio spatialisation basics](/en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialisation_basics)
+- [Porting webkitAudioContext code to standards based AudioContext](/en-US/docs/Web/API/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext)
+
+### Démos
+
+- [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/)
+- [Violent Theremin](http://mdn.github.io/violent-theremin/)
+
+### API
+
+- {{domxref("AnalyserNode")}}
+- {{domxref("AudioBuffer")}}
+- {{domxref("AudioBufferSourceNode")}}
+- {{domxref("AudioContext")}}
+- {{domxref("AudioDestinationNode")}}
+- {{domxref("AudioListener")}}
+- {{domxref("AudioNode")}}
+- {{domxref("AudioParam")}}
+- {{event("audioprocess")}} (event)
+- {{domxref("AudioProcessingEvent")}}
+- {{domxref("BiquadFilterNode")}}
+- {{domxref("ChannelMergerNode")}}
+- {{domxref("ChannelSplitterNode")}}
+- {{event("complete")}} (event)
+- {{domxref("ConvolverNode")}}
+- {{domxref("DelayNode")}}
+- {{domxref("DynamicsCompressorNode")}}
+- {{event("ended_(Web_Audio)", "ended")}} (event)
+- {{domxref("GainNode")}}
+- {{domxref("MediaElementAudioSourceNode")}}
+- {{domxref("MediaStreamAudioDestinationNode")}}
+- {{domxref("MediaStreamAudioSourceNode")}}
+- {{domxref("OfflineAudioCompletionEvent")}}
+- {{domxref("OfflineAudioContext")}}
+- {{domxref("OscillatorNode")}}
+- {{domxref("PannerNode")}}
+- {{domxref("PeriodicWave")}}
+- {{domxref("ScriptProcessorNode")}}
+- {{domxref("WaveShaperNode")}}
diff --git a/files/fr/web/api/web_audio_api/using_web_audio_api/index.md b/files/fr/web/api/web_audio_api/using_web_audio_api/index.md
index 26ea00da32..59727d0cbc 100644
--- a/files/fr/web/api/web_audio_api/using_web_audio_api/index.md
+++ b/files/fr/web/api/web_audio_api/using_web_audio_api/index.md
@@ -3,129 +3,117 @@ title: Utiliser la Web Audio API
 slug: Web/API/Web_Audio_API/Using_Web_Audio_API
 translation_of: Web/API/Web_Audio_API/Using_Web_Audio_API
 ---
+La [Web Audio API](/en-US/docs/Web_Audio_API) offre un méchanisme à la fois simple et puissant pour implémenter et manipuler le contenu audio dans une application web. Elle permet de manipuler mixages audio, effets, balance, etc. Cet article donne les bases pour l'utiliser, à travers quelques exemples simples.
 
-<p>La <a href="/en-US/docs/Web_Audio_API">Web Audio API</a> offre un méchanisme à la fois simple et puissant pour implémenter et manipuler le contenu audio dans une application web. Elle permet de manipuler mixages audio, effets, balance, etc. Cet article donne les bases pour l'utiliser, à travers quelques exemples simples.</p>
+La Web Audio API ne vient pas remplacer l'élément [\<audio>](/en-US/docs/Web/HTML/Element/audio), mais plutôt le compléter, de même que l'API Canvas 2D coexiste avec l'élément [\<video>](/en-US/docs/Web/HTML/Element/Img). Si vous avez seulement besoin de contrôler la lecture d'un fichier audio, \<audio> est probablement une meilleure solution, plus rapide. Si vous voulez procéder à un traitement audio plus complexe et à la lecture d'une source, la Web Audio API offre davantage de possibilités en termes de puissance et de contrôle.
 
-<div>
-<p>La Web Audio API ne vient pas remplacer l'élément <a href="/en-US/docs/Web/HTML/Element/audio">&lt;audio&gt;</a>, mais plutôt le compléter, de même que l'API Canvas 2D coexiste avec l'élément <a href="/en-US/docs/Web/HTML/Element/Img">&lt;video&gt;</a>. Si vous avez seulement besoin de contrôler la lecture d'un fichier audio, &lt;audio&gt; est probablement une meilleure solution, plus rapide. Si vous voulez procéder à un traitement audio plus complexe et à la lecture d'une source, la Web Audio API offre davantage de possibilités en termes de puissance et de contrôle.</p>
+L'une des particularités de la Web Audio API est qu'elle n'a pas de limites au niveau de la programmation du son. Par exemple, le nombre de sons que l'on peut appeler en même temps n'est pas plafonnée. Certains processeurs sont potentiellement capables de jouer plus d'un millier de sons simultanément sans saccades.
 
-<p>L'une des particularités de la Web Audio API est qu'elle n'a pas de limites au niveau de la programmation du son. Par exemple, le nombre de sons que l'on peut appeler en même temps n'est pas plafonnée. Certains processeurs sont potentiellement capables de jouer plus d'un millier de sons simultanément sans saccades.</p>
-</div>
+## Exemples
 
-<h2 id="Exemples">Exemples</h2>
+Afin d'expliquer l'utilisation de la Web Audio API, nous avons créé un certain nombre d'exemples qui seront étoffés au fur et à mesure. N'hésitez pas à en ajouter d'autres et à suggérer des améliorations !
 
-<p>Afin d'expliquer l'utilisation de la Web Audio API, nous avons créé un certain nombre d'exemples qui seront étoffés au fur et à mesure. N'hésitez pas à en ajouter d'autres et à suggérer des améliorations !</p>
+Notre premier exemple est [Voice-change-O-matic](http://github.com/mdn/voice-change-o-matic), une application web de déformation de la voix, qui permet de choisir différents effets et modes de visualisation. Cette application est rudimentaire, mais elle permet de montrer l'utilisation de plusieurs fonctionnalités de la Web Audio API combinées ensemble  ([run the Voice-change-O-matic live](http://mdn.github.io/voice-change-o-matic/)).
 
-<p>Notre premier exemple est <a href="http://github.com/mdn/voice-change-o-matic">Voice-change-O-matic</a>, une application web de déformation de la voix, qui permet de choisir différents effets et modes de visualisation. Cette application est rudimentaire, mais elle permet de montrer l'utilisation de plusieurs fonctionnalités de la Web Audio API combinées ensemble  (<a href="http://mdn.github.io/voice-change-o-matic/">run the Voice-change-O-matic live</a>).</p>
+![Une boîte à rythme avec des contrôles pour la lecture, le volume et le pan](boombox.png)
 
-<p><img alt="Une boîte à rythme avec des contrôles pour la lecture, le volume et le pan" src="boombox.png"></p>
+## Concepts de base
 
-<h2 id="Concepts_de_base">Concepts de base</h2>
+> **Note :** la plupart des extraits de code dans cette section viennent de l'exemple [Violent Theremin](https://github.com/mdn/violent-theremin).
 
-<div class="note">
-<p><strong>Note :</strong> la plupart des extraits de code dans cette section viennent de l'exemple <a href="https://github.com/mdn/violent-theremin">Violent Theremin</a>.</p>
-</div>
+La Web Audio API impliqe de réaliser les opérations de traitement audio dans un **contexte audio**, et elle a été conçue pour permettre le **routage modulaire**. Les opérations de traitement de base sont réalisées par des **noeuds audio**, qui sont reliés entre eux pour former un **graphe de routage audio**. Plusieurs sources — avec différentes configuration de canaux — peuvent cohabiter dans un seul contexte. Ce design modulaire offre la flexibilité nécessaire pour créer des fonctions complexes avec des effets dynamiques.
 
-<p>La Web Audio API impliqe de réaliser les opérations de traitement audio dans un <strong>contexte audio</strong>, et elle a été conçue pour permettre le <strong>routage modulaire</strong>. Les opérations de traitement de base sont réalisées par des <strong> noeuds audio</strong>, qui sont reliés entre eux pour former un<strong> graphe de routage audio</strong>. Plusieurs sources — avec différentes configuration de canaux — peuvent cohabiter dans un seul contexte. Ce design modulaire offre la flexibilité nécessaire pour créer des fonctions complexes avec des effets dynamiques.</p>
+Les noeuds audio sont reliés au niveau de leurs entrées et sorties. Ils forment une chaîne qui commence avec une ou plusieurs sources, traverse un ou plusieurs noeuds de traitement, et se termine par une destination (bien qu'il ne soit pas néessaire d'avoir une destination si l'on souhaite simplement visualiser des données audio). Un scénario simple, représentatif de la Web Audio API, pourrait ressembler à ceci :
 
-<p>Les noeuds audio sont reliés au niveau de leurs entrées et sorties. Ils forment une chaîne qui commence avec une ou plusieurs sources, traverse un ou plusieurs noeuds de traitement, et se termine par une destination (bien qu'il ne soit pas néessaire d'avoir une destination si l'on souhaite simplement visualiser des données audio). Un scénario simple, représentatif de la Web Audio API, pourrait ressembler à ceci :</p>
+1.  Création d'un contexte audio
+2.  Dans ce contexte, création des sources — telles que `<audio>`, oscillateur, flux
+3.  Création des noeuds d'effets, tels que réverb, filtres biquad, balance,  compresseur
+4.  Choix final de la sortie audio, par exemple les enceintes du système
+5.  Connection des sources aux effets, et des effets à la sortie.
 
-<ol>
- <li>Création d'un contexte audio</li>
- <li>Dans ce contexte, création des sources — telles que <code>&lt;audio&gt;</code>, oscillateur, flux</li>
- <li>Création des noeuds d'effets, tels que réverb, filtres biquad, balance,  compresseur</li>
- <li>Choix final de la sortie audio, par exemple les enceintes du système </li>
- <li>Connection des sources aux effets, et des effets à la sortie.</li>
-</ol>
+### Création d'un contexte audio
 
-<h3 id="Création_d'un_contexte_audio">Création d'un contexte audio</h3>
+Commencez par créer une instance de [`AudioContext`](/en-US/docs/Web/API/AudioContext) sur laquelle vous allez créer un graphe audio. L'exemple le plus simple ressemblerait à ceci:
 
-<p>Commencez par créer une instance de <a href="/en-US/docs/Web/API/AudioContext"><code>AudioContext</code></a> sur laquelle vous allez créer un graphe audio. L'exemple le plus simple ressemblerait à ceci:</p>
+```js
+var contexteAudio = new AudioContext();
+```
 
-<pre class="brush: js">var contexteAudio = new AudioContext();
-</pre>
+> **Note :** On peut créer plusieurs contextes audio dans le même document, bien que ce soit probablement superflu dans la plupart des cas.
 
-<div class="note">
-<p><strong>Note :</strong> On peut créer plusieurs contextes audio dans le même document, bien que ce soit probablement superflu dans la plupart des cas.</p>
-</div>
+Il faut rajouter une version préfixée pour les navigateurs Webkit/Blink browsers, tout en conservant la version non préfixée pour Firefox (desktop/mobile/OS). Ce qui donne :
 
-<p>Il faut rajouter une version préfixée pour les navigateurs Webkit/Blink browsers, tout en conservant la version non préfixée pour Firefox (desktop/mobile/OS). Ce qui donne :</p>
+```js
+var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+```
 
-<pre class="brush: js">var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
-</pre>
+> **Note :** Safari risque de planter si l'objet `window` n'est pas explicitement mentionné lors de la création d'un contexte audio
 
-<div class="note">
-<p><strong>Note :</strong> Safari risque de planter si l'objet <code>window</code> n'est pas explicitement mentionné lors de la création d'un contexte audio</p>
-</div>
+### Création d'une source audio
 
-<h3 id="Création_d'une_source_audio">Création d'une source audio</h3>
+Maintenant que nous avons créé un contexte, nous allons utiliser les méthodes de ce contexte pour quasiment tout ce qui nous reste à faire. La première étape consiste à créer une source audio. Les sources peuvent être de provenance diverse :
 
-<p>Maintenant que nous avons créé un contexte, nous allons utiliser les méthodes de ce contexte pour quasiment tout ce qui nous reste à faire. La première étape consiste à créer une source audio. Les sources peuvent être de provenance diverse :</p>
+- générées en JavaScript par un noeud audio tel qu'un oscillateur. Pour créer un {{domxref("OscillatorNode")}} on utilise la méthode {{domxref("AudioContext.createOscillator")}}.
+- créées à partir de données PCM brutes: le contexte audio a des méthodes pour décoder lesformats supportés; voir {{ domxref("AudioContext.createBuffer()") }}, {{domxref("AudioContext.createBufferSource()")}}, et {{domxref("AudioContext.decodeAudioData()")}}.
+- récupérées dans des élements HTML tels que {{HTMLElement("video")}} ou {{HTMLElement("audio")}}: voir {{domxref("AudioContext.createMediaElementSource()")}}.
+- prises dans un [WebRTC](/en-US/docs/WebRTC) {{domxref("MediaStream")}} comme une webcam ou un microphone. Voir {{ domxref("AudioContext.createMediaStreamSource()") }}.
 
-<ul>
- <li>générées en JavaScript par un noeud audio tel qu'un oscillateur. Pour créer un {{domxref("OscillatorNode")}} on utilise la méthode {{domxref("AudioContext.createOscillator")}}.</li>
- <li>créées à partir de données PCM brutes: le contexte audio a des méthodes pour décoder lesformats supportés; voir {{ domxref("AudioContext.createBuffer()") }}, {{domxref("AudioContext.createBufferSource()")}}, et {{domxref("AudioContext.decodeAudioData()")}}.</li>
- <li>récupérées dans des élements HTML tels que {{HTMLElement("video")}} ou {{HTMLElement("audio")}}: voir {{domxref("AudioContext.createMediaElementSource()")}}.</li>
- <li>prises dans un <a href="/en-US/docs/WebRTC">WebRTC</a> {{domxref("MediaStream")}} comme une webcam ou un microphone. Voir {{ domxref("AudioContext.createMediaStreamSource()") }}.</li>
-</ul>
+Pour notre exemple nous nous contenterons de créer un oscillateur pour générer un son simple comme source, et un noeud de gain pour contrôler le volume:
 
-<p>Pour notre exemple nous nous contenterons de créer un oscillateur pour générer un son simple comme source, et un noeud de gain pour contrôler le volume:</p>
-
-<pre class="brush: js">var oscillateur = contexteAudio.createOscillator();
+```js
+var oscillateur = contexteAudio.createOscillator();
 var noeudGain = contexteAudio.createGain();
-</pre>
+```
 
-<div class="note">
-<p><strong>Note :</strong> Pour jouer un fichier audio directement, il faut charger le fichier en XHR, le décoder en mémoire tampon, puis associer le tampon à une source. Voir l'exemple <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L48-L68">Voice-change-O-matic</a>.</p>
-</div>
+> **Note :** Pour jouer un fichier audio directement, il faut charger le fichier en XHR, le décoder en mémoire tampon, puis associer le tampon à une source. Voir l'exemple [Voice-change-O-matic](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L48-L68).
 
-<div class="note">
-<p><strong>Note :</strong> Scott Michaud a écrit la librairie <a href="https://github.com/ScottMichaud/AudioSampleLoader">AudioSampleLoader</a>, très pratique pour charger et décoder un ou plusieurs extraits audio. Elle peut aider à simplifier le processus de chargement XHR / mémoire tampon décrit dans la note précédente.</p>
-</div>
+> **Note :** Scott Michaud a écrit la librairie [AudioSampleLoader](https://github.com/ScottMichaud/AudioSampleLoader), très pratique pour charger et décoder un ou plusieurs extraits audio. Elle peut aider à simplifier le processus de chargement XHR / mémoire tampon décrit dans la note précédente.
 
-<h3 id="Lien_entre_les_noeuds_source_et_destination">Lien entre les noeuds source et destination</h3>
+### Lien entre les noeuds source et destination
 
-<p>Pour faire sortir le son dans vos enceintes, il faut relier la source et la destination. Pour cela on appelle la méthode <code>connect</code> sur le noeud source, le noeud de destination étant passé en argument. La méthode <code>connect</code> est disponible sur la plupart des types de noeuds.<code> </code></p>
+Pour faire sortir le son dans vos enceintes, il faut relier la source et la destination. Pour cela on appelle la méthode `connect` sur le noeud source, le noeud de destination étant passé en argument. La méthode `connect` est disponible sur la plupart des types de noeuds.``
 
-<p>La sortie par défaut du matériel (en général les enceintes) est accessible via {{ domxref("AudioContext.destination") }}. Pour connecter l'oscillateur, le noeud de gain et la destination, on écrirait les lignes suivantes:</p>
+La sortie par défaut du matériel (en général les enceintes) est accessible via {{ domxref("AudioContext.destination") }}. Pour connecter l'oscillateur, le noeud de gain et la destination, on écrirait les lignes suivantes:
 
-<pre class="brush: js">oscillateur.connect(noeudGain);
+```js
+oscillateur.connect(noeudGain);
 noeudGain.connect(contexteAudio.destination);
-</pre>
+```
 
-<p>On peut connecter autant de noeuds qu'on le souhaite (cf. <a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a>). Par exemple:</p>
+On peut connecter autant de noeuds qu'on le souhaite (cf. [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/)). Par exemple:
 
-<pre class="brush: js">source = contexteAudio.createMediaStreamSource(stream);
+```js
+source = contexteAudio.createMediaStreamSource(stream);
 source.connect(analyser);
 analyser.connect(distortion);
 distortion.connect(biquadFilter);
 biquadFilter.connect(convolver);
 convolver.connect(noeudGain);
 noeudGain.connect(contexteAudio.destination);
-</pre>
+```
 
-<p>Ce code créerait le graphe audio suivant :</p>
+Ce code créerait le graphe audio suivant :
 
-<p><img alt="Un graphe audio avec un élément audio source connecté à la destination par défaut" src="graph1.jpg"></p>
+![Un graphe audio avec un élément audio source connecté à la destination par défaut](graph1.jpg)
 
-<p>Il est possible de connecter plusieurs noeuds à un seul noeud, par exemple pour mixer plusieurs sources ensemble, et les passer dans un seul noeud d'effet, tel qu'un noeud de gain.</p>
+Il est possible de connecter plusieurs noeuds à un seul noeud, par exemple pour mixer plusieurs sources ensemble, et les passer dans un seul noeud d'effet, tel qu'un noeud de gain.
 
-<div class="note">
-<p><strong>Note :</strong> Depuis Firefox 32, les outils de développement intégrés incluent un <a href="/en-US/docs/Tools/Web_Audio_Editor">éditeur audio</a>,  très utile pour débugger les graphes audio.</p>
-</div>
+> **Note :** Depuis Firefox 32, les outils de développement intégrés incluent un [éditeur audio](/en-US/docs/Tools/Web_Audio_Editor),  très utile pour débugger les graphes audio.
 
-<h3 id="Lecture_du_son_et_définition_du_pitch">Lecture du son et définition du pitch</h3>
+### Lecture du son et définition du pitch
 
-<p>Maintenant que le graphe audio est en place, nous pouvons ajuster certains aspects du son en définissant la valeur de certaines propriétés ou en utilsant ses méthodes. L'exemple suivant spécifie un pitch en hertz pour un oscillateur, lui assigne un type, et demande à l'oscillateur de jouer le son.</p>
+Maintenant que le graphe audio est en place, nous pouvons ajuster certains aspects du son en définissant la valeur de certaines propriétés ou en utilsant ses méthodes. L'exemple suivant spécifie un pitch en hertz pour un oscillateur, lui assigne un type, et demande à l'oscillateur de jouer le son.
 
-<pre class="brush: js">oscillateur.type = 'sine'; // onde sinusoïdale — les autres valeurs possible sont : 'square', 'sawtooth', 'triangle' et 'custom'
+```js
+oscillateur.type = 'sine'; // onde sinusoïdale — les autres valeurs possible sont : 'square', 'sawtooth', 'triangle' et 'custom'
 oscillateur.frequency.value = 2500; // valeur en hertz
 oscillateur.start();
-</pre>
+```
 
-<p>Le code suivant, qui vient de l'exemple <a href="http://mdn.github.io/violent-theremin/">Violent Theremin</a>, spécifie une valeur maximum pour le gain, et une valeur pour la fréquence:</p>
+Le code suivant, qui vient de l'exemple [Violent Theremin](http://mdn.github.io/violent-theremin/), spécifie une valeur maximum pour le gain, et une valeur pour la fréquence:
 
-<pre class="brush: js">var largeur = window.innerWidth;
+```js
+var largeur = window.innerWidth;
 var hauteur = window.innerHeight;
 
 var frequenceMax = 6000;
@@ -141,11 +129,12 @@ oscillateur.frequency.value = frequenceInitiale; // valeur en hertz
 oscillateur.start();
 
 noeudGain.gain.value = volumeInitial;
-</pre>
+```
 
-<p>On peut aussi réassigner les valeurs de fréquence et de pitch à chaque mouvement de la souris, en utilisant la position pour calculer un pourcentage des valeurs maximum de fréquence et de gain :</p>
+On peut aussi réassigner les valeurs de fréquence et de pitch à chaque mouvement de la souris, en utilisant la position pour calculer un pourcentage des valeurs maximum de fréquence et de gain :
 
-<pre class="brush: js">// coordonnées de la souris
+```js
+// coordonnées de la souris
 
 var positionX;
 var positionY;
@@ -164,13 +153,14 @@ function updatePage(e) {
 
     canvasDraw();
 }
-</pre>
+```
 
-<h3 id="Simple_visualisation_avec_canvas">Simple visualisation avec canvas</h3>
+### Simple visualisation avec canvas
 
-<p>On appelle une fonction <code>canvasDraw()</code> à chaque mouvement de la souris. Elle dessine une grappe de cercles à l'endroit où se trouve la souris, leur taille et couleur étant basées sur les valeurs de fréquence et de gain.</p>
+On appelle une fonction `canvasDraw()` à chaque mouvement de la souris. Elle dessine une grappe de cercles à l'endroit où se trouve la souris, leur taille et couleur étant basées sur les valeurs de fréquence et de gain.
 
-<pre class="brush: js">function aleatoire(number1, number2) {
+```js
+function aleatoire(number1, number2) {
   return number1 + (Math.floor(Math.random() * (number2 - number1)) + 1);
 }
 
@@ -187,7 +177,7 @@ function canvasDraw() {
 
   canvasCtx.globalAlpha = 0.2;
 
-  for(i=1;i&lt;=15;i=i+2) {
+  for(i=1;i<=15;i=i+2) {
     contexteCanvas.beginPath();
     var chaineStyle = 'rgb(' + 100 + (i * 10) + ',' + Math.floor((noeudGain.gain.value / volumeMax) * 255);
     chaineStyle += ',' + Math.floor((oscillateur.frequency.value / frequenceMax) * 255) + ')';
@@ -196,13 +186,15 @@ function canvasDraw() {
     contexteCanvas.fill();
     contexteCanvas.closePath();
   }
-}</pre>
+}
+```
 
-<h3 id="Couper_le_son_du_theremin">Couper le son du theremin</h3>
+### Couper le son du theremin
 
-<p>Quand on appuie sur le bouton pour couper le son, la fonction ci-dessous est appelée, qui déconnecte le noeud de gain du noeud de destination, cassant ainsi le graphe de façon à ce qu'aucun son ne soit produit. Appuyer de nouveau sur le bouton a l'effet inverse.</p>
+Quand on appuie sur le bouton pour couper le son, la fonction ci-dessous est appelée, qui déconnecte le noeud de gain du noeud de destination, cassant ainsi le graphe de façon à ce qu'aucun son ne soit produit. Appuyer de nouveau sur le bouton a l'effet inverse.
 
-<pre class="brush: js">var coupeSon = document.querySelector('.mute');
+```js
+var coupeSon = document.querySelector('.mute');
 
 coupeSon.onclick = function() {
   if(coupeSon.id == "") {
@@ -215,63 +207,68 @@ coupeSon.onclick = function() {
     coupeSon.innerHTML = "Mute";
   }
 }
-</pre>
+```
 
-<h2 id="Autres_options_des_noeuds">Autres options des noeuds</h2>
+## Autres options des noeuds
 
-<p>On peut créer un grand nombre d'autres noeuds avec la Web Audio API. De façon générale, ils fonctionnent de façon très similaire à ceux que nous venons de voir: on crée un noeud, le connecte avec d'autres noeuds, et on manipule ensuite ses propriétés et méthodes pour agir sur la source.</p>
+On peut créer un grand nombre d'autres noeuds avec la Web Audio API. De façon générale, ils fonctionnent de façon très similaire à ceux que nous venons de voir: on crée un noeud, le connecte avec d'autres noeuds, et on manipule ensuite ses propriétés et méthodes pour agir sur la source.
 
-<p>Ce document passe en revue quelques-uns des outils et effets disponibles; vous trouverez davantage de détails sur les pages de référence de la {{ domxref("Web_Audio_API") }}.</p>
+Ce document passe en revue quelques-uns des outils et effets disponibles; vous trouverez davantage de détails sur les pages de référence de la {{ domxref("Web_Audio_API") }}.
 
-<h3 id="Noeuds_modulateurs_d'onde">Noeuds modulateurs d'onde</h3>
+### Noeuds modulateurs d'onde
 
-<p>On peut créer un noeud modulatur d'onde avec la méthode {{ domxref("AudioContext.createWaveShaper") }} :</p>
+On peut créer un noeud modulatur d'onde avec la méthode {{ domxref("AudioContext.createWaveShaper") }} :
 
-<pre class="brush: js">var distortion = contexteAudio.createWaveShaper();
-</pre>
+```js
+var distortion = contexteAudio.createWaveShaper();
+```
 
-<p>On associe ensuite à cet objet une forme d'onde définie mathématiquement, qui est appliquée à l'onde de base pour créer un effet de distortion. Ecrire son propre algorithme n'est pas si simple, et pour commencer le mieux est encore d'en chercher un sur le Web. Par exemple, nous avons trouvé celui-ci sur <a href="http://stackoverflow.com/questions/22312841/waveshaper-node-in-webaudio-how-to-emulate-distortion">Stack Overflow</a>:</p>
+On associe ensuite à cet objet une forme d'onde définie mathématiquement, qui est appliquée à l'onde de base pour créer un effet de distortion. Ecrire son propre algorithme n'est pas si simple, et pour commencer le mieux est encore d'en chercher un sur le Web. Par exemple, nous avons trouvé celui-ci sur [Stack Overflow](http://stackoverflow.com/questions/22312841/waveshaper-node-in-webaudio-how-to-emulate-distortion):
 
-<pre class="brush: js">function genererCourbeDistortion(amount) {
+```js
+function genererCourbeDistortion(amount) {
   var k = typeof amount === 'number' ? amount : 50,
     n_samples = 44100,
     curve = new Float32Array(n_samples),
     deg = Math.PI / 180,
     i = 0,
     x;
-  for ( ; i &lt; n_samples; ++i ) {
+  for ( ; i < n_samples; ++i ) {
     x = i * 2 / n_samples - 1;
     curve[i] = ( 3 + k ) * x * 20 * deg / ( Math.PI + k * Math.abs(x) );
   }
   return curve;
 };
-</pre>
+```
 
-<p>L'exemple suivant, qui vient de <a href="https://github.com/mdn/voice-change-o-matic">Voice-change-O-matic</a>, connecte un noeud de  <code>distortion</code> à un graphe audio, puis applique l'algorithme de forme d'onde précédent au noeud de distortion :</p>
+L'exemple suivant, qui vient de [Voice-change-O-matic](https://github.com/mdn/voice-change-o-matic), connecte un noeud de  `distortion` à un graphe audio, puis applique l'algorithme de forme d'onde précédent au noeud de distortion :
 
-<pre class="brush: js">source.connect(analyser);
+```js
+source.connect(analyser);
 analyser.connect(distortion);
 distortion.connect(biquadFilter);
 
 ...
 
 distortion.curve = genererCourbeDistortion(400);
-</pre>
+```
 
-<h3 id="Filtre_biquad">Filtre biquad</h3>
+### Filtre biquad
 
-<p>Les filtres biquad ont de nombreuses options. Nous montrons ici comment créer un filtre biquad avec la méthode {{domxref("AudioContext.createBiquadFilter")}}.</p>
+Les filtres biquad ont de nombreuses options. Nous montrons ici comment créer un filtre biquad avec la méthode {{domxref("AudioContext.createBiquadFilter")}}.
 
-<pre class="brush: js">var filtreBiquad = contexteAudio.createBiquadFilter();
-</pre>
+```js
+var filtreBiquad = contexteAudio.createBiquadFilter();
+```
 
-<p>Le filtre utilisé dans la démo Voice-change-o-matic est un filtre lowshelf, qui amplifie le son au niveau des basses. Ici on augmente de 25 décibels toutes les fréquences en dessous de 1000.</p>
+Le filtre utilisé dans la démo Voice-change-o-matic est un filtre lowshelf, qui amplifie le son au niveau des basses. Ici on augmente de 25 décibels toutes les fréquences en dessous de 1000.
 
-<pre class="brush: js">filtreBiquad.type = "lowshelf";
+```js
+filtreBiquad.type = "lowshelf";
 filtreBiquad.frequency.value = 1000;
 filtreBiquad.gain.value = 25;
-</pre>
+```
 
-<h2 id="Autres_usages_de_la_Web_Audio_API">Autres usages de la Web Audio API</h2>
+## Autres usages de la Web Audio API
 
-<p>La Web Audio API peut avoir bien d'autres applications que la visualisation ou la spatialisation audio (comme gérer la balance d'un son). Nous détaillerons d'autres options dans des articles séparés.</p>
+La Web Audio API peut avoir bien d'autres applications que la visualisation ou la spatialisation audio (comme gérer la balance d'un son). Nous détaillerons d'autres options dans des articles séparés.
diff --git a/files/fr/web/api/web_audio_api/visualizations_with_web_audio_api/index.md b/files/fr/web/api/web_audio_api/visualizations_with_web_audio_api/index.md
index 8a128b4d81..c565d3c6b6 100644
--- a/files/fr/web/api/web_audio_api/visualizations_with_web_audio_api/index.md
+++ b/files/fr/web/api/web_audio_api/visualizations_with_web_audio_api/index.md
@@ -3,98 +3,117 @@ title: Visualisations avec la Web Audio API
 slug: Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API
 translation_of: Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API
 ---
-<p>L'une des fonctionnalités les plus intéressantes de la Web Audio API est la possibilité d'extraire de la source audio la fréquence, la forme d'onde et d'autres données, qui permettent de créer des visualisations. Cet article explique comment, et fournit quelques exemples basiques.</p>
+L'une des fonctionnalités les plus intéressantes de la Web Audio API est la possibilité d'extraire de la source audio la fréquence, la forme d'onde et d'autres données, qui permettent de créer des visualisations. Cet article explique comment, et fournit quelques exemples basiques.
 
-<div class="note">
-<p><strong>Note :</strong> Vous pouvez trouver des exemples de tous les extraits de the code dans notre démo <a href="https://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a>.</p>
-</div>
+> **Note :** Vous pouvez trouver des exemples de tous les extraits de the code dans notre démo [Voice-change-O-matic](https://mdn.github.io/voice-change-o-matic/).
 
-<h2 id="Concepts_de_base">Concepts de base</h2>
+## Concepts de base
 
-<p>Pour extraire les données d'une source audio, il faut un {{ domxref("AnalyserNode") }}, que l'on peut créer à l'aide de la méthode {{ domxref("AudioContext.createAnalyser()") }}, par exemple:</p>
+Pour extraire les données d'une source audio, il faut un {{ domxref("AnalyserNode") }}, que l'on peut créer à l'aide de la méthode {{ domxref("AudioContext.createAnalyser()") }}, par exemple:
 
-<pre class="brush: js">var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
-var analyseur = contexteAudio.createAnalyser();</pre>
+```js
+var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+var analyseur = contexteAudio.createAnalyser();
+```
 
-<p>Ce noeud est ensuite connecté à la source audio :</p>
+Ce noeud est ensuite connecté à la source audio :
 
-<pre class="brush: js">source = contexteAudio.createMediaStreamSource(stream);
+```js
+source = contexteAudio.createMediaStreamSource(stream);
 source.connect(analyseur);
 analyseur.connect(distortion);
-// etc.</pre>
+// etc.
+```
 
-<div class="note">
-<p><strong>Note :</strong> il n'est pas nécessaire de connecter la sortie de l'analyseur à un noeud pour qu'il fonctionne, il suffit que l'entrée soit connectée à la source, directement ou via un autre noeud.</p>
-</div>
+> **Note :** il n'est pas nécessaire de connecter la sortie de l'analyseur à un noeud pour qu'il fonctionne, il suffit que l'entrée soit connectée à la source, directement ou via un autre noeud.
 
-<p>L'analyseur va alors capturer les données audio en usant une Transformation de Fourier Rapide (fft) à une certaine fréquence, en fonction de ce qui est spécifié dans la propriété {{ domxref("AnalyserNode.fftSize") }} (la valeur par défaut est 2048).</p>
+L'analyseur va alors capturer les données audio en usant une Transformation de Fourier Rapide (fft) à une certaine fréquence, en fonction de ce qui est spécifié dans la propriété {{ domxref("AnalyserNode.fftSize") }} (la valeur par défaut est 2048).
 
-<div class="note">
-<p><strong>Note :</strong> Vous pouvez aussi spécifier des valeurs de puissance minimum et maximum pour la plage de mise à l'échelle fft, en utilisant {{ domxref("AnalyserNode.minDecibels") }} et {{ domxref("AnalyserNode.maxDecibels") }}, et plusieurs valeurs de transition en utilisant {{ domxref("AnalyserNode.smoothingTimeConstant") }}.</p>
-</div>
+> **Note :** Vous pouvez aussi spécifier des valeurs de puissance minimum et maximum pour la plage de mise à l'échelle fft, en utilisant {{ domxref("AnalyserNode.minDecibels") }} et {{ domxref("AnalyserNode.maxDecibels") }}, et plusieurs valeurs de transition en utilisant {{ domxref("AnalyserNode.smoothingTimeConstant") }}.
 
-<p>Pour capturer des données, il faut utiliser les méthodes {{ domxref("AnalyserNode.getFloatFrequencyData()") }} et {{ domxref("AnalyserNode.getByteFrequencyData()") }} pour la fréquence, et {{ domxref("AnalyserNode.getByteTimeDomainData()") }} et {{ domxref("AnalyserNode.getFloatTimeDomainData()") }} pour la forme d'onde.</p>
+Pour capturer des données, il faut utiliser les méthodes {{ domxref("AnalyserNode.getFloatFrequencyData()") }} et {{ domxref("AnalyserNode.getByteFrequencyData()") }} pour la fréquence, et {{ domxref("AnalyserNode.getByteTimeDomainData()") }} et {{ domxref("AnalyserNode.getFloatTimeDomainData()") }} pour la forme d'onde.
 
-<p>Ces méthodes copient les données dans le tableau passé en paramètre, il faut donc créer un tableau avant de les invoquer. La première produit des nombres flottants à simple précision de 32 bits, qui ne peuvent être stockées dans un simple tableau javascript. Vous devez créer un domxref("Float32Array") }} ou un {{ domxref("Uint8Array") }}, en fonction du type de données que vous traitez.</p>
+Ces méthodes copient les données dans le tableau passé en paramètre, il faut donc créer un tableau avant de les invoquer. La première produit des nombres flottants à simple précision de 32 bits, qui ne peuvent être stockées dans un simple tableau javascript. Vous devez créer un domxref("Float32Array") }} ou un {{ domxref("Uint8Array") }}, en fonction du type de données que vous traitez.
 
-<p>Par exemple, disons que nous manipulons une fft de fréquence 2048. Nous retournons la valeur {{ domxref("AnalyserNode.frequencyBinCount") }}, qui correspond à la moitié de la fréquence, puis nous appelons la méthode  Uint8Array() en passant frequencyBinCount comme argument pour la taille — c'est le nombre de points de données qui seront collectées pour cette fréquence.</p>
+Par exemple, disons que nous manipulons une fft de fréquence 2048. Nous retournons la valeur {{ domxref("AnalyserNode.frequencyBinCount") }}, qui correspond à la moitié de la fréquence, puis nous appelons la méthode  Uint8Array() en passant frequencyBinCount comme argument pour la taille — c'est le nombre de points de données qui seront collectées pour cette fréquence.
 
-<pre class="brush: js">analyseur.fftSize = 2048;
+```js
+analyseur.fftSize = 2048;
 var tailleMemoireTampon = analyseur.frequencyBinCount;
-var tableauDonnees = new Uint8Array(tailleMemoireTampon);</pre>
+var tableauDonnees = new Uint8Array(tailleMemoireTampon);
+```
 
-<p>Pour récupérer les données et les copier dans notre tableau, nous appelons ensuite la méthode de notre choix, en passant le tableau comme argument. Par exemple :</p>
+Pour récupérer les données et les copier dans notre tableau, nous appelons ensuite la méthode de notre choix, en passant le tableau comme argument. Par exemple :
 
-<pre class="brush: js">analyseur.getByteTimeDomainData(tableauDonnees);</pre>
+```js
+analyseur.getByteTimeDomainData(tableauDonnees);
+```
 
-<p>Nous avons maintenant les données audio qui correspondent à ce laps de temps capturées dans notre tableau, et pouvons procéder à la visualisation, par exemple en les dessinant dans un élément HTML5 {{ htmlelement("canvas") }}.</p>
+Nous avons maintenant les données audio qui correspondent à ce laps de temps capturées dans notre tableau, et pouvons procéder à la visualisation, par exemple en les dessinant dans un élément HTML5 {{ htmlelement("canvas") }}.
 
-<p>Regardons quelques exemples précis.</p>
+Regardons quelques exemples précis.
 
-<h2 id="Création_d'une_forme_d'onde_oscilloscope">Création d'une forme d'onde / oscilloscope</h2>
+## Création d'une forme d'onde / oscilloscope
 
-<p>Pour visualiser un oscilloscope (chapeau à <a href="http://soledadpenades.com/">Soledad Penadés</a> pour le code original sur <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L123-L167">Voice-change-O-matic</a>), nous commençons par suivre la procédure standard décrite dans le paragraphe précédent pour mettre en place le tampon :</p>
+Pour visualiser un oscilloscope (chapeau à [Soledad Penadés](http://soledadpenades.com/) pour le code original sur [Voice-change-O-matic](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L123-L167)), nous commençons par suivre la procédure standard décrite dans le paragraphe précédent pour mettre en place le tampon :
 
-<pre class="brush: js">analyseur.fftSize = 2048;
+```js
+analyseur.fftSize = 2048;
 var tailleMemoireTampon = analyseur.frequencyBinCount;
-var tableauDonnees = new Uint8Array(tailleMemoireTampon);</pre>
+var tableauDonnees = new Uint8Array(tailleMemoireTampon);
+```
 
-<p>Ensuite nous effaçons ce qui est dessiné sur le canvas , avant le nouvel affichage :</p>
+Ensuite nous effaçons ce qui est dessiné sur le canvas , avant le nouvel affichage :
 
-<pre class="brush: js">contexteCanvas.clearRect(0, 0, LARGEUR, HAUTEUR);</pre>
+```js
+contexteCanvas.clearRect(0, 0, LARGEUR, HAUTEUR);
+```
 
-<p>Puis nous définissons la fonction <code>dessiner()</code> :</p>
+Puis nous définissons la fonction `dessiner()` :
 
-<pre class="brush: js">function <code>dessiner</code>() {</pre>
+```js
+function dessiner() {
+```
 
-<p>Dans cette fonction, nous utilisons <code>requestAnimationFrame()</code> pour faire boucler la fonction une fois qu'elle a été appelée :</p>
+Dans cette fonction, nous utilisons `requestAnimationFrame()` pour faire boucler la fonction une fois qu'elle a été appelée :
 
-<pre class="brush: js">      dessin = requestAnimationFrame(<code>dessiner</code>);</pre>
+```js
+      dessin = requestAnimationFrame(dessiner);
+```
 
-<p>Ensuite, nous récupérons les données et les passons dans notre tableau :</p>
+Ensuite, nous récupérons les données et les passons dans notre tableau :
 
-<pre class="brush: js">      analyseur.getByteTimeDomainData(tableauDonnees);</pre>
+```js
+      analyseur.getByteTimeDomainData(tableauDonnees);
+```
 
-<p>Nous remplissons le canvas avec une couleur de fond :</p>
+Nous remplissons le canvas avec une couleur de fond :
 
-<pre class="brush: js">      contexteCanvas.fillStyle = 'rgb(200, 200, 200)';
-      contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR);</pre>
+```js
+      contexteCanvas.fillStyle = 'rgb(200, 200, 200)';
+      contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR);
+```
 
-<p>Nous définissons l'épaisseur et la couleur du trait pour la forme d'onde que nous allons dessiner, et commençons le tracé :</p>
+Nous définissons l'épaisseur et la couleur du trait pour la forme d'onde que nous allons dessiner, et commençons le tracé :
 
-<pre class="brush: js">      contexteCanvas.lineWidth = 2;
+```js
+      contexteCanvas.lineWidth = 2;
       contexteCanvas.strokeStyle = 'rgb(0, 0, 0)';
 
-      contexteCanvas.beginPath();</pre>
+      contexteCanvas.beginPath();
+```
 
-<p>Pour déterminer la largeur de chacun des segments qui composent la ligne, nous divisons la largeur du canvas par la taille du tableau de données (laquelle est égale à FrequencyBinCount, comme nous l'avons dit plus haut), puis nous définissons une variable x pour stocker la position à laquelle il faut se déplacer pour chaque segment.</p>
+Pour déterminer la largeur de chacun des segments qui composent la ligne, nous divisons la largeur du canvas par la taille du tableau de données (laquelle est égale à FrequencyBinCount, comme nous l'avons dit plus haut), puis nous définissons une variable x pour stocker la position à laquelle il faut se déplacer pour chaque segment.
 
-<pre class="brush: js">      var largeurSegment = LARGEUR * 1.0 / tailleMemoireTampon;
-      var x = 0;</pre>
+```js
+      var largeurSegment = LARGEUR * 1.0 / tailleMemoireTampon;
+      var x = 0;
+```
 
-<p>Nous parcourons une boucle, qui définit la position du segment de l'onde pour chaque valeur du tableau: la hauteur (y) est basée sur cette valeur, tandis que la position en x correspond à une largeur de segment supplémentaire à chaque itération :</p>
+Nous parcourons une boucle, qui définit la position du segment de l'onde pour chaque valeur du tableau: la hauteur (y) est basée sur cette valeur, tandis que la position en x correspond à une largeur de segment supplémentaire à chaque itération :
 
-<pre class="brush: js">      for(var i = 0; i &lt; tailleMemoireTampon; i++) {
+```js
+      for(var i = 0; i < tailleMemoireTampon; i++) {
 
         var v = tableauDonnees[i] / 128.0;
         var y = v * HAUTEUR/2;
@@ -106,58 +125,70 @@ var tableauDonnees = new Uint8Array(tailleMemoireTampon);</pre>
         }
 
         x += largeurSegment;
-      }</pre>
+      }
+```
 
-<p>Finally, quand le tracé de la ligne a atteint le bord droit du canvas, nous l'affichons:</p>
+Finally, quand le tracé de la ligne a atteint le bord droit du canvas, nous l'affichons:
 
-<pre class="brush: js">      contexteCanvas.lineTo(canvas.width, canvas.height/2);
+```js
+      contexteCanvas.lineTo(canvas.width, canvas.height/2);
       contexteCanvas.stroke();
-    };</pre>
+    };
+```
 
-<p>Nous pouvons maintenant appeler la fonction <code>draw()</code> que nous venons de définir pour lancer le processus:</p>
+Nous pouvons maintenant appeler la fonction `draw()` que nous venons de définir pour lancer le processus:
 
-<pre class="brush: js">    <code>dessiner</code>();</pre>
+```js
+    dessiner();
+```
 
-<p>Ce qui nous donne un affichage de forme d'onde, actualisé plusieurs fois par seconde :</p>
+Ce qui nous donne un affichage de forme d'onde, actualisé plusieurs fois par seconde :
 
-<p><img alt="Une ligne d'oscilloscope noire, illustrant la forme d'onde d'un signal audio" src="wave.png"></p>
+![Une ligne d'oscilloscope noire, illustrant la forme d'onde d'un signal audio](wave.png)
 
-<h2 id="Création_d'un_graphique_à_barres_représentant_la_fréquence">Création d'un graphique à barres représentant la fréquence</h2>
+## Création d'un graphique à barres représentant la fréquence
 
-<p>Un autre exemple de visualisation assez simple à créer est le graphique à barres dans le style de Winamp. Il y en a un dans la démo Voice-change-O-matic; regardons comment il est fait.</p>
+Un autre exemple de visualisation assez simple à créer est le graphique à barres dans le style de Winamp. Il y en a un dans la démo Voice-change-O-matic; regardons comment il est fait.
 
-<p>Tout d'abord, nous mettons de nouveau en place notre analyseur et notre tableau de données, et nous effaçons le contenu du canvas avec <code>clearRect()</code>. La seule différence est que la valeur de la propriété fftSize est beaucoup plus petite, de façon à ce que chaque barre soit assez grosse pour ressembler à une barre et non à un fil.</p>
+Tout d'abord, nous mettons de nouveau en place notre analyseur et notre tableau de données, et nous effaçons le contenu du canvas avec `clearRect()`. La seule différence est que la valeur de la propriété fftSize est beaucoup plus petite, de façon à ce que chaque barre soit assez grosse pour ressembler à une barre et non à un fil.
 
-<pre class="brush: js">    analyseur.fftSize = 256;
+```js
+    analyseur.fftSize = 256;
     var tailleMemoireTampon = analyseur.frequencyBinCount;
     console.log(tailleMemoireTampon);
     var tableauDonnees = new Uint8Array(tailleMemoireTampon);
 
-    canvasCtx.clearRect(0, 0, LARGEUR, HAUTEUR);</pre>
+    canvasCtx.clearRect(0, 0, LARGEUR, HAUTEUR);
+```
 
-<p>Ensuite, nous passons à la fonction <code>dessiner()</code>, là encore avec une boucle <code>requestAnimationFrame()</code> qui efface l'affichage et le met à jour.</p>
+Ensuite, nous passons à la fonction `dessiner()`, là encore avec une boucle `requestAnimationFrame()` qui efface l'affichage et le met à jour.
 
-<pre class="brush: js">    function <code>dessiner</code>() {
-      dessin = requestAnimationFrame(<code>dessiner</code>);
+```js
+    function dessiner() {
+      dessin = requestAnimationFrame(dessiner);
 
       analyseur.getByteFrequencyData(tableauDonnees);
 
       contexteCanvas.fillStyle = 'rgb(0, 0, 0)';
-      contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR);</pre>
+      contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR);
+```
 
-<p>A présent nous calculons la largeur d'une barre, à savoir la largeur du canvas divisée par le nombre de barres (par la taille du buffer). Et nous multiplions cette valeur par 2.5, en prévision du fait que la plupart des fréquences ne contiendront pas de son, car les sons que nous entendons se situent dans un intervalle de fréquence plutôt bas. Nous ne voulons pas afficher des barres vides, nous ne gardons donc que celles qui ont une hauteur suffisante.</p>
+A présent nous calculons la largeur d'une barre, à savoir la largeur du canvas divisée par le nombre de barres (par la taille du buffer). Et nous multiplions cette valeur par 2.5, en prévision du fait que la plupart des fréquences ne contiendront pas de son, car les sons que nous entendons se situent dans un intervalle de fréquence plutôt bas. Nous ne voulons pas afficher des barres vides, nous ne gardons donc que celles qui ont une hauteur suffisante.
 
-<p>Nous déclarons une variable <code>hauteurBarre</code>, ainsi qu'une variable <code>x</code> pour mémoriser la posiiton à laquelle il faudra dessiner la barre.</p>
+Nous déclarons une variable `hauteurBarre`, ainsi qu'une variable `x` pour mémoriser la posiiton à laquelle il faudra dessiner la barre.
 
-<pre class="brush: js">      var largeurBarre = (LARGEUR / tailleMemoireTampon) * 2.5;
+```js
+      var largeurBarre = (LARGEUR / tailleMemoireTampon) * 2.5;
       var hauteurBarre;
-      var x = 0;</pre>
+      var x = 0;
+```
 
-<p>Nous créons maintenant une boucle et itérons sur chaque valeur de <code>tableauDonnees</code> : <code>hauteurBarre</code> correspond à la valeur du tableau, la couleur de fond est aussi basée sur cette valeur (plus elle est grande plus la barre est lumineuse), et la barre est placée à <code>x</code> pixels du bord gauche du canvas, sa largeur est <code>largeurBarre</code> et sa hauteur est <code>hauteurBarre/2</code> (nous avons finalement décidé de diviser cette valeur par deux pour que les barres rentrent mieux dans le canvas).</p>
+Nous créons maintenant une boucle et itérons sur chaque valeur de `tableauDonnees` : `hauteurBarre` correspond à la valeur du tableau, la couleur de fond est aussi basée sur cette valeur (plus elle est grande plus la barre est lumineuse), et la barre est placée à `x` pixels du bord gauche du canvas, sa largeur est `largeurBarre` et sa hauteur est `hauteurBarre/2` (nous avons finalement décidé de diviser cette valeur par deux pour que les barres rentrent mieux dans le canvas).
 
-<p>La position verticale de la barre est calculée comme tel : <code>HAUTEUR-hauteurBarre/2</code>, parce que nous voulons que les barres s'alignent en bas du canvas, et non pas en haut (auquel cas nous aurions positionné la barre à 0).</p>
+La position verticale de la barre est calculée comme tel : `HAUTEUR-hauteurBarre/2`, parce que nous voulons que les barres s'alignent en bas du canvas, et non pas en haut (auquel cas nous aurions positionné la barre à 0).
 
-<pre class="brush: js">      for(var i = 0; i &lt; tailleMemoireTampon; i++) {
+```js
+      for(var i = 0; i < tailleMemoireTampon; i++) {
         hauteurBarre = tableauDonnees[i]/2;
 
         contexteCanvas.fillStyle = 'rgb(' + (hauteurBarre+100) + ',50,50)';
@@ -165,16 +196,17 @@ var tableauDonnees = new Uint8Array(tailleMemoireTampon);</pre>
 
         x += largeurBarre + 1;
       }
-    };</pre>
+    };
+```
 
-<p>Là encore, nous invoquons la fonction <code>dessiner</code>() pour lancer le processus.</p>
+Là encore, nous invoquons la fonction `dessiner`() pour lancer le processus.
 
-<pre class="brush: js">    <code>dessiner</code>();</pre>
+```js
+    dessiner();
+```
 
-<p>Ce code donne le résultat suivant:</p>
+Ce code donne le résultat suivant:
 
-<p><img alt="Une série de barres rouges dans un barre-graphe qui illustre l'intensité des différentes fréquences d'un signal audio" src="bar-graph.png"></p>
+![Une série de barres rouges dans un barre-graphe qui illustre l'intensité des différentes fréquences d'un signal audio](bar-graph.png)
 
-<div class="note">
-<p><strong>Note :</strong> Les examples de cet article montrent l'utilisation de {{ domxref("AnalyserNode.getByteFrequencyData()") }} et {{ domxref("AnalyserNode.getByteTimeDomainData()") }}. Pour des exemples montrant {{ domxref("AnalyserNode.getFloatFrequencyData()") }} et {{ domxref("AnalyserNode.getFloatTimeDomainData()") }}, voir notre démo <a href="http://mdn.github.io/voice-change-o-matic-float-data/">Voice-change-O-matic-float-data</a> (et son <a href="https://github.com/mdn/voice-change-o-matic-float-data">code source</a>) — elle est identique à la <a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic </a>originale, à ceci près qu'elle utilise des données à virgule flottante, au lieu de données non signées.</p>
-</div>
\ No newline at end of file
+> **Note :** Les examples de cet article montrent l'utilisation de {{ domxref("AnalyserNode.getByteFrequencyData()") }} et {{ domxref("AnalyserNode.getByteTimeDomainData()") }}. Pour des exemples montrant {{ domxref("AnalyserNode.getFloatFrequencyData()") }} et {{ domxref("AnalyserNode.getFloatTimeDomainData()") }}, voir notre démo [Voice-change-O-matic-float-data](http://mdn.github.io/voice-change-o-matic-float-data/) (et son [code source](https://github.com/mdn/voice-change-o-matic-float-data)) — elle est identique à la [Voice-change-O-matic ](http://mdn.github.io/voice-change-o-matic/)originale, à ceci près qu'elle utilise des données à virgule flottante, au lieu de données non signées.
diff --git a/files/fr/web/api/web_audio_api/web_audio_spatialization_basics/index.md b/files/fr/web/api/web_audio_api/web_audio_spatialization_basics/index.md
index d0de8755ec..0946ffe4a5 100644
--- a/files/fr/web/api/web_audio_api/web_audio_spatialization_basics/index.md
+++ b/files/fr/web/api/web_audio_api/web_audio_spatialization_basics/index.md
@@ -3,73 +3,70 @@ title: Web audio spatialization basics
 slug: Web/API/Web_Audio_API/Web_audio_spatialization_basics
 translation_of: Web/API/Web_Audio_API/Web_audio_spatialization_basics
 ---
-<p>En plus de sa grande variété de fonctionnalités et d'options, la Web Audio API permet aussi d'émuler la différence dans l'écoute d'un son lorsqu'un auditeur se déplace par rapport à une source, par exemple un panoramique lorsqu'il se déplace de gauche à droite de la source. On parle alors de spatialisation. Cet article expose les notions de base pour implémenter ce type de système.</p>
+En plus de sa grande variété de fonctionnalités et d'options, la Web Audio API permet aussi d'émuler la différence dans l'écoute d'un son lorsqu'un auditeur se déplace par rapport à une source, par exemple un panoramique lorsqu'il se déplace de gauche à droite de la source. On parle alors de spatialisation. Cet article expose les notions de base pour implémenter ce type de système.
 
-<p>Le cas d'utilisation le plus simple est la simulation des altérations d'un son de façon réaliste pour imaginer comment une source se comportera pour un personnage qui se déplace dans un environnement 3D.</p>
+Le cas d'utilisation le plus simple est la simulation des altérations d'un son de façon réaliste pour imaginer comment une source se comportera pour un personnage qui se déplace dans un environnement 3D.
 
-<h2 id="Concepts_de_base">Concepts de base</h2>
+## Concepts de base
 
-<p>Créer une spatialisation audio comporte deux principaux aspects :</p>
+Créer une spatialisation audio comporte deux principaux aspects :
 
-<ol>
- <li>L'objet {{ domxref("AudioListener") }} représente la position dans l'espace 3D d'une personne qui écoute la source audio; on y accède avec la propriété {{ domxref("AudioContext.listener") }}. On peut paramétrer la position et l'orientation de l'auditeur, entre autres.</li>
- <li>L'objet {{ domxref("PannerNode") }} représente la position dans l'espace 3D d'une source audio; on le crée avec la méthode {{ domxref("AudioContext.createPanner()") }}. On peut paramétrer un certain nombre d'options comme la position, l'orientation, la vitesse, et l'angle s'un cône qui indique dans quelle direction le son peut être entendu (s'il n'est pas omnidirectionnel).</li>
-</ol>
+1.  L'objet {{ domxref("AudioListener") }} représente la position dans l'espace 3D d'une personne qui écoute la source audio; on y accède avec la propriété {{ domxref("AudioContext.listener") }}. On peut paramétrer la position et l'orientation de l'auditeur, entre autres.
+2.  L'objet {{ domxref("PannerNode") }} représente la position dans l'espace 3D d'une source audio; on le crée avec la méthode {{ domxref("AudioContext.createPanner()") }}. On peut paramétrer un certain nombre d'options comme la position, l'orientation, la vitesse, et l'angle s'un cône qui indique dans quelle direction le son peut être entendu (s'il n'est pas omnidirectionnel).
 
-<p>Dans cet article nous allons nous concentrer sur la position de l'auditeur et du panoramique, tous deux paramétrés à l'aide de la méthode <code>setPosition(). </code>Celle-co accepte trois valeurs qui correspondent à X, Y, et Z dans un système de coordonnées cartésien.</p>
+Dans cet article nous allons nous concentrer sur la position de l'auditeur et du panoramique, tous deux paramétrés à l'aide de la méthode `setPosition(). `Celle-co accepte trois valeurs qui correspondent à X, Y, et Z dans un système de coordonnées cartésien.
 
-<div class="note">
-<p><strong>Note :</strong> Trouver les bonnes valeurs pour que le cas d'utilisation fonctionne bien et semble réaliste n'est pas toujours évident et peur prendre du temps, et il faut souvent continuer à modifier les valeurs par la suite. Nous discuterons ceci plus en détail en parcourant le code qui suit.</p>
-</div>
+> **Note :** Trouver les bonnes valeurs pour que le cas d'utilisation fonctionne bien et semble réaliste n'est pas toujours évident et peur prendre du temps, et il faut souvent continuer à modifier les valeurs par la suite. Nous discuterons ceci plus en détail en parcourant le code qui suit.
 
-<p>Les autres options  disponibles, que nous ne traiterons pas ici, sont :</p>
+Les autres options  disponibles, que nous ne traiterons pas ici, sont :
 
-<ul>
- <li><code>setOrientation()</code>: disponible à la fois pour l'auditeur et le panoramique for both the listener and panner, cette méthode paramètre l'orientation. Elle prend six valeurs: les trois premières représentent un vecteur frontal dans l'espace 3D  (imaginez une personne et la direction dans laquelle pointe son nez) and les trois autre un vecteur de direction verticale  dans l'espace 3D space (imaginez la même personne et la direction vers laquelle pointe le haut de sa tête)</li>
- <li><code>setVelocity()</code>: disponible uniquement pour le panoramique; permet de paramétrer la vitesse à laquelle une source audio se déplace, à l'aide d'un vecteur de vitesse dans l'espace 3D (valeurs X, Y, et Z). When set, the browser will apply a doppler shift effect.</li>
- <li><code>coneInnerAngle</code>, <code>coneOuterAngle</code>, and <code>coneOuterGain</code>: Available for the panner only, these allow you to set an angle inside/outside of which the volume will be reduced by the specified gain value. This is done to specify directional audio sources, but the default is 360/360/0, respectively, meaning that by default you get an omnidirectional sound source.</li>
-</ul>
+- `setOrientation()`: disponible à la fois pour l'auditeur et le panoramique for both the listener and panner, cette méthode paramètre l'orientation. Elle prend six valeurs: les trois premières représentent un vecteur frontal dans l'espace 3D  (imaginez une personne et la direction dans laquelle pointe son nez) and les trois autre un vecteur de direction verticale  dans l'espace 3D space (imaginez la même personne et la direction vers laquelle pointe le haut de sa tête)
+- `setVelocity()`: disponible uniquement pour le panoramique; permet de paramétrer la vitesse à laquelle une source audio se déplace, à l'aide d'un vecteur de vitesse dans l'espace 3D (valeurs X, Y, et Z). When set, the browser will apply a doppler shift effect.
+- `coneInnerAngle`, `coneOuterAngle`, and `coneOuterGain`: Available for the panner only, these allow you to set an angle inside/outside of which the volume will be reduced by the specified gain value. This is done to specify directional audio sources, but the default is 360/360/0, respectively, meaning that by default you get an omnidirectional sound source.
 
-<h2 id="A_simple_demo_Room_of_metal">A simple demo: Room of metal</h2>
+## A simple demo: Room of metal
 
-<p>In our demo, you can move left and right past a 2.5D stereo that can be made to play a groovy tune, and you can also move towards the stereo. As you move left and right, the tune will pan to emulate how the tune will sound as you change your position proportional to the sound source. When you zoom in and out, the sound will get louder and quieter to suit.</p>
+In our demo, you can move left and right past a 2.5D stereo that can be made to play a groovy tune, and you can also move towards the stereo. As you move left and right, the tune will pan to emulate how the tune will sound as you change your position proportional to the sound source. When you zoom in and out, the sound will get louder and quieter to suit.
 
-<div class="note">
-<p><strong>Note :</strong> You can see this example <a href="https://mdn.github.io/webaudio-examples/panner-node/">running live</a>, and <a href="https://github.com/mdn/panner-node">view the source code</a>.</p>
-</div>
+> **Note :** You can see this example [running live](https://mdn.github.io/webaudio-examples/panner-node/), and [view the source code](https://github.com/mdn/panner-node).
 
-<p>Let's walk through the code and see how this was actually done.</p>
+Let's walk through the code and see how this was actually done.
 
-<h3 id="Defining_basic_variables">Defining basic variables</h3>
+### Defining basic variables
 
-<p>First we define a new audio context, panner, listener, and source:</p>
+First we define a new audio context, panner, listener, and source:
 
-<pre class="brush: js">var AudioContext = window.AudioContext || window.webkitAudioContext;
+```js
+var AudioContext = window.AudioContext || window.webkitAudioContext;
 var audioCtx = new AudioContext();
 
 var panner = audioCtx.createPanner();
 var listener = audioCtx.listener;
-var source;</pre>
+var source;
+```
 
-<p>Next we grab the objects on the page we are using for our demo. First the <code>play</code> and <code>stop</code> buttons to control the audio, then the <code>boomBox</code>, which is just the graphic of the stereo that we are moving around. After that, we grab a reference to two paragraphs that are used to output the position of the <code>listener</code> and <code>panner</code>, for debugging purposes.</p>
+Next we grab the objects on the page we are using for our demo. First the `play` and `stop` buttons to control the audio, then the `boomBox`, which is just the graphic of the stereo that we are moving around. After that, we grab a reference to two paragraphs that are used to output the position of the `listener` and `panner`, for debugging purposes.
 
-<pre class="brush: js">var play = document.querySelector('.play');
+```js
+var play = document.querySelector('.play');
 var stop = document.querySelector('.stop');
 
 var boomBox = document.querySelector('.boom-box');
 
 var listenerData = document.querySelector('.listener-data');
-var pannerData = document.querySelector('.panner-data');</pre>
+var pannerData = document.querySelector('.panner-data');
+```
 
-<h3 id="Working_out_listener_and_panner_positions">Working out listener and panner positions</h3>
+### Working out listener and panner positions
 
-<p>Next comes a little bit of slightly fiddly maths. We want to make the <code>boomBox</code>, <code>listener</code>, and <code>panner</code> appear in the center of the screen initially, so we work out the width and height of the viewport, and divide both by two to get our X and Y values for those things. The <code>zPos</code> is only used on the panner, and is updated as the zoom controls are used (see later on); the initial value of 295 was decided on fairly arbitrarily — it sounded good. As long as you set the position of the panner appropriately in relation to the listener position, you will be ok.</p>
+Next comes a little bit of slightly fiddly maths. We want to make the `boomBox`, `listener`, and `panner` appear in the center of the screen initially, so we work out the width and height of the viewport, and divide both by two to get our X and Y values for those things. The `zPos` is only used on the panner, and is updated as the zoom controls are used (see later on); the initial value of 295 was decided on fairly arbitrarily — it sounded good. As long as you set the position of the panner appropriately in relation to the listener position, you will be ok.
 
-<p>Next for this section, we set a <code>leftBound</code> and <code>rightBound</code>, which is the furthest we want our stereo graph to travel left and right. For the layout, we are using <a href="/en-US/docs/Web/Guide/CSS/Flexible_boxes">Flexbox</a> to initially place the <code>boomBox</code> right in the center of the viewport, after which we then use iterative transforms and {{domxref("window.requestAnimationFrame()")}} to apply the <code>boomBox</code> movement. Therefore the "0" position is in the center of the viewport so the rightmost position is that position plus half the viewport, but minus 50 (pixels) so the <code>boomBox</code> can't shoot all the way off the right of the screen, and the leftmost position is that position minus half the viewport, but plus 50 (pixels), so the <code>boomBox</code> can't shoot all the way off the left of the screen.</p>
+Next for this section, we set a `leftBound` and `rightBound`, which is the furthest we want our stereo graph to travel left and right. For the layout, we are using [Flexbox](/en-US/docs/Web/Guide/CSS/Flexible_boxes) to initially place the `boomBox` right in the center of the viewport, after which we then use iterative transforms and {{domxref("window.requestAnimationFrame()")}} to apply the `boomBox` movement. Therefore the "0" position is in the center of the viewport so the rightmost position is that position plus half the viewport, but minus 50 (pixels) so the `boomBox` can't shoot all the way off the right of the screen, and the leftmost position is that position minus half the viewport, but plus 50 (pixels), so the `boomBox` can't shoot all the way off the left of the screen.
 
-<p>The last part of this code is the <code>xIterator</code> — we set this to a 150th of the screen width, and then move the <code>boomBox</code> left and right by this amount when the left and right controls are pressed. We use this rather than a constant so that the app is a little more responsive.</p>
+The last part of this code is the `xIterator` — we set this to a 150th of the screen width, and then move the `boomBox` left and right by this amount when the left and right controls are pressed. We use this rather than a constant so that the app is a little more responsive.
 
-<pre class="brush: js">var WIDTH = window.innerWidth;
+```js
+var WIDTH = window.innerWidth;
 var HEIGHT = window.innerHeight;
 
 var xPos = WIDTH/2;
@@ -79,25 +76,31 @@ var zPos = 295;
 leftBound = (-xPos) + 50;
 rightBound = xPos - 50;
 
-xIterator = WIDTH/150;</pre>
+xIterator = WIDTH/150;
+```
 
-<p>Next we set the position of the <code>listener</code> and output the coordinates to the <code>listenerData</code> paragraph. It is always going to be in the same place, in a good position relative to the panner.</p>
+Next we set the position of the `listener` and output the coordinates to the `listenerData` paragraph. It is always going to be in the same place, in a good position relative to the panner.
 
-<pre class="brush: js">listener.setPosition(xPos,yPos,300);
-listenerData.innerHTML = 'Listener data: X ' + xPos + ' Y ' + yPos + ' Z ' + 300;</pre>
+```js
+listener.setPosition(xPos,yPos,300);
+listenerData.innerHTML = 'Listener data: X ' + xPos + ' Y ' + yPos + ' Z ' + 300;
+```
 
-<p>In the <code>positionPanner()</code> function, we set the position of the panner, and output the coordinates to the <code>pannerData</code> paragraph. This function is called with each animation frame as the <code>boomBox</code> is moved, so the panner position updates accordingly:</p>
+In the `positionPanner()` function, we set the position of the panner, and output the coordinates to the `pannerData` paragraph. This function is called with each animation frame as the `boomBox` is moved, so the panner position updates accordingly:
 
-<pre class="brush: js">function positionPanner() {
+```js
+function positionPanner() {
   panner.setPosition(xPos,yPos,zPos);
   pannerData.innerHTML = 'Panner data: X ' + xPos + ' Y ' + yPos + ' Z ' + zPos;
-}</pre>
+}
+```
 
-<h3 id="Loading_and_playing_our_music">Loading and playing our music</h3>
+### Loading and playing our music
 
-<p>Next we use XHR to load an audio track, and <code>decodeAudioData()</code> to decode it and stick it in a buffer. Then we put the buffer into an {{domxref("AudioBufferSourceNode") }}:</p>
+Next we use XHR to load an audio track, and `decodeAudioData()` to decode it and stick it in a buffer. Then we put the buffer into an {{domxref("AudioBufferSourceNode") }}:
 
-<pre class="brush: js">function getData() {
+```js
+function getData() {
   source = audioCtx.createBufferSource();
   request = new XMLHttpRequest();
 
@@ -124,11 +127,13 @@ listenerData.innerHTML = 'Listener data: X ' + xPos + ' Y ' + yPos + ' Z ' + 300
   }
 
   request.send();
-}</pre>
+}
+```
 
-<p>The next stage is to wire up the buttons to stop and play the audio. The pulse wrapper is an extra wrapper {{ htmlelement("div") }} wrapped around the <code>boomBox</code>. We apply the pulsating (<code>scaleY</code>) animation to this element when the play button is clicked, not the <code>boomBox</code> itself, because the <code>boomBox</code> already has animations applied to it throughout the course of the app's running.</p>
+The next stage is to wire up the buttons to stop and play the audio. The pulse wrapper is an extra wrapper {{ htmlelement("div") }} wrapped around the `boomBox`. We apply the pulsating (`scaleY`) animation to this element when the play button is clicked, not the `boomBox` itself, because the `boomBox` already has animations applied to it throughout the course of the app's running.
 
-<pre class="brush: js">var pulseWrapper = document.querySelector('.pulse-wrapper');
+```js
+var pulseWrapper = document.querySelector('.pulse-wrapper');
 
 play.onclick = function() {
   getData();
@@ -141,38 +146,40 @@ stop.onclick = function() {
   source.stop(0);
   play.removeAttribute('disabled');
   pulseWrapper.classList.remove('pulsate');
-}</pre>
+}
+```
 
-<h3 id="Moving_the_boom_box_and_the_panner">Moving the boom box and the panner</h3>
+### Moving the boom box and the panner
 
-<p>The next section of code grabs references to the left, right, zoom in, and zoom out buttons, and defines initial X, Y, and scale amounts for the <code>boomBox</code> to be positioned by when the transforms first start to be applied.</p>
+The next section of code grabs references to the left, right, zoom in, and zoom out buttons, and defines initial X, Y, and scale amounts for the `boomBox` to be positioned by when the transforms first start to be applied.
 
-<pre class="brush: js">var leftButton = document.querySelector('.left');
+```js
+var leftButton = document.querySelector('.left');
 var rightButton = document.querySelector('.right');
 var zoomInButton = document.querySelector('.zoom-in');
 var zoomOutButton = document.querySelector('.zoom-out');
 
 var boomX = 0;
 var boomY = 0;
-var boomZoom = 0.25;</pre>
+var boomZoom = 0.25;
+```
 
-<p>Now we get to the four functions that control the left, right, zoom in, and zoom out functionality: <code>moveRight()</code>, <code>moveLeft()</code>, <code>zoomIn()</code>, and <code>zoomOut()</code>. Each is a little different, but works in a similar way:</p>
+Now we get to the four functions that control the left, right, zoom in, and zoom out functionality: `moveRight()`, `moveLeft()`, `zoomIn()`, and `zoomOut()`. Each is a little different, but works in a similar way:
 
-<ol>
- <li>The <code>boomX</code> or <code>boomZoom</code> variables are updated in order to change the <code>boomBox</code>'s position on the screen.</li>
- <li>The <code>xPos</code> or <code>zPos</code> variables are updated in order to change the {{domxref("PannerNode") }}'s position in 3D space. The changes are quite small, but these are the values we found to work.</li>
- <li>A check is done to see if the upper bounds of movement have been reached (a <code>boomX</code> equal or less than <code>leftBound</code> or greater than <code>rightBound</code>, or a <code>boomZoom</code> greater than 4 or equal or less than 0.25.) If so, the values are updated to force the <code>boomBox</code> to stay in certain constraints, and to force the <code>xPos</code> and <code>zPos</code> variables to also stay within certain constrants. These are, respectively, 5 greater or less than <code>WIDTH/2</code>, and a <code>zPos</code> between 295 and 299.9. These are the values we found produced a relatively realistic sounding panning and volume adjustment as the <code>boomBox</code> was moved around.</li>
- <li><code>boomBox</code> is transformed (translated and scaled) by the new values of <code>boomX</code>, <code>boomY</code>, and <code>boomZoom</code> to move it around the screen.</li>
- <li>The <code>positionPanner()</code> function is run to update the position of the panner.</li>
- <li>A {{domxref("window.requestAnimationFrame") }} instance is called to keep running the function for as long as the mouse button is pressed down.</li>
- <li>The <code>requestAnimationFrame</code> ID is returned out of the function so that it can be cancelled when the mouse button is released.</li>
-</ol>
+1.  The `boomX` or `boomZoom` variables are updated in order to change the `boomBox`'s position on the screen.
+2.  The `xPos` or `zPos` variables are updated in order to change the {{domxref("PannerNode") }}'s position in 3D space. The changes are quite small, but these are the values we found to work.
+3.  A check is done to see if the upper bounds of movement have been reached (a `boomX` equal or less than `leftBound` or greater than `rightBound`, or a `boomZoom` greater than 4 or equal or less than 0.25.) If so, the values are updated to force the `boomBox` to stay in certain constraints, and to force the `xPos` and `zPos` variables to also stay within certain constrants. These are, respectively, 5 greater or less than `WIDTH/2`, and a `zPos` between 295 and 299.9. These are the values we found produced a relatively realistic sounding panning and volume adjustment as the `boomBox` was moved around.
+4.  `boomBox` is transformed (translated and scaled) by the new values of `boomX`, `boomY`, and `boomZoom` to move it around the screen.
+5.  The `positionPanner()` function is run to update the position of the panner.
+6.  A {{domxref("window.requestAnimationFrame") }} instance is called to keep running the function for as long as the mouse button is pressed down.
+7.  The `requestAnimationFrame` ID is returned out of the function so that it can be cancelled when the mouse button is released.
 
-<pre class="brush: js">function moveRight() {
+```js
+function moveRight() {
   boomX += -xIterator;
   xPos += -0.066;
 
-  if(boomX &lt;= leftBound) {
+  if(boomX <= leftBound) {
     boomX = leftBound;
     xPos = (WIDTH/2) - 5;
   }
@@ -188,7 +195,7 @@ function moveLeft() {
   boomX += xIterator;
   xPos += 0.066;
 
-  if(boomX &gt; rightBound) {
+  if(boomX > rightBound) {
     boomX = rightBound;
     xPos = (WIDTH/2) + 5;
   }
@@ -204,7 +211,7 @@ function zoomIn() {
   boomZoom += 0.05;
   zPos += 0.066;
 
-  if(boomZoom &gt; 4) {
+  if(boomZoom > 4) {
     boomZoom = 4;
     zPos = 299.9;
   }
@@ -220,7 +227,7 @@ function zoomOut() {
   boomZoom += -0.05;
   zPos += -0.066;
 
-  if(boomZoom &lt;= 0.25) {
+  if(boomZoom <= 0.25) {
     boomZoom = 0.25;
     zPos = 295;
   }
@@ -230,11 +237,13 @@ function zoomOut() {
   boomBox.style.transform = "translate(" + boomX + "px , " + boomY + "px) scale(" + boomZoom + ")";
   zoomOutLoop = requestAnimationFrame(zoomOut);
   return zoomOutLoop;
-}</pre>
+}
+```
 
-<p>In the final block of code, we simply wire up event handlers to control the movement when the buttons are pressed. For each button, the relevant function is invoked <code>onmousedown</code>; then <code>onmouseup</code>, {{domxref("window.cancelAnimationFrame") }} is called along with the returned <code>requestAnimationFrame()</code> ID to stop the animation happening.</p>
+In the final block of code, we simply wire up event handlers to control the movement when the buttons are pressed. For each button, the relevant function is invoked `onmousedown`; then `onmouseup`, {{domxref("window.cancelAnimationFrame") }} is called along with the returned `requestAnimationFrame()` ID to stop the animation happening.
 
-<pre class="brush: js">leftButton.onmousedown = moveLeft;
+```js
+leftButton.onmousedown = moveLeft;
 leftButton.onmouseup = function () {
   window.cancelAnimationFrame(leftLoop);
 }
@@ -252,10 +261,9 @@ zoomInButton.onmouseup = function () {
 zoomOutButton.onmousedown = zoomOut;
 zoomOutButton.onmouseup = function () {
   window.cancelAnimationFrame(zoomOutLoop);
-}</pre>
+}
+```
 
-<p>As you can see, the actual panner code is pretty simple — specify the positions, and the browser takes care of the rest. It is working out the surrounding code, and the values to use for positioning, which takes a bit more time.</p>
+As you can see, the actual panner code is pretty simple — specify the positions, and the browser takes care of the rest. It is working out the surrounding code, and the values to use for positioning, which takes a bit more time.
 
-<div class="note">
-<p><strong>Note :</strong> You are probably thinking "why didn't you move the listener and keep the panner still instead: surely that is a bit more obvious?" Well, perhaps, but we felt that since the panner has more methods and properties available to it, moving it would allow more control in the long term.</p>
-</div>
\ No newline at end of file
+> **Note :** You are probably thinking "why didn't you move the listener and keep the panner still instead: surely that is a bit more obvious?" Well, perhaps, but we felt that since the panner has more methods and properties available to it, moving it would allow more control in the long term.
diff --git a/files/fr/web/api/web_speech_api/index.md b/files/fr/web/api/web_speech_api/index.md
index f659e9f550..7b43fa3975 100644
--- a/files/fr/web/api/web_speech_api/index.md
+++ b/files/fr/web/api/web_speech_api/index.md
@@ -9,100 +9,90 @@ tags:
   - synthèse vocale
 translation_of: Web/API/Web_Speech_API
 ---
-<div>{{DefaultAPISidebar("Web Speech API")}}{{seecompattable}}</div>
-
-<p>L'API <i lang="en">Web Speech</i> permet d'intégrer des données liées à la voix dans des applications web. L'API <i lang="en">Web Speech</i> se compose de deux parties : <i lang="en">SpeechSynthesis</i> (synthèse vocale) et <i lang="en">SpeechRecognition</i> (reconnaissance vocale asynchrone).</p>
-
-<h2 id="Concepts_et_usages_de_lAPI_Web_Speech">Concepts et usages de l'API Web Speech</h2>
-
-<p>L'API <i lang="en">Web Speech</i> rend les applications web capables de manipuler des données liées à la voix. Cette API se compose de deux parties :</p>
-
-<ul>
- <li>La reconnaissance vocale (<i lang="en">Speech recognition</i>) est accessible via l'interface {{domxref("SpeechRecognition")}} qui fournit la capacité de reconnaitre la voix dans une source audio (normalement grâce à l'outil par défaut de reconnaissance vocale de l'appareil) et de réagir de façon pertinente. En général, on utilisera le constructeur de l'interface pour créer un nouvel objet {{domxref("SpeechRecognition")}} qui a un nombre de gestionnaires d'événements disponibles pour détecter lorsque de la parole arrive dans le micro de l'appareil. L'interface {{domxref("SpeechGrammar")}} représente un conteneur pour une série de règles de grammaire que votre application devrait reconnaître. La grammaire est définie en utilisant <a href="http://www.w3.org/TR/jsgf/">JSpeech Grammar Format</a> (<strong>JSGF</strong>).</li>
- <li>La synthèse vocale (<i lang="en">Speech synthesis</i>) est disponible via l'interface {{domxref("SpeechSynthesis")}}, un composant qui permet aux programmes de vocaliser leur contenu textuel (normalement grâce au synthétiseur vocal par défaut de l'appareil). Differents types de voix sont disponibles dans les objets {{domxref("SpeechSynthesisVoice")}}, et les différentes parties de texte à vocaliser sont interprétés par les objets {{domxref("SpeechSynthesisUtterance")}}. On peut les faire vocaliser en les passant à la méthode {{domxref("SpeechSynthesis.speak()")}}.</li>
-</ul>
-
-<p>Pour plus de détails concernant ces fonctionnalités, voir <a href="/fr/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API">Using the Web Speech API.</a></p>
-
-<h2 id="Les_interfaces_de_lAPI_Web_Speech">Les interfaces de l'API Web Speech</h2>
-
-<h3 id="Le_reconnaissance_vocale">Le reconnaissance vocale</h3>
-
-<dl>
- <dt>{{domxref("SpeechRecognition")}}</dt>
- <dd>L'interface de contrôle de l'outil de reconnaissance; elle traite aussi le {{domxref("SpeechRecognitionEvent")}} reçu de l'outil de reconnaissance.</dd>
- <dt>{{domxref("SpeechRecognitionAlternative")}}</dt>
- <dd>Représente un mot unique qui a été reconnu par l'outil de reconnaissane vocale.</dd>
- <dt>{{domxref("SpeechRecognitionError")}}</dt>
- <dd>Répresente les messages d'erreur de l'outil de reconnaissance vocale.</dd>
- <dt>{{domxref("SpeechRecognitionEvent")}}</dt>
- <dd>L'objet événement pour les événements {{event("result")}} et {{event("nomatch")}}, et contient toutes les données associées avec un résultat de reconnaissance vocale intermédiaire ou définitif.</dd>
- <dt>{{domxref("SpeechGrammar")}}</dt>
- <dd>Les mots ou schémas de mots que l'on demande à l'outil de reconnaissance vocale de reconnaître.</dd>
- <dt>{{domxref("SpeechGrammarList")}}</dt>
- <dd>Répresente une liste des objets {{domxref("SpeechGrammar")}}.</dd>
- <dt>{{domxref("SpeechRecognitionResult")}}</dt>
- <dd>Répresente une unique reconnaissance réussie, qui peut contenir plusieurs objets {{domxref("SpeechRecognitionAlternative")}}.</dd>
- <dt>{{domxref("SpeechRecognitionResultList")}}</dt>
- <dd>Répresente une liste d'objets {{domxref("SpeechRecognitionResult")}}, ou bien un seul si les résultats sont récupérés en mode {{domxref("SpeechRecognition.continuous","continuous")}}.</dd>
-</dl>
-
-<h3 id="La_synthèse_vocale">La synthèse vocale</h3>
-
-<dl>
- <dt>{{domxref("SpeechSynthesis")}}</dt>
- <dd>L'interface de contrôle de l'outil de vocalisation; elle peut être utiliser pour rechercher des informations concernant les voix de synthèse disponible dans l'appareil, le démarrage et l'interruption de la vocalisation, et les commandes complémentaires.</dd>
- <dt>{{domxref("SpeechSynthesisErrorEvent")}}</dt>
- <dd>Contient les informations concernant toutes les erreurs qui se produisent pendant le traitement des objets {{domxref("SpeechSynthesisUtterance")}} dans l'outil de synthèse vocale.</dd>
- <dt>{{domxref("SpeechSynthesisEvent")}}</dt>
- <dd>Contient les informations concernant l'état actuel des objets {{domxref("SpeechSynthesisUtterance")}} qui ont été traités par l'outil de synthèse vocale.</dd>
- <dt>{{domxref("SpeechSynthesisUtterance")}}</dt>
- <dd>Répresente une requête de synthèse vocale. Il contient le contenu que l'outil de synthèse vocale devrait vocaliser et les informations sur comment le vocaliser (e.g. langue, ton et volume).</dd>
-</dl>
-
-<dl>
- <dt>{{domxref("SpeechSynthesisVoice")}}</dt>
- <dd>Représente une voix qui est supportée par le système. Chaque <code>SpeechSynthesisVoice</code> a son propre outil de synthèse vocale incluant les informations concernant la langue, le nom et l'URI.</dd>
- <dt>{{domxref("Window.speechSynthesis")}}</dt>
- <dd>Spécifiée comme une partie de l'interface <code>[NoInterfaceObject]</code> intitulée <code>SpeechSynthesisGetter</code>, et implémentée par l'objet <code>Window</code>, la propriété <code>speechSynthesis</code> fournit l'accès au controleur {{domxref("SpeechSynthesis")}}, et de ce fait un point d'entrée à la fonctionnalité de synthèse vocale.</dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Le <a href="https://github.com/mdn/web-speech-api/">Web Speech API repo</a> sur GitHub contient des démos qui illustrent la reconnaissance vocale et la synthèse vocale.</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">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Web Speech API')}}</td>
-   <td>{{Spec2('Web Speech API')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<h3 id="SpeechRecognition"><i lang="en"><code>SpeechRecognition</code></i></h3>
-
-<p>{{Compat("api.SpeechRecognition", 0)}}</p>
-
-<h3 id="SpeechSynthesis"><i lang="en"><code>SpeechSynthesis</code></i></h3>
-
-<p>{{Compat("api.SpeechSynthesis", 0)}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API">Using the Web Speech API</a></li>
- <li><a href="http://www.sitepoint.com/talking-web-pages-and-the-speech-synthesis-api/">Article sur le site SitePoint</a></li>
- <li><a href="http://updates.html5rocks.com/2014/01/Web-apps-that-talk---Introduction-to-the-Speech-Synthesis-API">Article HTML5Rocks</a></li>
- <li><a href="http://aurelio.audero.it/demo/speech-synthesis-api-demo.html">Demo</a> [aurelio.audero.it]</li>
-</ul>
+{{DefaultAPISidebar("Web Speech API")}}{{seecompattable}}
+
+L'API <i lang="en">Web Speech</i> permet d'intégrer des données liées à la voix dans des applications web. L'API <i lang="en">Web Speech</i> se compose de deux parties : <i lang="en">SpeechSynthesis</i> (synthèse vocale) et <i lang="en">SpeechRecognition</i> (reconnaissance vocale asynchrone).
+
+## Concepts et usages de l'API Web Speech
+
+L'API <i lang="en">Web Speech</i> rend les applications web capables de manipuler des données liées à la voix. Cette API se compose de deux parties :
+
+- La reconnaissance vocale (
+
+  <i lang="en">Speech recognition</i>
+
+  ) est accessible via l'interface {{domxref("SpeechRecognition")}} qui fournit la capacité de reconnaitre la voix dans une source audio (normalement grâce à l'outil par défaut de reconnaissance vocale de l'appareil) et de réagir de façon pertinente. En général, on utilisera le constructeur de l'interface pour créer un nouvel objet {{domxref("SpeechRecognition")}} qui a un nombre de gestionnaires d'événements disponibles pour détecter lorsque de la parole arrive dans le micro de l'appareil. L'interface {{domxref("SpeechGrammar")}} représente un conteneur pour une série de règles de grammaire que votre application devrait reconnaître. La grammaire est définie en utilisant [JSpeech Grammar Format](http://www.w3.org/TR/jsgf/) (**JSGF**).
+
+- La synthèse vocale (
+
+  <i lang="en">Speech synthesis</i>
+
+  ) est disponible via l'interface {{domxref("SpeechSynthesis")}}, un composant qui permet aux programmes de vocaliser leur contenu textuel (normalement grâce au synthétiseur vocal par défaut de l'appareil). Differents types de voix sont disponibles dans les objets {{domxref("SpeechSynthesisVoice")}}, et les différentes parties de texte à vocaliser sont interprétés par les objets {{domxref("SpeechSynthesisUtterance")}}. On peut les faire vocaliser en les passant à la méthode {{domxref("SpeechSynthesis.speak()")}}.
+
+Pour plus de détails concernant ces fonctionnalités, voir [Using the Web Speech API.](/fr/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API)
+
+## Les interfaces de l'API Web Speech
+
+### Le reconnaissance vocale
+
+- {{domxref("SpeechRecognition")}}
+  - : L'interface de contrôle de l'outil de reconnaissance; elle traite aussi le {{domxref("SpeechRecognitionEvent")}} reçu de l'outil de reconnaissance.
+- {{domxref("SpeechRecognitionAlternative")}}
+  - : Représente un mot unique qui a été reconnu par l'outil de reconnaissane vocale.
+- {{domxref("SpeechRecognitionError")}}
+  - : Répresente les messages d'erreur de l'outil de reconnaissance vocale.
+- {{domxref("SpeechRecognitionEvent")}}
+  - : L'objet événement pour les événements {{event("result")}} et {{event("nomatch")}}, et contient toutes les données associées avec un résultat de reconnaissance vocale intermédiaire ou définitif.
+- {{domxref("SpeechGrammar")}}
+  - : Les mots ou schémas de mots que l'on demande à l'outil de reconnaissance vocale de reconnaître.
+- {{domxref("SpeechGrammarList")}}
+  - : Répresente une liste des objets {{domxref("SpeechGrammar")}}.
+- {{domxref("SpeechRecognitionResult")}}
+  - : Répresente une unique reconnaissance réussie, qui peut contenir plusieurs objets {{domxref("SpeechRecognitionAlternative")}}.
+- {{domxref("SpeechRecognitionResultList")}}
+  - : Répresente une liste d'objets {{domxref("SpeechRecognitionResult")}}, ou bien un seul si les résultats sont récupérés en mode {{domxref("SpeechRecognition.continuous","continuous")}}.
+
+### La synthèse vocale
+
+- {{domxref("SpeechSynthesis")}}
+  - : L'interface de contrôle de l'outil de vocalisation; elle peut être utiliser pour rechercher des informations concernant les voix de synthèse disponible dans l'appareil, le démarrage et l'interruption de la vocalisation, et les commandes complémentaires.
+- {{domxref("SpeechSynthesisErrorEvent")}}
+  - : Contient les informations concernant toutes les erreurs qui se produisent pendant le traitement des objets {{domxref("SpeechSynthesisUtterance")}} dans l'outil de synthèse vocale.
+- {{domxref("SpeechSynthesisEvent")}}
+  - : Contient les informations concernant l'état actuel des objets {{domxref("SpeechSynthesisUtterance")}} qui ont été traités par l'outil de synthèse vocale.
+- {{domxref("SpeechSynthesisUtterance")}}
+  - : Répresente une requête de synthèse vocale. Il contient le contenu que l'outil de synthèse vocale devrait vocaliser et les informations sur comment le vocaliser (e.g. langue, ton et volume).
+
+<!---->
+
+- {{domxref("SpeechSynthesisVoice")}}
+  - : Représente une voix qui est supportée par le système. Chaque `SpeechSynthesisVoice` a son propre outil de synthèse vocale incluant les informations concernant la langue, le nom et l'URI.
+- {{domxref("Window.speechSynthesis")}}
+  - : Spécifiée comme une partie de l'interface `[NoInterfaceObject]` intitulée `SpeechSynthesisGetter`, et implémentée par l'objet `Window`, la propriété `speechSynthesis` fournit l'accès au controleur {{domxref("SpeechSynthesis")}}, et de ce fait un point d'entrée à la fonctionnalité de synthèse vocale.
+
+## Exemples
+
+Le [Web Speech API repo](https://github.com/mdn/web-speech-api/) sur GitHub contient des démos qui illustrent la reconnaissance vocale et la synthèse vocale.
+
+## Spécifications
+
+| Spécification                            | État                                 | Commentaire         |
+| ---------------------------------------- | ------------------------------------ | ------------------- |
+| {{SpecName('Web Speech API')}} | {{Spec2('Web Speech API')}} | Définition initiale |
+
+## Compatibilité des navigateurs
+
+### <i lang="en"><code>SpeechRecognition</code></i>
+
+{{Compat("api.SpeechRecognition", 0)}}
+
+### <i lang="en"><code>SpeechSynthesis</code></i>
+
+{{Compat("api.SpeechSynthesis", 0)}}
+
+## Voir aussi
+
+- [Using the Web Speech API](/fr/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API)
+- [Article sur le site SitePoint](http://www.sitepoint.com/talking-web-pages-and-the-speech-synthesis-api/)
+- [Article HTML5Rocks](http://updates.html5rocks.com/2014/01/Web-apps-that-talk---Introduction-to-the-Speech-Synthesis-API)
+- [Demo](http://aurelio.audero.it/demo/speech-synthesis-api-demo.html) \[aurelio.audero.it]
diff --git a/files/fr/web/api/web_speech_api/using_the_web_speech_api/index.md b/files/fr/web/api/web_speech_api/using_the_web_speech_api/index.md
index e826557e2a..c09db4c4fd 100644
--- a/files/fr/web/api/web_speech_api/using_the_web_speech_api/index.md
+++ b/files/fr/web/api/web_speech_api/using_the_web_speech_api/index.md
@@ -12,209 +12,220 @@ tags:
   - vocale
 translation_of: Web/API/Web_Speech_API/Using_the_Web_Speech_API
 ---
-<p>L'API Web Speech fournit deux fonctionnalités différentes — la reconnaissance vocale, et la synthèse vocale (aussi appelée "text to speech", ou tts) — qui ouvrent de nouvelles possibiités d'accessibilité, et de mécanismes de contrôle. Cet article apporte une simple introduction à ces deux domaines, accompagnée de démonstrations.</p>
+L'API Web Speech fournit deux fonctionnalités différentes — la reconnaissance vocale, et la synthèse vocale (aussi appelée "text to speech", ou tts) — qui ouvrent de nouvelles possibiités d'accessibilité, et de mécanismes de contrôle. Cet article apporte une simple introduction à ces deux domaines, accompagnée de démonstrations.
 
-<h2 id="Reconnaissance_vocale">Reconnaissance vocale</h2>
+## Reconnaissance vocale
 
-<p>La reconnaissance vocale implique de recevoir de la voix à travers un dispositif de capture du son, tel qu'un microphone, qui est ensuite vérifiée par un service de reconnaissance vocale utilisant une "grammaire" (le vocabulaire que vous voulez faire reconnaître par une application donnée). Quand un mot ou une phrase sont reconnus avec succès, ils sont retournés comme résultat (ou une liste de résultats) sous la forme d'une chaîne de caractères, et d'autres actions peuvent être initiées à la suite de ce résultat.</p>
+La reconnaissance vocale implique de recevoir de la voix à travers un dispositif de capture du son, tel qu'un microphone, qui est ensuite vérifiée par un service de reconnaissance vocale utilisant une "grammaire" (le vocabulaire que vous voulez faire reconnaître par une application donnée). Quand un mot ou une phrase sont reconnus avec succès, ils sont retournés comme résultat (ou une liste de résultats) sous la forme d'une chaîne de caractères, et d'autres actions peuvent être initiées à la suite de ce résultat.
 
-<p>L'API Web Speech a une interface principale de contrôle  — {{domxref("SpeechRecognition")}} — plus un nombre d'interfaces inter-reliées pour représenter une grammaire, des résultats, etc. Généralement, le système de reconnaissance vocale par défaut disponible sur le dispositif matériel sera utilisé pour la reconnaissance vocale  — la plupart des systèmes d'exploitation modernes ont un système de reonnaissance vocale pour transmettre des commandes vocales. On pense à Dictation sur macOS, Siri sur iOS, Cortana sur Windows 10, Android Speech, etc.</p>
+L'API Web Speech a une interface principale de contrôle  — {{domxref("SpeechRecognition")}} — plus un nombre d'interfaces inter-reliées pour représenter une grammaire, des résultats, etc. Généralement, le système de reconnaissance vocale par défaut disponible sur le dispositif matériel sera utilisé pour la reconnaissance vocale  — la plupart des systèmes d'exploitation modernes ont un système de reonnaissance vocale pour transmettre des commandes vocales. On pense à Dictation sur macOS, Siri sur iOS, Cortana sur Windows 10, Android Speech, etc.
 
-<div class="note">
-<p><strong>Note :</strong> Sur certains navigateurs, comme Chrome, utiliser la reconnaissance vocale sur une page web implique de disposer d'un moteur de reconnaissance basé sur un serveur. Votre flux audio est envoyé à un service web pour traitement, le moteur ne fonctionnera donc pas hors ligne.</p>
-</div>
+> **Note :** Sur certains navigateurs, comme Chrome, utiliser la reconnaissance vocale sur une page web implique de disposer d'un moteur de reconnaissance basé sur un serveur. Votre flux audio est envoyé à un service web pour traitement, le moteur ne fonctionnera donc pas hors ligne.
 
-<h3 id="Demo">Demo</h3>
+### Demo
 
-<p>Pour montrer une simple utilisation de la reconnaissance vocale Web speech, nous avons écrit une demo appelée  <a href="https://github.com/mdn/web-speech-api/tree/master/speech-color-changer">Speech color changer</a>. Quand l'écran est touché ou cliqué, vous pouvez dire un mot clé de couleur HTML et la couleur d'arrière plan de l'application sera modifié par la couleur choisie.</p>
+Pour montrer une simple utilisation de la reconnaissance vocale Web speech, nous avons écrit une demo appelée  [Speech color changer](https://github.com/mdn/web-speech-api/tree/master/speech-color-changer). Quand l'écran est touché ou cliqué, vous pouvez dire un mot clé de couleur HTML et la couleur d'arrière plan de l'application sera modifié par la couleur choisie.
 
-<p>Pour lancer la demo, vous pouvez cloner (ou <a href="https://github.com/mdn/web-speech-api/archive/master.zip">directement télécharger</a>) le dépôt Github dont elle fait partie, ouvrir le fichier d'index HTML dans un navigateur pour ordinateur de bureau le supportant comme Chrome, ou naviguer vers <a href="https://mdn.github.io/web-speech-api/speech-color-changer/">l'URL de démonstration live</a>, sur un navigateur pour mobile le supportant comme Chrome.</p>
+Pour lancer la demo, vous pouvez cloner (ou [directement télécharger](https://github.com/mdn/web-speech-api/archive/master.zip)) le dépôt Github dont elle fait partie, ouvrir le fichier d'index HTML dans un navigateur pour ordinateur de bureau le supportant comme Chrome, ou naviguer vers [l'URL de démonstration live](https://mdn.github.io/web-speech-api/speech-color-changer/), sur un navigateur pour mobile le supportant comme Chrome.
 
-<h3 id="Support_des_navigateurs">Support des navigateurs</h3>
+### Support des navigateurs
 
-<p>Le support de la reconnaissance vocale via l'API Web Speech est actuellement limité à Chrome pour ordinateur de bureau et pour mobiles sur Android — Chrome le supporte depuis la version 33 mais avec des interfaces préfixées spécifiques, donc vous avez besoin d'inclure des versions d'interfaces préfixées définies, comme : <code>webkitSpeechRecognition</code>.</p>
+Le support de la reconnaissance vocale via l'API Web Speech est actuellement limité à Chrome pour ordinateur de bureau et pour mobiles sur Android — Chrome le supporte depuis la version 33 mais avec des interfaces préfixées spécifiques, donc vous avez besoin d'inclure des versions d'interfaces préfixées définies, comme : `webkitSpeechRecognition`.
 
-<h3 id="HTML_and_CSS">HTML and CSS</h3>
+### HTML and CSS
 
-<p>The HTML and CSS for the app is really trivial. We simply have a title, instructions paragraph, and a div into which we output diagnostic messages.</p>
+The HTML and CSS for the app is really trivial. We simply have a title, instructions paragraph, and a div into which we output diagnostic messages.
 
-<pre class="brush: html">&lt;h1&gt;Speech color changer&lt;/h1&gt;
-&lt;p&gt;Tap/click then say a color to change the background color of the app.&lt;/p&gt;
-&lt;div&gt;
-  &lt;p class="output"&gt;&lt;em&gt;...diagnostic messages&lt;/em&gt;&lt;/p&gt;
-&lt;/div&gt;</pre>
+```html
+<h1>Speech color changer</h1>
+<p>Tap/click then say a color to change the background color of the app.</p>
+<div>
+  <p class="output"><em>...diagnostic messages</em></p>
+</div>
+```
 
-<p>The CSS provides a very simple responsive styling so that it looks ok across devices.</p>
+The CSS provides a very simple responsive styling so that it looks ok across devices.
 
-<h3 id="JavaScript">JavaScript</h3>
+### JavaScript
 
-<p>Let's look at the JavaScript in a bit more detail.</p>
+Let's look at the JavaScript in a bit more detail.
 
-<h4 id="Chrome_support">Chrome support</h4>
+#### Chrome support
 
-<p>As mentioned earlier, Chrome currently supports speech recognition with prefixed properties, therefore at the start of our code we include these lines to feed the right objects to Chrome, and any future implementations that might support the features without a prefix:</p>
+As mentioned earlier, Chrome currently supports speech recognition with prefixed properties, therefore at the start of our code we include these lines to feed the right objects to Chrome, and any future implementations that might support the features without a prefix:
 
-<pre class="brush: js">var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition
+```js
+var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition
 var SpeechGrammarList = SpeechGrammarList || webkitSpeechGrammarList
-var SpeechRecognitionEvent = SpeechRecognitionEvent || webkitSpeechRecognitionEvent</pre>
+var SpeechRecognitionEvent = SpeechRecognitionEvent || webkitSpeechRecognitionEvent
+```
 
-<h4 id="The_grammar">The grammar</h4>
+#### The grammar
 
-<p>The next part of our code defines the grammar we want our app to recognise. The following variable is defined to hold our grammar:</p>
+The next part of our code defines the grammar we want our app to recognise. The following variable is defined to hold our grammar:
 
-<pre class="brush: js">var colors = [ 'aqua' , 'azure' , 'beige', 'bisque', 'black', 'blue', 'brown', 'chocolate', 'coral' ... ];
-var grammar = '#JSGF V1.0; grammar colors; public &lt;color&gt; = ' + colors.join(' | ') + ' ;'</pre>
+```js
+var colors = [ 'aqua' , 'azure' , 'beige', 'bisque', 'black', 'blue', 'brown', 'chocolate', 'coral' ... ];
+var grammar = '#JSGF V1.0; grammar colors; public <color> = ' + colors.join(' | ') + ' ;'
+```
 
-<p>The grammar format used is <a href="http://www.w3.org/TR/jsgf/">JSpeech Grammar Format</a> (<strong>JSGF</strong>) — you can find a lot more about it at the previous link to its spec. However, for now let's just run through it quickly:</p>
+The grammar format used is [JSpeech Grammar Format](http://www.w3.org/TR/jsgf/) (**JSGF**) — you can find a lot more about it at the previous link to its spec. However, for now let's just run through it quickly:
 
-<ul>
- <li>The lines are separated by semi-colons, just like in JavaScript.</li>
- <li>The first line — <code>#JSGF V1.0;</code> — states the format and version used. This always needs to be included first.</li>
- <li>The second line indicates a type of term that we want to recognise. <code>public</code> declares that it is a public rule, the string in angle brackets defines the recognised name for this term (<code>color</code>), and the list of items that follow the equals sign are the alternative values that will be recognised and accepted as appropriate values for the term. Note how each is separated by a pipe character.</li>
- <li>You can have as many terms defined as you want on separate lines following the above structure, and include fairly complex grammar definitions. For this basic demo, we are just keeping things simple. </li>
-</ul>
+- The lines are separated by semi-colons, just like in JavaScript.
+- The first line — `#JSGF V1.0;` — states the format and version used. This always needs to be included first.
+- The second line indicates a type of term that we want to recognise. `public` declares that it is a public rule, the string in angle brackets defines the recognised name for this term (`color`), and the list of items that follow the equals sign are the alternative values that will be recognised and accepted as appropriate values for the term. Note how each is separated by a pipe character.
+- You can have as many terms defined as you want on separate lines following the above structure, and include fairly complex grammar definitions. For this basic demo, we are just keeping things simple.
 
-<h4 id="Plugging_the_grammar_into_our_speech_recognition">Plugging the grammar into our speech recognition</h4>
+#### Plugging the grammar into our speech recognition
 
-<p>The next thing to do is define a speech recogntion instance to control the recognition for our application. This is done using the {{domxref("SpeechRecognition.SpeechRecognition()","SpeechRecognition()")}} constructor. We also create a new speech grammar list to contain our grammar, using the {{domxref("SpeechGrammarList.SpeechGrammarList()","SpeechGrammarList()")}} constructor.</p>
+The next thing to do is define a speech recogntion instance to control the recognition for our application. This is done using the {{domxref("SpeechRecognition.SpeechRecognition()","SpeechRecognition()")}} constructor. We also create a new speech grammar list to contain our grammar, using the {{domxref("SpeechGrammarList.SpeechGrammarList()","SpeechGrammarList()")}} constructor.
 
-<pre class="brush: js">var recognition = new SpeechRecognition();
-var speechRecognitionList = new SpeechGrammarList();</pre>
+```js
+var recognition = new SpeechRecognition();
+var speechRecognitionList = new SpeechGrammarList();
+```
 
-<p>We add our <code>grammar</code> to the list using the {{domxref("SpeechGrammarList.addFromString()")}} method. This accepts as parameters the string we want to add, plus optionally a weight value that specifies the importance of this grammar in relation of other grammars available in the list (can be from 0 to 1 inclusive.) The added grammar is available in the list as a {{domxref("SpeechGrammar")}} object instance.</p>
+We add our `grammar` to the list using the {{domxref("SpeechGrammarList.addFromString()")}} method. This accepts as parameters the string we want to add, plus optionally a weight value that specifies the importance of this grammar in relation of other grammars available in the list (can be from 0 to 1 inclusive.) The added grammar is available in the list as a {{domxref("SpeechGrammar")}} object instance.
 
-<pre class="brush: js">speechRecognitionList.addFromString(grammar, 1);</pre>
+```js
+speechRecognitionList.addFromString(grammar, 1);
+```
 
-<p>We then add the {{domxref("SpeechGrammarList")}} to the speech recognition instance by setting it to the value of the {{domxref("SpeechRecognition.grammars")}} property. We also set a few other properties of the recognition instance before we move on:</p>
+We then add the {{domxref("SpeechGrammarList")}} to the speech recognition instance by setting it to the value of the {{domxref("SpeechRecognition.grammars")}} property. We also set a few other properties of the recognition instance before we move on:
 
-<ul>
- <li>{{domxref("SpeechRecognition.continuous")}}: Controls whether continuous results are captured (<code>true</code>), or just a single result each time recognition is started (<code>false</code>).</li>
- <li>{{domxref("SpeechRecognition.lang")}}: Sets the language of the recognition. Setting this is good practice, and therefore recommended.</li>
- <li>{{domxref("SpeechRecognition.interimResults")}}: Defines whether the speech recognition system should return interim results, or just final results. Final results are good enough for this simple demo.</li>
- <li>{{domxref("SpeechRecognition.maxAlternatives")}}: Sets the number of alternative potential matches that should be returned per result. This can sometimes be useful, say if a result is not completely clear and you want to display a list if alternatives for the user to choose the correct one from. But it is not needed for this simple demo, so we are just specifying one (which is actually the default anyway.)</li>
-</ul>
+- {{domxref("SpeechRecognition.continuous")}}: Controls whether continuous results are captured (`true`), or just a single result each time recognition is started (`false`).
+- {{domxref("SpeechRecognition.lang")}}: Sets the language of the recognition. Setting this is good practice, and therefore recommended.
+- {{domxref("SpeechRecognition.interimResults")}}: Defines whether the speech recognition system should return interim results, or just final results. Final results are good enough for this simple demo.
+- {{domxref("SpeechRecognition.maxAlternatives")}}: Sets the number of alternative potential matches that should be returned per result. This can sometimes be useful, say if a result is not completely clear and you want to display a list if alternatives for the user to choose the correct one from. But it is not needed for this simple demo, so we are just specifying one (which is actually the default anyway.)
 
-<pre class="brush: js">recognition.grammars = speechRecognitionList;
+```js
+recognition.grammars = speechRecognitionList;
 recognition.continuous = false;
 recognition.lang = 'en-US';
 recognition.interimResults = false;
-recognition.maxAlternatives = 1;</pre>
+recognition.maxAlternatives = 1;
+```
 
-<h4 id="Starting_the_speech_recognition">Starting the speech recognition</h4>
+#### Starting the speech recognition
 
-<p>After grabbing references to the output {{htmlelement("div")}} and the HTML element (so we can output diagnostic messages and update the app background color later on), we implement an onclick handler so that when the screen is tapped/clicked, the speech recognition service will start. This is achieved by calling {{domxref("SpeechRecognition.start()")}}. The <code>forEach()</code> method is used to output colored indicators showing what colors to try saying.</p>
+After grabbing references to the output {{htmlelement("div")}} and the HTML element (so we can output diagnostic messages and update the app background color later on), we implement an onclick handler so that when the screen is tapped/clicked, the speech recognition service will start. This is achieved by calling {{domxref("SpeechRecognition.start()")}}. The `forEach()` method is used to output colored indicators showing what colors to try saying.
 
-<pre class="brush: js">var diagnostic = document.querySelector('.output');
+```js
+var diagnostic = document.querySelector('.output');
 var bg = document.querySelector('html');
 var hints = document.querySelector('.hints');
 
 var colorHTML= '';
 colors.forEach(function(v, i, a){
   console.log(v, i);
-  colorHTML += '&lt;span style="background-color:' + v + ';"&gt; ' + v + ' &lt;/span&gt;';
+  colorHTML += '<span style="background-color:' + v + ';"> ' + v + ' </span>';
 });
 hints.innerHTML = 'Tap/click then say a color to change the background color of the app. Try ' + colorHTML + '.';
 
 document.body.onclick = function() {
   recognition.start();
   console.log('Ready to receive a color command.');
-}</pre>
+}
+```
 
-<h4 id="Receiving_and_handling_results">Receiving and handling results</h4>
+#### Receiving and handling results
 
-<p>Once the speech recognition is started, there are many event handlers that can be used to retrieve results, and other pieces of surrounding information (see the <a href="/en-US/docs/Web/API/SpeechRecognition#Event_handlers"><code>SpeechRecognition</code> event handlers list</a>.) The most common one you'll probably use is {{domxref("SpeechRecognition.onresult")}}, which is fired once a successful result is received:</p>
+Once the speech recognition is started, there are many event handlers that can be used to retrieve results, and other pieces of surrounding information (see the [`SpeechRecognition` event handlers list](/en-US/docs/Web/API/SpeechRecognition#Event_handlers).) The most common one you'll probably use is {{domxref("SpeechRecognition.onresult")}}, which is fired once a successful result is received:
 
-<pre class="brush: js">recognition.onresult = function(event) {
+```js
+recognition.onresult = function(event) {
   var color = event.results[0][0].transcript;
   diagnostic.textContent = 'Result received: ' + color + '.';
   bg.style.backgroundColor = color;
   console.log('Confidence: ' + event.results[0][0].confidence);
-}</pre>
+}
+```
 
-<p>The second line here is a bit complex-looking, so let's explain it step by step. The {{domxref("SpeechRecognitionEvent.results")}} property returns a {{domxref("SpeechRecognitionResultList")}} object containing {{domxref("SpeechRecognitionResult")}} objects. It has a getter so it can be accessed like an array — so the first <code>[0]</code> returns the <code>SpeechRecognitionResult</code> at position 0. Each <code>SpeechRecognitionResult</code> object contains {{domxref("SpeechRecognitionAlternative")}} objects that contain individual recognised words. These also have getters so they can be accessed like arrays — the second <code>[0]</code> therefore returns the <code>SpeechRecognitionAlternative</code> at position 0. We then return its <code>transcript</code> property to get a string containing the individual recognised result as a string, set the background color to that color, and report the color recognised as a diagnostic message in the UI.</p>
+The second line here is a bit complex-looking, so let's explain it step by step. The {{domxref("SpeechRecognitionEvent.results")}} property returns a {{domxref("SpeechRecognitionResultList")}} object containing {{domxref("SpeechRecognitionResult")}} objects. It has a getter so it can be accessed like an array — so the first `[0]` returns the `SpeechRecognitionResult` at position 0. Each `SpeechRecognitionResult` object contains {{domxref("SpeechRecognitionAlternative")}} objects that contain individual recognised words. These also have getters so they can be accessed like arrays — the second `[0]` therefore returns the `SpeechRecognitionAlternative` at position 0. We then return its `transcript` property to get a string containing the individual recognised result as a string, set the background color to that color, and report the color recognised as a diagnostic message in the UI.
 
-<p>We also use a {{domxref("SpeechRecognition.onspeechend")}} handler to stop the speech recognition service from running (using {{domxref("SpeechRecognition.stop()")}}) once a single word has been recognised and it has finished being spoken:</p>
+We also use a {{domxref("SpeechRecognition.onspeechend")}} handler to stop the speech recognition service from running (using {{domxref("SpeechRecognition.stop()")}}) once a single word has been recognised and it has finished being spoken:
 
-<pre class="brush: js">recognition.onspeechend = function() {
+```js
+recognition.onspeechend = function() {
   recognition.stop();
-}</pre>
+}
+```
 
-<h4 id="Handling_errors_and_unrecognised_speech">Handling errors and unrecognised speech</h4>
+#### Handling errors and unrecognised speech
 
-<p>The last two handlers are there to handle cases where speech was recognised that wasn't in the defined grammar, or an error occured. {{domxref("SpeechRecognition.onnomatch")}} seems to be supposed to handle the first case mentioned, although note that at the moment it doesn't seem to fire correctly; it just returns whatever was recognised anyway:</p>
+The last two handlers are there to handle cases where speech was recognised that wasn't in the defined grammar, or an error occured. {{domxref("SpeechRecognition.onnomatch")}} seems to be supposed to handle the first case mentioned, although note that at the moment it doesn't seem to fire correctly; it just returns whatever was recognised anyway:
 
-<pre class="brush: js">recognition.onnomatch = function(event) {
+```js
+recognition.onnomatch = function(event) {
   diagnostic.textContent = 'I didnt recognise that color.';
-}</pre>
+}
+```
 
-<p>{{domxref("SpeechRecognition.onerror")}} handles cases where there is an actual error with the recognition successfully — the {{domxref("SpeechRecognitionError.error")}} property contains the actual error returned:</p>
+{{domxref("SpeechRecognition.onerror")}} handles cases where there is an actual error with the recognition successfully — the {{domxref("SpeechRecognitionError.error")}} property contains the actual error returned:
 
-<pre class="brush: js">recognition.onerror = function(event) {
+```js
+recognition.onerror = function(event) {
   diagnostic.textContent = 'Error occurred in recognition: ' + event.error;
-}</pre>
+}
+```
 
-<h2 id="Speech_synthesis">Speech synthesis</h2>
+## Speech synthesis
 
-<p>Speech synthesis (aka text-to-speech, or tts) involves receiving synthesising text contained within an app to speech, and playing it out of a device's speaker or audio output connection.</p>
+Speech synthesis (aka text-to-speech, or tts) involves receiving synthesising text contained within an app to speech, and playing it out of a device's speaker or audio output connection.
 
-<p>The Web Speech API has a main controller interface for this — {{domxref("SpeechSynthesis")}} — plus a number of closely-related interfaces for representing text to be synthesised (known as utterances), voices to be used for the utterance, etc. Again, most OSes have some kind of speech synthesis system, which will be used by the API for this task as available.</p>
+The Web Speech API has a main controller interface for this — {{domxref("SpeechSynthesis")}} — plus a number of closely-related interfaces for representing text to be synthesised (known as utterances), voices to be used for the utterance, etc. Again, most OSes have some kind of speech synthesis system, which will be used by the API for this task as available.
 
-<h3 id="Demo_2">Demo</h3>
+### Demo
 
-<p>To show simple usage of Web speech synthesis, we've provided a demo called <a href="https://mdn.github.io/web-speech-api/speak-easy-synthesis/">Speak easy synthesis</a>. This includes a set of form controls for entering text to be synthesised, and setting the pitch, rate, and voice to use when the text is uttered. After you have entered your text, you can press <kbd>Enter</kbd>/<kbd>Return</kbd> to hear it spoken.</p>
+To show simple usage of Web speech synthesis, we've provided a demo called [Speak easy synthesis](https://mdn.github.io/web-speech-api/speak-easy-synthesis/). This includes a set of form controls for entering text to be synthesised, and setting the pitch, rate, and voice to use when the text is uttered. After you have entered your text, you can press <kbd>Enter</kbd>/<kbd>Return</kbd> to hear it spoken.
 
-<p>To run the demo, you can clone (or <a href="https://github.com/mdn/web-speech-api/archive/master.zip">directly download</a>) the Github repo it is part of, open the HTML index file in a supporting desktop browser, or navigate to the <a href="https://mdn.github.io/web-speech-api/speak-easy-synthesis/">live demo URL</a> in a supporting mobile browser like Chrome, or Firefox OS.</p>
+To run the demo, you can clone (or [directly download](https://github.com/mdn/web-speech-api/archive/master.zip)) the Github repo it is part of, open the HTML index file in a supporting desktop browser, or navigate to the [live demo URL](https://mdn.github.io/web-speech-api/speak-easy-synthesis/) in a supporting mobile browser like Chrome, or Firefox OS.
 
-<h3 id="Browser_support">Browser support</h3>
+### Browser support
 
-<p>Support for Web Speech API speech synthesis is still getting there across mainstream browsers, and is currently limited to the following:</p>
+Support for Web Speech API speech synthesis is still getting there across mainstream browsers, and is currently limited to the following:
 
-<ul>
- <li>
-  <p>Firefox desktop and mobile support it in Gecko 42+ (Windows)/44+, without prefixes, and it can be turned on by flipping the <code>media.webspeech.synth.enabled</code> flag to <code>true</code> in <code>about:config</code>.</p>
- </li>
- <li>
-  <p>Firefox OS 2.5+ supports it, by default, and without the need for any permissions.</p>
- </li>
- <li>
-  <p>Chrome for Desktop and Android have supported it since around version 33, without prefixes.</p>
- </li>
-</ul>
+- Firefox desktop and mobile support it in Gecko 42+ (Windows)/44+, without prefixes, and it can be turned on by flipping the `media.webspeech.synth.enabled` flag to `true` in `about:config`.
+- Firefox OS 2.5+ supports it, by default, and without the need for any permissions.
+- Chrome for Desktop and Android have supported it since around version 33, without prefixes.
 
-<h3 id="HTML_and_CSS_2">HTML and CSS</h3>
+### HTML and CSS
 
-<p>The HTML and CSS are again pretty trivial, simply containing a title, some instructions for use, and a form with some simple controls. The {{htmlelement("select")}} element is initially empty, but is populated with {{htmlelement("option")}}s via JavaScript (see later on.)</p>
+The HTML and CSS are again pretty trivial, simply containing a title, some instructions for use, and a form with some simple controls. The {{htmlelement("select")}} element is initially empty, but is populated with {{htmlelement("option")}}s via JavaScript (see later on.)
 
-<pre class="brush: html">&lt;h1&gt;Speech synthesiser&lt;/h1&gt;
+```html
+<h1>Speech synthesiser</h1>
 
-&lt;p&gt;Enter some text in the input below and press return to hear it. change voices using the dropdown menu.&lt;/p&gt;
+<p>Enter some text in the input below and press return to hear it. change voices using the dropdown menu.</p>
 
-&lt;form&gt;
-  &lt;input type="text" class="txt"&gt;
-  &lt;div&gt;
-    &lt;label for="rate"&gt;Rate&lt;/label&gt;&lt;input type="range" min="0.5" max="2" value="1" step="0.1" id="rate"&gt;
-    &lt;div class="rate-value"&gt;1&lt;/div&gt;
-    &lt;div class="clearfix"&gt;&lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div&gt;
-    &lt;label for="pitch"&gt;Pitch&lt;/label&gt;&lt;input type="range" min="0" max="2" value="1" step="0.1" id="pitch"&gt;
-    &lt;div class="pitch-value"&gt;1&lt;/div&gt;
-    &lt;div class="clearfix"&gt;&lt;/div&gt;
-  &lt;/div&gt;
-  &lt;select&gt;
+<form>
+  <input type="text" class="txt">
+  <div>
+    <label for="rate">Rate</label><input type="range" min="0.5" max="2" value="1" step="0.1" id="rate">
+    <div class="rate-value">1</div>
+    <div class="clearfix"></div>
+  </div>
+  <div>
+    <label for="pitch">Pitch</label><input type="range" min="0" max="2" value="1" step="0.1" id="pitch">
+    <div class="pitch-value">1</div>
+    <div class="clearfix"></div>
+  </div>
+  <select>
 
-  &lt;/select&gt;
-&lt;/form&gt;</pre>
+  </select>
+</form>
+```
 
-<h3 id="JavaScript_2">JavaScript</h3>
+### JavaScript
 
-<p>Let's investigate the JavaScript that powers this app.</p>
+Let's investigate the JavaScript that powers this app.
 
-<h4 id="Setting_variables">Setting variables</h4>
+#### Setting variables
 
-<p>First of all, we capture references to all the DOM elements involved in the UI, but more interestingly, we capture a reference to {{domxref("Window.speechSynthesis")}}. This is API's entry point — it returns an instance of {{domxref("SpeechSynthesis")}}, the controller interface for web speech synthesis.</p>
+First of all, we capture references to all the DOM elements involved in the UI, but more interestingly, we capture a reference to {{domxref("Window.speechSynthesis")}}. This is API's entry point — it returns an instance of {{domxref("SpeechSynthesis")}}, the controller interface for web speech synthesis.
 
-<pre class="brush: js">var synth = window.speechSynthesis;
+```js
+var synth = window.speechSynthesis;
 
 var inputForm = document.querySelector('form');
 var inputTxt = document.querySelector('.txt');
@@ -226,18 +237,19 @@ var rate = document.querySelector('#rate');
 var rateValue = document.querySelector('.rate-value');
 
 var voices = [];
-</pre>
+```
 
-<h4 id="Populating_the_select_element">Populating the select element</h4>
+#### Populating the select element
 
-<p>To populate the {{htmlelement("select")}} element with the different voice options the device has available, we've written a <code>populateVoiceList()</code> function. We first invoke {{domxref("SpeechSynthesis.getVoices()")}}, which returns a list of all the available voices, represented by {{domxref("SpeechSynthesisVoice")}} objects. We then loop through this list — for each voice we create an {{htmlelement("option")}} element, set its text content to display the name of the voice (grabbed from {{domxref("SpeechSynthesisVoice.name")}}), the language of the voice (grabbed from {{domxref("SpeechSynthesisVoice.lang")}}), and <code>-- DEFAULT</code> if the voice is the default voice for the synthesis engine (checked by seeing if {{domxref("SpeechSynthesisVoice.default")}} returns <code>true</code>.)</p>
+To populate the {{htmlelement("select")}} element with the different voice options the device has available, we've written a `populateVoiceList()` function. We first invoke {{domxref("SpeechSynthesis.getVoices()")}}, which returns a list of all the available voices, represented by {{domxref("SpeechSynthesisVoice")}} objects. We then loop through this list — for each voice we create an {{htmlelement("option")}} element, set its text content to display the name of the voice (grabbed from {{domxref("SpeechSynthesisVoice.name")}}), the language of the voice (grabbed from {{domxref("SpeechSynthesisVoice.lang")}}), and `-- DEFAULT` if the voice is the default voice for the synthesis engine (checked by seeing if {{domxref("SpeechSynthesisVoice.default")}} returns `true`.)
 
-<p>We also create <code>data-</code> attributes for each option, containing the name and language of the associated voice, so we can grab them easily later on, and then append the options as children of the select.</p>
+We also create `data-` attributes for each option, containing the name and language of the associated voice, so we can grab them easily later on, and then append the options as children of the select.
 
-<pre class="brush: js">function populateVoiceList() {
+```js
+function populateVoiceList() {
   voices = synth.getVoices();
 
-  for(i = 0; i &lt; voices.length ; i++) {
+  for(i = 0; i < voices.length ; i++) {
     var option = document.createElement('option');
     option.textContent = voices[i].name + ' (' + voices[i].lang + ')';
 
@@ -249,58 +261,69 @@ var voices = [];
     option.setAttribute('data-name', voices[i].name);
     voiceSelect.appendChild(option);
   }
-}</pre>
+}
+```
 
-<p>When we come to run the function, we do the following. This is because Firefox doesn't support {{domxref("SpeechSynthesis.onvoiceschanged")}}, and will just return a list of voices when {{domxref("SpeechSynthesis.getVoices()")}} is fired. With Chrome however, you have to wait for the event to fire before populating the list, hence the if statement seen below.</p>
+When we come to run the function, we do the following. This is because Firefox doesn't support {{domxref("SpeechSynthesis.onvoiceschanged")}}, and will just return a list of voices when {{domxref("SpeechSynthesis.getVoices()")}} is fired. With Chrome however, you have to wait for the event to fire before populating the list, hence the if statement seen below.
 
-<pre class="brush: js">populateVoiceList();
+```js
+populateVoiceList();
 if (speechSynthesis.onvoiceschanged !== undefined) {
   speechSynthesis.onvoiceschanged = populateVoiceList;
-}</pre>
+}
+```
 
-<h4 id="Speaking_the_entered_text">Speaking the entered text</h4>
+#### Speaking the entered text
 
-<p>Next, we create an event handler to start speaking the text entered into the text field. We are using an <a href="/en-US/docs/Web/API/GlobalEventHandlers/onsubmit">onsubmit</a> handler on the form so that the action happens when <kbd>Enter</kbd>/<kbd>Return</kbd> is pressed. We first create a new {{domxref("SpeechSynthesisUtterance.SpeechSynthesisUtterance()", "SpeechSynthesisUtterance()")}} instance using its constructor — this is passed the text input's value as a parameter.</p>
+Next, we create an event handler to start speaking the text entered into the text field. We are using an [onsubmit](/en-US/docs/Web/API/GlobalEventHandlers/onsubmit) handler on the form so that the action happens when <kbd>Enter</kbd>/<kbd>Return</kbd> is pressed. We first create a new {{domxref("SpeechSynthesisUtterance.SpeechSynthesisUtterance()", "SpeechSynthesisUtterance()")}} instance using its constructor — this is passed the text input's value as a parameter.
 
-<p>Next, we need to figure out which voice to use. We use the {{domxref("HTMLSelectElement")}} <code>selectedOptions</code> property to return the currently selected {{htmlelement("option")}} element. We then use this element's <code>data-name</code> attribute, finding the {{domxref("SpeechSynthesisVoice")}} object whose name matches this attribute's value. We set the matching voice object to be the value of the {{domxref("SpeechSynthesisUtterance.voice")}} property.</p>
+Next, we need to figure out which voice to use. We use the {{domxref("HTMLSelectElement")}} `selectedOptions` property to return the currently selected {{htmlelement("option")}} element. We then use this element's `data-name` attribute, finding the {{domxref("SpeechSynthesisVoice")}} object whose name matches this attribute's value. We set the matching voice object to be the value of the {{domxref("SpeechSynthesisUtterance.voice")}} property.
 
-<p>Finally, we set the {{domxref("SpeechSynthesisUtterance.pitch")}} and {{domxref("SpeechSynthesisUtterance.rate")}} to the values of the relevant range form elements. Then, with all necessary preparations made, we start the utterance being spoken by invoking {{domxref("SpeechSynthesis.speak()")}}, passing it the {{domxref("SpeechSynthesisUtterance")}} instance as a parameter.</p>
+Finally, we set the {{domxref("SpeechSynthesisUtterance.pitch")}} and {{domxref("SpeechSynthesisUtterance.rate")}} to the values of the relevant range form elements. Then, with all necessary preparations made, we start the utterance being spoken by invoking {{domxref("SpeechSynthesis.speak()")}}, passing it the {{domxref("SpeechSynthesisUtterance")}} instance as a parameter.
 
-<pre class="brush: js">inputForm.onsubmit = function(event) {
+```js
+inputForm.onsubmit = function(event) {
   event.preventDefault();
 
   var utterThis = new SpeechSynthesisUtterance(inputTxt.value);
   var selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name');
-  for(i = 0; i &lt; voices.length ; i++) {
+  for(i = 0; i < voices.length ; i++) {
     if(voices[i].name === selectedOption) {
       utterThis.voice = voices[i];
     }
   }
   utterThis.pitch = pitch.value;
   utterThis.rate = rate.value;
-  synth.speak(utterThis);</pre>
+  synth.speak(utterThis);
+```
 
-<p>In the final part of the handler, we include an {{domxref("SpeechSynthesisUtterance.onpause")}} handler to demonstrate how {{domxref("SpeechSynthesisEvent")}} can be put to good use. When {{domxref("SpeechSynthesis.pause()")}} is invoked, this returns a message reporting the character number and name that the speech was paused at.</p>
+In the final part of the handler, we include an {{domxref("SpeechSynthesisUtterance.onpause")}} handler to demonstrate how {{domxref("SpeechSynthesisEvent")}} can be put to good use. When {{domxref("SpeechSynthesis.pause()")}} is invoked, this returns a message reporting the character number and name that the speech was paused at.
 
-<pre class="brush: js">   utterThis.onpause = function(event) {
+```js
+   utterThis.onpause = function(event) {
     var char = event.utterance.text.charAt(event.charIndex);
     console.log('Speech paused at character ' + event.charIndex + ' of "' +
     event.utterance.text + '", which is "' + char + '".');
-  }</pre>
+  }
+```
 
-<p>Finally, we call <a href="/en-US/docs/Web/API/HTMLElement/blur">blur()</a> on the text input. This is mainly to hide the keyboard on Firefox OS.</p>
+Finally, we call [blur()](/en-US/docs/Web/API/HTMLElement/blur) on the text input. This is mainly to hide the keyboard on Firefox OS.
 
-<pre class="brush: js">  inputTxt.blur();
-}</pre>
+```js
+  inputTxt.blur();
+}
+```
 
-<h4 id="Updating_the_displayed_pitch_and_rate_values">Updating the displayed pitch and rate values</h4>
+#### Updating the displayed pitch and rate values
 
-<p>The last part of the code simply updates the <code>pitch</code>/<code>rate</code> values displayed in the UI, each time the slider positions are moved.</p>
+The last part of the code simply updates the `pitch`/`rate` values displayed in the UI, each time the slider positions are moved.
 
-<pre class="brush: js">pitch.onchange = function() {
+```js
+pitch.onchange = function() {
   pitchValue.textContent = pitch.value;
 }
 
 rate.onchange = function() {
   rateValue.textContent = rate.value;
-}</pre>
+}
+```
diff --git a/files/fr/web/api/web_storage_api/index.md b/files/fr/web/api/web_storage_api/index.md
index bae54c054c..b83fd22fa4 100644
--- a/files/fr/web/api/web_storage_api/index.md
+++ b/files/fr/web/api/web_storage_api/index.md
@@ -10,87 +10,64 @@ tags:
   - sessionStorage
 translation_of: Web/API/Web_Storage_API
 ---
-<p>{{DefaultAPISidebar("Web Storage API")}}</p>
+{{DefaultAPISidebar("Web Storage API")}}
 
-<p>L'API <strong>Web Storage</strong> fournit des mécanismes par lesquels les navigateurs peuvent stocker des paires clé / valeur, d'une manière beaucoup plus intuitive que l'utilisation de cookies.</p>
+L'API **Web Storage** fournit des mécanismes par lesquels les navigateurs peuvent stocker des paires clé / valeur, d'une manière beaucoup plus intuitive que l'utilisation de cookies.
 
-<h2 id="Web_Storage_concepts_et_utilisations">Web Storage, concepts et utilisations</h2>
+## Web Storage, concepts et utilisations
 
-<p>Les deux mécanismes au sein du web storage sont les suivantes:</p>
+Les deux mécanismes au sein du web storage sont les suivantes:
 
-<ul>
- <li><code>sessionStorage</code> maintient une zone de stockage distinct pour chaque origine donnée qui est disponible pour la durée de la session de la page (tant que le navigateur est ouvert, y compris les rechargements et restaure)</li>
- <li><code>localStorage</code> fait la même chose, mais persiste même lorsque le navigateur est fermé et rouvert.</li>
-</ul>
+- `sessionStorage` maintient une zone de stockage distinct pour chaque origine donnée qui est disponible pour la durée de la session de la page (tant que le navigateur est ouvert, y compris les rechargements et restaure)
+- `localStorage` fait la même chose, mais persiste même lorsque le navigateur est fermé et rouvert.
 
-<p>Ces mécanismes sont disponibles via les propriétés {{domxref("Window.sessionStorage")}} et {{domxref("Window.localStorage")}} (pour être plus précis, pour le support des navigateurs, l'objet <code>Window</code> implemente le <code>WindowLocalStorage</code> et l'object <code>WindowSessionStorage</code>, dont les propriétés <code>localStorage</code> et <code>sessionStorage</code> dépendent) — L'appel de l'une de ces propriétés va créer une instance de l'objet {{domxref("Storage")}},  à travers de laquelle les éléments de données peuvent être définis, récupérés et éliminés. Un objet de stockage différent est utilisé pour le sessionStorage et le localStorage pour chaque origine — ils fonctionnent et sont contrôlés séparément.</p>
+Ces mécanismes sont disponibles via les propriétés {{domxref("Window.sessionStorage")}} et {{domxref("Window.localStorage")}} (pour être plus précis, pour le support des navigateurs, l'objet `Window` implemente le `WindowLocalStorage` et l'object `WindowSessionStorage`, dont les propriétés `localStorage` et `sessionStorage` dépendent) — L'appel de l'une de ces propriétés va créer une instance de l'objet {{domxref("Storage")}},  à travers de laquelle les éléments de données peuvent être définis, récupérés et éliminés. Un objet de stockage différent est utilisé pour le sessionStorage et le localStorage pour chaque origine — ils fonctionnent et sont contrôlés séparément.
 
-<div class="note">
-<p><strong>Note :</strong> À partir de Firefox 45, lorsque le navigateur se bloque / redémarre, la quantité de données sauvegardées par origine est limitée à 10 Mo. Cela a été mis en place pour éviter les problèmes de mémoire causés par une utilisation excessive du stockage Web.</p>
-</div>
+> **Note :** À partir de Firefox 45, lorsque le navigateur se bloque / redémarre, la quantité de données sauvegardées par origine est limitée à 10 Mo. Cela a été mis en place pour éviter les problèmes de mémoire causés par une utilisation excessive du stockage Web.
 
-<div class="note">
-<p><strong>Note :</strong> L'accès au Web Storage à partir d'iframes externes est interdit si l'utilisateur a <a href="https://support.mozilla.org/en-US/kb/disable-third-party-cookies">désactivé les cookies tierce-partie</a> (Firefox a adopté ce comportement à partir de la <a href="/en-US/docs/Mozilla/Firefox/Releases/43">version 43</a> et suivantes.)</p>
-</div>
+> **Note :** L'accès au Web Storage à partir d'iframes externes est interdit si l'utilisateur a [désactivé les cookies tierce-partie](https://support.mozilla.org/en-US/kb/disable-third-party-cookies) (Firefox a adopté ce comportement à partir de la [version 43](/en-US/docs/Mozilla/Firefox/Releases/43) et suivantes.)
 
-<div class="note">
-<p><strong>Note:</strong> Le Web Storage n'est pas identique au <a href="/en-US/docs/Storage">mozStorage</a> (interfaces XPCOM de Mozilla vers SQLite) ou l'<a href="/en-US/docs/Session_store_API">API Session store </a> (un utilitaire de stockage <a href="/en-US/docs/XPCOM">XPCOM</a> utilisable par des extensions).</p>
-</div>
+> **Note :** Le Web Storage n'est pas identique au [mozStorage](/en-US/docs/Storage) (interfaces XPCOM de Mozilla vers SQLite) ou l'[API Session store ](/en-US/docs/Session_store_API)(un utilitaire de stockage [XPCOM](/en-US/docs/XPCOM) utilisable par des extensions).
 
-<h2 id="Web_Storage_interfaces">Web Storage interfaces</h2>
+## Web Storage interfaces
 
-<dl>
- <dt>{{domxref("Storage")}}</dt>
- <dd>Vous permet d'ajouter, modifier, lire ou supprimer des données pour un domaine et un type de stockage (session ou local) donnés.</dd>
- <dt>{{domxref("Window")}}</dt>
- <dd>L'API Web Storage dérive de l'objet {{domxref("Window")}} avec 2 nouvelles propriétés — {{domxref("Window.sessionStorage")}} et {{domxref("Window.localStorage")}} — lesquelles donnent accès, pour le domaine courant, aux objets session et local {{domxref("Storage")}} respectivement.</dd>
- <dt>{{domxref("StorageEvent")}}</dt>
- <dd>L'événement <code>storage</code> est déclenché sur l'objet <code>Window</code> du document en cas de changement dans un espace de stockage.</dd>
-</dl>
+- {{domxref("Storage")}}
+  - : Vous permet d'ajouter, modifier, lire ou supprimer des données pour un domaine et un type de stockage (session ou local) donnés.
+- {{domxref("Window")}}
+  - : L'API Web Storage dérive de l'objet {{domxref("Window")}} avec 2 nouvelles propriétés — {{domxref("Window.sessionStorage")}} et {{domxref("Window.localStorage")}} — lesquelles donnent accès, pour le domaine courant, aux objets session et local {{domxref("Storage")}} respectivement.
+- {{domxref("StorageEvent")}}
+  - : L'événement `storage` est déclenché sur l'objet `Window` du document en cas de changement dans un espace de stockage.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Pour illustrer une utilisation typique du stockage Web, nous avons créé un exemple simple, appelé de manière imaginative <a href="https://github.com/mdn/dom-examples/tree/master/web-storage">Web Storage Demo</a>. La <a href="https://mdn.github.io/dom-examples/web-storage/">landing page</a> fournit des commandes permettant de personnaliser la couleur, la police et l'image décorative. Lorsque vous choisissez différentes options, la page est instantanément mise à jour. De plus, vos choix sont stockés dans <code>localStorage</code>. Ainsi, lorsque vous quittez la page puis la rechargez plus tard, vos choix sont mémorisés. En outre, nous avons fourni une <a href="https://mdn.github.io/dom-examples/web-storage/event.html">event output page</a> — Si vous chargez cette page dans un autre onglet, puis modifiez vos choix dans la page d'arrivée, vous verrez les informations de stockage mises à jour générées lors du déclenchement de {{event("StorageEvent")}}.</p>
+Pour illustrer une utilisation typique du stockage Web, nous avons créé un exemple simple, appelé de manière imaginative [Web Storage Demo](https://github.com/mdn/dom-examples/tree/master/web-storage). La [landing page](https://mdn.github.io/dom-examples/web-storage/) fournit des commandes permettant de personnaliser la couleur, la police et l'image décorative. Lorsque vous choisissez différentes options, la page est instantanément mise à jour. De plus, vos choix sont stockés dans `localStorage`. Ainsi, lorsque vous quittez la page puis la rechargez plus tard, vos choix sont mémorisés. En outre, nous avons fourni une [event output page](https://mdn.github.io/dom-examples/web-storage/event.html) — Si vous chargez cette page dans un autre onglet, puis modifiez vos choix dans la page d'arrivée, vous verrez les informations de stockage mises à jour générées lors du déclenchement de {{event("StorageEvent")}}.
 
-<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', 'webstorage.html#webstorage')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                | État                             | Commentaires |
+| ---------------------------------------------------------------------------- | -------------------------------- | ------------ |
+| {{SpecName('HTML WHATWG', 'webstorage.html#webstorage')}} | {{Spec2('HTML WHATWG')}} |              |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<h3 id="Window.localStorage"><code>Window.localStorage</code></h3>
+### `Window.localStorage`
 
-<p>{{Compat("api.Window.localStorage")}}</p>
+{{Compat("api.Window.localStorage")}}
 
-<h3 id="Window.sessionStorage"><code>Window.sessionStorage</code></h3>
+### `Window.sessionStorage`
 
-<p>{{Compat("api.Window.sessionStorage")}}</p>
+{{Compat("api.Window.sessionStorage")}}
 
-<h2 id="Navigation_privée_Modes_incognito">Navigation privée / Modes incognito</h2>
+## Navigation privée / Modes incognito
 
-<p>De nos jours, la plupart des navigateurs prennent en charge une option de confidentialité appelée "mode Incognito" ou "navigation privée", qui permet de s'assurer que la session de navigation privée ne laisse aucune trace après la fermeture du navigateur. Ceci est fondamentalement incompatible avec le stockage Web pour des raisons évidentes. En tant que tels, les éditeurs de navigateurs expérimentent différents scénarios pour gérer cette incompatibilité.</p>
+De nos jours, la plupart des navigateurs prennent en charge une option de confidentialité appelée "mode Incognito" ou "navigation privée", qui permet de s'assurer que la session de navigation privée ne laisse aucune trace après la fermeture du navigateur. Ceci est fondamentalement incompatible avec le stockage Web pour des raisons évidentes. En tant que tels, les éditeurs de navigateurs expérimentent différents scénarios pour gérer cette incompatibilité.
 
-<p>La plupart des navigateurs ont opté pour une stratégie dans laquelle les API de stockage sont toujours disponibles et apparemment totalement fonctionnelles, à la différence près que toutes les données stockées sont effacées après la fermeture du navigateur. Pour ces navigateurs, il existe toujours différentes interprétations de ce qui devrait être fait avec les données stockées existantes (à partir d'une session de navigation normale). Devrait-il être disponible en lecture en mode privé? Certains navigateurs, notamment Safari, ont opté pour une solution dans laquelle le stockage est disponible, vide et doté d'un quota de 0 octets, ce qui rend impossible l'écriture de données.</p>
+La plupart des navigateurs ont opté pour une stratégie dans laquelle les API de stockage sont toujours disponibles et apparemment totalement fonctionnelles, à la différence près que toutes les données stockées sont effacées après la fermeture du navigateur. Pour ces navigateurs, il existe toujours différentes interprétations de ce qui devrait être fait avec les données stockées existantes (à partir d'une session de navigation normale). Devrait-il être disponible en lecture en mode privé? Certains navigateurs, notamment Safari, ont opté pour une solution dans laquelle le stockage est disponible, vide et doté d'un quota de 0 octets, ce qui rend impossible l'écriture de données.
 
-<p>Les développeurs doivent connaître ces différentes implémentations et en tenir compte lors du développement de sites Web en fonction des API de stockage Web. Pour plus d'informations, consultez <a href="https://blog.whatwg.org/tag/localstorage"> cet article de blog du WHATWG </a> qui traite spécifiquement de ce sujet</p>
+Les développeurs doivent connaître ces différentes implémentations et en tenir compte lors du développement de sites Web en fonction des API de stockage Web. Pour plus d'informations, consultez [cet article de blog du WHATWG ](https://blog.whatwg.org/tag/localstorage)qui traite spécifiquement de ce sujet
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Utiliser l'API Web Storage</a></li>
- <li><a href="/fr/docs/Web/API/API_IndexedDB/Browser_storage_limits_and_eviction_criteria">Limites de stockage du navigateur et critères d'éviction</a></li>
- <li><a href="https://medium.com/@ramsunvtech/onfocus-html5-storage-apis-b45d92aa424b">HTML5 Storage API By Venkatraman</a></li>
-</ul>
+- [Utiliser l'API Web Storage](/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API)
+- [Limites de stockage du navigateur et critères d'éviction](/fr/docs/Web/API/API_IndexedDB/Browser_storage_limits_and_eviction_criteria)
+- [HTML5 Storage API By Venkatraman](https://medium.com/@ramsunvtech/onfocus-html5-storage-apis-b45d92aa424b)
diff --git a/files/fr/web/api/web_storage_api/using_the_web_storage_api/index.md b/files/fr/web/api/web_storage_api/using_the_web_storage_api/index.md
index 96ce992c18..497f5e9e80 100644
--- a/files/fr/web/api/web_storage_api/using_the_web_storage_api/index.md
+++ b/files/fr/web/api/web_storage_api/using_the_web_storage_api/index.md
@@ -9,43 +9,41 @@ tags:
   - localStorage
 translation_of: Web/API/Web_Storage_API/Using_the_Web_Storage_API
 ---
-<p>L'API "Web Storage" fournit des mécanismes par lesquels les navigateurs web peuvent stocker des paires de clé-valeur, d'une manière plus intuitive qu'en utilisant des cookies. Cet article décrit pas à pas comment se servir de cette technologie facile d'utilisation.</p>
+L'API "Web Storage" fournit des mécanismes par lesquels les navigateurs web peuvent stocker des paires de clé-valeur, d'une manière plus intuitive qu'en utilisant des cookies. Cet article décrit pas à pas comment se servir de cette technologie facile d'utilisation.
 
-<h2 id="Concepts_de_base">Concepts de base</h2>
+## Concepts de base
 
-<p>Les objets de stockages sont de simples magasins clé-valeur, similaires aux objets, mais restant intacts après des chargements de page. La clé peut être une chaîne de caractères ou des entiers, mais la valeur sera toujours une chaîne. Vous pouvez accéder à ces valeurs comme pour un objet ou avec les méthodes getItem() et setItem(). Les trois lignes suivantes vont enregistrer la couleur de la même façon :</p>
+Les objets de stockages sont de simples magasins clé-valeur, similaires aux objets, mais restant intacts après des chargements de page. La clé peut être une chaîne de caractères ou des entiers, mais la valeur sera toujours une chaîne. Vous pouvez accéder à ces valeurs comme pour un objet ou avec les méthodes getItem() et setItem(). Les trois lignes suivantes vont enregistrer la couleur de la même façon :
 
-<pre class="brush: js">localStorage.colorSetting = '#a4509b';
+```js
+localStorage.colorSetting = '#a4509b';
 localStorage['colorSetting'] = '#a4509b';
 localStorage.setItem('colorSetting', '#a4509b');
-</pre>
+```
 
-<div class="blockIndicator note">
-<p><strong>Note :</strong> Il est recommandé d'utiliser l'API "Web Storage" (<code>setItem</code>, <code>getItem</code>, <code>removeItem</code>, <code>key</code>, <code>length</code>) pour prévenir les <a href="http://www.2ality.com/2012/01/objects-as-maps.html">embûches</a> associées à l'utilisation d'objets capable de stocker des couples clé-valeur.</p>
-</div>
+> **Note :** Il est recommandé d'utiliser l'API "Web Storage" (`setItem`, `getItem`, `removeItem`, `key`, `length`) pour prévenir les [embûches](http://www.2ality.com/2012/01/objects-as-maps.html) associées à l'utilisation d'objets capable de stocker des couples clé-valeur.
 
-<p>Les deux principaux mécanismes internes du Stockage Web sont :</p>
+Les deux principaux mécanismes internes du Stockage Web sont :
 
-<ul>
- <li><strong><code>sessionStorage</code></strong> qui maintient un espace de stockage, séparé pour chaque origine différente, disponible le temps de la session de la page (tant que le navigateur reste lancé, incluant les rechargements de la page et les restaurations).</li>
- <li><strong><code>localStorage</code></strong> qui tient le même rôle mais persiste même après le redémarrage du navigateur web.</li>
-</ul>
+- **`sessionStorage`** qui maintient un espace de stockage, séparé pour chaque origine différente, disponible le temps de la session de la page (tant que le navigateur reste lancé, incluant les rechargements de la page et les restaurations).
+- **`localStorage`** qui tient le même rôle mais persiste même après le redémarrage du navigateur web.
 
-<p>Ces mécanismes sont disponibles via les propriétés {{domxref("Window.sessionStorage")}} et {{domxref("Window.localStorage")}}  (plus précisément, dans les navigateurs web le supportant, l'objet <code>Window</code>  implémente les objets <code>WindowLocalStorage</code> et <code>WindowSessionStorage</code>, sur lesquels les propriétés <code>localStorage</code> et <code>sessionStorage</code> se basent) — l'appel d'un des deux va créer une instance de l'objet {{domxref("Storage")}}, dans lequel des données pourront être ajoutées, récupérées et supprimées. Pour <code>sessionStorage</code> et <code>localStorage</code>, un objet de stockage différent est utilisé pour chaque origine — ils fonctionnent et sont contrôlés séparément.</p>
+Ces mécanismes sont disponibles via les propriétés {{domxref("Window.sessionStorage")}} et {{domxref("Window.localStorage")}}  (plus précisément, dans les navigateurs web le supportant, l'objet `Window`  implémente les objets `WindowLocalStorage` et `WindowSessionStorage`, sur lesquels les propriétés `localStorage` et `sessionStorage` se basent) — l'appel d'un des deux va créer une instance de l'objet {{domxref("Storage")}}, dans lequel des données pourront être ajoutées, récupérées et supprimées. Pour `sessionStorage` et `localStorage`, un objet de stockage différent est utilisé pour chaque origine — ils fonctionnent et sont contrôlés séparément.
 
-<p>Donc, par exemple, un appel initial de <code>localStorage</code> sur un document va retourner un objet {{domxref("Storage")}} ; un appel de <code>sessionStorage</code> sur un document va retourner un objet {{domxref("Storage")}} différent. Les deux peuvent se manipuler de la même façon, mais séparément.</p>
+Donc, par exemple, un appel initial de `localStorage` sur un document va retourner un objet {{domxref("Storage")}} ; un appel de `sessionStorage` sur un document va retourner un objet {{domxref("Storage")}} différent. Les deux peuvent se manipuler de la même façon, mais séparément.
 
-<h2 id="Détection_de_la_fonction_localStorage">Détection de la fonction localStorage</h2>
+## Détection de la fonction localStorage
 
-<p>Pour être capable d'utiliser localStorage, nous devons d'abord vérifier qu'il est supporté et disponible dans la session de navigation actuelle.</p>
+Pour être capable d'utiliser localStorage, nous devons d'abord vérifier qu'il est supporté et disponible dans la session de navigation actuelle.
 
-<h3 id="Test_du_support_et_disponibilité">Test du support et disponibilité</h3>
+### Test du support et disponibilité
 
-<p>Les navigateurs qui supportent localStorage ont sur l'objet windows une propriété nommée localStorage. Cependant, pour différentes raisons, la vérification seule de l'existnce de cette propriété peut provoquer des erreurs. .Son absence n'est pas non plus une garantie de son indisponibilité, certains navigateurs offrent un paramètre pour désactiver localStorage. Donc un navigateur <em>peut</em> supporter localStorage, mais peut ne pas le rendre <em>disponible</em> aux scripts de la page. Un exemple de cela est Safari, qui en mode de navigation privée fournit un objet localStorage vide dont le quota est nul, le rendant inutilisable. Notre fonction de détection doit prendre en compte ces scénarios.</p>
+Les navigateurs qui supportent localStorage ont sur l'objet windows une propriété nommée localStorage. Cependant, pour différentes raisons, la vérification seule de l'existnce de cette propriété peut provoquer des erreurs. .Son absence n'est pas non plus une garantie de son indisponibilité, certains navigateurs offrent un paramètre pour désactiver localStorage. Donc un navigateur _peut_ supporter localStorage, mais peut ne pas le rendre _disponible_ aux scripts de la page. Un exemple de cela est Safari, qui en mode de navigation privée fournit un objet localStorage vide dont le quota est nul, le rendant inutilisable. Notre fonction de détection doit prendre en compte ces scénarios.
 
-<p>Voici une fonction qui va détecter que localStorage est supporté mais aussi disponible:</p>
+Voici une fonction qui va détecter que localStorage est supporté mais aussi disponible:
 
-<pre class="brush: js">function storageAvailable(type) {
+```js
+function storageAvailable(type) {
     try {
         var storage = window[type],
             x = '__storage_test__';
@@ -54,7 +52,7 @@ localStorage.setItem('colorSetting', '#a4509b');
         return true;
     }
     catch(e) {
-        return e instanceof DOMException &amp;&amp; (
+        return e instanceof DOMException && (
             // everything except Firefox
             e.code === 22 ||
             // Firefox
@@ -63,60 +61,64 @@ localStorage.setItem('colorSetting', '#a4509b');
             // everything except Firefox
             e.name === 'QuotaExceededError' ||
             // Firefox
-            e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &amp;&amp;
+            e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
             // acknowledge QuotaExceededError only if there's something already stored
             storage.length !== 0;
     }
-}</pre>
+}
+```
 
-<p>Et voici comment l'utiliser :</p>
+Et voici comment l'utiliser :
 
-<pre class="brush: js">if (storageAvailable('localStorage')) {
+```js
+if (storageAvailable('localStorage')) {
 	// Nous pouvons utiliser localStorage
 }
 else {
 	// Malheureusement, localStorage n'est pas disponible
-}</pre>
+}
+```
 
-<p>Au lieu de cela, vous pouvez tester la disponibilité de sessionStorage en appelant <code>storageAvailable('sessionStorage')</code>. </p>
+Au lieu de cela, vous pouvez tester la disponibilité de sessionStorage en appelant `storageAvailable('sessionStorage')`.
 
-<p>Vous pouvez retrouver ici <a href="https://gist.github.com/paulirish/5558557">une brève histoire de la détection de localStorage</a>.</p>
+Vous pouvez retrouver ici [une brève histoire de la détection de localStorage](https://gist.github.com/paulirish/5558557).
 
-<h2 id="Un_exemple_simple">Un exemple simple</h2>
+## Un exemple simple
 
-<p>Pour illustrer certains usages typiques du Stockage Web, nous avons créé un exemple simple ingénieusement appelé <strong>Web Storage Demo</strong>. La <a href="https://mdn.github.io/dom-examples/web-storage/">page de lancement</a> fournit des contrôles afin de personnaliser la couleur, la police de caractère et l'image de décoration:</p>
+Pour illustrer certains usages typiques du Stockage Web, nous avons créé un exemple simple ingénieusement appelé **Web Storage Demo**. La [page de lancement](https://mdn.github.io/dom-examples/web-storage/) fournit des contrôles afin de personnaliser la couleur, la police de caractère et l'image de décoration:
 
-<p><img alt="" src="landing.png"></p>
+![](landing.png)
 
-<p>Quand vous choisissez une option différente, la page est mise à jour instantanément; de plus, vos choix sont stockés avec localStorage, donc quand vous quitterez la page et la rechargerez plus tard, vos choix auront été mémorisés.</p>
+Quand vous choisissez une option différente, la page est mise à jour instantanément; de plus, vos choix sont stockés avec localStorage, donc quand vous quitterez la page et la rechargerez plus tard, vos choix auront été mémorisés.
 
-<p>Nous avons aussi fournit une <a href="https://mdn.github.io/dom-examples/web-storage/event.html">page pour l'événement émis</a> - Si vous chargez cette page dans un autre onglet, puis faite les changements de votre choix sur la page de démarrage, vous allez voir une information liée à l'événement {{domxref("StorageEvent")}} qui a été lancé.</p>
+Nous avons aussi fournit une [page pour l'événement émis](https://mdn.github.io/dom-examples/web-storage/event.html) - Si vous chargez cette page dans un autre onglet, puis faite les changements de votre choix sur la page de démarrage, vous allez voir une information liée à l'événement {{domxref("StorageEvent")}} qui a été lancé.
 
-<p><img alt="" src="event-output.png"></p>
+![](event-output.png)
 
-<div class="note">
-<p><strong>Note :</strong> En plus de l'affichage en temps réel des pages en utilisant les liens ci-dessus, vous pouvez aussi <a href="https://github.com/mdn/dom-examples/tree/master/web-storage">regarder le code-source</a>.</p>
-</div>
+> **Note :** En plus de l'affichage en temps réel des pages en utilisant les liens ci-dessus, vous pouvez aussi [regarder le code-source](https://github.com/mdn/dom-examples/tree/master/web-storage).
 
-<h2 id="Tester_si_le_stockage_a_déjà_été_rempli">Tester si le stockage a déjà été rempli</h2>
+## Tester si le stockage a déjà été rempli
 
-<p>Pour démarrer avec <a href="https://github.com/mdn/dom-examples/blob/master/web-storage/main.js">main.js</a>, nous allons tester que l'objet de stockage a bien été rempli (c-à-d, que l'on a déjà accédé à la page):</p>
+Pour démarrer avec [main.js](https://github.com/mdn/dom-examples/blob/master/web-storage/main.js), nous allons tester que l'objet de stockage a bien été rempli (c-à-d, que l'on a déjà accédé à la page):
 
-<pre class="brush: js">if(!localStorage.getItem('bgcolor')) {
+```js
+if(!localStorage.getItem('bgcolor')) {
   populateStorage();
 } else {
   setStyles();
-}</pre>
+}
+```
 
-<p>La méthode {{domxref("Storage.getItem()")}} est utilisée pour obtenir les données de l'élément depuis le stockage ; dans ce cas nous testons l'existence de l'élément <code>bgcolor</code>; si il n'existe pas nous lançons <code>populateStorage()</code> pour ajouter des valeurs personnalisées dans le stockage. Si il y a déjà des valeurs ici, nous lançons <code>setStyles()</code> pour mettre à jour le style de la page avec les valeurs stockées.</p>
+La méthode {{domxref("Storage.getItem()")}} est utilisée pour obtenir les données de l'élément depuis le stockage ; dans ce cas nous testons l'existence de l'élément `bgcolor`; si il n'existe pas nous lançons `populateStorage()` pour ajouter des valeurs personnalisées dans le stockage. Si il y a déjà des valeurs ici, nous lançons `setStyles()` pour mettre à jour le style de la page avec les valeurs stockées.
 
-<p><strong>Note</strong>: Vous pouvez aussi utiliser {{domxref("Storage.length")}} pour tester si l'objet de stockage est vide ou non.</p>
+**Note**: Vous pouvez aussi utiliser {{domxref("Storage.length")}} pour tester si l'objet de stockage est vide ou non.
 
-<h2 id="Obtenir_les_valeurs_du_stockage">Obtenir les valeurs du stockage</h2>
+## Obtenir les valeurs du stockage
 
-<p>Comme vu ci dessus, les valeurs peuvent être recupérées du stockage en utilisant {{domxref("Storage.getItem()")}}. La méthode prend en argument la clé de l'élément, et retourne la valeur. Par exemple:</p>
+Comme vu ci dessus, les valeurs peuvent être recupérées du stockage en utilisant {{domxref("Storage.getItem()")}}. La méthode prend en argument la clé de l'élément, et retourne la valeur. Par exemple:
 
-<pre class="brush: js">function setStyles() {
+```js
+function setStyles() {
   var currentColor = localStorage.getItem('bgcolor');
   var currentFont = localStorage.getItem('font');
   var currentImage = localStorage.getItem('image');
@@ -128,92 +130,82 @@ else {
   htmlElem.style.backgroundColor = '#' + currentColor;
   pElem.style.fontFamily = currentFont;
   imgElem.setAttribute('src', currentImage);
-}</pre>
+}
+```
 
-<p>Ici, les trois premières lignes vont chercher les valeurs dans le stockage local. Puis, nous définissons les valeurs exposées par le formulaire avec ces valeurs, afin qu'elles persistent quand on recharge la page. Enfin, nous mettons à jour le style et l'image de décoration de la page, ainsi nos options de personnalisation reviennent lors du rechargement de la page.</p>
+Ici, les trois premières lignes vont chercher les valeurs dans le stockage local. Puis, nous définissons les valeurs exposées par le formulaire avec ces valeurs, afin qu'elles persistent quand on recharge la page. Enfin, nous mettons à jour le style et l'image de décoration de la page, ainsi nos options de personnalisation reviennent lors du rechargement de la page.
 
-<h2 id="Enregistrer_une_valeur_dans_le_stockage">Enregistrer une valeur dans le stockage</h2>
+## Enregistrer une valeur dans le stockage
 
-<p>{{domxref("Storage.setItem()")}} est aussi bien utilisée pour la création d'une donnée,  que pour la modification d'une donnée existante (si cette donnée existe déja). Elle prend deux arguments — la clé de l'élément à créer/modifier, et la valeur associée à stocker.</p>
+{{domxref("Storage.setItem()")}} est aussi bien utilisée pour la création d'une donnée,  que pour la modification d'une donnée existante (si cette donnée existe déja). Elle prend deux arguments — la clé de l'élément à créer/modifier, et la valeur associée à stocker.
 
-<pre class="brush: js">function populateStorage() {
+```js
+function populateStorage() {
   localStorage.setItem('bgcolor', document.getElementById('bgcolor').value);
   localStorage.setItem('font', document.getElementById('font').value);
   localStorage.setItem('image', document.getElementById('image').value);
 
   setStyles();
-}</pre>
+}
+```
 
-<p>La fonction <code>populateStorage()</code> définit trois éléments dans le stockage local — la couleur de fond, la police de caractère et le chemin de l'image. Ensuite elle lance la fonction <code>setStyles()</code> pour mettre à jour le style de la page, etc.</p>
+La fonction `populateStorage()` définit trois éléments dans le stockage local — la couleur de fond, la police de caractère et le chemin de l'image. Ensuite elle lance la fonction `setStyles()` pour mettre à jour le style de la page, etc.
 
-<p>Nous avons aussi inclu un handler <code>onchange</code> sur chaque élément du formulaire, ainsi les données et le style sont mis à jour quelque soit la valeur du formulaire qui a changé:</p>
+Nous avons aussi inclu un handler `onchange` sur chaque élément du formulaire, ainsi les données et le style sont mis à jour quelque soit la valeur du formulaire qui a changé:
 
-<pre class="brush: js">bgcolorForm.onchange = populateStorage;
+```js
+bgcolorForm.onchange = populateStorage;
 fontForm.onchange = populateStorage;
-imageForm.onchange = populateStorage;</pre>
+imageForm.onchange = populateStorage;
+```
 
-<h2 id="Répondre_aux_changements_du_stockage_avec_StorageEvent">Répondre aux changements du stockage avec StorageEvent</h2>
+## Répondre aux changements du stockage avec StorageEvent
 
-<p>L'événement {{event("StorageEvent")}} est lancé dès lors qu'un changement est fait sur l'objet {{domxref("Storage")}}. Cela ne va pas marcher sur la même page qui a provoqué le changement: c'est vraiment un moyen pour que les autres pages du domaine qui utilisent le stockage local puissent se synchroniser avec tous les changements qui ont été fait.</p>
+L'événement {{event("StorageEvent")}} est lancé dès lors qu'un changement est fait sur l'objet {{domxref("Storage")}}. Cela ne va pas marcher sur la même page qui a provoqué le changement: c'est vraiment un moyen pour que les autres pages du domaine qui utilisent le stockage local puissent se synchroniser avec tous les changements qui ont été fait.
 
-<p>Les pages des autres domaines ne peuvent pas accéder aux mêmes objets de stockage.</p>
+Les pages des autres domaines ne peuvent pas accéder aux mêmes objets de stockage.
 
-<p>Sur la page d'événement (voir <a href="https://github.com/mdn/web-storage-demo/blob/gh-pages/event.js">events.js</a>) le seul JavaScript est :</p>
+Sur la page d'événement (voir [events.js](https://github.com/mdn/web-storage-demo/blob/gh-pages/event.js)) le seul JavaScript est :
 
-<pre class="brush: js">window.addEventListener('storage', function(e) {
+```js
+window.addEventListener('storage', function(e) {
   document.querySelector('.my-key').textContent = e.key;
   document.querySelector('.my-old').textContent = e.oldValue;
   document.querySelector('.my-new').textContent = e.newValue;
   document.querySelector('.my-url').textContent = e.url;
   document.querySelector('.my-storage').textContent = e.storageArea;
-});</pre>
+});
+```
 
-<p>Ici nous avons ajouté un event listener à l'objet <code>window </code>qui se lance quand l'objet {{domxref("Storage")}}, associée à l'origine courante, est modifié. Comme vous pouvez le voir ci-dessus, l'objet événement associé à cet événement a de nombreuses propriétés contenant des informations utiles: la clé de la donnée qui a changé, l'ancienne valeur avant le changement, la nouvelle valeur après le changement, l'URL du document qui a changé le stockage et l'objet stockage lui-même.</p>
+Ici nous avons ajouté un event listener à l'objet `window `qui se lance quand l'objet {{domxref("Storage")}}, associée à l'origine courante, est modifié. Comme vous pouvez le voir ci-dessus, l'objet événement associé à cet événement a de nombreuses propriétés contenant des informations utiles: la clé de la donnée qui a changé, l'ancienne valeur avant le changement, la nouvelle valeur après le changement, l'URL du document qui a changé le stockage et l'objet stockage lui-même.
 
-<h2 id="Supprimer_des_données">Supprimer des données</h2>
+## Supprimer des données
 
-<p>l'API de Stockage Web fournit aussi un couple de méthodes simples pour supprimer des données. Nous ne les utilisons pas dans notre démo, mais elles sont simples à ajouter dans votre projet :</p>
+l'API de Stockage Web fournit aussi un couple de méthodes simples pour supprimer des données. Nous ne les utilisons pas dans notre démo, mais elles sont simples à ajouter dans votre projet :
 
-<ul>
- <li>{{domxref("Storage.removeItem()")}} prend un seul argument — la clé de l'élément que vous souhaitez supprimer — et le supprime de l'objet de stockage pour le domaine.</li>
- <li>{{domxref("Storage.clear()")}} ne prend pas d'argument, et vide l'ensemble des données de l'objet de stockage pour le domaine.</li>
-</ul>
+- {{domxref("Storage.removeItem()")}} prend un seul argument — la clé de l'élément que vous souhaitez supprimer — et le supprime de l'objet de stockage pour le domaine.
+- {{domxref("Storage.clear()")}} ne prend pas d'argument, et vide l'ensemble des données de l'objet de stockage pour le domaine.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Web Storage')}}</td>
-   <td>{{Spec2('Web Storage')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+| Spécification                        | Statut                           | Commentaire |
+| ------------------------------------ | -------------------------------- | ----------- |
+| {{SpecName('Web Storage')}} | {{Spec2('Web Storage')}} |             |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<h3 id="Window.localStorage"><code>Window.localStorage</code></h3>
+### `Window.localStorage`
 
-<p>{{Compat("api.Window.localStorage")}}</p>
+{{Compat("api.Window.localStorage")}}
 
-<h3 id="Window.sessionStorage"><code>Window.sessionStorage</code></h3>
+### `Window.sessionStorage`
 
-<p>{{Compat("api.Window.sessionStorage")}}</p>
+{{Compat("api.Window.sessionStorage")}}
 
-<p>Tous les navigateurs ont des niveaux de capacité différents pour localStorage et sessionStorage. Voici un <a href="http://dev-test.nemikor.com/web-storage/support-test/">détail des capacités de stockage pour différents navigateurs</a>.</p>
+Tous les navigateurs ont des niveaux de capacité différents pour localStorage et sessionStorage. Voici un [détail des capacités de stockage pour différents navigateurs](http://dev-test.nemikor.com/web-storage/support-test/).
 
-<div class="note">
-<p><strong>Note :</strong> Depuis iOS 5.1, Safari Mobile stocke les données de localStorage dans le repertoire de cache, qui est parfois sujet à des nettoyages, à la demande de l'OS, typiquement quand l'espace restant est faible.</p>
-</div>
+> **Note :** Depuis iOS 5.1, Safari Mobile stocke les données de localStorage dans le repertoire de cache, qui est parfois sujet à des nettoyages, à la demande de l'OS, typiquement quand l'espace restant est faible.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/API/Web_Storage_API">Page API du Stockage Web</a></li>
-</ul>
+- [Page API du Stockage Web](/fr/docs/Web/API/Web_Storage_API)
diff --git a/files/fr/web/api/web_workers_api/functions_and_classes_available_to_workers/index.md b/files/fr/web/api/web_workers_api/functions_and_classes_available_to_workers/index.md
index bcd5c59b3c..4569d01aa5 100644
--- a/files/fr/web/api/web_workers_api/functions_and_classes_available_to_workers/index.md
+++ b/files/fr/web/api/web_workers_api/functions_and_classes_available_to_workers/index.md
@@ -4,238 +4,346 @@ slug: Web/API/Web_Workers_API/Functions_and_classes_available_to_workers
 translation_of: Web/API/Web_Workers_API/Functions_and_classes_available_to_workers
 original_slug: Web/API/Worker/Functions_and_classes_available_to_workers
 ---
-<p>En plus de l'ensemble des fonctions standard <a href="/en-US/docs/Web/JavaScript">JavaScript</a> (telles que {{jsxref("Global_Objects/String", "String")}}, {{jsxref("Global_Objects/Array", "Array")}}, {{jsxref("Global_Objects/Object", "Object")}}, {{jsxref("Global_Objects/JSON", "JSON")}} etc), des fonctions du DOM restent disponibles pour les workers. Cet article en fournit la liste.</p>
+En plus de l'ensemble des fonctions standard [JavaScript](/en-US/docs/Web/JavaScript) (telles que {{jsxref("Global_Objects/String", "String")}}, {{jsxref("Global_Objects/Array", "Array")}}, {{jsxref("Global_Objects/Object", "Object")}}, {{jsxref("Global_Objects/JSON", "JSON")}} etc), des fonctions du DOM restent disponibles pour les workers. Cet article en fournit la liste.
 
-<p><strong>Les workers s'exécutent dans un contexte global, {{domxref("DedicatedWorkerGlobalScope")}} différent du contexte de la fenêtre courante</strong>. Par défaut les méthodes et propriétés de {{domxref("Window")}} ne leur sont pas disponibles, mais {{domxref("DedicatedWorkerGlobalScope")}}, comme <code>Window</code>, implémente {{domxref("WindowTimers")}} et {{domxref("WindowBase64")}}.</p>
+**Les workers s'exécutent dans un contexte global, {{domxref("DedicatedWorkerGlobalScope")}} différent du contexte de la fenêtre courante**. Par défaut les méthodes et propriétés de {{domxref("Window")}} ne leur sont pas disponibles, mais {{domxref("DedicatedWorkerGlobalScope")}}, comme `Window`, implémente {{domxref("WindowTimers")}} et {{domxref("WindowBase64")}}.
 
-<h2 id="Comparaison_des_propriétés_et_méthodes_des_différents_types_de_workers">Comparaison des propriétés et méthodes des différents types de workers</h2>
+## Comparaison des propriétés et méthodes des différents types de workers
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <td class="header">Fonctions</td>
-   <td class="header">Workers dédiés</td>
-   <td class="header">Workers partagés</td>
-   <td class="header">Service workers</td>
-   <td class="header">Chrome workers {{Non-standard_inline}}</td>
-   <td class="header">En dehors des  workers</td>
-  </tr>
-  <tr>
-   <td>{{domxref("WindowBase64.atob", "atob()")}}</td>
-   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
-   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
-   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
-   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
-   <td>oui, sur {{domxref("Window")}}</td>
-  </tr>
-  <tr>
-   <td>{{domxref("WindowBase64.btoa", "btoa()")}}</td>
-   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
-   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
-   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
-   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
-   <td>oui, sur {{domxref("Window")}}</td>
-  </tr>
-  <tr>
-   <td>{{domxref("WindowTimers.clearInterval", "clearInterval()")}}</td>
-   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
-   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
-   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
-   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
-   <td>oui, sur {{domxref("Window")}}</td>
-  </tr>
-  <tr>
-   <td>{{domxref("WindowTimers.clearTimeout", "clearTimeout()")}}</td>
-   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
-   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
-   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
-   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
-   <td>oui, sur {{domxref("Window")}}</td>
-  </tr>
-  <tr>
-   <td>{{domxref("Window.dump()", "dump()")}} {{non-standard_inline}}</td>
-   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
-   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
-   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
-   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
-   <td>oui, sur {{domxref("Window")}}</td>
-  </tr>
-  <tr>
-   <td>{{domxref("WindowTimers.setInterval", "setInterval()")}}</td>
-   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
-   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
-   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
-   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
-   <td>oui, sur {{domxref("Window")}}</td>
-  </tr>
-  <tr>
-   <td>{{domxref("WindowTimers.setTimeout", "setTimeout()")}}</td>
-   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
-   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
-   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
-   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
-   <td>oui, sur {{domxref("Window")}}</td>
-  </tr>
-  <tr>
-   <td>{{domxref("WorkerGlobalScope.importScripts", "importScripts()")}}</td>
-   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
-   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
-   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
-   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
-   <td>non</td>
-  </tr>
-  <tr>
-   <td>{{domxref("WorkerGlobalScope.close", "close()")}} {{non-standard_inline}}</td>
-   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
-   <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
-   <td>oui, mais sans effet</td>
-   <td>Inconnu</td>
-   <td>non</td>
-  </tr>
-  <tr>
-   <td>{{domxref("DedicatedWorkerGlobalScope.postMessage", "postMessage()")}}</td>
-   <td>oui, sur {{domxref("DedicatedWorkerGlobalScope")}}</td>
-   <td>non</td>
-   <td>non</td>
-   <td>Inconnu</td>
-   <td>non</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <td class="header">Fonctions</td>
+      <td class="header">Workers dédiés</td>
+      <td class="header">Workers partagés</td>
+      <td class="header">Service workers</td>
+      <td class="header">Chrome workers {{Non-standard_inline}}</td>
+      <td class="header">En dehors des  workers</td>
+    </tr>
+    <tr>
+      <td>{{domxref("WindowBase64.atob", "atob()")}}</td>
+      <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+      <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+      <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+      <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+      <td>oui, sur {{domxref("Window")}}</td>
+    </tr>
+    <tr>
+      <td>{{domxref("WindowBase64.btoa", "btoa()")}}</td>
+      <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+      <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+      <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+      <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+      <td>oui, sur {{domxref("Window")}}</td>
+    </tr>
+    <tr>
+      <td>
+        {{domxref("WindowTimers.clearInterval", "clearInterval()")}}
+      </td>
+      <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+      <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+      <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+      <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+      <td>oui, sur {{domxref("Window")}}</td>
+    </tr>
+    <tr>
+      <td>
+        {{domxref("WindowTimers.clearTimeout", "clearTimeout()")}}
+      </td>
+      <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+      <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+      <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+      <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+      <td>oui, sur {{domxref("Window")}}</td>
+    </tr>
+    <tr>
+      <td>
+        {{domxref("Window.dump()", "dump()")}}
+        {{non-standard_inline}}
+      </td>
+      <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+      <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+      <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+      <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+      <td>oui, sur {{domxref("Window")}}</td>
+    </tr>
+    <tr>
+      <td>
+        {{domxref("WindowTimers.setInterval", "setInterval()")}}
+      </td>
+      <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+      <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+      <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+      <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+      <td>oui, sur {{domxref("Window")}}</td>
+    </tr>
+    <tr>
+      <td>
+        {{domxref("WindowTimers.setTimeout", "setTimeout()")}}
+      </td>
+      <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+      <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+      <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+      <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+      <td>oui, sur {{domxref("Window")}}</td>
+    </tr>
+    <tr>
+      <td>
+        {{domxref("WorkerGlobalScope.importScripts", "importScripts()")}}
+      </td>
+      <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+      <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+      <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+      <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+      <td>non</td>
+    </tr>
+    <tr>
+      <td>
+        {{domxref("WorkerGlobalScope.close", "close()")}}
+        {{non-standard_inline}}
+      </td>
+      <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+      <td>oui, sur {{domxref("WorkerGlobalScope")}}</td>
+      <td>oui, mais sans effet</td>
+      <td>Inconnu</td>
+      <td>non</td>
+    </tr>
+    <tr>
+      <td>
+        {{domxref("DedicatedWorkerGlobalScope.postMessage", "postMessage()")}}
+      </td>
+      <td>oui, sur {{domxref("DedicatedWorkerGlobalScope")}}</td>
+      <td>non</td>
+      <td>non</td>
+      <td>Inconnu</td>
+      <td>non</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="APIs_disponibles_dans_les_workers">APIs disponibles dans les workers</h2>
+## APIs disponibles dans les workers
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <td class="header">Fonction</td>
-   <td class="header">Fonctionnalité</td>
-   <td class="header">Support dans Gecko (Firefox)</td>
-   <td class="header">Support dans IE</td>
-   <td class="header">Support dans Blink (Chrome et Opera)</td>
-   <td class="header">Support dans WebKit (Safari)</td>
-  </tr>
-  <tr>
-   <td><code>XMLHttpRequest</code></td>
-   <td>Crée et retourne un nouvel objet {{domxref("XMLHttpRequest")}}; il imite le comportement du constructeur standard <code>XMLHttpRequest()</code>. Remarquez que les attributs <code>responseXML</code> et <code>channel</code> de <code>XMLHttpRequest</code> retourne toujours <code>null</code>.</td>
-   <td>
-    <p>Basique : {{CompatGeckoDesktop("1.9.1")}}</p>
-
-    <p>{{domxref("XMLHttpRequest.response", "response")}} et {{domxref("XMLHttpRequest.responseType", "responseType")}} sont disponibles depuis {{CompatGeckoDesktop("10")}}</p>
-
-    <p>{{domxref("XMLHttpRequest.timeout", "timeout")}} et {{domxref("XMLHttpRequest.ontimeout", "ontimeout")}} sont disponibles depuis {{CompatGeckoDesktop("13")}}</p>
-   </td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-  </tr>
-  <tr>
-   <td><code>Worker</code></td>
-   <td>Crée un nouveau {{ domxref("Worker") }}. Oui, les workers peuvent engendrer des workers supplémentaires.</td>
-   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
-   <td>10.0</td>
-   <td>{{CompatNo}} Voir <a href="http://code.google.com/p/chromium/issues/detail?id=31666">crbug.com/31666</a></td>
-   <td>{{CompatNo}}</td>
-  </tr>
-  <tr>
-   <td>{{ domxref("URL") }}</td>
-   <td>Les workers peuvent utiliser les méthodes statiques <a href="/en-US/docs/DOM/window.URL.createObjectURL">URL.createObjectURL</a> et <a href="/en-US/docs/DOM/window.URL.revokeObjectURL">URL.revokeObjectURL</a> avec les objets {{domxref("Blob")}} accessibles au worker.<br>
-    Les workers peuvent aussi créer une nouvelle URL en utilisant le constructeur {{domxref("URL.URL", "URL()")}} et appeler n'importe quelle méthode normale sur l'objet retourné.</td>
-   <td>{{CompatGeckoDesktop(21)}} et {{CompatGeckoDesktop(26)}} pour le constructeur URL()</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-  </tr>
-  <tr>
-   <td>{{domxref("TextEncoder")}} and {{domxref("TextDecoder")}}</td>
-   <td>Crée et retourne un nouveau {{domxref("TextEncoder")}}, ou respectivement {{domxref("TextDecoder")}}, permettant d'encoder ou de décoder des chaînes de caractère dans un encodage spécifique.</td>
-   <td>{{CompatGeckoDesktop(20)}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-  </tr>
-  <tr>
-   <td>{{domxref("WorkerNavigator")}}</td>
-   <td>Le sous-ensemble de l'interface {{domxref("Navigator")}} disponible aux workers.</td>
-   <td>Implémentation basique {{CompatVersionUnknown}}<br>
-    {{domxref("NavigatorID.appCodeName", "appCodeName")}}, {{domxref("NavigatorID.product", "product")}}, {{domxref("NavigatorID.taintEnabled", "taintEnabled()")}}: {{CompatGeckoDesktop(28)}}<br>
-    {{domxref("WorkerNavigator.onLine", "onLine")}}: {{CompatGeckoDesktop(29)}}<br>
-    {{domxref("NavigatorLanguage")}}: {{CompatNo}}</td>
-   <td>{{domxref("NavigatorID.appName", "appName")}}, {{domxref("NavigatorID.appVersion", "appName")}}, {{domxref("WorkerNavigator.onLine", "onLine")}}, {{domxref("NavigatorID.platform", "platform")}}, {{domxref("NavigatorID.userAgent", "userAgent")}}: 10.0<br>
-    Autre : {{CompatNo}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-  </tr>
-  <tr>
-   <td>{{domxref("WorkerLocation")}}</td>
-   <td>Le sous-ensemble de l'interface {{domxref("Location")}} disponible aux workers.</td>
-   <td>{{CompatGeckoDesktop(1.9.2)}}</td>
-   <td>10.0</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-  </tr>
-  <tr>
-   <td>{{domxref("WorkerGlobalScope")}}</td>
-   <td>Le contexte global des workers. Cet objet définit <a href="#workerscope">les fonctions spécifiques aux workers</a>.</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>10.0</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-  </tr>
-  <tr>
-   <td>{{domxref("ImageData")}}</td>
-   <td>Les données en pixels sous-jacentes à une zone d'un élément {{domxref("canvas")}}. Manipuler de telles données peut être une tâche complexe qu'il est plus approprié de déléguer à un web worker.</td>
-   <td>{{CompatGeckoDesktop(25)}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-  </tr>
-  <tr>
-   <td>{{domxref("FileReaderSync")}}</td>
-   <td>Cette API permet la lecture synchrone d'objets {{domxref("Blob")}} et {{domxref("File")}}. C'est une API qui fonctionne uniquement au sein des workers.</td>
-   <td>{{CompatGeckoDesktop(8)}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-  </tr>
-  <tr>
-   <td>{{domxref("IndexedDB_API", "IndexedDB")}}</td>
-   <td>Une base de données pour stocker des enregistrements contenant des valeurs simples et des objets hiérarchiques.</td>
-   <td>{{CompatGeckoDesktop(37)}}</td>
-   <td>10.0</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatNo}}</td>
-  </tr>
-  <tr>
-   <td>{{domxref("WebSocket")}}</td>
-   <td>Crée et retourne un nouvel objet {{domxref("WebSocket")}}; Il imite le comportement d'un constructeur <code>WebSocket()</code> standard.</td>
-   <td>{{CompatGeckoDesktop(36)}}</td>
-   <td>11.0</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-  </tr>
-  <tr>
-   <td><a href="/en-US/docs/Web/API/Data_Store_API">Data Store API</a></td>
-   <td>Un mécanisme de stockage puissant et flexible pour de multiples applications Firefox OS qui ont l'habitude de stocker et d'échanger des données entre elles de manière rapide, efficace et sécurisée.</td>
-   <td>Seulement dans les applications internes (certifiées) de Firefox OS, deuis v1.0.1.</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatNo}}</td>
-  </tr>
-  <tr>
-   <td><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a></td>
-   <td>Les objets JavaScript qui vous permettent d'écrire des fonctions asynchrones.</td>
-   <td>{{CompatGeckoDesktop(28)}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <td class="header">Fonction</td>
+      <td class="header">Fonctionnalité</td>
+      <td class="header">Support dans Gecko (Firefox)</td>
+      <td class="header">Support dans IE</td>
+      <td class="header">Support dans Blink (Chrome et Opera)</td>
+      <td class="header">Support dans WebKit (Safari)</td>
+    </tr>
+    <tr>
+      <td><code>XMLHttpRequest</code></td>
+      <td>
+        Crée et retourne un nouvel objet
+        {{domxref("XMLHttpRequest")}}; il imite le comportement du
+        constructeur standard <code>XMLHttpRequest()</code>. Remarquez que les
+        attributs <code>responseXML</code> et <code>channel</code> de
+        <code>XMLHttpRequest</code> retourne toujours <code>null</code>.
+      </td>
+      <td>
+        <p>Basique : {{CompatGeckoDesktop("1.9.1")}}</p>
+        <p>
+          {{domxref("XMLHttpRequest.response", "response")}}
+          et
+          {{domxref("XMLHttpRequest.responseType", "responseType")}}
+          sont disponibles depuis {{CompatGeckoDesktop("10")}}
+        </p>
+        <p>
+          {{domxref("XMLHttpRequest.timeout", "timeout")}} et
+          {{domxref("XMLHttpRequest.ontimeout", "ontimeout")}}
+          sont disponibles depuis {{CompatGeckoDesktop("13")}}
+        </p>
+      </td>
+      <td>{{CompatVersionUnknown}}</td>
+      <td>{{CompatVersionUnknown}}</td>
+      <td>{{CompatVersionUnknown}}</td>
+    </tr>
+    <tr>
+      <td><code>Worker</code></td>
+      <td>
+        Crée un nouveau {{ domxref("Worker") }}. Oui, les workers
+        peuvent engendrer des workers supplémentaires.
+      </td>
+      <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+      <td>10.0</td>
+      <td>
+        {{CompatNo}} Voir
+        <a href="http://code.google.com/p/chromium/issues/detail?id=31666"
+          >crbug.com/31666</a
+        >
+      </td>
+      <td>{{CompatNo}}</td>
+    </tr>
+    <tr>
+      <td>{{ domxref("URL") }}</td>
+      <td>
+        Les workers peuvent utiliser les méthodes statiques
+        <a href="/en-US/docs/DOM/window.URL.createObjectURL"
+          >URL.createObjectURL</a
+        >
+        et
+        <a href="/en-US/docs/DOM/window.URL.revokeObjectURL"
+          >URL.revokeObjectURL</a
+        >
+        avec les objets {{domxref("Blob")}} accessibles au worker.<br />Les
+        workers peuvent aussi créer une nouvelle URL en utilisant le
+        constructeur {{domxref("URL.URL", "URL()")}} et appeler
+        n'importe quelle méthode normale sur l'objet retourné.
+      </td>
+      <td>
+        {{CompatGeckoDesktop(21)}} et
+        {{CompatGeckoDesktop(26)}} pour le constructeur URL()
+      </td>
+      <td>{{CompatNo}}</td>
+      <td>{{CompatNo}}</td>
+      <td>{{CompatNo}}</td>
+    </tr>
+    <tr>
+      <td>
+        {{domxref("TextEncoder")}} and
+        {{domxref("TextDecoder")}}
+      </td>
+      <td>
+        Crée et retourne un nouveau {{domxref("TextEncoder")}}, ou
+        respectivement {{domxref("TextDecoder")}}, permettant
+        d'encoder ou de décoder des chaînes de caractère dans un encodage
+        spécifique.
+      </td>
+      <td>{{CompatGeckoDesktop(20)}}</td>
+      <td>{{CompatNo}}</td>
+      <td>{{CompatNo}}</td>
+      <td>{{CompatNo}}</td>
+    </tr>
+    <tr>
+      <td>{{domxref("WorkerNavigator")}}</td>
+      <td>
+        Le sous-ensemble de l'interface {{domxref("Navigator")}}
+        disponible aux workers.
+      </td>
+      <td>
+        Implémentation basique {{CompatVersionUnknown}}<br />{{domxref("NavigatorID.appCodeName", "appCodeName")}},
+        {{domxref("NavigatorID.product", "product")}},
+        {{domxref("NavigatorID.taintEnabled", "taintEnabled()")}}:
+        {{CompatGeckoDesktop(28)}}<br />{{domxref("WorkerNavigator.onLine", "onLine")}}:
+        {{CompatGeckoDesktop(29)}}<br />{{domxref("NavigatorLanguage")}}:
+        {{CompatNo}}
+      </td>
+      <td>
+        {{domxref("NavigatorID.appName", "appName")}},
+        {{domxref("NavigatorID.appVersion", "appName")}},
+        {{domxref("WorkerNavigator.onLine", "onLine")}},
+        {{domxref("NavigatorID.platform", "platform")}},
+        {{domxref("NavigatorID.userAgent", "userAgent")}}:
+        10.0<br />Autre : {{CompatNo}}
+      </td>
+      <td>{{CompatVersionUnknown}}</td>
+      <td>{{CompatVersionUnknown}}</td>
+    </tr>
+    <tr>
+      <td>{{domxref("WorkerLocation")}}</td>
+      <td>
+        Le sous-ensemble de l'interface {{domxref("Location")}}
+        disponible aux workers.
+      </td>
+      <td>{{CompatGeckoDesktop(1.9.2)}}</td>
+      <td>10.0</td>
+      <td>{{CompatVersionUnknown}}</td>
+      <td>{{CompatVersionUnknown}}</td>
+    </tr>
+    <tr>
+      <td>{{domxref("WorkerGlobalScope")}}</td>
+      <td>
+        Le contexte global des workers. Cet objet définit
+        <a href="#workerscope">les fonctions spécifiques aux workers</a>.
+      </td>
+      <td>{{CompatVersionUnknown}}</td>
+      <td>10.0</td>
+      <td>{{CompatVersionUnknown}}</td>
+      <td>{{CompatVersionUnknown}}</td>
+    </tr>
+    <tr>
+      <td>{{domxref("ImageData")}}</td>
+      <td>
+        Les données en pixels sous-jacentes à une zone d'un élément
+        {{domxref("canvas")}}. Manipuler de telles données peut être une
+        tâche complexe qu'il est plus approprié de déléguer à un web worker.
+      </td>
+      <td>{{CompatGeckoDesktop(25)}}</td>
+      <td>{{CompatNo}}</td>
+      <td>{{CompatNo}}</td>
+      <td>{{CompatNo}}</td>
+    </tr>
+    <tr>
+      <td>{{domxref("FileReaderSync")}}</td>
+      <td>
+        Cette API permet la lecture synchrone d'objets {{domxref("Blob")}}
+        et {{domxref("File")}}. C'est une API qui fonctionne uniquement au
+        sein des workers.
+      </td>
+      <td>{{CompatGeckoDesktop(8)}}</td>
+      <td>{{CompatNo}}</td>
+      <td>{{CompatNo}}</td>
+      <td>{{CompatNo}}</td>
+    </tr>
+    <tr>
+      <td>{{domxref("IndexedDB_API", "IndexedDB")}}</td>
+      <td>
+        Une base de données pour stocker des enregistrements contenant des
+        valeurs simples et des objets hiérarchiques.
+      </td>
+      <td>{{CompatGeckoDesktop(37)}}</td>
+      <td>10.0</td>
+      <td>{{CompatVersionUnknown}}</td>
+      <td>{{CompatNo}}</td>
+    </tr>
+    <tr>
+      <td>{{domxref("WebSocket")}}</td>
+      <td>
+        Crée et retourne un nouvel objet {{domxref("WebSocket")}}; Il
+        imite le comportement d'un constructeur
+        <code>WebSocket()</code> standard.
+      </td>
+      <td>{{CompatGeckoDesktop(36)}}</td>
+      <td>11.0</td>
+      <td>{{CompatVersionUnknown}}</td>
+      <td>{{CompatVersionUnknown}}</td>
+    </tr>
+    <tr>
+      <td><a href="/en-US/docs/Web/API/Data_Store_API">Data Store API</a></td>
+      <td>
+        Un mécanisme de stockage puissant et flexible pour de multiples
+        applications Firefox OS qui ont l'habitude de stocker et d'échanger des
+        données entre elles de manière rapide, efficace et sécurisée.
+      </td>
+      <td>
+        Seulement dans les applications internes (certifiées) de Firefox OS,
+        deuis v1.0.1.
+      </td>
+      <td>{{CompatNo}}</td>
+      <td>{{CompatNo}}</td>
+      <td>{{CompatNo}}</td>
+    </tr>
+    <tr>
+      <td>
+        <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise"
+          >Promises</a
+        >
+      </td>
+      <td>
+        Les objets JavaScript qui vous permettent d'écrire des fonctions
+        asynchrones.
+      </td>
+      <td>{{CompatGeckoDesktop(28)}}</td>
+      <td>{{CompatVersionUnknown}}</td>
+      <td>{{CompatVersionUnknown}}</td>
+      <td>{{CompatVersionUnknown}}</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Utilisation_des_web_workers">Utilisation des web workers</a></li>
- <li>{{ domxref("Worker") }}</li>
-</ul>
+- [Utilisation des web workers](/fr/docs/Utilisation_des_web_workers)
+- {{ domxref("Worker") }}
diff --git a/files/fr/web/api/web_workers_api/index.md b/files/fr/web/api/web_workers_api/index.md
index 57afda034b..c8ee4c3ff1 100644
--- a/files/fr/web/api/web_workers_api/index.md
+++ b/files/fr/web/api/web_workers_api/index.md
@@ -6,89 +6,68 @@ tags:
   - DOM
 translation_of: Web/API/Web_Workers_API
 ---
-<div>{{DefaultAPISidebar("Web Workers API")}}</div>
-
-<p>Les <strong>Web Workers</strong> sont un mécanisme grâce auquel les instructions d'un script peuvent être exécutés dans un thread en arrière-plan séparé du thread d'exécution principal d'une application web. Cela a pour avantage qu'un traitement laborieux peut être réalisé dans un thread séparé, permettant au thread principal (généralement l'interface utilisateur) de fonctionner sans blocage ni ralentissement.</p>
-
-<h2 id="Concepts_et_utilisation_des_Web_Workers">Concepts et utilisation des Web Workers</h2>
-
-<p>Un worker est un objet créé en utilisant un constructeur (e.g. {{domxref("Worker.Worker", "Worker()")}}) qui exécute un fichier JavaScript nommé — ce fichier contient le code que doit exécuter le thread du worker; les workers s'exécutent dans un autre contexte global qui est différent du contexte actuel {{domxref("window")}}. Ce contexte est représenté par un objet {{domxref("DedicatedWorkerGlobalScope")}} dans le cas des workers dédiés (workers standards utilisés par un script unique; les workers partagés utilisent {{domxref("SharedWorkerGlobalScope")}}).</p>
-
-<p>Vous pouvez exécuter quelque code que ce soit à l'intérieur du thread du worker, avec quelques exceptions cependant. Par exemple, vous ne pouvez pas directement manipuler le DOM à partir d'un worker, ou utiliser des méthodes et des propriétés par défaut de l'objet {{domxref("window")}}. Mais vous pouvez utiliser un grand nombre des éléments disponibles sous <code>window</code>, comprenant les <a href="/fr/docs/WebSockets">WebSockets</a>, et les mécanismes de stockage de données tels qu'<a href="/fr/docs/IndexedDB">IndexedDB</a> et l'<a href="/en-US/docs/Web/API/Data_Store_API">API Data Store</a> spécifique à Firefox OS. Consultez <a href="/fr/docs/Web/API/Worker/Functions_and_classes_available_to_workers">Les fonctions et classes accessibles aux workers</a> pour plus de détails.</p>
-
-<p>Les données sont envoyées entre les workers et le thread principal au moyen d'un sytème de messages — des deux côtés les messages sont envoyés en utilisant la méthode <code>postMessage()</code>, et la réponse leur parvient au moyen du gestionnaire d'événement <code>onmessage</code> (le message est contenu dans l'attribut <code>data</code> de l'événement {{event("Message")}}.) Les données sont copiées plutôt que partagées.</p>
-
-<p>Les workers peuvent à leur tour engendrer de nouveaux workers, aussi longtemps que ces workers partagent la même origine que la page parente.  De plus, les workers peuvent utiliser <a href="/fr/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code></a> pour les E/S réseau, à l'exception que les attributs <code>responseXML</code> et <code>channel</code> de <code>XMLHttpRequest</code> retournent toujours <code>null</code>.</p>
-
-<p>En plus des workers dédiés, il y a d'autres types de worker :</p>
-
-<ul>
- <li>Les workers partagés sont des workers qui peuvent être utilisés par de multiples scripts s'exécutant dans différentes fenêtres, IFrames, etc., aussi longtemps qu'ils sont dans le même domaine que le worker. Leur fonctionnement est un petit plus complexe que les workers dédiés — les scripts doivent communiquer via un port actif. Consultez {{domxref("SharedWorker")}} pour plus de détails.</li>
- <li>Les <a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorkers</a> fonctionnent essentiellement comme des serveurs proxy placés entre des applications web, et le navigateur et le réseau (lorsque disponibles). Ils sont destinés (entre autres choses) à permettre la création de véritables expériences déconnectées, interceptant les requêtes du réseau et prenant des décisions appropriées en fonction de la disponibilité du réseau et de la mise à jours des ressources situées sur le serveur. Ils permettront aussi d'accéder à des notifications poussées (push) et à des APIs synchronisées en arrière-plan.</li>
- <li>Les Workers Chrome sont un type de worker spécifique à Firefox que vous pouvez utiliser si vous développez des extensions et que vous voulez y utiliser des workers et avoir accès aux <a href="/fr/docs/Mozilla/js-ctypes">js-ctypes</a> dans votre worker. Consulter {{domxref("ChromeWorker")}} pour plus de détails. </li>
- <li>Les <a href="/fr/docs/Web/API/Web_Audio_API#Audio_Workers">Audio Workers</a> donne la possibilité d'effectuer directement dans le contexte d'un worker web un traitement audio scripté.</li>
-</ul>
-
-<div class="note">
-<p><strong>Note :</strong> Selon les <a href="https://html.spec.whatwg.org/multipage/workers.html#runtime-script-errors-2">Spécifications de Web Worker</a>, les erreurs dans les workers ne devraient pas déborder (voir {{bug(1188141)}}). Cela a été implémenté dans Firefox 42.</p>
-</div>
-
-<h2 id="Les_interfaces_Web_Worker">Les interfaces Web Worker</h2>
-
-<dl>
- <dt>{{domxref("AbstractWorker")}}</dt>
- <dd>Propriétés et méthodes abstraites communes à tous les types de workers (i.e. {{domxref("Worker")}} ou {{domxref("SharedWorker")}}).</dd>
- <dt>{{domxref("Worker")}}</dt>
- <dd>Représente le thread d'un worker en cours d'exécution, vous permettant de passer des messages au code du worker en cours d'exécution.</dd>
- <dt>{{DOMxRef("WorkerLocation")}}</dt>
- <dd>Défini la localisation du scripte exécuté par le <a href="/fr/docs/Web/API/Worker">Worker</a>.</dd>
- <dt>{{domxref("SharedWorker")}}</dt>
- <dd>Représente un type spécifique de worker qui peut être <em>accédé</em> à partir de plusieurs contextes de navigation, à savoir plusieurs fenêtres, iframes ou même workers.</dd>
- <dt>{{domxref("WorkerGlobalScope")}}</dt>
- <dd>Représente le contexte générique de tout worker (il joue le même rôle que {{domxref("Window")}} pour un contenu web normal). Les différents types de worker ont un contexte d'objets qui hérite de cette interface et ajoute des fonctionnalités supplémentaires.</dd>
- <dt>{{domxref("DedicatedWorkerGlobalScope")}}</dt>
- <dd>Représente le contexte d'un worker dédié, héritant de {{domxref("WorkerGlobalScope")}} et ajoutant des fonctionnalités spécifiques.</dd>
- <dt>{{domxref("SharedWorkerGlobalScope")}}</dt>
- <dd>Représente le contexte d'un worker partagé, héritant de {{domxref("WorkerGlobalScope")}} et ajoutant des fonctionnalités spécifiques.</dd>
- <dt>{{domxref("WorkerNavigator")}}</dt>
- <dd>Représente l'identité et l'état de l'agent utilisateur (le client):</dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Nous avons créé deux simples démos pour illustrer des usages basiques :</p>
-
-<ul>
- <li><a href="https://github.com/mdn/simple-web-worker">Exemple basique d'un worker dédié</a> (<a href="http://mdn.github.io/simple-web-worker/">lancer le worker dédié</a>).</li>
- <li><a href="https://github.com/mdn/simple-shared-worker">Exemple basique d'un worker partagé</a> (<a href="http://mdn.github.io/simple-shared-worker/">lancer le worker partagé</a>).</li>
-</ul>
-
-<p>Vous pouvez obtenir plus d'informations sur le fonctionnement de ces démos dans notre <a href="/fr/docs/Utilisation_des_web_workers">guide d'utilisation des web workers</a>.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML WHATWG", "workers.html#workers", "Web Workers")}}</td>
-   <td>{{Spec2("HTML WHATWG")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Utilisation_des_web_workers">Utilisation des web workers</a></li>
- <li><a href="/fr/docs/Web/API/Worker">L'interface Worker</a></li>
- <li><a href="/fr/docs/Web/API/SharedWorker">L'interface SharedWorker</a></li>
- <li><a href="/en-US/docs/Web/API/ServiceWorker_API">L'API ServiceWorker</a></li>
- <li><a href="/fr/docs/Web/API/Worker/Functions_and_classes_available_to_workers">Les fonctions et classes accessibles aux workers</a></li>
- <li><a href="/en-US/docs/Web/API/ChromeWorker">ChromeWorker</a> : pour l'utilisation des workers dans un code privilégié (chrome)</li>
-</ul>
+{{DefaultAPISidebar("Web Workers API")}}
+
+Les **Web Workers** sont un mécanisme grâce auquel les instructions d'un script peuvent être exécutés dans un thread en arrière-plan séparé du thread d'exécution principal d'une application web. Cela a pour avantage qu'un traitement laborieux peut être réalisé dans un thread séparé, permettant au thread principal (généralement l'interface utilisateur) de fonctionner sans blocage ni ralentissement.
+
+## Concepts et utilisation des Web Workers
+
+Un worker est un objet créé en utilisant un constructeur (e.g. {{domxref("Worker.Worker", "Worker()")}}) qui exécute un fichier JavaScript nommé — ce fichier contient le code que doit exécuter le thread du worker; les workers s'exécutent dans un autre contexte global qui est différent du contexte actuel {{domxref("window")}}. Ce contexte est représenté par un objet {{domxref("DedicatedWorkerGlobalScope")}} dans le cas des workers dédiés (workers standards utilisés par un script unique; les workers partagés utilisent {{domxref("SharedWorkerGlobalScope")}}).
+
+Vous pouvez exécuter quelque code que ce soit à l'intérieur du thread du worker, avec quelques exceptions cependant. Par exemple, vous ne pouvez pas directement manipuler le DOM à partir d'un worker, ou utiliser des méthodes et des propriétés par défaut de l'objet {{domxref("window")}}. Mais vous pouvez utiliser un grand nombre des éléments disponibles sous `window`, comprenant les [WebSockets](/fr/docs/WebSockets), et les mécanismes de stockage de données tels qu'[IndexedDB](/fr/docs/IndexedDB) et l'[API Data Store](/en-US/docs/Web/API/Data_Store_API) spécifique à Firefox OS. Consultez [Les fonctions et classes accessibles aux workers](/fr/docs/Web/API/Worker/Functions_and_classes_available_to_workers) pour plus de détails.
+
+Les données sont envoyées entre les workers et le thread principal au moyen d'un sytème de messages — des deux côtés les messages sont envoyés en utilisant la méthode `postMessage()`, et la réponse leur parvient au moyen du gestionnaire d'événement `onmessage` (le message est contenu dans l'attribut `data` de l'événement {{event("Message")}}.) Les données sont copiées plutôt que partagées.
+
+Les workers peuvent à leur tour engendrer de nouveaux workers, aussi longtemps que ces workers partagent la même origine que la page parente.  De plus, les workers peuvent utiliser [`XMLHttpRequest`](/fr/docs/Web/API/XMLHttpRequest) pour les E/S réseau, à l'exception que les attributs `responseXML` et `channel` de `XMLHttpRequest` retournent toujours `null`.
+
+En plus des workers dédiés, il y a d'autres types de worker :
+
+- Les workers partagés sont des workers qui peuvent être utilisés par de multiples scripts s'exécutant dans différentes fenêtres, IFrames, etc., aussi longtemps qu'ils sont dans le même domaine que le worker. Leur fonctionnement est un petit plus complexe que les workers dédiés — les scripts doivent communiquer via un port actif. Consultez {{domxref("SharedWorker")}} pour plus de détails.
+- Les [ServiceWorkers](/en-US/docs/Web/API/ServiceWorker_API) fonctionnent essentiellement comme des serveurs proxy placés entre des applications web, et le navigateur et le réseau (lorsque disponibles). Ils sont destinés (entre autres choses) à permettre la création de véritables expériences déconnectées, interceptant les requêtes du réseau et prenant des décisions appropriées en fonction de la disponibilité du réseau et de la mise à jours des ressources situées sur le serveur. Ils permettront aussi d'accéder à des notifications poussées (push) et à des APIs synchronisées en arrière-plan.
+- Les Workers Chrome sont un type de worker spécifique à Firefox que vous pouvez utiliser si vous développez des extensions et que vous voulez y utiliser des workers et avoir accès aux [js-ctypes](/fr/docs/Mozilla/js-ctypes) dans votre worker. Consulter {{domxref("ChromeWorker")}} pour plus de détails.
+- Les [Audio Workers](/fr/docs/Web/API/Web_Audio_API#Audio_Workers) donne la possibilité d'effectuer directement dans le contexte d'un worker web un traitement audio scripté.
+
+> **Note :** Selon les [Spécifications de Web Worker](https://html.spec.whatwg.org/multipage/workers.html#runtime-script-errors-2), les erreurs dans les workers ne devraient pas déborder (voir {{bug(1188141)}}). Cela a été implémenté dans Firefox 42.
+
+## Les interfaces Web Worker
+
+- {{domxref("AbstractWorker")}}
+  - : Propriétés et méthodes abstraites communes à tous les types de workers (i.e. {{domxref("Worker")}} ou {{domxref("SharedWorker")}}).
+- {{domxref("Worker")}}
+  - : Représente le thread d'un worker en cours d'exécution, vous permettant de passer des messages au code du worker en cours d'exécution.
+- {{DOMxRef("WorkerLocation")}}
+  - : Défini la localisation du scripte exécuté par le [Worker](/fr/docs/Web/API/Worker).
+- {{domxref("SharedWorker")}}
+  - : Représente un type spécifique de worker qui peut être _accédé_ à partir de plusieurs contextes de navigation, à savoir plusieurs fenêtres, iframes ou même workers.
+- {{domxref("WorkerGlobalScope")}}
+  - : Représente le contexte générique de tout worker (il joue le même rôle que {{domxref("Window")}} pour un contenu web normal). Les différents types de worker ont un contexte d'objets qui hérite de cette interface et ajoute des fonctionnalités supplémentaires.
+- {{domxref("DedicatedWorkerGlobalScope")}}
+  - : Représente le contexte d'un worker dédié, héritant de {{domxref("WorkerGlobalScope")}} et ajoutant des fonctionnalités spécifiques.
+- {{domxref("SharedWorkerGlobalScope")}}
+  - : Représente le contexte d'un worker partagé, héritant de {{domxref("WorkerGlobalScope")}} et ajoutant des fonctionnalités spécifiques.
+- {{domxref("WorkerNavigator")}}
+  - : Représente l'identité et l'état de l'agent utilisateur (le client):
+
+## Exemples
+
+Nous avons créé deux simples démos pour illustrer des usages basiques :
+
+- [Exemple basique d'un worker dédié](https://github.com/mdn/simple-web-worker) ([lancer le worker dédié](http://mdn.github.io/simple-web-worker/)).
+- [Exemple basique d'un worker partagé](https://github.com/mdn/simple-shared-worker) ([lancer le worker partagé](http://mdn.github.io/simple-shared-worker/)).
+
+Vous pouvez obtenir plus d'informations sur le fonctionnement de ces démos dans notre [guide d'utilisation des web workers](/fr/docs/Utilisation_des_web_workers).
+
+## Spécifications
+
+| Spécification                                                                            | Statut                           | Commentaire          |
+| ---------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName("HTML WHATWG", "workers.html#workers", "Web Workers")}} | {{Spec2("HTML WHATWG")}} | Définition initiale. |
+
+## Voir aussi
+
+- [Utilisation des web workers](/fr/docs/Utilisation_des_web_workers)
+- [L'interface Worker](/fr/docs/Web/API/Worker)
+- [L'interface SharedWorker](/fr/docs/Web/API/SharedWorker)
+- [L'API ServiceWorker](/en-US/docs/Web/API/ServiceWorker_API)
+- [Les fonctions et classes accessibles aux workers](/fr/docs/Web/API/Worker/Functions_and_classes_available_to_workers)
+- [ChromeWorker](/en-US/docs/Web/API/ChromeWorker) : pour l'utilisation des workers dans un code privilégié (chrome)
diff --git a/files/fr/web/api/web_workers_api/structured_clone_algorithm/index.md b/files/fr/web/api/web_workers_api/structured_clone_algorithm/index.md
index ff872b99ad..6129b8598f 100644
--- a/files/fr/web/api/web_workers_api/structured_clone_algorithm/index.md
+++ b/files/fr/web/api/web_workers_api/structured_clone_algorithm/index.md
@@ -4,113 +4,55 @@ slug: Web/API/Web_Workers_API/Structured_clone_algorithm
 translation_of: Web/API/Web_Workers_API/Structured_clone_algorithm
 original_slug: Web/API/Web_Workers_API/algorithme_clonage_structure
 ---
-<p>L’algorithme de clonage structuré est un nouvel algorithme <a href="http://www.w3.org/html/wg/drafts/html/master/infrastructure.html#safe-passing-of-structured-data">défini par la spécification HTML5</a> pour sérialiser les objets JavaScript complexes. Il est plus puissant que <a href="/en/JSON">JSON</a> en cela qu’il supporte la sérialisation d’objets contenant des graphes cycliques — des objets peuvent faire référence à des objets faisant référence à d’autres objets dans le même graphe. De plus, dans certains cas, l’algorithme de clonage structuré peut être plus efficace que JSON.</p>
-
-<p>L’algorithme, essentiellement, parcourt tous les champs de l’objet original, copiant les valeurs de chaque champ dans un nouvel objet. Si un champ est lui-même un objet avec des champs, ces champs sont parcourus de manière récursive jusqu’à ce que chaque champ et sous-champ aient été copié dans le nouvel objet.</p>
-
-<h2 id="Avantages_par_rapport_à_JSON">Avantages par rapport à JSON</h2>
-
-<p>Il y a quelques avantages notables à utiliser l’algorithme de clonage structuré plutôt que JSON :</p>
-
-<ul>
- <li>Le clonage structuré peut copier des objets <a href="/en/JavaScript/Reference/Global_Objects/RegExp"><code>RegExp</code></a>.</li>
- <li>Le clonage structuré peut copier des objets {{ domxref("Blob") }}, {{ domxref("File") }} et {{ domxref("FileList") }}.</li>
- <li>Le clonage structuré peut copier des objets {{ domxref("ImageData") }}. Les dimensions du {{ domxref("CanvasPixelArray") }} du clone correspondront à celles de l’original, et il recevra une copie des mêmes données de pixels.</li>
- <li>Le clonage structuré copie correctement les objets contenant des graphes de références cycliques.</li>
-</ul>
-
-<h2 id="Ce_qui_ne_marche_pas_avec_le_clonage_structuré">Ce qui ne marche pas avec le clonage structuré</h2>
-
-<ul>
- <li>Les objets <a href="/en/JavaScript/Reference/Global_Objects/Error"><code>Error</code></a> et <a href="/en/JavaScript/Reference/Global_Objects/Function"><code>Function</code></a> ne peuvent pas être copiés par l’algorithme de clonage structuré ; toute tentative de le faire émettra une exception <code>DATA_CLONE_ERR</code>.</li>
- <li>De la même manière, toute tentative de cloner des nœuds DOM émettra une exception <code>DATA_CLONE_ERR</code>.</li>
- <li>Certains paramètres d’objets ne sont pas préservés :
-  <ul>
-   <li>Le champ <code>lastIndex</code> des objets <a href="/en/JavaScript/Reference/Global_Objects/RegExp"><code>RegExp</code></a> n’est pas préservé.</li>
-   <li>Les descripteurs de propriétés, accesseurs et mutateurs (ainsi que les fonctionnalités de métadonnées similaires) ne sont pas copiés. Par exemple, si un objet est marqué en lecture seule <em>via</em> un descripteur de propriété, il sera en lecture et écriture dans le clone, car c’est la condition par défaut.</li>
-   <li>La chaîne de prototypes n’est ni parcourue, ni copiée.</li>
-  </ul>
- </li>
-</ul>
-
-<h2 id="Types_supportés">Types supportés</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Type d’objet</th>
-   <th scope="col">Notes</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><a href="/en-US/docs/Web/JavaScript/Data_structures#Primitive_values">Tous types primitifs</a></td>
-   <td>À l’exception des symboles</td>
-  </tr>
-  <tr>
-   <td>Objet <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Booléen</a></td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>Objet String</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date">Date</a></td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp">RegExp</a></td>
-   <td>Le champ <code>lastIndex</code> n’est pas préservé</td>
-  </tr>
-  <tr>
-   <td>{{ domxref("Blob") }}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{ domxref("File") }}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{ domxref("FileList") }}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td><a href="/en-US/docs/Web/API/ArrayBuffer">ArrayBuffer</a></td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td><a href="/en-US/docs/Web/API/ArrayBufferView">ArrayBufferView</a></td>
-   <td>Ce qui implique tous les <a href="/en-US/docs/Web/JavaScript/Typed_arrays">tableaux typés</a> tels que <code>Int32Array</code>, etc.</td>
-  </tr>
-  <tr>
-   <td>{{ domxref("ImageData") }}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a></td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></td>
-   <td>Inclut seulement les objets plats (par ex. depuis un objet littéral)</td>
-  </tr>
-  <tr>
-   <td><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map">Map</a></td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set">Set</a></td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Alternative_copie_profonde">Alternative : copie profonde</h2>
-
-<p>Si vous voulez une <strong>copie profonde</strong> d’un objet (c’est-à-dire une copie récursive de toutes les propriétés imbriquées, en parcourant la chaîne des prototypes), vous devez employer une autre approche. Ce qui suit est un exemple possible.</p>
-
-<pre class="brush: js">function clone(objectToBeCloned) {
+L’algorithme de clonage structuré est un nouvel algorithme [défini par la spécification HTML5](http://www.w3.org/html/wg/drafts/html/master/infrastructure.html#safe-passing-of-structured-data) pour sérialiser les objets JavaScript complexes. Il est plus puissant que [JSON](/en/JSON) en cela qu’il supporte la sérialisation d’objets contenant des graphes cycliques — des objets peuvent faire référence à des objets faisant référence à d’autres objets dans le même graphe. De plus, dans certains cas, l’algorithme de clonage structuré peut être plus efficace que JSON.
+
+L’algorithme, essentiellement, parcourt tous les champs de l’objet original, copiant les valeurs de chaque champ dans un nouvel objet. Si un champ est lui-même un objet avec des champs, ces champs sont parcourus de manière récursive jusqu’à ce que chaque champ et sous-champ aient été copié dans le nouvel objet.
+
+## Avantages par rapport à JSON
+
+Il y a quelques avantages notables à utiliser l’algorithme de clonage structuré plutôt que JSON :
+
+- Le clonage structuré peut copier des objets [`RegExp`](/en/JavaScript/Reference/Global_Objects/RegExp).
+- Le clonage structuré peut copier des objets {{ domxref("Blob") }}, {{ domxref("File") }} et {{ domxref("FileList") }}.
+- Le clonage structuré peut copier des objets {{ domxref("ImageData") }}. Les dimensions du {{ domxref("CanvasPixelArray") }} du clone correspondront à celles de l’original, et il recevra une copie des mêmes données de pixels.
+- Le clonage structuré copie correctement les objets contenant des graphes de références cycliques.
+
+## Ce qui ne marche pas avec le clonage structuré
+
+- Les objets [`Error`](/en/JavaScript/Reference/Global_Objects/Error) et [`Function`](/en/JavaScript/Reference/Global_Objects/Function) ne peuvent pas être copiés par l’algorithme de clonage structuré ; toute tentative de le faire émettra une exception `DATA_CLONE_ERR`.
+- De la même manière, toute tentative de cloner des nœuds DOM émettra une exception `DATA_CLONE_ERR`.
+- Certains paramètres d’objets ne sont pas préservés :
+
+  - Le champ `lastIndex` des objets [`RegExp`](/en/JavaScript/Reference/Global_Objects/RegExp) n’est pas préservé.
+  - Les descripteurs de propriétés, accesseurs et mutateurs (ainsi que les fonctionnalités de métadonnées similaires) ne sont pas copiés. Par exemple, si un objet est marqué en lecture seule _via_ un descripteur de propriété, il sera en lecture et écriture dans le clone, car c’est la condition par défaut.
+  - La chaîne de prototypes n’est ni parcourue, ni copiée.
+
+## Types supportés
+
+| Type d’objet                                                                        | Notes                                                                                                          |
+| ----------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- |
+| [Tous types primitifs](/en-US/docs/Web/JavaScript/Data_structures#Primitive_values) | À l’exception des symboles                                                                                     |
+| Objet [Booléen](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean)        |                                                                                                                |
+| Objet String                                                                        |                                                                                                                |
+| [Date](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date)                    |                                                                                                                |
+| [RegExp](/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp)                | Le champ `lastIndex` n’est pas préservé                                                                        |
+| {{ domxref("Blob") }}                                                        |                                                                                                                |
+| {{ domxref("File") }}                                                        |                                                                                                                |
+| {{ domxref("FileList") }}                                                    |                                                                                                                |
+| [ArrayBuffer](/en-US/docs/Web/API/ArrayBuffer)                                      |                                                                                                                |
+| [ArrayBufferView](/en-US/docs/Web/API/ArrayBufferView)                              | Ce qui implique tous les [tableaux typés](/en-US/docs/Web/JavaScript/Typed_arrays) tels que `Int32Array`, etc. |
+| {{ domxref("ImageData") }}                                                |                                                                                                                |
+| [Array](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)                  |                                                                                                                |
+| [Object](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)                | Inclut seulement les objets plats (par ex. depuis un objet littéral)                                           |
+| [Map](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map)                      |                                                                                                                |
+| [Set](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set)                      |                                                                                                                |
+
+## Alternative : copie profonde
+
+Si vous voulez une **copie profonde** d’un objet (c’est-à-dire une copie récursive de toutes les propriétés imbriquées, en parcourant la chaîne des prototypes), vous devez employer une autre approche. Ce qui suit est un exemple possible.
+
+```js
+function clone(objectToBeCloned) {
   // Cas basique.
   if (!(objectToBeCloned instanceof Object)) {
     return objectToBeCloned;
@@ -139,18 +81,14 @@ original_slug: Web/API/Web_Workers_API/algorithme_clonage_structure
 
   return objectClone;
 }
-</pre>
+```
 
-<div class="note">
-  <p><strong>Note :</strong> Cet algorithme ne prend en charge que les objets spéciaux <a href="/en/JavaScript/Reference/Global_Objects/RegExp"><code>RegExp</code></a>, <a href="/en/JavaScript/Reference/Global_Objects/Array"><code>Array</code></a> et <a href="/en/JavaScript/Reference/Global_Objects/Date"><code>Date</code></a>. Vous pouvez implémenter d’autres cas spéciaux selon vos besoins.</p>
-</div>
+> **Note :** Cet algorithme ne prend en charge que les objets spéciaux [`RegExp`](/en/JavaScript/Reference/Global_Objects/RegExp), [`Array`](/en/JavaScript/Reference/Global_Objects/Array) et [`Date`](/en/JavaScript/Reference/Global_Objects/Date). Vous pouvez implémenter d’autres cas spéciaux selon vos besoins.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="http://www.w3.org/TR/html5/infrastructure.html#safe-passing-of-structured-data">Spécification HTML5 : Passage sécurisé de données structurées</a></li>
- <li>{{ domxref("window.history") }}</li>
- <li>{{ domxref("window.postMessage()") }}</li>
- <li><a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a></li>
- <li><a href="/en-US/docs/Components.utils.cloneInto">Components.utils.cloneInto</a></li>
-</ul>
+- [Spécification HTML5 : Passage sécurisé de données structurées](http://www.w3.org/TR/html5/infrastructure.html#safe-passing-of-structured-data)
+- {{ domxref("window.history") }}
+- {{ domxref("window.postMessage()") }}
+- [Web Workers](/en-US/docs/Web/API/Web_Workers_API)
+- [Components.utils.cloneInto](/en-US/docs/Components.utils.cloneInto)
diff --git a/files/fr/web/api/web_workers_api/using_web_workers/index.md b/files/fr/web/api/web_workers_api/using_web_workers/index.md
index dd63df8aa4..10e270340c 100644
--- a/files/fr/web/api/web_workers_api/using_web_workers/index.md
+++ b/files/fr/web/api/web_workers_api/using_web_workers/index.md
@@ -9,53 +9,54 @@ tags:
 translation_of: Web/API/Web_Workers_API/Using_web_workers
 original_slug: Web/API/Web_Workers_API/Utilisation_des_web_workers
 ---
-<div>{{DefaultAPISidebar("Web Workers API")}}</div>
+{{DefaultAPISidebar("Web Workers API")}}
 
-<p>Les <em>Web Workers</em> sont un outil permettant au contenu web d'exécuter des scripts dans des tâches (<em>threads</em>) d'arrière-plan. Le <em>thread</em> associé au <em>worker</em> peut réaliser des tâches sans qu'il y ait d'interférence avec l'interface utilisateur. De plus, les <em>web workers</em> peuvent réaliser des opérations d'entrée/sortie grâce à <code><a href="/fr/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code> (bien que les attributs <code>responseXML</code> et <code>channel</code> soient nécessairement vides dans ces cas). Une fois créé, un <em>worker</em> peut envoyer des messages au code JavaScript qui l'a créé. De même, le script initial peut envoyer des messages au <em>worker</em>. Cette communication s'effectue grâce à des gestionnaires d'évènements. Dans cet article, nous verrons une introduction à l'utilisation des <em>web workers</em>.</p>
+Les _Web Workers_ sont un outil permettant au contenu web d'exécuter des scripts dans des tâches (_threads_) d'arrière-plan. Le _thread_ associé au _worker_ peut réaliser des tâches sans qu'il y ait d'interférence avec l'interface utilisateur. De plus, les _web workers_ peuvent réaliser des opérations d'entrée/sortie grâce à [`XMLHttpRequest`](/fr/docs/Web/API/XMLHttpRequest) (bien que les attributs `responseXML` et `channel` soient nécessairement vides dans ces cas). Une fois créé, un _worker_ peut envoyer des messages au code JavaScript qui l'a créé. De même, le script initial peut envoyer des messages au _worker_. Cette communication s'effectue grâce à des gestionnaires d'évènements. Dans cet article, nous verrons une introduction à l'utilisation des _web workers_.
 
-<h2 id="LAPI_Web_Workers">L'API Web Workers</h2>
+## L'API Web Workers
 
-<p>Un <em>worker</em> est un objet créé à l'aide d'un constructeur (par exemple {{domxref("Worker.Worker", "Worker()")}}) et qui exécute un fichier JavaScript donné. Ce fichier contient le code qui sera exécuté par le <em>thread</em> du <em>worker</em>. Les <em>workers</em> sont exécutés dans un contexte global qui n'est pas celui du document (généralement {{domxref("window")}}). Aussi, si, dans un <em>worker</em>, on utilise {{domxref("window")}} pour accéder à la portée globale (plutôt que {{domxref("window.self","self")}}), cela provoquera une erreur.</p>
+Un _worker_ est un objet créé à l'aide d'un constructeur (par exemple {{domxref("Worker.Worker", "Worker()")}}) et qui exécute un fichier JavaScript donné. Ce fichier contient le code qui sera exécuté par le _thread_ du _worker_. Les _workers_ sont exécutés dans un contexte global qui n'est pas celui du document (généralement {{domxref("window")}}). Aussi, si, dans un _worker_, on utilise {{domxref("window")}} pour accéder à la portée globale (plutôt que {{domxref("window.self","self")}}), cela provoquera une erreur.
 
-<p>Le contexte du <em>worker</em> est représenté par un objet {{domxref("DedicatedWorkerGlobalScope")}} pour les <em>workers</em> dédiés et par un objet {{domxref("SharedWorkerGlobalScope")}} sinon. Un <em>worker</em> dédié est uniquement accessible au travers du script qui l'a déclenché tandis qu'un <em>worker</em> partagé peut être utilisé par différents scripts.</p>
+Le contexte du _worker_ est représenté par un objet {{domxref("DedicatedWorkerGlobalScope")}} pour les _workers_ dédiés et par un objet {{domxref("SharedWorkerGlobalScope")}} sinon. Un _worker_ dédié est uniquement accessible au travers du script qui l'a déclenché tandis qu'un _worker_ partagé peut être utilisé par différents scripts.
 
-<div class="note">
-<p><strong>Note :</strong> Voir <a href="/fr/docs/Web/API/Web_Workers_API">la page d'entrée pour l'API Web Workers</a> pour consulter la documentation de référence sur les <em>workers</em> et d'autres guides.</p>
-</div>
+> **Note :** Voir [la page d'entrée pour l'API Web Workers](/fr/docs/Web/API/Web_Workers_API) pour consulter la documentation de référence sur les _workers_ et d'autres guides.
 
-<p>Il est possible d'exécuter n'importe quel code JavaScript dans le <em>thread</em> du <em>worker</em>, à l'exception des méthodes de manipulation du DOM ou de certaines propriétés et méthodes rattachées à {{domxref("window")}}. On notera cependant qu'on peut tout à fait utiliser certaines API rendues disponibles via <code>window</code> comme les <a href="/fr/docs/Web/API/WebSockets_API">WebSockets</a>, les API de stockage de données telles que <a href="/fr/docs/Web/API/API_IndexedDB">IndexedDB</a>. Pour plus de détails, voir <a href="/fr/docs/Web/API/Worker/Functions_and_classes_available_to_workers">les fonctions et classes disponibles au sein des <em>workers</em></a>.</p>
+Il est possible d'exécuter n'importe quel code JavaScript dans le _thread_ du _worker_, à l'exception des méthodes de manipulation du DOM ou de certaines propriétés et méthodes rattachées à {{domxref("window")}}. On notera cependant qu'on peut tout à fait utiliser certaines API rendues disponibles via `window` comme les [WebSockets](/fr/docs/Web/API/WebSockets_API), les API de stockage de données telles que [IndexedDB](/fr/docs/Web/API/API_IndexedDB). Pour plus de détails, voir [les fonctions et classes disponibles au sein des _workers_](/fr/docs/Web/API/Worker/Functions_and_classes_available_to_workers).
 
-<p>Les données sont échangées entre le <em>thread</em> du <em>worker</em> et le <em>thread</em> principal par l'intermédiaire de messages. Chaque partie peut envoyer des messages à l'aide de la méthode <code>postMessage()</code> et réagir aux messages reçus grâce au gestionnaire d'évènement <code>onmessage</code> (le message sera contenu dans l'attribut <code>data</code> de l'évènement {{event("Message")}} associé). Les données sont copiées dans le message, elles ne sont pas partagées.</p>
+Les données sont échangées entre le _thread_ du _worker_ et le _thread_ principal par l'intermédiaire de messages. Chaque partie peut envoyer des messages à l'aide de la méthode `postMessage()` et réagir aux messages reçus grâce au gestionnaire d'évènement `onmessage` (le message sera contenu dans l'attribut `data` de l'évènement {{event("Message")}} associé). Les données sont copiées dans le message, elles ne sont pas partagées.
 
-<p>Les <em>workers</em> peuvent également déclencher la création d'autres <em>workers</em> tant que ceux-ci restent hébergés sur la même origine que la page parente. De plus, les <em>workers</em> pourront utiliser <a href="/fr/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code></a> pour effectuer des opérations réseau mais les attributs <code>responseXML</code> et <code>channel</code> de <code>XMLHttpRequest</code> renverront nécessairement <code>null</code>.</p>
+Les _workers_ peuvent également déclencher la création d'autres _workers_ tant que ceux-ci restent hébergés sur la même origine que la page parente. De plus, les _workers_ pourront utiliser [`XMLHttpRequest`](/fr/docs/Web/API/XMLHttpRequest) pour effectuer des opérations réseau mais les attributs `responseXML` et `channel` de `XMLHttpRequest` renverront nécessairement `null`.
 
-<h2 id="Les_workers_dédiés">Les <em>workers</em> dédiés</h2>
+## Les _workers_ dédiés
 
-<p>Comme indiqué plus haut, un <em>worker</em> dédié n'est accessible qu'au travers du script qui l'a initié. Dans cette section, nous étudierons le code JavaScript de <a href="https://github.com/mdn/simple-web-worker">notre exemple de <em>worker</em> dédié simple</a>. Dans cet exemple, nous souhaitons multiplier deux nombres. Ces nombres sont envoyés à un <em>worker</em> dédié puis le résultat est renvoyé à la page et affiché.</p>
+Comme indiqué plus haut, un _worker_ dédié n'est accessible qu'au travers du script qui l'a initié. Dans cette section, nous étudierons le code JavaScript de [notre exemple de _worker_ dédié simple](https://github.com/mdn/simple-web-worker). Dans cet exemple, nous souhaitons multiplier deux nombres. Ces nombres sont envoyés à un _worker_ dédié puis le résultat est renvoyé à la page et affiché.
 
-<p>Cet exemple est assez simple mais permet d'introduire les concepts de base autour des <em>workers</em>. Nous verrons certains détails plus avancés dans la suite de cet article.</p>
+Cet exemple est assez simple mais permet d'introduire les concepts de base autour des _workers_. Nous verrons certains détails plus avancés dans la suite de cet article.
 
-<h3 id="Détecter_la_possibilité_dutiliser_les_workers">Détecter la possibilité d'utiliser les <em>workers</em></h3>
+### Détecter la possibilité d'utiliser les _workers_
 
-<p>Afin de gérer une meilleure amélioration progressive, une rétro-compatibilité et de présenter des messages d'erreur adéquats, il pourra être utile d'envelopper le code relatif au <em>worker</em> de la façon suivante (<a href="https://github.com/mdn/simple-web-worker/blob/gh-pages/main.js">main.js</a>) :</p>
+Afin de gérer une meilleure amélioration progressive, une rétro-compatibilité et de présenter des messages d'erreur adéquats, il pourra être utile d'envelopper le code relatif au _worker_ de la façon suivante ([main.js](https://github.com/mdn/simple-web-worker/blob/gh-pages/main.js)) :
 
-<pre class="brush: js">if (window.Worker) {
+```js
+if (window.Worker) {
   ...
-}</pre>
-
-<h3 id="Initier_un_worker_dédié">Initier un <em>worker</em> dédié</h3>
+}
+```
 
-<p>La création d'un nouveau <em>worker</em> est assez simple. On appellera le constructeur {{domxref("Worker.Worker", "Worker()")}} en indiquant l'URI du script à exécuter dans le <em>thread</em> associé au <em>worker</em> (<a href="https://github.com/mdn/simple-web-worker/blob/gh-pages/main.js">main.js</a>) :</p>
+### Initier un _worker_ dédié
 
+La création d'un nouveau _worker_ est assez simple. On appellera le constructeur {{domxref("Worker.Worker", "Worker()")}} en indiquant l'URI du script à exécuter dans le _thread_ associé au _worker_ ([main.js](https://github.com/mdn/simple-web-worker/blob/gh-pages/main.js)) :
 
-<pre class="brush: js">var monWorker = new Worker('worker.js');
-</pre>
+```js
+var monWorker = new Worker('worker.js');
+```
 
-<h3 id="Envoyer_des_messages_au_worker_et_y_réagir">Envoyer des messages au <em>worker</em> et y réagir</h3>
+### Envoyer des messages au _worker_ et y réagir
 
-<p>L'intérêt principal des <em>workers</em> repose sur l'échange de messages à l'aide de la méthode {{domxref("Worker.postMessage", "postMessage()")}} et grâce au gestionnaire d'évènement {{domxref("Worker.onmessage", "onmessage")}}. Lorsqu'on souhaite envoyer un message au <em>worker</em>, on enverra des messages de la façon suivante (<a href="https://github.com/mdn/simple-web-worker/blob/gh-pages/main.js">main.js</a>) :</p>
+L'intérêt principal des _workers_ repose sur l'échange de messages à l'aide de la méthode {{domxref("Worker.postMessage", "postMessage()")}} et grâce au gestionnaire d'évènement {{domxref("Worker.onmessage", "onmessage")}}. Lorsqu'on souhaite envoyer un message au _worker_, on enverra des messages de la façon suivante ([main.js](https://github.com/mdn/simple-web-worker/blob/gh-pages/main.js)) :
 
-<pre class="brush: js">premierNombre.onchange = function() {
+```js
+premierNombre.onchange = function() {
   monWorker.postMessage([premierNombre.value, deuxiemeNombre.value]);
   console.log('Message envoyé au worker');
 }
@@ -63,170 +64,174 @@ original_slug: Web/API/Web_Workers_API/Utilisation_des_web_workers
 deuxiemeNombre.onchange = function() {
   monWorker.postMessage([premierNombre.value, deuxiemeNombre.value]);
   console.log('Message envoyé au worker');
-}</pre>
+}
+```
 
-<p>Ici, nous disposons de deux éléments {{htmlelement("input")}} représentés par les variables <code>premierNombre</code> et <code>deuxiemeNombre</code>. Lorsque l'un de ces deux champs est modifié, on utilise <code>monWorker.postMessage([premierNombre.value, deuxiemeNombre.value])</code> afin d'envoyer les deux valeurs au <em>worker</em> dans un tableau. Les messages peuvent être utilisés pour échanger n'importe quel type de valeur.</p>
+Ici, nous disposons de deux éléments {{htmlelement("input")}} représentés par les variables `premierNombre` et `deuxiemeNombre`. Lorsque l'un de ces deux champs est modifié, on utilise `monWorker.postMessage([premierNombre.value, deuxiemeNombre.value])` afin d'envoyer les deux valeurs au _worker_ dans un tableau. Les messages peuvent être utilisés pour échanger n'importe quel type de valeur.
 
-<p>Dans le <em>worker</em>, on peut réagir au message reçu grâce à un gestionnaire d'évènement comme celui-ci (<a href="https://github.com/mdn/simple-web-worker/blob/gh-pages/worker.js">worker.js</a>) :</p>
+Dans le _worker_, on peut réagir au message reçu grâce à un gestionnaire d'évènement comme celui-ci ([worker.js](https://github.com/mdn/simple-web-worker/blob/gh-pages/worker.js)) :
 
-<pre class="brush: js">onmessage = function(e) {
+```js
+onmessage = function(e) {
   console.log('Message reçu depuis le script principal.');
   var workerResult = 'Résultat : ' + (e.data[0] * e.data[1]);
   console.log('Envoi du message de retour au script principal');
   postMessage(workerResult);
-}</pre>
+}
+```
 
-<p>Le gestionnaire <code>onmessage</code> permet d'exécuter du code lorsqu'un message est reçu. Le message même est disponible grâce à l'attribut <code>data</code> de l'évènement. Dans cet exemple, nous multiplions simplement les deux nombres avant d'utiliser <code>postMessage()</code> à nouveau afin d'envoyer le résultat via un message destiné au <em>thread</em> principal.</p>
+Le gestionnaire `onmessage` permet d'exécuter du code lorsqu'un message est reçu. Le message même est disponible grâce à l'attribut `data` de l'évènement. Dans cet exemple, nous multiplions simplement les deux nombres avant d'utiliser `postMessage()` à nouveau afin d'envoyer le résultat via un message destiné au _thread_ principal.
 
-<p>De retour dans le <em>thread</em> principal, nous pouvons utiliser <code>onmessage</code> à nouveau pour réagir à la réponse provenant du <em>worker</em> :</p>
+De retour dans le _thread_ principal, nous pouvons utiliser `onmessage` à nouveau pour réagir à la réponse provenant du _worker_ :
 
-<pre class="brush: js">monWorker.onmessage = function(e) {
+```js
+monWorker.onmessage = function(e) {
   resultat.textContent = e.data;
   console.log('Message reçu depuis le worker');
-}</pre>
+}
+```
 
-<p>Ici, nous récupérons les données grâce à l'attribut <code>data</code> de l'évènement et nous mettons à jour le contenu du paragraphe avec l'attribut <code>textContent</code> de l'élément. Ainsi, l'utilisateur peut visualiser le résultat du calcul.</p>
+Ici, nous récupérons les données grâce à l'attribut `data` de l'évènement et nous mettons à jour le contenu du paragraphe avec l'attribut `textContent` de l'élément. Ainsi, l'utilisateur peut visualiser le résultat du calcul.
 
-<div class="note">
-  <p><strong>Note :</strong> On notera que <code>onmessage</code> et <code>postMessage()</code> doivent être rattachés à un objet <code>Worker</code> lorsqu'ils sont utilisés depuis le <em>thread</em> principal (ici, c'était <code>monWorker</code>) mais pas lorsqu'ils sont employés depuis le <em>worker</em>. En effet, dans le <em>worker</em>, c'est le <em>worker</em> qui constitue la portée globale et qui met à disposition ces méthodes.</p>
-</div>
+> **Note :** On notera que `onmessage` et `postMessage()` doivent être rattachés à un objet `Worker` lorsqu'ils sont utilisés depuis le _thread_ principal (ici, c'était `monWorker`) mais pas lorsqu'ils sont employés depuis le _worker_. En effet, dans le _worker_, c'est le _worker_ qui constitue la portée globale et qui met à disposition ces méthodes.
 
-<div class="note">
-  <p><strong>Note :</strong> Lorsqu'un message est envoyé d'un <em>thread</em> à l'autre, ses données sont copiées. Elles ne sont pas partagées. Voir <a href="#échange">ci-après</a> pour plus d'explications à ce sujet.</p>
-</div>
+> **Note :** Lorsqu'un message est envoyé d'un _thread_ à l'autre, ses données sont copiées. Elles ne sont pas partagées. Voir [ci-après](#échange) pour plus d'explications à ce sujet.
 
-<h3 id="Clôturer_un_worker">Clôturer un <em>worker</em></h3>
+### Clôturer un _worker_
 
-<p>Si on doit arrêter un <em>worker</em> immédiatement, on pourra utiliser la méthode {{domxref("Worker", "terminate")}} depuis le <em>thread</em> principal :</p>
+Si on doit arrêter un _worker_ immédiatement, on pourra utiliser la méthode {{domxref("Worker", "terminate")}} depuis le _thread_ principal :
 
-<pre class="brush: js">monWorker.terminate();</pre>
+```js
+monWorker.terminate();
+```
 
-<p>Lorsque cette méthode exécuté, le <em>thread</em> associé au <em>worker</em> est tué immédiatement.</p>
+Lorsque cette méthode exécuté, le _thread_ associé au _worker_ est tué immédiatement.
 
-<h3 id="Gérer_les_erreurs">Gérer les erreurs</h3>
+### Gérer les erreurs
 
-<p>Lorsqu'une erreur d'exécution se produit avec le <em>worker</em>, son gestionnaire d'évènement <code>onerror</code> est appelé et reçoit un évènement <code>error</code> qui implémente l'interface <code>ErrorEvent</code>.</p>
+Lorsqu'une erreur d'exécution se produit avec le _worker_, son gestionnaire d'évènement `onerror` est appelé et reçoit un évènement `error` qui implémente l'interface `ErrorEvent`.
 
-<p>Cet évènement ne bouillonne (<em>bubble</em>) pas et peut être annulé. Pour empêcher les conséquences par défaut, on pourra utiliser la méthode <a href="/fr/docs/Web/API/Event/preventDefault"> <code>preventDefault()</code></a> rattachée à l'évènement d'erreur.</p>
+Cet évènement ne bouillonne (_bubble_) pas et peut être annulé. Pour empêcher les conséquences par défaut, on pourra utiliser la méthode [`preventDefault()`](/fr/docs/Web/API/Event/preventDefault) rattachée à l'évènement d'erreur.
 
-<p>L'évènement décrivant l'erreur possède notamment trois propriétés intéressantes :</p>
+L'évènement décrivant l'erreur possède notamment trois propriétés intéressantes :
 
-<dl>
- <dt><code>message</code></dt>
- <dd>Un message d'erreur compréhensible par un humain.</dd>
- <dt><code>filename</code></dt>
- <dd>Le nom du fichier pour lequel l'erreur s'est produite.</dd>
- <dt><code>lineno</code></dt>
- <dd>Le numéro de ligne au sein du fichier responsable de l'erreur.</dd>
-</dl>
+- `message`
+  - : Un message d'erreur compréhensible par un humain.
+- `filename`
+  - : Le nom du fichier pour lequel l'erreur s'est produite.
+- `lineno`
+  - : Le numéro de ligne au sein du fichier responsable de l'erreur.
 
-<h3 id="Initier_des_workers_fils">Initier des <em>workers</em> fils</h3>
+### Initier des _workers_ fils
 
-<p>Les <em>workers</em> peuvent également engendrer d'autres <em>workers</em>. Ces <em>workers</em>-fils doivent être hébergés sur la même origine que la page initiale. De plus, les URI des <em>workers-</em>fils sont résolues relativement à l'emplacement du <em>worker</em> père (plutôt que par rapport à la page parente). Ces contraintes permettent de simplifier le suivi des dépendances.</p>
+Les _workers_ peuvent également engendrer d'autres _workers_. Ces _workers_-fils doivent être hébergés sur la même origine que la page initiale. De plus, les URI des *workers-*fils sont résolues relativement à l'emplacement du _worker_ père (plutôt que par rapport à la page parente). Ces contraintes permettent de simplifier le suivi des dépendances.
 
-<h3 id="Importer_des_scripts_et_des_bibliothèques">Importer des scripts et des bibliothèques</h3>
+### Importer des scripts et des bibliothèques
 
-<p>Les <em>threads</em> d'exécution des <em>workers</em> peuvent accéder à la fonction globale <code>importScripts()</code>, qui leur permet d'importer des scripts. Cette fonction prend zéro à plusieurs URL en paramètres et importe les ressources associées. Voici quelques exemples valides :</p>
+Les _threads_ d'exécution des _workers_ peuvent accéder à la fonction globale `importScripts()`, qui leur permet d'importer des scripts. Cette fonction prend zéro à plusieurs URL en paramètres et importe les ressources associées. Voici quelques exemples valides :
 
-<pre class="brush: js">importScripts();                         /* n'importe rien */
+```js
+importScripts();                         /* n'importe rien */
 importScripts('toto.js');                /* importe uniquement "toto.js" */
 importScripts('toto.js', 'truc.js');     /* importe deux scripts */
-importScripts('//example.com/hello.js'); /* importe un script d'une autre origine */</pre>
+importScripts('//example.com/hello.js'); /* importe un script d'une autre origine */
+```
 
-<p>Lors d'un import, le navigateur chargera chacun des scripts puis l'exécutera. Chaque script pourra ainsi mettre à disposition des objets globaux qui pourront être utilisés par le <em>worker</em>. Si le script ne peut pas être chargé, une exception <code>NETWORK_ERROR</code> sera levée et le code assicé ne sera pas exécuté. Le code exécuté précédemment (y compris celui-ci reporté à l'aide de {{domxref("window.setTimeout()")}}) continuera cependant d'être fonctionnel. Les déclarations de fonction situées <strong>après</strong> <code>importScripts()</code> sont également exécutées car évaluées avant le reste du code.</p>
+Lors d'un import, le navigateur chargera chacun des scripts puis l'exécutera. Chaque script pourra ainsi mettre à disposition des objets globaux qui pourront être utilisés par le _worker_. Si le script ne peut pas être chargé, une exception `NETWORK_ERROR` sera levée et le code assicé ne sera pas exécuté. Le code exécuté précédemment (y compris celui-ci reporté à l'aide de {{domxref("window.setTimeout()")}}) continuera cependant d'être fonctionnel. Les déclarations de fonction situées **après** `importScripts()` sont également exécutées car évaluées avant le reste du code.
 
-<div class="note">
-  <p><strong>Note :</strong> Les scripts peuvent être téléchargés dans n'importe quel ordre mais ils seront exécutés dans l'ordre des arguments passés à <code>importScripts()</code> . Cet exécution est effectuée de façon synchrone et <code>importScripts()</code> ne rendra pas la main tant que l'ensemble des scripts n'auront pas été chargés et exécutés.</p>
-</div>
+> **Note :** Les scripts peuvent être téléchargés dans n'importe quel ordre mais ils seront exécutés dans l'ordre des arguments passés à `importScripts()` . Cet exécution est effectuée de façon synchrone et `importScripts()` ne rendra pas la main tant que l'ensemble des scripts n'auront pas été chargés et exécutés.
 
-<h2 id="Les_workers_partagés">Les <em>workers</em> partagés</h2>
+## Les _workers_ partagés
 
-<p>Un <em>worker</em> partagé est accessible par plusieurs scripts (même si ceux-ci proviennent de différentes fenêtres, <em>iframes</em> voire d'autres <em>workers</em>). Dans cette section, nous illustrerons les concepts à l'aide de <a href="https://github.com/mdn/simple-shared-worker">l'exemple simple d'un <em>worker</em> partagé.</a> Cet exemple est semblable à l'exemple utilisé pour le <em>worker</em> dédié. Il diffère car il possède deux fonctions, gérées par deux fichiers de script distincts : une fonction permettant de multiplier deux nombres et une fonction permettant d'élever un nombre au carré. Les deux scripts utilisent le même <em>worker</em> pour réaliser le calcul demandé.</p>
+Un _worker_ partagé est accessible par plusieurs scripts (même si ceux-ci proviennent de différentes fenêtres, _iframes_ voire d'autres _workers_). Dans cette section, nous illustrerons les concepts à l'aide de [l'exemple simple d'un _worker_ partagé.](https://github.com/mdn/simple-shared-worker) Cet exemple est semblable à l'exemple utilisé pour le _worker_ dédié. Il diffère car il possède deux fonctions, gérées par deux fichiers de script distincts : une fonction permettant de multiplier deux nombres et une fonction permettant d'élever un nombre au carré. Les deux scripts utilisent le même _worker_ pour réaliser le calcul demandé.
 
-<p>Ici, nous nous intéresserons particulièrement aux différences entre les <em>workers</em> dédiés et les <em>workers</em> partagés. Dans cet exemple, nous aurons deux pages HTML, chacune utilisant du code JavaScript employant le même <em>worker</em>.</p>
+Ici, nous nous intéresserons particulièrement aux différences entre les _workers_ dédiés et les _workers_ partagés. Dans cet exemple, nous aurons deux pages HTML, chacune utilisant du code JavaScript employant le même _worker_.
 
-<div class="note">
-<p><strong>Note :</strong> Si on peut accéder à un <em>worker</em> partagé depuis différents contextes de navigations, ces contextes de navigation doivent néanmoins partager la même origine (même protocole, même hôte, même port).</p>
-</div>
+> **Note :** Si on peut accéder à un _worker_ partagé depuis différents contextes de navigations, ces contextes de navigation doivent néanmoins partager la même origine (même protocole, même hôte, même port).
 
-<div class="note">
-<p><strong>Note :</strong> Dans Firefox, les <em>workers</em> partagés ne peuvent pas être partagés entre les documents chargés en navigation privée et les documents chargés en navigation classique ({{bug(1177621)}}).</p>
-</div>
+> **Note :** Dans Firefox, les _workers_ partagés ne peuvent pas être partagés entre les documents chargés en navigation privée et les documents chargés en navigation classique ({{bug(1177621)}}).
 
-<h3 id="Initier_un_worker_partagé">Initier un <em>worker</em> partagé</h3>
+### Initier un _worker_ partagé
 
-<p>La création d'un nouveau <em>worker</em> partagé est assez semblable à la création d'un <em>worker</em> dédié. On utilise alors un constructeur différent :</p>
+La création d'un nouveau _worker_ partagé est assez semblable à la création d'un _worker_ dédié. On utilise alors un constructeur différent :
 
-<pre class="brush: js">var monWorker = new SharedWorker('worker.js');</pre>
+```js
+var monWorker = new SharedWorker('worker.js');
+```
 
-<p>Une différence fondamentale avec les <em>workers</em> dédiés est l'utilisation d'un objet <code>port</code> pour la communication. Un port sera explicitement ouvert pour être utilisé afin de communiquer avec le <em>worker</em> (dans le cas des <em>workers</em> dédiés, ce port est ouvert implicitement).</p>
+Une différence fondamentale avec les _workers_ dédiés est l'utilisation d'un objet `port` pour la communication. Un port sera explicitement ouvert pour être utilisé afin de communiquer avec le _worker_ (dans le cas des _workers_ dédiés, ce port est ouvert implicitement).
 
-<p>La connexion au port doit être démarrée implicitement avec l'utilisation du gestionnaire d'évènement <code>onmessage</code> ou explicitement avec la méthode <code>start()</code> avant qu'un message soit envoyé. On utilisera uniquement <code>start()</code> si l'évènement <code>message</code> est détecté avec la méthode <code>addEventListener()</code>.</p>
+La connexion au port doit être démarrée implicitement avec l'utilisation du gestionnaire d'évènement `onmessage` ou explicitement avec la méthode `start()` avant qu'un message soit envoyé. On utilisera uniquement `start()` si l'évènement `message` est détecté avec la méthode `addEventListener()`.
 
-<div class="note">
-<p><strong>Note :</strong> Lorsqu'on utilise la méthode <code>start()</code> afin d'ouvrir le port de connexion, celle-ci doit être appelée de part et d'autre (depuis le <em>thread</em> parent <strong>et</strong> depuis le <em>worker</em>) si on souhaite disposer d'une connexion bidirectionnelle.</p>
-</div>
+> **Note :** Lorsqu'on utilise la méthode `start()` afin d'ouvrir le port de connexion, celle-ci doit être appelée de part et d'autre (depuis le _thread_ parent **et** depuis le _worker_) si on souhaite disposer d'une connexion bidirectionnelle.
 
-<h3 id="Échanger_des_messages_avec_un_worker_partagé_et_y_réagir">Échanger des messages avec un <em>worker</em> partagé et y réagir</h3>
+### Échanger des messages avec un _worker_ partagé et y réagir
 
-<p>On peut alors envoyer des messages au <em>worker</em>. Dans le cas d'un <em>worker</em> partagé, la méthode <code>postMessage()</code> doit être appelée via l'objet <code>port</code> (là aussi, vous pouvez étudier le code de <a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/multiply.js">multiply.js</a> et <a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/square.js">square.js</a>) :</p>
+On peut alors envoyer des messages au _worker_. Dans le cas d'un _worker_ partagé, la méthode `postMessage()` doit être appelée via l'objet `port` (là aussi, vous pouvez étudier le code de [multiply.js](https://github.com/mdn/simple-shared-worker/blob/gh-pages/multiply.js) et [square.js](https://github.com/mdn/simple-shared-worker/blob/gh-pages/square.js)) :
 
-<pre class="brush: js">carreNombre.onchange = function() {
+```js
+carreNombre.onchange = function() {
   monWorker.port.postMessage([carreNombre.value, carreNombre.value]);
   console.log('Message envoyé au worker');
-}</pre>
+}
+```
 
-<p>Du côté du <em>worker</em>, les choses sont également légèrement plus compliquées (voir <a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/worker.js">worker.js</a>) :</p>
+Du côté du _worker_, les choses sont également légèrement plus compliquées (voir [worker.js](https://github.com/mdn/simple-shared-worker/blob/gh-pages/worker.js)) :
 
-<pre class="brush: js">onconnect = function(e) {
+```js
+onconnect = function(e) {
   var port = e.ports[0];
 
   port.onmessage = function(e) {
     var workerResult = 'Résultat : ' + (e.data[0] * e.data[1]);
     port.postMessage(workerResult);
   }
-}</pre>
+}
+```
 
-<p>On commence par utiliser le gestionnaire <code>onconnect</code> afin de déclencher du code à la connexion au port (c'est-à-dire lorsque le gestionnaire <code>onmessage</code> est déclaré depuis le <em>thread</em> parent ou lorsque la méthode <code>start()</code> est invoquée explicitement depuis le <em>thread</em> parent).</p>
+On commence par utiliser le gestionnaire `onconnect` afin de déclencher du code à la connexion au port (c'est-à-dire lorsque le gestionnaire `onmessage` est déclaré depuis le _thread_ parent ou lorsque la méthode `start()` est invoquée explicitement depuis le _thread_ parent).
 
-<p>On utilise l'attribut <code>ports</code> de l'évènement afin de récupérer le port utilisé et on le place dans une variable.</p>
+On utilise l'attribut `ports` de l'évènement afin de récupérer le port utilisé et on le place dans une variable.
 
-<p>Ensuite, sur ce port, on ajoute un gestionnaire d'évènement pour l'évènement <code>message</code> afin de faire les calculs et de renvoyer le résultat au <em>thread</em> principal. En définissant ce gestionnaire pour <code>message</code> dans le <em>thread</em> du <em>worker</em>, on ouvre implicitement le port pour la connexion au <em>thread</em> parent : il n'est donc pas nécessaire d'invoquer <code>port.start()</code>.</p>
+Ensuite, sur ce port, on ajoute un gestionnaire d'évènement pour l'évènement `message` afin de faire les calculs et de renvoyer le résultat au _thread_ principal. En définissant ce gestionnaire pour `message` dans le _thread_ du _worker_, on ouvre implicitement le port pour la connexion au _thread_ parent : il n'est donc pas nécessaire d'invoquer `port.start()`.
 
-<p>Enfin, dans le script de la page, on gère le message du résultat (voir <a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/multiply.js">multiply.js</a> et <a href="https://github.com/mdn/simple-shared-worker/blob/gh-pages/square.js">square.js</a>):</p>
+Enfin, dans le script de la page, on gère le message du résultat (voir [multiply.js](https://github.com/mdn/simple-shared-worker/blob/gh-pages/multiply.js) et [square.js](https://github.com/mdn/simple-shared-worker/blob/gh-pages/square.js)):
 
-<pre class="brush: js">monWorker.port.onmessage = function(e) {
+```js
+monWorker.port.onmessage = function(e) {
   result2.textContent = e.data;
   console.log('Message reçu depuis le worker');
-}</pre>
+}
+```
+
+Lorsqu'un message provient du port associé au _worker_, on vérifie son type puis on insère le résultat dans le paragraphe associé.
 
-<p>Lorsqu'un message provient du port associé au <em>worker</em>, on vérifie son type puis on insère le résultat dans le paragraphe associé.</p>
+## Sûreté des _threads_
 
-<h2 id="Sûreté_des_threads">Sûreté des <em>threads</em></h2>
+L'interface {{domxref("Worker")}} engendre des _threads_ au sens du système d'exploitation. Certains développeurs avertis pourront se demander si cette communication à base de _threads_ ne peut pas générer d'effets indésirables tels que des situations de compétition (_race conditions_).
 
-<p>L'interface {{domxref("Worker")}} engendre des <em>threads</em> au sens du système d'exploitation. Certains développeurs avertis pourront se demander si cette communication à base de <em>threads</em> ne peut pas générer d'effets indésirables tels que des situations de compétition (<em>race conditions</em>).</p>
+Toutefois, la communication entre les _web workers_ est contrôlée explicitement dans les scripts et il n'y a pas d'accès aux composants ou au DOM qui ne seraient pas sûrs à ce niveau. De plus, la communication entre les _threads_ s'effectue par recopie de données. Aussi, s'il n'est théoriquement pas impossible de ne pas avoir de tels problèmes, il faudrait les chercher pour les provoquer.
 
-<p>Toutefois, la communication entre les <em>web workers</em> est contrôlée explicitement dans les scripts et il n'y a pas d'accès aux composants ou au DOM qui ne seraient pas sûrs à ce niveau. De plus, la communication entre les <em>threads</em> s'effectue par recopie de données. Aussi, s'il n'est théoriquement pas impossible de ne pas avoir de tels problèmes, il faudrait les chercher pour les provoquer.</p>
+## Règles de sécurité du contenu (_content security policy_, CSP)
 
-<h2 id="Règles_de_sécurité_du_contenu_content_security_policy_CSP">Règles de sécurité du contenu (<em>content security policy</em>, CSP)</h2>
+Les _workers_ disposent de leur propre contexte d'exécution, distinct de celui du document qui les a créés. Aussi, en général, les _workers_ ne sont pas gérés par la [politique de sécurité de contenu](/fr/docs/Web/HTTP/CSP) du document (ou du _worker_ parent) responsable de leur création. Ainsi, si un document est servi avec l'en-tête suivant :
 
-<p>Les <em>workers</em> disposent de leur propre contexte d'exécution, distinct de celui du document qui les a créés. Aussi, en général, les <em>workers</em> ne sont pas gérés par la <a href="/fr/docs/Web/HTTP/CSP">politique de sécurité de contenu</a> du document (ou du <em>worker</em> parent) responsable de leur création. Ainsi, si un document est servi avec l'en-tête suivant :</p>
+    Content-Security-Policy: script-src 'self'
 
-<pre>Content-Security-Policy: script-src 'self'</pre>
+Cette règle empêchera n'importe quel script inclus dans le document d'utiliser [`eval()`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/eval). Toutefois, si le script génère un _worker_, le code exécuté par ce _worker_ pourra utiliser `eval()`.
 
-<div>Cette règle empêchera n'importe quel script inclus dans le document d'utiliser <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/eval">eval()</a></code>. Toutefois, si le script génère un <em>worker</em>, le code exécuté par ce <em>worker</em> pourra utiliser <code>eval()</code>.<br>
-<br>
-Pour appliquer une règle de sécurité au <em>worker</em>, il faudra fournir un en-tête <a href="/fr/docs/Web/HTTP/Headers/Content-Security-Policy">Content-Security-Policy</a> approprié pour la requête responsable du service du script du <em>worker</em>.<br>
-<br>
-Si l'origine du script du <em>worker</em> est un identifiant global unique (si son URL utilise le schéma <code>data://</code> ou <code>blob://</code> par exemple), le <em>worker</em> héritera du CSP associé au document responsable de sa création.</div>
+Pour appliquer une règle de sécurité au _worker_, il faudra fournir un en-tête [Content-Security-Policy](/fr/docs/Web/HTTP/Headers/Content-Security-Policy) approprié pour la requête responsable du service du script du _worker_.
 
-<h2 id="Échanger_des_données_avec_les_workers_plus_de_détails">Échanger des données avec les <em>workers</em> : plus de détails</h2>
+Si l'origine du script du _worker_ est un identifiant global unique (si son URL utilise le schéma `data://` ou `blob://` par exemple), le _worker_ héritera du CSP associé au document responsable de sa création.
 
-<p>Les données échangées entre le document principal et les <em>workers</em> sont <strong>copiées</strong> et non partagées. Lorsqu'ils sont envoyés au <em>worker</em>, les objets sont sérialisés (puis désérialisés à leur réception). La page et le <em>worker</em> <strong>ne partagent pas le même exemplaire </strong>et on a donc deux versions d'une part et d'autre. La plupart des navigateurs implémentent cette approche avec <a href="/fr/docs/Web/API/Web_Workers_API/algorithme_clonage_structure">une clonage structurel</a>.</p>
+## Échanger des données avec les _workers_ : plus de détails
 
-<p>Pour illustrer ce point, on prendra une fonction intitulée <code>emulateMessage()</code> et qui simule le comportement d'une valeur clonée (pas partagée) avec un <em>worker</em> attaché à la page principale et réciproquement :</p>
+Les données échangées entre le document principal et les _workers_ sont **copiées** et non partagées. Lorsqu'ils sont envoyés au _worker_, les objets sont sérialisés (puis désérialisés à leur réception). La page et le _worker_ **ne partagent pas le même exemplaire** et on a donc deux versions d'une part et d'autre. La plupart des navigateurs implémentent cette approche avec [une clonage structurel](/fr/docs/Web/API/Web_Workers_API/algorithme_clonage_structure).
 
-<pre class="brush: js">function emulateMessage(vVal) {
+Pour illustrer ce point, on prendra une fonction intitulée `emulateMessage()` et qui simule le comportement d'une valeur clonée (pas partagée) avec un _worker_ attaché à la page principale et réciproquement :
+
+```js
+function emulateMessage(vVal) {
     return eval('(' + JSON.stringify(vVal) + ')');
 }
 
@@ -262,63 +267,68 @@ function Animal(sType, nAge) {
 }
 var example5 = new Animal('Cat', 3);
 console.log(example5.constructor); // Animal
-console.log(emulateMessage(example5).constructor); // Object</pre>
+console.log(emulateMessage(example5).constructor); // Object
+```
 
-<p>Une valeur qui est clonée et non partagée est appelée un message. Les messages peuvent être envoyés et reçus grâce à <code>postMessage()</code> et au gestionnaire d'évènement pour <code>message</code> (dont l'attribut {{domxref("MessageEvent.data", "data")}} contiendra les données copiées).</p>
+Une valeur qui est clonée et non partagée est appelée un message. Les messages peuvent être envoyés et reçus grâce à `postMessage()` et au gestionnaire d'évènement pour `message` (dont l'attribut {{domxref("MessageEvent.data", "data")}} contiendra les données copiées).
 
-<p><strong>example.html</strong> (page principale) :</p>
+**example.html** (page principale) :
 
-<pre class="brush: js">var myWorker = new Worker('my_task.js');
+```js
+var myWorker = new Worker('my_task.js');
 
 myWorker.onmessage = function(oEvent) {
   console.log('Worker said : ' + oEvent.data);
 };
 
-myWorker.postMessage('ali');</pre>
+myWorker.postMessage('ali');
+```
 
-<p><strong>my_task.js</strong> (le code du <em>worker</em>) :</p>
+**my_task.js** (le code du _worker_) :
 
-<pre class="brush: js">postMessage("I\'m working before postMessage(\'ali\').");
+```js
+postMessage("I\'m working before postMessage(\'ali\').");
 
 onmessage = function(oEvent) {
   postMessage('Hi ' + oEvent.data);
-};</pre>
+};
+```
 
-<p>L'<a href="/fr/docs/Web/API/Web_Workers_API/algorithme_clonage_structure">algorithme de clonage structurel</a> permet de sérialiser aussi bien des données JSON que d'autres formats et permet notamment de gérer les références circulaires (ce que JSON ne permet pas de gérer nativement).</p>
+L'[algorithme de clonage structurel](/fr/docs/Web/API/Web_Workers_API/algorithme_clonage_structure) permet de sérialiser aussi bien des données JSON que d'autres formats et permet notamment de gérer les références circulaires (ce que JSON ne permet pas de gérer nativement).
 
-<h3 id="Les_objets_transférables_-_échanger_des_données_avec_transfert_de_la_propriété">Les objets transférables - échanger des données avec transfert de la propriété</h3>
+### Les objets transférables - échanger des données avec transfert de la propriété
 
-<p>Chrome 17+ et Firefox 18+ permettent également d'échanger certains types d'objet (qualifiés de transférables et qui implémentent l'interface {{domxref("Transferable")}}) avec des <em>workers</em> et à haute performance. Les objets transférables sont passés d'un contexte à l'autre avec une opération <em><a href="https://en.wikipedia.org/wiki/Zero-copy">zero-copy</a> </em>qui permet d'obtenir des améliorations sensibles lors de l'échange de données volumineuses. On peut voir cela comme un passage de référence du monde C/C++ mais les données qui sont transférées depuis le contexte appelant ne sont plus disponibles dans ce contexte après le transfert. La propriété des données est transférée au nouveau contexte. Ainsi, lorsqu'on transfère un objet {{domxref("ArrayBuffer")}} depuis l'application principale vers le <em>worker</em>, l'objet {{domxref("ArrayBuffer")}} de départ est nettoyé et ne peut plus être utilisé, son contenu est (littéralement) transféré au contexte du <em>worker</em>.</p>
+Chrome 17+ et Firefox 18+ permettent également d'échanger certains types d'objet (qualifiés de transférables et qui implémentent l'interface {{domxref("Transferable")}}) avec des _workers_ et à haute performance. Les objets transférables sont passés d'un contexte à l'autre avec une opération *[zero-copy](https://en.wikipedia.org/wiki/Zero-copy) *qui permet d'obtenir des améliorations sensibles lors de l'échange de données volumineuses. On peut voir cela comme un passage de référence du monde C/C++ mais les données qui sont transférées depuis le contexte appelant ne sont plus disponibles dans ce contexte après le transfert. La propriété des données est transférée au nouveau contexte. Ainsi, lorsqu'on transfère un objet {{domxref("ArrayBuffer")}} depuis l'application principale vers le _worker_, l'objet {{domxref("ArrayBuffer")}} de départ est nettoyé et ne peut plus être utilisé, son contenu est (littéralement) transféré au contexte du _worker_.
 
-<pre class="brush: js">// Créer un fichier de 32MB et le remplir.
+```js
+// Créer un fichier de 32MB et le remplir.
 var uInt8Array = new Uint8Array(1024 * 1024 * 32); // 32MB
-for (var i = 0; i &lt; uInt8Array.length; ++i) {
+for (var i = 0; i < uInt8Array.length; ++i) {
   uInt8Array[i] = i;
 }
 
 worker.postMessage(uInt8Array.buffer, [uInt8Array.buffer]);
-</pre>
+```
 
-<div class="note">
-<p><strong>Note :</strong> Pour plus d'informations quant aux objets transférables, aux performances associées et à la détection de ces fonctionnalités, on pourra lire <a href="https://developers.google.com/web/updates/2011/12/Transferable-Objects-Lightning-Fast">Transferable Objects: Lightning Fast</a>.</p>
-</div>
+> **Note :** Pour plus d'informations quant aux objets transférables, aux performances associées et à la détection de ces fonctionnalités, on pourra lire [Transferable Objects: Lightning Fast](https://developers.google.com/web/updates/2011/12/Transferable-Objects-Lightning-Fast).
 
-<h2 id="Workers_embarqués"><em>Workers</em> embarqués</h2>
+## _Workers_ embarqués
 
-<p>Il n'existe pas de méthode standard pour embarquer le code d'un worker dans une page web à la façon des éléments {{HTMLElement("script")}}. Toutefois, un élément {{HTMLElement("script")}}, qui ne possède pas d'attribut <code>src</code>, qui possède un attribut <code>type</code> ne correspondant pas à un type MIME exécutable pourra être considéré comme un bloc de données pouvant être utilisé par JavaScript. Ces blocs de données sont une fonctionnalité HTML5 qui permet de transporter n'importe quelle donnée textuelle. On pourrait donc embarquer un <em>worker</em> de cette façon :</p>
+Il n'existe pas de méthode standard pour embarquer le code d'un worker dans une page web à la façon des éléments {{HTMLElement("script")}}. Toutefois, un élément {{HTMLElement("script")}}, qui ne possède pas d'attribut `src`, qui possède un attribut `type` ne correspondant pas à un type MIME exécutable pourra être considéré comme un bloc de données pouvant être utilisé par JavaScript. Ces blocs de données sont une fonctionnalité HTML5 qui permet de transporter n'importe quelle donnée textuelle. On pourrait donc embarquer un _worker_ de cette façon :
 
-<pre class="brush: html">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-&lt;head&gt;
-&lt;meta charset="UTF-8" /&gt;
-&lt;title&gt;Exemple MDN - Worker embarqué&lt;/title&gt;
-&lt;script type="text/js-worker"&gt;
+```html
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8" />
+<title>Exemple MDN - Worker embarqué</title>
+<script type="text/js-worker">
   // Ce script ne sera pas analysé par le moteur JS car
   // son type MIME est text/js-worker.
   var maVar = 'Coucou monde !';
   // Reste du code du worker.
-&lt;/script&gt;
-&lt;script type="text/javascript"&gt;
+</script>
+<script type="text/javascript">
   // Ce script sera analysé par le moteur JS car son type MIME
   // est text/javascript.
   function pageLog(sMsg) {
@@ -329,16 +339,16 @@ worker.postMessage(uInt8Array.buffer, [uInt8Array.buffer]);
     oFragm.appendChild(document.createElement('br'));
     document.querySelector('#logDisplay').appendChild(oFragm);
   }
-&lt;/script&gt;
-&lt;script type="text/js-worker"&gt;
+</script>
+<script type="text/js-worker">
   // Ce script ne sera pas analysé par le moteur JS car son type
   // MIME est text/js-worker.
   onmessage = function(oEvent) {
     postMessage(myVar);
   };
   // Reste du code du worker
-&lt;/script&gt;
-&lt;script type="text/javascript"&gt;
+</script>
+<script type="text/javascript">
   // Ce script sera analysé par le moteur JS car son type MIME est
   // text/javascript
 
@@ -354,33 +364,37 @@ worker.postMessage(uInt8Array.buffer, [uInt8Array.buffer]);
 
   // On démarre le worker.
   window.onload = function() { document.worker.postMessage(''); };
-&lt;/script&gt;
-&lt;/head&gt;
-&lt;body&gt;&lt;div id="logDisplay"&gt;&lt;/div&gt;&lt;/body&gt;
-&lt;/html&gt;</pre>
+</script>
+</head>
+<body><div id="logDisplay"></div></body>
+</html>
+```
 
-<p>Le <em>worker</em> embarqué est désormais injecté dans la propriété <code>document.worker</code>.</p>
+Le _worker_ embarqué est désormais injecté dans la propriété `document.worker`.
 
-<p>On notera également qu'on peut convertir une fonction en un <code>Blob</code> et générer une URL d'objet vers ce blob. Par exemple :</p>
+On notera également qu'on peut convertir une fonction en un `Blob` et générer une URL d'objet vers ce blob. Par exemple :
 
-<pre class="brush: js">function fn2workerURL(fn) {
+```js
+function fn2workerURL(fn) {
   var blob = new Blob(['('+fn.toString()+')()'], {type: 'application/javascript'})
   return URL.createObjectURL(blob)
-}</pre>
+}
+```
 
-<h2 id="Autres_exemples">Autres exemples</h2>
+## Autres exemples
 
-<p>Dans cette section nous voyons d'autres exemples d'application.</p>
+Dans cette section nous voyons d'autres exemples d'application.
 
-<h3 id="Effectuer_des_calculs_en_arrière-plan">Effectuer des calculs en arrière-plan</h3>
+### Effectuer des calculs en arrière-plan
 
-<p>Les <em>workers</em> sont notamment utiles pour réaliser des opérations de traitement intensives sans bloquer pour autant le <em>thread</em> responsable de l'interface utilisateur. Dans cet exemple, on utilise un<em> </em><em>worker</em> afin de calculer la suite de Fibonacci.</p>
+Les _workers_ sont notamment utiles pour réaliser des opérations de traitement intensives sans bloquer pour autant le _thread_ responsable de l'interface utilisateur. Dans cet exemple, on utilise un* \*\*worker* afin de calculer la suite de Fibonacci.
 
-<h4 id="JavaScript">JavaScript</h4>
+#### JavaScript
 
-<p>Le code JavaScript suivant sera enregistré dans le fichier "fibonacci.js" auquel on fera référence dans le document HTML ci-après.</p>
+Le code JavaScript suivant sera enregistré dans le fichier "fibonacci.js" auquel on fera référence dans le document HTML ci-après.
 
-<pre class="brush: js">var results = [];
+```js
+var results = [];
 
 function resultReceiver(event) {
   results.push(parseInt(event.data));
@@ -401,29 +415,31 @@ onmessage = function(event) {
     return;
   }
 
-  for (var i = 1; i &lt;= 2; i++) {
+  for (var i = 1; i <= 2; i++) {
     var worker = new Worker('fibonacci.js');
     worker.onmessage = resultReceiver;
     worker.onerror = errorReceiver;
     worker.postMessage(n - i);
   }
- };</pre>
+ };
+```
 
-<p>On a défini la propriété <code>onmessage</code> avec une fonction qui recevra les messages envoyés au <em>worker</em> via <code>postMessage()</code>. On initie alors la récursion et on déclenche des copies du <em>worker</em> afin de gérer chacune des itérations liées au calcul.</p>
+On a défini la propriété `onmessage` avec une fonction qui recevra les messages envoyés au _worker_ via `postMessage()`. On initie alors la récursion et on déclenche des copies du _worker_ afin de gérer chacune des itérations liées au calcul.
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-  &lt;head&gt;
-    &lt;meta charset="UTF-8"  /&gt;
-    &lt;title&gt;Test threads fibonacci&lt;/title&gt;
-  &lt;/head&gt;
-  &lt;body&gt;
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8"  />
+    <title>Test threads fibonacci</title>
+  </head>
+  <body>
 
-  &lt;div id="result"&gt;&lt;/div&gt;
+  <div id="result"></div>
 
-  &lt;script language="javascript"&gt;
+  <script language="javascript">
 
     var worker = new Worker('fibonacci.js');
 
@@ -439,70 +455,51 @@ onmessage = function(event) {
 
     worker.postMessage('5');
 
-  &lt;/script&gt;
-  &lt;/body&gt;
-&lt;/html&gt;
-</pre>
+  </script>
+  </body>
+</html>
+```
 
-<p>Dans la page web, on crée un élément <code>div</code> avec l'identifiant <code>result</code>. C'est cet élément qui sera utilisé afin d'afficher le résultat.</p>
+Dans la page web, on crée un élément `div` avec l'identifiant `result`. C'est cet élément qui sera utilisé afin d'afficher le résultat.
 
-<p>Ensuite, on lance le <em>worker</em>. Après avoir initié le <em>worker</em>, on configure le gestionnaire d'évènement <code>onmessage</code> afin d'afficher le résultat via le <code>div</code>. On configure également le gestionnaire <code>onerror</code> afin d'afficher l'erreur de la console.</p>
+Ensuite, on lance le _worker_. Après avoir initié le _worker_, on configure le gestionnaire d'évènement `onmessage` afin d'afficher le résultat via le `div`. On configure également le gestionnaire `onerror` afin d'afficher l'erreur de la console.
 
-<p>Enfin, on envoie un message au <em>worker</em> afin de le démarrer.</p>
+Enfin, on envoie un message au _worker_ afin de le démarrer.
 
-<p><a href="https://mdn.github.io/fibonacci-worker/">Essayer cet exemple</a>.</p>
+[Essayer cet exemple](https://mdn.github.io/fibonacci-worker/).
 
-<h3 id="Répartir_des_tâches_entre_plusieurs_workers">Répartir des tâches entre plusieurs <em>workers</em></h3>
+### Répartir des tâches entre plusieurs _workers_
 
-<p>Les ordinateurs dotés de plusieurs coeurs se généralisent et il peut s'avérer utile de fragmenter une tâche complexe entre différents <em>workers</em> afin de tirer parti des différents coeurs du processeur.</p>
+Les ordinateurs dotés de plusieurs coeurs se généralisent et il peut s'avérer utile de fragmenter une tâche complexe entre différents _workers_ afin de tirer parti des différents coeurs du processeur.
 
-<h2 id="Autres_workers">Autres <em>workers</em></h2>
+## Autres _workers_
 
-<p>En plus des web <em>workers</em> (dédiés et partagés), il existe d'autres types de <em>workers </em>:</p>
+En plus des web _workers_ (dédiés et partagés), il existe d'autres types de _workers_ :
 
-<ul>
- <li><a href="/en-US/docs/Web/API/ServiceWorker_API">Les service <em>workers</em></a> peuvent notamment servir de serveurs mandataires (<em>proxy</em>) entre les applications web, le navigateur et le réseau (lorsque celui-ci est disponible). Ces <em>workers</em> sont conçus afin de permettre des utilisations hors-ligne en interceptant les requêtes réseau et en déclenchant les actions nécessaires selon que le réseau est disponible ou non et que les ressources souhaitées sont disponibles sur le serveur. Ces <em>workers</em> permettent de déclencher des notifications <em>push</em> et d'utiliser des API de synchronisation en arrière-plan.</li>
- <li><a href="/fr/docs/Web/API/Web_Audio_API#Audio_processing_in_JavaScript">Les <em>worklets </em>audio</a> permettent de traiter des signaux audios en arrière-plan (fonctionnalité expérimentale).</li>
-</ul>
+- [Les service _workers_](/en-US/docs/Web/API/ServiceWorker_API) peuvent notamment servir de serveurs mandataires (_proxy_) entre les applications web, le navigateur et le réseau (lorsque celui-ci est disponible). Ces _workers_ sont conçus afin de permettre des utilisations hors-ligne en interceptant les requêtes réseau et en déclenchant les actions nécessaires selon que le réseau est disponible ou non et que les ressources souhaitées sont disponibles sur le serveur. Ces _workers_ permettent de déclencher des notifications _push_ et d'utiliser des API de synchronisation en arrière-plan.
+- [Les _worklets_ audio](/fr/docs/Web/API/Web_Audio_API#Audio_processing_in_JavaScript) permettent de traiter des signaux audios en arrière-plan (fonctionnalité expérimentale).
 
-<h2 id="Fonctions_et_interfaces_disponibles_pour_les_workers">Fonctions et interfaces disponibles pour les <em>workers</em></h2>
+## Fonctions et interfaces disponibles pour les _workers_
 
-<p>La plupart des fonctionnalités JavaScript standard peuvent être utilisées dans les <em>web workers</em>, dont :</p>
+La plupart des fonctionnalités JavaScript standard peuvent être utilisées dans les _web workers_, dont :
 
-<ul>
- <li>{{domxref("Navigator")}}</li>
- <li>{{domxref("XMLHttpRequest")}}</li>
- <li>{{jsxref("Objets_globaux/Array", "Array")}}, {{jsxref("Objets_globaux/Date", "Date")}}, {{jsxref("Objets_globaux/Math", "Math")}} et {{jsxref("Objets_globaux/String", "String")}}</li>
- <li>{{domxref("WindowTimers.setTimeout")}} et {{domxref("WindowTimers.setInterval")}}</li>
-</ul>
+- {{domxref("Navigator")}}
+- {{domxref("XMLHttpRequest")}}
+- {{jsxref("Objets_globaux/Array", "Array")}}, {{jsxref("Objets_globaux/Date", "Date")}}, {{jsxref("Objets_globaux/Math", "Math")}} et {{jsxref("Objets_globaux/String", "String")}}
+- {{domxref("WindowTimers.setTimeout")}} et {{domxref("WindowTimers.setInterval")}}
 
-<p>En revanche, un <em>worker</em> ne pourra pas directement manipuler la page parente et notamment le DOM et les objets de la page. Il faudra effectuer ce traitement indirectement, via des messages.</p>
+En revanche, un _worker_ ne pourra pas directement manipuler la page parente et notamment le DOM et les objets de la page. Il faudra effectuer ce traitement indirectement, via des messages.
 
-<div class="note">
-<p><strong>Note :</strong> Pour avoir une liste exhaustive des fonctionnalités disponibles pour les <em>workers</em>, voir  <a href="/fr/docs/Web/API/Worker/Functions_and_classes_available_to_workers">les fonctions et interfaces disponibles pour les <em>workers</em></a>.</p>
-</div>
+> **Note :** Pour avoir une liste exhaustive des fonctionnalités disponibles pour les _workers_, voir  [les fonctions et interfaces disponibles pour les _workers_](/fr/docs/Web/API/Worker/Functions_and_classes_available_to_workers).
 
-<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', '#workers', 'Web workers')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                            | État                             | Commentaires |
+| ------------------------------------------------------------------------ | -------------------------------- | ------------ |
+| {{SpecName('HTML WHATWG', '#workers', 'Web workers')}} | {{Spec2('HTML WHATWG')}} |              |
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/API/Worker">L'interface <code>Worker</code></a></li>
- <li><a href="/fr/docs/Web/API/SharedWorker">L'interface <code>SharedWorker</code></a></li>
- <li><a href="/fr/docs/Web/API/Worker/Functions_and_classes_available_to_workers">Les fonctions disponibles dans les <em>workers</em></a></li>
-</ul>
+- [L'interface `Worker`](/fr/docs/Web/API/Worker)
+- [L'interface `SharedWorker`](/fr/docs/Web/API/SharedWorker)
+- [Les fonctions disponibles dans les _workers_](/fr/docs/Web/API/Worker/Functions_and_classes_available_to_workers)
diff --git a/files/fr/web/api/webgl2renderingcontext/index.md b/files/fr/web/api/webgl2renderingcontext/index.md
index f1233fd66f..4ed7247a1b 100644
--- a/files/fr/web/api/webgl2renderingcontext/index.md
+++ b/files/fr/web/api/webgl2renderingcontext/index.md
@@ -9,270 +9,224 @@ tags:
   - WebGL2
 translation_of: Web/API/WebGL2RenderingContext
 ---
-<div>{{APIRef("WebGL")}} {{SeeCompatTable}}</div>
+{{APIRef("WebGL")}} {{SeeCompatTable}}
 
-<p>L'interface <strong>WebGL2RenderingContext</strong> fournit le contexte de rendu OpenGL ES 3.0 pour la surface de dessin d'un élément HTML {{HTMLElement("canvas")}}.</p>
+L'interface **WebGL2RenderingContext** fournit le contexte de rendu OpenGL ES 3.0 pour la surface de dessin d'un élément HTML {{HTMLElement("canvas")}}.
 
-<p>Pour obtenir un objet de cette interface, appelez {{domxref ("HTMLCanvasElement.getContext()", "getContext()")}} sur un élément <code>&lt;canvas&gt;</code>, en fournissant "webgl2" comme argument :</p>
+Pour obtenir un objet de cette interface, appelez {{domxref ("HTMLCanvasElement.getContext()", "getContext()")}} sur un élément `<canvas>`, en fournissant "webgl2" comme argument :
 
-<pre class="brush: js">var canevas = document.getElementById('monCanevas');
+```js
+var canevas = document.getElementById('monCanevas');
 var gl = canevas.getContext('webgl2');
-</pre>
-
-<div class="note">
-<p><strong>Note :</strong> WebGL 2 est une extension de WebGL 1. L'interface <code>WebGL2RenderingContext</code> implémente tous les membres de l'interface {{domxref("WebGLRenderingContext")}}. Certaines méthodes du contexte WebGL 1 peuvent accepter des valeurs supplémentaires lorsqu'elles sont utilisées dans un contexte WebGL 2. Vous trouverez cette information sur les pages de référence WebGL 1.</p>
-</div>
-
-<p>Le <a href="/fr-FR/docs/Web/API/WebGL_API/Tutorial">didacticiel WebGL</a> contient plus d'informations, d'exemples et de ressources sur la façon de démarrer avec WebGL.</p>
-
-<h2 id="Constantes">Constantes</h2>
-
-<p>Voir la page des <a href="/fr-FR/docs/Web/API/WebGL_API/Constants">constantes WebGL</a>.</p>
-
-<h2 id="Informations_d'état">Informations d'état</h2>
-
-<dl>
- <dt>{{domxref("WebGL2RenderingContext.getIndexedParameter()")}}</dt>
- <dd>Retourne la valeur indexée pour la <code>cible</code> donnée.</dd>
-</dl>
-
-<h2 id="Tampons">Tampons</h2>
-
-<dl>
- <dt>{{domxref("WebGL2RenderingContext.bufferData()")}}</dt>
- <dd>Initialise et crée le magasin de données de l'objet tampon.</dd>
- <dt>{{domxref("WebGL2RenderingContext.bufferSubData()")}}</dt>
- <dd>Met à jour un sous-ensemble d'un magasin de données d'un objet tampon.</dd>
- <dt>{{domxref("WebGL2RenderingContext.copyBufferSubData()")}}</dt>
- <dd>Copie une partie des données d'un tampon vers un autre tampon.</dd>
- <dt>{{domxref("WebGL2RenderingContext.getBufferSubData()")}}</dt>
- <dd>Lit les données d'un tampon et les écrit dans un {{jsxref ("ArrayBuffer")}} ou un {{jsxref ("SharedArrayBuffer")}}.</dd>
-</dl>
-
-<h2 id="Tampons_d'image">Tampons d'image</h2>
-
-<dl>
- <dt>{{domxref("WebGL2RenderingContext.blitFramebuffer()")}}</dt>
- <dd>Transfère un bloc de pixels du tampon d'image lu vers le tampon d'image de dessin.</dd>
- <dt>{{domxref("WebGL2RenderingContext.framebufferTextureLayer()")}}</dt>
- <dd>Attache une seule couche de texture à un tampon d'image.</dd>
- <dt>{{domxref("WebGL2RenderingContext.invalidateFramebuffer()")}}</dt>
- <dd>Invalide le contenu des éléments joints dans un tampon d'image.</dd>
- <dt>{{domxref("WebGL2RenderingContext.invalidateSubFramebuffer()")}}</dt>
- <dd>Invalide le contenu des éléments joints dans un tampon d'image.</dd>
- <dt>{{domxref("WebGL2RenderingContext.readBuffer()")}}</dt>
- <dd>Sélectionne un tampon de couleur comme source pour les pixels.</dd>
-</dl>
-
-<h2 id="Tampons_de_rendu">Tampons de rendu</h2>
-
-<dl>
- <dt>{{domxref("WebGL2RenderingContext.getInternalformatParameter()")}}</dt>
- <dd>Retourne des informations sur le support, dépendant de l'implémentation, des formats internes.</dd>
- <dt>{{domxref("WebGL2RenderingContext.renderbufferStorageMultisample()")}}</dt>
- <dd>Crée et initialise le magasin de données d'un objet tampon de rendu et permet de d'indiquer le nombre d'échantillons à utiliser.</dd>
-</dl>
-
-<h2 id="Textures">Textures</h2>
-
-<dl>
- <dt>{{domxref("WebGL2RenderingContext.texStorage2D()")}}</dt>
- <dd>Spécifie tous les niveaux d'un stockage de texture bidimensionnelle.</dd>
- <dt>{{domxref("WebGL2RenderingContext.texStorage3D()")}}</dt>
- <dd>Spécifie tous les niveaux d'une texture tridimensionnelle ou d'une texture de tableau bidimensionnelle.</dd>
- <dt>{{domxref("WebGL2RenderingContext.texImage3D()")}}</dt>
- <dd>Spécifie une image de texture tridimensionnelle.</dd>
- <dt>{{domxref("WebGL2RenderingContext.texSubImage3D()")}}</dt>
- <dd>Spécifie un sous-rectangle de la texture 3D en cours.</dd>
- <dt>{{domxref("WebGL2RenderingContext.copyTexSubImage3D()")}}</dt>
- <dd>Copie des pixels du tampon WebGLFrame en cours dans une sous-image de texture 3D existante.</dd>
- <dt>{{domxref("WebGL2RenderingContext.compressedTexImage3D()")}}</dt>
- <dd>Spécifie une image de texture tridimensionnelle dans un format compressé.</dd>
- <dt>{{domxref("WebGL2RenderingContext.compressedTexSubImage3D()")}}</dt>
- <dd>Spécifie un sous-rectangle tridimensionnel pour une image de texture dans un format compressé.</dd>
-</dl>
-
-<h2 id="Programmes_et_shaders">Programmes et shaders</h2>
-
-<dl>
- <dt>{{domxref("WebGL2RenderingContext.getFragDataLocation()")}}</dt>
- <dd>Retourne la liaison des numéros de couleur aux variables de sortie varying définies par l'utilisateur.</dd>
-</dl>
-
-<h2 id="Uniforms_et_attributs">Uniforms et attributs</h2>
-
-<dl>
- <dt>{{domxref("WebGL2RenderingContext.uniform()", "WebGL2RenderingContext.uniform[1234][uif][v]()")}}</dt>
- <dd>Méthodes spécifiant les valeurs des variables uniform.</dd>
- <dt>{{domxref("WebGL2RenderingContext.uniformMatrix()", "WebGL2RenderingContext.uniformMatrix[234]x[234]fv()")}}</dt>
- <dd>Méthodes spécifiant les valeurs matricielles pour les variables uniform.</dd>
- <dt>{{domxref("WebGL2RenderingContext.vertexAttribI()", "WebGL2RenderingContext.vertexAttribI4[u]i[v]()")}}</dt>
- <dd>Méthodes spécifiant les valeurs entières des attributs de sommet génériques.</dd>
- <dt>{{domxref("WebGL2RenderingContext.vertexAttribIPointer()")}}</dt>
- <dd>Spécifie les formats et les emplacements des données entières des attributs de sommet dans un tableau d'attributs de sommet.</dd>
-</dl>
-
-<h2 id="Tampons_de_dessin">Tampons de dessin</h2>
-
-<dl>
- <dt>{{domxref("WebGL2RenderingContext.vertexAttribDivisor()")}}</dt>
- <dd>Modifie la vitesse à laquelle les attributs de sommet génériques progressent lors du rendu de plusieurs instances de primitives avec {{domxref ("WebGL2RenderingContext.drawArraysInstanced()", "gl.drawArraysInstanced()")}} et {{domxref("WebGL2RenderingContext.drawElementsInstanced()" , "gl.drawElementsInstanced()")}}.</dd>
- <dt>{{domxref("WebGL2RenderingContext.drawArraysInstanced()")}}</dt>
- <dd>Affiche des primitives à partir des données d'un tableau. En outre, elle peut exécuter plusieurs instances de la plage d'éléments.</dd>
- <dt>{{domxref("WebGL2RenderingContext.drawElementsInstanced()")}}</dt>
- <dd>Affiche des primitives à partir des données d'un tableau. En outre, elle peut exécuter plusieurs instances d'un ensemble d'éléments.</dd>
- <dt>{{domxref("WebGL2RenderingContext.drawRangeElements()")}}</dt>
- <dd>Affiche des primitives à partir des données d'un tableau dans la plage donnée.</dd>
- <dt>{{domxref("WebGL2RenderingContext.drawBuffers()")}}</dt>
- <dd>Spécifie une liste de tampons de couleur dans lesquels dessiner.</dd>
- <dt>{{domxref("WebGL2RenderingContext.clearBuffer()", "WebGL2RenderingContext.clearBuffer[fiuv]()")}}</dt>
- <dd>Efface les tampons du tampon d'image actuellement lié.</dd>
-</dl>
-
-<h2 id="Objets_requêtes">Objets requêtes</h2>
-
-<p>Méthodes pour travailler avec les objets {{domxref("WebGLQuery")}}.</p>
-
-<dl>
- <dt>{{domxref("WebGL2RenderingContext.createQuery()")}}</dt>
- <dd>Crée un nouvel objet {{domxref("WebGLQuery")}}.</dd>
- <dt>{{domxref("WebGL2RenderingContext.deleteQuery()")}}</dt>
- <dd>Supprime l'objet {{domxref("WebGLQuery")}} donné.</dd>
- <dt>{{domxref("WebGL2RenderingContext.isQuery()")}}</dt>
- <dd>Retourne <code>true</code> si l'objet donné est un objet {{domxref("WebGLQuery")}} valide.</dd>
- <dt>{{domxref("WebGL2RenderingContext.beginQuery()")}}</dt>
- <dd>Commence une requête asynchrone.</dd>
- <dt>{{domxref("WebGL2RenderingContext.endQuery()")}}</dt>
- <dd>Marque la fin d'une requête asynchrone.</dd>
- <dt>{{domxref("WebGL2RenderingContext.getQuery()")}}</dt>
- <dd>Retourne un objet {{domxref("WebGLQuery")}} pour la cible donnée.</dd>
- <dt>{{domxref("WebGL2RenderingContext.getQueryParameter()")}}</dt>
- <dd>Retourne des informations sur une requête.</dd>
-</dl>
-
-<h2 id="Objets_échantilloneurs">Objets échantilloneurs</h2>
-
-<dl>
- <dt>{{domxref("WebGL2RenderingContext.createSampler()")}}</dt>
- <dd>Crée un nouvel objet {{domxref("WebGLSampler")}}.</dd>
- <dt>{{domxref("WebGL2RenderingContext.deleteSampler()")}}</dt>
- <dd>Supprime l'objet {{domxref("WebGLSampler")}} donné.</dd>
- <dt>{{domxref("WebGL2RenderingContext.bindSampler()")}}</dt>
- <dd>Lie le {{domxref("WebGLSampler")}} donné à une unité de texture.</dd>
- <dt>{{domxref("WebGL2RenderingContext.isSampler()")}}</dt>
- <dd>Retourne <code>true</code> si l'objet donné est un objet {{domxref("WebGLSampler")}} valide.</dd>
- <dt>{{domxref("WebGL2RenderingContext.samplerParameter()", "WebGL2RenderingContext.samplerParameter[if]()")}}</dt>
- <dd>Définit les paramètres de l'échantillonneur.</dd>
- <dt>{{domxref("WebGL2RenderingContext.getSamplerParameter()")}}</dt>
- <dd>Retourne les informations de paramètres de l'échantillonneur.</dd>
-</dl>
-
-<h2 id="Objets_sync">Objets sync</h2>
-
-<dl>
- <dt>{{domxref("WebGL2RenderingContext.fenceSync()")}}</dt>
- <dd>Crée un nouvel objet {{domxref("WebGLSync")}} et l'insère dans le flux de commandes GL.</dd>
- <dt>{{domxref("WebGL2RenderingContext.isSync()")}}</dt>
- <dd>Retourne <code>true</code> si l'objet transmis est un objet {{domxref("WebGLSync")}} valide.</dd>
- <dt>{{domxref("WebGL2RenderingContext.deleteSync()")}}</dt>
- <dd>Supprime l'objet {{domxref("WebGLSync")}} donné.</dd>
- <dt>{{domxref("WebGL2RenderingContext.clientWaitSync()")}}</dt>
- <dd>
- <p>Bloque et attend qu'un objet {{domxref ("WebGLSync")}} reçoive un signal ou que l'expiration du délai donné soit reçue.</p>
- </dd>
- <dt>{{domxref("WebGL2RenderingContext.waitSync()")}}</dt>
- <dd>Retourne immédiatement, mais attend le serveur GL jusqu'à ce que l'objet {{domxref("WebGLSync")}} donné reçoive un signal.</dd>
- <dt>{{domxref("WebGL2RenderingContext.getSyncParameter()")}}</dt>
- <dd>Retourne les informations de paramètres d'un objet {{domxref("WebGLSync")}}.</dd>
-</dl>
-
-<h2 id="Retour_de_transformations">Retour de transformations</h2>
-
-<dl>
- <dt>{{domxref("WebGL2RenderingContext.createTransformFeedback()")}}</dt>
- <dd>Crée et initialise les objets {{domxref("WebGLTransformFeedback")}}.</dd>
- <dt>{{domxref("WebGL2RenderingContext.deleteTransformFeedback()")}}</dt>
- <dd>Supprime l'objet {{domxref ("WebGLTransformFeedback")}} donné.</dd>
- <dt>{{domxref("WebGL2RenderingContext.isTransformFeedback()")}}</dt>
- <dd>Retourne <code>true</code> si l'objet transmis est un objet {{domxref("WebGLTransformFeedback")}} valide.</dd>
- <dt>{{domxref("WebGL2RenderingContext.bindTransformFeedback()")}}</dt>
- <dd>Lie l'objet {{domxref("WebGLTransformFeedback")}} transmis à l'état GL en cours.</dd>
- <dt>{{domxref("WebGL2RenderingContext.beginTransformFeedback()")}}</dt>
- <dd>Démarre une opération de retour de transformations.</dd>
- <dt>{{domxref("WebGL2RenderingContext.endTransformFeedback()")}}</dt>
- <dd>Termine une opération de retour de transformations.</dd>
- <dt>{{domxref("WebGL2RenderingContext.transformFeedbackVaryings()")}}</dt>
- <dd>Indique les valeurs à enregistrer dans les tampons {{domxref("WebGLTransformFeedback")}}.</dd>
- <dt>{{domxref("WebGL2RenderingContext.getTransformFeedbackVarying()")}}</dt>
- <dd>Retourne des informations sur les variables varying à partir des tampons {{domxref("WebGLTransformFeedback")}}.</dd>
- <dt>{{domxref("WebGL2RenderingContext.pauseTransformFeedback()")}}</dt>
- <dd>Suspend une opération de retour de transformations.</dd>
- <dt>{{domxref("WebGL2RenderingContext.resumeTransformFeedback()")}}</dt>
- <dd>Reprend une opération de retour de transformations.</dd>
-</dl>
-
-<h2 id="Objets_tampons_uniforms">Objets tampons uniforms</h2>
-
-<dl>
- <dt>{{domxref("WebGL2RenderingContext.bindBufferBase()")}}</dt>
- <dd>Lie le {{domxref("WebGLBuffer")}} donné au point de liaison donné (<code>cible</code>) à l'<code>indice</code> donné.</dd>
- <dt>{{domxref("WebGL2RenderingContext.bindBufferRange()")}}</dt>
- <dd>Lie une plage du {{domxref("WebGLBuffer")}} donné au point de liaison donné (<code>cible</code>) à l'<code>indice</code> donné.</dd>
- <dt>{{domxref("WebGL2RenderingContext.getUniformIndices()")}}</dt>
- <dd>
- <p>Récupère les indices d'un certain nombre d'uniforms dans un {{domxref("WebGLProgram")}}.</p>
- </dd>
- <dt>{{domxref("WebGL2RenderingContext.getActiveUniforms()")}}</dt>
- <dd>Récupère des informations sur les uniforms actifs dans un {{domxref("WebGLProgram")}}.</dd>
- <dt>{{domxref("WebGL2RenderingContext.getUniformBlockIndex()")}}</dt>
- <dd>Récupère l'indice d'un bloc uniform dans un {{domxref("WebGLProgram")}}.</dd>
- <dt>{{domxref("WebGL2RenderingContext.getActiveUniformBlockParameter()")}}</dt>
- <dd>Récupère des informations d'un bloc uniform actif dans un {{domxref("WebGLProgram")}}.</dd>
- <dt>{{domxref("WebGL2RenderingContext.getActiveUniformBlockName()")}}</dt>
- <dd>Récupère le nom du bloc uniform actif à l'indice donné dans un {{domxref("WebGLProgram")}}.</dd>
- <dt>{{domxref("WebGL2RenderingContext.uniformBlockBinding()")}}</dt>
- <dd>Affecte des points de liaison aux blocs uniforms actifs.</dd>
-</dl>
-
-<h2 id="Objets_de_tableaux_de_sommets">Objets de tableaux de sommets</h2>
-
-<p>Méthodes pour travailler avec les objets {{domxref("WebGLVertexArrayObject")}} (VAO).</p>
-
-<dl>
- <dt>{{domxref("WebGL2RenderingContext.createVertexArray()")}}</dt>
- <dd>Crée un nouveau {{domxref("WebGLVertexArrayObject")}}.</dd>
- <dt>{{domxref("WebGL2RenderingContext.deleteVertexArray()")}}</dt>
- <dd>Supprime le {{domxref("WebGLVertexArrayObject")}} donné.</dd>
- <dt>{{domxref("WebGL2RenderingContext.isVertexArray()")}}</dt>
- <dd>Retourne <code>true</code> si l'objet donné est un {{domxref ("WebGLVertexArrayObject")}} valide.</dd>
- <dt>{{domxref("WebGL2RenderingContext.bindVertexArray()")}}</dt>
- <dd>Lie le {{domxref ("WebGLVertexArrayObject")}} donné au tampon.</dd>
-</dl>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('WebGL2', "#3.7", "WebGL2RenderingContext")}}</td>
-   <td>{{Spec2('WebGL2')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.WebGL2RenderingContext")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("HTMLCanvasElement")}}</li>
- <li>{{domxref("WebGLRenderingContext")}}</li>
-</ul>
+```
+
+> **Note :** WebGL 2 est une extension de WebGL 1. L'interface `WebGL2RenderingContext` implémente tous les membres de l'interface {{domxref("WebGLRenderingContext")}}. Certaines méthodes du contexte WebGL 1 peuvent accepter des valeurs supplémentaires lorsqu'elles sont utilisées dans un contexte WebGL 2. Vous trouverez cette information sur les pages de référence WebGL 1.
+
+Le [didacticiel WebGL](/fr-FR/docs/Web/API/WebGL_API/Tutorial) contient plus d'informations, d'exemples et de ressources sur la façon de démarrer avec WebGL.
+
+## Constantes
+
+Voir la page des [constantes WebGL](/fr-FR/docs/Web/API/WebGL_API/Constants).
+
+## Informations d'état
+
+- {{domxref("WebGL2RenderingContext.getIndexedParameter()")}}
+  - : Retourne la valeur indexée pour la `cible` donnée.
+
+## Tampons
+
+- {{domxref("WebGL2RenderingContext.bufferData()")}}
+  - : Initialise et crée le magasin de données de l'objet tampon.
+- {{domxref("WebGL2RenderingContext.bufferSubData()")}}
+  - : Met à jour un sous-ensemble d'un magasin de données d'un objet tampon.
+- {{domxref("WebGL2RenderingContext.copyBufferSubData()")}}
+  - : Copie une partie des données d'un tampon vers un autre tampon.
+- {{domxref("WebGL2RenderingContext.getBufferSubData()")}}
+  - : Lit les données d'un tampon et les écrit dans un {{jsxref ("ArrayBuffer")}} ou un {{jsxref ("SharedArrayBuffer")}}.
+
+## Tampons d'image
+
+- {{domxref("WebGL2RenderingContext.blitFramebuffer()")}}
+  - : Transfère un bloc de pixels du tampon d'image lu vers le tampon d'image de dessin.
+- {{domxref("WebGL2RenderingContext.framebufferTextureLayer()")}}
+  - : Attache une seule couche de texture à un tampon d'image.
+- {{domxref("WebGL2RenderingContext.invalidateFramebuffer()")}}
+  - : Invalide le contenu des éléments joints dans un tampon d'image.
+- {{domxref("WebGL2RenderingContext.invalidateSubFramebuffer()")}}
+  - : Invalide le contenu des éléments joints dans un tampon d'image.
+- {{domxref("WebGL2RenderingContext.readBuffer()")}}
+  - : Sélectionne un tampon de couleur comme source pour les pixels.
+
+## Tampons de rendu
+
+- {{domxref("WebGL2RenderingContext.getInternalformatParameter()")}}
+  - : Retourne des informations sur le support, dépendant de l'implémentation, des formats internes.
+- {{domxref("WebGL2RenderingContext.renderbufferStorageMultisample()")}}
+  - : Crée et initialise le magasin de données d'un objet tampon de rendu et permet de d'indiquer le nombre d'échantillons à utiliser.
+
+## Textures
+
+- {{domxref("WebGL2RenderingContext.texStorage2D()")}}
+  - : Spécifie tous les niveaux d'un stockage de texture bidimensionnelle.
+- {{domxref("WebGL2RenderingContext.texStorage3D()")}}
+  - : Spécifie tous les niveaux d'une texture tridimensionnelle ou d'une texture de tableau bidimensionnelle.
+- {{domxref("WebGL2RenderingContext.texImage3D()")}}
+  - : Spécifie une image de texture tridimensionnelle.
+- {{domxref("WebGL2RenderingContext.texSubImage3D()")}}
+  - : Spécifie un sous-rectangle de la texture 3D en cours.
+- {{domxref("WebGL2RenderingContext.copyTexSubImage3D()")}}
+  - : Copie des pixels du tampon WebGLFrame en cours dans une sous-image de texture 3D existante.
+- {{domxref("WebGL2RenderingContext.compressedTexImage3D()")}}
+  - : Spécifie une image de texture tridimensionnelle dans un format compressé.
+- {{domxref("WebGL2RenderingContext.compressedTexSubImage3D()")}}
+  - : Spécifie un sous-rectangle tridimensionnel pour une image de texture dans un format compressé.
+
+## Programmes et shaders
+
+- {{domxref("WebGL2RenderingContext.getFragDataLocation()")}}
+  - : Retourne la liaison des numéros de couleur aux variables de sortie varying définies par l'utilisateur.
+
+## Uniforms et attributs
+
+- {{domxref("WebGL2RenderingContext.uniform()", "WebGL2RenderingContext.uniform[1234][uif][v]()")}}
+  - : Méthodes spécifiant les valeurs des variables uniform.
+- {{domxref("WebGL2RenderingContext.uniformMatrix()", "WebGL2RenderingContext.uniformMatrix[234]x[234]fv()")}}
+  - : Méthodes spécifiant les valeurs matricielles pour les variables uniform.
+- {{domxref("WebGL2RenderingContext.vertexAttribI()", "WebGL2RenderingContext.vertexAttribI4[u]i[v]()")}}
+  - : Méthodes spécifiant les valeurs entières des attributs de sommet génériques.
+- {{domxref("WebGL2RenderingContext.vertexAttribIPointer()")}}
+  - : Spécifie les formats et les emplacements des données entières des attributs de sommet dans un tableau d'attributs de sommet.
+
+## Tampons de dessin
+
+- {{domxref("WebGL2RenderingContext.vertexAttribDivisor()")}}
+  - : Modifie la vitesse à laquelle les attributs de sommet génériques progressent lors du rendu de plusieurs instances de primitives avec {{domxref ("WebGL2RenderingContext.drawArraysInstanced()", "gl.drawArraysInstanced()")}} et {{domxref("WebGL2RenderingContext.drawElementsInstanced()" , "gl.drawElementsInstanced()")}}.
+- {{domxref("WebGL2RenderingContext.drawArraysInstanced()")}}
+  - : Affiche des primitives à partir des données d'un tableau. En outre, elle peut exécuter plusieurs instances de la plage d'éléments.
+- {{domxref("WebGL2RenderingContext.drawElementsInstanced()")}}
+  - : Affiche des primitives à partir des données d'un tableau. En outre, elle peut exécuter plusieurs instances d'un ensemble d'éléments.
+- {{domxref("WebGL2RenderingContext.drawRangeElements()")}}
+  - : Affiche des primitives à partir des données d'un tableau dans la plage donnée.
+- {{domxref("WebGL2RenderingContext.drawBuffers()")}}
+  - : Spécifie une liste de tampons de couleur dans lesquels dessiner.
+- {{domxref("WebGL2RenderingContext.clearBuffer()", "WebGL2RenderingContext.clearBuffer[fiuv]()")}}
+  - : Efface les tampons du tampon d'image actuellement lié.
+
+## Objets requêtes
+
+Méthodes pour travailler avec les objets {{domxref("WebGLQuery")}}.
+
+- {{domxref("WebGL2RenderingContext.createQuery()")}}
+  - : Crée un nouvel objet {{domxref("WebGLQuery")}}.
+- {{domxref("WebGL2RenderingContext.deleteQuery()")}}
+  - : Supprime l'objet {{domxref("WebGLQuery")}} donné.
+- {{domxref("WebGL2RenderingContext.isQuery()")}}
+  - : Retourne `true` si l'objet donné est un objet {{domxref("WebGLQuery")}} valide.
+- {{domxref("WebGL2RenderingContext.beginQuery()")}}
+  - : Commence une requête asynchrone.
+- {{domxref("WebGL2RenderingContext.endQuery()")}}
+  - : Marque la fin d'une requête asynchrone.
+- {{domxref("WebGL2RenderingContext.getQuery()")}}
+  - : Retourne un objet {{domxref("WebGLQuery")}} pour la cible donnée.
+- {{domxref("WebGL2RenderingContext.getQueryParameter()")}}
+  - : Retourne des informations sur une requête.
+
+## Objets échantilloneurs
+
+- {{domxref("WebGL2RenderingContext.createSampler()")}}
+  - : Crée un nouvel objet {{domxref("WebGLSampler")}}.
+- {{domxref("WebGL2RenderingContext.deleteSampler()")}}
+  - : Supprime l'objet {{domxref("WebGLSampler")}} donné.
+- {{domxref("WebGL2RenderingContext.bindSampler()")}}
+  - : Lie le {{domxref("WebGLSampler")}} donné à une unité de texture.
+- {{domxref("WebGL2RenderingContext.isSampler()")}}
+  - : Retourne `true` si l'objet donné est un objet {{domxref("WebGLSampler")}} valide.
+- {{domxref("WebGL2RenderingContext.samplerParameter()", "WebGL2RenderingContext.samplerParameter[if]()")}}
+  - : Définit les paramètres de l'échantillonneur.
+- {{domxref("WebGL2RenderingContext.getSamplerParameter()")}}
+  - : Retourne les informations de paramètres de l'échantillonneur.
+
+## Objets sync
+
+- {{domxref("WebGL2RenderingContext.fenceSync()")}}
+  - : Crée un nouvel objet {{domxref("WebGLSync")}} et l'insère dans le flux de commandes GL.
+- {{domxref("WebGL2RenderingContext.isSync()")}}
+  - : Retourne `true` si l'objet transmis est un objet {{domxref("WebGLSync")}} valide.
+- {{domxref("WebGL2RenderingContext.deleteSync()")}}
+  - : Supprime l'objet {{domxref("WebGLSync")}} donné.
+- {{domxref("WebGL2RenderingContext.clientWaitSync()")}}
+  - : Bloque et attend qu'un objet {{domxref ("WebGLSync")}} reçoive un signal ou que l'expiration du délai donné soit reçue.
+- {{domxref("WebGL2RenderingContext.waitSync()")}}
+  - : Retourne immédiatement, mais attend le serveur GL jusqu'à ce que l'objet {{domxref("WebGLSync")}} donné reçoive un signal.
+- {{domxref("WebGL2RenderingContext.getSyncParameter()")}}
+  - : Retourne les informations de paramètres d'un objet {{domxref("WebGLSync")}}.
+
+## Retour de transformations
+
+- {{domxref("WebGL2RenderingContext.createTransformFeedback()")}}
+  - : Crée et initialise les objets {{domxref("WebGLTransformFeedback")}}.
+- {{domxref("WebGL2RenderingContext.deleteTransformFeedback()")}}
+  - : Supprime l'objet {{domxref ("WebGLTransformFeedback")}} donné.
+- {{domxref("WebGL2RenderingContext.isTransformFeedback()")}}
+  - : Retourne `true` si l'objet transmis est un objet {{domxref("WebGLTransformFeedback")}} valide.
+- {{domxref("WebGL2RenderingContext.bindTransformFeedback()")}}
+  - : Lie l'objet {{domxref("WebGLTransformFeedback")}} transmis à l'état GL en cours.
+- {{domxref("WebGL2RenderingContext.beginTransformFeedback()")}}
+  - : Démarre une opération de retour de transformations.
+- {{domxref("WebGL2RenderingContext.endTransformFeedback()")}}
+  - : Termine une opération de retour de transformations.
+- {{domxref("WebGL2RenderingContext.transformFeedbackVaryings()")}}
+  - : Indique les valeurs à enregistrer dans les tampons {{domxref("WebGLTransformFeedback")}}.
+- {{domxref("WebGL2RenderingContext.getTransformFeedbackVarying()")}}
+  - : Retourne des informations sur les variables varying à partir des tampons {{domxref("WebGLTransformFeedback")}}.
+- {{domxref("WebGL2RenderingContext.pauseTransformFeedback()")}}
+  - : Suspend une opération de retour de transformations.
+- {{domxref("WebGL2RenderingContext.resumeTransformFeedback()")}}
+  - : Reprend une opération de retour de transformations.
+
+## Objets tampons uniforms
+
+- {{domxref("WebGL2RenderingContext.bindBufferBase()")}}
+  - : Lie le {{domxref("WebGLBuffer")}} donné au point de liaison donné (`cible`) à l'`indice` donné.
+- {{domxref("WebGL2RenderingContext.bindBufferRange()")}}
+  - : Lie une plage du {{domxref("WebGLBuffer")}} donné au point de liaison donné (`cible`) à l'`indice` donné.
+- {{domxref("WebGL2RenderingContext.getUniformIndices()")}}
+  - : Récupère les indices d'un certain nombre d'uniforms dans un {{domxref("WebGLProgram")}}.
+- {{domxref("WebGL2RenderingContext.getActiveUniforms()")}}
+  - : Récupère des informations sur les uniforms actifs dans un {{domxref("WebGLProgram")}}.
+- {{domxref("WebGL2RenderingContext.getUniformBlockIndex()")}}
+  - : Récupère l'indice d'un bloc uniform dans un {{domxref("WebGLProgram")}}.
+- {{domxref("WebGL2RenderingContext.getActiveUniformBlockParameter()")}}
+  - : Récupère des informations d'un bloc uniform actif dans un {{domxref("WebGLProgram")}}.
+- {{domxref("WebGL2RenderingContext.getActiveUniformBlockName()")}}
+  - : Récupère le nom du bloc uniform actif à l'indice donné dans un {{domxref("WebGLProgram")}}.
+- {{domxref("WebGL2RenderingContext.uniformBlockBinding()")}}
+  - : Affecte des points de liaison aux blocs uniforms actifs.
+
+## Objets de tableaux de sommets
+
+Méthodes pour travailler avec les objets {{domxref("WebGLVertexArrayObject")}} (VAO).
+
+- {{domxref("WebGL2RenderingContext.createVertexArray()")}}
+  - : Crée un nouveau {{domxref("WebGLVertexArrayObject")}}.
+- {{domxref("WebGL2RenderingContext.deleteVertexArray()")}}
+  - : Supprime le {{domxref("WebGLVertexArrayObject")}} donné.
+- {{domxref("WebGL2RenderingContext.isVertexArray()")}}
+  - : Retourne `true` si l'objet donné est un {{domxref ("WebGLVertexArrayObject")}} valide.
+- {{domxref("WebGL2RenderingContext.bindVertexArray()")}}
+  - : Lie le {{domxref ("WebGLVertexArrayObject")}} donné au tampon.
+
+## Spécifications
+
+| Spécification                                                                | Statut                   | Commentaire          |
+| ---------------------------------------------------------------------------- | ------------------------ | -------------------- |
+| {{SpecName('WebGL2', "#3.7", "WebGL2RenderingContext")}} | {{Spec2('WebGL2')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.WebGL2RenderingContext")}}
+
+## Voir aussi
+
+- {{domxref("HTMLCanvasElement")}}
+- {{domxref("WebGLRenderingContext")}}
diff --git a/files/fr/web/api/webgl_api/by_example/basic_scissoring/index.md b/files/fr/web/api/webgl_api/by_example/basic_scissoring/index.md
index 2fa7a52da1..b4abf46df9 100644
--- a/files/fr/web/api/webgl_api/by_example/basic_scissoring/index.md
+++ b/files/fr/web/api/webgl_api/by_example/basic_scissoring/index.md
@@ -11,34 +11,36 @@ tags:
 translation_of: Web/API/WebGL_API/By_example/Basic_scissoring
 original_slug: Web/API/WebGL_API/By_example/Appliquer_des_découpes_simples
 ---
-<div>{{IncludeSubnav("/fr/Apprendre")}}</div>
+{{IncludeSubnav("/fr/Apprendre")}}
 
-<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Masque_de_couleur","Apprendre/WebGL/Par_exemple/Tailles_de_canvas_et_WebGL")}}</p>
+{{PreviousNext("Apprendre/WebGL/Par_exemple/Masque_de_couleur","Apprendre/WebGL/Par_exemple/Tailles_de_canvas_et_WebGL")}}
 
-<p>Dans cet article, on illustre comment dessiner des rectangles et des carrés grâce à des opérations de découpe simple (<em>scissoring</em>).</p>
+Dans cet article, on illustre comment dessiner des rectangles et des carrés grâce à des opérations de découpe simple (_scissoring_).
 
-<p>{{EmbedLiveSample("Appliquer_les_changements_sur_le_buffer_lors_de_la_découpe",660,330)}}</p>
+{{EmbedLiveSample("Appliquer_les_changements_sur_le_buffer_lors_de_la_découpe",660,330)}}
 
-<h3 id="Appliquer_les_changements_sur_le_buffer_lors_de_la_découpe">Appliquer les changements sur le <em>buffer</em> lors de la découpe</h3>
+### Appliquer les changements sur le _buffer_ lors de la découpe
 
-<p>Voici une démonstration simple des opérations appliquées sur le contexte de rendu avec la méthode {{domxref("WebGLRenderingContext.scissor","scissor")}}.</p>
+Voici une démonstration simple des opérations appliquées sur le contexte de rendu avec la méthode {{domxref("WebGLRenderingContext.scissor","scissor")}}.
 
-<p>La commande {{domxref("WebGLRenderingContext.clear","clear()")}} permet de dessiner la couleur d'applique (définie à l'aide de {{domxref("WebGLRenderingContext.clearColor","clearColor()")}}) sur tous les pixels du tampon (<em>buffer</em>) de dessin. La commande  {{domxref("WebGLRenderingContext.scissor","scissor()")}} permet quant à elle de définir un masque qui permet de ne modifier que les pixels contenus dans un rectangle donné.</p>
+La commande {{domxref("WebGLRenderingContext.clear","clear()")}} permet de dessiner la couleur d'applique (définie à l'aide de {{domxref("WebGLRenderingContext.clearColor","clearColor()")}}) sur tous les pixels du tampon (_buffer_) de dessin. La commande  {{domxref("WebGLRenderingContext.scissor","scissor()")}} permet quant à elle de définir un masque qui permet de ne modifier que les pixels contenus dans un rectangle donné.
 
-<p>Cet article représente une excellente occasion pour distinguer les <em>pixels</em> des <em>fragments</em>. Un pixel est un élément d'une image (en pratique c'est un point) sur l'écran ou un élément unique du tampon de dessin (l'espace mémoire qui contient les données relatives aux pixels comme les différentes composantes couleur). Un <em>fragment</em> fait référence au pixel manipulé par les processus {{Glossary("WebGL")}}.</p>
+Cet article représente une excellente occasion pour distinguer les _pixels_ des _fragments_. Un pixel est un élément d'une image (en pratique c'est un point) sur l'écran ou un élément unique du tampon de dessin (l'espace mémoire qui contient les données relatives aux pixels comme les différentes composantes couleur). Un _fragment_ fait référence au pixel manipulé par les processus {{Glossary("WebGL")}}.
 
-<p>Cette distinction existe car la couleur d'un fragment (et ses autres caractéristiques comme la profondeur) peut être manipulée et modifiée à plusieurs reprises avant d'être écrite à l'écran. On a déjà vu comment la couleur d'un fragment pouvait être modifiée au cours des opérations graphiques en appliquant un {{domxref("WebGLRenderingContext.colorMask()","masque de couleur", "", 1)}}. Il existe d'autres cas où les fragments sont ignorés (le pixel n'est pass mis à jour) ou d'autres où ils interagissent avec la valeur du pixel existant (afin de fusionner les couleurs pour les éléments transparents qui composent une scène).</p>
+Cette distinction existe car la couleur d'un fragment (et ses autres caractéristiques comme la profondeur) peut être manipulée et modifiée à plusieurs reprises avant d'être écrite à l'écran. On a déjà vu comment la couleur d'un fragment pouvait être modifiée au cours des opérations graphiques en appliquant un {{domxref("WebGLRenderingContext.colorMask()","masque de couleur", "", 1)}}. Il existe d'autres cas où les fragments sont ignorés (le pixel n'est pass mis à jour) ou d'autres où ils interagissent avec la valeur du pixel existant (afin de fusionner les couleurs pour les éléments transparents qui composent une scène).
 
-<p>Ici, on voit une autre distinction entre les fragments et les pixels. La découpe est une étape distincte du processus graphique de  {{Glossary("WebGL")}}/{{Glossary("OpenGL")}} (elle est traitée après l'applique de couleur et avant le masque de couleur). Avant que les pixels réels soient mis à jour, les fragments doivent passer le test de la découpe. S'ils réussissent ce test, ils continuent dans le processus de traitement et les pixels correspondants sont mis à jours. S'ils échouent, le processus rejette les fragments et ils ne sont plus gérés pour les traitements ultérieurs, les pixels correspondants ne seront pas mis à jour. Seuls les fragments appartenant à la zone rectangulaire donnée réussissent le test et seuls les pixels correspondants sont mis à jour. Au final, on obtient un rectangle qui est dessiné à l'écran.</p>
+Ici, on voit une autre distinction entre les fragments et les pixels. La découpe est une étape distincte du processus graphique de  {{Glossary("WebGL")}}/{{Glossary("OpenGL")}} (elle est traitée après l'applique de couleur et avant le masque de couleur). Avant que les pixels réels soient mis à jour, les fragments doivent passer le test de la découpe. S'ils réussissent ce test, ils continuent dans le processus de traitement et les pixels correspondants sont mis à jours. S'ils échouent, le processus rejette les fragments et ils ne sont plus gérés pour les traitements ultérieurs, les pixels correspondants ne seront pas mis à jour. Seuls les fragments appartenant à la zone rectangulaire donnée réussissent le test et seuls les pixels correspondants sont mis à jour. Au final, on obtient un rectangle qui est dessiné à l'écran.
 
-<p>Par défaut, l'étape de découpe est désactivée dans le processus. Ici, on l'active avec la méthode  {{domxref("WebGLRenderingContext.enable","enable()")}} (<code>enable()</code> sera utilisée pour activer de nombreuses autres fonctionnalités liées à WebGL) avec la constante <code>SCISSOR_TEST</code>. Là aussi, on voit l'ordre généralement utilisé pour les commandes {{Glossary("WebGL")}}. Tout d'abord, on modifie l'état de WebGL (ici on active le test de découpe et on crée un masque rectangulaire). Une fois que l'état a bien été modifié, on exécute les commandes de dessin (ici <code>clear()</code>) pour commencer le processus de traitement des fragments.</p>
+Par défaut, l'étape de découpe est désactivée dans le processus. Ici, on l'active avec la méthode  {{domxref("WebGLRenderingContext.enable","enable()")}} (`enable()` sera utilisée pour activer de nombreuses autres fonctionnalités liées à WebGL) avec la constante `SCISSOR_TEST`. Là aussi, on voit l'ordre généralement utilisé pour les commandes {{Glossary("WebGL")}}. Tout d'abord, on modifie l'état de WebGL (ici on active le test de découpe et on crée un masque rectangulaire). Une fois que l'état a bien été modifié, on exécute les commandes de dessin (ici `clear()`) pour commencer le processus de traitement des fragments.
 
-<pre class="brush: html">&lt;p&gt;Le résultat de la découpe.&lt;/p&gt;
-&lt;canvas&gt;Il semblerait que votre navigateur
-    ne supporte pas l'élément canvas.&lt;/canvas&gt;
-</pre>
+```html
+<p>Le résultat de la découpe.</p>
+<canvas>Il semblerait que votre navigateur
+    ne supporte pas l'élément canvas.</canvas>
+```
 
-<pre class="brush: css">body {
+```css
+body {
   text-align : center;
 }
 canvas {
@@ -50,9 +52,10 @@ canvas {
   border : none;
   background-color : black;
 }
-</pre>
+```
 
-<pre class="brush: js">window.addEventListener("load", function setupWebGL (evt) {
+```js
+window.addEventListener("load", function setupWebGL (evt) {
   "use strict"
   window.removeEventListener(evt.type, setupWebGL, false);
   var paragraph = document.querySelector("p");
@@ -84,8 +87,8 @@ canvas {
   gl.clearColor(1.0, 1.0, 0.0, 1.0);
   gl.clear(gl.COLOR_BUFFER_BIT);
 }, false);
-</pre>
+```
 
-<p>Le code source de cet exemple est également disponible sur <a href="https://github.com/idofilin/webgl-by-example/tree/master/basic-scissoring">GitHub</a>.</p>
+Le code source de cet exemple est également disponible sur [GitHub](https://github.com/idofilin/webgl-by-example/tree/master/basic-scissoring).
 
-<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Masque_de_couleur","Apprendre/WebGL/Par_exemple/Tailles_de_canvas_et_WebGL")}}</p>
+{{PreviousNext("Apprendre/WebGL/Par_exemple/Masque_de_couleur","Apprendre/WebGL/Par_exemple/Tailles_de_canvas_et_WebGL")}}
diff --git a/files/fr/web/api/webgl_api/by_example/boilerplate_1/index.md b/files/fr/web/api/webgl_api/by_example/boilerplate_1/index.md
index 406d868fbd..5a007a9434 100644
--- a/files/fr/web/api/webgl_api/by_example/boilerplate_1/index.md
+++ b/files/fr/web/api/webgl_api/by_example/boilerplate_1/index.md
@@ -10,48 +10,46 @@ tags:
 translation_of: Web/API/WebGL_API/By_example/Boilerplate_1
 original_slug: Web/API/WebGL_API/By_example/Modèle_1
 ---
-<div>{{IncludeSubnav("/fr/Apprendre")}}</div>
+{{IncludeSubnav("/fr/Apprendre")}}
 
-<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Tailles_de_canvas_et_WebGL","Apprendre/WebGL/Par_exemple/Créer_une_animation_avec_découpe_et_applique")}}</p>
+{{PreviousNext("Apprendre/WebGL/Par_exemple/Tailles_de_canvas_et_WebGL","Apprendre/WebGL/Par_exemple/Créer_une_animation_avec_découpe_et_applique")}}
 
-<p>Dans cet article, on décrit les fragments de code qui seront réutilisés pour les exemples suivants (où ils seront masqués pour une meilleur lisibilité). Parmi ce code, on définit une fonction JavaScript utilitaire qui permet de simplifier l'initialisation de WebGL.</p>
+Dans cet article, on décrit les fragments de code qui seront réutilisés pour les exemples suivants (où ils seront masqués pour une meilleur lisibilité). Parmi ce code, on définit une fonction JavaScript utilitaire qui permet de simplifier l'initialisation de WebGL.
 
-<p>{{EmbedLiveSample("Socle_pour_l'initialisation_du_contexte_WebGL",660,400)}}</p>
+{{EmbedLiveSample("Socle_pour_l'initialisation_du_contexte_WebGL",660,400)}}
 
-<h2 id="Socle_pour_l'initialisation_du_contexte_WebGL">Socle pour l'initialisation du contexte WebGL</h2>
+## Socle pour l'initialisation du contexte WebGL
 
-<p>Nous avons vu plusieurs fois les mêmes morceaux de {{Glossary("HTML")}}, {{Glossary("CSS")}} et {{Glossary("JavaScript")}}. Nous allons donc les cacher par la suite afin de mieux nous concentrer sur les parties du code qui sont pertinentes pour l'apprentissage de {{Glossary("WebGL")}}.</p>
+Nous avons vu plusieurs fois les mêmes morceaux de {{Glossary("HTML")}}, {{Glossary("CSS")}} et {{Glossary("JavaScript")}}. Nous allons donc les cacher par la suite afin de mieux nous concentrer sur les parties du code qui sont pertinentes pour l'apprentissage de {{Glossary("WebGL")}}.
 
-<p>Plus précisément, le code HTML contiendra</p>
+Plus précisément, le code HTML contiendra
 
-<ul>
- <li>Un élément {{HTMLElement("p")}} qui décrira l'exemple et qui permettra d'afficher des messages d'erreur</li>
- <li>Un élément {{HTMLElement("canvas")}}</li>
- <li>Un bouton (élément {{HTMLElement("button")}})</li>
-</ul>
+- Un élément {{HTMLElement("p")}} qui décrira l'exemple et qui permettra d'afficher des messages d'erreur
+- Un élément {{HTMLElement("canvas")}}
+- Un bouton (élément {{HTMLElement("button")}})
 
-<p>Les règles CSS s'appliqueront aux éléments <code>body</code>, <code>canvas</code> et <code>button</code>. Les éléments supplémentaires pour le code CSS et HTML seront détaillés dans les pages des exemples concernés.</p>
+Les règles CSS s'appliqueront aux éléments `body`, `canvas` et `button`. Les éléments supplémentaires pour le code CSS et HTML seront détaillés dans les pages des exemples concernés.
 
-<p>Dans les exemples suivants, on utilisera la fonction utilitaire JavaScript <code>getRenderingContext</code> pour initialiser {{domxref("WebGLRenderingContext","le contexte de rendu WebGL", "", 1)}}. Grâce aux exemples précédents, vous devriez pouvoir comprendre le rôle de cette fonction. Pour résumer, celle-ci</p>
+Dans les exemples suivants, on utilisera la fonction utilitaire JavaScript `getRenderingContext` pour initialiser {{domxref("WebGLRenderingContext","le contexte de rendu WebGL", "", 1)}}. Grâce aux exemples précédents, vous devriez pouvoir comprendre le rôle de cette fonction. Pour résumer, celle-ci
 
-<ul>
- <li>Obtient le contexte de rendu de la part de l'élément <code>canvas</code></li>
- <li>Initialise le buffer de dessin</li>
- <li>Nettoie le buffer avec <code>clear</code></li>
- <li>Applique le contexte initialisé</li>
-</ul>
+- Obtient le contexte de rendu de la part de l'élément `canvas`
+- Initialise le buffer de dessin
+- Nettoie le buffer avec `clear`
+- Applique le contexte initialisé
 
-<p>S'il y a une erreur, la fonction affiche un message d'erreur et renvoie <code>null</code>.</p>
+S'il y a une erreur, la fonction affiche un message d'erreur et renvoie `null`.
 
-<p>Enfin, tout le code JavaScript est exécuté par une fonction immédiatement appelée (une technique plutôt commune avec JavaScript). La déclaration de la fonction et son invocation seront cachées.</p>
+Enfin, tout le code JavaScript est exécuté par une fonction immédiatement appelée (une technique plutôt commune avec JavaScript). La déclaration de la fonction et son invocation seront cachées.
 
-<pre class="brush: html">&lt;p&gt;[ Un texte qui décrit l'exemple. ]&lt;/p&gt;
-&lt;button&gt;[ Un bouton optionnel pour les interactions. ]&lt;/button&gt;
-&lt;canvas&gt;Il semblerait que votre navigateur ne supporte
-    pas le canevas HTML5.&lt;/canvas&gt;
-</pre>
+```html
+<p>[ Un texte qui décrit l'exemple. ]</p>
+<button>[ Un bouton optionnel pour les interactions. ]</button>
+<canvas>Il semblerait que votre navigateur ne supporte
+    pas le canevas HTML5.</canvas>
+```
 
-<pre class="brush: css">body {
+```css
+body {
   text-align : center;
 }
 canvas {
@@ -69,9 +67,10 @@ button {
   margin : auto;
   padding : 0.6em;
 }
-</pre>
+```
 
-<pre class="brush: js">function getRenderingContext() {
+```js
+function getRenderingContext() {
   var canvas = document.querySelector("canvas");
   canvas.width = canvas.clientWidth;
   canvas.height = canvas.clientHeight;
@@ -91,8 +90,8 @@ button {
   gl.clear(gl.COLOR_BUFFER_BIT);
   return gl;
 }
-</pre>
+```
 
-<p>Le code source de cet exemple est également disponible sur <a href="https://github.com/idofilin/webgl-by-example/tree/master/boilerplate-1">GitHub</a>.</p>
+Le code source de cet exemple est également disponible sur [GitHub](https://github.com/idofilin/webgl-by-example/tree/master/boilerplate-1).
 
-<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Tailles_de_canvas_et_WebGL","Apprendre/WebGL/Par_exemple/Créer_une_animation_avec_découpe_et_applique")}}</p>
+{{PreviousNext("Apprendre/WebGL/Par_exemple/Tailles_de_canvas_et_WebGL","Apprendre/WebGL/Par_exemple/Créer_une_animation_avec_découpe_et_applique")}}
diff --git a/files/fr/web/api/webgl_api/by_example/canvas_size_and_webgl/index.md b/files/fr/web/api/webgl_api/by_example/canvas_size_and_webgl/index.md
index 99c382c0ac..684a36a260 100644
--- a/files/fr/web/api/webgl_api/by_example/canvas_size_and_webgl/index.md
+++ b/files/fr/web/api/webgl_api/by_example/canvas_size_and_webgl/index.md
@@ -10,32 +10,34 @@ tags:
 translation_of: Web/API/WebGL_API/By_example/Canvas_size_and_WebGL
 original_slug: Web/API/WebGL_API/By_example/Tailles_de_canvas_et_WebGL
 ---
-<div>{{IncludeSubnav("/fr/Apprendre")}}</div>
+{{IncludeSubnav("/fr/Apprendre")}}
 
-<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Appliquer_des_découpes_simples","Apprendre/WebGL/Par_exemple/Modèle_1")}}</p>
+{{PreviousNext("Apprendre/WebGL/Par_exemple/Appliquer_des_découpes_simples","Apprendre/WebGL/Par_exemple/Modèle_1")}}
 
-<p>{{EmbedLiveSample("Les_effets_liés_à_la_taille_du_canevas_sur_le_rendu_avec_WebGL",660,180)}}</p>
+{{EmbedLiveSample("Les_effets_liés_à_la_taille_du_canevas_sur_le_rendu_avec_WebGL",660,180)}}
 
-<p>Dans cet exemple, on observe l'effet obtenu quand on définit (ou non) la taille du canevas HTML avec sa taille {{Glossary("CSS")}} (exprimée en pixels CSS), tel qu'il apparaît dans la fenêtre du navigateur.</p>
+Dans cet exemple, on observe l'effet obtenu quand on définit (ou non) la taille du canevas HTML avec sa taille {{Glossary("CSS")}} (exprimée en pixels CSS), tel qu'il apparaît dans la fenêtre du navigateur.
 
-<h3 id="Les_effets_liés_à_la_taille_du_canevas_sur_le_rendu_avec_WebGL">Les effets liés à la taille du canevas sur le rendu avec WebGL</h3>
+### Les effets liés à la taille du canevas sur le rendu avec WebGL
 
-<p>Grâce aux méthodes {{domxref("WebGLRenderingContext.scissor()","scissor()")}} et {{domxref("WebGLRenderingContext.clear()","clear()")}} on peut démontrer que le tampon (<em>buffer</em>) de dessin WebGL est affecté par la taille du canevas (l'élément HTML <code>canvas</code>).</p>
+Grâce aux méthodes {{domxref("WebGLRenderingContext.scissor()","scissor()")}} et {{domxref("WebGLRenderingContext.clear()","clear()")}} on peut démontrer que le tampon (_buffer_) de dessin WebGL est affecté par la taille du canevas (l'élément HTML `canvas`).
 
-<p>La taille du premier canevas est définie avec la taille de l'élément, mis en forme, qui est déterminée par {{Glossary("CSS")}}. Pour cela, on affecte respectivement les valeurs {{domxref("Element.clientWidth","clientWidth")}} and {{domxref("Element.clientHeight","clientHeight")}} aux propriétés {{domxref("HTMLCanvasElement.width","width")}} et {{domxref("HTMLCanvasElement.height","height")}}.</p>
+La taille du premier canevas est définie avec la taille de l'élément, mis en forme, qui est déterminée par {{Glossary("CSS")}}. Pour cela, on affecte respectivement les valeurs {{domxref("Element.clientWidth","clientWidth")}} and {{domxref("Element.clientHeight","clientHeight")}} aux propriétés {{domxref("HTMLCanvasElement.width","width")}} et {{domxref("HTMLCanvasElement.height","height")}}.
 
-<p>Pour le deuxième canevas, on n'applique pas ce traitement, c'est donc les dimensions internes du canevas : {{domxref("HTMLCanvasElement.width","width")}} et {{domxref("HTMLCanvasElement.height","height")}} qui sont prises en compte. Celles-ci sont différentes des dimensions de l'élément <code>canvas</code> affiché dans le fenêtre du navigateur.</p>
+Pour le deuxième canevas, on n'applique pas ce traitement, c'est donc les dimensions internes du canevas : {{domxref("HTMLCanvasElement.width","width")}} et {{domxref("HTMLCanvasElement.height","height")}} qui sont prises en compte. Celles-ci sont différentes des dimensions de l'élément `canvas` affiché dans le fenêtre du navigateur.
 
-<p>L'effet devient visible quand on utilise les méthodes {{domxref("WebGLRenderingContext.scissor()","scissor()")}} et {{domxref("WebGLRenderingContext.clear()","clear()")}} pour dessiner un carré au centre du canevas en définissant sa position et sa taille en pixels. Dans le premier canevas, on obtient bien le bon résultat et dans le deuxième, on a la mauvaise forme, la mauvaise taille et la mauvaise position.</p>
+L'effet devient visible quand on utilise les méthodes {{domxref("WebGLRenderingContext.scissor()","scissor()")}} et {{domxref("WebGLRenderingContext.clear()","clear()")}} pour dessiner un carré au centre du canevas en définissant sa position et sa taille en pixels. Dans le premier canevas, on obtient bien le bon résultat et dans le deuxième, on a la mauvaise forme, la mauvaise taille et la mauvaise position.
 
-<pre class="brush: html">&lt;p&gt;On compare les deux canevas.&lt;/p&gt;
-&lt;canvas&gt;Votre navigateur ne semble pas
-    supporter l'élément HTML5 canvas.&lt;/canvas&gt;
-&lt;canvas&gt;Votre navigateur ne semble pas
-    supporter l'élément HTML5 canvas.&lt;/canvas&gt;
-</pre>
+```html
+<p>On compare les deux canevas.</p>
+<canvas>Votre navigateur ne semble pas
+    supporter l'élément HTML5 canvas.</canvas>
+<canvas>Votre navigateur ne semble pas
+    supporter l'élément HTML5 canvas.</canvas>
+```
 
-<pre class="brush: css">body {
+```css
+body {
   text-align : center;
 }
 canvas {
@@ -46,9 +48,10 @@ canvas {
   border : none;
   background-color : black;
 }
-</pre>
+```
 
-<pre class="brush: js">window.addEventListener("load", function() {
+```js
+window.addEventListener("load", function() {
   "use strict"
   var firstCanvas = document.getElementsByTagName("canvas")[0],
     secondCanvas = document.getElementsByTagName("canvas")[1];
@@ -76,8 +79,8 @@ canvas {
     gl.clear(gl.COLOR_BUFFER_BIT);
   });
 }, false);
-</pre>
+```
 
-<p>Le code source de cet exemple est également disponible sur <a href="https://github.com/idofilin/webgl-by-example/tree/master/canvas-size-and-webgl">GitHub</a>.</p>
+Le code source de cet exemple est également disponible sur [GitHub](https://github.com/idofilin/webgl-by-example/tree/master/canvas-size-and-webgl).
 
-<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Appliquer_des_découpes_simples","Apprendre/WebGL/Par_exemple/Modèle_1")}}</p>
+{{PreviousNext("Apprendre/WebGL/Par_exemple/Appliquer_des_découpes_simples","Apprendre/WebGL/Par_exemple/Modèle_1")}}
diff --git a/files/fr/web/api/webgl_api/by_example/clearing_by_clicking/index.md b/files/fr/web/api/webgl_api/by_example/clearing_by_clicking/index.md
index 91c858dcec..82f6d06ef7 100644
--- a/files/fr/web/api/webgl_api/by_example/clearing_by_clicking/index.md
+++ b/files/fr/web/api/webgl_api/by_example/clearing_by_clicking/index.md
@@ -11,30 +11,32 @@ tags:
 translation_of: Web/API/WebGL_API/By_example/Clearing_by_clicking
 original_slug: Web/API/WebGL_API/By_example/Appliquer_une_couleur_à_la_souris
 ---
-<div>{{IncludeSubnav("/fr/Apprendre")}}</div>
+{{IncludeSubnav("/fr/Apprendre")}}
 
-<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Appliquer_des_couleurs","Apprendre/WebGL/Par_exemple/Cr%C3%A9er_une_animation_color%C3%A9e")}}</p>
+{{PreviousNext("Apprendre/WebGL/Par_exemple/Appliquer_des_couleurs","Apprendre/WebGL/Par_exemple/Cr%C3%A9er_une_animation_color%C3%A9e")}}
 
-<p>Dans cet article, on voit comment combiner les interactions de l'utilisateur et les opérations graphiques. Plus précisément, dans cet exemple, chaque clic de l'utilisateur déclenchera l'application d'une couleur aléatoire dans le contexte de rendu.</p>
+Dans cet article, on voit comment combiner les interactions de l'utilisateur et les opérations graphiques. Plus précisément, dans cet exemple, chaque clic de l'utilisateur déclenchera l'application d'une couleur aléatoire dans le contexte de rendu.
 
-<p>{{EmbedLiveSample("Appliquer_des_couleurs_aléatoires_dans_le_contexte_de_rendu",660,410)}}</p>
+{{EmbedLiveSample("Appliquer_des_couleurs_aléatoires_dans_le_contexte_de_rendu",660,410)}}
 
-<h3 id="Appliquer_des_couleurs_aléatoires_dans_le_contexte_de_rendu">Appliquer des couleurs aléatoires dans le contexte de rendu</h3>
+### Appliquer des couleurs aléatoires dans le contexte de rendu
 
-<p>Cet exemple illustre simplement comment associer WebGL aux interactions utilisateur. Chaque fois que l'utilisateur cliquera sur le canevas ou sur le bouton, une couleur aléatoire sera appliquée sur le contexte de rendu.</p>
+Cet exemple illustre simplement comment associer WebGL aux interactions utilisateur. Chaque fois que l'utilisateur cliquera sur le canevas ou sur le bouton, une couleur aléatoire sera appliquée sur le contexte de rendu.
 
-<p>Ici, on montre comment on place les appels aux fonctions WebGL dans la fonction qui gère les événements :</p>
+Ici, on montre comment on place les appels aux fonctions WebGL dans la fonction qui gère les événements :
 
-<pre class="brush: html">&lt;p&gt;Un programme WebGL très simple qui affiche des couleurs
-    suite aux interactions utilisateur.&lt;/p&gt;
-&lt;p&gt;Vous pouvez cliquer sur le canevas ou sur le bouton pour
-    modifier la couleur.&lt;/p&gt;
-&lt;canvas id="canvas-view"&gt;Il semblerait que votre navigateur
-    ne supporte pas l'élément canvas.&lt;/canvas&gt;
-&lt;button id="color-switcher"&gt;Cliquez ici pour changer la couleur&lt;/button&gt;
-</pre>
+```html
+<p>Un programme WebGL très simple qui affiche des couleurs
+    suite aux interactions utilisateur.</p>
+<p>Vous pouvez cliquer sur le canevas ou sur le bouton pour
+    modifier la couleur.</p>
+<canvas id="canvas-view">Il semblerait que votre navigateur
+    ne supporte pas l'élément canvas.</canvas>
+<button id="color-switcher">Cliquez ici pour changer la couleur</button>
+```
 
-<pre class="brush: css">body {
+```css
+body {
   text-align : center;
 }
 button {
@@ -52,9 +54,10 @@ canvas {
   border : none;
   background-color : black;
 }
-</pre>
+```
 
-<pre class="brush: js">// On exécute tout dans le gestionnaire d'événement
+```js
+// On exécute tout dans le gestionnaire d'événement
 // correspondant au chargement de la fenêtre. De cette
 // façon, le DOM est complètement chargé et mis en forme
 // avant de le manipuler et d'encombrer la portée globale.
@@ -116,8 +119,8 @@ window.addEventListener("load", function setupWebGL (evt) {
   }
 
 }, false);
-</pre>
+```
 
-<p>Le code source de cet exemple est également disponible sur <a href="https://github.com/idofilin/webgl-by-example/tree/master/clearing-by-clicking">GitHub</a>.</p>
+Le code source de cet exemple est également disponible sur [GitHub](https://github.com/idofilin/webgl-by-example/tree/master/clearing-by-clicking).
 
-<div>{{PreviousNext("Apprendre/WebGL/Par_exemple/Appliquer_des_couleurs","Apprendre/WebGL/Par_exemple/Cr%C3%A9er_une_animation_color%C3%A9e")}}</div>
+{{PreviousNext("Apprendre/WebGL/Par_exemple/Appliquer_des_couleurs","Apprendre/WebGL/Par_exemple/Cr%C3%A9er_une_animation_color%C3%A9e")}}
diff --git a/files/fr/web/api/webgl_api/by_example/clearing_with_colors/index.md b/files/fr/web/api/webgl_api/by_example/clearing_with_colors/index.md
index fd92c8ce1c..b185bbd89d 100644
--- a/files/fr/web/api/webgl_api/by_example/clearing_with_colors/index.md
+++ b/files/fr/web/api/webgl_api/by_example/clearing_with_colors/index.md
@@ -11,32 +11,34 @@ tags:
 translation_of: Web/API/WebGL_API/By_example/Clearing_with_colors
 original_slug: Web/API/WebGL_API/By_example/Appliquer_des_couleurs
 ---
-<div>{{IncludeSubnav("/fr/Apprendre")}}</div>
+{{IncludeSubnav("/fr/Apprendre")}}
 
-<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Détecter_WebGL","Apprendre/WebGL/Par_exemple/Appliquer_une_couleur_%C3%A0_la_souris")}}</p>
+{{PreviousNext("Apprendre/WebGL/Par_exemple/Détecter_WebGL","Apprendre/WebGL/Par_exemple/Appliquer_une_couleur_%C3%A0_la_souris")}}
 
-<p>Dans cet article, on voit comment appliquer une couleur unie dans le contexte de rendu.</p>
+Dans cet article, on voit comment appliquer une couleur unie dans le contexte de rendu.
 
-<p>{{EmbedLiveSample("Appliquer_une_couleur_unie_dans_le_contexte_WebGL",660,300)}}</p>
+{{EmbedLiveSample("Appliquer_une_couleur_unie_dans_le_contexte_WebGL",660,300)}}
 
-<h3 id="Appliquer_une_couleur_unie_dans_le_contexte_WebGL">Appliquer une couleur unie dans le contexte WebGL</h3>
+### Appliquer une couleur unie dans le contexte WebGL
 
-<p>Voici l'application la plus simple de {{Glossary("WebGL")}} : appliquer un vert uni dans le {{domxref("WebGLRenderingContext","contexte de rendu")}}. On notera que la feuille de style {{Glossary("CSS")}} définit l'arrière-plan comme étant noir. Ainsi, quand le canevas s'affiche en vert, on sait que {{Glossary("WebGL")}} a fonctionné comme il fallait.</p>
+Voici l'application la plus simple de {{Glossary("WebGL")}} : appliquer un vert uni dans le {{domxref("WebGLRenderingContext","contexte de rendu")}}. On notera que la feuille de style {{Glossary("CSS")}} définit l'arrière-plan comme étant noir. Ainsi, quand le canevas s'affiche en vert, on sait que {{Glossary("WebGL")}} a fonctionné comme il fallait.
 
-<p>Par ailleurs, vous pouvez remarquer que, pour appliquer une couleur unie sur le tampon (<em>buffer</em>) de dessin, on utilise deux étapes. Tout d'abord, on applique la couleur verte grâce à la méthode {{domxref("WebGLRenderingContext.clearColor()","clearColor()")}}. Cette opération ne modifie que l'état interne de {{Glossary("WebGL")}}, rien n'est peint/affiché pour le moment. Ensuite, on dessine « réellement » avec la méthode {{domxref("WebGLRenderingContext.clear()","clear()")}}. C'est la méthode classique pour dessiner avec WebGL. Il y a seulement quelques méthodes qui « dessinent » (dont <code>clear()</code>), toutes les autres méthodes permettent d'obtenir ou de modifier les variables liées aux états de WebGL (dont la couleur à appliquer).</p>
+Par ailleurs, vous pouvez remarquer que, pour appliquer une couleur unie sur le tampon (_buffer_) de dessin, on utilise deux étapes. Tout d'abord, on applique la couleur verte grâce à la méthode {{domxref("WebGLRenderingContext.clearColor()","clearColor()")}}. Cette opération ne modifie que l'état interne de {{Glossary("WebGL")}}, rien n'est peint/affiché pour le moment. Ensuite, on dessine « réellement » avec la méthode {{domxref("WebGLRenderingContext.clear()","clear()")}}. C'est la méthode classique pour dessiner avec WebGL. Il y a seulement quelques méthodes qui « dessinent » (dont `clear()`), toutes les autres méthodes permettent d'obtenir ou de modifier les variables liées aux états de WebGL (dont la couleur à appliquer).
 
-<p>Il existe de nombreuses options pour modifier les états {{Glossary("WebGL")}}. La couleur à appliquer en est une parmi d'autres.{{Glossary("WebGL")}}/{{Glossary("OpenGL")}} est souvent qualifié d'automate à états. En fait, lorsque vous manipulez ces variables internes, ces « interrupteurs », vous modifiez l'état interne de WebGL, qui modifie à son tour la façon dont la sortie est retranscrite (dans cet exemple, cela correspond à l'étape où les pixels sont passés en vert).</p>
+Il existe de nombreuses options pour modifier les états {{Glossary("WebGL")}}. La couleur à appliquer en est une parmi d'autres.{{Glossary("WebGL")}}/{{Glossary("OpenGL")}} est souvent qualifié d'automate à états. En fait, lorsque vous manipulez ces variables internes, ces « interrupteurs », vous modifiez l'état interne de WebGL, qui modifie à son tour la façon dont la sortie est retranscrite (dans cet exemple, cela correspond à l'étape où les pixels sont passés en vert).
 
-<p>Enfin, vous pouvez voir que les couleurs manipulées en WebGL sont décrites avec le format {{Glossary("RGBA")}}. Ce format décrit quatre composantes numériques pour les intensités respectives des tons rouge (R), vert (<em>green</em> G), bleu (B) et alpha (qui correspond à l'opacité). C'est pour ça que <code>clearColor()</code> prend quatre arguments.</p>
+Enfin, vous pouvez voir que les couleurs manipulées en WebGL sont décrites avec le format {{Glossary("RGBA")}}. Ce format décrit quatre composantes numériques pour les intensités respectives des tons rouge (R), vert (_green_ G), bleu (B) et alpha (qui correspond à l'opacité). C'est pour ça que `clearColor()` prend quatre arguments.
 
-<pre class="brush: html">&lt;p&gt;Un programme WebGL très simple qui affiche une couleur.&lt;/p&gt;
-&lt;!-- Le texte d'un élément canvas est affiché uniquement
-    si canvas n'est pas supporté. --&gt;
-&lt;canvas&gt;Il semblerait que votre navigateur ne supporte pas
-    le canevas HTML5&lt;/canvas&gt;
-</pre>
+```html
+<p>Un programme WebGL très simple qui affiche une couleur.</p>
+<!-- Le texte d'un élément canvas est affiché uniquement
+    si canvas n'est pas supporté. -->
+<canvas>Il semblerait que votre navigateur ne supporte pas
+    le canevas HTML5</canvas>
+```
 
-<pre class="brush: css">body {
+```css
+body {
   text-align : center;
 }
 canvas {
@@ -48,9 +50,10 @@ canvas {
   border : none;
   background-color : black;
 }
-</pre>
+```
 
-<pre class="brush: js">// On exécute tout dans le gestionnaire d'événement
+```js
+// On exécute tout dans le gestionnaire d'événement
 // correspondant au chargement de la fenêtre. De cette
 // façon, le DOM est complètement chargé et mis en forme
 // avant de le manipuler et d'encombrer la portée globale.
@@ -94,8 +97,8 @@ window.addEventListener("load", function setupWebGL (evt) {
   gl.clear(gl.COLOR_BUFFER_BIT);
 
 }, false);
-</pre>
+```
 
-<p>Le code source de cet exemple est également disponible sur <a href="https://github.com/idofilin/webgl-by-example/tree/master/clearing-with-colors">GitHub</a>.</p>
+Le code source de cet exemple est également disponible sur [GitHub](https://github.com/idofilin/webgl-by-example/tree/master/clearing-with-colors).
 
-<div>{{PreviousNext("Apprendre/WebGL/Par_exemple/Détecter_WebGL","Apprendre/WebGL/Par_exemple/Appliquer_une_couleur_%C3%A0_la_souris")}}</div>
+{{PreviousNext("Apprendre/WebGL/Par_exemple/Détecter_WebGL","Apprendre/WebGL/Par_exemple/Appliquer_une_couleur_%C3%A0_la_souris")}}
diff --git a/files/fr/web/api/webgl_api/by_example/color_masking/index.md b/files/fr/web/api/webgl_api/by_example/color_masking/index.md
index f5ef6779ef..61afaba6f3 100644
--- a/files/fr/web/api/webgl_api/by_example/color_masking/index.md
+++ b/files/fr/web/api/webgl_api/by_example/color_masking/index.md
@@ -11,35 +11,37 @@ tags:
 translation_of: Web/API/WebGL_API/By_example/Color_masking
 original_slug: Web/API/WebGL_API/By_example/Masque_de_couleur
 ---
-<div>{{IncludeSubnav("/fr/Apprendre")}}</div>
+{{IncludeSubnav("/fr/Apprendre")}}
 
-<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Créer_une_animation_colorée","Apprendre/WebGL/Par_exemple/Appliquer_des_découpes_simples")}}</p>
+{{PreviousNext("Apprendre/WebGL/Par_exemple/Créer_une_animation_colorée","Apprendre/WebGL/Par_exemple/Appliquer_des_découpes_simples")}}
 
-<p>Dans cet article, on modifie des couleurs aléatoires grâce à un masque de couleur. Cela permet de limiter la plage de couleurs affichées à certains tons.</p>
+Dans cet article, on modifie des couleurs aléatoires grâce à un masque de couleur. Cela permet de limiter la plage de couleurs affichées à certains tons.
 
-<p>{{EmbedLiveSample("color-masking-source",660,425)}}</p>
+{{EmbedLiveSample("color-masking-source",660,425)}}
 
-<h3 id="Appliquer_un_masque_sur_des_couleurs_aléatoires">Appliquer un masque sur des couleurs aléatoires</h3>
+### Appliquer un masque sur des couleurs aléatoires
 
-<p>Dans cet exemple, on modifie les couleurs aléatoires utilisées pour une animation grâce à l'opération {{domxref("WebGLRenderingContext.colorMask()","colorMask()")}}. D'une certaine façon, cette opération est analogue à la modification qu'on obtient lorsqu'on regarde à travers du verre teinté ou derrière une filtre coloré. Ainsi, en masquant les canaux vert et bleu, on ne pourra recevoir que les composantes rouges des pixels et cela donnera l'impression de regarder à travers du verre teinté de rouge.</p>
+Dans cet exemple, on modifie les couleurs aléatoires utilisées pour une animation grâce à l'opération {{domxref("WebGLRenderingContext.colorMask()","colorMask()")}}. D'une certaine façon, cette opération est analogue à la modification qu'on obtient lorsqu'on regarde à travers du verre teinté ou derrière une filtre coloré. Ainsi, en masquant les canaux vert et bleu, on ne pourra recevoir que les composantes rouges des pixels et cela donnera l'impression de regarder à travers du verre teinté de rouge.
 
-<p>Les masques de couleur nous permettent d'illustrer quelques concepts de base <a href="https://en.wikipedia.org/wiki/Color_theory">de la théorie des couleurs</a>. En masquant certaines composantes, on rapproche les couleurs affichées de la couleur complémentaire. Ainsi, en masquant le bleu et le rouge, on obtiendrait des tons de vert. En masquant uniquement le canal bleu, on obtiendra des tons de jaune (dont orange, marron, olive, etc.) qui est la couleur complémentaire du bleu. De la même façon, en masquant uniquement le vert, on obtiendrait des tons magenta (pourpres, rouges, etc.) et en masquant uniquement le rouge, on obtiendrait des tons cyan.</p>
+Les masques de couleur nous permettent d'illustrer quelques concepts de base [de la théorie des couleurs](https://en.wikipedia.org/wiki/Color_theory). En masquant certaines composantes, on rapproche les couleurs affichées de la couleur complémentaire. Ainsi, en masquant le bleu et le rouge, on obtiendrait des tons de vert. En masquant uniquement le canal bleu, on obtiendra des tons de jaune (dont orange, marron, olive, etc.) qui est la couleur complémentaire du bleu. De la même façon, en masquant uniquement le vert, on obtiendrait des tons magenta (pourpres, rouges, etc.) et en masquant uniquement le rouge, on obtiendrait des tons cyan.
 
-<p>On voit que les appels à <code>colorMask()</code> sont uniquement déclenchés lorsque l'utilisateur clique sur l'un des boutons. En revanche, le rendu est fait chaque seconde grâce au timer. L'état du masque de couleur lié à {{Glossary("WebGL")}} est conservé et il n'est donc pas nécessaire d'appeler <code>colorMask()</code> à chaque frame pour régler le masque. Cela illustre la manière dont WebGL est un automate a état. Dans un premier temps, on initialise l'état de WebGL et ensuite, à chaque frame, on déclenche uniquement les opérations de dessin.</p>
+On voit que les appels à `colorMask()` sont uniquement déclenchés lorsque l'utilisateur clique sur l'un des boutons. En revanche, le rendu est fait chaque seconde grâce au timer. L'état du masque de couleur lié à {{Glossary("WebGL")}} est conservé et il n'est donc pas nécessaire d'appeler `colorMask()` à chaque frame pour régler le masque. Cela illustre la manière dont WebGL est un automate a état. Dans un premier temps, on initialise l'état de WebGL et ensuite, à chaque frame, on déclenche uniquement les opérations de dessin.
 
-<p>Les masques de couleurs permettent d'avoir un contrôle précis pour mettre à jour les pixels à l'écran. En limitant les canaux de couleur qui sont utilisés à chaque commande de dessin, on peut utiliser chaque canal à bon escient et on peut par exemple stocler une image en ton de gris.</p>
+Les masques de couleurs permettent d'avoir un contrôle précis pour mettre à jour les pixels à l'écran. En limitant les canaux de couleur qui sont utilisés à chaque commande de dessin, on peut utiliser chaque canal à bon escient et on peut par exemple stocler une image en ton de gris.
 
-<p>Enfin, l'application d'un masque de couleur nous montre que {{Glossary("WebGL")}} n'est pas seulement un automate à états mais aussi un <em>processus</em> graphique. Cela signifie que les opérations graphiques liées à WebGL sont effectuées dans un ordre donné et que le résultat de chaque opération sert de point d'entrée pour l'opération suivante. Ainsi, l'opération d'applique définit la valeur pour chaque pixel. L'application du masque se produit plus tard dans le processus et modifie la couleur. Ainsi, le résultat final affiché à l'écran est teinté par la couleur du masque.</p>
+Enfin, l'application d'un masque de couleur nous montre que {{Glossary("WebGL")}} n'est pas seulement un automate à états mais aussi un _processus_ graphique. Cela signifie que les opérations graphiques liées à WebGL sont effectuées dans un ordre donné et que le résultat de chaque opération sert de point d'entrée pour l'opération suivante. Ainsi, l'opération d'applique définit la valeur pour chaque pixel. L'application du masque se produit plus tard dans le processus et modifie la couleur. Ainsi, le résultat final affiché à l'écran est teinté par la couleur du masque.
 
-<pre class="brush: html">&lt;p&gt;Tinting the displayed colors with color masking.&lt;/p&gt;
-&lt;canvas&gt;Il semblerait que votre navigateur ne supporte pas
-    l'élément HTML5 canvas.&lt;/canvas&gt;
-&lt;button id="red-toggle"&gt;On&lt;/button&gt;
-&lt;button id="green-toggle"&gt;On&lt;/button&gt;
-&lt;button id="blue-toggle"&gt;On&lt;/button&gt;
-</pre>
+```html
+<p>Tinting the displayed colors with color masking.</p>
+<canvas>Il semblerait que votre navigateur ne supporte pas
+    l'élément HTML5 canvas.</canvas>
+<button id="red-toggle">On</button>
+<button id="green-toggle">On</button>
+<button id="blue-toggle">On</button>
+```
 
-<pre class="brush: css">body {
+```css
+body {
   text-align : center;
 }
 canvas {
@@ -69,9 +71,10 @@ button {
 #blue-toggle {
   background-color : blue;
 }
-</pre>
+```
 
-<pre class="brush: js">window.addEventListener("load", function setupAnimation (evt) {
+```js
+window.addEventListener("load", function setupAnimation (evt) {
   "use strict"
   window.removeEventListener(evt.type, setupAnimation, false);
 
@@ -100,8 +103,8 @@ button {
 
   function setColorMask(evt) {
     var index =
-      evt.target === greentoggle &amp;&amp; 1
-      || evt.target === bluetoggle &amp;&amp; 2
+      evt.target === greentoggle && 1
+      || evt.target === bluetoggle && 2
       || 0;
     mask[index] = !mask[index];
     if (mask[index] === true)
@@ -122,8 +125,8 @@ button {
     return [Math.random(), Math.random(), Math.random()];
   }
 }, false);
-</pre>
+```
 
-<p>Le code source de cet exemple est également disponible sur <a href="https://github.com/idofilin/webgl-by-example/tree/master/color-masking">GitHub</a>.</p>
+Le code source de cet exemple est également disponible sur [GitHub](https://github.com/idofilin/webgl-by-example/tree/master/color-masking).
 
-<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Créer_une_animation_colorée","Apprendre/WebGL/Par_exemple/Appliquer_des_découpes_simples")}}</p>
+{{PreviousNext("Apprendre/WebGL/Par_exemple/Créer_une_animation_colorée","Apprendre/WebGL/Par_exemple/Appliquer_des_découpes_simples")}}
diff --git a/files/fr/web/api/webgl_api/by_example/detect_webgl/index.md b/files/fr/web/api/webgl_api/by_example/detect_webgl/index.md
index b3083ba274..bfd0e34c24 100644
--- a/files/fr/web/api/webgl_api/by_example/detect_webgl/index.md
+++ b/files/fr/web/api/webgl_api/by_example/detect_webgl/index.md
@@ -11,25 +11,25 @@ tags:
 translation_of: Web/API/WebGL_API/By_example/Detect_WebGL
 original_slug: Web/API/WebGL_API/By_example/Détecter_WebGL
 ---
-<div>{{IncludeSubnav("/fr/Apprendre")}}</div>
+{{IncludeSubnav("/fr/Apprendre")}}{{PreviousNext("Apprendre/WebGL/Par_exemple","Apprendre/WebGL/Par_exemple/Appliquer_des_couleurs")}}
 
-<div>{{PreviousNext("Apprendre/WebGL/Par_exemple","Apprendre/WebGL/Par_exemple/Appliquer_des_couleurs")}}</div>
+Dans cet exemple, on voit comment détecter un contexte de rendu {{Glossary("WebGL")}} et afficher le résultat à l'utilisateur.
 
-<p>Dans cet exemple, on voit comment détecter un contexte de rendu {{Glossary("WebGL")}} et afficher le résultat à l'utilisateur.</p>
+{{EmbedLiveSample("Détecter_le_support_WebGL",660,150)}}
 
-<p>{{EmbedLiveSample("Détecter_le_support_WebGL",660,150)}}</p>
+### Détecter le support WebGL
 
-<h3 id="Détecter_le_support_WebGL">Détecter le support WebGL</h3>
+Dans ce premier exemple, on vérifie si le navigateur prend en charge {{Glossary("WebGL")}}. Pour cela, on essaye d'obtenir le {{domxref("WebGLRenderingContext","contexte de rendu WebGL","",1)}} à partir d'un élément {{domxref("HTMLCanvasElement","canvas")}}. Le {{domxref("WebGLRenderingContext","contexte de rendu WebGL", "", 1)}} est une interface qui permet de connaître et de modifier l'état du moteur graphique WebGL, d'envoyer des données à WebGL et d'exécuter des commandes de dessin.
 
-<p>Dans ce premier exemple, on vérifie si le navigateur prend en charge {{Glossary("WebGL")}}. Pour cela, on essaye d'obtenir le {{domxref("WebGLRenderingContext","contexte de rendu WebGL","",1)}} à partir d'un élément {{domxref("HTMLCanvasElement","canvas")}}. Le {{domxref("WebGLRenderingContext","contexte de rendu WebGL", "", 1)}} est une interface qui permet de connaître et de modifier l'état du moteur graphique WebGL, d'envoyer des données à WebGL et d'exécuter des commandes de dessin.</p>
+La gestion d'une machine graphique au sein d'une seule interface n'est pas propre à {{Glossary("WebGL")}}. Les autres {̣{Glossary("API")}} graphiques comme {{domxref("CanvasRenderingContext2D","le contexte de rendu 2D du canevas", "", 1)}}. Cependant, les propriétés et variables qui peuvent être manipulées changent d'une API à l'autre.
 
-<p>La gestion d'une machine graphique au sein d'une seule interface n'est pas propre à {{Glossary("WebGL")}}. Les autres {̣{Glossary("API")}} graphiques comme {{domxref("CanvasRenderingContext2D","le contexte de rendu 2D du canevas", "", 1)}}. Cependant, les propriétés et variables qui peuvent être manipulées changent d'une API à l'autre.</p>
+```html
+<p>[ On affichera ici le résultat de la détection du support WebGL ]</p>
+<button>Cliquez ici pour détecter WebGLRenderingContext</button>
+```
 
-<pre class="brush: html">&lt;p&gt;[ On affichera ici le résultat de la détection du support WebGL ]&lt;/p&gt;
-&lt;button&gt;Cliquez ici pour détecter WebGLRenderingContext&lt;/button&gt;
-</pre>
-
-<pre class="brush: css">body {
+```css
+body {
   text-align : center;
 }
 button {
@@ -38,9 +38,10 @@ button {
   margin : auto;
   padding : 0.6em;
 }
-</pre>
+```
 
-<pre class="brush: js">// On exécute tout dans le gestionnaire d'événement
+```js
+// On exécute tout dans le gestionnaire d'événement
 // correspondant au chargement de la fenêtre. De cette
 // façon, le DOM est complètement chargé et mis en forme
 // avant de le manipuler.
@@ -64,7 +65,7 @@ window.addEventListener("load", function() {
       || canvas.getContext("experimental-webgl");
 
     // On affiche le résultat.
-    if (gl &amp;&amp; gl instanceof WebGLRenderingContext) {
+    if (gl && gl instanceof WebGLRenderingContext) {
       paragraph.innerHTML =
         "Félicitations, votre navigateur supporte WebGL.";
     } else {
@@ -73,8 +74,8 @@ window.addEventListener("load", function() {
     }
   }
 }, false);
-</pre>
+```
 
-<p>Le code source de cet exemple est également disponible sur <a href="https://github.com/idofilin/webgl-by-example/tree/master/detect-webgl">GitHub</a>.</p>
+Le code source de cet exemple est également disponible sur [GitHub](https://github.com/idofilin/webgl-by-example/tree/master/detect-webgl).
 
-<div>{{PreviousNext("Apprendre/WebGL/Par_exemple","Apprendre/WebGL/Par_exemple/Appliquer_des_couleurs")}}</div>
+{{PreviousNext("Apprendre/WebGL/Par_exemple","Apprendre/WebGL/Par_exemple/Appliquer_des_couleurs")}}
diff --git a/files/fr/web/api/webgl_api/by_example/hello_glsl/index.md b/files/fr/web/api/webgl_api/by_example/hello_glsl/index.md
index c30e81f2f3..4ebd39cd35 100644
--- a/files/fr/web/api/webgl_api/by_example/hello_glsl/index.md
+++ b/files/fr/web/api/webgl_api/by_example/hello_glsl/index.md
@@ -10,28 +10,28 @@ tags:
   - WebGL
 translation_of: Web/API/WebGL_API/By_example/Hello_GLSL
 ---
-<div>{{IncludeSubnav("/fr/Apprendre")}}</div>
+{{IncludeSubnav("/fr/Apprendre")}}
 
-<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Une_pluie_de_rectangle","Apprendre/WebGL/Par_exemple/Introduction_aux_attributs_vertex")}}</p>
+{{PreviousNext("Apprendre/WebGL/Par_exemple/Une_pluie_de_rectangle","Apprendre/WebGL/Par_exemple/Introduction_aux_attributs_vertex")}}
 
-<p>Dans cet article, on décrit un programme de manipulation de <em>shaders</em> qui dessine un carré de couleur.</p>
+Dans cet article, on décrit un programme de manipulation de _shaders_ qui dessine un carré de couleur.
 
-<div class="note">
-<p><strong>Note :</strong> Cet exemple devrait fonctionner pour l'ensemble des navigateurs récents. Cependant, pour les versions anciennes ou mobiles, il peut y avoir des dysfonctionnements. Si le canevas reste blanc, vous pouvez vérifier le résultat avec l'exemple suivant qui dessine exactement la même chose. Assurez-vous de bien lire les explications et le code présent sur cette page avant de passer à la suivante.</p>
-</div>
+> **Note :** Cet exemple devrait fonctionner pour l'ensemble des navigateurs récents. Cependant, pour les versions anciennes ou mobiles, il peut y avoir des dysfonctionnements. Si le canevas reste blanc, vous pouvez vérifier le résultat avec l'exemple suivant qui dessine exactement la même chose. Assurez-vous de bien lire les explications et le code présent sur cette page avant de passer à la suivante.
 
-<p>{{EmbedLiveSample("Hello_World_en_GLSL",660,425)}}</p>
+{{EmbedLiveSample("Hello_World_en_GLSL",660,425)}}
 
-<h3 id="Hello_World_en_GLSL"><em>Hello World</em> en GLSL</h3>
+### _Hello World_ en GLSL
 
-<p>Voici un exemple de premier programme qu'on peut écrire pour manipuler des <em>shaders</em>.</p>
+Voici un exemple de premier programme qu'on peut écrire pour manipuler des _shaders_.
 
-<pre class="brush: html hidden">&lt;p&gt;Hello World! Hello GLSL!&lt;/p&gt;
-&lt;canvas&gt;Votre navigateur semble ne pas
-    supporter l'élément HTML5.&lt;/canvas&gt;
-</pre>
+```html hidden
+<p>Hello World! Hello GLSL!</p>
+<canvas>Votre navigateur semble ne pas
+    supporter l'élément HTML5.</canvas>
+```
 
-<pre class="brush: css hidden">body {
+```css hidden
+body {
   text-align : center;
 }
 canvas {
@@ -49,29 +49,33 @@ button {
   margin : auto;
   padding : 0.6em;
 }
-</pre>
+```
 
-<pre class="brush: html">&lt;script type="x-shader/x-vertex" id="vertex-shader"&gt;
+```html
+<script type="x-shader/x-vertex" id="vertex-shader">
 #version 100
 void main() {
   gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
   gl_PointSize = 64.0;
 }
-&lt;/script&gt;
-</pre>
+</script>
+```
 
-<pre class="brush: html">&lt;script type="x-shader/x-fragment" id="fragment-shader"&gt;
+```html
+<script type="x-shader/x-fragment" id="fragment-shader">
 #version 100
 void main() {
   gl_FragColor = vec4(0.18, 0.54, 0.34, 1.0);
 }
-&lt;/script&gt;
-</pre>
+</script>
+```
 
-<pre class="brush: js hidden">;(function(){
-</pre>
+```js hidden
+;(function(){
+```
 
-<pre class="brush: js">"use strict"
+```js
+"use strict"
 window.addEventListener("load", setupWebGL, false);
 var gl,
   program;
@@ -128,9 +132,10 @@ if (buffer)
 if (program)
   gl.deleteProgram(program);
 }
-</pre>
+```
 
-<pre class="brush: js hidden">function getRenderingContext() {
+```js hidden
+function getRenderingContext() {
   var canvas = document.querySelector("canvas");
   canvas.width = canvas.clientWidth;
   canvas.height = canvas.clientHeight;
@@ -149,11 +154,12 @@ if (program)
   gl.clear(gl.COLOR_BUFFER_BIT);
   return gl;
 }
-</pre>
+```
 
-<pre class="brush: js hidden">})();
-</pre>
+```js hidden
+})();
+```
 
-<p>Le code source de cet exemple est également disponible sur <a href="https://github.com/idofilin/webgl-by-example/tree/master/hello-glsl">GitHub</a>.</p>
+Le code source de cet exemple est également disponible sur [GitHub](https://github.com/idofilin/webgl-by-example/tree/master/hello-glsl).
 
-<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Une_pluie_de_rectangle","Apprendre/WebGL/Par_exemple/Introduction_aux_attributs_vertex")}}</p>
+{{PreviousNext("Apprendre/WebGL/Par_exemple/Une_pluie_de_rectangle","Apprendre/WebGL/Par_exemple/Introduction_aux_attributs_vertex")}}
diff --git a/files/fr/web/api/webgl_api/by_example/hello_vertex_attributes/index.md b/files/fr/web/api/webgl_api/by_example/hello_vertex_attributes/index.md
index f00e3a7ea1..671303054b 100644
--- a/files/fr/web/api/webgl_api/by_example/hello_vertex_attributes/index.md
+++ b/files/fr/web/api/webgl_api/by_example/hello_vertex_attributes/index.md
@@ -11,26 +11,28 @@ tags:
 translation_of: Web/API/WebGL_API/By_example/Hello_vertex_attributes
 original_slug: Web/API/WebGL_API/By_example/Introduction_aux_attributs_vertex
 ---
-<div>{{IncludeSubnav("/fr/Apprendre")}}</div>
+{{IncludeSubnav("/fr/Apprendre")}}
 
-<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Hello_GLSL","Apprendre/WebGL/Par_exemple/Générer_des_textures_avec_du_code")}}</p>
+{{PreviousNext("Apprendre/WebGL/Par_exemple/Hello_GLSL","Apprendre/WebGL/Par_exemple/Générer_des_textures_avec_du_code")}}
 
-<p>Avec cet exemple, on voit comment combiner la programmation des <em>shaders</em> et les interactions utilisateurs grâce aux attributs des <em>vertex</em>.</p>
+Avec cet exemple, on voit comment combiner la programmation des _shaders_ et les interactions utilisateurs grâce aux attributs des _vertex_.
 
-<p>{{EmbedLiveSample("Un_Hello_World_en_GLSL",660,425)}}</p>
+{{EmbedLiveSample("Un_Hello_World_en_GLSL",660,425)}}
 
-<h3 id="Un_Hello_World_en_GLSL">Un <em>Hello World</em> en GLSL</h3>
+### Un _Hello World_ en GLSL
 
-<p>Voici comment envoyer des données saisies à un programme de manipulation des <em>shaders</em> en utilisant la mémoire GPU.</p>
+Voici comment envoyer des données saisies à un programme de manipulation des _shaders_ en utilisant la mémoire GPU.
 
-<pre class="brush: html hidden">&lt;p&gt;Voici le premier exemple où on manipule des attributs et où
+```html hidden
+<p>Voici le premier exemple où on manipule des attributs et où
 on envoie des données au GPU. Cliquez sur le canevas pour modifier
-la position horizontale du carré.&lt;/p&gt;
-&lt;canvas&gt;Il semblerait que votre navigateur ne supporte pas
-    l'élément HTML5 canvas.&lt;/canvas&gt;
-</pre>
+la position horizontale du carré.</p>
+<canvas>Il semblerait que votre navigateur ne supporte pas
+    l'élément HTML5 canvas.</canvas>
+```
 
-<pre class="brush: css hidden">body {
+```css hidden
+body {
   text-align : center;
 }
 canvas {
@@ -47,9 +49,10 @@ button {
   margin : auto;
   padding : 0.6em;
 }
-</pre>
+```
 
-<pre class="brush: html">&lt;script type="x-shader/x-vertex" id="vertex-shader"&gt;
+```html
+<script type="x-shader/x-vertex" id="vertex-shader">
 #version 100
 precision highp float;
 
@@ -59,22 +62,25 @@ void main() {
   gl_Position = vec4(position, 0.0, 0.0, 1.0);
   gl_PointSize = 64.0;
 }
-&lt;/script&gt;
-</pre>
+</script>
+```
 
-<pre class="brush: html">&lt;script type="x-shader/x-fragment" id="fragment-shader"&gt;
+```html
+<script type="x-shader/x-fragment" id="fragment-shader">
 #version 100
 precision mediump float;
 void main() {
   gl_FragColor = vec4(0.18, 0.54, 0.34, 1.0);
 }
-&lt;/script&gt;
-</pre>
+</script>
+```
 
-<pre class="brush: js hidden">;(function(){
-</pre>
+```js hidden
+;(function(){
+```
 
-<pre class="brush: js">"use strict"
+```js
+"use strict"
 window.addEventListener("load", setupWebGL, false);
 var gl,
   program;
@@ -142,9 +148,10 @@ function cleanup() {
   if (program)
     gl.deleteProgram(program);
 }
-</pre>
+```
 
-<pre class="brush: js hidden">function getRenderingContext() {
+```js hidden
+function getRenderingContext() {
   var canvas = document.querySelector("canvas");
   canvas.width = canvas.clientWidth;
   canvas.height = canvas.clientHeight;
@@ -162,11 +169,12 @@ function cleanup() {
   gl.clear(gl.COLOR_BUFFER_BIT);
   return gl;
 }
-</pre>
+```
 
-<pre class="brush: js hidden">})();
-</pre>
+```js hidden
+})();
+```
 
-<p>Le code source de cet exemple est également disponible sur <a href="https://github.com/idofilin/webgl-by-example/tree/master/hello-vertex-attributes">GitHub</a>.</p>
+Le code source de cet exemple est également disponible sur [GitHub](https://github.com/idofilin/webgl-by-example/tree/master/hello-vertex-attributes).
 
-<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Hello_GLSL","Apprendre/WebGL/Par_exemple/Générer_des_textures_avec_du_code")}}</p>
+{{PreviousNext("Apprendre/WebGL/Par_exemple/Hello_GLSL","Apprendre/WebGL/Par_exemple/Générer_des_textures_avec_du_code")}}
diff --git a/files/fr/web/api/webgl_api/by_example/index.md b/files/fr/web/api/webgl_api/by_example/index.md
index 037ed0d183..57c55bd51c 100644
--- a/files/fr/web/api/webgl_api/by_example/index.md
+++ b/files/fr/web/api/webgl_api/by_example/index.md
@@ -8,63 +8,55 @@ tags:
   - WebGL
 translation_of: Web/API/WebGL_API/By_example
 ---
-<div>{{IncludeSubnav("/fr/docs/Apprendre")}}</div>
+{{IncludeSubnav("/fr/docs/Apprendre")}}
 
-<p>{{Next("Apprendre/WebGL/Par_exemple/Détecter_WebGL")}}</p>
+{{Next("Apprendre/WebGL/Par_exemple/Détecter_WebGL")}}
 
-<p><em>WebGL par l'exemple</em> est une série d'articles illustrant les concepts et les possibilités offertes par WebGL. Chaque exemple est accompagné d'explications. Ces démonstrations sont triés par sujet et par niveau de difficulté. Les concepts abordés sont, entre autres, le contexte de rendu, la programmation avec les <em>shaders</em>, les textures, la géométrie et l'interaction avec les utilisateurs.</p>
+_WebGL par l'exemple_ est une série d'articles illustrant les concepts et les possibilités offertes par WebGL. Chaque exemple est accompagné d'explications. Ces démonstrations sont triés par sujet et par niveau de difficulté. Les concepts abordés sont, entre autres, le contexte de rendu, la programmation avec les _shaders_, les textures, la géométrie et l'interaction avec les utilisateurs.
 
-<h2 id="Les_exemples_par_catégorie">Les exemples, par catégorie</h2>
+## Les exemples, par catégorie
 
-<p>Les exemples de cette section sont triés par ordre de difficulté croissante. Plutôt que de les présenter sous la forme d'une longue liste, ils sont également répartis selon différentes catégories. Un sujet peut être abordé dans plusieurs exemples afin de couvrir des notions simples, intermédiaires ou avancées.</p>
+Les exemples de cette section sont triés par ordre de difficulté croissante. Plutôt que de les présenter sous la forme d'une longue liste, ils sont également répartis selon différentes catégories. Un sujet peut être abordé dans plusieurs exemples afin de couvrir des notions simples, intermédiaires ou avancées.
 
-<p>Plutôt que de manipuler des <em>shaders</em>, optimiser des géométrie et gérer la mémoire {{Glossary("GPU")}} dans le premier exemple, la progression se fera étape par étape afin que les exemples et les concepts puissent mieux être compris.</p>
+Plutôt que de manipuler des _shaders_, optimiser des géométrie et gérer la mémoire {{Glossary("GPU")}} dans le premier exemple, la progression se fera étape par étape afin que les exemples et les concepts puissent mieux être compris.
 
-<p>Les exemples sont expliqués, avec des commentaires dans le code et des paragraphes dédiés. Nous vous invitons à lire l'ensemble des commentaires au fur et à mesure, notamment pour les exemples plus avancés où ce qui a été vu auparavant ne sera pas expliqué à nouveau.</p>
+Les exemples sont expliqués, avec des commentaires dans le code et des paragraphes dédiés. Nous vous invitons à lire l'ensemble des commentaires au fur et à mesure, notamment pour les exemples plus avancés où ce qui a été vu auparavant ne sera pas expliqué à nouveau.
 
-<h3 id="Apprendre_à_connaître_le_contexte_de_rendu">Apprendre à connaître le contexte de rendu</h3>
+### Apprendre à connaître le contexte de rendu
 
-<dl>
- <dt><a href="/fr/docs/Apprendre/WebGL/Par_exemple/Détecter_WebGL">Détecter WebGL</a></dt>
- <dd>Dans cet exemple, on montre comment détecter un contexte de rendu {{Glossary("WebGL")}} et l'afficher pour l'utilisateur.</dd>
- <dt><a href="/fr/docs/Apprendre/WebGL/Par_exemple/Appliquer_des_couleurs">Appliquer des couleurs</a></dt>
- <dd>Dans cet exemple, on illustre comment appliquer une couleur unie dans un contexte de rendu.</dd>
- <dt><a href="/fr/docs/Apprendre/WebGL/Par_exemple/Appliquer_une_couleur_à_la_souris">Appliquer une couleur à la souris</a></dt>
- <dd>Ici, on montre comment combiner des interactions utilisateurs avec des opérations graphiques (là, on appliquera une couleur aléatoire dans le contexte à chaque clic de l'utilisateur).</dd>
- <dt><a href="/fr/docs/Apprendre/WebGL/Par_exemple/Créer_une_animation_colorée">Créer une animation colorée</a></dt>
- <dd>Dans cet exemple, on crée une animation simple avec des couleurs en appliquant chaque seconde une couleur aléatoire dans le contexte de rendu WebGL.</dd>
- <dt><a href="/fr/docs/Apprendre/WebGL/Par_exemple/Masque_de_couleur">Avoir un masque de couleur</a></dt>
- <dd>Modifier des couleurs aléatoires avec des masques de couleur pour limiter l'intervalle de couleurs qu'on souhaite utiliser.</dd>
- <dt><a href="/fr/docs/Apprendre/WebGL/Par_exemple/Appliquer_des_découpes_simples">Appliquer des découpes simples</a></dt>
- <dd>Dans cet exemple, on dessine des rectangles et des carrés simples grâce à des opérations de découpage (<em>scissoring</em>).</dd>
- <dt><a href="/fr/docs/Apprendre/WebGL/Par_exemple/Tailles_de_canvas_et_WebGL">La taille du canevas et WebGL</a></dt>
- <dd>Dans cet exemple, on observe ce qui se produit quand on définit (ou pas) la taille de l'élément <code>canvas</code> associé.</dd>
- <dt><a href="/fr/docs/Apprendre/WebGL/Par_exemple/Modèle_1">Modèle 1</a></dt>
- <dd>Dans cet exemple, on évoque les fragments de code qui seront utilisés pour les exemples qui suivent (et dans lesquels ils seront cachés car identiques). On définiera également une fonction JavaScript utilitaire pour initialiser WebGL plus facilement.</dd>
- <dt><a href="/fr/docs/Apprendre/WebGL/Par_exemple/Créer_une_animation_avec_découpe_et_applique">Créer une animation avec du découpage et de l'applique</a></dt>
- <dd>Avec cet article, on illustre comment créer des animations grâce aux opérations de découpe et d'applique.</dd>
- <dt><a href="/fr/docs/Apprendre/WebGL/Par_exemple/Une_pluie_de_rectangle">Une pluie de rectangle</a></dt>
- <dd>On voit ici un jeu, simple, qui mélange les découpes, les animations et les interactions utilisateurs.</dd>
-</dl>
+- [Détecter WebGL](/fr/docs/Apprendre/WebGL/Par_exemple/Détecter_WebGL)
+  - : Dans cet exemple, on montre comment détecter un contexte de rendu {{Glossary("WebGL")}} et l'afficher pour l'utilisateur.
+- [Appliquer des couleurs](/fr/docs/Apprendre/WebGL/Par_exemple/Appliquer_des_couleurs)
+  - : Dans cet exemple, on illustre comment appliquer une couleur unie dans un contexte de rendu.
+- [Appliquer une couleur à la souris](/fr/docs/Apprendre/WebGL/Par_exemple/Appliquer_une_couleur_à_la_souris)
+  - : Ici, on montre comment combiner des interactions utilisateurs avec des opérations graphiques (là, on appliquera une couleur aléatoire dans le contexte à chaque clic de l'utilisateur).
+- [Créer une animation colorée](/fr/docs/Apprendre/WebGL/Par_exemple/Créer_une_animation_colorée)
+  - : Dans cet exemple, on crée une animation simple avec des couleurs en appliquant chaque seconde une couleur aléatoire dans le contexte de rendu WebGL.
+- [Avoir un masque de couleur](/fr/docs/Apprendre/WebGL/Par_exemple/Masque_de_couleur)
+  - : Modifier des couleurs aléatoires avec des masques de couleur pour limiter l'intervalle de couleurs qu'on souhaite utiliser.
+- [Appliquer des découpes simples](/fr/docs/Apprendre/WebGL/Par_exemple/Appliquer_des_découpes_simples)
+  - : Dans cet exemple, on dessine des rectangles et des carrés simples grâce à des opérations de découpage (_scissoring_).
+- [La taille du canevas et WebGL](/fr/docs/Apprendre/WebGL/Par_exemple/Tailles_de_canvas_et_WebGL)
+  - : Dans cet exemple, on observe ce qui se produit quand on définit (ou pas) la taille de l'élément `canvas` associé.
+- [Modèle 1](/fr/docs/Apprendre/WebGL/Par_exemple/Modèle_1)
+  - : Dans cet exemple, on évoque les fragments de code qui seront utilisés pour les exemples qui suivent (et dans lesquels ils seront cachés car identiques). On définiera également une fonction JavaScript utilitaire pour initialiser WebGL plus facilement.
+- [Créer une animation avec du découpage et de l'applique](/fr/docs/Apprendre/WebGL/Par_exemple/Créer_une_animation_avec_découpe_et_applique)
+  - : Avec cet article, on illustre comment créer des animations grâce aux opérations de découpe et d'applique.
+- [Une pluie de rectangle](/fr/docs/Apprendre/WebGL/Par_exemple/Une_pluie_de_rectangle)
+  - : On voit ici un jeu, simple, qui mélange les découpes, les animations et les interactions utilisateurs.
 
-<div>
-<h3 id="Les_bases_de_la_programmation_avec_les_shaders">Les bases de la programmation avec les <em>shaders</em></h3>
+### Les bases de la programmation avec les _shaders_
 
-<dl>
- <dt><a href="/fr/docs/Apprendre/WebGL/Par_exemple/Hello_GLSL">Hello GLSL</a></dt>
- <dd>Un programme de manipulation des shaders simple qui dessine un carré.</dd>
- <dt><a href="/fr/docs/Apprendre/WebGL/Par_exemple/Introduction_aux_attributs_vertex">Introduction aux attributs de vertex</a></dt>
- <dd>Ici, on combine la programmation des shaders et les interactions utilisateurs grâce aux attributs de vertex.</dd>
- <dt><a href="/fr/docs/Apprendre/WebGL/Par_exemple/Générer_des_textures_avec_du_code">Générer des textures avec du code</a></dt>
- <dd>Une démonstration simple sur l'utilisation des <em>shaders</em> et des textures procédurales.</dd>
-</dl>
+- [Hello GLSL](/fr/docs/Apprendre/WebGL/Par_exemple/Hello_GLSL)
+  - : Un programme de manipulation des shaders simple qui dessine un carré.
+- [Introduction aux attributs de vertex](/fr/docs/Apprendre/WebGL/Par_exemple/Introduction_aux_attributs_vertex)
+  - : Ici, on combine la programmation des shaders et les interactions utilisateurs grâce aux attributs de vertex.
+- [Générer des textures avec du code](/fr/docs/Apprendre/WebGL/Par_exemple/Générer_des_textures_avec_du_code)
+  - : Une démonstration simple sur l'utilisation des _shaders_ et des textures procédurales.
 
-<h3 id="Divers_exemples_avancés">Divers exemples avancés</h3>
+### Divers exemples avancés
 
-<dl>
- <dt><a href="/fr/docs/Apprendre/WebGL/Par_exemple/Les_textures_vidéos">Les textures vidéos</a></dt>
- <dd>Dans cet exemple, on voit comment utiliser des fichiers vidéos comme des textures.</dd>
-</dl>
+- [Les textures vidéos](/fr/docs/Apprendre/WebGL/Par_exemple/Les_textures_vidéos)
+  - : Dans cet exemple, on voit comment utiliser des fichiers vidéos comme des textures.
 
-<p>{{Next("Apprendre/WebGL/Par_exemple/Détecter_WebGL")}}</p>
-</div>
+{{Next("Apprendre/WebGL/Par_exemple/Détecter_WebGL")}}
diff --git a/files/fr/web/api/webgl_api/by_example/raining_rectangles/index.md b/files/fr/web/api/webgl_api/by_example/raining_rectangles/index.md
index de42151f5c..4064bb708f 100644
--- a/files/fr/web/api/webgl_api/by_example/raining_rectangles/index.md
+++ b/files/fr/web/api/webgl_api/by_example/raining_rectangles/index.md
@@ -11,32 +11,34 @@ tags:
 translation_of: Web/API/WebGL_API/By_example/Raining_rectangles
 original_slug: Web/API/WebGL_API/By_example/Une_pluie_de_rectangle
 ---
-<div>{{IncludeSubnav("/fr/Apprendre")}}</div>
+{{IncludeSubnav("/fr/Apprendre")}}
 
-<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Créer_une_animation_avec_découpe_et_applique","Apprendre/WebGL/Par_exemple/Hello_GLSL")}}</p>
+{{PreviousNext("Apprendre/WebGL/Par_exemple/Créer_une_animation_avec_découpe_et_applique","Apprendre/WebGL/Par_exemple/Hello_GLSL")}}
 
-<p>Cet exemple permet de créer un jeu simple qui illustre ce qu'il est possible de faire avec du « découpage », des animations et des interactions utilisateur.</p>
+Cet exemple permet de créer un jeu simple qui illustre ce qu'il est possible de faire avec du « découpage », des animations et des interactions utilisateur.
 
-<p>{{EmbedLiveSample("Utiliser_des_animations_et_des_interactions_grâce_à_des_découpes",660,425)}}</p>
+{{EmbedLiveSample("Utiliser_des_animations_et_des_interactions_grâce_à_des_découpes",660,425)}}
 
-<h3 id="Utiliser_des_animations_et_des_interactions_grâce_à_des_découpes">Utiliser des animations et des interactions grâce à des découpes</h3>
+### Utiliser des animations et des interactions grâce à des découpes
 
-<p>Voici un jeu simple où il faut essayer de cliquer sur les rectangles qui tombent pour en attraper le plus possible. Dans cet exemple, on utilise un approche orientée objet pour représenter les rectangles. Cela permet de mieux gérer l'état du rectangle (sa position, sa couleur, etc.) et cela rend le code plus compact et plus facile à réutiliser.</p>
+Voici un jeu simple où il faut essayer de cliquer sur les rectangles qui tombent pour en attraper le plus possible. Dans cet exemple, on utilise un approche orientée objet pour représenter les rectangles. Cela permet de mieux gérer l'état du rectangle (sa position, sa couleur, etc.) et cela rend le code plus compact et plus facile à réutiliser.
 
-<p>Dans cet exemple, on combine l'applique de couleurs unis dans le tampon de dessin et des opérations de découpe. C'est un aperçu d'une application graphique complète qui manipule les différentes phases des processus {{Glossary("WebGL")}} et de son automate.</p>
+Dans cet exemple, on combine l'applique de couleurs unis dans le tampon de dessin et des opérations de découpe. C'est un aperçu d'une application graphique complète qui manipule les différentes phases des processus {{Glossary("WebGL")}} et de son automate.
 
-<p>De plus, cet exmple illustre comment intégrer des fonctions WebGL dans une boucle de jeu. La boucle de jeu est responsable du dessin pour l'animation, de la gestion des entrées utilisateur et de la réactivité de l'ensemble. Voici comment la boucle de jeu est implémentée avec des  <code>setTimeout</code>.</p>
+De plus, cet exmple illustre comment intégrer des fonctions WebGL dans une boucle de jeu. La boucle de jeu est responsable du dessin pour l'animation, de la gestion des entrées utilisateur et de la réactivité de l'ensemble. Voici comment la boucle de jeu est implémentée avec des  `setTimeout`.
 
-<pre class="brush: html hidden">&lt;p&gt;Vous en avez attrapé
-&lt;strong&gt;0&lt;/strong&gt;.
+```html hidden
+<p>Vous en avez attrapé
+<strong>0</strong>.
   Vous en avez loupé
-&lt;strong&gt;0&lt;/strong&gt;.&lt;/p&gt;
-&lt;canvas&gt;Il semblerait que votre
+<strong>0</strong>.</p>
+<canvas>Il semblerait que votre
     navigateur ne supporte pas l'élément
-    HTML5 canvas.&lt;/canvas&gt;
-</pre>
+    HTML5 canvas.</canvas>
+```
 
-<pre class="brush: css hidden">body {
+```css hidden
+body {
   text-align : center;
 }
 canvas {
@@ -54,12 +56,14 @@ button {
   margin : auto;
   padding : 0.6em;
 }
-</pre>
+```
 
-<pre class="brush: js hidden">;(function(){
-</pre>
+```js hidden
+;(function(){
+```
 
-<pre class="brush: js">"use strict"
+```js
+"use strict"
 window.addEventListener("load", setupAnimation, false);
 var gl,
   timer,
@@ -88,7 +92,7 @@ function drawAnimation () {
       rainingRect.size[0] , rainingRect.size[1]);
   gl.clear(gl.COLOR_BUFFER_BIT);
   rainingRect.position[1] -= rainingRect.velocity;
-  if (rainingRect.position[1] &lt; 0) {
+  if (rainingRect.position[1] < 0) {
     misses += 1;
     missesDisplay.innerHTML = misses;
     rainingRect = new Rectangle();
@@ -114,8 +118,8 @@ function playerClick (evt) {
   // On incrémente donc le score et on crée un nouveau rectangle
   var diffPos = [ position[0] - rainingRect.position[0],
       position[1] - rainingRect.position[1] ];
-  if ( diffPos[0] &gt;= 0 &amp;&amp; diffPos[0] &lt; rainingRect.size[0]
-      &amp;&amp; diffPos[1] &gt;= 0 &amp;&amp; diffPos[1] &lt; rainingRect.size[1] ) {
+  if ( diffPos[0] >= 0 && diffPos[0] < rainingRect.size[0]
+      && diffPos[1] >= 0 && diffPos[1] < rainingRect.size[1] ) {
     score += 1;
     scoreDisplay.innerHTML = score;
     rainingRect = new Rectangle();
@@ -146,9 +150,10 @@ function Rectangle () {
     return [Math.random(), Math.random(), Math.random()];
   }
 }
-</pre>
+```
 
-<pre class="brush: js hidden">function getRenderingContext() {
+```js hidden
+function getRenderingContext() {
   var canvas = document.querySelector("canvas");
   canvas.width = canvas.clientWidth;
   canvas.height = canvas.clientHeight;
@@ -167,11 +172,12 @@ function Rectangle () {
   gl.clear(gl.COLOR_BUFFER_BIT);
   return gl;
 }
-</pre>
+```
 
-<pre class="brush: js hidden">})();
-</pre>
+```js hidden
+})();
+```
 
-<p>Le code source de cet exemple est également disponible sur <a href="https://github.com/idofilin/webgl-by-example/tree/master/raining-rectangles">GitHub</a>.</p>
+Le code source de cet exemple est également disponible sur [GitHub](https://github.com/idofilin/webgl-by-example/tree/master/raining-rectangles).
 
-<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Créer_une_animation_avec_découpe_et_applique","Apprendre/WebGL/Par_exemple/Hello_GLSL")}}</p>
+{{PreviousNext("Apprendre/WebGL/Par_exemple/Créer_une_animation_avec_découpe_et_applique","Apprendre/WebGL/Par_exemple/Hello_GLSL")}}
diff --git a/files/fr/web/api/webgl_api/by_example/scissor_animation/index.md b/files/fr/web/api/webgl_api/by_example/scissor_animation/index.md
index e151ad4c95..14b742c5c1 100644
--- a/files/fr/web/api/webgl_api/by_example/scissor_animation/index.md
+++ b/files/fr/web/api/webgl_api/by_example/scissor_animation/index.md
@@ -11,31 +11,33 @@ tags:
 translation_of: Web/API/WebGL_API/By_example/Scissor_animation
 original_slug: Web/API/WebGL_API/By_example/Créer_une_animation_avec_découpe_et_applique
 ---
-<div>{{IncludeSubnav("/fr/Apprendre")}}</div>
+{{IncludeSubnav("/fr/Apprendre")}}
 
-<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Modèle_1","Apprendre/WebGL/Par_exemple/Une_pluie_de_rectangle")}}</p>
+{{PreviousNext("Apprendre/WebGL/Par_exemple/Modèle_1","Apprendre/WebGL/Par_exemple/Une_pluie_de_rectangle")}}
 
-<p>Dans cet article, on voit comment créer des animations grâce à des opérations de découpe et d'applique.</p>
+Dans cet article, on voit comment créer des animations grâce à des opérations de découpe et d'applique.
 
-<p>{{EmbedLiveSample("Une_animation_grâce_à_des_découpes",660,425)}}</p>
+{{EmbedLiveSample("Une_animation_grâce_à_des_découpes",660,425)}}
 
-<h3 id="Une_animation_grâce_à_des_découpes">Une animation grâce à des découpes</h3>
+### Une animation grâce à des découpes
 
-<p>Dans cet exemple, on anime des carrés grâce aux méthodes {{domxref("WebGLRenderingContext.scissor()","scissor()")}} et {{domxref("WebGLRenderingContext.clear()","clear()")}}. Ensuite, on crée à nouveau une boucle d'animation grâce aux <em>timers</em>. Cette fois-ci, la position du carré (la zone de découpe) est mise à jour à chaque <em>frame </em>(on a environ une frame rafraîchie toutes les 17 millisecondes, ce qui correspond environ à 60fps (<em>frame per second</em> ou <em>frame </em>par seconde).</p>
+Dans cet exemple, on anime des carrés grâce aux méthodes {{domxref("WebGLRenderingContext.scissor()","scissor()")}} et {{domxref("WebGLRenderingContext.clear()","clear()")}}. Ensuite, on crée à nouveau une boucle d'animation grâce aux _timers_. Cette fois-ci, la position du carré (la zone de découpe) est mise à jour à chaque _frame_ (on a environ une frame rafraîchie toutes les 17 millisecondes, ce qui correspond environ à 60fps (_frame per second_ ou _frame_ par seconde).
 
-<p>En revanche, la couleur du carré (définie avec {{domxref("WebGLRenderingContext.clearColor()","clearColor")}}) est uniquement mise à jour lorsqu'un nouveau carré est créé. On voit ici que {{Glossary("WebGL")}} est un automate. Pour chaque carré, on définit sa couleur une fois puis on met à jour sa position à chaque <em>frame</em>. L'état lié à la couleur reste tel quel jusqu'à ce qu'un nouveau carré soit créé.</p>
+En revanche, la couleur du carré (définie avec {{domxref("WebGLRenderingContext.clearColor()","clearColor")}}) est uniquement mise à jour lorsqu'un nouveau carré est créé. On voit ici que {{Glossary("WebGL")}} est un automate. Pour chaque carré, on définit sa couleur une fois puis on met à jour sa position à chaque _frame_. L'état lié à la couleur reste tel quel jusqu'à ce qu'un nouveau carré soit créé.
 
-<pre class="brush: html hidden">&lt;p&gt;Une animation WebGL obtenue en appliquant des couleurs
-unies sur le buffer de dessin et en utilisant des tests de découpe.&lt;/p&gt;
-&lt;button id="animation-onoff"&gt;
+```html hidden
+<p>Une animation WebGL obtenue en appliquant des couleurs
+unies sur le buffer de dessin et en utilisant des tests de découpe.</p>
+<button id="animation-onoff">
   Cliquez ici pour
-&lt;strong&gt;[verbe ici]&lt;/strong&gt;
-  l'animation&lt;/button&gt;
-&lt;canvas&gt;Il semblerait que votre navigateur
-    ne supporte pas l'élément HTML5 canvas.&lt;/canvas&gt;
-</pre>
-
-<pre class="brush: css hidden">body {
+<strong>[verbe ici]</strong>
+  l'animation</button>
+<canvas>Il semblerait que votre navigateur
+    ne supporte pas l'élément HTML5 canvas.</canvas>
+```
+
+```css hidden
+body {
   text-align : center;
 }
 canvas {
@@ -52,12 +54,14 @@ button {
   margin : auto;
   padding : 0.6em;
 }
-</pre>
+```
 
-<pre class="brush: js hidden">;(function(){
-</pre>
+```js hidden
+;(function(){
+```
 
-<pre class="brush: js">"use strict"
+```js
+"use strict"
 window.addEventListener("load", setupAnimation, false);
 // Voici les variables qui permettront de
 // manipuler le contexte WebGL, la couleur
@@ -113,7 +117,7 @@ function drawAnimation () {
   // Lorsque le carré atteint le bas, on crée un nouveau
   // carré avec une nouvelle vitesse et une nouvelle
   // couleur.
-  if (position[1] &lt; 0) {
+  if (position[1] < 0) {
     // La position horizontale est choisie aléatoirement.
     // La position verticale correspond au haut
     // du buffer de dessin.
@@ -132,9 +136,10 @@ function drawAnimation () {
 function getRandomColor() {
   return [Math.random(), Math.random(), Math.random()];
 }
-</pre>
+```
 
-<pre class="brush: js hidden">function getRenderingContext() {
+```js hidden
+function getRenderingContext() {
   var canvas = document.querySelector("canvas");
   canvas.width = canvas.clientWidth;
   canvas.height = canvas.clientHeight;
@@ -153,11 +158,12 @@ function getRandomColor() {
   gl.clear(gl.COLOR_BUFFER_BIT);
   return gl;
 }
-</pre>
+```
 
-<pre class="brush: js hidden">})();
-</pre>
+```js hidden
+})();
+```
 
-<p>Le code source de cet exemple est également disponible sur <a href="https://github.com/idofilin/webgl-by-example/tree/master/scissor-animation">GitHub</a>.</p>
+Le code source de cet exemple est également disponible sur [GitHub](https://github.com/idofilin/webgl-by-example/tree/master/scissor-animation).
 
-<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Modèle_1","Apprendre/WebGL/Par_exemple/Une_pluie_de_rectangle")}}</p>
+{{PreviousNext("Apprendre/WebGL/Par_exemple/Modèle_1","Apprendre/WebGL/Par_exemple/Une_pluie_de_rectangle")}}
diff --git a/files/fr/web/api/webgl_api/by_example/simple_color_animation/index.md b/files/fr/web/api/webgl_api/by_example/simple_color_animation/index.md
index 03897206ae..6842ac3fcd 100644
--- a/files/fr/web/api/webgl_api/by_example/simple_color_animation/index.md
+++ b/files/fr/web/api/webgl_api/by_example/simple_color_animation/index.md
@@ -11,32 +11,34 @@ tags:
 translation_of: Web/API/WebGL_API/By_example/Simple_color_animation
 original_slug: Web/API/WebGL_API/By_example/Créer_une_animation_colorée
 ---
-<div>{{IncludeSubnav("/fr/Apprendre")}}</div>
+{{IncludeSubnav("/fr/Apprendre")}}
 
-<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Appliquer_une_couleur_à_la_souris","Apprendre/WebGL/Par_exemple/Masque_de_couleur")}}</p>
+{{PreviousNext("Apprendre/WebGL/Par_exemple/Appliquer_une_couleur_à_la_souris","Apprendre/WebGL/Par_exemple/Masque_de_couleur")}}
 
-<p>Dans cet exemple, on crée une animation avec des couleurs en appliquant chaque seconde une couleur aléatoire dans le contexte de rendu {{Glossary("WebGL")}}.</p>
+Dans cet exemple, on crée une animation avec des couleurs en appliquant chaque seconde une couleur aléatoire dans le contexte de rendu {{Glossary("WebGL")}}.
 
-<p>{{EmbedLiveSample("Créer_une_animation_avec_clear",660,425)}}</p>
+{{EmbedLiveSample("Créer_une_animation_avec_clear",660,425)}}
 
-<h3 id="Créer_une_animation_avec_clear">Créer une animation avec <code> clear</code></h3>
+### Créer une animation avec `clear`
 
-<p>Cet exemple illustre comment lancer une animation avec WebGL et gérer les interactions de l'utilisateur. L'utilisateur peut lancer, arrêter et reprendre l'animation en cliquant sur le bouton.</p>
+Cet exemple illustre comment lancer une animation avec WebGL et gérer les interactions de l'utilisateur. L'utilisateur peut lancer, arrêter et reprendre l'animation en cliquant sur le bouton.
 
-<p>Cette fois, on place les appels à la fonction WebGL à l'intérieur d'un gestionnaire d'événement de <em>timer</em>. Un gestionnaire d'événements pour les clics permet de gérer les interactions simples (lancer et arrêter l'animation). Le <em>timer</em> et la fonction de gestion du <em>timer</em> créent une boucle d'animation qui permet d'exécuter un ensemble de commandes pour le dessin à des intervalles réguliers (généralement, pour chaque <em>frame</em>, dans ce cas, on a une fréquence d'une <em>frame </em>par seconde).</p>
+Cette fois, on place les appels à la fonction WebGL à l'intérieur d'un gestionnaire d'événement de _timer_. Un gestionnaire d'événements pour les clics permet de gérer les interactions simples (lancer et arrêter l'animation). Le _timer_ et la fonction de gestion du _timer_ créent une boucle d'animation qui permet d'exécuter un ensemble de commandes pour le dessin à des intervalles réguliers (généralement, pour chaque _frame_, dans ce cas, on a une fréquence d'une _frame_ par seconde).
 
-<pre class="brush: html">&lt;p&gt;Un programme WebGL simple qui crée une animation colorée.&lt;/p&gt;
-&lt;p&gt;Vous pouvez sur le bouton pour activer/désactiver l'animation.&lt;/p&gt;
-&lt;canvas id="canvas-view"&gt;Il semblerait que votre navigateur ne
-    supporte pas l'élément canvas.&lt;/canvas&gt;
-&lt;button id="animation-onoff"&gt;
+```html
+<p>Un programme WebGL simple qui crée une animation colorée.</p>
+<p>Vous pouvez sur le bouton pour activer/désactiver l'animation.</p>
+<canvas id="canvas-view">Il semblerait que votre navigateur ne
+    supporte pas l'élément canvas.</canvas>
+<button id="animation-onoff">
   Cliquez ici pour
-&lt;strong&gt;[le verbe de l'action]&lt;/strong&gt;
+<strong>[le verbe de l'action]</strong>
   l'animation
-&lt;/button&gt;
-</pre>
+</button>
+```
 
-<pre class="brush: css">body {
+```css
+body {
   text-align : center;
 }
 button {
@@ -54,9 +56,10 @@ canvas {
   border : none;
   background-color : black;
 }
-</pre>
+```
 
-<pre class="brush: js">window.addEventListener("load", function setupAnimation (evt) {
+```js
+window.addEventListener("load", function setupAnimation (evt) {
   "use strict"
   window.removeEventListener(evt.type, setupAnimation, false);
 
@@ -133,8 +136,8 @@ canvas {
     return [Math.random(), Math.random(), Math.random()];
   }
 }, false);
-</pre>
+```
 
-<p>Le code source de cet exemple est également disponible sur <a href="https://github.com/idofilin/webgl-by-example/tree/master/simple-color-animation">GitHub</a>.</p>
+Le code source de cet exemple est également disponible sur [GitHub](https://github.com/idofilin/webgl-by-example/tree/master/simple-color-animation).
 
-<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Appliquer_une_couleur_à_la_souris","Apprendre/WebGL/Par_exemple/Masque_de_couleur")}}</p>
+{{PreviousNext("Apprendre/WebGL/Par_exemple/Appliquer_une_couleur_à_la_souris","Apprendre/WebGL/Par_exemple/Masque_de_couleur")}}
diff --git a/files/fr/web/api/webgl_api/by_example/textures_from_code/index.md b/files/fr/web/api/webgl_api/by_example/textures_from_code/index.md
index f88812a7d3..864d0ece92 100644
--- a/files/fr/web/api/webgl_api/by_example/textures_from_code/index.md
+++ b/files/fr/web/api/webgl_api/by_example/textures_from_code/index.md
@@ -11,25 +11,27 @@ tags:
 translation_of: Web/API/WebGL_API/By_example/Textures_from_code
 original_slug: Web/API/WebGL_API/By_example/Générer_des_textures_avec_du_code
 ---
-<div>{{draft}}{{IncludeSubnav("/fr/Apprendre")}}</div>
+{{draft}}{{IncludeSubnav("/fr/Apprendre")}}
 
-<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Introduction_aux_attributs_vertex","Apprendre/WebGL/Par_exemple/Les_textures_vidéos")}}</p>
+{{PreviousNext("Apprendre/WebGL/Par_exemple/Introduction_aux_attributs_vertex","Apprendre/WebGL/Par_exemple/Les_textures_vidéos")}}
 
-<p>Dans cet article, on illustre simplement comment générer des textures procédurales avec des fragments de <em>shader</em><em>s</em>.</p>
+Dans cet article, on illustre simplement comment générer des textures procédurales avec des fragments de _shader\*\*s_.
 
-<p>{{EmbedLiveSample("Dessiner_des_textures_avec_du_code",660,350)}}</p>
+{{EmbedLiveSample("Dessiner_des_textures_avec_du_code",660,350)}}
 
-<h3 id="Dessiner_des_textures_avec_du_code">Dessiner des textures avec du  code</h3>
+### Dessiner des textures avec du  code
 
-<p>Il est possible d'appliquer des textures en effectuant des calculs pour chaque pixel du fragment de <em>shader</em>.</p>
+Il est possible d'appliquer des textures en effectuant des calculs pour chaque pixel du fragment de _shader_.
 
-<pre class="brush: html hidden">&lt;p&gt;Génération d'une texture à partir de code. Simple demonstration
-    de la génération de textures procédurale&lt;/p&gt;
-&lt;canvas&gt;Il semblerait que votre navigateur ne supporte
-    pas l'élément canvas.&lt;/canvas&gt;
-</pre>
+```html hidden
+<p>Génération d'une texture à partir de code. Simple demonstration
+    de la génération de textures procédurale</p>
+<canvas>Il semblerait que votre navigateur ne supporte
+    pas l'élément canvas.</canvas>
+```
 
-<pre class="brush: css hidden">body {
+```css hidden
+body {
   text-align : center;
 }
 canvas {
@@ -46,19 +48,21 @@ button {
   margin : auto;
   padding : 0.6em;
 }
-</pre>
+```
 
-<pre class="brush: html">&lt;script type="x-shader/x-vertex" id="vertex-shader"&gt;
+```html
+<script type="x-shader/x-vertex" id="vertex-shader">
 #version 100
 precision highp float;
 void main() {
   gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
   gl_PointSize = 128.0;
 }
-&lt;/script&gt;
-</pre>
+</script>
+```
 
-<pre class="brush: html">&lt;script type="x-shader/x-fragment" id="fragment-shader"&gt;
+```html
+<script type="x-shader/x-fragment" id="fragment-shader">
 #version 100
 precision mediump float;
 // On définit une variation radiale (à partir du centre)
@@ -71,13 +75,15 @@ void main() {
     0.1/distanceSqrd,
     0.0, 1.0 );
 }
-&lt;/script&gt;
-</pre>
+</script>
+```
 
-<pre class="brush: js hidden">;(function(){
-</pre>
+```js hidden
+;(function(){
+```
 
-<pre class="brush: js">"use strict"
+```js
+"use strict"
 window.addEventListener("load", setupWebGL, false);
 var gl,
   program;
@@ -132,9 +138,10 @@ if (buffer)
 if (program)
   gl.deleteProgram(program);
 }
-</pre>
+```
 
-<pre class="brush: js hidden">function getRenderingContext() {
+```js hidden
+function getRenderingContext() {
   var canvas = document.querySelector("canvas");
   canvas.width = canvas.clientWidth;
   canvas.height = canvas.clientHeight;
@@ -154,8 +161,8 @@ if (program)
   return gl;
 }
 })();
-</pre>
+```
 
-<p>Le code source de cet exemple est également disponible sur <a href="https://github.com/idofilin/webgl-by-example/tree/master/textures-from-code">GitHub</a>.</p>
+Le code source de cet exemple est également disponible sur [GitHub](https://github.com/idofilin/webgl-by-example/tree/master/textures-from-code).
 
-<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Introduction_aux_attributs_vertex","Apprendre/WebGL/Par_exemple/Les_textures_vidéos")}}</p>
+{{PreviousNext("Apprendre/WebGL/Par_exemple/Introduction_aux_attributs_vertex","Apprendre/WebGL/Par_exemple/Les_textures_vidéos")}}
diff --git a/files/fr/web/api/webgl_api/by_example/video_textures/index.md b/files/fr/web/api/webgl_api/by_example/video_textures/index.md
index 9f5c93f1f9..e74d59bf5f 100644
--- a/files/fr/web/api/webgl_api/by_example/video_textures/index.md
+++ b/files/fr/web/api/webgl_api/by_example/video_textures/index.md
@@ -11,14 +11,14 @@ tags:
 translation_of: Web/API/WebGL_API/By_example/Video_textures
 original_slug: Web/API/WebGL_API/By_example/Les_textures_vidéos
 ---
-<div>{{draft}}{{IncludeSubnav("/fr/Apprendre")}}</div>
+{{draft}}{{IncludeSubnav("/fr/Apprendre")}}
 
-<p>{{Previous("Apprendre/WebGL/Par_exemple/Générer_des_textures_avec_du_code")}}</p>
+{{Previous("Apprendre/WebGL/Par_exemple/Générer_des_textures_avec_du_code")}}
 
-<p>Cet exemple illustre comment utiliser des fichiers vidéos comme textures.</p>
+Cet exemple illustre comment utiliser des fichiers vidéos comme textures.
 
-<h3 id="Des_textures_à_partir_de_vidéos">Des textures à partir de vidéos</h3>
+### Des textures à partir de vidéos
 
-<p>{{EmbedGHLiveSample('webgl-examples/tutorial/sample8/index.html', 670, 510)}}</p>
+{{EmbedGHLiveSample('webgl-examples/tutorial/sample8/index.html', 670, 510)}}
 
-<p>{{Previous("Apprendre/WebGL/Par_exemple/Générer_des_textures_avec_du_code")}}</p>
+{{Previous("Apprendre/WebGL/Par_exemple/Générer_des_textures_avec_du_code")}}
diff --git a/files/fr/web/api/webgl_api/data/index.md b/files/fr/web/api/webgl_api/data/index.md
index cdd41f0766..b122c4a378 100644
--- a/files/fr/web/api/webgl_api/data/index.md
+++ b/files/fr/web/api/webgl_api/data/index.md
@@ -18,40 +18,40 @@ tags:
 translation_of: Web/API/WebGL_API/Data
 original_slug: Web/API/WebGL_API/Données
 ---
-<div>{{WebGLSidebar}}{{draft}}</div>
+{{WebGLSidebar}}{{draft}}
 
-<p>Les programmes shaders ont accès à trois types de stockage de données, chacun d'entre eux ayant un usage particulier. Chaque type de variable est accessible par l'un des types de programmes de shader ou par les deux (en fonction du type de stockage de données), et éventuellement, par le code JavaScript du site, suivant le type de variable particulier.</p>
+Les programmes shaders ont accès à trois types de stockage de données, chacun d'entre eux ayant un usage particulier. Chaque type de variable est accessible par l'un des types de programmes de shader ou par les deux (en fonction du type de stockage de données), et éventuellement, par le code JavaScript du site, suivant le type de variable particulier.
 
-<h2 id="Types_de_données_GLSL">Types de données GLSL</h2>
+## Types de données GLSL
 
-<p>&lt;&lt;documenter les types de base, les vecteurs, etc. ; voir <a href="https://www.khronos.org/opengl/wiki/Data_Type_(GLSL)">Data Type (GLSL)</a>  sur le wiki WebGL de Khronos &gt;&gt;</p>
+<\<documenter les types de base, les vecteurs, etc. ; voir [Data Type (GLSL)](<https://www.khronos.org/opengl/wiki/Data_Type_(GLSL)>)  sur le wiki WebGL de Khronos >>
 
-<h2 id="Variables_GLSL">Variables GLSL</h2>
+## Variables GLSL
 
-<p>Il existe trois types de stockage "variable" ou de stockage de données dans GLSL, chacun ayant son propre but et ses propres cas d'utilisation : <strong>{{anch("Attributes", "attributes")}}</strong>, <strong>{{anch("Varyings", "varyings")}}</strong>, et <strong>{{anch("Uniforms", "uniforms")}}</strong>.</p>
+Il existe trois types de stockage "variable" ou de stockage de données dans GLSL, chacun ayant son propre but et ses propres cas d'utilisation : **{{anch("Attributes", "attributes")}}**, **{{anch("Varyings", "varyings")}}**, et **{{anch("Uniforms", "uniforms")}}**.
 
-<h3 id="Attributes">Attributes</h3>
+### Attributes
 
-<p>Les <strong>attributes</strong> sont des variables GLSL qui ne sont disponibles que pour le shader de sommet (en tant que variables) et le code JavaScript. Les attributs sont généralement utilisés pour stocker des informations de couleur, des coordonnées de texture et toutes les autres données calculées ou récupérées qui doivent être partagées entre le code JavaScript et le shader de sommet.</p>
+Les **attributes** sont des variables GLSL qui ne sont disponibles que pour le shader de sommet (en tant que variables) et le code JavaScript. Les attributs sont généralement utilisés pour stocker des informations de couleur, des coordonnées de texture et toutes les autres données calculées ou récupérées qui doivent être partagées entre le code JavaScript et le shader de sommet.
 
-<p>&lt;&lt;add how to use them&gt;&gt;</p>
+<\<add how to use them>>
 
-<h3 id="Varyings">Varyings</h3>
+### Varyings
 
-<p>Les <strong>varyings</strong> sont des variables déclarées par le shader de sommet et elle sont utilisées pour transmettre des données du shader de sommet au shader de fragment. Ceci est communément utilisé pour partager un sommet {{interwiki ("wikipedia", "Normal_ (géométrie)", "vecteur normal")}} après qu'il a été calculé par le shader de sommet.</p>
+Les **varyings** sont des variables déclarées par le shader de sommet et elle sont utilisées pour transmettre des données du shader de sommet au shader de fragment. Ceci est communément utilisé pour partager un sommet {{interwiki ("wikipedia", "Normal_ (géométrie)", "vecteur normal")}} après qu'il a été calculé par le shader de sommet.
 
-<p>&lt;&lt;how to use&gt;&gt;</p>
+<\<how to use>>
 
-<h3 id="Uniforms">Uniforms</h3>
+### Uniforms
 
-<p>Les <strong>uniforms</strong> sont définis par le code JavaScript et sont disponibles à la fois pour le shader de sommet et pour celui de fragment. Ils sont utilisés pour fournir des valeurs qui seront les mêmes pour tout ce qui est dessiné dans le cadre, telles que les positions et les intensités d'éclairage, la transformation globale et les détails de la perspective, et ainsi de suite.</p>
+Les **uniforms** sont définis par le code JavaScript et sont disponibles à la fois pour le shader de sommet et pour celui de fragment. Ils sont utilisés pour fournir des valeurs qui seront les mêmes pour tout ce qui est dessiné dans le cadre, telles que les positions et les intensités d'éclairage, la transformation globale et les détails de la perspective, et ainsi de suite.
 
-<p>&lt;&lt;add details&gt;&gt;</p>
+<\<add details>>
 
-<h2 id="Tampons">Tampons</h2>
+## Tampons
 
-<p>&lt;&lt;add information&gt;&gt;</p>
+<\<add information>>
 
-<h2 id="Textures">Textures</h2>
+## Textures
 
-<p>&lt;&lt;add information&gt;&gt;</p>
+<\<add information>>
diff --git a/files/fr/web/api/webgl_api/index.md b/files/fr/web/api/webgl_api/index.md
index cd73e5b62b..23d20579b5 100644
--- a/files/fr/web/api/webgl_api/index.md
+++ b/files/fr/web/api/webgl_api/index.md
@@ -12,224 +12,173 @@ tags:
   - WebGL
 translation_of: Web/API/WebGL_API
 ---
-<div>{{WebGLSidebar}}</div>
-
-<p>WebGL (Bibliothèque de Graphismes Web) est une API JavaScript pour l'affichage de graphismes 2D et 3D dans n'importe quel navigateur web compatible sans utilisation de modules complémentaires. WebGl réalise cela en introduisant une API qui se conforme de façon très proche à OpenGL ES 2.0 et qui peut être utilisée dans les éléments <a href="/fr/docs/HTML/Canvas">canvas </a>d'HTML5.</p>
-
-<p>Le support pour WebGL est présent dans <a href="/fr-FR/Firefox">Firefox</a> 4+, <a href="http://www.google.com/chrome/">Google Chrome</a> 9+, <a href="http://www.opera.com/">Opera</a> 12+, <a href="http://www.apple.com/safari/">Safari </a>5.1+ and <a href="http://windows.microsoft.com/fr-fr/internet-explorer/browser-ie">Internet Explorer</a> 11+ ; toutefois, l'appareil de l'utilisateur doit aussi avoir le matériel qui supporte ces fonctionnalités.</p>
-
-<p>L'élément {{HTMLElement("canvas")}} est aussi utilisé par <a href="/fr-FR/docs/Web/API/Canvas_API">Canvas 2D</a> pour faire des graphismes 2D sur les pages web.</p>
-
-<h2 id="Référence">Référence</h2>
-
-<h3 id="Interfaces_standard">Interfaces standard</h3>
-
-<ul>
- <li>{{domxref("WebGLRenderingContext")}}</li>
- <li>{{domxref("WebGL2RenderingContext")}} {{experimental_inline}}</li>
- <li>{{domxref("WebGLActiveInfo")}}</li>
- <li>{{domxref("WebGLBuffer")}}</li>
- <li>{{domxref("WebGLContextEvent")}}</li>
- <li>{{domxref("WebGLFramebuffer")}}</li>
- <li>{{domxref("WebGLProgram")}}</li>
- <li>{{domxref("WebGLQuery")}} {{experimental_inline}}</li>
- <li>{{domxref("WebGLRenderbuffer")}}</li>
- <li>{{domxref("WebGLSampler")}} {{experimental_inline}}</li>
- <li>{{domxref("WebGLShader")}}</li>
- <li>{{domxref("WebGLShaderPrecisionFormat")}}</li>
- <li>{{domxref("WebGLSync")}} {{experimental_inline}}</li>
- <li>{{domxref("WebGLTexture")}}</li>
- <li>{{domxref("WebGLTransformFeedback")}} {{experimental_inline}}</li>
- <li>{{domxref("WebGLUniformLocation")}}</li>
- <li>{{domxref("WebGLVertexArrayObject")}} {{experimental_inline}}</li>
-</ul>
-
-<h3 id="Extensions">Extensions</h3>
-
-<ul>
- <li>{{domxref("ANGLE_instanced_arrays")}}</li>
- <li>{{domxref("EXT_blend_minmax")}}</li>
- <li>{{domxref("EXT_color_buffer_float")}}</li>
- <li>{{domxref("EXT_color_buffer_half_float")}}</li>
- <li>{{domxref("EXT_disjoint_timer_query")}}</li>
- <li>{{domxref("EXT_frag_depth")}}</li>
- <li>{{domxref("EXT_sRGB")}}</li>
- <li>{{domxref("EXT_shader_texture_lod")}}</li>
- <li>{{domxref("EXT_texture_filter_anisotropic")}}</li>
- <li>{{domxref("OES_element_index_uint")}}</li>
- <li>{{domxref("OES_standard_derivatives")}}</li>
- <li>{{domxref("OES_texture_float")}}</li>
- <li>{{domxref("OES_texture_float_linear")}}</li>
- <li>{{domxref("OES_texture_half_float")}}</li>
- <li>{{domxref("OES_texture_half_float_linear")}}</li>
- <li>{{domxref("OES_vertex_array_object")}}</li>
- <li>{{domxref("WEBGL_color_buffer_float")}}</li>
- <li>{{domxref("WEBGL_compressed_texture_astc")}}</li>
- <li>{{domxref("WEBGL_compressed_texture_atc")}}</li>
- <li>{{domxref("WEBGL_compressed_texture_etc")}}</li>
- <li>{{domxref("WEBGL_compressed_texture_etc1")}}</li>
- <li>{{domxref("WEBGL_compressed_texture_pvrtc")}}</li>
- <li>{{domxref("WEBGL_compressed_texture_s3tc")}}</li>
- <li>{{domxref("WEBGL_compressed_texture_s3tc_srgb")}}</li>
- <li>{{domxref("WEBGL_debug_renderer_info")}}</li>
- <li>{{domxref("WEBGL_debug_shaders")}}</li>
- <li>{{domxref("WEBGL_depth_texture")}}</li>
- <li>{{domxref("WEBGL_draw_buffers")}}</li>
- <li>{{domxref("WEBGL_lose_context")}}</li>
-</ul>
-
-<h3 id="Evènements">Evènements</h3>
-
-<ul>
- <li>{{Event("webglcontextlost")}}</li>
- <li>{{Event("webglcontextrestored")}}</li>
- <li>{{Event("webglcontextcreationerror")}}</li>
-</ul>
-
-<h3 id="Constantes_et_types">Constantes et types</h3>
-
-<ul>
- <li><a href="/fr-FR/docs/Web/API/WebGL_API/Constants">Constantes WebGL</a></li>
- <li><a href="/fr-FR/docs/Web/API/WebGL_API/Types">Types WebGL </a></li>
-</ul>
-
-<h3 id="WebGL_2">WebGL 2</h3>
-
-<p>WebGL 2 est une mise à jour majeure de WebGL, qui est fournie à travers l'interface {{domxref("WebGL2RenderingContext")}}. Elle est basée sur OpenGL ES 3.0, et ses nouvelles fonctionnalités comprennent :</p>
-
-<ul>
- <li>les <a href="/fr-FR/docs/Web/API/WebGL2RenderingContext/texImage3D">textures 3D</a>,</li>
- <li>les <a href="/fr-FR/docs/Web/API/WebGLSampler">objets Sampler</a>,</li>
- <li>les <a href="/fr-FR/docs/Web/API/WebGL2RenderingContext#Uniform_buffer_objects">objets de tampon Uniform</a>,</li>
- <li>les <a href="/fr-FR/docs/Web/API/WebGLSync">objets Sync</a>,</li>
- <li>les <a href="/en-US/docs/Web/API/WebGLQuery">objets Query</a>,</li>
- <li>les <a href="/fr-FR/docs/Web/API/WebGLTransformFeedback">objets Tranform Feedback</a>,</li>
- <li>des extensions promues, qui sont maintenant essentielles pour WebGL 2 : les <a href="/fr-FR/docs/Web/API/WebGLVertexArrayObject">objets Vertex Array</a>, l'<a href="/fr-FR/docs/Web/API/WebGL2RenderingContext/drawArraysInstanced">instanciation</a>, les <a href="/fr-FR/docs/Web/API/WebGL2RenderingContext/drawBuffers">cibles de rendu multiples</a>, la <a href="/fr-FR/docs/Web/API/EXT_frag_depth">profondeur de fragment</a>.</li>
-</ul>
-
-<p>Voir aussi le post de blog <a href="https://hacks.mozilla.org/2017/01/webgl-2-lands-in-firefox/">"WebGL 2 lands in Firefox"</a> et <a href="http://webglsamples.org/WebGL2Samples/">webglsamples.org/WebGL2Samples</a> pour quelques démos.</p>
-
-<h2 id="Guides_et_tutoriels">Guides et tutoriels</h2>
-
-<p>Ci-dessous, vous pourrez trouver divers guides pour vous aider à apprendre les concepts WebGL, et des tutoriels qui proposent des leçons et des exemples pas-à-pas.</p>
-
-<h3 id="Guides">Guides</h3>
-
-<dl>
- <dt><a href="/fr-FR/docs/Web/API/WebGL_API/Data">Données en WebGL</a></dt>
- <dd>Un guide pour les variables, les tampons et autres types de données utilisés lors de l'écriture de code WebGL.</dd>
- <dt><a href="/fr-FR/docs/Web/API/WebGL_API/WebGL_best_practices">Meilleures pratiques WebGL</a></dt>
- <dd>Des indications et des suggestions pour vous aider à améliore la qualité, les performances et la fiabilité de votre contenu WebGL.</dd>
- <dt><a href="/fr-FR/docs/Web/API/WebGL_API/Using_Extensions">Utilisation des extensions</a></dt>
- <dd>Un guide pour l'utilisation des extensions WebGL.</dd>
-</dl>
-
-<h3 id="Tutoriels">Tutoriels</h3>
-
-<dl>
- <dt><a href="/fr-FR/docs/Web/API/WebGL_API/Tutorial">Tutoriel WebGL</a></dt>
- <dd>Un guide pour les débutants sur les concepts essentiels de WebGL. Un bon endroit pour démarrer si vous n'avez pas d'expérience antérieure de WebGL.</dd>
-</dl>
-
-<h3 id="Exemples">Exemples</h3>
-
-<dl>
- <dt><a href="/fr-FR/docs/Web/API/WebGL_API/Basic_2D_animation_example">Un exemple de base d'animation WebGL 2D</a></dt>
- <dd>Cet exemple montre l'animation simple d'une forme monochrome. Les sujets abordés sont l'adaptation aux différences de ratio d'aspect, une fonction pour construire des programmes de shader à partir d'ensembles de plusieurs shaders, et les bases du dessin dans WebGL.</dd>
-</dl>
-
-<h3 id="Tutoriels_avancés">Tutoriels avancés</h3>
-
-<dl>
- <dt><a href="/fr-FR/docs/Web/API/WebGL_API/WebGL_model_view_projection">Projection de vue de modèle WebGL</a></dt>
- <dd>Une explication détaillée des trois matrices de base qui sont typiquement utilisées pour représenter une vue d'un objet 3D : les matrices de modèle, de vue et de projection.</dd>
- <dt><a href="/fr-FR/docs/Web/API/WebGL_API/Matrix_math_for_the_web">Mathématiques matricielles pour le web</a></dt>
- <dd>Un guide utile sur le fonctionnement des matrices de transformation 3D, qui peut être utilisé sur le web - à la fois pour les calculs WebGL et dans les transformations CSS3.</dd>
-</dl>
-
-<h2 id="Ressources">Ressources</h2>
-
-<ul>
- <li><a href="https://www.youtube.com/embed/H4c8t6myAWU/?feature=player_detailpage">Raw WebGL: An introduction to WebGL</a> Une conférence de Nick Desaulniers qui présente les bases de WebGL. C'est un bon endroit pour commencer si vous n'avez jamais fait de programmation graphique de bas niveau.</li>
- <li><a href="http://www.khronos.org/webgl/">Khronos WebGL site</a> Le site principal pour WebGL chez le groupe Khronos.</li>
- <li><a href="http://learningwebgl.com/blog/?page_id=1217">Learning WebGL</a> Un site proposant des tutoriels sur la façon d'utiliser WebGL.</li>
- <li><a href="http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/">WebGL Fundamentals</a> Un tutoriel de base sur les fondamentaux de WebGL.</li>
- <li><a href="http://webglplayground.net/">WebGL playground</a> Un outil en ligne pour créer et partager des projets WebGL. Bon pour le prototypage rapide et l'expérimentation.</li>
- <li><a href="http://www.webglacademy.com/">WebGL Academy</a> Un éditeur HTML / JavaScript proposant des tutoriels pour apprendre les bases de la programmation webgl.</li>
- <li><a href="http://webglstats.com/">WebGL Stats</a> Un site proposant des statistiques sur les possibilités WebGL des navigateurs sur différentes plates-formes.</li>
-</ul>
-
-<h3 id="Bibliothèques">Bibliothèques</h3>
-
-<ul>
- <li><a href="https://github.com/toji/gl-matrix">glMatrix</a> Bibliothèque matricielle et vectorielle JavaScript pour les applications WebGL hautes performances</li>
- <li><a href="http://sylvester.jcoglan.com/">Sylvester</a> Une bibliothèque open source pour manipuler des vecteurs et des matrices. Non optimisée pour WebGL mais extrêmement robuste.</li>
-</ul>
-
-<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('WebGL')}}</td>
-   <td>{{Spec2('WebGL')}}</td>
-   <td>Définition. Basée sur OpenGL ES 2.0</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('WebGL2')}}</td>
-   <td>{{Spec2('WebGL2')}}</td>
-   <td>Construite au-dessus de WebGL 1. Basée sur OpenGL ES 3.0.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('OpenGL ES 2.0')}}</td>
-   <td>{{Spec2('OpenGL ES 2.0')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('OpenGL ES 3.0')}}</td>
-   <td>{{Spec2('OpenGL ES 3.0')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<h3 id="WebGL_1">WebGL 1</h3>
-
-<p>{{Compat("api.WebGLRenderingContext", 0)}}</p>
-
-<h3 id="WebGL_2_2">WebGL 2</h3>
-
-<p>{{Compat("api.WebGL2RenderingContext", 0)}}</p>
-
-<h3 id="Notes_de_compatibilité">Notes de compatibilité</h3>
-
-<p>En plus du navigateur, la GPU elle-même doit également prendre en charge la fonctionnalité. Ainsi, par exemple, S3 Texture Compression (S3TC) n'est disponible que sur les tablettes à base de Tegra. La plupart des navigateurs rendent le contexte WebGL disponible via le nom de contexte <code>webgl</code>, mais les plus anciens ont aussi besoin d'<code>experimental-webgl</code>. De plus, le prochain <a href="/fr-FR/docs/Web/API/WebGL2RenderingContext">WebGL 2</a> sera entièrement rétrocompatible et comprendra le nom de contexte <code>webgl2</code>.</p>
-
-<h3 id="Notes_Gecko">Notes Gecko</h3>
-
-<h4 id="Débogage_et_test_WebGL">Débogage et test WebGL</h4>
-
-<p>À partir de Gecko 10.0 {{geckoRelease("10.0")}}, deux préférences sont disponibles pour vous permettre de contrôler les fonctionnalités de WebGL à des fins de test :</p>
-
-<dl>
- <dt><code>webgl.min_capability_mode</code></dt>
- <dd>Propriété booléenne qui, lorsqu'elle est <code>true</code>, active un mode de possibilités minimales. Dans ce mode, WebGL est configuré pour prendre en charge uniquement le jeu de fonctionnalités minimal et les fonctionnalités requises par la spécification WebGL. Cela vous permet de vous assurer que votre code WebGL fonctionnera sur n'importe quel appareil ou navigateur, indépendamment de leurs possibilités. Elle est <code>false</code> par défaut.</dd>
- <dt><code>webgl.disable_extensions</code></dt>
- <dd>Propriété booléenne qui, lorsqu'elle est <code>true</code>, désactive toutes les extensions WebGL. Elle est <code>false</code> par défaut.</dd>
-</dl>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr-FR/docs/Web/API/Canvas_API">Canvas</a></li>
- <li><a href="/fr-FR/docs/Web/API/WebGLRenderingContext/getSupportedExtensions#Browser_compatibility">Informations de compatibilité à propos des extensions WebGL</a></li>
-</ul>
+{{WebGLSidebar}}
+
+WebGL (Bibliothèque de Graphismes Web) est une API JavaScript pour l'affichage de graphismes 2D et 3D dans n'importe quel navigateur web compatible sans utilisation de modules complémentaires. WebGl réalise cela en introduisant une API qui se conforme de façon très proche à OpenGL ES 2.0 et qui peut être utilisée dans les éléments [canvas ](/fr/docs/HTML/Canvas)d'HTML5.
+
+Le support pour WebGL est présent dans [Firefox](/fr-FR/Firefox) 4+, [Google Chrome](http://www.google.com/chrome/) 9+, [Opera](http://www.opera.com/) 12+, [Safari ](http://www.apple.com/safari/)5.1+ and [Internet Explorer](http://windows.microsoft.com/fr-fr/internet-explorer/browser-ie) 11+ ; toutefois, l'appareil de l'utilisateur doit aussi avoir le matériel qui supporte ces fonctionnalités.
+
+L'élément {{HTMLElement("canvas")}} est aussi utilisé par [Canvas 2D](/fr-FR/docs/Web/API/Canvas_API) pour faire des graphismes 2D sur les pages web.
+
+## Référence
+
+### Interfaces standard
+
+- {{domxref("WebGLRenderingContext")}}
+- {{domxref("WebGL2RenderingContext")}} {{experimental_inline}}
+- {{domxref("WebGLActiveInfo")}}
+- {{domxref("WebGLBuffer")}}
+- {{domxref("WebGLContextEvent")}}
+- {{domxref("WebGLFramebuffer")}}
+- {{domxref("WebGLProgram")}}
+- {{domxref("WebGLQuery")}} {{experimental_inline}}
+- {{domxref("WebGLRenderbuffer")}}
+- {{domxref("WebGLSampler")}} {{experimental_inline}}
+- {{domxref("WebGLShader")}}
+- {{domxref("WebGLShaderPrecisionFormat")}}
+- {{domxref("WebGLSync")}} {{experimental_inline}}
+- {{domxref("WebGLTexture")}}
+- {{domxref("WebGLTransformFeedback")}} {{experimental_inline}}
+- {{domxref("WebGLUniformLocation")}}
+- {{domxref("WebGLVertexArrayObject")}} {{experimental_inline}}
+
+### Extensions
+
+- {{domxref("ANGLE_instanced_arrays")}}
+- {{domxref("EXT_blend_minmax")}}
+- {{domxref("EXT_color_buffer_float")}}
+- {{domxref("EXT_color_buffer_half_float")}}
+- {{domxref("EXT_disjoint_timer_query")}}
+- {{domxref("EXT_frag_depth")}}
+- {{domxref("EXT_sRGB")}}
+- {{domxref("EXT_shader_texture_lod")}}
+- {{domxref("EXT_texture_filter_anisotropic")}}
+- {{domxref("OES_element_index_uint")}}
+- {{domxref("OES_standard_derivatives")}}
+- {{domxref("OES_texture_float")}}
+- {{domxref("OES_texture_float_linear")}}
+- {{domxref("OES_texture_half_float")}}
+- {{domxref("OES_texture_half_float_linear")}}
+- {{domxref("OES_vertex_array_object")}}
+- {{domxref("WEBGL_color_buffer_float")}}
+- {{domxref("WEBGL_compressed_texture_astc")}}
+- {{domxref("WEBGL_compressed_texture_atc")}}
+- {{domxref("WEBGL_compressed_texture_etc")}}
+- {{domxref("WEBGL_compressed_texture_etc1")}}
+- {{domxref("WEBGL_compressed_texture_pvrtc")}}
+- {{domxref("WEBGL_compressed_texture_s3tc")}}
+- {{domxref("WEBGL_compressed_texture_s3tc_srgb")}}
+- {{domxref("WEBGL_debug_renderer_info")}}
+- {{domxref("WEBGL_debug_shaders")}}
+- {{domxref("WEBGL_depth_texture")}}
+- {{domxref("WEBGL_draw_buffers")}}
+- {{domxref("WEBGL_lose_context")}}
+
+### Evènements
+
+- {{Event("webglcontextlost")}}
+- {{Event("webglcontextrestored")}}
+- {{Event("webglcontextcreationerror")}}
+
+### Constantes et types
+
+- [Constantes WebGL](/fr-FR/docs/Web/API/WebGL_API/Constants)
+- [Types WebGL](/fr-FR/docs/Web/API/WebGL_API/Types)
+
+### WebGL 2
+
+WebGL 2 est une mise à jour majeure de WebGL, qui est fournie à travers l'interface {{domxref("WebGL2RenderingContext")}}. Elle est basée sur OpenGL ES 3.0, et ses nouvelles fonctionnalités comprennent :
+
+- les [textures 3D](/fr-FR/docs/Web/API/WebGL2RenderingContext/texImage3D),
+- les [objets Sampler](/fr-FR/docs/Web/API/WebGLSampler),
+- les [objets de tampon Uniform](/fr-FR/docs/Web/API/WebGL2RenderingContext#Uniform_buffer_objects),
+- les [objets Sync](/fr-FR/docs/Web/API/WebGLSync),
+- les [objets Query](/en-US/docs/Web/API/WebGLQuery),
+- les [objets Tranform Feedback](/fr-FR/docs/Web/API/WebGLTransformFeedback),
+- des extensions promues, qui sont maintenant essentielles pour WebGL 2 : les [objets Vertex Array](/fr-FR/docs/Web/API/WebGLVertexArrayObject), l'[instanciation](/fr-FR/docs/Web/API/WebGL2RenderingContext/drawArraysInstanced), les [cibles de rendu multiples](/fr-FR/docs/Web/API/WebGL2RenderingContext/drawBuffers), la [profondeur de fragment](/fr-FR/docs/Web/API/EXT_frag_depth).
+
+Voir aussi le post de blog ["WebGL 2 lands in Firefox"](https://hacks.mozilla.org/2017/01/webgl-2-lands-in-firefox/) et [webglsamples.org/WebGL2Samples](http://webglsamples.org/WebGL2Samples/) pour quelques démos.
+
+## Guides et tutoriels
+
+Ci-dessous, vous pourrez trouver divers guides pour vous aider à apprendre les concepts WebGL, et des tutoriels qui proposent des leçons et des exemples pas-à-pas.
+
+### Guides
+
+- [Données en WebGL](/fr-FR/docs/Web/API/WebGL_API/Data)
+  - : Un guide pour les variables, les tampons et autres types de données utilisés lors de l'écriture de code WebGL.
+- [Meilleures pratiques WebGL](/fr-FR/docs/Web/API/WebGL_API/WebGL_best_practices)
+  - : Des indications et des suggestions pour vous aider à améliore la qualité, les performances et la fiabilité de votre contenu WebGL.
+- [Utilisation des extensions](/fr-FR/docs/Web/API/WebGL_API/Using_Extensions)
+  - : Un guide pour l'utilisation des extensions WebGL.
+
+### Tutoriels
+
+- [Tutoriel WebGL](/fr-FR/docs/Web/API/WebGL_API/Tutorial)
+  - : Un guide pour les débutants sur les concepts essentiels de WebGL. Un bon endroit pour démarrer si vous n'avez pas d'expérience antérieure de WebGL.
+
+### Exemples
+
+- [Un exemple de base d'animation WebGL 2D](/fr-FR/docs/Web/API/WebGL_API/Basic_2D_animation_example)
+  - : Cet exemple montre l'animation simple d'une forme monochrome. Les sujets abordés sont l'adaptation aux différences de ratio d'aspect, une fonction pour construire des programmes de shader à partir d'ensembles de plusieurs shaders, et les bases du dessin dans WebGL.
+
+### Tutoriels avancés
+
+- [Projection de vue de modèle WebGL](/fr-FR/docs/Web/API/WebGL_API/WebGL_model_view_projection)
+  - : Une explication détaillée des trois matrices de base qui sont typiquement utilisées pour représenter une vue d'un objet 3D : les matrices de modèle, de vue et de projection.
+- [Mathématiques matricielles pour le web](/fr-FR/docs/Web/API/WebGL_API/Matrix_math_for_the_web)
+  - : Un guide utile sur le fonctionnement des matrices de transformation 3D, qui peut être utilisé sur le web - à la fois pour les calculs WebGL et dans les transformations CSS3.
+
+## Ressources
+
+- [Raw WebGL: An introduction to WebGL](https://www.youtube.com/embed/H4c8t6myAWU/?feature=player_detailpage) Une conférence de Nick Desaulniers qui présente les bases de WebGL. C'est un bon endroit pour commencer si vous n'avez jamais fait de programmation graphique de bas niveau.
+- [Khronos WebGL site](http://www.khronos.org/webgl/) Le site principal pour WebGL chez le groupe Khronos.
+- [Learning WebGL](http://learningwebgl.com/blog/?page_id=1217) Un site proposant des tutoriels sur la façon d'utiliser WebGL.
+- [WebGL Fundamentals](http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/) Un tutoriel de base sur les fondamentaux de WebGL.
+- [WebGL playground](http://webglplayground.net/) Un outil en ligne pour créer et partager des projets WebGL. Bon pour le prototypage rapide et l'expérimentation.
+- [WebGL Academy](http://www.webglacademy.com/) Un éditeur HTML / JavaScript proposant des tutoriels pour apprendre les bases de la programmation webgl.
+- [WebGL Stats](http://webglstats.com/) Un site proposant des statistiques sur les possibilités WebGL des navigateurs sur différentes plates-formes.
+
+### Bibliothèques
+
+- [glMatrix](https://github.com/toji/gl-matrix) Bibliothèque matricielle et vectorielle JavaScript pour les applications WebGL hautes performances
+- [Sylvester](http://sylvester.jcoglan.com/) Une bibliothèque open source pour manipuler des vecteurs et des matrices. Non optimisée pour WebGL mais extrêmement robuste.
+
+## Spécifications
+
+| Spécification                            | Statut                               | Commentaire                                               |
+| ---------------------------------------- | ------------------------------------ | --------------------------------------------------------- |
+| {{SpecName('WebGL')}}             | {{Spec2('WebGL')}}             | Définition. Basée sur OpenGL ES 2.0                       |
+| {{SpecName('WebGL2')}}             | {{Spec2('WebGL2')}}             | Construite au-dessus de WebGL 1. Basée sur OpenGL ES 3.0. |
+| {{SpecName('OpenGL ES 2.0')}} | {{Spec2('OpenGL ES 2.0')}} |                                                           |
+| {{SpecName('OpenGL ES 3.0')}} | {{Spec2('OpenGL ES 3.0')}} |                                                           |
+
+## Compatibilité des navigateurs
+
+### WebGL 1
+
+{{Compat("api.WebGLRenderingContext", 0)}}
+
+### WebGL 2
+
+{{Compat("api.WebGL2RenderingContext", 0)}}
+
+### Notes de compatibilité
+
+En plus du navigateur, la GPU elle-même doit également prendre en charge la fonctionnalité. Ainsi, par exemple, S3 Texture Compression (S3TC) n'est disponible que sur les tablettes à base de Tegra. La plupart des navigateurs rendent le contexte WebGL disponible via le nom de contexte `webgl`, mais les plus anciens ont aussi besoin d'`experimental-webgl`. De plus, le prochain [WebGL 2](/fr-FR/docs/Web/API/WebGL2RenderingContext) sera entièrement rétrocompatible et comprendra le nom de contexte `webgl2`.
+
+### Notes Gecko
+
+#### Débogage et test WebGL
+
+À partir de Gecko 10.0 {{geckoRelease("10.0")}}, deux préférences sont disponibles pour vous permettre de contrôler les fonctionnalités de WebGL à des fins de test :
+
+- `webgl.min_capability_mode`
+  - : Propriété booléenne qui, lorsqu'elle est `true`, active un mode de possibilités minimales. Dans ce mode, WebGL est configuré pour prendre en charge uniquement le jeu de fonctionnalités minimal et les fonctionnalités requises par la spécification WebGL. Cela vous permet de vous assurer que votre code WebGL fonctionnera sur n'importe quel appareil ou navigateur, indépendamment de leurs possibilités. Elle est `false` par défaut.
+- `webgl.disable_extensions`
+  - : Propriété booléenne qui, lorsqu'elle est `true`, désactive toutes les extensions WebGL. Elle est `false` par défaut.
+
+## Voir aussi
+
+- [Canvas](/fr-FR/docs/Web/API/Canvas_API)
+- [Informations de compatibilité à propos des extensions WebGL](/fr-FR/docs/Web/API/WebGLRenderingContext/getSupportedExtensions#Browser_compatibility)
diff --git a/files/fr/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.md b/files/fr/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.md
index 2369abb5e4..4beb39300e 100644
--- a/files/fr/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.md
+++ b/files/fr/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.md
@@ -15,294 +15,285 @@ tags:
 translation_of: Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context
 original_slug: Web/API/WebGL_API/Tutorial/Ajouter_du_contenu_à_WebGL
 ---
-<p>{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL")}}</p>
+{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL")}}
 
-<p>Une fois que vous avez correctement créé un contexte WebGL, vous pouvez commencer à y dessiner. Une chose simple que nous pouvons faire est de dessiner un simple carré 2D sans texture, commençons donc par là, en construisant un code pour dessiner un carré 2D.</p>
+Une fois que vous avez correctement créé un contexte WebGL, vous pouvez commencer à y dessiner. Une chose simple que nous pouvons faire est de dessiner un simple carré 2D sans texture, commençons donc par là, en construisant un code pour dessiner un carré 2D.
 
-<h2 id="Dessiner_la_scène">Dessiner la scène</h2>
+## Dessiner la scène
 
-<p>La chose la plus importante à comprendre avant que nous ne commencions est que, bien que nous dessinions seulement un carré 2D dans cet exemple, nous sommes toujours en train de dessiner dans un espace 3D. Nous dessinons juste un carré et nous le mettons exactement en face de la caméra, perpendiculairement à la direction de vision. Nous avons besoin de définir les shaders qui créeront la couleur pour notre scène simple, et qui dessineront notre objet. Cela définira comment notre carré 2D apparaîtra à l'écran.</p>
+La chose la plus importante à comprendre avant que nous ne commencions est que, bien que nous dessinions seulement un carré 2D dans cet exemple, nous sommes toujours en train de dessiner dans un espace 3D. Nous dessinons juste un carré et nous le mettons exactement en face de la caméra, perpendiculairement à la direction de vision. Nous avons besoin de définir les shaders qui créeront la couleur pour notre scène simple, et qui dessineront notre objet. Cela définira comment notre carré 2D apparaîtra à l'écran.
 
-<h3 id="Les_shaders">Les shaders</h3>
+### Les shaders
 
-<p>Un shader est un programme, écrit en utilisant le <a href="https://www.khronos.org/files/opengles_shading_language.pdf">OpenGL ES Shading Language</a> (GLSL), qui utilise les informations des sommets constituant une forme, et qui génère les données nécessaires pour faire un rendu des pixels à l'écran : nommément, les positions des pixels et leurs couleurs.</p>
+Un shader est un programme, écrit en utilisant le [OpenGL ES Shading Language](https://www.khronos.org/files/opengles_shading_language.pdf) (GLSL), qui utilise les informations des sommets constituant une forme, et qui génère les données nécessaires pour faire un rendu des pixels à l'écran : nommément, les positions des pixels et leurs couleurs.
 
-<p>Deux fonctions de shader sont exécutées lors du dessin d'un contenu WebGL : le <strong>shader  de sommet</strong> et le <strong>shader de fragment</strong>. Vous les écrivez en GLSL et vous passez le texte du code à WebGL pour qu'il soit compilé pour exécution dans la GPU. Pris conjointement, un ensemble de shaders de sommet et de fragment sont appelés un <strong>programme shader</strong>.</p>
+Deux fonctions de shader sont exécutées lors du dessin d'un contenu WebGL : le **shader  de sommet** et le **shader de fragment**. Vous les écrivez en GLSL et vous passez le texte du code à WebGL pour qu'il soit compilé pour exécution dans la GPU. Pris conjointement, un ensemble de shaders de sommet et de fragment sont appelés un **programme shader**.
 
-<p>Jetons un coup d'œil rapide aux deux types de shaders, en gardant présent à l'esprit l'exemple du dessin d'une forme 2D dans le contexte WebGL.</p>
+Jetons un coup d'œil rapide aux deux types de shaders, en gardant présent à l'esprit l'exemple du dessin d'une forme 2D dans le contexte WebGL.
 
-<h4 id="Le_shader_de_sommet">Le shader de sommet</h4>
+#### Le shader de sommet
 
-<p>Chaque fois qu'une forme est rendue, le shader de sommet est exécuté pour chaque sommet de la forme. Son travail consiste à effectuer les transformations souhaitées sur la position du sommet.</p>
+Chaque fois qu'une forme est rendue, le shader de sommet est exécuté pour chaque sommet de la forme. Son travail consiste à effectuer les transformations souhaitées sur la position du sommet.
 
-<p>Les informations de position sont stockées dans une variable spéciale fournie par GLSL, appelée <code>gl_Position</code>.</p>
+Les informations de position sont stockées dans une variable spéciale fournie par GLSL, appelée `gl_Position`.
 
-<p>Le shader de sommet peut, au besoin, aussi faire des choses comme déterminer les coordonnées dans la texture des faces du {{interwiki ("wikipedia", "texel")}} à appliquer au sommet, appliquer les normales pour déterminer le facteur d'éclairage à appliquer au sommet, et ainsi de suite. Ces informations peuvent alors être stockées dans des variations ou des attributs comme approprié, pour être partagées avec le shader de fragment.</p>
+Le shader de sommet peut, au besoin, aussi faire des choses comme déterminer les coordonnées dans la texture des faces du {{interwiki ("wikipedia", "texel")}} à appliquer au sommet, appliquer les normales pour déterminer le facteur d'éclairage à appliquer au sommet, et ainsi de suite. Ces informations peuvent alors être stockées dans des variations ou des attributs comme approprié, pour être partagées avec le shader de fragment.
 
-<p>Notre shader de sommet ci-dessous reçoit des valeurs de position de sommet à partir d'un attribut que nous définissons, appelé <code>aVertexPosition</code>. Cette position est ensuite multipliée par deux matrices 4x4 que nous fournissons, appelées <code>uProjectionMatrix</code> et <code>uModelMatrix</code> ; <code>gl_Position</code> est définie comme étant le résultat. Pour plus d'informations sur la projection et autres matrices, <a href="https://webglfundamentals.org/webgl/lessons/webgl-3d-perspective.html">vous pourriez trouver cet article utile</a>.</p>
+Notre shader de sommet ci-dessous reçoit des valeurs de position de sommet à partir d'un attribut que nous définissons, appelé `aVertexPosition`. Cette position est ensuite multipliée par deux matrices 4x4 que nous fournissons, appelées `uProjectionMatrix` et `uModelMatrix` ; `gl_Position` est définie comme étant le résultat. Pour plus d'informations sur la projection et autres matrices, [vous pourriez trouver cet article utile](https://webglfundamentals.org/webgl/lessons/webgl-3d-perspective.html).
 
-<pre><code>// Programme shader de sommet
+    // Programme shader de sommet
 
-const vsSource = `
-  attribute vec4 aVertexPosition;
+    const vsSource = `
+      attribute vec4 aVertexPosition;
 
-  uniform mat4 uModelViewMatrix;
-  uniform mat4 uProjectionMatrix;
+      uniform mat4 uModelViewMatrix;
+      uniform mat4 uProjectionMatrix;
 
-  void main() {
-    gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
-  }
-`;</code></pre>
+      void main() {
+        gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
+      }
+    `;
 
-<p>Dans cet exemple, nous ne calculons pas d'éclairage du tout, puisque nous n'en avons pas encore appliqué à la scène. Cela viendra plus tard, dans l'exemple <a href="/fr-FR/docs/Web/API/WebGL_API/Tutorial/Lighting_in_WebGL">Éclairage en WebGL</a>. Notez également l'absence de tout travail sur les textures ici ; cela sera ajouté dans <a href="/fr-FR/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL">Utilisation de textures en WebGL</a>.</p>
+Dans cet exemple, nous ne calculons pas d'éclairage du tout, puisque nous n'en avons pas encore appliqué à la scène. Cela viendra plus tard, dans l'exemple [Éclairage en WebGL](/fr-FR/docs/Web/API/WebGL_API/Tutorial/Lighting_in_WebGL). Notez également l'absence de tout travail sur les textures ici ; cela sera ajouté dans [Utilisation de textures en WebGL](/fr-FR/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL).
 
-<h4 id="Le_shader_de_fragment">Le shader de fragment</h4>
+#### Le shader de fragment
 
-<p>Le <strong>shader de fragment</strong> est appelé une fois pour chaque pixel de chaque forme à dessiner, une fois que les sommets de la forme ont été traités par le shader de sommet. Son travail consiste à déterminer la couleur de ce pixel en déterminant quel texel (c'est-à-dire le pixel de la texture de la forme) appliquer au pixel, à obtenir la couleur de ce texel, puis à appliquer l'éclairage approprié à la couleur. La couleur est ensuite renvoyée à la couche WebGL en la stockant dans la variable spéciale <code>gl_FragColor</code>. Cette couleur est alors dessinée à l'écran dans la position correcte pour le pixel correspondant de la forme.</p>
+Le **shader de fragment** est appelé une fois pour chaque pixel de chaque forme à dessiner, une fois que les sommets de la forme ont été traités par le shader de sommet. Son travail consiste à déterminer la couleur de ce pixel en déterminant quel texel (c'est-à-dire le pixel de la texture de la forme) appliquer au pixel, à obtenir la couleur de ce texel, puis à appliquer l'éclairage approprié à la couleur. La couleur est ensuite renvoyée à la couche WebGL en la stockant dans la variable spéciale `gl_FragColor`. Cette couleur est alors dessinée à l'écran dans la position correcte pour le pixel correspondant de la forme.
 
-<p>Dans ce cas, nous retournons simplement du blanc à chaque fois, car nous sommes seulement en train de dessiner un carré blanc, sans éclairage.</p>
+Dans ce cas, nous retournons simplement du blanc à chaque fois, car nous sommes seulement en train de dessiner un carré blanc, sans éclairage.
 
-<pre><code>  const fsSource = `
-    void main() {
-      gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
-    }
-  `;</code>
-</pre>
-
-<h3 id="Initialisation_des_shaders">Initialisation des shaders</h3>
-
-<p>Maintenant que nous avons défini les deux shaders, nous devons les transmettre à WebGL, les compiler et les lier ensemble. Le code ci-dessous crée les deux shaders en appelant <code>loadShader()</code>, lui passant le type et la source du shader. Il crée alors un programme, attache les shaders et les relie ensemble. Si la compilation ou la liaison échoue, le code affiche une alerte.</p>
-
-<pre><code>//
-// Initialiser un programme shader, de façon à ce que WebGL sache comment dessiner nos données
-//
-function initShaderProgram(gl, vsSource, fsSource) {
-  const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
-  const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);
-
-  // Créer le programme shader
+      const fsSource = `
+        void main() {
+          gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
+        }
+      `;
 
-  const shaderProgram = gl.createProgram();
-  gl.attachShader(shaderProgram, vertexShader);
-  gl.attachShader(shaderProgram, fragmentShader);
-  gl.linkProgram(shaderProgram);
+### Initialisation des shaders
 
-  // Si la création du programme shader a échoué, alerte
+Maintenant que nous avons défini les deux shaders, nous devons les transmettre à WebGL, les compiler et les lier ensemble. Le code ci-dessous crée les deux shaders en appelant `loadShader()`, lui passant le type et la source du shader. Il crée alors un programme, attache les shaders et les relie ensemble. Si la compilation ou la liaison échoue, le code affiche une alerte.
 
-  if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
-    alert('Impossible d'initialiser le programme shader : ' + gl.getProgramInfoLog(shaderProgram));
-    return null;
-  }
+    //
+    // Initialiser un programme shader, de façon à ce que WebGL sache comment dessiner nos données
+    //
+    function initShaderProgram(gl, vsSource, fsSource) {
+      const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
+      const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);
 
-  return shaderProgram;
-}
+      // Créer le programme shader
 
-//
-// Crée un shader du type fourni, charge le source et le compile.
-//
-function loadShader(gl, type, source) {
-  const shader = gl.createShader(type);
+      const shaderProgram = gl.createProgram();
+      gl.attachShader(shaderProgram, vertexShader);
+      gl.attachShader(shaderProgram, fragmentShader);
+      gl.linkProgram(shaderProgram);
 
-  // Envoyer le source à l'objet shader
+      // Si la création du programme shader a échoué, alerte
 
-  gl.shaderSource(shader, source);
+      if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
+        alert('Impossible d'initialiser le programme shader : ' + gl.getProgramInfoLog(shaderProgram));
+        return null;
+      }
 
-  // Compiler le programme shader
+      return shaderProgram;
+    }
 
-  gl.compileShader(shader);
+    //
+    // Crée un shader du type fourni, charge le source et le compile.
+    //
+    function loadShader(gl, type, source) {
+      const shader = gl.createShader(type);
 
-  // Vérifier s'il a ét compilé avec succès
+      // Envoyer le source à l'objet shader
 
-  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
-    alert('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));
-    gl.deleteShader(shader);
-    return null;
-  }
+      gl.shaderSource(shader, source);
 
-  return shader;
-}</code></pre>
+      // Compiler le programme shader
 
-<p>La fonction <code>loadShader()</code> prend en entrée le contexte WebGL, le type de shader et le code source, puis crée et compile le shader comme suit :</p>
+      gl.compileShader(shader);
 
-<ol>
- <li>un nouveau shader est créé en appelant {{domxref("WebGLRenderingContext.createShader", "gl.createShader()")}} ;</li>
- <li>le code source du shader est envoyé au shader en appelant {{domxref("WebGLRenderingContext.shaderSource", "gl.shaderSource()")}} ;</li>
- <li>une fois que le shader a le code source, il est compilé en utilisant {{domxref("WebGLRenderingContext.compileShader", "gl.compileShader()")}} ;</li>
- <li>pour vérifier que le shader a été compilé avec succès, le paramètre <code>gl.COMPILE_STATUS</code> du shader est vérifié ; pour obtenir sa valeur, nous appelons {{domxref("WebGLRenderingContext.getShaderParameter", "gl.getShaderParameter()")}}, en indiquant le shader et le nom du paramètre que nous voulons vérifier (<code>gl.COMPILE_STATUS</code>) ; si c'est <code>false</code>, nous savons que le shader n'a pas pu être compilé, aussi nous affichons une alerte avec les informations du journalisation obtenues du compilateur en utilisant {{domxref ("WebGLRenderingContext.getShaderInfoLog", "gl.getShaderInfoLog()")}}, puis nous supprimons le shader et nous renvoyons <code>null</code> pour indiquer l'échec du chargement du shader ;</li>
- <li>si le shader a été chargé et compilé avec succès, le shader compilé est renvoyé à l'appelant.</li>
-</ol>
+      // Vérifier s'il a ét compilé avec succès
 
-<p>Pour utiliser ce code, nous l'appelons de la façon suivante :</p>
+      if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+        alert('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));
+        gl.deleteShader(shader);
+        return null;
+      }
 
-<pre><code> const shaderProgram = initShaderProgram(gl, vsSource, fsSource);</code>
-</pre>
+      return shader;
+    }
 
-<p>Après avoir créé un programme de shaders, nous devons rechercher les emplacements que WebGL a assignés à nos entrées. Dans ce cas, nous avons un attribut et deux uniformes. Les attributs reçoivent des valeurs des tampons. Chaque itération du shader des sommets reçoit la valeur suivante du tampon affecté à cet attribut. Les uniformes sont similaires aux variables globales JavaScript. Ils conservent la même valeur pour toutes les itérations d'un shader. Du fait que les attributs et les emplacements des uniformes sont spécifiques à un programme de shader donné, nous les stockerons ensemble pour les rendre plus faciles à transmettre.</p>
+La fonction `loadShader()` prend en entrée le contexte WebGL, le type de shader et le code source, puis crée et compile le shader comme suit :
 
-<pre><code>  const programInfo = {
-    program: shaderProgram,
-    attribLocations: {
-      vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),
-    },
-    uniformLocations: {
-      projectionMatrix: gl.getUniformLocation(shaderProgram, 'uProjectionMatrix'),
-      modelViewMatrix: gl.getUniformLocation(shaderProgram, 'uModelViewMatrix'),
-    },
-  };</code>
-</pre>
+1.  un nouveau shader est créé en appelant {{domxref("WebGLRenderingContext.createShader", "gl.createShader()")}} ;
+2.  le code source du shader est envoyé au shader en appelant {{domxref("WebGLRenderingContext.shaderSource", "gl.shaderSource()")}} ;
+3.  une fois que le shader a le code source, il est compilé en utilisant {{domxref("WebGLRenderingContext.compileShader", "gl.compileShader()")}} ;
+4.  pour vérifier que le shader a été compilé avec succès, le paramètre `gl.COMPILE_STATUS` du shader est vérifié ; pour obtenir sa valeur, nous appelons {{domxref("WebGLRenderingContext.getShaderParameter", "gl.getShaderParameter()")}}, en indiquant le shader et le nom du paramètre que nous voulons vérifier (`gl.COMPILE_STATUS`) ; si c'est `false`, nous savons que le shader n'a pas pu être compilé, aussi nous affichons une alerte avec les informations du journalisation obtenues du compilateur en utilisant {{domxref ("WebGLRenderingContext.getShaderInfoLog", "gl.getShaderInfoLog()")}}, puis nous supprimons le shader et nous renvoyons `null` pour indiquer l'échec du chargement du shader ;
+5.  si le shader a été chargé et compilé avec succès, le shader compilé est renvoyé à l'appelant.
 
-<h2 id="Création_du_carré_2D">Création du carré 2D</h2>
+Pour utiliser ce code, nous l'appelons de la façon suivante :
 
-<p>Avant de pouvoir faire un rendu de notre carré 2D, nous devons créer le tampon qui contiendra les positions de ses sommets et y placer les positions des sommets. Nous ferons cela en utilisant une fonction que nous appelerons <code>initBuffers()</code> ; à mesure que nous explorerons des concepts WebGL plus avancés, cette routine sera augmentée pour créer plus d'objets 3D, et plus complexes.</p>
+     const shaderProgram = initShaderProgram(gl, vsSource, fsSource);
 
-<pre><code>function initBuffers(gl) {
+Après avoir créé un programme de shaders, nous devons rechercher les emplacements que WebGL a assignés à nos entrées. Dans ce cas, nous avons un attribut et deux uniformes. Les attributs reçoivent des valeurs des tampons. Chaque itération du shader des sommets reçoit la valeur suivante du tampon affecté à cet attribut. Les uniformes sont similaires aux variables globales JavaScript. Ils conservent la même valeur pour toutes les itérations d'un shader. Du fait que les attributs et les emplacements des uniformes sont spécifiques à un programme de shader donné, nous les stockerons ensemble pour les rendre plus faciles à transmettre.
 
-  // Créer un tampon des positions pour le carré.
+      const programInfo = {
+        program: shaderProgram,
+        attribLocations: {
+          vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),
+        },
+        uniformLocations: {
+          projectionMatrix: gl.getUniformLocation(shaderProgram, 'uProjectionMatrix'),
+          modelViewMatrix: gl.getUniformLocation(shaderProgram, 'uModelViewMatrix'),
+        },
+      };
 
-  const positionBuffer = gl.createBuffer();
+## Création du carré 2D
 
-  // Définir le positionBuffer comme étant celui auquel appliquer les opérations
-  // de tampon à partir d'ici.
+Avant de pouvoir faire un rendu de notre carré 2D, nous devons créer le tampon qui contiendra les positions de ses sommets et y placer les positions des sommets. Nous ferons cela en utilisant une fonction que nous appelerons `initBuffers()` ; à mesure que nous explorerons des concepts WebGL plus avancés, cette routine sera augmentée pour créer plus d'objets 3D, et plus complexes.
 
-  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+    function initBuffers(gl) {
 
-  // Créer maintenant un tableau des positions pour le carré.
+      // Créer un tampon des positions pour le carré.
 
-  const positions = [
-     1.0,  1.0,
-    -1.0,  1.0,
-     1.0, -1.0,
-    -1.0, -1.0,
-  ];
+      const positionBuffer = gl.createBuffer();
 
-  // Passer mainenant la liste des positions à WebGL pour construire la forme.
-  // Nous faisons cela en créant un Float32Array à partir du tableau JavaScript,
-  // puis en l'utilisant pour remplir le tampon en cours.
+      // Définir le positionBuffer comme étant celui auquel appliquer les opérations
+      // de tampon à partir d'ici.
 
-  gl.bufferData(gl.ARRAY_BUFFER,
-                new Float32Array(positions),
-                gl.STATIC_DRAW);
-
-  return {
-    position: positionBuffer,
-  };
-}</code></pre>
+      gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
 
-<p>Cette routine est assez simpliste du fait de la nature basique de la scène dans cet exemple. Elle commence par appeler la méthode {{domxref ("WebGLRenderingContext.createBuffer()", "createBuffer()")}} de l'objet gl pour obtenir un tampon dans lequel nous stockerons les positions des sommets. Ce dernier est ensuite lié au contexte en appelant la méthode {{domxref ("WebGLRenderingContext.bindBuffer()", "bindBuffer()")}}.</p>
+      // Créer maintenant un tableau des positions pour le carré.
 
-<p>Une fois que cela est fait, nous créons un tableau JavaScript contenant la position de chaque sommet du carré 2D. Ce dernier est ensuite converti en un tableau de flottants et transmis à la méthode {{domxref ("WebGLRenderingContext.bufferData()", "bufferData()")}} de l'objet <code>gl</code> pour définir les positions des sommets de l'objet.</p>
+      const positions = [
+         1.0,  1.0,
+        -1.0,  1.0,
+         1.0, -1.0,
+        -1.0, -1.0,
+      ];
 
-<h2 id="Rendu_de_la_scène">Rendu de la scène</h2>
+      // Passer mainenant la liste des positions à WebGL pour construire la forme.
+      // Nous faisons cela en créant un Float32Array à partir du tableau JavaScript,
+      // puis en l'utilisant pour remplir le tampon en cours.
 
-<p>Une fois que les shaders sont définis, que les emplacements sont retrouvés, et que les positions des sommets du carré 2D sont stockées dans le tampon, nous pouvons faire effectivement le rendu de la scène. Puisque nous n'animons rien dans cet exemple, notre fonction <code>drawScene()</code> est très simple. Elle utilise quelques routines utilitaires que nous décrirons sous peu.</p>
+      gl.bufferData(gl.ARRAY_BUFFER,
+                    new Float32Array(positions),
+                    gl.STATIC_DRAW);
 
-<div class="note">
-<p><strong>Note :</strong> Vous pourriez obtenir une erreur JavaScript indiquant <em>"mat4 n'est pas défini"</em>. Cela signifie qu'il existe une dépendance à <strong>glmatrix</strong>. Vous pouvez inclure <a href="https://mdn.github.io/webgl-examples/tutorial/gl-matrix.js">gl-matrix.js</a> pour résoudre ce problème, comme suggéré <a href="https://github.com/mdn/webgl-examples/issues/20">ici</a>.</p>
-</div>
+      return {
+        position: positionBuffer,
+      };
+    }
 
-<pre><code>function drawScene(gl, programInfo, buffers) {
-  gl.clearColor(0.0, 0.0, 0.0, 1.0);  // effacement en noir, complètement opaque
-  gl.clearDepth(1.0);                 // tout effacer
-  gl.enable(gl.DEPTH_TEST);           // activer le test de profondeur
-  gl.depthFunc(gl.LEQUAL);            // les choses proches cachent les choses lointaines
+Cette routine est assez simpliste du fait de la nature basique de la scène dans cet exemple. Elle commence par appeler la méthode {{domxref ("WebGLRenderingContext.createBuffer()", "createBuffer()")}} de l'objet gl pour obtenir un tampon dans lequel nous stockerons les positions des sommets. Ce dernier est ensuite lié au contexte en appelant la méthode {{domxref ("WebGLRenderingContext.bindBuffer()", "bindBuffer()")}}.
+
+Une fois que cela est fait, nous créons un tableau JavaScript contenant la position de chaque sommet du carré 2D. Ce dernier est ensuite converti en un tableau de flottants et transmis à la méthode {{domxref ("WebGLRenderingContext.bufferData()", "bufferData()")}} de l'objet `gl` pour définir les positions des sommets de l'objet.
+
+## Rendu de la scène
+
+Une fois que les shaders sont définis, que les emplacements sont retrouvés, et que les positions des sommets du carré 2D sont stockées dans le tampon, nous pouvons faire effectivement le rendu de la scène. Puisque nous n'animons rien dans cet exemple, notre fonction `drawScene()` est très simple. Elle utilise quelques routines utilitaires que nous décrirons sous peu.
+
+> **Note :** Vous pourriez obtenir une erreur JavaScript indiquant _"mat4 n'est pas défini"_. Cela signifie qu'il existe une dépendance à **glmatrix**. Vous pouvez inclure [gl-matrix.js](https://mdn.github.io/webgl-examples/tutorial/gl-matrix.js) pour résoudre ce problème, comme suggéré [ici](https://github.com/mdn/webgl-examples/issues/20).
+
+    function drawScene(gl, programInfo, buffers) {
+      gl.clearColor(0.0, 0.0, 0.0, 1.0);  // effacement en noir, complètement opaque
+      gl.clearDepth(1.0);                 // tout effacer
+      gl.enable(gl.DEPTH_TEST);           // activer le test de profondeur
+      gl.depthFunc(gl.LEQUAL);            // les choses proches cachent les choses lointaines
+
+      // Effacer le canevas avant que nous ne commencions à dessiner dessus.
+
+      gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+
+      // Créer une matrice de perspective, une matrice spéciale qui est utilisée pour
+      // simuler la distorsion de la perspective dans une caméra.
+      // Notre champ de vision est de 45 degrés, avec un rapport largeur/hauteur qui
+      // correspond à la taille d'affichage du canvas ;
+      // et nous voulons seulement voir les objets situés entre 0,1 unité et 100 unités
+      // à partir de la caméra.
+
+      const fieldOfView = 45 * Math.PI / 180;   // en radians
+      const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
+      const zNear = 0.1;
+      const zFar = 100.0;
+      const projectionMatrix = mat4.create();
+
+      // note: glmatrix.js a toujours comme premier argument la destination
+      // où stocker le résultat.
+      mat4.perspective(projectionMatrix,
+                       fieldOfView,
+                       aspect,
+                       zNear,
+                       zFar);
+
+      // Définir la position de dessin comme étant le point "origine", qui est
+      // le centre de la scène.
+      const modelViewMatrix = mat4.create();
+
+      // Commencer maintenant à déplacer la position de dessin un peu vers là où
+      // nous voulons commencer à dessiner le carré.
+
+      mat4.translate(modelViewMatrix,     // matrice de destination
+                     modelViewMatrix,     // matrice de déplacement
+                     [-0.0, 0.0, -6.0]);  // quantité de déplacement
+
+      // Indiquer à WebGL comment extraire les positions à partir du tampon des
+      // positions pour les mettre dans l'attribut vertexPosition.
+      {
+        const numComponents = 2;  // extraire 2 valeurs par itération
+        const type = gl.FLOAT;    // les données dans le tampon sont des flottants 32bit
+        const normalize = false;  // ne pas normaliser
+        const stride = 0;         // combien d'octets à extraire entre un jeu de valeurs et le suivant
+                                  // 0 = utiliser le type et numComponents ci-dessus
+        const offset = 0;         // démarrer à partir de combien d'octets dans le tampon
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);
+        gl.vertexAttribPointer(
+            programInfo.attribLocations.vertexPosition,
+            numComponents,
+            type,
+            normalize,
+            stride,
+            offset);
+        gl.enableVertexAttribArray(
+            programInfo.attribLocations.vertexPosition);
+      }
+
+      // Indiquer à WebGL d'utiliser notre programme pour dessiner
+
+      gl.useProgram(programInfo.program);
+
+      // Définir les uniformes du shader
+
+      gl.uniformMatrix4fv(
+          programInfo.uniformLocations.projectionMatrix,
+          false,
+          projectionMatrix);
+      gl.uniformMatrix4fv(
+          programInfo.uniformLocations.modelViewMatrix,
+          false,
+          modelViewMatrix);
+
+      {
+        const offset = 0;
+        const vertexCount = 4;
+        gl.drawArrays(gl.TRIANGLE_STRIP, offset, vertexCount);
+      }
+    }
 
-  // Effacer le canevas avant que nous ne commencions à dessiner dessus.
+La première étape consiste à effacer le canevas avec notre arrière plan ; ensuite, nous établissons la perspective de la caméra. Nous définissons un champ de vision de 45°, avec un rapport largeur sur hauteur qui correspond aux dimensions d'affichage de notre canevas. Nous indiquons également que seuls les objets situés entre 0,1 et 100 unités à partir de la caméra doivent être rendus.
 
-  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+Ensuite, nous établissons la position du carré 2D en chargeant la position de l'origine et en nous déplaçant de 6 unités à partir de la caméra. Après cela, nous lions le tampon des sommets du carré à l'attribut que le shader utilise comme `aVertexPosition` et nous indiquons à WebGL comment en extraire les données. Enfin, nous dessinons l'objet en appelant la méthode {{domxref ("WebGLRenderingContext.drawArrays()", "drawArrays()")}}.
 
-  // Créer une matrice de perspective, une matrice spéciale qui est utilisée pour
-  // simuler la distorsion de la perspective dans une caméra.
-  // Notre champ de vision est de 45 degrés, avec un rapport largeur/hauteur qui
-  // correspond à la taille d'affichage du canvas ;
-  // et nous voulons seulement voir les objets situés entre 0,1 unité et 100 unités
-  // à partir de la caméra.
+{{EmbedGHLiveSample('webgl-examples/tutorial/sample2/index.html', 670, 510) }}
 
-  const fieldOfView = 45 * Math.PI / 180;   // en radians
-  const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
-  const zNear = 0.1;
-  const zFar = 100.0;
-  const projectionMatrix = mat4.create();
+[Voir le code complet](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample2) | [Ouvrir cette démo dans une nouvelle page](http://mdn.github.io/webgl-examples/tutorial/sample2/)
 
-  // note: glmatrix.js a toujours comme premier argument la destination
-  // où stocker le résultat.
-  mat4.perspective(projectionMatrix,
-                   fieldOfView,
-                   aspect,
-                   zNear,
-                   zFar);
+## Opérations utilitaires matricielles
 
-  // Définir la position de dessin comme étant le point "origine", qui est
-  // le centre de la scène.
-  const modelViewMatrix = mat4.create();
+Les opérations matricielles peuvent sembler compliquées, mais [elles sont en fait assez simples si vous en prenez une à la fois](https://webglfundamentals.org/webgl/lessons/webgl-2d-matrices.html). En général, les gens utilisent une bibliothèque matricielle plutôt que d'écrire la leur. Dans notre cas, nous utilisons la bibliothèque populaire [glMatrix](http://glmatrix.net/).
 
-  // Commencer maintenant à déplacer la position de dessin un peu vers là où
-  // nous voulons commencer à dessiner le carré.
+Voir aussi :
 
-  mat4.translate(modelViewMatrix,     // matrice de destination
-                 modelViewMatrix,     // matrice de déplacement
-                 [-0.0, 0.0, -6.0]);  // quantité de déplacement
+- les [matrices](https://webglfundamentals.org/webgl/lessons/webgl-2d-matrices.html) sur WebGLFundamentals ;
+- les [matrices](http://mathworld.wolfram.com/Matrix.html) sur Wolfram MathWorld ;
+- l'article [matrice](<https://fr.wikipedia.org/wiki/Matrice_(math%C3%A9matiques)>) sur Wikipedia.
 
-  // Indiquer à WebGL comment extraire les positions à partir du tampon des
-  // positions pour les mettre dans l'attribut vertexPosition.
-  {
-    const numComponents = 2;  // extraire 2 valeurs par itération
-    const type = gl.FLOAT;    // les données dans le tampon sont des flottants 32bit
-    const normalize = false;  // ne pas normaliser
-    const stride = 0;         // combien d'octets à extraire entre un jeu de valeurs et le suivant
-                              // 0 = utiliser le type et numComponents ci-dessus
-    const offset = 0;         // démarrer à partir de combien d'octets dans le tampon
-    gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);
-    gl.vertexAttribPointer(
-        programInfo.attribLocations.vertexPosition,
-        numComponents,
-        type,
-        normalize,
-        stride,
-        offset);
-    gl.enableVertexAttribArray(
-        programInfo.attribLocations.vertexPosition);
-  }
-
-  // Indiquer à WebGL d'utiliser notre programme pour dessiner
-
-  gl.useProgram(programInfo.program);
-
-  // Définir les uniformes du shader
-
-  gl.uniformMatrix4fv(
-      programInfo.uniformLocations.projectionMatrix,
-      false,
-      projectionMatrix);
-  gl.uniformMatrix4fv(
-      programInfo.uniformLocations.modelViewMatrix,
-      false,
-      modelViewMatrix);
-
-  {
-    const offset = 0;
-    const vertexCount = 4;
-    gl.drawArrays(gl.TRIANGLE_STRIP, offset, vertexCount);
-  }
-}</code></pre>
-
-<p>La première étape consiste à effacer le canevas avec notre arrière plan ; ensuite, nous établissons la perspective de la caméra. Nous définissons un champ de vision de 45°, avec un rapport largeur sur hauteur qui correspond aux dimensions d'affichage de notre canevas. Nous indiquons également que seuls les objets situés entre 0,1 et 100 unités à partir de la caméra doivent être rendus.</p>
-
-<p>Ensuite, nous établissons la position du carré 2D en chargeant la position de l'origine et en nous déplaçant de 6 unités à partir de la caméra. Après cela, nous lions le tampon des sommets du carré à l'attribut que le shader utilise comme <code>aVertexPosition</code> et nous indiquons à WebGL comment en extraire les données. Enfin, nous dessinons l'objet en appelant la méthode {{domxref ("WebGLRenderingContext.drawArrays()", "drawArrays()")}}.</p>
-
-<p>{{EmbedGHLiveSample('webgl-examples/tutorial/sample2/index.html', 670, 510) }}</p>
-
-<p><a href="https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample2">Voir le code complet</a> | <a href="http://mdn.github.io/webgl-examples/tutorial/sample2/">Ouvrir cette démo dans une nouvelle page</a></p>
-
-<h2 id="Opérations_utilitaires_matricielles">Opérations utilitaires matricielles</h2>
-
-<p>Les opérations matricielles peuvent sembler compliquées, mais <a href="https://webglfundamentals.org/webgl/lessons/webgl-2d-matrices.html">elles sont en fait assez simples si vous en prenez une à la fois</a>. En général, les gens utilisent une bibliothèque matricielle plutôt que d'écrire la leur. Dans notre cas, nous utilisons la bibliothèque populaire <a href="http://glmatrix.net/">glMatrix</a>.</p>
-
-<p>Voir aussi :</p>
-
-<ul>
- <li>les <a href="https://webglfundamentals.org/webgl/lessons/webgl-2d-matrices.html">matrices</a> sur WebGLFundamentals ;</li>
- <li>les <a href="http://mathworld.wolfram.com/Matrix.html">matrices</a> sur Wolfram MathWorld ;</li>
- <li>l'article <a href="https://fr.wikipedia.org/wiki/Matrice_(math%C3%A9matiques)">matrice</a> sur Wikipedia.</li>
-</ul>
-
-<p>{{PreviousNext("Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL")}}</p>
+{{PreviousNext("Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL")}}
diff --git a/files/fr/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.md b/files/fr/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.md
index 05b7ea8e12..c8111be23c 100644
--- a/files/fr/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.md
+++ b/files/fr/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.md
@@ -7,54 +7,51 @@ tags:
 translation_of: Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL
 original_slug: Web/API/WebGL_API/Tutorial/Animer_des_objets_avec_WebGL
 ---
-<p>{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL", "Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL") }}</p>
+{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL", "Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL") }}
 
-<p>Dans cet exemple, nous allons faire tourner notre carré 2D.</p>
+Dans cet exemple, nous allons faire tourner notre carré 2D.
 
-<h2 id="Faire_tourner_le_carré">Faire tourner le carré</h2>
+## Faire tourner le carré
 
-<p>Commençons par faire tourner le carré. La première chose dont nous avons besoin est une variable pour mémoriser la rotation courante du carré :</p>
+Commençons par faire tourner le carré. La première chose dont nous avons besoin est une variable pour mémoriser la rotation courante du carré :
 
-<pre class="brush: js">var <code>squareRotation</code> = 0.0;
-</pre>
+```js
+var squareRotation = 0.0;
+```
 
-<p>Maintenant, nous devons modifier la fonction <code>drawScene() </code>pour appliquer la rotation courante du carré quand on le dessine. Après déplacement à la position de dessin initiale du carré, nous appliquons la rotation comme suit :  </p>
+Maintenant, nous devons modifier la fonction `drawScene() `pour appliquer la rotation courante du carré quand on le dessine. Après déplacement à la position de dessin initiale du carré, nous appliquons la rotation comme suit :
 
-<pre><code>  mat4.rotate(modelViewMatrix,  // matrice de destination
-              modelViewMatrix,  // matrice de rotation
-              squareRotation,   // rotation en radians
-              [0, 0, 1]);       // axe autour duquel tourner</code></pre>
+      mat4.rotate(modelViewMatrix,  // matrice de destination
+                  modelViewMatrix,  // matrice de rotation
+                  squareRotation,   // rotation en radians
+                  [0, 0, 1]);       // axe autour duquel tourner
 
-<p>Ceci fait tourner la modelViewMatrix de la valeur courante de <code>squareRotation</code>, autour de l'axe Z.</p>
+Ceci fait tourner la modelViewMatrix de la valeur courante de `squareRotation`, autour de l'axe Z.
 
-<p>Pour réaliser effectivement l'animation, nous avons besoin d'ajouter du code qui change la valeur de <code>squareRotation</code> au fil du temps. Nous pouvons faire cela en créant une nouvelle variable pour mémoriser l'instant auquel nous avons réalisé l'animation pour la dernière fois (appelons le <code>then</code>), puis en ajoutant le code suivant à la fin de la fonction principale :</p>
+Pour réaliser effectivement l'animation, nous avons besoin d'ajouter du code qui change la valeur de `squareRotation` au fil du temps. Nous pouvons faire cela en créant une nouvelle variable pour mémoriser l'instant auquel nous avons réalisé l'animation pour la dernière fois (appelons le `then`), puis en ajoutant le code suivant à la fin de la fonction principale :
 
-<pre><code>var then = 0;
+    var then = 0;
 
-// Dessiner la scène répétitivement
-function render(now) {
-  now *= 0.001;  // conversion en secondes
-  const deltaTime = now - then;
-  then = now;
+    // Dessiner la scène répétitivement
+    function render(now) {
+      now *= 0.001;  // conversion en secondes
+      const deltaTime = now - then;
+      then = now;
 
-  drawScene(gl, programInfo, buffers, deltaTime);
+      drawScene(gl, programInfo, buffers, deltaTime);
 
-  requestAnimationFrame(render);
-}
-requestAnimationFrame(render);</code></pre>
+      requestAnimationFrame(render);
+    }
+    requestAnimationFrame(render);
 
-<p>Ce code utilise <code>requestAnimationFrame</code> pour demander au navigateur d'appeler la fonction "<code>render</code>" à chaque image. <code>requestAnimationFrame</code> nous transmet le temps en millisecondes depuis le chargement de la page. Nous le convertissons en secondes, puis nous lui soustrayons le dernier instant pour calculer <code>deltaTime</code>, qui est le nombre de secondes depuis le rendu de la dernière image. À la fin de drawscene, nous ajoutons le code pour mettre à jour <code>squareRotation</code>.</p>
+Ce code utilise `requestAnimationFrame` pour demander au navigateur d'appeler la fonction "`render`" à chaque image. `requestAnimationFrame` nous transmet le temps en millisecondes depuis le chargement de la page. Nous le convertissons en secondes, puis nous lui soustrayons le dernier instant pour calculer `deltaTime`, qui est le nombre de secondes depuis le rendu de la dernière image. À la fin de drawscene, nous ajoutons le code pour mettre à jour `squareRotation`.
 
-<pre><code>  squareRotation += deltaTime;</code></pre>
+      squareRotation += deltaTime;
 
-<p>Ce code utilise le laps de temps qui s'est écoulé depuis la dernière fois que nous avons mis à jour la valeur <code>squareRotation</code> pour déterminer de combien faire tourner le carré.</p>
+Ce code utilise le laps de temps qui s'est écoulé depuis la dernière fois que nous avons mis à jour la valeur `squareRotation` pour déterminer de combien faire tourner le carré.
 
-<p>{{EmbedGHLiveSample('webgl-examples/tutorial/sample4/index.html', 670, 510) }}</p>
+{{EmbedGHLiveSample('webgl-examples/tutorial/sample4/index.html', 670, 510) }}
 
-<p><a href="https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample4">Voir le code complet</a> | <a href="http://mdn.github.io/webgl-examples/tutorial/sample4/">Ouvrir cette démo dans une nouvelle page</a></p>
+[Voir le code complet](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample4) | [Ouvrir cette démo dans une nouvelle page](http://mdn.github.io/webgl-examples/tutorial/sample4/)
 
-<p>{{PreviousNext("Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL", "Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL") }}</p>
-
-<p> </p>
-
-<p> </p>
+{{PreviousNext("Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL", "Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL") }}
diff --git a/files/fr/web/api/webgl_api/tutorial/animating_textures_in_webgl/index.md b/files/fr/web/api/webgl_api/tutorial/animating_textures_in_webgl/index.md
index df7fcb4658..6844827c75 100644
--- a/files/fr/web/api/webgl_api/tutorial/animating_textures_in_webgl/index.md
+++ b/files/fr/web/api/webgl_api/tutorial/animating_textures_in_webgl/index.md
@@ -9,15 +9,16 @@ tags:
 translation_of: Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL
 original_slug: Web/API/WebGL_API/Tutorial/Animation_de_textures_en_WebGL
 ---
-<p>{{WebGLSidebar("Tutorial") }} {{Previous("Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}}</p>
+{{WebGLSidebar("Tutorial") }} {{Previous("Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}}
 
-<p>Dans cette démonstration, nous construisons sur l'exemple précédent en remplaçant nos textures statiques par les images d'un fichier vidéo mp4 en cours de lecture. C'est en fait assez facile à faire, mais c'est amusant à regarder, alors commençons. Un code similaire peut être réalisé pour utiliser n'importe quel type de données (comme un {{HTMLElement ("canvas")}}) comme source pour vos textures..</p>
+Dans cette démonstration, nous construisons sur l'exemple précédent en remplaçant nos textures statiques par les images d'un fichier vidéo mp4 en cours de lecture. C'est en fait assez facile à faire, mais c'est amusant à regarder, alors commençons. Un code similaire peut être réalisé pour utiliser n'importe quel type de données (comme un {{HTMLElement ("canvas")}}) comme source pour vos textures..
 
-<h2 id="Accéder_à_la_vidéo">Accéder à la vidéo</h2>
+## Accéder à la vidéo
 
-<p>La première étape consiste à créer l'élément {{HTMLElement("video")}} que nous utiliserons pour récupérer les images vidéo :</p>
+La première étape consiste à créer l'élément {{HTMLElement("video")}} que nous utiliserons pour récupérer les images vidéo :
 
-<pre class="brush: js">// sera mis à true quand la vidéo pourra être copiée dans la texture
+```js
+// sera mis à true quand la vidéo pourra être copiée dans la texture
 var copierVideo = false;
 
 function configurerVideo(url) {
@@ -30,8 +31,8 @@ function configurerVideo(url) {
   video.muted = true;
   video.loop = true;
 
-  <code>// </code>Le fait d'attendre ces 2 évènements assure<code>
-  // </code>qu'il y a des données dans la vidéo
+  // Le fait d'attendre ces 2 évènements assure
+  // qu'il y a des données dans la vidéo
 
   video.addEventListener('playing', function() {
      playing = true;
@@ -47,31 +48,32 @@ function configurerVideo(url) {
   video.play();
 
   function verifierPret() {
-    if (playing &amp;&amp; timeupdate) {
+    if (playing && timeupdate) {
       copierVideo = true;
     }
   }
 
   return video;
 }
-</pre>
+```
 
-<p>D'abord, nous créons un élément vidéo. Nous le mettons en lecture automatique, nous coupons le son et nous faisons tourner la vidéo en boucle. Nous configurons ensuite 2 événements pour voir que la vidéo est en cours de lecture et que le temps a été mis à jour. Nous avons besoin de ces deux vérifications, car c'est une erreur que d'essayer de télécharger sur WebGL une vidéo qui n'a pas encore de données disponibles. La vérification de ces deux événements garantit que des données sont disponibles et que l'on peut démarrer en toute sécurité le chargement de la vidéo dans une texture WebGL. Dans le code ci-dessus, nous vérifions si nous avons reçu ces deux événements et si c'est le cas, nous mettons une variable globale, <code>copierVideo</code>, à true pour nous dire qu'il est possible de commencer à copier la vidéo dans une texture.</p>
+D'abord, nous créons un élément vidéo. Nous le mettons en lecture automatique, nous coupons le son et nous faisons tourner la vidéo en boucle. Nous configurons ensuite 2 événements pour voir que la vidéo est en cours de lecture et que le temps a été mis à jour. Nous avons besoin de ces deux vérifications, car c'est une erreur que d'essayer de télécharger sur WebGL une vidéo qui n'a pas encore de données disponibles. La vérification de ces deux événements garantit que des données sont disponibles et que l'on peut démarrer en toute sécurité le chargement de la vidéo dans une texture WebGL. Dans le code ci-dessus, nous vérifions si nous avons reçu ces deux événements et si c'est le cas, nous mettons une variable globale, `copierVideo`, à true pour nous dire qu'il est possible de commencer à copier la vidéo dans une texture.
 
-<p>Et enfin, nous définissons l'attribut <code>src</code> pour commencer, et nous appelons <code>play</code> pour démarrer le chargement et la lecture de la vidéo.</p>
+Et enfin, nous définissons l'attribut `src` pour commencer, et nous appelons `play` pour démarrer le chargement et la lecture de la vidéo.
 
-<h2 id="Utilisation_des_images_vidéo_comme_texture">Utilisation des images vidéo comme texture</h2>
+## Utilisation des images vidéo comme texture
 
-<p>La prochaine modification porte sur <code>initTexture()</code>, qui devient beaucoup plus simple, car elle n'a plus besoin de charger un fichier image. A la place, tout ce qu'elle fait est de créer un objet texture vide, d'y mettre un unique pixel et de définir son filtrage pour une utilisation ultérieure :</p>
+La prochaine modification porte sur `initTexture()`, qui devient beaucoup plus simple, car elle n'a plus besoin de charger un fichier image. A la place, tout ce qu'elle fait est de créer un objet texture vide, d'y mettre un unique pixel et de définir son filtrage pour une utilisation ultérieure :
 
-<pre class="brush: js">function initTexture(gl, url) {
+```js
+function initTexture(gl, url) {
   const texture = gl.createTexture();
   gl.bindTexture(gl.TEXTURE_2D, texture);
 
-<code>  // </code>Parce que la vidéo doit être téléchargée depuis sur Internet,<code>
-  // </code>cela peut prendre un certain temps jusqu'à ce qu'elle soit prête, donc<code>
-  // </code>mettre un seul pixel dans la texture, de façon à ce que nous puissions<code>
-  // </code>l'utiliser immédiatement.
+  // Parce que la vidéo doit être téléchargée depuis sur Internet,
+  // cela peut prendre un certain temps jusqu'à ce qu'elle soit prête, donc
+  // mettre un seul pixel dans la texture, de façon à ce que nous puissions
+  // l'utiliser immédiatement.
   const niveau = 0;
   const formatInterne = gl.RGBA;
   const largeur = 1;
@@ -92,11 +94,12 @@ function configurerVideo(url) {
 
   return texture;
 }
-</pre>
+```
 
-<div>Voici à quoi ressemble la fonction <code>mettreAJourTexture()</code> ; c'est là où le vrai travail est fait :</div>
+Voici à quoi ressemble la fonction `mettreAJourTexture()` ; c'est là où le vrai travail est fait :
 
-<pre class="brush: js">function mettreAJourTexture(gl, texture, video) {
+```js
+function mettreAJourTexture(gl, texture, video) {
   const niveau = 0;
   const formatInterne = gl.RGBA;
   const formatSrc = gl.RGBA;
@@ -105,13 +108,14 @@ function configurerVideo(url) {
   gl.texImage2D(gl.TEXTURE_2D, niveau, formatInterne,
                 formatSrc, typeSrc, video);
 }
-</pre>
+```
 
-<p>Vous avez déjà vu ce code. Il est presque identique à la fonction onload de l'image dans l'exemple précédent, sauf quand nous appellons <code>texImage2D()</code>, au lieu de passer un objet <code>Image</code>, nous passons l'élément {{HTMLElement ("video")}}. WebGL sait comment extraire l'image en cours et l'utiliser comme texture.</p>
+Vous avez déjà vu ce code. Il est presque identique à la fonction onload de l'image dans l'exemple précédent, sauf quand nous appellons `texImage2D()`, au lieu de passer un objet `Image`, nous passons l'élément {{HTMLElement ("video")}}. WebGL sait comment extraire l'image en cours et l'utiliser comme texture.
 
-<p>Si <code>copierVideo</code> est true, alors <code>mettreAJourTexture()</code> est appelé à chaque fois juste avant que nous appellions la fonction <code>dessinerScene()</code>.</p>
+Si `copierVideo` est true, alors `mettreAJourTexture()` est appelé à chaque fois juste avant que nous appellions la fonction `dessinerScene()`.
 
-<pre class="brush: js">  var alors = 0;
+```js
+  var alors = 0;
 
   // Dessiner la scène répétitivement
   function dessiner(maintenant) {
@@ -120,7 +124,7 @@ function configurerVideo(url) {
     alors = maintenant;
 
     if (copierVideo) {
-      <code>mettreAJour</code>Texture(gl, texture, video);
+      mettreAJourTexture(gl, texture, video);
     }
 
     dessinerScene(gl, programInfo, buffers, texture, ecartTemps);
@@ -128,18 +132,16 @@ function configurerVideo(url) {
     requestAnimationFrame(dessiner);
   }
   requestAnimationFrame(dessiner);
-</pre>
+```
 
-<p>C'est tout pour ce qu'il y a à faire pour cela !</p>
+C'est tout pour ce qu'il y a à faire pour cela !
 
-<p>{{EmbedGHLiveSample('webgl-examples/tutorial/sample8/index.html', 670, 510) }}</p>
+{{EmbedGHLiveSample('webgl-examples/tutorial/sample8/index.html', 670, 510) }}
 
-<p><a href="https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample8">Voir le code complet</a> | <a href="http://mdn.github.io/webgl-examples/tutorial/sample8/">Ouvrir cette démo dans une nouvelle page</a></p>
+[Voir le code complet](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample8) | [Ouvrir cette démo dans une nouvelle page](http://mdn.github.io/webgl-examples/tutorial/sample8/)
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/Using_HTML5_audio_and_video">Utilisation de l'audio et de la video dans Firefox</a></li>
-</ul>
+- [Utilisation de l'audio et de la video dans Firefox](/fr/Using_HTML5_audio_and_video)
 
-<p>{{Previous("Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}}</p>
+{{Previous("Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}}
diff --git a/files/fr/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.md b/files/fr/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.md
index 844ee8f454..3691a94ab7 100644
--- a/files/fr/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.md
+++ b/files/fr/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.md
@@ -7,17 +7,18 @@ tags:
 translation_of: Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL
 original_slug: Web/API/WebGL_API/Tutorial/Creer_des_objets_3D_avec_WebGL
 ---
-<p>{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL")}}</p>
+{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL")}}
 
-<p>Transformons notre carré en trois dimensions en lui ajoutant cinq faces supplémentaires pour créer un cube. Pour faire cela efficacement, nous allons passer du dessin de sommets par l'appel direct de la méthode {{domxref("WebGLRenderingContext.drawArrays()", "gl.drawArrays()")}}, à l'utilisation du tableau des sommets comme une table, et à référencer les sommets individuels dans cette table pour définir les positions des sommets de chaque face, en appelant directement {{domxref("WebGLRenderingContext.drawElements()", "gl.drawElements()")}}.</p>
+Transformons notre carré en trois dimensions en lui ajoutant cinq faces supplémentaires pour créer un cube. Pour faire cela efficacement, nous allons passer du dessin de sommets par l'appel direct de la méthode {{domxref("WebGLRenderingContext.drawArrays()", "gl.drawArrays()")}}, à l'utilisation du tableau des sommets comme une table, et à référencer les sommets individuels dans cette table pour définir les positions des sommets de chaque face, en appelant directement {{domxref("WebGLRenderingContext.drawElements()", "gl.drawElements()")}}.
 
-<p>Notez que chaque face nécessite quatre sommets pour la définir, mais que chaque sommet est partagé entre trois faces. Nous pouvons donc passer beaucoup moins de données en faisant un tableau des 24 sommets, puis en référençant chaque sommet par son indice dans ce tableau, au lieu de passer des ensembles complets de coordonnées. Si vous vous demandez pourquoi nous avons besoin de 24 sommets, et non pas seulement de 8, c'est parce que chaque coin appartient à trois faces de couleurs différentes, et qu'un sommet donné doit avoir une couleur spécifique - c'est pourquoi nous allons créer 3 copies de chaque sommet dans les trois couleurs différentes, une pour chaque face.</p>
+Notez que chaque face nécessite quatre sommets pour la définir, mais que chaque sommet est partagé entre trois faces. Nous pouvons donc passer beaucoup moins de données en faisant un tableau des 24 sommets, puis en référençant chaque sommet par son indice dans ce tableau, au lieu de passer des ensembles complets de coordonnées. Si vous vous demandez pourquoi nous avons besoin de 24 sommets, et non pas seulement de 8, c'est parce que chaque coin appartient à trois faces de couleurs différentes, et qu'un sommet donné doit avoir une couleur spécifique - c'est pourquoi nous allons créer 3 copies de chaque sommet dans les trois couleurs différentes, une pour chaque face.
 
-<h2 id="Définir_la_position_des_sommets_du_cube">Définir la position des sommets du cube</h2>
+## Définir la position des sommets du cube
 
-<p>Tout d'abord, construisons le tampon des sommets du cube en mettant à jour le code de <code>initBuffer()</code>. C'est sensiblement le même que pour le carré, mais en plus long, du fait qu'il y a 24 sommets (4 par côté) :</p>
+Tout d'abord, construisons le tampon des sommets du cube en mettant à jour le code de `initBuffer()`. C'est sensiblement le même que pour le carré, mais en plus long, du fait qu'il y a 24 sommets (4 par côté) :
 
-<pre class="brush: js">  const positions = [
+```js
+  const positions = [
     // Face avant
     -1.0, -1.0,  1.0,
      1.0, -1.0,  1.0,
@@ -54,31 +55,32 @@ original_slug: Web/API/WebGL_API/Tutorial/Creer_des_objets_3D_avec_WebGL
     -1.0,  1.0,  1.0,
     -1.0,  1.0, -1.0
   ];
-</pre>
-
-<p>Du fait que nous avons ajouté une composante z à nos sommets, nous avons besoin de changer en 3 le <code>numComponents</code> de notre attribut <code>vertexPosition</code>.</p>
-
-<pre><code>// Indiquer à WebGL comment extraire les positions du tampon des
-// positions dans l'attribut vertexPosition
-{
-  const numComponents = 3;
-  ...
-  gl.vertexAttribPointer(
-      programInfo.attribLocations.vertexPosition,
-      numComponents,
-      type,
-      normalize,
-      stride,
-      offset);
-  gl.enableVertexAttribArray(
-      programInfo.attribLocations.vertexPosition);
-}</code></pre>
-
-<h2 id="Définir_les_couleurs_des_sommets">Définir les couleurs des sommets</h2>
-
-<p>Nous avons aussi besoin de construire un tableau des couleurs pour chacun des 24 sommets. Ce code commence par définir une couleur pour chaque face, puis il utilise une boucle pour assembler le tableau de toutes les couleurs pour chacun des sommets.</p>
-
-<pre class="brush: js">  const <code>faceColors </code>= [
+```
+
+Du fait que nous avons ajouté une composante z à nos sommets, nous avons besoin de changer en 3 le `numComponents` de notre attribut `vertexPosition`.
+
+    // Indiquer à WebGL comment extraire les positions du tampon des
+    // positions dans l'attribut vertexPosition
+    {
+      const numComponents = 3;
+      ...
+      gl.vertexAttribPointer(
+          programInfo.attribLocations.vertexPosition,
+          numComponents,
+          type,
+          normalize,
+          stride,
+          offset);
+      gl.enableVertexAttribArray(
+          programInfo.attribLocations.vertexPosition);
+    }
+
+## Définir les couleurs des sommets
+
+Nous avons aussi besoin de construire un tableau des couleurs pour chacun des 24 sommets. Ce code commence par définir une couleur pour chaque face, puis il utilise une boucle pour assembler le tableau de toutes les couleurs pour chacun des sommets.
+
+```js
+  const faceColors = [
     [1.0,  1.0,  1.0,  1.0],    // Face avant : blanc
     [1.0,  0.0,  0.0,  1.0],    // Face arrière : rouge
     [0.0,  1.0,  0.0,  1.0],    // Face supérieure : vert
@@ -89,25 +91,26 @@ original_slug: Web/API/WebGL_API/Tutorial/Creer_des_objets_3D_avec_WebGL
 
   // Conversion du tableau des couleurs en une table pour tous les sommets
 
-  var <code>colors </code>= [];
+  var colors = [];
 
-  for (j=0; j&lt;<code>faceColors</code>.length; j++) {
+  for (j=0; j<faceColors.length; j++) {
     const c = faceColors[j];
 
     // Répéter chaque couleur quatre fois pour les quatre sommets d'une face
-    colors = colors<code>.concat(c, c, c, c);
-  </code>}
+    colors = colors.concat(c, c, c, c);
+  }
 
   const colorBuffer = gl.createBuffer();
   gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
   gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
-</pre>
+```
 
-<h2 id="Définir_le_tableau_des_éléments">Définir le tableau des éléments</h2>
+## Définir le tableau des éléments
 
-<p>Une fois que les tableaux des sommets sont générés, nous devons construire le tableau des éléments.</p>
+Une fois que les tableaux des sommets sont générés, nous devons construire le tableau des éléments.
 
-<pre class="brush: js">  <code>const indexBuffer = gl.createBuffer();
+```js
+  const indexBuffer = gl.createBuffer();
   gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
 
   // Ce tableau définit chaque face comme deux triangles, en utilisant les
@@ -129,40 +132,41 @@ original_slug: Web/API/WebGL_API/Tutorial/Creer_des_objets_3D_avec_WebGL
       new Uint16Array(indices), gl.STATIC_DRAW);
 
   return {
-    position: positionBuffer</code><code>,
-    color: colorBuffer</code><code>,
-    indices: indexBuffer</code><code>,
+    position: positionBuffer,
+    color: colorBuffer,
+    indices: indexBuffer,
   };
-}</code></pre>
+}
+```
 
-<p>Le tableau <code>indices</code> définit chaque face comme étant une paire de triangles, en spécifiant chaque sommet du triangle comme un indice dans les tableaux des sommets du cube. Ainsi le cube est décrit comme une collection de 12 triangles.</p>
+Le tableau `indices` définit chaque face comme étant une paire de triangles, en spécifiant chaque sommet du triangle comme un indice dans les tableaux des sommets du cube. Ainsi le cube est décrit comme une collection de 12 triangles.
 
-<h2 id="Dessiner_le_cube">Dessiner le cube</h2>
+## Dessiner le cube
 
-<p>Ensuite, nous devons ajouter du code à notre fonction <code>drawScene()</code> pour dessiner le tampon des indices du cube, en ajoutant de nouveaux appels à {{domxref("WebGLRenderingContext.bindBuffer()", "gl.bindBuffer()")}} et {{domxref("WebGLRenderingContext.drawElements()", "gl.drawElements()")}} :</p>
+Ensuite, nous devons ajouter du code à notre fonction `drawScene()` pour dessiner le tampon des indices du cube, en ajoutant de nouveaux appels à {{domxref("WebGLRenderingContext.bindBuffer()", "gl.bindBuffer()")}} et {{domxref("WebGLRenderingContext.drawElements()", "gl.drawElements()")}} :
 
-<pre><code>  // Indiquer à WebGL quels indices utiliser pour indexer les sommets
-  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, tampons.indices);
+      // Indiquer à WebGL quels indices utiliser pour indexer les sommets
+      gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, tampons.indices);
 
-...
+    ...
 
-  {
-    const vertexCount = 36;
-    const type = gl.UNSIGNED_SHORT;
-    const offset = 0;
-    gl.drawElements(gl.TRIANGLES, vertexCount, type, offset);
-  }</code></pre>
+      {
+        const vertexCount = 36;
+        const type = gl.UNSIGNED_SHORT;
+        const offset = 0;
+        gl.drawElements(gl.TRIANGLES, vertexCount, type, offset);
+      }
 
-<p>Du fait que chaque face de notre cube est composée de deux triangles, il y a 6 sommets par côté, soit 36 sommets au total dans le cube, même si beaucoup d'entre eux sont des doublons.</p>
+Du fait que chaque face de notre cube est composée de deux triangles, il y a 6 sommets par côté, soit 36 sommets au total dans le cube, même si beaucoup d'entre eux sont des doublons.
 
-<p>Finalement, remplaçons notre variable <code>squareRotation</code> par <code>cubeRotation</code> et ajoutons une seconde rotation autour de l'axe des x :</p>
+Finalement, remplaçons notre variable `squareRotation` par `cubeRotation` et ajoutons une seconde rotation autour de l'axe des x :
 
-<pre><code>mat4.rotate(modelViewMatrix, modelViewMatrix, cubeRotation * .7, [0, 1, 0]);</code></pre>
+    mat4.rotate(modelViewMatrix, modelViewMatrix, cubeRotation * .7, [0, 1, 0]);
 
-<p>À ce stade, nous avons un cube animé en rotation, ses six faces ayant des couleurs assez vives.</p>
+À ce stade, nous avons un cube animé en rotation, ses six faces ayant des couleurs assez vives.
 
-<p>{{EmbedGHLiveSample('webgl-examples/tutorial/sample5/index.html', 670, 510) }}</p>
+{{EmbedGHLiveSample('webgl-examples/tutorial/sample5/index.html', 670, 510) }}
 
-<p><a href="https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample5">Voir le code complet</a> | <a href="http://mdn.github.io/webgl-examples/tutorial/sample5/">Ouvrir cette démo dans une nouvelle page</a></p>
+[Voir le code complet](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample5) | [Ouvrir cette démo dans une nouvelle page](http://mdn.github.io/webgl-examples/tutorial/sample5/)
 
-<p>{{PreviousNext("Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL")}}</p>
+{{PreviousNext("Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL")}}
diff --git a/files/fr/web/api/webgl_api/tutorial/getting_started_with_webgl/index.md b/files/fr/web/api/webgl_api/tutorial/getting_started_with_webgl/index.md
index 10adde485e..737b272fbe 100644
--- a/files/fr/web/api/webgl_api/tutorial/getting_started_with_webgl/index.md
+++ b/files/fr/web/api/webgl_api/tutorial/getting_started_with_webgl/index.md
@@ -7,32 +7,34 @@ tags:
 translation_of: Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL
 original_slug: Web/API/WebGL_API/Tutorial/Commencer_avec_WebGL
 ---
-<p>{{WebGLSidebar("Tutorial")}} {{Next("Web/API/WebGL_API/Tutorial/Ajouter_du_contenu_à_WebGL")}}<a href="http://www.khronos.org/webgl/">WebGL</a> permet à un contenu web d'utiliser l'API basée sur <a href="http://www.khronos.org/opengles/">OpenGL ES</a> 2.0 pour effectuer un rendu 2D et 3D dans un <a href="/fr/HTML/Canvas">canvas</a> dans les navigateurs qui le supportent, sans utilisation d'un module complémentaire. Les programmes WebGL sont constitués de code de contrôle écrit en JavaScript, et le code d'ombrage (GLSL) est exécuté dans l'Unité de Traitement Graphique (GPU) de l'ordinateur. Les éléments WebGL peuvent être mélangés avec d'autres éléments HTML, et composés d'autres parties de la page ou de l'arrière-plan de la page.</p>
+{{WebGLSidebar("Tutorial")}} {{Next("Web/API/WebGL_API/Tutorial/Ajouter_du_contenu_à_WebGL")}}[WebGL](http://www.khronos.org/webgl/) permet à un contenu web d'utiliser l'API basée sur [OpenGL ES](http://www.khronos.org/opengles/) 2.0 pour effectuer un rendu 2D et 3D dans un [canvas](/fr/HTML/Canvas) dans les navigateurs qui le supportent, sans utilisation d'un module complémentaire. Les programmes WebGL sont constitués de code de contrôle écrit en JavaScript, et le code d'ombrage (GLSL) est exécuté dans l'Unité de Traitement Graphique (GPU) de l'ordinateur. Les éléments WebGL peuvent être mélangés avec d'autres éléments HTML, et composés d'autres parties de la page ou de l'arrière-plan de la page.
 
-<p>Cet article va vous donner une introduction aux bases de l'utilisation de WebGL. Il est supposé que vous avez déjà une compréhension des mathématiques impliquées dans les graphismes 3D, et cet article ne prétend pas vous enseigner les concepts des graphismes 3D par eux-mêmes.</p>
+Cet article va vous donner une introduction aux bases de l'utilisation de WebGL. Il est supposé que vous avez déjà une compréhension des mathématiques impliquées dans les graphismes 3D, et cet article ne prétend pas vous enseigner les concepts des graphismes 3D par eux-mêmes.
 
-<p>Les exemples de code de ce tutoriel peuvent aussi être trouvés dans le <a href="https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial">webgl-examples GitHub repository</a>.</p>
+Les exemples de code de ce tutoriel peuvent aussi être trouvés dans le [webgl-examples GitHub repository](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial).
 
-<h2 id="Préparation_au_rendu_3D">Préparation au rendu 3D</h2>
+## Préparation au rendu 3D
 
-<p>La première chose dont vous avez besoin pour utiliser WebGL pour faire un rendu est un canvas. Le fragment d'HTML ci-dessous déclare un canvas dans lequel notre exemple se dessinera.</p>
+La première chose dont vous avez besoin pour utiliser WebGL pour faire un rendu est un canvas. Le fragment d'HTML ci-dessous déclare un canvas dans lequel notre exemple se dessinera.
 
-<pre class="brush: html"><code>&lt;body&gt;
-  &lt;canvas id="glCanvas" width="640" height="480"&gt;&lt;/canvas&gt;
-&lt;/body&gt;</code>
-</pre>
+```html
+<body>
+  <canvas id="glCanvas" width="640" height="480"></canvas>
+</body>
+```
 
-<h3 id="Préparation_du_contexte_WebGL">Préparation du contexte WebGL</h3>
+### Préparation du contexte WebGL
 
-<p>La fonction <code>main()</code> dans notre code JavaScript est appelée quand notre script est chargé. Son but est de créer le contexte WebGL et de commencer à rendre du contenu.</p>
+La fonction `main()` dans notre code JavaScript est appelée quand notre script est chargé. Son but est de créer le contexte WebGL et de commencer à rendre du contenu.
 
-<pre class="brush: js"><code>main();
+```js
+main();
 
 //
 // Début ici
 //
 function main() {
- </code> const canvas = document.querySelector("#glCanvas");
+  const canvas = document.querySelector("#glCanvas");
   // Initialisation du contexte WebGL
   const gl = canvas.getContext("webgl");
 
@@ -47,26 +49,24 @@ function main() {
   // Effacer le tampon de couleur avec la couleur d'effacement spécifiée
   gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT);
 }
-</pre>
+```
 
-<p>La première chose que nous faisons ici est d'obtenir une référence au canvas, en l'affectant à une variable dénommée <code>canvas</code>.</p>
+La première chose que nous faisons ici est d'obtenir une référence au canvas, en l'affectant à une variable dénommée `canvas`.
 
-<p>Une fois que nous avons le canvas, nous essayons de lui obtenir un <a href="/fr-FR/docs/Web/API/WebGLRenderingContext">WebGLRenderingContext</a>, en appelant <a href="/fr-FR/docs/Web/API/HTMLCanvasElement/getContext">getContext</a> et en lui passant la chaîne <code>"webgl"</code>. Si le navigateur ne supporte pas WebGL, <code>getContext</code> retournera <code>null</code>, auquel cas nous afficherons un message pour l'utilisateur, et nous sortirons.</p>
+Une fois que nous avons le canvas, nous essayons de lui obtenir un [WebGLRenderingContext](/fr-FR/docs/Web/API/WebGLRenderingContext), en appelant [getContext](/fr-FR/docs/Web/API/HTMLCanvasElement/getContext) et en lui passant la chaîne `"webgl"`. Si le navigateur ne supporte pas WebGL, `getContext` retournera `null`, auquel cas nous afficherons un message pour l'utilisateur, et nous sortirons.
 
-<p>Si le contexte est initialisé avec succès, la variable <code>gl</code> sera notre référence à celui-ci. Dans ce cas, nous définissons la couleur d'effacement comme étant le noir, et nous effaçons le contexte avec cette couleur (redessin du canvas avec la couleur d'arrière-plan).</p>
+Si le contexte est initialisé avec succès, la variable `gl` sera notre référence à celui-ci. Dans ce cas, nous définissons la couleur d'effacement comme étant le noir, et nous effaçons le contexte avec cette couleur (redessin du canvas avec la couleur d'arrière-plan).
 
-<p>A ce stade, votre code est suffisant pour que le contexte WebGL puisse s'initialiser avec succès, et vous devriez vous retrouver avec une grande boîte noire et vide, prête à - et attendant de - recevoir du contenu.</p>
+A ce stade, votre code est suffisant pour que le contexte WebGL puisse s'initialiser avec succès, et vous devriez vous retrouver avec une grande boîte noire et vide, prête à - et attendant de - recevoir du contenu.
 
-<p>{{EmbedGHLiveSample('webgl-examples/tutorial/sample1/index.html', 670, 510) }}</p>
+{{EmbedGHLiveSample('webgl-examples/tutorial/sample1/index.html', 670, 510) }}
 
-<p><a href="https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample1">Voir le code complet</a> | <a href="http://mdn.github.io/webgl-examples/tutorial/sample1/">Ouvrir cette démo dans une nouvelle page</a></p>
+[Voir le code complet](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample1) | [Ouvrir cette démo dans une nouvelle page](http://mdn.github.io/webgl-examples/tutorial/sample1/)
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="https://dev.opera.com/articles/introduction-to-webgl-part-1/">An introduction to WebGL</a> : écrite par Luz Caballero, publiée sur dev.opera.com. Cet article traite de ce qu'est WebGL, explique comment WebGL fonctionne (incluant le concept de pipeline de rendu), et présente quelques bibliothèques WebGL.</li>
- <li><a href="http://webglfundamentals.org/">WebGL Fundamentals</a></li>
- <li><a href="http://duriansoftware.com/joe/An-intro-to-modern-OpenGL.-Table-of-Contents.html">An intro to modern OpenGL :</a> une série de bons articles sur OpenGL écrits par Joe Groff, fournissant une introduction claire à OpenGL, depuis son histoire jusqu'au concept important de pipeline de graphismes, qui comprend aussi quelques exemples montrant comment OpenGL fonctionne. Si vous n'avez aucune idée de ce qu'est OpenGL, c'est un bon endroit pour commencer.</li>
-</ul>
+- [An introduction to WebGL](https://dev.opera.com/articles/introduction-to-webgl-part-1/) : écrite par Luz Caballero, publiée sur dev.opera.com. Cet article traite de ce qu'est WebGL, explique comment WebGL fonctionne (incluant le concept de pipeline de rendu), et présente quelques bibliothèques WebGL.
+- [WebGL Fundamentals](http://webglfundamentals.org/)
+- [An intro to modern OpenGL :](http://duriansoftware.com/joe/An-intro-to-modern-OpenGL.-Table-of-Contents.html) une série de bons articles sur OpenGL écrits par Joe Groff, fournissant une introduction claire à OpenGL, depuis son histoire jusqu'au concept important de pipeline de graphismes, qui comprend aussi quelques exemples montrant comment OpenGL fonctionne. Si vous n'avez aucune idée de ce qu'est OpenGL, c'est un bon endroit pour commencer.
 
-<p>{{Next("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context")}}</p>
\ No newline at end of file
+{{Next("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context")}}
diff --git a/files/fr/web/api/webgl_api/tutorial/index.md b/files/fr/web/api/webgl_api/tutorial/index.md
index 671b448a9d..7a9d0e4aba 100644
--- a/files/fr/web/api/webgl_api/tutorial/index.md
+++ b/files/fr/web/api/webgl_api/tutorial/index.md
@@ -8,33 +8,31 @@ tags:
   - WebGL
 translation_of: Web/API/WebGL_API/Tutorial
 ---
-<div>{{WebGLSidebar}}</div>
+{{WebGLSidebar}}
 
-<p><a href="http://www.khronos.org/webgl/">WebGL</a> permet au contenu web d'utiliser une API basée sur <a href="http://www.khronos.org/opengles/">OpenGL ES</a> 2.0 pour effectuer des rendus 3D dans un {{HTMLElement("canvas")}} HTML dans les navigateurs qui le supportent, sans avoir recours à des modules complémentaires. Les programmes WebGL sont constitués de code de contrôle rédigé en JavaScript, et de code d'effets spéciaux (code shader) qui est exécuté sur l'Unité de Traitement Graphique (GPU) d'un ordinateur. Les éléments WebGL peuvent être mélangés avec d'autres éléments HTML et composés avec d'autres parties de la page ou du fond de la page.</p>
+[WebGL](http://www.khronos.org/webgl/) permet au contenu web d'utiliser une API basée sur [OpenGL ES](http://www.khronos.org/opengles/) 2.0 pour effectuer des rendus 3D dans un {{HTMLElement("canvas")}} HTML dans les navigateurs qui le supportent, sans avoir recours à des modules complémentaires. Les programmes WebGL sont constitués de code de contrôle rédigé en JavaScript, et de code d'effets spéciaux (code shader) qui est exécuté sur l'Unité de Traitement Graphique (GPU) d'un ordinateur. Les éléments WebGL peuvent être mélangés avec d'autres éléments HTML et composés avec d'autres parties de la page ou du fond de la page.
 
-<p>Ce tutoriel décrit comment utiliser l'élément <code>&lt;canvas&gt;</code> pour dessiner des graphiques WebGL, en commençant par les bases. Les exemples suivants devraient vous donner des idées de ce que vous pouvez faire avec WebGL et vont vous fournir des fragments de code qui pourraient vous aider à construire votre propre contenu.</p>
+Ce tutoriel décrit comment utiliser l'élément `<canvas>` pour dessiner des graphiques WebGL, en commençant par les bases. Les exemples suivants devraient vous donner des idées de ce que vous pouvez faire avec WebGL et vont vous fournir des fragments de code qui pourraient vous aider à construire votre propre contenu.
 
-<h2 id="Avant_que_vous_ne_commenciez">Avant que vous ne commenciez</h2>
+## Avant que vous ne commenciez
 
-<p>L'utilisation de l'élément <code>&lt;canvas&gt;</code> n'est pas très difficile, mais vous avez besoin d'une compréhension de base de l'<a href="/en-US/docs/Web/HTML">HTML</a> et du <a href="/en-US/docs/Web/JavaScript">JavaScript</a>. L'élément <code>&lt;canvas&gt;</code> et WebGL ne sont pas supportés par certains anciens navigateurs, mais ils sont supportés dans les versions récentes de tous les principaux navigateurs. Pour dessiner des graphiques sur le canevas, on utilise un objet de contexte Javascript, qui crée des graphiques à la volée.</p>
+L'utilisation de l'élément `<canvas>` n'est pas très difficile, mais vous avez besoin d'une compréhension de base de l'[HTML](/en-US/docs/Web/HTML) et du [JavaScript](/en-US/docs/Web/JavaScript). L'élément `<canvas>` et WebGL ne sont pas supportés par certains anciens navigateurs, mais ils sont supportés dans les versions récentes de tous les principaux navigateurs. Pour dessiner des graphiques sur le canevas, on utilise un objet de contexte Javascript, qui crée des graphiques à la volée.
 
-<h2 id="Dans_ce_tutoriel">Dans ce tutoriel</h2>
+## Dans ce tutoriel
 
-<dl>
- <dt><a href="/fr/docs/Web/API/WebGL_API/Tutorial/Commencer_avec_WebGL">Commencer avec WebGL</a></dt>
- <dd>Comment mettre en place un contexte WebGL.</dd>
- <dt><a href="/fr/docs/Web/API/WebGL_API/Tutorial/Ajouter_du_contenu_à_WebGL">Ajouter du contenu à WebGL</a></dt>
- <dd>Comment faire un rendu simple de figures planes avec WebGL.</dd>
- <dt><a href="/fr/docs/Web/API/WebGL_API/Tutorial/Ajouter_des_couleurs_avec_les_shaders">Ajouter des couleurs avec les nuanceurs</a></dt>
- <dd>Démontre comment ajouter de la couleur aux formes avec des nuanceurs.</dd>
- <dt><a href="/fr/docs/Web/API/WebGL_API/Tutorial/Animer_des_objets_avec_WebGL">Animer des objets avec WebGL</a></dt>
- <dd>Montre comment tourner et déplacer des objets pour créer des animations simples.</dd>
- <dt><a href="/fr/docs/Web/API/WebGL_API/Tutorial/Creer_des_objets_3D_avec_WebGL">Créer des objets 3D avec WebGL</a></dt>
- <dd>Montre comment créer et animer un objet 3D (dans ce cas, un cube).</dd>
- <dt><a href="/fr/docs/Web/API/WebGL_API/Tutorial/Utiliser_les_textures_avec_WebGL">Utilisation des textures dans WebGL</a></dt>
- <dd>Démontrer comment appliquer des textures sur les faces d'un objet.</dd>
- <dt><a href="/fr/docs/Web/API/WebGL_API/Tutorial/Eclairage_en_WebGL"> Éclairage en WebGL</a></dt>
- <dd>Comment simuler des effets d'illumination dans votre contexte WebGL.</dd>
- <dt><a href="/fr/docs/Web/API/WebGL_API/Tutorial/Animation_de_textures_en_WebGL">Animation de textures en WebGL</a></dt>
- <dd>Montre comment animer des textures ; dans ce cas, en appliquant une vidéo Ogg sur les faces d'un cube en rotation.</dd>
-</dl>
+- [Commencer avec WebGL](/fr/docs/Web/API/WebGL_API/Tutorial/Commencer_avec_WebGL)
+  - : Comment mettre en place un contexte WebGL.
+- [Ajouter du contenu à WebGL](/fr/docs/Web/API/WebGL_API/Tutorial/Ajouter_du_contenu_à_WebGL)
+  - : Comment faire un rendu simple de figures planes avec WebGL.
+- [Ajouter des couleurs avec les nuanceurs](/fr/docs/Web/API/WebGL_API/Tutorial/Ajouter_des_couleurs_avec_les_shaders)
+  - : Démontre comment ajouter de la couleur aux formes avec des nuanceurs.
+- [Animer des objets avec WebGL](/fr/docs/Web/API/WebGL_API/Tutorial/Animer_des_objets_avec_WebGL)
+  - : Montre comment tourner et déplacer des objets pour créer des animations simples.
+- [Créer des objets 3D avec WebGL](/fr/docs/Web/API/WebGL_API/Tutorial/Creer_des_objets_3D_avec_WebGL)
+  - : Montre comment créer et animer un objet 3D (dans ce cas, un cube).
+- [Utilisation des textures dans WebGL](/fr/docs/Web/API/WebGL_API/Tutorial/Utiliser_les_textures_avec_WebGL)
+  - : Démontrer comment appliquer des textures sur les faces d'un objet.
+- [ Éclairage en WebGL](/fr/docs/Web/API/WebGL_API/Tutorial/Eclairage_en_WebGL)
+  - : Comment simuler des effets d'illumination dans votre contexte WebGL.
+- [Animation de textures en WebGL](/fr/docs/Web/API/WebGL_API/Tutorial/Animation_de_textures_en_WebGL)
+  - : Montre comment animer des textures ; dans ce cas, en appliquant une vidéo Ogg sur les faces d'un cube en rotation.
diff --git a/files/fr/web/api/webgl_api/tutorial/lighting_in_webgl/index.md b/files/fr/web/api/webgl_api/tutorial/lighting_in_webgl/index.md
index e61f615228..d5da082872 100644
--- a/files/fr/web/api/webgl_api/tutorial/lighting_in_webgl/index.md
+++ b/files/fr/web/api/webgl_api/tutorial/lighting_in_webgl/index.md
@@ -4,38 +4,35 @@ slug: Web/API/WebGL_API/Tutorial/Lighting_in_WebGL
 translation_of: Web/API/WebGL_API/Tutorial/Lighting_in_WebGL
 original_slug: Web/API/WebGL_API/Tutorial/Eclairage_en_WebGL
 ---
-<p>{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Utiliser_les_textures_avec_WebGL", "Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL")}}</p>
+{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Utiliser_les_textures_avec_WebGL", "Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL")}}
 
-<p>La première chose à comprendre à propos de WebGL est que contrairement au standard OpenGL, WebGL n'a pas de support pour l'éclairage. Vous avez à le faire par vous même. Heureusement ce n'est pas si dur à faire, et cet article va vous expliquer quelques bases.</p>
+La première chose à comprendre à propos de WebGL est que contrairement au standard OpenGL, WebGL n'a pas de support pour l'éclairage. Vous avez à le faire par vous même. Heureusement ce n'est pas si dur à faire, et cet article va vous expliquer quelques bases.
 
-<h2 id="Simuler_l'éclairage_et_les_ombres_en_3D">Simuler l'éclairage et les ombres en 3D</h2>
+## Simuler l'éclairage et les ombres en 3D
 
-<p>Rentrer dans les détails de la théorie derrière la simulation de l'éclairage 3D est assez loin du sujet de cet article mais il vaut mieux en connaitre un minimum le sujet. Au lieu de rentrer dans le vif du sujet ici, jetez un coup d'oeil sur <a href="https://fr.wikipedia.org/wiki/Ombrage_de_Phong">l'ombrage de Phong</a> sur Wikipédia, qui fourni une bonne vue d'ensemble comme modèle d'éclairage.</p>
+Rentrer dans les détails de la théorie derrière la simulation de l'éclairage 3D est assez loin du sujet de cet article mais il vaut mieux en connaitre un minimum le sujet. Au lieu de rentrer dans le vif du sujet ici, jetez un coup d'oeil sur [l'ombrage de Phong](https://fr.wikipedia.org/wiki/Ombrage_de_Phong) sur Wikipédia, qui fourni une bonne vue d'ensemble comme modèle d'éclairage.
 
-<p>Il y a trois types basiques d'éclairage :</p>
+Il y a trois types basiques d'éclairage :
 
-<ol>
- <li><strong>Ambient light (Lumière Ambiante) </strong>est la lumière qui imprègne, qui se répand sur la scène. Elle n'a pas de direction et s'applique sur toutes les faces de la scène de la même façon.</li>
- <li><strong>Directional light (Lumière Directionnelle)</strong> est une lumière émise depuis une direction spécifique. Par exemple le soleil, est une lumière directionnelle.</li>
- <li><strong>Point light</strong> <strong>(Point de lumière) </strong>est une lumière émise depuis un point, éméttant une lumière dans toutes les directions, contrairement à la Lumière Directionnelle. C'est comme ceci que les lumières fonctionnent principalement dans notre monde, comme par exemple une ampoule.</li>
-</ol>
+1.  **Ambient light (Lumière Ambiante)** est la lumière qui imprègne, qui se répand sur la scène. Elle n'a pas de direction et s'applique sur toutes les faces de la scène de la même façon.
+2.  **Directional light (Lumière Directionnelle)** est une lumière émise depuis une direction spécifique. Par exemple le soleil, est une lumière directionnelle.
+3.  **Point light** **(Point de lumière)** est une lumière émise depuis un point, éméttant une lumière dans toutes les directions, contrairement à la Lumière Directionnelle. C'est comme ceci que les lumières fonctionnent principalement dans notre monde, comme par exemple une ampoule.
 
-<p>Pour notre tutorial, nous allons simplifier le model d'éclairage, en considérant seulement une unique lumière directionnelle et une lumière ambiante. Nous allons réutiliser notre <a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL">précédent exemple avec le cube en rotation</a>.</p>
+Pour notre tutorial, nous allons simplifier le model d'éclairage, en considérant seulement une unique lumière directionnelle et une lumière ambiante. Nous allons réutiliser notre [précédent exemple avec le cube en rotation](/en-US/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL).
 
-<p>Une fois que nous avons appréhendé le concept de source et de réfléction de la lumière, il y a deux choses que nous avons besoin d'implémenter pour nos lumières directionnelles.</p>
+Une fois que nous avons appréhendé le concept de source et de réfléction de la lumière, il y a deux choses que nous avons besoin d'implémenter pour nos lumières directionnelles.
 
-<ol>
- <li>Nous avons besoin d'associer la <strong>surface normale</strong> avec chaque sommet. C'est un vecteur qui est perpendiculaire à la face associé à ce sommet.</li>
- <li>Nous avons besoin de connaître la direction dans laquelle la lumière arrive. Ceci est défini par la direction du vecteur.</li>
-</ol>
+1.  Nous avons besoin d'associer la **surface normale** avec chaque sommet. C'est un vecteur qui est perpendiculaire à la face associé à ce sommet.
+2.  Nous avons besoin de connaître la direction dans laquelle la lumière arrive. Ceci est défini par la direction du vecteur.
 
-<p>Puis nous mettons à jour le vertex shader pour ajuster la couleur de chaque sommet. en prenant en compte la lumière ambiante ainsi que l'effet de la lumière directionnelle donné par l'angle qui rencontre la face du cube. Nous allons voir comment faire avec les shaders.</p>
+Puis nous mettons à jour le vertex shader pour ajuster la couleur de chaque sommet. en prenant en compte la lumière ambiante ainsi que l'effet de la lumière directionnelle donné par l'angle qui rencontre la face du cube. Nous allons voir comment faire avec les shaders.
 
-<h2 id="Créer_les_normales_pour_les_sommets">Créer les normales pour les sommets</h2>
+## Créer les normales pour les sommets
 
-<p>La première chose dont nous avons besoin, est de générer le tableau des <strong>normales</strong> pour tous les sommets que constituent notre cube. Comme un cube est un simple objet, c'est plutôt simple à faire, évidemment pour des objets plus complexe, calculer les normales sera plus compliqué.</p>
+La première chose dont nous avons besoin, est de générer le tableau des **normales** pour tous les sommets que constituent notre cube. Comme un cube est un simple objet, c'est plutôt simple à faire, évidemment pour des objets plus complexe, calculer les normales sera plus compliqué.
 
-<pre class="brush: js">cubeVerticesNormalBuffer = gl.createBuffer();
+```js
+cubeVerticesNormalBuffer = gl.createBuffer();
 gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesNormalBuffer);
 
 var vertexNormals = [
@@ -77,33 +74,36 @@ var vertexNormals = [
 ];
 
 gl.bufferData(gl.ARRAY_BUFFER, new WebGLFloatArray(vertexNormals), gl.STATIC_DRAW);
-</pre>
+```
 
-<p>Ceci doit vous être plutôt familier maintenant. Nous créons un nouveau buffer, on le lie avec le tableau sur lequel nous allons travailler, puis nous allons envoyer l'ensemble de notre tableau au buffer en appelant la méthode <code>bufferData()</code>.</p>
+Ceci doit vous être plutôt familier maintenant. Nous créons un nouveau buffer, on le lie avec le tableau sur lequel nous allons travailler, puis nous allons envoyer l'ensemble de notre tableau au buffer en appelant la méthode `bufferData()`.
 
-<p>Ensuite nous allons ajouter le code à la fonction <code>drawScene() </code>pour attacher le tableau de normales à l'attribut du shader, comme ça le code du shader y aura accès:</p>
+Ensuite nous allons ajouter le code à la fonction `drawScene() `pour attacher le tableau de normales à l'attribut du shader, comme ça le code du shader y aura accès:
 
-<pre class="brush: js">gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesNormalBuffer);
+```js
+gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesNormalBuffer);
 gl.vertexAttribPointer(vertexNormalAttribute, 3, gl.FLOAT, false, 0, 0);
-</pre>
+```
 
-<p>Enfin, nous avons besoin de mettre à jour le code qui construit les matrices uniformes pour générer et livrer au shader une matrice normale, qui sera utilisée pour transformer les normales en fonction de l'orientation actuelle du cube par rapport à la source de lumière.</p>
+Enfin, nous avons besoin de mettre à jour le code qui construit les matrices uniformes pour générer et livrer au shader une matrice normale, qui sera utilisée pour transformer les normales en fonction de l'orientation actuelle du cube par rapport à la source de lumière.
 
-<pre class="brush: js">var normalMatrix = mvMatrix.inverse();
+```js
+var normalMatrix = mvMatrix.inverse();
 normalMatrix = normalMatrix.transpose();
 var nUniform = gl.getUniformLocation(shaderProgram, 'uNormalMatrix');
 gl.uniformMatrix4fv(nUniform, false, new WebGLFloatArray(normalMatrix.flatten()));
-</pre>
+```
 
-<h2 id="Mettre_à_jour_les_shaders">Mettre à jour les shaders</h2>
+## Mettre à jour les shaders
 
-<p>Maintenant que les shaders ont toutes les données dont ils ont besoin, nous mettons à jour leur code.</p>
+Maintenant que les shaders ont toutes les données dont ils ont besoin, nous mettons à jour leur code.
 
-<h3 id="Le_vertex_shader">Le vertex shader</h3>
+### Le vertex shader
 
-<p>La première chose à faire est de mettre à jour le vertex shader en générant une valeur pour l'ombre de chaque sommet, en se basant sur l'éclairage ambiant ainsi que la direction de la lumière. Jettons un oeil sur le code suivant:</p>
+La première chose à faire est de mettre à jour le vertex shader en générant une valeur pour l'ombre de chaque sommet, en se basant sur l'éclairage ambiant ainsi que la direction de la lumière. Jettons un oeil sur le code suivant:
 
-<pre class="brush: html">&lt;script id="shader-vs" type="x-shader/x-vertex"&gt;
+```html
+<script id="shader-vs" type="x-shader/x-vertex">
   attribute highp vec3 aVertexNormal;
   attribute highp vec3 aVertexPosition;
   attribute highp vec2 aTextureCoord;
@@ -130,20 +130,21 @@ gl.uniformMatrix4fv(nUniform, false, new WebGLFloatArray(normalMatrix.flatten())
     highp float directional = max(dot(transformedNormal.xyz, directionalVector), 0.0);
     vLighting = ambientLight + (directionalLightColor * directional);
   }
-&lt;/script&gt;
-</pre>
+</script>
+```
 
-<p>Une fois que la position du sommet est calculée, et que nous obtenons les coordonnées des texels (tas de pixel pour une texture) correspondant au sommet, nous pouvons travailler sur le calcul de l'ombre de chaque sommet.</p>
+Une fois que la position du sommet est calculée, et que nous obtenons les coordonnées des texels (tas de pixel pour une texture) correspondant au sommet, nous pouvons travailler sur le calcul de l'ombre de chaque sommet.
 
-<p>La première chose que nous allons faire est de transformer la base normale sur la position actuelle et l'orientation du cube, en calculant les normales des sommets par la matrice normale. Nous pouvons alors calculer la quantité d'éclairage qui doit être appliquée au sommet en calculant le produit de la normale transformée et du vecteur directionnel (la direction d'où la lumière vient). Si le résultat est inférieur à zéro, alors on le met à 0. Car une lumière négative n'a pas de sens dans notre cas.</p>
+La première chose que nous allons faire est de transformer la base normale sur la position actuelle et l'orientation du cube, en calculant les normales des sommets par la matrice normale. Nous pouvons alors calculer la quantité d'éclairage qui doit être appliquée au sommet en calculant le produit de la normale transformée et du vecteur directionnel (la direction d'où la lumière vient). Si le résultat est inférieur à zéro, alors on le met à 0. Car une lumière négative n'a pas de sens dans notre cas.
 
-<p>Une fois la quantité de lumière directionnelle calculée, nous pouvons générer la valeur d'éclairage en prenant l'éclairage ambiant et en y ajoutant le produit de la couleur de la lumière directionnelle, et aussi la quantité de la lumière directionnelle à fournir. Comme résultat, nous avons maintenant une valeur RGB qui sera utilisé par le fragment shader pour ajuster la couleur de chaque pixel.</p>
+Une fois la quantité de lumière directionnelle calculée, nous pouvons générer la valeur d'éclairage en prenant l'éclairage ambiant et en y ajoutant le produit de la couleur de la lumière directionnelle, et aussi la quantité de la lumière directionnelle à fournir. Comme résultat, nous avons maintenant une valeur RGB qui sera utilisé par le fragment shader pour ajuster la couleur de chaque pixel.
 
-<h3 id="Le_fragment_shader">Le fragment shader</h3>
+### Le fragment shader
 
-<p>Le fragment shader a maintenant besoin d'être mis à jour en prenant en compte la quantité de lumière calculée précédemment par le vertex shader:</p>
+Le fragment shader a maintenant besoin d'être mis à jour en prenant en compte la quantité de lumière calculée précédemment par le vertex shader:
 
-<pre class="brush: html">&lt;script id="shader-fs" type="x-shader/x-fragment"&gt;
+```html
+<script id="shader-fs" type="x-shader/x-fragment">
   varying highp vec2 vTextureCoord;
   varying highp vec3 vLighting;
 
@@ -154,23 +155,23 @@ gl.uniformMatrix4fv(nUniform, false, new WebGLFloatArray(normalMatrix.flatten())
 
     gl_FragColor = vec4(texelColor.rgb * vLighting, texelColor.a);
   }
-&lt;/script&gt;
-</pre>
+</script>
+```
+
+Ici nous récupérons la couleur de chaque texel (tas de pixel pour une texture) , comme nous avons fait pour l'exemple précédent, mais avant d'ajuster la couleur du fragment, nous multiplions la couleur des pixels par la quantité de lumière, pour appliquer l'effet d'éclairage.
 
-<p>Ici nous récupérons la couleur de chaque texel (tas de pixel pour une texture) , comme nous avons fait pour l'exemple précédent, mais avant d'ajuster la couleur du fragment, nous multiplions la couleur des pixels par la quantité de lumière, pour appliquer l'effet d'éclairage.</p>
+Et c'est tout !
 
-<p>Et c'est tout !</p>
 
-<p> </p>
 
-<p>{{EmbedGHLiveSample('webgl-examples/tutorial/sample7/index.html', 670, 510) }}</p>
+{{EmbedGHLiveSample('webgl-examples/tutorial/sample7/index.html', 670, 510) }}
 
-<p><a href="https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample7">Voir le code complet</a> | <a href="http://mdn.github.io/webgl-examples/tutorial/sample7/">Ouvrir cette démo dans une nouvelle page</a></p>
+[Voir le code complet](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample7) | [Ouvrir cette démo dans une nouvelle page](http://mdn.github.io/webgl-examples/tutorial/sample7/)
 
-<h2 id="Exercices">Exercices</h2>
+## Exercices
 
-<p>Évidemment, ceci est un simple exemple, une implémentation basique de calcul de lumière par sommet. Pour aller plus loin, nous voulons implémenter un calcul de lumière par pixel, mais ceci vous mènera dans la bonne direction. </p>
+Évidemment, ceci est un simple exemple, une implémentation basique de calcul de lumière par sommet. Pour aller plus loin, nous voulons implémenter un calcul de lumière par pixel, mais ceci vous mènera dans la bonne direction.
 
-<p>Vous pouvez aussi implémenter avec la direction de source de lumière, la couleur de la source, la distance, etc..</p>
+Vous pouvez aussi implémenter avec la direction de source de lumière, la couleur de la source, la distance, etc..
 
-<p>{{PreviousNext("Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL", "Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL")}}</p>
+{{PreviousNext("Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL", "Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL")}}
diff --git a/files/fr/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.md b/files/fr/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.md
index 0bd4a47c5d..8b0ab94f97 100644
--- a/files/fr/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.md
+++ b/files/fr/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.md
@@ -7,112 +7,112 @@ tags:
 translation_of: Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL
 original_slug: Web/API/WebGL_API/Tutorial/Ajouter_des_couleurs_avec_les_shaders
 ---
-<p>{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context", "Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL")}}</p>
+{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context", "Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL")}}
 
-<p>Dans la <a href="/fr/docs/WebGL/Ajouter_du_contenu_à_WebGL">démonstration précédente</a>, nous avons créé un carré 2D, la prochaine étape évidente consiste à lui appliquer de la couleur. Nous allons faire cela en révisant les nuanceurs.</p>
+Dans la [démonstration précédente](/fr/docs/WebGL/Ajouter_du_contenu_à_WebGL), nous avons créé un carré 2D, la prochaine étape évidente consiste à lui appliquer de la couleur. Nous allons faire cela en révisant les nuanceurs.
 
-<h2 id="Application_de_couleur_aux_sommets">Application de couleur aux sommets</h2>
+## Application de couleur aux sommets
 
-<p>En WebGL, les objets sont construits en utilisant des sommets, chacun d'entre eux ayant une position et une couleur ; par défaut, les couleurs des autres sommets (et tous leurs autres attributs, incluant leur position) sont calculés en utilisant une interpolation linéaire, créant ainsi automatiquement des dégradés. Précédemment, notre nuanceur de sommet n'appliquait aucunes couleurs spécifiques aux sommets ; entre cela et le fait que le nuanceur de fragment assignait la valeur blanche à chaque pixel, le carré entier était rendu en blanc uni.</p>
+En WebGL, les objets sont construits en utilisant des sommets, chacun d'entre eux ayant une position et une couleur ; par défaut, les couleurs des autres sommets (et tous leurs autres attributs, incluant leur position) sont calculés en utilisant une interpolation linéaire, créant ainsi automatiquement des dégradés. Précédemment, notre nuanceur de sommet n'appliquait aucunes couleurs spécifiques aux sommets ; entre cela et le fait que le nuanceur de fragment assignait la valeur blanche à chaque pixel, le carré entier était rendu en blanc uni.
 
-<p>Supposons que nous voulions faire un rendu en dégradé dans lequel chaque coin du carré est de couleur différente : rouge, bleu, vert et blanc. La première chose à faire est de définir ces couleurs pour les quatre sommets. Pour ce faire, nous devons d'abord créer un tableau des couleurs des sommets, puis le stocker dans un tampon WebGL ; nous le ferons en ajoutant le code suivant à notre fonction <code>initBuffers()</code> :</p>
+Supposons que nous voulions faire un rendu en dégradé dans lequel chaque coin du carré est de couleur différente : rouge, bleu, vert et blanc. La première chose à faire est de définir ces couleurs pour les quatre sommets. Pour ce faire, nous devons d'abord créer un tableau des couleurs des sommets, puis le stocker dans un tampon WebGL ; nous le ferons en ajoutant le code suivant à notre fonction `initBuffers()` :
 
-<pre><code>  const colors = [
-    1.0,  1.0,  1.0,  1.0,    // blanc
-    1.0,  0.0,  0.0,  1.0,    // rouge
-    0.0,  1.0,  0.0,  1.0,    // vert
-    0.0,  0.0,  1.0,  1.0,    // bleu
-  ];
+      const colors = [
+        1.0,  1.0,  1.0,  1.0,    // blanc
+        1.0,  0.0,  0.0,  1.0,    // rouge
+        0.0,  1.0,  0.0,  1.0,    // vert
+        0.0,  0.0,  1.0,  1.0,    // bleu
+      ];
 
-  const colorBuffer = gl.createBuffer();
-  gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
-  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
+      const colorBuffer = gl.createBuffer();
+      gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
+      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
 
-  return {
-    position: positionBuffer,
-    color: colorBuffer,
-  };
-}</code></pre>
+      return {
+        position: positionBuffer,
+        color: colorBuffer,
+      };
+    }
 
-<p>Ce code commence par créer un tableau JavaScript contenant des vecteurs à 4 valeurs, un pour chaque couleur de sommet. Un tampon WebGL est alors alloué pour stocker ces couleurs, et le tableau est converti en flottants et stocké dans le tampon.</p>
+Ce code commence par créer un tableau JavaScript contenant des vecteurs à 4 valeurs, un pour chaque couleur de sommet. Un tampon WebGL est alors alloué pour stocker ces couleurs, et le tableau est converti en flottants et stocké dans le tampon.
 
-<p>Pour que ces couleurs soient effectivement utilisées, le nuanceur de sommet doit être mis à jour pour extraire la couleur appropriée du tampon des couleurs :</p>
+Pour que ces couleurs soient effectivement utilisées, le nuanceur de sommet doit être mis à jour pour extraire la couleur appropriée du tampon des couleurs :
 
-<pre><code>  const vsSource = `
-    attribute vec4 aVertexPosition;
-    attribute vec4 aVertexColor;
+      const vsSource = `
+        attribute vec4 aVertexPosition;
+        attribute vec4 aVertexColor;
 
-    uniform mat4 uModelViewMatrix;
-    uniform mat4 uProjectionMatrix;
+        uniform mat4 uModelViewMatrix;
+        uniform mat4 uProjectionMatrix;
 
-    varying lowp vec4 vColor;
+        varying lowp vec4 vColor;
 
-    void main(void) {
-      gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
-      vColor = aVertexColor;
-    }
-  `;</code></pre>
+        void main(void) {
+          gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
+          vColor = aVertexColor;
+        }
+      `;
 
-<p>La différence clé est ici que, pour chaque sommet, nous passons sa couleur au nuanceur de fragment en utilisant un <code>varying</code>.</p>
+La différence clé est ici que, pour chaque sommet, nous passons sa couleur au nuanceur de fragment en utilisant un `varying`.
 
-<h2 id="Coloriage_des_fragments">Coloriage des fragments</h2>
+## Coloriage des fragments
 
-<p>Pour mémoire, voici à quoi ressemblait précédemment notre nuanceur de fragment :</p>
+Pour mémoire, voici à quoi ressemblait précédemment notre nuanceur de fragment :
 
-<pre><code>  const fsSource = `
-    void main() {
-      gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
-    }
-  `;</code></pre>
+      const fsSource = `
+        void main() {
+          gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
+        }
+      `;
 
-<p>Afin de choisir la couleur interpolée pour chaque pixel, nous devons le changer pour récupérer la valeur depuis le varying <code>vColor</code> :</p>
+Afin de choisir la couleur interpolée pour chaque pixel, nous devons le changer pour récupérer la valeur depuis le varying `vColor` :
 
-<pre><code>  const fsSource = `
-    varying lowp vec4 vColor;
+      const fsSource = `
+        varying lowp vec4 vColor;
 
-    void main(void) {
-      gl_FragColor = vColor;
-    }
-  `;</code></pre>
-
-<p>La principale différence ici c'est que pour chaque sommet, on assigne la valeur correspondant à sa couleur dans le tableau.</p>
-
-<h2 id="Dessiner_en_utilisant_les_couleurs">Dessiner en utilisant les couleurs</h2>
-
-<p>Ensuite, il est nécessaire d'ajouter le code recherchant les couleurs dans l'emplacement de l'attribut, et de configurer cet attribut pour le programme nuanceur :</p>
-
-<pre><code>  const programInfo = {
-    program: shaderProgram,
-    attribLocations: {
-      vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),
-      vertexColor: gl.getAttribLocation(shaderProgram, 'aVertexColor'),
-    },
-    ...</code></pre>
-
-<p>Ensuite, <code>drawScene()</code> peut être modifié pour utiliser réellement ces couleurs lors du dessin du carré :</p>
-
-<pre><code>  // Indiquer à WebGL comment transférer les couleurs du tampon des couleurs
-  // dans l'attribut vertexColor.
-  {
-    const numComponents = 4;
-    const type = gl.FLOAT;
-    const normalize = false;
-    const stride = 0;
-    const offset = 0;
-    gl.bindBuffer(gl.ARRAY_BUFFER, buffers.color);
-    gl.vertexAttribPointer(
-        programInfo.attribLocations.vertexColor,
-        numComponents,
-        type,
-        normalize,
-        stride,
-        offset);
-    gl.enableVertexAttribArray(
-        programInfo.attribLocations.vertexColor);
-  }</code></pre>
-
-<p>{{EmbedGHLiveSample('webgl-examples/tutorial/sample3/index.html', 670, 510) }}</p>
-
-<p><a href="https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample3">Voir le code complet</a> | <a href="http://mdn.github.io/webgl-examples/tutorial/sample3/">Ouvrir cette démo dans une nouvelle page</a></p>
-
-<p>{{PreviousNext("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context", "Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL")}}</p>
+        void main(void) {
+          gl_FragColor = vColor;
+        }
+      `;
+
+La principale différence ici c'est que pour chaque sommet, on assigne la valeur correspondant à sa couleur dans le tableau.
+
+## Dessiner en utilisant les couleurs
+
+Ensuite, il est nécessaire d'ajouter le code recherchant les couleurs dans l'emplacement de l'attribut, et de configurer cet attribut pour le programme nuanceur :
+
+      const programInfo = {
+        program: shaderProgram,
+        attribLocations: {
+          vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),
+          vertexColor: gl.getAttribLocation(shaderProgram, 'aVertexColor'),
+        },
+        ...
+
+Ensuite, `drawScene()` peut être modifié pour utiliser réellement ces couleurs lors du dessin du carré :
+
+      // Indiquer à WebGL comment transférer les couleurs du tampon des couleurs
+      // dans l'attribut vertexColor.
+      {
+        const numComponents = 4;
+        const type = gl.FLOAT;
+        const normalize = false;
+        const stride = 0;
+        const offset = 0;
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffers.color);
+        gl.vertexAttribPointer(
+            programInfo.attribLocations.vertexColor,
+            numComponents,
+            type,
+            normalize,
+            stride,
+            offset);
+        gl.enableVertexAttribArray(
+            programInfo.attribLocations.vertexColor);
+      }
+
+{{EmbedGHLiveSample('webgl-examples/tutorial/sample3/index.html', 670, 510) }}
+
+[Voir le code complet](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample3) | [Ouvrir cette démo dans une nouvelle page](http://mdn.github.io/webgl-examples/tutorial/sample3/)
+
+{{PreviousNext("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context", "Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL")}}
diff --git a/files/fr/web/api/webgl_api/tutorial/using_textures_in_webgl/index.md b/files/fr/web/api/webgl_api/tutorial/using_textures_in_webgl/index.md
index 002be155c6..7982addf80 100644
--- a/files/fr/web/api/webgl_api/tutorial/using_textures_in_webgl/index.md
+++ b/files/fr/web/api/webgl_api/tutorial/using_textures_in_webgl/index.md
@@ -7,275 +7,265 @@ tags:
 translation_of: Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL
 original_slug: Web/API/WebGL_API/Tutorial/Utiliser_les_textures_avec_WebGL
 ---
-<p>{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL", "Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}}</p>
-
-<p>Maintenant que notre programme peut faire tourner un cube 3D, appliquons lui une texture, au lieu d'avoir des couleurs unies pour ses faces.</p>
-
-<h2 id="Chargement_des_textures">Chargement des textures</h2>
-
-<p>La première chose à faire est d'ajouter le code pour charger les textures. Dans notre cas, nous utiliserons une texture unique, appliquée à chacune des six faces de notre cube en rotation ; mais la même technique peut être utilisée un nombre quelconque de textures.</p>
-
-<div class="note">
-  <p><strong>Note :</strong> il est important de noter que le chargement des textures suit les <a href="/fr-FR/docs/Web/HTTP/CORS">règles inter-domaines</a> ; donc vous pouvez seulement charger des textures depuis les sites pour lesquels votre contenu a l'approbation CORS. Voir les textures inter-domaines ci-dessous pour plus de détails.</p>
-</div>
-
-<p>Le code qui charge la texture ressemble à ce qui suit : </p>
-
-<pre><code>//
-// Initialiser une texture et charger une image.
-// Quand le chargement d'une image est terminé, la copier dans la texture.
-//
-function loadTexture(gl, url) {
-  const texture = gl.createTexture();
-  gl.bindTexture(gl.TEXTURE_2D, texture);
-
-  // Du fait que les images doivent être téléchargées depuis l'internet,
-  // il peut s'écouler un certain temps avant qu'elles ne soient prêtes.
-  // Jusque là, mettre un seul pixel dans la texture, de sorte que nous puissions
-  // l'utiliser immédiatement. Quand le téléchargement de la page sera terminé,
-  // nous mettrons à jour la texture avec le contenu de l'image.
-  const level = 0;
-  const internalFormat = gl.RGBA;
-  const width = 1;
-  const height = 1;
-  const border = 0;
-  const srcFormat = gl.RGBA;
-  const srcType = gl.UNSIGNED_BYTE;
-  const pixel = new Uint8Array([0, 0, 255, 255]);  // bleu opaque
-  gl.texImage2D(gl.TEXTURE_2D, level, internalFormat,
-                width, height, border, srcFormat, srcType,
-                pixel);
-
-  const image = new Image();
-  image.onload = function() {
-    gl.bindTexture(gl.TEXTURE_2D, texture);
-    gl.texImage2D(gl.TEXTURE_2D, level, internalFormat,
-                  srcFormat, srcType, image);
-
-    // WebGL1 a des spécifications différentes pour les images puissances de 2
-    // par rapport aux images non puissances de 2 ; aussi vérifier si l'image est une
-    // puissance de 2 sur chacune de ses dimensions.
-    if (isPowerOf2(image.width) &amp;&amp; isPowerOf2(image.height)) {
-       // Oui, c'est une puissance de 2. Générer les mips.
-       gl.generateMipmap(gl.TEXTURE_2D);
-    } else {
-       // Non, ce n'est pas une puissance de 2. Désactiver les mips et définir l'habillage
-       // comme "accrocher au bord"
-       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
-       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
-       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL", "Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}}
+
+Maintenant que notre programme peut faire tourner un cube 3D, appliquons lui une texture, au lieu d'avoir des couleurs unies pour ses faces.
+
+## Chargement des textures
+
+La première chose à faire est d'ajouter le code pour charger les textures. Dans notre cas, nous utiliserons une texture unique, appliquée à chacune des six faces de notre cube en rotation ; mais la même technique peut être utilisée un nombre quelconque de textures.
+
+> **Note :** il est important de noter que le chargement des textures suit les [règles inter-domaines](/fr-FR/docs/Web/HTTP/CORS) ; donc vous pouvez seulement charger des textures depuis les sites pour lesquels votre contenu a l'approbation CORS. Voir les textures inter-domaines ci-dessous pour plus de détails.
+
+Le code qui charge la texture ressemble à ce qui suit :
+
+    //
+    // Initialiser une texture et charger une image.
+    // Quand le chargement d'une image est terminé, la copier dans la texture.
+    //
+    function loadTexture(gl, url) {
+      const texture = gl.createTexture();
+      gl.bindTexture(gl.TEXTURE_2D, texture);
+
+      // Du fait que les images doivent être téléchargées depuis l'internet,
+      // il peut s'écouler un certain temps avant qu'elles ne soient prêtes.
+      // Jusque là, mettre un seul pixel dans la texture, de sorte que nous puissions
+      // l'utiliser immédiatement. Quand le téléchargement de la page sera terminé,
+      // nous mettrons à jour la texture avec le contenu de l'image.
+      const level = 0;
+      const internalFormat = gl.RGBA;
+      const width = 1;
+      const height = 1;
+      const border = 0;
+      const srcFormat = gl.RGBA;
+      const srcType = gl.UNSIGNED_BYTE;
+      const pixel = new Uint8Array([0, 0, 255, 255]);  // bleu opaque
+      gl.texImage2D(gl.TEXTURE_2D, level, internalFormat,
+                    width, height, border, srcFormat, srcType,
+                    pixel);
+
+      const image = new Image();
+      image.onload = function() {
+        gl.bindTexture(gl.TEXTURE_2D, texture);
+        gl.texImage2D(gl.TEXTURE_2D, level, internalFormat,
+                      srcFormat, srcType, image);
+
+        // WebGL1 a des spécifications différentes pour les images puissances de 2
+        // par rapport aux images non puissances de 2 ; aussi vérifier si l'image est une
+        // puissance de 2 sur chacune de ses dimensions.
+        if (isPowerOf2(image.width) && isPowerOf2(image.height)) {
+           // Oui, c'est une puissance de 2. Générer les mips.
+           gl.generateMipmap(gl.TEXTURE_2D);
+        } else {
+           // Non, ce n'est pas une puissance de 2. Désactiver les mips et définir l'habillage
+           // comme "accrocher au bord"
+           gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+           gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+           gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+        }
+      };
+      image.src = url;
+
+      return texture;
     }
-  };
-  image.src = url;
 
-  return texture;
-}
-
-function isPowerOf2(value) {
-  return (value &amp; (value - 1)) == 0;
-}</code></pre>
-
-<p>La routine <code>loadTexture()</code> commence par créer un objet texture WebGL <code>texture</code> en appelant la fonction WebGL {{domxref ("WebGLRenderingContext.createTexture()", "createTexture()")}}. Il téléverse ensuite un seul pixel bleu en utilisant {{domxref ("WebGLRenderingContext.texImage2D()", "texImage2D()")}}. Cela rend la texture immédiatement utilisable comme une couleur bleue unie, alors que cela peut prendre quelques instants pour télécharger notre image.</p>
-
-<p>Pour charger la texture à partir du fichier image, elle crée ensuite un objet Image et en affecte le src à l'URL de l'image que nous souhaitons utiliser comme texture. La fonction que nous affectons à <code>image.onload</code> sera appelée une fois terminé le téléchargement de l'image. À ce stade, nous appelons à nouveau {{domxref ("WebGLRenderingContext.texImage2D()", "texImage2D()")}}, cette fois en utilisant l'image comme source pour la texture. Après cela, nous configurons le filtrage et l'habillage de la texture suivant que l'image que nous téléchargeons a ou non une puissance de 2 selon ses deux dimensions.</p>
-
-<p>WebGL1 ne peut utiliser que des textures non puissances de 2 avec d'un filtrage défini à NEAREST ou LINEAR, et il ne peut pas générer de mipmap pour elles. Leur mode d'habillage doit également être défini à CLAMP_TO_EDGE. Inversement, si la texture est une puissance de 2 dans les deux dimensions, alors WebGL peut faire un filtrage de meilleure qualité, il peut utiliser mipmap, et il peut définir le mode d'habillage à REPEAT ou MIRRORED_REPEAT.</p>
+    function isPowerOf2(value) {
+      return (value & (value - 1)) == 0;
+    }
 
-<p>Un exemple de texture répétée est le pavage d'une image par quelques briques pour couvrir un mur de briques.</p>
+La routine `loadTexture()` commence par créer un objet texture WebGL `texture` en appelant la fonction WebGL {{domxref ("WebGLRenderingContext.createTexture()", "createTexture()")}}. Il téléverse ensuite un seul pixel bleu en utilisant {{domxref ("WebGLRenderingContext.texImage2D()", "texImage2D()")}}. Cela rend la texture immédiatement utilisable comme une couleur bleue unie, alors que cela peut prendre quelques instants pour télécharger notre image.
 
-<p>Le mipmapping et la répétition UV peuvent être désactivés avec {{domxref ("WebGLRenderingContext.texParameter()", "texParameteri()")}}. Cela permettra des textures non-puissances-de-deux (NPOT) au prix du mipmapping, de l'habillage UV, du pavage UV, et de votre contrôle sur la manière dont le périphérique gérera votre texture.</p>
+Pour charger la texture à partir du fichier image, elle crée ensuite un objet Image et en affecte le src à l'URL de l'image que nous souhaitons utiliser comme texture. La fonction que nous affectons à `image.onload` sera appelée une fois terminé le téléchargement de l'image. À ce stade, nous appelons à nouveau {{domxref ("WebGLRenderingContext.texImage2D()", "texImage2D()")}}, cette fois en utilisant l'image comme source pour la texture. Après cela, nous configurons le filtrage et l'habillage de la texture suivant que l'image que nous téléchargeons a ou non une puissance de 2 selon ses deux dimensions.
 
-<pre><code>// gl.NEAREST est aussi permis, au lieu de gl.LINEAR, du fait qu'aucun ne fait de mipmap.
-gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
-// Empêcher l'habillage selon la coordonnée s (répétition).
-gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
-// Empêcher l'habillage selon la coordonnée t (répétition).
-gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);</code></pre>
+WebGL1 ne peut utiliser que des textures non puissances de 2 avec d'un filtrage défini à NEAREST ou LINEAR, et il ne peut pas générer de mipmap pour elles. Leur mode d'habillage doit également être défini à CLAMP_TO_EDGE. Inversement, si la texture est une puissance de 2 dans les deux dimensions, alors WebGL peut faire un filtrage de meilleure qualité, il peut utiliser mipmap, et il peut définir le mode d'habillage à REPEAT ou MIRRORED_REPEAT.
 
-<p>A nouveau, avec ces paramètres, les appareils WebGL compatibles accepteront automatiquement toute résolution pour cette texture (jusqu'à leurs dimensions maximum). A défaut de la configuration ci-dessus, WebGL requiert que tous les échantillons de textures NPOT échouent, en retournant du noir transparent : <code>rgba (0,0,0,0)</code>.</p>
+Un exemple de texture répétée est le pavage d'une image par quelques briques pour couvrir un mur de briques.
 
-<p>Pour charger l'image, ajoutons un appel à notre fonction <code>loadTexture()</code> dans notre fonction <code>main()</code>. Cela peut être ajouté après l'appel <code>initBuffers(gl)</code>.</p>
+Le mipmapping et la répétition UV peuvent être désactivés avec {{domxref ("WebGLRenderingContext.texParameter()", "texParameteri()")}}. Cela permettra des textures non-puissances-de-deux (NPOT) au prix du mipmapping, de l'habillage UV, du pavage UV, et de votre contrôle sur la manière dont le périphérique gérera votre texture.
 
-<pre><code>// Charger la texture
-const texture = loadTexture(gl, 'cubetexture.png');</code>
-</pre>
+    // gl.NEAREST est aussi permis, au lieu de gl.LINEAR, du fait qu'aucun ne fait de mipmap.
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+    // Empêcher l'habillage selon la coordonnée s (répétition).
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    // Empêcher l'habillage selon la coordonnée t (répétition).
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
 
-<h2 id="Application_de_la_texture_sur_les_faces">Application de la texture sur les faces</h2>
+A nouveau, avec ces paramètres, les appareils WebGL compatibles accepteront automatiquement toute résolution pour cette texture (jusqu'à leurs dimensions maximum). A défaut de la configuration ci-dessus, WebGL requiert que tous les échantillons de textures NPOT échouent, en retournant du noir transparent : `rgba (0,0,0,0)`.
 
-<p>À ce stade, la texture est chargée et prête à être utilisée. Mais avant de pouvoir l'utiliser, nous devons définir l'application des coordonnées de texture aux sommets des faces de notre cube. Cela remplace tout le code précédemment existant pour la configuration des couleurs pour chacune des faces du cube dans <code>initBuffers()</code>.</p>
+Pour charger l'image, ajoutons un appel à notre fonction `loadTexture()` dans notre fonction `main()`. Cela peut être ajouté après l'appel `initBuffers(gl)`.
 
-<pre><code> const textureCoordBuffer = gl.createBuffer();
-  gl.bindBuffer(gl.ARRAY_BUFFER, textureCoordBuffer);
+    // Charger la texture
+    const texture = loadTexture(gl, 'cubetexture.png');
 
-  const textureCoordinates = [
-    // Front
-    0.0,  0.0,
-    1.0,  0.0,
-    1.0,  1.0,
-    0.0,  1.0,
-    // Back
-    0.0,  0.0,
-    1.0,  0.0,
-    1.0,  1.0,
-    0.0,  1.0,
-    // Top
-    0.0,  0.0,
-    1.0,  0.0,
-    1.0,  1.0,
-    0.0,  1.0,
-    // Bottom
-    0.0,  0.0,
-    1.0,  0.0,
-    1.0,  1.0,
-    0.0,  1.0,
-    // Right
-    0.0,  0.0,
-    1.0,  0.0,
-    1.0,  1.0,
-    0.0,  1.0,
-    // Left
-    0.0,  0.0,
-    1.0,  0.0,
-    1.0,  1.0,
-    0.0,  1.0,
-  ];
+## Application de la texture sur les faces
 
-  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoordinates),
-                gl.STATIC_DRAW);
+À ce stade, la texture est chargée et prête à être utilisée. Mais avant de pouvoir l'utiliser, nous devons définir l'application des coordonnées de texture aux sommets des faces de notre cube. Cela remplace tout le code précédemment existant pour la configuration des couleurs pour chacune des faces du cube dans `initBuffers()`.
 
-...
-  return {
-    position: positionBuffer,
-    textureCoord: textureCoordBuffer,
-    indices: indexBuffer,
-  };</code></pre>
+     const textureCoordBuffer = gl.createBuffer();
+      gl.bindBuffer(gl.ARRAY_BUFFER, textureCoordBuffer);
 
-<p>Tout d'abord, ce code crée un tampon WebGL dans lequel nous stockerons les coordonnées de texture pour chaque face, puis nous lions ce tampon comme étant le tableau dans lequel nous allons écrire.</p>
+      const textureCoordinates = [
+        // Front
+        0.0,  0.0,
+        1.0,  0.0,
+        1.0,  1.0,
+        0.0,  1.0,
+        // Back
+        0.0,  0.0,
+        1.0,  0.0,
+        1.0,  1.0,
+        0.0,  1.0,
+        // Top
+        0.0,  0.0,
+        1.0,  0.0,
+        1.0,  1.0,
+        0.0,  1.0,
+        // Bottom
+        0.0,  0.0,
+        1.0,  0.0,
+        1.0,  1.0,
+        0.0,  1.0,
+        // Right
+        0.0,  0.0,
+        1.0,  0.0,
+        1.0,  1.0,
+        0.0,  1.0,
+        // Left
+        0.0,  0.0,
+        1.0,  0.0,
+        1.0,  1.0,
+        0.0,  1.0,
+      ];
 
-<p>Le tableau <code>textureCoordinates</code> définit les coordonnées de texture correspondant à chaque sommet de chaque face. Notez que les coordonnées de texture vont de 0,0 à 1,0 ; les dimensions des textures sont normalisées dans une plage de 0,0 à 1,0 quelque soit leur taille réelle, aux fins d'application de la texture.</p>
+      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoordinates),
+                    gl.STATIC_DRAW);
 
-<p>Une fois que nous avons mis en place le tableau d'application de la texture, nous l'envoyons dans le tampon, de sorte que WebGL ait ces données prêtes pour son utilisation.</p>
+    ...
+      return {
+        position: positionBuffer,
+        textureCoord: textureCoordBuffer,
+        indices: indexBuffer,
+      };
 
-<h2 id="Mise_à_jour_des_shaders">Mise à jour des shaders</h2>
+Tout d'abord, ce code crée un tampon WebGL dans lequel nous stockerons les coordonnées de texture pour chaque face, puis nous lions ce tampon comme étant le tableau dans lequel nous allons écrire.
 
-<p>Le programme shader doit également être mis à jour pour utiliser des textures au lieu de couleurs unies.</p>
+Le tableau `textureCoordinates` définit les coordonnées de texture correspondant à chaque sommet de chaque face. Notez que les coordonnées de texture vont de 0,0 à 1,0 ; les dimensions des textures sont normalisées dans une plage de 0,0 à 1,0 quelque soit leur taille réelle, aux fins d'application de la texture.
 
-<h3 id="Le_shader_de_sommet">Le shader de sommet</h3>
+Une fois que nous avons mis en place le tableau d'application de la texture, nous l'envoyons dans le tampon, de sorte que WebGL ait ces données prêtes pour son utilisation.
 
-<p>Nous avons besoin de remplacer le shader de sommet de façon à ce qu'au lieu de récupérer des données de couleur, il récupère à la place des données de coordonnées de texture.</p>
+## Mise à jour des shaders
 
-<pre><code>const vsSource = `
-    attribute vec4 aVertexPosition;
-    attribute vec2 aTextureCoord;
+Le programme shader doit également être mis à jour pour utiliser des textures au lieu de couleurs unies.
 
-    uniform mat4 uModelViewMatrix;
-    uniform mat4 uProjectionMatrix;
+### Le shader de sommet
 
-    varying highp vec2 vTextureCoord;
+Nous avons besoin de remplacer le shader de sommet de façon à ce qu'au lieu de récupérer des données de couleur, il récupère à la place des données de coordonnées de texture.
 
-    void main(void) {
-      gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
-      vTextureCoord = aTextureCoord;
-    }
-  `;</code></pre>
+    const vsSource = `
+        attribute vec4 aVertexPosition;
+        attribute vec2 aTextureCoord;
 
-<p>Le changement clé est ici qu'au lieu d'aller chercher la couleur du sommet, nous récupérons les coordonnées de la texture, et nous les transmettons au shader de sommet ; ceci indiquera l'emplacement dans la texture correspondant au sommet.</p>
+        uniform mat4 uModelViewMatrix;
+        uniform mat4 uProjectionMatrix;
 
-<h3 id="Le_shader_de_fragment">Le shader de fragment</h3>
+        varying highp vec2 vTextureCoord;
 
-<p>Le shader de fragment doit également être mis à jour :</p>
+        void main(void) {
+          gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
+          vTextureCoord = aTextureCoord;
+        }
+      `;
 
-<pre><code>const fsSource = `
-    varying highp vec2 vTextureCoord;
+Le changement clé est ici qu'au lieu d'aller chercher la couleur du sommet, nous récupérons les coordonnées de la texture, et nous les transmettons au shader de sommet ; ceci indiquera l'emplacement dans la texture correspondant au sommet.
 
-    uniform sampler2D uSampler;
+### Le shader de fragment
+
+Le shader de fragment doit également être mis à jour :
+
+    const fsSource = `
+        varying highp vec2 vTextureCoord;
+
+        uniform sampler2D uSampler;
+
+        void main(void) {
+          gl_FragColor = texture2D(uSampler, vTextureCoord);
+        }
+      `;
+
+Au lieu d'attribuer une valeur de couleur à la couleur du fragment, la couleur du fragment est calculée en récupérant le **texel** (c'est-à-dire, le pixel dans la texture) sur la base de la valeur de `vTextureCoord`, qui est interpolée comme les sommets.
+
+### Emplacements des attributs et des uniformes
+
+Du fait que nous avons changé un attribut et ajouté un uniforme, nous devons rechercher leurs emplacements :
+
+      const programInfo = {
+        program: shaderProgram,
+        attribLocations: {
+          vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),
+          textureCoord: gl.getAttribLocation(shaderProgram, 'aTextureCoord'),
+        },
+        uniformLocations: {
+          projectionMatrix: gl.getUniformLocation(shaderProgram, 'uProjectionMatrix'),
+          modelViewMatrix: gl.getUniformLocation(shaderProgram, 'uModelViewMatrix'),
+          uSampler: gl.getUniformLocation(shaderProgram, 'uSampler'),
+        },
+      };
+
+## Dessin du cube texturé
+
+Les modifications apportées à la fonction `drawScene()` sont simples.
+
+Tout d'abord, le code pour spécifier le tampon de couleurs a disparu, remplacé par ce qui suit :
 
-    void main(void) {
-      gl_FragColor = texture2D(uSampler, vTextureCoord);
+    // Indiquer à WebGL comment extraire les coordonnées de texture du tampon
+    {
+        const num = 2; // chaque coordonnée est composée de 2 valeurs
+        const type = gl.FLOAT; // les données dans le tampon sont des flottants 32 bits
+        const normalize = false; // ne pas normaliser
+        const stride = 0; // combien d'octets à récupérer entre un jeu et le suivant
+        const offset = 0; // à combien d'octets du début faut-il commencer
+        gl.bindBuffer(gl.ARRAY_BUFFER, buffers.textureCoord);
+        gl.vertexAttribPointer(programInfo.attributeLocations.textureCoord, num, type, normalize, stride, offset);
+        gl.enableVertexAttribArray(programInfo.attributeLocations.textureCoord);
     }
-  `;</code></pre>
-
-<p>Au lieu d'attribuer une valeur de couleur à la couleur du fragment, la couleur du fragment est calculée en récupérant le <strong>texel</strong> (c'est-à-dire, le pixel dans la texture) sur la base de la valeur de <code>vTextureCoord</code>, qui est interpolée comme les sommets.</p>
-
-<h3 id="Emplacements_des_attributs_et_des_uniformes">Emplacements des attributs et des uniformes</h3>
-
-<p>Du fait que nous avons changé un attribut et ajouté un uniforme, nous devons rechercher leurs emplacements :</p>
-
-<pre><code>  const programInfo = {
-    program: shaderProgram,
-    attribLocations: {
-      vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),
-      textureCoord: gl.getAttribLocation(shaderProgram, 'aTextureCoord'),
-    },
-    uniformLocations: {
-      projectionMatrix: gl.getUniformLocation(shaderProgram, 'uProjectionMatrix'),
-      modelViewMatrix: gl.getUniformLocation(shaderProgram, 'uModelViewMatrix'),
-      uSampler: gl.getUniformLocation(shaderProgram, 'uSampler'),
-    },
-  };</code>
-</pre>
-
-<h2 id="Dessin_du_cube_texturé">Dessin du cube texturé</h2>
-
-<p>Les modifications apportées à la fonction <code>drawScene()</code> sont simples.</p>
-
-<p>Tout d'abord, le code pour spécifier le tampon de couleurs a disparu, remplacé par ce qui suit :</p>
-
-<pre><code>// Indiquer à WebGL comment extraire les coordonnées de texture du tampon
-{
-    const num = 2; // chaque coordonnée est composée de 2 valeurs
-    const type = gl.FLOAT; // les données dans le tampon sont des flottants 32 bits
-    const normalize = false; // ne pas normaliser
-    const stride = 0; // combien d'octets à récupérer entre un jeu et le suivant
-    const offset = 0; // à combien d'octets du début faut-il commencer
-    gl.bindBuffer(gl.ARRAY_BUFFER, buffers.textureCoord);
-    gl.vertexAttribPointer(programInfo.attributeLocations.textureCoord, num, type, normalize, stride, offset);
-    gl.enableVertexAttribArray(programInfo.attributeLocations.textureCoord);
-}</code></pre>
 
-<p>Ajoutez alors le code pour spécifier la texture à appliquer sur les faces, juste avant de dessiner :</p>
+Ajoutez alors le code pour spécifier la texture à appliquer sur les faces, juste avant de dessiner :
 
-<pre><code>  // Indiquer à WebGL que nous voulons affecter l'unité de texture 0
-  gl.activeTexture(gl.TEXTURE0);
+      // Indiquer à WebGL que nous voulons affecter l'unité de texture 0
+      gl.activeTexture(gl.TEXTURE0);
 
-  // Lier la texture à l'unité de texture 0
-  gl.bindTexture(gl.TEXTURE_2D, texture);
+      // Lier la texture à l'unité de texture 0
+      gl.bindTexture(gl.TEXTURE_2D, texture);
 
-  // Indiquer au shader que nous avons lié la texture à l'unité de texture 0
-  gl.uniform1i(programInfo.uniformLocations.uSampler, 0);</code></pre>
+      // Indiquer au shader que nous avons lié la texture à l'unité de texture 0
+      gl.uniform1i(programInfo.uniformLocations.uSampler, 0);
 
-<p>WebGL fournit un minimum de 8 unités de texture ; la première d'entre elles est <code>gl.TEXTURE0</code>. Nous indiquons à WebGL que nous voulons affecter l'unité 0. Nous appelons alors {{domxref ("WebGLRenderingContext.bindTexture()", "bindTexture()")}}, qui lie la texture au point de liaison <code>TEXTURE_2D</code> de l'unité de texture 0. Nous indiquons alors au shader que pour l'<code>uSampler</code>, il faut utiliser l'unité de texture 0.</p>
+WebGL fournit un minimum de 8 unités de texture ; la première d'entre elles est `gl.TEXTURE0`. Nous indiquons à WebGL que nous voulons affecter l'unité 0. Nous appelons alors {{domxref ("WebGLRenderingContext.bindTexture()", "bindTexture()")}}, qui lie la texture au point de liaison `TEXTURE_2D` de l'unité de texture 0. Nous indiquons alors au shader que pour l'`uSampler`, il faut utiliser l'unité de texture 0.
 
-<p>Finalement, ajoutez <code>texture</code> comme paramètre de la fonction <code>drawScene()</code>, où elle est à la fois définie et appelée.</p>
+Finalement, ajoutez `texture` comme paramètre de la fonction `drawScene()`, où elle est à la fois définie et appelée.
 
-<pre><code>drawScene(gl, programInfo, buffers, texture, deltaTime);
-...
-function drawScene(gl, programInfo, buffers, texture, deltaTime) {</code></pre>
+    drawScene(gl, programInfo, buffers, texture, deltaTime);
+    ...
+    function drawScene(gl, programInfo, buffers, texture, deltaTime) {
 
-<p>Arrivés ce point, le cube en rotation devrait être prêt à fonctionner.</p>
+Arrivés ce point, le cube en rotation devrait être prêt à fonctionner.
 
-<p>{{EmbedGHLiveSample('webgl-examples/tutorial/sample6/index.html', 670, 510) }}</p>
+{{EmbedGHLiveSample('webgl-examples/tutorial/sample6/index.html', 670, 510) }}
 
-<p><a href="https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample6">Voir le code complet</a> | <a href="http://mdn.github.io/webgl-examples/tutorial/sample6/">Ouvrir cette démo dans une nouvelle page</a></p>
+[Voir le code complet](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample6) | [Ouvrir cette démo dans une nouvelle page](http://mdn.github.io/webgl-examples/tutorial/sample6/)
 
-<h2 id="Textures_inter-domaines">Textures inter-domaines</h2>
+## Textures inter-domaines
 
-<p>Le chargement des textures WebGL est soumis aux contrôles d'accès inter-domaines. Pour que votre contenu puisse charger une texture d'un autre domaine, une approbation CORS doit être obtenue. Voir le <a href="/fr/docs/HTTP/Access_control_CORS">Contrôle d'accès HTTP</a> pour plus de détails sur CORS.</p>
+Le chargement des textures WebGL est soumis aux contrôles d'accès inter-domaines. Pour que votre contenu puisse charger une texture d'un autre domaine, une approbation CORS doit être obtenue. Voir le [Contrôle d'accès HTTP](/fr/docs/HTTP/Access_control_CORS) pour plus de détails sur CORS.
 
-<p>Voir cet <a href="http://hacks.mozilla.org/2011/11/using-cors-to-load-webgl-textures-from-cross-domain-images/">article sur hacks.mozilla.org</a> pour une explication de l'utilisation des images approuvées CORS comme textures WebGL, avec <a href="http://people.mozilla.org/~bjacob/webgltexture-cors-js.html">un exemple complet</a>.</p>
+Voir cet [article sur hacks.mozilla.org](http://hacks.mozilla.org/2011/11/using-cors-to-load-webgl-textures-from-cross-domain-images/) pour une explication de l'utilisation des images approuvées CORS comme textures WebGL, avec [un exemple complet](http://people.mozilla.org/~bjacob/webgltexture-cors-js.html).
 
-<div class="note">
-<p><strong>Note :</strong> le support CORS pour les texture WebGL et l'attribut <code>crossOrigin</code> pour les éléments image est implémenté dans {{Gecko("8.0")}}.</p>
-</div>
+> **Note :** le support CORS pour les texture WebGL et l'attribut `crossOrigin` pour les éléments image est implémenté dans {{Gecko("8.0")}}.
 
-<p>Les canevas 2D dégradés (en écriture seule) ne peuvent pas être utilisés comme des textures WebGL. Un {{HTMLElement ("canvas")}} 2D devient dégradé par exemple lorsqu'il est utilisé pour dessiner une image inter-domaine.</p>
+Les canevas 2D dégradés (en écriture seule) ne peuvent pas être utilisés comme des textures WebGL. Un {{HTMLElement ("canvas")}} 2D devient dégradé par exemple lorsqu'il est utilisé pour dessiner une image inter-domaine.
 
-<div class="note">
-<p><strong>Note :</strong> le support CORS pour <code>drawImage</code> de Canvas 2D est implémenté dans {{Gecko ("9.0")}}. Cela signifie que l'utilisation d'une image inter-domaine ayant l'approbation CORS ne dégrade plus le canevas 2D, de sorte que le canevas 2D reste utilisable comme source d'une texture WebGL.</p>
-</div>
+> **Note :** le support CORS pour `drawImage` de Canvas 2D est implémenté dans {{Gecko ("9.0")}}. Cela signifie que l'utilisation d'une image inter-domaine ayant l'approbation CORS ne dégrade plus le canevas 2D, de sorte que le canevas 2D reste utilisable comme source d'une texture WebGL.
 
-<div class="note">
-<p><strong>Note :</strong> le support CORS pour les vidéos inter-domaines et l'attribut <code>crossorigin</code> pour les éléments {{HTMLElement ("video")}} est implémenté dans {{Gecko ("12.0")}}.</p>
-</div>
+> **Note :** le support CORS pour les vidéos inter-domaines et l'attribut `crossorigin` pour les éléments {{HTMLElement ("video")}} est implémenté dans {{Gecko ("12.0")}}.
 
-<p>{{PreviousNext("Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL", "Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}}</p>
+{{PreviousNext("Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL", "Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}}
diff --git a/files/fr/web/api/webgl_api/types/index.md b/files/fr/web/api/webgl_api/types/index.md
index 8c7156a119..1b345e92f1 100644
--- a/files/fr/web/api/webgl_api/types/index.md
+++ b/files/fr/web/api/webgl_api/types/index.md
@@ -7,161 +7,151 @@ tags:
   - WebGL
 translation_of: Web/API/WebGL_API/Types
 ---
-<div>{{WebGLSidebar}}</div>
+{{WebGLSidebar}}
 
-<p>Les types suivants sont utilisés dans les interfaces <a href="/fr-FR/docs/Web/API/WebGL_API">WebGL</a>.</p>
+Les types suivants sont utilisés dans les interfaces [WebGL](/fr-FR/docs/Web/API/WebGL_API).
 
-<h2 id="WebGL_1">WebGL 1</h2>
+## WebGL 1
 
-<p>Ces types sont utilisés à l'intérieur d'un {{domxref("WebGLRenderingContext")}}.</p>
+Ces types sont utilisés à l'intérieur d'un {{domxref("WebGLRenderingContext")}}.
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <td class="header">Type</td>
-   <td class="header">Type Web IDL</td>
-   <td class="header">Description</td>
-  </tr>
-  <tr>
-   <td><code>GLenum</code></td>
-   <td><code>unsigned long</code></td>
-   <td>Utilisé pour les enums. Voir aussi la liste des <a href="/fr-FR/docs/Web/API/WebGL_API/Constants">constantes</a>.</td>
-  </tr>
-  <tr>
-   <td><code>GLboolean</code></td>
-   <td><code>boolean</code></td>
-   <td>Un {{jsxref("Boolean")}}.</td>
-  </tr>
-  <tr>
-   <td><code>GLbitfield</code></td>
-   <td><code>unsigned long</code></td>
-   <td>Un champ de bits stockant plusieurs bits logiques. Utilisé par exemple dans {{domxref("WebGLRenderingContext.clear()")}}.</td>
-  </tr>
-  <tr>
-   <td><code>GLbyte</code></td>
-   <td><code>byte</code></td>
-   <td>Entier signé en complément à deux sur 8 bits.</td>
-  </tr>
-  <tr>
-   <td><code>GLshort</code></td>
-   <td><code>short</code></td>
-   <td>Entier signé en complément à deux sur 16 bits.</td>
-  </tr>
-  <tr>
-   <td><code>GLint</code></td>
-   <td><code>long</code></td>
-   <td>Entier signé en complément à deux sur 32 bits.</td>
-  </tr>
-  <tr>
-   <td><code>GLsizei</code></td>
-   <td><code>long</code></td>
-   <td>Utilisé pour les tailles (par ex., la largeur et la hauteur du tampon de dessin).</td>
-  </tr>
-  <tr>
-   <td><code>GLintptr</code></td>
-   <td><code>long long</code></td>
-   <td>Type spécial pour l'arithmétique de pointeur.</td>
-  </tr>
-  <tr>
-   <td><code>GLsizeiptr</code></td>
-   <td><code>long long</code></td>
-   <td>Type spécial pour l'arithmétique de pointeur.</td>
-  </tr>
-  <tr>
-   <td><code>GLubyte</code></td>
-   <td><code>octet</code></td>
-   <td>Entier non signé en complément à deux sur 8 bits.</td>
-  </tr>
-  <tr>
-   <td><code>GLushort</code></td>
-   <td><code>unsigned short</code></td>
-   <td>Entier non signé en complément à deux sur 16 bits.</td>
-  </tr>
-  <tr>
-   <td><code>GLuint</code></td>
-   <td><code>unsigned long</code></td>
-   <td>Entier non signé en complément à deux sur 32 bits.</td>
-  </tr>
-  <tr>
-   <td><code>GLfloat</code></td>
-   <td><code>unrestricted float</code></td>
-   <td>Nombre en virgule flottante IEEE sur 32 bits.</td>
-  </tr>
-  <tr>
-   <td><code>GLclampf</code></td>
-   <td><code>unrestricted float</code></td>
-   <td>Nombre en virgule flottante IEEE sur 32 bits borné.</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <td class="header">Type</td>
+      <td class="header">Type Web IDL</td>
+      <td class="header">Description</td>
+    </tr>
+    <tr>
+      <td><code>GLenum</code></td>
+      <td><code>unsigned long</code></td>
+      <td>
+        Utilisé pour les enums. Voir aussi la liste des <a
+          href="/fr-FR/docs/Web/API/WebGL_API/Constants"
+          >constantes</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <td><code>GLboolean</code></td>
+      <td><code>boolean</code></td>
+      <td>Un {{jsxref("Boolean")}}.</td>
+    </tr>
+    <tr>
+      <td><code>GLbitfield</code></td>
+      <td><code>unsigned long</code></td>
+      <td>
+        Un champ de bits stockant plusieurs bits logiques. Utilisé par exemple
+        dans {{domxref("WebGLRenderingContext.clear()")}}.
+      </td>
+    </tr>
+    <tr>
+      <td><code>GLbyte</code></td>
+      <td><code>byte</code></td>
+      <td>Entier signé en complément à deux sur 8 bits.</td>
+    </tr>
+    <tr>
+      <td><code>GLshort</code></td>
+      <td><code>short</code></td>
+      <td>Entier signé en complément à deux sur 16 bits.</td>
+    </tr>
+    <tr>
+      <td><code>GLint</code></td>
+      <td><code>long</code></td>
+      <td>Entier signé en complément à deux sur 32 bits.</td>
+    </tr>
+    <tr>
+      <td><code>GLsizei</code></td>
+      <td><code>long</code></td>
+      <td>
+        Utilisé pour les tailles (par ex., la largeur et la hauteur du tampon de
+        dessin).
+      </td>
+    </tr>
+    <tr>
+      <td><code>GLintptr</code></td>
+      <td><code>long long</code></td>
+      <td>Type spécial pour l'arithmétique de pointeur.</td>
+    </tr>
+    <tr>
+      <td><code>GLsizeiptr</code></td>
+      <td><code>long long</code></td>
+      <td>Type spécial pour l'arithmétique de pointeur.</td>
+    </tr>
+    <tr>
+      <td><code>GLubyte</code></td>
+      <td><code>octet</code></td>
+      <td>Entier non signé en complément à deux sur 8 bits.</td>
+    </tr>
+    <tr>
+      <td><code>GLushort</code></td>
+      <td><code>unsigned short</code></td>
+      <td>Entier non signé en complément à deux sur 16 bits.</td>
+    </tr>
+    <tr>
+      <td><code>GLuint</code></td>
+      <td><code>unsigned long</code></td>
+      <td>Entier non signé en complément à deux sur 32 bits.</td>
+    </tr>
+    <tr>
+      <td><code>GLfloat</code></td>
+      <td><code>unrestricted float</code></td>
+      <td>Nombre en virgule flottante IEEE sur 32 bits.</td>
+    </tr>
+    <tr>
+      <td><code>GLclampf</code></td>
+      <td><code>unrestricted float</code></td>
+      <td>Nombre en virgule flottante IEEE sur 32 bits borné.</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="WebGL_2">WebGL 2</h2>
+## WebGL 2
 
-<p>Ces types sont utilisés à l'intérieur d'un {{domxref("WebGL2RenderingContext")}}. Tous les types WebGL 1 sont également utilisés.</p>
+Ces types sont utilisés à l'intérieur d'un {{domxref("WebGL2RenderingContext")}}. Tous les types WebGL 1 sont également utilisés.
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <td class="header">Type</td>
-   <td class="header">Type Web IDL</td>
-   <td class="header">Description</td>
-  </tr>
-  <tr>
-   <td><code>GLint64</code></td>
-   <td><code>long long</code></td>
-   <td>Nombre entier sur 64 bits signé.</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <td class="header">Type</td>
+      <td class="header">Type Web IDL</td>
+      <td class="header">Description</td>
+    </tr>
+    <tr>
+      <td><code>GLint64</code></td>
+      <td><code>long long</code></td>
+      <td>Nombre entier sur 64 bits signé.</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Extensions_WebGL">Extensions WebGL</h2>
+## Extensions WebGL
 
-<p>Ces types sont utilisés à l'intérieur des <a href="/fr-FR/docs/Web/API/WebGL_API/Using_Extensions">extensions WebGL</a>.</p>
+Ces types sont utilisés à l'intérieur des [extensions WebGL](/fr-FR/docs/Web/API/WebGL_API/Using_Extensions).
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <td class="header">Type</td>
-   <td class="header">Type Web IDL</td>
-   <td class="header">Description</td>
-  </tr>
-  <tr>
-   <td><code>GLuint64EXT</code></td>
-   <td><code>long long</code></td>
-   <td>Nombre entier sur 64 bits non signé.</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <td class="header">Type</td>
+      <td class="header">Type Web IDL</td>
+      <td class="header">Description</td>
+    </tr>
+    <tr>
+      <td><code>GLuint64EXT</code></td>
+      <td><code>long long</code></td>
+      <td>Nombre entier sur 64 bits non signé.</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('WebGL', "#5.1", "Types")}}</td>
-   <td>{{Spec2('WebGL')}}</td>
-   <td>Définition initiale</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('WebGL2', "#3.1", "Types")}}</td>
-   <td>{{Spec2('WebGL2')}}</td>
-   <td>Définit des types supplémentaires.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('EXT_disjoint_timer_query', "", "GLuint64EXT")}}</td>
-   <td>{{Spec2('EXT_disjoint_timer_query')}}</td>
-   <td>Ajoute <code>GLuint64EXT</code></td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                    | Statut                                           | Commentaire                        |
+| -------------------------------------------------------------------------------- | ------------------------------------------------ | ---------------------------------- |
+| {{SpecName('WebGL', "#5.1", "Types")}}                             | {{Spec2('WebGL')}}                         | Définition initiale                |
+| {{SpecName('WebGL2', "#3.1", "Types")}}                             | {{Spec2('WebGL2')}}                         | Définit des types supplémentaires. |
+| {{SpecName('EXT_disjoint_timer_query', "", "GLuint64EXT")}} | {{Spec2('EXT_disjoint_timer_query')}} | Ajoute `GLuint64EXT`               |
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("WebGLRenderingContext")}}</li>
-</ul>
+- {{domxref("WebGLRenderingContext")}}
diff --git a/files/fr/web/api/webglbuffer/index.md b/files/fr/web/api/webglbuffer/index.md
index 6bb964f3d6..3ab7690e25 100644
--- a/files/fr/web/api/webglbuffer/index.md
+++ b/files/fr/web/api/webglbuffer/index.md
@@ -7,59 +7,54 @@ tags:
   - WebGL
 translation_of: Web/API/WebGLBuffer
 ---
-<div>{{APIRef("WebGL")}}</div>
+{{APIRef("WebGL")}}
 
-<p>L'interface <strong>WebGLBuffer</strong> fait partie de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> et représente un objet tampon opaque stockant des données telles que des sommets ou des couleurs.</p>
+L'interface **WebGLBuffer** fait partie de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) et représente un objet tampon opaque stockant des données telles que des sommets ou des couleurs.
 
-<h2 id="Description">Description</h2>
+## Description
 
-<p>L'objet <code>WebGLBuffer</code> ne définit aucune méthode ou propriété en propre, et son contenu n'est pas directement accessible. Lorsque vous travaillez avec des objets <code>WebGLBuffer</code>, les méthodes suivantes du {{domxref ("WebGLRenderingContext")}} sont utiles :</p>
+L'objet `WebGLBuffer` ne définit aucune méthode ou propriété en propre, et son contenu n'est pas directement accessible. Lorsque vous travaillez avec des objets `WebGLBuffer`, les méthodes suivantes du {{domxref ("WebGLRenderingContext")}} sont utiles :
 
-<ul>
- <li>{{domxref("WebGLRenderingContext.bindBuffer()")}}</li>
- <li>{{domxref("WebGLRenderingContext.createBuffer()")}}</li>
- <li>{{domxref("WebGLRenderingContext.deleteBuffer()")}}</li>
- <li>{{domxref("WebGLRenderingContext.isBuffer()")}}</li>
-</ul>
+- {{domxref("WebGLRenderingContext.bindBuffer()")}}
+- {{domxref("WebGLRenderingContext.createBuffer()")}}
+- {{domxref("WebGLRenderingContext.deleteBuffer()")}}
+- {{domxref("WebGLRenderingContext.isBuffer()")}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Création_d'un_tampon">Création d'un tampon</h3>
+### Création d'un tampon
 
-<pre class="brush: js">var canevas = document.getElementById('canevas');
+```js
+var canevas = document.getElementById('canevas');
 var gl = canevas.getContext('webgl');
 var tampon = gl.createBuffer();
-</pre>
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('WebGL', "#5.4", "WebGLBuffer")}}</td>
-   <td>{{Spec2('WebGL')}}</td>
-   <td>
-    <p>Définition initiale.</p>
-   </td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="col">Spécification</th>
+      <th scope="col">Statut</th>
+      <th scope="col">Commentaire</th>
+    </tr>
+    <tr>
+      <td>{{SpecName('WebGL', "#5.4", "WebGLBuffer")}}</td>
+      <td>{{Spec2('WebGL')}}</td>
+      <td><p>Définition initiale.</p></td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.WebGLBuffer")}}</p>
+{{Compat("api.WebGLBuffer")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("WebGLRenderingContext.bindBuffer()")}}</li>
- <li>{{domxref("WebGLRenderingContext.createBuffer()")}}</li>
- <li>{{domxref("WebGLRenderingContext.deleteBuffer()")}}</li>
- <li>{{domxref("WebGLRenderingContext.isBuffer()")}}</li>
- <li>Autres tampons : {{domxref("WebGLFramebuffer")}}, {{domxref("WebGLRenderbuffer")}}</li>
-</ul>
+- {{domxref("WebGLRenderingContext.bindBuffer()")}}
+- {{domxref("WebGLRenderingContext.createBuffer()")}}
+- {{domxref("WebGLRenderingContext.deleteBuffer()")}}
+- {{domxref("WebGLRenderingContext.isBuffer()")}}
+- Autres tampons : {{domxref("WebGLFramebuffer")}}, {{domxref("WebGLRenderbuffer")}}
diff --git a/files/fr/web/api/webglframebuffer/index.md b/files/fr/web/api/webglframebuffer/index.md
index 7298aac9d7..568d5684de 100644
--- a/files/fr/web/api/webglframebuffer/index.md
+++ b/files/fr/web/api/webglframebuffer/index.md
@@ -7,57 +7,43 @@ tags:
   - WebGL
 translation_of: Web/API/WebGLFramebuffer
 ---
-<div>{{APIRef("WebGL")}}</div>
+{{APIRef("WebGL")}}
 
-<p>L'interface <strong>WebGL Framebuffer</strong> fait partie de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> et représente une collection de tampons servant de destination de rendu.</p>
+L'interface **WebGL Framebuffer** fait partie de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) et représente une collection de tampons servant de destination de rendu.
 
-<h2 id="Description">Description</h2>
+## Description
 
-<p>L'objet <code>WebGLFramebuffer</code> ne définit aucune méthode ou propriété en propre, et son contenu n'est pas directement accessible. Lorsque vous travaillez avec des objets <code>WebGLFramebuffer</code>, les méthodes suivantes du {{domxref("WebGLRenderingContext")}} sont utiles :</p>
+L'objet `WebGLFramebuffer` ne définit aucune méthode ou propriété en propre, et son contenu n'est pas directement accessible. Lorsque vous travaillez avec des objets `WebGLFramebuffer`, les méthodes suivantes du {{domxref("WebGLRenderingContext")}} sont utiles :
 
-<ul>
- <li>{{domxref("WebGLRenderingContext.bindFramebuffer()")}}</li>
- <li>{{domxref("WebGLRenderingContext.createFramebuffer()")}}</li>
- <li>{{domxref("WebGLRenderingContext.deleteFramebuffer()")}}</li>
- <li>{{domxref("WebGLRenderingContext.isFramebuffer()")}}</li>
-</ul>
+- {{domxref("WebGLRenderingContext.bindFramebuffer()")}}
+- {{domxref("WebGLRenderingContext.createFramebuffer()")}}
+- {{domxref("WebGLRenderingContext.deleteFramebuffer()")}}
+- {{domxref("WebGLRenderingContext.isFramebuffer()")}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Création_d'un_tampon_d'image">Création d'un tampon d'image</h3>
+### Création d'un tampon d'image
 
-<pre class="brush: js">var canevas = document.getElementById('canevas');
+```js
+var canevas = document.getElementById('canevas');
 var gl = canevas.getContext('webgl');
 var tampon = gl.createFramebuffer();
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('WebGL', "#5.5", "WebGLFramebuffer")}}</td>
-   <td>{{Spec2('WebGL')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.WebGLFramebuffer")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("WebGLRenderingContext.bindFramebuffer()")}}</li>
- <li>{{domxref("WebGLRenderingContext.createFramebuffer()")}}</li>
- <li>{{domxref("WebGLRenderingContext.deleteFramebuffer()")}}</li>
- <li>{{domxref("WebGLRenderingContext.isFramebuffer()")}}</li>
- <li>Autres tampon : {{domxref("WebGLBuffer")}}, {{domxref("WebGLRenderbuffer")}}</li>
-</ul>
+```
+
+## Spécifications
+
+| Spécification                                                    | Statut                   | Commentaire          |
+| ---------------------------------------------------------------- | ------------------------ | -------------------- |
+| {{SpecName('WebGL', "#5.5", "WebGLFramebuffer")}} | {{Spec2('WebGL')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.WebGLFramebuffer")}}
+
+## Voir aussi
+
+- {{domxref("WebGLRenderingContext.bindFramebuffer()")}}
+- {{domxref("WebGLRenderingContext.createFramebuffer()")}}
+- {{domxref("WebGLRenderingContext.deleteFramebuffer()")}}
+- {{domxref("WebGLRenderingContext.isFramebuffer()")}}
+- Autres tampon : {{domxref("WebGLBuffer")}}, {{domxref("WebGLRenderbuffer")}}
diff --git a/files/fr/web/api/webglprogram/index.md b/files/fr/web/api/webglprogram/index.md
index 7818acb85a..c102390862 100644
--- a/files/fr/web/api/webglprogram/index.md
+++ b/files/fr/web/api/webglprogram/index.md
@@ -6,11 +6,12 @@ tags:
   - WebGLProgram
 translation_of: Web/API/WebGLProgram
 ---
-<div>{{APIRef("WebGL")}}</div>
+{{APIRef("WebGL")}}
 
-<p>Le <strong>WebGLProgram</strong> fait partie de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> et il est une combinaison de deux {{domxref ("WebGLShader")}} compilés constitués d'un shader de sommet et d'un shader de fragment (tous deux écrits en GLSL). Ces dernier sont ensuite liés dans un programme utilisable.</p>
+Le **WebGLProgram** fait partie de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) et il est une combinaison de deux {{domxref ("WebGLShader")}} compilés constitués d'un shader de sommet et d'un shader de fragment (tous deux écrits en GLSL). Ces dernier sont ensuite liés dans un programme utilisable.
 
-<pre class="brush: js">var programme = gl.createProgram();
+```js
+var programme = gl.createProgram();
 
 // Lier les shaders préexistants
 gl.attachShader(programme, shaderDeSommet);
@@ -22,17 +23,18 @@ if ( !gl.getProgramParameter( programme, gl.LINK_STATUS) ) {
   var info = gl.getProgramInfoLog(programme);
   throw 'Impossible de compiler le program WebGL.\n\n' + info;
 }
-</pre>
+```
 
-<p>Voir {{domxref("WebGLShader")}} pour des informations sur la création de <code>shaderDeSommet</code> et de <code>shaderDeFragment</code> dans le programme ci-dessus.</p>
+Voir {{domxref("WebGLShader")}} pour des informations sur la création de `shaderDeSommet` et de `shaderDeFragment` dans le programme ci-dessus.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Utilisation_du_programme">Utilisation du programme</h3>
+### Utilisation du programme
 
-<p>Les étapes pour travailler effectivement avec le programme impliquent d'indiquer à la GPU d'utiliser le programme, de lier les données et les options de configuration appropriées, et enfin, de dessiner quelque chose à l'écran.</p>
+Les étapes pour travailler effectivement avec le programme impliquent d'indiquer à la GPU d'utiliser le programme, de lier les données et les options de configuration appropriées, et enfin, de dessiner quelque chose à l'écran.
 
-<pre class="brush: js">// Utiliser le programme
+```js
+// Utiliser le programme
 gl.useProgram(programme);
 
 // Lier les données d'attribut existantes
@@ -42,58 +44,46 @@ gl.vertexAttribPointer(attributeLocation, 3, gl.FLOAT, false, 0, 0);
 
 // Dessiner un unique triangle
 gl.drawArrays(gl.TRIANGLES, 0, 3);
-</pre>
-
-<h3 id="Suppression_du_programme">Suppression du programme</h3>
-
-<p>S'il y a une erreur lors de l'édition de liens du programme, ou si vous voulez supprimer un programme existant, alors c'est tout simple, il suffit d'exécuter {{domxref ("WebGLRenderingContext.deleteProgram()")}}. Cela libère la mémoire du programme lié.</p>
-
-<pre class="brush: js">gl.deleteProgram(programme);
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('WebGL', "#5.6", "WebGLProgram")}}</td>
-   <td>{{Spec2('WebGL')}}</td>
-   <td>Définition initale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.WebGLProgram")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("WebGLShader")}}</li>
- <li>{{domxref("WebGLRenderingContext.attachShader()")}}</li>
- <li>{{domxref("WebGLRenderingContext.compileShader()")}}</li>
- <li>{{domxref("WebGLRenderingContext.createProgram()")}}</li>
- <li>{{domxref("WebGLRenderingContext.createShader()")}}</li>
- <li>{{domxref("WebGLRenderingContext.deleteProgram()")}}</li>
- <li>{{domxref("WebGLRenderingContext.deleteShader()")}}</li>
- <li>{{domxref("WebGLRenderingContext.detachShader()")}}</li>
- <li>{{domxref("WebGLRenderingContext.getAttachedShaders()")}}</li>
- <li>{{domxref("WebGLRenderingContext.getProgramParameter()")}}</li>
- <li>{{domxref("WebGLRenderingContext.getProgramInfoLog()")}}</li>
- <li>{{domxref("WebGLRenderingContext.getShaderParameter()")}}</li>
- <li>{{domxref("WebGLRenderingContext.getShaderPrecisionFormat()")}}</li>
- <li>{{domxref("WebGLRenderingContext.getShaderInfoLog()")}}</li>
- <li>{{domxref("WebGLRenderingContext.getShaderSource()")}}</li>
- <li>{{domxref("WebGLRenderingContext.isProgram()")}}</li>
- <li>{{domxref("WebGLRenderingContext.isShader()")}}</li>
- <li>{{domxref("WebGLRenderingContext.linkProgram()")}}</li>
- <li>{{domxref("WebGLRenderingContext.shaderSource()")}}</li>
- <li>{{domxref("WebGLRenderingContext.useProgram()")}}</li>
- <li>{{domxref("WebGLRenderingContext.validateProgram()")}}</li>
-</ul>
+```
+
+### Suppression du programme
+
+S'il y a une erreur lors de l'édition de liens du programme, ou si vous voulez supprimer un programme existant, alors c'est tout simple, il suffit d'exécuter {{domxref ("WebGLRenderingContext.deleteProgram()")}}. Cela libère la mémoire du programme lié.
+
+```js
+gl.deleteProgram(programme);
+```
+
+## Spécifications
+
+| Spécification                                                | Statut                   | Commentaire         |
+| ------------------------------------------------------------ | ------------------------ | ------------------- |
+| {{SpecName('WebGL', "#5.6", "WebGLProgram")}} | {{Spec2('WebGL')}} | Définition initale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.WebGLProgram")}}
+
+## Voir aussi
+
+- {{domxref("WebGLShader")}}
+- {{domxref("WebGLRenderingContext.attachShader()")}}
+- {{domxref("WebGLRenderingContext.compileShader()")}}
+- {{domxref("WebGLRenderingContext.createProgram()")}}
+- {{domxref("WebGLRenderingContext.createShader()")}}
+- {{domxref("WebGLRenderingContext.deleteProgram()")}}
+- {{domxref("WebGLRenderingContext.deleteShader()")}}
+- {{domxref("WebGLRenderingContext.detachShader()")}}
+- {{domxref("WebGLRenderingContext.getAttachedShaders()")}}
+- {{domxref("WebGLRenderingContext.getProgramParameter()")}}
+- {{domxref("WebGLRenderingContext.getProgramInfoLog()")}}
+- {{domxref("WebGLRenderingContext.getShaderParameter()")}}
+- {{domxref("WebGLRenderingContext.getShaderPrecisionFormat()")}}
+- {{domxref("WebGLRenderingContext.getShaderInfoLog()")}}
+- {{domxref("WebGLRenderingContext.getShaderSource()")}}
+- {{domxref("WebGLRenderingContext.isProgram()")}}
+- {{domxref("WebGLRenderingContext.isShader()")}}
+- {{domxref("WebGLRenderingContext.linkProgram()")}}
+- {{domxref("WebGLRenderingContext.shaderSource()")}}
+- {{domxref("WebGLRenderingContext.useProgram()")}}
+- {{domxref("WebGLRenderingContext.validateProgram()")}}
diff --git a/files/fr/web/api/webglrenderingcontext/activetexture/index.md b/files/fr/web/api/webglrenderingcontext/activetexture/index.md
index 2967ea1329..86065baf61 100644
--- a/files/fr/web/api/webglrenderingcontext/activetexture/index.md
+++ b/files/fr/web/api/webglrenderingcontext/activetexture/index.md
@@ -9,77 +9,60 @@ tags:
   - WebGLRenderingContext
 translation_of: Web/API/WebGLRenderingContext/activeTexture
 ---
-<div>{{APIRef("WebGL")}}</div>
+{{APIRef("WebGL")}}
 
-<p>La méthode <strong><code>WebGLRenderingContext.activeTexture()</code></strong> de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> indique quelle unité de texture doit être rendue active.</p>
+La méthode **`WebGLRenderingContext.activeTexture()`** de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) indique quelle unité de texture doit être rendue active.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var><em>void gl</em>.activeTexture</var><var>(texture);</var>
-</pre>
+    void gl.activeTexture(texture);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>texture</code></dt>
- <dd>L'unité de texture à rendre active. La valueur est une <code>gl.TEXTURE<em>I</em></code> où <em>I</em> est dans la plage de 0 à<code>gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS - 1</code>.</dd>
-</dl>
+- `texture`
+  - : L'unité de texture à rendre active. La valueur est une `gl.TEXTUREI` où *I* est dans la plage de 0 à`gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS - 1`.
 
-<h3 id="Valeur_retournée">Valeur retournée</h3>
+### Valeur retournée
 
-<p>Aucune.</p>
+Aucune.
 
-<h3 id="Exceptions">Exceptions</h3>
+### Exceptions
 
-<p>Si <em>texture</em> n'est pas l'une des <code>gl.TEXTURE<em>I</em></code>, où <em>I</em> est dans la plage de 0 à<code>gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS - 1</code>, une erreur <code>gl.INVALID_ENUM</code> est déclenchée.</p>
+Si *texture* n'est pas l'une des `gl.TEXTUREI`, où *I* est dans la plage de 0 à`gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS - 1`, une erreur `gl.INVALID_ENUM` est déclenchée.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>L'appel suivant choisit <code>gl.TEXTURE1</code> comme texture en cours. Les appels suivants qui modifient l'état de la texture affecteront cette texture.</p>
+L'appel suivant choisit `gl.TEXTURE1` comme texture en cours. Les appels suivants qui modifient l'état de la texture affecteront cette texture.
 
-<pre class="brush: js">gl.activeTexture(gl.TEXTURE1);
-</pre>
+```js
+gl.activeTexture(gl.TEXTURE1);
+```
 
-<p>Le nombre d'unités de texture dépend de l'implémentation, vous pouvez obtenir ce nombre à l'aide de la constante <code>MAX_COMBINED_TEXTURE_IMAGE_UNITS</code>. Il est, de par la spécification, d'au moins 8.</p>
+Le nombre d'unités de texture dépend de l'implémentation, vous pouvez obtenir ce nombre à l'aide de la constante `MAX_COMBINED_TEXTURE_IMAGE_UNITS`. Il est, de par la spécification, d'au moins 8.
 
-<pre class="brush: js">gl.getParameter(gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS);
-</pre>
+```js
+gl.getParameter(gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS);
+```
 
-<p>Pour obtenir la texture en cours, faire une requête sur la constante <code>ACTIVE_TEXTURE</code>.</p>
+Pour obtenir la texture en cours, faire une requête sur la constante `ACTIVE_TEXTURE`.
 
-<pre class="brush: js">gl.activeTexture(gl.TEXTURE0);
+```js
+gl.activeTexture(gl.TEXTURE0);
 gl.getParameter(gl.ACTIVE_TEXTURE);
 // retourne "33984" (0x84C0, valeur enum pour gl.TEXTURE0)
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statué</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('WebGL', "#5.14.3", "activeTexture")}}</td>
-   <td>{{Spec2('WebGL')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('OpenGL ES 2.0', "glActiveTexture.xml", "glActiveTexture")}}</td>
-   <td>{{Spec2('OpenGL ES 2.0')}}</td>
-   <td>Page man de l'API OpenGL.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.WebGLRenderingContext.activeTexture")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("WebGLRenderingContext.getParameter()")}}</li>
-</ul>
+```
+
+## Spécifications
+
+| Spécification                                                                                    | Statué                               | Commentaire               |
+| ------------------------------------------------------------------------------------------------ | ------------------------------------ | ------------------------- |
+| {{SpecName('WebGL', "#5.14.3", "activeTexture")}}                                 | {{Spec2('WebGL')}}             | Définition initiale.      |
+| {{SpecName('OpenGL ES 2.0', "glActiveTexture.xml", "glActiveTexture")}} | {{Spec2('OpenGL ES 2.0')}} | Page man de l'API OpenGL. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.WebGLRenderingContext.activeTexture")}}
+
+## Voir aussi
+
+- {{domxref("WebGLRenderingContext.getParameter()")}}
diff --git a/files/fr/web/api/webglrenderingcontext/attachshader/index.md b/files/fr/web/api/webglrenderingcontext/attachshader/index.md
index 9b2c2b9be7..0cda2deaaa 100644
--- a/files/fr/web/api/webglrenderingcontext/attachshader/index.md
+++ b/files/fr/web/api/webglrenderingcontext/attachshader/index.md
@@ -6,29 +6,27 @@ tags:
   - WebGL
 translation_of: Web/API/WebGLRenderingContext/attachShader
 ---
-<div>{{APIRef("WebGL")}}</div>
+{{APIRef("WebGL")}}
 
-<p>La méthode <strong>WebGLRenderingContext.attachShader()</strong> de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> attache un {{domxref("WebGLShader")}} de fragment ou de sommet à un {{domxref("WebGLProgram")}}.</p>
+La méthode **WebGLRenderingContext.attachShader()** de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) attache un {{domxref("WebGLShader")}} de fragment ou de sommet à un {{domxref("WebGLProgram")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">void <var><em>gl</em>.attach</var>Shader<var>(programme, shader);</var>
-</pre>
+    void gl.attachShader(programme, shader);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>programme</code></dt>
- <dd>Un {{domxref("WebGLProgram")}}.</dd>
- <dt><code>shader</code></dt>
- <dd>Un {{domxref("WebGLShader")}} de fragment ou de sommet.</dd>
-</dl>
+- `programme`
+  - : Un {{domxref("WebGLProgram")}}.
+- `shader`
+  - : Un {{domxref("WebGLShader")}} de fragment ou de sommet.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Le code suivant attache des shaders pré-existants à un {{domxref("WebGLProgram")}}.</p>
+Le code suivant attache des shaders pré-existants à un {{domxref("WebGLProgram")}}.
 
-<pre class="brush: js">var programme = gl.createProgram();
+```js
+var programme = gl.createProgram();
 
 // Attacher des shaders pré-existants
 gl.attachShader(programme, shaderDeSommet);
@@ -40,57 +38,40 @@ if ( !gl.getProgramParameter( programme, gl.LINK_STATUS) ) {
   var info = gl.getProgramInfoLog(programme);
   throw 'Impossible de compiler le program WebGL. \n\n' + info;
 }
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('WebGL', "#5.14.9", "attachShader")}}</td>
-   <td>{{Spec2('WebGL')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('OpenGL ES 2.0', "glAttachShader.xml", "glAttachShader")}}</td>
-   <td>{{Spec2('OpenGL ES 2.0')}}</td>
-   <td>Page man OpenGL.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.WebGLRenderingContext.attachShader")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("WebGLProgram")}}</li>
- <li>{{domxref("WebGLShader")}}</li>
- <li>{{domxref("WebGLRenderingContext.attachShader()")}}</li>
- <li>{{domxref("WebGLRenderingContext.compileShader()")}}</li>
- <li>{{domxref("WebGLRenderingContext.createProgram()")}}</li>
- <li>{{domxref("WebGLRenderingContext.createShader()")}}</li>
- <li>{{domxref("WebGLRenderingContext.deleteProgram()")}}</li>
- <li>{{domxref("WebGLRenderingContext.deleteShader()")}}</li>
- <li>{{domxref("WebGLRenderingContext.detachShader()")}}</li>
- <li>{{domxref("WebGLRenderingContext.getAttachedShaders()")}}</li>
- <li>{{domxref("WebGLRenderingContext.getProgramParameter()")}}</li>
- <li>{{domxref("WebGLRenderingContext.getProgramInfoLog()")}}</li>
- <li>{{domxref("WebGLRenderingContext.getShaderParameter()")}}</li>
- <li>{{domxref("WebGLRenderingContext.getShaderPrecisionFormat()")}}</li>
- <li>{{domxref("WebGLRenderingContext.getShaderInfoLog()")}}</li>
- <li>{{domxref("WebGLRenderingContext.getShaderSource()")}}</li>
- <li>{{domxref("WebGLRenderingContext.isProgram()")}}</li>
- <li>{{domxref("WebGLRenderingContext.isShader()")}}</li>
- <li>{{domxref("WebGLRenderingContext.linkProgram()")}}</li>
- <li>{{domxref("WebGLRenderingContext.shaderSource()")}}</li>
- <li>{{domxref("WebGLRenderingContext.useProgram()")}}</li>
- <li>{{domxref("WebGLRenderingContext.validateProgram()")}}</li>
-</ul>
+```
+
+## Spécifications
+
+| Spécification                                                                                | Statut                               | Commentaire          |
+| -------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName('WebGL', "#5.14.9", "attachShader")}}                             | {{Spec2('WebGL')}}             | Définition initiale. |
+| {{SpecName('OpenGL ES 2.0', "glAttachShader.xml", "glAttachShader")}} | {{Spec2('OpenGL ES 2.0')}} | Page man OpenGL.     |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.WebGLRenderingContext.attachShader")}}
+
+## Voir aussi
+
+- {{domxref("WebGLProgram")}}
+- {{domxref("WebGLShader")}}
+- {{domxref("WebGLRenderingContext.attachShader()")}}
+- {{domxref("WebGLRenderingContext.compileShader()")}}
+- {{domxref("WebGLRenderingContext.createProgram()")}}
+- {{domxref("WebGLRenderingContext.createShader()")}}
+- {{domxref("WebGLRenderingContext.deleteProgram()")}}
+- {{domxref("WebGLRenderingContext.deleteShader()")}}
+- {{domxref("WebGLRenderingContext.detachShader()")}}
+- {{domxref("WebGLRenderingContext.getAttachedShaders()")}}
+- {{domxref("WebGLRenderingContext.getProgramParameter()")}}
+- {{domxref("WebGLRenderingContext.getProgramInfoLog()")}}
+- {{domxref("WebGLRenderingContext.getShaderParameter()")}}
+- {{domxref("WebGLRenderingContext.getShaderPrecisionFormat()")}}
+- {{domxref("WebGLRenderingContext.getShaderInfoLog()")}}
+- {{domxref("WebGLRenderingContext.getShaderSource()")}}
+- {{domxref("WebGLRenderingContext.isProgram()")}}
+- {{domxref("WebGLRenderingContext.isShader()")}}
+- {{domxref("WebGLRenderingContext.linkProgram()")}}
+- {{domxref("WebGLRenderingContext.shaderSource()")}}
+- {{domxref("WebGLRenderingContext.useProgram()")}}
+- {{domxref("WebGLRenderingContext.validateProgram()")}}
diff --git a/files/fr/web/api/webglrenderingcontext/bindbuffer/index.md b/files/fr/web/api/webglrenderingcontext/bindbuffer/index.md
index 72cc698db6..33c12df96c 100644
--- a/files/fr/web/api/webglrenderingcontext/bindbuffer/index.md
+++ b/files/fr/web/api/webglrenderingcontext/bindbuffer/index.md
@@ -9,122 +9,120 @@ tags:
   - WebGLRenderingContext
 translation_of: Web/API/WebGLRenderingContext/bindBuffer
 ---
-<div>{{APIRef("WebGL")}}</div>
+{{APIRef("WebGL")}}
 
-<p>La méthode <strong><code>WebGLRenderingContext.bindBuffer()</code></strong> de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> lie un {{domxref("WebGLBuffer")}} donné à une cible.</p>
+La méthode **`WebGLRenderingContext.bindBuffer()`** de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) lie un {{domxref("WebGLBuffer")}} donné à une cible.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">void <var>gl</var>.bindBuffer(<var>cible</var>, <var>tampon</var>);
-</pre>
+    void gl.bindBuffer(cible, tampon);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt>cible</dt>
- <dd>Un {{domxref ("GLenum")}} spécifiant le point de liaison (cible). Valeurs possibles :</dd>
-</dl>
+- cible
+  - : Un {{domxref ("GLenum")}} spécifiant le point de liaison (cible). Valeurs possibles :
 
-<ul>
- <li><code>gl.ARRAY_BUFFER</code> : tampon contenant des attributs de sommet, tels que des coordonnées de vertex, des données de coordonnées de texture ou des données de couleurs de sommet ;</li>
- <li><code>gl.ELEMENT_ARRAY_BUFFER</code> : tampon utilisé pour les indices d'éléments ;</li>
- <li>Lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL context 2", "", 1)}}, les valeurs suivantes sont disponibles en plus :
-  <ul>
-   <li><code>gl.COPY_READ_BUFFER</code> : tampon pour la copie d'un objet tampon à un autre ;</li>
-   <li><code>gl.COPY_WRITE_BUFFER</code> : tampon pour la copie d'un objet tampon à un autre ;</li>
-   <li><code>gl.TRANSFORM_FEEDBACK_BUFFER</code> : tampon pour les opérations de retour de la transformation ;</li>
-   <li><code>gl.UNIFORM_BUFFER</code> : tampon utilisé pour stocker des blocs uniformes ;</li>
-   <li><code>gl.PIXEL_PACK_BUFFER</code> : tampon utilisé pour les opérations de transfert de pixels ;</li>
-   <li><code>gl.PIXEL_UNPACK_BUFFER</code> : tampon utilisé pour les opérations de transfert de pixels.</li>
-  </ul>
- </li>
-</ul>
+<!---->
 
-<dl>
- <dt>tampon</dt>
- <dd>Un {{domxref ("WebGLBuffer")}} à lier.</dd>
-</dl>
+- `gl.ARRAY_BUFFER` : tampon contenant des attributs de sommet, tels que des coordonnées de vertex, des données de coordonnées de texture ou des données de couleurs de sommet ;
+- `gl.ELEMENT_ARRAY_BUFFER` : tampon utilisé pour les indices d'éléments ;
+- Lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL context 2", "", 1)}}, les valeurs suivantes sont disponibles en plus :
 
-<h3 id="Valeur_retournée">Valeur retournée</h3>
+  - `gl.COPY_READ_BUFFER` : tampon pour la copie d'un objet tampon à un autre ;
+  - `gl.COPY_WRITE_BUFFER` : tampon pour la copie d'un objet tampon à un autre ;
+  - `gl.TRANSFORM_FEEDBACK_BUFFER` : tampon pour les opérations de retour de la transformation ;
+  - `gl.UNIFORM_BUFFER` : tampon utilisé pour stocker des blocs uniformes ;
+  - `gl.PIXEL_PACK_BUFFER` : tampon utilisé pour les opérations de transfert de pixels ;
+  - `gl.PIXEL_UNPACK_BUFFER` : tampon utilisé pour les opérations de transfert de pixels.
 
-<p>Aucune.</p>
+<!---->
 
-<h3 id="Exceptions">Exceptions</h3>
+- tampon
+  - : Un {{domxref ("WebGLBuffer")}} à lier.
 
-<p>Une seule cible peut être liée à un {{domxref ("WebGLBuffer")}} donné. Une tentative de lier le tampon à une autre cible déclenchera une erreur <code>INVALID_OPERATION</code> et la liaison du tampon en cours restera la même.</p>
+### Valeur retournée
 
-<h2 id="Exemples">Exemples</h2>
+Aucune.
 
-<h3 id="Liaison_d'un_tampon_à_une_cible">Liaison d'un tampon à une cible</h3>
+### Exceptions
 
-<pre class="brush: js">var canevas = document.getElementById('canevas');
+Une seule cible peut être liée à un {{domxref ("WebGLBuffer")}} donné. Une tentative de lier le tampon à une autre cible déclenchera une erreur `INVALID_OPERATION` et la liaison du tampon en cours restera la même.
+
+## Exemples
+
+### Liaison d'un tampon à une cible
+
+```js
+var canevas = document.getElementById('canevas');
 var gl = canevas.getContext('webgl');
 var tampon = gl.createBuffer();
 
 gl.bindBuffer(gl.ARRAY_BUFFER, tampon);
-</pre>
+```
 
-<h3 id="Récupération_des_liaisons_en_cours">Récupération des liaisons en cours</h3>
+### Récupération des liaisons en cours
 
-<p>Pour vérifier les liaisons de tampon en cours, interrogez les constantes ARRAY_BUFFER_BINDING et ELEMENT_ARRAY_BUFFER_BINDING.</p>
+Pour vérifier les liaisons de tampon en cours, interrogez les constantes ARRAY_BUFFER_BINDING et ELEMENT_ARRAY_BUFFER_BINDING.
 
-<pre class="brush: js">gl.getParameter(gl.ARRAY_BUFFER_BINDING);
+```js
+gl.getParameter(gl.ARRAY_BUFFER_BINDING);
 gl.getParameter(gl.ELEMENT_ARRAY_BUFFER_BINDING);
-</pre>
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('WebGL', "#5.14.5", "bindBuffer")}}</td>
-   <td>{{Spec2('WebGL')}}</td>
-   <td>
-    <p>Définition initiale pour WebGL.</p>
-   </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('OpenGL ES 2.0', "glBindBuffer.xml", "glBindBuffer")}}</td>
-   <td>{{Spec2('OpenGL ES 2.0')}}</td>
-   <td>Page man de l’API OpenGL ES 2 (similaire).</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('WebGL2', "#3.7.1", "bindBuffer")}}</td>
-   <td>{{Spec2('WebGL2')}}</td>
-   <td>
-    <p>Définition mise à jour pour WebGL 2.</p>
-
-    <p>Ajoute de nouveaux tampons <code>cible</code> :<br>
-     <code>gl.COPY_READ_BUFFER</code>,<br>
-     <code>gl.COPY_WRITE_BUFFER</code>,<br>
-     <code>gl.TRANSFORM_FEEDBACK_BUFFER</code>,<br>
-     <code>gl.UNIFORM_BUFFER</code>,<br>
-     <code>gl.PIXEL_PACK_BUFFER</code>,<br>
-     <code>gl.PIXEL_UNPACK_BUFFER</code></p>
-   </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('OpenGL ES 3.0', "glBindBuffer.xhtml", "glBindBuffer")}}</td>
-   <td>{{Spec2('OpenGL ES 3.0')}}</td>
-   <td>Page man de l’API OpenGL ES 3 (similaire).</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="col">Spécification</th>
+      <th scope="col">Statut</th>
+      <th scope="col">Commentaire</th>
+    </tr>
+    <tr>
+      <td>{{SpecName('WebGL', "#5.14.5", "bindBuffer")}}</td>
+      <td>{{Spec2('WebGL')}}</td>
+      <td><p>Définition initiale pour WebGL.</p></td>
+    </tr>
+    <tr>
+      <td>
+        {{SpecName('OpenGL ES 2.0', "glBindBuffer.xml", "glBindBuffer")}}
+      </td>
+      <td>{{Spec2('OpenGL ES 2.0')}}</td>
+      <td>Page man de l’API OpenGL ES 2 (similaire).</td>
+    </tr>
+    <tr>
+      <td>{{SpecName('WebGL2', "#3.7.1", "bindBuffer")}}</td>
+      <td>{{Spec2('WebGL2')}}</td>
+      <td>
+        <p>Définition mise à jour pour WebGL 2.</p>
+        <p>
+          Ajoute de nouveaux tampons <code>cible</code> :<br /><code
+            >gl.COPY_READ_BUFFER</code
+          >,<br /><code>gl.COPY_WRITE_BUFFER</code>,<br /><code
+            >gl.TRANSFORM_FEEDBACK_BUFFER</code
+          >,<br /><code>gl.UNIFORM_BUFFER</code>,<br /><code
+            >gl.PIXEL_PACK_BUFFER</code
+          >,<br /><code>gl.PIXEL_UNPACK_BUFFER</code>
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        {{SpecName('OpenGL ES 3.0', "glBindBuffer.xhtml", "glBindBuffer")}}
+      </td>
+      <td>{{Spec2('OpenGL ES 3.0')}}</td>
+      <td>Page man de l’API OpenGL ES 3 (similaire).</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.WebGLRenderingContext.bindBuffer")}}</p>
+{{Compat("api.WebGLRenderingContext.bindBuffer")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("WebGLRenderingContext.createBuffer()")}}</li>
- <li>{{domxref("WebGLRenderingContext.deleteBuffer()")}}</li>
- <li>{{domxref("WebGLRenderingContext.isBuffer()")}}</li>
- <li>Autres tampons : {{domxref("WebGLFramebuffer")}}, {{domxref("WebGLRenderbuffer")}}</li>
-</ul>
+- {{domxref("WebGLRenderingContext.createBuffer()")}}
+- {{domxref("WebGLRenderingContext.deleteBuffer()")}}
+- {{domxref("WebGLRenderingContext.isBuffer()")}}
+- Autres tampons : {{domxref("WebGLFramebuffer")}}, {{domxref("WebGLRenderbuffer")}}
diff --git a/files/fr/web/api/webglrenderingcontext/bindtexture/index.md b/files/fr/web/api/webglrenderingcontext/bindtexture/index.md
index 662c18a8be..fd75432b79 100644
--- a/files/fr/web/api/webglrenderingcontext/bindtexture/index.md
+++ b/files/fr/web/api/webglrenderingcontext/bindtexture/index.md
@@ -10,110 +10,106 @@ tags:
   - WebGLRenderingContext
 translation_of: Web/API/WebGLRenderingContext/bindTexture
 ---
-<div>{{APIRef("WebGL")}}</div>
+{{APIRef("WebGL")}}
 
-<p>La méthode <strong><code>WebGLRenderingContext.bindTexture()</code></strong> de l'API WebGL lie la {{domxref("WebGLTexture")}} donnée à une cible (point de liaison).</p>
+La méthode **`WebGLRenderingContext.bindTexture()`** de l'API WebGL lie la {{domxref("WebGLTexture")}} donnée à une cible (point de liaison).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">void <var>gl</var>.bindTexture(<var>cible</var>, <var>texture</var>);
-</pre>
+    void gl.bindTexture(cible, texture);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt>cible</dt>
- <dd>Un {{domxref ("GLenum")}} indiquant le point de liaison (cible). Valeurs possibles :
- <ul>
-  <li><code>gl.TEXTURE_2D</code> : une texture bidimensionnelle ;</li>
-  <li><code>gl.TEXTURE_CUBE_MAP</code> : une texture mappée sur un cube ;</li>
-  <li>lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, les valeurs suivantes sont en outre disponibles :
-   <ul>
-    <li><code>gl.TEXTURE_3D</code> : une texture tridimensionnelle ;</li>
-    <li><code>gl.TEXTURE_2D_ARRAY</code> : une texture en tableau bidimensionnelle.</li>
-   </ul>
-  </li>
- </ul>
- </dd>
- <dt>texture</dt>
- <dd>Un objet {{domxref ("WebGLTexture")}} à lier.</dd>
-</dl>
+- cible
 
-<h3 id="Valeur_retournée">Valeur retournée</h3>
+  - : Un {{domxref ("GLenum")}} indiquant le point de liaison (cible). Valeurs possibles :
 
-<p>Aucune.</p>
+    - `gl.TEXTURE_2D` : une texture bidimensionnelle ;
+    - `gl.TEXTURE_CUBE_MAP` : une texture mappée sur un cube ;
+    - lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, les valeurs suivantes sont en outre disponibles :
 
-<h3 id="Exceptions">Exceptions</h3>
+      - `gl.TEXTURE_3D` : une texture tridimensionnelle ;
+      - `gl.TEXTURE_2D_ARRAY` : une texture en tableau bidimensionnelle.
 
-<p>Une erreur <code>gl.INVALID_ENUM</code> est déclenchée si <code>cible</code> n'est pas <code>gl.TEXTURE_2D</code>, <code>gl.TEXTURE_CUBE_MAP</code>, <code>gl.TEXTURE_3D</code>, ou <code>gl.TEXTURE_2D_ARRAY</code>.</p>
+- texture
+  - : Un objet {{domxref ("WebGLTexture")}} à lier.
 
-<h2 id="Exemples">Exemples</h2>
+### Valeur retournée
 
-<h3 id="Liaison_d'une_texture">Liaison d'une texture</h3>
+Aucune.
 
-<pre class="brush: js">var canevas = document.getElementById('canevas');
+### Exceptions
+
+Une erreur `gl.INVALID_ENUM` est déclenchée si `cible` n'est pas `gl.TEXTURE_2D`, `gl.TEXTURE_CUBE_MAP`, `gl.TEXTURE_3D`, ou `gl.TEXTURE_2D_ARRAY`.
+
+## Exemples
+
+### Liaison d'une texture
+
+```js
+var canevas = document.getElementById('canevas');
 var gl = canevas.getContext('webgl');
 var texture = gl.createTexture();
 
 gl.bindTexture(gl.TEXTURE_2D, texture);
-</pre>
+```
 
-<h3 id="Obtention_des_liaisons_en_cours">Obtention des liaisons en cours</h3>
+### Obtention des liaisons en cours
 
-<p>Pour vérifier la liaison de texture en cours, interrogez les constantes <code>gl.TEXTURE_BINDING_2D</code> ou <code>gl.TEXTURE_BINDING_CUBE_MAP</code>.</p>
+Pour vérifier la liaison de texture en cours, interrogez les constantes `gl.TEXTURE_BINDING_2D` ou `gl.TEXTURE_BINDING_CUBE_MAP`.
 
-<pre class="brush: js">gl.getParameter(gl.TEXTURE_BINDING_2D);
-</pre>
+```js
+gl.getParameter(gl.TEXTURE_BINDING_2D);
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('WebGL', "#5.14.8", "bindTexture")}}</td>
-   <td>{{Spec2('WebGL')}}</td>
-   <td>
-    <p>Définition initiale pour WebGL.</p>
-   </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('OpenGL ES 2.0', "glBindTexture.xml", "glBindTexture")}}</td>
-   <td>{{Spec2('OpenGL ES 2.0')}}</td>
-   <td>
-    <p>Page man de l’API OpenGL ES 2.0 (similaire).</p>
-   </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('WebGL2', "#3.7.1", "bindTexture")}}</td>
-   <td>{{Spec2('WebGL2')}}</td>
-   <td>Définition mise à jour pour WebGL 2.<br>
-    Ajoute : <code>gl.TEXTURE_3D</code> et  <code>gl.TEXTURE_2D_ARRAY</code></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('OpenGL ES 3.0', "glBindTexture.xhtml", "glBindTexture")}}</td>
-   <td>{{Spec2('OpenGL ES 3.0')}}</td>
-   <td>Page man de l’API OpenGL ES 3.0 (similaire).</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="col">Spécification</th>
+      <th scope="col">Statut</th>
+      <th scope="col">Commentaire</th>
+    </tr>
+    <tr>
+      <td>{{SpecName('WebGL', "#5.14.8", "bindTexture")}}</td>
+      <td>{{Spec2('WebGL')}}</td>
+      <td><p>Définition initiale pour WebGL.</p></td>
+    </tr>
+    <tr>
+      <td>
+        {{SpecName('OpenGL ES 2.0', "glBindTexture.xml", "glBindTexture")}}
+      </td>
+      <td>{{Spec2('OpenGL ES 2.0')}}</td>
+      <td><p>Page man de l’API OpenGL ES 2.0 (similaire).</p></td>
+    </tr>
+    <tr>
+      <td>{{SpecName('WebGL2', "#3.7.1", "bindTexture")}}</td>
+      <td>{{Spec2('WebGL2')}}</td>
+      <td>
+        Définition mise à jour pour WebGL 2.<br />Ajoute :
+        <code>gl.TEXTURE_3D</code> et  <code>gl.TEXTURE_2D_ARRAY</code>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        {{SpecName('OpenGL ES 3.0', "glBindTexture.xhtml", "glBindTexture")}}
+      </td>
+      <td>{{Spec2('OpenGL ES 3.0')}}</td>
+      <td>Page man de l’API OpenGL ES 3.0 (similaire).</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.WebGLRenderingContext.bindTexture")}}</p>
+{{Compat("api.WebGLRenderingContext.bindTexture")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-</ul>
+<!---->
 
-<ul>
- <li>{{domxref("WebGLRenderingContext.createTexture()")}}</li>
- <li>{{domxref("WebGLRenderingContext.deleteTexture()")}}</li>
- <li>{{domxref("WebGLRenderingContext.isTexture()")}}</li>
- <li>{{domxref("WebGLRenderingContext.texImage2D()")}}</li>
-</ul>
+- {{domxref("WebGLRenderingContext.createTexture()")}}
+- {{domxref("WebGLRenderingContext.deleteTexture()")}}
+- {{domxref("WebGLRenderingContext.isTexture()")}}
+- {{domxref("WebGLRenderingContext.texImage2D()")}}
diff --git a/files/fr/web/api/webglrenderingcontext/bufferdata/index.md b/files/fr/web/api/webglrenderingcontext/bufferdata/index.md
index e9512ad7bd..acab216dbb 100644
--- a/files/fr/web/api/webglrenderingcontext/bufferdata/index.md
+++ b/files/fr/web/api/webglrenderingcontext/bufferdata/index.md
@@ -9,153 +9,144 @@ tags:
   - WebGLRenderingContext
 translation_of: Web/API/WebGLRenderingContext/bufferData
 ---
-<div>{{APIRef("WebGL")}}</div>
-
-<p>La méthode <strong><code>WebGLRenderingContext.bufferData()</code></strong> de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> initialise et crée le magasin de données de l'objet tampon.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">// WebGL1:
-void gl.bufferData(cible, taille, utilisation);
-void gl.bufferData(cible, ArrayBuffer? donneesSrc, utilisation);
-void gl.bufferData(cible, ArrayBufferView donneesSrc, utilisation);
-
-// WebGL2:
-void gl.bufferData(cible, ArrayBufferView donneesSrc, utilisation, decalageSrc, longueur);
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt>cible</dt>
- <dd>Un {{domxref ("GLenum")}} spécifiant le point de liaison (cible). Valeurs possibles :
- <ul>
-  <li><code>gl.ARRAY_BUFFER</code> : tampon contenant des attributs de sommet, tels que des coordonnées de sommet, des données de coordonnées de texture ou des données de couleurs de sommet ;</li>
-  <li><code>gl.ELEMENT_ARRAY_BUFFER</code> : tampon utilisé pour les indices d'éléments ;</li>
-  <li>lors de l'utilisation d'un {{domxref ("WebGL2RenderingContext", "WebGL context 2", "", 1)}}, les valeurs suivantes sont en outre disponibles :
-   <ul>
-    <li><code>gl.COPY_READ_BUFFER</code> : tampon pour la copie d'un objet tampon à un autre ;</li>
-    <li><code>gl.COPY_WRITE_BUFFER</code> : tampon pour la copie d'un objet tampon à un autre ;</li>
-    <li><code>gl.TRANSFORM_FEEDBACK_BUFFER</code> : tampon pour les opérations de retour de transformation ;</li>
-    <li><code>gl.UNIFORM_BUFFER</code> : tampon utilisé pour stocker des blocs uniform ;</li>
-    <li><code>gl.PIXEL_PACK_BUFFER</code> : tampon utilisé pour les opérations de transfert de pixels ;</li>
-    <li><code>gl.PIXEL_UNPACK_BUFFER</code> : tampon utilisé pour les opérations de transfert de pixels.</li>
-   </ul>
-  </li>
- </ul>
- </dd>
- <dt>taille</dt>
- <dd>Un {{domxref("GLsizeiptr")}} définissant la taille du magasin de données de l'objet tampon.</dd>
- <dt>donneesSrc {{optional_inline}}</dt>
- <dd>Un {{jsxref("ArrayBuffer")}}, {{jsxref("SharedArrayBuffer")}} ou l'un des types de tableau typés {{domxref("ArrayBufferView")}} à copier dans le magasin de données. Si <code>null</code>, un magasin de données est quand même créé, mais son contenu n'est ni initialisé, ni défini.</dd>
- <dt>utilisation</dt>
- <dd>Un {{domxref("GLenum")}} indiquant le modèle d'utilisation du magasin de données. Valeurs possibles :
- <ul>
-  <li><code>gl.STATIC_DRAW</code> : le contenu du tampon est susceptible d'être utilisé souvent mais de ne pas changer souvent ; du contenu est écrit dans le tampon, mais non lu ;</li>
-  <li><code>gl.DYNAMIC_DRAW</code> : le contenu du tampon est susceptible d'être souvent utilisé et de changer souvent ; du contenu est écrit dans le tampon, mais non lu ;</li>
-  <li><code>gl.STREAM_DRAW</code> : le contenu du tampon est susceptible de ne pas être utilisé souvent ; du contenu est écrit dans le tampon, mais non lu ;</li>
-  <li>lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, les valeurs suivantes the following values sont en outre disponibles :
-   <ul>
-    <li><code>gl.STATIC_READ</code> : le contenu du tampon est susceptible d'être utilisé souvent et de ne pas changer souvent ; du contenu est lu depuis le tampon, mais non écrit ;</li>
-    <li><code>gl.DYNAMIC_READ</code> : le contenu du tampon est susceptible d'être utilisé souvent et de changer souvent ; du contenu est lu depuis le tampon, mais non écrit ;</li>
-    <li><code>gl.STREAM_READ</code> : le contenu du tampon est susceptible de ne pas être utilisé souvent ; du contenu est lu depuis le tampon, mais non écrit ;</li>
-    <li><code>gl.STATIC_COPY</code> : le contenu du tampon est susceptible d'être utilisé souvent et de ne pas changer souvent ; aucun contenu n'est écrit ou lu par l'utilisateur ;</li>
-    <li><code>gl.DYNAMIC_COPY</code> : le contenu du tampon est susceptible d'être utilisé souvent et de changer souvent ; aucun contenu n'est écrit ou lu par l'utilisateur ;</li>
-    <li><code>gl.STREAM_COPY</code> : le contenu du tampon est susceptible d'être utilisé souvent et de ne pas changer souvent ; aucun contenu n'est écrit ou lu par l'utilisateur.</li>
-   </ul>
-  </li>
- </ul>
- </dd>
- <dt>decalageSrc</dt>
- <dd>Un {{domxref("GLuint")}} indiquant le décalage d'indice d'élément où commencer à lire dans le tampon.</dd>
- <dt><code>longueur</code> {{optional_inline}}</dt>
- <dd>Un {{domxref("GLuint")}} valant 0 par défaut.</dd>
-</dl>
-
-<h3 id="Valeur_retournée">Valeur retournée</h3>
-
-<p>Aucune.</p>
-
-<h3 id="Exceptions">Exceptions</h3>
-
-<ul>
- <li>Une erreur <code>gl.OUT_OF_MEMORY</code> est déclenchée si le contexte ne peut pas créer un magasin de données de la <code>taille</code> indiquée.</li>
- <li>Une erreur<code>gl.INVALID_VALUE</code> est déclenchée si <code>taille</code> est négative.</li>
- <li>Une erreur <code>gl.INVALID_ENUM</code> est déclenchée si <code>cible</code> ou<code>utilisation</code> ne sont pas l'un des enums autorisés.</li>
-</ul>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Utilisation_de_bufferData">Utilisation de <code>bufferData</code></h3>
-
-<pre class="brush: js">var canevas = document.getElementById('canevas');
+{{APIRef("WebGL")}}
+
+La méthode **`WebGLRenderingContext.bufferData()`** de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) initialise et crée le magasin de données de l'objet tampon.
+
+## Syntaxe
+
+    // WebGL1:
+    void gl.bufferData(cible, taille, utilisation);
+    void gl.bufferData(cible, ArrayBuffer? donneesSrc, utilisation);
+    void gl.bufferData(cible, ArrayBufferView donneesSrc, utilisation);
+
+    // WebGL2:
+    void gl.bufferData(cible, ArrayBufferView donneesSrc, utilisation, decalageSrc, longueur);
+
+### Paramètres
+
+- cible
+
+  - : Un {{domxref ("GLenum")}} spécifiant le point de liaison (cible). Valeurs possibles :
+
+    - `gl.ARRAY_BUFFER` : tampon contenant des attributs de sommet, tels que des coordonnées de sommet, des données de coordonnées de texture ou des données de couleurs de sommet ;
+    - `gl.ELEMENT_ARRAY_BUFFER` : tampon utilisé pour les indices d'éléments ;
+    - lors de l'utilisation d'un {{domxref ("WebGL2RenderingContext", "WebGL context 2", "", 1)}}, les valeurs suivantes sont en outre disponibles :
+
+      - `gl.COPY_READ_BUFFER` : tampon pour la copie d'un objet tampon à un autre ;
+      - `gl.COPY_WRITE_BUFFER` : tampon pour la copie d'un objet tampon à un autre ;
+      - `gl.TRANSFORM_FEEDBACK_BUFFER` : tampon pour les opérations de retour de transformation ;
+      - `gl.UNIFORM_BUFFER` : tampon utilisé pour stocker des blocs uniform ;
+      - `gl.PIXEL_PACK_BUFFER` : tampon utilisé pour les opérations de transfert de pixels ;
+      - `gl.PIXEL_UNPACK_BUFFER` : tampon utilisé pour les opérations de transfert de pixels.
+
+- taille
+  - : Un {{domxref("GLsizeiptr")}} définissant la taille du magasin de données de l'objet tampon.
+- donneesSrc {{optional_inline}}
+  - : Un {{jsxref("ArrayBuffer")}}, {{jsxref("SharedArrayBuffer")}} ou l'un des types de tableau typés {{domxref("ArrayBufferView")}} à copier dans le magasin de données. Si `null`, un magasin de données est quand même créé, mais son contenu n'est ni initialisé, ni défini.
+- utilisation
+
+  - : Un {{domxref("GLenum")}} indiquant le modèle d'utilisation du magasin de données. Valeurs possibles :
+
+    - `gl.STATIC_DRAW` : le contenu du tampon est susceptible d'être utilisé souvent mais de ne pas changer souvent ; du contenu est écrit dans le tampon, mais non lu ;
+    - `gl.DYNAMIC_DRAW` : le contenu du tampon est susceptible d'être souvent utilisé et de changer souvent ; du contenu est écrit dans le tampon, mais non lu ;
+    - `gl.STREAM_DRAW` : le contenu du tampon est susceptible de ne pas être utilisé souvent ; du contenu est écrit dans le tampon, mais non lu ;
+    - lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, les valeurs suivantes the following values sont en outre disponibles :
+
+      - `gl.STATIC_READ` : le contenu du tampon est susceptible d'être utilisé souvent et de ne pas changer souvent ; du contenu est lu depuis le tampon, mais non écrit ;
+      - `gl.DYNAMIC_READ` : le contenu du tampon est susceptible d'être utilisé souvent et de changer souvent ; du contenu est lu depuis le tampon, mais non écrit ;
+      - `gl.STREAM_READ` : le contenu du tampon est susceptible de ne pas être utilisé souvent ; du contenu est lu depuis le tampon, mais non écrit ;
+      - `gl.STATIC_COPY` : le contenu du tampon est susceptible d'être utilisé souvent et de ne pas changer souvent ; aucun contenu n'est écrit ou lu par l'utilisateur ;
+      - `gl.DYNAMIC_COPY` : le contenu du tampon est susceptible d'être utilisé souvent et de changer souvent ; aucun contenu n'est écrit ou lu par l'utilisateur ;
+      - `gl.STREAM_COPY` : le contenu du tampon est susceptible d'être utilisé souvent et de ne pas changer souvent ; aucun contenu n'est écrit ou lu par l'utilisateur.
+
+- decalageSrc
+  - : Un {{domxref("GLuint")}} indiquant le décalage d'indice d'élément où commencer à lire dans le tampon.
+- `longueur` {{optional_inline}}
+  - : Un {{domxref("GLuint")}} valant 0 par défaut.
+
+### Valeur retournée
+
+Aucune.
+
+### Exceptions
+
+- Une erreur `gl.OUT_OF_MEMORY` est déclenchée si le contexte ne peut pas créer un magasin de données de la `taille` indiquée.
+- Une erreur`gl.INVALID_VALUE` est déclenchée si `taille` est négative.
+- Une erreur `gl.INVALID_ENUM` est déclenchée si `cible` ou`utilisation` ne sont pas l'un des enums autorisés.
+
+## Exemples
+
+### Utilisation de `bufferData`
+
+```js
+var canevas = document.getElementById('canevas');
 var gl = canevas.getContext('webgl');
 var tampon = gl.createBuffer();
 gl.bindBuffer(gl.ARRAY_BUFFER, tampon);
 gl.bufferData(gl.ARRAY_BUFFER, 1024, gl.STATIC_DRAW);
-</pre>
+```
 
-<h3 id="Récupération_de_l'information_de_tampon">Récupération de l'information de tampon</h3>
+### Récupération de l'information de tampon
 
-<p>Pour vérifier l'utilisation du tampon en cours et la taille du tampon, utiliser la méthode {{domxref("WebGLRenderingContext.getBufferParameter()")}}.</p>
+Pour vérifier l'utilisation du tampon en cours et la taille du tampon, utiliser la méthode {{domxref("WebGLRenderingContext.getBufferParameter()")}}.
 
-<pre class="brush: js">gl.getBufferParameter(gl.ARRAY_BUFFER, gl.BUFFER_SIZE);
+```js
+gl.getBufferParameter(gl.ARRAY_BUFFER, gl.BUFFER_SIZE);
 gl.getBufferParameter(gl.ARRAY_BUFFER, gl.BUFFER_USAGE);
-</pre>
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('WebGL', "#5.14.5", "bufferData")}}</td>
-   <td>{{Spec2('WebGL')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('OpenGL ES 2.0', "glBufferData.xml", "glBufferData")}}</td>
-   <td>{{Spec2('OpenGL ES 2.0')}}</td>
-   <td>
-    <p>Page man de l’API OpenGL.</p>
-   </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('OpenGL ES 3.0', "glBufferData.xhtml", "glBufferData")}}</td>
-   <td>{{Spec2('OpenGL ES 3.0')}}</td>
-   <td>
-    <p>Page man de l’API OpenGL ES 3 (similaire).</p>
-    Ajoute les noouveaux tampons <code>cible</code> :<br>
-    <code>gl.COPY_READ_BUFFER</code>,<br>
-    <code>gl.COPY_WRITE_BUFFER</code>,<br>
-    <code>gl.TRANSFORM_FEEDBACK_BUFFER</code>,<br>
-    <code>gl.UNIFORM_BUFFER</code>,<br>
-    <code>gl.PIXEL_PACK_BUFFER</code>,<br>
-    <code>gl.PIXEL_UNPACK_BUFFER</code><br>
-    <br>
-    Ajoute les nouvelles indications d'<code>utilisation</code> :<br>
-    <code>gl.STATIC_READ</code>,<br>
-    <code>gl.DYNAMIC_READ</code>,<br>
-    <code>gl.STREAM_READ</code>,<br>
-    <code>gl.STATIC_COPY</code>,<br>
-    <code>gl.DYNAMIC_COPY</code>,<br>
-    <code>gl.STREAM_COPY</code>.</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="col">Spécification</th>
+      <th scope="col">Statut</th>
+      <th scope="col">Commentaire</th>
+    </tr>
+    <tr>
+      <td>{{SpecName('WebGL', "#5.14.5", "bufferData")}}</td>
+      <td>{{Spec2('WebGL')}}</td>
+      <td>Définition initiale.</td>
+    </tr>
+    <tr>
+      <td>
+        {{SpecName('OpenGL ES 2.0', "glBufferData.xml", "glBufferData")}}
+      </td>
+      <td>{{Spec2('OpenGL ES 2.0')}}</td>
+      <td><p>Page man de l’API OpenGL.</p></td>
+    </tr>
+    <tr>
+      <td>
+        {{SpecName('OpenGL ES 3.0', "glBufferData.xhtml", "glBufferData")}}
+      </td>
+      <td>{{Spec2('OpenGL ES 3.0')}}</td>
+      <td>
+        <p>Page man de l’API OpenGL ES 3 (similaire).</p>
+        Ajoute les noouveaux tampons <code>cible</code> :<br /><code
+          >gl.COPY_READ_BUFFER</code
+        >,<br /><code>gl.COPY_WRITE_BUFFER</code>,<br /><code
+          >gl.TRANSFORM_FEEDBACK_BUFFER</code
+        >,<br /><code>gl.UNIFORM_BUFFER</code>,<br /><code
+          >gl.PIXEL_PACK_BUFFER</code
+        >,<br /><code>gl.PIXEL_UNPACK_BUFFER</code><br /><br />Ajoute les
+        nouvelles indications d'<code>utilisation</code> :<br /><code
+          >gl.STATIC_READ</code
+        >,<br /><code>gl.DYNAMIC_READ</code>,<br /><code>gl.STREAM_READ</code
+        >,<br /><code>gl.STATIC_COPY</code>,<br /><code>gl.DYNAMIC_COPY</code
+        >,<br /><code>gl.STREAM_COPY</code>.
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.WebGLRenderingContext.bufferData")}}</p>
+{{Compat("api.WebGLRenderingContext.bufferData")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("WebGLRenderingContext.createBuffer()")}}</li>
- <li>{{domxref("WebGLRenderingContext.bufferSubData()")}}</li>
- <li>Autres tampons : {{domxref("WebGLFramebuffer")}}, {{domxref("WebGLRenderbuffer")}}</li>
-</ul>
+- {{domxref("WebGLRenderingContext.createBuffer()")}}
+- {{domxref("WebGLRenderingContext.bufferSubData()")}}
+- Autres tampons : {{domxref("WebGLFramebuffer")}}, {{domxref("WebGLRenderbuffer")}}
diff --git a/files/fr/web/api/webglrenderingcontext/canvas/index.md b/files/fr/web/api/webglrenderingcontext/canvas/index.md
index ccdfa7ed8a..e6d36646bd 100644
--- a/files/fr/web/api/webglrenderingcontext/canvas/index.md
+++ b/files/fr/web/api/webglrenderingcontext/canvas/index.md
@@ -9,66 +9,57 @@ tags:
 translation_of: Web/API/WebGLRenderingContext/canvas
 original_slug: Web/API/WebGLRenderingContext/canevas
 ---
-<div>{{APIRef("WebGL")}}</div>
+{{APIRef("WebGL")}}
 
-<p>La propriété <code>WebGLRenderingContext.canvas</code> est une référence en lecture seule à l'objet {{domxref("HTMLCanvasElement")}} ou {{domxref("OffscreenCanvas")}} associé au contexte. Il peut s'agir de {{jsxref("null")}} s'il n'est pas associé à un élément {{HTMLElement("canvas")}} ou à un objet {{domxref("OffscreenCanvas")}}.</p>
+La propriété `WebGLRenderingContext.canvas` est une référence en lecture seule à l'objet {{domxref("HTMLCanvasElement")}} ou {{domxref("OffscreenCanvas")}} associé au contexte. Il peut s'agir de {{jsxref("null")}} s'il n'est pas associé à un élément {{HTMLElement("canvas")}} ou à un objet {{domxref("OffscreenCanvas")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var><em>gl</em></var>.canvas;</pre>
+    gl.canvas;
 
-<h3 id="Valeur_retournée">Valeur retournée</h3>
+### Valeur retournée
 
-<p>Soit un objet {{domxref("HTMLCanvasElement")}} ou {{domxref("OffscreenCanvas")}}, soit {{jsxref("null")}}.</p>
+Soit un objet {{domxref("HTMLCanvasElement")}} ou {{domxref("OffscreenCanvas")}}, soit {{jsxref("null")}}.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Élément_canevas">Élément canevas</h3>
+### Élément canevas
 
-<p>Étant donné cet élément {{HTMLElement("canvas")}} :</p>
+Étant donné cet élément {{HTMLElement("canvas")}} :
 
-<pre class="brush: html">&lt;canvas id="canevas"&gt;&lt;/canvas&gt;
-</pre>
+```html
+<canvas id="canevas"></canvas>
+```
 
-<p>Vous pouvez en récupérer une référence à partir du <code>WebGLRenderingContext</code> en utilisant la propriété <code>canvas</code> :</p>
+Vous pouvez en récupérer une référence à partir du `WebGLRenderingContext` en utilisant la propriété `canvas` :
 
-<pre class="brush: js">var canevas = document.getElementById('canevas');
+```js
+var canevas = document.getElementById('canevas');
 var gl = canevas.getContext('webgl');
 gl.canvas; // HTMLCanvasElement
-</pre>
+```
 
-<h3 id="Canevas_hors_écran">Canevas hors écran</h3>
+### Canevas hors écran
 
-<p>Exemple d'utilisation de l'objet expérimental {{domxref("OffscreenCanvas")}}.</p>
+Exemple d'utilisation de l'objet expérimental {{domxref("OffscreenCanvas")}}.
 
-<pre class="brush: js">var horsEcran = new OffscreenCanvas(256, 256);
+```js
+var horsEcran = new OffscreenCanvas(256, 256);
 var gl = horsEcran.getContext('webgl');
-gl.canvas; // OffscreenCanvas</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('WebGL', "#DOM-WebGLRenderingContext-canvas", "WebGLRenderingContext.canvas")}}</td>
-   <td>{{Spec2('WebGL')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.WebGLRenderingContext.canvas")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("CanvasRenderingContext2D.canvas")}}</li>
- <li>{{domxref("OffscreenCanvas")}}</li>
-</ul>
+gl.canvas; // OffscreenCanvas
+```
+
+## Spécifications
+
+| Spécification                                                                                                            | Statut                   | Commentaire          |
+| ------------------------------------------------------------------------------------------------------------------------ | ------------------------ | -------------------- |
+| {{SpecName('WebGL', "#DOM-WebGLRenderingContext-canvas", "WebGLRenderingContext.canvas")}} | {{Spec2('WebGL')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.WebGLRenderingContext.canvas")}}
+
+## Voir aussi
+
+- {{domxref("CanvasRenderingContext2D.canvas")}}
+- {{domxref("OffscreenCanvas")}}
diff --git a/files/fr/web/api/webglrenderingcontext/clear/index.md b/files/fr/web/api/webglrenderingcontext/clear/index.md
index 69acd2f1d1..803a50fd26 100644
--- a/files/fr/web/api/webglrenderingcontext/clear/index.md
+++ b/files/fr/web/api/webglrenderingcontext/clear/index.md
@@ -9,85 +9,66 @@ tags:
   - WebGLRenderingContext
 translation_of: Web/API/WebGLRenderingContext/clear
 ---
-<div>{{APIRef("WebGL")}}</div>
+{{APIRef("WebGL")}}
 
-<p>La méthode <strong><code>WebGLRenderingContext.clear()</code></strong> de <a href="/fr/docs/Web/API/WebGL_API">l'API WebGL</a> efface les tampons avec des valeurs prédéfinies.</p>
+La méthode **`WebGLRenderingContext.clear()`** de [l'API WebGL](/fr/docs/Web/API/WebGL_API) efface les tampons avec des valeurs prédéfinies.
 
-<p>Ces valeurs prédéfinies peuvent être affectées par {{domxref("WebGLRenderingContext.clearColor", "clearColor()")}}, {{domxref("WebGLRenderingContext.clearDepth", "clearDepth()")}} ou {{domxref("WebGLRenderingContext.clearStencil", "clearStencil()")}}.</p>
+Ces valeurs prédéfinies peuvent être affectées par {{domxref("WebGLRenderingContext.clearColor", "clearColor()")}}, {{domxref("WebGLRenderingContext.clearDepth", "clearDepth()")}} ou {{domxref("WebGLRenderingContext.clearStencil", "clearStencil()")}}.
 
-<p>Les masques d'écriture, de détourage, de tramage et de tampon peuvent affecter la méthode <code>clear()</code>.</p>
+Les masques d'écriture, de détourage, de tramage et de tampon peuvent affecter la méthode `clear()`.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">void <var>gl</var>.clear(<var>masque</var>);
-</pre>
+    void gl.clear(masque);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>masque</code></dt>
- <dd>Un masque OU par bits {{domxref("GLbitfield")}} qui indique les tampons à effacer. Les valeurs possibles sont :
- <ul>
-  <li><code>gl.COLOR_BUFFER_BIT</code></li>
-  <li><code>gl.DEPTH_BUFFER_BIT</code></li>
-  <li><code>gl.STENCIL_BUFFER_BIT</code></li>
- </ul>
- </dd>
-</dl>
+- `masque`
 
-<h3 id="Valeur_retournée">Valeur retournée</h3>
+  - : Un masque OU par bits {{domxref("GLbitfield")}} qui indique les tampons à effacer. Les valeurs possibles sont :
 
-<p>Aucune.</p>
+    - `gl.COLOR_BUFFER_BIT`
+    - `gl.DEPTH_BUFFER_BIT`
+    - `gl.STENCIL_BUFFER_BIT`
 
-<h3 id="Exceptions">Exceptions</h3>
+### Valeur retournée
 
-<p>Si <em>masque</em> n'est pas l'une des valeurs possibles listées, une erreur <code>gl.INVALID_ENUM</code> est déclenchée.</p>
+Aucune.
 
-<h2 id="Exemples">Exemples</h2>
+### Exceptions
 
-<p>La méthode <code>clear()</code> accepte des valeurs multiples.</p>
+Si *masque* n'est pas l'une des valeurs possibles listées, une erreur `gl.INVALID_ENUM` est déclenchée.
 
-<pre class="brush: js">gl.clear(gl.DEPTH_BUFFER_BIT);
+## Exemples
+
+La méthode `clear()` accepte des valeurs multiples.
+
+```js
+gl.clear(gl.DEPTH_BUFFER_BIT);
 gl.clear(gl.DEPTH_BUFFER_BIT | gl.COLOR_BUFFER_BIT);
-</pre>
+```
 
-<p>Pour obtenir les valeurs d'effacement courantes, interrogez les constantes <code>COLOR_CLEAR_VALUE</code>, <code>DEPTH_CLEAR_VALUE</code> et <code>STENCIL_CLEAR_VALUE</code> grâce à la méthode <code>getParameter()</code>.</p>
+Pour obtenir les valeurs d'effacement courantes, interrogez les constantes `COLOR_CLEAR_VALUE`, `DEPTH_CLEAR_VALUE` et `STENCIL_CLEAR_VALUE` grâce à la méthode `getParameter()`.
 
-<pre class="brush: js">gl.getParameter(gl.COLOR_CLEAR_VALUE);
+```js
+gl.getParameter(gl.COLOR_CLEAR_VALUE);
 gl.getParameter(gl.DEPTH_CLEAR_VALUE);
 gl.getParameter(gl.STENCIL_CLEAR_VALUE);
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('WebGL', "#5.14.11", "clear")}}</td>
-   <td>{{Spec2('WebGL')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('OpenGL ES 2.0', "glClear.xml", "glClear")}}</td>
-   <td>{{Spec2('OpenGL ES 2.0')}}</td>
-   <td>Page man de l'API OpenGL.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.WebGLRenderingContext.clear")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("WebGLRenderingContext.clearColor()")}}</li>
- <li>{{domxref("WebGLRenderingContext.clearDepth()")}}</li>
- <li>{{domxref("WebGLRenderingContext.clearStencil()")}}</li>
-</ul>
+```
+
+## Spécifications
+
+| Spécification                                                            | Statut                               | Commentaire               |
+| ------------------------------------------------------------------------ | ------------------------------------ | ------------------------- |
+| {{SpecName('WebGL', "#5.14.11", "clear")}}                 | {{Spec2('WebGL')}}             | Définition initiale.      |
+| {{SpecName('OpenGL ES 2.0', "glClear.xml", "glClear")}} | {{Spec2('OpenGL ES 2.0')}} | Page man de l'API OpenGL. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.WebGLRenderingContext.clear")}}
+
+## Voir aussi
+
+- {{domxref("WebGLRenderingContext.clearColor()")}}
+- {{domxref("WebGLRenderingContext.clearDepth()")}}
+- {{domxref("WebGLRenderingContext.clearStencil()")}}
diff --git a/files/fr/web/api/webglrenderingcontext/compileshader/index.md b/files/fr/web/api/webglrenderingcontext/compileshader/index.md
index 4727567959..e0334e3e36 100644
--- a/files/fr/web/api/webglrenderingcontext/compileshader/index.md
+++ b/files/fr/web/api/webglrenderingcontext/compileshader/index.md
@@ -9,77 +9,58 @@ tags:
   - WebGLRenderingContext
 translation_of: Web/API/WebGLRenderingContext/compileShader
 ---
-<div>{{APIRef("WebGL")}}</div>
+{{APIRef("WebGL")}}
 
-<p>La méthode <strong>WebGLRenderingContext.compileShader()</strong> de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> compile un shader GLSL en données binaires, de sorte qu'il puisse être utilisé par un {{domxref("WebGLProgram")}}.</p>
+La méthode **WebGLRenderingContext.compileShader()** de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) compile un shader GLSL en données binaires, de sorte qu'il puisse être utilisé par un {{domxref("WebGLProgram")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">void <var><em>gl</em>.compileShader</var><var>(shader);</var>
-</pre>
+    void gl.compileShader(shader);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>shader</code></dt>
- <dd>Un {{domxref("WebGLShader")}} de fragments ou de sommets.</dd>
-</dl>
+- `shader`
+  - : Un {{domxref("WebGLShader")}} de fragments ou de sommets.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: js">var shader = gl.createShader(gl.VERTEX_SHADER);
+```js
+var shader = gl.createShader(gl.VERTEX_SHADER);
 gl.shaderSource(shader, sourceShader);
 gl.compileShader(shader);
-</pre>
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('WebGL', "#5.14.9", "compileShader")}}</td>
-   <td>{{Spec2('WebGL')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('OpenGL ES 2.0', "glCompileShader.xml", "glCompileShader")}}</td>
-   <td>{{Spec2('OpenGL ES 2.0')}}</td>
-   <td>Page man OpenGL.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                    | Statut                               | Commentaire          |
+| ------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- |
+| {{SpecName('WebGL', "#5.14.9", "compileShader")}}                                 | {{Spec2('WebGL')}}             | Définition initiale. |
+| {{SpecName('OpenGL ES 2.0', "glCompileShader.xml", "glCompileShader")}} | {{Spec2('OpenGL ES 2.0')}} | Page man OpenGL.     |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.WebGLRenderingContext.compileShader")}}</p>
+{{Compat("api.WebGLRenderingContext.compileShader")}}
 
-<h2 id="Voire_aussi">Voire aussi</h2>
+## Voire aussi
 
-<ul>
- <li>{{domxref("WebGLProgram")}}</li>
- <li>{{domxref("WebGLShader")}}</li>
- <li>{{domxref("WebGLRenderingContext.attachShader()")}}</li>
- <li>{{domxref("WebGLRenderingContext.createProgram()")}}</li>
- <li>{{domxref("WebGLRenderingContext.createShader()")}}</li>
- <li>{{domxref("WebGLRenderingContext.deleteProgram()")}}</li>
- <li>{{domxref("WebGLRenderingContext.deleteShader()")}}</li>
- <li>{{domxref("WebGLRenderingContext.detachShader()")}}</li>
- <li>{{domxref("WebGLRenderingContext.getAttachedShaders()")}}</li>
- <li>{{domxref("WebGLRenderingContext.getProgramParameter()")}}</li>
- <li>{{domxref("WebGLRenderingContext.getProgramInfoLog()")}}</li>
- <li>{{domxref("WebGLRenderingContext.getShaderParameter()")}}</li>
- <li>{{domxref("WebGLRenderingContext.getShaderPrecisionFormat()")}}</li>
- <li>{{domxref("WebGLRenderingContext.getShaderInfoLog()")}}</li>
- <li>{{domxref("WebGLRenderingContext.getShaderSource()")}}</li>
- <li>{{domxref("WebGLRenderingContext.isProgram()")}}</li>
- <li>{{domxref("WebGLRenderingContext.isShader()")}}</li>
- <li>{{domxref("WebGLRenderingContext.linkProgram()")}}</li>
- <li>{{domxref("WebGLRenderingContext.shaderSource()")}}</li>
- <li>{{domxref("WebGLRenderingContext.useProgram()")}}</li>
- <li>{{domxref("WebGLRenderingContext.validateProgram()")}}</li>
-</ul>
+- {{domxref("WebGLProgram")}}
+- {{domxref("WebGLShader")}}
+- {{domxref("WebGLRenderingContext.attachShader()")}}
+- {{domxref("WebGLRenderingContext.createProgram()")}}
+- {{domxref("WebGLRenderingContext.createShader()")}}
+- {{domxref("WebGLRenderingContext.deleteProgram()")}}
+- {{domxref("WebGLRenderingContext.deleteShader()")}}
+- {{domxref("WebGLRenderingContext.detachShader()")}}
+- {{domxref("WebGLRenderingContext.getAttachedShaders()")}}
+- {{domxref("WebGLRenderingContext.getProgramParameter()")}}
+- {{domxref("WebGLRenderingContext.getProgramInfoLog()")}}
+- {{domxref("WebGLRenderingContext.getShaderParameter()")}}
+- {{domxref("WebGLRenderingContext.getShaderPrecisionFormat()")}}
+- {{domxref("WebGLRenderingContext.getShaderInfoLog()")}}
+- {{domxref("WebGLRenderingContext.getShaderSource()")}}
+- {{domxref("WebGLRenderingContext.isProgram()")}}
+- {{domxref("WebGLRenderingContext.isShader()")}}
+- {{domxref("WebGLRenderingContext.linkProgram()")}}
+- {{domxref("WebGLRenderingContext.shaderSource()")}}
+- {{domxref("WebGLRenderingContext.useProgram()")}}
+- {{domxref("WebGLRenderingContext.validateProgram()")}}
diff --git a/files/fr/web/api/webglrenderingcontext/createbuffer/index.md b/files/fr/web/api/webglrenderingcontext/createbuffer/index.md
index 6970f50070..e40ea5f601 100644
--- a/files/fr/web/api/webglrenderingcontext/createbuffer/index.md
+++ b/files/fr/web/api/webglrenderingcontext/createbuffer/index.md
@@ -9,67 +9,63 @@ tags:
   - WebGLRenderingContext
 translation_of: Web/API/WebGLRenderingContext/createBuffer
 ---
-<div>{{APIRef("WebGL")}}</div>
+{{APIRef("WebGL")}}
 
-<p>La méthode <strong><code>WebGLRenderingContext.createBuffer() </code></strong>de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> crée et initialise un {{domxref ("WebGLBuffer")}} stockant des données telles que des sommets ou des couleurs.</p>
+La méthode **`WebGLRenderingContext.createBuffer() `**de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) crée et initialise un {{domxref ("WebGLBuffer")}} stockant des données telles que des sommets ou des couleurs.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">WebGLBuffer <var>gl</var>.createBuffer();
-</pre>
+    WebGLBuffer gl.createBuffer();
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<p>Aucun.</p>
+Aucun.
 
-<h3 id="Valeur_retournée">Valeur retournée</h3>
+### Valeur retournée
 
-<p>Un {{domxref("WebGLBuffer")}} stockant des données telles que des sommets ou des couleurs.</p>
+Un {{domxref("WebGLBuffer")}} stockant des données telles que des sommets ou des couleurs.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Création_d'un_tampon">Création d'un tampon</h3>
+### Création d'un tampon
 
-<pre class="brush: js">var canevas = document.getElementById('canevas');
+```js
+var canevas = document.getElementById('canevas');
 var gl = canevas.getContext('webgl');
 var tampon = gl.createBuffer();
-</pre>
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('WebGL', "#5.14.5", "createBuffer")}}</td>
-   <td>{{Spec2('WebGL')}}</td>
-   <td>
-    <p>Définition initiale.</p>
-   </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('OpenGL ES 2.0', "glGenBuffers.xml", "glGenBuffers")}}</td>
-   <td>{{Spec2('OpenGL ES 2.0')}}</td>
-   <td>
-    <p>Page man de l’API OpenGL (similaire).</p>
-   </td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="col">Spécification</th>
+      <th scope="col">Statut</th>
+      <th scope="col">Commentaire</th>
+    </tr>
+    <tr>
+      <td>{{SpecName('WebGL', "#5.14.5", "createBuffer")}}</td>
+      <td>{{Spec2('WebGL')}}</td>
+      <td><p>Définition initiale.</p></td>
+    </tr>
+    <tr>
+      <td>
+        {{SpecName('OpenGL ES 2.0', "glGenBuffers.xml", "glGenBuffers")}}
+      </td>
+      <td>{{Spec2('OpenGL ES 2.0')}}</td>
+      <td><p>Page man de l’API OpenGL (similaire).</p></td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.WebGLRenderingContext.createBuffer")}}</p>
+{{Compat("api.WebGLRenderingContext.createBuffer")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("WebGLRenderingContext.bindBuffer()")}}</li>
- <li>{{domxref("WebGLRenderingContext.deleteBuffer()")}}</li>
- <li>{{domxref("WebGLRenderingContext.isBuffer()")}}</li>
- <li>Autres tampons : {{domxref("WebGLFramebuffer")}}, {{domxref("WebGLRenderbuffer")}}</li>
-</ul>
+- {{domxref("WebGLRenderingContext.bindBuffer()")}}
+- {{domxref("WebGLRenderingContext.deleteBuffer()")}}
+- {{domxref("WebGLRenderingContext.isBuffer()")}}
+- Autres tampons : {{domxref("WebGLFramebuffer")}}, {{domxref("WebGLRenderbuffer")}}
diff --git a/files/fr/web/api/webglrenderingcontext/createprogram/index.md b/files/fr/web/api/webglrenderingcontext/createprogram/index.md
index 4b59a8b581..cf6ce1d9b9 100644
--- a/files/fr/web/api/webglrenderingcontext/createprogram/index.md
+++ b/files/fr/web/api/webglrenderingcontext/createprogram/index.md
@@ -9,28 +9,28 @@ tags:
   - WebGLRenderingContext
 translation_of: Web/API/WebGLRenderingContext/createProgram
 ---
-<div>{{APIRef("WebGL")}}</div>
+{{APIRef("WebGL")}}
 
-<p>La méthode <code><strong>WebGLRenderingContext.createProgram()</strong></code> de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> crée et initialise un objet {{domxref("WebGLProgram")}}.</p>
+La méthode **`WebGLRenderingContext.createProgram()`** de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) crée et initialise un objet {{domxref("WebGLProgram")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">WebGLProgram <var>gl</var>.createProgram();
-</pre>
+    WebGLProgram gl.createProgram();
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<p>Aucun.</p>
+Aucun.
 
-<h3 id="Valeur_retournée">Valeur retournée</h3>
+### Valeur retournée
 
-<p>Un objet {{domxref("WebGLProgram")}} qui est une combinaison de deux {{domxref("WebGLShader")}}s compilés, constitués d'un shader de sommet et d'un shader de fragment (tous deux écrits en GLSL). Ceux-ci sont ensuite liés en un programme utilisable.</p>
+Un objet {{domxref("WebGLProgram")}} qui est une combinaison de deux {{domxref("WebGLShader")}}s compilés, constitués d'un shader de sommet et d'un shader de fragment (tous deux écrits en GLSL). Ceux-ci sont ensuite liés en un programme utilisable.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Création_d'un_programme_WebGL">Création d'un programme WebGL</h3>
+### Création d'un programme WebGL
 
-<pre class="brush: js">var programme = gl.createProgram();
+```js
+var programme = gl.createProgram();
 
 // Attacher les shaders pré-existants
 gl.attachShader(programme, shaderDeSommet);
@@ -42,44 +42,27 @@ if ( !gl.getProgramParameter( programme, gl.LINK_STATUS) ) {
   var info = gl.getProgramInfoLog(program);
   throw 'Impossible de compiler le programme WebGL. \n\n' + info;
 }
-</pre>
-
-<p>Voir {{domxref ("WebGLShader")}} pour plus d'informations sur la création du <code>shaderDeSommet</code> et du <code>shaderDeFragment</code> dans l'exemple ci-dessus.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('WebGL', "#5.14.9", "createProgram")}}</td>
-   <td>{{Spec2('WebGL')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('OpenGL ES 2.0', "glCreateProgram.xml", "glCreateProgram")}}</td>
-   <td>{{Spec2('OpenGL ES 2.0')}}</td>
-   <td>Page man de l'API OpenGL (similaire).</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.WebGLRenderingContext.createProgram")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("WebGLRenderingContext.deleteProgram()")}}</li>
- <li>{{domxref("WebGLRenderingContext.isProgram()")}}</li>
- <li>{{domxref("WebGLRenderingContext.linkProgram()")}}</li>
- <li>{{domxref("WebGLRenderingContext.useProgram()")}}</li>
- <li>{{domxref("WebGLRenderingContext.validateProgram()")}}</li>
- <li>{{domxref("WebGLRenderingContext.getProgramParameter()")}}</li>
- <li>{{domxref("WebGLRenderingContext.getProgramInfoLog()")}}</li>
-</ul>
+```
+
+Voir {{domxref ("WebGLShader")}} pour plus d'informations sur la création du `shaderDeSommet` et du `shaderDeFragment` dans l'exemple ci-dessus.
+
+## Spécifications
+
+| Spécification                                                                                    | Statut                               | Commentaire                           |
+| ------------------------------------------------------------------------------------------------ | ------------------------------------ | ------------------------------------- |
+| {{SpecName('WebGL', "#5.14.9", "createProgram")}}                                 | {{Spec2('WebGL')}}             | Définition initiale.                  |
+| {{SpecName('OpenGL ES 2.0', "glCreateProgram.xml", "glCreateProgram")}} | {{Spec2('OpenGL ES 2.0')}} | Page man de l'API OpenGL (similaire). |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.WebGLRenderingContext.createProgram")}}
+
+## Voir aussi
+
+- {{domxref("WebGLRenderingContext.deleteProgram()")}}
+- {{domxref("WebGLRenderingContext.isProgram()")}}
+- {{domxref("WebGLRenderingContext.linkProgram()")}}
+- {{domxref("WebGLRenderingContext.useProgram()")}}
+- {{domxref("WebGLRenderingContext.validateProgram()")}}
+- {{domxref("WebGLRenderingContext.getProgramParameter()")}}
+- {{domxref("WebGLRenderingContext.getProgramInfoLog()")}}
diff --git a/files/fr/web/api/webglrenderingcontext/createshader/index.md b/files/fr/web/api/webglrenderingcontext/createshader/index.md
index d67f27443d..a2e973949c 100644
--- a/files/fr/web/api/webglrenderingcontext/createshader/index.md
+++ b/files/fr/web/api/webglrenderingcontext/createshader/index.md
@@ -10,76 +10,56 @@ tags:
   - WebGL
 translation_of: Web/API/WebGLRenderingContext/createShader
 ---
-<div>{{APIRef("WebGL")}}</div>
+{{APIRef("WebGL")}}
 
-<p>La méthode <strong>WebGLRenderingContext.createShader() de l'</strong><a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> crée un {{domxref("WebGLShader")}}, qui peut alors être configuré davantage en utilisant {{domxref("WebGLRenderingContext.shaderSource()")}} et {{domxref("WebGLRenderingContext.compileShader()")}}.</p>
+La méthode **WebGLRenderingContext.createShader() de l'**[API WebGL](/fr-FR/docs/Web/API/WebGL_API) crée un {{domxref("WebGLShader")}}, qui peut alors être configuré davantage en utilisant {{domxref("WebGLRenderingContext.shaderSource()")}} et {{domxref("WebGLRenderingContext.compileShader()")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">WebGLShader <var><em>gl</em>.</var>createShader<var>(type);</var>
-</pre>
+    WebGLShader gl.createShader(type);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>type</code></dt>
- <dd>Soit <code>gl.VERTEX_SHADER</code>, soit <code>gl.FRAGMENT_SHADER</code></dd>
-</dl>
+- `type`
+  - : Soit `gl.VERTEX_SHADER`, soit `gl.FRAGMENT_SHADER`
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Voir {{domxref("WebGLShader")}} pour l'utilisation et des exemples.</p>
+Voir {{domxref("WebGLShader")}} pour l'utilisation et des exemples.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('WebGL', "#5.14.9", "createShader")}}</td>
-   <td>{{Spec2('WebGL')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('OpenGL ES 2.0', "glCreateShader.xml", "glCreateShader")}}</td>
-   <td>{{Spec2('OpenGL ES 2.0')}}</td>
-   <td>Page man OpenGL.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                | Statut                               | Commentaire          |
+| -------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName('WebGL', "#5.14.9", "createShader")}}                             | {{Spec2('WebGL')}}             | Définition initiale. |
+| {{SpecName('OpenGL ES 2.0', "glCreateShader.xml", "glCreateShader")}} | {{Spec2('OpenGL ES 2.0')}} | Page man OpenGL.     |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.WebGLRenderingContext.createShader")}}</p>
+{{Compat("api.WebGLRenderingContext.createShader")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("WebGLProgram")}}</li>
- <li>{{domxref("WebGLShader")}}</li>
- <li>{{domxref("WebGLRenderingContext.attachShader()")}}</li>
- <li>{{domxref("WebGLRenderingContext.bindAttribLocation()")}}</li>
- <li>{{domxref("WebGLRenderingContext.compileShader()")}}</li>
- <li>{{domxref("WebGLRenderingContext.createProgram()")}}</li>
- <li>{{domxref("WebGLRenderingContext.createShader()")}}</li>
- <li>{{domxref("WebGLRenderingContext.deleteProgram()")}}</li>
- <li>{{domxref("WebGLRenderingContext.deleteShader()")}}</li>
- <li>{{domxref("WebGLRenderingContext.detachShader()")}}</li>
- <li>{{domxref("WebGLRenderingContext.getAttachedShaders()")}}</li>
- <li>{{domxref("WebGLRenderingContext.getProgramParameter()")}}</li>
- <li>{{domxref("WebGLRenderingContext.getProgramInfoLog()")}}</li>
- <li>{{domxref("WebGLRenderingContext.getShaderParameter()")}}</li>
- <li>{{domxref("WebGLRenderingContext.getShaderPrecisionFormat()")}}</li>
- <li>{{domxref("WebGLRenderingContext.getShaderInfoLog()")}}</li>
- <li>{{domxref("WebGLRenderingContext.getShaderSource()")}}</li>
- <li>{{domxref("WebGLRenderingContext.isProgram()")}}</li>
- <li>{{domxref("WebGLRenderingContext.isShader()")}}</li>
- <li>{{domxref("WebGLRenderingContext.linkProgram()")}}</li>
- <li>{{domxref("WebGLRenderingContext.shaderSource()")}}</li>
- <li>{{domxref("WebGLRenderingContext.useProgram()")}}</li>
- <li>{{domxref("WebGLRenderingContext.validateProgram()")}}</li>
-</ul>
+- {{domxref("WebGLProgram")}}
+- {{domxref("WebGLShader")}}
+- {{domxref("WebGLRenderingContext.attachShader()")}}
+- {{domxref("WebGLRenderingContext.bindAttribLocation()")}}
+- {{domxref("WebGLRenderingContext.compileShader()")}}
+- {{domxref("WebGLRenderingContext.createProgram()")}}
+- {{domxref("WebGLRenderingContext.createShader()")}}
+- {{domxref("WebGLRenderingContext.deleteProgram()")}}
+- {{domxref("WebGLRenderingContext.deleteShader()")}}
+- {{domxref("WebGLRenderingContext.detachShader()")}}
+- {{domxref("WebGLRenderingContext.getAttachedShaders()")}}
+- {{domxref("WebGLRenderingContext.getProgramParameter()")}}
+- {{domxref("WebGLRenderingContext.getProgramInfoLog()")}}
+- {{domxref("WebGLRenderingContext.getShaderParameter()")}}
+- {{domxref("WebGLRenderingContext.getShaderPrecisionFormat()")}}
+- {{domxref("WebGLRenderingContext.getShaderInfoLog()")}}
+- {{domxref("WebGLRenderingContext.getShaderSource()")}}
+- {{domxref("WebGLRenderingContext.isProgram()")}}
+- {{domxref("WebGLRenderingContext.isShader()")}}
+- {{domxref("WebGLRenderingContext.linkProgram()")}}
+- {{domxref("WebGLRenderingContext.shaderSource()")}}
+- {{domxref("WebGLRenderingContext.useProgram()")}}
+- {{domxref("WebGLRenderingContext.validateProgram()")}}
diff --git a/files/fr/web/api/webglrenderingcontext/createtexture/index.md b/files/fr/web/api/webglrenderingcontext/createtexture/index.md
index 2ac9c1fd62..a073857b80 100644
--- a/files/fr/web/api/webglrenderingcontext/createtexture/index.md
+++ b/files/fr/web/api/webglrenderingcontext/createtexture/index.md
@@ -10,67 +10,65 @@ tags:
   - WebGLRenderingContext
 translation_of: Web/API/WebGLRenderingContext/createTexture
 ---
-<div>{{APIRef("WebGL")}}</div>
+{{APIRef("WebGL")}}
 
-<p>La méthode <strong><code>WebGLRenderingContext.createTexture()</code></strong> de l'API WebGL crée et initialise un objet {{domxref("WebGLTexture")}}.</p>
+La méthode **`WebGLRenderingContext.createTexture()`** de l'API WebGL crée et initialise un objet {{domxref("WebGLTexture")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">WebGLTexture <var>gl</var>.createTexture();
-</pre>
+    WebGLTexture gl.createTexture();
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<p>Aucun.</p>
+Aucun.
 
-<h3 id="Valeur_retournée">Valeur retournée</h3>
+### Valeur retournée
 
-<p>Un objet {{domxref("WebGLTexture")}} auquel des images peuvent être liées.</p>
+Un objet {{domxref("WebGLTexture")}} auquel des images peuvent être liées.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Voir aussi le <a href="/fr-FR/docs/Web/API/WebGL_API/Tutorial">tutoriel WebGL</a> sur l'<a href="/fr-FR/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL">Utilisation de textures en WebGL</a>.</p>
+Voir aussi le [tutoriel WebGL](/fr-FR/docs/Web/API/WebGL_API/Tutorial) sur l'[Utilisation de textures en WebGL](/fr-FR/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL).
 
-<h3 id="Création_d'une_texture">Création d'une texture</h3>
+### Création d'une texture
 
-<pre class="brush: js">var canevas = document.getElementById('canevas');
+```js
+var canevas = document.getElementById('canevas');
 var gl = canevas.getContext('webgl');
 var texture = gl.createTexture();
-</pre>
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('WebGL', "#5.14.8", "createTexture")}}</td>
-   <td>{{Spec2('WebGL')}}</td>
-   <td>
-    <p>Définition initiale.</p>
-   </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('OpenGL ES 2.0', "glGenTextures.xml", "glGenTextures")}}</td>
-   <td>{{Spec2('OpenGL ES 2.0')}}</td>
-   <td>Page man de l’API OpenGL (similaire).</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="col">Spécification</th>
+      <th scope="col">Statut</th>
+      <th scope="col">Commentaire</th>
+    </tr>
+    <tr>
+      <td>{{SpecName('WebGL', "#5.14.8", "createTexture")}}</td>
+      <td>{{Spec2('WebGL')}}</td>
+      <td><p>Définition initiale.</p></td>
+    </tr>
+    <tr>
+      <td>
+        {{SpecName('OpenGL ES 2.0', "glGenTextures.xml", "glGenTextures")}}
+      </td>
+      <td>{{Spec2('OpenGL ES 2.0')}}</td>
+      <td>Page man de l’API OpenGL (similaire).</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.WebGLRenderingContext.createTexture")}}</p>
+{{Compat("api.WebGLRenderingContext.createTexture")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("WebGLRenderingContext.bindTexture()")}}</li>
- <li>{{domxref("WebGLRenderingContext.deleteTexture()")}}</li>
- <li>{{domxref("WebGLRenderingContext.isTexture()")}}</li>
- <li>{{domxref("WebGLRenderingContext.texImage2D()")}}</li>
-</ul>
+- {{domxref("WebGLRenderingContext.bindTexture()")}}
+- {{domxref("WebGLRenderingContext.deleteTexture()")}}
+- {{domxref("WebGLRenderingContext.isTexture()")}}
+- {{domxref("WebGLRenderingContext.texImage2D()")}}
diff --git a/files/fr/web/api/webglrenderingcontext/deletebuffer/index.md b/files/fr/web/api/webglrenderingcontext/deletebuffer/index.md
index 561e0c77c6..47fbedaa04 100644
--- a/files/fr/web/api/webglrenderingcontext/deletebuffer/index.md
+++ b/files/fr/web/api/webglrenderingcontext/deletebuffer/index.md
@@ -9,69 +9,51 @@ tags:
   - WebGLRenderingContext
 translation_of: Web/API/WebGLRenderingContext/deleteBuffer
 ---
-<div>{{APIRef("WebGL")}}</div>
+{{APIRef("WebGL")}}
 
-<p>La méthode <strong><code>WebGLRenderingContext.deleteBuffer()</code></strong> de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> supprime le {{domxref ("WebGLBuffer")}} indiqué. Cette méthode n'a aucun effet si le tampon a déjà été supprimé.</p>
+La méthode **`WebGLRenderingContext.deleteBuffer()`** de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) supprime le {{domxref ("WebGLBuffer")}} indiqué. Cette méthode n'a aucun effet si le tampon a déjà été supprimé.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">void <var>gl</var>.deleteBuffer(<em>tampon</em>);
-</pre>
+    void gl.deleteBuffer(tampon);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt>tampon</dt>
- <dd>Un objet {{domxref("WebGLBuffer")}} à supprimer.</dd>
-</dl>
+- tampon
+  - : Un objet {{domxref("WebGLBuffer")}} à supprimer.
 
-<h3 id="Valeur_retournée">Valeur retournée</h3>
+### Valeur retournée
 
-<p>Aucune.</p>
+Aucune.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Suppression_d'un_tampon">Suppression d'un tampon</h3>
+### Suppression d'un tampon
 
-<pre class="brush: js">var canevas = document.getElementById('canevas');
+```js
+var canevas = document.getElementById('canevas');
 var gl = canevas.getContext('webgl');
 var tampon = gl.createBuffer();
 
 // ...
 
-gl.deleteBuffer(tampon);</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('WebGL', "#5.14.5", "deleteBuffer")}}</td>
-   <td>{{Spec2('WebGL')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('OpenGL ES 2.0', "glDeleteBuffers.xml", "glDeleteBuffers")}}</td>
-   <td>{{Spec2('OpenGL ES 2.0')}}</td>
-   <td>Page man de l’API OpenGL (similaire).</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.WebGLRenderingContext.deleteBuffer")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("WebGLRenderingContext.bindBuffer()")}}</li>
- <li>{{domxref("WebGLRenderingContext.createBuffer()")}}</li>
- <li>{{domxref("WebGLRenderingContext.isBuffer()")}}</li>
- <li>Autres tampons : {{domxref("WebGLFramebuffer")}}, {{domxref("WebGLRenderbuffer")}}</li>
-</ul>
+gl.deleteBuffer(tampon);
+```
+
+## Spécifications
+
+| Spécification                                                                                    | Statut                               | Commentaire                           |
+| ------------------------------------------------------------------------------------------------ | ------------------------------------ | ------------------------------------- |
+| {{SpecName('WebGL', "#5.14.5", "deleteBuffer")}}                                 | {{Spec2('WebGL')}}             | Définition initiale.                  |
+| {{SpecName('OpenGL ES 2.0', "glDeleteBuffers.xml", "glDeleteBuffers")}} | {{Spec2('OpenGL ES 2.0')}} | Page man de l’API OpenGL (similaire). |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.WebGLRenderingContext.deleteBuffer")}}
+
+## Voir aussi
+
+- {{domxref("WebGLRenderingContext.bindBuffer()")}}
+- {{domxref("WebGLRenderingContext.createBuffer()")}}
+- {{domxref("WebGLRenderingContext.isBuffer()")}}
+- Autres tampons : {{domxref("WebGLFramebuffer")}}, {{domxref("WebGLRenderbuffer")}}
diff --git a/files/fr/web/api/webglrenderingcontext/deleteshader/index.md b/files/fr/web/api/webglrenderingcontext/deleteshader/index.md
index 01a62f3e7a..82f2677183 100644
--- a/files/fr/web/api/webglrenderingcontext/deleteshader/index.md
+++ b/files/fr/web/api/webglrenderingcontext/deleteshader/index.md
@@ -9,62 +9,44 @@ tags:
   - WebGLRenderingContext
 translation_of: Web/API/WebGLRenderingContext/deleteShader
 ---
-<div>{{APIRef("WebGL")}}</div>
+{{APIRef("WebGL")}}
 
-<p>La méthode <strong><code>WebGLRenderingContext.deleteShader()</code></strong> de l'API WebGL marque l'objet {{domxref("WebGLShader")}} indiqué pour suppression. Il sera ensuite supprimé dès que le shader ne sera plus utilisé. Cette méthode n'a aucun effet si le shader a déjà été supprimé, et le {{domxref ("WebGLShader")}} est automatiquement marqué pour la suppression lorsqu'il est détruit par le garbage collector.</p>
+La méthode **`WebGLRenderingContext.deleteShader()`** de l'API WebGL marque l'objet {{domxref("WebGLShader")}} indiqué pour suppression. Il sera ensuite supprimé dès que le shader ne sera plus utilisé. Cette méthode n'a aucun effet si le shader a déjà été supprimé, et le {{domxref ("WebGLShader")}} est automatiquement marqué pour la suppression lorsqu'il est détruit par le garbage collector.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">void <var>gl</var>.deleteShader(<var>shader</var>);
-</pre>
+    void gl.deleteShader(shader);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt>shader</dt>
- <dd>Un objet {{domxref("WebGLShader")}} à détruire.</dd>
-</dl>
+- shader
+  - : Un objet {{domxref("WebGLShader")}} à détruire.
 
-<h3 id="Valeur_retournée">Valeur retournée</h3>
+### Valeur retournée
 
-<p>Aucune.</p>
+Aucune.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Suppression_d'un_shader">Suppression d'un shader</h3>
+### Suppression d'un shader
 
-<pre class="brush: js">gl.deleteShader(shader);</pre>
+```js
+gl.deleteShader(shader);
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('WebGL', "#5.14.9", "deleteShader")}}</td>
-   <td>{{Spec2('WebGL')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('OpenGL ES 2.0', "glDeleteShader.xml", "glDeleteShader")}}</td>
-   <td>{{Spec2('OpenGL ES 2.0')}}</td>
-   <td>Page man de l'API OpenGL (similaire).</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                | Statut                               | Commentaire                           |
+| -------------------------------------------------------------------------------------------- | ------------------------------------ | ------------------------------------- |
+| {{SpecName('WebGL', "#5.14.9", "deleteShader")}}                             | {{Spec2('WebGL')}}             | Définition initiale.                  |
+| {{SpecName('OpenGL ES 2.0', "glDeleteShader.xml", "glDeleteShader")}} | {{Spec2('OpenGL ES 2.0')}} | Page man de l'API OpenGL (similaire). |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.WebGLRenderingContext.deleteShader")}}</p>
+{{Compat("api.WebGLRenderingContext.deleteShader")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("WebGLRenderingContext.createShader()")}}</li>
- <li>{{domxref("WebGLRenderingContext.isShader()")}}</li>
- <li>{{domxref("WebGLRenderingContext.getAttachedShaders()")}}</li>
-</ul>
+- {{domxref("WebGLRenderingContext.createShader()")}}
+- {{domxref("WebGLRenderingContext.isShader()")}}
+- {{domxref("WebGLRenderingContext.getAttachedShaders()")}}
diff --git a/files/fr/web/api/webglrenderingcontext/drawarrays/index.md b/files/fr/web/api/webglrenderingcontext/drawarrays/index.md
index 8bdffeed97..f9d4ce2d0d 100644
--- a/files/fr/web/api/webglrenderingcontext/drawarrays/index.md
+++ b/files/fr/web/api/webglrenderingcontext/drawarrays/index.md
@@ -9,91 +9,86 @@ tags:
   - WebGLRenderingContext
 translation_of: Web/API/WebGLRenderingContext/drawArrays
 ---
-<div>{{APIRef("WebGL")}}</div>
+{{APIRef("WebGL")}}
 
-<p>La méthode <strong><code>WebGLRenderingContext.drawArrays()</code></strong> de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> dessine des primitives à partir de données tabulaires.</p>
+La méthode **`WebGLRenderingContext.drawArrays()`** de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) dessine des primitives à partir de données tabulaires.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">void <var>gl</var>.drawArrays(<var>mode</var>, <em>premier</em>, <var>compte</var>);
-</pre>
+    void gl.drawArrays(mode, premier, compte);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>mode</code></dt>
- <dd>Un {{domxref ("GLenum")}} indiquant la primitive de type à dessiner. Les valeurs possibles sont :
- <ul>
-  <li><code>gl.POINTS</code> : dessine un seul point ;</li>
-  <li><code>gl.LINE_STRIP</code> : dessine une ligne droite jusqu'au sommet suivant ;</li>
-  <li><code>gl.LINE_LOOP</code> : dessine une ligne droite jusqu'au sommet suivant, et relie le dernier sommet au premier ;</li>
-  <li><code>gl.LINES</code> : dessine une ligne entre une paire de sommets ;</li>
-  <li><code><a href="https://en.wikipedia.org/wiki/Triangle_strip">gl.TRIANGLE_STRIP</a></code></li>
-  <li><code><a href="https://en.wikipedia.org/wiki/Triangle_fan">gl.TRIANGLE_FAN</a></code></li>
-  <li><code>gl.TRIANGLES</code> : dessine un triangle pour un groupe de trois sommets.</li>
- </ul>
- </dd>
- <dt><code>premier</code></dt>
- <dd>Un {{domxref("GLint")}} indiquant de l'indice de départ dans le tableau des points des vecteurs.</dd>
- <dt><code>compte</code></dt>
- <dd>Un {{domxref("GLsizei")}} indiquant le nombre d'indices à dessiner.</dd>
-</dl>
+- `mode`
 
-<h3 id="Valeur_retournée">Valeur retournée</h3>
+  - : Un {{domxref ("GLenum")}} indiquant la primitive de type à dessiner. Les valeurs possibles sont :
 
-<p>None.</p>
+    - `gl.POINTS` : dessine un seul point ;
+    - `gl.LINE_STRIP` : dessine une ligne droite jusqu'au sommet suivant ;
+    - `gl.LINE_LOOP` : dessine une ligne droite jusqu'au sommet suivant, et relie le dernier sommet au premier ;
+    - `gl.LINES` : dessine une ligne entre une paire de sommets ;
+    - [`gl.TRIANGLE_STRIP`](https://en.wikipedia.org/wiki/Triangle_strip)
+    - [`gl.TRIANGLE_FAN`](https://en.wikipedia.org/wiki/Triangle_fan)
+    - `gl.TRIANGLES` : dessine un triangle pour un groupe de trois sommets.
 
-<h3 id="Exceptions">Exceptions</h3>
+- `premier`
+  - : Un {{domxref("GLint")}} indiquant de l'indice de départ dans le tableau des points des vecteurs.
+- `compte`
+  - : Un {{domxref("GLsizei")}} indiquant le nombre d'indices à dessiner.
 
-<ul>
- <li>Si <code>mode</code> n'est pas l'une des valeurs acceptables, une erreur <code>gl.INVALID_ENUM</code> est déclenchée.</li>
- <li>Si <code>premier</code> ou <code>compte</code> sont négatifs, une erreur <code>gl.INVALID_VALUE</code> est déclenchée.</li>
- <li>Si <code>gl.CURRENT_PROGRAM</code> est {{jsxref("null")}}, une erreur <code>gl.INVALID_OPERATION</code> est déclenchée.</li>
-</ul>
+### Valeur retournée
 
-<h2 id="Exemples">Exemples</h2>
+None.
 
-<pre class="brush: js">gl.drawArrays(gl.POINTS, 0, 8);
-</pre>
+### Exceptions
 
-<h2 id="Spécifications">Spécifications</h2>
+- Si `mode` n'est pas l'une des valeurs acceptables, une erreur `gl.INVALID_ENUM` est déclenchée.
+- Si `premier` ou `compte` sont négatifs, une erreur `gl.INVALID_VALUE` est déclenchée.
+- Si `gl.CURRENT_PROGRAM` est {{jsxref("null")}}, une erreur `gl.INVALID_OPERATION` est déclenchée.
+
+## Exemples
+
+```js
+gl.drawArrays(gl.POINTS, 0, 8);
+```
+
+## Spécifications
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('WebGL', "#5.14.11", "drawArrays")}}</td>
-   <td>{{Spec2('WebGL')}}</td>
-   <td>
-    <p> </p>
-    Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('OpenGL ES 2.0', "glDrawArrays.xml", "glDrawArrays")}}</td>
-   <td>{{Spec2('OpenGL ES 2.0')}}</td>
-   <td>
-    <p>Page man de l’API OpenGL.</p>
-   </td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="col">Spécification</th>
+      <th scope="col">Statut</th>
+      <th scope="col">Commentaire</th>
+    </tr>
+    <tr>
+      <td>{{SpecName('WebGL', "#5.14.11", "drawArrays")}}</td>
+      <td>{{Spec2('WebGL')}}</td>
+      <td>
+        <p> </p>
+        Définition initiale.
+      </td>
+    </tr>
+    <tr>
+      <td>
+        {{SpecName('OpenGL ES 2.0', "glDrawArrays.xml", "glDrawArrays")}}
+      </td>
+      <td>{{Spec2('OpenGL ES 2.0')}}</td>
+      <td><p>Page man de l’API OpenGL.</p></td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.WebGLRenderingContext.drawArrays")}}</p>
+{{Compat("api.WebGLRenderingContext.drawArrays")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("WebGLRenderingContext.drawElements()")}}</li>
- <li>{{domxref("ANGLE_instanced_arrays.drawArraysInstancedANGLE()", "ext.drawArraysInstancedANGLE()")}}</li>
- <li>{{domxref("ANGLE_instanced_arrays.drawElementsInstancedANGLE()", "ext.drawElementsInstancedANGLE()")}}</li>
- <li>{{domxref("ANGLE_instanced_arrays.vertexAttribDivisorANGLE()", "ext.vertexAttribDivisorANGLE()")}}</li>
- <li>{{domxref("WebGL2RenderingContext.drawArraysInstanced()")}}</li>
- <li>{{domxref("WebGL2RenderingContext.drawElementsInstanced()")}}</li>
- <li>{{domxref("WebGL2RenderingContext.vertexAttribDivisor()")}}</li>
-</ul>
+- {{domxref("WebGLRenderingContext.drawElements()")}}
+- {{domxref("ANGLE_instanced_arrays.drawArraysInstancedANGLE()", "ext.drawArraysInstancedANGLE()")}}
+- {{domxref("ANGLE_instanced_arrays.drawElementsInstancedANGLE()", "ext.drawElementsInstancedANGLE()")}}
+- {{domxref("ANGLE_instanced_arrays.vertexAttribDivisorANGLE()", "ext.vertexAttribDivisorANGLE()")}}
+- {{domxref("WebGL2RenderingContext.drawArraysInstanced()")}}
+- {{domxref("WebGL2RenderingContext.drawElementsInstanced()")}}
+- {{domxref("WebGL2RenderingContext.vertexAttribDivisor()")}}
diff --git a/files/fr/web/api/webglrenderingcontext/enable/index.md b/files/fr/web/api/webglrenderingcontext/enable/index.md
index 3a4a7633b1..d207dd636e 100644
--- a/files/fr/web/api/webglrenderingcontext/enable/index.md
+++ b/files/fr/web/api/webglrenderingcontext/enable/index.md
@@ -10,133 +10,68 @@ tags:
 translation_of: Web/API/WebGLRenderingContext/enable
 original_slug: Web/API/WebGLRenderingContext/activer
 ---
-<div>{{APIRef("WebGL")}}</div>
-
-<p>La méthode <code>WebGLRenderingContext.enable()</code> de l'API WebGL active des fonctionnalités WebGL particulières pour ce contexte.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">void <var>gl</var>.enable(<em>fon</em>);
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>fon</code></dt>
- <dd><p>Un {{domxref("GLenum")}} indiquant quelle fonctionnalité WebGL activer. Valeurs possibles :</p>
- <table class="standard-table">
-  <thead>
-   <tr>
-    <th scope="col">Constante</th>
-    <th scope="col">Description</th>
-   </tr>
-  </thead>
-  <tbody>
-   <tr>
-    <td><code>gl.BLEND</code></td>
-    <td>Active le mélange des valeurs de couleur de fragment calculées. Voir {{domxref("WebGLRenderingContext.blendFunc()")}}.</td>
-   </tr>
-   <tr>
-    <td><code>gl.CULL_FACE</code></td>
-    <td>Active le masquage des polygones. Voir {{domxref("WebGLRenderingContext.cullFace()")}}.</td>
-   </tr>
-   <tr>
-    <td><code>gl.DEPTH_TEST</code></td>
-    <td>Active les comparaisons et les mises à jour dans le tampon de profondeur. Voir {{domxref("WebGLRenderingContext.depthFunc()")}}.</td>
-   </tr>
-   <tr>
-    <td><code>gl.DITHER</code></td>
-    <td>Active le tramage des composantes de couleur avant qu'elles ne soient écrites dans le tampon de couleur.</td>
-   </tr>
-   <tr>
-    <td><code>gl.POLYGON_OFFSET_FILL</code></td>
-    <td>Active l'ajout d'un décalage aux valeurs de profondeur des fragments de polygone. Voir {{domxref("WebGLRenderingContext.polygonOffset()")}}.</td>
-   </tr>
-   <tr>
-    <td><code>gl.SAMPLE_ALPHA_TO_COVERAGE</code></td>
-    <td>Active le calcul d'une valeur de couverture temporaire déterminée par la valeur alpha.</td>
-   </tr>
-   <tr>
-    <td><code>gl.SAMPLE_COVERAGE</code></td>
-    <td>Active le ET de la couverture des fragments avec la valeur de couverture temporaire. Voir {{domxref("WebGLRenderingContext.sampleCoverage()")}}.</td>
-   </tr>
-   <tr>
-    <td><code>gl.SCISSOR_TEST</code></td>
-    <td>Active le test de détourage qui supprime les fragments se trouvant en dehors du rectangle de détourage. Voir {{domxref("WebGLRenderingContext.scissor()")}}.</td>
-   </tr>
-   <tr>
-    <td><code>gl.STENCIL_TEST</code></td>
-    <td>Active le test et les mises à jour stencil dans le stencil buffer. Voir {{domxref("WebGLRenderingContext.stencilFunc()")}}.</td>
-   </tr>
-  </tbody>
- </table>
- <p>Lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, les valeurs suivantes sont en outre disponibles :</p>
- <table class="standard-table">
-  <thead>
-   <tr>
-    <th scope="col">Constante</th>
-    <th scope="col">Description</th>
-   </tr>
-  </thead>
-  <tbody>
-   <tr>
-    <td><code>gl.RASTERIZER_DISCARD</code></td>
-    <td>Les primitives sont supprimées immédiatement après l'étape de rastérisation, mais après l'étape de renvoi de transformation optionnelle. Les commandes <code>gl.clear()</code> sont ignorées.</td>
-   </tr>
-  </tbody>
- </table>
- </dd>
-</dl>
-
-<h3 id="Valeur_retournée">Valeur retournée</h3>
-
-<p>Aucune.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">gl.enable(gl.DITHER);
-</pre>
-
-<p>Pour vérifier que cette fonctionnalité est activée, utilisez la méthode {{domxref("WebGLRenderingContext.isEnabled()")}} :</p>
-
-<pre class="brush: js">gl.isEnabled(gl.DITHER);
+{{APIRef("WebGL")}}
+
+La méthode `WebGLRenderingContext.enable()` de l'API WebGL active des fonctionnalités WebGL particulières pour ce contexte.
+
+## Syntaxe
+
+    void gl.enable(fon);
+
+### Paramètres
+
+- `fon`
+
+  - : Un {{domxref("GLenum")}} indiquant quelle fonctionnalité WebGL activer. Valeurs possibles :
+
+    | Constante                     | Description                                                                                                                                                                |
+    | ----------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+    | `gl.BLEND`                    | Active le mélange des valeurs de couleur de fragment calculées. Voir {{domxref("WebGLRenderingContext.blendFunc()")}}.                                     |
+    | `gl.CULL_FACE`                | Active le masquage des polygones. Voir {{domxref("WebGLRenderingContext.cullFace()")}}.                                                                   |
+    | `gl.DEPTH_TEST`               | Active les comparaisons et les mises à jour dans le tampon de profondeur. Voir {{domxref("WebGLRenderingContext.depthFunc()")}}.                           |
+    | `gl.DITHER`                   | Active le tramage des composantes de couleur avant qu'elles ne soient écrites dans le tampon de couleur.                                                                   |
+    | `gl.POLYGON_OFFSET_FILL`      | Active l'ajout d'un décalage aux valeurs de profondeur des fragments de polygone. Voir {{domxref("WebGLRenderingContext.polygonOffset()")}}.               |
+    | `gl.SAMPLE_ALPHA_TO_COVERAGE` | Active le calcul d'une valeur de couverture temporaire déterminée par la valeur alpha.                                                                                     |
+    | `gl.SAMPLE_COVERAGE`          | Active le ET de la couverture des fragments avec la valeur de couverture temporaire. Voir {{domxref("WebGLRenderingContext.sampleCoverage()")}}.        |
+    | `gl.SCISSOR_TEST`             | Active le test de détourage qui supprime les fragments se trouvant en dehors du rectangle de détourage. Voir {{domxref("WebGLRenderingContext.scissor()")}}. |
+    | `gl.STENCIL_TEST`             | Active le test et les mises à jour stencil dans le stencil buffer. Voir {{domxref("WebGLRenderingContext.stencilFunc()")}}.                              |
+
+    Lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, les valeurs suivantes sont en outre disponibles :
+
+    | Constante               | Description                                                                                                                                                                        |
+    | ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+    | `gl.RASTERIZER_DISCARD` | Les primitives sont supprimées immédiatement après l'étape de rastérisation, mais après l'étape de renvoi de transformation optionnelle. Les commandes `gl.clear()` sont ignorées. |
+
+### Valeur retournée
+
+Aucune.
+
+## Exemples
+
+```js
+gl.enable(gl.DITHER);
+```
+
+Pour vérifier que cette fonctionnalité est activée, utilisez la méthode {{domxref("WebGLRenderingContext.isEnabled()")}} :
+
+```js
+gl.isEnabled(gl.DITHER);
 // true
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('WebGL', "#5.14.3", "enable")}}</td>
-   <td>{{Spec2('WebGL')}}</td>
-   <td>Définition initiale pour WebGL.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('OpenGL ES 2.0', "glEnable.xml", "glEnable")}}</td>
-   <td>{{Spec2('OpenGL ES 2.0')}}</td>
-   <td>Page man de l'API OpenGL ES 2.0.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('OpenGL ES 3.0', "glEnable.xhtml", "glEnable")}}</td>
-   <td>{{Spec2('OpenGL ES 3.0')}}</td>
-   <td>Page man de l'API OpenGL ES 3.0 API.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.WebGLRenderingContext.enable")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("WebGLRenderingContext.disable()")}}</li>
- <li>{{domxref("WebGLRenderingContext.isEnabled()")}}</li>
-</ul>
+```
+
+## Spécifications
+
+| Spécification                                                                    | Statut                               | Commentaire                          |
+| -------------------------------------------------------------------------------- | ------------------------------------ | ------------------------------------ |
+| {{SpecName('WebGL', "#5.14.3", "enable")}}                         | {{Spec2('WebGL')}}             | Définition initiale pour WebGL.      |
+| {{SpecName('OpenGL ES 2.0', "glEnable.xml", "glEnable")}}     | {{Spec2('OpenGL ES 2.0')}} | Page man de l'API OpenGL ES 2.0.     |
+| {{SpecName('OpenGL ES 3.0', "glEnable.xhtml", "glEnable")}} | {{Spec2('OpenGL ES 3.0')}} | Page man de l'API OpenGL ES 3.0 API. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.WebGLRenderingContext.enable")}}
+
+## Voir aussi
+
+- {{domxref("WebGLRenderingContext.disable()")}}
+- {{domxref("WebGLRenderingContext.isEnabled()")}}
diff --git a/files/fr/web/api/webglrenderingcontext/enablevertexattribarray/index.md b/files/fr/web/api/webglrenderingcontext/enablevertexattribarray/index.md
index a573a50f6c..0ef32e590c 100644
--- a/files/fr/web/api/webglrenderingcontext/enablevertexattribarray/index.md
+++ b/files/fr/web/api/webglrenderingcontext/enablevertexattribarray/index.md
@@ -17,48 +17,42 @@ tags:
   - sommet
 translation_of: Web/API/WebGLRenderingContext/enableVertexAttribArray
 ---
-<div>{{APIRef("WebGL")}}</div>
+{{APIRef("WebGL")}}
 
-<p>La méthode {{domxref ("WebGLRenderingContext")}} <strong><code>enableVertexAttribArray()</code> -</strong> qui fait partie de l'API WebGL - active le tableau générique des attributs de sommet à l'indice spécifié dans la liste des tableaux d'attributs.</p>
+La méthode {{domxref ("WebGLRenderingContext")}} **`enableVertexAttribArray()` -** qui fait partie de l'API WebGL - active le tableau générique des attributs de sommet à l'indice spécifié dans la liste des tableaux d'attributs.
 
-<div class="note">
-<p><strong>Note :</strong> Vous pouvez désactiver le tableau d'attributs en appelant {{domxref("WebGLRenderingContext.disableVertexAttribArray", "disableVertexAttribArray()")}}.</p>
-</div>
+> **Note :** Vous pouvez désactiver le tableau d'attributs en appelant {{domxref("WebGLRenderingContext.disableVertexAttribArray", "disableVertexAttribArray()")}}.
 
-<p>Dans WebGL, les valeurs s'appliquant à un sommet particulier sont stockées dans des attributs. Ceux-ci ne sont disponibles que pour le code JavaScript et le shader de sommet. Les attributs sont référencés par un numéro d'indice dans la liste des attributs gérés par la GPU. Certains indices d'attributs de sommet peuvent avoir des buts prédéfinis, suivant la plate-forme et/ou la GPU. D'autres sont affectés par la couche WebGL lorsque vous créez les attributs.</p>
+Dans WebGL, les valeurs s'appliquant à un sommet particulier sont stockées dans des attributs. Ceux-ci ne sont disponibles que pour le code JavaScript et le shader de sommet. Les attributs sont référencés par un numéro d'indice dans la liste des attributs gérés par la GPU. Certains indices d'attributs de sommet peuvent avoir des buts prédéfinis, suivant la plate-forme et/ou la GPU. D'autres sont affectés par la couche WebGL lorsque vous créez les attributs.
 
-<p>De toute façon, puisque les attributs ne peuvent pas être utilisés sauf s'ils sont activés, et ils sont désactivés par défaut, vous devez appeler <code>enableVertexAttribArray()</code> pour activer les attributs individuels, afin qu'ils puissent être utilisés. Ceci fait, d'autres méthodes peuvent être utilisées pour accéder à l'attribut, y compris {{domxref("WebGLRenderingContext.vertexAttribPointer", "vertexAttribPointer()")}}, {{domxref("WebGLRenderingContext.vertexAttrib", "vertexAttrib*()")}}, et {{domxref("WebGLRenderingContext.getVertexAttrib"," getVertexAttrib()")}}.</p>
+De toute façon, puisque les attributs ne peuvent pas être utilisés sauf s'ils sont activés, et ils sont désactivés par défaut, vous devez appeler `enableVertexAttribArray()` pour activer les attributs individuels, afin qu'ils puissent être utilisés. Ceci fait, d'autres méthodes peuvent être utilisées pour accéder à l'attribut, y compris {{domxref("WebGLRenderingContext.vertexAttribPointer", "vertexAttribPointer()")}}, {{domxref("WebGLRenderingContext.vertexAttrib", "vertexAttrib*()")}}, et {{domxref("WebGLRenderingContext.getVertexAttrib"," getVertexAttrib()")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">void <var>gl</var>.enableVertexAttribArray(<var>indice</var>);
-</pre>
+    void gl.enableVertexAttribArray(indice);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>indice</code></dt>
- <dd>Un {{domxref("GLuint")}} indiquant le numéro d'indice identifiant de façon unique l'attribut de sommet à activer. Si vous connaissez le nom de l'attribut mais pas son indice, vous pouvez obtenir l'indice en appelant {{domxref ("WebGLRenderingContext.getAttribLocation", "getAttribLocation()")}}.</dd>
-</dl>
+- `indice`
+  - : Un {{domxref("GLuint")}} indiquant le numéro d'indice identifiant de façon unique l'attribut de sommet à activer. Si vous connaissez le nom de l'attribut mais pas son indice, vous pouvez obtenir l'indice en appelant {{domxref ("WebGLRenderingContext.getAttribLocation", "getAttribLocation()")}}.
 
-<h3 id="Valeur_retournée">Valeur retournée</h3>
+### Valeur retournée
 
-<p><code>undefined</code>.</p>
+`undefined`.
 
-<h3 id="Erreurs">Erreurs</h3>
+### Erreurs
 
-<p>Pour vérifier d'éventuelles erreurs  après l'appel à <code>enableVertexAttribArray()</code>, appelez {{domxref("WebGLRenderingContext.getError", "getError()")}}.</p>
+Pour vérifier d'éventuelles erreurs  après l'appel à `enableVertexAttribArray()`, appelez {{domxref("WebGLRenderingContext.getError", "getError()")}}.
 
-<dl>
- <dt><code>WebGLRenderingContext.INVALID_VALUE</code></dt>
- <dd>L'<code>indice</code> spécifié est invalide, c'est-à-dire qu'il est supérieur ou égal au nombre maximal d'entrées autorisées dans la liste des attributs de sommet du contexte, comme indiqué par la valeur de <code>WebGLRenderingContext.MAX_VERTEX_ATTRIBS</code>.</dd>
-</dl>
+- `WebGLRenderingContext.INVALID_VALUE`
+  - : L'`indice` spécifié est invalide, c'est-à-dire qu'il est supérieur ou égal au nombre maximal d'entrées autorisées dans la liste des attributs de sommet du contexte, comme indiqué par la valeur de `WebGLRenderingContext.MAX_VERTEX_ATTRIBS`.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Ce code — un extrait de l'exemple complet <a href="/fr-FR/docs/Web/API/WebGL_API/Basic_2D_animation_example">Un exemple d'animation 2D WebGL de base</a> — montre l'utilisation de <code>enableVertexArray()</code> pour activer l'attribut qui sera utilisé par la couche WebGL pour passer des sommets individuels depuis le tampon des sommets à la fonction shader de sommet.</p>
+Ce code — un extrait de l'exemple complet [Un exemple d'animation 2D WebGL de base](/fr-FR/docs/Web/API/WebGL_API/Basic_2D_animation_example) — montre l'utilisation de `enableVertexArray()` pour activer l'attribut qui sera utilisé par la couche WebGL pour passer des sommets individuels depuis le tampon des sommets à la fonction shader de sommet.
 
-<pre class="brush: js">gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
+```js
+gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
 
 aVertexPosition =
     gl.getAttribLocation(programmeShader, "aVertexPosition");
@@ -67,53 +61,52 @@ gl.enableVertexAttribArray(aVertexPosition);
 gl.vertexAttribPointer(aVertexPosition, vertexNumComponents,
       gl.FLOAT, false, 0, 0);
 
-gl.drawArrays(gl.TRIANGLES, 0, vertexCount);</pre>
+gl.drawArrays(gl.TRIANGLES, 0, vertexCount);
+```
 
-<div class="note">
-  <p><strong>Note :</strong> Cet extrait de code provient de <a href="/fr-FR/docs/Web/API/WebGL_API/Basic_2D_animation_example#Drawing_and_animating_the_scene">la fonction animateScene()</a> dans "Un exemple d'animation WebGL 2D de base". Voir cet article pour l'exemple complet et pour voir l'animation résultante en action.</p>
-</div>
+> **Note :** Cet extrait de code provient de [la fonction animateScene()](/fr-FR/docs/Web/API/WebGL_API/Basic_2D_animation_example#Drawing_and_animating_the_scene) dans "Un exemple d'animation WebGL 2D de base". Voir cet article pour l'exemple complet et pour voir l'animation résultante en action.
 
-<p>Ce code définit le tampon des sommets qui sera utilisé pour dessiner les triangles de la forme en appelant {{domxref("WebGLRenderingContext.bindBuffer", "bindBuffer()")}}. Ensuite, l'indice de l'attribut de position des sommets est obtenu à partir du programme shader en appelant {{domxref("WebGLRenderingContext.getAttribLocation", "getAttribLocation()")}}.</p>
+Ce code définit le tampon des sommets qui sera utilisé pour dessiner les triangles de la forme en appelant {{domxref("WebGLRenderingContext.bindBuffer", "bindBuffer()")}}. Ensuite, l'indice de l'attribut de position des sommets est obtenu à partir du programme shader en appelant {{domxref("WebGLRenderingContext.getAttribLocation", "getAttribLocation()")}}.
 
-<p>Avec l'indice de l'attribut de position des sommets maintenant disponible dans <code>aVertexPosition</code>, nous appelons <code>enableVertexAttribArray()</code> pour activer l'attribut de position afin qu'il puisse être utilisé par le programme shader (en particulier, par le shader de sommet).</p>
+Avec l'indice de l'attribut de position des sommets maintenant disponible dans `aVertexPosition`, nous appelons `enableVertexAttribArray()` pour activer l'attribut de position afin qu'il puisse être utilisé par le programme shader (en particulier, par le shader de sommet).
 
-<p>Le tampon des sommets est alors lié à l'attribut <code>aVertexPosition</code> en appelant {{domxref("WebGLRenderingContext.vertexAttribPointer", "vertexAttribPointer()")}}. Cette étape n'est pas évidente, puisque cette liaison est presque un effet de biais. Mais cela a pour résultat qu'un accès à <code>aVertexPosition</code> récupére désormais des données à partir du tampon des sommets.</p>
+Le tampon des sommets est alors lié à l'attribut `aVertexPosition` en appelant {{domxref("WebGLRenderingContext.vertexAttribPointer", "vertexAttribPointer()")}}. Cette étape n'est pas évidente, puisque cette liaison est presque un effet de biais. Mais cela a pour résultat qu'un accès à `aVertexPosition` récupére désormais des données à partir du tampon des sommets.
 
-<p>Avec l'association définie entre le tampon des sommets de notre forme et l'attribut <code>aVertexPosition</code> utilisé pour fournir les sommets un par un dans le shader de sommet, nous sommes prêts à dessiner la forme en appelant {{domxref ("WebGLRenderingContext.drawArrays", "drawArrays()")}}.</p>
+Avec l'association définie entre le tampon des sommets de notre forme et l'attribut `aVertexPosition` utilisé pour fournir les sommets un par un dans le shader de sommet, nous sommes prêts à dessiner la forme en appelant {{domxref ("WebGLRenderingContext.drawArrays", "drawArrays()")}}.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('WebGL', "#5.14.10", "enableVertexAttribArray")}}</td>
-   <td>{{Spec2('WebGL')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('OpenGL ES 2.0', "glEnableVertexAttribArray.xml", "glEnableVertexAttribArray")}}</td>
-   <td>{{Spec2('OpenGL ES 2.0')}}</td>
-   <td>
-    <p>Page man de l’API OpenGL.</p>
-   </td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="col">Spécification</th>
+      <th scope="col">Statut</th>
+      <th scope="col">Commentaire</th>
+    </tr>
+    <tr>
+      <td>
+        {{SpecName('WebGL', "#5.14.10", "enableVertexAttribArray")}}
+      </td>
+      <td>{{Spec2('WebGL')}}</td>
+      <td>Définition initiale.</td>
+    </tr>
+    <tr>
+      <td>
+        {{SpecName('OpenGL ES 2.0', "glEnableVertexAttribArray.xml", "glEnableVertexAttribArray")}}
+      </td>
+      <td>{{Spec2('OpenGL ES 2.0')}}</td>
+      <td><p>Page man de l’API OpenGL.</p></td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.WebGLRenderingContext.enableVertexAttribArray")}}</p>
+{{Compat("api.WebGLRenderingContext.enableVertexAttribArray")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr-FR/docs/Web/API/WebGL_API/Data">Données en WebGL</a></li>
- <li><a href="/fr-FR/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context">Ajout de contenu 2D à un contexte WebGL</a></li>
- <li><a href="/fr-FR/docs/Web/API/WebGL_API/Basic_2D_animation_example">Un exemple d'animation WebGL 2D de base</a></li>
- <li>{{domxref("WebGLRenderingContext.disableVertexAttribArray", "disableVertexAttribArray()")}}</li>
-</ul>
+- [Données en WebGL](/fr-FR/docs/Web/API/WebGL_API/Data)
+- [Ajout de contenu 2D à un contexte WebGL](/fr-FR/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context)
+- [Un exemple d'animation WebGL 2D de base](/fr-FR/docs/Web/API/WebGL_API/Basic_2D_animation_example)
+- {{domxref("WebGLRenderingContext.disableVertexAttribArray", "disableVertexAttribArray()")}}
diff --git a/files/fr/web/api/webglrenderingcontext/generatemipmap/index.md b/files/fr/web/api/webglrenderingcontext/generatemipmap/index.md
index d97ee1aa73..c9d4cdbca6 100644
--- a/files/fr/web/api/webglrenderingcontext/generatemipmap/index.md
+++ b/files/fr/web/api/webglrenderingcontext/generatemipmap/index.md
@@ -10,82 +10,55 @@ tags:
   - WebGLRenderingContext
 translation_of: Web/API/WebGLRenderingContext/generateMipmap
 ---
-<div>{{APIRef("WebGL")}}</div>
-
-<p>La méthode <strong><code>WebGLRenderingContext.generateMipmap()</code></strong> de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> génère un ensemble de mipmaps pour un objet {{domxref("WebGLTexture")}}.</p>
-
-<p>Les mipmaps sont utilisées pour créer de la distance avec des objets. Une mipmap de haute résolution est utilisée pour les objets qui sont proches, et une mipmap de résolution inférieure est utilisée pour les objets qui sont plus éloignés. Elles commencent avec la résolution de l'image de texture, puis la résolution est divisée par deux jusqu'à ce qu'une image de texture de dimension 1x1 soit créée.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">void <var>gl</var>.generateMipmap(<em>cible</em>);
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt>cible</dt>
- <dd>Un {{domxref("GLenum")}} indiquant le point de liaison (cible) de la texture active dont les mipmaps seront générées. Valeurs possibles :
- <ul>
-  <li><code>gl.TEXTURE_2D</code> : une  texture bi-dimensionnelle.</li>
-  <li><code>gl.TEXTURE_CUBE_MAP</code> : une texture appliquée sur un cube.</li>
-  <li>Lorsqu'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}} est utilisé, les valeurs suivantes sont en outre disponibles :
-   <ul>
-    <li><code>gl.TEXTURE_3D</code> : une texture tri-dimensionnelle.</li>
-    <li><code>gl.TEXTURE_2D_ARRAY</code> : une texture bi-dimensionnelle en tableau.</li>
-   </ul>
-  </li>
- </ul>
- </dd>
-</dl>
-
-<h3 id="Valeur_retournée">Valeur retournée</h3>
-
-<p>Aucune.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">gl.generateMipmap(gl.TEXTURE_2D);
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('WebGL', "#5.14.8", "generateMipmap")}}</td>
-   <td>{{Spec2('WebGL')}}</td>
-   <td>Définition initiale pour WebGL.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('OpenGL ES 2.0', "glGenerateMipmap.xml", "glGenerateMipmap")}}</td>
-   <td>{{Spec2('OpenGL ES 2.0')}}</td>
-   <td>Page man de l'API (similaire) d'OpenGL ES 2.0.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('OpenGL ES 3.0', "glGenerateMipmap.xhtml", "glGenerateMipmap")}}</td>
-   <td>{{Spec2('OpenGL ES 3.0')}}</td>
-   <td>Page man de l'API (similaire) d'OpenGL ES 3.0<br>
-    Ajoute : <code>gl.TEXTURE_3D</code> et <code>gl.TEXTURE_2D_ARRAY</code></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.WebGLRenderingContext.generateMipmap")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("WebGLRenderingContext.createTexture()")}}</li>
- <li>{{domxref("WebGLRenderingContext.bindTexture()")}}</li>
- <li>{{domxref("WebGLRenderingContext.getTexParameter()")}}</li>
- <li>{{domxref("WebGLRenderingContext.texParameter", "WebGLRenderingContext.texParameterf()")}}</li>
- <li>{{domxref("WebGLRenderingContext.texParameter", "WebGLRenderingContext.texParameteri()")}}</li>
-</ul>
+{{APIRef("WebGL")}}
+
+La méthode **`WebGLRenderingContext.generateMipmap()`** de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) génère un ensemble de mipmaps pour un objet {{domxref("WebGLTexture")}}.
+
+Les mipmaps sont utilisées pour créer de la distance avec des objets. Une mipmap de haute résolution est utilisée pour les objets qui sont proches, et une mipmap de résolution inférieure est utilisée pour les objets qui sont plus éloignés. Elles commencent avec la résolution de l'image de texture, puis la résolution est divisée par deux jusqu'à ce qu'une image de texture de dimension 1x1 soit créée.
+
+## Syntaxe
+
+    void gl.generateMipmap(cible);
+
+### Paramètres
+
+- cible
+
+  - : Un {{domxref("GLenum")}} indiquant le point de liaison (cible) de la texture active dont les mipmaps seront générées. Valeurs possibles :
+
+    - `gl.TEXTURE_2D` : une  texture bi-dimensionnelle.
+    - `gl.TEXTURE_CUBE_MAP` : une texture appliquée sur un cube.
+    - Lorsqu'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}} est utilisé, les valeurs suivantes sont en outre disponibles :
+
+      - `gl.TEXTURE_3D` : une texture tri-dimensionnelle.
+      - `gl.TEXTURE_2D_ARRAY` : une texture bi-dimensionnelle en tableau.
+
+### Valeur retournée
+
+Aucune.
+
+## Exemples
+
+```js
+gl.generateMipmap(gl.TEXTURE_2D);
+```
+
+## Spécifications
+
+| Spécification                                                                                        | Statut                               | Commentaire                                                                                     |
+| ---------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------------------------------------------------------------------------------------------- |
+| {{SpecName('WebGL', "#5.14.8", "generateMipmap")}}                                 | {{Spec2('WebGL')}}             | Définition initiale pour WebGL.                                                                 |
+| {{SpecName('OpenGL ES 2.0', "glGenerateMipmap.xml", "glGenerateMipmap")}}     | {{Spec2('OpenGL ES 2.0')}} | Page man de l'API (similaire) d'OpenGL ES 2.0.                                                  |
+| {{SpecName('OpenGL ES 3.0', "glGenerateMipmap.xhtml", "glGenerateMipmap")}} | {{Spec2('OpenGL ES 3.0')}} | Page man de l'API (similaire) d'OpenGL ES 3.0 Ajoute : `gl.TEXTURE_3D` et `gl.TEXTURE_2D_ARRAY` |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.WebGLRenderingContext.generateMipmap")}}
+
+## Voir aussi
+
+- {{domxref("WebGLRenderingContext.createTexture()")}}
+- {{domxref("WebGLRenderingContext.bindTexture()")}}
+- {{domxref("WebGLRenderingContext.getTexParameter()")}}
+- {{domxref("WebGLRenderingContext.texParameter", "WebGLRenderingContext.texParameterf()")}}
+- {{domxref("WebGLRenderingContext.texParameter", "WebGLRenderingContext.texParameteri()")}}
diff --git a/files/fr/web/api/webglrenderingcontext/getattriblocation/index.md b/files/fr/web/api/webglrenderingcontext/getattriblocation/index.md
index d12d46f1c6..8242d0739b 100644
--- a/files/fr/web/api/webglrenderingcontext/getattriblocation/index.md
+++ b/files/fr/web/api/webglrenderingcontext/getattriblocation/index.md
@@ -9,61 +9,42 @@ tags:
   - WebGLRenderingContext
 translation_of: Web/API/WebGLRenderingContext/getAttribLocation
 ---
-<div>{{APIRef("WebGL")}}</div>
+{{APIRef("WebGL")}}
 
-<p>La méthode <strong><code>WebGLRenderingContext.getAttribLocation()</code></strong> de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> retourne l'emplacement d'une variable d'attribut dans le {{domxref("WebGLProgram")}} indiqué.</p>
+La méthode **`WebGLRenderingContext.getAttribLocation()`** de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) retourne l'emplacement d'une variable d'attribut dans le {{domxref("WebGLProgram")}} indiqué.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">GLint <var>gl</var>.getAttribLocation(<var>programme</var>, <var>nom</var>);
-</pre>
+    GLint gl.getAttribLocation(programme, nom);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt>programme</dt>
- <dd>Un {{domxref("WebGLProgram")}} contenant la variable d'attribut.</dd>
- <dt>nom</dt>
- <dd>Un {{domxref("DOMString")}} indiquant le nom de la variable d'attribut dont l'emplacement est à retourner.</dd>
-</dl>
+- programme
+  - : Un {{domxref("WebGLProgram")}} contenant la variable d'attribut.
+- nom
+  - : Un {{domxref("DOMString")}} indiquant le nom de la variable d'attribut dont l'emplacement est à retourner.
 
-<h3 id="Valeur_retournée">Valeur retournée</h3>
+### Valeur retournée
 
-<p>Un nombre {{domxref("GLint")}} indiquant l'emplacement du nom de la variable si trouvé. Retourne -1 sinon.</p>
+Un nombre {{domxref("GLint")}} indiquant l'emplacement du nom de la variable si trouvé. Retourne -1 sinon.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: js">gl.getAttribLocation(programme, 'vColor');
-</pre>
+```js
+gl.getAttribLocation(programme, 'vColor');
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('WebGL', "#5.14.10", "getAttribLocation")}}</td>
-   <td>{{Spec2('WebGL')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('OpenGL ES 2.0', "glGetAttribLocation.xml", "glGetAttribLocation")}}</td>
-   <td>{{Spec2('OpenGL ES 2.0')}}</td>
-   <td>Page principale de l'API OpenGL.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                            | Statut                               | Commentaire                      |
+| -------------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------------------- |
+| {{SpecName('WebGL', "#5.14.10", "getAttribLocation")}}                                 | {{Spec2('WebGL')}}             | Définition initiale.             |
+| {{SpecName('OpenGL ES 2.0', "glGetAttribLocation.xml", "glGetAttribLocation")}} | {{Spec2('OpenGL ES 2.0')}} | Page principale de l'API OpenGL. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.WebGLRenderingContext.getAttribLocation")}}</p>
+{{Compat("api.WebGLRenderingContext.getAttribLocation")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("WebGLRenderingContext.getUniformLocation()")}}</li>
-</ul>
+- {{domxref("WebGLRenderingContext.getUniformLocation()")}}
diff --git a/files/fr/web/api/webglrenderingcontext/geterror/index.md b/files/fr/web/api/webglrenderingcontext/geterror/index.md
index 1e3d624e40..cd310e0a29 100644
--- a/files/fr/web/api/webglrenderingcontext/geterror/index.md
+++ b/files/fr/web/api/webglrenderingcontext/geterror/index.md
@@ -9,97 +9,51 @@ tags:
   - WebGLRenderingContext
 translation_of: Web/API/WebGLRenderingContext/getError
 ---
-<div>{{APIRef("WebGL")}}</div>
-
-<p>La méthode <strong><code>WebGLRenderingContext.getError()</code></strong> de l'<a href="/fr-Fr/docs/Web/API/WebGL_API">API WebGL</a> retourne des informations d'erreur.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">GLenum <var>gl</var>.getError();
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<p>Aucun.</p>
-
-<h3 id="Valeur_retournée">Valeur retournée</h3>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Constante</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>gl.NO_ERROR</code></td>
-   <td>Aucune erreur n'a été enregistrée. La valeur de cette constante est 0.</td>
-  </tr>
-  <tr>
-   <td><code>gl.INVALID_ENUM</code></td>
-   <td>Une valeur non acceptable a été spécifiée pour un argument énuméré. La commande est ignorée et l'indicateur d'erreur est positionné.</td>
-  </tr>
-  <tr>
-   <td><code>gl.INVALID_VALUE</code></td>
-   <td>Un argument numérique est hors de sa plage. La commande est ignorée et l'indicateur d'erreur est positionné.</td>
-  </tr>
-  <tr>
-   <td><code>gl.INVALID_OPERATION</code></td>
-   <td>La commande indiquée n'est pas permise dans l'état courant. La commande est ignorée et l'indicateur d'erreur est positionné.</td>
-  </tr>
-  <tr>
-   <td><code>gl.INVALID_FRAMEBUFFER_OPERATION</code></td>
-   <td>Le tampon d'images actuellement lié n'est pas complet lors d'une tentative de rendu ou de relecture.</td>
-  </tr>
-  <tr>
-   <td><code>gl.OUT_OF_MEMORY</code></td>
-   <td>Plus assez de mémoire restante pour exécuter la commande.</td>
-  </tr>
-  <tr>
-   <td><code>gl.CONTEXT_LOST_WEBGL</code></td>
-   <td>Si le contexte WebGL est perdu, cette erreur est retournée lors du premier appel à <code>getError</code>. Après cela et jusqu'à ce que le contexte soit restauré, elle retourne <code>gl.NO_ERROR</code>.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">gl.getError(); // gl.NO_ERROR (0)
+{{APIRef("WebGL")}}
+
+La méthode **`WebGLRenderingContext.getError()`** de l'[API WebGL](/fr-Fr/docs/Web/API/WebGL_API) retourne des informations d'erreur.
+
+## Syntaxe
+
+    GLenum gl.getError();
+
+### Paramètres
+
+Aucun.
+
+### Valeur retournée
+
+| Constante                          | Description                                                                                                                                                                         |
+| ---------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `gl.NO_ERROR`                      | Aucune erreur n'a été enregistrée. La valeur de cette constante est 0.                                                                                                              |
+| `gl.INVALID_ENUM`                  | Une valeur non acceptable a été spécifiée pour un argument énuméré. La commande est ignorée et l'indicateur d'erreur est positionné.                                                |
+| `gl.INVALID_VALUE`                 | Un argument numérique est hors de sa plage. La commande est ignorée et l'indicateur d'erreur est positionné.                                                                        |
+| `gl.INVALID_OPERATION`             | La commande indiquée n'est pas permise dans l'état courant. La commande est ignorée et l'indicateur d'erreur est positionné.                                                        |
+| `gl.INVALID_FRAMEBUFFER_OPERATION` | Le tampon d'images actuellement lié n'est pas complet lors d'une tentative de rendu ou de relecture.                                                                                |
+| `gl.OUT_OF_MEMORY`                 | Plus assez de mémoire restante pour exécuter la commande.                                                                                                                           |
+| `gl.CONTEXT_LOST_WEBGL`            | Si le contexte WebGL est perdu, cette erreur est retournée lors du premier appel à `getError`. Après cela et jusqu'à ce que le contexte soit restauré, elle retourne `gl.NO_ERROR`. |
+
+## Exemples
+
+```js
+gl.getError(); // gl.NO_ERROR (0)
 
 gl.enable(gl.MACHINTRUC);
 gl.getError(); // gl.INVALID_ENUM;
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('WebGL', "#5.14.3", "getError")}}</td>
-   <td>{{Spec2('WebGL')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('OpenGL ES 2.0', "glGetError.xml", "glGetError")}}</td>
-   <td>{{Spec2('OpenGL ES 2.0')}}</td>
-   <td>Page man de l'API OpenGL.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.WebGLRenderingContext.getError")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("WebGLRenderingContext")}}</li>
- <li>{{domxref("WebGLContextEvent")}}</li>
-</ul>
+```
+
+## Spécifications
+
+| Spécification                                                                    | Statut                               | Commentaire               |
+| -------------------------------------------------------------------------------- | ------------------------------------ | ------------------------- |
+| {{SpecName('WebGL', "#5.14.3", "getError")}}                     | {{Spec2('WebGL')}}             | Définition initiale.      |
+| {{SpecName('OpenGL ES 2.0', "glGetError.xml", "glGetError")}} | {{Spec2('OpenGL ES 2.0')}} | Page man de l'API OpenGL. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.WebGLRenderingContext.getError")}}
+
+## Voir aussi
+
+- {{domxref("WebGLRenderingContext")}}
+- {{domxref("WebGLContextEvent")}}
diff --git a/files/fr/web/api/webglrenderingcontext/getshaderparameter/index.md b/files/fr/web/api/webglrenderingcontext/getshaderparameter/index.md
index 46c5369067..e89237d889 100644
--- a/files/fr/web/api/webglrenderingcontext/getshaderparameter/index.md
+++ b/files/fr/web/api/webglrenderingcontext/getshaderparameter/index.md
@@ -9,67 +9,47 @@ tags:
   - WebGLRenderingContext
 translation_of: Web/API/WebGLRenderingContext/getShaderParameter
 ---
-<div>{{APIRef("WebGL")}}</div>
-
-<p>La méthode <code>WebGLRenderingContext.getShaderParameter()</code> de l'API WebGL retourne des informations sur le shader donné.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">quelconque <var>gl</var>.getShaderParameter(<var>shader</var>, <var>nomp</var>);
-</pre>
-
-<h3 id="Parameters">Parameters</h3>
-
-<dl>
- <dt>shader</dt>
- <dd>Un {{domxref("WebGLShader")}} depuis lequel obtenir une information de paramètre.</dd>
- <dt>nomp</dt>
- <dd>Un {{domxref("Glenum")}} indiquant l'information à retrouver. Valeurs possibles :
- <ul>
-  <li><code>gl.DELETE_STATUS</code> : retourne un {{domxref("GLboolean")}} indicating si le shader est marqué pour suppression ou non.</li>
-  <li><code>gl.COMPILE_STATUS</code> : retourne un {{domxref("GLboolean")}} indiquant si la dernière compilation du shader a réussi ou non.</li>
-  <li><code>gl.SHADER_TYPE</code> : retourne un {{domxref("GLenum")}} indiquant si le shader est un objet shader de sommets (<code>gl.VERTEX_SHADER</code>) ou shader de fragment (<code>gl.FRAGMENT_SHADER</code>).</li>
- </ul>
- </dd>
-</dl>
-
-<h3 id="Valeur_retournée">Valeur retournée</h3>
-
-<p>Retourne l'information de shader demandée (telle qu'indiquée par <code>nomp</code>).</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">gl.getShaderParameter(shader, gl.SHADER_TYPE);
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('WebGL', "#5.14.9", "getShaderParameter")}}</td>
-   <td>{{Spec2('WebGL')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('OpenGL ES 2.0', "glGetShaderiv.xml", "glGetShaderiv")}}</td>
-   <td>{{Spec2('OpenGL ES 2.0')}}</td>
-   <td>Page man de l'API OpenGL (similaire).</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.WebGLRenderingContext.getShaderParameter")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("WebGLRenderingContext.getProgramParameter()")}}</li>
-</ul>
+{{APIRef("WebGL")}}
+
+La méthode `WebGLRenderingContext.getShaderParameter()` de l'API WebGL retourne des informations sur le shader donné.
+
+## Syntaxe
+
+    quelconque gl.getShaderParameter(shader, nomp);
+
+### Parameters
+
+- shader
+  - : Un {{domxref("WebGLShader")}} depuis lequel obtenir une information de paramètre.
+- nomp
+
+  - : Un {{domxref("Glenum")}} indiquant l'information à retrouver. Valeurs possibles :
+
+    - `gl.DELETE_STATUS` : retourne un {{domxref("GLboolean")}} indicating si le shader est marqué pour suppression ou non.
+    - `gl.COMPILE_STATUS` : retourne un {{domxref("GLboolean")}} indiquant si la dernière compilation du shader a réussi ou non.
+    - `gl.SHADER_TYPE` : retourne un {{domxref("GLenum")}} indiquant si le shader est un objet shader de sommets (`gl.VERTEX_SHADER`) ou shader de fragment (`gl.FRAGMENT_SHADER`).
+
+### Valeur retournée
+
+Retourne l'information de shader demandée (telle qu'indiquée par `nomp`).
+
+## Exemples
+
+```js
+gl.getShaderParameter(shader, gl.SHADER_TYPE);
+```
+
+## Spécifications
+
+| Spécification                                                                            | Statut                               | Commentaire                           |
+| ---------------------------------------------------------------------------------------- | ------------------------------------ | ------------------------------------- |
+| {{SpecName('WebGL', "#5.14.9", "getShaderParameter")}}                 | {{Spec2('WebGL')}}             | Définition initiale.                  |
+| {{SpecName('OpenGL ES 2.0', "glGetShaderiv.xml", "glGetShaderiv")}} | {{Spec2('OpenGL ES 2.0')}} | Page man de l'API OpenGL (similaire). |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.WebGLRenderingContext.getShaderParameter")}}
+
+## Voir aussi
+
+- {{domxref("WebGLRenderingContext.getProgramParameter()")}}
diff --git a/files/fr/web/api/webglrenderingcontext/gettexparameter/index.md b/files/fr/web/api/webglrenderingcontext/gettexparameter/index.md
index a153da3ba0..38342d8c00 100644
--- a/files/fr/web/api/webglrenderingcontext/gettexparameter/index.md
+++ b/files/fr/web/api/webglrenderingcontext/gettexparameter/index.md
@@ -10,190 +10,194 @@ tags:
   - WebGLRenderingContext
 translation_of: Web/API/WebGLRenderingContext/getTexParameter
 ---
-<div>{{APIRef("WebGL")}}</div>
-
-<p>La méthode <strong><code>WebGLRenderingContext.getTexParameter()</code></strong> de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> retourne des informations concernant la texture indiquée.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">quelconque <var>gl</var>.getTexParameter(<var>cible</var>, <var>nomp</var>);
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt>cible</dt>
- <dd>Un {{domxref("GLenum")}} indiquant le point de liaison (cible). Valeurs possibles :
- <ul>
-  <li><code>gl.TEXTURE_2D</code> : une texture bi-dimensionnelle.</li>
-  <li><code>gl.TEXTURE_CUBE_MAP</code> : une texture appliquée à un cube.</li>
-  <li>Lorsqu' un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}} est utilisé, les valeurs suivantes sont en outre disponibles :
-   <ul>
-    <li><code>gl.TEXTURE_3D</code> : une texture tri-dimensionnelle.</li>
-    <li><code>gl.TEXTURE_2D_ARRAY</code> : une texture bi-dimensionnelle en tableau.</li>
-   </ul>
-  </li>
- </ul>
- </dd>
- <dt>nomp</dt>
- <dd>Un {{domxref("Glenum")}} indiquant l'information à obtenir. Valeurs possibles :
- <table class="standard-table">
-  <thead>
-   <tr>
-    <th scope="col">nomp</th>
-    <th scope="col">Type retourné</th>
-    <th scope="col">Description</th>
-    <th scope="col">Valeurs retournées possibles</th>
-   </tr>
-  </thead>
-  <tbody>
-   <tr>
-    <th colspan="4">Disponible dans un contexte WebGL 1</th>
-   </tr>
-   <tr>
-    <td><code>gl.TEXTURE_MAG_FILTER</code></td>
-    <td>{{domxref("GLenum")}}</td>
-    <td>Filtre de grossissement de texture</td>
-    <td><code>gl.LINEAR</code> (valeur par défaut), <code>gl.NEAREST</code>.</td>
-   </tr>
-   <tr>
-    <td><code>gl.TEXTURE_MIN_FILTER</code></td>
-    <td>{{domxref("GLenum")}}</td>
-    <td>Filtre de réduction de texture</td>
-    <td><code>gl.LINEAR</code>, <code>gl.NEAREST</code>, <code>gl.NEAREST_MIPMAP_NEAREST</code>, <code>gl.LINEAR_MIPMAP_NEAREST</code>, <code>gl.NEAREST</code>_MIPMAP_LINEAR (valeur par défaut), <code>gl.LINEAR_MIPMAP_LINEAR</code>.</td>
-   </tr>
-   <tr>
-    <td><code>gl.TEXTURE_WRAP_S</code></td>
-    <td>{{domxref("GLenum")}}</td>
-    <td>Fonction d'emballage pour la coordonnée de texture <code>s</code></td>
-    <td><code>gl.REPEAT</code> (valeur par défaut), <code>gl.CLAMP_TO_EDGE</code>, <code>gl.MIRRORED_REPEAT</code>.</td>
-   </tr>
-   <tr>
-    <td><code>gl.TEXTURE_WRAP_T</code></td>
-    <td>{{domxref("GLenum")}}</td>
-    <td>Fonction d'emballage pour la coordonnée de texture <code>t</code></td>
-    <td><code>gl.REPEAT</code> (valeur par défaut), <code>gl.CLAMP_TO_EDGE</code>, <code>gl.MIRRORED_REPEAT</code>.</td>
-   </tr>
-   <tr>
-    <th colspan="4">Disponible en outre lorsque l'extension {{domxref("EXT_texture_filter_anisotropic")}} est utilisée</th>
-   </tr>
-   <tr>
-    <td><code>ext.TEXTURE_MAX_ANISOTROPY_EXT</code></td>
-    <td>{{domxref("GLfloat")}}</td>
-    <td>Anisotropie maximum pour une texture</td>
-    <td>Toutes valeurs float.</td>
-   </tr>
-   <tr>
-    <th colspan="4">Disponible en outre lorsqu'un contexte WebGL 2 est utilisé</th>
-   </tr>
-   <tr>
-    <td><code>gl.TEXTURE_BASE_LEVEL</code></td>
-    <td>{{domxref("GLint")}}</td>
-    <td>Niveau  de mipmap de texture</td>
-    <td>Toutes valeurs int.</td>
-   </tr>
-   <tr>
-    <td><code>gl.TEXTURE_COMPARE_FUNC</code></td>
-    <td>{{domxref("GLenum")}}</td>
-    <td>Fonction de comparaison</td>
-    <td><code>gl.LEQUAL</code> (valeurs par défaut), <code>gl.GEQUAL</code>, <code>gl.LESS</code>, <code>gl.GREATER</code>, <code>gl.EQUAL</code>, <code>gl.NOTEQUAL</code>, <code>gl.ALWAYS</code>, <code>gl.NEVER</code>.</td>
-   </tr>
-   <tr>
-    <td><code>gl.TEXTURE_COMPARE_MODE</code></td>
-    <td>{{domxref("GLenum")}}</td>
-    <td>Mode de comparaison de texture</td>
-    <td><code>gl.NONE</code> (valeur par défaut), <code>gl.COMPARE_REF_TO_TEXTURE</code>.</td>
-   </tr>
-   <tr>
-    <td><code>gl.TEXTURE_IMMUTABLE_FORMAT</code></td>
-    <td>{{domxref("GLboolean")}}</td>
-    <td>Immuabilité du format et de la taille de la texture</td>
-    <td>true ou false.</td>
-   </tr>
-   <tr>
-    <td><code>gl.TEXTURE_IMMUTABLE_LEVELS</code></td>
-    <td>{{domxref("GLuint")}}</td>
-    <td>?</td>
-    <td>Toutes valeurs uint.</td>
-   </tr>
-   <tr>
-    <td><code>gl.TEXTURE_MAX_LEVEL</code></td>
-    <td>{{domxref("GLint")}}</td>
-    <td>Niveau maximum  de mipmap de texture en tableau</td>
-    <td>Toutes valeurs int.</td>
-   </tr>
-   <tr>
-    <td><code>gl.TEXTURE_MAX_LOD</code></td>
-    <td>{{domxref("GLfloat")}}</td>
-    <td>Valeur de niveau-de-détail maximum de texture</td>
-    <td>Toutes valeurs float.</td>
-   </tr>
-   <tr>
-    <td><code>gl.TEXTURE_MIN_LOD</code></td>
-    <td>{{domxref("GLfloat")}}</td>
-    <td>Valeur de niveau-de-détail minimum de texture</td>
-    <td>Toutes valeurs float.</td>
-   </tr>
-   <tr>
-    <td><code>gl.TEXTURE_WRAP_R</code></td>
-    <td>{{domxref("GLenum")}}</td>
-    <td>Fonction d'emballage pour la coordonnée de texture  <code>r</code></td>
-    <td><code>gl.REPEAT</code> (valeur par défaut), <code>gl.CLAMP_TO_EDGE</code>, <code>gl.MIRRORED_REPEAT</code>.</td>
-   </tr>
-  </tbody>
- </table>
- </dd>
-</dl>
-
-<h3 id="Valeur_retournée">Valeur retournée</h3>
-
-<p>Retourne l'information de texture demandée (telle qu'indiquée par <code>nomp</code>). Si une erreur se produit, {{jsxref("null")}} est retourné.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">gl.getTexParameter(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER);
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('WebGL', "#5.14.8", "getTexParameter")}}</td>
-   <td>{{Spec2('WebGL')}}</td>
-   <td>Définition initiale pour WebGL.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('OpenGL ES 2.0', "glGetTexParameter.xml", "glGetTexParameter")}}</td>
-   <td>{{Spec2('OpenGL ES 2.0')}}</td>
-   <td>Page man de l'API OpenGL ES 2.0 (similaire).</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('WebGL2', "#3.7.6", "getTexParameter")}}</td>
-   <td>{{Spec2('WebGL2')}}</td>
-   <td>Définition mise à jour pour WebGL.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('OpenGL ES 3.0', "glGetTexParameter.xhtml", "glGetTexParameter")}}</td>
-   <td>{{Spec2('OpenGL ES 3.0')}}</td>
-   <td>Page man de l'API OpenGL ES 3.0 (similaire).</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.WebGLRenderingContext.getTexParameter")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("WebGLRenderingContext.texParameter", "WebGLRenderingContext.texParameterf()")}}</li>
- <li>{{domxref("WebGLRenderingContext.texParameter", "WebGLRenderingContext.texParameteri()")}}</li>
- <li>{{domxref("EXT_texture_filter_anisotropic")}}</li>
-</ul>
+{{APIRef("WebGL")}}
+
+La méthode **`WebGLRenderingContext.getTexParameter()`** de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) retourne des informations concernant la texture indiquée.
+
+## Syntaxe
+
+    quelconque gl.getTexParameter(cible, nomp);
+
+### Paramètres
+
+- cible
+
+  - : Un {{domxref("GLenum")}} indiquant le point de liaison (cible). Valeurs possibles :
+
+    - `gl.TEXTURE_2D` : une texture bi-dimensionnelle.
+    - `gl.TEXTURE_CUBE_MAP` : une texture appliquée à un cube.
+    - Lorsqu' un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}} est utilisé, les valeurs suivantes sont en outre disponibles :
+
+      - `gl.TEXTURE_3D` : une texture tri-dimensionnelle.
+      - `gl.TEXTURE_2D_ARRAY` : une texture bi-dimensionnelle en tableau.
+
+- nomp
+
+  - : Un {{domxref("Glenum")}} indiquant l'information à obtenir. Valeurs possibles :
+
+    <table class="standard-table">
+      <thead>
+        <tr>
+          <th scope="col">nomp</th>
+          <th scope="col">Type retourné</th>
+          <th scope="col">Description</th>
+          <th scope="col">Valeurs retournées possibles</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <th colspan="4">Disponible dans un contexte WebGL 1</th>
+        </tr>
+        <tr>
+          <td><code>gl.TEXTURE_MAG_FILTER</code></td>
+          <td>{{domxref("GLenum")}}</td>
+          <td>Filtre de grossissement de texture</td>
+          <td>
+            <code>gl.LINEAR</code> (valeur par défaut), <code>gl.NEAREST</code>.
+          </td>
+        </tr>
+        <tr>
+          <td><code>gl.TEXTURE_MIN_FILTER</code></td>
+          <td>{{domxref("GLenum")}}</td>
+          <td>Filtre de réduction de texture</td>
+          <td>
+            <code>gl.LINEAR</code>, <code>gl.NEAREST</code>,
+            <code>gl.NEAREST_MIPMAP_NEAREST</code>,
+            <code>gl.LINEAR_MIPMAP_NEAREST</code>,
+            <code>gl.NEAREST</code>_MIPMAP_LINEAR (valeur par défaut),
+            <code>gl.LINEAR_MIPMAP_LINEAR</code>.
+          </td>
+        </tr>
+        <tr>
+          <td><code>gl.TEXTURE_WRAP_S</code></td>
+          <td>{{domxref("GLenum")}}</td>
+          <td>Fonction d'emballage pour la coordonnée de texture <code>s</code></td>
+          <td>
+            <code>gl.REPEAT</code> (valeur par défaut),
+            <code>gl.CLAMP_TO_EDGE</code>, <code>gl.MIRRORED_REPEAT</code>.
+          </td>
+        </tr>
+        <tr>
+          <td><code>gl.TEXTURE_WRAP_T</code></td>
+          <td>{{domxref("GLenum")}}</td>
+          <td>Fonction d'emballage pour la coordonnée de texture <code>t</code></td>
+          <td>
+            <code>gl.REPEAT</code> (valeur par défaut),
+            <code>gl.CLAMP_TO_EDGE</code>, <code>gl.MIRRORED_REPEAT</code>.
+          </td>
+        </tr>
+        <tr>
+          <th colspan="4">
+            Disponible en outre lorsque l'extension
+            {{domxref("EXT_texture_filter_anisotropic")}} est
+            utilisée
+          </th>
+        </tr>
+        <tr>
+          <td><code>ext.TEXTURE_MAX_ANISOTROPY_EXT</code></td>
+          <td>{{domxref("GLfloat")}}</td>
+          <td>Anisotropie maximum pour une texture</td>
+          <td>Toutes valeurs float.</td>
+        </tr>
+        <tr>
+          <th colspan="4">
+            Disponible en outre lorsqu'un contexte WebGL 2 est utilisé
+          </th>
+        </tr>
+        <tr>
+          <td><code>gl.TEXTURE_BASE_LEVEL</code></td>
+          <td>{{domxref("GLint")}}</td>
+          <td>Niveau  de mipmap de texture</td>
+          <td>Toutes valeurs int.</td>
+        </tr>
+        <tr>
+          <td><code>gl.TEXTURE_COMPARE_FUNC</code></td>
+          <td>{{domxref("GLenum")}}</td>
+          <td>Fonction de comparaison</td>
+          <td>
+            <code>gl.LEQUAL</code> (valeurs par défaut), <code>gl.GEQUAL</code>,
+            <code>gl.LESS</code>, <code>gl.GREATER</code>, <code>gl.EQUAL</code>,
+            <code>gl.NOTEQUAL</code>, <code>gl.ALWAYS</code>, <code>gl.NEVER</code>.
+          </td>
+        </tr>
+        <tr>
+          <td><code>gl.TEXTURE_COMPARE_MODE</code></td>
+          <td>{{domxref("GLenum")}}</td>
+          <td>Mode de comparaison de texture</td>
+          <td>
+            <code>gl.NONE</code> (valeur par défaut),
+            <code>gl.COMPARE_REF_TO_TEXTURE</code>.
+          </td>
+        </tr>
+        <tr>
+          <td><code>gl.TEXTURE_IMMUTABLE_FORMAT</code></td>
+          <td>{{domxref("GLboolean")}}</td>
+          <td>Immuabilité du format et de la taille de la texture</td>
+          <td>true ou false.</td>
+        </tr>
+        <tr>
+          <td><code>gl.TEXTURE_IMMUTABLE_LEVELS</code></td>
+          <td>{{domxref("GLuint")}}</td>
+          <td>?</td>
+          <td>Toutes valeurs uint.</td>
+        </tr>
+        <tr>
+          <td><code>gl.TEXTURE_MAX_LEVEL</code></td>
+          <td>{{domxref("GLint")}}</td>
+          <td>Niveau maximum  de mipmap de texture en tableau</td>
+          <td>Toutes valeurs int.</td>
+        </tr>
+        <tr>
+          <td><code>gl.TEXTURE_MAX_LOD</code></td>
+          <td>{{domxref("GLfloat")}}</td>
+          <td>Valeur de niveau-de-détail maximum de texture</td>
+          <td>Toutes valeurs float.</td>
+        </tr>
+        <tr>
+          <td><code>gl.TEXTURE_MIN_LOD</code></td>
+          <td>{{domxref("GLfloat")}}</td>
+          <td>Valeur de niveau-de-détail minimum de texture</td>
+          <td>Toutes valeurs float.</td>
+        </tr>
+        <tr>
+          <td><code>gl.TEXTURE_WRAP_R</code></td>
+          <td>{{domxref("GLenum")}}</td>
+          <td>
+            Fonction d'emballage pour la coordonnée de texture  <code>r</code>
+          </td>
+          <td>
+            <code>gl.REPEAT</code> (valeur par défaut),
+            <code>gl.CLAMP_TO_EDGE</code>, <code>gl.MIRRORED_REPEAT</code>.
+          </td>
+        </tr>
+      </tbody>
+    </table>
+
+### Valeur retournée
+
+Retourne l'information de texture demandée (telle qu'indiquée par `nomp`). Si une erreur se produit, {{jsxref("null")}} est retourné.
+
+## Exemples
+
+```js
+gl.getTexParameter(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER);
+```
+
+## Spécifications
+
+| Spécification                                                                                            | Statut                               | Commentaire                                  |
+| -------------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------------------------------- |
+| {{SpecName('WebGL', "#5.14.8", "getTexParameter")}}                                     | {{Spec2('WebGL')}}             | Définition initiale pour WebGL.              |
+| {{SpecName('OpenGL ES 2.0', "glGetTexParameter.xml", "glGetTexParameter")}}     | {{Spec2('OpenGL ES 2.0')}} | Page man de l'API OpenGL ES 2.0 (similaire). |
+| {{SpecName('WebGL2', "#3.7.6", "getTexParameter")}}                                     | {{Spec2('WebGL2')}}             | Définition mise à jour pour WebGL.           |
+| {{SpecName('OpenGL ES 3.0', "glGetTexParameter.xhtml", "glGetTexParameter")}} | {{Spec2('OpenGL ES 3.0')}} | Page man de l'API OpenGL ES 3.0 (similaire). |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.WebGLRenderingContext.getTexParameter")}}
+
+## Voir aussi
+
+- {{domxref("WebGLRenderingContext.texParameter", "WebGLRenderingContext.texParameterf()")}}
+- {{domxref("WebGLRenderingContext.texParameter", "WebGLRenderingContext.texParameteri()")}}
+- {{domxref("EXT_texture_filter_anisotropic")}}
diff --git a/files/fr/web/api/webglrenderingcontext/getuniformlocation/index.md b/files/fr/web/api/webglrenderingcontext/getuniformlocation/index.md
index 89393bd4f7..27f389fd28 100644
--- a/files/fr/web/api/webglrenderingcontext/getuniformlocation/index.md
+++ b/files/fr/web/api/webglrenderingcontext/getuniformlocation/index.md
@@ -14,70 +14,51 @@ tags:
   - getUniformLocation
 translation_of: Web/API/WebGLRenderingContext/getUniformLocation
 ---
-<div>{{APIRef("WebGL")}}</div>
+{{APIRef("WebGL")}}Faisant partie de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API), la méthode {{domxref("WebGLRenderingContext")}} **`getUniformLocation()`** retourne l'emplacement d'une variable **uniform** particulière appartenant au {{domxref ("WebGLProgram")}} indiqué. La variable uniform est retournée sous la forme d'un objet {{domxref("WebGLUniformLocation")}}, qui est un identificateur opaque utilisé pour indiquer où se trouve la variable uniform dans la mémoire de la GPU. Une fois que vous avez l'emplacement de l'uniform, vous pouvez accéder à l'uniform lui-même en utilisant l'une des autres méthodes d'accès uniform, en passant l'emplacement de l'uniform comme l'une des entrées :
 
-<div>Faisant partie de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a>, la méthode {{domxref("WebGLRenderingContext")}} <code><strong>getUniformLocation()</strong></code> retourne l'emplacement d'une variable <strong>uniform</strong> particulière appartenant au {{domxref ("WebGLProgram")}} indiqué. La variable uniform est retournée sous la forme d'un objet {{domxref("WebGLUniformLocation")}}, qui est un identificateur opaque utilisé pour indiquer où se trouve la variable uniform dans la mémoire de la GPU.</div>
+- {{domxref ("WebGLRenderingContext.getUniform", "getUniform()")}}
+  - : Retourne la valeur de l'uniform à l'emplacement indiqué.
+- {{domxref ("WebGLRenderingContext.uniform", "uniform[1234] [fi] [v]()")}}
+  - : Affecte à la valeur de l'uniform la valeur spécifiée, qui peut être un nombre flottant ou entier unique, ou un vecteur de 2 à 4 composantes spécifié soit comme une liste de valeurs, soit comme un {{jsxref ("Float32Array")}} ou un {{ jsxref ("Int32Array")}}.
+- {{domxref ("WebGLRenderingContext.uniformMatrix", "uniformMatrix[234][fv]()")}}
+  - : Affecte à la valeur de l'uniforme la matrice spécifiée, éventuellement avec transposition. La valeur est représentée comme une suite de valeurs GLfloat ou comme un Float32Array.
 
-<div> </div>
+L'uniform lui-même est déclaré dans le programme shader en utilisant GLSL.
 
-<div>Une fois que vous avez l'emplacement de l'uniform, vous pouvez accéder à l'uniform lui-même en utilisant l'une des autres méthodes d'accès uniform, en passant l'emplacement de l'uniform comme l'une des entrées :</div>
+## Syntaxe
 
-<div> </div>
+    WebGLUniformLocation = WebGLRenderingContext.getUniformLocation(programme, nom);
 
-<dl>
- <dt>{{domxref ("WebGLRenderingContext.getUniform", "getUniform()")}}</dt>
- <dd>Retourne la valeur de l'uniform à l'emplacement indiqué.</dd>
- <dt><br>
- {{domxref ("WebGLRenderingContext.uniform", "uniform[1234] [fi] [v]()")}}</dt>
- <dd>Affecte à la valeur de l'uniform la valeur spécifiée, qui peut être un nombre flottant ou entier unique, ou un vecteur de 2 à 4 composantes spécifié soit comme une liste de valeurs, soit comme un {{jsxref ("Float32Array")}} ou un {{ jsxref ("Int32Array")}}.</dd>
- <dt><br>
- {{domxref ("WebGLRenderingContext.uniformMatrix", "uniformMatrix[234][fv]()")}}</dt>
- <dd>Affecte à la valeur de l'uniforme la matrice spécifiée, éventuellement avec transposition. La valeur est représentée comme une suite de valeurs GLfloat ou comme un Float32Array.</dd>
-</dl>
+### Paramètres
 
-<p><br>
- L'uniform lui-même est déclaré dans le programme shader en utilisant GLSL.</p>
+- `programme`
+  - : Le {{domxref ("WebGLProgram")}} dans lequel localiser la variable uniform indiquée.
+- `nom`
+  - : Une {{domxref ("DOMString")}} indiquant le nom de la variable uniform dont l'emplacement doit être retourné. Le nom ne peut contenir aucun espace, et vous ne pouvez pas utiliser cette fonction pour obtenir l'emplacement d'aucun uniform commençant par la chaîne réservée `"gl_"`, du fait que ceux-ci sont internes à la couche WebGL.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+### Valeur retournée
 
-<pre class="syntaxbox"><em>WebGLUniformLocation</em> = <em>WebGLRenderingContext</em>.getUniformLocation(<em>programme</em>, <em>nom</em>);
-</pre>
+Une valeur {{domxref ("WebGLUniformLocation")}} indiquant l'emplacement de la variable nommée, si elle existe. Si la variable indiquée n'existe pas, {{jsxref("null")}} est retourné à la place.
 
-<h3 id="Paramètres">Paramètres</h3>
+`WebGLUniformLocation` est une valeur opaque utilisée pour identifier de manière unique l'emplacement dans la mémoire de la GPU auquel se trouve la variable uniform. Avec cette valeur en main, vous pouvez appeler d'autres méthodes WebGL pour accéder à la valeur de la variable uniform.
 
-<dl>
- <dt><code>programme</code></dt>
- <dd>Le {{domxref ("WebGLProgram")}} dans lequel localiser la variable uniform indiquée.</dd>
- <dt><code>nom</code></dt>
- <dd>Une {{domxref ("DOMString")}} indiquant le nom de la variable uniform dont l'emplacement doit être retourné. Le nom ne peut contenir aucun espace, et vous ne pouvez pas utiliser cette fonction pour obtenir l'emplacement d'aucun uniform commençant par la chaîne réservée <code>"gl_"</code>, du fait que ceux-ci sont internes à la couche WebGL.</dd>
-</dl>
+> **Note :** Le type `WebGLUniformLocation` est compatible avec le type `GLint` pour indiquer l'indice ou l'emplacement d'un attribut uniform.
 
-<h3 id="Valeur_retournée">Valeur retournée</h3>
+### Erreurs
 
-<p>Une valeur {{domxref ("WebGLUniformLocation")}} indiquant l'emplacement de la variable nommée, si elle existe. Si la variable indiquée n'existe pas, {{jsxref("null")}} est retourné à la place.</p>
+Les erreurs suivantes peuvent se produire ; pour vérifier les erreurs après le retour de getUniformLocation(), appelez {{domxref ("WebGLRenderingContext.getError", "getError()")}}.
 
-<p><code>WebGLUniformLocation</code> est une valeur opaque utilisée pour identifier de manière unique l'emplacement dans la mémoire de la GPU auquel se trouve la variable uniform. Avec cette valeur en main, vous pouvez appeler d'autres méthodes WebGL pour accéder à la valeur de la variable uniform.</p>
+- GL_INVALID_VALUE
+  - : Le paramètre `programme` n'est pas une valeur ou un objet généré par WebGL.
+- GL_INVALID_OPERATION
+  - : Le paramètre `programme` ne correspond pas à un programme GLSL généré par WebGL, ou le programme indiqué n'a pas été lié avec succès.
 
-<div class="note">
-<p><strong>Note :</strong> Le type <code>WebGLUniformLocation</code> est compatible avec le type <code>GLint</code> pour indiquer l'indice ou l'emplacement d'un attribut uniform.</p>
-</div>
+## Exemple
 
-<h3 id="Erreurs">Erreurs</h3>
+Dans cet exemple, extrait de la méthode `animateScene()` dans l'article [Un exemple d'animation 2D WebGL de base](/fr-FR/docs/Web/API/WebGL_API/Basic_2D_animation_example#Drawing_and_animating_the_scene), retrouve les emplacements de trois uniforms du programme d'ombrage, puis définit la valeur de chacun des trois uniforms.
 
-<p>Les erreurs suivantes peuvent se produire ; pour vérifier les erreurs après le retour de getUniformLocation(), appelez {{domxref ("WebGLRenderingContext.getError", "getError()")}}.</p>
-
-<dl>
- <dt>GL_INVALID_VALUE</dt>
- <dd>Le paramètre <code>programme</code> n'est pas une valeur ou un objet généré par WebGL.</dd>
- <dt>GL_INVALID_OPERATION</dt>
- <dd>Le paramètre <code>programme</code> ne correspond pas à un programme GLSL généré par WebGL, ou le programme indiqué n'a pas été lié avec succès.</dd>
-</dl>
-
-<h2 id="Exemple">Exemple</h2>
-
-<p>Dans cet exemple, extrait de la méthode <code>animateScene()</code> dans l'article <a href="/fr-FR/docs/Web/API/WebGL_API/Basic_2D_animation_example#Drawing_and_animating_the_scene">Un exemple d'animation 2D WebGL de base</a>, retrouve les emplacements de trois uniforms du programme d'ombrage, puis définit la valeur de chacun des trois uniforms.</p>
-
-<pre class="brush: js">gl.useProgram(programmeShader);
+```js
+gl.useProgram(programmeShader);
 
 uScalingFactor =
     gl.getUniformLocation(programmeShader, "uScalingFactor");
@@ -88,55 +69,52 @@ uRotationVector =
 
 gl.uniform2fv(uScalingFactor, currentScale);
 gl.uniform2fv(uRotationVector, currentRotation);
-gl.uniform4fv(uGlobalColor, [0.1, 0.7, 0.2, 1.0]);</pre>
+gl.uniform4fv(uGlobalColor, [0.1, 0.7, 0.2, 1.0]);
+```
 
-<div class="note">
-  <p><strong>Note :</strong> Cet extrait de code provient de <a href="/fr-FR/docs/Web/API/WebGL_API/Basic_2D_animation_example#Drawing_and_animating_the_scene">la fonction animateScene()</a> dans "Un exemple d'animation WebGL 2D de base". Voir cet article pour l'exemple complet et pour voir l'animation résultante en action.</p>
-</div>
+> **Note :** Cet extrait de code provient de [la fonction animateScene()](/fr-FR/docs/Web/API/WebGL_API/Basic_2D_animation_example#Drawing_and_animating_the_scene) dans "Un exemple d'animation WebGL 2D de base". Voir cet article pour l'exemple complet et pour voir l'animation résultante en action.
 
-<p>Après avoir défini le programme d'ombrage en cours comme <code>programmeShader</code>, ce code récupère les trois uniforms <code>"uScalingFactor"</code>, <code>"uGlobalColor"</code> et <code>"uRotationVector"</code>, en appelant <code>getUniformLocation()</code> une fois pour chaque uniform.</p>
+Après avoir défini le programme d'ombrage en cours comme `programmeShader`, ce code récupère les trois uniforms `"uScalingFactor"`, `"uGlobalColor"` et `"uRotationVector"`, en appelant `getUniformLocation()` une fois pour chaque uniform.
 
-<p>Ensuite, les valeurs des trois uniforms sont définies :</p>
+Ensuite, les valeurs des trois uniforms sont définies :
 
-<ul>
- <li>L'uniform <code>uScalingFactor</code> - un sommet à 2 composantes - reçoit les facteurs d'échelle horizontale et verticale à partir de la variable <code>currentScale</code>.</li>
- <li>L'uniform <code>uRotationVector</code> reçoit le contenu de la variable <code>currentRotation</code>. C'est également un sommet à deux composantes.</li>
- <li>Enfin, l'uniform <code>uGlobalColor</code> reçoit la couleur <code>[0.1, 0.7, 0.2, 1.0]</code>, les composants de ce vecteur à quatre composants représentant respectivement les valeurs rouge, vert, bleu et alpha.</li>
-</ul>
+- L'uniform `uScalingFactor` - un sommet à 2 composantes - reçoit les facteurs d'échelle horizontale et verticale à partir de la variable `currentScale`.
+- L'uniform `uRotationVector` reçoit le contenu de la variable `currentRotation`. C'est également un sommet à deux composantes.
+- Enfin, l'uniform `uGlobalColor` reçoit la couleur `[0.1, 0.7, 0.2, 1.0]`, les composants de ce vecteur à quatre composants représentant respectivement les valeurs rouge, vert, bleu et alpha.
 
-<p>Cela fait, la prochaine fois que les fonctions d'ombrage seront appelées, leurs propres variables nommées <code>uScalingFactor</code>, <code>uGlobalColor</code> et <code>uRotationVector</code> auront toutes les valeurs fournies par le code JavaScript.</p>
+Cela fait, la prochaine fois que les fonctions d'ombrage seront appelées, leurs propres variables nommées `uScalingFactor`, `uGlobalColor` et `uRotationVector` auront toutes les valeurs fournies par le code JavaScript.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('WebGL', "#5.14.10", "getUniformLocation")}}</td>
-   <td>{{Spec2('WebGL')}}</td>
-   <td>
-    <p>Définition initiale.</p>
-   </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('OpenGL ES 2.0', "glGetUniformLocation.xml", "glGetUniformLocation")}}</td>
-   <td>{{Spec2('OpenGL ES 2.0')}}</td>
-   <td>Page man de l’API OpenGL.</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="col">Spécification</th>
+      <th scope="col">Statut</th>
+      <th scope="col">Commentaire</th>
+    </tr>
+    <tr>
+      <td>
+        {{SpecName('WebGL', "#5.14.10", "getUniformLocation")}}
+      </td>
+      <td>{{Spec2('WebGL')}}</td>
+      <td><p>Définition initiale.</p></td>
+    </tr>
+    <tr>
+      <td>
+        {{SpecName('OpenGL ES 2.0', "glGetUniformLocation.xml", "glGetUniformLocation")}}
+      </td>
+      <td>{{Spec2('OpenGL ES 2.0')}}</td>
+      <td>Page man de l’API OpenGL.</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.WebGLRenderingContext.getUniformLocation")}}</p>
+{{Compat("api.WebGLRenderingContext.getUniformLocation")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("WebGLRenderingContext.getAttribLocation()")}}</li>
- <li>{{domxref("WebGLUniformLocation")}}</li>
-</ul>
+- {{domxref("WebGLRenderingContext.getAttribLocation()")}}
+- {{domxref("WebGLUniformLocation")}}
diff --git a/files/fr/web/api/webglrenderingcontext/index.md b/files/fr/web/api/webglrenderingcontext/index.md
index 437dbe6f19..4fd4ec5792 100644
--- a/files/fr/web/api/webglrenderingcontext/index.md
+++ b/files/fr/web/api/webglrenderingcontext/index.md
@@ -8,360 +8,320 @@ tags:
   - WebGLRenderingContext
 translation_of: Web/API/WebGLRenderingContext
 ---
-<div>{{APIRef("WebGL")}}</div>
+{{APIRef("WebGL")}}L'interface **WebGLRenderingContext** fournit le contexte de rendu OpenGL ES 2.0 pour le dessin d'une suface dans un élément HTML {{HTMLElement("canvas")}}**.**
 
-<div>L'interface <strong>WebGLRenderingContext</strong> fournit le contexte de rendu OpenGL ES 2.0 pour le dessin d'une suface dans un élément HTML {{HTMLElement("canvas")}}<strong>.</strong></div>
+Pour obtenir une instance de cette interface, appelez {{domxref("HTMLCanvasElement.getContext()", "getContext()")}} sur un élément `<canvas>`, en spécifiant "webgl" en paramètre :
 
-<div> </div>
-
-<p>Pour obtenir une instance de cette interface, appelez {{domxref("HTMLCanvasElement.getContext()", "getContext()")}} sur un élément <code>&lt;canvas&gt;</code>, en spécifiant "webgl" en paramètre :</p>
-
-<pre class="brush: js">var canvas = document.getElementById('myCanvas');
+```js
+var canvas = document.getElementById('myCanvas');
 var gl = canvas.getContext('webgl');
-</pre>
-
-<p>Une fois que avez le contexte de rendu WebGL, vous pouvez dessiner à l'intérieur.</p>
-
-<p>Le <a href="/fr/docs/Web/API/WebGL_API/Tutorial">tutoriel WebGL</a> contient plus d'informations, d'exemples, et de ressources sur comment débuter en WebGL.</p>
-
-<h2 id="Constants">Constants</h2>
-
-<p>See the <a href="/en-US/docs/Web/API/WebGL_API/Constants">WebGL constants</a> page.</p>
-
-<h2 id="The_WebGL_context">The WebGL context</h2>
-
-<p>The following properties and methods provide general information and functionality to deal with the WebGL context:</p>
-
-<dl>
- <dt>{{domxref("WebGLRenderingContext.canvas")}}</dt>
- <dd>A read-only back-reference to the {{domxref("HTMLCanvasElement")}}. Might be {{jsxref("null")}} if it is not associated with a {{HTMLElement("canvas")}} element.</dd>
- <dt>{{domxref("WebGLRenderingContext.commit()")}} {{experimental_inline}}</dt>
- <dd>
- <p>Pushes frames back to the original {{domxref("HTMLCanvasElement")}}, if the context is not directly fixed to a specific canvas.</p>
- </dd>
- <dt>{{domxref("WebGLRenderingContext.drawingBufferWidth")}}</dt>
- <dd>The read-only width of the current drawing buffer. Should match the width of the canvas element associated with this context.</dd>
- <dt>{{domxref("WebGLRenderingContext.drawingBufferHeight")}}</dt>
- <dd>The read-only height of the current drawing buffer. Should match the height of the canvas element associated with this context.</dd>
- <dt>{{domxref("WebGLRenderingContext.getContextAttributes()")}}</dt>
- <dd>Returns a <code>WebGLContextAttributes</code> object that contains the actual context parameters. Might return {{jsxref("null")}}, if the context is lost.</dd>
- <dt>{{domxref("WebGLRenderingContext.isContextLost()")}}</dt>
- <dd>Returns <code>true</code> if the context is lost, otherwise returns <code>false</code>.</dd>
-</dl>
-
-<h2 id="Viewing_and_clipping">Viewing and clipping</h2>
-
-<dl>
- <dt>{{domxref("WebGLRenderingContext.scissor()")}}</dt>
- <dd>Defines the scissor box.</dd>
- <dt>{{domxref("WebGLRenderingContext.viewport()")}}</dt>
- <dd>Sets the viewport.</dd>
-</dl>
-
-<h2 id="State_information">State information</h2>
-
-<dl>
- <dt>{{domxref("WebGLRenderingContext.activeTexture()")}}</dt>
- <dd>Selects the active texture unit.</dd>
- <dt>{{domxref("WebGLRenderingContext.blendColor()")}}</dt>
- <dd>Sets the source and destination blending factors.</dd>
- <dt>{{domxref("WebGLRenderingContext.blendEquation()")}}</dt>
- <dd>Sets both the RGB blend equation and alpha blend equation to a single equation.</dd>
- <dt>{{domxref("WebGLRenderingContext.blendEquationSeparate()")}}</dt>
- <dd>Sets the RGB blend equation and alpha blend equation separately.</dd>
- <dt>{{domxref("WebGLRenderingContext.blendFunc()")}}</dt>
- <dd>Defines which function is used for blending pixel arithmetic.</dd>
- <dt>{{domxref("WebGLRenderingContext.blendFuncSeparate()")}}</dt>
- <dd>Defines which function is used for blending pixel arithmetic for RGB and alpha components separately.</dd>
- <dt>{{domxref("WebGLRenderingContext.clearColor()")}}</dt>
- <dd>Specifies the color values used when clearing color buffers.</dd>
- <dt>{{domxref("WebGLRenderingContext.clearDepth()")}}</dt>
- <dd>Specifies the depth value used when clearing the depth buffer.</dd>
- <dt>{{domxref("WebGLRenderingContext.clearStencil()")}}</dt>
- <dd>Specifies the stencil value used when clearing the stencil buffer.</dd>
- <dt>{{domxref("WebGLRenderingContext.colorMask()")}}</dt>
- <dd>Sets which color components to enable or to disable when drawing or rendering to a {{domxref("WebGLFramebuffer")}}.</dd>
- <dt>{{domxref("WebGLRenderingContext.cullFace()")}}</dt>
- <dd>Specifies whether or not front- and/or back-facing polygons can be culled.</dd>
- <dt>{{domxref("WebGLRenderingContext.depthFunc()")}}</dt>
- <dd>Specifies a function that compares incoming pixel depth to the current depth buffer value.</dd>
- <dt>{{domxref("WebGLRenderingContext.depthMask()")}}</dt>
- <dd>Sets whether writing into the depth buffer is enabled or disabled.</dd>
- <dt>{{domxref("WebGLRenderingContext.depthRange()")}}</dt>
- <dd>Specifies the depth range mapping from normalized device coordinates to window or viewport coordinates.</dd>
- <dt>{{domxref("WebGLRenderingContext.disable()")}}</dt>
- <dd>Disables specific WebGL capabilities for this context.</dd>
- <dt>{{domxref("WebGLRenderingContext.enable()")}}</dt>
- <dd>Enables specific WebGL capabilities for this context.</dd>
- <dt>{{domxref("WebGLRenderingContext.frontFace()")}}</dt>
- <dd>Specifies whether polygons are front- or back-facing by setting a winding orientation.</dd>
- <dt>{{domxref("WebGLRenderingContext.getParameter()")}}</dt>
- <dd>Returns a value for the passed parameter name.</dd>
- <dt>{{domxref("WebGLRenderingContext.getError()")}}</dt>
- <dd>Returns error information.</dd>
- <dt>{{domxref("WebGLRenderingContext.hint()")}}</dt>
- <dd>Specifies hints for certain behaviors. The interpretation of these hints depend on the implementation.</dd>
- <dt>{{domxref("WebGLRenderingContext.isEnabled()")}}</dt>
- <dd>Tests whether a specific WebGL capability is enabled or not for this context.</dd>
- <dt>{{domxref("WebGLRenderingContext.lineWidth()")}}</dt>
- <dd>Sets the line width of rasterized lines.</dd>
- <dt>{{domxref("WebGLRenderingContext.pixelStorei()")}}</dt>
- <dd>Specifies the pixel storage modes</dd>
- <dt>{{domxref("WebGLRenderingContext.polygonOffset()")}}</dt>
- <dd>Specifies the scale factors and units to calculate depth values.</dd>
- <dt>{{domxref("WebGLRenderingContext.sampleCoverage()")}}</dt>
- <dd>Specifies multi-sample coverage parameters for anti-aliasing effects.</dd>
- <dt>{{domxref("WebGLRenderingContext.stencilFunc()")}}</dt>
- <dd>Sets the both front and back function and reference value for stencil testing.</dd>
- <dt>{{domxref("WebGLRenderingContext.stencilFuncSeparate()")}}</dt>
- <dd>Sets the front and/or back function and reference value for stencil testing.</dd>
- <dt>{{domxref("WebGLRenderingContext.stencilMask()")}}</dt>
- <dd>Controls enabling and disabling of both the front and back writing of individual bits in the stencil planes.</dd>
- <dt>{{domxref("WebGLRenderingContext.stencilMaskSeparate()")}}</dt>
- <dd>Controls enabling and disabling of front and/or back writing of individual bits in the stencil planes.</dd>
- <dt>{{domxref("WebGLRenderingContext.stencilOp()")}}</dt>
- <dd>Sets both the front and back-facing stencil test actions.</dd>
- <dt>{{domxref("WebGLRenderingContext.stencilOpSeparate()")}}</dt>
- <dd>Sets the front and/or back-facing stencil test actions.</dd>
-</dl>
-
-<h2 id="Buffers">Buffers</h2>
-
-<dl>
- <dt>{{domxref("WebGLRenderingContext.bindBuffer()")}}</dt>
- <dd>Binds a <code>WebGLBuffer</code> object to a given target.</dd>
- <dt>{{domxref("WebGLRenderingContext.bufferData()")}}</dt>
- <dd>Updates buffer data.</dd>
- <dt>{{domxref("WebGLRenderingContext.bufferSubData()")}}</dt>
- <dd>Updates buffer data starting at a passed offset.</dd>
- <dt>{{domxref("WebGLRenderingContext.createBuffer()")}}</dt>
- <dd>Creates a <code>WebGLBuffer</code> object.</dd>
- <dt>{{domxref("WebGLRenderingContext.deleteBuffer()")}}</dt>
- <dd>Deletes a <code>WebGLBuffer</code> object.</dd>
- <dt>{{domxref("WebGLRenderingContext.getBufferParameter()")}}</dt>
- <dd>Returns information about the buffer.</dd>
- <dt>{{domxref("WebGLRenderingContext.isBuffer()")}}</dt>
- <dd>Returns a Boolean indicating if the passed buffer is valid.</dd>
-</dl>
-
-<h2 id="Framebuffers">Framebuffers</h2>
-
-<dl>
- <dt>{{domxref("WebGLRenderingContext.bindFramebuffer()")}}</dt>
- <dd>Binds a <code>WebGLFrameBuffer</code> object to a given target.</dd>
- <dt>{{domxref("WebGLRenderingContext.checkFramebufferStatus()")}}</dt>
- <dd>Returns the status of the framebuffer.</dd>
- <dt>{{domxref("WebGLRenderingContext.createFramebuffer()")}}</dt>
- <dd>Creates a <code>WebGLFrameBuffer</code> object.</dd>
- <dt>{{domxref("WebGLRenderingContext.deleteFramebuffer()")}}</dt>
- <dd>Deletes a <code>WebGLFrameBuffer</code> object.</dd>
- <dt>{{domxref("WebGLRenderingContext.framebufferRenderbuffer()")}}</dt>
- <dd>Attaches a <code>WebGLRenderingBuffer</code> object to a <code>WebGLFrameBuffer</code> object.</dd>
- <dt>{{domxref("WebGLRenderingContext.framebufferTexture2D()")}}</dt>
- <dd>Attaches a textures image to a <code>WebGLFrameBuffer</code> object.</dd>
- <dt>{{domxref("WebGLRenderingContext.getFramebufferAttachmentParameter()")}}</dt>
- <dd>Returns information about the framebuffer.</dd>
- <dt>{{domxref("WebGLRenderingContext.isFramebuffer()")}}</dt>
- <dd>Returns a Boolean indicating if the passed <code>WebGLFrameBuffer</code> object is valid.</dd>
- <dt>{{domxref("WebGLRenderingContext.readPixels()")}}</dt>
- <dd>Reads a block of pixels from the <code>WebGLFrameBuffer</code>.</dd>
-</dl>
-
-<h2 id="Renderbuffers">Renderbuffers</h2>
-
-<dl>
- <dt>{{domxref("WebGLRenderingContext.bindRenderbuffer()")}}</dt>
- <dd>Binds a <code>WebGLRenderBuffer</code> object to a given target.</dd>
- <dt>{{domxref("WebGLRenderingContext.createRenderbuffer()")}}</dt>
- <dd>Creates a <code>WebGLRenderBuffer</code> object.</dd>
- <dt>{{domxref("WebGLRenderingContext.deleteRenderbuffer()")}}</dt>
- <dd>Deletes a <code>WebGLRenderBuffer</code> object.</dd>
- <dt>{{domxref("WebGLRenderingContext.getRenderbufferParameter()")}}</dt>
- <dd>Returns information about the renderbuffer.</dd>
- <dt>{{domxref("WebGLRenderingContext.isRenderbuffer()")}}</dt>
- <dd>Returns a Boolean indicating if the passed <code>WebGLRenderingBuffer</code> is valid.</dd>
- <dt>{{domxref("WebGLRenderingContext.renderbufferStorage()")}}</dt>
- <dd>Creates a renderbuffer data store.</dd>
-</dl>
-
-<h2 id="Textures">Textures</h2>
-
-<dl>
- <dt>{{domxref("WebGLRenderingContext.bindTexture()")}}</dt>
- <dd>Binds a <code>WebGLTexture</code> object to a given target.</dd>
- <dt>{{domxref("WebGLRenderingContext.compressedTexImage2D()")}}</dt>
- <dd>Specifies a 2D texture image in a compressed format.</dd>
- <dt>{{domxref("WebGLRenderingContext.compressedTexSubImage2D()")}}</dt>
- <dd>Specifies a 2D texture sub-image in a compressed format.</dd>
- <dt>{{domxref("WebGLRenderingContext.copyTexImage2D()")}}</dt>
- <dd>Copies a 2D texture image.</dd>
- <dt>{{domxref("WebGLRenderingContext.copyTexSubImage2D()")}}</dt>
- <dd>Copies a 2D texture sub-image.</dd>
- <dt>{{domxref("WebGLRenderingContext.createTexture()")}}</dt>
- <dd>Creates a <code>WebGLTexture</code> object.</dd>
- <dt>{{domxref("WebGLRenderingContext.deleteTexture()")}}</dt>
- <dd>Deletes a <code>WebGLTexture</code> object.</dd>
- <dt>{{domxref("WebGLRenderingContext.generateMipmap()")}}</dt>
- <dd>Generates a set of mipmaps for a <code>WebGLTexture</code> object.</dd>
- <dt>{{domxref("WebGLRenderingContext.getTexParameter()")}}</dt>
- <dd>Returns information about the texture.</dd>
- <dt>{{domxref("WebGLRenderingContext.isTexture()")}}</dt>
- <dd>Returns a Boolean indicating if the passed <code>WebGLTexture</code> is valid.</dd>
- <dt>{{domxref("WebGLRenderingContext.texImage2D()")}}</dt>
- <dd>Specifies a 2D texture image.</dd>
- <dt>{{domxref("WebGLRenderingContext.texSubImage2D()")}}</dt>
- <dd>Updates a sub-rectangle of the current <code>WebGLTexture</code>.</dd>
- <dt>{{domxref("WebGLRenderingContext.texParameter", "WebGLRenderingContext.texParameterf()")}}</dt>
- <dd>Sets texture parameters.</dd>
- <dt>{{domxref("WebGLRenderingContext.texParameter", "WebGLRenderingContext.texParameteri()")}}</dt>
- <dd>Sets texture parameters.</dd>
-</dl>
-
-<h2 id="Programs_and_shaders">Programs and shaders</h2>
-
-<dl>
- <dt>{{domxref("WebGLRenderingContext.attachShader()")}}</dt>
- <dd>Attaches a <code>WebGLShader</code> to a <code>WebGLProgram</code>.</dd>
- <dt>{{domxref("WebGLRenderingContext.bindAttribLocation()")}}</dt>
- <dd>Binds a generic vertex index to a named attribute variable.</dd>
- <dt>{{domxref("WebGLRenderingContext.compileShader()")}}</dt>
- <dd>Compiles a <code>WebGLShader</code>.</dd>
- <dt>{{domxref("WebGLRenderingContext.createProgram()")}}</dt>
- <dd>Creates a <code>WebGLProgram</code>.</dd>
- <dt>{{domxref("WebGLRenderingContext.createShader()")}}</dt>
- <dd>Creates a <code>WebGLShader</code>.</dd>
- <dt>{{domxref("WebGLRenderingContext.deleteProgram()")}}</dt>
- <dd>Deletes a <code>WebGLProgram</code>.</dd>
- <dt>{{domxref("WebGLRenderingContext.deleteShader()")}}</dt>
- <dd>Deletes a <code>WebGLShader</code>.</dd>
- <dt>{{domxref("WebGLRenderingContext.detachShader()")}}</dt>
- <dd>Detaches a <code>WebGLShader</code>.</dd>
- <dt>{{domxref("WebGLRenderingContext.getAttachedShaders()")}}</dt>
- <dd>Returns a list of <code>WebGLShader</code> objects attached to a <code>WebGLProgram</code>.</dd>
- <dt>{{domxref("WebGLRenderingContext.getProgramParameter()")}}</dt>
- <dd>Returns information about the program.</dd>
- <dt>{{domxref("WebGLRenderingContext.getProgramInfoLog()")}}</dt>
- <dd>Returns the information log for a <code>WebGLProgram</code> object.</dd>
- <dt>{{domxref("WebGLRenderingContext.getShaderParameter()")}}</dt>
- <dd>Returns information about the shader.</dd>
- <dt>{{domxref("WebGLRenderingContext.getShaderPrecisionFormat()")}}</dt>
- <dd>Returns a <code>WebGLShaderPrecisionFormat</code> object describing the precision for the numeric format of the shader.</dd>
- <dt>{{domxref("WebGLRenderingContext.getShaderInfoLog()")}}</dt>
- <dd>Returns the information log for a <code>WebGLShader</code> object.</dd>
- <dt>{{domxref("WebGLRenderingContext.getShaderSource()")}}</dt>
- <dd>Returns the source code of a <code>WebGLShader</code> as a string.</dd>
- <dt>{{domxref("WebGLRenderingContext.isProgram()")}}</dt>
- <dd>Returns a Boolean indicating if the passed <code>WebGLProgram</code> is valid.</dd>
- <dt>{{domxref("WebGLRenderingContext.isShader()")}}</dt>
- <dd>Returns a Boolean indicating if the passed <code>WebGLShader</code> is valid.</dd>
- <dt>{{domxref("WebGLRenderingContext.linkProgram()")}}</dt>
- <dd>Links the passed <code>WebGLProgram</code> object.</dd>
- <dt>{{domxref("WebGLRenderingContext.shaderSource()")}}</dt>
- <dd>Sets the source code in a <code>WebGLShader</code>.</dd>
- <dt>{{domxref("WebGLRenderingContext.useProgram()")}}</dt>
- <dd>Uses the specified <code>WebGLProgram</code> as part the current rendering state.</dd>
- <dt>{{domxref("WebGLRenderingContext.validateProgram()")}}</dt>
- <dd>Validates a <code>WebGLProgram</code>.</dd>
-</dl>
-
-<h2 id="Uniforms_and_attributes">Uniforms and attributes</h2>
-
-<dl>
- <dt>{{domxref("WebGLRenderingContext.disableVertexAttribArray()")}}</dt>
- <dd>Disables a vertex attribute array at a given position.</dd>
- <dt>{{domxref("WebGLRenderingContext.enableVertexAttribArray()")}}</dt>
- <dd>Enables a vertex attribute array at a given position.</dd>
- <dt>{{domxref("WebGLRenderingContext.getActiveAttrib()")}}</dt>
- <dd>Returns information about an active attribute variable.</dd>
- <dt>{{domxref("WebGLRenderingContext.getActiveUniform()")}}</dt>
- <dd>Returns information about an active uniform variable.</dd>
- <dt>{{domxref("WebGLRenderingContext.getAttribLocation()")}}</dt>
- <dd>Returns the location of an attribute variable.</dd>
- <dt>{{domxref("WebGLRenderingContext.getUniform()")}}</dt>
- <dd>Returns the value of a uniform variable at a given location.</dd>
- <dt>{{domxref("WebGLRenderingContext.getUniformLocation()")}}</dt>
- <dd>Returns the location of a uniform variable.</dd>
- <dt>{{domxref("WebGLRenderingContext.getVertexAttrib()")}}</dt>
- <dd>Returns information about a vertex attribute at a given position.</dd>
- <dt>{{domxref("WebGLRenderingContext.getVertexAttribOffset()")}}</dt>
- <dd>Returns the address of a given vertex attribute.</dd>
- <dt>{{domxref("WebGLRenderingContext.uniform()", "WebGLRenderingContext.uniform[1234][fi][v]()")}}</dt>
- <dd>Specifies a value for a uniform variable.</dd>
- <dt>{{domxref("WebGLRenderingContext.uniformMatrix()", "WebGLRenderingContext.uniformMatrix[234]fv()")}}</dt>
- <dd>Specifies a matrix value for a uniform variable.</dd>
- <dt>{{domxref("WebGLRenderingContext.vertexAttrib()", "WebGLRenderingContext.vertexAttrib[1234]f[v]()")}}</dt>
- <dd>Specifies a value for a generic vertex attribute.</dd>
- <dt>{{domxref("WebGLRenderingContext.vertexAttribPointer()")}}</dt>
- <dd>Specifies the data formats and locations of vertex attributes in a vertex attributes array.</dd>
-</dl>
-
-<h2 id="Drawing_buffers">Drawing buffers</h2>
-
-<dl>
- <dt>{{domxref("WebGLRenderingContext.clear()")}}</dt>
- <dd>Clears specified buffers to preset values.</dd>
- <dt>{{domxref("WebGLRenderingContext.drawArrays()")}}</dt>
- <dd>Renders primitives from array data.</dd>
- <dt>{{domxref("WebGLRenderingContext.drawElements()")}}</dt>
- <dd>Renders primitives from element array data.</dd>
- <dt>{{domxref("WebGLRenderingContext.finish()")}}</dt>
- <dd>Blocks execution until all previously called commands are finished.</dd>
- <dt>{{domxref("WebGLRenderingContext.flush()")}}</dt>
- <dd>Empties different buffer commands, causing all commands to be executed as quickly as possible.</dd>
-</dl>
-
-<h2 id="Working_with_extensions">Working with extensions</h2>
-
-<p>These methods manage WebGL extensions:</p>
-
-<dl>
- <dt>{{domxref("WebGLRenderingContext.getSupportedExtensions()")}}</dt>
- <dd>Returns an {{jsxref("Array")}} of {{domxref("DOMString")}} elements with all the supported WebGL extensions.</dd>
- <dt>{{domxref("WebGLRenderingContext.getExtension()")}}</dt>
- <dd>Returns an extension object.</dd>
-</dl>
-
-<h2 id="Examples">Examples</h2>
-
-<h3 id="WebGL_context_feature_detection">WebGL context feature detection</h3>
-
-<p>{{page("/en-US/Learn/WebGL/By_example/Detect_WebGL", "summary")}}</p>
-
-<p>{{page("/en-US/Learn/WebGL/By_example/Detect_WebGL", "detect-webgl-source")}}</p>
-
-<p>{{EmbedLiveSample("detect-webgl-source", 660,150 ,"" , "Learn/WebGL/By_example/Detect_WebGL")}}</p>
-
-<h3 id="Effect_of_canvas_size_on_rendering_with_WebGL">Effect of canvas size on rendering with WebGL</h3>
-
-<p>{{page("/en-US/Learn/WebGL/By_example/Canvas_size_and_WebGL", "canvas-size-and-webgl-intro")}}</p>
-
-<p>{{page("/en-US/Learn/WebGL/By_example/Canvas_size_and_WebGL", "canvas-size-and-webgl-source")}}</p>
-
-<p>{{EmbedLiveSample("canvas-size-and-webgl-source", 660,180 ,"" , "Learn/WebGL/By_example/Canvas_size_and_WebGL")}}</p>
-
-<h2 id="Specifications">Specifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('WebGL', "#5.14", "WebGLRenderingContext")}}</td>
-   <td>{{Spec2('WebGL')}}</td>
-   <td>Initial definition</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Browser compatibility</h2>
-
-<p>{{Compat("api/WebGLRenderingContext", "WebGLRenderingContext")}}</p>
-
-<h2 id="See_also">See also</h2>
-
-<ul>
- <li>{{domxref("HTMLCanvasElement")}}</li>
-</ul>
+```
+
+Une fois que avez le contexte de rendu WebGL, vous pouvez dessiner à l'intérieur.
+
+Le [tutoriel WebGL](/fr/docs/Web/API/WebGL_API/Tutorial) contient plus d'informations, d'exemples, et de ressources sur comment débuter en WebGL.
+
+## Constants
+
+See the [WebGL constants](/en-US/docs/Web/API/WebGL_API/Constants) page.
+
+## The WebGL context
+
+The following properties and methods provide general information and functionality to deal with the WebGL context:
+
+- {{domxref("WebGLRenderingContext.canvas")}}
+  - : A read-only back-reference to the {{domxref("HTMLCanvasElement")}}. Might be {{jsxref("null")}} if it is not associated with a {{HTMLElement("canvas")}} element.
+- {{domxref("WebGLRenderingContext.commit()")}} {{experimental_inline}}
+  - : Pushes frames back to the original {{domxref("HTMLCanvasElement")}}, if the context is not directly fixed to a specific canvas.
+- {{domxref("WebGLRenderingContext.drawingBufferWidth")}}
+  - : The read-only width of the current drawing buffer. Should match the width of the canvas element associated with this context.
+- {{domxref("WebGLRenderingContext.drawingBufferHeight")}}
+  - : The read-only height of the current drawing buffer. Should match the height of the canvas element associated with this context.
+- {{domxref("WebGLRenderingContext.getContextAttributes()")}}
+  - : Returns a `WebGLContextAttributes` object that contains the actual context parameters. Might return {{jsxref("null")}}, if the context is lost.
+- {{domxref("WebGLRenderingContext.isContextLost()")}}
+  - : Returns `true` if the context is lost, otherwise returns `false`.
+
+## Viewing and clipping
+
+- {{domxref("WebGLRenderingContext.scissor()")}}
+  - : Defines the scissor box.
+- {{domxref("WebGLRenderingContext.viewport()")}}
+  - : Sets the viewport.
+
+## State information
+
+- {{domxref("WebGLRenderingContext.activeTexture()")}}
+  - : Selects the active texture unit.
+- {{domxref("WebGLRenderingContext.blendColor()")}}
+  - : Sets the source and destination blending factors.
+- {{domxref("WebGLRenderingContext.blendEquation()")}}
+  - : Sets both the RGB blend equation and alpha blend equation to a single equation.
+- {{domxref("WebGLRenderingContext.blendEquationSeparate()")}}
+  - : Sets the RGB blend equation and alpha blend equation separately.
+- {{domxref("WebGLRenderingContext.blendFunc()")}}
+  - : Defines which function is used for blending pixel arithmetic.
+- {{domxref("WebGLRenderingContext.blendFuncSeparate()")}}
+  - : Defines which function is used for blending pixel arithmetic for RGB and alpha components separately.
+- {{domxref("WebGLRenderingContext.clearColor()")}}
+  - : Specifies the color values used when clearing color buffers.
+- {{domxref("WebGLRenderingContext.clearDepth()")}}
+  - : Specifies the depth value used when clearing the depth buffer.
+- {{domxref("WebGLRenderingContext.clearStencil()")}}
+  - : Specifies the stencil value used when clearing the stencil buffer.
+- {{domxref("WebGLRenderingContext.colorMask()")}}
+  - : Sets which color components to enable or to disable when drawing or rendering to a {{domxref("WebGLFramebuffer")}}.
+- {{domxref("WebGLRenderingContext.cullFace()")}}
+  - : Specifies whether or not front- and/or back-facing polygons can be culled.
+- {{domxref("WebGLRenderingContext.depthFunc()")}}
+  - : Specifies a function that compares incoming pixel depth to the current depth buffer value.
+- {{domxref("WebGLRenderingContext.depthMask()")}}
+  - : Sets whether writing into the depth buffer is enabled or disabled.
+- {{domxref("WebGLRenderingContext.depthRange()")}}
+  - : Specifies the depth range mapping from normalized device coordinates to window or viewport coordinates.
+- {{domxref("WebGLRenderingContext.disable()")}}
+  - : Disables specific WebGL capabilities for this context.
+- {{domxref("WebGLRenderingContext.enable()")}}
+  - : Enables specific WebGL capabilities for this context.
+- {{domxref("WebGLRenderingContext.frontFace()")}}
+  - : Specifies whether polygons are front- or back-facing by setting a winding orientation.
+- {{domxref("WebGLRenderingContext.getParameter()")}}
+  - : Returns a value for the passed parameter name.
+- {{domxref("WebGLRenderingContext.getError()")}}
+  - : Returns error information.
+- {{domxref("WebGLRenderingContext.hint()")}}
+  - : Specifies hints for certain behaviors. The interpretation of these hints depend on the implementation.
+- {{domxref("WebGLRenderingContext.isEnabled()")}}
+  - : Tests whether a specific WebGL capability is enabled or not for this context.
+- {{domxref("WebGLRenderingContext.lineWidth()")}}
+  - : Sets the line width of rasterized lines.
+- {{domxref("WebGLRenderingContext.pixelStorei()")}}
+  - : Specifies the pixel storage modes
+- {{domxref("WebGLRenderingContext.polygonOffset()")}}
+  - : Specifies the scale factors and units to calculate depth values.
+- {{domxref("WebGLRenderingContext.sampleCoverage()")}}
+  - : Specifies multi-sample coverage parameters for anti-aliasing effects.
+- {{domxref("WebGLRenderingContext.stencilFunc()")}}
+  - : Sets the both front and back function and reference value for stencil testing.
+- {{domxref("WebGLRenderingContext.stencilFuncSeparate()")}}
+  - : Sets the front and/or back function and reference value for stencil testing.
+- {{domxref("WebGLRenderingContext.stencilMask()")}}
+  - : Controls enabling and disabling of both the front and back writing of individual bits in the stencil planes.
+- {{domxref("WebGLRenderingContext.stencilMaskSeparate()")}}
+  - : Controls enabling and disabling of front and/or back writing of individual bits in the stencil planes.
+- {{domxref("WebGLRenderingContext.stencilOp()")}}
+  - : Sets both the front and back-facing stencil test actions.
+- {{domxref("WebGLRenderingContext.stencilOpSeparate()")}}
+  - : Sets the front and/or back-facing stencil test actions.
+
+## Buffers
+
+- {{domxref("WebGLRenderingContext.bindBuffer()")}}
+  - : Binds a `WebGLBuffer` object to a given target.
+- {{domxref("WebGLRenderingContext.bufferData()")}}
+  - : Updates buffer data.
+- {{domxref("WebGLRenderingContext.bufferSubData()")}}
+  - : Updates buffer data starting at a passed offset.
+- {{domxref("WebGLRenderingContext.createBuffer()")}}
+  - : Creates a `WebGLBuffer` object.
+- {{domxref("WebGLRenderingContext.deleteBuffer()")}}
+  - : Deletes a `WebGLBuffer` object.
+- {{domxref("WebGLRenderingContext.getBufferParameter()")}}
+  - : Returns information about the buffer.
+- {{domxref("WebGLRenderingContext.isBuffer()")}}
+  - : Returns a Boolean indicating if the passed buffer is valid.
+
+## Framebuffers
+
+- {{domxref("WebGLRenderingContext.bindFramebuffer()")}}
+  - : Binds a `WebGLFrameBuffer` object to a given target.
+- {{domxref("WebGLRenderingContext.checkFramebufferStatus()")}}
+  - : Returns the status of the framebuffer.
+- {{domxref("WebGLRenderingContext.createFramebuffer()")}}
+  - : Creates a `WebGLFrameBuffer` object.
+- {{domxref("WebGLRenderingContext.deleteFramebuffer()")}}
+  - : Deletes a `WebGLFrameBuffer` object.
+- {{domxref("WebGLRenderingContext.framebufferRenderbuffer()")}}
+  - : Attaches a `WebGLRenderingBuffer` object to a `WebGLFrameBuffer` object.
+- {{domxref("WebGLRenderingContext.framebufferTexture2D()")}}
+  - : Attaches a textures image to a `WebGLFrameBuffer` object.
+- {{domxref("WebGLRenderingContext.getFramebufferAttachmentParameter()")}}
+  - : Returns information about the framebuffer.
+- {{domxref("WebGLRenderingContext.isFramebuffer()")}}
+  - : Returns a Boolean indicating if the passed `WebGLFrameBuffer` object is valid.
+- {{domxref("WebGLRenderingContext.readPixels()")}}
+  - : Reads a block of pixels from the `WebGLFrameBuffer`.
+
+## Renderbuffers
+
+- {{domxref("WebGLRenderingContext.bindRenderbuffer()")}}
+  - : Binds a `WebGLRenderBuffer` object to a given target.
+- {{domxref("WebGLRenderingContext.createRenderbuffer()")}}
+  - : Creates a `WebGLRenderBuffer` object.
+- {{domxref("WebGLRenderingContext.deleteRenderbuffer()")}}
+  - : Deletes a `WebGLRenderBuffer` object.
+- {{domxref("WebGLRenderingContext.getRenderbufferParameter()")}}
+  - : Returns information about the renderbuffer.
+- {{domxref("WebGLRenderingContext.isRenderbuffer()")}}
+  - : Returns a Boolean indicating if the passed `WebGLRenderingBuffer` is valid.
+- {{domxref("WebGLRenderingContext.renderbufferStorage()")}}
+  - : Creates a renderbuffer data store.
+
+## Textures
+
+- {{domxref("WebGLRenderingContext.bindTexture()")}}
+  - : Binds a `WebGLTexture` object to a given target.
+- {{domxref("WebGLRenderingContext.compressedTexImage2D()")}}
+  - : Specifies a 2D texture image in a compressed format.
+- {{domxref("WebGLRenderingContext.compressedTexSubImage2D()")}}
+  - : Specifies a 2D texture sub-image in a compressed format.
+- {{domxref("WebGLRenderingContext.copyTexImage2D()")}}
+  - : Copies a 2D texture image.
+- {{domxref("WebGLRenderingContext.copyTexSubImage2D()")}}
+  - : Copies a 2D texture sub-image.
+- {{domxref("WebGLRenderingContext.createTexture()")}}
+  - : Creates a `WebGLTexture` object.
+- {{domxref("WebGLRenderingContext.deleteTexture()")}}
+  - : Deletes a `WebGLTexture` object.
+- {{domxref("WebGLRenderingContext.generateMipmap()")}}
+  - : Generates a set of mipmaps for a `WebGLTexture` object.
+- {{domxref("WebGLRenderingContext.getTexParameter()")}}
+  - : Returns information about the texture.
+- {{domxref("WebGLRenderingContext.isTexture()")}}
+  - : Returns a Boolean indicating if the passed `WebGLTexture` is valid.
+- {{domxref("WebGLRenderingContext.texImage2D()")}}
+  - : Specifies a 2D texture image.
+- {{domxref("WebGLRenderingContext.texSubImage2D()")}}
+  - : Updates a sub-rectangle of the current `WebGLTexture`.
+- {{domxref("WebGLRenderingContext.texParameter", "WebGLRenderingContext.texParameterf()")}}
+  - : Sets texture parameters.
+- {{domxref("WebGLRenderingContext.texParameter", "WebGLRenderingContext.texParameteri()")}}
+  - : Sets texture parameters.
+
+## Programs and shaders
+
+- {{domxref("WebGLRenderingContext.attachShader()")}}
+  - : Attaches a `WebGLShader` to a `WebGLProgram`.
+- {{domxref("WebGLRenderingContext.bindAttribLocation()")}}
+  - : Binds a generic vertex index to a named attribute variable.
+- {{domxref("WebGLRenderingContext.compileShader()")}}
+  - : Compiles a `WebGLShader`.
+- {{domxref("WebGLRenderingContext.createProgram()")}}
+  - : Creates a `WebGLProgram`.
+- {{domxref("WebGLRenderingContext.createShader()")}}
+  - : Creates a `WebGLShader`.
+- {{domxref("WebGLRenderingContext.deleteProgram()")}}
+  - : Deletes a `WebGLProgram`.
+- {{domxref("WebGLRenderingContext.deleteShader()")}}
+  - : Deletes a `WebGLShader`.
+- {{domxref("WebGLRenderingContext.detachShader()")}}
+  - : Detaches a `WebGLShader`.
+- {{domxref("WebGLRenderingContext.getAttachedShaders()")}}
+  - : Returns a list of `WebGLShader` objects attached to a `WebGLProgram`.
+- {{domxref("WebGLRenderingContext.getProgramParameter()")}}
+  - : Returns information about the program.
+- {{domxref("WebGLRenderingContext.getProgramInfoLog()")}}
+  - : Returns the information log for a `WebGLProgram` object.
+- {{domxref("WebGLRenderingContext.getShaderParameter()")}}
+  - : Returns information about the shader.
+- {{domxref("WebGLRenderingContext.getShaderPrecisionFormat()")}}
+  - : Returns a `WebGLShaderPrecisionFormat` object describing the precision for the numeric format of the shader.
+- {{domxref("WebGLRenderingContext.getShaderInfoLog()")}}
+  - : Returns the information log for a `WebGLShader` object.
+- {{domxref("WebGLRenderingContext.getShaderSource()")}}
+  - : Returns the source code of a `WebGLShader` as a string.
+- {{domxref("WebGLRenderingContext.isProgram()")}}
+  - : Returns a Boolean indicating if the passed `WebGLProgram` is valid.
+- {{domxref("WebGLRenderingContext.isShader()")}}
+  - : Returns a Boolean indicating if the passed `WebGLShader` is valid.
+- {{domxref("WebGLRenderingContext.linkProgram()")}}
+  - : Links the passed `WebGLProgram` object.
+- {{domxref("WebGLRenderingContext.shaderSource()")}}
+  - : Sets the source code in a `WebGLShader`.
+- {{domxref("WebGLRenderingContext.useProgram()")}}
+  - : Uses the specified `WebGLProgram` as part the current rendering state.
+- {{domxref("WebGLRenderingContext.validateProgram()")}}
+  - : Validates a `WebGLProgram`.
+
+## Uniforms and attributes
+
+- {{domxref("WebGLRenderingContext.disableVertexAttribArray()")}}
+  - : Disables a vertex attribute array at a given position.
+- {{domxref("WebGLRenderingContext.enableVertexAttribArray()")}}
+  - : Enables a vertex attribute array at a given position.
+- {{domxref("WebGLRenderingContext.getActiveAttrib()")}}
+  - : Returns information about an active attribute variable.
+- {{domxref("WebGLRenderingContext.getActiveUniform()")}}
+  - : Returns information about an active uniform variable.
+- {{domxref("WebGLRenderingContext.getAttribLocation()")}}
+  - : Returns the location of an attribute variable.
+- {{domxref("WebGLRenderingContext.getUniform()")}}
+  - : Returns the value of a uniform variable at a given location.
+- {{domxref("WebGLRenderingContext.getUniformLocation()")}}
+  - : Returns the location of a uniform variable.
+- {{domxref("WebGLRenderingContext.getVertexAttrib()")}}
+  - : Returns information about a vertex attribute at a given position.
+- {{domxref("WebGLRenderingContext.getVertexAttribOffset()")}}
+  - : Returns the address of a given vertex attribute.
+- {{domxref("WebGLRenderingContext.uniform()", "WebGLRenderingContext.uniform[1234][fi][v]()")}}
+  - : Specifies a value for a uniform variable.
+- {{domxref("WebGLRenderingContext.uniformMatrix()", "WebGLRenderingContext.uniformMatrix[234]fv()")}}
+  - : Specifies a matrix value for a uniform variable.
+- {{domxref("WebGLRenderingContext.vertexAttrib()", "WebGLRenderingContext.vertexAttrib[1234]f[v]()")}}
+  - : Specifies a value for a generic vertex attribute.
+- {{domxref("WebGLRenderingContext.vertexAttribPointer()")}}
+  - : Specifies the data formats and locations of vertex attributes in a vertex attributes array.
+
+## Drawing buffers
+
+- {{domxref("WebGLRenderingContext.clear()")}}
+  - : Clears specified buffers to preset values.
+- {{domxref("WebGLRenderingContext.drawArrays()")}}
+  - : Renders primitives from array data.
+- {{domxref("WebGLRenderingContext.drawElements()")}}
+  - : Renders primitives from element array data.
+- {{domxref("WebGLRenderingContext.finish()")}}
+  - : Blocks execution until all previously called commands are finished.
+- {{domxref("WebGLRenderingContext.flush()")}}
+  - : Empties different buffer commands, causing all commands to be executed as quickly as possible.
+
+## Working with extensions
+
+These methods manage WebGL extensions:
+
+- {{domxref("WebGLRenderingContext.getSupportedExtensions()")}}
+  - : Returns an {{jsxref("Array")}} of {{domxref("DOMString")}} elements with all the supported WebGL extensions.
+- {{domxref("WebGLRenderingContext.getExtension()")}}
+  - : Returns an extension object.
+
+## Examples
+
+### WebGL context feature detection
+
+{{page("/en-US/Learn/WebGL/By_example/Detect_WebGL", "summary")}}
+
+{{page("/en-US/Learn/WebGL/By_example/Detect_WebGL", "detect-webgl-source")}}
+
+{{EmbedLiveSample("detect-webgl-source", 660,150 ,"" , "Learn/WebGL/By_example/Detect_WebGL")}}
+
+### Effect of canvas size on rendering with WebGL
+
+{{page("/en-US/Learn/WebGL/By_example/Canvas_size_and_WebGL", "canvas-size-and-webgl-intro")}}
+
+{{page("/en-US/Learn/WebGL/By_example/Canvas_size_and_WebGL", "canvas-size-and-webgl-source")}}
+
+{{EmbedLiveSample("canvas-size-and-webgl-source", 660,180 ,"" , "Learn/WebGL/By_example/Canvas_size_and_WebGL")}}
+
+## Specifications
+
+| Specification                                                            | Status                   | Comment            |
+| ------------------------------------------------------------------------ | ------------------------ | ------------------ |
+| {{SpecName('WebGL', "#5.14", "WebGLRenderingContext")}} | {{Spec2('WebGL')}} | Initial definition |
+
+## Browser compatibility
+
+{{Compat("api/WebGLRenderingContext", "WebGLRenderingContext")}}
+
+## See also
+
+- {{domxref("HTMLCanvasElement")}}
diff --git a/files/fr/web/api/webglrenderingcontext/isbuffer/index.md b/files/fr/web/api/webglrenderingcontext/isbuffer/index.md
index 8a10a0f09c..bc696a54f4 100644
--- a/files/fr/web/api/webglrenderingcontext/isbuffer/index.md
+++ b/files/fr/web/api/webglrenderingcontext/isbuffer/index.md
@@ -8,70 +8,66 @@ tags:
   - WebGLRenderingContext
 translation_of: Web/API/WebGLRenderingContext/isBuffer
 ---
-<div>{{APIRef("WebGL")}}</div>
+{{APIRef("WebGL")}}
 
-<p>La méthode <strong><code>WebGLRenderingContext.isBuffer()</code></strong> de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> renvoie <code>true</code> si le {{domxref ("WebGLBuffer")}} passé est valide et <code>false</code> dans le cas contraire.</p>
+La méthode **`WebGLRenderingContext.isBuffer()`** de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) renvoie `true` si le {{domxref ("WebGLBuffer")}} passé est valide et `false` dans le cas contraire.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">GLboolean <var>gl</var>.isBuffer(<var>tampon</var>);
-</pre>
+    GLboolean gl.isBuffer(tampon);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt>tampon</dt>
- <dd>Un {{domxref("WebGLBuffer")}} à vérifier.</dd>
-</dl>
+- tampon
+  - : Un {{domxref("WebGLBuffer")}} à vérifier.
 
-<h3 id="Valeur_retournée">Valeur retournée</h3>
+### Valeur retournée
 
-<p>Un {{domxref("GLboolean")}} indiquant si le tampon est ou non valide.</p>
+Un {{domxref("GLboolean")}} indiquant si le tampon est ou non valide.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Création_d'un_tampon">Création d'un tampon</h3>
+### Création d'un tampon
 
-<pre class="brush: js">var canevas = document.getElementById('canevas');
+```js
+var canevas = document.getElementById('canevas');
 var gl = canevas.getContext('webgl');
 var tampon = gl.createBuffer();
 
 gl.isBuffer(tampon);
-</pre>
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('WebGL', "#5.14.5", "isBuffer")}}</td>
-   <td>{{Spec2('WebGL')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('OpenGL ES 2.0', "glIsBuffer.xml", "glIsBuffer")}}</td>
-   <td>{{Spec2('OpenGL ES 2.0')}}</td>
-   <td>
-    <p>Page man de l’API OpenGL.</p>
-   </td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="col">Spécification</th>
+      <th scope="col">Statut</th>
+      <th scope="col">Commentaire</th>
+    </tr>
+    <tr>
+      <td>{{SpecName('WebGL', "#5.14.5", "isBuffer")}}</td>
+      <td>{{Spec2('WebGL')}}</td>
+      <td>Définition initiale.</td>
+    </tr>
+    <tr>
+      <td>
+        {{SpecName('OpenGL ES 2.0', "glIsBuffer.xml", "glIsBuffer")}}
+      </td>
+      <td>{{Spec2('OpenGL ES 2.0')}}</td>
+      <td><p>Page man de l’API OpenGL.</p></td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.WebGLRenderingContext.isBuffer")}}</p>
+{{Compat("api.WebGLRenderingContext.isBuffer")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("WebGLRenderingContext.bindBuffer()")}}</li>
- <li>{{domxref("WebGLRenderingContext.createBuffer()")}}</li>
- <li>{{domxref("WebGLRenderingContext.deleteBuffer()")}}</li>
- <li>Autres tampons : {{domxref("WebGLFramebuffer")}}, {{domxref("WebGLRenderbuffer")}}</li>
-</ul>
+- {{domxref("WebGLRenderingContext.bindBuffer()")}}
+- {{domxref("WebGLRenderingContext.createBuffer()")}}
+- {{domxref("WebGLRenderingContext.deleteBuffer()")}}
+- Autres tampons : {{domxref("WebGLFramebuffer")}}, {{domxref("WebGLRenderbuffer")}}
diff --git a/files/fr/web/api/webglrenderingcontext/shadersource/index.md b/files/fr/web/api/webglrenderingcontext/shadersource/index.md
index 7825a72f7b..91b7d1629e 100644
--- a/files/fr/web/api/webglrenderingcontext/shadersource/index.md
+++ b/files/fr/web/api/webglrenderingcontext/shadersource/index.md
@@ -9,66 +9,48 @@ tags:
   - WebGLRenderingContext
 translation_of: Web/API/WebGLRenderingContext/shaderSource
 ---
-<div>{{APIRef("WebGL")}}</div>
+{{APIRef("WebGL")}}
 
-<p>La méthode <strong><code>WebGLRenderingContext.shaderSource()</code></strong> de l'<a href="/en-US/docs/Web/API/WebGL_API">API WebGL</a> définit le code source d'un {{domxref("WebGLShader")}}.</p>
+La méthode **`WebGLRenderingContext.shaderSource()`** de l'[API WebGL](/en-US/docs/Web/API/WebGL_API) définit le code source d'un {{domxref("WebGLShader")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">void <var>gl</var>.shaderSource(<var>shader</var>, <var>source</var>);
-</pre>
+    void gl.shaderSource(shader, source);
 
-<h3 id="Parameters">Parameters</h3>
+### Parameters
 
-<dl>
- <dt>shader</dt>
- <dd>Un objet {{domxref("WebGLShader")}} dans lequel définir le code source.</dd>
- <dt>source</dt>
- <dd>Une {{domxref("DOMString")}} contenant le code source GLSL à définir.</dd>
-</dl>
+- shader
+  - : Un objet {{domxref("WebGLShader")}} dans lequel définir le code source.
+- source
+  - : Une {{domxref("DOMString")}} contenant le code source GLSL à définir.
 
-<h3 id="Valeur_retournée">Valeur retournée</h3>
+### Valeur retournée
 
-<p>Aucune.</p>
+Aucune.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">var shader = gl.createShader(gl.VERTEX_SHADER);
+```js
+var shader = gl.createShader(gl.VERTEX_SHADER);
 gl.shaderSource(shader, originalSource);
 
-var source = gl.getShaderSource(shader);</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('WebGL', "#5.14.9", "shaderSource")}}</td>
-   <td>{{Spec2('WebGL')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('OpenGL ES 2.0', "glShaderSource.xml", "glShaderSource")}}</td>
-   <td>{{Spec2('OpenGL ES 2.0')}}</td>
-   <td>Page man de l'API OpenGL (similaire).</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.WebGLRenderingContext.shaderSource")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("WebGLRenderingContext.createShader()")}}</li>
- <li>{{domxref("WebGLRenderingContext.isShader()")}}</li>
- <li>{{domxref("WebGLRenderingContext.deleteShader()")}}</li>
- <li>{{domxref("WebGLRenderingContext.getShaderSource()")}}</li>
-</ul>
+var source = gl.getShaderSource(shader);
+```
+
+## Spécifications
+
+| Spécification                                                                                | Statut                               | Commentaire                           |
+| -------------------------------------------------------------------------------------------- | ------------------------------------ | ------------------------------------- |
+| {{SpecName('WebGL', "#5.14.9", "shaderSource")}}                             | {{Spec2('WebGL')}}             | Définition initiale.                  |
+| {{SpecName('OpenGL ES 2.0', "glShaderSource.xml", "glShaderSource")}} | {{Spec2('OpenGL ES 2.0')}} | Page man de l'API OpenGL (similaire). |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.WebGLRenderingContext.shaderSource")}}
+
+## Voir aussi
+
+- {{domxref("WebGLRenderingContext.createShader()")}}
+- {{domxref("WebGLRenderingContext.isShader()")}}
+- {{domxref("WebGLRenderingContext.deleteShader()")}}
+- {{domxref("WebGLRenderingContext.getShaderSource()")}}
diff --git a/files/fr/web/api/webglrenderingcontext/teximage2d/index.md b/files/fr/web/api/webglrenderingcontext/teximage2d/index.md
index af95e8f3c8..c8d54e80c9 100644
--- a/files/fr/web/api/webglrenderingcontext/teximage2d/index.md
+++ b/files/fr/web/api/webglrenderingcontext/teximage2d/index.md
@@ -10,231 +10,217 @@ tags:
   - WebGLRenderingContext
 translation_of: Web/API/WebGLRenderingContext/texImage2D
 ---
-<div>{{APIRef("WebGL")}}</div>
-
-<p>La méthode <strong><code>WebGLRenderingContext.texImage2D()</code></strong> de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> spécifie une image de texture bidimensionnelle.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">// WebGL1:
-void <var>gl</var>.texImage2D(<var>cible</var>, <var>niveau</var>, <var>formatinterne</var>, <var>largeur</var>, <var>hauteur</var>, <var>bordure</var>, <var>format</var>, <var>type</var>, ArrayBufferView? <var>pixels</var>);
-void <var>gl</var>.texImage2D(<var>cible</var>, <var>niveau</var>, <var>formatinterne</var>, <var>format</var>, <var>type</var>, ImageData? <var>pixels</var>);
-void <var>gl</var>.texImage2D(<var>cible</var>, <var>niveau</var>, <var>formatinterne</var>, <var>format</var>, <var>type</var>, HTMLImageElement? <var>pixels</var>);
-void <var>gl</var>.texImage2D(<var>cible</var>, <var>niveau</var>, <var>formatinterne</var>, <var>format</var>, <var>type</var>, HTMLCanvasElement? <var>pixels</var>);
-void <var>gl</var>.texImage2D(<var>cible</var>, <var>niveau</var>, <var>formatinterne</var>, <var>format</var>, <var>type</var>, HTMLVideoElement? <var>pixels</var>);
-void <var>gl</var>.texImage2D(<var>cible</var>, <var>niveau</var>, <var>formatinterne</var>, <var>format</var>, <var>type</var>, ImageBitmap? <var>pixels</var>);
-
-// WebGL2:
-void gl.texImage2D(<var>cible</var>, <var>niveau</var>, <var>formatinterne</var>, <var>largeur</var>, <var>hauteur</var>, <var>bordure</var>, <var>format</var>, <var>type</var>, GLintptr <em>decalage</em>);
-void gl.texImage2D(<var>cible</var>, <var>niveau</var>, <var>formatinterne</var>, <var>largeur</var>, <var>hauteur</var>, <var>bordure</var>, <var>format</var>, <var>type</var>, HTMLCanvasElement <em>source</em>);
-void gl.texImage2D(<var>cible</var>, <var>niveau</var>, <var>formatinterne</var>, <var>largeur</var>, <var>hauteur</var>, <var>bordure</var>, <var>format</var>, <var>type</var>, HTMLImageElement <em>source</em>);
-void gl.texImage2D(<var>cible</var>, <var>niveau</var>, <var>formatinterne</var>, <var>largeur</var>, <var>hauteur</var>, <var>bordure</var><em>, format, type</em>, HTMLVideoElement <em>source</em>);
-void gl.texImage2D(<var>cible</var>, <var>niveau</var>, <var>formatinterne</var>, <var>largeur</var>, <var>hauteur</var>, <var>bordure</var><em>, format, type</em>, ImageBitmap <em>source</em>);
-void gl.texImage2D(<var>cible</var>, <var>niveau</var>, <var>formatinterne</var>, <var>largeur</var>, <var>hauteur</var>, <var>bordure</var><em>, format, type</em>, ImageData <em>source</em>);
-void gl.texImage2D(<var>cible</var>, <var>niveau</var>, <var>formatinterne</var>, <var>largeur</var>, <var>hauteur</var>, <var>bordure</var><em>, format, type</em>, ArrayBufferView <em>donneesSrc</em>, <em>decalageSrc</em>);
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt><code>cible</code></dt>
- <dd><p>Un {{domxref ("GLenum")}} indiquant le point de liaison (cible) de la texture active. Valeurs possibles :</p>
- <ul>
-  <li><code>gl.TEXTURE_2D</code> : une texture bidimensionnelle ;</li>
-  <li><code>gl.TEXTURE_CUBE_MAP_POSITIVE_X</code> : face X positive pour une texture mappée sur un cube ;</li>
-  <li><code>gl.TEXTURE_CUBE_MAP_NEGATIVE_X</code> : face X négative pour une texture mappée sur un cube ;</li>
-  <li><code>gl.TEXTURE_CUBE_MAP_POSITIVE_Y</code> : face Y positive pour une texture mappée sur un cube ;</li>
-  <li><code>gl.TEXTURE_CUBE_MAP_NEGATIVE_Y</code> : face Y négative pour une texture mappée sur un cube ;</li>
-  <li><code>gl.TEXTURE_CUBE_MAP_POSITIVE_Z</code> : face Z positive pour une texture mappée sur un cube ;</li>
-  <li><code>gl.TEXTURE_CUBE_MAP_NEGATIVE_Z</code> : face Z négative pour une texture mappée sur un cube.</li>
- </ul>
- </dd>
- <dt><code>niveau</code></dt>
- <dd>Un {{domxref ("GLint")}} indiquant le niveau de détail. Le niveau 0 est le niveau de l'image de base et le niveau n est le n-ième niveau de réduction du mipmap.</dd>
- <dt><code>formatinterne</code></dt>
- <dd><p>Un {{domxref ("GLint")}} indiquant les composantes de couleur dans la texture. Valeurs possibles :</p>
- <ul>
-  <li><code>gl.ALPHA</code> : ignore les composantes rouge, vert et bleu, et lit la composante alpha ;</li>
-  <li><code>gl.RGB</code> : ignore la composante alpha et lit les composantes rouge, vert et bleu ;</li>
-  <li><code>gl.RGBA</code> : les composantes rouge, vert, bleu et alpha sont lues à partir du tampon des couleurs ;</li>
-  <li><code>gl.LUMINANCE</code> : chaque composante de couleur est une composante de luminance, alpha vaut 1,0 ;</li>
-  <li><code>gl.LUMINANCE_ALPHA</code> : chaque composante est une composante de luminance/alpha ;</li>
-  <li>lors de l'utilisation de l'extension {{domxref("WEBGL_depth_texture")}} :
-   <ul>
-    <li><code>gl.DEPTH_COMPONENT</code></li>
-    <li><code>gl.DEPTH_STENCIL</code></li>
-   </ul>
-  </li>
-  <li>lors de l'utilisation de l'extension {{domxref("EXT_sRGB")}} :
-   <ul>
-    <li><code>ext.SRGB_EXT</code></li>
-    <li><code>ext.SRGB_ALPHA_EXT</code></li>
-   </ul>
-  </li>
-  <li>Lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, les valeurs suivantes sont en outre disponibles :
-   <ul>
-    <li><code>gl.R8</code></li>
-    <li><code>gl.R16F</code></li>
-    <li><code>gl.R32F</code></li>
-    <li><code>gl.R8UI</code></li>
-    <li><code>gl.RG8</code></li>
-    <li><code>gl.RG16F</code></li>
-    <li><code>gl.RG32F</code></li>
-    <li><code>gl.RG8UI</code></li>
-    <li><code>gl.RG16UI</code></li>
-    <li><code>gl.RG32UI</code></li>
-    <li><code>gl.RGB8</code></li>
-    <li><code>gl.SRGB8</code></li>
-    <li><code>gl.RGB565</code></li>
-    <li><code>gl.R11F_G11F_B10F</code></li>
-    <li><code>gl.RGB9_E5</code></li>
-    <li><code>gl.RGB16F</code></li>
-    <li><code>gl.RGB32F</code></li>
-    <li><code>gl.RGB8UI</code></li>
-    <li><code>gl.RGBA8</code></li>
-    <li><code>gl.SRGB8_APLHA8</code></li>
-    <li><code>gl.RGB5_A1</code></li>
-    <li><code>gl.RGB10_A2</code></li>
-    <li><code>gl.RGBA4</code></li>
-    <li><code>gl.RGBA16F</code></li>
-    <li><code>gl.RGBA32F</code></li>
-    <li><code>gl.RGBA8UI</code></li>
-   </ul>
-  </li>
- </ul>
- </dd>
- <dt><code>largeur</code></dt>
- <dd>Un {{domxref ("GLsizei")}} indiquant la largeur de la texture.</dd>
- <dt><code>hauteur</code></dt>
- <dd>Un {{domxref ("GLsizei")}} indiquant la hauteur de la texture.</dd>
- <dt><code>bordure</code></dt>
- <dd>Un {{domxref("GLint")}} indiquant la largeur de la bordure. Doit être 0.</dd>
- <dt><code>format</code></dt>
- <dd>Un {{domxref("GLenum")}} indiquant le format des données de texel. En WebGL 1, cela doit être identique à <code>formatinterne</code> (voir ci-dessus). En WebGL 2, les combinaisons sont répertoriées dans <a href="https://www.khronos.org/registry/webgl/specs/latest/2.0/#TEXTURE_TYPES_FORMATS_FROM_DOM_ELEMENTS_TABLE">ce tableau</a>.</dd>
- <dt><code>type</code></dt>
- <dd><p>Un {{domxref("GLenum")}} indiquant le type de données des données de texel. Valeurs possibles :</p>
- <ul>
-  <li><code>gl.UNSIGNED_BYTE</code> : 8 bits par canal pour <code>gl.RGBA</code> ;</li>
-  <li><code>gl.UNSIGNED_SHORT_5_6_5</code> : 5 bits de rouge, 6 bits de vert, 5 bits de bleu ;</li>
-  <li><code>gl.UNSIGNED_SHORT_4_4_4_4</code> : 4 bits de rouge, 4 bits de vert, 4 bits de bleu, 4 bits d'alpha ;</li>
-  <li><code>gl.UNSIGNED_SHORT_5_5_5_1</code> : 5 bits de rouge, 5 bits de vert, 5 bits de bleu, 1 bit d'alpha ;</li>
-  <li>lors de l'utilisation de l'extension {{domxref ("WEBGL_depth_texture")}} :
-   <ul>
-    <li><code>gl.UNSIGNED_SHORT</code></li>
-    <li><code>gl.UNSIGNED_INT</code></li>
-    <li><code>ext.UNSIGNED_INT_24_8_WEBGL</code> (constante fournie par l'extension)</li>
-   </ul>
-  </li>
-  <li>lors de l'utilisation de l'extension {{domxref("OES_texture_float")}} :
-   <ul>
-    <li><code>gl.FLOAT</code></li>
-   </ul>
-  </li>
-  <li>lors de l'utilisation de l'extension {{domxref("OES_texture_half_float")}} :
-   <ul>
-    <li><code>ext.HALF_FLOAT_OES</code> (constante fournie par l'extension)</li>
-   </ul>
-  </li>
-  <li>lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, les valeurs suivantes sont en outre disponibles :
-   <ul>
-    <li><code>gl.BYTE</code></li>
-    <li><code>gl.UNSIGNED_SHORT</code></li>
-    <li><code>gl.SHORT</code></li>
-    <li><code>gl.UNSIGNED_INT</code></li>
-    <li><code>gl.INT</code></li>
-    <li><code>gl.HALF_FLOAT</code></li>
-    <li><code>gl.FLOAT</code></li>
-    <li><code>gl.UNSIGNED_INT_2_10_10_10_REV</code></li>
-    <li><code>gl.UNSIGNED_INT_10F_11F_11F_REV</code></li>
-    <li><code>gl.UNSIGNED_INT_5_9_9_9_REV</code></li>
-    <li><code>gl.UNSIGNED_INT_24_8</code></li>
-    <li><code>gl.FLOAT_32_UNSIGNED_INT_24_8_REV</code> (les pixels doivent être {{jsxref("null")}})</li>
-   </ul>
-  </li>
- </ul>
- </dd>
- <dt><code>pixels</code></dt>
- <dd><p>L'un des objets suivants peut être utilisé comme source de pixels pour la texture :</p>
- <ul>
-  <li>{{domxref("ArrayBufferView")}},
-   <ul>
-    <li>un {{jsxref("Uint8Array")}} doit être utilisé si <code>type</code> est <code>gl.UNSIGNED_BYTE</code> ;</li>
-    <li>un {{jsxref("Uint16Array")}} doit être utilisé si <code>type</code> est <code>gl.UNSIGNED_SHORT_5_6_5</code>, <code>gl.UNSIGNED_SHORT_4_4_4_4</code>, <code>gl.UNSIGNED_SHORT_5_5_5_1</code>, <code>gl.UNSIGNED_SHORT</code> ou <code>ext.HALF_FLOAT_OES</code> ;</li>
-    <li>un {{jsxref("Uint32Array")}} doit être utilisé si <code>type</code> est <code>gl.UNSIGNED_INT</code> ou <code>ext.UNSIGNED_INT_24_8_WEBGL</code> ;</li>
-    <li>un {{jsxref("Float32Array")}} doit être utilisé si <code>type</code> est <code>gl.FLOAT</code> ;</li>
-   </ul>
-  </li>
-  <li>{{domxref("ImageData")}},</li>
-  <li>{{domxref("HTMLImageElement")}},</li>
-  <li>{{domxref("HTMLCanvasElement")}},</li>
-  <li>{{domxref("HTMLVideoElement")}},</li>
-  <li>{{domxref("ImageBitmap")}}.</li>
- </ul>
- </dd>
- <dt><code><strong>decalage</strong></code></dt>
- <dd>(WebGL 2 seulement) Un décalage en octets {{domxref("GLintptr")}} dans le magasin de données du {{domxref("WebGLBuffer")}}. Utilisé pour télécharger des données vers la {{domxref ("WebGLTexture")}} liée, depuis le <code>WebGLBuffer</code> lié à la cible <code>PIXEL_UNPACK_BUFFER</code>.</dd>
-</dl>
-
-<h3 id="Valeur_retournée">Valeur retournée</h3>
-
-<p>Aucune.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
+{{APIRef("WebGL")}}
+
+La méthode **`WebGLRenderingContext.texImage2D()`** de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) spécifie une image de texture bidimensionnelle.
+
+## Syntaxe
+
+    // WebGL1:
+    void gl.texImage2D(cible, niveau, formatinterne, largeur, hauteur, bordure, format, type, ArrayBufferView? pixels);
+    void gl.texImage2D(cible, niveau, formatinterne, format, type, ImageData? pixels);
+    void gl.texImage2D(cible, niveau, formatinterne, format, type, HTMLImageElement? pixels);
+    void gl.texImage2D(cible, niveau, formatinterne, format, type, HTMLCanvasElement? pixels);
+    void gl.texImage2D(cible, niveau, formatinterne, format, type, HTMLVideoElement? pixels);
+    void gl.texImage2D(cible, niveau, formatinterne, format, type, ImageBitmap? pixels);
+
+    // WebGL2:
+    void gl.texImage2D(cible, niveau, formatinterne, largeur, hauteur, bordure, format, type, GLintptr decalage);
+    void gl.texImage2D(cible, niveau, formatinterne, largeur, hauteur, bordure, format, type, HTMLCanvasElement source);
+    void gl.texImage2D(cible, niveau, formatinterne, largeur, hauteur, bordure, format, type, HTMLImageElement source);
+    void gl.texImage2D(cible, niveau, formatinterne, largeur, hauteur, bordure, format, type, HTMLVideoElement source);
+    void gl.texImage2D(cible, niveau, formatinterne, largeur, hauteur, bordure, format, type, ImageBitmap source);
+    void gl.texImage2D(cible, niveau, formatinterne, largeur, hauteur, bordure, format, type, ImageData source);
+    void gl.texImage2D(cible, niveau, formatinterne, largeur, hauteur, bordure, format, type, ArrayBufferView donneesSrc, decalageSrc);
+
+### Paramètres
+
+- `cible`
+
+  - : Un {{domxref ("GLenum")}} indiquant le point de liaison (cible) de la texture active. Valeurs possibles :
+
+    - `gl.TEXTURE_2D` : une texture bidimensionnelle ;
+    - `gl.TEXTURE_CUBE_MAP_POSITIVE_X` : face X positive pour une texture mappée sur un cube ;
+    - `gl.TEXTURE_CUBE_MAP_NEGATIVE_X` : face X négative pour une texture mappée sur un cube ;
+    - `gl.TEXTURE_CUBE_MAP_POSITIVE_Y` : face Y positive pour une texture mappée sur un cube ;
+    - `gl.TEXTURE_CUBE_MAP_NEGATIVE_Y` : face Y négative pour une texture mappée sur un cube ;
+    - `gl.TEXTURE_CUBE_MAP_POSITIVE_Z` : face Z positive pour une texture mappée sur un cube ;
+    - `gl.TEXTURE_CUBE_MAP_NEGATIVE_Z` : face Z négative pour une texture mappée sur un cube.
+
+- `niveau`
+  - : Un {{domxref ("GLint")}} indiquant le niveau de détail. Le niveau 0 est le niveau de l'image de base et le niveau n est le n-ième niveau de réduction du mipmap.
+- `formatinterne`
+
+  - : Un {{domxref ("GLint")}} indiquant les composantes de couleur dans la texture. Valeurs possibles :
+
+    - `gl.ALPHA` : ignore les composantes rouge, vert et bleu, et lit la composante alpha ;
+    - `gl.RGB` : ignore la composante alpha et lit les composantes rouge, vert et bleu ;
+    - `gl.RGBA` : les composantes rouge, vert, bleu et alpha sont lues à partir du tampon des couleurs ;
+    - `gl.LUMINANCE` : chaque composante de couleur est une composante de luminance, alpha vaut 1,0 ;
+    - `gl.LUMINANCE_ALPHA` : chaque composante est une composante de luminance/alpha ;
+    - lors de l'utilisation de l'extension {{domxref("WEBGL_depth_texture")}} :
+
+      - `gl.DEPTH_COMPONENT`
+      - `gl.DEPTH_STENCIL`
+
+    - lors de l'utilisation de l'extension {{domxref("EXT_sRGB")}} :
+
+      - `ext.SRGB_EXT`
+      - `ext.SRGB_ALPHA_EXT`
+
+    - Lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, les valeurs suivantes sont en outre disponibles :
+
+      - `gl.R8`
+      - `gl.R16F`
+      - `gl.R32F`
+      - `gl.R8UI`
+      - `gl.RG8`
+      - `gl.RG16F`
+      - `gl.RG32F`
+      - `gl.RG8UI`
+      - `gl.RG16UI`
+      - `gl.RG32UI`
+      - `gl.RGB8`
+      - `gl.SRGB8`
+      - `gl.RGB565`
+      - `gl.R11F_G11F_B10F`
+      - `gl.RGB9_E5`
+      - `gl.RGB16F`
+      - `gl.RGB32F`
+      - `gl.RGB8UI`
+      - `gl.RGBA8`
+      - `gl.SRGB8_APLHA8`
+      - `gl.RGB5_A1`
+      - `gl.RGB10_A2`
+      - `gl.RGBA4`
+      - `gl.RGBA16F`
+      - `gl.RGBA32F`
+      - `gl.RGBA8UI`
+
+- `largeur`
+  - : Un {{domxref ("GLsizei")}} indiquant la largeur de la texture.
+- `hauteur`
+  - : Un {{domxref ("GLsizei")}} indiquant la hauteur de la texture.
+- `bordure`
+  - : Un {{domxref("GLint")}} indiquant la largeur de la bordure. Doit être 0.
+- `format`
+  - : Un {{domxref("GLenum")}} indiquant le format des données de texel. En WebGL 1, cela doit être identique à `formatinterne` (voir ci-dessus). En WebGL 2, les combinaisons sont répertoriées dans [ce tableau](https://www.khronos.org/registry/webgl/specs/latest/2.0/#TEXTURE_TYPES_FORMATS_FROM_DOM_ELEMENTS_TABLE).
+- `type`
+
+  - : Un {{domxref("GLenum")}} indiquant le type de données des données de texel. Valeurs possibles :
+
+    - `gl.UNSIGNED_BYTE` : 8 bits par canal pour `gl.RGBA` ;
+    - `gl.UNSIGNED_SHORT_5_6_5` : 5 bits de rouge, 6 bits de vert, 5 bits de bleu ;
+    - `gl.UNSIGNED_SHORT_4_4_4_4` : 4 bits de rouge, 4 bits de vert, 4 bits de bleu, 4 bits d'alpha ;
+    - `gl.UNSIGNED_SHORT_5_5_5_1` : 5 bits de rouge, 5 bits de vert, 5 bits de bleu, 1 bit d'alpha ;
+    - lors de l'utilisation de l'extension {{domxref ("WEBGL_depth_texture")}} :
+
+      - `gl.UNSIGNED_SHORT`
+      - `gl.UNSIGNED_INT`
+      - `ext.UNSIGNED_INT_24_8_WEBGL` (constante fournie par l'extension)
+
+    - lors de l'utilisation de l'extension {{domxref("OES_texture_float")}} :
+
+      - `gl.FLOAT`
+
+    - lors de l'utilisation de l'extension {{domxref("OES_texture_half_float")}} :
+
+      - `ext.HALF_FLOAT_OES` (constante fournie par l'extension)
+
+    - lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, les valeurs suivantes sont en outre disponibles :
+
+      - `gl.BYTE`
+      - `gl.UNSIGNED_SHORT`
+      - `gl.SHORT`
+      - `gl.UNSIGNED_INT`
+      - `gl.INT`
+      - `gl.HALF_FLOAT`
+      - `gl.FLOAT`
+      - `gl.UNSIGNED_INT_2_10_10_10_REV`
+      - `gl.UNSIGNED_INT_10F_11F_11F_REV`
+      - `gl.UNSIGNED_INT_5_9_9_9_REV`
+      - `gl.UNSIGNED_INT_24_8`
+      - `gl.FLOAT_32_UNSIGNED_INT_24_8_REV` (les pixels doivent être {{jsxref("null")}})
+
+- `pixels`
+
+  - : L'un des objets suivants peut être utilisé comme source de pixels pour la texture :
+
+    - {{domxref("ArrayBufferView")}},
+
+      - un {{jsxref("Uint8Array")}} doit être utilisé si `type` est `gl.UNSIGNED_BYTE` ;
+      - un {{jsxref("Uint16Array")}} doit être utilisé si `type` est `gl.UNSIGNED_SHORT_5_6_5`, `gl.UNSIGNED_SHORT_4_4_4_4`, `gl.UNSIGNED_SHORT_5_5_5_1`, `gl.UNSIGNED_SHORT` ou `ext.HALF_FLOAT_OES` ;
+      - un {{jsxref("Uint32Array")}} doit être utilisé si `type` est `gl.UNSIGNED_INT` ou `ext.UNSIGNED_INT_24_8_WEBGL` ;
+      - un {{jsxref("Float32Array")}} doit être utilisé si `type` est `gl.FLOAT` ;
+
+    - {{domxref("ImageData")}},
+    - {{domxref("HTMLImageElement")}},
+    - {{domxref("HTMLCanvasElement")}},
+    - {{domxref("HTMLVideoElement")}},
+    - {{domxref("ImageBitmap")}}.
+
+- **`decalage`**
+  - : (WebGL 2 seulement) Un décalage en octets {{domxref("GLintptr")}} dans le magasin de données du {{domxref("WebGLBuffer")}}. Utilisé pour télécharger des données vers la {{domxref ("WebGLTexture")}} liée, depuis le `WebGLBuffer` lié à la cible `PIXEL_UNPACK_BUFFER`.
+
+### Valeur retournée
+
+Aucune.
+
+## Exemples
+
+```js
+gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
+```
+
+## Spécifications
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('WebGL', "#5.14.8", "texImage2D")}}</td>
-   <td>{{Spec2('WebGL')}}</td>
-   <td>
-    <p>Définition initiale pour WebGL.</p>
-   </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('OpenGL ES 2.0', "glTexImage2D.xml", "glTexImage2D")}}</td>
-   <td>{{Spec2('OpenGL ES 2.0')}}</td>
-   <td>
-    <p>Page man de l’API OpenGL ES 2.0 (similaire).</p>
-   </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('WebGL2', "#3.7.6", "texImage2D")}}</td>
-   <td>{{Spec2('WebGL2')}}</td>
-   <td>Définition mise à jour pour WebGL.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('OpenGL ES 3.0', "glTexImage2D.xhtml", "glTexImage2D")}}</td>
-   <td>{{Spec2('OpenGL ES 3.0')}}</td>
-   <td>Page man de l’API OpenGL ES 3.0 (similaire).</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="col">Spécification</th>
+      <th scope="col">Statut</th>
+      <th scope="col">Commentaire</th>
+    </tr>
+    <tr>
+      <td>{{SpecName('WebGL', "#5.14.8", "texImage2D")}}</td>
+      <td>{{Spec2('WebGL')}}</td>
+      <td><p>Définition initiale pour WebGL.</p></td>
+    </tr>
+    <tr>
+      <td>
+        {{SpecName('OpenGL ES 2.0', "glTexImage2D.xml", "glTexImage2D")}}
+      </td>
+      <td>{{Spec2('OpenGL ES 2.0')}}</td>
+      <td><p>Page man de l’API OpenGL ES 2.0 (similaire).</p></td>
+    </tr>
+    <tr>
+      <td>{{SpecName('WebGL2', "#3.7.6", "texImage2D")}}</td>
+      <td>{{Spec2('WebGL2')}}</td>
+      <td>Définition mise à jour pour WebGL.</td>
+    </tr>
+    <tr>
+      <td>
+        {{SpecName('OpenGL ES 3.0', "glTexImage2D.xhtml", "glTexImage2D")}}
+      </td>
+      <td>{{Spec2('OpenGL ES 3.0')}}</td>
+      <td>Page man de l’API OpenGL ES 3.0 (similaire).</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.WebGLRenderingContext.texImage2D")}}</p>
+{{Compat("api.WebGLRenderingContext.texImage2D")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("WebGLRenderingContext.createTexture()")}}</li>
- <li>{{domxref("WebGLRenderingContext.bindTexture()")}}</li>
- <li>{{domxref("WebGLRenderingContext.texSubImage2D()")}}</li>
- <li>{{domxref("WebGLRenderingContext.compressedTexImage2D()")}}</li>
- <li>{{domxref("WebGLRenderingContext.copyTexImage2D()")}}</li>
- <li>{{domxref("WebGLRenderingContext.getTexParameter()")}}</li>
- <li>{{domxref("WEBGL_depth_texture")}}</li>
- <li>{{domxref("OES_texture_float")}}</li>
- <li>{{domxref("OES_texture_half_float")}}</li>
- <li>{{domxref("EXT_sRGB")}}</li>
-</ul>
+- {{domxref("WebGLRenderingContext.createTexture()")}}
+- {{domxref("WebGLRenderingContext.bindTexture()")}}
+- {{domxref("WebGLRenderingContext.texSubImage2D()")}}
+- {{domxref("WebGLRenderingContext.compressedTexImage2D()")}}
+- {{domxref("WebGLRenderingContext.copyTexImage2D()")}}
+- {{domxref("WebGLRenderingContext.getTexParameter()")}}
+- {{domxref("WEBGL_depth_texture")}}
+- {{domxref("OES_texture_float")}}
+- {{domxref("OES_texture_half_float")}}
+- {{domxref("EXT_sRGB")}}
diff --git a/files/fr/web/api/webglrenderingcontext/texparameter/index.md b/files/fr/web/api/webglrenderingcontext/texparameter/index.md
index ec02f92374..705a95ba60 100644
--- a/files/fr/web/api/webglrenderingcontext/texparameter/index.md
+++ b/files/fr/web/api/webglrenderingcontext/texparameter/index.md
@@ -1,5 +1,5 @@
 ---
-title: 'WebGLRenderingContext.texParameter[fi]()'
+title: WebGLRenderingContext.texParameter[fi]()
 slug: Web/API/WebGLRenderingContext/texParameter
 tags:
   - API
@@ -10,168 +10,168 @@ tags:
   - WebGLRenderingContext
 translation_of: Web/API/WebGLRenderingContext/texParameter
 ---
-<div>{{APIRef("WebGL")}}</div>
+{{APIRef("WebGL")}}
 
-<p>Les méthodes <strong><code>WebGLRenderingContext.texParameter[fi]()</code></strong> de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> définissent les paramètres de texture.</p>
+Les méthodes **`WebGLRenderingContext.texParameter[fi]()`** de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) définissent les paramètres de texture.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">void <var>gl</var>.texParameterf(GLenum <var>cible</var>, GLenum <var>nomp</var>, GLfloat <var>param</var>);
-void <var>gl</var>.texParameteri(GLenum <var>cible</var>, GLenum <var>nomp</var>, GLint <var>param</var>);
-</pre>
+    void gl.texParameterf(GLenum cible, GLenum nomp, GLfloat param);
+    void gl.texParameteri(GLenum cible, GLenum nomp, GLint param);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt>cible</dt>
- <dd>Un {{domxref("GLenum")}} indiquant le point de liaison (cible). Valeurs possibles :
- <ul>
-  <li><code>gl.TEXTURE_2D</code> : une texture bi-dimensionelle.</li>
-  <li><code>gl.TEXTURE_CUBE_MAP</code> : une texte appliquée sur un cube.</li>
-  <li>Lorsqu'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}} est utilisé, les valeurs suivantes sont en outre disponibles :
-   <ul>
-    <li><code>gl.TEXTURE_3D</code> : une texture tri-dimensionnelle.</li>
-    <li><code>gl.TEXTURE_2D_ARRAY</code> : une texture bi-dimensionnelle en tableau.</li>
-   </ul>
-  </li>
- </ul>
- </dd>
-</dl>
+- cible
 
-<p>Le paramètre <code>nomp</code> est un {{domxref("Glenum")}} indiquant le paramètre de texture à définir. Le paramètre <code>param</code> est un {{domxref("GLfloat")}} ou un {{domxref("GLint")}} indiquant la valeur pour le paramètre <code>nomp</code> indiqué.</p>
+  - : Un {{domxref("GLenum")}} indiquant le point de liaison (cible). Valeurs possibles :
+
+    - `gl.TEXTURE_2D` : une texture bi-dimensionelle.
+    - `gl.TEXTURE_CUBE_MAP` : une texte appliquée sur un cube.
+    - Lorsqu'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}} est utilisé, les valeurs suivantes sont en outre disponibles :
+
+      - `gl.TEXTURE_3D` : une texture tri-dimensionnelle.
+      - `gl.TEXTURE_2D_ARRAY` : une texture bi-dimensionnelle en tableau.
+
+Le paramètre `nomp` est un {{domxref("Glenum")}} indiquant le paramètre de texture à définir. Le paramètre `param` est un {{domxref("GLfloat")}} ou un {{domxref("GLint")}} indiquant la valeur pour le paramètre `nomp` indiqué.
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col"><code>pnom</code></th>
-   <th scope="col">Description</th>
-   <th scope="col"><code>param</code></th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <th colspan="3">Disponible en WebGL 1</th>
-  </tr>
-  <tr>
-   <td><code>gl.TEXTURE_MAG_FILTER</code></td>
-   <td>Filtre de grossissement de texture</td>
-   <td><code>gl.LINEAR</code> (valeur par défaut), <code>gl.NEAREST</code>.</td>
-  </tr>
-  <tr>
-   <td><code>gl.TEXTURE_MIN_FILTER</code></td>
-   <td>Filtre de réduction de texture</td>
-   <td><code>gl.LINEAR</code>, <code>gl.NEAREST</code>, <code>gl.NEAREST_MIPMAP_NEAREST</code>, <code>gl.LINEAR_MIPMAP_NEAREST</code>, <code>gl.NEAREST_MIPMAP_LINEAR</code> (valeur par défaut), <code>gl.LINEAR_MIPMAP_LINEAR</code>.</td>
-  </tr>
-  <tr>
-   <td><code>gl.TEXTURE_WRAP_S</code></td>
-   <td>Fonction d'emballage pour la coordonnée de texture <code>s</code></td>
-   <td><code>gl.REPEAT</code> (valeur par défaut),<code>gl.CLAMP_TO_EDGE</code>, <code>gl.MIRRORED_REPEAT</code>.</td>
-  </tr>
-  <tr>
-   <td><code>gl.TEXTURE_WRAP_T</code></td>
-   <td>Fonction d'emballage pour la coordonnée de texture <code>t</code></td>
-   <td><code>gl.REPEAT</code> (valeur par défaut),<code>gl.CLAMP_TO_EDGE</code>, <code>gl.MIRRORED_REPEAT</code>.</td>
-  </tr>
-  <tr>
-   <th colspan="3">Disponible en outre quand l'extension {{domxref("EXT_texture_filter_anisotropic")}} est utilisée</th>
-  </tr>
-  <tr>
-   <td><code>ext.TEXTURE_MAX_ANISOTROPY_EXT</code></td>
-   <td>Anisotropie maximum pour une texture</td>
-   <td>Une valeur {{domxref("GLfloat")}}.</td>
-  </tr>
-  <tr>
-   <th colspan="3">Disponible en outre quand un contexte WebGL 2 est utilisé</th>
-  </tr>
-  <tr>
-   <td><code>gl.TEXTURE_BASE_LEVEL</code></td>
-   <td>Niveau de mipmap de texture</td>
-   <td>Toutes valeurs int.</td>
-  </tr>
-  <tr>
-   <td><code>gl.TEXTURE_COMPARE_FUNC</code></td>
-   <td>Fonction de comparaison de texture</td>
-   <td><code>gl.LEQUAL</code> (valeur par défaut), <code>gl.GEQUAL</code>, <code>gl.LESS</code>, <code>gl.GREATER</code>, <code>gl.EQUAL</code>, <code>gl.NOTEQUAL</code>, <code>gl.ALWAYS</code>, <code>gl.NEVER</code>.</td>
-  </tr>
-  <tr>
-   <td><code>gl.TEXTURE_COMPARE_MODE</code></td>
-   <td>Mode de comparaison de texture</td>
-   <td><code>gl.NONE</code> (valeur défaut), <code>gl.COMPARE_REF_TO_TEXTURE</code>.</td>
-  </tr>
-  <tr>
-   <td><code>gl.TEXTURE_MAX_LEVEL</code></td>
-   <td>Niveau maximum de mipmap de texture en tableau</td>
-   <td>Toutes valeurs int.</td>
-  </tr>
-  <tr>
-   <td><code>gl.TEXTURE_MAX_LOD</code></td>
-   <td>
-    <p>Valeur de niveau-de-détail maximum de texture</p>
-   </td>
-   <td>Toutes valeurs float.</td>
-  </tr>
-  <tr>
-   <td><code>gl.TEXTURE_MIN_LOD</code></td>
-   <td>Valeur de niveau-de-détail minimum de texture</td>
-   <td>Toutes valeurs float.</td>
-  </tr>
-  <tr>
-   <td><code>gl.TEXTURE_WRAP_R</code></td>
-   <td>Fonction d'emballage pour la coordonnée de texture  <code>r</code></td>
-   <td><code>gl.REPEAT</code> (valeur par défaut), <code>gl.CLAMP_TO_EDGE</code>, <code>gl.MIRRORED_REPEAT</code>.</td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th scope="col"><code>pnom</code></th>
+      <th scope="col">Description</th>
+      <th scope="col"><code>param</code></th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th colspan="3">Disponible en WebGL 1</th>
+    </tr>
+    <tr>
+      <td><code>gl.TEXTURE_MAG_FILTER</code></td>
+      <td>Filtre de grossissement de texture</td>
+      <td>
+        <code>gl.LINEAR</code> (valeur par défaut), <code>gl.NEAREST</code>.
+      </td>
+    </tr>
+    <tr>
+      <td><code>gl.TEXTURE_MIN_FILTER</code></td>
+      <td>Filtre de réduction de texture</td>
+      <td>
+        <code>gl.LINEAR</code>, <code>gl.NEAREST</code>,
+        <code>gl.NEAREST_MIPMAP_NEAREST</code>,
+        <code>gl.LINEAR_MIPMAP_NEAREST</code>,
+        <code>gl.NEAREST_MIPMAP_LINEAR</code> (valeur par défaut),
+        <code>gl.LINEAR_MIPMAP_LINEAR</code>.
+      </td>
+    </tr>
+    <tr>
+      <td><code>gl.TEXTURE_WRAP_S</code></td>
+      <td>Fonction d'emballage pour la coordonnée de texture <code>s</code></td>
+      <td>
+        <code>gl.REPEAT</code> (valeur par
+        défaut),<code>gl.CLAMP_TO_EDGE</code>, <code>gl.MIRRORED_REPEAT</code>.
+      </td>
+    </tr>
+    <tr>
+      <td><code>gl.TEXTURE_WRAP_T</code></td>
+      <td>Fonction d'emballage pour la coordonnée de texture <code>t</code></td>
+      <td>
+        <code>gl.REPEAT</code> (valeur par
+        défaut),<code>gl.CLAMP_TO_EDGE</code>, <code>gl.MIRRORED_REPEAT</code>.
+      </td>
+    </tr>
+    <tr>
+      <th colspan="3">
+        Disponible en outre quand l'extension
+        {{domxref("EXT_texture_filter_anisotropic")}} est
+        utilisée
+      </th>
+    </tr>
+    <tr>
+      <td><code>ext.TEXTURE_MAX_ANISOTROPY_EXT</code></td>
+      <td>Anisotropie maximum pour une texture</td>
+      <td>Une valeur {{domxref("GLfloat")}}.</td>
+    </tr>
+    <tr>
+      <th colspan="3">
+        Disponible en outre quand un contexte WebGL 2 est utilisé
+      </th>
+    </tr>
+    <tr>
+      <td><code>gl.TEXTURE_BASE_LEVEL</code></td>
+      <td>Niveau de mipmap de texture</td>
+      <td>Toutes valeurs int.</td>
+    </tr>
+    <tr>
+      <td><code>gl.TEXTURE_COMPARE_FUNC</code></td>
+      <td>Fonction de comparaison de texture</td>
+      <td>
+        <code>gl.LEQUAL</code> (valeur par défaut), <code>gl.GEQUAL</code>,
+        <code>gl.LESS</code>, <code>gl.GREATER</code>, <code>gl.EQUAL</code>,
+        <code>gl.NOTEQUAL</code>, <code>gl.ALWAYS</code>, <code>gl.NEVER</code>.
+      </td>
+    </tr>
+    <tr>
+      <td><code>gl.TEXTURE_COMPARE_MODE</code></td>
+      <td>Mode de comparaison de texture</td>
+      <td>
+        <code>gl.NONE</code> (valeur défaut),
+        <code>gl.COMPARE_REF_TO_TEXTURE</code>.
+      </td>
+    </tr>
+    <tr>
+      <td><code>gl.TEXTURE_MAX_LEVEL</code></td>
+      <td>Niveau maximum de mipmap de texture en tableau</td>
+      <td>Toutes valeurs int.</td>
+    </tr>
+    <tr>
+      <td><code>gl.TEXTURE_MAX_LOD</code></td>
+      <td><p>Valeur de niveau-de-détail maximum de texture</p></td>
+      <td>Toutes valeurs float.</td>
+    </tr>
+    <tr>
+      <td><code>gl.TEXTURE_MIN_LOD</code></td>
+      <td>Valeur de niveau-de-détail minimum de texture</td>
+      <td>Toutes valeurs float.</td>
+    </tr>
+    <tr>
+      <td><code>gl.TEXTURE_WRAP_R</code></td>
+      <td>
+        Fonction d'emballage pour la coordonnée de texture  <code>r</code>
+      </td>
+      <td>
+        <code>gl.REPEAT</code> (valeur par défaut),
+        <code>gl.CLAMP_TO_EDGE</code>, <code>gl.MIRRORED_REPEAT</code>.
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h3 id="Valeur_retournée">Valeur retournée</h3>
+### Valeur retournée
 
-<p>Aucune.</p>
+Aucune.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: js">gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+```js
+gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
-</pre>
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('WebGL', "#5.14.8", "texParameter[fi]")}}</td>
-   <td>{{Spec2('WebGL')}}</td>
-   <td>Définition initiale pour WebGL.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('OpenGL ES 2.0', "glTexParameter.xml", "glTexParameter")}}</td>
-   <td>{{Spec2('OpenGL ES 2.0')}}</td>
-   <td>Page man de l’API OpenGL ES 2.0 API (similaire).</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('WebGL2', "#3.7.6", "texParameter[fi]")}}</td>
-   <td>{{Spec2('WebGL2')}}</td>
-   <td>Définition mise à jour pour WebGL.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('OpenGL ES 3.0', "glTexParameter.xhtml", "glTexParameter")}}</td>
-   <td>{{Spec2('OpenGL ES 3.0')}}</td>
-   <td>Page man de l’API OpenGL ES 3.0 API (similaire).</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                    | Statut                               | Commentaire                                      |
+| ------------------------------------------------------------------------------------------------ | ------------------------------------ | ------------------------------------------------ |
+| {{SpecName('WebGL', "#5.14.8", "texParameter[fi]")}}                             | {{Spec2('WebGL')}}             | Définition initiale pour WebGL.                  |
+| {{SpecName('OpenGL ES 2.0', "glTexParameter.xml", "glTexParameter")}}     | {{Spec2('OpenGL ES 2.0')}} | Page man de l’API OpenGL ES 2.0 API (similaire). |
+| {{SpecName('WebGL2', "#3.7.6", "texParameter[fi]")}}                             | {{Spec2('WebGL2')}}             | Définition mise à jour pour WebGL.               |
+| {{SpecName('OpenGL ES 3.0', "glTexParameter.xhtml", "glTexParameter")}} | {{Spec2('OpenGL ES 3.0')}} | Page man de l’API OpenGL ES 3.0 API (similaire). |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.WebGLRenderingContext.texParameterf")}}</p>
+{{Compat("api.WebGLRenderingContext.texParameterf")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("WebGLRenderingContext.getTexParameter()")}}</li>
- <li>{{domxref("EXT_texture_filter_anisotropic")}}</li>
-</ul>
+- {{domxref("WebGLRenderingContext.getTexParameter()")}}
+- {{domxref("EXT_texture_filter_anisotropic")}}
diff --git a/files/fr/web/api/webglrenderingcontext/uniform/index.md b/files/fr/web/api/webglrenderingcontext/uniform/index.md
index cb27eaeb2c..6dea122f90 100644
--- a/files/fr/web/api/webglrenderingcontext/uniform/index.md
+++ b/files/fr/web/api/webglrenderingcontext/uniform/index.md
@@ -1,5 +1,5 @@
 ---
-title: 'WebGLRenderingContext.uniform[1234][fi][v]()'
+title: WebGLRenderingContext.uniform[1234][fi][v]()
 slug: Web/API/WebGLRenderingContext/uniform
 tags:
   - API
@@ -9,89 +9,68 @@ tags:
   - WebGLRenderingContext
 translation_of: Web/API/WebGLRenderingContext/uniform
 ---
-<div>{{APIRef("WebGL")}}</div>
-
-<p>Les méthodes <strong><code>WebGLRenderingContext.uniform[1234][fi][v]()</code></strong> de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> indiquent les valeurs des variables uniform.</p>
-
-<div class="note">
-<p><strong>Note :</strong> Beaucoup des fonctions décrites ici ont des interfaces WebGL 2 étendues, qui peuvent être trouvées en {{domxref("WebGL2RenderingContext.uniform","WebGL2RenderingContext.uniform[1234][uif][v]()")}}.</p>
-</div>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">void <var>gl</var>.uniform1f(<var>emplacement</var>, <var>v0</var>);
-void <var>gl</var>.uniform1fv(<var>emplacement</var>, <var>valeur</var>);
-void <var>gl</var>.uniform1i(<var>emplacement</var>, <var>v0</var>);
-void <var>gl</var>.uniform1iv(<var>emplacement</var>, <var>valeur</var>);
-
-void <var>gl</var>.uniform2f(<var>emplacement</var>, <var>v0</var>, <var>v1</var>);
-void <var>gl</var>.uniform2fv(<var>emplacement</var>, <var>valeur</var>);
-void <var>gl</var>.uniform2i(<var>emplacement</var>, <var>v0</var>, <var>v1</var>);
-void <var>gl</var>.uniform2iv(<var>emplacement</var>, <var>valeur</var>);
-
-void <var>gl</var>.uniform3f(<var>emplacement</var>, <var>v0</var>, <var>v1</var>, <var>v2</var>);
-void <var>gl</var>.uniform3fv(<var>emplacement</var>, <var>valeur</var>);
-void <var>gl</var>.uniform3i(<var>emplacement</var>, <var>v0</var>, <var>v1</var>, <var>v2</var>);
-void <var>gl</var>.uniform3iv(<var>emplacement</var>, <var>valeur</var>);
-
-void <var>gl</var>.uniform4f(<var>emplacement</var>, <var>v0</var>, <var>v1</var>, <var>v2</var>, <var>v3</var>);
-void <var>gl</var>.uniform4fv(<var>emplacement</var>, <var>valeur</var>);
-void <var>gl</var>.uniform4i(<var>emplacement</var>, <var>v0</var>, <var>v1</var>, <var>v2</var>, <var>v3</var>);
-void <var>gl</var>.uniform4iv(<var>emplacement</var>, <var>valeur</var>);
-</pre>
-
-<h3 id="Paramètres">Paramètres</h3>
-
-<dl>
- <dt>emplacement</dt>
- <dd>Un objet {{domxref("WebGLUniformLocation")}} contenant l'emplacement de l'attribut uniform à modifier.</dd>
- <dt><code>valeur, v0, v1, v2, v3</code></dt>
- <dd>La nouvelle valeur à utiliser pour la variable uniform. Types possibles :
- <ul>
-  <li>Un {{jsxref("Number")}} flottant pour les valeurs flottantes (méthodes avec "f").</li>
-  <li>Une suite de nombres flottants (par exemple, un {{jsxref("Float32Array")}} ou un {{jsxref("Array")}} de nombres) pour les méthodes de vecteurs de flottants (méthodes avec "fv").</li>
-  <li>Un {{jsxref("Number")}} entier pour les valeurs entières (méthodes avec "i").</li>
-  <li>Un {{jsxref("int32Array")}} pour les méthodes de vecteur d'entiers (méthodes avec "iv").</li>
- </ul>
- </dd>
-</dl>
-
-<h3 id="Valeur_retournée">Valeur retournée</h3>
-
-<p>Aucune.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">gl.uniform1f(u_alpha, 0.8);</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('WebGL', "#5.14.10", "uniform")}}</td>
-   <td>{{Spec2('WebGL')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('OpenGL ES 2.0', "glUniform.xml", "glUniform")}}</td>
-   <td>{{Spec2('OpenGL ES 2.0')}}</td>
-   <td>Page man de l'API OpenGL.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.WebGLRenderingContext.uniform1f")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("WebGLRenderingContext.uniformMatrix()")}}</li>
-</ul>
+{{APIRef("WebGL")}}
+
+Les méthodes **`WebGLRenderingContext.uniform[1234][fi][v]()`** de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) indiquent les valeurs des variables uniform.
+
+> **Note :** Beaucoup des fonctions décrites ici ont des interfaces WebGL 2 étendues, qui peuvent être trouvées en {{domxref("WebGL2RenderingContext.uniform","WebGL2RenderingContext.uniform[1234][uif][v]()")}}.
+
+## Syntaxe
+
+    void gl.uniform1f(emplacement, v0);
+    void gl.uniform1fv(emplacement, valeur);
+    void gl.uniform1i(emplacement, v0);
+    void gl.uniform1iv(emplacement, valeur);
+
+    void gl.uniform2f(emplacement, v0, v1);
+    void gl.uniform2fv(emplacement, valeur);
+    void gl.uniform2i(emplacement, v0, v1);
+    void gl.uniform2iv(emplacement, valeur);
+
+    void gl.uniform3f(emplacement, v0, v1, v2);
+    void gl.uniform3fv(emplacement, valeur);
+    void gl.uniform3i(emplacement, v0, v1, v2);
+    void gl.uniform3iv(emplacement, valeur);
+
+    void gl.uniform4f(emplacement, v0, v1, v2, v3);
+    void gl.uniform4fv(emplacement, valeur);
+    void gl.uniform4i(emplacement, v0, v1, v2, v3);
+    void gl.uniform4iv(emplacement, valeur);
+
+### Paramètres
+
+- emplacement
+  - : Un objet {{domxref("WebGLUniformLocation")}} contenant l'emplacement de l'attribut uniform à modifier.
+- `valeur, v0, v1, v2, v3`
+
+  - : La nouvelle valeur à utiliser pour la variable uniform. Types possibles :
+
+    - Un {{jsxref("Number")}} flottant pour les valeurs flottantes (méthodes avec "f").
+    - Une suite de nombres flottants (par exemple, un {{jsxref("Float32Array")}} ou un {{jsxref("Array")}} de nombres) pour les méthodes de vecteurs de flottants (méthodes avec "fv").
+    - Un {{jsxref("Number")}} entier pour les valeurs entières (méthodes avec "i").
+    - Un {{jsxref("int32Array")}} pour les méthodes de vecteur d'entiers (méthodes avec "iv").
+
+### Valeur retournée
+
+Aucune.
+
+## Exemples
+
+```js
+gl.uniform1f(u_alpha, 0.8);
+```
+
+## Spécifications
+
+| Spécification                                                                    | Statut                               | Commentaire               |
+| -------------------------------------------------------------------------------- | ------------------------------------ | ------------------------- |
+| {{SpecName('WebGL', "#5.14.10", "uniform")}}                     | {{Spec2('WebGL')}}             | Définition initiale.      |
+| {{SpecName('OpenGL ES 2.0', "glUniform.xml", "glUniform")}} | {{Spec2('OpenGL ES 2.0')}} | Page man de l'API OpenGL. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.WebGLRenderingContext.uniform1f")}}
+
+## Voir aussi
+
+- {{domxref("WebGLRenderingContext.uniformMatrix()")}}
diff --git a/files/fr/web/api/webglrenderingcontext/uniformmatrix/index.md b/files/fr/web/api/webglrenderingcontext/uniformmatrix/index.md
index 14f4da6939..7b3c46bc01 100644
--- a/files/fr/web/api/webglrenderingcontext/uniformmatrix/index.md
+++ b/files/fr/web/api/webglrenderingcontext/uniformmatrix/index.md
@@ -1,5 +1,5 @@
 ---
-title: 'WebGLRenderingContext.uniformMatrix[234]fv()'
+title: WebGLRenderingContext.uniformMatrix[234]fv()
 slug: Web/API/WebGLRenderingContext/uniformMatrix
 tags:
   - API
@@ -16,73 +16,68 @@ tags:
   - uniformMatrix4fv
 translation_of: Web/API/WebGLRenderingContext/uniformMatrix
 ---
-<div>{{APIRef("WebGL")}}</div>
+{{APIRef("WebGL")}}
 
-<p>Les méthodes <strong><code>WebGLRenderingContext.uniformMatrix[234]fv()</code></strong> de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> définissent des valeurs matricielles pour les variables uniform.</p>
+Les méthodes **`WebGLRenderingContext.uniformMatrix[234]fv()`** de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) définissent des valeurs matricielles pour les variables uniform.
 
-<p>Les trois versions de cette méthode (<code>uniformMatrix2fv()</code>, <code>uniformMatrix3fv()</code> et <code>unifomMatrix4fv()</code>) prennent comme valeur d'entrée des vecteurs à 2, 3 et 4 composantes, respectivement.</p>
+Les trois versions de cette méthode (`uniformMatrix2fv()`, `uniformMatrix3fv()` et `unifomMatrix4fv()`) prennent comme valeur d'entrée des vecteurs à 2, 3 et 4 composantes, respectivement.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>WebGLRenderingContext</em>.uniformMatrix2fv(<em>emplacement</em>, <em>transposer</em>, <em>valeur</em>);
-<em>WebGLRenderingContext</em>.uniformMatrix3fv(<em>emplacement</em>, <em>transposer</em>, <em>valeur</em>);
-<em>WebGLRenderingContext</em>.uniformMatrix4fv(<em>emplacement</em>, <em>transposer</em>, <em>valeur</em>);
-</pre>
+    WebGLRenderingContext.uniformMatrix2fv(emplacement, transposer, valeur);
+    WebGLRenderingContext.uniformMatrix3fv(emplacement, transposer, valeur);
+    WebGLRenderingContext.uniformMatrix4fv(emplacement, transposer, valeur);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>emplacement</code></dt>
- <dd>Un objet {{domxref("WebGLUniformLocation")}} contenant l'emplacement de l'attribut uniform à modifier. L'emplacement est obtenu en utilisant {{domxref("WebGLRenderingContext.getAttribLocation", "getAttribLocation()")}}.</dd>
- <dt><code>transposer</code></dt>
- <dd>Un {{domxref("GLboolean")}} indiquant si la matrice doit être transposée. Doit être <code>false</code>.</dd>
- <dt><code>valeur</code></dt>
- <dd>
- <p>Un {{jsxref("Float32Array")}} ou une suite de valeurs <code>GLfloat</code>.</p>
- </dd>
-</dl>
+- `emplacement`
+  - : Un objet {{domxref("WebGLUniformLocation")}} contenant l'emplacement de l'attribut uniform à modifier. L'emplacement est obtenu en utilisant {{domxref("WebGLRenderingContext.getAttribLocation", "getAttribLocation()")}}.
+- `transposer`
+  - : Un {{domxref("GLboolean")}} indiquant si la matrice doit être transposée. Doit être `false`.
+- `valeur`
+  - : Un {{jsxref("Float32Array")}} ou une suite de valeurs `GLfloat`.
 
-<h3 id="Valeur_retournée">Valeur retournée</h3>
+### Valeur retournée
 
-<p><code>undefined</code></p>
+`undefined`
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: js">gl.uniformMatrix2fv(loc, false, [2.1, 2.2]);</pre>
+```js
+gl.uniformMatrix2fv(loc, false, [2.1, 2.2]);
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('WebGL', "#5.14.10", "uniformMatrix")}}</td>
-   <td>{{Spec2('WebGL')}}</td>
-   <td>
-    <p>Définition initiale.</p>
-   </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('OpenGL ES 2.0', "glUniform.xml", "glUniform")}}</td>
-   <td>{{Spec2('OpenGL ES 2.0')}}</td>
-   <td>
-    <p>Page man de l’API OpenGL.</p>
-   </td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="col">Spécification</th>
+      <th scope="col">Statut</th>
+      <th scope="col">Commentaire</th>
+    </tr>
+    <tr>
+      <td>
+        {{SpecName('WebGL', "#5.14.10", "uniformMatrix")}}
+      </td>
+      <td>{{Spec2('WebGL')}}</td>
+      <td><p>Définition initiale.</p></td>
+    </tr>
+    <tr>
+      <td>
+        {{SpecName('OpenGL ES 2.0', "glUniform.xml", "glUniform")}}
+      </td>
+      <td>{{Spec2('OpenGL ES 2.0')}}</td>
+      <td><p>Page man de l’API OpenGL.</p></td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.WebGLRenderingContext.uniformMatrix2fv")}}</p>
+{{Compat("api.WebGLRenderingContext.uniformMatrix2fv")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("WebGLRenderingContext.uniform()")}}</li>
- <li>{{domxref("WebGL2RenderingContext.uniformMatrix()")}} – versions WebGL 2 de ces méthodes.</li>
-</ul>
+- {{domxref("WebGLRenderingContext.uniform()")}}
+- {{domxref("WebGL2RenderingContext.uniformMatrix()")}} – versions WebGL 2 de ces méthodes.
diff --git a/files/fr/web/api/webglrenderingcontext/useprogram/index.md b/files/fr/web/api/webglrenderingcontext/useprogram/index.md
index dced5c95a4..5c9c37bf30 100644
--- a/files/fr/web/api/webglrenderingcontext/useprogram/index.md
+++ b/files/fr/web/api/webglrenderingcontext/useprogram/index.md
@@ -9,29 +9,27 @@ tags:
   - WebGLRenderingContext
 translation_of: Web/API/WebGLRenderingContext/useProgram
 ---
-<div>{{APIRef("WebGL")}}</div>
+{{APIRef("WebGL")}}
 
-<p>La méthode <strong><code>WebGLRenderingContext.useProgram()</code></strong> de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> définit le {{domxref("WebGLProgram")}} spécifié comme faisant partie de l'état de rendu en cours.</p>
+La méthode **`WebGLRenderingContext.useProgram()`** de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) définit le {{domxref("WebGLProgram")}} spécifié comme faisant partie de l'état de rendu en cours.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">void <var>gl</var>.useProgram(<var>programme</var>);
-</pre>
+    void gl.useProgram(programme);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt>programme</dt>
- <dd>Un {{domxref("WebGLProgram")}} à utiliser.</dd>
-</dl>
+- programme
+  - : Un {{domxref("WebGLProgram")}} à utiliser.
 
-<h3 id="Valeur_retournée">Valeur retournée</h3>
+### Valeur retournée
 
-<p>Aucune.</p>
+Aucune.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: js">var programme = gl.createProgram();
+```js
+var programme = gl.createProgram();
 
 // Attacher les shaders pré-existants
 gl.attachShader(programme, vertexShader);
@@ -39,42 +37,25 @@ gl.attachShader(programme, fragmentShader);
 
 gl.linkProgram(programme);
 gl.useProgram(programme);
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('WebGL', "#5.14.9", "useProgram")}}</td>
-   <td>{{Spec2('WebGL')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('OpenGL ES 2.0', "glUseProgram.xml", "glUseProgram")}}</td>
-   <td>{{Spec2('OpenGL ES 2.0')}}</td>
-   <td>Page man de l'API OpenGL.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibilité_des_navigateurs">Browser compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.WebGLRenderingContext.useProgram")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("WebGLRenderingContext.createProgram()")}}</li>
- <li>{{domxref("WebGLRenderingContext.deleteProgram()")}}</li>
- <li>{{domxref("WebGLRenderingContext.isProgram()")}}</li>
- <li>{{domxref("WebGLRenderingContext.linkProgram()")}}</li>
- <li>{{domxref("WebGLRenderingContext.validateProgram()")}}</li>
- <li>{{domxref("WebGLRenderingContext.getProgramParameter()")}}</li>
- <li>{{domxref("WebGLRenderingContext.getProgramInfoLog()")}}</li>
-</ul>
+```
+
+## Spécifications
+
+| Spécification                                                                            | Statut                               | Commentaire               |
+| ---------------------------------------------------------------------------------------- | ------------------------------------ | ------------------------- |
+| {{SpecName('WebGL', "#5.14.9", "useProgram")}}                             | {{Spec2('WebGL')}}             | Définition initiale.      |
+| {{SpecName('OpenGL ES 2.0', "glUseProgram.xml", "glUseProgram")}} | {{Spec2('OpenGL ES 2.0')}} | Page man de l'API OpenGL. |
+
+## Browser compatibilité des navigateurs
+
+{{Compat("api.WebGLRenderingContext.useProgram")}}
+
+## Voir aussi
+
+- {{domxref("WebGLRenderingContext.createProgram()")}}
+- {{domxref("WebGLRenderingContext.deleteProgram()")}}
+- {{domxref("WebGLRenderingContext.isProgram()")}}
+- {{domxref("WebGLRenderingContext.linkProgram()")}}
+- {{domxref("WebGLRenderingContext.validateProgram()")}}
+- {{domxref("WebGLRenderingContext.getProgramParameter()")}}
+- {{domxref("WebGLRenderingContext.getProgramInfoLog()")}}
diff --git a/files/fr/web/api/webglrenderingcontext/vertexattribpointer/index.md b/files/fr/web/api/webglrenderingcontext/vertexattribpointer/index.md
index 93961c4fda..eaf1aee0b2 100644
--- a/files/fr/web/api/webglrenderingcontext/vertexattribpointer/index.md
+++ b/files/fr/web/api/webglrenderingcontext/vertexattribpointer/index.md
@@ -9,142 +9,133 @@ tags:
   - WebGLRenderingContext
 translation_of: Web/API/WebGLRenderingContext/vertexAttribPointer
 ---
-<div>{{APIRef("WebGL")}}</div>
+{{APIRef("WebGL")}}
 
-<p>La méthode <strong><code>WebGLRenderingContext.vertexAttribPointer()</code> </strong>de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> spécifie la disposition en mémoire de l'objet de tampon vertex. Elle doit être appelée une fois pour chaque attribut de sommet.</p>
+La méthode **`WebGLRenderingContext.vertexAttribPointer()` **de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) spécifie la disposition en mémoire de l'objet de tampon vertex. Elle doit être appelée une fois pour chaque attribut de sommet.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">void <em>gl</em>.vertexAttribPointer(<em>indice</em>, <em>taille</em>, <em>type</em>, <em>normalise</em>, <em>pas</em>, <em>decalage</em>);
-</pre>
+    void gl.vertexAttribPointer(indice, taille, type, normalise, pas, decalage);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>indice</code></dt>
- <dd>Un {{domxref("GLuint")}} indiquant l'indice de l'attribut de sommet à modifier.</dd>
- <dt><code>taille</code></dt>
- <dd>Un {{domxref("GLint")}} indiquant le nombre de composantes par attribut de sommet. Doit être 1, 2, 3 ou 4.</dd>
- <dt><code>type</code></dt>
- <dd>Un {{domxref ("GLenum")}} spécifiant le type de données de chaque composante dans le tableau. Valeurs possibles :
- <ul>
-  <li><code>gl.BYTE</code> : entier signé sur 8 bits, à valeurs dans [-128, 127]</li>
-  <li><code>gl.SHORT</code> : entier signé sur 16 bits, à valeurs dans [-32768, 32767]</li>
-  <li><code>gl.UNSIGNED_BYTE</code> : entier non signé sur 8 bits, à valeurs dans [0, 255]</li>
-  <li><code>gl.UNSIGNED_SHORT</code> : entier non signé sur 16 bits, à valeurs dans [0, 65535]</li>
-  <li><code>gl.FLOAT</code> : nombre flottant IEEE 32 bits</li>
-  <li>lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL context 2", "", 1)}}, la valeur suivante est en outre disponible :
-   <ul>
-    <li><code>gl.HALF_FLOAT</code> : nombre flottant IEEE 16 bits</li>
-   </ul>
-  </li>
- </ul>
- </dd>
- <dt><code>normalise</code></dt>
- <dd>Un {{domxref("GLboolean")}} indiquant si les valeurs des données entières doivent être normalisées dans une certaine plage lorsqu'elles sont converties en flottant.
- <ul>
-  <li>Pour les types <code>gl.BYTE</code> et <code>gl.SHORT</code>, normalise les valeurs à [-1, 1] si <code>true</code>.</li>
-  <li>Pour les types <code>gl.UNSIGNED_BYTE</code> et <code>gl.UNSIGNED_SHORT</code>, normalise les valeurs à [0, 1] si <code>true</code>.</li>
-  <li>Pour les types <code>gl.FLOAT</code> et <code>gl.HALF_FLOAT</code>, ce paramètre est sans effet.</li>
- </ul>
- </dd>
- <dt><code>pas</code></dt>
- <dd>Un {{domxref ("GLsizei")}} spécifiant le décalage en octets entre le début des attributs de sommets consécutifs. Ne peut être supérieur à 255. Si la valeur de <code>pas</code> est 0, l'attribut est supposé être étroitement compacté, c'est-à-dire que les attributs ne sont pas entrelacés mais que chaque attribut se trouve dans un bloc distinct et que l'attribut du sommet suivant suit immédiatement le sommet en cours.</dd>
- <dt><code>decalage</code></dt>
- <dd>Un {{domxref ("GLintptr")}} spécifiant le décalage en octets de la première composante dans le tableau d'attributs de sommets. Doit être un multiple de <code>type</code>.</dd>
-</dl>
+- `indice`
+  - : Un {{domxref("GLuint")}} indiquant l'indice de l'attribut de sommet à modifier.
+- `taille`
+  - : Un {{domxref("GLint")}} indiquant le nombre de composantes par attribut de sommet. Doit être 1, 2, 3 ou 4.
+- `type`
 
-<h3 id="Valeur_retournée">Valeur retournée</h3>
+  - : Un {{domxref ("GLenum")}} spécifiant le type de données de chaque composante dans le tableau. Valeurs possibles :
 
-<p>Aucune.</p>
+    - `gl.BYTE` : entier signé sur 8 bits, à valeurs dans \[-128, 127]
+    - `gl.SHORT` : entier signé sur 16 bits, à valeurs dans \[-32768, 32767]
+    - `gl.UNSIGNED_BYTE` : entier non signé sur 8 bits, à valeurs dans \[0, 255]
+    - `gl.UNSIGNED_SHORT` : entier non signé sur 16 bits, à valeurs dans \[0, 65535]
+    - `gl.FLOAT` : nombre flottant IEEE 32 bits
+    - lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL context 2", "", 1)}}, la valeur suivante est en outre disponible :
 
-<h3 id="Exceptions">Exceptions</h3>
+      - `gl.HALF_FLOAT` : nombre flottant IEEE 16 bits
 
-<ul>
- <li>Une erreur <code>gl.INVALID_VALUE</code> est déclenchée si <code>decalage</code> est négatif.</li>
- <li>Une erreur <code>gl.INVALID_OPERATION</code> est déclenchée si  <code>pas</code> et <code>decalage</code> ne sont pas des multiples de la taille du type de données.</li>
- <li>Une erreur  <code>gl.INVALID_OPERATION</code> est déclenchée si aucun WebGLBuffer n'est lié à la cible ARRAY_BUFFER.</li>
- <li>Lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, une erreur  <code>gl.INVALID_OPERATION</code> est déclenchée si l'attribut du sommet est défini comme entier dans le shader de sommet (par ex., <code>uvec4</code> or <code>ivec4</code>, iau lieu de <code>vec4</code>).</li>
-</ul>
+- `normalise`
 
-<h2 id="Description">Description</h2>
+  - : Un {{domxref("GLboolean")}} indiquant si les valeurs des données entières doivent être normalisées dans une certaine plage lorsqu'elles sont converties en flottant.
 
-<p>Supposons que nous voulions afficher une géométrie 3D, et que pour cela, nous ayons besoin de fournir nos sommets au Shader de Sommet. Chaque sommet a un certain nombre d'attributs, tels que la position, le vecteur normal ou les coordonnées de texture, qui sont définis dans un {{jsxref("ArrayBuffer")}} et qui seront fournis à l'Objet de Tampon de Sommets (OTS). Grâce à cette méthode <code>gl.vertexAttribPointer()</code>, nous spécifions dans quel ordre les attributs sont stockés, et quel est leur type de données. De plus, nous devons inclure le pas, qui est la longueur totale en octets de tous les attributs pour un sommet. Également, nous devons appeler {{domxref("WebGLRenderingContext/enableVertexAttribArray", "gl.enableVertexAttribArray()")}} pour indiquer à WebGL que cet attribut doit être rempli avec les données de notre tampon de tableaux.</p>
+    - Pour les types `gl.BYTE` et `gl.SHORT`, normalise les valeurs à \[-1, 1] si `true`.
+    - Pour les types `gl.UNSIGNED_BYTE` et `gl.UNSIGNED_SHORT`, normalise les valeurs à \[0, 1] si `true`.
+    - Pour les types `gl.FLOAT` et `gl.HALF_FLOAT`, ce paramètre est sans effet.
 
-<p>Habituellement, votre géométrie 3D se trouve déjà dans un certain format binaire, de sorte que vous devez lire la spécification de ce format particulier pour comprendre la disposition en mémoire. Cependant, si vous concevez le format vous-même, ou si votre géométrie se trouve dans des fichiers texte (comme les fichiers Wavefront .obj) et doit être convertie en <code>ArrayBuffer</code> à l'exécution, vous êtes libre de choisir comment structurer la mémoire. Pour des performances optimales, entrelacez les attributs et utilisez le plus petit type de données représentant néanmoins fidèlement votre géométrie.</p>
+- `pas`
+  - : Un {{domxref ("GLsizei")}} spécifiant le décalage en octets entre le début des attributs de sommets consécutifs. Ne peut être supérieur à 255. Si la valeur de `pas` est 0, l'attribut est supposé être étroitement compacté, c'est-à-dire que les attributs ne sont pas entrelacés mais que chaque attribut se trouve dans un bloc distinct et que l'attribut du sommet suivant suit immédiatement le sommet en cours.
+- `decalage`
+  - : Un {{domxref ("GLintptr")}} spécifiant le décalage en octets de la première composante dans le tableau d'attributs de sommets. Doit être un multiple de `type`.
 
-<p>Le nombre maximum d'attributs de vertex dépend de la carte graphique, et vous pouvez appeler <code>gl.getParameter(gl.MAX_VERTEX_ATTRIBS)</code> pour obtenir cette valeur. Sur les cartes graphiques haut de gamme, le maximum est de 16, sur les cartes graphiques de bas de gamme, la valeur sera inférieure.</p>
+### Valeur retournée
 
-<h3 id="Indice_d'attribut">Indice d'attribut</h3>
+Aucune.
 
-<p>Pour chaque attribut, vous devez spécifier son indice. Cela est indépendant de l'emplacement à l'intérieur de la mémoire tampon de tableaux, de sorte que vos attributs peuvent être envoyés dans un ordre différent de celui dans lequel ils sont stockés dans le tampon de tableaux. Vous avez deux options :</p>
+### Exceptions
 
-<ul>
- <li>Soit vous spécifiez l'index vous-même. Dans ce cas, vous appelerez {{domxref("WebGLRenderingContext.bindAttribLocation()", "gl.bindAttribLocation()")}} pour connecter un attribut nommé du shader de sommet à l'index que vous voulez utiliser. Cela doit être fait avant d'appeler {{domxref("WebGLRenderingContext.linkProgram()", "gl.linkProgram()")}}. Vous pouvez alors fournir ce même index à <code>gl.vertexAttribPointer()</code>.</li>
- <li>En variante, vous pouvez utiliser l'index affecté par la carte graphique lors de la compilation du shader de sommet. Suivant la carte graphique, l'index varie, aussi devrez-vous appeler {{domxref("WebGLRenderingContext.getAttribLocation()", "gl.getAttribLocation()")}} pour trouver l'index, puis le fournir à <code>gl.vertexAttribPointer()</code>.<br>
-  Si vous utilisez WebGL 2, vous pouvez spécifier l'index vous-même dans le code du shader de sommet et remplacer la valeur par défaut utilisée par la carte graphique, par ex. <code>layout(location = 3) in vec4 position;</code> définirait l'attribut <code>"position"</code> à l'indice 3.</li>
-</ul>
+- Une erreur `gl.INVALID_VALUE` est déclenchée si `decalage` est négatif.
+- Une erreur `gl.INVALID_OPERATION` est déclenchée si  `pas` et `decalage` ne sont pas des multiples de la taille du type de données.
+- Une erreur  `gl.INVALID_OPERATION` est déclenchée si aucun WebGLBuffer n'est lié à la cible ARRAY_BUFFER.
+- Lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, une erreur  `gl.INVALID_OPERATION` est déclenchée si l'attribut du sommet est défini comme entier dans le shader de sommet (par ex., `uvec4` or `ivec4`, iau lieu de `vec4`).
 
-<h3 id="Attributs_entiers">Attributs entiers</h3>
+## Description
 
-<p>Bien que le <code>ArrayBuffer</code> puisse être rempli à la fois d'entiers et de flottants, les attributs seront toujours convertis en flottant lorsqu'ils seront envoyés au shader de sommet. Si vous avez besoin d'utiliser des entiers dans votre code de shader de sommet, vous pouvez, soit reconvertir les flottants en entiers dans le shader de sommet (par exemple, <code>(int) floatNumber</code>), soit utiliser {{domxref("WebGL2RenderingContext.vertexAttribIPointer()", "gl.vertexAttribIPointer()")}} à partir de WebGL2.</p>
+Supposons que nous voulions afficher une géométrie 3D, et que pour cela, nous ayons besoin de fournir nos sommets au Shader de Sommet. Chaque sommet a un certain nombre d'attributs, tels que la position, le vecteur normal ou les coordonnées de texture, qui sont définis dans un {{jsxref("ArrayBuffer")}} et qui seront fournis à l'Objet de Tampon de Sommets (OTS). Grâce à cette méthode `gl.vertexAttribPointer()`, nous spécifions dans quel ordre les attributs sont stockés, et quel est leur type de données. De plus, nous devons inclure le pas, qui est la longueur totale en octets de tous les attributs pour un sommet. Également, nous devons appeler {{domxref("WebGLRenderingContext/enableVertexAttribArray", "gl.enableVertexAttribArray()")}} pour indiquer à WebGL que cet attribut doit être rempli avec les données de notre tampon de tableaux.
 
-<h3 id="Valeurs_d'attribut_par_défaut">Valeurs d'attribut par défaut</h3>
+Habituellement, votre géométrie 3D se trouve déjà dans un certain format binaire, de sorte que vous devez lire la spécification de ce format particulier pour comprendre la disposition en mémoire. Cependant, si vous concevez le format vous-même, ou si votre géométrie se trouve dans des fichiers texte (comme les fichiers Wavefront .obj) et doit être convertie en `ArrayBuffer` à l'exécution, vous êtes libre de choisir comment structurer la mémoire. Pour des performances optimales, entrelacez les attributs et utilisez le plus petit type de données représentant néanmoins fidèlement votre géométrie.
 
-<p>Le code de vertex shader peut inclure un certain nombre d'attributs, mais nous n'avons pas besoin de spécifier les valeurs pour chaque attribut. A la place, nous pouvons fournir une valeur par défaut qui sera identique pour tous les sommets. Nous pouvons appeler <code>{{domxref("WebGLRenderingContext.disableVertexAttribArray()", "gl.disableVertexAttribArray()")}}</code> pour indiquer à WebGL d'utiliser la valeur par défaut, tandis que l'appel à {{domxref("WebGLRenderingContext.enableVertexAttribArray ()", "gl.enableVertexAttribArray () ")}} lira les valeurs du buffer du tableau comme spécifié avec <code>gl.vertexAttribPointer()</code>.</p>
+Le nombre maximum d'attributs de vertex dépend de la carte graphique, et vous pouvez appeler `gl.getParameter(gl.MAX_VERTEX_ATTRIBS)` pour obtenir cette valeur. Sur les cartes graphiques haut de gamme, le maximum est de 16, sur les cartes graphiques de bas de gamme, la valeur sera inférieure.
 
-<p>De façon similaire, si notre shader de sommet attend par ex. un attribut à 4 composantes avec <code>vec4</code>, mais que dans notre appel à <code>gl.vertexAttribPointer()</code>, nous définissons la taille à 2, alors WebGL définira les deux premières composantes en se basant sur le tampon des tableaux, tandis que les troisième et quatrième composantes prendront la valeur par défaut.</p>
+### Indice d'attribut
 
-<p>La valeur par défaut est <code>vec4(0.0, 0.0, 0.0, 1.0)</code> par défaut, mais nous pouvons spécifier une valeur par défaut différente avec <code>{{domxref ("WebGLRenderingContext.vertexAttrib()", "gl.vertexAttrib[1234]f[v]()")}}</code>.</p>
+Pour chaque attribut, vous devez spécifier son indice. Cela est indépendant de l'emplacement à l'intérieur de la mémoire tampon de tableaux, de sorte que vos attributs peuvent être envoyés dans un ordre différent de celui dans lequel ils sont stockés dans le tampon de tableaux. Vous avez deux options :
 
-<p>Par exemple, votre shader de sommet peut utiliser une position et un attribut de couleur. La plupart des maillages ont leur couleur spécifiée au niveau des sommets, mais certains maillages ont une teinte uniforme. Pour ces maillages, il n'est pas nécessaire de définir la même couleur pour chaque sommet dans le tampon des tableaux, aussi vous utiliserez <code>gl.vertexAttrib4fv()</code> pour définir une couleur constante.</p>
+- Soit vous spécifiez l'index vous-même. Dans ce cas, vous appelerez {{domxref("WebGLRenderingContext.bindAttribLocation()", "gl.bindAttribLocation()")}} pour connecter un attribut nommé du shader de sommet à l'index que vous voulez utiliser. Cela doit être fait avant d'appeler {{domxref("WebGLRenderingContext.linkProgram()", "gl.linkProgram()")}}. Vous pouvez alors fournir ce même index à `gl.vertexAttribPointer()`.
+- En variante, vous pouvez utiliser l'index affecté par la carte graphique lors de la compilation du shader de sommet. Suivant la carte graphique, l'index varie, aussi devrez-vous appeler {{domxref("WebGLRenderingContext.getAttribLocation()", "gl.getAttribLocation()")}} pour trouver l'index, puis le fournir à `gl.vertexAttribPointer()`.
+  Si vous utilisez WebGL 2, vous pouvez spécifier l'index vous-même dans le code du shader de sommet et remplacer la valeur par défaut utilisée par la carte graphique, par ex. `layout(location = 3) in vec4 position;` définirait l'attribut `"position"` à l'indice 3.
 
-<h3 id="Interrogation_des_paramètres_en_cours">Interrogation des paramètres en cours</h3>
+### Attributs entiers
 
-<p>Vous pouvez appeler {{domxref ("WebGLRenderingContext.getVertexAttrib()", "gl.getVertexAttrib()")}} et {{domxref ("WebGLRenderingContext.getVertexAttribOffset()", "gl.getVertexAttribOffset()")}} pour obtenir les paramètres en cours d'un attribut, par ex., le type de données ou si l'attribut doit être normalisé. Gardez présent à l'esprit que ces fonctions WebGL ont des performances faibles et qu'il est préférable de stocker l'état dans votre application JavaScript. Cependant, ces fonctions sont idéales pour déboguer un contexte WebGL sans toucher au code de l'application.</p>
+Bien que le `ArrayBuffer` puisse être rempli à la fois d'entiers et de flottants, les attributs seront toujours convertis en flottant lorsqu'ils seront envoyés au shader de sommet. Si vous avez besoin d'utiliser des entiers dans votre code de shader de sommet, vous pouvez, soit reconvertir les flottants en entiers dans le shader de sommet (par exemple, `(int) floatNumber`), soit utiliser {{domxref("WebGL2RenderingContext.vertexAttribIPointer()", "gl.vertexAttribIPointer()")}} à partir de WebGL2.
 
-<h2 id="Exemples">Exemples</h2>
+### Valeurs d'attribut par défaut
 
-<p>Cet exemple montre comment envoyer vos attributs de sommet au programme shader. Nous utilisons une structure de données imaginaire, dans laquelle les attributs de chaque sommet sont stockés entrelacés avec une longueur de 20 octets par sommet :</p>
+Le code de vertex shader peut inclure un certain nombre d'attributs, mais nous n'avons pas besoin de spécifier les valeurs pour chaque attribut. A la place, nous pouvons fournir une valeur par défaut qui sera identique pour tous les sommets. Nous pouvons appeler `{{domxref("WebGLRenderingContext.disableVertexAttribArray()", "gl.disableVertexAttribArray()")}}` pour indiquer à WebGL d'utiliser la valeur par défaut, tandis que l'appel à {{domxref("WebGLRenderingContext.enableVertexAttribArray ()", "gl.enableVertexAttribArray () ")}} lira les valeurs du buffer du tableau comme spécifié avec `gl.vertexAttribPointer()`.
 
-<ol>
- <li><strong>position :</strong> nous devons stocker les coordonnées X, Y et Z. Pour une précision maximale, nous utilisons des flottants 32 bits ; au total, cela utilise 12 octets ;</li>
- <li><strong>vecteur normal :</strong> nous avons besoin de stocker les composantes X, Y et Z du vecteur normal, mais comme la précision n'est pas si importante que cela, nous utilisons des entiers signés sur 8 bits. Pour de meilleures performances, nous alignons les données sur 32 bits en stockant également une quatrième composante de valeur zéro, ce qui porte la taille totale à 4 octets. Également, nous indiquons à WebGL de normaliser les valeurs, car nos normales sont toujours dans la plage [-1, 1] ;</li>
- <li><strong>coordonnées de texture :</strong> nous avons besoin de stocker les coordonnées U et V ; pour que ces nombres entiers non signés sur 16 bits offrent suffisamment de précision, la taille totale est de 4 octets. Nous indiquons également à WebGL de normaliser les valeurs à [0, 1].</li>
-</ol>
+De façon similaire, si notre shader de sommet attend par ex. un attribut à 4 composantes avec `vec4`, mais que dans notre appel à `gl.vertexAttribPointer()`, nous définissons la taille à 2, alors WebGL définira les deux premières composantes en se basant sur le tampon des tableaux, tandis que les troisième et quatrième composantes prendront la valeur par défaut.
 
-<p>Par exemple, le sommet suivant :</p>
+La valeur par défaut est `vec4(0.0, 0.0, 0.0, 1.0)` par défaut, mais nous pouvons spécifier une valeur par défaut différente avec `{{domxref ("WebGLRenderingContext.vertexAttrib()", "gl.vertexAttrib[1234]f[v]()")}}`.
 
-<pre class="brush: json">{
+Par exemple, votre shader de sommet peut utiliser une position et un attribut de couleur. La plupart des maillages ont leur couleur spécifiée au niveau des sommets, mais certains maillages ont une teinte uniforme. Pour ces maillages, il n'est pas nécessaire de définir la même couleur pour chaque sommet dans le tampon des tableaux, aussi vous utiliserez `gl.vertexAttrib4fv()` pour définir une couleur constante.
+
+### Interrogation des paramètres en cours
+
+Vous pouvez appeler {{domxref ("WebGLRenderingContext.getVertexAttrib()", "gl.getVertexAttrib()")}} et {{domxref ("WebGLRenderingContext.getVertexAttribOffset()", "gl.getVertexAttribOffset()")}} pour obtenir les paramètres en cours d'un attribut, par ex., le type de données ou si l'attribut doit être normalisé. Gardez présent à l'esprit que ces fonctions WebGL ont des performances faibles et qu'il est préférable de stocker l'état dans votre application JavaScript. Cependant, ces fonctions sont idéales pour déboguer un contexte WebGL sans toucher au code de l'application.
+
+## Exemples
+
+Cet exemple montre comment envoyer vos attributs de sommet au programme shader. Nous utilisons une structure de données imaginaire, dans laquelle les attributs de chaque sommet sont stockés entrelacés avec une longueur de 20 octets par sommet :
+
+1.  **position :** nous devons stocker les coordonnées X, Y et Z. Pour une précision maximale, nous utilisons des flottants 32 bits ; au total, cela utilise 12 octets ;
+2.  **vecteur normal :** nous avons besoin de stocker les composantes X, Y et Z du vecteur normal, mais comme la précision n'est pas si importante que cela, nous utilisons des entiers signés sur 8 bits. Pour de meilleures performances, nous alignons les données sur 32 bits en stockant également une quatrième composante de valeur zéro, ce qui porte la taille totale à 4 octets. Également, nous indiquons à WebGL de normaliser les valeurs, car nos normales sont toujours dans la plage \[-1, 1] ;
+3.  **coordonnées de texture :** nous avons besoin de stocker les coordonnées U et V ; pour que ces nombres entiers non signés sur 16 bits offrent suffisamment de précision, la taille totale est de 4 octets. Nous indiquons également à WebGL de normaliser les valeurs à \[0, 1].
+
+Par exemple, le sommet suivant :
+
+```json
+{
   "position": [1.0, 2.0, 1.5],
   "normale": [1.0, 0.0, 0.0],
   "coordTex": [0.5, 0.25]
 }
-</pre>
+```
 
-<p>sera stocké dans le tampon des tableaux comme suit :</p>
+sera stocké dans le tampon des tableaux comme suit :
 
 <table>
- <tbody>
-  <tr>
-   <td>00 00 80 3F</td>
-   <td>00 00 00 40</td>
-   <td>00 00 0C 3F</td>
-   <td>7F</td>
-   <td>00</td>
-   <td>00</td>
-   <td>00</td>
-   <td>7F FF</td>
-   <td>3F FF</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <td>00 00 80 3F</td>
+      <td>00 00 00 40</td>
+      <td>00 00 0C 3F</td>
+      <td>7F</td>
+      <td>00</td>
+      <td>00</td>
+      <td>00</td>
+      <td>7F FF</td>
+      <td>3F FF</td>
+    </tr>
+  </tbody>
 </table>
 
-<h3 id="Création_du_tampon_des_tableaux">Création du tampon des tableaux</h3>
+### Création du tampon des tableaux
 
-<p>Tout d'abord, nous créons dynamiquement le tampon des tableaux à partir de données JSON en utilisant un {{domxref("DataView")}}. Notez l'utilisation de <code>true</code>, car WebGL s'attend à ce que nos données soient en little-endian.</p>
+Tout d'abord, nous créons dynamiquement le tampon des tableaux à partir de données JSON en utilisant un {{domxref("DataView")}}. Notez l'utilisation de `true`, car WebGL s'attend à ce que nos données soient en little-endian.
 
-<pre class="brush: js">// Charger la géometrie avec fetch() et Response.json()
+```js
+// Charger la géometrie avec fetch() et Response.json()
 const response = await fetch('assets/geometry.json');
 const sommets = await response.json();
 
@@ -152,7 +143,7 @@ const sommets = await response.json();
 const tampon = new ArrayBuffer(20 * sommets.length);
 // Remplir le tampon des tableaux
 const dv = new DataView(tampon);
-for (let i = 0; i &lt; sommets.length; i++) {
+for (let i = 0; i < sommets.length; i++) {
   dv.setFloat32(20 * i, sommets[i].position[0], true);
   dv.setFloat32(20 * i + 4, sommets[i].position[1], true);
   dv.setFloat32(20 * i + 8, sommets[i].position[2], true);
@@ -162,27 +153,31 @@ for (let i = 0; i &lt; sommets.length; i++) {
   dv.setInt8(20 * i + 15, 0);
   dv.setUint16(20 * i + 16, sommets[i].coordTex[0] * 0xFFFF, true);
   dv.setUint16(20 * i + 18, sommets[i].coordTex[1] * 0xFFFF, true);
-}</pre>
+}
+```
 
-<p>Pour de meilleures performances, nous pourrions également effectuer la conversion JSON vers ArrayBuffer précédente du côté serveur, par ex. avec Node.js. Nous pourrions alors charger le fichier binaire et l'interpréter comme un tampon de tableaux :</p>
+Pour de meilleures performances, nous pourrions également effectuer la conversion JSON vers ArrayBuffer précédente du côté serveur, par ex. avec Node.js. Nous pourrions alors charger le fichier binaire et l'interpréter comme un tampon de tableaux :
 
-<pre class="brush: js">const response = await fetch('assets/geometry.bin');
+```js
+const response = await fetch('assets/geometry.bin');
 const tampon = await response.arrayBuffer();
-</pre>
+```
 
-<h3 id="Utiliser_le_tampon_de_tableaux_avec_WebGL">Utiliser le tampon de tableaux avec WebGL</h3>
+### Utiliser le tampon de tableaux avec WebGL
 
-<p>Tout d'abord, nous créons un nouvel Objet Tampon de Sommets (OTS) et nous l'alimentons avec notre tampon de tableaux :</p>
+Tout d'abord, nous créons un nouvel Objet Tampon de Sommets (OTS) et nous l'alimentons avec notre tampon de tableaux :
 
-<pre class="brush: js">// Lier le tampon de tableaux à l'Objet Tampon de Sommets
+```js
+// Lier le tampon de tableaux à l'Objet Tampon de Sommets
 const ots = gl.createBuffer();
 gl.bindBuffer(gl.ARRAY_BUFFER, ots);
 gl.bufferData(gl.ARRAY_BUFFER, buffer, gl.STATIC_DRAW);
-</pre>
+```
 
-<p>Ensuite, nous spécifions la disposition en mémoire du tampon de tableaux, soit en définissant nous-mêmes l'indice :</p>
+Ensuite, nous spécifions la disposition en mémoire du tampon de tableaux, soit en définissant nous-mêmes l'indice :
 
-<pre class="brush: js">// Décrire la disposition du tampon :
+```js
+// Décrire la disposition du tampon :
 //1. position, non normalisé
 gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 20, 0);
 gl.enableVertexAttribArray(0);
@@ -200,11 +195,12 @@ gl.bindAttribLocation(shaderProgram, 2, 'texUV');
 // Du fait que indices des attributs ont changé, nous devons refaire l'édition de liens du shader
 // Noter que cela réinitialisera tous les uniforms qui avaient été précédemment définis.
 gl.linkProgram(shaderProgram);
-</pre>
+```
 
-<p>soit en utilisant l'indice fourni par la carte graphique, au lieu de le définir nous-mêmes ; cela évite la réédition des liens du programme shader.</p>
+soit en utilisant l'indice fourni par la carte graphique, au lieu de le définir nous-mêmes ; cela évite la réédition des liens du programme shader.
 
-<pre class="brush: js">const positionLoc = gl.getAttribLocation(shaderProgram, 'position');
+```js
+const positionLoc = gl.getAttribLocation(shaderProgram, 'position');
 gl.vertexAttribPointer(positionLoc, 3, gl.FLOAT, false, 20, 0);
 gl.enableVertexAttribArray(positionLoc);
 
@@ -215,40 +211,38 @@ gl.enableVertexAttribArray(normalLoc);
 const texUVLoc = gl.getAttribLocation(shaderProgram, 'texUV');
 gl.vertexAttribPointer(texUVLoc, 2, gl.UNSIGNED_SHORT, true, 20, 16);
 gl.enableVertexAttribArray(texUVLoc);
-</pre>
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('WebGL', "#5.14.10", "vertexAttribPointer")}}</td>
-   <td>{{Spec2('WebGL')}}</td>
-   <td>
-    <p>Définition initiale.</p>
-   </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('OpenGL ES 2.0', "glVertexAttribPointer.xml", "glVertexAttribPointer")}}</td>
-   <td>{{Spec2('OpenGL ES 2.0')}}</td>
-   <td>
-    <p>Page man de l’API OpenGL.</p>
-   </td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="col">Spécification</th>
+      <th scope="col">Statut</th>
+      <th scope="col">Commentaire</th>
+    </tr>
+    <tr>
+      <td>
+        {{SpecName('WebGL', "#5.14.10", "vertexAttribPointer")}}
+      </td>
+      <td>{{Spec2('WebGL')}}</td>
+      <td><p>Définition initiale.</p></td>
+    </tr>
+    <tr>
+      <td>
+        {{SpecName('OpenGL ES 2.0', "glVertexAttribPointer.xml", "glVertexAttribPointer")}}
+      </td>
+      <td>{{Spec2('OpenGL ES 2.0')}}</td>
+      <td><p>Page man de l’API OpenGL.</p></td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.WebGLRenderingContext.vertexAttribPointer")}}</p>
+{{Compat("api.WebGLRenderingContext.vertexAttribPointer")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="https://www.khronos.org/opengl/wiki/Vertex_Specification">Vertex Specification</a> sur le wiki OpenGL</li>
-</ul>
+- [Vertex Specification](https://www.khronos.org/opengl/wiki/Vertex_Specification) sur le wiki OpenGL
diff --git a/files/fr/web/api/webglrenderingcontext/viewport/index.md b/files/fr/web/api/webglrenderingcontext/viewport/index.md
index 76290a9bd6..beed6333a7 100644
--- a/files/fr/web/api/webglrenderingcontext/viewport/index.md
+++ b/files/fr/web/api/webglrenderingcontext/viewport/index.md
@@ -9,84 +9,67 @@ tags:
   - WebGLRenderingContext
 translation_of: Web/API/WebGLRenderingContext/viewport
 ---
-<div>{{APIRef("WebGL")}}</div>
+{{APIRef("WebGL")}}
 
-<p>La méthode <strong><code>WebGLRenderingContext.viewport()</code></strong> de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> définit le viewport, qui indique la transformation affine de x et de y, de coordonnées d'appareil normalisées en coordonnées de fenêtre.</p>
+La méthode **`WebGLRenderingContext.viewport()`** de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) définit le viewport, qui indique la transformation affine de x et de y, de coordonnées d'appareil normalisées en coordonnées de fenêtre.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var><em>void gl</em>.viewport</var><var>(x, y, largeur, hauteur);</var>
-</pre>
+    void gl.viewport(x, y, largeur, hauteur);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>x</code></dt>
- <dd>Un {{domxref("GLint")}} indiquant la coordonnée horizontale du coin inférieur gauche de l'origine du viewport. Valeur par défaut : 0.</dd>
- <dt><code>y</code></dt>
- <dd>Un {{domxref("GLint")}} indiquant la coordonnée verticale du coin inférieur gauche de l'origine du viewport. Valeur par défaut : 0.</dd>
- <dt>largeur</dt>
- <dd>Un {{domxref("Glsizei")}} non négatif indiquant la largeur du viewport. Valeur par défaut : la largeur du canevas.</dd>
- <dt>height</dt>
- <dd>Un {{domxref("Glsizei")}} non négatif indiquant la hauteur du viewport. Valeur par défaut : la hauteur du canevas.</dd>
-</dl>
+- `x`
+  - : Un {{domxref("GLint")}} indiquant la coordonnée horizontale du coin inférieur gauche de l'origine du viewport. Valeur par défaut : 0.
+- `y`
+  - : Un {{domxref("GLint")}} indiquant la coordonnée verticale du coin inférieur gauche de l'origine du viewport. Valeur par défaut : 0.
+- largeur
+  - : Un {{domxref("Glsizei")}} non négatif indiquant la largeur du viewport. Valeur par défaut : la largeur du canevas.
+- height
+  - : Un {{domxref("Glsizei")}} non négatif indiquant la hauteur du viewport. Valeur par défaut : la hauteur du canevas.
 
-<h3 id="Valeur_retournée">Valeur retournée</h3>
+### Valeur retournée
 
-<p>Aucune.</p>
+Aucune.
 
-<h3 id="Erreurs_déclenchées">Erreurs déclenchées</h3>
+### Erreurs déclenchées
 
-<p>Si <em>largeur</em> ou <em>hauteur</em> est une valeur négative, une erreur <code>gl.INVALID_VALUE</code> est déclenchée.</p>
+Si *largeur* ou *hauteur* est une valeur négative, une erreur `gl.INVALID_VALUE` est déclenchée.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Lorsque vous créez un contexte WebGL pour la première fois, la taille de la fenêtre correspondra à celle du canevas. Toutefois, si vous redimensionnez le canevas, vous devrez indiquer au contexte de WebGL une nouvelle définition de viewport. Dans cette situation, vous pouvez utiliser <code>gl.viewport</code>.</p>
+Lorsque vous créez un contexte WebGL pour la première fois, la taille de la fenêtre correspondra à celle du canevas. Toutefois, si vous redimensionnez le canevas, vous devrez indiquer au contexte de WebGL une nouvelle définition de viewport. Dans cette situation, vous pouvez utiliser `gl.viewport`.
 
-<pre class="brush: js">gl.viewport(0, 0, canevas.width, canevas.height);
-</pre>
+```js
+gl.viewport(0, 0, canevas.width, canevas.height);
+```
 
-<p>La largeur et la hauteur de la fenêtre sont limitées à une plage dépendante de l'implémentation. Pour obtenir cette plage, vous pouvez utiliser la constante <code>MAX_VIEWPORT_DIMS</code>, qui renvoie un {{jsxref ("Int32Array")}}.</p>
+La largeur et la hauteur de la fenêtre sont limitées à une plage dépendante de l'implémentation. Pour obtenir cette plage, vous pouvez utiliser la constante `MAX_VIEWPORT_DIMS`, qui renvoie un {{jsxref ("Int32Array")}}.
 
-<pre class="brush: js">gl.getParameter(gl.MAX_VIEWPORT_DIMS);
+```js
+gl.getParameter(gl.MAX_VIEWPORT_DIMS);
 // Par ex., Int32Array[16384, 16384]
-</pre>
+```
 
-<p>Pour obtenir le viewport en cours, faites une requête sur la constante <code>VIEWPORT</code>.</p>
+Pour obtenir le viewport en cours, faites une requête sur la constante `VIEWPORT`.
 
-<pre class="brush: js">gl.getParameter(gl.VIEWPORT);
+```js
+gl.getParameter(gl.VIEWPORT);
 // e.g. Int32Array[0, 0, 640, 480]
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('WebGL', "#5.14.4", "viewport")}}</td>
-   <td>{{Spec2('WebGL')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('OpenGL ES 2.0', "glViewport.xml", "glViewport")}}</td>
-   <td>{{Spec2('OpenGL ES 2.0')}}</td>
-   <td>Page man de l'API OpenGL.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.WebGLRenderingContext.viewport")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("WebGLRenderingContext.scissor()")}}</li>
- <li>{{domxref("WebGLRenderingContext.getParameter()")}}</li>
-</ul>
+```
+
+## Spécifications
+
+| Spécification                                                                    | Statut                               | Commentaire               |
+| -------------------------------------------------------------------------------- | ------------------------------------ | ------------------------- |
+| {{SpecName('WebGL', "#5.14.4", "viewport")}}                     | {{Spec2('WebGL')}}             | Définition initiale.      |
+| {{SpecName('OpenGL ES 2.0', "glViewport.xml", "glViewport")}} | {{Spec2('OpenGL ES 2.0')}} | Page man de l'API OpenGL. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.WebGLRenderingContext.viewport")}}
+
+## Voir aussi
+
+- {{domxref("WebGLRenderingContext.scissor()")}}
+- {{domxref("WebGLRenderingContext.getParameter()")}}
diff --git a/files/fr/web/api/webglshader/index.md b/files/fr/web/api/webglshader/index.md
index 8a32022723..291bdcf503 100644
--- a/files/fr/web/api/webglshader/index.md
+++ b/files/fr/web/api/webglshader/index.md
@@ -7,15 +7,16 @@ tags:
   - WebGLShader
 translation_of: Web/API/WebGLShader
 ---
-<div>{{APIRef("WebGL")}}</div>
+{{APIRef("WebGL")}}
 
-<p>Le <strong>WebGLShader</strong> fait partie de l'<a href="/fr-FR/docs/Web/API/WebGL_API">API WebGL</a> et peut être un shader de sommet ou de fragment. Un {{domxref ("WebGLProgram")}} requiert les deux types de shaders.</p>
+Le **WebGLShader** fait partie de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) et peut être un shader de sommet ou de fragment. Un {{domxref ("WebGLProgram")}} requiert les deux types de shaders.
 
-<h2 id="Description">Description</h2>
+## Description
 
-<p>Pour créer un <strong>WebGLShader,</strong> utiliser {{domxref("WebGLRenderingContext.createShader")}}, puis reliez-y le code source GLSL en utilisant {{domxref("WebGLRenderingContext.shaderSource()")}}, et enfin, appelez {{domxref ("WebGLRenderingContext.compileShader()")}} pour terminer et compiler le shader. À ce stade, le WebGLShader n'est toujours pas sous une forme utilisable et doit toujours être relié à un {{domxref ("WebGLProgram")}}.</p>
+Pour créer un **WebGLShader,** utiliser {{domxref("WebGLRenderingContext.createShader")}}, puis reliez-y le code source GLSL en utilisant {{domxref("WebGLRenderingContext.shaderSource()")}}, et enfin, appelez {{domxref ("WebGLRenderingContext.compileShader()")}} pour terminer et compiler le shader. À ce stade, le WebGLShader n'est toujours pas sous une forme utilisable et doit toujours être relié à un {{domxref ("WebGLProgram")}}.
 
-<pre class="brush: js">function creerShader (gl, codeSource, type) {
+```js
+function creerShader (gl, codeSource, type) {
   // Compile un shader de type soit gl.VERTEX_SHADER, soit gl.FRAGMENT_SHADER
   var shader = gl.createShader( type );
   gl.shaderSource( shader, codeSource );
@@ -27,17 +28,18 @@ translation_of: Web/API/WebGLShader
   }
   return shader;
 }
-</pre>
+```
 
-<p>Voir {{domxref("WebGLProgram")}} pour des informations sur la liaison de shaders.</p>
+Voir {{domxref("WebGLProgram")}} pour des informations sur la liaison de shaders.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Création_d'un_shader_de_sommet">Création d'un shader de sommet</h3>
+### Création d'un shader de sommet
 
-<p>Notez qu'il existe de nombreuses autres stratégies pour écrire des chaînes de code source de shader et y accéder. Ces exemples sont à titre d'illustration seulement.</p>
+Notez qu'il existe de nombreuses autres stratégies pour écrire des chaînes de code source de shader et y accéder. Ces exemples sont à titre d'illustration seulement.
 
-<pre class="brush: js">var sourceShaderDeSommet =
+```js
+var sourceShaderDeSommet =
   'attribute vec4 position;\n' +
   'void main() {\n' +
   '  gl_Position = position;\n' +
@@ -45,63 +47,51 @@ translation_of: Web/API/WebGLShader
 
 // Utilisez la function creerShader de l'exemple ci-dessus
 var shaderDeSommet = creerShader(gl, sourceShaderDeSommet, gl.VERTEX_SHADER)
-</pre>
+```
 
-<h3 id="Création_d'un_shader_de_fragment">Création d'un shader de fragment</h3>
+### Création d'un shader de fragment
 
-<pre class="brush: js">var sourceShaderDeFragment =
+```js
+var sourceShaderDeFragment =
   'void main() {\n' +
   '  gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);\n' +
   '}\n';
 
 // Utilisez la fonction creerShader de l'exemple ci-dessus
 var shaderDeFragment = creerShader(gl, sourceShaderDeFragment, gl.FRAGMENT_SHADER)
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('WebGL', "#5.8", "WebGLShader")}}</td>
-   <td>{{Spec2('WebGL')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.WebGLShader.WebGLShader")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("WebGLProgram")}}</li>
- <li>{{domxref("WebGLRenderingContext.attachShader()")}}</li>
- <li>{{domxref("WebGLRenderingContext.bindAttribLocation()")}}</li>
- <li>{{domxref("WebGLRenderingContext.compileShader()")}}</li>
- <li>{{domxref("WebGLRenderingContext.createProgram()")}}</li>
- <li>{{domxref("WebGLRenderingContext.createShader()")}}</li>
- <li>{{domxref("WebGLRenderingContext.deleteProgram()")}}</li>
- <li>{{domxref("WebGLRenderingContext.deleteShader()")}}</li>
- <li>{{domxref("WebGLRenderingContext.detachShader()")}}</li>
- <li>{{domxref("WebGLRenderingContext.getAttachedShaders()")}}</li>
- <li>{{domxref("WebGLRenderingContext.getProgramParameter()")}}</li>
- <li>{{domxref("WebGLRenderingContext.getProgramInfoLog()")}}</li>
- <li>{{domxref("WebGLRenderingContext.getShaderParameter()")}}</li>
- <li>{{domxref("WebGLRenderingContext.getShaderPrecisionFormat()")}}</li>
- <li>{{domxref("WebGLRenderingContext.getShaderInfoLog()")}}</li>
- <li>{{domxref("WebGLRenderingContext.getShaderSource()")}}</li>
- <li>{{domxref("WebGLRenderingContext.isProgram()")}}</li>
- <li>{{domxref("WebGLRenderingContext.isShader()")}}</li>
- <li>{{domxref("WebGLRenderingContext.linkProgram()")}}</li>
- <li>{{domxref("WebGLRenderingContext.shaderSource()")}}</li>
- <li>{{domxref("WebGLRenderingContext.useProgram()")}}</li>
- <li>{{domxref("WebGLRenderingContext.validateProgram()")}}</li>
-</ul>
+```
+
+## Spécifications
+
+| Spécification                                                | Statut                   | Commentaire          |
+| ------------------------------------------------------------ | ------------------------ | -------------------- |
+| {{SpecName('WebGL', "#5.8", "WebGLShader")}} | {{Spec2('WebGL')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.WebGLShader.WebGLShader")}}
+
+## Voir aussi
+
+- {{domxref("WebGLProgram")}}
+- {{domxref("WebGLRenderingContext.attachShader()")}}
+- {{domxref("WebGLRenderingContext.bindAttribLocation()")}}
+- {{domxref("WebGLRenderingContext.compileShader()")}}
+- {{domxref("WebGLRenderingContext.createProgram()")}}
+- {{domxref("WebGLRenderingContext.createShader()")}}
+- {{domxref("WebGLRenderingContext.deleteProgram()")}}
+- {{domxref("WebGLRenderingContext.deleteShader()")}}
+- {{domxref("WebGLRenderingContext.detachShader()")}}
+- {{domxref("WebGLRenderingContext.getAttachedShaders()")}}
+- {{domxref("WebGLRenderingContext.getProgramParameter()")}}
+- {{domxref("WebGLRenderingContext.getProgramInfoLog()")}}
+- {{domxref("WebGLRenderingContext.getShaderParameter()")}}
+- {{domxref("WebGLRenderingContext.getShaderPrecisionFormat()")}}
+- {{domxref("WebGLRenderingContext.getShaderInfoLog()")}}
+- {{domxref("WebGLRenderingContext.getShaderSource()")}}
+- {{domxref("WebGLRenderingContext.isProgram()")}}
+- {{domxref("WebGLRenderingContext.isShader()")}}
+- {{domxref("WebGLRenderingContext.linkProgram()")}}
+- {{domxref("WebGLRenderingContext.shaderSource()")}}
+- {{domxref("WebGLRenderingContext.useProgram()")}}
+- {{domxref("WebGLRenderingContext.validateProgram()")}}
diff --git a/files/fr/web/api/webgltexture/index.md b/files/fr/web/api/webgltexture/index.md
index c80a2f6998..e00339ce48 100644
--- a/files/fr/web/api/webgltexture/index.md
+++ b/files/fr/web/api/webgltexture/index.md
@@ -7,66 +7,52 @@ tags:
   - WebGL
 translation_of: Web/API/WebGLTexture
 ---
-<div>{{APIRef("WebGL")}}</div>
+{{APIRef("WebGL")}}
 
-<p>L'interface WebGLTexture fait partie de l'<a href="/fr/docs/Web/API/WebGL_API">API WebGL</a> et représente un objet de texture opaque fournissant un stockage et un état pour les opérations de texturation.</p>
+L'interface WebGLTexture fait partie de l'[API WebGL](/fr/docs/Web/API/WebGL_API) et représente un objet de texture opaque fournissant un stockage et un état pour les opérations de texturation.
 
-<h2 id="Description">Description</h2>
+## Description
 
-<p>L'objet WebGLTexture ne définit aucune méthode ou propriété propre, et son contenu n'est pas directement accessible. Lors du travail avec des objets WebGLTexture, les méthodes suivantes du {{domxref("WebGLRenderingContext")}} sont utiles :</p>
+L'objet WebGLTexture ne définit aucune méthode ou propriété propre, et son contenu n'est pas directement accessible. Lors du travail avec des objets WebGLTexture, les méthodes suivantes du {{domxref("WebGLRenderingContext")}} sont utiles :
 
-<ul>
- <li>{{domxref("WebGLRenderingContext.bindTexture()")}}</li>
- <li>{{domxref("WebGLRenderingContext.createTexture()")}}</li>
- <li>{{domxref("WebGLRenderingContext.deleteTexture()")}}</li>
- <li>{{domxref("WebGLRenderingContext.isTexture()")}}</li>
-</ul>
+- {{domxref("WebGLRenderingContext.bindTexture()")}}
+- {{domxref("WebGLRenderingContext.createTexture()")}}
+- {{domxref("WebGLRenderingContext.deleteTexture()")}}
+- {{domxref("WebGLRenderingContext.isTexture()")}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Création_d'une_texture">Création d'une texture</h3>
+### Création d'une texture
 
-<pre class="brush: js">var canevas = document.getElementById('canvas');
+```js
+var canevas = document.getElementById('canvas');
 var gl = canevas.getContext('webgl');
 var texture = gl.createTexture();
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('WebGL', "#5.9", "WebGLTexture")}}</td>
-   <td>{{Spec2('WebGL')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.WebGLTexture")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("WebGLRenderingContext.bindTexture()")}}</li>
- <li>{{domxref("WebGLRenderingContext.createTexture()")}}</li>
- <li>{{domxref("WebGLRenderingContext.deleteTexture()")}}</li>
- <li>{{domxref("WebGLRenderingContext.isTexture()")}}</li>
- <li>{{domxref("WebGLRenderingContext.compressedTexImage2D()")}}</li>
- <li>{{domxref("WebGLRenderingContext.compressedTexSubImage2D()")}}</li>
- <li>{{domxref("WebGLRenderingContext.copyTexImage2D()")}}</li>
- <li>{{domxref("WebGLRenderingContext.copyTexSubImage2D()")}}</li>
- <li>{{domxref("WebGLRenderingContext.generateMipmap()")}}</li>
- <li>{{domxref("WebGLRenderingContext.getTexParameter()")}}</li>
- <li>{{domxref("WebGLRenderingContext.texImage2D()")}}</li>
- <li>{{domxref("WebGLRenderingContext.texSubImage2D()")}}</li>
- <li>{{domxref("WebGLRenderingContext.texParameterf()")}}</li>
- <li>{{domxref("WebGLRenderingContext.texParameteri()")}}</li>
-</ul>
+```
+
+## Spécifications
+
+| Spécification                                                | Statut                   | Commentaire          |
+| ------------------------------------------------------------ | ------------------------ | -------------------- |
+| {{SpecName('WebGL', "#5.9", "WebGLTexture")}} | {{Spec2('WebGL')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.WebGLTexture")}}
+
+## Voir aussi
+
+- {{domxref("WebGLRenderingContext.bindTexture()")}}
+- {{domxref("WebGLRenderingContext.createTexture()")}}
+- {{domxref("WebGLRenderingContext.deleteTexture()")}}
+- {{domxref("WebGLRenderingContext.isTexture()")}}
+- {{domxref("WebGLRenderingContext.compressedTexImage2D()")}}
+- {{domxref("WebGLRenderingContext.compressedTexSubImage2D()")}}
+- {{domxref("WebGLRenderingContext.copyTexImage2D()")}}
+- {{domxref("WebGLRenderingContext.copyTexSubImage2D()")}}
+- {{domxref("WebGLRenderingContext.generateMipmap()")}}
+- {{domxref("WebGLRenderingContext.getTexParameter()")}}
+- {{domxref("WebGLRenderingContext.texImage2D()")}}
+- {{domxref("WebGLRenderingContext.texSubImage2D()")}}
+- {{domxref("WebGLRenderingContext.texParameterf()")}}
+- {{domxref("WebGLRenderingContext.texParameteri()")}}
diff --git a/files/fr/web/api/webrtc_api/connectivity/index.md b/files/fr/web/api/webrtc_api/connectivity/index.md
index 119cf898ff..c47168e0eb 100644
--- a/files/fr/web/api/webrtc_api/connectivity/index.md
+++ b/files/fr/web/api/webrtc_api/connectivity/index.md
@@ -6,46 +6,46 @@ tags:
 translation_of: Web/API/WebRTC_API/Connectivity
 original_slug: Web/Guide/API/WebRTC/WebRTC_architecture
 ---
-<p>(AKA "WebRTC et l'océan des acronymes") WebRTC comporte de nombreuses parties distinctes et cela peut être accablant et source de confusion pour les nouveaux venus. Cet article a pour but d'expliquer quelles sont toutes ses parties, et comment elles s'imbriquent.</p>
+(AKA "WebRTC et l'océan des acronymes") WebRTC comporte de nombreuses parties distinctes et cela peut être accablant et source de confusion pour les nouveaux venus. Cet article a pour but d'expliquer quelles sont toutes ses parties, et comment elles s'imbriquent.
 
-<h2 id="Qu’est-ce_que_ICE">Qu’est-ce que ICE?</h2>
+## Qu’est-ce que ICE?
 
-<p><a href="http://en.wikipedia.org/wiki/Interactive_Connectivity_Establishment">Interactive Connectivity Establishment (ICE)</a> est un cadre qui permet à votre navigateur web de se connecter avec des pairs. Il y a plusieurs raisons pour qu’une connexion directe entre un pair A et un pair B ne fonctionne pas. Il a besoin de contourner les pare-feux qui pourraient empêcher la connexion de s’ouvrir, il doit vous attribuer une adresse unique si votre appareil n'a pas une adresse IP publique comme la plupart du temps et transmettre des données via un serveur si votre routeur ne permet pas de vous connecter directement avec des pairs. ICE utilise certaines des techniques suivantes décrites ci-dessous pour y parvenir :</p>
+[Interactive Connectivity Establishment (ICE)](http://en.wikipedia.org/wiki/Interactive_Connectivity_Establishment) est un cadre qui permet à votre navigateur web de se connecter avec des pairs. Il y a plusieurs raisons pour qu’une connexion directe entre un pair A et un pair B ne fonctionne pas. Il a besoin de contourner les pare-feux qui pourraient empêcher la connexion de s’ouvrir, il doit vous attribuer une adresse unique si votre appareil n'a pas une adresse IP publique comme la plupart du temps et transmettre des données via un serveur si votre routeur ne permet pas de vous connecter directement avec des pairs. ICE utilise certaines des techniques suivantes décrites ci-dessous pour y parvenir :
 
-<h2 id="Qu’est-ce_que_STUN">Qu’est-ce que STUN?</h2>
+## Qu’est-ce que STUN?
 
-<p><a href="http://fr.wikipedia.org/wiki/Simple_Traversal_of_UDP_through_NATs">Session Traversal Utilities for NAT (STUN)</a> (acronyme dans un acronyme) est un protocole qui permet de découvrir votre adresse publique et de déterminer toute restriction dans votre routeur qui empêcherait une connexion directe avec un pair.</p>
+[Session Traversal Utilities for NAT (STUN)](http://fr.wikipedia.org/wiki/Simple_Traversal_of_UDP_through_NATs) (acronyme dans un acronyme) est un protocole qui permet de découvrir votre adresse publique et de déterminer toute restriction dans votre routeur qui empêcherait une connexion directe avec un pair.
 
-<p>Le client enverra une demande à un serveur STUN sur internet qui répondra avec l'adresse du client public et informera si le client est accessible derrière un routeur NAT.</p>
+Le client enverra une demande à un serveur STUN sur internet qui répondra avec l'adresse du client public et informera si le client est accessible derrière un routeur NAT.
 
-<h2 id="Qu’est-ce_que_NAT">Qu’est-ce que NAT?</h2>
+## Qu’est-ce que NAT?
 
-<p><a href="http://fr.wikipedia.org/wiki/Network_address_translation">Network Address Translation (NAT)</a> est utilisé pour donner à votre appareil une adresse IP publique. Un routeur aura une adresse IP publique et chaque périphérique connecté au routeur aura une adresse IP privée. Les demandes seront traduites de l'adresse IP privée de l'appareil vers l'IP publique du routeur avec un port unique. De cette façon, vous n'avez pas besoin d’avoir une adresse IP publique unique pour chaque périphérique, mais pouvez encore être découvert sur internet.</p>
+[Network Address Translation (NAT)](http://fr.wikipedia.org/wiki/Network_address_translation) est utilisé pour donner à votre appareil une adresse IP publique. Un routeur aura une adresse IP publique et chaque périphérique connecté au routeur aura une adresse IP privée. Les demandes seront traduites de l'adresse IP privée de l'appareil vers l'IP publique du routeur avec un port unique. De cette façon, vous n'avez pas besoin d’avoir une adresse IP publique unique pour chaque périphérique, mais pouvez encore être découvert sur internet.
 
-<p>Certains routeurs auront des restrictions sur ceux qui peuvent se connecter aux dispositifs sur le réseau. Cela peut signifier que, même si nous avons l'adresse IP publique, trouvée par le serveur STUN, tout le monde ne peut pas créer une connexion. Dans ce cas, il faut se tourner vers le TURN.</p>
+Certains routeurs auront des restrictions sur ceux qui peuvent se connecter aux dispositifs sur le réseau. Cela peut signifier que, même si nous avons l'adresse IP publique, trouvée par le serveur STUN, tout le monde ne peut pas créer une connexion. Dans ce cas, il faut se tourner vers le TURN.
 
-<h2 id="Qu’est-ce_que_TURN">Qu’est-ce que TURN?</h2>
+## Qu’est-ce que TURN?
 
-<p>Certains routeurs utilisant NAT emploient une restriction appelée ‘Symmetric NAT’. Cela signifie que le routeur n'accepte que les connexions de pairs auxquelles vous vous êtes déjà connecté.</p>
+Certains routeurs utilisant NAT emploient une restriction appelée ‘Symmetric NAT’. Cela signifie que le routeur n'accepte que les connexions de pairs auxquelles vous vous êtes déjà connecté.
 
-<p><a href="http://en.wikipedia.org/wiki/TURN">Traversal Using Relays around NAT (TURN)</a> Doit contourner la restriction de NAT Symétrique en ouvrant une connexion avec un serveur TURN et retransmettre toutes les informations par le biais de ce serveur. Vous devrez créer une connexion avec un serveur TURN et dire à tous les pairs d'envoyer des paquets au serveur qui vous seront alors expédiés. Cela vient évidemment avec une certaine surcharge et n'est donc utilisé que s'il n'y a pas d'autres alternatives.</p>
+[Traversal Using Relays around NAT (TURN)](http://en.wikipedia.org/wiki/TURN) Doit contourner la restriction de NAT Symétrique en ouvrant une connexion avec un serveur TURN et retransmettre toutes les informations par le biais de ce serveur. Vous devrez créer une connexion avec un serveur TURN et dire à tous les pairs d'envoyer des paquets au serveur qui vous seront alors expédiés. Cela vient évidemment avec une certaine surcharge et n'est donc utilisé que s'il n'y a pas d'autres alternatives.
 
-<h2 id="Qu’est-ce_que_SDP">Qu’est-ce que SDP?</h2>
+## Qu’est-ce que SDP?
 
-<p><a href="http://en.wikipedia.org/wiki/Session_Description_Protocol">Session Description Protocol (SDP)</a> est une norme décrivant le contenu multimédia de la connexion comprenant la résolution, les formats, les codecs, le cryptage, etc., afin que les deux pairs puissent se comprendre une fois le transfert des données en cours. Ce n'est pas le média lui-même, mais plus les métadonnées.</p>
+[Session Description Protocol (SDP)](http://en.wikipedia.org/wiki/Session_Description_Protocol) est une norme décrivant le contenu multimédia de la connexion comprenant la résolution, les formats, les codecs, le cryptage, etc., afin que les deux pairs puissent se comprendre une fois le transfert des données en cours. Ce n'est pas le média lui-même, mais plus les métadonnées.
 
-<h2 id="Qu’est-ce_qu'une_OffreRéponse_et_un_Canal_de_Signal">Qu’est-ce qu'une Offre/Réponse et un Canal de Signal?</h2>
+## Qu’est-ce qu'une Offre/Réponse et un Canal de Signal?
 
-<p>Malheureusement WebRTC ne peut pas créer de connexions sans une sorte de serveur au milieu. Nous appelons cela le Canal de Signal (Signal Channel). C'est une sorte de canal de communication pour échanger des informations avant de configurer une connexion, que ce soit par e-mail, carte postale ou pigeon voyageur... C’est comme bon vous semble.</p>
+Malheureusement WebRTC ne peut pas créer de connexions sans une sorte de serveur au milieu. Nous appelons cela le Canal de Signal (Signal Channel). C'est une sorte de canal de communication pour échanger des informations avant de configurer une connexion, que ce soit par e-mail, carte postale ou pigeon voyageur... C’est comme bon vous semble.
 
-<p>L’information que nous avons besoin d'échanger est l'Offre et la Réponse qui contient juste le SDP mentionné ci-dessus.</p>
+L’information que nous avons besoin d'échanger est l'Offre et la Réponse qui contient juste le SDP mentionné ci-dessus.
 
-<p>Le pair A, qui sera l'initiateur de la connexion, va créer une offre. Il enverra ensuite cette offre au pair B en utilisant le Canal de Signal choisi. Le pair B recevra l’offre du Canal de Signal et créera la Réponse. Il renverra ensuite tout ceci au pair A via le Canal de Signal.</p>
+Le pair A, qui sera l'initiateur de la connexion, va créer une offre. Il enverra ensuite cette offre au pair B en utilisant le Canal de Signal choisi. Le pair B recevra l’offre du Canal de Signal et créera la Réponse. Il renverra ensuite tout ceci au pair A via le Canal de Signal.
 
-<h2 id="Qu’est-ce_qu’un_candidat_ICE">Qu’est-ce qu’un candidat ICE?</h2>
+## Qu’est-ce qu’un candidat ICE?
 
-<p>Autant que d'échanger des informations sur les médias (cf. Offre/Réponse et SDP), les pairs doivent échanger des informations sur la connexion réseau. Ceci est connu comme étant un candidat ICE et détaille les méthodes disponibles que le pair est en mesure de communiquer (directement ou via un serveur TURN).</p>
+Autant que d'échanger des informations sur les médias (cf. Offre/Réponse et SDP), les pairs doivent échanger des informations sur la connexion réseau. Ceci est connu comme étant un candidat ICE et détaille les méthodes disponibles que le pair est en mesure de communiquer (directement ou via un serveur TURN).
 
-<h2 id="L'échange_entier_dans_un_diagramme_compliqué">L'échange entier dans un diagramme compliqué</h2>
+## L'échange entier dans un diagramme compliqué
 
-<p><a href="https://hacks.mozilla.org/2013/07/webrtc-and-the-ocean-of-acronyms/"><img alt="Un schéma architectural complet montrant l'ensemble du processus WebRTC." src="webrtc-complete-diagram.png"></a></p>
\ No newline at end of file
+[![Un schéma architectural complet montrant l'ensemble du processus WebRTC.](webrtc-complete-diagram.png)](https://hacks.mozilla.org/2013/07/webrtc-and-the-ocean-of-acronyms/)
diff --git a/files/fr/web/api/webrtc_api/index.md b/files/fr/web/api/webrtc_api/index.md
index 99c684f479..331e3d27ea 100644
--- a/files/fr/web/api/webrtc_api/index.md
+++ b/files/fr/web/api/webrtc_api/index.md
@@ -14,197 +14,161 @@ tags:
   - diffusion
 translation_of: Web/API/WebRTC_API
 ---
-<div>{{APIRef("WebRTC")}}</div>
-
-<p><strong>WebRTC</strong> (Web Real-Time Communications) est une technologie qui permet aux applications et sites web de capturer et éventuellement de diffuser des médias audio et/ou vidéo, ainsi que d'échanger des données arbitraires entre les navigateurs sans passer par un intermédiaire.</p>
-<p>L'ensemble de normes qui comprend WebRTC permet de partager des données et d'effectuer des téléconférences peer-to-peer, sans exiger que l'utilisateur installe des plug-ins ou tout autre logiciel tiers.</p>
-
-<p>WebRTC se compose de plusieurs API et protocoles interdépendants qui fonctionnent ensemble pour y parvenir. La documentation que vous trouverez ici vous aidera à comprendre les principes de base de WebRTC, comment configurer et utiliser les connexions de données et multimédias, et plus encore.</p>
-
-<h2 id="Concepts_et_utilisation_du_WebRTC">Concepts et utilisation du WebRTC</h2>
-
-<p>WebRTC a plusieurs objectifs et chevauche considérablement l'API Media Capture and Streams. Ensemble, ils offrent de puissantes capacités multimédias au web, notamment la prise en charge des conférences audio et vidéo, l'échange de fichiers, la gestion des idendités et l'interfaçage avec les systèmes téléphoniques hérités en envoyant des signaux {{Glossary("DTMF")}}. Les connexions entre pairs peuvent être établies sans nécessiter de pilotes ou de plug-ins spéciaux, et peuvent souvent être établies sans aucun serveur intermédiaire.</p>
-
-<p>Les connexions entre deux pairs sont créées à l'aide de - et représentées par - l'interface {{domxref("RTCPeerConnection")}}. Une fois la connexion établie et ouverte, des flux multimédias ({{domxref("MediaStream")}}s) et/ou des canaux de données ({{domxref("RTCDataChannel")}}s) peuvent être ajoutés à la connexion.</p>
-
-<p>Les flux multimédias peuvent être constitués de n'importe quel nombre de pistes d'informations multimédias; les pistes, qui sont représentées par des objets basés sur l'interface {{domxref("MediaStreamTrack")}}, peuvent contenir l'un des nombreux types de données multimédias, y compris audio, vidéo et texte (comme des sous-titres ou même des noms de chapitre). La plupart des flux se composent d'au moins une piste audio et probablement également d'une piste vidéo, et peuvent être utilisés pour envoyer et recevoir à la fois des médias en direct ou des informations multimédias stockées (comme un film diffusé en continu).</p>
-
-<p>Vous pouvez également utiliser la connexion entre deux pairs pour échanger des données binaires arbitraires à l'aide de l'interface {{domxref("RTCDataChannel")}}. Cela peut être utilisé pour les informations de canal arrière, l'échange de métadonnées, les paquets d'état du jeu, les transferts de fichiers ou même comme canal principal pour le transfert de données.</p>
-
-<p><em><strong>plus de détails et de liens vers des guides et didacticiels pertinents nécessaires</strong></em></p>
-
-<h2 id="Interfaces_WebRTC">Interfaces WebRTC</h2>
-
-<p>Étant donné que WebRTC fournit des interfaces qui fonctionnent ensemble pour accomplir une variété de tâches, nous avons divisé les interfaces dans la liste ci-dessous par catégorie. Veuillez consulter la barre latérale pour une liste alphabétique.</p>
-
-<h3 id="Configuration_et_gestion_de_la_connexion">Configuration et gestion de la connexion</h3>
-
-<p>Ces interfaces sont utilisées pour configurer, ouvrir et gérer les connexions WebRTC.</p>
-
-<dl>
- <dt>{{domxref("RTCPeerConnection")}}</dt>
- <dd>Représente une connexion WebRTC entre l'ordinateur local et un homologue distant. Il est utilisé pour gérer un flux de données efficace entre les deux pairs.</dd>
- <dt>{{domxref("RTCDataChannel")}}</dt>
- <dd>Représente un canal de données bidirectionnel entre deux homologues d'une connexion.</dd>
- <dt>{{domxref("RTCDataChannelEvent")}}</dt>
- <dd>Représente les événements qui se produisent lors de l'attachement d'un {{domxref("RTCDataChannel")}} à un {{domxref("RTCPeerConnection")}}. Le seul événement envoyé avec cette interface est {{event("datachannel")}}.</dd>
- <dt>{{domxref("RTCSessionDescription")}}</dt>
- <dd>Représente les paramètres d'une session. Chaque <code>RTCSessionDescription</code> se compose d'une description {{domxref("RTCSessionDescription.type", "type")}} indiquant quelle partie du processus de négociation offre / réponse elle décrit et du descripteur {{Glossary("SDP")}} du session.</dd>
- <dt>{{domxref("RTCSessionDescriptionCallback")}}</dt>
- <dd>Le RTCSessionDescriptionCallback est passé dans l'objet {{domxref("RTCPeerConnection")}} lors de la demande de création d'offres ou de réponses.</dd>
- <dt>{{domxref("RTCStatsReport")}}</dt>
- <dd>Fournit des informations détaillant les statistiques pour une connexion ou pour une piste individuelle sur la connexion; le rapport peut être obtenu en appelant {{domxref("RTCPeerConnection.getStats()")}}.</dd>
- <dt>{{domxref("RTCIceCandidate")}}</dt>
- <dd>Représente un serveur d'établissement de connectivité Internet (ICE) candidat pour l'établissement d'un {{domxref("RTCPeerConnection")}}.</dd>
- <dt>{{domxref("RTCIceTransport")}}</dt>
- <dd>Représente des informations sur un transport d'établissement de connectivité Internet (ICE).</dd>
- <dt>{{domxref("RTCIceServer")}}</dt>
- <dd>Définit comment se connecter à un seul serveur ICE (tel qu'un serveur STUN ou TURN).</dd>
- <dt>{{domxref("RTCPeerConnectionIceEvent")}}</dt>
- <dd>Représente les événements qui se produisent en relation avec les candidats ICE avec la cible, généralement un {{domxref("RTCPeerConnection")}}. Un seul événement est de ce type: {{event("icecandidate")}}.</dd>
- <dt>{{domxref("RTCRtpSender")}}</dt>
- <dd>Gère l'encodage et la transmission des données pour un {{domxref("MediaStreamTrack")}} sur un {{domxref("RTCPeerConnection")}}.</dd>
- <dt>{{domxref("RTCRtpReceiver")}}</dt>
- <dd>Gère la réception et le décodage des données pour un {{domxref("MediaStreamTrack")}} sur un {{domxref("RTCPeerConnection")}}.</dd>
- <dt>{{domxref("RTCRtpContributingSource")}}</dt>
- <dd>Contient des informations sur une source contributive donnée (CSRC), y compris l'heure la plus récente où un paquet que la source a contribué a été lu.</dd>
- <dt>{{domxref("RTCTrackEvent")}}</dt>
- <dd>Indique qu'un nouvel {{domxref("MediaStreamTrack")}} entrant a été créé et qu'un objet {{domxref("RTCRtpReceiver")}} associé a été ajouté à l'objet {{domxref("RTCPeerConnection")}}.</dd>
- <dt>{{domxref("RTCConfiguration")}}</dt>
- <dd>Utilisé pour fournir des options de configuration pour un <a href="/fr/docs/Web/API/RTCPeerConnection"><code>RTCPeerConnection</code></a>.</dd>
-</dl>
-
-<dl>
- <dt>{{domxref("RTCSctpTransport")}}</dt>
- <dd>Fournit des informations qui décrivent un transport Stream Control Transmission Protocol (<strong>{{Glossary("SCTP")}}</strong>) et fournit aussi un moeyn d'accéder au transport Datagram Transport Layer Security (<strong>{{Glossary("DTLS")}}</strong>) sur lequel les paquets SCTP pour tous les canaux de données d'un <a href="/fr/docs/Web/API/RTCPeerConnection"><code>RTCPeerConnection</code></a> sont envoyés et reçus.</dd>
-</dl>
-
-<h3 id="Identité_et_sécurité">Identité et sécurité</h3>
-
-<p>L'API WebRTC comprend un certain nombre d'interfaces pour gérer la sécurité et l'identité.</p>
-
-<dl>
- <dt>{{domxref("RTCIdentityProvider")}}</dt>
- <dd>Permet à un agent utilisateur de demander qu'une assertion d'identité soit générée ou validée.</dd>
- <dt>{{domxref("RTCIdentityAssertion")}}</dt>
- <dd>Représente l'identité de l'homologue distant de la connexion actuelle. Si aucun pair n'a encore été défini et vérifié, cette interface renvoie <code>null</code>. Une fois défini, il ne peut pas être modifié.</dd>
- <dt>{{domxref("RTCIdentityProviderRegistrar")}}</dt>
- <dd>Enregistre un fournisseur d'identité (idP).</dd>
- <dt>{{domxref("RTCIdentityEvent")}}</dt>
- <dd>Représente une assertion d'identité générée par un fournisseur d'identité (idP). C'est généralement pour un {{domxref("RTCPeerConnection")}}. Le seul événement envoyé avec ce type est {{event("identityresult")}}.</dd>
- <dt>{{domxref("RTCIdentityErrorEvent")}}</dt>
- <dd>Représente une erreur associée au fournisseur d'identité (idP). C'est généralement pour un {{domxref("RTCPeerConnection")}}. Deux événements sont envoyés avec ce type: {{event("idpassertionerror")}} et {{event("idpvalidationerror")}}.</dd>
- <dt>{{domxref("RTCCertificate")}}</dt>
- <dd>Représente un certificat qu'un {{domxref("RTCPeerConnection")}} utilise pour s'authentifier.</dd>
-</dl>
-
-<h3 id="Téléphonie">Téléphonie</h3>
-
-<p>Ces interfaces sont liées à l'interactivité avec les réseaux téléphoniques publics commutés (RTPC).</p>
-
-<dl>
- <dt>{{domxref("RTCDTMFSender")}}</dt>
- <dd>Gère le codage et la transmission de la signalisation DTMF (Dual-tone multi-frequency) pour une {{domxref("RTCPeerConnection")}}.</dd>
- <dt>{{domxref("RTCDTMFToneChangeEvent")}}</dt>
- <dd>Indique l'occurence d'une multi-fréquence bicolore (DTMF). Cet événement ne bouillonne pas (sauf indication contraire) et n'est pas annulable (sauf indication contraire).</dd>
-</dl>
-
-<h2 id="Guides">Guides</h2>
-
-<dl>
- <dt><a href="/fr/docs/Web/API/WebRTC_API/Protocols">Introduction aux protocoles WebRTC</a></dt>
- <dd>Cet article présente les protocoles sur lesquels l'API WebRTC est construite.</dd>
- <dt><a href="/fr/docs/Web/API/WebRTC_API/Connectivity">Connectivité WebRTC</a></dt>
- <dd>Un guide sur le fonctionnement des connexions WebRTC et sur la manière dont les différents protocoles et interfaces peuvent être utilisés ensemble pour créer de puissantes applications de communication.</dd>
- <dt><a href="/fr/docs/Web/API/WebRTC_API/Session_lifetime">Durée de vie d'une session WebRTC</a></dt>
- <dd>WebRTC vous permet de créer une communication d'égal à égal de données arbitraires, audio ou vidéo - ou toute combinaison de celles-ci - dans une application de navigateur. Dans cet article, nous examinerons la durée de vie d'une session WebRTC, de l'établissement de la connexion à la fermeture de la connexion lorsqu'elle n'est plus nécessaire.</dd>
- <dt><a href="/fr/docs/Web/API/WebRTC_API/Signaling_and_video_calling">Signalisation et appel vidéo bidirectionnel</a></dt>
- <dd>Un tutoriel et un exemple qui transforme un système de chat basé sur WebSocket créé pour un exemple précédent et ajoute la prise en charge de l'ouverture d'appels vidéo entre les participants. La connexion WebSocket du serveur de discussion est utilisée pour la signalisation WebRTC.</dd>
- <dt><a href="/fr/docs/Web/API/WebRTC_API/Using_data_channels">Utilisation des canaux de données WebRTC</a></dt>
- <dd>Ce guide explique comment utiliser une connexion homologue et un {{domxref("RTCDataChannel")}} associé pour échanger des données arbitraires entre deux homologues.</dd>
- <dt><a href="/fr/docs/Web/API/WebRTC_API/Using_DTMF">Utilisation de DTMF avec WebRTC</a></dt>
- <dd>La prise en charge de WebRTC pour l'interaction avec les passerelles reliées aux systèmes téléphoniques de la vieille école inclut la prise en charge de l'envoi de tonalités DTMF à l'aide de l'interface {{domxref("RTCDTMFSender")}}. Ce guide montre comment procéder.</dd>
-</dl>
-
-<h2 id="Tutoriels">Tutoriels</h2>
-
-<dl>
- <dt><a href="/fr/docs/Web/API/WebRTC_API/adapter.js">Amélioration de la compatibilité à l'aide de WebRTC adapter.js</a></dt>
- <dd>L'organisation WebRTC <a href="https://github.com/webrtc/adapter/">fournit sur GitHub l'adaptateur WebRTC</a> pour contourner les problèmes de compatibilité dans les implémentations WebRTC de différents navigateurs. L'adaptateur est un shim JavaScript qui permet à votre code d'être écrit selon la spécification afin qu'il "fonctionne simplement" dans tous les navigateurs prenant en charge WebRTC.</dd>
- <dt><a href="/fr/docs/Web/API/WebRTC_API/Taking_still_photos">Prendre des photos fixes avec WebRTC</a></dt>
- <dd>Cet article explique comment utiliser WebRTC pour accéder à l'appareil photo sur un ordinateur ou un téléphone mobile avec prise en charge WebRTC et prendre une photo avec.</dd>
- <dt><a href="/fr/docs/Web/API/WebRTC_API/Simple_RTCDataChannel_sample">Un exemple RTCDataChannel simple</a></dt>
- <dd>L'interface {{domxref("RTCDataChannel")}} est une fonctionnalité qui vous permet d'ouvrir un canal entre deux pairs sur lequel vous pouvez envoyer et recevoir des données arbitraires. L'API est intentionnellement similaire à l'<a href="/fr/docs/Web/API/WebSockets_API">API WebSocket</a>, de sorte que le même modèle de programmation peut être utilisé pour chacun.</dd>
-</dl>
-
-<h2 id="Ressources">Ressources</h2>
-
-<h3 id="Protocoles">Protocoles</h3>
-
-<h4 id="Protocoles_propres_au_WebRTC">Protocoles propres au WebRTC</h4>
-
-<ul>
- <li><a href="https://datatracker.ietf.org/doc/draft-ietf-rtcweb-alpn/">Négociation de protocole de couche application pour les communications Web en temps réel</a></li>
- <li><a href="https://datatracker.ietf.org/doc/draft-ietf-rtcweb-audio/">Codec audio WebRTC et exigences de traitement</a></li>
- <li><a href="https://datatracker.ietf.org/doc/draft-ietf-rtcweb-data-channel/">Canaux de données RTCWeb</a></li>
- <li><a href="https://datatracker.ietf.org/doc/draft-ietf-rtcweb-data-protocol/">Protocole de canal de données RTCWeb</a></li>
- <li><a href="https://datatracker.ietf.org/doc/draft-ietf-rtcweb-rtp-usage/">Communication Web en temps réel (WebRTC): transport multimédia et utilisation de RTP</a></li>
- <li><a href="https://datatracker.ietf.org/doc/draft-ietf-rtcweb-security-arch/">Architecture de sécurité WebRTC</a></li>
- <li><a href="https://datatracker.ietf.org/doc/draft-ietf-rtcweb-transports/">Transports pour RTCWEB</a></li>
-</ul>
-
-<h4 id="Protocoles_de_support_associés">Protocoles de support associés</h4>
-
-<ul>
- <li><a href="https://tools.ietf.org/html/rfc5245">Établissement de connectivité interactif (ICE): un protocole pour la traversée du traducteur d'adresses réseau (NAT) pour le protocole offre / réponse</a></li>
- <li><a href="https://tools.ietf.org/html/rfc5389">Utilitaires de traversée de session pour NAT (STUN)</a></li>
- <li><a href="https://tools.ietf.org/html/rfc7064">Schéma d'URI pour les utilitaires de traversée de session pour le protocole NAT (STUN)</a></li>
- <li><a href="https://tools.ietf.org/html/rfc7065">Traversée à l'aide de relais autour des identificateurs de ressources uniformes NAT (TURN)</a></li>
- <li><a href="https://tools.ietf.org/html/rfc3264">Un modèle d'offre / réponse avec protocole de description de session (SDP)</a></li>
- <li><a href="https://datatracker.ietf.org/doc/draft-ietf-tram-turn-third-party-authz/">Extension des utilitaires de traversée de session pour NAT (STUN) pour l'autorisation de tiers</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">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('WebRTC 1.0')}}</td>
-   <td>{{Spec2('WebRTC 1.0')}}</td>
-   <td>La définition initiale de l'API de WebRTC.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('Media Capture')}}</td>
-   <td>{{Spec2('Media Capture')}}</td>
-   <td>La définition initiale de l'objet véhiculant le flux de contenu multimédia.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('Media Capture DOM Elements')}}</td>
-   <td>{{Spec2('Media Capture DOM Elements')}}</td>
-   <td>La définition initiale sur la façon d'obtenir un flux de contenu à partir d'éléments DOM</td>
-  </tr>
- </tbody>
-</table>
-
-<p>En plus de ces spécifications définissant l'API nécessaire pour utiliser WebRTC, il existe plusieurs protocoles, répertoriés sous <a href="#Protocols">ressources</a>.</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("MediaDevices")}}</li>
- <li>{{domxref("MediaStreamEvent")}}</li>
- <li>{{domxref("MediaStreamConstraints")}}</li>
- <li>{{domxref("MediaStreamTrack")}}</li>
- <li>{{domxref("MessageEvent")}}</li>
- <li>{{domxref("MediaStream")}}</li>
- <li><a href="https://hacks.mozilla.org/2015/06/firefox-multistream-and-renegotiation-for-jitsi-videobridge/">Firefox multi-flux et renégociation pour Jitsi Videobridge</a></li>
- <li><a href="https://hacks.mozilla.org/2015/04/peering-through-the-webrtc-fog-with-socketpeer/">Peering via le brouillard WebRTC avec SocketPeer</a></li>
- <li><a href="https://hacks.mozilla.org/2014/04/inside-the-party-bus-building-a-web-app-with-multiple-live-video-streams-interactive-graphics/">À l'intérieur du bus de fête: création d'une application Web avec plusieurs flux vidéo en direct + graphiques interactifs</a></li>
-</ul>
+{{APIRef("WebRTC")}}
+
+**WebRTC** (Web Real-Time Communications) est une technologie qui permet aux applications et sites web de capturer et éventuellement de diffuser des médias audio et/ou vidéo, ainsi que d'échanger des données arbitraires entre les navigateurs sans passer par un intermédiaire.
+
+L'ensemble de normes qui comprend WebRTC permet de partager des données et d'effectuer des téléconférences peer-to-peer, sans exiger que l'utilisateur installe des plug-ins ou tout autre logiciel tiers.
+
+WebRTC se compose de plusieurs API et protocoles interdépendants qui fonctionnent ensemble pour y parvenir. La documentation que vous trouverez ici vous aidera à comprendre les principes de base de WebRTC, comment configurer et utiliser les connexions de données et multimédias, et plus encore.
+
+## Concepts et utilisation du WebRTC
+
+WebRTC a plusieurs objectifs et chevauche considérablement l'API Media Capture and Streams. Ensemble, ils offrent de puissantes capacités multimédias au web, notamment la prise en charge des conférences audio et vidéo, l'échange de fichiers, la gestion des idendités et l'interfaçage avec les systèmes téléphoniques hérités en envoyant des signaux {{Glossary("DTMF")}}. Les connexions entre pairs peuvent être établies sans nécessiter de pilotes ou de plug-ins spéciaux, et peuvent souvent être établies sans aucun serveur intermédiaire.
+
+Les connexions entre deux pairs sont créées à l'aide de - et représentées par - l'interface {{domxref("RTCPeerConnection")}}. Une fois la connexion établie et ouverte, des flux multimédias ({{domxref("MediaStream")}}s) et/ou des canaux de données ({{domxref("RTCDataChannel")}}s) peuvent être ajoutés à la connexion.
+
+Les flux multimédias peuvent être constitués de n'importe quel nombre de pistes d'informations multimédias; les pistes, qui sont représentées par des objets basés sur l'interface {{domxref("MediaStreamTrack")}}, peuvent contenir l'un des nombreux types de données multimédias, y compris audio, vidéo et texte (comme des sous-titres ou même des noms de chapitre). La plupart des flux se composent d'au moins une piste audio et probablement également d'une piste vidéo, et peuvent être utilisés pour envoyer et recevoir à la fois des médias en direct ou des informations multimédias stockées (comme un film diffusé en continu).
+
+Vous pouvez également utiliser la connexion entre deux pairs pour échanger des données binaires arbitraires à l'aide de l'interface {{domxref("RTCDataChannel")}}. Cela peut être utilisé pour les informations de canal arrière, l'échange de métadonnées, les paquets d'état du jeu, les transferts de fichiers ou même comme canal principal pour le transfert de données.
+
+**_plus de détails et de liens vers des guides et didacticiels pertinents nécessaires_**
+
+## Interfaces WebRTC
+
+Étant donné que WebRTC fournit des interfaces qui fonctionnent ensemble pour accomplir une variété de tâches, nous avons divisé les interfaces dans la liste ci-dessous par catégorie. Veuillez consulter la barre latérale pour une liste alphabétique.
+
+### Configuration et gestion de la connexion
+
+Ces interfaces sont utilisées pour configurer, ouvrir et gérer les connexions WebRTC.
+
+- {{domxref("RTCPeerConnection")}}
+  - : Représente une connexion WebRTC entre l'ordinateur local et un homologue distant. Il est utilisé pour gérer un flux de données efficace entre les deux pairs.
+- {{domxref("RTCDataChannel")}}
+  - : Représente un canal de données bidirectionnel entre deux homologues d'une connexion.
+- {{domxref("RTCDataChannelEvent")}}
+  - : Représente les événements qui se produisent lors de l'attachement d'un {{domxref("RTCDataChannel")}} à un {{domxref("RTCPeerConnection")}}. Le seul événement envoyé avec cette interface est {{event("datachannel")}}.
+- {{domxref("RTCSessionDescription")}}
+  - : Représente les paramètres d'une session. Chaque `RTCSessionDescription` se compose d'une description {{domxref("RTCSessionDescription.type", "type")}} indiquant quelle partie du processus de négociation offre / réponse elle décrit et du descripteur {{Glossary("SDP")}} du session.
+- {{domxref("RTCSessionDescriptionCallback")}}
+  - : Le RTCSessionDescriptionCallback est passé dans l'objet {{domxref("RTCPeerConnection")}} lors de la demande de création d'offres ou de réponses.
+- {{domxref("RTCStatsReport")}}
+  - : Fournit des informations détaillant les statistiques pour une connexion ou pour une piste individuelle sur la connexion; le rapport peut être obtenu en appelant {{domxref("RTCPeerConnection.getStats()")}}.
+- {{domxref("RTCIceCandidate")}}
+  - : Représente un serveur d'établissement de connectivité Internet (ICE) candidat pour l'établissement d'un {{domxref("RTCPeerConnection")}}.
+- {{domxref("RTCIceTransport")}}
+  - : Représente des informations sur un transport d'établissement de connectivité Internet (ICE).
+- {{domxref("RTCIceServer")}}
+  - : Définit comment se connecter à un seul serveur ICE (tel qu'un serveur STUN ou TURN).
+- {{domxref("RTCPeerConnectionIceEvent")}}
+  - : Représente les événements qui se produisent en relation avec les candidats ICE avec la cible, généralement un {{domxref("RTCPeerConnection")}}. Un seul événement est de ce type: {{event("icecandidate")}}.
+- {{domxref("RTCRtpSender")}}
+  - : Gère l'encodage et la transmission des données pour un {{domxref("MediaStreamTrack")}} sur un {{domxref("RTCPeerConnection")}}.
+- {{domxref("RTCRtpReceiver")}}
+  - : Gère la réception et le décodage des données pour un {{domxref("MediaStreamTrack")}} sur un {{domxref("RTCPeerConnection")}}.
+- {{domxref("RTCRtpContributingSource")}}
+  - : Contient des informations sur une source contributive donnée (CSRC), y compris l'heure la plus récente où un paquet que la source a contribué a été lu.
+- {{domxref("RTCTrackEvent")}}
+  - : Indique qu'un nouvel {{domxref("MediaStreamTrack")}} entrant a été créé et qu'un objet {{domxref("RTCRtpReceiver")}} associé a été ajouté à l'objet {{domxref("RTCPeerConnection")}}.
+- {{domxref("RTCConfiguration")}}
+  - : Utilisé pour fournir des options de configuration pour un [`RTCPeerConnection`](/fr/docs/Web/API/RTCPeerConnection).
+
+<!---->
+
+- {{domxref("RTCSctpTransport")}}
+  - : Fournit des informations qui décrivent un transport Stream Control Transmission Protocol (**{{Glossary("SCTP")}}**) et fournit aussi un moeyn d'accéder au transport Datagram Transport Layer Security (**{{Glossary("DTLS")}}**) sur lequel les paquets SCTP pour tous les canaux de données d'un [`RTCPeerConnection`](/fr/docs/Web/API/RTCPeerConnection) sont envoyés et reçus.
+
+### Identité et sécurité
+
+L'API WebRTC comprend un certain nombre d'interfaces pour gérer la sécurité et l'identité.
+
+- {{domxref("RTCIdentityProvider")}}
+  - : Permet à un agent utilisateur de demander qu'une assertion d'identité soit générée ou validée.
+- {{domxref("RTCIdentityAssertion")}}
+  - : Représente l'identité de l'homologue distant de la connexion actuelle. Si aucun pair n'a encore été défini et vérifié, cette interface renvoie `null`. Une fois défini, il ne peut pas être modifié.
+- {{domxref("RTCIdentityProviderRegistrar")}}
+  - : Enregistre un fournisseur d'identité (idP).
+- {{domxref("RTCIdentityEvent")}}
+  - : Représente une assertion d'identité générée par un fournisseur d'identité (idP). C'est généralement pour un {{domxref("RTCPeerConnection")}}. Le seul événement envoyé avec ce type est {{event("identityresult")}}.
+- {{domxref("RTCIdentityErrorEvent")}}
+  - : Représente une erreur associée au fournisseur d'identité (idP). C'est généralement pour un {{domxref("RTCPeerConnection")}}. Deux événements sont envoyés avec ce type: {{event("idpassertionerror")}} et {{event("idpvalidationerror")}}.
+- {{domxref("RTCCertificate")}}
+  - : Représente un certificat qu'un {{domxref("RTCPeerConnection")}} utilise pour s'authentifier.
+
+### Téléphonie
+
+Ces interfaces sont liées à l'interactivité avec les réseaux téléphoniques publics commutés (RTPC).
+
+- {{domxref("RTCDTMFSender")}}
+  - : Gère le codage et la transmission de la signalisation DTMF (Dual-tone multi-frequency) pour une {{domxref("RTCPeerConnection")}}.
+- {{domxref("RTCDTMFToneChangeEvent")}}
+  - : Indique l'occurence d'une multi-fréquence bicolore (DTMF). Cet événement ne bouillonne pas (sauf indication contraire) et n'est pas annulable (sauf indication contraire).
+
+## Guides
+
+- [Introduction aux protocoles WebRTC](/fr/docs/Web/API/WebRTC_API/Protocols)
+  - : Cet article présente les protocoles sur lesquels l'API WebRTC est construite.
+- [Connectivité WebRTC](/fr/docs/Web/API/WebRTC_API/Connectivity)
+  - : Un guide sur le fonctionnement des connexions WebRTC et sur la manière dont les différents protocoles et interfaces peuvent être utilisés ensemble pour créer de puissantes applications de communication.
+- [Durée de vie d'une session WebRTC](/fr/docs/Web/API/WebRTC_API/Session_lifetime)
+  - : WebRTC vous permet de créer une communication d'égal à égal de données arbitraires, audio ou vidéo - ou toute combinaison de celles-ci - dans une application de navigateur. Dans cet article, nous examinerons la durée de vie d'une session WebRTC, de l'établissement de la connexion à la fermeture de la connexion lorsqu'elle n'est plus nécessaire.
+- [Signalisation et appel vidéo bidirectionnel](/fr/docs/Web/API/WebRTC_API/Signaling_and_video_calling)
+  - : Un tutoriel et un exemple qui transforme un système de chat basé sur WebSocket créé pour un exemple précédent et ajoute la prise en charge de l'ouverture d'appels vidéo entre les participants. La connexion WebSocket du serveur de discussion est utilisée pour la signalisation WebRTC.
+- [Utilisation des canaux de données WebRTC](/fr/docs/Web/API/WebRTC_API/Using_data_channels)
+  - : Ce guide explique comment utiliser une connexion homologue et un {{domxref("RTCDataChannel")}} associé pour échanger des données arbitraires entre deux homologues.
+- [Utilisation de DTMF avec WebRTC](/fr/docs/Web/API/WebRTC_API/Using_DTMF)
+  - : La prise en charge de WebRTC pour l'interaction avec les passerelles reliées aux systèmes téléphoniques de la vieille école inclut la prise en charge de l'envoi de tonalités DTMF à l'aide de l'interface {{domxref("RTCDTMFSender")}}. Ce guide montre comment procéder.
+
+## Tutoriels
+
+- [Amélioration de la compatibilité à l'aide de WebRTC adapter.js](/fr/docs/Web/API/WebRTC_API/adapter.js)
+  - : L'organisation WebRTC [fournit sur GitHub l'adaptateur WebRTC](https://github.com/webrtc/adapter/) pour contourner les problèmes de compatibilité dans les implémentations WebRTC de différents navigateurs. L'adaptateur est un shim JavaScript qui permet à votre code d'être écrit selon la spécification afin qu'il "fonctionne simplement" dans tous les navigateurs prenant en charge WebRTC.
+- [Prendre des photos fixes avec WebRTC](/fr/docs/Web/API/WebRTC_API/Taking_still_photos)
+  - : Cet article explique comment utiliser WebRTC pour accéder à l'appareil photo sur un ordinateur ou un téléphone mobile avec prise en charge WebRTC et prendre une photo avec.
+- [Un exemple RTCDataChannel simple](/fr/docs/Web/API/WebRTC_API/Simple_RTCDataChannel_sample)
+  - : L'interface {{domxref("RTCDataChannel")}} est une fonctionnalité qui vous permet d'ouvrir un canal entre deux pairs sur lequel vous pouvez envoyer et recevoir des données arbitraires. L'API est intentionnellement similaire à l'[API WebSocket](/fr/docs/Web/API/WebSockets_API), de sorte que le même modèle de programmation peut être utilisé pour chacun.
+
+## Ressources
+
+### Protocoles
+
+#### Protocoles propres au WebRTC
+
+- [Négociation de protocole de couche application pour les communications Web en temps réel](https://datatracker.ietf.org/doc/draft-ietf-rtcweb-alpn/)
+- [Codec audio WebRTC et exigences de traitement](https://datatracker.ietf.org/doc/draft-ietf-rtcweb-audio/)
+- [Canaux de données RTCWeb](https://datatracker.ietf.org/doc/draft-ietf-rtcweb-data-channel/)
+- [Protocole de canal de données RTCWeb](https://datatracker.ietf.org/doc/draft-ietf-rtcweb-data-protocol/)
+- [Communication Web en temps réel (WebRTC): transport multimédia et utilisation de RTP](https://datatracker.ietf.org/doc/draft-ietf-rtcweb-rtp-usage/)
+- [Architecture de sécurité WebRTC](https://datatracker.ietf.org/doc/draft-ietf-rtcweb-security-arch/)
+- [Transports pour RTCWEB](https://datatracker.ietf.org/doc/draft-ietf-rtcweb-transports/)
+
+#### Protocoles de support associés
+
+- [Établissement de connectivité interactif (ICE): un protocole pour la traversée du traducteur d'adresses réseau (NAT) pour le protocole offre / réponse](https://tools.ietf.org/html/rfc5245)
+- [Utilitaires de traversée de session pour NAT (STUN)](https://tools.ietf.org/html/rfc5389)
+- [Schéma d'URI pour les utilitaires de traversée de session pour le protocole NAT (STUN)](https://tools.ietf.org/html/rfc7064)
+- [Traversée à l'aide de relais autour des identificateurs de ressources uniformes NAT (TURN)](https://tools.ietf.org/html/rfc7065)
+- [Un modèle d'offre / réponse avec protocole de description de session (SDP)](https://tools.ietf.org/html/rfc3264)
+- [Extension des utilitaires de traversée de session pour NAT (STUN) pour l'autorisation de tiers](https://datatracker.ietf.org/doc/draft-ietf-tram-turn-third-party-authz/)
+
+## Spécifications
+
+| Spécification                                            | Statut                                               | Commentaire                                                                              |
+| -------------------------------------------------------- | ---------------------------------------------------- | ---------------------------------------------------------------------------------------- |
+| {{SpecName('WebRTC 1.0')}}                     | {{Spec2('WebRTC 1.0')}}                     | La définition initiale de l'API de WebRTC.                                               |
+| {{SpecName('Media Capture')}}                 | {{Spec2('Media Capture')}}                 | La définition initiale de l'objet véhiculant le flux de contenu multimédia.              |
+| {{SpecName('Media Capture DOM Elements')}} | {{Spec2('Media Capture DOM Elements')}} | La définition initiale sur la façon d'obtenir un flux de contenu à partir d'éléments DOM |
+
+En plus de ces spécifications définissant l'API nécessaire pour utiliser WebRTC, il existe plusieurs protocoles, répertoriés sous [ressources](#Protocols).
+
+## Voir aussi
+
+- {{domxref("MediaDevices")}}
+- {{domxref("MediaStreamEvent")}}
+- {{domxref("MediaStreamConstraints")}}
+- {{domxref("MediaStreamTrack")}}
+- {{domxref("MessageEvent")}}
+- {{domxref("MediaStream")}}
+- [Firefox multi-flux et renégociation pour Jitsi Videobridge](https://hacks.mozilla.org/2015/06/firefox-multistream-and-renegotiation-for-jitsi-videobridge/)
+- [Peering via le brouillard WebRTC avec SocketPeer](https://hacks.mozilla.org/2015/04/peering-through-the-webrtc-fog-with-socketpeer/)
+- [À l'intérieur du bus de fête: création d'une application Web avec plusieurs flux vidéo en direct + graphiques interactifs](https://hacks.mozilla.org/2014/04/inside-the-party-bus-building-a-web-app-with-multiple-live-video-streams-interactive-graphics/)
diff --git a/files/fr/web/api/webrtc_api/session_lifetime/index.md b/files/fr/web/api/webrtc_api/session_lifetime/index.md
index 7bc9c98dab..e12bc0af64 100644
--- a/files/fr/web/api/webrtc_api/session_lifetime/index.md
+++ b/files/fr/web/api/webrtc_api/session_lifetime/index.md
@@ -4,28 +4,24 @@ slug: Web/API/WebRTC_API/Session_lifetime
 translation_of: Web/API/WebRTC_API/Session_lifetime
 original_slug: WebRTC/Introduction
 ---
-<div class="note">
-  <p><strong>Note :</strong> WebRTC vous permet de faire de la communication pair-à-pair dans une application du navigateur.</p>
-</div>
+> **Note :** WebRTC vous permet de faire de la communication pair-à-pair dans une application du navigateur.
 
-<h2 id="Etablir_la_connexion">Etablir la connexion</h2>
+## Etablir la connexion
 
-<p>La connexion initiale entre les pairs doit être accomplie par un service d'application qui se charge de la découverte des utilisateurs, communication, translation d'adresse réseau (NAT) avec les flux de données.</p>
+La connexion initiale entre les pairs doit être accomplie par un service d'application qui se charge de la découverte des utilisateurs, communication, translation d'adresse réseau (NAT) avec les flux de données.
 
-<h3 id="Signalisation">Signalisation</h3>
+### Signalisation
 
-<p>La signalisation est le mécanisme par lequel les pairs envoient des messages de contrôle à chacun dans le but d'établir le protocole de communication, le canal et la méthode. Ceux-ci ne sont pas spécifiés dans le standard WebRTC. En fait, le dévelopeur peut choisir n'importe quel protocole de message (comme SIP ou XMPP), et n'importe quel canal de communication duplex (comme WebSocket ou XMLHttpRequest) en tandem avec une API de connexion persistante à un serveur (comme l'<a href="https://developers.google.com/appengine/docs/python/channel/overview">API Google Channel</a>) pour AppEngine.</p>
+La signalisation est le mécanisme par lequel les pairs envoient des messages de contrôle à chacun dans le but d'établir le protocole de communication, le canal et la méthode. Ceux-ci ne sont pas spécifiés dans le standard WebRTC. En fait, le dévelopeur peut choisir n'importe quel protocole de message (comme SIP ou XMPP), et n'importe quel canal de communication duplex (comme WebSocket ou XMLHttpRequest) en tandem avec une API de connexion persistante à un serveur (comme l'[API Google Channel](https://developers.google.com/appengine/docs/python/channel/overview)) pour AppEngine.
 
-<h2 id="Transmission">Transmission</h2>
+## Transmission
 
-<h3 id="getUserMedia">getUserMedia</h3>
+### getUserMedia
 
-<p>Objet LocalMediaStream</p>
+Objet LocalMediaStream
 
-<h2 id="Reception">Reception</h2>
+## Reception
 
-<p>Le support WebRTC dans Firefox est caché derrière une préférence. Allez à about:config et positionnez 'media.navigator.enabled' à 'true'.</p>
+Le support WebRTC dans Firefox est caché derrière une préférence. Allez à about:config et positionnez 'media.navigator.enabled' à 'true'.
 
-<div class="note">
-  <p><strong>Note :</strong> Il y a des fichiers de tests dans les sources pour vous donner une idée sur ce qui fonctionne. Voir: <a href="http://hg.mozilla.org/projects/alder/file/tip/dom/media/tests/local_video_test.html">dom/media/tests/local_video_test.html</a>. Essayez aussi la <a href="http://webrtc-demo.herokuapp.com/mozdemo">demo de service d'appel</a>, sa page source, et son <a href="https://github.com/anantn/webrtc-demo/">serveur source</a>.</p>
-</div>
+> **Note :** Il y a des fichiers de tests dans les sources pour vous donner une idée sur ce qui fonctionne. Voir: [dom/media/tests/local_video_test.html](http://hg.mozilla.org/projects/alder/file/tip/dom/media/tests/local_video_test.html). Essayez aussi la [demo de service d'appel](http://webrtc-demo.herokuapp.com/mozdemo), sa page source, et son [serveur source](https://github.com/anantn/webrtc-demo/).
diff --git a/files/fr/web/api/webrtc_api/signaling_and_video_calling/index.md b/files/fr/web/api/webrtc_api/signaling_and_video_calling/index.md
index a4b67ab853..1e5bd79f1c 100644
--- a/files/fr/web/api/webrtc_api/signaling_and_video_calling/index.md
+++ b/files/fr/web/api/webrtc_api/signaling_and_video_calling/index.md
@@ -7,219 +7,234 @@ translation_of: Web/API/WebRTC_API/Signaling_and_video_calling
 translation_of_original: Web/API/WebRTC_API/WebRTC_basics
 original_slug: Web/Guide/API/WebRTC/WebRTC_basics
 ---
-<p>Maintenant que vous comprenez l'<a href="/fr/docs/Web/Guide/API/WebRTC/WebRTC_architecture">architecture WebRTC</a>, vous pouvez passer à cet article, qui vous emmène à travers la création d'une application RTC multi-navigateurs.A la fin de cet article vous devriez pouvoir créer un canal de données et de médias  pair à pair qui fonctionne</p>
+Maintenant que vous comprenez l'[architecture WebRTC](/fr/docs/Web/Guide/API/WebRTC/WebRTC_architecture), vous pouvez passer à cet article, qui vous emmène à travers la création d'une application RTC multi-navigateurs.A la fin de cet article vous devriez pouvoir créer un canal de données et de médias  pair à pair qui fonctionne
 
-<h2 id="Contenu_semi-ancien_à_partir_de_RTCPeerConnection">Contenu semi-ancien, à partir de RTCPeerConnection</h2>
+## Contenu semi-ancien, à partir de RTCPeerConnection
 
-<p>Les informations ci-dessous proviennent de RTCPeerConnection; elles  pourraient rester ici, comme aller ailleurs. Mais elles ne font pas partie de cette page. Alors pendant que je trie cette page, elles seront ici, jusqu'à ce que je sache où elles appartiennent pour de vrai.</p>
+Les informations ci-dessous proviennent de RTCPeerConnection; elles  pourraient rester ici, comme aller ailleurs. Mais elles ne font pas partie de cette page. Alors pendant que je trie cette page, elles seront ici, jusqu'à ce que je sache où elles appartiennent pour de vrai.
 
-<h2 id="Usage_basique">Usage basique</h2>
+## Usage basique
 
-<p>l'utilisation de RTCPeerConnection implique la négociation d'une connexion entre votre machine  et une machine distante,et ce, en générant {{interwiki("wikipedia", "Session Description Protocol")}} a échanger entre les deux. L'appelant commence le processus en envoyant une offre à l'appareil distant, qui répond par l'acceptation ou le rejet de la demande de connexion.</p>
+l'utilisation de RTCPeerConnection implique la négociation d'une connexion entre votre machine  et une machine distante,et ce, en générant {{interwiki("wikipedia", "Session Description Protocol")}} a échanger entre les deux. L'appelant commence le processus en envoyant une offre à l'appareil distant, qui répond par l'acceptation ou le rejet de la demande de connexion.
 
-<p>Les deux parties (l'appelant et l'appelé) doivent mettre en place leurs propres instances de RTCPeerConnection pour représenter leurs extrémités de la connexion peer-to-peer:</p>
+Les deux parties (l'appelant et l'appelé) doivent mettre en place leurs propres instances de RTCPeerConnection pour représenter leurs extrémités de la connexion peer-to-peer:
 
-<pre class="notranslate"><code>var pc = new RTCPeerConnection();
-pc.onaddstream = function(obj) {
-  var vid = document.createElement("video");
-  document.appendChild(vid);
-  vid.srcObject = obj.stream;
-}
+    var pc = new RTCPeerConnection();
+    pc.onaddstream = function(obj) {
+      var vid = document.createElement("video");
+      document.appendChild(vid);
+      vid.srcObject = obj.stream;
+    }
 
-// Helper functions
-function endCall() {
-  var videos = document.getElementsByTagName("video");
-  for (var i = 0; i &lt; videos.length; i++) {
-    videos[i].pause();
-  }
+    // Helper functions
+    function endCall() {
+      var videos = document.getElementsByTagName("video");
+      for (var i = 0; i < videos.length; i++) {
+        videos[i].pause();
+      }
 
-  pc.close();
-}
+      pc.close();
+    }
 
-function error(err) {
-  endCall();
-}</code></pre>
+    function error(err) {
+      endCall();
+    }
 
-<p><strong>Initialiser un appel</strong></p>
+**Initialiser un appel**
 
-<p>l'appelant doit utiliser {{domxref("navigator.getUserMedia()")}} pour obtenir un flux vidéo, puis ajouter ce flux à l'instance de RTCPeerConnection. Une fois que cela a été fait, il doit appeler {{domxref("RTCPeerConnection.createOffer()")}} pour créer une offre,puis la configurer et l'envoyer a un serveur faisant office d'intermediaire.</p>
+l'appelant doit utiliser {{domxref("navigator.getUserMedia()")}} pour obtenir un flux vidéo, puis ajouter ce flux à l'instance de RTCPeerConnection. Une fois que cela a été fait, il doit appeler {{domxref("RTCPeerConnection.createOffer()")}} pour créer une offre,puis la configurer et l'envoyer a un serveur faisant office d'intermediaire.
 
-<pre class="notranslate"><code>// recuperer la liste des "amis" a partir du serveur
-// l'utilisateur selectionne un amis avec qui lancer la connection
-navigator.getUserMedia({video: true}, function(stream) {
-  // l'ajout d'un stream locale ne declanche pas onaddstream,
-  // donc il faut l'appeler manuellement.
-  pc.onaddstream = e =&gt; video.src = URL.createObjectURL(e.stream);
-  pc.addStream(stream);
+    // recuperer la liste des "amis" a partir du serveur
+    // l'utilisateur selectionne un amis avec qui lancer la connection
+    navigator.getUserMedia({video: true}, function(stream) {
+      // l'ajout d'un stream locale ne declanche pas onaddstream,
+      // donc il faut l'appeler manuellement.
+      pc.onaddstream = e => video.src = URL.createObjectURL(e.stream);
+      pc.addStream(stream);
 
-  pc.createOffer(function(offer) {
-    pc.setLocalDescription(offer, function() {
-      // envoi de l'offre au serveur qui se charge de la transmettre a "l'ami" choisit precedemment.
-    }, error);
-  }, error);
-});</code></pre>
+      pc.createOffer(function(offer) {
+        pc.setLocalDescription(offer, function() {
+          // envoi de l'offre au serveur qui se charge de la transmettre a "l'ami" choisit precedemment.
+        }, error);
+      }, error);
+    });
 
-<p><strong>Répondre à un appel</strong></p>
+**Répondre à un appel**
 
-<p>sur l'autre machine, l'ami recevra l'offre à partir du serveur en utilisant le protocole approprié (définit par le serveur). Une fois que l'offre arrive,{{domxref("navigator.getUserMedia()")}} est une fois de plus appelée pour créer le second flux, qui est ajouté à la RTCPeerConnection. Un  objet {{domxref("RTCSessionDescription")}} est créé, et mis en place comme la description du distant en appelant {{domxref("RTCPeerConnection.setRemoteDescription()")}}.</p>
+sur l'autre machine, l'ami recevra l'offre à partir du serveur en utilisant le protocole approprié (définit par le serveur). Une fois que l'offre arrive,{{domxref("navigator.getUserMedia()")}} est une fois de plus appelée pour créer le second flux, qui est ajouté à la RTCPeerConnection. Un  objet {{domxref("RTCSessionDescription")}} est créé, et mis en place comme la description du distant en appelant {{domxref("RTCPeerConnection.setRemoteDescription()")}}.
 
-<p>Ensuite, une réponse est créée en utilisant {{domxref("RTCPeerConnection.createAnswer()")}} et renvoyé au serveur, qui la transmet à l'appelant.</p>
+Ensuite, une réponse est créée en utilisant {{domxref("RTCPeerConnection.createAnswer()")}} et renvoyé au serveur, qui la transmet à l'appelant.
 
-<pre class="notranslate"><code>var offer = getOfferFromFriend();
-navigator.getUserMedia({video: true}, function(stream) {
-  pc.onaddstream = e =&gt; video.src = URL.createObjectURL(e.stream);
-  pc.addStream(stream);
+    var offer = getOfferFromFriend();
+    navigator.getUserMedia({video: true}, function(stream) {
+      pc.onaddstream = e => video.src = URL.createObjectURL(e.stream);
+      pc.addStream(stream);
 
-  pc.setRemoteDescription(new RTCSessionDescription(offer), function() {
-    pc.createAnswer(function(answer) {
-      pc.setLocalDescription(answer, function() {
-        // envoi de la réponse au serveur qui la transmettra a l'appelant
+      pc.setRemoteDescription(new RTCSessionDescription(offer), function() {
+        pc.createAnswer(function(answer) {
+          pc.setLocalDescription(answer, function() {
+            // envoi de la réponse au serveur qui la transmettra a l'appelant
+          }, error);
+        }, error);
       }, error);
-    }, error);
-  }, error);
-});</code></pre>
+    });
 
-<p><strong>Gestion de la réponse</strong></p>
+**Gestion de la réponse**
 
-<p>retour a la première machine, qui recois la reponse. une fois cette dernière arrivée,l'appelant utilise {{domxref("RTCPeerConnection.setRemoteDescription()")}} pour définir la réponse comme la description de l'autre l'extrémité de la connexion. </p>
+retour a la première machine, qui recois la reponse. une fois cette dernière arrivée,l'appelant utilise {{domxref("RTCPeerConnection.setRemoteDescription()")}} pour définir la réponse comme la description de l'autre l'extrémité de la connexion.
 
-<pre class="notranslate"><code>// pc a été déclaré </code>précédemment<code>, lors de l'envoi de l'offre.
-var offer = getResponseFromFriend();
-pc.setRemoteDescription(new RTCSessionDescription(offer), function() { }, error);</code></pre>
+    // pc a été déclaré précédemment, lors de l'envoi de l'offre.
+    var offer = getResponseFromFriend();
+    pc.setRemoteDescription(new RTCSessionDescription(offer), function() { }, error);
 
-<h2 id="Ancien_contenu_en_approche!">Ancien contenu en approche!</h2>
+## Ancien contenu en approche!
 
-<p>Tout ce qui est en dessous de ce point est potentiellement obsolète. Il est toujours là en attente d'examen et d'intégration possible dans d'autres parties de la documentation où il serait encore valides.</p>
+Tout ce qui est en dessous de ce point est potentiellement obsolète. Il est toujours là en attente d'examen et d'intégration possible dans d'autres parties de la documentation où il serait encore valides.
 
-<div class="note">
-<p><strong>Note :</strong> Ne pas utiliser les examples de cette page. Voir l'article <a href="/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling">signalisation et appel vidéo</a> ,pour des example mis a jour sur l'utilisation des medias WebRTC.</p>
-</div>
+> **Note :** Ne pas utiliser les examples de cette page. Voir l'article [signalisation et appel vidéo](/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling) ,pour des example mis a jour sur l'utilisation des medias WebRTC.
 
-<h2 id="Note">Note</h2>
+## Note
 
-<p>Cette page contient des informations périmées selon <a href="http://stackoverflow.com/a/25065359/3760500">http://stackoverflow.com/a/25065359/3760500</a></p>
+Cette page contient des informations périmées selon <http://stackoverflow.com/a/25065359/3760500>
 
-<blockquote>
-<p>Peu importe ce que la page de MDN indique, RTPDataChannels est très désuet (faites connaître l'URL). Firefox et Chrome supportent les spec DataChannels maintenant. Idem pour DTLSSRTPKeyAgreement je pense.</p>
-</blockquote>
+> Peu importe ce que la page de MDN indique, RTPDataChannels est très désuet (faites connaître l'URL). Firefox et Chrome supportent les spec DataChannels maintenant. Idem pour DTLSSRTPKeyAgreement je pense.
 
-<h2 id="Shims_Bibliothèque_d’interception_d’API">Shims (Bibliothèque d’interception d’API)</h2>
+## Shims (Bibliothèque d’interception d’API)
 
-<p>Comme vous pouvez l'imaginer, avec une API aussi jeune, vous devez utiliser les préfixes de navigateur et les positionner dans des variables communes.</p>
+Comme vous pouvez l'imaginer, avec une API aussi jeune, vous devez utiliser les préfixes de navigateur et les positionner dans des variables communes.
 
-<pre class="brush: js">var PeerConnection = window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
+```js
+var PeerConnection = window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
 var IceCandidate = window.mozRTCIceCandidate || window.RTCIceCandidate;
 var SessionDescription = window.mozRTCSessionDescription || window.RTCSessionDescription;
-navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia || navigator.webkitGetUserMedia;</pre>
+navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia || navigator.webkitGetUserMedia;
+```
 
-<h2 id="PeerConnection">PeerConnection</h2>
+## PeerConnection
 
-<p>C'est le point de départ pour créer une connexion avec un pair. Il accepte des options de configuration sur les serveurs ICE à utiliser pour établir une connexion.</p>
+C'est le point de départ pour créer une connexion avec un pair. Il accepte des options de configuration sur les serveurs ICE à utiliser pour établir une connexion.
 
-<pre class="brush: js">var pc = new PeerConnection(configuration, options);</pre>
+```js
+var pc = new PeerConnection(configuration, options);
+```
 
-<h3 id="RTCConfiguration"><strong><code>RTCConfiguration</code></strong></h3>
+### **`RTCConfiguration`**
 
-<p>L'objet {{domxref("RTCConfiguration")}} contient l’information sur les serveurs TURN et/ou STUN à utiliser pour ICE. Ceci est requis pour s'assurer que la plupart des utilisateurs peuvent en fait créer une connexion en évitant les restrictions du NAT et du pare-feu.</p>
+L'objet {{domxref("RTCConfiguration")}} contient l’information sur les serveurs TURN et/ou STUN à utiliser pour ICE. Ceci est requis pour s'assurer que la plupart des utilisateurs peuvent en fait créer une connexion en évitant les restrictions du NAT et du pare-feu.
 
-<pre class="brush: js">var configuration = {
+```js
+var configuration = {
     iceServers: [
         {url: "stun:23.21.150.121"},
         {url: "stun:stun.l.google.com:19302"},
         {url: "turn:numb.viagenie.ca", credential: "webrtcdemo", username: "louis%40mozilla.com"}
     ]
-}</pre>
+}
+```
 
-<p>Google met à disposition un <a href="https://code.google.com/p/natvpn/source/browse/trunk/stun_server_list">serveur STUN public</a> que nous pouvons utiliser. J'ai également créé un compte chez http://numb.viagenie.ca/ pour un accès gratuit à un serveur TURN. Vous pouvez faire la même chose et les remplacer par vos propres informations d'identification.</p>
+Google met à disposition un [serveur STUN public](https://code.google.com/p/natvpn/source/browse/trunk/stun_server_list) que nous pouvons utiliser. J'ai également créé un compte chez http\://numb.viagenie.ca/ pour un accès gratuit à un serveur TURN. Vous pouvez faire la même chose et les remplacer par vos propres informations d'identification.
 
-<h3 id="options_Cf._Note_avant"><strong><code>options</code></strong> (Cf. "Note" avant)</h3>
+### **`options`** (Cf. "Note" avant)
 
-<p>Selon le type de connexion, vous devez passer des options.</p>
+Selon le type de connexion, vous devez passer des options.
 
-<pre class="brush: js">var options = {
+```js
+var options = {
     optional: [
         {DtlsSrtpKeyAgreement: true},
         {RtpDataChannels: true}
     ]
-}</pre>
+}
+```
 
-<p><code>DtlsSrtpKeyAgreement</code> est exigé pour Chrome et Firefox pour interagir.</p>
+`DtlsSrtpKeyAgreement` est exigé pour Chrome et Firefox pour interagir.
 
-<p><code>RtpDataChannels</code> est nécessaire si nous voulons utiliser l'API DataChannels sur Firefox.</p>
+`RtpDataChannels` est nécessaire si nous voulons utiliser l'API DataChannels sur Firefox.
 
-<h2 id="ICECandidate">ICECandidate</h2>
+## ICECandidate
 
-<p>Après avoir créé la connexion et en passant par les serveurs STUN et TURN disponibles, un événement sera déclenché une fois que le framework ICE aura trouvé certains « candidats » qui permettront de vous connecter avec un pair. Ceci est reconnu comme étant un candidat ICE et exécute une fonction de rappel sur PeerConnection#onicecandidate.</p>
+Après avoir créé la connexion et en passant par les serveurs STUN et TURN disponibles, un événement sera déclenché une fois que le framework ICE aura trouvé certains « candidats » qui permettront de vous connecter avec un pair. Ceci est reconnu comme étant un candidat ICE et exécute une fonction de rappel sur PeerConnection#onicecandidate.
 
-<pre class="brush: js">pc.onicecandidate = function (e) {
+```js
+pc.onicecandidate = function (e) {
     // candidate exists in e.candidate
     if (e.candidate == null) { return }
     send("icecandidate", JSON.stringify(e.candidate));
     pc.onicecandidate = null;
-};</pre>
+};
+```
 
-<p>Lorsque le rappel est exécuté, nous devons utiliser le canal de signal pour envoyer le Candidat au pair. Sur Chrome, on trouve habituellement plusieurs candidats ICE, nous n’en avons besoin que d'un seul donc j'en envoie généralement une puis supprimer le descripteur. Firefox inclut le Candidat dans l'Offre SDP.</p>
+Lorsque le rappel est exécuté, nous devons utiliser le canal de signal pour envoyer le Candidat au pair. Sur Chrome, on trouve habituellement plusieurs candidats ICE, nous n’en avons besoin que d'un seul donc j'en envoie généralement une puis supprimer le descripteur. Firefox inclut le Candidat dans l'Offre SDP.
 
-<h2 id="Canal_de_Signal">Canal de Signal</h2>
+## Canal de Signal
 
-<p>Maintenant que nous avons un candidat ICE, nous devons l’envoyer à nos pairs afin qu'ils sachent comment se connecter avec nous. Toutefois, cela nous laisse face à une problématique de l’œuf et de la poule; Nous voulons que PeerConnection envoie des données à un pair, mais avant cela, nous devons lui envoyer des métadonnées…</p>
+Maintenant que nous avons un candidat ICE, nous devons l’envoyer à nos pairs afin qu'ils sachent comment se connecter avec nous. Toutefois, cela nous laisse face à une problématique de l’œuf et de la poule; Nous voulons que PeerConnection envoie des données à un pair, mais avant cela, nous devons lui envoyer des métadonnées…
 
-<p>C'est là qu'intervient le canal de signal. C'est n'importe quel mode de transport de données qui permet aux deux pairs d’échanger des informations. Dans cet article, nous allons utiliser <a href="http://firebase.com">FireBase</a> parce que c'est incroyablement facile à installer et ne nécessite aucun hébergement ou code serveur.</p>
+C'est là qu'intervient le canal de signal. C'est n'importe quel mode de transport de données qui permet aux deux pairs d’échanger des informations. Dans cet article, nous allons utiliser [FireBase](http://firebase.com) parce que c'est incroyablement facile à installer et ne nécessite aucun hébergement ou code serveur.
 
-<p>Pour l'instant imaginez seulement que deux méthodes existent: <code>send()</code> va prendre une clé et lui affecter des données et <code>recv()</code> appelle un descripteur lorsqu'une clé a une valeur.</p>
+Pour l'instant imaginez seulement que deux méthodes existent: `send()` va prendre une clé et lui affecter des données et `recv()` appelle un descripteur lorsqu'une clé a une valeur.
 
-<p>La structure de la base de données ressemble à ceci :</p>
+La structure de la base de données ressemble à ceci :
 
-<pre class="brush: js">{
+```js
+{
     "": {
         "candidate:": …
         "offer": …
         "answer": …
     }
-}</pre>
+}
+```
 
-<p>Les connexions sont divisées par un <code>roomId</code> et stockeront 4 éléments d'information, le candidat ICE de l'auteur de l'offre, le candidat ICE du répondeur, l'offre SDP et la réponse SDP.</p>
+Les connexions sont divisées par un `roomId` et stockeront 4 éléments d'information, le candidat ICE de l'auteur de l'offre, le candidat ICE du répondeur, l'offre SDP et la réponse SDP.
 
-<h2 id="Offre">Offre</h2>
+## Offre
 
-<p>Une offre SDP (Session Description Protocol) et le méta données qui décrit aux autres pairs le format attendu(video, formats, codecs, cryptage, résolution, taille, etc etc).</p>
+Une offre SDP (Session Description Protocol) et le méta données qui décrit aux autres pairs le format attendu(video, formats, codecs, cryptage, résolution, taille, etc etc).
 
-<p>Un échange nécessite une offre d'un pair, alors l'autre pair doit recevoir l'offre et offrir en retour une réponse.</p>
+Un échange nécessite une offre d'un pair, alors l'autre pair doit recevoir l'offre et offrir en retour une réponse.
 
-<pre class="brush: js">pc.createOffer(function (offer) {
+```js
+pc.createOffer(function (offer) {
     pc.setLocalDescription(offer);
 
     send("offer", JSON.stringify(offer));
-}, errorHandler, constraints);</pre>
+}, errorHandler, constraints);
+```
 
-<h3 id="errorHandler"><strong><code>errorHandler</code></strong></h3>
+### **`errorHandler`**
 
-<p>S'il y avait un problème lors de la génération d’une offre, cette méthode sera exécutée avec les détails de l'erreur comme premier argument.</p>
+S'il y avait un problème lors de la génération d’une offre, cette méthode sera exécutée avec les détails de l'erreur comme premier argument.
 
-<pre class="brush: js">var errorHandler = function (err) {
+```js
+var errorHandler = function (err) {
     console.error(err);
-};</pre>
+};
+```
 
-<h3 id="constraints"><strong><code>constraints</code></strong></h3>
+### **`constraints`**
 
-<p>Options pour l'offre SDP.</p>
+Options pour l'offre SDP.
 
-<pre class="brush: js">var constraints = {
+```js
+var constraints = {
     mandatory: {
         OfferToReceiveAudio: true,
         OfferToReceiveVideo: true
     }
-};</pre>
+};
+```
 
-<p><code>OfferToReceiveAudio/Video</code> Dit aux autres pair que vous désirez recevoir de la vidéo ou de l'audio de leur part. Ce n'est pas nécessaire pour DataChannels.</p>
+`OfferToReceiveAudio/Video` Dit aux autres pair que vous désirez recevoir de la vidéo ou de l'audio de leur part. Ce n'est pas nécessaire pour DataChannels.
 
-<p>Une fois que l'offre a été générée nous devons définir le SDP local à la nouvelle offre et l’envoyer par le canal de signal aux autres pairs et attendre leur réponse SDP.</p>
+Une fois que l'offre a été générée nous devons définir le SDP local à la nouvelle offre et l’envoyer par le canal de signal aux autres pairs et attendre leur réponse SDP.
 
-<h2 id="Réponse">Réponse</h2>
+## Réponse
 
-<p>Une réponse SDP est comme une offre, mais est une réponse ; un peu comme répondre au téléphone. Nous pouvons seulement émettre une réponse qu’après avoir reçu une offre.</p>
+Une réponse SDP est comme une offre, mais est une réponse ; un peu comme répondre au téléphone. Nous pouvons seulement émettre une réponse qu’après avoir reçu une offre.
 
-<pre class="brush: js">recv("offer", function (offer) {
+```js
+recv("offer", function (offer) {
     offer = new SessionDescription(JSON.parse(offer))
     pc.setRemoteDescription(offer);
 
@@ -228,132 +243,147 @@ navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia ||
 
         send("answer", JSON.stringify(answer));
     }, errorHandler, constraints);
-});</pre>
+});
+```
 
-<h2 id="DataChannel">DataChannel</h2>
+## DataChannel
 
-<p>J'expliquerai d'abord comment utiliser PeerConnection pour l'API DataChannels et le transfert de données arbitraires entre des pairs.</p>
+J'expliquerai d'abord comment utiliser PeerConnection pour l'API DataChannels et le transfert de données arbitraires entre des pairs.
 
-<p><em>Note: Au moment de l’écriture de cet article, l'interopérabilité entre Chrome et Firefox n'est pas possible avec DataChannels. Chrome prend en charge un protocole similaire mais privé et soutiendra le protocole standard bientôt.</em></p>
+_Note: Au moment de l’écriture de cet article, l'interopérabilité entre Chrome et Firefox n'est pas possible avec DataChannels. Chrome prend en charge un protocole similaire mais privé et soutiendra le protocole standard bientôt._
 
-<pre class="brush: js">var channel = pc.createDataChannel(channelName, channelOptions);</pre>
+```js
+var channel = pc.createDataChannel(channelName, channelOptions);
+```
 
-<p>L'auteur de l'offre doit être le pair qui crée le canal. Le répondeur recevra le canal dans le rappel (callback) <code>ondatachannel</code> dans le PeerConnection. Vous devez appeler <code>createDataChannel()</code> une fois avant de créer l'offre.</p>
+L'auteur de l'offre doit être le pair qui crée le canal. Le répondeur recevra le canal dans le rappel (callback) `ondatachannel` dans le PeerConnection. Vous devez appeler `createDataChannel()` une fois avant de créer l'offre.
 
-<h3 id="channelName"><strong><code>channelName</code></strong></h3>
+### **`channelName`**
 
-<p>Il s'agit d'une chaîne qui agit comme une étiquette pour le nom de votre canal. <em>AVERTISSEMENT : Assurez-vous que votre nom de canal n'a pas d'espaces ou Chrome va échouer sur <code>createAnswer()</code>.</em></p>
+Il s'agit d'une chaîne qui agit comme une étiquette pour le nom de votre canal. _AVERTISSEMENT : Assurez-vous que votre nom de canal n'a pas d'espaces ou Chrome va échouer sur `createAnswer()`._
 
-<h3 id="channelOptions"><strong><code>channelOptions</code></strong></h3>
+### **`channelOptions`**
 
-<pre class="brush: js">var channelOptions = {};</pre>
+```js
+var channelOptions = {};
+```
 
-<p>Ces options ne sont pas bien supportées sur Chrome donc vous pouvez laisser ça vide pour l'instant. Vérifiez le <a href="http://dev.w3.org/2011/webrtc/editor/webrtc.html#attributes-7">RFC</a> pour plus d'informations sur les options.</p>
+Ces options ne sont pas bien supportées sur Chrome donc vous pouvez laisser ça vide pour l'instant. Vérifiez le [RFC](http://dev.w3.org/2011/webrtc/editor/webrtc.html#attributes-7) pour plus d'informations sur les options.
 
-<h3 id="Méthodes_et_événements_de_canal">Méthodes et événements de canal</h3>
+### Méthodes et événements de canal
 
-<h4 id="onopen"><strong><code>onopen</code></strong></h4>
+#### **`onopen`**
 
-<p>Exécuté lorsque la connexion est établie.</p>
+Exécuté lorsque la connexion est établie.
 
-<h4 id="onerror"><strong><code>onerror</code></strong></h4>
+#### **`onerror`**
 
-<p>Exécuté s'il y a une erreur de création de la connexion. Le premier argument est un objet d'erreur.</p>
+Exécuté s'il y a une erreur de création de la connexion. Le premier argument est un objet d'erreur.
 
-<pre class="brush: js">channel.onerror = function (err) {
+```js
+channel.onerror = function (err) {
     console.error("Channel Error:", err);
-};</pre>
+};
+```
 
-<h4 id="onmessage"><strong><code>onmessage</code></strong></h4>
+#### **`onmessage`**
 
-<pre class="brush: js">channel.onmessage = function (e) {
+```js
+channel.onmessage = function (e) {
     console.log("Got message:", e.data);
-}</pre>
+}
+```
 
-<p>Le cœur de la connexion. Lorsque vous recevez un message, cette méthode s’exécute. Le premier argument est un objet d'événement qui contient les données, heure de réception et autres informations.</p>
+Le cœur de la connexion. Lorsque vous recevez un message, cette méthode s’exécute. Le premier argument est un objet d'événement qui contient les données, heure de réception et autres informations.
 
-<h4 id="onclose"><strong><code>onclose</code></strong></h4>
+#### **`onclose`**
 
-<p>Exécuté si l'autre pair ferme la connexion.</p>
+Exécuté si l'autre pair ferme la connexion.
 
-<h3 id="Lier_les_événements"><strong>Lier les événements</strong></h3>
+### **Lier les événements**
 
-<p>Si vous êtes le créateur du canal(l'auteur de l'offre), vous pouvez lier des événements directement à la DataChannel que vous avez créé avec <code>createChannel</code>. Si vous êtes l'auteur de la réponse, vous devez utiliser le callback <code>ondatachannel</code> dans le PeerConnection afin d'accéder au même canal.</p>
+Si vous êtes le créateur du canal(l'auteur de l'offre), vous pouvez lier des événements directement à la DataChannel que vous avez créé avec `createChannel`. Si vous êtes l'auteur de la réponse, vous devez utiliser le callback `ondatachannel` dans le PeerConnection afin d'accéder au même canal.
 
-<pre class="brush: js">pc.ondatachannel = function (e) {
+```js
+pc.ondatachannel = function (e) {
     e.channel.onmessage = function () { … };
-};</pre>
+};
+```
 
-<p>Le canal est disponible dans l’objet événement passé dans le descripteur en tant que <code>e.channel</code>.</p>
+Le canal est disponible dans l’objet événement passé dans le descripteur en tant que `e.channel`.
 
-<h4 id="send"><strong><code>send()</code></strong></h4>
+#### **`send()`**
 
-<pre class="brush: js">channel.send("Hi Peer!");</pre>
+```js
+channel.send("Hi Peer!");
+```
 
-<p>Cette méthode vous permet d'envoyer des données directement au pair! Incroyable. Vous devez envoyer un String, Blob, ArrayBuffer ou ArrayBufferView, alors assurez-vous de "stringifier" les objets.</p>
+Cette méthode vous permet d'envoyer des données directement au pair! Incroyable. Vous devez envoyer un String, Blob, ArrayBuffer ou ArrayBufferView, alors assurez-vous de "stringifier" les objets.
 
-<h4 id="close"><strong><code>close()</code></strong></h4>
+#### **`close()`**
 
-<p>Ferme le canal une fois que la connexion doit se terminer. Il est recommandé de le faire sur l’ unload de la page.</p>
+Ferme le canal une fois que la connexion doit se terminer. Il est recommandé de le faire sur l’ unload de la page.
 
-<h2 id="Media">Media</h2>
+## Media
 
-<p>Maintenant nous allons couvrir la transmission de médias tels que l'audio ou la vidéo. Pour afficher la vidéo et l'audio, vous devez inclure un tag <code>&lt;video&gt;</code> dans le document avec l'attribut <code>autoplay</code>.</p>
+Maintenant nous allons couvrir la transmission de médias tels que l'audio ou la vidéo. Pour afficher la vidéo et l'audio, vous devez inclure un tag `<video>` dans le document avec l'attribut `autoplay`.
 
-<h3 id="Obtenir_les_médias_de_lutilisateur">Obtenir les médias de l'utilisateur</h3>
+### Obtenir les médias de l'utilisateur
 
-<pre class="brush: js">&lt;video id="preview" autoplay&gt;&lt;/video&gt;
+```js
+<video id="preview" autoplay></video>
 
 var video = document.getElementById("preview");
 navigator.getUserMedia(mediaOptions, function (stream) {
     video.src = URL.createObjectURL(stream);
-}, errorHandler);</pre>
+}, errorHandler);
+```
 
-<p><strong><code>mediaOptions</code></strong></p>
+**`mediaOptions`**
 
-<p>Les contraintes sur les types de médias que vous souhaitez renvoyer de l'utilisateur.</p>
+Les contraintes sur les types de médias que vous souhaitez renvoyer de l'utilisateur.
 
-<pre class="brush: js">var mediaOptions = {
+```js
+var mediaOptions = {
     video: true,
     audio: true
-};</pre>
+};
+```
 
-<p>Si vous voulez juste une conversation audio, supprimez la clé <code>video</code>.</p>
+Si vous voulez juste une conversation audio, supprimez la clé `video`.
 
-<h4 id="errorHandler_2"><strong><code>errorHandler</code></strong></h4>
+#### **`errorHandler`**
 
-<p>Exécuté s'il y a une erreur retournée par le support demandé.</p>
+Exécuté s'il y a une erreur retournée par le support demandé.
 
-<h3 id="Événements_Médias_et_Méthodes">Événements Médias et Méthodes</h3>
+### Événements Médias et Méthodes
 
-<h4 id="addStream"><strong><code>addStream</code></strong></h4>
+#### **`addStream`**
 
-<p>Ajoute le flux de <code>getUserMedia</code> au PeerConnection.</p>
+Ajoute le flux de `getUserMedia` au PeerConnection.
 
-<pre class="brush: js">pc.addStream(stream);</pre>
+```js
+pc.addStream(stream);
+```
 
-<h4 id="onaddstream"><strong><code>onaddstream</code></strong></h4>
+#### **`onaddstream`**
 
-<pre class="brush: js">&lt;video id="otherPeer" autoplay&gt;&lt;/video&gt;
+```js
+<video id="otherPeer" autoplay></video>
 
 var otherPeer = document.getElementById("otherPeer");
 pc.onaddstream = function (e) {
     otherPeer.src = URL.createObjectURL(e.stream);
-};</pre>
+};
+```
 
-<p>Exécuté lorsque la connexion a été mise en place et que l'autre pair a ajouté le flux de données pour la connexion avec <code>addStream</code>. Vous avez besoin d'un autre tag <code>&lt;video&gt;</code> pour afficher les médias de l'autre pair.</p>
+Exécuté lorsque la connexion a été mise en place et que l'autre pair a ajouté le flux de données pour la connexion avec `addStream`. Vous avez besoin d'un autre tag `<video>` pour afficher les médias de l'autre pair.
 
-<p>Le premier argument est un objet d'événement avec les flux de média de l'autre pair.</p>
+Le premier argument est un objet d'événement avec les flux de média de l'autre pair.
 
-<h2 id="Afficher_la_Source">Afficher la Source</h2>
+## Afficher la Source
 
-<p>Vous pouvez voir la source développée à partir de tous les extraits de code de cet article à <a href="http://github.com/louisstow/WebRTC">mon repo WebRTC</a>.</p>
+Vous pouvez voir la source développée à partir de tous les extraits de code de cet article à [mon repo WebRTC](http://github.com/louisstow/WebRTC).
 
-<ul>
- <li>
-  <p><strong>Exemple de DataChannels :</strong> <a href="https://github.com/louisstow/WebRTC/blob/master/datachannels.html">code</a>, <a href="http://louisstow.github.io/WebRTC/datachannels.html">demo</a></p>
- </li>
- <li>
-  <p><strong>Exemple de média :</strong> <a href="https://github.com/louisstow/WebRTC/blob/master/media.html">code</a>, <a href="http://louisstow.github.io/WebRTC/media.html">demo</a></p>
- </li>
-</ul>
+- **Exemple de DataChannels :** [code](https://github.com/louisstow/WebRTC/blob/master/datachannels.html), [demo](http://louisstow.github.io/WebRTC/datachannels.html)
+- **Exemple de média :** [code](https://github.com/louisstow/WebRTC/blob/master/media.html), [demo](http://louisstow.github.io/WebRTC/media.html)
diff --git a/files/fr/web/api/webrtc_api/taking_still_photos/index.md b/files/fr/web/api/webrtc_api/taking_still_photos/index.md
index 26e4bde58c..95aca76612 100644
--- a/files/fr/web/api/webrtc_api/taking_still_photos/index.md
+++ b/files/fr/web/api/webrtc_api/taking_still_photos/index.md
@@ -9,18 +9,27 @@ tags:
 translation_of: Web/API/WebRTC_API/Taking_still_photos
 original_slug: WebRTC/Prendre_des_photos_avec_la_webcam
 ---
-<h2 id="Introduction_et_demo">Introduction et demo</h2>
-<p>Ceci est un tutoriel rapide pour apprendre comment accéder à la caméra sur votre ordinateur et prendre des photos avec. Vous pouvez voir <a href="http://jsfiddle.net/codepo8/agaRe/4/">le code final en action dans JSFiddle</a>. Il y a aussi une version plus avancée pour charger des photos sur <strong>imgur</strong> en JavaScript, disponible en <a href="https://github.com/codepo8/interaction-cam/">code source sur GitHub</a> ou <a href="http://codepo8.github.com/interaction-cam/">en demo</a>.</p>
-<h2 id="Les_balises_HTML">Les balises HTML</h2>
-<p>La première chose dont vous avez besoin pour accéder à la webcam en utilisant WebRTC est un élément {{HTMLElement("video")}} et un élément {{HTMLElement("canvas")}} dans la page. L'élément video reçoit un flux de WebRTC et l'élément canvas est nécessaire pour capture l'image de la vidéo. Nous ajoutons aussi une image qui sera par la suite remplacée par la capture de la webcam.</p>
-<pre class="brush:html;">&lt;video id="video"&gt;&lt;/video&gt;
-&lt;button id="startbutton"&gt;Prendre une photo&lt;/button&gt;
-&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
-&lt;img src="http://placekitten.com/g/320/261" id="photo" alt="photo"&gt;
-</pre>
-<h2 id="Le_script_complet">Le script complet</h2>
-<p>Voice le JavaScript complet en un seul morceau. Nous allons expliquer chaque section en détail ci-après.</p>
-<pre class="brush:js;">(function() {
+## Introduction et demo
+
+Ceci est un tutoriel rapide pour apprendre comment accéder à la caméra sur votre ordinateur et prendre des photos avec. Vous pouvez voir [le code final en action dans JSFiddle](http://jsfiddle.net/codepo8/agaRe/4/). Il y a aussi une version plus avancée pour charger des photos sur **imgur** en JavaScript, disponible en [code source sur GitHub](https://github.com/codepo8/interaction-cam/) ou [en demo](http://codepo8.github.com/interaction-cam/).
+
+## Les balises HTML
+
+La première chose dont vous avez besoin pour accéder à la webcam en utilisant WebRTC est un élément {{HTMLElement("video")}} et un élément {{HTMLElement("canvas")}} dans la page. L'élément video reçoit un flux de WebRTC et l'élément canvas est nécessaire pour capture l'image de la vidéo. Nous ajoutons aussi une image qui sera par la suite remplacée par la capture de la webcam.
+
+```html
+<video id="video"></video>
+<button id="startbutton">Prendre une photo</button>
+<canvas id="canvas"></canvas>
+<img src="http://placekitten.com/g/320/261" id="photo" alt="photo">
+```
+
+## Le script complet
+
+Voice le JavaScript complet en un seul morceau. Nous allons expliquer chaque section en détail ci-après.
+
+```js
+(function() {
 
   var streaming = false,
       video        = document.querySelector('#video'),
@@ -79,11 +88,17 @@ original_slug: WebRTC/Prendre_des_photos_avec_la_webcam
     ev.preventDefault();
   }, false);
 
-})();</pre>
-<h2 id="Les_explications_pas_à_pas.">Les explications pas à pas.</h2>
-<p>Voici ce qui se passe.</p>
-<h3 id="Fonction_anonyme">Fonction anonyme</h3>
-<pre class="brush:js;">(function() {
+})();
+```
+
+## Les explications pas à pas.
+
+Voici ce qui se passe.
+
+### Fonction anonyme
+
+```js
+(function() {
 
   var streaming = false,
       video        = document.querySelector('#video'),
@@ -92,19 +107,28 @@ original_slug: WebRTC/Prendre_des_photos_avec_la_webcam
       photo        = document.querySelector('#photo'),
       startbutton  = document.querySelector('#startbutton'),
       width = 320,
-      height = 0;</pre>
-<p>Afin d'éviter les variables globales, on encapsule le script dans une fonction anonyme. Nous capturons les éléments du HTML dont nous avons besoin et nous définissons une largeur de vidéo à 320 et une hauteur à 0. La hauteur appropriée sera calculée plus tard.</p>
-<div class="warning">
- <p><strong>Attention :</strong> À l'heure actuelle, il y a une différence dans les tailles de vidéo offertes par getUserMedia. Firefox Nightly utilise une résolution de 352x288 alors que Opera et Chrome utilisent une résolution de 640x400. Celà changera dans le futur, mais redimensionner avec le rapport comme nous le faisons nous épargnera des mauvaises surprises.</p>
-</div>
-<h3 id="Obtenir_la_vidéo">Obtenir la vidéo</h3>
-<p>Maintenant, nous devons récupérer la vidéo de la webcam. Pour l'instant c'est préfixé par les différents navigateurs, nous devons donc tester quelle forme est supportée:</p>
-<pre class="brush:js;">  navigator.getMedia = ( navigator.getUserMedia ||
+      height = 0;
+```
+
+Afin d'éviter les variables globales, on encapsule le script dans une fonction anonyme. Nous capturons les éléments du HTML dont nous avons besoin et nous définissons une largeur de vidéo à 320 et une hauteur à 0. La hauteur appropriée sera calculée plus tard.
+
+> **Attention :** À l'heure actuelle, il y a une différence dans les tailles de vidéo offertes par getUserMedia. Firefox Nightly utilise une résolution de 352x288 alors que Opera et Chrome utilisent une résolution de 640x400. Celà changera dans le futur, mais redimensionner avec le rapport comme nous le faisons nous épargnera des mauvaises surprises.
+
+### Obtenir la vidéo
+
+Maintenant, nous devons récupérer la vidéo de la webcam. Pour l'instant c'est préfixé par les différents navigateurs, nous devons donc tester quelle forme est supportée:
+
+```js
+  navigator.getMedia = ( navigator.getUserMedia ||
                          navigator.webkitGetUserMedia ||
                          navigator.mozGetUserMedia ||
-                         navigator.msGetUserMedia);</pre>
-<p>Nous demandons au navigateur de nous donner la vidéo sans le son et de récupérer le flux dans une fonction callback:</p>
-<pre class="brush:js;">  navigator.getMedia(
+                         navigator.msGetUserMedia);
+```
+
+Nous demandons au navigateur de nous donner la vidéo sans le son et de récupérer le flux dans une fonction callback:
+
+```js
+  navigator.getMedia(
     {
       video: true,
       audio: false
@@ -121,11 +145,17 @@ original_slug: WebRTC/Prendre_des_photos_avec_la_webcam
     function(err) {
       console.log("An error occured! " + err);
     }
-  );</pre>
-<p>Firefox Nightly nécessite de définir la propriété <code>mozSrcObject</code> de l'élément vidéo pour pouvoir le jouer; pour les autres navigateurs, définissez l'attribut <code>src</code>. Alors que Firefox peut utiliser les flux directement, Webkit et Opera ont besoin de créer un objet URL. Cela sera standardisé dans un futur proche.</p>
-<h3 id="Redimensionner_la_vidéo">Redimensionner la vidéo</h3>
-<p>Ensuite nous devons redimensionner la vidéo aux bonnes dimensions.</p>
-<pre class="brush:js;">  video.addEventListener('canplay', function(ev){
+  );
+```
+
+Firefox Nightly nécessite de définir la propriété `mozSrcObject` de l'élément vidéo pour pouvoir le jouer; pour les autres navigateurs, définissez l'attribut `src`. Alors que Firefox peut utiliser les flux directement, Webkit et Opera ont besoin de créer un objet URL. Cela sera standardisé dans un futur proche.
+
+### Redimensionner la vidéo
+
+Ensuite nous devons redimensionner la vidéo aux bonnes dimensions.
+
+```js
+  video.addEventListener('canplay', function(ev){
     if (!streaming) {
       height = video.videoHeight / (video.videoWidth/width);
       video.setAttribute('width', width);
@@ -134,17 +164,28 @@ original_slug: WebRTC/Prendre_des_photos_avec_la_webcam
       canvas.setAttribute('height', height);
       streaming = true;
     }
-  }, false);</pre>
-<p>Nous nous abonnons à l'évènement <code>canplay</code> de la vidéo et lisons ses dimensions en utilisant <code>videoHeight</code> et <code>videoWidth</code>. Elles ne sont pas disponibles de manière fiable avant que l'évènement ne soit déclenché. Nous positionnons <code>streaming</code> à true pour faire cette vérification une seule fois vu que l'évènement <code>canplay</code> se déclenchera à répétition.</p>
-<p>C'est tout ce qu'il faut pour jouer la vidéo.</p>
-<h3 id="Prendre_une_photo">Prendre une photo</h3>
-<p>Maintenant nous devons capturer la photo en utilisant le canvas. Nous assignons un gestionaire d'événements au bouton de démarrage pour appeler la fonction <code>takepicture</code> function.</p>
-<pre class="brush:js;">  startbutton.addEventListener('click', function(ev){
+  }, false);
+```
+
+Nous nous abonnons à l'évènement `canplay` de la vidéo et lisons ses dimensions en utilisant `videoHeight` et `videoWidth`. Elles ne sont pas disponibles de manière fiable avant que l'évènement ne soit déclenché. Nous positionnons `streaming` à true pour faire cette vérification une seule fois vu que l'évènement `canplay` se déclenchera à répétition.
+
+C'est tout ce qu'il faut pour jouer la vidéo.
+
+### Prendre une photo
+
+Maintenant nous devons capturer la photo en utilisant le canvas. Nous assignons un gestionaire d'événements au bouton de démarrage pour appeler la fonction `takepicture` function.
+
+```js
+  startbutton.addEventListener('click', function(ev){
       takepicture();
     ev.preventDefault();
-  }, false);</pre>
-<p>Dans cette fonction nous re-assignons la taille du canvas à la taille de la vidéo, ce qui l'efface,  et nous obtenons une image de la vidéo que nous copions sur le canvas. Ensuite nous devons transformer les données du canvas en une URI de données avec un entête PNG, et positionner l'attribut src de la photo à cette URL.</p>
-<pre class="brush:js;">  function takepicture() {
+  }, false);
+```
+
+Dans cette fonction nous re-assignons la taille du canvas à la taille de la vidéo, ce qui l'efface,  et nous obtenons une image de la vidéo que nous copions sur le canvas. Ensuite nous devons transformer les données du canvas en une URI de données avec un entête PNG, et positionner l'attribut src de la photo à cette URL.
+
+```js
+  function takepicture() {
     canvas.width = width;
     canvas.height = height;
     canvas.getContext('2d').drawImage(video, 0, 0, width, height);
@@ -152,11 +193,14 @@ original_slug: WebRTC/Prendre_des_photos_avec_la_webcam
     photo.setAttribute('src', data);
   }
 
-})();</pre>
-<p>C'est tout ce qu'il faut pour afficher un flux de la webcam et en prendre une photo, que ce soit sur Chrome, Opera ou Firefox.</p>
-<h2 id="Support">Support</h2>
-<p>Actuellement, l'accès à la caméra via WebRTC est supporté dans Chrome, Opera et Firefox Nightly 18. Activer WebRTC dans Firefox Nightly demande que vous positionnez une valeur dans la configuration:</p>
-<ul>
- <li>Entrez "about:config" dans la barre d'adresse et confirmez les changements</li>
- <li>Trouver l'entrée "media.navigator.enabled" et positionnez la à true</li>
-</ul>
+})();
+```
+
+C'est tout ce qu'il faut pour afficher un flux de la webcam et en prendre une photo, que ce soit sur Chrome, Opera ou Firefox.
+
+## Support
+
+Actuellement, l'accès à la caméra via WebRTC est supporté dans Chrome, Opera et Firefox Nightly 18. Activer WebRTC dans Firefox Nightly demande que vous positionnez une valeur dans la configuration:
+
+- Entrez "about:config" dans la barre d'adresse et confirmez les changements
+- Trouver l'entrée "media.navigator.enabled" et positionnez la à true
diff --git a/files/fr/web/api/websocket/binarytype/index.md b/files/fr/web/api/websocket/binarytype/index.md
index f9dc94bbb4..9cb18c285b 100644
--- a/files/fr/web/api/websocket/binarytype/index.md
+++ b/files/fr/web/api/websocket/binarytype/index.md
@@ -3,31 +3,28 @@ title: WebSocket.binaryType
 slug: Web/API/WebSocket/binaryType
 browser-compat: api.WebSocket.binaryType
 ---
-<p>{{APIRef("Web Sockets API")}}</p>
+{{APIRef("Web Sockets API")}}
 
-<p>La propriété <strong><code>WebSocket.binaryType</code></strong> contrôle le type de données binaires reçues via la connexion WebSocket.</p>
+La propriété **`WebSocket.binaryType`** contrôle le type de données binaires reçues via la connexion WebSocket.
 
-<h2 id="syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">
+```js
 var binaryType = aWebSocket.binaryType;
-</pre>
+```
 
-<h2 id="value">Valeur</h2>
+## Valeur
 
-<p>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a> ayant l'une de ces deux valeurs :</p>
+Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) ayant l'une de ces deux valeurs :
 
-<dl>
-  <dt><code>"blob"</code></dt>
-  <dd>Utilise des objets <a href="/fr/docs/Web/API/Blob"><code>Blob</code></a> pour les données binaires. Il s'agit de la valeur par défaut.</dd>
-  <dt><code>"arraybuffer"</code></dt>
-  <dd>Utilise des objets <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer"><code>ArrayBuffer</code></a> pour les données binaires.
-  </dd>
-</dl>
+- `"blob"`
+  - : Utilise des objets [`Blob`](/fr/docs/Web/API/Blob) pour les données binaires. Il s'agit de la valeur par défaut.
+- `"arraybuffer"`
+  - : Utilise des objets [`ArrayBuffer`](/fr/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) pour les données binaires.
 
-<h2 id="examples">Exemples</h2>
+## Exemples
 
-<pre class="brush: js">
+```js
 // On crée une connexion WebSocket connection.
 const socket = new WebSocket("ws://localhost:8080");
 // On change le type de données binaires de "blob" à "arraybuffer"
@@ -43,12 +40,13 @@ socket.addEventListener("message", function (event) {
     // Frame textuelle
     console.log(event.data);
   }
-});</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}}
diff --git a/files/fr/web/api/websocket/bufferedamount/index.md b/files/fr/web/api/websocket/bufferedamount/index.md
index c4492c5c61..5edce55168 100644
--- a/files/fr/web/api/websocket/bufferedamount/index.md
+++ b/files/fr/web/api/websocket/bufferedamount/index.md
@@ -3,24 +3,24 @@ title: WebSocket.bufferedAmount
 slug: Web/API/WebSocket/bufferedAmount
 browser-compat: api.WebSocket.bufferedAmount
 ---
-<p>{{APIRef("Web Sockets API")}}</p>
+{{APIRef("Web Sockets API")}}
 
-<p>La propriété en lecture seule <strong><code>WebSocket.bufferedAmount</code></strong> renvoie le nombre d'octets de données qui ont été placées dans la queue via des appels à <a href="/fr/docs/Web/API/WebSocket/send"><code>send()</code></a> mais qui n'ont pas encore été transmises sur le réseau. Cette valeur est réinitialisée à zéro lorsque toutes les données ont été envoyées. Cette valeur n'est pas remise à zéro lorsque la connexion est fermée. Des appels successifs à <a href="/fr/docs/Web/API/WebSocket/send"><code>send()</code></a> feront croître cette valeur.</p>
+La propriété en lecture seule **`WebSocket.bufferedAmount`** renvoie le nombre d'octets de données qui ont été placées dans la queue via des appels à [`send()`](/fr/docs/Web/API/WebSocket/send) mais qui n'ont pas encore été transmises sur le réseau. Cette valeur est réinitialisée à zéro lorsque toutes les données ont été envoyées. Cette valeur n'est pas remise à zéro lorsque la connexion est fermée. Des appels successifs à [`send()`](/fr/docs/Web/API/WebSocket/send) feront croître cette valeur.
 
-<h2 id="syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">
+```js
 var bufferedAmount = aWebSocket.bufferedAmount;
-</pre>
+```
 
-<h2 id="value">Valeur</h2>
+## Valeur
 
-<p>Un nombre au format <code>unsigned long</code>.</p>
+Un nombre au format `unsigned long`.
 
-<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/api/websocket/close/index.md b/files/fr/web/api/websocket/close/index.md
index 09621ca71b..2d916ec9a4 100644
--- a/files/fr/web/api/websocket/close/index.md
+++ b/files/fr/web/api/websocket/close/index.md
@@ -3,43 +3,53 @@ title: WebSocket.close()
 slug: Web/API/WebSocket/close
 browser-compat: api.WebSocket.close
 ---
-<p>{{APIRef("Web Sockets API")}}</p>
+{{APIRef("Web Sockets API")}}
 
-<p>La méthode <strong><code>WebSocket.close()</code></strong> ferme la connexion <a href="/fr/docs/Web/API/WebSocket"><code>WebSocket</code></a> ou interrompt l'éventuelle tentative de connexion. Si la connexion est déjà fermée (état <code>CLOSED</code>), cette méthode ne fait rien.</p>
+La méthode **`WebSocket.close()`** ferme la connexion [`WebSocket`](/fr/docs/Web/API/WebSocket) ou interrompt l'éventuelle tentative de connexion. Si la connexion est déjà fermée (état `CLOSED`), cette méthode ne fait rien.
 
-<h2 id="syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">WebSocket.close();</pre>
-<pre class="brush: js">WebSocket.close(code);</pre>
-<pre class="brush: js">WebSocket.close(reason);</pre>
-<pre class="brush: js">WebSocket.close(code, reason);</pre>
+```js
+WebSocket.close();
+```
 
-<h3 id="parameters">Paramètres</h3>
+```js
+WebSocket.close(code);
+```
 
-<dl>
-  <dt><code>code</code> {{optional_inline}}</dt>
-  <dd>Une valeur numérique indiquant le code de statut qui explique pourquoi la connexion est fermée. Si ce paramètre n'est pas fourni, 1005 sera la valeur par défaut. Voir <a href="/fr/docs/Web/API/CloseEvent#status_codes">la liste des codes de statut</a> de <a href="/fr/docs/Web/API/CloseEvent"><code>CloseEvent</code></a> pour les valeurs autorisées.</dd>
-  <dt><code>reason</code> {{optional_inline}}</dt>
-  <dd>Une chaîne de caractères, lisible et compréhensible par un humain qui explique pourquoi la connexion est fermée. Cette chaîne ne doit pas être plus longue que 123 octets de texte UTF-8 (attention, <strong>cela ne signifie pas</strong> 123 caractères).</dd>
-</dl>
+```js
+WebSocket.close(reason);
+```
 
-<h3 id="exceptions_thrown">Exceptions levées</h3>
+```js
+WebSocket.close(code, reason);
+```
 
-<dl>
-  <dt><code>INVALID_ACCESS_ERR</code></dt>
-  <dd>Un code invalide a été fourni avec <code>code</code>.</dd>
-  <dt><code>SYNTAX_ERR</code></dt>
-  <dd>La chaîne de caractères pour <code>reason</code> est trop longue ou contient des <i lang="en">surrogates</i> non appairés.</dd>
-</dl>
+### Paramètres
 
-<div class="note">
-  <p><strong>Note :</strong> Avant Gecko 8.0, cette méthode ne prenait en charge aucun paramètre.</p>
-</div>
+- `code` {{optional_inline}}
+  - : Une valeur numérique indiquant le code de statut qui explique pourquoi la connexion est fermée. Si ce paramètre n'est pas fourni, 1005 sera la valeur par défaut. Voir [la liste des codes de statut](/fr/docs/Web/API/CloseEvent#status_codes) de [`CloseEvent`](/fr/docs/Web/API/CloseEvent) pour les valeurs autorisées.
+- `reason` {{optional_inline}}
+  - : Une chaîne de caractères, lisible et compréhensible par un humain qui explique pourquoi la connexion est fermée. Cette chaîne ne doit pas être plus longue que 123 octets de texte UTF-8 (attention, **cela ne signifie pas** 123 caractères).
 
-<h2 id="specifications">Spécifications</h2>
+### Exceptions levées
 
-<p>{{Specifications}}</p>
+- `INVALID_ACCESS_ERR`
+  - : Un code invalide a été fourni avec `code`.
+- `SYNTAX_ERR`
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+  - : La chaîne de caractères pour `reason` est trop longue ou contient des
 
-<p>{{Compat}}</p>
+    <i lang="en">surrogates</i>
+
+    non appairés.
+
+> **Note :** Avant Gecko 8.0, cette méthode ne prenait en charge aucun paramètre.
+
+## Spécifications
+
+{{Specifications}}
+
+## Compatibilité des navigateurs
+
+{{Compat}}
diff --git a/files/fr/web/api/websocket/close_event/index.md b/files/fr/web/api/websocket/close_event/index.md
index e09d0bb1db..694f9f6835 100644
--- a/files/fr/web/api/websocket/close_event/index.md
+++ b/files/fr/web/api/websocket/close_event/index.md
@@ -1,61 +1,67 @@
 ---
 title: 'WebSocket : évènement close'
 slug: Web/API/WebSocket/close_event
-browser-compat: api.WebSocket.close_event
 translation_of: Web/API/WebSocket/close_event
+browser-compat: api.WebSocket.close_event
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}
 
-<p>L'évènement <code>close</code> est déclenché lorsqu'une connexion avec une <code>WebSocket</code> est fermée.</p>
+L'évènement `close` est déclenché lorsqu'une connexion avec une `WebSocket` est fermée.
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row">Bouillonne/Remonte</th>
-   <td>Non</td>
-  </tr>
-  <tr>
-   <th scope="row">Annulable</th>
-   <td>Non</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface</th>
-   <td><a href="/fr/docs/Web/API/CloseEvent"><code>CloseEvent</code></a></td>
-  </tr>
-  <tr>
-   <th scope="row">Propriété de gestionnaire d'évènement correspondante</th>
-   <td><a href="/fr/docs/Web/API/WebSocket/onclose"><code>onclose</code></a></td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Bouillonne/Remonte</th>
+      <td>Non</td>
+    </tr>
+    <tr>
+      <th scope="row">Annulable</th>
+      <td>Non</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface</th>
+      <td>
+        <a href="/fr/docs/Web/API/CloseEvent"><code>CloseEvent</code></a>
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Propriété de gestionnaire d'évènement correspondante</th>
+      <td>
+        <a href="/fr/docs/Web/API/WebSocket/onclose"><code>onclose</code></a>
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="examples">Exemples</h2>
+## Exemples
 
-<p>On peut vouloir savoir lorsque la connexion a été fermée afin de mettre à jour l'interface utilisateur ou, éventuellement, pour sauvegarder des données à propos de la connexion. Soit une variable <code>socketExemple</code> qui fait référence à une connexion WebSocket ouverte, le fragment de code suivant gère la situation où la socket a été fermée :</p>
+On peut vouloir savoir lorsque la connexion a été fermée afin de mettre à jour l'interface utilisateur ou, éventuellement, pour sauvegarder des données à propos de la connexion. Soit une variable `socketExemple` qui fait référence à une connexion WebSocket ouverte, le fragment de code suivant gère la situation où la socket a été fermée :
 
-<pre class="brush: js">socketExemple.addEventListener('close', (event) =&gt; {
+```js
+socketExemple.addEventListener('close', (event) => {
   console.log('La connexion a été fermée avec succès.');
-});</pre>
+});
+```
 
-<p>On peut effectuer les mêmes actions avec la propriété de gestion d'évènement correspondante :</p>
+On peut effectuer les mêmes actions avec la propriété de gestion d'évènement correspondante :
 
-<pre class="brush: js">socketExemple.onclose = function (event) {
+```js
+socketExemple.onclose = function (event) {
   console.log('La connexion a été fermée avec succès.');
-};</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="Voir aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/API/WebSocket/error_event">WebSocket : évènement <code>error</code></a></li>
- <li><a href="/fr/docs/Web/API/WebSocket/message_event">WebSocket : évènement <code>message</code></a></li>
- <li><a href="/fr/docs/Web/API/WebSocket/open_event">WebSocket : évènement <code>open</code></a></li>
- <li><a href="/fr/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications">Écrire des applications clientes WebSocket</a></li>
-</ul>
+- [WebSocket : évènement `error`](/fr/docs/Web/API/WebSocket/error_event)
+- [WebSocket : évènement `message`](/fr/docs/Web/API/WebSocket/message_event)
+- [WebSocket : évènement `open`](/fr/docs/Web/API/WebSocket/open_event)
+- [Écrire des applications clientes WebSocket](/fr/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications)
diff --git a/files/fr/web/api/websocket/error_event/index.md b/files/fr/web/api/websocket/error_event/index.md
index 91bb314dde..15f3cc9711 100644
--- a/files/fr/web/api/websocket/error_event/index.md
+++ b/files/fr/web/api/websocket/error_event/index.md
@@ -3,55 +3,58 @@ title: 'WebSocket : évènement error'
 slug: Web/API/WebSocket/error_event
 browser-compat: api.WebSocket.error_event
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}
 
-<p>L'évènement <code>error</code> est déclenché lorsqu'une connexion avec une <code>WebSocket</code> a été fermée à cause d'une erreur (par exemple lorsque des données n'ont pu être envoyées).</p>
+L'évènement `error` est déclenché lorsqu'une connexion avec une `WebSocket` a été fermée à cause d'une erreur (par exemple lorsque des données n'ont pu être envoyées).
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row">Bouillonne/Remonte</th>
-   <td>Non</td>
-  </tr>
-  <tr>
-   <th scope="row">Annulable</th>
-   <td>Non</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface</th>
-   <td><a href="/fr/docs/Web/API/Event"><code>Event</code></a></td>
-  </tr>
-  <tr>
-   <th scope="row">Propriété de gestionnaire d'évènement correspondante</th>
-   <td><a href="/fr/docs/Web/API/WebSocket/onerror"><code>onerror</code></a></td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Bouillonne/Remonte</th>
+      <td>Non</td>
+    </tr>
+    <tr>
+      <th scope="row">Annulable</th>
+      <td>Non</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface</th>
+      <td>
+        <a href="/fr/docs/Web/API/Event"><code>Event</code></a>
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Propriété de gestionnaire d'évènement correspondante</th>
+      <td>
+        <a href="/fr/docs/Web/API/WebSocket/onerror"><code>onerror</code></a>
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="examples">Exemples</h2>
+## Exemples
 
-<pre class="brush: js">
+```js
 // On crée une connexion WebSocket
 const socket = new WebSocket('ws://localhost:8080');
 
 // On écoute les éventuelles erreurs
 socket.addEventListener('error', function (event) {
   console.log('Erreur WebSocket : ', event);
-});</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="/fr/docs/Web/API/WebSocket/close_event">WebSocket : évènement <code>close</code></a></li>
- <li><a href="/fr/docs/Web/API/WebSocket/message_event">WebSocket : évènement <code>message</code></a></li>
- <li><a href="/fr/docs/Web/API/WebSocket/open_event">WebSocket : évènement <code>open</code></a></li>
- <li><a href="/fr/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications">Écrire des applications clientes WebSocket</a></li>
-</ul>
+- [WebSocket : évènement `close`](/fr/docs/Web/API/WebSocket/close_event)
+- [WebSocket : évènement `message`](/fr/docs/Web/API/WebSocket/message_event)
+- [WebSocket : évènement `open`](/fr/docs/Web/API/WebSocket/open_event)
+- [Écrire des applications clientes WebSocket](/fr/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications)
diff --git a/files/fr/web/api/websocket/extensions/index.md b/files/fr/web/api/websocket/extensions/index.md
index 5846b29953..ba88e1fad0 100644
--- a/files/fr/web/api/websocket/extensions/index.md
+++ b/files/fr/web/api/websocket/extensions/index.md
@@ -3,24 +3,24 @@ title: WebSocket.extensions
 slug: Web/API/WebSocket/extensions
 browser-compat: api.WebSocket.extensions
 ---
-<p>{{APIRef("Web Sockets API")}}</p>
+{{APIRef("Web Sockets API")}}
 
-<p>La propriété en lecture seule <strong><code>WebSocket.extensions</code></strong> renvoie les extensions sélectionnées par le serveur. Actuellement, cette propriété vaut une chaîne de caractères vide ou la liste des extensions négociées par la connexion.</p>
+La propriété en lecture seule **`WebSocket.extensions`** renvoie les extensions sélectionnées par le serveur. Actuellement, cette propriété vaut une chaîne de caractères vide ou la liste des extensions négociées par la connexion.
 
-<h2 id="syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">
+```js
 var extensions = aWebSocket.extensions;
-</pre>
+```
 
-<h2 id="value">Valeur</h2>
+## Valeur
 
-<p>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a>.</p>
+Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString).
 
-<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/api/websocket/index.md b/files/fr/web/api/websocket/index.md
index 2ae740ebe7..83069c9f6d 100644
--- a/files/fr/web/api/websocket/index.md
+++ b/files/fr/web/api/websocket/index.md
@@ -1,102 +1,94 @@
 ---
 title: WebSocket
 slug: Web/API/WebSocket
-browser-compat: api.WebSocket
 translation_of: Web/API/WebSocket
+browser-compat: api.WebSocket
 ---
-<div>{{APIRef("Web Sockets API")}}</div>
+{{APIRef("Web Sockets API")}}
 
-<p>L'objet <code>WebSocket</code> fournit l'API qui permet de créer et de gérer une connexion <a href="/fr/docs/Web/API/WebSockets_API">WebSocket</a> à un serveur ainsi que d'envoyer et de recevoir des données sur cette connexion.</p>
+L'objet `WebSocket` fournit l'API qui permet de créer et de gérer une connexion [WebSocket](/fr/docs/Web/API/WebSockets_API) à un serveur ainsi que d'envoyer et de recevoir des données sur cette connexion.
 
-<p>Pour construire un objet <code>WebSocket</code>, on utilisera le constructeur <code><a href="/fr/docs/Web/API/WebSocket/WebSocket">WebSocket()</a></code>.</p>
+Pour construire un objet `WebSocket`, on utilisera le constructeur [`WebSocket()`](/fr/docs/Web/API/WebSocket/WebSocket).
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="constructor">Constructeur</h2>
+## Constructeur
 
-<dl>
- <dt><a href="/fr/docs/Web/API/WebSocket/WebSocket"><code>WebSocket(url[, protocols])</code></a></dt>
- <dd>Renvoie un nouvel objet <code>WebSocket</code>.</dd>
-</dl>
+- [`WebSocket(url[, protocols])`](/fr/docs/Web/API/WebSocket/WebSocket)
+  - : Renvoie un nouvel objet `WebSocket`.
 
-<h2 id="constants">Constantes</h2>
+## Constantes
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <td class="header">Constante</td>
-   <td class="header">Valeur</td>
-  </tr>
-  <tr>
-   <td><code>WebSocket.CONNECTING</code></td>
-   <td><code>0</code></td>
-  </tr>
-  <tr>
-   <td><code>WebSocket.OPEN</code></td>
-   <td><code>1</code></td>
-  </tr>
-  <tr>
-   <td><code>WebSocket.CLOSING</code></td>
-   <td><code>2</code></td>
-  </tr>
-  <tr>
-   <td><code>WebSocket.CLOSED</code></td>
-   <td><code>3</code></td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <td class="header">Constante</td>
+      <td class="header">Valeur</td>
+    </tr>
+    <tr>
+      <td><code>WebSocket.CONNECTING</code></td>
+      <td><code>0</code></td>
+    </tr>
+    <tr>
+      <td><code>WebSocket.OPEN</code></td>
+      <td><code>1</code></td>
+    </tr>
+    <tr>
+      <td><code>WebSocket.CLOSING</code></td>
+      <td><code>2</code></td>
+    </tr>
+    <tr>
+      <td><code>WebSocket.CLOSED</code></td>
+      <td><code>3</code></td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="properties">Propriétés</h2>
-
-<dl>
- <dt><a href="/fr/docs/Web/API/WebSocket/binaryType"><code>WebSocket.binaryType</code></a></dt>
- <dd>Le type de données binaire utilisé par la connexion.</dd>
- <dt><a href="/fr/docs/Web/API/WebSocket/bufferedAmount"><code>WebSocket.bufferedAmount</code></a> {{readonlyinline}}</dt>
- <dd>Le nombre d'octets de données dans la queue.</dd>
- <dt><a href="/fr/docs/Web/API/WebSocket/extensions"><code>WebSocket.extensions</code></a> {{readonlyinline}}</dt>
- <dd>Les extensions sélectionnées par le serveur.</dd>
- <dt><a href="/fr/docs/Web/API/WebSocket/onclose"><code>WebSocket.onclose</code></a></dt>
- <dd>Un gestionnaire d'évènement à appeler lorsque la connexion est fermée.</dd>
- <dt><a href="/fr/docs/Web/API/WebSocket/onerror"><code>WebSocket.onerror</code></a></dt>
- <dd>Un gestionnaire d'évènement à appeler en cas d'erreur.</dd>
- <dt><a href="/fr/docs/Web/API/WebSocket/onmessage"><code>WebSocket.onmessage</code></a></dt>
- <dd>Un gestionnaire d'évènement à appeler lors de la réception d'un message du serveur.</dd>
- <dt><a href="/fr/docs/Web/API/WebSocket/onopen"><code>WebSocket.onopen</code></a></dt>
- <dd>Un gestionnaire d'évènement à appeler lorsque la connexion est ouverte.</dd>
- <dt><a href="/fr/docs/Web/API/WebSocket/protocol"><code>WebSocket.protocol</code></a> {{readonlyinline}}</dt>
- <dd>Le sous-protocole sélectionné par le serveur.</dd>
- <dt><a href="/fr/docs/Web/API/WebSocket/readyState"><code>WebSocket.readyState</code></a> {{readonlyinline}}</dt>
- <dd>L'état courant de la connexion.</dd>
- <dt><a href="/fr/docs/Web/API/WebSocket/url"><code>WebSocket.url</code></a> {{readonlyinline}}</dt>
- <dd>L'URL absolue de la WebSocket.</dd>
-</dl>
-
-<h2 id="methods">Méthodes</h2>
-
-<dl>
- <dt><a href="/fr/docs/Web/API/WebSocket/close"><code>WebSocket.close([code[, reason]])</code></a></dt>
- <dd>Ferme la connexion.</dd>
- <dt><a href="/fr/docs/Web/API/WebSocket/send"><code>WebSocket.send(data)</code></a></dt>
- <dd>Ajoute des données à transmettre à la queue.</dd>
-</dl>
-
-<h2 id="events">Évènements</h2>
-
-
-<dl>
- <dt><a href="/fr/docs/Web/API/WebSocket/close_event"><code>close</code></a></dt>
- <dd>Déclenché lorsqu'une connexion avec une <code>WebSocket</code> est fermée. Également disponible avec la propriété <a href="/fr/docs/Web/API/WebSocket/onclose"><code>onclose</code></a>.</dd>
- <dt><a href="/fr/docs/Web/API/WebSocket/error_event"><code>error</code></a></dt>
- <dd>Déclenché lorsqu'une connexion avec une <code>WebSocket</code> a été fermée à cause d'une erreur, par exemple lorsque des données n'ont pu être envoyées. Également disponible avec la propriété <a href="/fr/docs/Web/API/WebSocket/onerror"><code>onerror</code></a>.</dd>
- <dt><a href="/fr/docs/Web/API/WebSocket/message_event"><code>message</code></a></dt>
- <dd>Déclenché lorsque des données sont reçues via une <code>WebSocket</code>. Également disponible avec la propriété <a href="/fr/docs/Web/API/WebSocket/onmessage"><code>onmessage</code></a>.</dd>
- <dt><a href="/fr/docs/Web/API/WebSocket/open_event"><code>open</code></a></dt>
- <dd>Déclenché lorsqu'une connexion avec une <code>WebSocket</code> est ouverte. Également disponible avec la propriété <a href="/fr/docs/Web/API/WebSocket/onopen"><code>onopen</code></a>.</dd>
-</dl>
-
-<h2 id="examples">Exemples</h2>
-
-<pre class="brush: js">// Créer une connexion WebSocket
+## Propriétés
+
+- [`WebSocket.binaryType`](/fr/docs/Web/API/WebSocket/binaryType)
+  - : Le type de données binaire utilisé par la connexion.
+- [`WebSocket.bufferedAmount`](/fr/docs/Web/API/WebSocket/bufferedAmount) {{readonlyinline}}
+  - : Le nombre d'octets de données dans la queue.
+- [`WebSocket.extensions`](/fr/docs/Web/API/WebSocket/extensions) {{readonlyinline}}
+  - : Les extensions sélectionnées par le serveur.
+- [`WebSocket.onclose`](/fr/docs/Web/API/WebSocket/onclose)
+  - : Un gestionnaire d'évènement à appeler lorsque la connexion est fermée.
+- [`WebSocket.onerror`](/fr/docs/Web/API/WebSocket/onerror)
+  - : Un gestionnaire d'évènement à appeler en cas d'erreur.
+- [`WebSocket.onmessage`](/fr/docs/Web/API/WebSocket/onmessage)
+  - : Un gestionnaire d'évènement à appeler lors de la réception d'un message du serveur.
+- [`WebSocket.onopen`](/fr/docs/Web/API/WebSocket/onopen)
+  - : Un gestionnaire d'évènement à appeler lorsque la connexion est ouverte.
+- [`WebSocket.protocol`](/fr/docs/Web/API/WebSocket/protocol) {{readonlyinline}}
+  - : Le sous-protocole sélectionné par le serveur.
+- [`WebSocket.readyState`](/fr/docs/Web/API/WebSocket/readyState) {{readonlyinline}}
+  - : L'état courant de la connexion.
+- [`WebSocket.url`](/fr/docs/Web/API/WebSocket/url) {{readonlyinline}}
+  - : L'URL absolue de la WebSocket.
+
+## Méthodes
+
+- [`WebSocket.close([code[, reason]])`](/fr/docs/Web/API/WebSocket/close)
+  - : Ferme la connexion.
+- [`WebSocket.send(data)`](/fr/docs/Web/API/WebSocket/send)
+  - : Ajoute des données à transmettre à la queue.
+
+## Évènements
+
+- [`close`](/fr/docs/Web/API/WebSocket/close_event)
+  - : Déclenché lorsqu'une connexion avec une `WebSocket` est fermée. Également disponible avec la propriété [`onclose`](/fr/docs/Web/API/WebSocket/onclose).
+- [`error`](/fr/docs/Web/API/WebSocket/error_event)
+  - : Déclenché lorsqu'une connexion avec une `WebSocket` a été fermée à cause d'une erreur, par exemple lorsque des données n'ont pu être envoyées. Également disponible avec la propriété [`onerror`](/fr/docs/Web/API/WebSocket/onerror).
+- [`message`](/fr/docs/Web/API/WebSocket/message_event)
+  - : Déclenché lorsque des données sont reçues via une `WebSocket`. Également disponible avec la propriété [`onmessage`](/fr/docs/Web/API/WebSocket/onmessage).
+- [`open`](/fr/docs/Web/API/WebSocket/open_event)
+  - : Déclenché lorsqu'une connexion avec une `WebSocket` est ouverte. Également disponible avec la propriété [`onopen`](/fr/docs/Web/API/WebSocket/onopen).
+
+## Exemples
+
+```js
+// Créer une connexion WebSocket
 const socket = new WebSocket('ws://localhost:8080');
 
 // La connexion est ouverte
@@ -107,18 +99,17 @@ socket.addEventListener('open', function (event) {
 // Écouter les messages
 socket.addEventListener('message', function (event) {
   console.log('Voici un message du serveur', event.data);
-});</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="/fr/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications">Écrire des applications clientes WebSocket</a></li>
-</ul>
+- [Écrire des applications clientes WebSocket](/fr/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications)
diff --git a/files/fr/web/api/websocket/message_event/index.md b/files/fr/web/api/websocket/message_event/index.md
index dc35ad18b2..aa1fb404e9 100644
--- a/files/fr/web/api/websocket/message_event/index.md
+++ b/files/fr/web/api/websocket/message_event/index.md
@@ -3,55 +3,60 @@ title: 'WebSocket : évènement message'
 slug: Web/API/WebSocket/message_event
 browser-compat: api.WebSocket.message_event
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}
 
-<p>L'évènement <code>message</code> est déclenché lorsque des données sont reçues via une <code>WebSocket</code>.</p>
+L'évènement `message` est déclenché lorsque des données sont reçues via une `WebSocket`.
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row">Bouillonne/Remonte</th>
-   <td>Non</td>
-  </tr>
-  <tr>
-   <th scope="row">Annulable</th>
-   <td>Non</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface</th>
-   <td><a href="/fr/docs/Web/API/MessageEvent"><code>MessageEvent</code></a></td>
-  </tr>
-  <tr>
-    <th scope="row">Propriété de gestionnaire d'évènement correspondante</th>
-    <td><a href="/fr/docs/Web/API/WebSocket/onmessage"><code>onmessage</code></a></td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Bouillonne/Remonte</th>
+      <td>Non</td>
+    </tr>
+    <tr>
+      <th scope="row">Annulable</th>
+      <td>Non</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface</th>
+      <td>
+        <a href="/fr/docs/Web/API/MessageEvent"><code>MessageEvent</code></a>
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Propriété de gestionnaire d'évènement correspondante</th>
+      <td>
+        <a href="/fr/docs/Web/API/WebSocket/onmessage"
+          ><code>onmessage</code></a
+        >
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="examples">Exemples</h2>
+## Exemples
 
-<pre class="brush: js">
+```js
 // Crée une connexion WebSocket
 const socket = new WebSocket('ws://localhost:8080');
 
 // Écoute les différents messages
 socket.addEventListener('message', function (event) {
     console.log('Message reçu du serveur ', event.data);
-});</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="/fr/docs/Web/API/WebSocket/close_event">WebSocket : évènement <code>close</code></a></li>
-  <li><a href="/fr/docs/Web/API/WebSocket/error_event">WebSocket : évènement <code>error</code></a></li>
-  <li><a href="/fr/docs/Web/API/WebSocket/open_event">WebSocket : évènement <code>open</code></a></li>
-  <li><a href="/fr/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications">Écrire des applications clientes WebSocket</a></li>
- </ul>
+- [WebSocket : évènement `close`](/fr/docs/Web/API/WebSocket/close_event)
+- [WebSocket : évènement `error`](/fr/docs/Web/API/WebSocket/error_event)
+- [WebSocket : évènement `open`](/fr/docs/Web/API/WebSocket/open_event)
+- [Écrire des applications clientes WebSocket](/fr/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications)
diff --git a/files/fr/web/api/websocket/onclose/index.md b/files/fr/web/api/websocket/onclose/index.md
index 040f03c485..6fa1d347a2 100644
--- a/files/fr/web/api/websocket/onclose/index.md
+++ b/files/fr/web/api/websocket/onclose/index.md
@@ -3,25 +3,26 @@ title: WebSocket.onclose
 slug: Web/API/WebSocket/onclose
 browser-compat: api.WebSocket.onclose
 ---
-<p>{{APIRef("Web Sockets API")}}</p>
+{{APIRef("Web Sockets API")}}
 
-<p>La propriété <code><strong>WebSocket.onclose</strong></code> est un <a href="/fr/docs/Web/Events/Event_handlers">gestionnaire d'évènement</a> invoqué lorsque l'état <a href="/fr/docs/Web/API/WebSocket/readyState"><code>readyState</code></a> de la connexion WebSocket change de valeur pour passer à <a href="/fr/docs/Web/API/WebSocket/readyState"><code>CLOSED</code></a>. Ce gestionnaire est appelé avec un paramètre <a href="/fr/docs/Web/API/CloseEvent"><code>CloseEvent</code></a>.</p>
+La propriété **`WebSocket.onclose`** est un [gestionnaire d'évènement](/fr/docs/Web/Events/Event_handlers) invoqué lorsque l'état [`readyState`](/fr/docs/Web/API/WebSocket/readyState) de la connexion WebSocket change de valeur pour passer à [`CLOSED`](/fr/docs/Web/API/WebSocket/readyState). Ce gestionnaire est appelé avec un paramètre [`CloseEvent`](/fr/docs/Web/API/CloseEvent).
 
-<h2 id="syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">
+```js
 unWebSocket.onclose = function(event) {
   console.log("La WebSocket est désormais fermée.");
-};</pre>
+};
+```
 
-<h2 id="value">Valeur</h2>
+## Valeur
 
-<p>Une fonction <a href="/fr/docs/Web/API/EventListener"><code>EventListener</code></a>.</p>
+Une fonction [`EventListener`](/fr/docs/Web/API/EventListener).
 
-<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/api/websocket/onerror/index.md b/files/fr/web/api/websocket/onerror/index.md
index 5ffafd26cd..d533a031db 100644
--- a/files/fr/web/api/websocket/onerror/index.md
+++ b/files/fr/web/api/websocket/onerror/index.md
@@ -3,33 +3,34 @@ title: WebSocket.onerror
 slug: Web/API/WebSocket/onerror
 browser-compat: api.WebSocket.onerror
 ---
-<div>{{APIRef("Web Sockets API")}}</div>
+{{APIRef("Web Sockets API")}}
 
-<p>La propriété <code><strong>onerror</strong></code> de l'interface <a href="/fr/docs/Web/API/WebSocket"><code>WebSocket</code></a> est un gestionnaire d'évènement qui est appelé lorsqu'une erreur se produit sur la connexion WebSocket.</p>
+La propriété **`onerror`** de l'interface [`WebSocket`](/fr/docs/Web/API/WebSocket) est un gestionnaire d'évènement qui est appelé lorsqu'une erreur se produit sur la connexion WebSocket.
 
-<p>Il est également possible d'ajouter un gestionnaire d'évènement <code>error</code> avec la méthode <a href="/fr/docs/Web/API/EventTarget/addEventListener"><code>addEventListener()</code></a>.</p>
+Il est également possible d'ajouter un gestionnaire d'évènement `error` avec la méthode [`addEventListener()`](/fr/docs/Web/API/EventTarget/addEventListener).
 
-<h2 id="syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">
+```js
 webSocket.onerror = eventHandler;
-</pre>
+```
 
-<h3 id="value">Valeur</h3>
+### Valeur
 
-<p>Une fonction ou un <a href="/fr/docs/Web/Events/Event_handlers">gestionnaire d'évènement</a> qui est exécuté lorsqu'un évènement <code>error</code> se produit sur la connexion WebSocket.</p>
+Une fonction ou un [gestionnaire d'évènement](/fr/docs/Web/Events/Event_handlers) qui est exécuté lorsqu'un évènement `error` se produit sur la connexion WebSocket.
 
-<h2 id="example">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">
+```js
 webSocket.onerror = function(event) {
   console.error("Erreur WebSocket observée :", event);
-};</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}}
diff --git a/files/fr/web/api/websocket/onmessage/index.md b/files/fr/web/api/websocket/onmessage/index.md
index 03ff9451fb..aa71dcccbf 100644
--- a/files/fr/web/api/websocket/onmessage/index.md
+++ b/files/fr/web/api/websocket/onmessage/index.md
@@ -3,25 +3,26 @@ title: WebSocket.onmessage
 slug: Web/API/WebSocket/onmessage
 browser-compat: api.WebSocket.onmessage
 ---
-<div>{{APIRef("Web Sockets API")}}</div>
+{{APIRef("Web Sockets API")}}
 
-<p>La propriété <strong><code>WebSocket.onmessage</code></strong> est un <a href="/fr/docs/Web/Events/Event_handlers">gestionnaire d'évènement</a> qui est appelé lorsqu'un message est reçu depuis le serveur. Ce gestionnaire est appelé avec un évènement <a href="/fr/docs/Web/API/MessageEvent"><code>MessageEvent</code></a> en paramètre.</p>
+La propriété **`WebSocket.onmessage`** est un [gestionnaire d'évènement](/fr/docs/Web/Events/Event_handlers) qui est appelé lorsqu'un message est reçu depuis le serveur. Ce gestionnaire est appelé avec un évènement [`MessageEvent`](/fr/docs/Web/API/MessageEvent) en paramètre.
 
-<h2 id="syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">
+```js
 unWebSocket.onmessage = function(event) {
   console.debug("Message WebSocket reçu :", event);
-};</pre>
+};
+```
 
-<h2 id="value">Valeur</h2>
+## Valeur
 
-<p>Un objet <a href="/fr/docs/Web/API/EventListener"><code>EventListener</code></a>.</p>
+Un objet [`EventListener`](/fr/docs/Web/API/EventListener).
 
-<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/api/websocket/onopen/index.md b/files/fr/web/api/websocket/onopen/index.md
index 488b3eb0be..90acf4f1f1 100644
--- a/files/fr/web/api/websocket/onopen/index.md
+++ b/files/fr/web/api/websocket/onopen/index.md
@@ -3,25 +3,26 @@ title: WebSocket.onopen
 slug: Web/API/WebSocket/onopen
 browser-compat: api.WebSocket.onopen
 ---
-<div>{{APIRef("Web Sockets API")}}</div>
+{{APIRef("Web Sockets API")}}
 
-<p>La propriété <strong><code>WebSocket.onopen</code></strong> est un <a href="/fr/docs/Web/Events/Event_handlers">gestionnaire d'évènement</a> qui est appelé lorsque l'état (<a href="/fr/docs/Web/API/WebSocket/readyState"><code>readyState</code></a>) de la connexion <a href="/fr/docs/Web/API/WebSocket"><code>WebSocket</code></a> passe à <code>1</code>, indiquant que la connexion est prête pour l'envoi et la réception de données. Lorsqu'il est appelé, ce gestionnaire d'évènement reçoit un objet <a href="/fr/docs/Web/API/Event"><code>Event</code></a> en paramètre.</p>
+La propriété **`WebSocket.onopen`** est un [gestionnaire d'évènement](/fr/docs/Web/Events/Event_handlers) qui est appelé lorsque l'état ([`readyState`](/fr/docs/Web/API/WebSocket/readyState)) de la connexion [`WebSocket`](/fr/docs/Web/API/WebSocket) passe à `1`, indiquant que la connexion est prête pour l'envoi et la réception de données. Lorsqu'il est appelé, ce gestionnaire d'évènement reçoit un objet [`Event`](/fr/docs/Web/API/Event) en paramètre.
 
-<h2 id="syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">
+```js
 uneWebSocket.onopen = function(event) {
   console.log("La WebSocket est désormais ouverte.");
-};</pre>
+};
+```
 
-<h2 id="value">Valeur</h2>
+## Valeur
 
-<p>Un objet <a href="/fr/docs/Web/API/EventListener"><code>EventListener</code></a>.</p>
+Un objet [`EventListener`](/fr/docs/Web/API/EventListener).
 
-<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/api/websocket/open_event/index.md b/files/fr/web/api/websocket/open_event/index.md
index cfa28af7bb..29c707650a 100644
--- a/files/fr/web/api/websocket/open_event/index.md
+++ b/files/fr/web/api/websocket/open_event/index.md
@@ -3,55 +3,58 @@ title: 'WebSocket : évènement open'
 slug: Web/API/WebSocket/open_event
 browser-compat: api.WebSocket.open_event
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}
 
-<p>L'évènement <code>open</code> est déclenché lorsqu'une connexion avec une <code>WebSocket</code> est ouverte.</p>
+L'évènement `open` est déclenché lorsqu'une connexion avec une `WebSocket` est ouverte.
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row">Bouillonne/Remonte</th>
-   <td>Non</td>
-  </tr>
-  <tr>
-   <th scope="row">Annulable</th>
-   <td>Non</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface</th>
-   <td><a href="/fr/docs/Web/API/Event"><code>Event</code></a></td>
-  </tr>
-  <tr>
-   <th scope="row">Propriété de gestionnaire d'évènement correspondante</th>
-   <td><a href="/fr/docs/Web/API/WebSocket/onopen"><code>onopen</code></a></td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Bouillonne/Remonte</th>
+      <td>Non</td>
+    </tr>
+    <tr>
+      <th scope="row">Annulable</th>
+      <td>Non</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface</th>
+      <td>
+        <a href="/fr/docs/Web/API/Event"><code>Event</code></a>
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Propriété de gestionnaire d'évènement correspondante</th>
+      <td>
+        <a href="/fr/docs/Web/API/WebSocket/onopen"><code>onopen</code></a>
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="examples">Exemples</h2>
+## Exemples
 
-<pre class="brush: js">
+```js
 // Crée une connexion WebSocket
 const socket = new WebSocket('ws://localhost:8080');
 
 // La connexion est ouverte
-socket.addEventListener('open', (event) =&gt; {
+socket.addEventListener('open', (event) => {
   socket.send('Coucou serveur !');
-});</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="/fr/docs/Web/API/WebSocket/close_event">WebSocket : évènement <code>close</code></a></li>
-  <li><a href="/fr/docs/Web/API/WebSocket/error_event">WebSocket : évènement <code>error</code></a></li>
-  <li><a href="/fr/docs/Web/API/WebSocket/message_event">WebSocket : évènement <code>message</code></a></li>
-  <li><a href="/fr/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications">Écrire des applications clientes WebSocket</a></li>
- </ul>
+- [WebSocket : évènement `close`](/fr/docs/Web/API/WebSocket/close_event)
+- [WebSocket : évènement `error`](/fr/docs/Web/API/WebSocket/error_event)
+- [WebSocket : évènement `message`](/fr/docs/Web/API/WebSocket/message_event)
+- [Écrire des applications clientes WebSocket](/fr/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications)
diff --git a/files/fr/web/api/websocket/protocol/index.md b/files/fr/web/api/websocket/protocol/index.md
index cf2bc5d053..6f086e74e4 100644
--- a/files/fr/web/api/websocket/protocol/index.md
+++ b/files/fr/web/api/websocket/protocol/index.md
@@ -3,24 +3,24 @@ title: WebSocket.protocol
 slug: Web/API/WebSocket/protocol
 browser-compat: api.WebSocket.protocol
 ---
-<p>{{APIRef("Web Sockets API")}}</p>
+{{APIRef("Web Sockets API")}}
 
-<p>La propriété en lecture seule <strong><code>WebSocket.protocol</code></strong> renvoie le nom du sous protocole sélectionné par le serveur. Cette valeur sera l'une des chaînes de caractères du paramètre <code>protocols</code> utilisé lors de la création de l'objet <a href="/fr/docs/Web/API/WebSocket"><code>WebSocket</code></a> ou la chaîne vide si aucune connexion n'est établie.</p>
+La propriété en lecture seule **`WebSocket.protocol`** renvoie le nom du sous protocole sélectionné par le serveur. Cette valeur sera l'une des chaînes de caractères du paramètre `protocols` utilisé lors de la création de l'objet [`WebSocket`](/fr/docs/Web/API/WebSocket) ou la chaîne vide si aucune connexion n'est établie.
 
-<h2 id="syntax">Syntax</h2>
+## Syntax
 
-<pre class="brush: js">
+```js
 var protocol = uneWebSocket.protocol;
-</pre>
+```
 
-<h2 id="value">Valeur</h2>
+## Valeur
 
-<p>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a>.</p>
+Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString).
 
-<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/api/websocket/readystate/index.md b/files/fr/web/api/websocket/readystate/index.md
index d33114d5f5..e764eab3b1 100644
--- a/files/fr/web/api/websocket/readystate/index.md
+++ b/files/fr/web/api/websocket/readystate/index.md
@@ -3,19 +3,19 @@ title: WebSocket.readyState
 slug: Web/API/WebSocket/readyState
 browser-compat: api.WebSocket.readyState
 ---
-<p>{{APIRef("Web Sockets API")}}</p>
+{{APIRef("Web Sockets API")}}
 
-<p>La propriété en lecture seule <strong><code>WebSocket.readyState</code></strong> renvoie l'état courant de la connexion <a href="/fr/docs/Web/API/WebSocket"><code>WebSocket</code></a>.</p>
+La propriété en lecture seule **`WebSocket.readyState`** renvoie l'état courant de la connexion [`WebSocket`](/fr/docs/Web/API/WebSocket).
 
-<h2 id="syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">
+```js
 var readyState = uneWebSocket.readyState;
-</pre>
+```
 
-<h2 id="value">Valeur</h2>
+## Valeur
 
-<p>Cette propriété peut valoir l'une des valeurs de type <code>unsigned short</code> suivantes :</p>
+Cette propriété peut valoir l'une des valeurs de type `unsigned short` suivantes :
 
 <table class="standard-table">
   <tbody>
@@ -47,10 +47,10 @@ var readyState = uneWebSocket.readyState;
   </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}}
diff --git a/files/fr/web/api/websocket/send/index.md b/files/fr/web/api/websocket/send/index.md
index 62cd149882..866d01bcae 100644
--- a/files/fr/web/api/websocket/send/index.md
+++ b/files/fr/web/api/websocket/send/index.md
@@ -3,53 +3,62 @@ title: WebSocket.send()
 slug: Web/API/WebSocket/send
 browser-compat: api.WebSocket.send
 ---
-<p>{{APIRef("Web Sockets API")}}</p>
+{{APIRef("Web Sockets API")}}
 
-<p>La méthode <strong><code>WebSocket.send()</code></strong> rajoute les données indiquées à la queue pour transmission au serveur via la connexion WebSocket, augmentant ainsi la valeur de <code>bufferedAmount</code> du nombre d'octets nécessaires pour les données. Si les données ne peuvent être envoyées (par exemple parce qu'elles doivent être mises en tampon mais que la mémoire tampon est pleine), la socket est fermée automatiquement.</p>
+La méthode **`WebSocket.send()`** rajoute les données indiquées à la queue pour transmission au serveur via la connexion WebSocket, augmentant ainsi la valeur de `bufferedAmount` du nombre d'octets nécessaires pour les données. Si les données ne peuvent être envoyées (par exemple parce qu'elles doivent être mises en tampon mais que la mémoire tampon est pleine), la socket est fermée automatiquement.
 
-<h2 id="syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">
+```js
 WebSocket.send("Coucou serveur !");
-</pre>
+```
 
-<h3 id="parameters">Paramètres</h3>
+### Paramètres
 
-<dl>
-  <dt><code>data</code></dt>
-  <dd>Les données à envoyer au serveur. La valeur peut avoir un des types suivants :
-    <dl>
-      <dt><a href="/fr/docs/Web/API/USVString"><code>USVString</code></a></dt>
-      <dd>Une chaîne de caractères. Cette chaîne est ajoutée au tampon au format UTF-8 et la valeur de <code>bufferedAmount</code> est augmentée du nombre d'octets nécessaires pour représenter cette chaîne de caractères UTF-8.</dd>
-      <dt><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer"><code>ArrayBuffer</code></a></dt>
-      <dd>Les données binaires peuvent aussi être envoyées avec un tableau typé. Son contenu binaire est mis en tampon et la valeur de <code>bufferedAmount</code> est augmentée du nombre d'octets nécessaires.</dd>
-      <dt><a href="/fr/docs/Web/API/Blob"><code>Blob</code></a></dt>
-      <dd>Lorsqu'une valeur <code>Blob</code> est fournie, les données brutes du blob sont rajoutées à la queue pour être transmises dans une <i lang="en">frame</i> binaire. La valeur de <code>bufferedAmount</code> est augmentée du nombre d'octets utilisés pour représenter ces données brutes.</dd>
-      <dt><a href="/fr/docs/Web/API/ArrayBufferView"><code>ArrayBufferView</code></a></dt>
-      <dd>Il est possible d'envoyer n'importe quel objet étant <a href="/fr/docs/Web/JavaScript/Typed_arrays">un tableau typé JavaScript</a> sous la forme d'une <i lang="en">frame</i> binaire. Le contenu des données binaires est rajouté à la queue dans le tampon et la valeur de <code>bufferedAmount</code> est augmentée du nombre d'octets correspondant.</dd>
-    </dl>
-  </dd>
-</dl>
+- `data`
 
-<h3 id="exceptions_thrown">Exceptions levées</h3>
+  - : Les données à envoyer au serveur. La valeur peut avoir un des types suivants :
 
-<dl>
-  <dt><code>INVALID_STATE_ERR</code></dt>
-  <dd>La connexion n'est pas ouverte actuellement.</dd>
-  <dt><code>SYNTAX_ERR</code></dt>
-  <dd>Les données sont une chaîne de caractères pour laquelle il existe des <i lang="en">surrogates</i> non appairés.</dd>
-</dl>
+    - [`USVString`](/fr/docs/Web/API/USVString)
+      - : Une chaîne de caractères. Cette chaîne est ajoutée au tampon au format UTF-8 et la valeur de `bufferedAmount` est augmentée du nombre d'octets nécessaires pour représenter cette chaîne de caractères UTF-8.
+    - [`ArrayBuffer`](/fr/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer)
+      - : Les données binaires peuvent aussi être envoyées avec un tableau typé. Son contenu binaire est mis en tampon et la valeur de `bufferedAmount` est augmentée du nombre d'octets nécessaires.
+    - [`Blob`](/fr/docs/Web/API/Blob)
 
-<div class="note">
-  <p><strong>Note :</strong> Pour Gecko 6.0, l'implémentation de <code>send()</code> varie de la spécification : le moteur renvoie un booléen indiquant si la connexion est toujours ouverte (par extension, cela indique si les données ont été correctement rajoutées à la queue ou transmises). Ce comportement a été corrigé avec Gecko 8.0.</p>
+      - : Lorsqu'une valeur `Blob` est fournie, les données brutes du blob sont rajoutées à la queue pour être transmises dans une
 
-  <p>Avec Gecko 11.0, la prise en charge des <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer"><code>ArrayBuffer</code></a> est implémentée mais pas celle pour les objets <a href="/fr/docs/Web/API/Blob"><code>Blob</code></a>.</p>
-</div>
+        <i lang="en">frame</i>
 
-<h2 id="specifications">Spécifications</h2>
+        binaire. La valeur de `bufferedAmount` est augmentée du nombre d'octets utilisés pour représenter ces données brutes.
 
-<p>{{Specifications}}</p>
+    - [`ArrayBufferView`](/fr/docs/Web/API/ArrayBufferView)
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+      - : Il est possible d'envoyer n'importe quel objet étant [un tableau typé JavaScript](/fr/docs/Web/JavaScript/Typed_arrays) sous la forme d'une
 
-<p>{{Compat}}</p>
+        <i lang="en">frame</i>
+
+        binaire. Le contenu des données binaires est rajouté à la queue dans le tampon et la valeur de `bufferedAmount` est augmentée du nombre d'octets correspondant.
+
+### Exceptions levées
+
+- `INVALID_STATE_ERR`
+  - : La connexion n'est pas ouverte actuellement.
+- `SYNTAX_ERR`
+
+  - : Les données sont une chaîne de caractères pour laquelle il existe des
+
+    <i lang="en">surrogates</i>
+
+    non appairés.
+
+> **Note :** Pour Gecko 6.0, l'implémentation de `send()` varie de la spécification : le moteur renvoie un booléen indiquant si la connexion est toujours ouverte (par extension, cela indique si les données ont été correctement rajoutées à la queue ou transmises). Ce comportement a été corrigé avec Gecko 8.0.
+>
+> Avec Gecko 11.0, la prise en charge des [`ArrayBuffer`](/fr/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) est implémentée mais pas celle pour les objets [`Blob`](/fr/docs/Web/API/Blob).
+
+## Spécifications
+
+{{Specifications}}
+
+## Compatibilité des navigateurs
+
+{{Compat}}
diff --git a/files/fr/web/api/websocket/url/index.md b/files/fr/web/api/websocket/url/index.md
index acaa13de14..57e7c95c62 100644
--- a/files/fr/web/api/websocket/url/index.md
+++ b/files/fr/web/api/websocket/url/index.md
@@ -3,24 +3,24 @@ title: WebSocket.url
 slug: Web/API/WebSocket/url
 browser-compat: api.WebSocket.url
 ---
-<p>{{APIRef("Web Sockets API")}}</p>
+{{APIRef("Web Sockets API")}}
 
-<p>La propriété en lecture seule <strong><code>WebSocket.url</code></strong> renvoie l'URL absolue de la <a href="/fr/docs/Web/API/WebSocket"><code>WebSocket</code></a> telle que résolue par le constructeur.</p>
+La propriété en lecture seule **`WebSocket.url`** renvoie l'URL absolue de la [`WebSocket`](/fr/docs/Web/API/WebSocket) telle que résolue par le constructeur.
 
-<h2 id="syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">
+```js
 var url = aWebSocket.url;
-</pre>
+```
 
-<h2 id="value">Valeur</h2>
+## Valeur
 
-<p>Une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a>.</p>
+Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString).
 
-<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/api/websocket/websocket/index.md b/files/fr/web/api/websocket/websocket/index.md
index 94ff66e828..e0bf4c0eab 100644
--- a/files/fr/web/api/websocket/websocket/index.md
+++ b/files/fr/web/api/websocket/websocket/index.md
@@ -3,38 +3,34 @@ title: WebSocket()
 slug: Web/API/WebSocket/WebSocket
 browser-compat: api.WebSocket.WebSocket
 ---
-<p>{{APIRef("Web Sockets API")}}</p>
+{{APIRef("Web Sockets API")}}
 
-<p>Le constructeur <code><strong>WebSocket()</strong></code> renvoie un nouvel objet <a href="/fr/docs/Web/API/WebSocket"><code>WebSocket</code></a>.</p>
+Le constructeur **`WebSocket()`** renvoie un nouvel objet [`WebSocket`](/fr/docs/Web/API/WebSocket).
 
-<h2 id="syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">
-var <em>aWebSocket</em> = new WebSocket(<em>url</em> [, protocols]);
-</pre>
+```js
+var aWebSocket = new WebSocket(url [, protocols]);
+```
 
-<h3 id="parameters">Paramètres</h3>
+### Paramètres
 
-<dl>
-  <dt><code>url</code></dt>
-  <dd>L'URL à laquelle se connecter. Cela devrait être l'URL à laquelle le serveur WebSocket répondra.</dd>
-  <dt><code>protocols</code> {{optional_inline}}</dt>
-  <dd>Une valeur qui est une chaîne de caractères représentant un seul protocole ou un tableau de chaînes de caractères représentant une liste de protocoles. Ces chaînes de caractères indiquent des sous-protocoles : un serveur donné pourra implémenter différents sous-protocoles WebSocket (on peut vouloir qu'un serveur soit capable de gérér différents types d'interaction selon le <code>protocol</code> indiqué). Si cette valeur est absence, c'est un tableau vide qui est utilisé par défaut : <code>[]</code>.</dd>
-</dl>
+- `url`
+  - : L'URL à laquelle se connecter. Cela devrait être l'URL à laquelle le serveur WebSocket répondra.
+- `protocols` {{optional_inline}}
+  - : Une valeur qui est une chaîne de caractères représentant un seul protocole ou un tableau de chaînes de caractères représentant une liste de protocoles. Ces chaînes de caractères indiquent des sous-protocoles : un serveur donné pourra implémenter différents sous-protocoles WebSocket (on peut vouloir qu'un serveur soit capable de gérér différents types d'interaction selon le `protocol` indiqué). Si cette valeur est absence, c'est un tableau vide qui est utilisé par défaut : `[]`.
 
-<h3 id="exceptions_thrown">Exceptions levées</h3>
+### Exceptions levées
 
-<dl>
-  <dt><code>SECURITY_ERR</code></dt>
-  <dd>Le port ciblé par la tentative de connexion est bloqué.</dd>
-  <dt><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError">SyntaxError</a></dt>
-  <dd>L'URL est invalide.</dd>
-</dl>
+- `SECURITY_ERR`
+  - : Le port ciblé par la tentative de connexion est bloqué.
+- [SyntaxError](/fr/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError)
+  - : L'URL est invalide.
 
-<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/api/websockets_api/index.md b/files/fr/web/api/websockets_api/index.md
index 3a1f82be97..e82c924000 100644
--- a/files/fr/web/api/websockets_api/index.md
+++ b/files/fr/web/api/websockets_api/index.md
@@ -15,100 +15,86 @@ tags:
   - interactive
 translation_of: Web/API/WebSockets_API
 ---
-<p>{{DefaultAPISidebar("Websockets API")}}</p>
-
-<p>L'<strong>API WebSocket</strong> est une technologie évoluée qui permet d'ouvrir un canal de communication bidirectionnelle entre un navigateur (côté client) et un serveur. Avec cette API vous pouvez envoyer des messages à un serveur et recevoir ses réponses de manière événementielle sans avoir à aller consulter le serveur pour obtenir une réponse.</p>
-
-<div class="note">
-<p><strong>Note :</strong> Bien que les connexions WebSocket soient fonctionnellement similaires aux sockets standard de type Unix, elles ne sont pas liées.</p>
-</div>
-
-<h2 id="Interfaces">Interfaces  </h2>
-
-<dl>
- <dt><code><a href="/fr/docs/WebSockets/Writing_WebSocket_client_applications">WebSocket</a></code></dt>
- <dd>Interface principale pour se connecter à un serveur WebSocket. Il permet d'envoyer et de recevoir des données sur la connexion.</dd>
- <dt><code><a href="/fr/docs/Web/API/CloseEvent">CloseEvent</a></code></dt>
- <dd>Evénement envoyé par l'objet WebSocket lors de la fermeture de la connexion.</dd>
- <dt><code><a href="/fr/docs/Web/API/MessageEvent">MessageEvent</a></code></dt>
- <dd>Evénement envoyé par l'objet WebSocket lorsqu'un message est reçu par le serveur.</dd>
-</dl>
-
-<h2 id="Guides">Guides</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications">Ecrire des applications client WebSocket </a></li>
- <li><a href="/fr/docs/Web/API/WebSockets_API/Writing_WebSocket_servers">Écriture de serveurs WebSocket </a></li>
- <li><a href="/fr/docs/Web/API/WebSockets_API/Writing_WebSocket_server">Écrire un serveur WebSocket en C#</a></li>
- <li><a href="/fr/docs/Web/API/WebSockets_API/Writing_a_WebSocket_server_in_Java">Écrire un serveur WebSocket en Java </a></li>
-</ul>
-
-<h2 id="Outils">Outils</h2>
-
-<ul>
- <li> <a href="https://humblenet.github.io/">HumbleNet</a> :Bibliothèque de réseau multiplateforme qui fonctionne dans un navigateur. Il s'agit bibliothèque écrite en C qui enveloppe WebSockets et WebRTC. Elle gomme toutes les différences qui existent entre les navigateurs et les logiciels, ce qui facilite la création d'une fonctionnalité de réseau multi-joueurs pour les jeux, par exemple,  et autres applications.</li>
- <li><a href="https://github.com/uWebSockets/uWebSockets">µWebSockets</a>: Déclinaison plus légère et plus performante de WebSocket et écrite en <a href="https://isocpp.org/">C++11</a> et en <a href="https://nodejs.org/fr/">Node.js</a>.</li>
- <li><a href="https://github.com/ClusterWS/ClusterWS">ClusteWS</a>: Framework léger, rapide et puissant qui permet de construire des application en <a href="https://nodejs.org/fr/">Node.js</a>.</li>
- <li><a href="http://socket.io">Socket.IO</a>: API WebSocket puissante et multiplateformes en <a href="http://nodejs.org">Node.js</a>.</li>
- <li><a href="https://socketcluster.io/#!/">SocketCluster</a>: Framework open source en temps réel en <a href="http://nodejs.org">Node.js</a>. Il prend en charge à la fois la communication directe client-serveur et la communication de groupe via les pub/sub canaux. Il est conçu pour s'adapter facilement à n'importe quel nombre de processus/hôtes et est idéal pour construire de chat de discution.</li>
- <li><a href="http://nodejs.org">Node.js</a>.</li>
- <li><a href="https://www.totaljs.com/">Total.js</a>: FrameWork pour web application en <a href="http://nodejs.org">Node.js</a>.</li>
- <li><a href="https://www.npmjs.com/package/faye-websocket">Faye</a>: Combine WebSocket(bidirectionnelle) et EventSource(unidirectionnelle) , côté serveur et côté client en <a href="http://nodejs.org">Node.js</a>.</li>
- <li><a href="http://signalr.net/">SignalR</a>: SignalR est une nouvelle bibliothèque pour les développeurs <a href="https://dotnet.microsoft.com/apps/aspnet">ASP.NET</a>. Elle simplifie l'ajout des WebSockets dans les applications. SignalR utilise les canaux  de WebSockets lorsqu'elles sont disponibles,  dans le cas contraire elle utilise d'autres technos, sans modifier votre application.</li>
- <li><a href="https://caddyserver.com/docs/websocket">Caddy</a>: Serveur web capable de créer des WebSockets serveur/proxy(stdin/stdout, echo, cat, ...).</li>
- <li><a href="https://github.com/websockets/ws">ws</a>: La plus populaire des WebSockets pour client &amp; serveur en <a href="http://nodejs.org">Node.js</a>.</li>
- <li><a href="https://github.com/bigstepinc/jsonrpc-bidirectional">jsonrpc-bidirectional</a>: Asynchronous RPC which, on a single connection, may have functions exported on the server and, and the same time, on the client (client may call server, server may also call client).</li>
- <li><a href="https://github.com/ninenines/cowboy">cowboy</a>: Cowboy est un petit serveur HTTP rapide et moderne pour Erlang/OTP basé sur WebSocket.</li>
-</ul>
-
-<h2 id="Ressources_liées">Ressources liées</h2>
-
-<ul>
- <li><a href="/fr/docs/AJAX">AJAX</a></li>
- <li><a href="/fr/docs/Web/JavaScript">JavaScript</a></li>
-</ul>
-
-<h2 id="Spécifications">Spécifications</h2>
+{{DefaultAPISidebar("Websockets API")}}
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("HTML WHATWG", "web-sockets.html", "WebSocket API")}}</td>
-   <td>{{Spec2("HTML WHATWG")}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><a href="https://www.w3.org/TR/websockets/">WebSockets</a></td>
-   <td>
-    <p>Candidat au statut de Recommendation</p>
-   </td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{RFC(6455, "The WebSocket Protocol")}}</td>
-   <td>IETF RFC</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+L'**API WebSocket** est une technologie évoluée qui permet d'ouvrir un canal de communication bidirectionnelle entre un navigateur (côté client) et un serveur. Avec cette API vous pouvez envoyer des messages à un serveur et recevoir ses réponses de manière événementielle sans avoir à aller consulter le serveur pour obtenir une réponse.
+
+> **Note :** Bien que les connexions WebSocket soient fonctionnellement similaires aux sockets standard de type Unix, elles ne sont pas liées.
+
+## Interfaces  
+
+- [`WebSocket`](/fr/docs/WebSockets/Writing_WebSocket_client_applications)
+  - : Interface principale pour se connecter à un serveur WebSocket. Il permet d'envoyer et de recevoir des données sur la connexion.
+- [`CloseEvent`](/fr/docs/Web/API/CloseEvent)
+  - : Evénement envoyé par l'objet WebSocket lors de la fermeture de la connexion.
+- [`MessageEvent`](/fr/docs/Web/API/MessageEvent)
+  - : Evénement envoyé par l'objet WebSocket lorsqu'un message est reçu par le serveur.
+
+## Guides
+
+- [Ecrire des applications client WebSocket](/fr/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications)
+- [Écriture de serveurs WebSocket](/fr/docs/Web/API/WebSockets_API/Writing_WebSocket_servers)
+- [Écrire un serveur WebSocket en C#](/fr/docs/Web/API/WebSockets_API/Writing_WebSocket_server)
+- [Écrire un serveur WebSocket en Java](/fr/docs/Web/API/WebSockets_API/Writing_a_WebSocket_server_in_Java)
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Outils
 
+- [HumbleNet](https://humblenet.github.io/) :Bibliothèque de réseau multiplateforme qui fonctionne dans un navigateur. Il s'agit bibliothèque écrite en C qui enveloppe WebSockets et WebRTC. Elle gomme toutes les différences qui existent entre les navigateurs et les logiciels, ce qui facilite la création d'une fonctionnalité de réseau multi-joueurs pour les jeux, par exemple,  et autres applications.
+- [µWebSockets](https://github.com/uWebSockets/uWebSockets): Déclinaison plus légère et plus performante de WebSocket et écrite en [C++11](https://isocpp.org/) et en [Node.js](https://nodejs.org/fr/).
+- [ClusteWS](https://github.com/ClusterWS/ClusterWS): Framework léger, rapide et puissant qui permet de construire des application en [Node.js](https://nodejs.org/fr/).
+- [Socket.IO](http://socket.io): API WebSocket puissante et multiplateformes en [Node.js](http://nodejs.org).
+- [SocketCluster](https://socketcluster.io/#!/): Framework open source en temps réel en [Node.js](http://nodejs.org). Il prend en charge à la fois la communication directe client-serveur et la communication de groupe via les pub/sub canaux. Il est conçu pour s'adapter facilement à n'importe quel nombre de processus/hôtes et est idéal pour construire de chat de discution.
+- [Node.js](http://nodejs.org).
+- [Total.js](https://www.totaljs.com/): FrameWork pour web application en [Node.js](http://nodejs.org).
+- [Faye](https://www.npmjs.com/package/faye-websocket): Combine WebSocket(bidirectionnelle) et EventSource(unidirectionnelle) , côté serveur et côté client en [Node.js](http://nodejs.org).
+- [SignalR](http://signalr.net/): SignalR est une nouvelle bibliothèque pour les développeurs [ASP.NET](https://dotnet.microsoft.com/apps/aspnet). Elle simplifie l'ajout des WebSockets dans les applications. SignalR utilise les canaux  de WebSockets lorsqu'elles sont disponibles,  dans le cas contraire elle utilise d'autres technos, sans modifier votre application.
+- [Caddy](https://caddyserver.com/docs/websocket): Serveur web capable de créer des WebSockets serveur/proxy(stdin/stdout, echo, cat, ...).
+- [ws](https://github.com/websockets/ws): La plus populaire des WebSockets pour client & serveur en [Node.js](http://nodejs.org).
+- [jsonrpc-bidirectional](https://github.com/bigstepinc/jsonrpc-bidirectional): Asynchronous RPC which, on a single connection, may have functions exported on the server and, and the same time, on the client (client may call server, server may also call client).
+- [cowboy](https://github.com/ninenines/cowboy): Cowboy est un petit serveur HTTP rapide et moderne pour Erlang/OTP basé sur WebSocket.
+
+## Ressources liées
+
+- [AJAX](/fr/docs/AJAX)
+- [JavaScript](/fr/docs/Web/JavaScript)
+
+## Spécifications
+
+<table class="standard-table">
+  <thead>
+    <tr>
+      <th scope="col">Spécification</th>
+      <th scope="col">Statut</th>
+      <th scope="col">Commentaires</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        {{SpecName("HTML WHATWG", "web-sockets.html", "WebSocket API")}}
+      </td>
+      <td>{{Spec2("HTML WHATWG")}}</td>
+      <td></td>
+    </tr>
+    <tr>
+      <td><a href="https://www.w3.org/TR/websockets/">WebSockets</a></td>
+      <td><p>Candidat au statut de Recommendation</p></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td>{{RFC(6455, "The WebSocket Protocol")}}</td>
+      <td>IETF RFC</td>
+      <td></td>
+    </tr>
+  </tbody>
+</table>
 
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.WebSocket")}}</p>
+{{Compat("api.WebSocket")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="http://tools.ietf.org/html/rfc6455">RFC 6455 - Le protocole WebSocket</a></li>
- <li><a href="http://www.w3.org/TR/websockets/">Les spécifications de l'API WebSocket</a></li>
- <li><a href="/fr/docs/Web/API/Server-sent_events">Server-Sent Events</a></li>
-</ul>
+- [RFC 6455 - Le protocole WebSocket](http://tools.ietf.org/html/rfc6455)
+- [Les spécifications de l'API WebSocket](http://www.w3.org/TR/websockets/)
+- [Server-Sent Events](/fr/docs/Web/API/Server-sent_events)
diff --git a/files/fr/web/api/websockets_api/writing_a_websocket_server_in_java/index.md b/files/fr/web/api/websockets_api/writing_a_websocket_server_in_java/index.md
index bf8ac63d44..76489af66b 100644
--- a/files/fr/web/api/websockets_api/writing_a_websocket_server_in_java/index.md
+++ b/files/fr/web/api/websockets_api/writing_a_websocket_server_in_java/index.md
@@ -3,29 +3,32 @@ title: Écrire un serveur WebSocket en Java
 slug: Web/API/WebSockets_API/Writing_a_WebSocket_server_in_Java
 translation_of: Web/API/WebSockets_API/Writing_a_WebSocket_server_in_Java
 ---
-<h2 id="Introduction">Introduction</h2>
+## Introduction
 
-<p>Cet exemple montre comment cérer une serveur d'API WebSocket API utilisant Java d'Oracle.</p>
+Cet exemple montre comment cérer une serveur d'API WebSocket API utilisant Java d'Oracle.
 
-<p>Bien que d'autres languages exécutés côté serveur peuvent être utilisés pour créer un serveur de WebSocket, cet exemple utilise Java d'Oracle pour simplifier le code en exemple.</p>
+Bien que d'autres languages exécutés côté serveur peuvent être utilisés pour créer un serveur de WebSocket, cet exemple utilise Java d'Oracle pour simplifier le code en exemple.
 
-<p>Ce seveur respecte la <a href="http://tools.ietf.org/html/rfc6455">RFC 6455</a>, dont il prend uniquement en charge les connexions depuis Chrome 16, Firefox 11, IE 10 et au delà.</p>
+Ce seveur respecte la [RFC 6455](http://tools.ietf.org/html/rfc6455), dont il prend uniquement en charge les connexions depuis Chrome 16, Firefox 11, IE 10 et au delà.
 
-<h2 id="Premiers_pas">Premiers pas</h2>
+## Premiers pas
 
-<p>WebSockets communique via une connexion <a href="http://en.wikipedia.org/wiki/Transmission_Control_Protocol">TCP (Transmission Control Protocol)</a>. La classe Java <a href="http://docs.oracle.com/javase/8/docs/api/java/net/ServerSocket.html">ServerSocket</a> est située dans le paquet <em>java.net</em>.</p>
+WebSockets communique via une connexion [TCP (Transmission Control Protocol)](http://en.wikipedia.org/wiki/Transmission_Control_Protocol). La classe Java [ServerSocket](http://docs.oracle.com/javase/8/docs/api/java/net/ServerSocket.html) est située dans le paquet _java.net_.
 
-<h3 id="ServerSocket">ServerSocket</h3>
+### ServerSocket
 
-<p>Constructeur :</p>
+Constructeur :
 
-<pre class="brush: java"><code>ServerSocket(int port)</code></pre>
+```java
+ServerSocket(int port)
+```
 
-<p>Lors de l'instanciation de la classe ServerSocket, celle-ci est liée au numéro de port renseigné par le paramètre <em>port</em>.</p>
+Lors de l'instanciation de la classe ServerSocket, celle-ci est liée au numéro de port renseigné par le paramètre _port_.
 
-<p>Voici comment implémenter ce que nous venons d'apprendre :</p>
+Voici comment implémenter ce que nous venons d'apprendre :
 
-<pre class="brush: java">import java.net.ServerSocket;
+```java
+import java.net.ServerSocket;
 import java.net.Socket;
 
 public class Server{
@@ -38,40 +41,44 @@ public class Server{
 
         System.out.println("Un client s’est connecté.");
     }
-}</pre>
+}
+```
 
-<h3 id="Socket">Socket</h3>
+### Socket
 
-<p>Méthodes :</p>
+Méthodes :
 
-<ul>
- <li><code>java.net.</code><a href="http://docs.oracle.com/javase/8/docs/api/java/net/Socket.html">Socket</a><code> <a href="http://docs.oracle.com/javase/8/docs/api/java/net/Socket.html#getInputStream--">getInputStream</a>()</code><br>
-  Renvoie un flux d’entrée pour ce socket.</li>
- <li><code>java.net.</code><a href="http://docs.oracle.com/javase/8/docs/api/java/net/Socket.html">Socket</a><code> <a href="http://docs.oracle.com/javase/8/docs/api/java/net/Socket.html#getOutputStream--">getOutputStream</a>()</code><br>
-  Renvoie un flux sortant pour ce socket.</li>
-</ul>
+- `java.net.`[Socket](http://docs.oracle.com/javase/8/docs/api/java/net/Socket.html)` getInputStream()`
+  Renvoie un flux d’entrée pour ce socket.
+- `java.net.`[Socket](http://docs.oracle.com/javase/8/docs/api/java/net/Socket.html)` getOutputStream()`
+  Renvoie un flux sortant pour ce socket.
 
-<h3 id="OutputStream">OutputStream</h3>
+### OutputStream
 
-<p>Méthode :</p>
+Méthode :
 
-<pre class="brush: java">write<code>(byte[] b, int off, int len)</code></pre>
+```java
+write(byte[] b, int off, int len)
+```
 
-<p>En débutant à partir de la position <em>off</em>, écrit <em><code>len</code></em> octets du tableau d'octets fourni.</p>
+En débutant à partir de la position _off_, écrit _`len`_ octets du tableau d'octets fourni.
 
-<h3 id="InputStream">InputStream</h3>
+### InputStream
 
-<p>Méthodes :</p>
+Méthodes :
 
-<pre class="brush: java">read<code>(byte[] b, int off, int len)</code></pre>
+```java
+read(byte[] b, int off, int len)
+```
 
-<p>Reads up to <em>len</em> bytes of data from the input stream into an array of bytes.<em> </em></p>
+Reads up to _len_ bytes of data from the input stream into an array of bytes.\*\*
 
-<p>Lit jusqu'à <em>len</em> octets de données depuis source d'entrée dans un tableau d'octets.</p>
+Lit jusqu'à _len_ octets de données depuis source d'entrée dans un tableau d'octets.
 
-<p>Développons notre exemple.</p>
+Développons notre exemple.
 
-<pre class="brush: java">Socket client = server.accept();
+```java
+Socket client = server.accept();
 
 System.out.println("Un client s’est connecté.");
 
@@ -79,13 +86,15 @@ InputStream in = client.getInputStream();
 
 OutputStream out = client.getOutputStream();
 
-new Scanner(in, "UTF-8").useDelimiter("\\r\\n\\r\\n").next();</pre>
+new Scanner(in, "UTF-8").useDelimiter("\\r\\n\\r\\n").next();
+```
 
-<h2 id="Établissement_d‘une_liaison_(handshaking)">Établissement d‘une liaison (handshaking)</h2>
+## Établissement d‘une liaison (handshaking)
 
-<p>Quand un client se connecte à un serveur, il envoit une requête GET pour passer à une connexion WebSocket à partir d'une simple connexion HTTP. Ceci est appelé l’établissement d’une liaison.</p>
+Quand un client se connecte à un serveur, il envoit une requête GET pour passer à une connexion WebSocket à partir d'une simple connexion HTTP. Ceci est appelé l’établissement d’une liaison.
 
-<pre class="brush: java">import java.util.Scanner;
+```java
+import java.util.Scanner;
 import java.util.regex.Matcher;
 import java.util.regex.Pattern;
 
@@ -98,20 +107,20 @@ if (get.find()) {
 
 } else {
 
-}</pre>
+}
+```
 
-<p>Créer une réponse est plus facile que de comprendre pourquoi vous devez le faire comme ça.</p>
+Créer une réponse est plus facile que de comprendre pourquoi vous devez le faire comme ça.
 
-<p>Vous devez,</p>
+Vous devez,
 
-<ol>
- <li>obtenir la valeur de la requête d’entête <em>Sec-WebSocket-Key</em> sans aucun espacement;</li>
- <li>la lier avec « 258EAFA5-E914-47DA-95CA-C5AB0DC85B11 »;</li>
- <li>en calculer les codes SHA-1 et Base64;</li>
- <li>renvoyer le résultat comme valeur de l'entête de réponse <em>Sec-WebSocket-Accept</em> qui sera une partie d’une réponse HTTP.</li>
-</ol>
+1.  obtenir la valeur de la requête d’entête _Sec-WebSocket-Key_ sans aucun espacement;
+2.  la lier avec « 258EAFA5-E914-47DA-95CA-C5AB0DC85B11 »;
+3.  en calculer les codes SHA-1 et Base64;
+4.  renvoyer le résultat comme valeur de l'entête de réponse _Sec-WebSocket-Accept_ qui sera une partie d’une réponse HTTP.
 
-<pre class="brush: java">if (get.find()) {
+```java
+if (get.find()) {
     Matcher match = Pattern.compile("Sec-WebSocket-Key: (.*)").matcher(data);
     match.find();
     byte[] response = ("HTTP/1.1 101 Switching Protocols\r\n"
@@ -129,89 +138,70 @@ if (get.find()) {
 
     out.write(response, 0, response.length);
 }
-</pre>
+```
 
-<h2 id="Décoder_les_messages">Décoder les messages</h2>
+## Décoder les messages
 
-<p>Après l’établissement réussie d’une liaison, le client peut transmettre des messages au serveur, ils seront désormais encodés.</p>
+Après l’établissement réussie d’une liaison, le client peut transmettre des messages au serveur, ils seront désormais encodés.
 
-<p>Si nous envoyons « abcdef », nous obtenons :</p>
+Si nous envoyons « abcdef », nous obtenons :
 
 <table>
- <tbody>
-  <tr>
-   <td>129</td>
-   <td>134</td>
-   <td>167</td>
-   <td>225</td>
-   <td>225</td>
-   <td>210</td>
-   <td>198</td>
-   <td>131</td>
-   <td>130</td>
-   <td>182</td>
-   <td>194</td>
-   <td>135</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <td>129</td>
+      <td>134</td>
+      <td>167</td>
+      <td>225</td>
+      <td>225</td>
+      <td>210</td>
+      <td>198</td>
+      <td>131</td>
+      <td>130</td>
+      <td>182</td>
+      <td>194</td>
+      <td>135</td>
+    </tr>
+  </tbody>
 </table>
 
-<p>- 129:</p>
+\- 129:
 
-<table>
- <thead>
-  <tr>
-   <th scope="col">FIN (est-ce la totalité du message ?)</th>
-   <th scope="col">RSV1</th>
-   <th scope="col">RSV2</th>
-   <th scope="col">RSV3</th>
-   <th scope="col">Opcode</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>1</td>
-   <td>0</td>
-   <td>0</td>
-   <td>0</td>
-   <td>0x1=0001</td>
-  </tr>
- </tbody>
-</table>
+| FIN (est-ce la totalité du message ?) | RSV1 | RSV2 | RSV3 | Opcode   |
+| ------------------------------------- | ---- | ---- | ---- | -------- |
+| 1                                     | 0    | 0    | 0    | 0x1=0001 |
 
-<p>FIN : votre message peut être transmis en plusieurs morceaux, mais restons simple pour l’instant.<br>
- Opcode <em>0x1</em> signifie que ceci est un texte. <a href="http://tools.ietf.org/html/rfc6455#section-5.2">Liste exhaustive des Opcodes</a></p>
+FIN : votre message peut être transmis en plusieurs morceaux, mais restons simple pour l’instant.
+Opcode _0x1_ signifie que ceci est un texte. [Liste exhaustive des Opcodes](http://tools.ietf.org/html/rfc6455#section-5.2)
 
-<p>- 134:</p>
+\- 134:
 
-<p>If the second byte minus 128 is between 0 and 125, this is the length of the message. If it is 126, the following 2 bytes (16-bit unsigned integer), if 127, the following 8 bytes (64-bit unsigned integer, the most significant bit MUST be 0) are the length.</p>
+If the second byte minus 128 is between 0 and 125, this is the length of the message. If it is 126, the following 2 bytes (16-bit unsigned integer), if 127, the following 8 bytes (64-bit unsigned integer, the most significant bit MUST be 0) are the length.
 
-<p>Si le second octet moins 128 est entre 0 et 125, alors il s’agit de la longueur du message. Si c’est 126, les deux octets suivants (entier non signé de 16-bits), si c’est 127, les huit octets suivants (entier non signé de 64-bis, dont le poid ford doit être 0) sont la longueur.</p>
+Si le second octet moins 128 est entre 0 et 125, alors il s’agit de la longueur du message. Si c’est 126, les deux octets suivants (entier non signé de 16-bits), si c’est 127, les huit octets suivants (entier non signé de 64-bis, dont le poid ford doit être 0) sont la longueur.
 
-<div class="note">
-<p><strong>Note :</strong> Je peux prendre 128 car le premier bit est toujours 1.</p>
-</div>
+> **Note :** Je peux prendre 128 car le premier bit est toujours 1.
 
-<p>- 167, 225, 225 et 210 sont les octets de la clef à décoder. Cela change en permanence.</p>
+\- 167, 225, 225 et 210 sont les octets de la clef à décoder. Cela change en permanence.
 
-<p>- Les octets encodés restants constituent le message.</p>
+\- Les octets encodés restants constituent le message.
 
-<h3 id="Algorithme_de_décodage">Algorithme de décodage</h3>
+### Algorithme de décodage
 
-<p>octet décodé = octet encodé XOR (position de l’octet ET LOGIQUE 0x3)th octet de la clef</p>
+octet décodé = octet encodé XOR (position de l’octet ET LOGIQUE 0x3)th octet de la clef
 
-<p>Exemple en Java :</p>
+Exemple en Java :
 
-<pre class="brush: java">byte[] decoded = new byte[6];
+```java
+byte[] decoded = new byte[6];
 byte[] encoded = new byte[] {198, 131, 130, 182, 194, 135};
 byte[] key = byte[4] {167, 225, 225, 210};
 
-for (int i = 0; i &lt; encoded.length; i++) {
-    decoded[i] = (byte)(encoded[i] ^ key[i &amp; 0x3]);
-}</pre>
+for (int i = 0; i < encoded.length; i++) {
+    decoded[i] = (byte)(encoded[i] ^ key[i & 0x3]);
+}
+```
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/WebSockets/Writing_WebSocket_servers">Écriture de serveurs WebSocket</a></li>
-</ul>
+- [Écriture de serveurs WebSocket](/fr/docs/WebSockets/Writing_WebSocket_servers)
diff --git a/files/fr/web/api/websockets_api/writing_websocket_client_applications/index.md b/files/fr/web/api/websockets_api/writing_websocket_client_applications/index.md
index d2cf5fccbf..e646af9f9b 100644
--- a/files/fr/web/api/websockets_api/writing_websocket_client_applications/index.md
+++ b/files/fr/web/api/websockets_api/writing_websocket_client_applications/index.md
@@ -3,94 +3,88 @@ title: Ecrire des applications client WebSocket
 slug: Web/API/WebSockets_API/Writing_WebSocket_client_applications
 translation_of: Web/API/WebSockets_API/Writing_WebSocket_client_applications
 ---
-<p>Les WebSockets représentent une technologie, basée sur le protocole web socket, qui permet d'établir une session de communication bilatérale entre un navigateur web et un serveur. Un navigateur web est un exemple typique de client websocket typique mais le protocole n'est  dépendant d'aucune plateforme.</p>
+Les WebSockets représentent une technologie, basée sur le protocole web socket, qui permet d'établir une session de communication bilatérale entre un navigateur web et un serveur. Un navigateur web est un exemple typique de client websocket typique mais le protocole n'est  dépendant d'aucune plateforme.
 
-<div class="note">
-  <p><strong>Note :</strong> Un exemple d'utilisation des WebSockets à travers un système de chat sera mis à disposition sous forme de code dès que nos infrastructures seront en mesure de supporter les WebSockets.</p>
-</div>
+> **Note :** Un exemple d'utilisation des WebSockets à travers un système de chat sera mis à disposition sous forme de code dès que nos infrastructures seront en mesure de supporter les WebSockets.
 
-<p>{{AvailableInWorkers}}</p>
+{{AvailableInWorkers}}
 
-<h2 id="Création_d'un_objet_WebSocket">Création d'un objet WebSocket</h2>
+## Création d'un objet WebSocket
 
-<p>Pour utiliser le protocole WebSocket, il faut créer un objet <a href="/en/WebSockets/WebSockets_reference/WebSocket"><code>WebSocket</code></a> ; celui-ci essaiera automatiquement d'ouvrir une connexion avec le server.</p>
+Pour utiliser le protocole WebSocket, il faut créer un objet [`WebSocket`](/en/WebSockets/WebSockets_reference/WebSocket) ; celui-ci essaiera automatiquement d'ouvrir une connexion avec le server.
 
-<p>Le constructeur WebSocket accepte un paramètre obligatoire et un paramètre optionnel :</p>
+Le constructeur WebSocket accepte un paramètre obligatoire et un paramètre optionnel :
 
-<pre>WebSocket WebSocket(
-  in DOMString url,
-  in optional DOMString protocols
-);
+    WebSocket WebSocket(
+      in DOMString url,
+      in optional DOMString protocols
+    );
 
-WebSocket WebSocket(
-  in DOMString url,
-  in optional DOMString[] protocols
-);
-</pre>
+    WebSocket WebSocket(
+      in DOMString url,
+      in optional DOMString[] protocols
+    );
 
-<dl>
- <dt><code>url</code></dt>
- <dd>L'URL à laquelle le client se connecte, et le serveur répond.</dd>
- <dt><code>protocols</code> {{ optional_inline() }}</dt>
- <dd>Soit une chaîne décrivant un protocole unique, soit une liste de chaînes décrivant chacune un protocole. Ces chaînes permettent d'indiquer des sous-protocoles, de façon à ce qu'un serveur puisse implémenter plusieurs sous-protocoles WebSocket (par example, on pourrait vouloir qu'un serveur soit capable de traiter différents types d'interactions en fonction du protocole spécifié). Si aucun protocole n'est spécifié, l'argument prend la valeur d'une chaîne vide.</dd>
-</dl>
+- `url`
+  - : L'URL à laquelle le client se connecte, et le serveur répond.
+- `protocols` {{ optional_inline() }}
+  - : Soit une chaîne décrivant un protocole unique, soit une liste de chaînes décrivant chacune un protocole. Ces chaînes permettent d'indiquer des sous-protocoles, de façon à ce qu'un serveur puisse implémenter plusieurs sous-protocoles WebSocket (par example, on pourrait vouloir qu'un serveur soit capable de traiter différents types d'interactions en fonction du protocole spécifié). Si aucun protocole n'est spécifié, l'argument prend la valeur d'une chaîne vide.
 
-<p>Le constructeur peut renvoyer des exceptions:</p>
+Le constructeur peut renvoyer des exceptions:
 
-<dl>
- <dt><code>SECURITY_ERR</code></dt>
- <dd>Le port sur lequel on essaie d'établir la connexion est bloqué.</dd>
-</dl>
+- `SECURITY_ERR`
+  - : Le port sur lequel on essaie d'établir la connexion est bloqué.
 
-<dl>
-</dl>
+<!---->
 
-<h3 id="Erreurs_de_connexion">Erreurs de connexion</h3>
+### Erreurs de connexion
 
-<p>Si une erreur se produit lors de la tentative de connexion, un  évènement nommé "error" est d'abord renvoyé à l'objet  <a href="/en/WebSockets/WebSockets_reference/WebSocket"><code>WebSocket</code></a> (invoquant ainsi son gestionnaire d'évènement <code>onerror</code>) suivi d'un évènement <a href="/en/WebSockets/WebSockets_reference/CloseEvent"><code>CloseEvent</code></a> (qui invoque alors son gestionnaire d'évènement <code>onclose</code>) indiquant la raison de la clôture.</p>
+Si une erreur se produit lors de la tentative de connexion, un  évènement nommé "error" est d'abord renvoyé à l'objet  [`WebSocket`](/en/WebSockets/WebSockets_reference/WebSocket) (invoquant ainsi son gestionnaire d'évènement `onerror`) suivi d'un évènement [`CloseEvent`](/en/WebSockets/WebSockets_reference/CloseEvent) (qui invoque alors son gestionnaire d'évènement `onclose`) indiquant la raison de la clôture.
 
-<p>A partir de Firefox 11, un message d'erreur descriptif est envoyé à la console de la plateforme Mozilla, et un code de fermeture tel que défini dans la <a href="http://tools.ietf.org/html/rfc6455#section-7.4">RFC 6455, Section 7.4</a> est envoyé à travers l'évènement <a href="/en/WebSockets/WebSockets_reference/CloseEvent"><code>CloseEvent</code></a>.</p>
+A partir de Firefox 11, un message d'erreur descriptif est envoyé à la console de la plateforme Mozilla, et un code de fermeture tel que défini dans la [RFC 6455, Section 7.4](http://tools.ietf.org/html/rfc6455#section-7.4) est envoyé à travers l'évènement [`CloseEvent`](/en/WebSockets/WebSockets_reference/CloseEvent).
 
-<h3 id="Exemples">Exemples</h3>
+### Exemples
 
-<p>Cet  exemple simple crée un nouvel objet WebSocket, qui se connecte au serveur à l'adresse <code>ws://www.example.com/socketserver</code>. Un protocole spécifique "protocolOne" est indiqué dans cette exemple, bien qu'il ne soit pas obligatoire.</p>
+Cet  exemple simple crée un nouvel objet WebSocket, qui se connecte au serveur à l'adresse `ws://www.example.com/socketserver`. Un protocole spécifique "protocolOne" est indiqué dans cette exemple, bien qu'il ne soit pas obligatoire.
 
-<pre class="brush: js">var exampleSocket = new WebSocket("ws://www.example.com/socketserver", "protocolOne");
-</pre>
+```js
+var exampleSocket = new WebSocket("ws://www.example.com/socketserver", "protocolOne");
+```
 
-<p>Lorsque la connexion est établie, la propriété <code>readyState</code> de l'objet <code>exampleSocket </code>prend la valeur <code>CONNECTING</code>. Sa valeur devient  <code>OPEN</code> une fois que la connexion est prête à transférer des données.</p>
+Lorsque la connexion est établie, la propriété `readyState` de l'objet `exampleSocket `prend la valeur `CONNECTING`. Sa valeur devient  `OPEN` une fois que la connexion est prête à transférer des données.
 
-<p>Pour ouvrir une connexion flexible quant aux protocoles supportés, on spécifie une liste de protocoles:</p>
+Pour ouvrir une connexion flexible quant aux protocoles supportés, on spécifie une liste de protocoles:
 
-<pre class="brush: js">var exampleSocket = new WebSocket("ws://www.example.com/socketserver", ["protocolOne", "protocolTwo"]);
-</pre>
+```js
+var exampleSocket = new WebSocket("ws://www.example.com/socketserver", ["protocolOne", "protocolTwo"]);
+```
 
-<p>Une fois la connexion établie (c'est-à-dire quand <code>readyState</code> a la valeur <code>OPEN</code>), la propriété <code>protocol</code> indique quel protocole le server a sélectionné.</p>
+Une fois la connexion établie (c'est-à-dire quand `readyState` a la valeur `OPEN`), la propriété `protocol` indique quel protocole le server a sélectionné.
 
-<p>Dans les exemples ci-dessus on a remplacé  <code>http</code> par <code>ws</code>, et de la même façon on peut remplacer <code>https</code> par  <code>wss</code> . L'établissement d'une connexion WebSocket repose sur le méchanisme HTTP Upgrade, donc la requête pour l'upgrade de protocole est implicite lorsqu'on s'adresse au server HTTP avec <code>ws://www.example.com</code> ou <code>wss://www.example.com</code>.</p>
+Dans les exemples ci-dessus on a remplacé  `http` par `ws`, et de la même façon on peut remplacer `https` par  `wss` . L'établissement d'une connexion WebSocket repose sur le méchanisme HTTP Upgrade, donc la requête pour l'upgrade de protocole est implicite lorsqu'on s'adresse au server HTTP avec `ws://www.example.com` ou `wss://www.example.com`.
 
-<h2 id="Envoi_de_données_vers_le_serveur">Envoi de données vers le serveur</h2>
+## Envoi de données vers le serveur
 
-<p>Une fois la connexion ouverte on peut commencer à tranférer des données vers le serveur en appelant la méthode  <a href="/en/WebSockets/WebSockets_reference/WebSocket#send()"><code>send()</code></a> de l'objet <code>WebSocket</code> pour chaque message que l'on veut envoyer :</p>
+Une fois la connexion ouverte on peut commencer à tranférer des données vers le serveur en appelant la méthode  [`send()`](</en/WebSockets/WebSockets_reference/WebSocket#send()>) de l'objet `WebSocket` pour chaque message que l'on veut envoyer :
 
-<p>Les données peuvent être envoyées sous forme de chaîne {{ domxref("Blob") }} ou de  <a href="/en/JavaScript_typed_arrays/ArrayBuffer"><code>ArrayBuffer</code></a>.</p>
+Les données peuvent être envoyées sous forme de chaîne {{ domxref("Blob") }} ou de  [`ArrayBuffer`](/en/JavaScript_typed_arrays/ArrayBuffer).
 
-<div class="note">
-  <p><strong>Note :</strong> Avant la version 11, Firefox supportait l'envoi de données uniquement sous forme de chaîne.</p>
-</div>
+> **Note :** Avant la version 11, Firefox supportait l'envoi de données uniquement sous forme de chaîne.
 
-<p>Comme l'établissement d'une connexion est asynchrone, et peut potentiellemet échouer, appeler la méthode <code>send()</code> juste après la création d'un objet WebSocket peut ne pas fonctionner. Il est plus sûr de définir un gestionnaire d'évènement <code>onopen</code>, et de n'essayer d'envoyer des données que lorsqu'il est appelé.</p>
+Comme l'établissement d'une connexion est asynchrone, et peut potentiellemet échouer, appeler la méthode `send()` juste après la création d'un objet WebSocket peut ne pas fonctionner. Il est plus sûr de définir un gestionnaire d'évènement `onopen`, et de n'essayer d'envoyer des données que lorsqu'il est appelé.
 
-<pre class="brush: js">exampleSocket.onopen = function (event) {
+```js
+exampleSocket.onopen = function (event) {
   exampleSocket.send("Voici un texte que le serveur attend de recevoir dès que possible !");
 };
-</pre>
+```
 
-<h3 id="Utilisation_de_JSON_pour_transmettre_des_objets">Utilisation de JSON pour transmettre des objets</h3>
+### Utilisation de JSON pour transmettre des objets
 
-<p>Il peut être utile d'utiliser <a href="/en/JSON">JSON</a> pour envoyer des données complexes au serveur. Par exemple, un programme de chat peut interagir avec un serveur en utilisant un protocole qui implémente l'échange de paquets contenant des données encapsulées en JSON:</p>
+Il peut être utile d'utiliser [JSON](/en/JSON) pour envoyer des données complexes au serveur. Par exemple, un programme de chat peut interagir avec un serveur en utilisant un protocole qui implémente l'échange de paquets contenant des données encapsulées en JSON:
 
-<pre class="brush: js">// Envoi d'un texte à tous les utilisateurs à travers le serveur
+```js
+// Envoi d'un texte à tous les utilisateurs à travers le serveur
 function sendText() {
   // Création d'un objet msg qui contient les données
   // dont le serveur a besoin pour traiter le message
@@ -109,30 +103,30 @@ function sendText() {
   // que l'utilisateur va saisir
   document.getElementById("text").value = "";
 }
-</pre>
+```
 
-<h2 id="Réception_de_données_du_serveur">Réception de données du serveur</h2>
+## Réception de données du serveur
 
-<p>WebSockets est une API orientée évènement; lorsqu'elle reçoit un message, un évènement "message" est envoyé au gestionnaire d'évènement <code>onmessage</code>. Pour écouter les données reçues, on peut écrire quelque chose comme:</p>
+WebSockets est une API orientée évènement; lorsqu'elle reçoit un message, un évènement "message" est envoyé au gestionnaire d'évènement `onmessage`. Pour écouter les données reçues, on peut écrire quelque chose comme:
 
-<pre class="brush: js">exampleSocket.onmessage = function (event) {
+```js
+exampleSocket.onmessage = function (event) {
   console.log(event.data);
 }
-</pre>
+```
 
-<h3 id="Réception_et_interprétation_d'objets_JSON">Réception et interprétation d'objets JSON</h3>
+### Réception et interprétation d'objets JSON
 
-<p>Considérons l'application de chat évoquée dans {{ anch("Utilisation de JSON pour transmettre des objets") }}. Le client peut recevoir différents types de paquets de données, tels que:</p>
+Considérons l'application de chat évoquée dans {{ anch("Utilisation de JSON pour transmettre des objets") }}. Le client peut recevoir différents types de paquets de données, tels que:
 
-<ul>
- <li>établissement d'une liaison (handshaking)</li>
- <li>message texte</li>
- <li>mise à jour de la liste d'utilisateurs</li>
-</ul>
+- établissement d'une liaison (handshaking)
+- message texte
+- mise à jour de la liste d'utilisateurs
 
-<p>Le code qui interprète ces messages entrants pourrait être:</p>
+Le code qui interprète ces messages entrants pourrait être:
 
-<pre class="brush: js">exampleSocket.onmessage = function(event) {
+```js
+exampleSocket.onmessage = function(event) {
   var f = document.getElementById("chatbox").contentDocument;
   var text = "";
   var msg = JSON.parse(event.data);
@@ -145,18 +139,18 @@ function sendText() {
       setUsername();
       break;
     case "username":
-      text = "&lt;b&gt;User &lt;em&gt;" + msg.name + "&lt;/em&gt; signed in at " + timeStr + "&lt;/b&gt;&lt;br&gt;";
+      text = "<b>User <em>" + msg.name + "</em> signed in at " + timeStr + "</b><br>";
       break;
     case "message":
-      text = "(" + timeStr + ") &lt;b&gt;" + msg.name + "&lt;/b&gt;: " + msg.text + "&lt;br&gt;";
+      text = "(" + timeStr + ") <b>" + msg.name + "</b>: " + msg.text + "<br>";
       break;
     case "rejectusername":
-      text = "&lt;b&gt;Your username has been set to &lt;em&gt;" + msg.name + "&lt;/em&gt; because the name you chose is in use.&lt;/b&gt;&lt;br&gt;"
+      text = "<b>Your username has been set to <em>" + msg.name + "</em> because the name you chose is in use.</b><br>"
       break;
     case "userlist":
       var ul = "";
-      for (i=0; i &lt; msg.users.length; i++) {
-        ul += msg.users[i] + "&lt;br&gt;";
+      for (i=0; i < msg.users.length; i++) {
+        ul += msg.users[i] + "<br>";
       }
       document.getElementById("userlistbox").innerHTML = ul;
       break;
@@ -167,25 +161,26 @@ function sendText() {
     document.getElementById("chatbox").contentWindow.scrollByPages(1);
   }
 };
-</pre>
+```
 
-<p>Ici nous utilisons <a href="/en/JavaScript/Reference/Global_Objects/JSON/parse"><code>JSON.parse()</code></a> pour convertir l'objet JSON en l'objet original, avant de l'examiner et le traiter.</p>
+Ici nous utilisons [`JSON.parse()`](/en/JavaScript/Reference/Global_Objects/JSON/parse) pour convertir l'objet JSON en l'objet original, avant de l'examiner et le traiter.
 
-<h3 id="Encodage_du_texte">Encodage du texte</h3>
+### Encodage du texte
 
-<p>Le texte reçu à travers une connexion WebSocket est encodé au format UTF-8.</p>
+Le texte reçu à travers une connexion WebSocket est encodé au format UTF-8.
 
-<p>Avant Gecko 9.0 {{ geckoRelease("9.0") }}, certains charactères spéciaux dans une chaîne UTF-8 provoquaient l'interruption de la connexion. Maintenant Gecko accepte ces caractères.</p>
+Avant Gecko 9.0 {{ geckoRelease("9.0") }}, certains charactères spéciaux dans une chaîne UTF-8 provoquaient l'interruption de la connexion. Maintenant Gecko accepte ces caractères.
 
-<h2 id="Fermeture_de_la_connexion">Fermeture de la connexion</h2>
+## Fermeture de la connexion
 
-<p>Quand on n'a plus besoin de la connexion WebSocket, on appelle la méthode <a href="/en/WebSockets/WebSockets_reference/WebSocket#close()"><code>close()</code></a> de l'objet WebSocket:</p>
+Quand on n'a plus besoin de la connexion WebSocket, on appelle la méthode [`close()`](</en/WebSockets/WebSockets_reference/WebSocket#close()>) de l'objet WebSocket:
 
-<pre class="brush: js">exampleSocket.close();
-</pre>
+```js
+exampleSocket.close();
+```
 
-<p>Il peut être utile de vérifier la valeur de l'attribut <code>bufferedAmount</code> avant de fermer la connexion, pour s'assurer qu'il ne reste pas des données qui n'ont pas été transmises.</p>
+Il peut être utile de vérifier la valeur de l'attribut `bufferedAmount` avant de fermer la connexion, pour s'assurer qu'il ne reste pas des données qui n'ont pas été transmises.
 
-<h2 id="Considérations_de_sécurité">Considérations de sécurité</h2>
+## Considérations de sécurité
 
-<p>Il est déconseillé d'utiliser les WebSockets dans un environnement mixte, c'est-à-dire qu'il ne faut pas établir de connexion Websocket non sécurisée depuis une page chargée en HTTPS, et inversement. Certains navigateurs l'interdisent explicitement, comme Firefox à partir de la version 8.</p>
+Il est déconseillé d'utiliser les WebSockets dans un environnement mixte, c'est-à-dire qu'il ne faut pas établir de connexion Websocket non sécurisée depuis une page chargée en HTTPS, et inversement. Certains navigateurs l'interdisent explicitement, comme Firefox à partir de la version 8.
diff --git a/files/fr/web/api/websockets_api/writing_websocket_servers/index.md b/files/fr/web/api/websockets_api/writing_websocket_servers/index.md
index 5cc97ce8b0..cc30b5fdca 100644
--- a/files/fr/web/api/websockets_api/writing_websocket_servers/index.md
+++ b/files/fr/web/api/websockets_api/writing_websocket_servers/index.md
@@ -3,248 +3,205 @@ title: Écriture de serveurs WebSocket
 slug: Web/API/WebSockets_API/Writing_WebSocket_servers
 translation_of: Web/API/WebSockets_API/Writing_WebSocket_servers
 ---
-<p>Un serveur WebSocket est une application TCP qui écoute sur n'importe quel port d'un serveur et suit un protocole spécifique, c'est aussi simple que cela. La création de son propre serveur TCP est quelque chose qui a tendance à effrayer alors qu'il n'est pas forcément très complexe de créer un serveur WebScoket sur la plateforme de votre choix.</p>
+Un serveur WebSocket est une application TCP qui écoute sur n'importe quel port d'un serveur et suit un protocole spécifique, c'est aussi simple que cela. La création de son propre serveur TCP est quelque chose qui a tendance à effrayer alors qu'il n'est pas forcément très complexe de créer un serveur WebScoket sur la plateforme de votre choix.
 
-<p>Un serveur WebSocket peut être écrit dans n'importe quel language de programmation qui supporte les "<a href="https://fr.wikipedia.org/wiki/Berkeley_sockets">Berkeley sockets</a>", par exemple C(++), python ou même PHP et JavaScript (avec nodejs). Ceci n'est pas un tutoriel destiné à un language particulier mais un guide aidant à l'écriture de votre propre serveur.</p>
+Un serveur WebSocket peut être écrit dans n'importe quel language de programmation qui supporte les "[Berkeley sockets](https://fr.wikipedia.org/wiki/Berkeley_sockets)", par exemple C(++), python ou même PHP et JavaScript (avec nodejs). Ceci n'est pas un tutoriel destiné à un language particulier mais un guide aidant à l'écriture de votre propre serveur.
 
-<p>Avant de débuter, vous <strong>devez</strong> connaître précisément le fonctionnement du protocole HTTP et disposer d'une certaine expérience sur celui-ci. Des connaissances sur les sockets TCP dans votre langage de développement est également précieux. Ce guide ne présente ainsi que le <em>minimum</em> des connaissances requises et non un guide ultime.</p>
+Avant de débuter, vous **devez** connaître précisément le fonctionnement du protocole HTTP et disposer d'une certaine expérience sur celui-ci. Des connaissances sur les sockets TCP dans votre langage de développement est également précieux. Ce guide ne présente ainsi que le _minimum_ des connaissances requises et non un guide ultime.
 
-<div class="note">
-<p><strong>Note :</strong> Lire la dernière spécification officielle sur les WebSockets <a href="http://datatracker.ietf.org/doc/rfc6455/?include_text=1">RFC 6455</a>. Les sections 1 et 4-7 sont particulièrement intéressantes pour ce qui nous occupe. La section 10 évoque la sécurité et doit être connue et mise en oeuvre avant d'exposer votre serveur au-delà du réseau local / lors de la mise en production.</p>
-</div>
+> **Note :** Lire la dernière spécification officielle sur les WebSockets [RFC 6455](http://datatracker.ietf.org/doc/rfc6455/?include_text=1). Les sections 1 et 4-7 sont particulièrement intéressantes pour ce qui nous occupe. La section 10 évoque la sécurité et doit être connue et mise en oeuvre avant d'exposer votre serveur au-delà du réseau local / lors de la mise en production.
 
-<p>Un serveur WebSocket est compris ici en "bas niveau" (<em>c'est-à-dire plus proche du langage machine que du langage humain</em>. Les WebSockets sont souvent séparés et spécialisés vis-à-vis de leurs homologues serveurs (pour des questions de montées en charge ou d'autres raisons), donc vous devez souvent utiliser un <a href="https://fr.wikipedia.org/wiki/Proxy_inverse">proxy inverse</a> (<em>c'est-à-dire de l'extérieur vers l'intérieur du réseau local, comme pour un serveur HTTP classique</em>) pour détecter les "poignées de mains" spécifiques au WebSocket, qui précédent l'échange et permettent d'aiguiller les clients vers le bon logiciel. Dans ce cas, vous ne devez pas ajouter à votre serveur des <em>cookies</em> et d'autres méthodes d'authentification. </p>
+Un serveur WebSocket est compris ici en "bas niveau" (_c'est-à-dire plus proche du langage machine que du langage humain_. Les WebSockets sont souvent séparés et spécialisés vis-à-vis de leurs homologues serveurs (pour des questions de montées en charge ou d'autres raisons), donc vous devez souvent utiliser un [proxy inverse](https://fr.wikipedia.org/wiki/Proxy_inverse) (_c'est-à-dire de l'extérieur vers l'intérieur du réseau local, comme pour un serveur HTTP classique_) pour détecter les "poignées de mains" spécifiques au WebSocket, qui précédent l'échange et permettent d'aiguiller les clients vers le bon logiciel. Dans ce cas, vous ne devez pas ajouter à votre serveur des *cookies* et d'autres méthodes d'authentification.
 
-<h2 id="La_poignée_de_mains_du_WebSocket">La "poignée de mains" du WebSocket</h2>
+## La "poignée de mains" du WebSocket
 
-<p>En tout premier lieu, le serveur doit écouter les connexions sockets entrantes utilisant le protocole TCP standard. Suivant votre plateforme, celui-ci peut déjà le faire pour vous. Pour l'exemple qui suit, nous prenons pour acquis que votre serveur écoute le domaine <em>exemple.com</em> sur le port 8000 et votre serveur socket répond aux requêtes de type GET sur le chemin <em>/chat</em>. </p>
+En tout premier lieu, le serveur doit écouter les connexions sockets entrantes utilisant le protocole TCP standard. Suivant votre plateforme, celui-ci peut déjà le faire pour vous. Pour l'exemple qui suit, nous prenons pour acquis que votre serveur écoute le domaine _exemple.com_ sur le port 8000 et votre serveur socket répond aux requêtes de type GET sur le chemin _/chat_.
 
-<div class="warning">
-<p><strong>Attention :</strong> Si le serveur peut écouter n'importe quel port, mais que vous décidez de ne pas utiliser un port standard (80 ou 443 pour SSL), cela peut créer en avant des problèmes avec les parefeux et/ou les proxys. De plus, gardez en mémoire que certains navigateur Web (notablement Firefox 8+), n'autorisent pas les connexions WebSocket non-SSL sur une page SSL. </p>
-</div>
+> **Attention :** Si le serveur peut écouter n'importe quel port, mais que vous décidez de ne pas utiliser un port standard (80 ou 443 pour SSL), cela peut créer en avant des problèmes avec les parefeux et/ou les proxys. De plus, gardez en mémoire que certains navigateur Web (notablement Firefox 8+), n'autorisent pas les connexions WebSocket non-SSL sur une page SSL.
 
-<p>La <em>poignée de mains</em> est la partie "Web" dans les WebSockets : c'est le pont entre le protocole HTTP et le WebSocket. Durant cette poignée, les détails (les paramètres) de la connexion sont négociés et l'une des parties peut interromptre la transaction avant la fin si l'un des termes ne lui est pas autorisé / ne lui est pas possible. Le serveur doit donc être attentif à comprendre parfaitement les demandes et attentes du client, sans quoi des procédures de sécurité seront déclenchées. </p>
+La *poignée de mains* est la partie "Web" dans les WebSockets : c'est le pont entre le protocole HTTP et le WebSocket. Durant cette poignée, les détails (les paramètres) de la connexion sont négociés et l'une des parties peut interromptre la transaction avant la fin si l'un des termes ne lui est pas autorisé / ne lui est pas possible. Le serveur doit donc être attentif à comprendre parfaitement les demandes et attentes du client, sans quoi des procédures de sécurité seront déclenchées.
 
-<h3 id="La_requête_de_poignée_de_mains_côté_client">La requête de <em>poignée de mains</em> côté client </h3>
+### La requête de _poignée de mains_ côté client 
 
-<p>Même si vous construisez votre serveur au profit des WebSockets, votre client doit tout de même démarrer un processus dit de <em>poignée de main</em>. Vous devez donc savoir comment interprêter cette requête. En premier, le <strong>client </strong>enverra tout d'abord une requête HTTP correctement formée. La requête <strong>doit </strong>être à la version 1.1 ou supérieure et la méthode <strong>doit </strong>être de type GET : </p>
+Même si vous construisez votre serveur au profit des WebSockets, votre client doit tout de même démarrer un processus dit de _poignée de main_. Vous devez donc savoir comment interprêter cette requête. En premier, le **client** enverra tout d'abord une requête HTTP correctement formée. La requête **doit** être à la version 1.1 ou supérieure et la méthode **doit** être de type GET :
 
-<pre>GET /chat HTTP/1.1
-Host: exemple.com:8000
-<strong>Upgrade: websocket</strong>
-<strong>Connection: Upgrade</strong>
-Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
-Sec-WebSocket-Version: 13
+    GET /chat HTTP/1.1
+    Host: exemple.com:8000
+    Upgrade: websocket
+    Connection: Upgrade
+    Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
+    Sec-WebSocket-Version: 13
 
-</pre>
+Le client peut solliciter des extensions de protocoles ou des sous-protocoles à cet instant ; voir [Miscellaneous](#Miscellaneous) pour les détails. En outre, des en-têtes communs tel que _User-Agent_, _Referer_, *Cookie* ou des en-têtes d'authentification peuvent être envoyés par la même requête : leur usage est laissé libre car ils ne se rapportent pas directement au WebSocket et au processus de poignée de main. A ce titre il semble préférable de les ignorer : d'ailleurs dans de nombreuses configurations communes, un proxy inverse les aura finalement déjà traitées.
 
-<p>Le client peut solliciter des extensions de protocoles ou des sous-protocoles à cet instant ; voir <a href="#Miscellaneous">Miscellaneous</a> pour les détails. En outre, des en-têtes communs tel que <em>User-Agent</em>, <em>Referer</em>, <em>Cookie</em> ou des en-têtes d'authentification peuvent être envoyés par la même requête : leur usage est laissé libre car ils ne se rapportent pas directement au WebSocket et au processus de poignée de main. A ce titre il semble préférable de les ignorer : d'ailleurs dans de nombreuses configurations communes, un proxy inverse les aura finalement déjà traitées. </p>
+Si un des entêtes n'est pas compris ou sa valeur n'est pas correcte, le serveur devrait envoyer une réponse  "[400 Bad Request](/en-US/docs/HTTP/Response_codes#400)" (_erreur 400 : la requête est incorrecte_) et clore immédiatement la connexion. Il peut par ailleurs indiquer la raison pour laquelle la poignée de mains a échoué dans le corps de réponse HTTP, mais le message peut ne jamais être affiché par le navigateur (_en somme, tout dépend du comportement du client_). Si le serveur ne comprend pas la version de WebSockets présentée, il doit envoyer dans la réponse un entête _Sec-WebSocket-Version_ correspondant à la ou les version-s supportée-s. Ici le guide explique la version 13, la plus récente à l'heure de l'écriture du tutoriel (_voir le tutoriel en version anglaise pour la date exacte ; il s'agit là d'une traduction_). Maintenant, nous allons passer à l'entête attendu : *Sec-WebSocket-Key*.
 
-<p>Si un des entêtes n'est pas compris ou sa valeur n'est pas correcte, le serveur devrait envoyer une réponse  "<a href="/en-US/docs/HTTP/Response_codes#400">400 Bad Request</a>" (<em>erreur 400 : la requête est incorrecte</em>) et clore immédiatement la connexion. Il peut par ailleurs indiquer la raison pour laquelle la poignée de mains a échoué dans le corps de réponse HTTP, mais le message peut ne jamais être affiché par le navigateur (<em>en somme, tout dépend du comportement du client</em>). Si le serveur ne comprend pas la version de WebSockets présentée, il doit envoyer dans la réponse un entête <em>Sec-WebSocket-Version</em> correspondant à la ou les version-s supportée-s. Ici le guide explique la version 13, la plus récente à l'heure de l'écriture du tutoriel (<em>voir le tutoriel en version anglaise pour la date exacte ; il s'agit là d'une traduction</em>). Maintenant, nous allons passer à l'entête attendu : <em>Sec-WebSocket-Key</em>.</p>
+> **Note :** Un grand nombre de navigateurs enverront un  [`Entête d'origine`](/en-US/docs/HTTP/Access_control_CORS#Origin). Vous pouvez alors l'utiliser pour vérifier la sécurité de la transaction (par exemple vérifier la similitude des domaines, listes blanches ou noires, etc.) et éventuellement retourner une réponse [403 Forbidden](/en-US/docs/HTTP/Response_codes#403) si l'origine ne vous plaît pas. Toutefois garder à l'esprit que cet entête peut être simulé ou trompeur (il peut être ajouté manuellement ou lors du transfert). De nombreuses applications refusent les transactions sans celui-ci.
 
-<div class="note">
-<p><strong>Note :</strong> Un grand nombre de navigateurs enverront un  <a href="/en-US/docs/HTTP/Access_control_CORS#Origin"><code>Entête d'origine</code></a>. Vous pouvez alors l'utiliser pour vérifier la sécurité de la transaction (par exemple vérifier la similitude des domaines, listes blanches ou noires, etc.) et éventuellement retourner une réponse <a href="/en-US/docs/HTTP/Response_codes#403">403 Forbidden</a> si l'origine ne vous plaît pas. Toutefois garder à l'esprit que cet entête peut être simulé ou trompeur (il peut être ajouté manuellement ou lors du transfert). De nombreuses applications refusent les transactions sans celui-ci. </p>
-</div>
+> **Note :** L'URI de la requête (`/chat `dans notre cas), n'a pas de signification particulièrement dans les spécifications en usage : elle permet simplement, par convention, de disposer d'une multitude d'applications en parallèle grâce à WebSocket. Par exemple `exemple.com/chat` peut être associée à une API/une application de dialogue multiutilisateurs lorsque `/game` invoquera son homologue pour un jeu.
 
-<div class="note">
-<p><strong>Note :</strong> L'URI de la requête (<code>/chat </code>dans notre cas), n'a pas de signification particulièrement dans les spécifications en usage : elle permet simplement, par convention, de disposer d'une multitude d'applications en parallèle grâce à WebSocket. Par exemple <code>exemple.com/chat</code> peut être associée à une API/une application de dialogue multiutilisateurs lorsque <code>/game</code> invoquera son homologue pour un jeu. </p>
-</div>
+> **Note :** [Les codes réguliers (_c-à-d défini par le protocole standard_) HTTP](/en-US/docs/HTTP/Response_codes) ne peuvent être utilisés qu'**_avant_** la poignée : ceux après la poignée, sont définis d'une manière spécifique dans la section 7.4 de la documentation sus-nommée.
 
-<div class="note">
-<p><strong>Note:</strong> <a href="/en-US/docs/HTTP/Response_codes">Les codes réguliers (<em>c-à-d défini par le protocole standard</em>) HTTP</a> ne peuvent être utilisés qu'<strong><em>avant</em></strong> la poignée : ceux après la poignée, sont définis d'une manière spécifique dans la section 7.4 de la documentation sus-nommée. </p>
-</div>
+### La réponse du serveur lors de la poignée de mains 
 
-<h3 id="La_réponse_du_serveur_lors_de_la_poignée_de_mains">La réponse du serveur lors de la poignée de mains </h3>
+Lorsqu'il reçoit la requête du client, le serveur doit envoyer une réponse correctement formée dans un format non-standard HTTP et qui ressemble au code ci-dessous. Gardez à l'esprit que chaque entête se termine par un saut de ligne : *\r\n* ; un saut de ligne doublé lors de l'envoi du dernier entête pour séparer du reste du corps (même si celui-ci est vide).
 
-<p>Lorsqu'il reçoit la requête du client, le serveur doit envoyer une réponse correctement formée dans un format non-standard HTTP et qui ressemble au code ci-dessous. Gardez à l'esprit que chaque entête se termine par un saut de ligne : <em>\r\n</em> ; un saut de ligne doublé lors de l'envoi du dernier entête pour séparer du reste du corps (même si celui-ci est vide). </p>
+    HTTP/1.1 101 Switching Protocols
+    Upgrade: websocket
+    Connection: Upgrade
+    Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
 
-<pre><strong>HTTP/1.1 101 Switching Protocols</strong>
-Upgrade: websocket
-Connection: Upgrade
-<strong>Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
+En sus, le serveur peut décider de proposer des extensions de protocoles ou des sous-protocoles à cet instant ; voir [Miscellaneous](#Miscellaneous) pour les détails. L'entête Sec-WebSocket-Accept nous intéresse ici : le serveur doit la former depuis l'entête Sec-WebSocket-Key envoyée précédemment par le client. Pour l'obtenir, vous devez concaténater (_rassembler_) la valeur de *Sec-WebSocket-Key* et "_258EAFA5-E914-47DA-95CA-C5AB0DC85B11_" (valeur fixée par défaut : c'est une "[magic string](https://en.wikipedia.org/wiki/Magic_string)") puis procéder au hash par la méthode [SHA-1](https://en.wikipedia.org/wiki/SHA-1) du résultat et retourner le format au format [base64](https://en.wikipedia.org/wiki/Base64).
 
-</strong></pre>
+> **Note :** Ce processus qui peut paraître inutilement complexe, permet de certifier que le serveur et le client sont bien sur une base WebSocket et non une requête HTTP  (qui serait alors mal interprétée).
 
-<p>En sus, le serveur peut décider de proposer des extensions de protocoles ou des sous-protocoles à cet instant ; voir <a href="#Miscellaneous">Miscellaneous</a> pour les détails. L'entête Sec-WebSocket-Accept nous intéresse ici : le serveur doit la former depuis l'entête Sec-WebSocket-Key envoyée précédemment par le client. Pour l'obtenir, vous devez concaténater (<em>rassembler</em>) la valeur de <em>Sec-WebSocket-Key</em> et "<em>258EAFA5-E914-47DA-95CA-C5AB0DC85B11</em>" (valeur fixée par défaut : c'est une "<a href="https://en.wikipedia.org/wiki/Magic_string">magic string</a>") puis procéder au hash par la méthode <a href="https://en.wikipedia.org/wiki/SHA-1">SHA-1</a> du résultat et retourner le format au format <a href="https://en.wikipedia.org/wiki/Base64">base64</a>. </p>
+Ainsi si la clé (la valeur de l'entête du client) était "`dGhlIHNhbXBsZSBub25jZQ==`", le retour (_Accept \* dans la version d'origine du tutoriel_) sera : "`s3pPLMBiTxaQ9kYGzzhZRbK+xOo=`". Une fois que le serveur a envoyé les entêtes attendues, alors la poignée de mains est considérée comme effectuée et vous pouvez débuter l'échange de données !
 
-<div class="note">
-<p><strong>Note :</strong> Ce processus qui peut paraître inutilement complexe, permet de certifier que le serveur et le client sont bien sur une base WebSocket et non une requête HTTP  (qui serait alors mal interprétée). </p>
-</div>
+> **Note :** Le serveur peut envoyer à ce moment, d'autres entêtes comme par exemple Set-Cookie, ou demander une authenficiation ou encore une redirection via les codes standards HTTP et ce **\*avant** \*la fin du processus de poignée de main.
 
-<p>Ainsi si la clé (la valeur de l'entête du client) était "<code>dGhlIHNhbXBsZSBub25jZQ==</code>", le retour (<em>Accept * dans la version d'origine du tutoriel</em>) sera : "<code>s3pPLMBiTxaQ9kYGzzhZRbK+xOo=</code>". Une fois que le serveur a envoyé les entêtes attendues, alors la poignée de mains est considérée comme effectuée et vous pouvez débuter l'échange de données ! </p>
+### Suivre les clients confirmés 
 
-<div class="note">
-<p><strong>Note :</strong> Le serveur peut envoyer à ce moment, d'autres entêtes comme par exemple Set-Cookie, ou demander une authenficiation ou encore une redirection via les codes standards HTTP et ce <em><strong>avant </strong></em>la fin du processus de poignée de main. </p>
-</div>
+Cela ne concerne pas directement le protocole WebSocket, mais mérite d'être mentionné maintenant : votre serveur pourra suivre le socket client : il ne faut donc pas tenter une poignée de mains supplémentaire avec un client déjà confirmé. Un même client avec la même IP pourrait alors se connecter à de multiples reprises, mais être finalement rejeté et dénié par le serveur si les tentatives sont trop nombreuses selon les règles pouvant être édictées pour éviter les attaques dites de [déni de service](https://en.wikipedia.org/wiki/Denial_of_service).
 
-<h3 id="Suivre_les_clients_confirmés">Suivre les clients confirmés </h3>
+## L'échange de trames de données 
 
-<p>Cela ne concerne pas directement le protocole WebSocket, mais mérite d'être mentionné maintenant : votre serveur pourra suivre le socket client : il ne faut donc pas tenter une poignée de mains supplémentaire avec un client déjà confirmé. Un même client avec la même IP pourrait alors se connecter à de multiples reprises, mais être finalement rejeté et dénié par le serveur si les tentatives sont trop nombreuses selon les règles pouvant être édictées pour éviter les attaques dites de <a href="https://en.wikipedia.org/wiki/Denial_of_service">déni de service</a>. </p>
+Le client ou le serveur peuvent choisir d'envoyer un message à n'importe quel moment à partir de la fin du processus de poignée de mains : c'est la magie des WebSockets (une connexion permanente). Cependant, l'extraction d'informations à partir des trames de données n'est pas une expérience si... magique. Bien que toutes les trames suivent un même format spécifique, les données allant du client vers le serveur sont masquées en utilisant le [cryptage XOR](https://en.wikipedia.org/wiki/XOR_cipher) (avec une clé de 32 bits). L'article 5 de la spécification décrit en détail ce processus.
 
-<h2 id="L'échange_de_trames_de_données">L'échange de trames de données </h2>
+### Format
 
-<p>Le client ou le serveur peuvent choisir d'envoyer un message à n'importe quel moment à partir de la fin du processus de poignée de mains : c'est la magie des WebSockets (une connexion permanente). Cependant, l'extraction d'informations à partir des trames de données n'est pas une expérience si... magique. Bien que toutes les trames suivent un même format spécifique, les données allant du client vers le serveur sont masquées en utilisant le <a href="https://en.wikipedia.org/wiki/XOR_cipher">cryptage XOR</a> (avec une clé de 32 bits). L'article 5 de la spécification décrit en détail ce processus. </p>
+> **Attention :** Dans cette partie, `payload `équivaut en bon français à _charge utile_. C'est-à-dire les données qui ne font pas partie du fonctionnement de la trame mais de l'échange entre le serveur et le client. Ainsi j'ai traduit `payload data comme des données utiles. `
 
-<h3 id="Format">Format</h3>
+Chaque trame (dans un sens ou dans un autre) suit le schéma suivant :
 
-<div class="warning">
-<p><strong>Attention :</strong> Dans cette partie, <code>payload </code>équivaut en bon français à <em>charge utile</em>. C'est-à-dire les données qui ne font pas partie du fonctionnement de la trame mais de l'échange entre le serveur et le client. Ainsi j'ai traduit <code>payload data comme des <em>données utiles. </em></code></p>
-</div>
+     0               1               2               3
+     0 1 2 3 4 5 6 7 0 1 2 3 4 5 6 7 0 1 2 3 4 5 6 7 0 1 2 3 4 5 6 7
+    +-+-+-+-+-------+-+-------------+-------------------------------+
+    |F|R|R|R| opcode|M| Payload len |    Extended payload length    |
+    |I|S|S|S|  (4)  |A|     (7)     |             (16/64)           |
+    |N|V|V|V|       |S|             |   (if payload len==126/127)   |
+    | |1|2|3|       |K|             |                               |
+    +-+-+-+-+-------+-+-------------+ - - - - - - - - - - - - - - - +
+     4               5               6               7
+    + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
+    |     Extended payload length continued, if payload len == 127  |
+    + - - - - - - - - - - - - - - - +-------------------------------+
+     8               9               10              11
+    + - - - - - - - - - - - - - - - +-------------------------------+
+    |                               |Masking-key, if MASK set to 1  |
+    +-------------------------------+-------------------------------+
+     12              13              14              15
+    +-------------------------------+-------------------------------+
+    | Masking-key (continued)       |          Payload Data         |
+    +-------------------------------- - - - - - - - - - - - - - - - +
+    :                     Payload Data continued ...                :
+    + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
+    |                     Payload Data continued ...                |
+    +---------------------------------------------------------------+
 
-<p>Chaque trame (dans un sens ou dans un autre) suit le schéma suivant : </p>
+RSV1-3 peuvent être ignorés, ils concernent les extensions.
 
-<pre> <strong>0</strong>               <strong>1</strong>               <strong>2</strong>               3
- 0 1 2 3 4 5 6 7 0 1 2 3 4 5 6 7 0 1 2 3 4 5 6 7 0 1 2 3 4 5 6 7
-+-+-+-+-+-------+-+-------------+-------------------------------+
-|F|R|R|R| opcode|M| Payload len |    Extended payload length    |
-|I|S|S|S|  (4)  |A|     (7)     |             (16/64)           |
-|N|V|V|V|       |S|             |   (if payload len==126/127)   |
-| |1|2|3|       |K|             |                               |
-+-+-+-+-+-------+-+-------------+ - - - - - - - - - - - - - - - +
- 4               5               6               7
-+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
-|     Extended payload length continued, if payload len == 127  |
-+ - - - - - - - - - - - - - - - +-------------------------------+
- 8               9               <strong>10</strong>              11
-+ - - - - - - - - - - - - - - - +-------------------------------+
-|                               |Masking-key, if MASK set to 1  |
-+-------------------------------+-------------------------------+
- 12              13              <strong>14</strong>              15
-+-------------------------------+-------------------------------+
-| Masking-key (continued)       |          Payload Data         |
-+-------------------------------- - - - - - - - - - - - - - - - +
-:                     Payload Data continued ...                :
-+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
-|                     Payload Data continued ...                |
-+---------------------------------------------------------------+</pre>
+Le masquage de bits indique simplement si le message a été codé. Les messages du client doivent être masquée, de sorte que votre serveur doit attendre qu'il soit à 1. (_l'article 5.1 de la spécification prévoit que votre serveur doit se déconnecter d'un client si celui-ci envoie un message non masqué_). Lors de l'envoi d'une trame au client, ne masquez pas et ne réglez pas le bit de masque - cela sera expliqué plus tard.
 
-<p>RSV1-3 peuvent être ignorés, ils concernent les extensions. </p>
+Note: Vous devez masquer les messages même lorsque vous utilisez un socket sécurisé.
 
-<p>Le masquage de bits indique simplement si le message a été codé. Les messages du client doivent être masquée, de sorte que votre serveur doit attendre qu'il soit à 1. (<em>l'article 5.1 de la spécification prévoit que votre serveur doit se déconnecter d'un client si celui-ci envoie un message non masqué</em>). Lors de l'envoi d'une trame au client, ne masquez pas et ne réglez pas le bit de masque - cela sera expliqué plus tard.</p>
+Le champ `opcode` définit comment est interpêtée la _charge utile_ (`payload data`) : ainsi `0x0` indique la consigne "continuer", `0x1` indique du texte (qui est systématiquement encodé en UTF-8), `0x2` pour des données binaires, et d'autres "codes de contrôle" qui seront évoqués plus tard. Dans cette version des WebSockets, `0x3` à 0x7 et `0xB` à `0xF` n'ont pas de significations particulières.
 
-<p>Note: Vous devez masquer les messages même lorsque vous utilisez un socket sécurisé.</p>
+Le bit FIN indique si c'est le dernier message de la série \[_NDT : pour la concaténation, pas la fin de la connexion elle-même_]. S'il est à 0, alors le serveur doit attendre encore une ou plusieurs parties. Sinon le message est considéré comme complet.
 
-<p>Le champ <code>opcode</code> définit comment est interpêtée la <em>charge utile</em> (<code>payload data</code>) : ainsi <code>0x0</code> indique la consigne "continuer", <code>0x1</code> indique du texte (qui est systématiquement encodé en UTF-8), <code>0x2</code> pour des données binaires, et d'autres "codes de contrôle" qui seront évoqués plus tard. Dans cette version des WebSockets, <code>0x3</code> à 0x7 et <code>0xB</code> à <code>0xF</code> n'ont pas de significations particulières. </p>
+### Connaître la taille des *données utiles* 
 
-<p>Le bit FIN indique si c'est le dernier message de la série [<em>NDT : pour la concaténation, pas la fin de la connexion elle-même</em>]. S'il est à 0, alors le serveur doit attendre encore une ou plusieurs parties. Sinon le message est considéré comme complet. </p>
+Pour (pouvoir) lire les _données utiles_, vous devez savoir quand arrêter la lecture dans le flux des trames entrantes vers le serveur. C'est pourquoi il est important de connaître la taille des _données utiles_. Et malheureusement ce n'est pas toujours simple. Voici quelques étapes essentielles à connaître :
 
-<h3 id="Connaître_la_taille_des_données_utiles">Connaître la taille des <em>données utiles </em></h3>
+1.  (_étape 1_) Lire tout d'abord les bits 9 à 15 (inclu) et les interprêter comme un entier non-signé. S'il équivaut à 125 ou moins, alors il correspond à la taille totale de la charge utile.
+    S'il vaut à 126, allez à l'étape 2 ou sinon, s'il vaut 127, allez à l'étape 3.
+2.  (_étape 2_) Lire les 16 bits supplémentaires et les interprêter comme précédent (entier non-signé). Vous avez alors la taille des données utiles.
+3.  (_étape 3_) Lire les 64 bits supplémentaires et les interprêter comme précédent (entier non-signé). Vous avez alors la taille des données utiles. Attention, le bit le plus significatif doit rester à 0.
 
-<p>Pour (pouvoir) lire les <em>données utiles</em>, vous devez savoir quand arrêter la lecture dans le flux des trames entrantes vers le serveur. C'est pourquoi il est important de connaître la taille des <em>données utiles</em>. Et malheureusement ce n'est pas toujours simple. Voici quelques étapes essentielles à connaître : </p>
+### Lire et démasquer les données 
 
-<ol>
- <li>(<em>étape 1</em>) Lire tout d'abord les bits 9 à 15 (inclu) et les interprêter comme un entier non-signé. S'il équivaut à 125 ou moins, alors il correspond à la taille totale de la charge utile.<br>
-  S'il vaut à 126, allez à l'étape 2 ou sinon, s'il vaut 127, allez à l'étape 3. </li>
- <li>(<em>étape 2</em>) Lire les 16 bits supplémentaires et les interprêter comme précédent (entier non-signé). Vous avez alors la taille des données utiles. </li>
- <li>(<em>étape 3</em>) Lire les 64 bits supplémentaires et les interprêter comme précédent (entier non-signé). Vous avez alors la taille des données utiles. Attention, le bit le plus significatif doit rester à 0.</li>
-</ol>
+Si le bit MASK a été fixé (et il devrait l'être, pour les messages client-serveur), vous devez lire les 4 prochains octets (32 bits) : ils sont la clé de masquage. Une fois la longueur de charge utile connue et la clé de masquage décodée, vous pouvez poursuivre la lecture des autres bits comme étant les données utiles masquées. Par convention pour le reste du paragraphe, appelons-les _données encodées_, et la clé *masque*. Pour décoder les données, bouclez les octets du texte reçu en XOR avec l'octet du (_i modulo 4_) ième octet du *masque*. En voici le pseudo-code (_JavaScript valide_) :
 
-<h3 id="Lire_et_démasquer_les_données">Lire et démasquer les données </h3>
+    var DECODED = "";
+    for (var i = 0; i < ENCODED.length; i++) {
+        DECODED[i] = ENCODED[i] ^ MASK[i % 4];
+    }
 
-<p>Si le bit MASK a été fixé (et il devrait l'être, pour les messages client-serveur), vous devez lire les 4 prochains octets (32 bits) : ils sont la clé de masquage. Une fois la longueur de charge utile connue et la clé de masquage décodée, vous pouvez poursuivre la lecture des autres bits comme étant les données utiles masquées. Par convention pour le reste du paragraphe, appelons-les <em>données encodées</em>, et la clé <em>masque</em>. Pour décoder les données, bouclez les octets du texte reçu en XOR avec l'octet du (<em>i modulo 4</em>) ième octet du <em>masque</em>. En voici le pseudo-code (<em>JavaScript valide</em>) : </p>
+> **Note :** Ici la variable `DECODED` correspond aux données utiles à votre application - en fonction de l'utilisation ou non d'un sous-protocole (_si c'est `json`, vous devez encore décoder les données utiles reçues avec le parseur JSON_).
 
-<pre>var DECODED = "";
-for (var i = 0; i &lt; ENCODED.length; i++) {
-    DECODED[i] = ENCODED[i] ^ MASK[i % 4];
-}</pre>
+### La fragmentation des messages 
 
-<div class="note">
-<p><strong>Note :</strong> Ici la variable <code>DECODED</code> correspond aux données utiles à votre application - en fonction de l'utilisation ou non d'un sous-protocole (<em>si c'est <code>json</code>, vous devez encore décoder les données utiles reçues avec le parseur JSON</em>). </p>
-</div>
+Les champs FIN et opcodes fonctionnent ensemble pour envoyer un message découpé en une multitude de trames. C'est ce que l'on appele la _fragmentation des messages_. La fragmentation est seulement possible avec les opcodes de `0x0 `à `0x2`.
 
-<h3 id="La_fragmentation_des_messages">La fragmentation des messages </h3>
+Souvenez-vous de l'intérêt de l'opcode et ce qu'il implique dans l'échange des trames. Pour _0x1_ c'est du texte, pour _0x2_ des données binaires, etc. Toutefois pour _0x0_, la frame est dite "continue" (elle s'ajoute à la précédente). En voici un exemple plus clair, où il y a en réalité deux textes de message (sur 4 trames différentes) :
 
-<p>Les champs FIN et opcodes fonctionnent ensemble pour envoyer un message découpé en une multitude de trames. C'est ce que l'on appele la <em>fragmentation des messages</em>. La fragmentation est seulement possible avec les opcodes de <code>0x0 </code>à <code>0x2</code>. </p>
+    Client: FIN=1, opcode=0x1, msg="hello"
+    Server: (process complete message immediately) Hi.
+    Client: FIN=0, opcode=0x1, msg="and a"
+    Server: (listening, new message containing text started)
+    Client: FIN=0, opcode=0x0, msg="happy new"
+    Server: (listening, payload concatenated to previous message)
+    Client: FIN=1, opcode=0x0, msg="year!"
+    Server: (process complete message) Happy new year to you too!
 
-<p>Souvenez-vous de l'intérêt de l'opcode et ce qu'il implique dans l'échange des trames. Pour <em>0x1 </em>c'est du texte, pour <em>0x2 </em>des données binaires, etc. Toutefois pour <em>0x0</em>, la frame est dite "continue" (elle s'ajoute à la précédente). En voici un exemple plus clair, où il y a en réalité deux textes de message (sur 4 trames différentes) : </p>
+La première trame dispose d'un message en entier (FIN = 1 et optcode est différent de 0x0) : le serveur peut traiter la requête reçue et y répondre. A partir de la seconde trame et pour les deux suivantes (soit trois trames), l'opcode à 0x1 puis 0x0 signifie qu'il s'agit d'un texte suivi du reste du contenu (0x1 = texte ; 0x0 = la suite). La 3e trame à FIN = 1 indique la fin de la requête. 
+Voir la [section 5.4](http://tools.ietf.org/html/rfc6455#section-5.4) de la spécification pour les détails de cette partie.
 
-<pre><strong>Client:</strong> FIN=1, opcode=0x1, msg="hello"
-<strong>Server:</strong> <em>(process complete message immediately) </em>Hi.
-<strong>Client:</strong> FIN=0, opcode=0x1, msg="and a"
-<strong>Server:</strong> <em>(listening, new message containing text started)</em>
-<strong>Client:</strong> FIN=0, opcode=0x0, msg="happy new"
-<strong>Server:</strong> <em>(listening, payload concatenated to previous message)</em>
-<strong>Client:</strong> FIN=1, opcode=0x0, msg="year!"
-<strong>Server:</strong> <em>(process complete message) </em>Happy new year to you too!</pre>
+## Pings-Pongs : le "coeur" des WebSockets
 
-<p>La première trame dispose d'un message en entier (FIN = 1 et optcode est différent de 0x0) : le serveur peut traiter la requête reçue et y répondre. A partir de la seconde trame et pour les deux suivantes (soit trois trames), l'opcode à 0x1 puis 0x0 signifie qu'il s'agit d'un texte suivi du reste du contenu (0x1 = texte ; 0x0 = la suite). La 3e trame à FIN = 1 indique la fin de la requête. <br>
- Voir la <a href="http://tools.ietf.org/html/rfc6455#section-5.4">section 5.4</a> de la spécification pour les détails de cette partie. </p>
+A n'importe quel moment après le processus de poignée de mains, le client ou le serveur peut choisir d'envoyer un _ping_ à l'autre partie. Lorsqu'il est reçu, l'autre partie doit renvoyer dès possible un _pong_. Cette pratique permet de vérifier et de maintenir la connexion avec le client par exemple.
 
-<h2 id="Pings-Pongs_le_coeur_des_WebSockets">Pings-Pongs : le "coeur" des WebSockets</h2>
+Le _ping_ ou le _pong_ sont des trames classiques dites **de contrôle**. Les _pings_ disposent d'un opcode à `0x9` et les _pongs_ à `0xA`. Lorsqu'un _ping_ est envoyé, le _pong_ doit disposer de la même donnée utile en réponse que le ping (et d'une taille maximum autorisé de 125). Le _pong_ seul (c-à-d sans _ping_) est ignoré.
 
-<p>A n'importe quel moment après le processus de poignée de mains, le client ou le serveur peut choisir d'envoyer un <em>ping </em>à l'autre partie. Lorsqu'il est reçu, l'autre partie doit renvoyer dès possible un <em>pong</em>. Cette pratique permet de vérifier et de maintenir la connexion avec le client par exemple. </p>
+> **Note :** Lorsque plusieurs pings sont envoyés à la suite, un **seul** pong suffit en réponse (_le plus récent pour la donnée utile renvoyée_).
 
-<p>Le <em>ping </em>ou le <em>pong </em>sont des trames classiques dites <strong>de contrôle</strong>. Les <em>pings </em>disposent d'un opcode à <code>0x9</code> et les <em>pongs </em>à <code>0xA</code>. Lorsqu'un <em>ping </em>est envoyé, le <em>pong </em>doit disposer de la même donnée utile en réponse que le ping (et d'une taille maximum autorisé de 125). Le <em>pong </em>seul (c-à-d sans <em>ping</em>) est ignoré. </p>
+## Clore la connexion 
 
-<div class="note">
-<p><strong>Note :</strong> Lorsque plusieurs pings sont envoyés à la suite, un <strong>seul </strong>pong suffit en réponse (<em>le plus récent pour la donnée utile renvoyée</em>). </p>
-</div>
+La connexion peut être close à l'initiative du client ou du serveur grâce à l'envoi d'une trame de contrôle contenant des données spécifiques permettant d'interrompre la poignée de main (de lever définitivement le masque pour être plus précis ; voir la [section 5.5.1](http://tools.ietf.org/html/rfc6455#section-5.5.1)). Dès la réception de la trame, le récepteur envoit une trame spécifique de fermeture en retour (pour signifier la bonne compréhension de la fin de connexion). C'est l'émetteur à l'origine de la fermeture qui doit clore la connexion ; toutes les données supplémentaires sont éliminés / ignorés.
 
-<h2 id="Clore_la_connexion">Clore la connexion </h2>
+## Diverses informations utiles
 
-<p>La connexion peut être close à l'initiative du client ou du serveur grâce à l'envoi d'une trame de contrôle contenant des données spécifiques permettant d'interrompre la poignée de main (de lever définitivement le masque pour être plus précis ; voir la <a href="http://tools.ietf.org/html/rfc6455#section-5.5.1">section 5.5.1</a>). Dès la réception de la trame, le récepteur envoit une trame spécifique de fermeture en retour (pour signifier la bonne compréhension de la fin de connexion). C'est l'émetteur à l'origine de la fermeture qui doit clore la connexion ; toutes les données supplémentaires sont éliminés / ignorés. </p>
+> **Note :** L'ensemble des codes, extensions et sous-protocoles liés aux WebSocket sont enregistrés dans le (registre) [IANA WebSocket Protocol Registry](http://www.iana.org/assignments/websocket/websocket.xml).
 
-<h2 id="Diverses_informations_utiles">Diverses informations utiles</h2>
+Les extensions et sous-protocoles des WebSockets sont négociés durant [l'échange des entêtes de la poignée de mains](#PoignéeDeMain). Si l'on pourrait croire qu'extensions et sous-protocles sont finalement la même chose, il n'en est rien : **le contrôle des extensions agit sur les trames** ce qui modifie la charge utile ; **alors que les sous-protocoles modifient uniquement la charge utile,** et rien d'autre. Les extensions sont optionnelles et généralisées (par exemple pour la compression des données) ; les sous-protocoles sont souvent obligatoires et ciblés (par exemple dans le cadre d'une application de chat ou d'un jeu MMORPG).
 
-<div class="note">
-<p><strong>Note :</strong> L'ensemble des codes, extensions et sous-protocoles liés aux WebSocket sont enregistrés dans le (registre) <a href="http://www.iana.org/assignments/websocket/websocket.xml">IANA WebSocket Protocol Registry</a>.</p>
-</div>
+> **Attention :** Les sous-extensions ou les sous-protocoles ne sont pas obligatoires pour l'échange de données par WebSockets ; mais l'esprit développé ici est de rendre soit plus efficace ou sécurisée la transmission (l'esprit d'une extension) ; soit de délimiter et de normaliser le contenu de l'échange (l'esprit d'un sous-protocole ; qui étend donc le protocole par défaut des WebSockets qu'est l'échange de texte simple au format UTF-8).
 
-<p>Les extensions et sous-protocoles des WebSockets sont négociés durant <a href="#PoignéeDeMain">l'échange des entêtes de la poignée de mains</a>. Si l'on pourrait croire qu'extensions et sous-protocles sont finalement la même chose, il n'en est rien : <strong>le contrôle des extensions agit sur les trames</strong> ce qui modifie la charge utile ; <strong>alors que les sous-protocoles modifient uniquement la charge utile,</strong> et rien d'autre. Les extensions sont optionnelles et généralisées (par exemple pour la compression des données) ; les sous-protocoles sont souvent obligatoires et ciblés (par exemple dans le cadre d'une application de chat ou d'un jeu MMORPG). </p>
+### Les extensions
 
-<div class="warning">
-<p><strong>Attention :</strong> Les sous-extensions ou les sous-protocoles ne sont pas obligatoires pour l'échange de données par WebSockets ; mais l'esprit développé ici est de rendre soit plus efficace ou sécurisée la transmission (l'esprit d'une extension) ; soit de délimiter et de normaliser le contenu de l'échange (l'esprit d'un sous-protocole ; qui étend donc le protocole par défaut des WebSockets qu'est l'échange de texte simple au format UTF-8). </p>
-</div>
+L'idée des extensions pourrait être, par exemple, la compression d'un fichier avant de l'envoyer par courriel / email à quelqu'un : les données transférées ne changent pas de contenu, mais leur format oui (et leur taille aussi...). Ce n'est donc pas le format du contenu qui change que le mode transmission - c'est le principe des extensions en WebSockets, dont le principe de base est d'être un protocole simple d'échange de données.
 
-<h3 id="Les_extensions">Les extensions</h3>
+> **Note :** Les extensions sont présentées et expliquées dans les sections 5.8, 9, 11.3.2, and 11.4 de la documentation sus-nommées.
 
-<p>L'idée des extensions pourrait être, par exemple, la compression d'un fichier avant de l'envoyer par courriel / email à quelqu'un : les données transférées ne changent pas de contenu, mais leur format oui (et leur taille aussi...). Ce n'est donc pas le format du contenu qui change que le mode transmission - c'est le principe des extensions en WebSockets, dont le principe de base est d'être un protocole simple d'échange de données. </p>
+### Les sous-protocoles 
 
-<div class="note">
-<p><strong>Note :</strong> Les extensions sont présentées et expliquées dans les sections 5.8, 9, 11.3.2, and 11.4 de la documentation sus-nommées.</p>
-</div>
+Les sous-protocoles sont à comparer à [un schéma XML](https://en.wikipedia.org/wiki/XML_schema) ou [une déclaration de DocType](https://en.wikipedia.org/wiki/Document_Type_Definition). Ainsi vous pouvez utiliser seulement du XML et sa syntaxe et, imposer par le biais des sous-protocoles, son utilisation durant l'échange WebSocket. C'est l'intérêt de ces sous-protocoles : établir une structure définie (_et intangible : le client se voit imposer la mise en oeuvre par le serveur_), bien que les deux doivent l'accepter pour communiquer ensemble.
 
-<h3 id="Les_sous-protocoles">Les sous-protocoles </h3>
+> **Note :** Les sous-protocoles sont expliqués dans les sections 1.9, 4.2, 11.3.4, and 11.5 de la documentation sus-nommés.
 
-<p>Les sous-protocoles sont à comparer à <a href="https://en.wikipedia.org/wiki/XML_schema">un schéma XML</a> ou <a href="https://en.wikipedia.org/wiki/Document_Type_Definition">une déclaration de DocType</a>. Ainsi vous pouvez utiliser seulement du XML et sa syntaxe et, imposer par le biais des sous-protocoles, son utilisation durant l'échange WebSocket. C'est l'intérêt de ces sous-protocoles : établir une structure définie (<em>et intangible : le client se voit imposer la mise en oeuvre par le serveur</em>), bien que les deux doivent l'accepter pour communiquer ensemble. </p>
+Exemple : un client souhaite demander un sous-protocole spécifique. Pour se faire, il envoie dans les entêtes d'origine du processus de poignées de mains :
 
-<div class="note">
-<p><strong>Note :</strong> Les sous-protocoles sont expliqués dans les sections 1.9, 4.2, 11.3.4, and 11.5 de la documentation sus-nommés. </p>
-</div>
+    GET /chat HTTP/1.1
+    ...
+    Sec-WebSocket-Protocol: soap, wamp
 
-<p>Exemple : un client souhaite demander un sous-protocole spécifique. Pour se faire, il envoie dans les entêtes d'origine du processus de poignées de mains : </p>
+Ou son équivalent :
 
-<pre>GET /chat HTTP/1.1
-...
-Sec-WebSocket-Protocol: soap, wamp
-</pre>
+    ...
+    Sec-WebSocket-Protocol: soap
+    Sec-WebSocket-Protocol: wamp
 
-<p>Ou son équivalent : </p>
+Le serveur doit désormais choisir l'un des protocoles suggérés par le client et qu'il peut prendre en charge. S'il peut en prendre plus d'un, le premier envoyé par le client sera privilégié. Dans notre exemple, le client envoit `soap `et `wamp`, le serveur qui supporte les deux enverra donc :
 
-<pre>...
-Sec-WebSocket-Protocol: soap
-Sec-WebSocket-Protocol: wamp
-</pre>
+    Sec-WebSocket-Protocol: soap
 
-<p>Le serveur doit désormais choisir l'un des protocoles suggérés par le client et qu'il peut prendre en charge. S'il peut en prendre plus d'un, le premier envoyé par le client sera privilégié. Dans notre exemple, le client envoit <code>soap </code>et <code>wamp</code>, le serveur qui supporte les deux enverra donc : </p>
+> **Attention :** Le serveur ne peut (ne doit) envoyer plus d'un entête `Sec-Websocket-Protocol`. **S'il n'en supporte aucun, il ne doit pas renvoyer l'entête `Sec-WebSocket-Protocol` (l'entête vide n'est pas correct).** Le client peut alors interrompre la connexion s'il n'a pas le sous-protocole qu'il souhaite (ou qu'il supporte).
 
-<pre>Sec-WebSocket-Protocol: soap
-</pre>
+Si vous souhaitez que votre serveur puisse supporter certains sous-protocoles, vous pourriez avoir besoin d'une application ou de scripts supplémentaires sur le serveur. Imaginons par exemple que vous utilisiez le sous-protocole json - où toutes les données échangées par WebSockets sont donc formatés suivant le format [JSON](https://fr.wikipedia.org/wiki/JavaScript_Object_Notation). Si le client sollicite ce sous-protocole et que le serveur souhaite l'accepter, vous **devez disposer** d'un parseur (d'un décodeur) JSON et décoder les données par celui-ci.
 
-<div class="warning">
-<p><strong>Attention :</strong> Le serveur ne peut (ne doit) envoyer plus d'un entête <code>Sec-Websocket-Protocol</code>. <strong>S'il n'en supporte aucun, il ne doit pas renvoyer l'entête <code>Sec-WebSocket-Protocol</code> (l'entête vide n'est pas correct). </strong>Le client peut alors interrompre la connexion s'il n'a pas le sous-protocole qu'il souhaite (ou qu'il supporte). </p>
-</div>
+> **Note :** Pour éviter des conflits d'espaces de noms, il est recommandé d'utiliser le sous-protocole comme un sous-domaine de celui utilisé. Par exemple si vous utilisez un sous-protocole propriétaire qui utilise un format d'échange de données non-standard pour une application de _chat_ sur le domaine _exemple.com_, vous devrirez utiliser : `Sec-WebSocket-Protocol: chat.exemple.com`. S'il y a différentes versions possibles, modifiez le chemin pour faire correspondre le path à votre version comme ceci : `chat.exemple.com/2.0`. Notez que ce n'est pas obligatoire, c'est une convention d'écriture optionnel et qui peut être utilisée d'une toute autre façon.
 
-<p>Si vous souhaitez que votre serveur puisse supporter certains sous-protocoles, vous pourriez avoir besoin d'une application ou de scripts supplémentaires sur le serveur. Imaginons par exemple que vous utilisiez le sous-protocole json - où toutes les données échangées par WebSockets sont donc formatés suivant le format <a href="https://fr.wikipedia.org/wiki/JavaScript_Object_Notation">JSON</a>. Si le client sollicite ce sous-protocole et que le serveur souhaite l'accepter, vous <strong>devez disposer</strong> d'un parseur (d'un décodeur) JSON et décoder les données par celui-ci. </p>
+## Contenus associés
 
-<div class="note">
-<p><strong>Note :</strong> Pour éviter des conflits d'espaces de noms, il est recommandé d'utiliser le sous-protocole comme un sous-domaine de celui utilisé. Par exemple si vous utilisez un sous-protocole propriétaire qui utilise un format d'échange de données non-standard pour une application de <em>chat </em>sur le domaine <em>exemple.com</em>, vous devrirez utiliser : <code>Sec-WebSocket-Protocol: chat.exemple.com</code>. S'il y a différentes versions possibles, modifiez le chemin pour faire correspondre le path à votre version comme ceci : <code>chat.exemple.com/2.0</code>. Notez que ce n'est pas obligatoire, c'est une convention d'écriture optionnel et qui peut être utilisée d'une toute autre façon.</p>
-</div>
-
-<h2 id="Contenus_associés">Contenus associés</h2>
-
-<ul>
- <li><a href="/en-US/docs/WebSockets/Writing_WebSocket_server">Tutorial: Websocket server in C#</a></li>
- <li><a href="/en-US/docs/WebSockets/Writing_WebSocket_client_applications">Writing WebSocket client applications</a></li>
- <li><a href="/en-US/docs/WebSockets/WebSocket_Server_Vb.NET">Tutorial: Websocket server in VB.NET</a></li>
-</ul>
+- [Tutorial: Websocket server in C#](/en-US/docs/WebSockets/Writing_WebSocket_server)
+- [Writing WebSocket client applications](/en-US/docs/WebSockets/Writing_WebSocket_client_applications)
+- [Tutorial: Websocket server in VB.NET](/en-US/docs/WebSockets/WebSocket_Server_Vb.NET)
diff --git a/files/fr/web/api/webvr_api/index.md b/files/fr/web/api/webvr_api/index.md
index 4d41a433a3..4a082d8609 100644
--- a/files/fr/web/api/webvr_api/index.md
+++ b/files/fr/web/api/webvr_api/index.md
@@ -3,97 +3,78 @@ title: WebVR API
 slug: Web/API/WebVR_API
 translation_of: Web/API/WebVR_API
 ---
-<div>{{DefaultAPISidebar("WebVR API")}}{{Deprecated_Header}}</div>
-
-<p>WebVR fournit un support pour les dispositifs de réalité virtuelle - par exemple pour les casques de réalité virtuelle comme l'Oculus Rift - aux applications Web, permettant aux développeurs de traduire les informations de position et de mouvement de l'appareil en mouvements autour d'une scène 3D. Cela a de nombreuses applications très intéressantes, des visites de produits virtuels aux applications de formation interactive en passant par des jeux en première personne dans un environnement immersif.</p>
-
-<h2 id="Concepts_and_usage">Concepts et usage</h2>
-
-<p><img alt="Croquis d'une personne assise sur une chaise et portant des lunettes portant la mention « Head mounted display (HMD) » faisant face à un moniteur avec une webcam portant la mention « Position sensor »." src="hw-setup.png"></p>
-
-<p>Tous les périphériques de réalité virtuelle connectés à votre ordinateur seront donné grâce à la méthode {{domxref("Navigator.getVRDisplays()")}}. Cela retournera un tableau d'objets représentant les périphériques, qui auront l'héritage de l'objet {{domxref("VRDevice")}} — généralement un casque de réalité virtuelle renverra deux périphériques — le casque lui-même, représenté par {{domxref("HMDVRDevice")}}, et la caméra capteur de position qui suit la position de votre tête, représenté par {{domxref("PositionSensorVRDevice")}}.</p>
-
-<p>L'objet {{domxref("PositionSensorVRDevice")}} contient la méthode {{domxref("PositionSensorVRDevice.getState","getState()")}}, qui retourne un objet {{domxref("VRPositionState")}} — cela représente l'état du capteur à un timecode donné, et inclus les propriétés avec des données utiles tel que la vélocité, l'accélération et l'orientation, utiles pour mettre à jour le rendu de la scène pour chaque image en accord avec le mouvement du casque de réalité virtuelle.</p>
-
-<p>La méthode {{domxref("HMDVRDevice.getEyeParameters()")}} retourne un objet {{domxref("VREyeParameters")}}, qui peut être utilisé pour obtenir l'information du champ de vision — combien le casque de réalité virtuel peut afficher de la scène. Le {{domxref("VREyeParameters.currentFieldOfView")}} retourne un objet {{domxref("VRFieldOfView")}} qui contient quatre angles décrivant le champ de vision actuel depuis le point central. Vous pouvez aussi changer le champ de vision en utilisant {{domxref("HMDVRDevice.setFieldOfView()")}}.</p>
-
-<h2 id="Interfaces_WebVR">Interfaces WebVR</h2>
-
-<dl>
- <dt>{{domxref("VRDisplay")}}</dt>
- <dd>Représente un périphérique de réalité virtuelle supporté par cette API. Il inclut des informations générales comme les IDs et des descriptions de l'appareil, ainsi que des méthodes pour commencer à présenter une scène RV, récupérer les paramètres visuels, les capacités d'affichage et d'autres fonctionnalités importantes.</dd>
- <dt>{{domxref("VRDisplayCapabilities")}}</dt>
- <dd>Décrit les capacités d'un appareil {{domxref("VRDisplay")}} — ses fonctionalités peuvent être utilisée pour tester les capacités du périphérique, par exemple peut-il retourner l'information de position.</dd>
- <dt>{{domxref("VRPose")}}</dt>
- <dd>Représente l'état de la position à un timecode donné (qui inclut l'orientation, la position, la vélocité et l'accélération).</dd>
- <dt>{{domxref("VREyeParameters")}}</dt>
- <dd>Donne accès à l'ensemble des informations requises pour faire le rendu d'une scène pour l'oeil indiqué, dont les informations de champ de vision.</dd>
- <dt>{{domxref("VRFieldOfView")}}</dt>
- <dd>Représente le champ de vision actuel définit par quatre angles décrivant la vue depuis le point central.</dd>
- <dt>{{domxref("VRLayer")}}</dt>
- <dd>Représente un calque d'un objet {{domxref("VRDisplay")}}.</dd>
- <dt>{{domxref("VRStageParameters")}}</dt>
- <dd>Représente les données décrivant l'espace physique disponible pour les périphériques de réalité virtuelle pouvant offrir une expérience dans une pièce réelle.</dd>
-</dl>
-
-<h3 id="Extensions_à_d'autres_interfaces">Extensions à d'autres interfaces</h3>
-
-<dl>
- <dt>{{domxref("Gamepad.displayId")}} {{readonlyInline}}</dt>
- <dd><dfn>Retourne l'ID {{domxref("VRDisplay.displayId")}} du périphérique {{domxref("VRDisplay")}} associé — l'appareil RV où la manette de jeu contrôle la scene affichée.</dfn></dd>
- <dt>{{domxref("Navigator.activeVRDisplays")}} {{readonlyInline}}</dt>
- <dd>Retourne un tableau contenant tous les périphériques (objet {{domxref("VRDisplay")}}) qui sont actifs (quand {{domxref("VRDisplay.ispresenting")}} est à <code>true</code>).</dd>
- <dt>{{domxref("Navigator.getVRDisplays()")}}</dt>
- <dd>Retourne un tableau contenant tous les périphériques (objet {{domxref("VRDisplay")}}) disponibles qui sont connectés à l'ordinateur.</dd>
- <dt>{{domxref("Window.onvrdisplayconnected")}}</dt>
- <dd>Représente un gestionaire d'événements qui s'exécute lorsqu'un appareil RV compatible a été connecté à l'ordinateur (quand l'événement {{event("vrdisplayconnected")}} est déclenché).</dd>
- <dt>{{domxref("Window.onvrdisplaydisconnected")}}</dt>
- <dd>Représente un gestionaire d'événements qui s'exécute lorsqu'un appareil RV compatible a été déconnecté de l'ordinateur  (quand l'événement {{event("vrdisplaydisconnected")}} est déclenché).</dd>
- <dt>{{domxref("Window.onvrdisplaypresentchange")}}</dt>
- <dd>Représente un gestionaire d'événements qui s'exécute lorsque l'état de présentation d'un appareil change — i.e. un changement de l'état "présente" à "ne présente pas", ou vice versa (quand l'événement {{event("onvrdisplaypresentchange")}} est déclenché).</dd>
-</dl>
-
-<h2 id="Examples">Examples</h2>
-
-<p>Vous pouvez retrouver plusieurs exemples dans ces repos Github:</p>
-
-<ul>
- <li><a href="https://github.com/aframevr/aframe">A-Frame</a>: un framework web Open source pour construire des expériences RV. Plusieurs exemples.</li>
- <li><a href="https://github.com/mdn/webvr-tests">mdn/webvr-tests</a>: Démos simples conçus pour illustrer des fonctionalités d'usage de base.</li>
- <li><a href="https://github.com/MozVR/">MozVR team</a>: Plus de démos avancés, la source de la spec WebVR, et plus!</li>
-</ul>
-
-<h2 id="Specifications">Specifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('WebVR')}}</td>
-   <td>{{Spec2('WebVR')}}</td>
-   <td>Initial definition</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<h3 id="Navigator.getVRDisplays"><code>Navigator.getVRDisplays</code></h3>
-
-<p>{{Compat("api.Navigator.getVRDisplays")}}</p>
-
-<h2 id="See_also">Voir aussi</h2>
-
-<ul>
- <li><a href="https://webvr.info">webvr.info</a> - Up-to-date information about WebVR, browser setup, and community.</li>
- <li><a href="https://iswebvrready.com">Is WebVR Ready?</a> - Up-to-date information about WebVR browser support (including experimental builds).</li>
- <li><a href="http://mozvr.com/">MozVr.com</a> — demos, downloads, and other resources from the Mozilla VR team.</li>
- <li><a href="https://aframe.io">A-Frame</a> — a web framework for building VR experiences (with HTML), from the Mozilla VR team.</li>
- <li><a href="http://dsmu.me/ConsoleGameOnWeb/">Console Game on Web</a> — a collection of interesting game concept demos, some of which include WebVR.</li>
- <li><a href="https://github.com/MozVR/vr-web-examples/tree/master/threejs-vr-boilerplate">threejs-vr-boilerplate</a> — a very useful starter template for writing WebVR apps into.</li>
- <li><a href="https://developer.oculus.com/">Oculus Rift homepage</a></li>
-</ul>
+{{DefaultAPISidebar("WebVR API")}}{{Deprecated_Header}}
+
+WebVR fournit un support pour les dispositifs de réalité virtuelle - par exemple pour les casques de réalité virtuelle comme l'Oculus Rift - aux applications Web, permettant aux développeurs de traduire les informations de position et de mouvement de l'appareil en mouvements autour d'une scène 3D. Cela a de nombreuses applications très intéressantes, des visites de produits virtuels aux applications de formation interactive en passant par des jeux en première personne dans un environnement immersif.
+
+## Concepts et usage
+
+![Croquis d'une personne assise sur une chaise et portant des lunettes portant la mention « Head mounted display (HMD) » faisant face à un moniteur avec une webcam portant la mention « Position sensor ».](hw-setup.png)
+
+Tous les périphériques de réalité virtuelle connectés à votre ordinateur seront donné grâce à la méthode {{domxref("Navigator.getVRDisplays()")}}. Cela retournera un tableau d'objets représentant les périphériques, qui auront l'héritage de l'objet {{domxref("VRDevice")}} — généralement un casque de réalité virtuelle renverra deux périphériques — le casque lui-même, représenté par {{domxref("HMDVRDevice")}}, et la caméra capteur de position qui suit la position de votre tête, représenté par {{domxref("PositionSensorVRDevice")}}.
+
+L'objet {{domxref("PositionSensorVRDevice")}} contient la méthode {{domxref("PositionSensorVRDevice.getState","getState()")}}, qui retourne un objet {{domxref("VRPositionState")}} — cela représente l'état du capteur à un timecode donné, et inclus les propriétés avec des données utiles tel que la vélocité, l'accélération et l'orientation, utiles pour mettre à jour le rendu de la scène pour chaque image en accord avec le mouvement du casque de réalité virtuelle.
+
+La méthode {{domxref("HMDVRDevice.getEyeParameters()")}} retourne un objet {{domxref("VREyeParameters")}}, qui peut être utilisé pour obtenir l'information du champ de vision — combien le casque de réalité virtuel peut afficher de la scène. Le {{domxref("VREyeParameters.currentFieldOfView")}} retourne un objet {{domxref("VRFieldOfView")}} qui contient quatre angles décrivant le champ de vision actuel depuis le point central. Vous pouvez aussi changer le champ de vision en utilisant {{domxref("HMDVRDevice.setFieldOfView()")}}.
+
+## Interfaces WebVR
+
+- {{domxref("VRDisplay")}}
+  - : Représente un périphérique de réalité virtuelle supporté par cette API. Il inclut des informations générales comme les IDs et des descriptions de l'appareil, ainsi que des méthodes pour commencer à présenter une scène RV, récupérer les paramètres visuels, les capacités d'affichage et d'autres fonctionnalités importantes.
+- {{domxref("VRDisplayCapabilities")}}
+  - : Décrit les capacités d'un appareil {{domxref("VRDisplay")}} — ses fonctionalités peuvent être utilisée pour tester les capacités du périphérique, par exemple peut-il retourner l'information de position.
+- {{domxref("VRPose")}}
+  - : Représente l'état de la position à un timecode donné (qui inclut l'orientation, la position, la vélocité et l'accélération).
+- {{domxref("VREyeParameters")}}
+  - : Donne accès à l'ensemble des informations requises pour faire le rendu d'une scène pour l'oeil indiqué, dont les informations de champ de vision.
+- {{domxref("VRFieldOfView")}}
+  - : Représente le champ de vision actuel définit par quatre angles décrivant la vue depuis le point central.
+- {{domxref("VRLayer")}}
+  - : Représente un calque d'un objet {{domxref("VRDisplay")}}.
+- {{domxref("VRStageParameters")}}
+  - : Représente les données décrivant l'espace physique disponible pour les périphériques de réalité virtuelle pouvant offrir une expérience dans une pièce réelle.
+
+### Extensions à d'autres interfaces
+
+- {{domxref("Gamepad.displayId")}} {{readonlyInline}}
+  - : _Retourne l'ID {{domxref("VRDisplay.displayId")}} du périphérique {{domxref("VRDisplay")}} associé — l'appareil RV où la manette de jeu contrôle la scene affichée._
+- {{domxref("Navigator.activeVRDisplays")}} {{readonlyInline}}
+  - : Retourne un tableau contenant tous les périphériques (objet {{domxref("VRDisplay")}}) qui sont actifs (quand {{domxref("VRDisplay.ispresenting")}} est à `true`).
+- {{domxref("Navigator.getVRDisplays()")}}
+  - : Retourne un tableau contenant tous les périphériques (objet {{domxref("VRDisplay")}}) disponibles qui sont connectés à l'ordinateur.
+- {{domxref("Window.onvrdisplayconnected")}}
+  - : Représente un gestionaire d'événements qui s'exécute lorsqu'un appareil RV compatible a été connecté à l'ordinateur (quand l'événement {{event("vrdisplayconnected")}} est déclenché).
+- {{domxref("Window.onvrdisplaydisconnected")}}
+  - : Représente un gestionaire d'événements qui s'exécute lorsqu'un appareil RV compatible a été déconnecté de l'ordinateur (quand l'événement {{event("vrdisplaydisconnected")}} est déclenché).
+- {{domxref("Window.onvrdisplaypresentchange")}}
+  - : Représente un gestionaire d'événements qui s'exécute lorsque l'état de présentation d'un appareil change — i.e. un changement de l'état "présente" à "ne présente pas", ou vice versa (quand l'événement {{event("onvrdisplaypresentchange")}} est déclenché).
+
+## Examples
+
+Vous pouvez retrouver plusieurs exemples dans ces repos Github:
+
+- [A-Frame](https://github.com/aframevr/aframe): un framework web Open source pour construire des expériences RV. Plusieurs exemples.
+- [mdn/webvr-tests](https://github.com/mdn/webvr-tests): Démos simples conçus pour illustrer des fonctionalités d'usage de base.
+- [MozVR team](https://github.com/MozVR/): Plus de démos avancés, la source de la spec WebVR, et plus!
+
+## Specifications
+
+| Specification                | Status                   | Comment            |
+| ---------------------------- | ------------------------ | ------------------ |
+| {{SpecName('WebVR')}} | {{Spec2('WebVR')}} | Initial definition |
+
+## Compatibilité des navigateurs
+
+### `Navigator.getVRDisplays`
+
+{{Compat("api.Navigator.getVRDisplays")}}
+
+## Voir aussi
+
+- [webvr.info](https://webvr.info) - Up-to-date information about WebVR, browser setup, and community.
+- [Is WebVR Ready?](https://iswebvrready.com) - Up-to-date information about WebVR browser support (including experimental builds).
+- [MozVr.com](http://mozvr.com/) — demos, downloads, and other resources from the Mozilla VR team.
+- [A-Frame](https://aframe.io) — a web framework for building VR experiences (with HTML), from the Mozilla VR team.
+- [Console Game on Web](http://dsmu.me/ConsoleGameOnWeb/) — a collection of interesting game concept demos, some of which include WebVR.
+- [threejs-vr-boilerplate](https://github.com/MozVR/vr-web-examples/tree/master/threejs-vr-boilerplate) — a very useful starter template for writing WebVR apps into.
+- [Oculus Rift homepage](https://developer.oculus.com/)
diff --git a/files/fr/web/api/webvr_api/using_vr_controllers_with_webvr/index.md b/files/fr/web/api/webvr_api/using_vr_controllers_with_webvr/index.md
index ac6babdad9..eaf25ee8e6 100644
--- a/files/fr/web/api/webvr_api/using_vr_controllers_with_webvr/index.md
+++ b/files/fr/web/api/webvr_api/using_vr_controllers_with_webvr/index.md
@@ -4,137 +4,142 @@ slug: Web/API/WebVR_API/Using_VR_controllers_with_WebVR
 translation_of: Web/API/WebVR_API/Using_VR_controllers_with_WebVR
 original_slug: Web/API/WebVR_API/Utiliser_des_contrôleurs_de_realite_virtuelle_pour_du_WebVR
 ---
-<div>{{APIRef("WebVR API")}}</div>
+{{APIRef("WebVR API")}}
 
-<p>La plupart des matériels de WebVR possède des contrôleurs qui viennent avec le casque de réalité virtuelle. Ceux-ci peuvent être utilisés dans les application WebVR grâce à l'<a href="/en-US/docs/Web/API/Gamepad_API">API Gamepad</a>, et plus spécifiquement avec l'<a href="/en-US/docs/Web/API/Gamepad_API#Experimental_Gamepad_extensions">API Gamepad Extensions</a> qui ajoute des API pour accéder, entre autres, à la <a href="/en-US/docs/Web/API/GamepadPose">position du controller</a>, au <a href="/en-US/docs/Web/API/GamepadHapticActuator">retour haptique</a>, etc.. Cet article fournit les bases pour utiliser ces API.</p>
+La plupart des matériels de WebVR possède des contrôleurs qui viennent avec le casque de réalité virtuelle. Ceux-ci peuvent être utilisés dans les application WebVR grâce à l'[API Gamepad](/en-US/docs/Web/API/Gamepad_API), et plus spécifiquement avec l'[API Gamepad Extensions](/en-US/docs/Web/API/Gamepad_API#Experimental_Gamepad_extensions) qui ajoute des API pour accéder, entre autres, à la [position du controller](/en-US/docs/Web/API/GamepadPose), au [retour haptique](/en-US/docs/Web/API/GamepadHapticActuator), etc.. Cet article fournit les bases pour utiliser ces API.
 
-<h2 id="L'API_WebVR">L'API WebVR</h2>
+## L'API WebVR
 
-<p>L'<a href="/en-US/docs/Web/API/WebVR_API">API WebVR</a> est jeune mais possède déjà des fonctionnalités très interressantes pour le web et pour que les développeur·euse·s puisse créer des expériences de réalité virtuelle sur le web. Cela est possible grâce à un accès aux données des casques de réalité virtuelle connectés à votre ordinateur. Ceux-ci seront indentifié comme des objets {{domxref("VRDisplay")}},que vous pourrez manipuler pour commencer et arrêter l'affichage dans le casque, récupérer des données de mouvement (orientation, position...) qui pourront être utilisés pour mettre à jour l'affichage d'une animation, par exemple.</p>
+L'[API WebVR](/en-US/docs/Web/API/WebVR_API) est jeune mais possède déjà des fonctionnalités très interressantes pour le web et pour que les développeur·euse·s puisse créer des expériences de réalité virtuelle sur le web. Cela est possible grâce à un accès aux données des casques de réalité virtuelle connectés à votre ordinateur. Ceux-ci seront indentifié comme des objets {{domxref("VRDisplay")}},que vous pourrez manipuler pour commencer et arrêter l'affichage dans le casque, récupérer des données de mouvement (orientation, position...) qui pourront être utilisés pour mettre à jour l'affichage d'une animation, par exemple.
 
-<p>Avant de commencer, vous devriez être déjà avoir des bases de l'API WebVR. Si ce n'est pas le cas, allez lire l'article <a href="/en-US/docs/Web/API/WebVR_API/Using_the_WebVR_API">Utiliser l'API WebVR</a>, vous aurez également des détails sur la compatibilité des navigateurs web ou du matériel nécessaire.</p>
+Avant de commencer, vous devriez être déjà avoir des bases de l'API WebVR. Si ce n'est pas le cas, allez lire l'article [Utiliser l'API WebVR](/en-US/docs/Web/API/WebVR_API/Using_the_WebVR_API), vous aurez également des détails sur la compatibilité des navigateurs web ou du matériel nécessaire.
 
-<h2 id="L'API_Gamepad">L'API Gamepad</h2>
+## L'API Gamepad
 
-<p>L'<a href="/en-US/docs/Web/API/Gamepad_API">API Gamepad</a> est une API assez bien compatible, qui donne aux développeur·euse·s l'accès aux manettes de jeu, connectés à leur ordinateur et de les utilisé dans dans applications web. Les contrôleurs peuvent basiquement être accessible comme des objets {{domxref("Gamepad")}}, avec lesquels nous pouvons faire des requêtes pour savoir quels boutons sont appuyés ou quels joystick sont actionnés, etc..</p>
+L'[API Gamepad](/en-US/docs/Web/API/Gamepad_API) est une API assez bien compatible, qui donne aux développeur·euse·s l'accès aux manettes de jeu, connectés à leur ordinateur et de les utilisé dans dans applications web. Les contrôleurs peuvent basiquement être accessible comme des objets {{domxref("Gamepad")}}, avec lesquels nous pouvons faire des requêtes pour savoir quels boutons sont appuyés ou quels joystick sont actionnés, etc..
 
-<p>Vous pouvez avoir plus d'information sur l'usage de API de base des Gamepad avec l'article <a href="/en-US/docs/Web/API/Gamepad_API/Using_the_Gamepad_API">Utilisez l'API Gamepad</a>, et <a href="/en-US/docs/Games/Techniques/Controls_Gamepad_API">Implementer des contrôles en utilisant l'API Gamepad</a>.</p>
+Vous pouvez avoir plus d'information sur l'usage de API de base des Gamepad avec l'article [Utilisez l'API Gamepad](/en-US/docs/Web/API/Gamepad_API/Using_the_Gamepad_API), et [Implementer des contrôles en utilisant l'API Gamepad](/en-US/docs/Games/Techniques/Controls_Gamepad_API).
 
-<p>Dans cet article, nous allons nous attardez sur les nouvelles fonctionnalités offertes dans l'API {{specname("GamepadExtensions")}}, laquelle donne accès à des informations avancés comme des données de position ou d'orientation, ou encore contrôler les retours haptiques (vibrations), et bien plus. Cette API est toute nouvelle et, pour l'instant, seulement disponible dans les versions Beta ou Nightly de Firefox 55 (et suppérieur).</p>
+Dans cet article, nous allons nous attardez sur les nouvelles fonctionnalités offertes dans l'API {{specname("GamepadExtensions")}}, laquelle donne accès à des informations avancés comme des données de position ou d'orientation, ou encore contrôler les retours haptiques (vibrations), et bien plus. Cette API est toute nouvelle et, pour l'instant, seulement disponible dans les versions Beta ou Nightly de Firefox 55 (et suppérieur).
 
-<h2 id="Types_de_contrôlleurs">Types de contrôlleurs</h2>
+## Types de contrôlleurs
 
-<p>Il y a deux principaux types de contrôleurs utilisés pour la réalité virtuelle :</p>
+Il y a deux principaux types de contrôleurs utilisés pour la réalité virtuelle :
 
-<ul>
- <li>les "6DoF" (six degrés de liberté) sont des contrôleurs qui donne accès aux informations de position et d'orientation. Un exemple notable serait les manettes du HTC Vive.</li>
- <li>les "3DoF" (trois degrés de liberté) sont des contrôleurs qui donne uniquement accès aux informations d'orientation. Un exemple notable serait la manette du Google Daydream, qui peut être tourné pour sélectionner des objets 3D comme un pointeur laser, mais ne peux être bougé dans la scène 3D.</li>
-</ul>
+- les "6DoF" (six degrés de liberté) sont des contrôleurs qui donne accès aux informations de position et d'orientation. Un exemple notable serait les manettes du HTC Vive.
+- les "3DoF" (trois degrés de liberté) sont des contrôleurs qui donne uniquement accès aux informations d'orientation. Un exemple notable serait la manette du Google Daydream, qui peut être tourné pour sélectionner des objets 3D comme un pointeur laser, mais ne peux être bougé dans la scène 3D.
 
-<h2 id="Basic_controller_access">Basic controller access</h2>
+## Basic controller access
 
-<p>Now onto some code. Let's look first at the basics of how we get access to VR controllers with the Gamepad API. There are a few strange nuances to bear in mind here, so it is worth taking a look.</p>
+Now onto some code. Let's look first at the basics of how we get access to VR controllers with the Gamepad API. There are a few strange nuances to bear in mind here, so it is worth taking a look.
 
-<p>We've written up a simple example to demonstrate — see our <a href="https://github.com/mdn/webvr-tests/blob/master/vr-controller-basic-info/index.html">vr-controller-basic-info</a> source code (<a href="https://mdn.github.io/webvr-tests/vr-controller-basic-info/">see it running live here also</a>). This demo simply outputs information on the VR displays and gamepads connected to your computer.</p>
+We've written up a simple example to demonstrate — see our [vr-controller-basic-info](https://github.com/mdn/webvr-tests/blob/master/vr-controller-basic-info/index.html) source code ([see it running live here also](https://mdn.github.io/webvr-tests/vr-controller-basic-info/)). This demo simply outputs information on the VR displays and gamepads connected to your computer.
 
-<h3 id="Getting_the_display_information">Getting the display information</h3>
+### Getting the display information
 
-<p>The first notable code is as follows:</p>
+The first notable code is as follows:
 
-<pre class="brush: js">var initialRun = true;
+```js
+var initialRun = true;
 
-if(navigator.getVRDisplays &amp;&amp; navigator.getGamepads) {
+if(navigator.getVRDisplays && navigator.getGamepads) {
   info.textContent = 'WebVR API and Gamepad API supported.'
   reportDisplays();
 } else {
   info.textContent = 'WebVR API and/or Gamepad API not supported by this browser.'
-}</pre>
+}
+```
 
-<p>Here we first use a tracking variable, <code>initialRun</code>, to note that this is the first time we have loaded the page. You'll find out more about this later on. Next, we detect to see if the WebVR and Gamepad APIs are supported by cheking for the existence of the {{domxref("Navigator.getVRDisplays()")}} and {{domxref("Navigator.getGamepads()")}} methods. If so, we run our <code>reportDisplays()</code> custom function to start the process off. This function looks like so:</p>
+Here we first use a tracking variable, `initialRun`, to note that this is the first time we have loaded the page. You'll find out more about this later on. Next, we detect to see if the WebVR and Gamepad APIs are supported by cheking for the existence of the {{domxref("Navigator.getVRDisplays()")}} and {{domxref("Navigator.getGamepads()")}} methods. If so, we run our `reportDisplays()` custom function to start the process off. This function looks like so:
 
-<pre class="brush: js">function reportDisplays() {
+```js
+function reportDisplays() {
   navigator.getVRDisplays().then(function(displays) {
       console.log(displays.length + ' displays');
-    for(var i = 0; i &lt; displays.length; i++) {
+    for(var i = 0; i < displays.length; i++) {
       var cap = displays[i].capabilities;
       // cap is a VRDisplayCapabilities object
       var listItem = document.createElement('li');
-      listItem.innerHTML = '&lt;strong&gt;Display ' + (i+1) + '&lt;/strong&gt;'
-                   + '&lt;br&gt;VR Display ID: ' + displays[i].displayId
-                   + '&lt;br&gt;VR Display Name: ' + displays[i].displayName
-                   + '&lt;br&gt;Display can present content: ' + cap.canPresent
-                   + '&lt;br&gt;Display is separate from the computer\'s main display: ' + cap.hasExternalDisplay
-                   + '&lt;br&gt;Display can return position info: ' + cap.hasPosition
-                   + '&lt;br&gt;Display can return orientation info: ' + cap.hasOrientation
-                   + '&lt;br&gt;Display max layers: ' + cap.maxLayers;
+      listItem.innerHTML = '<strong>Display ' + (i+1) + '</strong>'
+                   + '<br>VR Display ID: ' + displays[i].displayId
+                   + '<br>VR Display Name: ' + displays[i].displayName
+                   + '<br>Display can present content: ' + cap.canPresent
+                   + '<br>Display is separate from the computer\'s main display: ' + cap.hasExternalDisplay
+                   + '<br>Display can return position info: ' + cap.hasPosition
+                   + '<br>Display can return orientation info: ' + cap.hasOrientation
+                   + '<br>Display max layers: ' + cap.maxLayers;
       list.appendChild(listItem);
     }
 
     setTimeout(reportGamepads, 1000);
     // For VR, controllers will only be active after their corresponding headset is active
   });
-}</pre>
+}
+```
 
-<p>This function first uses the promise-based {{domxref("Navigator.getVRDisplays()")}} method, which resolves with an array containing {{domxref("VRDisplay")}} objects representing the connected displays. Next, it prints out each display's {{domxref("VRDisplay.displayId")}} and {{domxref("VRDisplay.displayName")}} values, and a number of useful values contained in the display's associated {{domxref("VRCapabilities")}} object. The most useful of these are {{domxref("VRCapabilities.hasOrientation","hasOrientation")}} and {{domxref("VRCapabilities.hasPosition","hasPosition")}}, which allow you to detect whether the device can return orientation and position data and set up your app accordingly.</p>
+This function first uses the promise-based {{domxref("Navigator.getVRDisplays()")}} method, which resolves with an array containing {{domxref("VRDisplay")}} objects representing the connected displays. Next, it prints out each display's {{domxref("VRDisplay.displayId")}} and {{domxref("VRDisplay.displayName")}} values, and a number of useful values contained in the display's associated {{domxref("VRCapabilities")}} object. The most useful of these are {{domxref("VRCapabilities.hasOrientation","hasOrientation")}} and {{domxref("VRCapabilities.hasPosition","hasPosition")}}, which allow you to detect whether the device can return orientation and position data and set up your app accordingly.
 
-<p>The last line contained in this function is a {{domxref("WindowOrWorkerGlobalScope.setTimeout()")}} call, which runs the <code>reportGamepads()</code> function after a 1 second delay. Why do we need to do this? First of all, VR controllers will only be ready after their associated VR headset is active, so we need to invoke this after <code>getVRDisplays()</code> has been called and returned the display information. Second, the Gamepad API is much older than the WebVR API, and not promise-based. As you'll see later, the <code>getGamepads()</code> method is synchronous, and just returns the <code>Gamepad</code> objects immediately — it doesn't wait for the controller to be ready to report information. Unless you wait for a little while, returned information may not be accurate (at least, this is what we found in our tests).</p>
+The last line contained in this function is a {{domxref("WindowOrWorkerGlobalScope.setTimeout()")}} call, which runs the `reportGamepads()` function after a 1 second delay. Why do we need to do this? First of all, VR controllers will only be ready after their associated VR headset is active, so we need to invoke this after `getVRDisplays()` has been called and returned the display information. Second, the Gamepad API is much older than the WebVR API, and not promise-based. As you'll see later, the `getGamepads()` method is synchronous, and just returns the `Gamepad` objects immediately — it doesn't wait for the controller to be ready to report information. Unless you wait for a little while, returned information may not be accurate (at least, this is what we found in our tests).
 
-<h3 id="Getting_the_Gamepad_information">Getting the Gamepad information</h3>
+### Getting the Gamepad information
 
-<p>The <code>reportGamepads()</code> function looks like this:</p>
+The `reportGamepads()` function looks like this:
 
-<pre class="brush: js">function reportGamepads() {
+```js
+function reportGamepads() {
     var gamepads = navigator.getGamepads();
     console.log(gamepads.length + ' controllers');
-    for(var i = 0; i &lt; gamepads.length; ++i) {
+    for(var i = 0; i < gamepads.length; ++i) {
         var gp = gamepads[i];
     var listItem = document.createElement('li');
     listItem.classList = 'gamepad';
-    listItem.innerHTML = '&lt;strong&gt;Gamepad ' + gp.index + '&lt;/strong&gt; (' + gp.id + ')'
-                 + '&lt;br&gt;Associated with VR Display ID: ' + gp.displayId
-                 + '&lt;br&gt;Gamepad associated with which hand: ' + gp.hand
-                 + '&lt;br&gt;Available haptic actuators: ' + gp.hapticActuators.length
-                 + '&lt;br&gt;Gamepad can return position info: ' + gp.pose.hasPosition
-                 + '&lt;br&gt;Gamepad can return orientation info: ' + gp.pose.hasOrientation;
+    listItem.innerHTML = '<strong>Gamepad ' + gp.index + '</strong> (' + gp.id + ')'
+                 + '<br>Associated with VR Display ID: ' + gp.displayId
+                 + '<br>Gamepad associated with which hand: ' + gp.hand
+                 + '<br>Available haptic actuators: ' + gp.hapticActuators.length
+                 + '<br>Gamepad can return position info: ' + gp.pose.hasPosition
+                 + '<br>Gamepad can return orientation info: ' + gp.pose.hasOrientation;
     list.appendChild(listItem);
   }
   initialRun = false;
-}</pre>
+}
+```
 
-<p>This works in a similar manner to <code>reportDisplays()</code> — we get an array of {{domxref("Gamepad")}} objects using the non-promise-based <code>getGamepads()</code> method, then cycle through each one and print out information on each:</p>
+This works in a similar manner to `reportDisplays()` — we get an array of {{domxref("Gamepad")}} objects using the non-promise-based `getGamepads()` method, then cycle through each one and print out information on each:
 
-<ul>
- <li>The {{domxref("Gamepad.displayId")}} property is the same as the <code>displayId</code> of the headet the controller is associated with, and therefore useful for tying controller and headset information together.</li>
- <li>The {{domxref("Gamepad.index")}} property is unique numerical index that identifies each connected controller.</li>
- <li>{{domxref("Gamepad.hand")}} returns which hand the controller is expected to be held in.</li>
- <li>{{domxref("Gamepad.hapticActuators")}} returns an array of the haptic actuators available in the controller. Here we are returning its length so we can see how many each has available.</li>
- <li>Finally, we return {{domxref("GamepadPose.hasPosition")}} and {{domxref("GamepadPose.hasOrientation")}} to show whether the controller can return position and orientation data. This works just the same as for the displays, except that in the case of gamepads these values are available on the pose object, not the capabilities object.</li>
-</ul>
+- The {{domxref("Gamepad.displayId")}} property is the same as the `displayId` of the headet the controller is associated with, and therefore useful for tying controller and headset information together.
+- The {{domxref("Gamepad.index")}} property is unique numerical index that identifies each connected controller.
+- {{domxref("Gamepad.hand")}} returns which hand the controller is expected to be held in.
+- {{domxref("Gamepad.hapticActuators")}} returns an array of the haptic actuators available in the controller. Here we are returning its length so we can see how many each has available.
+- Finally, we return {{domxref("GamepadPose.hasPosition")}} and {{domxref("GamepadPose.hasOrientation")}} to show whether the controller can return position and orientation data. This works just the same as for the displays, except that in the case of gamepads these values are available on the pose object, not the capabilities object.
 
-<p>Note that we also gave each list item containing controller information a class name of <code>gamepad</code>. We'll explain what this is for later.</p>
+Note that we also gave each list item containing controller information a class name of `gamepad`. We'll explain what this is for later.
 
-<p>The last thing to do here is set the <code>initialRun</code> variable to <code>false</code>, as the initial run is now over.</p>
+The last thing to do here is set the `initialRun` variable to `false`, as the initial run is now over.
 
-<h3 id="Gamepad_events">Gamepad events</h3>
+### Gamepad events
 
-<p>To finish off this section, we'll look at the gamepad-associated events. There are two we need concern ourselves with — {{event("gamepadconnected")}} and {{event("gamepaddisconnected")}} — and it is fairly obvious what they do.</p>
+To finish off this section, we'll look at the gamepad-associated events. There are two we need concern ourselves with — {{event("gamepadconnected")}} and {{event("gamepaddisconnected")}} — and it is fairly obvious what they do.
 
-<p>At the end of our example we first include the <code>removeGamepads()</code> function:</p>
+At the end of our example we first include the `removeGamepads()` function:
 
-<pre class="brush: js">function removeGamepads() {
+```js
+function removeGamepads() {
     var gpLi = document.querySelectorAll('.gamepad');
-    for(var i = 0; i &lt; gpLi.length; i++) {
+    for(var i = 0; i < gpLi.length; i++) {
     list.removeChild(gpLi[i]);
     }
 
     reportGamepads();
-}</pre>
+}
+```
 
-<p>This function simply grabs references to all list items with a class name of <code>gamepad</code>, and removes them from the DOM. Then it re-runs <code>reportGamepads()</code> to populate the list with the updated list of connected controllers.</p>
+This function simply grabs references to all list items with a class name of `gamepad`, and removes them from the DOM. Then it re-runs `reportGamepads()` to populate the list with the updated list of connected controllers.
 
-<p><code>removeGamepads()</code> will be run each time a gamepad is connected or disconnected, via the following event handlers:</p>
+`removeGamepads()` will be run each time a gamepad is connected or disconnected, via the following event handlers:
 
-<pre class="brush: js">window.addEventListener('gamepadconnected', function(e) {
+```js
+window.addEventListener('gamepadconnected', function(e) {
   info.textContent = 'Gamepad ' + e.gamepad.index + ' connected.';
   if(!initialRun) {
       setTimeout(removeGamepads, 1000);
@@ -144,25 +149,27 @@ if(navigator.getVRDisplays &amp;&amp; navigator.getGamepads) {
 window.addEventListener('gamepaddisconnected', function(e) {
   info.textContent = 'Gamepad ' + e.gamepad.index + ' disconnected.';
   setTimeout(removeGamepads, 1000);
-});</pre>
+});
+```
 
-<p>We have <code>setTimeout()</code> calls in place here — like we did with the initialization code at the top of the script — to make sure that the gamepads are ready to report their information when <code>reportGamepads()</code> is called in each case.</p>
+We have `setTimeout()` calls in place here — like we did with the initialization code at the top of the script — to make sure that the gamepads are ready to report their information when `reportGamepads()` is called in each case.
 
-<p>But there's one more thing to note — you'll see that inside the <code>gamepadconnected</code> handler, the timeout is only run if <code>initialRun</code> is <code>false</code>. This is because if your gamepads are connected when the document first loads, <code>gamepadconnected</code> is fired once for each gamepad, therefore <code>removeGamepads()</code>/<code>reportGamepads()</code> will be run several times. This could lead to inaccurate results, therefore we only want to run <code>removeGamepads()</code> inside the <code>gamepadconnected</code> handler after the initial run, not during it. This is what <code>initialRun</code> is for.</p>
+But there's one more thing to note — you'll see that inside the `gamepadconnected` handler, the timeout is only run if `initialRun` is `false`. This is because if your gamepads are connected when the document first loads, `gamepadconnected` is fired once for each gamepad, therefore `removeGamepads()`/`reportGamepads()` will be run several times. This could lead to inaccurate results, therefore we only want to run `removeGamepads()` inside the `gamepadconnected` handler after the initial run, not during it. This is what `initialRun` is for.
 
-<h2 id="Introducing_a_real_demo">Introducing a real demo</h2>
+## Introducing a real demo
 
-<p>Now let's look at the Gamepad API being used inside a real WebVR demo. You can find this demo at <a href="https://github.com/mdn/webvr-tests/tree/master/raw-webgl-controller-example">raw-webgl-controller-example</a> (<a href="https://mdn.github.io/webvr-tests/raw-webgl-controller-example/">see it live here also</a>).</p>
+Now let's look at the Gamepad API being used inside a real WebVR demo. You can find this demo at [raw-webgl-controller-example](https://github.com/mdn/webvr-tests/tree/master/raw-webgl-controller-example) ([see it live here also](https://mdn.github.io/webvr-tests/raw-webgl-controller-example/)).
 
-<p>In exactly the same way as our <a href="https://github.com/mdn/webvr-tests/tree/master/raw-webgl-example">raw-webgl-example</a> (see <a href="/en-US/docs/Web/API/WebVR_API/Using_the_WebVR_API">Using the WebVR API</a> for details), this renders a spinning 3D cube, which you can choose to present in a VR display. The only difference is that, while in VR presenting mode, this demo allows you to move the cube by moving a VR controller (the original demo moves the cube as you move your VR headset).</p>
+In exactly the same way as our [raw-webgl-example](https://github.com/mdn/webvr-tests/tree/master/raw-webgl-example) (see [Using the WebVR API](/en-US/docs/Web/API/WebVR_API/Using_the_WebVR_API) for details), this renders a spinning 3D cube, which you can choose to present in a VR display. The only difference is that, while in VR presenting mode, this demo allows you to move the cube by moving a VR controller (the original demo moves the cube as you move your VR headset).
 
-<p>We'll explore the code differences in this version below — see <a href="https://github.com/mdn/webvr-tests/blob/master/raw-webgl-controller-example/webgl-demo.js">webgl-demo.js</a>.</p>
+We'll explore the code differences in this version below — see [webgl-demo.js](https://github.com/mdn/webvr-tests/blob/master/raw-webgl-controller-example/webgl-demo.js).
 
-<h3 id="Accessing_the_gamepad_data">Accessing the gamepad data</h3>
+### Accessing the gamepad data
 
-<p>Inside the <code>drawVRScene()</code> function, you'll find this bit of code:</p>
+Inside the `drawVRScene()` function, you'll find this bit of code:
 
-<pre class="brush: js">var gamepads = navigator.getGamepads();
+```js
+var gamepads = navigator.getGamepads();
 var gp = gamepads[0];
 
 if(gp) {
@@ -172,15 +179,17 @@ if(gp) {
   if(poseStatsDisplayed) {
     displayPoseStats(gpPose);
   }
-}</pre>
+}
+```
 
-<p>Here we get the connected gamepads with {{domxref("Navigator.getGamepads")}}, then store the first gamepad detected in the <code>gp</code> variable. As we only need one gamepad for this demo, we'll just ignore the others.</p>
+Here we get the connected gamepads with {{domxref("Navigator.getGamepads")}}, then store the first gamepad detected in the `gp` variable. As we only need one gamepad for this demo, we'll just ignore the others.
 
-<p>The next thing we do is to get the {{domxref("GamepadPose")}} object for the controller stored in gpPose (by querying {{domxref("Gamepad.pose")}}), and also store the current gamepad position and orientation for this frame in variables so they are easuy to access later. We also display the post stats for this frame in the DOM using the <code>displayPoseStats()</code> function. All of this is only done if <code>gp</code> actually has a value (if a gamepad is connected), which stops the demo erroring if we don't have our gamepad connected.</p>
+The next thing we do is to get the {{domxref("GamepadPose")}} object for the controller stored in gpPose (by querying {{domxref("Gamepad.pose")}}), and also store the current gamepad position and orientation for this frame in variables so they are easuy to access later. We also display the post stats for this frame in the DOM using the `displayPoseStats()` function. All of this is only done if `gp` actually has a value (if a gamepad is connected), which stops the demo erroring if we don't have our gamepad connected.
 
-<p>Slightly later in the code, you can find this block:</p>
+Slightly later in the code, you can find this block:
 
-<pre class="brush: js">if(gp &amp;&amp; gpPose.hasPosition) {
+```js
+if(gp && gpPose.hasPosition) {
   mvTranslate([
                 0.0 + (curPos[0] * 15) - (curOrient[1] * 15),
                 0.0 + (curPos[1] * 15) + (curOrient[0] * 15),
@@ -198,17 +207,19 @@ if(gp) {
                 0.0,
                 -15.0
              ]);
-}</pre>
+}
+```
 
-<p>Here we alter the position of the cube on the screen according to the {{domxref("GamepadPose.position","position")}} and {{domxref("GamepadPose.orientation","orientation")}} data received from the connected controller. These values (stored in <code>curPos</code> and <code>curOrient</code>) are {{domxref("Float32Array")}}s containing the X, Y, and Z values (here we are just using [0] which is X, and [1] which is Y).</p>
+Here we alter the position of the cube on the screen according to the {{domxref("GamepadPose.position","position")}} and {{domxref("GamepadPose.orientation","orientation")}} data received from the connected controller. These values (stored in `curPos` and `curOrient`) are {{domxref("Float32Array")}}s containing the X, Y, and Z values (here we are just using \[0] which is X, and \[1] which is Y).
 
-<p>If the <code>gp</code> variable has a <code>Gamepad</code> object inside it and it can return position values (<code>gpPose.hasPosition</code>), indicating a 6DoF controller, we modify the cube position using position and orientation values. If only the former is true, indicating a 3DoF controller, we modify the cube position using the orientation values only. If there is no gamepad connected, we don't modify the cube position at all.</p>
+If the `gp` variable has a `Gamepad` object inside it and it can return position values (`gpPose.hasPosition`), indicating a 6DoF controller, we modify the cube position using position and orientation values. If only the former is true, indicating a 3DoF controller, we modify the cube position using the orientation values only. If there is no gamepad connected, we don't modify the cube position at all.
 
-<h3 id="Displaying_the_gamepad_pose_data">Displaying the gamepad pose data</h3>
+### Displaying the gamepad pose data
 
-<p>In the <code>displayPoseStats()</code> function, we grab all of the data we want to display out of the {{domxref("GamepadPose")}} object passed into it, then print them into the UI panel that exists in the demo for displaying such data:</p>
+In the `displayPoseStats()` function, we grab all of the data we want to display out of the {{domxref("GamepadPose")}} object passed into it, then print them into the UI panel that exists in the demo for displaying such data:
 
-<pre class="brush: js">function displayPoseStats(pose) {
+```js
+function displayPoseStats(pose) {
   var pos = pose.position;
   var orient = pose.orientation;
   var linVel = pose.linearVelocity;
@@ -242,15 +253,14 @@ if(gp) {
   } else {
     angAccStats.textContent = 'Angular acceleration not reported';
   }
-}</pre>
+}
+```
 
-<p>This article has given you a very basic idea of how to use the Gamepad Extensions to use VR controllers inside WebVR apps. In a real app you'd probably have a much more complex control system in effect, with controls assigned to the buttons on the VR controllers, and the display being affected by both the display pose and the controller poses simultaneously. Here however, we just wanted to isolate the pure Gamepad Extensions parts of that.</p>
+This article has given you a very basic idea of how to use the Gamepad Extensions to use VR controllers inside WebVR apps. In a real app you'd probably have a much more complex control system in effect, with controls assigned to the buttons on the VR controllers, and the display being affected by both the display pose and the controller poses simultaneously. Here however, we just wanted to isolate the pure Gamepad Extensions parts of that.
 
-<h2 id="See_also">See also</h2>
+## See also
 
-<ul>
- <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API</a></li>
- <li><a href="/en-US/docs/Web/API/Gamepad_API">Gamepad API</a></li>
- <li><a href="/en-US/docs/Web/API/WebVR_API/Using_the_WebVR_API">Using the WebVR API</a></li>
- <li><a href="/en-US/docs/Games/Techniques/Controls_Gamepad_API">Implementing controls using the Gamepad API</a></li>
-</ul>
+- [WebVR API](/en-US/docs/Web/API/WebVR_API)
+- [Gamepad API](/en-US/docs/Web/API/Gamepad_API)
+- [Using the WebVR API](/en-US/docs/Web/API/WebVR_API/Using_the_WebVR_API)
+- [Implementing controls using the Gamepad API](/en-US/docs/Games/Techniques/Controls_Gamepad_API)
diff --git a/files/fr/web/api/webvtt_api/index.md b/files/fr/web/api/webvtt_api/index.md
index 43a0d9ba78..6031c99c90 100644
--- a/files/fr/web/api/webvtt_api/index.md
+++ b/files/fr/web/api/webvtt_api/index.md
@@ -3,164 +3,152 @@ title: Web Video Text Tracks Format (WebVTT)
 slug: Web/API/WebVTT_API
 translation_of: Web/API/WebVTT_API
 ---
-<div>{{DefaultAPISidebar("WebVTT")}}</div>
+{{DefaultAPISidebar("WebVTT")}}
 
-<p><strong>Web Video Text Tracks Format</strong> (<strong>WebVTT</strong>) est un format pour afficher du texte en fonction du temps (comme des sous-titres ou des légendes) en utilisant l'élément HTML {{HTMLElement("track")}}. L'objectif de ce format est d'afficher du texte sur {{HTMLElement("video")}}.</p>
+**Web Video Text Tracks Format** (**WebVTT**) est un format pour afficher du texte en fonction du temps (comme des sous-titres ou des légendes) en utilisant l'élément HTML {{HTMLElement("track")}}. L'objectif de ce format est d'afficher du texte sur {{HTMLElement("video")}}.
 
-<p> WebVTT est un format texte codé en {{Glossary("UTF-8")}}. On peut utiliser aussi bien des espaces que des tabulations. Il y a aussi une petite API capable de représenter et de modifier ces pistes ainsi que les données nécéssaires à la synchornisation du texte.</p>
+WebVTT est un format texte codé en {{Glossary("UTF-8")}}. On peut utiliser aussi bien des espaces que des tabulations. Il y a aussi une petite API capable de représenter et de modifier ces pistes ainsi que les données nécéssaires à la synchornisation du texte.
 
-<h2 id="Les_fichiers_WebVTT">Les fichiers WebVTT</h2>
+## Les fichiers WebVTT
 
-<p>Les fichiers WebVTT ont pour type MIME <code>text/vtt</code>.</p>
+Les fichiers WebVTT ont pour type MIME `text/vtt`.
 
-<p>Un fichier WebVTT (<code>.vtt</code>) contient les répliques qui peuvent être sur une ou plusieurs lignes.</p>
+Un fichier WebVTT (`.vtt`) contient les répliques qui peuvent être sur une ou plusieurs lignes.
 
-<pre class="notranslate">WEBVTT
+    WEBVTT
 
-00:01.000 --&gt; 00:04.000
-Ne jamais boire de l'azote liquide.
+    00:01.000 --> 00:04.000
+    Ne jamais boire de l'azote liquide.
 
-00:05.000 --&gt; 00:09.000
-- Cela peut perforer l'estomac.
-- On peut en mourir.
-</pre>
+    00:05.000 --> 00:09.000
+    - Cela peut perforer l'estomac.
+    - On peut en mourir.
 
-<h2 id="Le_corps_WebVTT">Le corps WebVTT</h2>
+## Le corps WebVTT
 
-<p>La structure d'un fichier WebVTT consiste en une série de composants, certains d'entre-eux sont optionnels. Dans l'ordre:</p>
+La structure d'un fichier WebVTT consiste en une série de composants, certains d'entre-eux sont optionnels. Dans l'ordre:
 
-<ul>
- <li>Indicateur d'ordre des octets {{optional_inline}}</li>
- <li>La chaîne de caractères "<code>WEBVTT</code>".</li>
- <li>Titre à droite de "<code>WEBVTT</code>". {{optional_inline}}
-  <ul>
-   <li>Il doit y avoir au moins un espace après "<code>WEBVTT</code>".</li>
-   <li>Vous pouvez l'utiliser pour mettre une description.</li>
-   <li>Vous pouvez utiliser n'importe quoi à part une nouvelle ligne ou la chaîne "<code>--&gt;</code>".</li>
-  </ul>
- </li>
- <li>Une ligne vide équivalente à deux lignes consécutives.</li>
- <li>Zéros ou plusieurs répliques ou commenatiaires.</li>
- <li>Zéro ou plusieurs lignes vides.</li>
-</ul>
+- Indicateur d'ordre des octets {{optional_inline}}
+- La chaîne de caractères "`WEBVTT`".
+- Titre à droite de "`WEBVTT`". {{optional_inline}}
 
-<h5 id="Exemple_1_-_Plus_petit_fichier_WebVTT">Exemple 1 - Plus petit fichier WebVTT</h5>
+  - Il doit y avoir au moins un espace après "`WEBVTT`".
+  - Vous pouvez l'utiliser pour mettre une description.
+  - Vous pouvez utiliser n'importe quoi à part une nouvelle ligne ou la chaîne "`-->`".
 
-<pre class="eval">WEBVTT
-</pre>
+- Une ligne vide équivalente à deux lignes consécutives.
+- Zéros ou plusieurs répliques ou commenatiaires.
+- Zéro ou plusieurs lignes vides.
 
-<h5 id="Exemple_2_-_Simple_fichier_WebVTT_contenant_un_entête">Exemple 2 - Simple fichier WebVTT contenant un entête</h5>
+##### Exemple 1 - Plus petit fichier WebVTT
 
-<pre class="eval">WEBVTT - Ce fichier ne possède pas de réplique.</pre>
+    WEBVTT
 
-<h5 id="Exemple_3_-_Fichier_WebVTT_courant_avec_un_entête_et_des_répliques">Exemple 3 - Fichier WebVTT courant avec un entête et des répliques</h5>
+##### Exemple 2 - Simple fichier WebVTT contenant un entête
 
-<pre class="eval">WEBVTT - Ce fichier possède des répliques.
+    WEBVTT - Ce fichier ne possède pas de réplique.
 
-14
-00:01:14.815 --&gt; 00:01:18.114
-- Quoi?
-- Où sommes-nous?
+##### Exemple 3 - Fichier WebVTT courant avec un entête et des répliques
 
-15
-00:01:18.171 --&gt; 00:01:20.991
-- C'est le pays des grandes chauves-souris.
+    WEBVTT - Ce fichier possède des répliques.
 
-16
-00:01:21.058 --&gt; 00:01:23.868
-- [ Cris perçant de chauves-souris ]
-- Elles ne veulent pas aller dans vos cheveux. Elles attrapent les insectes.
-</pre>
+    14
+    00:01:14.815 --> 00:01:18.114
+    - Quoi?
+    - Où sommes-nous?
 
-<h3 id="Structure_interne_dun_fichier_WebVTT">Structure interne d'un fichier WebVTT</h3>
+    15
+    00:01:18.171 --> 00:01:20.991
+    - C'est le pays des grandes chauves-souris.
 
-<p>Réexaminons le premier exemple, et observons la structure plus précisément.</p>
+    16
+    00:01:21.058 --> 00:01:23.868
+    - [ Cris perçant de chauves-souris ]
+    - Elles ne veulent pas aller dans vos cheveux. Elles attrapent les insectes.
 
-<pre class="notranslate">WEBVTT
+### Structure interne d'un fichier WebVTT
 
-00:01.000 --&gt; 00:04.000
-Ne jamais boire de l'azote liquide.
+Réexaminons le premier exemple, et observons la structure plus précisément.
 
-00:05.000 --&gt; 00:09.000
-- Cela peut perforer l'estomac.
-- On peut en mourir.
+    WEBVTT
 
-NOTE Cette ligne est la dernière ligne du fichier
-</pre>
+    00:01.000 --> 00:04.000
+    Ne jamais boire de l'azote liquide.
 
-<p>Dans chaque réplique:</p>
+    00:05.000 --> 00:09.000
+    - Cela peut perforer l'estomac.
+    - On peut en mourir.
 
-<ul>
- <li>La première ligne commence par un temps correspondant au moment où il apparait.</li>
- <li>Sur la même ligne nous avons une chaîne <code>--&gt;</code>.</li>
- <li>Nous finissions la ligne par un second temps indiquant la fin de l'affichage du texte.</li>
- <li>Nous pouvons alors afficher une ou plusieurs lignes commençant par un tiret (-), chacune contenant une partie du texte à afficher.</li>
-</ul>
+    NOTE Cette ligne est la dernière ligne du fichier
 
-<p>Nous pouvons aussi mettre des commentaires dans notre fichier <code>.vtt</code> afin de nous aider à nous remémorer des informations importantes à propos du fichier. Ils doivent être séparés par une ligne vide et commencer par <code>NOTE</code>. Nous en reparlerons dans la prochaine section.</p>
+Dans chaque réplique:
 
-<p>Il est important de ne pas utiliser de ligne vide sans réplique, par exemple entre la ligne indiquant le temps et le texte en lui même. WebVTT est basé sur les lignes, une ligne vide ferme la réplique.</p>
+- La première ligne commence par un temps correspondant au moment où il apparait.
+- Sur la même ligne nous avons une chaîne `-->`.
+- Nous finissions la ligne par un second temps indiquant la fin de l'affichage du texte.
+- Nous pouvons alors afficher une ou plusieurs lignes commençant par un tiret (-), chacune contenant une partie du texte à afficher.
 
-<h2 id="Les_commentaires_WebVTT">Les commentaires WebVTT</h2>
+Nous pouvons aussi mettre des commentaires dans notre fichier `.vtt` afin de nous aider à nous remémorer des informations importantes à propos du fichier. Ils doivent être séparés par une ligne vide et commencer par `NOTE`. Nous en reparlerons dans la prochaine section.
 
-<p>Les commentaires sont des composants optionels qui peuvent être utilisés pour ajouter des informations à un fichier WebVTT. Les commentaires sont prévus pour ceux qui liront le fichier, ils ne seront pas vus par les utilisateurs. Les commentaires peuvent contenir de nouvelles ligne mais ne peuvent pas contenir de ligne vide ce qui équivaut à deux nouvelles lignes. Une ligne vide correspond à la fin d'un commentaire.</p>
+Il est important de ne pas utiliser de ligne vide sans réplique, par exemple entre la ligne indiquant le temps et le texte en lui même. WebVTT est basé sur les lignes, une ligne vide ferme la réplique.
 
-<p>Un  commentaire ne peut contenir la chaîne "<code>--&gt;</code>", l'esperluette <code>&amp;</code> ou bien le symbole plus-petit que <code>&lt;</code>. Si vous voulez utiliser ces caractères, vous devez utiliser les caractères échapés comme <code>&amp;amp;</code>pour l'esperluette et <code>&amp;lt;</code> pour le plus petit que. Il est aussi recommandé <code>&amp;gt;</code> pour le plus grand que, afin d'éviter toutes confusions.</p>
+## Les commentaires WebVTT
 
-<p>Un commentaire est constitué de ces trois composants:</p>
+Les commentaires sont des composants optionels qui peuvent être utilisés pour ajouter des informations à un fichier WebVTT. Les commentaires sont prévus pour ceux qui liront le fichier, ils ne seront pas vus par les utilisateurs. Les commentaires peuvent contenir de nouvelles ligne mais ne peuvent pas contenir de ligne vide ce qui équivaut à deux nouvelles lignes. Une ligne vide correspond à la fin d'un commentaire.
 
-<ul>
- <li>La chaîne <code>NOTE</code>.</li>
- <li>Un espace ou une nouvelle ligne.</li>
- <li>Aucun ou plusieurs caractères sauf ceux indiqué ci-dessus.</li>
-</ul>
+Un  commentaire ne peut contenir la chaîne "`-->`", l'esperluette `&` ou bien le symbole plus-petit que `<`. Si vous voulez utiliser ces caractères, vous devez utiliser les caractères échapés comme `&amp;`pour l'esperluette et `&lt;` pour le plus petit que. Il est aussi recommandé `&gt;` pour le plus grand que, afin d'éviter toutes confusions.
 
-<h5 id="Exemple_4_-_Simple_commentaire_WebVTT">Exemple 4 - Simple commentaire WebVTT</h5>
+Un commentaire est constitué de ces trois composants:
 
-<pre class="eval">NOTE Ceci est un simple commentaire</pre>
+- La chaîne `NOTE`.
+- Un espace ou une nouvelle ligne.
+- Aucun ou plusieurs caractères sauf ceux indiqué ci-dessus.
 
-<h5 id="Exemple_5_-_Multi-line_comment">Exemple 5 - Multi-line comment</h5>
+##### Exemple 4 - Simple commentaire WebVTT
 
-<pre class="eval">NOTE
-Un autre commentaire qui est
-coupé sur plusieurs lignes.
+    NOTE Ceci est un simple commentaire
 
-NOTE Vous pouvez aussi faire un commentaire
-sur plusieurs lignes de cette façon.
-</pre>
+##### Exemple 5 - Multi-line comment
 
-<h5 id="Exemple_6_-_Usage_commun_des_commentaires">Exemple 6 - Usage commun des commentaires</h5>
+    NOTE
+    Un autre commentaire qui est
+    coupé sur plusieurs lignes.
 
-<pre class="eval">WEBVTT - Traduction de ce film que j'aime
+    NOTE Vous pouvez aussi faire un commentaire
+    sur plusieurs lignes de cette façon.
 
-NOTE
-Cette traduction a été faite par Kyle pour que
-ses amis puissent la voir avec leurs parents.
+##### Exemple 6 - Usage commun des commentaires
 
-1
-00:02:15.000 --&gt; 00:02:20.000
-- Ta en kopp varmt te.
-- Det är inte varmt.
+    WEBVTT - Traduction de ce film que j'aime
 
-2
-00:02:20.000 --&gt; 00:02:25.000
-- Har en kopp te.
-- Det smakar som te.
+    NOTE
+    Cette traduction a été faite par Kyle pour que
+    ses amis puissent la voir avec leurs parents.
 
-NOTE Cette dernière ligne n'est pas forcément bien traduite.
+    1
+    00:02:15.000 --> 00:02:20.000
+    - Ta en kopp varmt te.
+    - Det är inte varmt.
 
-3
-00:02:25.000 --&gt; 00:02:30.000
-- Ta en kopp
-</pre>
+    2
+    00:02:20.000 --> 00:02:25.000
+    - Har en kopp te.
+    - Det smakar som te.
+
+    NOTE Cette dernière ligne n'est pas forcément bien traduite.
 
-<h2 id="Styliser_les_répliques_WebTT">Styliser les répliques WebTT</h2>
+    3
+    00:02:25.000 --> 00:02:30.000
+    - Ta en kopp
 
-<p>Vous pouvez styliser des répliques WebVTT en cherchant les éléments qui correspondent à la pseudo-classe {{cssxref("::cue")}}.</p>
+## Styliser les répliques WebTT
 
-<h3 id="Avec_du_CSS">Avec du CSS</h3>
+Vous pouvez styliser des répliques WebVTT en cherchant les éléments qui correspondent à la pseudo-classe {{cssxref("::cue")}}.
 
-<pre class="brush: css">video::cue {
+### Avec du CSS
+
+```css
+video::cue {
   background-image: linear-gradient(to bottom, dimgray, lightgray);
   color: papayawhip;
 }
@@ -168,22 +156,24 @@ NOTE Cette dernière ligne n'est pas forcément bien traduite.
 video::cue(b) {
   color: peachpuff;
 }
-</pre>
+```
 
-<p>Here, all video elements are styled to use a gray linear gradient as their backgrounds, with a foreground color of <code>"papayawhip"</code>. In addition, text boldfaced using the {{HTMLElement("b")}} element are colored <code>"peachpuff"</code>.</p>
+Here, all video elements are styled to use a gray linear gradient as their backgrounds, with a foreground color of `"papayawhip"`. In addition, text boldfaced using the {{HTMLElement("b")}} element are colored `"peachpuff"`.
 
-<p>The HTML snippet below actually handles displaying the media itself.</p>
+The HTML snippet below actually handles displaying the media itself.
 
-<pre class="brush: html">&lt;video controls autoplay src="video.webm"&gt;
- &lt;track default src="track.vtt"&gt;
-&lt;/video&gt;
-</pre>
+```html
+<video controls autoplay src="video.webm">
+ <track default src="track.vtt">
+</video>
+```
 
-<h3 id="Within_the_WebVTT_file_itself">Within the WebVTT file itself</h3>
+### Within the WebVTT file itself
 
-<p>You can also define the style directly in the WebVTT file. In this case, you insert your CSS rules into the file with each rule preceded by the string <code>"STYLE"</code> all by itelf on a line of text, as shown below:</p>
+You can also define the style directly in the WebVTT file. In this case, you insert your CSS rules into the file with each rule preceded by the string `"STYLE"` all by itelf on a line of text, as shown below:
 
-<pre class="brush: plain">WEBVTT
+```plain
+WEBVTT
 
 STYLE
 ::cue {
@@ -199,644 +189,597 @@ STYLE
   color: peachpuff;
 }
 
-00:00:00.000 --&gt; 00:00:10.000
-- Hello &lt;b&gt;world&lt;/b&gt;.
+00:00:00.000 --> 00:00:10.000
+- Hello <b>world</b>.
 
-NOTE style blocks cannot appear after the first cue.</pre>
+NOTE style blocks cannot appear after the first cue.
+```
 
-<p>We can also use identifiers inside WebVTT file, which can be used for defining a new style for some particular cues in the file. The example where we wanted the transcription text to be red highlighted and the other part to remain normal, we can define it as follows using CSS. Where it must be noted that the CSS uses escape sequences the way they are used in HTML pages:</p>
+We can also use identifiers inside WebVTT file, which can be used for defining a new style for some particular cues in the file. The example where we wanted the transcription text to be red highlighted and the other part to remain normal, we can define it as follows using CSS. Where it must be noted that the CSS uses escape sequences the way they are used in HTML pages:
 
-<pre class="brush: plain">WEBVTT
+```plain
+WEBVTT
 
 1
-00:00.000 --&gt; 00:02.000
+00:00.000 --> 00:02.000
 That’s an, an, that’s an L!
 
 crédit de transcription
-00:04.000 --&gt; 00:05.000
+00:04.000 --> 00:05.000
 Transcrit par Célestes™
-</pre>
+```
 
-<pre class="brush: css">::cue(#\31) { color: lime; }
-::cue(#crédit\ de\ transcription) { color: red; }</pre>
+```css
+::cue(#\31) { color: lime; }
+::cue(#crédit\ de\ transcription) { color: red; }
+```
 
-<p>Positioning of text tracks is also supported, by including positioning information after the timings in a cue, as seen below (see {{anch("Cue settings")}} for more information):</p>
+Positioning of text tracks is also supported, by including positioning information after the timings in a cue, as seen below (see {{anch("Cue settings")}} for more information):
 
-<pre class="brush: plain">WEBVTT
+```plain
+WEBVTT
 
-00:00:00.000 --&gt; 00:00:04.000 position:10%,line-left align:left size:35%
+00:00:00.000 --> 00:00:04.000 position:10%,line-left align:left size:35%
 Where did he go?
 
-00:00:03.000 --&gt; 00:00:06.500 position:90% align:right size:35%
+00:00:03.000 --> 00:00:06.500 position:90% align:right size:35%
 I think he went down this lane.
 
-00:00:04.000 --&gt; 00:00:06.500 position:45%,line-right align:center size:35%
-What are you waiting for?</pre>
+00:00:04.000 --> 00:00:06.500 position:45%,line-right align:center size:35%
+What are you waiting for?
+```
 
-<h2 id="WebVTT_cues">WebVTT cues</h2>
+## WebVTT cues
 
-<p>A cue is a single subtitle block that has a single start time, end time, and textual payload. Example 6 consists of the header, a blank line, and then five cues separated by blank lines. A cue consists of five components:</p>
+A cue is a single subtitle block that has a single start time, end time, and textual payload. Example 6 consists of the header, a blank line, and then five cues separated by blank lines. A cue consists of five components:
 
-<ul>
- <li>An optional cue identifier followed by a newline.</li>
- <li>Cue timings.</li>
- <li>Optional cue settings with at least one space before the first and between each setting.</li>
- <li>A single newline.</li>
- <li>The cue payload text.</li>
-</ul>
+- An optional cue identifier followed by a newline.
+- Cue timings.
+- Optional cue settings with at least one space before the first and between each setting.
+- A single newline.
+- The cue payload text.
 
-<h5 id="Example_7_-_Example_of_a_cue">Example 7 - Example of a cue</h5>
+##### Example 7 - Example of a cue
 
-<pre class="brush: plain">1 - Title Crawl
-00:00:05.000 --&gt; 00:00:10.000 line:0 position:20% size:60% align:start
-Some time ago in a place rather distant....</pre>
+```plain
+1 - Title Crawl
+00:00:05.000 --> 00:00:10.000 line:0 position:20% size:60% align:start
+Some time ago in a place rather distant....
+```
 
-<h3 id="Cue_identifier">Cue identifier</h3>
+### Cue identifier
 
-<p>The identifier is a name that identifies the cue. It can be used to reference the cue from a script. It must not contain a newline and cannot contain the string "<code>--&gt;"</code>. It must end with a single newline. They do not have to be unique, although it is common to number them (e.g., 1, 2, 3, ...).</p>
+The identifier is a name that identifies the cue. It can be used to reference the cue from a script. It must not contain a newline and cannot contain the string "`-->"`. It must end with a single newline. They do not have to be unique, although it is common to number them (e.g., 1, 2, 3, ...).
 
-<h5 id="Example_8_-_Cue_identifier_from_Example_7">Example 8 - Cue identifier from Example 7</h5>
+##### Example 8 - Cue identifier from Example 7
 
-<pre class="brush: plain">1 - Title Crawl</pre>
+```plain
+1 - Title Crawl
+```
 
-<h5 id="Example_9_-_Common_usage_of_identifiers">Example 9 - Common usage of identifiers</h5>
+##### Example 9 - Common usage of identifiers
 
-<pre class="brush: plain">WEBVTT
+```plain
+WEBVTT
 
 1
-00:00:22.230 --&gt; 00:00:24.606
+00:00:22.230 --> 00:00:24.606
 This is the first subtitle.
 
 2
-00:00:30.739 --&gt; 00:00:34.074
+00:00:30.739 --> 00:00:34.074
 This is the second.
 
 3
-00:00:34.159 --&gt; 00:00:35.743
+00:00:34.159 --> 00:00:35.743
 Third
-</pre>
+```
+
+### Cue timings
+
+A cue timing indicates when the cue is shown. It has a start and end time which are represented by timestamps. The end time must be greater than the start time, and the start time must be greater than or equal to all previous start times. Cues may have overlapping timings.
+
+If the WebVTT file is being used for chapters ({{HTMLElement("track")}} {{htmlattrxref("kind")}} is `chapters`) then the file cannot have overlapping timings.
 
-<h3 id="Cue_timings">Cue timings</h3>
+Each cue timing contains five components:
 
-<p>A cue timing indicates when the cue is shown. It has a start and end time which are represented by timestamps. The end time must be greater than the start time, and the start time must be greater than or equal to all previous start times. Cues may have overlapping timings.</p>
+- Timestamp for start time.
+- At least one space.
+- The string "`-->".`
+- At least one space.
+- Timestamp for end time.
 
-<p>If the WebVTT file is being used for chapters ({{HTMLElement("track")}} {{htmlattrxref("kind")}} is <code>chapters</code>) then the file cannot have overlapping timings.</p>
+  - Which must be greater than the start time.
 
-<p>Each cue timing contains five components:</p>
+The timestamps must be in one of two formats:
 
-<ul>
- <li>Timestamp for start time.</li>
- <li>At least one space.</li>
- <li>The string "<code>--&gt;".</code></li>
- <li>At least one space.</li>
- <li>Timestamp for end time.
-  <ul>
-   <li>Which must be greater than the start time.</li>
-  </ul>
- </li>
-</ul>
+- `mm:ss.ttt`
+- `hh:mm:ss.ttt`
 
-<p>The timestamps must be in one of two formats:</p>
+Where the components are defined as follows:
 
-<ul>
- <li><code>mm:ss.ttt</code></li>
- <li><code>hh:mm:ss.ttt</code></li>
-</ul>
+- `hh` is hours.
 
-<p>Where the components are defined as follows:</p>
+  - Must be at least two digits.
+  - Hours can be greater than two digits (e.g., 9999:00:00.000).
 
-<ul>
- <li><code>hh</code> is hours.
+- `mm` is minutes.
 
-  <ul>
-   <li>Must be at least two digits.</li>
-   <li>Hours can be greater than two digits (e.g., 9999:00:00.000).</li>
-  </ul>
- </li>
- <li><code>mm</code> is minutes.
-  <ul>
-   <li>Must be between 00 and 59 inclusive.</li>
-  </ul>
- </li>
- <li><code>ss</code> is seconds.
-  <ul>
-   <li>Must be between 00 and 59 inclusive.</li>
-  </ul>
- </li>
- <li><code>ttt</code> is milliseconds.
-  <ul>
-   <li>Must be between 000 and 999 inclusive.</li>
-  </ul>
- </li>
-</ul>
+  - Must be between 00 and 59 inclusive.
 
-<h5 id="Example_10_-_Basic_cue_timing_examples">Example 10 - Basic cue timing examples</h5>
+- `ss` is seconds.
 
-<pre class="brush: plain">00:00:22.230 --&gt; 00:00:24.606
-00:00:30.739 --&gt; 00:00:34.074
-00:00:34.159 --&gt; 00:00:35.743
-00:00:35.827 --&gt; 00:00:40.122</pre>
+  - Must be between 00 and 59 inclusive.
 
-<h5 id="Example_11_-_Overlapping_cue_timing_examples">Example 11 - Overlapping cue timing examples</h5>
+- `ttt` is milliseconds.
 
-<pre class="brush: plain">00:00:00.000 --&gt; 00:00:10.000
-00:00:05.000 --&gt; 00:01:00.000
-00:00:30.000 --&gt; 00:00:50.000</pre>
+  - Must be between 000 and 999 inclusive.
 
-<h5 id="Example_12_-_Non-overlapping_cue_timing_examples">Example 12 - Non-overlapping cue timing examples</h5>
+##### Example 10 - Basic cue timing examples
 
-<pre class="brush: plain">00:00:00.000 --&gt; 00:00:10.000
-00:00:10.000 --&gt; 00:01:00.581
-00:01:00.581 --&gt; 00:02:00.100
-00:02:01.000 --&gt; 00:02:01.000</pre>
+```plain
+00:00:22.230 --> 00:00:24.606
+00:00:30.739 --> 00:00:34.074
+00:00:34.159 --> 00:00:35.743
+00:00:35.827 --> 00:00:40.122
+```
 
-<h3 id="Cue_settings">Cue settings</h3>
+##### Example 11 - Overlapping cue timing examples
 
-<p>Cue settings are optional components used to position where the cue payload text will be displayed over the video. This includes whether the text is displayed horizontally or vertically. There can be zero or more of them, and they can be used in any order so long as each setting is used no more than once.</p>
+```plain
+00:00:00.000 --> 00:00:10.000
+00:00:05.000 --> 00:01:00.000
+00:00:30.000 --> 00:00:50.000
+```
 
-<p>The cue settings are added to the right of the cue timings. There must be one or more spaces between the cue timing and the first setting and between each setting. A setting's name and value are separated by a colon. The settings are case sensitive so use lower case as shown. There are five cue settings:</p>
+##### Example 12 - Non-overlapping cue timing examples
 
-<ul>
- <li><strong>vertical</strong>
+```plain
+00:00:00.000 --> 00:00:10.000
+00:00:10.000 --> 00:01:00.581
+00:01:00.581 --> 00:02:00.100
+00:02:01.000 --> 00:02:01.000
+```
 
-  <ul>
-   <li>Indicates that the text will be displayed vertically rather than horizontally, such as in some Asian languages.</li>
-  </ul>
+### Cue settings
+
+Cue settings are optional components used to position where the cue payload text will be displayed over the video. This includes whether the text is displayed horizontally or vertically. There can be zero or more of them, and they can be used in any order so long as each setting is used no more than once.
+
+The cue settings are added to the right of the cue timings. There must be one or more spaces between the cue timing and the first setting and between each setting. A setting's name and value are separated by a colon. The settings are case sensitive so use lower case as shown. There are five cue settings:
+
+- **vertical**
+
+  - Indicates that the text will be displayed vertically rather than horizontally, such as in some Asian languages.
 
   <table>
-   <thead>
-    <tr>
-     <th colspan="2">Table 1 - vertical values</th>
-    </tr>
-   </thead>
-   <tbody>
-    <tr>
-     <th><code>vertical:rl</code></th>
-     <td>writing direction is right to left</td>
-    </tr>
-    <tr>
-     <th><code>vertical:lr</code></th>
-     <td>writing direction is left to right</td>
-    </tr>
-   </tbody>
+    <thead>
+      <tr>
+        <th colspan="2">Table 1 - vertical values</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <th><code>vertical:rl</code></th>
+        <td>writing direction is right to left</td>
+      </tr>
+      <tr>
+        <th><code>vertical:lr</code></th>
+        <td>writing direction is left to right</td>
+      </tr>
+    </tbody>
   </table>
- </li>
- <li><strong>line</strong>
-  <ul>
-   <li>Specifies where text appears vertically. If vertical is set, line specifies where text appears horizontally.</li>
-   <li>Value can be a line number.
-    <ul>
-     <li>The line height is the height of the first line of the cue as it appears on the video.</li>
-     <li>Positive numbers indicate top down.</li>
-     <li>Negative numbers indicate bottom up.</li>
-    </ul>
-   </li>
-   <li>Or value can be a percentage.
-    <ul>
-     <li>Must be an integer (i.e., no decimals) between 0 and 100 inclusive.</li>
-     <li>Must be followed by a percent sign (%).</li>
-    </ul>
-   </li>
-  </ul>
+
+- **line**
+
+  - Specifies where text appears vertically. If vertical is set, line specifies where text appears horizontally.
+  - Value can be a line number.
+
+    - The line height is the height of the first line of the cue as it appears on the video.
+    - Positive numbers indicate top down.
+    - Negative numbers indicate bottom up.
+
+  - Or value can be a percentage.
+
+    - Must be an integer (i.e., no decimals) between 0 and 100 inclusive.
+    - Must be followed by a percent sign (%).
 
   <table>
-   <thead>
-    <tr>
-     <th colspan="4">Table 2 - line examples</th>
-    </tr>
-   </thead>
-   <tbody>
-    <tr>
-     <th></th>
-     <th><code>vertical</code> omitted</th>
-     <th><code>vertical:rl</code></th>
-     <th><code>vertical:lr</code></th>
-    </tr>
-    <tr>
-     <th><code>line:0</code></th>
-     <td>top</td>
-     <td>right</td>
-     <td>left</td>
-    </tr>
-    <tr>
-     <th><code>line:-1</code></th>
-     <td>bottom</td>
-     <td>left</td>
-     <td>right</td>
-    </tr>
-    <tr>
-     <th><code>line:0%</code></th>
-     <td>top</td>
-     <td>right</td>
-     <td>left</td>
-    </tr>
-    <tr>
-     <th><code>line:100%</code></th>
-     <td>bottom</td>
-     <td>left</td>
-     <td>right</td>
-    </tr>
-   </tbody>
+    <thead>
+      <tr>
+        <th colspan="4">Table 2 - line examples</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <th></th>
+        <th><code>vertical</code> omitted</th>
+        <th><code>vertical:rl</code></th>
+        <th><code>vertical:lr</code></th>
+      </tr>
+      <tr>
+        <th><code>line:0</code></th>
+        <td>top</td>
+        <td>right</td>
+        <td>left</td>
+      </tr>
+      <tr>
+        <th><code>line:-1</code></th>
+        <td>bottom</td>
+        <td>left</td>
+        <td>right</td>
+      </tr>
+      <tr>
+        <th><code>line:0%</code></th>
+        <td>top</td>
+        <td>right</td>
+        <td>left</td>
+      </tr>
+      <tr>
+        <th><code>line:100%</code></th>
+        <td>bottom</td>
+        <td>left</td>
+        <td>right</td>
+      </tr>
+    </tbody>
   </table>
- </li>
- <li><strong>position</strong>
-  <ul>
-   <li>Specifies where the text will appear horizontally. If vertical is set, position specifies where the text will appear vertically.</li>
-   <li>Value is a percentage.</li>
-   <li>Must be an integer (no decimals) between 0 and 100 inclusive.</li>
-   <li>Must be followed by a percent sign (%).</li>
-  </ul>
+
+- **position**
+
+  - Specifies where the text will appear horizontally. If vertical is set, position specifies where the text will appear vertically.
+  - Value is a percentage.
+  - Must be an integer (no decimals) between 0 and 100 inclusive.
+  - Must be followed by a percent sign (%).
 
   <table>
-   <thead>
-    <tr>
-     <th colspan="4">Table 3 - position examples</th>
-    </tr>
-   </thead>
-   <tbody>
-    <tr>
-     <th></th>
-     <th><code>vertical</code> omitted</th>
-     <th><code>vertical:rl</code></th>
-     <th><code>vertical:lr</code></th>
-    </tr>
-    <tr>
-     <th><code>position:0%</code></th>
-     <td>left</td>
-     <td>top</td>
-     <td>top</td>
-    </tr>
-    <tr>
-     <th><code>position:100%</code></th>
-     <td>right</td>
-     <td>bottom</td>
-     <td>bottom</td>
-    </tr>
-   </tbody>
+    <thead>
+      <tr>
+        <th colspan="4">Table 3 - position examples</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <th></th>
+        <th><code>vertical</code> omitted</th>
+        <th><code>vertical:rl</code></th>
+        <th><code>vertical:lr</code></th>
+      </tr>
+      <tr>
+        <th><code>position:0%</code></th>
+        <td>left</td>
+        <td>top</td>
+        <td>top</td>
+      </tr>
+      <tr>
+        <th><code>position:100%</code></th>
+        <td>right</td>
+        <td>bottom</td>
+        <td>bottom</td>
+      </tr>
+    </tbody>
   </table>
- </li>
- <li><strong>size</strong>
-  <ul>
-   <li>Specifies the width of the text area. If vertical is set, size specifies the height of the text area.</li>
-   <li>Value is a percentage.</li>
-   <li>Must be an integer (i.e., no decimals) between 0 and 100 inclusive.</li>
-   <li>Must be followed by a percent sign (%).</li>
-  </ul>
+
+- **size**
+
+  - Specifies the width of the text area. If vertical is set, size specifies the height of the text area.
+  - Value is a percentage.
+  - Must be an integer (i.e., no decimals) between 0 and 100 inclusive.
+  - Must be followed by a percent sign (%).
 
   <table>
-   <thead>
-    <tr>
-     <th colspan="4">Table 4 - size examples</th>
-    </tr>
-   </thead>
-   <tbody>
+    <thead>
+      <tr>
+        <th colspan="4">Table 4 - size examples</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <th></th>
+        <th><code>vertical</code> omitted</th>
+        <th><code>vertical:rl</code></th>
+        <th><code>vertical:lr</code></th>
+      </tr>
+      <tr>
+        <th><code>size:100%</code></th>
+        <td>full width</td>
+        <td>full height</td>
+        <td>full height</td>
+      </tr>
+      <tr>
+        <th><code>size:50%</code></th>
+        <td>half width</td>
+        <td>half height</td>
+        <td>half height</td>
+      </tr>
+    </tbody>
+  </table>
+
+- **align**
+
+  - Specifies the alignment of the text. Text is aligned within the space given by the size cue setting if it is set.
+
+  <table>
+    <thead>
+      <tr>
+        <th colspan="4">Table 5 - align values</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <th></th>
+        <th><code>vertical</code> omitted</th>
+        <th><code>vertical:rl</code></th>
+        <th><code>vertical:lr</code></th>
+      </tr>
+      <tr>
+        <th><code>align:start</code></th>
+        <td>left</td>
+        <td>top</td>
+        <td>top</td>
+      </tr>
+      <tr>
+        <th><code>align:center</code></th>
+        <td>centred horizontally</td>
+        <td>centred vertically</td>
+        <td>centred vertically</td>
+      </tr>
+      <tr>
+        <th><code>align:end</code></th>
+        <td>right</td>
+        <td>bottom</td>
+        <td>bottom</td>
+      </tr>
+    </tbody>
+  </table>
+
+##### Example 13 - Cue setting examples
+
+The first line demonstrates no settings. The second line might be used to overlay text on a sign or label. The third line might be used for a title. The last line might be used for an Asian language.
+
+```plain
+00:00:05.000 --> 00:00:10.000
+00:00:05.000 --> 00:00:10.000 line:63% position:72% align:start
+00:00:05.000 --> 00:00:10.000 line:0 position:20% size:60% align:start
+00:00:05.000 --> 00:00:10.000 vertical:rt line:-1 align:end
+```
+
+### Cue payload
+
+The payload is where the main information or content is located. In normal usage the payload contains the subtitles to be displayed. The payload text may contain newlines but it cannot contain a blank line, which is equivalent to two consecutive newlines. A blank line signifies the end of a cue.
+
+A cue text payload cannot contain the string "`-->"`, the ampersand character (&), or the less-than sign (<). Instead use the escape sequence "\&amp;" for ampersand and "\&lt;" for less-than. It is also recommended that you use the greater-than escape sequence "\&gt;" instead of the greater-than character (>) to avoid confusion with tags. If you are using the WebVTT file for metadata these restrictions do not apply.
+
+In addition to the three escape sequences mentioned above, there are fours others. They are listed in the table below.
+
+<table>
+  <thead>
     <tr>
-     <th></th>
-     <th><code>vertical</code> omitted</th>
-     <th><code>vertical:rl</code></th>
-     <th><code>vertical:lr</code></th>
+      <th colspan="3">Table 6 - Escape sequences</th>
     </tr>
+  </thead>
+  <tbody>
     <tr>
-     <th><code>size:100%</code></th>
-     <td>full width</td>
-     <td>full height</td>
-     <td>full height</td>
+      <th>Name</th>
+      <th>Character</th>
+      <th>Escape Sequence</th>
     </tr>
     <tr>
-     <th><code>size:50%</code></th>
-     <td>half width</td>
-     <td>half height</td>
-     <td>half height</td>
+      <td>Ampersand</td>
+      <td>&#x26;</td>
+      <td><code>&#x26;amp;</code></td>
     </tr>
-   </tbody>
-  </table>
- </li>
- <li><strong>align</strong>
-  <ul>
-   <li>Specifies the alignment of the text. Text is aligned within the space given by the size cue setting if it is set.</li>
-  </ul>
-
-  <table>
-   <thead>
     <tr>
-     <th colspan="4">Table 5 - align values</th>
+      <td>Less-than</td>
+      <td>&#x3C;</td>
+      <td><code>&#x26;lt;</code></td>
     </tr>
-   </thead>
-   <tbody>
     <tr>
-     <th></th>
-     <th><code>vertical</code> omitted</th>
-     <th><code>vertical:rl</code></th>
-     <th><code>vertical:lr</code></th>
+      <td>Greater-than</td>
+      <td>></td>
+      <td><code>&#x26;gt;</code></td>
     </tr>
     <tr>
-     <th><code>align:start</code></th>
-     <td>left</td>
-     <td>top</td>
-     <td>top</td>
+      <td>Left-to-right mark</td>
+      <td></td>
+      <td><code>&#x26;lrm;</code></td>
     </tr>
     <tr>
-     <th><code>align:center</code></th>
-     <td>centred horizontally</td>
-     <td>centred vertically</td>
-     <td>centred vertically</td>
+      <td>Right-to-left mark</td>
+      <td></td>
+      <td><code>&#x26;rlm;</code></td>
     </tr>
     <tr>
-     <th><code>align:end</code></th>
-     <td>right</td>
-     <td>bottom</td>
-     <td>bottom</td>
+      <td>Non-breaking space</td>
+      <td><code></code></td>
+      <td><code>&#x26;nbsp;</code></td>
     </tr>
-   </tbody>
-  </table>
- </li>
-</ul>
+  </tbody>
+</table>
 
-<h5 id="Example_13_-_Cue_setting_examples">Example 13 - Cue setting examples</h5>
+### Cue payload text tags
 
-<p>The first line demonstrates no settings. The second line might be used to overlay text on a sign or label. The third line might be used for a title. The last line might be used for an Asian language.</p>
+There are a number of tags, such as `<bold>`, that can be used. However, if the WebVTT file is used in a {{HTMLElement("track")}} element where the attribute {{htmlattrxref("kind")}} is `chapters` then you cannot use tags.
 
-<pre class="brush: plain">00:00:05.000 --&gt; 00:00:10.000
-00:00:05.000 --&gt; 00:00:10.000 line:63% position:72% align:start
-00:00:05.000 --&gt; 00:00:10.000 line:0 position:20% size:60% align:start
-00:00:05.000 --&gt; 00:00:10.000 vertical:rt line:-1 align:end
-</pre>
+- **Timestamp tag**
 
-<h3 id="Cue_payload">Cue payload</h3>
+  - The timestamp must be greater that the cue's start timestamp, greater than any previous timestamp in the cue payload, and less than the cue's end timestamp. The _active text_ is the text between the timestamp and the next timestamp or to the end of the payload if there is not another timestamp in the payload. Any text before the _active text_ in the payload is _previous text_ . Any text beyond the _active text_ is _future text_ . This enables karaoke style captions.
 
-<p>The payload is where the main information or content is located. In normal usage the payload contains the subtitles to be displayed. The payload text may contain newlines but it cannot contain a blank line, which is equivalent to two consecutive newlines. A blank line signifies the end of a cue.</p>
+  ##### Example 12 - Karaoke style text
 
-<p>A cue text payload cannot contain the string "<code>--&gt;"</code>, the ampersand character (&amp;), or the less-than sign (&lt;). Instead use the escape sequence "&amp;amp;" for ampersand and "&amp;lt;" for less-than. It is also recommended that you use the greater-than escape sequence "&amp;gt;" instead of the greater-than character (&gt;) to avoid confusion with tags. If you are using the WebVTT file for metadata these restrictions do not apply.</p>
+  ```plain
+  1
+  00:16.500 --> 00:18.500
+  When the moon <00:17.500>hits your eye
 
-<p>In addition to the three escape sequences mentioned above, there are fours others. They are listed in the table below.</p>
+  1
+  00:00:18.500 --> 00:00:20.500
+  Like a <00:19.000>big-a <00:19.500>pizza <00:20.000>pie
 
-<table>
- <thead>
-  <tr>
-   <th colspan="3">Table 6 - Escape sequences</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <th>Name</th>
-   <th>Character</th>
-   <th>Escape Sequence</th>
-  </tr>
-  <tr>
-   <td>Ampersand</td>
-   <td>&amp;</td>
-   <td><code>&amp;amp;</code></td>
-  </tr>
-  <tr>
-   <td>Less-than</td>
-   <td>&lt;</td>
-   <td><code>&amp;lt;</code></td>
-  </tr>
-  <tr>
-   <td>Greater-than</td>
-   <td>&gt;</td>
-   <td><code>&amp;gt;</code></td>
-  </tr>
-  <tr>
-   <td>Left-to-right mark</td>
-   <td></td>
-   <td><code>&amp;lrm;</code></td>
-  </tr>
-  <tr>
-   <td>Right-to-left mark</td>
-   <td></td>
-   <td><code>&amp;rlm;</code></td>
-  </tr>
-  <tr>
-   <td>Non-breaking space</td>
-   <td><code> </code></td>
-   <td><code>&amp;nbsp;</code></td>
-  </tr>
- </tbody>
-</table>
+  1
+  00:00:20.500 --> 00:00:21.500
+  That's <00:00:21.000>amore
+  ```
 
-<h3 id="Cue_payload_text_tags">Cue payload text tags</h3>
+The following tags are the HTML tags allowed in a cue and require opening and closing tags (e.g., `<b>text</b>`).
 
-<p>There are a number of tags, such as <code>&lt;bold&gt;</code>, that can be used. However, if the WebVTT file is used in a {{HTMLElement("track")}} element where the attribute {{htmlattrxref("kind")}} is <code>chapters</code> then you cannot use tags.</p>
+- **Class tag** (`<c></c>`)
 
-<ul>
- <li><strong>Timestamp tag</strong>
+  - Style the contained text using a CSS class.
 
-  <ul>
-   <li>The timestamp must be greater that the cue's start timestamp, greater than any previous timestamp in the cue payload, and less than the cue's end timestamp. The <em>active text</em> is the text between the timestamp and the next timestamp or to the end of the payload if there is not another timestamp in the payload. Any text before the <em>active text</em> in the payload is <em>previous text</em> . Any text beyond the <em>active text</em> is <em>future text</em> . This enables karaoke style captions.</li>
-  </ul>
+  ##### Example 14 - Class tag
 
-  <div>
-  <h5 id="Example_12_-_Karaoke_style_text">Example 12 - Karaoke style text</h5>
+  ```html
+  <c.classname>text</c>
+  ```
 
-  <pre class="brush: plain">1
-00:16.500 --&gt; 00:18.500
-When the moon &lt;00:17.500&gt;hits your eye
+- **Italics tag** (`<i></i>`)
 
-1
-00:00:18.500 --&gt; 00:00:20.500
-Like a &lt;00:19.000&gt;big-a &lt;00:19.500&gt;pizza &lt;00:20.000&gt;pie
+  - Italicize the contained text.
 
-1
-00:00:20.500 --&gt; 00:00:21.500
-That's &lt;00:00:21.000&gt;amore
-</pre>
-  </div>
- </li>
-</ul>
-
-<p>The following tags are the HTML tags allowed in a cue and require opening and closing tags (e.g., <code>&lt;b&gt;text&lt;/b&gt;</code>).</p>
-
-<ul>
- <li><strong>Class tag</strong> (<code>&lt;c&gt;&lt;/c&gt;</code>)
-
-  <ul>
-   <li>Style the contained text using a CSS class.</li>
-  </ul>
-
-  <div>
-  <h5 id="Example_14_-_Class_tag">Example 14 - Class tag</h5>
-
-  <pre class="brush: html">&lt;c.classname&gt;text&lt;/c&gt;</pre>
-  </div>
- </li>
- <li><strong>Italics tag</strong> (<code>&lt;i&gt;&lt;/i&gt;</code>)
-  <ul>
-   <li>Italicize the contained text.</li>
-  </ul>
-
-  <div>
-  <h5 id="Example_15_-_Italics_tag">Example 15 - Italics tag</h5>
-
-  <pre class="brush: html">&lt;i&gt;text&lt;/i&gt;</pre>
-  </div>
- </li>
- <li><strong>Bold tag</strong> (<code>&lt;b&gt;&lt;/b&gt;</code>)
-  <ul>
-   <li>Bold the contained text.</li>
-  </ul>
-
-  <div>
-  <h5 id="Example_16_-_Bold_tag">Example 16 - Bold tag</h5>
-
-  <pre class="brush: html">&lt;b&gt;text&lt;/b&gt;</pre>
-  </div>
- </li>
- <li><strong>Underline tag</strong> (<code>&lt;u&gt;&lt;/u&gt;</code>)
-  <ul>
-   <li>Underline the contained text.</li>
-  </ul>
-
-  <div>
-  <h5 id="Example_17_-_Underline_tag">Example 17 - Underline tag</h5>
-
-  <pre class="brush: html">&lt;u&gt;text&lt;/u&gt;</pre>
-  </div>
- </li>
- <li><strong>Ruby tag</strong> (<code>&lt;ruby&gt;&lt;/ruby&gt;</code>)
-  <ul>
-   <li>Used with ruby text tags to display <a href="https://en.wikipedia.org/wiki/Ruby_character">ruby characters</a> (i.e., small annotative characters above other characters).</li>
-  </ul>
-
-  <div>
-  <h5 id="Example_18_-_Ruby_tag">Example 18 - Ruby tag</h5>
-
-  <pre class="brush: html">&lt;ruby&gt;WWW&lt;rt&gt;World Wide Web&lt;/rt&gt;oui&lt;rt&gt;yes&lt;/rt&gt;&lt;/ruby&gt;</pre>
-  </div>
- </li>
- <li><strong>Ruby text tag</strong> (<code>&lt;rt&gt;&lt;/rt&gt;</code>)
-  <ul>
-   <li>Used with ruby tags to display <a href="https://en.wikipedia.org/wiki/Ruby_character">ruby characters</a> (i.e., small annotative characters above other characters).</li>
-  </ul>
-
-  <div>
-  <h5 id="Example_19_-_Ruby_text_tag">Example 19 - Ruby text tag</h5>
-
-  <pre class="brush: html">&lt;ruby&gt;WWW&lt;rt&gt;World Wide Web&lt;/rt&gt;oui&lt;rt&gt;yes&lt;/rt&gt;&lt;/ruby&gt;</pre>
-  </div>
- </li>
- <li><strong>Voice tag</strong> (<code>&lt;v&gt;&lt;/v&gt;</code>)
-  <ul>
-   <li>Similar to class tag, also used to style the contained text using CSS.</li>
-  </ul>
-
-  <div>
-  <h5 id="Example_20_-_Voice_tag">Example 20 - Voice tag</h5>
-
-  <pre class="brush: html">&lt;v Bob&gt;text&lt;/v&gt;</pre>
-  </div>
- </li>
-</ul>
-
-<h2 id="Methods_and_properties">Methods and properties</h2>
-
-<p>The methods used in WebVTT are those which are used to alter the cue or region as the attributes for both interfaces are different. We can categorize them for better understanding relating to each interface in WebVTT:</p>
-
-<ul>
- <li>
-  <h3 id="VTTCue">VTTCue</h3>
-
-  <ul>
-   <li>The methods which are available in this interface are:
-    <ul>
-     <li>GetCueAsHTML to get the HTML of that Cue.</li>
-     <li>VTT Constructor for creating new objects of Cues.</li>
-     <li>Autokeyword.</li>
-     <li>DirectionSetting: to set the direction of caption or text in a file.</li>
-     <li>LineAlignment: to adjust the line alignment.</li>
-     <li>PositionAlignSetting: to adjust the position of text.</li>
-    </ul>
-   </li>
-  </ul>
- </li>
- <li>
-  <h3 id="VTTRegion">VTTRegion</h3>
-
-  <ul>
-   <li>The methods used for region are listed below along with description of their functionality:
-    <ul>
-     <li>ScrollSetting: For adjusting the scrolling setting of all nodes present in given region.</li>
-     <li>VTT Region Constructor: for construction of new VTT Regions.</li>
-    </ul>
-   </li>
-  </ul>
- </li>
-</ul>
-
-<h2 id="Tutorial_on_how_to_write_a_WebVTT_file">Tutorial on how to write a WebVTT file</h2>
-
-<p>There are few steps that can be followed to write a simple webVTT file. Before start, it must be noted that you can make use of a notepad and then save the file as ‘.vtt’ file. Steps are given below:</p>
-
-<ol>
- <li>Open a notepad.</li>
- <li>The first line of WebVTT is standardized similar to the way some other languages require you to put headers as the file starts to indicate the file type. On the very first line you have to write:</li>
-</ol>
-
-<pre class="brush: plain">WEBVTT</pre>
-
-<p>Leave the second line blank, and on the third line the time for first cue is to be specified. For example, for a first cue starting at time 1 second and ending at 5 seconds, it is written as:</p>
-
-<pre class="brush: plain">00:01.000 --&gt; 00:05.000</pre>
-
-<ol>
- <li>On the next line you can write the caption for this cue which will run from the first second to the fifth second, inclusive.</li>
- <li>Following the similar steps, a complete WebVTT file for specific video or audio file can be made.</li>
-</ol>
-
-<h2 id="CSS_pseudo-classes">CSS pseudo-classes</h2>
-
-<p>CSS pseudo classes allow us to classify the type of object which we want to differentiate from other types of objects. It works in similar manner in WebVTT files as it works in HTML file.</p>
-
-<p>It is one of the good features supported by WebVTT is the localization and use of class elements which can be used in same way they are used in HTML and CSS to classify the style for particular type of objects, but here these are used for styling and classifying the Cues as shown below:</p>
-
-<pre class="brush: plain">WEBVTT
-
-04:02.500 --&gt; 04:05.000
+  ##### Example 15 - Italics tag
+
+  ```html
+  <i>text</i>
+  ```
+
+- **Bold tag** (`<b></b>`)
+
+  - Bold the contained text.
+
+  ##### Example 16 - Bold tag
+
+  ```html
+  <b>text</b>
+  ```
+
+- **Underline tag** (`<u></u>`)
+
+  - Underline the contained text.
+
+  ##### Example 17 - Underline tag
+
+  ```html
+  <u>text</u>
+  ```
+
+- **Ruby tag** (`<ruby></ruby>`)
+
+  - Used with ruby text tags to display [ruby characters](https://en.wikipedia.org/wiki/Ruby_character) (i.e., small annotative characters above other characters).
+
+  ##### Example 18 - Ruby tag
+
+  ```html
+  <ruby>WWW<rt>World Wide Web</rt>oui<rt>yes</rt></ruby>
+  ```
+
+- **Ruby text tag** (`<rt></rt>`)
+
+  - Used with ruby tags to display [ruby characters](https://en.wikipedia.org/wiki/Ruby_character) (i.e., small annotative characters above other characters).
+
+  ##### Example 19 - Ruby text tag
+
+  ```html
+  <ruby>WWW<rt>World Wide Web</rt>oui<rt>yes</rt></ruby>
+  ```
+
+- **Voice tag** (`<v></v>`)
+
+  - Similar to class tag, also used to style the contained text using CSS.
+
+  ##### Example 20 - Voice tag
+
+  ```html
+  <v Bob>text</v>
+  ```
+
+## Methods and properties
+
+The methods used in WebVTT are those which are used to alter the cue or region as the attributes for both interfaces are different. We can categorize them for better understanding relating to each interface in WebVTT:
+
+- ### VTTCue
+
+  - The methods which are available in this interface are:
+
+    - GetCueAsHTML to get the HTML of that Cue.
+    - VTT Constructor for creating new objects of Cues.
+    - Autokeyword.
+    - DirectionSetting: to set the direction of caption or text in a file.
+    - LineAlignment: to adjust the line alignment.
+    - PositionAlignSetting: to adjust the position of text.
+
+- ### VTTRegion
+
+  - The methods used for region are listed below along with description of their functionality:
+
+    - ScrollSetting: For adjusting the scrolling setting of all nodes present in given region.
+    - VTT Region Constructor: for construction of new VTT Regions.
+
+## Tutorial on how to write a WebVTT file
+
+There are few steps that can be followed to write a simple webVTT file. Before start, it must be noted that you can make use of a notepad and then save the file as ‘.vtt’ file. Steps are given below:
+
+1.  Open a notepad.
+2.  The first line of WebVTT is standardized similar to the way some other languages require you to put headers as the file starts to indicate the file type. On the very first line you have to write:
+
+```plain
+WEBVTT
+```
+
+Leave the second line blank, and on the third line the time for first cue is to be specified. For example, for a first cue starting at time 1 second and ending at 5 seconds, it is written as:
+
+```plain
+00:01.000 --> 00:05.000
+```
+
+1.  On the next line you can write the caption for this cue which will run from the first second to the fifth second, inclusive.
+2.  Following the similar steps, a complete WebVTT file for specific video or audio file can be made.
+
+## CSS pseudo-classes
+
+CSS pseudo classes allow us to classify the type of object which we want to differentiate from other types of objects. It works in similar manner in WebVTT files as it works in HTML file.
+
+It is one of the good features supported by WebVTT is the localization and use of class elements which can be used in same way they are used in HTML and CSS to classify the style for particular type of objects, but here these are used for styling and classifying the Cues as shown below:
+
+```plain
+WEBVTT
+
+04:02.500 --> 04:05.000
 J’ai commencé le basket à l'âge de 13, 14 ans
 
-04:05.001 --&gt; 04:07.800
-Sur les &lt;i.foreignphrase&gt;&lt;lang en&gt;playground&lt;/lang&gt;&lt;/i&gt;, ici à Montpellier</pre>
+04:05.001 --> 04:07.800
+Sur les <i.foreignphrase><lang en>playground</lang></i>, ici à Montpellier
+```
 
-<p>In the above example it can be observed that we can use the identifier and pseudo class name for defining the language of caption, where <code>&lt;i&gt;</code> tag is for italics.</p>
+In the above example it can be observed that we can use the identifier and pseudo class name for defining the language of caption, where `<i>` tag is for italics.
 
-<p>The type of pseudo class is determined by the selector it is using and working is similar in nature as it works in HTML. Following CSS pseudo classes can be used:</p>
+The type of pseudo class is determined by the selector it is using and working is similar in nature as it works in HTML. Following CSS pseudo classes can be used:
 
-<ul>
- <li>Lang (Lanugage): e.g., p:lang(it).</li>
- <li>Link: e.g., a:link.</li>
- <li>Nth-last-child: e.g., p:nth-last-child(2).</li>
- <li>Nth-child(n): e.g., p:nth-child(2).</li>
-</ul>
+- Lang (Lanugage): e.g., p:lang(it).
+- Link: e.g., a:link.
+- Nth-last-child: e.g., p:nth-last-child(2).
+- Nth-child(n): e.g., p:nth-child(2).
 
-<p>Where p and a are the tags which are used in HTML for paragraph and link, respectively and they can be replaced by identifiers which are used for Cues in WebVTT file.</p>
+Where p and a are the tags which are used in HTML for paragraph and link, respectively and they can be replaced by identifiers which are used for Cues in WebVTT file.
 
-<h2 id="Specifications">Specifications</h2>
+## Specifications
 
-<table>
- <tbody>
-  <tr>
-   <th>Specification</th>
-  </tr>
-  <tr>
-   <td><a href="https://w3c.github.io/webvtt/">WebVTT: The Web Video Text Tracks Format</a></td>
-  </tr>
- </tbody>
-</table>
+| Specification                                                             |
+| ------------------------------------------------------------------------- |
+| [WebVTT: The Web Video Text Tracks Format](https://w3c.github.io/webvtt/) |
 
-<h2 id="Browser_compatibility">Browser compatibility</h2>
+## Browser compatibility
 
-<h3 id="VTTCue_interface_2"><code>VTTCue</code> interface</h3>
+### `VTTCue` interface
 
-<p>{{Compat("api.VTTCue", 0)}}</p>
+{{Compat("api.VTTCue", 0)}}
 
-<h3 id="TextTrack_interface"><code>TextTrack</code> interface</h3>
+### `TextTrack` interface
 
-<p>{{Compat("api.TextTrack", 0)}}</p>
+{{Compat("api.TextTrack", 0)}}
 
-<h3 id="Notes">Notes</h3>
+### Notes
 
-<p>Prior to Firefox 50, the <code>AlignSetting</code> enum (representing possible values for {{domxref("VTTCue.align")}}) incorrectly included the value <code>"middle"</code> instead of <code>"center"</code>. This has been corrected.</p>
+Prior to Firefox 50, the `AlignSetting` enum (representing possible values for {{domxref("VTTCue.align")}}) incorrectly included the value `"middle"` instead of `"center"`. This has been corrected.
 
-<p>WebVTT was implemented in Firefox 24 behind the preference {{pref("media.webvtt.enabled")}}, which is disabled by default; you can enable it by setting this preference to <code>true</code>. WebVTT is enabled by default starting in Firefox 31 and can be disabled by setting the preference to <code>false</code>.</p>
+WebVTT was implemented in Firefox 24 behind the preference {{pref("media.webvtt.enabled")}}, which is disabled by default; you can enable it by setting this preference to `true`. WebVTT is enabled by default starting in Firefox 31 and can be disabled by setting the preference to `false`.
 
-<p>Prior to Firefox 58, the <code>REGION</code> keyword was creating {{domxref("VTTRegion")}} objects, but they were not being used. Firefox 58 now fully supports <code>VTTRegion</code> and its use; however, this feature is disabled by default behind the preference <code>media.webvtt.regions.enabled</code>; set it to <code>true</code> to enable region support in Firefox 58. Regions are enabled by default starting in Firefox 59 (see bugs {{bug(1338030)}} and {{bug(1415805)}}).</p>
+Prior to Firefox 58, the `REGION` keyword was creating {{domxref("VTTRegion")}} objects, but they were not being used. Firefox 58 now fully supports `VTTRegion` and its use; however, this feature is disabled by default behind the preference `media.webvtt.regions.enabled`; set it to `true` to enable region support in Firefox 58. Regions are enabled by default starting in Firefox 59 (see bugs {{bug(1338030)}} and {{bug(1415805)}}).
diff --git a/files/fr/web/api/webxr_device_api/index.md b/files/fr/web/api/webxr_device_api/index.md
index 86781da1b7..512cc85f97 100644
--- a/files/fr/web/api/webxr_device_api/index.md
+++ b/files/fr/web/api/webxr_device_api/index.md
@@ -11,193 +11,160 @@ tags:
   - WebXR API
 translation_of: Web/API/WebXR_Device_API
 ---
-<p>{{DefaultAPISidebar("WebXR Device API")}}</p>
+{{DefaultAPISidebar("WebXR Device API")}}
 
-<p><strong>WebXR</strong> est un ensemble de standards utilisés pour supporter le rendu de scènes 3D vers du matériel conçu pour présenter des mondes virtuels (<strong>Réalité Virtuelle</strong>, ou <strong>VR</strong>), ou pour ajouter des contenus graphiques dans le monde réel, (<strong>Réalité Augmentée</strong>, ou <strong>AR</strong>).</p>
-
-<p>L'<strong>API de périphérique WebXR </strong>implémente le coeur des fonctionnalités WebXR, gère la sélection de périphériques de sortie, affiche la scène 3D sur le périphérique choisi à la fréquence d'images appropriée, et gère les vecteurs de mouvement créés en utilisant les contrôleurs d'entrée.</p>
-
-<p>Les périphèriques compatibles WebXR comprennent les casques 3D entièrement immersifs avec le suivi du mouvement et de l'orientation, les lunettes qui supperposent des contenus graphiques par dessus la scène du monde réel au travers des images, et les smartphones qui augmentent la realité en capturant le monde via une camera et en qui augmentent la scène avec des images générées par ordinateur.</p>
-
-<p>Pour accomplir toutes ces choses, l'API de périphériques WebXR fournit les fonctionnalités clés suivantes:</p>
+**WebXR** est un ensemble de standards utilisés pour supporter le rendu de scènes 3D vers du matériel conçu pour présenter des mondes virtuels (**Réalité Virtuelle**, ou **VR**), ou pour ajouter des contenus graphiques dans le monde réel, (**Réalité Augmentée**, ou **AR**).
 
-<ul>
- <li>Trouver un périphérique de sortie VR ou AR compatible</li>
- <li>Afficher une scène 3D sur le périphérique à la fréquence d'images appropriée</li>
- <li>(Optionellement) refléter la sortie sur un affichage 2D</li>
- <li>Créer des vecteurs représentant les mouvements des commandes d'entrée</li>
-</ul>
-
-<p>Au niveau le plus basique, une scène est présentée en 3D en calculant la perspective à appliquer à la scène dans le but de l'afficher du point de vue de chacun des yeux de l'utilisateur en calculant la position de chaque oeil et en affichant la scène de cette position, regardant dans la même direction que l'utilisateur. Ces deux images sont conçuent à l'intérieur d'une seule mémoire tampon, avec l'image de rendu pour l'oeil gauche dans la partie gauche et l'image de rendu de l'oeil droit dans la partie droite de la mémoire tampon. Une fois que les perspectives des deux yeux sur la scène ont été conçues, la mémoire résultante est délivrée au périphérique WebXR pour être présentée à l'utilisateur via son casque ou tout autre périphérique d'affichage approprié.</p>
-
-<h2 id="Les_concepts_et_lutilisation_des_périphériques_WebXR">Les concepts et l'utilisation des périphériques WebXR</h2>
-
-<p>Alors que l'ancienne <a href="/en-US/docs/Web/API/WebVR_API">WebVR API</a> avait été conçue uniquement pour le support de la réalité virtuelle (VR), l'API WebXR supporte à la fois la VR et la réalité augmentée (AR) sur le web. Le support pour la fonctionnalité de réalité augmentée est ajouté par le module WebXR Augmented Reality.</p>
-
-<p>Un périphérique XR typique peut avoir aussi bien 3 que 6 degrés de liberté et peut ou non posséder un capteur de position externe.</p>
-
-<p>L'équipement peut également inclure un accéléromètre, un baromètre, ou d'autres capteurs qui sont utilisés pour détecter lorsque l'utilisateur se déplace dans l'espace, tourne sa tête, ou similaires.</p>
-
-<h2 id="Accéder_à_lAPI_WebXR">Accéder à l'API WebXR</h2>
-
-<p>Pour accéder à l'API WebXR à l'intérieur du contexte d'une fenêtre donnée, utiliser la propriété {{domxref("navigator.xr")}}, qui retourne un objet {{domxref("XRSystem")}} au travers duquel toute l'API de périphérique WebXR Device API est alors exposée.</p>
-
-<dl>
- <dt>{{domxref("navigator.xr")}} {{ReadOnlyInline}}</dt>
- <dd>Cette propriété, ajoutée à l'interface {{domxref("Navigator")}}, retourne l'objet  {{domxref("XRSystem")}} au travers duquel l'API WebXR est exposée. Si cette propriété est missing ou <code>null</code>, WebXR n'est pas disponible.</dd>
-</dl>
-
-<h2 id="Les_interfaces_WebXR">Les interfaces WebXR</h2>
-
-<dl>
- <dt>{{DOMxRef("XRSystem")}}</dt>
- <dd>La propriété {{domxref("Navigator.xr", "navigator.xr")}} retourne l'instance de la fenêtre de {{domxref("XRSystem")}}, qui est le mécanisme par lequel votre code acède à l'API WebXR. En utilisant l'interface <code>XRSystem</code>, vous pouvez créer {{domxref("XRSession")}} pour représenter les sessions AR et/ou VR actuelles.</dd>
- <dt>{{DOMxRef("XRFrame")}}</dt>
- <dd>Lors de la présentation d'une session XR, l'état de tous les objets suivis qui composent la session sont représentés par une <code>XRFrame</code>. Pour obtenir un <code>XRFrame</code>, appeler la méthode {{domxref("XRSession.requestAnimationFrame", "requestAnimationFrame()")}} de la session, en fournissant un callback qui sera appelé avec le <code>XRFrame</code> une fois disponible. Les événements qui communiquent avec des états de suivi utiliseront aussi <code>XRFrame</code> pour contenir ces informations.</dd>
- <dt>{{DOMxRef("XRRenderState")}}</dt>
- <dd>Fournis un ensemble de propriétés configurables qui changent la façon dont les images produites par une <code>XRSession</code> sont composées.</dd>
- <dt>{{DOMxRef("XRSession")}}</dt>
- <dd>Fournit l'interface pour interagir avec le matériel XR. Une fois que la <code>XRSession</code> est obtenue depuis {{domxref("XRSystem.requestSession", "navigator.xr.requestSession()")}}, la session peut être utilisée pour vérifier la position et l'orientation du visualiseur, interroger le périphérique pour obtenir des informations sur l'environnement, et présenter le monde virtuel ou augmenté à l'utilisateur.</dd>
- <dt>{{DOMxRef("XRSpace")}}</dt>
- <dd><code>XRSpace</code> est une classe de base opaque sur laquelle toutes les interfaces de système de coordonnées virtuelles sont basées. Les positions dans WebXR sotn toujours exprimées par rapport à un <code>XRSpace</code> particulier au moment où un {{domxref("XRFrame")}} a lieu. Ce système de coordonnées dans l'espace a son origine à une position physique donnée.</dd>
- <dt>{{DOMxRef("XRReferenceSpace")}}</dt>
- <dd>Une sous classe de {{domxref("XRSpace")}} qui est utilisée pour identifier une relation spatiale en relation avec l'environnement physique de l'utilisateur. Le système de coordonées <code>XRReferenceSpace</code> devrait rester inchangé pendant toute la durée de vie du {{domxref("XRSession")}}. Le monde n'a pas de frontières et s'étend infiniment dans toutes les directions.</dd>
- <dt>{{DOMxRef("XRBoundedReferenceSpace")}}</dt>
- <dd><code>XRBoundedReferenceSpace</code> étend le système de coordonées {{domxref("XRReferenceSpace")}} pour inclure en plus la prise en charge d'un monde aux limites définies. Contrairement à <code>XRReferenceSpace</code>, l'origine doit être localisée au niveau du sol (c'est à dire <em>y</em> = 0). Les composantes x et z de l'origine sont présumées être localisées au centre ou à proximité du centre de la pièce ou de la surface.</dd>
- <dt>{{DOMxRef("XRView")}}</dt>
- <dd>Représente une vue unique dans la scène XR pour une image particulière. Chaque XRView correspond à la surface d'affichage vidéo utilisée pour présenter la scène à l'utilisateur. Par exemple, un appareil XR donné peut avoir deux vues: une pour l'œil gauche et une pour la droite. Chaque vue a un décalage utilisé pour déplacer la position de la vue par rapport à la caméra, afin de permettre la création d'effets stéréographiques.</dd>
- <dt>{{DOMxRef("XRViewport")}}</dt>
- <dd>Décrit un viewport. Un viewport est une partie rectangulaire d'une surface graphique. Dans WebXR, un viewport représente la zone d'une surface de dessin correspondant à un {{domxref ("XRView")}} particulier, tel que la partie de l'image tampon WebGL utilisée pour rendre l'une des perspectives des deux yeux sur la scène.</dd>
- <dt>{{DOMxRef("XRRigidTransform")}}</dt>
- <dd>Une transformation définie en utilisant une position et une orientation dans le système de coordonnées de l'espace virtuel comme décrit par le {{domxref ("XRSpace")}}.</dd>
- <dt>{{DOMxRef("XRPose")}}</dt>
- <dd>Décrit une position et une orientation dans l'espace par rapport à un {{domxref ("XRSpace")}}.</dd>
- <dt>{{DOMxRef("XRViewerPose")}}</dt>
- <dd>Basé sur {{domxref("XRPose")}}, <code>XRViewerPose</code> spécifie l'état d'un spectateur de la scène WebXR comme indiqué par le périphérique XR. Un tableau d'objets {{domxref ("XRView")}} est inclus, chacun représentant une perspective de la scène. Par exemple, il faut deux vues pour créer la vue stéréoscopique telle que perçue par la vision humaine: une pour l'œil gauche et une seconde pour l'œil droit. Une vue est légèrement décalée vers la gauche par rapport à la position du visualiseur et l'autre vue est décalée vers la droite de la même distance. La liste de vues peut également être utilisée pour représenter les perspectives de chacun des spectateurs d'une scène, dans un environnement multi-utilisateurs.</dd>
- <dt>{{DOMxRef("XRInputSource")}}</dt>
- <dd>Représente tout périphérique d'entrée que l'utilisateur peut utiliser pour effectuer des actions ciblées dans le même espace virtuel que le visualiseur. Les sources d'entrée peuvent inclure des dispositifs tels que des contrôleurs manuels, des systèmes de suivi optique et d'autres dispositifs explicitement associés au dispositif XR. Les autres périphériques d'entrée tels que les claviers, les souris et les manettes de jeu ne sont pas présentés comme des instances <code>XRInputSource</code>.</dd>
- <dt>{{DOMxRef("XRWebGLLayer")}}</dt>
- <dd>Une couche qui sert de tampon d'image <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a> dans lequel la vue d'une scène est rendue. L'utilisation de WebGL pour afficher la scène offre des avantages de performances substantiels grâce à l'accélération graphique.</dd>
-</dl>
-
-<h3 id="Interfaces_événementielles">Interfaces événementielles</h3>
-
-<p>Les interfaces suivantes sont utilisées pour représenter les événements utilisés par l'API WebXR.</p>
-
-<dl>
- <dt>{{domxref("XRInputSourceEvent")}}</dt>
- <dd>Envoyé lorsque l'état d'un {{domxref ("XRInputSource")}} change. Cela peut se produire, par exemple, lorsque la position et/ou l'orientation de l'appareil change, ou lorsque des boutons sont enfoncés ou relâchés.</dd>
- <dt>{{domxref("XRInputSourcesChangeEvent")}}</dt>
- <dd>Envoyé pour indiquer que l'ensemble des sources d'entrée disponibles a changé pour le {{domxref ("XRSession")}}.</dd>
- <dt>{{domxref("XRReferenceSpaceEvent")}}</dt>
- <dd>Envoyé lorsque l'état d'un {{domxref ("XRReferenceSpace")}} change.</dd>
- <dt>{{domxref("XRSessionEvent")}}</dt>
- <dd>Envoyé pour indiquer que l'état d'un {{domxref ("XRSession")}} a changé. Par exemple, si la position et/ou l'orientation</dd>
-</dl>
-
-<h2 id="Extensions_de_lAPI_WebGL">Extensions de l'API WebGL</h2>
-
-<p>L'API WebGL est étendue par la spécification WebXR pour augmenter le contexte WebGL afin de lui permettre d'être utilisée pour afficher des vues dans un périphérique WebXR.</p>
-
-<dl>
- <dt>{{domxref("WebGLRenderingContextBase.makeXRCompatibile","WebGLRenderingContextBase.makeXRCompatibile()")}}</dt>
- <dd>Configure le contexte WebGL pour qu'il soit compatible avec WebXR. Si le contexte n'a pas été créé initialement avec la propriété {{domxref ("WebGLContextAttributes.xrCompatible", "xrCompatible")}} définie sur <code>true</code>, vous devez appeler <code>makeXRCompatible()</code> avant d'essayer d'utiliser le contexte WebGL pour le rendu WebXR. Renvoie un {{jsxref ("Promise")}} qui se résout une fois que le contexte a été préparé, ou est rejeté si le contexte ne peut pas être configuré pour être utilisé par WebXR.</dd>
-</dl>
-
-<h2 id="Guides_et_tutoriels">Guides et tutoriels</h2>
-
-<p>Les guides et didacticiels suivants sont une excellente ressource pour apprendre à comprendre WebXR et les concepts graphiques 3D/VR/AR sous-jacents.</p>
-
-<h3 id="Les_bases">Les bases</h3>
-
-<dl>
- <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Fundamentals">Fundamentals of WebXR</a></dt>
- <dd>Avant de plonger dans les détails de la création de contenu à l'aide de WebXR, il peut être utile de lire cet aperçu de la technologie, qui comprend des introductions à une terminologie qui peut ne pas vous être familière ou qui peut être utilisée d'une nouvelle manière.</dd>
- <dt><a href="/en-US/docs/Web/API/WebGL_API/Matrix_math_for_the_web">Matrix math for the web</a></dt>
- <dd>Un guide expliquant comment les matrices peuvent être utilisées sur le Web, y compris pour les transformations CSS et à des fins WebGL, ainsi que pour gérer le positionnement et l'orientation des objets dans des contextes WebXR.</dd>
- <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Lifecycle">WebXR application life cycle </a></dt>
- <dd>An overview of the overall life cycle of a WebXR application, from startup to shutdown. This article serves as an introduction to the basics of what's involved in creating a WebXR experience without diving into the code in detail. It's a good way to prepare for the next steps.Un aperçu du cycle de vie global d'une application WebXR, du démarrage à l'arrêt. Cet article sert d'introduction aux bases de ce qu'implique la création d'une expérience WebXR sans plonger dans le code en détail. C'est un bon moyen de se préparer aux prochaines étapes.</dd>
-</dl>
-
-<h3 id="Créer_une_expérience_de_réalité_mixte">Créer une expérience de réalité mixte</h3>
-
-<dl>
- <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Startup_and_shutdown">Starting up and shutting down a WebXR session</a></dt>
- <dd>Avant de présenter une scène à l'aide d'un appareil XR tel qu'un casque ou des lunettes, vous avez besoin de créer une session WebXR liée à une couche de rendu qui dessine la scène pour la présentation dans chacun des écrans de l'appareil XR pour que l'effet 3D puisse être présenté à l'utilisateur. Ce guide explique comment créer et arrêter des sessions WebXR.</dd>
- <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Geometry">Geometry and reference spaces in WebXR</a></dt>
- <dd>Dans ce guide, les concepts requis de la géométrie 3D sont brièvement passés en revue, et les fondamentaux de cette géométrie représentés dans WebXR sont détaillés. Apprenez comment les espaces de référence sont utilisés pour positionner les objets - et le visualiseur - et les différences entre les types d'espace de référence disponibles, ainsi que leurs cas d'utilisation.</dd>
- <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Spatial_tracking">Spatial tracking in WebXR</a></dt>
- <dd>Ce guide décrit comment les objets—incluant le corps de l'utilisateur et ses parties—sont situés dans l'espace, et comment leur mouvement et leur orientation les uns par rapport aux autres sont surveillés et gérés au fil du temps. Cet article explique la relation entre les espaces, les poses/attitudes, les spectateurs et les vues.</dd>
- <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Rendering">Rendering and the WebXR frame animation callback</a></dt>
- <dd>En commençant par la planification des images à afficher, ce guide explique ensuite comment déterminer le placement des objets dans la vue et comment les afficher dans la mémoire tampon WebGL utilisée pour chacune des deux vues de la scène pour les deux yeux.</dd>
- <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Cameras">Viewpoints and viewers: Simulating cameras in WebXR </a></dt>
- <dd> through a world in which the viewer doesn't really move.WebGL (et donc WebXR) n'a pas vraiment de concept de caméra, qui est le concept traditionnel utilisé pour représenter un point de vue dans les graphiques 3D. Dans cet article, nous voyons comment simuler une caméra et comment créer l'illusion de déplacer un spectateur dans un monde même si ce n'est pas le cas.</dd>
- <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Lighting">Lighting a WebXR setting</a></dt>
- <dd>Le rendu WebXR étant basé sur WebGL, les mêmes techniques d'éclairage utilisées pour toute application 3D sont appliquées aux scènes WebXR. Cependant, il existe des problèmes spécifiques à la création de paramètres de réalité augmentée et virtuelle qui doivent être pris en compte lors de l'écriture de votre code d'éclairage. Cet article traite de ces problèmes.</dd>
- <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Bounded_reference_spaces">Using bounded reference spaces</a></dt>
- <dd>Dans cet article, nous examinons comment utiliser un espace de référence <code>bounded-floor</code> pour définir les limites des endroits où le spectateur peut se déplacer en toute sécurité sans quitter la zone suivie par son matériel XR ou entrer en collision avec un obstacle physique. Sur les appareils qui le prennent en charge, le <code>bounded-floor</code> peut être un outil utile dans votre répertoire.</dd>
-</dl>
-
-<h3 id="Rendre_interactif">Rendre interactif</h3>
-
-<dl>
- <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Movement_and_motion">Movement, orientation, and motion: A WebXR example</a></dt>
- <dd>Dans cet exemple et tutoriel, nous utilisons les informations apprises tout au long de la documentation WebXR pour créer une scène contenant un cube et l'utilisateur peut déplacer autour en utilisant à la fois le casque VR, le clavier et la souris.</dd>
- <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Inputs">Inputs and input sources</a></dt>
- <dd>Un guide sur les sources d'entrée et comment gérer efficacement les périphériques d'entrée utilisés pour contrôler la session WebXR, et comment recevoir et traiter les entrées utilisateur de ces périphériques.</dd>
- <dt><a href="/en-US/docs/Web/API/Web_Audio_API/Targeting">Targeting and hit detection </a></dt>
- <dd>Comment utiliser le mode rayon de ciblage et l'espace de rayon de ciblage d'une source d'entrée pour afficher un rayon de ciblage, identifier les surfaces ou les objets ciblés et effectuer des tâches associées.</dd>
- <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Input_profiles">Using WebXR input profiles</a></dt>
- <dd>Un guide pour interpréter les données {{Glossary ("JSON")}} fournies par le <a href="https://github.com/immersive-web/webxr-input-profiles/tree/master/packages/registry">WebXR Input Profiles Registry</a>, qui peut être utilisé pour déterminer les options et commandes disponibles sur les périphériques d'entrée de l'utilisateur.</dd>
- <dt><a href="/en-US/docs/Web/WebXR_Device_API/Gamepads">Supporting advanced controllers and gamepads in WebXR applications</a></dt>
- <dd>WebXR utilise l'objet {{domxref ("Gamepad")}} pour décrire les commandes disponibles sur les périphériques d'entrée complexes (tels que les manettes avec plusieurs boutons et/ou axes) et les périphériques tels que les manettes de jeu. Dans ce guide, découvrez comment faire usage des commandes de ces périphériques.</dd>
-</dl>
-
-<h3 id="Performance_and_sécurité">Performance and sécurité</h3>
-
-<dl>
- <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Performance">WebXR performance guide</a></dt>
- <dd>Recommandations et astuces pour vous aider à optimiser les performances de votre application WebXR.</dd>
- <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Permissions_and_security">Permissions and security for WebXR</a></dt>
- <dd>L'API de périphérique WebXR doit faire face à de nombreux domaines de sécurité, de l'établissement d'une politique de fonctionnalité à l'assurance que l'utilisateur a l'intention d'utiliser la présentation en réalité mixte avant de l'activer.</dd>
-</dl>
-
-<h3 id="Inclure_dautres_médias">Inclure d'autres médias</h3>
-
-<dl>
- <dt><a href="/en-US/docs/Web/Media/3D_audio">Positional audio in a 3D environment</a></dt>
- <dd>Dans les environnements 3D, qui peuvent être soit des scènes 3D rendues à l'écran, soit une expérience de réalité mixte expérimentée à l'aide d'un casque, il est important que l'audio soit exécuté de sorte qu'il semble provenir de la direction de sa source. Ce guide explique comment y parvenir.</dd>
- <dt><a href="/en-US/docs/Web/Media/3D_video">Playing video in a 3D environment</a></dt>
- <dd>Dans ce guide, nous examinons comment lire une vidéo dans une scène 3D. Cette technique peut être utilisée à la fois dans des applications <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a> standard présentées sur un écran plat d'ordinateur, ou dans un environnement de réalité virtuelle ou augmentée généré par <a href="/en-US/docs/Web/API/WebXR_Device_API">WebXR</a>.</dd>
-</dl>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName("WebXR")}}</td>
-   <td>{{Spec2("WebXR")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Navigator.xr")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/Guide/Graphics">Graphics on the web</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing graphics</a></li>
- <li><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a>: Graphiques 2D et 3D sur le web</li>
- <li><a href="/en-US/docs/Web/API/Canvas_API">Canvas API</a>: Le dessin en 2D pour le web</li>
- <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas tutorial</a></li>
-</ul>
+L'**API de périphérique WebXR** implémente le coeur des fonctionnalités WebXR, gère la sélection de périphériques de sortie, affiche la scène 3D sur le périphérique choisi à la fréquence d'images appropriée, et gère les vecteurs de mouvement créés en utilisant les contrôleurs d'entrée.
+
+Les périphèriques compatibles WebXR comprennent les casques 3D entièrement immersifs avec le suivi du mouvement et de l'orientation, les lunettes qui supperposent des contenus graphiques par dessus la scène du monde réel au travers des images, et les smartphones qui augmentent la realité en capturant le monde via une camera et en qui augmentent la scène avec des images générées par ordinateur.
+
+Pour accomplir toutes ces choses, l'API de périphériques WebXR fournit les fonctionnalités clés suivantes:
+
+- Trouver un périphérique de sortie VR ou AR compatible
+- Afficher une scène 3D sur le périphérique à la fréquence d'images appropriée
+- (Optionellement) refléter la sortie sur un affichage 2D
+- Créer des vecteurs représentant les mouvements des commandes d'entrée
+
+Au niveau le plus basique, une scène est présentée en 3D en calculant la perspective à appliquer à la scène dans le but de l'afficher du point de vue de chacun des yeux de l'utilisateur en calculant la position de chaque oeil et en affichant la scène de cette position, regardant dans la même direction que l'utilisateur. Ces deux images sont conçuent à l'intérieur d'une seule mémoire tampon, avec l'image de rendu pour l'oeil gauche dans la partie gauche et l'image de rendu de l'oeil droit dans la partie droite de la mémoire tampon. Une fois que les perspectives des deux yeux sur la scène ont été conçues, la mémoire résultante est délivrée au périphérique WebXR pour être présentée à l'utilisateur via son casque ou tout autre périphérique d'affichage approprié.
+
+## Les concepts et l'utilisation des périphériques WebXR
+
+Alors que l'ancienne [WebVR API](/en-US/docs/Web/API/WebVR_API) avait été conçue uniquement pour le support de la réalité virtuelle (VR), l'API WebXR supporte à la fois la VR et la réalité augmentée (AR) sur le web. Le support pour la fonctionnalité de réalité augmentée est ajouté par le module WebXR Augmented Reality.
+
+Un périphérique XR typique peut avoir aussi bien 3 que 6 degrés de liberté et peut ou non posséder un capteur de position externe.
+
+L'équipement peut également inclure un accéléromètre, un baromètre, ou d'autres capteurs qui sont utilisés pour détecter lorsque l'utilisateur se déplace dans l'espace, tourne sa tête, ou similaires.
+
+## Accéder à l'API WebXR
+
+Pour accéder à l'API WebXR à l'intérieur du contexte d'une fenêtre donnée, utiliser la propriété {{domxref("navigator.xr")}}, qui retourne un objet {{domxref("XRSystem")}} au travers duquel toute l'API de périphérique WebXR Device API est alors exposée.
+
+- {{domxref("navigator.xr")}} {{ReadOnlyInline}}
+  - : Cette propriété, ajoutée à l'interface {{domxref("Navigator")}}, retourne l'objet  {{domxref("XRSystem")}} au travers duquel l'API WebXR est exposée. Si cette propriété est missing ou `null`, WebXR n'est pas disponible.
+
+## Les interfaces WebXR
+
+- {{DOMxRef("XRSystem")}}
+  - : La propriété {{domxref("Navigator.xr", "navigator.xr")}} retourne l'instance de la fenêtre de {{domxref("XRSystem")}}, qui est le mécanisme par lequel votre code acède à l'API WebXR. En utilisant l'interface `XRSystem`, vous pouvez créer {{domxref("XRSession")}} pour représenter les sessions AR et/ou VR actuelles.
+- {{DOMxRef("XRFrame")}}
+  - : Lors de la présentation d'une session XR, l'état de tous les objets suivis qui composent la session sont représentés par une `XRFrame`. Pour obtenir un `XRFrame`, appeler la méthode {{domxref("XRSession.requestAnimationFrame", "requestAnimationFrame()")}} de la session, en fournissant un callback qui sera appelé avec le `XRFrame` une fois disponible. Les événements qui communiquent avec des états de suivi utiliseront aussi `XRFrame` pour contenir ces informations.
+- {{DOMxRef("XRRenderState")}}
+  - : Fournis un ensemble de propriétés configurables qui changent la façon dont les images produites par une `XRSession` sont composées.
+- {{DOMxRef("XRSession")}}
+  - : Fournit l'interface pour interagir avec le matériel XR. Une fois que la `XRSession` est obtenue depuis {{domxref("XRSystem.requestSession", "navigator.xr.requestSession()")}}, la session peut être utilisée pour vérifier la position et l'orientation du visualiseur, interroger le périphérique pour obtenir des informations sur l'environnement, et présenter le monde virtuel ou augmenté à l'utilisateur.
+- {{DOMxRef("XRSpace")}}
+  - : `XRSpace` est une classe de base opaque sur laquelle toutes les interfaces de système de coordonnées virtuelles sont basées. Les positions dans WebXR sotn toujours exprimées par rapport à un `XRSpace` particulier au moment où un {{domxref("XRFrame")}} a lieu. Ce système de coordonnées dans l'espace a son origine à une position physique donnée.
+- {{DOMxRef("XRReferenceSpace")}}
+  - : Une sous classe de {{domxref("XRSpace")}} qui est utilisée pour identifier une relation spatiale en relation avec l'environnement physique de l'utilisateur. Le système de coordonées `XRReferenceSpace` devrait rester inchangé pendant toute la durée de vie du {{domxref("XRSession")}}. Le monde n'a pas de frontières et s'étend infiniment dans toutes les directions.
+- {{DOMxRef("XRBoundedReferenceSpace")}}
+  - : `XRBoundedReferenceSpace` étend le système de coordonées {{domxref("XRReferenceSpace")}} pour inclure en plus la prise en charge d'un monde aux limites définies. Contrairement à `XRReferenceSpace`, l'origine doit être localisée au niveau du sol (c'est à dire *y* = 0). Les composantes x et z de l'origine sont présumées être localisées au centre ou à proximité du centre de la pièce ou de la surface.
+- {{DOMxRef("XRView")}}
+  - : Représente une vue unique dans la scène XR pour une image particulière. Chaque XRView correspond à la surface d'affichage vidéo utilisée pour présenter la scène à l'utilisateur. Par exemple, un appareil XR donné peut avoir deux vues: une pour l'œil gauche et une pour la droite. Chaque vue a un décalage utilisé pour déplacer la position de la vue par rapport à la caméra, afin de permettre la création d'effets stéréographiques.
+- {{DOMxRef("XRViewport")}}
+  - : Décrit un viewport. Un viewport est une partie rectangulaire d'une surface graphique. Dans WebXR, un viewport représente la zone d'une surface de dessin correspondant à un {{domxref ("XRView")}} particulier, tel que la partie de l'image tampon WebGL utilisée pour rendre l'une des perspectives des deux yeux sur la scène.
+- {{DOMxRef("XRRigidTransform")}}
+  - : Une transformation définie en utilisant une position et une orientation dans le système de coordonnées de l'espace virtuel comme décrit par le {{domxref ("XRSpace")}}.
+- {{DOMxRef("XRPose")}}
+  - : Décrit une position et une orientation dans l'espace par rapport à un {{domxref ("XRSpace")}}.
+- {{DOMxRef("XRViewerPose")}}
+  - : Basé sur {{domxref("XRPose")}}, `XRViewerPose` spécifie l'état d'un spectateur de la scène WebXR comme indiqué par le périphérique XR. Un tableau d'objets {{domxref ("XRView")}} est inclus, chacun représentant une perspective de la scène. Par exemple, il faut deux vues pour créer la vue stéréoscopique telle que perçue par la vision humaine: une pour l'œil gauche et une seconde pour l'œil droit. Une vue est légèrement décalée vers la gauche par rapport à la position du visualiseur et l'autre vue est décalée vers la droite de la même distance. La liste de vues peut également être utilisée pour représenter les perspectives de chacun des spectateurs d'une scène, dans un environnement multi-utilisateurs.
+- {{DOMxRef("XRInputSource")}}
+  - : Représente tout périphérique d'entrée que l'utilisateur peut utiliser pour effectuer des actions ciblées dans le même espace virtuel que le visualiseur. Les sources d'entrée peuvent inclure des dispositifs tels que des contrôleurs manuels, des systèmes de suivi optique et d'autres dispositifs explicitement associés au dispositif XR. Les autres périphériques d'entrée tels que les claviers, les souris et les manettes de jeu ne sont pas présentés comme des instances `XRInputSource`.
+- {{DOMxRef("XRWebGLLayer")}}
+  - : Une couche qui sert de tampon d'image [WebGL](/en-US/docs/Web/API/WebGL_API) dans lequel la vue d'une scène est rendue. L'utilisation de WebGL pour afficher la scène offre des avantages de performances substantiels grâce à l'accélération graphique.
+
+### Interfaces événementielles
+
+Les interfaces suivantes sont utilisées pour représenter les événements utilisés par l'API WebXR.
+
+- {{domxref("XRInputSourceEvent")}}
+  - : Envoyé lorsque l'état d'un {{domxref ("XRInputSource")}} change. Cela peut se produire, par exemple, lorsque la position et/ou l'orientation de l'appareil change, ou lorsque des boutons sont enfoncés ou relâchés.
+- {{domxref("XRInputSourcesChangeEvent")}}
+  - : Envoyé pour indiquer que l'ensemble des sources d'entrée disponibles a changé pour le {{domxref ("XRSession")}}.
+- {{domxref("XRReferenceSpaceEvent")}}
+  - : Envoyé lorsque l'état d'un {{domxref ("XRReferenceSpace")}} change.
+- {{domxref("XRSessionEvent")}}
+  - : Envoyé pour indiquer que l'état d'un {{domxref ("XRSession")}} a changé. Par exemple, si la position et/ou l'orientation
+
+## Extensions de l'API WebGL
+
+L'API WebGL est étendue par la spécification WebXR pour augmenter le contexte WebGL afin de lui permettre d'être utilisée pour afficher des vues dans un périphérique WebXR.
+
+- {{domxref("WebGLRenderingContextBase.makeXRCompatibile","WebGLRenderingContextBase.makeXRCompatibile()")}}
+  - : Configure le contexte WebGL pour qu'il soit compatible avec WebXR. Si le contexte n'a pas été créé initialement avec la propriété {{domxref ("WebGLContextAttributes.xrCompatible", "xrCompatible")}} définie sur `true`, vous devez appeler `makeXRCompatible()` avant d'essayer d'utiliser le contexte WebGL pour le rendu WebXR. Renvoie un {{jsxref ("Promise")}} qui se résout une fois que le contexte a été préparé, ou est rejeté si le contexte ne peut pas être configuré pour être utilisé par WebXR.
+
+## Guides et tutoriels
+
+Les guides et didacticiels suivants sont une excellente ressource pour apprendre à comprendre WebXR et les concepts graphiques 3D/VR/AR sous-jacents.
+
+### Les bases
+
+- [Fundamentals of WebXR](/en-US/docs/Web/API/WebXR_Device_API/Fundamentals)
+  - : Avant de plonger dans les détails de la création de contenu à l'aide de WebXR, il peut être utile de lire cet aperçu de la technologie, qui comprend des introductions à une terminologie qui peut ne pas vous être familière ou qui peut être utilisée d'une nouvelle manière.
+- [Matrix math for the web](/en-US/docs/Web/API/WebGL_API/Matrix_math_for_the_web)
+  - : Un guide expliquant comment les matrices peuvent être utilisées sur le Web, y compris pour les transformations CSS et à des fins WebGL, ainsi que pour gérer le positionnement et l'orientation des objets dans des contextes WebXR.
+- [WebXR application life cycle](/en-US/docs/Web/API/WebXR_Device_API/Lifecycle)
+  - : An overview of the overall life cycle of a WebXR application, from startup to shutdown. This article serves as an introduction to the basics of what's involved in creating a WebXR experience without diving into the code in detail. It's a good way to prepare for the next steps.Un aperçu du cycle de vie global d'une application WebXR, du démarrage à l'arrêt. Cet article sert d'introduction aux bases de ce qu'implique la création d'une expérience WebXR sans plonger dans le code en détail. C'est un bon moyen de se préparer aux prochaines étapes.
+
+### Créer une expérience de réalité mixte
+
+- [Starting up and shutting down a WebXR session](/en-US/docs/Web/API/WebXR_Device_API/Startup_and_shutdown)
+  - : Avant de présenter une scène à l'aide d'un appareil XR tel qu'un casque ou des lunettes, vous avez besoin de créer une session WebXR liée à une couche de rendu qui dessine la scène pour la présentation dans chacun des écrans de l'appareil XR pour que l'effet 3D puisse être présenté à l'utilisateur. Ce guide explique comment créer et arrêter des sessions WebXR.
+- [Geometry and reference spaces in WebXR](/en-US/docs/Web/API/WebXR_Device_API/Geometry)
+  - : Dans ce guide, les concepts requis de la géométrie 3D sont brièvement passés en revue, et les fondamentaux de cette géométrie représentés dans WebXR sont détaillés. Apprenez comment les espaces de référence sont utilisés pour positionner les objets - et le visualiseur - et les différences entre les types d'espace de référence disponibles, ainsi que leurs cas d'utilisation.
+- [Spatial tracking in WebXR](/en-US/docs/Web/API/WebXR_Device_API/Spatial_tracking)
+  - : Ce guide décrit comment les objets—incluant le corps de l'utilisateur et ses parties—sont situés dans l'espace, et comment leur mouvement et leur orientation les uns par rapport aux autres sont surveillés et gérés au fil du temps. Cet article explique la relation entre les espaces, les poses/attitudes, les spectateurs et les vues.
+- [Rendering and the WebXR frame animation callback](/en-US/docs/Web/API/WebXR_Device_API/Rendering)
+  - : En commençant par la planification des images à afficher, ce guide explique ensuite comment déterminer le placement des objets dans la vue et comment les afficher dans la mémoire tampon WebGL utilisée pour chacune des deux vues de la scène pour les deux yeux.
+- [Viewpoints and viewers: Simulating cameras in WebXR](/en-US/docs/Web/API/WebXR_Device_API/Cameras)
+  - :  through a world in which the viewer doesn't really move.WebGL (et donc WebXR) n'a pas vraiment de concept de caméra, qui est le concept traditionnel utilisé pour représenter un point de vue dans les graphiques 3D. Dans cet article, nous voyons comment simuler une caméra et comment créer l'illusion de déplacer un spectateur dans un monde même si ce n'est pas le cas.
+- [Lighting a WebXR setting](/en-US/docs/Web/API/WebXR_Device_API/Lighting)
+  - : Le rendu WebXR étant basé sur WebGL, les mêmes techniques d'éclairage utilisées pour toute application 3D sont appliquées aux scènes WebXR. Cependant, il existe des problèmes spécifiques à la création de paramètres de réalité augmentée et virtuelle qui doivent être pris en compte lors de l'écriture de votre code d'éclairage. Cet article traite de ces problèmes.
+- [Using bounded reference spaces](/en-US/docs/Web/API/WebXR_Device_API/Bounded_reference_spaces)
+  - : Dans cet article, nous examinons comment utiliser un espace de référence `bounded-floor` pour définir les limites des endroits où le spectateur peut se déplacer en toute sécurité sans quitter la zone suivie par son matériel XR ou entrer en collision avec un obstacle physique. Sur les appareils qui le prennent en charge, le `bounded-floor` peut être un outil utile dans votre répertoire.
+
+### Rendre interactif
+
+- [Movement, orientation, and motion: A WebXR example](/en-US/docs/Web/API/WebXR_Device_API/Movement_and_motion)
+  - : Dans cet exemple et tutoriel, nous utilisons les informations apprises tout au long de la documentation WebXR pour créer une scène contenant un cube et l'utilisateur peut déplacer autour en utilisant à la fois le casque VR, le clavier et la souris.
+- [Inputs and input sources](/en-US/docs/Web/API/WebXR_Device_API/Inputs)
+  - : Un guide sur les sources d'entrée et comment gérer efficacement les périphériques d'entrée utilisés pour contrôler la session WebXR, et comment recevoir et traiter les entrées utilisateur de ces périphériques.
+- [Targeting and hit detection](/en-US/docs/Web/API/Web_Audio_API/Targeting)
+  - : Comment utiliser le mode rayon de ciblage et l'espace de rayon de ciblage d'une source d'entrée pour afficher un rayon de ciblage, identifier les surfaces ou les objets ciblés et effectuer des tâches associées.
+- [Using WebXR input profiles](/en-US/docs/Web/API/WebXR_Device_API/Input_profiles)
+  - : Un guide pour interpréter les données {{Glossary ("JSON")}} fournies par le [WebXR Input Profiles Registry](https://github.com/immersive-web/webxr-input-profiles/tree/master/packages/registry), qui peut être utilisé pour déterminer les options et commandes disponibles sur les périphériques d'entrée de l'utilisateur.
+- [Supporting advanced controllers and gamepads in WebXR applications](/en-US/docs/Web/WebXR_Device_API/Gamepads)
+  - : WebXR utilise l'objet {{domxref ("Gamepad")}} pour décrire les commandes disponibles sur les périphériques d'entrée complexes (tels que les manettes avec plusieurs boutons et/ou axes) et les périphériques tels que les manettes de jeu. Dans ce guide, découvrez comment faire usage des commandes de ces périphériques.
+
+### Performance and sécurité
+
+- [WebXR performance guide](/en-US/docs/Web/API/WebXR_Device_API/Performance)
+  - : Recommandations et astuces pour vous aider à optimiser les performances de votre application WebXR.
+- [Permissions and security for WebXR](/en-US/docs/Web/API/WebXR_Device_API/Permissions_and_security)
+  - : L'API de périphérique WebXR doit faire face à de nombreux domaines de sécurité, de l'établissement d'une politique de fonctionnalité à l'assurance que l'utilisateur a l'intention d'utiliser la présentation en réalité mixte avant de l'activer.
+
+### Inclure d'autres médias
+
+- [Positional audio in a 3D environment](/en-US/docs/Web/Media/3D_audio)
+  - : Dans les environnements 3D, qui peuvent être soit des scènes 3D rendues à l'écran, soit une expérience de réalité mixte expérimentée à l'aide d'un casque, il est important que l'audio soit exécuté de sorte qu'il semble provenir de la direction de sa source. Ce guide explique comment y parvenir.
+- [Playing video in a 3D environment](/en-US/docs/Web/Media/3D_video)
+  - : Dans ce guide, nous examinons comment lire une vidéo dans une scène 3D. Cette technique peut être utilisée à la fois dans des applications [WebGL](/en-US/docs/Web/API/WebGL_API) standard présentées sur un écran plat d'ordinateur, ou dans un environnement de réalité virtuelle ou augmentée généré par [WebXR](/en-US/docs/Web/API/WebXR_Device_API).
+
+## Spécifications
+
+| Spécification                | Status                   | Commentaire          |
+| ---------------------------- | ------------------------ | -------------------- |
+| {{SpecName("WebXR")}} | {{Spec2("WebXR")}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Navigator.xr")}}
+
+## Voir aussi
+
+- [Graphics on the web](/en-US/docs/Web/Guide/Graphics)
+- [Drawing graphics](/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics)
+- [WebGL API](/en-US/docs/Web/API/WebGL_API): Graphiques 2D et 3D sur le web
+- [Canvas API](/en-US/docs/Web/API/Canvas_API): Le dessin en 2D pour le web
+- [Canvas tutorial](/en-US/docs/Web/API/Canvas_API/Tutorial)
diff --git a/files/fr/web/api/wheelevent/deltax/index.md b/files/fr/web/api/wheelevent/deltax/index.md
index 05a9e41e39..e76a8af270 100644
--- a/files/fr/web/api/wheelevent/deltax/index.md
+++ b/files/fr/web/api/wheelevent/deltax/index.md
@@ -11,45 +11,33 @@ tags:
   - WheelEvent
 translation_of: Web/API/WheelEvent/deltaX
 ---
-<p>{{APIRef("DOM Events")}}</p>
+{{APIRef("DOM Events")}}
 
-<p>La propriété en lecture seule <code><strong>WheelEvent.deltaX</strong></code> est un <code>double</code> représentant la quantité de défilement horizontal dans l'unité {{domxref("WheelEvent.deltaMode")}}.</p>
+La propriété en lecture seule **`WheelEvent.deltaX`** est un `double` représentant la quantité de défilement horizontal dans l'unité {{domxref("WheelEvent.deltaMode")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var <code><em>dX</em> = <em>event</em>.deltaX;</code></pre>
+    var dX = event.deltaX;
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">var syntheticEvent = new WheelEvent("syntheticWheel", {"deltaX": 4, "deltaMode": 0});
+```js
+var syntheticEvent = new WheelEvent("syntheticWheel", {"deltaX": 4, "deltaMode": 0});
 
 console.log(syntheticEvent.deltaX);
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commantaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM3 Events','#widl-WheelEvent-deltaX','WheelEvent.deltaX')}}</td>
-   <td>{{Spec2('DOM3 Events')}}</td>
-   <td>Définiton initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.WheelEvent.deltaX")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{ event("wheel") }}</li>
- <li>{{domxref("WheelEvent")}}</li>
-</ul>
+```
+
+## Spécifications
+
+| Spécification                                                                                    | Statut                           | Commantaire         |
+| ------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------- |
+| {{SpecName('DOM3 Events','#widl-WheelEvent-deltaX','WheelEvent.deltaX')}} | {{Spec2('DOM3 Events')}} | Définiton initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.WheelEvent.deltaX")}}
+
+## Voir aussi
+
+- {{ event("wheel") }}
+- {{domxref("WheelEvent")}}
diff --git a/files/fr/web/api/wheelevent/deltay/index.md b/files/fr/web/api/wheelevent/deltay/index.md
index 49eeb736f5..83e61375f4 100644
--- a/files/fr/web/api/wheelevent/deltay/index.md
+++ b/files/fr/web/api/wheelevent/deltay/index.md
@@ -11,45 +11,33 @@ tags:
   - WheelEvent
 translation_of: Web/API/WheelEvent/deltaY
 ---
-<p>{{APIRef("DOM Events")}}</p>
+{{APIRef("DOM Events")}}
 
-<p>La propriété en lecture seule <code><strong>WheelEvent.deltaY</strong></code> est un <code>double</code> représentant la quantité de défilement vertical dans l'unité {{domxref("WheelEvent.deltaMode")}}.</p>
+La propriété en lecture seule **`WheelEvent.deltaY`** est un `double` représentant la quantité de défilement vertical dans l'unité {{domxref("WheelEvent.deltaMode")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var <code><em>dY</em> = <em>event</em>.deltaY;</code></pre>
+    var dY = event.deltaY;
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">var syntheticEvent = new WheelEvent("syntheticWheel", {"deltaY": 4, "deltaMode": 0});
+```js
+var syntheticEvent = new WheelEvent("syntheticWheel", {"deltaY": 4, "deltaMode": 0});
 
 console.log(syntheticEvent.deltaY);
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commantaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM3 Events','#widl-WheelEvent-deltaY','WheelEvent.deltaY')}}</td>
-   <td>{{Spec2('DOM3 Events')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.WheelEvent.deltaY")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{ event("wheel") }}</li>
- <li>{{domxref("WheelEvent")}}</li>
-</ul>
+```
+
+## Spécifications
+
+| Spécification                                                                                    | Statut                           | Commantaire          |
+| ------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName('DOM3 Events','#widl-WheelEvent-deltaY','WheelEvent.deltaY')}} | {{Spec2('DOM3 Events')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.WheelEvent.deltaY")}}
+
+## Voir aussi
+
+- {{ event("wheel") }}
+- {{domxref("WheelEvent")}}
diff --git a/files/fr/web/api/wheelevent/deltaz/index.md b/files/fr/web/api/wheelevent/deltaz/index.md
index 8ab33605b0..91d20a501d 100644
--- a/files/fr/web/api/wheelevent/deltaz/index.md
+++ b/files/fr/web/api/wheelevent/deltaz/index.md
@@ -12,45 +12,33 @@ tags:
   - WheelEvent
 translation_of: Web/API/WheelEvent/deltaZ
 ---
-<p>{{APIRef("DOM Events")}}</p>
+{{APIRef("DOM Events")}}
 
-<p>La propriété en lecture seule <code><strong>WheelEvent.deltaZ</strong></code> est un <code>double</code> représentant la quantité de défilement le long de l'axe z, dans l'unité {{domxref("WheelEvent.deltaMode")}}.</p>
+La propriété en lecture seule **`WheelEvent.deltaZ`** est un `double` représentant la quantité de défilement le long de l'axe z, dans l'unité {{domxref("WheelEvent.deltaMode")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var <code><em>dZ</em> = <em>event</em>.deltaZ;</code></pre>
+    var dZ = event.deltaZ;
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">var syntheticEvent = new WheelEvent("syntheticWheel", {"deltaZ": 4, "deltaMode": 0});
+```js
+var syntheticEvent = new WheelEvent("syntheticWheel", {"deltaZ": 4, "deltaMode": 0});
 
 console.log(syntheticEvent.deltaZ);
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM3 Events','#widl-WheelEvent-deltaZ','WheelEvent.deltaZ')}}</td>
-   <td>{{Spec2('DOM3 Events')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.WheelEvent.deltaZ")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{ event("wheel") }}</li>
- <li>{{domxref("WheelEvent")}}</li>
-</ul>
+```
+
+## Spécifications
+
+| Spécification                                                                                    | Statut                           | Commentaire          |
+| ------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName('DOM3 Events','#widl-WheelEvent-deltaZ','WheelEvent.deltaZ')}} | {{Spec2('DOM3 Events')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.WheelEvent.deltaZ")}}
+
+## Voir aussi
+
+- {{ event("wheel") }}
+- {{domxref("WheelEvent")}}
diff --git a/files/fr/web/api/wheelevent/index.md b/files/fr/web/api/wheelevent/index.md
index fcd871b623..085c6e4394 100644
--- a/files/fr/web/api/wheelevent/index.md
+++ b/files/fr/web/api/wheelevent/index.md
@@ -9,109 +9,81 @@ tags:
   - WheelEvent
 translation_of: Web/API/WheelEvent
 ---
-<p>{{APIRef("DOM Events")}}</p>
-
-<p>L'interface <strong><code>WheelEvent</code></strong> représente les évènements qui se produisent lorsque l'utilisateur déplace la molette de la souris ou un périphérique d'entrée similaire.</p>
-
-<div class="warning">
-<p><strong>Attention :</strong> Il s'agit de l'interface d'évènement de roue standard à utiliser.  Les anciennes versions des navigateurs implémentaient les interfaces {{DOMxRef("MouseWheelEvent")}} et {{DOMxRef("MouseScrollEvent")}} non standard et non compatibles avec plusierus navigateurs. Utilisez cette interface et évitez les non standard.</p>
-</div>
-
-<div class="note">
-<p><strong>Note :</strong> Ne confondez pas l'évènement {{domxref("Element/wheel_event", "wheel")}} avec l'énénement {{domxref("Element/scroll_event", "scroll")}} :</strong> L'action par défaut d'un évènement <code>wheel</code> est définie par l'implantation. Ainsi, un évènement <code>wheel</code> ne distribue pas nécessairement un évènement <code>scroll</code>. Même lorsque c'est le cas, cela ne signifie pas que les valeurs <code>delta*</code> dans l'évènement <code>wheel</code> reflètent nécessairement la direction de défilement du contenu. Par conséquent, ne comptez pas sur les propriétés <code>delta*</code> pour obtenir la direction de défilement du contenu. Au lieu de cela, détectez les changements de valeurs de {{DOMxRef("Element.scrollLeft", "scrollLeft")}} et {{DOMxRef("Element.scrollTop", "scrollTop")}} de la cible dans l'évènement <code>scroll</code>.</p>
-</div>
-
-<p>{{InheritanceDiagram}}</p>
-
-<h2 id="Constructeur">Constructeur</h2>
-
-<dl>
- <dt>{{DOMxRef("WheelEvent.WheelEvent", "WheelEvent()")}}</dt>
- <dd>Crée un objet <code>WheelEvent</code>.</dd>
-</dl>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<p><em>Cette interface hérite des propriétés de ses ancêtres, {{DOMxRef("MouseEvent")}}, {{DOMxRef("UIEvent")}}, et {{DOMxRef("Event")}}.</em></p>
-
-<dl>
- <dt>{{DOMxRef("WheelEvent.deltaX")}}{{ReadOnlyInline}}</dt>
- <dd>Renvoie un <code>double</code> représentant le montant du défilement horizontal.</dd>
- <dt>{{DOMxRef("WheelEvent.deltaY")}}{{ReadOnlyInline}}</dt>
- <dd>Renvoie un <code>double</code> représentant le montant du défilement vertical.</dd>
- <dt>{{DOMxRef("WheelEvent.deltaZ")}}{{ReadOnlyInline}}</dt>
- <dd>Renvoie un <code>double</code> représentant le montant du défilement pour l'axe z.</dd>
- <dt>{{DOMxRef("WheelEvent.deltaMode")}}{{ReadOnlyInline}}</dt>
- <dd>Revnoie un <code>unsigned long</code> représentant l'unité du montant de défilement des valeurs <code>delta*</code>. Les valeurs autorisées sont :
- <table class="standard-table">
-  <thead>
-   <tr>
-    <td class="header">Constant</td>
-    <td class="header">Valeur</td>
-    <td class="header">Description</td>
-   </tr>
-  </thead>
-  <tbody>
-   <tr>
-    <td><code>WheelEvent.DOM_DELTA_PIXEL</code></td>
-    <td><code>0x00</code></td>
-    <td>Les valeurs <code>delta*</code> sont spécifiées en pixels.</td>
-   </tr>
-   <tr>
-    <td><code>WheelEvent.DOM_DELTA_LINE</code></td>
-    <td><code>0x01</code></td>
-    <td>Les valeurs <code>delta*</code> sont spécifiées en lignes.</td>
-   </tr>
-   <tr>
-    <td><code>WheelEvent.DOM_DELTA_PAGE</code></td>
-    <td><code>0x02</code></td>
-    <td>Les valeurs <code>delta*</code> sont spécifiées dans les pages.</td>
-   </tr>
-  </tbody>
- </table>
- </dd>
-</dl>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<p><em>Cette interface ne définit aucune méthode spécifique, mais hérite des méthodes de ses ancêtres, {{DOMxRef("MouseEvent")}}, {{DOMxRef("UIEvent")}}, et {{DOMxRef("Event")}}.</em></p>
-
-<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("UI Events", "#interface-wheelevent", "The <code>WheelEvent</code> interface")}}</td>
-   <td>{{Spec2("UI Events")}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM3 Events', '#interface-wheelevent', 'WheelEvent')}}</td>
-   <td>{{Spec2('DOM3 Events')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.WheelEvent")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Évènement {{domxref("Element/wheel_event", "wheel")}}</li>
- <li>Interfaces remplacées par celle-ci :
-  <ul>
-   <li>Objet d'évènement de roulette de souris hérité de Gecko: {{DOMxRef("MouseScrollEvent")}}</li>
-   <li>Objet d'évènement de roulette de souris hérité des navigateurs non gecko: {{DOMxRef("MouseWheelEvent")}}</li>
-  </ul>
- </li>
-</ul>
+{{APIRef("DOM Events")}}
+
+L'interface **`WheelEvent`** représente les évènements qui se produisent lorsque l'utilisateur déplace la molette de la souris ou un périphérique d'entrée similaire.
+
+> **Attention :** Il s'agit de l'interface d'évènement de roue standard à utiliser. Les anciennes versions des navigateurs implémentaient les interfaces {{DOMxRef("MouseWheelEvent")}} et {{DOMxRef("MouseScrollEvent")}} non standard et non compatibles avec plusierus navigateurs. Utilisez cette interface et évitez les non standard.
+
+> **Note :** Ne confondez pas l'évènement {{domxref("Element/wheel_event", "wheel")}} avec l'énénement {{domxref("Element/scroll_event", "scroll")}} : L'action par défaut d'un évènement `wheel` est définie par l'implantation. Ainsi, un évènement `wheel` ne distribue pas nécessairement un évènement `scroll`. Même lorsque c'est le cas, cela ne signifie pas que les valeurs `delta*` dans l'évènement `wheel` reflètent nécessairement la direction de défilement du contenu. Par conséquent, ne comptez pas sur les propriétés `delta*` pour obtenir la direction de défilement du contenu. Au lieu de cela, détectez les changements de valeurs de {{DOMxRef("Element.scrollLeft", "scrollLeft")}} et {{DOMxRef("Element.scrollTop", "scrollTop")}} de la cible dans l'évènement `scroll`.
+
+{{InheritanceDiagram}}
+
+## Constructeur
+
+- {{DOMxRef("WheelEvent.WheelEvent", "WheelEvent()")}}
+  - : Crée un objet `WheelEvent`.
+
+## Propriétés
+
+_Cette interface hérite des propriétés de ses ancêtres, {{DOMxRef("MouseEvent")}}, {{DOMxRef("UIEvent")}}, et {{DOMxRef("Event")}}._
+
+- {{DOMxRef("WheelEvent.deltaX")}}{{ReadOnlyInline}}
+  - : Renvoie un `double` représentant le montant du défilement horizontal.
+- {{DOMxRef("WheelEvent.deltaY")}}{{ReadOnlyInline}}
+  - : Renvoie un `double` représentant le montant du défilement vertical.
+- {{DOMxRef("WheelEvent.deltaZ")}}{{ReadOnlyInline}}
+  - : Renvoie un `double` représentant le montant du défilement pour l'axe z.
+- {{DOMxRef("WheelEvent.deltaMode")}}{{ReadOnlyInline}}
+
+  - : Revnoie un `unsigned long` représentant l'unité du montant de défilement des valeurs `delta*`. Les valeurs autorisées sont :
+
+    <table class="standard-table">
+      <thead>
+        <tr>
+          <td class="header">Constant</td>
+          <td class="header">Valeur</td>
+          <td class="header">Description</td>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td><code>WheelEvent.DOM_DELTA_PIXEL</code></td>
+          <td><code>0x00</code></td>
+          <td>Les valeurs <code>delta*</code> sont spécifiées en pixels.</td>
+        </tr>
+        <tr>
+          <td><code>WheelEvent.DOM_DELTA_LINE</code></td>
+          <td><code>0x01</code></td>
+          <td>Les valeurs <code>delta*</code> sont spécifiées en lignes.</td>
+        </tr>
+        <tr>
+          <td><code>WheelEvent.DOM_DELTA_PAGE</code></td>
+          <td><code>0x02</code></td>
+          <td>Les valeurs <code>delta*</code> sont spécifiées dans les pages.</td>
+        </tr>
+      </tbody>
+    </table>
+
+## Méthodes
+
+_Cette interface ne définit aucune méthode spécifique, mais hérite des méthodes de ses ancêtres, {{DOMxRef("MouseEvent")}}, {{DOMxRef("UIEvent")}}, et {{DOMxRef("Event")}}._
+
+## Spécifications
+
+| Spécification                                                                                                            | Statut                           | Commentaire          |
+| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName("UI Events", "#interface-wheelevent", "The <code>WheelEvent</code> interface")}} | {{Spec2("UI Events")}}     |                      |
+| {{SpecName('DOM3 Events', '#interface-wheelevent', 'WheelEvent')}}                                 | {{Spec2('DOM3 Events')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.WheelEvent")}}
+
+## Voir aussi
+
+- Évènement {{domxref("Element/wheel_event", "wheel")}}
+- Interfaces remplacées par celle-ci :
+
+  - Objet d'évènement de roulette de souris hérité de Gecko: {{DOMxRef("MouseScrollEvent")}}
+  - Objet d'évènement de roulette de souris hérité des navigateurs non gecko: {{DOMxRef("MouseWheelEvent")}}
diff --git a/files/fr/web/api/window/afterprint_event/index.md b/files/fr/web/api/window/afterprint_event/index.md
index c63ed6bc56..84afdc8bd8 100644
--- a/files/fr/web/api/window/afterprint_event/index.md
+++ b/files/fr/web/api/window/afterprint_event/index.md
@@ -4,61 +4,32 @@ slug: Web/API/Window/afterprint_event
 translation_of: Web/API/Window/afterprint_event
 original_slug: Web/Events/afterprint
 ---
-<p>L'événement <strong>afterprint</strong> est déclenché après que le document associé a été imprimé ou que l'aperçu avant impression a été fermé.</p>
+L'événement **afterprint** est déclenché après que le document associé a été imprimé ou que l'aperçu avant impression a été fermé.
 
-<h2 id="Informations_générales">Informations générales</h2>
+## Informations générales
 
-<dl>
- <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
- <dd style="margin: 0 0 0 120px;"><a href="https://html.spec.whatwg.org/multipage/webappapis.html#printing">HTML5</a></dd>
- <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
- <dd style="margin: 0 0 0 120px;">Event</dd>
- <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
- <dd style="margin: 0 0 0 120px;">Non</dd>
- <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
- <dd style="margin: 0 0 0 120px;">Non</dd>
- <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
- <dd style="margin: 0 0 0 120px;">DefaultView (<code>&lt;window&gt;</code>)</dd>
- <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
- <dd style="margin: 0 0 0 120px;">Aucune</dd>
-</dl>
+- Spécification
+  - : [HTML5](https://html.spec.whatwg.org/multipage/webappapis.html#printing)
+- Interface
+  - : Event
+- Propagation
+  - : Non
+- Annulable
+  - : Non
+- Cible
+  - : DefaultView (`<window>`)
+- Action par défaut
+  - : Aucune
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Property</th>
-   <th scope="col">Type</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>target</code> {{readonlyInline}}</td>
-   <td>{{domxref("EventTarget")}}</td>
-   <td>The event target (the topmost target in the DOM tree).</td>
-  </tr>
-  <tr>
-   <td><code>type</code> {{readonlyInline}}</td>
-   <td>{{domxref("DOMString")}}</td>
-   <td>The type of event.</td>
-  </tr>
-  <tr>
-   <td><code>bubbles</code> {{readonlyInline}}</td>
-   <td>{{jsxref("Boolean")}}</td>
-   <td>Whether the event normally bubbles or not.</td>
-  </tr>
-  <tr>
-   <td><code>cancelable</code> {{readonlyInline}}</td>
-   <td>{{jsxref("Boolean")}}</td>
-   <td>Whether the event is cancellable or not.</td>
-  </tr>
- </tbody>
-</table>
+| Property                              | Type                                 | Description                                            |
+| ------------------------------------- | ------------------------------------ | ------------------------------------------------------ |
+| `target` {{readonlyInline}}     | {{domxref("EventTarget")}} | The event target (the topmost target in the DOM tree). |
+| `type` {{readonlyInline}}       | {{domxref("DOMString")}}     | The type of event.                                     |
+| `bubbles` {{readonlyInline}}    | {{jsxref("Boolean")}}         | Whether the event normally bubbles or not.             |
+| `cancelable` {{readonlyInline}} | {{jsxref("Boolean")}}         | Whether the event is cancellable or not.               |
 
-<h2 id="Evénements_liés">Evénements liés</h2>
+## Evénements liés
 
-<ul>
- <li><a href="/fr/docs/Mozilla_event_reference/beforeprint">beforeprint</a></li>
-</ul>
+- [beforeprint](/fr/docs/Mozilla_event_reference/beforeprint)
diff --git a/files/fr/web/api/window/alert/index.md b/files/fr/web/api/window/alert/index.md
index 9f41bd3dff..501056191e 100644
--- a/files/fr/web/api/window/alert/index.md
+++ b/files/fr/web/api/window/alert/index.md
@@ -7,30 +7,39 @@ tags:
   - Référence_du_DOM_Gecko
 translation_of: Web/API/Window/alert
 ---
-<p>{{ ApiRef() }}</p>
-<h3 id="R.C3.A9sum.C3.A9">Résumé</h3>
-<p>Affiche un dialogue d'alerte contenant le texte spécifié.</p>
-<h3 id="Syntaxe">Syntaxe</h3>
-<pre class="eval">window.alert(<i>message</i>);
-</pre>
-<ul>
- <li><code>message</code> est une chaîne contenant le texte à afficher dans le dialogue d'alerte.</li>
-</ul>
-<h3 id="Exemple">Exemple</h3>
-<pre class="eval">window.alert("Bonjour !");
-</pre>
-<p>produira :</p>
-
-<p><img src="alerthelloworld.png"></p>
-
-<h3 id="Notes">Notes</h3>
-<p>Le dialogue d'alerte doit être utilisé pour les messages qui ne demandent aucune réponse de la part de l'utilisateur, à part son acceptation du message.</p>
-<p>Le texte suivant est commun à cet article, <code>DOM:window.prompt</code> et <code>DOM:window.confirm</code> Les boîtes de dialogue sont des fenêtres modales : elles empêchent l'utilisateur d'accéder au reste de l'interface du programme tant qu'elles ne sont pas fermées. C'est pourquoi il ne faut pas abuser des fonctions créant une boîte de dialogue (ou fenêtre modale).</p>
-<p>Les applications utilisant le chrome (par exemple les extensions) devront plutôt utiliser les méthodes de <a href="fr/NsIPromptService">nsIPromptService</a>.</p>
-<h3 id="Sp.C3.A9cification">Spécification</h3>
-<p>{{ DOM0() }}</p>
-<h3 id="Voir_aussi">Voir aussi</h3>
-<ul>
- <li><a href="/fr/DOM/window.confirm">confirm</a></li>
- <li><a href="/fr/DOM/window.prompt">prompt</a></li>
-</ul>
\ No newline at end of file
+{{ ApiRef() }}
+
+### Résumé
+
+Affiche un dialogue d'alerte contenant le texte spécifié.
+
+### Syntaxe
+
+    window.alert(message);
+
+- `message` est une chaîne contenant le texte à afficher dans le dialogue d'alerte.
+
+### Exemple
+
+    window.alert("Bonjour !");
+
+produira :
+
+![](alerthelloworld.png)
+
+### Notes
+
+Le dialogue d'alerte doit être utilisé pour les messages qui ne demandent aucune réponse de la part de l'utilisateur, à part son acceptation du message.
+
+Le texte suivant est commun à cet article, `DOM:window.prompt` et `DOM:window.confirm` Les boîtes de dialogue sont des fenêtres modales : elles empêchent l'utilisateur d'accéder au reste de l'interface du programme tant qu'elles ne sont pas fermées. C'est pourquoi il ne faut pas abuser des fonctions créant une boîte de dialogue (ou fenêtre modale).
+
+Les applications utilisant le chrome (par exemple les extensions) devront plutôt utiliser les méthodes de [nsIPromptService](fr/NsIPromptService).
+
+### Spécification
+
+{{ DOM0() }}
+
+### Voir aussi
+
+- [confirm](/fr/DOM/window.confirm)
+- [prompt](/fr/DOM/window.prompt)
diff --git a/files/fr/web/api/window/applicationcache/index.md b/files/fr/web/api/window/applicationcache/index.md
index 7518fb40ed..1366a2ac23 100644
--- a/files/fr/web/api/window/applicationcache/index.md
+++ b/files/fr/web/api/window/applicationcache/index.md
@@ -3,33 +3,24 @@ title: Window.applicationCache
 slug: Web/API/Window/applicationCache
 translation_of: Web/API/Window/applicationCache
 ---
-<div class="warning">
-<p><strong>Attention :</strong> Le cache d'application est obsolète depuis Firefox 44, et n'est plus disponible dans un contexte non sécurisé depuis Firefox 60 ({{bug(1354175)}}, actuellemet Nightly/Beta seulement). Ne pas l'utiliser sur des sites hors lignes — envisager l'utilisation de <a href="/en-US/docs/Web/API/Service_Worker_API">service workers</a> à la place.</p>
-</div>
+> **Attention :** Le cache d'application est obsolète depuis Firefox 44, et n'est plus disponible dans un contexte non sécurisé depuis Firefox 60 ({{bug(1354175)}}, actuellemet Nightly/Beta seulement). Ne pas l'utiliser sur des sites hors lignes — envisager l'utilisation de [service workers](/en-US/docs/Web/API/Service_Worker_API) à la place.
 
-<p>{{APIRef}}</p>
+{{APIRef}}
 
-<p>Retourne une référence à l'objet du cache d'application pour la fenêtre.</p>
+Retourne une référence à l'objet du cache d'application pour la fenêtre.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var>cache</var> = window.applicationCache
-</pre>
+    cache = window.applicationCache
 
-<h3 id="Parameters">Paramètres</h3>
+### Paramètres
 
-<ul>
- <li><code>cache</code> est une référence objet pour un {{domxref("OfflineResourceList")}}.</li>
-</ul>
+- `cache` est une référence objet pour un {{domxref("OfflineResourceList")}}.
 
-<h2 id="Specification">Spécification</h2>
+## Spécification
 
-<ul>
- <li>{{spec("http://www.w3.org/TR/2008/WD-html5-20080122/#appcache","HTML 5","WD")}}</li>
-</ul>
+- {{spec("http://www.w3.org/TR/2008/WD-html5-20080122/#appcache","HTML 5","WD")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/en-US/docs/HTML/Using_the_application_cache">Using Application Cache</a></li>
-</ul>
+- [Using Application Cache](/en-US/docs/HTML/Using_the_application_cache)
diff --git a/files/fr/web/api/window/back/index.md b/files/fr/web/api/window/back/index.md
index 9743d49f37..7a120fec02 100644
--- a/files/fr/web/api/window/back/index.md
+++ b/files/fr/web/api/window/back/index.md
@@ -13,47 +13,45 @@ tags:
   - back
 translation_of: Web/API/Window/back
 ---
-<div>{{APIRef}}{{ Non-standard_header() }}{{deprecated_header}}</div>
+{{APIRef}}{{ Non-standard_header() }}{{deprecated_header}}
 
-<p>La méthode obsolète et non standard <code>back()</code> sur l'objet {{domxref("window")}} renvoie la fenêtre à l'élément précédent de l'historique. Il s'agissait d'une méthode spécifique à Firefox et a été supprimée dans Firefox 31.</p>
+La méthode obsolète et non standard `back()` sur l'objet {{domxref("window")}} renvoie la fenêtre à l'élément précédent de l'historique. Il s'agissait d'une méthode spécifique à Firefox et a été supprimée dans Firefox 31.
 
-<div class="blockIndicator note">
-<p><strong>Note:</strong> Utilisez plutôt la méthode standard {{domxref("history.back")}}.</p>
-</div>
+> **Note :** Utilisez plutôt la méthode standard {{domxref("history.back")}}.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">window.back();</pre>
+    window.back();
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<p>Aucun.</p>
+Aucun.
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+### Valeur de retour
 
-<p><code>undefined</code>.</p>
+`undefined`.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Cet exemple simple gère un clic sur un bouton "Retour" en rappelant <code>back()</code>.</p>
+Cet exemple simple gère un clic sur un bouton "Retour" en rappelant `back()`.
 
-<pre class="brush:js">function boutonRetour() {
+```js
+function boutonRetour() {
   if (peutRevenirEnArriere) {
     window.back();
   }
-}</pre>
+}
+```
 
-<h2 id="Spécification">Spécification</h2>
+## Spécification
 
-<p>Cela ne fait partie d'aucune spécification.</p>
+Cela ne fait partie d'aucune spécification.
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>Cette méthode non standard n'a été implémentée que dans Firefox et a été supprimée dans Firefox 31.</p>
+Cette méthode non standard n'a été implémentée que dans Firefox et a été supprimée dans Firefox 31.
 
-<h2 id="Voir_également">Voir également</h2>
+## Voir également
 
-<ul>
- <li>{{domxref("History.back()")}}</li>
- <li>{{domxref("History.forward()")}}</li>
-</ul>
+- {{domxref("History.back()")}}
+- {{domxref("History.forward()")}}
diff --git a/files/fr/web/api/window/beforeprint_event/index.md b/files/fr/web/api/window/beforeprint_event/index.md
index b0e96ca975..fbf8c38b2a 100644
--- a/files/fr/web/api/window/beforeprint_event/index.md
+++ b/files/fr/web/api/window/beforeprint_event/index.md
@@ -7,69 +7,40 @@ tags:
 translation_of: Web/API/Window/beforeprint_event
 original_slug: Web/Events/beforeprint
 ---
-<p>L'événement <code><strong>beforeprint</strong></code> est déclenché lorsque le document associé est sur le point d'être imprimé ou qu'un "aperçu avant impression" est lancé.</p>
+L'événement **`beforeprint`** est déclenché lorsque le document associé est sur le point d'être imprimé ou qu'un "aperçu avant impression" est lancé.
 
-<h2 id="Informations_générales">Informations générales</h2>
+## Informations générales
 
-<dl>
- <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
- <dd style="margin: 0 0 0 120px;"><a href="https://html.spec.whatwg.org/multipage/webappapis.html#printing">HTML5</a></dd>
- <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
- <dd style="margin: 0 0 0 120px;">Event</dd>
- <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
- <dd style="margin: 0 0 0 120px;">Non</dd>
- <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
- <dd style="margin: 0 0 0 120px;">Non</dd>
- <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
- <dd style="margin: 0 0 0 120px;">DefaultView (<code>&lt;window&gt;</code>)</dd>
- <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
- <dd style="margin: 0 0 0 120px;">Aucune</dd>
-</dl>
+- Spécification
+  - : [HTML5](https://html.spec.whatwg.org/multipage/webappapis.html#printing)
+- Interface
+  - : Event
+- Propagation
+  - : Non
+- Annulable
+  - : Non
+- Cible
+  - : DefaultView (`<window>`)
+- Action par défaut
+  - : Aucune
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>En utilisant <code>window.addEventListener()</code> :</p>
+En utilisant `window.addEventListener()` :
 
-<pre class="notranslate">window.addEventListener("beforeprint", (evenement) =&gt; {
-  console.log("Before print");
-});</pre>
+    window.addEventListener("beforeprint", (evenement) => {
+      console.log("Before print");
+    });
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Property</th>
-   <th scope="col">Type</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>target</code> {{readonlyInline}}</td>
-   <td>{{domxref("EventTarget")}}</td>
-   <td>The event target (the topmost target in the DOM tree).</td>
-  </tr>
-  <tr>
-   <td><code>type</code> {{readonlyInline}}</td>
-   <td>{{domxref("DOMString")}}</td>
-   <td>The type of event.</td>
-  </tr>
-  <tr>
-   <td><code>bubbles</code> {{readonlyInline}}</td>
-   <td>{{jsxref("Boolean")}}</td>
-   <td>Whether the event normally bubbles or not.</td>
-  </tr>
-  <tr>
-   <td><code>cancelable</code> {{readonlyInline}}</td>
-   <td>{{jsxref("Boolean")}}</td>
-   <td>Whether the event is cancellable or not.</td>
-  </tr>
- </tbody>
-</table>
+| Property                              | Type                                 | Description                                            |
+| ------------------------------------- | ------------------------------------ | ------------------------------------------------------ |
+| `target` {{readonlyInline}}     | {{domxref("EventTarget")}} | The event target (the topmost target in the DOM tree). |
+| `type` {{readonlyInline}}       | {{domxref("DOMString")}}     | The type of event.                                     |
+| `bubbles` {{readonlyInline}}    | {{jsxref("Boolean")}}         | Whether the event normally bubbles or not.             |
+| `cancelable` {{readonlyInline}} | {{jsxref("Boolean")}}         | Whether the event is cancellable or not.               |
 
-<h2 id="Evénements_liés">Evénements liés</h2>
+## Evénements liés
 
-<ul>
- <li><a href="/en-US/docs/Mozilla_event_reference/afterprint">afterprint</a></li>
-</ul>
+- [afterprint](/en-US/docs/Mozilla_event_reference/afterprint)
diff --git a/files/fr/web/api/window/beforeunload_event/index.md b/files/fr/web/api/window/beforeunload_event/index.md
index 249644f9e3..69f36f86e4 100644
--- a/files/fr/web/api/window/beforeunload_event/index.md
+++ b/files/fr/web/api/window/beforeunload_event/index.md
@@ -4,137 +4,89 @@ slug: Web/API/Window/beforeunload_event
 translation_of: Web/API/Window/beforeunload_event
 original_slug: Web/Events/beforeunload
 ---
-<p>L'événement <strong><code>beforeunload</code></strong> est déclenché quand la fênetre, ou le document, et leurs resources sont sur le point d'être déchargés.</p>
+L'événement **`beforeunload`** est déclenché quand la fênetre, ou le document, et leurs resources sont sur le point d'être déchargés.
 
-<p>Lorsqu'une chaîne de caractères est assignée à la propriété <code>returnValue</code> de {{domxref("Event")}}, une boîte de dialogue apparaît demandant confirmation avant de quitter la page (voir exemple plus bas). Certains navigateurs affichent la valeur retournée, alors que d'autres affichent leur propre message. Si aucune valeur n'est fournie, l'événement est traité silencieusement.</p>
+Lorsqu'une chaîne de caractères est assignée à la propriété `returnValue` de {{domxref("Event")}}, une boîte de dialogue apparaît demandant confirmation avant de quitter la page (voir exemple plus bas). Certains navigateurs affichent la valeur retournée, alors que d'autres affichent leur propre message. Si aucune valeur n'est fournie, l'événement est traité silencieusement.
 
-<div class="note">
-<p><strong>Note :</strong> Afin d'éviter les "pop-ups" indésirables, les navigateurs peuvent ne pas afficher les alertes créées dans les gestionnaires <code>beforeunload</code>.</p>
-</div>
+> **Note :** Afin d'éviter les "pop-ups" indésirables, les navigateurs peuvent ne pas afficher les alertes créées dans les gestionnaires `beforeunload`.
 
-<div class="warning">
-<p><strong>Attention :</strong> Attacher un gestionnaire d'événement <code>beforeunload</code> à <code>window</code> ou à <code>document</code> empêche les navigateurs d'utiliser leur mémoire cache ; consulter <a href="/fr/docs/Utilisation_du_cache_de_Firefox_1.5">Utilisation du cache de Firefox 1.5</a> ou <a href="https://webkit.org/blog/516/webkit-page-cache-ii-the-unload-event/">WebKit's Page Cache</a> (en anglais).</p>
-</div>
+> **Attention :** Attacher un gestionnaire d'événement `beforeunload` à `window` ou à `document` empêche les navigateurs d'utiliser leur mémoire cache ; consulter [Utilisation du cache de Firefox 1.5](/fr/docs/Utilisation_du_cache_de_Firefox_1.5) ou [WebKit's Page Cache](https://webkit.org/blog/516/webkit-page-cache-ii-the-unload-event/) (en anglais).
 
 <table class="properties">
- <tbody>
-  <tr>
-   <td>Propagation</td>
-   <td>Non</td>
-  </tr>
-  <tr>
-   <td>Annulable</td>
-   <td>Oui</td>
-  </tr>
-  <tr>
-   <td>Object cible</td>
-   <td>defaultView</td>
-  </tr>
-  <tr>
-   <td>Interface</td>
-   <td>{{domxref("Event")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <td>Propagation</td>
+      <td>Non</td>
+    </tr>
+    <tr>
+      <td>Annulable</td>
+      <td>Oui</td>
+    </tr>
+    <tr>
+      <td>Object cible</td>
+      <td>defaultView</td>
+    </tr>
+    <tr>
+      <td>Interface</td>
+      <td>{{domxref("Event")}}</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Propriétés">Propriétés</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Propriété</th>
-   <th scope="col">Type</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>target</code> {{readOnlyInline}}</td>
-   <td>{{domxref("EventTarget")}}</td>
-   <td>La cible de l'événement (la plus haute cible dans l'arbre du DOM).</td>
-  </tr>
-  <tr>
-   <td><code>type</code> {{readOnlyInline}}</td>
-   <td>{{domxref("DOMString")}}</td>
-   <td>Le type de l'événement.</td>
-  </tr>
-  <tr>
-   <td><code>bubbles</code> {{readOnlyInline}}</td>
-   <td>{{jsxref("Boolean")}}</td>
-   <td>Est-ce que l'événement se propage ?</td>
-  </tr>
-  <tr>
-   <td><code>cancelable</code> {{readOnlyInline}}</td>
-   <td>{{jsxref("Boolean")}}</td>
-   <td>Est-il possible d'annuler l'événement ?</td>
-  </tr>
-  <tr>
-   <td><code>returnValue</code></td>
-   <td>{{domxref("DOMString")}}</td>
-   <td>La valeur de retour de l'événement (le message à afficher à l'utlisateur)</td>
-  </tr>
- </tbody>
-</table>
+## Propriétés
+
+| Propriété                             | Type                                 | Description                                                               |
+| ------------------------------------- | ------------------------------------ | ------------------------------------------------------------------------- |
+| `target` {{readOnlyInline}}     | {{domxref("EventTarget")}} | La cible de l'événement (la plus haute cible dans l'arbre du DOM).        |
+| `type` {{readOnlyInline}}       | {{domxref("DOMString")}}     | Le type de l'événement.                                                   |
+| `bubbles` {{readOnlyInline}}    | {{jsxref("Boolean")}}         | Est-ce que l'événement se propage ?                                       |
+| `cancelable` {{readOnlyInline}} | {{jsxref("Boolean")}}         | Est-il possible d'annuler l'événement ?                                   |
+| `returnValue`                         | {{domxref("DOMString")}}     | La valeur de retour de l'événement (le message à afficher à l'utlisateur) |
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush:js;">window.addEventListener("beforeunload", function (event) {
+```js
+window.addEventListener("beforeunload", function (event) {
   event.returnValue = "\o/";
 });
 
 // est équivalent à
 window.addEventListener("beforeunload", function (event) {
   event.preventDefault();
-});</pre>
+});
+```
 
-<p>Les navigateurs basés sur WebKit ne suivent pas les spécifications pour la boîte de dialogue. Un exemple pratiquement compatible entre les navigateurs serait à peu près comme suit:</p>
+Les navigateurs basés sur WebKit ne suivent pas les spécifications pour la boîte de dialogue. Un exemple pratiquement compatible entre les navigateurs serait à peu près comme suit:
 
-<pre class="brush: js">window.addEventListener("beforeunload", function (e) {
+```js
+window.addEventListener("beforeunload", function (e) {
   var confirmationMessage = "\o/";
 
   e.returnValue = confirmationMessage;     // Gecko, Trident, Chrome 34+
-  return confirmationMessage;              // Gecko, WebKit, Chrome &lt;34
-});</pre>
-
-<h2 id="Notes">Notes</h2>
-
-<p>Quand l'événement retourne une valeur non nulle, l'utilisateur est invité à confirmer le déchargement de la page. Dans la plupart des navigateurs, la valeur de retour de l'événement est affiché dans une boîte de dialogue. Dans Firefox 4 et plus, la chaine de caractères retournée n'est pas affiché à l'utilisateur. A la place, Firefox affiche "Cette page demande de confirmer sa fermeture ; des données saisies pourraient ne pas être enregistrées". Voir {{bug("588292")}}.</p>
-
-<p>Depuis le 25 Mai 2011, la spécification HTML5 indique ques les appels aux méthodes {{domxref("window.alert()")}}, {{domxref("window.confirm()")}} et {{domxref("window.prompt()")}} peuvent être ignorés durant l'événement. Voir <a href="http://www.w3.org/TR/html5/webappapis.html#user-prompts">specification HTML5 </a> pour plus de détails.</p>
-
-<p>Noter aussi que de nombreux navigateurs ignorent le résultat  de l'événement (il n'y a donc aucune demande de confirmation). Firefox a une préférence cachée dans about:config pour faire de même. Essentiellement, cela signifie que l'utilisateur confirme toujours silencieusement que le document peut être déchargé.</p>
-
-<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", "indices.html#event-beforeunload", "beforeunload")}}</td>
-   <td>{{Spec2("HTML WHATWG")}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML5 W3C", "browsers.html#unloading-documents", "beforeunload")}}</td>
-   <td>{{Spec2("HTML5 W3C")}}</td>
-   <td>Première définition</td>
-  </tr>
- </tbody>
-</table>
+  return confirmationMessage;              // Gecko, WebKit, Chrome <34
+});
+```
+
+## Notes
+
+Quand l'événement retourne une valeur non nulle, l'utilisateur est invité à confirmer le déchargement de la page. Dans la plupart des navigateurs, la valeur de retour de l'événement est affiché dans une boîte de dialogue. Dans Firefox 4 et plus, la chaine de caractères retournée n'est pas affiché à l'utilisateur. A la place, Firefox affiche "Cette page demande de confirmer sa fermeture ; des données saisies pourraient ne pas être enregistrées". Voir {{bug("588292")}}.
+
+Depuis le 25 Mai 2011, la spécification HTML5 indique ques les appels aux méthodes {{domxref("window.alert()")}}, {{domxref("window.confirm()")}} et {{domxref("window.prompt()")}} peuvent être ignorés durant l'événement. Voir [specification HTML5 ](http://www.w3.org/TR/html5/webappapis.html#user-prompts)pour plus de détails.
+
+Noter aussi que de nombreux navigateurs ignorent le résultat  de l'événement (il n'y a donc aucune demande de confirmation). Firefox a une préférence cachée dans about:config pour faire de même. Essentiellement, cela signifie que l'utilisateur confirme toujours silencieusement que le document peut être déchargé.
+
+## Spécifications
+
+| Spécification                                                                                            | Statut                           | Commentaire         |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- |
+| {{SpecName("HTML WHATWG", "indices.html#event-beforeunload", "beforeunload")}} | {{Spec2("HTML WHATWG")}} |                     |
+| {{SpecName("HTML5 W3C", "browsers.html#unloading-documents", "beforeunload")}} | {{Spec2("HTML5 W3C")}}     | Première définition |
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{Event("DOMContentLoaded")}}</li>
- <li>{{Event("readystatechange")}}</li>
- <li>{{Event("load")}}</li>
- <li>{{Event("unload")}}</li>
- <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#prompt-to-unload-a-document">Unloading Documents — Prompt to unload a document</a></li>
- <li><a href="https://developers.google.com/web/updates/2016/04/chrome-51-deprecations?hl=en#remove_custom_messages_in_onbeforeload_dialogs">Enlever les messages personnalisés dans les boîtes de dialogues onbeforeload après Chrome 51</a></li>
-</ul>
+- {{Event("DOMContentLoaded")}}
+- {{Event("readystatechange")}}
+- {{Event("load")}}
+- {{Event("unload")}}
+- [Unloading Documents — Prompt to unload a document](http://www.whatwg.org/specs/web-apps/current-work/#prompt-to-unload-a-document)
+- [Enlever les messages personnalisés dans les boîtes de dialogues onbeforeload après Chrome 51](https://developers.google.com/web/updates/2016/04/chrome-51-deprecations?hl=en#remove_custom_messages_in_onbeforeload_dialogs)
diff --git a/files/fr/web/api/window/blur/index.md b/files/fr/web/api/window/blur/index.md
index 75091cf2a6..190281c682 100644
--- a/files/fr/web/api/window/blur/index.md
+++ b/files/fr/web/api/window/blur/index.md
@@ -8,39 +8,30 @@ tags:
   - Méthode
 translation_of: Web/API/Window/blur
 ---
-<p>{{APIRef}}</p>
+{{APIRef}}
 
-<p>Éloigne la mise au point de la fenêtre.</p>
+Éloigne la mise au point de la fenêtre.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><code>window.blur()</code></pre>
+    window.blur()
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush:js">window.blur();</pre>
+```js
+window.blur();
+```
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p>La méthode <code>window.blur()</code> est l'équivalent programmatique du déplacement du focus de l'utilisateur loin de la fenêtre courante.</p>
+La méthode `window.blur()` est l'équivalent programmatique du déplacement du focus de l'utilisateur loin de la fenêtre courante.
 
-<h2 id="Specification">Spécification</h2>
+## Spécification
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentair</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG','interaction.html#dom-window-blur','Window.blur()')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                            | Statut                           | Commentair |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------- | ---------- |
+| {{SpecName('HTML WHATWG','interaction.html#dom-window-blur','Window.blur()')}} | {{Spec2('HTML WHATWG')}} |            |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Window.blur")}}</p>
+{{Compat("api.Window.blur")}}
diff --git a/files/fr/web/api/window/cancelanimationframe/index.md b/files/fr/web/api/window/cancelanimationframe/index.md
index a0c27fc7eb..7091fd2664 100644
--- a/files/fr/web/api/window/cancelanimationframe/index.md
+++ b/files/fr/web/api/window/cancelanimationframe/index.md
@@ -11,24 +11,21 @@ tags:
   - Window
 translation_of: Web/API/Window/cancelAnimationFrame
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}La méthode **`window.cancelAnimationFrame()`** met fin à une animation précédement configurée par un appel à {{domxref("window.requestAnimationFrame()")}}.
 
-<div>La méthode <code><strong>window.cancelAnimationFrame()</strong></code> met fin à une animation précédement configurée par un appel à {{domxref("window.requestAnimationFrame()")}}.</div>
+## Syntaxe
 
-<h2 id="Syntaxe">Syntaxe</h2>
+    window.cancelAnimationFrame(requestID);
 
-<pre class="syntaxbox">window.cancelAnimationFrame(<em>requestID</em>);</pre>
+### Paramètres
 
-<h3 id="Paramètres">Paramètres</h3>
+- `requestID`
+  - : L'identifiant retourné par l'appel à {{domxref("window.requestAnimationFrame()")}} qui a généré la fonction de rappel (callback)
 
-<dl>
- <dt><code>requestID</code></dt>
- <dd>L'identifiant retourné par l'appel à {{domxref("window.requestAnimationFrame()")}} qui a généré la fonction de rappel (callback)</dd>
-</dl>
+## Exemples
 
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush: js">var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
+```js
+var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                             window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
 
 var cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame;
@@ -40,7 +37,7 @@ var myReq; // Déclarer la variable globalement avant de lancer l'animation
 function step(timestamp) {
   var progress = timestamp - start;
   d.style.left = Math.min(progress / 10, 200) + 'px';
-  if (progress &lt; 2000) {
+  if (progress < 2000) {
     // Ne pas oublier de récupérer l'identifiant à chaque appel de la fonction
     myReq = requestAnimationFrame(step);
   }
@@ -48,30 +45,19 @@ function step(timestamp) {
 myReq = requestAnimationFrame(step);
 // L'annulation utilise le dernier identifiant
 cancelAnimationFrame(myReq);
-</pre>
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{spec("https://www.w3.org/TR/html51/webappapis.html#animation-frames", "Timing control for script-based animations: cancelAnimationFrame", "WD")}}</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                                                                                        |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{spec("https://www.w3.org/TR/html51/webappapis.html#animation-frames", "Timing control for script-based animations: cancelAnimationFrame", "WD")}} |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Window.cancelAnimationFrame")}}</p>
+{{Compat("api.Window.cancelAnimationFrame")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("window.mozAnimationStartTime")}}</li>
- <li>{{domxref("window.requestAnimationFrame()")}}</li>
-</ul>
+- {{domxref("window.mozAnimationStartTime")}}
+- {{domxref("window.requestAnimationFrame()")}}
diff --git a/files/fr/web/api/window/cancelidlecallback/index.md b/files/fr/web/api/window/cancelidlecallback/index.md
index 39c94deb9a..126c343b54 100644
--- a/files/fr/web/api/window/cancelidlecallback/index.md
+++ b/files/fr/web/api/window/cancelidlecallback/index.md
@@ -3,38 +3,25 @@ title: window.cancelIdleCallback()
 slug: Web/API/Window/cancelIdleCallback
 translation_of: Web/API/Window/cancelIdleCallback
 ---
-<div>{{APIRef}}{{SeeCompatTable}}</div>
+{{APIRef}}{{SeeCompatTable}}
 
-<p>La méthode <strong><code>window.cancelIdleCallback()</code></strong> annule une fonction précedemment planifiée via {{domxref("window.requestIdleCallback()")}}.</p>
+La méthode **`window.cancelIdleCallback()`** annule une fonction précedemment planifiée via {{domxref("window.requestIdleCallback()")}}.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">window.cancelIdleCallback(<em>idleCallbackId</em>);</pre>
+    window.cancelIdleCallback(idleCallbackId);
 
-<h3 id="Parameters">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt>idleCallbackId</dt>
- <dd>L'entier long non-signé retourné par {{domxref("window.requestIdleCallback()")}}.</dd>
-</dl>
+- idleCallbackId
+  - : L'entier long non-signé retourné par {{domxref("window.requestIdleCallback()")}}.
 
-<h2 id="Specifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th>Spécification</th>
-   <th>Status</th>
-   <th>Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Background Tasks')}}</td>
-   <td>{{Spec2('Background Tasks')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                | Status                                   | Commentaire          |
+| -------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('Background Tasks')}} | {{Spec2('Background Tasks')}} | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Window.cancelIdleCallback")}}</p>
+{{Compat("api.Window.cancelIdleCallback")}}
diff --git a/files/fr/web/api/window/captureevents/index.md b/files/fr/web/api/window/captureevents/index.md
index cac350b130..4e79f89499 100644
--- a/files/fr/web/api/window/captureevents/index.md
+++ b/files/fr/web/api/window/captureevents/index.md
@@ -9,24 +9,24 @@ tags:
   - Non-standard
 translation_of: Web/API/Window/captureEvents
 ---
-<div>{{ ApiRef() }} {{deprecated_header(1.9)}} {{Non-standard_header}}</div>
+{{ ApiRef() }} {{deprecated_header(1.9)}} {{Non-standard_header}}
 
-<p>La méthode <code><strong>Window.captureEvents()</strong></code> enregistre la fenêtre pour capturer tous les événements du type spécifié.</p>
+La méthode **`Window.captureEvents()`** enregistre la fenêtre pour capturer tous les événements du type spécifié.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">window.captureEvents(<em>eventType</em>)
-</pre>
+    window.captureEvents(eventType)
 
-<p><code>eventType</code> est une combinaison des valeurs suivantes: <code>Event.ABORT</code>, <code>Event.BLUR</code>, <code>Event.CLICK</code>, <code>Event.CHANGE</code>, <code>Event.DBLCLICK</code>, <code>Event.DRAGDDROP</code>, <code>Event.ERROR</code>, <code>Event.FOCUS</code>, <code>Event.KEYDOWN</code>, <code>Event.KEYPRESS</code>, <code>Event.KEYUP</code>, <code>Event.LOAD</code>, <code>Event.MOUSEDOWN</code>, <code>Event.MOUSEMOVE</code>, <code>Event.MOUSEOUT</code>, <code>Event.MOUSEOVER</code>, <code>Event.MOUSEUP</code>, <code>Event.MOVE</code>, <code>Event.RESET</code>, <code>Event.RESIZE</code>, <code>Event.SELECT</code>, <code>Event.SUBMIT</code>, <code>Event.UNLOAD</code>.</p>
+`eventType` est une combinaison des valeurs suivantes: `Event.ABORT`, `Event.BLUR`, `Event.CLICK`, `Event.CHANGE`, `Event.DBLCLICK`, `Event.DRAGDDROP`, `Event.ERROR`, `Event.FOCUS`, `Event.KEYDOWN`, `Event.KEYPRESS`, `Event.KEYUP`, `Event.LOAD`, `Event.MOUSEDOWN`, `Event.MOUSEMOVE`, `Event.MOUSEOUT`, `Event.MOUSEOVER`, `Event.MOUSEUP`, `Event.MOVE`, `Event.RESET`, `Event.RESIZE`, `Event.SELECT`, `Event.SUBMIT`, `Event.UNLOAD`.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush:html">&lt;!DOCTYPE html&gt;
-&lt;html lang="fr"&gt;
-&lt;head&gt;
-&lt;!-- ... --&gt;
-&lt;script&gt;
+```html
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+<!-- ... -->
+<script>
 function reg() {
   window.captureEvents(Event.CLICK);
   window.onclick = page_click;
@@ -35,23 +35,23 @@ function reg() {
 function page_click() {
   alert('événement de clic sur la page détecté!');
 }
-&lt;/script&gt;
-&lt;/head&gt;
+</script>
+</head>
 
-&lt;body onload="reg();"&gt;
-&lt;p&gt;cliquez n'importe où sur cette page.&lt;/p&gt;
-&lt;/body&gt;
-&lt;/html&gt;
-</pre>
+<body onload="reg();">
+<p>cliquez n'importe où sur cette page.</p>
+</body>
+</html>
+```
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p>Les événements déclenchés dans le DOM par l'activité de l'utilisateur (tels que cliquer sur des boutons ou déplacer le focus loin du document actuel) passent généralement par la <a href="/en-US/docs/Web/API/Window"><code>window</code></a> de haut niveau et les objets de<code> </code><a href="/en-US/docs/Web/API/document"><code>document</code></a> avant d'arriver à l'objet qui a déclenché l'événement.</p>
+Les événements déclenchés dans le DOM par l'activité de l'utilisateur (tels que cliquer sur des boutons ou déplacer le focus loin du document actuel) passent généralement par la [`window`](/en-US/docs/Web/API/Window) de haut niveau et les objets de` `[`document`](/en-US/docs/Web/API/document) avant d'arriver à l'objet qui a déclenché l'événement.
 
-<p>Lorsque vous appelez la méthode <code>captureEvents()</code> sur <a href="/en-US/docs/Web/API/Window"><code>window</code></a>, événements du type que vous spécifier (par exemple, <code>Event.CLICK</code>) ne passe plus par les objets "inférieurs" de la hiérarchie. Pour que les événements "bouillonnent" comme ils le font normalement, vous devez appeler<code> </code><a href="/en-US/docs/Web/API/window.releaseEvents"><code>window.releaseEvents()</code></a> ({{deprecated_inline}}) sur la fenêtre pour l'empêcher de piéger les événements.</p>
+Lorsque vous appelez la méthode `captureEvents()` sur [`window`](/en-US/docs/Web/API/Window), événements du type que vous spécifier (par exemple, `Event.CLICK`) ne passe plus par les objets "inférieurs" de la hiérarchie. Pour que les événements "bouillonnent" comme ils le font normalement, vous devez appeler` `[`window.releaseEvents()`](/en-US/docs/Web/API/window.releaseEvents) ({{deprecated_inline}}) sur la fenêtre pour l'empêcher de piéger les événements.
 
-<p>Notez que vous pouvez transmettre une liste d'événements à cette méthode en utilisant la syntaxe suivante : <code>window.captureEvents(Event.KEYPRESS | Event.KEYDOWN | Event.KEYUP)</code>.</p>
+Notez que vous pouvez transmettre une liste d'événements à cette méthode en utilisant la syntaxe suivante : `window.captureEvents(Event.KEYPRESS | Event.KEYDOWN | Event.KEYUP)`.
 
-<h2 id="Spécification">Spécification</h2>
+## Spécification
 
-<p>Cela ne fait partie d'aucune spécification.</p>
+Cela ne fait partie d'aucune spécification.
diff --git a/files/fr/web/api/window/clearimmediate/index.md b/files/fr/web/api/window/clearimmediate/index.md
index 886d10eb4f..453c55bedb 100644
--- a/files/fr/web/api/window/clearimmediate/index.md
+++ b/files/fr/web/api/window/clearimmediate/index.md
@@ -8,58 +8,41 @@ tags:
   - Window
 translation_of: Web/API/Window/clearImmediate
 ---
-<p>{{APIRef("HTML DOM")}}{{Non-standard_header}}</p>
+{{APIRef("HTML DOM")}}{{Non-standard_header}}
 
-<p>Cette méthode efface l'action spécifiée par {{DOMxRef("window.setImmediate")}}.</p>
+Cette méthode efface l'action spécifiée par {{DOMxRef("window.setImmediate")}}.
 
-<div class="note">
-<p><strong>Note :</strong> Cette méthode ne devrait pas devenir standard et n'est implémentée que par les versions récentes d'Internet Explorer et de Node.js 0.10+. Il rencontre la résistance à la fois de <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=686201">Gecko</a> (Firefox) et <a href="http://code.google.com/p/chromium/issues/detail?id=146172">Webkit</a> (Google/Apple).</p>
-</div>
+> **Note :** Cette méthode ne devrait pas devenir standard et n'est implémentée que par les versions récentes d'Internet Explorer et de Node.js 0.10+. Il rencontre la résistance à la fois de [Gecko](https://bugzilla.mozilla.org/show_bug.cgi?id=686201) (Firefox) et [Webkit](http://code.google.com/p/chromium/issues/detail?id=146172) (Google/Apple).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var>window</var>.clearImmediate( <var>immediateID</var> )
-</pre>
+    window.clearImmediate( immediateID )
 
-<p>où immediateID est un ID retourné par {{DOMxRef("window.setImmediate")}}.</p>
+où immediateID est un ID retourné par {{DOMxRef("window.setImmediate")}}.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: js">let immediateID = setImmediate(() =&gt; {
+```js
+let immediateID = setImmediate(() => {
   // Exécute du code
 }
 
 document.getElementById("bouton")
-  .addEventListener(() =&gt; {
+  .addEventListener(() => {
   clearImmediate(immediateID);
 });
-</pre>
+```
 
-<h2 id="Spécifications">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><a href="https://w3c.github.io/setImmediate/#si-setImmediate">Efficient Script Yielding La définition de <code>setImmediate</code> dans cette spécification.</a></td>
-   <td>Editor's Draft</td>
-   <td>Initial definition.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                              | Statut         | Commentaire         |
+| ------------------------------------------------------------------------------------------------------------------------------------------ | -------------- | ------------------- |
+| [Efficient Script Yielding La définition de `setImmediate` dans cette spécification.](https://w3c.github.io/setImmediate/#si-setImmediate) | Editor's Draft | Initial definition. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Window.clearImmediate")}}</p>
+{{Compat("api.Window.clearImmediate")}}
 
-<h2 id="Voir_également">Voir également</h2>
+## Voir également
 
-<ul>
- <li>{{DOMxRef("Window.setImmediate()")}}</li>
-</ul>
+- {{DOMxRef("Window.setImmediate()")}}
diff --git a/files/fr/web/api/window/close/index.md b/files/fr/web/api/window/close/index.md
index b5ea2c278c..ee82f5b027 100644
--- a/files/fr/web/api/window/close/index.md
+++ b/files/fr/web/api/window/close/index.md
@@ -5,18 +5,28 @@ tags:
   - Référence_du_DOM_Gecko
 translation_of: Web/API/Window/close
 ---
-<p>{{ ApiRef() }}</p>
-<h3 id="R.C3.A9sum.C3.A9">Résumé</h3>
-<p>Ferme la fenêtre référencée.</p>
-<h3 id="Syntaxe">Syntaxe</h3>
-<pre>window.close();
-</pre>
-<h3 id="Description">Description</h3>
-<p>Lorsque cette méthode est appelée, la fenêtre référencée est fermée.</p>
-<p>Cette méthode est uniquement autorisée à être appelée pour des fenêtres qui ont été ouvertes par un script à l'aide de la méthode <a href="fr/DOM/window.open">window.open</a>. Si la fenêtre n'a pas été ouverte par un script, l'erreur suivante apparaît dans la console JavaScript : <code>Scripts may not close windows that were not opened by script.</code></p>
-<h4 id="Exemples">Exemples</h4>
-<h5 id="Fermeture_d.27une_fen.C3.AAtre_ouverte_avec_window.open.28.29">Fermeture d'une fenêtre ouverte avec <code>window.open()</code></h5>
-<pre class="brush: html">&lt;script type="text/javascript"&gt;
+{{ ApiRef() }}
+
+### Résumé
+
+Ferme la fenêtre référencée.
+
+### Syntaxe
+
+    window.close();
+
+### Description
+
+Lorsque cette méthode est appelée, la fenêtre référencée est fermée.
+
+Cette méthode est uniquement autorisée à être appelée pour des fenêtres qui ont été ouvertes par un script à l'aide de la méthode [window.open](fr/DOM/window.open). Si la fenêtre n'a pas été ouverte par un script, l'erreur suivante apparaît dans la console JavaScript : `Scripts may not close windows that were not opened by script.`
+
+#### Exemples
+
+##### Fermeture d'une fenêtre ouverte avec `window.open()`
+
+```html
+<script type="text/javascript">
 // Variable globale pour stocker une référence vers la fenêtre ouverte
 var fenetreOuverte;
 
@@ -28,19 +38,24 @@ function fermerFenetreOuverte()
 {
   fenetreOuverte.close();
 }
-&lt;/script&gt;
-</pre>
-<h5 id="Fermeture_de_la_fen.C3.AAtre_courante">Fermeture de la fenêtre courante</h5>
-<pre class="brush: html">&lt;script type="text/javascript"&gt;
+</script>
+```
+
+##### Fermeture de la fenêtre courante
+
+```html
+<script type="text/javascript">
 function fermerFenetreCourante()
 {
   window.close();
 }
-&lt;/script&gt;
-</pre>
-<h3 id="Sp.C3.A9cification">Spécification</h3>
-<p>DOM Level 0. <code>window.close()</code> ne fait partie d'aucune spécification ni recommandation technique du W3C.</p>
-<h3 id="R.C3.A9f.C3.A9rence_additionnelle">Référence additionnelle</h3>
-<ul>
- <li><a href="http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/methods/close_0.asp">window.close() sur MSDN</a></li>
-</ul>
\ No newline at end of file
+</script>
+```
+
+### Spécification
+
+DOM Level 0. `window.close()` ne fait partie d'aucune spécification ni recommandation technique du W3C.
+
+### Référence additionnelle
+
+- [window.close() sur MSDN](http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/methods/close_0.asp)
diff --git a/files/fr/web/api/window/closed/index.md b/files/fr/web/api/window/closed/index.md
index e01f35054b..02f4358698 100644
--- a/files/fr/web/api/window/closed/index.md
+++ b/files/fr/web/api/window/closed/index.md
@@ -5,51 +5,61 @@ tags:
   - Référence_du_DOM_Gecko
 translation_of: Web/API/Window/closed
 ---
-<p>{{ ApiRef() }}</p>
-<h3 id="R.C3.A9sum.C3.A9">Résumé</h3>
-<p>Cette propriété indique si la fenêtre référencée est fermée ou non.</p>
-<h3 id="Syntaxe">Syntaxe</h3>
-<pre>isClosed = window.closed;
-</pre>
-<p>Cette propriété est en lecture seule.</p>
-<h3 id="Valeur_renvoy.C3.A9e">Valeur renvoyée</h3>
-<dl>
- <dt>
-  <code>isClosed</code></dt>
- <dd>
-  Un booléen. Les valeurs possibles sont :</dd>
-</dl>
-<ul>
- <li><code>false</code> : La fenêtre est ouverte.</li>
- <li><code>true</code> : La fenêtre a été fermée.</li>
-</ul>
-<h3 id="Exemples">Exemples</h3>
-<h4 id="Chargement_d.27une_page_dans_la_fen.C3.AAtre_principale_depuis_un_popup">Chargement d'une page dans la fenêtre principale depuis un popup</h4>
-<p>L'exemple suivant montre comment un popup peut transmettre un choix de l'utilisateur à la fenêtre principale en y ouvrant une URL différente. Mais il faut d'abord vérifier que la fenêtre principale et encore ouverte.</p>
-<pre>if (!window.opener.closed) {
-  // La fenêtre principale est encore là,
-  // on peut donc y charger une autre page
-  window.opener.location.href = newURL;
-}
-</pre>
-<h4 id="Appel_d.27une_fonction_dans_un_popup_ouvert_pr.C3.A9c.C3.A9demment">Appel d'une fonction dans un popup ouvert précédemment</h4>
-<p>Dans cette exemple, la fonction <code>refreshPopupWindow()</code> appelle une fonction dans le popup pour rafraichir son contenu. Cependant, si le popup n'a pas encore été ouvert ou si l'utilisateur l'a fermé, un nouveau popup est ouvert.</p>
-<pre>var popupWindow = null;
-
-function refreshPopupWindow() {
-  if (popupWindow &amp;&amp; !popupWindow.closed) {
-    // Le popup a déjà été ouvert et il l'est encore.
-    // On peut donc appeler sa fonction doRefresh().
-    popupWindow.doRefresh();
-  } else {
-    // Il est nécessaire d'ouvrir d'abord le popup.
-    popupWindow = window.open("popup.html");
-  }
-}
-</pre>
-<h3 id="Sp.C3.A9cification">Spécification</h3>
-<p>DOM Level 0. <code>window.closed</code> ne fait partie d'aucune spécification ou recommandation technique du W3C.</p>
-<h3 id="R.C3.A9f.C3.A9rence_suppl.C3.A9mentaire">Référence supplémentaire</h3>
-<ul>
- <li><a href="http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties/closed.asp">window.closed sur MSDN</a></li>
-</ul>
\ No newline at end of file
+{{ ApiRef() }}
+
+### Résumé
+
+Cette propriété indique si la fenêtre référencée est fermée ou non.
+
+### Syntaxe
+
+    isClosed = window.closed;
+
+Cette propriété est en lecture seule.
+
+### Valeur renvoyée
+
+- `isClosed`
+  - : Un booléen. Les valeurs possibles sont :
+
+<!---->
+
+- `false` : La fenêtre est ouverte.
+- `true` : La fenêtre a été fermée.
+
+### Exemples
+
+#### Chargement d'une page dans la fenêtre principale depuis un popup
+
+L'exemple suivant montre comment un popup peut transmettre un choix de l'utilisateur à la fenêtre principale en y ouvrant une URL différente. Mais il faut d'abord vérifier que la fenêtre principale et encore ouverte.
+
+    if (!window.opener.closed) {
+      // La fenêtre principale est encore là,
+      // on peut donc y charger une autre page
+      window.opener.location.href = newURL;
+    }
+
+#### Appel d'une fonction dans un popup ouvert précédemment
+
+Dans cette exemple, la fonction `refreshPopupWindow()` appelle une fonction dans le popup pour rafraichir son contenu. Cependant, si le popup n'a pas encore été ouvert ou si l'utilisateur l'a fermé, un nouveau popup est ouvert.
+
+    var popupWindow = null;
+
+    function refreshPopupWindow() {
+      if (popupWindow && !popupWindow.closed) {
+        // Le popup a déjà été ouvert et il l'est encore.
+        // On peut donc appeler sa fonction doRefresh().
+        popupWindow.doRefresh();
+      } else {
+        // Il est nécessaire d'ouvrir d'abord le popup.
+        popupWindow = window.open("popup.html");
+      }
+    }
+
+### Spécification
+
+DOM Level 0. `window.closed` ne fait partie d'aucune spécification ou recommandation technique du W3C.
+
+### Référence supplémentaire
+
+- [window.closed sur MSDN](http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties/closed.asp)
diff --git a/files/fr/web/api/window/confirm/index.md b/files/fr/web/api/window/confirm/index.md
index bed8eb3463..ba204b503d 100644
--- a/files/fr/web/api/window/confirm/index.md
+++ b/files/fr/web/api/window/confirm/index.md
@@ -6,42 +6,36 @@ tags:
   - DOM_0
 translation_of: Web/API/Window/confirm
 ---
-<p>{{ApiRef("Window")}}</p>
+{{ApiRef("Window")}}
 
-<h3 id="R.C3.A9sum.C3.A9">Résumé</h3>
+### Résumé
 
-<p>Affiche un dialogue modal avec un message et deux boutons, OK et Annuler.</p>
+Affiche un dialogue modal avec un message et deux boutons, OK et Annuler.
 
-<h3 id="Syntaxe">Syntaxe</h3>
+### Syntaxe
 
-<pre class="eval"><em>resultat</em> = window.confirm(<em>message</em>);
-</pre>
+    resultat = window.confirm(message);
 
-<ul>
- <li><code>message</code> est la chaîne contenant le texte à afficher dans le dialogue.</li>
- <li><code>resultat</code> est une valeur booléenne indiquant si OK ou Annuler a été sélectionné (<code>true</code> signifie OK).</li>
-</ul>
+- `message` est la chaîne contenant le texte à afficher dans le dialogue.
+- `resultat` est une valeur booléenne indiquant si OK ou Annuler a été sélectionné (`true` signifie OK).
 
-<h3 id="Exemple">Exemple</h3>
+### Exemple
 
-<pre class="eval">if (window.confirm("Une nouvelle fenêtre va s'ouvrir.")) {
-    window.open("fenetre.html", "Nouvelle fenêtre", "");
-}
-</pre>
+    if (window.confirm("Une nouvelle fenêtre va s'ouvrir.")) {
+        window.open("fenetre.html", "Nouvelle fenêtre", "");
+    }
 
-<h3 id="Notes">Notes</h3>
+### Notes
 
-<p>Le texte suivant est commun à cet article, <code>DOM:window.prompt</code> et <code>DOM:window.confirm</code> Les boîtes de dialogue sont des fenêtres modales : elles empêchent l'utilisateur d'accéder au reste de l'interface du programme tant qu'elles ne sont pas fermées. C'est pourquoi il ne faut pas abuser des fonctions créant une boîte de dialogue (ou fenêtre modale).</p>
+Le texte suivant est commun à cet article, `DOM:window.prompt` et `DOM:window.confirm` Les boîtes de dialogue sont des fenêtres modales : elles empêchent l'utilisateur d'accéder au reste de l'interface du programme tant qu'elles ne sont pas fermées. C'est pourquoi il ne faut pas abuser des fonctions créant une boîte de dialogue (ou fenêtre modale).
 
-<p>Les applications utilisant le chrome (par exemple les extensions) devront plutôt utiliser les méthodes de <a href="fr/NsIPromptService">nsIPromptService</a>.</p>
+Les applications utilisant le chrome (par exemple les extensions) devront plutôt utiliser les méthodes de [nsIPromptService](fr/NsIPromptService).
 
-<h3 id="Sp.C3.A9cification">Spécification</h3>
+### Spécification
 
-<p>{{ DOM0() }}</p>
+{{ DOM0() }}
 
-<h3 id="Voir_aussi">Voir aussi</h3>
+### Voir aussi
 
-<ul>
- <li><a href="/fr/docs/DOM/window.alert">alert</a></li>
- <li><a href="/fr/docs/DOM/window.prompt">prompt</a></li>
-</ul>
\ No newline at end of file
+- [alert](/fr/docs/DOM/window.alert)
+- [prompt](/fr/docs/DOM/window.prompt)
diff --git a/files/fr/web/api/window/console/index.md b/files/fr/web/api/window/console/index.md
index cbb2e643a9..3478ea9292 100644
--- a/files/fr/web/api/window/console/index.md
+++ b/files/fr/web/api/window/console/index.md
@@ -10,47 +10,36 @@ tags:
   - lecture seule
 translation_of: Web/API/Window/console
 ---
-<p>{{ APIRef }}</p>
+{{ APIRef }}
 
-<p>La propriété <strong><code>Window.console</code></strong> en lecture seule retourne une référence à l'objet {{domxref("Console")}}, qui founit des méthodes pour afficher des information sur la console du navigateur. Ces méthodes ont pour seul but le débogage et ne devraient pas servir à présenter des informations au utilisateurs.</p>
+La propriété **`Window.console`** en lecture seule retourne une référence à l'objet {{domxref("Console")}}, qui founit des méthodes pour afficher des information sur la console du navigateur. Ces méthodes ont pour seul but le débogage et ne devraient pas servir à présenter des informations au utilisateurs.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>var consoleObj</em> = <em>window</em>.console;
-</pre>
+    var consoleObj = window.console;
 
-<h2 id="Example">Exemples</h2>
+## Exemples
 
-<h3 id="Afficher_dans_la_console">Afficher dans la console</h3>
+### Afficher dans la console
 
-<p>Le premier exemple affiche du texte dans la console.</p>
+Le premier exemple affiche du texte dans la console.
 
-<pre class="brush: js">console.log("An error occurred while loading the content");
-</pre>
+```js
+console.log("An error occurred while loading the content");
+```
 
-<p>L'exemple suivant affiche un objet dans la console, et les champs de l'objet y sont écrit:</p>
+L'exemple suivant affiche un objet dans la console, et les champs de l'objet y sont écrit:
 
-<pre class="brush: js">console.dir(someObject);</pre>
+```js
+console.dir(someObject);
+```
 
-<p>Voir {{SectionOnPage("/en-US/docs/Web/API/Console", "Usage")}} pour plus d'exemples appronfondit.</p>
+Voir {{SectionOnPage("/en-US/docs/Web/API/Console", "Usage")}} pour plus d'exemples appronfondit.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Console API')}}</td>
-   <td>{{Spec2('Console API')}}</td>
-   <td>Définition Initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                        | Status                           | Commentaire          |
+| ------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName('Console API')}} | {{Spec2('Console API')}} | Définition Initiale. |
 
-<div class="note">
-<p><strong>Note :</strong> Actuellement il y a beaucoup de différences d'implémentation entre les navigateurs, mais ils sont en train d'être standardisés pour les rendre plus consistants entre eux.</p>
-</div>
+> **Note :** Actuellement il y a beaucoup de différences d'implémentation entre les navigateurs, mais ils sont en train d'être standardisés pour les rendre plus consistants entre eux.
diff --git a/files/fr/web/api/window/content/index.md b/files/fr/web/api/window/content/index.md
index ef73a10622..d40f4f7090 100644
--- a/files/fr/web/api/window/content/index.md
+++ b/files/fr/web/api/window/content/index.md
@@ -5,22 +5,31 @@ tags:
   - Référence_du_DOM_Gecko
 translation_of: Web/API/Window/content
 ---
-<p>{{ ApiRef() }}</p>
-<h3 id="R.C3.A9sum.C3.A9">Résumé</h3>
-<p>Renvoie un objet <a href="fr/DOM/window">Window</a> pour la fenêtre de contenu principale. C'est utile pour les fenêtres XUL qui ont un <code>&lt;browser&gt;</code> (ou <code>tabbrowser</code> ou <code>&lt;iframe&gt;</code>) avec l'attribut <code>type="content-primary"</code> défini - l'exemple le plus célèbre étant la fenêtre principale de Firefox, <code>browser.xul</code>. Dans de tels cas, <code>content</code> renvoie une référence à l'objet <code>Window</code> pour le document actuellement affiché dans le navigateur. Il s'agit d'un raccourci pour <code><var>browserRef</var>.contentWindow</code>.</p>
-<p>Dans du contenu non privilégié (des pages Web), <code>content</code> est normalement équivalent à <a href="fr/DOM/window.top">top</a> (sauf dans le cas d'une page chargée dans un panneau latéral, où <code>content</code> se réfère à l'objet <code>Window</code> de l'onglet sélectionné).</p>
-<p>Certains exemples utilisent <code>_content</code> à la place de <code>content</code>. Cette forme est dépréciée depuis un long moment, et vous devriez toujours utiliser <code>content</code> dans du nouveau code.</p>
-<h3 id="Syntaxe">Syntaxe</h3>
-<pre class="eval">var <var>windowObject</var> = window.content;
-</pre>
-<h3 id="Exemple">Exemple</h3>
-<p>L'exécution du code suivant dans une fenêtre chrome XUL contenant un élement <code>&lt;browser type="content-primary"/&gt;</code> dessine une bordure rouge autour du premier élément div de la page actuellement affichée dans le navigateur :</p>
-<pre class="eval">content.document.getElementsByTagName("div")[0].style.border = "solid red 1px";
-</pre>
-<h3 id="Sp.C3.A9cification">Spécification</h3>
-<p>Ne fait partie d'aucune spécification du W3C.</p>
-<h3 id="Voir_aussi">Voir aussi</h3>
-<ul>
- <li><a href="fr/Travailler_avec_des_fen%c3%aatres_dans_le_chrome">Travailler avec des fenêtres dans le chrome</a></li>
- <li>Lorsque vous accédez à des documents depuis du code privilégié, faites attention aux <a href="fr/XPCNativeWrapper">XPCNativeWrapper</a>.</li>
-</ul>
\ No newline at end of file
+{{ ApiRef() }}
+
+### Résumé
+
+Renvoie un objet [Window](fr/DOM/window) pour la fenêtre de contenu principale. C'est utile pour les fenêtres XUL qui ont un `<browser>` (ou `tabbrowser` ou `<iframe>`) avec l'attribut `type="content-primary"` défini - l'exemple le plus célèbre étant la fenêtre principale de Firefox, `browser.xul`. Dans de tels cas, `content` renvoie une référence à l'objet `Window` pour le document actuellement affiché dans le navigateur. Il s'agit d'un raccourci pour `browserRef.contentWindow`.
+
+Dans du contenu non privilégié (des pages Web), `content` est normalement équivalent à [top](fr/DOM/window.top) (sauf dans le cas d'une page chargée dans un panneau latéral, où `content` se réfère à l'objet `Window` de l'onglet sélectionné).
+
+Certains exemples utilisent `_content` à la place de `content`. Cette forme est dépréciée depuis un long moment, et vous devriez toujours utiliser `content` dans du nouveau code.
+
+### Syntaxe
+
+    var windowObject = window.content;
+
+### Exemple
+
+L'exécution du code suivant dans une fenêtre chrome XUL contenant un élement `<browser type="content-primary"/>` dessine une bordure rouge autour du premier élément div de la page actuellement affichée dans le navigateur :
+
+    content.document.getElementsByTagName("div")[0].style.border = "solid red 1px";
+
+### Spécification
+
+Ne fait partie d'aucune spécification du W3C.
+
+### Voir aussi
+
+- [Travailler avec des fenêtres dans le chrome](fr/Travailler_avec_des_fen%c3%aatres_dans_le_chrome)
+- Lorsque vous accédez à des documents depuis du code privilégié, faites attention aux [XPCNativeWrapper](fr/XPCNativeWrapper).
diff --git a/files/fr/web/api/window/controllers/index.md b/files/fr/web/api/window/controllers/index.md
index 9f96ce9c98..9c3f8d093e 100644
--- a/files/fr/web/api/window/controllers/index.md
+++ b/files/fr/web/api/window/controllers/index.md
@@ -12,29 +12,27 @@ tags:
   - Window
 translation_of: Web/API/Window/controllers
 ---
-<div>{{APIRef}}{{non-standard_header}}</div>
+{{APIRef}}{{non-standard_header}}
 
-<p>Retourne les contrôleurs XUL de la fenêtre chrome.</p>
+Retourne les contrôleurs XUL de la fenêtre chrome.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var>controleurs</var> = window.controllers
-</pre>
+    controleurs = window.controllers
 
-<ul>
- <li><code>controleurs</code> est un objet de type <a href="/en-US/docs/XULControllers"><code>XULControllers</code></a> (<a href="/en-US/docs/XPCOM_Interface_Reference/nsIControllers"><code>nsIControllers</code></a>).</li>
-</ul>
+- `controleurs` est un objet de type [`XULControllers`](/en-US/docs/XULControllers) ([`nsIControllers`](/en-US/docs/XPCOM_Interface_Reference/nsIControllers)).
 
-<h2 id="Specification">Spécification</h2>
+## Spécification
 
-<p>Spécifique à XUL. Ne fait pas partie de la spécification.</p>
+Spécifique à XUL. Ne fait pas partie de la spécification.
 
-<p>Par défaut, le contrôleur d'une fenêtre contient le code qui prend en charge les commandes globales de la fenêtre.</p>
+Par défaut, le contrôleur d'une fenêtre contient le code qui prend en charge les commandes globales de la fenêtre.
 
-<p>Le code Chrome peut ajouter des contrôleurs (à utiliser conjointement avec les fonctions goDoCommand et goUpdateCommand dans globalOverlay.js).</p>
+Le code Chrome peut ajouter des contrôleurs (à utiliser conjointement avec les fonctions goDoCommand et goUpdateCommand dans globalOverlay.js).
 
-<p>Cependant, les contrôleurs ajoutés doivent être explicitement supprimés lorsque la fenêtre est déchargée, car cela n'est pas fait automatiquement.<br>
- Chaque suppression manquante peut provoquer le</p>
-<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=415775">bug 415775</a>:
+Cependant, les contrôleurs ajoutés doivent être explicitement supprimés lorsque la fenêtre est déchargée, car cela n'est pas fait automatiquement.
+Chaque suppression manquante peut provoquer le
 
-<pre >ASSERTION: XPConnect is being called on a scope without a 'Components' property!</pre>
\ No newline at end of file
+[bug 415775](https://bugzilla.mozilla.org/show_bug.cgi?id=415775):
+
+    ASSERTION: XPConnect is being called on a scope without a 'Components' property!
diff --git a/files/fr/web/api/window/copy_event/index.md b/files/fr/web/api/window/copy_event/index.md
index bde3e7a47c..9f999b2e78 100644
--- a/files/fr/web/api/window/copy_event/index.md
+++ b/files/fr/web/api/window/copy_event/index.md
@@ -12,64 +12,53 @@ tags:
   - copy
 translation_of: Web/API/Window/copy_event
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}
 
-<p>L'événement <strong><code>copy</code></strong> se déclenche lorsque l'utilisateur lance une action de copie via l'interface utilisateur du nagivateur.</p>
+L'événement **`copy`** se déclenche lorsque l'utilisateur lance une action de copie via l'interface utilisateur du nagivateur.
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row">Bulles</th>
-   <td>Oui</td>
-  </tr>
-  <tr>
-   <th scope="row">Annulable</th>
-   <td>Oui</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface</th>
-   <td>{{domxref("ClipboardEvent")}}</td>
-  </tr>
-  <tr>
-   <th scope="row">Propriété de gestionnaire d'événement</th>
-   <td>{{domxref("HTMLElement/oncopy", "oncopy")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Bulles</th>
+      <td>Oui</td>
+    </tr>
+    <tr>
+      <th scope="row">Annulable</th>
+      <td>Oui</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface</th>
+      <td>{{domxref("ClipboardEvent")}}</td>
+    </tr>
+    <tr>
+      <th scope="row">Propriété de gestionnaire d'événement</th>
+      <td>{{domxref("HTMLElement/oncopy", "oncopy")}}</td>
+    </tr>
+  </tbody>
 </table>
 
-<p>La cible d'origine de cet événement est le {{domxref ("Element")}} qui était la cible prévue de l'action de copie. Vous pouvez écouter cet événement sur l'interface {{domxref ("Window")}} pour le gérer dans les phases de capture ou de bullage. Pour plus de détails sur cet événement, veuillez consulter la page sur le <a href="/en-US/docs/Web/API/Element/copy_event">Element: copy event</a>.</p>
+La cible d'origine de cet événement est le {{domxref ("Element")}} qui était la cible prévue de l'action de copie. Vous pouvez écouter cet événement sur l'interface {{domxref ("Window")}} pour le gérer dans les phases de capture ou de bullage. Pour plus de détails sur cet événement, veuillez consulter la page sur le [Element: copy event](/en-US/docs/Web/API/Element/copy_event).
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: js">window.addEventListener('copy', (event) =&gt; {
+```js
+window.addEventListener('copy', (event) => {
     console.log('action de copie lancée')
-});</pre>
+});
+```
 
-<h2 id="Spécifications">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('Clipboard API', '#clipboard-event-copy')}}</td>
-   <td>{{Spec2('Clipboard API')}}</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                            | Statut                               |
+| ------------------------------------------------------------------------ | ------------------------------------ |
+| {{SpecName('Clipboard API', '#clipboard-event-copy')}} | {{Spec2('Clipboard API')}} |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Window.copy_event")}}</p>
+{{Compat("api.Window.copy_event")}}
 
-<h2 id="Voir_également">Voir également</h2>
+## Voir également
 
-<ul>
- <li>Événements liés: {{domxref("Window/cut_event", "cut")}}, {{domxref("Window/paste_event", "paste")}}</li>
- <li>Cet événement sur {{domxref("Element")}} cible: {{domxref("Element/copy_event", "copy")}}</li>
- <li>Cet événement sur {{domxref("Document")}} cible: {{domxref("Document/copy_event", "copy")}}</li>
-</ul>
+- Événements liés: {{domxref("Window/cut_event", "cut")}}, {{domxref("Window/paste_event", "paste")}}
+- Cet événement sur {{domxref("Element")}} cible: {{domxref("Element/copy_event", "copy")}}
+- Cet événement sur {{domxref("Document")}} cible: {{domxref("Document/copy_event", "copy")}}
diff --git a/files/fr/web/api/window/customelements/index.md b/files/fr/web/api/window/customelements/index.md
index 7d7d57c203..c51cf430bf 100644
--- a/files/fr/web/api/window/customelements/index.md
+++ b/files/fr/web/api/window/customelements/index.md
@@ -11,58 +11,47 @@ tags:
   - custom elements
 translation_of: Web/API/Window/customElements
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}
 
-<p>La propriété en lecture seule <code>customElements</code> de l'interface {{domxref("Window")}} renvoie une référence à l'objet {{domxref("CustomElementRegistry")}}, qui peut être utilisée pour enregistrer de nouveaux <a href="/fr-FR/docs/Web/Web_Components/Using_custom_elements">éléments personnalisés</a> et obtenir des informations sur des éléments personnalisés enregistrés.</p>
+La propriété en lecture seule `customElements` de l'interface {{domxref("Window")}} renvoie une référence à l'objet {{domxref("CustomElementRegistry")}}, qui peut être utilisée pour enregistrer de nouveaux [éléments personnalisés](/fr-FR/docs/Web/Web_Components/Using_custom_elements) et obtenir des informations sur des éléments personnalisés enregistrés.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre>let registreElementsPersonnalises = window.customElements;</pre>
+    let registreElementsPersonnalises = window.customElements;
 
-<h3 id="Valeur_retournée">Valeur retournée</h3>
+### Valeur retournée
 
-<p>Une instance d'objet {{domxref("CustomElementRegistry")}} représentant le registre des éléments personnalisés pour la fenêtre en cours.</p>
+Une instance d'objet {{domxref("CustomElementRegistry")}} représentant le registre des éléments personnalisés pour la fenêtre en cours.
 
-<h2 id="Examples">Exemples</h2>
+## Exemples
 
-<p>L'exemple le plus courant d'utilisation de cette propriété que vous verrez sera d'obtenir l'accès à la méthode {{domxref ("CustomElementRegistry.define()")}} pour définir et enregistrer un nouvel élément personnalisé, par exemple :</p>
+L'exemple le plus courant d'utilisation de cette propriété que vous verrez sera d'obtenir l'accès à la méthode {{domxref ("CustomElementRegistry.define()")}} pour définir et enregistrer un nouvel élément personnalisé, par exemple :
 
-<pre>let registreElementsPersonnalises = window.customElements;
-registreElementsPersonnalises.define('mon-element-personnalise', MonElementPersonnalise);</pre>
+    let registreElementsPersonnalises = window.customElements;
+    registreElementsPersonnalises.define('mon-element-personnalise', MonElementPersonnalise);
 
-<p>Cependant, il est généralement raccourci en quelque chose comme :</p>
+Cependant, il est généralement raccourci en quelque chose comme :
 
-<pre>customElements.define('details-element',
-  class extends HTMLElement {
-    constructor() {
-      super();
-      const modele = document
-        .getElementById('modele-details-element')
-        .content;
-      const racineOmbre = this.attachShadow({mode: 'open'})
-        .appendChild(template.cloneNode(true));
-  }
-});</pre>
+    customElements.define('details-element',
+      class extends HTMLElement {
+        constructor() {
+          super();
+          const modele = document
+            .getElementById('modele-details-element')
+            .content;
+          const racineOmbre = this.attachShadow({mode: 'open'})
+            .appendChild(template.cloneNode(true));
+      }
+    });
 
-<p>Voir notre repo <a href="https://github.com/mdn/web-components-examples/">web-components-examples</a> pour davantage d'exemples d'utilisation.</p>
+Voir notre repo [web-components-examples](https://github.com/mdn/web-components-examples/) pour davantage d'exemples d'utilisation.
 
-<h2 id="Specification">Spécification</h2>
+## Spécification
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML WHATWG", "custom-elements.html#dom-window-customelements", "window.customElements")}}</td>
-   <td>{{Spec2("HTML WHATWG")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                            | Statut                           | Commentaire          |
+| ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName("HTML WHATWG", "custom-elements.html#dom-window-customelements", "window.customElements")}} | {{Spec2("HTML WHATWG")}} | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Window.customElements")}}</p>
+{{Compat("api.Window.customElements")}}
diff --git a/files/fr/web/api/window/cut_event/index.md b/files/fr/web/api/window/cut_event/index.md
index ad3a5de15d..0b32599b91 100644
--- a/files/fr/web/api/window/cut_event/index.md
+++ b/files/fr/web/api/window/cut_event/index.md
@@ -11,64 +11,53 @@ tags:
   - Window
 translation_of: Web/API/Window/cut_event
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}
 
-<p>L'événement <strong><code>cut</code></strong> est déclenché lorsque l'utilisateur a lancé une action de "cut" via l'interface utilisateur du navigateur.</p>
+L'événement **`cut`** est déclenché lorsque l'utilisateur a lancé une action de "cut" via l'interface utilisateur du navigateur.
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row">Bulles</th>
-   <td>Oui</td>
-  </tr>
-  <tr>
-   <th scope="row">Annulable</th>
-   <td>Oui</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface</th>
-   <td>{{domxref("ClipboardEvent")}}</td>
-  </tr>
-  <tr>
-   <th scope="row">Propriété de gestionnaire d'événements</th>
-   <td>{{domxref("HTMLElement/oncut", "oncut")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Bulles</th>
+      <td>Oui</td>
+    </tr>
+    <tr>
+      <th scope="row">Annulable</th>
+      <td>Oui</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface</th>
+      <td>{{domxref("ClipboardEvent")}}</td>
+    </tr>
+    <tr>
+      <th scope="row">Propriété de gestionnaire d'événements</th>
+      <td>{{domxref("HTMLElement/oncut", "oncut")}}</td>
+    </tr>
+  </tbody>
 </table>
 
-<p>La cible d'origine de cet événement est le {{domxref("Element")}} qui était la cible prévue de l'action cut. Vous pouvez écouter cet événement sur l'interface {{domxref("Window")}} pour le gérer dans les phases de capture ou de bullage. Pour plus de détails sur cet événement, veuillez consulter la page sur l'événement <a href="/en-US/docs/Web/API/Element/cut_event">Element: cut event</a>.</p>
+La cible d'origine de cet événement est le {{domxref("Element")}} qui était la cible prévue de l'action cut. Vous pouvez écouter cet événement sur l'interface {{domxref("Window")}} pour le gérer dans les phases de capture ou de bullage. Pour plus de détails sur cet événement, veuillez consulter la page sur l'événement [Element: cut event](/en-US/docs/Web/API/Element/cut_event).
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: js">window.addEventListener('cut', (event) =&gt; {
+```js
+window.addEventListener('cut', (event) => {
     console.log('cut action initiated')
-});</pre>
+});
+```
 
-<h2 id="Spécifications">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('Clipboard API', '#clipboard-event-cut')}}</td>
-   <td>{{Spec2('Clipboard API')}}</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                            | Statut                               |
+| ------------------------------------------------------------------------ | ------------------------------------ |
+| {{SpecName('Clipboard API', '#clipboard-event-cut')}} | {{Spec2('Clipboard API')}} |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Window.cut_event")}}</p>
+{{Compat("api.Window.cut_event")}}
 
-<h2 id="Voir_également">Voir également</h2>
+## Voir également
 
-<ul>
- <li>Événements liés: {{domxref("Window/copy_event", "copy")}}, {{domxref("Window/paste_event", "paste")}}</li>
- <li>Cet événement sur {{domxref("Element")}} targets: {{domxref("Element/cut_event", "cut")}}</li>
- <li>Cet événement sur {{domxref("Document")}} targets: {{domxref("Document/cut_event", "cut")}}</li>
-</ul>
+- Événements liés: {{domxref("Window/copy_event", "copy")}}, {{domxref("Window/paste_event", "paste")}}
+- Cet événement sur {{domxref("Element")}} targets: {{domxref("Element/cut_event", "cut")}}
+- Cet événement sur {{domxref("Document")}} targets: {{domxref("Document/cut_event", "cut")}}
diff --git a/files/fr/web/api/window/defaultstatus/index.md b/files/fr/web/api/window/defaultstatus/index.md
index 125688eca6..47aea49ff5 100644
--- a/files/fr/web/api/window/defaultstatus/index.md
+++ b/files/fr/web/api/window/defaultstatus/index.md
@@ -14,37 +14,33 @@ tags:
   - Window
 translation_of: Web/API/Window/defaultStatus
 ---
-<p>{{ obsolete_header(23) }}</p>
+{{ obsolete_header(23) }}
 
-<p>{{ APIRef() }}</p>
+{{ APIRef() }}
 
-<p>Obtient / définit le texte de la barre d'état pour la fenêtre donnée.</p>
+Obtient / définit le texte de la barre d'état pour la fenêtre donnée.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="eval"><em>var sMsg</em> = window.defaultStatus;
-window.defaultStatus = <em>sMsg;</em>
-</pre>
+    var sMsg = window.defaultStatus;
+    window.defaultStatus = sMsg;
 
-<h3 id="Parameters">Paramètres</h3>
+### Paramètres
 
-<ul>
- <li><code>sMsg</code> est une chaîne contenant le texte à afficher par défaut dans la barre d'état.</li>
-</ul>
+- `sMsg` est une chaîne contenant le texte à afficher par défaut dans la barre d'état.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="notranslate">&lt;html&gt;
- &lt;body onload="window.defaultStatus='salut!';"/&gt;
-  &lt;button onclick="window.confirm('Êtes-vous sûr de vouloir quitter?');"&gt;confirmer&lt;/button&gt;
- &lt;/body&gt;
-&lt;/html&gt;
-</pre>
+    <html>
+     <body onload="window.defaultStatus='salut!';"/>
+      <button onclick="window.confirm('Êtes-vous sûr de vouloir quitter?');">confirmer</button>
+     </body>
+    </html>
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p>Pour définir le statut une fois la fenêtre ouverte, utilisez {{domxref("window.status")}}.</p>
+Pour définir le statut une fois la fenêtre ouverte, utilisez {{domxref("window.status")}}.
 
-<h2 id="Specification">Spécification</h2>
+## Spécification
 
-<p>HTML5</p>
+HTML5
diff --git a/files/fr/web/api/window/devicemotion_event/index.md b/files/fr/web/api/window/devicemotion_event/index.md
index aa77418513..ed3fc041cb 100644
--- a/files/fr/web/api/window/devicemotion_event/index.md
+++ b/files/fr/web/api/window/devicemotion_event/index.md
@@ -4,82 +4,40 @@ slug: Web/API/Window/devicemotion_event
 translation_of: Web/API/Window/devicemotion_event
 original_slug: FUEL/Window/devicemotion_event
 ---
-<p>L'événement devicemotion est déclenché à intervalles réguliers et indique la quantité de force physique d'accélération que le périphérique reçoit à ce moment. Il fournit également des informations sur le taux de rotation, si disponible.</p>
-
-<h2 id="Informations_générales">Informations générales</h2>
-
-<dl>
- <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
- <dd style="margin: 0 0 0 120px;"><a href="http://www.w3.org/TR/orientation-event/#devicemotion">DeviceOrientation Event</a></dd>
- <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
- <dd style="margin: 0 0 0 120px;">DeviceMotionEvent</dd>
- <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
- <dd style="margin: 0 0 0 120px;">Non</dd>
- <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
- <dd style="margin: 0 0 0 120px;">Non</dd>
- <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
- <dd style="margin: 0 0 0 120px;">DefaultView (<code>window</code>)</dd>
- <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
- <dd style="margin: 0 0 0 120px;">Aucune</dd>
-</dl>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Property</th>
-   <th scope="col">Type</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>target</code> Lecture seule </td>
-   <td><a href="/fr/docs/Web/API/EventTarget"><code>EventTarget</code></a></td>
-   <td>The event target (the topmost target in the DOM tree).</td>
-  </tr>
-  <tr>
-   <td><code>type</code> Lecture seule </td>
-   <td><a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a></td>
-   <td>The type of event.</td>
-  </tr>
-  <tr>
-   <td><code>bubbles</code> Lecture seule </td>
-   <td><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Boolean"><code>Boolean</code></a></td>
-   <td>Whether the event normally bubbles or not</td>
-  </tr>
-  <tr>
-   <td><code>cancelable</code> Lecture seule </td>
-   <td><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Boolean"><code>Boolean</code></a></td>
-   <td>Whether the event is cancellable or not?</td>
-  </tr>
-  <tr>
-   <td><code>acceleration</code> Lecture seule </td>
-   <td><a href="/fr/docs/Web/API/DeviceAcceleration"><code>DeviceAcceleration</code></a></td>
-   <td>The acceleration of the device. This value has taken into account the effect of gravity and removed it from the figures. This value may not exist if the hardware doesn't know how to remove gravity from the acceleration data.</td>
-  </tr>
-  <tr>
-   <td><code>accelerationIncludingGravity </code>Lecture seule </td>
-   <td><a href="/fr/docs/Web/API/DeviceAcceleration"><code>DeviceAcceleration</code></a></td>
-   <td>The acceleration of the device. This value includes the effect of gravity, and may be the only value available on devices that don't have a gyroscope to allow them to properly remove gravity from the data.</td>
-  </tr>
-  <tr>
-   <td><code>interval</code> Lecture seule </td>
-   <td>double</td>
-   <td>The interval, in milliseconds, at which the DeviceMotionEvent is fired. The next event will be fired in approximately this amount of time.</td>
-  </tr>
-  <tr>
-   <td><code>rotationRate</code> Lecture seule </td>
-   <td><a href="/fr/docs/Web/API/DeviceRotationRate"><code>DeviceRotationRate</code></a></td>
-   <td>The rates of rotation of the device about all three axes.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Exemple">Exemple</h2>
-
-<pre class="brush: js">function handleMotionEvent(event) {
+L'événement devicemotion est déclenché à intervalles réguliers et indique la quantité de force physique d'accélération que le périphérique reçoit à ce moment. Il fournit également des informations sur le taux de rotation, si disponible.
+
+## Informations générales
+
+- Spécification
+  - : [DeviceOrientation Event](http://www.w3.org/TR/orientation-event/#devicemotion)
+- Interface
+  - : DeviceMotionEvent
+- Propagation
+  - : Non
+- Annulable
+  - : Non
+- Cible
+  - : DefaultView (`window`)
+- Action par défaut
+  - : Aucune
+
+## Propriétés
+
+| Property                                     | Type                                                                  | Description                                                                                                                                                                                                                      |
+| -------------------------------------------- | --------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `target` Lecture seule                       | [`EventTarget`](/fr/docs/Web/API/EventTarget)                         | The event target (the topmost target in the DOM tree).                                                                                                                                                                           |
+| `type` Lecture seule                         | [`DOMString`](/fr/docs/Web/API/DOMString)                             | The type of event.                                                                                                                                                                                                               |
+| `bubbles` Lecture seule                      | [`Boolean`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Boolean) | Whether the event normally bubbles or not                                                                                                                                                                                        |
+| `cancelable` Lecture seule                   | [`Boolean`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Boolean) | Whether the event is cancellable or not?                                                                                                                                                                                         |
+| `acceleration` Lecture seule                 | [`DeviceAcceleration`](/fr/docs/Web/API/DeviceAcceleration)           | The acceleration of the device. This value has taken into account the effect of gravity and removed it from the figures. This value may not exist if the hardware doesn't know how to remove gravity from the acceleration data. |
+| `accelerationIncludingGravity `Lecture seule | [`DeviceAcceleration`](/fr/docs/Web/API/DeviceAcceleration)           | The acceleration of the device. This value includes the effect of gravity, and may be the only value available on devices that don't have a gyroscope to allow them to properly remove gravity from the data.                    |
+| `interval` Lecture seule                     | double                                                                | The interval, in milliseconds, at which the DeviceMotionEvent is fired. The next event will be fired in approximately this amount of time.                                                                                       |
+| `rotationRate` Lecture seule                 | [`DeviceRotationRate`](/fr/docs/Web/API/DeviceRotationRate)           | The rates of rotation of the device about all three axes.                                                                                                                                                                        |
+
+## Exemple
+
+```js
+function handleMotionEvent(event) {
 
     var x = event.accelerationIncludingGravity.x;
     var y = event.accelerationIncludingGravity.y;
@@ -89,10 +47,8 @@ original_slug: FUEL/Window/devicemotion_event
 }
 
 window.addEventListener("devicemotion", handleMotionEvent, true);
-</pre>
+```
 
-<h2 id="Evénements_liés">Evénements liés</h2>
+## Evénements liés
 
-<ul>
- <li><a href="/fr/docs/Mozilla_event_reference/deviceorientation"><code>deviceorientation</code></a></li>
-</ul>
+- [`deviceorientation`](/fr/docs/Mozilla_event_reference/deviceorientation)
diff --git a/files/fr/web/api/window/deviceorientation_event/index.md b/files/fr/web/api/window/deviceorientation_event/index.md
index 3978ebe617..1b60a23482 100644
--- a/files/fr/web/api/window/deviceorientation_event/index.md
+++ b/files/fr/web/api/window/deviceorientation_event/index.md
@@ -9,9 +9,9 @@ tags:
 translation_of: Web/API/Window/deviceorientation_event
 original_slug: FUEL/Window/deviceorientation
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}
 
-<p>L'événement <code>deviceorientation</code> est déclenché lorsque des données  sont disponibles, à partir d'un capteur d'orientation, sur l'orientation actuelle de l'appareil par rapport au cadre de coordonnées de la Terre. Ces données sont recueillies à partir d'un magnétomètre à l'intérieur de l'appareil. Voir <a href="/fr/docs/Web/Guide/Events/Orientation_and_motion_data_explained">Données d'orientation et de mouvement expliquées</a> pour plus de détails.</p>
+L'événement `deviceorientation` est déclenché lorsque des données sont disponibles, à partir d'un capteur d'orientation, sur l'orientation actuelle de l'appareil par rapport au cadre de coordonnées de la Terre. Ces données sont recueillies à partir d'un magnétomètre à l'intérieur de l'appareil. Voir [Données d'orientation et de mouvement expliquées](/fr/docs/Web/Guide/Events/Orientation_and_motion_data_explained) pour plus de détails.
 
 <table class="properties">
   <tbody>
@@ -25,18 +25,27 @@ original_slug: FUEL/Window/deviceorientation
     </tr>
     <tr>
       <th scope="row">Interface</th>
-      <td><a href="/fr/docs/Web/API/DeviceOrientationEvent"><code>DeviceOrientationEvent</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/API/DeviceOrientationEvent"
+          ><code>DeviceOrientationEvent</code></a
+        >
+      </td>
     </tr>
     <tr>
       <th scope="row">Propriété du gestionnaire d'événements</th>
-      <td><a href="/fr/docs/Web/API/Window/ondeviceorientation"><code>window.ondeviceorientation</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/API/Window/ondeviceorientation"
+          ><code>window.ondeviceorientation</code></a
+        >
+      </td>
     </tr>
   </tbody>
 </table>
 
-<h2 id="example">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">if (window.DeviceOrientationEvent) {
+```js
+if (window.DeviceOrientationEvent) {
   window.addEventListener("deviceorientation", function(event) {
     // alpha : rotation autour de l'axe z
     var rotateDegrees = event.alpha;
@@ -51,34 +60,22 @@ original_slug: FUEL/Window/deviceorientation
 
 var handleOrientationEvent = function(frontToBack, leftToRight, rotateDegrees) {
   // faire quelque chose d'étonnant
-};</pre>
+};
+```
 
-<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("Device Orientation", "#deviceorientation", "l'événement DeviceOrientation")}}</td>
-      <td>{{Spec2("Device Orientation")}}</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                                            | Statut                                   |
+| ------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------- |
+| {{SpecName("Device Orientation", "#deviceorientation", "l'événement DeviceOrientation")}} | {{Spec2("Device Orientation")}} |
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Window.deviceorientation_event")}}</p>
+{{Compat("api.Window.deviceorientation_event")}}
 
-<h2 id="see_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>L'événement <a href="/fr/docs/Web/API/Window/devicemotion_event"><code>devicemotion</code></a></li>
-  <li><a href="/fr/docs/Web/API/Detecting_device_orientation">Détection de l'orientation des appareils.</a></li>
-  <li><a href="/fr/docs/Web/Guide/Events/Orientation_and_motion_data_explained">Explication des données d'orientation et de mouvement</a></li>
-  <li>Simulation d'événements d'orientation sur les navigateurs de bureau avec <a href="https://louisremi.github.com/orientation-devtool/">orientation-devtool</a>.</li>
-</ul>
+- L'événement [`devicemotion`](/fr/docs/Web/API/Window/devicemotion_event)
+- [Détection de l'orientation des appareils.](/fr/docs/Web/API/Detecting_device_orientation)
+- [Explication des données d'orientation et de mouvement](/fr/docs/Web/Guide/Events/Orientation_and_motion_data_explained)
+- Simulation d'événements d'orientation sur les navigateurs de bureau avec [orientation-devtool](https://louisremi.github.com/orientation-devtool/).
diff --git a/files/fr/web/api/window/devicepixelratio/index.md b/files/fr/web/api/window/devicepixelratio/index.md
index f7a9d3a7bf..fdc4cc14b6 100644
--- a/files/fr/web/api/window/devicepixelratio/index.md
+++ b/files/fr/web/api/window/devicepixelratio/index.md
@@ -3,43 +3,27 @@ title: Window.devicePixelRatio
 slug: Web/API/Window/devicePixelRatio
 translation_of: Web/API/Window/devicePixelRatio
 ---
-<p>{{APIRef}}</p>
+{{APIRef}}
 
-<p>La propriété en lecture seule <code>Window.devicePixelRatio</code> retourne le rapport entre la taille (verticale) d'un pixel physique sur le périphérique d'affichage et la taille d'un pixel indépendant du matériel (abrégé en anglais "dips").</p>
+La propriété en lecture seule `Window.devicePixelRatio` retourne le rapport entre la taille (verticale) d'un pixel physique sur le périphérique d'affichage et la taille d'un pixel indépendant du matériel (abrégé en anglais "dips").
 
-<p>Aucun rappel ni événement ne se déclenche lorsque la valeur change (par exemple, si vous glissez la fenêtre entre deux écrans à densités de pixels différentes).</p>
+Aucun rappel ni événement ne se déclenche lorsque la valeur change (par exemple, si vous glissez la fenêtre entre deux écrans à densités de pixels différentes).
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em><var>valeur</var></em> = window.devicePixelRatio;
-</pre>
+    valeur = window.devicePixelRatio;
 
-<h2 id="Spécifications">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("CSSOM View", "#dom-window-devicepixelratio", "Window.devicePixelRatio")}}</td>
-   <td>{{Spec2("CSSOM View")}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                    | Statut                           | Commentaire         |
+| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- |
+| {{SpecName("CSSOM View", "#dom-window-devicepixelratio", "Window.devicePixelRatio")}} | {{Spec2("CSSOM View")}} | Définition initiale |
 
-<h2 id="Browser_compatibility" >Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Window.devicePixelRatio")}}</p>
+{{Compat("api.Window.devicePixelRatio")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/en-US/docs/Web/CSS/@media/resolution">CSS <code>resolution</code> media query</a></li>
- <li>PPK a effectué des <a href="http://www.quirksmode.org/blog/archives/2012/06/devicepixelrati.html">recherches sur devicePixelRatio</a></li>
-</ul>
+- [CSS `resolution` media query](/en-US/docs/Web/CSS/@media/resolution)
+- PPK a effectué des [recherches sur devicePixelRatio](http://www.quirksmode.org/blog/archives/2012/06/devicepixelrati.html)
diff --git a/files/fr/web/api/window/dialogarguments/index.md b/files/fr/web/api/window/dialogarguments/index.md
index 1bd4d4ece5..42e1d49519 100644
--- a/files/fr/web/api/window/dialogarguments/index.md
+++ b/files/fr/web/api/window/dialogarguments/index.md
@@ -13,14 +13,14 @@ tags:
   - Window
 translation_of: Web/API/Window/dialogArguments
 ---
-<p>{{ deprecated_header() }}{{APIRef}}</p>
+{{ deprecated_header() }}{{APIRef}}
 
-<p>La propriété <code>dialogArguments</code> renvoie les paramètres qui ont été transmis à la méthode {{domxref("window.showModalDialog()")}} method. Cela vous permet de déterminer quels paramètres ont été spécifiés lors de la boîte de dialogue modale.</p>
+La propriété `dialogArguments` renvoie les paramètres qui ont été transmis à la méthode {{domxref("window.showModalDialog()")}} method. Cela vous permet de déterminer quels paramètres ont été spécifiés lors de la boîte de dialogue modale.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var>valeur</var> = window.dialogArguments;</pre>
+    valeur = window.dialogArguments;
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Window.dialogArguments")}}</p>
+{{Compat("api.Window.dialogArguments")}}
diff --git a/files/fr/web/api/window/directories/index.md b/files/fr/web/api/window/directories/index.md
index b0255c82be..da1f64f3e1 100644
--- a/files/fr/web/api/window/directories/index.md
+++ b/files/fr/web/api/window/directories/index.md
@@ -14,30 +14,32 @@ tags:
   - Window
 translation_of: Web/API/Window/directories
 ---
-<p>{{ obsolete_header("2.0") }}</p>
+{{ obsolete_header("2.0") }}
 
-<p>{{ APIRef() }}</p>
+{{ APIRef() }}
 
-<p>Retourne l'objet de la barre d'outils de la barre personnelle de la fenêtre. Utilisez plutôt {{ domxref("window.personalbar") }}.</p>
+Retourne l'objet de la barre d'outils de la barre personnelle de la fenêtre. Utilisez plutôt {{ domxref("window.personalbar") }}.
 
-<h3 id="Syntax">Syntaxe</h3>
+### Syntaxe
 
-<pre class="brush: js">var <var>dirBar</var> = window.directories;
-</pre>
+```js
+var dirBar = window.directories;
+```
 
-<h3 id="Parameters">Paramètres</h3>
+### Paramètres
 
-<p><var>dirBar</var> est un objet du type <code>BarProp</code>.</p>
+_dirBar_ est un objet du type `BarProp`.
 
-<h3 id="Example">Exemple</h3>
+### Exemple
 
-<pre class="brush: html">&lt;script&gt;
+```html
+<script>
  function dirs() {
   alert(window.directories);
  }
-&lt;/script&gt;
-</pre>
+</script>
+```
 
-<h3 id="Specification">Spécification</h3>
+### Spécification
 
-<p>Ne fait pas partie des spécifications.</p>
+Ne fait pas partie des spécifications.
diff --git a/files/fr/web/api/window/document/index.md b/files/fr/web/api/window/document/index.md
index 70769ed0b9..c5635556ba 100644
--- a/files/fr/web/api/window/document/index.md
+++ b/files/fr/web/api/window/document/index.md
@@ -9,37 +9,23 @@ tags:
   - Window
 translation_of: Web/API/Window/document
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}
 
-<p><strong><code>window.document</code></strong> renvoie une référence au <a href="/en-US/docs/Web/API/document">document</a> contenu dans la fenêtre.</p>
+**`window.document`** renvoie une référence au [document](/en-US/docs/Web/API/document) contenu dans la fenêtre.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">console.log(window.document.title);
-</pre>
+```js
+console.log(window.document.title);
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécifications</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', '#dom-document-2', 'Window.document')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-document-0', 'Window.document')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+| Spécifications                                                                                       | Statut                           | Commentaires |
+| ---------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ |
+| {{SpecName('HTML WHATWG', '#dom-document-2', 'Window.document')}}             | {{Spec2('HTML WHATWG')}} |              |
+| {{SpecName('HTML5 W3C', 'browsers.html#dom-document-0', 'Window.document')}} | {{Spec2('HTML5 W3C')}}     |              |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Window.document")}}</p>
+{{Compat("api.Window.document")}}
diff --git a/files/fr/web/api/window/domcontentloaded_event/index.md b/files/fr/web/api/window/domcontentloaded_event/index.md
index a2e989049d..0a6a6b4917 100644
--- a/files/fr/web/api/window/domcontentloaded_event/index.md
+++ b/files/fr/web/api/window/domcontentloaded_event/index.md
@@ -4,78 +4,64 @@ slug: Web/API/Window/DOMContentLoaded_event
 translation_of: Web/API/Window/DOMContentLoaded_event
 original_slug: Web/Events/DOMContentLoaded
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}
 
-<p>L’évènement <strong><code>DOMContentLoaded</code></strong> est émis lorsque le document HTML initial a été complètement chargé et analysé, sans attendre que les feuilles de style, images et sous-documents aient terminé de charger.</p>
+L’évènement **`DOMContentLoaded`** est émis lorsque le document HTML initial a été complètement chargé et analysé, sans attendre que les feuilles de style, images et sous-documents aient terminé de charger.
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row">Bouillonne</th>
-   <td>Oui</td>
-  </tr>
-  <tr>
-   <th scope="row">Annulable</th>
-   <td>Oui (bien que spécifié comme évènement simple non annulable)</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface</th>
-   <td>{{domxref("Event")}}</td>
-  </tr>
-  <tr>
-   <th scope="row">Propriété de gestion de l’évènement</th>
-   <td>Aucune</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Bouillonne</th>
+      <td>Oui</td>
+    </tr>
+    <tr>
+      <th scope="row">Annulable</th>
+      <td>Oui (bien que spécifié comme évènement simple non annulable)</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface</th>
+      <td>{{domxref("Event")}}</td>
+    </tr>
+    <tr>
+      <th scope="row">Propriété de gestion de l’évènement</th>
+      <td>Aucune</td>
+    </tr>
+  </tbody>
 </table>
 
-<p>La cible originale pour cet évènement est le {{domxref("Document")}} qui a terminé de charger. Vous pouvez observer cet évènement sur l’interface <code>Window</code> pour le gérer dans les phases de capture ou de bouillonnement. Pour plus de détails, veuillez consulter la page de l’évènement {{domxref("Document/DOMContentLoaded_event", "Document: DOMContent​Loaded event")}}.</p>
+La cible originale pour cet évènement est le {{domxref("Document")}} qui a terminé de charger. Vous pouvez observer cet évènement sur l’interface `Window` pour le gérer dans les phases de capture ou de bouillonnement. Pour plus de détails, veuillez consulter la page de l’évènement {{domxref("Document/DOMContentLoaded_event", "Document: DOMContent​Loaded event")}}.
 
-<p>L’évènement <a href="/fr/docs/Web/Events/load"><code>load</code></a>, très différent, doit être utilisé uniquement pour détecter qu’une page est entièrement chargée. C’est une erreur répandue d’utiliser <a href="/fr/docs/Web/Events/load"> <code>load</code> </a>là où <code>DOMContentLoaded</code> serait beaucoup plus approprié.</p>
+L’évènement [`load`](/fr/docs/Web/Events/load), très différent, doit être utilisé uniquement pour détecter qu’une page est entièrement chargée. C’est une erreur répandue d’utiliser [`load` ](/fr/docs/Web/Events/load)là où `DOMContentLoaded` serait beaucoup plus approprié.
 
-<div class="note">
-<p><strong>Note :</strong> Le JavaScript synchrone interromp l’analyse du DOM.</p>
-</div>
+> **Note :** Le JavaScript synchrone interromp l’analyse du DOM.
 
-<div class="note">
-<p><strong>Note :</strong> Il existe également de nombreuses bibliothèques indépendantes à usage général qui offrent des méthodes multi-navigateur pour détecter quand le DOM est prêt.</p>
-</div>
+> **Note :** Il existe également de nombreuses bibliothèques indépendantes à usage général qui offrent des méthodes multi-navigateur pour détecter quand le DOM est prêt.
 
-<h2 id="Accélérer">Accélérer</h2>
+## Accélérer
 
-<p>Si vous voulez que le DOM soit analysé aussi rapidement que possible après que l’utilisateur ou l’utilisatrice a demandé la page, vous pouvez <a href="/fr/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests">rendre votre JavaScript asynchrone</a> et <a href="https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery">optimiser le chargement des feuilles de style</a>. Ces dernières, sans optimisation, ralentissent le chargement de la page parce qu’elles sont chargées en parallèle, et « subtilisent » de la bande passante au document html principal.</p>
+Si vous voulez que le DOM soit analysé aussi rapidement que possible après que l’utilisateur ou l’utilisatrice a demandé la page, vous pouvez [rendre votre JavaScript asynchrone](/fr/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests) et [optimiser le chargement des feuilles de style](https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery). Ces dernières, sans optimisation, ralentissent le chargement de la page parce qu’elles sont chargées en parallèle, et « subtilisent » de la bande passante au document html principal.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Utilisation_basique">Utilisation basique</h3>
+### Utilisation basique
 
-<pre class="brush: js">window.addEventListener("DOMContentLoaded", (event) =&gt; {
+```js
+window.addEventListener("DOMContentLoaded", (event) => {
     console.log("DOM entièrement chargé et analysé");
   });
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'indices.html#event-domcontentloaded')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-  </tr>
- </tbody>
-</table>
+```
+
+## Spécifications
+
+| Spécification                                                                            | Statut                           |
+| ---------------------------------------------------------------------------------------- | -------------------------------- |
+| {{SpecName('HTML WHATWG', 'indices.html#event-domcontentloaded')}} | {{Spec2('HTML WHATWG')}} |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Window.DOMContentLoaded_event")}}</p>
+{{Compat("api.Window.DOMContentLoaded_event")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>Évènements associés : {{event("load")}}, {{event("readystatechange")}}, {{event("beforeunload")}}, {{event("unload")}}</li>
- <li>Cet évènement sur les cibles {{domxref("Document")}} : {{domxref("Document/DOMContentLoaded_event", "Document: DOMContent​Loaded event")}}</li>
-</ul>
+- Évènements associés : {{event("load")}}, {{event("readystatechange")}}, {{event("beforeunload")}}, {{event("unload")}}
+- Cet évènement sur les cibles {{domxref("Document")}} : {{domxref("Document/DOMContentLoaded_event", "Document: DOMContent​Loaded event")}}
diff --git a/files/fr/web/api/window/dump/index.md b/files/fr/web/api/window/dump/index.md
index 8a44c0818d..6eb59b8b00 100644
--- a/files/fr/web/api/window/dump/index.md
+++ b/files/fr/web/api/window/dump/index.md
@@ -7,19 +7,28 @@ tags:
   - Référence_du_DOM_Gecko
 translation_of: Web/API/Window/dump
 ---
-<p>{{ ApiRef() }}</p>
-<h3 id="R.C3.A9sum.C3.A9">Résumé</h3>
-<p>Affiche des messages dans la console (native).</p>
-<h3 id="Syntaxe">Syntaxe</h3>
-<pre class="eval">dump(<em>message</em>);
-</pre>
-<ul>
- <li><code>message</code> est le message texte à afficher.</li>
-</ul>
-<h3 id="Notes">Notes</h3>
-<p><code>dump</code> est habituellement utilisé pour débogage du JavaScript. Du code avec permissions peut également utiliser <a href="/fr/Components.utils.reportError">Components.utils.reportError</a> et <a href="/fr/nsIConsoleService">nsIConsoleService</a> pour afficher des messages dans la <a href="/fr/Console_JavaScript">console JavaScript</a>.</p>
-<p>Dans <a href="/fr/Gecko">Gecko</a>, <code>dump</code> est désactivé par défaut – il ne fait rien mais ne génère aucune erreur. Pour que <code>dump</code> écrive dans le flux standard de sortie, vous devez l'activer en mettant la préférence <code>browser.dom.window.dump.enabled</code> à <code>true</code>. Vous pouvez définir cette préférence dans <a href="http://kb.mozillazine.org/About:config">about:config</a> ou dans un <a href="http://kb.mozillazine.org/User.js_file">fichier user.js</a>.</p>
-<p>Vous aurez besoin d'une console pour voir quelque chose. Si vous n'en avez pas déjà une, fermez et réouvrez le programme en ajoutant le paramètre <code>-console</code> à la ligne de commande.</p>
-<p><code>dump</code> est également disponible au composants XPCOM implémentés en JavaScript, même si <a href="/fr/DOM/window">window</a> n'est pas l'objet global dans ce contexte.</p>
-<h3 id="Sp.C3.A9cification">Spécification</h3>
-<p>{{ DOM0() }}</p>
\ No newline at end of file
+{{ ApiRef() }}
+
+### Résumé
+
+Affiche des messages dans la console (native).
+
+### Syntaxe
+
+    dump(message);
+
+- `message` est le message texte à afficher.
+
+### Notes
+
+`dump` est habituellement utilisé pour débogage du JavaScript. Du code avec permissions peut également utiliser [Components.utils.reportError](/fr/Components.utils.reportError) et [nsIConsoleService](/fr/nsIConsoleService) pour afficher des messages dans la [console JavaScript](/fr/Console_JavaScript).
+
+Dans [Gecko](/fr/Gecko), `dump` est désactivé par défaut – il ne fait rien mais ne génère aucune erreur. Pour que `dump` écrive dans le flux standard de sortie, vous devez l'activer en mettant la préférence `browser.dom.window.dump.enabled` à `true`. Vous pouvez définir cette préférence dans [about:config](http://kb.mozillazine.org/About:config) ou dans un [fichier user.js](http://kb.mozillazine.org/User.js_file).
+
+Vous aurez besoin d'une console pour voir quelque chose. Si vous n'en avez pas déjà une, fermez et réouvrez le programme en ajoutant le paramètre `-console` à la ligne de commande.
+
+`dump` est également disponible au composants XPCOM implémentés en JavaScript, même si [window](/fr/DOM/window) n'est pas l'objet global dans ce contexte.
+
+### Spécification
+
+{{ DOM0() }}
diff --git a/files/fr/web/api/window/event/index.md b/files/fr/web/api/window/event/index.md
index 9876f88745..ff87d30b37 100644
--- a/files/fr/web/api/window/event/index.md
+++ b/files/fr/web/api/window/event/index.md
@@ -11,39 +11,24 @@ tags:
   - Window
 translation_of: Web/API/Window/event
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p>L'événement de propriété {{domxref("Window")}} en lecture seule renvoie le {{domxref("Event")}} qui est actuellement géré par le code du site. En dehors du contexte d'un gestionnaire d'événements, la valeur est toujours <code>undefined</code>.</p>
+L'événement de propriété {{domxref("Window")}} en lecture seule renvoie le {{domxref("Event")}} qui est actuellement géré par le code du site. En dehors du contexte d'un gestionnaire d'événements, la valeur est toujours `undefined`.
 
-<p>Vous devez éviter d'utiliser cette propriété dans un nouveau code et utiliser à la place le {{domxref ("Event")}} transmis à la fonction de gestionnaire d'événements. Cette propriété n'est pas prise en charge universellement et même lorsqu'elle est prise en charge, elle introduit une fragilité potentielle dans votre code.</p>
+Vous devez éviter d'utiliser cette propriété dans un nouveau code et utiliser à la place le {{domxref ("Event")}} transmis à la fonction de gestionnaire d'événements. Cette propriété n'est pas prise en charge universellement et même lorsqu'elle est prise en charge, elle introduit une fragilité potentielle dans votre code.
 
-<div class="note">
-<p><strong>Note:</strong> Cette propriété peut être fragile, dans la mesure où il peut y avoir des situations dans lesquelles <code>l'événement</code> renvoyé n'est pas la valeur attendue. De plus, <code>Window.event</code> n'est pas précis pour les événements distribués dans {{Glossary("shadow tree", "shadow trees")}}.</p>
-</div>
+> **Note :** Cette propriété peut être fragile, dans la mesure où il peut y avoir des situations dans lesquelles `l'événement` renvoyé n'est pas la valeur attendue. De plus, `Window.event` n'est pas précis pour les événements distribués dans {{Glossary("shadow tree", "shadow trees")}}.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', "#dom-window-event", "Window.event")}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                        | Statut                           | Commentaire          |
+| ------------------------------------------------------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName('DOM WHATWG', "#dom-window-event", "Window.event")}} | {{Spec2('DOM WHATWG')}} | Définition initiale. |
 
-<h2 id="Browser_Compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Window.event")}}</p>
+{{Compat("api.Window.event")}}
 
-<h2 id="Voir_également">Voir également</h2>
+## Voir également
 
-<ul>
- <li>{{domxref("Event.srcElement")}}</li>
-</ul>
+- {{domxref("Event.srcElement")}}
diff --git a/files/fr/web/api/window/find/index.md b/files/fr/web/api/window/find/index.md
index b9743102e6..3c0ea82ff3 100644
--- a/files/fr/web/api/window/find/index.md
+++ b/files/fr/web/api/window/find/index.md
@@ -13,66 +13,65 @@ tags:
   - find
 translation_of: Web/API/Window/find
 ---
-<div>{{ApiRef}}{{Non-standard_Header}}</div>
+{{ApiRef}}{{Non-standard_Header}}
 
-<div class="blockIndicator note">
-<p><strong>Note:</strong> La prise en charge de <code>Window.find()</code> pourrait changer dans les futures versions de Gecko. Voir {{Bug("672395")}}.</p>
-</div>
+> **Note :** La prise en charge de `Window.find()` pourrait changer dans les futures versions de Gecko. Voir {{Bug("672395")}}.
 
-<p>La méthode <code><strong>Window.find()</strong></code> trouve une chaîne dans une fenêtre.</p>
+La méthode **`Window.find()`** trouve une chaîne dans une fenêtre.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>window</em>.find(<em>aString</em>, <em>aCaseSensitive</em>, <em>aBackwards</em>, <em>aWrapAround</em>,
-            <em>aWholeWord</em>, <em>aSearchInFrames</em>, <em>aShowDialog</em>);</pre>
+    window.find(aString, aCaseSensitive, aBackwards, aWrapAround,
+                aWholeWord, aSearchInFrames, aShowDialog);
 
-<dl>
- <dt><code>aString</code></dt>
- <dd>La chaîne de caractère à rechercher.</dd>
- <dt><code>aCaseSensitive</code></dt>
- <dd>{{jsxref("Boolean")}}. Si <code>true</code>, spécifie une recherche sensible à la casse.</dd>
- <dt><code>aBackwards</code></dt>
- <dd>{{jsxref("Boolean")}}. Si <code>true</code>, spécifie une recherche vers l'arrière.</dd>
- <dt><code>aWrapAround</code></dt>
- <dd>{{jsxref("Boolean")}}. Si <code>true</code>, spécifie une recherche enveloppante.</dd>
- <dt><code>aWholeWord</code> {{Unimplemented_Inline}}</dt>
- <dd>{{jsxref("Boolean")}}. Si <code>true</code>, spécifie une recherche de mot entier. Ceci n'est pas implémenté; voir {{bug(481513)}}.</dd>
- <dt><code>aSearchInFrames</code></dt>
- <dd>{{jsxref("Boolean")}}. Si <code>true</code>, spécifie une recherche dans les cadres.</dd>
-</dl>
+- `aString`
+  - : La chaîne de caractère à rechercher.
+- `aCaseSensitive`
+  - : {{jsxref("Boolean")}}. Si `true`, spécifie une recherche sensible à la casse.
+- `aBackwards`
+  - : {{jsxref("Boolean")}}. Si `true`, spécifie une recherche vers l'arrière.
+- `aWrapAround`
+  - : {{jsxref("Boolean")}}. Si `true`, spécifie une recherche enveloppante.
+- `aWholeWord` {{Unimplemented_Inline}}
+  - : {{jsxref("Boolean")}}. Si `true`, spécifie une recherche de mot entier. Ceci n'est pas implémenté; voir {{bug(481513)}}.
+- `aSearchInFrames`
+  - : {{jsxref("Boolean")}}. Si `true`, spécifie une recherche dans les cadres.
 
-<h3 id="Retourne">Retourne</h3>
+### Retourne
 
-<p><code>true</code> si la chaîne est trouvé; autrement, <code>false</code>.</p>
+`true` si la chaîne est trouvé; autrement, `false`.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<h3 id="JavaScript">JavaScript</h3>
+### JavaScript
 
-<pre class="brush: js">findString = function findText(text) {
+```js
+findString = function findText(text) {
   alert("String \x22" + text + "\x22 found? " + window.find(text));
-}</pre>
+}
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;Apples, Bananas, and Oranges.&lt;/p&gt;
-&lt;button type="button" onClick='findString("Apples")'&gt;Search for Apples&lt;/button&gt;
-&lt;button type="button" onClick='findString("Banana")'&gt;Search for Banana&lt;/button&gt;
-&lt;button type="button" onClick='findString("Orange")'&gt;Search for Orange&lt;/button&gt;
-</pre>
+```html
+<p>Apples, Bananas, and Oranges.</p>
+<button type="button" onClick='findString("Apples")'>Search for Apples</button>
+<button type="button" onClick='findString("Banana")'>Search for Banana</button>
+<button type="button" onClick='findString("Orange")'>Search for Orange</button>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Example")}}</p>
+{{EmbedLiveSample("Example")}}
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p>Dans certains navigateurs, <code>Window.find()</code> sélectionne (met en évidence) le contenu trouvé sur le site.</p>
+Dans certains navigateurs, `Window.find()` sélectionne (met en évidence) le contenu trouvé sur le site.
 
-<h2 id="Spécification">Spécification</h2>
+## Spécification
 
-<p>Cela ne fait partie d'aucune spécification.</p>
+Cela ne fait partie d'aucune spécification.
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>Cette méthode fonctionne dans de nombreux navigateurs modernes, notamment Firefox, Chrome, et Safari.</p>
+Cette méthode fonctionne dans de nombreux navigateurs modernes, notamment Firefox, Chrome, et Safari.
diff --git a/files/fr/web/api/window/focus/index.md b/files/fr/web/api/window/focus/index.md
index 02c25eb163..708c13bd59 100644
--- a/files/fr/web/api/window/focus/index.md
+++ b/files/fr/web/api/window/focus/index.md
@@ -3,35 +3,22 @@ title: Window.focus()
 slug: Web/API/Window/focus
 translation_of: Web/API/Window/focus
 ---
-<p>{{APIRef}}</p>
+{{APIRef}}
 
-<h2 id="Résumé">Résumé</h2>
+## Résumé
 
-<p>Demande la mise au premier plan de la fenêtre. Cet appel peut échouer en fonction des réglages utilisateurs, et ne garantit pas que la fenêtre sera au-dessus des autres au retour de cette méthode.</p>
+Demande la mise au premier plan de la fenêtre. Cet appel peut échouer en fonction des réglages utilisateurs, et ne garantit pas que la fenêtre sera au-dessus des autres au retour de cette méthode.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="eval">window.focus()
-</pre>
+    window.focus()
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="eval">if (clicked) { window.focus(); }
-</pre>
+    if (clicked) { window.focus(); }
 
-<h2 id="Specification">Spécification</h2>
+## Spécification
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG','interaction.html#dom-window-focus','Window.focus()')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
\ No newline at end of file
+| Specification                                                                                                | Status                           | Comment |
+| ------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------- |
+| {{SpecName('HTML WHATWG','interaction.html#dom-window-focus','Window.focus()')}} | {{Spec2('HTML WHATWG')}} |         |
diff --git a/files/fr/web/api/window/frameelement/index.md b/files/fr/web/api/window/frameelement/index.md
index 4a36ff3fd6..393e2459ed 100644
--- a/files/fr/web/api/window/frameelement/index.md
+++ b/files/fr/web/api/window/frameelement/index.md
@@ -9,58 +9,41 @@ tags:
   - Window
 translation_of: Web/API/Window/frameElement
 ---
-<div>{{ApiRef}}</div>
+{{ApiRef}}
 
-<p>La propriété <code><strong>Window.frameElement</strong></code> renvoie l'élément (tel que {{HTMLElement("iframe")}} ou {{HTMLElement("object")}}) dans lequel la fenêtre est intégrée.</p>
+La propriété **`Window.frameElement`** renvoie l'élément (tel que {{HTMLElement("iframe")}} ou {{HTMLElement("object")}}) dans lequel la fenêtre est intégrée.
 
-<div class="note">
-<p><strong>Note:</strong> Malgré le nom de cette propriété, elle fonctionne pour les documents intégrés dans n'importe quel point d'incorporation, y compris {{HTMLElement("object")}}, {{HTMLElement("iframe")}}, ou {{HTMLElement("embed")}}.</p>
-</div>
+> **Note :** Malgré le nom de cette propriété, elle fonctionne pour les documents intégrés dans n'importe quel point d'incorporation, y compris {{HTMLElement("object")}}, {{HTMLElement("iframe")}}, ou {{HTMLElement("embed")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">const <em>frameEl</em> = window.frameElement
-</pre>
+    const frameEl = window.frameElement
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>L'élément dans lequel la fenêtre est intégrée. Si la fenêtre n'est pas intégrée dans un autre document, ou si le document dans lequel elle est intégrée a un {{glossary("origin")}}, la valeur est {{jsxref("null")}} à la place.</p>
+L'élément dans lequel la fenêtre est intégrée. Si la fenêtre n'est pas intégrée dans un autre document, ou si le document dans lequel elle est intégrée a un {{glossary("origin")}}, la valeur est {{jsxref("null")}} à la place.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush:js">const frameEl = window.frameElement;
+```js
+const frameEl = window.frameElement;
 // Si nous sommes incorporés, modifiez l'URL de l'élément contenant en 'http://mozilla.org/'
 if (frameEl) {
   frameEl.src = 'http://mozilla.org/';
 }
-</pre>
+```
 
-<h2 id="Spécifications">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('HTML WHATWG', 'browsers.html#dom-frameelement', 'Window.frameElement')}}</td>
-   <td>{{ Spec2('WebRTC 1.0') }}</td>
-   <td>Spécification initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                    | Statut                           | Commentaire             |
+| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------- |
+| {{SpecName('HTML WHATWG', 'browsers.html#dom-frameelement', 'Window.frameElement')}} | {{ Spec2('WebRTC 1.0') }} | Spécification initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Window.frameElement")}}</p>
+{{Compat("api.Window.frameElement")}}
 
-<h2 id="Voir_également">Voir également</h2>
+## Voir également
 
-<ul>
- <li>{{domxref("window.frames")}} renvoie un objet de type tableau, listant les sous-cadres directs de la fenêtre courante.</li>
- <li>{{domxref("window.parent")}} renvoie la fenêtre parente, qui est la fenêtre contenant le <code>frameElement</code> de la fenêtre enfant.</li>
-</ul>
+- {{domxref("window.frames")}} renvoie un objet de type tableau, listant les sous-cadres directs de la fenêtre courante.
+- {{domxref("window.parent")}} renvoie la fenêtre parente, qui est la fenêtre contenant le `frameElement` de la fenêtre enfant.
diff --git a/files/fr/web/api/window/frames/index.md b/files/fr/web/api/window/frames/index.md
index 9a1c20a92f..d9e60bcb8c 100644
--- a/files/fr/web/api/window/frames/index.md
+++ b/files/fr/web/api/window/frames/index.md
@@ -13,31 +13,29 @@ tags:
   - Reference
 translation_of: Web/API/Window/frames
 ---
-<p>{{ApiRef("Window")}}</p>
+{{ApiRef("Window")}}
 
-<p>Renvoie la fenêtre elle-même, qui est semblable à un objet de type Array, listant les frames présentes dans la fenêtre courante.</p>
+Renvoie la fenêtre elle-même, qui est semblable à un objet de type Array, listant les frames présentes dans la fenêtre courante.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="eval"><em>frameList</em> = window.frames;
-</pre>
+    frameList = window.frames;
 
-<ul>
- <li><code>frameList</code> est une liste d'objets frame, semblable à un tableau grâce à la propriété <code>length</code> . Ses éléments sont accessibles en utilisant la notation  <code>{{ mediawiki.external('i') }}</code>.</li>
- <li><code>frameList === window</code> est évalué à <code>true</code>.</li>
- <li>Chaque élément de <code>window.frames</code> est un pseudo tableau représentant l'objet <a href="/en/DOM/window">window</a> correspondant au contenu de la  <a href="/en/HTML/Element/frame">&lt;frame&gt;</a> ou <a href="/en/HTML/Element/iframe">&lt;iframe&gt;</a> , et non au DOM element (i)frame (ex., <code>window.frames[ 0 ]</code> équivaut à <code>document.getElementsByTagName( "iframe" )[ 0 ].contentWindow</code>).</li>
- <li>pour plus de détails sur la valeur retournée, se référer au <a href="http://groups.google.com/group/mozilla.dev.platform/browse_thread/thread/5628c6f346859d4f/169aa7004565066?hl=en&amp;ie=UTF-8&amp;oe=utf-8&amp;q=window.frames&amp;pli=1">fil de discussion sur mozilla.dev.platform</a>.</li>
-</ul>
+- `frameList` est une liste d'objets frame, semblable à un tableau grâce à la propriété `length` . Ses éléments sont accessibles en utilisant la notation  `{{ mediawiki.external('i') }}`.
+- `frameList === window` est évalué à `true`.
+- Chaque élément de `window.frames` est un pseudo tableau représentant l'objet [window](/en/DOM/window) correspondant au contenu de la  [\<frame>](/en/HTML/Element/frame) ou [\<iframe>](/en/HTML/Element/iframe) , et non au DOM element (i)frame (ex., `window.frames[ 0 ]` équivaut à `document.getElementsByTagName( "iframe" )[ 0 ].contentWindow`).
+- pour plus de détails sur la valeur retournée, se référer au [fil de discussion sur mozilla.dev.platform](http://groups.google.com/group/mozilla.dev.platform/browse_thread/thread/5628c6f346859d4f/169aa7004565066?hl=en&ie=UTF-8&oe=utf-8&q=window.frames&pli=1).
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">var frames = window.frames; // ou // var frames = window.parent.frames;
-for (var i = 0; i &lt; frames.length; i++) {
+```js
+var frames = window.frames; // ou // var frames = window.parent.frames;
+for (var i = 0; i < frames.length; i++) {
   // faire quelque chose avec chaque subframe en tant que frames[i]
   frames[i].document.body.style.background = "red";
 }
-</pre>
+```
 
-<h2 id="Specification">Spécifications</h2>
+## Spécifications
 
-<p>{{SpecName('HTML WHATWG','browsers.html#dom-frames','Window.frames')}}</p>
\ No newline at end of file
+{{SpecName('HTML WHATWG','browsers.html#dom-frames','Window.frames')}}
diff --git a/files/fr/web/api/window/fullscreen/index.md b/files/fr/web/api/window/fullscreen/index.md
index dbd330f4f5..e46e50b9ec 100644
--- a/files/fr/web/api/window/fullscreen/index.md
+++ b/files/fr/web/api/window/fullscreen/index.md
@@ -7,26 +7,34 @@ tags:
   - Référence_du_DOM_Gecko
 translation_of: Web/API/Window/fullScreen
 ---
-<p>{{ ApiRef() }}</p>
-<h3 id="R.C3.A9sum.C3.A9">Résumé</h3>
-<p>Cette propriété indique si la fenêtre est affichée en mode plein écran ou non. Elle n'est fiable qu'à partir de Gecko 1.9 (Firefox 3), voir les Notes plus bas.</p>
-<h3 id="Syntaxe">Syntaxe</h3>
-<pre class="eval">var <var>isInFullScreen</var> = <var>windowRef</var>.fullScreen;
-</pre>
-<p>Avec les privilèges chrome, la propriété est modifiable ; autrement elle est en lecture seule. Souvenez-vous que si vous essayez de définir cette propriété sans les privilèges chrome, aucune exception ne sera déclenchée et l'appel échouera juste silencieusement. Cela permet d'empêcher que des scripts conçus pour utiliser cette propriété dans Internet Explorer cessent de fonctionner.</p>
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
-<dl>
- <dt>
-  <code>isInFullScreen</code></dt>
- <dd>
-  Une valeur booléenne. Signification des valeurs :</dd>
-</dl>
-<ul>
- <li><code>true</code> : La fenêtre est en mode plein écran.</li>
- <li><code>false</code> : La fenêtre n'est pas en mode plein écran.</li>
-</ul>
-<h3 id="Exemples">Exemples</h3>
-<h3 id="Sp.C3.A9cification">Spécification</h3>
-<p>{{ DOM0() }}</p>
-<h3 id="Notes">Notes</h3>
-<p>Cette propriété n'est fiable qu'à partir de Mozilla 1.9 (Firefox 3). Mozilla 1.8 et les versions antérieures disposent de cette propriété, mais elle renvoie toujours <code>false</code>, même quand la fenêtre est en mode plein écran ({{ Bug(127013) }}).</p>
\ No newline at end of file
+{{ ApiRef() }}
+
+### Résumé
+
+Cette propriété indique si la fenêtre est affichée en mode plein écran ou non. Elle n'est fiable qu'à partir de Gecko 1.9 (Firefox 3), voir les Notes plus bas.
+
+### Syntaxe
+
+    var isInFullScreen = windowRef.fullScreen;
+
+Avec les privilèges chrome, la propriété est modifiable ; autrement elle est en lecture seule. Souvenez-vous que si vous essayez de définir cette propriété sans les privilèges chrome, aucune exception ne sera déclenchée et l'appel échouera juste silencieusement. Cela permet d'empêcher que des scripts conçus pour utiliser cette propriété dans Internet Explorer cessent de fonctionner.
+
+### Valeur de retour
+
+- `isInFullScreen`
+  - : Une valeur booléenne. Signification des valeurs :
+
+<!---->
+
+- `true` : La fenêtre est en mode plein écran.
+- `false` : La fenêtre n'est pas en mode plein écran.
+
+### Exemples
+
+### Spécification
+
+{{ DOM0() }}
+
+### Notes
+
+Cette propriété n'est fiable qu'à partir de Mozilla 1.9 (Firefox 3). Mozilla 1.8 et les versions antérieures disposent de cette propriété, mais elle renvoie toujours `false`, même quand la fenêtre est en mode plein écran ({{ Bug(127013) }}).
diff --git a/files/fr/web/api/window/gamepadconnected_event/index.md b/files/fr/web/api/window/gamepadconnected_event/index.md
index 4452ac1892..f4eaef2e5b 100644
--- a/files/fr/web/api/window/gamepadconnected_event/index.md
+++ b/files/fr/web/api/window/gamepadconnected_event/index.md
@@ -3,84 +3,51 @@ title: gamepadconnected
 slug: Web/API/Window/gamepadconnected_event
 translation_of: Web/API/Window/gamepadconnected_event
 ---
-<p>L'événement gamepadconnected est déclenché lorsque le navigateur détecte quand une manette a été connecté ou qu'un button/axe de la manette a été utilisé pour la première fois.<br>
-  </p>
+L'événement gamepadconnected est déclenché lorsque le navigateur détecte quand une manette a été connecté ou qu'un button/axe de la manette a été utilisé pour la première fois.
 
-<h2 id="Informations_générales">Informations générales</h2>
 
-<dl>
- <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
- <dd style="margin: 0 0 0 120px;"><a href="http://www.w3.org/TR/gamepad/#the-gamepadconnected-event">Gamepad</a></dd>
- <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
- <dd style="margin: 0 0 0 120px;">Event</dd>
- <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
- <dd style="margin: 0 0 0 120px;">Non</dd>
- <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
- <dd style="margin: 0 0 0 120px;">Non</dd>
- <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
- <dd style="margin: 0 0 0 120px;">DefaultView (<code>&lt;window&gt;</code>)</dd>
- <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
- <dd style="margin: 0 0 0 120px;">Aucune</dd>
-</dl>
 
-<h2 id="Propriétés">Propriétés</h2>
+## Informations générales
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Property</th>
-   <th scope="col">Type</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>target</code> {{readonlyInline}}</td>
-   <td>{{domxref("EventTarget")}}</td>
-   <td>The event target (the topmost target in the DOM tree).</td>
-  </tr>
-  <tr>
-   <td><code>type</code> {{readonlyInline}}</td>
-   <td>{{domxref("DOMString")}}</td>
-   <td>The type of event.</td>
-  </tr>
-  <tr>
-   <td><code>bubbles</code> {{readonlyInline}}</td>
-   <td>{{jsxref("Boolean")}}</td>
-   <td>Whether the event normally bubbles or not.</td>
-  </tr>
-  <tr>
-   <td><code>cancelable</code> {{readonlyInline}}</td>
-   <td>{{jsxref("Boolean")}}</td>
-   <td>Whether the event is cancellable or not.</td>
-  </tr>
-  <tr>
-   <td><code>gamepad</code> {{readonlyInline}}</td>
-   <td>{{domxref("Gamepad")}}</td>
-   <td>The single gamepad attribute provides access to the associated gamepad data for this event.</td>
-  </tr>
- </tbody>
-</table>
+- Spécification
+  - : [Gamepad](http://www.w3.org/TR/gamepad/#the-gamepadconnected-event)
+- Interface
+  - : Event
+- Propagation
+  - : Non
+- Annulable
+  - : Non
+- Cible
+  - : DefaultView (`<window>`)
+- Action par défaut
+  - : Aucune
 
-<h2 id="Exemple">Exemple</h2>
+## Propriétés
 
-<pre class="brush:js;">// Noter que l'API a toujours des préfixes vendeur dans les navigateurs l'implémentant
+| Property                              | Type                                 | Description                                                                                 |
+| ------------------------------------- | ------------------------------------ | ------------------------------------------------------------------------------------------- |
+| `target` {{readonlyInline}}     | {{domxref("EventTarget")}} | The event target (the topmost target in the DOM tree).                                      |
+| `type` {{readonlyInline}}       | {{domxref("DOMString")}}     | The type of event.                                                                          |
+| `bubbles` {{readonlyInline}}    | {{jsxref("Boolean")}}         | Whether the event normally bubbles or not.                                                  |
+| `cancelable` {{readonlyInline}} | {{jsxref("Boolean")}}         | Whether the event is cancellable or not.                                                    |
+| `gamepad` {{readonlyInline}}    | {{domxref("Gamepad")}}         | The single gamepad attribute provides access to the associated gamepad data for this event. |
+
+## Exemple
+
+```js
+// Noter que l'API a toujours des préfixes vendeur dans les navigateurs l'implémentant
 window.addEventListener("gamepadconnected", function( event ) {
 
     // Toutes la valeurs d'axes et les buttons sont accessibles à travers:
     event.gamepad;
 
 });
-</pre>
+```
 
-<h2 id="Evénements_liés">Evénements liés</h2>
+## Evénements liés
 
-<ul>
- <li><a href="/en-US/docs/Web/Reference/Events/gamepaddisconnected">gamepaddisconnected</a></li>
-</ul>
+- [gamepaddisconnected](/en-US/docs/Web/Reference/Events/gamepaddisconnected)
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/API/Gamepad/Using_Gamepad_API">Utilisation de l'API Gamepad</a></li>
-</ul>
+- [Utilisation de l'API Gamepad](/fr/docs/API/Gamepad/Using_Gamepad_API)
diff --git a/files/fr/web/api/window/gamepaddisconnected_event/index.md b/files/fr/web/api/window/gamepaddisconnected_event/index.md
index e4c36c1ece..08c091cfe9 100644
--- a/files/fr/web/api/window/gamepaddisconnected_event/index.md
+++ b/files/fr/web/api/window/gamepaddisconnected_event/index.md
@@ -3,72 +3,37 @@ title: gamepaddisconnected
 slug: Web/API/Window/gamepaddisconnected_event
 translation_of: Web/API/Window/gamepaddisconnected_event
 ---
-<p>L'événement <code>gamepaddisconnected</code> est déclenché lorsque le navigateur détecte le fait qu'une manette ait été débranchée.</p>
+L'événement `gamepaddisconnected` est déclenché lorsque le navigateur détecte le fait qu'une manette ait été débranchée.
 
-<h2 id="Informations_générales">Informations générales</h2>
+## Informations générales
 
-<dl>
- <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
- <dd style="margin: 0 0 0 120px;"><a href="http://www.w3.org/TR/gamepad/#the-gamepaddisconnected-event">Gamepad</a></dd>
- <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
- <dd style="margin: 0 0 0 120px;">{{domxref("Event")}}</dd>
- <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
- <dd style="margin: 0 0 0 120px;">Non</dd>
- <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
- <dd style="margin: 0 0 0 120px;">Non</dd>
- <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
- <dd style="margin: 0 0 0 120px;">DefaultView (<code>&lt;window&gt;</code>)</dd>
- <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
- <dd style="margin: 0 0 0 120px;">Aucune</dd>
-</dl>
+- Spécification
+  - : [Gamepad](http://www.w3.org/TR/gamepad/#the-gamepaddisconnected-event)
+- Interface
+  - : {{domxref("Event")}}
+- Propagation
+  - : Non
+- Annulable
+  - : Non
+- Cible
+  - : DefaultView (`<window>`)
+- Action par défaut
+  - : Aucune
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Property</th>
-   <th scope="col">Type</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>target</code> {{readonlyInline}}</td>
-   <td>{{domxref("EventTarget")}}</td>
-   <td>The event target (the topmost target in the DOM tree).</td>
-  </tr>
-  <tr>
-   <td><code>type</code> {{readonlyInline}}</td>
-   <td>{{domxref("DOMString")}}</td>
-   <td>The type of event.</td>
-  </tr>
-  <tr>
-   <td><code>bubbles</code> {{readonlyInline}}</td>
-   <td>{{jsxref("Boolean")}}</td>
-   <td>Whether the event normally bubbles or not.</td>
-  </tr>
-  <tr>
-   <td><code>cancelable</code> {{readonlyInline}}</td>
-   <td>{{jsxref("Boolean")}}</td>
-   <td>Whether the event is cancellable or not.</td>
-  </tr>
-  <tr>
-   <td><code>gamepad</code> {{readonlyInline}}</td>
-   <td>{{domxref("Gamepad")}}</td>
-   <td>The single gamepad attribute provides access to the associated gamepad data for this event.</td>
-  </tr>
- </tbody>
-</table>
+| Property                              | Type                                 | Description                                                                                 |
+| ------------------------------------- | ------------------------------------ | ------------------------------------------------------------------------------------------- |
+| `target` {{readonlyInline}}     | {{domxref("EventTarget")}} | The event target (the topmost target in the DOM tree).                                      |
+| `type` {{readonlyInline}}       | {{domxref("DOMString")}}     | The type of event.                                                                          |
+| `bubbles` {{readonlyInline}}    | {{jsxref("Boolean")}}         | Whether the event normally bubbles or not.                                                  |
+| `cancelable` {{readonlyInline}} | {{jsxref("Boolean")}}         | Whether the event is cancellable or not.                                                    |
+| `gamepad` {{readonlyInline}}    | {{domxref("Gamepad")}}         | The single gamepad attribute provides access to the associated gamepad data for this event. |
 
-<h2 id="Evénements_liés">Evénements liés</h2>
+## Evénements liés
 
-<ul>
- <li><a href="/fr/docs/Web/Reference/Events/gamepadconnected">gamepadconnected</a></li>
-</ul>
+- [gamepadconnected](/fr/docs/Web/Reference/Events/gamepadconnected)
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/API/Gamepad/Using_Gamepad_API">Utilisation de l'API Gamepad</a></li>
-</ul>
+- [Utilisation de l'API Gamepad](/fr/docs/API/Gamepad/Using_Gamepad_API)
diff --git a/files/fr/web/api/window/getcomputedstyle/index.md b/files/fr/web/api/window/getcomputedstyle/index.md
index 2c4294f100..c5f3694105 100644
--- a/files/fr/web/api/window/getcomputedstyle/index.md
+++ b/files/fr/web/api/window/getcomputedstyle/index.md
@@ -3,61 +3,60 @@ title: window.getComputedStyle
 slug: Web/API/Window/getComputedStyle
 translation_of: Web/API/Window/getComputedStyle
 ---
-<p>{{ ApiRef() }}</p>
+{{ ApiRef() }}
 
-<h2 id="Résumé">Résumé</h2>
+## Résumé
 
-<p><code>La méthode window.getComputedStyle() </code>donne la  <a href="/en/CSS/used_value">valeur calculée finale</a> de toutes les propriétés CSS sur un élément.</p>
+`La méthode window.getComputedStyle() `donne la  [valeur calculée finale](/en/CSS/used_value) de toutes les propriétés CSS sur un élément.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="eval">var <em>style</em> = window.getComputedStyle(<em>element</em>[, <em>pseudoElt</em>]);</pre>
+    var style = window.getComputedStyle(element[, pseudoElt]);
 
-<dl>
- <dt>element</dt>
- <dd>L’{{ domxref("Element") }} pour lequel vous voulez obtenir une valeur calculée.</dd>
- <dt>pseudoElt {{ optional_inline() }}</dt>
- <dd>Chaîne de caractère spécifiant le pseudo-élément à cibler. Doit être <code>null</code> (ou non spécifiée) pour les éléments communs.</dd>
-</dl>
+- element
+  - : L’{{ domxref("Element") }} pour lequel vous voulez obtenir une valeur calculée.
+- pseudoElt {{ optional_inline() }}
+  - : Chaîne de caractère spécifiant le pseudo-élément à cibler. Doit être `null` (ou non spécifiée) pour les éléments communs.
 
-<div class="note">
-  <p><strong>Note :</strong> Avant Gecko 2.0 {{ geckoRelease("2.0") }}, le paramètre <code>pseudoElt</code> était obligatoire. Aucun autre navigateur majeur ne requiert que ce paramètre soit renseigné si il est null. Gecko a été modifié pour se comporter comme les autres navigateurs.</p>
-</div>
+> **Note :** Avant Gecko 2.0 {{ geckoRelease("2.0") }}, le paramètre `pseudoElt` était obligatoire. Aucun autre navigateur majeur ne requiert que ce paramètre soit renseigné si il est null. Gecko a été modifié pour se comporter comme les autres navigateurs.
 
-<p>La valeur de retour <code>style</code> est un objet <a href="/en/DOM/CSSStyleDeclaration"><code>CSSStyleDeclaration</code></a>.</p>
+La valeur de retour `style` est un objet [`CSSStyleDeclaration`](/en/DOM/CSSStyleDeclaration).
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">var elem1 = document.getElementById("elemId");
+```js
+var elem1 = document.getElementById("elemId");
 var style = window.getComputedStyle(elem1, null);
 
 // Ce qui équivaut à :
 // var style = document.defaultView.getComputedStyle(elem1, null);
-</pre>
+```
 
-<pre class="brush: html">&lt;style&gt;
+```html
+<style>
  #elem-container{
    position: absolute;
    left:     100px;
    top:      200px;
    height:   100px;
  }
-&lt;/style&gt;
+</style>
 
-&lt;div id="elem-container"&gt;dummy&lt;/div&gt;
-&lt;div id="output"&gt;&lt;/div&gt;
+<div id="elem-container">dummy</div>
+<div id="output"></div>
 
-&lt;script&gt;
+<script>
   function getTheStyle(){
     var elem = document.getElementById("elem-container");
     var theCSSprop = window.getComputedStyle(elem,null).getPropertyValue("height");
     document.getElementById("output").innerHTML = theCSSprop;
    }
   getTheStyle();
-&lt;/script&gt;
-</pre>
+</script>
+```
 
-<pre class="brush: js">function dumpComputedStyles(elem,prop) {
+```js
+function dumpComputedStyles(elem,prop) {
 
   var cs = window.getComputedStyle(elem,null);
   if (prop) {
@@ -65,52 +64,34 @@ var style = window.getComputedStyle(elem1, null);
     return;
   }
   var len = cs.length;
-  for (var i=0;i&lt;len;i++) {
+  for (var i=0;i<len;i++) {
 
     var style = cs[i];
     console.log(style+" : "+cs.getPropertyValue(style));
   }
 
-}</pre>
-
-<h2 id="Description">Description</h2>
-
-<p>L'objet retourné est du même type que celui de la propriété {{domxref("HTMLElement.style", "style")}} de l'élément ciblé. Toutefois les deux objets ont des buts distincts. L'objet retourné par la méthode <code>getComputedStyle</code> est en lecture seule et peut être utilisée pour inspecter le style de l'élément y compris ceux ajoutés via un élément <code>&lt;style&gt;</code> ou une feuille de style externe. L'objet <code>elt.style</code> doit quant à lui être utilisé pour mettre à jour une propriété de style sur un élément donné.</p>
-
-<p>Le premier argument doit être un Element, sinon, si par exemple un #text Node est utilisé, une exception sera lancée. Depuis la version 1.9.2 de Gecko {{geckoRelease("1.9.2")}}, les URLs renvoyées ont désormais des guillemets autour de celles-ci: <code>url("http://foo.com/bar.jpg")</code>.</p>
-
-<h2 id="Specification">Spécification</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("CSSOM", "#dom-window-getcomputedstyle", "getComputedStyle()")}}</td>
-      <td>{{Spec2("CSSOM")}}</td>
-      <td></td>
-    </tr>
-    <tr>
-      <td>{{SpecName("DOM2 Style", "#CSS-CSSview-getComputedStyle",
-        "getComputedStyle()")}}</td>
-      <td>{{Spec2("DOM2 Style")}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Window.getComputedStyle")}}</p>
-
-<h2 id="See_also">Voir aussi</h2>
-
-<ul>
-  <li>{{domxref("window.getDefaultComputedStyle")}}</li>
-  <li>{{cssxref("resolved_value", "Valeur résolue")}}</li>
-</ul>
+}
+```
+
+## Description
+
+L'objet retourné est du même type que celui de la propriété {{domxref("HTMLElement.style", "style")}} de l'élément ciblé. Toutefois les deux objets ont des buts distincts. L'objet retourné par la méthode `getComputedStyle` est en lecture seule et peut être utilisée pour inspecter le style de l'élément y compris ceux ajoutés via un élément `<style>` ou une feuille de style externe. L'objet `elt.style` doit quant à lui être utilisé pour mettre à jour une propriété de style sur un élément donné.
+
+Le premier argument doit être un Element, sinon, si par exemple un #text Node est utilisé, une exception sera lancée. Depuis la version 1.9.2 de Gecko {{geckoRelease("1.9.2")}}, les URLs renvoyées ont désormais des guillemets autour de celles-ci: `url("http://foo.com/bar.jpg")`.
+
+## Spécification
+
+| Spécification                                                                                                            | Statut                           | Commentaire          |
+| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName("CSSOM", "#dom-window-getcomputedstyle", "getComputedStyle()")}}                     | {{Spec2("CSSOM")}}         |                      |
+| {{SpecName("DOM2 Style", "#CSS-CSSview-getComputedStyle",
+        "getComputedStyle()")}} | {{Spec2("DOM2 Style")}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Window.getComputedStyle")}}
+
+## Voir aussi
+
+- {{domxref("window.getDefaultComputedStyle")}}
+- {{cssxref("resolved_value", "Valeur résolue")}}
diff --git a/files/fr/web/api/window/getdefaultcomputedstyle/index.md b/files/fr/web/api/window/getdefaultcomputedstyle/index.md
index 7c2363a4e4..f7769ecc86 100644
--- a/files/fr/web/api/window/getdefaultcomputedstyle/index.md
+++ b/files/fr/web/api/window/getdefaultcomputedstyle/index.md
@@ -8,80 +8,81 @@ tags:
   - Reference
 translation_of: Web/API/window/getDefaultComputedStyle
 ---
-<div>{{APIRef("CSSOM")}}{{Non-standard_header}}</div>
+{{APIRef("CSSOM")}}{{Non-standard_header}}
 
-<p><code>getDefaultComputedStyle()</code> fournit les valeurs calculées par défaut de toutes les propriétés CSS d'un élément, en ignorant la mise en forme de l'auteur. C'est-à-dire que seules les mises en forme de l'agent utilisateur et de l'utilisateur sont pris en compte.</p>
+`getDefaultComputedStyle()` fournit les valeurs calculées par défaut de toutes les propriétés CSS d'un élément, en ignorant la mise en forme de l'auteur. C'est-à-dire que seules les mises en forme de l'agent utilisateur et de l'utilisateur sont pris en compte.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var <em>miseEnForme</em> = window.getDefaultComputedStyle(<em>element</em>[, <em>pseudoElt</em>]);
-</pre>
+    var miseEnForme = window.getDefaultComputedStyle(element[, pseudoElt]);
 
-<dl>
- <dt>element</dt>
- <dd>L'{{domxref("Element")}} dont on veut obtenir la mise en forme calculée.</dd>
- <dt>pseudoElt {{optional_inline}}</dt>
- <dd>Une chaîne indiquant le pseudo-élément à rechercher. Doit être <code>null</code> (ou non indiqué) pour les éléments ordinaires.</dd>
-</dl>
+- element
+  - : L'{{domxref("Element")}} dont on veut obtenir la mise en forme calculée.
+- pseudoElt {{optional_inline}}
+  - : Une chaîne indiquant le pseudo-élément à rechercher. Doit être `null` (ou non indiqué) pour les éléments ordinaires.
 
-<p>Le <code>style</code> retourné est un objet <a href="/fr-FR/docs/Web/API/CSSStyleDeclaration"><code>CSSStyleDeclaration</code></a>.</p>
+Le `style` retourné est un objet [`CSSStyleDeclaration`](/fr-FR/docs/Web/API/CSSStyleDeclaration).
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: js">var elem1 = document.getElementById("IdElem");
+```js
+var elem1 = document.getElementById("IdElem");
 var miseEnForme = window.getDefaultComputedStyle(elem1);
-</pre>
+```
 
-<pre class="brush: html">&lt;style&gt;
+```html
+<style>
 #conteneur-elem {
    position: absolute;
    left:     100px;
    top:      200px;
    height:   100px;
  }
-&lt;/style&gt;
+</style>
 
-&lt;div id="conteneur-elem"&gt;factice&lt;/div&gt;
-&lt;div id="sortie"&gt;&lt;/div&gt;
+<div id="conteneur-elem">factice</div>
+<div id="sortie"></div>
 
-&lt;script&gt;
+<script>
     var elem = document.getElementById("conteneur-elem");
     var laPropCSS = window.getDefaultComputedStyle(elem).position;
     document.getElementById("sortie").innerHTML = laPropCSS; // affichera "static"
-&lt;/script&gt;   </pre>
+</script>
+```
 
-<h2 id="Description">Description</h2>
+## Description
 
-<p>L'objet retourné est du même type que l'objet retourné par <code>getComputedStyle</code>, mais il ne prend en compte que les règles user-agent et user.</p>
+L'objet retourné est du même type que l'objet retourné par `getComputedStyle`, mais il ne prend en compte que les règles user-agent et user.
 
-<h2 id="Utilisation_avec_des_pseudo-éléments">Utilisation avec des pseudo-éléments</h2>
+## Utilisation avec des pseudo-éléments
 
-<p><code>getDefaultComputedStyle</code> peut extraire des informations de mise en forme à partir de pseudo-éléments (par exemple, ::after, ::before).</p>
+`getDefaultComputedStyle` peut extraire des informations de mise en forme à partir de pseudo-éléments (par exemple, ::after, ::before).
 
-<pre class="brush: html">&lt;style&gt;
+```html
+<style>
  h3:after {
    content: ' déchire !';
  }
-&lt;/style&gt;
+</style>
 
-&lt;h3&gt;contenu généré&lt;/h3&gt;
+<h3>contenu généré</h3>
 
-&lt;script&gt;
+<script>
   var h3       = document.querySelector('h3'),
       resultat = getDefaultComputedStyle(h3, ':after').content;
 
   console.log('le contenu généré est : ', resultat); // retourne 'none'
-&lt;/script&gt;
-</pre>
+</script>
+```
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p>La valeur retournée est, dans certains cas connus, expressément incorrecte par intention délibérée. En particulier, pour éviter le problème de sécurité appelé CSS History Leak, les navigateurs peuvent "mentir" sur la valeur utilisée pour un lien et toujours retourner des valeurs comme si l'utilisateur n'avait jamais visité le site concerné, et/ou limiter les styles qui peuvent être appliqués via l'utilisation du pseudo-sélecteur <code>:visited</code>. Voir <a href="http://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/">http://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/</a> et <a href="http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/">http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-visited/</a> pour le détail des exemples de la manière dont cela est implémenté.</p>
+La valeur retournée est, dans certains cas connus, expressément incorrecte par intention délibérée. En particulier, pour éviter le problème de sécurité appelé CSS History Leak, les navigateurs peuvent "mentir" sur la valeur utilisée pour un lien et toujours retourner des valeurs comme si l'utilisateur n'avait jamais visité le site concerné, et/ou limiter les styles qui peuvent être appliqués via l'utilisation du pseudo-sélecteur `:visited`. Voir <http://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/> et [http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-visited/](http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/) pour le détail des exemples de la manière dont cela est implémenté.
 
-<h2 id="Specifications">Spécifications</h2>
+## Spécifications
 
-<p>Proposé au groupe de travail CSS.</p>
+Proposé au groupe de travail CSS.
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Window.getDefaultComputedStyle")}}</p>
+{{Compat("api.Window.getDefaultComputedStyle")}}
diff --git a/files/fr/web/api/window/getselection/index.md b/files/fr/web/api/window/getselection/index.md
index 579af3f9a0..6b2f7b3796 100644
--- a/files/fr/web/api/window/getselection/index.md
+++ b/files/fr/web/api/window/getselection/index.md
@@ -3,45 +3,39 @@ title: window.getSelection
 slug: Web/API/Window/getSelection
 translation_of: Web/API/Window/getSelection
 ---
-<p>{{ ApiRef() }}</p>
+{{ ApiRef() }}
 
-<p>Renvoie un objet selection représentant le ou les objets sélectionnés.</p>
+Renvoie un objet selection représentant le ou les objets sélectionnés.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="eval"><em>selection</em> = window.getSelection()
-</pre>
+    selection = window.getSelection()
 
-<h2 id="Param.C3.A8tres">Paramètres</h2>
+## Paramètres
 
-<ul>
- <li><code>selection</code> est un objet de type {{DOMxRef("Selection")}}.</li>
-</ul>
+- `selection` est un objet de type {{DOMxRef("Selection")}}.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="eval">function foo() {
-   var selObj = window.getSelection();
-   alert(selObj);
-   var selRange = selObj.getRangeAt(0);
-   // travailler avec la sélection
-}
-</pre>
+    function foo() {
+       var selObj = window.getSelection();
+       alert(selObj);
+       var selRange = selObj.getRangeAt(0);
+       // travailler avec la sélection
+    }
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p>En <a href="fr/JavaScript">JavaScript</a>, lorsqu'un objet de type Selection est passé à une fonction, c'est une représentation sous forme de chaîne (string), c'est-à-dire le texte sélectionné, qui lui est passée à la place. L'objet selection apparaît donc comme une chaîne, alors qu'il s'agit en réalité d'un objet possédant ses propres propriétés et méthodes. En pratique, c'est donc la valeur renvoyée par la méthode <code><a href="fr/DOM/Selection/toString">toString</a></code> de l'objet Selection qui est passée. Dans l'exemple ci-dessus, <code>selObj</code> est automatiquement « convertie » lorsqu'elle est passée à <a href="fr/DOM/window.alert">window.alert</a>. Cependant, pour utiliser une propriété ou méthode JavaScript de <a href="fr/JS/String">String</a> comme <code><a href="fr/JS/String.prototype.length">length</a></code> ou <code><a href="fr/JS/String.prototype.substr">substr</a></code>, il est nécessaire d'appeler manuellement la méthode <code>toString</code>. I'm treading carefully with the word "convert" here because it could be misinterpreted as a permanent convert - Maian</p>
+En [JavaScript](fr/JavaScript), lorsqu'un objet de type Selection est passé à une fonction, c'est une représentation sous forme de chaîne (string), c'est-à-dire le texte sélectionné, qui lui est passée à la place. L'objet selection apparaît donc comme une chaîne, alors qu'il s'agit en réalité d'un objet possédant ses propres propriétés et méthodes. En pratique, c'est donc la valeur renvoyée par la méthode [`toString`](fr/DOM/Selection/toString) de l'objet Selection qui est passée. Dans l'exemple ci-dessus, `selObj` est automatiquement « convertie » lorsqu'elle est passée à [window.alert](fr/DOM/window.alert). Cependant, pour utiliser une propriété ou méthode JavaScript de [String](fr/JS/String) comme [`length`](fr/JS/String.prototype.length) ou [`substr`](fr/JS/String.prototype.substr), il est nécessaire d'appeler manuellement la méthode `toString`. I'm treading carefully with the word "convert" here because it could be misinterpreted as a permanent convert - Maian
 
-<h2 id="Sp.C3.A9cification">Spécification</h2>
+## Spécification
 
-<p>DOM Level 0. Ne fait partie d'aucune spécification.</p>
+DOM Level 0. Ne fait partie d'aucune spécification.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="../Selection_API">Selection API</a></li>
- <li><a href="../Selection"><code>Selection</code></a></li>
- <li><a href="../Range"><code>Range</code></a></li>
- <li><a href="../Document/getSelection"><code>Document.getSelection()</code></a></li>
- <li><a href="../HTMLInputElement/setSelectionRange"><code>HTMLInputElement.setSelectionRange()</code></a></li>
-</ul>
+- [Selection API](../Selection_API)
+- [`Selection`](../Selection)
+- [`Range`](../Range)
+- [`Document.getSelection()`](../Document/getSelection)
+- [`HTMLInputElement.setSelectionRange()`](../HTMLInputElement/setSelectionRange)
diff --git a/files/fr/web/api/window/hashchange_event/index.md b/files/fr/web/api/window/hashchange_event/index.md
index 59f62fcdd1..56fcf7bcb1 100644
--- a/files/fr/web/api/window/hashchange_event/index.md
+++ b/files/fr/web/api/window/hashchange_event/index.md
@@ -6,80 +6,48 @@ tags:
   - Web
 translation_of: Web/API/Window/hashchange_event
 ---
-<p>L'événement <code>hashchange</code> est déclenché lorsque l'identificateur de fragment de l'URL a changé (la partie de l'URL qui suit le symbole #, y compris le symbole # lui-même).</p>
+L'événement `hashchange` est déclenché lorsque l'identificateur de fragment de l'URL a changé (la partie de l'URL qui suit le symbole #, y compris le symbole # lui-même).
 
 <table class="properties">
- <tbody>
-  <tr>
-   <td>Bulles</td>
-   <td>Oui</td>
-  </tr>
-  <tr>
-   <td>Annulable</td>
-   <td>Non</td>
-  </tr>
-  <tr>
-   <td>Objets cibles</td>
-   <td>{{domxref("Window")}}</td>
-  </tr>
-  <tr>
-   <td>Interface</td>
-   <td>{{domxref("HashChangeEvent")}}</td>
-  </tr>
-  <tr>
-   <td>Action par défaut</td>
-   <td>Aucune</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <td>Bulles</td>
+      <td>Oui</td>
+    </tr>
+    <tr>
+      <td>Annulable</td>
+      <td>Non</td>
+    </tr>
+    <tr>
+      <td>Objets cibles</td>
+      <td>{{domxref("Window")}}</td>
+    </tr>
+    <tr>
+      <td>Interface</td>
+      <td>{{domxref("HashChangeEvent")}}</td>
+    </tr>
+    <tr>
+      <td>Action par défaut</td>
+      <td>Aucune</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Propriétés">Propriétés</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Propriété</th>
-   <th scope="col">Type</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>target</code> {{readonlyInline}}</td>
-   <td>{{domxref("EventTarget")}}</td>
-   <td>The browsing context (<code>window</code>).</td>
-  </tr>
-  <tr>
-   <td><code>type</code> {{readonlyInline}}</td>
-   <td>{{domxref("DOMString")}}</td>
-   <td>Type de l'évènement</td>
-  </tr>
-  <tr>
-   <td><code>bubbles</code> {{readonlyInline}}</td>
-   <td>{{jsxref("Boolean")}}</td>
-   <td>Whether the event normally bubbles or not.</td>
-  </tr>
-  <tr>
-   <td><code>cancelable</code> {{readonlyInline}}</td>
-   <td>{{jsxref("Boolean")}}</td>
-   <td>Whether the event is cancellable or not.</td>
-  </tr>
-  <tr>
-   <td><code>oldURL</code> {{readonlyInline}}</td>
-   <td>{{jsxref("String")}}</td>
-   <td>The previous URL from which the window was navigated.</td>
-  </tr>
-  <tr>
-   <td>newURL {{readonlyInline}}</td>
-   <td>{{jsxref("String")}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+## Propriétés
+
+| Propriété                             | Type                                 | Description                                           |
+| ------------------------------------- | ------------------------------------ | ----------------------------------------------------- |
+| `target` {{readonlyInline}}     | {{domxref("EventTarget")}} | The browsing context (`window`).                      |
+| `type` {{readonlyInline}}       | {{domxref("DOMString")}}     | Type de l'évènement                                   |
+| `bubbles` {{readonlyInline}}    | {{jsxref("Boolean")}}         | Whether the event normally bubbles or not.            |
+| `cancelable` {{readonlyInline}} | {{jsxref("Boolean")}}         | Whether the event is cancellable or not.              |
+| `oldURL` {{readonlyInline}}     | {{jsxref("String")}}         | The previous URL from which the window was navigated. |
+| newURL {{readonlyInline}}       | {{jsxref("String")}}         |                                                       |
 
-<p>Il existe plusieurs scripts de secours listés sur <a href="https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills">cette page</a>. Fondamentalement, ces scripts vérifient le <code>location.hash</code> à intervalles réguliers. Voici une version qui n'autorise qu'un seul gestionnaire à être lié à la propriété <code>window.onhashchange</code>:</p>
+Il existe plusieurs scripts de secours listés sur [cette page](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills). Fondamentalement, ces scripts vérifient le `location.hash` à intervalles réguliers. Voici une version qui n'autorise qu'un seul gestionnaire à être lié à la propriété `window.onhashchange`:
 
-<pre class="brush:js;">;(function(window) {
+```js
+;(function(window) {
 
   // Sortir si le navigateur implémente cet événement
   if ("onhashchange" in window) { return; }
@@ -94,7 +62,7 @@ translation_of: Web/API/Window/hashchange_event
       newHash = location.hash;
 
     // Si le hash a été changé et qu'un gestionnaire a été lié...
-    if (newHash != oldHash &amp;&amp; typeof window.onhashchange === "function") {
+    if (newHash != oldHash && typeof window.onhashchange === "function") {
       // exécute le gestionnaire
       window.onhashchange({
         type: "hashchange",
@@ -108,32 +76,19 @@ translation_of: Web/API/Window/hashchange_event
   }, 100);
 
 })(window);
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'indices.html#event-hashchange', 'hashchange')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+```
+
+## Spécifications
+
+| Spécification                                                                                        | Status                           | Commentaire         |
+| ---------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- |
+| {{SpecName('HTML WHATWG', 'indices.html#event-hashchange', 'hashchange')}} | {{Spec2('HTML WHATWG')}} | Définition initiale |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Window.hashchange_event")}}</p>
+{{Compat("api.Window.hashchange_event")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/en-US/docs/Mozilla_event_reference/popstate"><code>popstate</code></a></li>
- <li><a href="/en-US/docs/Web/API/WindowEventHandlers/onhashchange">WindowEventHandlers.onhashchange</a></li>
-</ul>
+- [`popstate`](/en-US/docs/Mozilla_event_reference/popstate)
+- [WindowEventHandlers.onhashchange](/en-US/docs/Web/API/WindowEventHandlers/onhashchange)
diff --git a/files/fr/web/api/window/history/index.md b/files/fr/web/api/window/history/index.md
index 80fc573e76..d89aba868c 100644
--- a/files/fr/web/api/window/history/index.md
+++ b/files/fr/web/api/window/history/index.md
@@ -3,51 +3,35 @@ title: Window.history
 slug: Web/API/Window/history
 translation_of: Web/API/Window/history
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}
 
-<p>La propriété en lecture seule <strong><code>Window.history</code></strong> renvoie une référence à l'objet {{domxref("History")}}, qui offre la possibilité de manipuler l'historique de session du navigateur (pages visitées dans l'onglet ou le cadre dans lesquels la page courante est chargée).</p>
+La propriété en lecture seule **`Window.history`** renvoie une référence à l'objet {{domxref("History")}}, qui offre la possibilité de manipuler l'historique de session du navigateur (pages visitées dans l'onglet ou le cadre dans lesquels la page courante est chargée).
 
-<p>L'objet <code>History</code> obtenu a les méthodes suivantes : voir <a href="/en/DOM/Manipulating_the_browser_history">la manipulation de l'historique du navigateur</a> pour avoir plus de détails ainsi que des exemples.<br>
- En particulier, cet article explique les caractéristiques des méthodes <code>pushState()</code> et <code>replaceState()</code>qu'il est utile de connaître avant de les utiliser.</p>
+L'objet `History` obtenu a les méthodes suivantes : voir [la manipulation de l'historique du navigateur](/en/DOM/Manipulating_the_browser_history) pour avoir plus de détails ainsi que des exemples.
+En particulier, cet article explique les caractéristiques des méthodes `pushState()` et `replaceState()`qu'il est utile de connaître avant de les utiliser.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">history.back();     // similaire au bouton de retour
+```js
+history.back();     // similaire au bouton de retour
 history.go(-1);     // similaire à history.back();
-</pre>
+```
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p>Pour les pages de niveau supérieur, vous pourrez voir la liste des pages dans l'historique des sessions, accessibles grâce à l'objet <code>History</code>, situé dans le menu déroulant près des boutons précédent et suivant.</p>
+Pour les pages de niveau supérieur, vous pourrez voir la liste des pages dans l'historique des sessions, accessibles grâce à l'objet `History`, situé dans le menu déroulant près des boutons précédent et suivant.
 
-<p>Pour des raisons de sécurité, l'objet <code>History</code> n'autorise pas l'accès au URL d'autres pages présentes dans l'historique de la session mais autorise d'y naviguer.</p>
+Pour des raisons de sécurité, l'objet `History` n'autorise pas l'accès au URL d'autres pages présentes dans l'historique de la session mais autorise d'y naviguer.
 
-<p>Il n'y a pas de possibilité de nettoyer l'historique de la session ou de désactiver les boutons précédent et suivant. La solution éventuelle la plus proche serait la méthode <a href="/en/DOM/window.location#replace">location.replace()</a>, permettant de remplacer l'élément actuel de l'historique de la session par l'URL fournie.</p>
+Il n'y a pas de possibilité de nettoyer l'historique de la session ou de désactiver les boutons précédent et suivant. La solution éventuelle la plus proche serait la méthode [location.replace()](/en/DOM/window.location#replace), permettant de remplacer l'élément actuel de l'historique de la session par l'URL fournie.
 
-<h2 id="Specification">Spécification</h2>
+## Spécification
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'browsers.html#the-history-interface', 'The History interface')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'browsers.html#the-history-interface', 'The History interface')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+| Specification                                                                                                            | Status                           | Commentaire |
+| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- |
+| {{SpecName('HTML WHATWG', 'browsers.html#the-history-interface', 'The History interface')}} | {{Spec2('HTML WHATWG')}} |             |
+| {{SpecName('HTML5 W3C', 'browsers.html#the-history-interface', 'The History interface')}} | {{Spec2('HTML5 W3C')}}     |             |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-
-
-<p>{{Compat("api.Window.history")}}</p>
+{{Compat("api.Window.history")}}
diff --git a/files/fr/web/api/window/home/index.md b/files/fr/web/api/window/home/index.md
index 856f95067c..6a101e557c 100644
--- a/files/fr/web/api/window/home/index.md
+++ b/files/fr/web/api/window/home/index.md
@@ -11,26 +11,26 @@ tags:
   - Window
 translation_of: Web/API/Window/home
 ---
-<div>{{APIRef}}{{ Non-standard_header() }} {{ obsolete_header(31) }}</div>
+{{APIRef}}{{ Non-standard_header() }} {{ obsolete_header(31) }}
 
-<p>La méthode <code><strong>Window.home()</strong></code> renvoie la fenêtre à la page d'accueil.</p>
+La méthode **`Window.home()`** renvoie la fenêtre à la page d'accueil.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>window</em>.home();
-</pre>
+    window.home();
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">function goHome() {
+```js
+function goHome() {
   window.home();
 }
-</pre>
+```
 
-<h2 id="Spécification">Spécification</h2>
+## Spécification
 
-<p>DOM Niveau 0. Ne fait pas partie de la spécification.</p>
+DOM Niveau 0. Ne fait pas partie de la spécification.
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Window.home")}}</p>
+{{Compat("api.Window.home")}}
diff --git a/files/fr/web/api/window/index.md b/files/fr/web/api/window/index.md
index d5c5e70052..0ef4ef3e54 100644
--- a/files/fr/web/api/window/index.md
+++ b/files/fr/web/api/window/index.md
@@ -10,559 +10,543 @@ tags:
   - Window
 translation_of: Web/API/Window
 ---
-<p>{{APIRef}}</p>
-
-<p>L'objet <code>window</code> représente une fenêtre contenant un document DOM ; la propriété <code>document</code> pointe vers le <a href="/fr-FR/docs/DOM/document">document DOM</a> chargé dans cette fenêtre. Une fenêtre pour un document donné peut être obtenue en utilisant la propriété {{Domxref("document.defaultView")}}.</p>
-
-<p>Cette section fournit une brève référence pour toutes les méthodes, propriétés et événements disponibles via l'objet DOM <code>window</code>. L'objet <code>window</code> implémente l'interface <code>Window</code>, qui à son tour hérite de l'interface <code><a href="http://www.w3.org/TR/DOM-Level-2-Views/views.html#Views-AbstractView">AbstractView</a></code>. Certaines fonctions globales supplémentaires, espaces de noms, objets, interfaces et constructeurs, non typiquement associés à la fenêtre, mais disponibles sur celle-ci, sont répertoriés dans la <a href="/fr-FR/docs/JavaScript/Reference">Référence JavaScript</a> et la <a href="/fr-FR/docs/Web/API/Document_Object_Model">Référence DOM</a>.</p>
-
-<p>Dans un navigateur utilisant des onglets, comme Firefox, chaque onglet contient son propre objet <code>window</code> (et si vous écrivez une extension, la fenêtre du navigateur elle-même est un objet <code>window</code> séparé — consultez <a href="/fr/docs/Mozilla/Working_with_windows_in_chrome_code#Fen.C3.AAtres_de_contenu">Travailler avec des fenêtres dans du code chrome</a> pour plus d'informations). C'est-à-dire que l'objet <code>window</code> n'est pas partagé entre les onglets dans la même fenêtre. Certaines méthodes, notamment {{ Domxref("window.resizeTo") }} et {{ Domxref("window.resizeBy") }}, s'appliquent à la fenêtre entière et non à l'onglet spécifique auquel l'objet <code>window</code> appartient. En général, ce qui ne peut raisonnablement pas concerner un onglet se rapporte à la fenêtre à la place.</p>
-
-<p>{{InheritanceDiagram}}</p>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<p><em>Cette interface hérite des propriétés de l'interface {{domxref("EventTarget")}} et implémente les propriétés des mixins {{domxref("WindowOrWorkerGlobalScope")}} et {{domxref("WindowEventHandlers")}}.</em></p>
-
-<p>Notez que les propriétés qui sont des objets (par exemple, pour redéfinir le prototype d'éléments intrinsèques) sont répertoriées dans une section distincte ci-dessous.</p>
-
-<dl>
- <dt>{{domxref("Window.closed")}} {{Non-standard_inline}}{{readOnlyInline}}</dt>
- <dd>Cette propriété indique si la fenêtre en cours est fermée ou non.</dd>
- <dt>{{domxref("Window.console")}} {{ReadOnlyInline}}</dt>
- <dd>Renvoie une référence à l'objet console qui fournit l'accès à la console de débogage du navigateur.</dd>
- <dt>{{domxref("Window.content")}} et <code>Window._content</code> {{Non-standard_inline}} {{obsolete_inline}}{{ReadOnlyInline}}</dt>
- <dd>Renvoie une référence à l'élément de contenu dans la fenêtre en cours. Depuis Firefox 57 (initialement Nightly uniquement), les deux versions sont uniquement disponibles à partir du code chrome (privilégié) et ne sont plus disponibles sur le Web.</dd>
- <dt>{{domxref("Window.controllers")}}{{non-standard_inline}}{{ReadOnlyInline}}</dt>
- <dd>Renvoie les objets du contrôleur XUL pour la fenêtre chrome en cours.</dd>
- <dt>{{domxref("Window.customElements")}}{{ReadOnlyInline}}</dt>
- <dd>renvoie une référence à l'objet {{domxref("CustomElementRegistry")}}, qui peut être utilisée pour enregistrer de nouveaux <a href="/fr-FR/docs/Web/Web_Components/Using_custom_elements">éléments personnalisés</a> et obtenir des informations à propos d'éléments personnalisés précédemment enregistrés.</dd>
- <dt>{{domxref("Window.crypto")}} {{readOnlyInline}}</dt>
- <dd>Retourne l'objet crypto du navigateur.</dd>
- <dt>{{domxref("Window.defaultStatus")}} {{Obsolete_inline("gecko23")}}</dt>
- <dd>Récupère / définit le texte de la barre d'état pour la fenêtre donnée.</dd>
- <dt>{{domxref("Window.devicePixelRatio")}} {{non-standard_inline}}{{ReadOnlyInline}}</dt>
- <dd>Renvoie le rapport entre les pixels physiques et les pixels indépendants du périphérique dans l'affichage en cours.</dd>
- <dt>{{domxref("Window.dialogArguments")}} {{ReadOnlyInline}}</dt>
- <dd>Récupère les arguments passés à la fenêtre (si c'est une boîte de dialogue) au moment où {{domxref ("window.showModalDialog()")}} a été appelé. C'est un {{Interface("nsIArray")}}.</dd>
- <dt>{{domxref("Window.directories")}} {{obsolete_inline}}</dt>
- <dd>Synonyme de {{domxref("window.personalbar")}}</dd>
- <dt>{{domxref("Window.document")}} {{ReadOnlyInline}}</dt>
- <dd>Renvoie une référence au document que la fenêtre contient.</dd>
- <dt>{{domxref("Window.DOMMatrix")}} {{readOnlyInline}} {{experimental_inline}}</dt>
- <dd>Renvoie une référence à un objet {{domxref("DOMMatrix")}} représentant des matrices 4x4, adapté aux opérations 2D et 3D.</dd>
- <dt>{{domxref("Window.DOMMatrixReadOnly")}} {{readOnlyInline}} {{experimental_inline}}</dt>
- <dd>Renvoie une référence à un objet {{domxref("DOMMatrixReadOnly")}} représentant des matrices 4x4, adapté aux opérations 2D et 3D.</dd>
- <dt>{{domxref("Window.DOMPoint")}} {{readOnlyInline}} {{experimental_inline}}</dt>
- <dd>Renvoie une référence à un objet {{domxref("DOMPoint")}} représentant un point 2D ou 3D dans un système de coordonnées.</dd>
- <dt>{{domxref("Window.DOMPointReadOnly")}} {{readOnlyInline}} {{experimental_inline}}</dt>
- <dd>Renvoie une référence à un objet {{domxref("DOMPointReadOnly")}} représentant un point 2D ou 3D dans un système de coordonnées.</dd>
- <dt>{{domxref("Window.DOMQuad")}} {{readOnlyInline}} {{experimental_inline}}</dt>
- <dd>Renvoie une référence à un objet {{domxref("DOMQuad")}}, qui fournit un objet quadrilatère, c'est-à-dire, ayant quatre coins et quatre côtés.</dd>
- <dt>{{domxref("Window.DOMRect")}} {{readOnlyInline}} {{experimental_inline}}</dt>
- <dd>Returns a reference to a {{domxref("DOMRect")}} object, which represents a rectangle.</dd>
- <dt>{{domxref("Window.DOMRectReadOnly")}} {{readOnlyInline}} {{experimental_inline}}</dt>
- <dd>Renvoie une référence à un objet {{domxref("DOMRectReadOnly")}} représentant un rectangle.</dd>
- <dt>{{domxref("Window.frameElement")}} {{readOnlyInline}}</dt>
- <dd>Renvoie l'élément dans lequel la fenêtre est intégrée, ou null si la fenêtre n'est pas intégrée.</dd>
- <dt>{{domxref("Window.frames")}} {{readOnlyInline}}</dt>
- <dd>Renvoie un tableau des sous-cadres dans la fenêtre en cours.</dd>
- <dt>{{domxref("Window.fullScreen")}} {{gecko_minversion_inline("1.9")}}</dt>
- <dd>Cette propriété indique si la fenêtre est affichée en plein écran ou non.</dd>
- <dt>{{domxref("Window.globalStorage")}} {{gecko_minversion_inline("1.8.1")}} {{Non-standard_inline}} {{Obsolete_inline("gecko13")}}</dt>
- <dd>Non supporté depuis Gecko 13 (Firefox 13). Utilisez {{domxref("Window.localStorage")}} à la place.<br>
- Était : divers objets de stockage utilisés pour stocker des données sur plusieurs pages.</dd>
- <dt>{{domxref("Window.history")}} {{ReadOnlyInline}}</dt>
- <dd>Retourne une référence à l'objet d'historique.</dd>
- <dt>{{domxref("Window.innerHeight")}} {{readOnlyInline}}</dt>
- <dd>Récupère la hauteur de la zone de contenu de la fenêtre du navigateur, y compris, si affichée, la barre de défilement horizontale.</dd>
- <dt>{{domxref("Window.innerWidth")}} {{readOnlyInline}}</dt>
- <dd>Récupère la largeur de la zone de contenu de la fenêtre du navigateur, y compris, si affichée, la barre de défilement verticale.</dd>
- <dt>{{domxref("Window.isSecureContext")}} {{readOnlyInline}}</dt>
- <dd>Indique si un contexte est capable d'utiliser des fonctionnalités nécessitant des contextes sécurisés.</dd>
- <dt>{{domxref("Window.length")}} {{readOnlyInline}}</dt>
- <dd>Renvoie le nombre de cadres dans la fenêtre. Voir également {{domxref("window.frames")}}.</dd>
- <dt>{{domxref("Window.location")}}</dt>
- <dd>Récupère/définit l'emplacement, ou l'URL en cours, de l'objet de fenêtre.</dd>
- <dt>{{domxref("Window.locationbar")}} {{ReadOnlyInline}}</dt>
- <dd>Renvoie l'objet de la barre d'adresse, dont la visibilité peut être inversée dans la fenêtre.</dd>
- <dt>{{domxref("Window.localStorage")}} {{readOnlyInline}}{{gecko_minversion_inline("1.9.1")}}</dt>
- <dd>Renvoie une référence à l'objet de stockage local utilisé pour stocker les données accessibles uniquement par l'origine qui les a créées.</dd>
- <dt>{{domxref("Window.menubar")}} {{ReadOnlyInline}}</dt>
- <dd>Renvoie l'objet barre de menus, dont la visibilité peut être inversée dans la fenêtre.</dd>
- <dt>{{domxref("Window.messageManager")}} {{gecko_minversion_inline("2.0")}}</dt>
- <dd>Renvoie l'objet <a href="/fr-FR/docs/The_message_manager">gestionnaire de messages</a> pour cette fenêtre.</dd>
- <dt>{{domxref("Window.mozAnimationStartTime")}} {{ReadOnlyInline}}{{gecko_minversion_inline("2.0")}} {{Deprecated_inline}}</dt>
- <dd>Le temps en millisecondes depuis l'instant auquel le cycle d'animation en cours a commencé.</dd>
- <dt>{{domxref("Window.mozInnerScreenX")}} {{ReadOnlyInline}}{{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}}</dt>
- <dd>Renvoie la coordonnée horizontale (X) du coin supérieur gauche du point de vue de la fenêtre, en coordonnées d'écran. Cette valeur est restituée en pixels CSS. Voir <code>mozScreenPixelsPerCSSPixel</code> dans {{interface("nsIDOMWindowUtils")}} pour un facteur de conversion pour s'adapter aux pixels de l'écran si nécessaire.</dd>
- <dt>{{domxref("Window.mozInnerScreenY")}} {{ReadOnlyInline}} {{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}}</dt>
- <dd>Renvoie la coordonnée verticale (Y) du coin supérieur gauche du point de vue de la fenêtre, en coordonnées d'écran. Cette valeur est indiquée en pixels CSS. Voir <code>mozScreenPixelsPerCSSPixel</code> pour un facteur de conversion pour s'adapter aux pixels de l'écran si nécessaire.</dd>
- <dt>{{domxref("Window.mozPaintCount")}} {{non-standard_inline}}{{ReadOnlyInline}} {{gecko_minversion_inline("2.0")}}</dt>
- <dd>Renvoie le nombre de fois où le document en cours a été réaffiché à l'écran dans cette fenêtre. Cela peut être utilisé pour calculer les performances d'affichage.</dd>
- <dt>{{domxref("Window.name")}}</dt>
- <dd>Récupère / définit le nom de la fenêtre.</dd>
- <dt>{{domxref("Window.navigator")}} {{readOnlyInline}}</dt>
- <dd>Renvoie une référence à l'objet navigateur.</dd>
- <dt>{{domxref("Window.NetworkInformation")}} {{readOnlyInline}} {{experimental_inline}}</dt>
- <dd>Renvoie une référence à l'interface {{domxref("NetworkInformation")}}, qui fournit des informations sur la connexion qu'un périphérique est en train d'utiliser pour communiquer avec le réseau et fournit un moyen pour les scripts d'être notifiés si le type de connexion change. </dd>
- <dt>{{domxref("Window.opener")}}</dt>
- <dd>Renvoie une référence à la fenêtre qui a ouvert la fenêtre en cours.</dd>
- <dt>{{domxref("Window.orientation")}}{{non-standard_inline}}{{deprecated_inline}}{{readOnlyInline}}</dt>
- <dd>Renvoie l'orientation en degrés (par incréments de 90 degrés) du point de vue par rapport à l'orientation naturelle du périphérique.</dd>
- <dt>{{domxref("Window.outerHeight")}} {{readOnlyInline}}</dt>
- <dd>Récupère la hauteur de l'extérieur de la fenêtre du navigateur.</dd>
- <dt>{{domxref("Window.outerWidth")}} {{readOnlyInline}}</dt>
- <dd>Récupère la largeur de l'extérieur de la fenêtre du navigateur.</dd>
- <dt>{{domxref("Window.scrollX","Window.pageXOffset")}} {{readOnlyInline}}</dt>
- <dd>Un alias pour {{domxref("window.scrollX")}}.</dd>
- <dt>{{domxref("Window.scrollY","Window.pageYOffset")}}{{readOnlyInline}}</dt>
- <dd>Un alias pour {{domxref("window.scrollY")}}</dd>
- <dt>{{domxref("Window.sessionStorage")}} {{readOnlyInline}}</dt>
- <dd>Renvoie une référence à l'objet de stockage de session utilisé pour stocker les données accessibles uniquement par l'origine qui les a créées..</dd>
- <dt>{{domxref("Window.parent")}} {{readOnlyInline}}</dt>
- <dd>Renvoie une référence au parent de la fenêtre ou du sous-cadre en cours.</dd>
- <dt>{{domxref("Window.performance")}} {{readOnlyInline}}</dt>
- <dd>Renvoie un objet {{domxref("Performance")}}, qui inclut les attributs {{domxref("Performance.timing", "timing")}} et {{domxref("Performance.navigation", "navigation")}}, dont chacun est un objet fournissant des données liées aux performances. Voir aussi <a href="/fr-FR/docs/Web/API/Navigation_timing_API/Using_Navigation_Timing">Utilisation de Chronométrage de Navigation</a> pour plus d'informations et d'exemples.</dd>
- <dt>{{domxref("Window.personalbar")}} {{readOnlyInline}}</dt>
- <dd>Renvoie l'objet barre personnelle, dont la visibilité peut être inversée dans la fenêtre.</dd>
- <dt>{{domxref("Window.pkcs11")}} {{obsolete_inline(29)}}</dt>
- <dd>Fournissait précédemment un accès pour installer et supprimer des modules PKCS11.</dd>
- <dt>{{domxref("Window.returnValue")}}</dt>
- <dd>La valeur de retour à renvoyer à la fonction qui a appelé {{domxref("window.showModalDialog()")}} pour afficher la fenêtre comme boîte de dialogue modale.</dd>
- <dt>{{domxref("Window.screen")}} {{readOnlyInline}}</dt>
- <dd>Renvoie une référence à l'objet écran associé à la fenêtre.</dd>
- <dt>{{domxref("Window.screenX")}} {{readOnlyInline}}</dt>
- <dd>Renvoie la distance horizontale de la bordure gauche du navigateur de l'utilisateur à partir du côté gauche de l'écran.</dd>
- <dt>{{domxref("Window.screenY")}} {{readOnlyInline}}</dt>
- <dd>Renvoie la distance verticale de la bordure supérieure du navigateur de l'utilisateur à partir du haut de l'écran.</dd>
- <dt>{{domxref("Window.scrollbars")}} {{readOnlyInline}}</dt>
- <dd>Renvoie l'objet barres de défilement, dont la visibilité peut être modifiée dans la fenêtre.</dd>
- <dt>{{domxref("Window.scrollMaxX")}}{{non-standard_inline}}{{ReadOnlyInline}}</dt>
- <dd>Le décalage maximal dont la fenêtre peut étre décalée horizontalement, c'est-à-dire la largeur du document moins la largeur du point de vue.</dd>
- <dt>{{domxref("Window.scrollMaxY")}}{{non-standard_inline}}{{ReadOnlyInline}}</dt>
- <dd>Le décalage maximal dont la fenêtre peut étre décalée verticalement (c'est-à-dire, la hauteur du document moins la hauteur du point de vue).</dd>
- <dt>{{domxref("Window.scrollX")}} {{readOnlyInline}}</dt>
- <dd>Renvoie le nombre de pixels dont le document a déjà été décalé horizontalement.</dd>
- <dt>{{domxref("Window.scrollY")}} {{readOnlyInline}}</dt>
- <dd>Renvoie le nombre de pixels dont le document a déjà été décalé verticalement.</dd>
- <dt>{{domxref("Window.self")}} {{ReadOnlyInline}}</dt>
- <dd>Renvoie une référence d'objet à l'objet fenêtre lui-même.</dd>
- <dt>{{domxref("Window.sessionStorage")}}</dt>
- <dd>Renvoie un objet de stockage pour stocker des données dans une session de page unique.</dd>
- <dt>{{domxref("Window.sidebar")}} {{non-standard_inline}}{{ReadOnlyInline}}</dt>
- <dd>Renvoie une référence à l'objet fenêtre de la barre latérale.</dd>
- <dt>{{domxref("Window.speechSynthesis")}} {{ReadOnlyInline}}</dt>
- <dd>Renvoie un objet {{domxref("SpeechSynthesis")}}, qui est le point d'entrée pour l'utilisation de la fonctionnalité de synthèse vocale de l'<a href="/fr-FR/docs/Web/API/Web_Speech_API">API Web Speech</a>.</dd>
- <dt>{{domxref("Window.status")}}</dt>
- <dd>Récupère/définit le texte dans la barre d'état en bas du navigateur.</dd>
- <dt>{{domxref("Window.statusbar")}} {{readOnlyInline}}</dt>
- <dd>Renvoie l'objet barre d'état, dont la visibilité peut être inversée dans la fenêtre.</dd>
- <dt>{{domxref("Window.toolbar")}} {{readOnlyInline}}</dt>
- <dd>Renvoie l'objet barre d'outils, dont la visibilité peut être inversée dans la fenêtre.</dd>
- <dt>{{domxref("Window.top")}} {{readOnlyInline}}</dt>
- <dd>Renvoie une référence à la fenêtre la plus haute dans la hiérarchie des fenêtres. Cette propriété est en lecture seule.</dd>
- <dt>{{domxref("Window.visualViewport")}} {{readOnlyInline}}</dt>
- <dd>Renvoie un objet {{domxref("VisualViewport")}} représentant le point de vue visuel pour une fenêtre donnée.</dd>
- <dt>{{domxref("Window.window")}} {{ReadOnlyInline}}</dt>
- <dd>Renvoie une référence à la fenêtre en cours.</dd>
- <dt><code>window[0]</code>,<code> window[1]</code>, etc.</dt>
- <dd>Renvoie une référence à l'objet <code>window</code> dans les cadres. Voir {{domxref("Window.frames")}}} pour plus de détails.</dd>
-</dl>
-
-<h3 id="Propriétés_implémentées_depuis_ailleurs">Propriétés implémentées depuis ailleurs</h3>
-
-<dl>
- <dt>{{domxref("WindowOrWorkerGlobalScope.caches")}} {{readOnlyinline}}</dt>
- <dd>Renvoie l'objet {{domxref("CacheStorage")}} associé au contexte en cours. Cet objet active des fonctionnalités telles que le stockage des ressources pour une utilisation hors connexion, et la génération de réponses personnalisées aux requêtes.</dd>
- <dt>{{domxref("WindowOrWorkerGlobalScope.indexedDB")}} {{readonlyInline}}</dt>
- <dd>Fournit un mécanisme permettant aux applications d'accéder de manière asynchrone à des bases de données indexées ; renvoie un objet {{domxref("IDBFactory")}}.</dd>
- <dt>{{domxref("WindowOrWorkerGlobalScope.isSecureContext")}} {{readOnlyinline}}</dt>
- <dd>Renvoie un booléen indiquant si le contexte actuel est sécurisé (<code>true</code>) ou non (<code>false</code>).</dd>
- <dt>{{domxref("WindowOrWorkerGlobalScope.origin")}} {{readOnlyinline}}</dt>
- <dd>Renvoie l'origine de l'objet global, sérialisé comme une chaîne. (Cela ne semble pas encore être implémenté dans aucun navigateur.)</dd>
-</dl>
-
-<h2 id="M.C3.A9thodes">Méthodes</h2>
-
-<p><em>Cette interface hérite des méthodes de l'interface {{domxref("EventTarget")}} et implémente les méthodes de {{domxref("WindowOrWorkerGlobalScope")}} et {{domxref("EventTarget")}}.</em></p>
-
-<dl>
- <dt>{{domxref("Window.alert()")}}</dt>
- <dd>Affiche une boîte de message d'alerte.</dd>
- <dt>{{domxref("Window.back()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt>
- <dd>Recule d'une page dans l'historique de la fenêtre.</dd>
- <dt>{{domxref("Window.blur()")}}</dt>
- <dd>Déplace la focalisation hors de la fenêtre.</dd>
- <dt>{{domxref("Window.cancelAnimationFrame()")}} {{experimental_inline}}</dt>
- <dd>Vous permet d'annuler un rappel précédemment planifié avec {{domxref("Window.requestAnimationFrame")}}.</dd>
- <dt>{{domxref("Window.cancelIdleCallback()")}} {{experimental_inline}}</dt>
- <dd>Vous permet d'annuler un rappel précédemment planifié avec {{domxref("Window.requestIdleCallback")}}.</dd>
- <dt>{{domxref("Window.captureEvents()")}} {{Deprecated_inline}}</dt>
- <dd>Enregistre la fenêtre pour qu'elle capture tous les évènements du type spécifié.</dd>
- <dt>{{domxref("Window.clearImmediate()")}}</dt>
- <dd>Annule l'exécution répétée définie en utilisant <code>setImmediate</code>.</dd>
- <dt>{{domxref("Window.close()")}}</dt>
- <dd>Ferme la fenêtre en cours.</dd>
- <dt>{{domxref("Window.confirm()")}}</dt>
- <dd>Affiche une boîte de dialogue avec un message auquel l'utilisateur doit répondre.</dd>
- <dt>{{domxref("Window.disableExternalCapture()")}} {{obsolete_inline(24)}}</dt>
- <dd>{{todo("NeedsContents")}}</dd>
- <dt>{{domxref("Window.dispatchEvent()")}}</dt>
- <dd>Utilisé pour déclencher un évènement.</dd>
- <dt>{{domxref("Window.dump()")}} {{Non-standard_inline}}</dt>
- <dd>Écrit un message à la console.</dd>
- <dt>{{domxref("Window.enableExternalCapture()")}} {{obsolete_inline(24)}}</dt>
- <dd>{{todo("NeedsContents")}}</dd>
- <dt>{{domxref("Window.find()")}}</dt>
- <dd>Recherche la chaîne de caractères donnée dans une fenêtre.</dd>
- <dt>{{domxref("Window.focus()")}}</dt>
- <dd>Donne la focalisation à la fenêtre en cours.</dd>
- <dt>{{domxref("Window.forward()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt>
- <dd>Avance la fenêtre d'un document dans l'historique.</dd>
- <dt>{{domxref("Window.getAttention()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt>
- <dd>Fait flasher l'icône de l'application.</dd>
- <dt>{{domxref("Window.getAttentionWithCycleCount()")}}</dt>
- <dd>{{todo("NeedsContents")}}</dd>
- <dt>{{domxref("Window.getComputedStyle()")}}</dt>
- <dd>Récupère un style calculé pour l'élément donné. Un style calculé indique les valeurs de toutes les propriétés CSS de l'élément.</dd>
- <dt>{{domxref("Window.getDefaultComputedStyle()")}} {{Non-standard_inline}}</dt>
- <dd>Récupère le style calculé par défaut pour l'élément indiqué, en ignorant les feuilles de style d'auteur.</dd>
- <dt>{{domxref("Window.getSelection()")}}</dt>
- <dd>Renvoie l'objet de sélection représentant les éléments sélectionnés.</dd>
- <dt>{{domxref("Window.home()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt>
- <dd>Renvoie le navigateur à la page d'accueil.</dd>
- <dt>{{domxref("Window.matchMedia()")}} {{gecko_minversion_inline("6.0")}}</dt>
- <dd>Renvoie un objet {{domxref("MediaQueryList")}} représentant la chaîne d'interrogation de média spécifiée.</dd>
- <dt>{{domxref("Window.maximize()")}}</dt>
- <dd>{{todo("NeedsContents")}}</dd>
- <dt>{{domxref("Window.minimize()")}} (top-level XUL windows only)</dt>
- <dd>Minimize la fenêtre.</dd>
- <dt>{{domxref("Window.moveBy()")}}</dt>
- <dd>Déplace la fenêtre en cours de la quantité indiquée.</dd>
- <dt>{{domxref("Window.moveTo()")}}</dt>
- <dd>Déplace la fenêtre vers les coordonnées spécifiées.</dd>
- <dt>{{domxref("Window.open()")}}</dt>
- <dd>Ouvre une nouvelle fenêtre.</dd>
- <dt>{{domxref("Window.openDialog()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt>
- <dd>Ouvre une nouvelle fenêtre de dialogue.</dd>
- <dt>{{domxref("Window.postMessage()")}}</dt>
- <dd>Fournit un moyen sécurisé pour une fenêtre d'envoyer une chaîne de données à une autre fenêtre, qui n'a pas besoin d'être dans le même domaine que la première.</dd>
- <dt>{{domxref("Window.prompt()")}}</dt>
- <dd>Ouvre la boîte de dialogue d'impression du document en cours.</dd>
- <dt>{{domxref("Window.prompt()")}}</dt>
- <dd>Renvoie le texte saisi par l'utilisateur dans une boîte de dialogue à invite.</dd>
- <dt>{{domxref("Window.releaseEvents()")}} {{Non-standard_inline}} {{Deprecated_inline}}</dt>
- <dd>Annule la capture des évènements d'un certain type par la fenêtre.</dd>
- <dt>{{domxref("Window.requestAnimationFrame()")}} {{gecko_minversion_inline("2.0")}}</dt>
- <dd>Indique au navigateur qu'une animation est en cours, en demandant au navigateur de planifier une redessinage de la fenêtre lors de l'image d'animation suivante.</dd>
- <dt>{{domxref("Window.requestIdleCallback()")}}  {{experimental_inline}}</dt>
- <dd>Active la planification de tâches pendant les périodes d'inactivité du navigateur.</dd>
- <dt>{{domxref("Window.resizeBy()")}}</dt>
- <dd>Redimensionne la fenêtre en cours d'une certaine quantité.</dd>
- <dt>{{domxref("Window.resizeTo()")}}</dt>
- <dd>Redimensionne dynamiquement la fenêtre.</dd>
- <dt>{{domxref("Window.restore()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt>
- <dd>{{todo("NeedsContents")}}</dd>
- <dt>{{domxref("Window.routeEvent()")}} {{obsolete_inline(24)}}</dt>
- <dd>{{todo("NeedsContents")}}</dd>
- <dt>{{domxref("Window.scroll()")}}</dt>
- <dd>Fait défiler la fenêtre à un endroit particulier dans le document.</dd>
- <dt>{{domxref("Window.scrollBy()")}}</dt>
- <dd>Fait défiler le document dans la fenêtre de la quantité indiquée.</dd>
- <dt>{{domxref("Window.scrollByLines()")}} {{Non-standard_inline}}</dt>
- <dd>Fait défiler le document du nombre de lignes indiqué.</dd>
- <dt>{{domxref("Window.scrollByPages()")}} {{Non-standard_inline}}</dt>
- <dd>Fait défiler le document en cours du nombre de pages indiqué.</dd>
- <dt>{{domxref("Window.scrollTo()")}}</dt>
- <dd>Fait défiler à un jeu de coordonnées particulier dans le document.</dd>
- <dt>{{domxref("Window.setCursor()")}} {{Non-standard_inline}} (top-level XUL windows only)</dt>
- <dd>Change le curseur pour la fenêtre en cours.</dd>
- <dt>{{domxref("Window.setImmediate()")}}</dt>
- <dd>Exécute une fonction après que le navigateur a terminé d'autres tâches lourdes</dd>
- <dt>{{domxref("Window.setResizable()")}} {{Non-standard_inline}}</dt>
- <dd>Inverse la possibilité pour un utilisateur de redimensionner une fenêtre.</dd>
- <dt>{{domxref("Window.sizeToContent()")}} {{Non-standard_inline}}</dt>
- <dd>Dimensionne la fenêtre en fonction de son contenu.</dd>
- <dt>{{domxref("Window.stop()")}}</dt>
- <dd>Cette méthode arrête le chargement de la fenêtre.</dd>
- <dt>{{domxref("Window.updateCommands()")}} {{Non-standard_inline}}</dt>
- <dd>Met à jour l'état des commandes de la fenêtre chrome en cours (IU).</dd>
-</dl>
-
-<h3 id="Méthodes_implémentées_depuis_ailleurs">Méthodes implémentées depuis ailleurs</h3>
-
-<dl>
- <dt>{{domxref("EventTarget.addEventListener()")}}</dt>
- <dd>Enregistre un gestionnaire d'événement pour un type d'événement spécifique dans la fenêtre.</dd>
- <dt>{{domxref("WindowOrWorkerGlobalScope.atob()")}}</dt>
- <dd>Décode une chaîne de données qui a été codée en utilisant l'encodage en base 64.</dd>
- <dt>{{domxref("WindowOrWorkerGlobalScope.btoa()")}}</dt>
- <dd>Crée une chaîne ASCII codée en base 64 à partir d'une chaîne de données binaires.</dd>
- <dt>{{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}</dt>
- <dd>Annule l'exécution répétée définie en utilisant {{domxref("WindowOrWorkerGlobalScope.setInterval ()")}}.</dd>
- <dt>{{domxref("WindowOrWorkerGlobalScope.clearTimeout()")}}</dt>
- <dd>Annule l'exécution différée définie en utilisant {{domxref("WindowOrWorkerGlobalScope.setTimeout ()")}}.</dd>
- <dt>{{domxref("WindowOrWorkerGlobalScope.createImageBitmap()")}}</dt>
- <dd>Accepte une variété de sources d'images différentes, et renvoie un {{domxref("Promise")}} qui se résout en une {{domxref("ImageBitmap")}}. En option, la source est détourée avec le rectangle des pixels d'origine en (sx, sy) et de largeur sw, et de hauteur sh.</dd>
- <dt>{{domxref("WindowOrWorkerGlobalScope.fetch()")}}</dt>
- <dd>Démarre le processus de récupération d'une ressource à partir du réseau.</dd>
- <dt>{{domxref("EventTarget.removeEventListener")}}</dt>
- <dd>Supprime un gestionnaire d'événement de la fenêtre.</dd>
- <dt>{{domxref("WindowOrWorkerGlobalScope.setInterval()")}}</dt>
- <dd>Planifie une fonction à exécuter à chaque fois qu'un nombre donné de millisecondes s'est écoulé.</dd>
- <dt>{{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}</dt>
- <dd>Planifie une fonction à exécuter dans un laps de temps donné.</dd>
-</dl>
-
-<h3 id="Méthodes_obsolètes">Méthodes obsolètes</h3>
-
-<dl>
- <dt>{{domxref("Window.showModalDialog()")}} {{obsolete_inline}}</dt>
- <dd>Affiche un dialogue modal. <strong>Cette méthode a été complètement supprimée dans Chrome 43, et dans Firefox 55</strong>.</dd>
-</dl>
-
-<h2 id=".C3.89v.C3.A8nements">Gestionnaires d'évènements</h2>
-
-<p>Ce sont des propriétés de l'objet window qui peuvent être définies pour établir des gestionnaires d'événements pour les différentes choses qui peuvent se produire dans la fenêtre et qui pourraient être intéressantes.</p>
-
-<p><em>Cette interface hérite des gestionnaires d'événements de l'interface {{domxref("EventTarget")}} et elle implémente les gestionnaires d'événements de {{domxref("WindowEventHandlers")}}.</em></p>
-
-<div class="note">
-<p><strong>Note :</strong> à partir de {{Gecko ("9.0")}}, vous pouvez maintenant utiliser la syntaxe <code>if ("onabort" in window)</code> pour déterminer si une propriété de gestionnaire d'événements donnée existe ou non. Cela est dû au fait que les interfaces du gestionnaire d'événements ont été mises à jour pour être des interfaces Web IDL correctes. Voir les gestionnaires d'événements DOM pour plus de détails.</p>
-</div>
-
-<dl>
- <dt>{{domxref("GlobalEventHandlers.onabort")}}</dt>
- <dt> </dt>
- <dd>Appelé quand le chargement d'une ressource a été avorté, comme par le fait qu'un utilisateur annule un chargement alors qu'il était encore en cours.</dd>
-</dl>
-
-<dl>
- <dt>{{domxref("WindowEventHandlers.onafterprint")}}</dt>
- <dd>Appelé lorsque la boîte de dialogue d'impression est fermée. Voir l'événement {{event ("afterprint")}}.</dd>
- <dt>{{domxref("WindowEventHandlers.onbeforeprint")}}</dt>
- <dd>Appelé lorsque la boîte de dialogue d'impression est ouverte. Voir l'événement {{event ("beforeprint")}}.</dd>
- <dt>{{domxref("Window.onbeforeinstallprompt")}}</dt>
- <dd>Propriété de gestionnaire d'événements qui est déclenchée avant qu'un utilisateur ne soit invité à enregistrer un site Web sur un écran d'accueil sur mobile.</dd>
- <dt>{{domxref("WindowEventHandlers.onbeforeunload")}}</dt>
- <dd>Propriété de gestionnaire d'événements pour les événements avant-déchargement dans la fenêtre.</dd>
-</dl>
-
-<dl>
- <dt>{{domxref("GlobalEventHandlers.onblur")}}</dt>
- <dd>Appelé après que la fenêtre a perdu la focalisation, comme en raison d'une fenêtre contextuelle.</dd>
-</dl>
-
-<dl>
- <dt>{{domxref("GlobalEventHandlers.onchange")}}</dt>
- <dd>Propriété de gestionnaire d'événements pour les événements de changement dans la fenêtre.</dd>
-</dl>
-
-<dl>
- <dt>{{domxref("GlobalEventHandlers.onclick")}}</dt>
- <dd>Appelé après qu'un QUELCONQUE bouton de la souris est pressé &amp; relâché.</dd>
-</dl>
-
-<dl>
- <dt>{domxref("GlobalEventHandlers.ondblclick")}}</dt>
- <dd>Appelé quand un double clic est fait avec un QUELCONQUE bouton de la souris.</dd>
- <dt>{{domxref("GlobalEventHandlers.onclose")}}</dt>
- <dd>Appelé après la fermeture de la fenêtre.</dd>
-</dl>
-
-<dl>
- <dt>{{domxref("GlobalEventHandlers.oncontextmenu")}}</dt>
- <dd>Appelé lorsque le bouton DROIT de la souris est enfoncé.</dd>
-</dl>
-
-<dl>
- <dt>{{domxref("Window.ondevicelight")}}</dt>
- <dd>Propriété de gestionnaire d'événements pour tous les changements de niveaux de luminosité ambiante.</dd>
- <dt>{{domxref("Window.ondevicemotion")}} {{gecko_minversion_inline("6.0")}}</dt>
- <dd>Appelé si l'accéléromètre détecte un changement (pour les appareils mobiles).</dd>
- <dt>{{domxref("Window.ondeviceorientation")}} {{gecko_minversion_inline("6.0")}}</dt>
- <dd>Appelé lorsque l'orientation est modifiée (pour les appareils mobiles).</dd>
- <dt>{{domxref("Window.ondeviceorientationabsolute")}} {{non-standard_inline}} Chrome only</dt>
- <dd>Propriété de gestionnaire d'événements pour tout changement d'orientation de l'appareil.</dd>
- <dt>{{domxref("Window.ondeviceproximity")}}</dt>
- <dd>Propriété de gestionnaire d'événement pour l'événement de proximité de l'appareil.</dd>
-</dl>
-
-<dl>
- <dt>{{domxref("GlobalEventHandlers.onerror")}}</dt>
- <dd>Appelé lorsqu'une ressource ne se charge pas OU lorsqu'une erreur se produit lors de l'exécution. Voir l'événement {{event("error")}}.</dd>
-</dl>
-
-<dl>
- <dt>{{domxref("GlobalEventHandlers.onfocus")}}</dt>
- <dd>Appelé après que la fenêtre a reçu ou récupéré la focalisation. Voir les événements {{event("focus")}}.</dd>
-</dl>
-
-<dl>
- <dt>{{domxref("WindowEventHandlers.onhashchange")}} {{gecko_minversion_inline("1.9.2")}}</dt>
- <dd>Propriété de gestionnaire d'événements pour les événements {{event('hashchange')}} dans la fenêtre ; appelé lorsque la partie de l'URL après la marque hash ("#") change.</dd>
- <dt>{{domxref("Window.onappinstalled")}}</dt>
- <dd>Appelé lorsque la page est installée en tant que webapp. Voir l'événement {{event('appinstalled')}}.</dd>
- <dt>{{domxref("Window.ongamepadconnected")}}</dt>
- <dd>Représente un gestionnaire d'événements qui sera exécuté lorsqu'une manette de jeu est branchée (lorsque l'événement {{event('gamepadconnected')}} se déclenche).</dd>
- <dt>{{domxref("Window.ongamepaddisconnected")}}</dt>
- <dd>Représente un gestionnaire d'événements qui s'exécutera quand une manette de jeu est débranchée (lorsque l'événement {{event('gamepaddisconnected')}} se déclenche).</dd>
- <dt>{{domxref("Window.oninput")}}</dt>
- <dd>Appelée lorsque la valeur d'un élément &lt;input&gt; change.</dd>
- <dt>{{domxref("GlobalEventHandlers.onkeydown")}}</dt>
- <dd>Appelé lorsque vous commencez à presser une touche QUELCONQUE. Voir l'événement {{event("keydown")}}.</dd>
-</dl>
-
-<dl>
- <dt>{{domxref("GlobalEventHandlers.onkeypress")}}</dt>
- <dd>Appelé lorsqu'une touche (à l'exception de Shift, Fn et CapsLock) est en position pressée. Voir l'événement {{event("keypress")}}.</dd>
-</dl>
-
-<dl>
- <dt>{{domxref("GlobalEventHandlers.onkeyup")}}</dt>
- <dd>Appelé lorsque vous avez fini de relâcher une touche QUELCONQUE. Voir l'événement {{event("keyup")}}.</dd>
-</dl>
-
-<dl>
- <dt>{{domxref("WindowEventHandlers.onlanguagechange")}}</dt>
- <dd>Propriété de gestionnaire d'événements pour les événements {{event("languagechange")}} dans la fenêtre.</dd>
- <dt>{{domxref("GlobalEventHandlers.onload")}}</dt>
- <dd>Appelé après que toutes les ressources et les DOM ont été entièrement chargés. NE SERA PAS appelé lorsque la page est chargée à partir du cache, comme avec le bouton arrière.</dd>
-</dl>
-
-<dl>
- <dt>{{domxref("GlobalEventHandlers.onmousedown")}}</dt>
- <dd>Appelé quand un bouton QUELCONQUE de la souris est pressé.</dd>
-</dl>
-
-<dl>
- <dt>{{domxref("GlobalEventHandlers.onmousemove")}}</dt>
- <dd>Appelé en continu quand la souris est déplacée dans la fenêtre.</dd>
-</dl>
-
-<dl>
- <dt>{{domxref("GlobalEventHandlers.onmouseout")}}</dt>
- <dd>Appelé lorsque le pointeur quitte la fenêtre.</dd>
-</dl>
-
-<dl>
- <dt>{{domxref("GlobalEventHandlers.onmouseover")}}</dt>
- <dd>Appelé lorsque le pointeur entre dans la fenêtre.</dd>
-</dl>
-
-<dl>
- <dt>{{domxref("GlobalEventHandlers.onmouseup")}}</dt>
- <dd>Appelé quand un bouton QUELCONQUE de la souris est relâché.</dd>
-</dl>
-
-<dl>
- <dt>{{domxref("Window.onmozbeforepaint")}} {{gecko_minversion_inline("2.0")}}</dt>
- <dd>Propriété de gestionnaire d'événements pour l'événement MozBeforePaint, qui est déclenché avant de repeindre la fenêtre si l'événement a été demandé par un appel à la méthode {{domxref("Window.mozRequestAnimationFrame()")}}.</dd>
- <dt>{{domxref("WindowEventHandlers.onoffline")}}</dt>
- <dd>Appelé lorsque la connexion réseau est perdue. Voir l'événement {{event("offline")}}.</dd>
- <dt>{{domxref("WindowEventHandlers.ononline")}}</dt>
- <dd>Appelé lorsque la connexion réseau est établie. Voir l'événement {{event("online")}}.</dd>
- <dt>{{domxref("WindowEventHandlers.onpagehide")}}</dt>
- <dd>Appelé lorsque l'utilisateur quitte la page, avant l'événement onunload. Voir l'événement {{event("pagehide")}}.</dd>
- <dt>{{domxref("WindowEventHandlers.onpageshow")}}</dt>
- <dd>Appelé après toutes les ressources et les DOM ont été entièrement chargés. Voir l'événement {{event("pageshow")}}.</dd>
- <dt>{{domxref("Window.onpaint")}}</dt>
- <dd>Propriété de gestionnaire d'évènement pour les évènements de dessin de la fenêtre.</dd>
-</dl>
-
-<dl>
- <dt>{{domxref("WindowEventHandlers.onpopstate")}} {{gecko_minversion_inline("2.0")}}</dt>
- <dd>Appelé quand le bouton arrière est pressé.</dd>
- <dt>{{domxref("Window.onrejectionhandled")}} {{experimental_inline}}</dt>
- <dd>Gestionnaire d'événements pour les événements de rejet {{jsxref("Promise")}} gérés.</dd>
- <dt>{{domxref("GlobalEventHandlers.onreset")}}</dt>
- <dd>Appelé lorsqu'un formulaire est réinitialisé</dd>
-</dl>
-
-<dl>
- <dt>{{domxref("GlobalEventHandlers.onresize")}}</dt>
- <dd>Appelé en continu lorsque vous redimensionnez la fenêtre.</dd>
-</dl>
-
-<dl>
- <dt>{{domxref("GlobalEventHandlers.onscroll")}}</dt>
- <dd>Appelé lorsque la barre de défilement est déplacée par un moyen QUELCONQUE. Si la ressource correspond entièrement à la fenêtre, cet événement ne peut pas être invoqué.</dd>
-</dl>
-
-<dl>
- <dt>{{domxref("GlobalEventHandlers.onwheel")}}</dt>
- <dd>Appelé lorsque la roue de la souris est tournée autour d'un axe quelconque.</dd>
- <dt>{{domxref("GlobalEventHandlers.onselect")}}</dt>
- <dd>Appelé après le texte dans un champ de saisie est sélectionné.</dd>
-</dl>
-
-<dl>
- <dt>{{domxref("GlobalEventHandlers.onselectionchange")}}</dt>
- <dd>Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("selectionchange")}} est déclenché.</dd>
- <dt>{{domxref("WindowEventHandlers.onstorage")}}</dt>
- <dd>Appelé en cas de changement dans le stockage de session ou le stockage local. Voir l'événement {{event("storage")}}.</dd>
- <dt>{{domxref("GlobalEventHandlers.onsubmit")}}</dt>
- <dd>Appelé lorsqu'un formulaire est soumis.</dd>
-</dl>
-
-<dl>
- <dt>{{domxref("WindowEventHandlers.onunhandledrejection")}} {{experimental_inline}}</dt>
- <dd>Gestionnaire d'événements pour les événements de rejet {{jsxref("Promise")}} non gérés.</dd>
- <dt>{{domxref("WindowEventHandlers.onunload")}}</dt>
- <dd>Appelé lorsque l'utilisateur quitte la page.</dd>
-</dl>
-
-<dl>
- <dt>{{domxref("Window.onuserproximity")}}</dt>
- <dd>Propriété de gestionnaire d'événements pour les événements de proximité d'utilisateur.</dd>
- <dt>{{domxref("Window.onvrdisplayconnect")}}</dt>
- <dd>Représente un gestionnaire d'événements qui s'exécutera lorsqu'un périphérique RV compatible a été connecté à l'ordinateur (lorsque l'événement {{event("vrdisplayconnected")}} se déclenche).</dd>
- <dt>{{domxref("Window.onvrdisplaydisconnect")}}</dt>
- <dd>Représente un gestionnaire d'événements qui s'exécutera lorsqu'un périphérique RV compatible a été déconnecté de l'ordinateur (lorsque l'événement {{event("vrdisplaydisconnected")}} se déclenche).</dd>
- <dt>{{domxref("Window.onvrdisplayactivate")}}</dt>
- <dd>Représente un gestionnaire d'événements qui s'exécutera lorsqu'un affichage peut être présenté (lorsque l'événement {{event("vrdisplayactivate")}} se déclenche), par exemple si un HMD a été déplacé pour sortir de veille, ou a été réveillé en le mettant sur soi.</dd>
- <dt>{{domxref("Window.onvrdisplaydeactivate")}}</dt>
- <dd>Représente un gestionnaire d'événements qui s'exécute lorsqu'un affichage ne peut plus être présenté (lorsque l'événement {{event ("vrdisplaydeactivate")}} se déclenche), par exemple si un HMD est passé en veille ou en hibernation en raison d'une période d'inactivité.</dd>
- <dt>{{domxref("Window.onvrdisplayblur")}}</dt>
- <dd>Représente un gestionnaire d'événements qui s'exécutera lorsque la présentation sur un affichage a été suspendue pour une raison quelconque par le navigateur, le SE ou le matériel de RV (lorsque l'événement {{event("vrdisplayblur")}} se déclenche - par exemple, lorsque l'utilisateur interagit avec un menu système ou un navigateur, pour empêcher le suivi ou la perte d'expérience.</dd>
- <dt>{{domxref("Window.onvrdisplayfocus")}}</dt>
- <dd>Représente un gestionnaire d'événements qui sera exécuté lorsque la présentation sur un afficheur a repris après avoir perdu la focalisation (lorsque l'événement {{event("vrdisplayfocus")}} se déclenche).</dd>
- <dt>{{domxref("Window.onvrdisplaypresentchange")}}</dt>
- <dd>Représente un gestionnaire d'événements qui s'exécute lorsque l'état de présentation d'un périphérique de RV change, c'est-à-dire qu'il passe de présentation à non présentation, ou vice versa (lorsque l'événement {{event("vrdisplaypresentchange")}} se déclenche).</dd>
-</dl>
-
-<h2 id="Constructeurs">Constructeurs</h2>
-
-<p>Voir aussi les <a href="/fr-FR/docs/DOM/DOM_Reference">Interfaces DOM</a>.</p>
-
-<dl>
- <dt>{{domxref("DOMParser")}}</dt>
- <dd><code>DOMParser</code> peut analyser un source XML ou HTML stocké dans une chaîne de caractères en un <a href="/fr-FR/docs/DOM/document">Document</a> DOM. <code>DOMParser</code> est spécifié dans <a href="https://w3c.github.io/DOM-Parsing/">DOM Parsing et Serialization</a>.</dd>
- <dt>{{domxref("Window.GeckoActiveXObject")}}</dt>
- <dd>{{todo("NeedsContents")}}</dd>
- <dt>{{domxref("Image")}}</dt>
- <dd>Used for creating an {{domxref("HTMLImageElement")}}.</dd>
- <dt>{{domxref("Option")}}</dt>
- <dd>Used for creating an {{domxref("HTMLOptionElement")}}</dd>
- <dt>{{domxref("Window.QueryInterface")}}</dt>
- <dd>{{todo("NeedsContents")}}</dd>
- <dt>{{domxref("Window.XMLSerializer")}}</dt>
- <dd>{{todo("NeedsContents")}}</dd>
- <dt>{{domxref("Worker")}}</dt>
- <dd>Used for creating a <a href="/en-US/docs/DOM/Using_web_workers">Web worker</a></dd>
- <dt>{{domxref("Window.XPCNativeWrapper")}}</dt>
- <dd>{{todo("NeedsContents")}}</dd>
- <dt>{{domxref("Window.XPCSafeJSObjectWrapper")}}</dt>
- <dd>{{todo("NeedsContents")}}</dd>
-</dl>
-
-<h2 id="Interfaces">Interfaces</h2>
-
-<p>Voir <a href="/fr/docs/Web/API/Document_Object_Model">Référence du DOM</a></p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Mozilla/Working_with_windows_in_chrome_code">Travailler avec des fenêtres dans le code chrome</a></li>
-</ul>
+{{APIRef}}
+
+L'objet `window` représente une fenêtre contenant un document DOM ; la propriété `document` pointe vers le [document DOM](/fr-FR/docs/DOM/document) chargé dans cette fenêtre. Une fenêtre pour un document donné peut être obtenue en utilisant la propriété {{Domxref("document.defaultView")}}.
+
+Cette section fournit une brève référence pour toutes les méthodes, propriétés et événements disponibles via l'objet DOM `window`. L'objet `window` implémente l'interface `Window`, qui à son tour hérite de l'interface [`AbstractView`](http://www.w3.org/TR/DOM-Level-2-Views/views.html#Views-AbstractView). Certaines fonctions globales supplémentaires, espaces de noms, objets, interfaces et constructeurs, non typiquement associés à la fenêtre, mais disponibles sur celle-ci, sont répertoriés dans la [Référence JavaScript](/fr-FR/docs/JavaScript/Reference) et la [Référence DOM](/fr-FR/docs/Web/API/Document_Object_Model).
+
+Dans un navigateur utilisant des onglets, comme Firefox, chaque onglet contient son propre objet `window` (et si vous écrivez une extension, la fenêtre du navigateur elle-même est un objet `window` séparé — consultez [Travailler avec des fenêtres dans du code chrome](/fr/docs/Mozilla/Working_with_windows_in_chrome_code#Fen.C3.AAtres_de_contenu) pour plus d'informations). C'est-à-dire que l'objet `window` n'est pas partagé entre les onglets dans la même fenêtre. Certaines méthodes, notamment {{ Domxref("window.resizeTo") }} et {{ Domxref("window.resizeBy") }}, s'appliquent à la fenêtre entière et non à l'onglet spécifique auquel l'objet `window` appartient. En général, ce qui ne peut raisonnablement pas concerner un onglet se rapporte à la fenêtre à la place.
+
+{{InheritanceDiagram}}
+
+## Propriétés
+
+_Cette interface hérite des propriétés de l'interface {{domxref("EventTarget")}} et implémente les propriétés des mixins {{domxref("WindowOrWorkerGlobalScope")}} et {{domxref("WindowEventHandlers")}}._
+
+Notez que les propriétés qui sont des objets (par exemple, pour redéfinir le prototype d'éléments intrinsèques) sont répertoriées dans une section distincte ci-dessous.
+
+- {{domxref("Window.closed")}} {{Non-standard_inline}}{{readOnlyInline}}
+  - : Cette propriété indique si la fenêtre en cours est fermée ou non.
+- {{domxref("Window.console")}} {{ReadOnlyInline}}
+  - : Renvoie une référence à l'objet console qui fournit l'accès à la console de débogage du navigateur.
+- {{domxref("Window.content")}} et `Window._content` {{Non-standard_inline}} {{obsolete_inline}}{{ReadOnlyInline}}
+  - : Renvoie une référence à l'élément de contenu dans la fenêtre en cours. Depuis Firefox 57 (initialement Nightly uniquement), les deux versions sont uniquement disponibles à partir du code chrome (privilégié) et ne sont plus disponibles sur le Web.
+- {{domxref("Window.controllers")}}{{non-standard_inline}}{{ReadOnlyInline}}
+  - : Renvoie les objets du contrôleur XUL pour la fenêtre chrome en cours.
+- {{domxref("Window.customElements")}}{{ReadOnlyInline}}
+  - : renvoie une référence à l'objet {{domxref("CustomElementRegistry")}}, qui peut être utilisée pour enregistrer de nouveaux [éléments personnalisés](/fr-FR/docs/Web/Web_Components/Using_custom_elements) et obtenir des informations à propos d'éléments personnalisés précédemment enregistrés.
+- {{domxref("Window.crypto")}} {{readOnlyInline}}
+  - : Retourne l'objet crypto du navigateur.
+- {{domxref("Window.defaultStatus")}} {{Obsolete_inline("gecko23")}}
+  - : Récupère / définit le texte de la barre d'état pour la fenêtre donnée.
+- {{domxref("Window.devicePixelRatio")}} {{non-standard_inline}}{{ReadOnlyInline}}
+  - : Renvoie le rapport entre les pixels physiques et les pixels indépendants du périphérique dans l'affichage en cours.
+- {{domxref("Window.dialogArguments")}} {{ReadOnlyInline}}
+  - : Récupère les arguments passés à la fenêtre (si c'est une boîte de dialogue) au moment où {{domxref ("window.showModalDialog()")}} a été appelé. C'est un {{Interface("nsIArray")}}.
+- {{domxref("Window.directories")}} {{obsolete_inline}}
+  - : Synonyme de {{domxref("window.personalbar")}}
+- {{domxref("Window.document")}} {{ReadOnlyInline}}
+  - : Renvoie une référence au document que la fenêtre contient.
+- {{domxref("Window.DOMMatrix")}} {{readOnlyInline}} {{experimental_inline}}
+  - : Renvoie une référence à un objet {{domxref("DOMMatrix")}} représentant des matrices 4x4, adapté aux opérations 2D et 3D.
+- {{domxref("Window.DOMMatrixReadOnly")}} {{readOnlyInline}} {{experimental_inline}}
+  - : Renvoie une référence à un objet {{domxref("DOMMatrixReadOnly")}} représentant des matrices 4x4, adapté aux opérations 2D et 3D.
+- {{domxref("Window.DOMPoint")}} {{readOnlyInline}} {{experimental_inline}}
+  - : Renvoie une référence à un objet {{domxref("DOMPoint")}} représentant un point 2D ou 3D dans un système de coordonnées.
+- {{domxref("Window.DOMPointReadOnly")}} {{readOnlyInline}} {{experimental_inline}}
+  - : Renvoie une référence à un objet {{domxref("DOMPointReadOnly")}} représentant un point 2D ou 3D dans un système de coordonnées.
+- {{domxref("Window.DOMQuad")}} {{readOnlyInline}} {{experimental_inline}}
+  - : Renvoie une référence à un objet {{domxref("DOMQuad")}}, qui fournit un objet quadrilatère, c'est-à-dire, ayant quatre coins et quatre côtés.
+- {{domxref("Window.DOMRect")}} {{readOnlyInline}} {{experimental_inline}}
+  - : Returns a reference to a {{domxref("DOMRect")}} object, which represents a rectangle.
+- {{domxref("Window.DOMRectReadOnly")}} {{readOnlyInline}} {{experimental_inline}}
+  - : Renvoie une référence à un objet {{domxref("DOMRectReadOnly")}} représentant un rectangle.
+- {{domxref("Window.frameElement")}} {{readOnlyInline}}
+  - : Renvoie l'élément dans lequel la fenêtre est intégrée, ou null si la fenêtre n'est pas intégrée.
+- {{domxref("Window.frames")}} {{readOnlyInline}}
+  - : Renvoie un tableau des sous-cadres dans la fenêtre en cours.
+- {{domxref("Window.fullScreen")}} {{gecko_minversion_inline("1.9")}}
+  - : Cette propriété indique si la fenêtre est affichée en plein écran ou non.
+- {{domxref("Window.globalStorage")}} {{gecko_minversion_inline("1.8.1")}} {{Non-standard_inline}} {{Obsolete_inline("gecko13")}}
+  - : Non supporté depuis Gecko 13 (Firefox 13). Utilisez {{domxref("Window.localStorage")}} à la place.
+    Était : divers objets de stockage utilisés pour stocker des données sur plusieurs pages.
+- {{domxref("Window.history")}} {{ReadOnlyInline}}
+  - : Retourne une référence à l'objet d'historique.
+- {{domxref("Window.innerHeight")}} {{readOnlyInline}}
+  - : Récupère la hauteur de la zone de contenu de la fenêtre du navigateur, y compris, si affichée, la barre de défilement horizontale.
+- {{domxref("Window.innerWidth")}} {{readOnlyInline}}
+  - : Récupère la largeur de la zone de contenu de la fenêtre du navigateur, y compris, si affichée, la barre de défilement verticale.
+- {{domxref("Window.isSecureContext")}} {{readOnlyInline}}
+  - : Indique si un contexte est capable d'utiliser des fonctionnalités nécessitant des contextes sécurisés.
+- {{domxref("Window.length")}} {{readOnlyInline}}
+  - : Renvoie le nombre de cadres dans la fenêtre. Voir également {{domxref("window.frames")}}.
+- {{domxref("Window.location")}}
+  - : Récupère/définit l'emplacement, ou l'URL en cours, de l'objet de fenêtre.
+- {{domxref("Window.locationbar")}} {{ReadOnlyInline}}
+  - : Renvoie l'objet de la barre d'adresse, dont la visibilité peut être inversée dans la fenêtre.
+- {{domxref("Window.localStorage")}} {{readOnlyInline}}{{gecko_minversion_inline("1.9.1")}}
+  - : Renvoie une référence à l'objet de stockage local utilisé pour stocker les données accessibles uniquement par l'origine qui les a créées.
+- {{domxref("Window.menubar")}} {{ReadOnlyInline}}
+  - : Renvoie l'objet barre de menus, dont la visibilité peut être inversée dans la fenêtre.
+- {{domxref("Window.messageManager")}} {{gecko_minversion_inline("2.0")}}
+  - : Renvoie l'objet [gestionnaire de messages](/fr-FR/docs/The_message_manager) pour cette fenêtre.
+- {{domxref("Window.mozAnimationStartTime")}} {{ReadOnlyInline}}{{gecko_minversion_inline("2.0")}} {{Deprecated_inline}}
+  - : Le temps en millisecondes depuis l'instant auquel le cycle d'animation en cours a commencé.
+- {{domxref("Window.mozInnerScreenX")}} {{ReadOnlyInline}}{{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}}
+  - : Renvoie la coordonnée horizontale (X) du coin supérieur gauche du point de vue de la fenêtre, en coordonnées d'écran. Cette valeur est restituée en pixels CSS. Voir `mozScreenPixelsPerCSSPixel` dans {{interface("nsIDOMWindowUtils")}} pour un facteur de conversion pour s'adapter aux pixels de l'écran si nécessaire.
+- {{domxref("Window.mozInnerScreenY")}} {{ReadOnlyInline}} {{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}}
+  - : Renvoie la coordonnée verticale (Y) du coin supérieur gauche du point de vue de la fenêtre, en coordonnées d'écran. Cette valeur est indiquée en pixels CSS. Voir `mozScreenPixelsPerCSSPixel` pour un facteur de conversion pour s'adapter aux pixels de l'écran si nécessaire.
+- {{domxref("Window.mozPaintCount")}} {{non-standard_inline}}{{ReadOnlyInline}} {{gecko_minversion_inline("2.0")}}
+  - : Renvoie le nombre de fois où le document en cours a été réaffiché à l'écran dans cette fenêtre. Cela peut être utilisé pour calculer les performances d'affichage.
+- {{domxref("Window.name")}}
+  - : Récupère / définit le nom de la fenêtre.
+- {{domxref("Window.navigator")}} {{readOnlyInline}}
+  - : Renvoie une référence à l'objet navigateur.
+- {{domxref("Window.NetworkInformation")}} {{readOnlyInline}} {{experimental_inline}}
+  - : Renvoie une référence à l'interface {{domxref("NetworkInformation")}}, qui fournit des informations sur la connexion qu'un périphérique est en train d'utiliser pour communiquer avec le réseau et fournit un moyen pour les scripts d'être notifiés si le type de connexion change.
+- {{domxref("Window.opener")}}
+  - : Renvoie une référence à la fenêtre qui a ouvert la fenêtre en cours.
+- {{domxref("Window.orientation")}}{{non-standard_inline}}{{deprecated_inline}}{{readOnlyInline}}
+  - : Renvoie l'orientation en degrés (par incréments de 90 degrés) du point de vue par rapport à l'orientation naturelle du périphérique.
+- {{domxref("Window.outerHeight")}} {{readOnlyInline}}
+  - : Récupère la hauteur de l'extérieur de la fenêtre du navigateur.
+- {{domxref("Window.outerWidth")}} {{readOnlyInline}}
+  - : Récupère la largeur de l'extérieur de la fenêtre du navigateur.
+- {{domxref("Window.scrollX","Window.pageXOffset")}} {{readOnlyInline}}
+  - : Un alias pour {{domxref("window.scrollX")}}.
+- {{domxref("Window.scrollY","Window.pageYOffset")}}{{readOnlyInline}}
+  - : Un alias pour {{domxref("window.scrollY")}}
+- {{domxref("Window.sessionStorage")}} {{readOnlyInline}}
+  - : Renvoie une référence à l'objet de stockage de session utilisé pour stocker les données accessibles uniquement par l'origine qui les a créées..
+- {{domxref("Window.parent")}} {{readOnlyInline}}
+  - : Renvoie une référence au parent de la fenêtre ou du sous-cadre en cours.
+- {{domxref("Window.performance")}} {{readOnlyInline}}
+  - : Renvoie un objet {{domxref("Performance")}}, qui inclut les attributs {{domxref("Performance.timing", "timing")}} et {{domxref("Performance.navigation", "navigation")}}, dont chacun est un objet fournissant des données liées aux performances. Voir aussi [Utilisation de Chronométrage de Navigation](/fr-FR/docs/Web/API/Navigation_timing_API/Using_Navigation_Timing) pour plus d'informations et d'exemples.
+- {{domxref("Window.personalbar")}} {{readOnlyInline}}
+  - : Renvoie l'objet barre personnelle, dont la visibilité peut être inversée dans la fenêtre.
+- {{domxref("Window.pkcs11")}} {{obsolete_inline(29)}}
+  - : Fournissait précédemment un accès pour installer et supprimer des modules PKCS11.
+- {{domxref("Window.returnValue")}}
+  - : La valeur de retour à renvoyer à la fonction qui a appelé {{domxref("window.showModalDialog()")}} pour afficher la fenêtre comme boîte de dialogue modale.
+- {{domxref("Window.screen")}} {{readOnlyInline}}
+  - : Renvoie une référence à l'objet écran associé à la fenêtre.
+- {{domxref("Window.screenX")}} {{readOnlyInline}}
+  - : Renvoie la distance horizontale de la bordure gauche du navigateur de l'utilisateur à partir du côté gauche de l'écran.
+- {{domxref("Window.screenY")}} {{readOnlyInline}}
+  - : Renvoie la distance verticale de la bordure supérieure du navigateur de l'utilisateur à partir du haut de l'écran.
+- {{domxref("Window.scrollbars")}} {{readOnlyInline}}
+  - : Renvoie l'objet barres de défilement, dont la visibilité peut être modifiée dans la fenêtre.
+- {{domxref("Window.scrollMaxX")}}{{non-standard_inline}}{{ReadOnlyInline}}
+  - : Le décalage maximal dont la fenêtre peut étre décalée horizontalement, c'est-à-dire la largeur du document moins la largeur du point de vue.
+- {{domxref("Window.scrollMaxY")}}{{non-standard_inline}}{{ReadOnlyInline}}
+  - : Le décalage maximal dont la fenêtre peut étre décalée verticalement (c'est-à-dire, la hauteur du document moins la hauteur du point de vue).
+- {{domxref("Window.scrollX")}} {{readOnlyInline}}
+  - : Renvoie le nombre de pixels dont le document a déjà été décalé horizontalement.
+- {{domxref("Window.scrollY")}} {{readOnlyInline}}
+  - : Renvoie le nombre de pixels dont le document a déjà été décalé verticalement.
+- {{domxref("Window.self")}} {{ReadOnlyInline}}
+  - : Renvoie une référence d'objet à l'objet fenêtre lui-même.
+- {{domxref("Window.sessionStorage")}}
+  - : Renvoie un objet de stockage pour stocker des données dans une session de page unique.
+- {{domxref("Window.sidebar")}} {{non-standard_inline}}{{ReadOnlyInline}}
+  - : Renvoie une référence à l'objet fenêtre de la barre latérale.
+- {{domxref("Window.speechSynthesis")}} {{ReadOnlyInline}}
+  - : Renvoie un objet {{domxref("SpeechSynthesis")}}, qui est le point d'entrée pour l'utilisation de la fonctionnalité de synthèse vocale de l'[API Web Speech](/fr-FR/docs/Web/API/Web_Speech_API).
+- {{domxref("Window.status")}}
+  - : Récupère/définit le texte dans la barre d'état en bas du navigateur.
+- {{domxref("Window.statusbar")}} {{readOnlyInline}}
+  - : Renvoie l'objet barre d'état, dont la visibilité peut être inversée dans la fenêtre.
+- {{domxref("Window.toolbar")}} {{readOnlyInline}}
+  - : Renvoie l'objet barre d'outils, dont la visibilité peut être inversée dans la fenêtre.
+- {{domxref("Window.top")}} {{readOnlyInline}}
+  - : Renvoie une référence à la fenêtre la plus haute dans la hiérarchie des fenêtres. Cette propriété est en lecture seule.
+- {{domxref("Window.visualViewport")}} {{readOnlyInline}}
+  - : Renvoie un objet {{domxref("VisualViewport")}} représentant le point de vue visuel pour une fenêtre donnée.
+- {{domxref("Window.window")}} {{ReadOnlyInline}}
+  - : Renvoie une référence à la fenêtre en cours.
+- `window[0]`,` window[1]`, etc.
+  - : Renvoie une référence à l'objet `window` dans les cadres. Voir {{domxref("Window.frames")}}} pour plus de détails.
+
+### Propriétés implémentées depuis ailleurs
+
+- {{domxref("WindowOrWorkerGlobalScope.caches")}} {{readOnlyinline}}
+  - : Renvoie l'objet {{domxref("CacheStorage")}} associé au contexte en cours. Cet objet active des fonctionnalités telles que le stockage des ressources pour une utilisation hors connexion, et la génération de réponses personnalisées aux requêtes.
+- {{domxref("WindowOrWorkerGlobalScope.indexedDB")}} {{readonlyInline}}
+  - : Fournit un mécanisme permettant aux applications d'accéder de manière asynchrone à des bases de données indexées ; renvoie un objet {{domxref("IDBFactory")}}.
+- {{domxref("WindowOrWorkerGlobalScope.isSecureContext")}} {{readOnlyinline}}
+  - : Renvoie un booléen indiquant si le contexte actuel est sécurisé (`true`) ou non (`false`).
+- {{domxref("WindowOrWorkerGlobalScope.origin")}} {{readOnlyinline}}
+  - : Renvoie l'origine de l'objet global, sérialisé comme une chaîne. (Cela ne semble pas encore être implémenté dans aucun navigateur.)
+
+## Méthodes
+
+_Cette interface hérite des méthodes de l'interface {{domxref("EventTarget")}} et implémente les méthodes de {{domxref("WindowOrWorkerGlobalScope")}} et {{domxref("EventTarget")}}._
+
+- {{domxref("Window.alert()")}}
+  - : Affiche une boîte de message d'alerte.
+- {{domxref("Window.back()")}} {{Non-standard_inline}} {{obsolete_inline}}
+  - : Recule d'une page dans l'historique de la fenêtre.
+- {{domxref("Window.blur()")}}
+  - : Déplace la focalisation hors de la fenêtre.
+- {{domxref("Window.cancelAnimationFrame()")}} {{experimental_inline}}
+  - : Vous permet d'annuler un rappel précédemment planifié avec {{domxref("Window.requestAnimationFrame")}}.
+- {{domxref("Window.cancelIdleCallback()")}} {{experimental_inline}}
+  - : Vous permet d'annuler un rappel précédemment planifié avec {{domxref("Window.requestIdleCallback")}}.
+- {{domxref("Window.captureEvents()")}} {{Deprecated_inline}}
+  - : Enregistre la fenêtre pour qu'elle capture tous les évènements du type spécifié.
+- {{domxref("Window.clearImmediate()")}}
+  - : Annule l'exécution répétée définie en utilisant `setImmediate`.
+- {{domxref("Window.close()")}}
+  - : Ferme la fenêtre en cours.
+- {{domxref("Window.confirm()")}}
+  - : Affiche une boîte de dialogue avec un message auquel l'utilisateur doit répondre.
+- {{domxref("Window.disableExternalCapture()")}} {{obsolete_inline(24)}}
+  - : {{todo("NeedsContents")}}
+- {{domxref("Window.dispatchEvent()")}}
+  - : Utilisé pour déclencher un évènement.
+- {{domxref("Window.dump()")}} {{Non-standard_inline}}
+  - : Écrit un message à la console.
+- {{domxref("Window.enableExternalCapture()")}} {{obsolete_inline(24)}}
+  - : {{todo("NeedsContents")}}
+- {{domxref("Window.find()")}}
+  - : Recherche la chaîne de caractères donnée dans une fenêtre.
+- {{domxref("Window.focus()")}}
+  - : Donne la focalisation à la fenêtre en cours.
+- {{domxref("Window.forward()")}} {{Non-standard_inline}} {{obsolete_inline}}
+  - : Avance la fenêtre d'un document dans l'historique.
+- {{domxref("Window.getAttention()")}} {{Non-standard_inline}} {{obsolete_inline}}
+  - : Fait flasher l'icône de l'application.
+- {{domxref("Window.getAttentionWithCycleCount()")}}
+  - : {{todo("NeedsContents")}}
+- {{domxref("Window.getComputedStyle()")}}
+  - : Récupère un style calculé pour l'élément donné. Un style calculé indique les valeurs de toutes les propriétés CSS de l'élément.
+- {{domxref("Window.getDefaultComputedStyle()")}} {{Non-standard_inline}}
+  - : Récupère le style calculé par défaut pour l'élément indiqué, en ignorant les feuilles de style d'auteur.
+- {{domxref("Window.getSelection()")}}
+  - : Renvoie l'objet de sélection représentant les éléments sélectionnés.
+- {{domxref("Window.home()")}} {{Non-standard_inline}} {{obsolete_inline}}
+  - : Renvoie le navigateur à la page d'accueil.
+- {{domxref("Window.matchMedia()")}} {{gecko_minversion_inline("6.0")}}
+  - : Renvoie un objet {{domxref("MediaQueryList")}} représentant la chaîne d'interrogation de média spécifiée.
+- {{domxref("Window.maximize()")}}
+  - : {{todo("NeedsContents")}}
+- {{domxref("Window.minimize()")}} (top-level XUL windows only)
+  - : Minimize la fenêtre.
+- {{domxref("Window.moveBy()")}}
+  - : Déplace la fenêtre en cours de la quantité indiquée.
+- {{domxref("Window.moveTo()")}}
+  - : Déplace la fenêtre vers les coordonnées spécifiées.
+- {{domxref("Window.open()")}}
+  - : Ouvre une nouvelle fenêtre.
+- {{domxref("Window.openDialog()")}} {{Non-standard_inline}} {{obsolete_inline}}
+  - : Ouvre une nouvelle fenêtre de dialogue.
+- {{domxref("Window.postMessage()")}}
+  - : Fournit un moyen sécurisé pour une fenêtre d'envoyer une chaîne de données à une autre fenêtre, qui n'a pas besoin d'être dans le même domaine que la première.
+- {{domxref("Window.prompt()")}}
+  - : Ouvre la boîte de dialogue d'impression du document en cours.
+- {{domxref("Window.prompt()")}}
+  - : Renvoie le texte saisi par l'utilisateur dans une boîte de dialogue à invite.
+- {{domxref("Window.releaseEvents()")}} {{Non-standard_inline}} {{Deprecated_inline}}
+  - : Annule la capture des évènements d'un certain type par la fenêtre.
+- {{domxref("Window.requestAnimationFrame()")}} {{gecko_minversion_inline("2.0")}}
+  - : Indique au navigateur qu'une animation est en cours, en demandant au navigateur de planifier une redessinage de la fenêtre lors de l'image d'animation suivante.
+- {{domxref("Window.requestIdleCallback()")}}  {{experimental_inline}}
+  - : Active la planification de tâches pendant les périodes d'inactivité du navigateur.
+- {{domxref("Window.resizeBy()")}}
+  - : Redimensionne la fenêtre en cours d'une certaine quantité.
+- {{domxref("Window.resizeTo()")}}
+  - : Redimensionne dynamiquement la fenêtre.
+- {{domxref("Window.restore()")}} {{Non-standard_inline}} {{obsolete_inline}}
+  - : {{todo("NeedsContents")}}
+- {{domxref("Window.routeEvent()")}} {{obsolete_inline(24)}}
+  - : {{todo("NeedsContents")}}
+- {{domxref("Window.scroll()")}}
+  - : Fait défiler la fenêtre à un endroit particulier dans le document.
+- {{domxref("Window.scrollBy()")}}
+  - : Fait défiler le document dans la fenêtre de la quantité indiquée.
+- {{domxref("Window.scrollByLines()")}} {{Non-standard_inline}}
+  - : Fait défiler le document du nombre de lignes indiqué.
+- {{domxref("Window.scrollByPages()")}} {{Non-standard_inline}}
+  - : Fait défiler le document en cours du nombre de pages indiqué.
+- {{domxref("Window.scrollTo()")}}
+  - : Fait défiler à un jeu de coordonnées particulier dans le document.
+- {{domxref("Window.setCursor()")}} {{Non-standard_inline}} (top-level XUL windows only)
+  - : Change le curseur pour la fenêtre en cours.
+- {{domxref("Window.setImmediate()")}}
+  - : Exécute une fonction après que le navigateur a terminé d'autres tâches lourdes
+- {{domxref("Window.setResizable()")}} {{Non-standard_inline}}
+  - : Inverse la possibilité pour un utilisateur de redimensionner une fenêtre.
+- {{domxref("Window.sizeToContent()")}} {{Non-standard_inline}}
+  - : Dimensionne la fenêtre en fonction de son contenu.
+- {{domxref("Window.stop()")}}
+  - : Cette méthode arrête le chargement de la fenêtre.
+- {{domxref("Window.updateCommands()")}} {{Non-standard_inline}}
+  - : Met à jour l'état des commandes de la fenêtre chrome en cours (IU).
+
+### Méthodes implémentées depuis ailleurs
+
+- {{domxref("EventTarget.addEventListener()")}}
+  - : Enregistre un gestionnaire d'événement pour un type d'événement spécifique dans la fenêtre.
+- {{domxref("WindowOrWorkerGlobalScope.atob()")}}
+  - : Décode une chaîne de données qui a été codée en utilisant l'encodage en base 64.
+- {{domxref("WindowOrWorkerGlobalScope.btoa()")}}
+  - : Crée une chaîne ASCII codée en base 64 à partir d'une chaîne de données binaires.
+- {{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}
+  - : Annule l'exécution répétée définie en utilisant {{domxref("WindowOrWorkerGlobalScope.setInterval ()")}}.
+- {{domxref("WindowOrWorkerGlobalScope.clearTimeout()")}}
+  - : Annule l'exécution différée définie en utilisant {{domxref("WindowOrWorkerGlobalScope.setTimeout ()")}}.
+- {{domxref("WindowOrWorkerGlobalScope.createImageBitmap()")}}
+  - : Accepte une variété de sources d'images différentes, et renvoie un {{domxref("Promise")}} qui se résout en une {{domxref("ImageBitmap")}}. En option, la source est détourée avec le rectangle des pixels d'origine en (sx, sy) et de largeur sw, et de hauteur sh.
+- {{domxref("WindowOrWorkerGlobalScope.fetch()")}}
+  - : Démarre le processus de récupération d'une ressource à partir du réseau.
+- {{domxref("EventTarget.removeEventListener")}}
+  - : Supprime un gestionnaire d'événement de la fenêtre.
+- {{domxref("WindowOrWorkerGlobalScope.setInterval()")}}
+  - : Planifie une fonction à exécuter à chaque fois qu'un nombre donné de millisecondes s'est écoulé.
+- {{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}
+  - : Planifie une fonction à exécuter dans un laps de temps donné.
+
+### Méthodes obsolètes
+
+- {{domxref("Window.showModalDialog()")}} {{obsolete_inline}}
+  - : Affiche un dialogue modal. **Cette méthode a été complètement supprimée dans Chrome 43, et dans Firefox 55**.
+
+## Gestionnaires d'évènements
+
+Ce sont des propriétés de l'objet window qui peuvent être définies pour établir des gestionnaires d'événements pour les différentes choses qui peuvent se produire dans la fenêtre et qui pourraient être intéressantes.
+
+_Cette interface hérite des gestionnaires d'événements de l'interface {{domxref("EventTarget")}} et elle implémente les gestionnaires d'événements de {{domxref("WindowEventHandlers")}}._
+
+> **Note :** à partir de {{Gecko ("9.0")}}, vous pouvez maintenant utiliser la syntaxe `if ("onabort" in window)` pour déterminer si une propriété de gestionnaire d'événements donnée existe ou non. Cela est dû au fait que les interfaces du gestionnaire d'événements ont été mises à jour pour être des interfaces Web IDL correctes. Voir les gestionnaires d'événements DOM pour plus de détails.
+
+- {{domxref("GlobalEventHandlers.onabort")}}
+
+
+
+  - : Appelé quand le chargement d'une ressource a été avorté, comme par le fait qu'un utilisateur annule un chargement alors qu'il était encore en cours.
+
+<!---->
+
+- {{domxref("WindowEventHandlers.onafterprint")}}
+  - : Appelé lorsque la boîte de dialogue d'impression est fermée. Voir l'événement {{event ("afterprint")}}.
+- {{domxref("WindowEventHandlers.onbeforeprint")}}
+  - : Appelé lorsque la boîte de dialogue d'impression est ouverte. Voir l'événement {{event ("beforeprint")}}.
+- {{domxref("Window.onbeforeinstallprompt")}}
+  - : Propriété de gestionnaire d'événements qui est déclenchée avant qu'un utilisateur ne soit invité à enregistrer un site Web sur un écran d'accueil sur mobile.
+- {{domxref("WindowEventHandlers.onbeforeunload")}}
+  - : Propriété de gestionnaire d'événements pour les événements avant-déchargement dans la fenêtre.
+
+<!---->
+
+- {{domxref("GlobalEventHandlers.onblur")}}
+  - : Appelé après que la fenêtre a perdu la focalisation, comme en raison d'une fenêtre contextuelle.
+
+<!---->
+
+- {{domxref("GlobalEventHandlers.onchange")}}
+  - : Propriété de gestionnaire d'événements pour les événements de changement dans la fenêtre.
+
+<!---->
+
+- {{domxref("GlobalEventHandlers.onclick")}}
+  - : Appelé après qu'un QUELCONQUE bouton de la souris est pressé & relâché.
+
+<!---->
+
+- {domxref("GlobalEventHandlers.ondblclick")}}
+  - : Appelé quand un double clic est fait avec un QUELCONQUE bouton de la souris.
+- {{domxref("GlobalEventHandlers.onclose")}}
+  - : Appelé après la fermeture de la fenêtre.
+
+<!---->
+
+- {{domxref("GlobalEventHandlers.oncontextmenu")}}
+  - : Appelé lorsque le bouton DROIT de la souris est enfoncé.
+
+<!---->
+
+- {{domxref("Window.ondevicelight")}}
+  - : Propriété de gestionnaire d'événements pour tous les changements de niveaux de luminosité ambiante.
+- {{domxref("Window.ondevicemotion")}} {{gecko_minversion_inline("6.0")}}
+  - : Appelé si l'accéléromètre détecte un changement (pour les appareils mobiles).
+- {{domxref("Window.ondeviceorientation")}} {{gecko_minversion_inline("6.0")}}
+  - : Appelé lorsque l'orientation est modifiée (pour les appareils mobiles).
+- {{domxref("Window.ondeviceorientationabsolute")}} {{non-standard_inline}} Chrome only
+  - : Propriété de gestionnaire d'événements pour tout changement d'orientation de l'appareil.
+- {{domxref("Window.ondeviceproximity")}}
+  - : Propriété de gestionnaire d'événement pour l'événement de proximité de l'appareil.
+
+<!---->
+
+- {{domxref("GlobalEventHandlers.onerror")}}
+  - : Appelé lorsqu'une ressource ne se charge pas OU lorsqu'une erreur se produit lors de l'exécution. Voir l'événement {{event("error")}}.
+
+<!---->
+
+- {{domxref("GlobalEventHandlers.onfocus")}}
+  - : Appelé après que la fenêtre a reçu ou récupéré la focalisation. Voir les événements {{event("focus")}}.
+
+<!---->
+
+- {{domxref("WindowEventHandlers.onhashchange")}} {{gecko_minversion_inline("1.9.2")}}
+  - : Propriété de gestionnaire d'événements pour les événements {{event('hashchange')}} dans la fenêtre ; appelé lorsque la partie de l'URL après la marque hash ("#") change.
+- {{domxref("Window.onappinstalled")}}
+  - : Appelé lorsque la page est installée en tant que webapp. Voir l'événement {{event('appinstalled')}}.
+- {{domxref("Window.ongamepadconnected")}}
+  - : Représente un gestionnaire d'événements qui sera exécuté lorsqu'une manette de jeu est branchée (lorsque l'événement {{event('gamepadconnected')}} se déclenche).
+- {{domxref("Window.ongamepaddisconnected")}}
+  - : Représente un gestionnaire d'événements qui s'exécutera quand une manette de jeu est débranchée (lorsque l'événement {{event('gamepaddisconnected')}} se déclenche).
+- {{domxref("Window.oninput")}}
+  - : Appelée lorsque la valeur d'un élément \<input> change.
+- {{domxref("GlobalEventHandlers.onkeydown")}}
+  - : Appelé lorsque vous commencez à presser une touche QUELCONQUE. Voir l'événement {{event("keydown")}}.
+
+<!---->
+
+- {{domxref("GlobalEventHandlers.onkeypress")}}
+  - : Appelé lorsqu'une touche (à l'exception de Shift, Fn et CapsLock) est en position pressée. Voir l'événement {{event("keypress")}}.
+
+<!---->
+
+- {{domxref("GlobalEventHandlers.onkeyup")}}
+  - : Appelé lorsque vous avez fini de relâcher une touche QUELCONQUE. Voir l'événement {{event("keyup")}}.
+
+<!---->
+
+- {{domxref("WindowEventHandlers.onlanguagechange")}}
+  - : Propriété de gestionnaire d'événements pour les événements {{event("languagechange")}} dans la fenêtre.
+- {{domxref("GlobalEventHandlers.onload")}}
+  - : Appelé après que toutes les ressources et les DOM ont été entièrement chargés. NE SERA PAS appelé lorsque la page est chargée à partir du cache, comme avec le bouton arrière.
+
+<!---->
+
+- {{domxref("GlobalEventHandlers.onmousedown")}}
+  - : Appelé quand un bouton QUELCONQUE de la souris est pressé.
+
+<!---->
+
+- {{domxref("GlobalEventHandlers.onmousemove")}}
+  - : Appelé en continu quand la souris est déplacée dans la fenêtre.
+
+<!---->
+
+- {{domxref("GlobalEventHandlers.onmouseout")}}
+  - : Appelé lorsque le pointeur quitte la fenêtre.
+
+<!---->
+
+- {{domxref("GlobalEventHandlers.onmouseover")}}
+  - : Appelé lorsque le pointeur entre dans la fenêtre.
+
+<!---->
+
+- {{domxref("GlobalEventHandlers.onmouseup")}}
+  - : Appelé quand un bouton QUELCONQUE de la souris est relâché.
+
+<!---->
+
+- {{domxref("Window.onmozbeforepaint")}} {{gecko_minversion_inline("2.0")}}
+  - : Propriété de gestionnaire d'événements pour l'événement MozBeforePaint, qui est déclenché avant de repeindre la fenêtre si l'événement a été demandé par un appel à la méthode {{domxref("Window.mozRequestAnimationFrame()")}}.
+- {{domxref("WindowEventHandlers.onoffline")}}
+  - : Appelé lorsque la connexion réseau est perdue. Voir l'événement {{event("offline")}}.
+- {{domxref("WindowEventHandlers.ononline")}}
+  - : Appelé lorsque la connexion réseau est établie. Voir l'événement {{event("online")}}.
+- {{domxref("WindowEventHandlers.onpagehide")}}
+  - : Appelé lorsque l'utilisateur quitte la page, avant l'événement onunload. Voir l'événement {{event("pagehide")}}.
+- {{domxref("WindowEventHandlers.onpageshow")}}
+  - : Appelé après toutes les ressources et les DOM ont été entièrement chargés. Voir l'événement {{event("pageshow")}}.
+- {{domxref("Window.onpaint")}}
+  - : Propriété de gestionnaire d'évènement pour les évènements de dessin de la fenêtre.
+
+<!---->
+
+- {{domxref("WindowEventHandlers.onpopstate")}} {{gecko_minversion_inline("2.0")}}
+  - : Appelé quand le bouton arrière est pressé.
+- {{domxref("Window.onrejectionhandled")}} {{experimental_inline}}
+  - : Gestionnaire d'événements pour les événements de rejet {{jsxref("Promise")}} gérés.
+- {{domxref("GlobalEventHandlers.onreset")}}
+  - : Appelé lorsqu'un formulaire est réinitialisé
+
+<!---->
+
+- {{domxref("GlobalEventHandlers.onresize")}}
+  - : Appelé en continu lorsque vous redimensionnez la fenêtre.
+
+<!---->
+
+- {{domxref("GlobalEventHandlers.onscroll")}}
+  - : Appelé lorsque la barre de défilement est déplacée par un moyen QUELCONQUE. Si la ressource correspond entièrement à la fenêtre, cet événement ne peut pas être invoqué.
+
+<!---->
+
+- {{domxref("GlobalEventHandlers.onwheel")}}
+  - : Appelé lorsque la roue de la souris est tournée autour d'un axe quelconque.
+- {{domxref("GlobalEventHandlers.onselect")}}
+  - : Appelé après le texte dans un champ de saisie est sélectionné.
+
+<!---->
+
+- {{domxref("GlobalEventHandlers.onselectionchange")}}
+  - : Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("selectionchange")}} est déclenché.
+- {{domxref("WindowEventHandlers.onstorage")}}
+  - : Appelé en cas de changement dans le stockage de session ou le stockage local. Voir l'événement {{event("storage")}}.
+- {{domxref("GlobalEventHandlers.onsubmit")}}
+  - : Appelé lorsqu'un formulaire est soumis.
+
+<!---->
+
+- {{domxref("WindowEventHandlers.onunhandledrejection")}} {{experimental_inline}}
+  - : Gestionnaire d'événements pour les événements de rejet {{jsxref("Promise")}} non gérés.
+- {{domxref("WindowEventHandlers.onunload")}}
+  - : Appelé lorsque l'utilisateur quitte la page.
+
+<!---->
+
+- {{domxref("Window.onuserproximity")}}
+  - : Propriété de gestionnaire d'événements pour les événements de proximité d'utilisateur.
+- {{domxref("Window.onvrdisplayconnect")}}
+  - : Représente un gestionnaire d'événements qui s'exécutera lorsqu'un périphérique RV compatible a été connecté à l'ordinateur (lorsque l'événement {{event("vrdisplayconnected")}} se déclenche).
+- {{domxref("Window.onvrdisplaydisconnect")}}
+  - : Représente un gestionnaire d'événements qui s'exécutera lorsqu'un périphérique RV compatible a été déconnecté de l'ordinateur (lorsque l'événement {{event("vrdisplaydisconnected")}} se déclenche).
+- {{domxref("Window.onvrdisplayactivate")}}
+  - : Représente un gestionnaire d'événements qui s'exécutera lorsqu'un affichage peut être présenté (lorsque l'événement {{event("vrdisplayactivate")}} se déclenche), par exemple si un HMD a été déplacé pour sortir de veille, ou a été réveillé en le mettant sur soi.
+- {{domxref("Window.onvrdisplaydeactivate")}}
+  - : Représente un gestionnaire d'événements qui s'exécute lorsqu'un affichage ne peut plus être présenté (lorsque l'événement {{event ("vrdisplaydeactivate")}} se déclenche), par exemple si un HMD est passé en veille ou en hibernation en raison d'une période d'inactivité.
+- {{domxref("Window.onvrdisplayblur")}}
+  - : Représente un gestionnaire d'événements qui s'exécutera lorsque la présentation sur un affichage a été suspendue pour une raison quelconque par le navigateur, le SE ou le matériel de RV (lorsque l'événement {{event("vrdisplayblur")}} se déclenche - par exemple, lorsque l'utilisateur interagit avec un menu système ou un navigateur, pour empêcher le suivi ou la perte d'expérience.
+- {{domxref("Window.onvrdisplayfocus")}}
+  - : Représente un gestionnaire d'événements qui sera exécuté lorsque la présentation sur un afficheur a repris après avoir perdu la focalisation (lorsque l'événement {{event("vrdisplayfocus")}} se déclenche).
+- {{domxref("Window.onvrdisplaypresentchange")}}
+  - : Représente un gestionnaire d'événements qui s'exécute lorsque l'état de présentation d'un périphérique de RV change, c'est-à-dire qu'il passe de présentation à non présentation, ou vice versa (lorsque l'événement {{event("vrdisplaypresentchange")}} se déclenche).
+
+## Constructeurs
+
+Voir aussi les [Interfaces DOM](/fr-FR/docs/DOM/DOM_Reference).
+
+- {{domxref("DOMParser")}}
+  - : `DOMParser` peut analyser un source XML ou HTML stocké dans une chaîne de caractères en un [Document](/fr-FR/docs/DOM/document) DOM. `DOMParser` est spécifié dans [DOM Parsing et Serialization](https://w3c.github.io/DOM-Parsing/).
+- {{domxref("Window.GeckoActiveXObject")}}
+  - : {{todo("NeedsContents")}}
+- {{domxref("Image")}}
+  - : Used for creating an {{domxref("HTMLImageElement")}}.
+- {{domxref("Option")}}
+  - : Used for creating an {{domxref("HTMLOptionElement")}}
+- {{domxref("Window.QueryInterface")}}
+  - : {{todo("NeedsContents")}}
+- {{domxref("Window.XMLSerializer")}}
+  - : {{todo("NeedsContents")}}
+- {{domxref("Worker")}}
+  - : Used for creating a [Web worker](/en-US/docs/DOM/Using_web_workers)
+- {{domxref("Window.XPCNativeWrapper")}}
+  - : {{todo("NeedsContents")}}
+- {{domxref("Window.XPCSafeJSObjectWrapper")}}
+  - : {{todo("NeedsContents")}}
+
+## Interfaces
+
+Voir [Référence du DOM](/fr/docs/Web/API/Document_Object_Model)
+
+## Voir aussi
+
+- [Travailler avec des fenêtres dans le code chrome](/fr/docs/Mozilla/Working_with_windows_in_chrome_code)
diff --git a/files/fr/web/api/window/innerheight/index.md b/files/fr/web/api/window/innerheight/index.md
index 19e63c1f54..b6e9ff08c1 100644
--- a/files/fr/web/api/window/innerheight/index.md
+++ b/files/fr/web/api/window/innerheight/index.md
@@ -10,35 +10,31 @@ tags:
   - Window
 translation_of: Web/API/Window/innerHeight
 ---
-<p>{{ ApiRef() }}</p>
+{{ ApiRef() }}
 
-<p>Récupère la hauteur (en pixels) de la partie visible de la fenêtre de navigation en incluant, si elle est affichée, la barre de défilement horizontale.</p>
+Récupère la hauteur (en pixels) de la partie visible de la fenêtre de navigation en incluant, si elle est affichée, la barre de défilement horizontale.
 
-<div class="note">
-<p><strong>Note :</strong> La valeur retournée par cette propriété correspond le cas échéant à la hauteur de la fenêtre définie par {{ifmethod("nsIDOMWindowUtils", "setCSSViewport")}}, dans le cas où vous utilisez cette méthode pour définir les dimensions de la fenêtre virtuelle dans le but d'agencer la page.</p>
-</div>
+> **Note :** La valeur retournée par cette propriété correspond le cas échéant à la hauteur de la fenêtre définie par {{ifmethod("nsIDOMWindowUtils", "setCSSViewport")}}, dans le cas où vous utilisez cette méthode pour définir les dimensions de la fenêtre virtuelle dans le but d'agencer la page.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre>var hauteur = window.innerHeight;
-</pre>
+    var hauteur = window.innerHeight;
 
-<h3 id="Valeur_renvoy.C3.A9e">Valeur</h3>
+### Valeur
 
-<p>Renvoie la hauteur de la partie visible de la fenêtre de navigation. La propriété <code>window.innerHeight</code> est accessible en lecture seulement ; elle n'a pas de valeur par défaut.</p>
+Renvoie la hauteur de la partie visible de la fenêtre de navigation. La propriété `window.innerHeight` est accessible en lecture seulement ; elle n'a pas de valeur par défaut.
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<ul>
- <li>La propriété <code>window.innerHeight</code> est supportée par tout objet assimilé à une fenêtre <em>{{domxref("window")}}</em>, un cadre <em>frame </em>, un ensemble de cadres <em>frameset</em>, ou une fenêtre secondaire.</li>
- <li>Il existe un <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=189112#c7">algorithme</a> pour calculer la hauteur de la partie visible de la fenêtre en excluant la barre de défilement horizontale si est elle affichée.</li>
-</ul>
+- La propriété `window.innerHeight` est supportée par tout objet assimilé à une fenêtre _{{domxref("window")}}_, un cadre _frame_ , un ensemble de cadres *frameset*, ou une fenêtre secondaire.
+- Il existe un [algorithme](https://bugzilla.mozilla.org/show_bug.cgi?id=189112#c7) pour calculer la hauteur de la partie visible de la fenêtre en excluant la barre de défilement horizontale si est elle affichée.
 
-<h2 id="Attention">Exemples</h2>
+## Exemples
 
-<h3 id="Code">Sur un <em>frameset</em></h3>
+### Sur un _frameset_
 
-<pre class="brush:js">var intFrameHeight = window.innerHeight; // ou
+```js
+var intFrameHeight = window.innerHeight; // ou
 
 var intFrameHeight = self.innerHeight;
 // retournera la hauteur de la partie visible du cadre dans frameset
@@ -48,48 +44,31 @@ var intFramesetHeight = parent.innerHeight;
 
 var intOuterFramesetHeight = top.innerHeight;
 // retournera la hauteur de la partie visible du frameset le plus éloigné
-</pre>
+```
 
-<p>{{todo("ajouter ici un lien vers une démo interactive")}}</p>
+{{todo("ajouter ici un lien vers une démo interactive")}}
 
-<ul>
- <li>Pour modifier les dimensions d'une fenêtre, voir {{domxref("window.resizeBy()")}} et {{domxref("window.resizeTo()")}}.</li>
- <li>Pour récupérer la hauteur extérieure d'une fenêtre, c'est-à-dire la hauteur de la fenêtre du navigateur dans sa totalité, voir {{domxref("window.outerHeight")}}.</li>
-</ul>
+- Pour modifier les dimensions d'une fenêtre, voir {{domxref("window.resizeBy()")}} et {{domxref("window.resizeTo()")}}.
+- Pour récupérer la hauteur extérieure d'une fenêtre, c'est-à-dire la hauteur de la fenêtre du navigateur dans sa totalité, voir {{domxref("window.outerHeight")}}.
 
-<h3 id="Exemple_graphique">Exemple graphique</h3>
+### Exemple graphique
 
-<p>L'illustration suivante montre la différence entre <code>outerHeight</code> et <code>innerHeight</code>.</p>
+L'illustration suivante montre la différence entre `outerHeight` et `innerHeight`.
 
-<p><img alt="Illustration de la différence entre innerHeight et outerHeight" src="firefoxinnervsouterheight2.png"></p>
+![Illustration de la différence entre innerHeight et outerHeight](firefoxinnervsouterheight2.png)
 
-<h2 id="Spécification">Spécification</h2>
+## Spécification
 
-<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('CSSOM View', '#dom-window-innerheight', 'window.innerHeight')}}</td>
-   <td>{{Spec2('CSSOM View')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                        | Statut                           | Commentaire         |
+| ---------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- |
+| {{SpecName('CSSOM View', '#dom-window-innerheight', 'window.innerHeight')}} | {{Spec2('CSSOM View')}} | Définition initiale |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Window.innerHeight")}}</p>
+{{Compat("api.Window.innerHeight")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("window.innerWidth")}}</li>
- <li>{{domxref("window.outerHeight")}}</li>
- <li>{{domxref("window.outerWidth")}}</li>
-</ul>
+- {{domxref("window.innerWidth")}}
+- {{domxref("window.outerHeight")}}
+- {{domxref("window.outerWidth")}}
diff --git a/files/fr/web/api/window/innerwidth/index.md b/files/fr/web/api/window/innerwidth/index.md
index a76af5343a..882ae4d79e 100644
--- a/files/fr/web/api/window/innerwidth/index.md
+++ b/files/fr/web/api/window/innerwidth/index.md
@@ -3,66 +3,50 @@ title: window.innerWidth
 slug: Web/API/Window/innerWidth
 translation_of: Web/API/Window/innerWidth
 ---
-<p>{{ ApiRef() }}</p>
+{{ ApiRef() }}
 
-<h2 id="R.C3.A9sum.C3.A9">Résumé</h2>
+## Résumé
 
-<p>Récupère la largeur du contenu visible de la fenêtre de navigation en incluant, s'il est visible, l'ascenseur vertical.<br>
- Permet également de fixer une largeur pour le domaine d'affichage de la fenêtre.</p>
+Récupère la largeur du contenu visible de la fenêtre de navigation en incluant, s'il est visible, l'ascenseur vertical.
+Permet également de fixer une largeur pour le domaine d'affichage de la fenêtre.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre>var largeur = window.innerWidth;
-</pre>
+    var largeur = window.innerWidth;
 
-<p>Voir aussi : <a href="/fr/docs/Web/API/Window/innerHeight">window.innerHeight</a>, <a href="/fr/docs/Web/API/Window/outerHeight">window.outerHeight</a> and <a href="/fr/docs/Web/API/Window/outerWidth">window.outerWidth</a>.</p>
+Voir aussi : [window.innerHeight](/fr/docs/Web/API/Window/innerHeight), [window.outerHeight](/fr/docs/Web/API/Window/outerHeight) and [window.outerWidth](/fr/docs/Web/API/Window/outerWidth).
 
-<h2 id="Valeur_renvoy.C3.A9e">Valeur renvoyée</h2>
+## Valeur renvoyée
 
-<dl>
- <dt><code>innerWidth </code></dt>
- <dd>un entier (nombre de pixels);</dd>
-</dl>
+- `innerWidth`
+  - : un entier (nombre de pixels);
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p>La propriété <code>innerWidth</code> est supportée par tous les objet "window" comme par exemple une fenêtre, une frame, un frameset, ou une fenêtre secondaire.</p>
+La propriété `innerWidth` est supportée par tous les objet "window" comme par exemple une fenêtre, une frame, un frameset, ou une fenêtre secondaire.
 
-<h2 id="Example">Example</h2>
+## Example
 
-<pre>// Retourne la largeur de la fenêtre
-var largeur = window.innerWidth;
+    // Retourne la largeur de la fenêtre
+    var largeur = window.innerWidth;
 
-// Retourn la largeur de la fenêtre à l'intérieur d'une "frameset"
-var largeur = self.innerWidth;
+    // Retourn la largeur de la fenêtre à l'intérieur d'une "frameset"
+    var largeur = self.innerWidth;
 
-// Retourne la largeur de la fenêtre du "frameset" parent
-var largeurDeLaFrame = parent.innerWidth;
+    // Retourne la largeur de la fenêtre du "frameset" parent
+    var largeurDeLaFrame = parent.innerWidth;
 
-// Retourne la largeur de la fenêtre du "frameset" principal
-var largeurDuFrameset = top.innerWidth;</pre>
+    // Retourne la largeur de la fenêtre du "frameset" principal
+    var largeurDuFrameset = top.innerWidth;
 
-<p>Pour changer la taille de la fenêtre, voir {{domxref("window.resizeBy")}} and {{domxref("window.resizeTo")}}.</p>
+Pour changer la taille de la fenêtre, voir {{domxref("window.resizeBy")}} and {{domxref("window.resizeTo")}}.
 
-<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('CSSOM View', '#dom-window-innerwidth', 'window.innerWidth')}}</td>
-      <td>{{Spec2('CSSOM View')}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                    | Statut                           | Commentaire          |
+| ------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName('CSSOM View', '#dom-window-innerwidth', 'window.innerWidth')}} | {{Spec2('CSSOM View')}} | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Window.innerWidth")}}</p>
+{{Compat("api.Window.innerWidth")}}
diff --git a/files/fr/web/api/window/issecurecontext/index.md b/files/fr/web/api/window/issecurecontext/index.md
index dd6a2dbbc3..0e998ab741 100644
--- a/files/fr/web/api/window/issecurecontext/index.md
+++ b/files/fr/web/api/window/issecurecontext/index.md
@@ -9,50 +9,39 @@ tags:
   - Window
 translation_of: Web/API/Window/isSecureContext
 ---
-<p>{{APIRef}}{{SeeCompatTable}}</p>
+{{APIRef}}{{SeeCompatTable}}
 
-<p>La propriété en lecteur seule <code><strong>window.isSecureContext</strong></code> indique si un contexte est capable d'utiliser des fonctionnalités qui nécessitent des <a href="/en-US/docs/Web/Security/Secure_Contexts">contextes sécurisés</a>.</p>
+La propriété en lecteur seule **`window.isSecureContext`** indique si un contexte est capable d'utiliser des fonctionnalités qui nécessitent des [contextes sécurisés](/en-US/docs/Web/Security/Secure_Contexts).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var <em>isSecure</em> = window.isSecureContext</pre>
+    var isSecure = window.isSecureContext
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Détection_des_fonctionnalités">Détection des fonctionnalités</h3>
+### Détection des fonctionnalités
 
-<p>Vous pouvez utiliser la détection des fonctionnalités pour vérifier si elles sont dans un contexte sécurisé ou non à l'aide du booléen <code>isSecureContext</code> qui est exposé sur la portée globale.</p>
+Vous pouvez utiliser la détection des fonctionnalités pour vérifier si elles sont dans un contexte sécurisé ou non à l'aide du booléen `isSecureContext` qui est exposé sur la portée globale.
 
-<pre class="brush: js">if (window.isSecureContext) {
+```js
+if (window.isSecureContext) {
   // La page est un contexte sécurisé afin que les techniciens de service soient désormais disponibles
   navigator.serviceWorker.register("/offline-worker.js").then(function () {
     ...
   });
-}</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th>Spécification</th>
-   <th>Statut</th>
-   <th>Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Secure Contexts')}}</td>
-   <td>{{Spec2('Secure Contexts','#monkey-patching-global-object','isSecureContext')}}</td>
-   <td>Spécification initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Window.isSecureContext")}}</p>
-
-<h2 id="Voir_également">Voir également</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/Security/Secure_Contexts">Contextes sécurisés</a></li>
-</ul>
+}
+```
+
+## Spécifications
+
+| Spécification                            | Statut                                                                                                   | Commentaire             |
+| ---------------------------------------- | -------------------------------------------------------------------------------------------------------- | ----------------------- |
+| {{SpecName('Secure Contexts')}} | {{Spec2('Secure Contexts','#monkey-patching-global-object','isSecureContext')}} | Spécification initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Window.isSecureContext")}}
+
+## Voir également
+
+- [Contextes sécurisés](/en-US/docs/Web/Security/Secure_Contexts)
diff --git a/files/fr/web/api/window/languagechange_event/index.md b/files/fr/web/api/window/languagechange_event/index.md
index a55d83a36d..4cbeeb670e 100644
--- a/files/fr/web/api/window/languagechange_event/index.md
+++ b/files/fr/web/api/window/languagechange_event/index.md
@@ -9,71 +9,64 @@ tags:
   - Window
 translation_of: Web/API/Window/languagechange_event
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}
 
-<p>L'événement <strong><code>languagechange</code></strong> est déclenché sur l'objet d'étendue globale lorsque la langue préférée de l'utilisateur change.</p>
+L'événement **`languagechange`** est déclenché sur l'objet d'étendue globale lorsque la langue préférée de l'utilisateur change.
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row">Bulles</th>
-   <td>Non</td>
-  </tr>
-  <tr>
-   <th scope="row">Annulable</th>
-   <td>Non</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface</th>
-   <td>{{domxref("Event")}}</td>
-  </tr>
-  <tr>
-   <th scope="row">Propriété de gestionnaire d'événements</th>
-   <td>{{domxref("WindowEventHandlers/onlanguagechange", "onlanguagechange")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Bulles</th>
+      <td>Non</td>
+    </tr>
+    <tr>
+      <th scope="row">Annulable</th>
+      <td>Non</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface</th>
+      <td>{{domxref("Event")}}</td>
+    </tr>
+    <tr>
+      <th scope="row">Propriété de gestionnaire d'événements</th>
+      <td>
+        {{domxref("WindowEventHandlers/onlanguagechange", "onlanguagechange")}}
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Vous pouvez utiliser l'événement <code>languagechange</code> dans une méthode {{domxref("EventTarget/addEventListener", "addEventListener")}} :</p>
+Vous pouvez utiliser l'événement `languagechange` dans une méthode {{domxref("EventTarget/addEventListener", "addEventListener")}} :
 
-<pre class="brush: js">window.addEventListener('languagechange', function() {
+```js
+window.addEventListener('languagechange', function() {
   console.log('languagechange event detected!');
-});</pre>
+});
+```
 
-<p>Ou utilisez la propriété du gestionnaire d'événements <code><a href="/en-US/docs/Web/API/WindowEventHandlers/onlanguagechange">onlanguagechange</a></code> :</p>
+Ou utilisez la propriété du gestionnaire d'événements [`onlanguagechange`](/en-US/docs/Web/API/WindowEventHandlers/onlanguagechange) :
 
-<pre class="brush: js">window.onlanguagechange = function(event) {
+```js
+window.onlanguagechange = function(event) {
   console.log('languagechange event detected!');
-};</pre>
+};
+```
 
-<h2 id="Spécification">Spécification</h2>
+## Spécification
 
-<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', 'indices.html#event-languagechange', 'languagechange') }}</td>
-   <td>{{ Spec2('HTML WHATWG') }}</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                    | Statut                               |
+| ---------------------------------------------------------------------------------------------------------------- | ------------------------------------ |
+| {{ SpecName('HTML WHATWG', 'indices.html#event-languagechange', 'languagechange') }} | {{ Spec2('HTML WHATWG') }} |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Window.languagechange_event")}}</p>
+{{Compat("api.Window.languagechange_event")}}
 
-<h2 id="Voir_également">Voir également</h2>
+## Voir également
 
-<ul>
- <li>{{domxref("NavigatorLanguage.language", "navigator.language")}}</li>
- <li>{{domxref("NavigatorLanguage.languages", "navigator.languages")}}</li>
- <li>{{domxref("Navigator")}}</li>
- <li>{{domxref("Window.onlanguagechange")}}</li>
-</ul>
+- {{domxref("NavigatorLanguage.language", "navigator.language")}}
+- {{domxref("NavigatorLanguage.languages", "navigator.languages")}}
+- {{domxref("Navigator")}}
+- {{domxref("Window.onlanguagechange")}}
diff --git a/files/fr/web/api/window/length/index.md b/files/fr/web/api/window/length/index.md
index af1ee54111..31f70f5c81 100644
--- a/files/fr/web/api/window/length/index.md
+++ b/files/fr/web/api/window/length/index.md
@@ -3,25 +3,24 @@ title: Window.length
 slug: Web/API/Window/length
 translation_of: Web/API/Window/length
 ---
-<div>{{ ApiRef() }}</div>
+{{ ApiRef() }}
 
-<p>Retourne le nombre de frames (soit des éléments de frame ou iframe) présent sur la page.</p>
+Retourne le nombre de frames (soit des éléments de frame ou iframe) présent sur la page.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>nombreDeFrames</em>= window.length;
-</pre>
+    nombreDeFrames= window.length;
 
-<ul>
- <li><em>nombreDeFrames est égal au nombre de frames présent sur la page.</em></li>
-</ul>
+- _nombreDeFrames est égal au nombre de frames présent sur la page._
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush:js">if (window.length) {
+```js
+if (window.length) {
   // La page contient des frames
-}</pre>
+}
+```
 
-<h2 id="Specification">Specification</h2>
+## Specification
 
-<p>{{DOM0}}</p>
+{{DOM0}}
diff --git a/files/fr/web/api/window/load_event/index.md b/files/fr/web/api/window/load_event/index.md
index 9226d9630b..1504360f08 100644
--- a/files/fr/web/api/window/load_event/index.md
+++ b/files/fr/web/api/window/load_event/index.md
@@ -7,85 +7,50 @@ tags:
 translation_of: Web/API/Window/load_event
 original_slug: Web/Events/load
 ---
-<p>L’évènement <code>load</code> est émis lorsqu’une ressource et ses ressources dépendantes sont completement chargées.</p>
-
-<h2 id="Informations_générales">Informations générales</h2>
-
-<dl>
- <dt>Spécification</dt>
- <dd><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-load">DOM L3</a></dd>
- <dt>Interface</dt>
- <dd>UIEvent</dd>
- <dt>Bouillonne</dt>
- <dd>Non</dd>
- <dt>Annulable</dt>
- <dd>Non</dd>
- <dt>Cible</dt>
- <dd>Document, Element</dd>
- <dt>Action par défaut</dt>
- <dd>Aucune.</dd>
-</dl>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Propriété</th>
-   <th scope="col">Type</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>target</td>
-   <td><a href="/fr/docs/Web/API/EventTarget">EventTarget</a></td>
-   <td>La cible de l’évènement (la cible la plus haute dans l’arbre <a href="/fr/docs/Comment_cr%C3%A9er_un_arbre_DOM">DOM</a>)</td>
-  </tr>
-  <tr>
-   <td>type</td>
-   <td><a href="/fr/docs/Web/API/DOMString">DOMString</a></td>
-   <td>Le type de l’évènement</td>
-  </tr>
-  <tr>
-   <td>bubbles</td>
-   <td>boolean</td>
-   <td>Si l’évènement bouillonne ou non</td>
-  </tr>
-  <tr>
-   <td>cancelable</td>
-   <td>boolean</td>
-   <td>Si l’évènement est annulable ou non</td>
-  </tr>
-  <tr>
-   <td>view</td>
-   <td><a href="/fr/docs/Web/API/WindowProxy">WindowProxy</a></td>
-   <td><a href="/fr/docs/Web/API/Document/defaultView">document.defaultView</a> (la fenêtre du document)</td>
-  </tr>
-  <tr>
-   <td>detail</td>
-   <td>long (float)</td>
-   <td>0.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>Tous les évènements ci-dessus sont en lecture seule. Vous ne pouvez pas leur affecter de valeur.</p>
-
-<h2 id="Exemple">Exemple</h2>
-
-<pre class="brush: html">&lt;script&gt;
+L’évènement `load` est émis lorsqu’une ressource et ses ressources dépendantes sont completement chargées.
+
+## Informations générales
+
+- Spécification
+  - : [DOM L3](http://www.w3.org/TR/DOM-Level-3-Events/#event-type-load)
+- Interface
+  - : UIEvent
+- Bouillonne
+  - : Non
+- Annulable
+  - : Non
+- Cible
+  - : Document, Element
+- Action par défaut
+  - : Aucune.
+
+## Propriétés
+
+| Propriété  | Type                                        | Description                                                                                                   |
+| ---------- | ------------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
+| target     | [EventTarget](/fr/docs/Web/API/EventTarget) | La cible de l’évènement (la cible la plus haute dans l’arbre [DOM](/fr/docs/Comment_cr%C3%A9er_un_arbre_DOM)) |
+| type       | [DOMString](/fr/docs/Web/API/DOMString)     | Le type de l’évènement                                                                                        |
+| bubbles    | boolean                                     | Si l’évènement bouillonne ou non                                                                              |
+| cancelable | boolean                                     | Si l’évènement est annulable ou non                                                                           |
+| view       | [WindowProxy](/fr/docs/Web/API/WindowProxy) | [document.defaultView](/fr/docs/Web/API/Document/defaultView) (la fenêtre du document)                        |
+| detail     | long (float)                                | 0.                                                                                                            |
+
+Tous les évènements ci-dessus sont en lecture seule. Vous ne pouvez pas leur affecter de valeur.
+
+## Exemple
+
+```html
+<script>
   window.addEventListener("load", function(event) {
     console.log("Toutes les ressources sont chargées !");
   });
-&lt;/script&gt;</pre>
+</script>
+```
 
-<h2 id="Évènements_liés">Évènements liés</h2>
+## Évènements liés
 
-<ul>
- <li>{{event("DOMContentLoaded")}}</li>
- <li>{{event("readystatechange")}}</li>
- <li>{{event("load")}}</li>
- <li>{{event("beforeunload")}}</li>
- <li>{{event("unload")}}</li>
-</ul>
+- {{event("DOMContentLoaded")}}
+- {{event("readystatechange")}}
+- {{event("load")}}
+- {{event("beforeunload")}}
+- {{event("unload")}}
diff --git a/files/fr/web/api/window/localstorage/index.md b/files/fr/web/api/window/localstorage/index.md
index 3385e051fb..e8ccb332ec 100644
--- a/files/fr/web/api/window/localstorage/index.md
+++ b/files/fr/web/api/window/localstorage/index.md
@@ -13,79 +13,71 @@ tags:
   - localStorage
 translation_of: Web/API/Window/localStorage
 ---
-<p>{{APIRef("Web Storage API")}}</p>
+{{APIRef("Web Storage API")}}
 
-<p>La propriété <code>localStorage</code> vous permet d'accéder à un objet local {{domxref("Storage")}}. Le <code>localStorage</code> est similaire au <code><a href="/en-US/docs/Web/API/Window.sessionStorage">sessionStorage</a></code>. La seule différence : les données stockées dans le <code>localStorage</code> n'ont pas de délai d'expiration, alors que les données stockées dans le <code>sessionStorage</code> sont nettoyées quand la session navigateur prend fin — donc quand on ferme le navigateur.</p>
+La propriété `localStorage` vous permet d'accéder à un objet local {{domxref("Storage")}}. Le `localStorage` est similaire au [`sessionStorage`](/en-US/docs/Web/API/Window.sessionStorage). La seule différence : les données stockées dans le `localStorage` n'ont pas de délai d'expiration, alors que les données stockées dans le `sessionStorage` sont nettoyées quand la session navigateur prend fin — donc quand on ferme le navigateur.
 
-<p>Il convient de noter que les données stockées dans <code>localStorage</code> ou <code>sessionStorage</code> <strong>sont spécifiques au protocole de la page.</strong></p>
+Il convient de noter que les données stockées dans `localStorage` ou `sessionStorage` **sont spécifiques au protocole de la page.**
 
-<p>Les clés et les valeurs <strong>sont toujours</strong> des chaînes de caractères (à noter que, comme pour les objets, les clés entières seront automatiquement converties en chaînes de caractères).</p>
+Les clés et les valeurs **sont toujours** des chaînes de caractères (à noter que, comme pour les objets, les clés entières seront automatiquement converties en chaînes de caractères).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">monStockage = localStorage;</pre>
+```js
+monStockage = localStorage;
+```
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>Un objet {{DOMxRef("Storage")}} qui peut être utilisé pour accéder à l'espace de stockage local de l'origine actuelle.</p>
+Un objet {{DOMxRef("Storage")}} qui peut être utilisé pour accéder à l'espace de stockage local de l'origine actuelle.
 
-<h3 id="Exceptions">Exceptions</h3>
+### Exceptions
 
-<dl>
- <dt><code>SecurityError</code></dt>
- <dd>La demande viole une décision politique, ou l'origine n'est pas <a href="/fr/docs/Web/Security/Same_origin_policy_for_JavaScript">un schéma/hôte/port valide</a> (cela peut se produire si l'origine utilise le shéma <code>file:</code> ou <code>data:</code>, par exemple). Par exemple, l'utilisateur peut configurer son navigateur de manière à refuser la permission de conserver des données pour l'origine spécifiée.</dd>
-</dl>
+- `SecurityError`
+  - : La demande viole une décision politique, ou l'origine n'est pas [un schéma/hôte/port valide](/fr/docs/Web/Security/Same_origin_policy_for_JavaScript) (cela peut se produire si l'origine utilise le shéma `file:` ou `data:`, par exemple). Par exemple, l'utilisateur peut configurer son navigateur de manière à refuser la permission de conserver des données pour l'origine spécifiée.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>L'extrait de code suivant accède à l'objet local {{domxref("Storage")}} du domaine courant et lui ajoute une entrée en utilisant {{domxref("Storage.setItem()")}}.</p>
+L'extrait de code suivant accède à l'objet local {{domxref("Storage")}} du domaine courant et lui ajoute une entrée en utilisant {{domxref("Storage.setItem()")}}.
 
-<pre class="brush: js">localStorage.setItem('monChat', 'Tom');</pre>
+```js
+localStorage.setItem('monChat', 'Tom');
+```
 
-<p>La syntaxe pour la lecture de l'article <code>localStorage</code> est la suivante :</p>
+La syntaxe pour la lecture de l'article `localStorage` est la suivante :
 
-<pre class="brush: js">var cat = localStorage.getItem('myCat');</pre>
+```js
+var cat = localStorage.getItem('myCat');
+```
 
-<p>La syntaxe pour la suppression de l'élément <code>localStorage</code> est la suivante :</p>
+La syntaxe pour la suppression de l'élément `localStorage` est la suivante :
 
-<pre class="brush: js">localStorage.removeItem('myCat');</pre>
+```js
+localStorage.removeItem('myCat');
+```
 
-<p>La syntaxe pour supprimer tous les éléments de <code>localStorage</code> est la suivante :</p>
+La syntaxe pour supprimer tous les éléments de `localStorage` est la suivante :
 
-<pre class="brush: js">// Effacer tous les éléments
+```js
+// Effacer tous les éléments
 localStorage.clear();
-</pre>
-
-<div class="note">
-<p><strong>Note :</strong> Se référer à l'article <a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a> pour voir un exemple complet.</p>
-</div>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML WHATWG", "webstorage.html#dom-localstorage", "localStorage")}}</td>
-   <td>{{Spec2("HTML WHATWG")}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2>
-
-<p>{{Compat("api.Window.localStorage")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a></li>
- <li>{{domxref("Storage/LocalStorage")}}</li>
- <li>{{domxref("Window/SessionStorage")}}</li>
- <li>{{domxref("Window.sessionStorage")}}</li>
-</ul>
+```
+
+> **Note :** Se référer à l'article [Using the Web Storage API](/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API) pour voir un exemple complet.
+
+## Spécifications
+
+| Spécification                                                                                            | Statut                           | Commentaire |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- |
+| {{SpecName("HTML WHATWG", "webstorage.html#dom-localstorage", "localStorage")}} | {{Spec2("HTML WHATWG")}} |             |
+
+## Compatibilité navigateurs
+
+{{Compat("api.Window.localStorage")}}
+
+## Voir aussi
+
+- [Using the Web Storage API](/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API)
+- {{domxref("Storage/LocalStorage")}}
+- {{domxref("Window/SessionStorage")}}
+- {{domxref("Window.sessionStorage")}}
diff --git a/files/fr/web/api/window/location/index.md b/files/fr/web/api/window/location/index.md
index f8074f97f9..081d5b2c86 100644
--- a/files/fr/web/api/window/location/index.md
+++ b/files/fr/web/api/window/location/index.md
@@ -4,61 +4,60 @@ slug: Web/API/Window/location
 translation_of: Web/API/Window/location
 browser-compat: api.Window.location
 ---
-<p>{{APIRef}}</p>
+{{APIRef}}
 
-<p>La propriété en lecture seule <strong><code>Window.location</code></strong> renvoie un objet <a href="/fr/docs/Web/API/Location"><code>Location</code></a> qui contient des informations à propos de l'emplacement courant du document.</p>
+La propriété en lecture seule **`Window.location`** renvoie un objet [`Location`](/fr/docs/Web/API/Location) qui contient des informations à propos de l'emplacement courant du document.
 
-<p>Bien que <code>Window.location</code> soit un objet <code>Location</code> en <em>lecture seule</em>, on peut lui affecter une chaîne de caractères <a href="/fr/docs/Web/API/DOMString"><code>DOMString</code></a>. Cela signifie qu'on peut, la plupart du temps, manipuler <code>location</code> comme une chaîne de caractères&nbsp;: <code>location = 'http://www.example.com'</code> est par exemple synonyme de <code>location.href = 'http://www.example.com'</code>.</p>
+Bien que `Window.location` soit un objet `Location` en _lecture seule_, on peut lui affecter une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString). Cela signifie qu'on peut, la plupart du temps, manipuler `location` comme une chaîne de caractères : `location = 'http://www.example.com'` est par exemple synonyme de `location.href = 'http://www.example.com'`.
 
-<p>Voir la page de l'interface <a href="/fr/docs/Web/API/Location"><code>Location</code></a> pour connaître l'ensemble des propriétés disponibles.</p>
+Voir la page de l'interface [`Location`](/fr/docs/Web/API/Location) pour connaître l'ensemble des propriétés disponibles.
 
-<h2 id="syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">
-var <var>oldLocation</var> = location;
-location = <var>newLocation</var>;
-</pre>
+```js
+var oldLocation = location;
+location = newLocation;
+```
 
-<h2 id="exemples">Exemples</h2>
+## Exemples
 
-<h3 id="exemple_simple">Exemple simple</h3>
+### Exemple simple
 
-<pre class="brush: js">
+```js
 console.log(location); // affiche "https://developer.mozilla.org/fr/docs/Web/API/Window/location" dans la console
-</pre>
+```
 
-<h3 id="premier_exemple_naviguer_sur_une_nouvelle_page">Premier exemple : naviguer sur une nouvelle page</h3>
+### Premier exemple : naviguer sur une nouvelle page
 
-<p>Lorsqu'une nouvelle valeur est affectée à l'objet <code>location</code>, un document sera chargé en utilisant l'URL comme si <code>location.assign()</code> avait été invoquée avec l'URL modifiée.</p>
+Lorsqu'une nouvelle valeur est affectée à l'objet `location`, un document sera chargé en utilisant l'URL comme si `location.assign()` avait été invoquée avec l'URL modifiée.
 
-<div class="notecard note">
-  <p><strong>Note :</strong> <a
-    href="https://html.spec.whatwg.org/multipage/browsers.html#allowed-to-navigate">Les marqueurs de bac à sable relatifs à la navigation</a> pourront lever une exception et empêcher la navigation.</p>
-</div>
+> **Note :** [Les marqueurs de bac à sable relatifs à la navigation](https://html.spec.whatwg.org/multipage/browsers.html#allowed-to-navigate) pourront lever une exception et empêcher la navigation.
 
-<pre class="brush: js">
+```js
 location.assign("http://www.mozilla.org"); // ou
 location = "http://www.mozilla.org";
-</pre>
+```
 
-<h3 id="deuxième_exemple_recharger_la_page_courante">Deuxième exemple : recharger la page courante</h3>
+### Deuxième exemple : recharger la page courante
 
-<pre class="brush: js">location.reload();</pre>
+```js
+location.reload();
+```
 
-<h3 id="troisième_exemple">Troisième exemple</h3>
+### Troisième exemple
 
-<p>Dans cet exemple, on recharge la page avec la méthode <a href="/fr/docs/Web/API/Location/replace"><code>replace()</code></a> afin d'insérer la valeur de <code>location.pathname</code> dans l'ancre :</p>
+Dans cet exemple, on recharge la page avec la méthode [`replace()`](/fr/docs/Web/API/Location/replace) afin d'insérer la valeur de `location.pathname` dans l'ancre :
 
-<pre class="brush: js">
+```js
 function reloadPageWithHash() {
   var initialPage = location.pathname;
   location.replace('http://example.com/#' + initialPage);
 }
-</pre>
+```
 
-<h3 id="quatrième_exemple_afficher_les_propriétés_de_l_url_courante">Quatrième exemple : afficher les propriétés de l'URL courante</h3>
+### Quatrième exemple : afficher les propriétés de l'URL courante
 
-<pre class="brush: js">
+```js
 function showLoc() {
   var oLocation = location, aLog = ["Property (Typeof): Value", "location (" + (typeof oLocation) + "): " + oLocation ];
   for (var sProp in oLocation){
@@ -66,29 +65,29 @@ function showLoc() {
   }
   console.log(aLog.join("\n"));
 }
-</pre>
+```
 
-<h3 id="cinquième_exemple_envoyer_une_chaîne_de_données_au_serveur_en_modifiant_la_propriété_search">Cinquième exemple : envoyer une chaîne de données au serveur en modifiant la propriété search</h3>
+### Cinquième exemple : envoyer une chaîne de données au serveur en modifiant la propriété search
 
-<pre class="brush: js">
+```js
 function sendData (sData) {
   location.search = sData;
 }
 
-// Dans le HTML: &lt;button onclick="sendData('Des données');"&gt;Envoyer des données&lt;/button&gt;
-</pre>
+// Dans le HTML: <button onclick="sendData('Des données');">Envoyer des données</button>
+```
 
-<p>On ajoutera "?Des%20données" à l'URL courante qui sera alors envoyée au serveur. Si aucune action n'est entreprise par le serveur, le document courant est rechargé avec la chaîne de recherche modifiée.</p>
+On ajoutera "?Des%20données" à l'URL courante qui sera alors envoyée au serveur. Si aucune action n'est entreprise par le serveur, le document courant est rechargé avec la chaîne de recherche modifiée.
 
-<h3 id="sixième_exemple_utiliser_les_marques-pages_sans_changer_la_propriété_hash">Sixième exemple : utiliser les marques-pages sans changer la propriété <code>hash</code></h3>
+### Sixième exemple : utiliser les marques-pages sans changer la propriété `hash`
 
-<pre class="brush: html">
-&lt;!doctype html&gt;
-  &lt;html&gt;
-  &lt;head&gt;
-    &lt;meta charset="UTF-8"/&gt;
-    &lt;title&gt;Exemple MDN&lt;/title&gt;
-    &lt;script&gt;
+```html
+<!doctype html>
+  <html>
+  <head>
+    <meta charset="UTF-8"/>
+    <title>Exemple MDN</title>
+    <script>
 function showNode (oNode) {
   document.documentElement.scrollTop = oNode.offsetTop;
   document.documentElement.scrollLeft = oNode.offsetLeft;
@@ -99,47 +98,47 @@ function showBookmark (sBookmark, bUseHash) {
   var oBookmark = document.querySelector(sBookmark);
   if (oBookmark) { showNode(oBookmark); }
 }
-    &lt;/script&gt;
-    &lt;style&gt;
+    </script>
+    <style>
 span.intLink {
     cursor: pointer;
     color: #0000ff;
     text-decoration: underline;
 }
-    &lt;/style&gt;
-  &lt;/head&gt;
-
-&lt;body&gt;
-  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices dolor ac dolor imperdiet ullamcorper. Suspendisse quam libero, luctus auctor mollis sed, malesuada condimentum magna. Quisque in ante tellus, in placerat est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec a mi magna, quis mattis dolor. Etiam sit amet ligula quis urna auctor imperdiet nec faucibus ante. Mauris vel consectetur dolor. Nunc eget elit eget velit pulvinar fringilla consectetur aliquam purus. Curabitur convallis, justo posuere porta egestas, velit erat ornare tortor, non viverra justo diam eget arcu. Phasellus adipiscing fermentum nibh ac commodo. Nam turpis nunc, suscipit a hendrerit vitae, volutpat non ipsum.&lt;/p&gt;
-  &lt;p&gt;Duis lobortis sapien quis nisl luctus porttitor. In tempor semper libero, eu tincidunt dolor eleifend sit amet. Ut nec velit in dolor tincidunt rhoncus non non diam. Morbi auctor ornare orci, non euismod felis gravida nec. Curabitur elementum nisi a eros rutrum nec blandit diam placerat. Aenean tincidunt risus ut nisi consectetur cursus. Ut vitae quam elit. Donec dignissim est in quam tempor consequat. Aliquam aliquam diam non felis convallis suscipit. Nulla facilisi. Donec lacus risus, dignissim et fringilla et, egestas vel eros. Duis malesuada accumsan dui, at fringilla mauris bibendum quis. Cras adipiscing ultricies fermentum. Praesent bibendum condimentum feugiat.&lt;/p&gt;
-  &lt;p id="myBookmark1"&gt;[&amp;nbsp;&lt;span class="intLink" onclick="showBookmark('#myBookmark2');"&gt;Aller au marque-page n°2&lt;/span&gt;&amp;nbsp;]&lt;/p&gt;
-  &lt;p&gt;Vivamus blandit massa ut metus mattis in fringilla lectus imperdiet. Proin ac ante a felis ornare vehicula. Fusce pellentesque lacus vitae eros convallis ut mollis magna pellentesque. Pellentesque placerat enim at lacus ultricies vitae facilisis nisi fringilla. In tincidunt tincidunt tincidunt. Nulla vitae tempor nisl. Etiam congue, elit vitae egestas mollis, ipsum nisi malesuada turpis, a volutpat arcu arcu id risus.&lt;/p&gt;
-  &lt;p&gt;Nam faucibus, ligula eu fringilla pulvinar, lectus tellus iaculis nunc, vitae scelerisque metus leo non metus. Proin mattis lobortis lobortis. Quisque accumsan faucibus erat, vel varius tortor ultricies ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec libero nunc. Nullam tortor nunc, elementum a consectetur et, ultrices eu orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisl eu sem vehicula egestas.&lt;/p&gt;
-  &lt;p&gt;Aenean viverra varius mauris, sed elementum lacus interdum non. Phasellus sit amet lectus vitae eros egestas pellentesque fermentum eget magna. Quisque mauris nisl, gravida vitae placerat et, condimentum id metus. Nulla eu est dictum dolor pulvinar volutpat. Pellentesque vitae sollicitudin nunc. Donec neque magna, lobortis id egestas nec, sodales quis lectus. Fusce cursus sollicitudin porta. Suspendisse ut tortor in mauris tincidunt rhoncus. Maecenas tincidunt fermentum facilisis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.&lt;/p&gt;
-  &lt;p&gt;Suspendisse turpis nisl, consectetur in lacinia ut, ornare vel mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non lectus eu turpis vulputate cursus. Mauris interdum tincidunt erat id pharetra. Nullam in libero elit, sed consequat lectus. Morbi odio nisi, porta vitae molestie ut, gravida ut nunc. Ut non est dui, id ullamcorper orci. Praesent vel elementum felis. Maecenas ornare, dui quis auctor hendrerit, turpis sem ullamcorper odio, in auctor magna metus quis leo. Morbi at odio ante.&lt;/p&gt;
-  &lt;p&gt;Curabitur est ipsum, porta ac viverra faucibus, eleifend sed eros. In sit amet vehicula tortor. Vestibulum viverra pellentesque erat a elementum. Integer commodo ultricies lorem, eget tincidunt risus viverra et. In enim turpis, porttitor ac ornare et, suscipit sit amet nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque vel ultrices nibh. Sed commodo aliquam aliquam. Nulla euismod, odio ut eleifend mollis, nisi dui gravida nibh, vitae laoreet turpis purus id ipsum. Donec convallis, velit non scelerisque bibendum, diam nulla auctor nunc, vel dictum risus ipsum sit amet est. Praesent ut nibh sit amet nibh congue pulvinar. Suspendisse dictum porttitor tempor.&lt;/p&gt;
-  &lt;p&gt;Vestibulum dignissim erat vitae lectus auctor ac bibendum eros semper. Integer aliquet, leo non ornare faucibus, risus arcu tristique dolor, a aliquet massa mauris quis arcu. In porttitor, lectus ac semper egestas, ligula magna laoreet libero, eu commodo mauris odio id ante. In hac habitasse platea dictumst. In pretium erat diam, nec consequat eros. Praesent augue mi, consequat sed porttitor at, volutpat vitae eros. Sed pretium pharetra dapibus. Donec auctor interdum erat, lacinia molestie nibh commodo ut. Maecenas vestibulum vulputate felis, ut ullamcorper arcu faucibus in. Curabitur id arcu est. In semper mollis lorem at pellentesque. Sed lectus nisl, vestibulum id scelerisque eu, feugiat et tortor. Pellentesque porttitor facilisis ultricies.&lt;/p&gt;
-  &lt;p id="myBookmark2"&gt;[&amp;nbsp;&lt;span class="intLink" onclick="showBookmark('#myBookmark1');"&gt;Aller au marque-page n°1&lt;/span&gt; | &lt;span class="intLink" onclick="showBookmark('#myBookmark1', false);"&gt;Aller au marque-page n°1 sans utiliser location.hash&lt;/span&gt; | &lt;span class="intLink" onclick="showBookmark('#myBookmark3');"&gt;Aller au marque-page n°3&lt;/span&gt;&amp;nbsp;]&lt;/p&gt;
-  &lt;p&gt;Phasellus tempus fringilla nunc, eget sagittis orci molestie vel. Nulla sollicitudin diam non quam iaculis ac porta justo venenatis. Quisque tellus urna, molestie vitae egestas sit amet, suscipit sed sem. Quisque nec lorem eu velit faucibus tristique ut ut dolor. Cras eu tortor ut libero placerat venenatis ut ut massa. Sed quis libero augue, et consequat libero. Morbi rutrum augue sed turpis elementum sed luctus nisl molestie. Aenean vitae purus risus, a semper nisl. Pellentesque malesuada, est id sagittis consequat, libero mauris tincidunt tellus, eu sagittis arcu purus rutrum eros. Quisque eget eleifend mi. Duis pharetra mi ac eros mattis lacinia rutrum ipsum varius.&lt;/p&gt;
-  &lt;p&gt;Fusce cursus pulvinar aliquam. Duis justo enim, ornare vitae elementum sed, porta a quam. Aliquam eu enim eu libero mollis tempus. Morbi ornare aliquam posuere. Proin faucibus luctus libero, sed ultrices lorem sagittis et. Vestibulum malesuada, ante nec molestie vehicula, quam diam mollis ipsum, rhoncus posuere mauris lectus in eros. Nullam feugiat ultrices augue, ac sodales sem mollis in.&lt;/p&gt;
-  &lt;p id="myBookmark3"&gt;&lt;em&gt;Voici le marque-page n°3&lt;/em&gt;&lt;/p&gt;
-  &lt;p&gt;Proin vitae sem non lorem pellentesque molestie. Nam tempus massa et turpis placerat sit amet sollicitudin orci sodales. Pellentesque enim enim, sagittis a lobortis ut, tempus sed arcu. Aliquam augue turpis, varius vel bibendum ut, aliquam at diam. Nam lobortis, dui eu hendrerit pellentesque, sem neque porttitor erat, non dapibus velit lectus in metus. Vestibulum sit amet felis enim. In quis est vitae nunc malesuada consequat nec nec sapien. Suspendisse aliquam massa placerat dui lacinia luctus sed vitae risus. Fusce tempus, neque id ultrices volutpat, mi urna auctor arcu, viverra semper libero sem vel enim. Mauris dictum, elit non placerat malesuada, libero elit euismod nibh, nec posuere massa arcu eu risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer urna velit, dapibus eget varius feugiat, pellentesque sit amet ligula. Maecenas nulla nisl, facilisis eu egestas scelerisque, mollis eget metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi sed congue mi.&lt;/p&gt;
-  &lt;p&gt;Fusce metus velit, pharetra at vestibulum nec, facilisis porttitor mi. Curabitur ligula sapien, fermentum vel porttitor id, rutrum sit amet magna. Sed sit amet sollicitudin turpis. Aenean luctus rhoncus dolor, et pulvinar ante egestas et. Donec ac massa orci, quis dapibus augue. Vivamus consectetur auctor pellentesque. Praesent vestibulum tincidunt ante sed consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce purus metus, imperdiet vitae iaculis convallis, bibendum vitae turpis.&lt;/p&gt;
-  &lt;p&gt;Fusce aliquet molestie dolor, in ornare dui sodales nec. In molestie sollicitudin felis a porta. Mauris nec orci sit amet orci blandit tristique congue nec nunc. Praesent et tellus sollicitudin mauris accumsan fringilla. Morbi sodales, justo eu sollicitudin lacinia, lectus sapien ullamcorper eros, quis molestie urna elit bibendum risus. Proin eget tincidunt quam. Nam luctus commodo mauris, eu posuere nunc luctus non. Nulla facilisi. Vivamus eget leo rhoncus quam accumsan fringilla. Aliquam sit amet lorem est. Nullam vel tellus nibh, id imperdiet orci. Integer egestas leo eu turpis blandit scelerisque.&lt;/p&gt;
-  &lt;p&gt;Etiam in blandit tellus. Integer sed varius quam. Vestibulum dapibus mi gravida arcu viverra blandit. Praesent tristique augue id sem adipiscing pellentesque. Sed sollicitudin, leo sed interdum elementum, nisi ante condimentum leo, eget ornare libero diam semper quam. Vivamus augue urna, porta eget ultrices et, dapibus ut ligula. Ut laoreet consequat faucibus. Praesent at lectus ut lectus malesuada mollis. Nam interdum adipiscing eros, nec sodales mi porta nec. Proin et quam vitae sem interdum aliquet. Proin vel odio at lacus vehicula aliquet.&lt;/p&gt;
-  &lt;p&gt;Etiam placerat dui ut sem ornare vel vestibulum augue mattis. Sed semper malesuada mi, eu bibendum lacus lobortis nec. Etiam fringilla elementum risus, eget consequat urna laoreet nec. Etiam mollis quam non sem convallis vel consectetur lectus ullamcorper. Aenean mattis lacus quis ligula mattis eget vestibulum diam hendrerit. In non placerat mauris. Praesent faucibus nunc quis eros sagittis viverra. In hac habitasse platea dictumst. Suspendisse eget nisl erat, ac molestie massa. Praesent mollis vestibulum tincidunt. Fusce suscipit laoreet malesuada. Aliquam erat volutpat. Aliquam dictum elementum rhoncus. Praesent in est massa, pulvinar sodales nunc. Pellentesque gravida euismod mi ac convallis.&lt;/p&gt;
-  &lt;p&gt;Mauris vel odio vel nulla facilisis lacinia. Aliquam ultrices est at leo blandit tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse porttitor adipiscing facilisis. Duis cursus quam iaculis augue interdum porttitor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis vulputate magna ac metus pretium condimentum. In tempus, est eget vestibulum blandit, velit massa dignissim nisl, ut scelerisque lorem neque vel velit. Maecenas fermentum commodo viverra. Curabitur a nibh non velit aliquam cursus. Integer semper condimentum tortor a pellentesque. Pellentesque semper, nisl id porttitor vehicula, sem dui feugiat lacus, vitae consequat augue urna vel odio.&lt;/p&gt;
-  &lt;p&gt;Vestibulum id neque nec turpis iaculis pulvinar et a massa. Vestibulum sed nibh vitae arcu eleifend egestas. Mauris fermentum ultrices blandit. Suspendisse vitae lorem libero. Aenean et pellentesque tellus. Morbi quis neque orci, eu dignissim dui. Fusce sollicitudin mauris ac arcu vestibulum imperdiet. Proin ultricies nisl sit amet enim imperdiet eu ornare dui tempus. Maecenas lobortis nisi a tortor vestibulum vel eleifend tellus vestibulum. Donec metus sapien, hendrerit a fermentum id, dictum quis libero.&lt;/p&gt;
-  &lt;p&gt;Pellentesque a lorem nulla, in tempor justo. Duis odio nisl, dignissim sed consequat sit amet, hendrerit ac neque. Nunc ac augue nec massa tempor rhoncus. Nam feugiat, tellus a varius euismod, justo nisl faucibus velit, ut vulputate justo massa eu nibh. Sed bibendum urna quis magna facilisis in accumsan dolor malesuada. Morbi sit amet nunc risus, in faucibus sem. Nullam sollicitudin magna sed sem mollis id commodo libero condimentum. Duis eu massa et lacus semper molestie ut adipiscing sem.&lt;/p&gt;
-  &lt;p&gt;Sed id nulla mi, eget suscipit eros. Aliquam tempus molestie rutrum. In quis varius elit. Nullam dignissim neque nec velit vulputate porttitor. Mauris ac ligula sit amet elit fermentum rhoncus. In tellus urna, pulvinar quis condimentum ut, porta nec justo. In hac habitasse platea dictumst. Proin volutpat elit id quam molestie ac commodo lacus sagittis. Quisque placerat, augue tempor placerat pulvinar, nisi nisi venenatis urna, eget convallis eros velit quis magna. Suspendisse volutpat iaculis quam, ut tristique lacus luctus quis.&lt;/p&gt;
-  &lt;p&gt;Nullam commodo suscipit lacus non aliquet. Phasellus ac nisl lorem, sed facilisis ligula. Nam cursus lobortis placerat. Sed dui nisi, elementum eu sodales ac, placerat sit amet mauris. Pellentesque dapibus tellus ut ipsum aliquam eu auctor dui vehicula. Quisque ultrices laoreet erat, at ultrices tortor sodales non. Sed venenatis luctus magna, ultricies ultricies nunc fringilla eget. Praesent scelerisque urna vitae nibh tristique varius consequat neque luctus. Integer ornare, erat a porta tempus, velit justo fermentum elit, a fermentum metus nisi eu ipsum. Vivamus eget augue vel dui viverra adipiscing congue ut massa. Praesent vitae eros erat, pulvinar laoreet magna. Maecenas vestibulum mollis nunc in posuere. Pellentesque sit amet metus a turpis lobortis tempor eu vel tortor. Cras sodales eleifend interdum.&lt;/p&gt;
-&lt;/body&gt;
-&lt;/html&gt;
-</pre>
-
-<p>La même chose mais avec un défilement animé :</p>
-
-<pre class="brush: js">
+    </style>
+  </head>
+
+<body>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices dolor ac dolor imperdiet ullamcorper. Suspendisse quam libero, luctus auctor mollis sed, malesuada condimentum magna. Quisque in ante tellus, in placerat est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec a mi magna, quis mattis dolor. Etiam sit amet ligula quis urna auctor imperdiet nec faucibus ante. Mauris vel consectetur dolor. Nunc eget elit eget velit pulvinar fringilla consectetur aliquam purus. Curabitur convallis, justo posuere porta egestas, velit erat ornare tortor, non viverra justo diam eget arcu. Phasellus adipiscing fermentum nibh ac commodo. Nam turpis nunc, suscipit a hendrerit vitae, volutpat non ipsum.</p>
+  <p>Duis lobortis sapien quis nisl luctus porttitor. In tempor semper libero, eu tincidunt dolor eleifend sit amet. Ut nec velit in dolor tincidunt rhoncus non non diam. Morbi auctor ornare orci, non euismod felis gravida nec. Curabitur elementum nisi a eros rutrum nec blandit diam placerat. Aenean tincidunt risus ut nisi consectetur cursus. Ut vitae quam elit. Donec dignissim est in quam tempor consequat. Aliquam aliquam diam non felis convallis suscipit. Nulla facilisi. Donec lacus risus, dignissim et fringilla et, egestas vel eros. Duis malesuada accumsan dui, at fringilla mauris bibendum quis. Cras adipiscing ultricies fermentum. Praesent bibendum condimentum feugiat.</p>
+  <p id="myBookmark1">[&nbsp;<span class="intLink" onclick="showBookmark('#myBookmark2');">Aller au marque-page n°2</span>&nbsp;]</p>
+  <p>Vivamus blandit massa ut metus mattis in fringilla lectus imperdiet. Proin ac ante a felis ornare vehicula. Fusce pellentesque lacus vitae eros convallis ut mollis magna pellentesque. Pellentesque placerat enim at lacus ultricies vitae facilisis nisi fringilla. In tincidunt tincidunt tincidunt. Nulla vitae tempor nisl. Etiam congue, elit vitae egestas mollis, ipsum nisi malesuada turpis, a volutpat arcu arcu id risus.</p>
+  <p>Nam faucibus, ligula eu fringilla pulvinar, lectus tellus iaculis nunc, vitae scelerisque metus leo non metus. Proin mattis lobortis lobortis. Quisque accumsan faucibus erat, vel varius tortor ultricies ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec libero nunc. Nullam tortor nunc, elementum a consectetur et, ultrices eu orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisl eu sem vehicula egestas.</p>
+  <p>Aenean viverra varius mauris, sed elementum lacus interdum non. Phasellus sit amet lectus vitae eros egestas pellentesque fermentum eget magna. Quisque mauris nisl, gravida vitae placerat et, condimentum id metus. Nulla eu est dictum dolor pulvinar volutpat. Pellentesque vitae sollicitudin nunc. Donec neque magna, lobortis id egestas nec, sodales quis lectus. Fusce cursus sollicitudin porta. Suspendisse ut tortor in mauris tincidunt rhoncus. Maecenas tincidunt fermentum facilisis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
+  <p>Suspendisse turpis nisl, consectetur in lacinia ut, ornare vel mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non lectus eu turpis vulputate cursus. Mauris interdum tincidunt erat id pharetra. Nullam in libero elit, sed consequat lectus. Morbi odio nisi, porta vitae molestie ut, gravida ut nunc. Ut non est dui, id ullamcorper orci. Praesent vel elementum felis. Maecenas ornare, dui quis auctor hendrerit, turpis sem ullamcorper odio, in auctor magna metus quis leo. Morbi at odio ante.</p>
+  <p>Curabitur est ipsum, porta ac viverra faucibus, eleifend sed eros. In sit amet vehicula tortor. Vestibulum viverra pellentesque erat a elementum. Integer commodo ultricies lorem, eget tincidunt risus viverra et. In enim turpis, porttitor ac ornare et, suscipit sit amet nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque vel ultrices nibh. Sed commodo aliquam aliquam. Nulla euismod, odio ut eleifend mollis, nisi dui gravida nibh, vitae laoreet turpis purus id ipsum. Donec convallis, velit non scelerisque bibendum, diam nulla auctor nunc, vel dictum risus ipsum sit amet est. Praesent ut nibh sit amet nibh congue pulvinar. Suspendisse dictum porttitor tempor.</p>
+  <p>Vestibulum dignissim erat vitae lectus auctor ac bibendum eros semper. Integer aliquet, leo non ornare faucibus, risus arcu tristique dolor, a aliquet massa mauris quis arcu. In porttitor, lectus ac semper egestas, ligula magna laoreet libero, eu commodo mauris odio id ante. In hac habitasse platea dictumst. In pretium erat diam, nec consequat eros. Praesent augue mi, consequat sed porttitor at, volutpat vitae eros. Sed pretium pharetra dapibus. Donec auctor interdum erat, lacinia molestie nibh commodo ut. Maecenas vestibulum vulputate felis, ut ullamcorper arcu faucibus in. Curabitur id arcu est. In semper mollis lorem at pellentesque. Sed lectus nisl, vestibulum id scelerisque eu, feugiat et tortor. Pellentesque porttitor facilisis ultricies.</p>
+  <p id="myBookmark2">[&nbsp;<span class="intLink" onclick="showBookmark('#myBookmark1');">Aller au marque-page n°1</span> | <span class="intLink" onclick="showBookmark('#myBookmark1', false);">Aller au marque-page n°1 sans utiliser location.hash</span> | <span class="intLink" onclick="showBookmark('#myBookmark3');">Aller au marque-page n°3</span>&nbsp;]</p>
+  <p>Phasellus tempus fringilla nunc, eget sagittis orci molestie vel. Nulla sollicitudin diam non quam iaculis ac porta justo venenatis. Quisque tellus urna, molestie vitae egestas sit amet, suscipit sed sem. Quisque nec lorem eu velit faucibus tristique ut ut dolor. Cras eu tortor ut libero placerat venenatis ut ut massa. Sed quis libero augue, et consequat libero. Morbi rutrum augue sed turpis elementum sed luctus nisl molestie. Aenean vitae purus risus, a semper nisl. Pellentesque malesuada, est id sagittis consequat, libero mauris tincidunt tellus, eu sagittis arcu purus rutrum eros. Quisque eget eleifend mi. Duis pharetra mi ac eros mattis lacinia rutrum ipsum varius.</p>
+  <p>Fusce cursus pulvinar aliquam. Duis justo enim, ornare vitae elementum sed, porta a quam. Aliquam eu enim eu libero mollis tempus. Morbi ornare aliquam posuere. Proin faucibus luctus libero, sed ultrices lorem sagittis et. Vestibulum malesuada, ante nec molestie vehicula, quam diam mollis ipsum, rhoncus posuere mauris lectus in eros. Nullam feugiat ultrices augue, ac sodales sem mollis in.</p>
+  <p id="myBookmark3"><em>Voici le marque-page n°3</em></p>
+  <p>Proin vitae sem non lorem pellentesque molestie. Nam tempus massa et turpis placerat sit amet sollicitudin orci sodales. Pellentesque enim enim, sagittis a lobortis ut, tempus sed arcu. Aliquam augue turpis, varius vel bibendum ut, aliquam at diam. Nam lobortis, dui eu hendrerit pellentesque, sem neque porttitor erat, non dapibus velit lectus in metus. Vestibulum sit amet felis enim. In quis est vitae nunc malesuada consequat nec nec sapien. Suspendisse aliquam massa placerat dui lacinia luctus sed vitae risus. Fusce tempus, neque id ultrices volutpat, mi urna auctor arcu, viverra semper libero sem vel enim. Mauris dictum, elit non placerat malesuada, libero elit euismod nibh, nec posuere massa arcu eu risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer urna velit, dapibus eget varius feugiat, pellentesque sit amet ligula. Maecenas nulla nisl, facilisis eu egestas scelerisque, mollis eget metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi sed congue mi.</p>
+  <p>Fusce metus velit, pharetra at vestibulum nec, facilisis porttitor mi. Curabitur ligula sapien, fermentum vel porttitor id, rutrum sit amet magna. Sed sit amet sollicitudin turpis. Aenean luctus rhoncus dolor, et pulvinar ante egestas et. Donec ac massa orci, quis dapibus augue. Vivamus consectetur auctor pellentesque. Praesent vestibulum tincidunt ante sed consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce purus metus, imperdiet vitae iaculis convallis, bibendum vitae turpis.</p>
+  <p>Fusce aliquet molestie dolor, in ornare dui sodales nec. In molestie sollicitudin felis a porta. Mauris nec orci sit amet orci blandit tristique congue nec nunc. Praesent et tellus sollicitudin mauris accumsan fringilla. Morbi sodales, justo eu sollicitudin lacinia, lectus sapien ullamcorper eros, quis molestie urna elit bibendum risus. Proin eget tincidunt quam. Nam luctus commodo mauris, eu posuere nunc luctus non. Nulla facilisi. Vivamus eget leo rhoncus quam accumsan fringilla. Aliquam sit amet lorem est. Nullam vel tellus nibh, id imperdiet orci. Integer egestas leo eu turpis blandit scelerisque.</p>
+  <p>Etiam in blandit tellus. Integer sed varius quam. Vestibulum dapibus mi gravida arcu viverra blandit. Praesent tristique augue id sem adipiscing pellentesque. Sed sollicitudin, leo sed interdum elementum, nisi ante condimentum leo, eget ornare libero diam semper quam. Vivamus augue urna, porta eget ultrices et, dapibus ut ligula. Ut laoreet consequat faucibus. Praesent at lectus ut lectus malesuada mollis. Nam interdum adipiscing eros, nec sodales mi porta nec. Proin et quam vitae sem interdum aliquet. Proin vel odio at lacus vehicula aliquet.</p>
+  <p>Etiam placerat dui ut sem ornare vel vestibulum augue mattis. Sed semper malesuada mi, eu bibendum lacus lobortis nec. Etiam fringilla elementum risus, eget consequat urna laoreet nec. Etiam mollis quam non sem convallis vel consectetur lectus ullamcorper. Aenean mattis lacus quis ligula mattis eget vestibulum diam hendrerit. In non placerat mauris. Praesent faucibus nunc quis eros sagittis viverra. In hac habitasse platea dictumst. Suspendisse eget nisl erat, ac molestie massa. Praesent mollis vestibulum tincidunt. Fusce suscipit laoreet malesuada. Aliquam erat volutpat. Aliquam dictum elementum rhoncus. Praesent in est massa, pulvinar sodales nunc. Pellentesque gravida euismod mi ac convallis.</p>
+  <p>Mauris vel odio vel nulla facilisis lacinia. Aliquam ultrices est at leo blandit tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse porttitor adipiscing facilisis. Duis cursus quam iaculis augue interdum porttitor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis vulputate magna ac metus pretium condimentum. In tempus, est eget vestibulum blandit, velit massa dignissim nisl, ut scelerisque lorem neque vel velit. Maecenas fermentum commodo viverra. Curabitur a nibh non velit aliquam cursus. Integer semper condimentum tortor a pellentesque. Pellentesque semper, nisl id porttitor vehicula, sem dui feugiat lacus, vitae consequat augue urna vel odio.</p>
+  <p>Vestibulum id neque nec turpis iaculis pulvinar et a massa. Vestibulum sed nibh vitae arcu eleifend egestas. Mauris fermentum ultrices blandit. Suspendisse vitae lorem libero. Aenean et pellentesque tellus. Morbi quis neque orci, eu dignissim dui. Fusce sollicitudin mauris ac arcu vestibulum imperdiet. Proin ultricies nisl sit amet enim imperdiet eu ornare dui tempus. Maecenas lobortis nisi a tortor vestibulum vel eleifend tellus vestibulum. Donec metus sapien, hendrerit a fermentum id, dictum quis libero.</p>
+  <p>Pellentesque a lorem nulla, in tempor justo. Duis odio nisl, dignissim sed consequat sit amet, hendrerit ac neque. Nunc ac augue nec massa tempor rhoncus. Nam feugiat, tellus a varius euismod, justo nisl faucibus velit, ut vulputate justo massa eu nibh. Sed bibendum urna quis magna facilisis in accumsan dolor malesuada. Morbi sit amet nunc risus, in faucibus sem. Nullam sollicitudin magna sed sem mollis id commodo libero condimentum. Duis eu massa et lacus semper molestie ut adipiscing sem.</p>
+  <p>Sed id nulla mi, eget suscipit eros. Aliquam tempus molestie rutrum. In quis varius elit. Nullam dignissim neque nec velit vulputate porttitor. Mauris ac ligula sit amet elit fermentum rhoncus. In tellus urna, pulvinar quis condimentum ut, porta nec justo. In hac habitasse platea dictumst. Proin volutpat elit id quam molestie ac commodo lacus sagittis. Quisque placerat, augue tempor placerat pulvinar, nisi nisi venenatis urna, eget convallis eros velit quis magna. Suspendisse volutpat iaculis quam, ut tristique lacus luctus quis.</p>
+  <p>Nullam commodo suscipit lacus non aliquet. Phasellus ac nisl lorem, sed facilisis ligula. Nam cursus lobortis placerat. Sed dui nisi, elementum eu sodales ac, placerat sit amet mauris. Pellentesque dapibus tellus ut ipsum aliquam eu auctor dui vehicula. Quisque ultrices laoreet erat, at ultrices tortor sodales non. Sed venenatis luctus magna, ultricies ultricies nunc fringilla eget. Praesent scelerisque urna vitae nibh tristique varius consequat neque luctus. Integer ornare, erat a porta tempus, velit justo fermentum elit, a fermentum metus nisi eu ipsum. Vivamus eget augue vel dui viverra adipiscing congue ut massa. Praesent vitae eros erat, pulvinar laoreet magna. Maecenas vestibulum mollis nunc in posuere. Pellentesque sit amet metus a turpis lobortis tempor eu vel tortor. Cras sodales eleifend interdum.</p>
+</body>
+</html>
+```
+
+La même chose mais avec un défilement animé :
+
+```js
 var showBookmark = (function () {
   var  _useHash, _scrollX, _scrollY, _nodeX, _nodeY, _itFrame, _scrollId = -1, _bookMark,
    /*
@@ -149,17 +148,17 @@ var showBookmark = (function () {
    nDuration = 200, nFrames = 10;
 
   function _next () {
-  if (_itFrame &gt; nFrames) { clearInterval(_scrollId); _scrollId = -1; return; }
+  if (_itFrame > nFrames) { clearInterval(_scrollId); _scrollId = -1; return; }
   _isBot = true;
   document.documentElement.scrollTop = Math.round(_scrollY + (_nodeY - _scrollY) * _itFrame / nFrames);
   document.documentElement.scrollLeft = Math.round(_scrollX + (_nodeX - _scrollX) * _itFrame / nFrames);
-  if (_useHash &amp;&amp; _itFrame === nFrames) { location.hash = _bookMark; }
+  if (_useHash && _itFrame === nFrames) { location.hash = _bookMark; }
   _itFrame++;
   }
 
   function _chkOwner () {
   if (_isBot) { _isBot = false; return; }
-  if (_scrollId &gt; -1) { clearInterval(_scrollId); _scrollId = -1; }
+  if (_scrollId > -1) { clearInterval(_scrollId); _scrollId = -1; }
   }
 
   if (window.addEventListener) { window.addEventListener("scroll", _chkOwner, false); }
@@ -177,21 +176,19 @@ var showBookmark = (function () {
   if (_scrollId === -1) { _scrollId = setInterval(_next, Math.round(nDuration / nFrames)); }
   };
 })();
-</pre>
+```
 
-<h2 id="spécifications">Spécifications</h2>
+## Spécifications
 
-<p>{{Specifications}}</p>
+{{Specifications}}
 
-<h2 id="compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>L'interface qui décrit la valeur renvoyée par cette propriété&nbsp;: <a href="/fr/docs/Web/API/Location"><code>Location</code></a>.</li>
-  <li>Une information similaire, mais attachée au document courant&nbsp;: <a href="/fr/docs/Web/API/Document/location"><code>Document.location</code></a>.</li>
-  <li><a href="/fr/docs/Web/API/History_API">Manipuler l'historique du navigateur avec l'API History</a></li>
-  <li><a href="/fr/docs/Web/API/Window/hashchange_event"><code>hashchange</code></a></li>
-</ul>
+- L'interface qui décrit la valeur renvoyée par cette propriété : [`Location`](/fr/docs/Web/API/Location).
+- Une information similaire, mais attachée au document courant : [`Document.location`](/fr/docs/Web/API/Document/location).
+- [Manipuler l'historique du navigateur avec l'API History](/fr/docs/Web/API/History_API)
+- [`hashchange`](/fr/docs/Web/API/Window/hashchange_event)
diff --git a/files/fr/web/api/window/locationbar/index.md b/files/fr/web/api/window/locationbar/index.md
index 294652fb88..3a7a8cc795 100644
--- a/files/fr/web/api/window/locationbar/index.md
+++ b/files/fr/web/api/window/locationbar/index.md
@@ -9,64 +9,47 @@ tags:
   - Window
 translation_of: Web/API/Window/locationbar
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}
 
-<p>Renvoie l'objet <code>locationbar</code>, dont la visibilité peut être vérifiée.</p>
+Renvoie l'objet `locationbar`, dont la visibilité peut être vérifiée.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var>objRef</var> = window.locationbar
-</pre>
+    objRef = window.locationbar
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>L'exemple HTML complet suivant montre comment la propriété <code>visible</code> de l'objet <code>locationbar</code> est utilisée.</p>
+L'exemple HTML complet suivant montre comment la propriété `visible` de l'objet `locationbar` est utilisée.
 
-<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;Divers tests DOM&lt;/title&gt;
+```html
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+<meta charset="UTF-8" />
+<title>Divers tests DOM</title>
 
-&lt;script&gt;
+<script>
 var visible = window.locationbar.visible;
-&lt;/script&gt;
+</script>
 
-&lt;/head&gt;
-&lt;body&gt;
-  &lt;p&gt;Divers tests DOM&lt;/p&gt;
-&lt;/body&gt;
-&lt;/html&gt;
-</pre>
+</head>
+<body>
+  <p>Divers tests DOM</p>
+</body>
+</html>
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'browsers.html#dom-window-locationbar', 'Window.locationbar')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-window-locationbar', 'Window.locationbar')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                            | Statut                           | Commentaires |
+| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------ |
+| {{SpecName('HTML WHATWG', 'browsers.html#dom-window-locationbar', 'Window.locationbar')}} | {{Spec2('HTML WHATWG')}} |              |
+| {{SpecName('HTML5 W3C', 'browsers.html#dom-window-locationbar', 'Window.locationbar')}}     | {{Spec2('HTML5 W3C')}}     |              |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Window.locationbar")}}</p>
+{{Compat("api.Window.locationbar")}}
 
-<h2 id="Voir_également">Voir également</h2>
+## Voir également
 
-<ul>
- <li>{{domxref("window.locationbar")}}, {{domxref("window.menubar")}}, {{domxref("window.personalbar")}}, {{domxref("window.scrollbars")}}, {{domxref("window.statusbar")}}, {{domxref("window.toolbar")}}</li>
-</ul>
+- {{domxref("window.locationbar")}}, {{domxref("window.menubar")}}, {{domxref("window.personalbar")}}, {{domxref("window.scrollbars")}}, {{domxref("window.statusbar")}}, {{domxref("window.toolbar")}}
diff --git a/files/fr/web/api/window/matchmedia/index.md b/files/fr/web/api/window/matchmedia/index.md
index 77fea4b292..bc1748b1cc 100644
--- a/files/fr/web/api/window/matchmedia/index.md
+++ b/files/fr/web/api/window/matchmedia/index.md
@@ -3,49 +3,43 @@ title: window.matchMedia
 slug: Web/API/Window/matchMedia
 translation_of: Web/API/Window/matchMedia
 ---
-<div>{{ApiRef}}</div>
-
-<p>Retourne un nouvel objet {{domxref("MediaQueryList")}} contenant les résultats de la chaîne de caractères <a href="/en-US/docs/CSS/Media_queries">media query</a> spécifiée.</p>
-<h2 id="Syntax">Syntaxe</h2>
-<pre class="syntaxbox"><em>mql</em> = window.matchMedia(<em>mediaQueryString</em>)</pre>
-<p>Ici, <code>mediaQueryString</code> est une chaîne de caractère représentant la media query pour laquelle on retourne un nouvel objet {{domxref("MediaQueryList")}}.</p>
-<h2 id="Example">Exemple</h2>
-<pre class="brush: js">if (window.matchMedia("(min-width: 400px)").matches) {
+{{ApiRef}}
+
+Retourne un nouvel objet {{domxref("MediaQueryList")}} contenant les résultats de la chaîne de caractères [media query](/en-US/docs/CSS/Media_queries) spécifiée.
+
+## Syntaxe
+
+    mql = window.matchMedia(mediaQueryString)
+
+Ici, `mediaQueryString` est une chaîne de caractère représentant la media query pour laquelle on retourne un nouvel objet {{domxref("MediaQueryList")}}.
+
+## Exemple
+
+```js
+if (window.matchMedia("(min-width: 400px)").matches) {
   /* the view port is at least 400 pixels wide */
 } else {
   /* the view port is less than 400 pixels wide */
-}</pre>
-<p>Ce code permet de gérer la mise en page d'une manière différente quand l'écran est moins large.</p>
-<p>Voir <a href="/en-US/docs/DOM/Using_media_queries_from_code">Utiliser les media queries avec du code</a> pour plus d'exemples.</p>
-
-<h2 id="Specifications">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("CSSOM View", "#dom-window-matchmedia", "Window.matchMedia()")}}</td>
-      <td>{{Spec2("CSSOM View")}}</td>
-      <td>Définition initiale.</td>
-    </tr>
-  </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Window.matchMedia")}}</p>
-
-<h2 id="See_also">Voir aussi</h2>
-
-<ul>
- <li><a href="/en-US/docs/CSS/Media_queries">Media queries</a></li>
- <li><a href="/en-US/docs/DOM/Using_media_queries_from_code">Using media queries from code</a></li>
- <li>{{domxref("MediaQueryList")}}</li>
- <li>{{domxref("MediaQueryListListener")}}</li>
-</ul>
+}
+```
+
+Ce code permet de gérer la mise en page d'une manière différente quand l'écran est moins large.
+
+Voir [Utiliser les media queries avec du code](/en-US/docs/DOM/Using_media_queries_from_code) pour plus d'exemples.
+
+## Spécifications
+
+| Spécification                                                                                        | Statut                           | Commentaire          |
+| ---------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName("CSSOM View", "#dom-window-matchmedia", "Window.matchMedia()")}} | {{Spec2("CSSOM View")}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Window.matchMedia")}}
+
+## Voir aussi
+
+- [Media queries](/en-US/docs/CSS/Media_queries)
+- [Using media queries from code](/en-US/docs/DOM/Using_media_queries_from_code)
+- {{domxref("MediaQueryList")}}
+- {{domxref("MediaQueryListListener")}}
diff --git a/files/fr/web/api/window/menubar/index.md b/files/fr/web/api/window/menubar/index.md
index 6e5fc9371d..8744ac7367 100644
--- a/files/fr/web/api/window/menubar/index.md
+++ b/files/fr/web/api/window/menubar/index.md
@@ -9,64 +9,47 @@ tags:
   - Window
 translation_of: Web/API/Window/menubar
 ---
-<div>{{ APIRef() }}</div>
+{{ APIRef() }}
 
-<p>La propriété <code><strong>Window.menubar</strong></code> renvoie l'objet <code>menubar</code>, dont la visibilité peut être vérifiée.</p>
+La propriété **`Window.menubar`** renvoie l'objet `menubar`, dont la visibilité peut être vérifiée.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>objRef</em> = <em>window</em>.menubar
-</pre>
+    objRef = window.menubar
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>L'exemple HTML complet suivant montre comment la propriété <code>visible</code> de l'objet <code>menubar</code> est utilisée.</p>
+L'exemple HTML complet suivant montre comment la propriété `visible` de l'objet `menubar` est utilisée.
 
-<pre class="brush:html">&lt;html&gt;
-&lt;head&gt;
-  &lt;title&gt;Divers Tests DOM&lt;/title&gt;
-  &lt;script&gt;
+```html
+<html>
+<head>
+  <title>Divers Tests DOM</title>
+  <script>
     var visible = window.menubar.visible;
-  &lt;/script&gt;
-&lt;/head&gt;
-&lt;body&gt;
-  &lt;p&gt;Divers Tests DOM&lt;/p&gt;
-&lt;/body&gt;
-&lt;/html&gt;
-</pre>
+  </script>
+</head>
+<body>
+  <p>Divers Tests DOM</p>
+</body>
+</html>
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'browsers.html#dom-window-menubar', 'Window.menubar')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-window-menubar', 'Window.menubar')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                | Statut                           | Commentaire |
+| ------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- |
+| {{SpecName('HTML WHATWG', 'browsers.html#dom-window-menubar', 'Window.menubar')}} | {{Spec2('HTML WHATWG')}} |             |
+| {{SpecName('HTML5 W3C', 'browsers.html#dom-window-menubar', 'Window.menubar')}}     | {{Spec2('HTML5 W3C')}}     |             |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Window.menubar")}}</p>
+{{Compat("api.Window.menubar")}}
 
-<h2 id="Voir_également">Voir également</h2>
+## Voir également
 
-<ul>
- <li>{{domxref("Window.locationbar")}}</li>
- <li>{{domxref("Window.personalbar")}}</li>
- <li>{{domxref("Window.scrollbars")}}</li>
- <li>{{domxref("Window.statusbar")}}</li>
- <li>{{domxref("Window.toolbar")}}</li>
-</ul>
+- {{domxref("Window.locationbar")}}
+- {{domxref("Window.personalbar")}}
+- {{domxref("Window.scrollbars")}}
+- {{domxref("Window.statusbar")}}
+- {{domxref("Window.toolbar")}}
diff --git a/files/fr/web/api/window/message_event/index.md b/files/fr/web/api/window/message_event/index.md
index 7122fbb2d9..f4e019bd9b 100644
--- a/files/fr/web/api/window/message_event/index.md
+++ b/files/fr/web/api/window/message_event/index.md
@@ -6,77 +6,78 @@ tags:
   - Window
 translation_of: Web/API/Window/message_event
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}
 
-<p>L'événement <code>message</code> est déclenché sur un objet {{domxref('Window')}} lorsque la fenêtre reçoit un message, par exemple d'un appel a <code><a href="/en-US/docs/Web/API/Window/postMessage">Window.postMessage()</a></code> depuis un autre contexte de navigation.</p>
+L'événement `message` est déclenché sur un objet {{domxref('Window')}} lorsque la fenêtre reçoit un message, par exemple d'un appel a [`Window.postMessage()`](/en-US/docs/Web/API/Window/postMessage) depuis un autre contexte de navigation.
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row">Bulles</th>
-   <td>Non</td>
-  </tr>
-  <tr>
-   <th scope="row">Annulable</th>
-   <td>Non</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface</th>
-   <td>{{domxref("MessageEvent")}}</td>
-  </tr>
-  <tr>
-   <th scope="row">Propriété de gestionnaire d'événements</th>
-   <td><code><a href="/en-US/docs/Web/API/WindowEventHandlers/onmessage">onmessage</a></code></td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Bulles</th>
+      <td>Non</td>
+    </tr>
+    <tr>
+      <th scope="row">Annulable</th>
+      <td>Non</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface</th>
+      <td>{{domxref("MessageEvent")}}</td>
+    </tr>
+    <tr>
+      <th scope="row">Propriété de gestionnaire d'événements</th>
+      <td>
+        <code
+          ><a href="/en-US/docs/Web/API/WindowEventHandlers/onmessage"
+            >onmessage</a
+          ></code
+        >
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Supposons qu'un script envoie un message à un contexte de navigation différent, tel qu'un autre <code><a href="/en-US/docs/Web/HTML/Element/iframe">&lt;iframe&gt;</a></code>, en utilisant un code comme celui-ci:</p>
+Supposons qu'un script envoie un message à un contexte de navigation différent, tel qu'un autre [`<iframe>`](/en-US/docs/Web/HTML/Element/iframe), en utilisant un code comme celui-ci:
 
-<pre class="brush: js">const targetFrame = window.top.frames[1];
+```js
+const targetFrame = window.top.frames[1];
 const targetOrigin = 'https://exemple.org';
 const windowMessageButton = document.querySelector('#window-message');
 
-windowMessageButton.addEventListener('click', () =&gt; {
+windowMessageButton.addEventListener('click', () => {
     targetFrame.postMessage('bonjour', targetOrigin);
-});</pre>
+});
+```
 
-<p>Le récepteur peut écouter le message en utilisant <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> avec un code comme celui-ci:</p>
+Le récepteur peut écouter le message en utilisant [`addEventListener()`](/en-US/docs/Web/API/EventTarget/addEventListener) avec un code comme celui-ci:
 
-<pre class="brush: js">window.addEventListener('message', (event) =&gt; {
+```js
+window.addEventListener('message', (event) => {
     console.log(`Message reçu: ${event.data}`);
-});</pre>
+});
+```
 
-<p>Alternativement l'écouteur peut utiliser la propriété du gestionnaire d'événements <code><a href="/en-US/docs/Web/API/WindowEventHandlers/onmessage">onmessage</a></code>:</p>
+Alternativement l'écouteur peut utiliser la propriété du gestionnaire d'événements [`onmessage`](/en-US/docs/Web/API/WindowEventHandlers/onmessage):
 
-<pre class="brush: js">window.onmessage = (event) =&gt; {
+```js
+window.onmessage = (event) => {
     console.log(`Message reçu: ${event.data}`);
-};</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'indices.html#event-message')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-  </tr>
- </tbody>
-</table>
+};
+```
+
+## Spécifications
+
+| Spécification                                                                | Statut                           |
+| ---------------------------------------------------------------------------- | -------------------------------- |
+| {{SpecName('HTML WHATWG', 'indices.html#event-message')}} | {{Spec2('HTML WHATWG')}} |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Window.message_event")}}</p>
+{{Compat("api.Window.message_event")}}
 
-<h2 id="Voir_également">Voir également</h2>
+## Voir également
 
-<ul>
- <li>Événements liés: <code><a href="/docs/Web/API/Window/messageerror_event">messageerror</a></code>.</li>
- <li><code><a href="/en-US/docs/Web/API/Window/postMessage">Window.postMessage()</a></code>.</li>
-</ul>
+- Événements liés: [`messageerror`](/docs/Web/API/Window/messageerror_event).
+- [`Window.postMessage()`](/en-US/docs/Web/API/Window/postMessage).
diff --git a/files/fr/web/api/window/messageerror_event/index.md b/files/fr/web/api/window/messageerror_event/index.md
index 0f63b05e44..96b06cc4b7 100644
--- a/files/fr/web/api/window/messageerror_event/index.md
+++ b/files/fr/web/api/window/messageerror_event/index.md
@@ -9,69 +9,62 @@ tags:
   - Window
 translation_of: Web/API/Window/messageerror_event
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}
 
-<p>L'événement <code>messageerror</code> est déclenché sur un objet {{domxref('Window')}} lorsqu'il reçoit un message qui ne peut pas être désérialisé.</p>
+L'événement `messageerror` est déclenché sur un objet {{domxref('Window')}} lorsqu'il reçoit un message qui ne peut pas être désérialisé.
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row">Bulles</th>
-   <td>Non</td>
-  </tr>
-  <tr>
-   <th scope="row">Annulable</th>
-   <td>Non</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface</th>
-   <td>{{domxref("MessageEvent")}}</td>
-  </tr>
-  <tr>
-   <th scope="row">Propriété de gestionnaire d'événements</th>
-   <td>{{domxref("WindowEventHandlers/onmessageerror", "onmessageerror")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Bulles</th>
+      <td>Non</td>
+    </tr>
+    <tr>
+      <th scope="row">Annulable</th>
+      <td>Non</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface</th>
+      <td>{{domxref("MessageEvent")}}</td>
+    </tr>
+    <tr>
+      <th scope="row">Propriété de gestionnaire d'événements</th>
+      <td>
+        {{domxref("WindowEventHandlers/onmessageerror", "onmessageerror")}}
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Écoutez <code>messageerror</code> en utilisant {{domxref("EventTarget/addEventListener", "addEventListener()")}} :</p>
+Écoutez `messageerror` en utilisant {{domxref("EventTarget/addEventListener", "addEventListener()")}} :
 
-<pre class="brush: js">window.addEventListener('messageerror', (event) =&gt; {
+```js
+window.addEventListener('messageerror', (event) => {
     console.error(event);
-});</pre>
+});
+```
 
-<p>Idem, mais en utilisant la propriété de gestionnaire d'événements {{domxref("WindowEventHandlers/onmessageerror", "onmessageerror")}} :</p>
+Idem, mais en utilisant la propriété de gestionnaire d'événements {{domxref("WindowEventHandlers/onmessageerror", "onmessageerror")}} :
 
-<pre class="brush: js">window.onmessageerror = (event) =&gt; {
+```js
+window.onmessageerror = (event) => {
     console.error(event);
-};</pre>
+};
+```
 
-<h2 id="Spécifications">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', 'indices.html#event-messageerror')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                        | Statut                           |
+| ------------------------------------------------------------------------------------ | -------------------------------- |
+| {{SpecName('HTML WHATWG', 'indices.html#event-messageerror')}} | {{Spec2('HTML WHATWG')}} |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Window.messageerror_event")}}</p>
+{{Compat("api.Window.messageerror_event")}}
 
-<h2 id="Voir_également">Voir également</h2>
+## Voir également
 
-<ul>
- <li>{{domxref("Window.postMessage()")}}</li>
- <li>Événements liés: {{domxref("Window/message_event", "message")}}.</li>
-</ul>
+- {{domxref("Window.postMessage()")}}
+- Événements liés: {{domxref("Window/message_event", "message")}}.
diff --git a/files/fr/web/api/window/mozinnerscreenx/index.md b/files/fr/web/api/window/mozinnerscreenx/index.md
index 3cce6881b6..ec50d45c98 100644
--- a/files/fr/web/api/window/mozinnerscreenx/index.md
+++ b/files/fr/web/api/window/mozinnerscreenx/index.md
@@ -10,38 +10,32 @@ tags:
   - Window
 translation_of: Web/API/Window/mozInnerScreenX
 ---
-<div>{{APIRef}}{{gecko_minversion_header("1.9.2")}}</div>
+{{APIRef}}{{gecko_minversion_header("1.9.2")}}
 
-<h2 id="Résumé">Résumé</h2>
+## Résumé
 
-<p>Obtient la coordonnée X du coin supérieur gauche de la fenêtre de la fenêtre, en coordonnées d'écran.</p>
+Obtient la coordonnée X du coin supérieur gauche de la fenêtre de la fenêtre, en coordonnées d'écran.
 
-<div class="note">
-  <p><strong>Note :</strong> Cette coordonnée est indiquée en pixels CSS et non en pixels matériels. Cela signifie qu'il peut être affecté par le niveau de zoom; pour calculer le nombre réel de pixels d'écran physiques, vous devez utiliser la propriété<a href="/en-US/docs/XPCOM_Interface_Reference/nsIDOMWindowUtils"> <code>nsIDOMWindowUtils.screenPixelsPerCSSPixel</code></a>.</p>
-</div>
+> **Note :** Cette coordonnée est indiquée en pixels CSS et non en pixels matériels. Cela signifie qu'il peut être affecté par le niveau de zoom; pour calculer le nombre réel de pixels d'écran physiques, vous devez utiliser la propriété[ `nsIDOMWindowUtils.screenPixelsPerCSSPixel`](/en-US/docs/XPCOM_Interface_Reference/nsIDOMWindowUtils).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var>screenX</var> = window.mozInnerScreenX;</pre>
+    screenX = window.mozInnerScreenX;
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<ul>
- <li><var>screenX</var> stocke la valeur de la propriété <code>window.mozInnerScreenX</code>.</li>
- <li>La propriété <code>window.mozInnerScreenX</code> est une valeur en lecture seule à virgule flottante; il n'a pas de valeur par défaut.</li>
-</ul>
+- _screenX_ stocke la valeur de la propriété `window.mozInnerScreenX`.
+- La propriété `window.mozInnerScreenX` est une valeur en lecture seule à virgule flottante; il n'a pas de valeur par défaut.
 
-<h2 id="Spécification">Spécification</h2>
+## Spécification
 
-<p>Ne fait partie d'aucune spécification ou recommandation technique du W3C.</p>
+Ne fait partie d'aucune spécification ou recommandation technique du W3C.
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Window.mozInnerScreenX")}}</p>
+{{Compat("api.Window.mozInnerScreenX")}}
 
-<h2 id="Voir_également">Voir également</h2>
+## Voir également
 
-<ul>
- <li>{{domxref("window.mozInnerScreenY")}}</li>
- <li><a href="/en-US/docs/XPCOM_Interface_Reference/nsIDOMWindowUtils"><code>nsIDOMWindowUtils.screenPixelsPerCSSPixel</code></a></li>
-</ul>
+- {{domxref("window.mozInnerScreenY")}}
+- [`nsIDOMWindowUtils.screenPixelsPerCSSPixel`](/en-US/docs/XPCOM_Interface_Reference/nsIDOMWindowUtils)
diff --git a/files/fr/web/api/window/mozinnerscreeny/index.md b/files/fr/web/api/window/mozinnerscreeny/index.md
index 2b9ebd8564..08dc02589e 100644
--- a/files/fr/web/api/window/mozinnerscreeny/index.md
+++ b/files/fr/web/api/window/mozinnerscreeny/index.md
@@ -10,38 +10,32 @@ tags:
   - Window
 translation_of: Web/API/Window/mozInnerScreenY
 ---
-<div>{{APIRef}}{{gecko_minversion_header("1.9.2")}}</div>
+{{APIRef}}{{gecko_minversion_header("1.9.2")}}
 
-<h2 id="Résumé">Résumé</h2>
+## Résumé
 
-<p>Obtient la coordonnée Y du coin supérieur gauche de la fenêtre de la fenêtre, en coordonnées d'écran.</p>
+Obtient la coordonnée Y du coin supérieur gauche de la fenêtre de la fenêtre, en coordonnées d'écran.
 
-<div class="note">
-  <p><strong>Note :</strong> Cette coordonnée est indiquée en pixels CSS et non en pixels matériels. Cela signifie qu'il peut être affecté par le niveau de zoom; pour calculer le nombre réel de pixels d'écran physiques, vous devez utiliser la propriété<a href="/en-US/docs/XPCOM_Interface_Reference/nsIDOMWindowUtils"> <code>nsIDOMWindowUtils.screenPixelsPerCSSPixel</code></a>.</p>
-</div>
+> **Note :** Cette coordonnée est indiquée en pixels CSS et non en pixels matériels. Cela signifie qu'il peut être affecté par le niveau de zoom; pour calculer le nombre réel de pixels d'écran physiques, vous devez utiliser la propriété[ `nsIDOMWindowUtils.screenPixelsPerCSSPixel`](/en-US/docs/XPCOM_Interface_Reference/nsIDOMWindowUtils).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var>screenY</var> = window.mozInnerScreenY;</pre>
+    screenY = window.mozInnerScreenY;
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<ul>
- <li><var>screenY</var> stocke la valeur de la propriété <code>window.mozInnerScreenY</code>.</li>
- <li>La propriété <code>window.mozInnerScreenY</code> est une valeur en lecture seule à virgule flottante; il n'a pas de valeur par défaut.</li>
-</ul>
+- _screenY_ stocke la valeur de la propriété `window.mozInnerScreenY`.
+- La propriété `window.mozInnerScreenY` est une valeur en lecture seule à virgule flottante; il n'a pas de valeur par défaut.
 
-<h2 id="Spécification">Spécification</h2>
+## Spécification
 
-<p>Ne fait partie d'aucune spécification ou recommandation technique du W3C.</p>
+Ne fait partie d'aucune spécification ou recommandation technique du W3C.
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Window.mozInnerScreenY")}}</p>
+{{Compat("api.Window.mozInnerScreenY")}}
 
-<h2 id="Voir_également">Voir également</h2>
+## Voir également
 
-<ul>
- <li>{{domxref("window.mozInnerScreenX")}}</li>
- <li><a href="/en-US/docs/XPCOM_Interface_Reference/nsIDOMWindowUtils"><code>nsIDOMWindowUtils.screenPixelsPerCSSPixel</code></a></li>
-</ul>
+- {{domxref("window.mozInnerScreenX")}}
+- [`nsIDOMWindowUtils.screenPixelsPerCSSPixel`](/en-US/docs/XPCOM_Interface_Reference/nsIDOMWindowUtils)
diff --git a/files/fr/web/api/window/mozpaintcount/index.md b/files/fr/web/api/window/mozpaintcount/index.md
index a6f3d9eb7c..4b28a2bb09 100644
--- a/files/fr/web/api/window/mozpaintcount/index.md
+++ b/files/fr/web/api/window/mozpaintcount/index.md
@@ -3,7 +3,7 @@ title: Window.mozPaintCount
 slug: Web/API/Window/mozPaintCount
 tags:
   - API
-  - 'API:Mozilla Extensions'
+  - API:Mozilla Extensions
   - Déprécié
   - HTML DOM
   - NeedsExample
@@ -13,23 +13,21 @@ tags:
   - Window
 translation_of: Web/API/Window/mozPaintCount
 ---
-<p>{{APIRef("Mozilla Extensions")}}{{Non-standard_Header}}{{Obsolete_Header("Gecko72")}}{{Gecko_MinVersion_Header("2.0")}}</p>
+{{APIRef("Mozilla Extensions")}}{{Non-standard_Header}}{{Obsolete_Header("Gecko72")}}{{Gecko_MinVersion_Header("2.0")}}
 
-<p>Renvoie le nombre de fois où le document actuel a été peint à l'écran dans cette fenêtre.</p>
+Renvoie le nombre de fois où le document actuel a été peint à l'écran dans cette fenêtre.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><code>var <em>paintCount</em> = window.mozPaintCount;</code></pre>
+    var paintCount = window.mozPaintCount;
 
-<ul>
- <li><code><em>paintCount</em></code> stocke la valeur de la propriété <code>window.mozPaintCount</code>.</li>
- <li>La valeur <code>window.mozPaintCount</code> est <code>longue</code>, et commence à zéro lorsque le document est créé pour la première fois, en incrémentant de un à chaque fois que le document est peint.</li>
-</ul>
+- `paintCount` stocke la valeur de la propriété `window.mozPaintCount`.
+- La valeur `window.mozPaintCount` est `longue`, et commence à zéro lorsque le document est créé pour la première fois, en incrémentant de un à chaque fois que le document est peint.
 
-<h2 id="Specification">Spécification</h2>
+## Spécification
 
-<p>Ne fait partie d'aucune spécification ou recommandation du <abbr>W3C</abbr>.</p>
+Ne fait partie d'aucune spécification ou recommandation du W3C.
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Window.mozPaintCount")}}</p>
+{{Compat("api.Window.mozPaintCount")}}
diff --git a/files/fr/web/api/window/name/index.md b/files/fr/web/api/window/name/index.md
index ef7efa9448..73ab042772 100644
--- a/files/fr/web/api/window/name/index.md
+++ b/files/fr/web/api/window/name/index.md
@@ -8,47 +8,34 @@ tags:
   - Reference
 translation_of: Web/API/Window/name
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}
 
-<h2 id="En_bref">En bref</h2>
+## En bref
 
-<p>Récupère ou définit le nom de la fenêtre.</p>
+Récupère ou définit le nom de la fenêtre.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js"><var>string</var> = window.name;
-window.name = <var>string</var>;
-</pre>
+```js
+string = window.name;
+window.name = string;
+```
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush:js">window.name = "lab_view";
-</pre>
+```js
+window.name = "lab_view";
+```
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p>Les noms de fenêtres sont principalement utilisés pour définir les cibles de liens hypertextes et de formulaires. Les fenêtres n'ont pas besoin d'être nommées.</p>
+Les noms de fenêtres sont principalement utilisés pour définir les cibles de liens hypertextes et de formulaires. Les fenêtres n'ont pas besoin d'être nommées.
 
-<p>Les noms de fenêtres ont en outre été utilisés par quelques <em>frameworks </em>pour le support des échanges de messages inter-domaines (par exemple <a href="http://www.thomasfrank.se/sessionvars.html">SessionVars</a> et <a href="http://www.sitepen.com/blog/2008/07/22/windowname-transport/">dojox.io.windowName</a> de Dojo) comme une alternative plus sécurisée à JSONP. Toutefois, les applications web modernes manipulant des données sensibles devraient utiliser l'<a href="/fr/docs/Web/API/Window/postMessage">API postMessage</a> pour les échanges de messages inter-domaines plutôt que s'appuyer sur <code>window.name</code>.</p>
+Les noms de fenêtres ont en outre été utilisés par quelques _frameworks_ pour le support des échanges de messages inter-domaines (par exemple [SessionVars](http://www.thomasfrank.se/sessionvars.html) et [dojox.io.windowName](http://www.sitepen.com/blog/2008/07/22/windowname-transport/) de Dojo) comme une alternative plus sécurisée à JSONP. Toutefois, les applications web modernes manipulant des données sensibles devraient utiliser l'[API postMessage](/fr/docs/Web/API/Window/postMessage) pour les échanges de messages inter-domaines plutôt que s'appuyer sur `window.name`.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'browsers.html#dom-name', 'Window.name')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-name', 'Window.name')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Specification                                                                                | Status                           | Comment |
+| -------------------------------------------------------------------------------------------- | -------------------------------- | ------- |
+| {{SpecName('HTML WHATWG', 'browsers.html#dom-name', 'Window.name')}} | {{Spec2('HTML WHATWG')}} |         |
+| {{SpecName('HTML5 W3C', 'browsers.html#dom-name', 'Window.name')}}     | {{Spec2('HTML5 W3C')}}     |         |
diff --git a/files/fr/web/api/window/navigator/index.md b/files/fr/web/api/window/navigator/index.md
index 2f763caa88..b28e338f41 100644
--- a/files/fr/web/api/window/navigator/index.md
+++ b/files/fr/web/api/window/navigator/index.md
@@ -10,39 +10,29 @@ tags:
   - Window
 translation_of: Web/API/Window/navigator
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}
 
-<p>La propriété en lecture-seule <strong><code>Window.navigator</code></strong> renvoie une référence à un objet qui est une instance de {{domxref("Navigator")}} et possède des méthodes et propriétés à propos de l'application qui exécute le script.</p>
+La propriété en lecture-seule **`Window.navigator`** renvoie une référence à un objet qui est une instance de {{domxref("Navigator")}} et possède des méthodes et propriétés à propos de l'application qui exécute le script.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js"><var>navigatorObject</var> = window.navigator</pre>
+```js
+navigatorObject = window.navigator
+```
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">var sUsrAg = navigator.userAgent;
+```js
+var sUsrAg = navigator.userAgent;
 console.log("Voici l'agent utilisateur du navigateur courant", sUsrAg);
-</pre>
-
-<h2 id="Specifications">Spécifications</h2>
-
-<table class="standard-table">
-  <thead>
-    <tr>
-      <th scope="col">Spécification</th>
-      <th scope="col">Statut</th>
-      <th scope="col">Commentaires</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>{{SpecName('HTML WHATWG', '#dom-navigator', 'Window: navigator')}}</td>
-      <td>{{Spec2('HTML WHATWG')}}</td>
-      <td></td>
-    </tr>
-  </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Window.navigator")}}</p>
+```
+
+## Spécifications
+
+| Spécification                                                                            | Statut                           | Commentaires |
+| ---------------------------------------------------------------------------------------- | -------------------------------- | ------------ |
+| {{SpecName('HTML WHATWG', '#dom-navigator', 'Window: navigator')}} | {{Spec2('HTML WHATWG')}} |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Window.navigator")}}
diff --git a/files/fr/web/api/window/offline_event/index.md b/files/fr/web/api/window/offline_event/index.md
index fa7752a90c..98bd7cc28f 100644
--- a/files/fr/web/api/window/offline_event/index.md
+++ b/files/fr/web/api/window/offline_event/index.md
@@ -9,65 +9,57 @@ tags:
   - Window
 translation_of: Web/API/Window/offline_event
 ---
-<p>{{APIRef}}</p>
+{{APIRef}}
 
-<p>L'événement <strong><code>offline</code></strong> de l'interface {{domxref("Window")}} se déclenche lorsque le navigateur perd la connexion au réseau et la valeur de  {{domxref("Navigator.onLine")}} bascule à <code>false</code>.</p>
+L'événement **`offline`** de l'interface {{domxref("Window")}} se déclenche lorsque le navigateur perd la connexion au réseau et la valeur de  {{domxref("Navigator.onLine")}} bascule à `false`.
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row">Bulles</th>
-   <td>Non</td>
-  </tr>
-  <tr>
-   <th scope="row">Annulable</th>
-   <td>Non</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface</th>
-   <td>{{domxref("Event")}}</td>
-  </tr>
-  <tr>
-   <th scope="row">Propriété de gestionnaire d'événements</th>
-   <td>{{domxref("GlobalEventHandlers.onoffline", "onoffline")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Bulles</th>
+      <td>Non</td>
+    </tr>
+    <tr>
+      <th scope="row">Annulable</th>
+      <td>Non</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface</th>
+      <td>{{domxref("Event")}}</td>
+    </tr>
+    <tr>
+      <th scope="row">Propriété de gestionnaire d'événements</th>
+      <td>
+        {{domxref("GlobalEventHandlers.onoffline", "onoffline")}}
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: js">//version addEventListener
-window.addEventListener('offline', (event) =&gt; {
+```js
+//version addEventListener
+window.addEventListener('offline', (event) => {
     console.log("La Connexion au réseau est perdu.");
 });
 
 // onoffline version
-window.onoffline = (event) =&gt; {
+window.onoffline = (event) => {
   console.log("La Connexion au réseau a été perdue.");
 };
-</pre>
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "indices.html#event-offline", "offline event")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                        | Statut                           |
+| ---------------------------------------------------------------------------------------------------- | -------------------------------- |
+| {{SpecName('HTML WHATWG', "indices.html#event-offline", "offline event")}} | {{Spec2('HTML WHATWG')}} |
 
-<h2 id="Compatibilité_des_Navigateurs">Compatibilité des Navigateurs</h2>
+## Compatibilité des Navigateurs
 
-<p>{{Compat("api.Window.offline_event")}}</p>
+{{Compat("api.Window.offline_event")}}
 
-<h2 id="Voir_également">Voir également</h2>
+## Voir également
 
-<ul>
- <li><a href="/en-US/docs/Web/API/Window/online_event"><code>online</code></a></li>
-</ul>
+- [`online`](/en-US/docs/Web/API/Window/online_event)
diff --git a/files/fr/web/api/window/online_event/index.md b/files/fr/web/api/window/online_event/index.md
index c2c93916c8..ff17737057 100644
--- a/files/fr/web/api/window/online_event/index.md
+++ b/files/fr/web/api/window/online_event/index.md
@@ -9,69 +9,59 @@ tags:
   - Window
 translation_of: Web/API/Window/online_event
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}
 
-<p>L'événement <strong><code>online</code></strong> de l'interface {{domxref("Window")}} est déclenché lorsque le navigateur a obtenu l'accès au réseau et que la valeur de {{domxref("Navigator.onLine")}} passe à <code>true</code>.</p>
+L'événement **`online`** de l'interface {{domxref("Window")}} est déclenché lorsque le navigateur a obtenu l'accès au réseau et que la valeur de {{domxref("Navigator.onLine")}} passe à `true`.
 
-<div class="note">
-  <p><strong>Note :</strong> Cet événement ne doit pas être utilisé pour déterminer la disponibilité d'un site Web particulier. Des problèmes de réseau ou des pare-feu peuvent encore empêcher l'accès au site Web.</p>
-</div>
+> **Note :** Cet événement ne doit pas être utilisé pour déterminer la disponibilité d'un site Web particulier. Des problèmes de réseau ou des pare-feu peuvent encore empêcher l'accès au site Web.
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row">Bulles</th>
-   <td>No</td>
-  </tr>
-  <tr>
-   <th scope="row">Annulable</th>
-   <td>No</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface</th>
-   <td>{{domxref("Event")}}</td>
-  </tr>
-  <tr>
-   <th scope="row">Propriété de gestionnaire d'événements</th>
-   <td>{{domxref("GlobalEventHandlers.ononline", "ononline")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Bulles</th>
+      <td>No</td>
+    </tr>
+    <tr>
+      <th scope="row">Annulable</th>
+      <td>No</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface</th>
+      <td>{{domxref("Event")}}</td>
+    </tr>
+    <tr>
+      <th scope="row">Propriété de gestionnaire d'événements</th>
+      <td>
+        {{domxref("GlobalEventHandlers.ononline", "ononline")}}
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: js">// addEventListener version
-window.addEventListener('online', (event) =&gt; {
+```js
+// addEventListener version
+window.addEventListener('online', (event) => {
     console.log("Vous êtes maintenant connecté au réseau.");
 });
 
 // ononline version
-window.ononline = (event) =&gt; {
+window.ononline = (event) => {
   console.log("Vous êtes maintenant connecté au réseau.");
 };
-</pre>
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "indices.html#event-online", "online event")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                    | Statut                           |
+| ------------------------------------------------------------------------------------------------ | -------------------------------- |
+| {{SpecName('HTML WHATWG', "indices.html#event-online", "online event")}} | {{Spec2('HTML WHATWG')}} |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Window.online_event")}}</p>
+{{Compat("api.Window.online_event")}}
 
-<h2 id="Voir_également">Voir également</h2>
+## Voir également
 
-<ul>
- <li><a href="/en-US/docs/Web/API/Window/offline_event"><code>offline</code></a></li>
-</ul>
+- [`offline`](/en-US/docs/Web/API/Window/offline_event)
diff --git a/files/fr/web/api/window/onpaint/index.md b/files/fr/web/api/window/onpaint/index.md
index d7ae9b979d..df976cce31 100644
--- a/files/fr/web/api/window/onpaint/index.md
+++ b/files/fr/web/api/window/onpaint/index.md
@@ -9,29 +9,24 @@ tags:
   - Propriété
 translation_of: Web/API/Window/onpaint
 ---
-<div>{{ ApiRef() }} {{Non-standard_header}}</div>
+{{ ApiRef() }} {{Non-standard_header}}
 
-<p><code><strong>Window.onpaint</strong></code> est un gestionnaire d'événements pour l'événement <code>paint</code> sur la fenêtre.</p>
+**`Window.onpaint`** est un gestionnaire d'événements pour l'événement `paint` sur la fenêtre.
 
-<div class="warning">
-<p><strong>Attention :</strong> Ne fonctionne pas dans les applications basées sur Gecko actuellement, voir la section Notes!</p>
-</div>
+> **Attention :** Ne fonctionne pas dans les applications basées sur Gecko actuellement, voir la section Notes!
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">window.onpaint = <em>funcRef</em>;
-</pre>
+    window.onpaint = funcRef;
 
-<ul>
- <li><code>funcRef</code> est une fonction de gestionnaire.</li>
-</ul>
+- `funcRef` est une fonction de gestionnaire.
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p><code>onpaint</code> ne fonctionne pas actuellement, et il est douteux que cet événement fonctionne du tout, voir {{ Bug(239074) }}.</p>
+`onpaint` ne fonctionne pas actuellement, et il est douteux que cet événement fonctionne du tout, voir {{ Bug(239074) }}.
 
-<p>L'événement <code>paint</code> est déclenché lorsque la fenêtre est rendue. Cet événement se produit après l'événement {{Event ("load")}} pour une fenêtre, et se reproduit chaque fois que la fenêtre doit être restituée, par exemple lorsqu'une autre fenêtre l'obscurcit et est ensuite effacée.</p>
+L'événement `paint` est déclenché lorsque la fenêtre est rendue. Cet événement se produit après l'événement {{Event ("load")}} pour une fenêtre, et se reproduit chaque fois que la fenêtre doit être restituée, par exemple lorsqu'une autre fenêtre l'obscurcit et est ensuite effacée.
 
-<h2 id="Spécification">Spécification</h2>
+## Spécification
 
-<p>Cela ne fait partie d'aucune spécification.</p>
+Cela ne fait partie d'aucune spécification.
diff --git a/files/fr/web/api/window/open/index.md b/files/fr/web/api/window/open/index.md
index 6c44f9dd5c..4aa20d996b 100644
--- a/files/fr/web/api/window/open/index.md
+++ b/files/fr/web/api/window/open/index.md
@@ -6,45 +6,48 @@ tags:
   - DOM_0
 translation_of: Web/API/Window/open
 ---
-<p>{{ ApiRef() }}</p>
+{{ ApiRef() }}
 
-<h3 id="D.C3.A9finition">Définition</h3>
+### Définition
 
-<p>Crée une nouvelle fenêtre de navigation secondaire et y charge la ressource référencée.</p>
+Crée une nouvelle fenêtre de navigation secondaire et y charge la ressource référencée.
 
-<h3 id="Syntaxe">Syntaxe</h3>
+### Syntaxe
 
-<pre class="brush: js">var windowObjectReference = window.open(strUrl, strWindowName[, strWindowFeatures]);</pre>
+```js
+var windowObjectReference = window.open(strUrl, strWindowName[, strWindowFeatures]);
+```
 
-<h3 id="Valeur_renvoy.C3.A9e_et_param.C3.A8tres">Valeur renvoyée et paramètres</h3>
+### Valeur renvoyée et paramètres
 
-<dl>
- <dt><code>WindowObjectReference</code></dt>
- <dd>Il s'agit de la référence pointant vers la fenêtre de navigation nouvellement créée. Cette référence est la valeur renvoyée par la méthode <code>open()</code> ; elle sera à <code>null</code> si pour une raison ou une autre l'appel n'a pas réussi à ouvrir une fenêtre. Une variable globale est le meilleur endroit pour stocker une telle référence. Il est alors possible, par exemple, de l'utiliser pour obtenir certaines propriétés de la nouvelle fenêtre, ou accéder à certaines de ses méthodes, à condition que la relation entre votre fenêtre principale et votre fenêtre secondaire se conforme avec les paramètres de sécurité de même origine (<em><a href="http://www.mozilla.org/projects/security/components/same-origin.html">Same origin policy</a> security requirements</em> ).</dd>
- <dt><code>strUrl</code></dt>
- <dd>Il s'agit de l'URL à charger dans la fenêtre nouvellement créée. <var>strUrl</var> peut être un document HTML, un fichier image, ou tout autre type de fichier géré par le navigateur.</dd>
- <dt><code>strWindowName</code></dt>
- <dd>Il s'agit de la chaîne d'identification de la nouvelle fenêtre. Celle-ci peut être utilisée pour être la cible de liens et de formulaires lorsque l'attribut <code>target</code> d'un élément <code>&lt;a&gt;</code> ou d'un élément <code>&lt;form&gt;</code> est spécifié. Cette chaîne ne peut contenir d'espaces. <var>strWindowName</var> ne spécifie pas le titre de la fenêtre, juste son nom interne.</dd>
- <dt><code>strWindowFeatures</code></dt>
- <dd>Paramètre optionnel. Il s'agit de la chaîne listant les fonctionnalités de la nouvelle fenêtre de navigation (et de ses barres d'outils). Cette chaîne ne peut contenir d'espaces. Chaque fonctionnalité doit être séparée par une virgule au sein de la chaîne de caractères.</dd>
-</dl>
+- `WindowObjectReference`
+  - : Il s'agit de la référence pointant vers la fenêtre de navigation nouvellement créée. Cette référence est la valeur renvoyée par la méthode `open()` ; elle sera à `null` si pour une raison ou une autre l'appel n'a pas réussi à ouvrir une fenêtre. Une variable globale est le meilleur endroit pour stocker une telle référence. Il est alors possible, par exemple, de l'utiliser pour obtenir certaines propriétés de la nouvelle fenêtre, ou accéder à certaines de ses méthodes, à condition que la relation entre votre fenêtre principale et votre fenêtre secondaire se conforme avec les paramètres de sécurité de même origine (_[Same origin policy](http://www.mozilla.org/projects/security/components/same-origin.html) security requirements_ ).
+- `strUrl`
+  - : Il s'agit de l'URL à charger dans la fenêtre nouvellement créée. _strUrl_ peut être un document HTML, un fichier image, ou tout autre type de fichier géré par le navigateur.
+- `strWindowName`
+  - : Il s'agit de la chaîne d'identification de la nouvelle fenêtre. Celle-ci peut être utilisée pour être la cible de liens et de formulaires lorsque l'attribut `target` d'un élément `<a>` ou d'un élément `<form>` est spécifié. Cette chaîne ne peut contenir d'espaces. _strWindowName_ ne spécifie pas le titre de la fenêtre, juste son nom interne.
+- `strWindowFeatures`
+  - : Paramètre optionnel. Il s'agit de la chaîne listant les fonctionnalités de la nouvelle fenêtre de navigation (et de ses barres d'outils). Cette chaîne ne peut contenir d'espaces. Chaque fonctionnalité doit être séparée par une virgule au sein de la chaîne de caractères.
 
-<h3 id="Description">Description</h3>
+### Description
 
-<p>La méthode <code>open()</code> crée une nouvelle fenêtre secondaire de navigation, de façon similaire au choix de l'option Nouvelle fenêtre du menu Fichier. Le paramètre <var>strUrl</var> spécifie l'URL à récupérer et à charger dans la nouvelle fenêtre. Si <var>strUrl</var> est une chaîne vide, une nouvelle fenêtre vide de tout contenu (l'URL <code>about:blank</code> sera chargée) est créée avec les barres d'outils par défaut de la fenêtre principale.</p>
+La méthode `open()` crée une nouvelle fenêtre secondaire de navigation, de façon similaire au choix de l'option Nouvelle fenêtre du menu Fichier. Le paramètre _strUrl_ spécifie l'URL à récupérer et à charger dans la nouvelle fenêtre. Si _strUrl_ est une chaîne vide, une nouvelle fenêtre vide de tout contenu (l'URL `about:blank` sera chargée) est créée avec les barres d'outils par défaut de la fenêtre principale.
 
-<p>Notez que les URL distantes ne seront pas chargées instantanément. Lorsque l'appel à <code>window.open()</code> se termine et renvoie sa valeur, la fenêtre contient toujours <code>about:blank</code>. Le chargement proprement dit de l'URL est reporté et ne commence effectivement qu'après la fin de l'exécution du bloc de script courant. La création de la fenêtre d'une part et le chargement de la ressource référencée d'autre part sont faits de manière asynchrone.</p>
+Notez que les URL distantes ne seront pas chargées instantanément. Lorsque l'appel à `window.open()` se termine et renvoie sa valeur, la fenêtre contient toujours `about:blank`. Le chargement proprement dit de l'URL est reporté et ne commence effectivement qu'après la fin de l'exécution du bloc de script courant. La création de la fenêtre d'une part et le chargement de la ressource référencée d'autre part sont faits de manière asynchrone.
 
-<h4 id="Exemples">Exemples</h4>
+#### Exemples
 
-<pre class="brush:js">var windowObjectReference;
+```js
+var windowObjectReference;
 var strWindowFeatures = "menubar=yes,location=yes,resizable=yes,scrollbars=yes,status=yes";
 
 function openRequestedPopup() {
   windowObjectReference = window.open("http://www.cnn.com/", "CNN_WindowName", strWindowFeatures);
-}</pre>
+}
+```
 
-<pre class="brush:js">var windowObjectReference;
+```js
+var windowObjectReference;
 
 function openRequestedPopup() {
   windowObjectReference = window.open(
@@ -52,129 +55,123 @@ function openRequestedPopup() {
     "DescriptiveWindowName",
     "resizable,scrollbars,status"
   );
-}</pre>
-
-
-
-<p>Si une fenêtre du nom <var>strWindowName</var> existe déjà, alors, au lieu d'ouvrir une nouvelle fenêtre, <var>strUrl</var> est chargée dans cette fenêtre existante. Dans ce cas, la valeur renvoyée par la méthode est la fenêtre existante, et <var>strWindowFeatures</var> est ignorée. Fournir une chaîne vide pour <var>strUrl</var> est une manière d'obtenir une référence à une fenêtre ouverte par son nom sans en changer l'adresse. Si vous désirez ouvrir une nouvelle fenêtre à chaque appel de <code>window.open()</code>, il faut utiliser la nom réservé <var>_blank</var> pour <var>strWindowName</var>.</p>
-
-<div class="note">
-<p><strong>Note :</strong> À propos de l'utilisation de <code>window.open</code> pour ré-ouvrir ou donner le focus à une fenêtre existante portant un nom connu du domaine : Cette fonctionalité n'est pas valide pour tous les navigateurs et qui plus est avec des comportement variables. Firefox (50.0.1) fonctionne comme il est décrit ici : depuis le même domaine+port la ré-exécution de window.open avec le même nom va accéder à la fenêtre précédemment ouverte.  Google Chrome (55.0.2883.87 m ) pour sa part ne l'exécutera qu'à partir du même parent (nommé "opener", comme si les fenêtres étaient créées avec une dépendance et uniquement avec <code>window.open</code>). Il s'agit là d'une limitation considérable ce qui génère une incroyable complexité de développement parfois sans issue. Firefox récupère le handle vers toutes les fenêtres du domaine dont le nom est connu, ce qui permet d'accéder à leur données, mais il ne peut exécuter une commande <code>HTMLElement.focus()</code> vers l'une quelconque de ces fenêtres, ce qui interdit de réouvrir la fenêtre pourtant connue comme active. Pour sa part Chrome peut redonner le focus à une fenêtre (onglet) enfant mais l'opération est impossible entre frères et depuis l'enfant vers le parent. Quant aux autres fenêtres du même domaine (même famille ?) non ouvertes avec <code>window.open</code> elles sont inconnues et<code> window.open('',&lt;name&gt;,'')</code> ouvrira alors des doublons. La fonction <code>hw=window.open('',strWindowName<strong> </strong> ,'')</code> est pourtant la seule qui permette de récupérer un handle en connaissant un nom et théoriquement éviter la création de doublons, mais pour l'instant, 22/02/2017, les différences de comportement des navigateurs ne permettent de l'utiliser que de manière partielle dans des cas très restreints.</p>
-</div>
-
-<p><var>strWindowFeatures</var> est une chaîne optionnelle contenant une liste, séparée par des virgules, de fonctionnalités demandées pour la nouvelle fenêtre. Après qu'une fenêtre soit ouverte, vous ne pouvez pas utiliser JavaScript pour changer ses fonctionnalités et ses barres d'outils. Si <var>strWindowName</var> ne spécifie pas une fenêtre existante et si vous ne fournissez pas le paramètre <var>strWindowFeatures</var> (ou si celui-ci est une chaîne vide), la nouvelle fenêtre secondaire comportera les barres d'outils par défaut de la fenêtre principale.</p>
-
-<p>Si le paramètre <var>strWindowFeatures</var> est utilisé et si aucune information de taille n'est définie, les dimensions de la nouvelle fenêtre seront les mêmes que celles de la fenêtre ouverte la plus récemment.</p>
-
-<p>Si le paramètre <var>strWindowFeatures</var> est utilisé et qu'aucune information de position n'est définie, les coordonnées du coin en haut à gauche de la nouvelle fenêtre seront décalées de 22 pixels vers le bas et vers la droite par rapport à celles de la fenêtre ouverte le plus récemment. Un décalage est utilisé par tous les concepteurs de navigateurs (il est de 29 pixels dans Internet Explorer 6 SP2 avec le thème par défaut) et son but est d'aider l'utilisateur à remarquer l'ouverture d'une nouvelle fenêtre. Si la fenêtre ouverte le plus récemment était maximisée, il n'y aura pas de décalage et la nouvelle fenêtre secondaire sera maximisée également.</p>
-
-<p><strong>Si le paramètre <var>strWindowFeatures</var> est défini, les fonctionnalités qui ne sont pas listées, explicitement demandées dans la chaîne, seront désactivées ou enlevées</strong> (à l'exception de <var>titlebar</var> et <var>close</var> qui sont par défaut à <var>yes</var>).</p>
-
-<div class="note">
-<p><strong>Note :</strong> Si vous utilisez le paramètre <var>strWindowFeatures</var>, listez uniquement les fonctionnalités dont vous avez besoin, qui doivent être activées ou affichées. Les autres (à l'exception de <var>titlebar</var> et <var>close</var>) seront désactivées ou enlevées.</p>
-</div>
-
-<h4 id="Fonctionnalit.C3.A9s_de_position_et_de_taille">Fonctionnalités de position et de taille</h4>
-
-<p><a href="#Note_sur_les_corrections_d.27erreurs_de_position_et_de_dimension">Note sur les corrections d'erreurs de position et de dimension</a></p>
-
-<p>{{bug(176320) }}</p>
-
-<p><a href="#Note_sur_les_priorit.C3.A9s">Note sur les priorités</a></p>
-
-<dl>
- <dt>left</dt>
- <dd>Spécifie la distance à laquelle la nouvelle fenêtre est placée depuis le bord gauche de la zone de travail destinée aux applications du système d'exploitation de l'utilisateur jusqu'à la bordure extérieure (bordure de redimensionnement) de la fenêtre de navigation. La nouvelle fenêtre ne peut pas être positionnée initialement hors de l'écran.</dd>
- <dt>top</dt>
- <dd>Spécifie la distance à laquelle la nouvelle fenêtre est placée depuis le bord supérieur de la zone de travail destinée aux applications du système d'exploitation de l'utilisateur jusqu'à la bordure extérieure (bordure de redimensionnement) de la fenêtre de navigation. La nouvelle fenêtre ne peut pas être positionnée initialement hors de l'écran.</dd>
- <dt>height</dt>
- <dd>Spécifie la hauteur de la zone de contenu, l'espace de visualisation de la nouvelle fenêtre secondaire, en pixels. La valeur de hauteur comprend celle de la barre de défilement horizontale si celle-ci est présente. La valeur minimale requise est 100.</dd>
- <dt>width</dt>
- <dd>Spécifie la largeur de la zone de contenu, l'espace de visualisation de la nouvelle fenêtre secondaire, en pixels. La valeur de largeur comprend celle de la barre de défilement verticale si celle-ci est présente. Elle ne prend pas en compte un éventuel panneau latéral si celui-ci est déplié. La valeur minimale requise est 100.</dd>
- <dt>screenX</dt>
- <dd>Mozilla.</dd>
- <dt>screenY</dt>
- <dd>Mozilla.</dd>
- <dt>outerHeight</dt>
- <dd><p>Spécifie la hauteur de toute la fenêtre de navigation en pixels. Cette valeur outerHeight comprend toute barre d'outils présente, la barre de défilement horizontale de la fenêtre (si présente) et les bordures inférieures et supérieures. La valeur minimale requise est 100.</p>
- <div class="note"><p><strong>Note :</strong> étant donné que la barre de titre est toujours visible, demander une valeur outerHeight=100 rendra la valeur innerHeight de la fenêtre de navigation plus petite que les 100 pixels minimaux habituels.</p></div></dd>
- <dt>outerWidth</dt>
- <dd>Spécifie la largeur de toute la fenêtre de navigation en pixels. Cette valeur outerWidth comprend la barre de défilement verticale (si présente) et les bords gauche et droits de la fenêtre.</dd>
- <dt>innerHeight</dt>
- <dd>de la zone de contenu, l'espace de visualisation de la nouvelle fenêtre secondaire, en pixels. La valeur <code>innerHeight</code> comprend la hauteur de la barre de défilement horizontale si celle-ci est présente. La valeur minimale requise est 100.</dd>
- <dt>innerWidth</dt>
- <dd>de la zone de contenu, l'espace de visualisation de la nouvelle fenêtre secondaire, en pixels. La valeur <code>innerWidth</code> comprend la largeur de la barre de défilement verticale si celle-ci est présente. Elle ne prend pas en compte un éventuel panneau latéral si celui-ci est déplié. La valeur minimale requise est 100.</dd>
-</dl>
-
-<h4 id="Fonctionnalit.C3.A9s_de_barres_d.27outils_et_de_chrome">Fonctionnalités de barres d'outils et de chrome</h4>
-
-<dl>
- <dt>menubar</dt>
- <dd><p>Si cette fonctionnalité est définie à <var>yes</var>, la nouvelle fenêtre secondaire disposera d'une barre de menus. Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à toujours avoir une barre de menus en positionnant <code>dom.disable_window_open_feature.menubar</code> à <var>true</var> dans <kbd>about:config</kbd> ou dans leur <a href="http://www.mozilla.org/support/firefox/edit#user">fichier user.js</a>.</p></dd>
- <dt>toolbar</dt>
- <dd><p>Si cette fonctionnalité est définie à <var>yes</var>, la nouvelle fenêtre secondaire disposera d'une barre de navigation (boutons Précédente, Suivante, Actualiser et Arrêter). En plus de la barre de navigation, les navigateurs basés sur Mozilla afficheront également la barre d'onglets si elle est toujours visible et présente dans la fenêtre parente. Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à toujours afficher la barre de navigation en positionnant <code>dom.disable_window_open_feature.toolbar</code> à <var>true</var> dans <kbd>about:config</kbd> ou dans leur <a href="http://www.mozilla.org/support/firefox/edit#user">fichier user.js</a>.</p></dd>
- <dt>location</dt>
- <dd><p>Si cette fonctionnalité est définie à <var>yes</var>, la nouvelle fenêtre secondaire affichera une barre d'adresse (ou d'emplacement).Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à toujours afficher la barre d'adresse en positionnant <code>dom.disable_window_open_feature.location</code> à <var>true</var> dans <kbd>about:config</kbd> ou dans leur <a href="http://www.mozilla.org/support/firefox/edit#user">fichier user.js</a>. Notez qu'Internet Explorer 7 force la présence de la barre d'adresse : « Nous pensons que la barre d'adresse est aussi importante pour les utilisateurs <strong>à voir dans les fenêtres pop-up</strong>. Une barre d'adresse manquante crée une opportunité pour un fraudeur de contrefaire une adresse. Pour aider à contrer cela, <strong>IE7 va afficher une barre d'adresse sur toutes les fenêtres de navigation pour aider les utilisateurs à voir où ils sont</strong>. » provenant de <a href="http://blogs.msdn.com/ie/archive/2005/11/21.aspx">Better Website Identification</a>. Il est également dans les intentions de Mozilla de forcer la présence de la Barre d'adresse dans une prochaine version de Firefox : {{bug(337344) }}</p></dd>
- <dt>directories</dt>
- <dd><p>Si cette fonctionnalité est définie à <var>yes</var>, la nouvelle fenêtre secondaire affichera la barre personnelle dans les navigateurs Netscape 6.x, Netscape 7.x, Mozilla et Firefox. Dans Internet Explorer 5+, la barre de liens sera affichée. En plus de la barre personnelle, les navigateurs Mozilla afficheront la barre de navigation du site si celle-ci est visible et présente dans la fenêtre parente. Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à toujours afficher leur barre personnelle en positionnant<code>dom.disable_window_open_feature.directories</code> à <var>true</var> dans <kbd>about:config</kbd> ou dans leur <a href="http://www.mozilla.org/support/firefox/edit#user">fichier user.js</a>.</p></dd>
- <dt>personalbar</dt>
- <dd>Similaire à <var>directories</var>, mais ne fonctionne que dans Netscape et les navigateurs basés sur Mozilla.</dd>
- <dt>status</dt>
- <dd>Si cette fonctionnalité est définie à <var>yes</var>, la nouvelle fenêtre secondaire disposera d'une barre d'état. Les utilisateurs peuvent forcer la présence de la barre d'état dans tous les navigateurs basés sur Mozilla, dans Internet Explorer 6 SP2 (<a href="#Note_sur_les_probl.C3.A8mes_de_s.C3.A9curit.C3.A9_li.C3.A9s_.C3.A0_la_pr.C3.A9sence_de_la_barre_d.27.C3.A9tat">Note sur la barre d'état avec XP SP2</a>) et dans Opera 6+. Les réglages par défaut des navigateurs récents basés sur Mozilla et Firefox 1.0 forcent la présence de la barre d'état.</dd>
-</dl>
-
-<h4 id="Fonctionnalit.C3.A9s_relatives_.C3.A0_la_fen.C3.AAtre">Fonctionnalités relatives à la fenêtre</h4>
-
-<dl>
- <dt>resizable</dt>
- <dd><p>Si cette fonctionnalité est définie à <var>yes</var>, la nouvelle fenêtre secondaire sera redimensionnable À partir de la version 1.4, les navigateurs basés sur Mozilla ont une zone de redimensionnement à l'extrémité droite de la barre d'état. Cela permet de s'assurer que les utilisateurs peuvent toujours redimensionner la fenêtre même si l'auteur de la page Web a demandé que cette fenêtre secondaire ne soit pas redimensionnable. Dans ce cas, les icônes de maximisation/restauration dans la barre de titre de la fenêtre seront désactivées et les bordures de la fenêtre ne permettront pas de la redimensionner, mais celle-ci pourra toujours être redimensionnée via cette zone de la barre d'état. Il est probable qu'à partir de Firefox 3, toutes les fenêtres secondaires seront redimensionnables ({{ Bug(177838) }})</p>
-<div class="note">
-<p><strong>Note :</strong> pour des raisons d'accessibilité, il est vivement recommandé de toujours définir cette fonctionnalité à <var>yes</var>.</p>
-</div>
- <p>Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à être facilement redimensionnables en positionnant <code>dom.disable_window_open_feature.resizable</code> à <var>true</var> dans <kbd>about:config</kbd> ou dans leur <a href="http://www.mozilla.org/support/firefox/edit#user">fichier user.js</a>.</p>
-</dd>
- <dt>scrollbars</dt>
- <dd><p>Si cette fonctionnalité est définie à <var>yes</var>, la nouvelle fenêtre secondaire affichera des barres de défilement horizontales et/ou verticales si le document ne rentre pas dans la zone d'affichage de la fenêtre.</p>
-<div class="note">
-<p><strong>Note :</strong> pour des raisons d'accessibilité, il est vivement recommandé de toujours définir cette fonctionnalité à <var>yes</var>.</p>
-</div>
-<p>Les utilisateurs de Mozilla et Firefox peuvent obliger cette option à être toujours activée en positionnant <code>dom.disable_window_open_feature.scrollbars</code> à <var>true</var> dans <kbd>about:config</kbd> ou dans leur <a href="http://www.mozilla.org/support/firefox/edit#user">fichier user.js</a>.</p></dd>
- <dt>dependent</dt>
- <dd>Si définie à <var>yes</var>, la nouvelle fenêtre est dite dépendante de sa fenêtre parente. Une fenêtre dépendante se ferme lorsque sa fenêtre parente est fermée. Une fenêtre dépendante est réduite dans la barre des tâches uniquement lorsque sa fenêtre parente est réduite. Sur les plateformes Windows, une fenêtre dépendante n'est pas affichée sur la barre des tâches. Elle reste également en avant-plan de la fenêtre parente. Les fenêtres dépendantes n'existent pas sous Mac OS X, cette option y sera ignorée. La suppression complète de cette fonctionnalité sur toutes les plateformes est en cours de discussion ({{ Bug(214867) }}) Dans Internet Explorer 6, le plus proche équivalent à cette fonctionnalité est la méthode <code>showModelessDialog()</code>.</dd>
- <dt>modal</dt>
- <dd><p><strong>Note</strong> : à partir de Mozilla 1.2.1, cette fonctionnalité requiert le privilège <code>UniversalBrowserWrite</code> ({{ Bug(180048) }}). Sans ce privilège, elle est équivalente à <code>dependent</code>. Si définie à <var>yes</var>, la nouvelle fenêtre est dite modale. L'utilisateur ne peut pas retourner à la fenêtre principale tant que la fenêtre modale n'est pas fermée. Une fenêtre modale typique est créée par la <a href="fr/DOM/window.alert">fonction alert()</a>. Le comportement exact des fenêtres modales dépend de la plateforme et de la version de Mozilla. L'équivalent de cette fonctionnalité dans Internet Explorer 6 est la méthode <code>showModalDialog()</code>.</p></dd>
- <dt>dialog</dt>
- <dd><p>La fonctionnalité <code>dialog</code> retire toutes les icônes (restaurer, réduire, agrandir) de la barre de titre de la fenêtre, laissant uniquement le bouton de fermeture. Mozilla 1.2+ et Netscape 7.1 afficheront les autres commandes du menu système (dans Firefox 1.0 et Netscape 7.0x, le menu de commandes système n'est pas associé avec l'icône de Firefox/Netscape 7.0x à l'extrémité gauche de la barre de titre, il s'agit probablement d'un bug. Il est possible d'accéder au menu de commandes système avec un clic droit sur la barre de titre). Les fenêtres de dialogue sont des fenêtres qui n'ont pas d'icône de commande système de réduction ni d'agrandissement/restauration dans la barre de titre, ni dans les choix correspondants du menu de commandes système. On les appelle dialogues car leur utilisation normale est uniquement de notifier une information et d'être ensuite immédiatement fermées. Sur les systèmes Mac, les fenêtres de dialogue ont une bordure différente et peuvent prendre la forme de<em>sheets</em>.</p></dd>
- <dt>minimizable</dt>
- <dd><p>Ce paramètre peut uniquement s'appliquer à des fenêtres de dialogue ; l'utilisation de « minimizable » nécessite <code>dialog=yes</code>. Si <code>minimizable</code> est défini à <var>yes</var>, le nouveau dialogue aura une commande système de réduction dans la barre de titre et il sera possible de le réduire dans la barre des tâches. Toute fenêtre n'étant pas un dialogue est toujours réductible, cette option y sera donc ignorée.</p></dd>
- <dt>fullscreen</dt>
- <dd><p>Ce paramètre ne fonctionne plus dans Internet Explorer 6 SP2 de la façon dont il le faisait dans Internet Explorer 5.x. La barre des tâches de Windows, ainsi que la barre de titre et la barre d'état de la fenêtre ne sont ni visibles, ni accessibles lorsque le mode plein écran est activé dans IE 5.x. <code>fullscreen</code> ennuie toujours les utilisateurs disposant d'un grand écran ou de plusieurs écrans. Obliger les autres utilisateurs à passer en plein écran avec <code>fullscreen</code> est également extrêmement impopulaire et est considéré comme une tentative impolie d'imposer les préférences d'affichage de l'auteur à l'utilisateur. <code>fullscreen</code> ne fonctionne plus vraiment dans Internet Explorer 6 SP2.</p></dd>
-</dl>
-
-<h4 id="Fonctionnalit.C3.A9s_n.C3.A9cessitant_des_privil.C3.A8ges">Fonctionnalités nécessitant des privilèges</h4>
-
-<p>Les fonctionnalités suivantes nécessitent le privilège <code>UniversalBrowserWrite</code>, autrement elles seront ignorées. Les scripts chrome bénéficient de ce privilège automatiquement, les autres doivent le demander via le <a href="fr/PrivilegeManager">PrivilegeManager</a>.</p>
-
-<dl>
- <dt>chrome</dt>
- <dd><p><strong>Note</strong> : à partir de Mozilla 1.7/Firefox 0.9, cette fonctionnalité requiert le privilège <code>UniversalBrowserWrite</code> ({{ Bug(244965) }}). Sans ce privilège, elle est ignorée. Si définie à <var>yes</var>, la page est chargée en tant qu'unique contenu de la fenêtre, sans aucun autre élément de l'interface de navigation. Il n'y aura pas de menu contextuel défini par défaut, et aucun des raccourcis clavier standard ne fonctionnera. La page est supposée fournir sa propre interface utilisateur, et cette fonctionnalité est habituellement utilisée pour ouvrir des documents XUL (les dialogues standard comme la console JavaScript sont ouverts de cette façon).</p></dd>
- <dt>titlebar</dt>
- <dd><p>Par défaut, toutes les nouvelles fenêtres secondaires ont une barre de titre. Si défini à <var>no</var>, ce paramètre enlève la barre de titre de la nouvelle fenêtre secondaire. Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à toujours avoir une barre de titre en positionnant<code>dom.disable_window_open_feature.titlebar</code> à <var>true</var> dans <kbd>about:config</kbd> ou dans leur <a href="http://www.mozilla.org/support/firefox/edit#user">fichier user.js</a>.</p></dd>
- <dt>alwaysRaised</dt>
- <dd>Si défini à <var>yes</var>, la nouvelle fenêtre sera toujours affichée par dessus les autres fenêtres du navigateur, qu'elle soit active ou non.</dd>
- <dt>alwaysLowered</dt>
- <dd><p>Si défini à <var>yes</var>, la nouvelle fenêtre créé flottera par dessous sa propre fenêtre parente tant que celle-ci n'est pas réduite. Les fenêtres utilisant alwaysLowered sont souvent appelées pop-under. Celles-ci ne peuvent pas passer au dessus de leur fenêtre parente, mais celle-ci peut être réduite. Dans Netscape 6.x, les fenêtres alwaysLowered n'ont pas de commande système de réduction ni de commande système restaurer/agrandir.</p></dd>
- <dt>z-lock</dt>
- <dd>Identique à <code>alwaysLowered</code>.</dd>
- <dt>close</dt>
- <dd><p>Lorsque défini à <var>no</var>, ce paramètre supprime l'icône système de fermeture de la fenêtre, et l'élément de menu correspondant. Il fonctionnera uniquement pour les fenêtres de dialogue (avec la fonctionnalité <code>dialog</code> activée). <code>close=no</code> a précédence sur <code>minimizable=yes</code>.Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à toujours avoir un bouton de fermeture en positionnant <code>dom.disable_window_open_feature.close</code> à <var>true</var> dans <kbd>about:config</kbd> ou dans leur <a href="http://www.mozilla.org/support/firefox/edit#user">fichier user.js</a>.</p></dd>
-</dl>
-
-<p>Les fonctionnalités de position et de taille nécessitent d'être accompagnées d'un nombre. Les fonctionnalités de barres d'outils et de fenêtre peuvent être accompagnées de <var>yes</var> (oui) ou <var>no</var> (non) ; il est également possible d'utiliser <var>1</var> à la place de <var>yes</var> et <var>0</var> à la place de <var>no</var>. Les fonctionnalités de barres d'outils et de fenêtre acceptent aussi une forme raccourcie : vous pouvez activer une fonctionnalité en listant simplement son nom dans la chaîne <var>strWindowFeatures</var>. Si vous fournissez le paramètre <var>strWindowFeatures</var>, les fonctionnalités <code>titlebar</code> et <code>close</code> sont toujours à <var>yes</var> par défaut, mais les autres fonctionnalités présentant un choix <var>yes</var>/<var>no</var> seront à <var>no</var> par défaut et seront donc désactivées.</p>
-
-<p>Exemple :</p>
-
-<pre class="brush: html">&lt;script type="text/javascript"&gt;
+}
+```
+
+Si une fenêtre du nom _strWindowName_ existe déjà, alors, au lieu d'ouvrir une nouvelle fenêtre, _strUrl_ est chargée dans cette fenêtre existante. Dans ce cas, la valeur renvoyée par la méthode est la fenêtre existante, et _strWindowFeatures_ est ignorée. Fournir une chaîne vide pour _strUrl_ est une manière d'obtenir une référence à une fenêtre ouverte par son nom sans en changer l'adresse. Si vous désirez ouvrir une nouvelle fenêtre à chaque appel de `window.open()`, il faut utiliser la nom réservé _\_blank_ pour _strWindowName_.
+
+> **Note :** À propos de l'utilisation de `window.open` pour ré-ouvrir ou donner le focus à une fenêtre existante portant un nom connu du domaine : Cette fonctionalité n'est pas valide pour tous les navigateurs et qui plus est avec des comportement variables. Firefox (50.0.1) fonctionne comme il est décrit ici : depuis le même domaine+port la ré-exécution de window\.open avec le même nom va accéder à la fenêtre précédemment ouverte.  Google Chrome (55.0.2883.87 m ) pour sa part ne l'exécutera qu'à partir du même parent (nommé "opener", comme si les fenêtres étaient créées avec une dépendance et uniquement avec `window.open`). Il s'agit là d'une limitation considérable ce qui génère une incroyable complexité de développement parfois sans issue. Firefox récupère le handle vers toutes les fenêtres du domaine dont le nom est connu, ce qui permet d'accéder à leur données, mais il ne peut exécuter une commande `HTMLElement.focus()` vers l'une quelconque de ces fenêtres, ce qui interdit de réouvrir la fenêtre pourtant connue comme active. Pour sa part Chrome peut redonner le focus à une fenêtre (onglet) enfant mais l'opération est impossible entre frères et depuis l'enfant vers le parent. Quant aux autres fenêtres du même domaine (même famille ?) non ouvertes avec `window.open` elles sont inconnues et` window.open('',<name>,'')` ouvrira alors des doublons. La fonction `hw=window.open('',strWindowName ,'')` est pourtant la seule qui permette de récupérer un handle en connaissant un nom et théoriquement éviter la création de doublons, mais pour l'instant, 22/02/2017, les différences de comportement des navigateurs ne permettent de l'utiliser que de manière partielle dans des cas très restreints.
+
+_strWindowFeatures_ est une chaîne optionnelle contenant une liste, séparée par des virgules, de fonctionnalités demandées pour la nouvelle fenêtre. Après qu'une fenêtre soit ouverte, vous ne pouvez pas utiliser JavaScript pour changer ses fonctionnalités et ses barres d'outils. Si _strWindowName_ ne spécifie pas une fenêtre existante et si vous ne fournissez pas le paramètre _strWindowFeatures_ (ou si celui-ci est une chaîne vide), la nouvelle fenêtre secondaire comportera les barres d'outils par défaut de la fenêtre principale.
+
+Si le paramètre _strWindowFeatures_ est utilisé et si aucune information de taille n'est définie, les dimensions de la nouvelle fenêtre seront les mêmes que celles de la fenêtre ouverte la plus récemment.
+
+Si le paramètre _strWindowFeatures_ est utilisé et qu'aucune information de position n'est définie, les coordonnées du coin en haut à gauche de la nouvelle fenêtre seront décalées de 22 pixels vers le bas et vers la droite par rapport à celles de la fenêtre ouverte le plus récemment. Un décalage est utilisé par tous les concepteurs de navigateurs (il est de 29 pixels dans Internet Explorer 6 SP2 avec le thème par défaut) et son but est d'aider l'utilisateur à remarquer l'ouverture d'une nouvelle fenêtre. Si la fenêtre ouverte le plus récemment était maximisée, il n'y aura pas de décalage et la nouvelle fenêtre secondaire sera maximisée également.
+
+**Si le paramètre _strWindowFeatures_ est défini, les fonctionnalités qui ne sont pas listées, explicitement demandées dans la chaîne, seront désactivées ou enlevées** (à l'exception de _titlebar_ et _close_ qui sont par défaut à _yes_).
+
+> **Note :** Si vous utilisez le paramètre _strWindowFeatures_, listez uniquement les fonctionnalités dont vous avez besoin, qui doivent être activées ou affichées. Les autres (à l'exception de _titlebar_ et _close_) seront désactivées ou enlevées.
+
+#### Fonctionnalités de position et de taille
+
+[Note sur les corrections d'erreurs de position et de dimension](#Note_sur_les_corrections_d.27erreurs_de_position_et_de_dimension)
+
+{{bug(176320) }}
+
+[Note sur les priorités](#Note_sur_les_priorit.C3.A9s)
+
+- left
+  - : Spécifie la distance à laquelle la nouvelle fenêtre est placée depuis le bord gauche de la zone de travail destinée aux applications du système d'exploitation de l'utilisateur jusqu'à la bordure extérieure (bordure de redimensionnement) de la fenêtre de navigation. La nouvelle fenêtre ne peut pas être positionnée initialement hors de l'écran.
+- top
+  - : Spécifie la distance à laquelle la nouvelle fenêtre est placée depuis le bord supérieur de la zone de travail destinée aux applications du système d'exploitation de l'utilisateur jusqu'à la bordure extérieure (bordure de redimensionnement) de la fenêtre de navigation. La nouvelle fenêtre ne peut pas être positionnée initialement hors de l'écran.
+- height
+  - : Spécifie la hauteur de la zone de contenu, l'espace de visualisation de la nouvelle fenêtre secondaire, en pixels. La valeur de hauteur comprend celle de la barre de défilement horizontale si celle-ci est présente. La valeur minimale requise est 100.
+- width
+  - : Spécifie la largeur de la zone de contenu, l'espace de visualisation de la nouvelle fenêtre secondaire, en pixels. La valeur de largeur comprend celle de la barre de défilement verticale si celle-ci est présente. Elle ne prend pas en compte un éventuel panneau latéral si celui-ci est déplié. La valeur minimale requise est 100.
+- screenX
+  - : Mozilla.
+- screenY
+  - : Mozilla.
+- outerHeight
+
+  - : Spécifie la hauteur de toute la fenêtre de navigation en pixels. Cette valeur outerHeight comprend toute barre d'outils présente, la barre de défilement horizontale de la fenêtre (si présente) et les bordures inférieures et supérieures. La valeur minimale requise est 100.
+
+    > **Note :** étant donné que la barre de titre est toujours visible, demander une valeur outerHeight=100 rendra la valeur innerHeight de la fenêtre de navigation plus petite que les 100 pixels minimaux habituels.
+
+- outerWidth
+  - : Spécifie la largeur de toute la fenêtre de navigation en pixels. Cette valeur outerWidth comprend la barre de défilement verticale (si présente) et les bords gauche et droits de la fenêtre.
+- innerHeight
+  - : de la zone de contenu, l'espace de visualisation de la nouvelle fenêtre secondaire, en pixels. La valeur `innerHeight` comprend la hauteur de la barre de défilement horizontale si celle-ci est présente. La valeur minimale requise est 100.
+- innerWidth
+  - : de la zone de contenu, l'espace de visualisation de la nouvelle fenêtre secondaire, en pixels. La valeur `innerWidth` comprend la largeur de la barre de défilement verticale si celle-ci est présente. Elle ne prend pas en compte un éventuel panneau latéral si celui-ci est déplié. La valeur minimale requise est 100.
+
+#### Fonctionnalités de barres d'outils et de chrome
+
+- menubar
+  - : Si cette fonctionnalité est définie à _yes_, la nouvelle fenêtre secondaire disposera d'une barre de menus. Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à toujours avoir une barre de menus en positionnant `dom.disable_window_open_feature.menubar` à _true_ dans <kbd>about:config</kbd> ou dans leur [fichier user.js](http://www.mozilla.org/support/firefox/edit#user).
+- toolbar
+  - : Si cette fonctionnalité est définie à _yes_, la nouvelle fenêtre secondaire disposera d'une barre de navigation (boutons Précédente, Suivante, Actualiser et Arrêter). En plus de la barre de navigation, les navigateurs basés sur Mozilla afficheront également la barre d'onglets si elle est toujours visible et présente dans la fenêtre parente. Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à toujours afficher la barre de navigation en positionnant `dom.disable_window_open_feature.toolbar` à _true_ dans <kbd>about:config</kbd> ou dans leur [fichier user.js](http://www.mozilla.org/support/firefox/edit#user).
+- location
+  - : Si cette fonctionnalité est définie à _yes_, la nouvelle fenêtre secondaire affichera une barre d'adresse (ou d'emplacement).Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à toujours afficher la barre d'adresse en positionnant `dom.disable_window_open_feature.location` à _true_ dans <kbd>about:config</kbd> ou dans leur [fichier user.js](http://www.mozilla.org/support/firefox/edit#user). Notez qu'Internet Explorer 7 force la présence de la barre d'adresse : « Nous pensons que la barre d'adresse est aussi importante pour les utilisateurs **à voir dans les fenêtres pop-up**. Une barre d'adresse manquante crée une opportunité pour un fraudeur de contrefaire une adresse. Pour aider à contrer cela, **IE7 va afficher une barre d'adresse sur toutes les fenêtres de navigation pour aider les utilisateurs à voir où ils sont**. » provenant de [Better Website Identification](http://blogs.msdn.com/ie/archive/2005/11/21.aspx). Il est également dans les intentions de Mozilla de forcer la présence de la Barre d'adresse dans une prochaine version de Firefox : {{bug(337344) }}
+- directories
+  - : Si cette fonctionnalité est définie à _yes_, la nouvelle fenêtre secondaire affichera la barre personnelle dans les navigateurs Netscape 6.x, Netscape 7.x, Mozilla et Firefox. Dans Internet Explorer 5+, la barre de liens sera affichée. En plus de la barre personnelle, les navigateurs Mozilla afficheront la barre de navigation du site si celle-ci est visible et présente dans la fenêtre parente. Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à toujours afficher leur barre personnelle en positionnant`dom.disable_window_open_feature.directories` à _true_ dans <kbd>about:config</kbd> ou dans leur [fichier user.js](http://www.mozilla.org/support/firefox/edit#user).
+- personalbar
+  - : Similaire à _directories_, mais ne fonctionne que dans Netscape et les navigateurs basés sur Mozilla.
+- status
+  - : Si cette fonctionnalité est définie à _yes_, la nouvelle fenêtre secondaire disposera d'une barre d'état. Les utilisateurs peuvent forcer la présence de la barre d'état dans tous les navigateurs basés sur Mozilla, dans Internet Explorer 6 SP2 ([Note sur la barre d'état avec XP SP2](#Note_sur_les_probl.C3.A8mes_de_s.C3.A9curit.C3.A9_li.C3.A9s_.C3.A0_la_pr.C3.A9sence_de_la_barre_d.27.C3.A9tat)) et dans Opera 6+. Les réglages par défaut des navigateurs récents basés sur Mozilla et Firefox 1.0 forcent la présence de la barre d'état.
+
+#### Fonctionnalités relatives à la fenêtre
+
+- resizable
+
+  - : Si cette fonctionnalité est définie à _yes_, la nouvelle fenêtre secondaire sera redimensionnable À partir de la version 1.4, les navigateurs basés sur Mozilla ont une zone de redimensionnement à l'extrémité droite de la barre d'état. Cela permet de s'assurer que les utilisateurs peuvent toujours redimensionner la fenêtre même si l'auteur de la page Web a demandé que cette fenêtre secondaire ne soit pas redimensionnable. Dans ce cas, les icônes de maximisation/restauration dans la barre de titre de la fenêtre seront désactivées et les bordures de la fenêtre ne permettront pas de la redimensionner, mais celle-ci pourra toujours être redimensionnée via cette zone de la barre d'état. Il est probable qu'à partir de Firefox 3, toutes les fenêtres secondaires seront redimensionnables ({{ Bug(177838) }})
+
+    > **Note :** pour des raisons d'accessibilité, il est vivement recommandé de toujours définir cette fonctionnalité à _yes_.
+
+    Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à être facilement redimensionnables en positionnant `dom.disable_window_open_feature.resizable` à _true_ dans <kbd>about:config</kbd> ou dans leur [fichier user.js](http://www.mozilla.org/support/firefox/edit#user).
+
+- scrollbars
+
+  - : Si cette fonctionnalité est définie à _yes_, la nouvelle fenêtre secondaire affichera des barres de défilement horizontales et/ou verticales si le document ne rentre pas dans la zone d'affichage de la fenêtre.
+
+    > **Note :** pour des raisons d'accessibilité, il est vivement recommandé de toujours définir cette fonctionnalité à _yes_.
+
+    Les utilisateurs de Mozilla et Firefox peuvent obliger cette option à être toujours activée en positionnant `dom.disable_window_open_feature.scrollbars` à _true_ dans <kbd>about:config</kbd> ou dans leur [fichier user.js](http://www.mozilla.org/support/firefox/edit#user).
+
+- dependent
+  - : Si définie à _yes_, la nouvelle fenêtre est dite dépendante de sa fenêtre parente. Une fenêtre dépendante se ferme lorsque sa fenêtre parente est fermée. Une fenêtre dépendante est réduite dans la barre des tâches uniquement lorsque sa fenêtre parente est réduite. Sur les plateformes Windows, une fenêtre dépendante n'est pas affichée sur la barre des tâches. Elle reste également en avant-plan de la fenêtre parente. Les fenêtres dépendantes n'existent pas sous Mac OS X, cette option y sera ignorée. La suppression complète de cette fonctionnalité sur toutes les plateformes est en cours de discussion ({{ Bug(214867) }}) Dans Internet Explorer 6, le plus proche équivalent à cette fonctionnalité est la méthode `showModelessDialog()`.
+- modal
+  - : **Note** : à partir de Mozilla 1.2.1, cette fonctionnalité requiert le privilège `UniversalBrowserWrite` ({{ Bug(180048) }}). Sans ce privilège, elle est équivalente à `dependent`. Si définie à _yes_, la nouvelle fenêtre est dite modale. L'utilisateur ne peut pas retourner à la fenêtre principale tant que la fenêtre modale n'est pas fermée. Une fenêtre modale typique est créée par la [fonction alert()](fr/DOM/window.alert). Le comportement exact des fenêtres modales dépend de la plateforme et de la version de Mozilla. L'équivalent de cette fonctionnalité dans Internet Explorer 6 est la méthode `showModalDialog()`.
+- dialog
+  - : La fonctionnalité `dialog` retire toutes les icônes (restaurer, réduire, agrandir) de la barre de titre de la fenêtre, laissant uniquement le bouton de fermeture. Mozilla 1.2+ et Netscape 7.1 afficheront les autres commandes du menu système (dans Firefox 1.0 et Netscape 7.0x, le menu de commandes système n'est pas associé avec l'icône de Firefox/Netscape 7.0x à l'extrémité gauche de la barre de titre, il s'agit probablement d'un bug. Il est possible d'accéder au menu de commandes système avec un clic droit sur la barre de titre). Les fenêtres de dialogue sont des fenêtres qui n'ont pas d'icône de commande système de réduction ni d'agrandissement/restauration dans la barre de titre, ni dans les choix correspondants du menu de commandes système. On les appelle dialogues car leur utilisation normale est uniquement de notifier une information et d'être ensuite immédiatement fermées. Sur les systèmes Mac, les fenêtres de dialogue ont une bordure différente et peuvent prendre la forme de*sheets*.
+- minimizable
+  - : Ce paramètre peut uniquement s'appliquer à des fenêtres de dialogue ; l'utilisation de « minimizable » nécessite `dialog=yes`. Si `minimizable` est défini à _yes_, le nouveau dialogue aura une commande système de réduction dans la barre de titre et il sera possible de le réduire dans la barre des tâches. Toute fenêtre n'étant pas un dialogue est toujours réductible, cette option y sera donc ignorée.
+- fullscreen
+  - : Ce paramètre ne fonctionne plus dans Internet Explorer 6 SP2 de la façon dont il le faisait dans Internet Explorer 5.x. La barre des tâches de Windows, ainsi que la barre de titre et la barre d'état de la fenêtre ne sont ni visibles, ni accessibles lorsque le mode plein écran est activé dans IE 5.x. `fullscreen` ennuie toujours les utilisateurs disposant d'un grand écran ou de plusieurs écrans. Obliger les autres utilisateurs à passer en plein écran avec `fullscreen` est également extrêmement impopulaire et est considéré comme une tentative impolie d'imposer les préférences d'affichage de l'auteur à l'utilisateur. `fullscreen` ne fonctionne plus vraiment dans Internet Explorer 6 SP2.
+
+#### Fonctionnalités nécessitant des privilèges
+
+Les fonctionnalités suivantes nécessitent le privilège `UniversalBrowserWrite`, autrement elles seront ignorées. Les scripts chrome bénéficient de ce privilège automatiquement, les autres doivent le demander via le [PrivilegeManager](fr/PrivilegeManager).
+
+- chrome
+  - : **Note** : à partir de Mozilla 1.7/Firefox 0.9, cette fonctionnalité requiert le privilège `UniversalBrowserWrite` ({{ Bug(244965) }}). Sans ce privilège, elle est ignorée. Si définie à _yes_, la page est chargée en tant qu'unique contenu de la fenêtre, sans aucun autre élément de l'interface de navigation. Il n'y aura pas de menu contextuel défini par défaut, et aucun des raccourcis clavier standard ne fonctionnera. La page est supposée fournir sa propre interface utilisateur, et cette fonctionnalité est habituellement utilisée pour ouvrir des documents XUL (les dialogues standard comme la console JavaScript sont ouverts de cette façon).
+- titlebar
+  - : Par défaut, toutes les nouvelles fenêtres secondaires ont une barre de titre. Si défini à _no_, ce paramètre enlève la barre de titre de la nouvelle fenêtre secondaire. Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à toujours avoir une barre de titre en positionnant`dom.disable_window_open_feature.titlebar` à _true_ dans <kbd>about:config</kbd> ou dans leur [fichier user.js](http://www.mozilla.org/support/firefox/edit#user).
+- alwaysRaised
+  - : Si défini à _yes_, la nouvelle fenêtre sera toujours affichée par dessus les autres fenêtres du navigateur, qu'elle soit active ou non.
+- alwaysLowered
+  - : Si défini à _yes_, la nouvelle fenêtre créé flottera par dessous sa propre fenêtre parente tant que celle-ci n'est pas réduite. Les fenêtres utilisant alwaysLowered sont souvent appelées pop-under. Celles-ci ne peuvent pas passer au dessus de leur fenêtre parente, mais celle-ci peut être réduite. Dans Netscape 6.x, les fenêtres alwaysLowered n'ont pas de commande système de réduction ni de commande système restaurer/agrandir.
+- z-lock
+  - : Identique à `alwaysLowered`.
+- close
+  - : Lorsque défini à _no_, ce paramètre supprime l'icône système de fermeture de la fenêtre, et l'élément de menu correspondant. Il fonctionnera uniquement pour les fenêtres de dialogue (avec la fonctionnalité `dialog` activée). `close=no` a précédence sur `minimizable=yes`.Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à toujours avoir un bouton de fermeture en positionnant `dom.disable_window_open_feature.close` à _true_ dans <kbd>about:config</kbd> ou dans leur [fichier user.js](http://www.mozilla.org/support/firefox/edit#user).
+
+Les fonctionnalités de position et de taille nécessitent d'être accompagnées d'un nombre. Les fonctionnalités de barres d'outils et de fenêtre peuvent être accompagnées de _yes_ (oui) ou _no_ (non) ; il est également possible d'utiliser _1_ à la place de _yes_ et _0_ à la place de _no_. Les fonctionnalités de barres d'outils et de fenêtre acceptent aussi une forme raccourcie : vous pouvez activer une fonctionnalité en listant simplement son nom dans la chaîne _strWindowFeatures_. Si vous fournissez le paramètre _strWindowFeatures_, les fonctionnalités `titlebar` et `close` sont toujours à _yes_ par défaut, mais les autres fonctionnalités présentant un choix _yes_/_no_ seront à _no_ par défaut et seront donc désactivées.
+
+Exemple :
+
+```html
+<script type="text/javascript">
 var WindowObjectReference; // variable globale
 
 function openRequestedPopup() {
@@ -182,14 +179,15 @@ function openRequestedPopup() {
         "NomDeFenetreDescriptif",
         "width=420,height=230,resizable,scrollbars=yes,status=1");
 }
-&lt;/script&gt;
-</pre>
+</script>
+```
 
-<p>Dans cet exemple, la fenêtre sera redimensionnable, elle affichera des barres de défilement si nécessaire (si le contenu dépasse les dimensions de fenêtre demandées) et affichera la barre d'état. Elle n'affichera pas la barre de menus ni la barre d'adresse. Comme l'auteur connaissait la taille de l'image (400 pixels de large et 200 pixels de haut), il a ajouté les marges appliquées à l'élément racine dans Internet Explorer 6, c'est-à-dire 15 pixels en haut, 15 pixels en bas, 10 pixels à gauche et 10 pixels à droite.</p>
+Dans cet exemple, la fenêtre sera redimensionnable, elle affichera des barres de défilement si nécessaire (si le contenu dépasse les dimensions de fenêtre demandées) et affichera la barre d'état. Elle n'affichera pas la barre de menus ni la barre d'adresse. Comme l'auteur connaissait la taille de l'image (400 pixels de large et 200 pixels de haut), il a ajouté les marges appliquées à l'élément racine dans Internet Explorer 6, c'est-à-dire 15 pixels en haut, 15 pixels en bas, 10 pixels à gauche et 10 pixels à droite.
 
-<h3 id="Bonnes_pratiques">Bonnes pratiques</h3>
+### Bonnes pratiques
 
-<pre class="brush: html">&lt;script type="text/javascript"&gt;
+```html
+<script type="text/javascript">
 var WindowObjectReference = null; // variable globale
 
 function openFFPromotionPopup() {
@@ -210,25 +208,26 @@ function openFFPromotionPopup() {
        ou de recharger la ressource référencée. */
   };
 }
-&lt;/script&gt;
+</script>
 
 (...)
 
-&lt;p&gt;&lt;a href="http://www.spreadfirefox.com/" target="PromoteFirefoxWindowName" onclick="openFFPromotionPopup(); return false;" title="Ce lien créera une nouvelle fenêtre ou en réutilisera une déjà ouverte"&gt;Promouvoir
-l'adoption de Firefox&lt;/a&gt;&lt;/p&gt;
-</pre>
+<p><a href="http://www.spreadfirefox.com/" target="PromoteFirefoxWindowName" onclick="openFFPromotionPopup(); return false;" title="Ce lien créera une nouvelle fenêtre ou en réutilisera une déjà ouverte">Promouvoir
+l'adoption de Firefox</a></p>
+```
 
-<p>Le code ci-dessus résout un certain nombre de problèmes d'utilisabilité (<em>usability</em> ) relatif aux liens ouvrant des fenêtres secondaires. Le but du <code>return false</code> dans le code est d'annuler l'action par défaut du lien : si le gestionnaire d'évènements onclick est exécuté, il n'est pas nécessaire d'exécuter l'action par défaut du lien. Mais si JavaScript est désactivé ou non existant dans le navigateur de l'utilisateur, c'est l'évènement onclick qui est ignoré et le navigateur charge la ressource référencée dans le cadre ou la fenêtre portant le nom « PromoteFirefoxWindowName ». Si aucun cadre ni fenêtre ne porte ce nom, le navigateur créera une nouvelle fenêtre et l'appellera « PromoteFirefoxWindowName ».</p>
+Le code ci-dessus résout un certain nombre de problèmes d'utilisabilité (_usability_ ) relatif aux liens ouvrant des fenêtres secondaires. Le but du `return false` dans le code est d'annuler l'action par défaut du lien : si le gestionnaire d'évènements onclick est exécuté, il n'est pas nécessaire d'exécuter l'action par défaut du lien. Mais si JavaScript est désactivé ou non existant dans le navigateur de l'utilisateur, c'est l'évènement onclick qui est ignoré et le navigateur charge la ressource référencée dans le cadre ou la fenêtre portant le nom « PromoteFirefoxWindowName ». Si aucun cadre ni fenêtre ne porte ce nom, le navigateur créera une nouvelle fenêtre et l'appellera « PromoteFirefoxWindowName ».
 
-<p>Plus d'informations sur l'utilisation de l'attribut target :</p>
+Plus d'informations sur l'utilisation de l'attribut target :
 
-<p><a href="http://www.la-grange.net/w3c/html4.01/present/frames.html#h-16.3.2">HTML 4.01, section 16.3.2 La sémantique de cible</a></p>
+[HTML 4.01, section 16.3.2 La sémantique de cible](http://www.la-grange.net/w3c/html4.01/present/frames.html#h-16.3.2)
 
-<p><a href="http://www.htmlhelp.com/fr/faq/html/links.html#new-window">Comment créer un lien qui ouvre une nouvelle fenêtre?</a></p>
+[Comment créer un lien qui ouvre une nouvelle fenêtre?](http://www.htmlhelp.com/fr/faq/html/links.html#new-window)
 
-<p>Vous pouvez également paramétriser la fonction pour la rendre polyvalente, fonctionnelle dans plus de situations, et donc réutilisable dans d'autres scripts et pages Web :</p>
+Vous pouvez également paramétriser la fonction pour la rendre polyvalente, fonctionnelle dans plus de situations, et donc réutilisable dans d'autres scripts et pages Web :
 
-<pre class="brush: html">&lt;script type="text/javascript"&gt;
+```html
+<script type="text/javascript">
 var WindowObjectReference = null; // variable globale
 
 function openRequestedPopup(strUrl, strWindowName) {
@@ -240,15 +239,16 @@ function openRequestedPopup(strUrl, strWindowName) {
     WindowObjectReference.focus();
   };
 }
-&lt;/script&gt;
+</script>
 (...)
 
-&lt;p&gt;&lt;a href="http://www.spreadfirefox.com/" target="PromoteFirefoxWindow" onclick="openRequestedPopup(this.href, this.target); return false;" title="Ce lien créera une nouvelle fenêtre ou en réutilisera une déjà ouverte"&gt;Promouvoir l'adoption de Firefox&lt;/a&gt;&lt;/p&gt;
-</pre>
+<p><a href="http://www.spreadfirefox.com/" target="PromoteFirefoxWindow" onclick="openRequestedPopup(this.href, this.target); return false;" title="Ce lien créera une nouvelle fenêtre ou en réutilisera une déjà ouverte">Promouvoir l'adoption de Firefox</a></p>
+```
 
-<p>Vous pouvez également ne permettre à cette fonction que d'ouvrir une seule fenêtre secondaire et de la réutiliser pour d'autres liens de cette manière :</p>
+Vous pouvez également ne permettre à cette fonction que d'ouvrir une seule fenêtre secondaire et de la réutiliser pour d'autres liens de cette manière :
 
-<pre class="brush: html">&lt;script type="text/javascript"&gt;
+```html
+<script type="text/javascript">
 var WindowObjectReference = null; // variable globale
 var PreviousUrl; /* variable globale qui stockera l'URL actuellement
                     chargée dans la fenêtre secondaire */
@@ -277,242 +277,222 @@ function openRequestedSinglePopup(strUrl)
   /* explication : on stocke l'URL courante afin de pouvoir la comparer
      dans le cas d'un autre appel à cette fonction. */
 }
-&lt;/script&gt;
+</script>
 
 (...)
 
-&lt;p&gt;&lt;a href="http://www.spreadfirefox.com/" target="SingleSecondaryWindowName"
+<p><a href="http://www.spreadfirefox.com/" target="SingleSecondaryWindowName"
 onclick="openRequestedSinglePopup(this.href); return false;"
-title="Ce lien créera une nouvelle fenêtre ou en réutilisera une déjà ouverte"&gt;Promouvoir
-l'adoption de Firefox&lt;/a&gt;&lt;/p&gt;
-&lt;p&gt;&lt;a href="http://www.mozilla.org/support/firefox/faq"
+title="Ce lien créera une nouvelle fenêtre ou en réutilisera une déjà ouverte">Promouvoir
+l'adoption de Firefox</a></p>
+<p><a href="http://www.mozilla.org/support/firefox/faq"
 target="SingleSecondaryWindowName"
 onclick="openRequestedSinglePopup(this.href); return false;"
-title="Ce lien créera une nouvelle fenêtre ou en réutilisera une déjà ouverte"&gt;FAQ
-de Firefox&lt;/a&gt;&lt;/p&gt;
-</pre>
+title="Ce lien créera une nouvelle fenêtre ou en réutilisera une déjà ouverte">FAQ
+de Firefox</a></p>
+```
 
-<h3 id="FAQ">FAQ</h3>
+### FAQ
 
-<dl>
- <dt>Comment empêcher l'apparition du message de confirmation demandant à l'utilisateur s'il veut fermer la fenêtre ?</dt>
- <dd>Vous ne pouvez pas. <strong>La règle est que les nouvelles fenêtres qui ne sont pas ouvertes par JavaScript ne peuvent pas être fermées par JavaScript.</strong> La console JavaScript dans les navigateurs basés sur Mozilla affichera le message d'avertissement suivant : <code>"Scripts may not close windows that were not opened by script."</code> Si c'était possible, l'historique des URL visitées durant la session de navigation serait perdu au détriment de l'utilisateur. <a href="fr/DOM/window.close">Plus de détails sur la méthode window.close()</a></dd>
- <dt>Comment ramener la fenêtre si elle est réduite ou masquée par une autre fenêtre ?</dt>
- <dd>Vérifiez d'abord l'existence de la référence à l'objet window, et si celle-ci existe et n'a pas été fermée, utilisez la méthode <a href="fr/DOM/window.focus">focus()</a>. Il n'y a pas d'autre manière fiable. Un <a href="#Bonnes_pratiques">exemple montrant comment utiliser la méthode focus()</a> est présenté ci-dessus.</dd>
- <dt>Comment forcer une fenêtre à être agrandie/maximisée ?</dt>
- <dd>Ce n'est pas possible. Tous les fabricants de navigateurs essaient de rendre l'ouverture d'une nouvelle fenêtre visible et remarquée par les utilisateurs, afin d'éviter de les désorienter.</dd>
- <dt>Comment désactiver le redimensionnement des fenêtres ou supprimer les barres d'outils ?</dt>
- <dd>Il n'est pas possible de l'imposer. Les utilisateurs de navigateurs basés sur Mozilla ont un contrôle absolu sur les fonctionnalités des fenêtres comme le fait de pouvoir les redimensionner, de les faire défiler et la présence de barres d'outils via les préférences utilisateur dans <code>about:config</code>. Comme vos utilisateurs sont ceux qui sont supposés utiliser de telles fenêtres (et non vous en tant qu'auteur), le mieux est d'éviter d'interférer avec leurs habitudes et préférences. Il est recommandé de toujours positionner la redimensionnabilité et la présence de barres de défilement (si nécessaire) à <code>yes</code> pour assurer l'accessibilité au contenu et l'utilisabilité des fenêtres. Ceci est dans l'intérêt tant de l'auteur Web que de ses utilisateurs.</dd>
- <dt>Comment redimensionner une fenêtre en fonction de son contenu ?</dt>
- <dd><p>Ce n'est pas faisable de manière fiable, car les utilisateurs peuvent empêcher la fenêtre d'être redimensionnée en décochant la case <code>Édition/Préférences/Avancé/Scripts &amp; plugins/Autoriser les scripts à/ Déplacer ou redimensionner des fenêtres existantes</code> dans Mozilla ou <code>Outils/Options/Contenu/Activer JavaScript/Bouton Avancé/Déplacer ou redimensionner des fenêtres existantes</code> dans Firefox, ou en positionnant <code>dom.disable_window_move_resize</code> à <var>true</var> dans <kbd>about:config</kbd> ou encore en éditant leur <a href="http://www.mozilla.org/support/firefox/edit#user">fichier user.js</a>. En général, les utilisateurs désactivent le déplacement et le redimensionnement des fenêtres, étant donné qu'autoriser les scripts à le faire a été la source d'énormément d'abus dans le passé, et les rares scripts qui n'en abusent pas sont souvent incorrects dans leur manière de redimensionner la fenêtre. 99% de ces scripts désactivent le redimensionnement manuel des fenêtres et les barres de défilement alors qu'ils devraient en fait activer ces deux fonctionnalités pour permettre un mécanisme de récupération sain et circonspect dans le cas où leurs calculs s'avèreraient incorrects.</p><p>La méthode <a href="fr/DOM/window.sizeToContent">sizeToContent()</a> de l'objet window est également désactivée si l'utilisateur décoche la préférence <code>Déplacer ou redimensionner des fenêtres existantes</code>. Déplacer et redimensionner une fenêtre à distance sur l'écran de l'utilisateur l'ennuiera très souvent, le désorientera, et au mieux sera incorrect. Les auteurs Web espèrent souvent avoir un contrôle absolu (et un pouvoir de décision) sur tous les aspects de positionnement et de taille des fenêtres de l'utilisateur ... ce qui n'est tout simplement pas vrai.</p></dd>
- <dt>Comment ouvrir une ressource référencée par un lien dans un nouvel onglet ? ou dans un onglet spécifique ?</dt>
- <dd>Pour l'instant, ce n'est pas possible. Seul l'utilisateur peut modifier ses préférences avancées pour faire cela. <a href="http://kmeleon.sourceforge.net/">K-meleon 1.1</a>, un navigateur basé sur Mozilla, donne un contrôle et un pouvoir complet à l'utilisateur sur la manière dont les liens sont ouverts. Certaines extensions avancées donnent également à Mozilla et Firefox un grand pouvoir concernant la manière dont les ressources référencées sont chargées. Dans quelques années, la <a href="http://www.w3.org/TR/2004/WD-css3-hyperlinks-20040224/#target0">propriété target du module CSS3 hyperlien</a> pourrait être implémentée (si le module CSS3 Hyperlink tel qu'il existe à présent est approuvé). Même si cela se fait et lorsque cela se produira, attendez-vous à ce que les développeurs de navigateurs utilisant des onglets donnent un pouvoir de veto à l'utilisateur et un contrôle total de la façon dont les liens peuvent ouvrir des pages Web. La façon d'ouvrir un lien devrait toujours être entièrement sous le contrôle de l'utilisateur.</dd>
- <dt>Comment savoir si une fenêtre que j'ai ouverte l'est toujours ?</dt>
- <dd>Vous pouvez tester l'existence de la référence à l'objet <code>window</code>, qui est la valeur renvoyée en cas de succès de l'appel à <code>window.open()</code>, et vérifier ensuite que la valeur renvoyée par <var>WindowObjectReference</var>.closed est bien <var>false</var>.</dd>
- <dt>Comment savoir si ma fenêtre a été bloquée par un bloqueur de popups ?</dt>
- <dd>Avec les bloqueurs de popups intégrés dans Mozilla/Firefox et Internet Explorer 6 SP2, il est possible de vérifier la valeur renvoyée par <code>window.open()</code> : elle sera <var>null</var> si la fenêtre n'a pas été autorisée à s'ouvrir. Cependant, pour la plupart des autres bloqueurs de popups, il n'existe pas de manière fiable.</dd>
- <dt>Quelle est la relation JavaScript entre la fenêtre principale et la fenêtre secondaire ?</dt>
- <dd>La valeur renvoyée par la méthode <code>window.open()</code> est la propriété <a href="fr/DOM/window.opener">opener</a>. La variable <var>WindowObjectReference</var> lie la fenêtre principale (opener) à la fenêtre secondaire qu'elle a ouverte, tandis que le mot-clé <code>opener</code> liera la fenêtre secondaire à sa fenêtre principale (celle qui a déclenché son ouverture).</dd>
- <dt>Je n'arrive pas à accéder aux propriétés de la nouvelle fenêtre secondaire. J'obtiens toujours une erreur dans la console JavaScript disant « Erreur : uncaught exception: Permission denied to get property &lt;property_name or method_name&gt; ». Pourquoi cela ?</dt>
- <dd><p>Ceci est causé par la restriction de sécurité des scripts entre domaines (aussi appelée<em>Same Origin Policy</em> , « Politique de même origine »). Un script chargé dans une fenêtre (ou cadre) d'une origine donnée (nom de domaine) <strong>ne peut pas obtenir ou modifier</strong> des propriétés d'une autre fenêtre (ou cadre) ou les propriétés d'aucun de ses objets HTML si celle-ci provient d'une autre origine distincte (nom de domaine). C'est pourquoi, avant d'exécuter un script se référant à une fenêtre secondaire depuis la fenêtre principale, le navigateur vérifiera que la fenêtre secondaire possède le même nom de domaine. Plus d'informations à propos de la restriction de sécurité des scripts entre domaines : <a href="http://www.mozilla.org/projects/security/components/same-origin.html">http://www.mozilla.org/projects/secu...me-origin.html</a></p></dd>
-</dl>
+- Comment empêcher l'apparition du message de confirmation demandant à l'utilisateur s'il veut fermer la fenêtre ?
+  - : Vous ne pouvez pas. **La règle est que les nouvelles fenêtres qui ne sont pas ouvertes par JavaScript ne peuvent pas être fermées par JavaScript.** La console JavaScript dans les navigateurs basés sur Mozilla affichera le message d'avertissement suivant : `"Scripts may not close windows that were not opened by script."` Si c'était possible, l'historique des URL visitées durant la session de navigation serait perdu au détriment de l'utilisateur. [Plus de détails sur la méthode window.close()](fr/DOM/window.close)
+- Comment ramener la fenêtre si elle est réduite ou masquée par une autre fenêtre ?
+  - : Vérifiez d'abord l'existence de la référence à l'objet window, et si celle-ci existe et n'a pas été fermée, utilisez la méthode [focus()](fr/DOM/window.focus). Il n'y a pas d'autre manière fiable. Un [exemple montrant comment utiliser la méthode focus()](#Bonnes_pratiques) est présenté ci-dessus.
+- Comment forcer une fenêtre à être agrandie/maximisée ?
+  - : Ce n'est pas possible. Tous les fabricants de navigateurs essaient de rendre l'ouverture d'une nouvelle fenêtre visible et remarquée par les utilisateurs, afin d'éviter de les désorienter.
+- Comment désactiver le redimensionnement des fenêtres ou supprimer les barres d'outils ?
+  - : Il n'est pas possible de l'imposer. Les utilisateurs de navigateurs basés sur Mozilla ont un contrôle absolu sur les fonctionnalités des fenêtres comme le fait de pouvoir les redimensionner, de les faire défiler et la présence de barres d'outils via les préférences utilisateur dans `about:config`. Comme vos utilisateurs sont ceux qui sont supposés utiliser de telles fenêtres (et non vous en tant qu'auteur), le mieux est d'éviter d'interférer avec leurs habitudes et préférences. Il est recommandé de toujours positionner la redimensionnabilité et la présence de barres de défilement (si nécessaire) à `yes` pour assurer l'accessibilité au contenu et l'utilisabilité des fenêtres. Ceci est dans l'intérêt tant de l'auteur Web que de ses utilisateurs.
+- Comment redimensionner une fenêtre en fonction de son contenu ?
 
-<h3 id="Probl.C3.A8mes_d.27utilisabilit.C3.A9">Problèmes d'utilisabilité</h3>
+  - : Ce n'est pas faisable de manière fiable, car les utilisateurs peuvent empêcher la fenêtre d'être redimensionnée en décochant la case `Édition/Préférences/Avancé/Scripts & plugins/Autoriser les scripts à/ Déplacer ou redimensionner des fenêtres existantes` dans Mozilla ou `Outils/Options/Contenu/Activer JavaScript/Bouton Avancé/Déplacer ou redimensionner des fenêtres existantes` dans Firefox, ou en positionnant `dom.disable_window_move_resize` à _true_ dans <kbd>about:config</kbd> ou encore en éditant leur [fichier user.js](http://www.mozilla.org/support/firefox/edit#user). En général, les utilisateurs désactivent le déplacement et le redimensionnement des fenêtres, étant donné qu'autoriser les scripts à le faire a été la source d'énormément d'abus dans le passé, et les rares scripts qui n'en abusent pas sont souvent incorrects dans leur manière de redimensionner la fenêtre. 99% de ces scripts désactivent le redimensionnement manuel des fenêtres et les barres de défilement alors qu'ils devraient en fait activer ces deux fonctionnalités pour permettre un mécanisme de récupération sain et circonspect dans le cas où leurs calculs s'avèreraient incorrects.
 
-<h4 id=".C3.89vitez_de_recourir_.C3.A0_window.open.28.29">Évitez de recourir à <code>window.open()</code></h4>
+    La méthode [sizeToContent()](fr/DOM/window.sizeToContent) de l'objet window est également désactivée si l'utilisateur décoche la préférence `Déplacer ou redimensionner des fenêtres existantes`. Déplacer et redimensionner une fenêtre à distance sur l'écran de l'utilisateur l'ennuiera très souvent, le désorientera, et au mieux sera incorrect. Les auteurs Web espèrent souvent avoir un contrôle absolu (et un pouvoir de décision) sur tous les aspects de positionnement et de taille des fenêtres de l'utilisateur ... ce qui n'est tout simplement pas vrai.
 
-<p>De manière générale, il est préférable d'éviter d'utiliser <code>window.open()</code> pour plusieurs raisons :</p>
+- Comment ouvrir une ressource référencée par un lien dans un nouvel onglet ? ou dans un onglet spécifique ?
+  - : Pour l'instant, ce n'est pas possible. Seul l'utilisateur peut modifier ses préférences avancées pour faire cela. [K-meleon 1.1](http://kmeleon.sourceforge.net/), un navigateur basé sur Mozilla, donne un contrôle et un pouvoir complet à l'utilisateur sur la manière dont les liens sont ouverts. Certaines extensions avancées donnent également à Mozilla et Firefox un grand pouvoir concernant la manière dont les ressources référencées sont chargées. Dans quelques années, la [propriété target du module CSS3 hyperlien](http://www.w3.org/TR/2004/WD-css3-hyperlinks-20040224/#target0) pourrait être implémentée (si le module CSS3 Hyperlink tel qu'il existe à présent est approuvé). Même si cela se fait et lorsque cela se produira, attendez-vous à ce que les développeurs de navigateurs utilisant des onglets donnent un pouvoir de veto à l'utilisateur et un contrôle total de la façon dont les liens peuvent ouvrir des pages Web. La façon d'ouvrir un lien devrait toujours être entièrement sous le contrôle de l'utilisateur.
+- Comment savoir si une fenêtre que j'ai ouverte l'est toujours ?
+  - : Vous pouvez tester l'existence de la référence à l'objet `window`, qui est la valeur renvoyée en cas de succès de l'appel à `window.open()`, et vérifier ensuite que la valeur renvoyée par _WindowObjectReference_.closed est bien _false_.
+- Comment savoir si ma fenêtre a été bloquée par un bloqueur de popups ?
+  - : Avec les bloqueurs de popups intégrés dans Mozilla/Firefox et Internet Explorer 6 SP2, il est possible de vérifier la valeur renvoyée par `window.open()` : elle sera _null_ si la fenêtre n'a pas été autorisée à s'ouvrir. Cependant, pour la plupart des autres bloqueurs de popups, il n'existe pas de manière fiable.
+- Quelle est la relation JavaScript entre la fenêtre principale et la fenêtre secondaire ?
+  - : La valeur renvoyée par la méthode `window.open()` est la propriété [opener](fr/DOM/window.opener). La variable _WindowObjectReference_ lie la fenêtre principale (opener) à la fenêtre secondaire qu'elle a ouverte, tandis que le mot-clé `opener` liera la fenêtre secondaire à sa fenêtre principale (celle qui a déclenché son ouverture).
+- Je n'arrive pas à accéder aux propriétés de la nouvelle fenêtre secondaire. J'obtiens toujours une erreur dans la console JavaScript disant « Erreur : uncaught exception: Permission denied to get property \<property_name or method_name> ». Pourquoi cela ?
+  - : Ceci est causé par la restriction de sécurité des scripts entre domaines (aussi appelée*Same Origin Policy* , « Politique de même origine »). Un script chargé dans une fenêtre (ou cadre) d'une origine donnée (nom de domaine) **ne peut pas obtenir ou modifier** des propriétés d'une autre fenêtre (ou cadre) ou les propriétés d'aucun de ses objets HTML si celle-ci provient d'une autre origine distincte (nom de domaine). C'est pourquoi, avant d'exécuter un script se référant à une fenêtre secondaire depuis la fenêtre principale, le navigateur vérifiera que la fenêtre secondaire possède le même nom de domaine. Plus d'informations à propos de la restriction de sécurité des scripts entre domaines : [http://www.mozilla.org/projects/secu...me-origin.html](http://www.mozilla.org/projects/security/components/same-origin.html)
 
-<ul>
- <li>Tous les navigateurs basés sur Mozilla offrent la navigation par onglets, et il s'agit du mode préféré pour ouvrir des ressources référencées… pas seulement dans le cas des navigateurs basés sur Mozilla, mais dans tous les autres navigateurs offrant la navigation par onglets. En d'autres mots, les utilisateurs de navigateurs utilisant des onglets préfèrent ouvrir des onglets que des fenêtres dans la plupart des situations. Ce type de navigateur gagne rapidement en popularité depuis plusieurs années et cette tendance ne semble pas près de s'arrêter. La version 7 d'Internet Explorer sortie en octobre 2006 propose également la navigation par onglets.</li>
- <li>Il existe à présent <a href="https://addons.update.mozilla.org/extensions/showlist.php?application=mozilla&amp;category=Tabbed+Browsing&amp;numpg=50&amp;os=windows&amp;version=auto-detect&amp;submit=Update">plusieurs extensions à Mozilla</a> (comme Multizilla) et <a href="https://addons.update.mozilla.org/extensions/showlist.php?application=firefox&amp;version=1.0+&amp;os=Windows&amp;category=Tabbed%20Browsing">à Firefox</a> (comme <a href="https://addons.update.mozilla.org/extensions/moreinfo.php?application=firefox&amp;version=1.0%20&amp;os=Windows&amp;category=Tabbed%20Browsing&amp;numpg=10&amp;id=158">Tabbrowser preferences</a>), fonctionnalités et préférences avancées basées sur la navigation par onglets, sur la conversion des appels à <code>window.open()</code> en ouvertures d'onglets, et sur la neutralisation des appels à <code>window.open()</code>. En particulier, afin de neutraliser l'ouverture de nouvelles fenêtres non demandées (souvent présentés comme bloquant les fenêtre popups non sollicitées ou les ouvertures automatiques de fenêtres par des scripts). Parmi ces fonctionnalités qu'on peut retrouver dans des extensions, il y a l'ouverture d'un lien dans une nouvelle fenêtre ou non, dans la même fenêtre, dans un nouvel onglet ou non, en arrière-plan ou non. Coder sans réfléchir pour ouvrir de nouvelles fenêtres n'est plus assuré de succès, ne pourra pas se faire par la force, et dans le cas où l'auteur Web y parvient, ne fera qu'ennuyer la majorité des utilisateurs.</li>
- <li>Les nouvelles fenêtres peuvent avoir leur barre de menu, leurs barres de défilement, leur barre d'état, leur redimensionnabilité etc. désactivées. Ceci n'est pas possible avec de nouveaux onglets. Par conséquent, de nombreux utilisateurs préfèrent utiliser des onglets étant donné que l'interface de leur navigateur est laissée intacte et reste stable.</li>
- <li>L'ouverture de nouvelles fenêtres, même avec leurs fonctionnalités réduites, utilise des ressources système considérables sur l'ordinateur de l'utilisateur (processeur, mémoire RAM) et met en jeu une grande quantité de code à exécuter (gestion de la sécurité, de la mémoire, diverses options de code parfois assez complexes, la construction du cadre de la fenêtre, des barres d'outils de la fenêtre, son positionnement et sa taille, etc.). L'ouverture de nouveaux onglets demande nettement moins de ressources système et est plus rapide à exécuter que d'ouvrir de nouvelles fenêtres.</li>
-</ul>
+### Problèmes d'utilisabilité
 
-<h4 id="Offrez_d.27ouvrir_un_lien_dans_une_nouvelle_fen.C3.AAtre.2C_en_suivant_ces_recommandations">Offrez d'ouvrir un lien dans une nouvelle fenêtre, en suivant ces recommandations</h4>
+#### Évitez de recourir à `window.open()`
 
-<p>Si vous voulez permettre l'ouverture d'un lien dans une nouvelle fenêtre, suivez ces règles d'utilisabilité et d'accessibilité testées et éprouvées :</p>
+De manière générale, il est préférable d'éviter d'utiliser `window.open()` pour plusieurs raisons :
 
-<h5 id="N.27utilisez_jamais_ce_format_de_code_pour_les_liens_.3Ca_href.3D.22javascriptwindow.open.28....29.22_....3E">N'utilisez <em>jamais</em> ce format de code pour les liens :<br>
- <code>&lt;a href="javascript:window.open(...)" ...&gt;</code></h5>
+- Tous les navigateurs basés sur Mozilla offrent la navigation par onglets, et il s'agit du mode préféré pour ouvrir des ressources référencées… pas seulement dans le cas des navigateurs basés sur Mozilla, mais dans tous les autres navigateurs offrant la navigation par onglets. En d'autres mots, les utilisateurs de navigateurs utilisant des onglets préfèrent ouvrir des onglets que des fenêtres dans la plupart des situations. Ce type de navigateur gagne rapidement en popularité depuis plusieurs années et cette tendance ne semble pas près de s'arrêter. La version 7 d'Internet Explorer sortie en octobre 2006 propose également la navigation par onglets.
+- Il existe à présent [plusieurs extensions à Mozilla](https://addons.update.mozilla.org/extensions/showlist.php?application=mozilla&category=Tabbed+Browsing&numpg=50&os=windows&version=auto-detect&submit=Update) (comme Multizilla) et [à Firefox](https://addons.update.mozilla.org/extensions/showlist.php?application=firefox&version=1.0+&os=Windows&category=Tabbed%20Browsing) (comme [Tabbrowser preferences](https://addons.update.mozilla.org/extensions/moreinfo.php?application=firefox&version=1.0%20&os=Windows&category=Tabbed%20Browsing&numpg=10&id=158)), fonctionnalités et préférences avancées basées sur la navigation par onglets, sur la conversion des appels à `window.open()` en ouvertures d'onglets, et sur la neutralisation des appels à `window.open()`. En particulier, afin de neutraliser l'ouverture de nouvelles fenêtres non demandées (souvent présentés comme bloquant les fenêtre popups non sollicitées ou les ouvertures automatiques de fenêtres par des scripts). Parmi ces fonctionnalités qu'on peut retrouver dans des extensions, il y a l'ouverture d'un lien dans une nouvelle fenêtre ou non, dans la même fenêtre, dans un nouvel onglet ou non, en arrière-plan ou non. Coder sans réfléchir pour ouvrir de nouvelles fenêtres n'est plus assuré de succès, ne pourra pas se faire par la force, et dans le cas où l'auteur Web y parvient, ne fera qu'ennuyer la majorité des utilisateurs.
+- Les nouvelles fenêtres peuvent avoir leur barre de menu, leurs barres de défilement, leur barre d'état, leur redimensionnabilité etc. désactivées. Ceci n'est pas possible avec de nouveaux onglets. Par conséquent, de nombreux utilisateurs préfèrent utiliser des onglets étant donné que l'interface de leur navigateur est laissée intacte et reste stable.
+- L'ouverture de nouvelles fenêtres, même avec leurs fonctionnalités réduites, utilise des ressources système considérables sur l'ordinateur de l'utilisateur (processeur, mémoire RAM) et met en jeu une grande quantité de code à exécuter (gestion de la sécurité, de la mémoire, diverses options de code parfois assez complexes, la construction du cadre de la fenêtre, des barres d'outils de la fenêtre, son positionnement et sa taille, etc.). L'ouverture de nouveaux onglets demande nettement moins de ressources système et est plus rapide à exécuter que d'ouvrir de nouvelles fenêtres.
 
-<p>Les liens « javascript: » sont toujours mauvais pour l'accessibilité et l'utilisabilité des pages Web dans tous les navigateurs.</p>
+#### Offrez d'ouvrir un lien dans une nouvelle fenêtre, en suivant ces recommandations
 
-<ul>
- <li>Les pseudo-liens « javascript:» ne fonctionnent plus du tout lorsque la gestion de JavaScript est désactivée ou inexistante. Certaines sociétés n'autorisent leurs employés à utiliser le Web que suivant des politiques de sécurité très strictes : JavaScript désactivé, pas de Java, pas d'ActiveX, pas de Flash. Pour diverses raisons (sécurité, accès public, navigateurs texte, etc.), environ 5% à 10% des utilisateurs naviguent sur le Web avec JavaScript désactivé.</li>
- <li>Les liens « javascript: » interfèrent avec les fonctionnalités avancées de la navigation par onglets : entre autres, le clic du milieu sur des liens, le raccourci Ctrl+clic sur un lien, les fonctions de certaines extensions, etc.</li>
- <li>Les liens « javascript: » interfèrent avec le processus d'indexation des pages Web par les moteurs de recherche.</li>
- <li>Les liens « javascript: » interfèrent avec les technologies d'assistance (par exemple les lecteurs vocaux) et diverses applications utilisant le Web (par exemple les <abbr>PDA</abbr> ou les navigateurs pour mobiles).</li>
- <li>Les liens « javascript: » interfèrent également avec les fonctionnalités de « mouse gestures » proposées par certains navigateurs.</li>
- <li>Le schéma de protocole « javascript: » sera rapporté comme une erreur par les validateurs et vérificateurs de liens.</li>
-</ul>
+Si vous voulez permettre l'ouverture d'un lien dans une nouvelle fenêtre, suivez ces règles d'utilisabilité et d'accessibilité testées et éprouvées :
 
-<p><strong>Plus d'informations à ce sujet :</strong></p>
+##### N'utilisez _jamais_ ce format de code pour les liens :<br>`<a href="javascript:window.open(...)" ...>`
 
-<ul>
- <li><a href="http://www.useit.com/alertbox/20021223.html">Top Ten Web-Design Mistakes of 2002</a>, 6. JavaScript in Links, Jakob Nielsen, Décembre 2002</li>
- <li><a href="http://www.evolt.org/article/Links_and_JavaScript_Living_Together_in_Harmony/17/20938/">Links &amp; JavaScript Living Together in Harmony</a>, Jeff Howden, Février 2002</li>
- <li><a href="http://jibbering.com/faq/#FAQ4_24">FAQ de la discussion dans le newsgroup comp.lang.javascript sur les liens "javascript:"</a></li>
-</ul>
+Les liens « javascript: » sont toujours mauvais pour l'accessibilité et l'utilisabilité des pages Web dans tous les navigateurs.
 
-<h5 id="N.27utilisez_jamais_.3Ca_href.3D.22.23.22_onclick.3D.22window.open.28....29.3B.22.3E">N'utilisez jamais <code>&lt;a href="#" onclick="window.open(...);"&gt;</code></h5>
+- Les pseudo-liens « javascript:» ne fonctionnent plus du tout lorsque la gestion de JavaScript est désactivée ou inexistante. Certaines sociétés n'autorisent leurs employés à utiliser le Web que suivant des politiques de sécurité très strictes : JavaScript désactivé, pas de Java, pas d'ActiveX, pas de Flash. Pour diverses raisons (sécurité, accès public, navigateurs texte, etc.), environ 5% à 10% des utilisateurs naviguent sur le Web avec JavaScript désactivé.
+- Les liens « javascript: » interfèrent avec les fonctionnalités avancées de la navigation par onglets : entre autres, le clic du milieu sur des liens, le raccourci Ctrl+clic sur un lien, les fonctions de certaines extensions, etc.
+- Les liens « javascript: » interfèrent avec le processus d'indexation des pages Web par les moteurs de recherche.
+- Les liens « javascript: » interfèrent avec les technologies d'assistance (par exemple les lecteurs vocaux) et diverses applications utilisant le Web (par exemple les PDA ou les navigateurs pour mobiles).
+- Les liens « javascript: » interfèrent également avec les fonctionnalités de « mouse gestures » proposées par certains navigateurs.
+- Le schéma de protocole « javascript: » sera rapporté comme une erreur par les validateurs et vérificateurs de liens.
 
-<p>Un tel pseudo-lien met également en péril l'accessibilité des liens. <strong>Utilisez toujours une véritable URL pour la valeur de l'attribut href</strong>, afin que si JavaScript s'avère désactivé ou absent, ou si le navigateur ne peut pas ouvrir de fenêtre secondaire (comme Microsoft Web TV, les navigateurs en mode texte, etc.), de tels navigateurs pourront toujours charger la référence référencée dans leur mode de chargement/gestion de nouvelles ressources par défaut. Cette forme de code interfère également avec les fonctionnalités avancées de navigation par onglets de certains navigateurs, comme le clic du milieu et les raccourcis Ctrl+clic et Ctrl+Entrée sur les liens, les « mouse gestures », etc.</p>
+**Plus d'informations à ce sujet :**
 
-<h5 id="Identifiez_toujours_les_liens_qui_cr.C3.A9eront_.28ou_r.C3.A9utiliseront.29_une_nouvelle_fen.C3.AAtre_secondaire">Identifiez toujours les liens qui créeront (ou réutiliseront) une nouvelle fenêtre secondaire</h5>
+- [Top Ten Web-Design Mistakes of 2002](http://www.useit.com/alertbox/20021223.html), 6. JavaScript in Links, Jakob Nielsen, Décembre 2002
+- [Links & JavaScript Living Together in Harmony](http://www.evolt.org/article/Links_and_JavaScript_Living_Together_in_Harmony/17/20938/), Jeff Howden, Février 2002
+- [FAQ de la discussion dans le newsgroup comp.lang.javascript sur les liens "javascript:"](http://jibbering.com/faq/#FAQ4_24)
 
-<p>Identifiez les liens qui ouvriront de nouvelles fenêtre de manière à aider les utilisateurs en utilisant l'attribut <code>title</code> du lien, en ajoutant une icône à la fin du lien, ou en modifiant le curseur de la souris.</p>
+##### N'utilisez jamais `<a href="#" onclick="window.open(...);">`
 
-<p>Le but est d'avertir les utilisateurs à l'avance des changements de contexte pour réduire la confusion de leur part : changer la fenêtre courante ou afficher subitement une nouvelle fenêtre peut être très désorientant pour certains utilisateurs (le bouton Précédent devient inutilisable).</p>
+Un tel pseudo-lien met également en péril l'accessibilité des liens. **Utilisez toujours une véritable URL pour la valeur de l'attribut href**, afin que si JavaScript s'avère désactivé ou absent, ou si le navigateur ne peut pas ouvrir de fenêtre secondaire (comme Microsoft Web TV, les navigateurs en mode texte, etc.), de tels navigateurs pourront toujours charger la référence référencée dans leur mode de chargement/gestion de nouvelles ressources par défaut. Cette forme de code interfère également avec les fonctionnalités avancées de navigation par onglets de certains navigateurs, comme le clic du milieu et les raccourcis Ctrl+clic et Ctrl+Entrée sur les liens, les « mouse gestures », etc.
 
-<blockquote>
-<p>« Souvent, les utilisateurs ne remarquent pas qu'une nouvelle fenêtre s'est ouverte, particulièrement si ils utilisent un petit écran où les fenêtres sont agrandies pour utiliser toute la surface de l'écran. Ainsi, l'utilisateur voulant retourner à la page initiale sera dérouté par un bouton<em>Précédente</em> grisé. »<br>
- citation de <a href="http://www.useit.com/alertbox/990530.html">The Top Ten<em>New</em> Mistakes of Web Design</a>: 2. Opening New Browser Windows, Jakob Nielsen, mai 1999</p>
-</blockquote>
+##### Identifiez toujours les liens qui créeront (ou réutiliseront) une nouvelle fenêtre secondaire
 
-<p>Lorsque des changements complets de contexte sont identifiés explicitement avant qu'ils se produisent, l'utilisateur peut déterminer s'il désire le faire ou s'y préparer : non seulement il ne sera pas perturbé ni désorienté, mais des utilisateurs plus expérimentés pourront eux-mêmes décider comment ouvrir de tels liens (dans une nouvelle fenêtre ou non, dans la même fenêtre, dans un nouvel onglet ou non, en arrière-plan ou non).</p>
+Identifiez les liens qui ouvriront de nouvelles fenêtre de manière à aider les utilisateurs en utilisant l'attribut `title` du lien, en ajoutant une icône à la fin du lien, ou en modifiant le curseur de la souris.
 
-<p><strong>Références</strong></p>
+Le but est d'avertir les utilisateurs à l'avance des changements de contexte pour réduire la confusion de leur part : changer la fenêtre courante ou afficher subitement une nouvelle fenêtre peut être très désorientant pour certains utilisateurs (le bouton Précédent devient inutilisable).
 
-<ul>
- <li>« Si votre lien crée une nouvelle fenêtre, ou fait apparaitre d'autres fenêtres sur votre affichage, ou déplace le focus du système vers un autre cadre ou une autre fenêtre, alors la chose sympathique à faire est d'indiquer à l'utilisateur que quelque chose de ce genre va se produire. » <a href="http://www.w3.org/WAI/wcag-curric/sam77-0.htm">World Wide Web Consortium Accessibility Initiative regarding popups</a></li>
- <li>« Utilisez les titres de liens pour donner aux utilisateurs un aperçu d'où chaque lien les emmènera, avant qu'ils aient cliqué dessus. » <a href="http://www.useit.com/alertbox/991003.html">Ten Good Deeds in Web Design</a>, Jakob Nielsen, octobre 1999</li>
- <li><a href="http://www.useit.com/alertbox/980111.html">Using Link Titles to Help Users Predict Where They Are Going</a>, Jakob Nielsen, janvier 1998</li>
-</ul>
+> « Souvent, les utilisateurs ne remarquent pas qu'une nouvelle fenêtre s'est ouverte, particulièrement si ils utilisent un petit écran où les fenêtres sont agrandies pour utiliser toute la surface de l'écran. Ainsi, l'utilisateur voulant retourner à la page initiale sera dérouté par un bouton*Précédente* grisé. »
+> citation de [The Top Ten*New* Mistakes of Web Design](http://www.useit.com/alertbox/990530.html): 2. Opening New Browser Windows, Jakob Nielsen, mai 1999
 
-<h5 id="Utilisez_toujours_l.27attribut_target">Utilisez toujours l'attribut target</h5>
+Lorsque des changements complets de contexte sont identifiés explicitement avant qu'ils se produisent, l'utilisateur peut déterminer s'il désire le faire ou s'y préparer : non seulement il ne sera pas perturbé ni désorienté, mais des utilisateurs plus expérimentés pourront eux-mêmes décider comment ouvrir de tels liens (dans une nouvelle fenêtre ou non, dans la même fenêtre, dans un nouvel onglet ou non, en arrière-plan ou non).
 
-<p>Si JavaScript est désactivé ou absent, le navigateur créera une fenêtre secondaire ou affichera la ressource demandée selon sa gestion habituelle de l'attribut target : par exemple certains navigateurs ne pouvant pas créer de nouvelles fenêtres comme Microsoft Web TV, chargeront la ressource demandée et l'ajouteront à la fin du document courant. Le but et l'idée est d'essayer de fournir — <strong>sans l'imposer</strong> — à l'utilisateur une manière d'ouvrir la ressource référencée, de suivre le lien. Votre code ne doit pas interférer avec les fonctionnalités du navigateur à disposition de l'utilisateur, et doit toujours lui laisser le chemin libre et le choix de la décision finale.</p>
+**Références**
 
-<h5 id="N.27utilisez_pas_target.3D.22_blank.22">N'utilisez pas <code>target="_blank"</code></h5>
+- « Si votre lien crée une nouvelle fenêtre, ou fait apparaitre d'autres fenêtres sur votre affichage, ou déplace le focus du système vers un autre cadre ou une autre fenêtre, alors la chose sympathique à faire est d'indiquer à l'utilisateur que quelque chose de ce genre va se produire. » [World Wide Web Consortium Accessibility Initiative regarding popups](http://www.w3.org/WAI/wcag-curric/sam77-0.htm)
+- « Utilisez les titres de liens pour donner aux utilisateurs un aperçu d'où chaque lien les emmènera, avant qu'ils aient cliqué dessus. » [Ten Good Deeds in Web Design](http://www.useit.com/alertbox/991003.html), Jakob Nielsen, octobre 1999
+- [Using Link Titles to Help Users Predict Where They Are Going](http://www.useit.com/alertbox/980111.html), Jakob Nielsen, janvier 1998
 
-<p>Fournissez toujours un nom significatif dans votre attribut target, et essayez de le réutiliser dans votre page afin qu'un clic sur un autre lien puisse charger la ressource dans une fenêtre déjà utilisée (ce qui rend l'opération beaucoup plus rapide pour l'utilisateur), ce qui justifie la raison (et les ressources système, et le temps dépensé) d'avoir créé une fenêtre secondaire. Utiliser une seule cible et la réutiliser pour plusieurs liens est bien moins gourmand en matière de ressources puisqu'une seule fenêtre est créée et recyclée. D'un autre côté, utiliser « _blank » comme attribut target créera plusieurs nouvelles fenêtre anonymes sur le bureau de l'utilisateur qui ne peuvent ni être recyclées ni réutilisées.</p>
+##### Utilisez toujours l'attribut target
 
-<p>Dans tous les cas, si votre code est bien fait, il ne devrait pas interférer avec le choix final de l'utilisateur mais lui offrira plutôt des choix supplémentaires, plus de façons d'ouvrir les liens et plus de pouvoir sur l'outil qu'il utilise (son navigateur).</p>
+Si JavaScript est désactivé ou absent, le navigateur créera une fenêtre secondaire ou affichera la ressource demandée selon sa gestion habituelle de l'attribut target : par exemple certains navigateurs ne pouvant pas créer de nouvelles fenêtres comme Microsoft Web TV, chargeront la ressource demandée et l'ajouteront à la fin du document courant. Le but et l'idée est d'essayer de fournir — **sans l'imposer** — à l'utilisateur une manière d'ouvrir la ressource référencée, de suivre le lien. Votre code ne doit pas interférer avec les fonctionnalités du navigateur à disposition de l'utilisateur, et doit toujours lui laisser le chemin libre et le choix de la décision finale.
 
-<h3 id="Glossaire">Glossaire</h3>
+##### N'utilisez pas `target="_blank"`
 
-<dl>
- <dt>Fenêtre ouvrante, opener, fenêtre parente, fenêtre principale, première fenêtre</dt>
- <dd>Termes souvent utilisés pour décrire ou identifier la même fenêtre. Il s'agit de la fenêtre depuis laquelle une nouvelle fenêtre sera créée. C'est la fenêtre dans laquelle l'utilisateur clique sur un lien qui mène à la création d'une autre, nouvelle fenêtre.</dd>
- <dt>Sous-fenêtre, fenêtre enfant, fenêtre secondaire, deuxième fenêtre</dt>
- <dd>Termes souvent utilisés pour décrire ou identifier la même fenêtre. C'est la nouvelle fenêtre qui a été créée.</dd>
- <dt>Fenêtres popup non sollicitées</dt>
- <dd>Ouverture automatique de fenêtres initiée par un script sans le consentement de l'utilisateur.</dd>
-</dl>
+Fournissez toujours un nom significatif dans votre attribut target, et essayez de le réutiliser dans votre page afin qu'un clic sur un autre lien puisse charger la ressource dans une fenêtre déjà utilisée (ce qui rend l'opération beaucoup plus rapide pour l'utilisateur), ce qui justifie la raison (et les ressources système, et le temps dépensé) d'avoir créé une fenêtre secondaire. Utiliser une seule cible et la réutiliser pour plusieurs liens est bien moins gourmand en matière de ressources puisqu'une seule fenêtre est créée et recyclée. D'un autre côté, utiliser « _blank » comme attribut target créera plusieurs nouvelles fenêtre anonymes sur le bureau de l'utilisateur qui ne peuvent ni être recyclées ni réutilisées.
 
-<h3 id="Sp.C3.A9cification">Spécification</h3>
+Dans tous les cas, si votre code est bien fait, il ne devrait pas interférer avec le choix final de l'utilisateur mais lui offrira plutôt des choix supplémentaires, plus de façons d'ouvrir les liens et plus de pouvoir sur l'outil qu'il utilise (son navigateur).
 
-<p>{{ DOM0() }} <code>window.open()</code> ne fait partie d'aucune spécification ou recommandation technique du <abbr>W3C</abbr>.</p>
+### Glossaire
 
-<h3 id="Notes">Notes</h3>
+- Fenêtre ouvrante, opener, fenêtre parente, fenêtre principale, première fenêtre
+  - : Termes souvent utilisés pour décrire ou identifier la même fenêtre. Il s'agit de la fenêtre depuis laquelle une nouvelle fenêtre sera créée. C'est la fenêtre dans laquelle l'utilisateur clique sur un lien qui mène à la création d'une autre, nouvelle fenêtre.
+- Sous-fenêtre, fenêtre enfant, fenêtre secondaire, deuxième fenêtre
+  - : Termes souvent utilisés pour décrire ou identifier la même fenêtre. C'est la nouvelle fenêtre qui a été créée.
+- Fenêtres popup non sollicitées
+  - : Ouverture automatique de fenêtres initiée par un script sans le consentement de l'utilisateur.
 
-<h4 id="Note_sur_les_priorit.C3.A9s">Note sur les priorités</h4>
+### Spécification
 
-<p>Dans les cas où <code>left</code> et <code>screenX</code> (et/ou <code>top</code> et <code>screenY</code>) ont des valeurs contradictoires, <code>left</code> et <code>top</code> ont priorité sur <code>screenX</code> et <code>screenY</code> respectivement. Si <code>left</code> et <code>screenX</code> (et/ou <code>top</code> et <code>screenY</code>) sont définies dans la liste <var>strWindowFeatures</var>, les valeurs <code>left</code> (et/ou <code>top</code>) seront reconnues et utilisées. Dans l'exemple suivant, la nouvelle fenêtre sera positionnée à 100 pixels du bord gauche de la zone de travail des applications du système d'exploitation de l'utilisateur, et non à 200 pixels.</p>
+{{ DOM0() }} `window.open()` ne fait partie d'aucune spécification ou recommandation technique du W3C.
 
-<pre class="brush: html">&lt;script type="text/javascript"&gt;
+### Notes
+
+#### Note sur les priorités
+
+Dans les cas où `left` et `screenX` (et/ou `top` et `screenY`) ont des valeurs contradictoires, `left` et `top` ont priorité sur `screenX` et `screenY` respectivement. Si `left` et `screenX` (et/ou `top` et `screenY`) sont définies dans la liste _strWindowFeatures_, les valeurs `left` (et/ou `top`) seront reconnues et utilisées. Dans l'exemple suivant, la nouvelle fenêtre sera positionnée à 100 pixels du bord gauche de la zone de travail des applications du système d'exploitation de l'utilisateur, et non à 200 pixels.
+
+```html
+<script type="text/javascript">
 WindowObjectReference = window.open("http://www.lemonde.fr/",
            "NomDeLaFenetreLeMonde",
            "left=100,screenX=200,resizable,scrollbars,status");
-&lt;/script&gt;
-</pre>
+</script>
+```
 
-<p>Si <code>left</code> est défini, mais que <code>top</code> n'a aucune valeur mais que <code>screenY</code> en a une, <code>left</code> et <code>screenY</code> seront les coordonnées de positionnement de la fenêtre secondaire.</p>
+Si `left` est défini, mais que `top` n'a aucune valeur mais que `screenY` en a une, `left` et `screenY` seront les coordonnées de positionnement de la fenêtre secondaire.
 
-<p><code>outerWidth</code> a priorité sur <code>width</code>, et <code>width</code> a priorité sur <code>innerWidth</code>. <code>outerHeight</code> a priorité sur <code>height</code> et <code>height</code> a priorité sur <code>innerHeight</code>. Dans l'exemple suivant, les navigateurs basés sur Mozilla créeront une nouvelle fenêtre avec une taille extérieure (outerWidth) de 600 pixels de large et ignoreront la requête d'une largeur (width) de 500 pixels ainsi que celle d'une taille intérieure (innerWidth) de 400 pixels.</p>
+`outerWidth` a priorité sur `width`, et `width` a priorité sur `innerWidth`. `outerHeight` a priorité sur `height` et `height` a priorité sur `innerHeight`. Dans l'exemple suivant, les navigateurs basés sur Mozilla créeront une nouvelle fenêtre avec une taille extérieure (outerWidth) de 600 pixels de large et ignoreront la requête d'une largeur (width) de 500 pixels ainsi que celle d'une taille intérieure (innerWidth) de 400 pixels.
 
-<pre class="brush: html">&lt;script type="text/javascript"&gt;
+```html
+<script type="text/javascript">
 WindowObjectReference = window.open("http://www.wwf.org/",
            "NomDeLaFenetreWWF",
            "outerWidth=600,width=500,innerWidth=400,resizable,scrollbars,status");
-&lt;/script&gt;
-</pre>
-
-<h4 id="Note_sur_les_corrections_d.27erreurs_de_position_et_de_dimension">Note sur les corrections d'erreurs de position et de dimension</h4>
+</script>
+```
 
-<p>Les positions et dimensions demandées dans la liste <var>strWindowFeatures</var> ne seront pas respectées et <strong>seront corrigées</strong> si n'importe laquelle de ces valeurs ne permet pas à la fenêtre complète d'être affichée dans la zone de travail des applications du système d'exploitation de l'utilisateur. <strong>Aucune partie de la nouvelle fenêtre ne peut être initialement positionnée hors de l'écran. Ceci est le réglage par défaut de tous les navigateurs basés sur Mozilla.</strong></p>
+#### Note sur les corrections d'erreurs de position et de dimension
 
-<p><a href="http://msdn.microsoft.com/security/productinfo/xpsp2/default.aspx?pull=/library/en-us/dnwxp/html/xpsp2web.asp#xpsp_topic5">Internet Explorer 6 SP2 dispose d'un mécanisme de correction d'erreur similaire</a>, mais celui-ci n'est pas activé par défaut pour tous les niveaux de sécurité : un niveau de sécurité trop bas peut désactiver ce mécanisme de correction d'erreurs.</p>
+Les positions et dimensions demandées dans la liste _strWindowFeatures_ ne seront pas respectées et **seront corrigées** si n'importe laquelle de ces valeurs ne permet pas à la fenêtre complète d'être affichée dans la zone de travail des applications du système d'exploitation de l'utilisateur. **Aucune partie de la nouvelle fenêtre ne peut être initialement positionnée hors de l'écran. Ceci est le réglage par défaut de tous les navigateurs basés sur Mozilla.**
 
-<h4 id="Note_sur_les_barres_de_d.C3.A9filement">Note sur les barres de défilement</h4>
+[Internet Explorer 6 SP2 dispose d'un mécanisme de correction d'erreur similaire](http://msdn.microsoft.com/security/productinfo/xpsp2/default.aspx?pull=/library/en-us/dnwxp/html/xpsp2web.asp#xpsp_topic5), mais celui-ci n'est pas activé par défaut pour tous les niveaux de sécurité : un niveau de sécurité trop bas peut désactiver ce mécanisme de correction d'erreurs.
 
-<p>Lorsque le contenu dépasse les dimensions de la zone de visualisation de la fenêtre, des barres de défilement (ou un mécanisme de définement similaire) sont nécessaires pour s'assurer que les utilisateurs puissent accéder au contenu. Le contenu ou la boîte du document d'une page web peut outrepasser, excéder les dimensions demandées pour la fenêtre pour plusieurs raisons qui sont hors du contrôle des auteurs Web :</p>
+#### Note sur les barres de défilement
 
-<ul>
- <li>l'utilisateur a redimensionné la fenêtre</li>
- <li>l'utilisateur a augmenté la taille de police du texte via le menu Affichage/Taille du texte (%) dans Mozilla ou Affichage/Taille du texte/Plus grande ou Plus petite dans Firefox</li>
- <li>l'utilisateur a défini une taille minimale de police pour les pages qui est plus grande que celle demandée par l'auteur. Les personnes de plus de 40 ans ou ayant des habitudes particulières de lecture choisissent souvent une taille minimale de police dans les navigateurs basés sur Mozilla.</li>
- <li>l'auteur n'est pas conscient des marges par défaut (et/ou bordures et/ou padding) appliquées à l'élément racine ou nœud <code>body</code> dans les différents navigateurs et versions de ceux-ci</li>
- <li>l'utilisateur utilise une feuille de style utilisateur (<a href="http://www.mozilla.org/support/firefox/edit#content">userContent.css in Mozilla-based browsers</a>) pour ses habitudes de navigation qui modifie les dimensions habituelles pour ses habitudes de lecture (marges, padding, taille de police par défaut)</li>
- <li>l'utilisateur peut personnaliser individuellement la taille (hauteur ou largeur) de la plupart des barres d'outils via son système d'exploitation. Par exemple les bordures de fenêtres, la hauteur de la barre de titre, des menus et des barres de défilement, ainsi que la taille du texte sont entièrement personnalisables par l'utilisateur dans le système d'exploitation Windows XP. Ces dimensions de barres d'outils peuvent également être changées par des thèmes du navigateur, ou du système d'exploitation</li>
- <li>l'auteur ne s'attend pas à ce que la fenêtre de l'utilisateur dispose de barres d'outils spécifiques supplémentaires ; comme des barres de préférences, la barre web developer, des barres d'accessibilité, de blocage de popups et de recherche, etc.</li>
- <li>l'utilisateur utilise des technologies assistives ou addons qui modifient la zone de travail des applications, par exemple Microsoft Magnifier</li>
- <li>l'utilisateur repositionne et/ou redimensionne directement la zone de travail des apllications : par exemple il redimensionne la barre des tâches de Windows, la place sur le côté gauche de l'écran (versions en langues arabes) ou sur la droite (versions en hébreu), l'utilisateur a une barre de lancement rapide Microsoft Office, etc.</li>
- <li>certains systèmes d'exploitation (Mac OS X) forcent la présence de barres d'outils qui peuvent démentir les anticipations et calculs de l'auteur Web sur les dimensions effectives de la fenêtre de navigation</li>
-</ul>
+Lorsque le contenu dépasse les dimensions de la zone de visualisation de la fenêtre, des barres de défilement (ou un mécanisme de définement similaire) sont nécessaires pour s'assurer que les utilisateurs puissent accéder au contenu. Le contenu ou la boîte du document d'une page web peut outrepasser, excéder les dimensions demandées pour la fenêtre pour plusieurs raisons qui sont hors du contrôle des auteurs Web :
 
-<h4 id="Note_sur_la_barre_d.27.C3.A9tat">Note sur la barre d'état</h4>
+- l'utilisateur a redimensionné la fenêtre
+- l'utilisateur a augmenté la taille de police du texte via le menu Affichage/Taille du texte (%) dans Mozilla ou Affichage/Taille du texte/Plus grande ou Plus petite dans Firefox
+- l'utilisateur a défini une taille minimale de police pour les pages qui est plus grande que celle demandée par l'auteur. Les personnes de plus de 40 ans ou ayant des habitudes particulières de lecture choisissent souvent une taille minimale de police dans les navigateurs basés sur Mozilla.
+- l'auteur n'est pas conscient des marges par défaut (et/ou bordures et/ou padding) appliquées à l'élément racine ou nœud `body` dans les différents navigateurs et versions de ceux-ci
+- l'utilisateur utilise une feuille de style utilisateur ([userContent.css in Mozilla-based browsers](http://www.mozilla.org/support/firefox/edit#content)) pour ses habitudes de navigation qui modifie les dimensions habituelles pour ses habitudes de lecture (marges, padding, taille de police par défaut)
+- l'utilisateur peut personnaliser individuellement la taille (hauteur ou largeur) de la plupart des barres d'outils via son système d'exploitation. Par exemple les bordures de fenêtres, la hauteur de la barre de titre, des menus et des barres de défilement, ainsi que la taille du texte sont entièrement personnalisables par l'utilisateur dans le système d'exploitation Windows XP. Ces dimensions de barres d'outils peuvent également être changées par des thèmes du navigateur, ou du système d'exploitation
+- l'auteur ne s'attend pas à ce que la fenêtre de l'utilisateur dispose de barres d'outils spécifiques supplémentaires ; comme des barres de préférences, la barre web developer, des barres d'accessibilité, de blocage de popups et de recherche, etc.
+- l'utilisateur utilise des technologies assistives ou addons qui modifient la zone de travail des applications, par exemple Microsoft Magnifier
+- l'utilisateur repositionne et/ou redimensionne directement la zone de travail des apllications : par exemple il redimensionne la barre des tâches de Windows, la place sur le côté gauche de l'écran (versions en langues arabes) ou sur la droite (versions en hébreu), l'utilisateur a une barre de lancement rapide Microsoft Office, etc.
+- certains systèmes d'exploitation (Mac OS X) forcent la présence de barres d'outils qui peuvent démentir les anticipations et calculs de l'auteur Web sur les dimensions effectives de la fenêtre de navigation
 
-<p>Vous devez vous attendre à ce qu'une large majorité des navigateurs affichent la barre d'état, ou qu'une large majorité des utilisateurs voudront forcer sa présence : le mieux est de toujours positionner cette fonctionnalité à yes. De plus, si vous demandez spécifiquement de retirer la barre d'état, les utilisateurs de Firefox ne pourront plus utilser la barre de navigation de site si elle est installée. Dans Mozilla et dans Firefox, toutes les fenêtres peuvent être redimensionnées à partir de la zone inférieure droite de la barre d'état. Celle-ci fournit également des informations sur la connexion http, l'emplacement des ressources hypertextes, la barre de progression du téléchargement, l'icône de chiffrement/connexion sécurisée avec <abbr>SSL</abbr> (affichant une icône de cadenas jaune), des icônes de zones de sécurité, de politique de sécurité en matière de cookies, etc. <strong>Enlever la barre d'état retire souvent de très nombreuses fonctionnalités et informations considérées comme utiles (et parfois vitales) par les utilisateurs.</strong></p>
+#### Note sur la barre d'état
 
-<h4 id="Note_sur_les_probl.C3.A8mes_de_s.C3.A9curit.C3.A9_li.C3.A9s_.C3.A0_la_pr.C3.A9sence_de_la_barre_d.27.C3.A9tat">Note sur les problèmes de sécurité liés à la présence de la barre d'état</h4>
+Vous devez vous attendre à ce qu'une large majorité des navigateurs affichent la barre d'état, ou qu'une large majorité des utilisateurs voudront forcer sa présence : le mieux est de toujours positionner cette fonctionnalité à yes. De plus, si vous demandez spécifiquement de retirer la barre d'état, les utilisateurs de Firefox ne pourront plus utilser la barre de navigation de site si elle est installée. Dans Mozilla et dans Firefox, toutes les fenêtres peuvent être redimensionnées à partir de la zone inférieure droite de la barre d'état. Celle-ci fournit également des informations sur la connexion http, l'emplacement des ressources hypertextes, la barre de progression du téléchargement, l'icône de chiffrement/connexion sécurisée avec SSL (affichant une icône de cadenas jaune), des icônes de zones de sécurité, de politique de sécurité en matière de cookies, etc. **Enlever la barre d'état retire souvent de très nombreuses fonctionnalités et informations considérées comme utiles (et parfois vitales) par les utilisateurs.**
 
-<p>Dans Internet Explorer 6 pour XP SP2, pour les fenêtres ouvertes à l'aide de <code>window.open()</code> :</p>
+#### Note sur les problèmes de sécurité liés à la présence de la barre d'état
 
-<blockquote>
-<p>« Pour les fenêtres ouvertes à l'aide de <code>window.open()</code> :<br>
- Attendez-vous à ce que la barre d'état soit présente, et codez en conséquence. <strong>La barre d'état sera activée par défaut</strong> et fait entre 20 et 25 pixels de haut. (...) »<br>
- citation de <a href="http://msdn.microsoft.com/security/productinfo/xpsp2/default.aspx?pull=/library/en-us/dnwxp/html/xpsp2web.asp#xpsp_topic5">Fine-Tune Your Web Site for Windows XP Service Pack 2, Browser Window Restrictions in XP SP2</a></p>
-</blockquote>
+Dans Internet Explorer 6 pour XP SP2, pour les fenêtres ouvertes à l'aide de `window.open()` :
 
-<blockquote>
-<p>« (...) les fenêtres créées à l'aide de la méthode <code>window.open()</code> peuvent être appelées par des scripts et utilisées pour imiter une fausse interface utilisateur ou bureau, ou pour masquer des informations ou des activités malveillantes en dimensionnant la fenêtre de manière à rendre la barre d'état invisible.<br>
- Les fenêtres d'Internet Explorer fournissent des informations de sécurité visibles par l'utilisateur pour l'aider à identifier avec certitude la source de la page et le niveau de sécurité de la communication avec cette page. Lorsque ces éléments ne sont pas visibles, les utilisateurs peuvent penser qu'ils sont sur une page plus digne de confiance ou interagissent avec un processus système alors qu'il sont en train d'interagir avec un hôte malveillant. (...)<br>
- <strong>Les fenêtres lancées par des scripts seront affichées entièrement, avec la barre de titre d'Internet Explorer et sa barre d'état.</strong> (...)<br>
- Gestion de la barre d'état d'Internet Explorer par les scripts<br>
- Description détaillée<br>
- <strong>Internet Explorer a été modifié pour ne désactiver la barre d'état pour aucune fenêtre. La barre d'état est toujours visible pour toutes les fenêtres d'Internet Explorer.</strong> (...) Sans ce changement, les fenêtres créées à l'aide de la méthode <code>window.open()</code> peuvent être appelées par des scripts et imiter une fausse interface utilisateur ou bureau, ou pour masquer des informations importantes pour l'utilisateur.<br>
- La barre d'état est une fonction de sécurité des fenêtres d'Internet Explorer qui fournissent à l'utilisateur des informations sur les zones de sécurité. Cette zone ne peut pas être imitée (...)"<br>
- citation de <a href="http://www.microsoft.com/technet/prodtechnol/winxppro/maintain/sp2brows.mspx#ECAA">Changes to Functionality in Microsoft Windows XP Service Pack 2, Internet Explorer Window Restrictions</a></p>
-</blockquote>
+> « Pour les fenêtres ouvertes à l'aide de `window.open()` :
+> Attendez-vous à ce que la barre d'état soit présente, et codez en conséquence. **La barre d'état sera activée par défaut** et fait entre 20 et 25 pixels de haut. (...) »
+> citation de [Fine-Tune Your Web Site for Windows XP Service Pack 2, Browser Window Restrictions in XP SP2](http://msdn.microsoft.com/security/productinfo/xpsp2/default.aspx?pull=/library/en-us/dnwxp/html/xpsp2web.asp#xpsp_topic5)
 
-<h4 id="Note_sur_le_plein_.C3.A9cran_.28fullscreen.29">Note sur le plein écran (fullscreen)</h4>
+> « (...) les fenêtres créées à l'aide de la méthode `window.open()` peuvent être appelées par des scripts et utilisées pour imiter une fausse interface utilisateur ou bureau, ou pour masquer des informations ou des activités malveillantes en dimensionnant la fenêtre de manière à rendre la barre d'état invisible.
+> Les fenêtres d'Internet Explorer fournissent des informations de sécurité visibles par l'utilisateur pour l'aider à identifier avec certitude la source de la page et le niveau de sécurité de la communication avec cette page. Lorsque ces éléments ne sont pas visibles, les utilisateurs peuvent penser qu'ils sont sur une page plus digne de confiance ou interagissent avec un processus système alors qu'il sont en train d'interagir avec un hôte malveillant. (...)
+> **Les fenêtres lancées par des scripts seront affichées entièrement, avec la barre de titre d'Internet Explorer et sa barre d'état.** (...)
+> Gestion de la barre d'état d'Internet Explorer par les scripts
+> Description détaillée
+> **Internet Explorer a été modifié pour ne désactiver la barre d'état pour aucune fenêtre. La barre d'état est toujours visible pour toutes les fenêtres d'Internet Explorer.** (...) Sans ce changement, les fenêtres créées à l'aide de la méthode `window.open()` peuvent être appelées par des scripts et imiter une fausse interface utilisateur ou bureau, ou pour masquer des informations importantes pour l'utilisateur.
+> La barre d'état est une fonction de sécurité des fenêtres d'Internet Explorer qui fournissent à l'utilisateur des informations sur les zones de sécurité. Cette zone ne peut pas être imitée (...)"
+> citation de [Changes to Functionality in Microsoft Windows XP Service Pack 2, Internet Explorer Window Restrictions](http://www.microsoft.com/technet/prodtechnol/winxppro/maintain/sp2brows.mspx#ECAA)
 
-<p>Dans Internet Explorer 6 pour XP SP2 :</p>
+#### Note sur le plein écran (fullscreen)
 
-<ul>
- <li>« <code>window.open()</code> avec fullscreen=yes donnera à présent une fenêtre maximisée, et non une fenêtre en mode kiosque. »</li>
- <li>« La définition de la spécification de fullscreen=yes est modifiée pour signifier "afficher la fenêtre maximisée," ce qui gardera la barre de titre, la barre d'adresse et la barre d'état visibles. »</li>
-</ul>
+Dans Internet Explorer 6 pour XP SP2 :
 
-<p><em>Références :</em></p>
+- « `window.open()` avec fullscreen=yes donnera à présent une fenêtre maximisée, et non une fenêtre en mode kiosque. »
+- « La définition de la spécification de fullscreen=yes est modifiée pour signifier "afficher la fenêtre maximisée," ce qui gardera la barre de titre, la barre d'adresse et la barre d'état visibles. »
 
-<ul>
- <li><a href="http://msdn.microsoft.com/security/productinfo/xpsp2/default.aspx?pull=/library/en-us/dnwxp/html/xpsp2web.asp#xpsp_topic5">Fine-Tune Your Web Site for Windows XP Service Pack 2</a></li>
- <li><a href="http://www.microsoft.com/technet/prodtechnol/winxppro/maintain/sp2brows.mspx#ECAA">Changes to Functionality in Microsoft Windows XP Service Pack 2, Script sizing of Internet Explorer windows</a></li>
-</ul>
+_Références :_
 
-<h4 id="Note_sur_la_diff.C3.A9rence_entre_outerHeight_et_height">Note sur la différence entre outerHeight et height</h4>
+- [Fine-Tune Your Web Site for Windows XP Service Pack 2](http://msdn.microsoft.com/security/productinfo/xpsp2/default.aspx?pull=/library/en-us/dnwxp/html/xpsp2web.asp#xpsp_topic5)
+- [Changes to Functionality in Microsoft Windows XP Service Pack 2, Script sizing of Internet Explorer windows](http://www.microsoft.com/technet/prodtechnol/winxppro/maintain/sp2brows.mspx#ECAA)
 
+#### Note sur la différence entre outerHeight et height
 
-<h3 id="Tutoriels">Tutoriels</h3>
+### Tutoriels
 
-<p><strong>en français :</strong></p>
+**en français :**
 
-<p><a href="http://openweb.eu.org/articles/popup/">Créer des pop-up intelligentes</a> par Fabrice Bonny, OpenWeb</p>
+[Créer des pop-up intelligentes](http://openweb.eu.org/articles/popup/) par Fabrice Bonny, OpenWeb
 
-<p><strong>en anglais :</strong></p>
+**en anglais :**
 
-<p><a href="http://www.infimum.dk/HTML/JSwindows.html">JavaScript windows (tutorial)</a> par Lasse Reichstein Nielsen</p>
+[JavaScript windows (tutorial)](http://www.infimum.dk/HTML/JSwindows.html) par Lasse Reichstein Nielsen
 
-<p><a href="http://www.accessify.com/tutorials/the-perfect-pop-up.asp">The perfect pop-up (tutorial)</a> par Ian Lloyd</p>
+[The perfect pop-up (tutorial)](http://www.accessify.com/tutorials/the-perfect-pop-up.asp) par Ian Lloyd
 
-<p><a href="http://www.gtalbot.org/FirefoxSection/Popup/PopupAndFirefox.html">Popup windows and Firefox (interactive demos)</a> par Gérard Talbot</p>
+[Popup windows and Firefox (interactive demos)](http://www.gtalbot.org/FirefoxSection/Popup/PopupAndFirefox.html) par Gérard Talbot
 
-<h3 id="R.C3.A9f.C3.A9rences">Références</h3>
+### Références
 
-<p><a href="http://www.cs.tut.fi/~jkorpela/www/links.html">Links Want To Be Links</a> by Jukka K. Korpela</p>
+[Links Want To Be Links](http://www.cs.tut.fi/~jkorpela/www/links.html) by Jukka K. Korpela
 
-<p><a href="http://www.evolt.org/article/Links_and_JavaScript_Living_Together_in_Harmony/17/20938/">Links &amp; JavaScript Living Together in Harmony</a> by Jeff Howden</p>
+[Links & JavaScript Living Together in Harmony](http://www.evolt.org/article/Links_and_JavaScript_Living_Together_in_Harmony/17/20938/) by Jeff Howden
diff --git a/files/fr/web/api/window/opendialog/index.md b/files/fr/web/api/window/opendialog/index.md
index 7449c15b30..ce81137926 100644
--- a/files/fr/web/api/window/opendialog/index.md
+++ b/files/fr/web/api/window/opendialog/index.md
@@ -8,95 +8,98 @@ tags:
   - boîte de dialogue
 translation_of: Web/API/Window/openDialog
 ---
-<p>{{ ApiRef() }}</p>
+{{ ApiRef() }}
 
-<p><code>window.openDialog</code> est une extension à <a href="/fr/DOM/window.open">window.open()</a>. Elle s'utilise de la même manière, excepté qu'elle peut prendre plusieurs paramètres optionnels après<code>windowFeatures</code>, et que<code>windowFeatures</code> est traîté différemment.</p>
+`window.openDialog` est une extension à [window.open()](/fr/DOM/window.open). Elle s'utilise de la même manière, excepté qu'elle peut prendre plusieurs paramètres optionnels après`windowFeatures`, et que`windowFeatures` est traîté différemment.
 
-<p>Les paramètres optionnels, si présents, seront regroupés dans un objet JavaScript Array et seront accessibles depuis la nouvelle fenêtre par la propriété <code>window.arguments</code>. Ils sont accessibles depuis les scripts de la fenêtre à tout moment, notamment lors du traitement d'un évênement<code>load</code> . Ces paramètres peuvent donc être utilisés pour passer des arguments à une boîte de dialogue, et pour les récupérer ensuite.</p>
+Les paramètres optionnels, si présents, seront regroupés dans un objet JavaScript Array et seront accessibles depuis la nouvelle fenêtre par la propriété `window.arguments`. Ils sont accessibles depuis les scripts de la fenêtre à tout moment, notamment lors du traitement d'un évênement`load` . Ces paramètres peuvent donc être utilisés pour passer des arguments à une boîte de dialogue, et pour les récupérer ensuite.
 
-<p>Notez que l'appel à la méthode<code>openDialog()</code> se termine immédiatement. Si vous souhaitez le bloquer jusqu'à ce que l'utilisateur ferme la boîte de dialogue, utilisez la valeur<code>modal</code> pour le paramètre f<code>eatures</code>. En conséquence, l'utilisateur ne pourra pas interagir avec la fenêtre parente jusqu'à ce qu'il ferme la boîte de dialogue modale.</p>
+Notez que l'appel à la méthode`openDialog()` se termine immédiatement. Si vous souhaitez le bloquer jusqu'à ce que l'utilisateur ferme la boîte de dialogue, utilisez la valeur`modal` pour le paramètre f`eatures`. En conséquence, l'utilisateur ne pourra pas interagir avec la fenêtre parente jusqu'à ce qu'il ferme la boîte de dialogue modale.
 
-<h3 id="Syntax">Syntaxe</h3>
+### Syntaxe
 
-<pre class="eval"><em>newWindow</em> = openDialog(<em>url</em>, <em>name</em>, <em>features</em>, <em>arg1</em>, <em>arg2</em>, ...)
-</pre>
+    newWindow = openDialog(url, name, features, arg1, arg2, ...)
 
-<dl>
- <dt>newWindow</dt>
- <dd>La nouvelle fenêtre ouverte.</dd>
- <dt>url</dt>
- <dd>L'URL du document à charger dans la nouvelle fenêtre.</dd>
- <dt>name</dt>
- <dd>Le nom de la fenêtre (optionnel). Voir la description de<a href="/fr/DOM/window.open">window.open()</a> pour plus de détails.</dd>
- <dt>features</dt>
- <dd>Voir la description de<a href="/fr/DOM/window.open">window.open()</a> pour la description.</dd>
- <dt>arg1, arg2, ... </dt>
- <dd>Les arguments à passer à la nouvelle fenêtre (optionnel).</dd>
-</dl>
+- newWindow
+  - : La nouvelle fenêtre ouverte.
+- url
+  - : L'URL du document à charger dans la nouvelle fenêtre.
+- name
+  - : Le nom de la fenêtre (optionnel). Voir la description de[window.open()](/fr/DOM/window.open) pour plus de détails.
+- features
+  - : Voir la description de[window.open()](/fr/DOM/window.open) pour la description.
+- arg1, arg2, ...
+  - : Les arguments à passer à la nouvelle fenêtre (optionnel).
 
-<h3 id="Example">Exemple</h3>
+### Exemple
 
-<pre class="brush: js">var win = openDialog("http://example.tld/zzz.xul", "dlg", "", "pizza", 6.98);</pre>
+```js
+var win = openDialog("http://example.tld/zzz.xul", "dlg", "", "pizza", 6.98);
+```
 
-<h3 id="Notes">Notes</h3>
+### Notes
 
-<h4 id="New_Features">Nouvelles fonctionnalités</h4>
+#### Nouvelles fonctionnalités
 
-<dl>
- <dt><code>all</code></dt>
- <dd>Active ou désactive (<code>"all=no"</code>) toutes les fonctionnalités (excepté <code>chrome</code>, <code>dialog</code> et<code>modal</code>). Peut être utilisé conjointement avec les autres drapeaux (par exemple, <code>"menubar=no, all"</code> active toutes les fonctionnalités excepté <code>menubar</code>). Ce drapeau est ignorée par la méthode<a href="/fr/DOM/window.open">window.open()</a> mais pas par <code>window.openDialog()</code>.</dd>
-</dl>
+- `all`
+  - : Active ou désactive (`"all=no"`) toutes les fonctionnalités (excepté `chrome`, `dialog` et`modal`). Peut être utilisé conjointement avec les autres drapeaux (par exemple, `"menubar=no, all"` active toutes les fonctionnalités excepté `menubar`). Ce drapeau est ignorée par la méthode[window.open()](/fr/DOM/window.open) mais pas par `window.openDialog()`.
 
-<h4 id="Default_behaviour">Comportement</h4>
+#### Comportement
 
-<p>La méthode<code>window.openDialog()</code> traite l'absence du paramètre<code>features</code> de la même manière que<a href="/fr/DOM/window.open">window.open()</a> (une chaîne vide désactive toutes les fonctionnalités) excepté pour<code>chrome</code> et<code>dialog</code> qui sont activés par défaut et peuvent être explicitement désactivées par "<code>chrome=no</code>".</p>
+La méthode`window.openDialog()` traite l'absence du paramètre`features` de la même manière que[window.open()](/fr/DOM/window.open) (une chaîne vide désactive toutes les fonctionnalités) excepté pour`chrome` et`dialog` qui sont activés par défaut et peuvent être explicitement désactivées par "`chrome=no`".
 
-<h4 id="Passing_extra_parameters_to_the_dialog">Passage de paramètres supplémentaires</h4>
+#### Passage de paramètres supplémentaires
 
-<p>Pour passer des paramètres supplémentaires à la boîte de dialogue, vous pouvez simplement les ajouter après le paramètre f<code>eatures</code> :</p>
+Pour passer des paramètres supplémentaires à la boîte de dialogue, vous pouvez simplement les ajouter après le paramètre f`eatures` :
 
-<pre class="brush: js">openDialog("http://example.tld/zzz.xul", "dlg", "", "pizza", 6.98);</pre>
+```js
+openDialog("http://example.tld/zzz.xul", "dlg", "", "pizza", 6.98);
+```
 
-<p>Ces paramètres seront ensuite regroupés dans une propriété <code>arguments</code> de type<a href="/en/Core_JavaScript_1.5_Reference/Global_Objects/Array">Array</a>, et cette propriété sera ajoutée à la nouvelle boîte de dialogue.</p>
+Ces paramètres seront ensuite regroupés dans une propriété `arguments` de type[Array](/en/Core_JavaScript_1.5_Reference/Global_Objects/Array), et cette propriété sera ajoutée à la nouvelle boîte de dialogue.
 
-<p>Pour accéder à ces paramètres depuis un script de la boîte de dialogue, utilisez le procédé suivant :</p>
+Pour accéder à ces paramètres depuis un script de la boîte de dialogue, utilisez le procédé suivant :
 
-<pre class="brush: js">var food = window.arguments[0];
-var price = window.arguments[1];</pre>
+```js
+var food = window.arguments[0];
+var price = window.arguments[1];
+```
 
-<p>Notez que vous pouvez accéder à cette propriété depuis n'importe où dans le script. (<a href="/en/Code_snippets/Dialogs_and_Prompts#Passing_arguments_and_displaying_a_dialog">Autre exemple</a>).</p>
+Notez que vous pouvez accéder à cette propriété depuis n'importe où dans le script. ([Autre exemple](/en/Code_snippets/Dialogs_and_Prompts#Passing_arguments_and_displaying_a_dialog)).
 
-<h4 id="Returning_values_from_the_dialog">Retourner des arguments depuis la boîte de dialogue</h4>
+#### Retourner des arguments depuis la boîte de dialogue
 
-<p>Depuis que<code><a href="/fr/DOM/window.close">window.close()</a></code> efface toutes les propriétés associées à la boîte de dialogue (c'est-à-dire les variables spécifiées depuis le code JavaScript chargé depuis la boîte de dialogue), il n'est pas possible de retourner des valeur après la fermeture de la boîte de dialogue en utilisant des variables globales (ou toute autre méthode).</p>
+Depuis que[`window.close()`](/fr/DOM/window.close) efface toutes les propriétés associées à la boîte de dialogue (c'est-à-dire les variables spécifiées depuis le code JavaScript chargé depuis la boîte de dialogue), il n'est pas possible de retourner des valeur après la fermeture de la boîte de dialogue en utilisant des variables globales (ou toute autre méthode).
 
-<p>Pour pouvoir retourner des valeurs à la fenêtre parente, vous devez passer un objet via les paramètres supplémentaires. Vous pouvez ensuite accéder à cet objet depuis la boîte de dialogue et modifier ces propriétés, dont les données que vous souhaiter conserver après l'appel à la méthode<code>window.close()</code>.</p>
+Pour pouvoir retourner des valeurs à la fenêtre parente, vous devez passer un objet via les paramètres supplémentaires. Vous pouvez ensuite accéder à cet objet depuis la boîte de dialogue et modifier ces propriétés, dont les données que vous souhaiter conserver après l'appel à la méthode`window.close()`.
 
-<pre class="brush: js">var retVals = { address: null, delivery: null };
-openDialog("http://example.tld/zzz.xul", "dlg", "modal", "pizza", 6.98, retVals);</pre>
+```js
+var retVals = { address: null, delivery: null };
+openDialog("http://example.tld/zzz.xul", "dlg", "modal", "pizza", 6.98, retVals);
+```
 
-<p>Si vous modifiez les propriétés de l'objet<code>retVals</code> depuis la boîte de dialogue comme décrit précédemment, vous pouvez y accéder via le tableau<code>retVals</code> après l'appel à <code>openDialog()</code>.</p>
+Si vous modifiez les propriétés de l'objet`retVals` depuis la boîte de dialogue comme décrit précédemment, vous pouvez y accéder via le tableau`retVals` après l'appel à `openDialog()`.
 
-<p>Depuis la boîte de dialogue, vous pouvez modifier les propriétés comme suit :</p>
+Depuis la boîte de dialogue, vous pouvez modifier les propriétés comme suit :
 
-<pre class="brush: js">var retVals = window.arguments[2];
+```js
+var retVals = window.arguments[2];
 retVals.address = enteredAddress;
-retVals.delivery = "immediate";</pre>
+retVals.delivery = "immediate";
+```
 
-<p>Voir aussi<a href="http://groups.google.com/group/netscape.public.dev.xul/msg/02075a1736406b40">ce message</a>. (<a href="/en/Code_snippets/Dialogs_and_Prompts#Passing_arguments_and_displaying_a_dialog">Autre exemple</a>).<br>
- Voir aussi<a href="/fr/DOM/window.importDialog">window.importDialog()</a>.</p>
+Voir aussi[ce message](http://groups.google.com/group/netscape.public.dev.xul/msg/02075a1736406b40). ([Autre exemple](/en/Code_snippets/Dialogs_and_Prompts#Passing_arguments_and_displaying_a_dialog)).
+Voir aussi[window.importDialog()](/fr/DOM/window.importDialog).
 
-<h3 id="Specification">Spécification</h3>
+### Spécification
 
-<p>{{ DOM0() }}</p>
+{{ DOM0() }}
 
-<h3 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h3>
+### Compatibilité des navigateurs
 
-<p>{{Compat("api.Window.openDialog")}}</p>
+{{Compat("api.Window.openDialog")}}
 
-<h3 id="Voir_également">Voir également</h3>
+### Voir également
 
-<ul>
- <li><a href="/en-US/Add-ons/Code_snippets/Dialogs_and_Prompts#Passing_arguments_and_displaying_a_dialog">Another example</a></li>
- <li><a href="/en-US/docs/Archive/Web/Window.importDialog"><code>window.importDialog</code></a> (mobile) {{obsolete_inline}}</li>
-</ul>
\ No newline at end of file
+- [Another example](/en-US/Add-ons/Code_snippets/Dialogs_and_Prompts#Passing_arguments_and_displaying_a_dialog)
+- [`window.importDialog`](/en-US/docs/Archive/Web/Window.importDialog) (mobile) {{obsolete_inline}}
diff --git a/files/fr/web/api/window/opener/index.md b/files/fr/web/api/window/opener/index.md
index d1dd3486ce..bee987dab6 100644
--- a/files/fr/web/api/window/opener/index.md
+++ b/files/fr/web/api/window/opener/index.md
@@ -7,18 +7,26 @@ tags:
   - Référence_du_DOM_Gecko
 translation_of: Web/API/Window/opener
 ---
-<p>{{ ApiRef() }}</p>
-<h3 id="R.C3.A9sum.C3.A9">Résumé</h3>
-<p>Renvoie une référence vers la fenêtre qui a ouvert la fenêtre courante.</p>
-<h3 id="Syntaxe">Syntaxe</h3>
-<pre class="eval"><i>refObj</i> = window.opener
-</pre>
-<h3 id="Exemple">Exemple</h3>
-<pre> if window.opener != indexWin {
-     referToTop(window.opener);
- }
-</pre>
-<h3 id="Notes">Notes</h3>
-<p>Lorsqu'une fenêtre est ouverte depuis une autre fenêtre, elle conserve une référence à cette première fenêtre dans <code>window.opener</code>. Si la fenêtre courante n'a pas été ouverte par une autre fenêtre, la méthode renvoie <code>null</code>.</p>
-<h3 id="Sp.C3.A9cification">Spécification</h3>
-<p>{{ DOM0() }}</p>
\ No newline at end of file
+{{ ApiRef() }}
+
+### Résumé
+
+Renvoie une référence vers la fenêtre qui a ouvert la fenêtre courante.
+
+### Syntaxe
+
+    refObj = window.opener
+
+### Exemple
+
+     if window.opener != indexWin {
+         referToTop(window.opener);
+     }
+
+### Notes
+
+Lorsqu'une fenêtre est ouverte depuis une autre fenêtre, elle conserve une référence à cette première fenêtre dans `window.opener`. Si la fenêtre courante n'a pas été ouverte par une autre fenêtre, la méthode renvoie `null`.
+
+### Spécification
+
+{{ DOM0() }}
diff --git a/files/fr/web/api/window/orientation/index.md b/files/fr/web/api/window/orientation/index.md
index dfe5477598..bd13b9a9ee 100644
--- a/files/fr/web/api/window/orientation/index.md
+++ b/files/fr/web/api/window/orientation/index.md
@@ -3,33 +3,20 @@ title: Window.orientation
 slug: Web/API/Window/orientation
 translation_of: Web/API/Window/orientation
 ---
-<div>{{APIRef}}{{deprecated_header}}</div>
+{{APIRef}}{{deprecated_header}}
 
-<h2 id="Résumé">Résumé</h2>
+## Résumé
 
-<p>Renvoie l'orientation en degrés (par incréments de 90 degrés) de la fenêtre par rapport à l'orientation naturelle de l'appareil.</p>
+Renvoie l'orientation en degrés (par incréments de 90 degrés) de la fenêtre par rapport à l'orientation naturelle de l'appareil.
 
-<p>Les seules valeurs possibles sont <code>-90</code>, <code>0</code>, <code>90</code>, et <code>180</code>. Les valeurs positives sont dans le sens des aiguilles d'une montre; les valeurs négatives sont dans le sens antihoraire.</p>
+Les seules valeurs possibles sont `-90`, `0`, `90`, et `180`. Les valeurs positives sont dans le sens des aiguilles d'une montre; les valeurs négatives sont dans le sens antihoraire.
 
-<h2 id="Spécifications">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">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('Compat', '#dom-window-orientation', 'Window.orientation')}}</td>
-   <td>{{Spec2('Compat')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                    | Statut                   | Commentaires |
+| ------------------------------------------------------------------------------------------------ | ------------------------ | ------------ |
+| {{SpecName('Compat', '#dom-window-orientation', 'Window.orientation')}} | {{Spec2('Compat')}} |              |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Window.orientation")}}</p>
+{{Compat("api.Window.orientation")}}
diff --git a/files/fr/web/api/window/outerheight/index.md b/files/fr/web/api/window/outerheight/index.md
index 53b6f0637a..892db6a5cb 100644
--- a/files/fr/web/api/window/outerheight/index.md
+++ b/files/fr/web/api/window/outerheight/index.md
@@ -3,60 +3,44 @@ title: Window.outerHeight
 slug: Web/API/Window/outerHeight
 translation_of: Web/API/Window/outerHeight
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}
 
-<p><code>Window.outerHeight</code> retourne la hauteur de la fenêtre (du navigateur) en pixels. La hauteur retournée prends en compte la fenêtre du navigateur entier, y compris la barre latérale, window chrome and window resizing borders/handles.</p>
+`Window.outerHeight` retourne la hauteur de la fenêtre (du navigateur) en pixels. La hauteur retournée prends en compte la fenêtre du navigateur entier, y compris la barre latérale, window chrome and window resizing borders/handles.
 
-<p>Cette propriété n'a pas de valeur par défaut.</p>
+Cette propriété n'a pas de valeur par défaut.
 
-<p>Syntaxe</p>
+Syntaxe
 
-<pre class="syntaxbox"><var>outWindowHeight</var> = window.outerHeight;
-</pre>
+    outWindowHeight = window.outerHeight;
 
-<p>La valeur retournée correspond à la hauteur extérieure de la fenêtre.</p>
+La valeur retournée correspond à la hauteur extérieure de la fenêtre.
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p>Pour changer la taille de la fenêtre, utilisez {{domxref("window.resizeBy()")}} et {{domxref("window.resizeTo()")}}.</p>
+Pour changer la taille de la fenêtre, utilisez {{domxref("window.resizeBy()")}} et {{domxref("window.resizeTo()")}}.
 
-<p>Pour obtenir la hauteur intérieure de la fenêtre (la hauteur de la page actuelle), utilisez {{domxref("window.innerHeight")}}.</p>
+Pour obtenir la hauteur intérieure de la fenêtre (la hauteur de la page actuelle), utilisez {{domxref("window.innerHeight")}}.
 
-<h3 id="Graphical_example">Exemple illustré</h3>
+### Exemple illustré
 
-<p>La figure suivante montre la différence entre <code>outerHeight</code> et <code>innerHeight</code>.</p>
+La figure suivante montre la différence entre `outerHeight` et `innerHeight`.
 
-<p><img alt="innerHeight vs outerHeight illustration" src="FirefoxInnerVsOuterHeight2.png"></p>
+![innerHeight vs outerHeight illustration](FirefoxInnerVsOuterHeight2.png)
 
-<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('CSSOM View', '#dom-window-outerheight', 'Window.outerHeight') }}</td>
-      <td>{{ Spec2('CSSOM View') }}</td>
-      <td></td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                            | Statut                           | Commentaire |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- |
+| {{ SpecName('CSSOM View', '#dom-window-outerheight', 'Window.outerHeight') }} | {{ Spec2('CSSOM View') }} |             |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Window.outerHeight")}}</p>
+{{Compat("api.Window.outerHeight")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("window.innerHeight")}}</li>
- <li>{{domxref("window.innerWidth")}}</li>
- <li>{{domxref("window.outerWidth")}}</li>
- <li>{{domxref("window.resizeBy()")}}</li>
- <li>{{domxref("window.resizeTo()")}}</li>
-</ul>
+- {{domxref("window.innerHeight")}}
+- {{domxref("window.innerWidth")}}
+- {{domxref("window.outerWidth")}}
+- {{domxref("window.resizeBy()")}}
+- {{domxref("window.resizeTo()")}}
diff --git a/files/fr/web/api/window/outerwidth/index.md b/files/fr/web/api/window/outerwidth/index.md
index 863a26a3ab..aaeb8782da 100644
--- a/files/fr/web/api/window/outerwidth/index.md
+++ b/files/fr/web/api/window/outerwidth/index.md
@@ -9,51 +9,35 @@ tags:
   - Reference
 translation_of: Web/API/Window/outerWidth
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}
 
-<p><code>Window.outerWidth</code> récupère la largeur de l'extérieur de la fenêtre du navigateur. Elle représente la largeur de toute la fenêtre du navigateur, y compris la barre latérale (si elle est agrandie), la fenêtre chrome et le redimensionnement de la fenêtre.</p>
+`Window.outerWidth` récupère la largeur de l'extérieur de la fenêtre du navigateur. Elle représente la largeur de toute la fenêtre du navigateur, y compris la barre latérale (si elle est agrandie), la fenêtre chrome et le redimensionnement de la fenêtre.
 
-<p>Cette propriété est en lecture seule ; elle n'a pas de valeur par défaut.</p>
+Cette propriété est en lecture seule ; elle n'a pas de valeur par défaut.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var>largeurExterieureFenetre</var> = window.outerWidth;
-</pre>
+    largeurExterieureFenetre = window.outerWidth;
 
-<p>Lors du retour, <code>largeurExterieureFenetre</code> vaut la largeur de l'extérieur de la fenêtre.</p>
+Lors du retour, `largeurExterieureFenetre` vaut la largeur de l'extérieur de la fenêtre.
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p>Pour changer la taille d'une fenêtre, voir {{domxref("window.resizeBy()")}} et {{domxref("window.resizeTo ()")}}.</p>
+Pour changer la taille d'une fenêtre, voir {{domxref("window.resizeBy()")}} et {{domxref("window.resizeTo ()")}}.
 
-<p>Pour récupérer la largeur interne d'une fenêtre, c'est-à-dire la largeur de la page affichée, voir {{domxref ("window.innerWidth")}}.</p>
+Pour récupérer la largeur interne d'une fenêtre, c'est-à-dire la largeur de la page affichée, voir {{domxref ("window.innerWidth")}}.
 
-<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('CSSOM View', '#dom-window-outerwidth', 'Window.outerWidth') }}</td>
-   <td>{{ Spec2('CSSOM View') }}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                        | Statut                           | Commentaire          |
+| ---------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{ SpecName('CSSOM View', '#dom-window-outerwidth', 'Window.outerWidth') }} | {{ Spec2('CSSOM View') }} | Définition initiale. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Window.outerWidth")}}</p>
+{{Compat("api.Window.outerWidth")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("window.outerHeight")}}, {{domxref("window.innerHeight")}}, {{domxref("window.innerWidth")}}</li>
- <li>{{domxref("window.resizeBy()")}}, {{domxref("window.resizeTo()")}}</li>
-</ul>
+- {{domxref("window.outerHeight")}}, {{domxref("window.innerHeight")}}, {{domxref("window.innerWidth")}}
+- {{domxref("window.resizeBy()")}}, {{domxref("window.resizeTo()")}}
diff --git a/files/fr/web/api/window/pagehide_event/index.md b/files/fr/web/api/window/pagehide_event/index.md
index 81e2c695f8..5066f6b7d5 100644
--- a/files/fr/web/api/window/pagehide_event/index.md
+++ b/files/fr/web/api/window/pagehide_event/index.md
@@ -4,67 +4,34 @@ slug: Web/API/Window/pagehide_event
 translation_of: Web/API/Window/pagehide_event
 original_slug: Web/Events/pagehide
 ---
-<p>L’évènement <code>pagehide</code> est émis lorsqu’une entrée dans un historique de session est sur le point d’être quittée.</p>
+L’évènement `pagehide` est émis lorsqu’une entrée dans un historique de session est sur le point d’être quittée.
 
-<h2 id="Informations_générales">Informations générales</h2>
+## Informations générales
 
-<dl>
- <dt>Spécification</dt>
- <dd><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-pagehide">HTML5</a></dd>
- <dt>Interface</dt>
- <dd><a href="/fr/docs/Web/API/PageTransitionEvent">PageTransitionEvent</a></dd>
- <dt>Bouillonne</dt>
- <dd>Non</dd>
- <dt>Annulable</dt>
- <dd>Non</dd>
- <dt>Cible</dt>
- <dd>Document (dispatché sur Window)</dd>
- <dt>Action par défaut</dt>
- <dd>Aucune</dd>
-</dl>
+- Spécification
+  - : [HTML5](http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-pagehide)
+- Interface
+  - : [PageTransitionEvent](/fr/docs/Web/API/PageTransitionEvent)
+- Bouillonne
+  - : Non
+- Annulable
+  - : Non
+- Cible
+  - : Document (dispatché sur Window)
+- Action par défaut
+  - : Aucune
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Propriété</th>
-   <th scope="col">Type</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>target</code> {{readonlyInline}}</td>
-   <td>{{domxref("EventTarget")}}</td>
-   <td>La cible de l’évènement (la plus haute dans l’arbre DOM).</td>
-  </tr>
-  <tr>
-   <td><code>type</code> {{readonlyInline}}</td>
-   <td>{{domxref("DOMString")}}</td>
-   <td>Le type d’évènement.</td>
-  </tr>
-  <tr>
-   <td><code>bubbles</code> {{readonlyInline}}</td>
-   <td>{{jsxref("Boolean")}}</td>
-   <td>Si l’évènement bouillonne en temps normal ou non.</td>
-  </tr>
-  <tr>
-   <td><code>cancelable</code> {{readonlyInline}}</td>
-   <td>{{jsxref("Boolean")}}</td>
-   <td>Si l’évènement est annulable ou non.</td>
-  </tr>
-  <tr>
-   <td><code>persisted</code> {{readonlyInline}}</td>
-   <td>{{jsxref("boolean")}}</td>
-   <td>Si l’entrée est chargée depuis le cache ou non.</td>
-  </tr>
- </tbody>
-</table>
+| Propriété                             | Type                                 | Description                                               |
+| ------------------------------------- | ------------------------------------ | --------------------------------------------------------- |
+| `target` {{readonlyInline}}     | {{domxref("EventTarget")}} | La cible de l’évènement (la plus haute dans l’arbre DOM). |
+| `type` {{readonlyInline}}       | {{domxref("DOMString")}}     | Le type d’évènement.                                      |
+| `bubbles` {{readonlyInline}}    | {{jsxref("Boolean")}}         | Si l’évènement bouillonne en temps normal ou non.         |
+| `cancelable` {{readonlyInline}} | {{jsxref("Boolean")}}         | Si l’évènement est annulable ou non.                      |
+| `persisted` {{readonlyInline}}  | {{jsxref("boolean")}}         | Si l’entrée est chargée depuis le cache ou non.           |
 
-<h2 id="Évènements_liés">Évènements liés</h2>
+## Évènements liés
 
-<ul>
- <li><a href="/fr/docs/Web/Events/pageshow"><code>pageshow</code></a></li>
- <li><a href="/fr/docs/Utilisation_du_cache_de_Firefox_1.5#L.27.C3.A9v.C3.A8nement_pagehide">Utilisation du cache de Firefox 1.5 — L’évènement pagehide</a></li>
-</ul>
+- [`pageshow`](/fr/docs/Web/Events/pageshow)
+- [Utilisation du cache de Firefox 1.5 — L’évènement pagehide](/fr/docs/Utilisation_du_cache_de_Firefox_1.5#L.27.C3.A9v.C3.A8nement_pagehide)
diff --git a/files/fr/web/api/window/pageshow_event/index.md b/files/fr/web/api/window/pageshow_event/index.md
index 4687409333..112cdea1ba 100644
--- a/files/fr/web/api/window/pageshow_event/index.md
+++ b/files/fr/web/api/window/pageshow_event/index.md
@@ -4,107 +4,61 @@ slug: Web/API/Window/pageshow_event
 translation_of: Web/API/Window/pageshow_event
 original_slug: Web/Events/pageshow
 ---
-<p>L’évènement <code>pageshow</code> est émis lorsqu’une entrée dans un historique de session est atteinte (cela comprend les boutons précédent / suivant ainsi que l’affichage initial de la page après l’évènement <code>onload</code>).</p>
+L’évènement `pageshow` est émis lorsqu’une entrée dans un historique de session est atteinte (cela comprend les boutons précédent / suivant ainsi que l’affichage initial de la page après l’évènement `onload`).
 
-<h2 id="Informations_générales">Informations générales</h2>
+## Informations générales
 
-<dl>
- <dt>Spécification</dt>
- <dd><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-pageshow">HTML5</a></dd>
- <dt>Interface</dt>
- <dd><a href="/fr/docs/Web/API/PageTransitionEvent">PageTransitionEvent</a></dd>
- <dt>Bouillonne</dt>
- <dd>Non</dd>
- <dt>Annulable</dt>
- <dd>Non</dd>
- <dt>Cible</dt>
- <dd>Document (dispatché sur Window)</dd>
- <dt>Action par défaut</dt>
- <dd>Aucune</dd>
-</dl>
+- Spécification
+  - : [HTML5](http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-pageshow)
+- Interface
+  - : [PageTransitionEvent](/fr/docs/Web/API/PageTransitionEvent)
+- Bouillonne
+  - : Non
+- Annulable
+  - : Non
+- Cible
+  - : Document (dispatché sur Window)
+- Action par défaut
+  - : Aucune
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Propriété</th>
-   <th scope="col">Type</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>target</code> {{readonlyInline}}</td>
-   <td>{{domxref("EventTarget")}}</td>
-   <td>La cible de l’évènement (la plus haute dans l’arbre DOM).</td>
-  </tr>
-  <tr>
-   <td><code>type</code> {{readonlyInline}}</td>
-   <td>{{domxref("DOMString")}}</td>
-   <td>Le type d’évènement.</td>
-  </tr>
-  <tr>
-   <td><code>bubbles</code> {{readonlyInline}}</td>
-   <td>{{jsxref("Boolean")}}</td>
-   <td>Si l’évènement bouillonne en temps normal ou non.</td>
-  </tr>
-  <tr>
-   <td><code>cancelable</code> {{readonlyInline}}</td>
-   <td>{{jsxref("Boolean")}}</td>
-   <td>Si l’évènement est annulable ou non.</td>
-  </tr>
-  <tr>
-   <td><code>persisted</code> {{readonlyInline}}</td>
-   <td>{{jsxref("boolean")}}</td>
-   <td>Si l’entrée est chargée depuis le cache ou non.</td>
-  </tr>
- </tbody>
-</table>
+| Propriété                             | Type                                 | Description                                               |
+| ------------------------------------- | ------------------------------------ | --------------------------------------------------------- |
+| `target` {{readonlyInline}}     | {{domxref("EventTarget")}} | La cible de l’évènement (la plus haute dans l’arbre DOM). |
+| `type` {{readonlyInline}}       | {{domxref("DOMString")}}     | Le type d’évènement.                                      |
+| `bubbles` {{readonlyInline}}    | {{jsxref("Boolean")}}         | Si l’évènement bouillonne en temps normal ou non.         |
+| `cancelable` {{readonlyInline}} | {{jsxref("Boolean")}}         | Si l’évènement est annulable ou non.                      |
+| `persisted` {{readonlyInline}}  | {{jsxref("boolean")}}         | Si l’entrée est chargée depuis le cache ou non.           |
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>L’exemple suivant va afficher dans la console des informations sur l’évènement <code>pageshow</code>, qui est émis à l’utilisation des boutons précédent / suivant, et pas uniquement après <code>onload</code> :</p>
+L’exemple suivant va afficher dans la console des informations sur l’évènement `pageshow`, qui est émis à l’utilisation des boutons précédent / suivant, et pas uniquement après `onload` :
 
-<pre class="brush: js">window.addEventListener('pageshow', function(event) {
+```js
+window.addEventListener('pageshow', function(event) {
     console.log('pageshow:');
     console.log(event);
-});</pre>
+});
+```
 
-<p>Bien que ce ne soit pas la meilleure pratique, vous pouvez également ajouter l’évènement comme un attribut sur la balise <code>&lt;body&gt;</code>, de la même manière que <code>onload</code> :</p>
+Bien que ce ne soit pas la meilleure pratique, vous pouvez également ajouter l’évènement comme un attribut sur la balise `<body>`, de la même manière que `onload` :
 
-<pre class="brush: html">&lt;body onload="myonload()" onpageshow="mypageshowcode()"&gt;</pre>
+```html
+<body onload="myonload()" onpageshow="mypageshowcode()">
+```
 
-<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('HTML WHATWG', 'browsing-the-web.html#event-pageshow', 'pageshow')}}</td>
-      <td>{{Spec2('HTML WHATWG')}}</td>
-      <td>Spécification initiale.</td>
-    </tr>
-    <tr>
-      <td>{{SpecName('HTML5 W3C', 'browsers.html#event-pageshow', 'pageshow')}}</td>
-      <td>{{Spec2('HTML5 W3C')}}</td>
-      <td></td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                            | Statut                           | Commentaire             |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------- |
+| {{SpecName('HTML WHATWG', 'browsing-the-web.html#event-pageshow', 'pageshow')}} | {{Spec2('HTML WHATWG')}} | Spécification initiale. |
+| {{SpecName('HTML5 W3C', 'browsers.html#event-pageshow', 'pageshow')}}             | {{Spec2('HTML5 W3C')}}     |                         |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Window.pageshow_event")}}</p>
+{{Compat("api.Window.pageshow_event")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>{{domxref("Window.pagehide_event", "pagehide")}}</li>
-</ul>
+- {{domxref("Window.pagehide_event", "pagehide")}}
diff --git a/files/fr/web/api/window/parent/index.md b/files/fr/web/api/window/parent/index.md
index 01da0b6b14..907a645d93 100644
--- a/files/fr/web/api/window/parent/index.md
+++ b/files/fr/web/api/window/parent/index.md
@@ -7,19 +7,28 @@ tags:
   - Référence_du_DOM_Gecko
 translation_of: Web/API/Window/parent
 ---
-<p>{{ ApiRef() }}</p>
-<h3 id="R.C3.A9sum.C3.A9">Résumé</h3>
-<p>Renvoie une référence à la fenêtre parente ou cadre parent de la fenêtre courante ou du cadre courant.</p>
-<h3 id="Syntaxe">Syntaxe</h3>
-<pre class="eval"><i>refObj</i> = window.parent
-</pre>
-<h3 id="Exemple">Exemple</h3>
-<pre class="eval">if (window.parent != window.top) {
-     // on se trouve dans une imbrication de cadres
-}
-</pre>
-<h3 id="Notes">Notes</h3>
-<p>Si une fenêtre n'a pas de parent, sa propriété <b>parent</b> est une référence vers elle-même.</p>
-<p>Lorsqu'une fenêtre est chargée dans un ensemble de cadres (frameset), son parent est le cadre parent (c'est-à-dire le document dans lequel se trouve l'élément <code>&lt;frame&gt;</code> qui fait référence à la fenêtre).</p>
-<h3 id="Sp.C3.A9cification">Spécification</h3>
-<p>{{ DOM0() }}</p>
+{{ ApiRef() }}
+
+### Résumé
+
+Renvoie une référence à la fenêtre parente ou cadre parent de la fenêtre courante ou du cadre courant.
+
+### Syntaxe
+
+    refObj = window.parent
+
+### Exemple
+
+    if (window.parent != window.top) {
+         // on se trouve dans une imbrication de cadres
+    }
+
+### Notes
+
+Si une fenêtre n'a pas de parent, sa propriété **parent** est une référence vers elle-même.
+
+Lorsqu'une fenêtre est chargée dans un ensemble de cadres (frameset), son parent est le cadre parent (c'est-à-dire le document dans lequel se trouve l'élément `<frame>` qui fait référence à la fenêtre).
+
+### Spécification
+
+{{ DOM0() }}
diff --git a/files/fr/web/api/window/paste_event/index.md b/files/fr/web/api/window/paste_event/index.md
index 0f215c946e..a8cc5b4a9e 100644
--- a/files/fr/web/api/window/paste_event/index.md
+++ b/files/fr/web/api/window/paste_event/index.md
@@ -8,64 +8,53 @@ tags:
   - paste
 translation_of: Web/API/Window/paste_event
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}
 
-<p>L'événement <strong><code>paste</code></strong> est déclenché lorsque l'utilisateur a lancé une action de "paste" via l'interface utilisateur du navigateur.</p>
+L'événement **`paste`** est déclenché lorsque l'utilisateur a lancé une action de "paste" via l'interface utilisateur du navigateur.
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row">Bulles</th>
-   <td>Yes</td>
-  </tr>
-  <tr>
-   <th scope="row">Annulable</th>
-   <td>Yes</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface</th>
-   <td>{{domxref("ClipboardEvent")}}</td>
-  </tr>
-  <tr>
-   <th scope="row">Propriété du gestionnaire d'événements</th>
-   <td>{{domxref("HTMLElement/onpaste", "onpaste")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Bulles</th>
+      <td>Yes</td>
+    </tr>
+    <tr>
+      <th scope="row">Annulable</th>
+      <td>Yes</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface</th>
+      <td>{{domxref("ClipboardEvent")}}</td>
+    </tr>
+    <tr>
+      <th scope="row">Propriété du gestionnaire d'événements</th>
+      <td>{{domxref("HTMLElement/onpaste", "onpaste")}}</td>
+    </tr>
+  </tbody>
 </table>
 
-<p>La cible d'origine de cet événement est le {{domxref ("Element")}} qui était la cible prévue de l'action de collage. Vous pouvez écouter cet événement sur l'interface {{domxref ("Window")}} pour le gérer dans les phases de capture ou de bullage. Pour plus de détails sur cet événement, veuillez consulter la page sur le <a href="/en-US/docs/Web/API/Element/paste_event">Element: paste event</a>.</p>
+La cible d'origine de cet événement est le {{domxref ("Element")}} qui était la cible prévue de l'action de collage. Vous pouvez écouter cet événement sur l'interface {{domxref ("Window")}} pour le gérer dans les phases de capture ou de bullage. Pour plus de détails sur cet événement, veuillez consulter la page sur le [Element: paste event](/en-US/docs/Web/API/Element/paste_event).
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: js">window.addEventListener('paste', (event) =&gt; {
+```js
+window.addEventListener('paste', (event) => {
     console.log('paste action initiated')
-});</pre>
+});
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Statut</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('Clipboard API', '#clipboard-event-paste')}}</td>
-   <td>{{Spec2('Clipboard API')}}</td>
-  </tr>
- </tbody>
-</table>
+| Specification                                                            | Statut                               |
+| ------------------------------------------------------------------------ | ------------------------------------ |
+| {{SpecName('Clipboard API', '#clipboard-event-paste')}} | {{Spec2('Clipboard API')}} |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Window.paste_event")}}</p>
+{{Compat("api.Window.paste_event")}}
 
-<h2 id="Voir_également">Voir également</h2>
+## Voir également
 
-<ul>
- <li>Événements liés: {{domxref("Window/cut_event", "cut")}}, {{domxref("Window/copy_event", "copy")}}</li>
- <li>Cet événement sur {{domxref("Element")}} cible: {{domxref("Element/paste_event", "paste")}}</li>
- <li>Cet événement sur {{domxref("Document")}} cible: {{domxref("Document/paste_event", "paste")}}</li>
-</ul>
+- Événements liés: {{domxref("Window/cut_event", "cut")}}, {{domxref("Window/copy_event", "copy")}}
+- Cet événement sur {{domxref("Element")}} cible: {{domxref("Element/paste_event", "paste")}}
+- Cet événement sur {{domxref("Document")}} cible: {{domxref("Document/paste_event", "paste")}}
diff --git a/files/fr/web/api/window/popstate_event/index.md b/files/fr/web/api/window/popstate_event/index.md
index 9c821b6ea9..de1e53ba98 100644
--- a/files/fr/web/api/window/popstate_event/index.md
+++ b/files/fr/web/api/window/popstate_event/index.md
@@ -3,73 +3,43 @@ title: popstate
 slug: Web/API/Window/popstate_event
 translation_of: Web/API/Window/popstate_event
 ---
-<p>L'événement <code>popstate</code> est exécuté lorsque l'entrée active de l'historique change. Si l'entrée active de l'historique en cours d'activation a été créé par un appel à <code>history.pushState()</code> ou a été affectée par un appel à <code>history.replaceState()</code>, la propriété <code>state</code> de l'événement <code>popstate</code> contient une copie de l'objet <code>state</code> de l'entrée d'historique.</p>
-
-<p>Notez qu'un appel à <code>history.pushState()</code> ou <code>history.replaceState()</code> n'exécutera pas l'événement <code>popstate</code>. L'événement <code>popstate</code> est uniquement exécuté en réalisant une action dans le navigateur telle que cliquer sur le bouton de retour (ou appeler <code>history.back()</code> en JavaScript).</p>
-
-<p>Les navigateurs ont tendance à gérer l'événement <code>popstate</code> différemment lors du chargement de la page. Chrome (avant la v34) et Safari émettent toujours un événement <code>popstate</code> lors du chargement de la page, contrairement à Firefox.</p>
-
-<h2 id="Informations_générales">Informations générales</h2>
-
-<dl>
- <dt style="float: left; text-align: right; width: 120px;">Specification</dt>
- <dd style="margin: 0 0 0 120px;"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-popstate">HTML5</a></dd>
- <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
- <dd style="margin: 0 0 0 120px;">PopStateEvent</dd>
- <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt>
- <dd style="margin: 0 0 0 120px;">Yes</dd>
- <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt>
- <dd style="margin: 0 0 0 120px;">No</dd>
- <dt style="float: left; text-align: right; width: 120px;">Target</dt>
- <dd style="margin: 0 0 0 120px;">defaultView</dd>
- <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
- <dd style="margin: 0 0 0 120px;">None</dd>
-</dl>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Property</th>
-   <th scope="col">Type</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>target</code> {{readonlyInline}}</td>
-   <td>{{domxref("EventTarget")}}</td>
-   <td>The browsing context (<code>window</code>).</td>
-  </tr>
-  <tr>
-   <td><code>type</code> {{readonlyInline}}</td>
-   <td>{{domxref("DOMString")}}</td>
-   <td>The type of event.</td>
-  </tr>
-  <tr>
-   <td><code>bubbles</code> {{readonlyInline}}</td>
-   <td>{{jsxref("Boolean")}}</td>
-   <td>Whether the event normally bubbles or not.</td>
-  </tr>
-  <tr>
-   <td><code>cancelable</code> {{readonlyInline}}</td>
-   <td>{{jsxref("Boolean")}}</td>
-   <td>Whether the event is cancellable or not.</td>
-  </tr>
-  <tr>
-   <td><code>state</code> {{readonlyInline}}</td>
-   <td><em>any</em></td>
-   <td>The current history entry's state object (if any).</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Exemple">Exemple</h2>
-
-<p>Une page <code>http://example.com/example.html</code> exécutant le code suivant génèrera un journal comme spécifié :</p>
-
-<pre class="brush: js">window.onpopstate = function(event) {
+L'événement `popstate` est exécuté lorsque l'entrée active de l'historique change. Si l'entrée active de l'historique en cours d'activation a été créé par un appel à `history.pushState()` ou a été affectée par un appel à `history.replaceState()`, la propriété `state` de l'événement `popstate` contient une copie de l'objet `state` de l'entrée d'historique.
+
+Notez qu'un appel à `history.pushState()` ou `history.replaceState()` n'exécutera pas l'événement `popstate`. L'événement `popstate` est uniquement exécuté en réalisant une action dans le navigateur telle que cliquer sur le bouton de retour (ou appeler `history.back()` en JavaScript).
+
+Les navigateurs ont tendance à gérer l'événement `popstate` différemment lors du chargement de la page. Chrome (avant la v34) et Safari émettent toujours un événement `popstate` lors du chargement de la page, contrairement à Firefox.
+
+## Informations générales
+
+- Specification
+  - : [HTML5](http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-popstate)
+- Interface
+  - : PopStateEvent
+- Bubbles
+  - : Yes
+- Cancelable
+  - : No
+- Target
+  - : defaultView
+- Action par défaut
+  - : None
+
+## Propriétés
+
+| Property                              | Type                                 | Description                                        |
+| ------------------------------------- | ------------------------------------ | -------------------------------------------------- |
+| `target` {{readonlyInline}}     | {{domxref("EventTarget")}} | The browsing context (`window`).                   |
+| `type` {{readonlyInline}}       | {{domxref("DOMString")}}     | The type of event.                                 |
+| `bubbles` {{readonlyInline}}    | {{jsxref("Boolean")}}         | Whether the event normally bubbles or not.         |
+| `cancelable` {{readonlyInline}} | {{jsxref("Boolean")}}         | Whether the event is cancellable or not.           |
+| `state` {{readonlyInline}}      | _any_                                | The current history entry's state object (if any). |
+
+## Exemple
+
+Une page `http://example.com/example.html` exécutant le code suivant génèrera un journal comme spécifié :
+
+```js
+window.onpopstate = function(event) {
   console.log("location: " + document.location + ", state: " + JSON.stringify(event.state));
 };
 history.pushState({page: 1}, "title 1", "?page=1");
@@ -78,34 +48,21 @@ history.replaceState({page: 3}, "title 3", "?page=3");
 history.back(); // Logs "location: http://example.com/example.html?page=1, state: {"page":1}"
 history.back(); // Logs "location: http://example.com/example.html, state: null
 history.go(2);  // Logs "location: http://example.com/example.html?page=3, state: {"page":3}
-</pre>
+```
 
-<p>Notez que même si l'entrée d'historique originelle (pour <code>http://example.com/example.html</code>) n'a pas d'objet state associé, un événement <code>popstate</code> est tout de même exécuté lorsque nous activons cette entrée au second appel à <code>history.back()</code>.</p>
+Notez que même si l'entrée d'historique originelle (pour `http://example.com/example.html`) n'a pas d'objet state associé, un événement `popstate` est tout de même exécuté lorsque nous activons cette entrée au second appel à `history.back()`.
 
-<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', 'indices.html#event-popstate', 'popstate')}}</td>
-      <td>{{Spec2('HTML WHATWG')}}</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                | Statut                           |
+| -------------------------------------------------------------------------------------------- | -------------------------------- |
+| {{SpecName('HTML WHATWG', 'indices.html#event-popstate', 'popstate')}} | {{Spec2('HTML WHATWG')}} |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Window.popstate_event")}}</p>
+{{Compat("api.Window.popstate_event")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li><a href="/fr/docs/Web/API/History_API">Manipulation de l'historique du navigateur (l'API History)</a></li>
-  <li><a href="/fr/docs/Web/API/Window/hashchange_event">Window : événement <code>hashchange</code></a></li>
- </ul>
+- [Manipulation de l'historique du navigateur (l'API History)](/fr/docs/Web/API/History_API)
+- [Window : événement `hashchange`](/fr/docs/Web/API/Window/hashchange_event)
diff --git a/files/fr/web/api/window/postmessage/index.md b/files/fr/web/api/window/postmessage/index.md
index e7224757d7..6e474b1328 100644
--- a/files/fr/web/api/window/postmessage/index.md
+++ b/files/fr/web/api/window/postmessage/index.md
@@ -9,34 +9,31 @@ tags:
   - postMessage
 translation_of: Web/API/Window/postMessage
 ---
-<div>{{ ApiRef() }}</div>
+{{ ApiRef() }}
 
-<div></div>
+La méthode **`window.postMessage`** permet une communication inter-domaine en toute sécurité. Normalement, les scripts de différentes pages sont autorisés à accéder les uns aux autres si et seulement si les pages depuis lesquelles ils sont exécutés ont des URL de même [origine](/en-US/docs/Glossary/Origin), c'est-à-dire avec le même protocole (généralement `http` ou `https`), le même numéro de port (`80` étant le port par défaut pour  `http`), et le même nom d'hôte (à condition que [document.domain](/en-US/docs/DOM/document.domain) soit initialisé à la même valeur par les deux pages). `window.postMessage` fournit un mécanisme contrôlé pour contourner cette restriction d'une manière sécurisée si bien utilisée.
 
-<p>La méthode <strong><code>window.postMessage</code></strong> permet une communication inter-domaine en toute sécurité. Normalement, les scripts de différentes pages sont autorisés à accéder les uns aux autres si et seulement si les pages depuis lesquelles ils sont exécutés ont des URL de même <a href="/en-US/docs/Glossary/Origin">origine</a>, c'est-à-dire avec le même protocole (généralement <code>http</code> ou <code>https</code>), le même numéro de port (<code>80</code> étant le port par défaut pour  <code>http</code>), et le même nom d'hôte (à condition que <a href="/en-US/docs/DOM/document.domain">document.domain</a> soit initialisé à la même valeur par les deux pages). <code>window.postMessage</code> fournit un mécanisme contrôlé pour contourner cette restriction d'une manière sécurisée si bien utilisée.</p>
+La méthode `window.postMessage`, quand elle est appelée, provoque l'envoi d'un {{domxref("MessageEvent")}} à la fenêtre ciblée une fois que tout script en attente a terminé son exécution (par exemple, les gestionnaires d'évènements restants si `window.postMessage` est appelée depuis un gestionnaire d'évènement, des timeouts en attente enregistrées auparavant, etc.) Le {{domxref("MessageEvent")}} est de type `message`, a une propriété `data` qui est initialisée à la valeur du premier argument passé à` window.postMessage`, une propriété `origin` correspondant à l'origine du document principal de la fenêtre appelant `window.postMessage` au moment où `window.postMessage` a été appelée, et une propriété `source` qui est la fenêtre depuis laquelle `window.postMessage` est appelée. (les autres propriétés standard d'évènement sont présentes avec leurs valeurs attendues).
 
-<p>La méthode <code>window.postMessage</code>, quand elle est appelée, provoque l'envoi d'un {{domxref("MessageEvent")}} à la fenêtre ciblée une fois que tout script en attente a terminé son exécution (par exemple, les gestionnaires d'évènements restants si <code>window.postMessage</code> est appelée depuis un gestionnaire d'évènement, des timeouts en attente enregistrées auparavant, etc.) Le {{domxref("MessageEvent")}} est de type <code>message</code>, a une propriété <code>data</code> qui est initialisée à la valeur du premier argument passé à<code> window.postMessage</code>, une propriété <code>origin</code> correspondant à l'origine du document principal de la fenêtre appelant <code>window.postMessage</code> au moment où <code>window.postMessage</code> a été appelée, et une propriété <code>source</code> qui est la fenêtre depuis laquelle <code>window.postMessage</code> est appelée. (les autres propriétés standard d'évènement sont présentes avec leurs valeurs attendues).</p>
+## Syntaxe
 
-<h2 id="Syntax">Syntaxe</h2>
+    otherWindow.postMessage(message, targetOrigin, [transfer]);
 
-<pre class="syntaxbox"><em>otherWindow</em>.postMessage(<em>message</em>, <em>targetOrigin</em>, [<em>transfer</em>]);</pre>
+- `otherWindow`
+  - : Une référence à une autre fenêtre ; une telle référence peut être obtenue, par exemple, _via_ la propriété `contentWindow` d'un élément `iframe`, l'objet retourné par [window.open](/fr/docs/DOM/window.open), ou par index nommé ou numérique de [window.frames](/fr/docs/Web/API/window.frames).
+- `message`
+  - : La donnée à envoyer à l'autre fenêtre. Elle est sérialisée en utilisant [l'algorithme de clônage structuré](/fr/docs/Web/Guide/API/DOM/The_structured_clone_algorithm). Cela signifie que vous pouvez passer sereinement une large variété d'objets de données à la fenêtre de destination sans avoir à les sérialiser vous-mêmes. \[1]
+- `targetOrigin`
+  - : Indique quelle doit être l'origine de `otherWindow` pour l'évènement à envoyer, soit comme la chaîne littérale `"*"` (signifiant pas de préférence) soit comme une URI. Si, au moment où l'évènement est inscrit pour être envoyé, le protocole, le nom d'hôte ou le port du document de `otherWindow` ne correspond pas à ceux contenus dans `targetOrigin`,  l'évènement ne sera pas envoyé ; il ne le sera que si les trois correspondent. Ce mécanisme permet de contrôler où les messages sont envoyés ; par exemple, si `postMessage` était utilisé pour transmettre un mot de passe, il serait absolument vital que cet argument soit une URI dont l'origine est la même que le récepteur prévu du message contenant le mot de passe, afin de prévenir l'interception du mot de passe par une tierce-partie malicieuse. **Fournissez toujours une `targetOrigin` spécifique, jamais `*`, si vous savez où le document de l'autre fenêtre est censé se trouver. Ne pas fournir une cible spécifique expose les données que vous envoyez à tout site malicieux à l'écoute.**
+- `transfer` {{optional_Inline}}
+  - : Séquence d'objets {{domxref("Transferable")}} qui sera transmise avec le message. La possession de ces objets est cédée à la destination et ils ne sont plus utilisables du côté de l'expéditeur.
 
-<dl>
- <dt><code><em>otherWindow</em></code></dt>
- <dd>Une référence à une autre fenêtre ; une telle référence peut être obtenue, par exemple, <em>via</em> la propriété <code>contentWindow</code> d'un élément <code>iframe</code>, l'objet retourné par <a href="/fr/docs/DOM/window.open">window.open</a>, ou par index nommé ou numérique de <a href="/fr/docs/Web/API/window.frames">window.frames</a>.</dd>
- <dt><code><em>message</em></code></dt>
- <dd>La donnée à envoyer à l'autre fenêtre. Elle est sérialisée en utilisant <a href="/fr/docs/Web/Guide/API/DOM/The_structured_clone_algorithm">l'algorithme de clônage structuré</a>. Cela signifie que vous pouvez passer sereinement une large variété d'objets de données à la fenêtre de destination sans avoir à les sérialiser vous-mêmes. [1]</dd>
- <dt><code><em>targetOrigin</em></code></dt>
- <dd>Indique quelle doit être l'origine de <code>otherWindow</code> pour l'évènement à envoyer, soit comme la chaîne littérale <code>"*"</code> (signifiant pas de préférence) soit comme une URI. Si, au moment où l'évènement est inscrit pour être envoyé, le protocole, le nom d'hôte ou le port du document de <code>otherWindow</code> ne correspond pas à ceux contenus dans <code>targetOrigin</code>,  l'évènement ne sera pas envoyé ; il ne le sera que si les trois correspondent. Ce mécanisme permet de contrôler où les messages sont envoyés ; par exemple, si <code>postMessage</code> était utilisé pour transmettre un mot de passe, il serait absolument vital que cet argument soit une URI dont l'origine est la même que le récepteur prévu du message contenant le mot de passe, afin de prévenir l'interception du mot de passe par une tierce-partie malicieuse. <strong>Fournissez toujours une <code>targetOrigin</code> spécifique, jamais <code>*</code>, si vous savez où le document de l'autre fenêtre est censé se trouver. Ne pas fournir une cible spécifique expose les données que vous envoyez à tout site malicieux à l'écoute.</strong></dd>
- <dt><code><em><strong>transfer</strong></em></code> {{optional_Inline}}</dt>
- <dd>Séquence d'objets {{domxref("Transferable")}} qui sera transmise avec le message. La possession de ces objets est cédée à la destination et ils ne sont plus utilisables du côté de l'expéditeur.</dd>
-</dl>
+## L'évènement envoyé
 
-<h2 id="The_dispatched_event">L'évènement envoyé</h2>
+`otherWindow` peut surveiller les messages envoyés en exécutant le JavaScript suivant :
 
-<p><code>otherWindow</code> peut surveiller les messages envoyés en exécutant le JavaScript suivant :</p>
-
-<pre class="brush: js">window.addEventListener("message", receiveMessage, false);
+```js
+window.addEventListener("message", receiveMessage, false);
 
 function receiveMessage(event)
 {
@@ -45,34 +42,32 @@ function receiveMessage(event)
 
   // ...
 }
-</pre>
+```
 
-<p>Les propriétés du message envoyé sont :</p>
+Les propriétés du message envoyé sont :
 
-<dl>
- <dt><code>data</code></dt>
- <dd>L'objet passé depuis l'autre fenêtre.</dd>
- <dt><code>origin</code></dt>
- <dd>L'<a href="/en-US/docs/Origin">origine</a> de la fenêtre qui a envoyé le message au moment où <code>postMessage</code> a été appelée. Des exemples typiques d'origines sont <code>https://example.org</code> (sous-entendu port <code>443</code>), <code>http://example.net</code> (sous-entendu port <code>80</code>), et <code>http://example.com:8080</code>. Notez qu'il n'est pas garanti que cette origine soit l'origine actuelle ou future de cette fenêtre, qui peut avoir été naviguée vers une adresse différente depuis l'appel à <code>postMessage</code>.</dd>
- <dt><code>source</code></dt>
- <dd>Une référence à l'objet <code><a href="/fr/docs/DOM/window">window</a></code> qui a envoyé le message ; vous pouvez utiliser ceci pour établir une communication dans les deux sens entre deux fenêtres ayant différentes origines.</dd>
-</dl>
+- `data`
+  - : L'objet passé depuis l'autre fenêtre.
+- `origin`
+  - : L'[origine](/en-US/docs/Origin) de la fenêtre qui a envoyé le message au moment où `postMessage` a été appelée. Des exemples typiques d'origines sont `https://example.org` (sous-entendu port `443`), `http://example.net` (sous-entendu port `80`), et `http://example.com:8080`. Notez qu'il n'est pas garanti que cette origine soit l'origine actuelle ou future de cette fenêtre, qui peut avoir été naviguée vers une adresse différente depuis l'appel à `postMessage`.
+- `source`
+  - : Une référence à l'objet [`window`](/fr/docs/DOM/window) qui a envoyé le message ; vous pouvez utiliser ceci pour établir une communication dans les deux sens entre deux fenêtres ayant différentes origines.
 
-<dl>
-</dl>
+<!---->
 
-<h2 id="Security_concerns">Précautions de sécurité</h2>
+## Précautions de sécurité
 
-<p><strong>Si vous ne prévoyez pas de recevoir de messages depuis d'autres sites, n'ajoutez pas de gestionnaire d'évènement pour les évènements <code>message</code>.</strong> C'est un moyen sûr d'éviter les problèmes de sécurité.</p>
+**Si vous ne prévoyez pas de recevoir de messages depuis d'autres sites, n'ajoutez pas de gestionnaire d'évènement pour les évènements `message`.** C'est un moyen sûr d'éviter les problèmes de sécurité.
 
-<p>Si vous prévoyez de recevoir des messages depuis d'autres sites, <strong>vérifiez toujours l'identité de l'expéditeur</strong> à l'aide des propriétés <code>origin</code> et si possible <code>source</code>. Toute fenêtre (y compris, par exemple, <code>http://evil.example.com</code>) peut envoyer un message à toute autre fenêtre, et vous n'avez aucune garantie qu'un expéditeur inconnu ne va pas envoyer de message malicieux. Cependant, même si vous vérifiez l'identité, vous devriez <strong>toujours vérifier la syntaxe du message reçu</strong>. Dans le cas contraire, une faille de sécurité dans le site auquel vous faites confiance peut ouvrir une vulnérabilité XSS dans votre propre site.</p>
+Si vous prévoyez de recevoir des messages depuis d'autres sites, **vérifiez toujours l'identité de l'expéditeur** à l'aide des propriétés `origin` et si possible `source`. Toute fenêtre (y compris, par exemple, `http://evil.example.com`) peut envoyer un message à toute autre fenêtre, et vous n'avez aucune garantie qu'un expéditeur inconnu ne va pas envoyer de message malicieux. Cependant, même si vous vérifiez l'identité, vous devriez **toujours vérifier la syntaxe du message reçu**. Dans le cas contraire, une faille de sécurité dans le site auquel vous faites confiance peut ouvrir une vulnérabilité XSS dans votre propre site.
 
-<p><strong>Spécifiez toujours explicitement une origine de destination, jamais <code>*</code>, quand vous utilisez <code>postMessage</code> pour envoyer des données à d'autres fenêtres.</strong> Un site malicieux peut changer l'adresse de la fenêtre à votre insu, et ainsi intercepter les données envoyées à l'aide de <code>postMessage</code>.</p>
+**Spécifiez toujours explicitement une origine de destination, jamais `*`, quand vous utilisez `postMessage` pour envoyer des données à d'autres fenêtres.** Un site malicieux peut changer l'adresse de la fenêtre à votre insu, et ainsi intercepter les données envoyées à l'aide de `postMessage`.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">/*
- * Dans les scripts de la fenêtre A, avec A sur &lt;http://example.com:8080&gt;:
+```js
+/*
+ * Dans les scripts de la fenêtre A, avec A sur <http://example.com:8080>:
  */
 
 var popup = window.open(...popup details...);
@@ -98,10 +93,11 @@ function receiveMessage(event)
   // event.data est "hi there yourself!  the secret response is: rheeeeet!"
 }
 window.addEventListener("message", receiveMessage, false);
-</pre>
+```
 
-<pre class="brush: js">/*
- * Dans les scripts de la popup, sur &lt;http://example.org&gt;:
+```js
+/*
+ * Dans les scripts de la popup, sur <http://example.org>:
  */
 
 // Appelée quelques instants après que postMessage a été appelée
@@ -124,56 +120,37 @@ function receiveMessage(event)
 }
 
 window.addEventListener("message", receiveMessage, false);
-</pre>
-
-<h3 id="Notes">Notes</h3>
-
-<p>Toute fenêtre peut accéder à cette méthode sur toute autre fenêtre, à tout moment, peu importe l'adresse du document dans la fenêtre, pour y envoyer un message. Par conséquent, tout gestionnaire d'évènement utilisé pour recevoir des messages <strong>doit</strong> d'abord vérifier l'identité de l'expéditeur du message, en utilisant les propriétés <code>origin</code> et si possible <code>source</code>. Cela ne peut pas être minimisé : <strong>ne pas vérifier les propriétés <code>origin</code> et si possible <code>source</code> permet des attaques inter-site.</strong></p>
+```
 
-<p>De même qu'avec les scripts exécutés de manière asynchrone (timeouts, evènements générés par l'utilisateur), il n'est pas possible pour l'appelant à <code>postMessage</code> de détecter quand un gestionnaire d'évènement écoutant des évènements envoyés par <code>postMessage</code> lance une exception.</p>
+### Notes
 
-<p>La valeur de la propriété <code>origin</code> de l'évènement envoyé n'est pas affectée par la valeur actuelle de <code>document.domain</code> dans la fenêtre appelante.</p>
+Toute fenêtre peut accéder à cette méthode sur toute autre fenêtre, à tout moment, peu importe l'adresse du document dans la fenêtre, pour y envoyer un message. Par conséquent, tout gestionnaire d'évènement utilisé pour recevoir des messages **doit** d'abord vérifier l'identité de l'expéditeur du message, en utilisant les propriétés `origin` et si possible `source`. Cela ne peut pas être minimisé : **ne pas vérifier les propriétés `origin` et si possible `source` permet des attaques inter-site.**
 
-<p>Pour les noms d'hôte IDN uniquement, la valeur de la propriété <code>origin</code> n'est pas systématiquement Unicode ou punycode ; pour la plus grande compatibilité, testez à la fois les valeurs IDN et punycode quand vous utilisez cette propriété si vous attendez des messages de sites IDN. Cette valeur sera systématiquement IDN à l'avenir, mais pour l'instant vous devriez gérer à la fois les formes IDN et punycode.</p>
+De même qu'avec les scripts exécutés de manière asynchrone (timeouts, evènements générés par l'utilisateur), il n'est pas possible pour l'appelant à `postMessage` de détecter quand un gestionnaire d'évènement écoutant des évènements envoyés par `postMessage` lance une exception.
 
-<p>La valeur de la propriété <code>origin</code> quand la fenêtre expéditrice contient une URL <code>javascript:</code> ou <code>data:</code> est l'origin du script qui a chargé cette URL.</p>
+La valeur de la propriété `origin` de l'évènement envoyé n'est pas affectée par la valeur actuelle de `document.domain` dans la fenêtre appelante.
 
-<h3 id="Utiliser_window.postMessage_dans_les_extensions_Non-standard_inline">Utiliser window.postMessage dans les extensions {{Non-standard_inline}}</h3>
+Pour les noms d'hôte IDN uniquement, la valeur de la propriété `origin` n'est pas systématiquement Unicode ou punycode ; pour la plus grande compatibilité, testez à la fois les valeurs IDN et punycode quand vous utilisez cette propriété si vous attendez des messages de sites IDN. Cette valeur sera systématiquement IDN à l'avenir, mais pour l'instant vous devriez gérer à la fois les formes IDN et punycode.
 
-<p><code>window.postMessage</code> est disponible depuis le JavaScript exécuté en code chrome (par exemple dans les extensions et le code privilégié), mais la propriété <code>source</code> de l'évènement envoyé est toujours <code>null</code> par mesure de sécurité. (Les autres propriétés ont leurs valeurs usuelles.) L'argument <code>targetOrigin</code> pour un message envoyé à une fenêtre située à une URL<code> chrome:</code> est actuellement mal interprété, si bien que la seule valeur qui conduit à l'envoi d'un message est <code>"*"</code>. Comme cette valeur n'est pas sûre quand la fenêtre ciblée peut être naviguée n'importe où par un site malicieux, il est recommandé de ne pas utiliser <code>postMessage</code> pour communiquer avec des pages <code>chrome:</code> pour l'instant ; utilisez une méthode différente (comme une query string quand la fenêtre est ouverte) pour communiquer avec des fenêtres chrome. Enfin, poster un message à une page à une URL <code>file:</code> requiert actuellement que l'argument <code>targetOrigin</code> soit <code>"*"</code>. <code>file://</code> ne peut pas être utilisé comme restriction de sécurité ; cette restriction pourrait être modifiée à l'avenir.</p>
+La valeur de la propriété `origin` quand la fenêtre expéditrice contient une URL `javascript:` ou `data:` est l'origin du script qui a chargé cette URL.
 
-<h2 id="Spécifications">Spécifications</h2>
+### Utiliser window\.postMessage dans les extensions {{Non-standard_inline}}
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col"><strong>Spécification</strong></th>
-   <th scope="col"><strong>Status</strong></th>
-   <th scope="col"><strong>Comment</strong>aire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "#dom-window-postmessage", "window.postMessage")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Pas de changement depuis {{SpecName('HTML5 Web Messaging')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 Web Messaging', '#dom-window-postmessage', 'window.postMessage')}}</td>
-   <td>{{Spec2('HTML5 Web Messaging')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+`window.postMessage` est disponible depuis le JavaScript exécuté en code chrome (par exemple dans les extensions et le code privilégié), mais la propriété `source` de l'évènement envoyé est toujours `null` par mesure de sécurité. (Les autres propriétés ont leurs valeurs usuelles.) L'argument `targetOrigin` pour un message envoyé à une fenêtre située à une URL` chrome:` est actuellement mal interprété, si bien que la seule valeur qui conduit à l'envoi d'un message est `"*"`. Comme cette valeur n'est pas sûre quand la fenêtre ciblée peut être naviguée n'importe où par un site malicieux, il est recommandé de ne pas utiliser `postMessage` pour communiquer avec des pages `chrome:` pour l'instant ; utilisez une méthode différente (comme une query string quand la fenêtre est ouverte) pour communiquer avec des fenêtres chrome. Enfin, poster un message à une page à une URL `file:` requiert actuellement que l'argument `targetOrigin` soit `"*"`. `file://` ne peut pas être utilisé comme restriction de sécurité ; cette restriction pourrait être modifiée à l'avenir.
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Spécifications
 
+| **Spécification**                                                                                                | **Status**                                   | **Comment**aire                                                           |
+| ---------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | ------------------------------------------------------------------------- |
+| {{SpecName('HTML WHATWG', "#dom-window-postmessage", "window.postMessage")}}             | {{Spec2('HTML WHATWG')}}             | Pas de changement depuis {{SpecName('HTML5 Web Messaging')}} |
+| {{SpecName('HTML5 Web Messaging', '#dom-window-postmessage', 'window.postMessage')}} | {{Spec2('HTML5 Web Messaging')}} | Définition initiale.                                                      |
 
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Window.postMessage")}}</p>
+{{Compat("api.Window.postMessage")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/en-US/docs/DOM/document.domain">Document.domain</a></li>
- <li><a href="/en-US/docs/Web/API/CustomEvent">CustomEvent</a></li>
- <li><a href="/en-US/docs/Code_snippets/Interaction_between_privileged_and_non-privileged_pages">Interaction entre les pages privilégiées et non privilégiées</a></li>
-</ul>
+- [Document.domain](/en-US/docs/DOM/document.domain)
+- [CustomEvent](/en-US/docs/Web/API/CustomEvent)
+- [Interaction entre les pages privilégiées et non privilégiées](/en-US/docs/Code_snippets/Interaction_between_privileged_and_non-privileged_pages)
diff --git a/files/fr/web/api/window/print/index.md b/files/fr/web/api/window/print/index.md
index e07fb5d820..31cd026626 100644
--- a/files/fr/web/api/window/print/index.md
+++ b/files/fr/web/api/window/print/index.md
@@ -11,40 +11,26 @@ tags:
   - Window
 translation_of: Web/API/Window/print
 ---
-<p>{{ ApiRef() }}</p>
+{{ ApiRef() }}
 
-<p>Ouvre la fenêtre de dialogue d'impression pour imprimer le document courant. </p>
+Ouvre la fenêtre de dialogue d'impression pour imprimer le document courant.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="eval">window.print()
-</pre>
+    window.print()
 
-<h2 id="Specification">Notes</h2>
+## Notes
 
-<p>Disponible à partir de Chrome {{CompatChrome(45.0)}}, cette méthode est bloquée à l'intérieur d'une balise {{htmlelement("iframe")}} sauf si son attribut sandbox a la valeur allow-modal.</p>
+Disponible à partir de Chrome {{CompatChrome(45.0)}}, cette méthode est bloquée à l'intérieur d'une balise {{htmlelement("iframe")}} sauf si son attribut sandbox a la valeur allow-modal.
 
-<h2 id="Specification">Spécification</h2>
+## Spécification
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 Web application', '#dom-print', 'print()')}}</td>
-   <td>{{Spec2('HTML5 Web application')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                        | Statut                                       | Commentaire          |
+| ------------------------------------------------------------------------------------ | -------------------------------------------- | -------------------- |
+| {{SpecName('HTML5 Web application', '#dom-print', 'print()')}} | {{Spec2('HTML5 Web application')}} | Définition initiale. |
 
-<h2 id="Voir_également">Voir également</h2>
+## Voir également
 
-<ul>
- <li><a href="/en/Printing">Printing</a></li>
- <li>{{ domxref("window.onbeforeprint") }}</li>
- <li>{{ domxref("window.onafterprint") }}</li>
-</ul>
\ No newline at end of file
+- [Printing](/en/Printing)
+- {{ domxref("window.onbeforeprint") }}
+- {{ domxref("window.onafterprint") }}
diff --git a/files/fr/web/api/window/prompt/index.md b/files/fr/web/api/window/prompt/index.md
index a5d0f914f2..0739572c79 100644
--- a/files/fr/web/api/window/prompt/index.md
+++ b/files/fr/web/api/window/prompt/index.md
@@ -9,31 +9,29 @@ tags:
   - Window
 translation_of: Web/API/Window/prompt
 ---
-<div>{{ApiRef("Window")}}</div>
+{{ApiRef("Window")}}
 
-<p>La méthode <code>Window.prompt()</code> affiche une boîte de dialogue, éventuellement avec un message, qui invite l'utilisateur à saisir un texte.</p>
+La méthode `Window.prompt()` affiche une boîte de dialogue, éventuellement avec un message, qui invite l'utilisateur à saisir un texte.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>résultat</em> = window.prompt(<em>message</em>, <em>défaut</em>);
-</pre>
+    résultat = window.prompt(message, défaut);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>message</code> {{optional_inline}}</dt>
- <dd>Une chaîne de caractères qui sera affichée pour l'utilisateur. Cet argument peut ne pas être utilisé s'il n'y a rien à afficher dans la fenêtre.</dd>
- <dt><code>default</code> {{optional_inline}}</dt>
- <dd>Une chaîne de caractères contenant la valeur par défaut affichée pour la saisie. Pour Internet Explorer 7 et 8, si cet argument n'est pas fourni, ce sera la chaîne de caractères <code>"undefined"</code> qui sera la valeur par défaut.</dd>
-</dl>
+- `message` {{optional_inline}}
+  - : Une chaîne de caractères qui sera affichée pour l'utilisateur. Cet argument peut ne pas être utilisé s'il n'y a rien à afficher dans la fenêtre.
+- `default` {{optional_inline}}
+  - : Une chaîne de caractères contenant la valeur par défaut affichée pour la saisie. Pour Internet Explorer 7 et 8, si cet argument n'est pas fourni, ce sera la chaîne de caractères `"undefined"` qui sera la valeur par défaut.
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+### Valeur de retour
 
-<p>La chaîne de caractères qui a été saisie par l'utilisateur ou <code>null</code>.</p>
+La chaîne de caractères qui a été saisie par l'utilisateur ou `null`.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: js">let signe = prompt("Quel est votre signe astrologique ?");
+```js
+let signe = prompt("Quel est votre signe astrologique ?");
 
 if (signe.toLowerCase() == "verseau") {
   console.log("Oh ? moi aussi je suis verseau :)");
@@ -48,44 +46,34 @@ signe = window.prompt('Quelle est la réponse ?');
 
 // ouvre une fenêtre avec le texte "Quelle est la réponse ?"
 // avec la valeur "42" comme réponse par défaut
-signe = window.prompt('Quelle est la réponse ?', '42');</pre>
+signe = window.prompt('Quelle est la réponse ?', '42');
+```
 
-<p>Lorsque l'utilisateur clique sur le bouton OK, le texte saisi dans le champ est renvoyé par la fonction. Si l'utilisateur clique sur OK sans avoir saisi de texte, c'est la chaîne vide qui est renvoyée. Si l'utilisateur clique sur le bouton "Annuler", la fonction renvoie <code>null</code>.</p>
+Lorsque l'utilisateur clique sur le bouton OK, le texte saisi dans le champ est renvoyé par la fonction. Si l'utilisateur clique sur OK sans avoir saisi de texte, c'est la chaîne vide qui est renvoyée. Si l'utilisateur clique sur le bouton "Annuler", la fonction renvoie `null`.
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p>Une boîte de dialogue contient un texte sur une ligne, un bouton "Annuler" ainsi qu'un bouton "OK". Elle permet de renvoyer le texte (éventuellement vide) saisi par l'utilisateur dans le champ de saisie.</p>
+Une boîte de dialogue contient un texte sur une ligne, un bouton "Annuler" ainsi qu'un bouton "OK". Elle permet de renvoyer le texte (éventuellement vide) saisi par l'utilisateur dans le champ de saisie.
 
-<p>The following text is shared between this article, <code>DOM:window.confirm</code> and <code>DOM:window.alert</code>. Les boîtes de dialogue sont des fenêtres modales : elles empêchent l'utilisateur d'accéder au reste de l'interface du programme tant que la fenêtre n'est pas fermée. Pour ces raisons, mieux vaut ne pas abuser des fonctions qui créent de telles boîtes de dialogue et autres fenêtres modales.</p>
+The following text is shared between this article, `DOM:window.confirm` and `DOM:window.alert`. Les boîtes de dialogue sont des fenêtres modales : elles empêchent l'utilisateur d'accéder au reste de l'interface du programme tant que la fenêtre n'est pas fermée. Pour ces raisons, mieux vaut ne pas abuser des fonctions qui créent de telles boîtes de dialogue et autres fenêtres modales.
 
-<p>On notera que le résultat de la fonction est une chaîne de caractères. Cela signifie qu'il faut parfois convertir la valeur founie par l'utilisateur. Si, par exemple, on souhaite que la réponse soit un nombre, il faudra la convertir (avec le constructeur {{jsxref("Number")}} éventuellement).</p>
+On notera que le résultat de la fonction est une chaîne de caractères. Cela signifie qu'il faut parfois convertir la valeur founie par l'utilisateur. Si, par exemple, on souhaite que la réponse soit un nombre, il faudra la convertir (avec le constructeur {{jsxref("Number")}} éventuellement).
 
-<pre class="brush: js">const aNumber = Number(window.prompt("Veuillez saisir un nombre.", ""));</pre>
+```js
+const aNumber = Number(window.prompt("Veuillez saisir un nombre.", ""));
+```
 
-<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', 'timers-and-user-prompts.html#dom-prompt', 'prompt()')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                | État                             | Commentaires |
+| ------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------ |
+| {{SpecName('HTML WHATWG', 'timers-and-user-prompts.html#dom-prompt', 'prompt()')}} | {{Spec2('HTML WHATWG')}} |              |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Window.prompt")}}</p>
+{{Compat("api.Window.prompt")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("window.alert", "alert")}}</li>
- <li>{{domxref("window.confirm", "confirm")}}</li>
-</ul>
+- {{domxref("window.alert", "alert")}}
+- {{domxref("window.confirm", "confirm")}}
diff --git a/files/fr/web/api/window/rejectionhandled_event/index.md b/files/fr/web/api/window/rejectionhandled_event/index.md
index ebe167e30f..e966f6a1df 100644
--- a/files/fr/web/api/window/rejectionhandled_event/index.md
+++ b/files/fr/web/api/window/rejectionhandled_event/index.md
@@ -13,70 +13,58 @@ tags:
   - rejectionhandled
 translation_of: Web/API/Window/rejectionhandled_event
 ---
-<div>{{APIRef("HTML DOM")}}</div>
+{{APIRef("HTML DOM")}}
 
-<p>L'événement <strong><code>rejectionhandled</code></strong> est envoyé à la portée globale du script (généralement {{domxref("window")}} mais aussi {{domxref("Worker")}}) chaque fois qu'un JavaScript {{jsxref("Promise")}} est rejeté mais après que le rejet de la promesse a été traité.</p>
+L'événement **`rejectionhandled`** est envoyé à la portée globale du script (généralement {{domxref("window")}} mais aussi {{domxref("Worker")}}) chaque fois qu'un JavaScript {{jsxref("Promise")}} est rejeté mais après que le rejet de la promesse a été traité.
 
-<p>Cela peut être utilisé dans le débogage et pour la résilience générale des applications, en tandem avec l'événement {{domxref ("Window.unhandledrejection_event", "unhandledrejection")}}, qui est envoyé lorsqu'une promesse est rejetée mais qu'il n'y a pas de responsable du rejet .</p>
+Cela peut être utilisé dans le débogage et pour la résilience générale des applications, en tandem avec l'événement {{domxref ("Window.unhandledrejection_event", "unhandledrejection")}}, qui est envoyé lorsqu'une promesse est rejetée mais qu'il n'y a pas de responsable du rejet .
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row">Bulles</th>
-   <td>Non</td>
-  </tr>
-  <tr>
-   <th scope="row">Annulable</th>
-   <td>Non</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface</th>
-   <td>{{domxref("PromiseRejectionEvent")}}</td>
-  </tr>
-  <tr>
-   <th scope="row">Propriété de gestionnaire d'événements</th>
-   <td>{{domxref("WindowEventHandlers.onrejectionhandled", "onrejectionhandled")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Bulles</th>
+      <td>Non</td>
+    </tr>
+    <tr>
+      <th scope="row">Annulable</th>
+      <td>Non</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface</th>
+      <td>{{domxref("PromiseRejectionEvent")}}</td>
+    </tr>
+    <tr>
+      <th scope="row">Propriété de gestionnaire d'événements</th>
+      <td>
+        {{domxref("WindowEventHandlers.onrejectionhandled", "onrejectionhandled")}}
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Vous pouvez utiliser l'événement <code>rejectionhandled</code> pour consigner les promesses rejetées sur la console, ainsi que les raisons pour lesquelles elles ont été rejetées :</p>
+Vous pouvez utiliser l'événement `rejectionhandled` pour consigner les promesses rejetées sur la console, ainsi que les raisons pour lesquelles elles ont été rejetées :
 
-<pre class="brush: js">window.addEventListener("rejectionhandled", event =&gt; {
+```js
+window.addEventListener("rejectionhandled", event => {
   console.log("Promise rejected; reason: " + event.reason);
 }, false);
-</pre>
+```
 
-<h2 id="Spécifications">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('HTML WHATWG', 'webappapis.html#unhandled-promise-rejections', 'rejectionhandled')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                    | Statut                           | Commentaire          |
+| -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName('HTML WHATWG', 'webappapis.html#unhandled-promise-rejections', 'rejectionhandled')}} | {{Spec2('HTML WHATWG')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Window.rejectionhandled_event")}}</p>
+{{Compat("api.Window.rejectionhandled_event")}}
 
-<h2 id="Voir_également">Voir également</h2>
+## Voir également
 
-<ul>
- <li>{{SectionOnPage("/en-US/docs/Web/JavaScript/Guide/Using_promises", "Promise rejection events")}}</li>
- <li>{{domxref("PromiseRejectionEvent")}}</li>
- <li>{{jsxref("Promise")}}</li>
- <li>{{domxref("Window/unhandledrejection_event", "unhandledrejection")}}</li>
-</ul>
+- {{SectionOnPage("/en-US/docs/Web/JavaScript/Guide/Using_promises", "Promise rejection events")}}
+- {{domxref("PromiseRejectionEvent")}}
+- {{jsxref("Promise")}}
+- {{domxref("Window/unhandledrejection_event", "unhandledrejection")}}
diff --git a/files/fr/web/api/window/requestanimationframe/index.md b/files/fr/web/api/window/requestanimationframe/index.md
index 210fa93d1a..b982fdc912 100644
--- a/files/fr/web/api/window/requestanimationframe/index.md
+++ b/files/fr/web/api/window/requestanimationframe/index.md
@@ -7,39 +7,37 @@ tags:
   - JavaScript
 translation_of: Web/API/window/requestAnimationFrame
 ---
-<p>{{APIRef("Window")}}</p>
+{{APIRef("Window")}}
 
-<p>La méthode <strong><code>window.requestAnimationFrame()</code></strong> notifie le navigateur que vous souhaitez exécuter une animation et demande que celui-ci exécute une fonction spécifique de mise à jour de l'animation, avant le prochain rafraîchissement du navigateur. Cette méthode prend comme argument un callback qui sera appelé avant le rafraîchissement du navigateur.</p>
+La méthode **`window.requestAnimationFrame()`** notifie le navigateur que vous souhaitez exécuter une animation et demande que celui-ci exécute une fonction spécifique de mise à jour de l'animation, avant le prochain rafraîchissement du navigateur. Cette méthode prend comme argument un callback qui sera appelé avant le rafraîchissement du navigateur.
 
-<div class="note">
-  <p><strong>Note :</strong> Si vous souhaitez animer une nouvelle frame durant le prochain repaint, votre callback doit appeler la méthode <code>requestAnimationFrame()</code>.</p>
-</div>
+> **Note :** Si vous souhaitez animer une nouvelle frame durant le prochain repaint, votre callback doit appeler la méthode `requestAnimationFrame()`.
 
-<p>Vous devez appeler cette méthode dès que vous êtes prêt à rafraîchir votre animation. La fonction contenant l'animation doit être appelée avant que le navigateur n'effectue un nouveau rafraîchissement . En moyenne, le callback sera appelé 60 fois par seconde, cela dépendra de la fréquence de rafraîchissement de votre écran, conformément aux recommandations de la W3C. Cette fréquence peut être inférieure si plusieurs onglets sont ouverts simultanément.</p>
+Vous devez appeler cette méthode dès que vous êtes prêt à rafraîchir votre animation. La fonction contenant l'animation doit être appelée avant que le navigateur n'effectue un nouveau rafraîchissement . En moyenne, le callback sera appelé 60 fois par seconde, cela dépendra de la fréquence de rafraîchissement de votre écran, conformément aux recommandations de la W3C. Cette fréquence peut être inférieure si plusieurs onglets sont ouverts simultanément.
 
-<p>Le callback possède un seul argument, un {{domxref("DOMHighResTimeStamp")}}, qui est le temps, en millisecondes avec une précision minimum de 10 µs, durant lequel l'exécution du rafraîchissement est prévu.</p>
+Le callback possède un seul argument, un {{domxref("DOMHighResTimeStamp")}}, qui est le temps, en millisecondes avec une précision minimum de 10 µs, durant lequel l'exécution du rafraîchissement est prévu.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js"><em>requestID</em> = window.requestAnimationFrame(<em>callback</em>);       // Firefox 23 / IE 10 / Chrome / Safari 7 (incl. iOS)
-<em>requestID</em> = window.mozRequestAnimationFrame(<em>callback</em>);    // Firefox &lt; 23
-<em>requestID</em> = window.webkitRequestAnimationFrame(callback); // Anciennes versions de Safari / Chrome
-</pre>
+```js
+requestID = window.requestAnimationFrame(callback);       // Firefox 23 / IE 10 / Chrome / Safari 7 (incl. iOS)
+requestID = window.mozRequestAnimationFrame(callback);    // Firefox < 23
+requestID = window.webkitRequestAnimationFrame(callback); // Anciennes versions de Safari / Chrome
+```
 
-<h3 id="Parameters">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>callback</code></dt>
- <dd>Un paramètre définissant la fonction à appeler lorsque votre animation va être rafraîchie lors du prochain rafraîchissement. Le callback ne prend qu'un seul argument, un {{domxref("DOMHighResTimeStamp")}}, qui est le temps à partir duquel requestAnimationFrame va commencer à appeler les callbacks.</dd>
-</dl>
+- `callback`
+  - : Un paramètre définissant la fonction à appeler lorsque votre animation va être rafraîchie lors du prochain rafraîchissement. Le callback ne prend qu'un seul argument, un {{domxref("DOMHighResTimeStamp")}}, qui est le temps à partir duquel requestAnimationFrame va commencer à appeler les callbacks.
 
-<h3 id="Valeur_retournée">Valeur retournée</h3>
+### Valeur retournée
 
-<p><code>requestID</code> est un entier <code>long</code> unique identifiant l'élément dans la liste des callbacks. C'est une valeur différente de zéro, mais il est prudent de ne pas faire de suppositions sur cette valeur. En passant cette valeur en paramètre de la méthode {{domxref("window.cancelAnimationFrame()")}},  vous annulez l'appel du callback.</p>
+`requestID` est un entier `long` unique identifiant l'élément dans la liste des callbacks. C'est une valeur différente de zéro, mais il est prudent de ne pas faire de suppositions sur cette valeur. En passant cette valeur en paramètre de la méthode {{domxref("window.cancelAnimationFrame()")}},  vous annulez l'appel du callback.
 
-<h2 id="Notes">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
+```js
+window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                               window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
 
 
@@ -52,42 +50,38 @@ function step(timestamp) {
   if (start === null) start = timestamp;
   progress = timestamp - start;
   d.style.left = Math.min(progress/10, 200) + "px";
-  if (progress &lt; 2000) {
+  if (progress < 2000) {
     requestAnimationFrame(step);
   }
 }
 
 requestAnimationFrame(step);
-</pre>
+```
 
-<h2 id="Browser_compatibility">Compatibilités</h2>
+## Compatibilités
 
-<div>
-<p>{{Compat("api.Window.requestAnimationFrame")}}</p>
-</div>
+{{Compat("api.Window.requestAnimationFrame")}}
 
-<h3 id="Specification">Notes pour Gecko</h3>
+### Notes pour Gecko
 
-<p>[1] Avant Gecko 11.0 {{geckoRelease("11.0")}}, <code>mozRequestAnimationFrame()</code> pouvait être appelée sans paramètres d'entrée. Cela n'est plus supporté et n'est pas susceptible d'être standardisé.</p>
+\[1] Avant Gecko 11.0 {{geckoRelease("11.0")}}, `mozRequestAnimationFrame()` pouvait être appelée sans paramètres d'entrée. Cela n'est plus supporté et n'est pas susceptible d'être standardisé.
 
-<p>[2] Le callback prend comme paramètre un {{domxref("DOMTimeStamp")}} au lieu d'un {{domxref("DOMHighResTimeStamp")}} si c'est la version préfixée qui est utilisée. <code>DOMTimeStamp</code> n'a qu'une précision de l'ordre de la milliseconde, mais <code>DOMHightResTimeStamp</code> a une précision minimale de l'ordre de 10 microsecondes.</p>
+\[2] Le callback prend comme paramètre un {{domxref("DOMTimeStamp")}} au lieu d'un {{domxref("DOMHighResTimeStamp")}} si c'est la version préfixée qui est utilisée. `DOMTimeStamp` n'a qu'une précision de l'ordre de la milliseconde, mais `DOMHightResTimeStamp` a une précision minimale de l'ordre de 10 microsecondes.
 
-<h3 id="Notes_pour_Chrome">Notes pour Chrome</h3>
+### Notes pour Chrome
 
-<p>La syntaxe correcte, dans Chrome, pour annuler l'exécution est<code> window.cancelAnimationFrame()</code>. Dans les anciennes versions, <code>window.webkitCancelAnimationFrame()</code> &amp; <code>window.webkitCancelRequestAnimationFrame() sont obsolètes</code> mais sont toujours supportées pour le moment.</p>
+La syntaxe correcte, dans Chrome, pour annuler l'exécution est` window.cancelAnimationFrame()`. Dans les anciennes versions, `window.webkitCancelAnimationFrame()` & `window.webkitCancelRequestAnimationFrame() sont obsolètes` mais sont toujours supportées pour le moment.
 
-<h2 id="Specification">Specification</h2>
+## Specification
 
-<p>{{spec("http://www.w3.org/TR/animation-timing/#requestAnimationFrame", "Timing control for script-based animations: requestAnimationFrame", "WD")}}</p>
+{{spec("http://www.w3.org/TR/animation-timing/#requestAnimationFrame", "Timing control for script-based animations: requestAnimationFrame", "WD")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("window.mozAnimationStartTime")}}</li>
- <li>{{domxref("window.cancelAnimationFrame()")}}</li>
- <li><a href="http://weblogs.mozillazine.org/roc/archives/2010/08/mozrequestanima.html">mozRequestAnimationFrame</a> - Blog post</li>
- <li><a href="http://paulirish.com/2011/requestanimationframe-for-smart-animating/">requestAnimationFrame for smart animating</a> - Blog post</li>
- <li><a href="http://hacks.mozilla.org/2011/08/animating-with-javascript-from-setinterval-to-requestanimationframe/">Animating with javascript: from setInterval to requestAnimationFrame</a> - Blog post</li>
- <li><a href="http://blogs.msdn.com/b/ie/archive/2011/07/05/using-pc-hardware-more-efficiently-in-html5-new-web-performance-apis-part-1.aspx">Using PC Hardware more efficiently in HTML5: New Web Performance APIs, Part 1</a> - Blog post</li>
- <li><a href="http://www.testufo.com/#test=animation-time-graph">TestUFO: Test your web browser for requestAnimationFrame() Timing Deviations</a></li>
-</ul>
+- {{domxref("window.mozAnimationStartTime")}}
+- {{domxref("window.cancelAnimationFrame()")}}
+- [mozRequestAnimationFrame](http://weblogs.mozillazine.org/roc/archives/2010/08/mozrequestanima.html) - Blog post
+- [requestAnimationFrame for smart animating](http://paulirish.com/2011/requestanimationframe-for-smart-animating/) - Blog post
+- [Animating with javascript: from setInterval to requestAnimationFrame](http://hacks.mozilla.org/2011/08/animating-with-javascript-from-setinterval-to-requestanimationframe/) - Blog post
+- [Using PC Hardware more efficiently in HTML5: New Web Performance APIs, Part 1](http://blogs.msdn.com/b/ie/archive/2011/07/05/using-pc-hardware-more-efficiently-in-html5-new-web-performance-apis-part-1.aspx) - Blog post
+- [TestUFO: Test your web browser for requestAnimationFrame() Timing Deviations](http://www.testufo.com/#test=animation-time-graph)
diff --git a/files/fr/web/api/window/requestidlecallback/index.md b/files/fr/web/api/window/requestidlecallback/index.md
index ca33f7ac28..ec73c7442d 100644
--- a/files/fr/web/api/window/requestidlecallback/index.md
+++ b/files/fr/web/api/window/requestidlecallback/index.md
@@ -3,63 +3,47 @@ title: window.requestIdleCallback()
 slug: Web/API/Window/requestIdleCallback
 translation_of: Web/API/Window/requestIdleCallback
 ---
-<div>{{APIRef}}{{SeeCompatTable}}</div>
-
-<p>La méthode <code><strong>window.requestIdleCallback() </strong></code>mémorise une fonction qui sera appellée lorsque le navigateur n'aura plus aucune autre tâche en cours. Cela offre au développeur la possibilité de réaliser des tâches à basse priorité en arrière-plan sur le thread principal, sans impacter l'expérience utilisateur (ralentissement des animations, etc). L'ordre des appels aux fonctions est généralement premier entré, premier sorti, sauf si le timeout défini au moment de l'enregistrement est atteint avant que le navigateur n'ait eu le temps d'appeler la fonction en question.</p>
-
-<h2 id="Syntax">Syntaxe</h2>
-
-<pre class="syntaxbox"><code>var idleCallbackId = window.requestIdleCallback(fonction[, options])</code></pre>
-
-<h3 id="Returns">Retour de l'appel</h3>
-
-<p>Un entier long non-signé qui peut être utilisé pour annulé l'appel à la fonction via la méthode {{domxref("window.cancelIdleCallback()")}}.</p>
-
-<h3 id="Parameters">Paramètres</h3>
-
-<dl>
- <dt>fonction</dt>
- <dd>La référence d'une fonction qui devrait être appellée dans un futur proche. La fonction en question recevra en argument un objet de type temps restant avec les propriétés suivantes :
- <ul>
-  <li><code>timeRemaining </code>: Fonction qui retourne un {{domxref("DOMHighResTimeStamp")}} repésentant le temps restant estimé par le navigateur pour exécuter la tâche, ayant pour valeur minimale zéro. Les tâches nécessitant un temps d'exécution relativement long sont susceptibles de recourir à plusieurs appels à cette méthode s'il reste du travail à effectuer, rendant la main au navigateur peu avant que le compteur n'atteigne zéro. <code>timeRemaining()</code> retournera toujours zéro si <code>didTimeout</code> est positionné à true (i.e. la fonction n'a pas été appelée durant la période de repos du navigateur). La limite de temps est limitée à 50ms, même si le navigateur reste n'a pas d'autre tâche à exécuter pendant une durée plus longue.</li>
-  <li><code>didTimeout </code>: Un booléen positionné à true si la fonction est appelée car le timeout a été atteint, et false si elle a été appelée par le navigateur durant une période de repos.</li>
- </ul>
- </dd>
- <dt><code>options</code> {{optional_inline}}</dt>
- <dd>Objet contenant des paramètres de configuration optionnels. Les propriétés sont les suivantes :
- <ul>
-  <li><code>timeout </code>: Si <code>timeout</code> est spécifié et possède une valeur positive, la fonction sera appelée au bout de au moins <code>timeout</code> millisecondes si elle n'a pas été appelée par le navigateur au préalable.</li>
- </ul>
- </dd>
-</dl>
-
-<h2 id="Specifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th>Spécification</th>
-   <th>Status</th>
-   <th>Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Background Tasks')}}</td>
-   <td>{{Spec2('Background Tasks')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Window.requestIdleCallback")}}</p>
-
-<h2 id="See_also">Voir aussi</h2>
-
-<ul>
-  <li>{{domxref("window.cancelIdleCallback()")}}</li>
-  <li>{{domxref("IdleDeadline")}}</li>
-  <li>{{domxref("window.setTimeout()")}}</li>
-  <li>{{domxref("window.setInterval()")}}</li>
-  <li>{{domxref("window.requestAnimationFrame")}}</li>
-</ul>
+{{APIRef}}{{SeeCompatTable}}
+
+La méthode **`window.requestIdleCallback() `**mémorise une fonction qui sera appellée lorsque le navigateur n'aura plus aucune autre tâche en cours. Cela offre au développeur la possibilité de réaliser des tâches à basse priorité en arrière-plan sur le thread principal, sans impacter l'expérience utilisateur (ralentissement des animations, etc). L'ordre des appels aux fonctions est généralement premier entré, premier sorti, sauf si le timeout défini au moment de l'enregistrement est atteint avant que le navigateur n'ait eu le temps d'appeler la fonction en question.
+
+## Syntaxe
+
+    var idleCallbackId = window.requestIdleCallback(fonction[, options])
+
+### Retour de l'appel
+
+Un entier long non-signé qui peut être utilisé pour annulé l'appel à la fonction via la méthode {{domxref("window.cancelIdleCallback()")}}.
+
+### Paramètres
+
+- fonction
+
+  - : La référence d'une fonction qui devrait être appellée dans un futur proche. La fonction en question recevra en argument un objet de type temps restant avec les propriétés suivantes :
+
+    - `timeRemaining `: Fonction qui retourne un {{domxref("DOMHighResTimeStamp")}} repésentant le temps restant estimé par le navigateur pour exécuter la tâche, ayant pour valeur minimale zéro. Les tâches nécessitant un temps d'exécution relativement long sont susceptibles de recourir à plusieurs appels à cette méthode s'il reste du travail à effectuer, rendant la main au navigateur peu avant que le compteur n'atteigne zéro. `timeRemaining()` retournera toujours zéro si `didTimeout` est positionné à true (i.e. la fonction n'a pas été appelée durant la période de repos du navigateur). La limite de temps est limitée à 50ms, même si le navigateur reste n'a pas d'autre tâche à exécuter pendant une durée plus longue.
+    - `didTimeout `: Un booléen positionné à true si la fonction est appelée car le timeout a été atteint, et false si elle a été appelée par le navigateur durant une période de repos.
+
+- `options` {{optional_inline}}
+
+  - : Objet contenant des paramètres de configuration optionnels. Les propriétés sont les suivantes :
+
+    - `timeout `: Si `timeout` est spécifié et possède une valeur positive, la fonction sera appelée au bout de au moins `timeout` millisecondes si elle n'a pas été appelée par le navigateur au préalable.
+
+## Spécifications
+
+| Spécification                                | Status                                   | Comment              |
+| -------------------------------------------- | ---------------------------------------- | -------------------- |
+| {{SpecName('Background Tasks')}} | {{Spec2('Background Tasks')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Window.requestIdleCallback")}}
+
+## Voir aussi
+
+- {{domxref("window.cancelIdleCallback()")}}
+- {{domxref("IdleDeadline")}}
+- {{domxref("window.setTimeout()")}}
+- {{domxref("window.setInterval()")}}
+- {{domxref("window.requestAnimationFrame")}}
diff --git a/files/fr/web/api/window/resizeby/index.md b/files/fr/web/api/window/resizeby/index.md
index 4d3a8873d6..325e2a1be1 100644
--- a/files/fr/web/api/window/resizeby/index.md
+++ b/files/fr/web/api/window/resizeby/index.md
@@ -6,68 +6,55 @@ tags:
   - Window
 translation_of: Web/API/Window/resizeBy
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}
 
-<p>La méthode <code><strong>Window.resizeBy()</strong></code> redimensionne la fenêtre actuelle d'une taille spécifié.</p>
+La méthode **`Window.resizeBy()`** redimensionne la fenêtre actuelle d'une taille spécifié.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">window.resizeBy(<em>xDelta, yDelta</em>)
-</pre>
+    window.resizeBy(xDelta, yDelta)
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<ul>
- <li><code>xDelta</code> est le nombre de pixels pour agrandir la fenêtre horizontalement.</li>
- <li><code>yDelta</code> est le nombre de pixels pour agrandir la fenêtre verticalement.</li>
-</ul>
+- `xDelta` est le nombre de pixels pour agrandir la fenêtre horizontalement.
+- `yDelta` est le nombre de pixels pour agrandir la fenêtre verticalement.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush:js">// Réduit la fenêtre
+```js
+// Réduit la fenêtre
 window.resizeBy(-200, -200);
-</pre>
+```
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p>Cette méthode redimensionne la fenêtre par rapport à sa taille actuelle. Pour redimensionner la fenêtre en termes absolus, utilisez {{domxref ("window.resizeTo ()")}}.</p>
+Cette méthode redimensionne la fenêtre par rapport à sa taille actuelle. Pour redimensionner la fenêtre en termes absolus, utilisez {{domxref ("window.resizeTo ()")}}.
 
-<h3 id="Créer_et_redimensionner_une_fenêtre_externe">Créer et redimensionner une fenêtre externe</h3>
+### Créer et redimensionner une fenêtre externe
 
-<p>Pour des raisons de sécurité, il n'est plus possible dans Firefox pour un site Web de modifier la taille par défaut d'une fenêtre dans un navigateur si la fenêtre n'a pas été créée par <code>window.open()</code> ou contient plusieurs onglets. Consultez le tableau de compatibilité pour plus de détails sur le changement.</p>
+Pour des raisons de sécurité, il n'est plus possible dans Firefox pour un site Web de modifier la taille par défaut d'une fenêtre dans un navigateur si la fenêtre n'a pas été créée par `window.open()` ou contient plusieurs onglets. Consultez le tableau de compatibilité pour plus de détails sur le changement.
 
-<p>Même si vous créez une fenêtre avec <code>window.open()</code> <strong>elle n'est pas redimensionnable par défaut.</strong> Pour rendre la fenêtre redimensionnable, vous devez l'ouvrir avec le paramètre <code>"resizable"</code> .</p>
+Même si vous créez une fenêtre avec `window.open()` **elle n'est pas redimensionnable par défaut.** Pour rendre la fenêtre redimensionnable, vous devez l'ouvrir avec le paramètre `"resizable"` .
 
-<pre class="brush: js">// Créer une fenêtre redimensionnable
+```js
+// Créer une fenêtre redimensionnable
 myExternalWindow = window.open("http://myurl.domain", "myWindowName", "resizable");
 
 // Redimensionner la fenêtre à 500 x 500
 myExternalWindow.resizeTo(500, 500);
 
 // Rendre la fenêtre relativement plus petit à 400 x 400
-myExternalWindow.resizeBy(-100, -100);</pre>
-
-<p>La fenêtre que vous créez doit respecter la politique de même origine. Si la fenêtre que vous ouvrez n'est pas dans la même origine que la fenêtre actuelle, vous ne pourrez pas redimensionner ni accéder aux informations sur cette fenêtre / cet onglet.</p>
-
-<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">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{ SpecName('CSSOM View', '#dom-window-resizeby', 'window.resizeBy()') }}</td>
-   <td>{{ Spec2('CSSOM View') }}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Window.resizeBy")}}</p>
+myExternalWindow.resizeBy(-100, -100);
+```
+
+La fenêtre que vous créez doit respecter la politique de même origine. Si la fenêtre que vous ouvrez n'est pas dans la même origine que la fenêtre actuelle, vous ne pourrez pas redimensionner ni accéder aux informations sur cette fenêtre / cet onglet.
+
+## Spécifications
+
+| Spécification                                                                                    | Statut                           | Commentaires |
+| ------------------------------------------------------------------------------------------------ | -------------------------------- | ------------ |
+| {{ SpecName('CSSOM View', '#dom-window-resizeby', 'window.resizeBy()') }} | {{ Spec2('CSSOM View') }} |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Window.resizeBy")}}
diff --git a/files/fr/web/api/window/screen/index.md b/files/fr/web/api/window/screen/index.md
index c86fcb6f61..79bbd5f09f 100644
--- a/files/fr/web/api/window/screen/index.md
+++ b/files/fr/web/api/window/screen/index.md
@@ -11,45 +11,28 @@ tags:
   - Écran
 translation_of: Web/API/Window/screen
 ---
-<div>{{APIRef("CSSOM View")}}</div>
+{{APIRef("CSSOM View")}}Retourne une référence à l'objet `screen` associé à la fenêtre. L'object `screen`, qui implémente l'interface {{domxref("Screen")}}, est un objet spécial servant à examiner les propriétés de l'écran qui affiche la fenêtre courante.
 
-<div>Retourne une référence à l'objet <code>screen</code> associé à la fenêtre. L'object <code>screen</code>, qui implémente l'interface {{domxref("Screen")}}, est un objet spécial servant à examiner les propriétés de l'écran qui affiche la fenêtre courante.</div>
+## Syntaxe
 
-<h2 id="Syntax">Syntaxe</h2>
+    objetEcran = window.screen;
 
-<pre class="syntaxbox"><var>objetEcran</var> = <var>window</var>.screen;
-</pre>
+## Examples
 
-<h2 id="Example">Examples</h2>
-
-<pre class="brush:js">if (screen.pixelDepth &lt; 8) {
+```js
+if (screen.pixelDepth < 8) {
   // utiliser la page en colorisation réduite
 } else {
   // utiliser la page en coolorisation normale
 }
-</pre>
-
-<h2 id="Specification">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('CSSOM View', '#dom-window-screen', 'window.screen')}}</td>
-   <td>{{Spec2('CSSOM View')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+```
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Spécifications
 
+| Spécification                                                                            | État                             | Commentaires |
+| ---------------------------------------------------------------------------------------- | -------------------------------- | ------------ |
+| {{SpecName('CSSOM View', '#dom-window-screen', 'window.screen')}} | {{Spec2('CSSOM View')}} |              |
 
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Window.screen")}}</p>
+{{Compat("api.Window.screen")}}
diff --git a/files/fr/web/api/window/screenx/index.md b/files/fr/web/api/window/screenx/index.md
index 2ff4f0dc7b..a6c4a13e38 100644
--- a/files/fr/web/api/window/screenx/index.md
+++ b/files/fr/web/api/window/screenx/index.md
@@ -8,45 +8,27 @@ tags:
   - lecture seule
 translation_of: Web/API/Window/screenX
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}
 
-<p>La propriété  <code><strong>Window.screenX</strong></code> retourne la distance honrizontale, in CSS pixels, of the left border of the user's browser from the left side of the screen.</p>
+La propriété  **`Window.screenX`** retourne la distance honrizontale, in CSS pixels, of the left border of the user's browser from the left side of the screen.
 
-<h2 id="Syntax">Syntax</h2>
+## Syntax
 
-<pre class="syntaxbox"><em>lLoc</em> = window.screenX
-</pre>
+    lLoc = window.screenX
 
-<ul>
- <li><em><code>lLoc</code></em> is the number of CSS pixels from the left side the screen.</li>
-</ul>
+- _`lLoc`_ is the number of CSS pixels from the left side the screen.
 
-<h2 id="Specifications">Specifications</h2>
+## Specifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Commentaire</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{ SpecName('CSSOM View', '#dom-window-screenx', 'Window.screenX') }}</td>
-   <td>{{ Spec2('CSSOM View') }}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Specification                                                                                | Status                           | Commentaire         |
+| -------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- |
+| {{ SpecName('CSSOM View', '#dom-window-screenx', 'Window.screenX') }} | {{ Spec2('CSSOM View') }} | Définition initiale |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Window.screenX")}}</p>
+{{Compat("api.Window.screenX")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>{{domxref("window.screenLeft")}}</li>
-  <li>{{domxref("Window.screenY")}}</li>
-</ul>
+- {{domxref("window.screenLeft")}}
+- {{domxref("Window.screenY")}}
diff --git a/files/fr/web/api/window/scroll/index.md b/files/fr/web/api/window/scroll/index.md
index 17ae626928..6617af0bf3 100644
--- a/files/fr/web/api/window/scroll/index.md
+++ b/files/fr/web/api/window/scroll/index.md
@@ -3,22 +3,28 @@ title: window.scroll
 slug: Web/API/Window/scroll
 translation_of: Web/API/Window/scroll
 ---
-<p>{{ ApiRef() }}</p>
-
-<p>Fait glisser la fenêtre vers une position particulière du document</p>
-<h3 id="Syntax">Syntax</h3>
-<pre class="eval">window.scroll(<i>x-coord</i>,<i>y-coord</i>)
-</pre>
-<h3 id="Parameters">Parameters</h3>
-<ul>
- <li><code>x-coord</code> est la position horizontale du pixel que vous voulez voir apparaitre en haut à gauche de l’écran.</li>
- <li><code>y-coord</code> est la position verticale du pixel que vous voulez voir apparaitre en haut à gauche de l’écran.</li>
-</ul>
-<h3 id="Example">Example</h3>
-<pre> // Déplace la fenêtre 100px plus bas
- &lt;button onClick="scroll(0, 100);"&gt;click to scroll down 100 pixels&lt;/button&gt;
-</pre>
-<h3 id="Notes">Notes</h3>
-<p><a href="en/Window.scrollTo">window.scrollTo</a> a un effet identique à cette méthode. Pour se déplacer par pas dans la page, utilisez <a href="en/Window.scrollBy">window.scrollBy</a>. Jetez aussi un œil à <a href="en/Window.scrollByLines">window.scrollByLines</a> et <a href="en/Window.scrollByPages">window.scrollByPages</a>.</p>
-<h3 id="Specification">Specification</h3>
-<p>DOM Level 0. Hors spécification.</p>
\ No newline at end of file
+{{ ApiRef() }}
+
+Fait glisser la fenêtre vers une position particulière du document
+
+### Syntax
+
+    window.scroll(x-coord,y-coord)
+
+### Parameters
+
+- `x-coord` est la position horizontale du pixel que vous voulez voir apparaitre en haut à gauche de l’écran.
+- `y-coord` est la position verticale du pixel que vous voulez voir apparaitre en haut à gauche de l’écran.
+
+### Example
+
+     // Déplace la fenêtre 100px plus bas
+     <button onClick="scroll(0, 100);">click to scroll down 100 pixels</button>
+
+### Notes
+
+[window.scrollTo](en/Window.scrollTo) a un effet identique à cette méthode. Pour se déplacer par pas dans la page, utilisez [window.scrollBy](en/Window.scrollBy). Jetez aussi un œil à [window.scrollByLines](en/Window.scrollByLines) et [window.scrollByPages](en/Window.scrollByPages).
+
+### Specification
+
+DOM Level 0. Hors spécification.
diff --git a/files/fr/web/api/window/scrollbars/index.md b/files/fr/web/api/window/scrollbars/index.md
index 1a292aed78..2b66d4a2a0 100644
--- a/files/fr/web/api/window/scrollbars/index.md
+++ b/files/fr/web/api/window/scrollbars/index.md
@@ -9,65 +9,48 @@ tags:
   - Window
 translation_of: Web/API/Window/scrollbars
 ---
-<div>{{APIRef()}}</div>
+{{APIRef()}}
 
-<p>La propriété <code><strong>Window.scrollbars</strong></code> renvoie l'objet <code>scrollbars</code>, dont la visibilité peut être vérifié.</p>
+La propriété **`Window.scrollbars`** renvoie l'objet `scrollbars`, dont la visibilité peut être vérifié.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>objRef</em> = window.scrollbars
-</pre>
+    objRef = window.scrollbars
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>L'exemple HTML complet suivant montre comment la propriété <code>visible</code> de l'objet scrollbars est utilisée.</p>
+L'exemple HTML complet suivant montre comment la propriété `visible` de l'objet scrollbars est utilisée.
 
-<pre class="brush: html">&lt;!doctype html&gt;
-&lt;html&gt;
-&lt;head&gt;
-  &lt;title&gt;Divers Tests DOM&lt;/title&gt;
-  &lt;script&gt;
+```html
+<!doctype html>
+<html>
+<head>
+  <title>Divers Tests DOM</title>
+  <script>
     let visibleScrollbars = window.scrollbars.visible;
-  &lt;/script&gt;
-&lt;/head&gt;
-&lt;body&gt;
-  &lt;p&gt;Divers Tests DOM&lt;/p&gt;
-&lt;/body&gt;
-&lt;/html&gt;
-</pre>
+  </script>
+</head>
+<body>
+  <p>Divers Tests DOM</p>
+</body>
+</html>
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'browsers.html#dom-window-scrollbars', 'Window.scrollbars')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-window-scrollbars', 'Window.scrollbars')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                        | Statut                           | Commentaire |
+| -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- |
+| {{SpecName('HTML WHATWG', 'browsers.html#dom-window-scrollbars', 'Window.scrollbars')}} | {{Spec2('HTML WHATWG')}} |             |
+| {{SpecName('HTML5 W3C', 'browsers.html#dom-window-scrollbars', 'Window.scrollbars')}}     | {{Spec2('HTML5 W3C')}}     |             |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Window.scrollbars")}}</p>
+{{Compat("api.Window.scrollbars")}}
 
-<h2 id="Voir_également">Voir également</h2>
+## Voir également
 
-<ul>
- <li>{{domxref("window.locationbar")}}</li>
- <li>{{domxref("window.menubar")}}</li>
- <li>{{domxref("window.personalbar")}}</li>
- <li>{{domxref("window.statusbar")}}</li>
- <li>{{domxref("window.toolbar")}}</li>
-</ul>
+- {{domxref("window.locationbar")}}
+- {{domxref("window.menubar")}}
+- {{domxref("window.personalbar")}}
+- {{domxref("window.statusbar")}}
+- {{domxref("window.toolbar")}}
diff --git a/files/fr/web/api/window/scrollby/index.md b/files/fr/web/api/window/scrollby/index.md
index 8713385ca8..8b76b7d25c 100644
--- a/files/fr/web/api/window/scrollby/index.md
+++ b/files/fr/web/api/window/scrollby/index.md
@@ -8,49 +8,32 @@ tags:
   - Référence(2)
 translation_of: Web/API/Window/scrollBy
 ---
-<p>{{ APIRef() }}</p>
+{{ APIRef() }}
 
-<p>Fait défiler le document dans la fenêtre du nombre de pixels passé en paramètre.</p>
+Fait défiler le document dans la fenêtre du nombre de pixels passé en paramètre.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="eval">window.scrollBy(<em>X</em>, <em>Y</em>);
-</pre>
+    window.scrollBy(X, Y);
 
-<h3 id="Parameters">Paramètres</h3>
+### Paramètres
 
-<ul>
- <li><code>X</code> est le nombre en pixels pour le défilement horizontal.</li>
- <li><code>Y</code> est le nombre en pixels pour le défilement vertical.</li>
-</ul>
+- `X` est le nombre en pixels pour le défilement horizontal.
+- `Y` est le nombre en pixels pour le défilement vertical.
 
-<p>Des coordonnées positives feront défiler à droite et vers le bas de la page. Des coordonnées négatives feront défiler à gauche et vers le haut de la page. </p>
+Des coordonnées positives feront défiler à droite et vers le bas de la page. Des coordonnées négatives feront défiler à gauche et vers le haut de la page.
 
-<h2 id="Example">Exemples</h2>
+## Exemples
 
-<pre class="eval">// fait défiler d'une page
-window.scrollBy(0, window.innerHeight);
-</pre>
+    // fait défiler d'une page
+    window.scrollBy(0, window.innerHeight);
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p><a href="/fr/docs/DOM/Window.scrollBy">window.scrollBy</a> fait défiler en fonction d'un nombre précis, alors que <a href="/fr/docs/DOM/Window.scroll">window.scroll</a> fait défiler vers une position absolue dans le document. Voir aussi <a href="/fr/docs/DOM/Window.scrollByLines">window.scrollByLines</a>, <a href="/fr/docs/DOM/Window.scrollByPages">window.scrollByPages</a></p>
+[window.scrollBy](/fr/docs/DOM/Window.scrollBy) fait défiler en fonction d'un nombre précis, alors que [window.scroll](/fr/docs/DOM/Window.scroll) fait défiler vers une position absolue dans le document. Voir aussi [window.scrollByLines](/fr/docs/DOM/Window.scrollByLines), [window.scrollByPages](/fr/docs/DOM/Window.scrollByPages)
 
-<h2 id="Specification">Spécification</h2>
+## Spécification
 
-<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('CSSOM View', '#dom-window-scrollby', 'window.scrollBy()') }}</td>
-   <td>{{ Spec2('CSSOM View') }}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                    | Statut                           | Commentaire          |
+| ------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- |
+| {{ SpecName('CSSOM View', '#dom-window-scrollby', 'window.scrollBy()') }} | {{ Spec2('CSSOM View') }} | Définition initiale. |
diff --git a/files/fr/web/api/window/scrollbylines/index.md b/files/fr/web/api/window/scrollbylines/index.md
index eac61c0802..cff696ecf6 100644
--- a/files/fr/web/api/window/scrollbylines/index.md
+++ b/files/fr/web/api/window/scrollbylines/index.md
@@ -10,40 +10,37 @@ tags:
   - Window
 translation_of: Web/API/Window/scrollByLines
 ---
-<div>{{ ApiRef() }}</div>
+{{ ApiRef() }}
 
-<p>{{Non-standard_header}}</p>
+{{Non-standard_header}}
 
-<p>Fait défiler le document du nombre de lignes spécifié.</p>
+Fait défiler le document du nombre de lignes spécifié.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">window.scrollByLines(<var>lignes</var>)
-</pre>
+    window.scrollByLines(lignes)
 
-<h2 id="Parameters">Paramètres</h2>
+## Paramètres
 
-<ul>
- <li><code>lignes</code> est le nombre de lignes à faire défiler.</li>
- <li><code>lignes</code> peut être un entier positif ou négatif.</li>
-</ul>
+- `lignes` est le nombre de lignes à faire défiler.
+- `lignes` peut être un entier positif ou négatif.
 
-<h2 id="Example">Exemples</h2>
+## Exemples
 
-<pre class="brush:html">&lt;!-- Faire défiler le document de 5 lignes vers le bas. --&gt;
-&lt;button onclick="scrollByLines(5);"&gt;5 lignes vers le bas&lt;/button&gt;
-</pre>
+```html
+<!-- Faire défiler le document de 5 lignes vers le bas. -->
+<button onclick="scrollByLines(5);">5 lignes vers le bas</button>
+```
 
-<pre class="brush:html">&lt;!-- Faire défiler le document de 5 lignes vers le haut. --&gt;
-&lt;button onclick="scrollByLines(-5);"&gt;5 lignes vers le haut&lt;/button&gt;
-</pre>
+```html
+<!-- Faire défiler le document de 5 lignes vers le haut. -->
+<button onclick="scrollByLines(-5);">5 lignes vers le haut</button>
+```
 
-<h2 id="Specification">Spécification</h2>
+## Spécification
 
-<p>Ne fait partie d'aucune spécification.</p>
+Ne fait partie d'aucune spécification.
 
-<h2 id="See_also">See also</h2>
+## See also
 
-<ul>
- <li>{{domxref("window.scrollBy")}}, {{domxref("window.scrollByPages")}}</li>
-</ul>
+- {{domxref("window.scrollBy")}}, {{domxref("window.scrollByPages")}}
diff --git a/files/fr/web/api/window/scrollbypages/index.md b/files/fr/web/api/window/scrollbypages/index.md
index 8419d43545..947dccb77e 100644
--- a/files/fr/web/api/window/scrollbypages/index.md
+++ b/files/fr/web/api/window/scrollbypages/index.md
@@ -8,35 +8,31 @@ tags:
   - Méthode
 translation_of: Web/API/Window/scrollByPages
 ---
-<p>{{ ApiRef() }}{{Non-standard_header}}</p>
+{{ ApiRef() }}{{Non-standard_header}}
 
-<p>Fait défiler le document du nombre de pages spécifié.</p>
+Fait défiler le document du nombre de pages spécifié.
 
-<h3 id="Syntax">Syntaxe</h3>
+### Syntaxe
 
-<pre class="eval">window.scrollByPages(<em>pages</em>)
-</pre>
+    window.scrollByPages(pages)
 
-<h3 id="Parameters">Paramètres</h3>
+### Paramètres
 
-<ul>
- <li><code>pages</code> est le nombre de pages à faire défiler.</li>
- <li><code>pages</code> peut être un entier positif ou négatif.</li>
-</ul>
+- `pages` est le nombre de pages à faire défiler.
+- `pages` peut être un entier positif ou négatif.
 
-<h3 id="Example">Exemples</h3>
+### Exemples
 
-<pre>// fait défiler le document d'une page vers le bas
-window.scrollByPages(1);
+    // fait défiler le document d'une page vers le bas
+    window.scrollByPages(1);
 
-// fait défiler le document d'une page vers le haut
-window.scrollByPages(-1);
-</pre>
+    // fait défiler le document d'une page vers le haut
+    window.scrollByPages(-1);
 
-<h3 id="Notes">Notes</h3>
+### Notes
 
-<p>Voir aussi <a href="/fr/docs/Web/API/Window/scrollByPages">window.scrollBy</a>, <a href="/fr/docs/Web/API/Window/scrollByPages">window.scrollByLines</a>, <a href="/fr/docs/Web/API/Window/scroll">window.scroll</a>, <a href="fr/docs/Web/API/Window/scrollTo">window.scrollTo</a>.</p>
+Voir aussi [window.scrollBy](/fr/docs/Web/API/Window/scrollByPages), [window.scrollByLines](/fr/docs/Web/API/Window/scrollByPages), [window.scroll](/fr/docs/Web/API/Window/scroll), [window.scrollTo](fr/docs/Web/API/Window/scrollTo).
 
-<h3 id="Specification">Spécification</h3>
+### Spécification
 
-<p>DOM Niveau 0. Ne fait pas partie de la spécification.</p>
\ No newline at end of file
+DOM Niveau 0. Ne fait pas partie de la spécification.
diff --git a/files/fr/web/api/window/scrollto/index.md b/files/fr/web/api/window/scrollto/index.md
index 753059d1c9..ff56d9f269 100644
--- a/files/fr/web/api/window/scrollto/index.md
+++ b/files/fr/web/api/window/scrollto/index.md
@@ -6,33 +6,29 @@ tags:
   - DOM_0
 translation_of: Web/API/Window/scrollTo
 ---
-<p>{{ ApiRef() }}</p>
+{{ ApiRef() }}
 
-<h3 id="R.C3.A9sum.C3.A9">Résumé</h3>
+### Résumé
 
-<p>Fait défiler le document jusqu'à un jeu de coordonnées particulier.</p>
+Fait défiler le document jusqu'à un jeu de coordonnées particulier.
 
-<h3 id="Syntaxe">Syntaxe</h3>
+### Syntaxe
 
-<pre class="eval">window.scrollTo(<em>coord-x</em>,<em>coord-y</em>);
-</pre>
+    window.scrollTo(coord-x,coord-y);
 
-<h3 id="Param.C3.A8tres">Paramètres</h3>
+### Paramètres
 
-<ul>
- <li><code>coord-x</code> est le pixel le long de l'axe horizontal du document qui doit être affiché en haut à gauche.</li>
- <li><code>coord-y</code> est le pixel le long de l'axe vertical du document qui doit être affiché en haut à gauche.</li>
-</ul>
+- `coord-x` est le pixel le long de l'axe horizontal du document qui doit être affiché en haut à gauche.
+- `coord-y` est le pixel le long de l'axe vertical du document qui doit être affiché en haut à gauche.
 
-<h3 id="Exemple">Exemple</h3>
+### Exemple
 
-<pre>window.scrollTo(0, 1000);
-</pre>
+    window.scrollTo(0, 1000);
 
-<h3 id="Notes">Notes</h3>
+### Notes
 
-<p>Cette fonction est fonctionnellement identique à <a href="scroll">window.scroll</a>. Pour un défilement relatif, consultez <a href="scrollBy">window.scrollBy</a>, <a href="scrollByLines">window.scrollByLines</a> et <a href="scrollByPages">window.scrollByPages</a>.</p>
+Cette fonction est fonctionnellement identique à [window.scroll](scroll). Pour un défilement relatif, consultez [window.scrollBy](scrollBy), [window.scrollByLines](scrollByLines) et [window.scrollByPages](scrollByPages).
 
-<h3 id="Sp.C3.A9cification">Spécification</h3>
+### Spécification
 
-<p>{{ DOM0() }}</p>
+{{ DOM0() }}
diff --git a/files/fr/web/api/window/scrolly/index.md b/files/fr/web/api/window/scrolly/index.md
index 6d556c1eae..7bb0be2506 100644
--- a/files/fr/web/api/window/scrolly/index.md
+++ b/files/fr/web/api/window/scrolly/index.md
@@ -3,69 +3,55 @@ title: Window.scrollY
 slug: Web/API/Window/scrollY
 translation_of: Web/API/Window/scrollY
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}
 
-<p>La propriété <code><strong>scrollY</strong></code> de l'objet {{domxref("Window")}} est une propriété en lecture seule. Elle retourne le nombre de pixels la page actuellement défilés verticalement. Dans les navigateurs modernes, cette valeur est précise au sous-pixel près. Ainsi, la valeur retournée n'est pas forcement un entier.</p>
+La propriété **`scrollY`** de l'objet {{domxref("Window")}} est une propriété en lecture seule. Elle retourne le nombre de pixels la page actuellement défilés verticalement. Dans les navigateurs modernes, cette valeur est précise au sous-pixel près. Ainsi, la valeur retournée n'est pas forcement un entier.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var y = window.scrollY;</pre>
+    var y = window.scrollY;
 
-<ul>
- <li><code>y</code> est le nombre de pixels verticaux défilés.</li>
-</ul>
+- `y` est le nombre de pixels verticaux défilés.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush:js">// make sure and go down to the second page
+```js
+// make sure and go down to the second page
 if (window.scrollY) {
   window.scroll(0, 0);  // reset the scroll position to the top left of the document.
 }
 
-window.scrollByPages(1);</pre>
+window.scrollByPages(1);
+```
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p>Utilisez cette propriété pour être sûre que le document n'as pas été défilé verticalement si vous utilisez les fonctions de défilement tels que {{domxref("window.scrollBy")}}, {{domxref("window.scrollByLines")}}, ou {{domxref("window.scrollByPages")}}.</p>
+Utilisez cette propriété pour être sûre que le document n'as pas été défilé verticalement si vous utilisez les fonctions de défilement tels que {{domxref("window.scrollBy")}}, {{domxref("window.scrollByLines")}}, ou {{domxref("window.scrollByPages")}}.
 
-<p>La propriété <code>pageYOffset</code> est un alias de la propriété <code>scrollY</code>:</p>
+La propriété `pageYOffset` est un alias de la propriété `scrollY`:
 
-<pre>window.pageYOffset == window.scrollY; // toujours vrai</pre>
+    window.pageYOffset == window.scrollY; // toujours vrai
 
-<p>Pour une compatibilité multi-navigateur, utilisez <code>window.pageYOffset</code> à la place de <code>window.scrollY</code>. <strong>En outre</strong>, les anciennes versions d'Internet Explorer (&lt; 9) ne supportent pas non plus la propriété et doit-être utilisé à l'aide d'autres propriétés qui ne sont pas standards. Un exemple entièrement compatible :</p>
+Pour une compatibilité multi-navigateur, utilisez `window.pageYOffset` à la place de `window.scrollY`. **En outre**, les anciennes versions d'Internet Explorer (< 9) ne supportent pas non plus la propriété et doit-être utilisé à l'aide d'autres propriétés qui ne sont pas standards. Un exemple entièrement compatible :
 
-<pre class="brush:js">var supportPageOffset = window.pageXOffset !== undefined;
+```js
+var supportPageOffset = window.pageXOffset !== undefined;
 var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");
 
 var x = supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft;
 var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;
-</pre>
-
-<h2 id="Specification">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Commentaire(s)</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{ SpecName('CSSOM View', '#dom-window-scrolly', 'window.scrollY') }}</td>
-   <td>{{ Spec2('CSSOM View') }}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.Window.scrollY")}}</p>
-
-<h2 id="See_also">Voir aussi</h2>
-
-<ul>
-  <li>{{domxref("window.scrollX")}}</li>
-</ul>
+```
+
+## Spécifications
+
+| Spécification                                                                                | Status                           | Commentaire(s) |
+| -------------------------------------------------------------------------------------------- | -------------------------------- | -------------- |
+| {{ SpecName('CSSOM View', '#dom-window-scrolly', 'window.scrollY') }} | {{ Spec2('CSSOM View') }} |                |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Window.scrollY")}}
+
+## Voir aussi
+
+- {{domxref("window.scrollX")}}
diff --git a/files/fr/web/api/window/sessionstorage/index.md b/files/fr/web/api/window/sessionstorage/index.md
index 64a4e4cc27..87418645e6 100644
--- a/files/fr/web/api/window/sessionstorage/index.md
+++ b/files/fr/web/api/window/sessionstorage/index.md
@@ -5,40 +5,44 @@ tags:
   - API
 translation_of: Web/API/Window/sessionStorage
 ---
-<p>{{APIRef}}</p>
+{{APIRef}}
 
-<p>La propriété <code>sessionStorage</code> permet d'utiliser un objet {{domxref("Storage")}} valable pour la session de navigation en cours et pour les pages du même domaine que la page actuelle. L'objet global <code>sessionStorage</code> est similaire à {{domxref("Window.localStorage")}}, à la différence que les données enregistrées dans <code>sessionStorage</code> ont une durée vie limitée et expirent à la fin de la session de navigation actuelle. Une session de navigation dure aussi longtemps que le navigateur est ouvert et s'étend sur plusieurs chargements, rechargements et restaurations de pages. En revanche, une session de navigation n'est valable que pour le contexte de navigation actuel, c'est-à-dire que le fait d'<strong>ouvrir une page dans un nouvel onglet ou dans une nouvelle fenêtre provoquera l'initialisation d'une nouvelle session de navigation</strong>, ce qui diffère du comportement des sessions utilisant des cookies.</p>
+La propriété `sessionStorage` permet d'utiliser un objet {{domxref("Storage")}} valable pour la session de navigation en cours et pour les pages du même domaine que la page actuelle. L'objet global `sessionStorage` est similaire à {{domxref("Window.localStorage")}}, à la différence que les données enregistrées dans `sessionStorage` ont une durée vie limitée et expirent à la fin de la session de navigation actuelle. Une session de navigation dure aussi longtemps que le navigateur est ouvert et s'étend sur plusieurs chargements, rechargements et restaurations de pages. En revanche, une session de navigation n'est valable que pour le contexte de navigation actuel, c'est-à-dire que le fait d'**ouvrir une page dans un nouvel onglet ou dans une nouvelle fenêtre provoquera l'initialisation d'une nouvelle session de navigation**, ce qui diffère du comportement des sessions utilisant des cookies.
 
-<p>Il est à noter que les données stockées dans sessionStorage ou localStorage sont <strong>spécifiques au protocole de la page.</strong></p>
+Il est à noter que les données stockées dans sessionStorage ou localStorage sont **spécifiques au protocole de la page.**
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">// Enregistrer des données dans sessionStorage
+```js
+// Enregistrer des données dans sessionStorage
 sessionStorage.setItem('clé', 'valeur');
 
 // Récupérer des données depuis sessionStorage
-<code>var data = sessionStorage.getItem('clé');
+var data = sessionStorage.getItem('clé');
 
 // Supprimer des données de sessionStorage
 sessionStorage.removeItem('clé');
 
 // Supprimer toutes les données de sessionStorage
-sessionStorage.clear();</code>
-</pre>
+sessionStorage.clear();
+```
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>Un objet {{domxref("Storage")}}.</p>
+Un objet {{domxref("Storage")}}.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>L'exemple de code suivant accède à l'objet de stockage de session associé au domaine actuel et y ajoute une donnée à l'aide de {{domxref("Storage.setItem()")}}.</p>
+L'exemple de code suivant accède à l'objet de stockage de session associé au domaine actuel et y ajoute une donnée à l'aide de {{domxref("Storage.setItem()")}}.
 
-<pre class="brush: js">sessionStorage.setItem('myCat', 'Tom');</pre>
+```js
+sessionStorage.setItem('myCat', 'Tom');
+```
 
-<p>L'exemple suivant sauvegarde automatiquement le contenu d'un champ textuel. Si la page est accidentellement rafraîchie, le contenu du champ est restauré de sorte qu'aucune saisie n'est perdue.</p>
+L'exemple suivant sauvegarde automatiquement le contenu d'un champ textuel. Si la page est accidentellement rafraîchie, le contenu du champ est restauré de sorte qu'aucune saisie n'est perdue.
 
-<pre class="brush: js">// Récupération du champ à enregistrer
+```js
+// Récupération du champ à enregistrer
 var champ = document.getElementById("champ");
 
 // Vérification de l'existence d'une donnée enregistrée auparavant
@@ -52,38 +56,24 @@ if (sessionStorage.getItem("autosave")) {
 champ.addEventListener("change", function() {
   // Enregistrement de la saisie utilisateur dans le stockage de session
   sessionStorage.setItem("autosave", champ.value);
-});</pre>
+});
+```
 
-<div class="note">
-<p><strong>Note :</strong> Veuillez vous référer à l'article <a href="/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Utilisation de l'API Web Storage</a> pour des exemples plus complets.</p>
-</div>
+> **Note :** Veuillez vous référer à l'article [Utilisation de l'API Web Storage](/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API) pour des exemples plus complets.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML WHATWG", "webstorage.html#dom-sessionstorage", "sessionStorage")}}</td>
-   <td>{{Spec2("HTML WHATWG")}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                    | Statut                           | Commentaire |
+| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- |
+| {{SpecName("HTML WHATWG", "webstorage.html#dom-sessionstorage", "sessionStorage")}} | {{Spec2("HTML WHATWG")}} |             |
 
-<h2 id="Compatilibité_des_navigateurs">Compatilibité des navigateurs</h2>
+## Compatilibité des navigateurs
 
-<p>{{Compat("api.Window.sessionStorage")}}</p>
+{{Compat("api.Window.sessionStorage")}}
 
-<p>Chaque navigateur attribue des capacités de stockage limitées pour <code>localStorage</code> et <code>sessionStorage</code>. Vous en trouverez certaines dans ce <a href="http://dev-test.nemikor.com/web-storage/support-test/">récapitulatif de tests des capacités de stockage attribuées en fonction du navigateur</a>.</p>
+Chaque navigateur attribue des capacités de stockage limitées pour `localStorage` et `sessionStorage`. Vous en trouverez certaines dans ce [récapitulatif de tests des capacités de stockage attribuées en fonction du navigateur](http://dev-test.nemikor.com/web-storage/support-test/).
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Utilisation de l'API Web Storage</a></li>
- <li>{{domxref("Window.localStorage")}}</li>
-</ul>
+- [Utilisation de l'API Web Storage](/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API)
+- {{domxref("Window.localStorage")}}
diff --git a/files/fr/web/api/window/showmodaldialog/index.md b/files/fr/web/api/window/showmodaldialog/index.md
index 3d86815e6a..add3c42855 100644
--- a/files/fr/web/api/window/showmodaldialog/index.md
+++ b/files/fr/web/api/window/showmodaldialog/index.md
@@ -5,83 +5,51 @@ tags:
   - Obsolete
 translation_of: Web/API/Window/showModalDialog
 ---
-<p>{{ ApiRef() }}</p>
-
-<h3 id="R.C3.A9sum.C3.A9">Résumé</h3>
-
-<p>Crée et affiche un dialogue modal contenant un document HTML spécifié.</p>
-
-<div class="warning">
-<p><strong>Attention :</strong> Cette fonction est obsolète.</p>
-
-<p>Le support a été arrêté avec la sortie de <a href="http://blog.chromium.org/2014/07/disabling-showmodaldialog.html">Chrome 37</a>. Il y possibilité de la laisser active juqu'en Mai 2015 en configurant les paramètres de politique d'entreprise, plus de détails : <a href="http://www.chromium.org/administrators/policy-list-3#EnableDeprecatedWebPlatformFeatures">ici</a>.</p>
-
-<p>Mozilla a annoncé que le support de cette méthode sera supprimé ({{bug(981796)}}). Ce changement ne sera pas effectif avant Firefox 39, planifié pour les alentours de mi-juin 2015. Pour les entreprises, il est possible d'utiliser le build ESR 38 qui supportera la méthode jusqu'en milieu d'année 2016.</p>
-</div>
-
-<h3 id="Syntaxe">Syntaxe</h3>
-
-<pre class="eval"><em>retour</em> = window.showModalDialog(<em>uri</em>[,<em>arguments</em>][,<em>options</em>]);
-</pre>
-
-<p>où</p>
-
-<ul>
- <li><code>retour</code> est un variant, indiquant la propriété returnValue telle que définie par la fenêtre du document spécifié par <code>uri</code>.</li>
- <li><code>uri</code> est l'URI du document à afficher dans la boîte de dialogue.</li>
- <li><code>arguments</code> est un variant optionnel contenant les valeurs à passer à la boîte de dialogue ; celles-ci sont disponibles dans la propriété <code><a href="fr/DOM/window.dialogArguments">window.dialogArguments</a></code> de son objet <code><a href="fr/DOM/window">window</a></code>.</li>
- <li><code>options</code> est une chaîne optionnelle spécifiant les décorations de la fenêtre de dialogue, avec une ou plusieurs valeurs séparées par des points-virgules :</li>
-</ul>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th>Syntaxe</th>
-   <th>Description</th>
-  </tr>
-  <tr>
-   <td><code>center: {on | off | yes | no | 1 | 0 }</code></td>
-   <td>Si cette valeur est <code>on</code>, <code>yes</code> ou 1, la fenêtre de dialogue est centrée sur le bureau ; autrement elle est cachée. La valeur par défaut est <code>yes</code>.</td>
-  </tr>
-  <tr>
-   <td><code>dialogheight:<em>height</em> </code></td>
-   <td>Spécifie la hauteur de la boîte de dialogue ; par défaut, la taille est spécifiée en pixels.</td>
-  </tr>
-  <tr>
-   <td><code>dialogleft:<em>left</em> </code></td>
-   <td>Spécifie la position horizontale de la boîte de dialogue par rapport au coin supérieur gauche du bureau.</td>
-  </tr>
-  <tr>
-   <td><code>dialogwidth:<em>width</em> </code></td>
-   <td>Spécifie la largeur de la boîte de dialogue ; par défaut, la taille est spécifiée en pixels.</td>
-  </tr>
-  <tr>
-   <td><code>dialogtop:<em>top</em> </code></td>
-   <td>Spécifie la position verticale de la boîte de dialogue par rapport au coin supérieur gauche du bureau.</td>
-  </tr>
-  <tr>
-   <td><code>resizable: {on | off | yes | no | 1 | 0 }</code></td>
-   <td>Si cette valeur est <code>on</code>, <code>yes</code> ou 1, la fenêtre de dialogue peut être redimensionnée par l'utilisateur ; autrement sa taille est fixe. La valeur par défaut est <code>no</code>.</td>
-  </tr>
-  <tr>
-   <td><code>scroll: {on | off | yes | no | 1 | 0 }</code></td>
-   <td>Si cette valeur est <code>on</code>, <code>yes</code> ou 1, la fenêtre de dialogue a des barres de défilement ; autrement elle n'en a pas. La valeur par défaut est <code>no</code>.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{ Note("Firefox n\'implémente pas les paramètres <code>dialogHide</code>, <code>edge</code>, <code>status</code> ou <code>unadorned</code>.") }}</p>
-
-<h3 id="Compatibilit.C3.A9">Compatibilité</h3>
-
-<p>Introduit par Microsoft Internet Explorer 4. Support ajouté à Firefox dans Firefox 3.</p>
-
-<h3 id="Exemples">Exemples</h3>
-
-<p><a href="/samples/domref/showModalDialog.html">Essayer <code>showModalDialog()</code></a>.</p>
-
-<h3 id="Notes">Notes</h3>
-
-<h3 id="Sp.C3.A9cification">Spécification</h3>
-
-<p>Microsoft MSDN : <a href="http://msdn2.microsoft.com/en-us/library/ms536759.aspx">showModalDialog</a></p>
+{{ ApiRef() }}
+
+### Résumé
+
+Crée et affiche un dialogue modal contenant un document HTML spécifié.
+
+> **Attention :** Cette fonction est obsolète.
+>
+> Le support a été arrêté avec la sortie de [Chrome 37](http://blog.chromium.org/2014/07/disabling-showmodaldialog.html). Il y possibilité de la laisser active juqu'en Mai 2015 en configurant les paramètres de politique d'entreprise, plus de détails : [ici](http://www.chromium.org/administrators/policy-list-3#EnableDeprecatedWebPlatformFeatures).
+>
+> Mozilla a annoncé que le support de cette méthode sera supprimé ({{bug(981796)}}). Ce changement ne sera pas effectif avant Firefox 39, planifié pour les alentours de mi-juin 2015. Pour les entreprises, il est possible d'utiliser le build ESR 38 qui supportera la méthode jusqu'en milieu d'année 2016.
+
+### Syntaxe
+
+    retour = window.showModalDialog(uri[,arguments][,options]);
+
+où
+
+- `retour` est un variant, indiquant la propriété returnValue telle que définie par la fenêtre du document spécifié par `uri`.
+- `uri` est l'URI du document à afficher dans la boîte de dialogue.
+- `arguments` est un variant optionnel contenant les valeurs à passer à la boîte de dialogue ; celles-ci sont disponibles dans la propriété [`window.dialogArguments`](fr/DOM/window.dialogArguments) de son objet [`window`](fr/DOM/window).
+- `options` est une chaîne optionnelle spécifiant les décorations de la fenêtre de dialogue, avec une ou plusieurs valeurs séparées par des points-virgules :
+
+| Syntaxe                                          | Description                                                                                                                                                            |
+| ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `center: {on \| off \| yes \| no \| 1 \| 0 }`    | Si cette valeur est `on`, `yes` ou 1, la fenêtre de dialogue est centrée sur le bureau ; autrement elle est cachée. La valeur par défaut est `yes`.                    |
+| `dialogheight:height`                            | Spécifie la hauteur de la boîte de dialogue ; par défaut, la taille est spécifiée en pixels.                                                                           |
+| `dialogleft:left`                                | Spécifie la position horizontale de la boîte de dialogue par rapport au coin supérieur gauche du bureau.                                                               |
+| `dialogwidth:width`                              | Spécifie la largeur de la boîte de dialogue ; par défaut, la taille est spécifiée en pixels.                                                                           |
+| `dialogtop:top`                                  | Spécifie la position verticale de la boîte de dialogue par rapport au coin supérieur gauche du bureau.                                                                 |
+| `resizable: {on \| off \| yes \| no \| 1 \| 0 }` | Si cette valeur est `on`, `yes` ou 1, la fenêtre de dialogue peut être redimensionnée par l'utilisateur ; autrement sa taille est fixe. La valeur par défaut est `no`. |
+| `scroll: {on \| off \| yes \| no \| 1 \| 0 }`    | Si cette valeur est `on`, `yes` ou 1, la fenêtre de dialogue a des barres de défilement ; autrement elle n'en a pas. La valeur par défaut est `no`.                    |
+
+{{ Note("Firefox n\'implémente pas les paramètres <code>dialogHide</code>, <code>edge</code>, <code>status</code> ou <code>unadorned</code>.") }}
+
+### Compatibilité
+
+Introduit par Microsoft Internet Explorer 4. Support ajouté à Firefox dans Firefox 3.
+
+### Exemples
+
+[Essayer `showModalDialog()`](/samples/domref/showModalDialog.html).
+
+### Notes
+
+### Spécification
+
+Microsoft MSDN : [showModalDialog](http://msdn2.microsoft.com/en-us/library/ms536759.aspx)
diff --git a/files/fr/web/api/window/stop/index.md b/files/fr/web/api/window/stop/index.md
index 491876c7b8..9d15c8e21e 100644
--- a/files/fr/web/api/window/stop/index.md
+++ b/files/fr/web/api/window/stop/index.md
@@ -11,44 +11,29 @@ tags:
   - stop
 translation_of: Web/API/Window/stop
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}
 
-<p><strong><code>window.stop()</code></strong> arrête le chargment des ressources supplémentaires dans le contexte de navigation actuel, ce qui équivaut au bouton d'arrêt dans le navigateur.</p>
+**`window.stop()`** arrête le chargment des ressources supplémentaires dans le contexte de navigation actuel, ce qui équivaut au bouton d'arrêt dans le navigateur.
 
-<p>En raison de la manière dont les scripts sont exécutés, cette méthode ne peut pas interrompre le chargement de son document parent, mais elle arrêtera ses images, nouvelles fenêtres et autres objets en cours de chargement.</p>
+En raison de la manière dont les scripts sont exécutés, cette méthode ne peut pas interrompre le chargement de son document parent, mais elle arrêtera ses images, nouvelles fenêtres et autres objets en cours de chargement.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">window.stop()
-</pre>
+    window.stop()
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush:js">window.stop();
-</pre>
+```js
+window.stop();
+```
 
-<h2 id="Specification">Spécification</h2>
+## Spécification
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécifications</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG','browsers.html#dom-window-stop','Window.stop()')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-window-stop', 'Window.stop')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+| Spécifications                                                                                       | Statut                           | Commentaires |
+| ---------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ |
+| {{SpecName('HTML WHATWG','browsers.html#dom-window-stop','Window.stop()')}} | {{Spec2('HTML WHATWG')}} |              |
+| {{SpecName('HTML5 W3C', 'browsers.html#dom-window-stop', 'Window.stop')}}     | {{Spec2('HTML5 W3C')}}     |              |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Window.stop")}}</p>
+{{Compat("api.Window.stop")}}
diff --git a/files/fr/web/api/window/storage_event/index.md b/files/fr/web/api/window/storage_event/index.md
index 8bfbc393b3..57d7c74f36 100644
--- a/files/fr/web/api/window/storage_event/index.md
+++ b/files/fr/web/api/window/storage_event/index.md
@@ -10,74 +10,67 @@ tags:
   - Window
 translation_of: Web/API/Window/storage_event
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}
 
-<p>L'événement <strong><code>storage</code></strong> de l'interface {{domxref("Window")}} se déclenche lorsqu'une de stockage (<code>localStorage</code>) a été modifiée dans le contexte d'un autre document.</p>
+L'événement **`storage`** de l'interface {{domxref("Window")}} se déclenche lorsqu'une de stockage (`localStorage`) a été modifiée dans le contexte d'un autre document.
 
 <table class="properties">
- <thead>
- </thead>
- <tbody>
-  <tr>
-   <th>Bulles</th>
-   <td>Non</td>
-  </tr>
-  <tr>
-   <th>Annulable</th>
-   <td>Non</td>
-  </tr>
-  <tr>
-   <th>Interface</th>
-   <td>{{domxref("StorageEvent")}}</td>
-  </tr>
-  <tr>
-   <th>Propriété de gestionnaire d'événements</th>
-   <td>{{domxref("WindowEventHandlers.onstorage", "onstorage")}}</td>
-  </tr>
- </tbody>
+  <thead></thead>
+  <tbody>
+    <tr>
+      <th>Bulles</th>
+      <td>Non</td>
+    </tr>
+    <tr>
+      <th>Annulable</th>
+      <td>Non</td>
+    </tr>
+    <tr>
+      <th>Interface</th>
+      <td>{{domxref("StorageEvent")}}</td>
+    </tr>
+    <tr>
+      <th>Propriété de gestionnaire d'événements</th>
+      <td>
+        {{domxref("WindowEventHandlers.onstorage", "onstorage")}}
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Consignez l'élément <code>sampleList</code> sur la console lorsque l'événement <code>storage</code> se déclenche :</p>
+Consignez l'élément `sampleList` sur la console lorsque l'événement `storage` se déclenche :
 
-<pre class="brush: js">window.addEventListener('storage', () =&gt; {
+```js
+window.addEventListener('storage', () => {
   // Lorsque le stockage local change, vider la liste sur
   // la console.
   console.log(JSON.parse(window.localStorage.getItem('sampleList')));
-});</pre>
+});
+```
 
-<p>La même action peut être réalisée ) l'aide de la propriété du gestionnaire d'événements <code><a href="/en-US/docs/Web/API/WindowEventHandlers/onstorage">onstorage</a></code> :</p>
+La même action peut être réalisée ) l'aide de la propriété du gestionnaire d'événements [`onstorage`](/en-US/docs/Web/API/WindowEventHandlers/onstorage) :
 
-<pre class="brush: js">window.onstorage = () =&gt; {
+```js
+window.onstorage = () => {
   // Lorsque le stockage local change, vider la liste dans
   // la console.
   console.log(JSON.parse(window.localStorage.getItem('sampleList')));
 };
-</pre>
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'indices.html#event-storage', 'storage')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                | Statut                           |
+| -------------------------------------------------------------------------------------------- | -------------------------------- |
+| {{SpecName('HTML WHATWG', 'indices.html#event-storage', 'storage')}} | {{Spec2('HTML WHATWG')}} |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Window.storage_event")}}</p>
+{{Compat("api.Window.storage_event")}}
 
-<h2 id="Voir_également">Voir également</h2>
+## Voir également
 
-<ul>
- <li><a href="/en-US/docs/Web/API/Web_Storage_API">Web Storage API</a></li>
- <li><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a></li>
-</ul>
+- [Web Storage API](/en-US/docs/Web/API/Web_Storage_API)
+- [Using the Web Storage API](/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API)
diff --git a/files/fr/web/api/window/top/index.md b/files/fr/web/api/window/top/index.md
index 8fa533e6f9..c0c2c897af 100644
--- a/files/fr/web/api/window/top/index.md
+++ b/files/fr/web/api/window/top/index.md
@@ -10,45 +10,27 @@ tags:
   - Window
 translation_of: Web/API/Window/top
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}
 
-<p>Renvoie une référence à la fenêtre la plus haute dans la hiérarchie des fenêtres</p>
+Renvoie une référence à la fenêtre la plus haute dans la hiérarchie des fenêtres
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">var <var>topWindow</var> = window.top;
-</pre>
+    var topWindow = window.top;
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p>Là où la propriété {{domxref("window.parent")}} renvoie le parent immédiat de la fenêtre courante, <code>window.top</code> renvoie la fenêtre la plus haute dans la hiérarchie des objets de fenêtre.</p>
+Là où la propriété {{domxref("window.parent")}} renvoie le parent immédiat de la fenêtre courante, `window.top` renvoie la fenêtre la plus haute dans la hiérarchie des objets de fenêtre.
 
-<p>Cette propriété est particulièrement utile lorsque vous avez affaire à une fenêtre qui se trouve dans une subframe d'un ou de plusieurs parents, et que vous souhaitez accéder au jeu de frameset de niveau supérieur.</p>
+Cette propriété est particulièrement utile lorsque vous avez affaire à une fenêtre qui se trouve dans une subframe d'un ou de plusieurs parents, et que vous souhaitez accéder au jeu de frameset de niveau supérieur.
 
-<h2 id="Spécifications">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('HTML WHATWG', 'browsers.html#dom-top', 'window.top')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-top', 'window.top')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Spécification initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                            | Statut                           | Commentaire            |
+| ---------------------------------------------------------------------------------------- | -------------------------------- | ---------------------- |
+| {{SpecName('HTML WHATWG', 'browsers.html#dom-top', 'window.top')}} | {{Spec2('HTML WHATWG')}} |                        |
+| {{SpecName('HTML5 W3C', 'browsers.html#dom-top', 'window.top')}}     | {{Spec2('HTML5 W3C')}}     | Spécification initiale |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Window.top")}}</p>
+{{Compat("api.Window.top")}}
diff --git a/files/fr/web/api/window/unload_event/index.md b/files/fr/web/api/window/unload_event/index.md
index aa14cc47c8..18ba0331c9 100644
--- a/files/fr/web/api/window/unload_event/index.md
+++ b/files/fr/web/api/window/unload_event/index.md
@@ -7,150 +7,116 @@ tags:
 translation_of: Web/API/Window/unload_event
 original_slug: Web/Events/unload
 ---
-<p>L'événement <code>unload</code> est appelé lorsque le document ou une ressource enfant est en train d'être déchargé.</p>
+L'événement `unload` est appelé lorsque le document ou une ressource enfant est en train d'être déchargé.
 
-<p>Il est lancé après :</p>
+Il est lancé après :
 
-<ol>
- <li><a href="/en-US/docs/Mozilla_event_reference/beforeunload">beforeunload</a> (événement annulable)</li>
- <li><a href="/en-US/docs/Mozilla_event_reference/pagehide">pagehide</a></li>
-</ol>
+1.  [beforeunload](/en-US/docs/Mozilla_event_reference/beforeunload) (événement annulable)
+2.  [pagehide](/en-US/docs/Mozilla_event_reference/pagehide)
 
-<p>Le document se trouve alors dans un état particulier :</p>
+Le document se trouve alors dans un état particulier :
 
-<ul>
- <li>Toutes les ressources existent encore (img, iframe etc.)</li>
- <li>Plus rien n'est encore visible par l'utilisateur final</li>
- <li>Les intéractions avec l'interface sont désactivées (<code>window.open</code>, <code>alert</code>, <code>confirm</code>, etc.)</li>
- <li>Aucune erreur ne viendra interrompre le flux de déchargement.</li>
-</ul>
+- Toutes les ressources existent encore (img, iframe etc.)
+- Plus rien n'est encore visible par l'utilisateur final
+- Les intéractions avec l'interface sont désactivées (`window.open`, `alert`, `confirm`, etc.)
+- Aucune erreur ne viendra interrompre le flux de déchargement.
 
-<p>Veuiller noter que l'événement <code>unload</code> suit l'ordre du document : le cadre parent est déchargé <em>avant</em> le <code>unload</code> d'un cadre enfant (voir l'exemple ci-dessous).</p>
+Veuiller noter que l'événement `unload` suit l'ordre du document : le cadre parent est déchargé *avant* le `unload` d'un cadre enfant (voir l'exemple ci-dessous).
 
 <table class="properties">
- <tbody>
-  <tr>
-   <td>Événement propageable</td>
-   <td>Non</td>
-  </tr>
-  <tr>
-   <td>Annulable</td>
-   <td>Non</td>
-  </tr>
-  <tr>
-   <td>Objets cibles</td>
-   <td>defaultView, Document, Element</td>
-  </tr>
-  <tr>
-   <td>Interface</td>
-   <td>{{domxref("UIEvent")}} si généré depuis un élément de l'interface utilisateur, {{domxref("Event")}}</td>
-  </tr>
-  <tr>
-   <td>Action par défaut</td>
-   <td>Aucune</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <td>Événement propageable</td>
+      <td>Non</td>
+    </tr>
+    <tr>
+      <td>Annulable</td>
+      <td>Non</td>
+    </tr>
+    <tr>
+      <td>Objets cibles</td>
+      <td>defaultView, Document, Element</td>
+    </tr>
+    <tr>
+      <td>Interface</td>
+      <td>
+        {{domxref("UIEvent")}} si généré depuis un élément de l'interface
+        utilisateur, {{domxref("Event")}}
+      </td>
+    </tr>
+    <tr>
+      <td>Action par défaut</td>
+      <td>Aucune</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Propriétés">Propriétés</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Propriété</th>
-   <th scope="col">Type</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>target</code> {{readonlyInline}}</td>
-   <td><a href="/en-US/docs/Web/API/EventTarget"><code>EventTarget</code></a></td>
-   <td>La cible de l'événement (la cible de plus haut niveau dans le DOM).</td>
-  </tr>
-  <tr>
-   <td><code>type</code> {{readonlyInline}}</td>
-   <td><a href="/en-US/docs/Web/API/DOMString"><code>DOMString</code></a></td>
-   <td>Le type d'événement.</td>
-  </tr>
-  <tr>
-   <td><code>bubbles</code> {{readonlyInline}}</td>
-   <td><a href="/en-US/docs/Web/API/Boolean"><code>Boolean</code></a></td>
-   <td>Si l'événement remonte ou non.</td>
-  </tr>
-  <tr>
-   <td><code>cancelable</code> {{readonlyInline}}</td>
-   <td><a href="/en-US/docs/Web/API/Boolean"><code>Boolean</code></a></td>
-   <td>Si l'événement est annulable ou non.</td>
-  </tr>
-  <tr>
-   <td><code>view</code> {{readonlyInline}}</td>
-   <td><a href="/en-US/docs/Web/API/WindowProxy" rel="nofollow"><code>WindowProxy</code></a></td>
-   <td><a href="/en-US/docs/Web/API/Document/defaultView"><code>document.defaultView</code></a> (<code>fenêtre</code> du document)</td>
-  </tr>
-  <tr>
-   <td><code>detail</code> {{readonlyInline}}</td>
-   <td><code>long</code> (<code>float</code>)</td>
-   <td>0.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Exemple">Exemple</h2>
-
-<pre class="brush: html">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-  &lt;head&gt;
-    &lt;title&gt;Cadre parent&lt;/title&gt;
-    &lt;script&gt;
+## Propriétés
+
+| Propriété                             | Type                                             | Description                                                                                |
+| ------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------ |
+| `target` {{readonlyInline}}     | [`EventTarget`](/en-US/docs/Web/API/EventTarget) | La cible de l'événement (la cible de plus haut niveau dans le DOM).                        |
+| `type` {{readonlyInline}}       | [`DOMString`](/en-US/docs/Web/API/DOMString)     | Le type d'événement.                                                                       |
+| `bubbles` {{readonlyInline}}    | [`Boolean`](/en-US/docs/Web/API/Boolean)         | Si l'événement remonte ou non.                                                             |
+| `cancelable` {{readonlyInline}} | [`Boolean`](/en-US/docs/Web/API/Boolean)         | Si l'événement est annulable ou non.                                                       |
+| `view` {{readonlyInline}}       | [`WindowProxy`](/en-US/docs/Web/API/WindowProxy) | [`document.defaultView`](/en-US/docs/Web/API/Document/defaultView) (`fenêtre` du document) |
+| `detail` {{readonlyInline}}     | `long` (`float`)                                 | 0.                                                                                         |
+
+## Exemple
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Cadre parent</title>
+    <script>
       window.addEventListener('beforeunload', function(event) {
         console.log('Je suis le 1er.');
       });
       window.addEventListener('unload', function(event) {
         console.log('Je suis le 3ème.');
       });
-    &lt;/script&gt;
-  &lt;/head&gt;
-  &lt;body&gt;
-    &lt;iframe src="child-frame.html"&gt;&lt;/iframe&gt;
-  &lt;/body&gt;
-&lt;/html&gt;</pre>
-
-<p>Ci-dessous, le contenu de <code>child-frame.html</code>:</p>
-
-<pre class="brush: html">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-  &lt;head&gt;
-    &lt;title&gt;Cadre enfant&lt;/title&gt;
-    &lt;script&gt;
+    </script>
+  </head>
+  <body>
+    <iframe src="child-frame.html"></iframe>
+  </body>
+</html>
+```
+
+Ci-dessous, le contenu de `child-frame.html`:
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Cadre enfant</title>
+    <script>
       window.addEventListener('beforeunload', function(event) {
         console.log('Je suis le 2nd.');
       });
       window.addEventListener('unload', function(event) {
         console.log('Je suis le 4ème et dernier…');
       });
-    &lt;/script&gt;
-  &lt;/head&gt;
-  &lt;body&gt;
+    </script>
+  </head>
+  <body>
       ☻
-  &lt;/body&gt;
-&lt;/html&gt;</pre>
+  </body>
+</html>
+```
 
-<p>Quand le cadre parent est déchargé, les événements sont lancés dans l'ordre décrit par les messages <code>console.log</code>.</p>
+Quand le cadre parent est déchargé, les événements sont lancés dans l'ordre décrit par les messages `console.log`.
 
-<h2 id="Événements_liés">Événements liés</h2>
+## Événements liés
 
-<ul>
- <li>{{event("DOMContentLoaded")}}</li>
- <li>{{event("readystatechange")}}</li>
- <li>{{event("load")}}</li>
- <li>{{event("beforeunload")}}</li>
- <li>{{event("unload")}}</li>
-</ul>
+- {{event("DOMContentLoaded")}}
+- {{event("readystatechange")}}
+- {{event("load")}}
+- {{event("beforeunload")}}
+- {{event("unload")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<ul>
- <li><a href="https://html.spec.whatwg.org/multipage/browsers.html#unloading-documents">Unloading Documents — unload a document</a></li>
- <li><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-unload">Event Module Definition — unload</a></li>
-</ul>
+- [Unloading Documents — unload a document](https://html.spec.whatwg.org/multipage/browsers.html#unloading-documents)
+- [Event Module Definition — unload](http://www.w3.org/TR/DOM-Level-3-Events/#event-type-unload)
diff --git a/files/fr/web/api/window/vrdisplayconnect_event/index.md b/files/fr/web/api/window/vrdisplayconnect_event/index.md
index 888a500d2f..815a35a5d5 100644
--- a/files/fr/web/api/window/vrdisplayconnect_event/index.md
+++ b/files/fr/web/api/window/vrdisplayconnect_event/index.md
@@ -9,73 +9,68 @@ tags:
   - vrdisplayconnect
 translation_of: Web/API/Window/vrdisplayconnect_event
 ---
-<div>{{APIRef("Window")}}</div>
+{{APIRef("Window")}}
 
-<div>
-<p>L'événement <strong><code>vrdisplayconnect</code></strong> de l'<a href="/en-US/docs/Web/API/WebVR_API">API WebVR</a> est déclenché lorsqu'un écran VR compatible est connecté à l'ordinateur.</p>
-</div>
+L'événement **`vrdisplayconnect`** de l'[API WebVR](/en-US/docs/Web/API/WebVR_API) est déclenché lorsqu'un écran VR compatible est connecté à l'ordinateur.
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row">Bulles</th>
-   <td>Non</td>
-  </tr>
-  <tr>
-   <th scope="row">Annulable</th>
-   <td>Non</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface</th>
-   <td>{{domxref("VRDisplayEvent")}}</td>
-  </tr>
-  <tr>
-   <th scope="row">Propriété de gestionnaire d'événements</th>
-   <td><code><a href="/en-US/docs/Web/API/Window/onvrdisplayconnect">onvrdisplayconnect</a></code></td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Bulles</th>
+      <td>Non</td>
+    </tr>
+    <tr>
+      <th scope="row">Annulable</th>
+      <td>Non</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface</th>
+      <td>{{domxref("VRDisplayEvent")}}</td>
+    </tr>
+    <tr>
+      <th scope="row">Propriété de gestionnaire d'événements</th>
+      <td>
+        <code
+          ><a href="/en-US/docs/Web/API/Window/onvrdisplayconnect"
+            >onvrdisplayconnect</a
+          ></code
+        >
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Vous pouvez utiliser l'événement <code>vrdisplayconnect</code> dans une méthode <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener</a></code> :</p>
+Vous pouvez utiliser l'événement `vrdisplayconnect` dans une méthode [`addEventListener`](/en-US/docs/Web/API/EventTarget/addEventListener) :
 
-<pre class="brush: js">window.addEventListener('vrdisplayconnect', function() {
+```js
+window.addEventListener('vrdisplayconnect', function() {
   info.textContent = 'Affichage connecté.';
   reportDisplays();
-});</pre>
+});
+```
 
-<p>Ou utilisez la propriété du gestionnaire d'événements <code><a href="/en-US/docs/Web/API/Window/onvrdisplayconnect">onvrdisplayconnect</a></code> :</p>
+Ou utilisez la propriété du gestionnaire d'événements [`onvrdisplayconnect`](/en-US/docs/Web/API/Window/onvrdisplayconnect) :
 
-<pre class="brush: js">window.onvrdisplayconnect = function() {
+```js
+window.onvrdisplayconnect = function() {
   info.textContent = 'Affichage connecté.';
   reportDisplays();
-};</pre>
+};
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentair</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('WebVR 1.1', '#dom-window-onvrdisplayconnect', 'vrdisplayconnect')}}</td>
-   <td>{{Spec2('WebVR 1.1')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                            | Statut                       | Commentair          |
+| -------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------------- |
+| {{SpecName('WebVR 1.1', '#dom-window-onvrdisplayconnect', 'vrdisplayconnect')}} | {{Spec2('WebVR 1.1')}} | Définition initiale |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Window.vrdisplayconnect_event")}}</p>
+{{Compat("api.Window.vrdisplayconnect_event")}}
 
-<h2 id="Voir_également">Voir également</h2>
+## Voir également
 
-<ul>
- <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a></li>
- <li><a href="http://mozvr.com/">MozVr.com</a> — démos, téléchargements et autres ressources de l'équipe Mozilla VR.</li>
-</ul>
+- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
+- [MozVr.com](http://mozvr.com/) — démos, téléchargements et autres ressources de l'équipe Mozilla VR.
diff --git a/files/fr/web/api/window/vrdisplaydisconnect_event/index.md b/files/fr/web/api/window/vrdisplaydisconnect_event/index.md
index 75a6c9924a..3e84875409 100644
--- a/files/fr/web/api/window/vrdisplaydisconnect_event/index.md
+++ b/files/fr/web/api/window/vrdisplaydisconnect_event/index.md
@@ -9,73 +9,68 @@ tags:
   - vrdisplaydisconnect
 translation_of: Web/API/Window/vrdisplaydisconnect_event
 ---
-<div>{{APIRef("Window")}}</div>
+{{APIRef("Window")}}
 
-<div>
-<p>L'événement <strong><code>vrdisplaydisconnect</code></strong> de l'<a href="/en-US/docs/Web/API/WebVR_API">API WebVR</a> est déclenché lorsqu'un écran VR compatible est déconnecté de l'ordinateur.</p>
-</div>
+L'événement **`vrdisplaydisconnect`** de l'[API WebVR](/en-US/docs/Web/API/WebVR_API) est déclenché lorsqu'un écran VR compatible est déconnecté de l'ordinateur.
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row">Bulles</th>
-   <td>Non</td>
-  </tr>
-  <tr>
-   <th scope="row">Annulable</th>
-   <td>Non</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface</th>
-   <td>{{domxref("VRDisplayEvent")}}</td>
-  </tr>
-  <tr>
-   <th scope="row">Propriété de gestionnaire d'événements</th>
-   <td><code><a href="/en-US/docs/Web/API/Window/onvrdisplaydisconnect">onvrdisplaydisconnect</a></code></td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Bulles</th>
+      <td>Non</td>
+    </tr>
+    <tr>
+      <th scope="row">Annulable</th>
+      <td>Non</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface</th>
+      <td>{{domxref("VRDisplayEvent")}}</td>
+    </tr>
+    <tr>
+      <th scope="row">Propriété de gestionnaire d'événements</th>
+      <td>
+        <code
+          ><a href="/en-US/docs/Web/API/Window/onvrdisplaydisconnect"
+            >onvrdisplaydisconnect</a
+          ></code
+        >
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Vous pouvez utiliser l'événement <code>vrdisplaydisconnect</code> dans une méthode <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener</a></code> :</p>
+Vous pouvez utiliser l'événement `vrdisplaydisconnect` dans une méthode [`addEventListener`](/en-US/docs/Web/API/EventTarget/addEventListener) :
 
-<pre class="brush: js">window.addEventListener('vrdisplaydisconnect', function() {
+```js
+window.addEventListener('vrdisplaydisconnect', function() {
   info.textContent = 'Affichage déconnecté';
   reportDisplays();
-});</pre>
+});
+```
 
-<p>Ou utilisez la propriété du gestionnaire d'événements <code><a href="/en-US/docs/Web/API/Window/onvrdisplaydisconnect">onvrdisplaydisconnect</a></code> :</p>
+Ou utilisez la propriété du gestionnaire d'événements [`onvrdisplaydisconnect`](/en-US/docs/Web/API/Window/onvrdisplaydisconnect) :
 
-<pre class="brush: js">window.onvrdisplaydisconnect = function() {
+```js
+window.onvrdisplaydisconnect = function() {
   info.textContent = 'Affichage déconnecté';
   reportDisplays();
-);</pre>
+);
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentair</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('WebVR 1.1', '#dom-window-onvrdisplaydisconnect', 'vrdisplaydisconnect')}}</td>
-   <td>{{Spec2('WebVR 1.1')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                    | Statut                       | Commentair          |
+| ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------------- |
+| {{SpecName('WebVR 1.1', '#dom-window-onvrdisplaydisconnect', 'vrdisplaydisconnect')}} | {{Spec2('WebVR 1.1')}} | Définition initiale |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Window.vrdisplaydisconnect_event")}}</p>
+{{Compat("api.Window.vrdisplaydisconnect_event")}}
 
-<h2 id="Voir_également">Voir également</h2>
+## Voir également
 
-<ul>
- <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a></li>
- <li><a href="http://mozvr.com/">MozVr.com</a> — démos, téléchargements et autres ressources de l'équipe Mozilla VR.</li>
-</ul>
+- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
+- [MozVr.com](http://mozvr.com/) — démos, téléchargements et autres ressources de l'équipe Mozilla VR.
diff --git a/files/fr/web/api/window/vrdisplaypresentchange_event/index.md b/files/fr/web/api/window/vrdisplaypresentchange_event/index.md
index c2abcb5e12..5ba67ffc5b 100644
--- a/files/fr/web/api/window/vrdisplaypresentchange_event/index.md
+++ b/files/fr/web/api/window/vrdisplaypresentchange_event/index.md
@@ -9,81 +9,76 @@ tags:
   - vrdisplaypresentchange
 translation_of: Web/API/Window/vrdisplaypresentchange_event
 ---
-<div>{{APIRef("Window")}}</div>
+{{APIRef("Window")}}
 
-<div>
-<p>L'événement <strong><code>vrdisplaypresentchange</code></strong> de l'<a href="/en-US/docs/Web/API/WebVR_API">API WebVR</a> est déclenché lorsque l'état de présentation d'un affichage VR change — c'est à dire passe de la présentation à la non présentation, ou vice versa.</p>
-</div>
+L'événement **`vrdisplaypresentchange`** de l'[API WebVR](/en-US/docs/Web/API/WebVR_API) est déclenché lorsque l'état de présentation d'un affichage VR change — c'est à dire passe de la présentation à la non présentation, ou vice versa.
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row">Bulles</th>
-   <td>Non</td>
-  </tr>
-  <tr>
-   <th scope="row">Annulable</th>
-   <td>Non</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface</th>
-   <td>{{domxref("VRDisplayEvent")}}</td>
-  </tr>
-  <tr>
-   <th scope="row">Propriété de gestionnaire d'événements</th>
-   <td><code><a href="/en-US/docs/Web/API/Window/onvrdisplaypresentchange">onvrdisplaypresentchange</a></code></td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Bulles</th>
+      <td>Non</td>
+    </tr>
+    <tr>
+      <th scope="row">Annulable</th>
+      <td>Non</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface</th>
+      <td>{{domxref("VRDisplayEvent")}}</td>
+    </tr>
+    <tr>
+      <th scope="row">Propriété de gestionnaire d'événements</th>
+      <td>
+        <code
+          ><a href="/en-US/docs/Web/API/Window/onvrdisplaypresentchange"
+            >onvrdisplaypresentchange</a
+          ></code
+        >
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Vous pouvez utiliser l'événement <code>vrdisplaypresentchange</code> dans une méthode <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener</a></code> :</p>
+Vous pouvez utiliser l'événement `vrdisplaypresentchange` dans une méthode [`addEventListener`](/en-US/docs/Web/API/EventTarget/addEventListener) :
 
-<pre class="brush: js">window.addEventListener('vrdisplaypresentchange', function() {
+```js
+window.addEventListener('vrdisplaypresentchange', function() {
   if(vrDisplay.isPresenting) {
     info.textContent = "L'affichage a commencé à présenter.";
   } else {
     info.textContent = "L'affichage a cessé de se présenter.";
   }
   reportDisplays();
-});</pre>
+});
+```
 
-<p>Ou utilisez la propriété de gestionnaire d'événements <code><a href="/en-US/docs/Web/API/Window/onvrdisplaypresentchange">onvrdisplaypresentchange</a></code> :</p>
+Ou utilisez la propriété de gestionnaire d'événements [`onvrdisplaypresentchange`](/en-US/docs/Web/API/Window/onvrdisplaypresentchange) :
 
-<pre class="brush: js">window.onvrdisplaypresentchange = function() {
+```js
+window.onvrdisplaypresentchange = function() {
   if(vrDisplay.isPresenting) {
     info.textContent = "L'affichage a commencé à présenter.";
   } else {
     info.textContent = "L'affichage a cessé de se présenter.";
   }
   reportDisplays();
-};</pre>
+};
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('WebVR 1.1', '#dom-window-onvrdisplaypresentchange', 'vrdisplaypresentchange')}}</td>
-   <td>{{Spec2('WebVR 1.1')}}</td>
-   <td>Définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                            | Statut                       | Commentaire         |
+| ------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------------- |
+| {{SpecName('WebVR 1.1', '#dom-window-onvrdisplaypresentchange', 'vrdisplaypresentchange')}} | {{Spec2('WebVR 1.1')}} | Définition initiale |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Window.vrdisplaypresentchange_event")}}</p>
+{{Compat("api.Window.vrdisplaypresentchange_event")}}
 
-<h2 id="Voir_également">Voir également</h2>
+## Voir également
 
-<ul>
- <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API homepage</a></li>
- <li><a href="http://mozvr.com/">MozVr.com</a> — démos, téléchargements et autres ressources de l'équipe Mozilla VR.</li>
-</ul>
+- [WebVR API homepage](/en-US/docs/Web/API/WebVR_API)
+- [MozVr.com](http://mozvr.com/) — démos, téléchargements et autres ressources de l'équipe Mozilla VR.
diff --git a/files/fr/web/api/windowclient/focus/index.md b/files/fr/web/api/windowclient/focus/index.md
index b78542bb67..4c1a00417c 100644
--- a/files/fr/web/api/windowclient/focus/index.md
+++ b/files/fr/web/api/windowclient/focus/index.md
@@ -12,62 +12,53 @@ tags:
   - WindowClient
 translation_of: Web/API/WindowClient/focus
 ---
-<p>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</p>
+{{SeeCompatTable}}{{APIRef("Service Workers API")}}
 
-<p>La méthode <strong><code>focus()</code></strong> de l'interface {{domxref("WindowClient")}} focus le client en cours et retourne une {{jsxref("Promise")}} qui est résolue vers le {{domxref("WindowClient")}} existant.</p>
+La méthode **`focus()`** de l'interface {{domxref("WindowClient")}} focus le client en cours et retourne une {{jsxref("Promise")}} qui est résolue vers le {{domxref("WindowClient")}} existant.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">Client.focus().then(function(WindowClient) {
-  // utilisez le WindowClient une fois qu'il est focus
-});</pre>
+    Client.focus().then(function(WindowClient) {
+      // utilisez le WindowClient une fois qu'il est focus
+    });
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<p>Nil.</p>
+Nil.
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Une {{jsxref("Promise")}} qui est résolue vers le {{domxref("WindowClient")}} existant.</p>
+Une {{jsxref("Promise")}} qui est résolue vers le {{domxref("WindowClient")}} existant.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">self.addEventListener('notificationclick', function(event) {
+```js
+self.addEventListener('notificationclick', function(event) {
   console.log('On notification click: ', event.notification.tag);
   event.notification.close();
 
-<code>  // Vérifie si le client en cours est ouvert et
-  // le focus le cas échéant</code>
+  // Vérifie si le client en cours est ouvert et
+  // le focus le cas échéant
   event.waitUntil(clients.matchAll({
     type: "window"
   }).then(function(clientList) {
-    for (var i = 0; i &lt; clientList.length; i++) {
+    for (var i = 0; i < clientList.length; i++) {
       var client = clientList[i];
-      if (client.url == '/' &amp;&amp; 'focus' in client)
+      if (client.url == '/' && 'focus' in client)
         return client.focus();
     }
     if (clients.openWindow)
       return clients.openWindow('/');
   }));
-});</pre>
+});
+```
 
-<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('Service Workers', '#client-focus-method', 'focus()')}}</td>
-   <td>{{Spec2('Service Workers')}}</td>
-   <td>Définition initiale..</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                            | État                                 | Commentaires          |
+| ---------------------------------------------------------------------------------------- | ------------------------------------ | --------------------- |
+| {{SpecName('Service Workers', '#client-focus-method', 'focus()')}} | {{Spec2('Service Workers')}} | Définition initiale.. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.WindowClient.focus")}}</p>
+{{Compat("api.WindowClient.focus")}}
diff --git a/files/fr/web/api/windowclient/focused/index.md b/files/fr/web/api/windowclient/focused/index.md
index 4d9c450178..a6b34590e2 100644
--- a/files/fr/web/api/windowclient/focused/index.md
+++ b/files/fr/web/api/windowclient/focused/index.md
@@ -3,21 +3,22 @@ title: WindowClient.focused
 slug: Web/API/WindowClient/focused
 translation_of: Web/API/WindowClient/focused
 ---
-<div>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</div>
+{{SeeCompatTable}}{{APIRef("Service Workers API")}}
 
-<p>La propriété <strong><code>focused</code></strong> , en lecture seule de l'interface  {{domxref("WindowClient")}} , est un {{domxref("Boolean")}} qui indique si client actuel a le focus .</p>
+La propriété **`focused`** , en lecture seule de l'interface  {{domxref("WindowClient")}} , est un {{domxref("Boolean")}} qui indique si client actuel a le focus .
 
-<h2 id="Syntax">Syntax</h2>
+## Syntax
 
-<pre class="syntaxbox">myFocused = WindowClient.focused;</pre>
+    myFocused = WindowClient.focused;
 
-<h3 id="Value">Value</h3>
+### Value
 
-<p>A {{domxref("Boolean")}}.</p>
+A {{domxref("Boolean")}}.
 
-<h2 id="Example">Example</h2>
+## Example
 
-<pre class="brush: js">self.addEventListener('notificationclick', function(event) {
+```js
+self.addEventListener('notificationclick', function(event) {
   console.log('On notification click: ', event.notification.tag);
   event.notification.close();
 
@@ -26,9 +27,9 @@ translation_of: Web/API/WindowClient/focused
   event.waitUntil(clients.matchAll({
     type: "window"
   }).then(function(clientList) {
-    for (var i = 0; i &lt; clientList.length; i++) {
+    for (var i = 0; i < clientList.length; i++) {
       var client = clientList[i];
-      if (client.url == '/' &amp;&amp; 'focus' in client) {
+      if (client.url == '/' && 'focus' in client) {
         if(!client.focused)
           return client.focus();
         }
@@ -37,25 +38,15 @@ translation_of: Web/API/WindowClient/focused
     if (clients.openWindow)
       return clients.openWindow('/');
   }));
-});</pre>
-
-<h2 id="Specifications">Specifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Service Workers', '#window-client-interface', 'WindowClient')}}</td>
-   <td>{{Spec2('Service Workers')}}</td>
-   <td>Initial definition</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.WindowClient.focused")}}</p>
+});
+```
+
+## Specifications
+
+| Specification                                                                                        | Status                               | Comment            |
+| ---------------------------------------------------------------------------------------------------- | ------------------------------------ | ------------------ |
+| {{SpecName('Service Workers', '#window-client-interface', 'WindowClient')}} | {{Spec2('Service Workers')}} | Initial definition |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.WindowClient.focused")}}
diff --git a/files/fr/web/api/windowclient/index.md b/files/fr/web/api/windowclient/index.md
index 1a7d646b7a..3fbcd1fde0 100644
--- a/files/fr/web/api/windowclient/index.md
+++ b/files/fr/web/api/windowclient/index.md
@@ -12,35 +12,32 @@ tags:
   - WindowClient
 translation_of: Web/API/WindowClient
 ---
-<p>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</p>
+{{SeeCompatTable}}{{APIRef("Service Workers API")}}
 
-<p>L'interface <code>WindowClient</code> de l'<a href="/en-US/docs/Web/API/ServiceWorker_API">API ServiceWorker</a> représente la portée d'un client service worker lorsque celui-ci existe en tant que document dans un contexte navigateur, controlé par un worker actif. Le client sélectionne et utilise un service worker pour son propre chargement et celui de ses sous-ressources.</p>
+L'interface `WindowClient` de l'[API ServiceWorker](/en-US/docs/Web/API/ServiceWorker_API) représente la portée d'un client service worker lorsque celui-ci existe en tant que document dans un contexte navigateur, controlé par un worker actif. Le client sélectionne et utilise un service worker pour son propre chargement et celui de ses sous-ressources.
 
-<h2 id="Méthodes">Méthodes</h2>
+## Méthodes
 
-<p><em><code>WindowClient</code> hérite certaines méthodes de son parent, {{domxref("Client")}}.</em></p>
+_`WindowClient` hérite certaines méthodes de son parent, {{domxref("Client")}}._
 
-<dl>
- <dt>{{domxref("WindowClient.focus()")}}</dt>
- <dd>Assigne le focus au client en cours.</dd>
- <dt>{{domxref("WindowClient.navigate()")}}</dt>
- <dd>Charge l'url spécifiée dans la page en cours.</dd>
-</dl>
+- {{domxref("WindowClient.focus()")}}
+  - : Assigne le focus au client en cours.
+- {{domxref("WindowClient.navigate()")}}
+  - : Charge l'url spécifiée dans la page en cours.
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<p><em><code>WindowClient</code> hérite certaines propriétés de son parent, {{domxref("Client")}}.</em></p>
+_`WindowClient` hérite certaines propriétés de son parent, {{domxref("Client")}}._
 
-<dl>
- <dt>{{domxref("WindowClient.focused")}} {{readonlyInline}}</dt>
- <dd>Un booléen qui indique si oui ou non le client en cours est focus.</dd>
- <dt>{{domxref("WindowClient.visibilityState")}} {{readonlyInline}}</dt>
- <dd>Indique la visibilité du client en cours. Peut prendre les valeures <code>hidden</code>, <code>visible</code>, <code>prerender</code>, ou <code>unloaded</code>.</dd>
-</dl>
+- {{domxref("WindowClient.focused")}} {{readonlyInline}}
+  - : Un booléen qui indique si oui ou non le client en cours est focus.
+- {{domxref("WindowClient.visibilityState")}} {{readonlyInline}}
+  - : Indique la visibilité du client en cours. Peut prendre les valeures `hidden`, `visible`, `prerender`, ou `unloaded`.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">self.addEventListener('notificationclick', function(event) {
+```js
+self.addEventListener('notificationclick', function(event) {
   console.log('On notification click: ', event.notification.tag);
   event.notification.close();
 
@@ -49,44 +46,32 @@ translation_of: Web/API/WindowClient
   event.waitUntil(clients.matchAll({
     type: "window"
   }).then(function(clientList) {
-    for (var i = 0; i &lt; clientList.length; i++) {
+    for (var i = 0; i < clientList.length; i++) {
       var client = clientList[i];
-      if (client.url == '/' &amp;&amp; 'focus' in client)
+      if (client.url == '/' && 'focus' in client)
         return client.focus();
     }
     if (clients.openWindow)
       return clients.openWindow('/');
   }));
-});</pre>
-
-<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('Service Workers', '#window-client-interface', 'WindowClient')}}</td>
-   <td>{{Spec2('Service Workers')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.WindowClient")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li>
- <li><a href="https://github.com/mdn/sw-test">Service workers basic code example</a></li>
- <li><a href="https://jakearchibald.github.io/isserviceworkerready/">Is ServiceWorker ready?</a></li>
- <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a></li>
- <li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></li>
- <li><a href="/en-US/docs/Web/API/Channel_Messaging_API">Channel Messaging API</a></li>
-</ul>
+});
+```
+
+## Spécifications
+
+| Spécification                                                                                        | État                                 | Commentaires         |
+| ---------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- |
+| {{SpecName('Service Workers', '#window-client-interface', 'WindowClient')}} | {{Spec2('Service Workers')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.WindowClient")}}
+
+## Voir aussi
+
+- [Using Service Workers](/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers)
+- [Service workers basic code example](https://github.com/mdn/sw-test)
+- [Is ServiceWorker ready?](https://jakearchibald.github.io/isserviceworkerready/)
+- [Promises](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)
+- [Using web workers](/en-US/docs/Web/Guide/Performance/Using_web_workers)
+- [Channel Messaging API](/en-US/docs/Web/API/Channel_Messaging_API)
diff --git a/files/fr/web/api/windowclient/navigate/index.md b/files/fr/web/api/windowclient/navigate/index.md
index 038f93f87c..85041b1392 100644
--- a/files/fr/web/api/windowclient/navigate/index.md
+++ b/files/fr/web/api/windowclient/navigate/index.md
@@ -12,44 +12,31 @@ tags:
   - WindowClient
 translation_of: Web/API/WindowClient/navigate
 ---
-<p>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</p>
+{{SeeCompatTable}}{{APIRef("Service Workers API")}}
 
-<p>La méthode <strong><code>navigate()</code></strong> de l'interface  {{domxref("WindowClient")}} charge une URL spécifiée dans une page de client contrôlée, puis retourne une  {{jsxref("Promise")}}  qui devra être analysée par  {{domxref("WindowClient")}} (le demandeur).</p>
+La méthode **`navigate()`** de l'interface  {{domxref("WindowClient")}} charge une URL spécifiée dans une page de client contrôlée, puis retourne une  {{jsxref("Promise")}}  qui devra être analysée par  {{domxref("WindowClient")}} (le demandeur).
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>WindowClient</em>.navigate(<em>url</em>).then(function(<em>WindowClient</em>) {
-  // do something with your WindowClient after navigation
-});</pre>
+    WindowClient.navigate(url).then(function(WindowClient) {
+      // do something with your WindowClient after navigation
+    });
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>url</code></dt>
- <dd>L'emplacement pour naviguer vers (url est une string) .</dd>
-</dl>
+- `url`
+  - : L'emplacement pour naviguer vers (url est une string) .
 
-<h3 id="Retour">Retour</h3>
+### Retour
 
-<p>Une {{jsxref("Promise")}}  qui sera analysée par le demandeur {{domxref("WindowClient")}} (fonctionnement asynchrone : je te promet de faire, mais je suis pas sûr, à toi de vérifier) .</p>
+Une {{jsxref("Promise")}}  qui sera analysée par le demandeur {{domxref("WindowClient")}} (fonctionnement asynchrone : je te promet de faire, mais je suis pas sûr, à toi de vérifier) .
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Service Workers', '#client-navigate-method', 'navigate()')}}</td>
-   <td>{{Spec2('Service Workers')}}</td>
-   <td>définition initiale</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                    | Statut                               | Commentaire         |
+| ------------------------------------------------------------------------------------------------ | ------------------------------------ | ------------------- |
+| {{SpecName('Service Workers', '#client-navigate-method', 'navigate()')}} | {{Spec2('Service Workers')}} | définition initiale |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.WindowClient.navigate")}}</p>
+{{Compat("api.WindowClient.navigate")}}
diff --git a/files/fr/web/api/windowclient/visibilitystate/index.md b/files/fr/web/api/windowclient/visibilitystate/index.md
index 3f0d42838e..3589b09443 100644
--- a/files/fr/web/api/windowclient/visibilitystate/index.md
+++ b/files/fr/web/api/windowclient/visibilitystate/index.md
@@ -3,26 +3,29 @@ title: WindowClient.visibilityState
 slug: Web/API/WindowClient/visibilityState
 translation_of: Web/API/WindowClient/visibilityState
 ---
-<p>{{SeeCompatTable}}{{APIRef("Service Workers API")}}</p>
+{{SeeCompatTable}}{{APIRef("Service Workers API")}}
 
-<p>La propriété <strong><code>visibilityState</code></strong>,  en lecture seule de l'interface {{domxref("WindowClient")}} indique la visibilité du client courant. La valeur pourra être :  <code>hidden</code>, <code>visible</code>, <code>prerender</code>, or <code>unloaded</code>.</p>
+La propriété **`visibilityState`**,  en lecture seule de l'interface {{domxref("WindowClient")}} indique la visibilité du client courant. La valeur pourra être :  `hidden`, `visible`, `prerender`, or `unloaded`.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">myVisState = WindowClient.visibilityState;</pre>
+```js
+myVisState = WindowClient.visibilityState;
+```
 
-<h3 id="Value">Value</h3>
+### Value
 
-<p>une  {{domxref("DOMString")}}.</p>
+une  {{domxref("DOMString")}}.
 
-<h2 id="Example">Example</h2>
+## Example
 
-<pre class="brush: js">  event.waitUntil(clients.matchAll({
+```js
+  event.waitUntil(clients.matchAll({
     type: "window"
   }).then(function(clientList) {
-    for (var i = 0; i &lt; clientList.length; i++) {
+    for (var i = 0; i < clientList.length; i++) {
       var client = clientList[i];
-      if (client.url == '/' &amp;&amp; 'focus' in client) {
+      if (client.url == '/' && 'focus' in client) {
         if(visibilityState === 'hidden')
           return client.focus();
         }
@@ -31,25 +34,15 @@ translation_of: Web/API/WindowClient/visibilityState
     if (clients.openWindow)
       return clients.openWindow('/');
   }));
-});</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Service Workers', '#window-client-interface', 'WindowClient')}}</td>
-   <td>{{Spec2('Service Workers')}}</td>
-   <td>Initial definition.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.WindowClient.visibilityState")}}</p>
+});
+```
+
+## Spécifications
+
+| Specification                                                                                        | Status                               | Comment             |
+| ---------------------------------------------------------------------------------------------------- | ------------------------------------ | ------------------- |
+| {{SpecName('Service Workers', '#window-client-interface', 'WindowClient')}} | {{Spec2('Service Workers')}} | Initial definition. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.WindowClient.visibilityState")}}
diff --git a/files/fr/web/api/windoweventhandlers/index.md b/files/fr/web/api/windoweventhandlers/index.md
index b74f03c601..16b52003b1 100644
--- a/files/fr/web/api/windoweventhandlers/index.md
+++ b/files/fr/web/api/windoweventhandlers/index.md
@@ -5,89 +5,59 @@ tags:
   - API
 translation_of: Web/API/WindowEventHandlers
 ---
-<div>{{APIRef("HTML DOM")}}</div>
-
-<div>La mixin <strong><code>WindowEventHandlers</code></strong> décrit les gestionnaires d'événements communs à plusieurs interfaces comme {{domxref("Window")}}, or {{domxref("HTMLBodyElement")}} et {{domxref("HTMLFrameSetElement")}}. Chacune de ces interfaces peut implémenter des gestionnaires d'événement supplémentaires.</div>
-
-
-<div class="note">
-<p><strong>Note :</strong> <code>WindowEventHandlers</code> est une mixin et non une interface; il n'est pas possible de créer un objet de type <code>WindowEventHandlers</code>.</p>
-</div>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<p><em>Les propriétés d'événement, de la forme <code>onXYZ</code>, sont définis sur {{domxref("WindowEventHandlers")}} et implémentées par {{domxref("Window")}} ou {{domxref("WorkerGlobalScope")}} pour les Web Workers.</em></p>
-
-<dl>
- <dt>{{domxref("WindowEventHandlers.onafterprint")}}</dt>
- <dd>Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("afterprint")}} est déclenché.</dd>
- <dt>{{domxref("WindowEventHandlers.onbeforeprint")}}</dt>
- <dd>Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("beforeprint")}} est déclenché.</dd>
- <dt>{{domxref("WindowEventHandlers.onbeforeunload")}}</dt>
- <dd>Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("beforeunload")}} est déclenché.</dd>
- <dt>{{domxref("WindowEventHandlers.onhashchange")}}</dt>
- <dd>Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("hashchange")}} est déclenché.</dd>
- <dt>{{domxref("WindowEventHandlers.onlanguagechange")}} {{experimental_inline}}</dt>
- <dd>Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("languagechange")}} est déclenché.</dd>
- <dt>{{domxref("WindowEventHandlers.onmessage")}}</dt>
- <dd>Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("message")}} est déclenché.</dd>
- <dt>{{domxref("WindowEventHandlers.onoffline")}}</dt>
- <dd>Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("offline")}} est déclenché.</dd>
- <dt>{{domxref("WindowEventHandlers.ononline")}}</dt>
- <dd>Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("online")}} est déclenché.</dd>
- <dt>{{domxref("WindowEventHandlers.onpagehide")}}</dt>
- <dd>Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("pagehide")}} est déclenché.</dd>
- <dt>{{domxref("WindowEventHandlers.onpageshow")}}</dt>
- <dd>Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("pageshow")}} est déclenché.</dd>
- <dt>{{domxref("WindowEventHandlers.onpopstate")}}</dt>
- <dd>Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("popstate")}} est déclenché.</dd>
- <dt>{{domxref("WindowEventHandlers.onresize")}}</dt>
- <dd>Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("resize")}} est déclenché.</dd>
- <dt>{{domxref("WindowEventHandlers.onstorage")}}</dt>
- <dd>Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("storage")}} est déclenché.</dd>
- <dt>{{domxref("WindowEventHandlers.onunload")}}</dt>
- <dd>Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("unload")}} est déclenché.</dd>
-</dl>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<p><em>Cette interface ne définit aucune méthode.</em></p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', '#windoweventhandlers', 'GlobalEventHandlers')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Pas de changement depuis {{SpecName("HTML5.1")}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5.1', '#windoweventhandlers', 'GlobalEventHandlers')}}</td>
-   <td>{{Spec2('HTML5.1')}}</td>
-   <td>Snapshot de {{SpecName("HTML WHATWG")}}. Ajoute <code>onlanguage</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML5 W3C", "#windoweventhandlers", "GlobalEventHandlers")}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Snapshot de {{SpecName("HTML WHATWG")}}. Création de <code>WindowEventHandlers</code> (les propriétés étaient sur la cible avant).</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.WindowEventHandlers")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("Window")}} et {{domxref("WorkerGlobalScope")}}</li>
-</ul>
+{{APIRef("HTML DOM")}}La mixin **`WindowEventHandlers`** décrit les gestionnaires d'événements communs à plusieurs interfaces comme {{domxref("Window")}}, or {{domxref("HTMLBodyElement")}} et {{domxref("HTMLFrameSetElement")}}. Chacune de ces interfaces peut implémenter des gestionnaires d'événement supplémentaires.
+
+> **Note :** `WindowEventHandlers` est une mixin et non une interface; il n'est pas possible de créer un objet de type `WindowEventHandlers`.
+
+## Propriétés
+
+_Les propriétés d'événement, de la forme `onXYZ`, sont définis sur {{domxref("WindowEventHandlers")}} et implémentées par {{domxref("Window")}} ou {{domxref("WorkerGlobalScope")}} pour les Web Workers._
+
+- {{domxref("WindowEventHandlers.onafterprint")}}
+  - : Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("afterprint")}} est déclenché.
+- {{domxref("WindowEventHandlers.onbeforeprint")}}
+  - : Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("beforeprint")}} est déclenché.
+- {{domxref("WindowEventHandlers.onbeforeunload")}}
+  - : Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("beforeunload")}} est déclenché.
+- {{domxref("WindowEventHandlers.onhashchange")}}
+  - : Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("hashchange")}} est déclenché.
+- {{domxref("WindowEventHandlers.onlanguagechange")}} {{experimental_inline}}
+  - : Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("languagechange")}} est déclenché.
+- {{domxref("WindowEventHandlers.onmessage")}}
+  - : Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("message")}} est déclenché.
+- {{domxref("WindowEventHandlers.onoffline")}}
+  - : Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("offline")}} est déclenché.
+- {{domxref("WindowEventHandlers.ononline")}}
+  - : Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("online")}} est déclenché.
+- {{domxref("WindowEventHandlers.onpagehide")}}
+  - : Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("pagehide")}} est déclenché.
+- {{domxref("WindowEventHandlers.onpageshow")}}
+  - : Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("pageshow")}} est déclenché.
+- {{domxref("WindowEventHandlers.onpopstate")}}
+  - : Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("popstate")}} est déclenché.
+- {{domxref("WindowEventHandlers.onresize")}}
+  - : Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("resize")}} est déclenché.
+- {{domxref("WindowEventHandlers.onstorage")}}
+  - : Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("storage")}} est déclenché.
+- {{domxref("WindowEventHandlers.onunload")}}
+  - : Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("unload")}} est déclenché.
+
+## Méthodes
+
+_Cette interface ne définit aucune méthode._
+
+## Spécifications
+
+| Specification                                                                                        | Status                           | Comment                                                                                                                          |
+| ---------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('HTML WHATWG', '#windoweventhandlers', 'GlobalEventHandlers')}} | {{Spec2('HTML WHATWG')}} | Pas de changement depuis {{SpecName("HTML5.1")}}.                                                                       |
+| {{SpecName('HTML5.1', '#windoweventhandlers', 'GlobalEventHandlers')}}         | {{Spec2('HTML5.1')}}     | Snapshot de {{SpecName("HTML WHATWG")}}. Ajoute `onlanguage`.                                                           |
+| {{SpecName("HTML5 W3C", "#windoweventhandlers", "GlobalEventHandlers")}}     | {{Spec2('HTML5 W3C')}}     | Snapshot de {{SpecName("HTML WHATWG")}}. Création de `WindowEventHandlers` (les propriétés étaient sur la cible avant). |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.WindowEventHandlers")}}
+
+## Voir aussi
+
+- {{domxref("Window")}} et {{domxref("WorkerGlobalScope")}}
diff --git a/files/fr/web/api/windoweventhandlers/onafterprint/index.md b/files/fr/web/api/windoweventhandlers/onafterprint/index.md
index c51179479a..2eff2b9b01 100644
--- a/files/fr/web/api/windoweventhandlers/onafterprint/index.md
+++ b/files/fr/web/api/windoweventhandlers/onafterprint/index.md
@@ -12,54 +12,38 @@ tags:
   - évènements
 translation_of: Web/API/WindowEventHandlers/onafterprint
 ---
-<div>{{ApiRef}}</div>
+{{ApiRef}}
 
-<p>La propriété WindowEventHandlers.onafterprint définit et renvoie {{event("afterprint")}} {{event("Event_handlers", "event handler")}} pourl a fenêtre actuelle.</p>
+La propriété WindowEventHandlers.onafterprint définit et renvoie {{event("afterprint")}} {{event("Event_handlers", "event handler")}} pourl a fenêtre actuelle.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>window</em>.onafterprint = <em>code de traitement de l'événement</em>
-</pre>
+    window.onafterprint = code de traitement de l'événement
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p>Les événements <code>beforeprint</code> et <code>afterprint</code> permettent aux pages de modifier leur contenu avant le début de l'impression (pour supprimer une bannière, par exemple), puis d'annuler ces modifications une fois l'impression terminée. En général, les auteurs de contenu devraient préférer l'utilisation d'une règle CSS <a href="/en-US/docs/Web/CSS/@media">@media print</a>, mais il peut être nécessaire d'utiliser ces événements dans certains cas.</p>
+Les événements `beforeprint` et `afterprint` permettent aux pages de modifier leur contenu avant le début de l'impression (pour supprimer une bannière, par exemple), puis d'annuler ces modifications une fois l'impression terminée. En général, les auteurs de contenu devraient préférer l'utilisation d'une règle CSS [@media print](/en-US/docs/Web/CSS/@media), mais il peut être nécessaire d'utiliser ces événements dans certains cas.
 
-<p>L'événement <code>afterprint</code> est appelé après l'impression par l'utilisateur, ou s'il interrompt la boîte de dialogue d'impression.</p>
+L'événement `afterprint` est appelé après l'impression par l'utilisateur, ou s'il interrompt la boîte de dialogue d'impression.
 
-<p> </p>
 
-<p> </p>
 
-<p>Safari ne reconnaît pas ces événements.</p>
 
-<h2 id="Spécification">Spécification</h2>
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', '#handler-window-onafterprint', 'onafterprint')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+Safari ne reconnaît pas ces événements.
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Spécification
 
+| Specification                                                                                        | Status                           | Comment |
+| ---------------------------------------------------------------------------------------------------- | -------------------------------- | ------- |
+| {{SpecName('HTML WHATWG', '#handler-window-onafterprint', 'onafterprint')}} | {{Spec2('HTML WHATWG')}} |         |
 
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.WindowEventHandlers.onafterprint")}}</p>
+{{Compat("api.WindowEventHandlers.onafterprint")}}
 
-<h2 id="Voir_également">Voir également</h2>
+## Voir également
 
-<ul>
- <li>{{domxref("window.print")}}</li>
- <li>{{domxref("window.onbeforeprint")}}</li>
- <li><a href="/en-US/docs/Printing">Printing</a></li>
-</ul>
\ No newline at end of file
+- {{domxref("window.print")}}
+- {{domxref("window.onbeforeprint")}}
+- [Printing](/en-US/docs/Printing)
diff --git a/files/fr/web/api/windoweventhandlers/onbeforeprint/index.md b/files/fr/web/api/windoweventhandlers/onbeforeprint/index.md
index 049c317a23..1df25a3c86 100644
--- a/files/fr/web/api/windoweventhandlers/onbeforeprint/index.md
+++ b/files/fr/web/api/windoweventhandlers/onbeforeprint/index.md
@@ -8,59 +8,43 @@ tags:
   - impression
 translation_of: Web/API/WindowEventHandlers/onbeforeprint
 ---
-<div>{{ApiRef}}</div>
+{{ApiRef}}
 
-<p>La propriété <code>onbeforeprint</code> définit et retourne le code du gestionnaire d'événement <code>onbeforeprint</code> onbeforeprint pour la fenêtre actuelle.</p>
+La propriété `onbeforeprint` définit et retourne le code du gestionnaire d'événement `onbeforeprint` onbeforeprint pour la fenêtre actuelle.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox">window.onbeforeprint = <em>code de traitement de l'événement</em>
-</pre>
+    window.onbeforeprint = code de traitement de l'événement
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p>Les événements <code>beforeprint</code> et <code>afterprint</code> permettent aux pages de modifier leur contenu avant le début de l'impression (peut-être pour supprimer une bannière, par exemple), puis d'annuler ces modifications une fois l'impression terminée. En général, les auteurs de contenu devraient préférer l'utilisation d'une règle CSS <a href="/en-US/docs/Web/CSS/@media">@media print</a>, mais il peut être nécessaire d'utiliser ces événements dans certains cas.</p>
+Les événements `beforeprint` et `afterprint` permettent aux pages de modifier leur contenu avant le début de l'impression (peut-être pour supprimer une bannière, par exemple), puis d'annuler ces modifications une fois l'impression terminée. En général, les auteurs de contenu devraient préférer l'utilisation d'une règle CSS [@media print](/en-US/docs/Web/CSS/@media), mais il peut être nécessaire d'utiliser ces événements dans certains cas.
 
-<p>L'événement <code>beforeprint</code> est appelé avant l'ouverture de la fenêtre de dialogue d'impression.</p>
+L'événement `beforeprint` est appelé avant l'ouverture de la fenêtre de dialogue d'impression.
 
-<p>Safari ne reconnaît pas ces événements, mais un résultat équivalent à l'événement <code>beforeprint</code> peut être obtenu avec <code>{{domxref("window.matchMedia")}}('print')</code>.</p>
+Safari ne reconnaît pas ces événements, mais un résultat équivalent à l'événement `beforeprint` peut être obtenu avec `{{domxref("window.matchMedia")}}('print')`.
 
-<pre class="brush: js">var mediaQueryList = window.matchMedia('print');
+```js
+var mediaQueryList = window.matchMedia('print');
 mediaQueryList.addListener(function(mql) {
   if(mql.matches) {
     console.log('équivalent webkit de onbeforeprint');
   }
-});</pre>
+});
+```
 
-<h2 id="Specification">Spécification</h2>
+## Spécification
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', '#handler-window-onbeforeprint', 'onbeforeprint')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Specification                                                                                            | Status                           | Comment |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------- | ------- |
+| {{SpecName('HTML WHATWG', '#handler-window-onbeforeprint', 'onbeforeprint')}} | {{Spec2('HTML WHATWG')}} |         |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
+{{Compat("api.WindowEventHandlers.onbeforeprint")}}
 
+## Voir également
 
-<p>{{Compat("api.WindowEventHandlers.onbeforeprint")}}</p>
-
-<h2 id="See_also">Voir également</h2>
-
-<ul>
- <li>{{domxref("window.print")}}</li>
- <li>{{domxref("window.onafterprint")}}</li>
- <li><a href="/en-US/docs/Printing">Printing</a></li>
-</ul>
+- {{domxref("window.print")}}
+- {{domxref("window.onafterprint")}}
+- [Printing](/en-US/docs/Printing)
diff --git a/files/fr/web/api/windoweventhandlers/onbeforeunload/index.md b/files/fr/web/api/windoweventhandlers/onbeforeunload/index.md
index 638f24c27b..fa0a5fd81e 100644
--- a/files/fr/web/api/windoweventhandlers/onbeforeunload/index.md
+++ b/files/fr/web/api/windoweventhandlers/onbeforeunload/index.md
@@ -3,25 +3,28 @@ title: window.onbeforeunload
 slug: Web/API/WindowEventHandlers/onbeforeunload
 translation_of: Web/API/WindowEventHandlers/onbeforeunload
 ---
-<h2 id="Sommaire">Résumé</h2>
+## Résumé
 
-<p>Le gestionnaire d'événement <code><strong>WindowEventHandlers.onbeforeunload</strong></code> contient le code exécuté lorsque l'évènement {{event("beforeunload")}} est envoyé. Cet événement se déclenche lorsque la fenêtre est sur le point de recharger ses ressources.</p>
+Le gestionnaire d'événement **`WindowEventHandlers.onbeforeunload`** contient le code exécuté lorsque l'évènement {{event("beforeunload")}} est envoyé. Cet événement se déclenche lorsque la fenêtre est sur le point de recharger ses ressources.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: html">&lt;element beforeunload="funcRef(event);" /&gt;</pre>
+```html
+<element beforeunload="funcRef(event);" />
+```
 
-<pre class="brush: html">&lt;script type="text/javascript"&gt;
+```html
+<script type="text/javascript">
 	window.onbeforeunload = funcRef
-&lt;/script&gt;</pre>
+</script>
+```
 
-<ul>
- <li>funcRef : Référence à une fonction appelée lorsque l'évènement se déclenche</li>
-</ul>
+- funcRef : Référence à une fonction appelée lorsque l'évènement se déclenche
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">window.onbeforeunload = function (e) {
+```js
+window.onbeforeunload = function (e) {
   var e = e || window.event;
 
   // For IE and Firefox
@@ -32,18 +35,16 @@ translation_of: Web/API/WindowEventHandlers/onbeforeunload
   // For Safari
   return 'Any string';
 };
-</pre>
+```
 
-<h2 id="EventProperty">Propriétés de l'objet <strong>event</strong></h2>
+## Propriétés de l'objet **event**
 
-<pre>returnValue</pre>
+    returnValue
 
-<ul>
- <li>Applique ou récupère la valeur de retour de l'évènement.</li>
-</ul>
+- Applique ou récupère la valeur de retour de l'évènement.
 
-<h2 id="Spécification">Spécification</h2>
+## Spécification
 
-<p>L'évènement 'onbeforeunload' a été introduit par Microsoft dans IE4 et s'est généralisé dans tous les navigateurs.</p>
+L'évènement 'onbeforeunload' a été introduit par Microsoft dans IE4 et s'est généralisé dans tous les navigateurs.
 
-<p><a href="http://msdn.microsoft.com/en-us/library/ms536907%28VS.85%29.aspx">MSDN—onbeforeunload Event</a></p>
+[MSDN—onbeforeunload Event](http://msdn.microsoft.com/en-us/library/ms536907%28VS.85%29.aspx)
diff --git a/files/fr/web/api/windoweventhandlers/onhashchange/index.md b/files/fr/web/api/windoweventhandlers/onhashchange/index.md
index 1a495e5a37..973f3353f8 100644
--- a/files/fr/web/api/windoweventhandlers/onhashchange/index.md
+++ b/files/fr/web/api/windoweventhandlers/onhashchange/index.md
@@ -3,39 +3,29 @@ title: WindowEventHandlers.onhashchange
 slug: Web/API/WindowEventHandlers/onhashchange
 translation_of: Web/API/WindowEventHandlers/onhashchange
 ---
-<div>
-<div>{{APIRef("HTML DOM")}}</div>
+{{APIRef("HTML DOM")}}L'événement **hashchange** est déclenché lorsque le hash de l'url change (cf. {{domxref("Window.location", "location.hash")}}).
 
-<div>L'événement <strong>hashchange</strong> est déclenché lorsque le hash de l'url change (cf. {{domxref("Window.location", "location.hash")}}).</div>
+## Syntaxe
 
-<div> </div>
-</div>
+    window.onhashchange = funcRef;
 
-<h2 id="Syntaxe">Syntaxe</h2>
+**ou**
 
-<pre class="syntaxbox">window.onhashchange = funcRef;
-</pre>
+    <body onhashchange="funcRef();">
 
-<p><strong>ou</strong></p>
+**ou**
 
-<pre class="syntaxbox">&lt;body onhashchange="funcRef();"&gt;
-</pre>
+    window.addEventListener("hashchange", funcRef, false);
 
-<p><strong>ou</strong></p>
+### Paramètres
 
-<pre class="syntaxbox">window.addEventListener("hashchange", funcRef, false);
-</pre>
+- `funcRef`
+  - : Une référence à une fonction.
 
-<h3 id="Paramètres">Paramètres</h3>
+## Exemples
 
-<dl>
- <dt><code>funcRef</code></dt>
- <dd>Une référence à une fonction.</dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<pre class="brush:js">if ("onhashchange" in window) {
+```js
+if ("onhashchange" in window) {
     alert("Le navigateur prend en charge l'événement hashchange!");
 }
 
@@ -46,35 +36,36 @@ function locationHashChanged() {
 }
 
 window.onhashchange = locationHashChanged;
-</pre>
+```
 
-<h2 id="L'événement_hashchange">L'événement hashchange</h2>
+## L'événement hashchange
 
-<p>Lorsque l'observateur d'événement déclenche l'événement hashchange il passe en paramêtres les arguments suivante:</p>
+Lorsque l'observateur d'événement déclenche l'événement hashchange il passe en paramêtres les arguments suivante:
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <td class="header">Paramêtre</td>
-   <td class="header">Type</td>
-   <td class="header">Description</td>
-  </tr>
-  <tr>
-   <td><code>newURL</code> {{gecko_minversion_inline("6.0")}}</td>
-   <td><code>DOMString</code></td>
-   <td>Le nouvel URL où le navigateur est.</td>
-  </tr>
-  <tr>
-   <td><code>oldURL</code> {{gecko_minversion_inline("6.0")}}</td>
-   <td><code>DOMString</code></td>
-   <td>L'ancien URL où le navigateur se trouvait.</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <td class="header">Paramêtre</td>
+      <td class="header">Type</td>
+      <td class="header">Description</td>
+    </tr>
+    <tr>
+      <td><code>newURL</code> {{gecko_minversion_inline("6.0")}}</td>
+      <td><code>DOMString</code></td>
+      <td>Le nouvel URL où le navigateur est.</td>
+    </tr>
+    <tr>
+      <td><code>oldURL</code> {{gecko_minversion_inline("6.0")}}</td>
+      <td><code>DOMString</code></td>
+      <td>L'ancien URL où le navigateur se trouvait.</td>
+    </tr>
+  </tbody>
 </table>
 
-<h3 id="Une_solution_autour_de_event.newURL_et_event.oldURL">Une solution autour de event.newURL et event.oldURL</h3>
+### Une solution autour de event.newURL et event.oldURL
 
-<pre class="brush:js">//insérez ce bout de code au début de votre code pour observer les changements de hash dans l'URL
+```js
+//insérez ce bout de code au début de votre code pour observer les changements de hash dans l'URL
 if(!window.HashChangeEvent)(function(){
 	var lastURL=document.URL;
 	window.addEventListener("hashchange",function(event){
@@ -83,47 +74,24 @@ if(!window.HashChangeEvent)(function(){
 		lastURL=document.URL;
 	});
 }());
-</pre>
+```
 
-<h3 id="sect1"> </h3>
+###  
 
-<h2 id="Spécifications">Spécifications </h2>
+## Spécifications 
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécifications</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', '#windoweventhandlers', 'GlobalEventHandlers')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5.1', '#windoweventhandlers', 'GlobalEventHandlers')}}</td>
-   <td>{{Spec2('HTML5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML5 W3C", "#windoweventhandlers", "GlobalEventHandlers")}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécifications                                                                                       | Statut                           | Commentaires |
+| ---------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ |
+| {{SpecName('HTML WHATWG', '#windoweventhandlers', 'GlobalEventHandlers')}} | {{Spec2('HTML WHATWG')}} |              |
+| {{SpecName('HTML5.1', '#windoweventhandlers', 'GlobalEventHandlers')}}         | {{Spec2('HTML5.1')}}     |              |
+| {{SpecName("HTML5 W3C", "#windoweventhandlers", "GlobalEventHandlers")}}     | {{Spec2('HTML5 W3C')}}     |              |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.WindowEventHandlers.onhashchange")}}</p>
+{{Compat("api.WindowEventHandlers.onhashchange")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/Guide/DOM/Manipuler_historique_du_navigateur">Manipuler l'historique du navigateur</a></li>
- <li>Méthodes <a href="/fr/docs/Web/API/Window/history">history.pushState() et history.replaceState()</a></li>
- <li>L'événement <a href="/fr/docs/Web/API/WindowEventHandlers/onpopstate">popstate</a></li>
-</ul>
+- [Manipuler l'historique du navigateur](/fr/docs/Web/Guide/DOM/Manipuler_historique_du_navigateur)
+- Méthodes [history.pushState() et history.replaceState()](/fr/docs/Web/API/Window/history)
+- L'événement [popstate](/fr/docs/Web/API/WindowEventHandlers/onpopstate)
diff --git a/files/fr/web/api/windoweventhandlers/onlanguagechange/index.md b/files/fr/web/api/windoweventhandlers/onlanguagechange/index.md
index 5fe039c2cb..7f0dabe81f 100644
--- a/files/fr/web/api/windoweventhandlers/onlanguagechange/index.md
+++ b/files/fr/web/api/windoweventhandlers/onlanguagechange/index.md
@@ -10,55 +10,38 @@ tags:
   - Window
 translation_of: Web/API/WindowEventHandlers/onlanguagechange
 ---
-<div>{{APIRef("HTML DOM")}} {{SeeCompatTable}}</div>
+{{APIRef("HTML DOM")}} {{SeeCompatTable}}
 
-<p>La propriété <code><strong>onlanguagechange</strong></code> du mixin {{domxref("WindowEventHandlers")}} est le {{event("Event_handlers", "event handler")}} pour le traitement des événements {{event("languagechange")}}.</p>
+La propriété **`onlanguagechange`** du mixin {{domxref("WindowEventHandlers")}} est le {{event("Event_handlers", "event handler")}} pour le traitement des événements {{event("languagechange")}}.
 
-<p>Ces événements sont reçus par l'objet implémentant cette interface, généralement un {{domxref ("Window")}}, un {{domxref ("HTMLBodyElement")}} ou un {{domxref ("HTMLIFrameElement")}}. Un tel événement est envoyé par le navigateur pour informer que la liste des langues préférées a été mise à jour. La liste est accessible via {{domxref("NavigatorLanguage.languages")}}.</p>
+Ces événements sont reçus par l'objet implémentant cette interface, généralement un {{domxref ("Window")}}, un {{domxref ("HTMLBodyElement")}} ou un {{domxref ("HTMLIFrameElement")}}. Un tel événement est envoyé par le navigateur pour informer que la liste des langues préférées a été mise à jour. La liste est accessible via {{domxref("NavigatorLanguage.languages")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>object</em>.onlanguagechange = <em>function</em>;
-</pre>
+    object.onlanguagechange = function;
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<ul>
- <li><code>function</code> est le nom d'une fonction définie par l'utilisateur, sans le suffixe <code>()</code> ni aucun paramètre, ou une déclaration de fonction anonyme, telle que <code>function(event) {...}</code>. Un gestionnaire d'événements a toujours un seul paramètre, contenant l'événement, ici de type {{domxref ("Event")}}.</li>
-</ul>
+- `function` est le nom d'une fonction définie par l'utilisateur, sans le suffixe `()` ni aucun paramètre, ou une déclaration de fonction anonyme, telle que `function(event) {...}`. Un gestionnaire d'événements a toujours un seul paramètre, contenant l'événement, ici de type {{domxref ("Event")}}.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">window.onlanguagechange = function(event) {
+```js
+window.onlanguagechange = function(event) {
   console.log('événement de changement de langue détecté!');
 };
-</pre>
+```
 
-<h2 id="Spécifications">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('HTML WHATWG', '#handler-window-onlanguagechange', 'WindowEventHandler.onlanguagechange') }}</td>
-   <td>{{ Spec2('HTML WHATWG') }}</td>
-   <td>Spécification initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                                | Statut                               | Commentaire             |
+| -------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------------------- |
+| {{ SpecName('HTML WHATWG', '#handler-window-onlanguagechange', 'WindowEventHandler.onlanguagechange') }} | {{ Spec2('HTML WHATWG') }} | Spécification initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.WindowEventHandlers.onlanguagechange")}}</p>
+{{Compat("api.WindowEventHandlers.onlanguagechange")}}
 
-<h2 id="Voir_également">Voir également</h2>
+## Voir également
 
-<ul>
- <li>L'événement {{event("languagechange")}} et son type, {{domxref("Event")}}</li>
-</ul>
+- L'événement {{event("languagechange")}} et son type, {{domxref("Event")}}
diff --git a/files/fr/web/api/windoweventhandlers/onpopstate/index.md b/files/fr/web/api/windoweventhandlers/onpopstate/index.md
index ff23d12a70..e9d7b97a63 100644
--- a/files/fr/web/api/windoweventhandlers/onpopstate/index.md
+++ b/files/fr/web/api/windoweventhandlers/onpopstate/index.md
@@ -3,32 +3,30 @@ title: window.onpopstate
 slug: Web/API/WindowEventHandlers/onpopstate
 translation_of: Web/API/WindowEventHandlers/onpopstate
 ---
-<p>{{ ApiRef() }}</p>
+{{ ApiRef() }}
 
-<p>{{ gecko_minversion_header("2") }}</p>
+{{ gecko_minversion_header("2") }}
 
-<h3 id="Résumé">Résumé</h3>
+### Résumé
 
-<p>Un gestionnaire d'évènement pour l'évènement <code>popstate</code> de la fenêtre.</p>
+Un gestionnaire d'évènement pour l'évènement `popstate` de la fenêtre.
 
-<p>L'évènement <code>popstate</code> est envoyé à la fenêtre à chaque fois que l'entrée actuelle de l'historique change avec 2 autres entrées du même document. Si l'entrée actuelle a été créée en appelant <code>history.pushState()</code> ou a été modifiée en appelant <code>history.replaceState()</code>, la propriété state de l'évènement <code>popstate</code> contient une copie de l'objet d'entrée de l'historique.</p>
+L'évènement `popstate` est envoyé à la fenêtre à chaque fois que l'entrée actuelle de l'historique change avec 2 autres entrées du même document. Si l'entrée actuelle a été créée en appelant `history.pushState()` ou a été modifiée en appelant `history.replaceState()`, la propriété state de l'évènement `popstate` contient une copie de l'objet d'entrée de l'historique.
 
-<p>Sachez qu'appeler <code>history.pushState()</code> ou <code>history.replaceState()</code> ne déclenchera pas l'évènement <code>popstate</code>. Cet évènement n'est déclenché que par une action utilisateur telle que cliquer sur le bouton Retour (ou appeler <code>history.back()</code>, en JavaScript). L'évènement n'est déclenché que pour la navigation entre deux entrées du même document.</p>
+Sachez qu'appeler `history.pushState()` ou `history.replaceState()` ne déclenchera pas l'évènement `popstate`. Cet évènement n'est déclenché que par une action utilisateur telle que cliquer sur le bouton Retour (ou appeler `history.back()`, en JavaScript). L'évènement n'est déclenché que pour la navigation entre deux entrées du même document.
 
-<h3 id="Syntax">Syntaxe</h3>
+### Syntaxe
 
-<pre class="eval">window.onpopstate = <em>funcRef</em>;
-</pre>
+    window.onpopstate = funcRef;
 
-<ul>
- <li><code>funcRef</code> est une référence à une fonction.</li>
-</ul>
+- `funcRef` est une référence à une fonction.
 
-<h3 id="Lévènement_popstate">L'évènement popstate</h3>
+### L'évènement popstate
 
-<p>Par exemple, une page à l'adresse <a href="http://example.com/example.html">http://example.com/example.html</a> exécutant le code suivant générera les alertes suivantes:</p>
+Par exemple, une page à l'adresse <http://example.com/example.html> exécutant le code suivant générera les alertes suivantes:
 
-<pre class="brush: js">window.onpopstate = function(event) {
+```js
+window.onpopstate = function(event) {
   alert("adresse: " + document.location + ", état: " + JSON.stringify(event.state));
 };
 history.pushState({page: 1}, "titre 1", "?page=1");
@@ -37,20 +35,16 @@ history.replaceState({page: 3}, "titre 3", "?page=3");
 history.back(); // affiche "adresse: http://example.com/example.html?page=1, état: {"page":1}"
 history.back(); // affiche "adresse: http://example.com/example.html, état: null
 history.go(2);  // affiche "adresse: http://example.com/example.html?page=3, état: {"page":3}
-</pre>
+```
 
-<p>Même si l'entrée originelle (de <a href="http://example.com/example.html">http://example.com/example.html</a>) n'a aucun objet d'état associé, l'évènement <code>popstate</code> est toujours déclenché lorsque l'entrée est activée après un deuxième appel à <code>history.back()</code>.</p>
+Même si l'entrée originelle (de <http://example.com/example.html>) n'a aucun objet d'état associé, l'évènement `popstate` est toujours déclenché lorsque l'entrée est activée après un deuxième appel à `history.back()`.
 
-<h3 id="Specification">Spécification</h3>
+### Spécification
 
-<ul>
- <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#handler-window-onpopstate">HTML5 popstate event</a></li>
-</ul>
+- [HTML5 popstate event](http://www.whatwg.org/specs/web-apps/current-work/#handler-window-onpopstate)
 
-<h3 id="Lire_également">Lire également</h3>
+### Lire également
 
-<ul>
- <li>{{ domxref("window.history") }}</li>
- <li><a href="/fr/docs/DOM/manipuler_lhistorique_du_navigateur">Manipuler l'historique du navigateur</a></li>
- <li><a href="/fr/docs/DOM/Manipulating_the_browser_history/Example">Exemple de navigation en Ajax</a></li>
-</ul>
\ No newline at end of file
+- {{ domxref("window.history") }}
+- [Manipuler l'historique du navigateur](/fr/docs/DOM/manipuler_lhistorique_du_navigateur)
+- [Exemple de navigation en Ajax](/fr/docs/DOM/Manipulating_the_browser_history/Example)
diff --git a/files/fr/web/api/windoweventhandlers/onunload/index.md b/files/fr/web/api/windoweventhandlers/onunload/index.md
index 613631c10d..3947be68fd 100644
--- a/files/fr/web/api/windoweventhandlers/onunload/index.md
+++ b/files/fr/web/api/windoweventhandlers/onunload/index.md
@@ -8,49 +8,27 @@ tags:
   - WindowEventHandlers
 translation_of: Web/API/WindowEventHandlers/onunload
 ---
-<div>{{APIRef("HTML DOM")}}</div>
-
-<p>L'événement <strong><code>unload</code></strong> est déclenché lorsque le contenu et les ressources sont déchargés à la fermeture de la fenêtre. Le processus de suppression des ressources se fait <em>après</em> que l'événement <code>unload </code>a eu lieu.</p>
-
-<p>Les navigateurs équipés d'un bloqueur de pop-up vont ignorer tout appel de <code>window.open()</code> lancé depuis onunload.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<pre class="syntaxbox">window.addEventListener("unload", function(event) { ... });
-window.onunload = function(event) { ... };
-</pre>
-
-<p>Généralement, mieux vaut utiliser {{domxref("EventTarget.addEventListener", "window.addEventListener()")}} et l'événement {{event("unload")}} plutôt que <code>onunload</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', '#handler-window-onunload', 'onunload')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5.1', '#windoweventhandlers', 'GlobalEventHandlers')}}</td>
-   <td>{{Spec2('HTML5.1')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML5 W3C", "#windoweventhandlers", "GlobalEventHandlers")}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.WindowEventHandlers.onunload")}}</p>
+{{APIRef("HTML DOM")}}
+
+L'événement **`unload`** est déclenché lorsque le contenu et les ressources sont déchargés à la fermeture de la fenêtre. Le processus de suppression des ressources se fait _après_ que l'événement `unload `a eu lieu.
+
+Les navigateurs équipés d'un bloqueur de pop-up vont ignorer tout appel de `window.open()` lancé depuis onunload.
+
+## Syntaxe
+
+    window.addEventListener("unload", function(event) { ... });
+    window.onunload = function(event) { ... };
+
+Généralement, mieux vaut utiliser {{domxref("EventTarget.addEventListener", "window.addEventListener()")}} et l'événement {{event("unload")}} plutôt que `onunload`.
+
+## Spécifications
+
+| Spécification                                                                                    | État                             | Commentaires |
+| ------------------------------------------------------------------------------------------------ | -------------------------------- | ------------ |
+| {{SpecName('HTML WHATWG', '#handler-window-onunload', 'onunload')}}         | {{Spec2('HTML WHATWG')}} |              |
+| {{SpecName('HTML5.1', '#windoweventhandlers', 'GlobalEventHandlers')}}     | {{Spec2('HTML5.1')}}     |              |
+| {{SpecName("HTML5 W3C", "#windoweventhandlers", "GlobalEventHandlers")}} | {{Spec2('HTML5 W3C')}}     |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.WindowEventHandlers.onunload")}}
diff --git a/files/fr/web/api/windoworworkerglobalscope/index.md b/files/fr/web/api/windoworworkerglobalscope/index.md
index 3e31d88c6c..fbf62ad022 100644
--- a/files/fr/web/api/windoworworkerglobalscope/index.md
+++ b/files/fr/web/api/windoworworkerglobalscope/index.md
@@ -13,98 +13,61 @@ tags:
   - WorkerGlobalScope
 translation_of: Web/API/WindowOrWorkerGlobalScope
 ---
-<div>{{ApiRef()}}</div>
+{{ApiRef()}}
 
-<p>Le mixin <strong><code>WindowOrWorkerGlobalScope</code></strong> décrit plusieurs fonctionnalités communes aux interfaces {{domxref("Window")}} et {{domxref("WorkerGlobalScope")}}. Chacune de ces interfaces peut, bien entendu, ajouter d'autres fonctionnalités en plus de celles listées ci-dessous.</p>
+Le mixin **`WindowOrWorkerGlobalScope`** décrit plusieurs fonctionnalités communes aux interfaces {{domxref("Window")}} et {{domxref("WorkerGlobalScope")}}. Chacune de ces interfaces peut, bien entendu, ajouter d'autres fonctionnalités en plus de celles listées ci-dessous.
 
-<div class="note">
-<p><strong>Note :</strong> <code>WindowOrWorkerGlobalScope</code> est un mixin et non une interface; vous ne pouvez pas réellement créer un objet de type <code>WindowOrWorkerGlobalScope</code>.</p>
-</div>
+> **Note :** `WindowOrWorkerGlobalScope` est un mixin et non une interface; vous ne pouvez pas réellement créer un objet de type `WindowOrWorkerGlobalScope`.
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<p>Ces propriétés sont définies sur le mixin {{domxref("WindowOrWorkerGlobalScope")}}, et implémentées par {{domxref("Window")}} et {{domxref("WorkerGlobalScope")}}.</p>
+Ces propriétés sont définies sur le mixin {{domxref("WindowOrWorkerGlobalScope")}}, et implémentées par {{domxref("Window")}} et {{domxref("WorkerGlobalScope")}}.
 
-<dl>
- <dt>{{domxref("WindowOrWorkerGlobalScope.caches")}} {{readOnlyinline}}</dt>
- <dd>Renvoie l'objet {{domxref("CacheStorage")}} associé au contexte actuel. Cet objet active des fonctionnalités telles que le stockage des actifs pour une utilisation hors ligne et la génération de réponses personnalisées aux demandes.</dd>
- <dt>{{domxref("WindowOrWorkerGlobalScope.indexedDB")}} {{readonlyInline}}</dt>
- <dd>Fournit un mécanisme permettant aux applications d'accéder de manière asynchrone aux capacités des bases de données indexées; renvoie un objet {{domxref ("IDBFactory")}}.</dd>
- <dt>{{domxref("WindowOrWorkerGlobalScope.isSecureContext")}} {{readOnlyinline}}</dt>
- <dd>Renvoie un booléen indiquant si le contexte actuel est sécurisé (<code>true</code>) ou non (<code>false</code>).</dd>
- <dt>{{domxref("WindowOrWorkerGlobalScope.origin")}} {{readOnlyinline}}</dt>
- <dd>Renvoie l'origine de la portée globale, sérialisée sous forme de chaîne.</dd>
-</dl>
+- {{domxref("WindowOrWorkerGlobalScope.caches")}} {{readOnlyinline}}
+  - : Renvoie l'objet {{domxref("CacheStorage")}} associé au contexte actuel. Cet objet active des fonctionnalités telles que le stockage des actifs pour une utilisation hors ligne et la génération de réponses personnalisées aux demandes.
+- {{domxref("WindowOrWorkerGlobalScope.indexedDB")}} {{readonlyInline}}
+  - : Fournit un mécanisme permettant aux applications d'accéder de manière asynchrone aux capacités des bases de données indexées; renvoie un objet {{domxref ("IDBFactory")}}.
+- {{domxref("WindowOrWorkerGlobalScope.isSecureContext")}} {{readOnlyinline}}
+  - : Renvoie un booléen indiquant si le contexte actuel est sécurisé (`true`) ou non (`false`).
+- {{domxref("WindowOrWorkerGlobalScope.origin")}} {{readOnlyinline}}
+  - : Renvoie l'origine de la portée globale, sérialisée sous forme de chaîne.
 
-<h2 id="Méthodes">Méthodes</h2>
+## Méthodes
 
-<p>Ces propriétés sont définies sur le mixin {{domxref("WindowOrWorkerGlobalScope")}}, et implémentées par {{domxref("Window")}} et {{domxref("WorkerGlobalScope")}}.</p>
+Ces propriétés sont définies sur le mixin {{domxref("WindowOrWorkerGlobalScope")}}, et implémentées par {{domxref("Window")}} et {{domxref("WorkerGlobalScope")}}.
 
-<dl>
- <dt>{{domxref("WindowOrWorkerGlobalScope.atob()")}}</dt>
- <dd>Décode une chaîne de données qui a été encodée à l'aide d'un encodage base 64.</dd>
- <dt>{{domxref("WindowOrWorkerGlobalScope.btoa()")}}</dt>
- <dd>Crée une chaîne ASCII encodée en base 64 à partir d'une chaîne de données binaires.</dd>
- <dt>{{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}</dt>
- <dd>Annule le jeu d'exécutions répétées ) l'aide de {{domxref("WindowOrWorkerGlobalScope.setInterval()")}}.</dd>
- <dt>{{domxref("WindowOrWorkerGlobalScope.clearTimeout()")}}</dt>
- <dd>Annule l'exécution différé définie à l'aide de {{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}.</dd>
- <dt>{{domxref("WindowOrWorkerGlobalScope.createImageBitmap()")}}</dt>
- <dd>Accepte une variété de sources d'images différentes et renvoie un {{domxref ("Promise")}} qui se résout en {{domxref ("ImageBitmap")}}. Facultativement, la source est rognée sur le rectangle de pixels originaire de (sx, sy) avec une largeur sw et une hauteur sh.</dd>
- <dt>{{domxref("WindowOrWorkerGlobalScope.fetch()")}}</dt>
- <dd>Démarre le processus de récupération d'une ressource sur le réseau.</dd>
- <dt>{{domxref("WindowOrWorkerGlobalScope.setInterval()")}}</dt>
- <dd>Planifie une fonction à exécuter chaque fois qu'un nombre donné de millisecondes s'écoule.</dd>
- <dt>{{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}</dt>
- <dd>Planifie une fonction à exécuter dans un laps de temps donné.</dd>
-</dl>
+- {{domxref("WindowOrWorkerGlobalScope.atob()")}}
+  - : Décode une chaîne de données qui a été encodée à l'aide d'un encodage base 64.
+- {{domxref("WindowOrWorkerGlobalScope.btoa()")}}
+  - : Crée une chaîne ASCII encodée en base 64 à partir d'une chaîne de données binaires.
+- {{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}
+  - : Annule le jeu d'exécutions répétées ) l'aide de {{domxref("WindowOrWorkerGlobalScope.setInterval()")}}.
+- {{domxref("WindowOrWorkerGlobalScope.clearTimeout()")}}
+  - : Annule l'exécution différé définie à l'aide de {{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}.
+- {{domxref("WindowOrWorkerGlobalScope.createImageBitmap()")}}
+  - : Accepte une variété de sources d'images différentes et renvoie un {{domxref ("Promise")}} qui se résout en {{domxref ("ImageBitmap")}}. Facultativement, la source est rognée sur le rectangle de pixels originaire de (sx, sy) avec une largeur sw et une hauteur sh.
+- {{domxref("WindowOrWorkerGlobalScope.fetch()")}}
+  - : Démarre le processus de récupération d'une ressource sur le réseau.
+- {{domxref("WindowOrWorkerGlobalScope.setInterval()")}}
+  - : Planifie une fonction à exécuter chaque fois qu'un nombre donné de millisecondes s'écoule.
+- {{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}
+  - : Planifie une fonction à exécuter dans un laps de temps donné.
 
-<h2 id="Spécifications">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("HTML WHATWG",'webappapis.html#windoworworkerglobalscope-mixin', '<code>WindowOrWorkerGlobalScope</code> mixin')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>C'est là que le mixin principal est défini.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('Fetch','#fetch-method','fetch()')}}</td>
-   <td>{{Spec2('Fetch')}}</td>
-   <td>Définition de la méthode <code>fetch()</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('Service Workers', '#self-caches', 'caches')}}</td>
-   <td>{{Spec2('Service Workers')}}</td>
-   <td>Définition de la propriété <code>caches</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('IndexedDB 2', '#dom-windoworworkerglobalscope-indexeddb', 'indexedDB')}}</td>
-   <td>{{Spec2('IndexedDB 2')}}</td>
-   <td>Définition de la propriété <code>indexedDB</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('Secure Contexts', 'webappapis.html#dom-origin', 'isSecureContext')}}</td>
-   <td>{{Spec2('Secure Contexts')}}</td>
-   <td>Définition de la propriété <code>isSecureContext</code>.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                                                            | Statut                               | Commentaire                                   |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | --------------------------------------------- |
+| {{SpecName("HTML WHATWG",'webappapis.html#windoworworkerglobalscope-mixin', '<code>WindowOrWorkerGlobalScope</code> mixin')}} | {{Spec2('HTML WHATWG')}}     | C'est là que le mixin principal est défini.   |
+| {{SpecName('Fetch','#fetch-method','fetch()')}}                                                                                                         | {{Spec2('Fetch')}}             | Définition de la méthode `fetch()`.           |
+| {{SpecName('Service Workers', '#self-caches', 'caches')}}                                                                                             | {{Spec2('Service Workers')}} | Définition de la propriété `caches`.          |
+| {{SpecName('IndexedDB 2', '#dom-windoworworkerglobalscope-indexeddb', 'indexedDB')}}                                                         | {{Spec2('IndexedDB 2')}}     | Définition de la propriété `indexedDB`.       |
+| {{SpecName('Secure Contexts', 'webappapis.html#dom-origin', 'isSecureContext')}}                                                             | {{Spec2('Secure Contexts')}} | Définition de la propriété `isSecureContext`. |
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.WindowOrWorkerGlobalScope")}}</p>
+{{Compat("api.WindowOrWorkerGlobalScope")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("Window")}}</li>
- <li>{{domxref("WorkerGlobalScope")}}</li>
-</ul>
+- {{domxref("Window")}}
+- {{domxref("WorkerGlobalScope")}}
diff --git a/files/fr/web/api/worker/index.md b/files/fr/web/api/worker/index.md
index a77f47cf51..6bed548f09 100644
--- a/files/fr/web/api/worker/index.md
+++ b/files/fr/web/api/worker/index.md
@@ -11,122 +11,96 @@ tags:
   - Workers
 translation_of: Web/API/Worker
 ---
-<p>{{APIRef("Web Workers API")}}</p>
+{{APIRef("Web Workers API")}}
 
-<p>L'interface <strong>Worker</strong> de l'<a href="/fr/docs/Web/API/Web_Workers_API">API Web Workers</a> représente une tâche de fond qui peut facilement être créée et peut envoyer des messages en retour à son créateur. Créer un Worker est aussi simple que d'appeler le constructeur <code>Worker()</code>, en spécifiant un script qui définira le comportement du thread du worker.</p>
+L'interface **Worker** de l'[API Web Workers](/fr/docs/Web/API/Web_Workers_API) représente une tâche de fond qui peut facilement être créée et peut envoyer des messages en retour à son créateur. Créer un Worker est aussi simple que d'appeler le constructeur `Worker()`, en spécifiant un script qui définira le comportement du thread du worker.
 
-<p>Notez qu'un worker peut lui aussi lancer d'autre Worker tant que ces autres workers sont hébergés par une page qui a la même origine que la page parente. (Note: <a href="https://bugs.webkit.org/show_bug.cgi?id=22723">Les workers imbriqués ne sont pas encore implémentés dans WebKit</a>).</p>
+Notez qu'un worker peut lui aussi lancer d'autre Worker tant que ces autres workers sont hébergés par une page qui a la même origine que la page parente. (Note: [Les workers imbriqués ne sont pas encore implémentés dans WebKit](https://bugs.webkit.org/show_bug.cgi?id=22723)).
 
-<p>De plus les workers peuvent utiliser <a href="/en/DOM/XMLHttpRequest"><code>XMLHttpRequest</code></a> pour les communiquer avec le réseau, à l'exception des attributs <code>responseXML</code> et <code>channel</code> qui vont toujours retourner <code>null</code>.</p>
+De plus les workers peuvent utiliser [`XMLHttpRequest`](/en/DOM/XMLHttpRequest) pour les communiquer avec le réseau, à l'exception des attributs `responseXML` et `channel` qui vont toujours retourner `null`.
 
-<p>Toutes les<a href="/fr/DOM/Worker/Functions_available_to_workers"> interfaces et toutes les fonctions</a> ne seront pas disponibles pour le script associé au worker.</p>
+Toutes les[ interfaces et toutes les fonctions](/fr/DOM/Worker/Functions_available_to_workers) ne seront pas disponibles pour le script associé au worker.
 
-<div class="note">
-<p><strong>Note :</strong> Dans Firefox, si vous souhaitez utiliser les workers dans une extension et que vous souhaitez avoir accès au <a href="/en/js-ctypes">js-ctypes</a>, vous devez utiliser le {{ domxref("ChromeWorker") }} à la place.</p>
-</div>
+> **Note :** Dans Firefox, si vous souhaitez utiliser les workers dans une extension et que vous souhaitez avoir accès au [js-ctypes](/en/js-ctypes), vous devez utiliser le {{ domxref("ChromeWorker") }} à la place.
 
-<h2 id="Constructeurs">Constructeurs</h2>
+## Constructeurs
 
-<dl>
- <dt>{{domxref("Worker.Worker", "Worker()")}}</dt>
- <dd>Créer un web worker dédié qui execute le script qui est au bout de l'URL spécifié. Les workers peuvent aussi être créés en utilisant les <a href="/fr/docs/Web/API/Blob">Blobs</a>.</dd>
-</dl>
+- {{domxref("Worker.Worker", "Worker()")}}
+  - : Créer un web worker dédié qui execute le script qui est au bout de l'URL spécifié. Les workers peuvent aussi être créés en utilisant les [Blobs](/fr/docs/Web/API/Blob).
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<p><em>Il hérite de propriétés de son parent, {{domxref("EventTarget")}}, et implémente les propriétés de {{domxref("AbstractWorker")}}.</em></p>
+_Il hérite de propriétés de son parent, {{domxref("EventTarget")}}, et implémente les propriétés de {{domxref("AbstractWorker")}}._
 
-<h3 id="Gestionnaires_dévénements">Gestionnaires d'événements</h3>
+### Gestionnaires d'événements
 
-<dl>
- <dt>{{domxref("AbstractWorker.onerror")}}</dt>
- <dd>Un {{ domxref("EventListener") }} qui est appelé quand un {{domxref("ErrorEvent")}} de type <code>error</code> arrive dans le worker. Il est hérité de {{domxref("AbstractWorker")}}.</dd>
- <dt>{{domxref("Worker.onmessage")}}</dt>
- <dd>Un {{ domxref("EventListener") }} qui est appelé quand un {{domxref("MessageEvent")}} de type <code>message</code> arrive dans le worker — i.e. quand un message est envoyé au document parent depuis le worker via {{domxref("DedicatedWorkerGlobalScope.postMessage")}}. Le message est stocké dans la propriété {{domxref("MessageEvent.data", "data")}} de l'événement.</dd>
- <dt>{{domxref("Worker.onmessageerror")}}</dt>
- <dd>Un {{event("Event_handlers", "event handler")}} qui indique le code à appeler quand un message {{event("messageerror")}} arrive.</dd>
-</dl>
+- {{domxref("AbstractWorker.onerror")}}
+  - : Un {{ domxref("EventListener") }} qui est appelé quand un {{domxref("ErrorEvent")}} de type `error` arrive dans le worker. Il est hérité de {{domxref("AbstractWorker")}}.
+- {{domxref("Worker.onmessage")}}
+  - : Un {{ domxref("EventListener") }} qui est appelé quand un {{domxref("MessageEvent")}} de type `message` arrive dans le worker — i.e. quand un message est envoyé au document parent depuis le worker via {{domxref("DedicatedWorkerGlobalScope.postMessage")}}. Le message est stocké dans la propriété {{domxref("MessageEvent.data", "data")}} de l'événement.
+- {{domxref("Worker.onmessageerror")}}
+  - : Un {{event("Event_handlers", "event handler")}} qui indique le code à appeler quand un message {{event("messageerror")}} arrive.
 
-<dl>
-</dl>
+<!---->
 
-<h2 id="Méthodes">Méthodes</h2>
+## Méthodes
 
-<p><em>Il hérite de son parent, </em> <em>{{domxref("EventTarget")}},</em> et implémente les propriétés de <em>{{domxref("AbstractWorker")}}.</em></p>
+_Il hérite de son parent,_ _{{domxref("EventTarget")}},_ et implémente les propriétés de _{{domxref("AbstractWorker")}}._
 
-<dl>
- <dt>{{domxref("Worker.postMessage()")}}</dt>
- <dd>Envoie un message, qui est n'importe quel objets JavaScript vers la clôture du worker.</dd>
- <dt>{{domxref("Worker.terminate()")}}</dt>
- <dd>Termine immédiatement le worker. Ceci n'offre aucune chance au worker de finir son opération en cours, il est simplement arrêté une fois pour toute. Les instances de <code><a href="/fr/docs/Web/API/ServiceWorker">ServiceWorker</a></code> ne supportent pas cette méthode.</dd>
-</dl>
+- {{domxref("Worker.postMessage()")}}
+  - : Envoie un message, qui est n'importe quel objets JavaScript vers la clôture du worker.
+- {{domxref("Worker.terminate()")}}
+  - : Termine immédiatement le worker. Ceci n'offre aucune chance au worker de finir son opération en cours, il est simplement arrêté une fois pour toute. Les instances de [`ServiceWorker`](/fr/docs/Web/API/ServiceWorker) ne supportent pas cette méthode.
 
-<h2 id="Évènements">Évènements</h2>
+## Évènements
 
-<dl>
- <dt><code><a href="/fr/docs/Web/API/Worker/message_event">message</a></code></dt>
- <dd>Lorsque le worker parent reçoit un message venant du worker. On peut aussi y accéder via la propriété {{domxref("Worker.onmessage")}}.</dd>
- <dt><code><a href="/fr/docs/Web/API/Worker/messageerror_event">messageerror</a></code></dt>
- <dd>Lorsque le worker reçois un message qu'il ne peut <a href="/fr/docs/Web/API/Web_Workers_API/Structured_clone_algorithm">désérialiser</a>. Aussi disponible à travers la propriété {{domxref("Worker.onmessageerror")}}.</dd>
-</dl>
+- [`message`](/fr/docs/Web/API/Worker/message_event)
+  - : Lorsque le worker parent reçoit un message venant du worker. On peut aussi y accéder via la propriété {{domxref("Worker.onmessage")}}.
+- [`messageerror`](/fr/docs/Web/API/Worker/messageerror_event)
+  - : Lorsque le worker reçois un message qu'il ne peut [désérialiser](/fr/docs/Web/API/Web_Workers_API/Structured_clone_algorithm). Aussi disponible à travers la propriété {{domxref("Worker.onmessageerror")}}.
 
-<dl>
- <dt><code><a href="/fr/docs/Web/API/Window/rejectionhandled_event">rejectionhandled</a></code></dt>
- <dd>Levé à chaque fois qu'une {{jsxref("Promise")}} est rejeté, avec ou sans gestionnaire pour intercepter l'exception. Aussi disponible à travers le gestionnaire <code><a href="/fr/docs/Web/API/WindowEventHandlers/onrejectionhandled">onrejectionhandled</a></code>.</dd>
- <dt><code><a href="/fr/docs/Web/API/Window/unhandledrejection_event">unhandledrejection</a></code></dt>
- <dd>Levé quand une {{jsxref("Promise")}} est rejetée sans gestionnaire pour récupérer l'exception. Aussi disponible à travers la propriété <code><a href="/fr/docs/Web/API/WindowEventHandlers/onunhandledrejection">onunhandledrejection</a></code>.</dd>
-</dl>
+<!---->
 
-<h2 id="Exemple">Exemple</h2>
+- [`rejectionhandled`](/fr/docs/Web/API/Window/rejectionhandled_event)
+  - : Levé à chaque fois qu'une {{jsxref("Promise")}} est rejeté, avec ou sans gestionnaire pour intercepter l'exception. Aussi disponible à travers le gestionnaire [`onrejectionhandled`](/fr/docs/Web/API/WindowEventHandlers/onrejectionhandled).
+- [`unhandledrejection`](/fr/docs/Web/API/Window/unhandledrejection_event)
+  - : Levé quand une {{jsxref("Promise")}} est rejetée sans gestionnaire pour récupérer l'exception. Aussi disponible à travers la propriété [`onunhandledrejection`](/fr/docs/Web/API/WindowEventHandlers/onunhandledrejection).
 
-<p>L'extrait de code suivant montre la création d'un objet {{domxref("Worker")}} en utilisant le constructeur {{domxref("Worker.Worker", "Worker()")}} et l'utilisation de l'objet:</p>
+## Exemple
 
-<pre class="brush: js">var monWorker = new Worker("worker.js");
+L'extrait de code suivant montre la création d'un objet {{domxref("Worker")}} en utilisant le constructeur {{domxref("Worker.Worker", "Worker()")}} et l'utilisation de l'objet:
+
+```js
+var monWorker = new Worker("worker.js");
 var premier = document.querySelector('#numero1');
 
 premier.onchange = function() {
   monWorker.postMessage([premiere.valeur, deuxieme.valeur]);
   console.log('Message envoyé au worker');
-}</pre>
-
-<p>Pour un exemple complet, voir <a href="https://github.com/mdn/simple-web-worker">Exemple basique de worker dédié</a> (<a href="http://mdn.github.io/simple-web-worker/">exécuter le worker dédié</a>).</p>
-
-<h2 id="Spécifications">Spécifications</h2>
+}
+```
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statuts</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "#worker", "Worker")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+Pour un exemple complet, voir [Exemple basique de worker dédié](https://github.com/mdn/simple-web-worker) ([exécuter le worker dédié](http://mdn.github.io/simple-web-worker/)).
 
-<h2 id="Compatibilité_avec_les_navigateurs">Compatibilité avec les navigateurs</h2>
+## Spécifications
 
-<div>
-<p>Voici le support des différents type de worker. Voir les pages de chaque worker pour avoir les particularités.</p>
+| Spécification                                                    | Statuts                          | Commentaire |
+| ---------------------------------------------------------------- | -------------------------------- | ----------- |
+| {{SpecName('HTML WHATWG', "#worker", "Worker")}} | {{Spec2('HTML WHATWG')}} |             |
 
+## Compatibilité avec les navigateurs
 
+Voici le support des différents type de worker. Voir les pages de chaque worker pour avoir les particularités.
 
-<p>{{Compat("api.Worker")}}</p>
+{{Compat("api.Worker")}}
 
-<h3 id="Comportement_des_erreur_Cross-origin_sur_les_worker">Comportement des erreur Cross-origin sur les worker</h3>
+### Comportement des erreur Cross-origin sur les worker
 
-<p>Dans les premières versions des spécifications, charger un scripte worker en cross-origin lève une exception <code>SecurityError</code>. Désormais, à la place un évènement {{event("error")}} lancé.</p>
-</div>
+Dans les premières versions des spécifications, charger un scripte worker en cross-origin lève une exception `SecurityError`. Désormais, à la place un évènement {{event("error")}} lancé.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/API/Web_Workers_API/Utilisation_des_web_workers">Utiliser les web Worker</a></li>
- <li><a href="/fr/docs/Web/API/Worker/Functions_and_classes_available_to_workers">Fonctions et classes disponibles dans les Web Workers</a></li>
- <li>D'autres type de workers: {{ domxref("SharedWorker") }}, et <a href="/fr/docs/Web/API/ServiceWorker_API">ServiceWorker</a>.</li>
- <li>Worker non-standard, spécifique à Gecko: {{ domxref("ChromeWorker") }}, utilisé par les extensions.</li>
-</ul>
+- [Utiliser les web Worker](/fr/docs/Web/API/Web_Workers_API/Utilisation_des_web_workers)
+- [Fonctions et classes disponibles dans les Web Workers](/fr/docs/Web/API/Worker/Functions_and_classes_available_to_workers)
+- D'autres type de workers: {{ domxref("SharedWorker") }}, et [ServiceWorker](/fr/docs/Web/API/ServiceWorker_API).
+- Worker non-standard, spécifique à Gecko: {{ domxref("ChromeWorker") }}, utilisé par les extensions.
diff --git a/files/fr/web/api/worker/onmessage/index.md b/files/fr/web/api/worker/onmessage/index.md
index 802fc4771e..5e3e925e37 100644
--- a/files/fr/web/api/worker/onmessage/index.md
+++ b/files/fr/web/api/worker/onmessage/index.md
@@ -7,23 +7,24 @@ tags:
   - Reference
 translation_of: Web/API/Worker/onmessage
 ---
-<p>{{ APIRef("Web Workers API") }}</p>
+{{ APIRef("Web Workers API") }}
 
-<p>La propriété <strong><code>onmessage</code></strong> de l'interface {{domxref("Worker")}} représente un {{event("Event_handlers", "event handler")}}, à savoir une fonction qui est appelée lorsque l'événement {{event("message")}} survient. Ces événements sont du type {{domxref("MessageEvent")}} et sont appelés quand le parent du worker reçoit un message (c’est-à-dire à partir de la méthode {{domxref("DedicatedWorkerGlobalScope.postMessage")}}).</p>
+La propriété **`onmessage`** de l'interface {{domxref("Worker")}} représente un {{event("Event_handlers", "event handler")}}, à savoir une fonction qui est appelée lorsque l'événement {{event("message")}} survient. Ces événements sont du type {{domxref("MessageEvent")}} et sont appelés quand le parent du worker reçoit un message (c’est-à-dire à partir de la méthode {{domxref("DedicatedWorkerGlobalScope.postMessage")}}).
 
-<div class="note">
-<p><strong>Note :</strong> Le contenu du message est fourni par la propriété <code>data</code> de l'événement {{event("message")}}.</p>
-</div>
+> **Note :** Le contenu du message est fourni par la propriété `data` de l'événement {{event("message")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">myWorker.onmessage = function(e) { ... }</pre>
+```js
+myWorker.onmessage = function(e) { ... }
+```
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>L'extrait de code suivant illustre la création d'un objet {{domxref("Worker")}} utilisant le constructeur {{domxref("Worker.Worker", "Worker()")}}. Les messages sont passés au worker lorsque la valeur de l'élément de formulaire <code>first</code> change. Un gestionnaire onmessage est également présent pour s'occuper des messages retournés par le worker.</p>
+L'extrait de code suivant illustre la création d'un objet {{domxref("Worker")}} utilisant le constructeur {{domxref("Worker.Worker", "Worker()")}}. Les messages sont passés au worker lorsque la valeur de l'élément de formulaire `first` change. Un gestionnaire onmessage est également présent pour s'occuper des messages retournés par le worker.
 
-<pre class="brush: js">var myWorker = new Worker("worker.js");
+```js
+var myWorker = new Worker("worker.js");
 
 first.onchange = function() {
   myWorker.postMessage([first.value,second.value]);
@@ -34,46 +35,33 @@ myWorker.onmessage = function(e) {
   result.textContent = e.data;
   console.log('Message reçu du worker');
 }
-</pre>
+```
 
-<p>Dans le script <code>worker.js</code>, un gestionnaire <code>onmessage</code> se charge des messages en provenance du script principal :</p>
+Dans le script `worker.js`, un gestionnaire `onmessage` se charge des messages en provenance du script principal :
 
-<pre class="brush: js">onmessage = function(e) {
+```js
+onmessage = function(e) {
   console.log('Message reçu du script principal');
   var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
   console.log('Renvoi d\'un message au script principal');
   postMessage(workerResult);
-}</pre>
-
-<p>Remarquez comment dans le script principal, <code>onmessage</code> doit être appelée par <code>myWorker</code>, tandis que dans le script du worker vous avez juste besoin d'appeler <code>onmessage</code> parce que le worker est en réalité le contexte global ({{domxref("DedicatedWorkerGlobalScope")}}).</p>
-
-<p>Pour un exemple complet, consulter notre <a href="https://github.com/mdn/simple-web-worker">Exemple basique de worker dédié</a> (<a href="http://mdn.github.io/simple-web-worker/">lancez le worker dédié</a>).</p>
+}
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+Remarquez comment dans le script principal, `onmessage` doit être appelée par `myWorker`, tandis que dans le script du worker vous avez juste besoin d'appeler `onmessage` parce que le worker est en réalité le contexte global ({{domxref("DedicatedWorkerGlobalScope")}}).
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "#handler-worker-onmessage", "Worker.onmessage")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+Pour un exemple complet, consulter notre [Exemple basique de worker dédié](https://github.com/mdn/simple-web-worker) ([lancez le worker dédié](http://mdn.github.io/simple-web-worker/)).
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Spécifications
 
-<div>
+| Spécification                                                                                        | Statut                           | Commentaire |
+| ---------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- |
+| {{SpecName('HTML WHATWG', "#handler-worker-onmessage", "Worker.onmessage")}} | {{Spec2('HTML WHATWG')}} |             |
 
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Worker.onmessage")}}</p>
-</div>
+{{Compat("api.Worker.onmessage")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<p>L'interface {{domxref("Worker")}} à laquelle elle appartient.</p>
+L'interface {{domxref("Worker")}} à laquelle elle appartient.
diff --git a/files/fr/web/api/worker/postmessage/index.md b/files/fr/web/api/worker/postmessage/index.md
index 76ea9d7e7e..19af80e667 100644
--- a/files/fr/web/api/worker/postmessage/index.md
+++ b/files/fr/web/api/worker/postmessage/index.md
@@ -3,35 +3,36 @@ title: Worker.postMessage()
 slug: Web/API/Worker/postMessage
 translation_of: Web/API/Worker/postMessage
 ---
-<p>{{ apiref("Worker") }}</p>
+{{ apiref("Worker") }}
 
-<p>La méthode <code><strong>Worker.postMessage()</strong></code> envoie un message à la portée locale du worker. Cette fonction accepte un seul paramètre, qui est la donnée à envoyer au worker. Cette donnée peut-être de n'importe quelle valeur ou un objet JavaScript pris en charge par l'algorithme de clone structuré, qui inclut les références cycliques.</p>
+La méthode **`Worker.postMessage()`** envoie un message à la portée locale du worker. Cette fonction accepte un seul paramètre, qui est la donnée à envoyer au worker. Cette donnée peut-être de n'importe quelle valeur ou un objet JavaScript pris en charge par l'algorithme de clone structuré, qui inclut les références cycliques.
 
-<p>Le Worker peut renvoyer une information au thread qui l'a créé en utilisant la méthode {{domxref("DedicatedWorkerGlobalScope.postMessage")}}.</p>
+Le Worker peut renvoyer une information au thread qui l'a créé en utilisant la méthode {{domxref("DedicatedWorkerGlobalScope.postMessage")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>worker.</em>postMessage(<em>aMessage</em>, <em>[transferList</em>]);</pre>
+    worker.postMessage(aMessage, [transferList]);
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><em>aMessage</em></dt>
- <dd>L'objet à envoyer au worker; il va être dans le champ de donnée <code>data</code> dans l'évènement délivré au gestonnaire d'évènement {{domxref("Worker.onmessage")}}. Cette donnée peut être de n'importe quelle valeur ou un objet JavaScript pris en charge par l'algorithme de <a href="/fr/docs/Web/API/Web_Workers_API/algorithme_clonage_structure">clone structuré</a>, qui inclut les références cycliques.</dd>
- <dt><em>transferList</em> {{optional_inline}}</dt>
- <dd><p>Un tableau optionnel d'objets {{domxref("Transferable")}} desquels on doit transférer la propriété. Si la propriété d'un objet est transférée, il devient inutilisable (<em>neutralisé</em>) pour le contexte émétteur et devient disponible uniquement pour le worker auquel cela a été envoyé.</p>
- <p>Seulement des objets de types {{domxref("MessagePort")}}, {{domxref("ArrayBuffer")}} ou {{domxref("ImageBitmap")}} peuvent être transférés. <code>null</code> n'est pas une valeur accéptée pour <code>transfer</code>.</p></dd>
-</dl>
+- _aMessage_
+  - : L'objet à envoyer au worker; il va être dans le champ de donnée `data` dans l'évènement délivré au gestonnaire d'évènement {{domxref("Worker.onmessage")}}. Cette donnée peut être de n'importe quelle valeur ou un objet JavaScript pris en charge par l'algorithme de [clone structuré](/fr/docs/Web/API/Web_Workers_API/algorithme_clonage_structure), qui inclut les références cycliques.
+- _transferList_ {{optional_inline}}
 
-<h3 id="Retour">Retour</h3>
+  - : Un tableau optionnel d'objets {{domxref("Transferable")}} desquels on doit transférer la propriété. Si la propriété d'un objet est transférée, il devient inutilisable (_neutralisé_) pour le contexte émétteur et devient disponible uniquement pour le worker auquel cela a été envoyé.
 
-<p>Vide.</p>
+    Seulement des objets de types {{domxref("MessagePort")}}, {{domxref("ArrayBuffer")}} ou {{domxref("ImageBitmap")}} peuvent être transférés. `null` n'est pas une valeur accéptée pour `transfer`.
 
-<h2 id="Exemple">Exemple</h2>
+### Retour
 
-<p>L'extrait de code suivant montre la création d'un objet {{domxref("Worker")}} en utilisant le constructeur {{domxref("Worker.Worker", "Worker()")}}. Quand les deux champs de formulaire (<code>fisrt</code> et <code>second</code>) ont été changés, les évènements {{event("change")}} invoquent <code>postMessage()</code> pour envoyer la valeur des deux entrées au <em>worker</em> courant.</p>
+Vide.
 
-<pre class="brush: js">var myWorker = new Worker('worker.js');
+## Exemple
+
+L'extrait de code suivant montre la création d'un objet {{domxref("Worker")}} en utilisant le constructeur {{domxref("Worker.Worker", "Worker()")}}. Quand les deux champs de formulaire (`fisrt` et `second`) ont été changés, les évènements {{event("change")}} invoquent `postMessage()` pour envoyer la valeur des deux entrées au _worker_ courant.
+
+```js
+var myWorker = new Worker('worker.js');
 
 first.onchange = function() {
   myWorker.postMessage([first.value,second.value]);
@@ -41,21 +42,21 @@ first.onchange = function() {
 second.onchange = function() {
   myWorker.postMessage([first.value,second.value]);
   console.log('Message posted to worker');
-}</pre>
+}
+```
 
-<p>Pour l'exemple en entier, voir <a href="https://github.com/mdn/simple-web-worker">Basic dedicated worder example</a> (<a href="http://mdn.github.io/simple-web-worker/">démonstration</a>).</p>
+Pour l'exemple en entier, voir [Basic dedicated worder example](https://github.com/mdn/simple-web-worker) ([démonstration](http://mdn.github.io/simple-web-worker/)).
 
-<div class="note">
-<p><strong>Note :</strong> <code>postMessage()</code> peut n'envoyer qu'un objet à la fois. Comme ci-dessus, si vous voulez envoyez plusieurs valeurs, vous pouvez utiliser un tableau.</p>
-</div>
+> **Note :** `postMessage()` peut n'envoyer qu'un objet à la fois. Comme ci-dessus, si vous voulez envoyez plusieurs valeurs, vous pouvez utiliser un tableau.
 
-<h3 id="Exemple_de_transfert">Exemple de transfert</h3>
+### Exemple de transfert
 
-<p>Cette exemple montre une extension pour Firefox qui transfert un <code>ArrarBuffer</code> depuis le <em>thread</em> principal vers le <code>ChromeWorker</code>, et le <code>ChromeWorker</code> répond au le thread principal.</p>
+Cette exemple montre une extension pour Firefox qui transfert un `ArrarBuffer` depuis le _thread_ principal vers le `ChromeWorker`, et le `ChromeWorker` répond au le thread principal.
 
-<h4 id="Main_thread_code">Main thread code:</h4>
+#### Main thread code:
 
-<pre class="brush: js">var myWorker = new ChromeWorker(self.path + 'myWorker.js');
+```js
+var myWorker = new ChromeWorker(self.path + 'myWorker.js');
 
 function handleMessageFromWorker(msg) {
     console.log('incoming message from worker, msg:', msg);
@@ -84,11 +85,13 @@ myWorker.postMessage(
     ]
 );
 
-console.info('arrBuf.byteLength post transfer:', arrBuf.byteLength);</pre>
+console.info('arrBuf.byteLength post transfer:', arrBuf.byteLength);
+```
 
-<h4 id="Worker_code">Worker code</h4>
+#### Worker code
 
-<pre class="brush: js">self.onmessage = function (msg) {
+```js
+self.onmessage = function (msg) {
     switch (msg.data.aTopic) {
         case 'do_sendWorkerArrBuff':
                 sendWorkerArrBuff(msg.data.aBuf)
@@ -104,11 +107,13 @@ function sendWorkerArrBuff(aBuf) {
     self.postMessage({aTopic:'do_sendMainArrBuff', aBuf:aBuf}, [aBuf]);
 
     console.info('from worker, POST send back aBuf.byteLength:', aBuf.byteLength);
-}</pre>
+}
+```
 
-<h4 id="Output_logged">Output logged</h4>
+#### Output logged
 
-<pre class="brush: html">arrBuf.byteLength pre transfer: 8                              bootstrap.js:40
+```html
+arrBuf.byteLength pre transfer: 8                              bootstrap.js:40
 arrBuf.byteLength post transfer: 0                             bootstrap.js:42
 
 from worker, PRE send back aBuf.byteLength: 8                  myWorker.js:5:2
@@ -116,37 +121,23 @@ from worker, PRE send back aBuf.byteLength: 8                  myWorker.js:5:2
 incoming message from worker, msg: message { ... }             bootstrap.js:20
 got back buf in main thread, aBuf.byteLength: 8                bootstrap.js:12
 
-from worker, POST send back aBuf.byteLength: 0                 myWorker.js:7:2</pre>
-
-<p><code>byteLength</code> passe à 0 quand il est transferré. Pour voir l'exemple de cette extension de démonstration de Firefox, voir <a href="https://github.com/Noitidart/ChromeWorker/tree/aca57d9cadc4e68af16201bdecbfb6f9a6f9ca6b">GitHub :: ChromeWorker - demo-transfer-arraybuffer</a></p>
+from worker, POST send back aBuf.byteLength: 0                 myWorker.js:7:2
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+`byteLength` passe à 0 quand il est transferré. Pour voir l'exemple de cette extension de démonstration de Firefox, voir [GitHub :: ChromeWorker - demo-transfer-arraybuffer](https://github.com/Noitidart/ChromeWorker/tree/aca57d9cadc4e68af16201bdecbfb6f9a6f9ca6b)
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "#dom-worker-postmessage", "Worker.postMessage()")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+| Spécification                                                                                            | Statut                           | Commentaire |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- |
+| {{SpecName('HTML WHATWG', "#dom-worker-postmessage", "Worker.postMessage()")}} | {{Spec2('HTML WHATWG')}} |             |
 
-<div>
+## Compatibilité des navigateurs
 
+{{Compat("api.Worker.postMessage")}}
 
-<p>{{Compat("api.Worker.postMessage")}}</p>
-[1] Internet Explorer ne supporte pas les objets {{domxref("Transferable")}}.</div>
+\[1] Internet Explorer ne supporte pas les objets {{domxref("Transferable")}}.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>L'interface {{domxref("Worker")}} auquel il appartient.</li>
-</ul>
+- L'interface {{domxref("Worker")}} auquel il appartient.
diff --git a/files/fr/web/api/worker/terminate/index.md b/files/fr/web/api/worker/terminate/index.md
index 6565192498..92f8b0d8b1 100644
--- a/files/fr/web/api/worker/terminate/index.md
+++ b/files/fr/web/api/worker/terminate/index.md
@@ -3,56 +3,44 @@ title: Worker.terminate()
 slug: Web/API/Worker/terminate
 translation_of: Web/API/Worker/terminate
 ---
-<p>{{ apiref("Worker") }}</p>
+{{ apiref("Worker") }}
 
-<p>La méthode <code> <strong>terminate()</strong></code> de l'interface {{domxref("Worker")}} termine immédiatement le {{domxref("Worker")}}. Cette interruption ne permet pas au worker de finaliser ses opérations, il est juste arrêté sur le champ.</p>
+La méthode **`terminate()`** de l'interface {{domxref("Worker")}} termine immédiatement le {{domxref("Worker")}}. Cette interruption ne permet pas au worker de finaliser ses opérations, il est juste arrêté sur le champ.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">myWorker.terminate();</pre>
+```js
+myWorker.terminate();
+```
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<p>Aucun.</p>
+Aucun.
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Néant.</p>
+Néant.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>L'extrait de code suivant montre la création d'un objet {{domxref("Worker")}} en utilisant le constructeur {{domxref("Worker.Worker", "Worker()")}}, qui est alors immédiatement interrompu.</p>
+L'extrait de code suivant montre la création d'un objet {{domxref("Worker")}} en utilisant le constructeur {{domxref("Worker.Worker", "Worker()")}}, qui est alors immédiatement interrompu.
 
-<pre class="brush: js">var myWorker = new Worker("worker.js");
+```js
+var myWorker = new Worker("worker.js");
 
 myWorker.terminate();
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "#dom-worker-terminate", "Worker.terminate()")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+```
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Spécifications
 
-<div>
+| Spécification                                                                                        | Statut                           | Commentaire |
+| ---------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- |
+| {{SpecName('HTML WHATWG', "#dom-worker-terminate", "Worker.terminate()")}} | {{Spec2('HTML WHATWG')}} |             |
 
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Worker.terminate")}}</p>
-</div>
+{{Compat("api.Worker.terminate")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<p>L'interface {{domxref("Worker")}} à laquelle elle appartient.</p>
+L'interface {{domxref("Worker")}} à laquelle elle appartient.
diff --git a/files/fr/web/api/worker/worker/index.md b/files/fr/web/api/worker/worker/index.md
index 1448f5eb35..bfe2236974 100644
--- a/files/fr/web/api/worker/worker/index.md
+++ b/files/fr/web/api/worker/worker/index.md
@@ -6,81 +6,63 @@ tags:
   - Reference
 translation_of: Web/API/Worker/Worker
 ---
-<p>{{APIRef("Worker")}}</p>
+{{APIRef("Worker")}}
 
-<p>Le constructeur <code><strong>Worker()</strong></code> crée un objet {{domxref("Worker")}} qui exécute le script à l'URL spécifiée. Ce script doit obéir à la <a href="/en/Same_origin_policy_for_JavaScript">same-origin policy</a>.</p>
+Le constructeur **`Worker()`** crée un objet {{domxref("Worker")}} qui exécute le script à l'URL spécifiée. Ce script doit obéir à la [same-origin policy](/en/Same_origin_policy_for_JavaScript).
 
-<div class="note">
-<p><strong>Note :</strong> il y a un désaccord entre les éditeurs de navigateur sur la question de savoir si une donnée URI relève ou non de la même origine. Bien que Gecko 10.0 {{ geckoRelease("10.0") }} et suivant accepte les données URIs, ce n'est pas le cas dans tous les autres navigateurs.</p>
-</div>
+> **Note :** il y a un désaccord entre les éditeurs de navigateur sur la question de savoir si une donnée URI relève ou non de la même origine. Bien que Gecko 10.0 {{ geckoRelease("10.0") }} et suivant accepte les données URIs, ce n'est pas le cas dans tous les autres navigateurs.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">var myWorker = new Worker(aURL, options);</pre>
+```js
+var myWorker = new Worker(aURL, options);
+```
 
-<h3 id="Arguments">Arguments</h3>
+### Arguments
 
-<dl>
- <dt><em>aURL</em></dt>
- <dd>Est un {{domxref("DOMString")}} représentant l'URL du script que le worker va exécuter. Il doit obéir à la same-origin policy.</dd>
- <dt>options {{optional_inline}}</dt>
- <dd>
- <p>Un objet contenant des propriétés pour définir les options. Les propriétés suivantes sont valables:</p>
+- _aURL_
+  - : Est un {{domxref("DOMString")}} représentant l'URL du script que le worker va exécuter. Il doit obéir à la same-origin policy.
+- options {{optional_inline}}
 
- <ul>
-  <li><code>type</code>: Une {{domxref("DOMString")}} définissant le type de worker à créer. The valeur peuvent être <code>classic</code> ou <code>module</code>. Si cette prpriété n'est pas définie, la valeur sera <code>classic</code>.</li>
-  <li><code>credentials</code>: Une {{domxref("DOMString")}} définissant le type de politique d'origine à utiliser pour le <em>worker</em>. Les valeurs peuvent être <dfn><code>omit</code></dfn>, <code><dfn>same-origin</dfn></code> ou <dfn><code>include</code>. </dfn>Si cette propriété n'est pas définie, ou que type est défini à <code>classic</code>, la valeur sera <code>classic</code>.</li>
-  <li><code>name</code>: Une {{domxref("DOMString")}} définissant un identifiant pour l'environment du worker {{domxref("DedicatedWorkerGlobalScope")}}, souvent utilisé pour le débogage.</li>
- </ul>
- </dd>
-</dl>
+  - : Un objet contenant des propriétés pour définir les options. Les propriétés suivantes sont valables:
 
-<h3 id="Exceptions">Exceptions</h3>
+    - `type`: Une {{domxref("DOMString")}} définissant le type de worker à créer. The valeur peuvent être `classic` ou `module`. Si cette prpriété n'est pas définie, la valeur sera `classic`.
+    - `credentials`: Une {{domxref("DOMString")}} définissant le type de politique d'origine à utiliser pour le _worker_. Les valeurs peuvent être _`omit`_, `same-origin` ou *`include`. *Si cette propriété n'est pas définie, ou que type est défini à `classic`, la valeur sera `classic`.
+    - `name`: Une {{domxref("DOMString")}} définissant un identifiant pour l'environment du worker {{domxref("DedicatedWorkerGlobalScope")}}, souvent utilisé pour le débogage.
 
-<ul>
- <li><code>SecurityError</code> est levé si le document n'est pas autorisé à démarer des <em>workers</em>; par exemple si l'URL à une syntaxe invalide ou que la politique d'origine n'est pas respectée.</li>
- <li><code>NetworkError</code> est levé si le type MIME du script du worker est incorect. Il doit toujours être défini à <code>text/javascript</code>.</li>
- <li><code>SyntaxError</code> est levé si l'URL ne peut pas être analysée.</li>
-</ul>
+### Exceptions
 
-<h2 id="Exemple">Exemple</h2>
+- `SecurityError` est levé si le document n'est pas autorisé à démarer des _workers_; par exemple si l'URL à une syntaxe invalide ou que la politique d'origine n'est pas respectée.
+- `NetworkError` est levé si le type MIME du script du worker est incorect. Il doit toujours être défini à `text/javascript`.
+- `SyntaxError` est levé si l'URL ne peut pas être analysée.
 
-<p>L'extrait de code suivant illustre la création d'un objet {{domxref("Worker")}} en utilisant le constructeur <code>Worker()</code> et l'usage qui peut alors en être fait :</p>
+## Exemple
 
-<pre class="brush: js">var myWorker = new Worker("worker.js");
+L'extrait de code suivant illustre la création d'un objet {{domxref("Worker")}} en utilisant le constructeur `Worker()` et l'usage qui peut alors en être fait :
+
+```js
+var myWorker = new Worker("worker.js");
 
 first.onchange = function() {
   myWorker.postMessage([first.value,second.value]);
   console.log('Message envoyé au worker');
-}</pre>
+}
+```
 
-<p>Pour un exemple complet, consultez notre <a href="https://github.com/mdn/simple-web-worker">Exemple basique d'un worker dédié </a>(<a href="http://mdn.github.io/simple-web-worker/">lancer le worker dédié</a>).</p>
+Pour un exemple complet, consultez notre [Exemple basique d'un worker dédié ](https://github.com/mdn/simple-web-worker)([lancer le worker dédié](http://mdn.github.io/simple-web-worker/)).
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "#dom-worker", "Worker()")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                            | Statut                           | Commentaire |
+| ------------------------------------------------------------------------ | -------------------------------- | ----------- |
+| {{SpecName('HTML WHATWG', "#dom-worker", "Worker()")}} | {{Spec2('HTML WHATWG')}} |             |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.Worker.Worker")}}</p>
+{{Compat("api.Worker.Worker")}}
 
-<div class="blockIndicator note">
-<p><strong>Note :</strong> Un navigateur peut indiquer avoir un support complet de <code>Worker()</code> même s'il ne supporte pas les fichiers worker écrit comme des modules. À partir du premier août 2019, aucun navigateur n'est connu pour avoir un support en production des fichiers <em>worker</em> écrit comme des modules. Sans ces suppports, les fichiers <em>workers</em> écrit sous forme de module et les modules utilisés dans les workers doivent être transpilés ou convertis en non-module pour être utilisables.</p>
-</div>
+> **Note :** Un navigateur peut indiquer avoir un support complet de `Worker()` même s'il ne supporte pas les fichiers worker écrit comme des modules. À partir du premier août 2019, aucun navigateur n'est connu pour avoir un support en production des fichiers _worker_ écrit comme des modules. Sans ces suppports, les fichiers _workers_ écrit sous forme de module et les modules utilisés dans les workers doivent être transpilés ou convertis en non-module pour être utilisables.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<p>L'interface {{domxref("Worker")}} auquel il appartient.</p>
+L'interface {{domxref("Worker")}} auquel il appartient.
diff --git a/files/fr/web/api/workerglobalscope/console/index.md b/files/fr/web/api/workerglobalscope/console/index.md
index e60d13bf38..7639bfe044 100644
--- a/files/fr/web/api/workerglobalscope/console/index.md
+++ b/files/fr/web/api/workerglobalscope/console/index.md
@@ -10,41 +10,41 @@ tags:
   - lecture seule
 translation_of: Web/API/WorkerGlobalScope/console
 ---
-<p>{{APIRef("Web Workers API")}}{{Non-standard_header}}</p>
+{{APIRef("Web Workers API")}}{{Non-standard_header}}
 
-<p>La propriété en lecture seule <code><strong>console</strong></code> de l'interface {{domxref("WorkerGlobalScope")}} retourne un objet {{domxref("Console")}} donnant accès à la console du navigateur pour le worker.</p>
+La propriété en lecture seule **`console`** de l'interface {{domxref("WorkerGlobalScope")}} retourne un objet {{domxref("Console")}} donnant accès à la console du navigateur pour le worker.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">var consoleObj = self.console;</pre>
+```js
+var consoleObj = self.console;
+```
 
-<h3 id="Valeur">Valeur</h3>
+### Valeur
 
-<p>Un objet {{domxref("Console")}}.</p>
+Un objet {{domxref("Console")}}.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Cette propriété vous permet d'avoir accès à la console du navigateur à des fins de débogage dans un worker. Par exemple, vous pouvez appeler</p>
+Cette propriété vous permet d'avoir accès à la console du navigateur à des fins de débogage dans un worker. Par exemple, vous pouvez appeler
 
-<pre class="brush: js">console.log('test');</pre>
+```js
+console.log('test');
+```
 
-<p>dans un worker (qui est tout simplement l'équivalent de <code>self.console.log('test');</code>, car appelé dans le contexte du worker, qui peut être référencé par {{domxref("WorkerGlobalScope.self")}}), afin de retourner un message de test dans la console du navigateur.</p>
+dans un worker (qui est tout simplement l'équivalent de `self.console.log('test');`, car appelé dans le contexte du worker, qui peut être référencé par {{domxref("WorkerGlobalScope.self")}}), afin de retourner un message de test dans la console du navigateur.
 
-<p>Si vous appelez <code>console.log()</code> depuis un {{domxref("DedicatedWorkerGlobalScope")}} ou un autre contexte qui agit sur une seule fenêtre chargée, la console de l'onglet correspondant recevra le message. En revanche, si vous appelez <code>console.log()</code> depuis un {{domxref("SharedWorkerGlobalScope")}}, la console globale du navigateur recevra le message.</p>
+Si vous appelez `console.log()` depuis un {{domxref("DedicatedWorkerGlobalScope")}} ou un autre contexte qui agit sur une seule fenêtre chargée, la console de l'onglet correspondant recevra le message. En revanche, si vous appelez `console.log()` depuis un {{domxref("SharedWorkerGlobalScope")}}, la console globale du navigateur recevra le message.
 
-<h2 id="Specifications">Spécifications</h2>
+## Spécifications
 
-<p>Ne fait pas encore parti d'une spécification.</p>
+Ne fait pas encore parti d'une spécification.
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
+{{Compat("api.WorkerGlobalScope.console")}}
 
+## Voir aussi
 
-<p>{{Compat("api.WorkerGlobalScope.console")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("Console")}}</li>
- <li>{{domxref("WorkerGlobalScope")}}</li>
-</ul>
+- {{domxref("Console")}}
+- {{domxref("WorkerGlobalScope")}}
diff --git a/files/fr/web/api/workerglobalscope/dump/index.md b/files/fr/web/api/workerglobalscope/dump/index.md
index 9d06cf02d9..d2086da3d8 100644
--- a/files/fr/web/api/workerglobalscope/dump/index.md
+++ b/files/fr/web/api/workerglobalscope/dump/index.md
@@ -3,50 +3,52 @@ title: WorkerGlobalScope.dump()
 slug: Web/API/WorkerGlobalScope/dump
 translation_of: Web/API/WorkerGlobalScope/dump
 ---
-<div>{{APIRef("Web Workers API")}}</div>
+{{APIRef("Web Workers API")}}
 
-<div class="warning">
-<p><strong>Attention :</strong> Cette fonctionnalité n'est ni standard, ni en voie de standardisation. Ne l'utilisez pas pour des sites accessibles sur le Web : elle ne fonctionnera pas pour tout utilisateur. Il peut également y avoir d'importantes incompatibilités entre les implémentations et son comportement peut être modifié dans le futur.</p>
-</div>
+> **Attention :** Cette fonctionnalité n'est ni standard, ni en voie de standardisation. Ne l'utilisez pas pour des sites accessibles sur le Web : elle ne fonctionnera pas pour tout utilisateur. Il peut également y avoir d'importantes incompatibilités entre les implémentations et son comportement peut être modifié dans le futur.
 
-<p>La méthode <code><strong>dump()</strong></code> de l'interface {{domxref("WorkerGlobalScope")}} permet d'écrire des messages vers <code>stdout</code> — i.e. dans le terminal, seulement sur Firefox. C'est la même chose que {{domxref("window.dump")}} dans Firefox, mais pour les <em>worker</em>s.</p>
+La méthode **`dump()`** de l'interface {{domxref("WorkerGlobalScope")}} permet d'écrire des messages vers `stdout` — i.e. dans le terminal, seulement sur Firefox. C'est la même chose que {{domxref("window.dump")}} dans Firefox, mais pour les *worker*s.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">dump('Mon message\n');</pre>
+```js
+dump('Mon message\n');
+```
 
-<h3 id="Paramètre">Paramètre</h3>
+### Paramètre
 
-<p>Une {{domxref("DOMString")}} contenant le message que vous voulez envoyer.</p>
+Une {{domxref("DOMString")}} contenant le message que vous voulez envoyer.
 
-<h3 id="Retour">Retour</h3>
+### Retour
 
-<p>Rien.</p>
+Rien.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Pour écrire quelque chose depuis votre <em>worker</em> vers votre terminal, vous devez d'abord ouvrir une instance de Firefox depuis votre invité de commande ou terminal. Par exemple, sous Mac OS X vous le lancer en utilisant quelque chose comme (en supposant que vous êtes dans le répertoire de l'application):</p>
+Pour écrire quelque chose depuis votre _worker_ vers votre terminal, vous devez d'abord ouvrir une instance de Firefox depuis votre invité de commande ou terminal. Par exemple, sous Mac OS X vous le lancer en utilisant quelque chose comme (en supposant que vous êtes dans le répertoire de l'application):
 
-<pre class="brush: bash">./Firefox.app/Contents/MacOS/firefox-bin -profile /tmp -no-remote</pre>
+```bash
+./Firefox.app/Contents/MacOS/firefox-bin -profile /tmp -no-remote
+```
 
-<p>Maintenant allez dans <code>about:config</code> et activez la préférence <code>browser.dom.window.dump.enabled</code>.</p>
+Maintenant allez dans `about:config` et activez la préférence `browser.dom.window.dump.enabled`.
 
-<p>Après, lancez un worker contenant la ligne suivante:</p>
+Après, lancez un worker contenant la ligne suivante:
 
-<pre class="brush: js">dump('test\n');</pre>
+```js
+dump('test\n');
+```
 
-<p>Vous devriez observer le message «test» apparaître dans le terminal.</p>
+Vous devriez observer le message «test» apparaître dans le terminal.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Cette méthode n’apparaît dans aucune spécification.</p>
+Cette méthode n’apparaît dans aucune spécification.
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
+{{Compat("api.WorkerGlobalScope.dump")}}
 
+## Voir aussi
 
-<p>{{Compat("api.WorkerGlobalScope.dump")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<p>{{domxref("WorkerGlobalScope")}}</p>
+{{domxref("WorkerGlobalScope")}}
diff --git a/files/fr/web/api/workerglobalscope/importscripts/index.md b/files/fr/web/api/workerglobalscope/importscripts/index.md
index eb47eac872..409e24cafe 100644
--- a/files/fr/web/api/workerglobalscope/importscripts/index.md
+++ b/files/fr/web/api/workerglobalscope/importscripts/index.md
@@ -3,69 +3,51 @@ title: WorkerGlobalScope.importScripts()
 slug: Web/API/WorkerGlobalScope/importScripts
 translation_of: Web/API/WorkerGlobalScope/importScripts
 ---
-<p>{{APIRef("Web Workers API")}}</p>
+{{APIRef("Web Workers API")}}
 
-<p>La méthode <code><strong>importScripts()</strong></code> de l'interface synchrome {{domxref("WorkerGlobalScope")}} importe un ou plusieurs scripts dans l'environnement du worker.</p>
+La méthode **`importScripts()`** de l'interface synchrome {{domxref("WorkerGlobalScope")}} importe un ou plusieurs scripts dans l'environnement du worker.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">self.importScripts('foo.js');
-self.importScripts('foo.js', 'bar.js', ...);</pre>
+```js
+self.importScripts('foo.js');
+self.importScripts('foo.js', 'bar.js', ...);
+```
 
-<h3 id="Specifications">Paramètres</h3>
+### Paramètres
 
-<p>Une liste d'objets {{domxref("DOMString")}} séparés par des virgules et représentant les scripts à importer.</p>
+Une liste d'objets {{domxref("DOMString")}} séparés par des virgules et représentant les scripts à importer.
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Rien.</p>
+Rien.
 
-<h3 id="Exceptions">Exceptions</h3>
+### Exceptions
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Exception</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>NetworkError</code></td>
-   <td>Importer un script qui n'est pas servi avec un type MIME valide. (i.e. <code>text/javascript</code>).</td>
-  </tr>
- </tbody>
-</table>
+| Exception      | Description                                                                                |
+| -------------- | ------------------------------------------------------------------------------------------ |
+| `NetworkError` | Importer un script qui n'est pas servi avec un type MIME valide. (i.e. `text/javascript`). |
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Si vous disposez d'un code présent dans un script indépendant appelé <code>foo.js</code> que vous souhaitez utiliser à l'intérieur de worker.js, vous pouvez l'importer de la façon suivante:</p>
+Si vous disposez d'un code présent dans un script indépendant appelé `foo.js` que vous souhaitez utiliser à l'intérieur de worker.js, vous pouvez l'importer de la façon suivante:
 
-<pre class="brush: js">importScripts('foo.js');</pre>
+```js
+importScripts('foo.js');
+```
 
-<p><code>importScripts()</code> et <code>self.importScripts()</code> sont effectivement équivalentes — les deux expressions correspondent à la façon d'appeler <code>importScripts()</code> au sein du contexte local du worker.</p>
+`importScripts()` et `self.importScripts()` sont effectivement équivalentes — les deux expressions correspondent à la façon d'appeler `importScripts()` au sein du contexte local du worker.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', '#dom-workerglobalscope-importscripts', 'importScripts()')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                        | Statut                           | Commentaire |
+| -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- |
+| {{SpecName('HTML WHATWG', '#dom-workerglobalscope-importscripts', 'importScripts()')}} | {{Spec2('HTML WHATWG')}} |             |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.WorkerGlobalScope.importScripts")}}</p>
+{{Compat("api.WorkerGlobalScope.importScripts")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<p>{{domxref("WorkerGlobalScope")}}</p>
+{{domxref("WorkerGlobalScope")}}
diff --git a/files/fr/web/api/workerglobalscope/index.md b/files/fr/web/api/workerglobalscope/index.md
index 946df930aa..1f37730fe7 100644
--- a/files/fr/web/api/workerglobalscope/index.md
+++ b/files/fr/web/api/workerglobalscope/index.md
@@ -10,136 +10,107 @@ tags:
   - Workers
 translation_of: Web/API/WorkerGlobalScope
 ---
-<p>{{APIRef("Web Workers API")}}</p>
+{{APIRef("Web Workers API")}}
 
-<p>L'interface <code><strong>WorkerGlobalScope</strong></code> de l'<a href="/en-US/docs/Web/API/Web_Workers_API">API Web Workers</a> est une interface représentant la portée de tout worker. Les Workers n'ont pas de contexte de navigation; cette portée contient les informations généralement véhiculées par les objets {{domxref("Window")}} — dans ce cas les gestionnaires d'événements, la console ou l'objet {{domxref("WorkerNavigator")}} associé. Chaque <code>WorkerGlobalScope</code> a sa propre boucle d'événements.</p>
+L'interface **`WorkerGlobalScope`** de l'[API Web Workers](/en-US/docs/Web/API/Web_Workers_API) est une interface représentant la portée de tout worker. Les Workers n'ont pas de contexte de navigation; cette portée contient les informations généralement véhiculées par les objets {{domxref("Window")}} — dans ce cas les gestionnaires d'événements, la console ou l'objet {{domxref("WorkerNavigator")}} associé. Chaque `WorkerGlobalScope` a sa propre boucle d'événements.
 
-<p>Cette interface est généralement spécialisée par chaque type de worker : {{domxref("DedicatedWorkerGlobalScope")}} pour les workers dédiés, {{domxref("SharedWorkerGlobalScope")}} pour les workers partagés, et {{domxref("ServiceWorkerGlobalScope")}} pour <a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker</a>. La propriété <code>self</code> renvoie la portée spécialisée pour chaque contexte.</p>
+Cette interface est généralement spécialisée par chaque type de worker : {{domxref("DedicatedWorkerGlobalScope")}} pour les workers dédiés, {{domxref("SharedWorkerGlobalScope")}} pour les workers partagés, et {{domxref("ServiceWorkerGlobalScope")}} pour [ServiceWorker](/en-US/docs/Web/API/ServiceWorker_API). La propriété `self` renvoie la portée spécialisée pour chaque contexte.
 
-<h2 id="Propriétés">Propriétés</h2>
-
-<p><em>Cette interface hérite des propriétés de l'interface {{domxref("EventTarget")}} et implémente les propriétés de {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, et {{domxref("WindowEventHandlers")}}.</em></p>
-
-<h3 id="Propriétés_standard">Propriétés standard</h3>
-
-<dl>
- <dt>{{domxref("WorkerGlobalScope.navigator")}} {{readOnlyinline}}</dt>
- <dd>Renvoie le {{domxref("WorkerNavigator")}} associé au worker. C'est un objet navigator spécifique, principalement un sous-ensemble de {{domxref("Navigator")}} pour la navigation dans les portées, mais adapté aux workers.</dd>
- <dt>{{domxref("WorkerGlobalScope.self")}} {{readOnlyinline}}</dt>
- <dd>Renvoie une référence au <code>WorkerGlobalScope</code> lui-même. La plupart du temps, il s'agit d'une portée spécifique comme {{domxref("DedicatedWorkerGlobalScope")}},  {{domxref("SharedWorkerGlobalScope")}} ou {{domxref("ServiceWorkerGlobalScope")}}.</dd>
- <dt>{{domxref("WorkerGlobalScope.location")}} {{readOnlyinline}}</dt>
- <dd>Renvoie le {{domxref("WorkerLocation")}} associé au worker. Il s'agit d'un objet de localisation spécifique, principalement un sous-ensemble de {{domxref ("Location")}} pour les portées de navigation, mais adapté aux workers.</dd>
-</dl>
-
-<h3 id="Propriétés_non_standard">Propriétés non standard</h3>
-
-<dl>
- <dt>{{domxref("WorkerGlobalScope.performance")}} {{readOnlyinline}} {{Non-standard_inline}}</dt>
- <dd>Renvoie la {{domxref ("Performance")}} associée au worker. Il s'agit d'un objet de performance standard, sauf que seul un sous-ensemble de sa propriété et de ses méthodes est disponible pour les nœuds de calcul.</dd>
- <dt>{{domxref("WorkerGlobalScope.console")}} {{readOnlyinline}} {{Non-standard_inline}}</dt>
- <dd>Renvoie la {{domxref("Console")}} associée au worker.</dd>
-</dl>
-
-<h3 id="Gestionnaires_dévénements">Gestionnaires d'événements</h3>
-
-<p>Cette interface hérite des gestionnaires d'événements de l'interface {{domxref ("EventTarget")}} et implémente les gestionnaires d'événements de {{domxref ("WindowTimers")}} et {{domxref ("WindowBase64")}}.</p>
-
-<dl>
- <dt>{{domxref("WorkerGlobalScope.onerror")}}</dt>
- <dd>Est un {{domxref ("EventHandler")}} représentant le code à appeler lorsque l'événement {{event ("error")}} est déclenché.</dd>
- <dt>{{domxref("WorkerGlobalScope.onoffline")}}</dt>
- <dd>Est un {{domxref ("EventHandler")}} représentant le code à appeler lorsque l'événement {{event ("offline")}} est déclenché.</dd>
- <dt>{{domxref("WorkerGlobalScope.ononline")}}</dt>
- <dd>Est un {{domxref ("EventHandler")}} représentant le code à appeler lorsque l'événement {{event ("online")}} est déclenché.</dd>
- <dt>{{domxref("WorkerGlobalScope.onlanguagechange")}}</dt>
- <dd>Un {{domxref ("EventHandler")}} déclenché sur l'objet de portée global / worker lorsque les langues préférées de l'utilisateur changent.</dd>
-</dl>
-
-<dl>
- <dt>{{domxref("WorkerGlobalScope.onclose")}} {{Non-standard_inline}}</dt>
- <dd>Est un {{domxref ("EventHandler")}} représentant le code à appeler lorsque l'événement {{event ("close")}} est déclenché.</dd>
-</dl>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<p>Cette interface hérite des méthodes de l'interface {{domxref ("EventTarget")}} et implémente les méthodes de {{domxref ("WindowTimers")}}, {{domxref ("WindowBase64")}}, {{domxref ("WindowEventHandlers")}} et {{domxref ("GlobalFetch")}}.</p>
-
-<h3 id="Méthodes_standard">Méthodes standard</h3>
-
-<dl>
- <dt>{{domxref("WorkerGlobalScope.close()")}}</dt>
- <dd>Ignore toutes les tâches mises en file d'attente dans la boucle d'événements de <code>WorkerGlobalScope</code>, fermant ainsi cette portée particulière.</dd>
- <dt>{{domxref("WorkerGlobalScope.importScripts()")}}</dt>
- <dd>Importe un ou plusieurs scripts dans la portée du worker. Vous pouvez en spécifier autant que vous le souhaitez, séparés par des virgules. Par exemple:<code> importScripts('foo.js', 'bar.js');</code></dd>
-</dl>
-
-<h3 id="Méthodes_non_standard">Méthodes non standard</h3>
-
-<dl>
- <dt>{{domxref("WorkerGlobalScope.dump()")}} {{non-standard_inline}}</dt>
- <dd>Vous permet d'écrire un message stdout — c'est-à-dire dans votre terminal. C'est la même chose que {{domxref ("window.dump")}} de Firefox, mais pour les workers.</dd>
-</dl>
-
-<h3 id="Méthodes_mises_en_œuvre_dailleurs">Méthodes mises en œuvre d'ailleurs</h3>
-
-<dl>
- <dt>{{domxref("WindowBase64.atob()")}}</dt>
- <dd>Décode une chaîne de données qui a été encodée à l'aide d'un encodage base 64.</dd>
- <dt>{{domxref("WindowBase64.btoa()")}}</dt>
- <dd>Crée une chaîne ASCII encodée en base 64 à partir d'une chaîne de données binaires.</dd>
- <dt>{{domxref("WindowTimers.clearInterval()")}}</dt>
- <dd>Annule l'exécution répétée définie à l'aide de {{domxref ("WindowTimers.setInterval ()")}}.</dd>
- <dt>{{domxref("WindowTimers.clearTimeout()")}}</dt>
- <dd>Annule l'exécution répétée définie à l'aide de {{domxref ("WindowTimers.setTimeout ()")}}.</dd>
- <dt>{{domxref("GlobalFetch.fetch()")}}</dt>
- <dd>Démarre le processus de récupération d'une ressource.</dd>
- <dt>{{domxref("WindowTimers.setInterval()")}}</dt>
- <dd>Planifie l'exécution d'une fonction toutes les X millisecondes.</dd>
- <dt>{{domxref("WindowTimers.setTimeout()")}}</dt>
- <dd>Définit un délai pour l'exécution d'une fonction.</dd>
-</dl>
-
-<h2 id="Exemple">Exemple</h2>
-
-<p>Vous n'accéderez pas à <code>WorkerGlobalScope</code> directement dans votre code; cependant, ses propriétés et méthodes sont héritées par des portées globales plus spécifiques telles que {{domxref ("DedicatedWorkerGlobalScope")}} et {{domxref ("SharedWorkerGlobalScope")}}. Par exemple, vous pouvez importer un autre script dans le worker et imprimer le contenu de l'objet <code>navigator</code> de l'étendue du worker en utilisant les deux lignes suivantes:</p>
-
-<pre class="brush: js">importScripts('foo.js');
-console.log(navigator);</pre>
-
-<div class="note">
-<p><strong>Note :</strong> Étant donné que la portée globale du script de worker est effectivement la portée globale du worker que vous exécutez ({{domxref ("DedicatedWorkerGlobalScope")}} ou autre) et que toutes les portées globales de worker héritent des méthodes, des propriétés, etc. À partir de <code>WorkerGlobalScope</code>, vous pouvez exécuter des lignes telles que celles ci-dessus sans spécifier d'objet parent.</p>
-</div>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', '#workerglobalscope', 'WorkerGlobalScope')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Aucun changement par rapport à {{SpecName ("Web Workers")}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('Web Workers', '#workerglobalscope', 'WorkerGlobalScope')}}</td>
-   <td>{{Spec2('Web Workers')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.WorkerGlobalScope")}}</p>
-
-<h2 id="See_also">Voir aussi</h2>
-
-<ul>
- <li>Autre interface d'objet globale: {{domxref("Window")}}, {{domxref("DedicatedWorkerGlobalScope")}}, {{domxref("SharedWorkerGlobalScope")}}, , {{domxref("ServiceWorkerGlobalScope")}}</li>
- <li>Autres interfaces liées aux travailleurs: {{domxref("Worker")}}, {{domxref("WorkerLocation")}}, {{domxref("WorkerGlobalScope")}}, et {{domxref("ServiceWorkerGlobalScope")}}.</li>
- <li><a href="/fr/docs/Web/Guide/Performance/Using_web_workers">Utilisation de web workers.</a></li>
-</ul>
+## Propriétés
+
+_Cette interface hérite des propriétés de l'interface {{domxref("EventTarget")}} et implémente les propriétés de {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, et {{domxref("WindowEventHandlers")}}._
+
+### Propriétés standard
+
+- {{domxref("WorkerGlobalScope.navigator")}} {{readOnlyinline}}
+  - : Renvoie le {{domxref("WorkerNavigator")}} associé au worker. C'est un objet navigator spécifique, principalement un sous-ensemble de {{domxref("Navigator")}} pour la navigation dans les portées, mais adapté aux workers.
+- {{domxref("WorkerGlobalScope.self")}} {{readOnlyinline}}
+  - : Renvoie une référence au `WorkerGlobalScope` lui-même. La plupart du temps, il s'agit d'une portée spécifique comme {{domxref("DedicatedWorkerGlobalScope")}},  {{domxref("SharedWorkerGlobalScope")}} ou {{domxref("ServiceWorkerGlobalScope")}}.
+- {{domxref("WorkerGlobalScope.location")}} {{readOnlyinline}}
+  - : Renvoie le {{domxref("WorkerLocation")}} associé au worker. Il s'agit d'un objet de localisation spécifique, principalement un sous-ensemble de {{domxref ("Location")}} pour les portées de navigation, mais adapté aux workers.
+
+### Propriétés non standard
+
+- {{domxref("WorkerGlobalScope.performance")}} {{readOnlyinline}} {{Non-standard_inline}}
+  - : Renvoie la {{domxref ("Performance")}} associée au worker. Il s'agit d'un objet de performance standard, sauf que seul un sous-ensemble de sa propriété et de ses méthodes est disponible pour les nœuds de calcul.
+- {{domxref("WorkerGlobalScope.console")}} {{readOnlyinline}} {{Non-standard_inline}}
+  - : Renvoie la {{domxref("Console")}} associée au worker.
+
+### Gestionnaires d'événements
+
+Cette interface hérite des gestionnaires d'événements de l'interface {{domxref ("EventTarget")}} et implémente les gestionnaires d'événements de {{domxref ("WindowTimers")}} et {{domxref ("WindowBase64")}}.
+
+- {{domxref("WorkerGlobalScope.onerror")}}
+  - : Est un {{domxref ("EventHandler")}} représentant le code à appeler lorsque l'événement {{event ("error")}} est déclenché.
+- {{domxref("WorkerGlobalScope.onoffline")}}
+  - : Est un {{domxref ("EventHandler")}} représentant le code à appeler lorsque l'événement {{event ("offline")}} est déclenché.
+- {{domxref("WorkerGlobalScope.ononline")}}
+  - : Est un {{domxref ("EventHandler")}} représentant le code à appeler lorsque l'événement {{event ("online")}} est déclenché.
+- {{domxref("WorkerGlobalScope.onlanguagechange")}}
+  - : Un {{domxref ("EventHandler")}} déclenché sur l'objet de portée global / worker lorsque les langues préférées de l'utilisateur changent.
+
+<!---->
+
+- {{domxref("WorkerGlobalScope.onclose")}} {{Non-standard_inline}}
+  - : Est un {{domxref ("EventHandler")}} représentant le code à appeler lorsque l'événement {{event ("close")}} est déclenché.
+
+## Méthodes
+
+Cette interface hérite des méthodes de l'interface {{domxref ("EventTarget")}} et implémente les méthodes de {{domxref ("WindowTimers")}}, {{domxref ("WindowBase64")}}, {{domxref ("WindowEventHandlers")}} et {{domxref ("GlobalFetch")}}.
+
+### Méthodes standard
+
+- {{domxref("WorkerGlobalScope.close()")}}
+  - : Ignore toutes les tâches mises en file d'attente dans la boucle d'événements de `WorkerGlobalScope`, fermant ainsi cette portée particulière.
+- {{domxref("WorkerGlobalScope.importScripts()")}}
+  - : Importe un ou plusieurs scripts dans la portée du worker. Vous pouvez en spécifier autant que vous le souhaitez, séparés par des virgules. Par exemple:` importScripts('foo.js', 'bar.js');`
+
+### Méthodes non standard
+
+- {{domxref("WorkerGlobalScope.dump()")}} {{non-standard_inline}}
+  - : Vous permet d'écrire un message stdout — c'est-à-dire dans votre terminal. C'est la même chose que {{domxref ("window.dump")}} de Firefox, mais pour les workers.
+
+### Méthodes mises en œuvre d'ailleurs
+
+- {{domxref("WindowBase64.atob()")}}
+  - : Décode une chaîne de données qui a été encodée à l'aide d'un encodage base 64.
+- {{domxref("WindowBase64.btoa()")}}
+  - : Crée une chaîne ASCII encodée en base 64 à partir d'une chaîne de données binaires.
+- {{domxref("WindowTimers.clearInterval()")}}
+  - : Annule l'exécution répétée définie à l'aide de {{domxref ("WindowTimers.setInterval ()")}}.
+- {{domxref("WindowTimers.clearTimeout()")}}
+  - : Annule l'exécution répétée définie à l'aide de {{domxref ("WindowTimers.setTimeout ()")}}.
+- {{domxref("GlobalFetch.fetch()")}}
+  - : Démarre le processus de récupération d'une ressource.
+- {{domxref("WindowTimers.setInterval()")}}
+  - : Planifie l'exécution d'une fonction toutes les X millisecondes.
+- {{domxref("WindowTimers.setTimeout()")}}
+  - : Définit un délai pour l'exécution d'une fonction.
+
+## Exemple
+
+Vous n'accéderez pas à `WorkerGlobalScope` directement dans votre code; cependant, ses propriétés et méthodes sont héritées par des portées globales plus spécifiques telles que {{domxref ("DedicatedWorkerGlobalScope")}} et {{domxref ("SharedWorkerGlobalScope")}}. Par exemple, vous pouvez importer un autre script dans le worker et imprimer le contenu de l'objet `navigator` de l'étendue du worker en utilisant les deux lignes suivantes:
+
+```js
+importScripts('foo.js');
+console.log(navigator);
+```
+
+> **Note :** Étant donné que la portée globale du script de worker est effectivement la portée globale du worker que vous exécutez ({{domxref ("DedicatedWorkerGlobalScope")}} ou autre) et que toutes les portées globales de worker héritent des méthodes, des propriétés, etc. À partir de `WorkerGlobalScope`, vous pouvez exécuter des lignes telles que celles ci-dessus sans spécifier d'objet parent.
+
+## Spécifications
+
+| Spécification                                                                                | Statut                           | Commentaire                                                          |
+| -------------------------------------------------------------------------------------------- | -------------------------------- | -------------------------------------------------------------------- |
+| {{SpecName('HTML WHATWG', '#workerglobalscope', 'WorkerGlobalScope')}} | {{Spec2('HTML WHATWG')}} | Aucun changement par rapport à {{SpecName ("Web Workers")}}. |
+| {{SpecName('Web Workers', '#workerglobalscope', 'WorkerGlobalScope')}} | {{Spec2('Web Workers')}} | Définition initiale.                                                 |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.WorkerGlobalScope")}}
+
+## Voir aussi
+
+- Autre interface d'objet globale: {{domxref("Window")}}, {{domxref("DedicatedWorkerGlobalScope")}}, {{domxref("SharedWorkerGlobalScope")}}, , {{domxref("ServiceWorkerGlobalScope")}}
+- Autres interfaces liées aux travailleurs: {{domxref("Worker")}}, {{domxref("WorkerLocation")}}, {{domxref("WorkerGlobalScope")}}, et {{domxref("ServiceWorkerGlobalScope")}}.
+- [Utilisation de web workers.](/fr/docs/Web/Guide/Performance/Using_web_workers)
diff --git a/files/fr/web/api/workerglobalscope/location/index.md b/files/fr/web/api/workerglobalscope/location/index.md
index cdda4cbfc8..c21bab74f5 100644
--- a/files/fr/web/api/workerglobalscope/location/index.md
+++ b/files/fr/web/api/workerglobalscope/location/index.md
@@ -3,27 +3,32 @@ title: WorkerGlobalScope.location
 slug: Web/API/WorkerGlobalScope/location
 translation_of: Web/API/WorkerGlobalScope/location
 ---
-<p>{{APIRef("Web Workers API")}}</p>
+{{APIRef("Web Workers API")}}
 
-<p>La propriété en lecture seule <code><strong>location</strong></code> de l'interface {{domxref("WorkerGlobalScope")}} retourne l'objet {{domxref("WorkerLocation")}} associé au worker. C'est un objet location spécifique, essentiellement un sous-ensemble de {{domxref("Location")}} pour les contextes de navigation, mais adapté aux workers.</p>
+La propriété en lecture seule **`location`** de l'interface {{domxref("WorkerGlobalScope")}} retourne l'objet {{domxref("WorkerLocation")}} associé au worker. C'est un objet location spécifique, essentiellement un sous-ensemble de {{domxref("Location")}} pour les contextes de navigation, mais adapté aux workers.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">var locationObj = self.location;</pre>
+```js
+var locationObj = self.location;
+```
 
-<h3 id="Specifications">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Un objet {{domxref("WorkerLocation")}}.</p>
+Un objet {{domxref("WorkerLocation")}}.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Si vous appelez l'instruction suivante dans un document délivré par <code>localhost:8000</code></p>
+Si vous appelez l'instruction suivante dans un document délivré par `localhost:8000`
 
-<pre class="brush: js">console.log(location);</pre>
+```js
+console.log(location);
+```
 
-<p>à l'intérieur d'un worker (ce qui équivaut à <code>self.console.log(self.location);</code>, puisqu'il est appelé dans le contexte du worker qui peut être référencé par {{domxref("WorkerGlobalScope.self")}}), la console vous retournera un objet {{domxref("WorkerLocation")}}  — comme ce qui suit :</p>
+à l'intérieur d'un worker (ce qui équivaut à `self.console.log(self.location);`, puisqu'il est appelé dans le contexte du worker qui peut être référencé par {{domxref("WorkerGlobalScope.self")}}), la console vous retournera un objet {{domxref("WorkerLocation")}}  — comme ce qui suit :
 
-<pre class="brush: js">WorkerLocation {hash: "", search: "", pathname: "/worker.js", port: "8000", hostname: "localhost"…}
+```js
+WorkerLocation {hash: "", search: "", pathname: "/worker.js", port: "8000", hostname: "localhost"…}
   hash: ""
   host: "localhost:8000"
   hostname: "localhost"
@@ -33,37 +38,23 @@ translation_of: Web/API/WorkerGlobalScope/location
   port: "8000"
   protocol: "http:"
   search: ""
-  __proto__: WorkerLocation</pre>
+  __proto__: WorkerLocation
+```
 
-<p>Vous pouvez utiliser l'objet location pour récupérer des informations supplémentaires sur la localisation du document, comme vous pourriez le faire avec un objet {{domxref("Location")}} normal.</p>
+Vous pouvez utiliser l'objet location pour récupérer des informations supplémentaires sur la localisation du document, comme vous pourriez le faire avec un objet {{domxref("Location")}} normal.
 
-<div class="note">
-<p><strong>Note :</strong> Firefox rencontre un bogue avec l'utilisation de <code>console.log</code> à l'intérieur des workers partagés/service (voir {{Bug("1058644")}}), ce qui peut occasionner d'étranges résultats, mais cela devrait être bientôt corrigé.</p>
-</div>
+> **Note :** Firefox rencontre un bogue avec l'utilisation de `console.log` à l'intérieur des workers partagés/service (voir {{Bug("1058644")}}), ce qui peut occasionner d'étranges résultats, mais cela devrait être bientôt corrigé.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', '#dom-workerglobalscope-location', 'location')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                        | Statut                           | Commentaire |
+| ---------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- |
+| {{SpecName('HTML WHATWG', '#dom-workerglobalscope-location', 'location')}} | {{Spec2('HTML WHATWG')}} |             |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
+{{Compat("api.WorkerGlobalScope.location")}}
 
+## Voir aussi
 
-<p>{{Compat("api.WorkerGlobalScope.location")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<p>{{domxref("WorkerGlobalScope")}}</p>
+{{domxref("WorkerGlobalScope")}}
diff --git a/files/fr/web/api/workerglobalscope/navigator/index.md b/files/fr/web/api/workerglobalscope/navigator/index.md
index f73f000d03..f9895b1185 100644
--- a/files/fr/web/api/workerglobalscope/navigator/index.md
+++ b/files/fr/web/api/workerglobalscope/navigator/index.md
@@ -3,27 +3,32 @@ title: WorkerGlobalScope.navigator
 slug: Web/API/WorkerGlobalScope/navigator
 translation_of: Web/API/WorkerGlobalScope/navigator
 ---
-<p>{{APIRef("Web Workers API")}}</p>
+{{APIRef("Web Workers API")}}
 
-<p>La propriété en lecture seule <code><strong>navigator</strong></code> de l'interface {{domxref("WorkerGlobalScope")}} retourne le {{domxref("WorkerNavigator")}} associé au worker. C'est un objet navigator spécifique, essentiellement un sous-ensemble de {{domxref("Navigator")}} pour les contextes de navigation, mais adapté aux workers.</p>
+La propriété en lecture seule **`navigator`** de l'interface {{domxref("WorkerGlobalScope")}} retourne le {{domxref("WorkerNavigator")}} associé au worker. C'est un objet navigator spécifique, essentiellement un sous-ensemble de {{domxref("Navigator")}} pour les contextes de navigation, mais adapté aux workers.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">var navigatorObj = self.navigator;</pre>
+```js
+var navigatorObj = self.navigator;
+```
 
-<h3 id="Specifications">Valeur de retour</h3>
+### Valeur de retour
 
-<p>Un objet  {{domxref("WorkerNavigator")}}.</p>
+Un objet  {{domxref("WorkerNavigator")}}.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Si vous appelez</p>
+Si vous appelez
 
-<pre class="brush: js">console.log(navigator);</pre>
+```js
+console.log(navigator);
+```
 
-<p>à l'intérieur d'un worker (ce qui équivaut à <code>self.console.log(self.navigator);</code>, puisqu'il est appelé dans le contexte du worker qui peut être référencé par {{domxref("WorkerGlobalScope.self")}}), la console vous retournera un objet {{domxref("WorkerNavigator")}} — comme ce qui suit :</p>
+à l'intérieur d'un worker (ce qui équivaut à `self.console.log(self.navigator);`, puisqu'il est appelé dans le contexte du worker qui peut être référencé par {{domxref("WorkerGlobalScope.self")}}), la console vous retournera un objet {{domxref("WorkerNavigator")}} — comme ce qui suit :
 
-<pre class="brush: js">Object {onLine: true, userAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_1) Ap…ML, like Gecko) Chrome/40.0.2214.93 Safari/537.36", product: "Gecko", platform: "MacIntel", appVersion: "5.0 (Macintosh; Intel Mac OS X 10_10_1) AppleWebKi…ML, like Gecko) Chrome/40.0.2214.93 Safari/537.36"…}
+```js
+Object {onLine: true, userAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_1) Ap…ML, like Gecko) Chrome/40.0.2214.93 Safari/537.36", product: "Gecko", platform: "MacIntel", appVersion: "5.0 (Macintosh; Intel Mac OS X 10_10_1) AppleWebKi…ML, like Gecko) Chrome/40.0.2214.93 Safari/537.36"…}
     appCodeName: "Mozilla"
     appName: "Netscape"
     appVersion: "5.0 (Macintosh; Intel Mac OS X 10_10_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.93 Safari/537.36"
@@ -32,35 +37,23 @@ translation_of: Web/API/WorkerGlobalScope/navigator
     platform: "MacIntel"
     product: "Gecko"
     userAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.93 Safari/537.36"
-    __proto__: Object</pre>
+    __proto__: Object
+```
 
-<p>Vous pouvez utiliser l'objet navigator pour récupérer des informations supplémentaires sur l'environnement d'exécution, comme vous pourriez le faire avec un objet {{domxref("Navigator")}} normal.</p>
+Vous pouvez utiliser l'objet navigator pour récupérer des informations supplémentaires sur l'environnement d'exécution, comme vous pourriez le faire avec un objet {{domxref("Navigator")}} normal.
 
-<div class="note">
-<p><strong>Note :</strong> Firefox rencontre un bogue avec l'utilisation de <code>console.log</code> à l'intérieur des workers partagés/service (voir {{Bug("1058644")}}), ce qui peut occasionner d'étranges résultats, mais cela devrait être bientôt corrigé.</p>
-</div>
+> **Note :** Firefox rencontre un bogue avec l'utilisation de `console.log` à l'intérieur des workers partagés/service (voir {{Bug("1058644")}}), ce qui peut occasionner d'étranges résultats, mais cela devrait être bientôt corrigé.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', '#dom-worker-navigator', 'navigator')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                            | Statut                           | Commentaire |
+| ---------------------------------------------------------------------------------------- | -------------------------------- | ----------- |
+| {{SpecName('HTML WHATWG', '#dom-worker-navigator', 'navigator')}} | {{Spec2('HTML WHATWG')}} |             |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.WorkerGlobalScope.navigator")}}</p>
+{{Compat("api.WorkerGlobalScope.navigator")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<p>{{domxref("WorkerNavigator")}}</p>
+{{domxref("WorkerNavigator")}}
diff --git a/files/fr/web/api/workerglobalscope/onerror/index.md b/files/fr/web/api/workerglobalscope/onerror/index.md
index 902c87d842..0ceb5102d7 100644
--- a/files/fr/web/api/workerglobalscope/onerror/index.md
+++ b/files/fr/web/api/workerglobalscope/onerror/index.md
@@ -3,45 +3,34 @@ title: WorkerGlobalScope.onerror
 slug: Web/API/WorkerGlobalScope/onerror
 translation_of: Web/API/WorkerGlobalScope/onerror
 ---
-<p>{{APIRef("Web Workers API")}}</p>
+{{APIRef("Web Workers API")}}
 
-<p>La propriété <strong><code>onerror</code></strong> de l'interface {{domxref("WorkerGlobalScope")}} représente un {{event("Event_handlers", "event handler")}} à appeler lorsque l'événement {{event("error")}} survient et se propage à travers le {{domxref("Worker")}}.</p>
+La propriété **`onerror`** de l'interface {{domxref("WorkerGlobalScope")}} représente un {{event("Event_handlers", "event handler")}} à appeler lorsque l'événement {{event("error")}} survient et se propage à travers le {{domxref("Worker")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre>self.onerror = function() { ... };</pre>
+    self.onerror = function() { ... };
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>L'extrait de code suivant montre un gestionnaire <code>onerror</code> placé au sein d'un worker :</p>
+L'extrait de code suivant montre un gestionnaire `onerror` placé au sein d'un worker :
 
-<pre class="brush: js">self.onerror = function() {
+```js
+self.onerror = function() {
   console.log('There is an error inside your worker!');
-}</pre>
+}
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "#handler-workerglobalscope-onerror", "WorkerGlobalScope.onerror")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                | Statut                           | Commentaire |
+| ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- |
+| {{SpecName('HTML WHATWG', "#handler-workerglobalscope-onerror", "WorkerGlobalScope.onerror")}} | {{Spec2('HTML WHATWG')}} |             |
 
-<h2 id="Compatibilité_des_naviguateurs">Compatibilité des naviguateurs</h2>
+## Compatibilité des naviguateurs
 
+{{Compat("api.WorkerGlobalScope.onerror")}}
 
+## Voir aussi
 
-<p>{{Compat("api.WorkerGlobalScope.onerror")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<p>L'interface {{domxref("WorkerGlobalScope")}} à laquelle il appartient.</p>
+L'interface {{domxref("WorkerGlobalScope")}} à laquelle il appartient.
diff --git a/files/fr/web/api/workerglobalscope/onlanguagechange/index.md b/files/fr/web/api/workerglobalscope/onlanguagechange/index.md
index 27ea56c768..d7cf356a12 100644
--- a/files/fr/web/api/workerglobalscope/onlanguagechange/index.md
+++ b/files/fr/web/api/workerglobalscope/onlanguagechange/index.md
@@ -3,45 +3,34 @@ title: WorkerGlobalScope.onlanguagechange
 slug: Web/API/WorkerGlobalScope/onlanguagechange
 translation_of: Web/API/WorkerGlobalScope/onlanguagechange
 ---
-<p>{{APIRef("Web Workers API")}}</p>
+{{APIRef("Web Workers API")}}
 
-<p>La propriété <strong><code>onlanguagechange</code></strong> de l'interface {{domxref("WorkerGlobalScope")}} représente un {{event("Event_handlers", "event handler")}} à appeler lorsque l'événement {{event("languagechange")}} survient et se propage à travers le {{domxref("Worker")}}.</p>
+La propriété **`onlanguagechange`** de l'interface {{domxref("WorkerGlobalScope")}} représente un {{event("Event_handlers", "event handler")}} à appeler lorsque l'événement {{event("languagechange")}} survient et se propage à travers le {{domxref("Worker")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre>self.onlanguagechange = function() { ... };</pre>
+    self.onlanguagechange = function() { ... };
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>L'extrait de code suivant montre un gestionnaire <code>onlanguagechange</code> placé au sein d'un worker :</p>
+L'extrait de code suivant montre un gestionnaire `onlanguagechange` placé au sein d'un worker :
 
-<pre class="brush: js">self.onlanguagechange = function() {
+```js
+self.onlanguagechange = function() {
   console.log('Your preferred language settings have been changed');
-}</pre>
+}
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "#handler-workerglobalscope-onlanguagechange", "WorkerGlobalScope.onlanguagechange")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                                        | Statut                           | Commentaire |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- |
+| {{SpecName('HTML WHATWG', "#handler-workerglobalscope-onlanguagechange", "WorkerGlobalScope.onlanguagechange")}} | {{Spec2('HTML WHATWG')}} |             |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
+{{Compat("api.WorkerGlobalScope.onlanguagechange")}}
 
+## Voir aussi
 
-<p>{{Compat("api.WorkerGlobalScope.onlanguagechange")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<p>L'interface {{domxref("WorkerGlobalScope")}} à laquelle elle appartient.</p>
+L'interface {{domxref("WorkerGlobalScope")}} à laquelle elle appartient.
diff --git a/files/fr/web/api/workerglobalscope/onoffline/index.md b/files/fr/web/api/workerglobalscope/onoffline/index.md
index e9630579f9..aa4ae2bcaf 100644
--- a/files/fr/web/api/workerglobalscope/onoffline/index.md
+++ b/files/fr/web/api/workerglobalscope/onoffline/index.md
@@ -3,45 +3,34 @@ title: WorkerGlobalScope.onoffline
 slug: Web/API/WorkerGlobalScope/onoffline
 translation_of: Web/API/WorkerGlobalScope/onoffline
 ---
-<p>{{APIRef("Web Workers API")}}</p>
+{{APIRef("Web Workers API")}}
 
-<p>La propriété <strong><code>onoffline</code></strong> de l'interface {{domxref("WorkerGlobalScope")}} représente un {{event("Event_handlers", "event handler")}} à appeler lorsque l'événement {{event("offline")}} survient et se propage à travers le {{domxref("Worker")}}.</p>
+La propriété **`onoffline`** de l'interface {{domxref("WorkerGlobalScope")}} représente un {{event("Event_handlers", "event handler")}} à appeler lorsque l'événement {{event("offline")}} survient et se propage à travers le {{domxref("Worker")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre>self.onoffline = function() { ... };</pre>
+    self.onoffline = function() { ... };
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>L'extrait de code suivant montre un gestionnaire <code>onoffline</code> placé dans un worker :</p>
+L'extrait de code suivant montre un gestionnaire `onoffline` placé dans un worker :
 
-<pre class="brush: js">self.onoffline = function() {
+```js
+self.onoffline = function() {
   console.log('Your worker is now offline');
-}</pre>
+}
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "#handler-workerglobalscope-onoffline", "WorkerGlobalScope.onoffline")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                        | Statut                           | Commentaire |
+| ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- |
+| {{SpecName('HTML WHATWG', "#handler-workerglobalscope-onoffline", "WorkerGlobalScope.onoffline")}} | {{Spec2('HTML WHATWG')}} |             |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
+{{Compat("api.WorkerGlobalScope.onoffline")}}
 
+## Voir aussi
 
-<p>{{Compat("api.WorkerGlobalScope.onoffline")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<p>L'interface {{domxref("WorkerGlobalScope")}} à laquelle il appartient.</p>
+L'interface {{domxref("WorkerGlobalScope")}} à laquelle il appartient.
diff --git a/files/fr/web/api/workerglobalscope/ononline/index.md b/files/fr/web/api/workerglobalscope/ononline/index.md
index 69d45c24e4..370f365861 100644
--- a/files/fr/web/api/workerglobalscope/ononline/index.md
+++ b/files/fr/web/api/workerglobalscope/ononline/index.md
@@ -3,43 +3,34 @@ title: WorkerGlobalScope.ononline
 slug: Web/API/WorkerGlobalScope/ononline
 translation_of: Web/API/WorkerGlobalScope/ononline
 ---
-<p>{{APIRef("Web Workers API")}}</p>
+{{APIRef("Web Workers API")}}
 
-<p>La propriété <strong><code>ononline</code></strong> de l'interface {{domxref("WorkerGlobalScope")}} représente un {{event("Event_handlers", "event handler")}} à appeler lorsque l'événement {{event("online")}} survient et se propage à travers le {{domxref("Worker")}}.</p>
+La propriété **`ononline`** de l'interface {{domxref("WorkerGlobalScope")}} représente un {{event("Event_handlers", "event handler")}} à appeler lorsque l'événement {{event("online")}} survient et se propage à travers le {{domxref("Worker")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre>self.ononline = function() { ... };</pre>
+    self.ononline = function() { ... };
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>L'extrait de code suivant montre un gestionnaire <code>ononline</code> placé dans un worker :</p>
+L'extrait de code suivant montre un gestionnaire `ononline` placé dans un worker :
 
-<pre class="brush: js">self.ononline = function() {
+```js
+self.ononline = function() {
   console.log('Your worker is now online');
-}</pre>
+}
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "#handler-workerglobalscope-ononline", "WorkerGlobalScope.ononline")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                    | Statut                           | Commentaire |
+| -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- |
+| {{SpecName('HTML WHATWG', "#handler-workerglobalscope-ononline", "WorkerGlobalScope.ononline")}} | {{Spec2('HTML WHATWG')}} |             |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.WorkerGlobalScope.ononline")}}</p>
+{{Compat("api.WorkerGlobalScope.ononline")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<p>L'interface {{domxref("WorkerGlobalScope")}} à laquelle il appartient.</p>
+L'interface {{domxref("WorkerGlobalScope")}} à laquelle il appartient.
diff --git a/files/fr/web/api/workerglobalscope/self/index.md b/files/fr/web/api/workerglobalscope/self/index.md
index 8adef5a5f2..48a1670388 100644
--- a/files/fr/web/api/workerglobalscope/self/index.md
+++ b/files/fr/web/api/workerglobalscope/self/index.md
@@ -3,27 +3,32 @@ title: WorkerGlobalScope.self
 slug: Web/API/WorkerGlobalScope/self
 translation_of: Web/API/WorkerGlobalScope/self
 ---
-<p>{{APIRef("Web Workers API")}}</p>
+{{APIRef("Web Workers API")}}
 
-<p>La propriété en lecture seule <code><strong>self</strong></code> de l'interface {{domxref("WorkerGlobalScope")}} retourne une référence au <code>WorkerGlobalScope</code> lui-même. La plupart du temps il s'agit d'un contexte spécifique comme {{domxref("DedicatedWorkerGlobalScope")}},  {{domxref("SharedWorkerGlobalScope")}}, ou {{domxref("ServiceWorkerGlobalScope")}}.</p>
+La propriété en lecture seule **`self`** de l'interface {{domxref("WorkerGlobalScope")}} retourne une référence au `WorkerGlobalScope` lui-même. La plupart du temps il s'agit d'un contexte spécifique comme {{domxref("DedicatedWorkerGlobalScope")}},  {{domxref("SharedWorkerGlobalScope")}}, ou {{domxref("ServiceWorkerGlobalScope")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: js">var selfRef = self;</pre>
+```js
+var selfRef = self;
+```
 
-<h3 id="Specifications">Valeur</h3>
+### Valeur
 
-<p>Un objet global scope (qui diffère selon le type du worker concerné, comme indiqué ci-dessus).</p>
+Un objet global scope (qui diffère selon le type du worker concerné, comme indiqué ci-dessus).
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Si vous appelez</p>
+Si vous appelez
 
-<pre class="brush: js">console.log(self);</pre>
+```js
+console.log(self);
+```
 
-<p>au sein d'un worker, vous obtiendrez un worker global scope du même type que l'objet worker écrit sur la console — quelque chose comme ce qui suit :</p>
+au sein d'un worker, vous obtiendrez un worker global scope du même type que l'objet worker écrit sur la console — quelque chose comme ce qui suit :
 
-<pre class="brush: js">DedicatedWorkerGlobalScope {
+```js
+DedicatedWorkerGlobalScope {
 undefined: undefined, Infinity: Infinity, Math: MathConstructor, NaN: NaN, Intl: Object…}
     Infinity: Infinity
     Array: function Array() { [native code] }
@@ -36,7 +41,7 @@ undefined: undefined, Infinity: Infinity, Math: MathConstructor, NaN: NaN, Intl:
       prototype: Array[0]
       unobserve: function unobserve() { [native code] }
       __proto__: function Empty() {}
-      &lt;function scope&gt;
+      <function scope>
     ArrayBuffer: function ArrayBuffer() { [native code] }
     Blob: function Blob() { [native code] }
     Boolean: function Boolean() { [native code] }
@@ -44,32 +49,21 @@ undefined: undefined, Infinity: Infinity, Math: MathConstructor, NaN: NaN, Intl:
     Date: function Date() { [native code] }
     DedicatedWorkerGlobalScope: function DedicatedWorkerGlobalScope() { [native code] }
     Error: function Error() { [native code] }
-<em>// etc. etc.</em>
-</pre>
+// etc. etc.
+```
 
-<p>Cette trace fournit la liste complète des objets disponibles dans le contexte d'un worker, et constitue un test très utile lorsqu'il s'agit de savoir ce qui est disponible ou non au sein d'un worker. Nous maintenons aussi une liste des <a href="/en-US/docs/Web/API/Worker/Functions_and_classes_available_to_workers">Fonctions et classes disponibles dans les Web Workers</a>.</p>
+Cette trace fournit la liste complète des objets disponibles dans le contexte d'un worker, et constitue un test très utile lorsqu'il s'agit de savoir ce qui est disponible ou non au sein d'un worker. Nous maintenons aussi une liste des [Fonctions et classes disponibles dans les Web Workers](/en-US/docs/Web/API/Worker/Functions_and_classes_available_to_workers).
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', '#dom-workerglobalscope-self', 'self')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                            | Statut                           | Commentaire |
+| ---------------------------------------------------------------------------------------- | -------------------------------- | ----------- |
+| {{SpecName('HTML WHATWG', '#dom-workerglobalscope-self', 'self')}} | {{Spec2('HTML WHATWG')}} |             |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.WorkerGlobalScope.self")}}</p>
+{{Compat("api.WorkerGlobalScope.self")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<p>{{domxref("WorkerGlobalScope")}}</p>
+{{domxref("WorkerGlobalScope")}}
diff --git a/files/fr/web/api/workerlocation/index.md b/files/fr/web/api/workerlocation/index.md
index ef84bcb1b7..e6bd9e25cb 100644
--- a/files/fr/web/api/workerlocation/index.md
+++ b/files/fr/web/api/workerlocation/index.md
@@ -6,74 +6,53 @@ tags:
   - Web Workers
 translation_of: Web/API/WorkerLocation
 ---
-<div>{{APIRef("Web Workers API")}}</div>
+{{APIRef("Web Workers API")}}
 
-<p>L'interface <strong><code>WorkerLocation</code></strong> définit l'emplacement complet du script exécuté par le {{domxref("Worker")}}. Un tel objet est initialisé pour chaque <em>worker </em>et est disponible via la propriété {{domxref("WorkerGlobalScope.location")}} récupérée par l'appel à <code>window.self.location</code>.</p>
+L'interface **`WorkerLocation`** définit l'emplacement complet du script exécuté par le {{domxref("Worker")}}. Un tel objet est initialisé pour chaque _worker_ et est disponible via la propriété {{domxref("WorkerGlobalScope.location")}} récupérée par l'appel à `window.self.location`.
 
-<p>Cette interface est uniquement visible à l'intérieur d'un script JavaScript exécuté dans le contexte d'un <em>web worker</em>.</p>
+Cette interface est uniquement visible à l'intérieur d'un script JavaScript exécuté dans le contexte d'un _web worker_.
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<p><em>L'interface <code>WorkerLocation</code> n'hérite d'aucune propriété mais implémente les propriétés définies par l'interface {{domxref("URLUtilsReadOnly")}}.</em></p>
+_L'interface `WorkerLocation` n'hérite d'aucune propriété mais implémente les propriétés définies par l'interface {{domxref("URLUtilsReadOnly")}}._
 
-<dl>
- <dt>{{domxref("URLUtilsReadOnly.href")}} {{readOnlyInline}}</dt>
- <dd>{{domxref("DOMString")}} contenant la totalité de URL du script exécuté dans le {{domxref("Worker")}}.</dd>
- <dt>{{domxref("URLUtilsReadOnly.protocol")}} {{readOnlyInline}}</dt>
- <dd>{{domxref("DOMString")}} contenant le schéma du protocole de l'URL du script exécuté dans le {{domxref("Worker")}}, incluant les deux points de terminaison<code>':'</code>.</dd>
- <dt>{{domxref("URLUtilsReadOnly.host")}} {{readOnlyInline}}</dt>
- <dd>{{domxref("DOMString")}} contenant l'hôte, constitué du nom d'hôte <em>hostname</em>, de deux points <code>':'</code>, et du numéro de <em>port</em> de l'URL du script exécuté dans le {{domxref("Worker")}}.</dd>
- <dt>{{domxref("URLUtilsReadOnly.hostname")}} {{readOnlyInline}}</dt>
- <dd>{{domxref("DOMString")}} contenant le nom de domaine du script exécuté dans le {{domxref("Worker")}}.</dd>
- <dt>{{domxref("URLUtilsReadOnly.origin")}} {{readOnlyInline}}</dt>
- <dd>{{domxref("DOMString")}} contenant l'origine de l'URL sous sa forme canonique.</dd>
- <dt>{{domxref("URLUtilsReadOnly.port")}} {{readOnlyInline}}</dt>
- <dd>{{domxref("DOMString")}} contenant le numéro de port de l'URL du script exécuté dans le {{domxref("Worker")}}.</dd>
- <dt>{{domxref("URLUtilsReadOnly.pathname")}} {{readOnlyInline}}</dt>
- <dd>{{domxref("DOMString")}} contenant une barre oblique initiale <code>'/'</code> suivie du chemin de l'URL du script exécuté dans le {{domxref("Worker")}}.</dd>
- <dt>{{domxref("URLUtilsReadOnly.search")}} {{readOnlyInline}}</dt>
- <dd>{{domxref("DOMString")}} contenant un point d'interrogation intial <code>'?'</code> suivi des paramètres de l'URL du script exécuté dans le {{domxref("Worker")}}.</dd>
- <dt>{{domxref("URLUtilsReadOnly.hash")}} {{readOnlyInline}}</dt>
- <dd>{{domxref("DOMString")}} contenant un dièse initial <code>'#'</code> suivi de l'identifiant de l'ancre de l'URL du script exécuté dans le {{domxref("Word'hôteker")}}.</dd>
-</dl>
+- {{domxref("URLUtilsReadOnly.href")}} {{readOnlyInline}}
+  - : {{domxref("DOMString")}} contenant la totalité de URL du script exécuté dans le {{domxref("Worker")}}.
+- {{domxref("URLUtilsReadOnly.protocol")}} {{readOnlyInline}}
+  - : {{domxref("DOMString")}} contenant le schéma du protocole de l'URL du script exécuté dans le {{domxref("Worker")}}, incluant les deux points de terminaison`':'`.
+- {{domxref("URLUtilsReadOnly.host")}} {{readOnlyInline}}
+  - : {{domxref("DOMString")}} contenant l'hôte, constitué du nom d'hôte *hostname*, de deux points `':'`, et du numéro de _port_ de l'URL du script exécuté dans le {{domxref("Worker")}}.
+- {{domxref("URLUtilsReadOnly.hostname")}} {{readOnlyInline}}
+  - : {{domxref("DOMString")}} contenant le nom de domaine du script exécuté dans le {{domxref("Worker")}}.
+- {{domxref("URLUtilsReadOnly.origin")}} {{readOnlyInline}}
+  - : {{domxref("DOMString")}} contenant l'origine de l'URL sous sa forme canonique.
+- {{domxref("URLUtilsReadOnly.port")}} {{readOnlyInline}}
+  - : {{domxref("DOMString")}} contenant le numéro de port de l'URL du script exécuté dans le {{domxref("Worker")}}.
+- {{domxref("URLUtilsReadOnly.pathname")}} {{readOnlyInline}}
+  - : {{domxref("DOMString")}} contenant une barre oblique initiale `'/'` suivie du chemin de l'URL du script exécuté dans le {{domxref("Worker")}}.
+- {{domxref("URLUtilsReadOnly.search")}} {{readOnlyInline}}
+  - : {{domxref("DOMString")}} contenant un point d'interrogation intial `'?'` suivi des paramètres de l'URL du script exécuté dans le {{domxref("Worker")}}.
+- {{domxref("URLUtilsReadOnly.hash")}} {{readOnlyInline}}
+  - : {{domxref("DOMString")}} contenant un dièse initial `'#'` suivi de l'identifiant de l'ancre de l'URL du script exécuté dans le {{domxref("Word'hôteker")}}.
 
-<h2 id="Méthodes">Méthodes</h2>
+## Méthodes
 
-<p><em>L'interface <code>WorkerLocation</code> n'hérite d'aucune méthode mais implémente les méthodes définies par l'interface {{domxref("URLUtilsReadOnly")}}.</em></p>
+_L'interface `WorkerLocation` n'hérite d'aucune méthode mais implémente les méthodes définies par l'interface {{domxref("URLUtilsReadOnly")}}._
 
-<dl>
- <dt>{{domxref("URLUtilsReadOnly.toString()")}}</dt>
- <dd>Retourne une chaîne de caractères {{domxref("DOMString")}} contenant l'URL complète du script exécuté dans le {{domxref("Worker")}}. C'est un synonyme de la propriété {{domxref("URLUtilsReadOnly.href")}}.</dd>
-</dl>
+- {{domxref("URLUtilsReadOnly.toString()")}}
+  - : Retourne une chaîne de caractères {{domxref("DOMString")}} contenant l'URL complète du script exécuté dans le {{domxref("Worker")}}. C'est un synonyme de la propriété {{domxref("URLUtilsReadOnly.href")}}.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', '#workerlocation', 'WorkerLocation')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                        | Status                           | Comment |
+| ------------------------------------------------------------------------------------ | -------------------------------- | ------- |
+| {{SpecName('HTML WHATWG', '#workerlocation', 'WorkerLocation')}} | {{Spec2('HTML WHATWG')}} |         |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
+{{Compat("api.WorkerLocation")}}
 
+## Voir aussi
 
-<p>{{Compat("api.WorkerLocation")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Autres interfaces apparentées au <em>Worker</em>: {{domxref("Worker")}}, {{domxref("WorkerNavigator")}} et {{domxref("WorkerGlobalScope")}}.</li>
- <li><a href="/fr/docs/Utilisation_des_web_workers">Utilisation des web workers</a></li>
-</ul>
+- Autres interfaces apparentées au *Worker*: {{domxref("Worker")}}, {{domxref("WorkerNavigator")}} et {{domxref("WorkerGlobalScope")}}.
+- [Utilisation des web workers](/fr/docs/Utilisation_des_web_workers)
diff --git a/files/fr/web/api/xmldocument/async/index.md b/files/fr/web/api/xmldocument/async/index.md
index d9f8142761..b7837662e4 100644
--- a/files/fr/web/api/xmldocument/async/index.md
+++ b/files/fr/web/api/xmldocument/async/index.md
@@ -10,33 +10,31 @@ tags:
   - XML
 translation_of: Web/API/XMLDocument/async
 ---
-<p>{{APIRef("DOM")}}{{Deprecated_header}} {{Non-standard_header}}</p>
+{{APIRef("DOM")}}{{Deprecated_header}} {{Non-standard_header}}
 
-<p><code>document.async</code> peut être défini pour indiquer si un appel {{domxref("document.load")}} doit être une requête asynchrone ou synchrone. <code>true</code> (<em>vrai</em>) est la valeur par défaut, indiquant que les documents doivent être chargés de façon asynchrone.</p>
+`document.async` peut être défini pour indiquer si un appel {{domxref("document.load")}} doit être une requête asynchrone ou synchrone. `true` (_vrai_) est la valeur par défaut, indiquant que les documents doivent être chargés de façon asynchrone.
 
-<p>(Il a été possible de charger des documents de manière synchrone depuis 1.4 alpha.)</p>
+(Il a été possible de charger des documents de manière synchrone depuis 1.4 alpha.)
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush:js">function loadXMLData(e) {
-  alert(new XMLSerializer().serializeToString(e.target)); // Donne le contenu querydata.xml sous forme "string" (<em>chaîne de caractère</em>)
+```js
+function loadXMLData(e) {
+  alert(new XMLSerializer().serializeToString(e.target)); // Donne le contenu querydata.xml sous forme "string" (chaîne de caractère)
 }
 
 var xmlDoc = document.implementation.createDocument("", "test", null);
 
 xmlDoc.async = false;
 xmlDoc.onload = loadXMLData;
-xmlDoc.load('querydata.xml');</pre>
+xmlDoc.load('querydata.xml');
+```
 
-<h2 id="Specification">Spécification</h2>
+## Spécification
 
-<ul>
- <li><a href="http://www.w3.org/TR/DOM-Level-3-LS/load-save.html#LS-DocumentLS">DOM Level 3 Load &amp; Save module</a></li>
-</ul>
+- [DOM Level 3 Load & Save module](http://www.w3.org/TR/DOM-Level-3-LS/load-save.html#LS-DocumentLS)
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/XML_dans_Mozilla">XML in Mozilla</a></li>
- <li>{{domxref("document.load")}}</li>
-</ul>
+- [XML in Mozilla](/fr/docs/XML_dans_Mozilla)
+- {{domxref("document.load")}}
diff --git a/files/fr/web/api/xmldocument/index.md b/files/fr/web/api/xmldocument/index.md
index 49d925793b..dcf8aaf557 100644
--- a/files/fr/web/api/xmldocument/index.md
+++ b/files/fr/web/api/xmldocument/index.md
@@ -7,56 +7,33 @@ tags:
   - Experimental
 translation_of: Web/API/XMLDocument
 ---
-<p>{{ ApiRef("DOM") }} {{SeeCompatTable}}</p>
-
-<p>L'interface XMLDocument représente un document XML. Elle hérite du {{domxref("Document")}} générique et ne lui ajoute aucune méthode ou propriété spécifique : néanmoins, plusieurs algorithmes se comportent différemment avec les deux types de documents.</p>
-
-<h2 id="Propriété">Propriété</h2>
-
-<p><em>Cette interface n'a pas de propriété spécifique et n'en hérite aucune.</em></p>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<p><em>Cette interface n'ajoute aucune nouvelle méthode.</em></p>
-
-<dl>
- <dt>{{domxref("XMLDocument.load()")}}</dt>
- <dd>Charge un document XML.</dd>
-</dl>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML WHATWG", 'dom.html#xmldocument', "Extension to XMLDocument")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Pas de changement par rapport à {{SpecName("HTML5 W3C")}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML5 W3C", "dom.html#loading-xml-documents", "Extension to XMLDocument")}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Ajoute la méthode <code>load()</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#xmldocument', 'XMLDocument')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.XMLDocument")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/Document_Object_Model">Référence du DOM</a></li>
-</ul>
+{{ ApiRef("DOM") }} {{SeeCompatTable}}
+
+L'interface XMLDocument représente un document XML. Elle hérite du {{domxref("Document")}} générique et ne lui ajoute aucune méthode ou propriété spécifique : néanmoins, plusieurs algorithmes se comportent différemment avec les deux types de documents.
+
+## Propriété
+
+_Cette interface n'a pas de propriété spécifique et n'en hérite aucune._
+
+## Méthodes
+
+_Cette interface n'ajoute aucune nouvelle méthode._
+
+- {{domxref("XMLDocument.load()")}}
+  - : Charge un document XML.
+
+## Spécifications
+
+| Spécification                                                                                                        | Statut                           | Commentaire                                                      |
+| -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ---------------------------------------------------------------- |
+| {{SpecName("HTML WHATWG", 'dom.html#xmldocument', "Extension to XMLDocument")}}             | {{Spec2('HTML WHATWG')}} | Pas de changement par rapport à {{SpecName("HTML5 W3C")}} |
+| {{SpecName("HTML5 W3C", "dom.html#loading-xml-documents", "Extension to XMLDocument")}} | {{Spec2('HTML5 W3C')}}     | Ajoute la méthode `load()`.                                      |
+| {{SpecName('DOM WHATWG', '#xmldocument', 'XMLDocument')}}                                         | {{Spec2('DOM WHATWG')}} | Définition initiale.                                             |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.XMLDocument")}}
+
+## Voir aussi
+
+- [Référence du DOM](/fr/docs/Web/API/Document_Object_Model)
diff --git a/files/fr/web/api/xmldocument/load/index.md b/files/fr/web/api/xmldocument/load/index.md
index 5bd175f927..e67f1cdece 100644
--- a/files/fr/web/api/xmldocument/load/index.md
+++ b/files/fr/web/api/xmldocument/load/index.md
@@ -12,36 +12,32 @@ tags:
   - Référence(2)
 translation_of: Web/API/XMLDocument/load
 ---
-<p>{{APIRef("DOM")}}</p>
+{{APIRef("DOM")}}
 
-<p><code>document.load()</code> fait partie d'une ancienne version du module W3C <a href="http://www.w3.org/TR/2003/WD-DOM-Level-3-LS-20030619/load-save.html#LS-DocumentLS">DOM Level 3 Load &amp; Save</a>. Elle peut être utilisée avec document.async pour indiquer si la requête est synchrone ou asynchrone (par défaut). À partir d'au moins Gecko 1.9, elle ne prend plus en charge le chargement inter-site de documents (utilisez <a href="/fr/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a> à la place).</p>
+`document.load()` fait partie d'une ancienne version du module W3C [DOM Level 3 Load & Save](http://www.w3.org/TR/2003/WD-DOM-Level-3-LS-20030619/load-save.html#LS-DocumentLS). Elle peut être utilisée avec document.async pour indiquer si la requête est synchrone ou asynchrone (par défaut). À partir d'au moins Gecko 1.9, elle ne prend plus en charge le chargement inter-site de documents (utilisez [XMLHttpRequest](/fr/docs/Web/API/XMLHttpRequest) à la place).
 
-<h2 id="Examples">Exemples</h2>
+## Exemples
 
-<pre>var docXml = document.implementation.createDocument("", "test", null);
+    var docXml = document.implementation.createDocument("", "test", null);
 
-function documentCharge (e) {
-  alert(new XMLSerializer().serializeToString(e.target)); // Donne le contenu de querydata.xml comme une chaîne
-}
+    function documentCharge (e) {
+      alert(new XMLSerializer().serializeToString(e.target)); // Donne le contenu de querydata.xml comme une chaîne
+    }
 
-xmlDoc.addEventListener("load", documentCharge, false);
-xmlDoc.load('querydata.xml');</pre>
+    xmlDoc.addEventListener("load", documentCharge, false);
+    xmlDoc.load('querydata.xml');
 
-<p>{{Source("content/xml/tests/load/", "Voir aussi l'extrait de chargement")}} dans le dossier de tests XML. (Pour tester cette fonctionnalité, créez les fichiers sur votre disque local ou sur un serveur web, plutôt que de charger le fichier load.html depuis la page générée par LXR, qui servira le fichier text.xml comme HTML.)</p>
+{{Source("content/xml/tests/load/", "Voir aussi l'extrait de chargement")}} dans le dossier de tests XML. (Pour tester cette fonctionnalité, créez les fichiers sur votre disque local ou sur un serveur web, plutôt que de charger le fichier load.html depuis la page générée par LXR, qui servira le fichier text.xml comme HTML.)
 
-<h2 id="Specification">Spécification</h2>
+## Spécification
 
-<ul>
- <li><a href="http://www.w3.org/TR/2003/WD-DOM-Level-3-LS-20030619/load-save.html#LS-DocumentLS">Old W3C Working Draft of the DOM Level 3 Load &amp; Save module</a></li>
-</ul>
+- [Old W3C Working Draft of the DOM Level 3 Load & Save module](http://www.w3.org/TR/2003/WD-DOM-Level-3-LS-20030619/load-save.html#LS-DocumentLS)
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.XMLDocument.load")}}</p>
+{{Compat("api.XMLDocument.load")}}
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/API/Document/async">document.async</a></li>
- <li><a href="/fr/docs/XML_dans_Mozilla">XML dans Mozilla</a></li>
-</ul>
+- [document.async](/fr/docs/Web/API/Document/async)
+- [XML dans Mozilla](/fr/docs/XML_dans_Mozilla)
diff --git a/files/fr/web/api/xmlhttprequest/abort_event/index.md b/files/fr/web/api/xmlhttprequest/abort_event/index.md
index 2c9738082e..ed306a8700 100644
--- a/files/fr/web/api/xmlhttprequest/abort_event/index.md
+++ b/files/fr/web/api/xmlhttprequest/abort_event/index.md
@@ -4,87 +4,44 @@ slug: Web/API/XMLHttpRequest/abort_event
 translation_of: Web/API/XMLHttpRequest/abort_event
 original_slug: Web/Events/abort_(ProgressEvent)
 ---
-<p>L'événement <strong>abort</strong> est déclenché lorsque la progression a été interompue (Non causé par une erreur)</p>
-
-<h2 id="Informations_générales">Informations générales</h2>
-
-<dl>
- <dt style="float: left; text-align: right; width: 120px;">Spécification</dt>
- <dd style="margin: 0 0 0 120px;"><a href="http://www.w3.org/TR/progress-events/">Progress</a></dd>
- <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
- <dd style="margin: 0 0 0 120px;">ProgressEvent</dd>
- <dt style="float: left; text-align: right; width: 120px;">Propagation</dt>
- <dd style="margin: 0 0 0 120px;">Non</dd>
- <dt style="float: left; text-align: right; width: 120px;">Annulable</dt>
- <dd style="margin: 0 0 0 120px;">Non</dd>
- <dt style="float: left; text-align: right; width: 120px;">Cible</dt>
- <dd style="margin: 0 0 0 120px;">Element</dd>
- <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt>
- <dd style="margin: 0 0 0 120px;">Aucune</dd>
-</dl>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Property</th>
-   <th scope="col">Type</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>target</code> {{readonlyInline}}</td>
-   <td>{{domxref("EventTarget")}}</td>
-   <td>The event target (the topmost target in the DOM tree).</td>
-  </tr>
-  <tr>
-   <td><code>type</code> {{readonlyInline}}</td>
-   <td>{{domxref("DOMString")}}</td>
-   <td>The type of event.</td>
-  </tr>
-  <tr>
-   <td><code>bubbles</code> {{readonlyInline}}</td>
-   <td>{{jsxref("Boolean")}}</td>
-   <td>Whether the event normally bubbles or not.</td>
-  </tr>
-  <tr>
-   <td><code>cancelable</code> {{readonlyInline}}</td>
-   <td>{{jsxref("Boolean")}}</td>
-   <td>Whether the event is cancellable or not.</td>
-  </tr>
-  <tr>
-   <td><code>lengthComputable </code>{{readonlyInline}}</td>
-   <td>{{jsxref("Boolean")}}</td>
-   <td>Specifies whether or not the total size of the transfer is known. Read only.</td>
-  </tr>
-  <tr>
-   <td><code>loaded</code> {{readonlyInline}}</td>
-   <td>unsigned long (long)</td>
-   <td>The number of bytes transferred since the beginning of the operation. This doesn't include headers and other overhead, but only the content itself. Read only.</td>
-  </tr>
-  <tr>
-   <td><code>total</code> {{readonlyInline}}</td>
-   <td>unsigned long (long)</td>
-   <td>The total number of bytes of content that will be transferred during the operation. If the total size is unknown, this value is zero. Read only.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Evénements_liés">Evénements liés</h2>
-
-<ul>
- <li>{{event("loadstart")}}</li>
- <li>{{event("progress")}}</li>
- <li>{{event("error")}}</li>
- <li>{{event("abort")}}</li>
- <li>{{event("load")}}</li>
- <li>{{event("loadend")}}</li>
-</ul>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress">Surveillance de la progression</a></li>
-</ul>
+L'événement **abort** est déclenché lorsque la progression a été interompue (Non causé par une erreur)
+
+## Informations générales
+
+- Spécification
+  - : [Progress](http://www.w3.org/TR/progress-events/)
+- Interface
+  - : ProgressEvent
+- Propagation
+  - : Non
+- Annulable
+  - : Non
+- Cible
+  - : Element
+- Action par défaut
+  - : Aucune
+
+## Propriétés
+
+| Property                                    | Type                                 | Description                                                                                                                                                    |
+| ------------------------------------------- | ------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `target` {{readonlyInline}}           | {{domxref("EventTarget")}} | The event target (the topmost target in the DOM tree).                                                                                                         |
+| `type` {{readonlyInline}}             | {{domxref("DOMString")}}     | The type of event.                                                                                                                                             |
+| `bubbles` {{readonlyInline}}          | {{jsxref("Boolean")}}         | Whether the event normally bubbles or not.                                                                                                                     |
+| `cancelable` {{readonlyInline}}       | {{jsxref("Boolean")}}         | Whether the event is cancellable or not.                                                                                                                       |
+| `lengthComputable `{{readonlyInline}} | {{jsxref("Boolean")}}         | Specifies whether or not the total size of the transfer is known. Read only.                                                                                   |
+| `loaded` {{readonlyInline}}           | unsigned long (long)                 | The number of bytes transferred since the beginning of the operation. This doesn't include headers and other overhead, but only the content itself. Read only. |
+| `total` {{readonlyInline}}            | unsigned long (long)                 | The total number of bytes of content that will be transferred during the operation. If the total size is unknown, this value is zero. Read only.               |
+
+## Evénements liés
+
+- {{event("loadstart")}}
+- {{event("progress")}}
+- {{event("error")}}
+- {{event("abort")}}
+- {{event("load")}}
+- {{event("loadend")}}
+
+## Voir aussi
+
+- [Surveillance de la progression](/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress)
diff --git a/files/fr/web/api/xmlhttprequest/index.md b/files/fr/web/api/xmlhttprequest/index.md
index 3fed67ac6e..ef2a2c8481 100644
--- a/files/fr/web/api/xmlhttprequest/index.md
+++ b/files/fr/web/api/xmlhttprequest/index.md
@@ -11,184 +11,148 @@ tags:
   - XMLHttpRequest
 translation_of: Web/API/XMLHttpRequest
 ---
-<div>{{DefaultAPISidebar("XMLHttpRequest")}}</div>
-
-<p>Les objets <code>XMLHttpRequest</code> (XHR) permettent d'interagir avec des serveurs. On peut récupérer des données à partir d'une URL sans avoir à rafraîchir complètement la page. Cela permet à une page web d'être mise à jour sans perturber les actions de l'utilisateur.</p> 
-
-<p><code>XMLHttpRequest</code> est beaucoup utilisé par l'approche {{Glossary("AJAX")}}.</p>
-
-<p>{{InheritanceDiagram(650, 150)}}</p>
-
-<p>Malgré son nom, <code>XMLHttpRequest</code> peut être utilisé afin de récupérer tout type de données et pas uniquement du XML.</p>
-
-<p>Si vos opérations de communication nécessitent l'échange d'évènements ou de messages avec un serveur, pensez à utiliser <a href="/fr/docs/Web/API/Server-sent_events">les évènements serveur</a> via l'interface {{domxref("EventSource")}}. Pour une communication bidirectionnelle complète, les <a href="/fr/docs/Web/API/WebSockets_API">WebSockets</a> peuvent être une meilleure alternative.</p>
-
-<h2 id="Constructeur">Constructeur</h2>
-
-<dl>
- <dt>{{domxref("XMLHttpRequest.XMLHttpRequest", "XMLHttpRequest()")}}</dt>
- <dd>Le constructeur initialise un objet <code>XMLHttpRequest</code>. Il doit être appelé avant toute autre méthode.</dd>
-</dl>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<p><em>Cette interface hérite également des propriétés de {{domxref("XMLHttpRequestEventTarget")}} et de {{domxref("EventTarget")}}.</em></p>
-
-<dl>
- <dt>{{domxref("XMLHttpRequest.onreadystatechange")}}</dt>
- <dd>Un gestionnaire d'évènement ({{event("Event_handlers", "event handler")}}) invoqué à chaque fois que l'attribut <code>readyState</code> change.</dd>
- <dt>{{domxref("XMLHttpRequest.readyState")}} {{readonlyinline}}</dt>
- <dd>L'état de la requête sous la forme d'un <code>unsigned short</code>.</dd>
- <dt>{{domxref("XMLHttpRequest.response")}} {{readonlyinline}}</dt>
- <dd>Un objet {{jsxref("ArrayBuffer")}}, {{domxref("Blob")}}, {{domxref("Document")}}, un objet JavaScript ou une chaîne de caractères ({{domxref("DOMString")}}) selon la valeur de {{domxref("XMLHttpRequest.responseType")}}. Cet objet contient le corps de la réponse.</dd>
- <dt>{{domxref("XMLHttpRequest.responseText")}} {{readonlyinline}}</dt>
- <dd>Une chaîne de caractères {{domxref("DOMString")}} qui contient la réponse à la requête sous forme de texte ou la valeur <code>null</code> si la requête a échoué ou n'a pas encore été envoyée.</dd>
- <dt>{{domxref("XMLHttpRequest.responseType")}}</dt>
- <dd>Une valeur parmi une liste qui définit le type de réponse.</dd>
- <dt>{{domxref("XMLHttpRequest.responseURL")}} {{readonlyinline}}</dt>
- <dd>L'URL sérialisée de la réponse ou la chaîne vide si l'URL est nulle.</dd>
- <dt>{{domxref("XMLHttpRequest.responseXML")}} {{readonlyinline}}</dt>
- <dd>Un objet {{domxref("Document")}} qui contient la réponse de la requête ou <code>null</code> si la requête a échoué, qu'elle n'a pas encore été envoyée ou qu'elle ne peut pas être analysée comme XML ou HTML. Cette propriété n'est pas disponible dans les <em>workers</em>.</dd>
- <dt>{{domxref("XMLHttpRequest.status")}} {{readonlyinline}}</dt>
- <dd>Une valeur numérique <code>unsigned short</code> qui décrit le statut de la réponse à la requête.</dd>
- <dt>{{domxref("XMLHttpRequest.statusText")}} {{readonlyinline}}</dt>
- <dd>Une chaîne {{domxref("DOMString")}} qui contient la chaîne de caractères / réponse renvoyée par le serveur HTTP. À la différence de {{domxref("XMLHttpRequest.status")}}, tout le texte du statut est inclus ("<code>200 OK</code>" plutôt que "<code>200</code>" par exemple).</dd>
-</dl>
-
-<div class="note">
-<p><strong>Note :</strong> Selon la spécification HTTP/2 (<a href="https://http2.github.io/http2-spec/#rfc.section.8.1.2.4">voir 8.1.2.4</a> <a href="https://http2.github.io/http2-spec/#HttpResponse">Response Pseudo-Header Fields</a>), HTTP/2 ne définit pas de méthode pour porter la version ou la raison/phrase incluse dans la ligne de statut HTTP/1.1.</p>
-</div>
-
-<dl>
- <dt>{{domxref("XMLHttpRequest.timeout")}}</dt>
- <dd>Un entier <code>unsigned long</code> qui représente le nombre de millisecondes qu'une requête peut prendre avant d'être terminée automatiquement.</dd>
- <dt>{{domxref("XMLHttpRequestEventTarget.ontimeout")}}</dt>
- <dd>Un gestionnaire d'évènement ({{event("Event_handlers", "event handler")}}) appelé lorsque la requête a expiré. {{gecko_minversion_inline("12.0")}}</dd>
- <dt>{{domxref("XMLHttpRequest.upload")}} {{readonlyinline}}</dt>
- <dd>Un objet {{domxref("XMLHttpRequestUpload")}} qui représente le processus d'<em>upload</em>.</dd>
- <dt>{{domxref("XMLHttpRequest.withCredentials")}}</dt>
- <dd>Un booléen ({{domxref("Boolean")}}) qui indique si des requêtes <code>Access-Control</code> d'origines différentes peuvent être effectuées avec des informations d'authentification telles que des cookies ou des en-têtes d'autorisation.</dd>
-</dl>
-
-<h3 id="Propriétés_non-standard">Propriétés non-standard</h3>
-
-<dl>
- <dt>{{domxref("XMLHttpRequest.channel")}}{{ReadOnlyInline}}</dt>
- <dd>Un objet {{Interface("nsIChannel")}}. Le canal à utiliser par l'objet lorsqu'il effectue la requête.</dd>
- <dt>{{domxref("XMLHttpRequest.mozAnon")}}{{ReadOnlyInline}}</dt>
- <dd>Un booléen. S'il est vrai, la requête sera envoyée sans cookie ou en-tête d'autorisation.</dd>
- <dt>{{domxref("XMLHttpRequest.mozSystem")}}{{ReadOnlyInline}}</dt>
- <dd>Un booléen. S'il est vrai, la politique d'origine unique ne sera pas vérifiée pour la requête.</dd>
- <dt>{{domxref("XMLHttpRequest.mozBackgroundRequest")}}</dt>
- <dd>Un booléen qui indique si l'objet représente une requête de service en arrière-plan.</dd>
- <dt>{{domxref("XMLHttpRequest.mozResponseArrayBuffer")}}{{gecko_minversion_inline("2.0")}} {{obsolete_inline("6")}} {{ReadOnlyInline}}</dt>
- <dd>Un objet {{jsxref("ArrayBuffer")}} qui est la réponse à la requête sous la forme d'un tableau typé JavaScript.</dd>
- <dt>{{domxref("XMLHttpRequest.multipart")}}{{obsolete_inline("22")}}</dt>
- <dd><strong>Cette fonctionnalité spécifique à Gecko a été retirée avec Firefox/Gecko 22.</strong> Veuillez utiliser <a href="/fr/docs/Web/API/Server-sent_events">les évènements serveurs</a> ou <a href="/fr/docs/Web/API/WebSockets_API">les web sockets</a> ou encore la propriété <code>responseText</code> des évènements de progression.</dd>
-</dl>
-
-<h3 id="Gestionnaires_dévènement">Gestionnaires d'évènement</h3>
-
-<p>Le gestionnaire <code>onreadystatechange</code>, comme propriété des instances <code>XMLHttpRequest</code>, est pris en charge par l'ensemble des navigateurs.</p>
-
-<p>D'autres gestionnaires d'évènements ont également été implémentés dans différents navigateurs (<code>onload</code>, <code>onerror</code>, <code>onprogress</code>, etc.). Voir le guide <a href="/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest">Manipuler XMLHttpRequest</a>.</p>
-
-<p>La plupart des navigateurs récents gère également les évènements via la méthode {{domxref("EventTarget.addEventListener", "addEventListener()")}} (en plus des méthodes  <code>on*</code>).</p>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<dl>
- <dt>{{domxref("XMLHttpRequest.abort()")}}</dt>
- <dd>Interrompt la requête si elle a déjà été envoyée.</dd>
- <dt>{{domxref("XMLHttpRequest.getAllResponseHeaders()")}}</dt>
- <dd>Renvoie, via une chaîne de caractères, l'ensemble des en-têtes de la réponse, séparés par {{Glossary("CRLF")}} ou la valeur <code>null</code> si aucune réponse n'a été reçue.</dd>
- <dt>{{domxref("XMLHttpRequest.getResponseHeader()")}}</dt>
- <dd>Renvoie la chaîne de caractères contenant le texte de l'en-tête voulue ou <code>null</code> si aucune des réponse n'a été reçue ou si l'en-tête n'existe pas dans la réponse.</dd>
- <dt>{{domxref("XMLHttpRequest.open()")}}</dt>
- <dd>Initialise une requête. Cette méthode doit être utilisée par du code JavaScript.</dd>
- <dt>{{domxref("XMLHttpRequest.overrideMimeType()")}}</dt>
- <dd>Surcharge le type MIME renvoyé par le serveur.</dd>
- <dt>{{domxref("XMLHttpRequest.send()")}}</dt>
- <dd>Envoie la requête. Si la requête est asynchrone (le comportement par défaut), la méthode renvoie un résultat dès que la requête est envoyée.</dd>
- <dt>{{domxref("XMLHttpRequest.setRequestHeader()")}}</dt>
- <dd>Définit la valeur d'un en-tête de requête HTTP. Cette méthode doit être appelée après <code>open()</code> mais avant<code>send()</code>.</dd>
-</dl>
-
-<h3 id="Méthodes_non-standard">Méthodes non-standard</h3>
-
-<dl>
- <dt>{{domxref("XMLHttpRequest.init()")}}</dt>
- <dd>Initialise l'objet depuis pour une utilisation depuis du code C++.</dd>
-</dl>
-
-<div class="warning">
-  <p><strong>Attention :</strong> Cette méthode ne doit pas être appelée depuis du code JavaScript.</p>
-</div>
-
-<dl>
- <dt>{{domxref("XMLHttpRequest.openRequest()")}}</dt>
- <dd>Initialise une requête depuis du code natif. Voir la méthode <a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIXMLHttpRequest#open()"><code>open()</code></a> ci-avant pour initialiser une requête de façon standard en JavaSCript.</dd>
- <dt>{{domxref("XMLHttpRequest.sendAsBinary()")}}{{deprecated_inline()}}</dt>
- <dd>Une variante de <code>send()</code> afin d'envoyer des données binaires.</dd>
-</dl>
-
-<h2 id="Évènements">Évènements</h2>
-
-<dl>
- <dt>{{domxref("XMLHttpRequest/abort_event", "abort")}}</dt>
- <dd>Se déclenche lorsqu'une requête a été interrompue (par exemple via {{domxref("XMLHttpRequest.abort()")}}). Le gestionnaire<br>
- {{domxref("XMLHttpRequestEventTarget/onabort", "onabort")}} est également disponible.</dd>
- <dt>{{domxref("XMLHttpRequest/error_event", "error")}}</dt>
- <dd>Se déclenche lorsqu'une requête a rencontré une erreur.<br>
- Le gestionnaire {{domxref("XMLHttpRequestEventTarget/onerror", "onerror")}} est également disponible.</dd>
- <dt>{{domxref("XMLHttpRequest/load_event", "load")}}</dt>
- <dd>Se déclenche lorsqu'une transaction {{domxref("XMLHttpRequest")}} se termine correctement. Le gestionnaire {{domxref("XMLHttpRequestEventTarget/onload", "onload")}} est également disponible.</dd>
- <dt>{{domxref("XMLHttpRequest/loadend_event", "loadend")}}</dt>
- <dd>Se déclenche lorsqu'une requête est terminée (avec une erreur ou non). Quand elle a réussi, l'évènement a lieu après {{domxref("XMLHttpRequest/load_event", "load")}}). Quand elle a échoué, l'évènement survient après {{domxref("XMLHttpRequest/error_event", "error")}}).<br>
- Le gestionnaire {{domxref("XMLHttpRequestEventTarget/onloadend", "onloadend")}} est également disponible.</dd>
- <dt>{{domxref("XMLHttpRequest/loadstart_event", "loadstart")}}</dt>
- <dd>Se déclenche lorsqu'une requête commence à charger des données.<br>
- Le gestionnaire {{domxref("XMLHttpRequestEventTarget/onloadstart", "onloadstart")}} est également disponible.</dd>
- <dt>{{domxref("XMLHttpRequest/progress_event", "progress")}}</dt>
- <dd>Se déclenche périodiquement lorsqu'une requête reçoit des données supplémentaires. Le gestionnaire {{domxref("XMLHttpRequestEventTarget/onprogress", "onprogress")}} est également disponible.</dd>
- <dt>{{domxref("XMLHttpRequest/timeout_event", "timeout")}}</dt>
- <dd>Se déclenche lorsque la progression est terminée du fait de l'expiration de la durée limite. Le gestionnaire {{domxref("XMLHttpRequestEventTarget/ontimeout", "ontimeout")}} est également disponible.</dd>
-</dl>
-
-<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('XMLHttpRequest')}}</td>
-   <td>{{Spec2('XMLHttpRequest')}}</td>
-   <td>Standard évolutif, version la plus récente.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<div>{{Compat("api.XMLHttpRequest")}}</div>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{domxref("XMLSerializer")}} : sérialiser un arbre DOM en XML</li>
- <li>Les tutoriels MDN sur <code>XMLHttpRequest</code>:
-  <ul>
-   <li><a href="/fr/docs/Web/Guide/AJAX/Premiers_pas">Introduction à AJAX</a></li>
-   <li><a href="/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest">Utiliser XMLHttpRequest</a></li>
-   <li><a href="/fr/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">Manipuler le HTML avec XMLHttpRequest</a></li>
-   <li><a href="/fr/docs/Web/API/Fetch_API">L'API Fetch</a></li>
-  </ul>
- </li>
- <li><a href="https://www.html5rocks.com/en/tutorials/file/xhr2/">HTML5 Rocks — Nouvelles astuces avec XMLHttpRequest2 (en anglais)</a></li>
-</ul>
+{{DefaultAPISidebar("XMLHttpRequest")}}
+
+Les objets `XMLHttpRequest` (XHR) permettent d'interagir avec des serveurs. On peut récupérer des données à partir d'une URL sans avoir à rafraîchir complètement la page. Cela permet à une page web d'être mise à jour sans perturber les actions de l'utilisateur.
+
+`XMLHttpRequest` est beaucoup utilisé par l'approche {{Glossary("AJAX")}}.
+
+{{InheritanceDiagram(650, 150)}}
+
+Malgré son nom, `XMLHttpRequest` peut être utilisé afin de récupérer tout type de données et pas uniquement du XML.
+
+Si vos opérations de communication nécessitent l'échange d'évènements ou de messages avec un serveur, pensez à utiliser [les évènements serveur](/fr/docs/Web/API/Server-sent_events) via l'interface {{domxref("EventSource")}}. Pour une communication bidirectionnelle complète, les [WebSockets](/fr/docs/Web/API/WebSockets_API) peuvent être une meilleure alternative.
+
+## Constructeur
+
+- {{domxref("XMLHttpRequest.XMLHttpRequest", "XMLHttpRequest()")}}
+  - : Le constructeur initialise un objet `XMLHttpRequest`. Il doit être appelé avant toute autre méthode.
+
+## Propriétés
+
+_Cette interface hérite également des propriétés de {{domxref("XMLHttpRequestEventTarget")}} et de {{domxref("EventTarget")}}._
+
+- {{domxref("XMLHttpRequest.onreadystatechange")}}
+  - : Un gestionnaire d'évènement ({{event("Event_handlers", "event handler")}}) invoqué à chaque fois que l'attribut `readyState` change.
+- {{domxref("XMLHttpRequest.readyState")}} {{readonlyinline}}
+  - : L'état de la requête sous la forme d'un `unsigned short`.
+- {{domxref("XMLHttpRequest.response")}} {{readonlyinline}}
+  - : Un objet {{jsxref("ArrayBuffer")}}, {{domxref("Blob")}}, {{domxref("Document")}}, un objet JavaScript ou une chaîne de caractères ({{domxref("DOMString")}}) selon la valeur de {{domxref("XMLHttpRequest.responseType")}}. Cet objet contient le corps de la réponse.
+- {{domxref("XMLHttpRequest.responseText")}} {{readonlyinline}}
+  - : Une chaîne de caractères {{domxref("DOMString")}} qui contient la réponse à la requête sous forme de texte ou la valeur `null` si la requête a échoué ou n'a pas encore été envoyée.
+- {{domxref("XMLHttpRequest.responseType")}}
+  - : Une valeur parmi une liste qui définit le type de réponse.
+- {{domxref("XMLHttpRequest.responseURL")}} {{readonlyinline}}
+  - : L'URL sérialisée de la réponse ou la chaîne vide si l'URL est nulle.
+- {{domxref("XMLHttpRequest.responseXML")}} {{readonlyinline}}
+  - : Un objet {{domxref("Document")}} qui contient la réponse de la requête ou `null` si la requête a échoué, qu'elle n'a pas encore été envoyée ou qu'elle ne peut pas être analysée comme XML ou HTML. Cette propriété n'est pas disponible dans les _workers_.
+- {{domxref("XMLHttpRequest.status")}} {{readonlyinline}}
+  - : Une valeur numérique `unsigned short` qui décrit le statut de la réponse à la requête.
+- {{domxref("XMLHttpRequest.statusText")}} {{readonlyinline}}
+  - : Une chaîne {{domxref("DOMString")}} qui contient la chaîne de caractères / réponse renvoyée par le serveur HTTP. À la différence de {{domxref("XMLHttpRequest.status")}}, tout le texte du statut est inclus ("`200 OK`" plutôt que "`200`" par exemple).
+
+> **Note :** Selon la spécification HTTP/2 ([voir 8.1.2.4](https://http2.github.io/http2-spec/#rfc.section.8.1.2.4) [Response Pseudo-Header Fields](https://http2.github.io/http2-spec/#HttpResponse)), HTTP/2 ne définit pas de méthode pour porter la version ou la raison/phrase incluse dans la ligne de statut HTTP/1.1.
+
+- {{domxref("XMLHttpRequest.timeout")}}
+  - : Un entier `unsigned long` qui représente le nombre de millisecondes qu'une requête peut prendre avant d'être terminée automatiquement.
+- {{domxref("XMLHttpRequestEventTarget.ontimeout")}}
+  - : Un gestionnaire d'évènement ({{event("Event_handlers", "event handler")}}) appelé lorsque la requête a expiré. {{gecko_minversion_inline("12.0")}}
+- {{domxref("XMLHttpRequest.upload")}} {{readonlyinline}}
+  - : Un objet {{domxref("XMLHttpRequestUpload")}} qui représente le processus d'_upload_.
+- {{domxref("XMLHttpRequest.withCredentials")}}
+  - : Un booléen ({{domxref("Boolean")}}) qui indique si des requêtes `Access-Control` d'origines différentes peuvent être effectuées avec des informations d'authentification telles que des cookies ou des en-têtes d'autorisation.
+
+### Propriétés non-standard
+
+- {{domxref("XMLHttpRequest.channel")}}{{ReadOnlyInline}}
+  - : Un objet {{Interface("nsIChannel")}}. Le canal à utiliser par l'objet lorsqu'il effectue la requête.
+- {{domxref("XMLHttpRequest.mozAnon")}}{{ReadOnlyInline}}
+  - : Un booléen. S'il est vrai, la requête sera envoyée sans cookie ou en-tête d'autorisation.
+- {{domxref("XMLHttpRequest.mozSystem")}}{{ReadOnlyInline}}
+  - : Un booléen. S'il est vrai, la politique d'origine unique ne sera pas vérifiée pour la requête.
+- {{domxref("XMLHttpRequest.mozBackgroundRequest")}}
+  - : Un booléen qui indique si l'objet représente une requête de service en arrière-plan.
+- {{domxref("XMLHttpRequest.mozResponseArrayBuffer")}}{{gecko_minversion_inline("2.0")}} {{obsolete_inline("6")}} {{ReadOnlyInline}}
+  - : Un objet {{jsxref("ArrayBuffer")}} qui est la réponse à la requête sous la forme d'un tableau typé JavaScript.
+- {{domxref("XMLHttpRequest.multipart")}}{{obsolete_inline("22")}}
+  - : **Cette fonctionnalité spécifique à Gecko a été retirée avec Firefox/Gecko 22.** Veuillez utiliser [les évènements serveurs](/fr/docs/Web/API/Server-sent_events) ou [les web sockets](/fr/docs/Web/API/WebSockets_API) ou encore la propriété `responseText` des évènements de progression.
+
+### Gestionnaires d'évènement
+
+Le gestionnaire `onreadystatechange`, comme propriété des instances `XMLHttpRequest`, est pris en charge par l'ensemble des navigateurs.
+
+D'autres gestionnaires d'évènements ont également été implémentés dans différents navigateurs (`onload`, `onerror`, `onprogress`, etc.). Voir le guide [Manipuler XMLHttpRequest](/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest).
+
+La plupart des navigateurs récents gère également les évènements via la méthode {{domxref("EventTarget.addEventListener", "addEventListener()")}} (en plus des méthodes  `on*`).
+
+## Méthodes
+
+- {{domxref("XMLHttpRequest.abort()")}}
+  - : Interrompt la requête si elle a déjà été envoyée.
+- {{domxref("XMLHttpRequest.getAllResponseHeaders()")}}
+  - : Renvoie, via une chaîne de caractères, l'ensemble des en-têtes de la réponse, séparés par {{Glossary("CRLF")}} ou la valeur `null` si aucune réponse n'a été reçue.
+- {{domxref("XMLHttpRequest.getResponseHeader()")}}
+  - : Renvoie la chaîne de caractères contenant le texte de l'en-tête voulue ou `null` si aucune des réponse n'a été reçue ou si l'en-tête n'existe pas dans la réponse.
+- {{domxref("XMLHttpRequest.open()")}}
+  - : Initialise une requête. Cette méthode doit être utilisée par du code JavaScript.
+- {{domxref("XMLHttpRequest.overrideMimeType()")}}
+  - : Surcharge le type MIME renvoyé par le serveur.
+- {{domxref("XMLHttpRequest.send()")}}
+  - : Envoie la requête. Si la requête est asynchrone (le comportement par défaut), la méthode renvoie un résultat dès que la requête est envoyée.
+- {{domxref("XMLHttpRequest.setRequestHeader()")}}
+  - : Définit la valeur d'un en-tête de requête HTTP. Cette méthode doit être appelée après `open()` mais avant`send()`.
+
+### Méthodes non-standard
+
+- {{domxref("XMLHttpRequest.init()")}}
+  - : Initialise l'objet depuis pour une utilisation depuis du code C++.
+
+> **Attention :** Cette méthode ne doit pas être appelée depuis du code JavaScript.
+
+- {{domxref("XMLHttpRequest.openRequest()")}}
+  - : Initialise une requête depuis du code natif. Voir la méthode [`open()`](</en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIXMLHttpRequest#open()>) ci-avant pour initialiser une requête de façon standard en JavaSCript.
+- {{domxref("XMLHttpRequest.sendAsBinary()")}}{{deprecated_inline()}}
+  - : Une variante de `send()` afin d'envoyer des données binaires.
+
+## Évènements
+
+- {{domxref("XMLHttpRequest/abort_event", "abort")}}
+  - : Se déclenche lorsqu'une requête a été interrompue (par exemple via {{domxref("XMLHttpRequest.abort()")}}). Le gestionnaire
+    {{domxref("XMLHttpRequestEventTarget/onabort", "onabort")}} est également disponible.
+- {{domxref("XMLHttpRequest/error_event", "error")}}
+  - : Se déclenche lorsqu'une requête a rencontré une erreur.
+    Le gestionnaire {{domxref("XMLHttpRequestEventTarget/onerror", "onerror")}} est également disponible.
+- {{domxref("XMLHttpRequest/load_event", "load")}}
+  - : Se déclenche lorsqu'une transaction {{domxref("XMLHttpRequest")}} se termine correctement. Le gestionnaire {{domxref("XMLHttpRequestEventTarget/onload", "onload")}} est également disponible.
+- {{domxref("XMLHttpRequest/loadend_event", "loadend")}}
+  - : Se déclenche lorsqu'une requête est terminée (avec une erreur ou non). Quand elle a réussi, l'évènement a lieu après {{domxref("XMLHttpRequest/load_event", "load")}}). Quand elle a échoué, l'évènement survient après {{domxref("XMLHttpRequest/error_event", "error")}}).
+    Le gestionnaire {{domxref("XMLHttpRequestEventTarget/onloadend", "onloadend")}} est également disponible.
+- {{domxref("XMLHttpRequest/loadstart_event", "loadstart")}}
+  - : Se déclenche lorsqu'une requête commence à charger des données.
+    Le gestionnaire {{domxref("XMLHttpRequestEventTarget/onloadstart", "onloadstart")}} est également disponible.
+- {{domxref("XMLHttpRequest/progress_event", "progress")}}
+  - : Se déclenche périodiquement lorsqu'une requête reçoit des données supplémentaires. Le gestionnaire {{domxref("XMLHttpRequestEventTarget/onprogress", "onprogress")}} est également disponible.
+- {{domxref("XMLHttpRequest/timeout_event", "timeout")}}
+  - : Se déclenche lorsque la progression est terminée du fait de l'expiration de la durée limite. Le gestionnaire {{domxref("XMLHttpRequestEventTarget/ontimeout", "ontimeout")}} est également disponible.
+
+## Spécifications
+
+| Spécification                            | État                                 | Commentaires                                |
+| ---------------------------------------- | ------------------------------------ | ------------------------------------------- |
+| {{SpecName('XMLHttpRequest')}} | {{Spec2('XMLHttpRequest')}} | Standard évolutif, version la plus récente. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.XMLHttpRequest")}}
+
+## Voir aussi
+
+- {{domxref("XMLSerializer")}} : sérialiser un arbre DOM en XML
+- Les tutoriels MDN sur `XMLHttpRequest`:
+
+  - [Introduction à AJAX](/fr/docs/Web/Guide/AJAX/Premiers_pas)
+  - [Utiliser XMLHttpRequest](/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest)
+  - [Manipuler le HTML avec XMLHttpRequest](/fr/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest)
+  - [L'API Fetch](/fr/docs/Web/API/Fetch_API)
+
+- [HTML5 Rocks — Nouvelles astuces avec XMLHttpRequest2 (en anglais)](https://www.html5rocks.com/en/tutorials/file/xhr2/)
diff --git a/files/fr/web/api/xmlhttprequest/onreadystatechange/index.md b/files/fr/web/api/xmlhttprequest/onreadystatechange/index.md
index f1b8c7a69d..cafc71025b 100644
--- a/files/fr/web/api/xmlhttprequest/onreadystatechange/index.md
+++ b/files/fr/web/api/xmlhttprequest/onreadystatechange/index.md
@@ -3,57 +3,42 @@ title: XMLHttpRequest.onreadystatechange
 slug: Web/API/XMLHttpRequest/onreadystatechange
 translation_of: Web/API/XMLHttpRequest/onreadystatechange
 ---
-<div>{{APIRef}}</div>
+{{APIRef}}
 
-<p>Un <a href="/en-US/docs/Web/API/EventHandler"><code>EventHandler</code></a> qui réagit aux changements de <code>readyState</code>. Le callback est appelé dans le contexte du thread de rendu. La propriété <strong><code>XMLHttpRequest.onreadystatechange</code></strong>  contient le gestionnaire d'évènement appelé lorsque l'évènement {{event("readystatechange")}} est déclenché, soit chaque fois que la propriété {{domxref("XMLHttpRequest.readyState", "readyState")}} de {{domxref("XMLHttpRequest")}} est modifiée.</p>
+Un [`EventHandler`](/en-US/docs/Web/API/EventHandler) qui réagit aux changements de `readyState`. Le callback est appelé dans le contexte du thread de rendu. La propriété **`XMLHttpRequest.onreadystatechange`**  contient le gestionnaire d'évènement appelé lorsque l'évènement {{event("readystatechange")}} est déclenché, soit chaque fois que la propriété {{domxref("XMLHttpRequest.readyState", "readyState")}} de {{domxref("XMLHttpRequest")}} est modifiée.
 
-<div class="warning">
-<p><strong>Attention :</strong> Ne doit pas être utilisé avec des requêtes synchrone ni avec du code natif.</p>
-</div>
+> **Attention :** Ne doit pas être utilisé avec des requêtes synchrone ni avec du code natif.
 
-<h2 id="Syntax">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>XMLHttpRequest</em>.onreadystatechange = <em>callback</em>;</pre>
+    XMLHttpRequest.onreadystatechange = callback;
 
-<h3 id="Valeurs">Valeurs</h3>
+### Valeurs
 
-<ul>
- <li><code><em>callback</em></code> est la fonction exécutée lorsque <code>readyState</code> change.</li>
-</ul>
+- `callback` est la fonction exécutée lorsque `readyState` change.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">var xhr = new XMLHttpRequest(),
+```js
+var xhr = new XMLHttpRequest(),
     method = "GET",
     url = "https://developer.mozilla.org/";
 
-xhr.open(<em>method</em>, <em>url</em>, true);
+xhr.open(method, url, true);
 xhr.onreadystatechange = function () {
-  if(xhr.readyState === 4 &amp;&amp; xhr.status === 200) {
+  if(xhr.readyState === 4 && xhr.status === 200) {
     console.log(xhr.responseText);
   }
 };
-xhr.send();</pre>
+xhr.send();
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('XMLHttpRequest', '#handler-xhr-onreadystatechange')}}</td>
-   <td>{{Spec2('XMLHttpRequest')}}</td>
-   <td>WHATWG living standard</td>
-  </tr>
- </tbody>
-</table>
+| Specification                                                                            | Status                               | Comment                |
+| ---------------------------------------------------------------------------------------- | ------------------------------------ | ---------------------- |
+| {{SpecName('XMLHttpRequest', '#handler-xhr-onreadystatechange')}} | {{Spec2('XMLHttpRequest')}} | WHATWG living standard |
 
-<h2 id="Compatibilité_des_fureteurs">Compatibilité des fureteurs</h2>
+## Compatibilité des fureteurs
 
-
-
-<p>{{Compat("api.XMLHttpRequest.onreadystatechange")}}</p>
+{{Compat("api.XMLHttpRequest.onreadystatechange")}}
diff --git a/files/fr/web/api/xmlhttprequest/open/index.md b/files/fr/web/api/xmlhttprequest/open/index.md
index 567982586c..dd8cb68bd5 100644
--- a/files/fr/web/api/xmlhttprequest/open/index.md
+++ b/files/fr/web/api/xmlhttprequest/open/index.md
@@ -3,67 +3,47 @@ title: XMLHttpRequest.open()
 slug: Web/API/XMLHttpRequest/open
 translation_of: Web/API/XMLHttpRequest/open
 ---
-<div>{{APIRef('XMLHttpRequest')}}</div>
+{{APIRef('XMLHttpRequest')}}
 
-<p>La méthode <code><strong>open()</strong></code> de {{domxref("XMLHttpRequest")}} instancie une nouvelle requête ou réinitialise un déjà existante.</p>
+La méthode **`open()`** de {{domxref("XMLHttpRequest")}} instancie une nouvelle requête ou réinitialise un déjà existante.
 
-<div class="note">
-  <p><strong>Note :</strong> Appeler cette méthode pour une requête déjà active (pour laquelle une méthode <code>open()</code> a déjà été appelée) est équivalent à appeler  {{domxref("XMLHttpRequest.abort", "abort()")}}.</p>
-</div>
+> **Note :** Appeler cette méthode pour une requête déjà active (pour laquelle une méthode `open()` a déjà été appelée) est équivalent à appeler  {{domxref("XMLHttpRequest.abort", "abort()")}}.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><em>XMLHttpRequest</em>.open(<var>method</var>,<var> url</var>)
-<em>XMLHttpRequest</em>.open(<var>method</var>,<var> url</var>,<var> async)</var>
-<em>XMLHttpRequest</em>.open(<var>method</var>,<var> url</var>,<var> async</var>,<var> user</var>)
-<em>XMLHttpRequest</em>.open(<var>method</var>,<var> url</var>,<var> async</var>,<var> user</var>,<var> password</var>)
-</pre>
+    XMLHttpRequest.open(method, url)
+    XMLHttpRequest.open(method, url, async)
+    XMLHttpRequest.open(method, url, async, user)
+    XMLHttpRequest.open(method, url, async, user, password)
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>method</code></dt>
- <dd>La méthode  <a href="/en-US/docs/Web/HTTP/Methods">HTTP request </a> à utiliser telles que : <code>"GET"</code>, <code>"POST"</code>, <code>"PUT"</code>, <code>"DELETE"</code>, etc. Ignorée pour les URL non-HTTP(S).</dd>
- <dt><code>url</code></dt>
- <dd>Une {{domxref("DOMString")}} représentant l'URL à laquelle envoyer la requête.</dd>
- <dt><code>async</code> {{optional_inline}}</dt>
- <dd>Un booléen optionnel par défaut à <code>true</code>, indiquant s'il faut, ou pas, traiter la requête en asynchrone.  Si la valeur est à <code>false</code>, la méthode <code>send()</code> ne retourne rien tant qu'elle n'a pas reçu la réponse. Si la valeur est à  <code>true</code>, une notification de transaction complétée est fournie en utilisant un gestionnaire d'évènements. Le paramètre doit être sur "true" si l'attribut <code>multipart</code> est sur "true" aussi ou une exception sera levée.
- <div class="note">
-  <p><strong>Note :</strong> Les requêtes asynchrones sur le "thread" principal peuvent facilement dérouter l'utilisateur et devraient être évitées; En fait, de nombreux navigateurs ont un support XHR obsolète sur la totalité du "thread" principal. Les requêtes synchrones sont acceptées dans  {{domxref("Worker")}}.</p>
- </div>
- </dd>
- <dt><code>user</code> {{optional_inline}}</dt>
- <dd>Le nom de l'utilisateur, optionnel, à utiliser dans un but d'authentification. Sa valeur par défaut est <code>null</code>.</dd>
- <dt><code>password</code> {{optional_inline}}</dt>
- <dd>Le mot de passe, optionnel, à utiliser dans un but d'authentification. Sa valeur par défaut est <code>null</code>.</dd>
-</dl>
+- `method`
+  - : La méthode  [HTTP request ](/en-US/docs/Web/HTTP/Methods) à utiliser telles que : `"GET"`, `"POST"`, `"PUT"`, `"DELETE"`, etc. Ignorée pour les URL non-HTTP(S).
+- `url`
+  - : Une {{domxref("DOMString")}} représentant l'URL à laquelle envoyer la requête.
+- `async` {{optional_inline}}
 
-<h2 id="Spécificités">Spécificités</h2>
+  - : Un booléen optionnel par défaut à `true`, indiquant s'il faut, ou pas, traiter la requête en asynchrone.  Si la valeur est à `false`, la méthode `send()` ne retourne rien tant qu'elle n'a pas reçu la réponse. Si la valeur est à  `true`, une notification de transaction complétée est fournie en utilisant un gestionnaire d'évènements. Le paramètre doit être sur "true" si l'attribut `multipart` est sur "true" aussi ou une exception sera levée.
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('XMLHttpRequest', '#the-open()-method', 'open()')}}</td>
-   <td>{{Spec2('XMLHttpRequest')}}</td>
-   <td>WHATWG living standard</td>
-  </tr>
- </tbody>
-</table>
+    > **Note :** Les requêtes asynchrones sur le "thread" principal peuvent facilement dérouter l'utilisateur et devraient être évitées; En fait, de nombreux navigateurs ont un support XHR obsolète sur la totalité du "thread" principal. Les requêtes synchrones sont acceptées dans  {{domxref("Worker")}}.
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+- `user` {{optional_inline}}
+  - : Le nom de l'utilisateur, optionnel, à utiliser dans un but d'authentification. Sa valeur par défaut est `null`.
+- `password` {{optional_inline}}
+  - : Le mot de passe, optionnel, à utiliser dans un but d'authentification. Sa valeur par défaut est `null`.
 
-<p>{{Compat("api.XMLHttpRequest.open")}}</p>
+## Spécificités
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+| Specification                                                                        | Status                               | Comment                |
+| ------------------------------------------------------------------------------------ | ------------------------------------ | ---------------------- |
+| {{SpecName('XMLHttpRequest', '#the-open()-method', 'open()')}} | {{Spec2('XMLHttpRequest')}} | WHATWG living standard |
 
-<ul>
- <li><a href="/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest">Utiliser XMLHttpRequest</a></li>
- <li>Méthodes {{domxref("XMLHttpRequest")}} en relation : {{domxref("XMLHttpRequest.setRequestHeader", "setRequestHeader()")}},{{domxref("XMLHttpRequest.send", "send()")}}, and {{domxref("XMLHttpRequest.abort", "abort()")}}</li>
-</ul>
+## Compatibilité des navigateurs
+
+{{Compat("api.XMLHttpRequest.open")}}
+
+## Voir aussi
+
+- [Utiliser XMLHttpRequest](/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest)
+- Méthodes {{domxref("XMLHttpRequest")}} en relation : {{domxref("XMLHttpRequest.setRequestHeader", "setRequestHeader()")}},{{domxref("XMLHttpRequest.send", "send()")}}, and {{domxref("XMLHttpRequest.abort", "abort()")}}
diff --git a/files/fr/web/api/xmlhttprequest/readystate/index.md b/files/fr/web/api/xmlhttprequest/readystate/index.md
index c500f0ede1..1cad0b72e9 100644
--- a/files/fr/web/api/xmlhttprequest/readystate/index.md
+++ b/files/fr/web/api/xmlhttprequest/readystate/index.md
@@ -3,65 +3,68 @@ title: XMLHttpRequest.readyState
 slug: Web/API/XMLHttpRequest/readyState
 translation_of: Web/API/XMLHttpRequest/readyState
 ---
-<p>{{APIRef('XMLHttpRequest')}}</p>
+{{APIRef('XMLHttpRequest')}}
 
-<p>La propriété XMLHttpRequest.readyState renvoie l'état dans lequel se trouve un client XMLHttpRequest.Un client <abbr>XHR</abbr> existe dans l'un des états suivants :</p>
+La propriété XMLHttpRequest.readyState renvoie l'état dans lequel se trouve un client XMLHttpRequest.Un client XHR existe dans l'un des états suivants :
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <td class="header">Value</td>
-   <td class="header">State</td>
-   <td class="header">Description</td>
-  </tr>
-  <tr>
-   <td><code>0</code></td>
-   <td><code>UNSENT</code></td>
-   <td>Le client a été créé. open() n'a pas encore été appelé.</td>
-  </tr>
-  <tr>
-   <td><code>1</code></td>
-   <td><code>OPENED</code></td>
-   <td><code>open()</code>a été appelé.</td>
-  </tr>
-  <tr>
-   <td><code>2</code></td>
-   <td><code>HEADERS_RECEIVED</code></td>
-   <td><code>send()</code> a été appelé, et les en-têtes et le statut sont disponibles.</td>
-  </tr>
-  <tr>
-   <td><code>3</code></td>
-   <td><code>LOADING</code></td>
-   <td>Téléchargement; <code>responseText</code> contient des données partielles.</td>
-  </tr>
-  <tr>
-   <td><code>4</code></td>
-   <td><code>DONE</code></td>
-   <td>L'opération est terminée.</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <td class="header">Value</td>
+      <td class="header">State</td>
+      <td class="header">Description</td>
+    </tr>
+    <tr>
+      <td><code>0</code></td>
+      <td><code>UNSENT</code></td>
+      <td>Le client a été créé. open() n'a pas encore été appelé.</td>
+    </tr>
+    <tr>
+      <td><code>1</code></td>
+      <td><code>OPENED</code></td>
+      <td><code>open()</code>a été appelé.</td>
+    </tr>
+    <tr>
+      <td><code>2</code></td>
+      <td><code>HEADERS_RECEIVED</code></td>
+      <td>
+        <code>send()</code> a été appelé, et les en-têtes et le statut sont
+        disponibles.
+      </td>
+    </tr>
+    <tr>
+      <td><code>3</code></td>
+      <td><code>LOADING</code></td>
+      <td>
+        Téléchargement; <code>responseText</code> contient des données
+        partielles.
+      </td>
+    </tr>
+    <tr>
+      <td><code>4</code></td>
+      <td><code>DONE</code></td>
+      <td>L'opération est terminée.</td>
+    </tr>
+  </tbody>
 </table>
 
-<dl>
- <dt>UNSENT</dt>
- <dd>Le client XMLHttpRequest a été créé, mais la méthode open() n'a pas encore été appelée.</dd>
- <dt>OPENED</dt>
- <dd>La méthode open() a été invoquée. Pendant cet état, les en-têtes de requête peuvent être définis à l'aide de la méthode <a href="/en-US/docs/Web/API/XMLHttpRequest/setRequestHeader">setRequestHeader()</a>  et la méthode <a href="/en-US/docs/Web/API/XMLHttpRequest/send">send()</a>  peut être appelée, ce qui lancera la récupération.</dd>
- <dt>HEADERS_RECEIVED</dt>
- <dd>send() a été appelé et les en-têtes de réponse ont été reçus</dd>
- <dt>LOADING</dt>
- <dd>Le corps de la réponse est en cours de réception. Si <code><a href="/en-US/docs/Web/API/XMLHttpRequest/responseType">responseType</a></code> is "text"  ou une chaîne vide, <code><a href="/en-US/docs/Web/API/XMLHttpRequest/responseText">responseText</a></code> aura la réponse textuelle partielle au fur et à mesure de son chargement.</dd>
- <dt>DONE</dt>
- <dd>L'opération de récupération est terminée. Cela peut signifier que le transfert de données a été effectué avec succès ou a échoué.</dd>
-</dl>
+- UNSENT
+  - : Le client XMLHttpRequest a été créé, mais la méthode open() n'a pas encore été appelée.
+- OPENED
+  - : La méthode open() a été invoquée. Pendant cet état, les en-têtes de requête peuvent être définis à l'aide de la méthode [setRequestHeader()](/en-US/docs/Web/API/XMLHttpRequest/setRequestHeader)  et la méthode [send()](/en-US/docs/Web/API/XMLHttpRequest/send)  peut être appelée, ce qui lancera la récupération.
+- HEADERS_RECEIVED
+  - : send() a été appelé et les en-têtes de réponse ont été reçus
+- LOADING
+  - : Le corps de la réponse est en cours de réception. Si [`responseType`](/en-US/docs/Web/API/XMLHttpRequest/responseType) is "text"  ou une chaîne vide, [`responseText`](/en-US/docs/Web/API/XMLHttpRequest/responseText) aura la réponse textuelle partielle au fur et à mesure de son chargement.
+- DONE
+  - : L'opération de récupération est terminée. Cela peut signifier que le transfert de données a été effectué avec succès ou a échoué.
 
-<div class="note">
-<p><strong>Note :</strong> Les noms des états sont différents dans les versions d'Internet Explorer antérieures à 11. Au lieu de <code>UNSENT</code>, <code>OPENED</code>,<code> HEADERS_RECEIVED</code>,<code> LOADING</code> and <code>DONE</code>, the names <code>READYSTATE_UNINITIALIZED</code> (0), <code>READYSTATE_LOADING</code> (1), <code>READYSTATE_LOADED</code> (2), <code>READYSTATE_INTERACTIVE</code> (3) et <code>READYSTATE_COMPLETE</code> (4) sont utilisés.</p>
-</div>
+> **Note :** Les noms des états sont différents dans les versions d'Internet Explorer antérieures à 11. Au lieu de `UNSENT`, `OPENED`,` HEADERS_RECEIVED`,` LOADING` and `DONE`, the names `READYSTATE_UNINITIALIZED` (0), `READYSTATE_LOADING` (1), `READYSTATE_LOADED` (2), `READYSTATE_INTERACTIVE` (3) et `READYSTATE_COMPLETE` (4) sont utilisés.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">var xhr = new XMLHttpRequest();
+```js
+var xhr = new XMLHttpRequest();
 console.log('UNSENT', xhr.readyState); // readyState will be 0
 
 xhr.open('GET', '/api', true);
@@ -76,25 +79,14 @@ xhr.onload = function () {
 };
 
 xhr.send(null);
-</pre>
+```
 
-<h2 id="Specifications">Specifications</h2>
+## Specifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('XMLHttpRequest', '#states')}}</td>
-   <td>{{Spec2('XMLHttpRequest')}}</td>
-   <td>WHATWG living standard</td>
-  </tr>
- </tbody>
-</table>
+| Specification                                            | Statut                               | Comment                |
+| -------------------------------------------------------- | ------------------------------------ | ---------------------- |
+| {{SpecName('XMLHttpRequest', '#states')}} | {{Spec2('XMLHttpRequest')}} | WHATWG living standard |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.XMLHttpRequest.readyState")}}</p>
+{{Compat("api.XMLHttpRequest.readyState")}}
diff --git a/files/fr/web/api/xmlhttprequest/response/index.md b/files/fr/web/api/xmlhttprequest/response/index.md
index afbad2c4f1..d07b064c06 100644
--- a/files/fr/web/api/xmlhttprequest/response/index.md
+++ b/files/fr/web/api/xmlhttprequest/response/index.md
@@ -7,88 +7,112 @@ tags:
   - XMLHttpRequest
 translation_of: Web/API/XMLHttpRequest/response
 ---
-<div>{{draft}}</div>
-
-<div>{{APIRef('XMLHttpRequest')}}</div>
-
-<div>La propriété <code>XMLHttpRequest.response</code> contient le corps de la réponse. Elle peut être de type ArrayBuffer, Blob, Document, un objet JavaScript ou une DOMString en fonction de la valeur de la propriété <code>XMLHttpRequest.responseType</code>. La réponse ( <code>Value of response</code> ) est nulle si la requête est incomplète ou n'as pas été effectué avec succès. Cependant, si <code>responseType</code> est "text" ou une chaine vide et tant que la requête est en cours ( dans l'état <em>loading</em> ), <code>response</code> peut contenir la réponse partielle.</div>
-
-<div> </div>
+{{draft}}{{APIRef('XMLHttpRequest')}}La propriété `XMLHttpRequest.response` contient le corps de la réponse. Elle peut être de type ArrayBuffer, Blob, Document, un objet JavaScript ou une DOMString en fonction de la valeur de la propriété `XMLHttpRequest.responseType`. La réponse ( `Value of response` ) est nulle si la requête est incomplète ou n'as pas été effectué avec succès. Cependant, si `responseType` est "text" ou une chaine vide et tant que la requête est en cours ( dans l'état _loading_ ), `response` peut contenir la réponse partielle.
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <td class="header">Valeur de <code>responseType</code></td>
-   <td class="header">Type de donnée de la propriété <code>response</code></td>
-  </tr>
-  <tr>
-   <td><code>""</code></td>
-   <td>{{domxref("DOMString")}} (valeur par défaut)</td>
-  </tr>
-  <tr>
-   <td><code>"arraybuffer"</code></td>
-   <td>{{domxref("ArrayBuffer")}}</td>
-  </tr>
-  <tr>
-   <td><code>"blob"</code></td>
-   <td>{{domxref("Blob")}}</td>
-  </tr>
-  <tr>
-   <td><code>"document"</code></td>
-   <td>{{domxref("Document")}}</td>
-  </tr>
-  <tr>
-   <td><code>"json"</code></td>
-   <td>
-    <p>Objet JavaScript depuis une réponse JSON.</p>
-   </td>
-  </tr>
-  <tr>
-   <td><code>"text"</code></td>
-   <td>{{domxref("DOMString")}}</td>
-  </tr>
-  <tr>
-   <td><code>"moz-blob"</code> {{non-standard_inline}}</td>
-   <td>
-    <p>Used by Firefox to allow retrieving partial {{domxref("Blob")}} data from progress events. This lets your progress event handler start processing data while it's still being received. {{gecko_minversion_inline("12.0")}}</p>
-   </td>
-  </tr>
-  <tr>
-   <td><code>"moz-chunked-text"</code>{{non-standard_inline}}</td>
-   <td>
-    <p>Similar to <code>"text"</code>, but is streaming. This means that the value in <code>response</code> is only available during dispatch of the <code>"progress"</code> event and only contains the data received since the last <code>"progress"</code> event.</p>
-
-    <p>When <code>response</code> is accessed during a <code>"progress"</code> event it contains a string with the data. Otherwise it returns <code>null</code>.</p>
-
-    <p>This mode currently only works in Firefox. {{gecko_minversion_inline("9.0")}}</p>
-   </td>
-  </tr>
-  <tr>
-   <td><code>"moz-chunked-arraybuffer"</code>{{non-standard_inline}}</td>
-   <td>
-    <p>Similar to <code>"arraybuffer"</code>, but is streaming. This means that the value in <code>response</code> is only available during dispatch of the <code>"progress"</code> event and only contains the data received since the last <code>"progress"</code> event.</p>
-
-    <p>When <code>response</code> is accessed during a <code>"progress"</code> event it contains a string with the data. Otherwise it returns <code>null</code>.</p>
-
-    <p>This mode currently only works in Firefox. {{gecko_minversion_inline("9.0")}}</p>
-   </td>
-  </tr>
-  <tr>
-   <td>"ms-stream"{{non-standard_inline}}</td>
-   <td>
-    <p>Indique que la réponse est une partie d'un téléchargement d'un flux (?). Supporté uniquement pour les requêtes des téléchargements et disponible uniquement dans Internet Explorer.</p>
-   </td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <td class="header">Valeur de <code>responseType</code></td>
+      <td class="header">
+        Type de donnée de la propriété <code>response</code>
+      </td>
+    </tr>
+    <tr>
+      <td><code>""</code></td>
+      <td>{{domxref("DOMString")}} (valeur par défaut)</td>
+    </tr>
+    <tr>
+      <td><code>"arraybuffer"</code></td>
+      <td>{{domxref("ArrayBuffer")}}</td>
+    </tr>
+    <tr>
+      <td><code>"blob"</code></td>
+      <td>{{domxref("Blob")}}</td>
+    </tr>
+    <tr>
+      <td><code>"document"</code></td>
+      <td>{{domxref("Document")}}</td>
+    </tr>
+    <tr>
+      <td><code>"json"</code></td>
+      <td><p>Objet JavaScript depuis une réponse JSON.</p></td>
+    </tr>
+    <tr>
+      <td><code>"text"</code></td>
+      <td>{{domxref("DOMString")}}</td>
+    </tr>
+    <tr>
+      <td><code>"moz-blob"</code> {{non-standard_inline}}</td>
+      <td>
+        <p>
+          Used by Firefox to allow retrieving partial {{domxref("Blob")}}
+          data from progress events. This lets your progress event handler start
+          processing data while it's still being received.
+          {{gecko_minversion_inline("12.0")}}
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td><code>"moz-chunked-text"</code>{{non-standard_inline}}</td>
+      <td>
+        <p>
+          Similar to <code>"text"</code>, but is streaming. This means that the
+          value in <code>response</code> is only available during dispatch of
+          the <code>"progress"</code> event and only contains the data received
+          since the last <code>"progress"</code> event.
+        </p>
+        <p>
+          When <code>response</code> is accessed during a
+          <code>"progress"</code> event it contains a string with the data.
+          Otherwise it returns <code>null</code>.
+        </p>
+        <p>
+          This mode currently only works in Firefox.
+          {{gecko_minversion_inline("9.0")}}
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <code>"moz-chunked-arraybuffer"</code>{{non-standard_inline}}
+      </td>
+      <td>
+        <p>
+          Similar to <code>"arraybuffer"</code>, but is streaming. This means
+          that the value in <code>response</code> is only available during
+          dispatch of the <code>"progress"</code> event and only contains the
+          data received since the last <code>"progress"</code> event.
+        </p>
+        <p>
+          When <code>response</code> is accessed during a
+          <code>"progress"</code> event it contains a string with the data.
+          Otherwise it returns <code>null</code>.
+        </p>
+        <p>
+          This mode currently only works in Firefox.
+          {{gecko_minversion_inline("9.0")}}
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td>"ms-stream"{{non-standard_inline}}</td>
+      <td>
+        <p>
+          Indique que la réponse est une partie d'un téléchargement d'un flux
+          (?). Supporté uniquement pour les requêtes des téléchargements et
+          disponible uniquement dans Internet Explorer.
+        </p>
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<div class="note">
-<p><strong>Note:</strong> À partir de Gecko 11.0 {{geckoRelease("11.0")}} et de WebKit build 528, ces navigateurs ne permettent plus l'utilisation de l'attribut <code>responseType</code> lors des requêtes synchrones. Cela renvoi l'erreur <code>NS_ERROR_DOM_INVALID_ACCESS_ERR</code>. Ce changement a été proposé au W3C afin d'être standardisé. </p>
-</div>
+> **Note :** À partir de Gecko 11.0 {{geckoRelease("11.0")}} et de WebKit build 528, ces navigateurs ne permettent plus l'utilisation de l'attribut `responseType` lors des requêtes synchrones. Cela renvoi l'erreur `NS_ERROR_DOM_INVALID_ACCESS_ERR`. Ce changement a été proposé au W3C afin d'être standardisé.
 
-<h2 id="Example">Example</h2>
+## Example
 
-<pre class="brush: js">var url = 'somePage.html'; // une page locale
+```js
+var url = 'somePage.html'; // une page locale
 
 function load(url, callback) {
   var xhr = new XMLHttpRequest();
@@ -102,42 +126,27 @@ function load(url, callback) {
   xhr.open('GET', url, true);
   xhr.send('');
 }
+```
 
-</pre>
+## Specifications
 
-<h2 id="Specifications">Specifications</h2>
+| Specification                                                                | Status                               | Comment                |
+| ---------------------------------------------------------------------------- | ------------------------------------ | ---------------------- |
+| {{SpecName('XMLHttpRequest', '#the-response-attribute')}} | {{Spec2('XMLHttpRequest')}} | WHATWG living standard |
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('XMLHttpRequest', '#the-response-attribute')}}</td>
-   <td>{{Spec2('XMLHttpRequest')}}</td>
-   <td>WHATWG living standard</td>
-  </tr>
- </tbody>
-</table>
+## Compatibilité des navigateurs
+
+{{Compat("api.XMLHttpRequest")}}
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Voir aussi
 
-<div>{{Compat("api.XMLHttpRequest")}}</div>
+- {{domxref("XMLSerializer")}} : Sérialisation d'un arbre DOM en XML
+- Tutoriels MDN couvrant le `XMLHttpRequest` :
 
-<h2 id="See_also">Voir aussi</h2>
+  - [Ajax — Pour commencer](/fr/docs/Web/Guide/AJAX/Getting_Started)
+  - [Utilisation de XMLHttpRequest](/fr/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest)
+  - [HTML dans XMLHttpRequest](/fr/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest)
+  - [Fetch API](/fr/docs/Web/API/Fetch_API)
 
-<ul>
-  <li>{{domxref("XMLSerializer")}} : Sérialisation d'un arbre DOM en XML</li>
-  <li>Tutoriels MDN couvrant le <code>XMLHttpRequest</code> :
-    <ul>
-      <li><a href="/fr/docs/Web/Guide/AJAX/Getting_Started">Ajax — Pour commencer</a></li>
-      <li><a href="/fr/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Utilisation de XMLHttpRequest</a></li>
-      <li><a href="/fr/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">HTML dans XMLHttpRequest</a></li>
-      <li><a href="/fr/docs/Web/API/Fetch_API">Fetch API</a></li>
-    </ul>
-  </li>
-  <li><a href="http://www.html5rocks.com/en/tutorials/file/xhr2/">HTML5 Rocks — New Tricks in XMLHttpRequest2</a></li>
-  <li>Directive Feature-Policy {{httpheader("Feature-Policy/sync-xhr", "sync-xhr")}}</li>
-</ul>
+- [HTML5 Rocks — New Tricks in XMLHttpRequest2](http://www.html5rocks.com/en/tutorials/file/xhr2/)
+- Directive Feature-Policy {{httpheader("Feature-Policy/sync-xhr", "sync-xhr")}}
diff --git a/files/fr/web/api/xmlhttprequest/responsetext/index.md b/files/fr/web/api/xmlhttprequest/responsetext/index.md
index e9df4fd81a..5b78aee1da 100644
--- a/files/fr/web/api/xmlhttprequest/responsetext/index.md
+++ b/files/fr/web/api/xmlhttprequest/responsetext/index.md
@@ -3,34 +3,31 @@ title: XMLHttpRequest.responseText
 slug: Web/API/XMLHttpRequest/responseText
 translation_of: Web/API/XMLHttpRequest/responseText
 ---
-<div>{{draft}}</div>
+{{draft}}{{APIRef('XMLHttpRequest')}}
 
-<div>{{APIRef('XMLHttpRequest')}}</div>
+La lecture seule {{domxref("XMLHttpRequest")}} propriété **`responseText`** renvoie le texte reçu d'un serveur suite à l'envoi d'une requête.
 
-<p>La lecture seule {{domxref("XMLHttpRequest")}} propriété <strong><code>responseText</code></strong> renvoie le texte reçu d'un serveur suite à l'envoi d'une requête.</p>
+## Syntax
 
-<h2 id="Syntax">Syntax</h2>
+    var resultText = XMLHttpRequest.responseText;
 
-<pre class="syntaxbox">var <var>resultText</var> = <var>XMLHttpRequest</var>.responseText;</pre>
+### Value
 
-<h3 id="Value">Value</h3>
+A {{domxref("DOMString")}} qui contient soit les données textuelles reçues à l'aide du`XMLHttpRequest` ou `null` si la demande a échoué ou `""` si la demande n'a pas encore été envoyée en appelant {{domxref("XMLHttpRequest.send", "send()")}}.
 
-<p>A {{domxref("DOMString")}} qui contient soit les données textuelles reçues à l'aide du<code>XMLHttpRequest</code> ou <code>null</code> si la demande a échoué ou <code>""</code> si la demande n'a pas encore été envoyée en appelant {{domxref("XMLHttpRequest.send", "send()")}}.</p>
+Lors du traitement d'une requête asynchrone, la valeur de `responseText` reçoit toujours le contenu actuel du serveur, même s'il est incomplet car les données n'ont pas encore été complètement reçues.
 
-<p>Lors du traitement d'une requête asynchrone, la valeur de <code>responseText</code> reçoit toujours le contenu actuel du serveur, même s'il est incomplet car les données n'ont pas encore été complètement reçues.</p>
+Vous savez que tout le contenu a été reçu lorsque la valeur de {{domxref("XMLHttpRequest.readyState", "readyState")}} deviens {{domxref("XMLHttpRequest.DONE", "XMLHttpRequest.DONE")}} (`4`), et {{domxref("XMLHttpRequest.status", "status")}} becomes 200 (`"OK"`).
 
-<p>Vous savez que tout le contenu a été reçu lorsque la valeur de {{domxref("XMLHttpRequest.readyState", "readyState")}} deviens {{domxref("XMLHttpRequest.DONE", "XMLHttpRequest.DONE")}} (<code>4</code>), et {{domxref("XMLHttpRequest.status", "status")}} becomes 200 (<code>"OK"</code>).</p>
+### Exceptions
 
-<h3 id="Exceptions">Exceptions</h3>
+- `InvalidStateError`
+  - : Le {{domxref("XMLHttpRequest.responseType")}} n'est défini ni sur la chaîne vide ni sur "texte". Étant donné que la propriété responseText n'est valide que pour le contenu texte, toute autre valeur est une condition d'erreur.
 
-<dl>
- <dt><code>InvalidStateError</code></dt>
- <dd>Le {{domxref("XMLHttpRequest.responseType")}} n'est défini ni sur la chaîne vide ni sur "texte". Étant donné que la propriété responseText n'est valide que pour le contenu texte, toute autre valeur est une condition d'erreur.</dd>
-</dl>
+## Example
 
-<h2 id="Example">Example</h2>
-
-<pre class="brush: js">var xhr = new XMLHttpRequest();
+```js
+var xhr = new XMLHttpRequest();
 xhr.open('GET', '/server', true);
 
 // If specified, responseType must be empty string or "text"
@@ -45,27 +42,15 @@ xhr.onload = function () {
     }
 };
 
-xhr.send(null);</pre>
-
-<h2 id="Specifications">Specifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('XMLHttpRequest', '#the-responsetext-attribute')}}</td>
-   <td>{{Spec2('XMLHttpRequest')}}</td>
-   <td>WHATWG living standard</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Browser compatibility</h2>
-
-<p>{{Compat("api.XMLHttpRequest.responseText")}}</p>
+xhr.send(null);
+```
+
+## Specifications
+
+| Specification                                                                    | Status                               | Comment                |
+| -------------------------------------------------------------------------------- | ------------------------------------ | ---------------------- |
+| {{SpecName('XMLHttpRequest', '#the-responsetext-attribute')}} | {{Spec2('XMLHttpRequest')}} | WHATWG living standard |
+
+## Browser compatibility
+
+{{Compat("api.XMLHttpRequest.responseText")}}
diff --git a/files/fr/web/api/xmlhttprequest/send/index.md b/files/fr/web/api/xmlhttprequest/send/index.md
index 26f77bf14a..55257c79e2 100644
--- a/files/fr/web/api/xmlhttprequest/send/index.md
+++ b/files/fr/web/api/xmlhttprequest/send/index.md
@@ -15,62 +15,47 @@ tags:
   - send
 translation_of: Web/API/XMLHttpRequest/send
 ---
-<div>{{APIRef('XMLHttpRequest')}}</div>
+{{APIRef('XMLHttpRequest')}}
 
-<p>La méthode  {{domxref("XMLHttpRequest")}} <code><strong>send()</strong></code> envoie la requête au serveur.  Si la requête est asynchrone (elle l'est par défaut), la méthode envoie un retour dés que la requête est partie et le résultat est intégré en utilisant les évènements. En cas de requête synchrone, elle ne renvoie rien tant que la réponse n'est pas retournée.</p>
+La méthode  {{domxref("XMLHttpRequest")}} **`send()`** envoie la requête au serveur.  Si la requête est asynchrone (elle l'est par défaut), la méthode envoie un retour dés que la requête est partie et le résultat est intégré en utilisant les évènements. En cas de requête synchrone, elle ne renvoie rien tant que la réponse n'est pas retournée.
 
-<p><code>send()</code> accepte un paramètre optionnel qui qui vous permet de spécifier le corps de la requête; c'est principalement utilisé pour les requêtes comme  {{HTTPMethod("PUT")}}. Si la méthode est {{HTTPMethod("GET")}} ou {{HTTPMethod("HEAD")}}, le paramètre <code>body</code> est ignoré et le corps de la requête est fixé à <code>null</code>.</p>
+`send()` accepte un paramètre optionnel qui qui vous permet de spécifier le corps de la requête; c'est principalement utilisé pour les requêtes comme  {{HTTPMethod("PUT")}}. Si la méthode est {{HTTPMethod("GET")}} ou {{HTTPMethod("HEAD")}}, le paramètre `body` est ignoré et le corps de la requête est fixé à `null`.
 
-<p>Si aucun "header"{{HTTPHeader("Accept")}} n'a été paramétré dans {{domxref("XMLHttpRequest.setRequestHeader", "setRequestHeader()")}}, un "header" <code>Accept</code> avec le type <code>"*/*"</code> (tous types) est envoyé.</p>
+Si aucun "header"{{HTTPHeader("Accept")}} n'a été paramétré dans {{domxref("XMLHttpRequest.setRequestHeader", "setRequestHeader()")}}, un "header" `Accept` avec le type `"*/*"` (tous types) est envoyé.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="syntaxbox"><var>XMLHttpRequest</var>.send(<var>body</var>)
-</pre>
+    XMLHttpRequest.send(body)
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<dl>
- <dt><code>body</code> {{optional_inline}}</dt>
- <dd>Le corps des données à envoyer dans la requête XHR. Cela peut être :
- <ul>
-  <li>Un {{domxref("Document")}}, dans quel cas il est sérialisé avant d'être envoyé.</li>
-  <li>Un  <code>XMLHttpRequestBodyInit</code> , dont le which <a href="https://fetch.spec.whatwg.org/#bodyinit">standard </a><a href="https://fetch.spec.whatwg.org/#bodyinit">Fetch</a> peut être un  {{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, ou un objet  {{domxref("USVString")}} .</li>
-  <li><code>null</code></li>
- </ul>
- Si la valeur du corps n'est pas spécifiée, la valeur par défaut <code>null</code> est employée.</dd>
-</dl>
+- `body` {{optional_inline}}
 
-<p>La meilleure manière d'envoyer du contenu binaire (par exemple dans l'upload de fichiers) est d'utiliser un {{domxref("ArrayBufferView")}} ou  {{domxref("Blob")}} en conjonction avec la méthode <code>send()</code>.</p>
+  - : Le corps des données à envoyer dans la requête XHR. Cela peut être :
 
-<h3 id="Valeur_de_retour">Valeur de retour</h3>
+    - Un {{domxref("Document")}}, dans quel cas il est sérialisé avant d'être envoyé.
+    - Un `XMLHttpRequestBodyInit` , dont le which [standard ](https://fetch.spec.whatwg.org/#bodyinit)[Fetch](https://fetch.spec.whatwg.org/#bodyinit) peut être un  {{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, ou un objet  {{domxref("USVString")}} .
+    - `null`
 
-<p><code>undefined</code>.</p>
+    Si la valeur du corps n'est pas spécifiée, la valeur par défaut `null` est employée.
 
-<h3 id="Exceptions">Exceptions</h3>
+La meilleure manière d'envoyer du contenu binaire (par exemple dans l'upload de fichiers) est d'utiliser un {{domxref("ArrayBufferView")}} ou  {{domxref("Blob")}} en conjonction avec la méthode `send()`.
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Exception</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>InvalidStateError</code></td>
-   <td><code>send()</code> a déjà été invoquée pour la requête, et/ou celle-ci est incomplète.</td>
-  </tr>
-  <tr>
-   <td><code>NetworkError</code></td>
-   <td>Le type de ressource à récupérer est un <strong>BLOB</strong>, <em>(binary large object</em>) , et la méthode n'est pas <code>GET</code>.</td>
-  </tr>
- </tbody>
-</table>
+### Valeur de retour
 
-<h2 id="Exemple_GET">Exemple: GET</h2>
+`undefined`.
 
-<pre class="brush: js"><code>var xhr = new XMLHttpRequest();
+### Exceptions
+
+| Exception           | Description                                                                                                |
+| ------------------- | ---------------------------------------------------------------------------------------------------------- |
+| `InvalidStateError` | `send()` a déjà été invoquée pour la requête, et/ou celle-ci est incomplète.                               |
+| `NetworkError`      | Le type de ressource à récupérer est un **BLOB**, _(binary large object_) , et la méthode n'est pas `GET`. |
+
+## Exemple: GET
+
+```js
+var xhr = new XMLHttpRequest();
 xhr.open('GET', '/server', true);
 
 xhr.onload = function () {
@@ -79,55 +64,41 @@ xhr.onload = function () {
 
 xhr.send(null);
 // xhr.send('string');
-</code>// <code>xhr.send(new Blob());
+// xhr.send(new Blob());
 // xhr.send(new Int8Array());
-// xhr.send(document);</code>
-</pre>
+// xhr.send(document);
+```
 
-<h2 id="Example_POST">Example: POST</h2>
+## Example: POST
 
-<pre class="brush: js"><code>var xhr = new XMLHttpRequest();
+```js
+var xhr = new XMLHttpRequest();
 xhr.open("POST", '/server', true);
 
 //Envoie les informations du header adaptées avec la requête
 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
 
 xhr.onreadystatechange = function() { //Appelle une fonction au changement d'état.
-    if (this.readyState === XMLHttpRequest.DONE &amp;&amp; this.status === 200) {
+    if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
 // Requête finie, traitement ici.
     }
 }
-xhr.send("foo=bar&amp;lorem=ipsum");
+xhr.send("foo=bar&lorem=ipsum");
 // xhr.send(new Int8Array());
-// xhr.send(document);</code>
-</pre>
-
-<h2 id="Spécificités">Spécificités</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specificité</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('XMLHttpRequest', '#the-send()-method', 'send()')}}</td>
-   <td>{{Spec2('XMLHttpRequest')}}</td>
-   <td>WHATWG living standard</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_navigateur">Compatibilité navigateur</h2>
-
-<div>{{Compat("api.XMLHttpRequest.send")}}</div>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest">L'utilisation de XMLHttpRequest</a></li>
- <li><a href="/en-US/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">HTML dans XMLHttpRequest</a></li>
-</ul>
+// xhr.send(document);
+```
+
+## Spécificités
+
+| Specificité                                                                          | Statut                               | Commentaire            |
+| ------------------------------------------------------------------------------------ | ------------------------------------ | ---------------------- |
+| {{SpecName('XMLHttpRequest', '#the-send()-method', 'send()')}} | {{Spec2('XMLHttpRequest')}} | WHATWG living standard |
+
+## Compatibilité navigateur
+
+{{Compat("api.XMLHttpRequest.send")}}
+
+## Voir aussi
+
+- [L'utilisation de XMLHttpRequest](/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest)
+- [HTML dans XMLHttpRequest](/en-US/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest)
diff --git a/files/fr/web/api/xmlhttprequest/setrequestheader/index.md b/files/fr/web/api/xmlhttprequest/setrequestheader/index.md
index ed3689fd8d..14381808cd 100644
--- a/files/fr/web/api/xmlhttprequest/setrequestheader/index.md
+++ b/files/fr/web/api/xmlhttprequest/setrequestheader/index.md
@@ -3,62 +3,44 @@ title: XMLHttpRequest.setRequestHeader()
 slug: Web/API/XMLHttpRequest/setRequestHeader
 translation_of: Web/API/XMLHttpRequest/setRequestHeader
 ---
-<div>{{APIRef('XMLHttpRequest')}}</div>
+{{APIRef('XMLHttpRequest')}}
 
-<p>La méthode <code><strong>setRequestHeader()</strong></code> de l'objet {{domxref("XMLHttpRequest")}} permet d'éditer le header d'une requête HTTP. Vous devez appeler la méthode <code>setRequestHeader()</code>, après la méthode {{domxref("XMLHttpRequest.open", "open()")}}, et avant {{domxref("XMLHttpRequest.send", "send()")}}. Si vous faite appel plusieurs fois à <code>setRequestHeader()</code> dans une même requête, tout sera combiné au sein d'un même header.</p>
+La méthode **`setRequestHeader()`** de l'objet {{domxref("XMLHttpRequest")}} permet d'éditer le header d'une requête HTTP. Vous devez appeler la méthode `setRequestHeader()`, après la méthode {{domxref("XMLHttpRequest.open", "open()")}}, et avant {{domxref("XMLHttpRequest.send", "send()")}}. Si vous faite appel plusieurs fois à `setRequestHeader()` dans une même requête, tout sera combiné au sein d'un même header.
 
-<p>A chaque fois que vous appellez <code>setRequestHeader()</code>, son contenu est ajouté à la fin du header existant.</p>
+A chaque fois que vous appellez `setRequestHeader()`, son contenu est ajouté à la fin du header existant.
 
-<p>Si aucun {{HTTPHeader("Accept")}} n'a été configurer avec cette méthode, un <code>Accept</code> header avec le type <code>"*/*"</code> sera envoyé avec la requête lorsque {{domxref("XMLHttpRequest.send", "send()")}} sera appellée.</p>
+Si aucun {{HTTPHeader("Accept")}} n'a été configurer avec cette méthode, un `Accept` header avec le type `"*/*"` sera envoyé avec la requête lorsque {{domxref("XMLHttpRequest.send", "send()")}} sera appellée.
 
-<p>Pour des raisons de sécurité, certain header ne peuvent être manipulés que par le user agent. Ceux-ci contiennent les paramètres {{Glossary("Forbidden_header_name", "forbidden header names", 1)}}  et {{Glossary("Forbidden_response_header_name", "forbidden response header names", 1)}}.</p>
+Pour des raisons de sécurité, certain header ne peuvent être manipulés que par le user agent. Ceux-ci contiennent les paramètres {{Glossary("Forbidden_header_name", "forbidden header names", 1)}}  et {{Glossary("Forbidden_response_header_name", "forbidden response header names", 1)}}.
 
-<div class="note">
-<p><strong>Note:</strong> Dans certain cas, vous pourrez rencontrer l'erreur / exception "<strong>not allowed by Access-Control-Allow-Headers in preflight response</strong>" quand vous enverez une requête cross domains. Dans ce cas, vous devrez configurer {{HTTPHeader("Access-Control-Allow-Headers")}} dans votre réponse HTTP coté serveur.</p>
-</div>
+> **Note :** Dans certain cas, vous pourrez rencontrer l'erreur / exception "**not allowed by Access-Control-Allow-Headers in preflight response**" quand vous enverez une requête cross domains. Dans ce cas, vous devrez configurer {{HTTPHeader("Access-Control-Allow-Headers")}} dans votre réponse HTTP coté serveur.
 
-<h2 id="Syntax">Syntax</h2>
+## Syntax
 
-<pre class="syntaxbox"><em>XMLHttpRequest</em>.setRequestHeader(<var>header</var>, <var>value</var>)
-</pre>
+    XMLHttpRequest.setRequestHeader(header, value)
 
-<h3 id="Paramètre">Paramètre</h3>
+### Paramètre
 
-<dl>
- <dt><code>header</code></dt>
- <dd>Le paramètre du header.</dd>
- <dt><code>value</code></dt>
- <dd>La valeur de ce paramètre.</dd>
-</dl>
+- `header`
+  - : Le paramètre du header.
+- `value`
+  - : La valeur de ce paramètre.
 
-<h3 id="Valeurs_de_retour">Valeurs de retour</h3>
+### Valeurs de retour
 
-<p><code>undefined</code>.</p>
+`undefined`.
 
-<h2 id="Specifications">Specifications</h2>
+## Specifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('XMLHttpRequest', '#the-setRequestHeader()-method', 'setRequestHeader()')}}</td>
-   <td>{{Spec2('XMLHttpRequest')}}</td>
-   <td>WHATWG living standard</td>
-  </tr>
- </tbody>
-</table>
+| Specification                                                                                                        | Status                               | Comment                |
+| -------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ---------------------- |
+| {{SpecName('XMLHttpRequest', '#the-setRequestHeader()-method', 'setRequestHeader()')}} | {{Spec2('XMLHttpRequest')}} | WHATWG living standard |
 
-<h2 id="Compatibilitée_avec_les_navigateurs">Compatibilitée avec les navigateurs</h2>
+## Compatibilitée avec les navigateurs
 
-<p>{{Compat("api.XMLHttpRequest.setRequestHeader")}}</p>
+{{Compat("api.XMLHttpRequest.setRequestHeader")}}
 
-<h2 id="A_voir_aussi">A voir aussi</h2>
+## A voir aussi
 
-<ul>
- <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a></li>
- <li><a href="/en-US/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">HTML in XMLHttpRequest</a></li>
-</ul>
+- [Using XMLHttpRequest](/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest)
+- [HTML in XMLHttpRequest](/en-US/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest)
diff --git a/files/fr/web/api/xmlhttprequest/status/index.md b/files/fr/web/api/xmlhttprequest/status/index.md
index a6fe81eda6..9505f4cdf8 100644
--- a/files/fr/web/api/xmlhttprequest/status/index.md
+++ b/files/fr/web/api/xmlhttprequest/status/index.md
@@ -3,15 +3,16 @@ title: XMLHttpRequest.status
 slug: Web/API/XMLHttpRequest/status
 translation_of: Web/API/XMLHttpRequest/status
 ---
-<div>{{APIRef('XMLHttpRequest')}}</div>
+{{APIRef('XMLHttpRequest')}}
 
-<p>La propriété en lecture seule XMLHttpRequest.status renvoie le code d'état HTTP numérique de la réponse de XMLHttpRequest.</p>
+La propriété en lecture seule XMLHttpRequest.status renvoie le code d'état HTTP numérique de la réponse de XMLHttpRequest.
 
-<p>Avant que la demande ne se termine, la valeur du statut est 0. Les navigateurs signalent également un statut de 0 en cas d'erreurs XMLHttpRequest.</p>
+Avant que la demande ne se termine, la valeur du statut est 0. Les navigateurs signalent également un statut de 0 en cas d'erreurs XMLHttpRequest.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<pre class="brush: js">var xhr = new XMLHttpRequest();
+```js
+var xhr = new XMLHttpRequest();
 console.log('UNSENT: ', xhr.status);
 
 xhr.open('GET', '/server');
@@ -35,34 +36,19 @@ xhr.send();
  * LOADING: 200
  * DONE: 200
  */
-</pre>
+```
 
-<h2 id="Specifications">Specifications</h2>
+## Specifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Comment</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('XMLHttpRequest', '#the-status-attribute')}}</td>
-   <td>{{Spec2('XMLHttpRequest')}}</td>
-   <td>WHATWG living standard</td>
-  </tr>
- </tbody>
-</table>
+| Specification                                                            | Statut                               | Comment                |
+| ------------------------------------------------------------------------ | ------------------------------------ | ---------------------- |
+| {{SpecName('XMLHttpRequest', '#the-status-attribute')}} | {{Spec2('XMLHttpRequest')}} | WHATWG living standard |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.XMLHttpRequest.status")}}</p>
+{{Compat("api.XMLHttpRequest.status")}}
 
-<p>Voir aussi</p>
+Voir aussi
 
-<ul>
- <li>Liste des <a href="/en-US/docs/Web/HTTP/Response_codes">HTTP response codes</a></li>
- <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
-</ul>
+- Liste des [HTTP response codes](/en-US/docs/Web/HTTP/Response_codes)
+- [HTTP](/en-US/docs/Web/HTTP)
diff --git a/files/fr/web/api/xmlhttprequest/timeout/index.md b/files/fr/web/api/xmlhttprequest/timeout/index.md
index e3dc91ab6b..0303ef2825 100644
--- a/files/fr/web/api/xmlhttprequest/timeout/index.md
+++ b/files/fr/web/api/xmlhttprequest/timeout/index.md
@@ -10,21 +10,18 @@ tags:
   - XMLHttpRequest
 translation_of: Web/API/XMLHttpRequest/timeout
 ---
-<div>{{APIRef('XMLHttpRequest')}}</div>
+{{APIRef('XMLHttpRequest')}}
 
-<p>La propriété <code><strong>XMLHttpRequest.timeout</strong></code> est un <code>unsigned long</code> (un entier long, non-signé) représentant la durée, en millisecondes, qu'une requête peut prendre avant d'être automatiquement terminée. Par défaut, la valeur est 0 et il n'y pas de <em>timeout</em>. Lorsqu'une requête expire, un évènement <code><a href="/fr/docs/Web/API/XMLHttpRequest/timeout_event">timeout</a></code> est déclenché.</p>
+La propriété **`XMLHttpRequest.timeout`** est un `unsigned long` (un entier long, non-signé) représentant la durée, en millisecondes, qu'une requête peut prendre avant d'être automatiquement terminée. Par défaut, la valeur est 0 et il n'y pas de _timeout_. Lorsqu'une requête expire, un évènement [`timeout`](/fr/docs/Web/API/XMLHttpRequest/timeout_event) est déclenché.
 
-<div class="note">
-  <p><strong>Note :</strong> Pour un exemple, voir <a href="/fr/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests#Example_using_a_timeout">Utiliser la propriété <code>timeout</code> avec une requête asynchrone</a>.</p>
-</div>
+> **Note :** Pour un exemple, voir [Utiliser la propriété `timeout` avec une requête asynchrone](/fr/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests#Example_using_a_timeout).
 
-<div class="note">
-  <p><strong>Note :</strong> Ces délais d'expiration ne devraient pas être utilisés pour les requêtes <code>XMLHttpRequest</code> synchrones dans <a href="/fr/docs/Glossaire/Environnement_de_document">un environnement de document</a> : ils déclencheront une exception <code>InvalidAccessError</code>. On ne peut donc pas utiliser de <em>timeout</em> pour les requêtes synchrones avec une fenêtre parente.</p>
-</div>
+> **Note :** Ces délais d'expiration ne devraient pas être utilisés pour les requêtes `XMLHttpRequest` synchrones dans [un environnement de document](/fr/docs/Glossaire/Environnement_de_document) : ils déclencheront une exception `InvalidAccessError`. On ne peut donc pas utiliser de _timeout_ pour les requêtes synchrones avec une fenêtre parente.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: js">var xhr = new XMLHttpRequest();
+```js
+var xhr = new XMLHttpRequest();
 xhr.open('GET', '/server', true);
 
 xhr.timeout = 2000; // durée en millisecondes
@@ -37,29 +34,17 @@ xhr.ontimeout = function (e) {
   // Requête qui a expiré. On traite ce cas.
 };
 
-xhr.send(null);</pre>
+xhr.send(null);
+```
 
-<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('XMLHttpRequest', '#the-timeout-attribute')}}</td>
-   <td>{{Spec2('XMLHttpRequest')}}</td>
-   <td>Standard évolutif WHATWG</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                | État                                 | Commentaires             |
+| ---------------------------------------------------------------------------- | ------------------------------------ | ------------------------ |
+| {{SpecName('XMLHttpRequest', '#the-timeout-attribute')}} | {{Spec2('XMLHttpRequest')}} | Standard évolutif WHATWG |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.XMLHttpRequest.timeout")}}</p>
+{{Compat("api.XMLHttpRequest.timeout")}}
 
-<p>Pour Internet Explorer, la propriété <code>timeout</code> ne peut être définie qu'après avoir appelé la méthode <code><a href="/fr/docs/Web/API/XMLHttpRequest/open">open()</a></code> et avant d'appeler la méthode <code><a href="/fr/docs/Web/API/XMLHttpRequest/send">send()</a></code>.</p>
+Pour Internet Explorer, la propriété `timeout` ne peut être définie qu'après avoir appelé la méthode [`open()`](/fr/docs/Web/API/XMLHttpRequest/open) et avant d'appeler la méthode [`send()`](/fr/docs/Web/API/XMLHttpRequest/send).
diff --git a/files/fr/web/api/xmlhttprequest/using_xmlhttprequest/index.md b/files/fr/web/api/xmlhttprequest/using_xmlhttprequest/index.md
index a2d850ed5d..58391c951a 100644
--- a/files/fr/web/api/xmlhttprequest/using_xmlhttprequest/index.md
+++ b/files/fr/web/api/xmlhttprequest/using_xmlhttprequest/index.md
@@ -14,70 +14,65 @@ tags:
 translation_of: Web/API/XMLHttpRequest/Using_XMLHttpRequest
 original_slug: Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest
 ---
+[`XMLHttpRequest`](/en-US/docs/DOM/XMLHttpRequest) permet d'envoyer des requêtes HTTP de manière très simple.  Il suffit de créer une instance de l'objet, d'ouvrir une URL, et d'envoyer la requête.  Le [status HTTP](/en-US/docs/HTTP/HTTP_response_codes) du résultat, tout comme le contenu de la réponse, sont disponibles dans l'objet de la requête quand la transaction est terminée. Cette page présente quelques-uns des cas d'utilisation communs et même un peu obscurs pour cet objet JavaScript puissant.
 
-<p><a href="/en-US/docs/DOM/XMLHttpRequest"><code>XMLHttpRequest</code></a> permet d'envoyer des requêtes HTTP de manière très simple.  Il suffit de créer une instance de l'objet, d'ouvrir une URL, et d'envoyer la requête.  Le <a href="/en-US/docs/HTTP/HTTP_response_codes">status HTTP</a> du résultat, tout comme le contenu de la réponse, sont disponibles dans l'objet de la requête quand la transaction est terminée. Cette page présente quelques-uns des cas d'utilisation communs et même un peu obscurs pour cet objet JavaScript puissant.</p>
-
-<pre class="brush: js">function reqListener () {
+```js
+function reqListener () {
   console.log(this.responseText);
 }
 
 var oReq = new XMLHttpRequest();
 oReq.onload = reqListener;
 oReq.open("get", "yourFile.txt", true);
-oReq.send();</pre>
+oReq.send();
+```
 
-<h2 id="Types_de_requêtes">Types de requêtes</h2>
+## Types de requêtes
 
-<p>Une demande faite via XMLHttpRequest peut récupérer les données dans l'une des deux façons, de manière asynchrone ou synchrone. Le type de demande est dictée par l'argument optionnel async (le troisième argument) qui est mis sur la méthode <a href="/en-US/docs/DOM/XMLHttpRequest#open()">open()</a> XMLHttpRequest (). Si cet argument est true ou non spécifié, l'objet XMLHttpRequest est traitée de manière asynchrone, sinon le processus est effectué de façon synchrone. Une discussion détaillée et des démonstrations de ces deux types de demandes peuvent être trouvés sur la page des <a href="/en-US/docs/DOM/XMLHttpRequest/Synchronous_and_Asynchronous_Requests">requêtes synchrones et asynchrones</a>. En général, vous devriez rarement, voire jamais, utiliser requêtes synchrones.</p>
+Une demande faite via XMLHttpRequest peut récupérer les données dans l'une des deux façons, de manière asynchrone ou synchrone. Le type de demande est dictée par l'argument optionnel async (le troisième argument) qui est mis sur la méthode [open()](</en-US/docs/DOM/XMLHttpRequest#open()>) XMLHttpRequest (). Si cet argument est true ou non spécifié, l'objet XMLHttpRequest est traitée de manière asynchrone, sinon le processus est effectué de façon synchrone. Une discussion détaillée et des démonstrations de ces deux types de demandes peuvent être trouvés sur la page des [requêtes synchrones et asynchrones](/en-US/docs/DOM/XMLHttpRequest/Synchronous_and_Asynchronous_Requests). En général, vous devriez rarement, voire jamais, utiliser requêtes synchrones.
 
-<div class="note">
-  <p><strong>Note :</strong> A partir de Gecko 30.0 {{ geckoRelease("30.0") }}, les requêtes synchrones sur le processus principal ont été dépréciées en raison de l'effet négatif sur l'expérience utilisateur.</p>
-</div>
+> **Note :** A partir de Gecko 30.0 {{ geckoRelease("30.0") }}, les requêtes synchrones sur le processus principal ont été dépréciées en raison de l'effet négatif sur l'expérience utilisateur.
 
-<h2 id="Gérer_les_réponses">Gérer les réponses</h2>
+## Gérer les réponses
 
-<p>Il existe plusieurs types <a href="http://www.w3.org/TR/XMLHttpRequest2/#response">d'attributs de réponse</a> définies par la spécification W3C pour XMLHttpRequest. Ceci indique que le client faisant l'objet XMLHttpRequest des informations importantes sur l'état ​​de la réponse. Certains cas où, traitant de types de réponse non-texte peuvent impliquer une certaine manipulation et l'analyse comme indiqué dans les sections suivantes.</p>
+Il existe plusieurs types [d'attributs de réponse](http://www.w3.org/TR/XMLHttpRequest2/#response) définies par la spécification W3C pour XMLHttpRequest. Ceci indique que le client faisant l'objet XMLHttpRequest des informations importantes sur l'état ​​de la réponse. Certains cas où, traitant de types de réponse non-texte peuvent impliquer une certaine manipulation et l'analyse comme indiqué dans les sections suivantes.
 
-<h3 id="Analyser_et_manipuler_la_propriété_responseXML">Analyser et manipuler la propriété <code>responseXML</code></h3>
+### Analyser et manipuler la propriété `responseXML`
 
-<p>Si vous utlisez <code>XMLHttpRequest </code>pour obtenir le contenu d'un fichier XML distant, la propriété <code>responseXML </code>sera un Objet DOM contenant le document XML parsé, qui peut être difficile à manipuler et analyser. Il y a quatres moyens principaux d'analyser ce document XML :</p>
+Si vous utlisez `XMLHttpRequest `pour obtenir le contenu d'un fichier XML distant, la propriété `responseXML `sera un Objet DOM contenant le document XML parsé, qui peut être difficile à manipuler et analyser. Il y a quatres moyens principaux d'analyser ce document XML :
 
-<ol>
- <li>Utiliser <a href="/en-US/docs/XPath">XPath</a> pour localiser des parties.</li>
- <li>Utiliser <a href="/en-US/docs/JXON">JXON</a> pour le convertir en Objet structuré JavaScript.</li>
- <li>Manuellement <a href="/en-US/docs/Parsing_and_serializing_XML">parser et serializer le XML</a> en chaînes de caractères ou en objets.</li>
- <li>Utiliser <a href="/en-US/docs/XMLSerializer">XMLSerializer</a> pour serializer <strong>le DOM en chaînes ou en fichiers.</strong></li>
- <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/RegExp">RegExp </a>peut être utlisé si vous connaissez à l'avance le contenu du document XML. Vous pouvez supprimer les sauts de ligne, si vous utlisez RegExp en prenant en compte ces sauts. Toutefois, cette méthode est un "dernier recours", car si le code XML change légèrement, la méthode échouera probablement.</li>
-</ol>
+1.  Utiliser [XPath](/en-US/docs/XPath) pour localiser des parties.
+2.  Utiliser [JXON](/en-US/docs/JXON) pour le convertir en Objet structuré JavaScript.
+3.  Manuellement [parser et serializer le XML](/en-US/docs/Parsing_and_serializing_XML) en chaînes de caractères ou en objets.
+4.  Utiliser [XMLSerializer](/en-US/docs/XMLSerializer) pour serializer **le DOM en chaînes ou en fichiers.**
+5.  [RegExp ](/en-US/docs/JavaScript/Reference/Global_Objects/RegExp)peut être utlisé si vous connaissez à l'avance le contenu du document XML. Vous pouvez supprimer les sauts de ligne, si vous utlisez RegExp en prenant en compte ces sauts. Toutefois, cette méthode est un "dernier recours", car si le code XML change légèrement, la méthode échouera probablement.
 
-<h3 id="Analyser_et_manipuler_une_propriété_responseText_contenant_un_document_HTML">Analyser et manipuler une propriété <code>responseText</code> contenant un document HTML</h3>
+### Analyser et manipuler une propriété `responseText` contenant un document HTML
 
-<div class="note">
-  <p><strong>Note :</strong> La spécification W3C <a href="http://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html">XMLHttpRequest</a>  autorise le HTML a être parsé via la propritété <code>XMLHttpRequest.responseXML</code>. Lisez l'article à propos du <a href="/en-US/docs/HTML_in_XMLHttpRequest">HTML dans XMLHttpRequest</a> pour plus de détails.</p>
-</div>
+> **Note :** La spécification W3C [XMLHttpRequest](http://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html)  autorise le HTML a être parsé via la propritété `XMLHttpRequest.responseXML`. Lisez l'article à propos du [HTML dans XMLHttpRequest](/en-US/docs/HTML_in_XMLHttpRequest) pour plus de détails.
 
-<p>Si vous utilisez <code>XMLHttpRequest</code> pour récupérer le contenu d'une page HTML distante, la propriété <code>responseText</code> est une chaîne de caractères contenant une "soupe" de tous les tags HTML, qui peut être difficile à manipuler et à analyser. Il y a trois moyens principaux d'analyser cette soupe de HTML :</p>
+Si vous utilisez `XMLHttpRequest` pour récupérer le contenu d'une page HTML distante, la propriété `responseText` est une chaîne de caractères contenant une "soupe" de tous les tags HTML, qui peut être difficile à manipuler et à analyser. Il y a trois moyens principaux d'analyser cette soupe de HTML :
 
-<ol>
- <li>Utiliser la propriété <code>XMLHttpRequest.responseXML</code>.</li>
- <li>Injecter le contenu dans le body d'un <a href="/en-US/docs/Web/API/DocumentFragment">fragment de document</a> via <code>fragment.body.innerHTML</code> et traverser le DOM du fragment.</li>
- <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/RegExp">RegExp </a>peut être utlisé si vous connaissez à l'avance le contenu du document HTML dans responseText. Vous pouvez supprimer les sauts de ligne, si vous utlisez RegExp en prenant en compte ces sauts. Toutefois, cette méthode est un "dernier recours", car si le code XML change légèrement, la méthode échouera probablement.</li>
-</ol>
+1.  Utiliser la propriété `XMLHttpRequest.responseXML`.
+2.  Injecter le contenu dans le body d'un [fragment de document](/en-US/docs/Web/API/DocumentFragment) via `fragment.body.innerHTML` et traverser le DOM du fragment.
+3.  [RegExp ](/en-US/docs/JavaScript/Reference/Global_Objects/RegExp)peut être utlisé si vous connaissez à l'avance le contenu du document HTML dans responseText. Vous pouvez supprimer les sauts de ligne, si vous utlisez RegExp en prenant en compte ces sauts. Toutefois, cette méthode est un "dernier recours", car si le code XML change légèrement, la méthode échouera probablement.
 
-<h2 id="Gérer_les_données_binaires">Gérer les données binaires</h2>
+## Gérer les données binaires
 
-<p>Bien que <code>XMLHttpRequest</code> est le plus souvent utilisé pour envoyer et recevoir des données textuelles, on peut l'utiliser pour envoyer et recevoir du contenu binaire.Il existe plusieurs méthodes éprouvées pour contraindre la réponse d'un XMLHttpRequest en l'envoi de données binaires. Celles-ci impliquent d'utiliser la méthode .overrideMimeType() sur l'objet XMLHttpRequest, ce qui est une solution viable.</p>
+Bien que `XMLHttpRequest` est le plus souvent utilisé pour envoyer et recevoir des données textuelles, on peut l'utiliser pour envoyer et recevoir du contenu binaire.Il existe plusieurs méthodes éprouvées pour contraindre la réponse d'un XMLHttpRequest en l'envoi de données binaires. Celles-ci impliquent d'utiliser la méthode .overrideMimeType() sur l'objet XMLHttpRequest, ce qui est une solution viable.
 
-<pre class="brush:js">var oReq = new XMLHttpRequest();
+```js
+var oReq = new XMLHttpRequest();
 oReq.open("GET", url, true);
 // récupérer les données non traitées comme une chaîne binaire
 oReq.overrideMimeType("text/plain; charset=x-user-defined");
 /* ... */
-</pre>
+```
 
-<p>La Spécification XMLHttpRequest Niveau 2 ajoute de nouveaux <a href="http://www.w3.org/TR/XMLHttpRequest2/#the-responsetype-attribute">attributs responseType</a> qui permettent d'envoyer et de recevoir des données binaires plus facilement.</p>
+La Spécification XMLHttpRequest Niveau 2 ajoute de nouveaux [attributs responseType](http://www.w3.org/TR/XMLHttpRequest2/#the-responsetype-attribute) qui permettent d'envoyer et de recevoir des données binaires plus facilement.
 
-<pre class="brush:js">var oReq = new XMLHttpRequest();
+```js
+var oReq = new XMLHttpRequest();
 
 oReq.open("GET", url, true);
 oReq.responseType = "arraybuffer";
@@ -86,17 +81,18 @@ oReq.onload = function(e) {
   /* ... */
 }
 oReq.send();
-</pre>
+```
 
-<p>Pour plus d'exemples, jettez un oeil à la page <a href="/en-US/docs/DOM/XMLHttpRequest/Sending_and_Receiving_Binary_Data">Envoyer et recevoir des données binaires</a></p>
+Pour plus d'exemples, jettez un oeil à la page [Envoyer et recevoir des données binaires](/en-US/docs/DOM/XMLHttpRequest/Sending_and_Receiving_Binary_Data)
 
-<h2 id="Surveiller_la_progression">Surveiller la progression</h2>
+## Surveiller la progression
 
-<p><code>XMLHttpRequest</code> fournit la possibilité d'écouter différents évènements qui peuvent se produire pendant que la requête est traitée. Cela inclu des notifications de progression périodiques, des notifications d'erreur, ainsi de suite.</p>
+`XMLHttpRequest` fournit la possibilité d'écouter différents évènements qui peuvent se produire pendant que la requête est traitée. Cela inclu des notifications de progression périodiques, des notifications d'erreur, ainsi de suite.
 
-<p>Le support des évènements de progression DOM de <code>XMLHttpRequest</code> suit l'API web <a href="http://dev.w3.org/2006/webapi/progress/Progress.html">de spécifications des évènements de progression</a>: ils implémentent l'interface {{domxref("ProgressEvent")}}.</p>
+Le support des évènements de progression DOM de `XMLHttpRequest` suit l'API web [de spécifications des évènements de progression](http://dev.w3.org/2006/webapi/progress/Progress.html): ils implémentent l'interface {{domxref("ProgressEvent")}}.
 
-<pre class="brush:js">var oReq = new XMLHttpRequest();
+```js
+var oReq = new XMLHttpRequest();
 
 oReq.addEventListener("progress", updateProgress, false);
 oReq.addEventListener("load", transferComplete, false);
@@ -127,19 +123,19 @@ function transferFailed(evt) {
 
 function transferCanceled(evt) {
   alert("Le transfert a été annulé par l'utilisateur.");
-}</pre>
+}
+```
 
-<p>Les lignes 3-6 ajoutent des écouteurs pour les différents évènements lancés pendant la transfert de données d'une <code>XMLHttpRequest</code>.</p>
+Les lignes 3-6 ajoutent des écouteurs pour les différents évènements lancés pendant la transfert de données d'une `XMLHttpRequest`.
 
-<div class="note">
-  <p><strong>Note :</strong> Vous devez ajouter les écouteurs avant d'appeler <code>open()</code> sur la requête. Sinon, les évènements de progression ne seront pas lancés.</p>
-</div>
+> **Note :** Vous devez ajouter les écouteurs avant d'appeler `open()` sur la requête. Sinon, les évènements de progression ne seront pas lancés.
 
-<p>Le gestionnaire de progression, spécifié par la fonction <code>updateProgress()</code> dans cet exemple, reçoit le nombre total de bytes à transférer ainsi que le nombre de bytes déjà transférés dans les champs <code>total</code> et <code>loaded</code>.  Cependant, si le champ <code>lengthComputable</code> est false, la taille totale est inconnue et sera zéro.</p>
+Le gestionnaire de progression, spécifié par la fonction `updateProgress()` dans cet exemple, reçoit le nombre total de bytes à transférer ainsi que le nombre de bytes déjà transférés dans les champs `total` et `loaded`.  Cependant, si le champ `lengthComputable` est false, la taille totale est inconnue et sera zéro.
 
-<p>Les évènements de progression sont disponibles pour l'envoi et la réception de données. Les évènements de téléchargement sont lancés sur l'objet <code>XMLHttpRequest</code> lui-même, comme montré dans l'exemple ci-dessus. Les évènements d'envoi (upload) sont lancés sur l'objet <code>XMLHttpRequest.upload</code>, comme montré ci-dessous:</p>
+Les évènements de progression sont disponibles pour l'envoi et la réception de données. Les évènements de téléchargement sont lancés sur l'objet `XMLHttpRequest` lui-même, comme montré dans l'exemple ci-dessus. Les évènements d'envoi (upload) sont lancés sur l'objet `XMLHttpRequest.upload`, comme montré ci-dessous:
 
-<pre class="brush:js">var oReq = new XMLHttpRequest();
+```js
+var oReq = new XMLHttpRequest();
 
 oReq.upload.addEventListener("progress", updateProgress, false);
 oReq.upload.addEventListener("load", transferComplete, false);
@@ -147,115 +143,98 @@ oReq.upload.addEventListener("error", transferFailed, false);
 oReq.upload.addEventListener("abort", transferCanceled, false);
 
 oReq.open();
-</pre>
+```
 
-<div class="note">
-  <p><strong>Note :</strong> Les évènements de progression ne sont pas disponibles sur le protocole <code>file:</code>.</p>
-</div>
+> **Note :** Les évènements de progression ne sont pas disponibles sur le protocole `file:`.
 
-<div class="note">
-  <p><strong>Note :</strong> Actuellement, il y a encore des bugs ouverts pour les évènements de progression qui affectent la version 25 de Firefox sur <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=908375">OS X</a> et <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=786953">Linux</a>.</p>
-</div>
+> **Note :** Actuellement, il y a encore des bugs ouverts pour les évènements de progression qui affectent la version 25 de Firefox sur [OS X](https://bugzilla.mozilla.org/show_bug.cgi?id=908375) et [Linux](https://bugzilla.mozilla.org/show_bug.cgi?id=786953).
 
-<div class="note">
-<p><strong>Note :</strong> A partir de {{Gecko("9.0")}}, les évènements de progression peuvent désormais être assurément présents pour chaque morceau de données reçu, y compris le dernier morceau dans les cas où le dernier paquet est reçu et la connexion fermée avant que l'évènement ne soit lancé. Dans ce cas, l'évènement de progression est automatiquement lancé quand l'évènement load se produit pour ce paquet. Cela vous permet de surveiller fiablement la progression grâce à son évènement.</p>
-</div>
+> **Note :** A partir de {{Gecko("9.0")}}, les évènements de progression peuvent désormais être assurément présents pour chaque morceau de données reçu, y compris le dernier morceau dans les cas où le dernier paquet est reçu et la connexion fermée avant que l'évènement ne soit lancé. Dans ce cas, l'évènement de progression est automatiquement lancé quand l'évènement load se produit pour ce paquet. Cela vous permet de surveiller fiablement la progression grâce à son évènement.
 
-<div class="note">
-<p><strong>Note :</strong> Dans {{Gecko("12.0")}}, si votre évènement de progression est appelé avec un <code>responseType</code> "moz-blob", la valeur de la réponse est un {{domxref("Blob")}} contenant les données reçues jusqu'à présent.</p>
-</div>
+> **Note :** Dans {{Gecko("12.0")}}, si votre évènement de progression est appelé avec un `responseType` "moz-blob", la valeur de la réponse est un {{domxref("Blob")}} contenant les données reçues jusqu'à présent.
 
-<p>Une fonction peut aussi être appelée peu importe le status de fin de la requête (<code>abort</code>, <code>load</code>, ou <code>error</code>) en utilisant l'évènement <code>loadend</code> :</p>
+Une fonction peut aussi être appelée peu importe le status de fin de la requête (`abort`, `load`, ou `error`) en utilisant l'évènement `loadend` :
 
-<pre class="brush:js">req.addEventListener("loadend", loadEnd, false);
+```js
+req.addEventListener("loadend", loadEnd, false);
 
 function loadEnd(e) {
   alert("Le transfert est terminé (même si l'on ne sait pas si ça a fonctionné ou pas).");
 }
-</pre>
+```
 
-<p>Notez qu'il n'y a pas moyen d'être certain des informations reçues dans l'évènement  <code>loadend</code> event comme la condition qui a causé la fin de l'opération; toutefois, vous pouvez utiliser cet évènement pour gérer les tâches qui doivent être exécutées dans tous les cas une fois un transfert terminé.</p>
+Notez qu'il n'y a pas moyen d'être certain des informations reçues dans l'évènement  `loadend` event comme la condition qui a causé la fin de l'opération; toutefois, vous pouvez utiliser cet évènement pour gérer les tâches qui doivent être exécutées dans tous les cas une fois un transfert terminé.
 
-<h2 id="Envoyer_des_formulaires_et_uploader_des_fichiers">Envoyer des formulaires et uploader des fichiers</h2>
+## Envoyer des formulaires et uploader des fichiers
 
-<p>Les instances de <code>XMLHttpRequest</code> peuvent être utilisées pour envoyer des formulaires de deux façons :</p>
+Les instances de `XMLHttpRequest` peuvent être utilisées pour envoyer des formulaires de deux façons :
 
-<ul>
- <li>n'utiliser rien de plus qu'AJAX</li>
- <li>utiliser l'API <a href="/en-US/docs/DOM/XMLHttpRequest/FormData"><code>FormData</code></a></li>
-</ul>
+- n'utiliser rien de plus qu'AJAX
+- utiliser l'API [`FormData`](/en-US/docs/DOM/XMLHttpRequest/FormData)
 
-<p>La <strong>seconde solution</strong> (utiliser l'API <a href="/en-US/docs/DOM/XMLHttpRequest/FormData"><code>FormData</code></a>) est la plus simple et la plus rapide, mais a le désavantage que les données collectées ne peuvent pas être <a href="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify">chainifiées</a>.<br>
- La <strong>première solution</strong> est plutôt la plus complexe, mais se prête à être plus flexible et puissante.</p>
+La **seconde solution** (utiliser l'API [`FormData`](/en-US/docs/DOM/XMLHttpRequest/FormData)) est la plus simple et la plus rapide, mais a le désavantage que les données collectées ne peuvent pas être [chainifiées](/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify).
+La **première solution** est plutôt la plus complexe, mais se prête à être plus flexible et puissante.
 
-<h3 id="Rien_de_plus_que_XMLHttpRequest">Rien de plus que <code>XMLHttpRequest</code></h3>
+### Rien de plus que `XMLHttpRequest`
 
-<p>Envoyer des formulaires sans l'API <a href="/en-US/docs/DOM/XMLHttpRequest/FormData"><code>FormData</code></a> ne demande rien de plus, si ce n'est l'API <a href="/en-US/docs/DOM/FileReader"><code >FileReader</code></a>, mais seulement <strong>si vous voulez envoyer un fichier ou plus</strong>.</p>
+Envoyer des formulaires sans l'API [`FormData`](/en-US/docs/DOM/XMLHttpRequest/FormData) ne demande rien de plus, si ce n'est l'API [`FileReader`](/en-US/docs/DOM/FileReader), mais seulement **si vous voulez envoyer un fichier ou plus**.
 
-<h4 id="Une_brève_introduction_au_méthodes_de_submission">Une brève introduction au méthodes de submission</h4>
+#### Une brève introduction au méthodes de submission
 
-<p>Un élément HTML {{ HTMLElement("form") }} peut être envoyé de quatre manières :</p>
+Un élément HTML {{ HTMLElement("form") }} peut être envoyé de quatre manières :
 
-<ul>
- <li>en utilisant la méthode <code>POST</code> et en configurant son attribut <code>enctype</code> sur <code>application/x-www-form-urlencoded</code> (par défaut);</li>
- <li>en utilisant la méthode <code>POST</code> et en configurant son attribut <code>enctype</code> sur <code>text/plain</code>;</li>
- <li>en utilisant la méthode <code>POST</code> et en configurant son attribut <code>enctype</code> sur <code>multipart/form-data</code>;</li>
- <li>en utilisant la méthode <code>GET</code> (dans ce cas, l'attribut <code>enctype</code> sera ignoré).</li>
-</ul>
+- en utilisant la méthode `POST` et en configurant son attribut `enctype` sur `application/x-www-form-urlencoded` (par défaut);
+- en utilisant la méthode `POST` et en configurant son attribut `enctype` sur `text/plain`;
+- en utilisant la méthode `POST` et en configurant son attribut `enctype` sur `multipart/form-data`;
+- en utilisant la méthode `GET` (dans ce cas, l'attribut `enctype` sera ignoré).
 
-<p>Maintenant, considérons qu'on envoie un formulaire contenant seulement deux champs, nommées <code >foo</code> et <code >baz</code>. Si vous utilisez la méthode <code >POST</code>, le serveur va recevoir une chaîne similaire à l'un des trois suivantes, en fonction de l'encodage que vous utilisez :</p>
+Maintenant, considérons qu'on envoie un formulaire contenant seulement deux champs, nommées `foo` et `baz`. Si vous utilisez la méthode `POST`, le serveur va recevoir une chaîne similaire à l'un des trois suivantes, en fonction de l'encodage que vous utilisez :
 
-<ul>
- <li>
-  <p>Méthode: <code>POST</code>; Encodage: <code>application/x-www-form-urlencoded</code> (par défaut):</p>
+- Méthode: `POST`; Encodage: `application/x-www-form-urlencoded` (par défaut):
 
-  <pre>Content-Type: application/x-www-form-urlencoded
+      Content-Type: application/x-www-form-urlencoded
 
-foo=bar&amp;baz=The+first+line.&amp;#37;0D%0AThe+second+line.%0D%0A</pre>
- </li>
- <li>
-  <p>Méthode: <code>POST</code>; Encodage: <code>text/plain</code>:</p>
+      foo=bar&baz=The+first+line.&#37;0D%0AThe+second+line.%0D%0A
 
-  <pre>Content-Type: text/plain
+- Méthode: `POST`; Encodage: `text/plain`:
 
-foo=bar
-baz=The first line.
-The second line.</pre>
- </li>
- <li>
-  <p>Méthode: <code>POST</code>; Encodage: <code>multipart/form-data</code>:</p>
+      Content-Type: text/plain
 
-  <pre>Content-Type: multipart/form-data; boundary=---------------------------314911788813839
+      foo=bar
+      baz=The first line.
+      The second line.
 
------------------------------314911788813839
-Content-Disposition: form-data; name="foo"
+- Méthode: `POST`; Encodage: `multipart/form-data`:
 
-bar
------------------------------314911788813839
-Content-Disposition: form-data; name="baz"
+      Content-Type: multipart/form-data; boundary=---------------------------314911788813839
 
-The first line.
-The second line.
+      -----------------------------314911788813839
+      Content-Disposition: form-data; name="foo"
 
------------------------------314911788813839--</pre>
- </li>
-</ul>
+      bar
+      -----------------------------314911788813839
+      Content-Disposition: form-data; name="baz"
 
-<p>Si vous utilisez la méthode <code>GET</code> à la place, une chaîne comme celle-ci sera simplement ajoutée à l'URL :</p>
+      The first line.
+      The second line.
 
-<pre>?foo=bar&amp;baz=The%20first%20line.%0AThe%20second%20line.</pre>
+      -----------------------------314911788813839--
 
-<h4 id="Un_petit_framework_vanilla">Un petit framework vanilla</h4>
+Si vous utilisez la méthode `GET` à la place, une chaîne comme celle-ci sera simplement ajoutée à l'URL :
 
-<p>Tout celà est fait automatiquement par le serveur quand vous envoyez un {{ HTMLElement("form") }}. Mais si vous voulez faire la même chose en utilisant JavaScript vous devez <em>tout</em> dire à l'interprète. Pour celà, la manière d'envoyer des formulaires en <em>pure</em> AJAX est trop compliquée pour être expliquée ici. Pour cette raison, nous avons posté un <strong>framework complet (mais tout de  même didactique)</strong>, qui est capable d'utiliser les quatres méthodes de <em>submit</em> , et aussi de <strong>transférer des fichiers</strong>:</p>
+    ?foo=bar&baz=The%20first%20line.%0AThe%20second%20line.
 
+#### Un petit framework vanilla
 
-<pre class="brush: html">&lt;!doctype html&gt;
-&lt;html&gt;
-&lt;head&gt;
-&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
-&lt;title&gt;Sending forms with pure AJAX &amp;ndash; MDN&lt;/title&gt;
-&lt;script type="text/javascript"&gt;
+Tout celà est fait automatiquement par le serveur quand vous envoyez un {{ HTMLElement("form") }}. Mais si vous voulez faire la même chose en utilisant JavaScript vous devez _tout_ dire à l'interprète. Pour celà, la manière d'envoyer des formulaires en *pure* AJAX est trop compliquée pour être expliquée ici. Pour cette raison, nous avons posté un **framework complet (mais tout de  même didactique)**, qui est capable d'utiliser les quatres méthodes de *submit* , et aussi de **transférer des fichiers**:
+
+```html
+<!doctype html>
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<title>Sending forms with pure AJAX &ndash; MDN</title>
+<script type="text/javascript">
 
 "use strict";
 
@@ -269,8 +248,8 @@ The second line.
 if (!XMLHttpRequest.prototype.sendAsBinary) {
   XMLHttpRequest.prototype.sendAsBinary = function(sData) {
     var nBytes = sData.length, ui8Data = new Uint8Array(nBytes);
-    for (var nIdx = 0; nIdx &lt; nBytes; nIdx++) {
-      ui8Data[nIdx] = sData.charCodeAt(nIdx) &amp; 0xff;
+    for (var nIdx = 0; nIdx < nBytes; nIdx++) {
+      ui8Data[nIdx] = sData.charCodeAt(nIdx) & 0xff;
     }
     /* send as ArrayBufferView...: */
     this.send(ui8Data);
@@ -308,7 +287,7 @@ var AJAXSubmit = (function () {
     oAjaxReq.onload = ajaxSuccess;
     if (oData.technique === 0) {
       /* method is GET */
-      oAjaxReq.open("get", oData.receiver.replace(/(?:\?.*)?$/, oData.segments.length &gt; 0 ? "?" + oData.segments.join("&amp;") : ""), true);
+      oAjaxReq.open("get", oData.receiver.replace(/(?:\?.*)?$/, oData.segments.length > 0 ? "?" + oData.segments.join("&") : ""), true);
       oAjaxReq.send(null);
     } else {
       /* method is POST */
@@ -321,13 +300,13 @@ var AJAXSubmit = (function () {
       } else {
         /* enctype is application/x-www-form-urlencoded or text/plain */
         oAjaxReq.setRequestHeader("Content-Type", oData.contentType);
-        oAjaxReq.send(oData.segments.join(oData.technique === 2 ? "\r\n" : "&amp;"));
+        oAjaxReq.send(oData.segments.join(oData.technique === 2 ? "\r\n" : "&"));
       }
     }
   }
 
   function processStatus (oData) {
-    if (oData.status &gt; 0) { return; }
+    if (oData.status > 0) { return; }
     /* the form is now totally serialized! do something before sending it to the server... */
     /* doSomething(oData); */
     /* console.log("AJAXSubmit - The form is now serialized. Submitting..."); */
@@ -342,27 +321,27 @@ var AJAXSubmit = (function () {
 
   function plainEscape (sText) {
     /* how should I treat a text/plain form encoding? what characters are not allowed? this is what I suppose...: */
-    /* "4\3\7 - Einstein said E=mc2" ----&gt; "4\\3\\7\ -\ Einstein\ said\ E\=mc2" */
-    return sText.replace(/[\s\=\\]/g, "\\$&amp;");
+    /* "4\3\7 - Einstein said E=mc2" ----> "4\\3\\7\ -\ Einstein\ said\ E\=mc2" */
+    return sText.replace(/[\s\=\\]/g, "\\$&");
   }
 
   function SubmitRequest (oTarget) {
     var nFile, sFieldType, oField, oSegmReq, oFile, bIsPost = oTarget.method.toLowerCase() === "post";
     /* console.log("AJAXSubmit - Serializing form..."); */
-    this.contentType = bIsPost &amp;&amp; oTarget.enctype ? oTarget.enctype : "application\/x-www-form-urlencoded";
+    this.contentType = bIsPost && oTarget.enctype ? oTarget.enctype : "application\/x-www-form-urlencoded";
     this.technique = bIsPost ? this.contentType === "multipart\/form-data" ? 3 : this.contentType === "text\/plain" ? 2 : 1 : 0;
     this.receiver = oTarget.action;
     this.status = 0;
     this.segments = [];
     var fFilter = this.technique === 2 ? plainEscape : escape;
-    for (var nItem = 0; nItem &lt; oTarget.elements.length; nItem++) {
+    for (var nItem = 0; nItem < oTarget.elements.length; nItem++) {
       oField = oTarget.elements[nItem];
       if (!oField.hasAttribute("name")) { continue; }
       sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT";
-      if (sFieldType === "FILE" &amp;&amp; oField.files.length &gt; 0) {
+      if (sFieldType === "FILE" && oField.files.length > 0) {
         if (this.technique === 3) {
           /* enctype is multipart/form-data */
-          for (nFile = 0; nFile &lt; oField.files.length; nFile++) {
+          for (nFile = 0; nFile < oField.files.length; nFile++) {
             oFile = oField.files[nFile];
             oSegmReq = new FileReader();
             /* (custom properties:) */
@@ -376,9 +355,9 @@ var AJAXSubmit = (function () {
           }
         } else {
           /* enctype is application/x-www-form-urlencoded or text/plain or method is GET: files will not be sent! */
-          for (nFile = 0; nFile &lt; oField.files.length; this.segments.push(fFilter(oField.name) + "=" + fFilter(oField.files[nFile++].name)));
+          for (nFile = 0; nFile < oField.files.length; this.segments.push(fFilter(oField.name) + "=" + fFilter(oField.files[nFile++].name)));
         }
-      } else if ((sFieldType !== "RADIO" &amp;&amp; sFieldType !== "CHECKBOX") || oField.checked) {
+      } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) {
         /* field type is not FILE or is FILE but is empty */
         this.segments.push(
           this.technique === 3 ? /* enctype is multipart/form-data */
@@ -398,104 +377,106 @@ var AJAXSubmit = (function () {
 
 })();
 
-&lt;/script&gt;
-&lt;/head&gt;
-&lt;body&gt;
-
-&lt;h1&gt;Sending forms with pure AJAX&lt;/h1&gt;
-
-&lt;h2&gt;Using the GET method&lt;/h2&gt;
-
-&lt;form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;"&gt;
-  &lt;fieldset&gt;
-    &lt;legend&gt;Registration example&lt;/legend&gt;
-    &lt;p&gt;
-      First name: &lt;input type="text" name="firstname" /&gt;&lt;br /&gt;
-      Last name: &lt;input type="text" name="lastname" /&gt;
-    &lt;/p&gt;
-    &lt;p&gt;
-      &lt;input type="submit" value="Submit" /&gt;
-    &lt;/p&gt;
-  &lt;/fieldset&gt;
-&lt;/form&gt;
-
-&lt;h2&gt;Using the POST method&lt;/h2&gt;
-&lt;h3&gt;Enctype: application/x-www-form-urlencoded (default)&lt;/h3&gt;
-
-&lt;form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;"&gt;
-  &lt;fieldset&gt;
-    &lt;legend&gt;Registration example&lt;/legend&gt;
-    &lt;p&gt;
-      First name: &lt;input type="text" name="firstname" /&gt;&lt;br /&gt;
-      Last name: &lt;input type="text" name="lastname" /&gt;
-    &lt;/p&gt;
-    &lt;p&gt;
-      &lt;input type="submit" value="Submit" /&gt;
-    &lt;/p&gt;
-  &lt;/fieldset&gt;
-&lt;/form&gt;
-
-&lt;h3&gt;Enctype: text/plain&lt;/h3&gt;
-
-&lt;form action="register.php" method="post" enctype="text/plain" onsubmit="AJAXSubmit(this); return false;"&gt;
-  &lt;fieldset&gt;
-    &lt;legend&gt;Registration example&lt;/legend&gt;
-    &lt;p&gt;
-      Your name: &lt;input type="text" name="user" /&gt;
-    &lt;/p&gt;
-    &lt;p&gt;
-      Your message:&lt;br /&gt;
-      &lt;textarea name="message" cols="40" rows="8"&gt;&lt;/textarea&gt;
-    &lt;/p&gt;
-    &lt;p&gt;
-      &lt;input type="submit" value="Submit" /&gt;
-    &lt;/p&gt;
-  &lt;/fieldset&gt;
-&lt;/form&gt;
-
-&lt;h3&gt;Enctype: multipart/form-data&lt;/h3&gt;
-
-&lt;form action="register.php" method="post" enctype="multipart/form-data" onsubmit="AJAXSubmit(this); return false;"&gt;
-  &lt;fieldset&gt;
-    &lt;legend&gt;Upload example&lt;/legend&gt;
-    &lt;p&gt;
-      First name: &lt;input type="text" name="firstname" /&gt;&lt;br /&gt;
-      Last name: &lt;input type="text" name="lastname" /&gt;&lt;br /&gt;
+</script>
+</head>
+<body>
+
+<h1>Sending forms with pure AJAX</h1>
+
+<h2>Using the GET method</h2>
+
+<form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Registration example</legend>
+    <p>
+      First name: <input type="text" name="firstname" /><br />
+      Last name: <input type="text" name="lastname" />
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+<h2>Using the POST method</h2>
+<h3>Enctype: application/x-www-form-urlencoded (default)</h3>
+
+<form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Registration example</legend>
+    <p>
+      First name: <input type="text" name="firstname" /><br />
+      Last name: <input type="text" name="lastname" />
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+<h3>Enctype: text/plain</h3>
+
+<form action="register.php" method="post" enctype="text/plain" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Registration example</legend>
+    <p>
+      Your name: <input type="text" name="user" />
+    </p>
+    <p>
+      Your message:<br />
+      <textarea name="message" cols="40" rows="8"></textarea>
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+<h3>Enctype: multipart/form-data</h3>
+
+<form action="register.php" method="post" enctype="multipart/form-data" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Upload example</legend>
+    <p>
+      First name: <input type="text" name="firstname" /><br />
+      Last name: <input type="text" name="lastname" /><br />
       Sex:
-      &lt;input id="sex_male" type="radio" name="sex" value="male" /&gt; &lt;label for="sex_male"&gt;Male&lt;/label&gt;
-      &lt;input id="sex_female" type="radio" name="sex" value="female" /&gt; &lt;label for="sex_female"&gt;Female&lt;/label&gt;&lt;br /&gt;
-      Password: &lt;input type="password" name="secret" /&gt;&lt;br /&gt;
+      <input id="sex_male" type="radio" name="sex" value="male" /> <label for="sex_male">Male</label>
+      <input id="sex_female" type="radio" name="sex" value="female" /> <label for="sex_female">Female</label><br />
+      Password: <input type="password" name="secret" /><br />
       What do you prefer:
-      &lt;select name="image_type"&gt;
-        &lt;option&gt;Books&lt;/option&gt;
-        &lt;option&gt;Cinema&lt;/option&gt;
-        &lt;option&gt;TV&lt;/option&gt;
-      &lt;/select&gt;
-    &lt;/p&gt;
-    &lt;p&gt;
+      <select name="image_type">
+        <option>Books</option>
+        <option>Cinema</option>
+        <option>TV</option>
+      </select>
+    </p>
+    <p>
       Post your photos:
-      &lt;input type="file" multiple name="photos[]"&gt;
-    &lt;/p&gt;
-    &lt;p&gt;
-      &lt;input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" /&gt; &lt;label for="vehicle_bike"&gt;I have a bike&lt;/label&gt;&lt;br /&gt;
-      &lt;input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" /&gt; &lt;label for="vehicle_car"&gt;I have a car&lt;/label&gt;
-    &lt;/p&gt;
-    &lt;p&gt;
-      Describe yourself:&lt;br /&gt;
-      &lt;textarea name="description" cols="50" rows="8"&gt;&lt;/textarea&gt;
-    &lt;/p&gt;
-    &lt;p&gt;
-      &lt;input type="submit" value="Submit" /&gt;
-    &lt;/p&gt;
-  &lt;/fieldset&gt;
-&lt;/form&gt;
-
-&lt;/body&gt;
-&lt;/html&gt;</pre>
-
-<p>Pour le tester, créez une page nommée <strong>register.php</strong> (qui est l'attribut <code>action</code> des formulaires d'exemple) et mettez y ce contenu <em>minimaliste</em>:</p>
-
-<pre class="brush: php">&lt;?php
+      <input type="file" multiple name="photos[]">
+    </p>
+    <p>
+      <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" /> <label for="vehicle_bike">I have a bike</label><br />
+      <input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" /> <label for="vehicle_car">I have a car</label>
+    </p>
+    <p>
+      Describe yourself:<br />
+      <textarea name="description" cols="50" rows="8"></textarea>
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+</body>
+</html>
+```
+
+Pour le tester, créez une page nommée **register.php** (qui est l'attribut `action` des formulaires d'exemple) et mettez y ce contenu *minimaliste*:
+
+```php
+<?php
 /* register.php */
 
 header("Content-type: text/plain");
@@ -517,35 +498,29 @@ if (isset($HTTP_RAW_POST_DATA)) { echo $HTTP_RAW_POST_DATA; }
 
 echo "\n\n:: Files received ::\n\n";
 print_r($_FILES);
+```
 
-</pre>
-
-<p>La syntaxe de ce script est la suivante:</p>
+La syntaxe de ce script est la suivante:
 
-<pre class="syntaxbox">AJAXSubmit(myForm);</pre>
+    AJAXSubmit(myForm);
 
-<div class="note">
-  <p><strong>Note :</strong> Ce framework utilise l'API <a href="/en-US/docs/DOM/FileReader"><code>FileReader</code></a> pour transmettre les fichiers uploadés. C'est une API récente qui n'est pas implémentée dans IE9 ou inférieur. Pour cette raison, l'upload via AJAX uniquement <strong>est une technique expérimentale</strong>. Si vous n'avez pas besoin de transférer des fichiers binaires, ce framework fonctionne bien dans la majorité des navigateurs.</p>
-</div>
+> **Note :** Ce framework utilise l'API [`FileReader`](/en-US/docs/DOM/FileReader) pour transmettre les fichiers uploadés. C'est une API récente qui n'est pas implémentée dans IE9 ou inférieur. Pour cette raison, l'upload via AJAX uniquement **est une technique expérimentale**. Si vous n'avez pas besoin de transférer des fichiers binaires, ce framework fonctionne bien dans la majorité des navigateurs.
 
-<div class="note">
-  <p><strong>Note :</strong> La meilleure façon d'envoyer du contenu binaire est de passer par <a href="/en-US/docs/JavaScript/Typed_arrays/ArrayBuffer">ArrayBuffers</a> ou <a href="/en-US/docs/DOM/Blob">Blobs</a> en conjonction avec la méthode <a href="/en-US/docs/DOM/XMLHttpRequest#send%28%29"><code>send()</code></a> et possiblement avec la méthode <a href="/en-US/docs/DOM/FileReader#readAsArrayBuffer()"><code>readAsArrayBuffer()</code></a> de l'API <a href="/en-US/docs/DOM/FileReader"><code>FileReader</code></a>. Mais dans la mesure où le but de ce script est de fonctionner avec des données <a href="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify">chaînifiable</a>, nous avons utilisé la méthode <a href="/en-US/docs/DOM/XMLHttpRequest#sendAsBinary%28%29"><code>sendAsBinary()</code></a> en conjonction avec la méthode <a href="/en-US/docs/DOM/FileReader#readAsBinaryString%28%29"><code>readAsBinaryString()</code></a> de l'API <a href="/en-US/docs/DOM/FileReader"><code>FileReader</code></a>. Du coup, le script ci-dessous n'a de sens que quand vous voulez transférer de petits fichiers. Si vous n'avez pas l'intention de transférer des données binaires, songez plutôt à utilisez l'API <a href="/en-US/docs/DOM/XMLHttpRequest/FormData"><code>FormData</code></a>.</p>
-</div>
+> **Note :** La meilleure façon d'envoyer du contenu binaire est de passer par [ArrayBuffers](/en-US/docs/JavaScript/Typed_arrays/ArrayBuffer) ou [Blobs](/en-US/docs/DOM/Blob) en conjonction avec la méthode [`send()`](/en-US/docs/DOM/XMLHttpRequest#send%28%29) et possiblement avec la méthode [`readAsArrayBuffer()`](</en-US/docs/DOM/FileReader#readAsArrayBuffer()>) de l'API [`FileReader`](/en-US/docs/DOM/FileReader). Mais dans la mesure où le but de ce script est de fonctionner avec des données [chaînifiable](/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify), nous avons utilisé la méthode [`sendAsBinary()`](/en-US/docs/DOM/XMLHttpRequest#sendAsBinary%28%29) en conjonction avec la méthode [`readAsBinaryString()`](/en-US/docs/DOM/FileReader#readAsBinaryString%28%29) de l'API [`FileReader`](/en-US/docs/DOM/FileReader). Du coup, le script ci-dessous n'a de sens que quand vous voulez transférer de petits fichiers. Si vous n'avez pas l'intention de transférer des données binaires, songez plutôt à utilisez l'API [`FormData`](/en-US/docs/DOM/XMLHttpRequest/FormData).
 
-<div class="note">
-  <p><strong>Note :</strong> La méthode non-strandard <code>sendAsBinary </code>est dépréciée à partir de Gecko 31 {{ geckoRelease(31) }} et sera prochainement supprimée. La méthode standard <code>send(Blob data)</code> peut être utilisée à la place.</p>
-</div>
+> **Note :** La méthode non-strandard `sendAsBinary `est dépréciée à partir de Gecko 31 {{ geckoRelease(31) }} et sera prochainement supprimée. La méthode standard `send(Blob data)` peut être utilisée à la place.
 
-<h3 id="Utiliser_les_objets_FormData">Utiliser les objets FormData</h3>
+### Utiliser les objets FormData
 
-<p>Le constructeur de <a href="/en-US/docs/DOM/XMLHttpRequest/FormData"><code>FormData</code></a> vous permet de compiler des paires de clé/valeur à envoyer via <code>XMLHttpRequest</code>. Il est principalement prévu pour être utilisé dans l'envoi de formulaires, mais il peut être utilisé indépendemment des formulaires dans le but de transmettre des données associées. Les données transmises sont de même format que la méthode <code>submit()</code> d'un formulaire utiliserait pour envoyer les données si l'encodage du formulaire était configuré à "multipart/form-data". Les objets FormData peuvent être utilisés de nombreuses manières avec XMLHttpRequest. Pour des exemples et des explications sur la manière d'utiliser FormData avec une XMLHttpRequest, jettez un oeil sur la page <a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects">Utiliser les Objets FormData</a>. Pour des raisons didactiques seulement, nous postons ici <strong>une</strong> <strong>traduction</strong> <strong><a href="#A_little_vanilla_framework">du précédent exemple</a> transformé pour utiliser l'API <code>FormData</code></strong>. Notez la brièveté du code :</p>
+Le constructeur de [`FormData`](/en-US/docs/DOM/XMLHttpRequest/FormData) vous permet de compiler des paires de clé/valeur à envoyer via `XMLHttpRequest`. Il est principalement prévu pour être utilisé dans l'envoi de formulaires, mais il peut être utilisé indépendemment des formulaires dans le but de transmettre des données associées. Les données transmises sont de même format que la méthode `submit()` d'un formulaire utiliserait pour envoyer les données si l'encodage du formulaire était configuré à "multipart/form-data". Les objets FormData peuvent être utilisés de nombreuses manières avec XMLHttpRequest. Pour des exemples et des explications sur la manière d'utiliser FormData avec une XMLHttpRequest, jettez un oeil sur la page [Utiliser les Objets FormData](/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects). Pour des raisons didactiques seulement, nous postons ici **une** **traduction** **[du précédent exemple](#A_little_vanilla_framework) transformé pour utiliser l'API `FormData`**. Notez la brièveté du code :
 
-<pre class="brush: html">&lt;!doctype html&gt;
-&lt;html&gt;
-&lt;head&gt;
-&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
-&lt;title&gt;Sending forms with FormData &amp;ndash; MDN&lt;/title&gt;
-&lt;script type="text/javascript"&gt;
+```html
+<!doctype html>
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<title>Sending forms with FormData &ndash; MDN</title>
+<script type="text/javascript">
 "use strict";
 
 function ajaxSuccess () {
@@ -561,129 +536,131 @@ function AJAXSubmit (oFormElement) {
     oReq.send(new FormData(oFormElement));
   } else {
     var oField, sFieldType, nFile, sSearch = "";
-    for (var nItem = 0; nItem &lt; oFormElement.elements.length; nItem++) {
+    for (var nItem = 0; nItem < oFormElement.elements.length; nItem++) {
       oField = oFormElement.elements[nItem];
       if (!oField.hasAttribute("name")) { continue; }
       sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT";
       if (sFieldType === "FILE") {
-        for (nFile = 0; nFile &lt; oField.files.length; sSearch += "&amp;" + escape(oField.name) + "=" + escape(oField.files[nFile++].name));
-      } else if ((sFieldType !== "RADIO" &amp;&amp; sFieldType !== "CHECKBOX") || oField.checked) {
-        sSearch += "&amp;" + escape(oField.name) + "=" + escape(oField.value);
+        for (nFile = 0; nFile < oField.files.length; sSearch += "&" + escape(oField.name) + "=" + escape(oField.files[nFile++].name));
+      } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) {
+        sSearch += "&" + escape(oField.name) + "=" + escape(oField.value);
       }
     }
-    oReq.open("get", oFormElement.action.replace(/(?:\?.*)?$/, sSearch.replace(/^&amp;/, "?")), true);
+    oReq.open("get", oFormElement.action.replace(/(?:\?.*)?$/, sSearch.replace(/^&/, "?")), true);
     oReq.send(null);
   }
 }
-&lt;/script&gt;
-&lt;/head&gt;
-&lt;body&gt;
-
-&lt;h1&gt;Sending forms with FormData&lt;/h1&gt;
-
-&lt;h2&gt;Using the GET method&lt;/h2&gt;
-
-&lt;form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;"&gt;
-  &lt;fieldset&gt;
-    &lt;legend&gt;Registration example&lt;/legend&gt;
-    &lt;p&gt;
-      First name: &lt;input type="text" name="firstname" /&gt;&lt;br /&gt;
-      Last name: &lt;input type="text" name="lastname" /&gt;
-    &lt;/p&gt;
-    &lt;p&gt;
-      &lt;input type="submit" value="Submit" /&gt;
-    &lt;/p&gt;
-  &lt;/fieldset&gt;
-&lt;/form&gt;
-
-&lt;h2&gt;Using the POST method&lt;/h2&gt;
-&lt;h3&gt;Enctype: application/x-www-form-urlencoded (default)&lt;/h3&gt;
-
-&lt;form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;"&gt;
-  &lt;fieldset&gt;
-    &lt;legend&gt;Registration example&lt;/legend&gt;
-    &lt;p&gt;
-      First name: &lt;input type="text" name="firstname" /&gt;&lt;br /&gt;
-      Last name: &lt;input type="text" name="lastname" /&gt;
-    &lt;/p&gt;
-    &lt;p&gt;
-      &lt;input type="submit" value="Submit" /&gt;
-    &lt;/p&gt;
-  &lt;/fieldset&gt;
-&lt;/form&gt;
-
-&lt;h3&gt;Enctype: text/plain&lt;/h3&gt;
-
-&lt;p&gt;The text/plain encoding is not supported by the FormData API.&lt;/p&gt;
-
-&lt;h3&gt;Enctype: multipart/form-data&lt;/h3&gt;
-
-&lt;form action="register.php" method="post" enctype="multipart/form-data" onsubmit="AJAXSubmit(this); return false;"&gt;
-  &lt;fieldset&gt;
-    &lt;legend&gt;Upload example&lt;/legend&gt;
-    &lt;p&gt;
-      First name: &lt;input type="text" name="firstname" /&gt;&lt;br /&gt;
-      Last name: &lt;input type="text" name="lastname" /&gt;&lt;br /&gt;
+</script>
+</head>
+<body>
+
+<h1>Sending forms with FormData</h1>
+
+<h2>Using the GET method</h2>
+
+<form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Registration example</legend>
+    <p>
+      First name: <input type="text" name="firstname" /><br />
+      Last name: <input type="text" name="lastname" />
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+<h2>Using the POST method</h2>
+<h3>Enctype: application/x-www-form-urlencoded (default)</h3>
+
+<form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Registration example</legend>
+    <p>
+      First name: <input type="text" name="firstname" /><br />
+      Last name: <input type="text" name="lastname" />
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+<h3>Enctype: text/plain</h3>
+
+<p>The text/plain encoding is not supported by the FormData API.</p>
+
+<h3>Enctype: multipart/form-data</h3>
+
+<form action="register.php" method="post" enctype="multipart/form-data" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Upload example</legend>
+    <p>
+      First name: <input type="text" name="firstname" /><br />
+      Last name: <input type="text" name="lastname" /><br />
       Sex:
-      &lt;input id="sex_male" type="radio" name="sex" value="male" /&gt; &lt;label for="sex_male"&gt;Male&lt;/label&gt;
-      &lt;input id="sex_female" type="radio" name="sex" value="female" /&gt; &lt;label for="sex_female"&gt;Female&lt;/label&gt;&lt;br /&gt;
-      Password: &lt;input type="password" name="secret" /&gt;&lt;br /&gt;
+      <input id="sex_male" type="radio" name="sex" value="male" /> <label for="sex_male">Male</label>
+      <input id="sex_female" type="radio" name="sex" value="female" /> <label for="sex_female">Female</label><br />
+      Password: <input type="password" name="secret" /><br />
       What do you prefer:
-      &lt;select name="image_type"&gt;
-        &lt;option&gt;Books&lt;/option&gt;
-        &lt;option&gt;Cinema&lt;/option&gt;
-        &lt;option&gt;TV&lt;/option&gt;
-      &lt;/select&gt;
-    &lt;/p&gt;
-    &lt;p&gt;
+      <select name="image_type">
+        <option>Books</option>
+        <option>Cinema</option>
+        <option>TV</option>
+      </select>
+    </p>
+    <p>
       Post your photos:
-      &lt;input type="file" multiple name="photos[]"&gt;
-    &lt;/p&gt;
-    &lt;p&gt;
-      &lt;input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" /&gt; &lt;label for="vehicle_bike"&gt;I have a bike&lt;/label&gt;&lt;br /&gt;
-      &lt;input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" /&gt; &lt;label for="vehicle_car"&gt;I have a car&lt;/label&gt;
-    &lt;/p&gt;
-    &lt;p&gt;
-      Describe yourself:&lt;br /&gt;
-      &lt;textarea name="description" cols="50" rows="8"&gt;&lt;/textarea&gt;
-    &lt;/p&gt;
-    &lt;p&gt;
-      &lt;input type="submit" value="Submit" /&gt;
-    &lt;/p&gt;
-  &lt;/fieldset&gt;
-&lt;/form&gt;
-
-&lt;/body&gt;
-&lt;/html&gt;</pre>
-
-<div class="note">
-  <p><strong>Note :</strong> Comme déjà dit, les objets<strong> {{domxref("FormData")}} ne sont pas des objets <a href="/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify">chainifiables</a></strong>. Si vous voulez chainifier les données soumises, utilisez <a href="#A_little_vanilla_framework">l'exemple précédent en <em>pure</em>-AJAX</a>. Notez également que, bien que dans cet exemple il y a quelques champs <code>file</code> {{ HTMLElement("input") }}, <strong>quand vous soumettez un formulaire via l'API <code>FormData</code> vous n'avez pas besoin d'utiliser l'API <a href="/en-US/docs/DOM/FileReader"><code>FileReader</code></a> également </strong>: les fichiers sont automatiquement chargés et transférés.</p>
-</div>
-
-<h2 id="Récupérer_la_date_de_modification">Récupérer la date de modification</h2>
-
-<pre class="brush: js">function getHeaderTime () {
+      <input type="file" multiple name="photos[]">
+    </p>
+    <p>
+      <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" /> <label for="vehicle_bike">I have a bike</label><br />
+      <input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" /> <label for="vehicle_car">I have a car</label>
+    </p>
+    <p>
+      Describe yourself:<br />
+      <textarea name="description" cols="50" rows="8"></textarea>
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+</body>
+</html>
+```
+
+> **Note :** Comme déjà dit, les objets **{{domxref("FormData")}} ne sont pas des objets [chainifiables](/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify)**. Si vous voulez chainifier les données soumises, utilisez [l'exemple précédent en *pure*-AJAX](#A_little_vanilla_framework). Notez également que, bien que dans cet exemple il y a quelques champs `file` {{ HTMLElement("input") }}, **quand vous soumettez un formulaire via l'API `FormData` vous n'avez pas besoin d'utiliser l'API [`FileReader`](/en-US/docs/DOM/FileReader) également** : les fichiers sont automatiquement chargés et transférés.
+
+## Récupérer la date de modification
+
+```js
+function getHeaderTime () {
   alert(this.getResponseHeader("Last-Modified"));  /* Une chaine valide GMTString ou null */
 }
 
 var oReq = new XMLHttpRequest();
 oReq.open("HEAD" /* utilisez HEAD seulement si vous ne voulez que les headers ! */, "mapage.html", true);
 oReq.onload = getHeaderTime;
-oReq.send();</pre>
+oReq.send();
+```
 
-<h3 id="Faire_quelque_chose_quand_la_date_de_dernière_modification_change">Faire quelque chose quand la date de dernière modification change</h3>
+### Faire quelque chose quand la date de dernière modification change
 
-<p>Créons deux fonctions:</p>
+Créons deux fonctions:
 
-<pre class="brush: js">function getHeaderTime () {
+```js
+function getHeaderTime () {
 
   var
     nLastVisit = parseFloat(window.localStorage.getItem('lm_' + this.filepath)),
     nLastModif = Date.parse(this.getResponseHeader("Last-Modified"));
 
-  if (isNaN(nLastVisit) || nLastModif &gt; nLastVisit) {
+  if (isNaN(nLastVisit) || nLastModif > nLastVisit) {
     window.localStorage.setItem('lm_' + this.filepath, Date.now());
-    isFinite(nLastVisit) &amp;&amp; this.callback(nLastModif, nLastVisit);
+    isFinite(nLastVisit) && this.callback(nLastModif, nLastVisit);
   }
 
 }
@@ -695,76 +672,81 @@ function ifHasChanged(sURL, fCallback) {
   oReq.filepath = sURL;
   oReq.onload = getHeaderTime;
   oReq.send();
-}</pre>
+}
+```
 
-<p>Test:</p>
+Test:
 
-<pre class="brush: js">/* Testons le fichier "mapage.html"... */
+```js
+/* Testons le fichier "mapage.html"... */
 
 ifHasChanged("mapage.html", function (nModif, nVisit) {
   alert("La page '" + this.filepath + "' a été changée le " + (new Date(nModif)).toLocaleString() + "!");
-});</pre>
+});
+```
 
-<p>Si vous voulez savoir <strong>si la <em>page courante</em> a changée</strong>, lisez l'article à propos de la propriété <a href="/en-US/docs/Web/API/document.lastModified"><code >document.lastModified</code></a>.</p>
+Si vous voulez savoir **si la _page courante_ a changée**, lisez l'article à propos de la propriété [`document.lastModified`](/en-US/docs/Web/API/document.lastModified).
 
-<h2 id="Cross-site_XMLHttpRequest">Cross-site XMLHttpRequest</h2>
+## Cross-site XMLHttpRequest
 
-<p>Les navigateurs récents supportent les requêtes cross-site en implémentant le Standard <a href="/en-US/docs/HTTP_access_control">Access Control for Cross-Site Requests</a> (Web Application Working Group).  Tant que le serveur est configuré pour autoriser les requêtes depuis l'origine de votre web application, <code>XMLHttpRequest</code> fonctionnera. Sinon, une exception <code>INVALID_ACCESS_ERR</code> sera lancée.</p>
+Les navigateurs récents supportent les requêtes cross-site en implémentant le Standard [Access Control for Cross-Site Requests](/en-US/docs/HTTP_access_control) (Web Application Working Group).  Tant que le serveur est configuré pour autoriser les requêtes depuis l'origine de votre web application, `XMLHttpRequest` fonctionnera. Sinon, une exception `INVALID_ACCESS_ERR` sera lancée.
 
-<h2 id="Contourner_le_cache">Contourner le cache</h2>
+## Contourner le cache
 
-<p>Une approche cross-browser pour contourner le cache est d'ajouter le timestamp à l'URL, en étant sûr d'inclure un "?" ou un "&amp;" selon les cas. Par exemple :</p>
+Une approche cross-browser pour contourner le cache est d'ajouter le timestamp à l'URL, en étant sûr d'inclure un "?" ou un "&" selon les cas. Par exemple :
 
-<pre>http://foo.com/bar.html -&gt; http://foo.com/bar.html?12345
-http://foo.com/bar.html?foobar=baz -&gt; http://foo.com/bar.html?foobar=baz&amp;12345
-</pre>
+    http://foo.com/bar.html -> http://foo.com/bar.html?12345
+    http://foo.com/bar.html?foobar=baz -> http://foo.com/bar.html?foobar=baz&12345
 
-<p>Comme le cache local est indexé selon les URL, celà permet à toutes les requêtes d'être uniques, et du coup de contourner le cache.</p>
+Comme le cache local est indexé selon les URL, celà permet à toutes les requêtes d'être uniques, et du coup de contourner le cache.
 
-<p>Vous pouvez automatiquement ajuster les URL en utilisant le code suivant :</p>
+Vous pouvez automatiquement ajuster les URL en utilisant le code suivant :
 
-<pre class="brush:js">var oReq = new XMLHttpRequest();
+```js
+var oReq = new XMLHttpRequest();
 
-oReq.open("GET", url + ((/\?/).test(url) ? "&amp;" : "?") + (new Date()).getTime(), true);
-oReq.send(null);</pre>
+oReq.open("GET", url + ((/\?/).test(url) ? "&" : "?") + (new Date()).getTime(), true);
+oReq.send(null);
+```
 
-<h2 id="Sécurité">Sécurité</h2>
+## Sécurité
 
-<p>{{fx_minversion_note(3, "Les versions de Firefox avant Firefox 3 autorisaient à mettre les préférences <code>capability.policy.&lt;policyname&gt;.XMLHttpRequest.open&lt;/policyname&gt;</code> à <code>allAccess</code> pour donner l'accès cross-sites à des sites spécifiques. Cela n'est plus possible.")}}</p>
+{{fx_minversion_note(3, "Les versions de Firefox avant Firefox 3 autorisaient à mettre les préférences <code>capability.policy.&lt;policyname&gt;.XMLHttpRequest.open&lt;/policyname&gt;</code> à <code>allAccess</code> pour donner l'accès cross-sites à des sites spécifiques. Cela n'est plus possible.")}}
 
-<p>{{fx_minversion_note(5, "Les versions de Firefox avant Firefox 5 pouvaient utiliser <code>netscape.security.PrivilegeManager.enablePrivilege(\"UniversalBrowserRead\");</code> pour demander un accès cross-site. Ce n'est plus supporté, me^me si cela ne produit aucun avertissement et que la demande de permission est toujours présente.")}}</p>
+{{fx_minversion_note(5, "Les versions de Firefox avant Firefox 5 pouvaient utiliser <code>netscape.security.PrivilegeManager.enablePrivilege(\"UniversalBrowserRead\");</code> pour demander un accès cross-site. Ce n'est plus supporté, me^me si cela ne produit aucun avertissement et que la demande de permission est toujours présente.")}}
 
-<p>La manière recommandée d'activer les requêtes cross-sites est d'utiliser le header HTTP <code>Access-Control-Allow-Origin </code> dans la réponse du XMLHttpRequest.</p>
+La manière recommandée d'activer les requêtes cross-sites est d'utiliser le header HTTP `Access-Control-Allow-Origin `dans la réponse du XMLHttpRequest.
 
-<h3 id="XMLHttpRequests_stoppées">XMLHttpRequests stoppées</h3>
+### XMLHttpRequests stoppées
 
-<p>Si vous vous retrouvez avec une XMLHttpRequest ayant <code >status=0</code> et <code >statusText=null</code>, cela signifie que la requête n'a pas été autorisée à être effectuée. Elle a été <code ><a href="http://www.w3.org/TR/XMLHttpRequest/#dom-xmlhttprequest-unsent">UNSENT</a></code>. Une cause probable est lorsque <a href="http://www.w3.org/TR/XMLHttpRequest/#xmlhttprequest-origin">l'origine <code >XMLHttpRequest</code> </a> (lors de la création de l'objet XMLHttpRequest) a changé quand l'objet XMLHttpRequest est déjà open(). Ce cas peut se produire par exemple lorsque l'on a une XMLHttpRequest qui est lancée sur un évènement onunload d'une fenêtre: l'objet XMLHttpRequest est en fait créé lorsque la fenêtre sur le point de se fermer est toujours là, et la demande est envoyée (c'est à dire open()) lorsque cette fenêtre a perdu son focus et une autre fenêtre a potentiellement pris le focus. La manière d'éviter ce problème est de fixer un écouteur sur l'évènement "activate" de la nouvelle fenêtre qui se lance quand l'ancienne fenêtre a son événement "unload" lancé.</p>
+Si vous vous retrouvez avec une XMLHttpRequest ayant `status=0` et `statusText=null`, cela signifie que la requête n'a pas été autorisée à être effectuée. Elle a été [`UNSENT`](http://www.w3.org/TR/XMLHttpRequest/#dom-xmlhttprequest-unsent). Une cause probable est lorsque [l'origine `XMLHttpRequest` ](http://www.w3.org/TR/XMLHttpRequest/#xmlhttprequest-origin) (lors de la création de l'objet XMLHttpRequest) a changé quand l'objet XMLHttpRequest est déjà open(). Ce cas peut se produire par exemple lorsque l'on a une XMLHttpRequest qui est lancée sur un évènement onunload d'une fenêtre: l'objet XMLHttpRequest est en fait créé lorsque la fenêtre sur le point de se fermer est toujours là, et la demande est envoyée (c'est à dire open()) lorsque cette fenêtre a perdu son focus et une autre fenêtre a potentiellement pris le focus. La manière d'éviter ce problème est de fixer un écouteur sur l'évènement "activate" de la nouvelle fenêtre qui se lance quand l'ancienne fenêtre a son événement "unload" lancé.
 
-<h2 id="Utiliser_XMLHttpRequest_depuis_un_module_JavaScript_un_composant_XPCOM">Utiliser XMLHttpRequest depuis un module JavaScript / un composant XPCOM</h2>
+## Utiliser XMLHttpRequest depuis un module JavaScript / un composant XPCOM
 
-<p>Instancier une <code>XMLHttpRequest</code> depuis un <a href="/en-US/docs/JavaScript_code_modules/Using">module JavaScript</a> ou un composant XPCOM fonctionne un peu différemment; on ne peut pas l'instancier via le constructeur <code>XMLHttpRequest()</code>. Le constructeur n'est pas défini dans le composant et le code retourne une erreur. Le meilleur moyen de fixer le problème est d'utiliser le constructeur du composant XPCOM.</p>
+Instancier une `XMLHttpRequest` depuis un [module JavaScript](/en-US/docs/JavaScript_code_modules/Using) ou un composant XPCOM fonctionne un peu différemment; on ne peut pas l'instancier via le constructeur `XMLHttpRequest()`. Le constructeur n'est pas défini dans le composant et le code retourne une erreur. Le meilleur moyen de fixer le problème est d'utiliser le constructeur du composant XPCOM.
 
-<pre class="brush: js">const XMLHttpRequest = Components.Constructor("@mozilla.org/xmlextras/xmlhttprequest;1", "nsIXMLHttpRequest");
-</pre>
+```js
+const XMLHttpRequest = Components.Constructor("@mozilla.org/xmlextras/xmlhttprequest;1", "nsIXMLHttpRequest");
+```
 
-<p>Malheureusement dans les versions de Gecko avant Gecko 16 il y a un bug : les requêtes créées ainsi peuvent être annulées sans raison. Si votre code doit marcher sur Gecko 15 ou moins, vous pouvez utiliser le constructeur XMLHttpRequest depuis le DOM caché de la fenêtre comme ceci :</p>
+Malheureusement dans les versions de Gecko avant Gecko 16 il y a un bug : les requêtes créées ainsi peuvent être annulées sans raison. Si votre code doit marcher sur Gecko 15 ou moins, vous pouvez utiliser le constructeur XMLHttpRequest depuis le DOM caché de la fenêtre comme ceci :
 
-<pre class="brush:js">const { XMLHttpRequest } = Components.classes["@mozilla.org/appshell/appShellService;1"]
+```js
+const { XMLHttpRequest } = Components.classes["@mozilla.org/appshell/appShellService;1"]
                                      .getService(Components.interfaces.nsIAppShellService)
                                      .hiddenDOMWindow;
-var oReq = new XMLHttpRequest();</pre>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ol>
- <li><a href="/en-US/docs/AJAX/Getting_Started">MDN AJAX introduction</a></li>
- <li><a href="/en-US/docs/HTTP_access_control">HTTP access control</a></li>
- <li><a href="/en-US/docs/How_to_check_the_security_state_of_an_XMLHTTPRequest_over_SSL">How to check the security state of an XMLHTTPRequest over SSL</a></li>
- <li><a href="http://www.peej.co.uk/articles/rich-user-experience.html">XMLHttpRequest - REST and the Rich User Experience</a></li>
- <li><a href="http://msdn.microsoft.com/library/default.asp?url=/library/en-us/xmlsdk/html/xmobjxmlhttprequest.asp">Microsoft documentation</a></li>
- <li><a href="http://developer.apple.com/internet/webcontent/xmlhttpreq.html">Apple developers' reference</a></li>
- <li><a href="http://jibbering.com/2002/4/httprequest.html">"Using the XMLHttpRequest Object" (jibbering.com)</a></li>
- <li><a href="http://www.w3.org/TR/XMLHttpRequest/">The XMLHttpRequest Object: W3C Specification</a></li>
- <li><a href="http://dev.w3.org/2006/webapi/progress/Progress.html">Web Progress Events specification</a></li>
- <li><a href="/fr/docs/Web/API/XMLHttpRequest">XMLHttpRequest (Référence Web API)</a></li>
-</ol>
+var oReq = new XMLHttpRequest();
+```
+
+## Voir aussi
+
+1.  [MDN AJAX introduction](/en-US/docs/AJAX/Getting_Started)
+2.  [HTTP access control](/en-US/docs/HTTP_access_control)
+3.  [How to check the security state of an XMLHTTPRequest over SSL](/en-US/docs/How_to_check_the_security_state_of_an_XMLHTTPRequest_over_SSL)
+4.  [XMLHttpRequest - REST and the Rich User Experience](http://www.peej.co.uk/articles/rich-user-experience.html)
+5.  [Microsoft documentation](http://msdn.microsoft.com/library/default.asp?url=/library/en-us/xmlsdk/html/xmobjxmlhttprequest.asp)
+6.  [Apple developers' reference](http://developer.apple.com/internet/webcontent/xmlhttpreq.html)
+7.  ["Using the XMLHttpRequest Object" (jibbering.com)](http://jibbering.com/2002/4/httprequest.html)
+8.  [The XMLHttpRequest Object: W3C Specification](http://www.w3.org/TR/XMLHttpRequest/)
+9.  [Web Progress Events specification](http://dev.w3.org/2006/webapi/progress/Progress.html)
+10. [XMLHttpRequest (Référence Web API)](/fr/docs/Web/API/XMLHttpRequest)
diff --git a/files/fr/web/api/xmlhttprequest/withcredentials/index.md b/files/fr/web/api/xmlhttprequest/withcredentials/index.md
index 62aa08feb7..5213b59e9d 100644
--- a/files/fr/web/api/xmlhttprequest/withcredentials/index.md
+++ b/files/fr/web/api/xmlhttprequest/withcredentials/index.md
@@ -9,46 +9,33 @@ tags:
   - XMLHttpRequest
 translation_of: Web/API/XMLHttpRequest/withCredentials
 ---
-<div>{{APIRef('XMLHttpRequest')}}</div>
+{{APIRef('XMLHttpRequest')}}
 
-<p>La propriété <code><strong>XMLHttpRequest.withCredentials</strong></code> est un booléen qui indique si une requête <code>Access-Control</code> entre plusieurs sites devrait être réalisée avec des informations d'authentification (<em>credentials</em>) telles que des cookies, des en-têtes d'autorisation ou des certificats clients. Activer <code>withCredentials</code> n'aura aucun impact sur les requêtes effectuées sur un même site.</p>
+La propriété **`XMLHttpRequest.withCredentials`** est un booléen qui indique si une requête `Access-Control` entre plusieurs sites devrait être réalisée avec des informations d'authentification (_credentials_) telles que des cookies, des en-têtes d'autorisation ou des certificats clients. Activer `withCredentials` n'aura aucun impact sur les requêtes effectuées sur un même site.
 
-<p>Cette propriété est également utilisée afin d'indiquer lorsque les cookies doivent être ignorés pour une réponse. Par défaut, la valeur est à <code>false</code>. Une requête <code>XMLHttpRequest</code> d'un autre domaine ne pourra pas définir de cookies pour cet autre domaine à moins que <code>withCredentials</code> vaille <code>true</code> avant la requête.</p>
+Cette propriété est également utilisée afin d'indiquer lorsque les cookies doivent être ignorés pour une réponse. Par défaut, la valeur est à `false`. Une requête `XMLHttpRequest` d'un autre domaine ne pourra pas définir de cookies pour cet autre domaine à moins que `withCredentials` vaille `true` avant la requête.
 
-<p>Les cookies tiers obtenus lorsque <code>withCredentials</code> vaut <code>true</code> continuent de respecter la règle de même origine et ne peuvent donc pas être manipulés en script via <code><a href="/fr/docs/Web/API/Document/cookie">document.cookie</a></code> ou depuis les en-têtes de la réponse.</p>
+Les cookies tiers obtenus lorsque `withCredentials` vaut `true` continuent de respecter la règle de même origine et ne peuvent donc pas être manipulés en script via [`document.cookie`](/fr/docs/Web/API/Document/cookie) ou depuis les en-têtes de la réponse.
 
-<div class="note">
-<p><strong>Note :</strong> Cette propriété n'a aucun impact pour les requêtes effectuées sur le même site.</p>
-</div>
+> **Note :** Cette propriété n'a aucun impact pour les requêtes effectuées sur le même site.
 
-<div class="note">
-<p><strong>Note :</strong> Les réponses<strong> </strong><code>XMLHttpRequest</code> provenant d'un domaine différent ne peuvent pas définir de cookies pour ce domaine à moins d'avoir <code>withCredentials</code> à <code>true</code> avant l'envoi de la requête (quelle que soit la valeur de l'en-tête <code>Access-Control-</code>).</p>
-</div>
+> **Note :** Les réponses\*\* \*\*`XMLHttpRequest` provenant d'un domaine différent ne peuvent pas définir de cookies pour ce domaine à moins d'avoir `withCredentials` à `true` avant l'envoi de la requête (quelle que soit la valeur de l'en-tête `Access-Control-`).
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: js">var xhr = new XMLHttpRequest();
+```js
+var xhr = new XMLHttpRequest();
 xhr.open('GET', 'http://example.com/', true);
 xhr.withCredentials = true;
-xhr.send(null);</pre>
-
-<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('XMLHttpRequest', '#the-withcredentials-attribute')}}</td>
-   <td>{{Spec2('XMLHttpRequest')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.XMLHttpRequest.withCredentials")}}</p>
+xhr.send(null);
+```
+
+## Spécifications
+
+| Spécification                                                                        | État                                 | Commentaires |
+| ------------------------------------------------------------------------------------ | ------------------------------------ | ------------ |
+| {{SpecName('XMLHttpRequest', '#the-withcredentials-attribute')}} | {{Spec2('XMLHttpRequest')}} |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.XMLHttpRequest.withCredentials")}}
diff --git a/files/fr/web/api/xmlhttprequest/xmlhttprequest/index.md b/files/fr/web/api/xmlhttprequest/xmlhttprequest/index.md
index 0e708d3463..d41ee31f3a 100644
--- a/files/fr/web/api/xmlhttprequest/xmlhttprequest/index.md
+++ b/files/fr/web/api/xmlhttprequest/xmlhttprequest/index.md
@@ -15,48 +15,42 @@ tags:
   - XMLHttpRequest
 translation_of: Web/API/XMLHttpRequest/XMLHttpRequest
 ---
-<div>{{draft}}{{APIRef('XMLHttpRequest')}}</div>
+{{draft}}{{APIRef('XMLHttpRequest')}}
 
-<p>Le constructeur <code><strong>XMLHttpRequest()</strong></code> crée une nouvelle instance {{domxref("XMLHttpRequest")}}.</p>
+Le constructeur **`XMLHttpRequest()`** crée une nouvelle instance {{domxref("XMLHttpRequest")}}.
 
-<p>Pour plus de détails sur l'utilisation de <code>XMLHttpRequest</code>, voir <a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a>.</p>
+Pour plus de détails sur l'utilisation de `XMLHttpRequest`, voir [Using XMLHttpRequest](/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest).
 
-<h2 id="Syntax">Syntax</h2>
+## Syntax
 
-<pre class="syntaxbox">const <var>request</var> = new XMLHttpRequest();
-</pre>
+    const request = new XMLHttpRequest();
 
-<h3 id="Paramètres">Paramètres</h3>
+### Paramètres
 
-<p>Aucun.</p>
+Aucun.
 
-<h3 id="Valeur_retournée">Valeur retournée</h3>
+### Valeur retournée
 
-<p>Un nouvel objet {{domxref("XMLHttpRequest")}}. L'objet doit être au minimum initialisé par l'appel de {{domxref("XMLHttpRequest.open", "open()")}} avant d'appeler {{domxref("XMLHttpRequest.send", "send()")}} pour envoyer la requête au serveur.</p>
+Un nouvel objet {{domxref("XMLHttpRequest")}}. L'objet doit être au minimum initialisé par l'appel de {{domxref("XMLHttpRequest.open", "open()")}} avant d'appeler {{domxref("XMLHttpRequest.send", "send()")}} pour envoyer la requête au serveur.
 
-<h2 id="La_syntaxe_de_Firefox_non-standard">La syntaxe de Firefox non-standard</h2>
+## La syntaxe de Firefox non-standard
 
-<p>Firefox 16 a ajouté un paramètre non standard au constructeur qui peut activer le mode anonyme (voir {{Bug("692677")}}). Mettre le drapeau <code>mozAnon</code> à <code>true</code> revient à être identique au constructeur <a href="http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#dom-anonxmlhttprequest"><code>AnonXMLHttpRequest()</code></a> décrit dans de vieilles versions des  specifications de XMLHttpRequest.</p>
+Firefox 16 a ajouté un paramètre non standard au constructeur qui peut activer le mode anonyme (voir {{Bug("692677")}}). Mettre le drapeau `mozAnon` à `true` revient à être identique au constructeur [`AnonXMLHttpRequest()`](http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#dom-anonxmlhttprequest) décrit dans de vieilles versions des  specifications de XMLHttpRequest.
 
-<pre class="syntaxbox">const <var>request</var> = new XMLHttpRequest(<var>paramsDictionary</var>);</pre>
+    const request = new XMLHttpRequest(paramsDictionary);
 
-<h3 id="Paramètres_non_standard">Paramètres (non standard)</h3>
+### Paramètres (non standard)
 
-<dl>
- <dt><code>objParameters</code> {{gecko_minversion_inline("16.0")}}</dt>
- <dd>Il y a deux drapeaux qui peuvent être activés
- <dl>
-  <dt><code>mozAnon</code></dt>
-  <dd>Booléen: Mettre ce drapeau à <code>true</code> évitera au navigateur d'exposer le {{Glossary("origin")}} and <a href="http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#user-credentials">credentials de l'utilisateur</a> lors de la récupération des ressources. Plus important, cela signifie que les {{Glossary("Cookie", "cookies")}} ne seront pas envoyés, sauf si ils sont clairement ajoutés en utilisant setRequestHeader.</dd>
-  <dt><code>mozSystem</code></dt>
-  <dd>Booléen: Mettre ce drapeau à <code>true</code> autorise les connections cross-site sans requérir le serveur à utiliser {{Glossary("CORS")}}. <em>Paramètre requis </em>:<em> <code>mozAnon: true</code>, i.e. cela ne peut pas être combiné avec l'envoi de cookies ou d'autres identifiants utilisateurs. Cela fonctionne seulement sur les applications autorisées ({{Bug("692677")}}); ne marche pas sur les pages chargées arbitraitement dans Firefox</em></dd>
- </dl>
- </dd>
-</dl>
+- `objParameters` {{gecko_minversion_inline("16.0")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+  - : Il y a deux drapeaux qui peuvent être activés
 
-<ul>
- <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Utiliser XMLHttpRequest</a></li>
- <li><a href="/en-US/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">HTML dans XMLHttpRequest</a></li>
-</ul>
+    - `mozAnon`
+      - : Booléen: Mettre ce drapeau à `true` évitera au navigateur d'exposer le {{Glossary("origin")}} and [credentials de l'utilisateur](http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#user-credentials) lors de la récupération des ressources. Plus important, cela signifie que les {{Glossary("Cookie", "cookies")}} ne seront pas envoyés, sauf si ils sont clairement ajoutés en utilisant setRequestHeader.
+    - `mozSystem`
+      - : Booléen: Mettre ce drapeau à `true` autorise les connections cross-site sans requérir le serveur à utiliser {{Glossary("CORS")}}. _Paramètre requis_ :_ `mozAnon: true`, i.e. cela ne peut pas être combiné avec l'envoi de cookies ou d'autres identifiants utilisateurs. Cela fonctionne seulement sur les applications autorisées ({{Bug("692677")}}); ne marche pas sur les pages chargées arbitraitement dans Firefox_
+
+## Voir aussi
+
+- [Utiliser XMLHttpRequest](/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest)
+- [HTML dans XMLHttpRequest](/en-US/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest)
diff --git a/files/fr/web/api/xmlhttprequesteventtarget/index.md b/files/fr/web/api/xmlhttprequesteventtarget/index.md
index dc5b1c1185..06497b98ca 100644
--- a/files/fr/web/api/xmlhttprequesteventtarget/index.md
+++ b/files/fr/web/api/xmlhttprequesteventtarget/index.md
@@ -11,55 +11,40 @@ tags:
   - XMLHttpRequest
 translation_of: Web/API/XMLHttpRequestEventTarget
 ---
-<p>{{APIRef("XMLHttpRequest")}}</p>
+{{APIRef("XMLHttpRequest")}}
 
-<p><code>XMLHttpRequestEventTarget</code> est l'interface qui décrit les gestionnaires d'événements que vous pouvez implémenter dans un objet qui gérera les événements pour un {{ domxref("XMLHttpRequest") }}.</p>
+`XMLHttpRequestEventTarget` est l'interface qui décrit les gestionnaires d'événements que vous pouvez implémenter dans un objet qui gérera les événements pour un {{ domxref("XMLHttpRequest") }}.
 
-<p>{{InheritanceDiagram}}</p>
+{{InheritanceDiagram}}
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<dl>
- <dt>{{ domxref("XMLHttpRequestEventTarget.onabort") }}</dt>
- <dd>Contient la fonction à appeler lorsqu'une demande est abandonnée et que l'événement {{event('abort')}} est reçu par cet objet.</dd>
- <dt>{{ domxref("XMLHttpRequestEventTarget.onerror") }}</dt>
- <dd>Contient la fonction à appeler lorsqu'une demande rencontre une erreur et que l'événement {{event('error')}} est reçu par cet objet.</dd>
- <dt>{{ domxref("XMLHttpRequestEventTarget.onload") }}</dt>
- <dd>Contient la fonction à appeler lorsqu'une requête HTTP revient après avoir récupéré le contenu avec succès et que l'événement {{event('load')}} est reçu par cet objet.</dd>
- <dt>{{ domxref("XMLHttpRequestEventTarget.onloadstart") }}</dt>
- <dd>Contient la fonction qui est appelée lorsque la requête HTTP commence à charger des données et que l'événement {{event('loadstart')}} est reçu par cet objet.</dd>
- <dt>{{ domxref("XMLHttpRequestEventTarget.onprogress") }}</dt>
- <dd>Contient la fonction qui est appelée périodiquement avec des informations sur l'avancement de la demande et l'événement {{event('progress')}} est reçu par cet objet.</dd>
- <dt>{{ domxref("XMLHttpRequestEventTarget.ontimeout") }}</dt>
- <dd>Contient la fonction qui est appelée si l'événement expire et que l'événement {{event("timeout")}} est reçu par cet objet ; cela ne se produit que si un délai d'attente a été préalablement établi en définissant la valeur de l'attribut timeout de l'objet XMLHttpRequest.</dd>
- <dt>{{ domxref("XMLHttpRequestEventTarget.onloadend") }}</dt>
- <dd>Contient la fonction qui est appelée lorsque le chargement est terminé, même si la demande a échoué, et que l'événement {{event('loadend')}} est reçu par cet objet.</dd>
-</dl>
+- {{ domxref("XMLHttpRequestEventTarget.onabort") }}
+  - : Contient la fonction à appeler lorsqu'une demande est abandonnée et que l'événement {{event('abort')}} est reçu par cet objet.
+- {{ domxref("XMLHttpRequestEventTarget.onerror") }}
+  - : Contient la fonction à appeler lorsqu'une demande rencontre une erreur et que l'événement {{event('error')}} est reçu par cet objet.
+- {{ domxref("XMLHttpRequestEventTarget.onload") }}
+  - : Contient la fonction à appeler lorsqu'une requête HTTP revient après avoir récupéré le contenu avec succès et que l'événement {{event('load')}} est reçu par cet objet.
+- {{ domxref("XMLHttpRequestEventTarget.onloadstart") }}
+  - : Contient la fonction qui est appelée lorsque la requête HTTP commence à charger des données et que l'événement {{event('loadstart')}} est reçu par cet objet.
+- {{ domxref("XMLHttpRequestEventTarget.onprogress") }}
+  - : Contient la fonction qui est appelée périodiquement avec des informations sur l'avancement de la demande et l'événement {{event('progress')}} est reçu par cet objet.
+- {{ domxref("XMLHttpRequestEventTarget.ontimeout") }}
+  - : Contient la fonction qui est appelée si l'événement expire et que l'événement {{event("timeout")}} est reçu par cet objet ; cela ne se produit que si un délai d'attente a été préalablement établi en définissant la valeur de l'attribut timeout de l'objet XMLHttpRequest.
+- {{ domxref("XMLHttpRequestEventTarget.onloadend") }}
+  - : Contient la fonction qui est appelée lorsque le chargement est terminé, même si la demande a échoué, et que l'événement {{event('loadend')}} est reçu par cet objet.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('XMLHttpRequest')}}</td>
-   <td>{{Spec2('XMLHttpRequest')}}</td>
-   <td>WHATWG living standard</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                            | Statut                               | Commentaire            |
+| ---------------------------------------- | ------------------------------------ | ---------------------- |
+| {{SpecName('XMLHttpRequest')}} | {{Spec2('XMLHttpRequest')}} | WHATWG living standard |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("api.XMLHttpRequestEventTarget")}}</p>
+{{Compat("api.XMLHttpRequestEventTarget")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{ domxref("XMLHttpRequest") }}</li>
- <li><a href="/en/DOM/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a></li>
-</ul>
+- {{ domxref("XMLHttpRequest") }}
+- [Using XMLHttpRequest](/en/DOM/XMLHttpRequest/Using_XMLHttpRequest)
diff --git a/files/fr/web/api/xmlhttprequesteventtarget/onload/index.md b/files/fr/web/api/xmlhttprequesteventtarget/onload/index.md
index 8a6afa0393..b3242e022c 100644
--- a/files/fr/web/api/xmlhttprequesteventtarget/onload/index.md
+++ b/files/fr/web/api/xmlhttprequesteventtarget/onload/index.md
@@ -3,54 +3,38 @@ title: XMLHttpRequestEventTarget.onload
 slug: Web/API/XMLHttpRequestEventTarget/onload
 translation_of: Web/API/XMLHttpRequestEventTarget/onload
 ---
-<p> </p>
+{{APIRef("XMLHttpRequest")}}
 
-<div>{{APIRef("XMLHttpRequest")}}</div>
+The **`XMLHttpRequestEventTarget.onload`** is the function called when an {{domxref("XMLHttpRequest")}} transaction completes successfully.
 
-<p>The <strong><code>XMLHttpRequestEventTarget.onload</code></strong> is the function called when an {{domxref("XMLHttpRequest")}} transaction completes successfully.</p>
+## Syntax
 
-<h2 id="Syntax">Syntax</h2>
+    XMLHttpRequest.onload = callback;
 
-<pre class="syntaxbox"><em>XMLHttpRequest</em>.onload = <em>callback</em>;</pre>
+### Values
 
-<h3 id="Values">Values</h3>
+- `callback` is the function to be executed when the request completes successfully. It receives a {{domxref("ProgressEvent")}} object as its first argument. The value of *this* (i.e. the context) is the same {{domxref("XMLHttpRequest")}} this callback is related to.
 
-<ul>
- <li><code><em>callback</em></code> is the function to be executed when the request completes successfully. It receives a {{domxref("ProgressEvent")}} object as its first argument. The value of <em>this</em> (i.e. the context) is the same {{domxref("XMLHttpRequest")}} this callback is related to.</li>
-</ul>
+## Example
 
-<h2 id="Example">Example</h2>
-
-<pre class="brush: js">var xmlhttp = new XMLHttpRequest(),
+```js
+var xmlhttp = new XMLHttpRequest(),
   method = 'GET',
   url = 'https://developer.mozilla.org/';
 
-xmlhttp.open(<em>method</em>, <em>url</em>, true);
+xmlhttp.open(method, url, true);
 xmlhttp.onload = function () {
   // Do something with the retrieved data ( found in xmlhttp.response )
 };
 xmlhttp.send();
-</pre>
-
-<h2 id="Specifications">Specifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('XMLHttpRequest', '#handler-xhr-onload')}}</td>
-   <td>{{Spec2('XMLHttpRequest')}}</td>
-   <td>WHATWG living standard</td>
-  </tr>
- </tbody>
-</table>
+```
 
-<h2 id="Browser_compatibility">Browser compatibility</h2>
+## Specifications
 
+| Specification                                                            | Status                               | Comment                |
+| ------------------------------------------------------------------------ | ------------------------------------ | ---------------------- |
+| {{SpecName('XMLHttpRequest', '#handler-xhr-onload')}} | {{Spec2('XMLHttpRequest')}} | WHATWG living standard |
 
+## Browser compatibility
 
-<p>{{Compat("api.XMLHttpRequestEventTarget.onload")}}</p>
+{{Compat("api.XMLHttpRequestEventTarget.onload")}}
diff --git a/files/fr/web/api/xmlserializer/index.md b/files/fr/web/api/xmlserializer/index.md
index 00a7edf328..0823351087 100644
--- a/files/fr/web/api/xmlserializer/index.md
+++ b/files/fr/web/api/xmlserializer/index.md
@@ -6,52 +6,47 @@ tags:
 translation_of: Web/API/XMLSerializer
 original_slug: XMLSerializer
 ---
+`XMLSerializer` sert à convertir des sous-arborescence DOM ou des documents DOM en texte. `XMLSerializer` est accessible aux scripts sans privilèges.
 
-<p><code>XMLSerializer</code> sert à convertir des sous-arborescence DOM ou des documents DOM en texte. <code>XMLSerializer</code> est accessible aux scripts sans privilèges.</p>
-
-<div class="note">
-  <p><strong>Note :</strong> <code>XMLSerializer</code> sert le plus souvent aux applications et extensions basées sur la plateforme Mozilla. Bien qu'il soit utilisable par les pages Web, il ne fait partie d'aucun standard et son niveau de support dans les autres navigateurs est inconnu.</p>
-</div>
-
-<h3 id="M.C3.A9thodes">Méthodes</h3>
-<dl>
-  <dt>
-    serializeToString</dt>
-  <dd>
-    Retourne la sous-arborescence sérialisée sous la forme d'une chaîne de caractères</dd>
-  <dt>
-    serializeToStream</dt>
-  <dd>
-    La sous-arborescence débutant par l'élément spécifié est sérialisée en un flux d'octets en utilisant l'encodage de caractères indiqué.</dd>
-</dl>
-<h3 id="Exemple">Exemple</h3>
-<pre class="eval"> var s = new XMLSerializer();
- var d = document;
- var str = s.serializeToString(d);
- alert(str);
-</pre>
-<pre class="eval"> var s = new XMLSerializer();
- var stream = {
-   close : function()
-   {
-     alert("Flux fermé");
-   },
-   flush : function()
-   {
-   },
-   write : function(string, count)
-   {
-     alert("'" + string + "'\n nb d'octets : " + count + "");
-   }
- };
- s.serializeToStream(document, stream, "UTF-8");
-</pre>
-<h3 id="Voir_.C3.A9galement">Voir également</h3>
-<ul>
-  <li><a href="http://www.xulplanet.com/references/objref/XMLSerializer.html">Reference (en)</a> (XULPlanet)</li>
-  <li><a href="fr/Parsing_and_serializing_XML">Parsing and serializing XML</a></li>
-  <li><a href="http://xulplanet.com/tutorials/mozsdk/xmlparse.php">Parsing and serializing XML (en)</a> (XULPlanet)</li>
-  <li><a href="http://kb.mozillazine.org/Parsing_and_serializing_XML#Parsing_strings_into_DOM_trees">Parsing and serializing XML (en)</a> (MozillaZine)</li>
-  <li><a href="fr/XMLHttpRequest">XMLHttpRequest</a></li>
-  <li><a href="fr/DOMParser">DOMParser</a></li>
-</ul>
+> **Note :** `XMLSerializer` sert le plus souvent aux applications et extensions basées sur la plateforme Mozilla. Bien qu'il soit utilisable par les pages Web, il ne fait partie d'aucun standard et son niveau de support dans les autres navigateurs est inconnu.
+
+### Méthodes
+
+- serializeToString
+  - : Retourne la sous-arborescence sérialisée sous la forme d'une chaîne de caractères
+- serializeToStream
+  - : La sous-arborescence débutant par l'élément spécifié est sérialisée en un flux d'octets en utilisant l'encodage de caractères indiqué.
+
+### Exemple
+
+     var s = new XMLSerializer();
+     var d = document;
+     var str = s.serializeToString(d);
+     alert(str);
+
+<!---->
+
+     var s = new XMLSerializer();
+     var stream = {
+       close : function()
+       {
+         alert("Flux fermé");
+       },
+       flush : function()
+       {
+       },
+       write : function(string, count)
+       {
+         alert("'" + string + "'\n nb d'octets : " + count + "");
+       }
+     };
+     s.serializeToStream(document, stream, "UTF-8");
+
+### Voir également
+
+- [Reference (en)](http://www.xulplanet.com/references/objref/XMLSerializer.html) (XULPlanet)
+- [Parsing and serializing XML](fr/Parsing_and_serializing_XML)
+- [Parsing and serializing XML (en)](http://xulplanet.com/tutorials/mozsdk/xmlparse.php) (XULPlanet)
+- [Parsing and serializing XML (en)](http://kb.mozillazine.org/Parsing_and_serializing_XML#Parsing_strings_into_DOM_trees) (MozillaZine)
+- [XMLHttpRequest](fr/XMLHttpRequest)
+- [DOMParser](fr/DOMParser)
diff --git a/files/fr/web/api/xpathexpression/index.md b/files/fr/web/api/xpathexpression/index.md
index 7a6d6ce42d..98e24d9c01 100644
--- a/files/fr/web/api/xpathexpression/index.md
+++ b/files/fr/web/api/xpathexpression/index.md
@@ -8,13 +8,11 @@ tags:
   - XPath
 translation_of: Web/API/XPathExpression
 ---
-<p>{{APIRef}}</p>
+{{APIRef}}
 
-<p>Une <code>XPathExpression</code> est une requête de XPath compilé renvoyée par {{domxref("document.createExpression()")}}. Elle a une méthode <code>evaluate()</code> qui peut être utilisée pour exécuter le XPath compilé.</p>
+Une `XPathExpression` est une requête de XPath compilé renvoyée par {{domxref("document.createExpression()")}}. Elle a une méthode `evaluate()` qui peut être utilisée pour exécuter le XPath compilé.
 
-<h2 id="Methods">Méthodes</h2>
+## Méthodes
 
-<ul>
- <li>evaluate (<code>contextNode</code>, <code>type</code>, <code>result</code>) - fournit un noeud / document contextuel, une constante {{domxref("XPathResult")}} et <code>XPathResult</code> pour stocker la requête ou null pour renvoyer un nouveau XPathResult.</li>
- <li>evaluateWithContext (<code>contextNode</code>, <code>contextPosition</code>, <code>contextSize</code>, <code>type</code>, <code>result</code>) - fournit un noeud / document, une position et une taille contextuels, une constante <code>XPathResult</code> et un <code>XPathResult</code> pour stocker la requête ou null pour renvoyer un nouveau XPathResult.</li>
-</ul>
+- evaluate (`contextNode`, `type`, `result`) - fournit un noeud / document contextuel, une constante {{domxref("XPathResult")}} et `XPathResult` pour stocker la requête ou null pour renvoyer un nouveau XPathResult.
+- evaluateWithContext (`contextNode`, `contextPosition`, `contextSize`, `type`, `result`) - fournit un noeud / document, une position et une taille contextuels, une constante `XPathResult` et un `XPathResult` pour stocker la requête ou null pour renvoyer un nouveau XPathResult.
diff --git a/files/fr/web/api/xsltprocessor/basic_example/index.md b/files/fr/web/api/xsltprocessor/basic_example/index.md
index fb6884c046..f7de3132b2 100644
--- a/files/fr/web/api/xsltprocessor/basic_example/index.md
+++ b/files/fr/web/api/xsltprocessor/basic_example/index.md
@@ -4,63 +4,58 @@ slug: Web/API/XSLTProcessor/Basic_Example
 translation_of: Web/API/XSLTProcessor/Basic_Example
 original_slug: XSLT_dans_Gecko/Exemple_basique
 ---
-<p></p><ol>
-<li><a href="/fr/docs/XSLT_dans_Gecko">Introduction</a></li>
-<li><a href="/fr/docs/XSLT_dans_Gecko/Exemple_basique">Exemple basique</a></li>
-<li><a href="/fr/docs/XSLT_dans_Gecko/G%c3%a9n%c3%a9ration_de_HTML">Génération de HTML</a></li>
-<li><a href="/fr/docs/XSLT_dans_Gecko/Diff%c3%a9rences_entre_les_navigateurs">Différences entre les navigateurs</a></li>
-<li><a href="/fr/docs/XSLT_dans_Gecko/Ressources">Ressources</a></li>
-</ol><p></p>
+1.  [Introduction](/fr/docs/XSLT_dans_Gecko)
+2.  [Exemple basique](/fr/docs/XSLT_dans_Gecko/Exemple_basique)
+3.  [Génération de HTML](/fr/docs/XSLT_dans_Gecko/G%c3%a9n%c3%a9ration_de_HTML)
+4.  [Différences entre les navigateurs](/fr/docs/XSLT_dans_Gecko/Diff%c3%a9rences_entre_les_navigateurs)
+5.  [Ressources](/fr/docs/XSLT_dans_Gecko/Ressources)
 
-<h2 id="Exemple_basique">Exemple basique</h2>
+## Exemple basique
 
-<p>Ce premier exemple présente les bases de l'utilisation d'une transformation XSLT dans un navigateur. L'exemple utilise un document XML qui contient des informations (titre, liste d'auteurs et corps de texte) à propos d'un article pour en tirer une version lisible par un humain.</p>
+Ce premier exemple présente les bases de l'utilisation d'une transformation XSLT dans un navigateur. L'exemple utilise un document XML qui contient des informations (titre, liste d'auteurs et corps de texte) à propos d'un article pour en tirer une version lisible par un humain.
 
-<p>La figure 1 montre le code source de l'exemple XSLT. Le document XML (exemple.xml) contient les informations à propos de l'article. En utilisant l'instruction de traitement <code>?xml-stylesheet?</code>, il est lié à la feuille de style XSLT (exemple.xsl) via son attribut <code>href</code>.</p>
+La figure 1 montre le code source de l'exemple XSLT. Le document XML (exemple.xml) contient les informations à propos de l'article. En utilisant l'instruction de traitement `?xml-stylesheet?`, il est lié à la feuille de style XSLT (exemple.xsl) via son attribut `href`.
 
-<p>Une feuille de style XSLT débute par l'élément <code>xsl:stylesheet</code>, qui contient tous les modèles utilisés pour créer le résultat final. L'exemple de la figure 1 possède deux modèles - un qui s'applique au nœud racine et un aux nœuds <code>Author</code>. Le modèle correspondant au nœud racine produit en sortie le titre de l'article puis déclenche le traitement de tous les autres modèles (via <code>apply-templates</code>) correspondant aux nœuds <code>Author</code> qui sont les descendants du nœud <code>Authors</code>.</p>
+Une feuille de style XSLT débute par l'élément `xsl:stylesheet`, qui contient tous les modèles utilisés pour créer le résultat final. L'exemple de la figure 1 possède deux modèles - un qui s'applique au nœud racine et un aux nœuds `Author`. Le modèle correspondant au nœud racine produit en sortie le titre de l'article puis déclenche le traitement de tous les autres modèles (via `apply-templates`) correspondant aux nœuds `Author` qui sont les descendants du nœud `Authors`.
 
-<p>Figure 1 : exemple XSLT simple</p>
+Figure 1 : exemple XSLT simple
 
-<p>Document XML (exemple.xml) :</p>
+Document XML (exemple.xml) :
 
-<pre>  &lt;?xml version="1.0"?&gt;
-  &lt;?xml-stylesheet type="text/xsl" href="exemple.xsl"?&gt;
-  &lt;Article&gt;
-    &lt;Title&gt;Mon article&lt;/Title&gt;
-    &lt;Authors&gt;
-      &lt;Author&gt;M. Foo&lt;/Author&gt;
-      &lt;Author&gt;M. Bar&lt;/Author&gt;
-    &lt;/Authors&gt;
-    &lt;Body&gt;Ceci est le texte de mon article.&lt;/Body&gt;
-  &lt;/Article&gt;
-</pre>
+      <?xml version="1.0"?>
+      <?xml-stylesheet type="text/xsl" href="exemple.xsl"?>
+      <Article>
+        <Title>Mon article</Title>
+        <Authors>
+          <Author>M. Foo</Author>
+          <Author>M. Bar</Author>
+        </Authors>
+        <Body>Ceci est le texte de mon article.</Body>
+      </Article>
 
-<p>Feuille de style XSL (exemple.xsl) :</p>
+Feuille de style XSL (exemple.xsl) :
 
-<pre>  &lt;?xml version="1.0"?&gt;
-  &lt;xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"&gt;
+      <?xml version="1.0"?>
+      <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 
-    &lt;xsl:output method="text"/&gt;
+        <xsl:output method="text"/>
 
-    &lt;xsl:template match="/"&gt;
-      Article - &lt;xsl:value-of select="/Article/Title"/&gt;
-      Auteurs : &lt;xsl:apply-templates select="/Article/Authors/Author"/&gt;
-    &lt;/xsl:template&gt;
+        <xsl:template match="/">
+          Article - <xsl:value-of select="/Article/Title"/>
+          Auteurs : <xsl:apply-templates select="/Article/Authors/Author"/>
+        </xsl:template>
 
-    &lt;xsl:template match="Author"&gt;
-      - &lt;xsl:value-of select="." /&gt;
-    &lt;/xsl:template&gt;
+        <xsl:template match="Author">
+          - <xsl:value-of select="." />
+        </xsl:template>
 
-  &lt;/xsl:stylesheet&gt;
-</pre>
+      </xsl:stylesheet>
 
-<p>Sortie dans le navigateur :</p>
+Sortie dans le navigateur :
 
-<pre>  Article - Mon article
-  Auteurs :
-  - M. Foo
-  - M. Bar
-</pre>
+      Article - Mon article
+      Auteurs :
+      - M. Foo
+      - M. Bar
 
-<p>{{PreviousNext("XSLT dans Gecko", "XSLT dans Gecko:Génération de HTML")}}</p>
+{{PreviousNext("XSLT dans Gecko", "XSLT dans Gecko:Génération de HTML")}}
diff --git a/files/fr/web/api/xsltprocessor/browser_differences/index.md b/files/fr/web/api/xsltprocessor/browser_differences/index.md
index 5ab86ed667..a8cb10124a 100644
--- a/files/fr/web/api/xsltprocessor/browser_differences/index.md
+++ b/files/fr/web/api/xsltprocessor/browser_differences/index.md
@@ -4,20 +4,16 @@ slug: Web/API/XSLTProcessor/Browser_Differences
 translation_of: Web/API/XSLTProcessor/Browser_Differences
 original_slug: XSLT_dans_Gecko/Différences_entre_les_navigateurs
 ---
-<p></p><ol>
-<li><a href="/fr/docs/XSLT_dans_Gecko">Introduction</a></li>
-<li><a href="/fr/docs/XSLT_dans_Gecko/Exemple_basique">Exemple basique</a></li>
-<li><a href="/fr/docs/XSLT_dans_Gecko/G%c3%a9n%c3%a9ration_de_HTML">Génération de HTML</a></li>
-<li><a href="/fr/docs/XSLT_dans_Gecko/Diff%c3%a9rences_entre_les_navigateurs">Différences entre les navigateurs</a></li>
-<li><a href="/fr/docs/XSLT_dans_Gecko/Ressources">Ressources</a></li>
-</ol><p></p>
+1.  [Introduction](/fr/docs/XSLT_dans_Gecko)
+2.  [Exemple basique](/fr/docs/XSLT_dans_Gecko/Exemple_basique)
+3.  [Génération de HTML](/fr/docs/XSLT_dans_Gecko/G%c3%a9n%c3%a9ration_de_HTML)
+4.  [Différences entre les navigateurs](/fr/docs/XSLT_dans_Gecko/Diff%c3%a9rences_entre_les_navigateurs)
+5.  [Ressources](/fr/docs/XSLT_dans_Gecko/Ressources)
 
-<h2 id="Diff.C3.A9rences_entre_les_navigateurs">Différences entre les navigateurs</h2>
+## Différences entre les navigateurs
 
-<ul>
- <li>Netscape 7.x (toutes plateformes confondues) et Internet Explorer 6 (Windows) support ent la recommandation <a href="http://www.w3.org/TR/xslt">XSLT 1.0 (en)</a> du W3C.</li>
- <li>IE 5.0 et 5.5 (Windows) ne supportent que le brouillon de travail de XSLT, et ne sont donc pas compatibles avec les feuilles de style XSLT 1.0.</li>
- <li>Netscape 6.x ne supporte que partiellement XSLT 1.0.</li>
-</ul>
+- Netscape 7.x (toutes plateformes confondues) et Internet Explorer 6 (Windows) support ent la recommandation [XSLT 1.0 (en)](http://www.w3.org/TR/xslt) du W3C.
+- IE 5.0 et 5.5 (Windows) ne supportent que le brouillon de travail de XSLT, et ne sont donc pas compatibles avec les feuilles de style XSLT 1.0.
+- Netscape 6.x ne supporte que partiellement XSLT 1.0.
 
-<p>{{PreviousNext("XSLT dans Gecko:Génération de HTML", "XSLT dans Gecko:Ressources")}}</p>
+{{PreviousNext("XSLT dans Gecko:Génération de HTML", "XSLT dans Gecko:Ressources")}}
diff --git a/files/fr/web/api/xsltprocessor/generating_html/index.md b/files/fr/web/api/xsltprocessor/generating_html/index.md
index 59286d20d5..535ee31fe5 100644
--- a/files/fr/web/api/xsltprocessor/generating_html/index.md
+++ b/files/fr/web/api/xsltprocessor/generating_html/index.md
@@ -4,188 +4,181 @@ slug: Web/API/XSLTProcessor/Generating_HTML
 translation_of: Web/API/XSLTProcessor/Generating_HTML
 original_slug: XSLT_dans_Gecko/Génération_de_HTML
 ---
-<p></p><ol>
-<li><a href="/fr/docs/XSLT_dans_Gecko">Introduction</a></li>
-<li><a href="/fr/docs/XSLT_dans_Gecko/Exemple_basique">Exemple basique</a></li>
-<li><a href="/fr/docs/XSLT_dans_Gecko/G%c3%a9n%c3%a9ration_de_HTML">Génération de HTML</a></li>
-<li><a href="/fr/docs/XSLT_dans_Gecko/Diff%c3%a9rences_entre_les_navigateurs">Différences entre les navigateurs</a></li>
-<li><a href="/fr/docs/XSLT_dans_Gecko/Ressources">Ressources</a></li>
-</ol><p></p>
+1.  [Introduction](/fr/docs/XSLT_dans_Gecko)
+2.  [Exemple basique](/fr/docs/XSLT_dans_Gecko/Exemple_basique)
+3.  [Génération de HTML](/fr/docs/XSLT_dans_Gecko/G%c3%a9n%c3%a9ration_de_HTML)
+4.  [Différences entre les navigateurs](/fr/docs/XSLT_dans_Gecko/Diff%c3%a9rences_entre_les_navigateurs)
+5.  [Ressources](/fr/docs/XSLT_dans_Gecko/Ressources)
 
-<h2 id="G.C3.A9n.C3.A9ration_de_HTML">Génération de HTML</h2>
+## Génération de HTML
 
-<p>Une application courante de XSLT dans les navigateurs est la transformation de code XML en HTML du coté du client. Le second exemple va transformer un document d'entrée (example2.xml), qui contient des informations à propos d'un article, en un document HTML.</p>
+Une application courante de XSLT dans les navigateurs est la transformation de code XML en HTML du coté du client. Le second exemple va transformer un document d'entrée (example2.xml), qui contient des informations à propos d'un article, en un document HTML.
 
-<p>L'élément <code>&lt;body&gt;</code> de l'article contient maintenant des éléments HTML (des balises <code>&lt;strong&gt;</code> et <code>&lt;em&gt;</code>, voir la figure 2). Le document XML contient à la fois des éléments HTML et éléments XML, mais un seul espace de nommage est nécessaire, pour les éléments XML. Comme il n'existe pas d'espace de nommage HTML, et que l'utilisation de l'espace de nommage XHTML forcerait le XSL à créer un document XML qui pourrait ne pas se comporter comme un document HTML, le nœud <code>xsl:output</code> de la feuille de style assure que le document résultant sera bien traité comme du HTML. Pour les éléments XML, nous avons besoin de notre propre espace de nommage, <code><a href="http://devedge.netscape.com/2002/de">http://devedge.netscape.com/2002/de</a></code>, à qui nous donnons le préfixe myNS <code>(xmlns:myNS="http://devedge.netscape.com/2002/de")</code>.</p>
+L'élément `<body>` de l'article contient maintenant des éléments HTML (des balises `<strong>` et `<em>`, voir la figure 2). Le document XML contient à la fois des éléments HTML et éléments XML, mais un seul espace de nommage est nécessaire, pour les éléments XML. Comme il n'existe pas d'espace de nommage HTML, et que l'utilisation de l'espace de nommage XHTML forcerait le XSL à créer un document XML qui pourrait ne pas se comporter comme un document HTML, le nœud `xsl:output` de la feuille de style assure que le document résultant sera bien traité comme du HTML. Pour les éléments XML, nous avons besoin de notre propre espace de nommage, [`http://devedge.netscape.com/2002/de`](http://devedge.netscape.com/2002/de), à qui nous donnons le préfixe myNS `(xmlns:myNS="http://devedge.netscape.com/2002/de")`.
 
-<p><small><strong>Figure 2 : fichier XML (example2.xml)voir l'exemple | voir le source</strong></small> Document XML (example2.xml): &lt;div style="background: #EEE; font-size: 1.1em; line-height: 1.1em; border: dashed #666 1px; padding: 15px 20px 15px 20px; overflow: auto;"&gt;</p>
+**Figure 2 : fichier XML (example2.xml)voir l'exemple | voir le source** Document XML (example2.xml): \<div style="background: #EEE; font-size: 1.1em; line-height: 1.1em; border: dashed #666 1px; padding: 15px 20px 15px 20px; overflow: auto;">
 
-<pre class="eval">&lt;?xml version="1.0"?&gt;
-&lt;?xml-stylesheet type="text/xsl" href="example.xsl"?&gt;
-  &lt;myNS:Article xmlns:myNS="<a href="http://devedge.netscape.com/2002/de">http://devedge.netscape.com/2002/de</a>"&gt;
-    &lt;myNS:Title&gt;Mon article&lt;/myNS:Title&gt;
-    &lt;myNS:Authors&gt;
-      &lt;myNS:Author company="Foopy Corp."&gt;M. Foo&lt;/myNS:Author&gt;
-      &lt;myNS:Author&gt;M. Bar&lt;/myNS:Author&gt;
-    &lt;/myNS:Authors&gt;
-    &lt;myNS:Body&gt;
-      En &lt;em&gt;Espagne&lt;/em&gt;, les &lt;strong&gt;pluies&lt;/strong&gt; se concentrent
-      principalement dans les plaines.
-    &lt;/myNS:Body&gt;
-  &lt;/myNS:Article&gt;
-</pre>
+    <?xml version="1.0"?>
+    <?xml-stylesheet type="text/xsl" href="example.xsl"?>
+      <myNS:Article xmlns:myNS="http://devedge.netscape.com/2002/de">
+        <myNS:Title>Mon article</myNS:Title>
+        <myNS:Authors>
+          <myNS:Author company="Foopy Corp.">M. Foo</myNS:Author>
+          <myNS:Author>M. Bar</myNS:Author>
+        </myNS:Authors>
+        <myNS:Body>
+          En <em>Espagne</em>, les <strong>pluies</strong> se concentrent
+          principalement dans les plaines.
+        </myNS:Body>
+      </myNS:Article>
 
-<p>La feuille de style XSL utilisée aura besoin de deux espaces de nommage - un pour les éléments XSLT et un pour nos propres éléments XML utilisés dans le document XML. La sortie de la feuille de style XSL est définie à <code>HTML</code> à l'aide de l'élément <code>xsl:output</code>. En définissant la sortie comme étant du code HTML et en n'ayant pas d'espace de nommage pour les éléments résultants (coloré en bleu), ces éléments seront traités comme des éléments HTML.</p>
+La feuille de style XSL utilisée aura besoin de deux espaces de nommage - un pour les éléments XSLT et un pour nos propres éléments XML utilisés dans le document XML. La sortie de la feuille de style XSL est définie à `HTML` à l'aide de l'élément `xsl:output`. En définissant la sortie comme étant du code HTML et en n'ayant pas d'espace de nommage pour les éléments résultants (coloré en bleu), ces éléments seront traités comme des éléments HTML.
 
-<p><small><strong>Figure 3 : feuille de style XSL avec 2 espaces de nommage</strong> (example2.xsl)</small> feuille de style XSL (example2.xsl):</p>
+**Figure 3 : feuille de style XSL avec 2 espaces de nommage** (example2.xsl) feuille de style XSL (example2.xsl):
 
-<pre>  &lt;?xml version="1.0"?&gt;
-  &lt;xsl:stylesheet version="1.0"
-                           xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
-                           xmlns:myNS="http://devedge.netscape.com/2002/de"&gt;
+      <?xml version="1.0"?>
+      <xsl:stylesheet version="1.0"
+                               xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
+                               xmlns:myNS="http://devedge.netscape.com/2002/de">
 
-    &lt;xsl:output method="html"/&gt;
-    ...
-  &lt;/xsl:stylesheet&gt;
-</pre>
+        <xsl:output method="html"/>
+        ...
+      </xsl:stylesheet>
 
-<p>Un modèle s'appliquant au nœud racine du document XML est créé et utilisé pour créer la structure de base de la page HTML.</p>
+Un modèle s'appliquant au nœud racine du document XML est créé et utilisé pour créer la structure de base de la page HTML.
 
-<p><small><strong>Figure 4 : Création du document HTML de base</strong></small> feuille de style XSL (example2.xsl):</p>
+**Figure 4 : Création du document HTML de base** feuille de style XSL (example2.xsl):
 
-<pre>  ...
-  &lt;xsl:template match="/"&gt;
-  &lt;html&gt;
+      ...
+      <xsl:template match="/">
+      <html>
 
-    &lt;head&gt;
+        <head>
 
-      &lt;title&gt;
-        &lt;xsl:value-of select="/myNS:Article/myNS:Title"/&gt;
-      &lt;/title&gt;
+          <title>
+            <xsl:value-of select="/myNS:Article/myNS:Title"/>
+          </title>
 
-      &lt;style type="text/css"&gt;
-        .myBox {margin:10px 155px 0 50px; border: 1px dotted #639ACE; padding:0 5px 0 5px;}
-      &lt;/style&gt;
+          <style type="text/css">
+            .myBox {margin:10px 155px 0 50px; border: 1px dotted #639ACE; padding:0 5px 0 5px;}
+          </style>
 
-    &lt;/head&gt;
+        </head>
 
-    &lt;body&gt;
-      &lt;p class="myBox"&gt;
-        &lt;span class="title"&gt;
-          &lt;xsl:value-of select="/myNS:Article/myNS:Title"/&gt;
-        &lt;/span&gt; &lt;br /&gt;
+        <body>
+          <p class="myBox">
+            <span class="title">
+              <xsl:value-of select="/myNS:Article/myNS:Title"/>
+            </span> <br />
 
-        Auteurs :   &lt;br /&gt;
-          &lt;xsl:apply-templates select="/myNS:Article/myNS:Authors/myNS:Author"/&gt;
-      &lt;/p&gt;
+            Auteurs :   <br />
+              <xsl:apply-templates select="/myNS:Article/myNS:Authors/myNS:Author"/>
+          </p>
 
-      &lt;p class="myBox"&gt;
-        &lt;xsl:apply-templates select="//myNS:Body"/&gt;
-      &lt;/p&gt;
+          <p class="myBox">
+            <xsl:apply-templates select="//myNS:Body"/>
+          </p>
 
-    &lt;/body&gt;
+        </body>
 
-  &lt;/html&gt;
-  &lt;/xsl:template&gt;
-  ...
-</pre>
+      </html>
+      </xsl:template>
+      ...
 
-<p>Nous avons besoin de trois <code>xsl:template</code> supplémentaires pour parachever l'exemple. Le premier <code>xsl:template</code> est utilisé pour les nœuds <code>Author</code>, alors que le deuxième traite le nœud <code>body</code>. Le troisième possède une règle de correspondance générale qui lui permet de s'appliquer à chaque nœud et chaque attribut. Cela est nécessaire afin de préserver les éléments HTML présents dans le document XML : il s'appliquant à tous, et les recopie dans le document HTML créé par la transformation.</p>
+Nous avons besoin de trois `xsl:template` supplémentaires pour parachever l'exemple. Le premier `xsl:template` est utilisé pour les nœuds `Author`, alors que le deuxième traite le nœud `body`. Le troisième possède une règle de correspondance générale qui lui permet de s'appliquer à chaque nœud et chaque attribut. Cela est nécessaire afin de préserver les éléments HTML présents dans le document XML : il s'appliquant à tous, et les recopie dans le document HTML créé par la transformation.
 
-<p><strong><small>Figure 5 : Les 3 modèles finaux</small></strong> feuille de style XSL (example2.xsl):</p>
+**Figure 5 : Les 3 modèles finaux** feuille de style XSL (example2.xsl):
 
-<pre>  ...
-  &lt;xsl:template match="myNS:Author"&gt;
-     --   &lt;xsl:value-of select="." /&gt;
+      ...
+      <xsl:template match="myNS:Author">
+         --   <xsl:value-of select="." />
 
-    &lt;xsl:if test="@company"&gt;
-     ::   &lt;strong&gt;  &lt;xsl:value-of select="@company" /&gt;  &lt;/strong&gt;
-    &lt;/xsl:if&gt;
+        <xsl:if test="@company">
+         ::   <strong>  <xsl:value-of select="@company" />  </strong>
+        </xsl:if>
 
-    &lt;br /&gt;
-  &lt;/xsl:template&gt;
+        <br />
+      </xsl:template>
 
-  &lt;xsl:template match="myNS:Body"&gt;
-    &lt;xsl:copy&gt;
-      &lt;xsl:apply-templates select="@*|node()"/&gt;
-    &lt;/xsl:copy&gt;
-  &lt;/xsl:template&gt;
+      <xsl:template match="myNS:Body">
+        <xsl:copy>
+          <xsl:apply-templates select="@*|node()"/>
+        </xsl:copy>
+      </xsl:template>
 
-  &lt;xsl:template match="@*|node()"&gt;
-    &lt;xsl:copy&gt;
-      &lt;xsl:apply-templates select="@*|node()"/&gt;
-    &lt;/xsl:copy&gt;
-  &lt;/xsl:template&gt;
-  ...
-</pre>
+      <xsl:template match="@*|node()">
+        <xsl:copy>
+          <xsl:apply-templates select="@*|node()"/>
+        </xsl:copy>
+      </xsl:template>
+      ...
 
-<p>La feuille de style XSLT finale est donc :</p>
+La feuille de style XSLT finale est donc :
 
-<p><small><strong>Figure 6 : feuille de style XSLT finale voir l'exemple | voir le source</strong></small> feuille de style XSL :</p>
+**Figure 6 : feuille de style XSLT finale voir l'exemple | voir le source** feuille de style XSL :
 
-<pre>  &lt;?xml version="1.0"?&gt;
-  &lt;xsl:stylesheet version="1.0"
-                           xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
-                           xmlns:myNS="http://devedge.netscape.com/2002/de"&gt;
+      <?xml version="1.0"?>
+      <xsl:stylesheet version="1.0"
+                               xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
+                               xmlns:myNS="http://devedge.netscape.com/2002/de">
 
-    &lt;xsl:output method="html" /&gt;
+        <xsl:output method="html" />
 
-    &lt;xsl:template match="/"&gt;
-      &lt;html&gt;
+        <xsl:template match="/">
+          <html>
 
-        &lt;head&gt;
+            <head>
 
-          &lt;title&gt;
-            &lt;xsl:value-of select="/myNS:Article/myNS:Title"/&gt;
-          &lt;/title&gt;
+              <title>
+                <xsl:value-of select="/myNS:Article/myNS:Title"/>
+              </title>
 
-          &lt;style type="text/css"&gt;
-            .myBox {margin:10px 155px 0 50px; border: 1px dotted #639ACE; padding:0 5px 0 5px;}
-          &lt;/style&gt;
+              <style type="text/css">
+                .myBox {margin:10px 155px 0 50px; border: 1px dotted #639ACE; padding:0 5px 0 5px;}
+              </style>
 
-        &lt;/head&gt;
+            </head>
 
-        &lt;body&gt;
-          &lt;p class="myBox"&gt;
-            &lt;span class="title"&gt;
-              &lt;xsl:value-of select="/myNS:Article/myNS:Title"/&gt;
-            &lt;/span&gt; &lt;br /&gt;
+            <body>
+              <p class="myBox">
+                <span class="title">
+                  <xsl:value-of select="/myNS:Article/myNS:Title"/>
+                </span> <br />
 
-            Authors:   &lt;br /&gt;
-              &lt;xsl:apply-templates select="/myNS:Article/myNS:Authors/myNS:Author"/&gt;
-            &lt;/p&gt;
+                Authors:   <br />
+                  <xsl:apply-templates select="/myNS:Article/myNS:Authors/myNS:Author"/>
+                </p>
 
-          &lt;p class="myBox"&gt;
-            &lt;xsl:apply-templates select="//myNS:Body"/&gt;
-          &lt;/p&gt;
+              <p class="myBox">
+                <xsl:apply-templates select="//myNS:Body"/>
+              </p>
 
-        &lt;/body&gt;
+            </body>
 
-      &lt;/html&gt;
-    &lt;/xsl:template&gt;
+          </html>
+        </xsl:template>
 
-    &lt;xsl:template match="myNS:Author"&gt;
-       --   &lt;xsl:value-of select="." /&gt;
+        <xsl:template match="myNS:Author">
+           --   <xsl:value-of select="." />
 
-      &lt;xsl:if test="@company"&gt;
-       ::   &lt;b&gt;  &lt;xsl:value-of select="@company" /&gt;  &lt;/b&gt;
-      &lt;/xsl:if&gt;
+          <xsl:if test="@company">
+           ::   <b>  <xsl:value-of select="@company" />  </b>
+          </xsl:if>
 
-      &lt;br /&gt;
-    &lt;/xsl:template&gt;
+          <br />
+        </xsl:template>
 
-    &lt;xsl:template match="myNS:Body"&gt;
-      &lt;xsl:copy&gt;
-        &lt;xsl:apply-templates select="@*|node()"/&gt;
-      &lt;/xsl:copy&gt;
-    &lt;/xsl:template&gt;
+        <xsl:template match="myNS:Body">
+          <xsl:copy>
+            <xsl:apply-templates select="@*|node()"/>
+          </xsl:copy>
+        </xsl:template>
 
-    &lt;xsl:template match="@*|node()"&gt;
-        &lt;xsl:copy&gt;
-          &lt;xsl:apply-templates select="@*|node()"/&gt;
-        &lt;/xsl:copy&gt;
-    &lt;/xsl:template&gt;
-  &lt;/xsl:stylesheet&gt;
-</pre>
+        <xsl:template match="@*|node()">
+            <xsl:copy>
+              <xsl:apply-templates select="@*|node()"/>
+            </xsl:copy>
+        </xsl:template>
+      </xsl:stylesheet>
 
-<p>{{PreviousNext("XSLT dans Gecko:Exemple basique", "XSLT dans Gecko:Différences entre les navigateurs")}}</p>
+{{PreviousNext("XSLT dans Gecko:Exemple basique", "XSLT dans Gecko:Différences entre les navigateurs")}}
diff --git a/files/fr/web/api/xsltprocessor/index.md b/files/fr/web/api/xsltprocessor/index.md
index 68179a3bce..27da398efa 100644
--- a/files/fr/web/api/xsltprocessor/index.md
+++ b/files/fr/web/api/xsltprocessor/index.md
@@ -10,126 +10,81 @@ tags:
   - XSLT
 translation_of: Web/API/XSLTProcessor
 ---
-<div>{{APIRef("XSLT")}}</div>
-
-<p>Un <strong><code>XSLTProcessor</code></strong> applique une transformation de feuille de style <a href="/en-US/docs/Web/XSLT">XSLT</a> à un document XML pour générer un nouveau document XML. Il fait appel à des méthodes pour charger la feuille de style XSLT, donner des valeurs aux paramètres <code>&lt;xsl:param&gt;</code> et pour appliquer les transformations au document.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<p>Le constructeur n'a pas de paramètre.</p>
-
-<pre class="syntaxbox">new XSLTProcessor()</pre>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<dl>
- <dt><code><a href="/en-US/docs/Mozilla/WebIDL_bindings#Throws">[Throws]</a> void </code>{{domxref("XSLTProcessor.importStylesheet")}}<code>(</code>{{domxref("Node")}}<code> styleSheet)</code></dt>
- <dd>Importe une feuille de style XSLT. Si le nœud passé en argument est un nœud de document, vous pouvez passer une transformation XSL complète ou un <a href="http://www.w3.org/TR/xslt#result-element-stylesheet">transformation d'élèment résultant</a>; sinon, il doit s'agir d'un élèment <code>&lt;xsl:stylesheet&gt;</code> ou <code>&lt;xsl:transform&gt;</code>.</dd>
- <dt><code><a href="/en-US/docs/Mozilla/WebIDL_bindings#Throws">[Throws]</a> </code>{{domxref("DocumentFragment")}} {{domxref("XSLTProcessor.transformToFragment")}}<code>(</code>{{domxref("Node")}}<code> source, </code>{{domxref("Document")}}<code> owner)</code></dt>
- <dd>Transforme la source du nœud en applicant la fonction {{domxref("XSLTProcessor.importStylesheet()")}}. Le document propriétaire du fragment de document résultant est le nœud propriétaire.</dd>
- <dt><code><a href="/en-US/docs/Mozilla/WebIDL_bindings#Throws">[Throws]</a></code> {{domxref("Document")}} {{domxref("XSLTProcessor.transformToDocument")}}<code>(</code>{{domxref("Node")}}<code> source)</code></dt>
- <dd>
- <p>Transforme la source du nœud en appliquant la feuille de style donnée lors de l'importation à l'aide de la fonction {{domxref ("XSLTProcessor.importStylesheet ()")}}.</p>
-
- <p>L'objet résultant dépend de la <a href="http://www.w3.org/TR/xslt#output">méthode de sortie</a> de la feuille de style :</p>
-
- <table class="standard-table">
-  <thead>
-   <tr>
-    <th scope="col">Méthode de sortie</th>
-    <th scope="col">Type de résultat</th>
-   </tr>
-  </thead>
-  <tbody>
-   <tr>
-    <td><code>html</code></td>
-    <td>{{domxref("HTMLDocument")}}</td>
-   </tr>
-   <tr>
-    <td><code>xml</code></td>
-    <td>{{domxref("XMLDocument")}}</td>
-   </tr>
-   <tr>
-    <td><code>text</code></td>
-    <td>{{domxref("XMLDocument")}} avec un seul élèment racine <code>&lt;transformiix:result&gt;</code> avec le texte comme enfant</td>
-   </tr>
-  </tbody>
- </table>
- </dd>
- <dt><code><a href="/en-US/docs/Mozilla/WebIDL_bindings#Throws">[Throws]</a> void </code>{{domxref("XSLTProcessor.setParameter")}}<code>(</code>{{jsxref("String")}}<code> namespaceURI, </code>{{jsxref("String")}}<code> localName, any value)</code></dt>
- <dd>Définit un paramètre dans la feuille de style XSLT qui a été importée. (Définit la valeur d'un <code>&lt;xsl:param&gt;</code>.) Une valeur nulle pour <code>namespaceURI</code> sera traitée comme une chaîne vide.</dd>
- <dt><code><a href="/en-US/docs/Mozilla/WebIDL_bindings#Throws">[Throws]</a> any </code>{{domxref("XSLTProcessor.getParameter")}}<code>(</code>{{jsxref("String")}}<code> namespaceURI, </code>{{jsxref("String")}}<code> localName)</code></dt>
- <dd>Récupére un paramètre de la feuille de style XSLT. Une valeur nulle pour <code>namespaceURI</code> sera traitée comme une chaîne vide.</dd>
- <dt><code><a href="/en-US/docs/Mozilla/WebIDL_bindings#Throws">[Throws]</a> void </code>{{domxref("XSLTProcessor.removeParameter")}}<code>(</code>{{jsxref("String")}}<code> namespaceURI, </code>{{jsxref("String")}}<code> localName)</code></dt>
- <dd>Supprime le paramètre s'il a déjà été défni. Le <code>XSLTProcessor</code> utilisera alors la valeur par défaut du paramètre. Si une valeur nulle est donnée pour <code>namespaceURI</code>, elle sera traitée comme une chaîne vide.</dd>
- <dt><code>void </code>{{domxref("XSLTProcessor.clearParameters()")}}</dt>
- <dd>Supprime tous les paramètres définis dans le <code>XSLTProcessor</code>. Le <code>XSLTProcessor</code> utilisera alors les valeurs par défaut spécifiées dans la feuille de style XSLT.</dd>
- <dt><code>void </code>{{domxref("XSLTProcessor.reset()")}}</dt>
- <dd>Supprime tous les paramétres et feuilles de style du <code>XSLTProcessor</code>.</dd>
-</dl>
-
-<h2 id="Propriétés">Propriétés</h2>
-
-<h3 id="Propriétés_non-apparentes_au_Web">Propriétés non-apparentes au Web</h3>
-
-<p>Les propriétés suivantes sont <a href="/en-US/docs/Mozilla/WebIDL_bindings#ChromeOnly"><code>[ChromeOnly]</code></a> et ne sont pas apparentes au contenu Web :</p>
-
-<dl>
- <dt><code><a href="/en-US/docs/Mozilla/WebIDL_bindings#ChromeOnly">[ChromeOnly]</a> attribute unsigned long </code>{{domxref("XSLTProcessor.flags")}}</dt>
- <dd>
- <p>Drapeaux qui modifient le comportement du processeur. Pas de réinitialisation en appelant {{domxref("XSLTProcessor.reset()")}}. Valeur par défaut: <code>0</code></p>
-
- <p>Possible values are:</p>
-
- <table class="standard-table">
-  <thead>
-   <tr>
-    <th scope="col">Nom</th>
-    <th scope="col">Valeur</th>
-    <th scope="col">Effet</th>
-   </tr>
-  </thead>
-  <tbody>
-   <tr>
-    <td>(None)</td>
-    <td><code>0</code></td>
-    <td>Aucun</td>
-   </tr>
-   <tr>
-    <td><code>DISABLE_ALL_LOADS</code></td>
-    <td><code>1</code></td>
-    <td>Désactiver le chargement de documents externes (par ex. <code>&lt;xsl:import&gt;</code> et <code>document()</code>)</td>
-   </tr>
-  </tbody>
- </table>
- </dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<ol>
- <li><a href="/fr-FR/docs/XSLT/XSLT_JS_Interface_in_Gecko/Basic_Example">Exemple simple</a></li>
- <li><a href="/fr-FR/docs/XSLT/XSLT_JS_Interface_in_Gecko/Advanced_Example">Exemple avancé</a></li>
- <li><a href="/fr-FR/docs/XSLT/XSLT_JS_Interface_in_Gecko/JavaScript_XSLT_Bindings">Exemple additionnel</a></li>
-</ol>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<p><em>Ne fait partie d'aucune spécification.</em> Il s'agit d'une interface propriétaire qui provient de Gecko.</p>
-
-<h2 id="Gecko_IDL">Gecko IDL</h2>
-
-<ul>
- <li><code>{{ Source("dom/webidl/XSLTProcessor.webidl", "XSLTProcessor.webidl") }}</code></li>
- <li><code>{{ Source("dom/xslt/nsIXSLTProcessor.idl", "nsIXSLTProcessor.idl") }}</code></li>
-</ul>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("api.XSLTProcessor")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr-FR/docs/Using_the_Mozilla_JavaScript_interface_to_XSL_Transformations">Utilisation de l'interface JavaScript de Mozilla pour les transformations XML</a></li>
-</ul>
+{{APIRef("XSLT")}}
+
+Un **`XSLTProcessor`** applique une transformation de feuille de style [XSLT](/en-US/docs/Web/XSLT) à un document XML pour générer un nouveau document XML. Il fait appel à des méthodes pour charger la feuille de style XSLT, donner des valeurs aux paramètres `<xsl:param>` et pour appliquer les transformations au document.
+
+## Syntaxe
+
+Le constructeur n'a pas de paramètre.
+
+    new XSLTProcessor()
+
+## Méthodes
+
+- `[Throws] void `{{domxref("XSLTProcessor.importStylesheet")}}`(`{{domxref("Node")}}` styleSheet)`
+  - : Importe une feuille de style XSLT. Si le nœud passé en argument est un nœud de document, vous pouvez passer une transformation XSL complète ou un [transformation d'élèment résultant](http://www.w3.org/TR/xslt#result-element-stylesheet); sinon, il doit s'agir d'un élèment `<xsl:stylesheet>` ou `<xsl:transform>`.
+- `[Throws] `{{domxref("DocumentFragment")}} {{domxref("XSLTProcessor.transformToFragment")}}`(`{{domxref("Node")}}` source, `{{domxref("Document")}}` owner)`
+  - : Transforme la source du nœud en applicant la fonction {{domxref("XSLTProcessor.importStylesheet()")}}. Le document propriétaire du fragment de document résultant est le nœud propriétaire.
+- [`[Throws]`](/en-US/docs/Mozilla/WebIDL_bindings#Throws) {{domxref("Document")}} {{domxref("XSLTProcessor.transformToDocument")}}`(`{{domxref("Node")}}` source)`
+
+  - : Transforme la source du nœud en appliquant la feuille de style donnée lors de l'importation à l'aide de la fonction {{domxref ("XSLTProcessor.importStylesheet ()")}}.
+
+    L'objet résultant dépend de la [méthode de sortie](http://www.w3.org/TR/xslt#output) de la feuille de style :
+
+    | Méthode de sortie | Type de résultat                                                                                                    |
+    | ----------------- | ------------------------------------------------------------------------------------------------------------------- |
+    | `html`            | {{domxref("HTMLDocument")}}                                                                                |
+    | `xml`             | {{domxref("XMLDocument")}}                                                                                |
+    | `text`            | {{domxref("XMLDocument")}} avec un seul élèment racine `<transformiix:result>` avec le texte comme enfant |
+
+- `[Throws] void `{{domxref("XSLTProcessor.setParameter")}}`(`{{jsxref("String")}}` namespaceURI, `{{jsxref("String")}}` localName, any value)`
+  - : Définit un paramètre dans la feuille de style XSLT qui a été importée. (Définit la valeur d'un `<xsl:param>`.) Une valeur nulle pour `namespaceURI` sera traitée comme une chaîne vide.
+- `[Throws] any `{{domxref("XSLTProcessor.getParameter")}}`(`{{jsxref("String")}}` namespaceURI, `{{jsxref("String")}}` localName)`
+  - : Récupére un paramètre de la feuille de style XSLT. Une valeur nulle pour `namespaceURI` sera traitée comme une chaîne vide.
+- `[Throws] void `{{domxref("XSLTProcessor.removeParameter")}}`(`{{jsxref("String")}}` namespaceURI, `{{jsxref("String")}}` localName)`
+  - : Supprime le paramètre s'il a déjà été défni. Le `XSLTProcessor` utilisera alors la valeur par défaut du paramètre. Si une valeur nulle est donnée pour `namespaceURI`, elle sera traitée comme une chaîne vide.
+- `void `{{domxref("XSLTProcessor.clearParameters()")}}
+  - : Supprime tous les paramètres définis dans le `XSLTProcessor`. Le `XSLTProcessor` utilisera alors les valeurs par défaut spécifiées dans la feuille de style XSLT.
+- `void `{{domxref("XSLTProcessor.reset()")}}
+  - : Supprime tous les paramétres et feuilles de style du `XSLTProcessor`.
+
+## Propriétés
+
+### Propriétés non-apparentes au Web
+
+Les propriétés suivantes sont [`[ChromeOnly]`](/en-US/docs/Mozilla/WebIDL_bindings#ChromeOnly) et ne sont pas apparentes au contenu Web :
+
+- `[ChromeOnly] attribute unsigned long `{{domxref("XSLTProcessor.flags")}}
+
+  - : Drapeaux qui modifient le comportement du processeur. Pas de réinitialisation en appelant {{domxref("XSLTProcessor.reset()")}}. Valeur par défaut: `0`
+
+    Possible values are:
+
+    | Nom                 | Valeur | Effet                                                                                   |
+    | ------------------- | ------ | --------------------------------------------------------------------------------------- |
+    | (None)              | `0`    | Aucun                                                                                   |
+    | `DISABLE_ALL_LOADS` | `1`    | Désactiver le chargement de documents externes (par ex. `<xsl:import>` et `document()`) |
+
+## Exemples
+
+1.  [Exemple simple](/fr-FR/docs/XSLT/XSLT_JS_Interface_in_Gecko/Basic_Example)
+2.  [Exemple avancé](/fr-FR/docs/XSLT/XSLT_JS_Interface_in_Gecko/Advanced_Example)
+3.  [Exemple additionnel](/fr-FR/docs/XSLT/XSLT_JS_Interface_in_Gecko/JavaScript_XSLT_Bindings)
+
+## Spécifications
+
+_Ne fait partie d'aucune spécification._ Il s'agit d'une interface propriétaire qui provient de Gecko.
+
+## Gecko IDL
+
+- `{{ Source("dom/webidl/XSLTProcessor.webidl", "XSLTProcessor.webidl") }}`
+- `{{ Source("dom/xslt/nsIXSLTProcessor.idl", "nsIXSLTProcessor.idl") }}`
+
+## Compatibilité des navigateurs
+
+{{Compat("api.XSLTProcessor")}}
+
+## Voir aussi
+
+- [Utilisation de l'interface JavaScript de Mozilla pour les transformations XML](/fr-FR/docs/Using_the_Mozilla_JavaScript_interface_to_XSL_Transformations)
diff --git a/files/fr/web/api/xsltprocessor/xsl_transformations_in_mozilla_faq/index.md b/files/fr/web/api/xsltprocessor/xsl_transformations_in_mozilla_faq/index.md
index e98799df65..59b57119e7 100644
--- a/files/fr/web/api/xsltprocessor/xsl_transformations_in_mozilla_faq/index.md
+++ b/files/fr/web/api/xsltprocessor/xsl_transformations_in_mozilla_faq/index.md
@@ -6,43 +6,50 @@ tags:
 translation_of: Web/API/XSLTProcessor/XSL_Transformations_in_Mozilla_FAQ
 original_slug: FAQ_sur_les_transformations_XSL_dans_Mozilla
 ---
+#### Pourquoi ma feuille de style ne s'applique pas ?
 
-<h4 id="Pourquoi_ma_feuille_de_style_ne_s.27applique_pas_.3F"> Pourquoi ma feuille de style ne s'applique pas ? </h4>
-<p>Vérifiez que le type MIME du document source et de la feuille de style est bien un type MIME XML, à savoir <code>text/xml</code> ou <code>application/xml</code>. L'espace de nommage XSLT est <code>http://www.w3.org/1999/XSL/Transform</code>. Utilisez l'instruction de traitement <code>&lt;?xml-stylesheet ?&gt;</code> plutôt que l'élément non standard <code>xml:stylesheet</code>. Le problème le plus courant est la gestion du type MIME. Pour savoir quel type MIME est envoyé par votre serveur, consultez les Informations sur la page, utilisez une extension telle que <a href="http://livehttpheaders.mozdev.org/">LiveHTTPHeaders (en)</a> ou un gestionnaire de téléchargements comme wget. Mozilla ne chargera pas les feuilles de style XSLT depuis un domaine différent pour des raisons de sécurité.
-</p>
-<h4 id="Cela_fonctione_dans_IE.2C_mais_pas_dans_Mozilla_.3F"> Cela fonctione dans IE, mais pas dans Mozilla ? </h4>
-<p>Il y a plus que cette "simple" différence. Nous suspectons que la plupart des différences proviennent de ce que fait IE après la transformation. IE (pour autant que l'on puisse dire) sérialise et analyse la sortie avant de générer ce qu'il rend. Mozilla, au contraire, rend exactement le résultat du votre transformation.
-</p>
-<h4 id="Puis-je_d.C3.A9sactiver_l.27.C3.A9chappement_de_la_sortie_avec_disable-output-escaping_.3F"> Puis-je désactiver l'échappement de la sortie avec <code>disable-output-escaping</code> ? </h4>
-<p>Cette question est en fait très proche de la précédente. Pour faire court, non. Désactiver l'échappement en sortie nécessite que nous ajoutions une étape d'analyse à la génération de notre sortie, ce que nous ne voulons pas. Dans la plupart des cas, il existe des contournements assez facile à mettre en œuvre. Les seuls cas d'utilisation que nous ayons vu jusqu'à présent sont du mauvais XML, du mauvais XSLT, ou les flux RSS. Ce dernier est pour nous le seul problème, et nous sommes désolé de ne pouvoir le supporter, mais mélanger l'analyse avec le XSLT est à risque et nous préférons ne pas le supporter <b>d-o-e</b> plutôt que de provoquer des crashes ou de ralentir le processus.
-</p>
-<h4 id="Que_dire_de_document.write_.3F"> Que dire de <code>document.write</code> ? </h4>
-<p>Tout comme pour le XHTML, <code>document.write</code> n'est pas supporté pendant les transformations XSLT. Malheureusement, les compilations actuelles ne retournent pas d'erreur, mais donnent simplement des résultats inattendus, comme des crashes ({{ Bug(202765) }}). Dans la plupart des cas il n'y a en fait aucune raison de l'utiliser. Si vous avez besoin d'employer du code ou une feuille de style spécifique à une plate-forme, utilisez ce qui suit :
-</p>
-<pre>      &lt;xsl:if test="system-property('xsl:vendor')='Transformiix'"&gt;
-        &lt;!-- Balisage propre à Mozilla --&gt;
-      &lt;/xsl:if&gt;
-      &lt;xsl:if test="system-property('xsl:vendor')='Microsoft'"&gt;
-        &lt;!-- Balisage propre à IE --&gt;
-      &lt;/xsl:if&gt;
-</pre>
-<p>Vérifiez system-properties.xml pour les propriétés de votre système favori. MSXML possède une propriété supplémentaire :
-</p>
-<pre>      &lt;xsl:if xmlns:msxsl="urn:schemas-microsoft-com:xslt"
-              test="system-property('msxsl:version')=3"&gt;
-        &lt;!-- MSXML3 specific markup --&gt;
-      &lt;/xsl:if&gt;
-</pre>
-<h4 id="Que_dire_de_media.3D.22print.22.3F"> Que dire de <code>media="print"</code>? </h4>
-<p>Lors de l'impression d'un document, Mozilla tente de produire une page imprimée aussi proche que possible de l'affichage à l'écran, en incluant par exemple le texte saisi dans des champs de formulaire, et tout autre changement dynamique. Pour cela, on imprime l'arbre DOM actuel. Utiliser une feuille de style XSLT spécifique à un <code>media</code> particulier requiererait une nouvelle transformation du document XML source original, ce qui pourrait produire une sortie différant de ce à quoi l'utilisateur s'attend. Aussi, l'utilisation de <code>media</code> dans &lt;?xml-stylesheet ?&gt; est fortement déconseillée. Les futures compilations pourraient ne charger une feuille de style XSLT que si <code>media</code> n'est pas spécifié, ou si le <code>media</code> spécifié comporte <code>screen</code>.
-</p><p>Ceci n'affecte pas les feuilles de style CSS chargées depuis le DOM généré, qui emploient <code>media</code> comme les pages sans XSLT<b>.</b>
-</p>
-<h4 id="Comment_faire_transformNode.3F"> Comment faire <code>transformNode</code>? </h4>
-<p>Il existe <code>transformToDocument</code> et <code>transformToFragment</code> depuis Mozilla 1.2, voir <a href="fr/Utilisation_de_l'interface_JavaScript_de_Mozilla_pour_les_transformations_XSL">Utilisation de l'interface JavaScript de Mozilla pour les transformations XSL</a>.
-</p>
-<h4 id="Pourquoi_Internet_Explorer_requiert-il_un_espace_de_nommage_diff.C3.A9rent_de_celui_de_Mozilla_.3F"> Pourquoi Internet Explorer requiert-il un espace de nommage différent de celui de Mozilla ? </h4>
-<p>Jusqu'à sa version 6, IE requiert un espace de nommage déprécié issu d'un brouillon XSLT, merci d'utiliser Mozilla ;-), IE6+ ou MSXML3+, qui ne posent pas ce problème. Comme les différences entre XSLT 1.0 et l'implémentation dans IE de ce brouillon sont significatives, nous n'offrons pas de support.
-</p>
-<h4 id="Comment_compiler_une_version_autonome_de_TransforMiiX_.3F"> Comment compiler une version autonome de TransforMiiX ? </h4>
-<p>Voir l'article sur <a href="fr/Compilation_de_TransforMiiX">Compilation de TransforMiiX</a>.
-</p>
\ No newline at end of file
+Vérifiez que le type MIME du document source et de la feuille de style est bien un type MIME XML, à savoir `text/xml` ou `application/xml`. L'espace de nommage XSLT est `http://www.w3.org/1999/XSL/Transform`. Utilisez l'instruction de traitement `<?xml-stylesheet ?>` plutôt que l'élément non standard `xml:stylesheet`. Le problème le plus courant est la gestion du type MIME. Pour savoir quel type MIME est envoyé par votre serveur, consultez les Informations sur la page, utilisez une extension telle que [LiveHTTPHeaders (en)](http://livehttpheaders.mozdev.org/) ou un gestionnaire de téléchargements comme wget. Mozilla ne chargera pas les feuilles de style XSLT depuis un domaine différent pour des raisons de sécurité.
+
+#### Cela fonctione dans IE, mais pas dans Mozilla ?
+
+Il y a plus que cette "simple" différence. Nous suspectons que la plupart des différences proviennent de ce que fait IE après la transformation. IE (pour autant que l'on puisse dire) sérialise et analyse la sortie avant de générer ce qu'il rend. Mozilla, au contraire, rend exactement le résultat du votre transformation.
+
+#### Puis-je désactiver l'échappement de la sortie avec `disable-output-escaping` ?
+
+Cette question est en fait très proche de la précédente. Pour faire court, non. Désactiver l'échappement en sortie nécessite que nous ajoutions une étape d'analyse à la génération de notre sortie, ce que nous ne voulons pas. Dans la plupart des cas, il existe des contournements assez facile à mettre en œuvre. Les seuls cas d'utilisation que nous ayons vu jusqu'à présent sont du mauvais XML, du mauvais XSLT, ou les flux RSS. Ce dernier est pour nous le seul problème, et nous sommes désolé de ne pouvoir le supporter, mais mélanger l'analyse avec le XSLT est à risque et nous préférons ne pas le supporter **d-o-e** plutôt que de provoquer des crashes ou de ralentir le processus.
+
+#### Que dire de `document.write` ?
+
+Tout comme pour le XHTML, `document.write` n'est pas supporté pendant les transformations XSLT. Malheureusement, les compilations actuelles ne retournent pas d'erreur, mais donnent simplement des résultats inattendus, comme des crashes ({{ Bug(202765) }}). Dans la plupart des cas il n'y a en fait aucune raison de l'utiliser. Si vous avez besoin d'employer du code ou une feuille de style spécifique à une plate-forme, utilisez ce qui suit :
+
+          <xsl:if test="system-property('xsl:vendor')='Transformiix'">
+            <!-- Balisage propre à Mozilla -->
+          </xsl:if>
+          <xsl:if test="system-property('xsl:vendor')='Microsoft'">
+            <!-- Balisage propre à IE -->
+          </xsl:if>
+
+Vérifiez system-properties.xml pour les propriétés de votre système favori. MSXML possède une propriété supplémentaire :
+
+          <xsl:if xmlns:msxsl="urn:schemas-microsoft-com:xslt"
+                  test="system-property('msxsl:version')=3">
+            <!-- MSXML3 specific markup -->
+          </xsl:if>
+
+#### Que dire de `media="print"`?
+
+Lors de l'impression d'un document, Mozilla tente de produire une page imprimée aussi proche que possible de l'affichage à l'écran, en incluant par exemple le texte saisi dans des champs de formulaire, et tout autre changement dynamique. Pour cela, on imprime l'arbre DOM actuel. Utiliser une feuille de style XSLT spécifique à un `media` particulier requiererait une nouvelle transformation du document XML source original, ce qui pourrait produire une sortie différant de ce à quoi l'utilisateur s'attend. Aussi, l'utilisation de `media` dans \<?xml-stylesheet ?> est fortement déconseillée. Les futures compilations pourraient ne charger une feuille de style XSLT que si `media` n'est pas spécifié, ou si le `media` spécifié comporte `screen`.
+
+Ceci n'affecte pas les feuilles de style CSS chargées depuis le DOM généré, qui emploient `media` comme les pages sans XSLT**.**
+
+#### Comment faire `transformNode`?
+
+Il existe `transformToDocument` et `transformToFragment` depuis Mozilla 1.2, voir [Utilisation de l'interface JavaScript de Mozilla pour les transformations XSL](fr/Utilisation_de_l'interface_JavaScript_de_Mozilla_pour_les_transformations_XSL).
+
+#### Pourquoi Internet Explorer requiert-il un espace de nommage différent de celui de Mozilla ?
+
+Jusqu'à sa version 6, IE requiert un espace de nommage déprécié issu d'un brouillon XSLT, merci d'utiliser Mozilla ;-), IE6+ ou MSXML3+, qui ne posent pas ce problème. Comme les différences entre XSLT 1.0 et l'implémentation dans IE de ce brouillon sont significatives, nous n'offrons pas de support.
+
+#### Comment compiler une version autonome de TransforMiiX ?
+
+Voir l'article sur [Compilation de TransforMiiX](fr/Compilation_de_TransforMiiX).